From efd11b7bf2672620d16749b4c419d6c0fdac1dfa Mon Sep 17 00:00:00 2001 From: easylogic Date: Wed, 25 May 2022 18:27:56 +0900 Subject: [PATCH] Refactoring blank, design editor remove three, whiteboard, data editor --- .eslintrc.json | 4 +- 3d.html | 24 - blank.html | 19 - dataeditor.html | 19 - dist/editor.es.js | 103080 +++++---------- dist/editor.umd.js | 5569 +- dist/style.css | 2 +- docs/3d.html | 27 - docs/assets/blankeditor.2ece4c0d.js | 1 - docs/assets/dataeditor.f8c67166.js | 1 - docs/assets/editor.57e24637.js | 1 - docs/assets/editor.58120e25.css | 1 + docs/assets/editor.5891116e.js | 3794 + docs/assets/index.0a251ad3.css | 1 - docs/assets/index.e23f8a81.js | 6951 - docs/assets/threeeditor.ed4bcd7c.js | 1 - docs/assets/whiteboard.f49881ff.js | 1 - docs/blank.html | 22 - docs/dataeditor.html | 22 - docs/index.html | 5 +- docs/whiteboard.html | 22 - package.json | 1 - pagebuilder.html | 24 - src/apps/blankeditor/area/BlankInspector.jsx | 18 +- src/apps/blankeditor/area/BlankStatusbar.jsx | 13 + src/apps/blankeditor/area/BlankStatusbar.scss | 7 + .../blankeditor/area/tool-bar/BlankToolBar.js | 7 + .../area/tool-bar/BlankToolBar.scss | 19 +- src/apps/blankeditor/index.jsx | 190 +- src/apps/blankeditor/layout.scss | 129 +- src/apps/common/area/Inspector.jsx | 82 - src/apps/common/area/LayerTab.js | 116 - src/apps/common/area/tool-bar/ToolBar.js | 161 - src/apps/common/area/tool-bar/ToolBar.scss | 97 - .../common/area/tool-bar/ToolbarMenuItem.scss | 7 +- src/apps/common/layout/DefaultLayout.jsx | 57 +- src/apps/common/layout/DefaultLayout.scss | 12 +- src/apps/dataeditor/index.js | 129 - src/apps/dataeditor/layout.scss | 46 - .../dataeditor/plugins/data-editor-plugins.js | 19 - .../addBackgroundImageGradient.js | 2 +- src/apps/designeditor/index.js | 308 - src/apps/designeditor/index.jsx | 74 + src/apps/designeditor/layout.scss | 214 +- src/apps/designeditor/menus/DefaultMenu.js | 2 +- .../BackgroundImageEditor.scss | 3 +- .../BackgroundImageProperty.scss | 9 +- .../border-radius/BorderRadiusEditor.js | 23 +- .../border-radius/BorderRadiusEditor.scss | 15 +- .../plugins/border/BorderEditor.scss | 2 +- .../plugins/design-editor-plugins.js | 6 +- .../plugins/gradient-asset/index.js | 12 - .../designeditor/plugins/image-asset/index.js | 2 - .../designeditor/plugins/inspector/index.js | 18 + .../designeditor/plugins/layertab/index.js | 58 +- .../layertab}/object-list/AssetItems.js | 0 .../layertab}/object-list/CustomAssets.js | 0 .../layertab}/object-list/CustomAssets.scss | 0 .../layertab}/object-list/LibraryItems.js | 0 .../layertab}/object-list/LibraryItems.scss | 0 .../layertab}/object-list/ObjectItems.js | 0 .../layertab}/object-list/ObjectItems.scss | 0 .../asset}/GradientAssetsProperty.js | 2 +- .../asset}/GradientAssetsProperty.scss | 2 +- .../object-list/asset}/ImageAssetsProperty.js | 0 .../asset}/ImageAssetsProperty.scss | 0 .../asset}/PatternAssetsProperty.js | 2 +- .../asset}/PatternAssetsProperty.scss | 0 .../object-list/asset}/VideoAssetsProperty.js | 2 +- .../asset}/VideoAssetsProperty.scss | 0 .../plugins/layout/FlexLayoutEditor.js | 1 + .../plugins/layout/ResizingProperty.scss | 6 +- src/apps/designeditor/plugins/menus/index.js | 80 + .../plugins/pattern-asset/PatternEditor.scss | 4 + .../plugins/pattern-asset/index.js | 2 +- .../plugins/position/PositionProperty.js | 2 +- src/apps/index.js | 18 - src/apps/three-editor/area/Body3DPanel.js | 30 - src/apps/three-editor/area/Body3DPanel.scss | 44 - src/apps/three-editor/area/ThreeInspector.jsx | 61 - .../area/body-panel/Canvas3DView.jsx | 20 - .../area/body-panel/Canvas3DView.scss | 33 - .../three-render-view/ThreeRenderView.js | 294 - .../three-render-view/ThreeRenderView.md | 3 - .../three-render-view/ThreeRenderView.scss | 28 - .../commands/command_list/addCubeBox.js | 20 - .../command_list/editor.config.body.event.js | 11 - src/apps/three-editor/commands/index.js | 10 - src/apps/three-editor/index.js | 267 - src/apps/three-editor/layout.scss | 210 - .../three-editor/managers/SceneManager.js | 450 - src/apps/three-editor/menus/DefaultMenu.js | 9 - .../three-editor/plugins/commands/index.js | 5 - src/apps/three-editor/plugins/menus/index.js | 5 - .../plugins/three-editor-plugins.js | 26 - .../plugins/three-helpers/ViewportHelper.jsx | 51 - .../plugins/three-helpers/ViewportHelper.scss | 20 - .../plugins/three-helpers/index.js | 11 - src/apps/whiteboard/index.js | 116 - src/apps/whiteboard/layout.scss | 33 - .../whiteboard/plugins/whiteboard-plugins.js | 121 - src/bootstraps/blank.jsx | 189 - src/bootstraps/dataeditor.jsx | 74 - src/bootstraps/three-editor.jsx | 21 - src/bootstraps/whiteboard.jsx | 22 - .../commands/command_list/toggle.tool.hand.js | 2 +- src/elf/editor/model/BaseModel.js | 9 + .../shortcuts/shortcuts_list/set.tool.hand.js | 2 +- .../shortcuts_list/set.tool.hand.m.js | 2 +- src/elf/editor/ui/popup/BasePopup.scss | 7 +- src/elf/editor/ui/property/BaseProperty.scss | 27 +- src/elf/editor/ui/property/index.js | 5 - src/elf/ui/base/tab/Tabs.scss | 4 +- .../ui/base/toggle-button/ToggleButton.jsx | 1 + .../ui/base/toggle-button/ToggleButton.scss | 10 +- src/elf/ui/property-editor/ColorViewEditor.js | 22 +- src/elf/ui/property-editor/FilterEditor.scss | 2 - .../ui/property-editor/SelectIconEditor.scss | 18 +- .../renderer-html/HTMLRenderer/DomRender.js | 12 +- src/export-library/index.js | 2 + src/sapa/EventMachine.js | 13 +- src/sapa/functions/Dom.js | 2 + src/scss/designeditor.scss | 8 +- src/scss/themes/designeditor/dark.scss | 4 +- src/scss/themes/designeditor/light.scss | 4 +- vite.prod.config.js | 4 - whiteboard.html | 19 - 127 files changed, 41990 insertions(+), 81943 deletions(-) delete mode 100644 3d.html delete mode 100644 blank.html delete mode 100644 dataeditor.html delete mode 100644 docs/3d.html delete mode 100644 docs/assets/blankeditor.2ece4c0d.js delete mode 100644 docs/assets/dataeditor.f8c67166.js delete mode 100644 docs/assets/editor.57e24637.js create mode 100644 docs/assets/editor.58120e25.css create mode 100644 docs/assets/editor.5891116e.js delete mode 100644 docs/assets/index.0a251ad3.css delete mode 100644 docs/assets/index.e23f8a81.js delete mode 100644 docs/assets/threeeditor.ed4bcd7c.js delete mode 100644 docs/assets/whiteboard.f49881ff.js delete mode 100644 docs/blank.html delete mode 100644 docs/dataeditor.html delete mode 100644 docs/whiteboard.html delete mode 100644 pagebuilder.html create mode 100644 src/apps/blankeditor/area/BlankStatusbar.jsx create mode 100644 src/apps/blankeditor/area/BlankStatusbar.scss delete mode 100644 src/apps/common/area/Inspector.jsx delete mode 100644 src/apps/common/area/LayerTab.js delete mode 100644 src/apps/common/area/tool-bar/ToolBar.js delete mode 100644 src/apps/common/area/tool-bar/ToolBar.scss delete mode 100644 src/apps/dataeditor/index.js delete mode 100644 src/apps/dataeditor/layout.scss delete mode 100644 src/apps/dataeditor/plugins/data-editor-plugins.js delete mode 100644 src/apps/designeditor/index.js create mode 100644 src/apps/designeditor/index.jsx delete mode 100644 src/apps/designeditor/plugins/gradient-asset/index.js create mode 100644 src/apps/designeditor/plugins/inspector/index.js rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/AssetItems.js (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/CustomAssets.js (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/CustomAssets.scss (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/LibraryItems.js (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/LibraryItems.scss (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/ObjectItems.js (100%) rename src/apps/{common/area => designeditor/plugins/layertab}/object-list/ObjectItems.scss (100%) rename src/apps/designeditor/plugins/{gradient-asset => layertab/object-list/asset}/GradientAssetsProperty.js (98%) rename src/apps/designeditor/plugins/{gradient-asset => layertab/object-list/asset}/GradientAssetsProperty.scss (98%) rename src/apps/designeditor/plugins/{image-asset => layertab/object-list/asset}/ImageAssetsProperty.js (100%) rename src/apps/designeditor/plugins/{image-asset => layertab/object-list/asset}/ImageAssetsProperty.scss (100%) rename src/apps/designeditor/plugins/{pattern-asset => layertab/object-list/asset}/PatternAssetsProperty.js (98%) rename src/apps/designeditor/plugins/{pattern-asset => layertab/object-list/asset}/PatternAssetsProperty.scss (100%) rename src/{elf/editor/ui/property => apps/designeditor/plugins/layertab/object-list/asset}/VideoAssetsProperty.js (97%) rename src/{elf/editor/ui/property => apps/designeditor/plugins/layertab/object-list/asset}/VideoAssetsProperty.scss (100%) delete mode 100644 src/apps/three-editor/area/Body3DPanel.js delete mode 100644 src/apps/three-editor/area/Body3DPanel.scss delete mode 100644 src/apps/three-editor/area/ThreeInspector.jsx delete mode 100644 src/apps/three-editor/area/body-panel/Canvas3DView.jsx delete mode 100644 src/apps/three-editor/area/body-panel/Canvas3DView.scss delete mode 100644 src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.js delete mode 100644 src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.md delete mode 100644 src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.scss delete mode 100644 src/apps/three-editor/commands/command_list/addCubeBox.js delete mode 100644 src/apps/three-editor/commands/command_list/editor.config.body.event.js delete mode 100644 src/apps/three-editor/commands/index.js delete mode 100644 src/apps/three-editor/index.js delete mode 100644 src/apps/three-editor/layout.scss delete mode 100644 src/apps/three-editor/managers/SceneManager.js delete mode 100644 src/apps/three-editor/menus/DefaultMenu.js delete mode 100644 src/apps/three-editor/plugins/commands/index.js delete mode 100644 src/apps/three-editor/plugins/menus/index.js delete mode 100644 src/apps/three-editor/plugins/three-editor-plugins.js delete mode 100644 src/apps/three-editor/plugins/three-helpers/ViewportHelper.jsx delete mode 100644 src/apps/three-editor/plugins/three-helpers/ViewportHelper.scss delete mode 100644 src/apps/three-editor/plugins/three-helpers/index.js delete mode 100644 src/apps/whiteboard/index.js delete mode 100644 src/apps/whiteboard/layout.scss delete mode 100644 src/apps/whiteboard/plugins/whiteboard-plugins.js delete mode 100644 src/bootstraps/blank.jsx delete mode 100644 src/bootstraps/dataeditor.jsx delete mode 100644 src/bootstraps/three-editor.jsx delete mode 100644 src/bootstraps/whiteboard.jsx delete mode 100644 src/elf/editor/ui/property/index.js delete mode 100644 whiteboard.html diff --git a/.eslintrc.json b/.eslintrc.json index 624147aa7..54d41ec55 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -90,7 +90,9 @@ "Symbol": true, "__dirname": true, "Map": true, - "Set": true + "Set": true, + "WeakMap": true, + "WeakSet": true }, "overrides": [ { diff --git a/3d.html b/3d.html deleted file mode 100644 index 1da284cf8..000000000 --- a/3d.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - - - -
- - - diff --git a/blank.html b/blank.html deleted file mode 100644 index a8a0eb65b..000000000 --- a/blank.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - -
- - - diff --git a/dataeditor.html b/dataeditor.html deleted file mode 100644 index d899498ac..000000000 --- a/dataeditor.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - -
- - - diff --git a/dist/editor.es.js b/dist/editor.es.js index 13aae8215..c68fa187d 100644 --- a/dist/editor.es.js +++ b/dist/editor.es.js @@ -49,7 +49,7 @@ var __privateMethod = (obj2, member, method) => { __accessCheck(obj2, member, "access private method"); return method; }; -var _state, _prevState, _localTimestamp, _loadMethods, _timestamp, _cachedMethodList, _props, _propsKeys, _isServer, _propsKeyList, _refreshTimestamp, refreshTimestamp_fn, _setProps, setProps_fn, _getProp, getProp_fn, _storeInstance, _modelManager, _json, _cachedValue, _timestamp2, _lastChangedField, _collapsed, _compiledTimeline, _id2, _renderers; +var _state, _prevState, _localTimestamp, _loadMethods, _timestamp, _cachedMethodList, _props, _propsKeys, _isServer, _propsKeyList, _refreshTimestamp, refreshTimestamp_fn, _setProps, setProps_fn, _getProp, getProp_fn, _storeInstance, _modelManager, _json, _cachedValue, _timestamp2, _lastChangedField, _collapsed, _compiledTimeline, _id, _renderers; function collectProps(root, filterFunction = () => true) { let p = root; let results = []; @@ -678,8 +678,8 @@ class Dom { return this; } } - htmlDiff(fragment2) { - DomDiff(this, fragment2); + htmlDiff(fragment) { + DomDiff(this, fragment); } updateDiff(html, rootElement = "div", options2 = {}) { DomDiff(this, Dom.create(rootElement).html(html), options2); @@ -714,6 +714,8 @@ class Dom { return this; } append(el) { + if (!el) + return this; if (isArray(el)) { this.el.append(...el.map((it) => it.el || it)); } else if (typeof el === "string") { @@ -743,9 +745,9 @@ class Dom { } createChildrenFragment() { const list2 = this.childNodes; - var fragment2 = document.createDocumentFragment(); - list2.forEach(($el) => fragment2.appendChild($el.el)); - return fragment2; + var fragment = document.createDocumentFragment(); + list2.forEach(($el) => fragment.appendChild($el.el)); + return fragment; } appendTo(target) { var t = target.el ? target.el : target; @@ -1579,8 +1581,8 @@ const ALT = CHECKER("isAltKey"); const SHIFT = CHECKER("isShiftKey"); const META = CHECKER("isMetaKey"); const CONTROL = CHECKER("isCtrlKey"); -const MOUSE$1 = CHECKER("hasMouse"); -const TOUCH$1 = CHECKER("hasTouch"); +const MOUSE = CHECKER("hasMouse"); +const TOUCH = CHECKER("hasTouch"); const PEN = CHECKER("hasPen"); const SELF = CHECKER("self"); const LEFT_BUTTON = CHECKER("isMouseLeftButton"); @@ -2569,6 +2571,9 @@ const _EventMachine = class { get state() { return __privateGet(this, _state); } + get propKeys() { + return __privateGet(this, _propsKeys); + } get isPreLoaded() { return true; } @@ -2816,11 +2821,11 @@ const _EventMachine = class { const refTarget = this.refs[elName]; if (refTarget) { const newTemplate = await magicMethod.execute(...args2); - const fragment2 = this.parseTemplate(newTemplate, true); + const fragment = this.parseTemplate(newTemplate, true); if (isDomDiff) { - refTarget.htmlDiff(fragment2); + refTarget.htmlDiff(fragment); } else { - refTarget.html(fragment2); + refTarget.html(fragment); } this.refreshElementReference(refTarget, elName); } @@ -2896,7 +2901,10 @@ const _EventMachine = class { } getChildContent(filterCallback, defaultValue2 = "") { var _a; - return ((_a = this.props.contentChildren.find(filterCallback)) == null ? void 0 : _a.props.content) || defaultValue2; + return ((_a = this.getChild(filterCallback)) == null ? void 0 : _a.props.content) || defaultValue2; + } + getChild(filterCallback) { + return this.props.contentChildren.find(filterCallback); } }; let EventMachine = _EventMachine; @@ -3718,9 +3726,9 @@ function getRotation(out, mat) { } return out; } -function perspectiveNO(out, fovy, aspect2, near, far) { +function perspectiveNO(out, fovy, aspect, near, far) { var f = 1 / Math.tan(fovy / 2), nf; - out[0] = f / aspect2; + out[0] = f / aspect; out[1] = 0; out[2] = 0; out[3] = 0; @@ -3846,7 +3854,7 @@ function cross(out, a, b) { out[2] = ax * by - ay * bx; return out; } -function lerp$1(out, a, b, t) { +function lerp(out, a, b, t) { var ax = a[0]; var ay = a[1]; var az = a[2]; @@ -3864,7 +3872,7 @@ function transformMat4(out, a, m) { out[2] = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w; return out; } -function equals$2(a, b) { +function equals$1(a, b) { var a0 = a[0], a1 = a[1], a2 = a[2]; var b0 = b[0], b1 = b[1], b2 = b[2]; return Math.abs(a0 - b0) <= EPSILON * Math.max(1, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= EPSILON * Math.max(1, Math.abs(a1), Math.abs(b1)) && Math.abs(a2 - b2) <= EPSILON * Math.max(1, Math.abs(a2), Math.abs(b2)); @@ -4124,7 +4132,7 @@ function distance(a, b) { var x = b[0] - a[0], y = b[1] - a[1]; return Math.hypot(x, y); } -function equals$1(a, b) { +function equals(a, b) { var a0 = a[0], a1 = a[1]; var b0 = b[0], b1 = b[1]; return Math.abs(a0 - b0) <= EPSILON * Math.max(1, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= EPSILON * Math.max(1, Math.abs(a1), Math.abs(b1)); @@ -4758,6 +4766,7 @@ class ToggleButton extends BaseUI { return { checkedValue: this.props.checkedValue || this.props.value, checked: this.props.value || "false", + size: this.props.size, toggleLabels: this.props.toggleLabels || DEFAULT_LABELS$1, toggleTitles: this.props.toggleTitles || [], toggleValues: this.props.toggleValues || ["true", "false"] @@ -4960,16 +4969,6 @@ class Tabs extends UIElement { } } class BlankInspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); - } - [BIND("$el")]() { - return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) ? "block" : "none" - } - }; - } template() { return /* @__PURE__ */ createElementJsx("div", { class: "feature-control inspector" @@ -5035,12 +5034,12 @@ function _icon_template(tpl, opt) { height="${defaultOpts.height}" viewBox="0 0 ${defaultOpts.viewBoxWidth || defaultOpts.width} ${defaultOpts.viewBoxHeight || defaultOpts.height}">${tpl}`; } -var __glob_0_0$8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_0$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": _icon_template }, Symbol.toStringTag, { value: "Module" })); var account_tree = _icon_template(``); -var __glob_0_1$8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_1$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": account_tree }, Symbol.toStringTag, { value: "Module" })); @@ -5516,10 +5515,10 @@ var __glob_0_81$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP __proto__: null, "default": flash_on }, Symbol.toStringTag, { value: "Module" })); -var flatten$1 = _icon_template(``); +var flatten = _icon_template(``); var __glob_0_82$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, - "default": flatten$1 + "default": flatten }, Symbol.toStringTag, { value: "Module" })); var flex = _icon_template(``); var __glob_0_83$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ @@ -6416,11 +6415,11 @@ var __glob_0_250 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr __proto__: null, "default": wrap_text }, Symbol.toStringTag, { value: "Module" })); -const modules$8 = { "./icon_list/_icon_template.js": __glob_0_0$8, "./icon_list/account_tree.js": __glob_0_1$8, "./icon_list/add.js": __glob_0_2$6, "./icon_list/add_box.js": __glob_0_3$6, "./icon_list/add_circle.js": __glob_0_4$6, "./icon_list/add_note.js": __glob_0_5$6, "./icon_list/align_center.js": __glob_0_6$6, "./icon_list/align_horizontal_center.js": __glob_0_7$6, "./icon_list/align_horizontal_left.js": __glob_0_8$5, "./icon_list/align_horizontal_right.js": __glob_0_9$5, "./icon_list/align_justify.js": __glob_0_10$5, "./icon_list/align_left.js": __glob_0_11$5, "./icon_list/align_right.js": __glob_0_12$5, "./icon_list/align_vertical_bottom.js": __glob_0_13$5, "./icon_list/align_vertical_center.js": __glob_0_14$5, "./icon_list/align_vertical_top.js": __glob_0_15$4, "./icon_list/alternate.js": __glob_0_16$4, "./icon_list/alternate_reverse.js": __glob_0_17$4, "./icon_list/apps.js": __glob_0_18$4, "./icon_list/archive.js": __glob_0_19$4, "./icon_list/arrowLeft.js": __glob_0_20$4, "./icon_list/arrowRight.js": __glob_0_21$3, "./icon_list/arrow_right.js": __glob_0_22$3, "./icon_list/artboard.js": __glob_0_23$3, "./icon_list/auto_awesome.js": __glob_0_24$2, "./icon_list/autorenew.js": __glob_0_25$2, "./icon_list/ballot.js": __glob_0_26$2, "./icon_list/bar_chart.js": __glob_0_27$2, "./icon_list/blur.js": __glob_0_28$2, "./icon_list/blur_linear.js": __glob_0_29$2, "./icon_list/boolean_difference.js": __glob_0_30$2, "./icon_list/boolean_intersection.js": __glob_0_31$2, "./icon_list/boolean_union.js": __glob_0_32$2, "./icon_list/boolean_xor.js": __glob_0_33$2, "./icon_list/border_all.js": __glob_0_34$2, "./icon_list/border_inner.js": __glob_0_35$2, "./icon_list/border_style.js": __glob_0_36$2, "./icon_list/bottom.js": __glob_0_37$2, "./icon_list/broken_image.js": __glob_0_38$2, "./icon_list/brush.js": __glob_0_39$2, "./icon_list/build.js": __glob_0_40$2, "./icon_list/camera_roll.js": __glob_0_41$2, "./icon_list/cat.js": __glob_0_42$2, "./icon_list/center.js": __glob_0_43$2, "./icon_list/chart.js": __glob_0_44$2, "./icon_list/check.js": __glob_0_45$2, "./icon_list/chevron_left.js": __glob_0_46$2, "./icon_list/chevron_right.js": __glob_0_47$2, "./icon_list/circle.js": __glob_0_48$2, "./icon_list/close.js": __glob_0_49$2, "./icon_list/code.js": __glob_0_50$2, "./icon_list/color.js": __glob_0_51$2, "./icon_list/color_lens.js": __glob_0_52$2, "./icon_list/control_point.js": __glob_0_53$2, "./icon_list/copy.js": __glob_0_54$2, "./icon_list/create_folder.js": __glob_0_55$2, "./icon_list/cube.js": __glob_0_56$1, "./icon_list/cylinder.js": __glob_0_57$1, "./icon_list/dahaze.js": __glob_0_58$1, "./icon_list/dark.js": __glob_0_59$1, "./icon_list/delete_forever.js": __glob_0_60$1, "./icon_list/device_hub.js": __glob_0_61$1, "./icon_list/diffuse.js": __glob_0_62$1, "./icon_list/direction.js": __glob_0_63$1, "./icon_list/doc.js": __glob_0_64$1, "./icon_list/drag_handle.js": __glob_0_65$1, "./icon_list/drag_indicator.js": __glob_0_66$1, "./icon_list/draw.js": __glob_0_67$1, "./icon_list/east.js": __glob_0_68$1, "./icon_list/edit.js": __glob_0_69$1, "./icon_list/end.js": __glob_0_70$1, "./icon_list/exit_to_app.js": __glob_0_71$1, "./icon_list/expand.js": __glob_0_72$1, "./icon_list/expand_more.js": __glob_0_73$1, "./icon_list/export.js": __glob_0_74$1, "./icon_list/face.js": __glob_0_75$1, "./icon_list/fast_forward.js": __glob_0_76$1, "./icon_list/fast_rewind.js": __glob_0_77$1, "./icon_list/file_copy.js": __glob_0_78$1, "./icon_list/filter.js": __glob_0_79$1, "./icon_list/flag.js": __glob_0_80$1, "./icon_list/flash_on.js": __glob_0_81$1, "./icon_list/flatten.js": __glob_0_82$1, "./icon_list/flex.js": __glob_0_83$1, "./icon_list/flip.js": __glob_0_84$1, "./icon_list/flipY.js": __glob_0_85$1, "./icon_list/flip_camera.js": __glob_0_86$1, "./icon_list/folder.js": __glob_0_87$1, "./icon_list/font_download.js": __glob_0_88$1, "./icon_list/format_bold.js": __glob_0_89$1, "./icon_list/format_indent.js": __glob_0_90$1, "./icon_list/format_line_spacing.js": __glob_0_91$1, "./icon_list/format_shapes.js": __glob_0_92$1, "./icon_list/format_size.js": __glob_0_93$1, "./icon_list/fullscreen.js": __glob_0_94$1, "./icon_list/gps_fixed.js": __glob_0_95$1, "./icon_list/gradient.js": __glob_0_96$1, "./icon_list/grid.js": __glob_0_97$1, "./icon_list/grid3x3.js": __glob_0_98$1, "./icon_list/group.js": __glob_0_99$1, "./icon_list/height.js": __glob_0_100$1, "./icon_list/highlight_at.js": __glob_0_101$1, "./icon_list/horizontal_align_center.js": __glob_0_102$1, "./icon_list/horizontal_distribute.js": __glob_0_103$1, "./icon_list/horizontal_rule.js": __glob_0_104$1, "./icon_list/image.js": __glob_0_105$1, "./icon_list/input.js": __glob_0_106$1, "./icon_list/italic.js": __glob_0_107$1, "./icon_list/join_full.js": __glob_0_108$1, "./icon_list/join_right.js": __glob_0_109$1, "./icon_list/justify_content_space_around.js": __glob_0_110$1, "./icon_list/keyboard.js": __glob_0_111$1, "./icon_list/keyboard_arrow_down.js": __glob_0_112$1, "./icon_list/keyboard_arrow_left.js": __glob_0_113$1, "./icon_list/keyboard_arrow_right.js": __glob_0_114$1, "./icon_list/keyboard_arrow_up.js": __glob_0_115$1, "./icon_list/landscape.js": __glob_0_116$1, "./icon_list/launch.js": __glob_0_117$1, "./icon_list/layers.js": __glob_0_118$1, "./icon_list/layout_default.js": __glob_0_119$1, "./icon_list/layout_flex.js": __glob_0_120$1, "./icon_list/layout_grid.js": __glob_0_121, "./icon_list/left.js": __glob_0_122, "./icon_list/left_hide.js": __glob_0_123, "./icon_list/lens.js": __glob_0_124, "./icon_list/light.js": __glob_0_125, "./icon_list/line_cap_butt.js": __glob_0_126, "./icon_list/line_cap_round.js": __glob_0_127, "./icon_list/line_cap_square.js": __glob_0_128, "./icon_list/line_chart.js": __glob_0_129, "./icon_list/line_join_bevel.js": __glob_0_130, "./icon_list/line_join_miter.js": __glob_0_131, "./icon_list/line_join_round.js": __glob_0_132, "./icon_list/line_style.js": __glob_0_133, "./icon_list/line_weight.js": __glob_0_134, "./icon_list/list.js": __glob_0_135, "./icon_list/local_library.js": __glob_0_136, "./icon_list/local_movie.js": __glob_0_137, "./icon_list/lock.js": __glob_0_138, "./icon_list/lock_open.js": __glob_0_139, "./icon_list/looks.js": __glob_0_140, "./icon_list/margin.js": __glob_0_141, "./icon_list/merge.js": __glob_0_142, "./icon_list/middle.js": __glob_0_143, "./icon_list/navigation.js": __glob_0_144, "./icon_list/near_me.js": __glob_0_145, "./icon_list/north.js": __glob_0_146, "./icon_list/note.js": __glob_0_147, "./icon_list/nowrap.js": __glob_0_148, "./icon_list/opacity.js": __glob_0_149, "./icon_list/outline.js": __glob_0_150, "./icon_list/outline_circle.js": __glob_0_151, "./icon_list/outline_image.js": __glob_0_152, "./icon_list/outline_rect.js": __glob_0_153, "./icon_list/outline_shape.js": __glob_0_154, "./icon_list/padding.js": __glob_0_155, "./icon_list/paint.js": __glob_0_156, "./icon_list/palette.js": __glob_0_157, "./icon_list/pantool.js": __glob_0_158, "./icon_list/pattern_check.js": __glob_0_159, "./icon_list/pattern_cross_dot.js": __glob_0_160, "./icon_list/pattern_dot.js": __glob_0_161, "./icon_list/pattern_grid.js": __glob_0_162, "./icon_list/pattern_horizontal_line.js": __glob_0_163, "./icon_list/pause.js": __glob_0_164, "./icon_list/pentool.js": __glob_0_165, "./icon_list/photo.js": __glob_0_166, "./icon_list/play.js": __glob_0_167, "./icon_list/plugin.js": __glob_0_168, "./icon_list/polygon.js": __glob_0_169, "./icon_list/power_input.js": __glob_0_170, "./icon_list/publish.js": __glob_0_171, "./icon_list/rect.js": __glob_0_172, "./icon_list/redo.js": __glob_0_173, "./icon_list/refresh.js": __glob_0_174, "./icon_list/remove.js": __glob_0_175, "./icon_list/remove2.js": __glob_0_176, "./icon_list/repeat.js": __glob_0_177, "./icon_list/replay.js": __glob_0_178, "./icon_list/right.js": __glob_0_179, "./icon_list/right_hide.js": __glob_0_180, "./icon_list/rotate.js": __glob_0_181, "./icon_list/rotate_left.js": __glob_0_182, "./icon_list/round.js": __glob_0_183, "./icon_list/same_height.js": __glob_0_184, "./icon_list/same_width.js": __glob_0_185, "./icon_list/save.js": __glob_0_186, "./icon_list/scatter.js": __glob_0_187, "./icon_list/screen.js": __glob_0_188, "./icon_list/setting.js": __glob_0_189, "./icon_list/settings_input_component.js": __glob_0_190, "./icon_list/shadow.js": __glob_0_191, "./icon_list/shape.js": __glob_0_192, "./icon_list/shuffle.js": __glob_0_193, "./icon_list/size.js": __glob_0_194, "./icon_list/skip_next.js": __glob_0_195, "./icon_list/skip_prev.js": __glob_0_196, "./icon_list/smooth.js": __glob_0_197, "./icon_list/source.js": __glob_0_198, "./icon_list/south.js": __glob_0_199, "./icon_list/space.js": __glob_0_200, "./icon_list/specular.js": __glob_0_201, "./icon_list/speed.js": __glob_0_202, "./icon_list/star.js": __glob_0_203, "./icon_list/start.js": __glob_0_204, "./icon_list/storage.js": __glob_0_205, "./icon_list/straighten.js": __glob_0_206, "./icon_list/strikethrough.js": __glob_0_207, "./icon_list/stroke_to_path.js": __glob_0_208, "./icon_list/swap_horiz.js": __glob_0_209, "./icon_list/switch_left.js": __glob_0_210, "./icon_list/switch_right.js": __glob_0_211, "./icon_list/sync.js": __glob_0_212, "./icon_list/table_rows.js": __glob_0_213, "./icon_list/text_rotate.js": __glob_0_214, "./icon_list/texture.js": __glob_0_215, "./icon_list/timer.js": __glob_0_216, "./icon_list/title.js": __glob_0_217, "./icon_list/to_back.js": __glob_0_218, "./icon_list/to_front.js": __glob_0_219, "./icon_list/tonality.js": __glob_0_220, "./icon_list/top.js": __glob_0_221, "./icon_list/transform.js": __glob_0_222, "./icon_list/underline.js": __glob_0_223, "./icon_list/undo.js": __glob_0_224, "./icon_list/unfold.js": __glob_0_225, "./icon_list/vertical_align_baseline.js": __glob_0_226, "./icon_list/vertical_align_bottom.js": __glob_0_227, "./icon_list/vertical_align_center.js": __glob_0_228, "./icon_list/vertical_align_stretch.js": __glob_0_229, "./icon_list/vertical_align_top.js": __glob_0_230, "./icon_list/vertical_distribute.js": __glob_0_231, "./icon_list/video.js": __glob_0_232, "./icon_list/view_comfy.js": __glob_0_233, "./icon_list/view_list.js": __glob_0_234, "./icon_list/view_week.js": __glob_0_235, "./icon_list/view_week_reverse.js": __glob_0_236, "./icon_list/vignette.js": __glob_0_237, "./icon_list/vintage.js": __glob_0_238, "./icon_list/visible.js": __glob_0_239, "./icon_list/visible_off.js": __glob_0_240, "./icon_list/volume_down.js": __glob_0_241, "./icon_list/volume_off.js": __glob_0_242, "./icon_list/volume_up.js": __glob_0_243, "./icon_list/wave.js": __glob_0_244, "./icon_list/waves.js": __glob_0_245, "./icon_list/web.js": __glob_0_246, "./icon_list/west.js": __glob_0_247, "./icon_list/width.js": __glob_0_248, "./icon_list/wrap.js": __glob_0_249, "./icon_list/wrap_text.js": __glob_0_250 }; -const obj$3 = {}; -Object.entries(modules$8).forEach(([key, value]) => { +const modules$7 = { "./icon_list/_icon_template.js": __glob_0_0$7, "./icon_list/account_tree.js": __glob_0_1$7, "./icon_list/add.js": __glob_0_2$6, "./icon_list/add_box.js": __glob_0_3$6, "./icon_list/add_circle.js": __glob_0_4$6, "./icon_list/add_note.js": __glob_0_5$6, "./icon_list/align_center.js": __glob_0_6$6, "./icon_list/align_horizontal_center.js": __glob_0_7$6, "./icon_list/align_horizontal_left.js": __glob_0_8$5, "./icon_list/align_horizontal_right.js": __glob_0_9$5, "./icon_list/align_justify.js": __glob_0_10$5, "./icon_list/align_left.js": __glob_0_11$5, "./icon_list/align_right.js": __glob_0_12$5, "./icon_list/align_vertical_bottom.js": __glob_0_13$5, "./icon_list/align_vertical_center.js": __glob_0_14$5, "./icon_list/align_vertical_top.js": __glob_0_15$4, "./icon_list/alternate.js": __glob_0_16$4, "./icon_list/alternate_reverse.js": __glob_0_17$4, "./icon_list/apps.js": __glob_0_18$4, "./icon_list/archive.js": __glob_0_19$4, "./icon_list/arrowLeft.js": __glob_0_20$4, "./icon_list/arrowRight.js": __glob_0_21$3, "./icon_list/arrow_right.js": __glob_0_22$3, "./icon_list/artboard.js": __glob_0_23$3, "./icon_list/auto_awesome.js": __glob_0_24$2, "./icon_list/autorenew.js": __glob_0_25$2, "./icon_list/ballot.js": __glob_0_26$2, "./icon_list/bar_chart.js": __glob_0_27$2, "./icon_list/blur.js": __glob_0_28$2, "./icon_list/blur_linear.js": __glob_0_29$2, "./icon_list/boolean_difference.js": __glob_0_30$2, "./icon_list/boolean_intersection.js": __glob_0_31$2, "./icon_list/boolean_union.js": __glob_0_32$2, "./icon_list/boolean_xor.js": __glob_0_33$2, "./icon_list/border_all.js": __glob_0_34$2, "./icon_list/border_inner.js": __glob_0_35$2, "./icon_list/border_style.js": __glob_0_36$2, "./icon_list/bottom.js": __glob_0_37$2, "./icon_list/broken_image.js": __glob_0_38$2, "./icon_list/brush.js": __glob_0_39$2, "./icon_list/build.js": __glob_0_40$2, "./icon_list/camera_roll.js": __glob_0_41$2, "./icon_list/cat.js": __glob_0_42$2, "./icon_list/center.js": __glob_0_43$2, "./icon_list/chart.js": __glob_0_44$2, "./icon_list/check.js": __glob_0_45$2, "./icon_list/chevron_left.js": __glob_0_46$2, "./icon_list/chevron_right.js": __glob_0_47$2, "./icon_list/circle.js": __glob_0_48$2, "./icon_list/close.js": __glob_0_49$2, "./icon_list/code.js": __glob_0_50$2, "./icon_list/color.js": __glob_0_51$2, "./icon_list/color_lens.js": __glob_0_52$2, "./icon_list/control_point.js": __glob_0_53$2, "./icon_list/copy.js": __glob_0_54$2, "./icon_list/create_folder.js": __glob_0_55$2, "./icon_list/cube.js": __glob_0_56$1, "./icon_list/cylinder.js": __glob_0_57$1, "./icon_list/dahaze.js": __glob_0_58$1, "./icon_list/dark.js": __glob_0_59$1, "./icon_list/delete_forever.js": __glob_0_60$1, "./icon_list/device_hub.js": __glob_0_61$1, "./icon_list/diffuse.js": __glob_0_62$1, "./icon_list/direction.js": __glob_0_63$1, "./icon_list/doc.js": __glob_0_64$1, "./icon_list/drag_handle.js": __glob_0_65$1, "./icon_list/drag_indicator.js": __glob_0_66$1, "./icon_list/draw.js": __glob_0_67$1, "./icon_list/east.js": __glob_0_68$1, "./icon_list/edit.js": __glob_0_69$1, "./icon_list/end.js": __glob_0_70$1, "./icon_list/exit_to_app.js": __glob_0_71$1, "./icon_list/expand.js": __glob_0_72$1, "./icon_list/expand_more.js": __glob_0_73$1, "./icon_list/export.js": __glob_0_74$1, "./icon_list/face.js": __glob_0_75$1, "./icon_list/fast_forward.js": __glob_0_76$1, "./icon_list/fast_rewind.js": __glob_0_77$1, "./icon_list/file_copy.js": __glob_0_78$1, "./icon_list/filter.js": __glob_0_79$1, "./icon_list/flag.js": __glob_0_80$1, "./icon_list/flash_on.js": __glob_0_81$1, "./icon_list/flatten.js": __glob_0_82$1, "./icon_list/flex.js": __glob_0_83$1, "./icon_list/flip.js": __glob_0_84$1, "./icon_list/flipY.js": __glob_0_85$1, "./icon_list/flip_camera.js": __glob_0_86$1, "./icon_list/folder.js": __glob_0_87$1, "./icon_list/font_download.js": __glob_0_88$1, "./icon_list/format_bold.js": __glob_0_89$1, "./icon_list/format_indent.js": __glob_0_90$1, "./icon_list/format_line_spacing.js": __glob_0_91$1, "./icon_list/format_shapes.js": __glob_0_92$1, "./icon_list/format_size.js": __glob_0_93$1, "./icon_list/fullscreen.js": __glob_0_94$1, "./icon_list/gps_fixed.js": __glob_0_95$1, "./icon_list/gradient.js": __glob_0_96$1, "./icon_list/grid.js": __glob_0_97$1, "./icon_list/grid3x3.js": __glob_0_98$1, "./icon_list/group.js": __glob_0_99$1, "./icon_list/height.js": __glob_0_100$1, "./icon_list/highlight_at.js": __glob_0_101$1, "./icon_list/horizontal_align_center.js": __glob_0_102$1, "./icon_list/horizontal_distribute.js": __glob_0_103$1, "./icon_list/horizontal_rule.js": __glob_0_104$1, "./icon_list/image.js": __glob_0_105$1, "./icon_list/input.js": __glob_0_106$1, "./icon_list/italic.js": __glob_0_107$1, "./icon_list/join_full.js": __glob_0_108$1, "./icon_list/join_right.js": __glob_0_109$1, "./icon_list/justify_content_space_around.js": __glob_0_110$1, "./icon_list/keyboard.js": __glob_0_111$1, "./icon_list/keyboard_arrow_down.js": __glob_0_112$1, "./icon_list/keyboard_arrow_left.js": __glob_0_113$1, "./icon_list/keyboard_arrow_right.js": __glob_0_114$1, "./icon_list/keyboard_arrow_up.js": __glob_0_115$1, "./icon_list/landscape.js": __glob_0_116$1, "./icon_list/launch.js": __glob_0_117$1, "./icon_list/layers.js": __glob_0_118$1, "./icon_list/layout_default.js": __glob_0_119$1, "./icon_list/layout_flex.js": __glob_0_120$1, "./icon_list/layout_grid.js": __glob_0_121, "./icon_list/left.js": __glob_0_122, "./icon_list/left_hide.js": __glob_0_123, "./icon_list/lens.js": __glob_0_124, "./icon_list/light.js": __glob_0_125, "./icon_list/line_cap_butt.js": __glob_0_126, "./icon_list/line_cap_round.js": __glob_0_127, "./icon_list/line_cap_square.js": __glob_0_128, "./icon_list/line_chart.js": __glob_0_129, "./icon_list/line_join_bevel.js": __glob_0_130, "./icon_list/line_join_miter.js": __glob_0_131, "./icon_list/line_join_round.js": __glob_0_132, "./icon_list/line_style.js": __glob_0_133, "./icon_list/line_weight.js": __glob_0_134, "./icon_list/list.js": __glob_0_135, "./icon_list/local_library.js": __glob_0_136, "./icon_list/local_movie.js": __glob_0_137, "./icon_list/lock.js": __glob_0_138, "./icon_list/lock_open.js": __glob_0_139, "./icon_list/looks.js": __glob_0_140, "./icon_list/margin.js": __glob_0_141, "./icon_list/merge.js": __glob_0_142, "./icon_list/middle.js": __glob_0_143, "./icon_list/navigation.js": __glob_0_144, "./icon_list/near_me.js": __glob_0_145, "./icon_list/north.js": __glob_0_146, "./icon_list/note.js": __glob_0_147, "./icon_list/nowrap.js": __glob_0_148, "./icon_list/opacity.js": __glob_0_149, "./icon_list/outline.js": __glob_0_150, "./icon_list/outline_circle.js": __glob_0_151, "./icon_list/outline_image.js": __glob_0_152, "./icon_list/outline_rect.js": __glob_0_153, "./icon_list/outline_shape.js": __glob_0_154, "./icon_list/padding.js": __glob_0_155, "./icon_list/paint.js": __glob_0_156, "./icon_list/palette.js": __glob_0_157, "./icon_list/pantool.js": __glob_0_158, "./icon_list/pattern_check.js": __glob_0_159, "./icon_list/pattern_cross_dot.js": __glob_0_160, "./icon_list/pattern_dot.js": __glob_0_161, "./icon_list/pattern_grid.js": __glob_0_162, "./icon_list/pattern_horizontal_line.js": __glob_0_163, "./icon_list/pause.js": __glob_0_164, "./icon_list/pentool.js": __glob_0_165, "./icon_list/photo.js": __glob_0_166, "./icon_list/play.js": __glob_0_167, "./icon_list/plugin.js": __glob_0_168, "./icon_list/polygon.js": __glob_0_169, "./icon_list/power_input.js": __glob_0_170, "./icon_list/publish.js": __glob_0_171, "./icon_list/rect.js": __glob_0_172, "./icon_list/redo.js": __glob_0_173, "./icon_list/refresh.js": __glob_0_174, "./icon_list/remove.js": __glob_0_175, "./icon_list/remove2.js": __glob_0_176, "./icon_list/repeat.js": __glob_0_177, "./icon_list/replay.js": __glob_0_178, "./icon_list/right.js": __glob_0_179, "./icon_list/right_hide.js": __glob_0_180, "./icon_list/rotate.js": __glob_0_181, "./icon_list/rotate_left.js": __glob_0_182, "./icon_list/round.js": __glob_0_183, "./icon_list/same_height.js": __glob_0_184, "./icon_list/same_width.js": __glob_0_185, "./icon_list/save.js": __glob_0_186, "./icon_list/scatter.js": __glob_0_187, "./icon_list/screen.js": __glob_0_188, "./icon_list/setting.js": __glob_0_189, "./icon_list/settings_input_component.js": __glob_0_190, "./icon_list/shadow.js": __glob_0_191, "./icon_list/shape.js": __glob_0_192, "./icon_list/shuffle.js": __glob_0_193, "./icon_list/size.js": __glob_0_194, "./icon_list/skip_next.js": __glob_0_195, "./icon_list/skip_prev.js": __glob_0_196, "./icon_list/smooth.js": __glob_0_197, "./icon_list/source.js": __glob_0_198, "./icon_list/south.js": __glob_0_199, "./icon_list/space.js": __glob_0_200, "./icon_list/specular.js": __glob_0_201, "./icon_list/speed.js": __glob_0_202, "./icon_list/star.js": __glob_0_203, "./icon_list/start.js": __glob_0_204, "./icon_list/storage.js": __glob_0_205, "./icon_list/straighten.js": __glob_0_206, "./icon_list/strikethrough.js": __glob_0_207, "./icon_list/stroke_to_path.js": __glob_0_208, "./icon_list/swap_horiz.js": __glob_0_209, "./icon_list/switch_left.js": __glob_0_210, "./icon_list/switch_right.js": __glob_0_211, "./icon_list/sync.js": __glob_0_212, "./icon_list/table_rows.js": __glob_0_213, "./icon_list/text_rotate.js": __glob_0_214, "./icon_list/texture.js": __glob_0_215, "./icon_list/timer.js": __glob_0_216, "./icon_list/title.js": __glob_0_217, "./icon_list/to_back.js": __glob_0_218, "./icon_list/to_front.js": __glob_0_219, "./icon_list/tonality.js": __glob_0_220, "./icon_list/top.js": __glob_0_221, "./icon_list/transform.js": __glob_0_222, "./icon_list/underline.js": __glob_0_223, "./icon_list/undo.js": __glob_0_224, "./icon_list/unfold.js": __glob_0_225, "./icon_list/vertical_align_baseline.js": __glob_0_226, "./icon_list/vertical_align_bottom.js": __glob_0_227, "./icon_list/vertical_align_center.js": __glob_0_228, "./icon_list/vertical_align_stretch.js": __glob_0_229, "./icon_list/vertical_align_top.js": __glob_0_230, "./icon_list/vertical_distribute.js": __glob_0_231, "./icon_list/video.js": __glob_0_232, "./icon_list/view_comfy.js": __glob_0_233, "./icon_list/view_list.js": __glob_0_234, "./icon_list/view_week.js": __glob_0_235, "./icon_list/view_week_reverse.js": __glob_0_236, "./icon_list/vignette.js": __glob_0_237, "./icon_list/vintage.js": __glob_0_238, "./icon_list/visible.js": __glob_0_239, "./icon_list/visible_off.js": __glob_0_240, "./icon_list/volume_down.js": __glob_0_241, "./icon_list/volume_off.js": __glob_0_242, "./icon_list/volume_up.js": __glob_0_243, "./icon_list/wave.js": __glob_0_244, "./icon_list/waves.js": __glob_0_245, "./icon_list/web.js": __glob_0_246, "./icon_list/west.js": __glob_0_247, "./icon_list/width.js": __glob_0_248, "./icon_list/wrap.js": __glob_0_249, "./icon_list/wrap_text.js": __glob_0_250 }; +const obj$2 = {}; +Object.entries(modules$7).forEach(([key, value]) => { key = key.replace("./icon_list/", "").replace(".js", ""); - obj$3[key] = value.default; + obj$2[key] = value.default; }); function iconUse(name, transform2 = "", opt = { width: 24, height: 24 }) { if (!name) @@ -6703,7 +6702,7 @@ function round(n, k) { k = typeof k === "undefined" ? 1 : k; return Math.round(n * k) / k; } -function area$1(x, y, areaWidth = 100) { +function area(x, y, areaWidth = 100) { const column = x < 0 ? Math.floor(x / areaWidth) : Math.ceil(x / areaWidth); const row = y < 0 ? Math.floor(y / areaWidth) : Math.ceil(y / areaWidth); return [row, column]; @@ -6737,7 +6736,7 @@ function getDist(x, y, centerX = 0, centerY = 0) { return distance([x, y], [centerX, centerY]); } function getPointBetweenVerties(start2, end2, pointDist = 0) { - return lerp$1([], start2, end2, 1 + pointDist / dist(start2, end2)); + return lerp([], start2, end2, 1 + pointDist / dist(start2, end2)); } function vertiesMap(verties, transformView) { if (verties.length === 1) { @@ -6828,8 +6827,8 @@ function makeGuidePoint(sourceVerties, targetVerties) { rightVerties = sourceVerties; hasInvert = true; } - const leftCenter = lerp$1([], leftVerties[1], leftVerties[2], 0.5); - const rightCenter = lerp$1([], rightVerties[0], rightVerties[3], 0.5); + const leftCenter = lerp([], leftVerties[1], leftVerties[2], 0.5); + const rightCenter = lerp([], rightVerties[0], rightVerties[3], 0.5); let pointList = []; if (rightVerties[0][1] <= leftCenter[1] && leftCenter[1] <= rightVerties[3][1]) { pointList.push(getTargetPointX(leftCenter, rightCenter, "x", null)); @@ -7382,9 +7381,9 @@ class Length { isZero() { return this.value === 0; } - changeUnitValue(px2, maxValue) { + changeUnitValue(px, maxValue) { const unit = this.unit; - return Length.px(px2).to(unit, maxValue); + return Length.px(px).to(unit, maxValue); } toObject() { return { value: this.value, unit: this.unit }; @@ -7617,7 +7616,7 @@ class MenuItem extends EditorElement { ${this.isDisabled() ? "disabled" : ""} data-direction="${this.getDirection()}" > -
${obj$3[this.getIconString()] || this.getIconString() || ""}
+
${obj$2[this.getIconString()] || this.getIconString() || ""}
${this.isHideTitle() ? "" : `
${this.getTitle()}
`} @@ -7644,7 +7643,7 @@ class MenuItem extends EditorElement { return DEFAULT_ICON; } setIcon(iconString) { - this.refs.$icon.html(obj$3[iconString] || iconString || ""); + this.refs.$icon.html(obj$2[iconString] || iconString || ""); } getIconString() { return DEFAULT_ICON; @@ -7728,6 +7727,12 @@ class BlankToolBar extends EditorElement { template() { return `
+
+ ${createComponent("ToolBarRenderer", { + items: this.$menu.getTargetMenu("toolbar.logo") + })} +
+
${createComponent("ToolBarRenderer", { items: this.$menu.getTargetMenu("toolbar.left") @@ -7747,6 +7752,7 @@ class BlankToolBar extends EditorElement { ${this.$injectManager.generate("toolbar.right")} ${createComponent("ThemeChanger")}
+
`; } @@ -7756,7 +7762,7 @@ class BlankToolBar extends EditorElement { } } } -var layout$5 = ""; +var layout$2 = ""; var show_left_panel$1 = { key: "show.left.panel", defaultValue: true, @@ -7764,7 +7770,7 @@ var show_left_panel$1 = { description: "Set left panel visibility to on", type: "boolean" }; -var __glob_0_0$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_0$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": show_left_panel$1 }, Symbol.toStringTag, { value: "Module" })); @@ -7775,12 +7781,12 @@ var show_right_panel$1 = { description: "Set right panel visibility to on", type: "boolean" }; -var __glob_0_1$7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_1$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": show_right_panel$1 }, Symbol.toStringTag, { value: "Module" })); -const modules$7 = { "./config_list/show.left.panel.js": __glob_0_0$7, "./config_list/show.right.panel.js": __glob_0_1$7 }; -var configs$4 = Object.values(modules$7).map((it) => it.default); +const modules$6 = { "./config_list/show.left.panel.js": __glob_0_0$6, "./config_list/show.right.panel.js": __glob_0_1$6 }; +var configs$4 = Object.values(modules$6).map((it) => it.default); function configs$3(editor) { configs$4.forEach((config) => { editor.registerConfig(config); @@ -7805,7 +7811,7 @@ var body_move_ms = { description: "Set delay millisecond to moving pointer in body ", type: "number" }; -var __glob_0_0$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_0$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": body_move_ms }, Symbol.toStringTag, { value: "Module" })); @@ -7816,7 +7822,7 @@ var debug_mode$1 = { description: "Set debug mode to on ", type: "boolean" }; -var __glob_0_1$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_1$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": debug_mode$1 }, Symbol.toStringTag, { value: "Module" })); @@ -7886,8 +7892,8 @@ var __glob_0_7$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr __proto__: null, "default": style_canvas_background_color }, Symbol.toStringTag, { value: "Module" })); -const modules$6 = { "./config_list/body.move.ms.js": __glob_0_0$6, "./config_list/debug.mode.js": __glob_0_1$6, "./config_list/editor.cursor.js": __glob_0_2$5, "./config_list/editor.theme.js": __glob_0_3$5, "./config_list/event.doubleclick.timing.js": __glob_0_4$5, "./config_list/language.locale.js": __glob_0_5$5, "./config_list/store.key.js": __glob_0_6$5, "./config_list/style.canvas.background.color.js": __glob_0_7$5 }; -var configs$2 = Object.values(modules$6).map((it) => it.default); +const modules$5 = { "./config_list/body.move.ms.js": __glob_0_0$5, "./config_list/debug.mode.js": __glob_0_1$5, "./config_list/editor.cursor.js": __glob_0_2$5, "./config_list/editor.theme.js": __glob_0_3$5, "./config_list/event.doubleclick.timing.js": __glob_0_4$5, "./config_list/language.locale.js": __glob_0_5$5, "./config_list/store.key.js": __glob_0_6$5, "./config_list/style.canvas.background.color.js": __glob_0_7$5 }; +var configs$2 = Object.values(modules$5).map((it) => it.default); function defaultConfigs(editor) { configs$2.forEach((config) => { editor.registerConfig(config); @@ -9457,7 +9463,7 @@ class SelectEditor extends EditorElement { var hasLabel = label ? "has-label" : ""; var hasTabIndex = tabIndex ? 'tabIndex="1"' : ""; var compact = this.props.compact ? "compact" : ""; - if (obj$3[label]) { + if (obj$2[label]) { label = iconUse(label); } return ` @@ -10597,9 +10603,9 @@ function intersectRectRect(rect1, rect2) { const maxY = Math.max(startPoint[1], endPoint[1]); return new Rect(minX + minRectX, minY + minRectY, maxX - minX, maxY - minY); } -function linePoint(x1, y1, x2, y2, px2, py2, buffer = 0.1) { - const dist1 = Math.hypot(px2 - x1, py2 - y1); - const dist2 = Math.hypot(px2 - x2, py2 - y2); +function linePoint(x1, y1, x2, y2, px, py, buffer = 0.1) { + const dist1 = Math.hypot(px - x1, py - y1); + const dist2 = Math.hypot(px - x2, py - y2); const lineLength = Math.hypot(x1 - x2, y1 - y2); const calcDist = dist1 + dist2; return calcDist >= lineLength - buffer && calcDist <= lineLength + buffer; @@ -10620,14 +10626,14 @@ function lineLine(x1, y1, x2, y2, x3, y3, x4, y4, epsilon = 0.1) { return [x2, y2]; return lineLineWithoutPoint(x1, y1, x2, y2, x3, y3, x4, y4); } -function polyPoint(verties = [], px2, py2, withoutPoint = false) { +function polyPoint(verties = [], px, py, withoutPoint = false) { let isCollision = false; const len2 = verties.length; if (withoutPoint === false) { for (let i = 0; i < len2; i++) { const v1 = verties[i]; const v2 = verties[(i + 1) % len2]; - if (linePoint(v1[0], v1[1], v2[0], v2[1], px2, py2)) { + if (linePoint(v1[0], v1[1], v2[0], v2[1], px, py)) { isCollision = true; break; } @@ -10638,7 +10644,7 @@ function polyPoint(verties = [], px2, py2, withoutPoint = false) { verties.forEach((vector, index2) => { const [cx, cy] = vector; const [nx, ny] = verties[(index2 + 1) % len2]; - if ((cy >= py2 && ny < py2 || cy < py2 && ny >= py2) && px2 < (nx - cx) * (py2 - cy) / (ny - cy) + cx) { + if ((cy >= py && ny < py || cy < py && ny >= py) && px < (nx - cx) * (py - cy) / (ny - cy) + cx) { isCollision = !isCollision; } }); @@ -10681,8 +10687,8 @@ function rectToVerties(x, y, width2, height2, origin = "50% 50% 0px") { ]; } function getRotatePointer(verties, dist2 = 0) { - const topPointer = lerp$1([], verties[0], verties[1], 0.5); - const bottomPointer = lerp$1([], verties[2], verties[3], 0.5); + const topPointer = lerp([], verties[0], verties[1], 0.5); + const bottomPointer = lerp([], verties[2], verties[3], 0.5); const rotatePointer = getPointBetweenVerties(bottomPointer, topPointer, dist2); return rotatePointer; } @@ -11602,7 +11608,7 @@ var materialAmber = { return colors$k; } }; -var __glob_0_0$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_0$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": materialAmber }, Symbol.toStringTag, { value: "Module" })); @@ -11632,7 +11638,7 @@ var materialBlue = { return colors$j; } }; -var __glob_0_1$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_1$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": materialBlue }, Symbol.toStringTag, { value: "Module" })); @@ -12381,8 +12387,8 @@ var __glob_0_20$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP __proto__: null, "default": random }, Symbol.toStringTag, { value: "Module" })); -const modules$5 = { "./colors_list/material-amber.js": __glob_0_0$5, "./colors_list/material-blue.js": __glob_0_1$5, "./colors_list/material-bluegray.js": __glob_0_2$4, "./colors_list/material-brown.js": __glob_0_3$4, "./colors_list/material-cyan.js": __glob_0_4$4, "./colors_list/material-deeporange.js": __glob_0_5$4, "./colors_list/material-deeppurple.js": __glob_0_6$4, "./colors_list/material-gray.js": __glob_0_7$4, "./colors_list/material-green.js": __glob_0_8$4, "./colors_list/material-indigo.js": __glob_0_9$4, "./colors_list/material-lightblue.js": __glob_0_10$4, "./colors_list/material-lightgreen.js": __glob_0_11$4, "./colors_list/material-lime.js": __glob_0_12$4, "./colors_list/material-orange.js": __glob_0_13$4, "./colors_list/material-pink.js": __glob_0_14$4, "./colors_list/material-purple.js": __glob_0_15$3, "./colors_list/material-red.js": __glob_0_16$3, "./colors_list/material-teal.js": __glob_0_17$3, "./colors_list/material-yellow.js": __glob_0_18$3, "./colors_list/opencolor-gray.js": __glob_0_19$3, "./colors_list/random.js": __glob_0_20$3 }; -var colors = Object.values(modules$5).map((it) => it.default); +const modules$4 = { "./colors_list/material-amber.js": __glob_0_0$4, "./colors_list/material-blue.js": __glob_0_1$4, "./colors_list/material-bluegray.js": __glob_0_2$4, "./colors_list/material-brown.js": __glob_0_3$4, "./colors_list/material-cyan.js": __glob_0_4$4, "./colors_list/material-deeporange.js": __glob_0_5$4, "./colors_list/material-deeppurple.js": __glob_0_6$4, "./colors_list/material-gray.js": __glob_0_7$4, "./colors_list/material-green.js": __glob_0_8$4, "./colors_list/material-indigo.js": __glob_0_9$4, "./colors_list/material-lightblue.js": __glob_0_10$4, "./colors_list/material-lightgreen.js": __glob_0_11$4, "./colors_list/material-lime.js": __glob_0_12$4, "./colors_list/material-orange.js": __glob_0_13$4, "./colors_list/material-pink.js": __glob_0_14$4, "./colors_list/material-purple.js": __glob_0_15$3, "./colors_list/material-red.js": __glob_0_16$3, "./colors_list/material-teal.js": __glob_0_17$3, "./colors_list/material-yellow.js": __glob_0_18$3, "./colors_list/opencolor-gray.js": __glob_0_19$3, "./colors_list/random.js": __glob_0_20$3 }; +var colors = Object.values(modules$4).map((it) => it.default); var ColorAssetsEditor$1 = ""; class ColorAssetsEditor extends EditorElement { initState() { @@ -12569,12 +12575,9 @@ class ColorViewEditor extends EditorElement { this.bindData("$miniView2"); } template() { - var { label, compact, mini } = this.state; - var hasLabel = label ? "has-label" : ""; - var hasCompact = compact ? "compact" : ""; - var hasMini = mini ? "mini" : ""; + var { label } = this.state; return ` -
+
${label ? `` : ""}
@@ -12594,10 +12597,19 @@ class ColorViewEditor extends EditorElement { `; } [BIND("$el")]() { + var { label, compact, mini, colorFocus, opacityFocus } = this.state; return { - class: { - focused: this.state.colorFocus || this.state.opacityFocus - } + class: [ + "elf--color-view-editor", + { + "has-label": label, + compact, + mini + }, + { + focused: colorFocus || opacityFocus + } + ] }; } [BIND("$miniView1")]() { @@ -12741,8 +12753,8 @@ class ComponentEditor extends EditorElement { })); } [LOAD("$body")]() { - const inspector = this.state.inspector; - var self2 = inspector.map((it, index2) => { + const inspector2 = this.state.inspector; + var self2 = inspector2.map((it, index2) => { if (isString(it) || it.type === "label") { const title2 = it.label || it; return ` @@ -12765,9 +12777,9 @@ class ComponentEditor extends EditorElement { }); return self2; } - setInspector(inspector) { + setInspector(inspector2) { this.setState({ - inspector + inspector: inspector2 }); } setValue(obj2 = {}) { @@ -12822,7 +12834,7 @@ class CSSPropertyEditor extends EditorElement {
${this.makePropertySelect()} - +
@@ -13270,12 +13282,12 @@ class CSSPropertyEditor extends EditorElement {
- +
- +
@@ -13330,9 +13342,9 @@ class CubicBezierEditor extends EditorElement { return `
-
${obj$3.chevron_left}
+
${obj$2.chevron_left}
-
${obj$3.chevron_right}
+
${obj$2.chevron_right}
- +
@@ -15259,7 +15271,7 @@ var approxUnitArc = function approxUnitArc2(ang1, ang2) { }]; }; var vectorAngle = function vectorAngle2(ux, uy, vx, vy) { - var sign2 = ux * vy - uy * vx < 0 ? -1 : 1; + var sign = ux * vy - uy * vx < 0 ? -1 : 1; var dot2 = ux * vx + uy * vy; if (dot2 > 1) { dot2 = 1; @@ -15267,9 +15279,9 @@ var vectorAngle = function vectorAngle2(ux, uy, vx, vy) { if (dot2 < -1) { dot2 = -1; } - return sign2 * Math.acos(dot2); + return sign * Math.acos(dot2); }; -var getArcCenter = function getArcCenter2(px2, py2, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp) { +var getArcCenter = function getArcCenter2(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp) { var rxsq = Math.pow(rx, 2); var rysq = Math.pow(ry, 2); var pxpsq = Math.pow(pxp, 2); @@ -15282,8 +15294,8 @@ var getArcCenter = function getArcCenter2(px2, py2, cx, cy, rx, ry, largeArcFlag radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1); var centerxp = radicant * rx / ry * pyp; var centeryp = radicant * -ry / rx * pxp; - var centerx = cosphi * centerxp - sinphi * centeryp + (px2 + cx) / 2; - var centery = sinphi * centerxp + cosphi * centeryp + (py2 + cy) / 2; + var centerx = cosphi * centerxp - sinphi * centeryp + (px + cx) / 2; + var centery = sinphi * centerxp + cosphi * centeryp + (py + cy) / 2; var vx1 = (pxp - centerxp) / rx; var vy1 = (pyp - centeryp) / ry; var vx2 = (-pxp - centerxp) / rx; @@ -15299,15 +15311,15 @@ var getArcCenter = function getArcCenter2(px2, py2, cx, cy, rx, ry, largeArcFlag return [centerx, centery, ang1, ang2]; }; var arcToBezier = function arcToBezier2(_ref2) { - var px2 = _ref2.px, py2 = _ref2.py, cx = _ref2.cx, cy = _ref2.cy, rx = _ref2.rx, ry = _ref2.ry, _ref2$xAxisRotation = _ref2.xAxisRotation, xAxisRotation = _ref2$xAxisRotation === void 0 ? 0 : _ref2$xAxisRotation, _ref2$largeArcFlag = _ref2.largeArcFlag, largeArcFlag = _ref2$largeArcFlag === void 0 ? 0 : _ref2$largeArcFlag, _ref2$sweepFlag = _ref2.sweepFlag, sweepFlag = _ref2$sweepFlag === void 0 ? 0 : _ref2$sweepFlag; + var px = _ref2.px, py = _ref2.py, cx = _ref2.cx, cy = _ref2.cy, rx = _ref2.rx, ry = _ref2.ry, _ref2$xAxisRotation = _ref2.xAxisRotation, xAxisRotation = _ref2$xAxisRotation === void 0 ? 0 : _ref2$xAxisRotation, _ref2$largeArcFlag = _ref2.largeArcFlag, largeArcFlag = _ref2$largeArcFlag === void 0 ? 0 : _ref2$largeArcFlag, _ref2$sweepFlag = _ref2.sweepFlag, sweepFlag = _ref2$sweepFlag === void 0 ? 0 : _ref2$sweepFlag; var curves = []; if (rx === 0 || ry === 0) { return []; } var sinphi = Math.sin(xAxisRotation * TAU / 360); var cosphi = Math.cos(xAxisRotation * TAU / 360); - var pxp = cosphi * (px2 - cx) / 2 + sinphi * (py2 - cy) / 2; - var pyp = -sinphi * (px2 - cx) / 2 + cosphi * (py2 - cy) / 2; + var pxp = cosphi * (px - cx) / 2 + sinphi * (py - cy) / 2; + var pyp = -sinphi * (px - cx) / 2 + cosphi * (py - cy) / 2; if (pxp === 0 && pyp === 0) { return []; } @@ -15318,7 +15330,7 @@ var arcToBezier = function arcToBezier2(_ref2) { rx *= Math.sqrt(lambda); ry *= Math.sqrt(lambda); } - var _getArcCenter = getArcCenter(px2, py2, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp), _getArcCenter2 = _slicedToArray(_getArcCenter, 4), centerx = _getArcCenter2[0], centery = _getArcCenter2[1], ang1 = _getArcCenter2[2], ang2 = _getArcCenter2[3]; + var _getArcCenter = getArcCenter(px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp), _getArcCenter2 = _slicedToArray(_getArcCenter, 4), centerx = _getArcCenter2[0], centery = _getArcCenter2[1], ang1 = _getArcCenter2[2], ang2 = _getArcCenter2[3]; var ratio = Math.abs(ang2) / (TAU / 4); if (Math.abs(1 - ratio) < 1e-7) { ratio = 1; @@ -15409,7 +15421,7 @@ class Point { return Point.isInLine(point2.endPoint, point2.startPoint, point2, point2.reversePoint); } static getReversePoint(start2, end2) { - const [x, y] = lerp$1([], [end2.x, end2.y, 0], [start2.x, start2.y, 0], 2); + const [x, y] = lerp([], [end2.x, end2.y, 0], [start2.x, start2.y, 0], 2); return { x, y }; } static getIndexPoint(points, index2) { @@ -16749,7 +16761,7 @@ class PathParser { newPoints.push({ point: point2 }); } else if (index2 === points.length - 1) { const firstPoint = points[0]; - if (equals$2(firstPoint, point2)) { + if (equals$1(firstPoint, point2)) { const p0 = prevPoint; const p1 = point2; const p2 = points[1]; @@ -16916,7 +16928,7 @@ class PathParser { return this.toString().trim(); } get closed() { - return this.segments.some((segment) => segment.command === "Z") && equals$1(this.lastPoint, this.firstPoint); + return this.segments.some((segment) => segment.command === "Z") && equals(this.lastPoint, this.firstPoint); } get opened() { return !this.closed; @@ -18960,8 +18972,8 @@ class IconListViewEditor extends EditorElement { }; } [LOAD("$body")]() { - return Object.keys(obj$3).map((key) => { - var html = obj$3[key]; + return Object.keys(obj$2).map((key) => { + var html = obj$2[key]; var selected = key === this.state.value ? "selected" : ""; return `
${html}
`; }); @@ -19034,8 +19046,8 @@ class InputRangeEditor extends EditorElement { var units = this.props.units || ["px", "em", "%", "auto"]; var value = Length.parse(this.props.value || "0px"); let label = this.props.label || ""; - if (obj$3[label]) { - label = obj$3[label]; + if (obj$2[label]) { + label = obj$2[label]; } return { removable: this.props.removable, @@ -19107,7 +19119,7 @@ class InputRangeEditor extends EditorElement {
- +
`; } @@ -19256,7 +19268,7 @@ class RangeEditor extends EditorElement { })}
- +
`; } @@ -19463,8 +19475,8 @@ class NumberInputEditor extends EditorElement { initState() { var value = +this.props.value; let label = this.props.label || ""; - if (obj$3[label]) { - label = obj$3[label]; + if (obj$2[label]) { + label = obj$2[label]; } const compact = isBoolean(this.props.compact) ? this.props.compact : this.props.compact === "true"; const wide = isBoolean(this.props.wide) ? this.props.wide : this.props.wide === "true"; @@ -19640,7 +19652,7 @@ class NumberRangeEditor extends EditorElement {
- + `; } @@ -21705,11 +21717,11 @@ class SelectIconEditor extends EditorElement { } } else { var iconKey = this.state.icons[index2]; - if (obj$3[iconKey]) { + if (obj$2[iconKey]) { iconClass = "icon"; } title2 = label; - label = obj$3[iconKey] || label || iconKey || it.text || it.value; + label = obj$2[iconKey] || label || iconKey || it.text || it.value; } var color2 = this.state.colors[index2]; var css = {}; @@ -21765,7 +21777,7 @@ class StrokeDashArrayEditor extends EditorElement {
${hasLabel ? `` : ""}
- +
@@ -22152,7 +22164,7 @@ class VarEditor extends EditorElement {
- +
@@ -22181,7 +22193,7 @@ class VarEditor extends EditorElement {
@@ -22283,6 +22295,17 @@ var blankEditorPlugins = [ propertyEditor, configs$3 ]; +var ContextMenuManager$1 = ""; +class ContextMenuManager extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--context-menu-manger" + }, this.$injectManager.generate("context.menu")); + } + [SUBSCRIBE(OPEN_CONTEXT_MENU)](obj2) { + this.$context.config.set("context.menu.open", obj2); + } +} class IconManager$1 extends EditorElement { template() { return ` @@ -22291,7 +22314,7 @@ class IconManager$1 extends EditorElement { `; } [LOAD("$list")]() { - return Object.entries(obj$3).map(([key, value]) => { + return Object.entries(obj$2).map(([key, value]) => { if (isString(value) === false) return ""; return value.replace(/\ { +const modules$3 = { "./command_list/Console.js": __glob_0_0$3, "./command_list/history.redo.js": __glob_0_1$3, "./command_list/history.undo.js": __glob_0_2$3, "./command_list/keymap.keydown.js": __glob_0_3$3, "./command_list/keymap.keyup.js": __glob_0_4$3, "./command_list/moveToCenter.js": __glob_0_5$3, "./command_list/pop.mode.view.js": __glob_0_6$3, "./command_list/push.mode.view.js": __glob_0_7$3, "./command_list/recoverCursor.js": __glob_0_8$3, "./command_list/refreshCursor.js": __glob_0_9$3, "./command_list/setLocale.js": __glob_0_10$3, "./command_list/toggle.tool.hand.js": __glob_0_11$3, "./command_list/zoom.default.js": __glob_0_12$3, "./command_list/zoom.in.js": __glob_0_13$3, "./command_list/zoom.out.js": __glob_0_14$3 }; +const obj$1 = {}; +Object.entries(modules$3).forEach(([key, value]) => { key = key.replace("./command_list/", "").replace(".js", ""); - obj$2[key] = value.default; + obj$1[key] = value.default; }); class AssetParser { static parse(datauri, enableParselocal = false) { @@ -22682,9 +22705,9 @@ class ComponentManager { return new ComponentClass(obj2); } createInspector(item, name = "") { - const inspector = this.getInspector(name || item.itemType); - if (isFunction(inspector)) { - return inspector(item) || []; + const inspector2 = this.getInspector(name || item.itemType); + if (isFunction(inspector2)) { + return inspector2(item) || []; } if (isFunction(item.getProps)) { return item.getProps() || []; @@ -22796,8 +22819,8 @@ class ConfigManager { } class CursorManager { async load(iconName = "default", ...args2) { - if (obj$3[iconName]) { - const iconContent = isFunction(obj$3[iconName]) ? obj$3[iconName].call(obj$3[iconName], ...args2) : obj$3[iconName]; + if (obj$2[iconName]) { + const iconContent = isFunction(obj$2[iconName]) ? obj$2[iconName].call(obj$2[iconName], ...args2) : obj$2[iconName]; const blob = new window.Blob([iconContent], { type: "image/svg+xml" }); return new Promise((resolve) => { const reader = new window.FileReader(); @@ -23051,7 +23074,7 @@ var add_artboard = { description: "Add ArtBoard", when: "CanvasView" }; -var __glob_0_0$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_0$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": add_artboard }, Symbol.toStringTag, { value: "Module" })); @@ -23063,7 +23086,7 @@ var add_artboard_pan = { description: "Add ArtBoard", when: "LayerAppendView" }; -var __glob_0_1$3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ +var __glob_0_1$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, "default": add_artboard_pan }, Symbol.toStringTag, { value: "Module" })); @@ -23196,7 +23219,7 @@ var __glob_0_11$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP __proto__: null, "default": clipboard_paste$1 }, Symbol.toStringTag, { value: "Module" })); -var escape$1 = { +var escape = { category: "Tool", key: "escape", command: "select.none", @@ -23205,7 +23228,7 @@ var escape$1 = { }; var __glob_0_12$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ __proto__: null, - "default": escape$1 + "default": escape }, Symbol.toStringTag, { value: "Module" })); var group_item$1 = { category: "Group", @@ -23639,7 +23662,7 @@ var __glob_0_48$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP var set_tool_hand = { category: "Tools", key: "h", - command: "toggleToolHand", + command: "toggleHandTool", description: "set hand tool on", when: "CanvasView" }; @@ -23650,7 +23673,7 @@ var __glob_0_49$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP var set_tool_hand_m = { category: "Tools", key: "h", - command: "toggleToolHand", + command: "toggleHandTool", description: "set hand tool on", when: "LayerAppendView" }; @@ -23714,8 +23737,8 @@ var __glob_0_55$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP __proto__: null, "default": zoom_out }, Symbol.toStringTag, { value: "Module" })); -const modules$3 = { "./shortcuts_list/add.artboard.js": __glob_0_0$3, "./shortcuts_list/add.artboard.pan.js": __glob_0_1$3, "./shortcuts_list/add.brush.js": __glob_0_2$2, "./shortcuts_list/add.circle.js": __glob_0_3$2, "./shortcuts_list/add.circle.l.js": __glob_0_4$2, "./shortcuts_list/add.path.js": __glob_0_5$2, "./shortcuts_list/add.rect.js": __glob_0_6$2, "./shortcuts_list/add.rect.m.js": __glob_0_7$2, "./shortcuts_list/add.rect.pan.js": __glob_0_8$2, "./shortcuts_list/add.text.js": __glob_0_9$2, "./shortcuts_list/clipboard.copy.js": __glob_0_10$2, "./shortcuts_list/clipboard.paste.js": __glob_0_11$2, "./shortcuts_list/escape.js": __glob_0_12$2, "./shortcuts_list/group.item.js": __glob_0_13$2, "./shortcuts_list/history.redo.js": __glob_0_14$2, "./shortcuts_list/history.undo.js": __glob_0_15$2, "./shortcuts_list/item.move.alt.down.js": __glob_0_16$2, "./shortcuts_list/item.move.alt.left.js": __glob_0_17$2, "./shortcuts_list/item.move.alt.right.js": __glob_0_18$2, "./shortcuts_list/item.move.alt.up.js": __glob_0_19$2, "./shortcuts_list/item.move.depth.down.js": __glob_0_20$2, "./shortcuts_list/item.move.depth.up.js": __glob_0_21$2, "./shortcuts_list/item.move.key.down.js": __glob_0_22$2, "./shortcuts_list/item.move.key.left.js": __glob_0_23$2, "./shortcuts_list/item.move.key.right.js": __glob_0_24$1, "./shortcuts_list/item.move.key.up.js": __glob_0_25$1, "./shortcuts_list/item.move.shift.down.js": __glob_0_26$1, "./shortcuts_list/item.move.shift.left.js": __glob_0_27$1, "./shortcuts_list/item.move.shift.right.js": __glob_0_28$1, "./shortcuts_list/item.move.shift.up.js": __glob_0_29$1, "./shortcuts_list/item.rotate.meta.left.js": __glob_0_30$1, "./shortcuts_list/item.rotate.meta.right.js": __glob_0_31$1, "./shortcuts_list/removeLayer.js": __glob_0_32$1, "./shortcuts_list/removeLayerByDeleteKey.js": __glob_0_33$1, "./shortcuts_list/segment.delete.js": __glob_0_34$1, "./shortcuts_list/segment.move.alt.down.js": __glob_0_35$1, "./shortcuts_list/segment.move.alt.left.js": __glob_0_36$1, "./shortcuts_list/segment.move.alt.right.js": __glob_0_37$1, "./shortcuts_list/segment.move.alt.up.js": __glob_0_38$1, "./shortcuts_list/segment.move.key.down.js": __glob_0_39$1, "./shortcuts_list/segment.move.key.left.js": __glob_0_40$1, "./shortcuts_list/segment.move.key.right.js": __glob_0_41$1, "./shortcuts_list/segment.move.key.up.js": __glob_0_42$1, "./shortcuts_list/segment.move.shift.down.js": __glob_0_43$1, "./shortcuts_list/segment.move.shift.left.js": __glob_0_44$1, "./shortcuts_list/segment.move.shift.right.js": __glob_0_45$1, "./shortcuts_list/segment.move.shift.up.js": __glob_0_46$1, "./shortcuts_list/select.all.js": __glob_0_47$1, "./shortcuts_list/select.view.js": __glob_0_48$1, "./shortcuts_list/set.tool.hand.js": __glob_0_49$1, "./shortcuts_list/set.tool.hand.m.js": __glob_0_50$1, "./shortcuts_list/show.pan.js": __glob_0_51$1, "./shortcuts_list/ungroup.item.js": __glob_0_52$1, "./shortcuts_list/zoom.default.js": __glob_0_53$1, "./shortcuts_list/zoom.in.js": __glob_0_54$1, "./shortcuts_list/zoom.out.js": __glob_0_55$1 }; -var shortcuts = Object.values(modules$3).map((it) => it.default); +const modules$2 = { "./shortcuts_list/add.artboard.js": __glob_0_0$2, "./shortcuts_list/add.artboard.pan.js": __glob_0_1$2, "./shortcuts_list/add.brush.js": __glob_0_2$2, "./shortcuts_list/add.circle.js": __glob_0_3$2, "./shortcuts_list/add.circle.l.js": __glob_0_4$2, "./shortcuts_list/add.path.js": __glob_0_5$2, "./shortcuts_list/add.rect.js": __glob_0_6$2, "./shortcuts_list/add.rect.m.js": __glob_0_7$2, "./shortcuts_list/add.rect.pan.js": __glob_0_8$2, "./shortcuts_list/add.text.js": __glob_0_9$2, "./shortcuts_list/clipboard.copy.js": __glob_0_10$2, "./shortcuts_list/clipboard.paste.js": __glob_0_11$2, "./shortcuts_list/escape.js": __glob_0_12$2, "./shortcuts_list/group.item.js": __glob_0_13$2, "./shortcuts_list/history.redo.js": __glob_0_14$2, "./shortcuts_list/history.undo.js": __glob_0_15$2, "./shortcuts_list/item.move.alt.down.js": __glob_0_16$2, "./shortcuts_list/item.move.alt.left.js": __glob_0_17$2, "./shortcuts_list/item.move.alt.right.js": __glob_0_18$2, "./shortcuts_list/item.move.alt.up.js": __glob_0_19$2, "./shortcuts_list/item.move.depth.down.js": __glob_0_20$2, "./shortcuts_list/item.move.depth.up.js": __glob_0_21$2, "./shortcuts_list/item.move.key.down.js": __glob_0_22$2, "./shortcuts_list/item.move.key.left.js": __glob_0_23$2, "./shortcuts_list/item.move.key.right.js": __glob_0_24$1, "./shortcuts_list/item.move.key.up.js": __glob_0_25$1, "./shortcuts_list/item.move.shift.down.js": __glob_0_26$1, "./shortcuts_list/item.move.shift.left.js": __glob_0_27$1, "./shortcuts_list/item.move.shift.right.js": __glob_0_28$1, "./shortcuts_list/item.move.shift.up.js": __glob_0_29$1, "./shortcuts_list/item.rotate.meta.left.js": __glob_0_30$1, "./shortcuts_list/item.rotate.meta.right.js": __glob_0_31$1, "./shortcuts_list/removeLayer.js": __glob_0_32$1, "./shortcuts_list/removeLayerByDeleteKey.js": __glob_0_33$1, "./shortcuts_list/segment.delete.js": __glob_0_34$1, "./shortcuts_list/segment.move.alt.down.js": __glob_0_35$1, "./shortcuts_list/segment.move.alt.left.js": __glob_0_36$1, "./shortcuts_list/segment.move.alt.right.js": __glob_0_37$1, "./shortcuts_list/segment.move.alt.up.js": __glob_0_38$1, "./shortcuts_list/segment.move.key.down.js": __glob_0_39$1, "./shortcuts_list/segment.move.key.left.js": __glob_0_40$1, "./shortcuts_list/segment.move.key.right.js": __glob_0_41$1, "./shortcuts_list/segment.move.key.up.js": __glob_0_42$1, "./shortcuts_list/segment.move.shift.down.js": __glob_0_43$1, "./shortcuts_list/segment.move.shift.left.js": __glob_0_44$1, "./shortcuts_list/segment.move.shift.right.js": __glob_0_45$1, "./shortcuts_list/segment.move.shift.up.js": __glob_0_46$1, "./shortcuts_list/select.all.js": __glob_0_47$1, "./shortcuts_list/select.view.js": __glob_0_48$1, "./shortcuts_list/set.tool.hand.js": __glob_0_49$1, "./shortcuts_list/set.tool.hand.m.js": __glob_0_50$1, "./shortcuts_list/show.pan.js": __glob_0_51$1, "./shortcuts_list/ungroup.item.js": __glob_0_52$1, "./shortcuts_list/zoom.default.js": __glob_0_53$1, "./shortcuts_list/zoom.in.js": __glob_0_54$1, "./shortcuts_list/zoom.out.js": __glob_0_55$1 }; +var shortcuts = Object.values(modules$2).map((it) => it.default); function joinKeys(...args2) { return args2.filter(Boolean).join("+"); } @@ -23997,7 +24020,7 @@ class ViewportManager { } setMousePoint(x, y) { this.mouse = this.createWorldPosition(x, y); - this.setTransformOriginWithTranslate(lerp$1([], this.verties[0], this.verties[2], 0.5)); + this.setTransformOriginWithTranslate(lerp([], this.verties[0], this.verties[2], 0.5)); this.editor.emit(UPDATE_VIEWPORT); } zoom(zoomFactor) { @@ -24007,7 +24030,7 @@ class ViewportManager { const newZoomFactor = this.scale / oldScale; this.zoomFactor = newZoomFactor; if (newZoomFactor !== 1) { - this.setTransformOriginWithTranslate(lerp$1([], this.mouse, this.transformOrigin, 1 / zoomFactor)); + this.setTransformOriginWithTranslate(lerp([], this.mouse, this.transformOrigin, 1 / zoomFactor)); this.editor.emit(UPDATE_VIEWPORT); } } @@ -24018,10 +24041,10 @@ class ViewportManager { moveToCenter(areaVerties, scaleRate = -0.2, withScale = true) { if (!this.canvasSize) return; - const areaCenter = lerp$1([], areaVerties[0], areaVerties[2], 0.5); + const areaCenter = lerp([], areaVerties[0], areaVerties[2], 0.5); const width2 = dist(areaVerties[0], areaVerties[1]); const height2 = dist(areaVerties[0], areaVerties[3]); - const viewportCenter = lerp$1([], this.verties[0], this.verties[2], 0.5); + const viewportCenter = lerp([], this.verties[0], this.verties[2], 0.5); const viewportWidth = dist(this.verties[0], this.verties[1]); const viewportHeight = dist(this.verties[0], this.verties[3]); const minRate = withScale ? Math.min(viewportWidth / width2, viewportHeight / height2) + scaleRate : 1; @@ -24069,17 +24092,17 @@ class ViewportManager { const target = this.originRect; return rectRect(source2.x, source2.y, source2.width, source2.height, target.x, target.y, target.width, target.height); } - applyVertex(vertex2) { - return transformMat4([], vertex2, this.matrix); + applyVertex(vertex) { + return transformMat4([], vertex, this.matrix); } - applyVertexInverse(vertex2) { - return transformMat4([], vertex2, this.matrixInverse); + applyVertexInverse(vertex) { + return transformMat4([], vertex, this.matrixInverse); } - applyScaleVertex(vertex2) { - return transformMat4([], vertex2, this.scaleMatrix); + applyScaleVertex(vertex) { + return transformMat4([], vertex, this.scaleMatrix); } - applyScaleVertexInverse(vertex2) { - return transformMat4([], vertex2, this.scaleMatrixInverse); + applyScaleVertexInverse(vertex) { + return transformMat4([], vertex, this.scaleMatrixInverse); } applyVerties(verties) { return vertiesMap(verties, this.matrix); @@ -24167,7 +24190,7 @@ class Editor { shortcuts: ShortCutManager }); } - this.loadCommands(obj$2); + this.loadCommands(obj$1); this.initPlugins(); this.initStorage(); } @@ -24522,14 +24545,13 @@ const DefaultLayoutDirection = { OUTER: "outer" }; class DefaultLayoutItem extends EditorElement { + get size() { + return this.props.size; + } } class DefaultLayout extends EditorElement { - checkProps(props) { - return props; - } - afterRender() { - super.afterRender(); - this.$config.init("editor.layout.elements", this.refs); + getLayoutElements() { + return this.refs; } initState() { return { @@ -24538,7 +24560,7 @@ class DefaultLayout extends EditorElement { topSize: isNotUndefined(this.props.topSize) ? Number(this.props.topSize) : 48, leftSize: isNotUndefined(this.props.leftSize) ? Number(this.props.leftSize) : 340, rightSize: isNotUndefined(this.props.rightSize) ? Number(this.props.rightSize) : 280, - bottomSize: this.props.bottomSize || 0, + bottomSize: this.props.bottomSize || 20, lastBottomSize: this.props.lastBottomSize || 150, minSize: isNotUndefined(this.props.minSize) ? Boolean(this.props.minSize) : 240, maxSize: isNotUndefined(this.props.maxSize) ? Boolean(this.props.maxSize) : 500 @@ -24551,6 +24573,7 @@ class DefaultLayout extends EditorElement { const top2 = this.getDirection(DefaultLayoutDirection.TOP); const left2 = this.getDirection(DefaultLayoutDirection.LEFT); const right2 = this.getDirection(DefaultLayoutDirection.RIGHT); + const bottom2 = this.getDirection(DefaultLayoutDirection.BOTTOM); const body = this.getDirection(DefaultLayoutDirection.BODY); const inner = this.getDirection(DefaultLayoutDirection.INNER); const outer = this.getDirection(DefaultLayoutDirection.OUTER); @@ -24576,7 +24599,10 @@ class DefaultLayout extends EditorElement { }, right2) : "", /* @__PURE__ */ createElementJsx("div", { class: "splitter", ref: "$splitter" - })), inner), outer); + })), bottom2 ? /* @__PURE__ */ createElementJsx("div", { + class: "layout-bottom", + ref: "$bottomPanel" + }, bottom2) : "", inner), outer); } [BIND("$splitter")]() { let left2 = this.state.leftSize; @@ -24623,10 +24649,6 @@ class DefaultLayout extends EditorElement { moveEndSplitter() { this.refs.$splitter.removeClass("selected"); } - refresh() { - this.bindData("$splitter"); - this.bindData("$leftPanel"); - } } var PopupManager$1 = ""; var NotificationView$1 = ""; @@ -24970,6 +24992,37 @@ class BlankEditor extends BaseLayout { leftSize: 340 }; } + getTopPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "top" + }, /* @__PURE__ */ createElementJsx(BlankToolBar, null)); + } + getLeftPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "left", + resizable: true + }, /* @__PURE__ */ createElementJsx(BlankLayerTab, null)); + } + getRightPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "right" + }, /* @__PURE__ */ createElementJsx(BlankInspector, null)); + } + getBodyPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "body" + }, /* @__PURE__ */ createElementJsx(BlankBodyPanel, null)); + } + getInnerPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "inner" + }, /* @__PURE__ */ createElementJsx(KeyboardManager, null)); + } + getOuterPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "outer" + }, /* @__PURE__ */ createElementJsx(IconManager$1, null), /* @__PURE__ */ createElementJsx(PopupManager, null), /* @__PURE__ */ createElementJsx(ContextMenuManager, null)); + } template() { return /* @__PURE__ */ createElementJsx("div", { class: "elf-studio blank-editor" @@ -24979,1373 +25032,415 @@ class BlankEditor extends BaseLayout { leftSize: 340, rightSize: 280, ref: "$layout" - }, /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "top" - }, /* @__PURE__ */ createElementJsx(BlankToolBar, null)), /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "left", - resizable: "true" - }, /* @__PURE__ */ createElementJsx(BlankLayerTab, null)), /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "right" - }, /* @__PURE__ */ createElementJsx(BlankInspector, null)), /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "body" - }, /* @__PURE__ */ createElementJsx(BlankBodyPanel, null)), /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "inner" - }, /* @__PURE__ */ createElementJsx(KeyboardManager, null)), /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { - type: "outer" - }, /* @__PURE__ */ createElementJsx(IconManager$1, null), /* @__PURE__ */ createElementJsx(PopupManager, null)))); - } - [BIND("$splitter")]() { - let left2 = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; - } - return { - style: { - left: left2 - } - }; - } - [BIND("$leftPanel")]() { - let width2 = this.state.leftSize; - return { - style: { - width: width2, - display: this.$config.true("show.left.panel") ? "block" : "none" - } - }; - } - [BIND("$rightPanel")]() { - return { - style: { - display: this.$config.true("show.right.panel") ? "block" : "none" - } - }; - } - [POINTERSTART("$splitter") + MOVE("moveSplitter") + END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); - } - moveSplitter(dx) { - this.setState({ - leftSize: Math.max(Math.min(this.leftSize + dx, this.maxSize), this.minSize) - }); - } - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); + }, this.getTopPanel(), this.getLeftPanel(), this.getRightPanel(), this.getBodyPanel(), this.getInnerPanel(), this.getOuterPanel())); } refresh() { - this.bindData("$splitter"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); + super.refresh(); this.emit("resizeEditor"); } - [CONFIG("show.left.panel")]() { - this.children.$layout.setOptions({ - showLeftPanel: this.$config.get("show.left.panel") - }); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - [CONFIG("show.right.panel")]() { - this.children.$layout.setOptions({ - showLeftPanel: this.$config.get("show.right.panel") - }); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } [SUBSCRIBE(TOGGLE_FULLSCREEN)]() { this.$el.toggleFullscreen(); } } -var layout$4 = ""; -class ColorInformation extends EditorElement { - template() { - return ` -
-
- -
-
-
- -
HEX
-
-
-
-
- -
R
-
-
- -
G
-
-
- -
B
-
-
- -
A
-
-
-
-
- -
H
-
-
- -
%
-
S
-
-
- -
%
-
L
-
-
- -
A
-
-
-
- `; +var layout$1 = ""; +class ClipboardManager { + constructor(editor) { + this.editor = editor; + this.clipboard = []; } - get manager() { - return this.parent.manager; + get length() { + return this.clipboard.length; } - setCurrentFormat(format2) { - this.format = format2; - this.initFormat(); + clear() { + this.clipboard = []; } - initFormat() { - var current_format = this.format || "hex"; - ["hex", "rgb", "hsl"].filter((it) => it !== current_format).forEach((formatString) => { - this.$el.removeClass(formatString); - }); - this.$el.addClass(current_format); + get isEmpty() { + return this.clipboard.length == 0; } - nextFormat() { - var current_format = this.format || "hex"; - var next_format = "hex"; - if (current_format == "hex") { - next_format = "rgb"; - } else if (current_format == "rgb") { - next_format = "hsl"; - } else if (current_format == "hsl") { - if (this.parent.alpha == 1) { - next_format = "hex"; - } else { - next_format = "rgb"; - } - } - this.format = next_format; - this.initFormat(); - this.parent.changeFormat(this.format); + get last() { + return this.clipboard[this.clipboard.length - 1]; } - goToFormat(to_format) { - this.format = to_format; - if (to_format === "rgb" || to_format === "hsl") { - this.initFormat(); - } - this.parent.changeFormat(this.format); + push(data) { + this.clipboard.push(data); } - getFormat() { - return this.format || "hex"; + pop() { + return this.clipboard.pop(); } - changeRgbColor() { - this.parent.lastUpdateColor({ - type: "rgb", - r: this.refs.$rgb_r.int(), - g: this.refs.$rgb_g.int(), - b: this.refs.$rgb_b.int(), - a: this.refs.$rgb_a.float() - }); +} +class HistoryManager { + constructor(editor) { + this.$editor = editor; + this.$context = editor.context; + this.currentIndex = -1; + this.undoHistories = []; + this.redoHistories = []; + this.selection = {}; } - changeHslColor() { - this.parent.lastUpdateColor({ - type: "hsl", - h: this.refs.$hsl_h.int(), - s: this.refs.$hsl_s.int(), - l: this.refs.$hsl_l.int(), - a: this.refs.$hsl_a.float() - }); + get length() { + return this.undoHistories.length; } - hasValue(e) { - if (e.target.value === "") { - return false; - } - return true; + get selectedIds() { + return Object.keys(this.selection); } - [INPUT("$rgb_r") + IF("hasValue")]() { - this.changeRgbColor(); + createCommand(commandString) { + return this.$context.stateManager.isPointerUp ? `history.${commandString}` : commandString; } - [INPUT("$rgb_g") + IF("hasValue")]() { - this.changeRgbColor(); + saveSelection(obj2 = {}) { + this.selection = this.$editor.context.selection.toCloneObject(); } - [INPUT("$rgb_b") + IF("hasValue")]() { - this.changeRgbColor(); + getUndoValues(multiAttrs = {}) { + let result = {}; + Object.keys(multiAttrs).forEach((id) => { + result[id] = {}; + const selectedObject = this.selection[id] || this.$editor.context.selection.itemsByIds(id)[0]; + const attrs = multiAttrs[id]; + Object.keys(attrs).forEach((key) => { + result[id][key] = selectedObject[key]; + }); + }); + return result; } - [INPUT("$rgb_a") + IF("hasValue")]() { - this.changeRgbColor(); + add(message, command, data) { + const time = window.performance.now(); + const lastUndoObject = this.undoHistories[this.undoHistories.length - 1]; + const historyObject = { message, command, data, time }; + if (lastUndoObject && lastUndoObject.message === message && time - lastUndoObject.time < this.$editor.context.config.get("history.delay.ms")) { + this.undoHistories[this.undoHistories.length - 1] = historyObject; + } else { + this.undoHistories.push(historyObject); + this.currentIndex++; + this.undoHistories.length = this.currentIndex + 1; + } + this.$context.commands.emit("refreshHistory", command.command); + this.$editor.emit("refreshHistoryList"); + return historyObject; } - [INPUT("$hsl_h") + IF("hasValue")]() { - this.changeHslColor(); + map(callback) { + let results = [ + ...this.undoHistories.map(callback), + "-", + ...this.redoHistories.map(callback) + ].reverse(); + return results; } - [INPUT("$hsl_s") + IF("hasValue")]() { - this.changeHslColor(); + undo() { + if (this.currentIndex < -1) + return; + if (this.currentIndex === this.length) { + this.currentIndex--; + } + const commandObject = this.undoHistories[this.currentIndex]; + if (commandObject && commandObject.command) { + commandObject.command.undo(this.$editor, commandObject.data); + this.currentIndex--; + this.$editor.nextTick(() => { + this.$context.commands.emit("refreshHistory", commandObject.command); + this.$editor.emit("refreshHistoryList"); + }); + } } - [INPUT("$hsl_l") + IF("hasValue")]() { - this.changeHslColor(); + redo() { + if (this.currentIndex > this.length) + return; + if (this.currentIndex < 0) { + this.currentIndex++; + } + const commandObject = this.undoHistories[this.currentIndex]; + if (commandObject && commandObject.command) { + this.currentIndex++; + commandObject.command.redo(this.$editor, commandObject.data); + this.$editor.debug(commandObject); + this.$editor.nextTick(() => { + this.$context.commands.emit("refreshHistory", commandObject.command); + this.$editor.emit("refreshHistoryList"); + }); + } } - [INPUT("$hsl_a") + IF("hasValue")]() { - this.changeHslColor(); +} +class LockManager { + constructor(editor) { + this.editor = editor; + this.lockList = {}; } - [KEYUP("$hexCode") + IF("hasValue")]() { - var code2 = this.refs.$hexCode.val(); - if (code2.charAt(0) == "#" && (code2.length == 7 || code2.length === 9)) { - this.parent.lastUpdateColor(code2); - } + get(key) { + return this.lockList[key]; } - [PASTE("$hexCode") + IF("hasValue")]() { - var code2 = this.refs.$hexCode.val(); - if (code2.charAt(0) == "#" && (code2.length == 7 || code2.length === 9)) { - this.parent.lastUpdateColor(code2); + set(key, value) { + this.lockList[key] = true; + } + toggle(key) { + if (this.lockList[key]) { + delete this.lockList[key]; + } else { + this.lockList[key] = true; } } - [CLICK("$formatChangeButton")]() { - this.nextFormat(); +} +const identity$1 = () => true; +class ModelManager { + constructor(editor) { + this.editor = editor; + this.context = this.editor.context; + this.version = "0.0.0"; + this.name = ""; + this.description = ""; + this.items = /* @__PURE__ */ new Map(); + this.projects = []; } - [CLICK("$el .information-item.hex .input-field .title")]() { - this.goToFormat("hex"); + load(doc2 = void 0, context = { origin: "*" }) { + var _a; + const newDoc = doc2 || this.editor.loadItem("model"); + this.items.clear(); + this.version = newDoc == null ? void 0 : newDoc.version; + this.name = newDoc == null ? void 0 : newDoc.name; + this.description = newDoc == null ? void 0 : newDoc.description; + (_a = newDoc == null ? void 0 : newDoc.projects) == null ? void 0 : _a.forEach((project2) => { + this.createModel(project2); + }); + if (this.projects.length === 0) { + this.createProject(); + } } - [CLICK("$el .information-item.rgb .input-field .title")]() { - this.goToFormat("hsl"); + createProject() { + this.createModel({ + itemType: "project", + name: "New Project" + }); } - [CLICK("$el .information-item.hsl .input-field .title")]() { - this.goToFormat("rgb"); + getProjectByIndex(index2 = 0) { + return this.get(this.projects[index2]); } - setRGBInput() { - this.refs.$rgb_r.val(this.manager.rgb.r); - this.refs.$rgb_g.val(this.manager.rgb.g); - this.refs.$rgb_b.val(this.manager.rgb.b); - this.refs.$rgb_a.val(this.manager.alpha); + get(id) { + return this.items.get(id); } - setHSLInput() { - this.refs.$hsl_h.val(this.manager.hsl.h); - this.refs.$hsl_s.val(this.manager.hsl.s); - this.refs.$hsl_l.val(this.manager.hsl.l); - this.refs.$hsl_a.val(this.manager.alpha); + set(id, item) { + this.items.set(id, item); + this.setChanged("set", id, item); } - setHexInput() { - this.refs.$hexCode.val(this.manager.toString("hex")); + remove(id) { + const obj2 = this.items.get(id); + const children2 = obj2.parent.children; + const index2 = children2.indexOf(id); + obj2.reset({ + removed: true, + removedIndex: index2, + removedLeftSibling: index2 > 0 ? children2[index2 - 1] : null, + removedRightSibling: index2 < children2.length - 1 ? children2[index2 + 1] : null + }); + this.setChanged("remove", id); } - setValue() { - this.refresh(); + recover(id) { + const obj2 = this.items.get(id); + const parent = this.getParent(id); + if (!obj2.get("removedLeftSibling") && obj2.get("removedRightSibling")) { + parent.children.splice(parent.children.findIndex(() => obj2.get("removedRightSibling")) - 1, 0, id); + } else if (obj2.get("removedLeftSibling") && !obj2.get("removedRightSibling")) { + parent.children.splice(parent.children.findIndex(() => obj2.get("removedLeftSibling")) + 1, 0, id); + } else { + parent.children.splice(obj2.get("removedIndex"), 0, id); + } + obj2.removeField("removed"); + obj2.removeField("removedLeftSibling"); + obj2.removeField("removedRightSibling"); + obj2.removeField("removedIndex"); + this.setChanged("recover", id); } - refresh() { - this.setCurrentFormat(this.manager.format); - this.setRGBInput(); - this.setHSLInput(); - this.setHexInput(); + clear() { + this.items.clear(); } -} -class ColorPalette extends EditorElement { - initState() { + toJSON() { return { - hueColor: "rgba(0, 0, 0, 1)", - s: 0, - v: 0 + version: this.version, + name: this.name, + description: this.description, + projects: this.projects.map((id) => { + return this.get(id).toJSON(); + }) }; } - template() { - return ` -
-
-
-
-
-
-
- `; + setChanged(type, id, obj2) { + this.editor.emit("changed", type, id, obj2); } - afterRender() { - this.rect = this.$el.rect(); + removeChild(rootId, childId) { + const obj2 = this.get(rootId); + obj2.reset({ + children: obj2.children.filter((it) => it !== childId) + }); + this.setChanged("removeChild", rootId, { childId }); } - [BIND("$el")]() { - return { - style: { - "background-color": this.state.hueColor - } - }; - } - [BIND("$drag_pointer")]() { - if (!this.rect || this.rect.width === 0) { - this.rect = this.$el.rect(); - } - const x = this.rect.width * this.state.s; - const y = this.rect.height * (1 - this.state.v); - return { - style: { - left: x, - top: y - } - }; - } - [POINTERSTART("$el") + MOVE("movePointer") + END("moveEndPointer")]() { - this.rect = this.$el.rect(); - this.refreshColorUI(); - } - movePointer() { - this.refreshColorUI(); - } - moveEndPointer() { - this.parent.changeEndColor(); + get components() { + return this.context.components; } - refreshColorUI() { - const e = this.$config.get("bodyEvent"); - const minX = this.rect.left; - const maxX = this.rect.right; - const minY = this.rect.top; - const maxY = this.rect.bottom; - const currentX = Math.min(maxX, Math.max(minX, e.clientX)); - const currentY = Math.min(maxY, Math.max(minY, e.clientY)); - const width2 = maxX - minX; - const height2 = maxY - minY; - var s = (currentX - minX) / width2; - var v = (height2 - (currentY - minY)) / height2; - this.parent.changeColor({ - type: "hsv", - s, - v - }); + searchItem(id) { + return this.get(id); } - setValue(s, v, hueColor) { - this.setState({ - s, - v, - hueColor - }); + searchLayers(rootId, childId) { + const obj2 = this.get(rootId); + return this.get(obj2.children.find((it) => it === childId)); } -} -class ColorView extends EditorElement { - initState() { - return { - value: "rgba(0, 0, 0, 1)" - }; + searchItemsById(ids) { + return ids.map((id) => this.get(id)); } - template() { - return `
`; + findGroupItem(rootId) { + const obj2 = this.get(rootId); + if (obj2.hasChildren()) { + return obj2; + } + if (obj2.parent && (obj2.parent.is("project") || obj2.parent.is("artboard") || obj2.isBooleanItem)) { + return obj2; + } + return obj2.parent && this.findGroupItem(obj2.parentId); } - [BIND("$el")]() { - return { - style: { - "background-color": this.state.value + convertGroupItems(items) { + const objectList = {}; + items.forEach((item) => { + if (item.parent && item.isNot("project") && item.parent.hasLayout()) { + const groupItem = item.parent; + objectList[groupItem.id] = groupItem; + } else { + const groupItem = this.findGroupItem(item.id) || item; + objectList[groupItem.id] = groupItem; } - }; - } - setValue(value) { - this.setState({ - value }); + return Object.values(objectList).filter((it) => it.isNot("project")); } -} -class Hue extends EditorElement { - initState() { - return { - hue: 0, - minValue: 0, - maxValue: 360 - }; - } - template() { - return ` -
-
-
-
-
- `; - } - [BIND("$bar")]() { - const hue = this.state.hue; - return { - style: { - left: Length.makePercent(hue, 360) - }, - class: { - first: hue <= this.state.minValue, - last: hue >= this.state.maxValue - } - }; + searchLiveItemsById(ids) { + return ids.map((id) => this.get(id)).filter((it) => !it.removed); } - [POINTERSTART("$container") + MOVE("movePointer") + END("moveEndPointer")]() { - this.rect = this.refs.$container.rect(); - this.refreshColorUI(); + markRemove(ids = []) { + ids.forEach((id) => { + this.remove(id); + }); + this.setChanged("markRemove", ids, { isLayer: true }); } - movePointer() { - this.refreshColorUI(); + markRemoveProject(id) { + const index2 = this.projects.findIndex((it) => it === id); + this.projects.splice(index2, 1); + this.get(id).removed = true; + this.setChanged("markRemoveProject", [id], { isProject: true }); + return index2; } - refreshColorUI() { - const minX = this.rect.left; - const maxX = this.rect.right; - const currentX = Math.max(Math.min(maxX, this.$config.get("bodyEvent").clientX), minX); - const rate = (currentX - minX) / (maxX - minX); - this.parent.changeColor({ - h: rate * this.state.maxValue, - type: "hsv" + unmarkRemove(ids = []) { + ids.forEach((id) => { + this.recover(id); }); + this.setChanged("unmarkRemove", ids, { isLayer: true }); } - setValue(hue) { - this.setState({ - hue + unmarkRemoveProject(id, index2) { + this.projects.splice(index2, 0, id); + this.get(id).removed = false; + this.setChanged("unmarkRemoveProject", [id], { + removed: true, + isProject: true }); } -} -class Opacity extends EditorElement { - initState() { - return { - colorbar: parse("rgba(0, 0, 0, 1)"), - opacity: 0, - minValue: 0, - maxValue: 100 - }; - } - template() { - return ` -
-
-
-
-
-
- `; - } - [BIND("$colorbar")]() { - const rgb2 = clone$1(this.state.colorbar); - rgb2.a = 0; - const start2 = format(rgb2, "rgb"); - rgb2.a = 1; - const end2 = format(rgb2, "rgb"); - return { - style: { - background: `linear-gradient(to right, ${start2}, ${end2})` - } - }; - } - [BIND("$bar")]() { - const opacity2 = this.state.opacity * 100; - return { - style: { - left: Length.percent(opacity2) - }, - class: { - first: opacity2 <= this.state.minValue, - last: opacity2 >= this.state.maxValue + createModel(itemObject, isRegister = true, context = { origin: "*" }) { + const layers2 = itemObject.layers; + delete itemObject.layers; + let item; + if (this.get(itemObject.id)) { + item = this.get(itemObject.id); + item.reset(itemObject); + } else { + item = this.components.createComponent(itemObject.itemType, __spreadValues({}, itemObject)); + item.setModelManager(this); + } + if (isRegister) { + this.set(item.id, item); + if (item.is("project")) { + this.projects = [.../* @__PURE__ */ new Set([...this.projects, item.id])]; } - }; - } - [POINTERSTART("$container") + MOVE("movePointer") + END("moveEndPointer")]() { - this.rect = this.refs.$container.rect(); - this.refreshColorUI(); - } - movePointer() { - this.refreshColorUI(); - } - refreshColorUI() { - const minX = this.rect.left; - const maxX = this.rect.right; - const currentX = Math.max(Math.min(maxX, this.$config.get("bodyEvent").clientX), minX); - const rate = (currentX - minX) / (maxX - minX); - this.parent.changeColor({ - a: rate.toFixed(2) - }); - } - setValue(colorbar, opacity2) { - this.setState({ - opacity: opacity2, - colorbar + } + const children2 = (layers2 || []).map((it) => { + return this.createModel(__spreadProps(__spreadValues({}, it), { parentId: item.id }), true, context); }); + if (children2.length) { + item.reset({ + children: children2.map((it) => { + return it.id; + }) + }, context); + } + return item; } -} -class ColorManagerV2 { - constructor() { - this.initialize(); - } - initialize() { - this.state = { - rgb: {}, - hsl: {}, - hsv: {}, - alpha: 1, - format: "hex" - }; - } - get hsv() { - return this.state.hsv; - } - get rgb() { - return this.state.rgb; - } - get hsl() { - return this.state.hsl; - } - get hex() { - return this.state.hex; - } - get alpha() { - if (typeof this.state.alpha === "undefined") - return 1; - return this.state.alpha; - } - get format() { - return this.state.format; - } - changeFormat(format2) { - this.state.format = format2; - } - initColor(colorObj) { - this.changeColor(colorObj); - } - changeColor(colorObj) { - colorObj = colorObj || "#FF0000"; - if (typeof colorObj === "string") { - colorObj = parse(colorObj); + getAllLayers(rootId, filterCallback = identity$1) { + var results = []; + const obj2 = this.get(rootId); + let len2 = obj2.children.length; + for (let start2 = len2; start2--; ) { + let id = obj2.children[start2]; + results.push(...this.getAllLayers(id, filterCallback)); } - this.state.alpha = typeof colorObj.a !== "undefined" ? colorObj.a : this.state.alpha; - this.state.format = colorObj.type != "hsv" ? colorObj.type || this.state.format : this.state.format; - if (colorObj.type == "hsl") { - this.state.hsl = __spreadValues(__spreadValues({}, this.state.hsl), colorObj); - this.state.rgb = HSLtoRGB(this.state.hsl); - this.state.hsv = HSLtoHSV(colorObj); - } else if (colorObj.type == "hex") { - this.state.rgb = __spreadValues(__spreadValues({}, this.state.rgb), colorObj); - this.state.hsl = RGBtoHSL(this.state.rgb); - this.state.hsv = RGBtoHSV(colorObj); - } else if (colorObj.type == "rgb") { - this.state.rgb = __spreadValues(__spreadValues({}, this.state.rgb), colorObj); - this.state.hsl = RGBtoHSL(this.state.rgb); - this.state.hsv = RGBtoHSV(colorObj); - } else if (colorObj.type == "hsv") { - this.state.hsv = __spreadValues(__spreadValues({}, this.state.hsv), colorObj); - this.state.rgb = HSVtoRGB(this.state.hsv); - this.state.hsl = HSVtoHSL(this.state.hsv); + if (isFunction(filterCallback) && filterCallback(obj2)) { + results.push(obj2); } + return results; } - getHueColor() { - return checkHueColor(this.state.hsv.h / 360); - } - toString(type) { - type = type || this.state.format; - var colorObj = this.state[type] || this.state.rgb; - return format(__spreadProps(__spreadValues({}, colorObj), { a: this.state.alpha }), type); - } - toColor(type) { - type = (type || this.state.format).toLowerCase(); - return this.toString(type); - } -} -class ColorPickerEditor extends EditorElement { - created() { - this.manager = new ColorManagerV2(); - } - initState() { - const value = this.props.value || "rgba(0, 0, 0, 1)"; - this.manager.initColor(value); - return { - key: this.props.key, - value: this.manager.toString() - }; - } - updateData(opt = {}) { - this.setState(opt, false); - this.modifyColorPicker(); - } - modifyColorPicker() { - this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); + getLayers(rootId) { + var _a; + const obj2 = this.get(rootId); + return ((_a = obj2 == null ? void 0 : obj2.children) == null ? void 0 : _a.map((childId) => this.get(childId))) || []; } - initColor(newColor, format2) { - this.manager.changeColor(newColor, format2); - this.refresh(); + eachLayers(rootId, callback) { + const obj2 = this.get(rootId); + let len2 = obj2.children.length; + for (let start2 = len2; start2--; ) { + let id = obj2.children[start2]; + callback(this.get(id)); + } } - changeColor(newColor, format2) { - this.manager.changeColor(newColor, format2); - this.refresh(); - this.updateData({ - value: this.manager.toColor() + mapLayers(rootId, callback) { + const obj2 = this.get(rootId); + return obj2.children.map((childId) => { + return callback(this.get(childId)); }); } - [SUBSCRIBE_SELF("selectColorAssets")](key, color2) { - this.lastUpdateColor(color2); - } - changeFormat(format2) { - this.manager.changeFormat(format2); - this.setState({ - value: this.manager.toColor() - }, false); - this.modifyColorPicker(); - this.changeEndColor(); - } - lastUpdateColor(newColor, format2) { - this.manager.changeColor(newColor, format2); - this.refresh(); - this.setState({ - value: this.manager.toColor() - }, false); - this.modifyColorPicker(); - this.changeEndColor(); - } - changeEndColor() { - this.parent.trigger(this.props.onchangeend, this.props.key, this.state.value, this.props.params); + getParent(rootId) { + var _a; + return this.get((_a = this.get(rootId)) == null ? void 0 : _a.parentId); } - refresh() { - const color2 = this.manager.toColor(); - this.children.$palette.setValue(this.manager.hsv.s, this.manager.hsv.v, this.manager.getHueColor()); - this.children.$opacity.setValue(this.manager.rgb, this.manager.alpha); - this.children.$hue.setValue(this.manager.hsv.h); - this.children.$colorview.setValue(color2); - this.children.$information.setValue(); + getDepth(rootId) { + const parent = this.getParent(rootId); + if (!parent) + return 1; + return this.getDepth(parent.id) + 1; } - components() { - return { - Hue, - Opacity, - ColorView, - Palette: ColorPalette, - ColorInformation - }; + getPath(rootId, defaultRef = null) { + const obj2 = this.get(rootId) || defaultRef; + const parent = this.getParent(rootId); + if (!parent) + return [obj2]; + const list2 = this.getPath(parent.id); + list2.push(obj2); + return list2; } - template() { - return ` -
-
- ${createComponent("Palette", { ref: "$palette" })} -
- ${createComponent("Hue", { ref: "$hue" })} - ${createComponent("Opacity", { ref: "$opacity" })} -
- ${createComponent("ColorView", { - ref: "$colorview" - })} -
- ${createComponent("ColorInformation", { - ref: "$information" - })} - ${this.$context.injectManager.generate("colorpicker")} - ${createComponent("ColorAssetsEditor", { - ref: "$colorAsset", - key: "colorAssets", - onchange: "selectColorAssets" - })} -
-
- `; + clone(rootId, isDeep = true) { + const obj2 = this.get(rootId); + const json = obj2.toCloneObject(isDeep); + const item = this.createModel(json); + item.setParentId(obj2.parentId); + return item; } } -var ColorPickerPopup$1 = ""; -var BasePopup$1 = ""; -class BasePopup extends EditorElement { - template() { - return ` -
-
- - - ${this.getTools()} - - -
-
${this.getBody()}
- -
- `; - } - getClassName() { - return ""; - } - getTitle() { - return ""; - } - getTools() { - return ""; - } - getBody() { - return ""; - } - onClose() { - } - [CLICK("$close")]() { - this.$el.hide(); - this.onClose(); - } - setTitle(title2) { - this.refs.$title.$("label").text(title2); - } - [POINTERSTART("$title") + MOVE("movePopupTitle") + END("endPopupTitle")]() { - this.x = Length.parse(this.$el.css("left")); - this.y = Length.parse(this.$el.css("top")); - } - movePopupTitle(dx, dy) { - var left2 = Length.px(this.x.value + dx); - var top2 = Length.px(this.y.value + dy); - this.$el.css({ left: left2, top: top2, right: "auto", bottom: "auto" }); - } - show(width2 = 200) { - var popupPadding = 28; - var rightPosition = 320; - var top2 = this.$el.css("top"); - var left2 = this.$el.css("left"); - var realTop = top2 !== "auto" ? Length.parse(top2) : 110; - var realLeft = left2 !== "auto" ? Length.parse(left2) : document.body.clientWidth - rightPosition - popupPadding - width2; - this.$el.css({ - top: Length.px(realTop), - left: Length.px(realLeft), - "z-index": this.$editor.zIndex - }).show("inline-block"); - } - makeRect(width2, height2, rect2) { - const elements = this.$config.get("editor.layout.elements"); - const bodyRect = elements.$bodyPanel.rect(); - let left2 = bodyRect.left + bodyRect.width - width2 - 10; - let top2 = rect2.top + height2 > bodyRect.top + bodyRect.height ? bodyRect.top + bodyRect.height - height2 - 10 : rect2.top; - if (top2 < 10) { - top2 = 10; - } - return { - top: top2, - left: left2, - width: width2, - height: height2 - }; - } - showByRect(rect2) { - this.$el.css({ - top: Length.px(rect2.top), - left: Length.px(rect2.left), - width: Length.px(rect2.width), - height: Length.px(rect2.height), - "z-index": this.$editor.zIndex - }).show("inline-block"); - } - hide() { - this.$el.hide(); - } - [SUBSCRIBE("hidePropertyPopup")]() { - this.hide(); - } - [POINTERSTART("$resizer") + MOVE("moveResizer")]() { - this.width = Length.parse(this.$el.css("width")); - this.height = Length.parse(this.$el.css("height")); - } - moveResizer(dx, dy) { - this.$el.css({ - width: Math.min(this.width + dx, 1e3), - height: Math.min(this.height + dy, 700) - }); - } -} -class ColorPickerPopup extends BasePopup { - getTitle() { - return this.$i18n("colorpicker.popup.title"); - } - getClassName() { - return "compact elf--colorpicker-popup"; - } - initState() { - return { - color: "rgba(0, 0, 0, 1)" - }; - } - updateData(opt = {}) { - this.setState(opt, false); - if (this.state.target) { - this.state.target.trigger(this.state.changeEvent, this.state.color, this.params); - } - } - updateEndData(opt = {}) { - this.setState(opt, false); - if (this.state.target) { - this.state.target.trigger(this.state.changeEndEvent, this.state.color, this.params); - } - } - getBody() { - return ` -
-
- ${createComponent("EmbedColorPicker", { - ref: "$color", - value: this.state.color, - onchange: (color2) => this.updateData({ color: color2 }), - onchangeend: (color2) => this.updateEndData({ color: color2 }) - })} -
- `; - } - [LOAD("$projectColors")]() { - var project2 = this.$context.selection.currentProject || { colors: [] }; - var colors2 = project2.colors; - return colors2.map((color2) => { - return ` -
-
-
`; - }); - } - [CLICK("$projectColors .color-view")](e) { - this.updateData({ - color: e.$dt.attr("data-color") - }); - this.children.$color.setValue(this.state.color); - } - [SUBSCRIBE("showColorPickerPopup")](data, params, rect2) { - data.changeEvent = data.changeEvent || "changeFillPopup"; - if (!(data.target instanceof UIElement)) { - throw new Error("ColorPicker needs data.target"); - } - this.params = params; - this.setState(data, false); - this.children.$color.setValue(this.state.color); - this.showByRect(this.makeRect(245, 500, rect2)); - } - [SUBSCRIBE("hideColorPickerPopup")]() { - this.hide(); - } -} -class EmbedColorPicker extends EditorElement { - initState() { - return { - value: this.props.value || "rgba(0, 0, 0, 1)" - }; - } - template() { - return ` -
- ${createComponent("ColorPickerEditor", { - ref: "$colorpicker", - key: "colorpicker", - value: this.state.value, - onchange: "localChangeColor", - onchangeend: "localLastUpdate" - })} -
- `; - } - [SUBSCRIBE_SELF("localChangeColor")](key, color2) { - this.parent.trigger(this.props.onchange, color2); - } - [SUBSCRIBE_SELF("localLastUpdate")](key, color2) { - this.parent.trigger(this.props.onchangeend, color2); - } - setValue(color2) { - this.state.value = color2; - this.children.$colorpicker.initColor(color2); - } - refresh() { - this.children.$colorpicker.initColor(this.props.value); - } -} -function color(editor) { - editor.registerElement({ - ColorPickerEditor, - EmbedColorPicker - }); - editor.registerUI("popup", { - ColorPickerPopup - }); -} -var dataEditorPlugins = [ - defaultConfigs, - defaultIcons, - defaultMessages, - baseEditor, - propertyEditor, - color -]; -class DataEditor extends BaseLayout { - components() { - return { - PopupManager, - KeyboardManager, - IconManager: IconManager$1 - }; - } - getPlugins() { - return dataEditorPlugins; - } - createEditorInstance() { - return new Editor({ - ignoreManagers: ["ShortCutManager"] - }); - } - afterRender() { - super.afterRender(); - this.$config.init("editor.layout.elements", this.refs); - } - initState() { - return { - inspector: this.props.inspector || [], - onChange: this.props.onChange || (() => true), - open: isBoolean(this.props.open) && this.props.open === false ? false : true, - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150 - }; - } - template() { - return ` -
-
-
-
Close Controls
-
- - ${createComponent("KeyboardManager")} - ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
- `; - } - [CLICK("$close")]() { - this.setState({ - open: !this.state.open - }, false); - this.bindData("$main"); - this.bindData("$close"); - } - [BIND("$main")]() { - return { - "data-open-status": this.state.open - }; - } - [BIND("$close")]() { - return { - text: this.state.open ? "Close Controls" : "Open Controls" - }; - } - [LOAD("$body")]() { - const inspector = this.state.inspector; - return createComponent("ComponentEditor", { - ref: "$comp", - inspector, - onchange: "changeComponent" - }); - } - getValue() { - return this.children.$comp.getValue(); - } - [SUBSCRIBE_SELF("changeComponent")](key, value) { - if (isFunction(this.state.onChange)) { - this.emit(this.state.onChange, this, key, value); - } - } -} -var layout$3 = ""; -class ClipboardManager { - constructor(editor) { - this.editor = editor; - this.clipboard = []; - } - get length() { - return this.clipboard.length; - } - clear() { - this.clipboard = []; - } - get isEmpty() { - return this.clipboard.length == 0; - } - get last() { - return this.clipboard[this.clipboard.length - 1]; - } - push(data) { - this.clipboard.push(data); - } - pop() { - return this.clipboard.pop(); - } -} -class HistoryManager { - constructor(editor) { - this.$editor = editor; - this.$context = editor.context; - this.currentIndex = -1; - this.undoHistories = []; - this.redoHistories = []; - this.selection = {}; - } - get length() { - return this.undoHistories.length; - } - get selectedIds() { - return Object.keys(this.selection); - } - createCommand(commandString) { - return this.$context.stateManager.isPointerUp ? `history.${commandString}` : commandString; - } - saveSelection(obj2 = {}) { - this.selection = this.$editor.context.selection.toCloneObject(); - } - getUndoValues(multiAttrs = {}) { - let result = {}; - Object.keys(multiAttrs).forEach((id) => { - result[id] = {}; - const selectedObject = this.selection[id] || this.$editor.context.selection.itemsByIds(id)[0]; - const attrs = multiAttrs[id]; - Object.keys(attrs).forEach((key) => { - result[id][key] = selectedObject[key]; - }); - }); - return result; - } - add(message, command, data) { - const time = window.performance.now(); - const lastUndoObject = this.undoHistories[this.undoHistories.length - 1]; - const historyObject = { message, command, data, time }; - if (lastUndoObject && lastUndoObject.message === message && time - lastUndoObject.time < this.$editor.context.config.get("history.delay.ms")) { - this.undoHistories[this.undoHistories.length - 1] = historyObject; - } else { - this.undoHistories.push(historyObject); - this.currentIndex++; - this.undoHistories.length = this.currentIndex + 1; - } - this.$context.commands.emit("refreshHistory", command.command); - this.$editor.emit("refreshHistoryList"); - return historyObject; - } - map(callback) { - let results = [ - ...this.undoHistories.map(callback), - "-", - ...this.redoHistories.map(callback) - ].reverse(); - return results; - } - undo() { - if (this.currentIndex < -1) - return; - if (this.currentIndex === this.length) { - this.currentIndex--; - } - const commandObject = this.undoHistories[this.currentIndex]; - if (commandObject && commandObject.command) { - commandObject.command.undo(this.$editor, commandObject.data); - this.currentIndex--; - this.$editor.nextTick(() => { - this.$context.commands.emit("refreshHistory", commandObject.command); - this.$editor.emit("refreshHistoryList"); - }); - } - } - redo() { - if (this.currentIndex > this.length) - return; - if (this.currentIndex < 0) { - this.currentIndex++; - } - const commandObject = this.undoHistories[this.currentIndex]; - if (commandObject && commandObject.command) { - this.currentIndex++; - commandObject.command.redo(this.$editor, commandObject.data); - this.$editor.debug(commandObject); - this.$editor.nextTick(() => { - this.$context.commands.emit("refreshHistory", commandObject.command); - this.$editor.emit("refreshHistoryList"); - }); - } - } -} -class LockManager { - constructor(editor) { - this.editor = editor; - this.lockList = {}; - } - get(key) { - return this.lockList[key]; - } - set(key, value) { - this.lockList[key] = true; - } - toggle(key) { - if (this.lockList[key]) { - delete this.lockList[key]; - } else { - this.lockList[key] = true; - } - } -} -const identity$1 = () => true; -class ModelManager { - constructor(editor) { - this.editor = editor; - this.context = this.editor.context; - this.version = "0.0.0"; - this.name = ""; - this.description = ""; - this.items = /* @__PURE__ */ new Map(); - this.projects = []; - } - load(doc2 = void 0, context = { origin: "*" }) { - var _a; - const newDoc = doc2 || this.editor.loadItem("model"); - this.items.clear(); - this.version = newDoc == null ? void 0 : newDoc.version; - this.name = newDoc == null ? void 0 : newDoc.name; - this.description = newDoc == null ? void 0 : newDoc.description; - (_a = newDoc == null ? void 0 : newDoc.projects) == null ? void 0 : _a.forEach((project2) => { - this.createModel(project2); - }); - if (this.projects.length === 0) { - this.createProject(); - } - } - createProject() { - this.createModel({ - itemType: "project", - name: "New Project" - }); - } - getProjectByIndex(index2 = 0) { - return this.get(this.projects[index2]); - } - get(id) { - return this.items.get(id); - } - set(id, item) { - this.items.set(id, item); - this.setChanged("set", id, item); - } - remove(id) { - const obj2 = this.items.get(id); - const children2 = obj2.parent.children; - const index2 = children2.indexOf(id); - obj2.reset({ - removed: true, - removedIndex: index2, - removedLeftSibling: index2 > 0 ? children2[index2 - 1] : null, - removedRightSibling: index2 < children2.length - 1 ? children2[index2 + 1] : null - }); - this.setChanged("remove", id); - } - recover(id) { - const obj2 = this.items.get(id); - const parent = this.getParent(id); - if (!obj2.get("removedLeftSibling") && obj2.get("removedRightSibling")) { - parent.children.splice(parent.children.findIndex(() => obj2.get("removedRightSibling")) - 1, 0, id); - } else if (obj2.get("removedLeftSibling") && !obj2.get("removedRightSibling")) { - parent.children.splice(parent.children.findIndex(() => obj2.get("removedLeftSibling")) + 1, 0, id); - } else { - parent.children.splice(obj2.get("removedIndex"), 0, id); - } - obj2.removeField("removed"); - obj2.removeField("removedLeftSibling"); - obj2.removeField("removedRightSibling"); - obj2.removeField("removedIndex"); - this.setChanged("recover", id); - } - clear() { - this.items.clear(); - } - toJSON() { - return { - version: this.version, - name: this.name, - description: this.description, - projects: this.projects.map((id) => { - return this.get(id).toJSON(); - }) - }; - } - setChanged(type, id, obj2) { - this.editor.emit("changed", type, id, obj2); - } - removeChild(rootId, childId) { - const obj2 = this.get(rootId); - obj2.reset({ - children: obj2.children.filter((it) => it !== childId) - }); - this.setChanged("removeChild", rootId, { childId }); - } - get components() { - return this.context.components; - } - searchItem(id) { - return this.get(id); - } - searchLayers(rootId, childId) { - const obj2 = this.get(rootId); - return this.get(obj2.children.find((it) => it === childId)); - } - searchItemsById(ids) { - return ids.map((id) => this.get(id)); - } - findGroupItem(rootId) { - const obj2 = this.get(rootId); - if (obj2.hasChildren()) { - return obj2; - } - if (obj2.parent && (obj2.parent.is("project") || obj2.parent.is("artboard") || obj2.isBooleanItem)) { - return obj2; - } - return obj2.parent && this.findGroupItem(obj2.parentId); - } - convertGroupItems(items) { - const objectList = {}; - items.forEach((item) => { - if (item.parent && item.isNot("project") && item.parent.hasLayout()) { - const groupItem = item.parent; - objectList[groupItem.id] = groupItem; - } else { - const groupItem = this.findGroupItem(item.id) || item; - objectList[groupItem.id] = groupItem; - } - }); - return Object.values(objectList).filter((it) => it.isNot("project")); - } - searchLiveItemsById(ids) { - return ids.map((id) => this.get(id)).filter((it) => !it.removed); - } - markRemove(ids = []) { - ids.forEach((id) => { - this.remove(id); - }); - this.setChanged("markRemove", ids, { isLayer: true }); - } - markRemoveProject(id) { - const index2 = this.projects.findIndex((it) => it === id); - this.projects.splice(index2, 1); - this.get(id).removed = true; - this.setChanged("markRemoveProject", [id], { isProject: true }); - return index2; - } - unmarkRemove(ids = []) { - ids.forEach((id) => { - this.recover(id); - }); - this.setChanged("unmarkRemove", ids, { isLayer: true }); - } - unmarkRemoveProject(id, index2) { - this.projects.splice(index2, 0, id); - this.get(id).removed = false; - this.setChanged("unmarkRemoveProject", [id], { - removed: true, - isProject: true - }); - } - createModel(itemObject, isRegister = true, context = { origin: "*" }) { - const layers2 = itemObject.layers; - delete itemObject.layers; - let item; - if (this.get(itemObject.id)) { - item = this.get(itemObject.id); - item.reset(itemObject); - } else { - item = this.components.createComponent(itemObject.itemType, __spreadValues({}, itemObject)); - item.setModelManager(this); - } - if (isRegister) { - this.set(item.id, item); - if (item.is("project")) { - this.projects = [.../* @__PURE__ */ new Set([...this.projects, item.id])]; - } - } - const children2 = (layers2 || []).map((it) => { - return this.createModel(__spreadProps(__spreadValues({}, it), { parentId: item.id }), true, context); - }); - if (children2.length) { - item.reset({ - children: children2.map((it) => { - return it.id; - }) - }, context); - } - return item; - } - getAllLayers(rootId, filterCallback = identity$1) { - var results = []; - const obj2 = this.get(rootId); - let len2 = obj2.children.length; - for (let start2 = len2; start2--; ) { - let id = obj2.children[start2]; - results.push(...this.getAllLayers(id, filterCallback)); - } - if (isFunction(filterCallback) && filterCallback(obj2)) { - results.push(obj2); - } - return results; - } - getLayers(rootId) { - var _a; - const obj2 = this.get(rootId); - return ((_a = obj2 == null ? void 0 : obj2.children) == null ? void 0 : _a.map((childId) => this.get(childId))) || []; - } - eachLayers(rootId, callback) { - const obj2 = this.get(rootId); - let len2 = obj2.children.length; - for (let start2 = len2; start2--; ) { - let id = obj2.children[start2]; - callback(this.get(id)); - } - } - mapLayers(rootId, callback) { - const obj2 = this.get(rootId); - return obj2.children.map((childId) => { - return callback(this.get(childId)); - }); - } - getParent(rootId) { - var _a; - return this.get((_a = this.get(rootId)) == null ? void 0 : _a.parentId); - } - getDepth(rootId) { - const parent = this.getParent(rootId); - if (!parent) - return 1; - return this.getDepth(parent.id) + 1; - } - getPath(rootId, defaultRef = null) { - const obj2 = this.get(rootId) || defaultRef; - const parent = this.getParent(rootId); - if (!parent) - return [obj2]; - const list2 = this.getPath(parent.id); - list2.push(obj2); - return list2; - } - clone(rootId, isDeep = true) { - const obj2 = this.get(rootId); - const json = obj2.toCloneObject(isDeep); - const item = this.createModel(json); - item.setParentId(obj2.parentId); - return item; - } -} -var pathkit = { exports: {} }; -var __viteBrowserExternal = {}; -var __viteBrowserExternal$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": __viteBrowserExternal -}, Symbol.toStringTag, { value: "Module" })); -var require$$0 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1); -(function(module, exports) { - var PathKitInit2 = function() { - var _scriptDir = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : void 0; - if (typeof __filename !== "undefined") - _scriptDir = _scriptDir || __filename; - return function(PathKitInit3) { - PathKitInit3 = PathKitInit3 || {}; - var d; - d || (d = typeof PathKitInit3 !== "undefined" ? PathKitInit3 : {}); - var aa; - d.ready = new Promise(function(a) { - aa = a; +var pathkit = { exports: {} }; +var __viteBrowserExternal = {}; +var __viteBrowserExternal$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": __viteBrowserExternal +}, Symbol.toStringTag, { value: "Module" })); +var require$$0 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1); +(function(module, exports) { + var PathKitInit2 = function() { + var _scriptDir = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : void 0; + if (typeof __filename !== "undefined") + _scriptDir = _scriptDir || __filename; + return function(PathKitInit3) { + PathKitInit3 = PathKitInit3 || {}; + var d; + d || (d = typeof PathKitInit3 !== "undefined" ? PathKitInit3 : {}); + var aa; + d.ready = new Promise(function(a) { + aa = a; }); (function(a) { var b = {}; @@ -27797,36053 +26892,23851 @@ var require$$0 = /* @__PURE__ */ getAugmentedNamespace(__viteBrowserExternal$1); d.asm = f.exports; H--; d.monitorRunDependencies && d.monitorRunDependencies(H); - H == 0 && (La && (f = La, La = null, f())); - } - function b(f) { - a(f.instance); - } - function c2(f) { - return Qa().then(function(g) { - return WebAssembly.instantiate(g, e); - }).then(f, function(g) { - z("failed to asynchronously prepare wasm: " + g); - y(g); - }); - } - var e = { a: Zb }; - H++; - d.monitorRunDependencies && d.monitorRunDependencies(H); - if (d.instantiateWasm) - try { - return d.instantiateWasm(e, a); - } catch (f) { - return z("Module.instantiateWasm callback failed with error: " + f), false; - } - (function() { - if (ka || typeof WebAssembly.instantiateStreaming !== "function" || Na() || Ma("file://") || typeof fetch !== "function") - return c2(b); - fetch(I, { credentials: "same-origin" }).then(function(f) { - return WebAssembly.instantiateStreaming(f, e).then(b, function(g) { - z("wasm streaming compile failed: " + g); - z("falling back to ArrayBuffer instantiation"); - c2(b); - }); - }); - })(); - return {}; - }(); - d.asm = $b; - var Ra = d.___wasm_call_ctors = function() { - return (Ra = d.___wasm_call_ctors = d.asm.P).apply(null, arguments); - }; - d.__Z6ToCmdsRK6SkPath = function() { - return (d.__Z6ToCmdsRK6SkPath = d.asm.Q).apply(null, arguments); - }; - d.__Z8FromCmdsmi = function() { - return (d.__Z8FromCmdsmi = d.asm.R).apply(null, arguments); - }; - d.__Z7NewPathv = function() { - return (d.__Z7NewPathv = d.asm.S).apply(null, arguments); - }; - d.__Z8CopyPathRK6SkPath = function() { - return (d.__Z8CopyPathRK6SkPath = d.asm.T).apply(null, arguments); - }; - d.__Z6EqualsRK6SkPathS1_ = function() { - return (d.__Z6EqualsRK6SkPathS1_ = d.asm.U).apply(null, arguments); - }; - d.__Z11ToSVGStringRK6SkPath = function() { - return (d.__Z11ToSVGStringRK6SkPath = d.asm.V).apply(null, arguments); - }; - d.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE = function() { - return (d.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE = d.asm.W).apply(null, arguments); - }; - d.__Z13ApplySimplifyR6SkPath = function() { - return (d.__Z13ApplySimplifyR6SkPath = d.asm.X).apply(null, arguments); - }; - d.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp = function() { - return (d.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp = d.asm.Y).apply(null, arguments); - }; - d.__Z10MakeFromOpRK6SkPathS1_8SkPathOp = function() { - return (d.__Z10MakeFromOpRK6SkPathS1_8SkPathOp = d.asm.Z).apply(null, arguments); - }; - d.__Z14ResolveBuilderR11SkOpBuilder = function() { - return (d.__Z14ResolveBuilderR11SkOpBuilder = d.asm._).apply(null, arguments); - }; - d.__Z8ToCanvasRK6SkPathN10emscripten3valE = function() { - return (d.__Z8ToCanvasRK6SkPathN10emscripten3valE = d.asm.$).apply(null, arguments); - }; - d.__Z8ToPath2DRK6SkPath = function() { - return (d.__Z8ToPath2DRK6SkPath = d.asm.aa).apply(null, arguments); - }; - var Y = d._free = function() { - return (Y = d._free = d.asm.ba).apply(null, arguments); - }, Yb = d._malloc = function() { - return (Yb = d._malloc = d.asm.ca).apply(null, arguments); - }, Ab = d.___getTypeName = function() { - return (Ab = d.___getTypeName = d.asm.da).apply(null, arguments); - }; - d.___embind_register_native_and_builtin_types = function() { - return (d.___embind_register_native_and_builtin_types = d.asm.ea).apply(null, arguments); - }; - d.dynCall_vi = function() { - return (d.dynCall_vi = d.asm.fa).apply(null, arguments); - }; - d.dynCall_iiiii = function() { - return (d.dynCall_iiiii = d.asm.ga).apply(null, arguments); - }; - d.dynCall_ii = function() { - return (d.dynCall_ii = d.asm.ha).apply(null, arguments); - }; - d.dynCall_i = function() { - return (d.dynCall_i = d.asm.ia).apply(null, arguments); - }; - d.dynCall_viifffffffff = function() { - return (d.dynCall_viifffffffff = d.asm.ja).apply(null, arguments); - }; - d.dynCall_vifffffi = function() { - return (d.dynCall_vifffffi = d.asm.ka).apply(null, arguments); - }; - d.dynCall_vifffff = function() { - return (d.dynCall_vifffff = d.asm.la).apply(null, arguments); - }; - d.dynCall_viffffff = function() { - return (d.dynCall_viffffff = d.asm.ma).apply(null, arguments); - }; - d.dynCall_vifffffffi = function() { - return (d.dynCall_vifffffffi = d.asm.na).apply(null, arguments); - }; - d.dynCall_viff = function() { - return (d.dynCall_viff = d.asm.oa).apply(null, arguments); - }; - d.dynCall_viffff = function() { - return (d.dynCall_viffff = d.asm.pa).apply(null, arguments); - }; - d.dynCall_vii = function() { - return (d.dynCall_vii = d.asm.qa).apply(null, arguments); - }; - d.dynCall_iii = function() { - return (d.dynCall_iii = d.asm.ra).apply(null, arguments); - }; - d.dynCall_iifff = function() { - return (d.dynCall_iifff = d.asm.sa).apply(null, arguments); - }; - d.dynCall_iiffi = function() { - return (d.dynCall_iiffi = d.asm.ta).apply(null, arguments); - }; - d.dynCall_vifffffffff = function() { - return (d.dynCall_vifffffffff = d.asm.ua).apply(null, arguments); - }; - d.dynCall_iiii = function() { - return (d.dynCall_iiii = d.asm.va).apply(null, arguments); - }; - d.dynCall_viii = function() { - return (d.dynCall_viii = d.asm.wa).apply(null, arguments); - }; - d.dynCall_viiii = function() { - return (d.dynCall_viiii = d.asm.xa).apply(null, arguments); - }; - d.dynCall_fif = function() { - return (d.dynCall_fif = d.asm.ya).apply(null, arguments); - }; - d.dynCall_viif = function() { - return (d.dynCall_viif = d.asm.za).apply(null, arguments); - }; - d.dynCall_fi = function() { - return (d.dynCall_fi = d.asm.Aa).apply(null, arguments); - }; - d.dynCall_viiifffffffff = function() { - return (d.dynCall_viiifffffffff = d.asm.Ba).apply(null, arguments); - }; - d.dynCall_viifffffi = function() { - return (d.dynCall_viifffffi = d.asm.Ca).apply(null, arguments); - }; - d.dynCall_viifffff = function() { - return (d.dynCall_viifffff = d.asm.Da).apply(null, arguments); - }; - d.dynCall_viiffffff = function() { - return (d.dynCall_viiffffff = d.asm.Ea).apply(null, arguments); - }; - d.dynCall_viifffffffi = function() { - return (d.dynCall_viifffffffi = d.asm.Fa).apply(null, arguments); - }; - d.dynCall_viiff = function() { - return (d.dynCall_viiff = d.asm.Ga).apply(null, arguments); - }; - d.dynCall_viiffff = function() { - return (d.dynCall_viiffff = d.asm.Ha).apply(null, arguments); - }; - d.dynCall_iiifff = function() { - return (d.dynCall_iiifff = d.asm.Ia).apply(null, arguments); - }; - d.dynCall_iiiffi = function() { - return (d.dynCall_iiiffi = d.asm.Ja).apply(null, arguments); - }; - d.dynCall_fii = function() { - return (d.dynCall_fii = d.asm.Ka).apply(null, arguments); - }; - d.dynCall_iiffff = function() { - return (d.dynCall_iiffff = d.asm.La).apply(null, arguments); - }; - d.dynCall_fiif = function() { - return (d.dynCall_fiif = d.asm.Ma).apply(null, arguments); - }; - d.dynCall_iiif = function() { - return (d.dynCall_iiif = d.asm.Na).apply(null, arguments); - }; - d.dynCall_vifii = function() { - return (d.dynCall_vifii = d.asm.Oa).apply(null, arguments); - }; - d.dynCall_viifd = function() { - return (d.dynCall_viifd = d.asm.Pa).apply(null, arguments); - }; - d.dynCall_viid = function() { - return (d.dynCall_viid = d.asm.Qa).apply(null, arguments); - }; - d.dynCall_viddi = function() { - return (d.dynCall_viddi = d.asm.Ra).apply(null, arguments); - }; - d.dynCall_iidi = function() { - return (d.dynCall_iidi = d.asm.Sa).apply(null, arguments); - }; - d.dynCall_viffi = function() { - return (d.dynCall_viffi = d.asm.Ta).apply(null, arguments); - }; - d.dynCall_fffff = function() { - return (d.dynCall_fffff = d.asm.Ua).apply(null, arguments); - }; - d.dynCall_viiiii = function() { - return (d.dynCall_viiiii = d.asm.Va).apply(null, arguments); - }; - d.dynCall_viiiiiffii = function() { - return (d.dynCall_viiiiiffii = d.asm.Wa).apply(null, arguments); - }; - d.dynCall_iiiiii = function() { - return (d.dynCall_iiiiii = d.asm.Xa).apply(null, arguments); - }; - d.dynCall_iiiiiii = function() { - return (d.dynCall_iiiiiii = d.asm.Ya).apply(null, arguments); - }; - d.dynCall_iidiiii = function() { - return (d.dynCall_iidiiii = d.asm.Za).apply(null, arguments); - }; - d.dynCall_jiji = function() { - return (d.dynCall_jiji = d.asm._a).apply(null, arguments); - }; - d.asm = $b; - var ac; - La = function bc() { - ac || cc(); - ac || (La = bc); - }; - function cc() { - function a() { - if (!ac && (ac = true, d.calledRun = true, !na)) { - Ea(Ga); - Ea(Ha); - aa(d); - if (d.onRuntimeInitialized) - d.onRuntimeInitialized(); - if (d.postRun) - for (typeof d.postRun == "function" && (d.postRun = [d.postRun]); d.postRun.length; ) { - var b = d.postRun.shift(); - Ia.unshift(b); - } - Ea(Ia); - } - } - if (!(0 < H)) { - if (d.preRun) - for (typeof d.preRun == "function" && (d.preRun = [d.preRun]); d.preRun.length; ) - Ja(); - Ea(Fa); - 0 < H || (d.setStatus ? (d.setStatus("Running..."), setTimeout(function() { - setTimeout(function() { - d.setStatus(""); - }, 1); - a(); - }, 1)) : a()); - } - } - d.run = cc; - if (d.preInit) - for (typeof d.preInit == "function" && (d.preInit = [d.preInit]); 0 < d.preInit.length; ) - d.preInit.pop()(); - cc(); - return PathKitInit3.ready; - }; - }(); - module.exports = PathKitInit2; -})(pathkit); -var PathKitInit = pathkit.exports; -class PathKitManager { - constructor(editor) { - this.editor = editor; - this.pathkit = null; - } - async load() { - this.registerPathKit(await PathKitInit()); - } - registerPathKit(pathkit2) { - this.pathkit = pathkit2; - this.editor.emit("updatePathKit"); - } - has() { - return !!this.pathkit; - } - booleanOperation(first, second2, pathOp) { - const PathKit = this.pathkit; - return PathKit.MakeFromOp(PathKit.FromSVGString(first), PathKit.FromSVGString(second2), pathOp).toSVGString(); - } - intersection(first, second2) { - const PathKit = this.pathkit; - if (!PathKit) - return; - return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.INTERSECT)); - } - union(first, second2) { - const PathKit = this.pathkit; - if (!PathKit) - return; - return this.booleanOperation(first, second2, PathKit.PathOp.UNION); - } - difference(first, second2) { - const PathKit = this.pathkit; - if (!PathKit) - return; - return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.DIFFERENCE)); - } - reverseDifference(first, second2) { - const PathKit = this.pathkit; - if (!PathKit) - return; - return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.REVERSE_DIFFERENCE)); - } - xor(first, second2) { - const PathKit = this.pathkit; - if (!PathKit) - return; - return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.XOR)); - } - reversePathString(pathString2) { - return PathParser.fromSVGString(pathString2).reversePathStringByFunc((_, index2) => index2 % 2 === 0); - } - isValidPath(path) { - const PathKit = this.pathkit; - let pathKitPath = PathKit.FromSVGString(path); - return pathKitPath.isValid(); - } - simplify(path) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - return pathObject.simplify().toSVGString(); - } - convertLineJoin(lineJoin) { - const PathKit = this.pathkit; - switch (lineJoin) { - case "miter": - return PathKit.StrokeJoin.MITER; - case "round": - return PathKit.StrokeJoin.ROUND; - case "bevel": - return PathKit.StrokeJoin.BEVEL; - } - } - convertLineCap(lineCap) { - const PathKit = this.pathkit; - switch (lineCap) { - case "butt": - return PathKit.StrokeCap.BUTT; - case "round": - return PathKit.StrokeCap.ROUND; - case "square": - return PathKit.StrokeCap.SQUARE; - } - } - stroke(path, opt = { width: 1, miter_limit: 4 }) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - if (isArray(opt["stroke-dasharray"])) { - const arr = opt["stroke-dasharray"]; - if (arr.length >= 2) { - pathObject.dash(arr[0], arr[1], +(opt["stroke-dashoffset"] || 0)); - } - } - let newPathObject = pathObject.stroke({ - width: +opt["stroke-width"], - join: this.convertLineJoin(opt["stroke-linejoin"]), - cap: this.convertLineCap(opt["stroke-linecap"]) - }); - newPathObject.setFillType(PathKit.FillType.WINDING); - return newPathObject.simplify().toSVGString(); - } - round(path, opt = { width: 1, miter_limit: 4 }) { - return this.stroke(path, __spreadProps(__spreadValues({}, opt), { - "stroke-linejoin": "round" - })); - } - grow(path, opt = { width: 1, miter_limit: 4 }) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - return pathObject.copy().stroke(opt).op(pathObject, PathKit.PathOp.DIFFERENCE).toSVGString(); - } - shrink(path, opt = { width: 1, miter_limit: 4 }) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - const simplifyPath = pathObject.copy().simplify(); - return pathObject.copy().stroke(opt).op(simplifyPath, PathKit.PathOp.DIFFERENCE).toSVGString(); - } - dash(path, on, off, phase = 1) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - return pathObject.dash(on, off, phase).toSVGString(); - } - trim(path, startT, stopT, isComplement = false) { - const PathKit = this.pathkit; - const pathObject = PathKit.FromSVGString(path); - return pathObject.trim(startT, stopT, isComplement).toSVGString(); - } -} -class SegmentSelectionManager { - constructor(editor) { - this.$editor = editor; - this.selectedPointKeys = {}; - this.selectedPointList = []; - } - get length() { - return this.selectedPointList.length; - } - initialize() { - this.selectedPointKeys = {}; - this.selectedPointList = []; - } - makeSegmentKey(index2, key) { - return `${index2}_${key}`; - } - select(...list2) { - this.selectedPointKeys = {}; - this.selectedPointList = list2.map(({ key, index: index2 }) => ({ - key, - index: +index2 || 0 - })); - list2.forEach((it) => { - var key = this.makeSegmentKey(it.index, it.key); - this.selectedPointKeys[key] = it; - }); - } - toggleSegment(index2, key) { - if (!this.isSelectedSegment(key, index2)) { - this.select(...this.selectedPointList, { key, index: index2 }); - } else { - this.select(...this.selectedPointList.filter((it) => { - return it.key !== key || it.index !== index2; - })); - } - } - toggleSelect(...list2) { - list2 = list2.map((it) => { - return __spreadProps(__spreadValues({}, it), { included: this.isSelectedSegment(it.index, it.key) }); - }); - const includedList = list2.filter((it) => it.included); - const notIncludedList = list2.filter((it) => !it.included); - let uniqueList = [...this.selectedPointList]; - if (includedList.length) { - uniqueList = this.selectedPointList.filter((it) => { - const oldKey = this.makeSegmentKey(it); - return Boolean(includedList.find((includeNode) => { - return oldKey === this.makeSegmentKey(includeNode); - })) === false; - }); - } - this.select(...uniqueList, ...notIncludedList); - } - selectKeyIndex(index2, key) { - if (!this.isSelectedSegment(index2, key)) { - this.select({ key, index: index2 }); - } - } - isSelectedSegment(index2, key) { - var key = this.makeSegmentKey(index2, key); - return !!this.selectedPointKeys[key]; - } -} -class SelectionManager { - constructor(editor) { - this.$editor = editor; - this.$context = this.$editor.context; - this.project = null; - this.itemKeys = {}; - this.hoverId = ""; - this.hoverItems = []; - this.ids = []; - this.colorsteps = []; - this.ghosts = []; - this.cachedItemMatrices = []; - this.cachedArtBoardVerties = []; - this.cachedVerties = rectToVerties(0, 0, 0, 0, "50% 50% 0px"); - this.gridInformation = {}; - this.dragTargetItem = null; - this.$editor.on("config:bodyEvent", () => { - this.refreshMousePosition(); - }); - } - refreshMousePosition() { - const areaWidth = this.$context.config.get("area.width"); - const pos = this.$context.viewport.getWorldPosition(); - this.pos = pos; - const [row, column] = area$1(pos[0], pos[1], areaWidth); - this.row = row; - this.column = column; - } - get modelManager() { - return this.$context.modelManager; - } - get lockManager() { - return this.$context.lockManager; - } - get items() { - return this.modelManager.searchLiveItemsById(this.ids); - } - get current() { - return this.modelManager.searchItem(this.ids[0]); - } - get currentProject() { - if (!this.project) { - this.project = this.modelManager.getProjectByIndex(); - } - return this.project; - } - get isEmpty() { - return !this.length; - } - get isOne() { - if (this.length === 1 && this.current.is("artboard")) - return true; - return this.length === 1; - } - get isMany() { - return this.length > 1; - } - get length() { - return this.ids.length; - } - get isLayoutItem() { - var _a; - return (_a = this.current) == null ? void 0 : _a.isLayoutItem(); - } - get allLayers() { - return this.currentProject.allLayers || []; - } - get filteredLayers() { - var _a; - const areaWidth = this.$editor.context.config.get("area.width"); - return ((_a = this.currentProject) == null ? void 0 : _a.filteredAllLayers((item) => { - if (item.is("project")) - return false; - const areaPosition = item.getAreaPosition(areaWidth); - if (!areaPosition) { - return false; - } - const { column, row } = areaPosition; - return column[0] <= this.column && this.column <= column[1] && row[0] <= this.row && this.row <= row[1]; - }).filter((item) => { - return item.isPointInRect(this.pos[0], this.pos[1]); - })) || []; - } - get notSelectedLayers() { - return this.filteredLayers.filter((it) => this.check(it) === false); - } - get selectedArtboards() { - return [...new Set(this.items.map((it) => it.artboard))]; - } - hasChangedField(...args2) { - if (this.current) { - return this.current.hasChangedField(...args2); - } - return false; - } - getRootItem(current) { - var rootItem = current; - if (current && current.parentId) { - rootItem = current.parent; - } - return rootItem; - } - selectColorStep(...args2) { - this.colorsteps = args2; - } - isSelectedColorStep(id) { - return this.colorsteps.includes(id); - } - selectProject(project2) { - if (isString(project2)) { - project2 = this.modelManager.get(project2); - } - this.project = project2; - this.select(); - } - isSameIds(newIds) { - if (this.ids.length != newIds.length) { - return false; - } - if (this.ids.filter((id) => newIds.includes(id)).length === this.ids.length) { - return true; - } - return false; - } - filterIds(ids = []) { - return ids.map((it) => it.id || it).filter(Boolean); - } - selectByGroup(...ids) { - var list2 = this.modelManager.searchItemsById(this.filterIds(ids || [])).filter((it) => { - return !this.lockManager.get(it.id); - }); - const newSelectedItems = this.modelManager.convertGroupItems(list2); - return this.select(...newSelectedItems); - } - select(...ids) { - var list2 = this.modelManager.searchItemsById(this.filterIds(ids || [])).filter((it) => !it.lock && it.isAbsolute); - const newSelectedItems = list2.filter((it) => { - return it.path.filter((element) => list2.includes(element)).length < 2; - }); - const newSelectedIds = newSelectedItems.map((it) => it.id); - if (this.isSameIds(newSelectedIds)) { - return false; - } - this.itemKeys = {}; - newSelectedItems.forEach((item) => { - this.itemKeys[item.id] = item; - }); - this.ids = newSelectedIds; - this.setRectCache(); - this.$editor.emit(REFRESH_SELECTION); - return true; - } - reload() { - return this.select(...this.ids); - } - reselect() { - this.setRectCache(); - } - check(item) { - return !!this.itemKeys[item.id]; - } - hasPathOf(item) { - return item.hasPathOf(this.items.filter((it) => it.isNot("artboard"))); - } - hasParent(parentId) { - return this.items.some((it) => it.hasParent(parentId)); - } - get(id) { - return this.itemKeys[id]; - } - empty() { - this.select(); - } - itemsByIds(ids = null) { - let itemIdList = []; - if (Array.isArray(ids)) { - itemIdList = ids; - } else if (isString(ids) || isObject(ids)) { - itemIdList = [ids]; - } - return this.modelManager.searchItemsById(itemIdList); - } - selectById(id) { - this.select(id); - } - selectAfterCopy() { - this.select(...this.items.map((it) => it.copy())); - } - addById(id) { - if (this.itemKeys[id]) - return; - this.select(...this.ids, id); - } - removeById(id) { - let ids = id; - if (isString(id)) { - ids = [id]; - } - const filteredItems = this.ids.filter((id2) => ids.includes(id2) === false); - this.select(...filteredItems); - } - toggleById(id) { - if (this.itemKeys[id]) { - this.removeById(id); - } else { - this.addById(id); - } - } - getArtboardByPoint(vec) { - return this.currentProject.artboards.find((artboard2) => { - return polyPoint(artboard2.originVerties, ...vec); - }); - } - changeInLayoutArea() { - let checkedParentChange = false; - this.each((instance) => { - if (instance.is("artboard") === false) { - if (instance.artboard) { - const localArtboardVerties = instance.artboard.originVerties; - const isInArtboard = polyPoint(localArtboardVerties, this.pos[0], this.pos[1]); - if (isInArtboard) { - return false; - } - } - const selectedArtBoard = this.cachedArtBoardVerties.find((artboard2) => { - return polyPoint(artboard2.matrix.originVerties, this.pos[0], this.pos[1]); - }); - if (selectedArtBoard) { - if (selectedArtBoard.item !== instance.artboard && selectedArtBoard.item.hasLayout() === false) { - selectedArtBoard.item.appendChild(instance); - checkedParentChange = true; - } - } else { - if (instance.artboard) { - this.currentProject.appendChild(instance); - checkedParentChange = true; - } - } - } - }); - return checkedParentChange; - } - setRectCache() { - if (this.isEmpty) { - this.cachedVerties = []; - this.cachedRectVerties = []; - this.cachedItemMatrices = []; - this.ghosts = []; - this.cachedArtBoardVerties = this.currentProject.artboards.map((item) => { - return { item, matrix: item.matrix }; - }); - return; - } - this.cachedVerties = this.verties; - this.cachedRectVerties = toRectVerties(this.verties); - this.cachedItemMatrices = []; - this.cachedChildren = []; - this.ghosts = []; - this.items.forEach((it) => { - if (it.is("artboard")) { - this.cachedItemMatrices.push(it.matrix); - } else if (it.hasChildren()) { - const list2 = this.modelManager.getAllLayers(it.id).map((it2) => it2.matrix); - this.cachedChildren.push(...list2.map((it2) => it2.id)); - this.cachedItemMatrices.push(...list2); - } else { - this.cachedItemMatrices.push(it.matrix); - } - this.ghosts.push(it.absoluteMatrix); - }); - this.cachedArtBoardVerties = this.currentProject.artboards.map((item) => { - return { item, matrix: item.matrix }; - }); - } - startToCacheChildren() { - this.items.forEach((item) => { - item.startToCacheChildren(); - }); - } - recoverChildren() { - this.items.forEach((item) => { - item.recoverChildren(); - }); - } - get verties() { - if (this.isOne) { - return this.current.verties; - } else { - return this.rectVerties; - } - } - get targetVerties() { - if (this.isOne) { - return this.current.originVerties; - } else { - return targetItemsToRectVerties(this.items); - } - } - get originVerties() { - return this.rectVerties.filter((_, index2) => index2 < 4); - } - get rectVerties() { - if (this.isEmpty) { - return []; - } - return itemsToRectVerties(this.items); - } - get itemRect() { - const verties = this.verties; - return { - x: verties[0][0], - y: verties[0][1], - width: distance$1(verties[0], verties[1]), - height: distance$1(verties[0], verties[3]) - }; - } - toCloneObject() { - let data = {}; - this.each((item) => { - data[item.id] = item.toCloneObject(false); - }); - return data; - } - pack(...keys2) { - let data = {}; - this.each((item) => { - data[item.id] = {}; - keys2.forEach((key) => { - data[item.id][key] = item[key]; - }); - }); - return data; - } - packByIds(ids, ...keys2) { - let data = {}; - let localItems = []; - if (ids === null) { - localItems = this.items; - } else if (isString(ids) || Array.isArray(ids)) { - localItems = this.itemsByIds(ids); - } - const valueObject = {}; - keys2.forEach((it) => { - valueObject[it] = true; - }); - localItems.forEach((item) => { - data[item.id] = item.attrs(...keys2); - }); - return data; - } - packByValue(valueObject, ids = null) { - let data = {}; - let localItems = []; - if (ids === null) { - localItems = this.items; - } else if (isString(ids) || Array.isArray(ids)) { - localItems = this.itemsByIds(ids); - } - localItems.forEach((item) => { - data[item.id] = {}; - Object.keys(valueObject).forEach((key) => { - data[item.id][key] = isFunction(valueObject[key]) ? valueObject[key].call(valueObject, item) : valueObject[key]; - }); - }); - return data; - } - each(callback) { - if (isFunction(callback)) { - this.items.forEach((item) => { - callback(item); - }); - } - } - map(callback) { - if (isFunction(callback)) { - return this.items.map((item, index2) => { - return callback(item, index2); - }); - } - return this.items; - } - reset(obj2) { - Object.entries(obj2).forEach(([id, attrs]) => { - var _a; - (_a = this.get(id)) == null ? void 0 : _a.reset(attrs); - }); - } - resetCallback(callback) { - this.each((item) => item.reset(callback(item))); - } - resize() { - this.each((item) => item.resize()); - } - remove() { - this.each((item) => item.remove()); - this.empty(); - } - copy() { - console.warn("copy is deprecated"); - this.copyItems = this.items.map((item) => item); - } - paste() { - console.warn("paste is deprecated. use copy and paste"); - this.select(...this.copyItems.map((item) => item.copy(10))); - this.copy(); - } - hasPoint(point2) { - var _a; - if (this.isMany) { - return polyPoint(this.originVerties, point2[0], point2[1]); - } else { - return (_a = this.current) == null ? void 0 : _a.hasPoint(point2[0], point2[1]); - } - } - hasChildrenPoint(point2) { - return this.cachedChildren.some((it) => { - var _a; - return (_a = this.modelManager.get(it)) == null ? void 0 : _a.hasPoint(point2[0], point2[1]); - }); - } - checkChildren(childId) { - return this.cachedChildren.includes(childId); - } - checkHover(itemOrId) { - if (isString(itemOrId)) { - return this.hoverId === itemOrId; - } else { - return this.hoverItems.findIndex((it) => it.id === itemOrId.id) > -1; - } - } - hasHoverItem() { - return this.hoverId !== ""; - } - selectHoverItem() { - this.select(this.hoverId); - } - setHoverId(id) { - let isChanged = false; - if (!id || this.itemKeys[id]) { - if (this.hoverId != "") { - isChanged = true; - } - this.hoverId = ""; - this.hoverItems = []; - } else if (this.cachedArtBoardVerties.find((it) => it.item.id === id)) { - if (this.hoverId != "") { - isChanged = true; - } - this.hoverId = ""; - this.hoverItems = []; - } else { - if (this.hoverId != id) { - isChanged = true; - } - this.hoverId = id; - this.hoverItems = this.itemsByIds([id]).filter((it) => it.isNot("artboard")); - if (this.hoverItems.length === 0) { - this.hoverId = ""; - isChanged = true; - } - } - if (isChanged) { - this.$editor.emit("changeHoverItem"); - } - return isChanged; - } - is(...args2) { - var _a; - return args2.includes((_a = this.current) == null ? void 0 : _a.itemType); - } - isAll(...args2) { - return this.items.every((it) => args2.includes(it.itemType)); - } - updateGridInformation(obj2 = {}) { - this.gridInformation = obj2; - } - updateDragTargetItem(item) { - this.dragTargetItem = item; - } -} -const MAX_SNAP_DISTANCE = 3; -const DEFAULT_DIST_VECTOR = { dist: fromValues(0, 0, 0) }; -const AXIS_X = "x"; -const AXIS_Y = "y"; -function checkXAxis(sourceVertex, targetVertex, dist2 = 1) { - return Math.abs(sourceVertex[0] - targetVertex[0]) < dist2; -} -function checkYAxis(sourceVertex, targetVertex, dist2 = 1) { - return Math.abs(sourceVertex[1] - targetVertex[1]) < dist2; -} -class SnapManager { - constructor(editor, snapDistance = MAX_SNAP_DISTANCE) { - this.editor = editor; - this.context = this.editor.context; - this.map = /* @__PURE__ */ new Map(); - this.snapTargetLayers = []; - this.snapDistance = snapDistance; - } - get dist() { - return this.context.config.get("snap.distance") || this.snapDistance; - } - get gridSize() { - return this.context.config.get("snap.grid") || 50; - } - makeSnapTargetLayers() { - if (!this.context.selection.currentProject) - return []; - return this.context.selection.currentProject.allLayers.filter((item) => { - if (item.is("project")) - return false; - if (this.context.selection.check(item)) - return false; - const inViewport = this.context.viewport.checkInViewportArea(item.originVerties); - return inViewport; - }); - } - clear() { - this.snapTargetLayers = this.makeSnapTargetLayers(); - } - convertMatrix(item) { - const verties = this.convertGuideAndPathMatrix(item); - const xList = verties.map((it) => it[0]); - const yList = verties.map((it) => it[1]); - return { - id: item.id, - xList, - yList, - verties, - rectVerties: toRectVertiesWithoutTransformOrigin(item.originVerties) - }; - } - convertGuideAndPathMatrix(item) { - const guideVerties = item.guideVerties; - return [...guideVerties]; - } - get snapTargetLayersWithSelection() { - if (!this.context.selection.currentProject) - return []; - return this.context.selection.currentProject.allLayers.filter((item) => { - if (item.is("project")) - return false; - const inViewport = item.verties.some((v) => { - return this.context.viewport.checkInViewport(v); - }); - return inViewport; - }); - } - getSnapPoints() { - const points = []; - this.snapTargetLayersWithSelection.forEach((it) => { - points.push.apply(points, this.convertGuideAndPathMatrix(it)); - }); - return points; - } - checkX(targetXList, sourceXList, dist2 = 0) { - const checkXList = []; - targetXList.forEach((targetX, targetIndex) => { - sourceXList.forEach((sourceX, sourceIndex) => { - if (Math.abs(targetX - sourceX) <= dist2) { - checkXList.push({ - targetX, - sourceX, - sourceIndex, - targetIndex, - dx: targetX - sourceX - }); - } - }); - }); - return checkXList; - } - checkY(targetYList, sourceYList, dist2 = 0) { - const checkYList = []; - targetYList.forEach((targetY, targetIndex) => { - sourceYList.forEach((sourceY, sourceIndex) => { - const localDistY = targetY - sourceY; - if (Math.abs(localDistY) <= dist2) { - checkYList.push({ - targetY, - sourceY, - sourceIndex, - targetIndex, - dy: localDistY - }); - } - }); - }); - return checkYList; - } - check(sourceVerties, dist2 = 0) { - const snaps = []; - const sourceXList = sourceVerties.map((it) => it[0]); - const sourceYList = sourceVerties.map((it) => it[1]); - const guideXList = this.context.config.get("horizontal.line"); - const guideYList = this.context.config.get("vertical.line"); - if (guideXList && guideYList) { - const x = this.checkX(guideXList, sourceXList, dist2)[0]; - const y = this.checkY(guideYList, sourceYList, dist2)[0]; - const distVector = fromValues(x ? x.dx : 0, y ? y.dy : 0, 0); - if (isNotZero(distVector[0]) || isNotZero(distVector[1])) { - snaps.push({ target: null, dist: distVector }); - } - } - this.snapTargetLayers.forEach((target) => { - const x = this.checkX(target.xList, sourceXList, dist2)[0]; - const y = this.checkY(target.yList, sourceYList, dist2)[0]; - const distVector = fromValues(x ? x.dx : 0, y ? y.dy : 0, 0); - if (isNotZero(distVector[0]) || isNotZero(distVector[1])) { - snaps.push({ target, dist: distVector }); - } - }); - return snaps.find((it) => isNotZero(it[0]) || isNotZero(it[1])) || DEFAULT_DIST_VECTOR; - } - checkPoint(sourceVertex) { - const snap = this.check([sourceVertex]); - return add$1([], sourceVertex, snap.dist); - } - getGuidesByPointPoint(sourceVerties, targetVerties, dist$1 = 0) { - const points = []; - const groupPoints = {}; - let sourceVertex, targetVertex; - for (let sourceIndex = 0, sourceLength = sourceVerties.length; sourceIndex < sourceLength; sourceIndex++) { - sourceVertex = sourceVerties[sourceIndex]; - const keyX = `${sourceVertex[0]}_x`; - const keyY = `${sourceVertex[1]}_y`; - if (!groupPoints[keyX]) { - groupPoints[keyX] = []; - } - if (!groupPoints[keyY]) { - groupPoints[keyY] = []; - } - for (let targetIndex = 0, targetLength = targetVerties.length; targetIndex < targetLength; targetIndex++) { - targetVertex = targetVerties[targetIndex]; - if (checkXAxis(sourceVertex, targetVertex, dist$1)) { - groupPoints[keyX].push([ - sourceVertex, - targetVertex, - AXIS_X, - dist(sourceVertex, targetVertex) - ]); - } - if (checkYAxis(sourceVertex, targetVertex, dist$1)) { - groupPoints[keyY].push([ - sourceVertex, - targetVertex, - AXIS_Y, - dist(sourceVertex, targetVertex) - ]); - } - } - } - Object.keys(groupPoints).forEach((key) => { - if (groupPoints[key] && groupPoints[key].length) { - const sorted = groupPoints[key].sort((a, b) => a[3] - b[3]); - points.push(...sorted); - } - }); - return points; - } - findGuide(sourceVerties, dist2 = 0) { - const guides = []; - this.snapTargetLayers.forEach((target) => { - const points = this.getGuidesByPointPoint(sourceVerties, target.guideVerties, dist2); - guides.push.apply(guides, points); - }); - guides.sort((a, b) => { - return a[3] - b[3]; - }); - return guides.filter((_, index2) => index2 < 10); - } - findGuideOne(sourceVerties) { - return [this.findGuide(sourceVerties)[0]]; - } - getWorldPosition() { - const pos = round$2([], this.context.viewport.getWorldPosition()); - const snap = this.check([pos], 3 / this.context.viewport.scale); - const newPos = add$1([], snap.dist, pos); - return newPos; - } - getSnapTarget() { - const pos = round$2([], this.context.viewport.getWorldPosition()); - const snap = this.check([pos], 3 / this.context.viewport.scale); - const newPos = add$1([], snap.dist, pos); - return { - vertex: newPos, - snap - }; - } -} -class TimelineSelectionManager { - constructor(editor) { - this.$editor = editor; - this.items = []; - this.itemKeys = {}; - } - initialize() { - this.items = []; - this.itemKeys = {}; - } - currentProject(callback) { - var project2 = this.$editor.context.selection.currentProject; - if (project2) { - callback && callback(project2); - } - } - empty() { - this.select(); - } - each(callback) { - this.items.forEach((item, index2) => { - callback && callback(item, index2); - }); - } - refreshCache(list2) { - this.items = list2; - this.itemKeys = {}; - this.items.forEach((it) => { - this.itemKeys[it.id] = it; - }); - } - cachedList() { - return this.items.map((it) => { - return __spreadValues({}, it); - }); - } - checked(id) { - return !!this.itemKeys[id]; - } - selectLayer(layerId) { - this.currentProject((project2) => { - var list2 = project2.getKeyframeListReturnArray().filter((it) => { - return it.layerId === layerId; - }); - this.refreshCache(list2); - }); - } - toggleLayerContainer(animationId) { - this.currentProject((project2) => { - project2.getSelectedTimeline().animations.filter((it) => { - return it.id === animationId; - }).forEach((it) => { - it.collapsed = !it.collapsed; - }); - }); - } - selectProperty(layerId, property) { - this.currentProject((project2) => { - var list2 = project2.getKeyframeListReturnArray().filter((it) => { - return it.layerId === layerId && it.property === property; - }); - this.refreshCache(list2); - }); - } - select(...args2) { - this.refreshCache(args2); - } - selectBySearch(list2, startTime, endTime) { - this.currentProject((project2) => { - var totalList = []; - list2.forEach((it) => { - var results = []; - if (it.property) { - var p = project2.getTimelineProperty(it.layerId, it.property); - results = p.keyframes.filter((keyframe2) => { - return startTime <= keyframe2.time && keyframe2.time <= endTime; - }); - } else { - var p = project2.getTimelineObject(it.layerId); - p.properties.filter((property) => { - return property.property === it.property; - }).forEach((property) => { - results.push.apply(results, property.keyframes.filter((keyframe2) => { - return startTime <= keyframe2.time && keyframe2.time <= endTime; - })); - }); - } - totalList.push.apply(totalList, results); - }); - var uniqueOffset = {}; - totalList.forEach((it) => { - uniqueOffset[it.id] = it; - }); - this.select(...Object.values(uniqueOffset)); - }); - } - checkLayer(layerId) { - return Object.keys(this.itemKeys).some((key) => { - return this.itemKeys[key].layerId === layerId; - }); - } - checkProperty(layerId, property) { - return Object.keys(this.itemKeys).some((key) => { - return this.itemKeys[key].layerId === layerId && this.itemKeys[key].property === property; - }); - } -} -class VisibleManager { - constructor(editor) { - this.editor = editor; - this.hiddenList = {}; - } - get list() { - return Object.keys(this.hiddenList); - } - get(key) { - return !this.hiddenList[key]; - } - set(key, value) { - if (value) { - delete this.hiddenList[key]; - } else { - this.hiddenList[key] = true; - } - } - toggle(key) { - if (this.get(key)) { - this.set(key, false); - } else { - this.set(key, true); - } - } -} -var ContextMenuRenderer$1 = ""; -class ContextDropdownMenu extends DropdownMenuList { - template() { - return ` -
-
    - ${this.props.items.map((child, index2) => makeMenuItem(child, `${this.groupId}-${index2}`)).join("")} -
-
- `; - } -} -class ContextMenuRenderer extends EditorElement { - checkProps(props = {}) { - return props; - } - components() { - return { - ContextDropdownMenu, - ToolbarButtonMenuItem - }; - } - template() { - return `
`; - } - [LOAD("$el")]() { - var _a; - return (_a = this.props.items) == null ? void 0 : _a.map((item, index2) => { - return this.renderMenuItem(item, index2); - }); - } - renderMenuItem(item, index2) { - switch (item.type) { - case MenuItemType.LINK: - return this.renderLink(item, index2); - case MenuItemType.SUBMENU: - return this.renderMenu(item, index2); - case MenuItemType.BUTTON: - return this.renderButton(item, index2); - case MenuItemType.DROPDOWN: - return this.renderDropdown(item, index2); - default: - return this.renderButton(item, index2); - } - } - renderButton(item, index2) { - return createComponent("ToolbarButtonMenuItem", { - ref: "$button-" + index2, - title: item.title, - icon: item.icon, - command: item.command, - shortcut: item.shortcut, - args: item.args, - nextTick: item.nextTick, - disabled: item.disabled, - selected: item.selected, - selectedKey: item.selectedKey, - checked: item.checked, - action: item.action, - events: item.events, - style: item.style - }); - } - renderDropdown(item, index2) { - return createComponent("ContextDropdownMenu", __spreadProps(__spreadValues({ - ref: "$dropdown-" + index2 - }, item), { - items: item.items, - icon: item.icon, - title: item.title, - events: item.events || [] - })); - } -} -var ContextMenuView$1 = ""; -class ContextMenuView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--context-menu-view" - }); - } - [BIND("$el")]() { - const contextMenuOpenInfo = this.$context.config.get("context.menu.open"); - if (!contextMenuOpenInfo) { - return; - } - return { - style: { - left: Length.px(contextMenuOpenInfo.x), - top: Length.px(contextMenuOpenInfo.y + 10) - } - }; - } - [LOAD("$el")]() { - const info = this.$context.config.get("context.menu.open"); - if (!info) - return; - const items = this.$menu.getTargetMenu(info.target) || []; - return /* @__PURE__ */ createElementJsx(ContextMenuRenderer, { - items: [{ type: "dropdown", items: [...items, ...info.items || []] }] - }); - } - [CONFIG("context.menu.open")]() { - this.refresh(); - if (this.$context.config.get("context.menu.open")) { - this.$el.show(); - } else { - this.$el.hide(); - } - } - close() { - this.$el.hide(); - this.$context.config.set("context.menu.open", null); - } - [POINTERSTART("document")](e) { - const $target = Dom.create(e.target); - const $dropdown = $target.closest("elf--context-menu-view"); - if (!$dropdown) { - this.close(); - } else if ($dropdown.el !== this.$el.el) { - this.close(); - } - } -} -var AlignmentProperty$1 = ""; -class BottomAlign extends MenuItem { - getIconString() { - return "align_vertical_bottom"; - } - getTitle() { - return "Bottom"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.bottom"); - } -} -class CenterAlign extends MenuItem { - getIconString() { - return "align_horizontal_center"; - } - getTitle() { - return "Center"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.center"); - } -} -class LeftAlign extends MenuItem { - getIconString() { - return "align_horizontal_left"; - } - getTitle() { - return "Left"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.left"); - } -} -class MiddleAlign extends MenuItem { - getIconString() { - return "align_vertical_center"; - } - getTitle() { - return "middle"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.middle"); - } -} -class RightAlign extends MenuItem { - getIconString() { - return "align_horizontal_right"; - } - getTitle() { - return "Right"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.right"); - } -} -class SameHeight extends MenuItem { - getIconString() { - return "vertical_distribute"; - } - getTitle() { - return "height"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("same.height"); - } -} -class SameWidth extends MenuItem { - getIconString() { - return "horizontal_distribute"; - } - getTitle() { - return "width"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("same.width"); - } -} -class TopAlign extends MenuItem { - getIconString() { - return "align_vertical_top"; - } - getTitle() { - return "Top"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("sort.top"); - } -} -var BaseProperty$1 = ""; -class BaseProperty extends EditorElement { - onToggleShow() { - } - template() { - return ` -
- ${this.isHideHeader() ? "" : ` -
- - ${this.getTools()} -
`} -
${this.getBody()}
- ${this.getFooter() ? `
${this.getFooter()}
` : ""} -
- `; - } - [BIND("$el")]() { - return { - style: { - "--property-order": this.order - } - }; - } - setTitle(title2) { - this.refs.$propertyTitle.html(title2); - } - hasKeyframe() { - return false; - } - isHideHeader() { - return false; - } - isFirstShow() { - return true; - } - getClassName() { - return ""; - } - getTitleClassName() { - return ""; - } - getBodyClassName() { - return ""; - } - getKeyframeProperty() { - return ""; - } - getTitle() { - return ""; - } - getTools() { - return ""; - } - getBody() { - return ""; - } - getFooter() { - return ""; - } - isPropertyShow() { - return this.$el.hasClass("show"); - } - toggle(isShow) { - this.$el.toggle(isShow); - } - hide() { - this.$el.hide(); - } - show() { - this.$el.show(); - } - onShowTitle() { - } - refreshShowIsNot(type = "", isRefresh = true) { - var current = this.$context.selection.current; - if (current) { - if (type.includes(current.itemType)) { - this.hide(); - } else { - this.show(); - if (isRefresh) - this.refresh(); - } - } - } - refreshShow(type, isRefresh = true) { - var current = this.$context.selection.current; - if (current) { - if (isFunction(type) && type()) { - this.show(); - if (isRefresh) - this.refresh(); - } else { - if (!isFunction(type) && type.includes(current.itemType)) { - this.show(); - if (isRefresh) - this.refresh(); - } else { - this.hide(); - } - } - } else { - this.hide(); - } - } - startInputEditing(input2) { - if (!input2) - return; - input2.attr("contenteditable", true); - input2.css({ - "background-color": "white", - outline: "1px auto black", - color: "black" - }); - input2.focus(); - } - endInputEditing(input2, callback) { - if (!input2) - return; - input2.attr("contenteditable", false); - input2.css({ - "background-color": null, - outline: null, - color: null - }); - var index2 = input2.attr("data-index"); - callback && callback(index2, input2.text().trim()); - input2.blur(); - } - get editableProperty() { - return ""; - } - get order() { - return 1e3; - } - checkShow() { - if (!this.$context.selection.current) { - this.hide(); - return false; - } - if (this.$context.selection.current.editable(this.editableProperty)) { - this.show(); - return true; - } else { - this.hide(); - return false; - } - } -} -class AlignmentProperty extends BaseProperty { - components() { - return { - LeftAlign, - CenterAlign, - RightAlign, - TopAlign, - MiddleAlign, - BottomAlign, - SameWidth, - SameHeight - }; - } - getTitle() { - return this.$i18n("alignment.property.title"); - } - isHideHeader() { - return true; - } - getBody() { - return ` -
- ${createComponentList("LeftAlign", "CenterAlign", "RightAlign", "TopAlign", "MiddleAlign", "BottomAlign", ["SameWidth", { direction: "bottom" }], "SameHeight")} -
- `; - } -} -function alignment(editor) { - editor.registerUI("inspector.tab.style", { - AlignmentProperty - }); -} -var AnimationProperty$1 = ""; -function getCustomParseIndexString(it, prefix = "@") { - return `${prefix}${it.startIndex}`.padEnd(10, "0"); -} -function customParseMatches(str, regexp) { - const matches2 = str.match(regexp); - let result = []; - if (!matches2) { - return result; - } - for (var i = 0, len2 = matches2.length; i < len2; i++) { - result.push({ parsedString: matches2[i] }); - } - var pos = { next: 0 }; - result.forEach((item) => { - const startIndex = str.indexOf(item.parsedString, pos.next); - item.startIndex = startIndex; - item.endIndex = startIndex + item.parsedString.length; - pos.next = item.endIndex; - }); - return result; -} -function customParseConvertMatches(str, regexp) { - const m = customParseMatches(str, regexp); - m.forEach((it) => { - str = str.replace(it.parsedString, getCustomParseIndexString(it)); - }); - return { str, matches: m }; -} -function customParseReverseMatches(str, matches2) { - matches2.forEach((it) => { - str = str.replace(getCustomParseIndexString(it), it.parsedString); - }); - return str; -} -const ANIMATION_TIMING_REG = /((cubic-bezier|steps)\(([^)]*)\))/gi; -class Animation extends PropertyItem { - static parse(obj2) { - return new Animation(obj2); - } - getDefaultObject() { - return { - itemType: "animation", - checked: true, - name: "none", - direction: "normal", - duration: Length.second(0), - timingFunction: "linear", - delay: Length.second(0), - iterationCount: Length.string("infinite"), - playState: "running", - fillMode: "none" - }; - } - convert(json) { - json = super.convert(json); - json.duration = Length.parse(json.duration); - json.iterationCount = Length.parse(json.iterationCount); - return json; - } - toCloneObject() { - return __spreadValues({}, this.attrs("name", "direction", "duration", "timingFunction", "delay", "iterationCount", "playState", "fillMode")); - } - togglePlayState(forcedValue) { - if (forcedValue) { - this.reset({ - playState: forcedValue === "running" ? "running" : "paused" - }); - } else { - if (this.json.playState === "paused") { - this.reset({ playState: "running" }); - } else { - this.reset({ playState: "paused" }); - } - } - } - toCSS() { - if (!this.json.name) - return {}; - return { - animation: this.toString() - }; - } - toString() { - var json = this.json; - return [ - json.duration, - json.timingFunction, - json.delay, - json.iterationCount, - json.direction, - json.fillMode, - json.playState, - json.name - ].join(" "); - } - static join(list2) { - return list2.map((it) => new Animation(it).toString()).join(","); - } - static add(animation2, item = {}) { - const list2 = Animation.parseStyle(animation2); - list2.push(Animation.parse(item)); - return Animation.join(list2); - } - static remove(animation2, removeIndex) { - return Animation.filter(animation2, (it, index2) => { - return removeIndex != index2; - }); - } - static filter(animation2, filterFunction) { - return Animation.join(Animation.parseStyle(animation2).filter((it) => filterFunction(it))); - } - static replace(animation2, replaceIndex, valueObject) { - var list2 = Animation.parseStyle(animation2); - if (list2[replaceIndex]) { - list2[replaceIndex] = valueObject; - } else { - list2.push(valueObject); - } - return Animation.join(list2); - } - static get(animation2, index2) { - var arr = Animation.parseStyle(animation2); - return arr[index2]; - } - static parseStyle(animation2) { - var list2 = []; - if (!animation2) - return list2; - const result = customParseConvertMatches(animation2, ANIMATION_TIMING_REG); - list2 = result.str.split(",").map((it) => { - const fields2 = it.split(" ").filter(Boolean); - if (fields2.length >= 7) { - return { - duration: Length.parse(fields2[0]), - timingFunction: customParseReverseMatches(fields2[1], result.matches), - delay: Length.parse(fields2[2]), - iterationCount: fields2[3] === "infinite" ? Length.string("infinite") : Length.parse(fields2[3]), - direction: fields2[4], - fillMode: fields2[5], - playState: fields2[6], - name: fields2[7] - }; - } else if (fields2.length >= 3) { - return { - duration: Length.parse(fields2[0]), - timingFunction: customParseReverseMatches(fields2[1], result.matches), - delay: Length.parse(fields2[2]), - name: fields2[3] - }; - } else if (fields2.length >= 1) { - return { - duration: Length.parse(fields2[0]), - name: fields2[1] - }; - } else { - return {}; - } - }); - return list2.map((it) => Animation.parse(it)); - } -} -class AnimationProperty extends BaseProperty { - getTitle() { - return this.$i18n("animation.property.title"); - } - getBody() { - return `
`; - } - getTools() { - return ` - - `; - } - isFirstShow() { - return true; - } - [LOAD("$animationList") + DOMDIFF]() { - var current = this.$context.selection.current; - if (!current) - return ""; - return Animation.parseStyle(current.animation).map((it, index2) => { - const selectedClass = this.state.selectedIndex === index2 ? "selected" : ""; - const path = curveToPath(it.timingFunction, 30, 30); - return ` -
-
-
- - - -
-
-
- ${it.name ? it.name : `< ${this.$i18n("animation.property.select a keyframe")} >`} -
-
- - - - - - -
-
-
- -
-
-
- `; - }); - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - const current = this.$context.selection.current; - if (current && current.hasChangedField("animation")) { - this.refresh(); - } - this.emit("hideAnimationPropertyPopup"); - } - [CLICK("$add")]() { - var current = this.$context.selection.current; - if (current) { - this.$commands.executeCommand("setAttribute", "add animation property", this.$context.selection.packByValue({ - animation: (item) => Animation.add(item.animation, { name: null }) - })); - this.nextTick(() => { - window.setTimeout(() => { - this.refresh(); - }, 100); - }); - } else { - window.alert("Select a layer"); - } - } - [CLICK("$animationList .tools .del")](e) { - var removeIndex = e.$dt.attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - current.reset({ - animation: Animation.remove(current.animation, removeIndex) - }); - this.$commands.emit("setAttribute", this.$context.selection.packByValue({ - animation: Animation.remove(current.animation, removeIndex) - })); - this.refresh(); - } - [CLICK("$animationList .play-state")](e) { - var index2 = +e.$dt.attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - const list2 = Animation.parseStyle(current.animation); - var animation2 = list2[index2]; - if (animation2) { - animation2.togglePlayState(); - e.$dt.attr("data-play-state-selected-value", animation2.playState); - this.$commands.emit("setAttribute", this.$context.selection.packByValue({ - animation: Animation.join(list2) - })); - } - } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.refs[`animationIndex${selectedIndex}`].addClass("selected"); - } else { - this.refs[`animationIndex${selectedIndex}`].removeClass("selected"); - } - } - viewAnimationPicker($preview) { - if (typeof this.selectedIndex === "number") { - this.selectItem(this.selectedIndex, false); - } - this.selectedIndex = +$preview.attr("data-index"); - this.current = this.$context.selection.current; - if (!this.current) - return; - this.currentAnimation = Animation.get(this.current.animation, this.selectedIndex); - this.viewAnimationPropertyPopup(); - } - viewAnimationPropertyPopup() { - if (!this.currentAnimation) - return; - const animation2 = this.currentAnimation; - this.emit("showAnimationPropertyPopup", { - changeEvent: "changeAnimationPropertyPopup", - data: animation2.toCloneObject(), - instance: this - }); - } - [CLICK("$animationList .preview")](e) { - this.viewAnimationPicker(e.$dt); - } - getRef(...args2) { - return this.refs[args2.join("")]; - } - [SUBSCRIBE("changeAnimationPropertyPopup")](data) { - if (this.currentAnimation) { - this.currentAnimation.reset(__spreadValues({}, data)); - if (this.current) { - this.$commands.executeCommand("setAttribute", "change animation property", this.$context.selection.packByValue({ - animation: (item) => Animation.replace(item.animation, this.selectedIndex, this.currentAnimation) - })); - this.refresh(); - } - } - } -} -var AnimationPropertyPopup$1 = ""; -class AnimationPropertyPopup extends BasePopup { - getTitle() { - return this.$i18n("animation.property.popup.title"); - } - initState() { - return { - changeEvent: "", - instance: {}, - data: {} - }; - } - updateData(opt) { - this.state.data = __spreadValues(__spreadValues({}, this.state.data), opt); - if (this.state.instance) { - this.state.instance.trigger(this.state.changeEvent, this.state.data); - } - } - getBody() { - return `
`; - } - [LOAD("$popup")]() { - return ` -
- ${this.templateForKeyframe()} - ${this.templateForTimingFunction()} - ${this.templateForIterationCount()} - ${this.templateForDelay()} - ${this.templateForDuration()} - ${this.templateForDirection()} - ${this.templateForFillMode()} - ${this.templateForPlayState()} -
- `; - } - templateForTimingFunction() { - return ` -
- - ${createComponent("CubicBezierEditor", { - ref: "$cubicBezierEditor", - key: "timingFunction", - value: this.state.data.timingFunction || "linear", - onChange: "changeCubicBezier" - })} -
- `; - } - templateForKeyframe() { - return ` -
- -
- -
-
- `; - } - [LOAD("$name")]() { - var current = this.$context.selection.currentProject; - var names2 = []; - if (current && current.keyframes) { - names2 = current.keyframes.map((it) => { - return { key: it.name, value: it.name }; - }); - } - names2.unshift({ key: "Select a keyframe", value: "" }); - return names2.map((it) => { - var selected = it.value === this.name ? "selected" : ""; - var label = this.$i18n(it.key); - return ``; - }); - } - [CHANGE("$name")]() { - this.updateData({ name: this.refs.$name.value }); - } - templateForDirection() { - var options2 = "normal,reverse,alternate,alternate-reverse".split(",").map((it) => { - return `${it}:${this.$i18n(it)}`; - }).join(","); - return ` -
- ${createComponent("SelectEditor", { - label: this.$i18n("animation.property.popup.direction"), - ref: "$direction", - key: "direction", - value: this.state.data.direction, - options: options2, - onChange: "changeSelect" - })} -
- `; - } - [SUBSCRIBE_SELF("changeSelect")](key, value) { - this.updateData({ [key]: value }); - } - templateForPlayState() { - return ` -
- ${createComponent("SelectEditor", { - label: this.$i18n("animation.property.popup.play.state"), - ref: "$playState", - key: "playState", - value: this.state.data.playState, - options: ["paused", "running"], - onChange: "changeSelect" - })} -
- `; - } - templateForFillMode() { - var options2 = "none,forwards,backwards,both".split(",").map((it) => { - return `${it}:${this.$i18n(it)}`; - }).join(","); - return ` -
- ${createComponent("SelectEditor", { - label: this.$i18n("animation.property.popup.fill.mode"), - ref: "$fillMode", - key: "fillMode", - value: this.state.data.fillMode, - options: options2, - onChange: "changeSelect" - })} -
- `; - } - templateForDelay() { - return ` -
- ${createComponent("RangeEditor", { - ref: "$delay", - label: this.$i18n("animation.property.popup.delay"), - key: "delay", - value: this.state.data.delay, - units: ["s", "ms"], - onChange: "changeRangeEditor" - })} -
- `; - } - templateForDuration() { - return ` -
- ${createComponent("RangeEditor", { - ref: "$duration", - label: this.$i18n("animation.property.popup.duration"), - key: "duration", - value: this.state.data.duration, - units: ["s", "ms"], - onChange: "changeRangeEditor" - })} -
- `; - } - templateForIterationCount() { - return ` -
- ${createComponent("IterationCountEditor", { - ref: "$iterationCount", - label: this.$i18n("animation.property.popup.iteration"), - key: "iterationCount", - value: this.state.iterationCount || 0, - units: ["normal", "infinite"], - onChange: "changeRangeEditor" - })} -
- `; - } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { - if (key === "iterationCount") { - if (value.unit === "normal") { - value = Length.number(value.value); - } else { - value = Length.string(value.unit); - } - } - this.updateData({ [key]: value }); - } - [SUBSCRIBE_SELF("changeCubicBezier")](key, value) { - this.updateData({ [key]: value }); - } - [SUBSCRIBE("showAnimationPropertyPopup")](data) { - this.setState(data); - this.show(250); - this.children.$cubicBezierEditor.trigger("showCubicBezierEditor", data.data.timingFunction); - } - [SUBSCRIBE("hideAnimationPropertyPopup")]() { - this.$el.hide(); - } -} -function animation(editor) { - editor.registerUI("inspector.tab.transition", { - AnimationProperty - }); - editor.registerUI("popup", { - AnimationPropertyPopup - }); -} -class ObjectProperty { - static create(json) { - return class extends BaseProperty { - getTitle() { - return json.title; - } - getClassName() { - return json.className || "item"; - } - get editableProperty() { - return json.editableProperty; - } - get order() { - return isUndefined(json.order) ? 1e3 : json.order; - } - afterComponentRendering($dom, refName, instance) { - var _a; - if (refName == "$comp") { - const current = ((_a = this.$context.selection) == null ? void 0 : _a.current) || {}; - const inspector = isFunction(json.inspector) ? json.inspector(current) : this.$context.components.createInspector(current, json.editableProperty); - instance.setInspector(inspector); - } - } - refresh() { - const current = this.$context.selection.current || {}; - if (current || json.visible) { - this.setTitle(json.title || current.getDefaultTitle() || current.itemType || current.name); - this.load(); - } - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { - if (json.preventUpdate) { - if (this.$stateManager.isPointerUp) { - this.refresh(); - } - } else { - this.refresh(); - } - } - [LOAD("$body")]() { - var _a; - var current = (_a = this.$context.selection) == null ? void 0 : _a.current; - if (!current && !json.visible) - return ""; - const inspector = isFunction(json.inspector) ? json.inspector(current || {}) : this.$context.components.createInspector(current || {}, json.editableProperty); - return createComponent("ComponentEditor", { - ref: "$comp", - inspector, - onchange: "changeComponentProperty" - }); - } - getBody() { - return `
`; - } - [SUBSCRIBE_SELF("changeComponentProperty")](key, value) { - if (json.action) { - this.$commands.executeCommand(json.action, `change attribute : ${key}`, key, value); - } else { - this.$commands.executeCommand("setAttribute", `change attribute : ${key}`, this.$context.selection.packByValue({ - [key]: value - })); - } - } - }; - } -} -function appearance(editor) { - editor.registerUI("inspector.tab.style", { - AppearanceProperty: ObjectProperty.create({ - title: editor.$i18n("background.color.property.title"), - editableProperty: "appearance", - preventUpdate: true, - inspector: (current) => { - return [ - { - type: "column", - size: [1, 1], - columns: [ - { - key: "backgroundColor", - editor: "color-view", - editorOptions: { - compact: true, - format: true - }, - defaultValue: current.backgroundColor - }, - { - key: "mixBlendMode", - editor: "blend-select", - editorOptions: { - label: "tonality", - compact: true - }, - defaultValue: current.mixBlendMode || BlendMode.NORMAL - } - ] - }, - { - key: "overflow", - editor: "select", - editorOptions: { - label: editor.$i18n("background.color.property.overflow"), - options: [ - Overflow.VISIBLE, - Overflow.HIDDEN, - Overflow.SCROLL, - Overflow.AUTO - ].map((it) => { - return { - value: it, - text: editor.$i18n(`background.color.property.overflow.${it}`) - }; - }) - }, - defaultValue: current.overflow - } - ]; - } - }) - }); -} -var ArtBoardSizeProperty$1 = ""; -var artboardSize = [ - { - category: "Web", - groups: [ - { - group: "Landscape", - devices: [ - { device: "Web Small", size: "1024x600" }, - { device: "Web Medium", size: "1280x800" }, - { device: "Web Large", size: "1440x900" }, - { device: "Web X Large", size: "1920x1200" } - ] - }, - { - group: "Portrait", - devices: [ - { device: "Web Small", size: "600x1024" }, - { device: "Web Medium", size: "800x1280" }, - { device: "Web Large", size: "900x1440" }, - { device: "Web X Large", size: "1200x1920" } - ] - } - ] - }, - { - category: "Apple Devices", - groups: [ - { - group: "iphone", - devices: [ - { device: "iPhone 8", size: "375x667" }, - { device: "iPhone 8 Plus", size: "414x736" }, - { device: "iPhone SE", size: "320x568" }, - { device: "iPhone XS", size: "375x812" }, - { device: "iPhone XR", size: "414x896" }, - { device: "iPhone XS Max", size: "414x896" } - ] - }, - { - group: "ipad", - devices: [ - { device: "iPad", size: "768x1024" }, - { device: "iPad Pro", size: "1024x1366" } - ] - }, - { - group: "apple watch", - devices: [ - { device: "Apple Watch 38nm", size: "272x340" }, - { device: "Apple Watch 40nm", size: "326x394" }, - { device: "Apple Watch 42nm", size: "313x390" }, - { device: "Apple Watch 44nm", size: "368x448" } - ] - }, - { - group: "apple tv", - devices: [{ device: "Apple TV", size: "1920x1080" }] - }, - { group: "MAC", devices: [{ device: "Touch Bar", size: "1085x30" }] } - ] - }, - { - category: "Android Devices", - groups: [ - { - group: "android mobile", - devices: [{ device: "Android Mobile", size: "360x640" }] - }, - { - group: "android tablet", - devices: [{ device: "Android Tablet", size: "768x1024" }] - } - ] - } -]; -class ArtBoardSizeProperty extends BaseProperty { - getClassName() { - return "elf--artboard-size-list"; - } - get editableProperty() { - return "artboardSize"; - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { - this.refresh(); - } - initState() { - return { - selectedIndex: 0 - }; - } - getTitle() { - return "ArtBoard Preset"; - } - getTools() { - var categories2 = artboardSize.map((it, index2) => { - return { category: it.category, index: index2 }; - }); - return createComponent("SelectEditor", { - ref: "$select", - value: categories2[0].category, - options: categories2.map((it) => it.category), - onchange: "changeSizeIndex" - }); - } - [SUBSCRIBE_SELF("changeSizeIndex")](key, value) { - var selectedIndex = this.state.selectedIndex; - artboardSize.forEach((it, index2) => { - if (it.category === value) { - selectedIndex = index2; - } - }); - this.state.selectedIndex = selectedIndex; - this.refresh(); - } - getBody() { - return ` -
- `; - } - makeDevice(device) { - return ` -
-
${device.device}
-
${device.size}
-
- `; - } - [CLICK("$list .device-item")](e) { - var size2 = e.$dt.attr("data-size"); - this.$commands.emit("resizeArtBoard", size2); - } - makeGroup(group2) { - return ` -
-
${group2.group}
-
-
- ${group2.devices.map((device) => this.makeDevice(device)).join("")} -
- `; - } - makeCategory(category) { - return ` -
-
${category.category}
-
-
- ${category.groups.map((group2) => this.makeGroup(group2)).join("")} -
- `; - } - [LOAD("$list") + DOMDIFF]() { - var category = artboardSize[this.state.selectedIndex]; - return category.groups.map((group2) => this.makeGroup(group2)); - } -} -function artboard(editor) { - editor.registerUI("inspector.tab.style", { - ArtBoardSizeProperty - }); -} -var BackdropFilterProperty$1 = ""; -const filter_list$1 = [ - "blur", - "grayscale", - "hue-rotate", - "invert", - "brightness", - "contrast", - "drop-shadow", - "opacity", - "saturate", - "sepia", - "svg" -]; -class BackdropFilterProperty extends BaseProperty { - getTitle() { - return this.$i18n("backdrop.filter.property.title"); - } - getTitleClassName() { - return "filter"; - } - getBodyClassName() { - return "no-padding"; - } - getBody() { - return `
`; - } - getTools() { - return ` - - - `; - } - [CLICK("$add")]() { - var filterType = this.refs.$filterSelect.value; - this.children.$filterEditor.trigger("add", filterType); - } - [LOAD("$filterSelect")]() { - var list2 = filter_list$1.map((it) => { - return { title: this.$i18n(`filter.property.${it}`), value: it }; - }); - var svgFilterList = this.getSVGFilterList(); - var totalList = []; - if (svgFilterList.length) { - totalList = [...list2, { title: "-------", value: "" }, ...svgFilterList]; - } else { - totalList = [...list2]; - } - return totalList.map((it) => { - var { title: title2, value } = it; - return ``; - }); - } - getSVGFilterList() { - var current = this.$context.selection.currentProject; - var arr = []; - if (current) { - arr = current.svgfilters.map((it) => { - return { - title: `svg - #${it.id}`, - value: it.id - }; - }); - } - return arr; - } - [LOAD("$body")]() { - var current = this.$context.selection.current || {}; - var value = current.backdropFilter; - return ` -
- ${createComponent("FilterEditor", { - ref: "$filterEditor", - key: "backdropFilter", - value, - hideLabel: true, - onchange: "changeFilterEditor" - })} -
- `; - } - [SUBSCRIBE_SELF("changeFilterEditor")](key, filter2) { - this.$commands.executeCommand("setAttribute", "change backdrop filter", this.$context.selection.packByValue({ - [key]: filter2 - })); - } - get editableProperty() { - return "backdropFilter"; - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(1e3)]() { - this.refresh(); - } -} -function backdropFilter(editor) { - editor.registerUI("inspector.tab.style", { - BackdropFilterProperty - }); -} -class BackgroundClipProperty extends BaseProperty { - getTitle() { - return "Background Clip"; - } - isFirstShow() { - return false; - } - getTools() { - return `
`; - } - [LOAD("$backgroundClip")]() { - var current = this.$context.selection.current || {}; - var clip = current.backgroundClip || ""; - return createComponent("SelectEditor", { - ref: "$1", - key: "backgroundClip", - icon: true, - value: clip, - options: ["", "paddinb-box", "border-box", "content-box", "text"], - onchange: "changeSelect" - }); - } - [SUBSCRIBE_SELF("changeSelect")](key, value) { - this.$commands.executeCommand("setAttribute", "change background clip", this.$context.selection.packByValue({ - [key]: value - })); - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(["rect", "circle", "text"]); - } -} -function backgroundClip(editor) { - editor.registerElement({ - BackgroundClipProperty - }); -} -var BackgroundImageEditor$1 = ""; -const types = { - image: "image", - "image-resource": "image", - url: "image", - "static-gradient": "gradient", - "linear-gradient": "gradient", - "repeating-linear-gradient": "gradient", - "radial-gradient": "gradient", - "repeating-radial-gradient": "gradient", - "conic-gradient": "gradient", - "repeating-conic-gradient": "gradient" -}; -class BackgroundImageEditor extends EditorElement { - initState() { - return { - hideLabel: this.props.hideLabel || false, - value: this.props.value, - images: this.parseBackgroundImage(this.props.value) - }; - } - parseBackgroundImage(str) { - if (str === "") - return []; - return BackgroundImage.parseStyle(STRING_TO_CSS(str)); - } - setValue(value) { - this.setState({ - value, - images: this.parseBackgroundImage(value) - }); - } - template() { - return ` -
-
-
- `; - } - [LOAD("$fillList") + DOMDIFF]() { - const current = this.$context.selection.current || { color: "black" }; - return this.state.images.map((it, index2) => { - var image2 = it.image; - var backgroundType = types[image2.type]; - const selectedClass = it.selected ? "selected" : ""; - if (it.selected) { - this.selectedIndex = index2; - } - return ` -
- - ${createComponentList([ - "BackgroundPositionEditor", - { - key: "background-position", - index: index2, - ref: `$bp${index2}`, - x: it.x, - y: it.y, - width: it.width, - height: it.height, - repeat: it.repeat, - size: it.size, - blendMode: it.blendMode, - onchange: "changePattern" - } - ], [ - "GradientSingleEditor", - { - index: index2, - ref: `$gse${index2}`, - image: it.image, - color: current.color, - key: "background-image", - onchange: "changePattern" - } - ])} -
-
-
- ${createComponent("BlendSelectEditor", { - ref: `$blend_${index2}`, - key: "blendMode", - value: it.blendMode, - params: index2, - compact: true, - onchange: "changeRangeEditor" - })} -
-
- -
-
- -
-
- -
-
-
-
- `; - }); - } - modifyBackgroundImage() { - var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.images)); - this.parent.trigger(this.props.onchange, this.props.key, value); - } - makeGradient(type) { - switch (type) { - case "static-gradient": - return `static-gradient(black)`; - case "linear-gradient": - return `linear-gradient(90deg, white 0%, black 100%)`; - case "repeating-linear-gradient": - return `repeating-linear-gradient(90deg, white 2%, black 4%)`; - case "radial-gradient": - return `radial-gradient(circle, white 0%, black 100%)`; - case "repeating-radial-gradient": - return `repeating-radial-gradient(circle, white 2%, black 4%)`; - case "conic-gradient": - return `conic-gradient(white 0%, black 100%)`; - case "repeating-conic-gradient": - return `repeating-conic-gradient(white 50%, black 100%)`; - } - } - [SUBSCRIBE("add")](gradientType) { - this.state.images.unshift(new BackgroundImage({ - image: BackgroundImage.parseImage(this.makeGradient(gradientType)) - })); - this.refresh(); - this.modifyBackgroundImage(); - } - [CLICK("$add")]() { - this.trigger("add"); - } - [DRAGSTART("$fillList .fill-item > label")](e) { - this.startIndex = +e.$dt.attr("data-index"); - } - [DRAGOVER("$fillList .fill-item") + PREVENT]() { - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - sortBackgroundImage(startIndex, targetIndex) { - this.sortItem(this.state.images, startIndex, targetIndex); - } - [DROP("$fillList .fill-item") + PREVENT](e) { - var targetIndex = +e.$dt.attr("data-index"); - this.selectItem(this.startIndex, true); - this.sortBackgroundImage(this.startIndex, targetIndex); - this.refresh(); - this.modifyBackgroundImage(); - } - getCurrentBackgroundImage() { - return this.state.images[this.selectedIndex]; - } - [CLICK("$fillList .tools .remove")](e) { - var removeIndex = +e.$dt.attr("data-index"); - this.state.images.splice(removeIndex, 1); - this.refresh(); - this.modifyBackgroundImage(); - } - [CLICK("$fillList .tools .visibility")](e) { - var index2 = +e.$dt.attr("data-index"); - this.state.images[index2].visibility = this.state.images[index2].visibility === VisibilityType.HIDDEN ? VisibilityType.VISIBLE : VisibilityType.HIDDEN; - this.refresh(); - this.modifyBackgroundImage(); - } - [CLICK("$fillList .tools .copy")](e) { - var index2 = +e.$dt.attr("data-index"); - const current = this.state.images[index2]; - this.state.images.splice(index2, 0, current); - this.refresh(); - this.modifyBackgroundImage(); - } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.refs[`fillIndex${selectedIndex}`].addClass("selected"); - } else { - this.refs[`fillIndex${selectedIndex}`].removeClass("selected"); - } - this.state.images.forEach((it, index2) => { - it.selected = index2 === selectedIndex; - }); - } - [SUBSCRIBE("selectFillPopupTab")](type) { - var typeName = types[type]; - var $fillItem = this.refs[`fillIndex${this.selectedIndex}`]; - $fillItem.attr("data-fill-type", typeName); - } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value, params) { - this.trigger("changePattern", key, { [key]: value }, params); - } - [SUBSCRIBE_SELF("changePattern")](key, value, params) { - var index2 = +params; - var image2 = this.state.images[index2]; - image2.reset(value); - this.modifyBackgroundImage(); - this.refresh(); - } -} -var BackgroundImagePositionPopup$1 = ""; -class BackgroundImagePositionPopup extends BasePopup { - get localeKey() { - return "background.image.position.popup"; - } - getTitle() { - return this.$i18n("title"); - } - initState() { - return { - size: this.props.size || "auto", - repeat: this.props.repeat || "repeat", - x: this.props.x || 0, - y: this.props.y || 0, - width: this.props.width || 0, - height: this.props.height || 0, - blendMode: this.props.blendMode - }; - } - updateData(opt = {}) { - this.setState(opt, false); - this.emit(this.state.changeEvent, opt, this.state.params); - } - templateForSize() { - return createComponent("SelectEditor", { - label: this.$i18n("size"), - ref: "$size", - key: "size", - value: this.state.size, - options: ["contain", "cover", "auto"], - onchange: "changeRangeEditor" - }); - } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { - this.updateData({ [key]: value }); - } - templateForX() { - return createComponent("InputRangeEditor", { - label: "X", - compact: true, - ref: "$x", - key: "x", - value: this.state.x, - min: -1e3, - max: 1e3, - step: 1, - onchange: "changeRangeEditor" - }); - } - templateForY() { - return createComponent("InputRangeEditor", { - label: "Y", - compact: true, - ref: "$y", - key: "y", - value: this.state.y, - min: -1e3, - max: 1e3, - step: 1, - onchange: "changeRangeEditor" - }); - } - templateForWidth() { - return createComponent("InputRangeEditor", { - label: "W", - compact: true, - ref: "$width", - key: "width", - value: this.state.width, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); - } - templateForHeight() { - return createComponent("InputRangeEditor", { - label: "H", - compact: true, - ref: "$height", - key: "height", - value: this.state.height, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); - } - templateForRepeat() { - return ` -
- -
-
- - - - - - -
- `; - } - [CLICK("$repeat button")]({ $dt: $t }) { - this.refs.$repeat.attr("data-value", $t.value); - this.updateData({ repeat: $t.value }); - } - getBody() { - return ` -
- `; - } - [LOAD("$picker") + DOMDIFF]() { - return ` - -
- -
- ${this.templateForSize()} - ${this.templateForX()} - ${this.templateForY()} - ${this.templateForWidth()} - ${this.templateForHeight()} - ${this.templateForRepeat()} -
-
- `; - } - [SUBSCRIBE("showBackgroundImagePositionPopup")](data, params, rect2) { - this.state.changeEvent = data.changeEvent || "changeFillPopup"; - this.state.params = params; - this.setState(data.data); - this.showByRect(this.makeRect(180, 310, rect2)); - } -} -var BackgroundImageProperty$1 = ""; -class BackgroundImageProperty extends BaseProperty { - getTitle() { - return this.$i18n("background.image.property.title"); - } - afterRender() { - this.show(); - } - getClassName() { - return "background-image"; - } - getBodyClassName() { - return "no-padding"; - } - getBody() { - return /* @__PURE__ */ createElementJsx("div", { - class: "full", - ref: "$property" - }); - } - getTools() { - return /* @__PURE__ */ createElementJsx("div", { - class: "fill-sample-list", - ref: "$add" - }, /* @__PURE__ */ createElementJsx("button", { - type: "button", - class: "fill", - "data-value": "static-gradient" - }, iconUse("add"))); - } - [CLICK("$add [data-value]")](e) { - this.children.$backgroundImageEditor.trigger("add", e.$dt.data("value")); - } - [LOAD("$property")]() { - var current = this.$context.selection.current || {}; - var value = current.backgroundImage || ""; - return createComponent("BackgroundImageEditor", { - ref: "$backgroundImageEditor", - key: "backgroundImage", - value, - onchange: "changeBackgroundImage" - }); - } - get editableProperty() { - return "backgroundImage"; - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { - this.refresh(); - } - checkCurrentItem(item) { - return this.$context.selection.current === item; - } - [SUBSCRIBE(UPDATE_CANVAS) + IF("checkCurrentItem") + DEBOUNCE(100)]() { - if (this.$context.selection.current) { - if (this.$context.selection.hasChangedField("backgroundImage")) { - this.refresh(); - } - } - } - [SUBSCRIBE_SELF("changeBackgroundImage")](key, value) { - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - [key]: value - })); - } -} -var BackgroundPositionEditor$1 = ""; -class BackgroundPositionEditor extends EditorElement { - initState() { - return { - index: this.props.index, - x: this.props.x, - y: this.props.y, - width: this.props.width, - height: this.props.height, - repeat: this.props.repeat, - size: this.props.size, - blendMode: this.props.blendMode - }; - } - updateData(opt = {}) { - this.setState(opt, false); - this.modifyValue(opt); - } - modifyValue(value) { - this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); - } - setValue(obj2) { - this.setState(__spreadValues({}, obj2)); - } - [BIND("$miniView")]() { - return { - style: { - "background-image": "linear-gradient(to top right, black, white)", - "background-repeat": this.state.repeat, - "background-size": "10px 10px" - } - }; - } - template() { - return ` -
-
-
-
-
-
-
- `; - } - [CLICK("$preview")]() { - this.viewBackgroundPositionPopup(); - } - viewBackgroundPositionPopup() { - this.emit("showBackgroundImagePositionPopup", { - changeEvent: "changeBackgroundPositionPattern", - data: this.state - }, { - id: this.id - }, this.$el.rect()); - } - [SUBSCRIBE("changeBackgroundPositionPattern")](pattern, params) { - if (params.id === this.id) { - this.updateData(__spreadValues({}, pattern)); - } - } -} -function backgroundImage(editor) { - editor.registerElement({ - BackgroundImageEditor, - BackgroundPositionEditor - }); - editor.registerUI("inspector.tab.style", { - BackgroundImageProperty - }); - editor.registerUI("popup", { - BackgroundImagePositionPopup - }); -} -var BorderEditor$1 = ""; -var BorderStyles = { - none: true, - hidden: true, - dotted: true, - dashed: true, - solid: true, - double: true, - groove: true, - ridge: true, - inset: true, - outset: true -}; -class Border { - static parseStyle(str) { - return STRING_TO_CSS(str); - } - static parseValue(str = "") { - var style = ""; - var width2 = ""; - var color2 = ""; - str.split(" ").filter((it) => it.trim()).forEach((value) => { - if (BorderStyles[value]) { - style = value; - } else if (isColor(value)) { - color2 = value; - } else { - width2 = Length.parse(value).value; - } - }); - return { - style, - color: color2, - width: width2 - }; - } - static joinValue(obj2) { - return `${obj2.width}px ${obj2.style || "solid"} ${obj2.color}`; - } - static join(obj2) { - var arr = [ - obj2["border"] ? `border: ${obj2["border"]}` : "", - obj2["border-top"] ? `border-top: ${obj2["border-top"]}` : "", - obj2["border-left"] ? `border-left: ${obj2["border-left"]}` : "", - obj2["border-right"] ? `border-right: ${obj2["border-right"]}` : "", - obj2["border-bottom"] ? `border-bottom: ${obj2["border-bottom"]}` : "" - ].filter((it) => it); - return arr.join(";"); - } -} -const borderTypeList = [ - "border" -]; -const borderTypeTitle = { - border: "all", - "border-top": "top", - "border-right": "right", - "border-bottom": "bottom", - "border-left": "left" -}; -class BorderEditor extends EditorElement { - initState() { - var borders = Border.parseStyle(this.props.value); - var direction2 = Object.keys(borders)[0] || "border"; - return { - direction: direction2, - borders - }; - } - updateData(obj2) { - this.setState(obj2, false); - this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); - } - getValue() { - return Border.join(this.state.borders); - } - setValue(value) { - this.state.borders = Border.parseStyle(value); - this.refresh(); - } - [LOAD("$editorArea")]() { - return borderTypeList.map((type) => { - var label = borderTypeTitle[type] || type; - label = this.$i18n("border.editor." + label); - return ` -
- ${createComponent("BorderValueEditor", { - ref: `$${type}`, - label, - key: type, - value: this.state.borders[type], - onchange: "changeKeyValue" - })} -
- `; - }); - } - template() { - return ` -
-
- -
-
- `; - } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - var borders = this.state.borders; - borders[key] = value; - this.updateData({ borders }); - } -} -var BorderProperty$1 = ""; -class BorderProperty extends BaseProperty { - getTitle() { - return this.$i18n("border.property.title"); - } - getBody() { - return `
`; - } - [LOAD("$body")]() { - var current = this.$context.selection.current || {}; - var value = current.border || ""; - return createComponent("BorderEditor", { - ref: "$1", - key: "border", - value, - onchange: "changeKeyValue" - }); - } - get editableProperty() { - return "border"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { - this.refresh(); - } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - this.$commands.executeCommand("setAttribute", "change border", this.$context.selection.packByValue({ - [key]: value - })); - } -} -var BorderValueEditor$1 = ""; -const borderStyleList = [ - BorderStyle.NONE, - BorderStyle.HIDDEN, - BorderStyle.SOLID, - BorderStyle.DASHED, - BorderStyle.DOTTED, - BorderStyle.DOUBLE, - BorderStyle.GROOVE, - BorderStyle.RIDGE, - BorderStyle.INSET, - BorderStyle.OUTSET -].join(","); -class BorderValueEditor extends EditorElement { - initState() { - return { - value: Border.parseValue(this.props.value) - }; - } - updateData(obj2) { - this.setState(obj2, false); - this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); - } - getValue() { - return Border.joinValue(this.state.value); - } - setValue(value) { - this.state.value = Border.parseValue(value); - this.refresh(); - } - refresh() { - const width2 = Length.parse(this.state.value.width === "undefined" ? 0 : this.state.value.width); - this.children.$width.setValue(width2.value || 0); - this.children.$style.setValue(this.state.value.style || "solid"); - this.children.$color.setValue(this.state.value.color || "rgba(0, 0, 0, 1)"); - } - template() { - var { width: width2, style, color: color2 } = this.state.value; - return ` -
-
- ${createComponent("NumberInputEditor", { - label: iconUse("line_weight"), - compact: true, - ref: "$width", - min: 0, - max: 100, - step: 1, - key: "width", - value: width2, - onchange: "changeKeyValue" - })} - ${createComponent("SelectEditor", { - ref: "$style", - key: "style", - label: iconUse("line_style"), - title: "Style", - compact: true, - options: borderStyleList, - value: style || "solid", - onchange: "changeKeyValue" - })} - ${createComponent("ColorViewEditor", { - ref: "$color", - key: "color", - mini: true, - value: color2 || "rgba(0, 0, 0, 1)", - onchange: "changeKeyValue" - })} -
-
- `; - } - [SUBSCRIBE_SELF("changeKeyValue")](key, v) { - var value = this.state.value; - value[key] = v; - this.updateData({ value }); - } -} -function border(editor) { - editor.registerElement({ - BorderEditor, - BorderValueEditor - }); - editor.registerUI("inspector.tab.style", { - BorderProperty - }); -} -const typeList$1 = [ - { key: "top", title: "Top" }, - { key: "bottom", title: "Bottom" }, - { key: "left", title: "Left" }, - { key: "right", title: "Right" } -]; -const keyList$1 = typeList$1.map((it) => it.key); -const names = { - image: "Image", - "static-gradient": "Static", - "linear-gradient": "Linear", - "repeating-linear-gradient": `${obj$3.repeat} Linear`, - "radial-gradient": "Radial", - "repeating-radial-gradient": `${obj$3.repeat} Radial`, - "conic-gradient": "Conic", - "repeating-conic-gradient": `${obj$3.repeat} Conic` -}; -class BorderImageProperty extends BaseProperty { - getTitle() { - return "Border Image"; - } - [SUBSCRIBE(REFRESH_SELECTION)]() { - this.refresh(); - } - getTools() { - var current = this.$context.selection.current || {}; - var appliedBorderImage = current.appliedBorderImage || false; - return ` - - `; - } - [CLICK("$apply")]() { - var current = this.$context.selection.current; - if (!current) - return; - var applyBorderImage = this.refs.$apply.checked(); - this.$commands.executeCommand("setAttribute", this.$context.selection.packByValue({ - applyBorderImage - })); - } - getColorStepList(image2) { - switch (image2.type) { - case "static-gradient": - case "linear-gradient": - case "repeating-linear-gradient": - case "radial-gradient": - case "repeating-radial-gradient": - case "conic-gradient": - case "repeating-conic-gradient": - return this.getColorStepString(image2.colorsteps); - } - return ""; - } - getColorStepString(colorsteps) { - return colorsteps.map((step2) => { - return `
`; - }).join(""); - } - [LOAD("$borderImageView")]() { - var current = this.$context.selection.current || { - borderImage: { image: {} } - }; - var borderImage2 = current.borderImage; - var backgroundTypeName = borderImage2.type ? names[borderImage2.type] : ""; - const imageCSS = `background-image: ${borderImage2.image.toString()}; background-size: cover;`; - return ` -
-
-
-
-
-
-
-
${backgroundTypeName}
-
- ${this.getColorStepList(borderImage2.image)} -
-
-
- `; - } - [SUBSCRIBE_SELF("changeBorderImage")](key, value) { - if (key === "border-image-slice") { - keyList$1.forEach((type) => { - this.children[`$${type}Slice`].setValue(value); - }); - } - this.setBorderImageProperty(); - } - getBody() { - return ` -
-
-
- - -
-
- ${createComponent("RangeEditor", { - ref: "$allSlice", - key: "border-image-slice", - onchange: "changeBorderImage" - })} -
-
- - `; - } - [CHANGE("$sliceSettingBox select")]() { - this.setBorderImageProperty(); - } - [CLICK("$borderImageView .preview")]() { - this.viewFillPopup(this.refs.$preview, ""); - } - [CLICK("$borderImageView .colorsteps .step")](e) { - this.refs.$colorsteps.$(`[data-selected="true"]`).removeAttr("data-selected"); - var selectColorStepId = e.$dt.attr("data-colorstep-id"); - e.$dt.attr("data-selected", true); - var $preview = e.$dt.closest("border-image-item").$(".preview"); - this.viewFillPopup($preview, selectColorStepId); - } - getFillData(borderImage2) { - let data = { - type: borderImage2.type - }; - switch (data.type) { - case "image": - data.url = borderImage2.image ? borderImage2.image.url : ""; - break; - default: - if (borderImage2.image) { - const image2 = borderImage2.image; - data.type = image2.type; - data.colorsteps = [...image2.colorsteps]; - data.angle = image2.angle; - data.radialType = image2.radialType || "ellipse"; - data.radialPosition = image2.radialPosition || Position.CENTER; - } else { - data.colorsteps = []; - data.angle = 0; - data.radialType = "ellipse"; - data.radialPosition = Position.CENTER; - } - break; - } - return data; - } - viewFillPopup($preview, selectColorStepId) { - var current = this.$context.selection.current; - if (!current) - return; - this.emit("showFillPopup", __spreadProps(__spreadValues({ - changeEvent: "changeBorderImageFillPopup" - }, this.getFillData(current.borderImage)), { - selectColorStepId, - refresh: true - })); - } - viewChangeImage() { - var current = this.$context.selection.current; - if (!current) - return; - var borderImage2 = current.borderImage; - if (!borderImage2) - return; - var $el = this.getRef("$miniView"); - if ($el && borderImage2.image) { - $el.css({ - "background-image": borderImage2.image.toString(), - "background-size": "cover" - }); - } - var $el = this.getRef("$fillTitle"); - if ($el) { - $el.html(names["image"]); - } - var $el = this.getRef("$colorsteps", this.selectedIndex); - if ($el) { - $el.empty(); - } - } - setImage(data) { - var current = this.$context.selection.current; - if (!current) - return; - current.borderImage.setImageUrl(data); - this.viewChangeImage(data); - this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); - } - viewChangeGradient(data) { - var current = this.$context.selection.current; - if (!current) - return; - var borderImage2 = current.borderImage; - if (!borderImage2) - return; - var $el = this.getRef("$miniView"); - if ($el) { - $el.css({ - "background-image": borderImage2.image.toString(), - "background-size": "cover" - }); - } - var $el = this.getRef("$fillTitle"); - if ($el) { - $el.html(names[data.type]); - } - var $el = this.getRef("$colorsteps", this.selectedIndex); - if ($el) { - $el.html(this.getColorStepString(data.colorsteps)); - } - } - setGradient(data) { - var current = this.$context.selection.current; - if (!current) - return; - current.borderImage.setGradient(data); - this.viewChangeGradient(data); - this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); - } - [SUBSCRIBE("changeBorderImageFillPopup")](data) { - switch (data.type) { - case "image": - this.setImage(data); - break; - default: - this.setGradient(data); - break; - } - } - setBorderImageProperty() { - var current = this.$context.selection.current; - if (!current) - return; - var borderImage2 = current.borderImage; - var type = this.refs.$selector.attr("data-selected-value"); - if (type === "all") { - var len2 = this.children.$allSlice.getValue(); - borderImage2.reset({ - slice: { - top: len2.clone(), - right: len2.clone(), - bottom: len2.clone(), - left: len2.clone() - } - }); - } else { - keyList$1.forEach((type2) => { - borderImage2.slice[type2] = this.children[`$${type2}Slice`].getValue(); - borderImage2.width[type2] = this.children[`$${type2}Width`].getValue(); - }); - } - this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); - } - [CLICK("$selector button")](e) { - var type = e.$dt.attr("data-value"); - this.refs.$selector.attr("data-selected-value", type); - if (type === "all") { - this.refs.$partitialSetting.hide(); - } else { - this.refs.$partitialSetting.show("grid"); - } - this.setBorderImageProperty(); - } -} -function borderImage(editor) { - editor.registerElement({ - BorderImageProperty - }); -} -var BorderRadiusEditor$1 = ""; -class BorderRadius { - static parseStyle(str = "") { - var obj2 = { - isAll: true, - "border-radius": 0, - "border-top-left-radius": 0, - "border-top-right-radius": 0, - "border-bottom-right-radius": 0, - "border-bottom-left-radius": 0 - }; - var arr = str.split(" ").map((it) => Length.parse(it)); - if (arr.length === 1) { - obj2.isAll = true; - obj2["border-radius"] = arr[0]; - } else { - obj2.isAll = false; - obj2["border-top-left-radius"] = arr[0]; - obj2["border-top-right-radius"] = arr[1]; - obj2["border-bottom-right-radius"] = arr[2]; - obj2["border-bottom-left-radius"] = arr[3]; - if (arr[0].equals(arr[1]) && arr[0].equals(arr[2]) && arr[0].equals(arr[3])) { - obj2.isAll = true; - obj2["border-radius"] = arr[0]; - } - } - return obj2; - } -} -const typeList = [ - { key: "border-top-left-radius", title: "topLeft", label: "TL" }, - { key: "border-top-right-radius", title: "topRight", label: "TR" }, - { key: "border-bottom-left-radius", title: "bottomLeft", label: "BL" }, - { key: "border-bottom-right-radius", title: "bottomRight", label: "BR" } -]; -const keyList = typeList.map((it) => it.key); -const BorderGroup = { - ALL: "all", - PARTITIAL: "partial" -}; -class BorderRadiusEditor extends EditorElement { - initState() { - return __spreadValues({}, BorderRadius.parseStyle(this.props.value)); - } - template() { - return `
`; - } - [SUBSCRIBE_SELF("changeBorderRadius")](key, value) { - if (key === "border-radius") { - keyList.forEach((type) => { - this.children[`$${type}`].setValue(value.clone()); - }); - } - this.setBorderRadius(); - } - [LOAD("$body") + DOMDIFF]() { - var borderRadius2 = this.state["border-radius"]; - return ` -
-
- ${createComponent("InputRangeEditor", { - label: iconUse("outline_rect"), - ref: "$all", - compact: "true", - key: "border-radius", - value: borderRadius2, - min: 0, - onchange: "changeBorderRadius" - })} -
-
- - ${createComponent("ToggleButton", { - compact: true, - ref: "$toggle", - key: "border-all", - checkedValue: BorderGroup.PARTITIAL, - value: BorderGroup.ALL, - toggleLabels: [iconUse("border_inner"), iconUse("border_inner")], - toggleValues: [BorderGroup.ALL, BorderGroup.PARTITIAL], - onchange: "changeKeyValue" - })} -
- - `; - } - [INPUT("$radiusSettingBox input")]() { - this.setBorderRadius(); - } - [CHANGE("$radiusSettingBox select")]() { - this.setBorderRadius(); - } - setBorderRadius() { - var type = this.selectedValue; - if (type === BorderGroup.ALL) { - this.state["border-radius"] = this.children[`$all`].getValue(); - } else { - keyList.forEach((key) => { - this.state[key] = this.children[`$${key}`].getValue(); - }); - } - this.modifyBorderRadius(); - } - modifyBorderRadius() { - var value = ""; - if (this.selectedValue === BorderGroup.ALL) { - value = this.state["border-radius"] + ""; - } else { - value = keyList.map((key) => `${this.state[key]}`).join(" "); - } - this.parent.trigger(this.props.onchange, value); - } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - const type = value; - if (type === BorderGroup.PARTITIAL) { - this.selectedValue = BorderGroup.PARTITIAL; - this.refs.$partitialSetting.show(); - } else { - this.selectedValue = BorderGroup.ALL; - this.refs.$partitialSetting.hide(); - } - this.setBorderRadius(); - } -} -class BorderRadiusProperty extends BaseProperty { - getTitle() { - return this.$i18n("border.radius.property.title"); - } - getBody() { - return `
`; - } - [LOAD("$body")]() { - var current = this.$context.selection.current || {}; - var value = current.borderRadius || "0px"; - return createComponent("BorderRadiusEditor", { - ref: "$1", - value, - onchange: "changeBorderRadius" - }); - } - get editableProperty() { - return "borderRadius"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { - if (this.$context.selection.hasChangedField("borderRadius")) { - this.refresh(); - } - } - [SUBSCRIBE_SELF("changeBorderRadius")](value) { - this.$commands.executeCommand("setAttribute", "change border radius", this.$context.selection.packByValue({ - borderRadius: value - })); - } -} -function borderRadius(editor) { - editor.registerElement({ - BorderRadiusEditor - }); - editor.registerUI("inspector.tab.style", { - BorderRadiusProperty - }); -} -var BoxModelProperty$1 = ""; -const fields = ["margin", "padding"]; -let styleKeys = []; -fields.forEach((field) => { - styleKeys.push.apply(styleKeys, ["-top", "-bottom", "-left", "-right"].map((it) => field + it)); -}); -class BoxModelProperty extends BaseProperty { - getTitle() { - return this.$i18n("box.model.property.title"); - } - get editableProperty() { - return "boxModel"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { - this.refresh(); - } - checkCurrentItem(item) { - return this.$context.selection.current === item; - } - [SUBSCRIBE(UPDATE_CANVAS) + IF("checkCurrentItem") + DEBOUNCE(100)]() { - const current = this.$context.selection.current; - if (current == null ? void 0 : current.hasChangedField("padding-left", "padding-right", "padding-top", "padding-bottom")) { - this.refresh(); - } - } - getBody() { - return `
`; - } - templateInput(key, current) { - var value = Length.parse(current[key] || 0); - return ``; - } - [LOAD("$boxModelItem") + DOMDIFF]() { - var current = this.$context.selection.current; - if (!current) - return ""; - return ` -
-
-
- ${this.templateInput("margin-top", current)} -
-
- ${this.templateInput("margin-bottom", current)} -
-
- ${this.templateInput("margin-left", current)} -
-
- ${this.templateInput("margin-right", current)} -
-
-
-
- ${this.templateInput("padding-top", current)} -
-
- ${this.templateInput("padding-bottom", current)} -
-
- ${this.templateInput("padding-left", current)} -
-
- ${this.templateInput("padding-right", current)} -
-
-
- -
-
- `; - } - [INPUT("$boxModelItem input")]() { - this.resetBoxModel(); - } - resetBoxModel() { - var data = {}; - styleKeys.forEach((key) => { - data[key] = this.refs["$" + key].value; - }); - this.$commands.executeCommand("setAttribute", "change padding or margin", this.$context.selection.packByValue(data)); - } -} -function boxModel(editor) { - editor.registerUI("inspector.tab.style", { - BoxModelProperty - }); -} -var boxShadow$1 = [ - { name: "Box", shadow: `0px 3px 3px 0px rgba(0,0,0,0.2)` }, - { - name: "Shadow-4", - shadow: ` - 0px 1px 1px 0px rgba(0,0,0,0.15), - 0px 2px 2px 0px rgba(0,0,0,0.15), - 0px 4px 4px 0px rgba(0,0,0,0.15), - 0px 8px 8px 0px rgba(0,0,0,0.15) - ` - }, - { - name: "Shadow-5", - shadow: ` - 0px 1px 1px 0px rgba(0,0,0,0.12), - 0px 2px 2px 0px rgba(0,0,0,0.12), - 0px 4px 4px 0px rgba(0,0,0,0.12), - 0px 8px 8px 0px rgba(0,0,0,0.12), - 0px 16px 16px 0px rgba(0,0,0,0.12) - ` - }, - { - name: "Shadow-6", - shadow: ` - 0px 1px 1px 0px rgba(0,0,0,0.11), - 0px 2px 2px 0px rgba(0,0,0,0.11), - 0px 4px 4px 0px rgba(0,0,0,0.11), - 0px 8px 8px 0px rgba(0,0,0,0.11), - 0px 16px 16px 0px rgba(0,0,0,0.11), - 0px 32px 32px 0px rgba(0,0,0,0.11) - ` - }, - { - name: "Sharp", - shadow: ` - 0px 1px 1px 0px rgba(0,0,0,0.25), - 0px 2px 2px 0px rgba(0,0,0,0.20), - 0px 4px 4px 0px rgba(0,0,0,0.15), - 0px 8px 8px 0px rgba(0,0,0,0.10), - 0px 16px 16px 0px rgba(0,0,0,0.05) - ` - }, - { - name: "Diffuse", - shadow: ` - 0px 1px 1px 0px rgba(0,0,0,0.08), - 0px 2px 2px 0px rgba(0,0,0,0.12), - 0px 4px 4px 0px rgba(0,0,0,0.16), - 0px 8px 8px 0px rgba(0,0,0,0.20) - ` - } -]; -var BoxShadowProperty$1 = ""; -class BoxShadowProperty extends BaseProperty { - getTitle() { - return this.$i18n("boxshadow.property.title"); - } - getBody() { - return ` -
- `; - } - getTools() { - return ` - - - `; - } - [CLICK("$add")]() { - const index2 = +this.refs.$select.value; - this.children.$boxshadow.trigger("add", boxShadow$1[index2].shadow); - } - [LOAD("$shadowList")]() { - var current = this.$context.selection.current || {}; - return createComponent("BoxShadowEditor", { - ref: "$boxshadow", - key: "boxShadow", - value: current.boxShadow, - onchange: (key, value) => { - this.$commands.executeCommand("setAttribute", "change box shadow", this.$context.selection.packByValue({ - [key]: value - })); - } - }); - } - get editableProperty() { - return "boxShadow"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { - this.refresh(); - } -} -function boxShadow(editor) { - editor.registerUI("inspector.tab.style", { - BoxShadowProperty - }); -} -var polygon = { - key: "polygon", - title: "Polygon", - execute: function() { - return [ - { name: "Triangle", polygon: "50% 0%, 0% 100%, 100% 100%" }, - { name: "Trapezoid", polygon: "20% 0%, 80% 0%, 100% 100%, 0% 100%" }, - { - name: "Parallelogram", - polygon: "25% 0%, 100% 0%, 75% 100%, 0% 100%" - }, - { - name: "Rhombus", - polygon: "50% 0%, 100% 50%, 50% 100%, 0% 50%" - }, - { - name: "Pentagon", - polygon: "50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%" - }, - { - name: "Hexagon", - polygon: "50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%" - }, - { - name: "Heptagon", - polygon: "50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%" - }, - { - name: "Octagon", - polygon: "30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%" - } - ]; - } -}; -var ClipPathProperty$1 = ""; -const CLIPPATH_REG = /(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi; -class ClipPath extends PropertyItem { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "clip-path", - type: "none", - value: "" - }, obj2)); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("value")); - } - toString() { - var type = this.json.type; - var value = this.json.value; - var box = this.json.box; - var results = ""; - switch (type) { - case "circle": - case "inset": - case "ellipse": - case "polygon": - case "path": - results = `${type}(${value})`; - break; - case "svg": - results = `url(#${value})`; - break; - default: - results = "none"; - break; - } - return box ? `${box} ${results}` : results; - } - toCSS() { - return { - "clip-path": this.toString() - }; - } - static toCSS(obj2) { - return new ClipPath(obj2).toCSS(); - } - static toString(obj2) { - return ClipPath.toCSS(obj2)["clip-path"]; - } - static parse(obj2) { - return new ClipPath(obj2); - } - static parseStyle(str) { - var clippath = {}; - if (!str) - return {}; - var matches2 = str.match(CLIPPATH_REG) || []; - matches2.forEach((value) => { - if (value.includes("-box")) { - clippath.box = value; - } else { - var [clipPathName, clipPathValue] = value.split("("); - clipPathValue = clipPathValue || ""; - if (clipPathName === "none") { - clipPathValue = ""; - } else { - clipPathValue = clipPathValue.split(")")[0]; - } - clippath.type = clipPathName; - clippath.value = clipPathValue; - } - }); - return clippath; - } - static parseStyleForCircle(str = "50% at 50% 50%") { - var radius = new Length("", "closest-side"), position2 = ""; - str = str || "50% at 50% 50%"; - if (str.includes("at")) { - [radius, position2] = str.split("at").map((it) => it.trim()); - } else { - position2 = str.trim(); - } - var [x, y] = position2.split(" "); - if (isUndefined(y)) { - y = x; - } - radius = Length.parse(radius); - x = Length.parse(x); - y = Length.parse(y); - return { - radius, - x, - y - }; - } - static parseStyleForEllipse(str = "50% 50%") { - var radius = `50% 50%`, position2 = ""; - str = str || "50%"; - if (str.includes("at")) { - [radius, position2] = str.split("at").map((it) => it.trim()); - } else { - position2 = str.trim(); - } - var [x, y] = position2.split(" "); - if (isUndefined(y)) { - y = x; - } - x = Length.parse(x); - y = Length.parse(y); - var [radiusX, radiusY] = radius.split(" "); - if (isUndefined(radiusY)) { - radiusY = radiusX; - } - radiusX = Length.parse(radiusX); - radiusY = Length.parse(radiusY); - return { - radiusX, - radiusY, - x, - y - }; - } - static parseStyleForInset(str = "") { - var [inset, round2] = str.split("round"); - var [_count, top2, right2, bottom2, left2] = DirectionLength.parse(inset); - if (round2) { - var [_roundCount, topRadius, rightRadius, bottomRadius, leftRadius] = DirectionLength.parse(round2); - } - return { - isAll: _count === 1, - top: top2, - right: right2, - bottom: bottom2, - left: left2, - round: round2, - isAllRadius: _roundCount === 1, - topRadius, - rightRadius, - bottomRadius, - leftRadius - }; - } - static parseStyleForPolygon(str = "") { - return str.split(",").filter((it) => it.trim()).map((it) => { - var [x, y] = it.trim().split(" "); - return { - x: Length.parse(x), - y: Length.parse(y) - }; - }); - } -} -const ClipPathSample = { - [ClipPathType.CIRCLE]: "circle(50% at 50% 50%)", - [ClipPathType.ELLIPSE]: "ellipse(50% 50% at 50% 50%)", - [ClipPathType.INSET]: "inset(0% 0% 0% 0%)", - [ClipPathType.POLYGON]: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", - [ClipPathType.PATH]: "path()" -}; -class ClipPathProperty extends BaseProperty { - getTitle() { - return this.$i18n("clippath.property.title"); - } - getClassName() { - return "clip-path-property"; - } - getBody() { - return `
`; - } - getTools() { - return ` -
- - - - - - -
- `; - } - makeClipPathTemplate(clippath, func) { - const isPath = clippath === "path"; - const isPolygon = clippath === "polygon"; - let newPathString = ""; - if (isPath) { - const pathString2 = func.split("(")[1].split(")")[0]; - let pathObject = PathParser.fromSVGString(pathString2); - const bbox = pathObject.getBBox(); - const rectangle = vertiesToRectangle(bbox); - const rate = 260 / rectangle.width; - const hRate = 150 / rectangle.height; - const lastRate = Math.min(rate, hRate); - pathObject = pathObject.translate(-bbox[0][0], -bbox[0][1]).scale(lastRate, lastRate); - const newBBox = pathObject.getBBox(); - const newRectangle = vertiesToRectangle(newBBox); - newPathString = pathObject.translate(260 / 2 - newRectangle.width / 2, 0).d; - } - let polygonSelect = ""; - if (isPolygon) { - const polygonList = polygon.execute(); - polygonSelect = createComponent("SelectEditor", { - ref: "$polygonSelect", - options: ["", ...polygonList.map((it) => it.name)], - onchange: (key, value) => { - const polygon2 = polygonList.find((it) => it.name === value); - if (polygon2) { - this.updatePathInfo({ - "clip-path": `polygon(${polygon2.polygon})` - }); - } - } - }); - } - return ` -
-
- -
-
${clippath}
- ${isPolygon ? polygonSelect : ""} -
-
- -
-
- ${isPath ? `` : ""} -
- - `; - } - [CLICK("$clippathList .clippath-item .title .name")]() { - var current = this.$context.selection.current; - if (!current) - return; - this.viewClipPathPicker(); - } - [CLICK("$clippathList .del") + PREVENT]() { - var current = this.$context.selection.current; - if (!current) - return; - this.$commands.executeCommand("setAttribute", "delete clip-path", this.$context.selection.packByValue({ - clipPath: "" - })); - this.emit("hideClipPathPopup"); - window.setTimeout(() => { - this.refresh(); - }, 100); - } - get editableProperty() { - return "clipPath"; - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { - this.refresh(); - } - [LOAD("$clippathList")]() { - var current = this.$context.selection.current; - if (!current) - return ""; - if (!current.clipPath) - return ""; - return this.makeClipPathTemplate(current.clipPath.split("(")[0], current.clipPath); - } - [CLICK("$tools [data-value]")](e) { - var current = this.$context.selection.current; - if (!current) - return; - if (current.clipPath) { - window.alert("clip-path is already exists."); - return; - } - if (current) { - current.reset({ - clipPath: ClipPathSample[e.$dt.data("value")] - }); - this.$commands.executeCommand("setAttribute", "change clipPath", this.$context.selection.pack("clipPath")); - } - this.refresh(); - } - viewClipPathPicker() { - var current = this.$context.selection.current; - if (!current) - return; - var obj2 = ClipPath.parseStyle(current.clipPath); - switch (obj2.type) { - case "path": - var d = current.absolutePath(current.clipPathString).d; - var mode = d ? "modify" : "path"; - this.emit("showPathEditor", mode, { - changeEvent: (data) => { - data.d = current.invertPath(data.d).d; - this.updatePathInfo({ - clipPath: `path(${data.d})` - }); - }, - current, - d - }); - break; - } - } - updatePathInfo(data) { - if (!data) - return; - var current = this.$context.selection.current; - if (!current) - return; - current.reset(data); - this.refresh(); - this.$commands.executeCommand("setAttribute", "change clipPath", this.$context.selection.packByValue(data)); - } -} -function clipPath(editor) { - editor.registerUI("inspector.tab.style", { - ClipPathProperty - }); -} -var ClippathEditorView$2 = ""; -class ClippathPolygonEditorView extends EditorElement { - initializePolygon() { - const current = this.$context.selection.current; - this.state.current = current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.clippath.value = ClipPath.parseStyleForPolygon(this.state.clippath.value); - this.screenPoints = this.$viewport.applyVerties(vertiesMap(this.state.clippath.value.map((point2) => { - const { x, y } = point2; - const newX = x.toPx(this.state.width); - const newY = y.toPx(this.state.height); - return fromValues(newX, newY, 0); - }), current.absoluteMatrix)); - this.clonedScreenPoints = clone$1(this.screenPoints); - } - [POINTERSTART("$el .polygon .polygon-pointer") + MOVE("movePolygonPointer") + END("moveEndPolygonPointer")](e) { - this.initializePolygon(); - this.polygonTargetIndex = +e.$dt.data("index"); - } - movePolygonPointer(dx, dy) { - this.clonedScreenPoints[this.polygonTargetIndex] = add$1([], this.screenPoints[this.polygonTargetIndex], [dx, dy, 0]); - this.updatePolygon(this.clonedScreenPoints); - } - moveEndPolygonPointer() { - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .polygon .polygon-line")](e) { - this.initializePolygon(); - const index2 = +e.$dt.data("index"); - this.polygonTargetIndex = index2; - const current = this.screenPoints[this.polygonTargetIndex]; - const next = this.screenPoints[(this.polygonTargetIndex + 1) % this.screenPoints.length]; - const newPoint = lerp$1([], current, next, 0.5); - this.screenPoints.splice(this.polygonTargetIndex + 1, 0, newPoint); - this.updatePolygon(this.screenPoints); - } - updatePolygon(screenPoints) { - const newWorldPoints = this.$viewport.applyVertiesInverse(screenPoints); - const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; - const newLocalPoints = vertiesMap(newWorldPoints, inverseMatrix); - this.state.clippath.value = newLocalPoints.map((p) => { - return [ - Length.makePercent(p[0], this.state.width), - Length.makePercent(p[1], this.state.height) - ].join(" "); - }).join(","); - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .polygon .polygon-center") + MOVE("movePolygonCenter") + END("moveEndPolygonCenter")]() { - this.initializePolygon(); - } - movePolygonCenter(dx, dy) { - const newScreenPoints = this.screenPoints.map((p) => { - return add$1([], p, [dx, dy, 0]); - }); - this.updatePolygon(newScreenPoints); - } - moveEndPolygonCenter(dx, dy) { - if (dx == 0 && dy == 0) { - switch (this.state.clippath.type) { - case ClipPathType.POLYGON: - const value2 = ClipPath.toCSS({ - type: ClipPathType.CIRCLE, - value: `50% at 50% 50%` - }); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); - break; - } - return; - } - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - templatePolygon(clippath) { - const current = this.$context.selection.current; - const points = ClipPath.parseStyleForPolygon(clippath.value).map((point2) => [ - point2.x.toPx(current.screenWidth).value, - point2.y.toPx(current.screenHeight).value, - 0 - ]); - const centerPoint = toRectVerties(points)[4]; - const screenPoints = this.$viewport.applyVerties(vertiesMap(points, current.absoluteMatrix)); - const screenCenter = this.$viewport.applyVerties(vertiesMap([centerPoint], current.absoluteMatrix))[0]; - return /* @__PURE__ */ createElementJsx("div", { - class: "polygon" - }, /* @__PURE__ */ createElementJsx("div", { - class: "polygon-back" - }, /* @__PURE__ */ createElementJsx("svg", { - style: "position:absolute;width:100%;height:100%;" - }, /* @__PURE__ */ createElementJsx("polygon", { - points: `${screenPoints.map((it) => [it[0], it[1]].join(",")).join(" ")}` - }), screenPoints.map((it, index2) => { - const nextIndex = (index2 + 1) % screenPoints.length; - const nextPoint = screenPoints[nextIndex]; - return /* @__PURE__ */ createElementJsx("line", { - x1: it[0], - y1: it[1], - x2: nextPoint[0], - y2: nextPoint[1], - class: "polygon-line", - "data-index": index2 - }); - }), screenPoints.map((it, index2) => { - return /* @__PURE__ */ createElementJsx("circle", { - cx: it[0], - cy: it[1], - r: 3, - class: "polygon-pointer", - "data-index": index2 - }); - }))), /* @__PURE__ */ createElementJsx("div", { - class: "polygon-center", - style: { - left: Length.px(screenCenter[0]), - top: Length.px(screenCenter[1]) - } - })); - } -} -class ClippathInsetEditorView extends ClippathPolygonEditorView { - initializeInset() { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.clippath.value = ClipPath.parseStyleForInset(this.state.clippath.value); - this.state.inset = this.state.clippath.value; - const inset = this.state.inset; - const top2 = inset.top.toPx(current.screenHeight); - const left2 = inset.left.toPx(current.screenWidth); - const right2 = Length.px(current.screenWidth - inset.right.toPx(current.screenWidth)); - const bottom2 = Length.px(current.screenHeight - inset.bottom.toPx(current.screenHeight)); - const verties = this.$viewport.applyVerties(vertiesMap([ - [left2, top2, 0], - [right2, top2, 0], - [right2, bottom2, 0], - [left2, bottom2, 0] - ], current.absoluteMatrix)); - const leftPoint = lerp$1([], verties[0], verties[3], 0.5); - const topPoint = lerp$1([], verties[0], verties[1], 0.5); - const rightPoint = lerp$1([], verties[1], verties[2], 0.5); - const bottomPoint = lerp$1([], verties[2], verties[3], 0.5); - const centerPoint = lerp$1([], verties[0], verties[2], 0.5); - this.screenPoints = [ - leftPoint, - topPoint, - rightPoint, - bottomPoint, - centerPoint - ]; - } - [POINTERSTART("$el .inset .inset-direction") + LEFT_BUTTON + MOVE("moveInsetRadius") + END("moveEndInsetRadius")](e) { - this.initializeInset(); - this.insetTarget = e.$dt.data("direction"); - } - moveInsetRadius(dx, dy) { - const { left: left2, top: top2, right: right2, bottom: bottom2 } = this.state.inset; - let [leftPoint, topPoint, rightPoint, bottomPoint] = this.screenPoints; - if (this.insetTarget == "left") - leftPoint = add$1([], leftPoint, [dx, dy, 0]); - else if (this.insetTarget == "top") - topPoint = add$1([], topPoint, [dx, dy, 0]); - else if (this.insetTarget == "right") - rightPoint = add$1([], rightPoint, [dx, dy, 0]); - else if (this.insetTarget == "bottom") - bottomPoint = add$1([], bottomPoint, [dx, dy, 0]); - const newLeftPoint = this.$viewport.applyVertexInverse(leftPoint); - const newTopPoint = this.$viewport.applyVertexInverse(topPoint); - const newRightPoint = this.$viewport.applyVertexInverse(rightPoint); - const newBottomPoint = this.$viewport.applyVertexInverse(bottomPoint); - const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; - const [ - relativeLeftPosition, - relativeTopPosition, - relativeRightPosition, - relativeBottomPosition - ] = vertiesMap([newLeftPoint, newTopPoint, newRightPoint, newBottomPoint], inverseMatrix); - this.state.clippath.value = [ - top2.isPercent() ? Length.makePercent(relativeTopPosition[1], this.state.height) : Length.px(relativeTopPosition[1]), - right2.isPercent() ? Length.makePercent(this.state.width - relativeRightPosition[0], this.state.width) : Length.px(this.state.width - relativeRightPosition[0]), - bottom2.isPercent() ? Length.makePercent(this.state.height - relativeBottomPosition[1], this.state.height) : Length.px(this.state.height - relativeBottomPosition[1]), - left2.isPercent() ? Length.makePercent(relativeLeftPosition[0], this.state.width) : Length.px(relativeLeftPosition[0]) - ].join(" "); - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndInsetRadius() { - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .inset .inset-center") + LEFT_BUTTON + MOVE("moveInsetCenter") + END("moveEndInsetCenter")]() { - this.initializeInset(); - } - moveInsetCenter(dx, dy) { - const { left: left2, top: top2, right: right2, bottom: bottom2 } = this.state.inset; - let [leftPoint, topPoint, rightPoint, bottomPoint] = this.screenPoints; - leftPoint = add$1([], leftPoint, [dx, dy, 0]); - topPoint = add$1([], topPoint, [dx, dy, 0]); - rightPoint = add$1([], rightPoint, [dx, dy, 0]); - bottomPoint = add$1([], bottomPoint, [dx, dy, 0]); - const newLeftPoint = this.$viewport.applyVertexInverse(leftPoint); - const newTopPoint = this.$viewport.applyVertexInverse(topPoint); - const newRightPoint = this.$viewport.applyVertexInverse(rightPoint); - const newBottomPoint = this.$viewport.applyVertexInverse(bottomPoint); - const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; - const [ - relativeLeftPosition, - relativeTopPosition, - relativeRightPosition, - relativeBottomPosition - ] = vertiesMap([newLeftPoint, newTopPoint, newRightPoint, newBottomPoint], inverseMatrix); - this.state.clippath.value = [ - top2.isPercent() ? Length.makePercent(relativeTopPosition[1], this.state.height) : Length.px(relativeTopPosition[1]), - right2.isPercent() ? Length.makePercent(this.state.width - relativeRightPosition[0], this.state.width) : Length.px(this.state.width - relativeRightPosition[0]), - bottom2.isPercent() ? Length.makePercent(this.state.height - relativeBottomPosition[1], this.state.height) : Length.px(this.state.height - relativeBottomPosition[1]), - left2.isPercent() ? Length.makePercent(relativeLeftPosition[0], this.state.width) : Length.px(relativeLeftPosition[0]) - ].join(" "); - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndInsetCenter(dx, dy) { - if (dx == 0 && dy == 0) { - switch (this.state.clippath.type) { - case ClipPathType.INSET: - const value2 = ClipPath.toCSS({ - type: ClipPathType.POLYGON, - value: `0% 0%, 100% 0%, 100% 100%, 0% 100%` - }); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); - break; - } - return; - } - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - templateInset(clippath) { - const current = this.$context.selection.current; - clippath.value = ClipPath.parseStyleForInset(clippath.value); - const top2 = clippath.value.top.toPx(current.screenHeight); - const left2 = clippath.value.left.toPx(current.screenWidth); - const right2 = Length.px(current.screenWidth - clippath.value.right.toPx(current.screenWidth)); - const bottom2 = Length.px(current.screenHeight - clippath.value.bottom.toPx(current.screenHeight)); - const verties = this.$viewport.applyVerties(vertiesMap([ - [left2, top2, 0], - [right2, top2, 0], - [right2, bottom2, 0], - [left2, bottom2, 0] - ], current.absoluteMatrix)); - const leftPoint = lerp$1([], verties[0], verties[3], 0.5); - const topPoint = lerp$1([], verties[0], verties[1], 0.5); - const rightPoint = lerp$1([], verties[1], verties[2], 0.5); - const bottomPoint = lerp$1([], verties[2], verties[3], 0.5); - const centerPoint = lerp$1([], verties[0], verties[2], 0.5); - return /* @__PURE__ */ createElementJsx("div", { - class: "inset" - }, /* @__PURE__ */ createElementJsx("div", { - class: "inset-back" - }, /* @__PURE__ */ createElementJsx("svg", { - style: "position:absolute;width:100%;height:100%;" - }, /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${verties[0][0]} ${verties[0][1]} - L ${verties[1][0]} ${verties[1][1]} - L ${verties[2][0]} ${verties[2][1]} - L ${verties[3][0]} ${verties[3][1]} - Z - ` - }))), /* @__PURE__ */ createElementJsx("div", { - class: "inset-direction", - "data-direction": "left", - style: { - left: Length.px(leftPoint[0]), - top: Length.px(leftPoint[1]) - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "inset-direction", - "data-direction": "top", - style: { left: Length.px(topPoint[0]), top: Length.px(topPoint[1]) } - }), /* @__PURE__ */ createElementJsx("div", { - class: "inset-direction", - "data-direction": "right", - style: { - left: Length.px(rightPoint[0]), - top: Length.px(rightPoint[1]) - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "inset-direction", - "data-direction": "bottom", - style: { - left: Length.px(bottomPoint[0]), - top: Length.px(bottomPoint[1]) - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "inset-center", - style: { - left: Length.px(centerPoint[0]), - top: Length.px(centerPoint[1]) - } - })); - } -} -class ClippathCircleEditorView extends ClippathInsetEditorView { - [POINTERSTART("$el .circle .circle-radius") + LEFT_BUTTON + MOVE("moveCircleRadius") + END("moveEndCircleRadius")]() { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.circle = ClipPath.parseStyleForCircle(this.state.clippath.value); - } - moveCircleRadius(dx, dy) { - const current = this.$context.selection.current; - const { radius, x, y } = this.state.circle; - const oldX = x.toPx(current.screenWidth); - const oldY = y.toPx(current.screenHeight); - const r = Math.sqrt(Math.pow(current.screenWidth, 2) + Math.pow(current.screenHeight, 2)) / Math.sqrt(2); - const oldRadius = radius.toPx(current.screenWidth); - const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value + oldRadius.value, oldY, 0]], current.absoluteMatrix)); - const newRadius = verties[0]; - const newX = newRadius[0] + dx; - const newY = newRadius[1] + dy; - const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); - const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; - const distX = Math.abs(relativePosition[0] - oldX); - const result = [ - radius.isPercent() ? Length.makePercent(distX, r) : Length.px(distX), - x, - y - ]; - this.state.clippath.value = `${result[0]} at ${result[1]} ${result[2]}`; - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndCircleRadius() { - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .circle .circle-center") + LEFT_BUTTON + MOVE("moveCircleCenter") + END("moveEndCircleCenter")]() { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.circle = ClipPath.parseStyleForCircle(this.state.clippath.value); - } - moveCircleCenter(dx, dy) { - const current = this.$context.selection.current; - const { radius, x, y } = this.state.circle; - const oldX = x.toPx(current.screenWidth); - const oldY = y.toPx(current.screenHeight); - const verties = this.$viewport.applyVerties(vertiesMap([[oldX, oldY, 0]], current.absoluteMatrix)); - const center2 = verties[0]; - const newX = center2[0] + dx; - const newY = center2[1] + dy; - const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); - const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; - const result = [ - radius, - x.isPercent() ? Length.makePercent(relativePosition[0], this.state.width) : Length.px(relativePosition[0]), - y.isPercent() ? Length.makePercent(relativePosition[1], this.state.height) : Length.px(relativePosition[1]) - ]; - this.state.clippath.value = `${radius} at ${result[1]} ${result[2]}`; - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndCircleCenter(dx, dy) { - if (dx == 0 && dy == 0) { - switch (this.state.clippath.type) { - case ClipPathType.CIRCLE: - const value2 = ClipPath.toCSS({ - type: ClipPathType.ELLIPSE, - value: `${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}` - }); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); - break; - } - return; - } - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - templateCircle(clippath) { - const current = this.$context.selection.current; - const r = Math.sqrt(Math.pow(current.screenWidth, 2) + Math.pow(current.screenHeight, 2)) / Math.sqrt(2); - const radius = clippath.value.radius.toPx(r); - const x = clippath.value.x.toPx(current.screenWidth); - const y = clippath.value.y.toPx(current.screenHeight); - const verties = this.$viewport.applyVerties(vertiesMap([ - [x, y, 0], - [x.value + radius.value, y, 0] - ], current.absoluteMatrix)); - const center2 = verties[0]; - const radiusPos = verties[1]; - const dist$1 = dist(center2, radiusPos); - return /* @__PURE__ */ createElementJsx("div", { - class: "circle" - }, /* @__PURE__ */ createElementJsx("div", { - class: "circle-back", - style: { - left: Length.px(center2[0]), - top: Length.px(center2[1]), - width: Length.px(dist$1 * 2), - height: Length.px(dist$1 * 2) - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "circle-center", - style: { - left: center2[0] + "px", - top: center2[1] + "px" - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "circle-radius", - style: { - left: radiusPos[0] + "px", - top: radiusPos[1] + "px" - } - })); - } -} -class ClippathEllipseEditorView extends ClippathCircleEditorView { - [POINTERSTART("$el .ellipse .ellipse-radius-x") + LEFT_BUTTON + MOVE("moveEllipseRadiusX") + END("moveEndEllipseRadiusX")]() { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); - } - moveEllipseRadiusX(dx, dy) { - const current = this.$context.selection.current; - const { radiusX, radiusY, x, y } = this.state.ellipse; - const oldX = x.toPx(current.screenWidth); - const oldY = y.toPx(current.screenHeight); - const oldRadiusX = radiusX.toPx(current.screenWidth); - const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value + oldRadiusX.value, oldY, 0]], current.absoluteMatrix)); - const newRadius = verties[0]; - const newX = newRadius[0] + dx; - const newY = newRadius[1] + dy; - const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); - const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; - const distX = Math.abs(relativePosition[0] - oldX); - const result = [ - radiusX.isPercent() ? Length.makePercent(distX, this.state.width) : Length.px(distX), - x, - y - ]; - this.state.clippath.value = `${result[0]} ${radiusY} at ${result[1]} ${result[2]}`; - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .ellipse .ellipse-radius-y") + LEFT_BUTTON + MOVE("moveEllipseRadiusY") + END("moveEndEllipseRadiusX")]() { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); - } - moveEllipseRadiusY(dx, dy) { - const current = this.$context.selection.current; - const { radiusX, radiusY, x, y } = this.state.ellipse; - const oldX = x.toPx(current.screenWidth); - const oldY = y.toPx(current.screenHeight); - const oldRadiusY = radiusY.toPx(current.screenHeight); - const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value, oldY.value + oldRadiusY.value, 0]], current.absoluteMatrix)); - const newRadius = verties[0]; - const newX = newRadius[0] + dx; - const newY = newRadius[1] + dy; - const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); - const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; - const distY = Math.abs(relativePosition[1] - oldY); - const result = [ - radiusY.isPercent() ? Length.makePercent(distY, this.state.height) : Length.px(distY), - x, - y - ]; - this.state.clippath.value = `${radiusX} ${result[0]} at ${x} ${y}`; - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndEllipseRadiusX() { - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - [POINTERSTART("$el .ellipse .ellipse-center") + LEFT_BUTTON + MOVE("moveEllipseCenter") + END("moveEndEllipseCenter")](e) { - const current = this.$context.selection.current; - this.state.current; - this.state.width = current.screenWidth; - this.state.height = current.screenHeight; - this.state.clippath = ClipPath.parseStyle(current["clip-path"]); - this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); - this.state.left = Length.parse(e.$dt.css("left")).value; - this.state.top = Length.parse(e.$dt.css("top")).value; - } - moveEllipseCenter(dx, dy) { - const { radiusX, radiusY, x, y } = this.state.ellipse; - const newLeft = this.state.left + dx; - const newTop = this.state.top + dy; - const worldPosition = this.$viewport.applyVertexInverse([ - newLeft, - newTop, - 0 - ]); - const relativePosition = vertiesMap([worldPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; - const result = [ - radiusX, - radiusY, - x.isPercent() ? Length.makePercent(relativePosition[0], this.state.width) : Length.px(relativePosition[0]), - y.isPercent() ? Length.makePercent(relativePosition[1], this.state.height) : Length.px(relativePosition[1]) - ]; - this.state.clippath.value = `${radiusX} ${radiusY} at ${result[2]} ${result[3]}`; - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); - } - moveEndEllipseCenter(dx, dy) { - if (dx == 0 && dy == 0) { - switch (this.state.clippath.type) { - case ClipPathType.ELLIPSE: - const value2 = ClipPath.toCSS({ - type: ClipPathType.INSET, - value: "" - }); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); - break; - } - return; - } - const value = ClipPath.toCSS(this.state.clippath); - this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); - } - templateEllipse(clippath) { - const current = this.$context.selection.current; - const radiusX = clippath.value.radiusX.toPx(current.screenWidth); - const radiusY = clippath.value.radiusY.toPx(current.screenHeight); - const x = clippath.value.x.toPx(current.screenWidth); - const y = clippath.value.y.toPx(current.screenHeight); - const verties = this.$viewport.applyVerties(vertiesMap([ - [x, y, 0], - [x.value + radiusX.value, y, 0], - [x.value, y.value + radiusY.value, 0] - ], current.absoluteMatrix)); - const center2 = verties[0]; - const radiusXPos = verties[1]; - const radiusYPos = verties[2]; - const distX = dist(center2, radiusXPos); - const distY = dist(center2, radiusYPos); - const direction2 = subtract([], radiusXPos, center2); - const angle = calculateAngle(direction2[0], direction2[1]); - return /* @__PURE__ */ createElementJsx("div", { - class: "ellipse" - }, /* @__PURE__ */ createElementJsx("div", { - class: "ellipse-back" - }, /* @__PURE__ */ createElementJsx("svg", { - style: "position:absolute;width:100%;height:100%;" - }, /* @__PURE__ */ createElementJsx("ellipse", { - cx: center2[0], - cy: center2[1], - rx: distX, - ry: distY, - transform: `rotate(${angle} ${center2[0]} ${center2[1]})` - }))), /* @__PURE__ */ createElementJsx("div", { - class: "ellipse-center", - style: { - left: center2[0] + "px", - top: center2[1] + "px" - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "ellipse-radius ellipse-radius-x", - style: { - left: radiusXPos[0] + "px", - top: radiusXPos[1] + "px" - } - }), /* @__PURE__ */ createElementJsx("div", { - class: "ellipse-radius ellipse-radius-y", - style: { - left: radiusYPos[0] + "px", - top: radiusYPos[1] + "px" - } - })); - } -} -class ClippathEditorView$1 extends ClippathEllipseEditorView { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--clippath-editor-view " - }); - } - [LOAD("$el") + DOMDIFF]() { - const current = this.$context.selection.current; - if (!current) { - return ""; - } - const clippath = ClipPath.parseStyle(current["clip-path"]); - switch (clippath.type) { - case ClipPathType.CIRCLE: - clippath.value = ClipPath.parseStyleForCircle(clippath.value); - return this.templateCircle(clippath); - case ClipPathType.ELLIPSE: - clippath.value = ClipPath.parseStyleForEllipse(clippath.value); - return this.templateEllipse(clippath); - case ClipPathType.POLYGON: - return this.templatePolygon(clippath); - case ClipPathType.INSET: - return this.templateInset(clippath); - } - return /* @__PURE__ */ createElementJsx("div", null); - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refresh(); - } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); - } - checkClipPath() { - if (this.$el.isShow() === false) - return false; - const current = this.$context.selection.current; - if (!current) - return false; - return this.$context.selection.current.hasChangedField("clip-path", "angle", "x", "y", "width", "height"); - } - [SUBSCRIBE(UPDATE_CANVAS) + IF("checkClipPath") + DEBOUNCE(10)]() { - this.refresh(); - } - [CLICK("$el")](e) { - if (Dom.create(e.target).isTag("svg") || Dom.create(e.target).hasClass("elf--clippath-editor-view")) { - this.trigger("hideClippathEditorView"); - } - } - [SUBSCRIBE("hideClippathEditorView")]() { - this.$el.hide(); - } - [SUBSCRIBE("showClippathEditorView")]() { - this.$el.show(); - this.refresh(); - } -} -function ClippathEditorView(editor) { - editor.registerUI("canvas.view", { - ClippathEditorView: ClippathEditorView$1 - }); -} -var CodeViewProperty$1 = ""; -class CodeViewProperty extends BaseProperty { - getTitle() { - return this.$i18n("code.view.property.title"); - } - checkConfig() { - return this.$config.is("inspector.selectedValue", "code"); - } - [CONFIG("inspector.selectedValue")]() { - this.refresh(); - } - [SUBSCRIBE(UPDATE_CANVAS, REFRESH_SELECTION) + IF("checkConfig") + DEBOUNCE(100)]() { - this.refresh(); - } - getBody() { - return ` -
-
-
-
- `; - } - [LOAD("$code") + DOMDIFF]() { - return [ - this.$editor.renderer("html").codeview(this.$context.selection.current) - ]; - } - [LOAD("$svg") + DOMDIFF]() { - return [ - this.$editor.renderer("svg").codeview(this.$context.selection.current) - ]; - } -} -function codeview(editor) { - editor.registerUI("inspector.tab.code", { - CodeViewProperty - }); -} -function _currentProject(editor, callback) { - var project2 = editor.context.selection.currentProject; - if (project2) { - var timeline = project2.getSelectedTimeline(); - callback && callback(project2, timeline); - } -} -var __glob_0_0$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": _currentProject -}, Symbol.toStringTag, { value: "Module" })); -function _doForceRefreshSelection(editor) { - editor.emit("refreshAll"); -} -var __glob_0_1$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": _doForceRefreshSelection -}, Symbol.toStringTag, { value: "Module" })); -var addArtBoard = { - command: "addArtBoard", - execute: (editor, obj2 = {}, center2 = null) => { - var project2 = editor.context.selection.currentProject; - if (!project2) { - project2 = editor.add(editor.createModel({ itemType: "project" })); - editor.context.selection.selectProject(project2); - } - var artboard2 = project2.appendChild(editor.createModel(__spreadValues({ - itemType: "artboard", - x: 300, - y: 200, - width: 375, - height: 667 - }, obj2))); - if (center2) { - artboard2.reset({ - x: 0, - y: 0 - }); - artboard2.moveByCenter(center2); - } - editor.context.selection.select(artboard2); - _doForceRefreshSelection(editor); - } -}; -var __glob_0_2$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addArtBoard -}, Symbol.toStringTag, { value: "Module" })); -var addBackgroundColor = { - command: "addBackgroundColor", - execute: function(editor, color2, id = null) { - editor.context.commands.executeCommand("setAttribute", "add background color", editor.context.selection.packByValue({ - backgroundColor: color2 - }, id)); - } -}; -var __glob_0_3$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addBackgroundColor -}, Symbol.toStringTag, { value: "Module" })); -var addBackgroundImageAsset = { - command: "addBackgroundImageAsset", - execute: function(editor, url, id = null) { - var items = editor.context.selection.itemsByIds(id); - let itemsMap = {}; - items.forEach((item) => { - let images = BackgroundImage.parseStyle(STRING_TO_CSS(item.backgroundImage)); - images.unshift(new BackgroundImage({ - image: new URLImageResource({ url }) - })); - itemsMap[item.id] = { - "background-image": BackgroundImage.join(images) - }; - }); - editor.context.commands.emit("history.setAttribute", "add background image", itemsMap); - } -}; -var __glob_0_4$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addBackgroundImageAsset -}, Symbol.toStringTag, { value: "Module" })); -var addBackgroundImageGradient = { - command: "addBackgroundImageGradient", - execute: function(editor, gradient2, id = null) { - var items = editor.context.selection.itemsByIds(id); - let itemsMap = {}; - items.forEach((item) => { - let images = BackgroundImage.parseStyle(STRING_TO_CSS(item.backgroundImage)); - images.unshift(new BackgroundImage({ - image: BackgroundImage.parseImage(gradient2) - })); - itemsMap[item.id] = { - "background-image": BackgroundImage.join(images) - }; - }); - editor.context.commands.emit("history.setAttribute", "add gradient", itemsMap); - } -}; -var __glob_0_5$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addBackgroundImageGradient -}, Symbol.toStringTag, { value: "Module" })); -const MAX_CACHE_COUNT$1 = 1e3; -const cachedPatternMap = /* @__PURE__ */ new Map(); -class PatternCache { - static has(key) { - return cachedPatternMap.has(key); - } - static get(key) { - return cachedPatternMap.get(key); - } - static set(key, parsedValue) { - if (cachedPatternMap.size > MAX_CACHE_COUNT$1) { - cachedPatternMap.clear(); - } - cachedPatternMap.set(key, parsedValue); - } -} -const customFuncMap = { - check: makeGroupFunction("check"), - grid: makeGroupFunction("grid"), - dot: makeGroupFunction("dot"), - "cross-dot": makeGroupFunction("cross-dot"), - "diagonal-line": makeGroupFunction("diagonal-line"), - "vertical-line": makeGroupFunction("vertical-line"), - "horizontal-line": makeGroupFunction("horizontal-line") -}; -class Pattern extends PropertyItem { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "pattern" - }, obj2)); - } - toString() { - return `${this.json.type}(${this.json.value || ""})`; - } - static parse(obj2) { - var PatternClass = PatternClassName[obj2.type]; - if (PatternClass) { - return new PatternClass(obj2); - } - } - static parseStyle(pattern) { - var patterns2 = []; - if (!pattern || pattern === "undefined") - return patterns2; - pattern = pattern.trim(); - if (PatternCache.has(pattern)) { - return PatternCache.get(pattern); - } - const result = parseValue(pattern, { - customFuncMap - }); - result.forEach((item, index2) => { - const [ - size2, - position2, - foreColor, - backColor, - blendMode = [{ matchedString: "normal" }], - lineSize = [ - { parsed: Length.parse("1px") }, - { parsed: Length.parse("1px") } - ] - ] = item.parameters; - patterns2[index2] = Pattern.parse({ - type: item.type, - x: position2[0].parsed, - y: position2[1].parsed, - width: size2[0].parsed, - height: size2[1].parsed, - foreColor: foreColor[0].matchedString, - backColor: backColor[0].matchedString, - blendMode: blendMode[0].matchedString, - lineWidth: lineSize[0].parsed, - lineHeight: lineSize[1].parsed - }); - }); - PatternCache.set(pattern, patterns2); - return patterns2; - } - static join(list2) { - return list2.map((it) => Pattern.parse(it)).join(" "); - } - static toCSS(str) { - let list2 = []; - Pattern.parseStyle(str).forEach((it) => { - list2.push.apply(list2, BackgroundImage.parseStyle(STRING_TO_CSS(it.toCSS()))); - }); - return BackgroundImage.joinCSS(list2); - } -} -class BasePattern extends Pattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "base", - x: 0, - y: 0, - width: 20, - height: 20, - lineWidth: 1, - lineHeight: 1, - foreColor: "black", - backColor: "white", - blendMode: "normal" - }); - } - convert(json) { - json = super.convert(json); - json.width = Length.parse(json.width); - json.height = Length.parse(json.height); - json.lineWidth = Length.parse(json.lineWidth); - json.lineHeight = Length.parse(json.lineHeight); - json.x = Length.parse(json.x); - json.y = Length.parse(json.y); - return json; - } - toString() { - var { - type, - width: width2, - height: height2, - x, - y, - foreColor, - backColor, - blendMode, - lineWidth, - lineHeight - } = this.json; - return `${type}(${width2} ${height2}, ${x} ${y}, ${foreColor}, ${backColor}, ${blendMode}, ${lineWidth} ${lineHeight})`; - } -} -class CheckPattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "check" - }); - } - toCSS() { - let { width: width2, height: height2, x, y, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: repeating-linear-gradient(45deg, ${foreColor} 25%, ${backColor} 25%, ${backColor} 75%, ${foreColor} 75%, ${foreColor} 100%),repeating-linear-gradient(45deg, ${foreColor} 25%, ${backColor} 25%, ${backColor} 75%, ${foreColor} 75%, ${foreColor} 100%); - background-position: 0px 0px, ${x} ${y}; - background-size: ${width2} ${height2}, ${width2} ${height2}; - background-blend-mode: ${blendMode}, ${blendMode}; - `; - } -} -class GridPattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "grid" - }); - } - toCSS() { - let { - width: width2, - height: height2, - lineWidth, - lineHeight, - backColor, - foreColor, - blendMode - } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: linear-gradient(to bottom,${foreColor} ${lineHeight}, ${backColor} ${lineHeight}),linear-gradient(to right, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); - background-size: ${width2 / 2}px ${height2 / 2}px, ${width2 / 2}px ${height2 / 2}px; - background-blend-mode: ${blendMode}, ${blendMode}; - `; - } -} -class DotPattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "dot" - }); - } - toCSS() { - let { width: width2, height: height2, lineWidth, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); - background-size: ${width2 / 2}px ${height2 / 2}px; - background-blend-mode: ${blendMode}; - `; - } -} -class CrossDotPattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "cross-dot" - }); - } - toCSS() { - let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}),radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); - background-size: ${width2} ${height2},${width2} ${height2}; - background-position: 0px 0px, ${x} ${y}; - background-blend-mode: multiply, ${blendMode}; - `; - } -} -class DiagonalLinePattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "diagonal-line" - }); - } - toCSS() { - let { width: width2, height: height2, x, lineWidth, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: repeating-linear-gradient(${x}, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} 0px, ${backColor} 50%); - background-size: ${width2} ${height2}; - background-blend-mode: ${blendMode}; - `; - } -} -class VerticalLinePattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "vertical-line" - }); - } - toCSS() { - let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: repeating-linear-gradient(to right, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}, ${backColor} 100%); - background-size: ${width2} ${height2}; - background-position: ${x} ${y}; - background-blend-mode: ${blendMode}; - `; - } -} -class HorizontalLinePattern extends BasePattern { - getDefaultObject() { - return super.getDefaultObject({ - type: "horizontal-line" - }); - } - toCSS() { - let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; - backColor = backColor || "transparent"; - foreColor = foreColor || "black"; - return ` - background-image: repeating-linear-gradient( to bottom, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}, ${backColor} 100%); - background-position: ${x} ${y}; - background-size: ${width2} ${height2}; - background-blend-mode: ${blendMode}; - `; - } -} -const PatternClassName = { - check: CheckPattern, - grid: GridPattern, - dot: DotPattern, - "cross-dot": CrossDotPattern, - "diagonal-line": DiagonalLinePattern, - "vertical-line": VerticalLinePattern, - "horizontal-line": HorizontalLinePattern -}; -var addBackgroundImagePattern = { - command: "addBackgroundImagePattern", - execute: function(editor, pattern, id = null) { - var items = editor.context.selection.itemsByIds(id); - let itemsMap = {}; - items.forEach((item) => { - itemsMap[item.id] = { - pattern: Pattern.join([ - ...Pattern.parseStyle(pattern), - ...Pattern.parseStyle(item.pattern) - ]) - }; - }); - editor.context.commands.emit("history.setAttribute", "add pattern", itemsMap); - } -}; -var __glob_0_6$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addBackgroundImagePattern -}, Symbol.toStringTag, { value: "Module" })); -function addCustomComponent(editor, obj2 = {}, center2 = null) { - var project2 = editor.context.selection.currentProject; - var customComponent = project2.appendChild(editor.createModel(__spreadValues({ - x: 300, - y: 200, - width: 375, - height: 667 - }, obj2))); - if (center2) { - customComponent.reset({ - x: 0, - y: 0 - }); - customComponent.moveByCenter(center2); - } - editor.context.selection.select(customComponent); - _doForceRefreshSelection(editor); -} -var __glob_0_7$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addCustomComponent -}, Symbol.toStringTag, { value: "Module" })); -function addImage(editor, rect2 = {}, containerItem = void 0) { - editor.context.commands.emit("newComponent", "image", rect2, true, containerItem); -} -var __glob_0_8$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addImage -}, Symbol.toStringTag, { value: "Module" })); -function loadOriginalImage(obj2, callback) { - var img = new window.Image(); - img.onload = () => { - var info = { - id: obj2.id, - local: obj2.local, - naturalWidth: img.naturalWidth, - naturalHeight: img.naturalHeight, - width: img.naturalWidth, - height: img.naturalHeight - }; - callback && callback(info, img); - }; - img.onerror = (e) => { - console.log(e, e.message); - }; - img.src = obj2.local; -} -var addImageAssetItem = { - command: "addImageAssetItem", - execute: function(editor, imageObject, rect2 = {}, containerItem = void 0) { - var project2 = editor.context.selection.currentProject; - if (project2) { - project2.createImage(imageObject); - editor.context.commands.emit("addImageAsset"); - loadOriginalImage(imageObject, (info) => { - const rate = rect2.width / info.width; - const width2 = rect2.width; - const height2 = info.height * rate; - editor.context.commands.emit("addImage", __spreadProps(__spreadValues(__spreadValues({ - src: imageObject.id - }, info), rect2), { - width: width2, - height: height2 - }), containerItem); - }); - } - } -}; -var __glob_0_9$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addImageAssetItem -}, Symbol.toStringTag, { value: "Module" })); -function addLayer(editor, layer, isSelected = true, containerItem) { - if (!containerItem) { - containerItem = editor.context.selection.current || editor.context.selection.currentProject; - } - if (containerItem) { - if (containerItem.isNot("project") && !containerItem.enableHasChildren()) { - containerItem = containerItem.parent; - } - containerItem.appendChild(layer); - if (isSelected) { - editor.context.selection.select(layer); - } - _doForceRefreshSelection(editor); - } -} -var __glob_0_10$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addLayer -}, Symbol.toStringTag, { value: "Module" })); -var addLayerView = { - command: "addLayerView", - execute: async function(editor, type, data = {}) { - editor.context.selection.empty(); - await editor.emit("hideAddViewLayer"); - await editor.emit("removeGuideLine"); - editor.context.config.set("editing.mode.itemType", type); - if (type === "select") { - editor.context.selection.empty(); - editor.context.config.set("editing.mode", EditingMode.SELECT); - } else if (type === "brush") { - editor.context.config.set("editing.mode", EditingMode.DRAW); - await editor.emit("showPathDrawEditor"); - } else if (type === "path") { - editor.context.config.set("editing.mode", EditingMode.PATH); - await editor.emit("showPathEditor", "path"); - } else { - editor.context.config.set("editing.mode", EditingMode.APPEND); - await editor.emit("showLayerAppendView", type, data); - } - } -}; -var __glob_0_11$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addLayerView -}, Symbol.toStringTag, { value: "Module" })); -function addProject(editor, obj2 = {}) { - var project2 = editor.createModel(__spreadValues({ - itemType: "project" - }, obj2)); - editor.context.selection.selectProject(project2); - _doForceRefreshSelection(editor); -} -var __glob_0_12$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addProject -}, Symbol.toStringTag, { value: "Module" })); -var addSVGFilterAssetItem = { - command: "addSVGFilterAssetItem", - execute: function(editor, callback) { - var project2 = editor.context.selection.currentProject; - if (project2) { - var id = uuidShort(); - var index2 = project2.createSVGFilter({ id, filters: [] }); - callback && callback(index2, id); - } - } -}; -var __glob_0_13$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addSVGFilterAssetItem -}, Symbol.toStringTag, { value: "Module" })); -function addText(editor, rect2 = {}) { - editor.context.commands.emit("newComponent", "text", __spreadValues({ - content: "Insert a text", - width: 300, - height: 50, - "font-size": 30 - }, rect2), rect2); -} -var __glob_0_14$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addText -}, Symbol.toStringTag, { value: "Module" })); -var addTimelineCurrentProperty = { - command: "addTimelineCurrentProperty", - execute: function(editor, options2 = { timing: "linear" }) { - _currentProject(editor, (project2) => { - var list2 = []; - editor.context.selection.each((item) => { - var keyframeObj = { - layerId: item.id, - property: options2.property, - value: item[options2.property] + "", - timing: options2.timing, - editor: options2.editor - }; - var obj2 = project2.addTimelineKeyframe(keyframeObj); - if (obj2) { - list2.push(obj2); - } - }); - editor.context.timeline.select(...list2); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - }); - } -}; -var __glob_0_15$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addTimelineCurrentProperty -}, Symbol.toStringTag, { value: "Module" })); -var addTimelineItem = { - command: "addTimelineItem", - execute: function(editor, layerId) { - _currentProject(editor, (project2) => { - if (layerId) { - project2.addTimelineLayer(layerId); - } else { - project2.addTimeline(); - } - editor.emit("refreshTimeline"); - editor.emit("addTimeline"); - }); - } -}; -var __glob_0_16$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var addTimelineKeyframe = { - command: "addTimelineKeyframe", - execute: function(editor, options2 = { timing: "linear" }) { - _currentProject(editor, (project2) => { - var item = editor.context.modelManager.get(options2.layerId); - var keyframeObj = { - layerId: options2.layerId, - property: options2.property, - time: options2.time, - value: item[options2.property] + "", - timing: options2.timing, - editor: options2.editor - }; - var obj2 = project2.addTimelineKeyframe(keyframeObj); - editor.timeline.select(obj2); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - }); - } -}; -var __glob_0_17$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addTimelineKeyframe -}, Symbol.toStringTag, { value: "Module" })); -var addTimelineProperty = { - command: "addTimelineProperty", - execute: function(editor, layerList, options2 = { timing: "linear" }) { - _currentProject(editor, (project2) => { - if (Array.isArray(layerList) === false) { - layerList = [layerList]; - } - var list2 = []; - layerList.forEach((layerId) => { - var keyframeObj = { - layerId, - property: options2.property, - value: options2.value + "", - timing: options2.timing, - editor: options2.editor - }; - var obj2 = project2.addTimelineKeyframe(keyframeObj); - if (obj2) { - list2.push(obj2); - } - }); - editor.timeline.select(...list2); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - }); - } -}; -var __glob_0_18$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addTimelineProperty -}, Symbol.toStringTag, { value: "Module" })); -function addVideo(editor, rect2 = {}, containerItem = void 0) { - editor.context.commands.emit("newComponent", "video", rect2, true, containerItem); -} -var __glob_0_19$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addVideo -}, Symbol.toStringTag, { value: "Module" })); -function loadOriginalVideo(obj2, callback) { - var video2 = document.createElement("video"); - video2.onloadeddata = () => { - var info = { - local: obj2.local, - naturalWidth: video2.videoWidth, - naturalHeight: video2.videoHeight, - width: video2.videoWidth, - height: video2.videoHeight, - duration: video2.duration, - playTime: `0:1:${video2.duration}`, - volume: video2.volume, - muted: video2.muted, - placebackRate: video2.playbackRate - }; - callback && callback(info, video2); - }; - video2.src = obj2.local; -} -var addVideoAssetItem = { - command: "addVideoAssetItem", - execute: function(editor, videoObject, rect2 = {}, containerItem = void 0) { - var project2 = editor.context.selection.currentProject; - if (project2) { - project2.createVideo(videoObject); - editor.emit("addVideoAsset"); - loadOriginalVideo(videoObject, (info) => { - editor.context.commands.emit("addVideo", __spreadValues(__spreadValues({ src: videoObject.id }, info), rect2), containerItem); - }); - } - } -}; -var __glob_0_20$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addVideoAssetItem -}, Symbol.toStringTag, { value: "Module" })); -var clipboard_copy = { - command: "clipboard.copy", - title: "Copy", - description: "Copy", - execute: function(editor) { - editor.context.clipboard.push({ - type: ClipboardActionType.COPY, - data: editor.context.selection.ids - }); - } -}; -var __glob_0_21$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": clipboard_copy -}, Symbol.toStringTag, { value: "Module" })); -var clipboard_paste = { - command: "clipboard.paste", - execute: async function(editor) { - if (!editor.context.clipboard.isEmpty) { - editor.context.commands.emit("history.clipboard.paste", "paste"); - } else { - var text2 = await window.navigator.clipboard.readText(); - if (text2) { - editor.context.commands.emit("convertPasteText", text2); - } - } - } -}; -var __glob_0_22$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": clipboard_paste -}, Symbol.toStringTag, { value: "Module" })); -var convert_flatten_path = { - command: "convert.flatten.path", - description: "flatten selected multi path", - execute: (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - let newPath; - if (current.is("boolean-path") || current.isBooleanItem) { - let parent = current; - if (current.isBooleanItem) { - parent = current.parent; - } - newPath = parent.absolutePath(parent["boolean-path"]); - newPath = parent.invertPath(newPath.d); - const newLayerAttrs = parent.layers[0].toCloneObject(); - delete newLayerAttrs.id; - delete newLayerAttrs.parentId; - delete newLayerAttrs.transform; - delete newLayerAttrs["boolean-path"]; - delete newLayerAttrs["boolean-operation"]; - const parentParent = parent.parent; - const newRectInfo = parent.updatePath(newPath.d); - editor.context.commands.executeCommand("removeLayer", "remove selected layers", [parent.id]); - editor.nextTick(() => { - editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, newLayerAttrs), newRectInfo)), true, parentParent); - }); - } else { - newPath = PathParser.fromSVGString(); - editor.context.selection.each((item) => { - newPath.addPath(item.absolutePath()); - }); - newPath = current.invertPath(newPath.d); - const parent = current.parent; - const newPathInfo = current.updatePath(newPath.d); - const newLayerAttrs = current.toCloneObject(); - delete newLayerAttrs.id; - editor.context.commands.executeCommand("removeLayer", "remove selected layers"); - editor.nextTick(() => { - editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, newLayerAttrs), newPathInfo)), true, parent); - }); - } - } -}; -var __glob_0_23$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_flatten_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_no_transform_path = { - command: "convert.no.transform.path", - description: "remove transform(rotate, translate, scale) inforation in path layer", - execute: (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - const parent = current.parent; - const childPath = current.absolutePath(); - if (parent.is("project")) { - const verties = childPath.getBBox(); - const newRect = vertiesToRectangle(verties); - editor.context.commands.executeCommand("setAttribute", "remove transform for path", editor.context.selection.packByValue(__spreadProps(__spreadValues({}, newRect), { - rotate: 0, - d: childPath.d - }))); - } else { - childPath.transformMat4(parent.absoluteMatrixInverse); - const newRect = parent.updatePath(childPath.d); - editor.context.commands.executeCommand("setAttribute", "remove transform for path", editor.context.selection.packByValue(__spreadProps(__spreadValues({}, newRect), { - rotate: 0, - d: childPath.d - }))); - } - } -}; -var __glob_0_24 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_no_transform_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_normalize_path = { - command: "convert.normalize.path", - description: "convert segments to bezier curve", - execute: (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - editor.context.commands.executeCommand("setAttribute", "normalize path string", editor.context.selection.packByValue(current.updatePath(PathParser.fromSVGString(current.d).normalize().d))); - } -}; -var __glob_0_25 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_normalize_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_path_operation = { - command: "convert.path.operation", - description: "apply path boolean operation", - execute: (editor, booleanOperation) => { - var _a; - const current = editor.context.selection.current; - if (!current) - return; - const changeBooleanOperation = (booleanOperation2) => { - editor.context.commands.executeCommand("setAttribute", "change boolean operation", editor.context.selection.packByValue({ - booleanOperation: booleanOperation2 - })); - recoverBooleanPath2(); - }; - const recoverBooleanPath2 = () => { - editor.nextTick(() => { - editor.context.commands.emit("recoverBooleanPath"); - editor.nextTick(() => { - editor.emit(REFRESH_SELECTION); - }); - }); - }; - if (current.is("boolean-path") || current.isBooleanItem) { - let parent = current; - if (current.isBooleanItem) { - parent = current.parent; - } - editor.context.selection.select(parent); - changeBooleanOperation(booleanOperation); - } else { - if ((_a = editor.context.selection.current) == null ? void 0 : _a.isNot("boolean-path")) { - editor.context.commands.emit("group.item", { - itemType: "boolean-path", - title: "Intersection" - }); - } - editor.nextTick(() => { - var _a2; - if ((_a2 = editor.context.selection.current) == null ? void 0 : _a2.is("boolean-path")) { - changeBooleanOperation(booleanOperation); - } - }, 10); - } - } -}; -var __glob_0_26 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_path_operation -}, Symbol.toStringTag, { value: "Module" })); -var convert_polygonal_path = { - command: "convert.polygonal.path", - description: "convert path to polygonal path", - execute: (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - editor.context.commands.executeCommand("setAttribute", "polygonal path string", editor.context.selection.packByValue(current.updatePath(PathParser.fromSVGString(current.d).polygonal().d))); - } -}; -var __glob_0_27 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_polygonal_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_simplify_path = { - command: "convert.simplify.path", - execute: (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - editor.context.commands.executeCommand("setAttribute", "change path string", editor.context.selection.packByValue(current.updatePath(editor.pathKitManager.simplify(current.d)))); - } -}; -var __glob_0_28 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_simplify_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_smooth_path = { - command: "convert.smooth.path", - description: "convert path to smooth", - execute: (editor, divideCount = 5, tolerance = 0.1, tension = 0.5) => { - const current = editor.context.selection.current; - if (!current) - return; - const smoothedPath = PathParser.fromSVGString(current.d).divideSegmentByCount(divideCount).simplify(tolerance).cardinalSplines(tension).d; - editor.context.commands.executeCommand("setAttribute", "smooth path string", editor.context.selection.packByValue(current.updatePath(smoothedPath))); - } -}; -var __glob_0_29 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_smooth_path -}, Symbol.toStringTag, { value: "Module" })); -var convert_stroke_to_path = { - command: "convert.stroke.to.path", - execute: async (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - const attrs = current.attrs("d", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linejoin", "stroke-linecap"); - const pathAttrs = current.convertStrokeToPath(); - let newD = editor.pathKitManager.stroke(current.d || attrs.d, { - "stroke-width": Length.parse(attrs["stroke-width"]).value, - "stroke-linejoin": attrs["stroke-linejoin"], - "stroke-linecap": attrs["stroke-linecap"], - "stroke-dasharray": attrs["stroke-dasharray"], - "stroke-dashoffset": attrs["stroke-dashoffset"], - "fill-rule": "nonezero" - }); - pathAttrs["fill-rule"] = "nonzero"; - newD = PathParser.fromSVGString(newD).reversePathStringByFunc((_, index2) => index2 % 2 === 0); - editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, pathAttrs), current.updatePath(newD))), true, current.parent); - } -}; -var __glob_0_30 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convert_stroke_to_path -}, Symbol.toStringTag, { value: "Module" })); -var jsVideoUrlParser = { exports: {} }; -(function(module, exports) { - (function(global2, factory) { - module.exports = factory(); - })(commonjsGlobal, function() { - function _typeof(obj2) { - "@babel/helpers - typeof"; - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function(obj3) { - return typeof obj3; - }; - } else { - _typeof = function(obj3) { - return obj3 && typeof Symbol === "function" && obj3.constructor === Symbol && obj3 !== Symbol.prototype ? "symbol" : typeof obj3; - }; - } - return _typeof(obj2); - } - var getQueryParams = function getQueryParams2(qs) { - if (typeof qs !== "string") { - return {}; - } - qs = qs.split("+").join(" "); - var params = {}; - var match = qs.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/); - var split; - if (match === null) { - return {}; - } - split = match[0].substr(1).split(/[&#=]/); - for (var i = 0; i < split.length; i += 2) { - params[decodeURIComponent(split[i])] = decodeURIComponent(split[i + 1] || ""); - } - return params; - }; - var combineParams = function combineParams2(params, hasParams) { - if (_typeof(params) !== "object") { - return ""; - } - var combined = ""; - var i = 0; - var keys2 = Object.keys(params); - if (keys2.length === 0) { - return ""; - } - keys2.sort(); - if (!hasParams) { - combined += "?" + keys2[0] + "=" + params[keys2[0]]; - i += 1; - } - for (; i < keys2.length; i += 1) { - combined += "&" + keys2[i] + "=" + params[keys2[i]]; - } - return combined; - }; - function getLetterTime(timeString) { - var totalSeconds = 0; - var timeValues = { - "s": 1, - "m": 1 * 60, - "h": 1 * 60 * 60, - "d": 1 * 60 * 60 * 24, - "w": 1 * 60 * 60 * 24 * 7 - }; - var timePairs; - timeString = timeString.replace(/([smhdw])/g, " $1 ").trim(); - timePairs = timeString.split(" "); - for (var i = 0; i < timePairs.length; i += 2) { - totalSeconds += parseInt(timePairs[i], 10) * timeValues[timePairs[i + 1] || "s"]; - } - return totalSeconds; - } - function getColonTime(timeString) { - var totalSeconds = 0; - var timeValues = [1, 1 * 60, 1 * 60 * 60, 1 * 60 * 60 * 24, 1 * 60 * 60 * 24 * 7]; - var timePairs = timeString.split(":"); - for (var i = 0; i < timePairs.length; i++) { - totalSeconds += parseInt(timePairs[i], 10) * timeValues[timePairs.length - i - 1]; - } - return totalSeconds; - } - var getTime = function getTime2(timeString) { - if (typeof timeString === "undefined") { - return 0; - } - if (timeString.match(/^(\d+[smhdw]?)+$/)) { - return getLetterTime(timeString); - } - if (timeString.match(/^(\d+:?)+$/)) { - return getColonTime(timeString); - } - return 0; - }; - var util = { - getQueryParams, - combineParams, - getTime - }; - var getQueryParams$1 = util.getQueryParams; - function UrlParser() { - for (var _i = 0, _arr = ["parseProvider", "parse", "bind", "create"]; _i < _arr.length; _i++) { - var key = _arr[_i]; - this[key] = this[key].bind(this); - } - this.plugins = {}; - } - var urlParser2 = UrlParser; - UrlParser.prototype.parseProvider = function(url) { - var match = url.match(/(?:(?:https?:)?\/\/)?(?:[^.]+\.)?(\w+)\./i); - return match ? match[1] : void 0; - }; - UrlParser.prototype.parse = function(url) { - if (typeof url === "undefined") { - return void 0; - } - var provider = this.parseProvider(url); - var result; - var plugin2 = this.plugins[provider]; - if (!provider || !plugin2 || !plugin2.parse) { - return void 0; - } - result = plugin2.parse.call(plugin2, url, getQueryParams$1(url)); - if (result) { - result = removeEmptyParameters(result); - result.provider = plugin2.provider; - } - return result; - }; - UrlParser.prototype.bind = function(plugin2) { - this.plugins[plugin2.provider] = plugin2; - if (plugin2.alternatives) { - for (var i = 0; i < plugin2.alternatives.length; i += 1) { - this.plugins[plugin2.alternatives[i]] = plugin2; - } - } - }; - UrlParser.prototype.create = function(op) { - if (_typeof(op) !== "object" || _typeof(op.videoInfo) !== "object") { - return void 0; - } - var vi = op.videoInfo; - var params = op.params; - var plugin2 = this.plugins[vi.provider]; - params = params === "internal" ? vi.params : params || {}; - if (plugin2) { - op.format = op.format || plugin2.defaultFormat; - if (plugin2.formats.hasOwnProperty(op.format)) { - return plugin2.formats[op.format].apply(plugin2, [vi, Object.assign({}, params)]); - } - } - return void 0; - }; - function removeEmptyParameters(result) { - if (result.params && Object.keys(result.params).length === 0) { - delete result.params; - } - return result; - } - var parser = new urlParser2(); - var base = parser; - var combineParams$1 = util.combineParams; - function CanalPlus() { - this.provider = "canalplus"; - this.defaultFormat = "embed"; - this.formats = { - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - CanalPlus.prototype.parseParameters = function(params) { - delete params.vid; - return params; - }; - CanalPlus.prototype.parse = function(url, params) { - var _this = this; - var result = { - mediaType: this.mediaTypes.VIDEO, - id: params.vid - }; - result.params = _this.parseParameters(params); - if (!result.id) { - return void 0; - } - return result; - }; - CanalPlus.prototype.createEmbedUrl = function(vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = "http://player.canalplus.fr/embed/"; - params.vid = vi.id; - url += combineParams$1(params); - return url; - }; - base.bind(new CanalPlus()); - var combineParams$2 = util.combineParams; - function Coub() { - this.provider = "coub"; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - Coub.prototype.parseUrl = function(url) { - var match = url.match(/(?:embed|view)\/([a-zA-Z\d]+)/i); - return match ? match[1] : void 0; - }; - Coub.prototype.parse = function(url, params) { - var result = { - mediaType: this.mediaTypes.VIDEO, - params, - id: this.parseUrl(url) - }; - if (!result.id) { - return void 0; - } - return result; - }; - Coub.prototype.createUrl = function(baseUrl, vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = baseUrl + vi.id; - url += combineParams$2(params); - return url; - }; - Coub.prototype.createLongUrl = function(vi, params) { - return this.createUrl("https://coub.com/view/", vi, params); - }; - Coub.prototype.createEmbedUrl = function(vi, params) { - return this.createUrl("//coub.com/embed/", vi, params); - }; - base.bind(new Coub()); - var combineParams$3 = util.combineParams, getTime$1 = util.getTime; - function Dailymotion() { - this.provider = "dailymotion"; - this.alternatives = ["dai"]; - this.defaultFormat = "long"; - this.formats = { - "short": this.createShortUrl, - "long": this.createLongUrl, - embed: this.createEmbedUrl, - image: this.createImageUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - Dailymotion.prototype.parseParameters = function(params) { - return this.parseTime(params); - }; - Dailymotion.prototype.parseTime = function(params) { - if (params.start) { - params.start = getTime$1(params.start); - } - return params; - }; - Dailymotion.prototype.parseUrl = function(url) { - var match = url.match(/(?:\/video|ly)\/([A-Za-z0-9]+)/i); - return match ? match[1] : void 0; - }; - Dailymotion.prototype.parse = function(url, params) { - var _this = this; - var result = { - mediaType: this.mediaTypes.VIDEO, - params: _this.parseParameters(params), - id: _this.parseUrl(url) - }; - return result.id ? result : void 0; - }; - Dailymotion.prototype.createUrl = function(base2, vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - return base2 + vi.id + combineParams$3(params); - }; - Dailymotion.prototype.createShortUrl = function(vi, params) { - return this.createUrl("https://dai.ly/", vi, params); - }; - Dailymotion.prototype.createLongUrl = function(vi, params) { - return this.createUrl("https://dailymotion.com/video/", vi, params); - }; - Dailymotion.prototype.createEmbedUrl = function(vi, params) { - return this.createUrl("https://www.dailymotion.com/embed/video/", vi, params); - }; - Dailymotion.prototype.createImageUrl = function(vi, params) { - delete params.start; - return this.createUrl("https://www.dailymotion.com/thumbnail/video/", vi, params); - }; - base.bind(new Dailymotion()); - var combineParams$4 = util.combineParams, getTime$2 = util.getTime; - function Twitch() { - this.provider = "twitch"; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video", - STREAM: "stream", - CLIP: "clip" - }; - } - Twitch.prototype.seperateId = function(id) { - return { - pre: id[0], - id: id.substr(1) - }; - }; - Twitch.prototype.parseChannel = function(result, params) { - var channel = params.channel || params.utm_content || result.channel; - delete params.utm_content; - delete params.channel; - return channel; - }; - Twitch.prototype.parseUrl = function(url, result, params) { - var match; - match = url.match(/(clips\.)?twitch\.tv\/(?:(?:videos\/(\d+))|(\w+)(?:\/clip\/(\w+))?)/i); - if (match && match[2]) { - result.id = "v" + match[2]; - } else if (params.video) { - result.id = params.video; - delete params.video; - } else if (params.clip) { - result.id = params.clip; - result.isClip = true; - delete params.clip; - } else if (match && match[1] && match[3]) { - result.id = match[3]; - result.isClip = true; - } else if (match && match[3] && match[4]) { - result.channel = match[3]; - result.id = match[4]; - result.isClip = true; - } else if (match && match[3]) { - result.channel = match[3]; - } - return result; - }; - Twitch.prototype.parseMediaType = function(result) { - var mediaType; - if (result.id) { - if (result.isClip) { - mediaType = this.mediaTypes.CLIP; - delete result.isClip; - } else { - mediaType = this.mediaTypes.VIDEO; - } - } else if (result.channel) { - mediaType = this.mediaTypes.STREAM; - } - return mediaType; - }; - Twitch.prototype.parseParameters = function(params) { - if (params.t) { - params.start = getTime$2(params.t); - delete params.t; - } - return params; - }; - Twitch.prototype.parse = function(url, params) { - var _this = this; - var result = {}; - result = _this.parseUrl(url, result, params); - result.channel = _this.parseChannel(result, params); - result.mediaType = _this.parseMediaType(result); - result.params = _this.parseParameters(params); - return result.channel || result.id ? result : void 0; - }; - Twitch.prototype.createLongUrl = function(vi, params) { - var url = ""; - if (vi.mediaType === this.mediaTypes.STREAM && vi.channel) { - url = "https://twitch.tv/" + vi.channel; - } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - var sep = this.seperateId(vi.id); - url = "https://twitch.tv/videos/" + sep.id; - if (params.start) { - params.t = params.start + "s"; - delete params.start; - } - } else if (vi.mediaType === this.mediaTypes.CLIP && vi.id) { - if (vi.channel) { - url = "https://www.twitch.tv/" + vi.channel + "/clip/" + vi.id; - } else { - url = "https://clips.twitch.tv/" + vi.id; - } - } else { - return void 0; - } - url += combineParams$4(params); - return url; - }; - Twitch.prototype.createEmbedUrl = function(vi, params) { - var url = "https://player.twitch.tv/"; - if (vi.mediaType === this.mediaTypes.STREAM && vi.channel) { - params.channel = vi.channel; - } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - params.video = vi.id; - if (params.start) { - params.t = params.start + "s"; - delete params.start; - } - } else if (vi.mediaType === this.mediaTypes.CLIP && vi.id) { - url = "https://clips.twitch.tv/embed"; - params.clip = vi.id; - } else { - return void 0; - } - url += combineParams$4(params); - return url; - }; - base.bind(new Twitch()); - var combineParams$5 = util.combineParams, getTime$3 = util.getTime; - function Vimeo() { - this.provider = "vimeo"; - this.alternatives = ["vimeopro"]; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - Vimeo.prototype.parseUrl = function(url) { - var match = url.match(/(?:\/(?:channels\/[\w]+|(?:(?:album\/\d+|groups\/[\w]+)\/)?videos?))?\/(\d+)/i); - return match ? match[1] : void 0; - }; - Vimeo.prototype.parseParameters = function(params) { - return this.parseTime(params); - }; - Vimeo.prototype.parseTime = function(params) { - if (params.t) { - params.start = getTime$3(params.t); - delete params.t; - } - return params; - }; - Vimeo.prototype.parse = function(url, params) { - var result = { - mediaType: this.mediaTypes.VIDEO, - params: this.parseParameters(params), - id: this.parseUrl(url) - }; - return result.id ? result : void 0; - }; - Vimeo.prototype.createUrl = function(baseUrl, vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = baseUrl + vi.id; - var startTime = params.start; - delete params.start; - url += combineParams$5(params); - if (startTime) { - url += "#t=" + startTime; - } - return url; - }; - Vimeo.prototype.createLongUrl = function(vi, params) { - return this.createUrl("https://vimeo.com/", vi, params); - }; - Vimeo.prototype.createEmbedUrl = function(vi, params) { - return this.createUrl("//player.vimeo.com/video/", vi, params); - }; - base.bind(new Vimeo()); - var combineParams$6 = util.combineParams, getTime$4 = util.getTime; - function Wistia() { - this.provider = "wistia"; - this.alternatives = []; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl, - embedjsonp: this.createEmbedJsonpUrl - }; - this.mediaTypes = { - VIDEO: "video", - EMBEDVIDEO: "embedvideo" - }; - } - Wistia.prototype.parseUrl = function(url) { - var match = url.match(/(?:(?:medias|iframe)\/|wvideo=)([\w-]+)/); - return match ? match[1] : void 0; - }; - Wistia.prototype.parseChannel = function(url) { - var match = url.match(/(?:(?:https?:)?\/\/)?([^.]*)\.wistia\./); - var channel = match ? match[1] : void 0; - if (channel === "fast" || channel === "content") { - return void 0; - } - return channel; - }; - Wistia.prototype.parseParameters = function(params, result) { - if (params.wtime) { - params.start = getTime$4(params.wtime); - delete params.wtime; - } - if (params.wvideo === result.id) { - delete params.wvideo; - } - return params; - }; - Wistia.prototype.parseMediaType = function(result) { - if (result.id && result.channel) { - return this.mediaTypes.VIDEO; - } else if (result.id) { - delete result.channel; - return this.mediaTypes.EMBEDVIDEO; - } else { - return void 0; - } - }; - Wistia.prototype.parse = function(url, params) { - var result = { - id: this.parseUrl(url), - channel: this.parseChannel(url) - }; - result.params = this.parseParameters(params, result); - result.mediaType = this.parseMediaType(result); - if (!result.id) { - return void 0; - } - return result; - }; - Wistia.prototype.createUrl = function(vi, params, url) { - if (params.start) { - params.wtime = params.start; - delete params.start; - } - url += combineParams$6(params); - return url; - }; - Wistia.prototype.createLongUrl = function(vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = "https://" + vi.channel + ".wistia.com/medias/" + vi.id; - return this.createUrl(vi, params, url); - }; - Wistia.prototype.createEmbedUrl = function(vi, params) { - if (!vi.id || !(vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.EMBEDVIDEO)) { - return void 0; - } - var url = "https://fast.wistia.com/embed/iframe/" + vi.id; - return this.createUrl(vi, params, url); - }; - Wistia.prototype.createEmbedJsonpUrl = function(vi) { - if (!vi.id || !(vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.EMBEDVIDEO)) { - return void 0; - } - return "https://fast.wistia.com/embed/medias/" + vi.id + ".jsonp"; - }; - base.bind(new Wistia()); - var combineParams$7 = util.combineParams; - function Youku() { - this.provider = "youku"; - this.defaultFormat = "long"; - this.formats = { - embed: this.createEmbedUrl, - "long": this.createLongUrl, - flash: this.createFlashUrl, - "static": this.createStaticUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - Youku.prototype.parseUrl = function(url) { - var match = url.match(/(?:(?:embed|sid)\/|v_show\/id_|VideoIDS=)([a-zA-Z0-9]+)/); - return match ? match[1] : void 0; - }; - Youku.prototype.parseParameters = function(params) { - if (params.VideoIDS) { - delete params.VideoIDS; - } - return params; - }; - Youku.prototype.parse = function(url, params) { - var _this = this; - var result = { - mediaType: this.mediaTypes.VIDEO, - id: _this.parseUrl(url), - params: _this.parseParameters(params) - }; - if (!result.id) { - return void 0; - } - return result; - }; - Youku.prototype.createUrl = function(baseUrl, vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = baseUrl + vi.id; - url += combineParams$7(params); - return url; - }; - Youku.prototype.createEmbedUrl = function(vi, params) { - return this.createUrl("http://player.youku.com/embed/", vi, params); - }; - Youku.prototype.createLongUrl = function(vi, params) { - return this.createUrl("http://v.youku.com/v_show/id_", vi, params); - }; - Youku.prototype.createStaticUrl = function(vi, params) { - return this.createUrl("http://static.youku.com/v1.0.0638/v/swf/loader.swf?VideoIDS=", vi, params); - }; - Youku.prototype.createFlashUrl = function(vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = "http://player.youku.com/player.php/sid/" + vi.id + "/v.swf"; - url += combineParams$7(params); - return url; - }; - base.bind(new Youku()); - var combineParams$8 = util.combineParams, getTime$5 = util.getTime; - function YouTube() { - this.provider = "youtube"; - this.alternatives = ["youtu", "ytimg"]; - this.defaultFormat = "long"; - this.formats = { - "short": this.createShortUrl, - "long": this.createLongUrl, - embed: this.createEmbedUrl, - shortImage: this.createShortImageUrl, - longImage: this.createLongImageUrl - }; - this.imageQualities = { - "0": "0", - "1": "1", - "2": "2", - "3": "3", - DEFAULT: "default", - HQDEFAULT: "hqdefault", - SDDEFAULT: "sddefault", - MQDEFAULT: "mqdefault", - MAXRESDEFAULT: "maxresdefault" - }; - this.defaultImageQuality = this.imageQualities.HQDEFAULT; - this.mediaTypes = { - VIDEO: "video", - PLAYLIST: "playlist", - SHARE: "share", - CHANNEL: "channel" - }; - } - YouTube.prototype.parseVideoUrl = function(url) { - var match = url.match(/(?:(?:v|vi|be|videos|embed)\/(?!videoseries)|(?:v|ci)=)([\w-]{11})/i); - return match ? match[1] : void 0; - }; - YouTube.prototype.parseChannelUrl = function(url) { - var match = url.match(/\/channel\/([\w-]+)/); - if (match) { - return { - id: match[1], - mediaType: this.mediaTypes.CHANNEL - }; - } - match = url.match(/\/(?:c|user)\/([\w-]+)/); - if (match) { - return { - name: match[1], - mediaType: this.mediaTypes.CHANNEL - }; - } - }; - YouTube.prototype.parseParameters = function(params, result) { - if (params.start || params.t) { - params.start = getTime$5(params.start || params.t); - delete params.t; - } - if (params.v === result.id) { - delete params.v; - } - if (params.list === result.id) { - delete params.list; - } - return params; - }; - YouTube.prototype.parseMediaType = function(result) { - if (result.params.list) { - result.list = result.params.list; - delete result.params.list; - } - if (result.id && !result.params.ci) { - result.mediaType = this.mediaTypes.VIDEO; - } else if (result.list) { - delete result.id; - result.mediaType = this.mediaTypes.PLAYLIST; - } else if (result.params.ci) { - delete result.params.ci; - result.mediaType = this.mediaTypes.SHARE; - } else { - return void 0; - } - return result; - }; - YouTube.prototype.parse = function(url, params) { - var channelResult = this.parseChannelUrl(url); - if (channelResult) { - return channelResult; - } else { - var result = { - params, - id: this.parseVideoUrl(url) - }; - result.params = this.parseParameters(params, result); - result = this.parseMediaType(result); - return result; - } - }; - YouTube.prototype.createShortUrl = function(vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = "https://youtu.be/" + vi.id; - if (params.start) { - url += "#t=" + params.start; - } - return url; - }; - YouTube.prototype.createLongUrl = function(vi, params) { - var url = ""; - var startTime = params.start; - delete params.start; - if (vi.mediaType === this.mediaTypes.CHANNEL) { - if (vi.id) { - url += "https://www.youtube.com/channel/" + vi.id; - } else if (vi.name) { - url += "https://www.youtube.com/c/" + vi.name; - } else { - return void 0; - } - } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list) { - params.feature = "share"; - url += "https://www.youtube.com/playlist"; - } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - params.v = vi.id; - url += "https://www.youtube.com/watch"; - } else if (vi.mediaType === this.mediaTypes.SHARE && vi.id) { - params.ci = vi.id; - url += "https://www.youtube.com/shared"; - } else { - return void 0; - } - if (vi.list) { - params.list = vi.list; - } - url += combineParams$8(params); - if (vi.mediaType !== this.mediaTypes.PLAYLIST && startTime) { - url += "#t=" + startTime; - } - return url; - }; - YouTube.prototype.createEmbedUrl = function(vi, params) { - var url = "https://www.youtube.com/embed"; - if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list) { - params.listType = "playlist"; - } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - url += "/" + vi.id; - if (params.loop === "1") { - params.playlist = vi.id; - } - } else { - return void 0; - } - if (vi.list) { - params.list = vi.list; - } - url += combineParams$8(params); - return url; - }; - YouTube.prototype.createImageUrl = function(baseUrl, vi, params) { - if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { - return void 0; - } - var url = baseUrl + vi.id + "/"; - var quality = params.imageQuality || this.defaultImageQuality; - return url + quality + ".jpg"; - }; - YouTube.prototype.createShortImageUrl = function(vi, params) { - return this.createImageUrl("https://i.ytimg.com/vi/", vi, params); - }; - YouTube.prototype.createLongImageUrl = function(vi, params) { - return this.createImageUrl("https://img.youtube.com/vi/", vi, params); - }; - base.bind(new YouTube()); - var combineParams$9 = util.combineParams, getTime$6 = util.getTime; - function SoundCloud() { - this.provider = "soundcloud"; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - TRACK: "track", - PLAYLIST: "playlist", - APITRACK: "apitrack", - APIPLAYLIST: "apiplaylist" - }; - } - SoundCloud.prototype.parseUrl = function(url, result) { - var match = url.match(/(?:m\.)?soundcloud\.com\/(?:([\w-]+)\/(sets\/)?)([\w-]+)/i); - if (!match) { - return result; - } - result.channel = match[1]; - if (match[1] === "playlists" || match[2]) { - result.list = match[3]; - } else { - result.id = match[3]; - } - return result; - }; - SoundCloud.prototype.parseParameters = function(params) { - if (params.t) { - params.start = getTime$6(params.t); - delete params.t; - } - return params; - }; - SoundCloud.prototype.parseMediaType = function(result) { - if (result.id) { - if (result.channel === "tracks") { - delete result.channel; - delete result.params.url; - result.mediaType = this.mediaTypes.APITRACK; - } else { - result.mediaType = this.mediaTypes.TRACK; - } - } - if (result.list) { - if (result.channel === "playlists") { - delete result.channel; - delete result.params.url; - result.mediaType = this.mediaTypes.APIPLAYLIST; - } else { - result.mediaType = this.mediaTypes.PLAYLIST; - } - } - return result; - }; - SoundCloud.prototype.parse = function(url, params) { - var result = {}; - result = this.parseUrl(url, result); - result.params = this.parseParameters(params); - result = this.parseMediaType(result); - if (!result.id && !result.list) { - return void 0; - } - return result; - }; - SoundCloud.prototype.createLongUrl = function(vi, params) { - var url = ""; - var startTime = params.start; - delete params.start; - if (vi.mediaType === this.mediaTypes.TRACK && vi.id && vi.channel) { - url = "https://soundcloud.com/" + vi.channel + "/" + vi.id; - } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list && vi.channel) { - url = "https://soundcloud.com/" + vi.channel + "/sets/" + vi.list; - } else if (vi.mediaType === this.mediaTypes.APITRACK && vi.id) { - url = "https://api.soundcloud.com/tracks/" + vi.id; - } else if (vi.mediaType === this.mediaTypes.APIPLAYLIST && vi.list) { - url = "https://api.soundcloud.com/playlists/" + vi.list; - } else { - return void 0; - } - url += combineParams$9(params); - if (startTime) { - url += "#t=" + startTime; - } - return url; - }; - SoundCloud.prototype.createEmbedUrl = function(vi, params) { - var url = "https://w.soundcloud.com/player/"; - delete params.start; - if (vi.mediaType === this.mediaTypes.APITRACK && vi.id) { - params.url = "https%3A//api.soundcloud.com/tracks/" + vi.id; - } else if (vi.mediaType === this.mediaTypes.APIPLAYLIST && vi.list) { - params.url = "https%3A//api.soundcloud.com/playlists/" + vi.list; - } else { - return void 0; - } - url += combineParams$9(params); - return url; - }; - base.bind(new SoundCloud()); - var combineParams$a = util.combineParams; - function TeacherTube() { - this.provider = "teachertube"; - this.alternatives = []; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video", - AUDIO: "audio", - DOCUMENT: "document", - CHANNEL: "channel", - COLLECTION: "collection", - GROUP: "group" - }; - } - TeacherTube.prototype.parse = function(url, params) { - var result = {}; - result.list = this.parsePlaylist(params); - result.params = params; - var match = url.match(/\/(audio|video|document|user\/channel|collection|group)\/(?:[\w-]+-)?(\w+)/); - if (!match) { - return void 0; - } - result.mediaType = this.parseMediaType(match[1]); - result.id = match[2]; - return result; - }; - TeacherTube.prototype.parsePlaylist = function(params) { - if (params["playlist-id"]) { - var list2 = params["playlist-id"]; - delete params["playlist-id"]; - return list2; - } - return void 0; - }; - TeacherTube.prototype.parseMediaType = function(mediaTypeMatch) { - switch (mediaTypeMatch) { - case "audio": - return this.mediaTypes.AUDIO; - case "video": - return this.mediaTypes.VIDEO; - case "document": - return this.mediaTypes.DOCUMENT; - case "user/channel": - return this.mediaTypes.CHANNEL; - case "collection": - return this.mediaTypes.COLLECTION; - case "group": - return this.mediaTypes.GROUP; - } - }; - TeacherTube.prototype.createLongUrl = function(vi, params) { - if (!vi.id) { - return void 0; - } - var url = "https://www.teachertube.com/"; - if (vi.list) { - params["playlist-id"] = vi.list; - } - if (vi.mediaType === this.mediaTypes.CHANNEL) { - url += "user/channel/"; - } else { - url += vi.mediaType + "/"; - } - url += vi.id; - url += combineParams$a(params); - return url; - }; - TeacherTube.prototype.createEmbedUrl = function(vi, params) { - if (!vi.id) { - return void 0; - } - var url = "https://www.teachertube.com/embed/"; - if (vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.AUDIO) { - url += vi.mediaType + "/" + vi.id; - } else { - return void 0; - } - url += combineParams$a(params); - return url; - }; - base.bind(new TeacherTube()); - var combineParams$b = util.combineParams; - function TikTok() { - this.provider = "tiktok"; - this.defaultFormat = "long"; - this.formats = { - "long": this.createLongUrl - }; - this.mediaTypes = { - VIDEO: "video" - }; - } - TikTok.prototype.parse = function(url, params) { - var result = { - params, - mediaType: this.mediaTypes.VIDEO - }; - var match = url.match(/@([^/]+)\/video\/(\d{19})/); - if (!match) { - return; - } - result.channel = match[1]; - result.id = match[2]; - return result; - }; - TikTok.prototype.createLongUrl = function(vi, params) { - var url = ""; - if (vi.mediaType === this.mediaTypes.VIDEO && vi.id && vi.channel) { - url += "https://www.tiktok.com/@".concat(vi.channel, "/video/").concat(vi.id); - } else { - return void 0; - } - url += combineParams$b(params); - return url; - }; - base.bind(new TikTok()); - var combineParams$c = util.combineParams; - function Ted() { - this.provider = "ted"; - this.formats = { - "long": this.createLongUrl, - embed: this.createEmbedUrl - }; - this.mediaTypes = { - VIDEO: "video", - PLAYLIST: "playlist" - }; - } - Ted.prototype.parseUrl = function(url, result) { - var match = url.match(/\/(talks|playlists\/(\d+))\/([\w-]+)/); - var channel = match ? match[1] : void 0; - if (!channel) { - return result; - } - result.channel = channel.split("/")[0]; - result.id = match[3]; - if (result.channel === "playlists") { - result.list = match[2]; - } - return result; - }; - Ted.prototype.parseMediaType = function(result) { - if (result.id && result.channel === "playlists") { - delete result.channel; - result.mediaType = this.mediaTypes.PLAYLIST; - } - if (result.id && result.channel === "talks") { - delete result.channel; - result.mediaType = this.mediaTypes.VIDEO; - } - return result; - }; - Ted.prototype.parse = function(url, params) { - var result = { - params - }; - result = this.parseUrl(url, result); - result = this.parseMediaType(result); - if (!result.id) { - return void 0; - } - return result; - }; - Ted.prototype.createLongUrl = function(vi, params) { - var url = ""; - if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - url += "https://ted.com/talks/" + vi.id; - } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.id) { - url += "https://ted.com/playlists/" + vi.list + "/" + vi.id; - } else { - return void 0; - } - url += combineParams$c(params); - return url; - }; - Ted.prototype.createEmbedUrl = function(vi, params) { - var url = "https://embed.ted.com/"; - if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.id) { - url += "playlists/" + vi.list + "/" + vi.id; - } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { - url += "talks/" + vi.id; - } else { - return void 0; - } - url += combineParams$c(params); - return url; - }; - base.bind(new Ted()); - var lib = base; - return lib; - }); -})(jsVideoUrlParser); -var urlParser = jsVideoUrlParser.exports; -var convertPasteText = { - command: "convertPasteText", - execute: async (editor, text2) => { - const embedUrl = urlParser.create({ - videoInfo: urlParser.parse(text2), - format: "embed", - mediaType: "clip" - }); - if (embedUrl) { - const center2 = editor.context.viewport.center; - const width2 = 300; - const height2 = 200; - editor.context.commands.emit("newComponent", "iframe", { - x: center2[0] - width2 / 2, - y: center2[1] - height2 / 2, - width: width2, - height: height2, - backgroundColor: "transparent", - url: embedUrl - }); - } - } -}; -var __glob_0_31 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convertPasteText -}, Symbol.toStringTag, { value: "Module" })); -function convertPath(editor, pathString2, rect2 = null) { - var current = editor.context.selection.current; - if (current) { - if (current.is("svg-path", "svg-brush", "svg-textpath")) { - var d = pathString2; - if (rect2) { - var parser = new PathParser(pathString2); - parser.scale(current.width / rect2.width, current.height / rect2.height); - d = parser.d; - } - editor.context.commands.executeCommand("setAttribute", "set attribute -d", editor.context.selection.packByValue({ d }, current.id)); - } else if (current.clipPath.includes("path")) { - var d = pathString2; - if (rect2) { - var parser = new PathParser(pathString2); - parser.scale(current.width / rect2.width, current.height / rect2.height); - d = parser.d; - } - editor.context.commands.executeCommand("setAttribute", "change clip path", editor.context.selection.packByValue({ clipPath: `path(${d})` }, current.id)); - } - } -} -var __glob_0_32 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": convertPath -}, Symbol.toStringTag, { value: "Module" })); -var copy_path = { - command: "copy.path", - description: "copy as path for item with path string(d attribute)", - execute: function(editor) { - const current = editor.context.selection.current; - if (current) { - let newPath = PathParser.fromSVGString(current.d); - try { - const newLayerAttrs = current.toSVGPath(); - editor.context.commands.executeCommand("addLayer", `copy path`, editor.createModel(__spreadValues(__spreadValues({ - itemType: "svg-path" - }, newLayerAttrs), current.updatePath(newPath.d))), true, current.parent); - } catch (e) { - console.error(e); - } - } - } -}; -var __glob_0_33 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": copy_path -}, Symbol.toStringTag, { value: "Module" })); -var copyLayer = { - command: "history.copyLayer", - description: "copy in selected items ", - description_ko: ["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "], - execute: async function(editor, ids = []) { - let currentIds = ids.map((id) => editor.get(id)).filter(Boolean).map((item) => item.id); - if (!currentIds.length) { - currentIds = editor.context.selection.ids; - } - if (!currentIds.length) - return; - const items = await editor.json.renderAll(currentIds.map((it) => editor.get(it))); - const newIds = []; - const itemList = {}; - const parentList = {}; - let updateData = {}; - items.forEach((itemJSON) => { - const referenceId = itemJSON.referenceId; - const sourceItem = editor.get(referenceId); - parentList[sourceItem.parentId] = sourceItem.parent; - const model = editor.createModel(itemJSON); - model.renameWithCount(); - sourceItem.insertAfter(model); - newIds.push(model.id); - itemList[model.id] = itemJSON; - updateData[model.id] = model.toCloneObject(); - }); - Object.values(parentList).forEach((parent) => { - updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); - }); - editor.context.commands.emit("setAttribute", updateData); - editor.nextTick(() => { - editor.context.selection.select(...newIds); - }); - } -}; -var __glob_0_34 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": copyLayer -}, Symbol.toStringTag, { value: "Module" })); -var copyTimelineProperty = { - command: "copyTimelineProperty", - execute: function(editor, layerId, property, newTime = null) { - _currentProject(editor, (project2) => { - project2.copyTimelineKeyframe(layerId, property, newTime); - editor.emit("refreshTimeline"); - }); - } -}; -var __glob_0_35 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": copyTimelineProperty -}, Symbol.toStringTag, { value: "Module" })); -var deleteTimelineKeyframe = { - command: "deleteTimelineKeyframe", - execute: function(editor) { - _currentProject(editor, (project2) => { - editor.timeline.each((item) => { - project2.deleteTimelineKeyframe(item.layerId, item.property, item.id); - }); - editor.timeline.empty(); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - }); - } -}; -var __glob_0_36 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": deleteTimelineKeyframe -}, Symbol.toStringTag, { value: "Module" })); -var doubleclick_item = { - command: "doubleclick.item", - execute: function(editor, evt, id) { - const item = editor.get(id); - if (editor.context.selection.isOne && item) { - if (editor.context.selection.checkChildren(item.id)) { - editor.context.selection.select(item); - } else { - if (editor.context.selection.check(item)) { - editor.context.commands.emit("open.editor"); - editor.emit("removeGuideLine"); - } else { - this.selectInWorldPosition(editor, evt, item); - } - } - } else { - this.selectInWorldPosition(editor, evt, item); - } - }, - selectInWorldPosition: function(editor, evt, item) { - const point2 = editor.context.viewport.getWorldPosition(evt); - if (editor.context.selection.hasPoint(point2) || editor.context.selection.hasChildrenPoint(point2)) { - editor.context.selection.select(item); - editor.snapManager.clear(); - } - } -}; -var __glob_0_37 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": doubleclick_item -}, Symbol.toStringTag, { value: "Module" })); -function downloadFile(datauri, filename = "elf.json") { - var a = document.createElement("a"); - a.href = datauri; - a.download = filename; - a.click(); -} -var downloadJSON = { - command: "downloadJSON", - execute: function(editor, filename) { - var json = JSON.stringify(editor.context.modelManager.toJSON()); - var datauri = "data:application/json;base64," + window.btoa(unescape(encodeURIComponent(json))); - downloadFile(datauri, filename || "elf.json"); - } -}; -var __glob_0_38 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": downloadJSON -}, Symbol.toStringTag, { value: "Module" })); -var ExportManager = { - makeProjectStyle(item) { - const keyframeString = item.toKeyframeString(); - const rootVariable = item.toRootVariableCSS(); - return ` - :root { - ${CSS_TO_STRING(rootVariable)} - } - /* keyframe */ - ${keyframeString} - `; - }, - makeStyle(item, appendCSS = "") { - if (item.is("project")) { - return this.makeProjectStyle(item); - } - const cssString = item.generateView(`[data-id='${item.id}']`, appendCSS); - return ` - ${cssString} - ` + item.layers.map((it) => { - return this.makeStyle(it); - }).join(""); - }, - makeSvg(project2) { - const SVGString = project2.toSVGString ? project2.toSVGString() : ""; - return ` - ${SVGString ? `${SVGString}` : ""} - `; - }, - generateSVG(editor, rootItem) { - return editor.replaceLocalUrltoRealUrl(editor.svg.render(rootItem)); - } -}; -function createImagePng(img, callback, imageType = "image/png") { - var canvas = Dom.create("canvas"); - var { width: width2, height: height2 } = img; - canvas.resize({ width: width2, height: height2 }); - canvas.drawImage(img); - callback && callback(canvas.toDataURL(imageType)); -} -var downloadPNG = { - command: "downloadPNG", - execute: function(editor) { - const item = editor.context.selection.current; - if (item) { - const svgString = ExportManager.generateSVG(editor, item).trim(); - const datauri = "data:image/svg+xml;base64," + window.btoa(svgString); - const filename = item.id; - loadOriginalImage({ local: datauri }, (info, img) => { - createImagePng(img, (pngDataUri) => { - downloadFile(pngDataUri, filename); - }); - }); - } - } -}; -var __glob_0_39 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": downloadPNG -}, Symbol.toStringTag, { value: "Module" })); -var downloadSVG = { - command: "downloadSVG", - execute: function(editor) { - const item = editor.context.selection.current; - if (item) { - var svgString = ExportManager.generateSVG(editor, item).trim(); - var datauri = "data:image/svg+xml;base64," + window.btoa(svgString); - var filename = item.id; - downloadFile(datauri, filename); - } - } -}; -var __glob_0_40 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": downloadSVG -}, Symbol.toStringTag, { value: "Module" })); -var drop_asset = { - command: "drop.asset", - execute: async function(editor, obj2, id = null) { - if (obj2.color) { - editor.context.commands.emit("addBackgroundColor", obj2.color, id); - } else if (obj2.gradient) { - editor.context.commands.emit("addBackgroundImageGradient", obj2.gradient, id); - } else if (obj2.pattern) { - editor.context.commands.emit("addBackgroundImagePattern", obj2.pattern, id); - } else if (obj2.imageUrl) { - editor.context.commands.emit("addBackgroundImageAsset", obj2.imageUrl, id); - } else if (obj2.asset) { - const assetData = await editor.storageManager.getCustomAsset(obj2.asset.id); - if (assetData) { - editor.context.commands.emit("addArtBoard", assetData, obj2.asset.center); - } - } - _doForceRefreshSelection(editor); - } -}; -var __glob_0_41 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": drop_asset -}, Symbol.toStringTag, { value: "Module" })); -var dropImageUrl = { - command: "dropImageUrl", - execute: function(editor, imageUrl) { - loadOriginalImage({ local: imageUrl }, (info) => { - editor.context.commands.emit("addImage", __spreadValues({ src: info.local }, info)); - }); - } -}; -var __glob_0_42 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": dropImageUrl -}, Symbol.toStringTag, { value: "Module" })); -var editor_config_body_event$1 = { - command: "change.bodyEvent", - description: "fire when bodyEvent was set", - execute: function(editor) { - const $target = Dom.create(editor.context.config.get("bodyEvent").target); - editor.context.config.init("onMouseMovepageContainer", $target); - } -}; -var __glob_0_43 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editor_config_body_event$1 -}, Symbol.toStringTag, { value: "Module" })); -var fileDropItems = { - command: "fileDropItems", - execute: function(editor, items = []) { - editor.context.commands.emit("updateResource", items); - } -}; -var __glob_0_44 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": fileDropItems -}, Symbol.toStringTag, { value: "Module" })); -function second(fps, timecode2) { - if (isString(timecode2)) { - var [hour, minute, second2, frame] = timecode2.split(":"); - hour = parseInt(hour, 10); - minute = parseInt(minute, 10); - second2 = parseInt(second2, 10); - frame = parseInt(frame, 10); - return hour * 3600 + minute * 60 + second2 + frame * (1 / fps); - } else if (isNumber(timecode2)) { - return timecode2 / fps; - } - return 0; -} -function timecode(fps, seconds) { - var h = Math.floor(seconds / 3600); - var m = Math.floor(seconds / 60 % 60); - var s = Math.floor(seconds % 60); - var f = Math.round((seconds - Math.floor(seconds)) * fps); - if (f === fps) { - f = 0; - s += 1; - if (s === 60) { - m += 1; - if (m === 60) { - h += 1; - } - } - } - return [h, m, s, f].map((t) => { - return (t + "").padStart(2, "0"); - }).join(":"); -} -function framesToTimecode(fps, frames, start2 = null) { - return timecode(fps, second(fps, frames) - second(fps, start2)); -} -function makeTimer(opt) { - var timer2 = { - id: 0, - start: 0, - speed: opt.speed || 1, - elapsed: opt.elapsed || 0, - duration: opt.duration || 0, - iterationStartCount: 1, - iterationCount: opt.iterationCount || Number.MAX_SAFE_INTEGER, - direction: opt.direction || "normal", - log: [], - logIndex: 0, - tick: opt.tick || (() => { - }), - startCallback: opt.start || (() => { - }), - endCallback: opt.end || (() => { - }), - firstCallback: opt.first || (() => { - }), - lastCallback: opt.last || (() => { - }) - }; - const isForward = () => { - if (timer2.direction === "normal") { - return true; - } else if (timer2.direction === "reverse") { - return false; - } else if (timer2.direction === "alternate") { - return timer2.iterationStartCount % 2 === 1; - } else if (timer2.direction === "alternate-reverse") { - return timer2.iterationStartCount % 2 === 0; - } - }; - const calculateForDirection = (rate) => { - return isForward() ? rate : 1 - rate; - }; - const tick = (now) => { - var isStart = false; - if (timer2.start === null) { - timer2.start = now; - isStart = true; - } - const dt = now - timer2.start; - timer2.elapsed += dt * timer2.speed; - timer2.start = now; - if (timer2.elapsed > timer2.duration) { - timer2.elapsed = timer2.duration; - } - var elapsed = calculateForDirection(timer2.elapsed / timer2.duration) * timer2.duration; - if (isStart) - timer2.startCallback(elapsed, timer2); - timer2.log[timer2.logIndex++] = { elapsed, dt: timer2.lastTime - elapsed }; - timer2.lastTime = elapsed; - timer2.tick(elapsed, timer2); - if (timer2.elapsed === timer2.duration) { - end2(); - } else { - frameStart(); - } - }; - const frameStart = () => { - timer2.id = window.requestAnimationFrame(tick); - }; - const end2 = () => { - timer2.endCallback(timer2.elapsed, timer2); - timer2.iterationStartCount++; - if (timer2.iterationStartCount > timer2.iterationCount) { - timer2.lastCallback(timer2.elapsed, timer2); - window.cancelAnimationFrame(timer2.id); - } else { - timer2.start = null; - timer2.elapsed = 0; - frameStart(); - } - }; - const play2 = (opt2 = {}) => { - timer2.start = null; - timer2.iterationStartCount = 1; - timer2.log = []; - timer2.lastTime = 0; - timer2.logIndex = 0; - if (isNumber(opt2.elapsed)) - timer2.elapsed = opt2.elapsed; - if (isNumber(opt2.speed)) - timer2.speed = opt2.speed; - if (isNumber(opt2.duration)) - timer2.duration = opt2.duration; - if (isNumber(opt2.iterationCount)) - timer2.iterationCount = opt2.iterationCount || Number.MAX_SAFE_INTEGER; - if (isString(opt2.direction)) - timer2.direction = opt2.direction; - if (isFunction(opt2.tick)) - timer2.tick = opt2.tick; - if (isFunction(opt2.start)) - timer2.startCallback = opt2.start; - if (isFunction(opt2.end)) - timer2.endCallback = opt2.end; - if (isFunction(opt2.first)) - timer2.firstCallback = opt2.first; - if (isFunction(opt2.last)) - timer2.lastCallback = opt2.last; - if (isFunction(opt2.stop)) - timer2.stopCallback = opt2.stop; - timer2.firstCallback(timer2.elapsed, timer2); - frameStart(); - }; - const stop = () => { - timer2.stopCallback(timer2.elapsed, timer2); - window.cancelAnimationFrame(timer2.id); - }; - const seek = (t) => { - timer2.elapsed = t; - timer2.tick(timer2.elapsed, timer2); - }; - const first = () => { - seek(0); - }; - const last = () => { - seek(timer2.duration); - }; - return { - play: play2, - stop, - tick, - first, - last, - seek, - timer: timer2 - }; -} -var firstTimelineItem = { - command: "firstTimelineItem", - execute: function(editor) { - _currentProject(editor, (project2, timeline) => { - var firstTime = project2.getSelectedTimelineFirstTime(); - project2.setTimelineCurrentTime(timecode(timeline.fps, firstTime)); - project2.seek(); - editor.emit("playTimeline"); - }); - } -}; -var __glob_0_45 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": firstTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var group_item = { - command: "group.item", - execute: function(editor, opt = {}) { - if (editor.context.selection.length === 0) - return; - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.generateListNumber(); - const list2 = editor.context.selection.map((item) => { - return { depth: item.depth, item }; - }); - list2.sort((a, b) => { - if (a.depth === b.depth) { - return a.no > b.no ? -1 : 1; - } - return a.depth > b.depth ? 1 : -1; - }); - const groupLayer = editor.createModel(__spreadValues(__spreadValues({ - itemType: "rect" - }, editor.context.selection.itemRect), opt)); - list2[0].item.insertAfter(groupLayer); - list2.forEach(({ item }) => { - groupLayer.appendChild(item); - }); - editor.context.selection.select(groupLayer); - editor.emit("refreshAll"); - } - } -}; -var __glob_0_46 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": group_item -}, Symbol.toStringTag, { value: "Module" })); -var history_addLayer = { - command: "history.addLayer", - description: "add layer in history ", - execute: function(editor, message, layer, isSelected = true, containerItem) { - editor.context.commands.emit("addLayer", layer, isSelected, containerItem); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [layer, isSelected, containerItem], - undoValues: [layer.id] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues }) { - editor.context.commands.emit("addLayer", ...currentValues); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - }, - undo: function(editor, { undoValues }) { - const ids = undoValues; - const items = editor.context.selection.itemsByIds(ids); - items.forEach((item) => { - if (item) { - item.remove(); - } - }); - editor.nextTick(() => { - editor.context.selection.empty(); - editor.emit("refreshAll"); - }); - } -}; -var __glob_0_47 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_addLayer -}, Symbol.toStringTag, { value: "Module" })); -var history_bring_forward = { - command: "history.bring.forward", - description: "bring forward", - execute: function(editor, message, layer = editor.context.selection.current) { - const currentLayer = editor.get(layer); - const lastValues = currentLayer.hierarchy; - const oldParentLayer = currentLayer.parent; - let currentValues = {}; - let nextParentLayer = null; - if (currentLayer.isLast) { - nextParentLayer = oldParentLayer.next; - if (!nextParentLayer) { - return; - } - if (nextParentLayer.enableHasChildren()) { - nextParentLayer.appendChild(currentLayer); - currentValues = currentLayer.hierarchy; - } else { - nextParentLayer.insertAfter(currentLayer); - currentValues = currentLayer.hierarchy; - } - } else { - currentLayer.parent.bringForward(currentLayer.id); - currentValues = currentLayer.hierarchy; - } - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle")), currentLayer.parent.attrsWithId("children"))); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [currentValues], - undoValues: [lastValues] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { - const currentLayer = editor.get(newValues.id); - const currentTarget = editor.get(newValues.parentId); - const lastParent = editor.get(lastValues.parentId); - currentTarget.insertChild(currentLayer, newValues.index); - currentLayer.reset(newValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastParent.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle")), currentTarget.attrsWithId("children"))); - }, - undo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { - const currentLayer = lastValues; - const lastLayer = editor.get(currentLayer.id); - const lastParent = editor.get(currentLayer.parentId); - const currentParent = editor.get(newValues.parentId); - const lastIndex = currentLayer.index; - lastParent.insertChild(lastLayer, lastIndex); - lastLayer.reset(lastValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); - } -}; -var __glob_0_48 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_bring_forward -}, Symbol.toStringTag, { value: "Module" })); -var history_bring_front = { - command: "history.bring.front", - description: "bring front", - execute: function(editor, message, layer = editor.context.selection.current) { - const currentLayer = editor.get(layer); - const lastValues = currentLayer.hierachy; - const oldParentLayer = currentLayer.parent; - let currentValues = {}; - if (currentLayer.isLast) { - return; - } else { - currentLayer.parent.bringFront(currentLayer.id); - currentValues = currentLayer.hierarchy; - } - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle"))); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [currentValues], - undoValues: [lastValues] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [newValues] }) { - const currentLayer = editor.get(newValues.id); - const currentTarget = editor.get(newValues.parentId); - currentTarget.insertChild(currentLayer, newValues.index); - currentLayer.reset(newValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle")), currentTarget.attrsWithId("children"))); - }, - undo: function(editor, { undoValues: [lastValues] }) { - const currentLayer = lastValues; - const lastLayer = editor.get(currentLayer.id); - const lastParent = editor.get(currentLayer.parentId); - const lastIndex = currentLayer.index; - lastParent.insertChild(lastLayer, lastIndex); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children"))); - } -}; -var __glob_0_49 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_bring_front -}, Symbol.toStringTag, { value: "Module" })); -var history_clipboard_paste = { - command: "history.clipboard.paste", - description: "paste in clipboard ", - description_ko: ["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "], - execute: async function(editor, message, clipboardData = void 0, hasHistory = true) { - const data = clipboardData || editor.context.clipboard.last; - if (data.type == ClipboardActionType.COPY) { - const ids = data.data; - const items = await editor.json.renderAll(ids.map((it) => editor.get(it))); - const newIds = []; - const itemList = {}; - const parentList = {}; - let updateData = {}; - items.forEach((itemJSON) => { - const referenceId = itemJSON.referenceId; - const sourceItem = editor.get(referenceId); - parentList[sourceItem.parentId] = sourceItem.parent; - const model = editor.createModel(itemJSON); - model.renameWithCount(); - sourceItem.insertAfter(model); - newIds.push(model.id); - itemList[model.id] = itemJSON; - updateData[model.id] = model.toCloneObject(); - }); - Object.values(parentList).forEach((parent) => { - updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); - }); - editor.context.commands.emit("setAttribute", updateData); - editor.nextTick(() => { - editor.context.selection.select(...newIds); - if (hasHistory) { - editor.context.history.add(message, this, { - currentValues: [data], - undoValues: [newIds, editor.context.selection.ids] - }); - } - editor.context.history.saveSelection(); - }); - } - }, - redo: function(editor, { currentValues: [data] }) { - editor.context.commands.emit("history.clipboard.paste", "paste", data, false); - }, - undo: function(editor, { currentValues: [data], undoValues: [newIds, selectedIds] }) { - if (data.type === ClipboardActionType.COPY) { - const parentList = {}; - newIds.forEach((id) => { - const item = editor.get(id); - parentList[item.parentId] = item.parent; - if (item) { - item.remove(); - } - }); - let updateData = {}; - Object.values(parentList).forEach((parent) => { - updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); - }); - editor.context.selection.select(...selectedIds); - editor.context.commands.emit("setAttribute", updateData); - } - } -}; -var __glob_0_50 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_clipboard_paste -}, Symbol.toStringTag, { value: "Module" })); -var history_copyLayer = { - command: "history.copyLayer", - description: "copy in selected items ", - description_ko: ["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "], - execute: async function(editor, message, ids = []) { - let currentIds = ids.map((id) => editor.get(id)).filter(Boolean).map((item) => item.id); - if (!currentIds.length) { - currentIds = editor.context.selection.ids; - } - if (!currentIds.length) - return; - const items = await editor.json.renderAll(currentIds.map((it) => editor.get(it))); - const newIds = []; - const itemList = {}; - const parentList = {}; - let updateData = {}; - items.forEach((itemJSON) => { - const referenceId = itemJSON.referenceId; - const sourceItem = editor.get(referenceId); - parentList[sourceItem.parentId] = sourceItem.parent; - const model = editor.createModel(itemJSON); - model.renameWithCount(); - sourceItem.insertAfter(model); - newIds.push(model.id); - itemList[model.id] = itemJSON; - updateData[model.id] = model.toCloneObject(); - }); - Object.values(parentList).forEach((parent) => { - updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); - }); - editor.context.commands.emit("setAttribute", updateData); - editor.nextTick(() => { - editor.context.selection.select(...newIds); - editor.context.history.add(message, this, { - currentValues: [currentIds], - undoValues: [newIds, editor.context.selection.ids] - }); - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [currentIds] }) { - editor.context.commands.emit("copyLayer", currentIds); - }, - undo: function(editor, { undoValues: [newIds, selectedIds] }) { - const parentList = {}; - newIds.forEach((id) => { - const item = editor.get(id); - parentList[item.parentId] = item.parent; - if (item) { - item.remove(); - } - }); - let updateData = {}; - Object.values(parentList).forEach((parent) => { - updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); - }); - editor.context.selection.select(...selectedIds); - editor.context.commands.emit("setAttribute", updateData); - } -}; -var __glob_0_51 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_copyLayer -}, Symbol.toStringTag, { value: "Module" })); -var history_group_item = { - command: "history.group.item", - description: "History Group Item", - execute: function(editor, message = "selection") { - var _a; - const currentValues = editor.context.selection.ids; - const projectId = (_a = editor.context.selection.currentProject) == null ? void 0 : _a.id; - const undoValues = editor.context.history.selectedIds; - if (isArrayEquals(currentValues, undoValues)) { - return; - } - editor.context.history.add(message, this, { - currentValues: { - ids: currentValues, - projectId - }, - undoValues: { - ids: undoValues, - projectId - } - }); - }, - redo: function(editor, { currentValues: [ids, projectId] }) { - }, - undo: function(editor, { undoValues: [ids, projectId] }) { - } -}; -var __glob_0_52 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_group_item -}, Symbol.toStringTag, { value: "Module" })); -var history_moveLayer = { - command: "history.moveLayer", - description: "move layer in world ", - execute: function(editor, message, layers2 = [], dist2 = [0, 0, 0]) { - if (isArray(layers2) === false) { - layers2 = [layers2]; - } - const targetItems = editor.context.selection.itemsByIds(layers2); - const lastValues = {}; - const currentValues = {}; - targetItems.forEach((it) => { - const oldPosition = it.absoluteMove(dist2); - const newPosition = it.attrs("x", "y"); - lastValues[it.id] = oldPosition; - currentValues[it.id] = newPosition; - }); - editor.context.commands.emit("setAttribute", currentValues); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [layers2, dist2], - undoValues: [lastValues] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [layers2, dist2] }) { - const targetItems = editor.context.selection.itemsByIds(layers2); - const localChanges = {}; - targetItems.forEach((it) => { - it.absoluteMove(dist2); - const newPosition = it.attrs("x", "y"); - localChanges[it.id] = newPosition; - }); - editor.context.commands.emit("setAttribute", localChanges); - }, - undo: function(editor, { undoValues: [lastValues] }) { - editor.context.commands.emit("setAttribute", lastValues); - } -}; -var __glob_0_53 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_moveLayer -}, Symbol.toStringTag, { value: "Module" })); -var history_moveLayerToTarget = { - command: "history.moveLayerToTarget", - description: "move layer to target in world ", - execute: function(editor, message, layer, target, dist2 = [0, 0, 0], targetAction = TargetActionType.APPEND_CHILD) { - const currentLayer = editor.get(layer) || layer; - const currentParentLayer = currentLayer.parent; - const currentTarget = editor.get(target) || editor.context.selection.currentProject; - const lastValues = currentLayer.hierachy; - if (dist2) { - currentLayer.absoluteMove(dist2); - } - let currentValues = {}; - if (targetAction === TargetActionType.APPEND_CHILD) { - currentTarget.appendChild(currentLayer); - currentValues = currentTarget.attrsWithId("children"); - } else if (targetAction === TargetActionType.INSERT_BEFORE) { - currentTarget.insertBefore(currentLayer); - currentValues = currentTarget.parent.attrsWithId("children"); - } else if (targetAction === TargetActionType.INSERT_AFTER) { - currentTarget.insertAfter(currentLayer); - currentValues = currentTarget.parent.attrsWithId("children"); - } - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentValues), currentParentLayer && currentParentLayer.isNot("project") ? currentParentLayer.attrsWithId("children") : {})); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [currentLayer.hierachy], - undoValues: [lastValues, currentLayer.parentId] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [info] }) { - const currentLayer = editor.get(info.id); - const currentTarget = editor.get(info.parentId); - currentTarget.insertChild(currentLayer, info.index); - currentLayer.reset(info.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); - }, - undo: function(editor, { undoValues: [lastValues, currentParentId] }) { - const currentLayer = lastValues; - const lastLayer = editor.get(currentLayer.id); - const lastParent = editor.get(currentLayer.parentId); - const currentParent = editor.get(currentParentId); - const lastIndex = currentLayer.index; - lastParent.insertChild(lastLayer, lastIndex); - lastLayer.reset(lastValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); - } -}; -var __glob_0_54 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_moveLayerToTarget -}, Symbol.toStringTag, { value: "Module" })); -var history_refreshSelection = { - command: "history.refreshSelection", - description: `save selection in history `, - description_ko: "Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4", - execute: function(editor, message = "selection") { - var _a; - const currentValues = editor.context.selection.ids; - const projectId = (_a = editor.context.selection.currentProject) == null ? void 0 : _a.id; - const undoValues = editor.context.history.selectedIds; - if (isArrayEquals(currentValues, undoValues)) { - return; - } - editor.context.history.add(message, this, { - currentValues: [currentValues, projectId], - undoValues: [undoValues, projectId] - }); - this.nextAction(editor); - }, - nextAction(editor) { - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [ids, projectId] }) { - editor.context.selection.selectProject(projectId); - editor.context.selection.select(...ids); - this.nextAction(editor); - }, - undo: function(editor, { undoValues: [ids, projectId] }) { - editor.context.selection.selectProject(projectId); - editor.context.selection.select(...ids); - this.nextAction(editor); - } -}; -var __glob_0_55 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_refreshSelection -}, Symbol.toStringTag, { value: "Module" })); -var history_refreshSelectionProject = { - command: "history.refreshSelectionPorject", - description: `save project selection in history `, - description_ko: "Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4", - execute: function(editor, message = "selection", projectId) { - var _a; - const currentValues = [projectId]; - const undoValues = [(_a = editor.context.selection.currentProject) == null ? void 0 : _a.id]; - if (isArrayEquals(currentValues, undoValues)) { - return; - } - editor.context.selection.selectProject(projectId); - editor.context.history.add(message, this, { - currentValues, - undoValues - }); - this.nextAction(editor); - }, - nextAction(editor) { - editor.nextTick(() => { - editor.emit("refreshAll"); - editor.emit("refreshProjectList"); - }); - }, - redo: function(editor, { currentValues: [projectId] }) { - editor.context.selection.selectProject(projectId); - this.nextAction(editor); - }, - undo: function(editor, { undoValues: [projectId] }) { - editor.context.selection.selectProject(projectId); - this.nextAction(editor); - } -}; -var __glob_0_56 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_refreshSelectionProject -}, Symbol.toStringTag, { value: "Module" })); -function filterChildren(items = []) { - return items.filter((item) => { - let total = 0; - item.path.forEach((treeItem) => { - total += items.filter((it) => it.id === treeItem.id).length ? 1 : 0; - }); - return total === 1; - }); -} -var history_removeLayer = { - command: "history.removeLayer", - description: "remove layer", - execute: function(editor, message, ids = void 0) { - let items = editor.context.selection.itemsByIds(ids || editor.context.selection.ids); - items = filterChildren(items); - const filtedIds = items.map((it) => it.id); - editor.context.modelManager.markRemove(filtedIds); - const parentIds = items.map((it) => it.parentId); - items.forEach((item) => { - item.remove(); - editor.context.selection.removeById(item.id); - }); - editor.context.history.add(message, this, { - currentValues: [filtedIds, parentIds], - undoValues: filtedIds - }); - editor.nextTick(() => { - editor.context.selection.removeById(filtedIds); - parentIds.forEach((parentId) => { - editor.context.commands.emit("update", parentId, { - changedChildren: true - }); - }); - editor.emit("refreshAll"); - editor.emit("removeGuideLine"); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }); - }, - redo: function(editor, { currentValues }) { - const ids = currentValues[0]; - let items = editor.context.selection.itemsByIds(ids || editor.context.selection.ids); - items = filterChildren(items); - editor.context.modelManager.markRemove(items.map((it) => it.id)); - items.forEach((item) => item.remove()); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - }, - undo: function(editor, { undoValues: recoverIds }) { - editor.context.modelManager.unmarkRemove(recoverIds); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - } -}; -var __glob_0_57 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_removeLayer -}, Symbol.toStringTag, { value: "Module" })); -var history_removeProject = { - command: "history.removeProject", - description: "remove project", - execute: function(editor, message, projectId) { - const index2 = editor.context.modelManager.markRemoveProject(projectId); - editor.context.history.add(message, this, { - currentValues: [projectId], - undoValues: [projectId, index2] - }); - editor.nextTick(() => { - editor.context.selection.selectProject(editor.context.modelManager.projects[0]); - editor.emit("refreshAll"); - editor.emit("removeGuideLine"); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }); - }, - redo: function(editor, { currentValues: [projectId] }) { - editor.context.modelManager.markRemoveProject(projectId); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - }, - undo: function(editor, { undoValues: [projectId, index2] }) { - editor.context.modelManager.unmarkRemoveProject(projectId, index2); - editor.nextTick(() => { - editor.context.selection.selectProject(projectId); - editor.emit("refreshAll"); - }); - } -}; -var __glob_0_58 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_removeProject -}, Symbol.toStringTag, { value: "Module" })); -var history_send_back = { - command: "history.send.back", - description: "send back", - execute: function(editor, message, layer = editor.context.selection.current) { - const currentLayer = editor.get(layer); - const lastValues = currentLayer.hierarchy; - const oldParentLayer = currentLayer.parent; - let currentValues = {}; - if (currentLayer.isFirst()) { - return; - } else { - currentLayer.parent.sendBack(currentLayer.id); - currentValues = currentLayer.hierarchy; - } - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId"))); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [currentValues], - undoValues: [lastValues] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [newValues] }) { - const currentLayer = editor.get(newValues.id); - const currentTarget = editor.get(newValues.parentId); - currentTarget.insertChild(currentLayer, newValues.index); - currentLayer.reset(newValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); - }, - undo: function(editor, { undoValues: [lastValues] }) { - const currentLayer = lastValues; - const lastLayer = editor.get(currentLayer.id); - const lastParent = editor.get(currentLayer.parentId); - const lastIndex = currentLayer.index; - lastParent.insertChild(lastLayer, lastIndex); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle", "parentId")), lastParent.attrsWithId("children"))); - } -}; -var __glob_0_59 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_send_back -}, Symbol.toStringTag, { value: "Module" })); -var history_send_backward = { - command: "history.send.backward", - description: "send backward", - execute: function(editor, message, layer = editor.context.selection.current) { - const currentLayer = editor.get(layer); - const lastValues = currentLayer.hierarchy; - const oldParentLayer = currentLayer.parent; - let currentValues = {}; - let prevParentLayer = null; - if (currentLayer.isFirst) { - prevParentLayer = oldParentLayer.prev; - if (!prevParentLayer) { - return; - } - prevParentLayer.insertBefore(currentLayer); - currentValues = currentLayer.hierarchy; - } else { - currentLayer.parent.sendBackward(currentLayer.id); - currentValues = currentLayer.hierarchy; - } - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentLayer.parent.attrsWithId("children"))); - editor.nextTick(() => { - editor.context.history.add(message, this, { - currentValues: [currentValues], - undoValues: [lastValues] - }); - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { - const currentLayer = editor.get(newValues.id); - const currentTarget = editor.get(newValues.parentId); - const lastParent = editor.get(lastValues.parentId); - currentTarget.insertChild(currentLayer, newValues.index); - currentLayer.reset(newValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastParent.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); - }, - undo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { - const currentLayer = lastValues; - const lastLayer = editor.get(currentLayer.id); - const lastParent = editor.get(currentLayer.parentId); - const currentParent = editor.get(newValues.parentId); - const lastIndex = currentLayer.index; - lastParent.insertChild(lastLayer, lastIndex); - lastLayer.reset(lastValues.attrs); - editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); - } -}; -var __glob_0_60 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_send_backward -}, Symbol.toStringTag, { value: "Module" })); -var history_setAttribute = { - command: "history.setAttribute", - execute: function(editor, message, multiAttrs = {}, context = { origin: "*" }) { - editor.context.commands.emit("setAttribute", multiAttrs, context); - editor.context.history.add(message, this, { - currentValues: [multiAttrs], - undoValues: editor.context.history.getUndoValues(multiAttrs) - }); - editor.nextTick(() => { - editor.context.history.saveSelection(); - }); - }, - redo: function(editor, { currentValues }) { - editor.context.commands.emit("setAttribute", ...currentValues); - editor.nextTick(() => { - editor.context.selection.reselect(); - editor.emit("refreshAll"); - }); - }, - undo: function(editor, { undoValues }) { - const ids = Object.keys(undoValues); - const items = editor.context.selection.itemsByIds(ids); - items.forEach((item) => { - item.reset(undoValues[item.id]); - }); - editor.context.selection.reselect(); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - } -}; -var __glob_0_61 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_setAttribute -}, Symbol.toStringTag, { value: "Module" })); -var item_move_depth_down = { - command: "item.move.depth.down", - execute: function(editor) { - const current = editor.context.selection.current; - if (current) { - current.orderPrev(); - } - _doForceRefreshSelection(editor); - } -}; -var __glob_0_62 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": item_move_depth_down -}, Symbol.toStringTag, { value: "Module" })); -var item_move_depth_first = { - command: "item.move.depth.first", - execute: function(editor) { - const current = editor.context.selection.current; - if (current) { - current.orderFirst(); - } - _doForceRefreshSelection(editor); - } -}; -var __glob_0_63 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": item_move_depth_first -}, Symbol.toStringTag, { value: "Module" })); -var item_move_depth_last = { - command: "item.move.depth.last", - execute: function(editor) { - const current = editor.context.selection.current; - if (current) { - current.orderLast(); - } - _doForceRefreshSelection(editor); - } -}; -var __glob_0_64 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": item_move_depth_last -}, Symbol.toStringTag, { value: "Module" })); -var item_move_depth_up = { - command: "item.move.depth.up", - execute: function(editor) { - const current = editor.context.selection.current; - if (current) { - current.orderNext(); - } - _doForceRefreshSelection(editor); - } -}; -var __glob_0_65 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": item_move_depth_up -}, Symbol.toStringTag, { value: "Module" })); -var keymap_keydown = { - command: "keymap.keydown", - execute: function(editor, e) { - editor.context.keyboardManager.add(e.code, e.keyCode, e); - if (editor.context.shortcuts) { - editor.context.shortcuts.execute(e, "keydown"); - } - } -}; -var __glob_0_66 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": keymap_keydown -}, Symbol.toStringTag, { value: "Module" })); -var lastTimelineItem = { - command: "lastTimelineItem", - execute: function(editor) { - _currentProject(editor, (project2, timeline) => { - var lastTime = project2.getSelectedTimelineLastTime(); - project2.setTimelineCurrentTime(timecode(timeline.fps, lastTime)); - project2.seek(); - editor.emit("playTimeline"); - }); - } -}; -var __glob_0_67 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": lastTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var load_json = { - command: "load.json", - execute: function(editor, json, context = { origin: "*" }) { - editor.context.modelManager.load(json, context); - _doForceRefreshSelection(editor); - } -}; -var __glob_0_68 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": load_json -}, Symbol.toStringTag, { value: "Module" })); -var moveLayer = { - command: "moveLayer", - description: "move layer by keydown with matrix ", - execute: function(editor, dx = 0, dy = 0) { - const absoluteDist = [dx, dy, 0]; - editor.context.selection.items.forEach((it) => { - it.absoluteMove(absoluteDist); - }); - editor.context.commands.executeCommand("setAttribute", "item move down", editor.context.selection.pack("x", "y")); - editor.nextTick(() => { - editor.context.selection.reselect(); - }); - } -}; -var __glob_0_69 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": moveLayer -}, Symbol.toStringTag, { value: "Module" })); -var moveLayerForItems = { - command: "moveLayerForItems", - description: "mova layer by multi items ", - execute: function(editor, moveItems = []) { - const itemsMap = {}; - moveItems.forEach((it) => { - it.item.absoluteMove(it.dist); - itemsMap[it.item.id] = it.item.attrs("x", "y"); - }); - editor.context.commands.emit("history.setAttribute", "item move", itemsMap); - editor.nextTick(() => { - editor.context.selection.reselect(); - }); - } -}; -var __glob_0_70 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": moveLayerForItems -}, Symbol.toStringTag, { value: "Module" })); -var moveSelectionToCenter = { - command: "moveSelectionToCenter", - description: "Move selection project or artboards to center on Viewport", - execute: function(editor, withScale = true) { - var _a, _b, _c, _d, _e; - let areaVerties = []; - if ((_a = editor.context.selection) == null ? void 0 : _a.isEmpty) { - if (((_c = (_b = editor.context.selection) == null ? void 0 : _b.currentProject) == null ? void 0 : _c.layers.length) > 0) { - areaVerties = itemsToRectVerties((_d = editor.context.selection) == null ? void 0 : _d.currentProject.layers); - } else { - areaVerties = rectToVerties(0, 0, 100, 100); - } - } else { - areaVerties = itemsToRectVerties((_e = editor.context.selection) == null ? void 0 : _e.items); - } - editor.context.commands.emit("moveToCenter", areaVerties, withScale); - } -}; -var __glob_0_71 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": moveSelectionToCenter -}, Symbol.toStringTag, { value: "Module" })); -function newComponent(editor, itemType, obj2, isSelected = true, containerItem = void 0) { - if (itemType === "svg-textpath") { - obj2 = __spreadProps(__spreadValues({}, obj2), { - fontSize: obj2.height, - textLength: "100%", - d: PathParser.makeLine(0, obj2.height, obj2.width, obj2.height).d - }); - } else if (itemType === "svg-circle") { - itemType = "svg-path"; - obj2 = __spreadProps(__spreadValues({}, obj2), { - backgroundColor: void 0, - fill: `#C4C4C4`, - d: PathParser.makeCircle(0, 0, obj2.width, obj2.height).d - }); - } else if (itemType === "svg-rect") { - itemType = "svg-path"; - obj2 = __spreadProps(__spreadValues({}, obj2), { - backgroundColor: void 0, - fill: `#C4C4C4`, - d: PathParser.makeRect(0, 0, obj2.width, obj2.height).d - }); - } else if (itemType === "text") { - obj2 = __spreadValues({ - width: 300, - height: 50 - }, obj2); - } else if (itemType === "artboard") { - obj2 = __spreadProps(__spreadValues({}, obj2), { - backgroundColor: "white" - }); - } - const newObjAttrs = __spreadValues({ itemType }, obj2); - const item = editor.createModel(newObjAttrs); - editor.context.commands.executeCommand("moveLayerToTarget", `add layer - ${itemType}`, item, containerItem); - editor.nextTick(() => { - editor.emit("appendLayer", item); - if (isSelected) { - editor.context.selection.select(item); - } - }); -} -var __glob_0_72 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": newComponent -}, Symbol.toStringTag, { value: "Module" })); -var nextTimelineItem = { - command: "nextTimelineItem", - execute: function(editor) { - _currentProject(editor, (project2, timeline) => { - var nextTime = project2.getSelectedTimelineNextTime(); - project2.setTimelineCurrentTime(timecode(timeline.fps, nextTime)); - project2.seek(); - editor.emit("playTimeline"); - }); - } -}; -var __glob_0_73 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": nextTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var open_editor = { - command: "open.editor", - description: "Open custom editor for item when doubleclick is fired", - execute: function(editor, current) { - if (!current && editor.context.selection.isOne === false) - return; - current = current || editor.context.selection.current; - if (current) { - if (current.editablePath) { - editor.emit("showPathEditor", "modify", { - box: "canvas", - current, - matrix: current.matrix, - isControl: true, - disableCurve: true, - d: current.editablePath, - changeEvent: (data) => { - editor.context.commands.executeCommand("setAttribute", "change editable path", editor.context.selection.packByValue(__spreadValues({}, current.recoverEditablePath(data.d)), [current.id])); - editor.nextTick(() => { - if (editor.context.stateManager.isPointerUp) { - editor.context.commands.emit("recoverBooleanPath"); - } - }); - } - }); - editor.emit("hideSelectionToolView"); - } else if (current.d) { - editor.emit("showPathEditor", "modify", { - box: "canvas", - current, - matrix: current.matrix, - d: current.absolutePath().d, - changeEvent: (data) => { - const newCurrent = editor.context.selection.current; - if (newCurrent.isSVG() && newCurrent.isNot("svg-path")) { - const newPathData = newCurrent.toSVGPath(); - const newPath = editor.createModel(__spreadValues({ - itemType: "svg-path" - }, newPathData)); - editor.context.selection.select(newPath); - newCurrent.insertAfter(newPath); - editor.nextTick(() => { - editor.context.commands.emit("removeLayer", [newCurrent.id]); - editor.context.commands.emit("updatePathItem", data); - }); - } else { - editor.context.commands.emit("updatePathItem", data); - editor.nextTick(() => { - if (editor.context.stateManager.isPointerUp) { - editor.context.commands.emit("recoverBooleanPath"); - } - }); - } - } - }); - editor.emit("hideSelectionToolView"); - } else if (current.clipPath) { - var obj2 = ClipPath.parseStyle(current.clipPath); - if (obj2.type === "path") { - var d = current.absolutePath(current.clipPathString).d; - var mode = d ? "modify" : "path"; - editor.emit("showPathEditor", mode, { - changeEvent: (data) => { - const resultPath = current.invertPath(data.d).d; - editor.context.commands.executeCommand("setAttribute", "change clip-path", editor.context.selection.packByValue({ - clipPath: `path(${resultPath})` - })); - }, - current, - d - }); - editor.emit("hideSelectionToolView"); - } else if (obj2.type === "svg") - ; - else { - editor.emit("showClippathEditorView"); - } - } else - ; - } - } -}; -var __glob_0_74 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": open_editor -}, Symbol.toStringTag, { value: "Module" })); -var pauseTimelineItem = { - command: "pauseTimelineItem", - execute: function(editor) { - if (editor.timer) { - editor.timer.stop(); - } - } -}; -var __glob_0_75 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": pauseTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var playTimelineItem = { - command: "playTimelineItem", - description: "Play button action", - execute: function(editor, speed2 = 1, iterationCount = 1, direction2 = "normal") { - editor.context.selection.empty(); - _currentProject(editor, (project2, timeline) => { - var lastTime = project2.getSelectedTimelineLastTime(); - if (editor.timer) { - editor.timer.stop(); - } else { - editor.timer = makeTimer({ - elapsed: timeline.currentTime * 1e3, - speed: speed2, - duration: lastTime * 1e3, - iterationCount, - direction: direction2 - }); - } - editor.timer.play({ - duration: lastTime * 1e3, - elapsed: timeline.currentTime * 1e3, - speed: speed2, - iterationCount, - direction: direction2, - tick: (elapsed) => { - project2.seek(timecode(timeline.fps, elapsed / 1e3)); - editor.emit("playTimeline"); - }, - last: (elapsed) => { - project2.seek(timecode(timeline.fps, elapsed / 1e3)); - editor.emit("playTimeline"); - editor.nextTick(() => { - editor.emit("stopTimeline"); - }); - }, - stop: (elapsed) => { - project2.stop(timecode(timeline.fps, elapsed / 1e3)); - editor.emit("stopTimeline"); - } - }); - }); - } -}; -var __glob_0_76 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": playTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var prevTimelineItem = { - command: "prevTimelineItem", - execute: function(editor) { - _currentProject(editor, (project2, timeline) => { - var prevTime = project2.getSelectedTimelinePrevTime(); - project2.setTimelineCurrentTime(timecode(timeline.fps, prevTime)); - project2.seek(); - editor.emit("playTimeline"); - }); - } -}; -var __glob_0_77 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": prevTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var recoverBooleanPath = { - command: "recoverBooleanPath", - description: "recover box rectangle for boolean path result", - execute: function(editor) { - const current = editor.context.selection.current; - let booleanContainer; - if (current && current.isBooleanItem) { - booleanContainer = current.parent; - } else if (current && current.is("boolean-path")) { - booleanContainer = current; - } - if (booleanContainer) { - const isBooleanItem = typeof current.isBooleanItem === "boolean" && current.isBooleanItem; - const booleanPath = booleanContainer.d; - if (!booleanPath) { - return; - } - const layersCache = booleanContainer.layers.map((it) => { - return { - item: it, - matrix: it.matrix - }; - }); - const newBooleanContainerRect = booleanContainer.updatePath(booleanPath); - delete newBooleanContainerRect.d; - booleanContainer.reset(newBooleanContainerRect); - layersCache.forEach((it) => { - booleanContainer.resetMatrix(it.item); - }); - const ids = [...layersCache.map((it) => it.item.id), booleanContainer.id]; - const data = editor.context.selection.packByIds(ids, "x", "y", "width", "height"); - editor.context.commands.executeCommand("setAttribute", "fit boolean path", data, { - origin: "*", - doNotChildrenScale: isBooleanItem - }); - } - } -}; -var __glob_0_78 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": recoverBooleanPath -}, Symbol.toStringTag, { value: "Module" })); -var refreshArtboard = { - command: "refreshArtboard", - execute: function(editor) { - const command = editor.createCommandMaker(); - command.emit("refreshLayerTreeView"); - command.emit("refreshAllCanvas"); - command.emit(UPDATE_CANVAS); - command.emit("refreshAllElementBoundSize"); - command.emit(REFRESH_SELECTION); - command.run(); - } -}; -var __glob_0_79 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": refreshArtboard -}, Symbol.toStringTag, { value: "Module" })); -function makeEmitList(maker, current) { - var _a; - if (current.hasLayout()) { - maker.emit("refreshElementBoundSize", current); - } else { - if (current && (current.isLayoutItem() || ((_a = current.parent) == null ? void 0 : _a.is("boolean-path")))) { - maker.emit("refreshElementBoundSize", current.parent); - } else { - maker.emit("refreshElementBoundSize", current); - } - } -} -var refreshElement = { - command: "refreshElement", - execute: function(editor, current, checkRefreshCanvas = true) { - const maker = editor.createCommandMaker(); - if (isArray(current)) { - if (checkRefreshCanvas) { - maker.emit("refreshAllCanvas"); - } - maker.emit(UPDATE_CANVAS, current); - current.forEach((item) => { - makeEmitList(maker, item); - }); - } else { - if (checkRefreshCanvas) { - if (current && current.hasChangedField("children", "changedChildren", "parentId")) { - maker.emit("refreshAllCanvas"); - } - } - maker.emit(UPDATE_CANVAS, current); - makeEmitList(maker, current); - } - maker.run(); - } -}; -var __glob_0_80 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": refreshElement -}, Symbol.toStringTag, { value: "Module" })); -function refreshHistory(editor) { - editor.context.commands.emit("saveJSON"); -} -var __glob_0_81 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": refreshHistory -}, Symbol.toStringTag, { value: "Module" })); -var refreshSelectedOffset = { - command: "refreshSelectedOffset", - execute: function(editor) { - var offset = editor.timeline.items[0]; - if (offset) { - editor.emit("refreshOffsetValue", offset); - } - } -}; -var __glob_0_82 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": refreshSelectedOffset -}, Symbol.toStringTag, { value: "Module" })); -var removeAnimationItem = { - command: "removeAnimationItem", - execute: function(editor, id) { - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.removeAnimationItem(id); - editor.timeline.empty(); - editor.emit("refreshTimeline"); - editor.emit("removeAnimation"); - } - } -}; -var __glob_0_83 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": removeAnimationItem -}, Symbol.toStringTag, { value: "Module" })); -var removeLayer = { - command: "removeLayer", - execute: function(editor, ids = void 0) { - const currentIds = ids || editor.context.selection.ids; - const removedIds = []; - editor.context.selection.itemsByIds(currentIds).forEach((item) => { - removedIds.push(item.id); - item.remove(); - }); - editor.context.selection.removeById(removedIds); - editor.nextTick(() => { - editor.emit("refreshAll"); - }); - } -}; -var __glob_0_84 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": removeLayer -}, Symbol.toStringTag, { value: "Module" })); -var removeTimeline = { - command: "removeTimeline", - execute: function(editor, layerId) { - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.removeTimeline(layerId); - editor.timeline.empty(); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - } - } -}; -var __glob_0_85 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": removeTimeline -}, Symbol.toStringTag, { value: "Module" })); -var removeTimelineProperty = { - command: "removeTimelineProperty", - execute: function(editor, layerId, property) { - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.removeTimelineProperty(layerId, property); - editor.timeline.empty(); - editor.emit("refreshTimeline"); - editor.emit("refreshSelectedOffset"); - } - } -}; -var __glob_0_86 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": removeTimelineProperty -}, Symbol.toStringTag, { value: "Module" })); -function resizeArtBoard(editor, size2 = "") { - var current = editor.context.selection.current; - if (current && current.is("artboard")) { - if (!size2.trim()) - return; - var [width2, height2] = size2.split("x"); - width2 = +width2; - height2 = +height2; - current.resize(width2, height2); - editor.context.selection.select(current); - _doForceRefreshSelection(editor); - } -} -var __glob_0_87 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": resizeArtBoard -}, Symbol.toStringTag, { value: "Module" })); -var rotateLayer = { - command: "rotateLayer", - description: "rotate layer by keydown with matrix ", - execute: function(editor, distAngle = 0) { - editor.context.commands.executeCommand("setAttribute", "change rotate", editor.context.selection.packByValue({ - angle: editor.context.selection.current.angle + distAngle - })); - } -}; -var __glob_0_88 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": rotateLayer -}, Symbol.toStringTag, { value: "Module" })); -var same_height = { - command: "same.height", - description: "fit at the same height", - execute: function(editor) { - var len2 = editor.context.selection.length; - if (len2 == 1) - ; - else if (len2 > 1) { - const rect2 = vertiesToRectangle(editor.context.selection.verties); - editor.context.commands.executeCommand("setAttribute", "fit at the same height", editor.context.selection.packByValue({ - y: rect2.y, - height: rect2.height - })); - } - } -}; -var __glob_0_89 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": same_height -}, Symbol.toStringTag, { value: "Module" })); -var same_width = { - command: "same.width", - description: "fit at the same width", - execute: function(editor) { - if (editor.context.selection.isMany) { - const rect2 = vertiesToRectangle(editor.context.selection.verties); - editor.context.commands.executeCommand("setAttribute", "fit at the same width", editor.context.selection.packByValue({ - x: rect2.x, - width: rect2.width - })); - } - } -}; -var __glob_0_90 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": same_width -}, Symbol.toStringTag, { value: "Module" })); -var saveJSON = { - command: "saveJSON", - execute: function(editor) { - editor.saveItem("model", editor.context.modelManager.toJSON()); - } -}; -var __glob_0_91 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": saveJSON -}, Symbol.toStringTag, { value: "Module" })); -var savePNG = { - command: "savePNG", - execute: function(editor, callbackCommand = "") { - const item = editor.context.selection.current; - if (item) { - const svgString = ExportManager.generateSVG(editor, item).trim(); - const datauri = "data:image/svg+xml;base64," + window.btoa(svgString); - loadOriginalImage({ local: datauri }, (info, img) => { - createImagePng(img, (pngDataUri) => { - if (callbackCommand) { - editor.emit(callbackCommand, pngDataUri); - } - }); - }); - } - } -}; -var __glob_0_92 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": savePNG -}, Symbol.toStringTag, { value: "Module" })); -var segment_delete = { - command: "segment.delete", - execute: function(editor) { - editor.emit("deleteSegment"); - } -}; -var __glob_0_93 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": segment_delete -}, Symbol.toStringTag, { value: "Module" })); -var segment_move_down = { - command: "segment.move.down", - execute: function(editor, obj2 = { dy: 1 }) { - const dy = +obj2.dy; - editor.emit("moveSegment", 0, dy); - } -}; -var __glob_0_94 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": segment_move_down -}, Symbol.toStringTag, { value: "Module" })); -var segment_move_left = { - command: "segment.move.left", - execute: function(editor, obj2 = { dx: 1 }) { - const dx = +obj2.dx; - editor.emit("moveSegment", -1 * dx, 0); - } -}; -var __glob_0_95 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": segment_move_left -}, Symbol.toStringTag, { value: "Module" })); -var segment_move_right = { - command: "segment.move.right", - execute: function(editor, obj2 = { dx: 1 }) { - const dx = +obj2.dx; - editor.emit("moveSegment", dx, 0); - } -}; -var __glob_0_96 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": segment_move_right -}, Symbol.toStringTag, { value: "Module" })); -var segment_move_up = { - command: "segment.move.up", - execute: function(editor, obj2 = { dy: 1 }) { - const dy = +obj2.dy; - editor.emit("moveSegment", 0, -1 * dy); - } -}; -var __glob_0_97 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": segment_move_up -}, Symbol.toStringTag, { value: "Module" })); -var select_all = { - command: "select.all", - execute: function(editor) { - var project2 = editor.context.selection.currentProject; - if (project2) { - editor.context.selection.select(...project2.layers); - editor.context.commands.emit("history.refreshSelection"); - } - } -}; -var __glob_0_98 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": select_all -}, Symbol.toStringTag, { value: "Module" })); -var select_none = { - command: "select.none", - execute: function(editor) { - editor.context.selection.empty(); - editor.context.commands.emit("history.refreshSelection"); - } -}; -var __glob_0_99 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": select_none -}, Symbol.toStringTag, { value: "Module" })); -var selectTimelineItem = { - command: "selectTimelineItem", - execute: function(editor, selectedId) { - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.selectTimeline(selectedId); - editor.emit("refreshTimeline"); - editor.emit("selectTimeline"); - } - } -}; -var __glob_0_100 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": selectTimelineItem -}, Symbol.toStringTag, { value: "Module" })); -var setAttribute = { - command: "setAttribute", - execute: function(editor, multiAttrs = {}, context = { origin: "*" }) { - const messages = []; - Object.entries(multiAttrs).forEach(([id, attrs]) => { - const item = editor.get(id); - const newAttrs = {}; - Object.entries(attrs).forEach(([key, value]) => { - newAttrs[key] = isFunction(value) ? value(item) : value; - }); - messages.push({ id: item.id, parentId: item.parentId, attrs: newAttrs }); - }); - if (messages.length == 0) { - return; - } - let hasRefreshCanvas = false; - const children2 = []; - messages.forEach((message) => { - const item = editor.get(message.id); - if (item) { - item.reset(message.attrs, context); - if (item.hasChangedField("layout")) { - item.layers.forEach((child) => { - if (child.isLayout(Layout.DEFAULT)) - ; - else if (child.isLayout(Layout.FLEX)) - ; - else if (child.isLayout(Layout.GRID)) - ; - editor.context.commands.emit("refreshElement", child); - }); - } - children2.push(item); - if (item.hasChangedHirachy) { - hasRefreshCanvas = true; - } - } - if (item.is("project")) { - return; - } - if (item.parent && item.parent.is("project")) { - return; - } - if (item.isLayoutItem() || item.isBooleanItem) { - const parent = editor.get(message.parentId); - if (message.parentId && (parent == null ? void 0 : parent.isNot("project"))) { - parent.reset({ changedChildren: true }, context); - hasRefreshCanvas = true; - } - } - }); - if (children2.length) { - editor.context.commands.emit("refreshElement", children2, false); - } - if (hasRefreshCanvas) { - editor.emit("refreshAllCanvas"); - } - } -}; -var __glob_0_101 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": setAttribute -}, Symbol.toStringTag, { value: "Module" })); -var setTimelineOffset = { - command: "setTimelineOffset", - debounce: 100, - execute: function(editor, obj2) { - const project2 = editor.context.selection.currentProject; - if (project2) { - project2.setTimelineKeyframeOffsetValue(obj2.layerId, obj2.property, obj2.id, obj2.value, obj2.timing, obj2.time); - editor.emit("refreshTimeline"); - } - } -}; -var __glob_0_102 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": setTimelineOffset -}, Symbol.toStringTag, { value: "Module" })); -var showExportView = { - command: "showExportView", - execute: function(editor) { - editor.emit("showExportWindow"); - } -}; -var __glob_0_103 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": showExportView -}, Symbol.toStringTag, { value: "Module" })); -var sort_bottom = { - command: "sort.bottom", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else { - const parent = current.parent; - const distY = getVertiesMaxY(parent.verties) - getVertiesMaxY(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", 0, distY); - } - } else if (editor.context.selection.isMany) { - let maxRightY = getVertiesMaxY(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightY = getVertiesMaxY(item.verties); - return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; - })); - } - } -}; -var __glob_0_104 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_bottom -}, Symbol.toStringTag, { value: "Module" })); -var sort_center = { - command: "sort.center", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else if (current.artboard) { - const distX = getVertiesCenterX(current.artboard.verties) - getVertiesCenterX(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", distX, 0); - } - } else if (editor.context.selection.isMany) { - let maxRightX = getVertiesCenterX(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightX = getVertiesCenterX(item.verties); - return { item, dist: [maxRightX - itemRightX, 0, 0] }; - })); - } - } -}; -var __glob_0_105 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_center -}, Symbol.toStringTag, { value: "Module" })); -var sort_left = { - command: "sort.left", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else { - const parent = current.parent; - const distX = getVertiesMinX(parent.verties) - getVertiesMinX(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", distX, 0); - } - } else if (editor.context.selection.isMany) { - let maxRightX = getVertiesMinX(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightX = getVertiesMinX(item.verties); - return { item, dist: [maxRightX - itemRightX, 0, 0] }; - })); - } - } -}; -var __glob_0_106 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_left -}, Symbol.toStringTag, { value: "Module" })); -var sort_middle = { - command: "sort.middle", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else if (current.artboard) { - const distY = getVertiesCenterY(current.artboard.verties) - getVertiesCenterY(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", 0, distY); - } - } else if (editor.context.selection.isMany) { - let maxRightY = getVertiesCenterY(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightY = getVertiesCenterY(item.verties); - return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; - })); - } - } -}; -var __glob_0_107 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_middle -}, Symbol.toStringTag, { value: "Module" })); -var sort_right = { - command: "sort.right", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else { - const parent = current.parent; - const distX = getVertiesMaxX(parent.verties) - getVertiesMaxX(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", distX, 0); - } - } else if (editor.context.selection.isMany) { - let maxRightX = getVertiesMaxX(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightX = getVertiesMaxX(item.verties); - return { item, dist: [maxRightX - itemRightX, 0, 0] }; - })); - } - } -}; -var __glob_0_108 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_right -}, Symbol.toStringTag, { value: "Module" })); -var sort_top = { - command: "sort.top", - execute: function(editor) { - if (editor.context.selection.isOne) { - const current = editor.context.selection.current; - if (current.parent.is("project")) - ; - else { - const parent = current.parent; - const distY = getVertiesMinY(parent.verties) - getVertiesMinY(editor.context.selection.verties); - editor.context.commands.emit("moveLayer", 0, distY); - } - } else if (editor.context.selection.isMany) { - let maxRightY = getVertiesMinY(editor.context.selection.verties); - editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { - let itemRightY = getVertiesMinY(item.verties); - return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; - })); - } - } -}; -var __glob_0_109 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": sort_top -}, Symbol.toStringTag, { value: "Module" })); -var switch_path = { - command: "switch.path", - execute: async (editor) => { - const current = editor.context.selection.current; - if (!current) - return; - if (current.is("boolean-path") || current.isBooleanItem) { - let parent = current; - if (current.isBooleanItem) { - parent = current.parent; - } - editor.context.selection.select(parent); - editor.context.commands.executeCommand("setAttribute", "change boolean operation", editor.context.selection.packByValue({ - booleanOperation: parent["boolean-operation"], - children: parent.children.reverse() - })); - editor.nextTick(() => { - editor.context.commands.emit("recoverBooleanPath"); - editor.context.selection.select(current); - }); - } - } -}; -var __glob_0_110 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": switch_path -}, Symbol.toStringTag, { value: "Module" })); -var ungroup_item = { - command: "ungroup.item", - execute: function(editor) { - if (editor.context.selection.length === 0) - return; - const current = editor.context.selection.current; - if (current) { - let groupLayer = current; - let layers2 = [...groupLayer.layers]; - layers2.reverse(); - layers2.forEach((child) => { - groupLayer.insertBefore(child); - }); - editor.context.selection.select(...layers2); - editor.emit("refreshAll"); - } - } -}; -var __glob_0_111 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": ungroup_item -}, Symbol.toStringTag, { value: "Module" })); -var updateClipPath = { - command: "updateClipPath", - description: "update clip-path property ", - execute: function(editor, pathObject) { - editor.context.commands.executeCommand("setAttribute", "change clip-path", editor.context.selection.packByValue({ - clipPath: `path(${pathObject.d})` - })); - } -}; -var __glob_0_112 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateClipPath -}, Symbol.toStringTag, { value: "Module" })); -var updateImage = { - command: "updateImage", - execute: function(editor, imageFileOrBlob, rect2, containerItem) { - var reader = new window.FileReader(); - reader.onload = (e) => { - var datauri = e.target.result; - var local = window.URL.createObjectURL(imageFileOrBlob); - editor.context.commands.emit("addImageAssetItem", { - id: uuidShort(), - type: imageFileOrBlob.type, - name: imageFileOrBlob.name, - original: datauri, - local - }, rect2, containerItem); - }; - reader.readAsDataURL(imageFileOrBlob); - } -}; -var __glob_0_113 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateImage -}, Symbol.toStringTag, { value: "Module" })); -var updateImageAssetItem = { - command: "updateImageAssetItem", - execute: function(editor, item, callback) { - var reader = new window.FileReader(); - reader.onload = (e) => { - var datauri = e.target.result; - var local = window.URL.createObjectURL(item); - var project2 = editor.context.selection.currentProject; - if (project2) { - const image2 = project2.createImage({ - id: uuidShort(), - type: item.type, - name: item.name, - original: datauri, - local - }); - editor.context.commands.emit("addImageAsset"); - isFunction(callback) && callback(image2.id); - } - }; - reader.readAsDataURL(item); - } -}; -var __glob_0_114 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateImageAssetItem -}, Symbol.toStringTag, { value: "Module" })); -const MAX_CACHE_COUNT = 1e3; -const cachedTransformMap = /* @__PURE__ */ new Map(); -class TransformCache { - static has(key) { - return cachedTransformMap.has(key); - } - static get(key) { - return cachedTransformMap.get(key); - } - static set(key, parsedValue) { - if (cachedTransformMap.size > MAX_CACHE_COUNT) { - cachedTransformMap.clear(); - } - cachedTransformMap.set(key, parsedValue); - } -} -const TRANSFORM_REG = /((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi; -class Transform extends PropertyItem { - getDefaultObject() { - return { - itemType: "transform", - value: [] - }; - } - toCloneObject() { - return __spreadValues({}, this.attrs("itemType", "type", "value")); - } - toString() { - return `${this.json.type}(${this.json.value.join(", ") || ""})`; - } - static join(list2) { - var firstType = "perspective"; - var lastType = "matrix3d"; - var arr = list2.filter((it) => it.type === firstType); - var last = list2.filter((it) => it.type === lastType); - var arr2 = list2.filter((it) => it.type !== firstType && it.type !== lastType); - return [...arr, ...arr2, ...last].map((it) => new Transform(it).toString()).join(" "); - } - hasNumberValue() { - var type = this.json.type; - return type.includes("matrix") || type.includes("scale"); - } - static parse(transform2) { - return new Transform(transform2); - } - static remove(transform2, type = []) { - if (typeof type === "string") { - type = [type]; - } - return Transform.filter(transform2, (it) => { - return type.includes(it.type) === false; - }); - } - static filter(transform2, filterFunction) { - return Transform.join(Transform.parseStyle(transform2, false).filter((it) => filterFunction(it))); - } - static replace(transform2, valueObject) { - var obj2 = Transform.parseStyle(transform2, false); - var tObject = obj2.find((t) => t.type === valueObject.type); - if (tObject) { - tObject.value = valueObject.value; - } else { - obj2.push(valueObject); - } - return Transform.join(obj2); - } - static replaceAll(oldTransform, newTransform) { - var oldT = Transform.parseStyle(oldTransform, false); - var newT = Transform.parseStyle(newTransform); - for (var i = 0, len2 = newT.length; i < len2; i++) { - var newObject = newT[i]; - var oldObject = oldT.find((t) => t.type === newObject.type); - if (oldObject) { - oldObject.value = newObject.value; - } else { - oldT.push(newObject); - } - } - return Transform.join(oldT); - } - static addTransform(oldTransform, newTransform) { - var oldT = Transform.parseStyle(oldTransform, false); - var newT = Transform.parseStyle(newTransform); - for (var i = 0, len2 = newT.length; i < len2; i++) { - var newObject = newT[i]; - var oldObject = oldT.find((t) => t.type === newObject.type); - if (oldObject) { - newObject.value.forEach((v, i2) => { - oldObject.value[i2].value += v.value; - }); - } else { - oldT.push(newObject); - } - } - return Transform.join(oldT); - } - static get(transform2, type) { - var arr = Transform.parseStyle(transform2, true); - if (typeof type === "function") { - arr = arr.find(type); - } else { - arr = arr.find((it) => it.type === type); - } - if (arr) { - return arr.value; - } - return void 0; - } - static createRotateKey(transform2, angle, field) { - return `${transform2}:::${field}(${angle})`; - } - static rotate(transform2, angle, field = "rotate") { - const key = Transform.createRotateKey(transform2, angle, field); - if (TransformCache.has(key)) - return TransformCache.get(key); - TransformCache.set(key, Transform.replace(transform2, { type: field, value: [angle] })); - return TransformCache.get(key); - } - static rotateZ(transform2, angle) { - return Transform.rotate(transform2, angle, "rotateZ"); - } - static rotateX(transform2, angle) { - return Transform.rotate(transform2, angle, "rotateX"); - } - static rotateY(transform2, angle) { - return Transform.rotate(transform2, angle, "rotateY"); - } - static parseStyle(transform2, doCache = true) { - var transforms = []; - if (!transform2) - return transforms; - if (doCache && TransformCache.has(transform2)) { - return TransformCache.get(transform2); - } - var matches2 = transform2.match(TRANSFORM_REG) || []; - matches2.forEach((value, index2) => { - var [transformName, transformValue] = value.split("("); - transformValue = transformValue.split(")")[0]; - var arr = transformValue.split(","); - if (transformValue.includes("matrix") || transformValue.includes("scale")) { - arr = arr.map((it) => Length.number(it.trim())); - } else { - arr = arr.map((it) => Length.parse(it.trim())); - } - transforms[index2] = Transform.parse({ - type: transformName, - value: arr - }); - }); - if (doCache) { - TransformCache.set(transform2, transforms); - } - return transforms; - } - static createTransformMatrix(parsedTransformList, width2, height2) { - const view = create$4(); - for (let i = 0, len2 = parsedTransformList.length; i < len2; i++) { - const it = parsedTransformList[i]; - switch (it.type) { - case "translate": - case "translateX": - case "translateY": - case "translateZ": - var values = it.value; - if (it.type === "translate") { - values = [ - values[0].toPx(width2).value, - values[1].toPx(height2).value, - 0 - ]; - } else if (it.type === "translateX") { - values = [values[0].toPx(width2).value, 0, 0]; - } else if (it.type === "translateY") { - values = [0, values[0].toPx(height2).value, 0]; - } else if (it.type === "translateZ") { - values = [0, 0, values[0].toPx().value]; - } - translate(view, view, values); - break; - case "rotate": - case "rotateZ": - rotateZ(view, view, degreeToRadian(it.value[0].value)); - break; - case "rotateX": - rotateX(view, view, degreeToRadian(it.value[0].value)); - break; - case "rotateY": - rotateY(view, view, degreeToRadian(it.value[0].value)); - break; - case "rotate3d": - var values = it.value; - rotate$1(view, view, degreeToRadian(it.value[3].value), [ - values[0].value, - values[1].value, - values[2].value - ]); - break; - case "scale": - scale$1(view, view, [it.value[0].value, it.value[1].value, 1]); - break; - case "scaleX": - scale$1(view, view, [it.value[0].value, 1, 1]); - break; - case "scaleY": - scale$1(view, view, [1, it.value[0].value, 1]); - break; - case "scaleZ": - scale$1(view, view, [1, 1, it.value[0].value]); - break; - case "skewX": - var rad = it.value[0].toDeg().toRad(); - multiply$1(view, view, fromValues$1(1, 0, 0, 0, Math.tan(rad.value), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); - break; - case "skewY": - var rad = it.value[0].toDeg().toRad(); - multiply$1(view, view, fromValues$1(1, Math.tan(rad.value), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); - break; - case "skew": - const skewX = it.value[0].toDeg().toRad(); - const skewY = it.value.length > 1 ? it.value[1].toDeg().toRad() : skewX; - multiply$1(view, view, fromValues$1(1, Math.tan(skewY.value), 0, 0, Math.tan(skewX.value), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); - break; - case "matrix": - var values = it.value; - values = [ - values[0].value, - values[1].value, - 0, - 0, - values[2].value, - values[3].value, - 0, - 0, - 0, - 0, - 1, - 0, - values[4].value, - values[5].value, - 0, - 1 - ]; - multiply$1(view, view, values); - break; - case "matrix3d": - var values = it.value.map((it2) => it2.value); - multiply$1(view, view, values); - break; - case "perspective": - var values = it.value; - perspective(view, Math.PI * 0.5, width2 / height2, 1, values[0].value); - break; - } - } - return view; - } - static fromScale(scale2) { - if (scale2[0] === 1 && scale2[1] === 1) { - return ""; - } - const list2 = []; - if (scale2[0] != 1) - list2.push(`scaleX(${scale2[0]})`); - if (scale2[1] != 1) - list2.push(`scaleY(${scale2[1]})`); - if (scale2[2] != 1) - list2.push(`scaleZ(${scale2[2]})`); - return list2.join(" "); - } -} -var updatePathItem = { - command: "updatePathItem", - description: "Update path string for selected svg path item", - execute: function(editor, pathObject) { - const current = editor.context.selection.current; - if (current) { - if (pathObject.box === "box") { - const newPath = current.invertPath(pathObject.d); - editor.context.commands.executeCommand("setAttribute", "change local path", editor.context.selection.packByValue({ - d: newPath.d - })); - } else { - const newPath = new PathParser(pathObject.d); - newPath.transformMat4(pathObject.matrix.absoluteMatrixInverse); - let bbox = newPath.getBBox(); - const newWidth = distance$1(bbox[1], bbox[0]); - const newHeight = distance$1(bbox[3], bbox[0]); - let oldBBox = vertiesMap(rectToVerties(bbox[0][0], bbox[0][1], newWidth, newHeight), pathObject.matrix.absoluteMatrix); - let newBBox = vertiesMap(oldBBox, calculateMatrixInverse(fromTranslation([], oldBBox[4]), Transform.createTransformMatrix(Transform.parseStyle(pathObject.matrix.transform), newWidth, newHeight), fromTranslation([], negate([], oldBBox[4])))); - const worldMatrix = calculateMatrix(fromTranslation([], newBBox[0]), current.getLocalTransformMatrix(newWidth, newHeight)); - const realXY = getTranslation([], calculateMatrix(pathObject.matrix.parentMatrixInverse, worldMatrix, invert([], current.getLocalTransformMatrix(newWidth, newHeight)))); - editor.context.commands.executeCommand("setAttribute", "change path", editor.context.selection.packByValue({ - d: newPath.translate(-bbox[0][0], -bbox[0][1]).d, - x: realXY[0], - y: realXY[1], - width: newWidth, - height: newHeight - })); - } - } - } -}; -var __glob_0_115 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updatePathItem -}, Symbol.toStringTag, { value: "Module" })); -var updateResource = { - command: "updateResource", - execute: function(editor, items) { - items.forEach((item) => { - switch (item.type) { - case "image/svg+xml": - case "image/png": - case "image/gif": - case "image/jpg": - case "image/jpeg": - editor.context.commands.emit("updateImage", item); - break; - case "text/plain": - case "text/html": - editor.context.commands.emit("addText", { - content: item.data - }); - break; - case "text/uri-list": - editor.context.commands.emit("updateUriList", item); - break; - } - }); - } -}; -var __glob_0_116 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateResource -}, Symbol.toStringTag, { value: "Module" })); -var updateUriList = { - command: "updateUriList", - execute: function(editor, item) { - var datauri = item.data; - if (datauri.indexOf("data:") > -1) { - var info = AssetParser.parse(datauri, true); - switch (info.mimeType) { - case "image/png": - case "image/gif": - case "image/jpg": - case "image/jpeg": - editor.context.commands.emit("addImageAssetItem", { - id: uuidShort(), - type: info.mimeType, - name: "", - original: datauri, - local: info.local - }); - break; - } - } else { - var ext = item.data.split(".").pop(); - var name = item.data.split("/").pop(); - switch (ext) { - case "png": - case "jpg": - case "gif": - case "svg": - editor.context.commands.emit("addImageAssetItem", { - id: uuidShort(), - type: "image/" + ext, - name, - original: item.data, - local: item.data - }); - break; - } - } - } -}; -var __glob_0_117 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateUriList -}, Symbol.toStringTag, { value: "Module" })); -var updateVideo = { - command: "updateVideo", - execute: function(editor, item, rect2, containerItem = void 0) { - var reader = new window.FileReader(); - reader.onload = (e) => { - var datauri = e.target.result; - var local = window.URL.createObjectURL(item); - editor.context.commands.emit("addVideoAssetItem", { - id: uuidShort(), - type: item.type, - name: item.name, - original: datauri, - local - }, rect2, containerItem); - }; - reader.readAsDataURL(item); - } -}; -var __glob_0_118 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateVideo -}, Symbol.toStringTag, { value: "Module" })); -var updateVideoAssetItem = { - command: "updateVideoAssetItem", - execute: function(editor, item, callback) { - var reader = new window.FileReader(); - reader.onload = (e) => { - var datauri = e.target.result; - var local = window.URL.createObjectURL(item); - var project2 = editor.context.selection.currentProject; - if (project2) { - project2.createVideo({ - id: uuidShort(), - type: item.type, - name: item.name, - original: datauri, - local - }); - editor.emit("addVideoAsset"); - isFunction(callback) && callback(local); - } - }; - reader.readAsDataURL(item); - } -}; -var __glob_0_119 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": updateVideoAssetItem -}, Symbol.toStringTag, { value: "Module" })); -var update = { - command: "update", - description: "Update the model", - execute: function(editor, id = null, attrs = {}, context = { origin: "*" }) { - const item = editor.get(id); - if (item) { - const isChanged = item.reset(attrs, context); - if (isChanged) { - editor.context.commands.emit("refreshElement", item); - } - } - } -}; -var __glob_0_120 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": update -}, Symbol.toStringTag, { value: "Module" })); -const modules$2 = { "./command_list/_currentProject.js": __glob_0_0$2, "./command_list/_doForceRefreshSelection.js": __glob_0_1$2, "./command_list/addArtBoard.js": __glob_0_2$1, "./command_list/addBackgroundColor.js": __glob_0_3$1, "./command_list/addBackgroundImageAsset.js": __glob_0_4$1, "./command_list/addBackgroundImageGradient.js": __glob_0_5$1, "./command_list/addBackgroundImagePattern.js": __glob_0_6$1, "./command_list/addCustomComponent.js": __glob_0_7$1, "./command_list/addImage.js": __glob_0_8$1, "./command_list/addImageAssetItem.js": __glob_0_9$1, "./command_list/addLayer.js": __glob_0_10$1, "./command_list/addLayerView.js": __glob_0_11$1, "./command_list/addProject.js": __glob_0_12$1, "./command_list/addSVGFilterAssetItem.js": __glob_0_13$1, "./command_list/addText.js": __glob_0_14$1, "./command_list/addTimelineCurrentProperty.js": __glob_0_15$1, "./command_list/addTimelineItem.js": __glob_0_16$1, "./command_list/addTimelineKeyframe.js": __glob_0_17$1, "./command_list/addTimelineProperty.js": __glob_0_18$1, "./command_list/addVideo.js": __glob_0_19$1, "./command_list/addVideoAssetItem.js": __glob_0_20$1, "./command_list/clipboard.copy.js": __glob_0_21$1, "./command_list/clipboard.paste.js": __glob_0_22$1, "./command_list/convert.flatten.path.js": __glob_0_23$1, "./command_list/convert.no.transform.path.js": __glob_0_24, "./command_list/convert.normalize.path.js": __glob_0_25, "./command_list/convert.path.operation.js": __glob_0_26, "./command_list/convert.polygonal.path.js": __glob_0_27, "./command_list/convert.simplify.path.js": __glob_0_28, "./command_list/convert.smooth.path.js": __glob_0_29, "./command_list/convert.stroke.to.path.js": __glob_0_30, "./command_list/convertPasteText.js": __glob_0_31, "./command_list/convertPath.js": __glob_0_32, "./command_list/copy.path.js": __glob_0_33, "./command_list/copyLayer.js": __glob_0_34, "./command_list/copyTimelineProperty.js": __glob_0_35, "./command_list/deleteTimelineKeyframe.js": __glob_0_36, "./command_list/doubleclick.item.js": __glob_0_37, "./command_list/downloadJSON.js": __glob_0_38, "./command_list/downloadPNG.js": __glob_0_39, "./command_list/downloadSVG.js": __glob_0_40, "./command_list/drop.asset.js": __glob_0_41, "./command_list/dropImageUrl.js": __glob_0_42, "./command_list/editor.config.body.event.js": __glob_0_43, "./command_list/fileDropItems.js": __glob_0_44, "./command_list/firstTimelineItem.js": __glob_0_45, "./command_list/group.item.js": __glob_0_46, "./command_list/history.addLayer.js": __glob_0_47, "./command_list/history.bring.forward.js": __glob_0_48, "./command_list/history.bring.front.js": __glob_0_49, "./command_list/history.clipboard.paste.js": __glob_0_50, "./command_list/history.copyLayer.js": __glob_0_51, "./command_list/history.group.item.js": __glob_0_52, "./command_list/history.moveLayer.js": __glob_0_53, "./command_list/history.moveLayerToTarget.js": __glob_0_54, "./command_list/history.refreshSelection.js": __glob_0_55, "./command_list/history.refreshSelectionProject.js": __glob_0_56, "./command_list/history.removeLayer.js": __glob_0_57, "./command_list/history.removeProject.js": __glob_0_58, "./command_list/history.send.back.js": __glob_0_59, "./command_list/history.send.backward.js": __glob_0_60, "./command_list/history.setAttribute.js": __glob_0_61, "./command_list/item.move.depth.down.js": __glob_0_62, "./command_list/item.move.depth.first.js": __glob_0_63, "./command_list/item.move.depth.last.js": __glob_0_64, "./command_list/item.move.depth.up.js": __glob_0_65, "./command_list/keymap.keydown.js": __glob_0_66, "./command_list/lastTimelineItem.js": __glob_0_67, "./command_list/load.json.js": __glob_0_68, "./command_list/moveLayer.js": __glob_0_69, "./command_list/moveLayerForItems.js": __glob_0_70, "./command_list/moveSelectionToCenter.js": __glob_0_71, "./command_list/newComponent.js": __glob_0_72, "./command_list/nextTimelineItem.js": __glob_0_73, "./command_list/open.editor.js": __glob_0_74, "./command_list/pauseTimelineItem.js": __glob_0_75, "./command_list/playTimelineItem.js": __glob_0_76, "./command_list/prevTimelineItem.js": __glob_0_77, "./command_list/recoverBooleanPath.js": __glob_0_78, "./command_list/refreshArtboard.js": __glob_0_79, "./command_list/refreshElement.js": __glob_0_80, "./command_list/refreshHistory.js": __glob_0_81, "./command_list/refreshSelectedOffset.js": __glob_0_82, "./command_list/removeAnimationItem.js": __glob_0_83, "./command_list/removeLayer.js": __glob_0_84, "./command_list/removeTimeline.js": __glob_0_85, "./command_list/removeTimelineProperty.js": __glob_0_86, "./command_list/resizeArtBoard.js": __glob_0_87, "./command_list/rotateLayer.js": __glob_0_88, "./command_list/same.height.js": __glob_0_89, "./command_list/same.width.js": __glob_0_90, "./command_list/saveJSON.js": __glob_0_91, "./command_list/savePNG.js": __glob_0_92, "./command_list/segment.delete.js": __glob_0_93, "./command_list/segment.move.down.js": __glob_0_94, "./command_list/segment.move.left.js": __glob_0_95, "./command_list/segment.move.right.js": __glob_0_96, "./command_list/segment.move.up.js": __glob_0_97, "./command_list/select.all.js": __glob_0_98, "./command_list/select.none.js": __glob_0_99, "./command_list/selectTimelineItem.js": __glob_0_100, "./command_list/setAttribute.js": __glob_0_101, "./command_list/setTimelineOffset.js": __glob_0_102, "./command_list/showExportView.js": __glob_0_103, "./command_list/sort.bottom.js": __glob_0_104, "./command_list/sort.center.js": __glob_0_105, "./command_list/sort.left.js": __glob_0_106, "./command_list/sort.middle.js": __glob_0_107, "./command_list/sort.right.js": __glob_0_108, "./command_list/sort.top.js": __glob_0_109, "./command_list/switch.path.js": __glob_0_110, "./command_list/ungroup.item.js": __glob_0_111, "./command_list/updateClipPath.js": __glob_0_112, "./command_list/updateImage.js": __glob_0_113, "./command_list/updateImageAssetItem.js": __glob_0_114, "./command_list/updatePathItem.js": __glob_0_115, "./command_list/updateResource.js": __glob_0_116, "./command_list/updateUriList.js": __glob_0_117, "./command_list/updateVideo.js": __glob_0_118, "./command_list/updateVideoAssetItem.js": __glob_0_119, "./command_list/model/update.js": __glob_0_120 }; -const obj$1 = {}; -Object.entries(modules$2).forEach(([key, value]) => { - key = key.replace("./command_list/", "").replace(".js", ""); - obj$1[key] = value.default; -}); -function commands$1(editor) { - editor.loadCommands(obj$1); -} -var area_width = { - key: "area.width", - defaultValue: 100, - title: "Area Width to find layers fastly", - description: "Set area width/height", - type: "number" -}; -var __glob_0_0$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": area_width -}, Symbol.toStringTag, { value: "Module" })); -var debug_mode = { - key: "debug.mode", - defaultValue: false, - title: "debug mode", - description: "Set debug mode to on ", - type: "boolean" -}; -var __glob_0_1$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": debug_mode -}, Symbol.toStringTag, { value: "Module" })); -var editing_css_itemType = { - key: "editing.css.itemType", - defaultValue: "rect", - title: "set item type for editing css", - description: "set item type for editing css", - type: "string" -}; -var __glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editing_css_itemType -}, Symbol.toStringTag, { value: "Module" })); -var editing_draw_itemType = { - key: "editing.draw.itemType", - defaultValue: "path", - title: "set item type for editing draw", - description: "set item type for editing draw", - type: "string" -}; -var __glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editing_draw_itemType -}, Symbol.toStringTag, { value: "Module" })); -var editing_mode_itemType = { - key: "editing.mode.itemType", - defaultValue: "select", - title: "set item type for editing mode", - description: "set item type for editing mode", - type: "string" -}; -var __glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editing_mode_itemType -}, Symbol.toStringTag, { value: "Module" })); -var editing_mode = { - key: "editing.mode", - defaultValue: EditingMode.SELECT, - title: "set editing mode for Editor", - description: "set editing mode (select, append, draw, path)", - type: "string" -}; -var __glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editing_mode -}, Symbol.toStringTag, { value: "Module" })); -var editing_svg_itemType = { - key: "editing.svg.itemType", - defaultValue: "svg-rect", - title: "set item type for editing svg", - description: "set item type for editing svg", - type: "string" -}; -var __glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editing_svg_itemType -}, Symbol.toStringTag, { value: "Module" })); -var editor_design_mode = { - key: "editor.design.mode", - defaultValue: "design", - title: "Editor Design Mode ", - description: "Set editor's design mode", - options: ["design", "item"], - type: "select" -}; -var __glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editor_design_mode -}, Symbol.toStringTag, { value: "Module" })); -var editor_layout_mode = { - key: "editor.layout.mode", - defaultValue: "all", - title: "Editor Layout Mode ", - description: "Set editor's layout mode", - type: "string" -}; -var __glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editor_layout_mode -}, Symbol.toStringTag, { value: "Module" })); -var fixed_angle = { - key: "fixed.angle", - defaultValue: 15, - title: "fixed angle count", - description: "Set fixed angle", - type: "number" -}; -var __glob_0_9 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": fixed_angle -}, Symbol.toStringTag, { value: "Module" })); -var fixed_gradient_angle = { - key: "fixed.gradient.angle", - defaultValue: 1, - title: "fixed gradient angle count", - description: "Set fixed gradient angle", - type: "number" -}; -var __glob_0_10 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": fixed_gradient_angle -}, Symbol.toStringTag, { value: "Module" })); -var history_delay_ms = { - key: "history.delay.ms", - defaultValue: 500, - title: "history delay milliseconds", - description: "Set history delay time", - type: "number" -}; -var __glob_0_11 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": history_delay_ms -}, Symbol.toStringTag, { value: "Module" })); -var horizontal_line = { - key: "horizontal.line", - defaultValue: [], - title: "horizontal guide line for snap ", - description: "horizontal guide line for snap", - type: "array" -}; -var __glob_0_12 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": horizontal_line -}, Symbol.toStringTag, { value: "Module" })); -var horizontal_line_selected_index = { - key: "horizontal.line.selected.index", - defaultValue: -1, - title: "selected horizontal guide line index", - description: "selected horizontal guide line index", - type: "number" -}; -var __glob_0_13 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": horizontal_line_selected_index -}, Symbol.toStringTag, { value: "Module" })); -var set_drag_path_area = { - key: "set.drag.path.area", - defaultValue: false, - title: "Drag path area", - description: "Drag path area", - type: "boolean", - storage: "none" -}; -var __glob_0_14 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": set_drag_path_area -}, Symbol.toStringTag, { value: "Module" })); -var set_move_control_point = { - key: "set.move.control.point", - defaultValue: false, - title: "Moving Control Point", - description: "Moving Control Point", - type: "boolean", - storage: "none" -}; -var __glob_0_15 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": set_move_control_point -}, Symbol.toStringTag, { value: "Module" })); -var show_left_panel = { - key: "show.left.panel", - defaultValue: true, - title: "Show left panel", - description: "Set left panel visibility to on", - type: "boolean" -}; -var __glob_0_16 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": show_left_panel -}, Symbol.toStringTag, { value: "Module" })); -var show_outline = { - key: "show.outline", - defaultValue: false, - title: "Show outline", - description: "Set outline visibility to on", - type: "boolean" -}; -var __glob_0_17 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": show_outline -}, Symbol.toStringTag, { value: "Module" })); -var show_right_panel = { - key: "show.right.panel", - defaultValue: true, - title: "Show right panel", - description: "Set right panel visibility to on", - type: "boolean" -}; -var __glob_0_18 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": show_right_panel -}, Symbol.toStringTag, { value: "Module" })); -var show_ruler = { - key: "show.ruler", - defaultValue: true, - title: "Show ruler", - description: "Set ruler visibility to on", - type: "boolean" -}; -var __glob_0_19 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": show_ruler -}, Symbol.toStringTag, { value: "Module" })); -var snap_distance = { - key: "snap.distance", - defaultValue: 3, - title: "Snap distance between objects", - description: "Set snap distance", - type: "number" -}; -var __glob_0_20 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": snap_distance -}, Symbol.toStringTag, { value: "Module" })); -var snap_grid = { - key: "snap.grid", - defaultValue: 50, - title: "Snap grid size between objects", - description: "Set snap grid size", - type: "number" -}; -var __glob_0_21 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": snap_grid -}, Symbol.toStringTag, { value: "Module" })); -var vertical_line = { - key: "vertical.line", - defaultValue: [], - title: "vertical guide line for snap ", - description: "vertical guide line for snap", - type: "array" -}; -var __glob_0_22 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": vertical_line -}, Symbol.toStringTag, { value: "Module" })); -var vertical_line_selected_index = { - key: "vertical.line.selected.index", - defaultValue: -1, - title: "selected vertical guide line index", - description: "selected vertical guide line index", - type: "number" -}; -var __glob_0_23 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": vertical_line_selected_index -}, Symbol.toStringTag, { value: "Module" })); -const modules$1 = { "./config_list/area.width.js": __glob_0_0$1, "./config_list/debug.mode.js": __glob_0_1$1, "./config_list/editing.css.itemType.js": __glob_0_2, "./config_list/editing.draw.itemType.js": __glob_0_3, "./config_list/editing.mode.itemType.js": __glob_0_4, "./config_list/editing.mode.js": __glob_0_5, "./config_list/editing.svg.itemType.js": __glob_0_6, "./config_list/editor.design.mode.js": __glob_0_7, "./config_list/editor.layout.mode.js": __glob_0_8, "./config_list/fixed.angle.js": __glob_0_9, "./config_list/fixed.gradient.angle.js": __glob_0_10, "./config_list/history.delay.ms.js": __glob_0_11, "./config_list/horizontal.line.js": __glob_0_12, "./config_list/horizontal.line.selected.index.js": __glob_0_13, "./config_list/set.drag.path.area.js": __glob_0_14, "./config_list/set.move.control.point.js": __glob_0_15, "./config_list/show.left.panel.js": __glob_0_16, "./config_list/show.outline.js": __glob_0_17, "./config_list/show.right.panel.js": __glob_0_18, "./config_list/show.ruler.js": __glob_0_19, "./config_list/snap.distance.js": __glob_0_20, "./config_list/snap.grid.js": __glob_0_21, "./config_list/vertical.line.js": __glob_0_22, "./config_list/vertical.line.selected.index.js": __glob_0_23 }; -var configs$1 = Object.values(modules$1).map((it) => it.default); -function configs(editor) { - configs$1.forEach((config) => { - editor.registerConfig(config); - }); -} -class Selector extends PropertyItem { - static parse(obj2) { - return new Selector(obj2); - } - getDefaultObject(obj2) { - return super.getDefaultObject(__spreadValues({ - itemType: "selector", - selector: "", - properties: [] - }, obj2)); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("selector", "properties")); - } - isMultiStyle(key) { - switch (key) { - case "background-image": - case "var": - return true; - } - return false; - } - getMultiStyleString(p) { - switch (p.key) { - case "background-image": - return p.value.toString() + ";"; - } - return p.value.toString() + " !important;"; - } - toPropertyString() { - return this.json.properties.map((p) => { - if (this.isMultiStyle(p.key)) { - return this.getMultiStyleString(p); - } else { - var value = p.value.toString(); - if (value) { - var key = p.key; - if (key === "x") - key = "left"; - else if (key === "y") - key = "top"; - return `${key}: ${value} !important;`; - } else { - return ""; - } - } - }).join("\n"); - } - toCSSText(prefix = "") { - return `${prefix}${this.json.selector} { - ${this.toPropertyString()} -}`; - } - toCSS() { - return {}; - } - toString(prefix = "") { - return this.toCSSText(prefix); - } -} -var DefaultLayoutEngine = { - startCache(container) { - container.addCache("cachedSize", { - width: container.width, - height: container.height - }); - container.addCache("cachedLayerMatrix", container.layers.map((child) => { - child.startToCacheChildren(); - const { x, y, width: width2, height: height2 } = child.attrs("x", "y", "width", "height"); - return { - id: child.id, - matrix: { x, y, width: width2, height: height2 }, - constraints: { - horizontal: child[ConstraintsDirection.HORIZONTAL], - vertical: child[ConstraintsDirection.VERTICAL] - } - }; - })); - }, - recover(container) { - const obj2 = { - width: container.width, - height: container.height - }; - const currentContainerWidth = obj2.width; - const currentContainerHeight = obj2.height; - const cachedSize = container.getCache("cachedSize"); - const oldContainerWidth = cachedSize.width; - const oldContainerHeight = cachedSize.height; - const scaleX = currentContainerWidth / oldContainerWidth; - const scaleY = currentContainerHeight / oldContainerHeight; - const cachedLayerMatrix = container.getCache("cachedLayerMatrix"); - cachedLayerMatrix.forEach(({ id, matrix, constraints }) => { - const item = container.find(id); - const { x, y, width: width2, height: height2 } = matrix; - const left2 = x; - const right2 = oldContainerWidth - x - width2; - const top2 = y; - const bottom2 = oldContainerHeight - y - height2; - const localObj = {}; - switch (constraints.horizontal) { - case Constraints.MIN: - localObj.x = left2; - break; - case Constraints.MAX: - localObj.x = currentContainerWidth - right2 - width2; - break; - case Constraints.STRETCH: - localObj.x = left2; - localObj.width = currentContainerWidth - left2 - right2; - break; - case Constraints.SCALE: - localObj.x = left2 * scaleX; - localObj.width = width2 * scaleX; - break; - case Constraints.CENTER: - const halfWidth = width2 / 2; - const scaleNew = (x + halfWidth) / oldContainerWidth; - localObj.x = scaleNew * currentContainerWidth - halfWidth; - break; - } - switch (constraints.vertical) { - case Constraints.MIN: - localObj.y = top2; - break; - case Constraints.MAX: - localObj.y = currentContainerHeight - bottom2 - height2; - break; - case Constraints.STRETCH: - localObj.y = top2; - localObj.height = currentContainerHeight - top2 - bottom2; - break; - case Constraints.SCALE: - localObj.y = top2 * scaleY; - localObj.height = height2 * scaleY; - break; - case Constraints.CENTER: - const halfHeight = height2 / 2; - const scaleNew = (y + halfHeight) / oldContainerHeight; - localObj.y = scaleNew * currentContainerHeight - halfHeight; - break; - } - item.reset(localObj); - item.recoverChildren(); - }); - } -}; -var GridLayoutEngine = { - startCache() { - }, - recover() { - }, - updateGridArea(currentItem, gridInformation, scale2 = 1) { - if (currentItem.isInGrid() === false) - return; - const lastVerties = currentItem.originVerties; - const targetRect = vertiesToRectangle(lastVerties); - const { items } = gridInformation; - const epsilon = IntersectEpsilonNumberType.RECT / scale2; - const checkedGridRowColumnList = items.filter((it) => { - return polyPoly(lastVerties, it.originVerties); - }).filter((it) => { - const intersect = intersectRectRect(it.originRect, targetRect); - return Math.floor(intersect.width) > epsilon && Math.floor(intersect.height) > epsilon; - }); - if (checkedGridRowColumnList.length === 0) - return; - const rows = checkedGridRowColumnList.map((it) => it.row); - rows.sort((a, b) => a - b); - const columns = checkedGridRowColumnList.map((it) => it.column); - columns.sort((a, b) => a - b); - const gridColumnStart = columns[0]; - const gridColumnEnd = columns[columns.length - 1]; - const gridRowStart = rows[0]; - const gridRowEnd = rows[rows.length - 1]; - const gridArea = { - "grid-column-start": gridColumnStart, - "grid-column-end": gridColumnEnd + 1, - "grid-row-start": gridRowStart, - "grid-row-end": gridRowEnd + 1 - }; - currentItem.reset(gridArea); - return gridArea; - } -}; -class Offset extends PropertyItem { - static parse(obj2) { - return new Offset(obj2); - } - getDefaultObject() { - return super.getDefaultObject({ - itemType: "offset", - offset: Length.percent(0), - color: "rgba(255, 255, 255, 1)", - properties: [] - }); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("offset", "color", "properties")); - } - convert(json) { - json = super.convert(json); - json.offset = Length.parse(json.offset); - return json; - } - toCSSText() { - return `${this.json.offset} ${CSS_TO_STRING(this.toCSS())}`; - } - createProperty(data = {}) { - return this.addProperty(__spreadValues({ - checked: true, - value: 0 - }, data)); - } - addProperty(property) { - this.json.properties.push(property); - } - removeProperty(removeIndex) { - this.json.properties.splice(removeIndex, 1); - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - sortProperty(startIndex, targetIndex) { - this.sortItem(this.json.properties, startIndex, targetIndex); - } - updateProperty(index2, data = {}) { - Object.assign(this.json.properties[+index2], __spreadValues({}, data)); - } - updatePropertyByKey(key, data = {}) { - var arr = this.json.properties; - var index2 = -1; - for (var i = 0, len2 = arr.length; i < len2; i++) { - if (this.json.properties[i].key === key) { - index2 = i; - break; - } - } - Object.assign(this.json.properties[+index2], __spreadValues({}, data)); - } - toCSS() { - var obj2 = {}; - this.json.properties.forEach((it) => { - obj2 = __spreadValues(__spreadValues({}, obj2), it.toCSS()); - }); - return obj2; - } - toString() { - return this.toCSSText(); - } -} -class Keyframe extends PropertyItem { - static parse(obj2) { - return new Keyframe(obj2); - } - static parseStyle(style) { - var keyframes = []; - var keyframeKeys = {}; - if (style["keyframe"]) { - var results = convertMatches(style["keyframe"]); - results.str.split("|").map((it) => it.trim()).forEach((frameInfo, index2) => { - var [name, offset, property, ...values] = frameInfo.split(" "); - var propertyValue = values.join(" "); - if (!keyframeKeys[name]) { - keyframeKeys[name] = new Keyframe({ - name - }); - keyframes[index2] = name; - } - var filteredOffset = keyframeKeys[name].offsets.filter((it) => { - return it.offset.equals(Length.parse(offset)); - }); - var offsetObj = null; - if (filteredOffset.length) { - offsetObj = filteredOffset[0]; - } else { - offsetObj = new Offset({ - offset: Length.parse(offset) - }); - keyframeKeys[name].offsets.push(offsetObj); - } - offsetObj.addProperty({ - key: property, - value: reverseMatches(propertyValue, results.matches) - }); - }); - } - return keyframes.map((name) => { - keyframeKeys[name].offsets.forEach((offset) => { - var vars = []; - var properties = []; - offset.properties.forEach((p) => { - if (p.key.includes("--")) { - vars.push(p); - } else { - properties.push(p); - } - }); - let varValue = vars.map((it) => `${it.key}:${it.value}`).join(";"); - if (vars.length) { - properties.push({ key: "var", value: varValue }); - } - offset.properties = properties; - }); - return keyframeKeys[name]; - }); - } - getDefaultObject() { - return super.getDefaultObject({ - itemType: "keyframe", - name: "sample", - selectedType: "list", - offsets: [] - }); - } - toCloneObject() { - var { offsets } = this.json; - return __spreadProps(__spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("name", "selectedType")), { - offsets: offsets.map((offset) => offset.clone()) - }); - } - isMultiStyle(key) { - switch (key) { - case "background-image": - case "var": - return true; - } - return false; - } - getMultiStyleString(p) { - switch (p.key) { - case "background-image": - return p.value.toString() + ";"; - case "var": - var value = (p.value + "").split(";").map((str) => { - return `--` + str; - }).join(";"); - return value + ";"; - } - return p.value.toString() + ";"; - } - toOffsetString(it) { - var tabString = " "; - return `${it.offset.toString()} { -${tabString}${it.properties.map((p) => { - if (this.isMultiStyle(p.key)) { - return this.getMultiStyleString(p); - } else { - var value = (p.value || "").toString(); - if (value) { - var key = p.key; - if (key === "x") - key = "left"; - else if (key === "y") - key = "top"; - return `${key}: ${value};`; - } else { - return ""; - } - } - }).join("").replace(/;/g, ";\n" + tabString).trim()} - }`; - } - toOffsetText() { - var offsets = this.json.offsets.map((it) => { - return it; - }); - offsets.sort((a, b) => { - return a.offset.value > b.offset.value ? 1 : -1; - }); - return offsets.map((it) => { - if (it.properties.length === 0) - return ""; - return this.toOffsetString(it); - }).join("\n"); - } - toCSSText() { - var offsets = this.json.offsets.map((it) => { - return it; - }); - offsets.sort((a, b) => { - return a.offset.value > b.offset.value ? 1 : -1; - }); - return ` -@keyframes ${this.json.name} { - - ${this.toOffsetText()} - -} -`; - } - createOffset(data = {}) { - return this.addOffset(new Offset(__spreadValues({ - checked: true - }, data))); - } - addOffset(offset) { - this.json.offsets.push(offset); - } - removeOffset(removeIndex) { - this.json.offsets.splice(removeIndex, 1); - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - sortOffset(startIndex, targetIndex) { - this.sortItem(this.json.offsets, startIndex, targetIndex); - } - updateOffset(index2, data = {}) { - this.json.offsets[+index2].reset(data); - } - toCSS() { - return {}; - } - toString() { - return this.toCSSText(); - } -} -class BaseModel { - constructor(json = {}, modelManager) { - __privateAdd(this, _modelManager, null); - __privateAdd(this, _json, {}); - __privateAdd(this, _cachedValue, {}); - __privateAdd(this, _timestamp2, 0); - __privateAdd(this, _lastChangedField, {}); - __privateAdd(this, _collapsed, false); - this.setModelManager(modelManager); - this.initializeModel(json); - } - initializeModel(json) { - __privateSet(this, _json, this.convert(Object.assign(this.getDefaultObject(), json))); - } - get manager() { - return __privateGet(this, _modelManager); - } - setModelManager(modelManager) { - __privateSet(this, _modelManager, modelManager); - } - getDefaultTitle() { - return "Item"; - } - getIcon() { - return ""; - } - isChanged(timestamp) { - console.log("isChanged", timestamp); - return this.timestamp != Number(timestamp); - } - changed() { - __privateSet(this, _timestamp2, __privateGet(this, _timestamp2) + Date.now()); - } - get timestamp() { - return __privateGet(this, _timestamp2); - } - get title() { - return this.name || this.getDefaultTitle(); - } - get itemType() { - return this.get("itemType"); - } - get name() { - return this.get("name"); - } - get children() { - return this.get("children"); - } - get collapsed() { - return __privateGet(this, _collapsed); - } - set collapsed(value) { - __privateSet(this, _collapsed, value); - } - renameWithCount() { - let arr = __privateGet(this, _json).name.split(" "); - if (arr.length < 2) { - return; - } - let last = arr.pop(); - let lastNumber = +last; - if (isNumber(lastNumber) && isNaN(lastNumber) === false) { - lastNumber++; - } else { - lastNumber = last; - } - const nextName = [...arr, lastNumber].join(" "); - this.reset({ - name: nextName - }); - } - get allLayers() { - return this.manager.getAllLayers(this.id); - } - get layers() { - return this.manager.getLayers(this.id) || []; - } - filteredAllLayers(filterCallback) { - return this.manager.getAllLayers(this.id, filterCallback); - } - get id() { - return __privateGet(this, _json).id; - } - get parentId() { - const parentId = __privateGet(this, _json).parentId; - if (parentId === this.id) - return void 0; - return parentId; - } - get parent() { - if (!this.parentId) - return void 0; - return this.manager.get(this.parentId); - } - get depth() { - return this.path.length; - } - get top() { - return this.path.filter((it) => it.isNot("project")).shift(); - } - get project() { - return this.path.find((it) => it.is("project")); - } - get artboard() { - return this.path.find((it) => it.is("artboard")); - } - get path() { - const path = [this]; - let parent; - while (parent = path[0].parent) { - path.unshift(parent); - } - return path; - } - get pathIds() { - return this.path.map((it) => it.id); - } - setParentId(parentId) { - this.reset({ parentId }); - this.manager.setChanged("setParentId", this.id, { parentId }); - } - get childrenLength() { - return __privateGet(this, _json).children.length; - } - get index() { - var _a; - return (_a = this.parent) == null ? void 0 : _a.findIndex(this); - } - get isFirst() { - return this.index === 0; - } - get isLast() { - return this.index === this.parent.childrenLength - 1; - } - get first() { - return this.parent.layers[0]; - } - get last() { - const parent = this.parent; - return parent.layers[parent.childrenLength - 1]; - } - get prev() { - var _a; - const index2 = this.index; - if (this.isFirst) { - return this; - } - return (_a = this.parent) == null ? void 0 : _a.layers[index2 - 1]; - } - get next() { - var _a; - const index2 = this.index; - if (this.isLast) { - return this; - } - return (_a = this.parent) == null ? void 0 : _a.layers[index2 + 1]; - } - get hierarchy() { - return this.getInformationForHierarchy("x", "y", "angle"); - } - getInformationForHierarchy(...args2) { - const parent = this.parent; - const index2 = this.index; - return { - id: this.id, - index: index2, - parentId: this.parentId, - prev: index2 === 0 ? void 0 : parent.children[index2 - 1], - next: index2 === parent.childrenLength - 1 ? void 0 : parent.children[index2 + 1], - attrs: this.attrs(...args2) - }; - } - getInnerId(postfix = "") { - return __privateGet(this, _json).id + postfix; - } - is(checkItemType) { - return __privateGet(this, _json).itemType === checkItemType; - } - isNot(checkItemType) { - return this.is(checkItemType) === false; - } - get(key) { - return __privateGet(this, _json)[key]; - } - removeField(key) { - delete __privateGet(this, _json)[key]; - } - set(key, value) { - this.reset({ [key]: value }); - } - isSVG() { - return false; - } - addCache(key, value) { - __privateGet(this, _cachedValue)[key] = value; - } - getCache(key) { - return __privateGet(this, _cachedValue)[key]; - } - hasCache(key) { - return Boolean(__privateGet(this, _cachedValue)[key]); - } - computed(key, newValueCallback, isForce = false) { - const cachedKey = `__cachedKey_${key}`; - const parsedKey = `${cachedKey}__parseValue`; - const value = __privateGet(this, _json)[key]; - if (isForce) - ; - else { - if (this.getCache(cachedKey) === value && this.getCache(parsedKey)) { - return this.getCache(parsedKey); - } - } - this.addCache(cachedKey, value); - this.addCache(parsedKey, newValueCallback(value, this)); - return this.getCache(parsedKey); - } - computedValue(key) { - const cachedKey = `__cachedKey_${key}`; - const parsedKey = `${cachedKey}__parseValue`; - return this.getCache(parsedKey); - } - editable() { - return true; - } - generateListNumber() { - this.layers.forEach((it, index2) => { - it.no = index2; - it.generateListNumber(); - }); - } - convert(json = {}) { - return json; - } - setCache() { - } - toCloneObject(isDeep = true) { - const json = {}; - Object.keys(__privateGet(this, _json)).forEach((field) => { - if (isNotUndefined(this.get(field))) { - json[field] = clone$1(this.get(field)); - } - }); - if (isDeep) { - json.layers = this.layers.map((layer) => { - return layer.clone(isDeep); - }); - } - return json; - } - clone(isDeep = true) { - return __privateGet(this, _modelManager).clone(this.id, isDeep); - } - reset(obj2, context = { origin: "*" }) { - var _a; - __privateSet(this, _json, this.convert(Object.assign(__privateGet(this, _json), obj2))); - __privateSet(this, _lastChangedField, obj2); - if (context.origin === "*") { - (_a = __privateGet(this, _modelManager)) == null ? void 0 : _a.setChanged("reset", this.id, obj2); - } - this.changed(); - return true; - } - hasChangedField(...args2) { - return args2.some((it) => __privateGet(this, _lastChangedField)[it] !== void 0); - } - get hasChangedHirachy() { - return this.hasChangedField("children", "parentId"); - } - getDefaultObject(obj2 = {}) { - var id = obj2.id || uuid(); - return __spreadValues({ - id, - name: "", - itemType: "base", - children: [], - parentId: "" - }, obj2); - } - attrs(...args2) { - const result = {}; - args2.forEach((field) => { - if (isNotUndefined(this.get(field))) { - result[field] = clone$1(this.get(field)); - } - }); - return result; - } - attrsWithId(...args2) { - return { - [this.id]: this.attrs(...args2) - }; - } - hasChildren() { - return this.children.length > 0; - } - appendChild(layer) { - if (layer.parentId === this.id) { - const hasId = this.children.find((it) => it === layer.id); - if (Boolean(hasId) === false) { - this.children.push(layer.id); - __privateGet(this, _modelManager).setChanged("appendChild", this.id, { - child: layer.id, - oldParentId: layer.parentId - }); - } - return layer; - } - this.resetMatrix(layer); - if (layer.parent) { - layer.remove(); - } - layer.setParentId(this.id); - this.children.push(layer.id); - return layer; - } - resetMatrix() { - } - refreshMatrixCache() { - } - insertChild(layer, index2 = 0) { - var _a; - this.resetMatrix(layer); - if (layer.parent && ((_a = layer.parent) == null ? void 0 : _a.id) !== this.id) { - layer.remove(); - } - layer.setParentId(this.id); - let list2 = this.children.map((id, childIndex) => { - return { id, index: childIndex }; - }); - const childItem = list2.find((it) => it.id === layer.id); - const targetIndex = index2 - 0.5; - if (childItem) { - childItem.index = targetIndex; - } else { - list2.push({ id: layer.id, index: targetIndex }); - } - list2.sort((a, b) => { - return a.index - b.index; - }); - this.reset({ - children: list2.map((it) => it.id) - }); - __privateGet(this, _modelManager).setChanged("insertChild", this.id, { - childId: layer.id, - index: 0 - }); - return layer; - } - insertAfter(layer) { - this.parent.insertChild(layer, this.index + 1); - return layer; - } - insertBefore(layer) { - this.parent.insertChild(layer, this.index); - return layer; - } - toggle(field, toggleValue) { - if (isUndefined(toggleValue)) { - this.reset({ - [field]: !this.get(field) - }); - } else { - this.reset({ - [field]: !!toggleValue - }); - } - } - isTreeItemHide() { - let currentParent = this.parent; - let collapsedList = []; - do { - if (currentParent.is("project")) - break; - collapsedList.push(Boolean(currentParent.collapsed)); - currentParent = currentParent.parent; - } while (currentParent); - return Boolean(collapsedList.filter(Boolean).length); - } - expectJSON(key) { - if (isUndefined(this.get(key))) - return false; - return true; - } - toJSON() { - const json = __privateGet(this, _json); - let newJSON = {}; - Object.keys(json).filter((key) => this.expectJSON(key)).forEach((key) => { - newJSON[key] = json[key]; - }); - if (this.hasChildren()) { - newJSON.layers = this.layers.map((layer) => { - return layer.toJSON(); - }); - } - return newJSON; - } - resize() { - } - copy(dist2 = 0) { - return this.parent.copyItem(this.id, dist2); - } - findIndex(child) { - return this.children.indexOf(child.id); - } - find(id) { - return __privateGet(this, _modelManager).get(id); - } - copyItem(childItemId, dist2 = 10) { - const childItem = this.find(childItemId); - var child = childItem.clone(); - child.renameWithCount(); - child.absoluteMove([dist2, dist2, 0]); - var childIndex = this.findIndex(childItem); - if (childIndex > -1) { - this.children.push(child.id); - } - return child; - } - remove() { - this.parent.removeChild(this.id); - } - removeChild(childItemId) { - return __privateGet(this, _modelManager).removeChild(this.id, childItemId); - } - hasParent(findParentId) { - return this.parentId === findParentId; - } - hasPathOf(targetItems = []) { - const path = this.path; - return targetItems.filter((it) => it.id !== this.id).some((target) => { - return path.find((it) => it.id === target.id); - }); - } - hasChild(childId) { - return this.children.includes(childId); - } - to() { - } - sendBackward(targetId) { - const siblings = this.children; - const result = {}; - let selectedIndex = -1; - siblings.forEach((id, index2) => { - result[id] = { id, index: index2 }; - if (id === targetId) { - selectedIndex = index2; - } - }); - result[targetId].index = selectedIndex - 1.5; - const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); - this.reset({ - children: children2 - }); - } - sendBack(targetId) { - const siblings = this.children; - const result = {}; - siblings.forEach((id, index2) => { - result[id] = { id, index: index2 }; - }); - result[targetId].index = -1; - const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); - this.reset({ - children: children2 - }); - } - bringForward(targetId) { - const siblings = this.children; - const result = {}; - let selectedIndex = -1; - siblings.forEach((id, index2) => { - result[id] = { id, index: index2 }; - if (id === targetId) { - selectedIndex = index2; - } - }); - result[targetId].index = selectedIndex + 1.5; - const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); - this.reset({ - children: children2 - }); - } - bringFront(targetId) { - const siblings = this.children; - const result = {}; - siblings.forEach((id, index2) => { - result[id] = { id, index: index2 }; - }); - result[targetId].index = Number.MAX_SAFE_INTEGER; - const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); - this.reset({ - children: children2 - }); - } -} -_modelManager = new WeakMap(); -_json = new WeakMap(); -_cachedValue = new WeakMap(); -_timestamp2 = new WeakMap(); -_lastChangedField = new WeakMap(); -_collapsed = new WeakMap(); -class BaseAssetModel extends BaseModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - svgfilters: [], - keyframes: [] - }, obj2)); - } - get keyframes() { - return this.get("keyframes"); - } - get svgfilters() { - return this.get("svgfilters"); - } - addKeyframe(keyframe2) { - this.keyframes.push(keyframe2); - return keyframe2; - } - createKeyframe(data = {}) { - return this.addKeyframe(new Keyframe(__spreadValues({ - checked: true - }, data))); - } - removeKeyframe(removeIndex) { - this.removePropertyList(this.keyframes, removeIndex); - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - sortKeyframe(startIndex, targetIndex) { - this.sortItem(this.keyframes, startIndex, targetIndex); - } - updateKeyframe(index2, data = {}) { - this.keyframes[+index2].reset(data); - } - toKeyframeString(isAnimate = false) { - return this.keyframes.map((keyframe2) => keyframe2.toString(isAnimate)).join("\n\n"); - } - copyPropertyList(arr, index2) { - var copyObject = __spreadValues({}, arr[index2]); - arr.splice(index2, 0, copyObject); - } - removePropertyList(arr, removeIndex) { - arr.splice(removeIndex, 1); - } - getSVGFilterIndex(id) { - var _a; - var filter2 = this.svgfilters.map((it, index2) => { - return { id: it.id, index: index2 }; - }).filter((it) => { - return it.id === id; - }); - return filter2.length ? (_a = filter2 == null ? void 0 : filter2[0]) == null ? void 0 : _a.index : -1; - } - removeSVGFilter(removeIndex) { - this.removePropertyList(this.svgfilters, removeIndex); - } - copySVGFilter(index2) { - this.copyPropertyList(this.svgfilters, index2); - } - sortSVGFilter(startIndex, targetIndex) { - this.sortItem(this.svgfilters, startIndex, targetIndex); - } - setSVGFilterValue(index2, value) { - this.svgfilters[index2] = __spreadValues(__spreadValues({}, this.svgfilters[index2]), value); - } - addSVGFilter(obj2 = {}) { - this.svgfilters.push(obj2); - var index2 = this.svgfilters.length - 1; - return index2; - } - createSVGFilter(data = {}) { - return this.addSVGFilter(__spreadValues({ - id: uuidShort() - }, data)); - } -} -class MovableModel extends BaseAssetModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - angle: 0, - x: 0, - y: 0, - width: 300, - height: 300, - position: "absolute", - perspective: "", - perspectiveOrigin: "", - transformOrigin: "50% 50% 0px" - }, obj2)); - } - get isAbsolute() { - return this.position === "absolute"; - } - get isDragSelectable() { - return true; - } - get isBooleanItem() { - return void 0; - } - get resizableWitChildren() { - return false; - } - get perspective() { - return this.get("perspective"); - } - get perspectiveOrigin() { - return this.get("perspectiveOrigin"); - } - get transform() { - return `rotateZ(${Length.deg(this.angle)})`; - } - get localMatrix() { - if (!this.hasCache("localTransform")) { - this.addCache("localTransform", this.getLocalTransformMatrix()); - } - return this.getCache("localTransform") || this.getLocalTransformMatrix(); - } - get localMatrixInverse() { - if (!this.hasCache("localTransformInverse")) { - this.addCache("localTransformInverse", this.getLocalTransformMatrixInverse()); - } - return this.getCache("localTransformInverse") || this.getLocalTransformMatrixInverse(); - } - get transformWithTranslate() { - if (!this.hasCache("transformWithTranslate")) { - this.addCache("transformWithTranslate", this.getTransformWithTranslate(this)); - } - return this.getCache("transformWithTranslate") || this.getTransformWithTranslate(this); - } - get transformWithTranslateToTranspose() { - if (!this.hasCache("transformWithTranslateTranspose")) { - this.addCache("transformWithTranslateTranspose", this.getTransformWithTranslate(this)); - } - return this.getCache("transformWithTranslateTranspose") || transpose([], this.getTransformWithTranslate(this)); - } - get transformWithTranslateInverse() { - if (!this.hasCache("transformWithTranslateInverse")) { - this.addCache("transformWithTranslateInverse", this.getTransformWithTranslate(this)); - } - return this.getCache("transformWithTranslateInverse") || invert([], this.getTransformWithTranslate(this)); - } - get itemMatrix() { - if (!this.hasCache("itemTransform")) { - this.addCache("itemTransform", this.getItemTransformMatrix()); - } - return this.getCache("itemTransform") || this.getItemTransformMatrix(); - } - get itemMatrixInverse() { - if (!this.hasCache("itemTransformInverse")) { - this.addCache("itemTransformInverse", this.getItemTransformMatrixInverse()); - } - return this.getCache("itemTransformInverse") || this.getItemTransformMatrixInverse(); - } - get absoluteMatrix() { - if (!this.hasCache("absoluteMatrix")) { - this.addCache("absoluteMatrix", this.getAbsoluteMatrix()); - } - return this.getCache("absoluteMatrix") || this.getAbsoluteMatrix(); - } - get absoluteMatrixInverse() { - if (!this.hasCache("absoluteMatrixInverse")) { - this.addCache("absoluteMatrixInverse", this.getAbsoluteMatrixInverse()); - } - return this.getCache("absoluteMatrixInverse") || this.getAbsoluteMatrixInverse(); - } - get relativeMatrix() { - if (!this.hasCache("relativeMatrix")) { - this.addCache("relativeMatrix", this.getRelativeMatrix()); - } - return this.getCache("relativeMatrix") || this.getRelativeMatrix(); - } - get relativeMatrixInverse() { - if (!this.hasCache("relativeMatrixInverse")) { - this.addCache("relativeMatrixInverse", this.getRelativeMatrixInverse()); - } - return this.getCache("relativeMatrixInverse") || this.getRelativeMatrixInverse(); - } - get verties() { - if (!this.hasCache("verties")) { - this.addCache("verties", this.getVerties()); - } - return this.getCache("verties") || this.getVerties(); - } - get contentVerties() { - if (!this.hasCache("contentVerties")) { - this.addCache("contentVerties", this.getContentVerties()); - } - return this.getCache("contentVerties") || this.getContentVerties(); - } - get originVerties() { - if (!this.hasCache("vertiesWithoutTransformOrigin")) { - this.addCache("vertiesWithoutTransformOrigin", this.rectVerties()); - } - return this.getCache("vertiesWithoutTransformOrigin") || this.rectVerties(); - } - get localVerties() { - if (!this.hasCache("localVerties")) { - this.addCache("localVerties", this.getLocalVerties()); - } - return this.getCache("localVerties") || this.getLocalVerties(); - } - get guideVerties() { - if (!this.hasCache("guideVerties")) { - this.addCache("guideVerties", this.getGuideVerties()); - } - return this.getCache("guideVerties") || this.getGuideVerties(); - } - get xList() { - if (!this.hasCache("xList")) { - this.addCache("xList", this.getXList()); - } - return this.getCache("xList") || this.getXList(); - } - get yList() { - if (!this.hasCache("yList")) { - this.addCache("yList", this.getYList()); - } - return this.getCache("yList") || this.getYList(); - } - get areaPosition() { - if (!this.hasCache("areaPosition")) { - this.addCache("areaPosition", this.getAreaPosition(100)); - } - return this.getCache("areaPosition") || this.getAreaPosition(100); - } - get offsetX() { - return this.x; - } - get offsetY() { - return this.y; - } - get screenWidth() { - return this.width; - } - get screenHeight() { - return this.height; - } - get y() { - return this.get("y"); - } - set y(value) { - this.set("y", value); - } - get x() { - return this.get("x"); - } - set x(value) { - this.set("x", value); - } - get width() { - return this.get("width"); - } - set width(value) { - this.set("width", value); - } - get height() { - return this.get("height"); - } - set height(value) { - this.set("height", value); - } - get angle() { - return this.get("angle"); - } - set angle(value) { - this.set("angle", value); - } - get position() { - return this.get("position"); - } - set position(value) { - this.set("position", value); - } - get transformOrigin() { - return this.get("transformOrigin"); - } - set transformOrigin(value) { - this.reset({ - transformOrigin: value - }); - } - get translate() { - return [0, 0, 0]; - } - get scale() { - return [1, 1, 1]; - } - get rotate() { - return [0, 0, degreeToRadian(this.angle)]; - } - get origin() { - return TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", this.screenWidth, this.screenHeight); - } - get absoluteOrigin() { - return vertiesMap([this.origin], this.absoluteMatrix)[0]; - } - get quat() { - return fromEuler(create$1(), 0, 0, this.angle); - } - getAreaPosition(areaSize = 100) { - const verties = this.getVerties(); - const rect2 = toRectVerties(verties); - const [startRow, startColumn] = area$1(rect2[0][0], rect2[0][1], areaSize); - const [endRow, endColumn] = area$1(rect2[2][0], rect2[2][1], areaSize); - return { - column: [startColumn, endColumn], - row: [startRow, endRow] - }; - } - reset(obj2, context = { origin: "*" }) { - const isChanged = super.reset(obj2, context); - if (this.hasChangedField("children", "x", "y", "width", "height", "boxModel", "angle", "transformOrigin", "resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal") || this.changedLayout) { - this.refreshMatrixCache(); - } - return isChanged; - } - changed() { - super.changed(); - this.changedRect = this.hasChangedField("children", "x", "y", "width", "height", "angle", "transformOrigin", "resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal"); - } - setParentId(otherParentId) { - super.setParentId(otherParentId); - this.refreshMatrixCache(); - } - refreshMatrixCache() { - this.setCacheItemTransformMatrix(); - this.setCacheLocalTransformMatrix(); - this.setCacheAbsoluteMatrix(); - this.setCacheLocalVerties(); - this.setCacheVerties(); - this.setCacheGuideVerties(); - this.setCacheAreaPosition(); - this.layers.forEach((it) => { - it.refreshMatrixCache(); - }); - } - setCacheItemTransformMatrix() { - this.addCache("itemTransform", this.getItemTransformMatrix()); - this.addCache("itemTransformInverse", invert([], this.getCache("itemTransform"))); - } - setCacheLocalTransformMatrix() { - this.addCache("localTransform", this.getLocalTransformMatrix()); - this.addCache("localTransformInverse", invert([], this.getCache("localTransform"))); - this.addCache("transformWithTranslate", this.getTransformWithTranslate(this)); - this.addCache("transformWithTranslateInverse", invert([], this.getCache("transformWithTranslate"))); - this.addCache("transformWithTranslateTranspose", transpose([], this.getCache("transformWithTranslate"))); - } - setCacheAbsoluteMatrix() { - this.addCache("absoluteMatrix", this.getAbsoluteMatrix()); - this.addCache("absoluteMatrixInverse", invert([], this.getCache("absoluteMatrix"))); - this.addCache("relativeMatrix", this.getRelativeMatrix()); - this.addCache("relativeMatrixInverse", invert([], this.getCache("relativeMatrix"))); - } - setCacheVerties() { - this.addCache("verties", this.getVerties()); - this.addCache("contentVerties", this.getContentVerties()); - this.addCache("vertiesWithoutTransformOrigin", this.rectVerties()); - } - setCacheLocalVerties() { - this.addCache("localVerties", this.getLocalVerties()); - } - setCacheGuideVerties() { - this.addCache("guideVerties", this.getGuideVerties()); - this.addCache("xList", this.getXList()); - this.addCache("yList", this.getYList()); - } - setCacheAreaPosition() { - this.addCache("areaPosition", this.getAreaPosition(100)); - } - move(distVector = [0, 0, 0]) { - this.reset({ - x: round(this.offsetX + distVector[0]), - y: round(this.offsetY + distVector[1]) - }); - } - moveByCenter(newCenter = [0, 0, 0]) { - this.reset({ - x: newCenter[0] - this.screenWidth / 2, - y: newCenter[1] - this.screenHeight / 2 - }); - } - absoluteMove(absoluteDist = [0, 0, 0]) { - var _a; - const oldVertex = this.verties[4]; - const newVertex = add$1([], oldVertex, absoluteDist); - const newVerties = vertiesMap([oldVertex, newVertex], ((_a = this.parent) == null ? void 0 : _a.absoluteMatrixInverse) || identity$3([])); - const newDist = subtract([], newVerties[1], newVerties[0]); - const oldPosition = this.attrs("x", "y"); - this.move(newDist); - return oldPosition; - } - startToCacheChildren() { - } - recoverChildren() { - } - resize(width2, height2) { - this.startToCacheChildren(); - this.reset({ width: width2, height: height2 }); - this.recoverChildren(); - } - setAngle(angle = 0) { - this.reset({ - angle - }); - } - addAngle(angle = 0) { - this.setAngle(this.angle + angle); - } - checkInArea(areaVerties) { - return polyPoly(areaVerties, this.originVerties); - } - hasPoint(x, y) { - return this.isPointInRect(x, y); - } - isPointInRect(x, y) { - return polyPoint(this.originVerties, x, y); - } - isIncludeByArea(areaVerties) { - return this.originVerties.map((vector) => { - return polyPoint(areaVerties, ...vector); - }).filter(Boolean).length === 4; - } - getPerspectiveMatrix() { - const hasPerspective = this.perspective; - if (!hasPerspective) { - return void 0; - } - let [ - perspectiveOriginX = Length.percent(50), - perspectiveOriginY = Length.percent(50) - ] = TransformOrigin.parseStyle(this.perspectiveOrigin); - const width2 = this.screenWidth; - const height2 = this.screenHeight; - perspectiveOriginX = perspectiveOriginX.toPx(width2).value; - perspectiveOriginY = perspectiveOriginY.toPx(height2).value; - const view = create$4(); - translate(view, view, [perspectiveOriginX, perspectiveOriginY, 0]); - if (this.perspective && this.perspective != "none") { - multiply$1(view, view, fromValues$1(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1 / Length.parse(this.perspective).value, 1)); - } else { - return void 0; - } - translate(view, view, [-perspectiveOriginX, -perspectiveOriginY, 0]); - return view; - } - getItemTransformMatrix() { - const list2 = Transform.parseStyle(this.transform); - const width2 = this.screenWidth; - const height2 = this.screenHeight; - return Transform.createTransformMatrix(list2, width2, height2); - } - getItemTransformMatrixInverse() { - return invert([], this.getItemTransformMatrix()); - } - getLocalTransformMatrix(width2, height2) { - const origin = TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", isUndefined(width2) ? this.screenWidth : width2, isUndefined(height2) ? this.screenHeight : height2); - const view = create$4(); - translate(view, view, origin); - multiply$1(view, view, this.itemMatrix); - translate(view, view, negate([], origin)); - return view; - } - getLocalTransformMatrixInverse(width2, height2) { - return invert([], this.getLocalTransformMatrix(width2, height2)); - } - getDirectionTransformMatrix(vertexOffset, width2, height2) { - const x = this.offsetX; - const y = this.offsetY; - const center2 = add$1([], TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", width2, height2), negate([], vertexOffset)); - const view = create$4(); - translate(view, view, [x, y, 0]); - translate(view, view, vertexOffset); - translate(view, view, center2); - multiply$1(view, view, this.itemMatrix); - translate(view, view, negate([], center2)); - return view; - } - getDirectionTopLeftMatrix(width2, height2) { - return this.getDirectionTransformMatrix([0, 0, 0], width2, height2); - } - getDirectionLeftMatrix(width2, height2) { - return this.getDirectionTransformMatrix([0, height2 / 2, 0], width2, height2); - } - getDirectionTopMatrix(width2, height2) { - return this.getDirectionTransformMatrix([width2 / 2, 0, 0], width2, height2); - } - getDirectionBottomLeftMatrix(width2, height2) { - return this.getDirectionTransformMatrix([0, height2, 0], width2, height2); - } - getDirectionTopRightMatrix(width2, height2) { - return this.getDirectionTransformMatrix([width2, 0, 0], width2, height2); - } - getDirectionRightMatrix(width2, height2) { - return this.getDirectionTransformMatrix([width2, height2 / 2, 0], width2, height2); - } - getDirectionBottomRightMatrix(width2, height2) { - return this.getDirectionTransformMatrix([width2, height2, 0], width2, height2); - } - getDirectionBottomMatrix(width2, height2) { - return this.getDirectionTransformMatrix([width2 / 2, height2, 0], width2, height2); - } - getAbsoluteMatrix() { - let transform2 = create$4(); - if (this.parent) { - multiply$1(transform2, transform2, this.parent.absoluteMatrix); - if (isFunction(this.parent.getPerspectiveMatrix)) { - const perspectiveMatrix = this.parent.getPerspectiveMatrix(); - if (perspectiveMatrix) { - multiply$1(transform2, transform2, perspectiveMatrix); - } - } - } - multiply$1(transform2, transform2, this.getRelativeMatrix()); - if (transform2.filter((it) => !isNaN(it)).length === 0) { - return create$4(); - } - return transform2; - } - getRelativeMatrix() { - let transform2 = create$4(); - const offsetX = this.offsetX; - const offsetY = this.offsetY; - translate(transform2, transform2, [offsetX, offsetY, 0]); - multiply$1(transform2, transform2, this.localMatrix); - return transform2; - } - getRelativeMatrixInverse() { - return invert([], this.getRelativeMatrix()); - } - getTransformWithTranslate(item) { - item = item || this; - let view = create$4(); - const offsetX = item.offsetX; - const offsetY = item.offsetY; - translate(view, view, [offsetX, offsetY, 0]); - multiply$1(view, view, item.localMatrix); - return view; - } - getAbsoluteMatrixInverse() { - return invert([], this.getAbsoluteMatrix()); - } - getLocalVerties(width2, height2) { - width2 = isNotUndefined(width2) ? width2 : this.screenWidth; - height2 = isNotUndefined(height2) ? height2 : this.screenHeight; - let model = rectToVerties(0, 0, width2, height2, this.transformOrigin); - return model; - } - getVerties(width2, height2) { - width2 = isNotUndefined(width2) ? width2 : this.screenWidth; - height2 = isNotUndefined(height2) ? height2 : this.screenHeight; - let x = 0; - let y = 0; - if (this.parent && this.parent.is("project") === false) { - const contentBox = this.parent.contentBox; - x = contentBox.x; - y = contentBox.y; - } - let model = rectToVerties(x, y, width2, height2, this.transformOrigin); - return vertiesMap(model, this.absoluteMatrix); - } - getContentVerties(width2, height2) { - width2 = isNotUndefined(width2) ? width2 : this.screenWidth; - height2 = isNotUndefined(height2) ? height2 : this.screenHeight; - const center2 = TransformOrigin.scale(this.transformOrigin, width2, height2); - const paddingTop = this.get("padding-top") || 0; - const paddingRight = this.get("padding-right") || 0; - const paddingBottom = this.get("padding-bottom") || 0; - const paddingLeft = this.get("padding-left") || 0; - const model = rectToVerties(0 + paddingLeft, 0 + paddingTop, width2 - paddingLeft - paddingRight, height2 - paddingTop - paddingBottom, this.transformOrigin); - model[4] = center2; - return vertiesMap(model, this.absoluteMatrix); - } - rectVerties() { - return this.verties.filter((_, index2) => index2 < 4); - } - getGuideVerties() { - const verties = this.originVerties; - return [ - ...verties, - lerp$1([], verties[0], verties[1], 0.5), - lerp$1([], verties[1], verties[2], 0.5), - lerp$1([], verties[2], verties[3], 0.5), - lerp$1([], verties[3], verties[0], 0.5) - ]; - } - getXList() { - return [...new Set(this.guideVerties.map((it) => it[0]))]; - } - getYList() { - return [...new Set(this.guideVerties.map((it) => it[1]))]; - } - get nestedAngle() { - if (this.parent) { - return this.parent.nestedAngle + this.angle; - } - return this.angle || 0; - } - get toRectVerties() { - return itemsToRectVerties([this]); - } - get matrix() { - const id = this.id; - const x = this.offsetX; - const y = this.offsetY; - const width2 = this.screenWidth; - const height2 = this.screenHeight; - const originalTransform = this.transform; - const originalTransformOrigin = this.transformOrigin || "50% 50% 0px"; - const transformOriginMatrix = this.getTransformOriginMatrix(); - const transformOriginMatrixInverse = this.getTransformOriginMatrixInverse(); - const parentMatrix = this.parent.absoluteMatrix; - const parentMatrixInverse = this.parent.absoluteMatrixInverse; - const localMatrix = this.localMatrix; - const localMatrixInverse = this.localMatrixInverse; - const itemMatrix = this.itemMatrix; - const itemMatrixInverse = this.itemMatrixInverse; - const absoluteMatrix = this.absoluteMatrix; - const absoluteMatrixInverse = this.absoluteMatrixInverse; - const relativeMatrix = this.relativeMatrix; - const relativeMatrixInverse = this.relativeMatrixInverse; - const directionMatrix = { - "to top left": this.getDirectionTopLeftMatrix(width2, height2), - "to top": this.getDirectionTopMatrix(width2, height2), - "to top right": this.getDirectionTopRightMatrix(width2, height2), - "to right": this.getDirectionRightMatrix(width2, height2), - "to bottom left": this.getDirectionBottomLeftMatrix(width2, height2), - "to bottom": this.getDirectionBottomMatrix(width2, height2), - "to bottom right": this.getDirectionBottomRightMatrix(width2, height2), - "to left": this.getDirectionLeftMatrix(width2, height2) - }; - const verties = this.verties; - const xList = verties.map((it) => it[0]); - const yList = verties.map((it) => it[1]); - return { - id, - x, - y, - width: width2, - height: height2, - transform: originalTransform, - originalTransformOrigin, - verties, - originVerties: this.originVerties, - xList, - yList, - directionMatrix, - parentMatrix, - parentMatrixInverse, - localMatrix, - localMatrixInverse, - itemMatrix, - itemMatrixInverse, - absoluteMatrix, - absoluteMatrixInverse, - relativeMatrix, - relativeMatrixInverse, - transformOriginMatrix, - transformOriginMatrixInverse - }; - } - absolutePath(pathString2 = "") { - const d = pathString2 || this.d; - const pathParser = new PathParser(d); - pathParser.transformMat4(this.absoluteMatrix); - return pathParser; - } - invertPath(pathString2 = "") { - const path = new PathParser(pathString2); - path.transformMat4(this.absoluteMatrixInverse); - return path; - } - invertPoint(point2) { - return transformMat4([], point2, this.absoluteMatrixInverse); - } - invertPathString(pathString2 = "") { - return this.invertPath(pathString2).d; - } - updatePath(d) { - const matrix = this.matrix; - const newPath = new PathParser(d); - let bbox = newPath.getBBox(); - const newWidth = distance$1(bbox[1], bbox[0]); - const newHeight = distance$1(bbox[3], bbox[0]); - let oldBBox = vertiesMap(rectToVerties(bbox[0][0], bbox[0][1], newWidth, newHeight), matrix.absoluteMatrix); - let newBBox = vertiesMap(oldBBox, calculateMatrixInverse(fromTranslation([], oldBBox[4]), Transform.createTransformMatrix(Transform.parseStyle(matrix.transform), newWidth, newHeight), fromTranslation([], negate([], oldBBox[4])))); - const worldMatrix = calculateMatrix(fromTranslation([], newBBox[0]), this.getLocalTransformMatrix(newWidth, newHeight)); - const realXY = getTranslation([], calculateMatrix(matrix.parentMatrixInverse, worldMatrix, invert([], this.getLocalTransformMatrix(newWidth, newHeight)))); - return { - d: newPath.translate(-bbox[0][0], -bbox[0][1]).d, - x: realXY[0], - y: realXY[1], - width: newWidth, - height: newHeight - }; - } - checkInAreaForAll(areaVerties) { - const items = [...this.checkInAreaForLayers(areaVerties)]; - if (this.is("artboard")) - return items; - if (this.is("project")) - return items; - if (this.checkInArea(areaVerties)) { - items.push(this); - } - return items; - } - checkInAreaForLayers(areaVerties) { - var items = []; - this.layers.forEach((layer) => { - items.push.apply(items, layer.checkInAreaForLayers(areaVerties)); - if (layer.checkInArea(areaVerties)) { - items.push(layer); - } - }); - return items; - } - getTransformOriginMatrix() { - return fromTranslation([], TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", this.screenWidth, this.screenHeight)); - } - getTransformOriginMatrixInverse() { - return invert([], this.getTransformOriginMatrix()); - } - recoverMatrix(newChildMatrix) { - const matrix = calculateMatrix(this.absoluteMatrixInverse, newChildMatrix.absoluteMatrix); - const q = getRotation([], matrix); - const axis = []; - const rad = getAxisAngle(axis, q); - const angle = axis[2] ? radianToDegree(rad * axis[2]) : 0; - const newTransformMatrix = create$4(); - fromRotation(newTransformMatrix, rad, axis); - const [x, y] = getTranslation([], calculateMatrix(matrix, calculateMatrixInverse(newChildMatrix.transformOriginMatrix, newTransformMatrix, newChildMatrix.transformOriginMatrixInverse))); - return { x, y, angle }; - } - resetMatrix(childItem) { - const matrix = calculateMatrix(this.absoluteMatrixInverse, childItem.absoluteMatrix); - const q = getRotation([], matrix); - const axis = []; - const rad = getAxisAngle(axis, q); - const angle = axis[2] ? radianToDegree(rad * axis[2]) : 0; - const newTransformMatrix = create$4(); - fromRotation(newTransformMatrix, rad, axis); - const [x, y] = getTranslation([], calculateMatrix(matrix, calculateMatrixInverse(childItem.getTransformOriginMatrix(), newTransformMatrix, childItem.getTransformOriginMatrixInverse()))); - childItem.reset({ x, y, angle }); - this.manager.setChanged("resetMatrix", this.id, { - end: true, - childItemId: childItem == null ? void 0 : childItem.id - }); - } - setOrder(targetIndex) { - var parent = this.parent; - var startIndex = this.index; - if (startIndex > -1) { - parent.children[startIndex] = parent.children[targetIndex]; - parent.children[targetIndex] = this.id; - this.manager.setChanged("setOrder", this.id, { - targetIndex, - startIndex, - parentId: parent.id - }); - } - } - orderNext() { - if (this.isLast) { - if (this.parent.next) { - let next = this.parent.next; - if (next.enableHasChildren()) { - next.appendChild(this); - } else { - next.insertAfter(this); - } - } - return; - } - var startIndex = this.index; - if (startIndex > -1) { - this.setOrder(startIndex + 1); - } - } - orderPrev() { - if (this.isFirst) { - const prev = this.parent.prev; - if (prev) { - prev.insertBefore(this); - } - return; - } - var startIndex = this.index; - if (startIndex > 0) { - this.setOrder(startIndex - 1); - } - } - orderFirst() { - this.setOrder(0); - } - orderLast() { - this.setOrder(this.parent.childrenLength - 1); - } - orderTop() { - } - orderBottom() { - } -} -const LayoutEngine = { - [Layout.DEFAULT]: DefaultLayoutEngine, - [Layout.GRID]: GridLayoutEngine -}; -class GroupModel extends MovableModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - layout: Layout.DEFAULT, - constraintsHorizontal: Constraints.NONE, - constraintsVertical: Constraints.NONE, - flexDirection: FlexDirection.ROW, - flexWrap: FlexWrap.NOWRAP, - justifyContent: JustifyContent.FLEX_START, - alignItems: AlignItems.FLEX_START, - alignContent: AlignContent.FLEX_START, - order: 0, - flexGrow: 0, - flexShrink: 0, - flexBasis: "auto", - gap: 0, - resizingHorizontal: ResizingMode.FIXED, - resizingVertical: ResizingMode.FIXED, - gridTemplateRows: "auto", - gridColumnGap: "0px", - gridTemplateColumns: "auto", - gridRowGap: "0px", - gridTemplateAreas: "", - gridAutoRows: "auto", - gridAutoColumns: "auto", - gridAutoFlow: "row" - }, obj2)); - } - reset(obj2, context = { origin: "*" }) { - const isChanged = super.reset(obj2, context); - if (this.hasChangedField("resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal") || this.changedLayout) { - this.refreshResizableCache(); - } - return isChanged; - } - refreshResizableCache() { - this.addCache("resizable", this.getAutoResizable()); - } - get autoResizable() { - return this.getCache("resizable"); - } - getAutoResizable() { - if (this.parent.is("project")) { - return false; - } - if (this.resizingHorizontal === ResizingMode.FIXED && this.resizingVertical === ResizingMode.FIXED) { - if (this.constraintsHorizontal === Constraints.NONE && this.constraintsVertical === Constraints.NONE) { - return false; - } - } - return true; - } - get layout() { - return this.get("layout"); - } - get constraintsHorizontal() { - return this.get("constraintsHorizontal"); - } - set constraintsHorizontal(value) { - this.reset({ - constraintsHorizontal: value - }); - } - get constraintsVertical() { - return this.get("constraintsVertical"); - } - set constraintsVertical(value) { - this.reset({ - constraintsVertical: value - }); - } - get flexDirection() { - return this.get("flexDirection"); - } - set flexDirection(value) { - this.reset({ - flexDirection: value - }); - } - get flexWrap() { - return this.get("flexWrap"); - } - set flexWrap(value) { - this.reset({ - flexWrap: value - }); - } - get justifyContent() { - return this.get("justifyContent"); - } - set justifyContent(value) { - this.reset({ - justifyContent: value - }); - } - get alignItems() { - return this.get("alignItems"); - } - set alignItems(value) { - this.reset({ - alignItems: value - }); - } - get alignContent() { - return this.get("alignContent"); - } - set alignContent(value) { - this.reset({ - alignContent: value - }); - } - get order() { - return this.get("order"); - } - set order(value) { - this.reset({ - order: value - }); - } - get flexGrow() { - return this.get("flexGrow"); - } - set flexGrow(value) { - this.reset({ - flexGrow: value - }); - } - get flexShrink() { - return this.get("flexShrink"); - } - set flexShrink(value) { - this.reset({ - flexShrink: value - }); - } - get flexBasis() { - return this.get("flexBasis"); - } - set flexBasis(value) { - this.reset({ - flexBasis: value - }); - } - get gap() { - return this.get("gap"); - } - set gap(value) { - this.reset({ - gap: value - }); - } - get resizingHorizontal() { - return this.get("resizingHorizontal"); - } - set resizingHorizontal(value) { - this.reset({ - resizingHorizontal: value - }); - } - get resizingVertical() { - return this.get("resizingVertical"); - } - set resizingVertical(value) { - this.reset({ - resizingVertical: value - }); - } - get gridTemplateRows() { - return this.get("gridTemplateRows"); - } - set gridTemplateRows(value) { - this.reset({ - gridTemplateRows: value - }); - } - get gridColumnGap() { - return this.get("gridColumnGap"); - } - set gridColumnGap(value) { - this.reset({ - gridColumnGap: value - }); - } - get gridTemplateColumns() { - return this.get("gridTemplateColumns"); - } - set gridTemplateColumns(value) { - this.reset({ - gridTemplateColumns: value - }); - } - get gridRowGap() { - return this.get("gridRowGap"); - } - set gridRowGap(value) { - this.reset({ - gridRowGap: value - }); - } - get gridTemplateAreas() { - return this.get("gridTemplateAreas"); - } - set gridTemplateAreas(value) { - this.reset({ - gridTemplateAreas: value - }); - } - get gridAutoRows() { - return this.get("gridAutoRows"); - } - set gridAutoRows(value) { - this.reset({ - gridAutoRows: value - }); - } - get gridAutoColumns() { - return this.get("gridAutoColumns"); - } - set gridAutoColumns(value) { - this.reset({ - gridAutoColumns: value - }); - } - get gridAutoFlow() { - return this.get("gridAutoFlow"); - } - set gridAutoFlow(value) { - this.reset({ - gridAutoFlow: value - }); - } - isLayoutItem() { - var _a; - return !!((_a = this.parent) == null ? void 0 : _a.hasLayout()); - } - hasConstraints() { - return this.isLayout(Layout.DEFAULT); - } - hasLayout() { - return !this.hasConstraints() || Boolean(this.layout) === false; - } - isLayout(layout2) { - return this.layout === layout2; - } - isInDefault() { - var _a; - const parentLayout = ((_a = this.parent) == null ? void 0 : _a.layout) || "default"; - return Layout.DEFAULT === parentLayout; - } - isInGrid() { - return this.isInLayout(Layout.GRID); - } - isInFlex() { - return this.isInLayout(Layout.FLEX); - } - isInLayout(layout2) { - var _a; - return ((_a = this.parent) == null ? void 0 : _a.layout) === layout2; - } - changeConstraints(direction2, value, shiftKey = false) { - const h = this.get(direction2); - let newConstraints = value; - if (h === Constraints.MAX) { - if (value === Constraints.MAX) { - newConstraints = Constraints.SCALE; - } - if (shiftKey && value === Constraints.MIN) { - newConstraints = Constraints.STRETCH; - } - } else if (h === Constraints.MIN) { - if (value === Constraints.MIN) { - newConstraints = Constraints.SCALE; - } else if (shiftKey && value === Constraints.MAX) { - newConstraints = Constraints.STRETCH; - } - } else if (h === Constraints.STRETCH) { - if (value === Constraints.MIN) { - newConstraints = Constraints.MAX; - } else if (value === Constraints.MAX) { - newConstraints = Constraints.MIN; - } - } - this.reset({ - [direction2]: newConstraints - }); - } - startToCacheChildren() { - var _a; - (_a = LayoutEngine[this.layout]) == null ? void 0 : _a.startCache(this); - } - recoverChildren() { - var _a; - (_a = LayoutEngine[this.layout]) == null ? void 0 : _a.recover(this); - } -} -const editableList = [ - "appearance", - "position", - "right", - "bottom", - "rootVariable", - "variable", - "transform", - "filter", - "backdropFilter", - "backgroundColor", - "backgroundImage", - "borderRadius", - "border", - "boxShadow", - "clipPath", - "color", - "perspectiveOrigin", - "transformOrigin", - "transformStyle", - "perspective", - "mixBlendMode", - "overflow", - "opacity", - "box-model", - "layout", - "flex-layout", - "grid-layout", - "animation", - "transition", - "pattern", - "boolean-operation" -]; -const editableKeys = {}; -editableList.forEach(function(key) { - editableKeys[key] = true; -}); -class DomModel extends GroupModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - rootVariable: "", - variable: "", - color: "black", - overflow: "visible", - opacity: 1, - pattern: "", - selectors: [], - svg: [], - gridColumnStart: "", - gridColumnEnd: "", - gridRowStart: "", - gridRowEnd: "", - gridColumnGap: "", - gridRowGap: "" - }, obj2)); - } - get gridColumnStart() { - return this.get("gridColumnStart"); - } - set gridColumnStart(value) { - this.set("gridColumnStart", value); - } - get gridColumnEnd() { - return this.get("gridColumnEnd"); - } - set gridColumnEnd(value) { - this.set("gridColumnEnd", value); - } - get gridRowStart() { - return this.get("gridRowStart"); - } - set gridRowStart(value) { - this.set("gridRowStart", value); - } - get gridRowEnd() { - return this.get("gridRowEnd"); - } - set gridRowEnd(value) { - this.set("gridRowEnd", value); - } - get gridColumnGap() { - return this.get("gridColumnGap"); - } - set gridColumnGap(value) { - this.set("gridColumnGap", value); - } - get gridRowGap() { - return this.get("gridRowGap"); - } - set gridRowGap(value) { - this.set("gridRowGap", value); - } - get pattern() { - return this.get("pattern"); - } - set pattern(value) { - this.reset({ - pattern: value - }); - } - get selectors() { - return this.get("selectors"); - } - set selectors(value) { - this.reset({ - selectors: value - }); - } - get svg() { - return this.get("svg"); - } - set svg(value) { - this.reset({ svg: value }); - } - get rootVariable() { - return this.get("rootVariable"); - } - set rootVariable(value) { - this.reset({ - rootVariable: value - }); - } - get variable() { - return this.get("variable"); - } - set variable(value) { - this.reset({ - variable: value - }); - } - get filter() { - return this.get("filter"); - } - set filter(value) { - this.reset({ - filter: value - }); - } - get backdropFilter() { - return this.get("backdropFilter"); - } - set backdropFilter(value) { - this.reset({ - backdropFilter: value - }); - } - get backgroundColor() { - return this.get("backgroundColor"); - } - set backgroundColor(value) { - this.reset({ - backgroundColor: value - }); - } - get backgroundImage() { - return this.get("backgroundImage"); - } - set backgroundImage(value) { - this.reset({ - backgroundImage: value - }); - } - get textClip() { - return this.get("textClip"); - } - set textClip(value) { - this.reset({ - textClip: value - }); - } - get borderRadius() { - return this.get("borderRadius"); - } - set borderRadius(value) { - this.reset({ - borderRadius: value - }); - } - get border() { - return this.get("border"); - } - set border(value) { - this.reset({ - border: value - }); - } - get boxShadow() { - return this.get("boxShadow"); - } - set boxShadow(value) { - this.reset({ - boxShadow: value - }); - } - get textShadow() { - return this.get("textShadow"); - } - set textShadow(value) { - this.reset({ - textShadow: value - }); - } - get clipPath() { - return this.get("clipPath"); - } - set clipPath(value) { - this.reset({ - clipPath: value - }); - } - get color() { - return this.get("color"); - } - set color(value) { - this.reset({ - color: value - }); - } - get opacity() { - return this.get("opacity"); - } - set opacity(value) { - this.reset({ - opacity: value - }); - } - get transformStyle() { - return this.get("transformStyle"); - } - set transformStyle(value) { - this.reset({ - transformStyle: value - }); - } - get fontSize() { - return this.get("fontSize"); - } - set fontSize(value) { - this.reset({ - fontSize: value - }); - } - get fontFamily() { - return this.get("fontFamily"); - } - set fontFamily(value) { - this.reset({ - fontFamily: value - }); - } - get fontWeight() { - return this.get("fontWeight"); - } - set fontWeight(value) { - this.reset({ - fontWeight: value - }); - } - get fontStyle() { - return this.get("fontStyle"); - } - set fontStyle(value) { - this.reset({ - fontStyle: value - }); - } - get fontVariant() { - return this.get("fontVariant"); - } - set fontVariant(value) { - this.reset({ - fontVariant: value - }); - } - get fontStretch() { - return this.get("fontStretch"); - } - set fontStretch(value) { - this.reset({ - fontStretch: value - }); - } - get lineHeight() { - return this.get("lineHeight"); - } - set lineHeight(value) { - this.reset({ - lineHeight: value - }); - } - get letterSpacing() { - return this.get("letterSpacing"); - } - set letterSpacing(value) { - this.reset({ - letterSpacing: value - }); - } - get wordSpacing() { - return this.get("wordSpacing"); - } - set wordSpacing(value) { - this.reset({ - wordSpacing: value - }); - } - get textDecoration() { - return this.get("textDecoration"); - } - set textDecoration(value) { - this.reset({ - textDecoration: value - }); - } - get textAlign() { - return this.get("textAlign"); - } - set textAlign(value) { - this.reset({ - textAlign: value - }); - } - get textTransform() { - return this.get("textTransform"); - } - set textTransform(value) { - this.reset({ - textTransform: value - }); - } - get textOverflow() { - return this.get("text-overflow"); - } - set textOverflow(value) { - this.reset({ - "text-overflow": value - }); - } - get textIndent() { - return this.get("textIndent"); - } - set textIndent(value) { - this.reset({ - textIndent: value - }); - } - get mixBlendMode() { - return this.get("mixBlendMode"); - } - set mixBlendMode(value) { - this.reset({ - mixBlendMode: value - }); - } - get visibility() { - return this.get("visibility"); - } - set visibility(value) { - this.reset({ - visibility: value - }); - } - get zIndex() { - return this.get("z-index"); - } - set zIndex(value) { - this.reset({ - "z-index": value - }); - } - get overflow() { - return this.get("overflow"); - } - set overflow(value) { - this.reset({ - overflow: value - }); - } - get animation() { - return this.get("animation"); - } - set animation(value) { - this.reset({ - animation: value - }); - } - get transition() { - return this.get("transition"); - } - set transition(value) { - this.reset({ - transition: value - }); - } - get marginTop() { - return this.get("marginTop"); - } - set marginTop(value) { - this.reset({ - marginTop: value - }); - } - get marginRight() { - return this.get("marginRight"); - } - set marginRight(value) { - this.reset({ - marginRight: value - }); - } - get marginBottom() { - return this.get("marginBottom"); - } - set marginBottom(value) { - this.reset({ - marginBottom: value - }); - } - get marginLeft() { - return this.get("marginLeft"); - } - set marginLeft(value) { - this.reset({ - marginLeft: value - }); - } - get paddingTop() { - return this.get("paddingTop"); - } - set paddingTop(value) { - this.reset({ - paddingTop: value - }); - } - get paddingRight() { - return this.get("paddingRight"); - } - set paddingRight(value) { - this.reset({ - paddingRight: value - }); - } - get paddingBottom() { - return this.get("paddingBottom"); - } - set paddingBottom(value) { - this.reset({ - paddingBottom: value - }); - } - get paddingLeft() { - return this.get("paddingLeft"); - } - set paddingLeft(value) { - this.reset({ - paddingLeft: value - }); - } - editable(editablePropertyName) { - switch (editablePropertyName) { - case "svg-item": - case "transformOrigin": - case "perspective": - case "perspectiveOrigin": - return false; - } - return Boolean(editableKeys[editablePropertyName]); - } - get changedBoxModel() { - return this.hasChangedField("marginTop", "marginLeft", "marginBottom", "marginRight", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom"); - } - get changedFlexLayout() { - return this.hasChangedField("flexDirection", "flexWrap", "justifyContent", "alignItems", "alignContent", "order", "flexBasis", "flexGrow", "flexShrink", "flexFlow"); - } - get changedGridLayout() { - return this.hasChangedField("gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas", "gridAutoRows", "gridAutoColumns", "gridAutoFlow", "gridRowGap", "gridColumnGap", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "gridArea"); - } - get changedLayoutItem() { - return this.hasChangedField("resizingHorizontal", "resizingVertical"); - } - get changedLayout() { - return this.hasChangedField("layout") || this.changedBoxModel || this.changedFlexLayout || this.changedGridLayout || this.changedLayoutItem; - } - addSelector(selector2) { - this.selectors.push(selector2); - return selector2; - } - createSelector(data = {}) { - return this.addSelector(new Selector(__spreadValues({ - checked: true - }, data))); - } - removePropertyList(arr, removeIndex) { - arr.splice(removeIndex, 1); - } - removeSelector(removeIndex) { - this.removePropertyList(this.selectors, removeIndex); - } - enableHasChildren() { - return true; - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - updateSelector(index2, data = {}) { - this.selectors[+index2].reset(data); - } - traverse(item, results, hasLayoutItem) { - if (item.isAttribute()) - return; - if (!hasLayoutItem && item.isLayoutItem() && !item.isRootItem()) - return; - results.push(item); - item.children.forEach((child) => { - this.traverse(child, results); - }); - } - tree(hasLayoutItem) { - var results = []; - this.children.forEach((item) => { - this.traverse(item, results, hasLayoutItem); - }); - return results; - } - convert(json) { - json = super.convert(json); - if (json.padding) { - json["paddingTop"] = Length.parse(json.padding); - json["paddingRight"] = Length.parse(json.padding); - json["paddingBottom"] = Length.parse(json.padding); - json["paddingLeft"] = Length.parse(json.padding); - delete json.padding; - } - return json; - } - reset(obj2, context = { origin: "*" }) { - const isChanged = super.reset(obj2, context); - if (this.hasChangedField("clipPath")) { - this.setClipPathCache(); - } - if (this.hasChangedField("width", "height")) { - if (this.cacheClipPath) { - const d = this.cacheClipPath.clone().scale(this.width / this.cacheClipPathWidth, this.height / this.cacheClipPathHeight).d; - this.clipPath = `path(${d})`; - this.modelManager.setChanged("reset", this.id, { - clipPath: this.clipPath - }); - } - } - if (this.hasChangedField("backgroundImage", "pattern")) { - this.setBackgroundImageCache(); - } - return isChanged; - } - setBackgroundImageCache() { - let list2 = []; - if (this.pattern) { - const patternList = this.computed("pattern", (pattern) => { - return Pattern.parseStyle(pattern).map((it) => { - return BackgroundImage.parseStyle(STRING_TO_CSS(it.toCSS())); - }); - }); - for (var i = 0, len2 = patternList.length; i < len2; i++) { - list2.push.apply(list2, patternList[i]); - } - } - if (this.backgroundImage) { - const backgroundList = this.computed("backgroundImage", (backgroundImage2) => { - return BackgroundImage.parseStyle(STRING_TO_CSS(backgroundImage2)); - }); - list2.push.apply(list2, backgroundList.filter((it) => it.visibility !== VisibilityType.HIDDEN)); - } - if (list2.length) { - const project2 = this.top; - this.cacheBackgroundImage = BackgroundImage.joinCSS(list2); - const cacheList = list2.filter((it) => it.type === GradientType.URL).map((it) => it.image.url); - let cacheImage = this.cacheBackgroundImage["background-image"]; - cacheList.forEach((url) => { - const imageUrl = project2.getImageValueById(url); - cacheImage = cacheImage.replace(url, `"${imageUrl}"`); - }); - this.cacheBackgroundImage["background-image"] = cacheImage; - } else { - this.cacheBackgroundImage = {}; - this.cacheBackgroundImageOriginal = []; - } - } - setClipPathCache() { - var obj2 = ClipPath.parseStyle(this.clipPath); - this.cacheClipPathObject = obj2; - if (obj2.type === "path") { - this.cacheClipPath = new PathParser(obj2.value.trim()); - this.cacheClipPathWidth = this.width; - this.cacheClipPathHeight = this.height; - } - } - setCache() { - super.setCache(); - this.setClipPathCache(); - } - get clipPathString() { - if (!this.cacheClipPath) { - this.setClipPathCache(); - } - if (this.cacheClipPath) { - return this.cacheClipPath.clone().scale(this.width / this.cacheClipPathWidth, this.height / this.cacheClipPathHeight).d; - } - } - getBackgroundImage(index2) { - const backgroundImages = BackgroundImage.parseStyle(STRING_TO_CSS(this.backgroundImage)); - return backgroundImages[index2 || 0]; - } - get borderWidth() { - const border2 = Border.parseStyle(this.border); - const borderObject = Border.parseValue(border2.border); - if (borderObject == null ? void 0 : borderObject.width) { - return { - borderLeftWidth: borderObject == null ? void 0 : borderObject.width, - borderRightWidth: borderObject == null ? void 0 : borderObject.width, - borderTopWidth: borderObject == null ? void 0 : borderObject.width, - borderBottomWidth: borderObject == null ? void 0 : borderObject.width - }; - } - return { - borderLeftWidth: 0, - borderRightWidth: 0, - borderTopWidth: 0, - borderBottomWidth: 0 - }; - } - get contentBox() { - const x = 0; - const y = 0; - const width2 = this.screenWidth; - const height2 = this.screenHeight; - { - const borderWidth = this.borderWidth; - return { - x: x + borderWidth.borderLeftWidth, - y: y + borderWidth.borderTopWidth, - width: width2 - borderWidth.borderLeftWidth - borderWidth.borderRightWidth, - height: height2 - borderWidth.borderTopWidth - borderWidth.borderBottomWidth - }; - } - } - getGradientLineLength(width2, height2, angle) { - return Math.abs(width2 * Math.sin(degreeToRadian(angle))) + Math.abs(height2 * Math.cos(degreeToRadian(angle))); - } - createBackgroundImageMatrix(index2) { - const contentBox = this.contentBox; - const backgroundImage2 = this.getBackgroundImage(index2); - const { image: image2 } = backgroundImage2; - const backRect = backgroundImage2.getOffset(contentBox); - const backVerties = vertiesMap(rectToVerties(backRect.x, backRect.y, backRect.width, backRect.height), this.absoluteMatrix); - const result = { - backRect, - backVerties, - absoluteMatrix: this.absoluteMatrix, - backgroundImage: backgroundImage2 - }; - switch (image2.type) { - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - let [rx, ry] = image2.radialPosition; - if (rx == "center") - rx = Length.percent(50); - if (ry == "center") - ry = Length.percent(50); - const newRx = rx.toPx(backRect.width); - const newRy = ry.toPx(backRect.height); - const centerVerties = vertiesMap([ - [newRx.value + backRect.x, newRy.value + backRect.y, 0], - [newRx.value + backRect.x, newRy.value + backRect.y - 1, 0] - ], this.absoluteMatrix); - result.radialCenterPosition = centerVerties[0]; - result.radialCenterStick = centerVerties[1]; - result.radialCenterPoint = [newRx.value, newRy.value, 0]; - if (image2.type === GradientType.RADIAL || image2.type === GradientType.REPEATING_RADIAL) { - const { startPoint: startPoint2, endPoint: endPoint2, shapePoint } = image2.getStartEndPoint(result); - const [newStartPoint2, newEndPoint2, newShapePoint] = vertiesMap([startPoint2, endPoint2, shapePoint], this.absoluteMatrix); - result.radialCenterPosition = newStartPoint2; - result.startPoint = newStartPoint2; - result.endPoint = newEndPoint2; - result.shapePoint = newShapePoint; - result.colorsteps = image2.colorsteps.map((it) => { - const offset = it.toLength(); - return { - id: it.id, - cut: it.cut, - color: it.color, - timing: it.timing, - timingCount: it.timingCount, - pos: lerp$1([], result.startPoint, result.endPoint, offset.value / 100) - }; - }); - } else if (image2.type === GradientType.CONIC || image2.type === GradientType.REPEATING_CONIC) { - const { startPoint: startPoint2, endPoint: endPoint2, shapePoint } = image2.getStartEndPoint(result); - const [newStartPoint2, newEndPoint2, newShapePoint] = vertiesMap([startPoint2, endPoint2, shapePoint], this.absoluteMatrix); - result.radialCenterPosition = newStartPoint2; - result.startPoint = newStartPoint2; - result.endPoint = newEndPoint2; - result.shapePoint = newShapePoint; - [result.startPoint, result.endPoint, result.shapePoint] = vertiesMap([result.startPoint, result.endPoint, result.shapePoint], calculateRotationOriginMat4(image2.angle, result.radialCenterPosition)); - const targetPoint = result.shapePoint; - result.colorsteps = image2.colorsteps.map((it) => { - const angle = it.percent * 3.6; - const [newPos] = vertiesMap([targetPoint], calculateRotationOriginMat4(angle, result.radialCenterPosition)); - return { - id: it.id, - cut: it.cut, - color: it.color, - timing: it.timing, - timingCount: it.timingCount, - pos: newPos - }; - }); - } - break; - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - result.gradientLineLength = this.getGradientLineLength(backRect.width, backRect.height, image2.angle); - result.centerPosition = lerp$1([], backVerties[0], backVerties[2], 0.5); - const startPoint = add$1([], result.centerPosition, [ - 0, - result.gradientLineLength / 2, - 0 - ]); - const endPoint = subtract([], result.centerPosition, [ - 0, - result.gradientLineLength / 2, - 0 - ]); - const areaStartPoint = clone(startPoint); - const areaEndPoint = clone(endPoint); - const [newStartPoint, newEndPoint, newAreaStartPoint, newAreaEndPoint] = vertiesMap([startPoint, endPoint, areaStartPoint, areaEndPoint], calculateRotationOriginMat4(image2.angle, result.centerPosition)); - result.endPoint = newEndPoint; - result.startPoint = newStartPoint; - result.areaStartPoint = newAreaStartPoint; - result.areaEndPoint = newAreaEndPoint; - result.colorsteps = image2.colorsteps.map((it) => { - const offset = it.toLength(); - return { - id: it.id, - cut: it.cut, - color: it.color, - timing: it.timing, - timingCount: it.timingCount, - pos: lerp$1([], result.startPoint, result.endPoint, offset.value / 100) - }; - }); - break; - } - return result; - } -} -class LayerModel extends DomModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "layer", - name: "New Layer", - tagName: "div" - }, obj2)); - } - getDefaultTitle() { - return "Layer"; - } -} -class ArtBoard extends LayerModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "artboard", - name: "New ArtBoard", - width: 1e3, - height: 1e3, - backgroundColor: "white", - transformStyle: "flat" - }, obj2)); - } - getDefaultTitle() { - return "ArtBoard"; - } - getIcon() { - return obj$3.artboard; - } - editable(editablePropertyName) { - switch (editablePropertyName) { - case "border": - case "borderRadius": - return false; - case "artboardSize": - case "layout": - return true; - } - return super.editable(editablePropertyName); - } -} -const IMAGE_LIST = ["jpg", "jpeg", "png", "gif", "svg"]; -class SVGImageResource extends ImageResource { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - type: "url", - url: "", - datauri: "", - patternUnits: "userSpaceOnUse", - patternWidth: "100%", - patternHeight: "100%", - imageX: "0%", - imageY: "0%", - imageWidth: "100%", - imageHeight: "100%" - }, obj2)); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("url", "datauri", "patternUnits", "patternWidth", "patternHeight", "imageX", "imageY", "imageWidth", "imageHeight")); - } - static parse(str) { - var content2 = str.split("(")[1].split(")")[0]; - var [url, props] = content2.trim().split("#"); - if (!props) { - return new SVGImageResource({ url }); - } - var [ - patternUnits, - patternWidth, - patternHeight, - imageX, - imageY, - imageWidth, - imageHeight - ] = props.split(","); - return new SVGImageResource({ - patternUnits, - patternWidth, - patternHeight, - imageX, - imageY, - imageWidth, - imageHeight, - url - }); - } - isUrl() { - return true; - } - static isImageFile(fileExt) { - return IMAGE_LIST.includes(fileExt); - } - toString() { - var json = this.json; - var { - patternUnits, - patternWidth, - patternHeight, - imageX, - imageY, - imageWidth, - imageHeight, - url - } = json; - var string = [ - patternUnits, - patternWidth, - patternHeight, - imageX, - imageY, - imageWidth, - imageHeight - ].join(",").trim(); - return `url(${url}#${string})`; - } - toSVGString(id, item = {}) { - var { - patternUnits, - patternWidth, - patternHeight, - imageX, - imageY, - imageWidth, - imageHeight - } = this.json; - const localPatternWidth = Length.parse(patternWidth); - const localPatternHeight = Length.parse(patternHeight); - const localImageX = Length.parse(imageX); - const localImageY = Length.parse(imageY); - const localImageWidth = Length.parse(imageWidth); - const localImageHeight = Length.parse(imageHeight); - const width2 = item.width ? localPatternWidth.toPx(item.width).value : localPatternWidth; - const height2 = item.height ? localPatternHeight.toPx(item.height).value : localPatternHeight; - return ` - - - - `; - } - toFillValue(id) { - return `url(#${id})`; - } -} -class SVGGradient extends Gradient { - toString() { - return ""; - } - toSVGString() { - return ""; - } - toFillValue() { - return ""; - } -} -const SpreadMethodList$1 = [ - SpreadMethodType.PAD, - SpreadMethodType.REFLECT, - SpreadMethodType.REPEAT -]; -class SVGLinearGradient extends SVGGradient { - convert(json) { - json.spreadMethod = SpreadMethodList$1.includes(json.spreadMethod) ? json.spreadMethod : SpreadMethodType.PAD; - return json; - } - getDefaultObject(obj2) { - return super.getDefaultObject(__spreadValues({ - type: GradientType.LINEAR, - x1: Length.parse("0%"), - y1: Length.parse("50%"), - x2: Length.parse("100%"), - y2: Length.parse("50%"), - spreadMethod: SpreadMethodType.PAD - }, obj2)); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("x1", "y1", "x2", "y2", "spreadMethod")); - } - toString() { - if (this.colorsteps.length === 0) - return ""; - var colorString = this.getColorString(); - var { x1, y1, x2, y2, spreadMethod } = this.json; - var opt = [x1, y1, x2, y2, spreadMethod].join(" "); - var result = `${this.json.type}(${opt}, ${colorString})`; - return result; - } - toSVGString(id) { - var { x1, y1, x2, y2, spreadMethod } = this.json; - return ` - - ${SVGLinearGradient.makeColorStepList(this.colorsteps).map((it) => ` - - `).join("")} - - `; - } - toFillValue(id) { - return `url(#${id})`; - } - static parse(str) { - const result = parseOneValue(str); - var opt = {}; - const [options2, ...colors2] = result.parameters; - const list2 = []; - options2.forEach((it) => { - if (it.func === FuncType.KEYWORD) { - if (SpreadMethodList$1.includes(it.matchedString)) { - opt.spreadMethod = it.matchedString; - } - } else { - list2.push(it); - } - }); - var [ - x1 = Length.percent(0), - y1 = Length.percent(50), - x2 = Length.percent(100), - y2 = Length.percent(50) - ] = list2.map((it) => it.parsed); - opt = __spreadProps(__spreadValues({}, opt), { - x1, - y1, - x2, - y2 - }); - const colorsteps = SVGLinearGradient.parseColorSteps(colors2); - return new SVGLinearGradient(__spreadProps(__spreadValues({}, opt), { colorsteps })); - } -} -const RadialTypeList = [RadialGradientType.CIRCLE, RadialGradientType.ELLIPSE]; -const SpreadMethodList = [ - SpreadMethodType.PAD, - SpreadMethodType.REFLECT, - SpreadMethodType.REPEAT -]; -class SVGRadialGradient extends SVGGradient { - convert(json) { - json.spreadMethod = SpreadMethodList.includes(json.spreadMethod) ? json.spreadMethod : SpreadMethodType.PAD; - return json; - } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - type: GradientType.RADIAL, - radialType: RadialGradientType.CIRCLE, - x1: Length.parse("50%"), - y1: Length.parse("50%"), - x2: Length.parse("100%"), - y2: Length.parse("50%"), - x3: Length.parse("50%"), - y3: Length.parse("100%"), - spreadMethod: SpreadMethodType.PAD - }, obj2)); - } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("radialType", "x1", "y1", "x2", "y2", "x3", "y3", "spreadMethod")); - } - toString() { - if (this.colorsteps.length === 0) - return ""; - var colorString = this.getColorString(); - var { radialType, x1, y1, x2, y2, x3, y3, spreadMethod } = this.json; - var opt = [radialType, x1, y1, x2, y2, x3, y3, spreadMethod].join(" ").trim(); - var result = `${this.json.type}(${opt}, ${colorString})`; - return result; - } - getGradientAngle(contentBox = {}) { - var { x1, y1, x2, y2 } = this.json; - const newX1 = x1.toPx(contentBox.width); - const newY1 = y1.toPx(contentBox.height); - const newX2 = x2.toPx(contentBox.width); - const newY2 = y2.toPx(contentBox.height); - const angle = calculateAngle360(newX2.value - newX1.value, newY2.value - newY1.value) + 180; - return angle % 360; - } - toSVGString(id, contentBox = {}) { - var { - x1: cx, - y1: cy, - x2, - y2, - x3, - y3, - spreadMethod, - radialType - } = this.json; - const newX1 = cx.toPx(contentBox.width); - const newY1 = cy.toPx(contentBox.height); - const newX2 = x2.toPx(contentBox.width); - const newY2 = y2.toPx(contentBox.height); - var dist$1 = dist([newX1.value, newY1.value, 0], [newX2.value, newY2.value, 0]); - var angle = this.getGradientAngle(contentBox); - const view = create$5(); - multiply$2(view, view, fromTranslation$1([], [newX1.value, newY1.value])); - multiply$2(view, view, fromRotation$1([], degreeToRadian(angle))); - if (radialType === RadialGradientType.ELLIPSE) { - const newX3 = x3.toPx(contentBox.width); - const newY3 = y3.toPx(contentBox.height); - var dist2 = dist([newX1.value, newY1.value, 0], [newX3.value, newY3.value, 0]); - multiply$2(view, view, fromScaling$1([], [1, dist2 / dist$1])); - } - const gradientTransform = `matrix(${view[0]}, ${view[1]}, ${view[3]}, ${view[4]}, ${view[6]}, ${view[7]})`; - return ` - - ${SVGRadialGradient.makeColorStepList(this.colorsteps).map((it) => ` - - `).join("")} - -`; - } - toFillValue(id) { - return `url(#${id})`; - } - static parse(str) { - const result = parseOneValue(str); - var opt = {}; - const [options2, ...colors2] = result.parameters; - const list2 = []; - options2.forEach((it) => { - if (it.func === FuncType.KEYWORD) { - if (RadialTypeList.includes(it.matchedString)) { - opt.radialType = it.matchedString; - } else if (SpreadMethodList.includes(it.matchedString)) { - opt.spreadMethod = it.matchedString; - } - } else { - list2.push(it); - } - }); - var [ - x1 = Length.percent(50), - y1 = Length.percent(50), - x2 = Length.percent(100), - y2 = Length.percent(50), - x3 = Length.percent(50), - y3 = Length.percent(100) - ] = list2.map((it) => it.parsed); - opt = __spreadProps(__spreadValues({}, opt), { - x1, - y1, - x2, - y2, - x3, - y3 - }); - const colorsteps = SVGRadialGradient.parseColorSteps(colors2); - return new SVGRadialGradient(__spreadProps(__spreadValues({}, opt), { colorsteps })); - } -} -class SVGStaticGradient extends SVGGradient { - getDefaultObject() { - return super.getDefaultObject({ - type: "static-gradient", - colorsteps: [ - new ColorStep({ color: "red", percent: 0, index: 0 }), - new ColorStep({ color: "red", percent: 100, index: 1 }) - ] - }); - } - toCloneObject() { - return __spreadProps(__spreadValues({}, super.toCloneObject()), { - static: true - }); - } - static create(color2 = "transparent") { - return new SVGStaticGradient({ - colorsteps: [ - new ColorStep({ color: color2, percent: 0, index: 0 }), - new ColorStep({ color: color2, percent: 100, index: 0 }) - ] - }); - } - setColor(color2) { - this.colorsteps.forEach((it) => { - it.color = color2; - }); - } - toString() { - var color2 = this.json.colorsteps[0].color; - return color2; - } - toSVGString() { - return ""; - } - toFillValue() { - return this.toString(); - } -} -class SVGFill extends PropertyItem { - addImageResource(imageResource) { - this.clear("image-resource"); - return this.addItem("image-resource", imageResource); - } - addGradient(gradient2) { - return this.addImageResource(gradient2); - } - setImageUrl(data) { - if (!data.images) - return; - if (!data.images.length) - return; - this.reset({ - type: "image", - image: SVGFill.createImage(data.images[0]) - }); - } - static createImage(url) { - return new SVGLImageResource({ url }); - } - setGradient(data) { - this.reset({ - type: data.type, - image: SVGFill.createGradient(data, this.json.image) - }); - } - static createGradient(data, gradient2) { - const colorsteps = data.colorsteps || gradient2.colorsteps; - let json = gradient2.toJSON(); - delete json.itemType; - delete json.type; - switch (data.type) { - case GradientType.LINEAR: - return new SVGLinearGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); - case GradientType.RADIAL: - return new SVGRadialGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); - default: - return new SVGStaticGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); - } - } - get image() { - return this.json.image; - } - set image(image2) { - this.json.image = image2; - } - static parse(obj2) { - return new SVGFill(obj2); - } - static parseImage(str = "") { - const result = parseOneValue(str); - let image2 = null; - if (!result) { - return SVGStaticGradient.create(str || "transparent"); - } - switch (result.func) { - case GradientType.LINEAR: - image2 = SVGLinearGradient.parse(result.matchedString); - break; - case GradientType.RADIAL: - image2 = SVGRadialGradient.parse(result.matchedString); - break; - case GradientType.URL: - image2 = SVGImageResource.parse(result.matchedString); - break; - default: - image2 = SVGStaticGradient.create(result.matchedString); - break; - } - return image2; - } - static changeImageType(options2) { - switch (options2.type) { - case GradientType.LINEAR: - return new SVGLinearGradient(options2); - case GradientType.RADIAL: - return new SVGRadialGradient(options2); - case "image-resource": - case GradientType.URL: - return new SVGImageResource(options2); - default: - return new SVGStaticGradient(options2); - } - } -} -const expectedProperties = [ - "appearance", - "border", - "borderRadius", - "backgroundImage", - "backdropFilter", - "clipPath", - "pattern", - "boxShadow", - "layout", - "transform", - "transformOrigin", - "perspective", - "perspectiveOrigin", - "backdropFilter", - "boxModel" -]; -const expectedPropertiesKeys = {}; -expectedProperties.forEach((key) => { - expectedPropertiesKeys[key] = true; -}); -class SVGModel extends LayerModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "svg", - name: "New SVG", - elementType: "svg", - overflow: "visible", - stroke: "black", - strokeWidth: 1, - fill: "transparent", - fillOpacity: 1, - fillRule: "nonzero", - textAnchor: "start", - strokeLinecap: "", - strokeLinejoin: "", - strokeDasharray: [], - strokeDashoffset: 0 - }, obj2)); - } - get stroke() { - return this.get("stroke"); - } - set stroke(value) { - this.set("stroke", value); - } - get strokeWidth() { - return this.get("strokeWidth"); - } - set strokeWidth(value) { - this.set("strokeWidth", value); - } - get fill() { - return this.get("fill"); - } - set fill(value) { - this.set("fill", value); - } - get fillOpacity() { - return this.get("fillOpacity"); - } - set fillOpacity(value) { - this.set("fillOpacity", value); - } - get fillRule() { - return this.get("fillRule"); - } - set fillRule(value) { - this.set("fillRule", value); - } - get textAnchor() { - return this.get("textAnchor"); - } - set textAnchor(value) { - this.set("textAnchor", value); - } - get strokeDasharray() { - return this.get("strokeDasharray"); - } - set strokeDasharray(value) { - this.set("strokeDasharray", value); - } - get strokeDashoffset() { - return this.get("strokeDashoffset"); - } - set strokeDashoffset(value) { - this.set("strokeDashoffset", value); - } - get strokeLinejoin() { - return this.get("strokeLinejoin"); - } - set strokeLinejoin(value) { - this.set("strokeLinejoin", value); - } - get strokeLinecap() { - return this.get("strokeLinecap"); - } - set strokeLinecap(value) { - this.set("strokeLinecap", value); - } - get isDragSelectable() { - return this.isBooleanItem === false; - } - get isBooleanItem() { - return Boolean(this.parent.is("boolean-path")); - } - editable(editablePropertyName) { - if (expectedPropertiesKeys[editablePropertyName]) { - return false; - } - switch (editablePropertyName) { - case "svg-item": - return true; - } - return super.editable(editablePropertyName); - } - getDefaultTitle() { - return "SVG"; - } - isSVG() { - return true; - } - hasPoint(x, y) { - const fill = this.fill; - const fillOpacity = this.fillOpacity; - const strokeWidth = this.strokeWidth; - const isTransparent = fill === "transparent" || fillOpacity === 0 || parse(fill).a === 0; - const isZeroStroke = strokeWidth === 0; - if (isTransparent) { - return this.isPointInStroke(x, y); - } else if (!isTransparent && !isZeroStroke) { - return this.isPointInStroke(x, y) || this.isPointInFill(x, y); - } else if (!isTransparent && isZeroStroke) { - return this.isPointInFill(x, y); - } - return false; - } - isPointInFill(x, y) { - const svgEl = this.getCache("svgElement"); - const pathEl = this.getCache("pathElement"); - if (pathEl) { - const [localX, localY] = this.invertPoint([x, y, 0]); - const point2 = svgEl.createSVGPoint(); - Object.assign(point2, { x: localX, y: localY }); - return pathEl.isPointInFill(point2); - } - return false; - } - isPointInStroke(x, y) { - const svgEl = this.getCache("svgElement"); - const pathEl = this.getCache("pathElement"); - if (pathEl) { - const [localX, localY] = this.invertPoint([x, y, 0]); - const point2 = svgEl.createSVGPoint(); - Object.assign(point2, { x: localX, y: localY }); - return pathEl.isPointInStroke(point2); - } - return false; - } - convertStrokeToPath(distX = 10, distY = 10) { - const attrs = this.attrs("name", "width", "parentId", "height", "x", "y", "transform", "stroke"); - attrs.fill = attrs.stroke; - delete attrs.stroke; - return __spreadProps(__spreadValues({ - itemType: "svg-path", - "fill-rule": "evenodd" - }, attrs), { - x: Length.parse(attrs.x).add(distX), - y: Length.parse(attrs.y).add(distY) - }); - } - toSVGPath() { - const attrs = this.toCloneObject(); - delete attrs.id; - delete attrs.itemType; - return __spreadProps(__spreadValues({}, attrs), { - d: this.d - }); - } - createFragmentMatrix(field) { - const value = this.get(field); - const image2 = SVGFill.parseImage(value); - const backRect = { - x: 0, - y: 0, - width: this.screenWidth, - height: this.screenHeight - }; - const backVerties = vertiesMap(rectToVerties(backRect.x, backRect.y, backRect.width, backRect.height), this.absoluteMatrix); - const result = { - backRect, - backVerties, - absoluteMatrix: this.absoluteMatrix, - image: image2 + H == 0 && (La && (f = La, La = null, f())); + } + function b(f) { + a(f.instance); + } + function c2(f) { + return Qa().then(function(g) { + return WebAssembly.instantiate(g, e); + }).then(f, function(g) { + z("failed to asynchronously prepare wasm: " + g); + y(g); + }); + } + var e = { a: Zb }; + H++; + d.monitorRunDependencies && d.monitorRunDependencies(H); + if (d.instantiateWasm) + try { + return d.instantiateWasm(e, a); + } catch (f) { + return z("Module.instantiateWasm callback failed with error: " + f), false; + } + (function() { + if (ka || typeof WebAssembly.instantiateStreaming !== "function" || Na() || Ma("file://") || typeof fetch !== "function") + return c2(b); + fetch(I, { credentials: "same-origin" }).then(function(f) { + return WebAssembly.instantiateStreaming(f, e).then(b, function(g) { + z("wasm streaming compile failed: " + g); + z("falling back to ArrayBuffer instantiation"); + c2(b); + }); + }); + })(); + return {}; + }(); + d.asm = $b; + var Ra = d.___wasm_call_ctors = function() { + return (Ra = d.___wasm_call_ctors = d.asm.P).apply(null, arguments); + }; + d.__Z6ToCmdsRK6SkPath = function() { + return (d.__Z6ToCmdsRK6SkPath = d.asm.Q).apply(null, arguments); + }; + d.__Z8FromCmdsmi = function() { + return (d.__Z8FromCmdsmi = d.asm.R).apply(null, arguments); + }; + d.__Z7NewPathv = function() { + return (d.__Z7NewPathv = d.asm.S).apply(null, arguments); + }; + d.__Z8CopyPathRK6SkPath = function() { + return (d.__Z8CopyPathRK6SkPath = d.asm.T).apply(null, arguments); + }; + d.__Z6EqualsRK6SkPathS1_ = function() { + return (d.__Z6EqualsRK6SkPathS1_ = d.asm.U).apply(null, arguments); + }; + d.__Z11ToSVGStringRK6SkPath = function() { + return (d.__Z11ToSVGStringRK6SkPath = d.asm.V).apply(null, arguments); + }; + d.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE = function() { + return (d.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE = d.asm.W).apply(null, arguments); + }; + d.__Z13ApplySimplifyR6SkPath = function() { + return (d.__Z13ApplySimplifyR6SkPath = d.asm.X).apply(null, arguments); + }; + d.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp = function() { + return (d.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp = d.asm.Y).apply(null, arguments); + }; + d.__Z10MakeFromOpRK6SkPathS1_8SkPathOp = function() { + return (d.__Z10MakeFromOpRK6SkPathS1_8SkPathOp = d.asm.Z).apply(null, arguments); + }; + d.__Z14ResolveBuilderR11SkOpBuilder = function() { + return (d.__Z14ResolveBuilderR11SkOpBuilder = d.asm._).apply(null, arguments); + }; + d.__Z8ToCanvasRK6SkPathN10emscripten3valE = function() { + return (d.__Z8ToCanvasRK6SkPathN10emscripten3valE = d.asm.$).apply(null, arguments); + }; + d.__Z8ToPath2DRK6SkPath = function() { + return (d.__Z8ToPath2DRK6SkPath = d.asm.aa).apply(null, arguments); + }; + var Y = d._free = function() { + return (Y = d._free = d.asm.ba).apply(null, arguments); + }, Yb = d._malloc = function() { + return (Yb = d._malloc = d.asm.ca).apply(null, arguments); + }, Ab = d.___getTypeName = function() { + return (Ab = d.___getTypeName = d.asm.da).apply(null, arguments); + }; + d.___embind_register_native_and_builtin_types = function() { + return (d.___embind_register_native_and_builtin_types = d.asm.ea).apply(null, arguments); + }; + d.dynCall_vi = function() { + return (d.dynCall_vi = d.asm.fa).apply(null, arguments); + }; + d.dynCall_iiiii = function() { + return (d.dynCall_iiiii = d.asm.ga).apply(null, arguments); + }; + d.dynCall_ii = function() { + return (d.dynCall_ii = d.asm.ha).apply(null, arguments); + }; + d.dynCall_i = function() { + return (d.dynCall_i = d.asm.ia).apply(null, arguments); + }; + d.dynCall_viifffffffff = function() { + return (d.dynCall_viifffffffff = d.asm.ja).apply(null, arguments); + }; + d.dynCall_vifffffi = function() { + return (d.dynCall_vifffffi = d.asm.ka).apply(null, arguments); + }; + d.dynCall_vifffff = function() { + return (d.dynCall_vifffff = d.asm.la).apply(null, arguments); + }; + d.dynCall_viffffff = function() { + return (d.dynCall_viffffff = d.asm.ma).apply(null, arguments); + }; + d.dynCall_vifffffffi = function() { + return (d.dynCall_vifffffffi = d.asm.na).apply(null, arguments); + }; + d.dynCall_viff = function() { + return (d.dynCall_viff = d.asm.oa).apply(null, arguments); + }; + d.dynCall_viffff = function() { + return (d.dynCall_viffff = d.asm.pa).apply(null, arguments); + }; + d.dynCall_vii = function() { + return (d.dynCall_vii = d.asm.qa).apply(null, arguments); + }; + d.dynCall_iii = function() { + return (d.dynCall_iii = d.asm.ra).apply(null, arguments); + }; + d.dynCall_iifff = function() { + return (d.dynCall_iifff = d.asm.sa).apply(null, arguments); + }; + d.dynCall_iiffi = function() { + return (d.dynCall_iiffi = d.asm.ta).apply(null, arguments); + }; + d.dynCall_vifffffffff = function() { + return (d.dynCall_vifffffffff = d.asm.ua).apply(null, arguments); + }; + d.dynCall_iiii = function() { + return (d.dynCall_iiii = d.asm.va).apply(null, arguments); + }; + d.dynCall_viii = function() { + return (d.dynCall_viii = d.asm.wa).apply(null, arguments); + }; + d.dynCall_viiii = function() { + return (d.dynCall_viiii = d.asm.xa).apply(null, arguments); + }; + d.dynCall_fif = function() { + return (d.dynCall_fif = d.asm.ya).apply(null, arguments); + }; + d.dynCall_viif = function() { + return (d.dynCall_viif = d.asm.za).apply(null, arguments); + }; + d.dynCall_fi = function() { + return (d.dynCall_fi = d.asm.Aa).apply(null, arguments); + }; + d.dynCall_viiifffffffff = function() { + return (d.dynCall_viiifffffffff = d.asm.Ba).apply(null, arguments); + }; + d.dynCall_viifffffi = function() { + return (d.dynCall_viifffffi = d.asm.Ca).apply(null, arguments); + }; + d.dynCall_viifffff = function() { + return (d.dynCall_viifffff = d.asm.Da).apply(null, arguments); + }; + d.dynCall_viiffffff = function() { + return (d.dynCall_viiffffff = d.asm.Ea).apply(null, arguments); + }; + d.dynCall_viifffffffi = function() { + return (d.dynCall_viifffffffi = d.asm.Fa).apply(null, arguments); + }; + d.dynCall_viiff = function() { + return (d.dynCall_viiff = d.asm.Ga).apply(null, arguments); + }; + d.dynCall_viiffff = function() { + return (d.dynCall_viiffff = d.asm.Ha).apply(null, arguments); + }; + d.dynCall_iiifff = function() { + return (d.dynCall_iiifff = d.asm.Ia).apply(null, arguments); + }; + d.dynCall_iiiffi = function() { + return (d.dynCall_iiiffi = d.asm.Ja).apply(null, arguments); + }; + d.dynCall_fii = function() { + return (d.dynCall_fii = d.asm.Ka).apply(null, arguments); + }; + d.dynCall_iiffff = function() { + return (d.dynCall_iiffff = d.asm.La).apply(null, arguments); + }; + d.dynCall_fiif = function() { + return (d.dynCall_fiif = d.asm.Ma).apply(null, arguments); + }; + d.dynCall_iiif = function() { + return (d.dynCall_iiif = d.asm.Na).apply(null, arguments); + }; + d.dynCall_vifii = function() { + return (d.dynCall_vifii = d.asm.Oa).apply(null, arguments); + }; + d.dynCall_viifd = function() { + return (d.dynCall_viifd = d.asm.Pa).apply(null, arguments); + }; + d.dynCall_viid = function() { + return (d.dynCall_viid = d.asm.Qa).apply(null, arguments); + }; + d.dynCall_viddi = function() { + return (d.dynCall_viddi = d.asm.Ra).apply(null, arguments); + }; + d.dynCall_iidi = function() { + return (d.dynCall_iidi = d.asm.Sa).apply(null, arguments); + }; + d.dynCall_viffi = function() { + return (d.dynCall_viffi = d.asm.Ta).apply(null, arguments); + }; + d.dynCall_fffff = function() { + return (d.dynCall_fffff = d.asm.Ua).apply(null, arguments); + }; + d.dynCall_viiiii = function() { + return (d.dynCall_viiiii = d.asm.Va).apply(null, arguments); + }; + d.dynCall_viiiiiffii = function() { + return (d.dynCall_viiiiiffii = d.asm.Wa).apply(null, arguments); + }; + d.dynCall_iiiiii = function() { + return (d.dynCall_iiiiii = d.asm.Xa).apply(null, arguments); + }; + d.dynCall_iiiiiii = function() { + return (d.dynCall_iiiiiii = d.asm.Ya).apply(null, arguments); + }; + d.dynCall_iidiiii = function() { + return (d.dynCall_iidiiii = d.asm.Za).apply(null, arguments); + }; + d.dynCall_jiji = function() { + return (d.dynCall_jiji = d.asm._a).apply(null, arguments); + }; + d.asm = $b; + var ac; + La = function bc() { + ac || cc(); + ac || (La = bc); + }; + function cc() { + function a() { + if (!ac && (ac = true, d.calledRun = true, !na)) { + Ea(Ga); + Ea(Ha); + aa(d); + if (d.onRuntimeInitialized) + d.onRuntimeInitialized(); + if (d.postRun) + for (typeof d.postRun == "function" && (d.postRun = [d.postRun]); d.postRun.length; ) { + var b = d.postRun.shift(); + Ia.unshift(b); + } + Ea(Ia); + } + } + if (!(0 < H)) { + if (d.preRun) + for (typeof d.preRun == "function" && (d.preRun = [d.preRun]); d.preRun.length; ) + Ja(); + Ea(Fa); + 0 < H || (d.setStatus ? (d.setStatus("Running..."), setTimeout(function() { + setTimeout(function() { + d.setStatus(""); + }, 1); + a(); + }, 1)) : a()); + } + } + d.run = cc; + if (d.preInit) + for (typeof d.preInit == "function" && (d.preInit = [d.preInit]); 0 < d.preInit.length; ) + d.preInit.pop()(); + cc(); + return PathKitInit3.ready; }; - let newX1, newY1, newX2, newY2, newX3, newY3; - switch (image2.type) { - case GradientType.RADIAL: - newX1 = image2.x1.toPx(backRect.width); - newY1 = image2.y1.toPx(backRect.height); - newX2 = image2.x2.toPx(backRect.width); - newY2 = image2.y2.toPx(backRect.height); - newX3 = image2.x3.toPx(backRect.width); - newY3 = image2.y3.toPx(backRect.height); - const tempStartPoint = [newX1.value, newY1.value, 0]; - const tempEndPoint = [newX2.value, newY2.value, 0]; - const tempShapePoint = [newX3.value, newY3.value, 0]; - var [newStartPoint, newEndPoint, newShapePoint] = vertiesMap([tempStartPoint, tempEndPoint, tempShapePoint], this.absoluteMatrix); - result.endPoint = newEndPoint; - result.startPoint = newStartPoint; - result.shapePoint = newShapePoint; - result.colorsteps = image2.colorsteps.map((it) => { - const offset = it.toLength(); - return { - id: it.id, - cut: it.cut, - color: it.color, - timing: it.timing, - timingCount: it.timingCount, - pos: lerp$1([], result.startPoint, result.endPoint, offset.value / 100) - }; - }); - break; - case GradientType.LINEAR: - newX1 = image2.x1.toPx(backRect.width); - newY1 = image2.y1.toPx(backRect.height); - newX2 = image2.x2.toPx(backRect.width); - newY2 = image2.y2.toPx(backRect.height); - var [newStartPoint, newEndPoint] = vertiesMap([ - [newX1.value, newY1.value, 0], - [newX2.value, newY2.value, 0] - ], this.absoluteMatrix); - result.endPoint = newEndPoint; - result.startPoint = newStartPoint; - result.areaStartPoint = clone(newStartPoint); - result.areaEndPoint = clone(newEndPoint); - result.colorsteps = image2.colorsteps.map((it) => { - const offset = it.toLength(); - return { - id: it.id, - cut: it.cut, - color: it.color, - timing: it.timing, - timingCount: it.timingCount, - pos: lerp$1([], result.startPoint, result.endPoint, offset.value / 100) - }; - }); - break; - } - return result; - } -} -class PathModel extends SVGModel { - getIcon() { - return obj$3.edit; - } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "svg-path", - name: "New Path", - strokeWidth: 1, - d: "", - totalLength: 0 - }, obj2)); - } - enableHasChildren() { - return false; - } - reset(json, context = { origin: "*" }) { - const isChanged = super.reset(json, context); - if (this.hasChangedField("d")) { - this.cachePath = new PathParser(this.d); - this.cacheWidth = this.width; - this.cacheHeight = this.height; - } - return isChanged; - } - refreshMatrixCache() { - super.refreshMatrixCache(); - if (this.hasChangedField("d")) { - this.addCache("pathString", new PathParser(this.get("d"))); - this.addCache("pathWidth", this.width); - this.addCache("pathHeight", this.height); - } else if (this.hasChangedField("width", "height")) { - this.d = this.getCache("pathString").clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; - this.manager.setChanged("reset", this.id, { d: this.d }); - } - } - setCache() { - super.setCache(); - this.addCache("pathString", new PathParser(this.get("d"))); - this.addCache("pathWidth", this.width); - this.addCache("pathHeight", this.height); + }(); + module.exports = PathKitInit2; +})(pathkit); +var PathKitInit = pathkit.exports; +class PathKitManager { + constructor(editor) { + this.editor = editor; + this.pathkit = null; } - get d() { - if (!this.get("d")) { - return null; - } - if (!this.hasCache("pathString")) { - this.addCache("pathString", new PathParser(this.get("d"))); - this.addCache("pathWidth", this.width); - this.addCache("pathHeight", this.height); - } - return this.getCache("pathString").clone().scale(this.width / this.getCache("pathWidth"), this.height / this.getCache("pathHeight")).d; + async load() { + this.registerPathKit(await PathKitInit()); } - set d(value) { - this.set("d", value); + registerPathKit(pathkit2) { + this.pathkit = pathkit2; + this.editor.emit("updatePathKit"); } - getDefaultTitle() { - return "Path"; + has() { + return !!this.pathkit; } -} -class BooleanPathModel extends PathModel { - getIcon() { - return obj$3.edit; + booleanOperation(first, second2, pathOp) { + const PathKit = this.pathkit; + return PathKit.MakeFromOp(PathKit.FromSVGString(first), PathKit.FromSVGString(second2), pathOp).toSVGString(); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "boolean-path", - name: "New Boolean Path", - strokeWidth: 1, - d: "", - booleanOperation: "none" - }, obj2)); + intersection(first, second2) { + const PathKit = this.pathkit; + if (!PathKit) + return; + return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.INTERSECT)); } - get booleanOperation() { - return this.get("booleanOperation"); + union(first, second2) { + const PathKit = this.pathkit; + if (!PathKit) + return; + return this.booleanOperation(first, second2, PathKit.PathOp.UNION); } - set booleanOperation(value) { - this.set("booleanOperation", value); + difference(first, second2) { + const PathKit = this.pathkit; + if (!PathKit) + return; + return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.DIFFERENCE)); } - enableHasChildren() { - return true; + reverseDifference(first, second2) { + const PathKit = this.pathkit; + if (!PathKit) + return; + return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.REVERSE_DIFFERENCE)); } - reset(json, context = { origin: "*" }) { - var _a; - const isChanged = super.reset(json, context); - if (!this.cachePath) { - this.setCache(); - } - if (this.hasChangedField("changedChildren", "booleanOperation")) { - if (this.children.length === 1) { - const newPath = this.layers[0].absolutePath().d; - this.d = this.invertPath(newPath).d; - this.setCache(); - this.modelManager.setChanged("reset", this.id, { d: newPath }); - } else if (this.booleanOperation !== "none") { - if (((_a = this.children) == null ? void 0 : _a.length) >= 2) { - if (this.modelManager.editor.pathKitManager.has()) { - const paths = this.layers.filter((it) => it.d); - if (paths.length >= 2) { - const newPath = this.doBooleanOperation(); - this.d = newPath; - this.setCache(); - this.modelManager.setChanged("reset", this.id, { d: newPath }); - } else { - this.d = void 0; - this.removeCache(); - this.modelManager.setChanged("reset", this.id, { d: void 0 }); - } - } - } - } - } - return isChanged; + xor(first, second2) { + const PathKit = this.pathkit; + if (!PathKit) + return; + return this.reversePathString(this.booleanOperation(first, second2, PathKit.PathOp.XOR)); } - get resizableWitChildren() { - return true; + reversePathString(pathString2) { + return PathParser.fromSVGString(pathString2).reversePathStringByFunc((_, index2) => index2 % 2 === 0); } - startToCacheChildren() { - this.cachedSize = { - width: this.width, - height: this.height - }; - this.cachedLayerMatrix = this.layers.map((item) => { - item.startToCacheChildren(); - return { - item, - matrix: item.matrix - }; - }); + isValidPath(path) { + const PathKit = this.pathkit; + let pathKitPath = PathKit.FromSVGString(path); + return pathKitPath.isValid(); } - recoverChildren() { - const obj2 = { - width: this.width, - height: this.height - }; - const scaleX = obj2.width / this.cachedSize.width; - const scaleY = obj2.height / this.cachedSize.height; - this.cachedLayerMatrix.forEach(({ item, matrix }) => { - item.reset({ - x: item.x.changeUnitValue(matrix.x * scaleX, obj2.width), - y: item.y.changeUnitValue(matrix.y * scaleY, obj2.height), - width: item.width.changeUnitValue(matrix.width * scaleX, obj2.width), - height: item.height.changeUnitValue(matrix.height * scaleY, obj2.height) - }); - item.recoverChildren(); - }); + simplify(path) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + return pathObject.simplify().toSVGString(); } - getFieldValueByBooleanOperation(field) { - const layers2 = this.layers; - if (layers2.length === 0) { - return; - } else if (layers2.length === 1) { - return layers2[0][field]; + convertLineJoin(lineJoin) { + const PathKit = this.pathkit; + switch (lineJoin) { + case "miter": + return PathKit.StrokeJoin.MITER; + case "round": + return PathKit.StrokeJoin.ROUND; + case "bevel": + return PathKit.StrokeJoin.BEVEL; } - const op = this.booleanOperation; - switch (op) { - case BooleanOperation.DIFFERENCE: - return layers2[1][field]; + } + convertLineCap(lineCap) { + const PathKit = this.pathkit; + switch (lineCap) { + case "butt": + return PathKit.StrokeCap.BUTT; + case "round": + return PathKit.StrokeCap.ROUND; + case "square": + return PathKit.StrokeCap.SQUARE; } - return layers2[0][field]; } - get fill() { - return this.getFieldValueByBooleanOperation("fill"); + stroke(path, opt = { width: 1, miter_limit: 4 }) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + if (isArray(opt["stroke-dasharray"])) { + const arr = opt["stroke-dasharray"]; + if (arr.length >= 2) { + pathObject.dash(arr[0], arr[1], +(opt["stroke-dashoffset"] || 0)); + } + } + let newPathObject = pathObject.stroke({ + width: +opt["stroke-width"], + join: this.convertLineJoin(opt["stroke-linejoin"]), + cap: this.convertLineCap(opt["stroke-linecap"]) + }); + newPathObject.setFillType(PathKit.FillType.WINDING); + return newPathObject.simplify().toSVGString(); } - get stroke() { - return this.getFieldValueByBooleanOperation("stroke"); + round(path, opt = { width: 1, miter_limit: 4 }) { + return this.stroke(path, __spreadProps(__spreadValues({}, opt), { + "stroke-linejoin": "round" + })); } - setCache() { - super.setCache(); - this.cachePath = new PathParser(this.d); - this.cacheWidth = this.width; - this.cacheHeight = this.height; + grow(path, opt = { width: 1, miter_limit: 4 }) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + return pathObject.copy().stroke(opt).op(pathObject, PathKit.PathOp.DIFFERENCE).toSVGString(); } - removeCache() { - super.removeCache(); - this.cachePath = void 0; - this.cacheWidth = void 0; - this.cacheHeight = void 0; + shrink(path, opt = { width: 1, miter_limit: 4 }) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + const simplifyPath = pathObject.copy().simplify(); + return pathObject.copy().stroke(opt).op(simplifyPath, PathKit.PathOp.DIFFERENCE).toSVGString(); } - getDefaultTitle() { - return "Path"; + dash(path, on, off, phase = 1) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + return pathObject.dash(on, off, phase).toSVGString(); } - doBooleanOperation() { - const op = this.booleanOperation; - switch (op) { - case BooleanOperation.INTERSECTION: - return this.intersection(); - case BooleanOperation.UNION: - return this.union(); - case BooleanOperation.DIFFERENCE: - return this.difference(); - case BooleanOperation.REVERSE_DIFFERENCE: - return this.reverseDifference(); - case BooleanOperation.XOR: - return this.xor(); - } - return ""; + trim(path, startT, stopT, isComplement = false) { + const PathKit = this.pathkit; + const pathObject = PathKit.FromSVGString(path); + return pathObject.trim(startT, stopT, isComplement).toSVGString(); } - getPathList() { - return this.layers.map((it) => it.absolutePath().d); +} +class SegmentSelectionManager { + constructor(editor) { + this.$editor = editor; + this.selectedPointKeys = {}; + this.selectedPointList = []; } - intersection() { - const [first, ...rest] = this.getPathList(); - const newPath = rest.reduce((path1, path2) => { - return this.modelManager.editor.pathKitManager.intersection(path1, path2); - }, first); - return this.invertPath(newPath).d; + get length() { + return this.selectedPointList.length; } - union() { - const [first, ...rest] = this.getPathList(); - const newPath = rest.reduce((path1, path2) => { - return this.modelManager.editor.pathKitManager.union(path1, path2); - }, first); - return this.invertPath(newPath).d; + initialize() { + this.selectedPointKeys = {}; + this.selectedPointList = []; } - difference() { - const [first, ...rest] = this.getPathList(); - const newPath = rest.reduce((path1, path2) => { - return this.modelManager.editor.pathKitManager.difference(path1, path2); - }, first); - return this.invertPath(newPath).d; + makeSegmentKey(index2, key) { + return `${index2}_${key}`; } - reverseDifference() { - const [first, ...rest] = this.getPathList(); - const newPath = rest.reduce((path1, path2) => { - return this.modelManager.editor.pathKitManager.reverseDifference(path1, path2); - }, first); - return this.invertPath(newPath).d; + select(...list2) { + this.selectedPointKeys = {}; + this.selectedPointList = list2.map(({ key, index: index2 }) => ({ + key, + index: +index2 || 0 + })); + list2.forEach((it) => { + var key = this.makeSegmentKey(it.index, it.key); + this.selectedPointKeys[key] = it; + }); } - xor() { - const [first, ...rest] = this.getPathList(); - const newPath = rest.reduce((path1, path2) => { - return this.modelManager.editor.pathKitManager.xor(path1, path2); - }, first); - return this.invertPath(newPath).d; + toggleSegment(index2, key) { + if (!this.isSelectedSegment(key, index2)) { + this.select(...this.selectedPointList, { key, index: index2 }); + } else { + this.select(...this.selectedPointList.filter((it) => { + return it.key !== key || it.index !== index2; + })); + } } -} -class CircleLayer extends LayerModel { - getIcon() { - return obj$3.lens; + toggleSelect(...list2) { + list2 = list2.map((it) => { + return __spreadProps(__spreadValues({}, it), { included: this.isSelectedSegment(it.index, it.key) }); + }); + const includedList = list2.filter((it) => it.included); + const notIncludedList = list2.filter((it) => !it.included); + let uniqueList = [...this.selectedPointList]; + if (includedList.length) { + uniqueList = this.selectedPointList.filter((it) => { + const oldKey = this.makeSegmentKey(it); + return Boolean(includedList.find((includeNode) => { + return oldKey === this.makeSegmentKey(includeNode); + })) === false; + }); + } + this.select(...uniqueList, ...notIncludedList); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "circle", - name: "New Circle", - borderRadius: "100%" - }, obj2)); + selectKeyIndex(index2, key) { + if (!this.isSelectedSegment(index2, key)) { + this.select({ key, index: index2 }); + } } - getDefaultTitle() { - return "Circle"; + isSelectedSegment(index2, key) { + var key = this.makeSegmentKey(index2, key); + return !!this.selectedPointKeys[key]; } } -class ImageLayer extends LayerModel { - getIcon() { - return obj$3.image; +class SelectionManager { + constructor(editor) { + this.$editor = editor; + this.$context = this.$editor.context; + this.project = null; + this.itemKeys = {}; + this.hoverId = ""; + this.hoverItems = []; + this.ids = []; + this.colorsteps = []; + this.ghosts = []; + this.cachedItemMatrices = []; + this.cachedArtBoardVerties = []; + this.cachedVerties = rectToVerties(0, 0, 0, 0, "50% 50% 0px"); + this.gridInformation = {}; + this.dragTargetItem = null; + this.$editor.on("config:bodyEvent", () => { + this.refreshMousePosition(); + }); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "image", - name: "New Image", - elementType: "image", - src: "" - }, obj2)); + refreshMousePosition() { + const areaWidth = this.$context.config.get("area.width"); + const pos = this.$context.viewport.getWorldPosition(); + this.pos = pos; + const [row, column] = area(pos[0], pos[1], areaWidth); + this.row = row; + this.column = column; } - get src() { - return this.get("src"); + get modelManager() { + return this.$context.modelManager; } - set src(value) { - this.set("src", value); + get lockManager() { + return this.$context.lockManager; } - get naturalWidth() { - return this.get("naturalWidth"); + get items() { + return this.modelManager.searchLiveItemsById(this.ids); } - set naturalWidth(value) { - this.set("naturalWidth", value); + get current() { + return this.modelManager.searchItem(this.ids[0]); } - get naturalHeight() { - return this.get("naturalHeight"); + get currentProject() { + if (!this.project) { + this.project = this.modelManager.getProjectByIndex(); + } + return this.project; } - set naturalHeight(value) { - this.set("naturalHeight", value); + get isEmpty() { + return !this.length; } - enableHasChildren() { - return false; + get isOne() { + if (this.length === 1 && this.current.is("artboard")) + return true; + return this.length === 1; } - getDefaultTitle() { - return "Image"; + get isMany() { + return this.length > 1; } - resize() { - this.reset({ - width: this.naturalWidth.clone(), - height: this.naturalHeight.clone() - }); + get length() { + return this.ids.length; } -} -class PolygonModel extends SVGModel { - getIcon() { - return obj$3.edit; + get isLayoutItem() { + var _a; + return (_a = this.current) == null ? void 0 : _a.isLayoutItem(); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "polygon", - name: "New Polygon", - strokeWidth: 1, - count: 3 - }, obj2)); + get allLayers() { + return this.currentProject.allLayers || []; } - get count() { - return this.get("count"); + get filteredLayers() { + var _a; + const areaWidth = this.$editor.context.config.get("area.width"); + return ((_a = this.currentProject) == null ? void 0 : _a.filteredAllLayers((item) => { + if (item.is("project")) + return false; + const areaPosition = item.getAreaPosition(areaWidth); + if (!areaPosition) { + return false; + } + const { column, row } = areaPosition; + return column[0] <= this.column && this.column <= column[1] && row[0] <= this.row && this.row <= row[1]; + }).filter((item) => { + return item.isPointInRect(this.pos[0], this.pos[1]); + })) || []; } - set count(value) { - this.set("count", value); + get notSelectedLayers() { + return this.filteredLayers.filter((it) => this.check(it) === false); } - convert(json) { - json = super.convert(json); - if (json.count) - json.count = +json.count; - return json; + get selectedArtboards() { + return [...new Set(this.items.map((it) => it.artboard))]; } - enableHasChildren() { + hasChangedField(...args2) { + if (this.current) { + return this.current.hasChangedField(...args2); + } return false; } - get editablePath() { - return false; + getRootItem(current) { + var rootItem = current; + if (current && current.parentId) { + rootItem = current.parent; + } + return rootItem; } - get d() { - const { width: width2, height: height2, count } = this; - return PathParser.makePolygon(width2, height2, count).d; + selectColorStep(...args2) { + this.colorsteps = args2; } - getDefaultTitle() { - return "Polygon"; + isSelectedColorStep(id) { + return this.colorsteps.includes(id); } - isPointInPath(point2) { - const localPoint = transformMat4([], point2, this.absoluteMatrixInverse); - return this.cachePath.isPointInPath({ x: localPoint[0], y: localPoint[1] }, this.strokeWidth || 0); + selectProject(project2) { + if (isString(project2)) { + project2 = this.modelManager.get(project2); + } + this.project = project2; + this.select(); } -} -function makeInterpolateIdentity(layer, property, value) { - return () => { - return value; - }; -} -function makeInterpolateNumber(layer, property, startNumber, endNumber, unit = void 0) { - return (rate, t) => { - var result = 0; - if (t === 0) { - result = startNumber; - } else if (t === 1) { - result = endNumber; - } else { - result = startNumber + (endNumber - startNumber) * rate; + isSameIds(newIds) { + if (this.ids.length != newIds.length) { + return false; } - if (unit) { - return result + unit; + if (this.ids.filter((id) => newIds.includes(id)).length === this.ids.length) { + return true; } - return result; - }; -} -function getRealAttributeValue(layer, property, value, refType = "width", refElement = "parent") { - var refObject = null; - if (refElement === "parent") { - refObject = layer[refElement][refType]; - } else if (refElement === "self") { - refObject = layer[refType]; - } - if (refObject) { - return value.toPx(refObject.value); - } - return value; -} -function rollbackRealAttributeValue(layer, property, value, unit, refType = "width", refElement = "parent") { - var refObject = null; - if (refElement === "parent") { - refObject = layer[refElement][refType]; - } else if (refElement === "self") { - refObject = layer[refType]; + return false; } - if (refObject) { - return value.to(unit, refObject.value); + filterIds(ids = []) { + return ids.map((it) => it.id || it).filter(Boolean); } - return value; -} -function makeInterpolateLength(layer, property, startNumber, endNumber, refType = "width", refElement = "parent") { - var s = Length.parse(startNumber); - var e = Length.parse(endNumber); - if (s.unit === e.unit) { - return makeInterpolateNumber(layer, property, s.value, e.value, s.unit); - } else if (s.equals(e)) { - return makeInterpolateIdentity(layer, property, s); + selectByGroup(...ids) { + var list2 = this.modelManager.searchItemsById(this.filterIds(ids || [])).filter((it) => { + return !this.lockManager.get(it.id); + }); + const newSelectedItems = this.modelManager.convertGroupItems(list2); + return this.select(...newSelectedItems); } - return (rate, t) => { - var realStartValue = getRealAttributeValue(layer, property, s, refType, refElement); - var realEndValue = getRealAttributeValue(layer, property, e, refType, refElement); - if (t === 0) { - return realStartValue; - } else if (t === 1) { - return realEndValue; - } - return rollbackRealAttributeValue(layer, property, realStartValue.value + (realEndValue.value - realStartValue.value) * rate, s.unit, refType, refElement); - }; -} -function makeInterpolateBoolean(layer, property, s, e) { - return (ratio, t) => { - if (t === 1) { - return e; - } - return s; - }; -} -function makeInterpolateColor(layer, property, startColor, endColor) { - var s = parse(startColor || "rgba(0, 0, 0, 1)"); - var e = parse(endColor || "rgba(0, 0, 0, 1)"); - return (rate, t) => { - if (t === 0) { - return startColor; - } else if (t === 1) { - return endColor; + select(...ids) { + var list2 = this.modelManager.searchItemsById(this.filterIds(ids || [])).filter((it) => !it.lock && it.isAbsolute); + const newSelectedItems = list2.filter((it) => { + return it.path.filter((element) => list2.includes(element)).length < 2; + }); + const newSelectedIds = newSelectedItems.map((it) => it.id); + if (this.isSameIds(newSelectedIds)) { + return false; } - return interpolateRGB(s, e, rate, "rgb"); - }; -} -function makeInterpolateString(layer, property, startString, endString) { - return makeInterpolateBoolean(layer, property, startString, endString); -} -function makeInterpolateColorStep(layer, property, startColorStep, endColorStep) { - var obj2 = { - cut: makeInterpolateBoolean(layer, property, startColorStep.cut, endColorStep.cut), - percent: makeInterpolateNumber(layer, property, startColorStep.percent, endColorStep.percent), - px: makeInterpolateNumber(layer, property, startColorStep.px, endColorStep.px), - em: makeInterpolateNumber(layer, property, startColorStep.em, endColorStep.em), - unit: makeInterpolateString(layer, property, startColorStep.unit, endColorStep.unit), - color: makeInterpolateColor(layer, property, startColorStep.color, endColorStep.color) - }; - return (rate, t) => { - return new ColorStep({ - cut: obj2.cut(rate, t), - percent: obj2.percent(rate, t), - px: obj2.px(rate, t), - em: obj2.em(rate, t), - unit: obj2.unit(rate, t), - color: obj2.color(rate, t) + this.itemKeys = {}; + newSelectedItems.forEach((item) => { + this.itemKeys[item.id] = item; }); - }; -} -function makeInterpolateColorStepList(layer, property, startColorsteps = [], endColorsteps = []) { - var max = Math.max(startColorsteps.length, endColorsteps.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var s = startColorsteps[i]; - var e = endColorsteps[i]; - if (s && e) { - list2[i] = makeInterpolateColorStep(layer, property, s, e); + this.ids = newSelectedIds; + this.setRectCache(); + this.$editor.emit(REFRESH_SELECTION); + return true; + } + reload() { + return this.select(...this.ids); + } + reselect() { + this.setRectCache(); + } + check(item) { + return !!this.itemKeys[item.id]; + } + hasPathOf(item) { + return item.hasPathOf(this.items.filter((it) => it.isNot("artboard"))); + } + hasParent(parentId) { + return this.items.some((it) => it.hasParent(parentId)); + } + get(id) { + return this.itemKeys[id]; + } + empty() { + this.select(); + } + itemsByIds(ids = null) { + let itemIdList = []; + if (Array.isArray(ids)) { + itemIdList = ids; + } else if (isString(ids) || isObject(ids)) { + itemIdList = [ids]; + } + return this.modelManager.searchItemsById(itemIdList); + } + selectById(id) { + this.select(id); + } + selectAfterCopy() { + this.select(...this.items.map((it) => it.copy())); + } + addById(id) { + if (this.itemKeys[id]) + return; + this.select(...this.ids, id); + } + removeById(id) { + let ids = id; + if (isString(id)) { + ids = [id]; + } + const filteredItems = this.ids.filter((id2) => ids.includes(id2) === false); + this.select(...filteredItems); + } + toggleById(id) { + if (this.itemKeys[id]) { + this.removeById(id); } else { - list2[i] = makeInterpolateBoolean(layer, property, s, e); + this.addById(id); } } - return (rate, t) => { - return list2.map((it) => it(rate, t)); - }; -} -function makeInterpolateConicGradient(layer, property, s, e) { - var obj2 = { - angle: makeInterpolateNumber(layer, property, s.angle, e.angle), - radialPositionX: makeInterpolateLength(layer, property, s.radialPosition[0], e.radialPosition[0], "width", "self"), - radialPositionY: makeInterpolateLength(layer, property, s.radialPosition[1], e.radialPosition[1], "height", "self"), - colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) - }; - return (rate, t) => { - return new ConicGradient({ - angle: obj2.angle(rate, t), - radialPosition: [ - obj2.radialPositionX(rate, t), - obj2.radialPositionY(rate, t) - ], - colorsteps: obj2.colorsteps(rate, t) - }); - }; -} -function makeInterpolateLinearGradient(layer, property, s, e) { - var obj2 = { - angle: makeInterpolateNumber(layer, property, s.angle, e.angle), - colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) - }; - return (rate, t) => { - var colorsteps = obj2.colorsteps(rate, t); - return new LinearGradient({ - angle: obj2.angle(rate, t), - colorsteps + getArtboardByPoint(vec) { + return this.currentProject.artboards.find((artboard2) => { + return polyPoint(artboard2.originVerties, ...vec); }); - }; -} -function convertPercent(value, type) { - switch (type) { - case "width": - if (value === "center") { - return "50%"; - } else if (value === "left") { - return "0%"; - } else if (value === "right") { - return "100%"; - } - break; - case "height": - if (value === "center") { - return "50%"; - } else if (value === "top") { - return "0%"; - } else if (value === "bottom") { - return "100%"; + } + changeInLayoutArea() { + let checkedParentChange = false; + this.each((instance) => { + if (instance.is("artboard") === false) { + if (instance.artboard) { + const localArtboardVerties = instance.artboard.originVerties; + const isInArtboard = polyPoint(localArtboardVerties, this.pos[0], this.pos[1]); + if (isInArtboard) { + return false; + } + } + const selectedArtBoard = this.cachedArtBoardVerties.find((artboard2) => { + return polyPoint(artboard2.matrix.originVerties, this.pos[0], this.pos[1]); + }); + if (selectedArtBoard) { + if (selectedArtBoard.item !== instance.artboard && selectedArtBoard.item.hasLayout() === false) { + selectedArtBoard.item.appendChild(instance); + checkedParentChange = true; + } + } else { + if (instance.artboard) { + this.currentProject.appendChild(instance); + checkedParentChange = true; + } + } } - break; + }); + return checkedParentChange; } - return value; -} -function makeInterpolateRadialGradient(layer, property, s, e) { - s.radialPosition[0] = convertPercent(s.radialPosition[0], "width"); - s.radialPosition[1] = convertPercent(s.radialPosition[1], "height"); - e.radialPosition[0] = convertPercent(e.radialPosition[0], "width"); - e.radialPosition[1] = convertPercent(e.radialPosition[1], "height"); - var obj2 = { - radialType: makeInterpolateString(layer, property, s.radialType, e.radialType), - radialPositionX: makeInterpolateLength(layer, property, s.radialPosition[0], e.radialPosition[0], "width", "self"), - radialPositionY: makeInterpolateLength(layer, property, s.radialPosition[1], e.radialPosition[1], "height", "self"), - colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) - }; - return (rate, t) => { - var results = new RadialGradient({ - radialType: obj2.radialType(rate, t), - radialPosition: [ - obj2.radialPositionX(rate, t), - obj2.radialPositionY(rate, t) - ], - colorsteps: obj2.colorsteps(rate, t) + setRectCache() { + if (this.isEmpty) { + this.cachedVerties = []; + this.cachedRectVerties = []; + this.cachedItemMatrices = []; + this.ghosts = []; + this.cachedArtBoardVerties = this.currentProject.artboards.map((item) => { + return { item, matrix: item.matrix }; + }); + return; + } + this.cachedVerties = this.verties; + this.cachedRectVerties = toRectVerties(this.verties); + this.cachedItemMatrices = []; + this.cachedChildren = []; + this.ghosts = []; + this.items.forEach((it) => { + if (it.is("artboard")) { + this.cachedItemMatrices.push(it.matrix); + } else if (it.hasChildren()) { + const list2 = this.modelManager.getAllLayers(it.id).map((it2) => it2.matrix); + this.cachedChildren.push(...list2.map((it2) => it2.id)); + this.cachedItemMatrices.push(...list2); + } else { + this.cachedItemMatrices.push(it.matrix); + } + this.ghosts.push(it.absoluteMatrix); }); - return results; - }; -} -function makeInterpolateRepeatingConicGradient(layer, property, s, e) { - var func = makeInterpolateConicGradient(layer, property, s, e); - return (rate, t) => { - var obj2 = func(rate, t); - return new RepeatingConicGradient({ - angle: obj2.angle, - radialPosition: obj2.radialPosition, - colorsteps: obj2.colorsteps + this.cachedArtBoardVerties = this.currentProject.artboards.map((item) => { + return { item, matrix: item.matrix }; }); - }; -} -function makeInterpolateRepeatingLinearGradient(layer, property, s, e) { - var func = makeInterpolateLinearGradient(layer, property, s, e); - return (rate, t) => { - var obj2 = func(rate, t); - var results = new RepeatingLinearGradient({ - angle: obj2.angle, - colorsteps: obj2.colorsteps + } + startToCacheChildren() { + this.items.forEach((item) => { + item.startToCacheChildren(); }); - return results; - }; -} -function makeInterpolateRepeatingRadialGradient(layer, property, s, e) { - var func = makeInterpolateRadialGradient(layer, property, s, e); - return (rate, t) => { - var obj2 = func(rate, t); - return new RepeatingRadialGradient({ - radialType: obj2.radialType, - radialPosition: obj2.radialPosition, - colorsteps: obj2.colorsteps + } + recoverChildren() { + this.items.forEach((item) => { + item.recoverChildren(); }); - }; -} -function makeInterpolateImageResource(layer, property, s, e) { - var obj2 = { - image: (rate, t) => { - return t; + } + get verties() { + if (this.isOne) { + return this.current.verties; + } else { + return this.rectVerties; } - }; - if (s.type === "url" || e.type === "url") { - obj2.image = makeInterpolateBoolean(layer, property, s, e); - } else { - if (s.type != e.type) { - obj2.image = makeInterpolateBoolean(layer, property, s, e); + } + get targetVerties() { + if (this.isOne) { + return this.current.originVerties; } else { - switch (s.type) { - case "linear-gradient": - obj2.image = makeInterpolateLinearGradient(layer, property, s, e); - break; - case "repeating-linear-gradient": - obj2.image = makeInterpolateRepeatingLinearGradient(layer, property, s, e); - break; - case "radial-gradient": - obj2.image = makeInterpolateRadialGradient(layer, property, s, e); - break; - case "repeating-radial-gradient": - obj2.image = makeInterpolateRepeatingRadialGradient(layer, property, s, e); - break; - case "conic-gradient": - obj2.image = makeInterpolateConicGradient(layer, property, s, e); - break; - case "repeating-conic-gradient": - obj2.image = makeInterpolateRepeatingConicGradient(layer, property, s, e); - break; - } + return targetItemsToRectVerties(this.items); } } - return (rate, t) => { - return obj2.image(rate, t); - }; -} -function makeInterpolateBackgroundImage(layer, property, startValue, endValue) { - var s = BackgroundImage.parseStyle(STRING_TO_CSS(startValue)); - var e = BackgroundImage.parseStyle(STRING_TO_CSS(endValue)); - var totalLength = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0, len2 = totalLength; i < len2; i++) { - var startObject = s[i] || null; - var endObject = e[i] || null; - if (startObject && !endObject) { - list2.push({ - image: makeInterpolateIdentity(layer, property, startObject.image), - size: makeInterpolateIdentity(layer, property, startObject.size), - width: makeInterpolateIdentity(layer, property, startObject.width), - height: makeInterpolateIdentity(layer, property, startObject.height), - x: makeInterpolateIdentity(layer, property, startObject.x), - y: makeInterpolateIdentity(layer, property, startObject.y), - blendMode: makeInterpolateIdentity(layer, property, startObject.blendMode), - repeat: makeInterpolateIdentity(layer, property, startObject.repeat) - }); - } else if (!startObject && endObject) { - list2.push({ - image: makeInterpolateIdentity(layer, property, endObject.image), - size: makeInterpolateIdentity(layer, property, endObject.size), - width: makeInterpolateIdentity(layer, property, endObject.width), - height: makeInterpolateIdentity(layer, property, endObject.height), - x: makeInterpolateIdentity(layer, property, endObject.x), - y: makeInterpolateIdentity(layer, property, endObject.y), - blendMode: makeInterpolateIdentity(layer, property, endObject.blendMode), - repeat: makeInterpolateIdentity(layer, property, endObject.repeat) - }); - } else if (startObject && endObject) { - list2.push({ - image: makeInterpolateImageResource(layer, property, startObject.image, endObject.image), - size: makeInterpolateString(layer, property, startObject.size, endObject.size), - width: makeInterpolateLength(layer, property, startObject.width, endObject.width, "width", "self"), - height: makeInterpolateLength(layer, property, startObject.height, endObject.height, "height", "self"), - x: makeInterpolateLength(layer, property, startObject.x, endObject.x, "width", "self"), - y: makeInterpolateLength(layer, property, startObject.y, endObject.y, "height", "self"), - blendMode: makeInterpolateString(layer, property, startObject.blendMode, endObject.blendMode), - repeat: makeInterpolateString(layer, property, startObject.repeat, endObject.repeat) - }); + get originVerties() { + return this.rectVerties.filter((_, index2) => index2 < 4); + } + get rectVerties() { + if (this.isEmpty) { + return []; } + return itemsToRectVerties(this.items); } - return (rate, t) => { - return BackgroundImage.join(list2.map((it) => { - var data = { - image: it.image(rate, t), - size: it.size(rate, t), - x: it.x(rate, t), - y: it.y(rate, t), - width: it.width(rate, t), - height: it.height(rate, t), - blendMode: it.blendMode(rate, t), - repeat: it.repeat(rate, t) - }; - return data; - })); - }; -} -const getBorderRadiusList = (radiusValue) => { - var startObject = []; - if (radiusValue.isAll) { - startObject = [ - radiusValue["border-radius"] || "0px", - radiusValue["border-radius"] || "0px", - radiusValue["border-radius"] || "0px", - radiusValue["border-radius"] || "0px" - ]; - } else { - startObject = [ - radiusValue["border-top-left-radius"] || "0px", - radiusValue["border-top-right-radius"] || "0px", - radiusValue["border-bottom-right-radius"] || "0px", - radiusValue["border-bottom-left-radius"] || "0px" - ]; + get itemRect() { + const verties = this.verties; + return { + x: verties[0][0], + y: verties[0][1], + width: distance$1(verties[0], verties[1]), + height: distance$1(verties[0], verties[3]) + }; } - return startObject; -}; -function makeInterpolateBorderRadius(layer, property, startValue, endValue) { - var s = getBorderRadiusList(BorderRadius.parseStyle(startValue)); - var e = getBorderRadiusList(BorderRadius.parseStyle(endValue)); - var max = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0; i < max; i++) { - list2[i] = makeInterpolateLength(layer, property, s[i], e[i]); + toCloneObject() { + let data = {}; + this.each((item) => { + data[item.id] = item.toCloneObject(false); + }); + return data; } - return (rate, t) => { - return list2.map((it) => it(rate, t)).join(" "); - }; -} -function makeInterpolateBoxShadow(layer, property, startValue, endValue) { - var s = BoxShadow.parseStyle(startValue); - var e = BoxShadow.parseStyle(endValue); - var totalLength = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0, len2 = totalLength; i < len2; i++) { - var startObject = s[i] || BoxShadow.parseStyle("0px 0px 0px 0px rgba(0, 0, 0, 0)")[0]; - var endObject = e[i] || BoxShadow.parseStyle("0px 0px 0px 0px rgba(0, 0, 0, 0)")[0]; - list2.push({ - inset: makeInterpolateBoolean(layer, property, startObject.inset, endObject.inset), - offsetX: makeInterpolateLength(layer, property, startObject.offsetX, endObject.offsetX), - offsetY: makeInterpolateLength(layer, property, startObject.offsetY, endObject.offsetY), - blurRadius: makeInterpolateLength(layer, property, startObject.blurRadius, endObject.blurRadius), - spreadRadius: makeInterpolateLength(layer, property, startObject.spreadRadius, endObject.spreadRadius), - color: makeInterpolateColor(layer, property, startObject.color, endObject.color) + pack(...keys2) { + let data = {}; + this.each((item) => { + data[item.id] = {}; + keys2.forEach((key) => { + data[item.id][key] = item[key]; + }); }); + return data; } - return (rate, t) => { - return BoxShadow.join(list2.map((it) => { - return { - inset: it.inset(rate, t), - offsetX: it.offsetX(rate, t), - offsetY: it.offsetY(rate, t), - blurRadius: it.blurRadius(rate, t), - spreadRadius: it.spreadRadius(rate, t), - color: it.color(rate, t) - }; - })); - }; -} -function makeInterpolateClipPathCircle(layer, property, s, e) { - var obj2 = {}; - if (s.radius === "closest-side" || s.radius === "farthest-side" || e.radius === "closest-side" || e.radius === "farthest-side") { - obj2.radius = makeInterpolateBoolean(layer, property, s.radius, e.radius); - } else { - if (s.radius.unit === e.radius.unit) { - obj2.radius = makeInterpolateNumber(layer, property, s.radius.value, e.radius.value, s.radius.unit); - } else { - obj2.radius = makeInterpolateLength(layer, property, s.radius, e.radius, "width", "self"); + packByIds(ids, ...keys2) { + let data = {}; + let localItems = []; + if (ids === null) { + localItems = this.items; + } else if (isString(ids) || Array.isArray(ids)) { + localItems = this.itemsByIds(ids); } + const valueObject = {}; + keys2.forEach((it) => { + valueObject[it] = true; + }); + localItems.forEach((item) => { + data[item.id] = item.attrs(...keys2); + }); + return data; } - obj2.x = makeInterpolateLength(layer, property, s.x, e.x, "width", "self"); - obj2.y = makeInterpolateLength(layer, property, s.y, e.y, "height", "self"); - return (rate, t) => { - var radius = obj2.radius(rate, t); - var x = obj2.x(rate, t); - var y = obj2.y(rate, t); - var results = `${x} ${y}`; - var radiusString = radius + ""; - if (radiusString.includes("closest-side")) { - radiusString = "closest-side"; - } else if (radiusString.includes("farthest-side")) { - radiusString = "farthest-side"; + packByValue(valueObject, ids = null) { + let data = {}; + let localItems = []; + if (ids === null) { + localItems = this.items; + } else if (isString(ids) || Array.isArray(ids)) { + localItems = this.itemsByIds(ids); } - return radius ? `${radiusString} at ${results}` : `${results}`; - }; -} -function makeInterpolateClipPathEllipse(layer, property, s, e) { - var obj2 = { - radiusX: makeInterpolateLength(layer, property, s.radiusX, e.radiusX, "width", "self"), - radiusY: makeInterpolateLength(layer, property, s.radiusY, e.radiusY, "height", "self"), - x: makeInterpolateLength(layer, property, s.x, e.x, "width", "self"), - y: makeInterpolateLength(layer, property, s.y, e.y, "height", "self") - }; - return (rate, t) => { - var radiusX = obj2.radiusX(rate, t); - var radiusY = obj2.radiusY(rate, t); - var x = obj2.x(rate, t); - var y = obj2.y(rate, t); - return `${radiusX} ${radiusY} at ${x} ${y}`; - }; -} -function makeInterpolateClipPathInset(layer, property, s, e) { - var obj2 = { - top: makeInterpolateNumber(layer, property, s.top.value, e.top.value, s.top.unit), - left: makeInterpolateNumber(layer, property, s.left.value, e.left.value, s.left.unit), - right: makeInterpolateNumber(layer, property, s.right.value, e.right.value, s.right.unit), - bottom: makeInterpolateNumber(layer, property, s.bottom.value, e.bottom.value, s.bottom.unit), - round: makeInterpolateBoolean(layer, property, s.round, e.round), - topRadius: makeInterpolateNumber(layer, property, s.topRadius.value, e.topRadius.value, s.topRadius.unit), - leftRadius: makeInterpolateNumber(layer, property, s.leftRadius.value, e.leftRadius.value, s.leftRadius.unit), - rightRadius: makeInterpolateNumber(layer, property, s.rightRadius.value, e.rightRadius.value, s.rightRadius.unit), - bottomRadius: makeInterpolateNumber(layer, property, s.bottomRadius.value, e.bottomRadius.value, s.bottomRadius.unit) - }; - return (rate, t) => { - var top2 = obj2.top(rate, t); - var right2 = obj2.right(rate, t); - var bottom2 = obj2.bottom(rate, t); - var left2 = obj2.left(rate, t); - var round2 = obj2.round(rate, t); - var topRadius = obj2.topRadius(rate, t); - var leftRadius = obj2.leftRadius(rate, t); - var bottomRadius = obj2.bottomRadius(rate, t); - var rightRadius = obj2.rightRadius(rate, t); - var position2 = [top2, right2, bottom2, left2].join(" "); - var radius = [topRadius, rightRadius, bottomRadius, leftRadius].join(" "); - var results = `${position2} ${round2 && radius.trim() ? `round ${radius}` : ""}`; - return results; - }; -} -function makeInterpolateClipPathPolygon(layer, property, s, e) { - var max = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var startPos = s[i]; - var endPos = e[i]; - if (startPos && !endPos) { - list2.push({ - x: makeInterpolateIdentity(layer, property, startPos.x), - y: makeInterpolateIdentity(layer, property, startPos.y) + localItems.forEach((item) => { + data[item.id] = {}; + Object.keys(valueObject).forEach((key) => { + data[item.id][key] = isFunction(valueObject[key]) ? valueObject[key].call(valueObject, item) : valueObject[key]; }); - } else if (!startPos && endPos) { - list2.push({ - x: makeInterpolateIdentity(layer, property, endPos.x), - y: makeInterpolateIdentity(layer, property, endPos.y) + }); + return data; + } + each(callback) { + if (isFunction(callback)) { + this.items.forEach((item) => { + callback(item); }); - } else { - list2.push({ - x: makeInterpolateLength(layer, property, startPos.x, endPos.x, "width", "self"), - y: makeInterpolateLength(layer, property, startPos.y, endPos.y, "height", "self") + } + } + map(callback) { + if (isFunction(callback)) { + return this.items.map((item, index2) => { + return callback(item, index2); }); } + return this.items; } - return (rate, t) => { - return list2.map((it) => { - return `${it.x(rate, t)} ${it.y(rate, t)}`; - }).join(","); - }; -} -function makeInterpolateClipPath(layer, property, startValue, endValue) { - var startObject = ClipPath.parseStyle(startValue); - var endObject = ClipPath.parseStyle(endValue); - var obj2 = { - type: makeInterpolateBoolean(layer, property, startObject.type, startObject.type), - value: makeInterpolateBoolean(layer, property, startValue, endValue) - }; - if (startObject.type == endObject.type && startObject != "none") { - switch (startObject.type) { - case "circle": - startObject.value = ClipPath.parseStyleForCircle(startObject.value); - endObject.value = ClipPath.parseStyleForCircle(endObject.value); - obj2.value = makeInterpolateClipPathCircle(layer, property, startObject.value, endObject.value); - break; - case "ellipse": - startObject.value = ClipPath.parseStyleForEllipse(startObject.value); - endObject.value = ClipPath.parseStyleForEllipse(endObject.value); - obj2.value = makeInterpolateClipPathEllipse(layer, property, startObject.value, endObject.value); - break; - case "inset": - startObject.value = ClipPath.parseStyleForInset(startObject.value); - endObject.value = ClipPath.parseStyleForInset(endObject.value); - obj2.value = makeInterpolateClipPathInset(layer, property, startObject.value, endObject.value); - break; - case "polygon": - startObject.value = ClipPath.parseStyleForPolygon(startObject.value); - endObject.value = ClipPath.parseStyleForPolygon(endObject.value); - obj2.value = makeInterpolateClipPathPolygon(layer, property, startObject.value, endObject.value); - break; - case "path": - startObject.value = ClipPath.parseStyleForPath(startObject.value); - endObject.value = ClipPath.parseStyleForPath(endObject.value); - break; - } + reset(obj2) { + Object.entries(obj2).forEach(([id, attrs]) => { + var _a; + (_a = this.get(id)) == null ? void 0 : _a.reset(attrs); + }); } - return (rate, t) => { - var type = obj2.type(rate, t); - var value = obj2.value(rate, t); - if (type === "none") { - return type; + resetCallback(callback) { + this.each((item) => item.reset(callback(item))); + } + resize() { + this.each((item) => item.resize()); + } + remove() { + this.each((item) => item.remove()); + this.empty(); + } + copy() { + console.warn("copy is deprecated"); + this.copyItems = this.items.map((item) => item); + } + paste() { + console.warn("paste is deprecated. use copy and paste"); + this.select(...this.copyItems.map((item) => item.copy(10))); + this.copy(); + } + hasPoint(point2) { + var _a; + if (this.isMany) { + return polyPoint(this.originVerties, point2[0], point2[1]); + } else { + return (_a = this.current) == null ? void 0 : _a.hasPoint(point2[0], point2[1]); } - return `${type}(${value})`; - }; -} -function makeInterpolateFilterItem(layer, property, startValue, endValue) { - var obj2 = { - type: makeInterpolateString(layer, property, startValue.type, endValue.type), - value: makeInterpolateBoolean(layer, property, startValue.value, endValue.value) - }; - switch (startValue.type) { - case "blur": - obj2.value = makeInterpolateLength(layer, property, startValue.value, endValue.value); - break; - case "grayscale": - case "invert": - case "brightness": - case "contrast": - case "opacity": - case "saturate": - case "sepia": - case "hue-rotate": - obj2.value = makeInterpolateNumber(layer, property, startValue.value.value, endValue.value.value, startValue.value.unit); - break; - case "drop-shadow": - obj2.offsetX = makeInterpolateLength(layer, property, startValue.offsetX, endValue.offsetX, "width", "self"); - obj2.offsetY = makeInterpolateLength(layer, property, startValue.offsetY, endValue.offsetY, "height", "self"); - obj2.blurRadius = makeInterpolateLength(layer, property, startValue.blurRadius, endValue.blurRadius, "width", "self"); - obj2.spreadRadius = makeInterpolateLength(layer, property, startValue.spreadRadius, endValue.spreadRadius, "width", "self"); - obj2.color = makeInterpolateColor(layer, property, startValue.color, endValue.color); - break; } - return (rate, t) => { - var type = obj2.type(rate, t); - if (type === "drop-shadow") { - return { - type: obj2.type(rate, t), - offsetX: obj2.offsetX(rate, t), - offsetY: obj2.offsetY(rate, t), - blurRadius: obj2.blurRadius(rate, t), - spreadRadius: obj2.spreadRadius(rate, t), - color: obj2.color(rate, t) - }; + hasChildrenPoint(point2) { + return this.cachedChildren.some((it) => { + var _a; + return (_a = this.modelManager.get(it)) == null ? void 0 : _a.hasPoint(point2[0], point2[1]); + }); + } + checkChildren(childId) { + return this.cachedChildren.includes(childId); + } + checkHover(itemOrId) { + if (isString(itemOrId)) { + return this.hoverId === itemOrId; } else { - return { - type: obj2.type(rate, t), - value: obj2.value(rate, t) - }; + return this.hoverItems.findIndex((it) => it.id === itemOrId.id) > -1; } - }; -} -function makeInterpolateFilter(layer, property, startValue, endValue) { - var s = Filter.parseStyle(startValue); - var e = Filter.parseStyle(endValue); - var totalLength = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0, len2 = totalLength; i < len2; i++) { - var startObject = s[i]; - var endObject = e[i]; - if (startObject && !endObject) { - list2.push(makeInterpolateIdentity(layer, property, startObject)); - } else if (!startObject && endObject) { - list2.push(makeInterpolateIdentity(layer, property, endObject)); + } + hasHoverItem() { + return this.hoverId !== ""; + } + selectHoverItem() { + this.select(this.hoverId); + } + setHoverId(id) { + let isChanged = false; + if (!id || this.itemKeys[id]) { + if (this.hoverId != "") { + isChanged = true; + } + this.hoverId = ""; + this.hoverItems = []; + } else if (this.cachedArtBoardVerties.find((it) => it.item.id === id)) { + if (this.hoverId != "") { + isChanged = true; + } + this.hoverId = ""; + this.hoverItems = []; } else { - if (startObject.type != endObject.type || startObject.type === "svg" || endObject.type === "svg") { - list2.push(makeInterpolateBoolean(layer, property, startObject, endObject)); - } else { - list2.push(makeInterpolateFilterItem(layer, property, startObject, endObject)); + if (this.hoverId != id) { + isChanged = true; + } + this.hoverId = id; + this.hoverItems = this.itemsByIds([id]).filter((it) => it.isNot("artboard")); + if (this.hoverItems.length === 0) { + this.hoverId = ""; + isChanged = true; } } + if (isChanged) { + this.$editor.emit("changeHoverItem"); + } + return isChanged; + } + is(...args2) { + var _a; + return args2.includes((_a = this.current) == null ? void 0 : _a.itemType); + } + isAll(...args2) { + return this.items.every((it) => args2.includes(it.itemType)); + } + updateGridInformation(obj2 = {}) { + this.gridInformation = obj2; + } + updateDragTargetItem(item) { + this.dragTargetItem = item; } - return (rate, t) => { - return Filter.join(list2.map((it) => it(rate, t))); - }; -} -function makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) { - var points = [ - { x: sx, y: sy }, - { x: cx1, y: cy1 }, - { x: cx2, y: cy2 }, - { x: ex, y: ey } - ]; - return (rate, t) => { - return getBezierPointOne(points, t); - }; } -function makeInterpolateLine(x1, y1, x2, y2) { - var obj2 = { - x: makeInterpolateNumber("", "", x1, x2), - y: makeInterpolateNumber("", "", y1, y2) - }; - return (rate, t) => { - var results = { - x: obj2.x(rate, t), - y: obj2.y(rate, t) - }; - return results; - }; +const MAX_SNAP_DISTANCE = 3; +const DEFAULT_DIST_VECTOR = { dist: fromValues(0, 0, 0) }; +const AXIS_X = "x"; +const AXIS_Y = "y"; +function checkXAxis(sourceVertex, targetVertex, dist2 = 1) { + return Math.abs(sourceVertex[0] - targetVertex[0]) < dist2; } -function makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) { - var points = [ - { x: sx, y: sy }, - { x: cx1, y: cy1 }, - { x: ex, y: ey } - ]; - return (rate, t) => { - return getBezierPointOneQuard(points, t); - }; +function checkYAxis(sourceVertex, targetVertex, dist2 = 1) { + return Math.abs(sourceVertex[1] - targetVertex[1]) < dist2; } -function makeInterpolateOffset(segments) { - var interpolateList = []; - var startPoint = []; - segments.forEach((segment) => { - switch (segment.command) { - case "M": - var [ex, ey] = segment.values; - startPoint = [ex, ey]; - break; - case "m": - var [sx, sy] = startPoint; - var [ex, ey] = segment.values; - ex += sx; - ey += sy; - startPoint = [ex, ey]; - break; - case "L": - var [sx, sy] = startPoint; - var [ex, ey] = segment.values; - interpolateList.push({ - command: segment.command, - values: [sx, sy, ex, ey], - length: getDist(sx, sy, ex, ey), - interpolate: makeInterpolateLine(sx, sy, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "l": - var [sx, sy] = startPoint; - var [ex, ey] = segment.values; - ex += sx; - ey += sy; - interpolateList.push({ - command: segment.command, - values: [sx, sy, ex, ey], - length: getDist(sx, sy, ex, ey), - interpolate: makeInterpolateLine(sx, sy, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "C": - var [sx, sy] = startPoint; - var [cx1, cy1, cx2, cy2, ex, ey] = segment.values; - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], - length: getCurveDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), - interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "c": - var [sx, sy] = startPoint; - var [cx1, cy1, cx2, cy2, ex, ey] = segment.values; - cx1 += sx; - cx2 += sx; - ex += sx; - cy1 += sy; - cy2 += sy; - ey += sy; - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], - length: getCurveDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), - interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "Q": - var [sx, sy] = startPoint; - var [cx1, cy1, ex, ey] = segment.values; - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, ex, ey], - length: getQuardDist(sx, sy, cx1, cy1, ex, ey), - interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "q": - var [sx, sy] = startPoint; - var [cx1, cy1, ex, ey] = segment.values; - cx1 += sx; - ex += sx; - cy1 += sy; - ey += sy; - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, ex, ey], - length: getQuardDist(sx, sy, cx1, cy1, ex, ey), - interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) - }); - startPoint = [ex, ey]; - break; - case "S": - var [sx, sy] = startPoint; - var [cx2, cy2, ex, ey] = segment.values; - var prevSegment = interpolateList[interpolateList.length - 1]; - if (["C", "c", "S", "s"].includes(prevSegment.command)) { - var [, , , , preC1x, preC1y, preEx, preEy] = prevSegment.values; - var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], - length: getCubicDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), - interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) +class SnapManager { + constructor(editor, snapDistance = MAX_SNAP_DISTANCE) { + this.editor = editor; + this.context = this.editor.context; + this.map = /* @__PURE__ */ new Map(); + this.snapTargetLayers = []; + this.snapDistance = snapDistance; + } + get dist() { + return this.context.config.get("snap.distance") || this.snapDistance; + } + get gridSize() { + return this.context.config.get("snap.grid") || 50; + } + makeSnapTargetLayers() { + if (!this.context.selection.currentProject) + return []; + return this.context.selection.currentProject.allLayers.filter((item) => { + if (item.is("project")) + return false; + if (this.context.selection.check(item)) + return false; + const inViewport = this.context.viewport.checkInViewportArea(item.originVerties); + return inViewport; + }); + } + clear() { + this.snapTargetLayers = this.makeSnapTargetLayers(); + } + convertMatrix(item) { + const verties = this.convertGuideAndPathMatrix(item); + const xList = verties.map((it) => it[0]); + const yList = verties.map((it) => it[1]); + return { + id: item.id, + xList, + yList, + verties, + rectVerties: toRectVertiesWithoutTransformOrigin(item.originVerties) + }; + } + convertGuideAndPathMatrix(item) { + const guideVerties = item.guideVerties; + return [...guideVerties]; + } + get snapTargetLayersWithSelection() { + if (!this.context.selection.currentProject) + return []; + return this.context.selection.currentProject.allLayers.filter((item) => { + if (item.is("project")) + return false; + const inViewport = item.verties.some((v) => { + return this.context.viewport.checkInViewport(v); + }); + return inViewport; + }); + } + getSnapPoints() { + const points = []; + this.snapTargetLayersWithSelection.forEach((it) => { + points.push.apply(points, this.convertGuideAndPathMatrix(it)); + }); + return points; + } + checkX(targetXList, sourceXList, dist2 = 0) { + const checkXList = []; + targetXList.forEach((targetX, targetIndex) => { + sourceXList.forEach((sourceX, sourceIndex) => { + if (Math.abs(targetX - sourceX) <= dist2) { + checkXList.push({ + targetX, + sourceX, + sourceIndex, + targetIndex, + dx: targetX - sourceX }); - startPoint = [ex, ey]; - break; } - case "s": - var [sx, sy] = startPoint; - var [cx2, cy2, ex, ey] = segment.values; - cx2 += sx; - ex += sx; - cy2 += sy; - ey += sy; - var prevSegment = interpolateList[interpolateList.length - 1]; - if (["C", "c", "S", "s"].includes(prevSegment.command)) { - var [, , , , preC1x, preC1y, preEx, preEy] = prevSegment.values; - var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], - length: getCubicDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), - interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) + }); + }); + return checkXList; + } + checkY(targetYList, sourceYList, dist2 = 0) { + const checkYList = []; + targetYList.forEach((targetY, targetIndex) => { + sourceYList.forEach((sourceY, sourceIndex) => { + const localDistY = targetY - sourceY; + if (Math.abs(localDistY) <= dist2) { + checkYList.push({ + targetY, + sourceY, + sourceIndex, + targetIndex, + dy: localDistY }); - startPoint = [ex, ey]; - break; } - case "T": - var [sx, sy] = startPoint; - var [ex, ey] = segment.values; - var prevSegment = interpolateList[interpolateList.length - 1]; - if (["Q", "q", "T", "t"].includes(prevSegment.command)) { - var [, , preC1x, preC1y, preEx, preEy] = prevSegment.values; - var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, ex, ey], - length: getQuardDist(sx, sy, cx1, cy1, ex, ey), - interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) - }); - startPoint = [ex, ey]; + }); + }); + return checkYList; + } + check(sourceVerties, dist2 = 0) { + const snaps = []; + const sourceXList = sourceVerties.map((it) => it[0]); + const sourceYList = sourceVerties.map((it) => it[1]); + const guideXList = this.context.config.get("horizontal.line"); + const guideYList = this.context.config.get("vertical.line"); + if (guideXList && guideYList) { + const x = this.checkX(guideXList, sourceXList, dist2)[0]; + const y = this.checkY(guideYList, sourceYList, dist2)[0]; + const distVector = fromValues(x ? x.dx : 0, y ? y.dy : 0, 0); + if (isNotZero(distVector[0]) || isNotZero(distVector[1])) { + snaps.push({ target: null, dist: distVector }); + } + } + this.snapTargetLayers.forEach((target) => { + const x = this.checkX(target.xList, sourceXList, dist2)[0]; + const y = this.checkY(target.yList, sourceYList, dist2)[0]; + const distVector = fromValues(x ? x.dx : 0, y ? y.dy : 0, 0); + if (isNotZero(distVector[0]) || isNotZero(distVector[1])) { + snaps.push({ target, dist: distVector }); + } + }); + return snaps.find((it) => isNotZero(it[0]) || isNotZero(it[1])) || DEFAULT_DIST_VECTOR; + } + checkPoint(sourceVertex) { + const snap = this.check([sourceVertex]); + return add$1([], sourceVertex, snap.dist); + } + getGuidesByPointPoint(sourceVerties, targetVerties, dist$1 = 0) { + const points = []; + const groupPoints = {}; + let sourceVertex, targetVertex; + for (let sourceIndex = 0, sourceLength = sourceVerties.length; sourceIndex < sourceLength; sourceIndex++) { + sourceVertex = sourceVerties[sourceIndex]; + const keyX = `${sourceVertex[0]}_x`; + const keyY = `${sourceVertex[1]}_y`; + if (!groupPoints[keyX]) { + groupPoints[keyX] = []; + } + if (!groupPoints[keyY]) { + groupPoints[keyY] = []; + } + for (let targetIndex = 0, targetLength = targetVerties.length; targetIndex < targetLength; targetIndex++) { + targetVertex = targetVerties[targetIndex]; + if (checkXAxis(sourceVertex, targetVertex, dist$1)) { + groupPoints[keyX].push([ + sourceVertex, + targetVertex, + AXIS_X, + dist(sourceVertex, targetVertex) + ]); } - break; - case "t": - var [sx, sy] = startPoint; - var [ex, ey] = segment.values; - ex += sx; - ey += sy; - var prevSegment = interpolateList[interpolateList.length - 1]; - if (["Q", "q", "T", "t"].includes(prevSegment.command)) { - var [, , preC1x, preC1y, preEx, preEy] = prevSegment.values; - var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); - interpolateList.push({ - command: segment.command, - values: [sx, sy, cx1, cy1, ex, ey], - length: getQuardDist(sx, sy, cx1, cy1, ex, ey), - interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) - }); - startPoint = [ex, ey]; + if (checkYAxis(sourceVertex, targetVertex, dist$1)) { + groupPoints[keyY].push([ + sourceVertex, + targetVertex, + AXIS_Y, + dist(sourceVertex, targetVertex) + ]); } - break; + } } - }); - var totalLength = 0; - interpolateList.forEach((it) => { - totalLength += it.length; - }); - var start2 = 0; - interpolateList.forEach((it) => { - it.startT = start2 / totalLength; - it.endT = (start2 + it.length) / totalLength; - it.totalLength = totalLength; - start2 += it.length; - }); - return { totalLength, interpolateList }; + Object.keys(groupPoints).forEach((key) => { + if (groupPoints[key] && groupPoints[key].length) { + const sorted = groupPoints[key].sort((a, b) => a[3] - b[3]); + points.push(...sorted); + } + }); + return points; + } + findGuide(sourceVerties, dist2 = 0) { + const guides = []; + this.snapTargetLayers.forEach((target) => { + const points = this.getGuidesByPointPoint(sourceVerties, target.guideVerties, dist2); + guides.push.apply(guides, points); + }); + guides.sort((a, b) => { + return a[3] - b[3]; + }); + return guides.filter((_, index2) => index2 < 10); + } + findGuideOne(sourceVerties) { + return [this.findGuide(sourceVerties)[0]]; + } + getWorldPosition() { + const pos = round$2([], this.context.viewport.getWorldPosition()); + const snap = this.check([pos], 3 / this.context.viewport.scale); + const newPos = add$1([], snap.dist, pos); + return newPos; + } + getSnapTarget() { + const pos = round$2([], this.context.viewport.getWorldPosition()); + const snap = this.check([pos], 3 / this.context.viewport.scale); + const newPos = add$1([], snap.dist, pos); + return { + vertex: newPos, + snap + }; + } } -function makeInterpolateOffsetPath(layer, property, startValue, endValue, artboard2) { - var [id, distance2, rotateStatus, rotate2] = startValue.split(",").map((it) => it.trim()); - var startObject = { - id, - distance: Length.parse(distance2 || "0%"), - rotateStatus: rotateStatus || "auto", - rotate: Length.parse(rotate2 || "0deg") - }; - var innerInterpolate = () => { - return {}; - }; - var innerInterpolateAngle = (rotateStatus2, currentAngle) => { - var resultAngle = 0; - switch (rotateStatus2) { - case "angle": - resultAngle = startObject.rotate.value; - break; - case "auto angle": - resultAngle = currentAngle + startObject.rotate.value; - break; - case "reverse": - resultAngle = currentAngle + 180; - break; - case "auto": - resultAngle = currentAngle; - break; - } - return resultAngle; - }; - var screenX = 0, screenY = 0; - if (artboard2) { - var pathLayer = artboard2.searchById(startObject.id); - if (pathLayer) { - screenX = pathLayer.screenX.value; - screenY = pathLayer.screenY.value; +class TimelineSelectionManager { + constructor(editor) { + this.$editor = editor; + this.items = []; + this.itemKeys = {}; + } + initialize() { + this.items = []; + this.itemKeys = {}; + } + currentProject(callback) { + var project2 = this.$editor.context.selection.currentProject; + if (project2) { + callback && callback(project2); } - innerInterpolate = (rate, t, timing) => { - var parser = new PathParser(pathLayer.d || ""); - var { totalLength, interpolateList } = makeInterpolateOffset(parser.segments); - var distance3 = startObject.distance.toPx(totalLength); - var dt = distance3 / totalLength; - t = t + dt; - if (t > 1) { - t -= 1; - } - var obj2 = interpolateList[0]; - if (t === 0) { - obj2 = interpolateList[0]; - } else if (t === 1) { - obj2 = interpolateList[interpolateList.length - 1]; - } - var arr = interpolateList.find((it) => { - return it.startT <= t && t < it.endT; + } + empty() { + this.select(); + } + each(callback) { + this.items.forEach((item, index2) => { + callback && callback(item, index2); + }); + } + refreshCache(list2) { + this.items = list2; + this.itemKeys = {}; + this.items.forEach((it) => { + this.itemKeys[it.id] = it; + }); + } + cachedList() { + return this.items.map((it) => { + return __spreadValues({}, it); + }); + } + checked(id) { + return !!this.itemKeys[id]; + } + selectLayer(layerId) { + this.currentProject((project2) => { + var list2 = project2.getKeyframeListReturnArray().filter((it) => { + return it.layerId === layerId; }); - if (arr) { - obj2 = arr; - } - var newT = (t - obj2.startT) / (obj2.endT - obj2.startT); - var newRate = timing(newT); - return __spreadProps(__spreadValues({}, obj2.interpolate(newRate, newT, timing)), { - totalLength: obj2.totalLength + this.refreshCache(list2); + }); + } + toggleLayerContainer(animationId) { + this.currentProject((project2) => { + project2.getSelectedTimeline().animations.filter((it) => { + return it.id === animationId; + }).forEach((it) => { + it.collapsed = !it.collapsed; }); - }; + }); } - return (rate, t, timing) => { - var arr = (layer.transformOrigin || "50% 50% 0px").split(" ").map((it) => Length.parse(it)); - var tx = arr[0].toPx(layer.width); - var ty = arr[1].toPx(layer.height); - var obj2 = innerInterpolate(rate, t, timing); - var results = { - x: obj2.x + screenX - tx.value, - y: obj2.y + screenY - ty.value - }; - layer.setScreenX(results.x); - layer.setScreenY(results.y); - if (startObject.rotateStatus === "element") - ; - else { - var current = obj2; - var distValue = 0; - if (t < 1) { - distValue = 1 / obj2.totalLength; - } - var next = innerInterpolate(rate + distValue, t + distValue, timing); - var angle = calculateAngle(next.x - current.x, next.y - current.y); - var newAngle = Length.deg(innerInterpolateAngle(startObject.rotateStatus, angle)); - layer.reset({ - transform: Transform.rotate(layer.transform, newAngle) + selectProperty(layerId, property) { + this.currentProject((project2) => { + var list2 = project2.getKeyframeListReturnArray().filter((it) => { + return it.layerId === layerId && it.property === property; }); - } - return results; - }; -} -function makeInterpolatePerspectiveOrigin(layer, property, startValue, endValue) { - var s = startValue.split(" ").map((it) => Length.parse(it)); - var e = endValue.split(" ").map((it) => Length.parse(it)); - var max = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var startPos = s[i]; - var endPos = e[i]; - list2.push(makeInterpolateLength(layer, property, startPos, endPos, "perspective-origin")); + this.refreshCache(list2); + }); } - return (rate, t) => { - var results = list2.map((it) => it(rate, t)).join(" "); - return results; - }; -} -function makeInterpolatePlayTime(layer, property, startValue, endValue, artboard2, layerElement) { - const mediaElement = layerElement.$("video").el; - let [sTime, , durationTime] = startValue.split(":"); - const duration = +(durationTime || 1); - const startTime = +(sTime || 0) * duration; - return (rate, t) => { - if (t === 0) { - mediaElement.currentTime = startTime; - if (mediaElement.paused) { - mediaElement.play(); - } - } else if (t === 1) { - layer.reset({ - currentTime: mediaElement.currentTime + select(...args2) { + this.refreshCache(args2); + } + selectBySearch(list2, startTime, endTime) { + this.currentProject((project2) => { + var totalList = []; + list2.forEach((it) => { + var results = []; + if (it.property) { + var p = project2.getTimelineProperty(it.layerId, it.property); + results = p.keyframes.filter((keyframe2) => { + return startTime <= keyframe2.time && keyframe2.time <= endTime; + }); + } else { + var p = project2.getTimelineObject(it.layerId); + p.properties.filter((property) => { + return property.property === it.property; + }).forEach((property) => { + results.push.apply(results, property.keyframes.filter((keyframe2) => { + return startTime <= keyframe2.time && keyframe2.time <= endTime; + })); + }); + } + totalList.push.apply(totalList, results); }); - mediaElement.pause(); + var uniqueOffset = {}; + totalList.forEach((it) => { + uniqueOffset[it.id] = it; + }); + this.select(...Object.values(uniqueOffset)); + }); + } + checkLayer(layerId) { + return Object.keys(this.itemKeys).some((key) => { + return this.itemKeys[key].layerId === layerId; + }); + } + checkProperty(layerId, property) { + return Object.keys(this.itemKeys).some((key) => { + return this.itemKeys[key].layerId === layerId && this.itemKeys[key].property === property; + }); + } +} +class VisibleManager { + constructor(editor) { + this.editor = editor; + this.hiddenList = {}; + } + get list() { + return Object.keys(this.hiddenList); + } + get(key) { + return !this.hiddenList[key]; + } + set(key, value) { + if (value) { + delete this.hiddenList[key]; } else { - if (mediaElement.paused) { - mediaElement.play(); - } + this.hiddenList[key] = true; } - }; -} -function makeInterpolateRotate(layer, property, startNumber, endNumber) { - var startValue = Length.parse(startNumber); - var endValue = Length.parse(endNumber); - return (rate, t) => { - var realStartValue = startValue.value; - var realEndValue = endValue.value; - if (t === 0) { - return Length.deg(realStartValue); - } else if (t === 1) { - return Length.deg(realEndValue); + } + toggle(key) { + if (this.get(key)) { + this.set(key, false); + } else { + this.set(key, true); } - return Length.deg(realStartValue + (realEndValue - realStartValue) * rate).to(startValue.unit); - }; + } } -function makeInterpolateStrokeDashArrray(layer, property, startValue, endValue) { - var s = startValue.split(" ").map((it) => +it); - var e = endValue.split(" ").map((it) => +it); - var max = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var startPos = s[i]; - var endPos = e[i]; - list2.push(makeInterpolateNumber(layer, property, startPos, endPos)); +var ContextMenuRenderer$1 = ""; +class ContextDropdownMenu extends DropdownMenuList { + template() { + return ` +
+
    + ${this.props.items.map((child, index2) => makeMenuItem(child, `${this.groupId}-${index2}`)).join("")} +
+
+ `; } - return (rate, t) => { - var results = list2.map((it) => it(rate, t)).join(" "); - return results; - }; } -function makeInterpolateText(layer, property, startText, endText) { - var max = endText.length - 1; - var min = 0; - return (rate, t) => { - var result = 0; - if (t === 0) { - result = ""; - } else if (t === 1) { - result = endText; - } else { - result = endText.substring(min, Math.floor((max - min) * t)); +class ContextMenuRenderer extends EditorElement { + checkProps(props = {}) { + return props; + } + components() { + return { + ContextDropdownMenu, + ToolbarButtonMenuItem + }; + } + template() { + return `
`; + } + [LOAD("$el")]() { + var _a; + return (_a = this.props.items) == null ? void 0 : _a.map((item, index2) => { + return this.renderMenuItem(item, index2); + }); + } + renderMenuItem(item, index2) { + switch (item.type) { + case MenuItemType.LINK: + return this.renderLink(item, index2); + case MenuItemType.SUBMENU: + return this.renderMenu(item, index2); + case MenuItemType.BUTTON: + return this.renderButton(item, index2); + case MenuItemType.DROPDOWN: + return this.renderDropdown(item, index2); + default: + return this.renderButton(item, index2); } - return result; - }; -} -function makeInterpolateTextShadow(layer, property, startValue, endValue) { - var s = TextShadow.parseStyle(startValue); - var e = TextShadow.parseStyle(endValue); - var totalLength = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0, len2 = totalLength; i < len2; i++) { - var startObject = s[i] || TextShadow.parseStyle("0px 0px 0px rgba(0, 0, 0, 0)")[0]; - var endObject = e[i] || TextShadow.parseStyle("0px 0px 0px rgba(0, 0, 0, 0)")[0]; - list2.push({ - offsetX: makeInterpolateLength(layer, property, startObject.offsetX, endObject.offsetX, "width", "self"), - offsetY: makeInterpolateLength(layer, property, startObject.offsetY, endObject.offsetY, "height", "self"), - blurRadius: makeInterpolateLength(layer, property, startObject.blurRadius, endObject.blurRadius, "radius"), - color: makeInterpolateColor(layer, property, startObject.color, endObject.color) + } + renderButton(item, index2) { + return createComponent("ToolbarButtonMenuItem", { + ref: "$button-" + index2, + title: item.title, + icon: item.icon, + command: item.command, + shortcut: item.shortcut, + args: item.args, + nextTick: item.nextTick, + disabled: item.disabled, + selected: item.selected, + selectedKey: item.selectedKey, + checked: item.checked, + action: item.action, + events: item.events, + style: item.style }); } - return (rate, t) => { - return TextShadow.join(list2.map((it) => { - return { - offsetX: it.offsetX(rate, t), - offsetY: it.offsetY(rate, t), - blurRadius: it.blurRadius(rate, t), - color: it.color(rate, t) - }; + renderDropdown(item, index2) { + return createComponent("ContextDropdownMenu", __spreadProps(__spreadValues({ + ref: "$dropdown-" + index2 + }, item), { + items: item.items, + icon: item.icon, + title: item.title, + events: item.events || [] })); - }; + } } -function makeInterpolateTransformLength(layer, property, startValue, endValue) { - var obj2 = { - type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) - }; - var value = []; - var max = Math.max(startValue.value.length, endValue.value.length); - for (var i = 0; i < max; i++) { - var s = startValue.value[i]; - var e = endValue.value[i]; - if (s && e) { - value.push(makeInterpolateLength(layer, property, s, e, startValue.type)); - } else { - value.push(makeInterpolateLength(layer, property, startValue.value[i] || startValue.value[i - 1] || startValue.value[i - 2], endValue.value[i] || endValue.value[i - 1] || endValue.value[i - 2], startValue.type)); - } +var ContextMenuView$1 = ""; +class ContextMenuView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--context-menu-view" + }); } - obj2.value = value; - return (rate, t) => { + [BIND("$el")]() { + const contextMenuOpenInfo = this.$context.config.get("context.menu.open"); + if (!contextMenuOpenInfo) { + return; + } return { - type: obj2.type(rate, t), - value: obj2.value.map((it) => it(rate, t)) - }; - }; -} -function makeInterpolateTransformNumber(layer, property, startValue, endValue) { - var obj2 = { - type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) - }; - var value = []; - var max = Math.max(startValue.value.length, endValue.value.length); - for (var i = 0; i < max; i++) { - var s = startValue.value[i]; - var e = endValue.value[i]; - if (s && e) { - value.push(makeInterpolateNumber(layer, property, s.value, e.value)); + style: { + left: Length.px(contextMenuOpenInfo.x), + top: Length.px(contextMenuOpenInfo.y + 10) + } + }; + } + [LOAD("$el")]() { + const info = this.$context.config.get("context.menu.open"); + if (!info) + return; + const items = this.$menu.getTargetMenu(info.target) || []; + return /* @__PURE__ */ createElementJsx(ContextMenuRenderer, { + items: [{ type: "dropdown", items: [...items, ...info.items || []] }] + }); + } + [CONFIG("context.menu.open")]() { + this.refresh(); + if (this.$context.config.get("context.menu.open")) { + this.$el.show(); } else { - var ss = startValue.value[i].value || startValue.value[i - 1].value || startValue.value[i - 2].value; - var ee = endValue.value[i].value || endValue.value[i - 1].value || startValue.value[i - 2].value; - value.push(makeInterpolateNumber(layer, property, ss, ee)); + this.$el.hide(); } } - obj2.value = value; - return (rate, t) => { - var value2 = obj2.value.map((it) => it(rate, t)); - var type = obj2.type(rate, t); - if (type.includes("matrix") || type.includes("scale")) { - value2 = value2.map((it) => { - return Length.number(it); - }); - } - return { type, value: value2 }; - }; -} -function makeInterpolateTransformRotate(layer, property, startValue, endValue) { - var obj2 = { - type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) - }; - var value = []; - var max = Math.max(startValue.value.length, endValue.value.length); - for (var i = 0; i < max; i++) { - var tempStartValue = startValue.value[i]; - var tempEndValue = endValue.value[i]; - if (tempStartValue && tempEndValue) { - value.push(makeInterpolateRotate(layer, property, tempStartValue, tempEndValue)); - } else { - value.push(makeInterpolateRotate(layer, property, startValue.value[i] || startValue.value[i - 1] || startValue.value[i - 2], endValue.value[i] || endValue.value[i - 1] || startValue.value[i - 2])); + close() { + this.$el.hide(); + this.$context.config.set("context.menu.open", null); + } + [POINTERSTART("document")](e) { + const $target = Dom.create(e.target); + const $dropdown = $target.closest("elf--context-menu-view"); + if (!$dropdown) { + this.close(); + } else if ($dropdown.el !== this.$el.el) { + this.close(); } } - obj2.value = value; - return (rate, t) => { - var results = { - type: obj2.type(rate, t), - value: obj2.value.map((it) => it(rate, t)) - }; - return results; - }; } -function makeInterpolateTransform(layer, property, startValue, endValue) { - var startObject = Transform.parseStyle(startValue.trim()); - var endObject = Transform.parseStyle(endValue.trim()); - var max = Math.max(startObject.length, endObject.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var s = startObject[i]; - var e = endObject[i]; - if (s && !e) { - list2.push(makeInterpolateIdentity(layer, property, s)); - } else if (!s && e) { - list2.push(makeInterpolateIdentity(layer, property, e)); - } else if (s.type != e.type) { - list2.push(makeInterpolateBoolean(layer, property, s, e)); - } else { - switch (s.type) { - case "translate": - case "translateX": - case "translateY": - case "translateZ": - case "translate3d": - case "perspective": - list2.push(makeInterpolateTransformLength(layer, property, s, e)); - break; - case "rotate": - case "rotateX": - case "rotateY": - case "rotateZ": - case "rotate3d": - list2.push(makeInterpolateTransformRotate(layer, property, s, e)); - break; - case "scale": - case "scaleX": - case "scaleY": - case "scaleZ": - case "scale3d": - case "matrix": - case "matrix3d": - list2.push(makeInterpolateTransformNumber(layer, property, s, e)); - break; - } - } +var AlignmentProperty$1 = ""; +class BottomAlign extends MenuItem { + getIconString() { + return "align_vertical_bottom"; + } + getTitle() { + return "Bottom"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.bottom"); } - return (rate, t) => { - var results = Transform.join(list2.map((it) => { - return it(rate, t); - })); - return results; - }; } -function makeInterpolateTransformOrigin(layer, property, startValue, endValue) { - var s = startValue.split(" ").map((it) => Length.parse(it)); - var e = endValue.split(" ").map((it) => Length.parse(it)); - var max = Math.max(s.length, e.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var startPos = s[i]; - var endPos = e[i]; - list2.push(makeInterpolateLength(layer, property, startPos, endPos, "transform-origin")); +class CenterAlign extends MenuItem { + getIconString() { + return "align_horizontal_center"; + } + getTitle() { + return "Center"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.center"); } - return (rate, t) => { - var results = list2.map((it) => it(rate, t)).join(" "); - return results; - }; } -function makeInterpolatePathValues(layer, property, s, e) { - var max = Math.max(s.length, e.length); - var list2 = []; - var startLastPos = s[s.length - 1]; - var endLastPos = e[e.length - 1]; - for (var i = 0; i < max; i++) { - var startPos = s[i]; - var endPos = e[i]; - if (startPos && !endPos) { - list2.push(makeInterpolateNumber(layer, property, startPos, endLastPos)); - } else if (!startPos && endPos) { - list2.push(makeInterpolateNumber(layer, property, startLastPos, endPos)); - } else { - list2.push(makeInterpolateNumber(layer, property, startPos, endPos)); - } +class LeftAlign extends MenuItem { + getIconString() { + return "align_horizontal_left"; + } + getTitle() { + return "Left"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.left"); } - return (rate, t) => { - return list2.map((it) => it(rate, t)); - }; } -function makeInterpolatePath(layer, property, startValue, endValue) { - var returnParser = new PathParser(); - var s = new PathParser(startValue); - var e = new PathParser(endValue); - var max = Math.max(s.segments.length, e.segments.length); - var list2 = []; - for (var i = 0; i < max; i++) { - var sc = s.segments[i]; - var ec = e.segments[i]; - if (sc.command === ec.command) { - if (sc.values.length === ec.values.length) { - list2.push({ - command: makeInterpolateIdentity(layer, property, sc.command), - values: makeInterpolatePathValues(layer, property, sc.values, ec.values) - }); - } else { - list2.push({ - command: makeInterpolateIdentity(layer, property, sc.command), - values: makeInterpolateIdentity(layer, property, sc.values) - }); - } - } else { - list2.push({ - command: makeInterpolateBoolean(layer, property, sc.command, ec.command), - values: makeInterpolateBoolean(layer, property, sc.values, ec.values) - }); - } +class MiddleAlign extends MenuItem { + getIconString() { + return "align_vertical_center"; + } + getTitle() { + return "middle"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.middle"); } - return (rate, t) => { - var segments = list2.map((it) => { - return { - command: it.command(rate, t), - values: it.values(rate, t) - }; - }); - var results = returnParser.joinPath(segments); - return results; - }; } -function makeInterpolatePolygon(layer, property, startValue, endValue) { - var returnParser = new PolygonParser(); - var s = new PolygonParser(startValue); - var e = new PolygonParser(endValue); - var max = Math.max(s.segments.length, e.segments.length); - var list2 = []; - var startLastX = s.segments[s.segments.length - 1].x; - var startLastY = s.segments[s.segments.length - 1].y; - var endLastX = e.segments[e.segments.length - 1].x; - var endLastY = e.segments[e.segments.length - 1].y; - for (var i = 0; i < max; i++) { - var startPos = s.segments[i]; - var endPos = e.segments[i]; - if (startPos && !endPos) { - list2.push({ - x: makeInterpolateNumber(layer, property, startPos.x, endLastX), - y: makeInterpolateNumber(layer, property, startPos.y, endLastY) - }); - } else if (!startPos && endPos) { - list2.push({ - x: makeInterpolateNumber(layer, property, startLastX, endPos.x), - y: makeInterpolateNumber(layer, property, startLastY, endPos.y) - }); - } else { - list2.push({ - x: makeInterpolateNumber(layer, property, startPos.x, endPos.x), - y: makeInterpolateNumber(layer, property, startPos.y, endPos.y) - }); - } +class RightAlign extends MenuItem { + getIconString() { + return "align_horizontal_right"; + } + getTitle() { + return "Right"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.right"); } - return (rate, t) => { - var points = returnParser.joinPoints(list2.map((it) => { - return { - x: it.x(rate, t), - y: it.y(rate, t) - }; - })); - return points; - }; } -const DEFAULT_FUCTION = () => () => { -}; -function makeInterpolateCustom(property) { - switch (property) { - case "border-radius": - return makeInterpolateBorderRadius; - case "box-shadow": - return makeInterpolateBoxShadow; - case "text-shadow": - return makeInterpolateTextShadow; - case "background-image": - case "BackgroundImageEditor": - return makeInterpolateBackgroundImage; - case "filter": - case "backdrop-filter": - return makeInterpolateFilter; - case "clip-path": - return makeInterpolateClipPath; - case "transform": - return makeInterpolateTransform; - case "transform-origin": - return makeInterpolateTransformOrigin; - case "perspective-origin": - return makeInterpolatePerspectiveOrigin; - case "stroke-dasharray": - return makeInterpolateStrokeDashArrray; - case "d": - return makeInterpolatePath; - case "points": - return makeInterpolatePolygon; - case "offset-path": - return makeInterpolateOffsetPath; - case "text": - return makeInterpolateText; - case "playTime": - return makeInterpolatePlayTime; +class SameHeight extends MenuItem { + getIconString() { + return "vertical_distribute"; + } + getTitle() { + return "height"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("same.height"); } } -function makeInterpolate(layer, property, startValue, endValue, editorString, artboard2, layerElement) { - var checkField = editorString || property; - switch (checkField) { - case "width": - case "x": - return makeInterpolateLength(layer, property, startValue, endValue, "width"); - case "height": - case "y": - return makeInterpolateLength(layer, property, startValue, endValue, "height"); - case "perspective": - case "font-size": - case "font-weight": - case "text-stroke-width": - case "RangeEditor": - case "textLength": - case "startOffset": - return makeInterpolateLength(layer, property, startValue, endValue, property); - case "fill-opacity": - case "opacity": - case "stroke-dashoffset": - case "currentTime": - case "NumberRangeEditor": - return makeInterpolateNumber(layer, property, +startValue, +endValue); - case "background-color": - case "color": - case "text-fill-color": - case "text-stroke-color": - case "fill": - case "stroke": - case "ColorViewEditor": - return makeInterpolateColor(layer, property, startValue, endValue); - case "mix-blend-mode": - case "fill-rule": - case "stroke-linecap": - case "stroke-linejoin": - case "SelectEditor": - case "lengthAdjust": - return makeInterpolateString(layer, property, startValue, endValue); - case "rotate": - return makeInterpolateRotate(layer, property, startValue, endValue); +class SameWidth extends MenuItem { + getIconString() { + return "horizontal_distribute"; } - var func = makeInterpolateCustom(checkField); - if (func) { - return func(layer, property, startValue, endValue, artboard2, layerElement); + getTitle() { + return "width"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("same.width"); } - return DEFAULT_FUCTION; } -function createInterpolateFunction(layer, property, startValue, endValue, editorString, artboard2, layerElement) { - return makeInterpolate(layer, property, startValue, endValue, editorString, artboard2, layerElement); +class TopAlign extends MenuItem { + getIconString() { + return "align_vertical_top"; + } + getTitle() { + return "Top"; + } + isHideTitle() { + return true; + } + clickButton() { + this.$commands.emit("sort.top"); + } } -class AssetModel extends BaseModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - comments: [], - colors: [], - gradients: [], - svgfilters: [], - svgimages: [], - keyframes: [], - images: [], - imageKeys: [], - videos: [], - videoKeys: [], - audios: [] - }, obj2)); +var BaseProperty$1 = ""; +class BaseProperty extends EditorElement { + onToggleShow() { } - get comments() { - return this.get("comments"); + template() { + return ` +
+ ${this.isHideHeader() ? "" : ` +
+ + ${this.getTools()} +
`} +
${this.getBody()}
+ ${this.getFooter() ? `
${this.getFooter()}
` : ""} +
+ `; } - get colors() { - return this.get("colors"); + [BIND("$el")]() { + return { + style: { + "--property-order": this.order + } + }; } - get gradients() { - return this.get("gradients"); + setTitle(title2) { + this.refs.$propertyTitle.html(title2); } - get svgfilters() { - return this.get("svgfilters"); + hasKeyframe() { + return false; } - get svgimages() { - return this.get("svgimages"); + isHideHeader() { + return false; } - get keyframes() { - return this.get("keyframes"); + isFirstShow() { + return true; } - get videos() { - return this.get("videos"); + getClassName() { + return ""; } - get images() { - return this.get("images"); + getTitleClassName() { + return ""; } - set images(value) { - this.set("images", value); + getBodyClassName() { + return ""; } - get imageKeys() { - return this.get("imageKeys"); + getKeyframeProperty() { + return ""; + } + getTitle() { + return ""; + } + getTools() { + return ""; + } + getBody() { + return ""; + } + getFooter() { + return ""; + } + isPropertyShow() { + return this.$el.hasClass("show"); + } + toggle(isShow) { + this.$el.toggle(isShow); + } + hide() { + this.$el.hide(); + } + show() { + this.$el.show(); + } + onShowTitle() { + } + refreshShowIsNot(type = "", isRefresh = true) { + var current = this.$context.selection.current; + if (current) { + if (type.includes(current.itemType)) { + this.hide(); + } else { + this.show(); + if (isRefresh) + this.refresh(); + } + } } - get videoKeys() { - return this.get("videoKeys"); + refreshShow(type, isRefresh = true) { + var current = this.$context.selection.current; + if (current) { + if (isFunction(type) && type()) { + this.show(); + if (isRefresh) + this.refresh(); + } else { + if (!isFunction(type) && type.includes(current.itemType)) { + this.show(); + if (isRefresh) + this.refresh(); + } else { + this.hide(); + } + } + } else { + this.hide(); + } } - addKeyframe(keyframe2) { - this.keyframes.push(keyframe2); - return keyframe2; + startInputEditing(input2) { + if (!input2) + return; + input2.attr("contenteditable", true); + input2.css({ + "background-color": "white", + outline: "1px auto black", + color: "black" + }); + input2.focus(); } - createKeyframe(data = {}) { - return this.addKeyframe(new Keyframe(__spreadValues({ - checked: true - }, data))); + endInputEditing(input2, callback) { + if (!input2) + return; + input2.attr("contenteditable", false); + input2.css({ + "background-color": null, + outline: null, + color: null + }); + var index2 = input2.attr("data-index"); + callback && callback(index2, input2.text().trim()); + input2.blur(); } - removeKeyframe(removeIndex) { - this.removePropertyList(this.keyframes, removeIndex); + get editableProperty() { + return ""; } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); + get order() { + return 1e3; } - sortKeyframe(startIndex, targetIndex) { - this.sortItem(this.keyframes, startIndex, targetIndex); + checkShow() { + if (!this.$context.selection.current) { + this.hide(); + return false; + } + if (this.$context.selection.current.editable(this.editableProperty)) { + this.show(); + return true; + } else { + this.hide(); + return false; + } } - updateKeyframe(index2, data = {}) { - this.keyframes[+index2].reset(data); +} +class AlignmentProperty extends BaseProperty { + components() { + return { + LeftAlign, + CenterAlign, + RightAlign, + TopAlign, + MiddleAlign, + BottomAlign, + SameWidth, + SameHeight + }; } - toKeyframeString(isAnimate = false) { - return this.keyframes.map((keyframe2) => keyframe2.toString(isAnimate)).join("\n\n"); + getTitle() { + return this.$i18n("alignment.property.title"); } - copyPropertyList(arr, index2) { - var copyObject = __spreadValues({}, arr[index2]); - arr.splice(index2, 0, copyObject); + isHideHeader() { + return true; } - removePropertyList(arr, removeIndex) { - arr.splice(removeIndex, 1); + getBody() { + return ` +
+ ${createComponentList("LeftAlign", "CenterAlign", "RightAlign", "TopAlign", "MiddleAlign", "BottomAlign", ["SameWidth", { direction: "bottom" }], "SameHeight")} +
+ `; } - removeColor(removeIndex) { - this.removePropertyList(this.colors, removeIndex); +} +function alignment(editor) { + editor.registerUI("inspector.tab.style", { + AlignmentProperty + }); +} +var AnimationProperty$1 = ""; +function getCustomParseIndexString(it, prefix = "@") { + return `${prefix}${it.startIndex}`.padEnd(10, "0"); +} +function customParseMatches(str, regexp) { + const matches2 = str.match(regexp); + let result = []; + if (!matches2) { + return result; } - copyColor(index2) { - this.copyPropertyList(this.colors, index2); + for (var i = 0, len2 = matches2.length; i < len2; i++) { + result.push({ parsedString: matches2[i] }); } - sortColor(startIndex, targetIndex) { - this.sortItem(this.colors, startIndex, targetIndex); + var pos = { next: 0 }; + result.forEach((item) => { + const startIndex = str.indexOf(item.parsedString, pos.next); + item.startIndex = startIndex; + item.endIndex = startIndex + item.parsedString.length; + pos.next = item.endIndex; + }); + return result; +} +function customParseConvertMatches(str, regexp) { + const m = customParseMatches(str, regexp); + m.forEach((it) => { + str = str.replace(it.parsedString, getCustomParseIndexString(it)); + }); + return { str, matches: m }; +} +function customParseReverseMatches(str, matches2) { + matches2.forEach((it) => { + str = str.replace(getCustomParseIndexString(it), it.parsedString); + }); + return str; +} +const ANIMATION_TIMING_REG = /((cubic-bezier|steps)\(([^)]*)\))/gi; +class Animation extends PropertyItem { + static parse(obj2) { + return new Animation(obj2); } - setColorValue(index2, value = {}) { - this.colors[index2] = __spreadValues(__spreadValues({}, this.colors[index2]), value); + getDefaultObject() { + return { + itemType: "animation", + checked: true, + name: "none", + direction: "normal", + duration: Length.second(0), + timingFunction: "linear", + delay: Length.second(0), + iterationCount: Length.string("infinite"), + playState: "running", + fillMode: "none" + }; } - getColorIndex(index2) { - return this.colors[index2]; + convert(json) { + json = super.convert(json); + json.duration = Length.parse(json.duration); + json.iterationCount = Length.parse(json.iterationCount); + return json; } - getColor(name) { - return this.colors.filter((item) => item.name === name)[0]; + toCloneObject() { + return __spreadValues({}, this.attrs("name", "direction", "duration", "timingFunction", "delay", "iterationCount", "playState", "fillMode")); } - addColor(obj2) { - this.colors.push(obj2); - return obj2; + togglePlayState(forcedValue) { + if (forcedValue) { + this.reset({ + playState: forcedValue === "running" ? "running" : "paused" + }); + } else { + if (this.json.playState === "paused") { + this.reset({ playState: "running" }); + } else { + this.reset({ playState: "paused" }); + } + } } - createColor(data = {}) { - return this.addColor(data); + toCSS() { + if (!this.json.name) + return {}; + return { + animation: this.toString() + }; } - removeImage(removeIndex) { - this.removePropertyList(this.images, removeIndex); - this.refreshImageKeys(); + toString() { + var json = this.json; + return [ + json.duration, + json.timingFunction, + json.delay, + json.iterationCount, + json.direction, + json.fillMode, + json.playState, + json.name + ].join(" "); } - copyImage(index2) { - this.copyPropertyList(this.images, index2); - this.refreshImageKeys(); + static join(list2) { + return list2.map((it) => new Animation(it).toString()).join(","); } - sortImage(startIndex, targetIndex) { - this.sortItem(this.images, startIndex, targetIndex); + static add(animation2, item = {}) { + const list2 = Animation.parseStyle(animation2); + list2.push(Animation.parse(item)); + return Animation.join(list2); } - setImageValue(index2, value = {}) { - this.images[index2] = __spreadValues(__spreadValues({}, this.images[index2]), value); - this.refreshImageKeys(); + static remove(animation2, removeIndex) { + return Animation.filter(animation2, (it, index2) => { + return removeIndex != index2; + }); } - getImageValueById(id, defaultValue2 = "") { - const image2 = this.imageKeys[id]; - if (!image2) - return id || defaultValue2; - return image2.local; + static filter(animation2, filterFunction) { + return Animation.join(Animation.parseStyle(animation2).filter((it) => filterFunction(it))); } - getImageDataURIById(id) { - const image2 = this.imageKeys[id]; - if (!image2) - return void 0; - return image2.original; + static replace(animation2, replaceIndex, valueObject) { + var list2 = Animation.parseStyle(animation2); + if (list2[replaceIndex]) { + list2[replaceIndex] = valueObject; + } else { + list2.push(valueObject); + } + return Animation.join(list2); } - refreshImageKeys() { - let imageKeys = {}; - this.images.forEach((it) => { - imageKeys[it.id] = it; - }); - this.reset({ - imageKeys + static get(animation2, index2) { + var arr = Animation.parseStyle(animation2); + return arr[index2]; + } + static parseStyle(animation2) { + var list2 = []; + if (!animation2) + return list2; + const result = customParseConvertMatches(animation2, ANIMATION_TIMING_REG); + list2 = result.str.split(",").map((it) => { + const fields2 = it.split(" ").filter(Boolean); + if (fields2.length >= 7) { + return { + duration: Length.parse(fields2[0]), + timingFunction: customParseReverseMatches(fields2[1], result.matches), + delay: Length.parse(fields2[2]), + iterationCount: fields2[3] === "infinite" ? Length.string("infinite") : Length.parse(fields2[3]), + direction: fields2[4], + fillMode: fields2[5], + playState: fields2[6], + name: fields2[7] + }; + } else if (fields2.length >= 3) { + return { + duration: Length.parse(fields2[0]), + timingFunction: customParseReverseMatches(fields2[1], result.matches), + delay: Length.parse(fields2[2]), + name: fields2[3] + }; + } else if (fields2.length >= 1) { + return { + duration: Length.parse(fields2[0]), + name: fields2[1] + }; + } else { + return {}; + } }); + return list2.map((it) => Animation.parse(it)); } - addImage(obj2) { - this.images.push(obj2); - this.refreshImageKeys(); - return obj2; +} +class AnimationProperty extends BaseProperty { + getTitle() { + return this.$i18n("animation.property.title"); } - createImage(data = {}) { - return this.addImage(data); + getBody() { + return `
`; } - removeVideo(removeIndex) { - this.removePropertyList(this.videos, removeIndex); - this.refreshVideoKeys(); + getTools() { + return ` + + `; } - copyVideo(index2) { - this.copyPropertyList(this.videos, index2); - this.refreshVideoKeys(); + isFirstShow() { + return true; } - sortVideo(startIndex, targetIndex) { - this.sortItem(this.videos, startIndex, targetIndex); + [LOAD("$animationList") + DOMDIFF]() { + var current = this.$context.selection.current; + if (!current) + return ""; + return Animation.parseStyle(current.animation).map((it, index2) => { + const selectedClass = this.state.selectedIndex === index2 ? "selected" : ""; + const path = curveToPath(it.timingFunction, 30, 30); + return ` +
+
+
+ + + +
+
+
+ ${it.name ? it.name : `< ${this.$i18n("animation.property.select a keyframe")} >`} +
+
+ + + + + + +
+
+
+ +
+
+
+ `; + }); } - setVideoValue(index2, value = {}) { - this.videos[index2] = __spreadValues(__spreadValues({}, this.videos[index2]), value); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + const current = this.$context.selection.current; + if (current && current.hasChangedField("animation")) { + this.refresh(); + } + this.emit("hideAnimationPropertyPopup"); } - getVideoValueById(id) { - const video2 = this.videoKeys[id]; - if (!video2) - return void 0; - return video2.local; + [CLICK("$add")]() { + var current = this.$context.selection.current; + if (current) { + this.$commands.executeCommand("setAttribute", "add animation property", this.$context.selection.packByValue({ + animation: (item) => Animation.add(item.animation, { name: null }) + })); + this.nextTick(() => { + window.setTimeout(() => { + this.refresh(); + }, 100); + }); + } else { + window.alert("Select a layer"); + } } - refreshVideoKeys() { - let videoKeys = {}; - this.videos.forEach((it) => { - videoKeys[it.id] = it; - }); - this.reset({ - videoKeys + [CLICK("$animationList .tools .del")](e) { + var removeIndex = e.$dt.attr("data-index"); + var current = this.$context.selection.current; + if (!current) + return; + current.reset({ + animation: Animation.remove(current.animation, removeIndex) }); + this.$commands.emit("setAttribute", this.$context.selection.packByValue({ + animation: Animation.remove(current.animation, removeIndex) + })); + this.refresh(); } - addVideo(obj2) { - this.videos.push(obj2); - this.refreshVideoKeys(); - return obj2; + [CLICK("$animationList .play-state")](e) { + var index2 = +e.$dt.attr("data-index"); + var current = this.$context.selection.current; + if (!current) + return; + const list2 = Animation.parseStyle(current.animation); + var animation2 = list2[index2]; + if (animation2) { + animation2.togglePlayState(); + e.$dt.attr("data-play-state-selected-value", animation2.playState); + this.$commands.emit("setAttribute", this.$context.selection.packByValue({ + animation: Animation.join(list2) + })); + } } - createVideo(data = {}) { - return this.addVideo(data); + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.refs[`animationIndex${selectedIndex}`].addClass("selected"); + } else { + this.refs[`animationIndex${selectedIndex}`].removeClass("selected"); + } } - removeGradient(removeIndex) { - this.removePropertyList(this.gradients, removeIndex); + viewAnimationPicker($preview) { + if (typeof this.selectedIndex === "number") { + this.selectItem(this.selectedIndex, false); + } + this.selectedIndex = +$preview.attr("data-index"); + this.current = this.$context.selection.current; + if (!this.current) + return; + this.currentAnimation = Animation.get(this.current.animation, this.selectedIndex); + this.viewAnimationPropertyPopup(); } - copyGradient(index2) { - this.copyPropertyList(this.gradients, index2); + viewAnimationPropertyPopup() { + if (!this.currentAnimation) + return; + const animation2 = this.currentAnimation; + this.emit("showAnimationPropertyPopup", { + changeEvent: "changeAnimationPropertyPopup", + data: animation2.toCloneObject(), + instance: this + }); } - sortGradient(startIndex, targetIndex) { - this.sortItem(this.gradients, startIndex, targetIndex); + [CLICK("$animationList .preview")](e) { + this.viewAnimationPicker(e.$dt); } - setGradientValue(index2, value) { - this.gradients[index2] = __spreadValues(__spreadValues({}, this.gradients[index2]), value); + getRef(...args2) { + return this.refs[args2.join("")]; } - getGradientIndex(index2) { - return this.gradients[index2]; + [SUBSCRIBE("changeAnimationPropertyPopup")](data) { + if (this.currentAnimation) { + this.currentAnimation.reset(__spreadValues({}, data)); + if (this.current) { + this.$commands.executeCommand("setAttribute", "change animation property", this.$context.selection.packByValue({ + animation: (item) => Animation.replace(item.animation, this.selectedIndex, this.currentAnimation) + })); + this.refresh(); + } + } } - getGradient(name) { - return this.gradients.filter((item) => item.name === name)[0]; +} +var AnimationPropertyPopup$1 = ""; +var BasePopup$1 = ""; +class BasePopup extends EditorElement { + template() { + return ` +
+
+ + + ${this.getTools()} + + +
+
${this.getBody()}
+ +
+ `; } - addGradient(obj2 = {}) { - this.gradients.push(obj2); - return obj2; + getClassName() { + return ""; } - createGradient(data = {}) { - return this.addGradient(data); + getTitle() { + return ""; } - getSVGFilterIndex(id) { - var _a; - var filter2 = this.svgfilters.map((it, index2) => { - return { id: it.id, index: index2 }; - }).filter((it) => { - return it.id === id; - }); - return filter2.length ? (_a = filter2 == null ? void 0 : filter2[0]) == null ? void 0 : _a.index : -1; + getTools() { + return ""; } - removeSVGFilter(removeIndex) { - this.removePropertyList(this.svgfilters, removeIndex); + getBody() { + return ""; } - copySVGFilter(index2) { - this.copyPropertyList(this.svgfilters, index2); + onClose() { } - sortSVGFilter(startIndex, targetIndex) { - this.sortItem(this.svgfilters, startIndex, targetIndex); + [CLICK("$close")]() { + this.$el.hide(); + this.onClose(); } - setSVGFilterValue(index2, value) { - this.svgfilters[index2] = __spreadValues(__spreadValues({}, this.svgfilters[index2]), value); + setTitle(title2) { + this.refs.$title.$("label").text(title2); } - addSVGFilter(obj2 = {}) { - this.svgfilters.push(obj2); - var index2 = this.svgfilters.length - 1; - return index2; + [POINTERSTART("$title") + MOVE("movePopupTitle") + END("endPopupTitle")]() { + this.x = Length.parse(this.$el.css("left")); + this.y = Length.parse(this.$el.css("top")); } - createSVGFilter(data = {}) { - return this.addSVGFilter(data); + movePopupTitle(dx, dy) { + var left2 = Length.px(this.x.value + dx); + var top2 = Length.px(this.y.value + dy); + this.$el.css({ left: left2, top: top2, right: "auto", bottom: "auto" }); } - getSVGImageIndex(id) { - var filter2 = this.svgimages.map((it, index2) => { - return { id: it.id, index: index2 }; - }).filter((it) => { - return it.id === id; - })[0]; - return filter2 ? filter2.index : -1; + show(width2 = 200) { + var popupPadding = 28; + var rightPosition = 320; + var top2 = this.$el.css("top"); + var left2 = this.$el.css("left"); + var realTop = top2 !== "auto" ? Length.parse(top2) : 110; + var realLeft = left2 !== "auto" ? Length.parse(left2) : document.body.clientWidth - rightPosition - popupPadding - width2; + this.$el.css({ + top: Length.px(realTop), + left: Length.px(realLeft), + "z-index": this.$editor.zIndex + }).show("inline-block"); } - removeSVGImage(removeIndex) { - this.removePropertyList(this.svgimages, removeIndex); + makeRect(width2, height2, rect2) { + const elements = this.$config.get("editor.layout.elements"); + const bodyRect = elements.$bodyPanel.rect(); + let left2 = bodyRect.left + bodyRect.width - width2 - 10; + let top2 = rect2.top + height2 > bodyRect.top + bodyRect.height ? bodyRect.top + bodyRect.height - height2 - 10 : rect2.top; + if (top2 < 10) { + top2 = 10; + } + return { + top: top2, + left: left2, + width: width2, + height: height2 + }; } - copySVGImage(index2) { - this.copyPropertyList(this.svgimages, index2); + showByRect(rect2) { + this.$el.css({ + top: Length.px(rect2.top), + left: Length.px(rect2.left), + width: Length.px(rect2.width), + height: Length.px(rect2.height), + "z-index": this.$editor.zIndex + }).show("inline-block"); } - sortSVGImage(startIndex, targetIndex) { - this.sortItem(this.svgimages, startIndex, targetIndex); + hide() { + this.$el.hide(); } - setSVGImageValue(index2, value) { - this.svgimages[index2] = __spreadValues(__spreadValues({}, this.svgimages[index2]), value); + [SUBSCRIBE("hidePropertyPopup")]() { + this.hide(); } - addSVGImage(obj2 = {}) { - this.svgimages.push(obj2); - var index2 = this.svgimages.length - 1; - return index2; + [POINTERSTART("$resizer") + MOVE("moveResizer")]() { + this.width = Length.parse(this.$el.css("width")); + this.height = Length.parse(this.$el.css("height")); } - createSVGImage(data = {}) { - return this.addSVGImage(data); + moveResizer(dx, dy) { + this.$el.css({ + width: Math.min(this.width + dx, 1e3), + height: Math.min(this.height + dy, 700) + }); } } -class TimelineModel extends AssetModel { - constructor() { - super(...arguments); - __privateAdd(this, _compiledTimeline, []); +class AnimationPropertyPopup extends BasePopup { + getTitle() { + return this.$i18n("animation.property.popup.title"); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - timeline: [], - compiledTimeline: {} - }, obj2)); + initState() { + return { + changeEvent: "", + instance: {}, + data: {} + }; } - get timeline() { - return this.get("timeline"); + updateData(opt) { + this.state.data = __spreadValues(__spreadValues({}, this.state.data), opt); + if (this.state.instance) { + this.state.instance.trigger(this.state.changeEvent, this.state.data); + } } - set timeline(value) { - this.set("timeline", value); + getBody() { + return `
`; } - expectJSON(key) { - if (key === "compiledTimeline") - return false; - return super.expectJSON(key); + [LOAD("$popup")]() { + return ` +
+ ${this.templateForKeyframe()} + ${this.templateForTimingFunction()} + ${this.templateForIterationCount()} + ${this.templateForDelay()} + ${this.templateForDuration()} + ${this.templateForDirection()} + ${this.templateForFillMode()} + ${this.templateForPlayState()} +
+ `; } - setTimelineInfo(obj2) { - var timeline = this.getSelectedTimeline(); - if (!timeline) - return; - ["speed", "iterationCount", "direction"].forEach((key) => { - if (isNotUndefined(obj2[key])) { - timeline[key] = obj2[key]; - } - }); + templateForTimingFunction() { + return ` +
+ + ${createComponent("CubicBezierEditor", { + ref: "$cubicBezierEditor", + key: "timingFunction", + value: this.state.data.timingFunction || "linear", + onChange: "changeCubicBezier" + })} +
+ `; } - compileAll() { - var timeline = this.getSelectedTimeline(); - __privateSet(this, _compiledTimeline, {}); - if (timeline) { - timeline.animations.forEach((animation2) => { - animation2.properties.forEach((property) => { - this.compiledTimingFunction(animation2.id, property.property); - }); - }); - } + templateForKeyframe() { + return ` +
+ +
+ +
+
+ `; } - searchTimelineOffset(time) { - var timeline = this.getSelectedTimeline(); - var filteredTimeline = []; - if (timeline) { - timeline.animations.forEach((animation2) => { - animation2.properties.forEach((p) => { - var list2 = this.getCompiledTimingFunction(animation2.id, p.property); - filteredTimeline.push(list2.find((keyframe2) => { - if (keyframe2.isOnlyTime && keyframe2.startTime <= time) - return true; - return keyframe2.startTime <= time && time < keyframe2.endTime; - })); - }); + [LOAD("$name")]() { + var current = this.$context.selection.currentProject; + var names2 = []; + if (current && current.keyframes) { + names2 = current.keyframes.map((it) => { + return { key: it.name, value: it.name }; }); } - return filteredTimeline.filter((it) => it); + names2.unshift({ key: "Select a keyframe", value: "" }); + return names2.map((it) => { + var selected = it.value === this.name ? "selected" : ""; + var label = this.$i18n(it.key); + return ``; + }); } - getCompiledTimingFunction(layerId, property) { - return __privateGet(this, _compiledTimeline)[`${layerId}.${property}`]; + [CHANGE("$name")]() { + this.updateData({ name: this.refs.$name.value }); } - compiledTimingFunction(layerId, property) { - var artboard2 = this; - var p = this.getTimelineProperty(layerId, property); - var layer = this.modelManager.get(layerId); - var key = `${layerId}.${property}`; - if (p.keyframes.length === 1) { - __privateGet(this, _compiledTimeline)[key] = []; - return; - } - let layerElement = Dom.body().$(`[data-id="${layerId}"]`); - let editorString = p.keyframes.map((it) => it.editor)[0]; - __privateGet(this, _compiledTimeline)[key] = p.keyframes.map((offset, index2) => { - var currentOffset = offset; - var nextOffset = p.keyframes[index2 + 1]; - offset.editor = editorString; - if (!nextOffset) { - nextOffset = { time: offset.time, value: offset.value }; - } - var it = { - layer, - layerElement, - property: p.property, - isOnlyTime: currentOffset.time === nextOffset.time, - startTime: offset.time, - endTime: nextOffset.time, - startValue: offset.value, - endValue: nextOffset.value, - timing: offset.timing, - interpolateFunction: createInterpolateFunction(layer, p.property, offset.value, nextOffset.value, offset.editor, artboard2, layerElement), - timingFunction: createTimingFunction(offset.timing) - }; - it.func = this.makeTimingFunction(it); - return it; - }).filter((it) => it); + templateForDirection() { + var options2 = "normal,reverse,alternate,alternate-reverse".split(",").map((it) => { + return `${it}:${this.$i18n(it)}`; + }).join(","); + return ` +
+ ${createComponent("SelectEditor", { + label: this.$i18n("animation.property.popup.direction"), + ref: "$direction", + key: "direction", + value: this.state.data.direction, + options: options2, + onChange: "changeSelect" + })} +
+ `; } - makeTimingFunction(it) { - return (time) => { - var totalT = it.endTime - it.startTime; - var t = 1; - if (totalT !== 0) { - t = (time - it.startTime) / totalT; - } - return it.interpolateFunction(it.timingFunction(t), t, totalT, it.timingFunction); - }; + [SUBSCRIBE_SELF("changeSelect")](key, value) { + this.updateData({ [key]: value }); } - stop() { - var timeline = this.getSelectedTimeline(); - if (timeline) { - var time = timeline.currentTime; - this.searchTimelineOffset(time).forEach((it) => { - if (it.property === "playTime") { - const $video = it.layerElement.$("video"); - if ($video) { - $video.el.pause(); - } - } - }); - } + templateForPlayState() { + return ` +
+ ${createComponent("SelectEditor", { + label: this.$i18n("animation.property.popup.play.state"), + ref: "$playState", + key: "playState", + value: this.state.data.playState, + options: ["paused", "running"], + onChange: "changeSelect" + })} +
+ `; } - seek(frameOrCode, filterFunction = (it) => it) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - if (isNotUndefined(frameOrCode)) { - this.setTimelineCurrentTime(frameOrCode); - } - var time = timeline.currentTime; - this.searchTimelineOffset(time).filter(filterFunction).forEach((it) => { - if (it.property === "offset-path" || it.property === "playTime") { - it.func(time); - } else if (it.layer) { - it.layer.reset({ - [it.property]: it.func(time) - }); - } - }); - } + templateForFillMode() { + var options2 = "none,forwards,backwards,both".split(",").map((it) => { + return `${it}:${this.$i18n(it)}`; + }).join(","); + return ` +
+ ${createComponent("SelectEditor", { + label: this.$i18n("animation.property.popup.fill.mode"), + ref: "$fillMode", + key: "fillMode", + value: this.state.data.fillMode, + options: options2, + onChange: "changeSelect" + })} +
+ `; } - getSelectedTimeline() { - var timeline = this.timeline; - var a = timeline.filter((it) => it.selected); - var selectedTimeline = a.length ? a[0] : timeline[0]; - return selectedTimeline || null; + templateForDelay() { + return ` +
+ ${createComponent("RangeEditor", { + ref: "$delay", + label: this.$i18n("animation.property.popup.delay"), + key: "delay", + value: this.state.data.delay, + units: ["s", "ms"], + onChange: "changeRangeEditor" + })} +
+ `; } - getKeyframeListReturnArray() { - var timeline = this.getSelectedTimeline(); - var keyframes = []; - if (timeline) { - timeline.animations.forEach((a) => { - a.properties.forEach((p) => { - keyframes.push.apply(keyframes, p.keyframes); - }); - }); - } - return keyframes; + templateForDuration() { + return ` +
+ ${createComponent("RangeEditor", { + ref: "$duration", + label: this.$i18n("animation.property.popup.duration"), + key: "duration", + value: this.state.data.duration, + units: ["s", "ms"], + onChange: "changeRangeEditor" + })} +
+ `; } - getKeyframeList(callback) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.animations.forEach((a) => { - a.properties.forEach((p) => { - p.keyframes.forEach((k) => { - callback && callback(timeline, k); - }); - }); - }); + templateForIterationCount() { + return ` +
+ ${createComponent("IterationCountEditor", { + ref: "$iterationCount", + label: this.$i18n("animation.property.popup.iteration"), + key: "iterationCount", + value: this.state.iterationCount || 0, + units: ["normal", "infinite"], + onChange: "changeRangeEditor" + })} +
+ `; + } + [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { + if (key === "iterationCount") { + if (value.unit === "normal") { + value = Length.number(value.value); + } else { + value = Length.string(value.unit); + } } + this.updateData({ [key]: value }); } - getSelectedTimelineLastTime() { - var time = 0; - this.getKeyframeList((timeline, keyframe2) => { - time = Math.max(keyframe2.time, time); - }); - return time; + [SUBSCRIBE_SELF("changeCubicBezier")](key, value) { + this.updateData({ [key]: value }); } - getSelectedTimelineFirstTime() { - var time = Number.MAX_SAFE_INTEGER; - this.getKeyframeList((timeline, keyframe2) => { - time = Math.min(keyframe2.time, time); - }); - return time; + [SUBSCRIBE("showAnimationPropertyPopup")](data) { + this.setState(data); + this.show(250); + this.children.$cubicBezierEditor.trigger("showCubicBezierEditor", data.data.timingFunction); } - getSelectedTimelinePrevTime() { - var time = this.getSelectedTimelineFirstTime(); - this.getKeyframeList((timeline, keyframe2) => { - if (timecode(timeline.fps, keyframe2.time) < timeline.currentTimecode) { - time = Math.max(keyframe2.time, time); - } - }); - return time; + [SUBSCRIBE("hideAnimationPropertyPopup")]() { + this.$el.hide(); } - getSelectedTimelineNextTime() { - var time = this.getSelectedTimelineLastTime(); - this.getKeyframeList((timeline, keyframe2) => { - if (timecode(timeline.fps, keyframe2.time) > timeline.currentTimecode) { - time = Math.min(keyframe2.time, time); +} +function animation(editor) { + editor.registerUI("inspector.tab.transition", { + AnimationProperty + }); + editor.registerUI("popup", { + AnimationPropertyPopup + }); +} +class ObjectProperty { + static create(json) { + return class extends BaseProperty { + getTitle() { + return json.title; } - }); - return time; - } - setTimelineTitle(id, text2) { - var timeline = this.timeline.find((it) => { - return it.id === id; - }); - if (timeline) { - timeline.title = text2; - } - } - selectTimeline(id) { - if (id) { - this.timeline.forEach((it) => { - it.selected = it.id === id; - }); - } else { - var selectedTimeline = this.timeline.filter((it) => it.selected); - if (selectedTimeline.length) - ; - else { - if (this.timeline.length) { - this.timeline.selected = true; + getClassName() { + return json.className || "item"; + } + get editableProperty() { + return json.editableProperty; + } + get order() { + return isUndefined(json.order) ? 1e3 : json.order; + } + afterComponentRendering($dom, refName, instance) { + var _a; + if (refName == "$comp") { + const current = ((_a = this.$context.selection) == null ? void 0 : _a.current) || {}; + const inspector2 = isFunction(json.inspector) ? json.inspector(current) : this.$context.components.createInspector(current, json.editableProperty); + instance.setInspector(inspector2); + } + } + refresh() { + const current = this.$context.selection.current || {}; + if (current || json.visible) { + this.setTitle(json.title || current.getDefaultTitle() || current.itemType || current.name); + this.load(); + } + } + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { + if (json.preventUpdate) { + if (this.$stateManager.isPointerUp) { + this.refresh(); + } + } else { + this.refresh(); } } - } - this.compileAll(); - } - removeAnimation(id) { - this.timeline = this.timeline.filter((it) => { - return it.id !== id; - }); - if (this.timeline.length) { - this.timeline[0].selected = true; - } - this.compileAll(); - } - addTimeline(fps = 60, endTimecode = "00:00:10:00") { - var id = uuidShort(); - var selectedTimeline = __spreadProps(__spreadValues({ - id, - title: "sample" - }, this.getTimelineLayerInfo(fps, endTimecode)), { - animations: [] - }); - this.timeline.push(selectedTimeline); - this.selectTimeline(id); - return selectedTimeline; - } - addTimelineLayer(layerId, fps = 60, endTimecode = "00:00:10:00") { - var selectedTimeline = this.getSelectedTimeline(); - if (!selectedTimeline) { - selectedTimeline = this.addTimeline(fps, endTimecode); - } - selectedTimeline.selected = true; - if (layerId) { - var layer = selectedTimeline.animations.filter((it) => it.id === layerId); - if (!layer[0]) { - selectedTimeline.animations.push({ - id: layerId, - properties: [] + [LOAD("$body")]() { + var _a; + var current = (_a = this.$context.selection) == null ? void 0 : _a.current; + if (!current && !json.visible) + return ""; + const inspector2 = isFunction(json.inspector) ? json.inspector(current || {}) : this.$context.components.createInspector(current || {}, json.editableProperty); + return createComponent("ComponentEditor", { + ref: "$comp", + inspector: inspector2, + onchange: "changeComponentProperty" }); } - } - } - getTimelineLayerInfo(fps = 60, endTimecode = "00:00:10:00") { - var endTime = second(fps, endTimecode); - return { - fps, - speed: 1, - direction: "normal", - iterationCount: 1, - currentTimecode: timecode(fps, 0), - totalTimecode: timecode(fps, endTime), - currentTime: 0, - totalTime: endTime, - displayStartTime: 0, - displayEndTime: endTime - }; - } - setTimelineCurrentTime(frameOrCode) { - var timeline = this.getSelectedTimeline(); - var { fps, totalTimecode } = timeline; - if (timeline) { - var frame = frameOrCode; - var code2 = frameOrCode; - if (+frame + "" === frame) { - frame = +frame; - code2 = framesToTimecode(fps, frame); + getBody() { + return `
`; } - if (code2 > totalTimecode) { - code2 = totalTimecode; + [SUBSCRIBE_SELF("changeComponentProperty")](key, value) { + if (json.action) { + this.$commands.executeCommand(json.action, `change attribute : ${key}`, key, value); + } else { + this.$commands.executeCommand("setAttribute", `change attribute : ${key}`, this.$context.selection.packByValue({ + [key]: value + })); + } } - var currentTime = second(fps, code2); - timeline.currentTime = currentTime; - timeline.currentTimecode = timecode(fps, currentTime); - } + }; } - setDisplayTimeDxRate(dxRate, initStartTime, initEndTime) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - var dxTime = dxRate * timeline.totalTime; - var startTime = initStartTime + dxTime; - var endTime = initEndTime + dxTime; - startTime = Math.max(startTime, 0); - startTime = Math.min(startTime, endTime); - if (startTime === 0) { - endTime = initEndTime - initStartTime; +} +function appearance(editor) { + editor.registerUI("inspector.tab.style", { + AppearanceProperty: ObjectProperty.create({ + title: editor.$i18n("background.color.property.title"), + editableProperty: "appearance", + preventUpdate: true, + inspector: (current) => { + return [ + { + type: "column", + size: [1, 1], + columns: [ + { + key: "backgroundColor", + editor: "color-view", + editorOptions: { + compact: true, + format: true + }, + defaultValue: current.backgroundColor + }, + { + key: "mixBlendMode", + editor: "blend-select", + editorOptions: { + label: "tonality", + compact: true + }, + defaultValue: current.mixBlendMode || BlendMode.NORMAL + } + ] + }, + { + key: "overflow", + editor: "select", + editorOptions: { + label: editor.$i18n("background.color.property.overflow"), + options: [ + Overflow.VISIBLE, + Overflow.HIDDEN, + Overflow.SCROLL, + Overflow.AUTO + ].map((it) => { + return { + value: it, + text: editor.$i18n(`background.color.property.overflow.${it}`) + }; + }) + }, + defaultValue: current.overflow + } + ]; } - endTime = Math.max(endTime, startTime); - endTime = Math.min(endTime, timeline.totalTime); - if (endTime === timeline.totalTime) { - startTime = timeline.totalTime - (initEndTime - initStartTime); + }) + }); +} +var ArtBoardSizeProperty$1 = ""; +var artboardSize = [ + { + category: "Web", + groups: [ + { + group: "Landscape", + devices: [ + { device: "Web Small", size: "1024x600" }, + { device: "Web Medium", size: "1280x800" }, + { device: "Web Large", size: "1440x900" }, + { device: "Web X Large", size: "1920x1200" } + ] + }, + { + group: "Portrait", + devices: [ + { device: "Web Small", size: "600x1024" }, + { device: "Web Medium", size: "800x1280" }, + { device: "Web Large", size: "900x1440" }, + { device: "Web X Large", size: "1200x1920" } + ] } - timeline.displayStartTime = startTime; - timeline.displayEndTime = endTime; - } + ] + }, + { + category: "Apple Devices", + groups: [ + { + group: "iphone", + devices: [ + { device: "iPhone 8", size: "375x667" }, + { device: "iPhone 8 Plus", size: "414x736" }, + { device: "iPhone SE", size: "320x568" }, + { device: "iPhone XS", size: "375x812" }, + { device: "iPhone XR", size: "414x896" }, + { device: "iPhone XS Max", size: "414x896" } + ] + }, + { + group: "ipad", + devices: [ + { device: "iPad", size: "768x1024" }, + { device: "iPad Pro", size: "1024x1366" } + ] + }, + { + group: "apple watch", + devices: [ + { device: "Apple Watch 38nm", size: "272x340" }, + { device: "Apple Watch 40nm", size: "326x394" }, + { device: "Apple Watch 42nm", size: "313x390" }, + { device: "Apple Watch 44nm", size: "368x448" } + ] + }, + { + group: "apple tv", + devices: [{ device: "Apple TV", size: "1920x1080" }] + }, + { group: "MAC", devices: [{ device: "Touch Bar", size: "1085x30" }] } + ] + }, + { + category: "Android Devices", + groups: [ + { + group: "android mobile", + devices: [{ device: "Android Mobile", size: "360x640" }] + }, + { + group: "android tablet", + devices: [{ device: "Android Tablet", size: "768x1024" }] + } + ] } - setDisplayStartTimeRate(rate) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.displayStartTime = rate * timeline.totalTime; - } +]; +class ArtBoardSizeProperty extends BaseProperty { + getClassName() { + return "elf--artboard-size-list"; } - setDisplayEndTimeRate(rate) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.displayEndTime = rate * timeline.totalTime; - } + get editableProperty() { + return "artboardSize"; } - setTimelineCurrentTimeRate(rate) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - var { displayStartTime, displayEndTime, fps } = timeline; - var currentTime = displayStartTime + (displayEndTime - displayStartTime) * rate; - this.setTimelineCurrentTime(timecode(fps, currentTime)); - } + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { + this.refresh(); } - setTimelineTotalTime(frameOrCode) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - var frame = frameOrCode; - var code2 = frameOrCode; - if (+frame + "" === frame) { - frame = +frame; - code2 = framesToTimecode(timeline.fps, frame); - } - if (second(timeline.fps, code2) < timeline.displayEndTime) { - timeline.displayEndTime = second(timeline.fps, code2); - timeline.displayStartTime = 0; - } - timeline.totalTimecode = code2; - timeline.totalTime = second(timeline.fps, code2); - } + initState() { + return { + selectedIndex: 0 + }; } - getTimelineObject(layerId) { - var selectedTimeline = this.getSelectedTimeline(); - if (selectedTimeline) { - return selectedTimeline.animations.find((it) => it.id === layerId); - } + getTitle() { + return "ArtBoard Preset"; } - addTimelineProperty(layerId, property) { - this.addTimelineLayer(layerId); - var animation2 = this.getTimelineObject(layerId); - if (animation2) { - var p = animation2.properties.filter((it) => it.property === property); - if (!p.length) { - animation2.properties.push({ - property, - keyframes: [] - }); - this.compiledTimingFunction(layerId, property); - } - } + getTools() { + var categories2 = artboardSize.map((it, index2) => { + return { category: it.category, index: index2 }; + }); + return createComponent("SelectEditor", { + ref: "$select", + value: categories2[0].category, + options: categories2.map((it) => it.category), + onchange: "changeSizeIndex" + }); } - getTimelineProperty(layerId, property) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - layerId = layerId || timeline.selectedLayerId; - property = property || timeline.selectedProperty; - var timelineObject = this.getTimelineObject(layerId); - if (timelineObject) { - return timelineObject.properties.find((it) => it.property === property); + [SUBSCRIBE_SELF("changeSizeIndex")](key, value) { + var selectedIndex = this.state.selectedIndex; + artboardSize.forEach((it, index2) => { + if (it.category === value) { + selectedIndex = index2; } - } + }); + this.state.selectedIndex = selectedIndex; + this.refresh(); } - setSelectedOffset(layerId, property, time) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.selectedLayerId = layerId; - timeline.selectedProperty = property; - timeline.selectedOffsetTime = time; - var p = this.getTimelineProperty(); - p.keyframes.forEach((it) => { - it.selected = it.time === time; - }); - } + getBody() { + return ` +
+ `; } - deleteTimelineKeyframe(layerId, property, offsetId) { - var p = this.getTimelineProperty(layerId, property); - if (p) { - p.keyframes = p.keyframes.filter((it) => it.id != offsetId); - } + makeDevice(device) { + return ` +
+
${device.device}
+
${device.size}
+
+ `; } - removeTimelineProperty(layerId, property) { - var layer = this.getTimelineObject(layerId); - if (layer) { - layer.properties = layer.properties.filter((p) => p.property != property); - } + [CLICK("$list .device-item")](e) { + var size2 = e.$dt.attr("data-size"); + this.$commands.emit("resizeArtBoard", size2); } - removeTimeline(layerId) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.animations = timeline.animations.filter((ani) => ani.id != layerId); - } + makeGroup(group2) { + return ` +
+
${group2.group}
+
+
+ ${group2.devices.map((device) => this.makeDevice(device)).join("")} +
+ `; } - setTimelineKeyframeOffsetTime(layerId, property, offsetId, changedTime) { - var keyframe2 = this.getTimelineKeyframeById(layerId, property, offsetId); - if (keyframe2) { - keyframe2.time = changedTime; - this.compiledTimingFunction(layerId, property); - } + makeCategory(category) { + return ` +
+
${category.category}
+
+
+ ${category.groups.map((group2) => this.makeGroup(group2)).join("")} +
+ `; } - setTimelineKeyframeOffsetValue(layerId, property, offsetId, value = void 0, timing = void 0, time = void 0) { - var keyframe2 = this.getTimelineKeyframeById(layerId, property, offsetId); - if (keyframe2) { - if (isNotUndefined(time)) { - keyframe2.time = time; - } - if (isNotUndefined(value)) { - keyframe2.value = value; - } - if (isNotUndefined(timing)) { - keyframe2.timing = timing; - } - this.compiledTimingFunction(layerId, property); - } + [LOAD("$list") + DOMDIFF]() { + var category = artboardSize[this.state.selectedIndex]; + return category.groups.map((group2) => this.makeGroup(group2)); } - addTimelineKeyframe({ - layerId, - property, - value, - timing, - time: newTime, - editor - }) { - this.addTimelineProperty(layerId, property); - var timeline = this.getSelectedTimeline(); - var p = this.getTimelineProperty(layerId, property); - if (p) { - var time = newTime || timeline.currentTime; - var times = p.keyframes.filter((it) => it.time === time); - if (!times.length) { - value = isUndefined(value) || value === "" ? this.getDefaultPropertyValue(property) : value; - var obj2 = { - id: uuidShort(), - layerId, - property, - time, - value, - timing: timing || "linear", - editor - }; - p.keyframes.push(obj2); - p.keyframes.sort((a, b) => { - return a.time > b.time ? 1 : -1; - }); - this.compiledTimingFunction(layerId, property); - return obj2; - } - } +} +function artboard(editor) { + editor.registerUI("inspector.tab.style", { + ArtBoardSizeProperty + }); +} +var BackdropFilterProperty$1 = ""; +const filter_list$1 = [ + "blur", + "grayscale", + "hue-rotate", + "invert", + "brightness", + "contrast", + "drop-shadow", + "opacity", + "saturate", + "sepia", + "svg" +]; +class BackdropFilterProperty extends BaseProperty { + getTitle() { + return this.$i18n("backdrop.filter.property.title"); } - getDefaultPropertyValue(property) { - switch (property) { - case "mix-blend-mode": - return "normal"; - case "rotate": - return "0deg"; - case "box-shadow": - return "0px 0px 0px 0px rgba(0, 0, 0, 1)"; - case "text-shadow": - return "0px 0px 0px rgba(0, 0, 0, 1)"; - case "opacity": - return 1; - default: - return ""; - } + getTitleClassName() { + return "filter"; } - copyTimelineKeyframe(layerId, property, newTime = null) { - var p = this.getTimelineProperty(layerId, property); - if (p) { - var timeline = this.getSelectedTimeline(); - var time = newTime || timeline.currentTime; - var times = p.keyframes.filter((it) => it.time < time); - var value = this.getDefaultPropertyValue(property); - var timing = "linear"; - var editor = ""; - if (times.length) { - times.sort((a, b) => { - return a.time > b.time ? -1 : 1; - }); - value = times[0].value + ""; - timing = times[0].timing + ""; - editor = times[0].editor; - } - this.addTimelineKeyframe({ layerId, property, value, timing, editor }); - } + getBodyClassName() { + return "no-padding"; + } + getBody() { + return `
`; + } + getTools() { + return ` + + + `; } - getTimelineKeyframe(layerId, property, time) { - var p = this.getTimelineProperty(layerId, property); - if (p) { - return p.keyframes.find((it) => it.time === time); - } + [CLICK("$add")]() { + var filterType = this.refs.$filterSelect.value; + this.children.$filterEditor.trigger("add", filterType); } - getTimelineKeyframeById(layerId, property, id) { - var p = this.getTimelineProperty(layerId, property); - if (p) { - return p.keyframes.find((it) => it.id === id); + [LOAD("$filterSelect")]() { + var list2 = filter_list$1.map((it) => { + return { title: this.$i18n(`filter.property.${it}`), value: it }; + }); + var svgFilterList = this.getSVGFilterList(); + var totalList = []; + if (svgFilterList.length) { + totalList = [...list2, { title: "-------", value: "" }, ...svgFilterList]; + } else { + totalList = [...list2]; } + return totalList.map((it) => { + var { title: title2, value } = it; + return ``; + }); } - sortTimelineKeyframe(layerId, property) { - var p = this.getTimelineProperty(layerId, property); - if (p) { - p.keyframes.sort((a, b) => { - return a.time > b.time ? 1 : -1; + getSVGFilterList() { + var current = this.$context.selection.currentProject; + var arr = []; + if (current) { + arr = current.svgfilters.map((it) => { + return { + title: `svg - #${it.id}`, + value: it.id + }; }); - this.compiledTimingFunction(layerId, property); } + return arr; } - setFps(fps) { - var timeline = this.getSelectedTimeline(); - if (timeline) { - timeline.fps = fps; - timeline.currentTimecode = timecode(fps, timeline.currentTime); - timeline.totalTimecode = timecode(fps, timeline.totalTime); - } + [LOAD("$body")]() { + var current = this.$context.selection.current || {}; + var value = current.backdropFilter; + return ` +
+ ${createComponent("FilterEditor", { + ref: "$filterEditor", + key: "backdropFilter", + value, + hideLabel: true, + onchange: "changeFilterEditor" + })} +
+ `; + } + [SUBSCRIBE_SELF("changeFilterEditor")](key, filter2) { + this.$commands.executeCommand("setAttribute", "change backdrop filter", this.$context.selection.packByValue({ + [key]: filter2 + })); + } + get editableProperty() { + return "backdropFilter"; + } + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(1e3)]() { + this.refresh(); } } -_compiledTimeline = new WeakMap(); -const identity = create$4(); -class Project extends TimelineModel { - getDefaultTitle() { - return "New Project"; +function backdropFilter(editor) { + editor.registerUI("inspector.tab.style", { + BackdropFilterProperty + }); +} +class BackgroundClipProperty extends BaseProperty { + getTitle() { + return "Background Clip"; } - get isAbsolute() { + isFirstShow() { return false; } - get parent() { - return null; + getTools() { + return `
`; } - get nestedAngle() { - return 0; + [LOAD("$backgroundClip")]() { + var current = this.$context.selection.current || {}; + var clip = current.backgroundClip || ""; + return createComponent("SelectEditor", { + ref: "$1", + key: "backgroundClip", + icon: true, + value: clip, + options: ["", "paddinb-box", "border-box", "content-box", "text"], + onchange: "changeSelect" + }); } - toRootVariableCSS() { - var obj2 = {}; - this.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { - var [key, value] = it.split(":"); - obj2[`--${key}`] = value; + [SUBSCRIBE_SELF("changeSelect")](key, value) { + this.$commands.executeCommand("setAttribute", "change background clip", this.$context.selection.packByValue({ + [key]: value + })); + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(["rect", "circle", "text"]); + } +} +function backgroundClip(editor) { + editor.registerElement({ + BackgroundClipProperty + }); +} +var BackgroundImageEditor$1 = ""; +const types = { + image: "image", + "image-resource": "image", + url: "image", + "static-gradient": "gradient", + "linear-gradient": "gradient", + "repeating-linear-gradient": "gradient", + "radial-gradient": "gradient", + "repeating-radial-gradient": "gradient", + "conic-gradient": "gradient", + "repeating-conic-gradient": "gradient" +}; +class BackgroundImageEditor extends EditorElement { + initState() { + return { + hideLabel: this.props.hideLabel || false, + value: this.props.value, + images: this.parseBackgroundImage(this.props.value) + }; + } + parseBackgroundImage(str) { + if (str === "") + return []; + return BackgroundImage.parseStyle(STRING_TO_CSS(str)); + } + setValue(value) { + this.setState({ + value, + images: this.parseBackgroundImage(value) }); - return obj2; } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "project", - name: "new Project", - description: "", - rootVariable: "" - }, obj2)); + template() { + return ` +
+
+
+ `; } - get description() { - return this.get("description"); + [LOAD("$fillList") + DOMDIFF]() { + const current = this.$context.selection.current || { color: "black" }; + return this.state.images.map((it, index2) => { + var image2 = it.image; + var backgroundType = types[image2.type]; + const selectedClass = it.selected ? "selected" : ""; + if (it.selected) { + this.selectedIndex = index2; + } + return ` +
+ + ${createComponentList([ + "BackgroundPositionEditor", + { + key: "background-position", + index: index2, + ref: `$bp${index2}`, + x: it.x, + y: it.y, + width: it.width, + height: it.height, + repeat: it.repeat, + size: it.size, + blendMode: it.blendMode, + onchange: "changePattern" + } + ], [ + "GradientSingleEditor", + { + index: index2, + ref: `$gse${index2}`, + image: it.image, + color: current.color, + key: "background-image", + onchange: "changePattern" + } + ])} +
+
+
+ ${createComponent("BlendSelectEditor", { + ref: `$blend_${index2}`, + key: "blendMode", + value: it.blendMode, + params: index2, + compact: true, + onchange: "changeRangeEditor" + })} +
+
+ +
+
+ +
+
+ +
+
+
+
+ `; + }); } - set description(value) { - this.set("description", value); + modifyBackgroundImage() { + var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.images)); + this.parent.trigger(this.props.onchange, this.props.key, value); } - get rootVariable() { - return this.get("rootVariable"); + makeGradient(type) { + switch (type) { + case "static-gradient": + return `static-gradient(black)`; + case "linear-gradient": + return `linear-gradient(90deg, white 0%, black 100%)`; + case "repeating-linear-gradient": + return `repeating-linear-gradient(90deg, white 2%, black 4%)`; + case "radial-gradient": + return `radial-gradient(circle, white 0%, black 100%)`; + case "repeating-radial-gradient": + return `repeating-radial-gradient(circle, white 2%, black 4%)`; + case "conic-gradient": + return `conic-gradient(white 0%, black 100%)`; + case "repeating-conic-gradient": + return `repeating-conic-gradient(white 50%, black 100%)`; + } } - set rootVariable(value) { - this.set("rootVariable", value); + [SUBSCRIBE("add")](gradientType) { + this.state.images.unshift(new BackgroundImage({ + image: BackgroundImage.parseImage(this.makeGradient(gradientType)) + })); + this.refresh(); + this.modifyBackgroundImage(); } - get artboards() { - return (this.layers || []).filter((it) => it.is("artboard")); + [CLICK("$add")]() { + this.trigger("add"); } - get offsetX() { - return 0; + [DRAGSTART("$fillList .fill-item > label")](e) { + this.startIndex = +e.$dt.attr("data-index"); } - get offsetY() { - return 0; + [DRAGOVER("$fillList .fill-item") + PREVENT]() { } - get screenWidth() { - return 0; + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); } - get screenHeight() { - return 0; + sortBackgroundImage(startIndex, targetIndex) { + this.sortItem(this.state.images, startIndex, targetIndex); } - isLayoutItem() { - return false; + [DROP("$fillList .fill-item") + PREVENT](e) { + var targetIndex = +e.$dt.attr("data-index"); + this.selectItem(this.startIndex, true); + this.sortBackgroundImage(this.startIndex, targetIndex); + this.refresh(); + this.modifyBackgroundImage(); } - hasLayout() { - return false; + getCurrentBackgroundImage() { + return this.state.images[this.selectedIndex]; } - getAbsoluteMatrix() { - return create$4(); + [CLICK("$fillList .tools .remove")](e) { + var removeIndex = +e.$dt.attr("data-index"); + this.state.images.splice(removeIndex, 1); + this.refresh(); + this.modifyBackgroundImage(); } - getTransformMatrix() { - return create$4(); + [CLICK("$fillList .tools .visibility")](e) { + var index2 = +e.$dt.attr("data-index"); + this.state.images[index2].visibility = this.state.images[index2].visibility === VisibilityType.HIDDEN ? VisibilityType.VISIBLE : VisibilityType.HIDDEN; + this.refresh(); + this.modifyBackgroundImage(); } - resetMatrix(childItem) { - const [x, y] = getTranslation([], calculateMatrix(childItem.absoluteMatrix, childItem.localMatrixInverse)); - childItem.reset({ - x, - y + [CLICK("$fillList .tools .copy")](e) { + var index2 = +e.$dt.attr("data-index"); + const current = this.state.images[index2]; + this.state.images.splice(index2, 0, current); + this.refresh(); + this.modifyBackgroundImage(); + } + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.refs[`fillIndex${selectedIndex}`].addClass("selected"); + } else { + this.refs[`fillIndex${selectedIndex}`].removeClass("selected"); + } + this.state.images.forEach((it, index2) => { + it.selected = index2 === selectedIndex; }); } - get rectVerties() { - var _a; - return ((_a = this.layers) == null ? void 0 : _a.length) ? itemsToRectVerties(this.layers) : null; + [SUBSCRIBE("selectFillPopupTab")](type) { + var typeName = types[type]; + var $fillItem = this.refs[`fillIndex${this.selectedIndex}`]; + $fillItem.attr("data-fill-type", typeName); } - get absoluteMatrix() { - return identity; + [SUBSCRIBE_SELF("changeRangeEditor")](key, value, params) { + this.trigger("changePattern", key, { [key]: value }, params); } - get absoluteMatrixInverse() { - return identity; + [SUBSCRIBE_SELF("changePattern")](key, value, params) { + var index2 = +params; + var image2 = this.state.images[index2]; + image2.reset(value); + this.modifyBackgroundImage(); + this.refresh(); } - get contentBox() { +} +var BackgroundImagePositionPopup$1 = ""; +class BackgroundImagePositionPopup extends BasePopup { + get localeKey() { + return "background.image.position.popup"; + } + getTitle() { + return this.$i18n("title"); + } + initState() { return { - left: 0, - top: 0, - width: 0, - height: 0 + size: this.props.size || "auto", + repeat: this.props.repeat || "repeat", + x: this.props.x || 0, + y: this.props.y || 0, + width: this.props.width || 0, + height: this.props.height || 0, + blendMode: this.props.blendMode }; } -} -class RectLayer extends LayerModel { - getIcon() { - return obj$3.rect; + updateData(opt = {}) { + this.setState(opt, false); + this.emit(this.state.changeEvent, opt, this.state.params); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "rect", - name: "New Rect" - }, obj2)); + templateForSize() { + return createComponent("SelectEditor", { + label: this.$i18n("size"), + ref: "$size", + key: "size", + value: this.state.size, + options: ["contain", "cover", "auto"], + onchange: "changeRangeEditor" + }); } - getDefaultTitle() { - return "Rect"; + [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { + this.updateData({ [key]: value }); } -} -var isNdarray$2 = function(arr) { - if (!arr) - return false; - if (!arr.dtype) - return false; - var re = new RegExp("function View[0-9]+d(:?" + arr.dtype + ")+"); - return re.test(String(arr.constructor)); -}; -var isNdarrayLike$3 = function(arr) { - if (!arr) - return false; - return arr.data !== void 0 && Array.isArray(arr.shape) && arr.offset !== void 0 && arr.stride !== void 0; -}; -var isArrayLike$5 = function isArrayLike(data) { - return Array.isArray(data) || ArrayBuffer.isView(data); -}; -var isNdarray$1 = isNdarray$2; -var isNdarrayLike$2 = isNdarrayLike$3; -var isArrayLike$4 = isArrayLike$5; -function inferType$5(x) { - if (!x) { - return void 0; + templateForX() { + return createComponent("InputRangeEditor", { + label: "X", + compact: true, + ref: "$x", + key: "x", + value: this.state.x, + min: -1e3, + max: 1e3, + step: 1, + onchange: "changeRangeEditor" + }); } - if (isNdarray$1(x) || isNdarrayLike$2(x)) { - if (x.dtype === "generic") { - return inferType$5.GENERIC_NDARRAY; - } - return inferType$5.NDARRAY; - } else { - if (isArrayLike$4(x)) { - return inferType$5.ARRAY_OF_ARRAYS; - } - throw new Error("Unhandled data type. Got type: " + typeof x); + templateForY() { + return createComponent("InputRangeEditor", { + label: "Y", + compact: true, + ref: "$y", + key: "y", + value: this.state.y, + min: -1e3, + max: 1e3, + step: 1, + onchange: "changeRangeEditor" + }); + } + templateForWidth() { + return createComponent("InputRangeEditor", { + label: "W", + compact: true, + ref: "$width", + key: "width", + value: this.state.width, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); + } + templateForHeight() { + return createComponent("InputRangeEditor", { + label: "H", + compact: true, + ref: "$height", + key: "height", + value: this.state.height, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); + } + templateForRepeat() { + return ` +
+ +
+
+ + + + + + +
+ `; + } + [CLICK("$repeat button")]({ $dt: $t }) { + this.refs.$repeat.attr("data-value", $t.value); + this.updateData({ repeat: $t.value }); + } + getBody() { + return ` +
+ `; + } + [LOAD("$picker") + DOMDIFF]() { + return ` + +
+ +
+ ${this.templateForSize()} + ${this.templateForX()} + ${this.templateForY()} + ${this.templateForWidth()} + ${this.templateForHeight()} + ${this.templateForRepeat()} +
+
+ `; } -} -inferType$5.ARRAY_OF_ARRAYS = "Arr"; -inferType$5.NDARRAY = "Nd"; -inferType$5.GENERIC_NDARRAY = "GenNd"; -inferType$5.PACKED = "PackArr"; -var inferType_1 = inferType$5; -var isArrayLike$3 = isArrayLike$5; -function capitalize(str) { - return str[0].toUpperCase() + str.slice(1); -} -var cacheKey = function(nurbs2, debug, checkBounds, pointType, weightType, knotType) { - var d; - var degreeParts = []; - var hasAnyKnots = false; - for (d = 0; d < nurbs2.splineDimension; d++) { - var hasKnots = isArrayLike$3(nurbs2.knots) && isArrayLike$3(nurbs2.knots[d]); - if (hasKnots) - hasAnyKnots = true; - degreeParts.push("Deg" + nurbs2.degree[d] + (hasKnots ? "" : "Uniform") + capitalize(nurbs2.boundary[d])); + [SUBSCRIBE("showBackgroundImagePositionPopup")](data, params, rect2) { + this.state.changeEvent = data.changeEvent || "changeFillPopup"; + this.state.params = params; + this.setState(data.data); + this.showByRect(this.makeRect(180, 310, rect2)); } - var parts = [ - [ - hasAnyKnots ? "NU" : "", - nurbs2.weights ? "RBS" : "BS" - ].join("") + nurbs2.dimension + "D", - degreeParts.join("_") - ]; - if (pointType) { - parts.push(pointType + "Pts"); +} +var BackgroundImageProperty$1 = ""; +class BackgroundImageProperty extends BaseProperty { + getTitle() { + return this.$i18n("background.image.property.title"); } - if (weightType) { - parts.push(weightType + "Wts"); + afterRender() { + this.show(); } - if (knotType) { - parts.push(knotType + "Kts"); + getClassName() { + return "background-image"; } - if (debug) { - parts.push("debug"); + getBodyClassName() { + return "no-padding"; } - if (checkBounds) { - parts.push("chk"); + getBody() { + return /* @__PURE__ */ createElementJsx("div", { + class: "full", + ref: "$property" + }); } - return parts.join("_"); -}; -var createVariable$1 = function createVariable(name, nurbs2) { - return function(i, period) { - if (i !== void 0 && !Array.isArray(i)) - i = [i]; - var dimAccessors = []; - for (var j = 0; j < i.length; j++) { - dimAccessors.push(createVariable.sum(i[j])); - } - if (period) { - for (i = 0; i < dimAccessors.length; i++) { - if (period[i] === void 0) - continue; - dimAccessors[i] = "(" + dimAccessors[i] + " + " + period[i] + ") % " + period[i]; - } - } - return name + dimAccessors.join("_"); - }; -}; -createVariable$1.sum = function(parts) { - parts = Array.isArray(parts) ? parts : [parts]; - parts = parts.filter(function(part) { - return part !== void 0 && part !== 0; - }); - if (parts.length === 0) - parts.push(0); - return parts.join(" + "); -}; -var variable$3 = createVariable$1; -var inferType$4 = inferType_1; -var createVariable2 = variable$3; -function wrapAccessor(callback) { - return function(i, period) { - if (i !== void 0 && !Array.isArray(i)) - i = [i]; - var dimAccessors = []; - for (var j = 0; j < i.length; j++) { - dimAccessors.push(createVariable2.sum(i[j])); - } - if (period) { - for (i = 0; i < dimAccessors.length; i++) { - if (period[i] === void 0) - continue; - dimAccessors[i] = "(" + dimAccessors[i] + " + " + period[i] + ") % " + period[i]; - } - } - return callback(dimAccessors); - }; -} -function createAccessor(name, data) { - var i; - if (!data) - return void 0; - switch (inferType$4(data)) { - case inferType$4.ARRAY_OF_ARRAYS: - return wrapAccessor(function(accessors) { - return name + "[" + accessors.join("][") + "]"; - }); - case inferType$4.GENERIC_NDARRAY: - return wrapAccessor(function(accessors) { - return name + ".get(" + accessors.join(",") + ")"; - }); - case inferType$4.NDARRAY: - return wrapAccessor(function(accessors) { - var code2 = [name + "Offset"]; - for (i = 0; i < accessors.length; i++) { - code2.push(name + "Stride" + i + " * (" + accessors[i] + ")"); - } - return name + "[" + code2.join(" + ") + "]"; - }); - case inferType$4.PACKED: - default: - return void 0; + getTools() { + return /* @__PURE__ */ createElementJsx("div", { + class: "fill-sample-list", + ref: "$add" + }, /* @__PURE__ */ createElementJsx("button", { + type: "button", + class: "fill", + "data-value": "static-gradient" + }, iconUse("add"))); } -} -var createAccessors$1 = function(nurbs2) { - var accessors = {}; - var accessor; - accessor = createAccessor("x", nurbs2.points); - if (accessor) - accessors.point = accessor; - accessor = createAccessor("w", nurbs2.weights); - if (accessor) - accessors.weight = accessor; - accessor = createAccessor("k", nurbs2.knots); - if (accessor) - accessors.knot = accessor; - return accessors; -}; -var args = []; -var tmp$1 = []; -var numericalDerivative$1 = function numericalDerivative(out, order, dimension) { - if (order !== 1) { - throw new Error("Numerical derivative not implemented for order n = " + order + "."); + [CLICK("$add [data-value]")](e) { + this.children.$backgroundImageEditor.trigger("add", e.$dt.data("value")); } - var i; - var h = arguments[this.splineDimension + 3] === void 0 ? 1e-4 : arguments[this.splineDimension + 3]; - args.length = this.splineDimension; - for (i = 0; i < this.splineDimension; i++) { - args[i + 1] = arguments[i + 3]; + [LOAD("$property")]() { + var current = this.$context.selection.current || {}; + var value = current.backgroundImage || ""; + return createComponent("BackgroundImageEditor", { + ref: "$backgroundImageEditor", + key: "backgroundImage", + value, + onchange: "changeBackgroundImage" + }); } - var domain = this.domain; - var k0 = domain[dimension][0]; - var k1 = domain[dimension][1]; - var tm, tp, T; - var t0 = args[dimension + 1]; - var dt = (k1 - k0) * h; - if (this.boundary[dimension] === "closed") { - T = k1 - k0; - tm = k0 + (t0 - k0 - dt + T) % T; - tp = k0 + (t0 - k0 + dt + T) % T; - dt *= 2; - } else { - tm = Math.min(k1, Math.max(k0, t0 - dt)); - tp = Math.min(k1, Math.max(k0, t0 + dt)); - dt = tp - tm; + get editableProperty() { + return "backgroundImage"; } - args[dimension + 1] = tm; - args[0] = tmp$1; - this.evaluate.apply(null, args); - args[dimension + 1] = tp; - args[0] = out; - this.evaluate.apply(null, args); - for (i = 0; i < this.dimension; i++) { - out[i] = (out[i] - tmp$1[i]) / dt; + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { + this.refresh(); } - return out; -}; -var ndloop$2 = function ndloop(n, callback) { - for (var m = 1, k = 0, i = []; k < n.length; k++) { - m *= Array.isArray(n[k]) ? n[k][1] - n[k][0] : n[k]; - i[k] = Array.isArray(n[k]) ? n[k][0] : 0; + checkCurrentItem(item) { + return this.$context.selection.current === item; } - for (var ptr = 0; ptr < m; ptr++) { - callback(i.slice()); - for (k = n.length - 1; k >= 0; k--) { - if (i[k] === (Array.isArray(n[k]) ? n[k][1] : n[k]) - 1) { - i[k] = Array.isArray(n[k]) ? n[k][0] : 0; - } else { - i[k]++; - break; + [SUBSCRIBE(UPDATE_CANVAS) + IF("checkCurrentItem") + DEBOUNCE(100)]() { + if (this.$context.selection.current) { + if (this.$context.selection.hasChangedField("backgroundImage")) { + this.refresh(); } } } -}; -var inferType$3 = inferType_1; -var accessorPreamble$3 = function(nurbs2, variableName, propertyName, data) { - var i; - var code2 = []; - switch (inferType$3(data)) { - case inferType$3.NDARRAY: - code2.push(" var " + variableName + " = " + propertyName + ".data;"); - code2.push(" var " + variableName + "Offset = " + propertyName + ".offset;"); - for (i = 0; i < data.dimension; i++) { - code2.push(" var " + variableName + "Stride" + i + " = " + propertyName + ".stride[" + i + "];"); - } - break; - case inferType$3.ARRAY_OF_ARRAYS: - code2.push(" var " + variableName + " = " + propertyName + ";"); + [SUBSCRIBE_SELF("changeBackgroundImage")](key, value) { + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + [key]: value + })); } - return code2.join("\n"); -}; -var isNdarrayLike$1 = isNdarrayLike$3; -var sizeGetter$3 = function(data, dataVariableName, dimension) { - if (!data) { - return "this.size[" + dimension + "]"; - } else if (isNdarrayLike$1(data)) { - return dataVariableName + ".shape[" + dimension + "]"; - } else { - var str = dataVariableName; - for (var i = 0; i < dimension; i++) { - str += "[0]"; - } - return str + ".length"; +} +var BackgroundPositionEditor$1 = ""; +class BackgroundPositionEditor extends EditorElement { + initState() { + return { + index: this.props.index, + x: this.props.x, + y: this.props.y, + width: this.props.width, + height: this.props.height, + repeat: this.props.repeat, + size: this.props.size, + blendMode: this.props.blendMode + }; } -}; -var ndloop$1 = ndloop$2; -var variable$2 = variable$3; -var accessorPreamble$2 = accessorPreamble$3; -var inferType$2 = inferType_1; -var isArrayLike$2 = isArrayLike$5; -var sizeGetter$2 = sizeGetter$3; -var evaluatorCache = {}; -var codeCache = {}; -var evaluate = function(cacheKey2, nurbs2, accessors, debug, checkBounds, isBasis, derivative) { - var splineDimension = nurbs2.splineDimension; - var i, j, n, m, d, kvar; - var points = nurbs2.points; - var degree = nurbs2.degree; - var weights = nurbs2.weights; - var hasWeights = weights !== void 0; - var knots = nurbs2.knots; - var spaceDimension = nurbs2.dimension; - var boundary = nurbs2.boundary; - if (derivative !== void 0 && derivative !== null) { - if (!Array.isArray(derivative)) { - derivative = [derivative]; - } - var totalDerivativeOrder = 0; - for (i = 0; i < splineDimension; i++) { - if (derivative[i] === void 0) - derivative[i] = 0; - totalDerivativeOrder += derivative[i]; - } - if (hasWeights && totalDerivativeOrder > 1) { - throw new Error("Analytical derivative not implemented for rational b-splines with order n = " + totalDerivativeOrder + "."); - } + updateData(opt = {}) { + this.setState(opt, false); + this.modifyValue(opt); } - if (isBasis) - cacheKey2 = "Basis" + cacheKey2; - if (derivative) - cacheKey2 = "Der" + derivative.join("_") + "_" + cacheKey2; - var cachedEvaluator = evaluatorCache[cacheKey2]; - if (debug) { - var logger = typeof debug === "function" ? debug : console.log; + modifyValue(value) { + this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); } - if (cachedEvaluator) { - if (debug) { - logger(codeCache[cacheKey2]); - } - return cachedEvaluator.bind(nurbs2); + setValue(obj2) { + this.setState(__spreadValues({}, obj2)); } - var code2 = []; - var functionName = "evaluate" + cacheKey2; - var pointAccessor = accessors.point; - if (isBasis) { - pointAccessor = function(src, period) { - var terms = []; - for (var i2 = 0; i2 < src.length; i2++) { - var accessor = src[i2]; - var terms2 = []; - for (var j2 = 0; j2 < accessor.length; j2++) { - if (accessor[j2] !== 0) - terms2.push(accessor[j2]); - } - accessor = terms2.join(" + "); - if (period[i2]) { - accessor = "(" + accessor + " + " + period[i2] + ") % " + period[i2]; - } - terms.push(accessor + " === " + indexVar(i2)); + [BIND("$miniView")]() { + return { + style: { + "background-image": "linear-gradient(to top right, black, white)", + "background-repeat": this.state.repeat, + "background-size": "10px 10px" } - return "((" + terms.join(" && ") + ") ? 1 : 0)"; }; } - var weightAccessor = accessors.weight; - var knotAccessor = accessors.knot; - var knotVar = variable$2("k"); - var pointVar = variable$2("x"); - var weightVar = variable$2("w"); - var indexVar = variable$2("i"); - var tVar = variable$2("t"); - var domainVar = debug ? "domain" : "d"; - var sizeVar = variable$2(debug ? "size" : "s"); - var knotIndex = variable$2(debug ? "knotIndex" : "j"); - var allDimensionUniform = true; - for (d = 0; d < splineDimension; d++) { - if (isArrayLike$2(knots) && isArrayLike$2(knots[d])) { - allDimensionUniform = false; + template() { + return ` +
+
+
+
+
+
+
+ `; + } + [CLICK("$preview")]() { + this.viewBackgroundPositionPopup(); + } + viewBackgroundPositionPopup() { + this.emit("showBackgroundImagePositionPopup", { + changeEvent: "changeBackgroundPositionPattern", + data: this.state + }, { + id: this.id + }, this.$el.rect()); + } + [SUBSCRIBE("changeBackgroundPositionPattern")](pattern, params) { + if (params.id === this.id) { + this.updateData(__spreadValues({}, pattern)); } } - function line2(str) { - code2.push(" " + (str || "")); +} +function backgroundImage(editor) { + editor.registerElement({ + BackgroundImageEditor, + BackgroundPositionEditor + }); + editor.registerUI("inspector.tab.style", { + BackgroundImageProperty + }); + editor.registerUI("popup", { + BackgroundImagePositionPopup + }); +} +var BorderEditor$1 = ""; +var BorderStyles = { + none: true, + hidden: true, + dotted: true, + dashed: true, + solid: true, + double: true, + groove: true, + ridge: true, + inset: true, + outset: true +}; +class Border { + static parseStyle(str) { + return STRING_TO_CSS(str); } - function debugLine(str) { - if (debug) - line2(str); + static parseValue(str = "") { + var style = ""; + var width2 = ""; + var color2 = ""; + str.split(" ").filter((it) => it.trim()).forEach((value) => { + if (BorderStyles[value]) { + style = value; + } else if (isColor(value)) { + color2 = value; + } else { + width2 = Length.parse(value).value; + } + }); + return { + style, + color: color2, + width: width2 + }; } - if (isBasis) { - var indexArgs = []; + static joinValue(obj2) { + return `${obj2.width}px ${obj2.style || "solid"} ${obj2.color}`; } - var parameterArgs = []; - for (i = 0; i < splineDimension; i++) { - if (isBasis) { - indexArgs.push(indexVar([i])); - } - parameterArgs.push(tVar([i])); + static join(obj2) { + var arr = [ + obj2["border"] ? `border: ${obj2["border"]}` : "", + obj2["border-top"] ? `border-top: ${obj2["border-top"]}` : "", + obj2["border-left"] ? `border-left: ${obj2["border-left"]}` : "", + obj2["border-right"] ? `border-right: ${obj2["border-right"]}` : "", + obj2["border-bottom"] ? `border-bottom: ${obj2["border-bottom"]}` : "" + ].filter((it) => it); + return arr.join(";"); } - code2.push("function " + functionName + " (" + (isBasis ? "" : "out, ") + parameterArgs.join(", ") + (isBasis ? ", " + indexArgs.join(", ") : "") + ") {"); - line2("var h, m, a, b;"); - if (checkBounds) { - line2("var " + domainVar + " = this.domain;"); - line2("for (var i = 0; i < this.splineDimension; i++) {"); - line2(" a = arguments[i + 1];"); - line2(" if (a < " + domainVar + "[i][0] || a > " + domainVar + "[i][1] || a === undefined || isNaN(a)) {"); - line2(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+" + domainVar + "[i][0]+', '+" + domainVar + "[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"); - line2(" }"); - line2("}"); +} +const borderTypeList = [ + "border" +]; +const borderTypeTitle = { + border: "all", + "border-top": "top", + "border-right": "right", + "border-bottom": "bottom", + "border-left": "left" +}; +class BorderEditor extends EditorElement { + initState() { + var borders = Border.parseStyle(this.props.value); + var direction2 = Object.keys(borders)[0] || "border"; + return { + direction: direction2, + borders + }; } - for (d = 0; d < splineDimension; d++) { - line2("var " + sizeVar(d) + " = " + sizeGetter$2(points, "this.points", d) + ";"); + updateData(obj2) { + this.setState(obj2, false); + this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); } - code2.push(accessorPreamble$2(nurbs2, "x", "this.points", points)); - if (hasWeights) { - code2.push(accessorPreamble$2(nurbs2, "w", "this.weights", weights)); + getValue() { + return Border.join(this.state.borders); } - if (!allDimensionUniform) { - code2.push(accessorPreamble$2(nurbs2, "k", "this.knots", knots)); + setValue(value) { + this.state.borders = Border.parseStyle(value); + this.refresh(); + } + [LOAD("$editorArea")]() { + return borderTypeList.map((type) => { + var label = borderTypeTitle[type] || type; + label = this.$i18n("border.editor." + label); + return ` +
+ ${createComponent("BorderValueEditor", { + ref: `$${type}`, + label, + key: type, + value: this.state.borders[type], + onchange: "changeKeyValue" + })} +
+ `; + }); } - function ternary(cond, a, b) { - return "(" + cond + ") ? (" + a + ") : (" + b + ")"; + template() { + return ` +
+
+ +
+
+ `; } - var hasKnots = []; - for (d = 0; d < splineDimension; d++) { - switch (inferType$2(knots)) { - case inferType$2.NDARRAY: - hasKnots[d] = true; - break; - case inferType$2.ARRAY_OF_ARRAYS: - hasKnots[d] = isArrayLike$2(knots[d]); - break; - } + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + var borders = this.state.borders; + borders[key] = value; + this.updateData({ borders }); } - for (d = 0; d < splineDimension; d++) { - if (hasKnots[d]) { - debugLine("\n // Bisect to locate the knot interval in dimension " + d + "\n"); - line2("var " + knotIndex(d) + " = 0;"); - line2("h = " + sizeVar(d) + ";"); - line2("while(h > " + knotIndex(d) + " + 1) {"); - line2(" m = 0.5 * (h + " + knotIndex(d) + ") | 0;"); - line2(" if (" + knotAccessor([d, "m"]) + " > " + tVar(d) + ") h = m;"); - line2(" else " + knotIndex(d) + " = m;"); - line2("}"); - debugLine("\n // Fetch knots for dimension " + d + "\n"); - for (i = -degree[d] + 1; i <= degree[d]; i++) { - if (boundary[d] === "closed") { - if (i < 0) { - line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + ternary(knotIndex(d) + " < " + -i, knotAccessor([d, 0]) + " + " + knotAccessor([d, [sizeVar(d), knotIndex(d), i]]) + " - " + knotAccessor([d, [sizeVar(d)]]), knotAccessor([d, [knotIndex(d), i]])) + ";"); - } else if (i > 0) { - line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + ternary(knotIndex(d) + " + " + i + " > " + sizeVar(d), knotAccessor([d, sizeVar(d)]) + " + " + knotAccessor([d, i + " + " + knotIndex(d) + " - " + sizeVar(d)]) + " - " + knotAccessor([d, 0]), knotAccessor([d, [knotIndex(d), i]])) + ";"); - } else { - line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + knotAccessor([d, [knotIndex(d), i]]) + ";"); - } - } else { - line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + knotAccessor([d, [knotIndex(d), i]]) + ";"); - } - } - } else { - debugLine("\n // Directly compute knot interval for dimension " + d + "\n"); - if (boundary[d] === "closed") { - line2(knotIndex(d) + " = (" + tVar(d) + " | 0) % " + sizeVar(d) + ";"); - } else { - line2(knotIndex(d) + " = (" + tVar(d) + " | 0);"); - line2("if (" + knotIndex(d) + " < " + degree[d] + ") " + knotIndex(d) + " = " + degree[d] + ";"); - line2("if (" + knotIndex(d) + " > " + sizeVar(d) + " - 1) " + knotIndex(d) + " = " + sizeVar(d) + " - 1;"); - } - debugLine("\n // Compute and clamp knots for dimension " + d + "\n"); - for (i = -degree[d] + 1; i <= degree[d]; i++) { - kvar = knotVar([d, i + degree[d] - 1]); - line2("var " + kvar + " = " + knotIndex(d) + " + " + i + ";"); - } - if (boundary[d] === "clamped") { - for (i = -degree[d] + 1; i <= degree[d]; i++) { - kvar = knotVar([d, i + degree[d] - 1]); - if (i < 0) { - line2("if (" + kvar + " < " + degree[d] + ") " + kvar + " = " + degree[d] + ";"); - } - if (i > 0) { - line2("if (" + kvar + " > " + sizeVar(d) + ") " + kvar + " = " + sizeVar(d) + ";"); - } - } - } - if (boundary[d] === "closed") { - debugLine("\n // Wrap the B-Spline parameter for closed boundary"); - line2(tVar(d) + " %= " + sizeVar(d) + ";"); - } - } +} +var BorderProperty$1 = ""; +class BorderProperty extends BaseProperty { + getTitle() { + return this.$i18n("border.property.title"); } - for (d = 0, n = []; d < splineDimension; d++) { - n[d] = degree[d] + 1; + getBody() { + return `
`; } - if (hasWeights) { - debugLine("\n // Fetch weights\n"); - ndloop$1(n, function(dst) { - var readIdx = []; - var period = []; - for (var d2 = 0; d2 < splineDimension; d2++) { - readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; - if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) - period[d2] = sizeVar(d2); - } - line2("var " + weightVar(dst) + " = " + weightAccessor(readIdx, period) + ";"); + [LOAD("$body")]() { + var current = this.$context.selection.current || {}; + var value = current.border || ""; + return createComponent("BorderEditor", { + ref: "$1", + key: "border", + value, + onchange: "changeKeyValue" }); } - if (debug) { - if (hasWeights) { - line2("\n // Fetch points and project into homogeneous (weighted) coordinates\n"); - } else { - line2("\n // Fetch points\n"); - } + get editableProperty() { + return "border"; } - ndloop$1(n, function(dst) { - var readIdx = []; - var period = []; - for (var d2 = 0; d2 < splineDimension; d2++) { - readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; - if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) - period[d2] = sizeVar(d2); - } - if (isBasis) { - if (hasWeights) { - line2("var " + pointVar(dst) + " = " + pointAccessor(readIdx, period) + " * " + weightVar(dst) + ";"); - } else { - line2("var " + pointVar(dst) + " = " + pointAccessor(readIdx, period) + ";"); - } - } else { - for (d2 = 0; d2 < spaceDimension; d2++) { - var dstWithDim = dst.concat(d2); - readIdx[splineDimension] = d2; - if (hasWeights) { - line2("var " + pointVar(dstWithDim) + " = " + pointAccessor(readIdx, period) + " * " + weightVar(dst) + ";"); - } else { - line2("var " + pointVar(dstWithDim) + " = " + pointAccessor(readIdx, period) + ";"); - } - } - } - }); - debugLine("\n"); - debugLine("// Perform De Boor's algorithm"); - for (d = n.length - 1; d >= 0; d--) { - n[d] = [degree[d], degree[d] + 1]; - for (i = 0; i < degree[d]; i++) { - debugLine("\n // Degree " + degree[d] + " evaluation in dimension " + d + ", step " + (i + 1) + "\n"); - for (j = degree[d]; j > i; j--) { - var isDerivative = derivative && degree[d] - i - derivative[d] <= 0; - if (isDerivative) { - line2("m = 1 / (" + knotVar([d, j - i + degree[d] - 1]) + " - " + knotVar([d, j - 1]) + ");"); - if (hasWeights) { - line2("a = (" + tVar(d) + " - " + knotVar([d, j - 1]) + ") * m;"); - line2("b = 1 - a;"); - } - } else { - line2("a = (" + tVar(d) + " - " + knotVar([d, j - 1]) + ") / (" + knotVar([d, j - i + degree[d] - 1]) + " - " + knotVar([d, j - 1]) + ");"); - line2("b = 1 - a;"); - } - if (hasWeights) { - ndloop$1(n, function(ii) { - var ij = ii.slice(); - var ij1 = ii.slice(); - ij[d] = j; - ij1[d] = j - 1; - if (isDerivative && hasWeights) - line2("h = " + weightVar(ij) + ";"); - line2(weightVar(ij) + " = b * " + weightVar(ij1) + " + a * " + weightVar(ij) + ";"); - }); - } - ndloop$1(n, function(ii) { - var weightFactor, pt1, pt2; - var ij = ii.slice(); - var ij1 = ii.slice(); - ij[d] = j; - ij1[d] = j - 1; - if (isDerivative) { - var derivCoeff = i + 1; - if (isBasis) { - weightFactor = hasWeights ? "h * " + weightVar(ij1) + " / " + weightVar(ij) + " * " : ""; - pt1 = pointVar(ij) + (hasWeights ? " / h" : ""); - pt2 = pointVar(ij1) + (hasWeights ? " / " + weightVar(ij1) : ""); - line2(pointVar(ij) + " = " + derivCoeff + " * " + weightFactor + "(" + pt1 + " - " + pt2 + ") * m;"); - } else { - var ijWithDimension = ij.slice(); - var ij1WithDimension = ij1.slice(); - for (m = 0; m < spaceDimension; m++) { - ijWithDimension[splineDimension] = ij1WithDimension[splineDimension] = m; - weightFactor = hasWeights ? "h * " + weightVar(ij1) + " / " + weightVar(ij) + " * " : ""; - pt1 = pointVar(ijWithDimension) + (hasWeights ? " / h" : ""); - pt2 = pointVar(ij1WithDimension) + (hasWeights ? " / " + weightVar(ij1) : ""); - line2(pointVar(ijWithDimension) + " = " + derivCoeff + " * " + weightFactor + "(" + pt1 + " - " + pt2 + ") * m;"); - } - } - } else { - if (isBasis) { - line2(pointVar(ij) + " = b * " + pointVar(ij1) + " + a * " + pointVar(ij) + ";"); - } else { - for (m = 0; m < spaceDimension; m++) { - ij[splineDimension] = ij1[splineDimension] = m; - line2(pointVar(ij) + " = b * " + pointVar(ij1) + " + a * " + pointVar(ij) + ";"); - } - } - } - }); - debugLine("\n"); - } - } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { + this.refresh(); } - if (debug) { - if (hasWeights) { - line2("\n // Project back from homogeneous coordinates and return final output\n"); - } else { - line2("\n // Return final output\n"); - } + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + this.$commands.executeCommand("setAttribute", "change border", this.$context.selection.packByValue({ + [key]: value + })); } - if (isBasis) { - if (hasWeights) { - line2("return " + pointVar(degree) + " / " + weightVar(degree) + ";"); - } else { - line2("return " + pointVar(degree) + ";"); - } - } else { - for (d = 0; d < spaceDimension; d++) { - if (hasWeights) { - line2("out[" + d + "] = " + pointVar(degree.concat([d])) + " / " + weightVar(degree) + ";"); - } else { - line2("out[" + d + "] = " + pointVar(degree.concat([d])) + ";"); - } - } +} +var BorderValueEditor$1 = ""; +const borderStyleList = [ + BorderStyle.NONE, + BorderStyle.HIDDEN, + BorderStyle.SOLID, + BorderStyle.DASHED, + BorderStyle.DOTTED, + BorderStyle.DOUBLE, + BorderStyle.GROOVE, + BorderStyle.RIDGE, + BorderStyle.INSET, + BorderStyle.OUTSET +].join(","); +class BorderValueEditor extends EditorElement { + initState() { + return { + value: Border.parseValue(this.props.value) + }; } - if (!isBasis) { - line2("return out;"); + updateData(obj2) { + this.setState(obj2, false); + this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); } - code2.push("}"); - if (debug) { - var codeStr = code2.join("\n"); - logger(codeStr); - codeCache[cacheKey2] = codeStr; + getValue() { + return Border.joinValue(this.state.value); } - var evaluator = new Function([code2.join("\n"), "; return ", functionName].join(""))(); - evaluatorCache[cacheKey2] = evaluator; - return evaluator.bind(nurbs2); -}; -var transformerCache = {}; -var accessorPreamble$1 = accessorPreamble$3; -var sizeGetter$1 = sizeGetter$3; -var variable$1 = variable$3; -var transform = function createTransform(cacheKey2, nurbs2, accessors, debug) { - var i, j, iterator, iterators, terms, n, rvalue, lvalue; - var cachedTransformer = transformerCache[cacheKey2]; - if (cachedTransformer) { - return cachedTransformer.bind(nurbs2); + setValue(value) { + this.state.value = Border.parseValue(value); + this.refresh(); } - var code2 = []; - var functionName = "transform" + cacheKey2; - code2.push("function " + functionName + "(m) {"); - code2.push("var i, w;"); - code2.push(accessorPreamble$1(nurbs2, "x", "this.points", nurbs2.points)); - var sizeVar = variable$1(debug ? "size" : "s"); - for (i = 0; i < nurbs2.splineDimension; i++) { - code2.push("var " + sizeVar(i) + " = " + sizeGetter$1(nurbs2.points, "this.points", i) + ";"); + refresh() { + const width2 = Length.parse(this.state.value.width === "undefined" ? 0 : this.state.value.width); + this.children.$width.setValue(width2.value || 0); + this.children.$style.setValue(this.state.value.style || "solid"); + this.children.$color.setValue(this.state.value.color || "rgba(0, 0, 0, 1)"); } - iterators = []; - for (i = 0; i < nurbs2.splineDimension; i++) { - iterator = "i" + i; - iterators.push(iterator); - code2.push("for (" + iterator + " = " + sizeVar(i) + "- 1; " + iterator + " >= 0; " + iterator + "--) {"); + template() { + var { width: width2, style, color: color2 } = this.state.value; + return ` +
+
+ ${createComponent("NumberInputEditor", { + label: iconUse("line_weight"), + compact: true, + ref: "$width", + min: 0, + max: 100, + step: 1, + key: "width", + value: width2, + onchange: "changeKeyValue" + })} + ${createComponent("SelectEditor", { + ref: "$style", + key: "style", + label: iconUse("line_style"), + title: "Style", + compact: true, + options: borderStyleList, + value: style || "solid", + onchange: "changeKeyValue" + })} + ${createComponent("ColorViewEditor", { + ref: "$color", + key: "color", + mini: true, + value: color2 || "rgba(0, 0, 0, 1)", + onchange: "changeKeyValue" + })} +
+
+ `; } - for (i = 0; i < nurbs2.dimension; i++) { - code2.push("x" + i + " = " + accessors.point(iterators.concat([i]))); + [SUBSCRIBE_SELF("changeKeyValue")](key, v) { + var value = this.state.value; + value[key] = v; + this.updateData({ value }); } - terms = []; - for (i = 0; i < nurbs2.dimension; i++) { - terms.push("m[" + ((nurbs2.dimension + 1) * (i + 1) - 1) + "] * x" + i); +} +function border(editor) { + editor.registerElement({ + BorderEditor, + BorderValueEditor + }); + editor.registerUI("inspector.tab.style", { + BorderProperty + }); +} +const typeList$1 = [ + { key: "top", title: "Top" }, + { key: "bottom", title: "Bottom" }, + { key: "left", title: "Left" }, + { key: "right", title: "Right" } +]; +const keyList$1 = typeList$1.map((it) => it.key); +const names = { + image: "Image", + "static-gradient": "Static", + "linear-gradient": "Linear", + "repeating-linear-gradient": `${obj$2.repeat} Linear`, + "radial-gradient": "Radial", + "repeating-radial-gradient": `${obj$2.repeat} Radial`, + "conic-gradient": "Conic", + "repeating-conic-gradient": `${obj$2.repeat} Conic` +}; +class BorderImageProperty extends BaseProperty { + getTitle() { + return "Border Image"; } - terms.push("m[" + ((nurbs2.dimension + 1) * (nurbs2.dimension + 1) - 1) + "]"); - code2.push("var w = (" + terms.join(" + ") + ") || 1.0;"); - for (i = 0; i < nurbs2.dimension; i++) { - terms = []; - n = nurbs2.dimension; - for (j = 0; j < n; j++) { - terms.push("m[" + (j * (n + 1) + i) + "] * x" + j); - } - terms.push("m[" + (j * (n + 1) + i) + "]"); - lvalue = accessors.point(iterators.concat([i])); - rvalue = "(" + terms.join(" + ") + ") / w"; - code2.push(lvalue + " = " + rvalue + ";"); + [SUBSCRIBE(REFRESH_SELECTION)]() { + this.refresh(); } - for (i = nurbs2.splineDimension - 1; i >= 0; i--) { - code2.push("}"); + getTools() { + var current = this.$context.selection.current || {}; + var appliedBorderImage = current.appliedBorderImage || false; + return ` + + `; } - code2.push("return this;"); - code2.push("}"); - var transform2 = new Function([code2.join("\n"), "; return ", functionName].join(""))(); - if (debug) - console.log(code2.join("\n")); - transformerCache[cacheKey2] = transform2; - return transform2.bind(nurbs2); -}; -var ndloop2 = ndloop$2; -var variable = variable$3; -var accessorPreamble = accessorPreamble$3; -var inferType$1 = inferType_1; -var isArrayLike$1 = isArrayLike$5; -var sizeGetter = sizeGetter$3; -var supportCache = {}; -var support = function(cacheKey2, nurbs2, accessors, debug, checkBounds) { - var cachedSupport = supportCache[cacheKey2]; - if (cachedSupport) { - return cachedSupport.bind(nurbs2); + [CLICK("$apply")]() { + var current = this.$context.selection.current; + if (!current) + return; + var applyBorderImage = this.refs.$apply.checked(); + this.$commands.executeCommand("setAttribute", this.$context.selection.packByValue({ + applyBorderImage + })); } - var degree = nurbs2.degree; - var knots = nurbs2.knots; - var splineDimension = nurbs2.splineDimension; - var boundary = nurbs2.boundary; - var i, n, d; - var code2 = []; - var functionName = "support" + cacheKey2; - var knotAccessor = accessors.knot; - var tVar = variable("t"); - var domainVar = debug ? "domain" : "d"; - var sizeVar = variable(debug ? "size" : "s"); - var knotIndex = variable(debug ? "knotIndex" : "i"); - var allDimensionUniform = true; - for (d = 0; d < splineDimension; d++) { - if (isArrayLike$1(knots) && isArrayLike$1(knots[d])) { - allDimensionUniform = false; + getColorStepList(image2) { + switch (image2.type) { + case "static-gradient": + case "linear-gradient": + case "repeating-linear-gradient": + case "radial-gradient": + case "repeating-radial-gradient": + case "conic-gradient": + case "repeating-conic-gradient": + return this.getColorStepString(image2.colorsteps); } + return ""; } - function line2(str) { - code2.push(" " + (str || "")); + getColorStepString(colorsteps) { + return colorsteps.map((step2) => { + return `
`; + }).join(""); } - var parameterArgs = []; - for (i = 0; i < splineDimension; i++) { - parameterArgs.push(tVar([i])); + [LOAD("$borderImageView")]() { + var current = this.$context.selection.current || { + borderImage: { image: {} } + }; + var borderImage2 = current.borderImage; + var backgroundTypeName = borderImage2.type ? names[borderImage2.type] : ""; + const imageCSS = `background-image: ${borderImage2.image.toString()}; background-size: cover;`; + return ` +
+
+
+
+
+
+
+
${backgroundTypeName}
+
+ ${this.getColorStepList(borderImage2.image)} +
+
+
+ `; } - code2.push("function " + functionName + " (out, " + parameterArgs.join(", ") + ") {"); - var c2 = 0; - function pushSupport(args2, period) { - if (period === void 0) { - line2("out[" + c2++ + "] = " + args2.join(" + ") + ";"); - } else { - line2("out[" + c2++ + "] = (" + args2.join(" + ") + " + " + period + ") % " + period + ";"); + [SUBSCRIBE_SELF("changeBorderImage")](key, value) { + if (key === "border-image-slice") { + keyList$1.forEach((type) => { + this.children[`$${type}Slice`].setValue(value); + }); } + this.setBorderImageProperty(); + } + getBody() { + return ` +
+
+
+ + +
+
+ ${createComponent("RangeEditor", { + ref: "$allSlice", + key: "border-image-slice", + onchange: "changeBorderImage" + })} +
+
+ + `; } - line2("var h, m;"); - line2("var c = 0;"); - if (checkBounds) { - line2("var " + domainVar + " = this.domain;"); - line2("for (var i = 0; i < this.splineDimension; i++) {"); - line2(" a = arguments[i + 1];"); - line2(" if (a < " + domainVar + "[i][0] || a > " + domainVar + "[i][1] || a === undefined || isNaN(a)) {"); - line2(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+" + domainVar + "[i][0]+', '+" + domainVar + "[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"); - line2(" }"); - line2("}"); + [CHANGE("$sliceSettingBox select")]() { + this.setBorderImageProperty(); } - for (d = 0; d < splineDimension; d++) { - line2("var " + sizeVar(d) + " = " + sizeGetter(nurbs2.points, "this.points", d) + ";"); + [CLICK("$borderImageView .preview")]() { + this.viewFillPopup(this.refs.$preview, ""); } - if (!allDimensionUniform) { - code2.push(accessorPreamble(nurbs2, "k", "this.knots", knots)); + [CLICK("$borderImageView .colorsteps .step")](e) { + this.refs.$colorsteps.$(`[data-selected="true"]`).removeAttr("data-selected"); + var selectColorStepId = e.$dt.attr("data-colorstep-id"); + e.$dt.attr("data-selected", true); + var $preview = e.$dt.closest("border-image-item").$(".preview"); + this.viewFillPopup($preview, selectColorStepId); } - var hasKnots = []; - for (d = 0; d < splineDimension; d++) { - switch (inferType$1(knots)) { - case inferType$1.NDARRAY: - hasKnots[d] = true; + getFillData(borderImage2) { + let data = { + type: borderImage2.type + }; + switch (data.type) { + case "image": + data.url = borderImage2.image ? borderImage2.image.url : ""; break; - case inferType$1.ARRAY_OF_ARRAYS: - hasKnots[d] = isArrayLike$1(knots[d]); + default: + if (borderImage2.image) { + const image2 = borderImage2.image; + data.type = image2.type; + data.colorsteps = [...image2.colorsteps]; + data.angle = image2.angle; + data.radialType = image2.radialType || "ellipse"; + data.radialPosition = image2.radialPosition || Position.CENTER; + } else { + data.colorsteps = []; + data.angle = 0; + data.radialType = "ellipse"; + data.radialPosition = Position.CENTER; + } break; } + return data; } - for (d = 0; d < splineDimension; d++) { - if (hasKnots[d]) { - line2("var " + knotIndex(d) + " = 0;"); - line2("h = " + sizeVar(d) + ";"); - line2("while(h > " + knotIndex(d) + " + 1) {"); - line2(" m = 0.5 * (h + " + knotIndex(d) + ") | 0;"); - line2(" if (" + knotAccessor([d, "m"]) + " > " + tVar(d) + ") h = m;"); - line2(" else " + knotIndex(d) + " = m;"); - line2("}"); - } else { - if (boundary[d] === "closed") { - line2(knotIndex(d) + " = (" + tVar(d) + " | 0) % " + sizeVar(d) + ";"); - } else { - line2(knotIndex(d) + " = (" + tVar(d) + " | 0);"); - line2("if (" + knotIndex(d) + " < " + degree[d] + ") " + knotIndex(d) + " = " + degree[d] + ";"); - line2("if (" + knotIndex(d) + " > " + sizeVar(d) + " - 1) " + knotIndex(d) + " = " + sizeVar(d) + " - 1;"); - } + viewFillPopup($preview, selectColorStepId) { + var current = this.$context.selection.current; + if (!current) + return; + this.emit("showFillPopup", __spreadProps(__spreadValues({ + changeEvent: "changeBorderImageFillPopup" + }, this.getFillData(current.borderImage)), { + selectColorStepId, + refresh: true + })); + } + viewChangeImage() { + var current = this.$context.selection.current; + if (!current) + return; + var borderImage2 = current.borderImage; + if (!borderImage2) + return; + var $el = this.getRef("$miniView"); + if ($el && borderImage2.image) { + $el.css({ + "background-image": borderImage2.image.toString(), + "background-size": "cover" + }); + } + var $el = this.getRef("$fillTitle"); + if ($el) { + $el.html(names["image"]); + } + var $el = this.getRef("$colorsteps", this.selectedIndex); + if ($el) { + $el.empty(); } } - for (d = 0, n = []; d < splineDimension; d++) { - n[d] = degree[d] + 1; + setImage(data) { + var current = this.$context.selection.current; + if (!current) + return; + current.borderImage.setImageUrl(data); + this.viewChangeImage(data); + this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); } - ndloop2(n, function(dst) { - var readIdx = []; - var period = []; - for (var d2 = 0; d2 < splineDimension; d2++) { - readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; - if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) - period[d2] = sizeVar(d2); + viewChangeGradient(data) { + var current = this.$context.selection.current; + if (!current) + return; + var borderImage2 = current.borderImage; + if (!borderImage2) + return; + var $el = this.getRef("$miniView"); + if ($el) { + $el.css({ + "background-image": borderImage2.image.toString(), + "background-size": "cover" + }); } - for (d2 = 0; d2 < splineDimension; d2++) { - pushSupport(readIdx[d2], period[d2]); + var $el = this.getRef("$fillTitle"); + if ($el) { + $el.html(names[data.type]); + } + var $el = this.getRef("$colorsteps", this.selectedIndex); + if ($el) { + $el.html(this.getColorStepString(data.colorsteps)); } - }); - line2("out.length = " + c2 + ";"); - line2("return out;"); - code2.push("}"); - if (debug) - console.log(code2.join("\n")); - var evaluator = new Function([code2.join("\n"), "; return ", functionName].join(""))(); - supportCache[cacheKey2] = evaluator; - return evaluator.bind(nurbs2); -}; -var inferType = inferType_1; -var computeCacheKey = cacheKey; -var isNdarray = isNdarray$2; -var isNdarrayLike = isNdarrayLike$3; -var createAccessors = createAccessors$1; -var numericalDerivative2 = numericalDerivative$1; -var isArrayLike2 = isArrayLike$5; -var createEvaluator = evaluate; -var createTransform2 = transform; -var createSupport = support; -var BOUNDARY_TYPES = { - open: "open", - closed: "closed", - clamped: "clamped" -}; -function isBlank(x) { - return x === void 0 || x === null; -} -function parseNURBS(points, degree, knots, weights, boundary, opts) { - var i, dflt; - if (points && !isArrayLike2(points) && !isNdarray(points)) { - opts = points; - this.debug = points.debug; - this.checkBounds = !!points.checkBounds; - this.weights = points.weights; - this.knots = points.knots; - this.degree = points.degree; - this.boundary = points.boundary; - this.points = points.points; - Object.defineProperty(this, "size", { value: opts.size, writable: true, configurable: true }); - } else { - opts = opts || {}; - this.weights = weights; - this.knots = knots; - this.degree = degree; - this.points = points; - this.boundary = boundary; - this.debug = opts.debug; - this.checkBounds = !!opts.checkBounds; - Object.defineProperty(this, "size", { value: opts.size, writable: true, configurable: true }); } - var pointType = inferType(this.points); - var weightType = inferType(this.weights); - var knotType = inferType(this.knots); - if (this.points) { - switch (pointType) { - case inferType.GENERIC_NDARRAY: - case inferType.NDARRAY: - Object.defineProperties(this, { - splineDimension: { - value: this.points.shape.length - 1, - writable: false, - configurable: true - }, - dimension: { - value: this.points.shape[this.points.shape.length - 1], - writable: false, - configurable: true - }, - size: { - get: function() { - return this.points.shape.slice(0, this.points.shape.length - 1); - }, - set: function() { - throw new Error("Cannot assign to read only property 'size'"); - }, - configurable: true - } - }); - break; - case inferType.ARRAY_OF_ARRAYS: - var splineDimension = 0; - var size2 = this.size || []; - size2.length = 0; - for (var ptr = this.points; isArrayLike2(ptr[0]); ptr = ptr[0]) { - splineDimension++; - size2.push(ptr.length); - } - if (splineDimension === 0) { - throw new Error("Expected an array of points"); - } - Object.defineProperties(this, { - splineDimension: { - value: splineDimension, - writable: false, - configurable: true - }, - dimension: { - value: ptr.length, - writable: false, - configurable: true - }, - size: { - get: function() { - var size3 = []; - size3.length = 0; - for (var i2 = 0, ptr2 = this.points; i2 < this.splineDimension; i2++, ptr2 = ptr2[0]) { - size3[i2] = ptr2.length; - } - return size3; - }, - set: function() { - throw new Error("Cannot assign to read only property 'size'"); - }, - configurable: true - } - }); + setGradient(data) { + var current = this.$context.selection.current; + if (!current) + return; + current.borderImage.setGradient(data); + this.viewChangeGradient(data); + this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); + } + [SUBSCRIBE("changeBorderImageFillPopup")](data) { + switch (data.type) { + case "image": + this.setImage(data); break; - case inferType.PACKED: default: - throw new Error("Expected either a packed array, array of arrays, or ndarray of points"); - } - } else { - if (this.size === void 0 || this.size === null) { - throw new Error("Either points or a control hull size must be provided."); + this.setGradient(data); + break; } - if (!isArrayLike2(this.size)) { - Object.defineProperty(this, "size", { - value: [this.size], - writable: true, - configurable: true + } + setBorderImageProperty() { + var current = this.$context.selection.current; + if (!current) + return; + var borderImage2 = current.borderImage; + var type = this.refs.$selector.attr("data-selected-value"); + if (type === "all") { + var len2 = this.children.$allSlice.getValue(); + borderImage2.reset({ + slice: { + top: len2.clone(), + right: len2.clone(), + bottom: len2.clone(), + left: len2.clone() + } + }); + } else { + keyList$1.forEach((type2) => { + borderImage2.slice[type2] = this.children[`$${type2}Slice`].getValue(); + borderImage2.width[type2] = this.children[`$${type2}Width`].getValue(); }); } - if (this.size.length === 0) { - throw new Error("`size` must be a number or an array of length at least one."); + this.$commands.executeCommand("setAttribute", this.$context.selection.pack("borderImage")); + } + [CLICK("$selector button")](e) { + var type = e.$dt.attr("data-value"); + this.refs.$selector.attr("data-selected-value", type); + if (type === "all") { + this.refs.$partitialSetting.hide(); + } else { + this.refs.$partitialSetting.show("grid"); } - Object.defineProperties(this, { - splineDimension: { - value: this.size.length, - writable: false, - configurable: true - }, - dimension: { - value: 0, - writable: false, - configurable: true - } - }); + this.setBorderImageProperty(); } - if (isArrayLike2(this.degree)) { - for (i = 0; i < this.splineDimension; i++) { - if (isBlank(this.degree[i])) { - throw new Error("Missing degree in dimension " + (i + 1)); +} +function borderImage(editor) { + editor.registerElement({ + BorderImageProperty + }); +} +var BorderRadiusEditor$1 = ""; +class BorderRadius { + static parseStyle(str = "") { + var obj2 = { + isAll: true, + "border-radius": 0, + "border-top-left-radius": 0, + "border-top-right-radius": 0, + "border-bottom-right-radius": 0, + "border-bottom-left-radius": 0 + }; + var arr = str.split(" ").map((it) => Length.parse(it)); + if (arr.length === 1) { + obj2.isAll = true; + obj2["border-radius"] = arr[0]; + } else { + obj2.isAll = false; + obj2["border-top-left-radius"] = arr[0]; + obj2["border-top-right-radius"] = arr[1]; + obj2["border-bottom-right-radius"] = arr[2]; + obj2["border-bottom-left-radius"] = arr[3]; + if (arr[0].equals(arr[1]) && arr[0].equals(arr[2]) && arr[0].equals(arr[3])) { + obj2.isAll = true; + obj2["border-radius"] = arr[0]; } } - } else { - var hasBaseDegree = !isBlank(this.degree); - var baseDegree = isBlank(this.degree) ? 2 : this.degree; - this.degree = []; - for (i = 0; i < this.splineDimension; i++) { - if (this.size[i] <= baseDegree) { - if (hasBaseDegree) { - throw new Error("Expected at least " + (baseDegree + 1) + " points for degree " + baseDegree + " spline in dimension " + (i + 1) + " but got only " + this.size[i]); - } else { - this.degree[i] = this.size[i] - 1; - } - } else { - this.degree[i] = baseDegree; - } + return obj2; + } +} +const typeList = [ + { key: "border-top-left-radius", title: "topLeft", label: "TL" }, + { key: "border-top-right-radius", title: "topRight", label: "TR" }, + { key: "border-bottom-left-radius", title: "bottomLeft", label: "BL" }, + { key: "border-bottom-right-radius", title: "bottomRight", label: "BR" } +]; +const keyList = typeList.map((it) => it.key); +const BorderGroup = { + ALL: "all", + PARTITIAL: "partial" +}; +class BorderRadiusEditor extends EditorElement { + initState() { + return __spreadValues({}, BorderRadius.parseStyle(this.props.value)); + } + template() { + return `
`; + } + [SUBSCRIBE_SELF("changeBorderRadius")](key, value) { + if (key === "border-radius") { + keyList.forEach((type) => { + this.children[`$${type}`].setValue(value.clone()); + }); + } + this.setBorderRadius(); + } + [LOAD("$body") + DOMDIFF]() { + var borderRadius2 = this.state["border-radius"]; + return ` +
+
+ ${createComponent("InputRangeEditor", { + label: iconUse("outline_rect"), + ref: "$all", + compact: "true", + key: "border-radius", + value: borderRadius2, + min: 0, + onchange: "changeBorderRadius" + })} +
+
+ ${createComponent("ToggleButton", { + compact: true, + ref: "$toggle", + key: "border-all", + checkedValue: BorderGroup.PARTITIAL, + value: BorderGroup.ALL, + toggleLabels: [iconUse("border_inner"), iconUse("border_inner")], + toggleValues: [BorderGroup.ALL, BorderGroup.PARTITIAL], + onchange: "changeKeyValue" + })} +
+ + `; + } + [INPUT("$radiusSettingBox input")]() { + this.setBorderRadius(); + } + [CHANGE("$radiusSettingBox select")]() { + this.setBorderRadius(); + } + setBorderRadius() { + var type = this.selectedValue; + if (type === BorderGroup.ALL) { + this.state["border-radius"] = this.children[`$all`].getValue(); + } else { + keyList.forEach((key) => { + this.state[key] = this.children[`$${key}`].getValue(); + }); } + this.modifyBorderRadius(); } - dflt = typeof this.boundary !== "string" ? "open" : this.boundary; - if (!BOUNDARY_TYPES[dflt]) { - throw new Error("Boundary type must be one of " + Object.keys(BOUNDARY_TYPES) + ". Got " + dflt); + modifyBorderRadius() { + var value = ""; + if (this.selectedValue === BorderGroup.ALL) { + value = this.state["border-radius"] + ""; + } else { + value = keyList.map((key) => `${this.state[key]}`).join(" "); + } + this.parent.trigger(this.props.onchange, value); } - this.boundary = isArrayLike2(this.boundary) ? this.boundary : []; - this.boundary.length = this.splineDimension; - for (i = 0; i < this.splineDimension; i++) { - this.boundary[i] = isBlank(this.boundary[i]) ? dflt : this.boundary[i]; - if (!BOUNDARY_TYPES[dflt]) { - throw new Error("Boundary type must be one of " + Object.keys(BOUNDARY_TYPES) + ". Got " + dflt + " for dimension " + (i + 1)); + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + const type = value; + if (type === BorderGroup.PARTITIAL) { + this.selectedValue = BorderGroup.PARTITIAL; + this.refs.$partitialSetting.show(); + } else { + this.selectedValue = BorderGroup.ALL; + this.refs.$partitialSetting.hide(); } + this.setBorderRadius(); } - switch (knotType) { - case inferType.ARRAY_OF_ARRAYS: - if (isArrayLike2(this.knots) && this.knots.length > 0 && !isArrayLike2(this.knots[0])) { - this.knots = [this.knots]; - } - for (i = 0; i < this.splineDimension; i++) { - if (this.size[i] <= this.degree[i]) { - throw new Error("Expected at least " + (this.degree[i] + 1) + " points in dimension " + (i + 1) + " but got " + this.size[i] + "."); - } - if (isArrayLike2(this.knots[i])) { - if (this.boundary[i] !== "closed" && this.knots[i].length !== this.degree[i] + this.size[i] + 1) { - throw new Error("Expected " + (this.degree[i] + this.size[i] + 1) + " knots in dimension " + (i + 1) + " but got " + this.knots[i].length + "."); - } else if (this.boundary[i] === "closed" && this.knots[i].length !== this.size[i] + 1) { - var canBeFudged = this.knots[i].length === this.size[i] + this.degree[i] + 1; - if (!canBeFudged) { - throw new Error("Expected " + (this.size[i] + 1) + " knots for closed spline in dimension " + (i + 1) + " but got " + this.knots[i].length + "."); - } - } - } - } - break; +} +class BorderRadiusProperty extends BaseProperty { + getTitle() { + return this.$i18n("border.radius.property.title"); } - var newCacheKey = computeCacheKey(this, this.debug, this.checkBounds, pointType, weightType, knotType); - if (newCacheKey !== this.__cacheKey) { - this.__cacheKey = newCacheKey; - var accessors = createAccessors(this); - this.evaluate = createEvaluator(this.__cacheKey, this, accessors, this.debug, this.checkBounds, false); - this.transform = createTransform2(this.__cacheKey, this, accessors, this.debug); - this.support = createSupport(this.__cacheKey, this, accessors, this.debug, this.checkBounds); - this.evaluator = function(derivativeOrder, isBasis) { - return createEvaluator(this.__cacheKey, this, accessors, this.debug, this.checkBounds, isBasis, derivativeOrder); - }; + getBody() { + return `
`; } - this.numericalDerivative = numericalDerivative2.bind(this); - return this; -} -function domainGetter() { - var sizeArray; - var ret = []; - var ptr = this.points; - if (!ptr) { - sizeArray = this.size; - } else if (isNdarrayLike(ptr)) { - sizeArray = ptr.shape; + [LOAD("$body")]() { + var current = this.$context.selection.current || {}; + var value = current.borderRadius || "0px"; + return createComponent("BorderRadiusEditor", { + ref: "$1", + value, + onchange: "changeBorderRadius" + }); } - for (var d = 0; d < this.splineDimension; d++) { - var size2 = sizeArray ? sizeArray[d] : ptr.length; - var p = this.degree[d]; - var isClosed = this.boundary[d] === "closed"; - if (this.knots && this.knots[d]) { - var k = this.knots[d]; - ret[d] = [k[isClosed ? 0 : p], k[size2]]; - } else { - ret[d] = [isClosed ? 0 : p, size2]; + get editableProperty() { + return "borderRadius"; + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { + if (this.$context.selection.hasChangedField("borderRadius")) { + this.refresh(); } - if (ptr) - ptr = ptr[0]; } - return ret; + [SUBSCRIBE_SELF("changeBorderRadius")](value) { + this.$commands.executeCommand("setAttribute", "change border radius", this.$context.selection.packByValue({ + borderRadius: value + })); + } } -function nurbs(points, degree, knots, weights, boundary, opts) { - var ctor = function(points2, degree2, knots2, weights2, boundary2, opts2) { - parseFcn(points2, degree2, knots2, weights2, boundary2, opts2); - return ctor; - }; - var parseFcn = parseNURBS.bind(ctor); - Object.defineProperty(ctor, "domain", { - get: domainGetter +function borderRadius(editor) { + editor.registerElement({ + BorderRadiusEditor + }); + editor.registerUI("inspector.tab.style", { + BorderRadiusProperty }); - parseFcn(points, degree, knots, weights, boundary, opts); - return ctor; } -var nurbs_1 = nurbs; -class SplineModel extends SVGModel { - getIcon() { - return obj$3.star; +var BoxModelProperty$1 = ""; +const fields = ["margin", "padding"]; +let styleKeys = []; +fields.forEach((field) => { + styleKeys.push.apply(styleKeys, ["-top", "-bottom", "-left", "-right"].map((it) => field + it)); +}); +class BoxModelProperty extends BaseProperty { + getTitle() { + return this.$i18n("box.model.property.title"); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "spline", - name: "New Spline", - strokeWidth: 1, - points: [], - traceCount: 100, - degree: 2, - boundary: "clamped" - }, obj2)); + get editableProperty() { + return "boxModel"; } - get points() { - return this.get("points"); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { + this.refresh(); } - set points(value) { - this.set("points", value); + checkCurrentItem(item) { + return this.$context.selection.current === item; } - get degree() { - return this.get("degree"); + [SUBSCRIBE(UPDATE_CANVAS) + IF("checkCurrentItem") + DEBOUNCE(100)]() { + const current = this.$context.selection.current; + if (current == null ? void 0 : current.hasChangedField("padding-left", "padding-right", "padding-top", "padding-bottom")) { + this.refresh(); + } } - set degree(value) { - this.set("degree", value); + getBody() { + return `
`; } - get traceCount() { - return this.get("traceCount"); + templateInput(key, current) { + var value = Length.parse(current[key] || 0); + return ``; } - set traceCount(value) { - this.set("traceCount", value); + [LOAD("$boxModelItem") + DOMDIFF]() { + var current = this.$context.selection.current; + if (!current) + return ""; + return ` +
+
+
+ ${this.templateInput("margin-top", current)} +
+
+ ${this.templateInput("margin-bottom", current)} +
+
+ ${this.templateInput("margin-left", current)} +
+
+ ${this.templateInput("margin-right", current)} +
+
+
+
+ ${this.templateInput("padding-top", current)} +
+
+ ${this.templateInput("padding-bottom", current)} +
+
+ ${this.templateInput("padding-left", current)} +
+
+ ${this.templateInput("padding-right", current)} +
+
+
+ +
+
+ `; } - get boundary() { - return this.get("boundary"); + [INPUT("$boxModelItem input")]() { + this.resetBoxModel(); } - set boundary(value) { - this.set("boundary", value); + resetBoxModel() { + var data = {}; + styleKeys.forEach((key) => { + data[key] = this.refs["$" + key].value; + }); + this.$commands.executeCommand("setAttribute", "change padding or margin", this.$context.selection.packByValue(data)); } - enableHasChildren() { - return false; +} +function boxModel(editor) { + editor.registerUI("inspector.tab.style", { + BoxModelProperty + }); +} +var boxShadow$1 = [ + { name: "Box", shadow: `0px 3px 3px 0px rgba(0,0,0,0.2)` }, + { + name: "Shadow-4", + shadow: ` + 0px 1px 1px 0px rgba(0,0,0,0.15), + 0px 2px 2px 0px rgba(0,0,0,0.15), + 0px 4px 4px 0px rgba(0,0,0,0.15), + 0px 8px 8px 0px rgba(0,0,0,0.15) + ` + }, + { + name: "Shadow-5", + shadow: ` + 0px 1px 1px 0px rgba(0,0,0,0.12), + 0px 2px 2px 0px rgba(0,0,0,0.12), + 0px 4px 4px 0px rgba(0,0,0,0.12), + 0px 8px 8px 0px rgba(0,0,0,0.12), + 0px 16px 16px 0px rgba(0,0,0,0.12) + ` + }, + { + name: "Shadow-6", + shadow: ` + 0px 1px 1px 0px rgba(0,0,0,0.11), + 0px 2px 2px 0px rgba(0,0,0,0.11), + 0px 4px 4px 0px rgba(0,0,0,0.11), + 0px 8px 8px 0px rgba(0,0,0,0.11), + 0px 16px 16px 0px rgba(0,0,0,0.11), + 0px 32px 32px 0px rgba(0,0,0,0.11) + ` + }, + { + name: "Sharp", + shadow: ` + 0px 1px 1px 0px rgba(0,0,0,0.25), + 0px 2px 2px 0px rgba(0,0,0,0.20), + 0px 4px 4px 0px rgba(0,0,0,0.15), + 0px 8px 8px 0px rgba(0,0,0,0.10), + 0px 16px 16px 0px rgba(0,0,0,0.05) + ` + }, + { + name: "Diffuse", + shadow: ` + 0px 1px 1px 0px rgba(0,0,0,0.08), + 0px 2px 2px 0px rgba(0,0,0,0.12), + 0px 4px 4px 0px rgba(0,0,0,0.16), + 0px 8px 8px 0px rgba(0,0,0,0.20) + ` } - refreshMatrixCache() { - super.refreshMatrixCache(); - if (this.hasChangedField("points", "boundary")) { - this.setCache(); - } else if (this.hasChangedField("width", "height")) { - if (!this.cachePath) { - this.setCache(); +]; +var BoxShadowProperty$1 = ""; +class BoxShadowProperty extends BaseProperty { + getTitle() { + return this.$i18n("boxshadow.property.title"); + } + getBody() { + return ` +
+ `; + } + getTools() { + return ` + + + `; + } + [CLICK("$add")]() { + const index2 = +this.refs.$select.value; + this.children.$boxshadow.trigger("add", boxShadow$1[index2].shadow); + } + [LOAD("$shadowList")]() { + var current = this.$context.selection.current || {}; + return createComponent("BoxShadowEditor", { + ref: "$boxshadow", + key: "boxShadow", + value: current.boxShadow, + onchange: (key, value) => { + this.$commands.executeCommand("setAttribute", "change box shadow", this.$context.selection.packByValue({ + [key]: value + })); } - this.points = this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).verties; - this.modelManager.setChanged("reset", this.id, { - points: this.points - }); - } + }); } - setCache() { - super.setCache(); - this.cachePath = PathParser.makePathByVerties(this.points); - this.cacheWidth = this.width; - this.cacheHeight = this.height; + get editableProperty() { + return "boxShadow"; } - get editablePath() { - let { width: width2, height: height2, points } = this; - if (!points || points.length == 0) { - points = [ - [0, height2], - [0, 0], - [width2, 0], - [width2, height2] - ]; + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { + this.refresh(); + } +} +function boxShadow(editor) { + editor.registerUI("inspector.tab.style", { + BoxShadowProperty + }); +} +var polygon = { + key: "polygon", + title: "Polygon", + execute: function() { + return [ + { name: "Triangle", polygon: "50% 0%, 0% 100%, 100% 100%" }, + { name: "Trapezoid", polygon: "20% 0%, 80% 0%, 100% 100%, 0% 100%" }, + { + name: "Parallelogram", + polygon: "25% 0%, 100% 0%, 75% 100%, 0% 100%" + }, + { + name: "Rhombus", + polygon: "50% 0%, 100% 50%, 50% 100%, 0% 50%" + }, + { + name: "Pentagon", + polygon: "50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%" + }, + { + name: "Hexagon", + polygon: "50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%" + }, + { + name: "Heptagon", + polygon: "50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%" + }, + { + name: "Octagon", + polygon: "30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%" + } + ]; + } +}; +var ClipPathProperty$1 = ""; +const CLIPPATH_REG = /(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi; +class ClipPath extends PropertyItem { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "clip-path", + type: "none", + value: "" + }, obj2)); + } + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("value")); + } + toString() { + var type = this.json.type; + var value = this.json.value; + var box = this.json.box; + var results = ""; + switch (type) { + case "circle": + case "inset": + case "ellipse": + case "polygon": + case "path": + results = `${type}(${value})`; + break; + case "svg": + results = `url(#${value})`; + break; + default: + results = "none"; + break; } - return this.absolutePath(PathParser.makePathByVerties(points).d).d; + return box ? `${box} ${results}` : results; } - recoverEditablePath(d) { - const points = this.invertPath(d).verties; - const pathData = this.updatePath(this.getPath(points)); - delete pathData.d; - return __spreadValues({ - points - }, pathData); + toCSS() { + return { + "clip-path": this.toString() + }; } - get d() { - return this.getPath(this.points, this.boundary); + static toCSS(obj2) { + return new ClipPath(obj2).toCSS(); } - getPath(points, boundary) { - let { width: width2, height: height2 } = this; - if (!points) { - points = this.points; + static toString(obj2) { + return ClipPath.toCSS(obj2)["clip-path"]; + } + static parse(obj2) { + return new ClipPath(obj2); + } + static parseStyle(str) { + var clippath = {}; + if (!str) + return {}; + var matches2 = str.match(CLIPPATH_REG) || []; + matches2.forEach((value) => { + if (value.includes("-box")) { + clippath.box = value; + } else { + var [clipPathName, clipPathValue] = value.split("("); + clipPathValue = clipPathValue || ""; + if (clipPathName === "none") { + clipPathValue = ""; + } else { + clipPathValue = clipPathValue.split(")")[0]; + } + clippath.type = clipPathName; + clippath.value = clipPathValue; + } + }); + return clippath; + } + static parseStyleForCircle(str = "50% at 50% 50%") { + var radius = new Length("", "closest-side"), position2 = ""; + str = str || "50% at 50% 50%"; + if (str.includes("at")) { + [radius, position2] = str.split("at").map((it) => it.trim()); + } else { + position2 = str.trim(); } - if (!boundary) { - boundary = this.boundary; + var [x, y] = position2.split(" "); + if (isUndefined(y)) { + y = x; } - if (!points || points.length == 0) { - points = [ - [0, height2], - [0, 0], - [width2, 0], - [width2, height2] - ]; + radius = Length.parse(radius); + x = Length.parse(x); + y = Length.parse(y); + return { + radius, + x, + y + }; + } + static parseStyleForEllipse(str = "50% 50%") { + var radius = `50% 50%`, position2 = ""; + str = str || "50%"; + if (str.includes("at")) { + [radius, position2] = str.split("at").map((it) => it.trim()); + } else { + position2 = str.trim(); + } + var [x, y] = position2.split(" "); + if (isUndefined(y)) { + y = x; + } + x = Length.parse(x); + y = Length.parse(y); + var [radiusX, radiusY] = radius.split(" "); + if (isUndefined(radiusY)) { + radiusY = radiusX; } - const curve = nurbs_1({ - points, - degree: points.length - 2, - boundary - }); - const pt = []; - const verties = []; - const traceCount = (points.length - 1) * 100; - const unit = 1 / traceCount; - const d0 = curve.domain[0][0]; - const d1 = curve.domain[0][1]; - for (var t = 0; t <= 1; t += unit) { - curve.evaluate(pt, d0 + (d1 - d0) * t); - verties.push(clone(pt)); + radiusX = Length.parse(radiusX); + radiusY = Length.parse(radiusY); + return { + radiusX, + radiusY, + x, + y + }; + } + static parseStyleForInset(str = "") { + var [inset, round2] = str.split("round"); + var [_count, top2, right2, bottom2, left2] = DirectionLength.parse(inset); + if (round2) { + var [_roundCount, topRadius, rightRadius, bottomRadius, leftRadius] = DirectionLength.parse(round2); } - return PathParser.makePathByVerties(verties, false).round(1e3).d; + return { + isAll: _count === 1, + top: top2, + right: right2, + bottom: bottom2, + left: left2, + round: round2, + isAllRadius: _roundCount === 1, + topRadius, + rightRadius, + bottomRadius, + leftRadius + }; } - getDefaultTitle() { - return "BSpline"; + static parseStyleForPolygon(str = "") { + return str.split(",").filter((it) => it.trim()).map((it) => { + var [x, y] = it.trim().split(" "); + return { + x: Length.parse(x), + y: Length.parse(y) + }; + }); } } -class StarModel extends SVGModel { - getIcon() { - return obj$3.star; +const ClipPathSample = { + [ClipPathType.CIRCLE]: "circle(50% at 50% 50%)", + [ClipPathType.ELLIPSE]: "ellipse(50% 50% at 50% 50%)", + [ClipPathType.INSET]: "inset(0% 0% 0% 0%)", + [ClipPathType.POLYGON]: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", + [ClipPathType.PATH]: "path()" +}; +class ClipPathProperty extends BaseProperty { + getTitle() { + return this.$i18n("clippath.property.title"); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "star", - name: "New Star", - strokeWidth: 1, - isCurve: false, - count: 5, - radius: 0.5, - tension: 0.5 - }, obj2)); + getClassName() { + return "clip-path-property"; } - get count() { - return this.get("count"); + getBody() { + return `
`; } - set count(value) { - this.set("count", value); + getTools() { + return ` +
+ + + + + + +
+ `; } - get radius() { - return this.get("radius"); + makeClipPathTemplate(clippath, func) { + const isPath = clippath === "path"; + const isPolygon = clippath === "polygon"; + let newPathString = ""; + if (isPath) { + const pathString2 = func.split("(")[1].split(")")[0]; + let pathObject = PathParser.fromSVGString(pathString2); + const bbox = pathObject.getBBox(); + const rectangle = vertiesToRectangle(bbox); + const rate = 260 / rectangle.width; + const hRate = 150 / rectangle.height; + const lastRate = Math.min(rate, hRate); + pathObject = pathObject.translate(-bbox[0][0], -bbox[0][1]).scale(lastRate, lastRate); + const newBBox = pathObject.getBBox(); + const newRectangle = vertiesToRectangle(newBBox); + newPathString = pathObject.translate(260 / 2 - newRectangle.width / 2, 0).d; + } + let polygonSelect = ""; + if (isPolygon) { + const polygonList = polygon.execute(); + polygonSelect = createComponent("SelectEditor", { + ref: "$polygonSelect", + options: ["", ...polygonList.map((it) => it.name)], + onchange: (key, value) => { + const polygon2 = polygonList.find((it) => it.name === value); + if (polygon2) { + this.updatePathInfo({ + "clip-path": `polygon(${polygon2.polygon})` + }); + } + } + }); + } + return ` +
+
+ +
+
${clippath}
+ ${isPolygon ? polygonSelect : ""} +
+
+ +
+
+ ${isPath ? `` : ""} +
+ + `; } - set radius(value) { - this.set("radius", value); + [CLICK("$clippathList .clippath-item .title .name")]() { + var current = this.$context.selection.current; + if (!current) + return; + this.viewClipPathPicker(); } - get tension() { - return this.get("tension"); + [CLICK("$clippathList .del") + PREVENT]() { + var current = this.$context.selection.current; + if (!current) + return; + this.$commands.executeCommand("setAttribute", "delete clip-path", this.$context.selection.packByValue({ + clipPath: "" + })); + this.emit("hideClipPathPopup"); + window.setTimeout(() => { + this.refresh(); + }, 100); } - set tension(value) { - this.set("tension", value); + get editableProperty() { + return "clipPath"; } - get isCurve() { - return this.get("isCurve"); + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { + this.refresh(); } - convert(json) { - json = super.convert(json); - if (json.count) - json.count = +json.count; - if (json.radius) - json.radius = +json.radius; - if (json.tension) - json.tension = +json.tension; - return json; + [LOAD("$clippathList")]() { + var current = this.$context.selection.current; + if (!current) + return ""; + if (!current.clipPath) + return ""; + return this.makeClipPathTemplate(current.clipPath.split("(")[0], current.clipPath); } - enableHasChildren() { - return false; + [CLICK("$tools [data-value]")](e) { + var current = this.$context.selection.current; + if (!current) + return; + if (current.clipPath) { + window.alert("clip-path is already exists."); + return; + } + if (current) { + current.reset({ + clipPath: ClipPathSample[e.$dt.data("value")] + }); + this.$commands.executeCommand("setAttribute", "change clipPath", this.$context.selection.pack("clipPath")); + } + this.refresh(); } - get d() { - const { width: width2, height: height2, count, radius, tension, isCurve } = this; - let newPath = ""; - if (isCurve) { - newPath = PathParser.makeCurvedStar(width2, height2, count, radius, tension).d; - } else { - newPath = PathParser.makeStar(width2, height2, count, radius).d; + viewClipPathPicker() { + var current = this.$context.selection.current; + if (!current) + return; + var obj2 = ClipPath.parseStyle(current.clipPath); + switch (obj2.type) { + case "path": + var d = current.absolutePath(current.clipPathString).d; + var mode = d ? "modify" : "path"; + this.emit("showPathEditor", mode, { + changeEvent: (data) => { + data.d = current.invertPath(data.d).d; + this.updatePathInfo({ + clipPath: `path(${data.d})` + }); + }, + current, + d + }); + break; } - return newPath; } - getDefaultTitle() { - return "Star"; + updatePathInfo(data) { + if (!data) + return; + var current = this.$context.selection.current; + if (!current) + return; + current.reset(data); + this.refresh(); + this.$commands.executeCommand("setAttribute", "change clipPath", this.$context.selection.packByValue(data)); } } -class SVGTextItem extends SVGModel { - getIcon() { - return obj$3.title; - } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "svg-text", - name: "New Text", - totalLength: 0, - fill: "rgba(0, 0, 0, 1)", - text: "Insert a text", - fontWeight: Length.number(100), - textLength: Length.em(0), - lengthAdjust: "spacingAndGlyphs" - }, obj2)); +function clipPath(editor) { + editor.registerUI("inspector.tab.style", { + ClipPathProperty + }); +} +var ClippathEditorView$2 = ""; +class ClippathPolygonEditorView extends EditorElement { + initializePolygon() { + const current = this.$context.selection.current; + this.state.current = current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.clippath.value = ClipPath.parseStyleForPolygon(this.state.clippath.value); + this.screenPoints = this.$viewport.applyVerties(vertiesMap(this.state.clippath.value.map((point2) => { + const { x, y } = point2; + const newX = x.toPx(this.state.width); + const newY = y.toPx(this.state.height); + return fromValues(newX, newY, 0); + }), current.absoluteMatrix)); + this.clonedScreenPoints = clone$1(this.screenPoints); } - get text() { - return this.get("text"); + [POINTERSTART("$el .polygon .polygon-pointer") + MOVE("movePolygonPointer") + END("moveEndPolygonPointer")](e) { + this.initializePolygon(); + this.polygonTargetIndex = +e.$dt.data("index"); } - set text(value) { - this.set("text", value); + movePolygonPointer(dx, dy) { + this.clonedScreenPoints[this.polygonTargetIndex] = add$1([], this.screenPoints[this.polygonTargetIndex], [dx, dy, 0]); + this.updatePolygon(this.clonedScreenPoints); } - get textLength() { - return this.get("textLength"); + moveEndPolygonPointer() { + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - set textLength(value) { - this.set("textLength", value); + [POINTERSTART("$el .polygon .polygon-line")](e) { + this.initializePolygon(); + const index2 = +e.$dt.data("index"); + this.polygonTargetIndex = index2; + const current = this.screenPoints[this.polygonTargetIndex]; + const next = this.screenPoints[(this.polygonTargetIndex + 1) % this.screenPoints.length]; + const newPoint = lerp([], current, next, 0.5); + this.screenPoints.splice(this.polygonTargetIndex + 1, 0, newPoint); + this.updatePolygon(this.screenPoints); } - get lengthAdjust() { - return this.get("lengthAdjust"); + updatePolygon(screenPoints) { + const newWorldPoints = this.$viewport.applyVertiesInverse(screenPoints); + const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; + const newLocalPoints = vertiesMap(newWorldPoints, inverseMatrix); + this.state.clippath.value = newLocalPoints.map((p) => { + return [ + Length.makePercent(p[0], this.state.width), + Length.makePercent(p[1], this.state.height) + ].join(" "); + }).join(","); + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - set lengthAdjust(value) { - this.set("lengthAdjust", value); + [POINTERSTART("$el .polygon .polygon-center") + MOVE("movePolygonCenter") + END("moveEndPolygonCenter")]() { + this.initializePolygon(); } - enableHasChildren() { - return false; + movePolygonCenter(dx, dy) { + const newScreenPoints = this.screenPoints.map((p) => { + return add$1([], p, [dx, dy, 0]); + }); + this.updatePolygon(newScreenPoints); } - convert(json) { - json = super.convert(json); - json.textLength = Length.parse(json.textLength); - return json; + moveEndPolygonCenter(dx, dy) { + if (dx == 0 && dy == 0) { + switch (this.state.clippath.type) { + case ClipPathType.POLYGON: + const value2 = ClipPath.toCSS({ + type: ClipPathType.CIRCLE, + value: `50% at 50% 50%` + }); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); + break; + } + return; + } + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - getDefaultTitle() { - return "Text"; + templatePolygon(clippath) { + const current = this.$context.selection.current; + const points = ClipPath.parseStyleForPolygon(clippath.value).map((point2) => [ + point2.x.toPx(current.screenWidth).value, + point2.y.toPx(current.screenHeight).value, + 0 + ]); + const centerPoint = toRectVerties(points)[4]; + const screenPoints = this.$viewport.applyVerties(vertiesMap(points, current.absoluteMatrix)); + const screenCenter = this.$viewport.applyVerties(vertiesMap([centerPoint], current.absoluteMatrix))[0]; + return /* @__PURE__ */ createElementJsx("div", { + class: "polygon" + }, /* @__PURE__ */ createElementJsx("div", { + class: "polygon-back" + }, /* @__PURE__ */ createElementJsx("svg", { + style: "position:absolute;width:100%;height:100%;" + }, /* @__PURE__ */ createElementJsx("polygon", { + points: `${screenPoints.map((it) => [it[0], it[1]].join(",")).join(" ")}` + }), screenPoints.map((it, index2) => { + const nextIndex = (index2 + 1) % screenPoints.length; + const nextPoint = screenPoints[nextIndex]; + return /* @__PURE__ */ createElementJsx("line", { + x1: it[0], + y1: it[1], + x2: nextPoint[0], + y2: nextPoint[1], + class: "polygon-line", + "data-index": index2 + }); + }), screenPoints.map((it, index2) => { + return /* @__PURE__ */ createElementJsx("circle", { + cx: it[0], + cy: it[1], + r: 3, + class: "polygon-pointer", + "data-index": index2 + }); + }))), /* @__PURE__ */ createElementJsx("div", { + class: "polygon-center", + style: { + left: Length.px(screenCenter[0]), + top: Length.px(screenCenter[1]) + } + })); } } -class SVGTextPathItem extends SVGModel { - getIcon() { - return obj$3.text_rotate; - } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "svg-textpath", - name: "New TextPath", - d: "", - totalLength: 0, - fill: "rgba(0, 0, 0, 1)", - text: "Insert a text", - textLength: Length.em(0), - lengthAdjust: "spacingAndGlyphs", - startOffset: Length.em(0) - }, obj2)); - } - get d() { - if (!this.get("d")) { - return null; - } - if (!this.cachePath) { - this.cachePath = new PathParser(this.get("d")); - this.cacheWidth = this.width; - this.cacheHeight = this.height; - } - return this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; - } - set d(value) { - this.set("d", value); +class ClippathInsetEditorView extends ClippathPolygonEditorView { + initializeInset() { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.clippath.value = ClipPath.parseStyleForInset(this.state.clippath.value); + this.state.inset = this.state.clippath.value; + const inset = this.state.inset; + const top2 = inset.top.toPx(current.screenHeight); + const left2 = inset.left.toPx(current.screenWidth); + const right2 = Length.px(current.screenWidth - inset.right.toPx(current.screenWidth)); + const bottom2 = Length.px(current.screenHeight - inset.bottom.toPx(current.screenHeight)); + const verties = this.$viewport.applyVerties(vertiesMap([ + [left2, top2, 0], + [right2, top2, 0], + [right2, bottom2, 0], + [left2, bottom2, 0] + ], current.absoluteMatrix)); + const leftPoint = lerp([], verties[0], verties[3], 0.5); + const topPoint = lerp([], verties[0], verties[1], 0.5); + const rightPoint = lerp([], verties[1], verties[2], 0.5); + const bottomPoint = lerp([], verties[2], verties[3], 0.5); + const centerPoint = lerp([], verties[0], verties[2], 0.5); + this.screenPoints = [ + leftPoint, + topPoint, + rightPoint, + bottomPoint, + centerPoint + ]; } - get text() { - return this.get("text"); + [POINTERSTART("$el .inset .inset-direction") + LEFT_BUTTON + MOVE("moveInsetRadius") + END("moveEndInsetRadius")](e) { + this.initializeInset(); + this.insetTarget = e.$dt.data("direction"); } - set text(value) { - this.set("text", value); + moveInsetRadius(dx, dy) { + const { left: left2, top: top2, right: right2, bottom: bottom2 } = this.state.inset; + let [leftPoint, topPoint, rightPoint, bottomPoint] = this.screenPoints; + if (this.insetTarget == "left") + leftPoint = add$1([], leftPoint, [dx, dy, 0]); + else if (this.insetTarget == "top") + topPoint = add$1([], topPoint, [dx, dy, 0]); + else if (this.insetTarget == "right") + rightPoint = add$1([], rightPoint, [dx, dy, 0]); + else if (this.insetTarget == "bottom") + bottomPoint = add$1([], bottomPoint, [dx, dy, 0]); + const newLeftPoint = this.$viewport.applyVertexInverse(leftPoint); + const newTopPoint = this.$viewport.applyVertexInverse(topPoint); + const newRightPoint = this.$viewport.applyVertexInverse(rightPoint); + const newBottomPoint = this.$viewport.applyVertexInverse(bottomPoint); + const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; + const [ + relativeLeftPosition, + relativeTopPosition, + relativeRightPosition, + relativeBottomPosition + ] = vertiesMap([newLeftPoint, newTopPoint, newRightPoint, newBottomPoint], inverseMatrix); + this.state.clippath.value = [ + top2.isPercent() ? Length.makePercent(relativeTopPosition[1], this.state.height) : Length.px(relativeTopPosition[1]), + right2.isPercent() ? Length.makePercent(this.state.width - relativeRightPosition[0], this.state.width) : Length.px(this.state.width - relativeRightPosition[0]), + bottom2.isPercent() ? Length.makePercent(this.state.height - relativeBottomPosition[1], this.state.height) : Length.px(this.state.height - relativeBottomPosition[1]), + left2.isPercent() ? Length.makePercent(relativeLeftPosition[0], this.state.width) : Length.px(relativeLeftPosition[0]) + ].join(" "); + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - get textLength() { - return this.get("textLength"); + moveEndInsetRadius() { + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - set textLength(value) { - this.set("textLength", value); + [POINTERSTART("$el .inset .inset-center") + LEFT_BUTTON + MOVE("moveInsetCenter") + END("moveEndInsetCenter")]() { + this.initializeInset(); } - get lengthAdjust() { - return this.get("lengthAdjust"); + moveInsetCenter(dx, dy) { + const { left: left2, top: top2, right: right2, bottom: bottom2 } = this.state.inset; + let [leftPoint, topPoint, rightPoint, bottomPoint] = this.screenPoints; + leftPoint = add$1([], leftPoint, [dx, dy, 0]); + topPoint = add$1([], topPoint, [dx, dy, 0]); + rightPoint = add$1([], rightPoint, [dx, dy, 0]); + bottomPoint = add$1([], bottomPoint, [dx, dy, 0]); + const newLeftPoint = this.$viewport.applyVertexInverse(leftPoint); + const newTopPoint = this.$viewport.applyVertexInverse(topPoint); + const newRightPoint = this.$viewport.applyVertexInverse(rightPoint); + const newBottomPoint = this.$viewport.applyVertexInverse(bottomPoint); + const inverseMatrix = this.$context.selection.current.absoluteMatrixInverse; + const [ + relativeLeftPosition, + relativeTopPosition, + relativeRightPosition, + relativeBottomPosition + ] = vertiesMap([newLeftPoint, newTopPoint, newRightPoint, newBottomPoint], inverseMatrix); + this.state.clippath.value = [ + top2.isPercent() ? Length.makePercent(relativeTopPosition[1], this.state.height) : Length.px(relativeTopPosition[1]), + right2.isPercent() ? Length.makePercent(this.state.width - relativeRightPosition[0], this.state.width) : Length.px(this.state.width - relativeRightPosition[0]), + bottom2.isPercent() ? Length.makePercent(this.state.height - relativeBottomPosition[1], this.state.height) : Length.px(this.state.height - relativeBottomPosition[1]), + left2.isPercent() ? Length.makePercent(relativeLeftPosition[0], this.state.width) : Length.px(relativeLeftPosition[0]) + ].join(" "); + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - set lengthAdjust(value) { - this.set("lengthAdjust", value); + moveEndInsetCenter(dx, dy) { + if (dx == 0 && dy == 0) { + switch (this.state.clippath.type) { + case ClipPathType.INSET: + const value2 = ClipPath.toCSS({ + type: ClipPathType.POLYGON, + value: `0% 0%, 100% 0%, 100% 100%, 0% 100%` + }); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); + break; + } + return; + } + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - get startOffset() { - return this.get("startOffset"); + templateInset(clippath) { + const current = this.$context.selection.current; + clippath.value = ClipPath.parseStyleForInset(clippath.value); + const top2 = clippath.value.top.toPx(current.screenHeight); + const left2 = clippath.value.left.toPx(current.screenWidth); + const right2 = Length.px(current.screenWidth - clippath.value.right.toPx(current.screenWidth)); + const bottom2 = Length.px(current.screenHeight - clippath.value.bottom.toPx(current.screenHeight)); + const verties = this.$viewport.applyVerties(vertiesMap([ + [left2, top2, 0], + [right2, top2, 0], + [right2, bottom2, 0], + [left2, bottom2, 0] + ], current.absoluteMatrix)); + const leftPoint = lerp([], verties[0], verties[3], 0.5); + const topPoint = lerp([], verties[0], verties[1], 0.5); + const rightPoint = lerp([], verties[1], verties[2], 0.5); + const bottomPoint = lerp([], verties[2], verties[3], 0.5); + const centerPoint = lerp([], verties[0], verties[2], 0.5); + return /* @__PURE__ */ createElementJsx("div", { + class: "inset" + }, /* @__PURE__ */ createElementJsx("div", { + class: "inset-back" + }, /* @__PURE__ */ createElementJsx("svg", { + style: "position:absolute;width:100%;height:100%;" + }, /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${verties[0][0]} ${verties[0][1]} + L ${verties[1][0]} ${verties[1][1]} + L ${verties[2][0]} ${verties[2][1]} + L ${verties[3][0]} ${verties[3][1]} + Z + ` + }))), /* @__PURE__ */ createElementJsx("div", { + class: "inset-direction", + "data-direction": "left", + style: { + left: Length.px(leftPoint[0]), + top: Length.px(leftPoint[1]) + } + }), /* @__PURE__ */ createElementJsx("div", { + class: "inset-direction", + "data-direction": "top", + style: { left: Length.px(topPoint[0]), top: Length.px(topPoint[1]) } + }), /* @__PURE__ */ createElementJsx("div", { + class: "inset-direction", + "data-direction": "right", + style: { + left: Length.px(rightPoint[0]), + top: Length.px(rightPoint[1]) + } + }), /* @__PURE__ */ createElementJsx("div", { + class: "inset-direction", + "data-direction": "bottom", + style: { + left: Length.px(bottomPoint[0]), + top: Length.px(bottomPoint[1]) + } + }), /* @__PURE__ */ createElementJsx("div", { + class: "inset-center", + style: { + left: Length.px(centerPoint[0]), + top: Length.px(centerPoint[1]) + } + })); } - set startOffset(value) { - this.set("startOffset", value); +} +class ClippathCircleEditorView extends ClippathInsetEditorView { + [POINTERSTART("$el .circle .circle-radius") + LEFT_BUTTON + MOVE("moveCircleRadius") + END("moveEndCircleRadius")]() { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.circle = ClipPath.parseStyleForCircle(this.state.clippath.value); } - enableHasChildren() { - return false; + moveCircleRadius(dx, dy) { + const current = this.$context.selection.current; + const { radius, x, y } = this.state.circle; + const oldX = x.toPx(current.screenWidth); + const oldY = y.toPx(current.screenHeight); + const r = Math.sqrt(Math.pow(current.screenWidth, 2) + Math.pow(current.screenHeight, 2)) / Math.sqrt(2); + const oldRadius = radius.toPx(current.screenWidth); + const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value + oldRadius.value, oldY, 0]], current.absoluteMatrix)); + const newRadius = verties[0]; + const newX = newRadius[0] + dx; + const newY = newRadius[1] + dy; + const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); + const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; + const distX = Math.abs(relativePosition[0] - oldX); + const result = [ + radius.isPercent() ? Length.makePercent(distX, r) : Length.px(distX), + x, + y + ]; + this.state.clippath.value = `${result[0]} at ${result[1]} ${result[2]}`; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - refreshMatrixCache() { - super.refreshMatrixCache(); - if (this.hasChangedField("d")) { - this.cachePath = new PathParser(this.get("d")); - this.cacheWidth = this.width; - this.cacheHeight = this.height; - } else if (this.hasChangedField("width", "height")) { - this.d = this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; - this.modelManager.setChanged("reset", this.id, { d: this.d }); - } + moveEndCircleRadius() { + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - convert(json) { - json = super.convert(json); - json.textLength = Length.parse(json.textLength); - json.startOffset = Length.parse(json.startOffset); - return json; + [POINTERSTART("$el .circle .circle-center") + LEFT_BUTTON + MOVE("moveCircleCenter") + END("moveEndCircleCenter")]() { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.circle = ClipPath.parseStyleForCircle(this.state.clippath.value); } - getDefaultTitle() { - return "TextPath"; + moveCircleCenter(dx, dy) { + const current = this.$context.selection.current; + const { radius, x, y } = this.state.circle; + const oldX = x.toPx(current.screenWidth); + const oldY = y.toPx(current.screenHeight); + const verties = this.$viewport.applyVerties(vertiesMap([[oldX, oldY, 0]], current.absoluteMatrix)); + const center2 = verties[0]; + const newX = center2[0] + dx; + const newY = center2[1] + dy; + const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); + const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; + const result = [ + radius, + x.isPercent() ? Length.makePercent(relativePosition[0], this.state.width) : Length.px(relativePosition[0]), + y.isPercent() ? Length.makePercent(relativePosition[1], this.state.height) : Length.px(relativePosition[1]) + ]; + this.state.clippath.value = `${radius} at ${result[1]} ${result[2]}`; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } -} -class Component extends LayerModel { - is(...itemType) { - if (itemType.includes("component")) { - return true; + moveEndCircleCenter(dx, dy) { + if (dx == 0 && dy == 0) { + switch (this.state.clippath.type) { + case ClipPathType.CIRCLE: + const value2 = ClipPath.toCSS({ + type: ClipPathType.ELLIPSE, + value: `${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}` + }); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); + break; + } + return; } - return super.is(...itemType); - } - getProps() { - return []; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - static createComponent({ - iconString, - title: title2 = "Unknown Title", - attrs = {}, - enableHasChildren = false - }) { - return class extends Component { - getIcon() { - return iconString || iconUse("add"); - } - getDefaultObject() { - return super.getDefaultObject(__spreadValues({ - itemType: "NewComponent", - name: "New Component" - }, attrs)); + templateCircle(clippath) { + const current = this.$context.selection.current; + const r = Math.sqrt(Math.pow(current.screenWidth, 2) + Math.pow(current.screenHeight, 2)) / Math.sqrt(2); + const radius = clippath.value.radius.toPx(r); + const x = clippath.value.x.toPx(current.screenWidth); + const y = clippath.value.y.toPx(current.screenHeight); + const verties = this.$viewport.applyVerties(vertiesMap([ + [x, y, 0], + [x.value + radius.value, y, 0] + ], current.absoluteMatrix)); + const center2 = verties[0]; + const radiusPos = verties[1]; + const dist$1 = dist(center2, radiusPos); + return /* @__PURE__ */ createElementJsx("div", { + class: "circle" + }, /* @__PURE__ */ createElementJsx("div", { + class: "circle-back", + style: { + left: Length.px(center2[0]), + top: Length.px(center2[1]), + width: Length.px(dist$1 * 2), + height: Length.px(dist$1 * 2) } - enableHasChildren() { - return enableHasChildren || false; + }), /* @__PURE__ */ createElementJsx("div", { + class: "circle-center", + style: { + left: center2[0] + "px", + top: center2[1] + "px" } - getDefaultTitle() { - return title2; + }), /* @__PURE__ */ createElementJsx("div", { + class: "circle-radius", + style: { + left: radiusPos[0] + "px", + top: radiusPos[1] + "px" } - }; + })); } } -const DEFAULT_TEMPLATE = ` - - - -`; -class TemplateModel extends Component { - getIcon() { - return obj$3.auto_awesome; - } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "template", - name: "New Template", - engine: "dom", - template: DEFAULT_TEMPLATE, - params: [] - }, obj2)); - } - get template() { - return this.get("template"); - } - set template(value) { - this.set("template", value); +class ClippathEllipseEditorView extends ClippathCircleEditorView { + [POINTERSTART("$el .ellipse .ellipse-radius-x") + LEFT_BUTTON + MOVE("moveEllipseRadiusX") + END("moveEndEllipseRadiusX")]() { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); } - get params() { - return this.get("params"); + moveEllipseRadiusX(dx, dy) { + const current = this.$context.selection.current; + const { radiusX, radiusY, x, y } = this.state.ellipse; + const oldX = x.toPx(current.screenWidth); + const oldY = y.toPx(current.screenHeight); + const oldRadiusX = radiusX.toPx(current.screenWidth); + const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value + oldRadiusX.value, oldY, 0]], current.absoluteMatrix)); + const newRadius = verties[0]; + const newX = newRadius[0] + dx; + const newY = newRadius[1] + dy; + const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); + const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; + const distX = Math.abs(relativePosition[0] - oldX); + const result = [ + radiusX.isPercent() ? Length.makePercent(distX, this.state.width) : Length.px(distX), + x, + y + ]; + this.state.clippath.value = `${result[0]} ${radiusY} at ${result[1]} ${result[2]}`; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - set params(value) { - this.set("params", value); + [POINTERSTART("$el .ellipse .ellipse-radius-y") + LEFT_BUTTON + MOVE("moveEllipseRadiusY") + END("moveEndEllipseRadiusX")]() { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); } - get engine() { - return this.get("engine"); + moveEllipseRadiusY(dx, dy) { + const current = this.$context.selection.current; + const { radiusX, radiusY, x, y } = this.state.ellipse; + const oldX = x.toPx(current.screenWidth); + const oldY = y.toPx(current.screenHeight); + const oldRadiusY = radiusY.toPx(current.screenHeight); + const verties = this.$viewport.applyVerties(vertiesMap([[oldX.value, oldY.value + oldRadiusY.value, 0]], current.absoluteMatrix)); + const newRadius = verties[0]; + const newX = newRadius[0] + dx; + const newY = newRadius[1] + dy; + const localPosition = this.$viewport.applyVertexInverse([newX, newY, 0]); + const relativePosition = vertiesMap([localPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; + const distY = Math.abs(relativePosition[1] - oldY); + const result = [ + radiusY.isPercent() ? Length.makePercent(distY, this.state.height) : Length.px(distY), + x, + y + ]; + this.state.clippath.value = `${radiusX} ${result[0]} at ${x} ${y}`; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - set engine(value) { - this.set("engine", value); + moveEndEllipseRadiusX() { + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - enableHasChildren() { - return false; + [POINTERSTART("$el .ellipse .ellipse-center") + LEFT_BUTTON + MOVE("moveEllipseCenter") + END("moveEndEllipseCenter")](e) { + const current = this.$context.selection.current; + this.state.current; + this.state.width = current.screenWidth; + this.state.height = current.screenHeight; + this.state.clippath = ClipPath.parseStyle(current["clip-path"]); + this.state.ellipse = ClipPath.parseStyleForEllipse(this.state.clippath.value); + this.state.left = Length.parse(e.$dt.css("left")).value; + this.state.top = Length.parse(e.$dt.css("top")).value; } - getDefaultTitle() { - return "Template"; + moveEllipseCenter(dx, dy) { + const { radiusX, radiusY, x, y } = this.state.ellipse; + const newLeft = this.state.left + dx; + const newTop = this.state.top + dy; + const worldPosition = this.$viewport.applyVertexInverse([ + newLeft, + newTop, + 0 + ]); + const relativePosition = vertiesMap([worldPosition], this.$context.selection.current.absoluteMatrixInverse)[0]; + const result = [ + radiusX, + radiusY, + x.isPercent() ? Length.makePercent(relativePosition[0], this.state.width) : Length.px(relativePosition[0]), + y.isPercent() ? Length.makePercent(relativePosition[1], this.state.height) : Length.px(relativePosition[1]) + ]; + this.state.clippath.value = `${radiusX} ${radiusY} at ${result[2]} ${result[3]}`; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.emit("setAttribute", this.$context.selection.packByValue(value)); } - editable(editablePropertyName) { - switch (editablePropertyName) { - case "font": - return true; + moveEndEllipseCenter(dx, dy) { + if (dx == 0 && dy == 0) { + switch (this.state.clippath.type) { + case ClipPathType.ELLIPSE: + const value2 = ClipPath.toCSS({ + type: ClipPathType.INSET, + value: "" + }); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value2)); + break; + } + return; } - return super.editable(editablePropertyName); - } -} -class TextModel extends LayerModel { - getIcon() { - return obj$3.title; + const value = ClipPath.toCSS(this.state.clippath); + this.$commands.executeCommand("setAttribute", "change clippath", this.$context.selection.packByValue(value)); } - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "text", - name: "New Text", - elementType: "p", - content: "" - }, obj2)); + templateEllipse(clippath) { + const current = this.$context.selection.current; + const radiusX = clippath.value.radiusX.toPx(current.screenWidth); + const radiusY = clippath.value.radiusY.toPx(current.screenHeight); + const x = clippath.value.x.toPx(current.screenWidth); + const y = clippath.value.y.toPx(current.screenHeight); + const verties = this.$viewport.applyVerties(vertiesMap([ + [x, y, 0], + [x.value + radiusX.value, y, 0], + [x.value, y.value + radiusY.value, 0] + ], current.absoluteMatrix)); + const center2 = verties[0]; + const radiusXPos = verties[1]; + const radiusYPos = verties[2]; + const distX = dist(center2, radiusXPos); + const distY = dist(center2, radiusYPos); + const direction2 = subtract([], radiusXPos, center2); + const angle = calculateAngle(direction2[0], direction2[1]); + return /* @__PURE__ */ createElementJsx("div", { + class: "ellipse" + }, /* @__PURE__ */ createElementJsx("div", { + class: "ellipse-back" + }, /* @__PURE__ */ createElementJsx("svg", { + style: "position:absolute;width:100%;height:100%;" + }, /* @__PURE__ */ createElementJsx("ellipse", { + cx: center2[0], + cy: center2[1], + rx: distX, + ry: distY, + transform: `rotate(${angle} ${center2[0]} ${center2[1]})` + }))), /* @__PURE__ */ createElementJsx("div", { + class: "ellipse-center", + style: { + left: center2[0] + "px", + top: center2[1] + "px" + } + }), /* @__PURE__ */ createElementJsx("div", { + class: "ellipse-radius ellipse-radius-x", + style: { + left: radiusXPos[0] + "px", + top: radiusXPos[1] + "px" + } + }), /* @__PURE__ */ createElementJsx("div", { + class: "ellipse-radius ellipse-radius-y", + style: { + left: radiusYPos[0] + "px", + top: radiusYPos[1] + "px" + } + })); } - get content() { - return this.get("content"); +} +class ClippathEditorView$1 extends ClippathEllipseEditorView { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--clippath-editor-view " + }); } - set content(value) { - this.set("content", value); + [LOAD("$el") + DOMDIFF]() { + const current = this.$context.selection.current; + if (!current) { + return ""; + } + const clippath = ClipPath.parseStyle(current["clip-path"]); + switch (clippath.type) { + case ClipPathType.CIRCLE: + clippath.value = ClipPath.parseStyleForCircle(clippath.value); + return this.templateCircle(clippath); + case ClipPathType.ELLIPSE: + clippath.value = ClipPath.parseStyleForEllipse(clippath.value); + return this.templateEllipse(clippath); + case ClipPathType.POLYGON: + return this.templatePolygon(clippath); + case ClipPathType.INSET: + return this.templateInset(clippath); + } + return /* @__PURE__ */ createElementJsx("div", null); } - enableHasChildren() { - return false; + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refresh(); } - getDefaultTitle() { - return "Text"; + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); } - editable(editablePropertyName) { - switch (editablePropertyName) { - case "svg-item": - case "transform": - case "transformOrigin": - case "perspective": - case "perspectiveOrigin": - case "layout": - return false; - case "font": - case "fontSpacing": - case "textStyle": - case "textShadow": - case "textFill": - case "textClip": - case "backgroundImage": - case "box-model": - case "border": - case "borderRadius": - case "backdropFilter": - case "pattern": - return true; + checkClipPath() { + if (this.$el.isShow() === false) + return false; + const current = this.$context.selection.current; + if (!current) + return false; + return this.$context.selection.current.hasChangedField("clip-path", "angle", "x", "y", "width", "height"); + } + [SUBSCRIBE(UPDATE_CANVAS) + IF("checkClipPath") + DEBOUNCE(10)]() { + this.refresh(); + } + [CLICK("$el")](e) { + if (Dom.create(e.target).isTag("svg") || Dom.create(e.target).hasClass("elf--clippath-editor-view")) { + this.trigger("hideClippathEditorView"); } - return super.editable(editablePropertyName); + } + [SUBSCRIBE("hideClippathEditorView")]() { + this.$el.hide(); + } + [SUBSCRIBE("showClippathEditorView")]() { + this.$el.show(); + this.refresh(); } } -function defaultItems(editor) { - editor.registerItem("project", Project); - editor.registerItem("artboard", ArtBoard); - editor.registerItem("rect", RectLayer); - editor.registerItem("circle", CircleLayer); - editor.registerItem("image", ImageLayer); - editor.registerItem("text", TextModel); - editor.registerItem("boolean-path", BooleanPathModel); - editor.registerItem("svg-path", PathModel); - editor.registerItem("svg-text", SVGTextItem); - editor.registerItem("svg-textpath", SVGTextPathItem); - editor.registerItem("template", TemplateModel); - editor.registerItem("polygon", PolygonModel); - editor.registerItem("star", StarModel); - editor.registerItem("spline", SplineModel); +function ClippathEditorView(editor) { + editor.registerUI("canvas.view", { + ClippathEditorView: ClippathEditorView$1 + }); } -var texture = ` - - - -`; -var TextureView$1 = ""; -const cssPatterns = [ - { - itemType: "circle", - name: "base", - attrs: { - backgroundColor: "#ececec" - } - }, - { - itemType: "circle", - name: "base", - attrs: { - backgroundColor: "black" - } - }, - { - itemType: "circle", - name: "base", - attrs: { - backgroundColor: "red" - } - }, - { - itemType: "circle", - name: "base", - attrs: { - backgroundImage: ` - background-image: linear-gradient(to right, #ececec, black 100%); - ` - } - }, - { - itemType: "circle", - name: "base", - attrs: { - backgroundImage: ` - background-image: linear-gradient(to right, #ececec, black 100%); - `, - border: ` - border:10px solid black; - ` - } +var CodeViewProperty$1 = ""; +class CodeViewProperty extends BaseProperty { + getTitle() { + return this.$i18n("code.view.property.title"); } -]; -class CSSTextureView extends EditorElement { - template() { + checkConfig() { + return this.$config.is("inspector.selectedValue", "code"); + } + [CONFIG("inspector.selectedValue")]() { + this.refresh(); + } + [SUBSCRIBE(UPDATE_CANVAS, REFRESH_SELECTION) + IF("checkConfig") + DEBOUNCE(100)]() { + this.refresh(); + } + getBody() { return ` -
+
+
+
+
`; } - [LOAD("$css-list")]() { - return cssPatterns.map((it, index2) => { - const svg = this.$editor.renderer("svg").render(this.$model.createModel(__spreadValues({ - itemType: it.itemType, - width: 70, - height: 70 - }, it.attrs), false)); - return `
${svg}
`; - }); + [LOAD("$code") + DOMDIFF]() { + return [ + this.$editor.renderer("html").codeview(this.$context.selection.current) + ]; } - [CLICK("$css-list .pattern-item")](e) { - const index2 = +e.$dt.data("index"); - const pattern = cssPatterns[index2]; - e.$dt.onlyOneClass("selected"); - this.$commands.emit("addLayerView", pattern.itemType, pattern.attrs); + [LOAD("$svg") + DOMDIFF]() { + return [ + this.$editor.renderer("svg").codeview(this.$context.selection.current) + ]; } } -const svgPatterns = [ - { - itemType: "svg-path", - name: "path", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - d: PathParser.makeRect(0, 0, 80, 80).d - } - }, - { - itemType: "svg-path", - name: "line", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - d: PathParser.makeLine(0, 0, 80, 80).d - } - }, - { - itemType: "svg-path", - name: "line 2", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - d: PathParser.makeLine(0, 80, 80, 0).d - } - }, - { - itemType: "svg-path", - name: "circle", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - originWidth: 80, - originHeight: 80, - d: PathParser.makeCircle(0, 0, 80, 80).d - } - }, - { - itemType: "polygon", - name: "polygon - 3", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 3, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 3).d - } - }, - { - itemType: "polygon", - name: "polygon - 4", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 4, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 4).d - } - }, - { - itemType: "polygon", - name: "polygon - 4", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 5, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 5).d - } - }, - { - itemType: "polygon", - name: "polygon - 4", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 6, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 6).d - } - }, - { - itemType: "polygon", - name: "polygon - 4", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 7, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 7).d - } - }, - { - itemType: "polygon", - name: "polygon - 4", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - count: 12, - originWidth: 80, - originHeight: 80, - d: PathParser.makePolygon(80, 80, 12).d - } - }, - { - itemType: "star", - name: "star - 5", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - originWidth: 80, - originHeight: 80, - count: 5, - radius: 0.5, - d: PathParser.makeStar(80, 80, 5, 0.5).d +function codeview(editor) { + editor.registerUI("inspector.tab.code", { + CodeViewProperty + }); +} +function _currentProject(editor, callback) { + var project2 = editor.context.selection.currentProject; + if (project2) { + var timeline = project2.getSelectedTimeline(); + callback && callback(project2, timeline); + } +} +var __glob_0_0$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": _currentProject +}, Symbol.toStringTag, { value: "Module" })); +function _doForceRefreshSelection(editor) { + editor.emit("refreshAll"); +} +var __glob_0_1$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": _doForceRefreshSelection +}, Symbol.toStringTag, { value: "Module" })); +var addArtBoard = { + command: "addArtBoard", + execute: (editor, obj2 = {}, center2 = null) => { + var project2 = editor.context.selection.currentProject; + if (!project2) { + project2 = editor.add(editor.createModel({ itemType: "project" })); + editor.context.selection.selectProject(project2); } - }, - { - itemType: "star", - name: "curved star - 5", - attrs: { - backgroundColor: "transparent", - stroke: "black", - "stroke-width": 2, - fill: "#ececec", - originWidth: 80, - originHeight: 80, - count: 5, - radius: 0.5, - d: PathParser.makeCurvedStar(80, 80, 5, 0.5).d + var artboard2 = project2.appendChild(editor.createModel(__spreadValues({ + itemType: "artboard", + x: 300, + y: 200, + width: 375, + height: 667 + }, obj2))); + if (center2) { + artboard2.reset({ + x: 0, + y: 0 + }); + artboard2.moveByCenter(center2); } + editor.context.selection.select(artboard2); + _doForceRefreshSelection(editor); } -]; -class SVGTextureView extends EditorElement { - template() { - return ` -
- `; +}; +var __glob_0_2$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addArtBoard +}, Symbol.toStringTag, { value: "Module" })); +var addBackgroundColor = { + command: "addBackgroundColor", + execute: function(editor, color2, id = null) { + editor.context.commands.executeCommand("setAttribute", "add background color", editor.context.selection.packByValue({ + backgroundColor: color2 + }, id)); } - [LOAD("$svg-list")]() { - return svgPatterns.map((it, index2) => { - let d = it.attrs.d; - if (d) { - const path = PathParser.fromSVGString(d); - if (it.attrs.originWidth) { - path.scale(60 / it.attrs.originWidth, 60 / it.attrs.originHeight); - } else { - const rect2 = path.rect(); - path.scale(70 / rect2.width, 70 / rect2.height); - } - d = path.d; - } - const svg = this.$editor.renderer("svg").render(this.$model.createModel(__spreadProps(__spreadValues({ - itemType: it.itemType, - width: 80, - height: 80 - }, it.attrs), { - d - }), false)); - return `
${svg}
`; +}; +var __glob_0_3$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addBackgroundColor +}, Symbol.toStringTag, { value: "Module" })); +var addBackgroundImageAsset = { + command: "addBackgroundImageAsset", + execute: function(editor, url, id = null) { + var items = editor.context.selection.itemsByIds(id); + let itemsMap = {}; + items.forEach((item) => { + let images = BackgroundImage.parseStyle(STRING_TO_CSS(item.backgroundImage)); + images.unshift(new BackgroundImage({ + image: new URLImageResource({ url }) + })); + itemsMap[item.id] = { + "background-image": BackgroundImage.join(images) + }; }); + editor.context.commands.emit("history.setAttribute", "add background image", itemsMap); } - [CLICK("$svg-list .pattern-item")](e) { - const index2 = +e.$dt.data("index"); - const pattern = svgPatterns[index2]; - e.$dt.onlyOneClass("selected"); - this.$commands.emit("addLayerView", pattern.itemType, pattern.attrs); +}; +var __glob_0_4$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addBackgroundImageAsset +}, Symbol.toStringTag, { value: "Module" })); +var addBackgroundImageGradient = { + command: "addBackgroundImageGradient", + execute: function(editor, gradient2, id = null) { + var items = editor.context.selection.itemsByIds(id); + let itemsMap = {}; + items.forEach((item) => { + let images = BackgroundImage.parseStyle(STRING_TO_CSS(item.backgroundImage)); + images.unshift(new BackgroundImage({ + image: BackgroundImage.parseImage(gradient2) + })); + itemsMap[item.id] = { + backgroundImage: BackgroundImage.join(images) + }; + }); + editor.context.commands.emit("history.setAttribute", "add gradient", itemsMap); } -} -class TextureView extends EditorElement { - template() { - const isItemMode = this.$config.get("editor.design.mode") === "item"; - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--texture" - }, /* @__PURE__ */ createElementJsx(Tabs, { - ref: "$tab", - selectedValue: isItemMode ? "svg" : "css", - onchange: (value) => { - this.$config.set("inspector.selectedValue", value); - } - }, isItemMode ? "" : /* @__PURE__ */ createElementJsx(TabPanel, { - value: "css", - title: "CSS" - }, /* @__PURE__ */ createElementJsx("object", { - refClass: "CSSTextureView", - ref: "$css" - })), /* @__PURE__ */ createElementJsx(TabPanel, { - value: "svg", - title: "SVG" - }, /* @__PURE__ */ createElementJsx("object", { - refClass: "SVGTextureView", - ref: "$svg" - })))); +}; +var __glob_0_5$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addBackgroundImageGradient +}, Symbol.toStringTag, { value: "Module" })); +const MAX_CACHE_COUNT$1 = 1e3; +const cachedPatternMap = /* @__PURE__ */ new Map(); +class PatternCache { + static has(key) { + return cachedPatternMap.has(key); } -} -function defaultPatterns(editor) { - editor.registerElement({ - TextureView, - CSSTextureView, - SVGTextureView - }); - editor.registerUI("leftbar.tab", { - TextureView: { - value: "texture", - title: "Texture", - icon: texture, - designMode: ["design", "item"] + static get(key) { + return cachedPatternMap.get(key); + } + static set(key, parsedValue) { + if (cachedPatternMap.size > MAX_CACHE_COUNT$1) { + cachedPatternMap.clear(); } - }); - editor.registerUI("leftbar.tab.texture", { - TextureView - }); + cachedPatternMap.set(key, parsedValue); + } } -var ExportProperty$1 = ""; -class ExportProperty extends BaseProperty { - getTitle() { - return this.$i18n("export.property.title"); +const customFuncMap = { + check: makeGroupFunction("check"), + grid: makeGroupFunction("grid"), + dot: makeGroupFunction("dot"), + "cross-dot": makeGroupFunction("cross-dot"), + "diagonal-line": makeGroupFunction("diagonal-line"), + "vertical-line": makeGroupFunction("vertical-line"), + "horizontal-line": makeGroupFunction("horizontal-line") +}; +class Pattern extends PropertyItem { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "pattern" + }, obj2)); + } + toString() { + return `${this.json.type}(${this.json.value || ""})`; + } + static parse(obj2) { + var PatternClass = PatternClassName[obj2.type]; + if (PatternClass) { + return new PatternClass(obj2); + } + } + static parseStyle(pattern) { + var patterns2 = []; + if (!pattern || pattern === "undefined") + return patterns2; + pattern = pattern.trim(); + if (PatternCache.has(pattern)) { + return PatternCache.get(pattern); + } + const result = parseValue(pattern, { + customFuncMap + }); + result.forEach((item, index2) => { + const [ + size2, + position2, + foreColor, + backColor, + blendMode = [{ matchedString: "normal" }], + lineSize = [ + { parsed: Length.parse("1px") }, + { parsed: Length.parse("1px") } + ] + ] = item.parameters; + patterns2[index2] = Pattern.parse({ + type: item.type, + x: position2[0].parsed, + y: position2[1].parsed, + width: size2[0].parsed, + height: size2[1].parsed, + foreColor: foreColor[0].matchedString, + backColor: backColor[0].matchedString, + blendMode: blendMode[0].matchedString, + lineWidth: lineSize[0].parsed, + lineHeight: lineSize[1].parsed + }); + }); + PatternCache.set(pattern, patterns2); + return patterns2; } - isFirstShow() { - return true; + static join(list2) { + return list2.map((it) => Pattern.parse(it)).join(" "); } - getClassName() { - return "elf--export-property"; + static toCSS(str) { + let list2 = []; + Pattern.parseStyle(str).forEach((it) => { + list2.push.apply(list2, BackgroundImage.parseStyle(STRING_TO_CSS(it.toCSS()))); + }); + return BackgroundImage.joinCSS(list2); } - getBody() { - return ` -
- - -
-
- - -
- `; +} +class BasePattern extends Pattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "base", + x: 0, + y: 0, + width: 20, + height: 20, + lineWidth: 1, + lineHeight: 1, + foreColor: "black", + backColor: "white", + blendMode: "normal" + }); } - [CLICK("$svg")]() { - this.$commands.emit("downloadSVG"); + convert(json) { + json = super.convert(json); + json.width = Length.parse(json.width); + json.height = Length.parse(json.height); + json.lineWidth = Length.parse(json.lineWidth); + json.lineHeight = Length.parse(json.lineHeight); + json.x = Length.parse(json.x); + json.y = Length.parse(json.y); + return json; } - [CLICK("$png")]() { - this.$commands.emit("downloadPNG"); + toString() { + var { + type, + width: width2, + height: height2, + x, + y, + foreColor, + backColor, + blendMode, + lineWidth, + lineHeight + } = this.json; + return `${type}(${width2} ${height2}, ${x} ${y}, ${foreColor}, ${backColor}, ${blendMode}, ${lineWidth} ${lineHeight})`; } } -function exportResource(editor) { - editor.registerUI("inspector.tab.style", { - ExportProperty - }); +class CheckPattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "check" + }); + } + toCSS() { + let { width: width2, height: height2, x, y, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: repeating-linear-gradient(45deg, ${foreColor} 25%, ${backColor} 25%, ${backColor} 75%, ${foreColor} 75%, ${foreColor} 100%),repeating-linear-gradient(45deg, ${foreColor} 25%, ${backColor} 25%, ${backColor} 75%, ${foreColor} 75%, ${foreColor} 100%); + background-position: 0px 0px, ${x} ${y}; + background-size: ${width2} ${height2}, ${width2} ${height2}; + background-blend-mode: ${blendMode}, ${blendMode}; + `; + } } -var FillEditorView$1 = ""; -const spreadMethodList = [ - SpreadMethodType.PAD, - SpreadMethodType.REFLECT, - SpreadMethodType.REPEAT -]; -const TOOL_SIZE$1 = 20; -class FillBaseEditor extends EditorElement { - initializeData() { - const current = this.$context.selection.current; - this.state.currentMatrix = current.matrix; - this.state.imageResult = current.createFragmentMatrix(this.state.key); - this.state.originalResult = current.createFragmentMatrix(this.state.key); +class GridPattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "grid" + }); + } + toCSS() { + let { + width: width2, + height: height2, + lineWidth, + lineHeight, + backColor, + foreColor, + blendMode + } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: linear-gradient(to bottom,${foreColor} ${lineHeight}, ${backColor} ${lineHeight}),linear-gradient(to right, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); + background-size: ${width2 / 2}px ${height2 / 2}px, ${width2 / 2}px ${height2 / 2}px; + background-blend-mode: ${blendMode}, ${blendMode}; + `; } } -class FillTimingStepEditor extends FillBaseEditor { - [POINTERSTART("$el .step-point") + MOVE("moveStepPoint") + END("moveEndStepPoint")](e) { - this.$el.toggleClass("dragging", true); - this.initializeData(); - const colorStepIndex = +e.$dt.data("colorstep-index"); - this.localColorStep = this.state.imageResult.image.colorsteps[colorStepIndex]; - this.localColorStepTimingCount = this.localColorStep.timing.count; - this.localColorCubicBezierTimingCount = this.localColorStep.timingCount; +class DotPattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "dot" + }); } - moveStepPoint(dx, dy) { - const dist$1 = (dx < 0 ? -1 : 1) * Math.ceil(dist([0, 0, 0], [dx, dy, 0]) / 10); - switch (this.localColorStep.timing.name) { - case TimingFunction.LINEAR: - break; - case TimingFunction.STEPS: - this.localColorStep.timing.count = Math.max(this.localColorStepTimingCount + dist$1, 1); - break; - default: - this.localColorStep.timingCount = Math.max(this.localColorCubicBezierTimingCount + dist$1, 1); - break; - } - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); + toCSS() { + let { width: width2, height: height2, lineWidth, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); + background-size: ${width2 / 2}px ${height2 / 2}px; + background-blend-mode: ${blendMode}; + `; } - makeTimingString(timing) { - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.EASE: - case TimingFunction.EASE_IN: - case TimingFunction.EASE_OUT: - case TimingFunction.EASE_IN_OUT: - return `${timing.name}`; - default: - return `cubic-bezier(${timing.x1}, ${timing.y1}, ${timing.x2}, ${timing.y2})`; - } +} +class CrossDotPattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "cross-dot" + }); } - moveEndStepPoint(dx, dy) { - if (dx === 0 && dy === 0) { - const { timing } = this.localColorStep; - switch (timing.name) { - case TimingFunction.STEPS: - this.localColorStep.timing.direction = this.localColorStep.timing.direction === "start" ? "end" : "start"; - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); - break; - case TimingFunction.LINEAR: - break; - case TimingFunction.PATH: - this.emit("showComponentPopup", { - title: "Path Editor", - width: 400, - inspector: [ - { - key: "path", - editor: "path", - editorOptions: { - height: 160 - }, - defaultValue: timing.d - } - ], - changeEvent: (key, value) => { - this.localColorStep.timing = parseOneValue(`path(${value})`).parsed; - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); - } - }); - break; - default: - this.emit("showComponentPopup", { - title: "Cubic Bezier", - width: 220, - inspector: [ - { - key: "timing", - editor: "cubic-bezier", - editorOptions: { - isAnimating: false - }, - defaultValue: this.makeTimingString(timing) - } - ], - changeEvent: (key, value) => { - this.localColorStep.timing = parseOneValue(value).parsed; - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); - } - }); - this.$el.toggleClass("dragging", false); - return; - } - } - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); - this.$el.toggleClass("dragging", false); + toCSS() { + let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}),radial-gradient(${foreColor} ${lineWidth}, ${backColor} ${lineWidth}); + background-size: ${width2} ${height2},${width2} ${height2}; + background-position: 0px 0px, ${x} ${y}; + background-blend-mode: multiply, ${blendMode}; + `; } } -class FillColorstepEditor extends FillTimingStepEditor { - [KEYUP("$el .colorstep")](e) { - const index2 = +e.$dt.data("index"); - switch (e.code) { - case "Delete": - case "Backspace": - this.removeStep(index2); - break; - case "BracketRight": - this.sortToRight(index2); - break; - case "BracketLeft": - this.sortToLeft(index2); - break; - case "Equal": - this.appendColorStep(index2); - break; - case "Minus": - this.prependColorStep(index2); - break; - } +class DiagonalLinePattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "diagonal-line" + }); } - removeStep(currentIndex) { - const image2 = this.state.imageResult.image; - image2.removeColorStepByIndex(currentIndex); - this.updateColorStepStatus(image2, -1); + toCSS() { + let { width: width2, height: height2, x, lineWidth, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: repeating-linear-gradient(${x}, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} 0px, ${backColor} 50%); + background-size: ${width2} ${height2}; + background-blend-mode: ${blendMode}; + `; } - sortToRight() { - const image2 = this.state.imageResult.image; - image2.sortToRight(); - this.updateColorStepStatus(image2, -1); +} +class VerticalLinePattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "vertical-line" + }); } - sortToLeft() { - const image2 = this.state.imageResult.image; - image2.sortToLeft(); - this.updateColorStepStatus(image2, -1); + toCSS() { + let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: repeating-linear-gradient(to right, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}, ${backColor} 100%); + background-size: ${width2} ${height2}; + background-position: ${x} ${y}; + background-blend-mode: ${blendMode}; + `; } - appendColorStep(currentIndex) { - const nextIndex = currentIndex + 1; - const image2 = this.state.imageResult.image; - const currentColorStep = image2.colorsteps[currentIndex]; - const nextColorStep = image2.colorsteps[nextIndex]; - let newIndex = -1; - if (!nextColorStep) { - if (currentColorStep.percent !== 100) { - newIndex = image2.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); - } - } else { - newIndex = image2.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); - } - this.updateColorStepStatus(image2, newIndex); +} +class HorizontalLinePattern extends BasePattern { + getDefaultObject() { + return super.getDefaultObject({ + type: "horizontal-line" + }); } - prependColorStep(currentIndex) { - const prevIndex = currentIndex - 1; - const image2 = this.state.imageResult.image; - const currentColorStep = image2.colorsteps[currentIndex]; - const prevColorStep = image2.colorsteps[prevIndex]; - let newIndex = -1; - if (!prevColorStep) { - if (currentColorStep.percent !== 0) { - newIndex = image2.insertColorStep(currentColorStep.percent); - } - } else { - newIndex = image2.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); - } - this.updateColorStepStatus(image2, newIndex); + toCSS() { + let { width: width2, height: height2, x, y, lineWidth, backColor, foreColor, blendMode } = this.json; + backColor = backColor || "transparent"; + foreColor = foreColor || "black"; + return ` + background-image: repeating-linear-gradient( to bottom, ${foreColor} 0px, ${foreColor} ${lineWidth}, ${backColor} ${lineWidth}, ${backColor} 100%); + background-position: ${x} ${y}; + background-size: ${width2} ${height2}; + background-blend-mode: ${blendMode}; + `; } - [POINTERSTART("$el .point") + MOVE("movePoint") + END("moveEndPoint")](e) { - this.$el.toggleClass("dragging", true); - this.initializeData(); - const result = this.state.imageResult; - this.pointTarget = e.$dt.data("type"); - this.startPoint = this.$viewport.applyVertex(result.startPoint); - this.endPoint = this.$viewport.applyVertex(result.endPoint); - this.dist = dist(this.startPoint, this.endPoint); - if (result.shapePoint) { - this.shapePoint = this.$viewport.applyVertex(result.shapePoint); - this.shapeDist = dist(this.startPoint, this.shapePoint); - } +} +const PatternClassName = { + check: CheckPattern, + grid: GridPattern, + dot: DotPattern, + "cross-dot": CrossDotPattern, + "diagonal-line": DiagonalLinePattern, + "vertical-line": VerticalLinePattern, + "horizontal-line": HorizontalLinePattern +}; +var addBackgroundImagePattern = { + command: "addBackgroundImagePattern", + execute: function(editor, pattern, id = null) { + var items = editor.context.selection.itemsByIds(id); + let itemsMap = {}; + items.forEach((item) => { + itemsMap[item.id] = { + pattern: Pattern.join([ + ...Pattern.parseStyle(pattern), + ...Pattern.parseStyle(item.pattern) + ]) + }; + }); + editor.context.commands.emit("history.setAttribute", "add pattern", itemsMap); } - calculateNextPoint(nextPoint) { - if (this.$config.get("bodyEvent").shiftKey) { - let tempStartPoint, tempEndPoint; - if (this.pointTarget === "start") { - tempStartPoint = this.endPoint; - tempEndPoint = nextPoint; - } else { - tempStartPoint = this.startPoint; - tempEndPoint = nextPoint; - } - const newDist = subtract([], tempEndPoint, tempStartPoint); - let newAngle = calculateAngle360(newDist[0], newDist[1]) - 90; - newAngle = (newAngle + 360) % 360; - newAngle -= newAngle % this.$config.get("fixed.gradient.angle"); - nextPoint = vertiesMap([add$1([], tempStartPoint, [0, -this.dist, 0])], calculateRotationOriginMat4(newAngle, tempStartPoint))[0]; - } - return nextPoint; +}; +var __glob_0_6$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addBackgroundImagePattern +}, Symbol.toStringTag, { value: "Module" })); +function addCustomComponent(editor, obj2 = {}, center2 = null) { + var project2 = editor.context.selection.currentProject; + var customComponent = project2.appendChild(editor.createModel(__spreadValues({ + x: 300, + y: 200, + width: 375, + height: 667 + }, obj2))); + if (center2) { + customComponent.reset({ + x: 0, + y: 0 + }); + customComponent.moveByCenter(center2); } - moveShapePoint(dx, dy) { - const targetPoint = this.shapePoint; - const nextPoint = this.calculateNextPoint(add$1([], targetPoint, [dx, dy, 0])); - const width2 = this.state.currentMatrix.width; - const height2 = this.state.currentMatrix.height; - const image2 = this.state.imageResult.image; - let newX, newY; - switch (image2.type) { - case GradientType.RADIAL: - const dist$1 = dist(this.startPoint, nextPoint); - const lastPoint = lerp$1([], this.startPoint, this.shapePoint, dist$1 / this.shapeDist); - const [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(lastPoint)], this.state.currentMatrix.absoluteMatrixInverse); - newX = Length.makePercent(worldPosition[0], width2); - newY = Length.makePercent(worldPosition[1], height2); - image2.reset({ - x3: newX, - y3: newY - }); - break; + editor.context.selection.select(customComponent); + _doForceRefreshSelection(editor); +} +var __glob_0_7$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addCustomComponent +}, Symbol.toStringTag, { value: "Module" })); +function addImage(editor, rect2 = {}, containerItem = void 0) { + editor.context.commands.emit("newComponent", "image", rect2, true, containerItem); +} +var __glob_0_8$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addImage +}, Symbol.toStringTag, { value: "Module" })); +function loadOriginalImage(obj2, callback) { + var img = new window.Image(); + img.onload = () => { + var info = { + id: obj2.id, + local: obj2.local, + naturalWidth: img.naturalWidth, + naturalHeight: img.naturalHeight, + width: img.naturalWidth, + height: img.naturalHeight + }; + callback && callback(info, img); + }; + img.onerror = (e) => { + console.log(e, e.message); + }; + img.src = obj2.local; +} +var addImageAssetItem = { + command: "addImageAssetItem", + execute: function(editor, imageObject, rect2 = {}, containerItem = void 0) { + var project2 = editor.context.selection.currentProject; + if (project2) { + project2.createImage(imageObject); + editor.context.commands.emit("addImageAsset"); + loadOriginalImage(imageObject, (info) => { + const rate = rect2.width / info.width; + const width2 = rect2.width; + const height2 = info.height * rate; + editor.context.commands.emit("addImage", __spreadProps(__spreadValues(__spreadValues({ + src: imageObject.id + }, info), rect2), { + width: width2, + height: height2 + }), containerItem); + }); } - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); } - movePoint(dx, dy) { - if (this.pointTarget === "shape") { - return this.moveShapePoint(dx, dy); +}; +var __glob_0_9$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addImageAssetItem +}, Symbol.toStringTag, { value: "Module" })); +function addLayer(editor, layer, isSelected = true, containerItem) { + if (!containerItem) { + containerItem = editor.context.selection.current || editor.context.selection.currentProject; + } + if (containerItem) { + if (containerItem.isNot("project") && !containerItem.enableHasChildren()) { + containerItem = containerItem.parent; } - const targetPoint = this.pointTarget === "start" ? this.startPoint : this.endPoint; - let nextPoint = this.calculateNextPoint(add$1([], targetPoint, [dx, dy, 0])); - var [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.state.currentMatrix.absoluteMatrixInverse); - const width2 = this.state.currentMatrix.width; - const height2 = this.state.currentMatrix.height; - const image2 = this.state.imageResult.image; - switch (image2.type) { - case GradientType.RADIAL: - var newX, newY, newX2, newY2, newX3, newY3; - if (this.pointTarget === "start") { - newX = image2.x1.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); - newY = image2.y1.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); - const nextEndPoint = this.calculateNextPoint(add$1([], this.endPoint, [dx, dy, 0])); - const [newEndPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextEndPoint)], this.state.currentMatrix.absoluteMatrixInverse); - newX2 = image2.x2.isPercent() ? Length.makePercent(newEndPosition[0], width2) : Length.px(newEndPosition[0]); - newY2 = image2.y2.isPercent() ? Length.makePercent(newEndPosition[1], height2) : Length.px(newEndPosition[1]); - const nextShapePoint = this.calculateNextPoint(add$1([], this.shapePoint, [dx, dy, 0])); - const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); - newX3 = image2.x3.isPercent() ? Length.makePercent(newShapePosition[0], width2) : Length.px(newShapePosition[0]); - newY3 = image2.y3.isPercent() ? Length.makePercent(newShapePosition[1], height2) : Length.px(newShapePosition[1]); - image2.reset({ - x1: newX, - y1: newY, - x2: newX2, - y2: newY2, - x3: newX3, - y3: newY3 - }); - } else if (this.pointTarget === "end") { - if (this.$config.get("bodyEvent").altKey) { - const dist$1 = dist(this.startPoint, nextPoint); - nextPoint = lerp$1([], this.startPoint, this.endPoint, dist$1 / this.dist); - var [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.state.currentMatrix.absoluteMatrixInverse); - } - newX = Length.makePercent(worldPosition[0], width2); - newY = Length.makePercent(worldPosition[1], height2); - image2.reset({ - x2: newX, - y2: newY - }); - const lastDist = dist(this.startPoint, nextPoint); - const unitVector = lerp$1([], this.startPoint, nextPoint, 1 / lastDist); - const nextShapePoint = lerp$1([], this.startPoint, vertiesMap([unitVector], calculateRotationOriginMat4(90, this.startPoint))[0], image2.radialType === RadialGradientType.CIRCLE ? lastDist : this.shapeDist); - const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); - newX3 = Length.makePercent(newShapePosition[0], width2); - newY3 = Length.makePercent(newShapePosition[1], height2); - image2.reset({ - x3: newX3, - y3: newY3 - }); - } - break; - case GradientType.LINEAR: - var newX, newY; - if (this.pointTarget === "start") { - newX = image2.x1.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); - newY = image2.y1.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); - image2.reset({ - x1: newX, - y1: newY - }); - } else if (this.pointTarget === "end") { - newX = image2.x2.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); - newY = image2.y2.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); - image2.reset({ - x2: newX, - y2: newY - }); - } - break; + containerItem.appendChild(layer); + if (isSelected) { + editor.context.selection.select(layer); } - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${this.state.imageResult.image}` - })); + _doForceRefreshSelection(editor); } - moveEndPoint(dx, dy) { - const image2 = this.state.imageResult.image; - const width2 = this.state.currentMatrix.width; - const height2 = this.state.currentMatrix.height; - if (dx === 0 && dy === 0) { - switch (image2.type) { - case GradientType.RADIAL: - if (this.pointTarget === "start") { - switch (image2.radialType) { - case RadialGradientType.CIRCLE: - image2.reset({ - radialType: RadialGradientType.ELLIPSE - }); - break; - case RadialGradientType.ELLIPSE: - const lastDist = dist(this.startPoint, this.endPoint); - const unitVector = lerp$1([], this.startPoint, this.endPoint, 1 / lastDist); - const nextShapePoint = lerp$1([], this.startPoint, vertiesMap([unitVector], calculateRotationOriginMat4(90, this.startPoint))[0], lastDist); - const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); - const x3 = Length.makePercent(newShapePosition[0], width2); - const y3 = Length.makePercent(newShapePosition[1], height2); - image2.reset({ - radialType: RadialGradientType.CIRCLE, - x3, - y3 - }); - break; - } - break; - } - default: - const index2 = spreadMethodList.findIndex((it) => image2.spreadMethod === it); - const nextIndex = (index2 + 1) % spreadMethodList.length; - image2.reset({ - spreadMethod: spreadMethodList[nextIndex] - }); - break; - } +} +var __glob_0_10$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addLayer +}, Symbol.toStringTag, { value: "Module" })); +var addLayerView = { + command: "addLayerView", + execute: async function(editor, type, data = {}) { + editor.context.selection.empty(); + await editor.emit("hideAddViewLayer"); + await editor.emit("removeGuideLine"); + editor.context.config.set("editing.mode.itemType", type); + if (type === "select") { + editor.context.selection.empty(); + editor.context.config.set("editing.mode", EditingMode.SELECT); + } else if (type === "brush") { + editor.context.config.set("editing.mode", EditingMode.DRAW); + await editor.emit("showPathDrawEditor"); + } else if (type === "path") { + editor.context.config.set("editing.mode", EditingMode.PATH); + await editor.emit("showPathEditor", "path"); + } else { + editor.context.config.set("editing.mode", EditingMode.APPEND); + await editor.emit("showLayerAppendView", type, data); } - this.emit("updateFillEditor", image2); - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${image2}` - })); } - [POINTERSTART("$el .colorstep") + MOVE("moveColorStep") + END("moveEndColorStep")](e) { - this.$el.toggleClass("dragging", true); - this.state.hoverColorStep = null; - this.initializeData(); - const $colorstep = e.$dt; - this.$targetIndex = +$colorstep.data("index"); - if (e.altKey) { - this.removeStep(this.$targetIndex); - this.state.altKey = true; - return; - } - const result = this.state.imageResult; - switch (result.image.type) { - case GradientType.RADIAL: - case GradientType.LINEAR: - this.startPoint = this.$viewport.applyVertex(result.startPoint); - this.endPoint = this.$viewport.applyVertex(result.endPoint); - const x = +$colorstep.data("x"); - const y = +$colorstep.data("y"); - this.screenXY = [x, y, 0]; - const dist2 = subtract([], this.endPoint, this.startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - this.rotateInverse = calculateRotationOriginMat4(-angle, this.startPoint); - break; +}; +var __glob_0_11$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addLayerView +}, Symbol.toStringTag, { value: "Module" })); +function addProject(editor, obj2 = {}) { + var project2 = editor.createModel(__spreadValues({ + itemType: "project" + }, obj2)); + editor.context.selection.selectProject(project2); + _doForceRefreshSelection(editor); +} +var __glob_0_12$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addProject +}, Symbol.toStringTag, { value: "Module" })); +var addSVGFilterAssetItem = { + command: "addSVGFilterAssetItem", + execute: function(editor, callback) { + var project2 = editor.context.selection.currentProject; + if (project2) { + var id = uuidShort(); + var index2 = project2.createSVGFilter({ id, filters: [] }); + callback && callback(index2, id); } } - moveColorStep(dx, dy) { - if (this.state.altKey) - return; - const nextPoint = add$1([], this.screenXY, [dx, dy, 0]); - const [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.startPoint, this.endPoint, nextPoint], this.rotateInverse); - const result = this.state.imageResult; - let newDist = 0; - let baseDist = 0; - switch (result.image.type) { - case GradientType.RADIAL: - case GradientType.LINEAR: - var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; - var baseDefaultDist = Math.abs(s - e); - if (n < s) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else if (n > e) { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } else { - newDist = (n - s) / baseDefaultDist * 100; +}; +var __glob_0_13$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addSVGFilterAssetItem +}, Symbol.toStringTag, { value: "Module" })); +function addText(editor, rect2 = {}) { + editor.context.commands.emit("newComponent", "text", __spreadValues({ + content: "Insert a text", + width: 300, + height: 50, + "font-size": 30 + }, rect2), rect2); +} +var __glob_0_14$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addText +}, Symbol.toStringTag, { value: "Module" })); +var addTimelineCurrentProperty = { + command: "addTimelineCurrentProperty", + execute: function(editor, options2 = { timing: "linear" }) { + _currentProject(editor, (project2) => { + var list2 = []; + editor.context.selection.each((item) => { + var keyframeObj = { + layerId: item.id, + property: options2.property, + value: item[options2.property] + "", + timing: options2.timing, + editor: options2.editor + }; + var obj2 = project2.addTimelineKeyframe(keyframeObj); + if (obj2) { + list2.push(obj2); } - newDist = Math.max(0, Math.min(100, newDist)); - baseDist = baseDefaultDist; - break; - } - const image2 = this.state.imageResult.image; - image2.colorsteps[this.$targetIndex].setValue(newDist, baseDist); - const targetColorStep = { - color: image2.colorsteps[this.$targetIndex].color, - percent: image2.colorsteps[this.$targetIndex].percent - }; - const nextImage = this.state.originalResult.image; - nextImage.colorsteps = image2.colorsteps.map((it) => { - return it; + }); + editor.context.timeline.select(...list2); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); }); - nextImage.sortColorStep(); - this.emit("updateFillEditor", nextImage, targetColorStep); - this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ - [this.state.key]: `${nextImage}` - })); - } - moveEndColorStep(dx, dy) { - if (this.state.altKey) { - this.state.altKey = false; - return; - } - if (dx === 0 && dy === 0) { - const image2 = this.state.imageResult.image; - image2.colorsteps[this.$targetIndex].toggleTiming(); - const targetColorStep = { - color: image2.colorsteps[this.$targetIndex].color, - percent: image2.colorsteps[this.$targetIndex].percent - }; - this.emit("updateFillEditor", image2, targetColorStep); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - [this.state.key]: `${image2}` - })); - } - this.$el.toggleClass("dragging", false); - } - updateColorStepStatus(image2, index2) { - this.initializeData(); - const { color: color2, percent } = image2.colorsteps[index2] || {}; - this.emit("updateFillEditor", image2, { color: color2, percent }); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - [this.state.key]: `${image2}` - })); - this.state.hoverColorStep = null; } - [POINTERSTART("$el .area-line")]() { - const image2 = this.state.originalResult.image; - const index2 = image2.insertColorStep(this.state.hoverColorStep.percent); - this.updateColorStepStatus(image2, index2); +}; +var __glob_0_15$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addTimelineCurrentProperty +}, Symbol.toStringTag, { value: "Module" })); +var addTimelineItem = { + command: "addTimelineItem", + execute: function(editor, layerId) { + _currentProject(editor, (project2) => { + if (layerId) { + project2.addTimelineLayer(layerId); + } else { + project2.addTimeline(); + } + editor.emit("refreshTimeline"); + editor.emit("addTimeline"); + }); } - [POINTEROUT("$el .area-line")]() { - if (this.state.hoverColorStep) { - this.state.hoverColorStep = null; - this.refresh(); - } +}; +var __glob_0_16$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var addTimelineKeyframe = { + command: "addTimelineKeyframe", + execute: function(editor, options2 = { timing: "linear" }) { + _currentProject(editor, (project2) => { + var item = editor.context.modelManager.get(options2.layerId); + var keyframeObj = { + layerId: options2.layerId, + property: options2.property, + time: options2.time, + value: item[options2.property] + "", + timing: options2.timing, + editor: options2.editor + }; + var obj2 = project2.addTimelineKeyframe(keyframeObj); + editor.timeline.select(obj2); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); + }); } - [POINTERMOVE("$el .area-line")](evt) { - const nextPoint = this.$viewport.applyVertex(this.$viewport.getWorldPosition(evt)); - const image2 = this.state.originalResult.image; - let baseStartPoint, baseEndPoint, baseNextPoint; - switch (image2.type) { - case GradientType.LINEAR: - case GradientType.RADIAL: - [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.state.startPoint, this.state.endPoint, nextPoint], this.state.rotateInverse); - var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; - var baseDefaultDist = Math.abs(s - e); - var newDist; - if (n < s) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else if (n > e) { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } else { - newDist = (n - s) / baseDefaultDist * 100; +}; +var __glob_0_17$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addTimelineKeyframe +}, Symbol.toStringTag, { value: "Module" })); +var addTimelineProperty = { + command: "addTimelineProperty", + execute: function(editor, layerList, options2 = { timing: "linear" }) { + _currentProject(editor, (project2) => { + if (Array.isArray(layerList) === false) { + layerList = [layerList]; + } + var list2 = []; + layerList.forEach((layerId) => { + var keyframeObj = { + layerId, + property: options2.property, + value: options2.value + "", + timing: options2.timing, + editor: options2.editor + }; + var obj2 = project2.addTimelineKeyframe(keyframeObj); + if (obj2) { + list2.push(obj2); } - this.state.hoverColorStep = image2.pickColorStep(newDist); - break; - } - this.refresh(); + }); + editor.timeline.select(...list2); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); + }); } +}; +var __glob_0_18$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addTimelineProperty +}, Symbol.toStringTag, { value: "Module" })); +function addVideo(editor, rect2 = {}, containerItem = void 0) { + editor.context.commands.emit("newComponent", "video", rect2, true, containerItem); } -class FillEditorView extends FillColorstepEditor { - initState() { - return { - key: "", - value: "", - isShow: false +var __glob_0_19$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addVideo +}, Symbol.toStringTag, { value: "Module" })); +function loadOriginalVideo(obj2, callback) { + var video2 = document.createElement("video"); + video2.onloadeddata = () => { + var info = { + local: obj2.local, + naturalWidth: video2.videoWidth, + naturalHeight: video2.videoHeight, + width: video2.videoWidth, + height: video2.videoHeight, + duration: video2.duration, + playTime: `0:1:${video2.duration}`, + volume: video2.volume, + muted: video2.muted, + placebackRate: video2.playbackRate }; + callback && callback(info, video2); + }; + video2.src = obj2.local; +} +var addVideoAssetItem = { + command: "addVideoAssetItem", + execute: function(editor, videoObject, rect2 = {}, containerItem = void 0) { + var project2 = editor.context.selection.currentProject; + if (project2) { + project2.createVideo(videoObject); + editor.emit("addVideoAsset"); + loadOriginalVideo(videoObject, (info) => { + editor.context.commands.emit("addVideo", __spreadValues(__spreadValues({ src: videoObject.id }, info), rect2), containerItem); + }); + } } - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--fill-editor-view" +}; +var __glob_0_20$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": addVideoAssetItem +}, Symbol.toStringTag, { value: "Module" })); +var clipboard_copy = { + command: "clipboard.copy", + title: "Copy", + description: "Copy", + execute: function(editor) { + editor.context.clipboard.push({ + type: ClipboardActionType.COPY, + data: editor.context.selection.ids }); } - updateData() { - this.trigger(this.state.onchange, this.state.key, this.state.value); - } - refresh() { - if (this.state.isShow) { - this.load(); +}; +var __glob_0_21$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": clipboard_copy +}, Symbol.toStringTag, { value: "Module" })); +var clipboard_paste = { + command: "clipboard.paste", + execute: async function(editor) { + if (!editor.context.clipboard.isEmpty) { + editor.context.commands.emit("history.clipboard.paste", "paste"); + } else { + var text2 = await window.navigator.clipboard.readText(); + if (text2) { + editor.context.commands.emit("convertPasteText", text2); + } } } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); - } - [SUBSCRIBE(UPDATE_CANVAS) + DEBOUNCE(100)]() { - if (this.$context.selection.current) { - if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "fill", "stroke")) { - this.refresh(); +}; +var __glob_0_22$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": clipboard_paste +}, Symbol.toStringTag, { value: "Module" })); +var convert_flatten_path = { + command: "convert.flatten.path", + description: "flatten selected multi path", + execute: (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + let newPath; + if (current.is("boolean-path") || current.isBooleanItem) { + let parent = current; + if (current.isBooleanItem) { + parent = current.parent; } + newPath = parent.absolutePath(parent["boolean-path"]); + newPath = parent.invertPath(newPath.d); + const newLayerAttrs = parent.layers[0].toCloneObject(); + delete newLayerAttrs.id; + delete newLayerAttrs.parentId; + delete newLayerAttrs.transform; + delete newLayerAttrs["boolean-path"]; + delete newLayerAttrs["boolean-operation"]; + const parentParent = parent.parent; + const newRectInfo = parent.updatePath(newPath.d); + editor.context.commands.executeCommand("removeLayer", "remove selected layers", [parent.id]); + editor.nextTick(() => { + editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, newLayerAttrs), newRectInfo)), true, parentParent); + }); + } else { + newPath = PathParser.fromSVGString(); + editor.context.selection.each((item) => { + newPath.addPath(item.absolutePath()); + }); + newPath = current.invertPath(newPath.d); + const parent = current.parent; + const newPathInfo = current.updatePath(newPath.d); + const newLayerAttrs = current.toCloneObject(); + delete newLayerAttrs.id; + editor.context.commands.executeCommand("removeLayer", "remove selected layers"); + editor.nextTick(() => { + editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, newLayerAttrs), newPathInfo)), true, parent); + }); } } - [SUBSCRIBE("showFillEditorView")](params = {}) { - this.setState({ - key: params.key, - isShow: true, - onchange: params.onchange - }); - this.$el.show(); - this.$context.commands.emit("push.mode.view", "FillEditorView"); +}; +var __glob_0_23$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_flatten_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_no_transform_path = { + command: "convert.no.transform.path", + description: "remove transform(rotate, translate, scale) inforation in path layer", + execute: (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + const parent = current.parent; + const childPath = current.absolutePath(); + if (parent.is("project")) { + const verties = childPath.getBBox(); + const newRect = vertiesToRectangle(verties); + editor.context.commands.executeCommand("setAttribute", "remove transform for path", editor.context.selection.packByValue(__spreadProps(__spreadValues({}, newRect), { + rotate: 0, + d: childPath.d + }))); + } else { + childPath.transformMat4(parent.absoluteMatrixInverse); + const newRect = parent.updatePath(childPath.d); + editor.context.commands.executeCommand("setAttribute", "remove transform for path", editor.context.selection.packByValue(__spreadProps(__spreadValues({}, newRect), { + rotate: 0, + d: childPath.d + }))); + } } - [SUBSCRIBE("hideFillEditorView")]() { - this.setState({ - key: "", - isShow: false, - onchange: null - }); - this.$el.hide(); - this.$commands.emit("pop.mode.view", "FillEditorView"); +}; +var __glob_0_24 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_no_transform_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_normalize_path = { + command: "convert.normalize.path", + description: "convert segments to bezier curve", + execute: (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + editor.context.commands.executeCommand("setAttribute", "normalize path string", editor.context.selection.packByValue(current.updatePath(PathParser.fromSVGString(current.d).normalize().d))); } - makeTimingLine(timing, width2 = 10, startX = 0, startY = 0) { - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0} ${startY + width2} - L${startX + width2 * 1 / 3} ${startY + width2} - L${startX + width2 * 1 / 3} ${startY + width2 * 2 / 3} - L${startX + width2 * 2 / 3} ${startY + width2 * 2 / 3} - L${startX + width2 * 2 / 3} ${startY + width2 * 1 / 3} - L${startX + width2} ${startY + width2 * 1 / 3} - L${startX + width2} ${startY + 0} - ` - }); - case TimingFunction.PATH: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(0, width2).translate(startX, startY).d +}; +var __glob_0_25 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_normalize_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_path_operation = { + command: "convert.path.operation", + description: "apply path boolean operation", + execute: (editor, booleanOperation) => { + var _a; + const current = editor.context.selection.current; + if (!current) + return; + const changeBooleanOperation = (booleanOperation2) => { + editor.context.commands.executeCommand("setAttribute", "change boolean operation", editor.context.selection.packByValue({ + booleanOperation: booleanOperation2 + })); + recoverBooleanPath2(); + }; + const recoverBooleanPath2 = () => { + editor.nextTick(() => { + editor.context.commands.emit("recoverBooleanPath"); + editor.nextTick(() => { + editor.emit(REFRESH_SELECTION); }); - default: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0} ${startY + width2} - C - ${startX + timing.x1 * width2} ${startY + width2 - timing.y1 * width2} - ${startX + timing.x2 * width2} ${startY + width2 - timing.y2 * width2} - ${startX + width2} ${startY + 0} - ` + }); + }; + if (current.is("boolean-path") || current.isBooleanItem) { + let parent = current; + if (current.isBooleanItem) { + parent = current.parent; + } + editor.context.selection.select(parent); + changeBooleanOperation(booleanOperation); + } else { + if ((_a = editor.context.selection.current) == null ? void 0 : _a.isNot("boolean-path")) { + editor.context.commands.emit("group.item", { + itemType: "boolean-path", + title: "Intersection" }); + } + editor.nextTick(() => { + var _a2; + if ((_a2 = editor.context.selection.current) == null ? void 0 : _a2.is("boolean-path")) { + changeBooleanOperation(booleanOperation); + } + }, 10); } } - makeTimingCircle(colorstepIndex, current, prev) { - const prevStickScreenXY = prev.stickScreenXYInEnd; - const stickScreenXY = current.stickScreenXYInStart; - const { timing, timingCount } = current; - let pos; - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - pos = lerp$1([], prevStickScreenXY, stickScreenXY, 0.5); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timing.count)); - default: - pos = lerp$1([], prevStickScreenXY, stickScreenXY, 0.5); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timingCount)); - } +}; +var __glob_0_26 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_path_operation +}, Symbol.toStringTag, { value: "Module" })); +var convert_polygonal_path = { + command: "convert.polygonal.path", + description: "convert path to polygonal path", + execute: (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + editor.context.commands.executeCommand("setAttribute", "polygonal path string", editor.context.selection.packByValue(current.updatePath(PathParser.fromSVGString(current.d).polygonal().d))); } - makeTimingArea(colorstepIndex, current, prev, size2) { - const prevStickScreenXY = prev.stickScreenXYInEnd; - const stickScreenXY = current.stickScreenXYInStart; - return /* @__PURE__ */ createElementJsx("g", { - class: "timing-area" - }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx("path", { - class: "timing-path", - d: ` - M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} - L ${stickScreenXY[0]} ${stickScreenXY[1]} - ` - }), this.makeTimingCircle(colorstepIndex, current, prev, size2)); +}; +var __glob_0_27 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_polygonal_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_simplify_path = { + command: "convert.simplify.path", + execute: (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + editor.context.commands.executeCommand("setAttribute", "change path string", editor.context.selection.packByValue(current.updatePath(editor.pathKitManager.simplify(current.d)))); } - makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint) { - const size2 = TOOL_SIZE$1; - const dist2 = subtract([], endPoint, startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { - if (index2 === 0) - return ""; - return this.makeTimingArea(index2, it, colorsteps[index2 - 1], TOOL_SIZE$1); - }), colorsteps.map((it, index2) => { - return /* @__PURE__ */ createElementJsx("g", { - transform: `rotate(${angle} ${it.stickScreenXY[0]} ${it.stickScreenXY[1]})` - }, /* @__PURE__ */ createElementJsx("rect", { - id: it.id, - "data-index": index2, - class: "colorstep", - x: it.stickScreenXY[0], - y: it.stickScreenXY[1], - width: size2, - height: size2, - fill: it.color, - tabIndex: -1, - "data-x": it.screenXY[0], - "data-y": it.screenXY[1] - }), this.makeTimingLine(it.timing, size2, it.stickScreenXY[0], it.stickScreenXY[1])); - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "start", - cx: startPoint[0], - cy: startPoint[1] - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "end", - cx: endPoint[0], - cy: endPoint[1] - }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "shape", - cx: shapePoint[0], - cy: shapePoint[1] - }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { - class: "hover-colorstep", - r: "5", - cx: newHoverColorStepPoint[0], - cy: newHoverColorStepPoint[1], - fill: this.state.hoverColorStep.color - })); +}; +var __glob_0_28 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_simplify_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_smooth_path = { + command: "convert.smooth.path", + description: "convert path to smooth", + execute: (editor, divideCount = 5, tolerance = 0.1, tension = 0.5) => { + const current = editor.context.selection.current; + if (!current) + return; + const smoothedPath = PathParser.fromSVGString(current.d).divideSegmentByCount(divideCount).simplify(tolerance).cardinalSplines(tension).d; + editor.context.commands.executeCommand("setAttribute", "smooth path string", editor.context.selection.packByValue(current.updatePath(smoothedPath))); } - makeStickPoint(colorsteps, startPoint, endPoint) { - const size2 = TOOL_SIZE$1; - const dist2 = subtract([], endPoint, startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - const rotateInverse = calculateRotationOriginMat4(-angle, startPoint); - const rotateInverseInverse = invert([], rotateInverse); - return colorsteps.map((it) => { - it.screenXY = this.$viewport.applyVertex(it.pos); - const [newScreenXY] = vertiesMap([it.screenXY], rotateInverse); - [it.stickScreenXY, it.stickScreenXYInStart, it.stickScreenXYInEnd] = vertiesMap([ - [newScreenXY[0] - size2 / 2, newScreenXY[1] - size2 * 1.5, 0], - [ - newScreenXY[0] - size2 / 2, - newScreenXY[1] - size2 * 1.5 + size2 / 2, - 0 - ], - [ - newScreenXY[0] + size2 / 2, - newScreenXY[1] - size2 * 1.5 + size2 / 2, - 0 - ] - ], rotateInverseInverse); - return it; +}; +var __glob_0_29 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_smooth_path +}, Symbol.toStringTag, { value: "Module" })); +var convert_stroke_to_path = { + command: "convert.stroke.to.path", + execute: async (editor) => { + const current = editor.context.selection.current; + if (!current) + return; + const attrs = current.attrs("d", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "stroke-linejoin", "stroke-linecap"); + const pathAttrs = current.convertStrokeToPath(); + let newD = editor.pathKitManager.stroke(current.d || attrs.d, { + "stroke-width": Length.parse(attrs["stroke-width"]).value, + "stroke-linejoin": attrs["stroke-linejoin"], + "stroke-linecap": attrs["stroke-linecap"], + "stroke-dasharray": attrs["stroke-dasharray"], + "stroke-dashoffset": attrs["stroke-dashoffset"], + "fill-rule": "nonezero" }); + pathAttrs["fill-rule"] = "nonzero"; + newD = PathParser.fromSVGString(newD).reversePathStringByFunc((_, index2) => index2 % 2 === 0); + editor.context.commands.executeCommand("addLayer", `add layer - path`, editor.createModel(__spreadValues(__spreadValues({}, pathAttrs), current.updatePath(newD))), true, current.parent); } - makeRadialCenterPoint(result) { - let startPoint, endPoint, shapePoint, colorsteps; - startPoint = this.$viewport.applyVertex(result.startPoint); - endPoint = this.$viewport.applyVertex(result.endPoint); - shapePoint = this.$viewport.applyVertex(result.shapePoint); - colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); - let newHoverColorStepPoint = null; - if (this.state.hoverColorStep) { - newHoverColorStepPoint = lerp$1([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); +}; +var __glob_0_30 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convert_stroke_to_path +}, Symbol.toStringTag, { value: "Module" })); +var jsVideoUrlParser = { exports: {} }; +(function(module, exports) { + (function(global2, factory) { + module.exports = factory(); + })(commonjsGlobal, function() { + function _typeof(obj2) { + "@babel/helpers - typeof"; + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function(obj3) { + return typeof obj3; + }; + } else { + _typeof = function(obj3) { + return obj3 && typeof Symbol === "function" && obj3.constructor === Symbol && obj3 !== Symbol.prototype ? "symbol" : typeof obj3; + }; + } + return _typeof(obj2); } - return /* @__PURE__ */ createElementJsx("svg", { - class: "gradient-editor-area" - }, /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "area-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "start-end-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${shapePoint[0]} ${shapePoint[1]} - `, - class: "normal-line" - }), this.makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint)); - } - makeLinearCenterPoint(result) { - let startPoint, endPoint, colorsteps; - startPoint = this.$viewport.applyVertex(result.startPoint); - endPoint = this.$viewport.applyVertex(result.endPoint); - colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); - let newHoverColorStepPoint = null; - if (this.state.hoverColorStep) { - newHoverColorStepPoint = lerp$1([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); + var getQueryParams = function getQueryParams2(qs) { + if (typeof qs !== "string") { + return {}; + } + qs = qs.split("+").join(" "); + var params = {}; + var match = qs.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/); + var split; + if (match === null) { + return {}; + } + split = match[0].substr(1).split(/[&#=]/); + for (var i = 0; i < split.length; i += 2) { + params[decodeURIComponent(split[i])] = decodeURIComponent(split[i + 1] || ""); + } + return params; + }; + var combineParams = function combineParams2(params, hasParams) { + if (_typeof(params) !== "object") { + return ""; + } + var combined = ""; + var i = 0; + var keys2 = Object.keys(params); + if (keys2.length === 0) { + return ""; + } + keys2.sort(); + if (!hasParams) { + combined += "?" + keys2[0] + "=" + params[keys2[0]]; + i += 1; + } + for (; i < keys2.length; i += 1) { + combined += "&" + keys2[i] + "=" + params[keys2[i]]; + } + return combined; + }; + function getLetterTime(timeString) { + var totalSeconds = 0; + var timeValues = { + "s": 1, + "m": 1 * 60, + "h": 1 * 60 * 60, + "d": 1 * 60 * 60 * 24, + "w": 1 * 60 * 60 * 24 * 7 + }; + var timePairs; + timeString = timeString.replace(/([smhdw])/g, " $1 ").trim(); + timePairs = timeString.split(" "); + for (var i = 0; i < timePairs.length; i += 2) { + totalSeconds += parseInt(timePairs[i], 10) * timeValues[timePairs[i + 1] || "s"]; + } + return totalSeconds; + } + function getColonTime(timeString) { + var totalSeconds = 0; + var timeValues = [1, 1 * 60, 1 * 60 * 60, 1 * 60 * 60 * 24, 1 * 60 * 60 * 24 * 7]; + var timePairs = timeString.split(":"); + for (var i = 0; i < timePairs.length; i++) { + totalSeconds += parseInt(timePairs[i], 10) * timeValues[timePairs.length - i - 1]; + } + return totalSeconds; + } + var getTime = function getTime2(timeString) { + if (typeof timeString === "undefined") { + return 0; + } + if (timeString.match(/^(\d+[smhdw]?)+$/)) { + return getLetterTime(timeString); + } + if (timeString.match(/^(\d+:?)+$/)) { + return getColonTime(timeString); + } + return 0; + }; + var util = { + getQueryParams, + combineParams, + getTime + }; + var getQueryParams$1 = util.getQueryParams; + function UrlParser() { + for (var _i = 0, _arr = ["parseProvider", "parse", "bind", "create"]; _i < _arr.length; _i++) { + var key = _arr[_i]; + this[key] = this[key].bind(this); + } + this.plugins = {}; + } + var urlParser2 = UrlParser; + UrlParser.prototype.parseProvider = function(url) { + var match = url.match(/(?:(?:https?:)?\/\/)?(?:[^.]+\.)?(\w+)\./i); + return match ? match[1] : void 0; + }; + UrlParser.prototype.parse = function(url) { + if (typeof url === "undefined") { + return void 0; + } + var provider = this.parseProvider(url); + var result; + var plugin2 = this.plugins[provider]; + if (!provider || !plugin2 || !plugin2.parse) { + return void 0; + } + result = plugin2.parse.call(plugin2, url, getQueryParams$1(url)); + if (result) { + result = removeEmptyParameters(result); + result.provider = plugin2.provider; + } + return result; + }; + UrlParser.prototype.bind = function(plugin2) { + this.plugins[plugin2.provider] = plugin2; + if (plugin2.alternatives) { + for (var i = 0; i < plugin2.alternatives.length; i += 1) { + this.plugins[plugin2.alternatives[i]] = plugin2; + } + } + }; + UrlParser.prototype.create = function(op) { + if (_typeof(op) !== "object" || _typeof(op.videoInfo) !== "object") { + return void 0; + } + var vi = op.videoInfo; + var params = op.params; + var plugin2 = this.plugins[vi.provider]; + params = params === "internal" ? vi.params : params || {}; + if (plugin2) { + op.format = op.format || plugin2.defaultFormat; + if (plugin2.formats.hasOwnProperty(op.format)) { + return plugin2.formats[op.format].apply(plugin2, [vi, Object.assign({}, params)]); + } + } + return void 0; + }; + function removeEmptyParameters(result) { + if (result.params && Object.keys(result.params).length === 0) { + delete result.params; + } + return result; } - return /* @__PURE__ */ createElementJsx("svg", { - class: "gradient-editor-area" - }, /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "area-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "start-end-line" - }), this.makeGradientPoint(colorsteps, startPoint, endPoint, null, newHoverColorStepPoint)); - } - makeCenterPoint(result) { - const { image: image2 } = result; - switch (image2.type) { - case GradientType.LINEAR: - return this.makeLinearCenterPoint(result); - case GradientType.RADIAL: - return this.makeRadialCenterPoint(result); + var parser = new urlParser2(); + var base = parser; + var combineParams$1 = util.combineParams; + function CanalPlus() { + this.provider = "canalplus"; + this.defaultFormat = "embed"; + this.formats = { + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - return ""; - } - [LOAD("$el") + DOMDIFF]() { - if (!this.state.isShow) - return ""; - const current = this.$context.selection.current; - if (!current) - return ""; - const result = current.createFragmentMatrix(this.state.key); - this.state.result = result; - this.state.originalResult = current.createFragmentMatrix(this.state.key); - const image2 = result.image; - let angle, dist2; - switch (image2.type) { - case GradientType.LINEAR: - this.state.startPoint = this.$viewport.applyVertex(result.startPoint); - this.state.endPoint = this.$viewport.applyVertex(result.endPoint); - dist2 = subtract([], this.state.endPoint, this.state.startPoint); - angle = calculateAngle360(dist2[0], dist2[1]) - 180; - this.state.rotateInverse = calculateRotationOriginMat4(-angle, this.state.startPoint); - break; - case GradientType.RADIAL: - this.state.startPoint = this.$viewport.applyVertex(result.startPoint); - this.state.endPoint = this.$viewport.applyVertex(result.endPoint); - this.state.shapePoint = this.$viewport.applyVertex(result.shapePoint); - dist2 = subtract([], this.state.endPoint, this.state.startPoint); - angle = calculateAngle360(dist2[0], dist2[1]) - 180; - this.state.rotateInverse = calculateRotationOriginMat4(-angle, this.state.startPoint); - break; + CanalPlus.prototype.parseParameters = function(params) { + delete params.vid; + return params; + }; + CanalPlus.prototype.parse = function(url, params) { + var _this = this; + var result = { + mediaType: this.mediaTypes.VIDEO, + id: params.vid + }; + result.params = _this.parseParameters(params); + if (!result.id) { + return void 0; + } + return result; + }; + CanalPlus.prototype.createEmbedUrl = function(vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = "http://player.canalplus.fr/embed/"; + params.vid = vi.id; + url += combineParams$1(params); + return url; + }; + base.bind(new CanalPlus()); + var combineParams$2 = util.combineParams; + function Coub() { + this.provider = "coub"; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - return /* @__PURE__ */ createElementJsx("div", null, this.makeCenterPoint(result)); - } -} -function fillEditorView(editor) { - editor.registerUI("canvas.view", { - FillEditorView - }); -} -var FilterProperty$1 = ""; -const filter_list = [ - "blur", - "grayscale", - "hue-rotate", - "invert", - "brightness", - "contrast", - "drop-shadow", - "opacity", - "saturate", - "sepia", - "svg" -]; -class FilterProperty extends BaseProperty { - getTitle() { - return this.$i18n("filter.property.title"); - } - hasKeyframe() { - return true; - } - isFirstShow() { - return true; - } - afterRender() { - this.show(); - } - getKeyframeProperty() { - return "filter"; - } - getTitleClassName() { - return "filter"; - } - getBodyClassName() { - return "no-padding"; - } - getBody() { - return `
`; - } - getTools() { - return ` - - - `; - } - [CLICK("$add")]() { - var filterType = this.refs.$filterSelect.value; - this.children.$filterEditor.trigger("add", filterType); - } - [LOAD("$filterSelect")]() { - var list2 = filter_list.map((it) => { - return { title: this.$i18n(`filter.property.${it}`), value: it }; - }); - var svgFilterList = this.getSVGFilterList(); - var totalList = []; - if (svgFilterList.length) { - totalList = [...list2, { title: "-------", value: "" }, ...svgFilterList]; - } else { - totalList = [...list2]; + Coub.prototype.parseUrl = function(url) { + var match = url.match(/(?:embed|view)\/([a-zA-Z\d]+)/i); + return match ? match[1] : void 0; + }; + Coub.prototype.parse = function(url, params) { + var result = { + mediaType: this.mediaTypes.VIDEO, + params, + id: this.parseUrl(url) + }; + if (!result.id) { + return void 0; + } + return result; + }; + Coub.prototype.createUrl = function(baseUrl, vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = baseUrl + vi.id; + url += combineParams$2(params); + return url; + }; + Coub.prototype.createLongUrl = function(vi, params) { + return this.createUrl("https://coub.com/view/", vi, params); + }; + Coub.prototype.createEmbedUrl = function(vi, params) { + return this.createUrl("//coub.com/embed/", vi, params); + }; + base.bind(new Coub()); + var combineParams$3 = util.combineParams, getTime$1 = util.getTime; + function Dailymotion() { + this.provider = "dailymotion"; + this.alternatives = ["dai"]; + this.defaultFormat = "long"; + this.formats = { + "short": this.createShortUrl, + "long": this.createLongUrl, + embed: this.createEmbedUrl, + image: this.createImageUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - return totalList.map((it) => { - var { title: title2, value } = it; - return ``; - }); - } - getSVGFilterList() { - var current = this.$context.selection.currentProject; - var arr = []; - if (current) { - arr = current.svgfilters.map((it) => { - var id = it.id; - return { - title: `svg - #${id}`, - value: id - }; - }); + Dailymotion.prototype.parseParameters = function(params) { + return this.parseTime(params); + }; + Dailymotion.prototype.parseTime = function(params) { + if (params.start) { + params.start = getTime$1(params.start); + } + return params; + }; + Dailymotion.prototype.parseUrl = function(url) { + var match = url.match(/(?:\/video|ly)\/([A-Za-z0-9]+)/i); + return match ? match[1] : void 0; + }; + Dailymotion.prototype.parse = function(url, params) { + var _this = this; + var result = { + mediaType: this.mediaTypes.VIDEO, + params: _this.parseParameters(params), + id: _this.parseUrl(url) + }; + return result.id ? result : void 0; + }; + Dailymotion.prototype.createUrl = function(base2, vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + return base2 + vi.id + combineParams$3(params); + }; + Dailymotion.prototype.createShortUrl = function(vi, params) { + return this.createUrl("https://dai.ly/", vi, params); + }; + Dailymotion.prototype.createLongUrl = function(vi, params) { + return this.createUrl("https://dailymotion.com/video/", vi, params); + }; + Dailymotion.prototype.createEmbedUrl = function(vi, params) { + return this.createUrl("https://www.dailymotion.com/embed/video/", vi, params); + }; + Dailymotion.prototype.createImageUrl = function(vi, params) { + delete params.start; + return this.createUrl("https://www.dailymotion.com/thumbnail/video/", vi, params); + }; + base.bind(new Dailymotion()); + var combineParams$4 = util.combineParams, getTime$2 = util.getTime; + function Twitch() { + this.provider = "twitch"; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video", + STREAM: "stream", + CLIP: "clip" + }; } - return arr; - } - [LOAD("$body") + DOMDIFF]() { - var current = this.$context.selection.current || {}; - var value = current.filter; - return createComponent("FilterEditor", { - ref: "$filterEditor", - key: "filter", - value, - onchange: "changeFilterEditor" - }); - } - [SUBSCRIBE_SELF("changeFilterEditor")](key, filter2) { - this.$commands.executeCommand("setAttribute", "change filter", this.$context.selection.packByValue({ - [key]: filter2 - })); - } - get editableProperty() { - return "filter"; - } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(100)]() { - this.refresh(); - } - [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(100)]() { - this.load("$filterSelect"); - } -} -function filter(editor) { - editor.registerUI("inspector.tab.style", { - FilterProperty - }); -} -function font(editor) { - editor.registerUI("inspector.tab.style", { - FontProperty: ObjectProperty.create({ - title: editor.$i18n("font.property.title"), - editableProperty: "font", - preventUpdate: true - }) - }); - editor.registerInspector("font", (current) => { - return [ - { - key: "font-family", - editor: "SelectEditor", - editorOptions: { - compact: true, - label: "font_download", - options: [ - "", - "Arial", - "Arial Black", - "Times New Roman", - "Times", - "Courier New", - "Courier", - "Verdana", - "Georgia", - "Palatino", - "Garamond", - "Bookman", - "Tahoma", - "Trebuchet MS", - "Impact", - "Comic Sans MS", - "serif", - "sans-serif", - "monospace", - "cursive", - "fantasy", - "system-ui" - ] - }, - defaultValue: current.fontFamily || "" - }, - { - type: "column", - size: [1, 1], - gap: 10, - columns: [ - { - key: "font-size", - editor: "NumberInputEditor", - editorOptions: { - label: "format_size", - compact: true, - min: 8, - max: 1e3, - step: 1 - }, - defaultValue: Length.parse(current.fontSize).value, - convert: (key, value) => Length.px(value) - }, - { - key: "padding", - editor: "NumberInputEditor", - editorOptions: { - label: "padding", - compact: true, - min: 8, - max: 1e3, - step: 1 - }, - defaultValue: Length.parse(current.paddingTop).value, - convert: (key, value) => Length.px(value) - } - ] - }, - { - type: "column", - size: [1, 1], - columns: [ - { - key: "color", - editor: "ColorViewEditor", - editorOptions: { - compact: true - }, - defaultValue: current.color || "#000" - }, - { - key: "font-weight", - editor: "NumberInputEditor", - editorOptions: { - label: "format_bold", - compact: true, - min: 100, - max: 900, - step: 100 - }, - defaultValue: current.fontWeight || 400 - } - ] - }, - { - type: "column", - size: [1, 1, 1], - gap: 10, - columns: [ - { - key: "text-indent", - editor: "NumberInputEditor", - editorOptions: { - label: "format_indent", - min: -100, - max: 100, - step: 1, - compact: true - }, - defaultValue: Length.parse(current.textIndent).value, - convert: (key, value) => Length.px(value) - }, - { - key: "line-height", - editor: "NumberInputEditor", - editorOptions: { - label: "format_line_spacing", - min: 0, - max: 10, - step: 0.01, - compact: true - }, - defaultValue: current.lineHeight || 1.2 - }, - { - key: "letter-spacing", - editor: "NumberInputEditor", - editorOptions: { - label: "space", - min: -100, - max: 100, - step: 1, - compact: true - }, - defaultValue: Length.parse(current.letterSpacing).value, - convert: (key, value) => Length.px(value) - } - ] + Twitch.prototype.seperateId = function(id) { + return { + pre: id[0], + id: id.substr(1) + }; + }; + Twitch.prototype.parseChannel = function(result, params) { + var channel = params.channel || params.utm_content || result.channel; + delete params.utm_content; + delete params.channel; + return channel; + }; + Twitch.prototype.parseUrl = function(url, result, params) { + var match; + match = url.match(/(clips\.)?twitch\.tv\/(?:(?:videos\/(\d+))|(\w+)(?:\/clip\/(\w+))?)/i); + if (match && match[2]) { + result.id = "v" + match[2]; + } else if (params.video) { + result.id = params.video; + delete params.video; + } else if (params.clip) { + result.id = params.clip; + result.isClip = true; + delete params.clip; + } else if (match && match[1] && match[3]) { + result.id = match[3]; + result.isClip = true; + } else if (match && match[3] && match[4]) { + result.channel = match[3]; + result.id = match[4]; + result.isClip = true; + } else if (match && match[3]) { + result.channel = match[3]; } - ]; - }); -} -var FillEditor$1 = ""; -class FillEditor extends EditorElement { - initState() { - var _a; - const image2 = SVGFill.parseImage(this.props.value || "transparent") || SVGStaticGradient.create(); - const id = (_a = image2.colorsteps[this.props.index]) == null ? void 0 : _a.id; - this.$context.selection.selectColorStep(id); - if (id) { - this.currentStep = image2.colorsteps.find((it) => this.$context.selection.isSelectedColorStep(it.id)); - } - return { - cachedRect: null, - index: +(this.props.index || 0), - value: this.props.value, - image: image2 + return result; }; - } - setValue(value) { - this.setState({ - cachedRect: null, - image: SVGFill.parseImage(value) - }, false); - this.refresh(); - } - template() { - return ` -
-
-
-
-
-
-
-
-
- ${createComponent("SelectEditor", { - label: "Pattern", - ref: "$patternUnits", - options: ["userSpaceOnUse"], - key: "patternUnits", - onchange: "changeKeyValue" - })} -
- -
-
- `; - } - getImageFieldValue(image2, field) { - var value = image2[field]; - if (isUndefined(value)) { - switch (field) { - case "cx": - case "cy": - case "r": - case "fx": - case "fy": - return "50%"; - case "x1": - case "y1": - case "y2": - case "fr": - case "imageX": - case "imageY": - return "0%"; - case "x2": - case "patternWidth": - case "patternHeight": - case "imageWidth": - case "imageHeight": - return "100%"; + Twitch.prototype.parseMediaType = function(result) { + var mediaType; + if (result.id) { + if (result.isClip) { + mediaType = this.mediaTypes.CLIP; + delete result.isClip; + } else { + mediaType = this.mediaTypes.VIDEO; + } + } else if (result.channel) { + mediaType = this.mediaTypes.STREAM; } + return mediaType; + }; + Twitch.prototype.parseParameters = function(params) { + if (params.t) { + params.start = getTime$2(params.t); + delete params.t; + } + return params; + }; + Twitch.prototype.parse = function(url, params) { + var _this = this; + var result = {}; + result = _this.parseUrl(url, result, params); + result.channel = _this.parseChannel(result, params); + result.mediaType = _this.parseMediaType(result); + result.params = _this.parseParameters(params); + return result.channel || result.id ? result : void 0; + }; + Twitch.prototype.createLongUrl = function(vi, params) { + var url = ""; + if (vi.mediaType === this.mediaTypes.STREAM && vi.channel) { + url = "https://twitch.tv/" + vi.channel; + } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + var sep = this.seperateId(vi.id); + url = "https://twitch.tv/videos/" + sep.id; + if (params.start) { + params.t = params.start + "s"; + delete params.start; + } + } else if (vi.mediaType === this.mediaTypes.CLIP && vi.id) { + if (vi.channel) { + url = "https://www.twitch.tv/" + vi.channel + "/clip/" + vi.id; + } else { + url = "https://clips.twitch.tv/" + vi.id; + } + } else { + return void 0; + } + url += combineParams$4(params); + return url; + }; + Twitch.prototype.createEmbedUrl = function(vi, params) { + var url = "https://player.twitch.tv/"; + if (vi.mediaType === this.mediaTypes.STREAM && vi.channel) { + params.channel = vi.channel; + } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + params.video = vi.id; + if (params.start) { + params.t = params.start + "s"; + delete params.start; + } + } else if (vi.mediaType === this.mediaTypes.CLIP && vi.id) { + url = "https://clips.twitch.tv/embed"; + params.clip = vi.id; + } else { + return void 0; + } + url += combineParams$4(params); + return url; + }; + base.bind(new Twitch()); + var combineParams$5 = util.combineParams, getTime$3 = util.getTime; + function Vimeo() { + this.provider = "vimeo"; + this.alternatives = ["vimeopro"]; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - return value; - } - [CHANGE("$file")](e) { - var project2 = this.$context.selection.currentProject; - if (project2) { - [...e.target.files].forEach((item) => { - this.$commands.emit("updateImageAssetItem", item, (local) => { - this.trigger("setImageUrl", local); - }); - }); - } - } - refreshFieldValue() { - this.children.$cx.setValue(this.state.image.cx); - this.children.$cy.setValue(this.state.image.cy); - this.children.$r.setValue(this.state.image.r); - this.children.$fx.setValue(this.state.image.fx); - this.children.$fy.setValue(this.state.image.fy); - this.children.$fr.setValue(this.state.image.fr); - this.children.$patternUnits.setValue(this.state.image.patternUnits); - this.children.$patternWidth.setValue(this.state.image.patternWidth); - this.children.$patternHeight.setValue(this.state.image.patternHeight); - this.children.$imageX.setValue(this.state.image.imageX); - this.children.$imageY.setValue(this.state.image.imageY); - this.children.$imageWidth.setValue(this.state.image.imageWidth); - this.children.$imagenHeight.setValue(this.state.image.imageHeight); - } - getFieldValue(field) { - return Length.parse(this.getImageFieldValue(this.state.image, field)); - } - getRectRate(rect2, x, y) { - var { width: width2, height: height2, x: rx, y: ry } = rect2; - if (rx > x) { - x = rx; - } else if (rx + width2 < x) { - x = rx + width2; - } - if (ry > y) { - y = ry; - } else if (ry + height2 < y) { - y = ry + height2; - } - var left2 = Length.makePercent(x - rx, width2); - var top2 = Length.makePercent(y - ry, height2); - return { left: left2, top: top2 }; - } - [SUBSCRIBE_SELF("changeTabType")](type) { - var _a, _b; - const oldType = (_a = this.state.image) == null ? void 0 : _a.type; - const colorsteps = ((_b = this.state.image) == null ? void 0 : _b.colorsteps) || []; - if (colorsteps.length === 1) { - colorsteps.push(colorsteps[0]); - } - if (oldType === GradientType.STATIC) { - if (colorsteps.length === 0) { - colorsteps.push(colorsteps[0], colorsteps[0]); - } else if (colorsteps.length === 1) { - colorsteps.push(colorsteps[0]); + Vimeo.prototype.parseUrl = function(url) { + var match = url.match(/(?:\/(?:channels\/[\w]+|(?:(?:album\/\d+|groups\/[\w]+)\/)?videos?))?\/(\d+)/i); + return match ? match[1] : void 0; + }; + Vimeo.prototype.parseParameters = function(params) { + return this.parseTime(params); + }; + Vimeo.prototype.parseTime = function(params) { + if (params.t) { + params.start = getTime$3(params.t); + delete params.t; + } + return params; + }; + Vimeo.prototype.parse = function(url, params) { + var result = { + mediaType: this.mediaTypes.VIDEO, + params: this.parseParameters(params), + id: this.parseUrl(url) + }; + return result.id ? result : void 0; + }; + Vimeo.prototype.createUrl = function(baseUrl, vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = baseUrl + vi.id; + var startTime = params.start; + delete params.start; + url += combineParams$5(params); + if (startTime) { + url += "#t=" + startTime; } + return url; + }; + Vimeo.prototype.createLongUrl = function(vi, params) { + return this.createUrl("https://vimeo.com/", vi, params); + }; + Vimeo.prototype.createEmbedUrl = function(vi, params) { + return this.createUrl("//player.vimeo.com/video/", vi, params); + }; + base.bind(new Vimeo()); + var combineParams$6 = util.combineParams, getTime$4 = util.getTime; + function Wistia() { + this.provider = "wistia"; + this.alternatives = []; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl, + embedjsonp: this.createEmbedJsonpUrl + }; + this.mediaTypes = { + VIDEO: "video", + EMBEDVIDEO: "embedvideo" + }; } - var url = type === "image-resource" ? this.state.image.url : this.state.url; - this.state.image = SVGFill.changeImageType({ - type, - url, - colorsteps, - spreadMethod: this.state.image.spreadMethod - }); - this.refresh(); - this.updateData(); - } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - this.state.image.reset({ - [key]: value - }); - this.updateData(); - } - [SUBSCRIBE("changeColorStepOffset")](key, value) { - if (this.currentStep) { - this.currentStep.percent = value.value; - this.state.image.sortColorStep(); - this.refresh(); - this.updateData(); + Wistia.prototype.parseUrl = function(url) { + var match = url.match(/(?:(?:medias|iframe)\/|wvideo=)([\w-]+)/); + return match ? match[1] : void 0; + }; + Wistia.prototype.parseChannel = function(url) { + var match = url.match(/(?:(?:https?:)?\/\/)?([^.]*)\.wistia\./); + var channel = match ? match[1] : void 0; + if (channel === "fast" || channel === "content") { + return void 0; + } + return channel; + }; + Wistia.prototype.parseParameters = function(params, result) { + if (params.wtime) { + params.start = getTime$4(params.wtime); + delete params.wtime; + } + if (params.wvideo === result.id) { + delete params.wvideo; + } + return params; + }; + Wistia.prototype.parseMediaType = function(result) { + if (result.id && result.channel) { + return this.mediaTypes.VIDEO; + } else if (result.id) { + delete result.channel; + return this.mediaTypes.EMBEDVIDEO; + } else { + return void 0; + } + }; + Wistia.prototype.parse = function(url, params) { + var result = { + id: this.parseUrl(url), + channel: this.parseChannel(url) + }; + result.params = this.parseParameters(params, result); + result.mediaType = this.parseMediaType(result); + if (!result.id) { + return void 0; + } + return result; + }; + Wistia.prototype.createUrl = function(vi, params, url) { + if (params.start) { + params.wtime = params.start; + delete params.start; + } + url += combineParams$6(params); + return url; + }; + Wistia.prototype.createLongUrl = function(vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = "https://" + vi.channel + ".wistia.com/medias/" + vi.id; + return this.createUrl(vi, params, url); + }; + Wistia.prototype.createEmbedUrl = function(vi, params) { + if (!vi.id || !(vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.EMBEDVIDEO)) { + return void 0; + } + var url = "https://fast.wistia.com/embed/iframe/" + vi.id; + return this.createUrl(vi, params, url); + }; + Wistia.prototype.createEmbedJsonpUrl = function(vi) { + if (!vi.id || !(vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.EMBEDVIDEO)) { + return void 0; + } + return "https://fast.wistia.com/embed/medias/" + vi.id + ".jsonp"; + }; + base.bind(new Wistia()); + var combineParams$7 = util.combineParams; + function Youku() { + this.provider = "youku"; + this.defaultFormat = "long"; + this.formats = { + embed: this.createEmbedUrl, + "long": this.createLongUrl, + flash: this.createFlashUrl, + "static": this.createStaticUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - } - [CLICK("$back")](e) { - var rect2 = this.refs.$stepList.rect(); - var minX = rect2.x; - var maxX = rect2.right; - var x = e.xy.x; - if (x < minX) - x = minX; - else if (x > maxX) - x = maxX; - var percent = (x - minX) / rect2.width * 100; - this.state.image.insertColorStep(percent); - this.state.image.sortColorStep(); - this.refresh(); - this.updateData(); - } - [BIND("$el")]() { - var type = this.state.image.type; - if (type === "url") { - type = "image-resource"; + Youku.prototype.parseUrl = function(url) { + var match = url.match(/(?:(?:embed|sid)\/|v_show\/id_|VideoIDS=)([a-zA-Z0-9]+)/); + return match ? match[1] : void 0; + }; + Youku.prototype.parseParameters = function(params) { + if (params.VideoIDS) { + delete params.VideoIDS; + } + return params; + }; + Youku.prototype.parse = function(url, params) { + var _this = this; + var result = { + mediaType: this.mediaTypes.VIDEO, + id: _this.parseUrl(url), + params: _this.parseParameters(params) + }; + if (!result.id) { + return void 0; + } + return result; + }; + Youku.prototype.createUrl = function(baseUrl, vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = baseUrl + vi.id; + url += combineParams$7(params); + return url; + }; + Youku.prototype.createEmbedUrl = function(vi, params) { + return this.createUrl("http://player.youku.com/embed/", vi, params); + }; + Youku.prototype.createLongUrl = function(vi, params) { + return this.createUrl("http://v.youku.com/v_show/id_", vi, params); + }; + Youku.prototype.createStaticUrl = function(vi, params) { + return this.createUrl("http://static.youku.com/v1.0.0638/v/swf/loader.swf?VideoIDS=", vi, params); + }; + Youku.prototype.createFlashUrl = function(vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = "http://player.youku.com/player.php/sid/" + vi.id + "/v.swf"; + url += combineParams$7(params); + return url; + }; + base.bind(new Youku()); + var combineParams$8 = util.combineParams, getTime$5 = util.getTime; + function YouTube() { + this.provider = "youtube"; + this.alternatives = ["youtu", "ytimg"]; + this.defaultFormat = "long"; + this.formats = { + "short": this.createShortUrl, + "long": this.createLongUrl, + embed: this.createEmbedUrl, + shortImage: this.createShortImageUrl, + longImage: this.createLongImageUrl + }; + this.imageQualities = { + "0": "0", + "1": "1", + "2": "2", + "3": "3", + DEFAULT: "default", + HQDEFAULT: "hqdefault", + SDDEFAULT: "sddefault", + MQDEFAULT: "mqdefault", + MAXRESDEFAULT: "maxresdefault" + }; + this.defaultImageQuality = this.imageQualities.HQDEFAULT; + this.mediaTypes = { + VIDEO: "video", + PLAYLIST: "playlist", + SHARE: "share", + CHANNEL: "channel" + }; } - return { - "data-selected-editor": type + YouTube.prototype.parseVideoUrl = function(url) { + var match = url.match(/(?:(?:v|vi|be|videos|embed)\/(?!videoseries)|(?:v|ci)=)([\w-]{11})/i); + return match ? match[1] : void 0; + }; + YouTube.prototype.parseChannelUrl = function(url) { + var match = url.match(/\/channel\/([\w-]+)/); + if (match) { + return { + id: match[1], + mediaType: this.mediaTypes.CHANNEL + }; + } + match = url.match(/\/(?:c|user)\/([\w-]+)/); + if (match) { + return { + name: match[1], + mediaType: this.mediaTypes.CHANNEL + }; + } }; - } - [BIND("$stepList")]() { - return { - style: { - "background-image": this.getLinearGradient() + YouTube.prototype.parseParameters = function(params, result) { + if (params.start || params.t) { + params.start = getTime$5(params.start || params.t); + delete params.t; + } + if (params.v === result.id) { + delete params.v; + } + if (params.list === result.id) { + delete params.list; } + return params; }; - } - [LOAD("$stepList")]() { - var colorsteps = this.state.image.colorsteps || []; - return colorsteps.map((it) => { - var selected = this.$context.selection.isSelectedColorStep(it.id) ? "selected" : ""; - return ` -
-
- ${Math.floor(it.percent * 10) / 10} -
-
-
`; - }); - } - removeStep(id) { - this.state.image.removeColorStep(id); - this.refresh(); - this.updateData(); - } - selectStep(id) { - this.state.id = id; - this.$context.selection.selectColorStep(id); - if (this.state.image.colorsteps) { - this.currentStep = this.state.image.colorsteps.find((it) => this.$context.selection.isSelectedColorStep(it.id)); - this.parent.trigger("selectColorStep", this.currentStep.color); - } - this.refresh(); - } - [KEYUP("$el .step")](e) { - const id = e.$dt.data("id"); - switch (e.code) { - case "Delete": - case "Backspace": - this.removeStep(id); - break; - case "BracketRight": - this.sortToRight(id); - break; - case "BracketLeft": - this.sortToLeft(id); - break; - case "Equal": - this.appendColorStep(id); - break; - case "Minus": - this.prependColorStep(id); - break; - } - } - sortToRight(id) { - this.state.image.sortToRight(); - this.refresh(); - this.updateData(); - this.doFocus(id); - } - sortToLeft(id) { - this.state.image.sortToLeft(); - this.refresh(); - this.updateData(); - this.doFocus(id); - } - appendColorStep(id) { - const currentIndex = this.state.image.colorsteps.findIndex((it) => it.id === id); - const nextIndex = currentIndex + 1; - const currentColorStep = this.state.image.colorsteps[currentIndex]; - const nextColorStep = this.state.image.colorsteps[nextIndex]; - if (!nextColorStep) { - if (currentColorStep.percent !== 100) { - this.state.image.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); + YouTube.prototype.parseMediaType = function(result) { + if (result.params.list) { + result.list = result.params.list; + delete result.params.list; } - } else { - this.state.image.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); - } - this.refresh(); - this.updateData(); - this.doFocus(id); - } - doFocus(id) { - this.nextTick(() => { - this.refs.$stepList.$(".step[data-id='" + id + "']").focus(); - }, 100); - } - prependColorStep(id) { - const currentIndex = this.state.image.colorsteps.findIndex((it) => it.id === id); - const prevIndex = currentIndex - 1; - const currentColorStep = this.state.image.colorsteps[currentIndex]; - const prevColorStep = this.state.image.colorsteps[prevIndex]; - if (!prevColorStep) { - if (currentColorStep.percent !== 0) { - this.state.image.insertColorStep(currentColorStep.percent); + if (result.id && !result.params.ci) { + result.mediaType = this.mediaTypes.VIDEO; + } else if (result.list) { + delete result.id; + result.mediaType = this.mediaTypes.PLAYLIST; + } else if (result.params.ci) { + delete result.params.ci; + result.mediaType = this.mediaTypes.SHARE; + } else { + return void 0; } - } else { - this.state.image.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); - } - this.refresh(); - this.updateData(); - this.doFocus(id); - } - [POINTERSTART("$stepList .step") + MOVE() + END()](e) { - var id = e.$dt.attr("data-id"); - if (e.altKey) { - this.removeStep(id); - return false; - } else { - e.$dt.focus(); - this.isSelectedColorStep = this.$context.selection.isSelectedColorStep(id); - this.selectStep(id); - this.startXY = e.xy; - this.cachedStepListRect = this.refs.$stepList.rect(); - } - } - getStepListRect() { - return this.cachedStepListRect; - } - move(dx) { - var rect2 = this.getStepListRect(); - var minX = rect2.x; - var maxX = rect2.right; - var x = this.startXY.x + dx; - if (x < minX) - x = minX; - else if (x > maxX) - x = maxX; - var percent = (x - minX) / rect2.width * 100; - if (this.$config.get("bodyEvent").shiftKey) { - percent = Math.floor(percent); - } - this.currentStep.percent = percent; - this.state.image.sortColorStep(); - this.refresh(); - this.updateData(); - } - end(dx, dy) { - if (dx === 0 && dy === 0) { - if (this.isSelectedColorStep) { - if (this.currentStep) { - this.currentStep.cut = !this.currentStep.cut; - this.refresh(); - this.updateData(); + return result; + }; + YouTube.prototype.parse = function(url, params) { + var channelResult = this.parseChannelUrl(url); + if (channelResult) { + return channelResult; + } else { + var result = { + params, + id: this.parseVideoUrl(url) + }; + result.params = this.parseParameters(params, result); + result = this.parseMediaType(result); + return result; + } + }; + YouTube.prototype.createShortUrl = function(vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = "https://youtu.be/" + vi.id; + if (params.start) { + url += "#t=" + params.start; + } + return url; + }; + YouTube.prototype.createLongUrl = function(vi, params) { + var url = ""; + var startTime = params.start; + delete params.start; + if (vi.mediaType === this.mediaTypes.CHANNEL) { + if (vi.id) { + url += "https://www.youtube.com/channel/" + vi.id; + } else if (vi.name) { + url += "https://www.youtube.com/c/" + vi.name; + } else { + return void 0; } + } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list) { + params.feature = "share"; + url += "https://www.youtube.com/playlist"; + } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + params.v = vi.id; + url += "https://www.youtube.com/watch"; + } else if (vi.mediaType === this.mediaTypes.SHARE && vi.id) { + params.ci = vi.id; + url += "https://www.youtube.com/shared"; + } else { + return void 0; } - } - this.doFocus(this.state.id); - } - getLinearGradient() { - var { image: image2 } = this.state; - return `linear-gradient(to right, ${Gradient.toCSSColorString(image2.colorsteps)})`; - } - [SUBSCRIBE_SELF("setColorStepColor")](color2) { - if (this.state.image.type === "static-gradient") { - this.state.image.setColor(color2); - this.refresh(); - this.updateData(); - } else { - if (this.currentStep) { - this.currentStep.color = color2; - this.refresh(); - this.updateData(); + if (vi.list) { + params.list = vi.list; } - } - } - [SUBSCRIBE("setImageUrl")](url, datauri) { - if (this.state.image) { - this.state.url = url; - this.state.image.reset({ url, datauri }); - this.refresh(); - this.updateData(); - } - } - updateData(data = {}) { - this.setState(data, false); - this.parent.trigger(this.props.onchange, this.state.image.toString()); - } -} -var GradientPickerPopup$1 = ""; -class GradientPickerPopup extends BasePopup { - getTitle() { - var _a; - return createComponent("SelectEditor", { - ref: "$select", - value: ((_a = this.state.image) == null ? void 0 : _a.type) || GradientType.STATIC, - onchange: "changeTabType", - options: [ - { - value: GradientType.STATIC, - text: "Static" - }, - { - value: GradientType.LINEAR, - text: "Linear Gradient" - }, - { - value: GradientType.RADIAL, - text: "Radial Gradient" - }, - { - value: GradientType.CONIC, - text: "Conic Gradient" - }, - { - value: GradientType.REPEATING_LINEAR, - text: "Repeating Linear Gradient" - }, - { - value: GradientType.REPEATING_RADIAL, - text: "Repeating Radial Gradient" - }, - { - value: GradientType.REPEATING_CONIC, - text: "Repeating Conic Gradient" - }, - { - value: GradientType.URL, - text: "Image" + url += combineParams$8(params); + if (vi.mediaType !== this.mediaTypes.PLAYLIST && startTime) { + url += "#t=" + startTime; + } + return url; + }; + YouTube.prototype.createEmbedUrl = function(vi, params) { + var url = "https://www.youtube.com/embed"; + if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list) { + params.listType = "playlist"; + } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + url += "/" + vi.id; + if (params.loop === "1") { + params.playlist = vi.id; } - ] - }); - } - initialize() { - super.initialize(); - this.selectedTab = "static-gradient"; - } - getClassName() { - return "fill-picker-popup"; - } - getBody() { - var _a, _b; - return ` -
-
-
-
-
-
- ${createComponent("EmbedColorPicker", { - ref: "$color", - onchange: "changeColor" - })} -
-
- ${createComponent("ImageSelectEditor", { - ref: "$image", - key: "image", - value: (_b = this.state.image) == null ? void 0 : _b.url, - onchange: "changeImageUrl" - })} - ${createComponent("ImageAssetPicker", { - ref: "$asset", - onchange: "changeImageUrl" - })} -
-
-
- - `; - } - getColorString() { - var value = ""; - if (this.state.image instanceof Gradient) { - value = this.state.image.getColorString(); - } - return value; - } - getCurrentColor() { - return this.state.image.colorsteps[this.state.selectColorStepIndex || 0].color; - } - [BIND("$body")]() { - var _a; - return { - "data-selected-editor": (_a = this.state.image) == null ? void 0 : _a.type + } else { + return void 0; + } + if (vi.list) { + params.list = vi.list; + } + url += combineParams$8(params); + return url; }; - } - [LOAD("$gradientEditor") + DOMDIFF]() { - var _a; - if (((_a = this.state.image) == null ? void 0 : _a.type) === GradientType.URL) { - return ""; - } - return createComponent("GradientEditor", { - ref: "$g", - value: `${this.state.image ? this.state.image.toString() : ""}`, - index: this.state.selectColorStepIndex, - onchange: "changeGradientEditor" - }); - } - [SUBSCRIBE("updateGradientEditor")](data, targetColorStep) { - this.state.image = isString(data) ? BackgroundImage.parseImage(data) : data; - this.state.selectColorStepIndex = this.state.image.colorsteps.findIndex((it) => it.color === targetColorStep.color && it.percent === targetColorStep.percent); - this.children.$color.setValue(targetColorStep.color); - this.refresh(); - } - [SUBSCRIBE_SELF("changeGradientEditor")](data) { - this.state.image = isString(data) ? BackgroundImage.parseImage(data) : data; - this.updateTitle(); - this.updateData(); - } - [SUBSCRIBE_SELF("changeTabType")](key, type) { - this.children.$g.trigger("changeTabType", type); - this.refs.$body.attr("data-selected-editor", type); - } - [SUBSCRIBE_SELF("changeColor")](color2) { - this.children.$g.trigger("setColorStepColor", color2); - } - [SUBSCRIBE_SELF("changeImageUrl")](key, url) { - if (this.state.image) { - this.state.image.reset({ - url - }); - this.trigger("changeGradientEditor", this.state.image); - } - } - updateTitle() { - this.children.$select.setValue(this.state.image.type); - } - [SUBSCRIBE("showGradientPickerPopup")](data, params, rect2) { - data.changeEvent = data.changeEvent || "changeFillPopup"; - data.image = data.gradient; - data.params = params; - this.showByRect(this.makeRect(248, 560, rect2)); - this.setState(data); - this.updateTitle(); - this.emit("showGradientEditorView", { - index: data.index - }); - } - [SUBSCRIBE("hideGradientickerPopup")]() { - this.hide(); - this.emit("hideGradientEditorView"); - } - onClose() { - this.emit("hideGradientEditorView"); - } - [SUBSCRIBE("selectColorStep")](color2) { - this.children.$color.setValue(color2); - } - [SUBSCRIBE("changeColorStep")](data = {}) { - this.state.image.reset(__spreadValues({}, data)); - this.updateData(); - } - load(...args2) { - if (this.$el.isShow()) { - super.load(...args2); + YouTube.prototype.createImageUrl = function(baseUrl, vi, params) { + if (!vi.id || vi.mediaType !== this.mediaTypes.VIDEO) { + return void 0; + } + var url = baseUrl + vi.id + "/"; + var quality = params.imageQuality || this.defaultImageQuality; + return url + quality + ".jpg"; + }; + YouTube.prototype.createShortImageUrl = function(vi, params) { + return this.createImageUrl("https://i.ytimg.com/vi/", vi, params); + }; + YouTube.prototype.createLongImageUrl = function(vi, params) { + return this.createImageUrl("https://img.youtube.com/vi/", vi, params); + }; + base.bind(new YouTube()); + var combineParams$9 = util.combineParams, getTime$6 = util.getTime; + function SoundCloud() { + this.provider = "soundcloud"; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + TRACK: "track", + PLAYLIST: "playlist", + APITRACK: "apitrack", + APIPLAYLIST: "apiplaylist" + }; } - } - getValue() { - return `${this.state.image}`; - } - updateData() { - this.state.instance.trigger(this.state.changeEvent, this.getValue(), this.state.params); - } -} -class FillPickerPopup extends BasePopup { - getTitle() { - var _a; - return createComponent("SelectEditor", { - ref: "$select", - value: ((_a = this.state.image) == null ? void 0 : _a.type) || GradientType.STATIC, - onchange: "changeTabType", - options: [ - { - value: GradientType.STATIC, - text: "Static" - }, - { - value: GradientType.LINEAR, - text: "Linear Gradient" - }, - { - value: GradientType.RADIAL, - text: "Radial Gradient" - }, - { - value: GradientType.URL, - text: "Image" + SoundCloud.prototype.parseUrl = function(url, result) { + var match = url.match(/(?:m\.)?soundcloud\.com\/(?:([\w-]+)\/(sets\/)?)([\w-]+)/i); + if (!match) { + return result; + } + result.channel = match[1]; + if (match[1] === "playlists" || match[2]) { + result.list = match[3]; + } else { + result.id = match[3]; + } + return result; + }; + SoundCloud.prototype.parseParameters = function(params) { + if (params.t) { + params.start = getTime$6(params.t); + delete params.t; + } + return params; + }; + SoundCloud.prototype.parseMediaType = function(result) { + if (result.id) { + if (result.channel === "tracks") { + delete result.channel; + delete result.params.url; + result.mediaType = this.mediaTypes.APITRACK; + } else { + result.mediaType = this.mediaTypes.TRACK; } - ] - }); - } - initState() { - return { - image: SVGStaticGradient.create() + } + if (result.list) { + if (result.channel === "playlists") { + delete result.channel; + delete result.params.url; + result.mediaType = this.mediaTypes.APIPLAYLIST; + } else { + result.mediaType = this.mediaTypes.PLAYLIST; + } + } + return result; }; - } - initialize() { - super.initialize(); - this.selectedTab = "static-gradient"; - } - getClassName() { - return "fill-picker-popup"; - } - getBody() { - var _a, _b; - return ` -
-
-
-
-
-
- ${createComponent("EmbedColorPicker", { - ref: "$color", - onchange: "changeColor" - })} -
-
- ${createComponent("ImageSelectEditor", { - ref: "$image", - key: "image", - value: (_b = this.state.image) == null ? void 0 : _b.url, - onchange: "changeImageUrl" - })} - ${createComponent("ImageAssetPicker", { - ref: "$asset", - onchange: "changeImageUrl" - })} -
-
-
- - `; - } - [BIND("$body")]() { - var _a; - return { - "data-selected-editor": (_a = this.state.image) == null ? void 0 : _a.type + SoundCloud.prototype.parse = function(url, params) { + var result = {}; + result = this.parseUrl(url, result); + result.params = this.parseParameters(params); + result = this.parseMediaType(result); + if (!result.id && !result.list) { + return void 0; + } + return result; }; - } - getColorString() { - var value = ""; - if (this.state.image instanceof Gradient) { - value = this.state.image.getColorString(); + SoundCloud.prototype.createLongUrl = function(vi, params) { + var url = ""; + var startTime = params.start; + delete params.start; + if (vi.mediaType === this.mediaTypes.TRACK && vi.id && vi.channel) { + url = "https://soundcloud.com/" + vi.channel + "/" + vi.id; + } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.list && vi.channel) { + url = "https://soundcloud.com/" + vi.channel + "/sets/" + vi.list; + } else if (vi.mediaType === this.mediaTypes.APITRACK && vi.id) { + url = "https://api.soundcloud.com/tracks/" + vi.id; + } else if (vi.mediaType === this.mediaTypes.APIPLAYLIST && vi.list) { + url = "https://api.soundcloud.com/playlists/" + vi.list; + } else { + return void 0; + } + url += combineParams$9(params); + if (startTime) { + url += "#t=" + startTime; + } + return url; + }; + SoundCloud.prototype.createEmbedUrl = function(vi, params) { + var url = "https://w.soundcloud.com/player/"; + delete params.start; + if (vi.mediaType === this.mediaTypes.APITRACK && vi.id) { + params.url = "https%3A//api.soundcloud.com/tracks/" + vi.id; + } else if (vi.mediaType === this.mediaTypes.APIPLAYLIST && vi.list) { + params.url = "https%3A//api.soundcloud.com/playlists/" + vi.list; + } else { + return void 0; + } + url += combineParams$9(params); + return url; + }; + base.bind(new SoundCloud()); + var combineParams$a = util.combineParams; + function TeacherTube() { + this.provider = "teachertube"; + this.alternatives = []; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video", + AUDIO: "audio", + DOCUMENT: "document", + CHANNEL: "channel", + COLLECTION: "collection", + GROUP: "group" + }; } - return value; - } - getCurrentColor() { - return this.state.image.colorsteps[this.state.selectColorStepIndex || 0].color; - } - [LOAD("$gradientEditor")]() { - var _a; - if (((_a = this.state.image) == null ? void 0 : _a.type) === GradientType.URL) { - return ""; + TeacherTube.prototype.parse = function(url, params) { + var result = {}; + result.list = this.parsePlaylist(params); + result.params = params; + var match = url.match(/\/(audio|video|document|user\/channel|collection|group)\/(?:[\w-]+-)?(\w+)/); + if (!match) { + return void 0; + } + result.mediaType = this.parseMediaType(match[1]); + result.id = match[2]; + return result; + }; + TeacherTube.prototype.parsePlaylist = function(params) { + if (params["playlist-id"]) { + var list2 = params["playlist-id"]; + delete params["playlist-id"]; + return list2; + } + return void 0; + }; + TeacherTube.prototype.parseMediaType = function(mediaTypeMatch) { + switch (mediaTypeMatch) { + case "audio": + return this.mediaTypes.AUDIO; + case "video": + return this.mediaTypes.VIDEO; + case "document": + return this.mediaTypes.DOCUMENT; + case "user/channel": + return this.mediaTypes.CHANNEL; + case "collection": + return this.mediaTypes.COLLECTION; + case "group": + return this.mediaTypes.GROUP; + } + }; + TeacherTube.prototype.createLongUrl = function(vi, params) { + if (!vi.id) { + return void 0; + } + var url = "https://www.teachertube.com/"; + if (vi.list) { + params["playlist-id"] = vi.list; + } + if (vi.mediaType === this.mediaTypes.CHANNEL) { + url += "user/channel/"; + } else { + url += vi.mediaType + "/"; + } + url += vi.id; + url += combineParams$a(params); + return url; + }; + TeacherTube.prototype.createEmbedUrl = function(vi, params) { + if (!vi.id) { + return void 0; + } + var url = "https://www.teachertube.com/embed/"; + if (vi.mediaType === this.mediaTypes.VIDEO || vi.mediaType === this.mediaTypes.AUDIO) { + url += vi.mediaType + "/" + vi.id; + } else { + return void 0; + } + url += combineParams$a(params); + return url; + }; + base.bind(new TeacherTube()); + var combineParams$b = util.combineParams; + function TikTok() { + this.provider = "tiktok"; + this.defaultFormat = "long"; + this.formats = { + "long": this.createLongUrl + }; + this.mediaTypes = { + VIDEO: "video" + }; } - return createComponent("FillEditor", { - ref: "$g", - value: `${this.state.image}`, - index: this.state.selectColorStepIndex, - onchange: "changeFillEditor" - }); - } - [SUBSCRIBE("updateFillEditor")](data, targetColorStep = void 0) { - this.state.image = isString(data) ? SVGFill.parseImage(data) : data; - if (targetColorStep) { - this.state.selectColorStepIndex = this.state.image.colorsteps.findIndex((it) => it.color === targetColorStep.color && it.percent === targetColorStep.percent); - this.children.$color.setValue(targetColorStep.color); + TikTok.prototype.parse = function(url, params) { + var result = { + params, + mediaType: this.mediaTypes.VIDEO + }; + var match = url.match(/@([^/]+)\/video\/(\d{19})/); + if (!match) { + return; + } + result.channel = match[1]; + result.id = match[2]; + return result; + }; + TikTok.prototype.createLongUrl = function(vi, params) { + var url = ""; + if (vi.mediaType === this.mediaTypes.VIDEO && vi.id && vi.channel) { + url += "https://www.tiktok.com/@".concat(vi.channel, "/video/").concat(vi.id); + } else { + return void 0; + } + url += combineParams$b(params); + return url; + }; + base.bind(new TikTok()); + var combineParams$c = util.combineParams; + function Ted() { + this.provider = "ted"; + this.formats = { + "long": this.createLongUrl, + embed: this.createEmbedUrl + }; + this.mediaTypes = { + VIDEO: "video", + PLAYLIST: "playlist" + }; } - this.refresh(); - } - [SUBSCRIBE_SELF("changeFillEditor")](data) { - this.state.image = isString(data) ? SVGFill.parseImage(data) : data; - this.updateTitle(); - this.updateData(); - } - [SUBSCRIBE_SELF("changeTabType")](key, type) { - this.children.$g.trigger("changeTabType", type); - this.refs.$body.attr("data-selected-editor", type); - } - [SUBSCRIBE_SELF("changeColor")](color2) { - this.children.$g.trigger("setColorStepColor", color2); - } - [SUBSCRIBE_SELF("changeImageUrl")](url) { - if (this.state.image) { - this.state.image.reset({ - url + Ted.prototype.parseUrl = function(url, result) { + var match = url.match(/\/(talks|playlists\/(\d+))\/([\w-]+)/); + var channel = match ? match[1] : void 0; + if (!channel) { + return result; + } + result.channel = channel.split("/")[0]; + result.id = match[3]; + if (result.channel === "playlists") { + result.list = match[2]; + } + return result; + }; + Ted.prototype.parseMediaType = function(result) { + if (result.id && result.channel === "playlists") { + delete result.channel; + result.mediaType = this.mediaTypes.PLAYLIST; + } + if (result.id && result.channel === "talks") { + delete result.channel; + result.mediaType = this.mediaTypes.VIDEO; + } + return result; + }; + Ted.prototype.parse = function(url, params) { + var result = { + params + }; + result = this.parseUrl(url, result); + result = this.parseMediaType(result); + if (!result.id) { + return void 0; + } + return result; + }; + Ted.prototype.createLongUrl = function(vi, params) { + var url = ""; + if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + url += "https://ted.com/talks/" + vi.id; + } else if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.id) { + url += "https://ted.com/playlists/" + vi.list + "/" + vi.id; + } else { + return void 0; + } + url += combineParams$c(params); + return url; + }; + Ted.prototype.createEmbedUrl = function(vi, params) { + var url = "https://embed.ted.com/"; + if (vi.mediaType === this.mediaTypes.PLAYLIST && vi.id) { + url += "playlists/" + vi.list + "/" + vi.id; + } else if (vi.mediaType === this.mediaTypes.VIDEO && vi.id) { + url += "talks/" + vi.id; + } else { + return void 0; + } + url += combineParams$c(params); + return url; + }; + base.bind(new Ted()); + var lib = base; + return lib; + }); +})(jsVideoUrlParser); +var urlParser = jsVideoUrlParser.exports; +var convertPasteText = { + command: "convertPasteText", + execute: async (editor, text2) => { + const embedUrl = urlParser.create({ + videoInfo: urlParser.parse(text2), + format: "embed", + mediaType: "clip" + }); + if (embedUrl) { + const center2 = editor.context.viewport.center; + const width2 = 300; + const height2 = 200; + editor.context.commands.emit("newComponent", "iframe", { + x: center2[0] - width2 / 2, + y: center2[1] - height2 / 2, + width: width2, + height: height2, + backgroundColor: "transparent", + url: embedUrl }); - this.trigger("changeFillEditor", this.state.image); - } - } - updateTitle() { - this.children.$select.setValue(this.state.image.type); - } - [SUBSCRIBE("showFillPickerPopup")](data, params, rect2) { - data.changeEvent = data.changeEvent || "changeFillPopup"; - data.params = params; - this.showByRect(this.makeRect(248, 560, rect2)); - this.setState(data); - this.updateTitle(); - if (data.image.isGradient()) { - this.trigger("selectColorStep", data.image.colorsteps[0].color); } - this.emit("showFillEditorView", { - key: data.key - }); - } - [SUBSCRIBE("hideFillPickerPopup")]() { - this.hide(); - this.emit("hideFillEditorView"); } - onClose() { - this.emit("hideFillEditorView"); - } - [SUBSCRIBE("selectColorStep")](color2) { - this.children.$color.setValue(color2); - } - [SUBSCRIBE("changeColorStep")](data = {}) { - this.state.image.reset(__spreadValues({}, data)); - this.updateData(); - } - load(...args2) { - if (this.$el.isShow()) { - super.load(...args2); +}; +var __glob_0_31 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convertPasteText +}, Symbol.toStringTag, { value: "Module" })); +function convertPath(editor, pathString2, rect2 = null) { + var current = editor.context.selection.current; + if (current) { + if (current.is("svg-path", "svg-brush", "svg-textpath")) { + var d = pathString2; + if (rect2) { + var parser = new PathParser(pathString2); + parser.scale(current.width / rect2.width, current.height / rect2.height); + d = parser.d; + } + editor.context.commands.executeCommand("setAttribute", "set attribute -d", editor.context.selection.packByValue({ d }, current.id)); + } else if (current.clipPath.includes("path")) { + var d = pathString2; + if (rect2) { + var parser = new PathParser(pathString2); + parser.scale(current.width / rect2.width, current.height / rect2.height); + d = parser.d; + } + editor.context.commands.executeCommand("setAttribute", "change clip path", editor.context.selection.packByValue({ clipPath: `path(${d})` }, current.id)); } } - getValue() { - return `${this.state.image}`; - } - updateData() { - this.state.instance.trigger(this.state.changeEvent, this.getValue(), this.state.params); - } } -var FillSingleEditor$1 = ""; -class FillSingleEditor extends EditorElement { - initState() { - return { - index: this.props.index, - label: this.props.label, - simple: this.props.simple === "true" ? true : false, - image: SVGFill.parseImage(this.props.value || this.props.image || "transparent") - }; - } - get fillId() { - return this.id + "fill"; - } - updateData(opt = {}) { - this.setState(opt, false); - this.modifyValue(opt); +var __glob_0_32 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": convertPath +}, Symbol.toStringTag, { value: "Module" })); +var copy_path = { + command: "copy.path", + description: "copy as path for item with path string(d attribute)", + execute: function(editor) { + const current = editor.context.selection.current; + if (current) { + let newPath = PathParser.fromSVGString(current.d); + try { + const newLayerAttrs = current.toSVGPath(); + editor.context.commands.executeCommand("addLayer", `copy path`, editor.createModel(__spreadValues(__spreadValues({ + itemType: "svg-path" + }, newLayerAttrs), current.updatePath(newPath.d))), true, current.parent); + } catch (e) { + console.error(e); + } + } } - modifyValue() { - this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.state.index); +}; +var __glob_0_33 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": copy_path +}, Symbol.toStringTag, { value: "Module" })); +var copyLayer = { + command: "history.copyLayer", + description: "copy in selected items ", + description_ko: ["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "], + execute: async function(editor, ids = []) { + let currentIds = ids.map((id) => editor.get(id)).filter(Boolean).map((item) => item.id); + if (!currentIds.length) { + currentIds = editor.context.selection.ids; + } + if (!currentIds.length) + return; + const items = await editor.json.renderAll(currentIds.map((it) => editor.get(it))); + const newIds = []; + const itemList = {}; + const parentList = {}; + let updateData = {}; + items.forEach((itemJSON) => { + const referenceId = itemJSON.referenceId; + const sourceItem = editor.get(referenceId); + parentList[sourceItem.parentId] = sourceItem.parent; + const model = editor.createModel(itemJSON); + model.renameWithCount(); + sourceItem.insertAfter(model); + newIds.push(model.id); + itemList[model.id] = itemJSON; + updateData[model.id] = model.toCloneObject(); + }); + Object.values(parentList).forEach((parent) => { + updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); + }); + editor.context.commands.emit("setAttribute", updateData); + editor.nextTick(() => { + editor.context.selection.select(...newIds); + }); } - getValue() { - return this.state.image.toString(); +}; +var __glob_0_34 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": copyLayer +}, Symbol.toStringTag, { value: "Module" })); +var copyTimelineProperty = { + command: "copyTimelineProperty", + execute: function(editor, layerId, property, newTime = null) { + _currentProject(editor, (project2) => { + project2.copyTimelineKeyframe(layerId, property, newTime); + editor.emit("refreshTimeline"); + }); } - setValue(value) { - this.setState({ - image: SVGFill.parseImage(value) +}; +var __glob_0_35 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": copyTimelineProperty +}, Symbol.toStringTag, { value: "Module" })); +var deleteTimelineKeyframe = { + command: "deleteTimelineKeyframe", + execute: function(editor) { + _currentProject(editor, (project2) => { + editor.timeline.each((item) => { + project2.deleteTimelineKeyframe(item.layerId, item.property, item.id); + }); + editor.timeline.empty(); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); }); } - [BIND("$fillView")]() { - var image2 = this.state.image; - if (!image2) - return { innerHTML: "" }; - return { - innerHTML: image2.toSVGString(this.fillId, { - width: 20, - height: 20, - sizeType: "percent" - }) - }; +}; +var __glob_0_36 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": deleteTimelineKeyframe +}, Symbol.toStringTag, { value: "Module" })); +var doubleclick_item = { + command: "doubleclick.item", + execute: function(editor, evt, id) { + const item = editor.get(id); + if (editor.context.selection.isOne && item) { + if (editor.context.selection.checkChildren(item.id)) { + editor.context.selection.select(item); + } else { + if (editor.context.selection.check(item)) { + editor.context.commands.emit("open.editor"); + editor.emit("removeGuideLine"); + } else { + this.selectInWorldPosition(editor, evt, item); + } + } + } else { + this.selectInWorldPosition(editor, evt, item); + } + }, + selectInWorldPosition: function(editor, evt, item) { + const point2 = editor.context.viewport.getWorldPosition(evt); + if (editor.context.selection.hasPoint(point2) || editor.context.selection.hasChildrenPoint(point2)) { + editor.context.selection.select(item); + editor.snapManager.clear(); + } } - [BIND("$fillColor")]() { - var image2 = this.state.image; - if (!image2) - return { fill: "transparent" }; - return { - fill: image2.toFillValue(this.fillId) - }; +}; +var __glob_0_37 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": doubleclick_item +}, Symbol.toStringTag, { value: "Module" })); +function downloadFile(datauri, filename = "elf.json") { + var a = document.createElement("a"); + a.href = datauri; + a.download = filename; + a.click(); +} +var downloadJSON = { + command: "downloadJSON", + execute: function(editor, filename) { + var json = JSON.stringify(editor.context.modelManager.toJSON()); + var datauri = "data:application/json;base64," + window.btoa(unescape(encodeURIComponent(json))); + downloadFile(datauri, filename || "elf.json"); } - [BIND("$colors")]() { - var image2 = this.state.image; - if (!image2) - return { fill: "transparent" }; - var colors2 = image2.type != "url" ? `${image2.colorsteps[0].color}` : "transparent"; - if ([GradientType.LINEAR, GradientType.RADIAL].includes(image2.type)) { - colors2 = image2.colorsteps.map((it) => { - return ``; - }).join(""); +}; +var __glob_0_38 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": downloadJSON +}, Symbol.toStringTag, { value: "Module" })); +var ExportManager = { + makeProjectStyle(item) { + const keyframeString = item.toKeyframeString(); + const rootVariable = item.toRootVariableCSS(); + return ` + :root { + ${CSS_TO_STRING(rootVariable)} + } + /* keyframe */ + ${keyframeString} + `; + }, + makeStyle(item, appendCSS = "") { + if (item.is("project")) { + return this.makeProjectStyle(item); } - return { - innerHTML: `
${colors2}
` - }; - } - template() { - var { label, simple } = this.state; - var hasLabel = label ? "has-label" : ""; + const cssString = item.generateView(`[data-id='${item.id}']`, appendCSS); return ` -
- ${label ? `` : ""} -
-
-
- - - - - -
-
-
-
-
- `; - } - [CLICK()]() { - this.viewGradientPopup(); - } - viewGradientPopup() { - this.emit("showFillPickerPopup", { - instance: this, - key: this.props.key, - changeEvent: "changeFillSingle", - image: this.state.image - }, null, this.$el.rect()); - } - [SUBSCRIBE("changeFillSingle")](image2) { - this.updateData({ image: SVGFill.parseImage(image2) }); - this.refresh(); + ${cssString} + ` + item.layers.map((it) => { + return this.makeStyle(it); + }).join(""); + }, + makeSvg(project2) { + const SVGString = project2.toSVGString ? project2.toSVGString() : ""; + return ` + ${SVGString ? `${SVGString}` : ""} + `; + }, + generateSVG(editor, rootItem) { + return editor.replaceLocalUrltoRealUrl(editor.svg.render(rootItem)); } +}; +function createImagePng(img, callback, imageType = "image/png") { + var canvas = Dom.create("canvas"); + var { width: width2, height: height2 } = img; + canvas.resize({ width: width2, height: height2 }); + canvas.drawImage(img); + callback && callback(canvas.toDataURL(imageType)); } -var GradientSingleEditor$1 = ""; -class GradientSingleEditor extends EditorElement { - initState() { - return { - index: this.props.index, - image: this.props.image, - color: "rgba(0, 0, 0, 1)" - }; - } - updateData(opt = {}) { - this.setState(opt, false); - this.modifyValue(opt); - } - modifyValue(value) { - this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); - } - setValue(obj2) { - this.setState(__spreadValues({}, obj2)); +var downloadPNG = { + command: "downloadPNG", + execute: function(editor) { + const item = editor.context.selection.current; + if (item) { + const svgString = ExportManager.generateSVG(editor, item).trim(); + const datauri = "data:image/svg+xml;base64," + window.btoa(svgString); + const filename = item.id; + loadOriginalImage({ local: datauri }, (info, img) => { + createImagePng(img, (pngDataUri) => { + downloadFile(pngDataUri, filename); + }); + }); + } } - [BIND("$miniView")]() { - const project2 = this.$context.selection.currentProject; - let image2; - if (this.state.image.type === GradientType.URL) { - const imageUrl = project2.getImageValueById(this.state.image.url); - image2 = this.state.image.toString(imageUrl); - } else { - image2 = this.state.image.toCSSString(); +}; +var __glob_0_39 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": downloadPNG +}, Symbol.toStringTag, { value: "Module" })); +var downloadSVG = { + command: "downloadSVG", + execute: function(editor) { + const item = editor.context.selection.current; + if (item) { + var svgString = ExportManager.generateSVG(editor, item).trim(); + var datauri = "data:image/svg+xml;base64," + window.btoa(svgString); + var filename = item.id; + downloadFile(datauri, filename); } - return { - style: { - "background-image": image2 + } +}; +var __glob_0_40 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": downloadSVG +}, Symbol.toStringTag, { value: "Module" })); +var drop_asset = { + command: "drop.asset", + execute: async function(editor, obj2, id = null) { + if (obj2.color) { + editor.context.commands.emit("addBackgroundColor", obj2.color, id); + } else if (obj2.gradient) { + editor.context.commands.emit("addBackgroundImageGradient", obj2.gradient, id); + } else if (obj2.pattern) { + editor.context.commands.emit("addBackgroundImagePattern", obj2.pattern, id); + } else if (obj2.imageUrl) { + editor.context.commands.emit("addBackgroundImageAsset", obj2.imageUrl, id); + } else if (obj2.asset) { + const assetData = await editor.storageManager.getCustomAsset(obj2.asset.id); + if (assetData) { + editor.context.commands.emit("addArtBoard", assetData, obj2.asset.center); } - }; + } + _doForceRefreshSelection(editor); } - template() { - return ` -
-
-
-
-
-
-
- `; +}; +var __glob_0_41 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": drop_asset +}, Symbol.toStringTag, { value: "Module" })); +var dropImageUrl = { + command: "dropImageUrl", + execute: function(editor, imageUrl) { + loadOriginalImage({ local: imageUrl }, (info) => { + editor.context.commands.emit("addImage", __spreadValues({ src: info.local }, info)); + }); } - [CLICK("$preview")]() { - this.viewGradientPopup(); +}; +var __glob_0_42 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": dropImageUrl +}, Symbol.toStringTag, { value: "Module" })); +var editor_config_body_event = { + command: "change.bodyEvent", + description: "fire when bodyEvent was set", + execute: function(editor) { + const $target = Dom.create(editor.context.config.get("bodyEvent").target); + editor.context.config.init("onMouseMovepageContainer", $target); } - viewGradientPopup() { - this.emit("showGradientPickerPopup", { - instance: this, - changeEvent: "changeGradientSingle", - index: this.state.index, - gradient: this.state.image - }, null, this.$el.rect()); +}; +var __glob_0_43 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editor_config_body_event +}, Symbol.toStringTag, { value: "Module" })); +var fileDropItems = { + command: "fileDropItems", + execute: function(editor, items = []) { + editor.context.commands.emit("updateResource", items); } - [SUBSCRIBE("changeGradientSingle")](image2) { - var _a; - image2 = BackgroundImage.parseImage(image2); - const currentImage = (_a = this.$context.selection.current.getBackgroundImage(this.state.index)) == null ? void 0 : _a.image; - switch (currentImage.type) { - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - image2.reset({ - radialPosition: currentImage.radialPosition || ["50%", "50%"], - radialType: currentImage.radialType || RadialGradientType.CIRCLE - }); - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - image2.reset({ - angle: currentImage.angle || 0, - radialPosition: currentImage.radialPosition || ["50%", "50%"] - }); - break; - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - case GradientType.STATIC: - image2.reset({ - angle: currentImage.angle || 0 - }); - break; +}; +var __glob_0_44 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": fileDropItems +}, Symbol.toStringTag, { value: "Module" })); +function second(fps, timecode2) { + if (isString(timecode2)) { + var [hour, minute, second2, frame] = timecode2.split(":"); + hour = parseInt(hour, 10); + minute = parseInt(minute, 10); + second2 = parseInt(second2, 10); + frame = parseInt(frame, 10); + return hour * 3600 + minute * 60 + second2 + frame * (1 / fps); + } else if (isNumber(timecode2)) { + return timecode2 / fps; + } + return 0; +} +function timecode(fps, seconds) { + var h = Math.floor(seconds / 3600); + var m = Math.floor(seconds / 60 % 60); + var s = Math.floor(seconds % 60); + var f = Math.round((seconds - Math.floor(seconds)) * fps); + if (f === fps) { + f = 0; + s += 1; + if (s === 60) { + m += 1; + if (m === 60) { + h += 1; + } } - this.updateData({ image: image2 }); - this.refresh(); } + return [h, m, s, f].map((t) => { + return (t + "").padStart(2, "0"); + }).join(":"); } -function gradient(editor) { - editor.registerElement({ - FillSingleEditor, - FillEditor, - GradientSingleEditor - }); - editor.registerAlias({ - "fill-single": "FillSingleEditor", - fill: "FillEditor", - "gradient-single": "GradientSingleEditor" - }); - editor.registerUI("popup", { - FillPickerPopup, - GradientPickerPopup - }); +function framesToTimecode(fps, frames, start2 = null) { + return timecode(fps, second(fps, frames) - second(fps, start2)); +} +function makeTimer(opt) { + var timer2 = { + id: 0, + start: 0, + speed: opt.speed || 1, + elapsed: opt.elapsed || 0, + duration: opt.duration || 0, + iterationStartCount: 1, + iterationCount: opt.iterationCount || Number.MAX_SAFE_INTEGER, + direction: opt.direction || "normal", + log: [], + logIndex: 0, + tick: opt.tick || (() => { + }), + startCallback: opt.start || (() => { + }), + endCallback: opt.end || (() => { + }), + firstCallback: opt.first || (() => { + }), + lastCallback: opt.last || (() => { + }) + }; + const isForward = () => { + if (timer2.direction === "normal") { + return true; + } else if (timer2.direction === "reverse") { + return false; + } else if (timer2.direction === "alternate") { + return timer2.iterationStartCount % 2 === 1; + } else if (timer2.direction === "alternate-reverse") { + return timer2.iterationStartCount % 2 === 0; + } + }; + const calculateForDirection = (rate) => { + return isForward() ? rate : 1 - rate; + }; + const tick = (now) => { + var isStart = false; + if (timer2.start === null) { + timer2.start = now; + isStart = true; + } + const dt = now - timer2.start; + timer2.elapsed += dt * timer2.speed; + timer2.start = now; + if (timer2.elapsed > timer2.duration) { + timer2.elapsed = timer2.duration; + } + var elapsed = calculateForDirection(timer2.elapsed / timer2.duration) * timer2.duration; + if (isStart) + timer2.startCallback(elapsed, timer2); + timer2.log[timer2.logIndex++] = { elapsed, dt: timer2.lastTime - elapsed }; + timer2.lastTime = elapsed; + timer2.tick(elapsed, timer2); + if (timer2.elapsed === timer2.duration) { + end2(); + } else { + frameStart(); + } + }; + const frameStart = () => { + timer2.id = window.requestAnimationFrame(tick); + }; + const end2 = () => { + timer2.endCallback(timer2.elapsed, timer2); + timer2.iterationStartCount++; + if (timer2.iterationStartCount > timer2.iterationCount) { + timer2.lastCallback(timer2.elapsed, timer2); + window.cancelAnimationFrame(timer2.id); + } else { + timer2.start = null; + timer2.elapsed = 0; + frameStart(); + } + }; + const play2 = (opt2 = {}) => { + timer2.start = null; + timer2.iterationStartCount = 1; + timer2.log = []; + timer2.lastTime = 0; + timer2.logIndex = 0; + if (isNumber(opt2.elapsed)) + timer2.elapsed = opt2.elapsed; + if (isNumber(opt2.speed)) + timer2.speed = opt2.speed; + if (isNumber(opt2.duration)) + timer2.duration = opt2.duration; + if (isNumber(opt2.iterationCount)) + timer2.iterationCount = opt2.iterationCount || Number.MAX_SAFE_INTEGER; + if (isString(opt2.direction)) + timer2.direction = opt2.direction; + if (isFunction(opt2.tick)) + timer2.tick = opt2.tick; + if (isFunction(opt2.start)) + timer2.startCallback = opt2.start; + if (isFunction(opt2.end)) + timer2.endCallback = opt2.end; + if (isFunction(opt2.first)) + timer2.firstCallback = opt2.first; + if (isFunction(opt2.last)) + timer2.lastCallback = opt2.last; + if (isFunction(opt2.stop)) + timer2.stopCallback = opt2.stop; + timer2.firstCallback(timer2.elapsed, timer2); + frameStart(); + }; + const stop = () => { + timer2.stopCallback(timer2.elapsed, timer2); + window.cancelAnimationFrame(timer2.id); + }; + const seek = (t) => { + timer2.elapsed = t; + timer2.tick(timer2.elapsed, timer2); + }; + const first = () => { + seek(0); + }; + const last = () => { + seek(timer2.duration); + }; + return { + play: play2, + stop, + tick, + first, + last, + seek, + timer: timer2 + }; } -var conic = { - title: "Conic", - key: "conic", - execute: function(count = 42) { - return repeat(count).map(() => { - var x = randomNumber(45, 55); - var y = randomNumber(45, 55); - var angle = randomNumber(0, 360); - return { - gradient: `conic-gradient(from ${angle}deg at ${x}% ${y}%, ${ColorStep.createColorStep(2, 360, "deg")})` - }; - }); - } -}; -const angle_list$2 = ["0deg", "45deg", "90deg"]; -var linear = { - title: "Linear", - key: "linear", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `linear-gradient(${randomItem(...angle_list$2)}, ${ColorStep.createColorStep(2)})` - }; - }); - } -}; -var radial = { - title: "Radial", - key: "radial", - execute: function(count = 42) { - return repeat(count).map(() => { - var shape2 = "circle"; - return { - gradient: `radial-gradient(${shape2}, ${ColorStep.createColorStep(2)})` - }; +var firstTimelineItem = { + command: "firstTimelineItem", + execute: function(editor) { + _currentProject(editor, (project2, timeline) => { + var firstTime = project2.getSelectedTimelineFirstTime(); + project2.setTimelineCurrentTime(timecode(timeline.fps, firstTime)); + project2.seek(); + editor.emit("playTimeline"); }); } }; -var randomConic = { - title: "Random Conic", - key: "random-conic", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `conic-gradient(from 0deg at 50% 50%, ${ColorStep.createColorStep(10, 360, "deg")})` - }; - }); +var __glob_0_45 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": firstTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var group_item = { + command: "group.item", + execute: function(editor, opt = {}) { + if (editor.context.selection.length === 0) + return; + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.generateListNumber(); + const list2 = editor.context.selection.map((item) => { + return { depth: item.depth, item }; + }); + list2.sort((a, b) => { + if (a.depth === b.depth) { + return a.no > b.no ? -1 : 1; + } + return a.depth > b.depth ? 1 : -1; + }); + const groupLayer = editor.createModel(__spreadValues(__spreadValues({ + itemType: "rect" + }, editor.context.selection.itemRect), opt)); + list2[0].item.insertAfter(groupLayer); + list2.forEach(({ item }) => { + groupLayer.appendChild(item); + }); + editor.context.selection.select(groupLayer); + editor.emit("refreshAll"); + } } }; -const angle_list$1 = ["0deg", "45deg", "90deg"]; -var randomLinear = { - title: "Random Linear", - key: "random-linear", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `linear-gradient(${randomItem(...angle_list$1)}, ${ColorStep.createColorStep(10)})` - }; +var __glob_0_46 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": group_item +}, Symbol.toStringTag, { value: "Module" })); +var history_addLayer = { + command: "history.addLayer", + description: "add layer in history ", + execute: function(editor, message, layer, isSelected = true, containerItem) { + editor.context.commands.emit("addLayer", layer, isSelected, containerItem); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [layer, isSelected, containerItem], + undoValues: [layer.id] + }); }); - } -}; -var randomRadial = { - title: "Random Radial", - key: "random-radial", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `radial-gradient(circle, ${ColorStep.createColorStep(10)})` - }; + editor.nextTick(() => { + editor.context.history.saveSelection(); }); - } -}; -var repeatConic = { - title: "Repeat Conic", - key: "repeat-conic", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `repeating-conic-gradient(from 0deg at 0% 50%, ${ColorStep.createRepeatColorStep(10, "10deg")})` - }; + }, + redo: function(editor, { currentValues }) { + editor.context.commands.emit("addLayer", ...currentValues); + editor.nextTick(() => { + editor.emit("refreshAll"); }); - } -}; -const angle_list = ["0deg", "45deg", "90deg"]; -var repeatLinear = { - title: "Repeat Linear", - key: "repeat-linear", - execute: function(count = 42) { - return repeat(count).map(() => { - return { - gradient: `repeating-linear-gradient(${randomItem(...angle_list)}, ${ColorStep.createRepeatColorStep(2, "10px")})` - }; + }, + undo: function(editor, { undoValues }) { + const ids = undoValues; + const items = editor.context.selection.itemsByIds(ids); + items.forEach((item) => { + if (item) { + item.remove(); + } }); - } -}; -var repeatRadial = { - title: "Repeat Radial", - key: "repeat-radial", - execute: function(count = 42) { - return repeat(count).map(() => { - var shape2 = "circle"; - return { - gradient: `repeating-radial-gradient(${shape2}, ${ColorStep.createRepeatColorStep(3, "6px")})` - }; + editor.nextTick(() => { + editor.context.selection.empty(); + editor.emit("refreshAll"); }); } }; -var gradients = [ - linear, - randomLinear, - repeatLinear, - radial, - randomRadial, - repeatRadial, - conic, - randomConic, - repeatConic -]; -var GradientAssetsProperty$1 = ""; -const options = gradients.map((it) => { - return { value: it.key, text: it.title }; -}); -class GradientAssetsProperty extends BaseProperty { - getTitle() { - return this.$i18n("gradient.asset.property.title"); - } - initState() { - return { - mode: "grid", - preset: "linear" - }; - } - getTools() { - return `
`; - } - [LOAD("$tools")]() { - return createComponent("SelectEditor", { - ref: "$preset", - key: "preset", - value: this.state.preset, - options, - onchange: "changePreset" - }); - } - [SUBSCRIBE_SELF("changePreset")](key, value) { - this.setState({ - [key]: value - }); - } - getClassName() { - return "elf--gradient-assets-property"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.show(); - } - getBody() { - return ` -
-
-
- `; - } - [DRAGSTART("$gradientList .gradient-item")](e) { - const gradient2 = e.$dt.attr("data-gradient"); - e.dataTransfer.effectAllowed = "copy"; - e.dataTransfer.setData("text/gradient", gradient2); - } - [LOAD("$gradientList")]() { - var preset = gradients.find((it) => it.key === this.state.preset); - if (!preset) { - return ""; - } - var results = preset.execute().map((item, index2) => { - return `
-
-
-
-
`; - }); - if (preset.edit) { - results.push(`
${iconUse("add")}
`); - } - return results; - } - executeGradient(callback, isRefresh = true, isEmit = true) { - var project2 = this.$context.selection.currentProject; - if (project2) { - callback && callback(project2); - if (isRefresh) - this.refresh(); - if (isEmit) - this.emit("refreshGradientAssets"); +var __glob_0_47 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_addLayer +}, Symbol.toStringTag, { value: "Module" })); +var history_bring_forward = { + command: "history.bring.forward", + description: "bring forward", + execute: function(editor, message, layer = editor.context.selection.current) { + const currentLayer = editor.get(layer); + const lastValues = currentLayer.hierarchy; + const oldParentLayer = currentLayer.parent; + let currentValues = {}; + let nextParentLayer = null; + if (currentLayer.isLast) { + nextParentLayer = oldParentLayer.next; + if (!nextParentLayer) { + return; + } + if (nextParentLayer.enableHasChildren()) { + nextParentLayer.appendChild(currentLayer); + currentValues = currentLayer.hierarchy; + } else { + nextParentLayer.insertAfter(currentLayer); + currentValues = currentLayer.hierarchy; + } } else { - window.alert("Please select a project."); + currentLayer.parent.bringForward(currentLayer.id); + currentValues = currentLayer.hierarchy; } - } - [CLICK("$gradientList .add-gradient-item")]() { - this.executeGradient((project2) => { - project2.createGradient({ - gradient: Gradient.random(), - name: "", - variable: "" + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle")), currentLayer.parent.attrsWithId("children"))); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [currentValues], + undoValues: [lastValues] }); }); - } - [CLICK("$gradientList .preview")](e) { - var $item = e.$dt.closest("gradient-item"); - var gradient2 = $item.attr("data-gradient"); - this.$commands.emit("drop.asset", { gradient: gradient2 }); - } -} -function gradientAsset(editor) { - editor.registerElement({ - GradientAssetsProperty - }); -} -var GradientEditorView$1 = ""; -var radialTypeList = [ - "circle", - "circle farthest-corner", - "circle closest-side", - "circle closest-corner", - "circle farthest-side", - "ellipse", - "ellipse farthest-corner", - "ellipse closest-side", - "ellipse closest-corner", - "ellipse farthest-side" -]; -var repeatTypeList = [ - "no-repeat", - "repeat", - "repeat-x", - "repeat-y", - "space", - "round" -]; -const TOOL_SIZE = 20; -class GradientBaseEditor extends EditorElement { - initializeData() { - const value = this.$context.selection.current.backgroundImage; - const cssValue = STRING_TO_CSS(value); - this.state.backgroundImages = BackgroundImage.parseStyle(cssValue); - this.state.backImages = BackgroundImage.parseStyle(cssValue); - const current = this.$context.selection.current; - this.state.gradient = this.state.backImages[this.state.index]; - this.state.contentBox = current.contentBox; - this.state.backgroundImageMatrix = current.createBackgroundImageMatrix(this.state.index); - } - updateData() { - var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - backgroundImage: value - })); - } -} -class GradientTimingStepEditor extends GradientBaseEditor { - [POINTERSTART("$el .step-point") + MOVE("moveStepPoint") + END("moveEndStepPoint")](e) { - this.$el.toggleClass("dragging", true); - this.initializeData(); - const colorStepIndex = +e.$dt.data("colorstep-index"); - this.localColorStep = this.state.backgroundImages[this.state.index].image.colorsteps[colorStepIndex]; - this.localColorStepTimingCount = this.localColorStep.timing.count; - this.localColorCubicBezierTimingCount = this.localColorStep.timingCount; - } - moveStepPoint(dx, dy) { - const dist$1 = (dx < 0 ? -1 : 1) * Math.ceil(dist([0, 0, 0], [dx, dy, 0]) / 10); - switch (this.localColorStep.timing.name) { - case TimingFunction.LINEAR: - break; - case TimingFunction.STEPS: - this.localColorStep.timing.count = Math.max(this.localColorStepTimingCount + dist$1, 1); - break; - default: - this.localColorStep.timingCount = Math.max(this.localColorCubicBezierTimingCount + dist$1, 1); - break; - } - this.updateData(); - } - makeTimingString(timing) { - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.EASE: - case TimingFunction.EASE_IN: - case TimingFunction.EASE_OUT: - case TimingFunction.EASE_IN_OUT: - return `${timing.name}`; - default: - return `cubic-bezier(${timing.x1}, ${timing.y1}, ${timing.x2}, ${timing.y2})`; - } - } - moveEndStepPoint(dx, dy) { - if (dx === 0 && dy === 0) { - const { timing } = this.localColorStep; - switch (timing.name) { - case TimingFunction.STEPS: - this.localColorStep.timing.direction = this.localColorStep.timing.direction === "start" ? "end" : "start"; - break; - case TimingFunction.LINEAR: - break; - case TimingFunction.PATH: - this.emit("showComponentPopup", { - title: "Path Editor", - width: 400, - inspector: [ - { - key: "path", - editor: "path", - editorOptions: { - height: 160 - }, - defaultValue: timing.d - } - ], - changeEvent: (key, value) => { - this.localColorStep.timing = parseOneValue(`path(${value})`).parsed; - this.updateData(); - } - }); - break; - default: - this.emit("showComponentPopup", { - title: "Cubic Bezier", - width: 220, - inspector: [ - { - key: "timing", - editor: "cubic-bezier", - editorOptions: { - isAnimating: false - }, - defaultValue: this.makeTimingString(timing) - } - ], - changeEvent: (key, value) => { - this.localColorStep.timing = parseOneValue(value).parsed; - this.updateData(); - } - }); - this.$el.toggleClass("dragging", false); - return; - } - } - this.updateData(); - this.$el.toggleClass("dragging", false); - } -} -class GradientResizer extends GradientTimingStepEditor { - [POINTERSTART("$el .resizer") + LEFT_BUTTON + MOVE("calculateMovedResizer") + END("calculateMovedEndResizer") + PREVENT](e) { - this.state.$target = e.$dt; - this.$el.toggleClass("dragging", true); - this.initializeData(); - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.isShiftKey = e.shiftKey; - } - calculateMovedResizer() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const currentVertex = clone(this.initMousePoint); - const nextVertex = targetMousePoint; - const reverseMatrix = this.$context.selection.current.absoluteMatrixInverse; - const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); - const realDist = subtract([], nextResult, currentResult); - const { backRect: rect2 } = this.state.backgroundImageMatrix; - const backgroundImage2 = this.state.gradient; - const backRect = backgroundImage2.recoverOffset(rect2.x, rect2.y, this.state.contentBox, realDist[0], realDist[1], { - shiftKey: this.$config.get("bodyEvent").shiftKey + editor.nextTick(() => { + editor.context.history.saveSelection(); }); - this.state.backgroundImages[this.state.index].reset({ - x: backRect.x, - y: backRect.y, - width: backRect.width, - height: backRect.height + }, + redo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { + const currentLayer = editor.get(newValues.id); + const currentTarget = editor.get(newValues.parentId); + const lastParent = editor.get(lastValues.parentId); + currentTarget.insertChild(currentLayer, newValues.index); + currentLayer.reset(newValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastParent.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle")), currentTarget.attrsWithId("children"))); + }, + undo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { + const currentLayer = lastValues; + const lastLayer = editor.get(currentLayer.id); + const lastParent = editor.get(currentLayer.parentId); + const currentParent = editor.get(newValues.parentId); + const lastIndex = currentLayer.index; + lastParent.insertChild(lastLayer, lastIndex); + lastLayer.reset(lastValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); + } +}; +var __glob_0_48 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_bring_forward +}, Symbol.toStringTag, { value: "Module" })); +var history_bring_front = { + command: "history.bring.front", + description: "bring front", + execute: function(editor, message, layer = editor.context.selection.current) { + const currentLayer = editor.get(layer); + const lastValues = currentLayer.hierachy; + const oldParentLayer = currentLayer.parent; + let currentValues = {}; + if (currentLayer.isLast) { + return; + } else { + currentLayer.parent.bringFront(currentLayer.id); + currentValues = currentLayer.hierarchy; + } + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle"))); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [currentValues], + undoValues: [lastValues] + }); }); - this.updateData(); - } - calculateMovedEndResizer() { - this.updateData(); - this.$el.toggleClass("dragging", false); - } - [POINTERSTART("$el .back-rect") + LEFT_BUTTON + MOVE("calculateMovedRect") + END("calculateMovedEndRect") + PREVENT](e) { - this.state.$target = e.$dt; - this.initializeData(); - this.initMousePoint = this.$viewport.getWorldPosition(e); - } - calculateMovedRect() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const currentVertex = clone(this.initMousePoint); - const nextVertex = targetMousePoint; - const reverseMatrix = this.$context.selection.current.absoluteMatrixInverse; - const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); - const realDist = subtract([], nextResult, currentResult); - const { backRect: rect2 } = this.state.backgroundImageMatrix; - const backgroundImage2 = this.state.gradient; - const backRect = backgroundImage2.recoverOffset(rect2.x + realDist[0], rect2.y + realDist[1], this.state.contentBox); - this.state.backgroundImages[this.state.index].reset({ - x: backRect.x, - y: backRect.y + editor.nextTick(() => { + editor.context.history.saveSelection(); }); - this.updateData(); + }, + redo: function(editor, { currentValues: [newValues] }) { + const currentLayer = editor.get(newValues.id); + const currentTarget = editor.get(newValues.parentId); + currentTarget.insertChild(currentLayer, newValues.index); + currentLayer.reset(newValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle")), currentTarget.attrsWithId("children"))); + }, + undo: function(editor, { undoValues: [lastValues] }) { + const currentLayer = lastValues; + const lastLayer = editor.get(currentLayer.id); + const lastParent = editor.get(currentLayer.parentId); + const lastIndex = currentLayer.index; + lastParent.insertChild(lastLayer, lastIndex); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children"))); } - calculateMovedEndRect(dx, dy) { - if (dx == 0 && dy === 0) { - const index2 = repeatTypeList.indexOf(this.state.gradient.repeat); - this.state.backgroundImages[this.state.index].repeat = repeatTypeList[(index2 + 1) % repeatTypeList.length]; +}; +var __glob_0_49 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_bring_front +}, Symbol.toStringTag, { value: "Module" })); +var history_clipboard_paste = { + command: "history.clipboard.paste", + description: "paste in clipboard ", + description_ko: ["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "], + execute: async function(editor, message, clipboardData = void 0, hasHistory = true) { + const data = clipboardData || editor.context.clipboard.last; + if (data.type == ClipboardActionType.COPY) { + const ids = data.data; + const items = await editor.json.renderAll(ids.map((it) => editor.get(it))); + const newIds = []; + const itemList = {}; + const parentList = {}; + let updateData = {}; + items.forEach((itemJSON) => { + const referenceId = itemJSON.referenceId; + const sourceItem = editor.get(referenceId); + parentList[sourceItem.parentId] = sourceItem.parent; + const model = editor.createModel(itemJSON); + model.renameWithCount(); + sourceItem.insertAfter(model); + newIds.push(model.id); + itemList[model.id] = itemJSON; + updateData[model.id] = model.toCloneObject(); + }); + Object.values(parentList).forEach((parent) => { + updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); + }); + editor.context.commands.emit("setAttribute", updateData); + editor.nextTick(() => { + editor.context.selection.select(...newIds); + if (hasHistory) { + editor.context.history.add(message, this, { + currentValues: [data], + undoValues: [newIds, editor.context.selection.ids] + }); + } + editor.context.history.saveSelection(); + }); } - this.updateData(); - } -} -class GradientRotateEditor extends GradientResizer { - [POINTERSTART("$el .gradient-angle .rotate") + LEFT_BUTTON + MOVE("calculateMovedAngle") + END("calculatedMovedEndAngle") + PREVENT](e) { - this.state.$target = e.$dt; - this.initializeData(); - this.$el.toggleClass("dragging", true); - this.state.centerX = +this.state.$target.data("center-x"); - this.state.centerY = +this.state.$target.data("center-y"); - this.state.startX = +this.state.$target.attr("cx"); - this.state.startY = +this.state.$target.attr("cy"); - this.state.$target.toggleClass("moved"); - } - calculateMovedAngle(dx, dy) { - const center2 = [this.state.centerX, this.state.centerY, 0]; - const point2 = [this.state.startX, this.state.startY, 0]; - const dist2 = [dx, dy, 0]; - const distAngle = calculateAngleForVec3(point2, center2, dist2); - let newAngle = Math.floor(this.state.gradient.image.angle + distAngle); - if (this.$config.get("bodyEvent").shiftKey) { - newAngle -= newAngle % this.$config.get("fixed.gradient.angle"); + }, + redo: function(editor, { currentValues: [data] }) { + editor.context.commands.emit("history.clipboard.paste", "paste", data, false); + }, + undo: function(editor, { currentValues: [data], undoValues: [newIds, selectedIds] }) { + if (data.type === ClipboardActionType.COPY) { + const parentList = {}; + newIds.forEach((id) => { + const item = editor.get(id); + parentList[item.parentId] = item.parent; + if (item) { + item.remove(); + } + }); + let updateData = {}; + Object.values(parentList).forEach((parent) => { + updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); + }); + editor.context.selection.select(...selectedIds); + editor.context.commands.emit("setAttribute", updateData); } - this.state.backgroundImages[this.state.index].image.angle = newAngle; - this.updateData(); - } - calculatedMovedEndAngle() { - this.state.$target.toggleClass("moved"); - this.$el.toggleClass("dragging", false); - this.updateData(); } -} -class GradientColorstepEditor extends GradientRotateEditor { - [KEYUP("$el .colorstep")](e) { - const index2 = +e.$dt.data("index"); - switch (e.code) { - case "Delete": - case "Backspace": - this.removeStep(index2); - break; - case "BracketRight": - this.sortToRight(index2); - break; - case "BracketLeft": - this.sortToLeft(index2); - break; - case "Equal": - this.appendColorStep(index2); - break; - case "Minus": - this.prependColorStep(index2); - break; +}; +var __glob_0_50 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_clipboard_paste +}, Symbol.toStringTag, { value: "Module" })); +var history_copyLayer = { + command: "history.copyLayer", + description: "copy in selected items ", + description_ko: ["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "], + execute: async function(editor, message, ids = []) { + let currentIds = ids.map((id) => editor.get(id)).filter(Boolean).map((item) => item.id); + if (!currentIds.length) { + currentIds = editor.context.selection.ids; } - } - removeStep(currentIndex) { - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - image2.removeColorStepByIndex(currentIndex); - this.updateColorStepStatus(image2, -1); - } - sortToRight() { - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - image2.sortToRight(); - this.updateColorStepStatus(image2, -1); - } - sortToLeft() { - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - image2.sortToLeft(); - this.updateColorStepStatus(image2, -1); - } - appendColorStep(currentIndex) { - const nextIndex = currentIndex + 1; - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - const currentColorStep = image2.colorsteps[currentIndex]; - const nextColorStep = image2.colorsteps[nextIndex]; - let newIndex = -1; - if (!nextColorStep) { - if (currentColorStep.percent !== 100) { - newIndex = image2.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); + if (!currentIds.length) + return; + const items = await editor.json.renderAll(currentIds.map((it) => editor.get(it))); + const newIds = []; + const itemList = {}; + const parentList = {}; + let updateData = {}; + items.forEach((itemJSON) => { + const referenceId = itemJSON.referenceId; + const sourceItem = editor.get(referenceId); + parentList[sourceItem.parentId] = sourceItem.parent; + const model = editor.createModel(itemJSON); + model.renameWithCount(); + sourceItem.insertAfter(model); + newIds.push(model.id); + itemList[model.id] = itemJSON; + updateData[model.id] = model.toCloneObject(); + }); + Object.values(parentList).forEach((parent) => { + updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); + }); + editor.context.commands.emit("setAttribute", updateData); + editor.nextTick(() => { + editor.context.selection.select(...newIds); + editor.context.history.add(message, this, { + currentValues: [currentIds], + undoValues: [newIds, editor.context.selection.ids] + }); + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [currentIds] }) { + editor.context.commands.emit("copyLayer", currentIds); + }, + undo: function(editor, { undoValues: [newIds, selectedIds] }) { + const parentList = {}; + newIds.forEach((id) => { + const item = editor.get(id); + parentList[item.parentId] = item.parent; + if (item) { + item.remove(); } - } else { - newIndex = image2.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); - } - this.updateColorStepStatus(image2, newIndex); + }); + let updateData = {}; + Object.values(parentList).forEach((parent) => { + updateData = __spreadValues(__spreadValues({}, updateData), parent.attrsWithId("children")); + }); + editor.context.selection.select(...selectedIds); + editor.context.commands.emit("setAttribute", updateData); } - prependColorStep(currentIndex) { - const prevIndex = currentIndex - 1; - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - const currentColorStep = image2.colorsteps[currentIndex]; - const prevColorStep = image2.colorsteps[prevIndex]; - let newIndex = -1; - if (!prevColorStep) { - if (currentColorStep.percent !== 0) { - newIndex = image2.insertColorStep(currentColorStep.percent); +}; +var __glob_0_51 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_copyLayer +}, Symbol.toStringTag, { value: "Module" })); +var history_group_item = { + command: "history.group.item", + description: "History Group Item", + execute: function(editor, message = "selection") { + var _a; + const currentValues = editor.context.selection.ids; + const projectId = (_a = editor.context.selection.currentProject) == null ? void 0 : _a.id; + const undoValues = editor.context.history.selectedIds; + if (isArrayEquals(currentValues, undoValues)) { + return; + } + editor.context.history.add(message, this, { + currentValues: { + ids: currentValues, + projectId + }, + undoValues: { + ids: undoValues, + projectId } - } else { - newIndex = image2.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); + }); + }, + redo: function(editor, { currentValues: [ids, projectId] }) { + }, + undo: function(editor, { undoValues: [ids, projectId] }) { + } +}; +var __glob_0_52 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_group_item +}, Symbol.toStringTag, { value: "Module" })); +var history_moveLayer = { + command: "history.moveLayer", + description: "move layer in world ", + execute: function(editor, message, layers2 = [], dist2 = [0, 0, 0]) { + if (isArray(layers2) === false) { + layers2 = [layers2]; } - this.updateColorStepStatus(image2, newIndex); + const targetItems = editor.context.selection.itemsByIds(layers2); + const lastValues = {}; + const currentValues = {}; + targetItems.forEach((it) => { + const oldPosition = it.absoluteMove(dist2); + const newPosition = it.attrs("x", "y"); + lastValues[it.id] = oldPosition; + currentValues[it.id] = newPosition; + }); + editor.context.commands.emit("setAttribute", currentValues); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [layers2, dist2], + undoValues: [lastValues] + }); + }); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [layers2, dist2] }) { + const targetItems = editor.context.selection.itemsByIds(layers2); + const localChanges = {}; + targetItems.forEach((it) => { + it.absoluteMove(dist2); + const newPosition = it.attrs("x", "y"); + localChanges[it.id] = newPosition; + }); + editor.context.commands.emit("setAttribute", localChanges); + }, + undo: function(editor, { undoValues: [lastValues] }) { + editor.context.commands.emit("setAttribute", lastValues); } - [POINTERSTART("$el .colorstep") + MOVE("moveColorStep") + END("moveEndColorStep")](e) { - this.$el.toggleClass("dragging", true); - this.state.hoverColorStep = null; - this.initializeData(); - const $colorstep = e.$dt; - this.$targetIndex = +$colorstep.data("index"); - if (e.altKey) { - this.removeStep(this.$targetIndex); - this.state.altKey = true; - return; +}; +var __glob_0_53 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_moveLayer +}, Symbol.toStringTag, { value: "Module" })); +var history_moveLayerToTarget = { + command: "history.moveLayerToTarget", + description: "move layer to target in world ", + execute: function(editor, message, layer, target, dist2 = [0, 0, 0], targetAction = TargetActionType.APPEND_CHILD) { + const currentLayer = editor.get(layer) || layer; + const currentParentLayer = currentLayer.parent; + const currentTarget = editor.get(target) || editor.context.selection.currentProject; + const lastValues = currentLayer.hierachy; + if (dist2) { + currentLayer.absoluteMove(dist2); } - const result = this.state.backgroundImageMatrix; - switch (result.backgroundImage.image.type) { - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - this.centerPosition = this.$viewport.applyVertex(result.centerPosition); - this.startPoint = this.$viewport.applyVertex(result.startPoint); - this.endPoint = this.$viewport.applyVertex(result.endPoint); - this.screenXY = this.$viewport.applyVertex(result.colorsteps[this.$targetIndex].pos); - this.rotateInverse = calculateRotationOriginMat4(-this.state.gradient.image.angle, this.centerPosition); - break; - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - this.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - this.startPoint = this.$viewport.applyVertex(result.startPoint); - this.endPoint = this.$viewport.applyVertex(result.endPoint); - this.screenXY = this.$viewport.applyVertex(result.colorsteps[this.$targetIndex].pos); - const dist2 = subtract([], this.endPoint, this.startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - this.rotateInverse = calculateRotationOriginMat4(-angle, this.centerPosition); - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - this.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - this.startPoint = this.$viewport.applyVertex(result.shapePoint); - this.newStartPoint = subtract([], this.startPoint, this.centerPosition); - this.newStartAngle = calculateAngle360(this.newStartPoint[0], this.newStartPoint[1]); - const x = +$colorstep.data("x"); - const y = +$colorstep.data("y"); - this.screenXY = [x, y, 0]; - this.endPoint = this.$viewport.applyVertex(result.endPoint); - this.rotateInverse = create$4(); - break; + let currentValues = {}; + if (targetAction === TargetActionType.APPEND_CHILD) { + currentTarget.appendChild(currentLayer); + currentValues = currentTarget.attrsWithId("children"); + } else if (targetAction === TargetActionType.INSERT_BEFORE) { + currentTarget.insertBefore(currentLayer); + currentValues = currentTarget.parent.attrsWithId("children"); + } else if (targetAction === TargetActionType.INSERT_AFTER) { + currentTarget.insertAfter(currentLayer); + currentValues = currentTarget.parent.attrsWithId("children"); } + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentValues), currentParentLayer && currentParentLayer.isNot("project") ? currentParentLayer.attrsWithId("children") : {})); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [currentLayer.hierachy], + undoValues: [lastValues, currentLayer.parentId] + }); + }); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [info] }) { + const currentLayer = editor.get(info.id); + const currentTarget = editor.get(info.parentId); + currentTarget.insertChild(currentLayer, info.index); + currentLayer.reset(info.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); + }, + undo: function(editor, { undoValues: [lastValues, currentParentId] }) { + const currentLayer = lastValues; + const lastLayer = editor.get(currentLayer.id); + const lastParent = editor.get(currentLayer.parentId); + const currentParent = editor.get(currentParentId); + const lastIndex = currentLayer.index; + lastParent.insertChild(lastLayer, lastIndex); + lastLayer.reset(lastValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); } - moveColorStep(dx, dy) { - if (this.state.altKey) - return; - const nextPoint = add$1([], this.screenXY, [dx, dy, 0]); - const [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.startPoint, this.endPoint, nextPoint], this.rotateInverse); - const result = this.state.backgroundImageMatrix; - let newDist = 0; - let baseDist = 0; - switch (result.backgroundImage.image.type) { - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - var [s, e, n] = [baseStartPoint[1], baseEndPoint[1], baseNextPoint[1]]; - var baseDefaultDist = Math.abs(s - e); - if (s < n) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else if (e > n) { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } else { - var distStart = Math.abs(s - n); - var distEnd = Math.abs(e - n); - newDist = distStart / (distEnd + distStart) * 100; - } - newDist = Math.max(0, Math.min(100, newDist)); - baseDist = dist(this.startPoint, this.endPoint); - break; - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; - var baseDefaultDist = Math.abs(s - e); - if (n < s) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else if (n > e) { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } else { - newDist = (n - s) / baseDefaultDist * 100; - } - newDist = Math.max(0, Math.min(100, newDist)); - baseDist = dist(this.startPoint, this.endPoint); - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - const newNextPoint = subtract([], nextPoint, this.centerPosition); - let nextAngle = calculateAngle360(newNextPoint[0], newNextPoint[1]); - if (this.$config.get("bodyEvent").shiftKey) { - nextAngle -= nextAngle % this.$config.get("fixed.gradient.angle"); - } - let newAngle = nextAngle - this.newStartAngle; - newDist = newAngle / 360 * 100; - newDist = (newDist + 100) % 100; - baseDist = 100; - break; - } - const image2 = this.state.gradient.image; - image2.colorsteps[this.$targetIndex].setValue(newDist, baseDist); - const targetColorStep = { - color: image2.colorsteps[this.$targetIndex].color, - percent: image2.colorsteps[this.$targetIndex].percent - }; - const nextImage = this.state.backgroundImages[this.state.index].image; - nextImage.colorsteps = image2.colorsteps.map((it) => { - return it; +}; +var __glob_0_54 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_moveLayerToTarget +}, Symbol.toStringTag, { value: "Module" })); +var history_refreshSelection = { + command: "history.refreshSelection", + description: `save selection in history `, + description_ko: "Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4", + execute: function(editor, message = "selection") { + var _a; + const currentValues = editor.context.selection.ids; + const projectId = (_a = editor.context.selection.currentProject) == null ? void 0 : _a.id; + const undoValues = editor.context.history.selectedIds; + if (isArrayEquals(currentValues, undoValues)) { + return; + } + editor.context.history.add(message, this, { + currentValues: [currentValues, projectId], + undoValues: [undoValues, projectId] }); - nextImage.sortColorStep(); - this.emit("updateGradientEditor", nextImage, targetColorStep); - var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - backgroundImage: value - })); + this.nextAction(editor); + }, + nextAction(editor) { + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [ids, projectId] }) { + editor.context.selection.selectProject(projectId); + editor.context.selection.select(...ids); + this.nextAction(editor); + }, + undo: function(editor, { undoValues: [ids, projectId] }) { + editor.context.selection.selectProject(projectId); + editor.context.selection.select(...ids); + this.nextAction(editor); } - moveEndColorStep(dx, dy) { - if (this.state.altKey) { - this.state.altKey = false; +}; +var __glob_0_55 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_refreshSelection +}, Symbol.toStringTag, { value: "Module" })); +var history_refreshSelectionProject = { + command: "history.refreshSelectionPorject", + description: `save project selection in history `, + description_ko: "Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4", + execute: function(editor, message = "selection", projectId) { + var _a; + const currentValues = [projectId]; + const undoValues = [(_a = editor.context.selection.currentProject) == null ? void 0 : _a.id]; + if (isArrayEquals(currentValues, undoValues)) { return; } - if (dx === 0 && dy === 0) { - const image2 = this.state.backgroundImages[this.state.index].image; - image2.colorsteps[this.$targetIndex].toggleTiming(); - const targetColorStep = { - color: image2.colorsteps[this.$targetIndex].color, - percent: image2.colorsteps[this.$targetIndex].percent - }; - this.emit("updateGradientEditor", image2, targetColorStep); - var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - backgroundImage: value - })); - } - this.$el.toggleClass("dragging", false); + editor.context.selection.selectProject(projectId); + editor.context.history.add(message, this, { + currentValues, + undoValues + }); + this.nextAction(editor); + }, + nextAction(editor) { + editor.nextTick(() => { + editor.emit("refreshAll"); + editor.emit("refreshProjectList"); + }); + }, + redo: function(editor, { currentValues: [projectId] }) { + editor.context.selection.selectProject(projectId); + this.nextAction(editor); + }, + undo: function(editor, { undoValues: [projectId] }) { + editor.context.selection.selectProject(projectId); + this.nextAction(editor); } - updateColorStepStatus(image2, index2) { - this.initializeData(); - const { color: color2, percent } = image2.colorsteps[index2] || {}; - this.emit("updateGradientEditor", image2, { color: color2, percent }); - this.state.backgroundImages[this.state.index].image = image2; - var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); - this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ - backgroundImage: value - })); - this.state.hoverColorStep = null; +}; +var __glob_0_56 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_refreshSelectionProject +}, Symbol.toStringTag, { value: "Module" })); +function filterChildren(items = []) { + return items.filter((item) => { + let total = 0; + item.path.forEach((treeItem) => { + total += items.filter((it) => it.id === treeItem.id).length ? 1 : 0; + }); + return total === 1; + }); +} +var history_removeLayer = { + command: "history.removeLayer", + description: "remove layer", + execute: function(editor, message, ids = void 0) { + let items = editor.context.selection.itemsByIds(ids || editor.context.selection.ids); + items = filterChildren(items); + const filtedIds = items.map((it) => it.id); + editor.context.modelManager.markRemove(filtedIds); + const parentIds = items.map((it) => it.parentId); + items.forEach((item) => { + item.remove(); + editor.context.selection.removeById(item.id); + }); + editor.context.history.add(message, this, { + currentValues: [filtedIds, parentIds], + undoValues: filtedIds + }); + editor.nextTick(() => { + editor.context.selection.removeById(filtedIds); + parentIds.forEach((parentId) => { + editor.context.commands.emit("update", parentId, { + changedChildren: true + }); + }); + editor.emit("refreshAll"); + editor.emit("removeGuideLine"); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }); + }, + redo: function(editor, { currentValues }) { + const ids = currentValues[0]; + let items = editor.context.selection.itemsByIds(ids || editor.context.selection.ids); + items = filterChildren(items); + editor.context.modelManager.markRemove(items.map((it) => it.id)); + items.forEach((item) => item.remove()); + editor.nextTick(() => { + editor.emit("refreshAll"); + }); + }, + undo: function(editor, { undoValues: recoverIds }) { + editor.context.modelManager.unmarkRemove(recoverIds); + editor.nextTick(() => { + editor.emit("refreshAll"); + }); } - [POINTERSTART("$el .area-line")]() { - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - const index2 = image2.insertColorStep(this.state.hoverColorStep.percent); - this.updateColorStepStatus(image2, index2); +}; +var __glob_0_57 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_removeLayer +}, Symbol.toStringTag, { value: "Module" })); +var history_removeProject = { + command: "history.removeProject", + description: "remove project", + execute: function(editor, message, projectId) { + const index2 = editor.context.modelManager.markRemoveProject(projectId); + editor.context.history.add(message, this, { + currentValues: [projectId], + undoValues: [projectId, index2] + }); + editor.nextTick(() => { + editor.context.selection.selectProject(editor.context.modelManager.projects[0]); + editor.emit("refreshAll"); + editor.emit("removeGuideLine"); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }); + }, + redo: function(editor, { currentValues: [projectId] }) { + editor.context.modelManager.markRemoveProject(projectId); + editor.nextTick(() => { + editor.emit("refreshAll"); + }); + }, + undo: function(editor, { undoValues: [projectId, index2] }) { + editor.context.modelManager.unmarkRemoveProject(projectId, index2); + editor.nextTick(() => { + editor.context.selection.selectProject(projectId); + editor.emit("refreshAll"); + }); } - [POINTEROUT("$el .area-line")]() { - if (this.state.hoverColorStep) { - this.state.hoverColorStep = null; - this.refresh(); +}; +var __glob_0_58 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_removeProject +}, Symbol.toStringTag, { value: "Module" })); +var history_send_back = { + command: "history.send.back", + description: "send back", + execute: function(editor, message, layer = editor.context.selection.current) { + const currentLayer = editor.get(layer); + const lastValues = currentLayer.hierarchy; + const oldParentLayer = currentLayer.parent; + let currentValues = {}; + if (currentLayer.isFirst()) { + return; + } else { + currentLayer.parent.sendBack(currentLayer.id); + currentValues = currentLayer.hierarchy; } + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId"))); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [currentValues], + undoValues: [lastValues] + }); + }); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [newValues] }) { + const currentLayer = editor.get(newValues.id); + const currentTarget = editor.get(newValues.parentId); + currentTarget.insertChild(currentLayer, newValues.index); + currentLayer.reset(newValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); + }, + undo: function(editor, { undoValues: [lastValues] }) { + const currentLayer = lastValues; + const lastLayer = editor.get(currentLayer.id); + const lastParent = editor.get(currentLayer.parentId); + const lastIndex = currentLayer.index; + lastParent.insertChild(lastLayer, lastIndex); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle", "parentId")), lastParent.attrsWithId("children"))); } - [POINTERMOVE("$el .area-line")](evt) { - const nextPoint = this.$viewport.applyVertex(this.$viewport.getWorldPosition(evt)); - const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; - let baseStartPoint, baseEndPoint, baseNextPoint; - switch (image2.type) { - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.state.startPoint, this.state.endPoint, nextPoint], this.state.rotateInverse); - var newDist = 0; - var [s, e, n] = [baseStartPoint[1], baseEndPoint[1], baseNextPoint[1]]; - var baseDefaultDist = Math.abs(s - e); - if (s < n) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else if (e > n) { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } else { - const distStart = Math.abs(s - n); - const distEnd = Math.abs(e - n); - newDist = distStart / (distEnd + distStart) * 100; - } - this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); - break; - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - [baseStartPoint, baseEndPoint, baseNextPoint] = [ - this.state.startPoint, - this.state.endPoint, - nextPoint - ]; - var newDist = 0; - var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; - var baseDefaultDist = Math.abs(s - e); - if (n < s) { - newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; - } else { - newDist = Math.abs(n - s) / baseDefaultDist * 100; - } - this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - const newStartPoint = subtract([], this.state.startPoint, this.state.centerPosition); - const newNextPoint = subtract([], nextPoint, this.state.centerPosition); - const startAngle = calculateAngle360(newStartPoint[0], newStartPoint[1]); - const nextAngle = calculateAngle360(newNextPoint[0], newNextPoint[1]); - var newDist = (nextAngle - startAngle) / 360 * 100; - this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); - break; +}; +var __glob_0_59 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_send_back +}, Symbol.toStringTag, { value: "Module" })); +var history_send_backward = { + command: "history.send.backward", + description: "send backward", + execute: function(editor, message, layer = editor.context.selection.current) { + const currentLayer = editor.get(layer); + const lastValues = currentLayer.hierarchy; + const oldParentLayer = currentLayer.parent; + let currentValues = {}; + let prevParentLayer = null; + if (currentLayer.isFirst) { + prevParentLayer = oldParentLayer.prev; + if (!prevParentLayer) { + return; + } + prevParentLayer.insertBefore(currentLayer); + currentValues = currentLayer.hierarchy; + } else { + currentLayer.parent.sendBackward(currentLayer.id); + currentValues = currentLayer.hierarchy; } - this.refresh(); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, oldParentLayer.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentLayer.parent.attrsWithId("children"))); + editor.nextTick(() => { + editor.context.history.add(message, this, { + currentValues: [currentValues], + undoValues: [lastValues] + }); + }); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { + const currentLayer = editor.get(newValues.id); + const currentTarget = editor.get(newValues.parentId); + const lastParent = editor.get(lastValues.parentId); + currentTarget.insertChild(currentLayer, newValues.index); + currentLayer.reset(newValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastParent.attrsWithId("children")), currentLayer.attrsWithId("x", "y", "angle", "parentId")), currentTarget.attrsWithId("children"))); + }, + undo: function(editor, { currentValues: [newValues], undoValues: [lastValues] }) { + const currentLayer = lastValues; + const lastLayer = editor.get(currentLayer.id); + const lastParent = editor.get(currentLayer.parentId); + const currentParent = editor.get(newValues.parentId); + const lastIndex = currentLayer.index; + lastParent.insertChild(lastLayer, lastIndex); + lastLayer.reset(lastValues.attrs); + editor.context.commands.emit("setAttribute", __spreadValues(__spreadValues(__spreadValues({}, lastLayer.attrsWithId("x", "y", "angle")), lastParent.attrsWithId("children")), currentParent.attrsWithId("children"))); } -} -class GradientEditorView extends GradientColorstepEditor { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--gradient-editor-view" +}; +var __glob_0_60 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_send_backward +}, Symbol.toStringTag, { value: "Module" })); +var history_setAttribute = { + command: "history.setAttribute", + execute: function(editor, message, multiAttrs = {}, context = { origin: "*" }) { + editor.context.commands.emit("setAttribute", multiAttrs, context); + editor.context.history.add(message, this, { + currentValues: [multiAttrs], + undoValues: editor.context.history.getUndoValues(multiAttrs) + }); + editor.nextTick(() => { + editor.context.history.saveSelection(); + }); + }, + redo: function(editor, { currentValues }) { + editor.context.commands.emit("setAttribute", ...currentValues); + editor.nextTick(() => { + editor.context.selection.reselect(); + editor.emit("refreshAll"); + }); + }, + undo: function(editor, { undoValues }) { + const ids = Object.keys(undoValues); + const items = editor.context.selection.itemsByIds(ids); + items.forEach((item) => { + item.reset(undoValues[item.id]); + }); + editor.context.selection.reselect(); + editor.nextTick(() => { + editor.emit("refreshAll"); }); } - [POINTERSTART("$el .point") + LEFT_BUTTON + MOVE("calculateMovedElement") + END("calculateMovedEndElement") + PREVENT](e) { - this.$el.toggleClass("dragging", true); - this.initializeData(); - const result = this.state.backgroundImageMatrix; - this.pointTarget = e.$dt.data("type"); - this.startPoint = this.$viewport.applyVertex(result.startPoint); - this.endPoint = this.$viewport.applyVertex(result.endPoint); - if (result.shapePoint) { - this.shapePoint = this.$viewport.applyVertex(result.shapePoint); +}; +var __glob_0_61 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_setAttribute +}, Symbol.toStringTag, { value: "Module" })); +var item_move_depth_down = { + command: "item.move.depth.down", + execute: function(editor) { + const current = editor.context.selection.current; + if (current) { + current.orderPrev(); } + _doForceRefreshSelection(editor); } - calculateMovedElement(dx, dy) { - const targetPoint = this.pointTarget === "start" ? this.startPoint : this.endPoint; - let nextPoint = add$1([], targetPoint, [dx, dy, 0]); - var [localPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.$context.selection.current.absoluteMatrixInverse); - const backgroundImage2 = this.state.gradient; - const backRect = backgroundImage2.getOffset(this.state.contentBox); - const image2 = this.state.gradient.image; - switch (image2.type) { - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - if (this.pointTarget === "start") { - const newX = localPosition[0] - backRect.x; - const newY = localPosition[1] - backRect.y; - this.state.backgroundImages[this.state.index].image.radialPosition = [ - Length.makePercent(newX, backRect.width), - Length.makePercent(newY, backRect.height) - ]; - this.updateData(); - } else if (this.pointTarget === "end") { - var [localStartPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.startPoint)], this.$context.selection.current.absoluteMatrixInverse); - var [localEndPosition] = vertiesMap([ - this.$viewport.applyVertexInverse(add$1([], this.endPoint, [dx, 0, 0])) - ], this.$context.selection.current.absoluteMatrixInverse); - var [localShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(this.shapePoint)], this.$context.selection.current.absoluteMatrixInverse); - const newEndX = localEndPosition[0] - backRect.x - localStartPosition[0]; - const newShapeY = localShapePosition[1] - backRect.y - localStartPosition[1]; - if (this.state.gradient.image.radialType === RadialGradientType.CIRCLE) { - this.state.backgroundImages[this.state.index].image.radialSize = [ - Length.px(Math.abs(newEndX)) - ]; - } else if (this.state.gradient.image.radialType === RadialGradientType.ELLIPSE) { - this.state.backgroundImages[this.state.index].image.radialSize = [ - Length.makePercent(Math.abs(newEndX), backRect.width), - Length.makePercent(Math.abs(newShapeY), backRect.height) - ]; - } - this.updateData(); - } else if (this.pointTarget === "shape") { - var [localStartPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.startPoint)], this.$context.selection.current.absoluteMatrixInverse); - var [localShapePosition] = vertiesMap([ - this.$viewport.applyVertexInverse(add$1([], this.shapePoint, [0, dy, 0])) - ], this.$context.selection.current.absoluteMatrixInverse); - var [localEndPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.endPoint)], this.$context.selection.current.absoluteMatrixInverse); - const newEndX = localEndPosition[0] - backRect.x - localStartPosition[0]; - const newShapeY = localShapePosition[1] - backRect.y - localStartPosition[1]; - if (this.state.gradient.image.radialType === RadialGradientType.CIRCLE) { - this.state.backgroundImages[this.state.index].image.radialSize = [ - Length.px(Math.abs(newShapeY)) - ]; - } else if (this.state.gradient.image.radialType === RadialGradientType.ELLIPSE) { - this.state.backgroundImages[this.state.index].image.radialSize = [ - Length.makePercent(Math.abs(newEndX), backRect.width), - Length.makePercent(Math.abs(newShapeY), backRect.height) - ]; - } - this.updateData(); - } - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - if (this.pointTarget === "start") { - const newX = localPosition[0] - backRect.x; - const newY = localPosition[1] - backRect.y; - this.state.backgroundImages[this.state.index].image.radialPosition = [ - Length.makePercent(newX, backRect.width), - Length.makePercent(newY, backRect.height) - ]; - this.updateData(); - } - break; +}; +var __glob_0_62 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": item_move_depth_down +}, Symbol.toStringTag, { value: "Module" })); +var item_move_depth_first = { + command: "item.move.depth.first", + execute: function(editor) { + const current = editor.context.selection.current; + if (current) { + current.orderFirst(); } + _doForceRefreshSelection(editor); } - calculateMovedEndElement(dx, dy) { - if (dx == 0 && dy === 0) { - if (this.pointTarget === "start") { - switch (this.state.gradient.type) { - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - const findKey = `${this.state.gradient.image.radialType} ${this.state.gradient.image.radialSize}`.trim(); - const index2 = radialTypeList.indexOf(findKey); - const [radialType, radialSize] = radialTypeList[(index2 + 1) % radialTypeList.length].split(" "); - const image2 = this.state.backgroundImages[this.state.index].image; - image2.radialType = radialType; - image2.radialSize = radialSize; - break; - } - } +}; +var __glob_0_63 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": item_move_depth_first +}, Symbol.toStringTag, { value: "Module" })); +var item_move_depth_last = { + command: "item.move.depth.last", + execute: function(editor) { + const current = editor.context.selection.current; + if (current) { + current.orderLast(); + } + _doForceRefreshSelection(editor); + } +}; +var __glob_0_64 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": item_move_depth_last +}, Symbol.toStringTag, { value: "Module" })); +var item_move_depth_up = { + command: "item.move.depth.up", + execute: function(editor) { + const current = editor.context.selection.current; + if (current) { + current.orderNext(); } - this.updateData(); - this.$el.toggleClass("dragging", false); + _doForceRefreshSelection(editor); } - refresh() { - if (this.state.isShow) { - this.load(); +}; +var __glob_0_65 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": item_move_depth_up +}, Symbol.toStringTag, { value: "Module" })); +var keymap_keydown = { + command: "keymap.keydown", + execute: function(editor, e) { + editor.context.keyboardManager.add(e.code, e.keyCode, e); + if (editor.context.shortcuts) { + editor.context.shortcuts.execute(e, "keydown"); } } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); +}; +var __glob_0_66 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": keymap_keydown +}, Symbol.toStringTag, { value: "Module" })); +var lastTimelineItem = { + command: "lastTimelineItem", + execute: function(editor) { + _currentProject(editor, (project2, timeline) => { + var lastTime = project2.getSelectedTimelineLastTime(); + project2.setTimelineCurrentTime(timecode(timeline.fps, lastTime)); + project2.seek(); + editor.emit("playTimeline"); + }); } - [SUBSCRIBE(UPDATE_CANVAS) + DEBOUNCE(10)]() { - if (this.$context.selection.current) { - if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "backgroundImage", "border", "padding", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom")) { - this.refresh(); +}; +var __glob_0_67 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": lastTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var load_json = { + command: "load.json", + execute: function(editor, json, context = { origin: "*" }) { + editor.context.modelManager.load(json, context); + _doForceRefreshSelection(editor); + } +}; +var __glob_0_68 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": load_json +}, Symbol.toStringTag, { value: "Module" })); +var moveLayer = { + command: "moveLayer", + description: "move layer by keydown with matrix ", + execute: function(editor, dx = 0, dy = 0) { + const absoluteDist = [dx, dy, 0]; + editor.context.selection.items.forEach((it) => { + it.absoluteMove(absoluteDist); + }); + editor.context.commands.executeCommand("setAttribute", "item move down", editor.context.selection.pack("x", "y")); + editor.nextTick(() => { + editor.context.selection.reselect(); + }); + } +}; +var __glob_0_69 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": moveLayer +}, Symbol.toStringTag, { value: "Module" })); +var moveLayerForItems = { + command: "moveLayerForItems", + description: "mova layer by multi items ", + execute: function(editor, moveItems = []) { + const itemsMap = {}; + moveItems.forEach((it) => { + it.item.absoluteMove(it.dist); + itemsMap[it.item.id] = it.item.attrs("x", "y"); + }); + editor.context.commands.emit("history.setAttribute", "item move", itemsMap); + editor.nextTick(() => { + editor.context.selection.reselect(); + }); + } +}; +var __glob_0_70 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": moveLayerForItems +}, Symbol.toStringTag, { value: "Module" })); +var moveSelectionToCenter = { + command: "moveSelectionToCenter", + description: "Move selection project or artboards to center on Viewport", + execute: function(editor, withScale = true) { + var _a, _b, _c, _d, _e; + let areaVerties = []; + if ((_a = editor.context.selection) == null ? void 0 : _a.isEmpty) { + if (((_c = (_b = editor.context.selection) == null ? void 0 : _b.currentProject) == null ? void 0 : _c.layers.length) > 0) { + areaVerties = itemsToRectVerties((_d = editor.context.selection) == null ? void 0 : _d.currentProject.layers); + } else { + areaVerties = rectToVerties(0, 0, 100, 100); } + } else { + areaVerties = itemsToRectVerties((_e = editor.context.selection) == null ? void 0 : _e.items); } + editor.context.commands.emit("moveToCenter", areaVerties, withScale); } - [SUBSCRIBE("showGradientEditorView")]({ index: index2 }) { - this.state.index = index2; - this.$el.show(); - this.state.isShow = true; - this.refresh(); - this.$commands.emit("recoverCursor"); - this.$context.commands.emit("push.mode.view", "GradientEditorView"); - } - [SUBSCRIBE("hideGradientEditorView")]() { - this.$el.hide(); - this.state.isShow = false; - this.$commands.emit("pop.mode.view", "GradientEditorView"); +}; +var __glob_0_71 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": moveSelectionToCenter +}, Symbol.toStringTag, { value: "Module" })); +function newComponent(editor, itemType, obj2, isSelected = true, containerItem = void 0) { + if (itemType === "svg-textpath") { + obj2 = __spreadProps(__spreadValues({}, obj2), { + fontSize: obj2.height, + textLength: "100%", + d: PathParser.makeLine(0, obj2.height, obj2.width, obj2.height).d + }); + } else if (itemType === "svg-circle") { + itemType = "svg-path"; + obj2 = __spreadProps(__spreadValues({}, obj2), { + backgroundColor: void 0, + fill: `#C4C4C4`, + d: PathParser.makeCircle(0, 0, obj2.width, obj2.height).d + }); + } else if (itemType === "svg-rect") { + itemType = "svg-path"; + obj2 = __spreadProps(__spreadValues({}, obj2), { + backgroundColor: void 0, + fill: `#C4C4C4`, + d: PathParser.makeRect(0, 0, obj2.width, obj2.height).d + }); + } else if (itemType === "text") { + obj2 = __spreadValues({ + width: 300, + height: 50 + }, obj2); + } else if (itemType === "artboard") { + obj2 = __spreadProps(__spreadValues({}, obj2), { + backgroundColor: "white" + }); } - makeTimingLine(timing, width2 = 10, startX = 0, startY = 0) { - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0} ${startY + width2} - L${startX + width2 * 1 / 3} ${startY + width2} - L${startX + width2 * 1 / 3} ${startY + width2 * 2 / 3} - L${startX + width2 * 2 / 3} ${startY + width2 * 2 / 3} - L${startX + width2 * 2 / 3} ${startY + width2 * 1 / 3} - L${startX + width2} ${startY + width2 * 1 / 3} - L${startX + width2} ${startY + 0} - ` - }); - case TimingFunction.PATH: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(0, width2).d - }); - default: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0} ${startY + width2} - C - ${startX + timing.x1 * width2} ${startY + width2 - timing.y1 * width2} - ${startX + timing.x2 * width2} ${startY + width2 - timing.y2 * width2} - ${startX + width2} ${startY + 0} - ` - }); + const newObjAttrs = __spreadValues({ itemType }, obj2); + const item = editor.createModel(newObjAttrs); + editor.context.commands.executeCommand("moveLayerToTarget", `add layer - ${itemType}`, item, containerItem); + editor.nextTick(() => { + editor.emit("appendLayer", item); + if (isSelected) { + editor.context.selection.select(item); } + }); +} +var __glob_0_72 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": newComponent +}, Symbol.toStringTag, { value: "Module" })); +var nextTimelineItem = { + command: "nextTimelineItem", + execute: function(editor) { + _currentProject(editor, (project2, timeline) => { + var nextTime = project2.getSelectedTimelineNextTime(); + project2.setTimelineCurrentTime(timecode(timeline.fps, nextTime)); + project2.seek(); + editor.emit("playTimeline"); + }); } - makeConicTimingLine(timing, width2 = 10, startX = 0, startY = 0) { - const half = width2 / 2; - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0 - half} ${startY + width2 - half} - L${startX + width2 * 1 / 3 - half} ${startY + width2 - half} - L${startX + width2 * 1 / 3 - half} ${startY + width2 * 2 / 3 - half} - L${startX + width2 * 2 / 3 - half} ${startY + width2 * 2 / 3 - half} - L${startX + width2 * 2 / 3 - half} ${startY + width2 * 1 / 3 - half} - L${startX + width2 - half} ${startY + width2 * 1 / 3 - half} - L${startX + width2 - half} ${startY + 0 - half} - ` - }); - case TimingFunction.PATH: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(-half, width2).d +}; +var __glob_0_73 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": nextTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var open_editor = { + command: "open.editor", + description: "Open custom editor for item when doubleclick is fired", + execute: function(editor, current) { + if (!current && editor.context.selection.isOne === false) + return; + current = current || editor.context.selection.current; + if (current) { + if (current.editablePath) { + editor.emit("showPathEditor", "modify", { + box: "canvas", + current, + matrix: current.matrix, + isControl: true, + disableCurve: true, + d: current.editablePath, + changeEvent: (data) => { + editor.context.commands.executeCommand("setAttribute", "change editable path", editor.context.selection.packByValue(__spreadValues({}, current.recoverEditablePath(data.d)), [current.id])); + editor.nextTick(() => { + if (editor.context.stateManager.isPointerUp) { + editor.context.commands.emit("recoverBooleanPath"); + } + }); + } }); - default: - return /* @__PURE__ */ createElementJsx("path", { - class: "timing", - d: ` - M${startX + 0 - half} ${startY + width2 - half} - C - ${startX + timing.x1 * width2 - half} ${startY + width2 - timing.y1 * width2 - half} - ${startX + timing.x2 * width2 - half} ${startY + width2 - timing.y2 * width2 - half} - ${startX + width2 - half} ${startY + 0 - half} - ` + editor.emit("hideSelectionToolView"); + } else if (current.d) { + editor.emit("showPathEditor", "modify", { + box: "canvas", + current, + matrix: current.matrix, + d: current.absolutePath().d, + changeEvent: (data) => { + const newCurrent = editor.context.selection.current; + if (newCurrent.isSVG() && newCurrent.isNot("svg-path")) { + const newPathData = newCurrent.toSVGPath(); + const newPath = editor.createModel(__spreadValues({ + itemType: "svg-path" + }, newPathData)); + editor.context.selection.select(newPath); + newCurrent.insertAfter(newPath); + editor.nextTick(() => { + editor.context.commands.emit("removeLayer", [newCurrent.id]); + editor.context.commands.emit("updatePathItem", data); + }); + } else { + editor.context.commands.emit("updatePathItem", data); + editor.nextTick(() => { + if (editor.context.stateManager.isPointerUp) { + editor.context.commands.emit("recoverBooleanPath"); + } + }); + } + } }); + editor.emit("hideSelectionToolView"); + } else if (current.clipPath) { + var obj2 = ClipPath.parseStyle(current.clipPath); + if (obj2.type === "path") { + var d = current.absolutePath(current.clipPathString).d; + var mode = d ? "modify" : "path"; + editor.emit("showPathEditor", mode, { + changeEvent: (data) => { + const resultPath = current.invertPath(data.d).d; + editor.context.commands.executeCommand("setAttribute", "change clip-path", editor.context.selection.packByValue({ + clipPath: `path(${resultPath})` + })); + }, + current, + d + }); + editor.emit("hideSelectionToolView"); + } else if (obj2.type === "svg") + ; + else { + editor.emit("showClippathEditorView"); + } + } else + ; } } - makeTimingCircle(colorstepIndex, current, prev) { - const prevStickScreenXY = prev.stickScreenXYInEnd; - const stickScreenXY = current.stickScreenXYInStart; - const { timing, timingCount } = current; - let pos; - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - pos = lerp$1([], prevStickScreenXY, stickScreenXY, 0.5); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timing.count)); - default: - pos = lerp$1([], prevStickScreenXY, stickScreenXY, 0.5); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timingCount)); +}; +var __glob_0_74 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": open_editor +}, Symbol.toStringTag, { value: "Module" })); +var pauseTimelineItem = { + command: "pauseTimelineItem", + execute: function(editor) { + if (editor.timer) { + editor.timer.stop(); } } - makeConicTimingCircle(startPoint, colorstepIndex, current, prev) { - const prevStickScreenXY = prev.stickScreenXY; - const stickScreenXY = current.stickScreenXY; - const { timing, timingCount } = current; - const dist$1 = dist(prevStickScreenXY, startPoint); - const prevAngle = calculateAngle360(...subtract([], prevStickScreenXY, startPoint)); - const angle = calculateAngle360(...subtract([], stickScreenXY, startPoint)); - let nextAngle = this.getRealAngle(prevAngle + (angle - prevAngle) / 2); - const bigArc = Math.abs(angle - prevAngle) % 360 >= 180 ? 1 : 0; - if (bigArc) { - nextAngle -= 180; +}; +var __glob_0_75 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": pauseTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var playTimelineItem = { + command: "playTimelineItem", + description: "Play button action", + execute: function(editor, speed2 = 1, iterationCount = 1, direction2 = "normal") { + editor.context.selection.empty(); + _currentProject(editor, (project2, timeline) => { + var lastTime = project2.getSelectedTimelineLastTime(); + if (editor.timer) { + editor.timer.stop(); + } else { + editor.timer = makeTimer({ + elapsed: timeline.currentTime * 1e3, + speed: speed2, + duration: lastTime * 1e3, + iterationCount, + direction: direction2 + }); + } + editor.timer.play({ + duration: lastTime * 1e3, + elapsed: timeline.currentTime * 1e3, + speed: speed2, + iterationCount, + direction: direction2, + tick: (elapsed) => { + project2.seek(timecode(timeline.fps, elapsed / 1e3)); + editor.emit("playTimeline"); + }, + last: (elapsed) => { + project2.seek(timecode(timeline.fps, elapsed / 1e3)); + editor.emit("playTimeline"); + editor.nextTick(() => { + editor.emit("stopTimeline"); + }); + }, + stop: (elapsed) => { + project2.stop(timecode(timeline.fps, elapsed / 1e3)); + editor.emit("stopTimeline"); + } + }); + }); + } +}; +var __glob_0_76 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": playTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var prevTimelineItem = { + command: "prevTimelineItem", + execute: function(editor) { + _currentProject(editor, (project2, timeline) => { + var prevTime = project2.getSelectedTimelinePrevTime(); + project2.setTimelineCurrentTime(timecode(timeline.fps, prevTime)); + project2.seek(); + editor.emit("playTimeline"); + }); + } +}; +var __glob_0_77 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": prevTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var recoverBooleanPath = { + command: "recoverBooleanPath", + description: "recover box rectangle for boolean path result", + execute: function(editor) { + const current = editor.context.selection.current; + let booleanContainer; + if (current && current.isBooleanItem) { + booleanContainer = current.parent; + } else if (current && current.is("boolean-path")) { + booleanContainer = current; } - var [pos] = vertiesMap([lerp$1([], startPoint, add$1([], startPoint, [-1, 0, 0]), dist$1)], calculateRotationOriginMat4(nextAngle, startPoint)); - switch (timing.name) { - case TimingFunction.LINEAR: - return ``; - case TimingFunction.STEPS: - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timing.count)); - default: - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { - class: "step-point", - "data-colorstep-index": colorstepIndex, - cx: pos[0], - cy: pos[1], - r: 7 - }), /* @__PURE__ */ createElementJsx("text", { - x: pos[0], - y: pos[1], - dy: 4, - "text-anchor": "middle" - }, timingCount)); + if (booleanContainer) { + const isBooleanItem = typeof current.isBooleanItem === "boolean" && current.isBooleanItem; + const booleanPath = booleanContainer.d; + if (!booleanPath) { + return; + } + const layersCache = booleanContainer.layers.map((it) => { + return { + item: it, + matrix: it.matrix + }; + }); + const newBooleanContainerRect = booleanContainer.updatePath(booleanPath); + delete newBooleanContainerRect.d; + booleanContainer.reset(newBooleanContainerRect); + layersCache.forEach((it) => { + booleanContainer.resetMatrix(it.item); + }); + const ids = [...layersCache.map((it) => it.item.id), booleanContainer.id]; + const data = editor.context.selection.packByIds(ids, "x", "y", "width", "height"); + editor.context.commands.executeCommand("setAttribute", "fit boolean path", data, { + origin: "*", + doNotChildrenScale: isBooleanItem + }); } } - makeTimingArea(colorstepIndex, current, prev, size2) { - const prevStickScreenXY = prev.stickScreenXYInEnd; - const stickScreenXY = current.stickScreenXYInStart; - return /* @__PURE__ */ createElementJsx("g", { - class: "timing-area" - }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx("path", { - class: "timing-path", - d: ` - M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} - L ${stickScreenXY[0]} ${stickScreenXY[1]} - ` - }), this.makeTimingCircle(colorstepIndex, current, prev, size2)); - } - getRealAngle(angle) { - return angle < 0 ? 360 + angle : angle; - } - makeConicTimingArea(startPoint, colorstepIndex, current, prev, size2, dist2, startAngle) { - const prevStickScreenXY = prev.stickScreenXY; - const stickScreenXY = current.stickScreenXY; - const prevAngle = calculateAngle360(...subtract([], prevStickScreenXY, startPoint)) + startAngle; - const angle = calculateAngle360(...subtract([], stickScreenXY, startPoint)) + startAngle; - const nextAngle = 360 - prevAngle; - const nextAngle2 = angle; - const bigArc = Math.abs(nextAngle + nextAngle2) % 360 >= 180 ? 1 : 0; - return /* @__PURE__ */ createElementJsx("g", { - class: "timing-area" - }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("path", { - class: "timing-path", - d: ` - M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} - A ${dist2} ${dist2} 0 ${bigArc} 1 ${stickScreenXY[0]} ${stickScreenXY[1]} - ` - })), this.makeConicTimingCircle(startPoint, colorstepIndex, current, prev, dist2)); - } - makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint) { - const size2 = TOOL_SIZE; - const dist2 = subtract([], endPoint, startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { - if (index2 === 0) - return ""; - return this.makeTimingArea(index2, it, colorsteps[index2 - 1], TOOL_SIZE); - }), colorsteps.map((it, index2) => { - return /* @__PURE__ */ createElementJsx("g", { - transform: `rotate(${angle} ${it.stickScreenXY[0]} ${it.stickScreenXY[1]})` - }, /* @__PURE__ */ createElementJsx("rect", { - id: it.id, - "data-index": index2, - class: "colorstep", - x: it.stickScreenXY[0], - y: it.stickScreenXY[1], - width: size2, - height: size2, - fill: it.color, - tabIndex: -1, - "data-x": it.screenXY[0], - "data-y": it.screenXY[1] - }), this.makeTimingLine(it.timing, size2, it.stickScreenXY[0], it.stickScreenXY[1])); - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "start", - cx: startPoint[0], - cy: startPoint[1] - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "end", - cx: endPoint[0], - cy: endPoint[1] - }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "shape", - cx: shapePoint[0], - cy: shapePoint[1] - }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { - class: "hover-colorstep", - r: "5", - cx: newHoverColorStepPoint[0], - cy: newHoverColorStepPoint[1], - fill: this.state.hoverColorStep.color - })); +}; +var __glob_0_78 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": recoverBooleanPath +}, Symbol.toStringTag, { value: "Module" })); +var refreshArtboard = { + command: "refreshArtboard", + execute: function(editor) { + const command = editor.createCommandMaker(); + command.emit("refreshLayerTreeView"); + command.emit("refreshAllCanvas"); + command.emit(UPDATE_CANVAS); + command.emit("refreshAllElementBoundSize"); + command.emit(REFRESH_SELECTION); + command.run(); } - makeConicGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint, dist2, startAngle) { - const size2 = TOOL_SIZE; - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { - if (index2 === 0) - return ""; - return this.makeConicTimingArea(startPoint, index2, it, colorsteps[index2 - 1], TOOL_SIZE, dist2, startAngle); - }), colorsteps.map((it, index2) => { - const angle = calculateAngle360(...subtract([], it.screenXY, startPoint)) - 180; - return /* @__PURE__ */ createElementJsx("g", { - transform: `rotate(${angle} ${it.screenXY[0]} ${it.screenXY[1]})` - }, /* @__PURE__ */ createElementJsx("rect", { - id: it.id, - "data-index": index2, - class: "colorstep", - x: it.screenXY[0] - size2 / 2, - y: it.screenXY[1] - size2 / 2, - width: size2, - height: size2, - fill: it.color, - tabIndex: -1, - "data-x": it.screenXY[0], - "data-y": it.screenXY[1] - }), this.makeConicTimingLine(it.timing, size2, it.screenXY[0], it.screenXY[1], startAngle)); - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "start", - cx: startPoint[0], - cy: startPoint[1] - }), /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "end", - cx: endPoint[0], - cy: endPoint[1] - }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { - class: "point", - "data-type": "shape", - cx: shapePoint[0], - cy: shapePoint[1] - }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { - class: "hover-colorstep", - r: "5", - cx: newHoverColorStepPoint[0], - cy: newHoverColorStepPoint[1], - fill: this.state.hoverColorStep.color - })); +}; +var __glob_0_79 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": refreshArtboard +}, Symbol.toStringTag, { value: "Module" })); +function makeEmitList(maker, current) { + var _a; + if (current.hasLayout()) { + maker.emit("refreshElementBoundSize", current); + } else { + if (current && (current.isLayoutItem() || ((_a = current.parent) == null ? void 0 : _a.is("boolean-path")))) { + maker.emit("refreshElementBoundSize", current.parent); + } else { + maker.emit("refreshElementBoundSize", current); + } } - makeGradientRect(result) { - const boxPosition = this.$viewport.applyVerties(result.backVerties); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { - class: "gradient-rect" - }, /* @__PURE__ */ createElementJsx("svg", null, /* @__PURE__ */ createElementJsx("path", { - class: "back-rect", - d: ` - M ${boxPosition[0][0]} ${boxPosition[0][1]} - L ${boxPosition[1][0]} ${boxPosition[1][1]} - L ${boxPosition[2][0]} ${boxPosition[2][1]} - L ${boxPosition[3][0]} ${boxPosition[3][1]} - Z - ` - }))), /* @__PURE__ */ createElementJsx("div", { - class: "resizer", - "data-direction": "bottom-right", - style: { - left: Length.px(boxPosition[2][0]), - top: Length.px(boxPosition[2][1]) +} +var refreshElement = { + command: "refreshElement", + execute: function(editor, current, checkRefreshCanvas = true) { + const maker = editor.createCommandMaker(); + if (isArray(current)) { + if (checkRefreshCanvas) { + maker.emit("refreshAllCanvas"); } - })); + maker.emit(UPDATE_CANVAS, current); + current.forEach((item) => { + makeEmitList(maker, item); + }); + } else { + if (checkRefreshCanvas) { + if (current && current.hasChangedField("children", "changedChildren", "parentId")) { + maker.emit("refreshAllCanvas"); + } + } + maker.emit(UPDATE_CANVAS, current); + makeEmitList(maker, current); + } + maker.run(); } - makeCenterPoint(result) { - const { image: image2 } = result.backgroundImage; - switch (image2.type) { - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - return this.makeLinearCenterPoint(result); - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - return this.makeRadialCenterPoint(result); - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - return this.makeConicCenterPoint(result); +}; +var __glob_0_80 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": refreshElement +}, Symbol.toStringTag, { value: "Module" })); +function refreshHistory(editor) { + editor.context.commands.emit("saveJSON"); +} +var __glob_0_81 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": refreshHistory +}, Symbol.toStringTag, { value: "Module" })); +var refreshSelectedOffset = { + command: "refreshSelectedOffset", + execute: function(editor) { + var offset = editor.timeline.items[0]; + if (offset) { + editor.emit("refreshOffsetValue", offset); } - return ""; } - makeConicCenterPoint(result) { - const { image: image2 } = result.backgroundImage; - let centerPosition, centerStick; - let startPoint, endPoint, shapePoint, colorsteps; - centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - startPoint = this.$viewport.applyVertex(result.startPoint); - endPoint = this.$viewport.applyVertex(result.endPoint); - shapePoint = this.$viewport.applyVertex(result.shapePoint); - let lastDist = dist(startPoint, endPoint) / 2; - if (lastDist < 50) { - lastDist = 50; +}; +var __glob_0_82 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": refreshSelectedOffset +}, Symbol.toStringTag, { value: "Module" })); +var removeAnimationItem = { + command: "removeAnimationItem", + execute: function(editor, id) { + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.removeAnimationItem(id); + editor.timeline.empty(); + editor.emit("refreshTimeline"); + editor.emit("removeAnimation"); } - colorsteps = result.colorsteps.map((it) => { - it.screenXY = this.$viewport.applyVertex(it.pos); - const pointDist = dist(it.screenXY, startPoint); - if (pointDist < lastDist) { - it.screenXY = lerp$1([], startPoint, lerp$1([], startPoint, it.screenXY, 1 / pointDist), lastDist + 20); - } else if (pointDist > lastDist) { - it.screenXY = lerp$1([], startPoint, it.screenXY, (lastDist + 20) / pointDist); - } - it.stickScreenXY = clone(it.screenXY); - const dist$1 = subtract([], it.screenXY, startPoint); - it.angle = calculateAngle360(dist$1[0], dist$1[1]); - return it; + } +}; +var __glob_0_83 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": removeAnimationItem +}, Symbol.toStringTag, { value: "Module" })); +var removeLayer = { + command: "removeLayer", + execute: function(editor, ids = void 0) { + const currentIds = ids || editor.context.selection.ids; + const removedIds = []; + editor.context.selection.itemsByIds(currentIds).forEach((item) => { + removedIds.push(item.id); + item.remove(); }); - centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - const stickPoint = this.$viewport.applyVertex(result.shapePoint); - centerStick = lerp$1([], centerPosition, lerp$1([], centerPosition, stickPoint, 1 / dist(centerPosition, stickPoint)), lastDist + 50); - const targetStick = lerp$1([], centerStick, centerPosition, 1); - let newHoverColorStepPoint = null; - if (this.state.hoverColorStep) { - const hoverAngle = this.state.hoverColorStep.percent * 3.6; - const originDist = dist(centerPosition, shapePoint); - [newHoverColorStepPoint] = vertiesMap([ - lerp$1([], centerPosition, shapePoint, (lastDist + 20) / originDist) - ], calculateRotationOriginMat4(hoverAngle, centerPosition)); + editor.context.selection.removeById(removedIds); + editor.nextTick(() => { + editor.emit("refreshAll"); + }); + } +}; +var __glob_0_84 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": removeLayer +}, Symbol.toStringTag, { value: "Module" })); +var removeTimeline = { + command: "removeTimeline", + execute: function(editor, layerId) { + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.removeTimeline(layerId); + editor.timeline.empty(); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); } - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { - class: "gradient-position center", - "data-radial-type": image2.radialType, - style: { - left: Length.px(centerPosition[0]), - top: Length.px(centerPosition[1]) - } - }), /* @__PURE__ */ createElementJsx("svg", { - class: "gradient-angle" - }, /* @__PURE__ */ createElementJsx("circle", { - class: "size", - cx: startPoint[0], - cy: startPoint[1], - r: lastDist - }), /* @__PURE__ */ createElementJsx("circle", { - class: "area-line", - cx: startPoint[0], - cy: startPoint[1], - r: lastDist - }), /* @__PURE__ */ createElementJsx("path", { - class: "stick", - d: ` - M ${targetStick[0]} ${targetStick[1]} - L ${centerStick[0]} ${centerStick[1]} - ` - }), /* @__PURE__ */ createElementJsx("circle", { - class: "rotate", - cx: centerStick[0], - cy: centerStick[1], - r: "7", - "data-center-x": centerPosition[0], - "data-center-y": centerPosition[1] - }), this.makeConicGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint, lastDist + 20, image2.angle))); } - makeRadialCenterPoint(result) { - let colorsteps, startPoint, endPoint, shapePoint; - startPoint = this.$viewport.applyVertex(result.startPoint); - endPoint = this.$viewport.applyVertex(result.endPoint); - shapePoint = this.$viewport.applyVertex(result.shapePoint); - colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); - let newHoverColorStepPoint = null; - if (this.state.hoverColorStep) { - newHoverColorStepPoint = lerp$1([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); +}; +var __glob_0_85 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": removeTimeline +}, Symbol.toStringTag, { value: "Module" })); +var removeTimelineProperty = { + command: "removeTimelineProperty", + execute: function(editor, layerId, property) { + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.removeTimelineProperty(layerId, property); + editor.timeline.empty(); + editor.emit("refreshTimeline"); + editor.emit("refreshSelectedOffset"); } - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("svg", { - class: "gradient-radial-line" - }, /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "area-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "start-end-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${shapePoint[0]} ${shapePoint[1]} - `, - class: "shape-line" - }), this.makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint))); } - makeStickPoint(colorsteps, startPoint, endPoint) { - const size2 = TOOL_SIZE; - const dist2 = subtract([], endPoint, startPoint); - const angle = calculateAngle360(dist2[0], dist2[1]) - 180; - const rotateInverse = calculateRotationOriginMat4(-angle, startPoint); - const rotateInverseInverse = invert([], rotateInverse); - return colorsteps.map((it) => { - it.screenXY = this.$viewport.applyVertex(it.pos); - const [newScreenXY] = vertiesMap([it.screenXY], rotateInverse); - [it.stickScreenXY, it.stickScreenXYInStart, it.stickScreenXYInEnd] = vertiesMap([ - [newScreenXY[0] - size2 / 2, newScreenXY[1] - size2 * 1.5, 0], - [ - newScreenXY[0] - size2 / 2, - newScreenXY[1] - size2 * 1.5 + size2 / 2, - 0 - ], - [ - newScreenXY[0] + size2 / 2, - newScreenXY[1] - size2 * 1.5 + size2 / 2, - 0 - ] - ], rotateInverseInverse); - return it; - }); +}; +var __glob_0_86 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": removeTimelineProperty +}, Symbol.toStringTag, { value: "Module" })); +function resizeArtBoard(editor, size2 = "") { + var current = editor.context.selection.current; + if (current && current.is("artboard")) { + if (!size2.trim()) + return; + var [width2, height2] = size2.split("x"); + width2 = +width2; + height2 = +height2; + current.resize(width2, height2); + editor.context.selection.select(current); + _doForceRefreshSelection(editor); } - makeLinearCenterPoint(result) { - let centerPosition, centerStick, startPoint, endPoint, areaStartPoint, areaEndPoint, colorsteps; - startPoint = this.$viewport.applyVertex(result.startPoint); - endPoint = this.$viewport.applyVertex(result.endPoint); - areaStartPoint = this.$viewport.applyVertex(result.areaStartPoint); - areaEndPoint = this.$viewport.applyVertex(result.areaEndPoint); - centerPosition = this.$viewport.applyVertex(result.centerPosition); - colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); - const lastDist = dist(centerPosition, endPoint); - const [stickPoint] = vertiesMap([endPoint], calculateRotationOriginMat4(90, lerp$1([], startPoint, endPoint, 0.5))); - centerStick = lerp$1([], centerPosition, lerp$1([], centerPosition, stickPoint, 1 / dist(centerPosition, stickPoint)), lastDist + 20); - const targetStick = lerp$1([], centerStick, centerPosition, 20 / (lastDist + 20)); - let newHoverColorStepPoint = null; - if (this.state.hoverColorStep) { - newHoverColorStepPoint = lerp$1([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); - } - return /* @__PURE__ */ createElementJsx("svg", { - class: "gradient-angle" - }, /* @__PURE__ */ createElementJsx("path", { - class: "stick", - d: ` - M ${targetStick[0]} ${targetStick[1]} - L ${centerStick[0]} ${centerStick[1]} - ` - }), /* @__PURE__ */ createElementJsx("circle", { - class: "size", - cx: centerPosition[0], - cy: centerPosition[1], - r: dist(centerPosition, startPoint) - }), /* @__PURE__ */ createElementJsx("circle", { - class: "rotate", - cx: centerStick[0], - cy: centerStick[1], - r: "7", - "data-center-x": centerPosition[0], - "data-center-y": centerPosition[1] - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${areaStartPoint[0]} ${areaStartPoint[1]} - L ${areaEndPoint[0]} ${areaEndPoint[1]} - `, - class: "area-line" - }), /* @__PURE__ */ createElementJsx("path", { - d: ` - M ${startPoint[0]} ${startPoint[1]} - L ${endPoint[0]} ${endPoint[1]} - `, - class: "start-end-line" - }), this.makeGradientPoint(colorsteps, startPoint, endPoint, null, newHoverColorStepPoint)); +} +var __glob_0_87 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": resizeArtBoard +}, Symbol.toStringTag, { value: "Module" })); +var rotateLayer = { + command: "rotateLayer", + description: "rotate layer by keydown with matrix ", + execute: function(editor, distAngle = 0) { + editor.context.commands.executeCommand("setAttribute", "change rotate", editor.context.selection.packByValue({ + angle: editor.context.selection.current.angle + distAngle + })); } - [LOAD("$el") + DOMDIFF]() { - const current = this.$context.selection.current; - if (!current) - return ""; - const result = current.createBackgroundImageMatrix(this.state.index); - this.state.lastBackgroundMatrix = result; - const image2 = result.backgroundImage.image; - switch (image2.type) { - case GradientType.LINEAR: - case GradientType.REPEATING_LINEAR: - this.state.centerPosition = this.$viewport.applyVertex(result.centerPosition); - this.state.startPoint = this.$viewport.applyVertex(result.startPoint); - this.state.endPoint = this.$viewport.applyVertex(result.endPoint); - this.state.rotateInverse = calculateRotationOriginMat4(-1 * result.backgroundImage.image.angle, this.state.centerPosition); - break; - case GradientType.RADIAL: - case GradientType.REPEATING_RADIAL: - this.state.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - this.state.startPoint = this.$viewport.applyVertex(result.startPoint); - this.state.endPoint = this.$viewport.applyVertex(result.endPoint); - break; - case GradientType.CONIC: - case GradientType.REPEATING_CONIC: - this.state.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); - this.state.startPoint = this.$viewport.applyVertex(result.shapePoint); - break; +}; +var __glob_0_88 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": rotateLayer +}, Symbol.toStringTag, { value: "Module" })); +var same_height = { + command: "same.height", + description: "fit at the same height", + execute: function(editor) { + var len2 = editor.context.selection.length; + if (len2 == 1) + ; + else if (len2 > 1) { + const rect2 = vertiesToRectangle(editor.context.selection.verties); + editor.context.commands.executeCommand("setAttribute", "fit at the same height", editor.context.selection.packByValue({ + y: rect2.y, + height: rect2.height + })); } - return /* @__PURE__ */ createElementJsx("div", null, this.makeGradientRect(result), image2.type === GradientType.STATIC || image2.type === GradientType.IMAGE ? null : this.makeCenterPoint(result)); } -} -function gradientEditorView(editor) { - editor.registerUI("canvas.view", { - GradientEditorView - }); -} -var GuideLineView$1 = ""; -const line = (source2, target, className = "base-line") => { - return ``; -}; -const hLineByPoint = (target, source2) => { - return line(target, source2); }; -const vLineByPoint = (target, source2) => { - return line(target, source2); +var __glob_0_89 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": same_height +}, Symbol.toStringTag, { value: "Module" })); +var same_width = { + command: "same.width", + description: "fit at the same width", + execute: function(editor) { + if (editor.context.selection.isMany) { + const rect2 = vertiesToRectangle(editor.context.selection.verties); + editor.context.commands.executeCommand("setAttribute", "fit at the same width", editor.context.selection.packByValue({ + x: rect2.x, + width: rect2.width + })); + } + } }; -const rect = (rectVerties) => { - return ``; +var __glob_0_90 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": same_width +}, Symbol.toStringTag, { value: "Module" })); +var saveJSON = { + command: "saveJSON", + execute: function(editor) { + editor.saveItem("model", editor.context.modelManager.toJSON()); + } }; -const point = (target, dist2 = 3, direction2 = "left") => { - if (direction2 === "left") { - return ``; +var __glob_0_91 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": saveJSON +}, Symbol.toStringTag, { value: "Module" })); +var savePNG = { + command: "savePNG", + execute: function(editor, callbackCommand = "") { + const item = editor.context.selection.current; + if (item) { + const svgString = ExportManager.generateSVG(editor, item).trim(); + const datauri = "data:image/svg+xml;base64," + window.btoa(svgString); + loadOriginalImage({ local: datauri }, (info, img) => { + createImagePng(img, (pngDataUri) => { + if (callbackCommand) { + editor.emit(callbackCommand, pngDataUri); + } + }); + }); + } } - if (direction2 === "right") { - return ``; +}; +var __glob_0_92 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": savePNG +}, Symbol.toStringTag, { value: "Module" })); +var segment_delete = { + command: "segment.delete", + execute: function(editor) { + editor.emit("deleteSegment"); } - if (direction2 === "up") { - return ``; +}; +var __glob_0_93 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": segment_delete +}, Symbol.toStringTag, { value: "Module" })); +var segment_move_down = { + command: "segment.move.down", + execute: function(editor, obj2 = { dy: 1 }) { + const dy = +obj2.dy; + editor.emit("moveSegment", 0, dy); } - if (direction2 === "down") { - return ``; +}; +var __glob_0_94 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": segment_move_down +}, Symbol.toStringTag, { value: "Module" })); +var segment_move_left = { + command: "segment.move.left", + execute: function(editor, obj2 = { dx: 1 }) { + const dx = +obj2.dx; + editor.emit("moveSegment", -1 * dx, 0); } - return ``; }; -class GuideLineView extends EditorElement { - template() { - return ``; +var __glob_0_95 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": segment_move_left +}, Symbol.toStringTag, { value: "Module" })); +var segment_move_right = { + command: "segment.move.right", + execute: function(editor, obj2 = { dx: 1 }) { + const dx = +obj2.dx; + editor.emit("moveSegment", dx, 0); } - initState() { - return { - list: [] - }; +}; +var __glob_0_96 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": segment_move_right +}, Symbol.toStringTag, { value: "Module" })); +var segment_move_up = { + command: "segment.move.up", + execute: function(editor, obj2 = { dy: 1 }) { + const dy = +obj2.dy; + editor.emit("moveSegment", 0, -1 * dy); } - [BIND("$guide")]() { - const line2 = this.createGuideLine(this.state.list); - return { - svgDiff: `${line2}` - }; +}; +var __glob_0_97 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": segment_move_up +}, Symbol.toStringTag, { value: "Module" })); +var select_all = { + command: "select.all", + execute: function(editor) { + var project2 = editor.context.selection.currentProject; + if (project2) { + editor.context.selection.select(...project2.layers); + editor.context.commands.emit("history.refreshSelection"); + } } - createLayerLine() { - return ""; +}; +var __glob_0_98 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": select_all +}, Symbol.toStringTag, { value: "Module" })); +var select_none = { + command: "select.none", + execute: function(editor) { + editor.context.selection.empty(); + editor.context.commands.emit("history.refreshSelection"); } - filterGuideLine(list2) { - list2 = list2.filter(Boolean); - return list2; +}; +var __glob_0_99 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": select_none +}, Symbol.toStringTag, { value: "Module" })); +var selectTimelineItem = { + command: "selectTimelineItem", + execute: function(editor, selectedId) { + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.selectTimeline(selectedId); + editor.emit("refreshTimeline"); + editor.emit("selectTimeline"); + } } - createGuideLine(list2) { - var images = []; - var texts = []; - list2 = this.filterGuideLine(list2); - for (var i = 0, len2 = list2.length; i < len2; i++) { - const [ - source2, - target, - axis, - dist$1, - newTarget, - sourceVerties, - targetVerties - ] = list2[i]; - const localDist = dist(source2, target); - const localSourceVertex = this.$viewport.applyVertex(source2); - const localTargetVertex = this.$viewport.applyVertex(target); - let localNewTargetVertex; - if (newTarget) { - localNewTargetVertex = this.$viewport.applyVerties([newTarget])[0]; - } - if (axis === "x") { - if (localDist > 0) { - images.push(line(localSourceVertex, localTargetVertex, "dash-line")); +}; +var __glob_0_100 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": selectTimelineItem +}, Symbol.toStringTag, { value: "Module" })); +var setAttribute = { + command: "setAttribute", + execute: function(editor, multiAttrs = {}, context = { origin: "*" }) { + const messages = []; + Object.entries(multiAttrs).forEach(([id, attrs]) => { + const item = editor.get(id); + const newAttrs = {}; + Object.entries(attrs).forEach(([key, value]) => { + newAttrs[key] = isFunction(value) ? value(item) : value; + }); + messages.push({ id: item.id, parentId: item.parentId, attrs: newAttrs }); + }); + if (messages.length == 0) { + return; + } + let hasRefreshCanvas = false; + const children2 = []; + messages.forEach((message) => { + const item = editor.get(message.id); + if (item) { + item.reset(message.attrs, context); + if (item.hasChangedField("layout")) { + item.layers.forEach((child) => { + if (child.isLayout(Layout.DEFAULT)) + ; + else if (child.isLayout(Layout.FLEX)) + ; + else if (child.isLayout(Layout.GRID)) + ; + editor.context.commands.emit("refreshElement", child); + }); } - if (localNewTargetVertex) { - images.push(line(localTargetVertex, localNewTargetVertex, "dash-line")); + children2.push(item); + if (item.hasChangedHirachy) { + hasRefreshCanvas = true; } } - if (axis === "y") { - if (localDist > 0) { - images.push(line(localSourceVertex, localTargetVertex, "dash-line")); - } - if (localNewTargetVertex) { - images.push(line(localTargetVertex, localNewTargetVertex, "dash-line")); - } + if (item.is("project")) { + return; } - if (axis === "x") { - images.push(hLineByPoint(localTargetVertex, localSourceVertex)); + if (item.parent && item.parent.is("project")) { + return; } - if (axis === "y") { - images.push(vLineByPoint(localTargetVertex, localSourceVertex)); + if (item.isLayoutItem() || item.isBooleanItem) { + const parent = editor.get(message.parentId); + if (message.parentId && (parent == null ? void 0 : parent.isNot("project"))) { + parent.reset({ changedChildren: true }, context); + hasRefreshCanvas = true; + } } - if (this.state.hasVerties) { - images.push(point(localSourceVertex, 3, "vertex")); - images.push(point(localTargetVertex, 3, "vertex")); + }); + if (children2.length) { + editor.context.commands.emit("refreshElement", children2, false); + } + if (hasRefreshCanvas) { + editor.emit("refreshAllCanvas"); + } + } +}; +var __glob_0_101 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": setAttribute +}, Symbol.toStringTag, { value: "Module" })); +var setTimelineOffset = { + command: "setTimelineOffset", + debounce: 100, + execute: function(editor, obj2) { + const project2 = editor.context.selection.currentProject; + if (project2) { + project2.setTimelineKeyframeOffsetValue(obj2.layerId, obj2.property, obj2.id, obj2.value, obj2.timing, obj2.time); + editor.emit("refreshTimeline"); + } + } +}; +var __glob_0_102 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": setTimelineOffset +}, Symbol.toStringTag, { value: "Module" })); +var showExportView = { + command: "showExportView", + execute: function(editor) { + editor.emit("showExportWindow"); + } +}; +var __glob_0_103 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": showExportView +}, Symbol.toStringTag, { value: "Module" })); +var sort_bottom = { + command: "sort.bottom", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else { + const parent = current.parent; + const distY = getVertiesMaxY(parent.verties) - getVertiesMaxY(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", 0, distY); } - if (sourceVerties) { - if (this.$context.selection.isOne && this.$editor.isPointerDown || this.$context.selection.isMany && !this.$editor.isPointerMove) { - images.push(rect(this.$viewport.applyVerties(sourceVerties))); - } + } else if (editor.context.selection.isMany) { + let maxRightY = getVertiesMaxY(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightY = getVertiesMaxY(item.verties); + return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; + })); + } + } +}; +var __glob_0_104 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_bottom +}, Symbol.toStringTag, { value: "Module" })); +var sort_center = { + command: "sort.center", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else if (current.artboard) { + const distX = getVertiesCenterX(current.artboard.verties) - getVertiesCenterX(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", distX, 0); } - if (targetVerties) { - images.push(rect(this.$viewport.applyVerties(targetVerties))); + } else if (editor.context.selection.isMany) { + let maxRightX = getVertiesCenterX(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightX = getVertiesCenterX(item.verties); + return { item, dist: [maxRightX - itemRightX, 0, 0] }; + })); + } + } +}; +var __glob_0_105 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_center +}, Symbol.toStringTag, { value: "Module" })); +var sort_left = { + command: "sort.left", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else { + const parent = current.parent; + const distX = getVertiesMinX(parent.verties) - getVertiesMinX(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", distX, 0); } + } else if (editor.context.selection.isMany) { + let maxRightX = getVertiesMinX(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightX = getVertiesMinX(item.verties); + return { item, dist: [maxRightX - itemRightX, 0, 0] }; + })); } - return [...images, ...texts].join(""); } - removeGuideLine() { - this.setState({ - list: [] - }); +}; +var __glob_0_106 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_left +}, Symbol.toStringTag, { value: "Module" })); +var sort_middle = { + command: "sort.middle", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else if (current.artboard) { + const distY = getVertiesCenterY(current.artboard.verties) - getVertiesCenterY(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", 0, distY); + } + } else if (editor.context.selection.isMany) { + let maxRightY = getVertiesCenterY(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightY = getVertiesCenterY(item.verties); + return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; + })); + } } - setGuideLine(list2, hasVerties = false) { - this.setState({ - list: list2, - hasVerties - }); +}; +var __glob_0_107 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_middle +}, Symbol.toStringTag, { value: "Module" })); +var sort_right = { + command: "sort.right", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else { + const parent = current.parent; + const distX = getVertiesMaxX(parent.verties) - getVertiesMaxX(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", distX, 0); + } + } else if (editor.context.selection.isMany) { + let maxRightX = getVertiesMaxX(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightX = getVertiesMaxX(item.verties); + return { item, dist: [maxRightX - itemRightX, 0, 0] }; + })); + } } - refreshSmartGuides(targetVertiesList) { - if (this.$context.selection.isEmpty) +}; +var __glob_0_108 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_right +}, Symbol.toStringTag, { value: "Module" })); +var sort_top = { + command: "sort.top", + execute: function(editor) { + if (editor.context.selection.isOne) { + const current = editor.context.selection.current; + if (current.parent.is("project")) + ; + else { + const parent = current.parent; + const distY = getVertiesMinY(parent.verties) - getVertiesMinY(editor.context.selection.verties); + editor.context.commands.emit("moveLayer", 0, distY); + } + } else if (editor.context.selection.isMany) { + let maxRightY = getVertiesMinY(editor.context.selection.verties); + editor.context.commands.emit("moveLayerForItems", editor.context.selection.map((item) => { + let itemRightY = getVertiesMinY(item.verties); + return { item, dist: [0, maxRightY - itemRightY, 0, 0] }; + })); + } + } +}; +var __glob_0_109 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": sort_top +}, Symbol.toStringTag, { value: "Module" })); +var switch_path = { + command: "switch.path", + execute: async (editor) => { + const current = editor.context.selection.current; + if (!current) return; - const sourceVerties = toRectVerties(this.$context.selection.verties); - let targetList; - if (targetVertiesList) { - targetList = targetVertiesList.map((it) => toRectVerties(it)); - } else { - const targets = this.$context.snapManager.snapTargetLayers.map((target) => { - const rectVerties = toRectVerties(target.verties); - return { - targetVerties: rectVerties, - dist: dist(rectVerties[4], sourceVerties[4]) - }; + if (current.is("boolean-path") || current.isBooleanItem) { + let parent = current; + if (current.isBooleanItem) { + parent = current.parent; + } + editor.context.selection.select(parent); + editor.context.commands.executeCommand("setAttribute", "change boolean operation", editor.context.selection.packByValue({ + booleanOperation: parent["boolean-operation"], + children: parent.children.reverse() + })); + editor.nextTick(() => { + editor.context.commands.emit("recoverBooleanPath"); + editor.context.selection.select(current); }); - targets.sort((a, b) => { - return a.dist - b.dist; + } + } +}; +var __glob_0_110 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": switch_path +}, Symbol.toStringTag, { value: "Module" })); +var ungroup_item = { + command: "ungroup.item", + execute: function(editor) { + if (editor.context.selection.length === 0) + return; + const current = editor.context.selection.current; + if (current) { + let groupLayer = current; + let layers2 = [...groupLayer.layers]; + layers2.reverse(); + layers2.forEach((child) => { + groupLayer.insertBefore(child); }); - targetList = targets.map((target) => target.targetVerties); + editor.context.selection.select(...layers2); + editor.emit("refreshAll"); } - const xList = targetList.map((targetVerties) => makeGuidePoint(sourceVerties, targetVerties)); - xList.sort((a, b) => { - return a[3] - b[3]; - }); - const list2 = [xList[0], xList[1]].filter(Boolean); - this.setGuideLine(list2); } - refreshSmartGuidesForVerties(dist2 = 0) { - let verties = this.$context.selection.verties; - if (verties.length) { - verties = [ - ...verties, - lerp$1([], verties[0], verties[1], 0.5), - lerp$1([], verties[1], verties[2], 0.5), - lerp$1([], verties[2], verties[3], 0.5), - lerp$1([], verties[3], verties[0], 0.5) - ]; - } - const guides = this.$context.snapManager.findGuide(verties, dist2); - this.setGuideLine(guides, true); +}; +var __glob_0_111 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": ungroup_item +}, Symbol.toStringTag, { value: "Module" })); +var updateClipPath = { + command: "updateClipPath", + description: "update clip-path property ", + execute: function(editor, pathObject) { + editor.context.commands.executeCommand("setAttribute", "change clip-path", editor.context.selection.packByValue({ + clipPath: `path(${pathObject.d})` + })); } - [SUBSCRIBE("removeGuideLine", REFRESH_SELECTION)]() { - this.removeGuideLine(); +}; +var __glob_0_112 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateClipPath +}, Symbol.toStringTag, { value: "Module" })); +var updateImage = { + command: "updateImage", + execute: function(editor, imageFileOrBlob, rect2, containerItem) { + var reader = new window.FileReader(); + reader.onload = (e) => { + var datauri = e.target.result; + var local = window.URL.createObjectURL(imageFileOrBlob); + editor.context.commands.emit("addImageAssetItem", { + id: uuidShort(), + type: imageFileOrBlob.type, + name: imageFileOrBlob.name, + original: datauri, + local + }, rect2, containerItem); + }; + reader.readAsDataURL(imageFileOrBlob); } - [SUBSCRIBE("refreshGuideLineByTarget")](targetVertiesList = []) { - return this.refreshSmartGuides(targetVertiesList); +}; +var __glob_0_113 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateImage +}, Symbol.toStringTag, { value: "Module" })); +var updateImageAssetItem = { + command: "updateImageAssetItem", + execute: function(editor, item, callback) { + var reader = new window.FileReader(); + reader.onload = (e) => { + var datauri = e.target.result; + var local = window.URL.createObjectURL(item); + var project2 = editor.context.selection.currentProject; + if (project2) { + const image2 = project2.createImage({ + id: uuidShort(), + type: item.type, + name: item.name, + original: datauri, + local + }); + editor.context.commands.emit("addImageAsset"); + isFunction(callback) && callback(image2.id); + } + }; + reader.readAsDataURL(item); } - get currentDistWithScale() { - return 1 / this.$viewport.scale; +}; +var __glob_0_114 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateImageAssetItem +}, Symbol.toStringTag, { value: "Module" })); +const MAX_CACHE_COUNT = 1e3; +const cachedTransformMap = /* @__PURE__ */ new Map(); +class TransformCache { + static has(key) { + return cachedTransformMap.has(key); } - [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION_TOOL)]() { - this.refreshSmartGuidesForVerties(this.currentDistWithScale); + static get(key) { + return cachedTransformMap.get(key); } - [SUBSCRIBE(UPDATE_CANVAS)]() { - const expect = this.$context.selection.hasChangedField("d", "clip-path"); - if (!expect) { - this.refreshSmartGuidesForVerties(this.currentDistWithScale); + static set(key, parsedValue) { + if (cachedTransformMap.size > MAX_CACHE_COUNT) { + cachedTransformMap.clear(); } + cachedTransformMap.set(key, parsedValue); } } -function guideLineView(editor) { - editor.registerUI("canvas.view", { - GuideLineView - }); -} -var HistoryProperty$1 = ""; -class HistoryProperty extends BaseProperty { - afterRender() { - this.show(); +const TRANSFORM_REG = /((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi; +class Transform extends PropertyItem { + getDefaultObject() { + return { + itemType: "transform", + value: [] + }; } - getTitle() { - return "History"; + toCloneObject() { + return __spreadValues({}, this.attrs("itemType", "type", "value")); } - getBody() { - return ` -
- `; + toString() { + return `${this.json.type}(${this.json.value.join(", ") || ""})`; } - [LOAD("$body") + DOMDIFF]() { - return this.$editor.context.history.map((it, index2) => { - if (it === "-") { - return `
-
`; - } - return ` -
- ${index2 === this.$editor.context.history.currentIndex ? obj$3.arrowRight : ""} - ${it.message} -
- `; - }); + static join(list2) { + var firstType = "perspective"; + var lastType = "matrix3d"; + var arr = list2.filter((it) => it.type === firstType); + var last = list2.filter((it) => it.type === lastType); + var arr2 = list2.filter((it) => it.type !== firstType && it.type !== lastType); + return [...arr, ...arr2, ...last].map((it) => new Transform(it).toString()).join(" "); } - [SUBSCRIBE("refreshHistoryList")]() { - this.refresh(); + hasNumberValue() { + var type = this.json.type; + return type.includes("matrix") || type.includes("scale"); } -} -function history(editor) { - editor.registerUI("inspector.tab.history", { - HistoryProperty - }); -} -var HoverView$1 = ""; -class HoverView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--hover-view sepia(0.2)" - }, /* @__PURE__ */ createElementJsx("div", { - class: "elf--hover-rect", - ref: "$hoverRect" - })); + static parse(transform2) { + return new Transform(transform2); } - checkModeView() { - const e = this.$config.get("bodyEvent"); - if (!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))) { - return false; + static remove(transform2, type = []) { + if (typeof type === "string") { + type = [type]; } - const canvas = Dom.create(e.target).closest("elf--page-container"); - if (!canvas) - return false; - return this.$modeView.isCurrentMode(ViewModeType.CanvasView) && this.$stateManager.isPointerUp; + return Transform.filter(transform2, (it) => { + return type.includes(it.type) === false; + }); } - [CONFIG("bodyEvent") + IF("checkModeView")]() { - var _a, _b, _c; - if (this.$config.true("set.move.control.point")) { - this.$context.selection.setHoverId(""); - this.renderHoverLayer(); - return; - } - const filteredList = this.$context.selection.filteredLayers; - const point2 = this.$viewport.getWorldPosition(this.$config.get("bodyEvent")); - const items = filteredList.filter((it) => it.hasPoint(point2[0], point2[1])).filter((it) => it.isNot("artboard")); - let hoverItems = items; - let id = (_a = hoverItems[0]) == null ? void 0 : _a.id; - if (this.$context.selection.isEmpty) { - id = (_b = hoverItems[0]) == null ? void 0 : _b.id; - } else if (this.$context.selection.isOne) { - const pathIds = this.$context.selection.current.pathIds; - hoverItems = hoverItems.filter((it) => pathIds.includes(it.id) === false || it.id === this.$context.selection.current.id); - id = (_c = hoverItems[0]) == null ? void 0 : _c.id; - } - if (!id) { - this.$context.selection.setHoverId(""); - this.renderHoverLayer(); + static filter(transform2, filterFunction) { + return Transform.join(Transform.parseStyle(transform2, false).filter((it) => filterFunction(it))); + } + static replace(transform2, valueObject) { + var obj2 = Transform.parseStyle(transform2, false); + var tObject = obj2.find((t) => t.type === valueObject.type); + if (tObject) { + tObject.value = valueObject.value; } else { - if (this.$context.selection.setHoverId(id)) { - this.renderHoverLayer(); - } + obj2.push(valueObject); } + return Transform.join(obj2); } - [CONFIG("set.move.control.point")]() { - this.renderHoverLayer(); - } - [SUBSCRIBE("refreshHoverView")](id) { - if (this.$context.selection.setHoverId(id)) { - this.renderHoverLayer(); + static replaceAll(oldTransform, newTransform) { + var oldT = Transform.parseStyle(oldTransform, false); + var newT = Transform.parseStyle(newTransform); + for (var i = 0, len2 = newT.length; i < len2; i++) { + var newObject = newT[i]; + var oldObject = oldT.find((t) => t.type === newObject.type); + if (oldObject) { + oldObject.value = newObject.value; + } else { + oldT.push(newObject); + } } + return Transform.join(oldT); } - [SUBSCRIBE(UPDATE_VIEWPORT, UPDATE_CANVAS)]() { - this.$context.selection.setHoverId(""); - this.renderHoverLayer(); - } - createVisiblePath(current) { - if (!current.is("boolean-path")) { - return ""; + static addTransform(oldTransform, newTransform) { + var oldT = Transform.parseStyle(oldTransform, false); + var newT = Transform.parseStyle(newTransform); + for (var i = 0, len2 = newT.length; i < len2; i++) { + var newObject = newT[i]; + var oldObject = oldT.find((t) => t.type === newObject.type); + if (oldObject) { + newObject.value.forEach((v, i2) => { + oldObject.value[i2].value += v.value; + }); + } else { + oldT.push(newObject); + } } - const newPath = current.absolutePath(); - newPath.transformMat4(this.$viewport.matrix); - return ` - - - - `; + return Transform.join(oldT); } - renderHoverLayer() { - const items = this.$context.selection.hoverItems; - if (items.length === 0) { - this.refs.$hoverRect.updateDiff(""); + static get(transform2, type) { + var arr = Transform.parseStyle(transform2, true); + if (typeof type === "function") { + arr = arr.find(type); } else { - const verties = items[0].verties; - const line2 = this.createPointerLine(this.$viewport.applyVerties(verties)); - const offsetLine = this.createOffsetLine(); - this.refs.$hoverRect.updateDiff(line2 + offsetLine); - } - } - getOffsetVerties(current, parent) { - const currentVerties = current.verties; - const parentVerties = parent.verties; - const result = {}; - const left2 = this.$viewport.applyVerties([ - [ - currentVerties[0][0], - lerp$1([], currentVerties[0], currentVerties[3], 0.5)[1], - 0 - ], - [ - parentVerties[0][0], - lerp$1([], currentVerties[0], currentVerties[3], 0.5)[1], - 0 - ] - ]); - var dist$1 = dist(...left2); - if (dist$1 > 0) { - result.left = left2; + arr = arr.find((it) => it.type === type); } - const top2 = this.$viewport.applyVerties([ - [ - lerp$1([], currentVerties[0], currentVerties[1], 0.5)[0], - currentVerties[1][1], - 0 - ], - [ - lerp$1([], currentVerties[0], currentVerties[1], 0.5)[0], - parentVerties[1][1], - 0 - ] - ]); - var dist$1 = dist(...top2); - if (dist$1 > 0) { - result.top = top2; + if (arr) { + return arr.value; } - return result; + return void 0; } - createOffsetLine() { - const item = this.$context.selection.hoverItems[0] || this.$context.selection.current; - if (!item || !item.parent) { - return ""; - } - if (item.parent && item.parent.is("project")) { - return ""; + static createRotateKey(transform2, angle, field) { + return `${transform2}:::${field}(${angle})`; + } + static rotate(transform2, angle, field = "rotate") { + const key = Transform.createRotateKey(transform2, angle, field); + if (TransformCache.has(key)) + return TransformCache.get(key); + TransformCache.set(key, Transform.replace(transform2, { type: field, value: [angle] })); + return TransformCache.get(key); + } + static rotateZ(transform2, angle) { + return Transform.rotate(transform2, angle, "rotateZ"); + } + static rotateX(transform2, angle) { + return Transform.rotate(transform2, angle, "rotateX"); + } + static rotateY(transform2, angle) { + return Transform.rotate(transform2, angle, "rotateY"); + } + static parseStyle(transform2, doCache = true) { + var transforms = []; + if (!transform2) + return transforms; + if (doCache && TransformCache.has(transform2)) { + return TransformCache.get(transform2); } - if (this.$context.selection.isEmpty) { - const offsetVerties = this.getOffsetVerties(item, item.parent); - return ` - - - - `; - } else { - const offsetVerties = this.getOffsetVerties(item, this.$context.selection.current); - return ` - - - - `; + var matches2 = transform2.match(TRANSFORM_REG) || []; + matches2.forEach((value, index2) => { + var [transformName, transformValue] = value.split("("); + transformValue = transformValue.split(")")[0]; + var arr = transformValue.split(","); + if (transformValue.includes("matrix") || transformValue.includes("scale")) { + arr = arr.map((it) => Length.number(it.trim())); + } else { + arr = arr.map((it) => Length.parse(it.trim())); + } + transforms[index2] = Transform.parse({ + type: transformName, + value: arr + }); + }); + if (doCache) { + TransformCache.set(transform2, transforms); } + return transforms; } - createPointerLine(pointers) { - if (pointers.length === 0) + static createTransformMatrix(parsedTransformList, width2, height2) { + const view = create$4(); + for (let i = 0, len2 = parsedTransformList.length; i < len2; i++) { + const it = parsedTransformList[i]; + switch (it.type) { + case "translate": + case "translateX": + case "translateY": + case "translateZ": + var values = it.value; + if (it.type === "translate") { + values = [ + values[0].toPx(width2).value, + values[1].toPx(height2).value, + 0 + ]; + } else if (it.type === "translateX") { + values = [values[0].toPx(width2).value, 0, 0]; + } else if (it.type === "translateY") { + values = [0, values[0].toPx(height2).value, 0]; + } else if (it.type === "translateZ") { + values = [0, 0, values[0].toPx().value]; + } + translate(view, view, values); + break; + case "rotate": + case "rotateZ": + rotateZ(view, view, degreeToRadian(it.value[0].value)); + break; + case "rotateX": + rotateX(view, view, degreeToRadian(it.value[0].value)); + break; + case "rotateY": + rotateY(view, view, degreeToRadian(it.value[0].value)); + break; + case "rotate3d": + var values = it.value; + rotate$1(view, view, degreeToRadian(it.value[3].value), [ + values[0].value, + values[1].value, + values[2].value + ]); + break; + case "scale": + scale$1(view, view, [it.value[0].value, it.value[1].value, 1]); + break; + case "scaleX": + scale$1(view, view, [it.value[0].value, 1, 1]); + break; + case "scaleY": + scale$1(view, view, [1, it.value[0].value, 1]); + break; + case "scaleZ": + scale$1(view, view, [1, 1, it.value[0].value]); + break; + case "skewX": + var rad = it.value[0].toDeg().toRad(); + multiply$1(view, view, fromValues$1(1, 0, 0, 0, Math.tan(rad.value), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); + break; + case "skewY": + var rad = it.value[0].toDeg().toRad(); + multiply$1(view, view, fromValues$1(1, Math.tan(rad.value), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); + break; + case "skew": + const skewX = it.value[0].toDeg().toRad(); + const skewY = it.value.length > 1 ? it.value[1].toDeg().toRad() : skewX; + multiply$1(view, view, fromValues$1(1, Math.tan(skewY.value), 0, 0, Math.tan(skewX.value), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)); + break; + case "matrix": + var values = it.value; + values = [ + values[0].value, + values[1].value, + 0, + 0, + values[2].value, + values[3].value, + 0, + 0, + 0, + 0, + 1, + 0, + values[4].value, + values[5].value, + 0, + 1 + ]; + multiply$1(view, view, values); + break; + case "matrix3d": + var values = it.value.map((it2) => it2.value); + multiply$1(view, view, values); + break; + case "perspective": + var values = it.value; + perspective(view, Math.PI * 0.5, width2 / height2, 1, values[0].value); + break; + } + } + return view; + } + static fromScale(scale2) { + if (scale2[0] === 1 && scale2[1] === 1) { return ""; - pointers = pointers.filter((_, index2) => index2 < 4); - return ``; + } + const list2 = []; + if (scale2[0] != 1) + list2.push(`scaleX(${scale2[0]})`); + if (scale2[1] != 1) + list2.push(`scaleY(${scale2[1]})`); + if (scale2[2] != 1) + list2.push(`scaleZ(${scale2[2]})`); + return list2.join(" "); } } -function hoverView(editor) { - editor.registerUI("canvas.view", { - HoverView - }); -} -const image_size = [ - "", - "100x100", - "200x200", - "300x300", - "400x300", - "900x600", - "1024x762" -]; -class ImageProperty extends BaseProperty { - getClassName() { - return "item"; - } - getTitle() { - return this.$i18n("image.property.title"); - } - getBody() { - return `
`; - } - getFooter() { - return ` -
- - - -
-
- ${createComponent("SelectEditor", { - ref: "$select", - label: this.$i18n("image.property.size"), - key: "size", - value: "", - options: image_size, - onchange: "changeImageSize" - })} - -
- `; +var updatePathItem = { + command: "updatePathItem", + description: "Update path string for selected svg path item", + execute: function(editor, pathObject) { + const current = editor.context.selection.current; + if (current) { + if (pathObject.box === "box") { + const newPath = current.invertPath(pathObject.d); + editor.context.commands.executeCommand("setAttribute", "change local path", editor.context.selection.packByValue({ + d: newPath.d + })); + } else { + const newPath = new PathParser(pathObject.d); + newPath.transformMat4(pathObject.matrix.absoluteMatrixInverse); + let bbox = newPath.getBBox(); + const newWidth = distance$1(bbox[1], bbox[0]); + const newHeight = distance$1(bbox[3], bbox[0]); + let oldBBox = vertiesMap(rectToVerties(bbox[0][0], bbox[0][1], newWidth, newHeight), pathObject.matrix.absoluteMatrix); + let newBBox = vertiesMap(oldBBox, calculateMatrixInverse(fromTranslation([], oldBBox[4]), Transform.createTransformMatrix(Transform.parseStyle(pathObject.matrix.transform), newWidth, newHeight), fromTranslation([], negate([], oldBBox[4])))); + const worldMatrix = calculateMatrix(fromTranslation([], newBBox[0]), current.getLocalTransformMatrix(newWidth, newHeight)); + const realXY = getTranslation([], calculateMatrix(pathObject.matrix.parentMatrixInverse, worldMatrix, invert([], current.getLocalTransformMatrix(newWidth, newHeight)))); + editor.context.commands.executeCommand("setAttribute", "change path", editor.context.selection.packByValue({ + d: newPath.translate(-bbox[0][0], -bbox[0][1]).d, + x: realXY[0], + y: realXY[1], + width: newWidth, + height: newHeight + })); + } + } } - [SUBSCRIBE_SELF("changeImageSize")](key, value) { - var [width2, height2] = value.split("x").map((it) => it); - this.$commands.executeCommand("setAttribute", "resize image", this.$context.selection.packByValue({ - width: width2, - height: height2 - })); +}; +var __glob_0_115 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updatePathItem +}, Symbol.toStringTag, { value: "Module" })); +var updateResource = { + command: "updateResource", + execute: function(editor, items) { + items.forEach((item) => { + switch (item.type) { + case "image/svg+xml": + case "image/png": + case "image/gif": + case "image/jpg": + case "image/jpeg": + editor.context.commands.emit("updateImage", item); + break; + case "text/plain": + case "text/html": + editor.context.commands.emit("addText", { + content: item.data + }); + break; + case "text/uri-list": + editor.context.commands.emit("updateUriList", item); + break; + } + }); } - [CLICK("$resize")]() { - var current = this.$context.selection.current; - if (current) { - this.$commands.executeCommand("setAttribute", "resize image", this.$context.selection.packByValue({ - width: (item) => item.naturalWidth, - height: (item) => item.naturalHeight - })); +}; +var __glob_0_116 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateResource +}, Symbol.toStringTag, { value: "Module" })); +var updateUriList = { + command: "updateUriList", + execute: function(editor, item) { + var datauri = item.data; + if (datauri.indexOf("data:") > -1) { + var info = AssetParser.parse(datauri, true); + switch (info.mimeType) { + case "image/png": + case "image/gif": + case "image/jpg": + case "image/jpeg": + editor.context.commands.emit("addImageAssetItem", { + id: uuidShort(), + type: info.mimeType, + name: "", + original: datauri, + local: info.local + }); + break; + } + } else { + var ext = item.data.split(".").pop(); + var name = item.data.split("/").pop(); + switch (ext) { + case "png": + case "jpg": + case "gif": + case "svg": + editor.context.commands.emit("addImageAssetItem", { + id: uuidShort(), + type: "image/" + ext, + name, + original: item.data, + local: item.data + }); + break; + } } } - [BIND("$sizeInfo")]() { - var current = this.$context.selection.current || {}; - return { - innerHTML: `${this.$i18n("image.property.width")}: ${current.naturalWidth}, ${this.$i18n("image.property.height")}: ${current.naturalHeight}` +}; +var __glob_0_117 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateUriList +}, Symbol.toStringTag, { value: "Module" })); +var updateVideo = { + command: "updateVideo", + execute: function(editor, item, rect2, containerItem = void 0) { + var reader = new window.FileReader(); + reader.onload = (e) => { + var datauri = e.target.result; + var local = window.URL.createObjectURL(item); + editor.context.commands.emit("addVideoAssetItem", { + id: uuidShort(), + type: item.type, + name: item.name, + original: datauri, + local + }, rect2, containerItem); }; + reader.readAsDataURL(item); } - [LOAD("$body")]() { - var current = this.$context.selection.current || {}; - var src = current.src || ""; - return createComponent("ImageSelectEditor", { - ref: "$1", - key: "src", - value: src, - onchange: "changeSelect" - }); +}; +var __glob_0_118 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateVideo +}, Symbol.toStringTag, { value: "Module" })); +var updateVideoAssetItem = { + command: "updateVideoAssetItem", + execute: function(editor, item, callback) { + var reader = new window.FileReader(); + reader.onload = (e) => { + var datauri = e.target.result; + var local = window.URL.createObjectURL(item); + var project2 = editor.context.selection.currentProject; + if (project2) { + project2.createVideo({ + id: uuidShort(), + type: item.type, + name: item.name, + original: datauri, + local + }); + editor.emit("addVideoAsset"); + isFunction(callback) && callback(local); + } + }; + reader.readAsDataURL(item); } - [SUBSCRIBE_SELF("changeSelect")](key, value, info) { - var current = this.$context.selection.current; - if (current) { - current.reset(__spreadValues({ - src: value - }, info)); - this.bindData("$sizeInfo"); - this.$commands.executeCommand("setAttribute", "change image", this.$context.selection.packByValue(__spreadValues({ - src: value - }, info))); +}; +var __glob_0_119 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": updateVideoAssetItem +}, Symbol.toStringTag, { value: "Module" })); +var update = { + command: "update", + description: "Update the model", + execute: function(editor, id = null, attrs = {}, context = { origin: "*" }) { + const item = editor.get(id); + if (item) { + const isChanged = item.reset(attrs, context); + if (isChanged) { + editor.context.commands.emit("refreshElement", item); + } } } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(["image"]); - } +}; +var __glob_0_120 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": update +}, Symbol.toStringTag, { value: "Module" })); +const modules$1 = { "./command_list/_currentProject.js": __glob_0_0$1, "./command_list/_doForceRefreshSelection.js": __glob_0_1$1, "./command_list/addArtBoard.js": __glob_0_2$1, "./command_list/addBackgroundColor.js": __glob_0_3$1, "./command_list/addBackgroundImageAsset.js": __glob_0_4$1, "./command_list/addBackgroundImageGradient.js": __glob_0_5$1, "./command_list/addBackgroundImagePattern.js": __glob_0_6$1, "./command_list/addCustomComponent.js": __glob_0_7$1, "./command_list/addImage.js": __glob_0_8$1, "./command_list/addImageAssetItem.js": __glob_0_9$1, "./command_list/addLayer.js": __glob_0_10$1, "./command_list/addLayerView.js": __glob_0_11$1, "./command_list/addProject.js": __glob_0_12$1, "./command_list/addSVGFilterAssetItem.js": __glob_0_13$1, "./command_list/addText.js": __glob_0_14$1, "./command_list/addTimelineCurrentProperty.js": __glob_0_15$1, "./command_list/addTimelineItem.js": __glob_0_16$1, "./command_list/addTimelineKeyframe.js": __glob_0_17$1, "./command_list/addTimelineProperty.js": __glob_0_18$1, "./command_list/addVideo.js": __glob_0_19$1, "./command_list/addVideoAssetItem.js": __glob_0_20$1, "./command_list/clipboard.copy.js": __glob_0_21$1, "./command_list/clipboard.paste.js": __glob_0_22$1, "./command_list/convert.flatten.path.js": __glob_0_23$1, "./command_list/convert.no.transform.path.js": __glob_0_24, "./command_list/convert.normalize.path.js": __glob_0_25, "./command_list/convert.path.operation.js": __glob_0_26, "./command_list/convert.polygonal.path.js": __glob_0_27, "./command_list/convert.simplify.path.js": __glob_0_28, "./command_list/convert.smooth.path.js": __glob_0_29, "./command_list/convert.stroke.to.path.js": __glob_0_30, "./command_list/convertPasteText.js": __glob_0_31, "./command_list/convertPath.js": __glob_0_32, "./command_list/copy.path.js": __glob_0_33, "./command_list/copyLayer.js": __glob_0_34, "./command_list/copyTimelineProperty.js": __glob_0_35, "./command_list/deleteTimelineKeyframe.js": __glob_0_36, "./command_list/doubleclick.item.js": __glob_0_37, "./command_list/downloadJSON.js": __glob_0_38, "./command_list/downloadPNG.js": __glob_0_39, "./command_list/downloadSVG.js": __glob_0_40, "./command_list/drop.asset.js": __glob_0_41, "./command_list/dropImageUrl.js": __glob_0_42, "./command_list/editor.config.body.event.js": __glob_0_43, "./command_list/fileDropItems.js": __glob_0_44, "./command_list/firstTimelineItem.js": __glob_0_45, "./command_list/group.item.js": __glob_0_46, "./command_list/history.addLayer.js": __glob_0_47, "./command_list/history.bring.forward.js": __glob_0_48, "./command_list/history.bring.front.js": __glob_0_49, "./command_list/history.clipboard.paste.js": __glob_0_50, "./command_list/history.copyLayer.js": __glob_0_51, "./command_list/history.group.item.js": __glob_0_52, "./command_list/history.moveLayer.js": __glob_0_53, "./command_list/history.moveLayerToTarget.js": __glob_0_54, "./command_list/history.refreshSelection.js": __glob_0_55, "./command_list/history.refreshSelectionProject.js": __glob_0_56, "./command_list/history.removeLayer.js": __glob_0_57, "./command_list/history.removeProject.js": __glob_0_58, "./command_list/history.send.back.js": __glob_0_59, "./command_list/history.send.backward.js": __glob_0_60, "./command_list/history.setAttribute.js": __glob_0_61, "./command_list/item.move.depth.down.js": __glob_0_62, "./command_list/item.move.depth.first.js": __glob_0_63, "./command_list/item.move.depth.last.js": __glob_0_64, "./command_list/item.move.depth.up.js": __glob_0_65, "./command_list/keymap.keydown.js": __glob_0_66, "./command_list/lastTimelineItem.js": __glob_0_67, "./command_list/load.json.js": __glob_0_68, "./command_list/moveLayer.js": __glob_0_69, "./command_list/moveLayerForItems.js": __glob_0_70, "./command_list/moveSelectionToCenter.js": __glob_0_71, "./command_list/newComponent.js": __glob_0_72, "./command_list/nextTimelineItem.js": __glob_0_73, "./command_list/open.editor.js": __glob_0_74, "./command_list/pauseTimelineItem.js": __glob_0_75, "./command_list/playTimelineItem.js": __glob_0_76, "./command_list/prevTimelineItem.js": __glob_0_77, "./command_list/recoverBooleanPath.js": __glob_0_78, "./command_list/refreshArtboard.js": __glob_0_79, "./command_list/refreshElement.js": __glob_0_80, "./command_list/refreshHistory.js": __glob_0_81, "./command_list/refreshSelectedOffset.js": __glob_0_82, "./command_list/removeAnimationItem.js": __glob_0_83, "./command_list/removeLayer.js": __glob_0_84, "./command_list/removeTimeline.js": __glob_0_85, "./command_list/removeTimelineProperty.js": __glob_0_86, "./command_list/resizeArtBoard.js": __glob_0_87, "./command_list/rotateLayer.js": __glob_0_88, "./command_list/same.height.js": __glob_0_89, "./command_list/same.width.js": __glob_0_90, "./command_list/saveJSON.js": __glob_0_91, "./command_list/savePNG.js": __glob_0_92, "./command_list/segment.delete.js": __glob_0_93, "./command_list/segment.move.down.js": __glob_0_94, "./command_list/segment.move.left.js": __glob_0_95, "./command_list/segment.move.right.js": __glob_0_96, "./command_list/segment.move.up.js": __glob_0_97, "./command_list/select.all.js": __glob_0_98, "./command_list/select.none.js": __glob_0_99, "./command_list/selectTimelineItem.js": __glob_0_100, "./command_list/setAttribute.js": __glob_0_101, "./command_list/setTimelineOffset.js": __glob_0_102, "./command_list/showExportView.js": __glob_0_103, "./command_list/sort.bottom.js": __glob_0_104, "./command_list/sort.center.js": __glob_0_105, "./command_list/sort.left.js": __glob_0_106, "./command_list/sort.middle.js": __glob_0_107, "./command_list/sort.right.js": __glob_0_108, "./command_list/sort.top.js": __glob_0_109, "./command_list/switch.path.js": __glob_0_110, "./command_list/ungroup.item.js": __glob_0_111, "./command_list/updateClipPath.js": __glob_0_112, "./command_list/updateImage.js": __glob_0_113, "./command_list/updateImageAssetItem.js": __glob_0_114, "./command_list/updatePathItem.js": __glob_0_115, "./command_list/updateResource.js": __glob_0_116, "./command_list/updateUriList.js": __glob_0_117, "./command_list/updateVideo.js": __glob_0_118, "./command_list/updateVideoAssetItem.js": __glob_0_119, "./command_list/model/update.js": __glob_0_120 }; +const obj = {}; +Object.entries(modules$1).forEach(([key, value]) => { + key = key.replace("./command_list/", "").replace(".js", ""); + obj[key] = value.default; +}); +function commands(editor) { + editor.loadCommands(obj); +} +var area_width = { + key: "area.width", + defaultValue: 100, + title: "Area Width to find layers fastly", + description: "Set area width/height", + type: "number" +}; +var __glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": area_width +}, Symbol.toStringTag, { value: "Module" })); +var debug_mode = { + key: "debug.mode", + defaultValue: false, + title: "debug mode", + description: "Set debug mode to on ", + type: "boolean" +}; +var __glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": debug_mode +}, Symbol.toStringTag, { value: "Module" })); +var editing_css_itemType = { + key: "editing.css.itemType", + defaultValue: "rect", + title: "set item type for editing css", + description: "set item type for editing css", + type: "string" +}; +var __glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editing_css_itemType +}, Symbol.toStringTag, { value: "Module" })); +var editing_draw_itemType = { + key: "editing.draw.itemType", + defaultValue: "path", + title: "set item type for editing draw", + description: "set item type for editing draw", + type: "string" +}; +var __glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editing_draw_itemType +}, Symbol.toStringTag, { value: "Module" })); +var editing_mode_itemType = { + key: "editing.mode.itemType", + defaultValue: "select", + title: "set item type for editing mode", + description: "set item type for editing mode", + type: "string" +}; +var __glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editing_mode_itemType +}, Symbol.toStringTag, { value: "Module" })); +var editing_mode = { + key: "editing.mode", + defaultValue: EditingMode.SELECT, + title: "set editing mode for Editor", + description: "set editing mode (select, append, draw, path)", + type: "string" +}; +var __glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editing_mode +}, Symbol.toStringTag, { value: "Module" })); +var editing_svg_itemType = { + key: "editing.svg.itemType", + defaultValue: "svg-rect", + title: "set item type for editing svg", + description: "set item type for editing svg", + type: "string" +}; +var __glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editing_svg_itemType +}, Symbol.toStringTag, { value: "Module" })); +var editor_design_mode = { + key: "editor.design.mode", + defaultValue: "design", + title: "Editor Design Mode ", + description: "Set editor's design mode", + options: ["design", "item"], + type: "select" +}; +var __glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editor_design_mode +}, Symbol.toStringTag, { value: "Module" })); +var editor_layout_mode = { + key: "editor.layout.mode", + defaultValue: "all", + title: "Editor Layout Mode ", + description: "Set editor's layout mode", + type: "string" +}; +var __glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": editor_layout_mode +}, Symbol.toStringTag, { value: "Module" })); +var fixed_angle = { + key: "fixed.angle", + defaultValue: 15, + title: "fixed angle count", + description: "Set fixed angle", + type: "number" +}; +var __glob_0_9 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": fixed_angle +}, Symbol.toStringTag, { value: "Module" })); +var fixed_gradient_angle = { + key: "fixed.gradient.angle", + defaultValue: 1, + title: "fixed gradient angle count", + description: "Set fixed gradient angle", + type: "number" +}; +var __glob_0_10 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": fixed_gradient_angle +}, Symbol.toStringTag, { value: "Module" })); +var history_delay_ms = { + key: "history.delay.ms", + defaultValue: 500, + title: "history delay milliseconds", + description: "Set history delay time", + type: "number" +}; +var __glob_0_11 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": history_delay_ms +}, Symbol.toStringTag, { value: "Module" })); +var horizontal_line = { + key: "horizontal.line", + defaultValue: [], + title: "horizontal guide line for snap ", + description: "horizontal guide line for snap", + type: "array" +}; +var __glob_0_12 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": horizontal_line +}, Symbol.toStringTag, { value: "Module" })); +var horizontal_line_selected_index = { + key: "horizontal.line.selected.index", + defaultValue: -1, + title: "selected horizontal guide line index", + description: "selected horizontal guide line index", + type: "number" +}; +var __glob_0_13 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": horizontal_line_selected_index +}, Symbol.toStringTag, { value: "Module" })); +var set_drag_path_area = { + key: "set.drag.path.area", + defaultValue: false, + title: "Drag path area", + description: "Drag path area", + type: "boolean", + storage: "none" +}; +var __glob_0_14 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": set_drag_path_area +}, Symbol.toStringTag, { value: "Module" })); +var set_move_control_point = { + key: "set.move.control.point", + defaultValue: false, + title: "Moving Control Point", + description: "Moving Control Point", + type: "boolean", + storage: "none" +}; +var __glob_0_15 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": set_move_control_point +}, Symbol.toStringTag, { value: "Module" })); +var show_left_panel = { + key: "show.left.panel", + defaultValue: true, + title: "Show left panel", + description: "Set left panel visibility to on", + type: "boolean" +}; +var __glob_0_16 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": show_left_panel +}, Symbol.toStringTag, { value: "Module" })); +var show_outline = { + key: "show.outline", + defaultValue: false, + title: "Show outline", + description: "Set outline visibility to on", + type: "boolean" +}; +var __glob_0_17 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": show_outline +}, Symbol.toStringTag, { value: "Module" })); +var show_right_panel = { + key: "show.right.panel", + defaultValue: true, + title: "Show right panel", + description: "Set right panel visibility to on", + type: "boolean" +}; +var __glob_0_18 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": show_right_panel +}, Symbol.toStringTag, { value: "Module" })); +var show_ruler = { + key: "show.ruler", + defaultValue: true, + title: "Show ruler", + description: "Set ruler visibility to on", + type: "boolean" +}; +var __glob_0_19 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": show_ruler +}, Symbol.toStringTag, { value: "Module" })); +var snap_distance = { + key: "snap.distance", + defaultValue: 3, + title: "Snap distance between objects", + description: "Set snap distance", + type: "number" +}; +var __glob_0_20 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": snap_distance +}, Symbol.toStringTag, { value: "Module" })); +var snap_grid = { + key: "snap.grid", + defaultValue: 50, + title: "Snap grid size between objects", + description: "Set snap grid size", + type: "number" +}; +var __glob_0_21 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": snap_grid +}, Symbol.toStringTag, { value: "Module" })); +var vertical_line = { + key: "vertical.line", + defaultValue: [], + title: "vertical guide line for snap ", + description: "vertical guide line for snap", + type: "array" +}; +var __glob_0_22 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": vertical_line +}, Symbol.toStringTag, { value: "Module" })); +var vertical_line_selected_index = { + key: "vertical.line.selected.index", + defaultValue: -1, + title: "selected vertical guide line index", + description: "selected vertical guide line index", + type: "number" +}; +var __glob_0_23 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ + __proto__: null, + "default": vertical_line_selected_index +}, Symbol.toStringTag, { value: "Module" })); +const modules = { "./config_list/area.width.js": __glob_0_0, "./config_list/debug.mode.js": __glob_0_1, "./config_list/editing.css.itemType.js": __glob_0_2, "./config_list/editing.draw.itemType.js": __glob_0_3, "./config_list/editing.mode.itemType.js": __glob_0_4, "./config_list/editing.mode.js": __glob_0_5, "./config_list/editing.svg.itemType.js": __glob_0_6, "./config_list/editor.design.mode.js": __glob_0_7, "./config_list/editor.layout.mode.js": __glob_0_8, "./config_list/fixed.angle.js": __glob_0_9, "./config_list/fixed.gradient.angle.js": __glob_0_10, "./config_list/history.delay.ms.js": __glob_0_11, "./config_list/horizontal.line.js": __glob_0_12, "./config_list/horizontal.line.selected.index.js": __glob_0_13, "./config_list/set.drag.path.area.js": __glob_0_14, "./config_list/set.move.control.point.js": __glob_0_15, "./config_list/show.left.panel.js": __glob_0_16, "./config_list/show.outline.js": __glob_0_17, "./config_list/show.right.panel.js": __glob_0_18, "./config_list/show.ruler.js": __glob_0_19, "./config_list/snap.distance.js": __glob_0_20, "./config_list/snap.grid.js": __glob_0_21, "./config_list/vertical.line.js": __glob_0_22, "./config_list/vertical.line.selected.index.js": __glob_0_23 }; +var configs$1 = Object.values(modules).map((it) => it.default); +function configs(editor) { + configs$1.forEach((config) => { + editor.registerConfig(config); + }); } -var ImageSelectEditor$1 = ""; -class ImageSelectEditor extends EditorElement { - initState() { - return { - key: this.props.key, - value: this.props.value - }; - } - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--image-select-editor", - ref: "$body" - }); - } - getValue() { - return this.state.value; +class Selector extends PropertyItem { + static parse(obj2) { + return new Selector(obj2); } - setValue(value) { - this.setState({ value }); + getDefaultObject(obj2) { + return super.getDefaultObject(__spreadValues({ + itemType: "selector", + selector: "", + properties: [] + }, obj2)); } - [LOAD("$body")]() { - const project2 = this.$context.selection.currentProject; - if (!project2) - return; - const imageUrl = project2.getImageValueById(this.state.value); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { - class: "preview-container" - }, imageUrl ? /* @__PURE__ */ createElementJsx("img", { - src: imageUrl - }) : null, /* @__PURE__ */ createElementJsx("input", { - type: "file", - ref: "$file", - accept: "image/*" - })), /* @__PURE__ */ createElementJsx("div", { - class: "select-container" - }, /* @__PURE__ */ createElementJsx("button", { - type: "button", - ref: "$select" - }, this.$i18n("image.select.editor.button")))); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("selector", "properties")); } - [CHANGE("$file")](e) { - var files = [...e.target.files]; - if (files.length) { - this.$commands.emit("updateImageAssetItem", files[0], (imageId) => { - this.trigger("changeImageSelectEditor", imageId); - }); + isMultiStyle(key) { + switch (key) { + case "background-image": + case "var": + return true; } + return false; } - [CLICK("$select")]() { - this.emit("showImageSelectPopup", { - context: this, - changeEvent: "changeImageSelectEditor", - value: this.state.value - }); - } - [SUBSCRIBE("changeImageSelectEditor")](value) { - this.updateData({ value }); - this.refresh(); - } - updateData(data) { - this.setState(data, false); - this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); - } -} -var ImageSelectPopup$1 = ""; -class ImageSelectPopup extends BasePopup { - getTitle() { - return "Select a image"; - } - getClassName() { - return "compact"; - } - initState() { - return { - value: "" - }; - } - updateData(opt = {}) { - this.setState(opt, false); - this.state.context.trigger(this.state.changeEvent, this.state.value, { - width: this.state.width, - height: this.state.height, - naturalWidth: this.state.naturalWidth, - naturalHeight: this.state.naturalHeight - }); - } - getBody() { - return `
`; + getMultiStyleString(p) { + switch (p.key) { + case "background-image": + return p.value.toString() + ";"; + } + return p.value.toString() + " !important;"; } - [LOAD("$imageBox") + DOMDIFF]() { - return ""; + toPropertyString() { + return this.json.properties.map((p) => { + if (this.isMultiStyle(p.key)) { + return this.getMultiStyleString(p); + } else { + var value = p.value.toString(); + if (value) { + var key = p.key; + if (key === "x") + key = "left"; + else if (key === "y") + key = "top"; + return `${key}: ${value} !important;`; + } else { + return ""; + } + } + }).join("\n"); } - [CLICK("$imageBox .image-item")](e) { - var $img = e.$dt.$("img"); - this.updateData({ - value: $img.attr("data-id"), - naturalWidth: $img.naturalWidth, - naturalHeight: $img.naturalHeight, - width: $img.naturalWidth, - height: $img.naturalHeight - }); - this.trigger("hideImageSelectPopup"); + toCSSText(prefix = "") { + return `${prefix}${this.json.selector} { + ${this.toPropertyString()} +}`; } - [SUBSCRIBE("showImageSelectPopup")](data, params) { - this.setState({ - context: data.context, - changeEvent: data.changeEvent, - value: data.value, - params - }, false); - this.refresh(); - this.show(500); + toCSS() { + return {}; } - [SUBSCRIBE("hideImageSelectPopup")]() { - this.hide(); + toString(prefix = "") { + return this.toCSSText(prefix); } } -function image(editor) { - editor.registerElement({ - ImageSelectEditor - }); - editor.registerUI("inspector.tab.style", { - ImageProperty - }); - editor.registerUI("popup", { - ImageSelectPopup - }); -} -class ImageAssetPicker extends EditorElement { - initState() { - return { - mode: "grid" - }; - } - template() { - return ` -
-
-
- `; - } - [LOAD("$imageList") + DOMDIFF]() { - var current = this.$context.selection.currentProject || { images: [] }; - var images = current.images; - var results = images.map((image2) => { - return ` -
-
- -
-
- `; +var DefaultLayoutEngine = { + startCache(container) { + container.addCache("cachedSize", { + width: container.width, + height: container.height }); - return results; - } - [CLICK("$imageList .image-item")](e) { - var $img = e.$dt.$("img"); - this.updateData($img.attr("src")); - } - updateData(localUrl) { - this.parent.trigger(this.props.onchange, localUrl); - } - [SUBSCRIBE("addImageAsset")]() { - this.refresh(); - } -} -var ImageAssetsProperty$1 = ""; -function revokeObjectUrl(url) { - window.URL.revokeObjectURL(url); -} -class ImageAssetsProperty extends BaseProperty { - getTitle() { - return this.$i18n("image.asset.property.title"); - } - initState() { - return { - mode: "grid" + container.addCache("cachedLayerMatrix", container.layers.map((child) => { + child.startToCacheChildren(); + const { x, y, width: width2, height: height2 } = child.attrs("x", "y", "width", "height"); + return { + id: child.id, + matrix: { x, y, width: width2, height: height2 }, + constraints: { + horizontal: child[ConstraintsDirection.HORIZONTAL], + vertical: child[ConstraintsDirection.VERTICAL] + } + }; + })); + }, + recover(container) { + const obj2 = { + width: container.width, + height: container.height }; - } - getClassNamef() { - return "elf--image-assets-property"; - } - afterRender() { - this.show(); - } - getBody() { - return ` -
-
-
- `; - } - [LOAD("$imageList") + DOMDIFF]() { - var current = this.$context.selection.currentProject || { images: [] }; - var images = current.images; - var results = images.map((image2, index2) => { - return ` -
-
- -
-
- - -
-
- `; - }); - return ` -
- ${results.join("")} -
- - -
-
- - `; - } - executeImage(callback, isRefresh = true, isEmit = true) { - var project2 = this.$context.selection.currentProject; - if (project2) { - callback && callback(project2); - if (isRefresh) - this.refresh(); - if (isEmit) - this.emit("refreshImageAssets"); - } else { - window.alert("Please select a project."); - } - } - [DRAGSTART("$imageList .preview img")](e) { - var index2 = +e.$dt.closest("image-item").attr("data-index"); - var project2 = this.$context.selection.currentProject; - if (project2) { - var imageInfo = project2.images[index2]; - e.dataTransfer.setData("image/info", imageInfo.local); - } - } - [CHANGE("$imageList .add-image-item input[type=file]")](e) { - this.executeImage(() => { - [...e.target.files].forEach((item) => { - this.$commands.emit("updateImageAssetItem", item); - }); - }); - } - [CLICK("$imageList .remove")](e) { - var $item = e.$dt.closest("image-item"); - var index2 = +$item.attr("data-index"); - this.executeImage((project2) => { - project2.removeImage(index2); - revokeObjectUrl($item.$(".preview img").attr("src")); + const currentContainerWidth = obj2.width; + const currentContainerHeight = obj2.height; + const cachedSize = container.getCache("cachedSize"); + const oldContainerWidth = cachedSize.width; + const oldContainerHeight = cachedSize.height; + const scaleX = currentContainerWidth / oldContainerWidth; + const scaleY = currentContainerHeight / oldContainerHeight; + const cachedLayerMatrix = container.getCache("cachedLayerMatrix"); + cachedLayerMatrix.forEach(({ id, matrix, constraints }) => { + const item = container.find(id); + const { x, y, width: width2, height: height2 } = matrix; + const left2 = x; + const right2 = oldContainerWidth - x - width2; + const top2 = y; + const bottom2 = oldContainerHeight - y - height2; + const localObj = {}; + switch (constraints.horizontal) { + case Constraints.MIN: + localObj.x = left2; + break; + case Constraints.MAX: + localObj.x = currentContainerWidth - right2 - width2; + break; + case Constraints.STRETCH: + localObj.x = left2; + localObj.width = currentContainerWidth - left2 - right2; + break; + case Constraints.SCALE: + localObj.x = left2 * scaleX; + localObj.width = width2 * scaleX; + break; + case Constraints.CENTER: + const halfWidth = width2 / 2; + const scaleNew = (x + halfWidth) / oldContainerWidth; + localObj.x = scaleNew * currentContainerWidth - halfWidth; + break; + } + switch (constraints.vertical) { + case Constraints.MIN: + localObj.y = top2; + break; + case Constraints.MAX: + localObj.y = currentContainerHeight - bottom2 - height2; + break; + case Constraints.STRETCH: + localObj.y = top2; + localObj.height = currentContainerHeight - top2 - bottom2; + break; + case Constraints.SCALE: + localObj.y = top2 * scaleY; + localObj.height = height2 * scaleY; + break; + case Constraints.CENTER: + const halfHeight = height2 / 2; + const scaleNew = (y + halfHeight) / oldContainerHeight; + localObj.y = scaleNew * currentContainerHeight - halfHeight; + break; + } + item.reset(localObj); + item.recoverChildren(); }); } - [CLICK("$imageList .copy")](e) { - var $item = e.$dt.closest("image-item"); - var index2 = +$item.attr("data-index"); - this.executeImage((project2) => { - project2.copyImage(index2); +}; +var GridLayoutEngine = { + startCache() { + }, + recover() { + }, + updateGridArea(currentItem, gridInformation, scale2 = 1) { + if (currentItem.isInGrid() === false) + return; + const lastVerties = currentItem.originVerties; + const targetRect = vertiesToRectangle(lastVerties); + const { items } = gridInformation; + const epsilon = IntersectEpsilonNumberType.RECT / scale2; + const checkedGridRowColumnList = items.filter((it) => { + return polyPoly(lastVerties, it.originVerties); + }).filter((it) => { + const intersect = intersectRectRect(it.originRect, targetRect); + return Math.floor(intersect.width) > epsilon && Math.floor(intersect.height) > epsilon; }); - } - [SUBSCRIBE("addImageAsset")]() { - this.refresh(); - } -} -function imageAsset(editor) { - editor.registerElement({ - ImageAssetPicker, - ImageAssetsProperty - }); -} -var KeyframePopup$1 = ""; -class KeyframePopup extends BasePopup { - getTitle() { - return this.$i18n("keyframe.popup.title"); - } - initState() { - return { - name: "none", - offsets: [] + if (checkedGridRowColumnList.length === 0) + return; + const rows = checkedGridRowColumnList.map((it) => it.row); + rows.sort((a, b) => a - b); + const columns = checkedGridRowColumnList.map((it) => it.column); + columns.sort((a, b) => a - b); + const gridColumnStart = columns[0]; + const gridColumnEnd = columns[columns.length - 1]; + const gridRowStart = rows[0]; + const gridRowEnd = rows[rows.length - 1]; + const gridArea = { + "grid-column-start": gridColumnStart, + "grid-column-end": gridColumnEnd + 1, + "grid-row-start": gridRowStart, + "grid-row-end": gridRowEnd + 1 }; + currentItem.reset(gridArea); + return gridArea; } - updateData(opt) { - this.setState(opt, false); - this.emit("changeKeyframePopup", this.state); - } - getBody() { - return ` -
-
- ${this.templateForName()} - ${this.templateForOffset()} -
-
`; - } - templateForOffset() { - return ` -
- ${createComponent("OffsetEditor", { ref: "$offsetEditor" })} -
- `; - } - templateForName() { - return ` -
- -
- -
-
- `; - } - [INPUT("$name")](e) { - if (this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/)) { - this.updateData({ name: this.refs.$name.value }); - } else { - e.preventDefault(); - e.stopPropagation(); - return false; - } - } - getOffsetData() { - var offsets = this.state.offsets.map((it) => it); - return { offsets }; - } - refresh() { - this.refs.$name.val(this.state.name); - this.emit("showOffsetEditor", this.getOffsetData()); +}; +class Offset extends PropertyItem { + static parse(obj2) { + return new Offset(obj2); } - [SUBSCRIBE("changeOffsetEditor")](data) { - this.updateData(data); + getDefaultObject() { + return super.getDefaultObject({ + itemType: "offset", + offset: Length.percent(0), + color: "rgba(255, 255, 255, 1)", + properties: [] + }); } - [SUBSCRIBE("showKeyframePopup")](data) { - this.setState(data); - this.refresh(); - this.show(240); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("offset", "color", "properties")); } - [SUBSCRIBE("hideKeyframePopup")]() { - this.$el.hide(); + convert(json) { + json = super.convert(json); + json.offset = Length.parse(json.offset); + return json; } -} -var KeyframeProperty$1 = ""; -class KeyframeProperty extends BaseProperty { - getTitle() { - return this.$i18n("keyframe.property.title"); + toCSSText() { + return `${this.json.offset} ${CSS_TO_STRING(this.toCSS())}`; } - getBody() { - return `
`; + createProperty(data = {}) { + return this.addProperty(__spreadValues({ + checked: true, + value: 0 + }, data)); } - getTools() { - return ` - - `; + addProperty(property) { + this.json.properties.push(property); } - makeProperty(property) { - var key = property.key; - if (key === "x") - key = "left"; - else if (key === "y") - key = "top"; - return ` -
- -
${property.value}
-
- `; + removeProperty(removeIndex) { + this.json.properties.splice(removeIndex, 1); } - makeOffset(offset) { - return ` -
- -
- ${offset.properties.map((p) => { - return this.makeProperty(p); - }).join("")} -
-
- `; + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); } - makeKeyframeTemplate(keyframe2, index2) { - index2 = index2.toString(); - return ` -
-
-
${keyframe2.name}
-
-
- - -
- -
-
-
-
- ${keyframe2.offsets.map((o) => { - return ` -
- `; - }).join("")} -
-
-
- ${keyframe2.offsets.map((offset) => { - return this.makeOffset(offset); - }).join("")} -
-
- 
${keyframe2.toString().trim()}
-
-
- `; + sortProperty(startIndex, targetIndex) { + this.sortItem(this.json.properties, startIndex, targetIndex); } - [CLICK("$keyframeList .keyframe-item .title .group button[data-type]")](e) { - var $keyframeItem = e.$dt.closest("keyframe-item"); - var index2 = +$keyframeItem.attr("data-index"); - var type = e.$dt.attr("data-type"); - var current = this.$context.selection.currentProject; - if (!current) - return; - var currentKeyframe = current.keyframes[index2]; - if (currentKeyframe) { - currentKeyframe.reset({ - selectedType: type - }); + updateProperty(index2, data = {}) { + Object.assign(this.json.properties[+index2], __spreadValues({}, data)); + } + updatePropertyByKey(key, data = {}) { + var arr = this.json.properties; + var index2 = -1; + for (var i = 0, len2 = arr.length; i < len2; i++) { + if (this.json.properties[i].key === key) { + index2 = i; + break; + } } - $keyframeItem.attr("data-selected-value", type); + Object.assign(this.json.properties[+index2], __spreadValues({}, data)); } - [CLICK("$keyframeList .keyframe-item .offset-list")](e) { - var index2 = +e.$dt.closest("keyframe-item").attr("data-index"); - var current = this.$context.selection.currentProject; - if (!current) - return; - this.viewKeyframePicker(index2); + toCSS() { + var obj2 = {}; + this.json.properties.forEach((it) => { + obj2 = __spreadValues(__spreadValues({}, obj2), it.toCSS()); + }); + return obj2; } - [CLICK("$keyframeList .del") + PREVENT](e) { - var removeIndex = e.$dt.attr("data-index"); - var current = this.$context.selection.currentProject; - if (!current) - return; - current.removeKeyframe(removeIndex); - this.$commands.emit("refreshProject", current); - this.refresh(); + toString() { + return this.toCSSText(); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - const current = this.$context.selection.current; - if (current && current.hasChangedField("keyframes")) { - this.refresh(); +} +class Keyframe extends PropertyItem { + static parse(obj2) { + return new Keyframe(obj2); + } + static parseStyle(style) { + var keyframes = []; + var keyframeKeys = {}; + if (style["keyframe"]) { + var results = convertMatches(style["keyframe"]); + results.str.split("|").map((it) => it.trim()).forEach((frameInfo, index2) => { + var [name, offset, property, ...values] = frameInfo.split(" "); + var propertyValue = values.join(" "); + if (!keyframeKeys[name]) { + keyframeKeys[name] = new Keyframe({ + name + }); + keyframes[index2] = name; + } + var filteredOffset = keyframeKeys[name].offsets.filter((it) => { + return it.offset.equals(Length.parse(offset)); + }); + var offsetObj = null; + if (filteredOffset.length) { + offsetObj = filteredOffset[0]; + } else { + offsetObj = new Offset({ + offset: Length.parse(offset) + }); + keyframeKeys[name].offsets.push(offsetObj); + } + offsetObj.addProperty({ + key: property, + value: reverseMatches(propertyValue, results.matches) + }); + }); } + return keyframes.map((name) => { + keyframeKeys[name].offsets.forEach((offset) => { + var vars = []; + var properties = []; + offset.properties.forEach((p) => { + if (p.key.includes("--")) { + vars.push(p); + } else { + properties.push(p); + } + }); + let varValue = vars.map((it) => `${it.key}:${it.value}`).join(";"); + if (vars.length) { + properties.push({ key: "var", value: varValue }); + } + offset.properties = properties; + }); + return keyframeKeys[name]; + }); } - [LOAD("$keyframeList")]() { - var current = this.$context.selection.currentProject; - if (!current) - return ""; - var keyframes = current.keyframes || []; - return keyframes.map((keyframe2, index2) => { - return this.makeKeyframeTemplate(keyframe2, index2); + getDefaultObject() { + return super.getDefaultObject({ + itemType: "keyframe", + name: "sample", + selectedType: "list", + offsets: [] }); } - [CLICK("$add")]() { - var current = this.$context.selection.currentProject; - if (current) { - current.createKeyframe(); - this.refresh(); - this.$commands.emit("refreshProject", current); - } else { - window.alert("Please select a project."); - } + toCloneObject() { + var { offsets } = this.json; + return __spreadProps(__spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("name", "selectedType")), { + offsets: offsets.map((offset) => offset.clone()) + }); } - viewKeyframePicker(index2) { - if (typeof this.selectedIndex === "number") { - this.selectItem(this.selectedIndex, false); + isMultiStyle(key) { + switch (key) { + case "background-image": + case "var": + return true; } - this.selectedIndex = +index2; - this.selectItem(this.selectedIndex, true); - this.current = this.$context.selection.currentProject; - if (!this.current) - return; - this.currentKeyframe = this.current.keyframes[this.selectedIndex]; - this.viewKeyframePropertyPopup(); + return false; } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.getRef("$keyframeIndex", selectedIndex).addClass("selected"); - } else { - this.getRef("$keyframeIndex", selectedIndex).removeClass("selected"); - } - if (this.current) { - this.current.keyframes.forEach((it, index2) => { - it.selected = index2 === selectedIndex; - }); + getMultiStyleString(p) { + switch (p.key) { + case "background-image": + return p.value.toString() + ";"; + case "var": + var value = (p.value + "").split(";").map((str) => { + return `--` + str; + }).join(";"); + return value + ";"; } + return p.value.toString() + ";"; } - viewKeyframePropertyPopup(position2) { - this.current = this.$context.selection.currentProject; - if (!this.current) - return; - this.currentKeyframe = this.current.keyframes[this.selectedIndex]; - const back = this.currentKeyframe; - const name = back.name; - const offsets = back.offsets; - this.emit("showKeyframePopup", { - position: position2, - name, - offsets + toOffsetString(it) { + var tabString = " "; + return `${it.offset.toString()} { +${tabString}${it.properties.map((p) => { + if (this.isMultiStyle(p.key)) { + return this.getMultiStyleString(p); + } else { + var value = (p.value || "").toString(); + if (value) { + var key = p.key; + if (key === "x") + key = "left"; + else if (key === "y") + key = "top"; + return `${key}: ${value};`; + } else { + return ""; + } + } + }).join("").replace(/;/g, ";\n" + tabString).trim()} + }`; + } + toOffsetText() { + var offsets = this.json.offsets.map((it) => { + return it; }); + offsets.sort((a, b) => { + return a.offset.value > b.offset.value ? 1 : -1; + }); + return offsets.map((it) => { + if (it.properties.length === 0) + return ""; + return this.toOffsetString(it); + }).join("\n"); } - [SUBSCRIBE("changeKeyframePopup")](data) { - var project2 = this.$context.selection.currentProject; - if (!project2) - return; - this.currentKeyframe = project2.keyframes[this.selectedIndex]; - if (this.currentKeyframe) { - this.currentKeyframe.reset(data); - } - this.refresh(); - this.$commands.emit("refreshProject", project2); + toCSSText() { + var offsets = this.json.offsets.map((it) => { + return it; + }); + offsets.sort((a, b) => { + return a.offset.value > b.offset.value ? 1 : -1; + }); + return ` +@keyframes ${this.json.name} { + + ${this.toOffsetText()} + +} +`; + } + createOffset(data = {}) { + return this.addOffset(new Offset(__spreadValues({ + checked: true + }, data))); + } + addOffset(offset) { + this.json.offsets.push(offset); + } + removeOffset(removeIndex) { + this.json.offsets.splice(removeIndex, 1); + } + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); + } + sortOffset(startIndex, targetIndex) { + this.sortItem(this.json.offsets, startIndex, targetIndex); + } + updateOffset(index2, data = {}) { + this.json.offsets[+index2].reset(data); + } + toCSS() { + return {}; + } + toString() { + return this.toCSSText(); } } -class OffsetEditor extends EditorElement { - initState() { - return { - offsets: [] - }; +class BaseModel { + constructor(json = {}, modelManager) { + __privateAdd(this, _modelManager, null); + __privateAdd(this, _json, {}); + __privateAdd(this, _cachedValue, {}); + __privateAdd(this, _timestamp2, 0); + __privateAdd(this, _lastChangedField, {}); + __privateAdd(this, _collapsed, false); + this.setModelManager(modelManager); + this.initializeModel(json); } - updateData(opt) { - this.setState(opt, false); - this.modifyOffset(); + initializeModel(json) { + __privateSet(this, _json, this.convert(Object.assign(this.getDefaultObject(), json))); } - modifyOffset() { - this.emit("changeOffsetEditor", this.state); + get manager() { + return __privateGet(this, _modelManager); } - template() { - return ` -
- ${this.templateForOffset()} - ${this.templateForOffsetInput()} - ${this.templateForProperty()} -
`; + setModelManager(modelManager) { + __privateSet(this, _modelManager, modelManager); } - templateForOffsetInput() { - return ` -
-
- -
- ${createComponent("InputRangeEditor", { - key: "offset", - min: 0, - max: 100, - step: 0.01, - value: Length.percent(0), - ref: "$offsetInput", - units: "%", - onchange: "changeRangeEditor" - })} -
-
-
- `; + getDefaultTitle() { + return "Item"; } - [SUBSCRIBE("changeRangeEditor")](key, value) { - var offset = this.state.offsets[this.selectedIndex]; - if (offset) { - offset.offset = value.clone(); - this.refresh(); - this.modifyOffset(); - } + getIcon() { + return ""; } - templateForProperty() { - return createComponent("CSSPropertyEditor", { - ref: "$offsetPropertyEditor", - "hide-refresh": true, - onchange: "changeCSSPropertyEditor" - }); + isChanged(timestamp) { + console.log("isChanged", timestamp); + return this.timestamp != Number(timestamp); } - templateForOffset() { - return `
`; + changed() { + __privateSet(this, _timestamp2, __privateGet(this, _timestamp2) + Date.now()); } - makeOffset(offset, index2) { - return `
`; + get timestamp() { + return __privateGet(this, _timestamp2); } - selectItem(selectedIndex) { - if (isUndefined(selectedIndex)) { - selectedIndex = -1; - for (var i = 0, len2 = this.state.offsets.length; i < len2; i++) { - if (this.state.offsets[i].selected) { - selectedIndex = i; - break; - } - } - if (selectedIndex === -1) { - selectedIndex = 0; - } - } - this.getRef("$offset").attr("data-selected-value", selectedIndex); - this.selectedIndex = selectedIndex; - this.state.offsets.forEach((it, index2) => { - it.selected = index2 === selectedIndex; - }); - var selectedList = this.state.offsets.filter((it) => it.selected); - this.selectedOffsetItem = selectedList.length ? selectedList[0] : {}; - this.refreshOffsetInput(); + get title() { + return this.name || this.getDefaultTitle(); } - refreshOffsetInput() { - var offset = this.state.offsets[this.selectedIndex]; - if (offset) { - this.children.$offsetInput.setValue(offset.offset); - } + get itemType() { + return this.get("itemType"); } - [LOAD("$offset")]() { - return this.state.offsets.map((it, index2) => { - return this.makeOffset(it, index2); - }); + get name() { + return this.get("name"); } - isNotOffsetItem(e) { - return !Dom.create(e.target).hasClass("offset-item") && !this.currentOffset; + get children() { + return this.get("children"); } - [CLICK("$offset") + IF("isNotOffsetItem") + PREVENT](e) { - this.baseOffsetWidth = this.refs.$offset.width(); - this.baseOffsetArea = this.refs.$offset.offset(); - var currentX = e.xy.x; - var newOffset = Length.percent((currentX - this.baseOffsetArea.left) / this.baseOffsetWidth * 100).round(100); - this.state.offsets.push(new Offset({ - offset: newOffset - })); - this.selectItem(this.state.offsets.length - 1, true); - this.refresh(); - this.modifyOffset(); + get collapsed() { + return __privateGet(this, _collapsed); } - refreshOffsetProperty() { - this.emit("showCSSPropertyEditor", this.selectedOffsetItem.properties); + set collapsed(value) { + __privateSet(this, _collapsed, value); } - [POINTERSTART("$offset .offset-item") + MOVE("moveOffset") + END("endOffset")](e) { - this.baseOffsetWidth = this.refs.$offset.width(); - this.baseOffsetArea = this.refs.$offset.offset(); - this.currentOffsetleft = Length.parse(e.$dt.css("left")); - this.currentOffset = e.$dt; - this.currentOffsetIndex = +e.$dt.attr("data-offset-index"); - this.currentOffsetXY = e.xy; - this.baseOffsetMin = this.baseOffsetArea.left; - this.baseOffsetMax = this.baseOffsetArea.left + this.baseOffsetWidth; - this.isRemoveOffset = false; - if (e.altKey) { - this.isRemoveOffset = true; - } else { - this.selectItem(this.currentOffsetIndex, true); - this.refreshOffsetInput(); - } + get visibility() { + return this.get("visibility"); + } + set visibility(value) { + this.set("visibility", value); } - moveOffset(dx) { - if (this.isRemoveOffset) + renameWithCount() { + let arr = __privateGet(this, _json).name.split(" "); + if (arr.length < 2) { return; - var currentX = this.currentOffsetXY.x + dx; - if (currentX < this.baseOffsetMin) { - currentX = this.baseOffsetMin; } - if (currentX > this.baseOffsetMax) { - currentX = this.baseOffsetMax; + let last = arr.pop(); + let lastNumber = +last; + if (isNumber(lastNumber) && isNaN(lastNumber) === false) { + lastNumber++; + } else { + lastNumber = last; } - var newOffset = Length.percent((currentX - this.baseOffsetMin) / this.baseOffsetWidth * 100).round(100); - this.state.offsets[this.currentOffsetIndex].offset.set(newOffset.value); - this.currentOffset.css("left", newOffset); - this.refreshOffsetInput(); - this.modifyOffset(); + const nextName = [...arr, lastNumber].join(" "); + this.reset({ + name: nextName + }); } - removeOffset(index2) { - this.state.offsets.splice(index2, 1); - this.selectItem(0); - this.refresh(); - this.modifyOffset(); + get allLayers() { + return this.manager.getAllLayers(this.id); } - endOffset() { - if (this.isRemoveOffset) { - window.setTimeout(() => { - this.currentOffset = null; - this.removeOffset(this.currentOffsetIndex); - }, 10); - } else { - window.setTimeout(() => { - this.currentOffset = null; - this.refreshOffsetInput(); - this.refreshOffsetProperty(); - this.modifyOffset(); - }, 10); - } + get layers() { + return this.manager.getLayers(this.id) || []; } - refresh() { - this.load(); - this.refreshOffsetProperty(); + filteredAllLayers(filterCallback) { + return this.manager.getAllLayers(this.id, filterCallback); } - [SUBSCRIBE("showOffsetEditor")](data) { - this.setState(data); - this.selectItem(); - this.refresh(); + get id() { + return __privateGet(this, _json).id; } - [SUBSCRIBE("changeCSSPropertyEditor")](properties = []) { - var offset = this.state.offsets[this.selectedIndex]; - if (offset) { - offset.properties = [...properties]; - } - this.modifyOffset(); + get parentId() { + const parentId = __privateGet(this, _json).parentId; + if (parentId === this.id) + return void 0; + return parentId; } -} -function keyframe(editor) { - editor.registerElement({ - OffsetEditor - }); - editor.registerUI("inspector.tab.transition", { - KeyframeProperty - }); - editor.registerUI("popup", { - KeyframePopup - }); -} -var LayerAppendView$1 = ""; -class LayerAppendView extends EditorElement { - template() { - return ` -
-
-
-
-
- - -
- `; + get parent() { + if (!this.parentId) + return void 0; + return this.manager.get(this.parentId); } - initState() { - return { - dragStart: false, - width: 0, - height: 0, - color: "black", - fontSize: 30, - showRectInfo: false, - areaVerties: rectToVerties(0, 0, 0, 0), - content: "Insert a text", - pathManager: new PathStringManager(), - rect: {}, - options: {}, - containerItem: void 0, - patternInfo: {} - }; + get depth() { + return this.path.length; } - get scale() { - return this.$viewport.scale; + get top() { + return this.path.filter((it) => it.isNot("project")).shift(); } - checkNotDragStart() { - return Boolean(this.state.dragStart) === false; + get project() { + return this.path.find((it) => it.is("project")); } - [POINTERMOVE("$el") + IF("checkNotDragStart")](e) { - const vertex2 = this.$viewport.getWorldPosition(e); - const newVertex = this.$context.snapManager.checkPoint(vertex2); - if (equals$2(newVertex, vertex2) === false) { - this.state.target = newVertex; - this.state.targetVertex = this.$viewport.applyVertex(this.state.target); - this.state.targetPositionVertex = clone(this.state.target); - this.state.targetGuides = this.$context.snapManager.findGuideOne([ - this.state.target - ]); - } else { - this.state.target = floor([], vertex2); - this.state.targetVertex = floor([], this.$viewport.applyVertex(this.state.target)); - this.state.targetGuides = []; - this.state.targetPositionVertex = null; + get artboard() { + return this.path.find((it) => it.is("artboard")); + } + get path() { + const path = [this]; + let parent; + while (parent = path[0].parent) { + path.unshift(parent); } - this.bindData("$mousePointer"); - this.bindData("$mousePointerView"); + return path; } - [POINTERSTART("$el") + MOVE() + END() + PREVENT + STOP](e) { - this.initMousePoint = this.state.targetPositionVertex ? this.state.targetPositionVertex : this.$viewport.getWorldPosition(e); - this.state.dragStart = true; - this.state.color = "#C4C4C4"; - this.state.text = ""; - const minX = this.initMousePoint[0]; - const minY = this.initMousePoint[1]; - const verties = rectToVerties(minX, minY, 0, 0); - this.state.areaVerties = this.$viewport.applyVerties(verties); - this.bindData("$area"); - this.bindData("$areaRect"); + get pathIds() { + return this.path.map((it) => it.id); } - createLayerTemplate(width2, height2) { - const { type, text: text2, color: color2, inlineStyle } = this.state; - switch (type) { - case "artboard": - return `
`; - case "rect": - return `
`; - case "circle": - return `
`; - case "text": - case "svg-text": - return ` -
-

-
`; - case "svg-rect": - return ` -
- - - -
- `; - case "svg-circle": - return ` -
- - - -
- `; - case "svg-path": - const newD = this.state.d.clone().scale(width2 / this.state.bboxRect.width, height2 / this.state.bboxRect.height).d; - const options2 = this.state.options; - return ` -
- - - -
- `; - case "polygon": - const options22 = this.state.options; - return ` -
- - - -
- `; - case "star": - const options3 = this.state.options; - return ` -
- - - -
- `; - case "svg-textpath": - return ` -
- - - - - - ${text2} - - -
- `; - default: - return `
`; + setParentId(parentId) { + this.reset({ parentId }); + this.manager.setChanged("setParentId", this.id, { parentId }); + } + get childrenLength() { + return __privateGet(this, _json).children.length; + } + get index() { + var _a; + return (_a = this.parent) == null ? void 0 : _a.findIndex(this); + } + get isFirst() { + return this.index === 0; + } + get isLast() { + return this.index === this.parent.childrenLength - 1; + } + get first() { + return this.parent.layers[0]; + } + get last() { + const parent = this.parent; + return parent.layers[parent.childrenLength - 1]; + } + get prev() { + var _a; + const index2 = this.index; + if (this.isFirst) { + return this; } + return (_a = this.parent) == null ? void 0 : _a.layers[index2 - 1]; } - [BIND("$area")]() { - const { areaVerties } = this.state; - const { left: left2, top: top2, width: width2, height: height2 } = vertiesToRectangle(areaVerties); - return { - style: { - left: left2, - top: top2, - width: width2, - height: height2 - }, - innerHTML: this.createLayerTemplate(width2, height2) - }; + get next() { + var _a; + const index2 = this.index; + if (this.isLast) { + return this; + } + return (_a = this.parent) == null ? void 0 : _a.layers[index2 + 1]; } - [BIND("$areaRect")]() { - const { areaVerties, showRectInfo } = this.state; - const newVerties = this.$viewport.applyVertiesInverse(areaVerties); - const { width: width2, height: height2 } = vertiesToRectangle(newVerties); - return { - style: { - display: showRectInfo ? "inline-block" : "none", - left: areaVerties[2][0], - top: areaVerties[2][1] - }, - innerHTML: `x: ${Math.round(newVerties[0][0])}, y: ${Math.round(newVerties[0][1])}, ${Math.round(width2)} x ${Math.round(height2)}` - }; + get hierarchy() { + return this.getInformationForHierarchy("x", "y", "angle"); } - [BIND("$mousePointerView")]() { - const { showRectInfo } = this.state; - const { target = create$3(), targetVertex = create$3() } = this.state; + getInformationForHierarchy(...args2) { + const parent = this.parent; + const index2 = this.index; return { - style: { - display: !showRectInfo ? "inline-block" : "none", - left: targetVertex[0] || -1e4, - top: targetVertex[1] || -1e4 - }, - innerHTML: `x: ${Math.round(target[0])}, y: ${Math.round(target[1])}` + id: this.id, + index: index2, + parentId: this.parentId, + prev: index2 === 0 ? void 0 : parent.children[index2 - 1], + next: index2 === parent.childrenLength - 1 ? void 0 : parent.children[index2 + 1], + attrs: this.attrs(...args2) }; } - makeMousePointer() { - if (this.state.dragStart) - return ""; - const { target } = this.state; - if (!target) - return ""; - const guides = (this.state.targetGuides || []).filter(Boolean); - return ` - - ${guides.map((guide) => { - this.state.pathManager.reset(); - guide = this.$viewport.applyVerties([guide[0], guide[1]]); - return this.state.pathManager.M({ x: guide[0][0], y: guide[0][1] }).L({ x: guide[1][0], y: guide[1][1] }).X({ x: guide[0][0], y: guide[0][1] }).X({ x: guide[1][0], y: guide[1][1] }).toString("layer-add-snap-pointer"); - }).join("\n")} - - `; + getInnerId(postfix = "") { + return __privateGet(this, _json).id + postfix; } - [BIND("$mousePointer")]() { - const html = this.makeMousePointer(); - return { - innerHTML: html - }; + is(checkItemType) { + return __privateGet(this, _json).itemType === checkItemType; } - move() { - const e = this.$config.get("bodyEvent"); - const targetMousePoint = this.$viewport.getWorldPosition(); - const newMousePoint = this.$context.snapManager.checkPoint(targetMousePoint); - if (equals$2(newMousePoint, targetMousePoint) === false) { - this.state.target = newMousePoint; - this.state.targetVertex = this.$viewport.applyVertex(newMousePoint); - this.state.targetGuides = this.$context.snapManager.findGuideOne([newMousePoint]).filter(Boolean); - } else { - this.state.target = void 0; - this.state.targetGuides = []; - } - const isShiftKey = e.shiftKey; - const minX = Math.min(newMousePoint[0], this.initMousePoint[0]); - const minY = Math.min(newMousePoint[1], this.initMousePoint[1]); - const maxX = Math.max(newMousePoint[0], this.initMousePoint[0]); - const maxY = Math.max(newMousePoint[1], this.initMousePoint[1]); - let dx = maxX - minX; - let dy = maxY - minY; - if (isShiftKey) { - dy = dx; - } - const verties = rectToVerties(minX, minY, dx, dy); - this.state.areaVerties = this.$viewport.applyVerties(verties); - this.state.showRectInfo = true; - this.bindData("$area"); - this.bindData("$areaRect"); - this.bindData("$mousePointer"); - this.bindData("$mousePointerView"); + isNot(checkItemType) { + return this.is(checkItemType) === false; } - end() { - const isAltKey = this.$config.get("bodyEvent").altKey; - let { color: color2, content: content2, fontSize, areaVerties, patternInfo } = this.state; - const rectVerties = this.$viewport.applyVertiesInverse(areaVerties); - const parentArtBoard = this.$context.selection.getArtboardByPoint(rectVerties[0]); - let { x, y, width: width2, height: height2 } = vertiesToRectangle(rectVerties); - let hasArea = true; - if (width2 === 0 && height2 === 0) { - switch (this.state.type) { - case "text": - content2 = ""; - height2.set(this.state.fontSize); - hasArea = false; - break; - default: - width2 = 100; - height2 = 100; - break; - } - } - var rect2 = __spreadValues(__spreadValues({ - x: Math.floor(x), - y: Math.floor(y), - width: Math.floor(width2), - height: Math.floor(height2), - backgroundColor: color2, - content: content2, - fontSize - }, patternInfo.attrs), this.state.options); - switch (this.state.type) { - case "text": - case "svg-text": - case "svg-textpath": - delete rect2.backgroundColor; - break; - case "svg-path": - rect2["d"] = this.state.d.clone().scale(width2 / this.state.bboxRect.width, height2 / this.state.bboxRect.height).d; - break; - default: - delete rect2["content"]; - break; - } - switch (this.state.type) { - case "image": - this.trigger("openImage", rect2, parentArtBoard); - break; - case "video": - this.trigger("openVideo", rect2, parentArtBoard); - break; - case "audio": - this.trigger("openAudio", rect2, parentArtBoard); - break; - case "text": - if (hasArea) { - rect2.fontSize = Length.px(this.state.fontSize).floor(); - } else { - const scaledFontSize = this.state.fontSize / this.$viewport.scale; - const $drawItem = this.refs.$area.$(".draw-item > p"); - $drawItem.parent().css("height", `${scaledFontSize}px`); - $drawItem.parent().css("font-size", `${scaledFontSize}px`); - $drawItem.select(); - $drawItem.focus(); - return; - } - this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); - break; - default: - this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); - this.$config.set("editing.mode.itemType", "select"); - break; - } - if (!isAltKey) { - this.trigger("hideLayerAppendView"); - } - this.state.dragStart = false; - this.state.showRectInfo = false; - this.state.target = void 0; - this.bindData("$areaRect"); + get(key) { + return __privateGet(this, _json)[key]; } - [SUBSCRIBE("showLayerAppendView")](type, options2 = {}) { - this.state.type = type; - this.state.options = options2; - this.state.isShow = true; - this.refs.$area.empty(); - this.$el.show(); - this.$el.focus(); - this.$context.snapManager.clear(); - const model = this.$model.createModel(__spreadValues({ - itemType: type - }, options2), false); - this.state.inlineStyle = CSS_TO_STRING(this.$editor.renderer("html").toCSS(model, { - top: true, - left: true, - width: true, - height: true, - transform: true, - transformOrigin: true - })); - if (options2.d) { - this.state.d = new PathParser(options2.d); - this.state.bboxRect = this.state.d.rect(); - } - this.$context.commands.emit("push.mode.view", "LayerAppendView"); + removeField(key) { + delete __privateGet(this, _json)[key]; + } + set(key, value) { + this.reset({ [key]: value }); + } + isSVG() { + return false; + } + addCache(key, value) { + __privateGet(this, _cachedValue)[key] = value; + } + getCache(key) { + return __privateGet(this, _cachedValue)[key]; + } + hasCache(key) { + return Boolean(__privateGet(this, _cachedValue)[key]); } - [SUBSCRIBE("hideLayerAppendView")]() { - if (this.$el.isShow()) { - this.state.isShow = false; - this.$el.hide(); - this.$commands.emit("pop.mode.view", "LayerAppendView"); + computed(key, newValueCallback, isForce = false) { + const cachedKey = `__cachedKey_${key}`; + const parsedKey = `${cachedKey}__parseValue`; + const value = __privateGet(this, _json)[key]; + if (isForce) + ; + else { + if (this.getCache(cachedKey) === value && this.getCache(parsedKey)) { + return this.getCache(parsedKey); + } } + this.addCache(cachedKey, value); + this.addCache(parsedKey, newValueCallback(value, this)); + return this.getCache(parsedKey); } - [SUBSCRIBE("hideAddViewLayer")]() { - this.state.isShow = false; - this.$el.hide(); + computedValue(key) { + const cachedKey = `__cachedKey_${key}`; + const parsedKey = `${cachedKey}__parseValue`; + return this.getCache(parsedKey); } - isShow() { - return this.state.isShow; + editable() { + return true; } - [KEYDOWN("document") + IF("isShow") + ESCAPE + ENTER]() { + generateListNumber() { + this.layers.forEach((it, index2) => { + it.no = index2; + it.generateListNumber(); + }); } - [KEYUP("document") + IF("isShow") + ESCAPE + ENTER](e) { - switch (this.state.type) { - case "text": - const $t = Dom.create(e.target); - let { fontSize, areaVerties } = this.state; - const rectVerties = this.$viewport.applyVertiesInverse(areaVerties); - const { x, y } = vertiesToRectangle(rectVerties); - const { width: width2, height: height2 } = $t.rect(); - const text2 = $t.text(); - if (text2.length === 0) { - break; - } - const [[newWidth, newHeight, newFontSize]] = this.$viewport.applyScaleVertiesInverse([[width2, height2, fontSize]]); - const rect2 = { - x, - y, - width: newWidth, - height: newHeight, - content: text2.trim(), - "font-size": newFontSize - }; - const parentArtBoard = this.$context.selection.getArtboardByPoint(rectVerties[0]); - this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); - break; - } - this.state.dragStart = false; - this.state.showRectInfo = false; - this.state.target = null; - this.bindData("$areaRect"); - this.trigger("hideLayerAppendView"); + convert(json = {}) { + return json; } - [CHANGE("$file")]() { - this.refs.$file.files.forEach((item) => { - this.$commands.emit("updateImage", item, this.state.rect, this.state.containerItem); - }); + setCache() { } - [CHANGE("$video")]() { - this.refs.$video.files.forEach((item) => { - this.$commands.emit("updateVideo", item, this.state.rect, this.state.containerItem); + toCloneObject(isDeep = true) { + const json = {}; + Object.keys(__privateGet(this, _json)).forEach((field) => { + if (isNotUndefined(this.get(field))) { + json[field] = clone$1(this.get(field)); + } }); + if (isDeep) { + json.layers = this.layers.map((layer) => { + return layer.clone(isDeep); + }); + } + return json; } - [SUBSCRIBE("openImage")](rect2, containerItem) { - this.state.rect = rect2; - this.state.containerItem = containerItem; - this.refs.$file.click(); + clone(isDeep = true) { + return __privateGet(this, _modelManager).clone(this.id, isDeep); } - [SUBSCRIBE("openVideo")](rect2, containerItem) { - this.state.rect = rect2; - this.state.containerItem = containerItem; - this.refs.$video.click(); + reset(obj2, context = { origin: "*" }) { + var _a; + __privateSet(this, _json, this.convert(Object.assign(__privateGet(this, _json), obj2))); + __privateSet(this, _lastChangedField, obj2); + if (context.origin === "*") { + (_a = __privateGet(this, _modelManager)) == null ? void 0 : _a.setChanged("reset", this.id, obj2); + } + this.changed(); + return true; } - [SUBSCRIBE("setPatternInfo")](patternInfo) { - this.state.patternInfo = patternInfo; + hasChangedField(...args2) { + return args2.some((it) => __privateGet(this, _lastChangedField)[it] !== void 0); } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.$context.snapManager.clear(); - this.bindData("$mousePointer"); - this.bindData("$mousePointerView"); + get hasChangedHirachy() { + return this.hasChangedField("children", "parentId"); } -} -function layerAppendView(editor) { - editor.registerUI("canvas.view", { - LayerAppendView - }); -} -var LayerTreeProperty$1 = ""; -const DRAG_START_CLASS = "drag-start"; -class LayerTreeProperty extends BaseProperty { - getTitle() { - return this.$i18n("layer.tree.property.title"); + getDefaultObject(obj2 = {}) { + var id = obj2.id || uuid(); + return __spreadValues({ + id, + name: "", + itemType: "base", + children: [], + parentId: "", + visibility: "visible" + }, obj2); } - getClassName() { - return "full"; + attrs(...args2) { + const result = {}; + args2.forEach((field) => { + if (isNotUndefined(this.get(field))) { + result[field] = clone$1(this.get(field)); + } + }); + return result; } - initState() { + attrsWithId(...args2) { return { - hideDragPointer: true, - lastDragOverPosition: 0, - lastDragOverOffset: 0, - rootRect: { top: 0 }, - itemRect: { height: 0 } + [this.id]: this.attrs(...args2) }; } - getBody() { - return ` -
-
- `; + hasChildren() { + return this.children.length > 0; } - [BIND("$dragPointer")]() { - var offset = this.state.lastDragOverOffset; - var dist2 = this.state.itemRect.height / 3; - var bound = {}; - if (this.state.lastDragOverOffset < dist2) { - offset = 0; - var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; - bound = { - top: top2, - height: "1px", - width: "100%", - left: "0px" - }; - this.state.lastDragOverItemDirection = "before"; - } else if (this.state.lastDragOverOffset > this.state.itemRect.height - dist2) { - offset = this.state.itemRect.height; - var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; - bound = { - top: top2, - height: "1px", - width: "100%", - left: "0px" - }; - this.state.lastDragOverItemDirection = "after"; - } else { - const targetItem = this.$model.get(this.state.lastDragOverItemId); - if (targetItem == null ? void 0 : targetItem.enableHasChildren()) { - offset = 0; - var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; - bound = { - top: top2, - height: this.state.itemRect.height, - width: "100%", - left: "0px" - }; - this.state.lastDragOverItemDirection = "self"; + appendChild(layer) { + if (layer.parentId === this.id) { + const hasId = this.children.find((it) => it === layer.id); + if (Boolean(hasId) === false) { + this.children.push(layer.id); + __privateGet(this, _modelManager).setChanged("appendChild", this.id, { + child: layer.id, + oldParentId: layer.parentId + }); } + return layer; } - bound.display = this.state.hideDragPointer ? "none" : "block"; - return { - style: bound - }; + this.resetMatrix(layer); + if (layer.parent) { + layer.remove(); + } + layer.setParentId(this.id); + this.children.push(layer.id); + return layer; } - getIcon(item) { - if (item.d) { - return iconUseForPath(item.d, { - width: item.screenWidth, - height: item.screenHeight, - fill: "currentColor", - stroke: "currentColor" + resetMatrix() { + } + refreshMatrixCache() { + } + insertChild(layer, index2 = 0) { + var _a; + this.resetMatrix(layer); + if (layer.parent && ((_a = layer.parent) == null ? void 0 : _a.id) !== this.id) { + layer.remove(); + } + layer.setParentId(this.id); + let list2 = this.children.map((id, childIndex) => { + return { id, index: childIndex }; + }); + const childItem = list2.find((it) => it.id === layer.id); + const targetIndex = index2 - 0.5; + if (childItem) { + childItem.index = targetIndex; + } else { + list2.push({ id: layer.id, index: targetIndex }); + } + list2.sort((a, b) => { + return a.index - b.index; + }); + this.reset({ + children: list2.map((it) => it.id) + }); + __privateGet(this, _modelManager).setChanged("insertChild", this.id, { + childId: layer.id, + index: 0 + }); + return layer; + } + insertAfter(layer) { + this.parent.insertChild(layer, this.index + 1); + return layer; + } + insertBefore(layer) { + this.parent.insertChild(layer, this.index); + return layer; + } + toggle(field, toggleValue) { + if (isUndefined(toggleValue)) { + this.reset({ + [field]: !this.get(field) + }); + } else { + this.reset({ + [field]: !!toggleValue }); } - if (item.hasLayout() || item.hasChildren() || item.is("artboard")) { - if (item.isLayout("flex")) { - return iconUse("layout_flex"); - } else if (item.isLayout("grid")) { - return iconUse("layout_grid"); - } - return iconUse("layout_default"); + } + isTreeItemHide() { + let currentParent = this.parent; + let collapsedList = []; + do { + if (currentParent.is("project")) + break; + collapsedList.push(Boolean(currentParent.collapsed)); + currentParent = currentParent.parent; + } while (currentParent); + return Boolean(collapsedList.filter(Boolean).length); + } + expectJSON(key) { + if (isUndefined(this.get(key))) + return false; + return true; + } + toJSON() { + const json = __privateGet(this, _json); + let newJSON = {}; + Object.keys(json).filter((key) => this.expectJSON(key)).forEach((key) => { + newJSON[key] = json[key]; + }); + if (this.hasChildren()) { + newJSON.layers = this.layers.map((layer) => { + return layer.toJSON(); + }); } - return this.$icon.get(item.itemType, item); + return newJSON; } - makeLayerList(parentObject, depth = 0) { - if (!parentObject.layers) - return ""; - const layers2 = parentObject.layers; - const data = []; - for (var last = layers2.length - 1; last > -1; last--) { - var layer = layers2[last]; - var selectedPathClass = this.$context.selection.hasPathOf(layer) ? "selected-path" : ""; - var selectedClass = this.$context.selection.check(layer) ? "selected" : ""; - var hovered = this.$context.selection.checkHover(layer) ? "hovered" : ""; - var name = layer.is("boolean-path") ? layer["boolean-operation"] : layer.name; - if (layer.is("text")) { - name = layer.text || layer.name; + resize() { + } + copy(dist2 = 0) { + return this.parent.copyItem(this.id, dist2); + } + findIndex(child) { + return this.children.indexOf(child.id); + } + find(id) { + return __privateGet(this, _modelManager).get(id); + } + copyItem(childItemId, dist2 = 10) { + const childItem = this.find(childItemId); + var child = childItem.clone(); + child.renameWithCount(); + child.absoluteMove([dist2, dist2, 0]); + var childIndex = this.findIndex(childItem); + if (childIndex > -1) { + this.children.push(child.id); + } + return child; + } + remove() { + this.parent.removeChild(this.id); + } + removeChild(childItemId) { + return __privateGet(this, _modelManager).removeChild(this.id, childItemId); + } + hasParent(findParentId) { + return this.parentId === findParentId; + } + hasPathOf(targetItems = []) { + const path = this.path; + return targetItems.filter((it) => it.id !== this.id).some((target) => { + return path.find((it) => it.id === target.id); + }); + } + hasChild(childId) { + return this.children.includes(childId); + } + to() { + } + sendBackward(targetId) { + const siblings = this.children; + const result = {}; + let selectedIndex = -1; + siblings.forEach((id, index2) => { + result[id] = { id, index: index2 }; + if (id === targetId) { + selectedIndex = index2; } - var title2 = ""; - if (layer.hasLayout()) { - title2 = this.$i18n("layer.tree.property.layout.title." + layer.layout); + }); + result[targetId].index = selectedIndex - 1.5; + const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); + this.reset({ + children: children2 + }); + } + sendBack(targetId) { + const siblings = this.children; + const result = {}; + siblings.forEach((id, index2) => { + result[id] = { id, index: index2 }; + }); + result[targetId].index = -1; + const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); + this.reset({ + children: children2 + }); + } + bringForward(targetId) { + const siblings = this.children; + const result = {}; + let selectedIndex = -1; + siblings.forEach((id, index2) => { + result[id] = { id, index: index2 }; + if (id === targetId) { + selectedIndex = index2; } - const isHide = layer.isTreeItemHide(); - const depthPadding = depth * 20; - const hasChildren = layer.hasChildren(); - const lock2 = this.$lockManager.get(layer.id); - const visible2 = this.$visibleManager.get(layer.id); - data[data.length] = `
${this.makeLayerList(layer, depth + 1)}`; - } - return data.join(""); + }); + result[targetId].index = selectedIndex + 1.5; + const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); + this.reset({ + children: children2 + }); } - [SUBSCRIBE("refreshContent")]() { - this.refresh(); + bringFront(targetId) { + const siblings = this.children; + const result = {}; + siblings.forEach((id, index2) => { + result[id] = { id, index: index2 }; + }); + result[targetId].index = Number.MAX_SAFE_INTEGER; + const children2 = Object.values(result).sort((a, b) => a.index - b.index).map((it) => it.id); + this.reset({ + children: children2 + }); } - [LOAD("$layerList") + DOMDIFF]() { - var project2 = this.$context.selection.currentProject; - if (!project2) - return ""; - return [ - this.makeLayerList(project2, 0), - ` -
-
- ` - ]; +} +_modelManager = new WeakMap(); +_json = new WeakMap(); +_cachedValue = new WeakMap(); +_timestamp2 = new WeakMap(); +_lastChangedField = new WeakMap(); +_collapsed = new WeakMap(); +class BaseAssetModel extends BaseModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + svgfilters: [], + keyframes: [] + }, obj2)); } - [DRAGSTART("$layerList .layer-item")](e) { - var layerId = e.$dt.attr("data-layer-id"); - e.$dt.addClass(DRAG_START_CLASS); - e.dataTransfer.setData("layer/id", layerId); - this.state.rootRect = this.refs.$layerList.rect(); - this.state.itemRect = e.$dt.rect(); - this.setState({ - hideDragPointer: false - }, false); - this.bindData("$dragPointer"); + get keyframes() { + return this.get("keyframes"); } - [DRAGEND("$layerList .layer-item")]() { - this.setState({ - hideDragPointer: true - }, false); - this.bindData("$dragPointer"); - this.refs.$layerList.$$(`.${DRAG_START_CLASS}`).forEach((it) => { - it.removeClass(DRAG_START_CLASS); + get svgfilters() { + return this.get("svgfilters"); + } + addKeyframe(keyframe2) { + this.keyframes.push(keyframe2); + return keyframe2; + } + createKeyframe(data = {}) { + return this.addKeyframe(new Keyframe(__spreadValues({ + checked: true + }, data))); + } + removeKeyframe(removeIndex) { + this.removePropertyList(this.keyframes, removeIndex); + } + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); + } + sortKeyframe(startIndex, targetIndex) { + this.sortItem(this.keyframes, startIndex, targetIndex); + } + updateKeyframe(index2, data = {}) { + this.keyframes[+index2].reset(data); + } + toKeyframeString(isAnimate = false) { + return this.keyframes.map((keyframe2) => keyframe2.toString(isAnimate)).join("\n\n"); + } + copyPropertyList(arr, index2) { + var copyObject = __spreadValues({}, arr[index2]); + arr.splice(index2, 0, copyObject); + } + removePropertyList(arr, removeIndex) { + arr.splice(removeIndex, 1); + } + getSVGFilterIndex(id) { + var _a; + var filter2 = this.svgfilters.map((it, index2) => { + return { id: it.id, index: index2 }; + }).filter((it) => { + return it.id === id; }); + return filter2.length ? (_a = filter2 == null ? void 0 : filter2[0]) == null ? void 0 : _a.index : -1; } - [DRAGOVER(`$layerList .layer-item:not(.${DRAG_START_CLASS})`) + PREVENT](e) { - var targetLayerId = e.$dt.attr("data-layer-id"); - this.state.lastDragOverItemId = targetLayerId; - this.state.lastDragOverPosition = e.$dt.rect().top; - this.state.lastDragOverOffset = e.offsetY; - this.bindData("$dragPointer"); + removeSVGFilter(removeIndex) { + this.removePropertyList(this.svgfilters, removeIndex); } - [DROP(`$layerList .layer-item:not(.${DRAG_START_CLASS})`)](e) { - var targetLayerId = e.$dt.attr("data-layer-id"); - var sourceLayerId = e.dataTransfer.getData("layer/id"); - if (targetLayerId === sourceLayerId) - return; - var targetItem = this.$model.get(targetLayerId); - var sourceItem = this.$model.get(sourceLayerId); - if ((targetItem == null ? void 0 : targetItem.enableHasChildren()) === false) - return; - if (targetItem && targetItem.hasParent(sourceItem.id)) - return; - switch (this.state.lastDragOverItemDirection) { - case "self": - this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.APPEND_CHILD); - break; - case "before": - this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.INSERT_BEFORE); - break; - case "after": - this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.INSERT_AFTER); - break; - } - this.nextTick(() => { - this.$commands.emit("recoverBooleanPath"); - this.$context.selection.select(sourceItem); - this.setState({ - hideDragPointer: true - }); - }, 10); + copySVGFilter(index2) { + this.copyPropertyList(this.svgfilters, index2); } - [DOUBLECLICK("$layerList .layer-item")](e) { - this.startInputEditing(e.$dt.$(".name")); + sortSVGFilter(startIndex, targetIndex) { + this.sortItem(this.svgfilters, startIndex, targetIndex); } - modifyDoneInputEditing(input2, event) { - if (KEY_CODE.enter === event.keyCode) { - this.endInputEditing(input2, () => { - var id2 = input2.closest("layer-item").attr("data-layer-id"); - var text3 = input2.text(); - this.$commands.executeCommand("setAttribute", "change name", { - [id2]: { - name: text3 - } - }); - }); - } else { - var id = input2.closest("layer-item").attr("data-layer-id"); - var text2 = input2.text(); - this.$commands.executeCommand("setAttribute", "change name", { - [id]: { - name: text2 - } - }); - } + setSVGFilterValue(index2, value) { + this.svgfilters[index2] = __spreadValues(__spreadValues({}, this.svgfilters[index2]), value); } - [KEYDOWN("$layerList .layer-item .name") + STOP](e) { - this.modifyDoneInputEditing(e.$dt, e); + addSVGFilter(obj2 = {}) { + this.svgfilters.push(obj2); + var index2 = this.svgfilters.length - 1; + return index2; } - [FOCUSOUT("$layerList .layer-item .name") + PREVENT + STOP](e) { - this.modifyDoneInputEditing(e.$dt, { keyCode: KEY_CODE.enter }); + createSVGFilter(data = {}) { + return this.addSVGFilter(__spreadValues({ + id: uuidShort() + }, data)); } - selectLayer(layer) { - if (layer) { - this.$context.selection.select(layer); - } - this.refresh(); +} +class MovableModel extends BaseAssetModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + angle: 0, + x: 0, + y: 0, + width: 300, + height: 300, + position: "absolute", + perspective: "", + perspectiveOrigin: "", + transformOrigin: "50% 50% 0px" + }, obj2)); } - addLayer(layer) { - if (layer) { - this.$context.selection.select(layer); - this.$commands.emit("refreshArtboard"); - } + get isAbsolute() { + return this.position === "absolute"; } - [CLICK("$add")]() { - this.$commands.emit("newComponent", "rect", { - backgroundColor: "#ececec", - width: 200, - height: 100 - }); + get isDragSelectable() { + return true; } - [CLICK("$layerList .layer-item label .name")](e) { - var $item = e.$dt.closest("layer-item"); - $item.onlyOneClass("selected"); - var id = $item.attr("data-layer-id"); - this.$context.selection.select(id); - this.$commands.emit("history.refreshSelection"); + get isBooleanItem() { + return void 0; } - [CLICK("$layerList .layer-item label .folder")](e) { - var $item = e.$dt.closest("layer-item"); - var id = $item.attr("data-layer-id"); - var item = this.$model.get(id); - item.reset({ - collapsed: !item.collapsed - }); - this.refresh(); + get resizableWitChildren() { + return false; } - [CLICK("$layerList .layer-item .visible")](e) { - var $item = e.$dt.closest("layer-item"); - var id = $item.attr("data-layer-id"); - this.$visibleManager.toggle(id); - var visible2 = this.$visibleManager.get(id); - e.$dt.attr("data-visible", visible2); - this.emit("refreshVisibleView"); + get perspective() { + return this.get("perspective"); } - [CLICK("$layerList .layer-item .remove")](e) { - var $item = e.$dt.closest("layer-item"); - var id = $item.attr("data-layer-id"); - this.$commands.executeCommand("removeLayer", "remove a layer", [id]); - this.nextTick(() => { - this.refresh(); - }, 1e3); + get perspectiveOrigin() { + return this.get("perspectiveOrigin"); } - [CLICK("$layerList .layer-item .lock")](e) { - var $item = e.$dt.closest("layer-item"); - var id = $item.attr("data-layer-id"); - this.$lockManager.toggle(id); - var lastLock = this.$lockManager.get(id); - e.$dt.attr("data-lock", lastLock); - if (lastLock) { - this.$context.selection.removeById(id); + get transform() { + return `rotateZ(${Length.deg(this.angle)})`; + } + get localMatrix() { + if (!this.hasCache("localTransform")) { + this.addCache("localTransform", this.getLocalTransformMatrix()); } + return this.getCache("localTransform") || this.getLocalTransformMatrix(); } - [SUBSCRIBE("changeHoverItem")]() { - this.refs.$layerList.$$(".hovered").forEach((it) => { - it.removeClass("hovered"); - }); - if (this.$context.selection.hoverItems.length) { - var selector2 = this.$context.selection.hoverItems.map((it) => { - return `[data-layer-id="${it.id}"]`; - }).join(","); - this.refs.$layerList.$$(selector2).forEach((it) => { - it.addClass("hovered"); - }); + get localMatrixInverse() { + if (!this.hasCache("localTransformInverse")) { + this.addCache("localTransformInverse", this.getLocalTransformMatrixInverse()); } + return this.getCache("localTransformInverse") || this.getLocalTransformMatrixInverse(); } - [SUBSCRIBE_SELF("changeSelection")](isSelection = false) { - if (isSelection && this.refs.$layerList) { - this.refs.$layerList.$$(".selected").forEach((it) => { - it.removeClass("selected"); - }); - this.refs.$layerList.$$(".selected-path").forEach((it) => { - it.removeClass("selected-path"); - }); - var selector2 = this.$context.selection.items.map((it) => { - return `[data-layer-id="${it.id}"]`; - }).join(","); - if (selector2) { - this.refs.$layerList.$$(selector2).forEach((it) => { - it.addClass("selected"); - var item = this.$context.selection.itemKeys[it.attr("data-layer-id")]; - if (item.is("svg-path", "svg-polygon")) { - it.$(".icon").html(this.getIcon(item)); - } - }); - } + get transformWithTranslate() { + if (!this.hasCache("transformWithTranslate")) { + this.addCache("transformWithTranslate", this.getTransformWithTranslate(this)); } + return this.getCache("transformWithTranslate") || this.getTransformWithTranslate(this); } - [SUBSCRIBE(REFRESH_SELECTION, "refreshAllCanvas")]() { - this.refresh(); + get transformWithTranslateToTranspose() { + if (!this.hasCache("transformWithTranslateTranspose")) { + this.addCache("transformWithTranslateTranspose", this.getTransformWithTranslate(this)); + } + return this.getCache("transformWithTranslateTranspose") || transpose([], this.getTransformWithTranslate(this)); } - [SUBSCRIBE("refreshLayerTreeView") + THROTTLE(100)]() { - this.refresh(); + get transformWithTranslateInverse() { + if (!this.hasCache("transformWithTranslateInverse")) { + this.addCache("transformWithTranslateInverse", this.getTransformWithTranslate(this)); + } + return this.getCache("transformWithTranslateInverse") || invert([], this.getTransformWithTranslate(this)); } - [SUBSCRIBE("changeItemLayout")]() { - this.refresh(); + get itemMatrix() { + if (!this.hasCache("itemTransform")) { + this.addCache("itemTransform", this.getItemTransformMatrix()); + } + return this.getCache("itemTransform") || this.getItemTransformMatrix(); } - [CONFIG("bodyEvent")]() { - const $target = Dom.create(this.$config.get("bodyEvent").target); - const $layerItem = $target.closest("layer-item"); - if ($layerItem) { - this.emit("refreshHoverView", $layerItem.data("layer-id")); + get itemMatrixInverse() { + if (!this.hasCache("itemTransformInverse")) { + this.addCache("itemTransformInverse", this.getItemTransformMatrixInverse()); } + return this.getCache("itemTransformInverse") || this.getItemTransformMatrixInverse(); } -} -function layerTree(editor) { - editor.registerElement({ - LayerTreeProperty - }); -} -function layertab(editor) { - editor.registerUI("layertab.tab", { - Sample: { - title: "Sample", - icon: iconUse("add"), - value: "sample" + get absoluteMatrix() { + if (!this.hasCache("absoluteMatrix")) { + this.addCache("absoluteMatrix", this.getAbsoluteMatrix()); } - }); -} -var DefaultLayoutItemProperty$1 = ""; -class DefaultLayoutItemProperty extends BaseProperty { - getTitle() { - return this.$i18n("default.layout.item.property.title.constraints"); + return this.getCache("absoluteMatrix") || this.getAbsoluteMatrix(); } - getClassName() { - return "elf--default-layout-item-property"; + get absoluteMatrixInverse() { + if (!this.hasCache("absoluteMatrixInverse")) { + this.addCache("absoluteMatrixInverse", this.getAbsoluteMatrixInverse()); + } + return this.getCache("absoluteMatrixInverse") || this.getAbsoluteMatrixInverse(); } - getBody() { - return ` -
-
-
-
-
-
- `; + get relativeMatrix() { + if (!this.hasCache("relativeMatrix")) { + this.addCache("relativeMatrix", this.getRelativeMatrix()); + } + return this.getCache("relativeMatrix") || this.getRelativeMatrix(); } - [LOAD("$constraintsInfo") + DOMDIFF]() { - var current = this.$context.selection.current; - const h = (current == null ? void 0 : current["constraints-horizontal"]) || Constraints.MIN; - const v = (current == null ? void 0 : current["constraints-vertical"]) || Constraints.MIN; - return ` -
- - -
-
-
- - -
-
-
-
-
- `; + get relativeMatrixInverse() { + if (!this.hasCache("relativeMatrixInverse")) { + this.addCache("relativeMatrixInverse", this.getRelativeMatrixInverse()); + } + return this.getCache("relativeMatrixInverse") || this.getRelativeMatrixInverse(); } - [LOAD("$constraintsInfoInput")]() { - var current = this.$context.selection.current; - const hasLayout = current == null ? void 0 : current.hasLayout(); - return ` -
- ${createComponent("SelectEditor", { - ref: "$constraintsHorizontal", - key: "constraints-horizontal", - value: (current == null ? void 0 : current["constraints-horizontal"]) || "min", - label: iconUse("width"), - compact: true, - options: [ - { value: "min", text: "Left" }, - { value: "max", text: "Right" }, - { value: "stretch", text: "Left and Right", disabled: hasLayout }, - { value: "center", text: "Center" }, - { value: "scale", text: "Scale", disabled: hasLayout } - ], - onchange: "changeConstraints" - })} -
- -
- ${createComponent("SelectEditor", { - ref: "$constraintsVertical", - key: "constraints-vertical", - value: (current == null ? void 0 : current["constraints-vertical"]) || "min", - label: iconUse("height"), - compact: true, - options: [ - { value: "min", text: "Top" }, - { value: "max", text: "Bottom" }, - { value: "stretch", text: "Top and Bottom", disabled: hasLayout }, - { value: "center", text: "Center" }, - { value: "scale", text: "Scale", disabled: hasLayout } - ], - onchange: "changeConstraints" - })} -
- `; + get verties() { + if (!this.hasCache("verties")) { + this.addCache("verties", this.getVerties()); + } + return this.getCache("verties") || this.getVerties(); } - [CLICK("$constraintsInfo .item")](e) { - const [value, key] = e.$dt.attrs("data-value", "data-key"); - const current = this.$context.selection.current; - if (!current) - return; - current.changeConstraints(key, value, e.shiftKey); - this.trigger("changeConstraints", key, current[key]); + get contentVerties() { + if (!this.hasCache("contentVerties")) { + this.addCache("contentVerties", this.getContentVerties()); + } + return this.getCache("contentVerties") || this.getContentVerties(); } - [SUBSCRIBE_SELF("changeConstraints")](key, value) { - this.$commands.executeCommand("setAttribute", "apply constraints", this.$context.selection.packByValue({ - [key]: value - })); - this.nextTick(() => { - this.refresh(); - }, 100); + get originVerties() { + if (!this.hasCache("vertiesWithoutTransformOrigin")) { + this.addCache("vertiesWithoutTransformOrigin", this.rectVerties()); + } + return this.getCache("vertiesWithoutTransformOrigin") || this.rectVerties(); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(() => { - var current = this.$context.selection.current; - return current && current.isInDefault() && current.parent.isNot("project"); - }); + get localVerties() { + if (!this.hasCache("localVerties")) { + this.addCache("localVerties", this.getLocalVerties()); + } + return this.getCache("localVerties") || this.getLocalVerties(); } -} -var FlexGrowToolView$1 = ""; -class FlexGrowToolView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--flex-grow-tool-view" - }); + get guideVerties() { + if (!this.hasCache("guideVerties")) { + this.addCache("guideVerties", this.getGuideVerties()); + } + return this.getCache("guideVerties") || this.getGuideVerties(); } - [LOAD("$el") + DOMDIFF]() { - return this.$context.selection.map((item) => { - const parentItem = item.parent; - if (!parentItem) - return; - if (parentItem.is("project")) - return; - if (parentItem.isLayout(Layout.FLEX) === false) - return; - return parentItem.layers.map((child) => { - const verties = this.$viewport.applyVerties(child.verties); - const center2 = verties[4]; - let flexGrow = 0; - let size2 = child.screenWidth || 0; - const parentLayoutDirection = parentItem == null ? void 0 : parentItem.flexDirection; - if (parentLayoutDirection === FlexDirection.ROW) { - if (child.resizingHorizontal === ResizingMode.FILL_CONTAINER) { - flexGrow = child.flexGrow || 1; - } - size2 = child.screenWidth; - } else if (parentLayoutDirection === FlexDirection.COLUMN) { - if (child.resizingVertical === ResizingMode.FILL_CONTAINER) { - flexGrow = child.flexGrow || 1; - } - size2 = child.screenHeight; - } - return /* @__PURE__ */ createElementJsx("div", { - class: "flex-grow-item", - style: { - left: Length.px(center2[0]), - top: Length.px(center2[1]) - }, - "data-flex-item-id": child.id, - "data-parent-direction": parentLayoutDirection, - "data-flex-grow": flexGrow - }, /* @__PURE__ */ createElementJsx("span", { - class: "size" - }, Math.floor(size2)), " ", /* @__PURE__ */ createElementJsx("span", { - class: "grow" - }, flexGrow || "x")); - }).join(""); - }); + get xList() { + if (!this.hasCache("xList")) { + this.addCache("xList", this.getXList()); + } + return this.getCache("xList") || this.getXList(); } - [POINTERSTART("$el .flex-grow-item") + MOVE() + END()](e) { - const [id, grow] = e.$dt.attrs("data-flex-item-id", "data-flex-grow"); - this.setState({ - id, - grow: +grow - }, false); + get yList() { + if (!this.hasCache("yList")) { + this.addCache("yList", this.getYList()); + } + return this.getCache("yList") || this.getYList(); } - getFlexGrow(parentLayoutDirection, item, grow, dx, dy) { - let flexGrow = grow; - if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { - flexGrow = grow + Math.floor(dx / 10); - } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical === ResizingMode.FILL_CONTAINER) { - flexGrow = grow + Math.floor(dy / 10); + get areaPosition() { + if (!this.hasCache("areaPosition")) { + this.addCache("areaPosition", this.getAreaPosition(100)); } - flexGrow = Math.max(1, flexGrow); - return flexGrow; + return this.getCache("areaPosition") || this.getAreaPosition(100); } - move(dx, dy) { - const { id, grow } = this.state; - const item = this.$editor.get(id); - if (!item) - return; - const parentItem = item.parent; - if (!parentItem) - return; - const parentLayoutDirection = parentItem.flexDirection; - let flexGrow = this.getFlexGrow(parentLayoutDirection, item, grow, dx, dy); - this.$commands.emit("setAttribute", { - [id]: { - flexGrow - } - }); + get offsetX() { + return this.x; } - end(dx, dy) { - const { id, grow } = this.state; - const item = this.$editor.get(id); - if (!item) - return; - const parentItem = item.parent; - if (!parentItem) - return; - const parentLayoutDirection = parentItem.flexDirection; - let flexGrow = this.getFlexGrow(parentLayoutDirection, item, grow, dx, dy); - if (dx === 0 && dy === 0) { - if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal !== ResizingMode.FILL_CONTAINER) { - this.$commands.executeCommand("setAttribute", "change self resizing", { - [id]: { - flexGrow: 1, - resizingHorizontal: ResizingMode.FILL_CONTAINER - } - }); - } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical !== ResizingMode.FILL_CONTAINER) { - this.$commands.executeCommand("setAttribute", "change self resizing", { - [id]: { - flexGrow: 1, - resizingVertical: ResizingMode.FILL_CONTAINER - } - }); - } - } else { - this.$commands.executeCommand("setAttribute", "change self resizing", { - [id]: { - flexGrow - } - }); - } - this.nextTick(() => { - this.refresh(); - }, 10); + get offsetY() { + return this.y; + } + get screenWidth() { + return this.width; } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); + get screenHeight() { + return this.height; } - [SUBSCRIBE(REFRESH_SELECTION) + THROTTLE(100)]() { - this.refresh(); + get y() { + return this.get("y"); } - [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(1)]() { - this.refresh(); + set y(value) { + this.set("y", value); } - [CONFIG("set.move.control.point")]() { - this.refresh(); + get x() { + return this.get("x"); } -} -var FlexLayoutEditor$1 = ""; -class FlexLayoutEditor extends EditorElement { - initialize() { - super.initialize(); - this.directionOptions = this.getDirectionOptions(); - this.wrapOptions = this.getWrapOptions(); - this.justifyContentOptions = this.getJustifyContentOptions(); - this.alignItemsOptions = this.getAlignItemsOptions(); + set x(value) { + this.set("x", value); } - getDirectionOptions() { - return this.makeOptionsFunction("row,column"); + get width() { + return this.get("width"); } - getWrapOptions() { - return this.makeOptionsFunction("nowrap,wrap"); + set width(value) { + this.set("width", value); } - getJustifyContentOptions() { - return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around"); + get height() { + return this.get("height"); } - getAlignItemsOptions() { - return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch"); + set height(value) { + this.set("height", value); } - getAlignContentOptions() { - return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch"); + get angle() { + return this.get("angle"); } - makeOptionsFunction(options2) { - return options2.split(",").map((it) => { - return { value: it, text: this.$i18n("flex.layout.editor." + it) }; - }); + set angle(value) { + this.set("angle", value); } - initState() { - return __spreadValues({}, this.props.value); + get position() { + return this.get("position"); } - setValue(value) { - this.setState(__spreadValues({}, value)); + set position(value) { + this.set("position", value); } - getValue() { - return this.state; + get transformOrigin() { + return this.get("transformOrigin"); } - modifyData(key, value) { - this.parent.trigger(this.props.onchange, key, value); + set transformOrigin(value) { + this.reset({ + transformOrigin: value + }); } - [LOAD("$body") + DOMDIFF]() { - const current = this.$context.selection.current; - if (!current) - return ""; - const realPaddingTop = Math.min(current.paddingTop || 0, 50); - const realPaddingLeft = Math.min(current.paddingLeft || 0, 50); - const realPaddingRight = Math.min(current.paddingRight || 0, 50); - const realPaddingBottom = Math.min(current.paddingBottom || 0, 50); - const padding2 = `padding-top:${realPaddingTop}px;padding-left: ${realPaddingLeft}px;padding-right:${realPaddingRight}px;padding-bottom: ${realPaddingBottom}px;`; - return `
${createComponent("SelectIconEditor", { - key: "flexDirection", - ref: "$flexDirection", - value: this.state.flexDirection || FlexDirection.ROW, - options: this.directionOptions, - icons: ["east", "south"], - onchange: "changeKeyValue" - })}
${createComponent("NumberInputEditor", { - compact: true, - ref: "$flex-gap", - label: iconUse("space"), - key: "gap", - value: this.state.gap, - min: 0, - max: 100, - step: 1, - onchange: "changeKeyValue" - })}
${createComponent("NumberInputEditor", { - compact: true, - label: iconUse("padding"), - key: "padding", - ref: "$padding", - value: current.paddingTop, - min: 0, - max: 100, - step: 1, - onchange: "changePadding" - })}
${createComponent("ToggleButton", { - compact: true, - key: "flexWrap", - ref: "$wrap", - checkedValue: "wrap", - value: this.state.flexWrap || FlexWrap.NOWRAP, - toggleLabels: [iconUse("wrap"), iconUse("wrap")], - toggleValues: [FlexWrap.NOWRAP, FlexWrap.WRAP], - onchange: "changeKeyValue" - })}
-
-
-
-
-
-
-
-
-
- ${[1, 2, 3].map(() => { - return ` -
-
-
-
-
- `; - }).join("\n")} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
${this.$i18n("flex.layout.editor.justify-content")}
- ${createComponent("SelectIconEditor", { - key: "justifyContent", - ref: "$justify", - value: this.state.justifyContent || JustifyContent.FLEX_START, - options: this.justifyContentOptions, - icons: [ - "start", - "end", - "horizontal_align_center", - "horizontal_distribute", - "justify_content_space_around" - ], - onchange: "changeKeyValue" - })} -
-
-
${this.$i18n("flex.layout.editor.align-items")}
- ${createComponent("SelectIconEditor", { - key: "alignItems", - ref: "$alignItems", - value: this.state.alignItems || AlignItems.FLEX_START, - options: this.alignItemsOptions, - icons: [ - "vertical_align_top", - "vertical_align_bottom", - "vertical_align_center", - "vertical_align_baseline", - "vertical_align_stretch" - ], - onchange: "changeKeyValue" - })} -
- `; + get translate() { + return [0, 0, 0]; } - template() { - return ` -
- `; + get scale() { + return [1, 1, 1]; } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - this.setState({ - [key]: value - }, false); - this.modifyData(key, value); - this.refresh(); + get rotate() { + return [0, 0, degreeToRadian(this.angle)]; } - [SUBSCRIBE_SELF("changePadding")](key, value) { - this.setState({ - [key]: value - }, false); - this.modifyData(key, { - paddingTop: value, - paddingLeft: value, - paddingRight: value, - paddingBottom: value - }); - this.refresh(); + get origin() { + return TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", this.screenWidth, this.screenHeight); } - [CLICK("$body .tool-area-item")](e) { - const $target = e.$dt; - const [justifyContent, alignItems] = $target.attrs("data-justify-content", "data-align-items", "data-align-content"); - if (this.state.justifyContent === JustifyContent.SPACE_BETWEEN) { - this.setState({ - alignItems - }, false); - this.modifyData("alignItems", alignItems); - } else if (this.state.justifyContent === JustifyContent.SPACE_AROUND) { - this.setState({ - alignItems - }, false); - this.modifyData("align-item", alignItems); - } else { - this.setState({ - justifyContent, - alignItems - }, false); - this.modifyData("justifyContent", justifyContent); - this.modifyData("alignItems", alignItems); - } - this.refresh(); + get absoluteOrigin() { + return vertiesMap([this.origin], this.absoluteMatrix)[0]; } -} -var GridBoxEditor$1 = ""; -const REG_CSS_UNIT = /(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi; -class GridBoxEditor extends EditorElement { - getLayoutItemOptions() { - return "none,auto,repeat,length".split(",").map((it) => { - return { value: it, text: this.$i18n(`grid.box.editor.${it}`) }; - }); + get quat() { + return fromEuler(create$1(), 0, 0, this.angle); } - initState() { + getAreaPosition(areaSize = 100) { + const verties = this.getVerties(); + const rect2 = toRectVerties(verties); + const [startRow, startColumn] = area(rect2[0][0], rect2[0][1], areaSize); + const [endRow, endColumn] = area(rect2[2][0], rect2[2][1], areaSize); return { - label: this.props.label, - list: this.parseValue(this.props.value) + column: [startColumn, endColumn], + row: [startRow, endRow] }; } - setValue(value) { - this.setState({ - list: this.parseValue(value) - }); - } - parseValue(value) { - let arr = null; - var target = []; - while ((arr = REG_CSS_UNIT.exec(value)) !== null) { - var text2 = arr[0]; - if (text2 === "auto") { - target.push({ type: "auto", count: 0, value: "0px" }); - } else if (text2.includes("repeat")) { - var tempArray = text2.split("repeat(")[1].split(")"); - tempArray.pop(); - let [count, ...size2] = tempArray.join("").split(","); - target.push({ type: "repeat", count, value: size2.join(", ") }); - } else { - target.push({ type: "length", count: 1, value: text2 }); - } + reset(obj2, context = { origin: "*" }) { + const isChanged = super.reset(obj2, context); + if (this.hasChangedField("children", "x", "y", "width", "height", "boxModel", "angle", "transformOrigin", "resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal") || this.changedLayout) { + this.refreshMatrixCache(); } - return target; - } - getValue() { - return this.state.list.map((it) => { - if (it.type === "repeat") { - return `repeat(${it.count}, ${it.value})`; - } else if (it.type === "auto" || it.type === "none") { - return it.type; - } else { - return it.value; - } - }).join(" "); + return isChanged; } - modifyData() { - this.parent.trigger(this.props.onchange, this.props.key, this.getValue()); + changed() { + super.changed(); + this.changedRect = this.hasChangedField("children", "x", "y", "width", "height", "angle", "transformOrigin", "resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal"); } - makeItem(it, index2) { - return ` -
-
- ${createComponent("SelectEditor", { - ref: `$${index2}-type`, - compact: true, - options: this.getLayoutItemOptions(), - key: "type", - value: it.type || "auto", - params: index2, - onchange: "changeKeyValue" - })} -
-
- ${createComponent("NumberInputEditor", { - compact: true, - ref: `$${index2}-count`, - key: "count", - value: it.count, - params: index2, - max: 1e3, - onchange: "changeKeyValue" - })} -
-
- ${createComponent("InputRangeEditor", { - ref: `$${index2}-value`, - compact: true, - key: "value", - value: it.value, - params: index2, - units: ["auto", "fr", "px", "em", "%"], - onchange: "changeKeyValue" - })} -
-
- - -
-
- `; + setParentId(otherParentId) { + super.setParentId(otherParentId); + this.refreshMatrixCache(); } - [LOAD("$list")]() { - return this.state.list.map((it, index2) => { - return this.makeItem(it, index2); + refreshMatrixCache() { + this.setCacheItemTransformMatrix(); + this.setCacheLocalTransformMatrix(); + this.setCacheAbsoluteMatrix(); + this.setCacheLocalVerties(); + this.setCacheVerties(); + this.setCacheGuideVerties(); + this.setCacheAreaPosition(); + this.layers.forEach((it) => { + it.refreshMatrixCache(); }); } - template() { - return ` -
-
-
-
- - -
-
${this.$i18n("grid.box.editor.count")}
-
${this.$i18n("grid.box.editor.value")}
-
-
-
-
-
- `; + setCacheItemTransformMatrix() { + this.addCache("itemTransform", this.getItemTransformMatrix()); + this.addCache("itemTransformInverse", invert([], this.getCache("itemTransform"))); } - [CLICK("$list .remove")](e) { - var index2 = +e.$dt.closest("item").attr("data-index"); - this.state.list.splice(index2, 1); - this.refresh(); - this.modifyData(); + setCacheLocalTransformMatrix() { + this.addCache("localTransform", this.getLocalTransformMatrix()); + this.addCache("localTransformInverse", invert([], this.getCache("localTransform"))); + this.addCache("transformWithTranslate", this.getTransformWithTranslate(this)); + this.addCache("transformWithTranslateInverse", invert([], this.getCache("transformWithTranslate"))); + this.addCache("transformWithTranslateTranspose", transpose([], this.getCache("transformWithTranslate"))); } - [CLICK("$list .copy")](e) { - var index2 = +e.$dt.closest("item").attr("data-index"); - var newObj = clone$1(this.state.list[index2]); - this.state.list.splice(index2, 0, newObj); - this.refresh(); - this.modifyData(); + setCacheAbsoluteMatrix() { + this.addCache("absoluteMatrix", this.getAbsoluteMatrix()); + this.addCache("absoluteMatrixInverse", invert([], this.getCache("absoluteMatrix"))); + this.addCache("relativeMatrix", this.getRelativeMatrix()); + this.addCache("relativeMatrixInverse", invert([], this.getCache("relativeMatrix"))); } - [CLICK("$add")]() { - this.trigger("add"); + setCacheVerties() { + this.addCache("verties", this.getVerties()); + this.addCache("contentVerties", this.getContentVerties()); + this.addCache("vertiesWithoutTransformOrigin", this.rectVerties()); } - [SUBSCRIBE("add")]() { - this.state.list.push({ type: "auto", count: 0, value: "0px" }); - this.refresh(); - this.modifyData(); + setCacheLocalVerties() { + this.addCache("localVerties", this.getLocalVerties()); } - [SUBSCRIBE_SELF("changeKeyValue")](key, value, params) { - var index2 = +params; - var item = this.state.list[index2]; - if (item) { - if (key === "type") { - this.refs.$list.$(`[data-index="${index2}"]`).attr("data-repeat-type", value); - } - item[key] = value; - } - this.modifyData(); + setCacheGuideVerties() { + this.addCache("guideVerties", this.getGuideVerties()); + this.addCache("xList", this.getXList()); + this.addCache("yList", this.getYList()); } -} -class GridGapEditor extends EditorElement { - initState() { - return { - label: this.props.label, - value: this.parseValue(this.props.value) - }; + setCacheAreaPosition() { + this.addCache("areaPosition", this.getAreaPosition(100)); } - setValue(value) { - this.setState({ - list: this.parseValue(value) + move(distVector = [0, 0, 0]) { + this.reset({ + x: round(this.offsetX + distVector[0]), + y: round(this.offsetY + distVector[1]) }); } - parseValue(value) { - return Length.parse(value); - } - getValue() { - return this.state.value; - } - modifyData() { - this.parent.trigger(this.props.onchange, this.props.key, this.getValue()); + moveByCenter(newCenter = [0, 0, 0]) { + this.reset({ + x: newCenter[0] - this.screenWidth / 2, + y: newCenter[1] - this.screenHeight / 2 + }); } - makeItem() { - return ` -
-
- ${createComponent("InputRangeEditor", { - label: this.state.label, - wide: true, - ref: "$value", - key: "value", - value: this.state.value, - max: 500, - units: ["px", "em", "%"], - onchange: "changeKeyValue" - })} -
-
- `; + absoluteMove(absoluteDist = [0, 0, 0]) { + var _a; + const oldVertex = this.verties[4]; + const newVertex = add$1([], oldVertex, absoluteDist); + const newVerties = vertiesMap([oldVertex, newVertex], ((_a = this.parent) == null ? void 0 : _a.absoluteMatrixInverse) || identity$3([])); + const newDist = subtract([], newVerties[1], newVerties[0]); + const oldPosition = this.attrs("x", "y"); + this.move(newDist); + return oldPosition; } - [LOAD("$list")]() { - return this.makeItem(); + startToCacheChildren() { } - template() { - return ` -
-
-
-
-
- `; + recoverChildren() { } - [SUBSCRIBE_SELF("changeKeyValue")](key, value) { - this.state.value = value; - this.modifyData(); + resize(width2, height2) { + this.startToCacheChildren(); + this.reset({ width: width2, height: height2 }); + this.recoverChildren(); } -} -var GridGrowToolView$1 = ""; -class Grid { - static parseStyle(value) { - const units = []; - parseValue(value).forEach((it) => { - switch (it.func) { - case FuncType.REPEAT: - for (var i = 0, len2 = it.parsed.count; i < len2; i++) { - units.push(it.parsed.length); - } - break; - case FuncType.LENGTH: - units.push(it.parsed); - break; - case FuncType.KEYWORD: - units.push(it.matchedString); - break; - } + setAngle(angle = 0) { + this.reset({ + angle }); - return units; } - static join(values = []) { - return values.join(" "); + addAngle(angle = 0) { + this.setAngle(this.angle + angle); } -} -class GridGrowBaseView extends EditorElement { - updateRows(current, newRows) { - const data = {}; - current.layers.forEach((it) => { - data[it.id] = { - gridRowStart: Math.max(1, Math.min(newRows.length, it.gridRowStart)), - gridRowEnd: Math.min(newRows.length + 1, it.gridRowEnd) - }; - }); - this.$commands.executeCommand("setAttribute", "change grid rows", __spreadProps(__spreadValues({}, data), { - [current.id]: { - gridTemplateRows: Grid.join(newRows) - } - })); + checkInArea(areaVerties) { + return polyPoly(areaVerties, this.originVerties); } - updateColumns(current, newColumns) { - const data = {}; - current.layers.forEach((it) => { - data[it.id] = { - gridColumnStart: Math.max(1, Math.min(newColumns.length, it.gridColumnStart)), - gridColumnEnd: Math.min(newColumns.length + 1, it.gridColumnEnd) - }; - }); - this.$commands.executeCommand("setAttribute", "change grid columns", __spreadProps(__spreadValues({}, data), { - [current.id]: { - gridTemplateColumns: Grid.join(newColumns) - } - })); + hasPoint(x, y) { + return this.isPointInRect(x, y); } - updateColumnGap(current, columnGap) { - this.$commands.executeCommand("setAttribute", "change grid column gap", { - [current.id]: { - gridColumnGap: `${columnGap}` - } - }); + isPointInRect(x, y) { + return polyPoint(this.originVerties, x, y); } - updateRowGap(current, rowGap) { - this.$commands.executeCommand("setAttribute", "change grid row gap", { - [current.id]: { - gridRowGap: `${rowGap}` - } - }); + isIncludeByArea(areaVerties) { + return this.originVerties.map((vector) => { + return polyPoint(areaVerties, ...vector); + }).filter(Boolean).length === 4; } - createNewGridItems(arr) { - let newArr = []; - if (arr.length === 0) { - newArr = [Length.fr(1)]; + getPerspectiveMatrix() { + const hasPerspective = this.perspective; + if (!hasPerspective) { + return void 0; + } + let [ + perspectiveOriginX = Length.percent(50), + perspectiveOriginY = Length.percent(50) + ] = TransformOrigin.parseStyle(this.perspectiveOrigin); + const width2 = this.screenWidth; + const height2 = this.screenHeight; + perspectiveOriginX = perspectiveOriginX.toPx(width2).value; + perspectiveOriginY = perspectiveOriginY.toPx(height2).value; + const view = create$4(); + translate(view, view, [perspectiveOriginX, perspectiveOriginY, 0]); + if (this.perspective && this.perspective != "none") { + multiply$1(view, view, fromValues$1(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -1 / Length.parse(this.perspective).value, 1)); } else { - newArr = [...arr, arr[arr.length - 1]]; + return void 0; } - return newArr; + translate(view, view, [-perspectiveOriginX, -perspectiveOriginY, 0]); + return view; } - copyNewGridItems(arr, index2) { - return [...arr.slice(0, index2 + 1), ...arr.slice(index2)]; + getItemTransformMatrix() { + const list2 = Transform.parseStyle(this.transform); + const width2 = this.screenWidth; + const height2 = this.screenHeight; + return Transform.createTransformMatrix(list2, width2, height2); } - getScaleDist(num) { - return num / this.$viewport.scale; + getItemTransformMatrixInverse() { + return invert([], this.getItemTransformMatrix()); } -} -class GridGrowClickEventView extends GridGrowBaseView { - checkTargetLayer() { - const current = this.getGridTargetLayer(); - if (!current) - return false; - if (current.isLayout(Layout.GRID) === false) - return false; - return true; + getLocalTransformMatrix(width2, height2) { + const origin = TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", isUndefined(width2) ? this.screenWidth : width2, isUndefined(height2) ? this.screenHeight : height2); + const view = create$4(); + translate(view, view, origin); + multiply$1(view, view, this.itemMatrix); + translate(view, view, negate([], origin)); + return view; } - [CLICK("$grid .column-plus") + IF("checkTargetLayer")]() { - const info = this.getGridLayoutInformation(); - this.updateColumns(info.current, this.createNewGridItems(info.columns)); + getLocalTransformMatrixInverse(width2, height2) { + return invert([], this.getLocalTransformMatrix(width2, height2)); } - [CLICK("$grid .row-plus") + IF("checkTargetLayer")]() { - const info = this.getGridLayoutInformation(); - this.updateRows(info.current, this.createNewGridItems(info.rows)); + getDirectionTransformMatrix(vertexOffset, width2, height2) { + const x = this.offsetX; + const y = this.offsetY; + const center2 = add$1([], TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", width2, height2), negate([], vertexOffset)); + const view = create$4(); + translate(view, view, [x, y, 0]); + translate(view, view, vertexOffset); + translate(view, view, center2); + multiply$1(view, view, this.itemMatrix); + translate(view, view, negate([], center2)); + return view; } - [CLICK("$grid .column-delete") + IF("checkTargetLayer")](e) { - const info = this.getGridLayoutInformation(); - if (info.columns.length < 2) { - this.alert("Alert", "Columns can not be less than one.", 2e3); - return; - } - const index2 = +e.$dt.data("index"); - const newColumns = [ - ...info.columns.slice(0, index2), - ...info.columns.slice(index2 + 1) - ]; - this.updateColumns(info.current, newColumns); + getDirectionTopLeftMatrix(width2, height2) { + return this.getDirectionTransformMatrix([0, 0, 0], width2, height2); } - [CLICK("$grid .column-add") + IF("checkTargetLayer")](e) { - const info = this.getGridLayoutInformation(); - const index2 = +e.$dt.data("index"); - this.updateColumns(info.current, this.copyNewGridItems(info.columns, index2), index2 + 1); + getDirectionLeftMatrix(width2, height2) { + return this.getDirectionTransformMatrix([0, height2 / 2, 0], width2, height2); } - [CLICK("$grid .row-add") + IF("checkTargetLayer")](e) { - const info = this.getGridLayoutInformation(); - const index2 = +e.$dt.data("index"); - this.updateRows(info.current, this.copyNewGridItems(info.rows, index2)); + getDirectionTopMatrix(width2, height2) { + return this.getDirectionTransformMatrix([width2 / 2, 0, 0], width2, height2); } - [CLICK("$grid .row-delete") + IF("checkTargetLayer")](e) { - const info = this.getGridLayoutInformation(); - if (info.rows.length < 2) { - this.alert("Alert", "Rows can not be less than one.", 2e3); - return; - } - const index2 = +e.$dt.data("index"); - const newRows = [ - ...info.rows.slice(0, index2), - ...info.rows.slice(index2 + 1) - ]; - this.updateRows(info.current, newRows); + getDirectionBottomLeftMatrix(width2, height2) { + return this.getDirectionTransformMatrix([0, height2, 0], width2, height2); } -} -class GridGrowDragEventView extends GridGrowClickEventView { - [POINTERSTART("$gridGap .gap-tool.column-gap") + IF("checkTargetLayer") + FIRSTMOVE("moveFirstColumnGap") + MOVE("moveColumnGap") + END("moveEndColumnGap")](e) { - const info = this.getGridLayoutInformation(); - this.current = info.current; - this.columnGap = info.columnGap; - this.lastColumnGap = info.columnGap; - this.initMousePosition = this.$viewport.getWorldPosition(e); + getDirectionTopRightMatrix(width2, height2) { + return this.getDirectionTransformMatrix([width2, 0, 0], width2, height2); } - updateGapPointer(gap) { - const screenPosition = this.$viewport.applyVertex(this.$viewport.getWorldPosition()); - this.refs.$pointer.text(`${gap}`); - this.refs.$pointer.css({ - left: Length.px(screenPosition[0]), - top: Length.px(screenPosition[1] + 20) - }); + getDirectionRightMatrix(width2, height2) { + return this.getDirectionTransformMatrix([width2, height2 / 2, 0], width2, height2); } - moveFirstColumnGap() { - this.refs.$pointer.show(); - this.updateGapPointer(this.columnGap); + getDirectionBottomRightMatrix(width2, height2) { + return this.getDirectionTransformMatrix([width2, height2, 0], width2, height2); } - moveColumnGap() { - const targetPosition = this.$viewport.getWorldPosition(); - const newDist = subtract([], targetPosition, this.initMousePosition); - const stepRate = newDist[0] / this.getScaleDist(100); - const columnGap = this.columnGap; - let newColumnGap = columnGap; - if (columnGap instanceof Length) { - if (columnGap.isPercent()) { - newColumnGap = Length.percent(Math.max(columnGap.value + stepRate * this.getScaleDist(5), 0)).round(1e3); - } else if (columnGap.isPx() || columnGap.isEm()) { - newColumnGap = Length.px(Math.max(columnGap.value + stepRate * this.getScaleDist(100), 0)).floor(); - } - } - this.lastColumnGap = newColumnGap; - this.updateColumnGap(this.current, newColumnGap); - this.updateGapPointer(this.lastColumnGap); + getDirectionBottomMatrix(width2, height2) { + return this.getDirectionTransformMatrix([width2 / 2, height2, 0], width2, height2); } - moveEndColumnGap() { - const targetPosition = this.$viewport.getWorldPosition(); - const realDistance = dist(targetPosition, this.initMousePosition); - if (realDistance < 1) { - if (this.lastColumnGap.isPx() || this.lastColumnGap.isEm()) { - this.lastColumnGap = Length.makePercent(this.lastColumnGap.value, this.current.screenWidth); - } else { - this.lastColumnGap = this.lastColumnGap.toPx(this.current.screenWidth); + getAbsoluteMatrix() { + let transform2 = create$4(); + if (this.parent) { + multiply$1(transform2, transform2, this.parent.absoluteMatrix); + if (isFunction(this.parent.getPerspectiveMatrix)) { + const perspectiveMatrix = this.parent.getPerspectiveMatrix(); + if (perspectiveMatrix) { + multiply$1(transform2, transform2, perspectiveMatrix); + } } } - this.updateColumnGap(this.current, this.lastColumnGap); - this.refs.$pointer.hide(); + multiply$1(transform2, transform2, this.getRelativeMatrix()); + if (transform2.filter((it) => !isNaN(it)).length === 0) { + return create$4(); + } + return transform2; } - [POINTERSTART("$gridGap .gap-tool.row-gap") + IF("checkTargetLayer") + FIRSTMOVE("moveFirstColumnGap") + MOVE("moveRowGap") + END("moveEndRowGap")](e) { - const info = this.getGridLayoutInformation(); - this.current = info.current; - this.rowGap = info.rowGap; - this.lastColumnGap = info.rowGap; - this.initMousePosition = this.$viewport.getWorldPosition(e); + getRelativeMatrix() { + let transform2 = create$4(); + const offsetX = this.offsetX; + const offsetY = this.offsetY; + translate(transform2, transform2, [offsetX, offsetY, 0]); + multiply$1(transform2, transform2, this.localMatrix); + return transform2; } - moveRowGap() { - const targetPosition = this.$viewport.getWorldPosition(); - const newDist = subtract([], targetPosition, this.initMousePosition); - const stepRate = newDist[1] / this.getScaleDist(100); - const rowGap = this.rowGap; - let newRowGap = rowGap; - console.log(rowGap); - if (rowGap instanceof Length) { - if (rowGap.isPercent()) { - newRowGap = Length.percent(Math.max(rowGap.value + stepRate * this.getScaleDist(5), 0)).round(1e3); - } else if (rowGap.isPx() || rowGap.isNumber()) { - newRowGap = Length.px(Math.max(rowGap.value + stepRate * this.getScaleDist(100), 0)).floor(); - } - } - this.lastRowGap = newRowGap; - this.updateRowGap(this.current, newRowGap); - this.updateGapPointer(this.lastRowGap); + getRelativeMatrixInverse() { + return invert([], this.getRelativeMatrix()); } - moveEndRowGap() { - const targetPosition = this.$viewport.getWorldPosition(); - const realDistance = dist(targetPosition, this.initMousePosition); - if (realDistance < 1) { - if (!this.lastRowGap) { - this.lastRowGap = Length.px(0); - } - if (this.lastRowGap.isPx() || this.lastRowGap.isNumber()) { - this.lastRowGap = Length.makePercent(this.lastRowGap.value, this.current.screenHeight); - } else { - this.lastRowGap = this.lastRowGap.toPx(this.current.screenHeight); - } - } - this.updateRowGap(this.current, this.lastRowGap); - this.refs.$pointer.hide(); + getTransformWithTranslate(item) { + item = item || this; + let view = create$4(); + const offsetX = item.offsetX; + const offsetY = item.offsetY; + translate(view, view, [offsetX, offsetY, 0]); + multiply$1(view, view, item.localMatrix); + return view; } - [POINTERSTART("$grid .grid-item-tool.column .item") + MOVE("moveColumn") + END("moveEndColumn")](e) { - const index2 = +e.$dt.data("index"); - const info = this.getGridLayoutInformation(); - this.current = info.current; - this.columns = info.columns; - this.selectedColumnIndex = index2; - this.selectedColumnWidth = info.columns[index2]; - this.initMousePosition = this.$viewport.getWorldPosition(e); + getAbsoluteMatrixInverse() { + return invert([], this.getAbsoluteMatrix()); } - moveColumn() { - const targetPosition = this.$viewport.getWorldPosition(); - const newDist = subtract([], targetPosition, this.initMousePosition); - const stepRate = newDist[0] / this.getScaleDist(100); - const columnWidth = this.selectedColumnWidth; - if (columnWidth instanceof Length) { - if (columnWidth.isPercent()) { - var newWidth = Math.max(columnWidth.value + stepRate * this.getScaleDist(5), 1); - this.columns[this.selectedColumnIndex] = Length.percent(newWidth).round(1e3); - } else if (columnWidth.isPx() || columnWidth.isNumber()) { - var newWidth = Math.max(10, columnWidth.value + stepRate * this.getScaleDist(100)); - this.columns[this.selectedColumnIndex] = Length.px(newWidth).floor(); - } else if (columnWidth.isFr()) { - var newWidth = Math.max(columnWidth.value + Math.floor(newDist[0] / this.getScaleDist(20)) * 0.25, 0.25); - this.columns[this.selectedColumnIndex] = Length.fr(newWidth); - } else { - var newWidth = Math.max(columnWidth.value + stepRate * 1, 10); - this.columns[this.selectedColumnIndex] = new Length(newWidth, columnWidth.unit); - } - this.updateColumns(this.current, this.columns); - } + getLocalVerties(width2, height2) { + width2 = isNotUndefined(width2) ? width2 : this.screenWidth; + height2 = isNotUndefined(height2) ? height2 : this.screenHeight; + let model = rectToVerties(0, 0, width2, height2, this.transformOrigin); + return model; } - changedColumnSize() { - const info = this.getGridLayoutInformation(); - const index2 = this.selectedColumnIndex; - const width2 = this.selectedColumnWidth; - if (width2 instanceof Length) { - if (width2.isPercent()) { - this.columns[index2] = Length.fr(1); - } else if (width2.isPx() || width2.isNumber()) { - this.columns[index2] = Length.makePercent(width2.value, info.current.screenWidth).round(1e3); - } else if (width2.isFr()) { - this.columns[index2] = "auto"; - } - } else if (width2 === "auto") { - const { items } = this.state.lastGridInfo; - const column = items.find((it) => it.column === index2 + 1); - this.columns[index2] = Length.px(column.rect.width).floor(); + getVerties(width2, height2) { + width2 = isNotUndefined(width2) ? width2 : this.screenWidth; + height2 = isNotUndefined(height2) ? height2 : this.screenHeight; + let x = 0; + let y = 0; + if (this.parent && this.parent.is("project") === false) { + const contentBox = this.parent.contentBox; + x = contentBox.x; + y = contentBox.y; } + let model = rectToVerties(x, y, width2, height2, this.transformOrigin); + return vertiesMap(model, this.absoluteMatrix); } - moveEndColumn() { - const targetPosition = this.$viewport.getWorldPosition(); - const realDistance = dist(targetPosition, this.initMousePosition); - if (realDistance < 1) { - this.changedColumnSize(); - } - this.updateColumns(this.current, this.columns); + getContentVerties(width2, height2) { + width2 = isNotUndefined(width2) ? width2 : this.screenWidth; + height2 = isNotUndefined(height2) ? height2 : this.screenHeight; + const center2 = TransformOrigin.scale(this.transformOrigin, width2, height2); + const paddingTop = this.get("padding-top") || 0; + const paddingRight = this.get("padding-right") || 0; + const paddingBottom = this.get("padding-bottom") || 0; + const paddingLeft = this.get("padding-left") || 0; + const model = rectToVerties(0 + paddingLeft, 0 + paddingTop, width2 - paddingLeft - paddingRight, height2 - paddingTop - paddingBottom, this.transformOrigin); + model[4] = center2; + return vertiesMap(model, this.absoluteMatrix); } - [POINTERSTART("$grid .grid-item-tool.row .item") + MOVE("moveRow") + END("moveEndRow")](e) { - const index2 = +e.$dt.data("index"); - const info = this.getGridLayoutInformation(); - this.current = info.current; - this.rows = info.rows; - this.selectedRowIndex = index2; - this.selectedRowHeight = info.rows[index2]; - this.initMousePosition = this.$viewport.getWorldPosition(e); + rectVerties() { + return this.verties.filter((_, index2) => index2 < 4); } - moveRow() { - const targetPosition = this.$viewport.getWorldPosition(); - const newDist = subtract([], targetPosition, this.initMousePosition); - const stepRate = newDist[1] / this.getScaleDist(30); - const rowHeight = this.selectedRowHeight; - if (rowHeight instanceof Length) { - if (rowHeight.isPercent()) { - var newHeight = Math.max(rowHeight.value - stepRate * this.getScaleDist(5), 1); - this.rows[this.selectedRowIndex] = Length.percent(newHeight).round(1e3); - } else if (rowHeight.isPx() || rowHeight.isNumber()) { - var newHeight = Math.max(10, rowHeight.value - stepRate * this.getScaleDist(100)); - this.rows[this.selectedRowIndex] = Length.px(newHeight).floor(); - } else if (rowHeight.isFr()) { - var newHeight = Math.max(rowHeight.value + Math.floor(newDist[1] / this.getScaleDist(20)) * 0.25, 0.25); - this.rows[this.selectedRowIndex] = Length.fr(newHeight); - } else { - var newHeight = Math.max(rowHeight.value - stepRate * 1, 10); - this.rows[this.selectedRowIndex] = new Length(newHeight, rowHeight.unit); - } - this.updateRows(this.current, this.rows); + getGuideVerties() { + const verties = this.originVerties; + return [ + ...verties, + lerp([], verties[0], verties[1], 0.5), + lerp([], verties[1], verties[2], 0.5), + lerp([], verties[2], verties[3], 0.5), + lerp([], verties[3], verties[0], 0.5) + ]; + } + getXList() { + return [...new Set(this.guideVerties.map((it) => it[0]))]; + } + getYList() { + return [...new Set(this.guideVerties.map((it) => it[1]))]; + } + get nestedAngle() { + if (this.parent) { + return this.parent.nestedAngle + this.angle; } + return this.angle || 0; + } + get toRectVerties() { + return itemsToRectVerties([this]); + } + get matrix() { + const id = this.id; + const x = this.offsetX; + const y = this.offsetY; + const width2 = this.screenWidth; + const height2 = this.screenHeight; + const originalTransform = this.transform; + const originalTransformOrigin = this.transformOrigin || "50% 50% 0px"; + const transformOriginMatrix = this.getTransformOriginMatrix(); + const transformOriginMatrixInverse = this.getTransformOriginMatrixInverse(); + const parentMatrix = this.parent.absoluteMatrix; + const parentMatrixInverse = this.parent.absoluteMatrixInverse; + const localMatrix = this.localMatrix; + const localMatrixInverse = this.localMatrixInverse; + const itemMatrix = this.itemMatrix; + const itemMatrixInverse = this.itemMatrixInverse; + const absoluteMatrix = this.absoluteMatrix; + const absoluteMatrixInverse = this.absoluteMatrixInverse; + const relativeMatrix = this.relativeMatrix; + const relativeMatrixInverse = this.relativeMatrixInverse; + const directionMatrix = { + "to top left": this.getDirectionTopLeftMatrix(width2, height2), + "to top": this.getDirectionTopMatrix(width2, height2), + "to top right": this.getDirectionTopRightMatrix(width2, height2), + "to right": this.getDirectionRightMatrix(width2, height2), + "to bottom left": this.getDirectionBottomLeftMatrix(width2, height2), + "to bottom": this.getDirectionBottomMatrix(width2, height2), + "to bottom right": this.getDirectionBottomRightMatrix(width2, height2), + "to left": this.getDirectionLeftMatrix(width2, height2) + }; + const verties = this.verties; + const xList = verties.map((it) => it[0]); + const yList = verties.map((it) => it[1]); + return { + id, + x, + y, + width: width2, + height: height2, + transform: originalTransform, + originalTransformOrigin, + verties, + originVerties: this.originVerties, + xList, + yList, + directionMatrix, + parentMatrix, + parentMatrixInverse, + localMatrix, + localMatrixInverse, + itemMatrix, + itemMatrixInverse, + absoluteMatrix, + absoluteMatrixInverse, + relativeMatrix, + relativeMatrixInverse, + transformOriginMatrix, + transformOriginMatrixInverse + }; + } + absolutePath(pathString2 = "") { + const d = pathString2 || this.d; + const pathParser = new PathParser(d); + pathParser.transformMat4(this.absoluteMatrix); + return pathParser; } - changedRowSize() { - const info = this.getGridLayoutInformation(); - const index2 = this.selectedRowIndex; - const height2 = this.selectedRowHeight; - if (height2 instanceof Length) { - if (height2.isPercent()) { - this.rows[index2] = Length.fr(1); - } else if (height2.isPx() || height2.isNumber()) { - this.rows[index2] = Length.makePercent(height2.value, info.current.screenHeight).round(1e3); - } else if (height2.isFr()) { - this.rows[index2] = "auto"; - } - } else if (height2 === "auto") { - const { items } = this.state.lastGridInfo; - const row = items.find((it) => it.row === index2 + 1); - this.rows[index2] = Length.px(row.rect.height).floor(); - } + invertPath(pathString2 = "") { + const path = new PathParser(pathString2); + path.transformMat4(this.absoluteMatrixInverse); + return path; } - moveEndRow() { - const targetPosition = this.$viewport.getWorldPosition(); - const realDistance = dist(targetPosition, this.initMousePosition); - if (realDistance < 1) { - this.changedRowSize(); - } - this.updateRows(this.current, this.rows); + invertPoint(point2) { + return transformMat4([], point2, this.absoluteMatrixInverse); } -} -class GridGrowToolView extends GridGrowDragEventView { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--grid-grow-tool-view" - }, /* @__PURE__ */ createElementJsx("div", { - class: "layout-rect", - ref: "$grid" - }), /* @__PURE__ */ createElementJsx("div", { - class: "layout-rect blank-tool", - ref: "$gridGap" - }), /* @__PURE__ */ createElementJsx("div", { - class: "layout-pointer", - ref: "$pointer" - })); + invertPathString(pathString2 = "") { + return this.invertPath(pathString2).d; } - [BIND("$el")]() { - var _a; - const current = this.getGridTargetLayer(); + updatePath(d) { + const matrix = this.matrix; + const newPath = new PathParser(d); + let bbox = newPath.getBBox(); + const newWidth = distance$1(bbox[1], bbox[0]); + const newHeight = distance$1(bbox[3], bbox[0]); + let oldBBox = vertiesMap(rectToVerties(bbox[0][0], bbox[0][1], newWidth, newHeight), matrix.absoluteMatrix); + let newBBox = vertiesMap(oldBBox, calculateMatrixInverse(fromTranslation([], oldBBox[4]), Transform.createTransformMatrix(Transform.parseStyle(matrix.transform), newWidth, newHeight), fromTranslation([], negate([], oldBBox[4])))); + const worldMatrix = calculateMatrix(fromTranslation([], newBBox[0]), this.getLocalTransformMatrix(newWidth, newHeight)); + const realXY = getTranslation([], calculateMatrix(matrix.parentMatrixInverse, worldMatrix, invert([], this.getLocalTransformMatrix(newWidth, newHeight)))); return { - "data-drag-target-item": Boolean(this.$context.selection.dragTargetItem), - "data-grid-layout-own": ((_a = this.$context.selection.current) == null ? void 0 : _a.id) === (current == null ? void 0 : current.id), - style: { - display: current ? "block" : "none" - } + d: newPath.translate(-bbox[0][0], -bbox[0][1]).d, + x: realXY[0], + y: realXY[1], + width: newWidth, + height: newHeight }; } - [BIND("$grid")]() { - const current = this.getGridTargetLayer(); - if (!current) - return ""; - if (current.isLayout(Layout.GRID) === false) - return ""; - const rect2 = vertiesToRectangle(this.$viewport.applyVerties(current.verties)); - const info = this.getGridLayoutInformation(); - const [paddingTop, paddingRight, paddingBottom, paddingLeft] = this.getScaledInformation([ - Length.px(info.current.paddingTop), - Length.px(info.current.paddingRight), - Length.px(info.current.paddingBottom), - Length.px(info.current.paddingLeft) - ]); - const columns = this.getScaledInformation(info.columns); - const rows = this.getScaledInformation(info.rows); - const columnGap = this.getScaledLength(info.columnGap); - const rowGap = this.getScaledLength(info.rowGap); - const origin = subtract([], current.verties[1], current.verties[0]); - const angle = calculateAngle360(origin[0], origin[1]) - 180; - return { - style: { - display: "grid", - "grid-template-columns": Grid.join(columns), - "grid-template-rows": Grid.join(rows), - "grid-column-gap": columnGap, - "grid-row-gap": rowGap, - left: Length.px(rect2.left), - top: Length.px(rect2.top), - width: Length.px(rect2.width), - height: Length.px(rect2.height), - "padding-top": paddingTop, - "padding-right": paddingRight, - "padding-bottom": paddingBottom, - "padding-left": paddingLeft, - "transform-origin": "left top", - transform: `rotate(${angle}deg)` - } - }; + checkInAreaForAll(areaVerties) { + const items = [...this.checkInAreaForLayers(areaVerties)]; + if (this.is("artboard")) + return items; + if (this.is("project")) + return items; + if (this.checkInArea(areaVerties)) { + items.push(this); + } + return items; } - [BIND("$gridGap")]() { - const current = this.getGridTargetLayer(); - if (!current) - return ""; - if (current.isLayout(Layout.GRID) === false) - return ""; - const rect2 = vertiesToRectangle(this.$viewport.applyVerties(current.verties)); - const origin = subtract([], current.verties[1], current.verties[0]); - const angle = calculateAngle360(origin[0], origin[1]) - 180; - return { - style: { - left: Length.px(rect2.left), - top: Length.px(rect2.top), - width: Length.px(rect2.width), - height: Length.px(rect2.height), - "transform-origin": "left top", - transform: `rotate(${angle}deg)` + checkInAreaForLayers(areaVerties) { + var items = []; + this.layers.forEach((layer) => { + items.push.apply(items, layer.checkInAreaForLayers(areaVerties)); + if (layer.checkInArea(areaVerties)) { + items.push(layer); } - }; + }); + return items; } - getScaledInformation(arr) { - return arr.map((it) => this.getScaledLength(it)); + getTransformOriginMatrix() { + return fromTranslation([], TransformOrigin.scale(this.transformOrigin || "50% 50% 0px", this.screenWidth, this.screenHeight)); } - getScaledLength(it) { - if (isString(it)) { - return it; - } else if (it instanceof Length) { - if (it.isPx() || it.isNumber()) { - return it.clone().mul(this.$viewport.scale); - } + getTransformOriginMatrixInverse() { + return invert([], this.getTransformOriginMatrix()); + } + recoverMatrix(newChildMatrix) { + const matrix = calculateMatrix(this.absoluteMatrixInverse, newChildMatrix.absoluteMatrix); + const q = getRotation([], matrix); + const axis = []; + const rad = getAxisAngle(axis, q); + const angle = axis[2] ? radianToDegree(rad * axis[2]) : 0; + const newTransformMatrix = create$4(); + fromRotation(newTransformMatrix, rad, axis); + const [x, y] = getTranslation([], calculateMatrix(matrix, calculateMatrixInverse(newChildMatrix.transformOriginMatrix, newTransformMatrix, newChildMatrix.transformOriginMatrixInverse))); + return { x, y, angle }; + } + resetMatrix(childItem) { + const matrix = calculateMatrix(this.absoluteMatrixInverse, childItem.absoluteMatrix); + const q = getRotation([], matrix); + const axis = []; + const rad = getAxisAngle(axis, q); + const angle = axis[2] ? radianToDegree(rad * axis[2]) : 0; + const newTransformMatrix = create$4(); + fromRotation(newTransformMatrix, rad, axis); + const [x, y] = getTranslation([], calculateMatrix(matrix, calculateMatrixInverse(childItem.getTransformOriginMatrix(), newTransformMatrix, childItem.getTransformOriginMatrixInverse()))); + childItem.reset({ x, y, angle }); + this.manager.setChanged("resetMatrix", this.id, { + end: true, + childItemId: childItem == null ? void 0 : childItem.id + }); + } + setOrder(targetIndex) { + var parent = this.parent; + var startIndex = this.index; + if (startIndex > -1) { + parent.children[startIndex] = parent.children[targetIndex]; + parent.children[targetIndex] = this.id; + this.manager.setChanged("setOrder", this.id, { + targetIndex, + startIndex, + parentId: parent.id + }); } - return it; } - getGridTargetLayer() { - if (this.$context.selection.dragTargetItem) { - return this.$context.selection.dragTargetItem; + orderNext() { + if (this.isLast) { + if (this.parent.next) { + let next = this.parent.next; + if (next.enableHasChildren()) { + next.appendChild(this); + } else { + next.insertAfter(this); + } + } + return; + } + var startIndex = this.index; + if (startIndex > -1) { + this.setOrder(startIndex + 1); } - const current = this.$context.selection.current; - if (!current) - return null; - if (current.isLayout(Layout.GRID)) - return current; - const parent = current.parent; - if (parent && parent.is("project")) - return null; - if (parent && parent.isLayout(Layout.GRID)) - return parent; - return null; } - getParsedValue(it) { - if (it === "auto") { - return it; + orderPrev() { + if (this.isFirst) { + const prev = this.parent.prev; + if (prev) { + prev.insertBefore(this); + } + return; + } + var startIndex = this.index; + if (startIndex > 0) { + this.setOrder(startIndex - 1); } - return Length.parse(it); } - getGridLayoutInformation() { - const current = this.getGridTargetLayer(); - const columns = Grid.parseStyle(current.gridTemplateColumns); - const rows = Grid.parseStyle(current.gridTemplateRows); - return { - current, - columns, - columnGap: this.getParsedValue(current.gridColumnGap), - rows, - rowGap: this.getParsedValue(current.gridRowGap) - }; + orderFirst() { + this.setOrder(0); } - afterLoadRendering(targetRef, refName) { - this.trigger("refreshGridInformation", targetRef, refName); + orderLast() { + this.setOrder(this.parent.childrenLength - 1); } - [SUBSCRIBE_SELF("refreshGridInformation") + DEBOUNCE(10)](targetRef, refName) { - const current = this.getGridTargetLayer(); - if (!current) - return; - if (current.isLayout(Layout.GRID) === false) - return; - if (refName !== "$grid") - return; - const info = this.getGridLayoutInformation(); - const scale2 = this.$viewport.scale; - const items = targetRef.$$(".grid-item").map((it) => { - const [row, column] = it.attrs("data-row", "data-column").map((it2) => +it2); - const { x, y, width: width2, height: height2 } = it.offsetRect(); - const rect2 = { - x: x / scale2, - y: y / scale2, - width: width2 / scale2, - height: height2 / scale2 - }; - const verties = vertiesMap(rectToVerties(rect2.x, rect2.y, rect2.width, rect2.height), info.current.absoluteMatrix); - const originVerties = verties.filter((_, index2) => index2 < 4); - return { - row, - column, - rect: rect2, - info, - verties, - originVerties, - originRect: vertiesToRectangle(originVerties) - }; - }); - this.state.lastGridInfo = { info, items }; - this.load("$gridGap"); - this.$context.selection.updateGridInformation({ - info, - items - }); + orderTop() { } - [LOAD("$gridGap") + DOMDIFF]() { - const current = this.getGridTargetLayer(); - if (!current) - return ""; - if (this.$config.true("set.move.control.point")) - return ""; - if (!this.$context.selection.current) - return ""; - const last = this.state.lastGridInfo; - const scale2 = this.$viewport.scale; - if (!last) - return ""; - const { info, items } = last; - const { columns, rows } = info; - const result = []; - const rowItems = items.filter((it) => it.column === 1); - const columnItems = items.filter((it) => it.row === 1); - const minY = Math.min(...rowItems.map((it) => it.verties[0][1])); - const maxY = Math.max(...rowItems.map((it) => it.verties[2][1])); - const h = maxY - minY; - for (var columnIndex = 1, len2 = columns.length; columnIndex < len2 && columnItems.length; columnIndex++) { - const prevCell = columnItems[columnIndex - 1]; - const cell = columnItems[columnIndex]; - const x = prevCell.rect.x + prevCell.rect.width; - const w2 = cell.rect.x - x; - const y = prevCell.rect.y; - result.push({ - type: "column-gap", - index: columnIndex, - x, - y, - width: w2, - height: h - }); - } - const minX = Math.min(...columnItems.map((it) => it.verties[0][0])); - const maxX = Math.max(...columnItems.map((it) => it.verties[2][0])); - const w = maxX - minX; - for (var rowIndex = 1, len2 = rows.length; rowIndex < len2; rowIndex++) { - const prevCell = rowItems[rowIndex - 1]; - const cell = rowItems[rowIndex]; - const y = prevCell.rect.y + prevCell.rect.height; - const h2 = cell.rect.y - y; - const x = prevCell.rect.x; - result.push({ - type: "row-gap", - index: rowIndex, - x, - y, - width: w, - height: h2 - }); + orderBottom() { + } +} +const LayoutEngine = { + [Layout.DEFAULT]: DefaultLayoutEngine, + [Layout.GRID]: GridLayoutEngine +}; +class GroupModel extends MovableModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + layout: Layout.DEFAULT, + constraintsHorizontal: Constraints.NONE, + constraintsVertical: Constraints.NONE, + flexDirection: FlexDirection.ROW, + flexWrap: FlexWrap.NOWRAP, + justifyContent: JustifyContent.FLEX_START, + alignItems: AlignItems.FLEX_START, + alignContent: AlignContent.FLEX_START, + order: 0, + flexGrow: 0, + flexShrink: 0, + flexBasis: "auto", + gap: 0, + resizingHorizontal: ResizingMode.FIXED, + resizingVertical: ResizingMode.FIXED, + gridTemplateRows: "auto", + gridColumnGap: "0px", + gridTemplateColumns: "auto", + gridRowGap: "0px", + gridTemplateAreas: "", + gridAutoRows: "auto", + gridAutoColumns: "auto", + gridAutoFlow: "row" + }, obj2)); + } + reset(obj2, context = { origin: "*" }) { + const isChanged = super.reset(obj2, context); + if (this.hasChangedField("resizingVertical", "resizingHorizontal", "contraintsVertical", "contraintsHorizontal") || this.changedLayout) { + this.refreshResizableCache(); } - return result.map((it) => { - if (it.type === "column-gap") { - return /* @__PURE__ */ createElementJsx("div", { - class: "gap-tool column-gap", - style: { - left: Length.px(it.x * scale2), - top: Length.px(it.y * scale2), - width: Length.px(Math.max(it.width * scale2, 5)), - height: Length.px(it.height * scale2) - } - }); - } else if (it.type === "row-gap") { - return /* @__PURE__ */ createElementJsx("div", { - class: "gap-tool row-gap", - style: { - left: Length.px(it.x * scale2), - top: Length.px(it.y * scale2), - height: Length.px(Math.max(it.height * scale2, 5)), - width: Length.px(it.width * scale2) - } - }); - } - return ""; - }); + return isChanged; } - isSelectedColumn(index2) { - const current = this.$context.selection.current; - return current.gridColumnStart <= index2 && index2 < current.gridColumnEnd; + refreshResizableCache() { + this.addCache("resizable", this.getAutoResizable()); } - isSelectedRow(index2) { - const current = this.$context.selection.current; - return current.gridRowStart <= index2 && index2 < current.gridRowEnd; + get autoResizable() { + return this.getCache("resizable"); } - [LOAD("$grid") + DOMDIFF]() { - var _a; - const current = this.getGridTargetLayer(); - if (!current) - return ""; - if (current.isLayout(Layout.GRID) === false) - return ""; - const info = this.getGridLayoutInformation(); - const totalCount = info.columns.length * info.rows.length; - const isChild = ((_a = this.$context.selection.current) == null ? void 0 : _a.id) !== info.current.id; - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, Array.from(Array(info.columns.length).keys()).map((index2) => { - const selected = isChild && this.isSelectedColumn(index2 + 1) ? "selected" : ""; - return /* @__PURE__ */ createElementJsx("div", { - class: `grid-item-tool column ${selected}`, - "data-index": index2, - style: { - "grid-column": `${index2 + 1} / span 1`, - "grid-row": `1 / span 1` - } - }, /* @__PURE__ */ createElementJsx("div", { - class: "grid-item-tool-inner" - }, /* @__PURE__ */ createElementJsx("div", { - class: "item", - "data-index": index2 - }, /* @__PURE__ */ createElementJsx("span", null, info.columns[index2])), /* @__PURE__ */ createElementJsx("div", { - class: "drag-handle right" - }, /* @__PURE__ */ createElementJsx("div", { - class: "column-delete", - "data-index": index2, - title: `Delete ${info.columns[index2]}` - }, iconUse("close")), /* @__PURE__ */ createElementJsx("div", { - class: "column-add", - "data-index": index2, - title: `Add ${info.columns[index2]}` - }, iconUse("add"))))); - }), /* @__PURE__ */ createElementJsx("div", { - class: "grid-item-tool append column-plus", - style: { - "grid-column": `${info.columns.length} / span 1`, - "grid-row": `1 / span 1` - } - }, iconUse("add")), Array.from(Array(info.rows.length).keys()).map((index2) => { - const selected = isChild && this.isSelectedRow(index2 + 1) ? "selected" : ""; - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { - class: `grid-item-tool row ${selected}`, - style: { - "grid-row": `${index2 + 1} / span 1`, - "grid-column": `1 / span 1` - } - }, /* @__PURE__ */ createElementJsx("div", { - class: "grid-item-tool-inner" - }, /* @__PURE__ */ createElementJsx("div", { - class: "item", - "data-index": index2 - }, /* @__PURE__ */ createElementJsx("span", null, info.rows[index2])), /* @__PURE__ */ createElementJsx("div", { - class: "drag-handle bottom" - }, /* @__PURE__ */ createElementJsx("div", { - class: "row-delete", - "data-index": index2, - title: `Delete ${info.rows[index2]}` - }, iconUse("close")), /* @__PURE__ */ createElementJsx("div", { - class: "row-add", - "data-index": index2, - title: `Add ${info.rows[index2]}` - }, iconUse("add")))))); - }), /* @__PURE__ */ createElementJsx("div", { - class: "grid-item-tool append row-plus", - style: { - "grid-row": `${info.rows.length} / span 1`, - "grid-column": `1 / span 1` - } - }, iconUse("add")), Array.from(Array(totalCount).keys()).map((i) => { - const column = i % info.columns.length; - const row = Math.floor(i / info.columns.length); - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { - class: "grid-item", - "data-row": row + 1, - "data-column": column + 1, - style: { - "grid-column": `${column + 1} / span 1`, - "grid-row": `${row + 1} / span 1` - } - })); - })); + getAutoResizable() { + if (this.parent.is("project")) { + return false; + } + if (this.resizingHorizontal === ResizingMode.FIXED && this.resizingVertical === ResizingMode.FIXED) { + if (this.constraintsHorizontal === Constraints.NONE && this.constraintsVertical === Constraints.NONE) { + return false; + } + } + return true; } - [SUBSCRIBE("refreshGridToolInfo")]() { - this.refresh(); + get layout() { + return this.get("layout"); } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); + get constraintsHorizontal() { + return this.get("constraintsHorizontal"); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refresh(); + set constraintsHorizontal(value) { + this.reset({ + constraintsHorizontal: value + }); } - [SUBSCRIBE(UPDATE_CANVAS)]() { - this.refresh(); + get constraintsVertical() { + return this.get("constraintsVertical"); } -} -var GridLayoutEditor$1 = ""; -class GridLayoutEditor extends EditorElement { - modifyData(key, value) { - this.parent.trigger(this.props.onchange, key, value); + set constraintsVertical(value) { + this.reset({ + constraintsVertical: value + }); } - template() { - return ` -
- `; + get flexDirection() { + return this.get("flexDirection"); } - [LOAD("$body") + DOMDIFF]() { - const current = this.$context.selection.current; - if (!current) - return ""; - if (current.isLayout(Layout.GRID) === false) - return ""; - return ` -
- ${createComponent("NumberInputEditor", { - wide: true, - label: "grid padding", - key: "padding", - ref: "$padding", - value: current.paddingTop, - min: 0, - max: 300, - step: 1, - onchange: "changePadding" - })} -
-
- ${createComponent("GridGapEditor", { - label: this.$i18n("grid.layout.editor.column.gap"), - ref: "$columnGap", - key: "gridColumnGap", - value: current.gridColumnGap || "", - onchange: "changeKeyValue" - })} -
-
- ${createComponent("GridGapEditor", { - label: this.$i18n("grid.layout.editor.row.gap"), - ref: "$rowGap", - key: "gridRowGap", - value: current.gridRowGap || "", - onchange: "changeKeyValue" - })} -
- `; + set flexDirection(value) { + this.reset({ + flexDirection: value + }); } - [SUBSCRIBE_SELF("changePadding")](key, value) { - this.modifyData(key, { - paddingTop: value, - paddingLeft: value, - paddingRight: value, - paddingBottom: value + get flexWrap() { + return this.get("flexWrap"); + } + set flexWrap(value) { + this.reset({ + flexWrap: value }); } - [SUBSCRIBE_SELF("changeKeyValue")](key, value, params) { - this.modifyData(key, value, params); + get justifyContent() { + return this.get("justifyContent"); } -} -var LayoutProperty$1 = ""; -class LayoutProperty extends BaseProperty { - getTitle() { - return this.$i18n("layout.property.title"); + set justifyContent(value) { + this.reset({ + justifyContent: value + }); } - getClassName() { - return "elf--layout-property"; + get alignItems() { + return this.get("alignItems"); } - getBody() { - return ` -
- `; + set alignItems(value) { + this.reset({ + alignItems: value + }); } - getTools() { - return ` -
- `; + get alignContent() { + return this.get("alignContent"); } - [LOAD("$layoutType")]() { - const current = this.$context.selection.current; - if (!current) - return ""; - return createComponent("SelectIconEditor", { - ref: "$layout", - key: "layout", - height: 24, - value: current.layout, - options: [Layout.DEFAULT, Layout.FLEX, Layout.GRID], - icons: ["layout_default", "layout_flex", "layout_grid"], - onchange: "changeLayoutType" + set alignContent(value) { + this.reset({ + alignContent: value }); } - [LOAD("$layoutProperty") + DOMDIFF]() { - var current = this.$context.selection.current || { layout: "default" }; - return ` -
-
-
- ${createComponent("FlexLayoutEditor", { - ref: "$flex", - key: "flex-layout", - value: { - flexDirection: current.flexDirection, - flexWrap: current.flexWrap, - justifyContent: current.justifyContent, - alignItems: current.alignItems, - alignContent: current.alignContent, - gap: current.gap - }, - onchange: "changeLayoutInfo" - })} -
-
- ${createComponent("GridLayoutEditor", { - ref: "$grid", - key: "grid-layout", - value: current["grid-layout"] || "", - onchange: "changeLayoutInfo" - })} -
-
- `; + get order() { + return this.get("order"); } - [SUBSCRIBE_SELF("changeLayoutInfo")](key, value) { - if (key === "padding") { - this.$commands.executeCommand("setAttribute", "change padding", this.$context.selection.packByValue(value)); - } else { - this.$commands.executeCommand("setAttribute", "change layout info", this.$context.selection.packByValue({ - [key]: value - })); - } - this.nextTick(() => { - this.emit("refreshAllElementBoundSize"); + set order(value) { + this.reset({ + order: value }); } - [SUBSCRIBE_SELF("changeLayoutType")](key, value) { - this.$context.selection.reset(this.$context.selection.packByValue({ - [key]: value - })); - this.updateTitle(); - this.$commands.executeCommand("setAttribute", "change layout type", this.$context.selection.packByValue({ - [key]: value - })); - this.nextTick(() => { - this.refresh(); + get flexGrow() { + return this.get("flexGrow"); + } + set flexGrow(value) { + this.reset({ + flexGrow: value }); } - get editableProperty() { - return "layout"; + get flexShrink() { + return this.get("flexShrink"); } - enableHasChildren() { - return this.$context.selection.current.enableHasChildren(); + set flexShrink(value) { + this.reset({ + flexShrink: value + }); } - updateTitle() { - this.setTitle(this.$context.selection.current.layout + " Layout"); + get flexBasis() { + return this.get("flexBasis"); } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + IF("enableHasChildren")]() { - this.updateTitle(); - this.refresh(); + set flexBasis(value) { + this.reset({ + flexBasis: value + }); } -} -var ResizingItemProperty$1 = ""; -class ResizingItemProperty extends BaseProperty { - getTitle() { - return this.$i18n("layout.property.resizing.self.title"); + get gap() { + return this.get("gap"); } - getClassName() { - return "elf--resizing-item-property"; + set gap(value) { + this.reset({ + gap: value + }); } - getBody() { - return ` -
-
-
-
-
-
- `; + get resizingHorizontal() { + return this.get("resizingHorizontal"); } - [LOAD("$resizingModeInfo") + DOMDIFF]() { - var current = this.$context.selection.current || {}; - const h = current.resizingHorizontal || ResizingMode.FIXED; - const v = current.resizingVertical || ResizingMode.FIXED; - return ` -
-
-
-
-
${iconUse("keyboard_arrow_up")}
-
${iconUse("keyboard_arrow_down")}
-
-
-
${iconUse("keyboard_arrow_left")}
-
${iconUse("keyboard_arrow_right")}
-
-
-
-
- -
- `; + set resizingHorizontal(value) { + this.reset({ + resizingHorizontal: value + }); } - makeOptionsForHorizontal() { - const options2 = [ - { value: ResizingMode.FIXED, text: "Fixed Width" }, - { value: ResizingMode.FILL_CONTAINER, text: "Fill Container" } - ]; - return options2; + get resizingVertical() { + return this.get("resizingVertical"); } - makeOptionsForVertical() { - const options2 = [ - { value: ResizingMode.FIXED, text: "Fixed Height" }, - { value: ResizingMode.FILL_CONTAINER, text: "Fill Container" } - ]; - return options2; + set resizingVertical(value) { + this.reset({ + resizingVertical: value + }); } - [LOAD("$resizingModeInfoInput") + DOMDIFF]() { - var current = this.$context.selection.current || {}; - this.setState({ - resizingHorizontal: (current == null ? void 0 : current.resizingHorizontal) || ResizingMode.FIXED, - resizingVertical: (current == null ? void 0 : current.resizingVertical) || ResizingMode.FIXED - }, false); - return ` -
- - ${createComponent("SelectEditor", { - ref: "$resizingHorizontal", - key: "resizingHorizontal", - value: this.state.resizingHorizontal, - options: this.makeOptionsForHorizontal(), - onchange: "changeResizingMode" - })} -
- -
- - ${createComponent("SelectEditor", { - ref: "$resizingVertical", - key: "resizingVertical", - value: this.state.resizingVertical, - options: this.makeOptionsForVertical(), - onchange: "changeResizingMode" - })} -
- `; + get gridTemplateRows() { + return this.get("gridTemplateRows"); } - [CLICK("$resizingModeInfo [data-key]")](e) { - const key = e.$dt.data("key"); - const current = this.$context.selection.current; - if (current[key] === ResizingMode.FIXED) { - this.trigger("changeResizingMode", key, ResizingMode.FILL_CONTAINER); - } else { - this.trigger("changeResizingMode", key, ResizingMode.FIXED); - } + set gridTemplateRows(value) { + this.reset({ + gridTemplateRows: value + }); } - [SUBSCRIBE_SELF("changeResizingMode")](key, value) { - this.$commands.executeCommand("setAttribute", "apply self resizing", this.$context.selection.packByValue({ - [key]: value, - flexGrow: 1 - })); - this.nextTick(() => { - this.refresh(); - }, 100); + get gridColumnGap() { + return this.get("gridColumnGap"); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(() => { - var _a, _b; - var current = this.$context.selection.current; - return ((_a = current == null ? void 0 : current.parent) == null ? void 0 : _a.hasLayout()) && ((_b = current == null ? void 0 : current.parent) == null ? void 0 : _b.isLayout(Layout.GRID)) === false; + set gridColumnGap(value) { + this.reset({ + gridColumnGap: value }); } - [SUBSCRIBE(UPDATE_CANVAS)]() { - const current = this.$context.selection.current; - if (current && current.changedLayoutItem) { - if (current.resizingHorizontal !== this.state.resizingHorizontal || current.resizingVertical !== this.state.resizingVertical) { - this.refresh(); + get gridTemplateColumns() { + return this.get("gridTemplateColumns"); + } + set gridTemplateColumns(value) { + this.reset({ + gridTemplateColumns: value + }); + } + get gridRowGap() { + return this.get("gridRowGap"); + } + set gridRowGap(value) { + this.reset({ + gridRowGap: value + }); + } + get gridTemplateAreas() { + return this.get("gridTemplateAreas"); + } + set gridTemplateAreas(value) { + this.reset({ + gridTemplateAreas: value + }); + } + get gridAutoRows() { + return this.get("gridAutoRows"); + } + set gridAutoRows(value) { + this.reset({ + gridAutoRows: value + }); + } + get gridAutoColumns() { + return this.get("gridAutoColumns"); + } + set gridAutoColumns(value) { + this.reset({ + gridAutoColumns: value + }); + } + get gridAutoFlow() { + return this.get("gridAutoFlow"); + } + set gridAutoFlow(value) { + this.reset({ + gridAutoFlow: value + }); + } + isLayoutItem() { + var _a; + return !!((_a = this.parent) == null ? void 0 : _a.hasLayout()); + } + hasConstraints() { + return this.isLayout(Layout.DEFAULT); + } + hasLayout() { + return !this.hasConstraints() || Boolean(this.layout) === false; + } + isLayout(layout2) { + return this.layout === layout2; + } + isInDefault() { + var _a; + const parentLayout = ((_a = this.parent) == null ? void 0 : _a.layout) || "default"; + return Layout.DEFAULT === parentLayout; + } + isInGrid() { + return this.isInLayout(Layout.GRID); + } + isInFlex() { + return this.isInLayout(Layout.FLEX); + } + isInLayout(layout2) { + var _a; + return ((_a = this.parent) == null ? void 0 : _a.layout) === layout2; + } + changeConstraints(direction2, value, shiftKey = false) { + const h = this.get(direction2); + let newConstraints = value; + if (h === Constraints.MAX) { + if (value === Constraints.MAX) { + newConstraints = Constraints.SCALE; + } + if (shiftKey && value === Constraints.MIN) { + newConstraints = Constraints.STRETCH; + } + } else if (h === Constraints.MIN) { + if (value === Constraints.MIN) { + newConstraints = Constraints.SCALE; + } else if (shiftKey && value === Constraints.MAX) { + newConstraints = Constraints.STRETCH; + } + } else if (h === Constraints.STRETCH) { + if (value === Constraints.MIN) { + newConstraints = Constraints.MAX; + } else if (value === Constraints.MAX) { + newConstraints = Constraints.MIN; } } + this.reset({ + [direction2]: newConstraints + }); } -} -var ResizingProperty$1 = ""; -class ResizingProperty extends BaseProperty { - getTitle() { - return this.$i18n("layout.property.resizing.title"); + startToCacheChildren() { + var _a; + (_a = LayoutEngine[this.layout]) == null ? void 0 : _a.startCache(this); } - getClassName() { - return "elf--resizing-property"; + recoverChildren() { + var _a; + (_a = LayoutEngine[this.layout]) == null ? void 0 : _a.recover(this); + } +} +const editableList = [ + "appearance", + "position", + "right", + "bottom", + "rootVariable", + "variable", + "transform", + "filter", + "backdropFilter", + "backgroundColor", + "backgroundImage", + "borderRadius", + "border", + "boxShadow", + "clipPath", + "color", + "perspectiveOrigin", + "transformOrigin", + "transformStyle", + "perspective", + "mixBlendMode", + "overflow", + "opacity", + "box-model", + "layout", + "flex-layout", + "grid-layout", + "animation", + "transition", + "pattern", + "boolean-operation" +]; +const editableKeys = {}; +editableList.forEach(function(key) { + editableKeys[key] = true; +}); +class DomModel extends GroupModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + rootVariable: "", + variable: "", + color: "black", + overflow: "visible", + opacity: 1, + pattern: "", + selectors: [], + svg: [], + gridColumnStart: "", + gridColumnEnd: "", + gridRowStart: "", + gridRowEnd: "", + gridColumnGap: "", + gridRowGap: "" + }, obj2)); } - getBody() { - return ` -
-
-
-
-
-
- `; + get gridColumnStart() { + return this.get("gridColumnStart"); } - [LOAD("$resizingModeInfo") + DOMDIFF]() { - var current = this.$context.selection.current || {}; - const h = current.resizingHorizontal || ResizingMode.FIXED; - const v = current.resizingVertical || ResizingMode.FIXED; - return ` -
-
-
-
${iconUse("keyboard_arrow_down")}
-
${iconUse("keyboard_arrow_up")}
-
-
-
${iconUse("keyboard_arrow_right")}
-
${iconUse("keyboard_arrow_left")}
-
-
-
-
-
-
- `; + set gridColumnStart(value) { + this.set("gridColumnStart", value); } - makeOptionsForHorizontal() { - const options2 = [ - { value: ResizingMode.FIXED, text: "Fixed Width" }, - { value: ResizingMode.HUG_CONTENT, text: "Hug Content" } - ]; - return options2; + get gridColumnEnd() { + return this.get("gridColumnEnd"); } - makeOptionsForVertical() { - const options2 = [ - { value: ResizingMode.FIXED, text: "Fixed Height" }, - { value: ResizingMode.HUG_CONTENT, text: "Hug Content" } - ]; - return options2; + set gridColumnEnd(value) { + this.set("gridColumnEnd", value); } - [LOAD("$resizingModeInfoInput")]() { - var current = this.$context.selection.current || {}; - return ` -
- - ${createComponent("SelectEditor", { - ref: "$resizingHorizontal", - key: "resizingHorizontal", - value: (current == null ? void 0 : current.resizingHorizontal) || ResizingMode.FIXED, - options: this.makeOptionsForHorizontal(), - onchange: "changeResizingMode" - })} -
- -
- - ${createComponent("SelectEditor", { - ref: "$resizingVertical", - key: "resizingVertical", - value: (current == null ? void 0 : current.resizingVertical) || ResizingMode.FIXED, - options: this.makeOptionsForVertical(), - onchange: "changeResizingMode" - })} -
- `; + get gridRowStart() { + return this.get("gridRowStart"); } - [CLICK("$resizingModeInfo [data-key]")](e) { - const key = e.$dt.data("key"); - const current = this.$context.selection.current; - if (current[key] === ResizingMode.FIXED) { - this.trigger("changeResizingMode", key, ResizingMode.HUG_CONTENT); - } else { - this.trigger("changeResizingMode", key, ResizingMode.FIXED); - } + set gridRowStart(value) { + this.set("gridRowStart", value); } - [SUBSCRIBE_SELF("changeResizingMode")](key, value) { - this.$commands.executeCommand("setAttribute", "apply constraints", this.$context.selection.packByValue({ - [key]: value - })); - this.nextTick(() => { - this.refresh(); - }, 100); + get gridRowEnd() { + return this.get("gridRowEnd"); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(() => { - var current = this.$context.selection.current; - return current && current.hasLayout(); - }); + set gridRowEnd(value) { + this.set("gridRowEnd", value); } -} -function layout$2(editor) { - editor.registerElement({ - FlexLayoutEditor, - GridLayoutEditor, - GridBoxEditor, - GridGapEditor - }); - editor.registerUI("inspector.tab.style", { - LayoutProperty, - ResizingProperty, - ResizingItemProperty, - DefaultLayoutItemProperty - }); - editor.registerUI("canvas.view", { - FlexGrowToolView, - GridGrowToolView - }, CanvasViewToolLevel.LAYOUT_TOOL); -} -var LineView$1 = ""; -class LineView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--line-view sepia(0.2)" - }); + get gridColumnGap() { + return this.get("gridColumnGap"); } - [CONFIG("vertical.line")]() { - this.refresh(); + set gridColumnGap(value) { + this.set("gridColumnGap", value); } - [CONFIG("horizontal.line")]() { - this.refresh(); + get gridRowGap() { + return this.get("gridRowGap"); } - [SUBSCRIBE(UPDATE_VIEWPORT, UPDATE_CANVAS)]() { - this.refresh(); + set gridRowGap(value) { + this.set("gridRowGap", value); } - [LOAD("$el") + DOMDIFF]() { - return [ - ...this.$config.get("vertical.line").map((it, index2) => { - const screen2 = this.$viewport.applyVertex([0, it, 0]); - return /* @__PURE__ */ createElementJsx("div", { - class: "vertical-line", - "data-index": index2, - style: `transform: translate3d(0px, ${screen2[1]}px, 0px);` - }); - }), - ...this.$config.get("horizontal.line").map((it, index2) => { - const screen2 = this.$viewport.applyVertex([it, 0, 0]); - return /* @__PURE__ */ createElementJsx("div", { - class: "horizontal-line", - "data-index": index2, - style: `transform: translate3d(${screen2[0]}px, 0px, 0px);` - }); - }) - ]; + get pattern() { + return this.get("pattern"); } - [POINTERSTART("$el .horizontal-line") + MOVE("moveHorizontalLine") + END("moveEndHorizontalLine")](e) { - this.startIndex = +e.$dt.data("index"); - this.$context.snapManager.clear(); + set pattern(value) { + this.reset({ + pattern: value + }); } - moveHorizontalLine() { - const newPos = this.$context.snapManager.getWorldPosition(); - this.$config.setIndexValue("horizontal.line", this.startIndex, newPos[0]); + get selectors() { + return this.get("selectors"); } - moveEndHorizontalLine() { - this.$commands.emit("recoverCursor"); + set selectors(value) { + this.reset({ + selectors: value + }); } - [POINTERSTART("$el .vertical-line") + MOVE("moveVerticalLine") + END("moveEndVerticalLine")](e) { - this.startIndex = +e.$dt.data("index"); - this.$context.snapManager.clear(); + get svg() { + return this.get("svg"); } - moveVerticalLine() { - const newPos = this.$context.snapManager.getWorldPosition(); - this.$config.setIndexValue("vertical.line", this.startIndex, newPos[1]); + set svg(value) { + this.reset({ svg: value }); } - moveEndVerticalLine() { - this.$commands.emit("recoverCursor"); + get rootVariable() { + return this.get("rootVariable"); } -} -function lineView(editor) { - editor.registerUI("canvas.view", { - LineView - }); -} -var DefaultMenu$1 = [ - { - type: "button", - icon: "navigation", - events: ["config:editing.mode"], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.SELECT); - }, - action: (editor) => { - editor.context.commands.emit("addLayerView", "select"); - editor.context.config.is("editing.mode.itemType", EditingMode.SELECT); - } - }, - { - type: "button", - icon: "artboard", - events: ["config:editing.mode", "config:editing.mode.itemType"], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.APPEND) && editor.context.config.is("editing.mode.itemType", "artboard"); - }, - action: (editor) => { - editor.context.commands.emit("addLayerView", "artboard"); - } - }, - { - type: "dropdown", - icon: (editor, dropdown) => { - var _a; - return ((_a = dropdown.findItem(editor.context.config.get("editing.css.itemType"))) == null ? void 0 : _a.icon) || iconUse("rect"); - }, - items: [ - { - icon: iconUse("rect"), - title: "Rect Layer", - key: "rect", - command: "addLayerView", - args: [ - "rect", - { - backgroundColor: "#ececec" - } - ], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "rect"); - }, - shortcut: KeyStringMaker({ key: "R" }) - }, - { - icon: iconUse("lens"), - title: "Circle Layer", - key: "circle", - command: "addLayerView", - args: ["circle"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "circle"); - }, - shortcut: KeyStringMaker({ key: "O" }) - }, - { - icon: iconUse("image"), - title: "Image", - key: "image", - command: "addLayerView", - args: ["image"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "image"); - }, - shortcut: KeyStringMaker({ key: "I" }) - }, - "-", - { - icon: iconUse("video"), - title: "Video", - key: "video", - command: "addLayerView", - args: ["video"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "video"); - }, - shortcut: KeyStringMaker({ key: "V" }) - }, - { - icon: iconUse("iframe"), - title: "IFrame", - key: "iframe", - command: "addLayerView", - args: ["iframe"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "iframe"); - }, - shortcut: KeyStringMaker({ key: "F" }) - }, - { - icon: iconUse("rect"), - title: "SampleLayer", - key: "sample", - command: "addLayerView", - args: ["sample"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.css.itemType", "sample"); - } - } - ], - events: [ - "config:editing.mode", - "config:editing.mode.itemType", - "config:editing.css.itemType" - ], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.APPEND) && (editor.context.config.is("editing.mode.itemType", "rect") || editor.context.config.is("editing.mode.itemType", "circle") || editor.context.config.is("editing.mode.itemType", "image") || editor.context.config.is("editing.mode.itemType", "video") || editor.context.config.is("editing.mode.itemType", "iframe")); - }, - selectedKey: (editor) => { - return editor.context.config.get("editing.css.itemType"); - } - }, - { - type: "dropdown", - icon: (editor, dropdown) => { - var _a; - return ((_a = dropdown.findItem(editor.context.config.get("editing.draw.itemType"))) == null ? void 0 : _a.icon) || iconUse("pentool"); - }, - items: [ - { - icon: iconUse("pentool"), - title: "Pen", - key: "path", - command: "addLayerView", - args: ["path"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.draw.itemType", "path"); - }, - shortcut: KeyStringMaker({ key: "P" }) - }, - { - icon: iconUse("brush"), - title: "Pencil", - key: "brush", - command: "addLayerView", - args: ["brush"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.draw.itemType", "brush"); - }, - shortcut: KeyStringMaker({ key: "B" }) - } - ], - events: [ - "config:editing.mode", - "config:editing.mode.itemType", - "config:editing.draw.itemType" - ], - selected: (editor) => { - return editor.context.config.is("editing.mode.itemType", "path") || editor.context.config.is("editing.mode.itemType", "draw"); - }, - selectedKey: (editor) => { - return editor.context.config.get("editing.draw.itemType"); - } - }, - { - type: "dropdown", - icon: (editor, dropdown) => { - var _a; - return ((_a = dropdown.findItem(editor.context.config.get("editing.svg.itemType"))) == null ? void 0 : _a.icon) || iconUse("outline_rect"); - }, - items: [ - { - icon: iconUse("outline_rect"), - title: "Rectangle", - key: "svg-rect", - command: "addLayerView", - args: ["svg-rect"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "svg-rect"); - }, - shortcut: KeyStringMaker({ key: "Shift+R" }) - }, - { - icon: iconUse("outline_circle"), - title: "Circle", - key: "svg-circle", - command: "addLayerView", - args: ["svg-circle"], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "svg-circle"); - }, - shortcut: KeyStringMaker({ key: "Shift+O" }) - }, - { - icon: iconUse("polygon"), - title: "Polygon", - key: "svg-polygon", - command: "addLayerView", - args: [ - "polygon", - { - backgroundColor: "transparent" - } - ], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "polygon"); - }, - shortcut: KeyStringMaker({ key: "Shift+P" }) - }, - { - icon: iconUse("star"), - title: "Star", - key: "star", - command: "addLayerView", - args: [ - "star", - { - backgroundColor: "transparent" - } - ], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "star"); - }, - shortcut: KeyStringMaker({ key: "Shift+S" }) - }, - "-", - { - icon: iconUse("smooth"), - title: "Spline", - key: "spline", - command: "addLayerView", - args: [ - "spline", - { - backgroundColor: "transparent" - } - ], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "spline"); - }, - shortcut: KeyStringMaker({ key: "Shift+L" }) - }, - { - icon: iconUse("text_rotate"), - title: "TextPath", - key: "svg-texpath", - command: "addLayerView", - args: [ - "svg-textpath", - { - backgroundColor: "transparent" - } - ], - closable: true, - nextTick: (editor) => { - editor.context.config.set("editing.svg.itemType", "svg-textpath"); - }, - shortcut: KeyStringMaker({ key: "Shift+T" }) - } - ], - events: [ - "config:editing.mode", - "config:editing.mode.itemType", - "config:editing.svg.itemType" - ], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.APPEND) && (editor.context.config.is("editing.mode.itemType", "svg-rect") || editor.context.config.is("editing.mode.itemType", "svg-circle") || editor.context.config.is("editing.mode.itemType", "polygon") || editor.context.config.is("editing.mode.itemType", "star") || editor.context.config.is("editing.mode.itemType", "spline") || editor.context.config.is("editing.mode.itemType", "svg-textpath")); - }, - selectedKey: (editor) => { - return editor.context.config.get("editing.svg.itemType"); - } - }, - { - type: "button", - icon: "title", - events: ["config:editing.mode", "config:editing.mode.itemType"], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.APPEND) && editor.context.config.is("editing.mode.itemType", "text"); - }, - action: (editor) => { - editor.context.commands.emit("addLayerView", "text"); - } - }, - { - type: "button", - tooltip: "Handle", - icon: "pantool", - events: ["config:editing.mode"], - selected: (editor) => { - return editor.context.config.is("editing.mode", EditingMode.HAND); - }, - action: (editor) => { - editor.context.config.set("editing.mode", EditingMode.HAND); - } + set rootVariable(value) { + this.reset({ + rootVariable: value + }); } -]; -function menus$1(editor) { - editor.registerMenu("toolbar.left", DefaultMenu$1); -} -var DrawManager$1 = ""; -class DrawManager extends EditorElement { - initState() { - return { - tolerance: 1, - stroke: "black", - "stroke-width": 2, - "stroke-linecap": "round", - "stroke-linejoin": "round", - msg: this.$i18n("path.manager.msg") - }; + get variable() { + return this.get("variable"); } - [SUBSCRIBE(REFRESH_SELECTION)]() { - var _a, _b; - var current = this.$context.selection.current; - if (current) { - (_a = this.children.$stroke) == null ? void 0 : _a.setValue(current.stroke || "rgba(0, 0, 0, 1)"); - (_b = this.children.$strokeWidth) == null ? void 0 : _b.setValue(current.strokeWidth || Length.number(1)); - } + set variable(value) { + this.reset({ + variable: value + }); } - [SUBSCRIBE("setColorAsset")]({ color: color2 }) { - if (this.$el.isShow()) { - this.setState({ - stroke: color2 - }, false); - this.children.$stroke.setValue(color2); - this.updateData({ - stroke: color2 - }); - } + get filter() { + return this.get("filter"); } - template() { - return ` -
-
- -
-
-
- - ${createComponent("NumberInputEditor", { - ref: "$tolerance", - key: "tolerance", - value: 1, - min: 0, - max: 100, - step: 0.01, - unit: "number", - onchange: "changeValue" - })} -
-
- - ${createComponent("FillSingleEditor", { - ref: "$stroke", - simple: true, - value: this.state.stroke, - key: "stroke", - onchange: "changeValue" - })} -
- -
- - ${createComponent("NumberInputEditor", { - ref: "$strokeWidth", - key: "strokeWidth", - value: this.state["strokeWidth"], - onchange: "changeValue" - })} -
- - -
- - ${createComponent("SelectEditor", { - ref: "$strokeLineCap", - key: "strokeLinecap", - value: this.state["strokeLinecap"], - options: ["butt", "round", "square"], - onchange: "changeValue" - })} -
-
- - ${createComponent("SelectEditor", { - ref: "$strokeLineJoin", - key: "strokeLinejoin", - value: this.state["strokeLinejoin"], - options: ["miter", "bevel", "round"], - onchange: "changeValue" - })} -
-
-
- `; + set filter(value) { + this.reset({ + filter: value + }); } - [SUBSCRIBE_SELF("changeValue")](key, value) { - this.updateData({ - [key]: value + get backdropFilter() { + return this.get("backdropFilter"); + } + set backdropFilter(value) { + this.reset({ + backdropFilter: value }); } - updateData(obj2 = {}) { - this.setState(obj2, false); - this.state.instance.trigger(this.state.changeEvent, obj2); + get backgroundColor() { + return this.get("backgroundColor"); } - [SUBSCRIBE("changePathManager")](mode) { - this.setState({ mode }); + set backgroundColor(value) { + this.reset({ + backgroundColor: value + }); } - [SUBSCRIBE("showDrawManager")](obj2 = {}) { - obj2.changeEvent = obj2.changeEvent || "changeDrawManager"; - this.setState(obj2); - this.$el.show(); - this.emit("hidePathManager"); + get backgroundImage() { + return this.get("backgroundImage"); } - [SUBSCRIBE("hideDrawManager")]() { - this.$el.hide(); + set backgroundImage(value) { + this.reset({ + backgroundImage: value + }); } - [CLICK("$left button")](e) { - var message = e.$dt.attr("data-value"); - this.emit(message); + get textClip() { + return this.get("textClip"); } -} -var PathDrawView$1 = ""; -const FIELDS$1 = [ - "fill", - "fill-opacity", - "stroke", - "stroke-width", - "stroke-linecap", - "stroke-linejoin" -]; -class PathDrawView extends EditorElement { - initialize() { - super.initialize(); - this.pathParser = new PathParser(); + set textClip(value) { + this.reset({ + textClip: value + }); } - initState() { - return { - points: [], - $target: null, - fill: "transparent", - stroke: "black", - "fill-opacity": null, - "stroke-width": 2, - "stroke-linecap": "round", - "stroke-linejoin": "round", - tolerance: 1 - }; + get borderRadius() { + return this.get("borderRadius"); } - [SUBSCRIBE("changeDrawManager")](obj2) { - this.setState(__spreadValues({}, obj2), false); + set borderRadius(value) { + this.reset({ + borderRadius: value + }); } - get scale() { - return this.$viewport.scale; + get border() { + return this.get("border"); } - template() { - return ` -
-
-
`; + set border(value) { + this.reset({ + border: value + }); } - initRect(isForce = false) { - if (!this.state.rect || isForce) { - this.state.rect = this.$el.rect(); + get boxShadow() { + return this.get("boxShadow"); + } + set boxShadow(value) { + this.reset({ + boxShadow: value + }); + } + get textShadow() { + return this.get("textShadow"); + } + set textShadow(value) { + this.reset({ + textShadow: value + }); + } + get clipPath() { + return this.get("clipPath"); + } + set clipPath(value) { + this.reset({ + clipPath: value + }); + } + get color() { + return this.get("color"); + } + set color(value) { + this.reset({ + color: value + }); + } + get opacity() { + return this.get("opacity"); + } + set opacity(value) { + this.reset({ + opacity: value + }); + } + get transformStyle() { + return this.get("transformStyle"); + } + set transformStyle(value) { + this.reset({ + transformStyle: value + }); + } + get fontSize() { + return this.get("fontSize"); + } + set fontSize(value) { + this.reset({ + fontSize: value + }); + } + get fontFamily() { + return this.get("fontFamily"); + } + set fontFamily(value) { + this.reset({ + fontFamily: value + }); + } + get fontWeight() { + return this.get("fontWeight"); + } + set fontWeight(value) { + this.reset({ + fontWeight: value + }); + } + get fontStyle() { + return this.get("fontStyle"); + } + set fontStyle(value) { + this.reset({ + fontStyle: value + }); + } + get fontVariant() { + return this.get("fontVariant"); + } + set fontVariant(value) { + this.reset({ + fontVariant: value + }); + } + get fontStretch() { + return this.get("fontStretch"); + } + set fontStretch(value) { + this.reset({ + fontStretch: value + }); + } + get lineHeight() { + return this.get("lineHeight"); + } + set lineHeight(value) { + this.reset({ + lineHeight: value + }); + } + get letterSpacing() { + return this.get("letterSpacing"); + } + set letterSpacing(value) { + this.reset({ + letterSpacing: value + }); + } + get wordSpacing() { + return this.get("wordSpacing"); + } + set wordSpacing(value) { + this.reset({ + wordSpacing: value + }); + } + get textDecoration() { + return this.get("textDecoration"); + } + set textDecoration(value) { + this.reset({ + textDecoration: value + }); + } + get textAlign() { + return this.get("textAlign"); + } + set textAlign(value) { + this.reset({ + textAlign: value + }); + } + get textTransform() { + return this.get("textTransform"); + } + set textTransform(value) { + this.reset({ + textTransform: value + }); + } + get textOverflow() { + return this.get("text-overflow"); + } + set textOverflow(value) { + this.reset({ + "text-overflow": value + }); + } + get textIndent() { + return this.get("textIndent"); + } + set textIndent(value) { + this.reset({ + textIndent: value + }); + } + get mixBlendMode() { + return this.get("mixBlendMode"); + } + set mixBlendMode(value) { + this.reset({ + mixBlendMode: value + }); + } + get visibility() { + return this.get("visibility"); + } + set visibility(value) { + this.reset({ + visibility: value + }); + } + get zIndex() { + return this.get("z-index"); + } + set zIndex(value) { + this.reset({ + "z-index": value + }); + } + get overflow() { + return this.get("overflow"); + } + set overflow(value) { + this.reset({ + overflow: value + }); + } + get animation() { + return this.get("animation"); + } + set animation(value) { + this.reset({ + animation: value + }); + } + get transition() { + return this.get("transition"); + } + set transition(value) { + this.reset({ + transition: value + }); + } + get marginTop() { + return this.get("marginTop"); + } + set marginTop(value) { + this.reset({ + marginTop: value + }); + } + get marginRight() { + return this.get("marginRight"); + } + set marginRight(value) { + this.reset({ + marginRight: value + }); + } + get marginBottom() { + return this.get("marginBottom"); + } + set marginBottom(value) { + this.reset({ + marginBottom: value + }); + } + get marginLeft() { + return this.get("marginLeft"); + } + set marginLeft(value) { + this.reset({ + marginLeft: value + }); + } + get paddingTop() { + return this.get("paddingTop"); + } + set paddingTop(value) { + this.reset({ + paddingTop: value + }); + } + get paddingRight() { + return this.get("paddingRight"); + } + set paddingRight(value) { + this.reset({ + paddingRight: value + }); + } + get paddingBottom() { + return this.get("paddingBottom"); + } + set paddingBottom(value) { + this.reset({ + paddingBottom: value + }); + } + get paddingLeft() { + return this.get("paddingLeft"); + } + set paddingLeft(value) { + this.reset({ + paddingLeft: value + }); + } + editable(editablePropertyName) { + switch (editablePropertyName) { + case "svg-item": + case "transformOrigin": + case "perspective": + case "perspectiveOrigin": + return false; } + return Boolean(editableKeys[editablePropertyName]); + } + get changedBoxModel() { + return this.hasChangedField("marginTop", "marginLeft", "marginBottom", "marginRight", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom"); + } + get changedFlexLayout() { + return this.hasChangedField("flexDirection", "flexWrap", "justifyContent", "alignItems", "alignContent", "order", "flexBasis", "flexGrow", "flexShrink", "flexFlow"); + } + get changedGridLayout() { + return this.hasChangedField("gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas", "gridAutoRows", "gridAutoColumns", "gridAutoFlow", "gridRowGap", "gridColumnGap", "gridRowStart", "gridRowEnd", "gridColumnStart", "gridColumnEnd", "gridArea"); + } + get changedLayoutItem() { + return this.hasChangedField("resizingHorizontal", "resizingVertical"); + } + get changedLayout() { + return this.hasChangedField("layout") || this.changedBoxModel || this.changedFlexLayout || this.changedGridLayout || this.changedLayoutItem; + } + addSelector(selector2) { + this.selectors.push(selector2); + return selector2; + } + createSelector(data = {}) { + return this.addSelector(new Selector(__spreadValues({ + checked: true + }, data))); + } + removePropertyList(arr, removeIndex) { + arr.splice(removeIndex, 1); + } + removeSelector(removeIndex) { + this.removePropertyList(this.selectors, removeIndex); } - [KEYUP("document") + IF("isShow") + ESCAPE + ENTER]() { - this.trigger("hidePathDrawEditor"); + enableHasChildren() { + return true; } - [SUBSCRIBE("DrawEditorDone")]() { - this.trigger("hidePathDrawEditor"); + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); } - get totalPathLength() { - if (!this.refs.$view) - return 0; - var $obj = this.refs.$view.$("path.object"); - if (!$obj) - return 0; - return $obj.totalLength; + updateSelector(index2, data = {}) { + this.selectors[+index2].reset(data); } - makePathLayer() { - var layer; - const newPath = PathParser.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30); - newPath.transformMat4(this.$viewport.matrixInverse); - const bbox = newPath.getBBox(); - const newWidth = distance$1(bbox[1], bbox[0]); - const newHeight = distance$1(bbox[3], bbox[0]); - newPath.translate(-bbox[0][0], -bbox[0][1]); - const pathItem = { - itemType: "svg-path", - x: bbox[0][0], - y: bbox[0][1], - width: newWidth, - height: newHeight, - d: newPath.d, - totalLength: this.totalPathLength - }; - FIELDS$1.forEach((key) => { - if (this.state[key]) - Object.assign(pathItem, { [key]: this.state[key] }); + traverse(item, results, hasLayoutItem) { + if (item.isAttribute()) + return; + if (!hasLayoutItem && item.isLayoutItem() && !item.isRootItem()) + return; + results.push(item); + item.children.forEach((child) => { + this.traverse(child, results); }); - const containerItem = this.$context.selection.currentProject; - layer = containerItem.appendChild(this.$editor.createModel(pathItem)); - return layer; } - addPathLayer() { - var pathRect = this.getPathRect(); - if (pathRect.width !== 0 && pathRect.height !== 0) { - var layer = this.makePathLayer(pathRect); - if (layer) { - this.emit("refreshAll"); - } + tree(hasLayoutItem) { + var results = []; + this.children.forEach((item) => { + this.traverse(item, results, hasLayoutItem); + }); + return results; + } + convert(json) { + json = super.convert(json); + if (json.padding) { + json["paddingTop"] = Length.parse(json.padding); + json["paddingRight"] = Length.parse(json.padding); + json["paddingBottom"] = Length.parse(json.padding); + json["paddingLeft"] = Length.parse(json.padding); + delete json.padding; } + return json; } - changeMode(obj2) { - this.setState(__spreadValues(__spreadValues({}, this.initState()), obj2), false); + reset(obj2, context = { origin: "*" }) { + const isChanged = super.reset(obj2, context); + if (this.hasChangedField("clipPath")) { + this.setClipPathCache(); + } + if (this.hasChangedField("width", "height")) { + if (this.cacheClipPath) { + const d = this.cacheClipPath.clone().scale(this.width / this.cacheClipPathWidth, this.height / this.cacheClipPathHeight).d; + this.clipPath = `path(${d})`; + this.modelManager.setChanged("reset", this.id, { + clipPath: this.clipPath + }); + } + } + if (this.hasChangedField("backgroundImage", "pattern")) { + this.setBackgroundImageCache(); + } + return isChanged; } - getCurrentObject() { - var current = this.state.current; - if (!current) { - return null; + setBackgroundImageCache() { + let list2 = []; + if (this.pattern) { + const patternList = this.computed("pattern", (pattern) => { + return Pattern.parseStyle(pattern).map((it) => { + return BackgroundImage.parseStyle(STRING_TO_CSS(it.toCSS())); + }); + }); + for (var i = 0, len2 = patternList.length; i < len2; i++) { + list2.push.apply(list2, patternList[i]); + } + } + if (this.backgroundImage) { + const backgroundList = this.computed("backgroundImage", (backgroundImage2) => { + return BackgroundImage.parseStyle(STRING_TO_CSS(backgroundImage2)); + }); + list2.push.apply(list2, backgroundList.filter((it) => it.visibility !== VisibilityType.HIDDEN)); + } + if (list2.length) { + const project2 = this.top; + this.cacheBackgroundImage = BackgroundImage.joinCSS(list2); + const cacheList = list2.filter((it) => it.type === GradientType.URL).map((it) => it.image.url); + let cacheImage = this.cacheBackgroundImage["background-image"]; + cacheList.forEach((url) => { + const imageUrl = project2.getImageValueById(url); + cacheImage = cacheImage.replace(url, `"${imageUrl}"`); + }); + this.cacheBackgroundImage["background-image"] = cacheImage; + } else { + this.cacheBackgroundImage = {}; + this.cacheBackgroundImageOriginal = []; } - return { - current, - d: current.d - }; } - [SUBSCRIBE("showPathDrawEditor")](obj2 = {}) { - this.changeMode(obj2); - this.$el.show(); - this.$el.focus(); - this.emit("showDrawManager", { - instance: this, - fill: this.state.fill, - stroke: this.state.stroke, - "fill-opacity": this.state["fill-opacity"], - "stroke-width": this.state["stroke-width"], - "stroke-linecap": this.state["stroke-linecap"], - "stroke-linejoin": this.state["stroke-linejoin"] - }); - this.emit("hidePathEditor"); - this.$context.commands.emit("push.mode.view", "PathDrawView"); + setClipPathCache() { + var obj2 = ClipPath.parseStyle(this.clipPath); + this.cacheClipPathObject = obj2; + if (obj2.type === "path") { + this.cacheClipPath = new PathParser(obj2.value.trim()); + this.cacheClipPathWidth = this.width; + this.cacheClipPathHeight = this.height; + } } - [SUBSCRIBE("initPathDrawEditor")]() { - this.pathParser.reset(""); - this.refs.$view.empty(); + setCache() { + super.setCache(); + this.setClipPathCache(); } - [SUBSCRIBE("hidePathDrawEditor")]() { - if (this.$el.isShow()) { - this.trigger("initPathDrawEditor"); - this.$el.hide(); - this.emit("hideDrawManager"); - this.$commands.emit("pop.mode.view", "PathDrawView"); + get clipPathString() { + if (!this.cacheClipPath) { + this.setClipPathCache(); + } + if (this.cacheClipPath) { + return this.cacheClipPath.clone().scale(this.width / this.cacheClipPathWidth, this.height / this.cacheClipPathHeight).d; } } - [SUBSCRIBE("hideAddViewLayer")]() { - this.$el.hide(); - this.emit("hideDrawManager"); + getBackgroundImage(index2) { + const backgroundImages = BackgroundImage.parseStyle(STRING_TO_CSS(this.backgroundImage)); + return backgroundImages[index2 || 0]; } - getInnerId(postfix = "") { - return "draw-manager-" + postfix; + get borderWidth() { + const border2 = Border.parseStyle(this.border); + const borderObject = Border.parseValue(border2.border); + if (borderObject == null ? void 0 : borderObject.width) { + return { + borderLeftWidth: borderObject == null ? void 0 : borderObject.width, + borderRightWidth: borderObject == null ? void 0 : borderObject.width, + borderTopWidth: borderObject == null ? void 0 : borderObject.width, + borderBottomWidth: borderObject == null ? void 0 : borderObject.width + }; + } + return { + borderLeftWidth: 0, + borderRightWidth: 0, + borderTopWidth: 0, + borderBottomWidth: 0 + }; } - get toFillSVG() { - return SVGFill.parseImage(this.state.fill || "transparent").toSVGString(this.fillId); + get contentBox() { + const x = 0; + const y = 0; + const width2 = this.screenWidth; + const height2 = this.screenHeight; + { + const borderWidth = this.borderWidth; + return { + x: x + borderWidth.borderLeftWidth, + y: y + borderWidth.borderTopWidth, + width: width2 - borderWidth.borderLeftWidth - borderWidth.borderRightWidth, + height: height2 - borderWidth.borderTopWidth - borderWidth.borderBottomWidth + }; + } } - get toStrokeSVG() { - return SVGFill.parseImage(this.state.stroke || "black").toSVGString(this.strokeId); + getGradientLineLength(width2, height2, angle) { + return Math.abs(width2 * Math.sin(degreeToRadian(angle))) + Math.abs(height2 * Math.cos(degreeToRadian(angle))); } - get toDefInnerString() { - return ` - ${this.toFillSVG} - ${this.toStrokeSVG} - `; + createBackgroundImageMatrix(index2) { + const contentBox = this.contentBox; + const backgroundImage2 = this.getBackgroundImage(index2); + const { image: image2 } = backgroundImage2; + const backRect = backgroundImage2.getOffset(contentBox); + const backVerties = vertiesMap(rectToVerties(backRect.x, backRect.y, backRect.width, backRect.height), this.absoluteMatrix); + const result = { + backRect, + backVerties, + absoluteMatrix: this.absoluteMatrix, + backgroundImage: backgroundImage2 + }; + switch (image2.type) { + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + let [rx, ry] = image2.radialPosition; + if (rx == "center") + rx = Length.percent(50); + if (ry == "center") + ry = Length.percent(50); + const newRx = rx.toPx(backRect.width); + const newRy = ry.toPx(backRect.height); + const centerVerties = vertiesMap([ + [newRx.value + backRect.x, newRy.value + backRect.y, 0], + [newRx.value + backRect.x, newRy.value + backRect.y - 1, 0] + ], this.absoluteMatrix); + result.radialCenterPosition = centerVerties[0]; + result.radialCenterStick = centerVerties[1]; + result.radialCenterPoint = [newRx.value, newRy.value, 0]; + if (image2.type === GradientType.RADIAL || image2.type === GradientType.REPEATING_RADIAL) { + const { startPoint: startPoint2, endPoint: endPoint2, shapePoint } = image2.getStartEndPoint(result); + const [newStartPoint2, newEndPoint2, newShapePoint] = vertiesMap([startPoint2, endPoint2, shapePoint], this.absoluteMatrix); + result.radialCenterPosition = newStartPoint2; + result.startPoint = newStartPoint2; + result.endPoint = newEndPoint2; + result.shapePoint = newShapePoint; + result.colorsteps = image2.colorsteps.map((it) => { + const offset = it.toLength(); + return { + id: it.id, + cut: it.cut, + color: it.color, + timing: it.timing, + timingCount: it.timingCount, + pos: lerp([], result.startPoint, result.endPoint, offset.value / 100) + }; + }); + } else if (image2.type === GradientType.CONIC || image2.type === GradientType.REPEATING_CONIC) { + const { startPoint: startPoint2, endPoint: endPoint2, shapePoint } = image2.getStartEndPoint(result); + const [newStartPoint2, newEndPoint2, newShapePoint] = vertiesMap([startPoint2, endPoint2, shapePoint], this.absoluteMatrix); + result.radialCenterPosition = newStartPoint2; + result.startPoint = newStartPoint2; + result.endPoint = newEndPoint2; + result.shapePoint = newShapePoint; + [result.startPoint, result.endPoint, result.shapePoint] = vertiesMap([result.startPoint, result.endPoint, result.shapePoint], calculateRotationOriginMat4(image2.angle, result.radialCenterPosition)); + const targetPoint = result.shapePoint; + result.colorsteps = image2.colorsteps.map((it) => { + const angle = it.percent * 3.6; + const [newPos] = vertiesMap([targetPoint], calculateRotationOriginMat4(angle, result.radialCenterPosition)); + return { + id: it.id, + cut: it.cut, + color: it.color, + timing: it.timing, + timingCount: it.timingCount, + pos: newPos + }; + }); + } + break; + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + result.gradientLineLength = this.getGradientLineLength(backRect.width, backRect.height, image2.angle); + result.centerPosition = lerp([], backVerties[0], backVerties[2], 0.5); + const startPoint = add$1([], result.centerPosition, [ + 0, + result.gradientLineLength / 2, + 0 + ]); + const endPoint = subtract([], result.centerPosition, [ + 0, + result.gradientLineLength / 2, + 0 + ]); + const areaStartPoint = clone(startPoint); + const areaEndPoint = clone(endPoint); + const [newStartPoint, newEndPoint, newAreaStartPoint, newAreaEndPoint] = vertiesMap([startPoint, endPoint, areaStartPoint, areaEndPoint], calculateRotationOriginMat4(image2.angle, result.centerPosition)); + result.endPoint = newEndPoint; + result.startPoint = newStartPoint; + result.areaStartPoint = newAreaStartPoint; + result.areaEndPoint = newAreaEndPoint; + result.colorsteps = image2.colorsteps.map((it) => { + const offset = it.toLength(); + return { + id: it.id, + cut: it.cut, + color: it.color, + timing: it.timing, + timingCount: it.timingCount, + pos: lerp([], result.startPoint, result.endPoint, offset.value / 100) + }; + }); + break; + } + return result; } - get toDefString() { - var str = this.toDefInnerString.trim(); - return ` - - ${str} - - `; +} +class LayerModel extends DomModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "layer", + name: "New Layer", + tagName: "div" + }, obj2)); } - get fillId() { - return this.getInnerId("fill"); + getDefaultTitle() { + return "Layer"; } - get strokeId() { - return this.getInnerId("stroke"); +} +class ArtBoard extends LayerModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "artboard", + name: "New ArtBoard", + width: 1e3, + height: 1e3, + backgroundColor: "white", + transformStyle: "flat" + }, obj2)); } - get toFillValue() { - return SVGFill.parseImage(this.state.fill || "transparent").toFillValue(this.fillId); + getDefaultTitle() { + return "ArtBoard"; } - get toStrokeValue() { - return SVGFill.parseImage(this.state.stroke || "black").toFillValue(this.strokeId); + getIcon() { + return obj$2.artboard; } - [BIND("$view")]() { - const newPath = PathParser.makePathByPoints(this.state.points).simplify(this.state.tolerance); - return { - innerHTML: ` - - ${this.toDefString} - - - ` - }; + editable(editablePropertyName) { + switch (editablePropertyName) { + case "border": + case "borderRadius": + return false; + case "artboardSize": + case "layout": + return true; + } + return super.editable(editablePropertyName); } - renderPath() { - this.bindData("$view"); +} +const IMAGE_LIST = ["jpg", "jpeg", "png", "gif", "svg"]; +class SVGImageResource extends ImageResource { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + type: "url", + url: "", + datauri: "", + patternUnits: "userSpaceOnUse", + patternWidth: "100%", + patternHeight: "100%", + imageX: "0%", + imageY: "0%", + imageWidth: "100%", + imageHeight: "100%" + }, obj2)); } - [SUBSCRIBE("resizeEditor")]() { - this.initRect(true); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("url", "datauri", "patternUnits", "patternWidth", "patternHeight", "imageX", "imageY", "imageWidth", "imageHeight")); } - getPathRect() { - this.initRect(true); - var $obj = this.refs.$view.$("path.object"); - var pathRect = { x: 0, y: 0, width: 0, height: 0 }; - if ($obj) { - pathRect = $obj.rect(); - pathRect.x -= this.state.rect.x; - pathRect.y -= this.state.rect.y; + static parse(str) { + var content2 = str.split("(")[1].split(")")[0]; + var [url, props] = content2.trim().split("#"); + if (!props) { + return new SVGImageResource({ url }); } - return pathRect; + var [ + patternUnits, + patternWidth, + patternHeight, + imageX, + imageY, + imageWidth, + imageHeight + ] = props.split(","); + return new SVGImageResource({ + patternUnits, + patternWidth, + patternHeight, + imageX, + imageY, + imageWidth, + imageHeight, + url + }); } - [POINTERSTART("$view") + MOVE() + END()](e) { - this.initRect(); - this.state.altKey = false; - this.state.startXY = { - x: e.xy.x - this.state.rect.x, - y: e.xy.y - this.state.rect.y - }; - this.state.points = [this.state.startXY]; + isUrl() { + return true; } - move(dx, dy, eventType, pressure) { - this.state.points.push({ - x: this.state.startXY.x + dx, - y: this.state.startXY.y + dy, - pressure - }); - this.renderPath(); + static isImageFile(fileExt) { + return IMAGE_LIST.includes(fileExt); + } + toString() { + var json = this.json; + var { + patternUnits, + patternWidth, + patternHeight, + imageX, + imageY, + imageWidth, + imageHeight, + url + } = json; + var string = [ + patternUnits, + patternWidth, + patternHeight, + imageX, + imageY, + imageWidth, + imageHeight + ].join(",").trim(); + return `url(${url}#${string})`; + } + toSVGString(id, item = {}) { + var { + patternUnits, + patternWidth, + patternHeight, + imageX, + imageY, + imageWidth, + imageHeight + } = this.json; + const localPatternWidth = Length.parse(patternWidth); + const localPatternHeight = Length.parse(patternHeight); + const localImageX = Length.parse(imageX); + const localImageY = Length.parse(imageY); + const localImageWidth = Length.parse(imageWidth); + const localImageHeight = Length.parse(imageHeight); + const width2 = item.width ? localPatternWidth.toPx(item.width).value : localPatternWidth; + const height2 = item.height ? localPatternHeight.toPx(item.height).value : localPatternHeight; + return ` + + + + `; } - end() { - this.addPathLayer(); - this.trigger("initPathDrawEditor"); + toFillValue(id) { + return `url(#${id})`; } } -function pathDrawView(editor) { - editor.registerUI("canvas.view", { - PathDrawView - }); - editor.registerUI("page.subeditor.view", { - DrawManager - }); -} -var PathEditorView$1 = ""; -const SEGMENT_DIRECTION = ["startPoint", "endPoint", "reversePoint"]; -function calculateSnapPoint(points, sourceKey, target, distanceValue, dist2) { - var checkedPointList = points.filter((p) => { - if (!p) - return false; - return Math.abs(p[sourceKey] - target) <= dist2; - }).map((p) => { - return { dist: Math.abs(p[sourceKey] - target), point: p }; - }); - checkedPointList.sort((a, b) => { - return a.dist < b.dist ? -1 : 1; - }); - var point2 = null; - if (checkedPointList.length) { - point2 = checkedPointList[0].point; - distanceValue += point2[sourceKey] - target; +class SVGGradient extends Gradient { + toString() { + return ""; + } + toSVGString() { + return ""; + } + toFillValue() { + return ""; } - return { point: point2, distanceValue }; } -function calculateMovePointSnap(points, moveXY, dist2 = 1) { - var snapPointX = calculatePointDist(points, "x", moveXY.x, dist2); - var snapPointY = calculatePointDist(points, "y", moveXY.y, dist2); - var snapEndPoint = __spreadValues({}, moveXY); - if (snapPointX) { - snapEndPoint.x = snapPointX.x; +const SpreadMethodList$1 = [ + SpreadMethodType.PAD, + SpreadMethodType.REFLECT, + SpreadMethodType.REPEAT +]; +class SVGLinearGradient extends SVGGradient { + convert(json) { + json.spreadMethod = SpreadMethodList$1.includes(json.spreadMethod) ? json.spreadMethod : SpreadMethodType.PAD; + return json; } - if (snapPointY) { - snapEndPoint.y = snapPointY.y; + getDefaultObject(obj2) { + return super.getDefaultObject(__spreadValues({ + type: GradientType.LINEAR, + x1: Length.parse("0%"), + y1: Length.parse("50%"), + x2: Length.parse("100%"), + y2: Length.parse("50%"), + spreadMethod: SpreadMethodType.PAD + }, obj2)); } - var snapPointList = []; - if (snapPointX) { - snapPointList.push({ startPoint: snapPointX, endPoint: snapEndPoint }); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("x1", "y1", "x2", "y2", "spreadMethod")); } - if (snapPointY) { - snapPointList.push({ startPoint: snapPointY, endPoint: snapEndPoint }); + toString() { + if (this.colorsteps.length === 0) + return ""; + var colorString = this.getColorString(); + var { x1, y1, x2, y2, spreadMethod } = this.json; + var opt = [x1, y1, x2, y2, spreadMethod].join(" "); + var result = `${this.json.type}(${opt}, ${colorString})`; + return result; } - return { snapPointList, moveXY: snapEndPoint }; -} -function calculatePointDist(points, sourceKey, target, dist2) { - var checkedPointList = []; - var arr = SEGMENT_DIRECTION; - points.filter((p) => p).forEach((p) => { - arr.filter((key) => p[key]).forEach((key) => { - var point2 = p[key]; - var tempDist = Math.abs(point2[sourceKey] - target); - if (tempDist <= dist2) { - checkedPointList.push({ dist: tempDist, point: point2 }); - } - }); - }); - checkedPointList.sort((a, b) => { - return a.dist > b.dist ? 1 : -1; - }); - return checkedPointList.length ? checkedPointList[0].point : null; -} -function toPath(points, minX, minY, scale2 = 1) { - var d = []; - for (var index2 = 0, len2 = points.length; index2 < len2; index2++) { - var currentIndex = index2; - var current = points[currentIndex]; - if (!current) - continue; - if (current.command === "M") { - d.push({ command: "M", values: [current.startPoint] }); - } else { - var prevPoint = Point.getPrevPoint(points, index2); - if (current.curve === false) { - if (prevPoint.curve === false) { - d.push({ command: "L", values: [current.startPoint] }); - } else { - d.push({ - command: "Q", - values: [prevPoint.endPoint, current.startPoint] - }); + toSVGString(id) { + var { x1, y1, x2, y2, spreadMethod } = this.json; + return ` + + ${SVGLinearGradient.makeColorStepList(this.colorsteps).map((it) => ` + + `).join("")} + + `; + } + toFillValue(id) { + return `url(#${id})`; + } + static parse(str) { + const result = parseOneValue(str); + var opt = {}; + const [options2, ...colors2] = result.parameters; + const list2 = []; + options2.forEach((it) => { + if (it.func === FuncType.KEYWORD) { + if (SpreadMethodList$1.includes(it.matchedString)) { + opt.spreadMethod = it.matchedString; } } else { - if (prevPoint.curve === false) { - if (Point.isEqual(current.reversePoint, current.startPoint)) { - d.push({ command: "L", values: [current.startPoint] }); - } else { - d.push({ - command: "Q", - values: [current.reversePoint, current.startPoint] - }); - } - } else { - d.push({ - command: "C", - values: [ - prevPoint.endPoint, - current.reversePoint, - current.startPoint - ] - }); - } + list2.push(it); } - } - if (current.close) { - d.push({ command: "Z" }); - } - } - var dString = d.map((segment) => { - return calculateRelativePosition(minX, minY, segment, scale2); - }).join(" "); - return { - d: dString - }; -} -function calculateRelativePosition(minX, minY, segment, scale2 = 1) { - var { command, values } = segment; - switch (command) { - case "Z": - return "Z"; - default: - var str = values.map((v) => { - var tx = v.x - minX === 0 ? 0 : (v.x - minX) / scale2; - var ty = v.y - minY === 0 ? 0 : (v.y - minY) / scale2; - return `${tx} ${ty}`; - }).join(" "); - return `${command} ${str}`; + }); + var [ + x1 = Length.percent(0), + y1 = Length.percent(50), + x2 = Length.percent(100), + y2 = Length.percent(50) + ] = list2.map((it) => it.parsed); + opt = __spreadProps(__spreadValues({}, opt), { + x1, + y1, + x2, + y2 + }); + const colorsteps = SVGLinearGradient.parseColorSteps(colors2); + return new SVGLinearGradient(__spreadProps(__spreadValues({}, opt), { colorsteps })); } } -function checkInArea(area2, point2) { - if (area2.x2.value < point2.x) { - return false; - } - if (area2.y2.value < point2.y) { - return false; - } - if (area2.x.value > point2.x) { - return false; +const RadialTypeList = [RadialGradientType.CIRCLE, RadialGradientType.ELLIPSE]; +const SpreadMethodList = [ + SpreadMethodType.PAD, + SpreadMethodType.REFLECT, + SpreadMethodType.REPEAT +]; +class SVGRadialGradient extends SVGGradient { + convert(json) { + json.spreadMethod = SpreadMethodList.includes(json.spreadMethod) ? json.spreadMethod : SpreadMethodType.PAD; + return json; } - if (area2.y.value > point2.y) { - return false; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + type: GradientType.RADIAL, + radialType: RadialGradientType.CIRCLE, + x1: Length.parse("50%"), + y1: Length.parse("50%"), + x2: Length.parse("100%"), + y2: Length.parse("50%"), + x3: Length.parse("50%"), + y3: Length.parse("100%"), + spreadMethod: SpreadMethodType.PAD + }, obj2)); } - return true; -} -class PathGenerator { - static generatorPathString(points, minX = 0, minY = 0, scale2 = 1) { - return toPath(points, minX, minY, scale2).d; + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("radialType", "x1", "y1", "x2", "y2", "x3", "y3", "spreadMethod")); } - constructor(pathEditor) { - this.pathEditor = pathEditor; - this.pathStringManager = new PathStringManager(); - this.guideLineManager = new PathStringManager(); - this.segmentManager = new SegmentManager(this.pathEditor.$viewport); - this.points = []; - this.cachedSegmentKeys = {}; - this.initialize(); - this.initializeSelect(); + toString() { + if (this.colorsteps.length === 0) + return ""; + var colorString = this.getColorString(); + var { radialType, x1, y1, x2, y2, x3, y3, spreadMethod } = this.json; + var opt = [radialType, x1, y1, x2, y2, x3, y3, spreadMethod].join(" ").trim(); + var result = `${this.json.type}(${opt}, ${colorString})`; + return result; } - initialize() { - this.splitLines = []; - this.guideLineManager.reset(); - this.segmentManager.reset(); - this.pathStringManager.reset(); + getGradientAngle(contentBox = {}) { + var { x1, y1, x2, y2 } = this.json; + const newX1 = x1.toPx(contentBox.width); + const newY1 = y1.toPx(contentBox.height); + const newX2 = x2.toPx(contentBox.width); + const newY2 = y2.toPx(contentBox.height); + const angle = calculateAngle360(newX2.value - newX1.value, newY2.value - newY1.value) + 180; + return angle % 360; } - initializeSelect(initPointList = []) { - this.selectedPointKeys = {}; - this.selectedPointList = []; - if (initPointList.length) { - this.select(...initPointList.map((p) => { - const checkedPoint = this.points[p.index][p.key]; - if (!checkedPoint) - return void 0; - return { - x: checkedPoint.x, - y: checkedPoint.y, - key: p.key, - index: checkedPoint.index - }; - }).filter(Boolean)); + toSVGString(id, contentBox = {}) { + var { + x1: cx, + y1: cy, + x2, + y2, + x3, + y3, + spreadMethod, + radialType + } = this.json; + const newX1 = cx.toPx(contentBox.width); + const newY1 = cy.toPx(contentBox.height); + const newX2 = x2.toPx(contentBox.width); + const newY2 = y2.toPx(contentBox.height); + var dist$1 = dist([newX1.value, newY1.value, 0], [newX2.value, newY2.value, 0]); + var angle = this.getGradientAngle(contentBox); + const view = create$5(); + multiply$2(view, view, fromTranslation$1([], [newX1.value, newY1.value])); + multiply$2(view, view, fromRotation$1([], degreeToRadian(angle))); + if (radialType === RadialGradientType.ELLIPSE) { + const newX3 = x3.toPx(contentBox.width); + const newY3 = y3.toPx(contentBox.height); + var dist2 = dist([newX1.value, newY1.value, 0], [newX3.value, newY3.value, 0]); + multiply$2(view, view, fromScaling$1([], [1, dist2 / dist$1])); } + const gradientTransform = `matrix(${view[0]}, ${view[1]}, ${view[3]}, ${view[4]}, ${view[6]}, ${view[7]})`; + return ` + + ${SVGRadialGradient.makeColorStepList(this.colorsteps).map((it) => ` + + `).join("")} + +`; } - get state() { - return this.pathEditor.state; - } - get clonePoints() { - return [...this.points]; - } - get length() { - return this.points.length; - } - setPoints(points = []) { - this.points = points; - this.snapPointList = []; - if (this.points.length === 0) { - this.select(); - this.selectGroup(-1); - } + toFillValue(id) { + return `url(#${id})`; } - selectInBox(box, isToggle = false) { - var list2 = []; - this.points.forEach((point2, index2) => { - SEGMENT_DIRECTION.forEach((key) => { - const p = point2[key]; - if (checkInArea(box, p)) { - list2.push({ x: p.x, y: p.y, key, index: index2 }); + static parse(str) { + const result = parseOneValue(str); + var opt = {}; + const [options2, ...colors2] = result.parameters; + const list2 = []; + options2.forEach((it) => { + if (it.func === FuncType.KEYWORD) { + if (RadialTypeList.includes(it.matchedString)) { + opt.radialType = it.matchedString; + } else if (SpreadMethodList.includes(it.matchedString)) { + opt.spreadMethod = it.matchedString; } - }); - }); - if (isToggle) { - list2 = list2.map((it) => { - const selectedKey = this.makeSegmentKey(it); - return __spreadProps(__spreadValues({}, it), { - included: Boolean(this.selectedPointKeys[selectedKey]) - }); - }); - const includedList = list2.filter((it) => it.included); - const notIncludedList = list2.filter((it) => !it.included); - let uniqueList = [...this.selectedPointList]; - if (includedList.length) { - uniqueList = this.selectedPointList.filter((it) => { - const oldKey = this.makeSegmentKey(it); - return Boolean(includedList.find((includeNode) => { - return oldKey === this.makeSegmentKey(includeNode); - })) === false; - }); + } else { + list2.push(it); } - this.select(...uniqueList, ...notIncludedList); - } else { - this.select(...list2); - } + }); + var [ + x1 = Length.percent(50), + y1 = Length.percent(50), + x2 = Length.percent(100), + y2 = Length.percent(50), + x3 = Length.percent(50), + y3 = Length.percent(100) + ] = list2.map((it) => it.parsed); + opt = __spreadProps(__spreadValues({}, opt), { + x1, + y1, + x2, + y2, + x3, + y3 + }); + const colorsteps = SVGRadialGradient.parseColorSteps(colors2); + return new SVGRadialGradient(__spreadProps(__spreadValues({}, opt), { colorsteps })); } - makeSegmentKey(p) { - return `${p.key}_${p.index}`; +} +class SVGStaticGradient extends SVGGradient { + getDefaultObject() { + return super.getDefaultObject({ + type: "static-gradient", + colorsteps: [ + new ColorStep({ color: "red", percent: 0, index: 0 }), + new ColorStep({ color: "red", percent: 100, index: 1 }) + ] + }); } - select(...list2) { - this.selectedPointKeys = {}; - this.selectedPointList = list2.map(({ x, y, key, index: index2 }) => ({ - x, - y, - key, - index: +index2 - })); - list2.forEach((it) => { - var key = this.makeSegmentKey(it); - this.selectedPointKeys[key] = true; + toCloneObject() { + return __spreadProps(__spreadValues({}, super.toCloneObject()), { + static: true }); } - convertPointsToSelectionList(points) { - var list2 = []; - points.forEach((point2) => { - SEGMENT_DIRECTION.forEach((key) => { - const { x, y } = point2[key]; - list2.push({ x, y, key, index: point2.index }); - }); + static create(color2 = "transparent") { + return new SVGStaticGradient({ + colorsteps: [ + new ColorStep({ color: color2, percent: 0, index: 0 }), + new ColorStep({ color: color2, percent: 100, index: 0 }) + ] }); - return list2; } - selectGroup(groupIndex) { - const group2 = this.splitedGroupList[groupIndex]; - if (group2) { - this.select(...this.convertPointsToSelectionList(group2.points)); - } else { - this.select(); - } + setColor(color2) { + this.colorsteps.forEach((it) => { + it.color = color2; + }); } - getCacheSegmentKey(segmentKey, index2) { - if (!this.cachedSegmentKeys[segmentKey]) { - this.cachedSegmentKeys[segmentKey] = {}; - } - if (!this.cachedSegmentKeys[segmentKey][index2]) { - this.cachedSegmentKeys[segmentKey][index2] = this.makeSegmentKey({ - key: segmentKey, - index: index2 - }); - } - return this.cachedSegmentKeys[segmentKey][index2]; + toString() { + var color2 = this.json.colorsteps[0].color; + return color2; } - toggleSelect(key, index2) { - if (this.points[index2]) { - var point2 = this.points[index2][key]; - if (point2 && !this.isSelectedSegment(key, index2)) { - this.select(...this.selectedPointList, { - x: point2.x, - y: point2.y, - key, - index: index2 - }); - } else { - this.select(...this.selectedPointList.filter((it) => { - return it.key !== key || it.index !== index2; - })); - } - } + toSVGString() { + return ""; + } + toFillValue() { + return this.toString(); + } +} +class SVGFill extends PropertyItem { + addImageResource(imageResource) { + this.clear("image-resource"); + return this.addItem("image-resource", imageResource); } - selectKeyIndex(key, index2) { - if (this.points[index2]) { - var point2 = this.points[index2][key]; - if (point2 && !this.isSelectedSegment(key, index2)) { - this.select({ x: point2.x, y: point2.y, key, index: index2 }); - } - } + addGradient(gradient2) { + return this.addImageResource(gradient2); } - reselect() { - this.selectedPointList.filter(Boolean).forEach((it) => { - var _a; - var point2 = (_a = this.points[it.index]) == null ? void 0 : _a[it.key]; - if (point2) { - it.x = point2.x; - it.y = point2.y; - } + setImageUrl(data) { + if (!data.images) + return; + if (!data.images.length) + return; + this.reset({ + type: "image", + image: SVGFill.createImage(data.images[0]) }); } - isSelectedSegment(segment, index2) { - var key = this.getCacheSegmentKey(segment, index2); - return this.selectedPointKeys[key]; - } - commitTransformMatrix(point2, transformMatrix) { - var result = transformMat4([], [point2.x, point2.y, 0], transformMatrix); - return { x: result[0], y: result[1] }; + static createImage(url) { + return new SVGLImageResource({ url }); } - transformMat4(transformMatrix) { - this.transformPoints.forEach((p, index2) => { - var realPoint = this.points[index2]; - Object.assign(realPoint.startPoint, this.commitTransformMatrix(p.startPoint, transformMatrix)); - Object.assign(realPoint.endPoint, this.commitTransformMatrix(p.endPoint, transformMatrix)); - Object.assign(realPoint.reversePoint, this.commitTransformMatrix(p.reversePoint, transformMatrix)); + setGradient(data) { + this.reset({ + type: data.type, + image: SVGFill.createGradient(data, this.json.image) }); } - transform(type) { - var { x, y, width: width2, height: height2 } = this.transformRect; - var view = create$4(); - translate(view, view, [x, y, 0]); - switch (type) { - case "flipX": - scale$1(view, view, [-1, 1, 1]); - translate(view, view, [-width2, 0, 0]); + static createGradient(data, gradient2) { + const colorsteps = data.colorsteps || gradient2.colorsteps; + let json = gradient2.toJSON(); + delete json.itemType; + delete json.type; + switch (data.type) { + case GradientType.LINEAR: + return new SVGLinearGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); + case GradientType.RADIAL: + return new SVGRadialGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); + default: + return new SVGStaticGradient(__spreadProps(__spreadValues({}, json), { colorsteps })); + } + } + get image() { + return this.json.image; + } + set image(image2) { + this.json.image = image2; + } + static parse(obj2) { + return new SVGFill(obj2); + } + static parseImage(str = "") { + const result = parseOneValue(str); + let image2 = null; + if (!result) { + return SVGStaticGradient.create(str || "transparent"); + } + switch (result.func) { + case GradientType.LINEAR: + image2 = SVGLinearGradient.parse(result.matchedString); break; - case "flipY": - scale$1(view, view, [1, -1, 1]); - translate(view, view, [0, -height2, 0]); + case GradientType.RADIAL: + image2 = SVGRadialGradient.parse(result.matchedString); break; - case "flip": - scale$1(view, view, [-1, -1, 1]); - translate(view, view, [-width2, -height2, 0]); + case GradientType.URL: + image2 = SVGImageResource.parse(result.matchedString); + break; + default: + image2 = SVGStaticGradient.create(result.matchedString); break; } - translate(view, view, [-x, -y, 0]); - this.transformMat4(view); - } - initTransform(rect2) { - this.transformRect = clone$1(rect2); - this.transformPoints = this.clonePoints.map((p) => { - return { - startPoint: clone$1(p.startPoint), - endPoint: clone$1(p.endPoint), - reversePoint: clone$1(p.reversePoint) - }; - }); + return image2; } - setConnectedPoint(dx, dy) { - var state = this.state; - var x = state.dragXY.x + dx; - var y = state.dragXY.y + dy; - var endPoint = { x, y }; - var reversePoint = { x, y }; - if (state.dragPoints) { - state.reversePoint = Point.getReversePoint(state.startPoint, endPoint); + static changeImageType(options2) { + switch (options2.type) { + case GradientType.LINEAR: + return new SVGLinearGradient(options2); + case GradientType.RADIAL: + return new SVGRadialGradient(options2); + case "image-resource": + case GradientType.URL: + return new SVGImageResource(options2); + default: + return new SVGStaticGradient(options2); } - var point2 = { - startPoint: state.startPoint, - endPoint, - curve: !!state.dragPoints, - reversePoint, - connected: true, - close: true - }; - this.points.push(point2); } - setLastPoint(startPoint) { - var endPoint = clone$1(startPoint); - var reversePoint = clone$1(startPoint); - var point2 = { - startPoint, - endPoint, - curve: false, - reversePoint, - connected: false, - close: false - }; - this.points.push(point2); +} +const expectedProperties = [ + "appearance", + "border", + "borderRadius", + "backgroundImage", + "backdropFilter", + "clipPath", + "pattern", + "boxShadow", + "layout", + "transform", + "transformOrigin", + "perspective", + "perspectiveOrigin", + "backdropFilter", + "boxModel" +]; +const expectedPropertiesKeys = {}; +expectedProperties.forEach((key) => { + expectedPropertiesKeys[key] = true; +}); +class SVGModel extends LayerModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "svg", + name: "New SVG", + elementType: "svg", + overflow: "visible", + stroke: "black", + strokeWidth: 1, + fill: "transparent", + fillOpacity: 1, + fillRule: "nonzero", + textAnchor: "start", + strokeLinecap: "", + strokeLinejoin: "", + strokeDasharray: [], + strokeDashoffset: 0 + }, obj2)); } - getPrevPoint(index2) { - return Point.getPrevPoint(this.points, index2); + get stroke() { + return this.get("stroke"); } - getIndexPoint(index2) { - return Point.getIndexPoint(this.points, index2); + set stroke(value) { + this.set("stroke", value); } - getNextPoint(index2) { - return Point.getNextPoint(this.points, index2); + get strokeWidth() { + return this.get("strokeWidth"); } - getConnectedPointList(index2) { - return Point.getConnectedPointList(this.points, index2); + set strokeWidth(value) { + this.set("strokeWidth", value); } - isFirst(segment) { - return Point.isFirst(segment); + get fill() { + return this.get("fill"); } - getLastPoint(index2) { - return Point.getLastPoint(this.points, index2); + set fill(value) { + this.set("fill", value); } - setCachePoint(index2, segmentKey) { - var state = this.state; - this.snapPointList = []; - this.selectedIndex = index2; - state.connectedPoint = this.getPrevPoint(index2); - state.connectedPointList = clone$1(Point.getConnectedPointList(this.points, this.selectedIndex)); - if (state.connectedPoint && !state.connectedPoint.connected) { - state.connectedPoint = null; - } - state.segment = this.getIndexPoint(index2); - if (state.segment.connected) { - state.connectedPoint = this.getNextPoint(index2); - } - var isFirstSegment = this.isFirst(state.segment); - if (isFirstSegment) { - var lastPoint = this.getLastPoint(index2); - if (lastPoint.connected) { - state.connectedPoint = lastPoint; - } - } - state.segmentKey = segmentKey; - state.isCurveSegment = state.segment.curve && state.segmentKey != "startPoint"; - state.originalSegment = clone$1(state.segment); - if (state.connectedPoint) { - state.originalConnectedPoint = clone$1(state.connectedPoint); - } - state.cachedPoints = []; - this.points.filter((p) => p && p != state.segment).forEach((p) => { - state.cachedPoints.push(p.startPoint, p.reversePoint, p.endPoint); - }); + get fillOpacity() { + return this.get("fillOpacity"); } - moveSegment(segmentKey, dx, dy, originSegment = void 0) { - if (originSegment) { - const segment = this.points[originSegment.index][segmentKey]; - segment.x = originSegment[segmentKey].x + dx; - segment.y = originSegment[segmentKey].y + dy; - } else { - var state = this.state; - var originPoint = state.originalSegment[segmentKey]; - var targetPoint = state.segment[segmentKey]; - if (originPoint) { - targetPoint.x = originPoint.x + dx; - targetPoint.y = originPoint.y + dy; - } - } + set fillOpacity(value) { + this.set("fillOpacity", value); } - calculateToCurve(point2, nextPoint, prevPoint) { - var centerX = (nextPoint.startPoint.x + prevPoint.startPoint.x) / 2; - var centerY = (nextPoint.startPoint.y + prevPoint.startPoint.y) / 2; - var dx = (nextPoint.startPoint.x - centerX) / 2; - var dy = (nextPoint.startPoint.y - centerY) / 2; - point2.endPoint = { - x: point2.startPoint.x + dx, - y: point2.startPoint.y + dy - }; - point2.reversePoint = { - x: point2.startPoint.x - dx, - y: point2.startPoint.y - dy - }; - return { dx, dy }; + get fillRule() { + return this.get("fillRule"); } - convertToCurve(index2) { - var point2 = this.points[index2]; - if (point2.curve) { - point2.curve = false; - point2.reversePoint = clone$1(point2.startPoint); - point2.endPoint = clone$1(point2.startPoint); - if (point2.command === "M") { - var lastPoint = Point.getPrevPoint(this.points, point2.index); - if (lastPoint.connected) { - lastPoint.curve = false; - lastPoint.reversePoint = clone$1(lastPoint.startPoint); - lastPoint.endPoint = clone$1(lastPoint.startPoint); - } - } else { - var nextPoint = this.getNextPoint(index2); - if (nextPoint && nextPoint.command === "M") { - var firstPoint = nextPoint; - firstPoint.curve = false; - firstPoint.reversePoint = clone$1(firstPoint.startPoint); - firstPoint.endPoint = clone$1(firstPoint.startPoint); - } - } - } else { - point2.curve = true; - var prevPoint = this.getPrevPoint(index2); - var nextPoint = this.getNextPoint(index2); - if (nextPoint && nextPoint.index < index2 && nextPoint.command === "M") { - var firstPoint = nextPoint; - nextPoint = this.getNextPoint(firstPoint.index); - this.calculateToCurve(point2, nextPoint, prevPoint); - firstPoint.curve = true; - firstPoint.endPoint = clone$1(point2.endPoint); - firstPoint.reversePoint = clone$1(point2.reversePoint); - } else if (nextPoint && nextPoint.index > index2 && nextPoint.command !== "M") { - this.calculateToCurve(point2, nextPoint, prevPoint); - } else if (!nextPoint && prevPoint) { - var centerX = (point2.startPoint.x - prevPoint.startPoint.x) / 3; - var centerY = (point2.startPoint.y - prevPoint.startPoint.y) / 3; - point2.endPoint = { - x: point2.startPoint.x + centerX, - y: point2.startPoint.y + centerY - }; - point2.reversePoint = Point.getReversePoint(point2.startPoint, point2.endPoint); - } else if (!prevPoint && nextPoint) { - var centerX = (point2.startPoint.x - nextPoint.startPoint.x) / 3; - var centerY = (point2.startPoint.y - nextPoint.startPoint.y) / 3; - point2.endPoint = { - x: point2.startPoint.x + centerX, - y: point2.startPoint.y + centerY - }; - point2.reverse = Point.getReversePoint(point2.startPoint, point2.endPoint); - } - } + set fillRule(value) { + this.set("fillRule", value); } - moveCurveSegment(segmentKey, dx, dy) { - var state = this.state; - this.moveSegment(segmentKey, dx, dy); - var targetSegmentKey = segmentKey === "endPoint" ? "reversePoint" : "endPoint"; - state.segment[targetSegmentKey] = Point.getReversePoint(state.segment.startPoint, state.segment[segmentKey]); + get textAnchor() { + return this.get("textAnchor"); } - rotateSegmentTarget(segmentKey, target) { - var state = this.state; - if (state.originalSegment && state.segment) { - var { x: cx, y: cy } = state.originalSegment.startPoint; - var { x: rx, y: ry } = state.segment[segmentKey]; - var { x: tx, y: ty } = state.originalSegment[target]; - var { x, y } = getXYInCircle(calculateAngle360(rx - cx, ry - cy), getDist(tx, ty, cx, cy), cx, cy); - state.segment[target] = { x, y }; - } + set textAnchor(value) { + this.set("textAnchor", value); } - rotateSegment(segmentKey) { - this.rotateSegmentTarget(segmentKey, segmentKey === "endPoint" ? "reversePoint" : "endPoint"); + get strokeDasharray() { + return this.get("strokeDasharray"); } - calculateSnap(segmentKey, dx, dy, dist2 = 1) { - var state = this.state; - var cachedPoints = state.cachedPoints; - var original = state.originalSegment[segmentKey]; - if (!segmentKey) { - return { dx, dy, snapPointList: [] }; - } - var realX = original.x + dx; - var realY = original.y + dy; - var { point: snapPointX, distanceValue: dx } = calculateSnapPoint(cachedPoints, "x", realX, dx, dist2); - var { point: snapPointY, distanceValue: dy } = calculateSnapPoint(cachedPoints, "y", realY, dy, dist2); - var snapEndPoint = { - x: original.x + dx, - y: original.y + dy - }; - var snapPointList = []; - if (snapPointX) { - snapPointList.push({ startPoint: snapPointX, endPoint: snapEndPoint }); - } - if (snapPointY) { - snapPointList.push({ startPoint: snapPointY, endPoint: snapEndPoint }); - } - return { dx, dy, snapPointList }; + set strokeDasharray(value) { + this.set("strokeDasharray", value); } - copySegment(from, to) { - to.startPoint = clone$1(from.startPoint); - to.endPoint = clone$1(from.endPoint); - to.reversePoint = clone$1(from.reversePoint); + get strokeDashoffset() { + return this.get("strokeDashoffset"); } - get selectedLength() { - return this.selectedPointList.length; + set strokeDashoffset(value) { + this.set("strokeDashoffset", value); } - moveSelectedSegment(dx, dy) { - if (this.selectedPointList.length > 0) { - this.selectedPointList.forEach((it) => { - var target = this.points[it.index][it.key]; - target.x = it.x + dx; - target.y = it.y + dy; - }); - } else if (this.selectedGroup) { - this.moveSelectedGroup(dx, dy); - } + get strokeLinejoin() { + return this.get("strokeLinejoin"); } - moveSelectedGroup(dx, dy) { - this.selectedGroup.points.forEach((it) => { - const target = this.points[it.index]; - target.startPoint.x = it.startPoint.x + dx; - target.startPoint.y = it.startPoint.y + dy; - target.endPoint.x = it.endPoint.x + dx; - target.endPoint.y = it.endPoint.y + dy; - target.reversePoint.x = it.reversePoint.x + dx; - target.reversePoint.y = it.reversePoint.y + dy; - }); + set strokeLinejoin(value) { + this.set("strokeLinejoin", value); } - get selectedGroup() { - return this.splitedGroupList[this.state.selectedGroupIndex]; + get strokeLinecap() { + return this.get("strokeLinecap"); } - get splitedGroupList() { - return Point.getSplitedGroupList(this.points); + set strokeLinecap(value) { + this.set("strokeLinecap", value); } - get groupList() { - return Point.getGroupList(this.points); + get isDragSelectable() { + return this.isBooleanItem === false; } - getGroup(groupList, pointIndex) { - return Point.getGroup(groupList, pointIndex); + get isBooleanItem() { + return Boolean(this.parent.is("boolean-path")); } - get selectedGroupIndexList() { - const groupIndexList = /* @__PURE__ */ new Set(); - const groupList = this.groupList; - if (this.selectedPointList.length === 0 && this.state.selectedGroupIndex < 0) { - return groupList.map((group2) => group2.groupIndex); + editable(editablePropertyName) { + if (expectedPropertiesKeys[editablePropertyName]) { + return false; } - const points = this.selectedPointList; - points.forEach((it) => { - const group2 = this.getGroup(groupList, it.index); - if (group2) { - groupIndexList.add(group2.groupIndex); - } - }); - return [.../* @__PURE__ */ new Set([...groupIndexList, this.state.selectedGroupIndex])]; + switch (editablePropertyName) { + case "svg-item": + return true; + } + return super.editable(editablePropertyName); } - removeSelectedSegment() { - this.selectedPointList.forEach((it) => { - var target = this.points[it.index][it.key]; - target.removed = true; - }); - const pointGroup = Point.splitPoints(this.points); - const newPoints = Point.recoverPoints(pointGroup.map((points) => { - return points.filter((p) => !p.startPoint.removed).map((p) => { - if (p.endPoint.removed) { - p.endPoint = clone$1(p.startPoint); - } - if (p.reversePoint.removed) { - p.reversePoint = clone$1(p.startPoint); - } - if (Point.isEqual(p.endPoint, p.startPoint, p.reversePoint)) { - p.command = "L"; - p.curve = false; - } - return p; - }); - })); - this.points = newPoints; - this.select(); + getDefaultTitle() { + return "SVG"; } - move(dx, dy, e) { - var state = this.state; - var { isCurveSegment, segmentKey, connectedPoint } = state; - if (this.selectedPointList.length > 1) { - this.moveSelectedSegment(dx, dy); - } else if (this.selectedPointList.length === 1) { - var { dx, dy, snapPointList } = this.calculateSnap(segmentKey, dx, dy, 3); - this.snapPointList = snapPointList || []; - if (isCurveSegment) { - if (e.shiftKey) { - this.moveSegment(segmentKey, dx, dy); - var targetSegmentKey = segmentKey === "endPoint" ? "reversePoint" : "endPoint"; - state.segment[targetSegmentKey] = Point.getReversePoint(state.segment.startPoint, state.segment[segmentKey]); - } else if (e.altKey) { - this.moveSegment(segmentKey, dx, dy); - this.rotateSegment(segmentKey); - } else { - this.moveSegment(segmentKey, dx, dy); - } - } else { - this.moveSegment("startPoint", dx, dy); - this.moveSegment("endPoint", dx, dy); - this.moveSegment("reversePoint", dx, dy); - if (!e.altKey) { - state.connectedPointList.forEach((it) => { - this.moveSegment("startPoint", dx, dy, it); - this.moveSegment("endPoint", dx, dy, it); - this.moveSegment("reversePoint", dx, dy, it); - }); - } - } - connectedPoint && this.copySegment(state.segment, state.connectedPoint); - } else if (this.state.selectedGroupIndex > -1) { - this.moveSelectedGroup(dx, dy); + isSVG() { + return true; + } + hasPoint(x, y) { + const fill = this.fill; + const fillOpacity = this.fillOpacity; + const strokeWidth = this.strokeWidth; + const isTransparent = fill === "transparent" || fillOpacity === 0 || parse(fill).a === 0; + const isZeroStroke = strokeWidth === 0; + if (isTransparent) { + return this.isPointInStroke(x, y); + } else if (!isTransparent && !isZeroStroke) { + return this.isPointInStroke(x, y) || this.isPointInFill(x, y); + } else if (!isTransparent && isZeroStroke) { + return this.isPointInFill(x, y); } + return false; } - moveEnd(dx, dy) { - var state = this.state; - var points = this.points; - var x = state.dragXY.x + dx; - var y = state.dragXY.y + dy; - var endPoint = { x, y }; - var reversePoint = { x, y }; - if (state.dragPoints) { - reversePoint = Point.getReversePoint(state.startPoint, endPoint); + isPointInFill(x, y) { + const svgEl = this.getCache("svgElement"); + const pathEl = this.getCache("pathElement"); + if (pathEl) { + const [localX, localY] = this.invertPoint([x, y, 0]); + const point2 = svgEl.createSVGPoint(); + Object.assign(point2, { x: localX, y: localY }); + return pathEl.isPointInFill(point2); } - points.push({ - command: state.clickCount === 0 ? "M" : "", - startPoint: state.startPoint, - endPoint, - curve: !!state.dragPoints, - reversePoint + return false; + } + isPointInStroke(x, y) { + const svgEl = this.getCache("svgElement"); + const pathEl = this.getCache("pathElement"); + if (pathEl) { + const [localX, localY] = this.invertPoint([x, y, 0]); + const point2 = svgEl.createSVGPoint(); + Object.assign(point2, { x: localX, y: localY }); + return pathEl.isPointInStroke(point2); + } + return false; + } + convertStrokeToPath(distX = 10, distY = 10) { + const attrs = this.attrs("name", "width", "parentId", "height", "x", "y", "transform", "stroke"); + attrs.fill = attrs.stroke; + delete attrs.stroke; + return __spreadProps(__spreadValues({ + itemType: "svg-path", + "fill-rule": "evenodd" + }, attrs), { + x: Length.parse(attrs.x).add(distX), + y: Length.parse(attrs.y).add(distY) }); - state.startPoint = null; - state.dragPoints = false; - state.moveXY = null; } - setPoint(obj2) { - var p0 = obj2.first[0]; - var p1 = obj2.second[obj2.second.length - 1]; - var allPoints = this.clonePoints; - var firstItem = Point.getPoint(allPoints, p0); - var secondItem = Point.getPoint(allPoints, p1); - var newPoints = [ - __spreadProps(__spreadValues({}, firstItem), { endPoint: obj2.first[1] }), - { - startPoint: obj2.first[3], - reversePoint: obj2.first[2], - curve: true, - endPoint: obj2.second[1] - }, - __spreadProps(__spreadValues({}, secondItem), { reversePoint: obj2.second[2] }) - ]; - var firstIndex = Point.getIndex(allPoints, p0); - allPoints.splice(firstIndex, 2, ...newPoints); - this.points = allPoints; - return firstIndex + 1; + toSVGPath() { + const attrs = this.toCloneObject(); + delete attrs.id; + delete attrs.itemType; + return __spreadProps(__spreadValues({}, attrs), { + d: this.d + }); } - setPointQuard(obj2) { - var p0 = obj2.first[0]; - var p1 = obj2.second[obj2.second.length - 1]; - var allPoints = this.clonePoints; - var firstItem = Point.getPoint(allPoints, p0); - var secondItem = Point.getPoint(allPoints, p1); - if (firstItem.curve && secondItem.curve === false) { - var newPoints = [ - __spreadProps(__spreadValues({}, firstItem), { endPoint: firstItem.startPoint }), - { - startPoint: obj2.first[2], - reversePoint: obj2.first[1], - curve: true, - endPoint: obj2.second[1] - } - ]; - var firstIndex = Point.getIndex(allPoints, p0); - allPoints.splice(firstIndex, 1, ...newPoints); - } else { - var newPoints = [ - __spreadValues({}, firstItem), - { - startPoint: obj2.first[2], - reversePoint: obj2.first[1], - curve: true, - endPoint: obj2.second[1] - }, - __spreadProps(__spreadValues({}, secondItem), { reversePoint: obj2.second[1], curve: true }) - ]; - var firstIndex = Point.getIndex(allPoints, p0); - allPoints.splice(firstIndex, 2, ...newPoints); + createFragmentMatrix(field) { + const value = this.get(field); + const image2 = SVGFill.parseImage(value); + const backRect = { + x: 0, + y: 0, + width: this.screenWidth, + height: this.screenHeight + }; + const backVerties = vertiesMap(rectToVerties(backRect.x, backRect.y, backRect.width, backRect.height), this.absoluteMatrix); + const result = { + backRect, + backVerties, + absoluteMatrix: this.absoluteMatrix, + image: image2 + }; + let newX1, newY1, newX2, newY2, newX3, newY3; + switch (image2.type) { + case GradientType.RADIAL: + newX1 = image2.x1.toPx(backRect.width); + newY1 = image2.y1.toPx(backRect.height); + newX2 = image2.x2.toPx(backRect.width); + newY2 = image2.y2.toPx(backRect.height); + newX3 = image2.x3.toPx(backRect.width); + newY3 = image2.y3.toPx(backRect.height); + const tempStartPoint = [newX1.value, newY1.value, 0]; + const tempEndPoint = [newX2.value, newY2.value, 0]; + const tempShapePoint = [newX3.value, newY3.value, 0]; + var [newStartPoint, newEndPoint, newShapePoint] = vertiesMap([tempStartPoint, tempEndPoint, tempShapePoint], this.absoluteMatrix); + result.endPoint = newEndPoint; + result.startPoint = newStartPoint; + result.shapePoint = newShapePoint; + result.colorsteps = image2.colorsteps.map((it) => { + const offset = it.toLength(); + return { + id: it.id, + cut: it.cut, + color: it.color, + timing: it.timing, + timingCount: it.timingCount, + pos: lerp([], result.startPoint, result.endPoint, offset.value / 100) + }; + }); + break; + case GradientType.LINEAR: + newX1 = image2.x1.toPx(backRect.width); + newY1 = image2.y1.toPx(backRect.height); + newX2 = image2.x2.toPx(backRect.width); + newY2 = image2.y2.toPx(backRect.height); + var [newStartPoint, newEndPoint] = vertiesMap([ + [newX1.value, newY1.value, 0], + [newX2.value, newY2.value, 0] + ], this.absoluteMatrix); + result.endPoint = newEndPoint; + result.startPoint = newStartPoint; + result.areaStartPoint = clone(newStartPoint); + result.areaEndPoint = clone(newEndPoint); + result.colorsteps = image2.colorsteps.map((it) => { + const offset = it.toLength(); + return { + id: it.id, + cut: it.cut, + color: it.color, + timing: it.timing, + timingCount: it.timingCount, + pos: lerp([], result.startPoint, result.endPoint, offset.value / 100) + }; + }); + break; } - this.points = allPoints; - return firstIndex + 1; + return result; } - setPointLine(obj2) { - var p0 = obj2.first[0]; - var allPoints = this.clonePoints; - var newPoints = [ - { - command: "L", - startPoint: obj2.first[1], - curve: false, - endPoint: obj2.first[1], - reversePoint: obj2.first[1] - } - ]; - var firstIndex = Point.getIndex(allPoints, p0); - allPoints.splice(firstIndex + 1, 0, ...newPoints); - this.points = allPoints; - return firstIndex + 1; +} +class PathModel extends SVGModel { + getIcon() { + return obj$2.edit; } - toPath(minX = 0, minY = 0, scale2 = 1) { - return toPath(this.clonePoints, minX, minY, scale2); + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "svg-path", + name: "New Path", + strokeWidth: 1, + d: "", + totalLength: 0 + }, obj2)); } - makeSVGPath() { - this.initialize(); - this.makePointGuide(this.points); - this.makeMovePositionGuide(); - return this.toSVGString(); + enableHasChildren() { + return false; } - makeTriangleDistancePointGuide(first, second2) { - var minX = Math.min(first.startPoint.x, second2.startPoint.x); - var maxX = Math.max(first.startPoint.x, second2.startPoint.x); - var minY = Math.min(first.startPoint.y, second2.startPoint.y); - var maxY = Math.max(first.startPoint.y, second2.startPoint.y); - if (first.startPoint.x < second2.startPoint.x && first.startPoint.y < second2.startPoint.y) { - this.segmentManager.addDistanceLine({ x: minX, y: minY }, { x: maxX, y: minY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); - var centerX = minX; - var centerY = minY; - var angle = calculateAngle360(maxX - minX, maxY - minY) - 180; - var dist2 = 20; - var { x, y } = getXYInCircle(0, dist2, centerX, centerY); - var last = getXYInCircle(angle, dist2, centerX, centerY); - this.segmentManager.addDistanceAngle(last, dist2, dist2, angle, { x, y }, { x: x - dist2, y }); - } else if (first.startPoint.x < second2.startPoint.x && first.startPoint.y > second2.startPoint.y) { - this.segmentManager.addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); - } else if (first.startPoint.x > second2.startPoint.x && first.startPoint.y > second2.startPoint.y) { - this.segmentManager.addDistanceLine({ x: minX, y: minY }, { x: minX, y: maxY }).addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }); - } else if (first.startPoint.x > second2.startPoint.x && first.startPoint.y < second2.startPoint.y) { - this.segmentManager.addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); + reset(json, context = { origin: "*" }) { + const isChanged = super.reset(json, context); + if (this.hasChangedField("d")) { + this.cachePath = new PathParser(this.d); + this.cacheWidth = this.width; + this.cacheHeight = this.height; } + return isChanged; } - makeDistancePointGuide(prevPoint, current, nextPoint) { - if (current.selected) { - if (prevPoint) { - this.makeTriangleDistancePointGuide(prevPoint, current); - } - if (nextPoint) { - this.makeTriangleDistancePointGuide(current, nextPoint); - } + refreshMatrixCache() { + super.refreshMatrixCache(); + if (this.hasChangedField("d")) { + this.addCache("pathString", new PathParser(this.get("d"))); + this.addCache("pathWidth", this.width); + this.addCache("pathHeight", this.height); + } else if (this.hasChangedField("width", "height")) { + this.d = this.getCache("pathString").clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; + this.manager.setChanged("reset", this.id, { d: this.d }); } } - makeStartPointGuide(prevPoint, current, nextPoint, index2) { - current.startPoint.isFirst = true; - if (current.curve === false) { - this.segmentManager.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - this.segmentManager.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)).addGuideLine(current.startPoint, current.endPoint); - if (Point.isEqual(current.startPoint, current.endPoint) === false) { - this.segmentManager.addCurvePoint(current.endPoint, index2, "endPoint", this.isSelectedSegment("endPoint", index2)); - } - } + setCache() { + super.setCache(); + this.addCache("pathString", new PathParser(this.get("d"))); + this.addCache("pathWidth", this.width); + this.addCache("pathHeight", this.height); } - makeMiddlePointGuideSegment(prevPoint, current, nextPoint, index2, isSiblingSelected) { - var mng = this.segmentManager; - if (current.curve === false) { - if (prevPoint.curve === false) { - mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - if (isSiblingSelected === false) { - mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { - mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); - } - } - } - } else { - if (prevPoint.curve === false) { - if (isSiblingSelected === false) { - if (Point.isEqual(current.reversePoint, current.startPoint)) { - mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } - } else { - if (Point.isEqual(current.reversePoint, current.startPoint)) { - mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - mng.addGuideLine(current.startPoint, current.reversePoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - if (Point.isEqual(current.startPoint, current.reversePoint) === false) { - mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); - } - } - } - } else { - if (current.connected) { - if (isSiblingSelected === false) - ; - else { - mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addGuideLine(current.startPoint, current.reversePoint); - if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { - mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); - } - if (Point.isEqual(current.startPoint, current.reversePoint) === false) { - mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); - } - } - } else { - if (isSiblingSelected === false) { - mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - } else { - mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addGuideLine(current.startPoint, current.reversePoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); - if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { - mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); - } - if (Point.isEqual(current.startPoint, current.reversePoint) === false) { - mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); - } - } - } - } + get d() { + if (!this.get("d")) { + return null; + } + if (!this.hasCache("pathString")) { + this.addCache("pathString", new PathParser(this.get("d"))); + this.addCache("pathWidth", this.width); + this.addCache("pathHeight", this.height); } + return this.getCache("pathString").clone().scale(this.width / this.getCache("pathWidth"), this.height / this.getCache("pathHeight")).d; } - checkInViewport(point2) { - const vertext = this.pathEditor.$viewport.applyVertexInverse([ - point2.x, - point2.y, - 0 - ]); - return this.pathEditor.$viewport.checkInViewport(vertext); + set d(value) { + this.set("d", value); } - makeMiddlePointGuideSplitLine(prevPoint, current, nextPoint, index2, isSiblingSelected) { - const selected = isSiblingSelected ? "selected" : ""; - if (current.curve === false) { - if (prevPoint.curve === false) { - if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.startPoint)) === false) { - return; - } - this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).L(current.startPoint).toString(`split-path ${selected}`)); - } else { - if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(prevPoint.endPoint) || this.checkInViewport(current.startPoint)) === false) { - return; - } - this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).Q(prevPoint.endPoint, current.startPoint).toString(`split-path ${selected}`)); - } - } else { - if (prevPoint.curve === false) { - if (Point.isEqual(current.reversePoint, current.startPoint)) { - if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.startPoint)) === false) { - return; - } - this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).L(current.startPoint).toString(`split-path ${selected}`)); - } else { - if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.reversePoint) || this.checkInViewport(current.startPoint)) === false) { - return; - } - this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).Q(current.reversePoint, current.startPoint).toString(`split-path ${selected}`)); - } - } else { - if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(prevPoint.endPoint) || this.checkInViewport(current.reversePoint) || this.checkInViewport(current.startPoint)) === false) { - return; - } - this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).C(prevPoint.endPoint, current.reversePoint, current.startPoint).toString(`split-path ${selected}`)); - } - } + getDefaultTitle() { + return "Path"; } - makePointGuide(points) { - for (var index2 = 0, len2 = points.length; index2 < len2; index2++) { - var currentIndex = index2; - var current = points[currentIndex]; - if (!current) - continue; - var nextPoint = Point.getNextPoint(points, index2); - var prevPoint = Point.getPrevPoint(points, index2); - if (prevPoint && prevPoint.command === "M") { - if (current.startPoint) { - current.startPoint.isSecond = true; - } - } - if (current.startPoint) { - if (nextPoint) { - current.startPoint.isLast = nextPoint.command === "M"; - } else { - current.startPoint.isLast = index2 === len2 - 1; - } - } - current.selected = this.selectedIndex === index2; - if (current.command === "M") { - this.makeStartPointGuide(prevPoint, current, nextPoint, index2); - } else { - var isSiblingSelected = Boolean(this.isSelectedSegment("endPoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("startPoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("reversePoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("endPoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("startPoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("reversePoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("endPoint", current == null ? void 0 : current.index) || this.isSelectedSegment("startPoint", current == null ? void 0 : current.index) || this.isSelectedSegment("reversePoint", current == null ? void 0 : current.index)); - this.makeMiddlePointGuideSplitLine(prevPoint, current, nextPoint, index2, isSiblingSelected); - this.makeMiddlePointGuideSegment(prevPoint, current, nextPoint, index2, isSiblingSelected); - } - if (current.close) { - this.pathStringManager.Z(); - } - } +} +class BooleanPathModel extends PathModel { + getIcon() { + return obj$2.edit; } - makeMovePositionGuide() { - var state = this.state; - var { - startPoint, - moveXY, - dragPoints, - snapPointList, - isGroupSegment - } = state; - var points = this.points; - if (moveXY) { - snapPointList = snapPointList || []; - var { snapPointList: movePointSnapPointList, moveXY: newMoveXY } = calculateMovePointSnap(points, moveXY, 3); - snapPointList.push.apply(snapPointList, movePointSnapPointList); - state.moveXY = newMoveXY; - moveXY = newMoveXY; - this.snapPointList = snapPointList; - var prev = points[points.length - 1]; - if (dragPoints && !isGroupSegment) { - if (!prev) { - var { x, y } = Point.getReversePoint(startPoint, moveXY); - this.guideLineManager.M(moveXY).L(startPoint).L({ x, y }); - this.segmentManager.addCurvePoint(startPoint).addCurvePoint(moveXY).addCurvePoint({ x, y }); - } else if (prev.curve) { - var { x, y } = Point.getReversePoint(startPoint, moveXY); - this.guideLineManager.M(prev.startPoint).C(prev.endPoint, { x, y }, startPoint); - this.segmentManager.addGuideLine(prev.startPoint, prev.endPoint).addGuideLine(startPoint, { x, y }).addGuideLine(startPoint, moveXY).addCurvePoint(prev.endPoint).addCurvePoint({ x, y }).addCurvePoint(moveXY).addPoint(false, startPoint); - } else if (prev.curve === false) { - var { x, y } = Point.getReversePoint(startPoint, moveXY); - this.guideLineManager.M(prev.startPoint).Q({ x, y }, startPoint); - this.segmentManager.addGuideLine(moveXY, { x, y }).addPoint(false, startPoint).addCurvePoint({ x, y }).addCurvePoint(moveXY); - } - } else { - if (!prev) - ; - else if (prev.curve) { - this.guideLineManager.M(prev.startPoint).Q(prev.endPoint, moveXY); - this.segmentManager.addGuideLine(prev.endPoint, prev.startPoint).addCurvePoint(prev.endPoint); - } else { - if (!prev.close) { - this.guideLineManager.M(prev.startPoint).L(moveXY); - this.segmentManager.addPoint(false, prev.startPoint); + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "boolean-path", + name: "New Boolean Path", + strokeWidth: 1, + d: "", + booleanOperation: "none" + }, obj2)); + } + get booleanOperation() { + return this.get("booleanOperation"); + } + set booleanOperation(value) { + this.set("booleanOperation", value); + } + enableHasChildren() { + return true; + } + reset(json, context = { origin: "*" }) { + var _a; + const isChanged = super.reset(json, context); + if (!this.cachePath) { + this.setCache(); + } + if (this.hasChangedField("changedChildren", "booleanOperation")) { + if (this.children.length === 1) { + const newPath = this.layers[0].absolutePath().d; + this.d = this.invertPath(newPath).d; + this.setCache(); + this.modelManager.setChanged("reset", this.id, { d: newPath }); + } else if (this.booleanOperation !== "none") { + if (((_a = this.children) == null ? void 0 : _a.length) >= 2) { + if (this.modelManager.editor.pathKitManager.has()) { + const paths = this.layers.filter((it) => it.d); + if (paths.length >= 2) { + const newPath = this.doBooleanOperation(); + this.d = newPath; + this.setCache(); + this.modelManager.setChanged("reset", this.id, { d: newPath }); + } else { + this.d = void 0; + this.removeCache(); + this.modelManager.setChanged("reset", this.id, { d: void 0 }); + } } } } } + return isChanged; } - makeSnapLines() { - var snapLines = []; - if (this.snapPointList) { - var snapPath = new PathStringManager(); - snapLines = this.snapPointList.map((snapPoint) => { - snapPath.reset(); - return snapPath.M(snapPoint.startPoint).L(snapPoint.endPoint).X(snapPoint.startPoint).toString("snap-path"); - }); - } - return snapLines.join(""); + get resizableWitChildren() { + return true; } - makePathArea() { - const pathList = this.splitedGroupList.map(({ startPointIndex, points }, groupIndex) => { - const d = PathGenerator.generatorPathString(points); - const verties = toRectVerties(PathParser.fromSVGString(d).getBBox()); + startToCacheChildren() { + this.cachedSize = { + width: this.width, + height: this.height + }; + this.cachedLayerMatrix = this.layers.map((item) => { + item.startToCacheChildren(); return { - points, - startPointIndex, - groupIndex, - center: verties[4], - d + item, + matrix: item.matrix }; }); - const pathCount = pathList.length; - return ` - - ${pathList.map((it) => { - const { center: center2 } = it; - const [x, y] = center2; - const selected = this.state.selectedGroupIndex === it.groupIndex; - return ` - - - ${pathCount > 1 && ` - ${it.groupIndex + 1} - `} - `; - }).join("")} - - `; } - toSVGString() { - return ` - - ${this.guideLineManager.toString("guide")} - ${this.splitLines.join("")} - ${this.makeSnapLines()} - ${this.makePathArea()} - ${this.segmentManager.toString()} - - `; + recoverChildren() { + const obj2 = { + width: this.width, + height: this.height + }; + const scaleX = obj2.width / this.cachedSize.width; + const scaleY = obj2.height / this.cachedSize.height; + this.cachedLayerMatrix.forEach(({ item, matrix }) => { + item.reset({ + x: item.x.changeUnitValue(matrix.x * scaleX, obj2.width), + y: item.y.changeUnitValue(matrix.y * scaleY, obj2.height), + width: item.width.changeUnitValue(matrix.width * scaleX, obj2.width), + height: item.height.changeUnitValue(matrix.height * scaleY, obj2.height) + }); + item.recoverChildren(); + }); + } + getFieldValueByBooleanOperation(field) { + const layers2 = this.layers; + if (layers2.length === 0) { + return; + } else if (layers2.length === 1) { + return layers2[0][field]; + } + const op = this.booleanOperation; + switch (op) { + case BooleanOperation.DIFFERENCE: + return layers2[1][field]; + } + return layers2[0][field]; + } + get fill() { + return this.getFieldValueByBooleanOperation("fill"); + } + get stroke() { + return this.getFieldValueByBooleanOperation("stroke"); + } + setCache() { + super.setCache(); + this.cachePath = new PathParser(this.d); + this.cacheWidth = this.width; + this.cacheHeight = this.height; + } + removeCache() { + super.removeCache(); + this.cachePath = void 0; + this.cacheWidth = void 0; + this.cacheHeight = void 0; + } + getDefaultTitle() { + return "Path"; + } + doBooleanOperation() { + const op = this.booleanOperation; + switch (op) { + case BooleanOperation.INTERSECTION: + return this.intersection(); + case BooleanOperation.UNION: + return this.union(); + case BooleanOperation.DIFFERENCE: + return this.difference(); + case BooleanOperation.REVERSE_DIFFERENCE: + return this.reverseDifference(); + case BooleanOperation.XOR: + return this.xor(); + } + return ""; + } + getPathList() { + return this.layers.map((it) => it.absolutePath().d); + } + intersection() { + const [first, ...rest] = this.getPathList(); + const newPath = rest.reduce((path1, path2) => { + return this.modelManager.editor.pathKitManager.intersection(path1, path2); + }, first); + return this.invertPath(newPath).d; + } + union() { + const [first, ...rest] = this.getPathList(); + const newPath = rest.reduce((path1, path2) => { + return this.modelManager.editor.pathKitManager.union(path1, path2); + }, first); + return this.invertPath(newPath).d; + } + difference() { + const [first, ...rest] = this.getPathList(); + const newPath = rest.reduce((path1, path2) => { + return this.modelManager.editor.pathKitManager.difference(path1, path2); + }, first); + return this.invertPath(newPath).d; + } + reverseDifference() { + const [first, ...rest] = this.getPathList(); + const newPath = rest.reduce((path1, path2) => { + return this.modelManager.editor.pathKitManager.reverseDifference(path1, path2); + }, first); + return this.invertPath(newPath).d; + } + xor() { + const [first, ...rest] = this.getPathList(); + const newPath = rest.reduce((path1, path2) => { + return this.modelManager.editor.pathKitManager.xor(path1, path2); + }, first); + return this.invertPath(newPath).d; } } -function xy([x, y]) { - return { x, y }; +class CircleLayer extends LayerModel { + getIcon() { + return obj$2.lens; + } + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "circle", + name: "New Circle", + borderRadius: "100%" + }, obj2)); + } + getDefaultTitle() { + return "Circle"; + } } -const SegmentConvertor = class extends EditorElement { - convertToCurve(index2) { - this.pathGenerator.convertToCurve(index2); - this.renderPath(); - this.refreshPathLayer(); +class ImageLayer extends LayerModel { + getIcon() { + return obj$2.image; } - isEditableSegment() { - return this.state.disableCurve === false; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "image", + name: "New Image", + elementType: "image", + src: "" + }, obj2)); } - [DOUBLECLICK("$view [data-segment]") + IF("isEditableSegment") + PREVENT](e) { - var index2 = +e.$dt.attr("data-index"); - this.convertToCurve(index2); + get src() { + return this.get("src"); } - [DOUBLETAB("$view [data-segment]") + PREVENT + DELAY(300)](e) { - var index2 = +e.$dt.attr("data-index"); - this.convertToCurve(index2); + set src(value) { + this.set("src", value); } -}; -const PathCutter = class extends SegmentConvertor { - calculatePointOnLine(d, clickPosition) { - var parser = new PathParser(d); - return parser.getClosedPoint(clickPosition); + get naturalWidth() { + return this.get("naturalWidth"); } - [POINTERSTART("$view .split-path") + MOVE() + END()](e) { - this.initRect(); - var parser = new PathParser(e.$dt.attr("d")); - var clickPosition = { - x: e.xy.x - this.state.rect.x, - y: e.xy.y - this.state.rect.y - }; - var selectedSegmentIndex = -1; - if (this.isMode("path")) { - this.state.dragXY = clickPosition; - this.state.startPoint = this.state.dragXY; - this.pathGenerator.setLastPoint(this.state.startPoint); - this.state.isSplitPath = true; - this.renderPath(); - if (this.state.current) { - this.refreshPathLayer(); - } else { - this.addPathLayer(); - this.trigger("initPathEditorView"); - } - return; - } else { - if (parser.segments[1].command === "C") { - var points = [ - xy(parser.segments[0].values), - xy(parser.segments[1].values.slice(0, 2)), - xy(parser.segments[1].values.slice(2, 4)), - xy(parser.segments[1].values.slice(4, 6)) - ]; - var curve = recoverBezier(...points, 20); - var t = curve(clickPosition.x, clickPosition.y); - selectedSegmentIndex = this.pathGenerator.setPoint(getBezierPoints(points, t)); - } else if (parser.segments[1].command === "Q") { - var points = [ - xy(parser.segments[0].values), - xy(parser.segments[1].values.slice(0, 2)), - xy(parser.segments[1].values.slice(2, 4)) - ]; - var curve = recoverBezierQuard(...points, 20); - var t = curve(clickPosition.x, clickPosition.y); - selectedSegmentIndex = this.pathGenerator.setPointQuard(getBezierPointsQuard(points, t)); - } else if (parser.segments[1].command === "L") { - var points = [ - xy(parser.segments[0].values), - xy(parser.segments[1].values.slice(0, 2)) - ]; - var curve = recoverBezierLine(...points, 20); - var t = curve(clickPosition.x, clickPosition.y); - selectedSegmentIndex = this.pathGenerator.setPointLine(getBezierPointsLine(points, t)); - if (e.altKey) { - this.pathGenerator.convertToCurve(selectedSegmentIndex); - } - } - this.renderPath(); - this.refreshPathLayer(); - this.changeMode("segment-move"); - this.pathGenerator.setCachePoint(selectedSegmentIndex, "startPoint"); - this.pathGenerator.selectKeyIndex("startPoint", selectedSegmentIndex); - } + set naturalWidth(value) { + this.set("naturalWidth", value); } -}; -const PathTransformEditor = class extends PathCutter { - [SUBSCRIBE("changePathTransform")](transformMoveType) { - this.resetTransformZone(); - var { width: width2, height: height2 } = this.state.transformZoneRect; - this.pathGenerator.initTransform(this.state.transformZoneRect); - switch (transformMoveType) { - case "flipX": - this.pathGenerator.transform("flipX", width2, 0); - break; - case "flipY": - this.pathGenerator.transform("flipY", 0, height2); - break; - case "flip": - this.pathGenerator.transform("flip", width2, height2); - } - this.renderPath(); - this.refreshPathLayer(); + get naturalHeight() { + return this.get("naturalHeight"); } - [SUBSCRIBE("changePathUtil")](utilType) { - if (utilType === "reverse") { - const { d } = this.pathGenerator.toPath(); - const pathParser = new PathParser(d); - pathParser.reverse(...this.pathGenerator.selectedGroupIndexList); - pathParser.transformMat4(this.state.cachedMatrixInverse); - this.refreshEditorView({ d: pathParser.d }); - this.updatePathLayer(); - } + set naturalHeight(value) { + this.set("naturalHeight", value); } - [SUBSCRIBE("divideSegmentsByCount")](count) { - const { d } = this.pathGenerator.toPath(); - const pathParser = new PathParser(d); - const newPath = pathParser.divideSegmentByCount(count); - newPath.transformMat4(this.state.cachedMatrixInverse); - this.refreshEditorView({ d: newPath.d }); + enableHasChildren() { + return false; } -}; -const FIELDS = ["fill", "fill-opacity", "stroke", "stroke-width"]; -class PathEditorView extends PathTransformEditor { - initialize() { - super.initialize(); - this.pathParser = new PathParser(); - this.pathGenerator = new PathGenerator(this); + getDefaultTitle() { + return "Image"; } - initState() { - return { - changeEvent: "updatePathItem", - isShow: false, - isControl: false, - disableCurve: false, - points: [], - mode: "path", - clickCount: 0, - isSegment: false, - isFirstSegment: false, - current: null - }; + resize() { + this.reset({ + width: this.naturalWidth.clone(), + height: this.naturalHeight.clone() + }); } - get scale() { - return this.$viewport.scale; +} +class PolygonModel extends SVGModel { + getIcon() { + return obj$2.edit; } - template() { - return ` -
- - - - - - - - - - - -
-
- - - -
-
-
`; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "polygon", + name: "New Polygon", + strokeWidth: 1, + count: 3 + }, obj2)); } - isShow() { - return this.state.isShow; + get count() { + return this.get("count"); } - initRect(isForce = false) { - if (!this.state.rect || isForce) { - this.state.rect = this.$el.rect(); - } + set count(value) { + this.set("count", value); } - [SUBSCRIBE("PathEditorDone")]() { - if (this.state.current) { - this.refreshPathLayer(); - this.trigger("hidePathEditor"); + convert(json) { + json = super.convert(json); + if (json.count) + json.count = +json.count; + return json; + } + enableHasChildren() { + return false; + } + get editablePath() { + return false; + } + get d() { + const { width: width2, height: height2, count } = this; + return PathParser.makePolygon(width2, height2, count).d; + } + getDefaultTitle() { + return "Polygon"; + } + isPointInPath(point2) { + const localPoint = transformMat4([], point2, this.absoluteMatrixInverse); + return this.cachePath.isPointInPath({ x: localPoint[0], y: localPoint[1] }, this.strokeWidth || 0); + } +} +function makeInterpolateIdentity(layer, property, value) { + return () => { + return value; + }; +} +function makeInterpolateNumber(layer, property, startNumber, endNumber, unit = void 0) { + return (rate, t) => { + var result = 0; + if (t === 0) { + result = startNumber; + } else if (t === 1) { + result = endNumber; } else { - this.addPathLayer(); + result = startNumber + (endNumber - startNumber) * rate; } - if (!this.state.current && this.pathGenerator.length) { - this.trigger("initPathEditorView"); - } else { - this.trigger("hidePathEditor"); + if (unit) { + return result + unit; } + return result; + }; +} +function getRealAttributeValue(layer, property, value, refType = "width", refElement = "parent") { + var refObject = null; + if (refElement === "parent") { + refObject = layer[refElement][refType]; + } else if (refElement === "self") { + refObject = layer[refType]; } - [KEYUP("document") + IF("isShow") + ENTER]() { - this.trigger("PathEditorDone"); + if (refObject) { + return value.toPx(refObject.value); } - [KEYUP("document") + IF("isShow") + ESCAPE]() { - if (this.state.current) { - this.refreshPathLayer(); + return value; +} +function rollbackRealAttributeValue(layer, property, value, unit, refType = "width", refElement = "parent") { + var refObject = null; + if (refElement === "parent") { + refObject = layer[refElement][refType]; + } else if (refElement === "self") { + refObject = layer[refType]; + } + if (refObject) { + return value.to(unit, refObject.value); + } + return value; +} +function makeInterpolateLength(layer, property, startNumber, endNumber, refType = "width", refElement = "parent") { + var s = Length.parse(startNumber); + var e = Length.parse(endNumber); + if (s.unit === e.unit) { + return makeInterpolateNumber(layer, property, s.value, e.value, s.unit); + } else if (s.equals(e)) { + return makeInterpolateIdentity(layer, property, s); + } + return (rate, t) => { + var realStartValue = getRealAttributeValue(layer, property, s, refType, refElement); + var realEndValue = getRealAttributeValue(layer, property, e, refType, refElement); + if (t === 0) { + return realStartValue; + } else if (t === 1) { + return realEndValue; + } + return rollbackRealAttributeValue(layer, property, realStartValue.value + (realEndValue.value - realStartValue.value) * rate, s.unit, refType, refElement); + }; +} +function makeInterpolateBoolean(layer, property, s, e) { + return (ratio, t) => { + if (t === 1) { + return e; + } + return s; + }; +} +function makeInterpolateColor(layer, property, startColor, endColor) { + var s = parse(startColor || "rgba(0, 0, 0, 1)"); + var e = parse(endColor || "rgba(0, 0, 0, 1)"); + return (rate, t) => { + if (t === 0) { + return startColor; + } else if (t === 1) { + return endColor; + } + return interpolateRGB(s, e, rate, "rgb"); + }; +} +function makeInterpolateString(layer, property, startString, endString) { + return makeInterpolateBoolean(layer, property, startString, endString); +} +function makeInterpolateColorStep(layer, property, startColorStep, endColorStep) { + var obj2 = { + cut: makeInterpolateBoolean(layer, property, startColorStep.cut, endColorStep.cut), + percent: makeInterpolateNumber(layer, property, startColorStep.percent, endColorStep.percent), + px: makeInterpolateNumber(layer, property, startColorStep.px, endColorStep.px), + em: makeInterpolateNumber(layer, property, startColorStep.em, endColorStep.em), + unit: makeInterpolateString(layer, property, startColorStep.unit, endColorStep.unit), + color: makeInterpolateColor(layer, property, startColorStep.color, endColorStep.color) + }; + return (rate, t) => { + return new ColorStep({ + cut: obj2.cut(rate, t), + percent: obj2.percent(rate, t), + px: obj2.px(rate, t), + em: obj2.em(rate, t), + unit: obj2.unit(rate, t), + color: obj2.color(rate, t) + }); + }; +} +function makeInterpolateColorStepList(layer, property, startColorsteps = [], endColorsteps = []) { + var max = Math.max(startColorsteps.length, endColorsteps.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var s = startColorsteps[i]; + var e = endColorsteps[i]; + if (s && e) { + list2[i] = makeInterpolateColorStep(layer, property, s, e); } else { - this.addPathLayer(); + list2[i] = makeInterpolateBoolean(layer, property, s, e); } - this.trigger("hidePathEditor"); } - makePathLayer() { - const pathString2 = this.pathGenerator.toPath().d; - if (!pathString2) { - return; - } - var layer; - const newPath = new PathParser(pathString2); - newPath.transformMat4(this.$viewport.matrixInverse); - const bbox = newPath.getBBox(); - const newWidth = distance$1(bbox[1], bbox[0]); - const newHeight = distance$1(bbox[3], bbox[0]); - newPath.translate(-bbox[0][0], -bbox[0][1]); - const pathItem = { - itemType: "svg-path", - x: bbox[0][0], - y: bbox[0][1], - width: newWidth, - height: newHeight, - d: newPath.d, - fill: newPath.closed ? `#C4C4C4` : "transparent" - }; - FIELDS.forEach((key) => { - if (this.state[key]) { - pathItem[key] = this.state[key]; - } + return (rate, t) => { + return list2.map((it) => it(rate, t)); + }; +} +function makeInterpolateConicGradient(layer, property, s, e) { + var obj2 = { + angle: makeInterpolateNumber(layer, property, s.angle, e.angle), + radialPositionX: makeInterpolateLength(layer, property, s.radialPosition[0], e.radialPosition[0], "width", "self"), + radialPositionY: makeInterpolateLength(layer, property, s.radialPosition[1], e.radialPosition[1], "height", "self"), + colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) + }; + return (rate, t) => { + return new ConicGradient({ + angle: obj2.angle(rate, t), + radialPosition: [ + obj2.radialPositionX(rate, t), + obj2.radialPositionY(rate, t) + ], + colorsteps: obj2.colorsteps(rate, t) }); - const containerItem = this.$context.selection.currentProject; - layer = containerItem.appendChild(this.$editor.createModel(pathItem)); - this.$commands.executeCommand("moveLayerToTarget", "add path", layer, this.$context.selection.currentProject); - return layer; - } - updatePathLayer() { - var { d } = this.pathGenerator.toPath(); - var parser = new PathParser(d); - parser.transformMat4(this.$viewport.matrixInverse); - this.emit(this.state.changeEvent, { - d: parser.d, - matrix: this.state.matrix, - box: this.state.box + }; +} +function makeInterpolateLinearGradient(layer, property, s, e) { + var obj2 = { + angle: makeInterpolateNumber(layer, property, s.angle, e.angle), + colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) + }; + return (rate, t) => { + var colorsteps = obj2.colorsteps(rate, t); + return new LinearGradient({ + angle: obj2.angle(rate, t), + colorsteps }); + }; +} +function convertPercent(value, type) { + switch (type) { + case "width": + if (value === "center") { + return "50%"; + } else if (value === "left") { + return "0%"; + } else if (value === "right") { + return "100%"; + } + break; + case "height": + if (value === "center") { + return "50%"; + } else if (value === "top") { + return "0%"; + } else if (value === "bottom") { + return "100%"; + } + break; } - addPathLayer() { - this.changeMode("modify"); - var layer = this.makePathLayer(); - if (layer) { - this.$config.set("editing.mode.itemType", "select"); - this.$context.selection.select(layer); - this.trigger("hidePathEditor"); + return value; +} +function makeInterpolateRadialGradient(layer, property, s, e) { + s.radialPosition[0] = convertPercent(s.radialPosition[0], "width"); + s.radialPosition[1] = convertPercent(s.radialPosition[1], "height"); + e.radialPosition[0] = convertPercent(e.radialPosition[0], "width"); + e.radialPosition[1] = convertPercent(e.radialPosition[1], "height"); + var obj2 = { + radialType: makeInterpolateString(layer, property, s.radialType, e.radialType), + radialPositionX: makeInterpolateLength(layer, property, s.radialPosition[0], e.radialPosition[0], "width", "self"), + radialPositionY: makeInterpolateLength(layer, property, s.radialPosition[1], e.radialPosition[1], "height", "self"), + colorsteps: makeInterpolateColorStepList(layer, property, s.colorsteps, e.colorsteps) + }; + return (rate, t) => { + var results = new RadialGradient({ + radialType: obj2.radialType(rate, t), + radialPosition: [ + obj2.radialPositionX(rate, t), + obj2.radialPositionY(rate, t) + ], + colorsteps: obj2.colorsteps(rate, t) + }); + return results; + }; +} +function makeInterpolateRepeatingConicGradient(layer, property, s, e) { + var func = makeInterpolateConicGradient(layer, property, s, e); + return (rate, t) => { + var obj2 = func(rate, t); + return new RepeatingConicGradient({ + angle: obj2.angle, + radialPosition: obj2.radialPosition, + colorsteps: obj2.colorsteps + }); + }; +} +function makeInterpolateRepeatingLinearGradient(layer, property, s, e) { + var func = makeInterpolateLinearGradient(layer, property, s, e); + return (rate, t) => { + var obj2 = func(rate, t); + var results = new RepeatingLinearGradient({ + angle: obj2.angle, + colorsteps: obj2.colorsteps + }); + return results; + }; +} +function makeInterpolateRepeatingRadialGradient(layer, property, s, e) { + var func = makeInterpolateRadialGradient(layer, property, s, e); + return (rate, t) => { + var obj2 = func(rate, t); + return new RepeatingRadialGradient({ + radialType: obj2.radialType, + radialPosition: obj2.radialPosition, + colorsteps: obj2.colorsteps + }); + }; +} +function makeInterpolateImageResource(layer, property, s, e) { + var obj2 = { + image: (rate, t) => { + return t; + } + }; + if (s.type === "url" || e.type === "url") { + obj2.image = makeInterpolateBoolean(layer, property, s, e); + } else { + if (s.type != e.type) { + obj2.image = makeInterpolateBoolean(layer, property, s, e); + } else { + switch (s.type) { + case "linear-gradient": + obj2.image = makeInterpolateLinearGradient(layer, property, s, e); + break; + case "repeating-linear-gradient": + obj2.image = makeInterpolateRepeatingLinearGradient(layer, property, s, e); + break; + case "radial-gradient": + obj2.image = makeInterpolateRadialGradient(layer, property, s, e); + break; + case "repeating-radial-gradient": + obj2.image = makeInterpolateRepeatingRadialGradient(layer, property, s, e); + break; + case "conic-gradient": + obj2.image = makeInterpolateConicGradient(layer, property, s, e); + break; + case "repeating-conic-gradient": + obj2.image = makeInterpolateRepeatingConicGradient(layer, property, s, e); + break; + } } } - changeMode(mode, obj2) { - this.setState(__spreadValues({ - mode, - clickCount: 0, - moveXY: null - }, obj2), false); - if (obj2 == null ? void 0 : obj2.points) { - this.pathGenerator.setPoints(obj2.points || []); + return (rate, t) => { + return obj2.image(rate, t); + }; +} +function makeInterpolateBackgroundImage(layer, property, startValue, endValue) { + var s = BackgroundImage.parseStyle(STRING_TO_CSS(startValue)); + var e = BackgroundImage.parseStyle(STRING_TO_CSS(endValue)); + var totalLength = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0, len2 = totalLength; i < len2; i++) { + var startObject = s[i] || null; + var endObject = e[i] || null; + if (startObject && !endObject) { + list2.push({ + image: makeInterpolateIdentity(layer, property, startObject.image), + size: makeInterpolateIdentity(layer, property, startObject.size), + width: makeInterpolateIdentity(layer, property, startObject.width), + height: makeInterpolateIdentity(layer, property, startObject.height), + x: makeInterpolateIdentity(layer, property, startObject.x), + y: makeInterpolateIdentity(layer, property, startObject.y), + blendMode: makeInterpolateIdentity(layer, property, startObject.blendMode), + repeat: makeInterpolateIdentity(layer, property, startObject.repeat) + }); + } else if (!startObject && endObject) { + list2.push({ + image: makeInterpolateIdentity(layer, property, endObject.image), + size: makeInterpolateIdentity(layer, property, endObject.size), + width: makeInterpolateIdentity(layer, property, endObject.width), + height: makeInterpolateIdentity(layer, property, endObject.height), + x: makeInterpolateIdentity(layer, property, endObject.x), + y: makeInterpolateIdentity(layer, property, endObject.y), + blendMode: makeInterpolateIdentity(layer, property, endObject.blendMode), + repeat: makeInterpolateIdentity(layer, property, endObject.repeat) + }); + } else if (startObject && endObject) { + list2.push({ + image: makeInterpolateImageResource(layer, property, startObject.image, endObject.image), + size: makeInterpolateString(layer, property, startObject.size, endObject.size), + width: makeInterpolateLength(layer, property, startObject.width, endObject.width, "width", "self"), + height: makeInterpolateLength(layer, property, startObject.height, endObject.height, "height", "self"), + x: makeInterpolateLength(layer, property, startObject.x, endObject.x, "width", "self"), + y: makeInterpolateLength(layer, property, startObject.y, endObject.y, "height", "self"), + blendMode: makeInterpolateString(layer, property, startObject.blendMode, endObject.blendMode), + repeat: makeInterpolateString(layer, property, startObject.repeat, endObject.repeat) + }); } - this.emit("changePathManager", this.state.mode); } - [SUBSCRIBE("changePathManager")](obj2) { - this.setState(__spreadProps(__spreadValues({}, obj2), { clickCount: 0 }), false); - this.renderPath(); + return (rate, t) => { + return BackgroundImage.join(list2.map((it) => { + var data = { + image: it.image(rate, t), + size: it.size(rate, t), + x: it.x(rate, t), + y: it.y(rate, t), + width: it.width(rate, t), + height: it.height(rate, t), + blendMode: it.blendMode(rate, t), + repeat: it.repeat(rate, t) + }; + return data; + })); + }; +} +const getBorderRadiusList = (radiusValue) => { + var startObject = []; + if (radiusValue.isAll) { + startObject = [ + radiusValue["border-radius"] || "0px", + radiusValue["border-radius"] || "0px", + radiusValue["border-radius"] || "0px", + radiusValue["border-radius"] || "0px" + ]; + } else { + startObject = [ + radiusValue["border-top-left-radius"] || "0px", + radiusValue["border-top-right-radius"] || "0px", + radiusValue["border-bottom-right-radius"] || "0px", + radiusValue["border-bottom-left-radius"] || "0px" + ]; } - isMode(mode) { - return this.state.mode === mode; + return startObject; +}; +function makeInterpolateBorderRadius(layer, property, startValue, endValue) { + var s = getBorderRadiusList(BorderRadius.parseStyle(startValue)); + var e = getBorderRadiusList(BorderRadius.parseStyle(endValue)); + var max = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0; i < max; i++) { + list2[i] = makeInterpolateLength(layer, property, s[i], e[i]); } - afterRender() { - this.$el.hide(); + return (rate, t) => { + return list2.map((it) => it(rate, t)).join(" "); + }; +} +function makeInterpolateBoxShadow(layer, property, startValue, endValue) { + var s = BoxShadow.parseStyle(startValue); + var e = BoxShadow.parseStyle(endValue); + var totalLength = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0, len2 = totalLength; i < len2; i++) { + var startObject = s[i] || BoxShadow.parseStyle("0px 0px 0px 0px rgba(0, 0, 0, 0)")[0]; + var endObject = e[i] || BoxShadow.parseStyle("0px 0px 0px 0px rgba(0, 0, 0, 0)")[0]; + list2.push({ + inset: makeInterpolateBoolean(layer, property, startObject.inset, endObject.inset), + offsetX: makeInterpolateLength(layer, property, startObject.offsetX, endObject.offsetX), + offsetY: makeInterpolateLength(layer, property, startObject.offsetY, endObject.offsetY), + blurRadius: makeInterpolateLength(layer, property, startObject.blurRadius, endObject.blurRadius), + spreadRadius: makeInterpolateLength(layer, property, startObject.spreadRadius, endObject.spreadRadius), + color: makeInterpolateColor(layer, property, startObject.color, endObject.color) + }); } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - if (this.$el.isShow()) { - const { d } = this.pathGenerator.toPath(); - const pathParser = new PathParser(d); - pathParser.transformMat4(this.state.cachedMatrixInverse); - this.refreshEditorView({ d: pathParser.d }); + return (rate, t) => { + return BoxShadow.join(list2.map((it) => { + return { + inset: it.inset(rate, t), + offsetX: it.offsetX(rate, t), + offsetY: it.offsetY(rate, t), + blurRadius: it.blurRadius(rate, t), + spreadRadius: it.spreadRadius(rate, t), + color: it.color(rate, t) + }; + })); + }; +} +function makeInterpolateClipPathCircle(layer, property, s, e) { + var obj2 = {}; + if (s.radius === "closest-side" || s.radius === "farthest-side" || e.radius === "closest-side" || e.radius === "farthest-side") { + obj2.radius = makeInterpolateBoolean(layer, property, s.radius, e.radius); + } else { + if (s.radius.unit === e.radius.unit) { + obj2.radius = makeInterpolateNumber(layer, property, s.radius.value, e.radius.value, s.radius.unit); + } else { + obj2.radius = makeInterpolateLength(layer, property, s.radius, e.radius, "width", "self"); } } - refreshEditorView(obj2) { - if (obj2 && obj2.d) { - this.pathParser.reset(obj2.d); - this.pathParser.transformMat4(this.$viewport.matrix); - this.state.cachedMatrixInverse = this.$viewport.matrixInverse; - this.pathGenerator.setPoints(this.pathParser.convertGenerator()); + obj2.x = makeInterpolateLength(layer, property, s.x, e.x, "width", "self"); + obj2.y = makeInterpolateLength(layer, property, s.y, e.y, "height", "self"); + return (rate, t) => { + var radius = obj2.radius(rate, t); + var x = obj2.x(rate, t); + var y = obj2.y(rate, t); + var results = `${x} ${y}`; + var radiusString = radius + ""; + if (radiusString.includes("closest-side")) { + radiusString = "closest-side"; + } else if (radiusString.includes("farthest-side")) { + radiusString = "farthest-side"; } - this.renderPath(); - } - [SUBSCRIBE("showPathEditor")](mode = "path", obj2 = {}) { - this.state.isShow = true; - this.transformMode = mode; - if (mode === "move") { - obj2.current = null; - obj2.points = []; + return radius ? `${radiusString} at ${results}` : `${results}`; + }; +} +function makeInterpolateClipPathEllipse(layer, property, s, e) { + var obj2 = { + radiusX: makeInterpolateLength(layer, property, s.radiusX, e.radiusX, "width", "self"), + radiusY: makeInterpolateLength(layer, property, s.radiusY, e.radiusY, "height", "self"), + x: makeInterpolateLength(layer, property, s.x, e.x, "width", "self"), + y: makeInterpolateLength(layer, property, s.y, e.y, "height", "self") + }; + return (rate, t) => { + var radiusX = obj2.radiusX(rate, t); + var radiusY = obj2.radiusY(rate, t); + var x = obj2.x(rate, t); + var y = obj2.y(rate, t); + return `${radiusX} ${radiusY} at ${x} ${y}`; + }; +} +function makeInterpolateClipPathInset(layer, property, s, e) { + var obj2 = { + top: makeInterpolateNumber(layer, property, s.top.value, e.top.value, s.top.unit), + left: makeInterpolateNumber(layer, property, s.left.value, e.left.value, s.left.unit), + right: makeInterpolateNumber(layer, property, s.right.value, e.right.value, s.right.unit), + bottom: makeInterpolateNumber(layer, property, s.bottom.value, e.bottom.value, s.bottom.unit), + round: makeInterpolateBoolean(layer, property, s.round, e.round), + topRadius: makeInterpolateNumber(layer, property, s.topRadius.value, e.topRadius.value, s.topRadius.unit), + leftRadius: makeInterpolateNumber(layer, property, s.leftRadius.value, e.leftRadius.value, s.leftRadius.unit), + rightRadius: makeInterpolateNumber(layer, property, s.rightRadius.value, e.rightRadius.value, s.rightRadius.unit), + bottomRadius: makeInterpolateNumber(layer, property, s.bottomRadius.value, e.bottomRadius.value, s.bottomRadius.unit) + }; + return (rate, t) => { + var top2 = obj2.top(rate, t); + var right2 = obj2.right(rate, t); + var bottom2 = obj2.bottom(rate, t); + var left2 = obj2.left(rate, t); + var round2 = obj2.round(rate, t); + var topRadius = obj2.topRadius(rate, t); + var leftRadius = obj2.leftRadius(rate, t); + var bottomRadius = obj2.bottomRadius(rate, t); + var rightRadius = obj2.rightRadius(rate, t); + var position2 = [top2, right2, bottom2, left2].join(" "); + var radius = [topRadius, rightRadius, bottomRadius, leftRadius].join(" "); + var results = `${position2} ${round2 && radius.trim() ? `round ${radius}` : ""}`; + return results; + }; +} +function makeInterpolateClipPathPolygon(layer, property, s, e) { + var max = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var startPos = s[i]; + var endPos = e[i]; + if (startPos && !endPos) { + list2.push({ + x: makeInterpolateIdentity(layer, property, startPos.x), + y: makeInterpolateIdentity(layer, property, startPos.y) + }); + } else if (!startPos && endPos) { + list2.push({ + x: makeInterpolateIdentity(layer, property, endPos.x), + y: makeInterpolateIdentity(layer, property, endPos.y) + }); + } else { + list2.push({ + x: makeInterpolateLength(layer, property, startPos.x, endPos.x, "width", "self"), + y: makeInterpolateLength(layer, property, startPos.y, endPos.y, "height", "self") + }); } - obj2.box = obj2.box || "canvas"; - this.changeMode(mode, obj2); - this.refreshEditorView(obj2, true); - this.$el.show(); - this.$el.focus(); - this.emit("showPathManager", { mode: this.state.mode }); - this.emit("hidePathDrawEditor"); - this.$context.commands.emit("push.mode.view", "PathEditorView"); } - [SUBSCRIBE("hidePathEditor")]() { - if (this.$el.isShow()) { - this.pathParser.reset(""); - this.pathGenerator.setPoints([]); - this.setState(this.initState(), false); - this.refs.$view.empty(); - this.$el.hide(); - this.emit("hidePathManager"); - this.$context.commands.emit("pop.mode.view", "PathEditorView"); - this.emit(REFRESH_SELECTION); + return (rate, t) => { + return list2.map((it) => { + return `${it.x(rate, t)} ${it.y(rate, t)}`; + }).join(","); + }; +} +function makeInterpolateClipPath(layer, property, startValue, endValue) { + var startObject = ClipPath.parseStyle(startValue); + var endObject = ClipPath.parseStyle(endValue); + var obj2 = { + type: makeInterpolateBoolean(layer, property, startObject.type, startObject.type), + value: makeInterpolateBoolean(layer, property, startValue, endValue) + }; + if (startObject.type == endObject.type && startObject != "none") { + switch (startObject.type) { + case "circle": + startObject.value = ClipPath.parseStyleForCircle(startObject.value); + endObject.value = ClipPath.parseStyleForCircle(endObject.value); + obj2.value = makeInterpolateClipPathCircle(layer, property, startObject.value, endObject.value); + break; + case "ellipse": + startObject.value = ClipPath.parseStyleForEllipse(startObject.value); + endObject.value = ClipPath.parseStyleForEllipse(endObject.value); + obj2.value = makeInterpolateClipPathEllipse(layer, property, startObject.value, endObject.value); + break; + case "inset": + startObject.value = ClipPath.parseStyleForInset(startObject.value); + endObject.value = ClipPath.parseStyleForInset(endObject.value); + obj2.value = makeInterpolateClipPathInset(layer, property, startObject.value, endObject.value); + break; + case "polygon": + startObject.value = ClipPath.parseStyleForPolygon(startObject.value); + endObject.value = ClipPath.parseStyleForPolygon(endObject.value); + obj2.value = makeInterpolateClipPathPolygon(layer, property, startObject.value, endObject.value); + break; + case "path": + startObject.value = ClipPath.parseStyleForPath(startObject.value); + endObject.value = ClipPath.parseStyleForPath(endObject.value); + break; } } - [SUBSCRIBE("hideAddViewLayer")]() { - this.state.isShow = false; - this.state.isControl = false; - this.pathParser.reset(""); - this.setState(this.initState(), false); - this.refs.$view.empty(); - this.$el.hide(); - this.emit("hidePathManager"); - } - [BIND("$view")]() { - var _a; - const path = this.state.isShow ? this.pathGenerator.makeSVGPath() : ""; - const strokeWidth = Length.parse((_a = this.state.current) == null ? void 0 : _a["stroke-width"]).value || 0; - return { - class: { - path: this.state.mode === "path", - modify: this.state.mode === "modify", - transform: this.state.mode === "transform", - box: this.state.box === "box", - canvas: this.state.box === "canvas", - "segment-move": this.state.mode === "segment-move", - "is-control": this.state.isControl, - "has-one-stroke-width": strokeWidth === 1 - }, - htmlDiff: path - }; + return (rate, t) => { + var type = obj2.type(rate, t); + var value = obj2.value(rate, t); + if (type === "none") { + return type; + } + return `${type}(${value})`; + }; +} +function makeInterpolateFilterItem(layer, property, startValue, endValue) { + var obj2 = { + type: makeInterpolateString(layer, property, startValue.type, endValue.type), + value: makeInterpolateBoolean(layer, property, startValue.value, endValue.value) + }; + switch (startValue.type) { + case "blur": + obj2.value = makeInterpolateLength(layer, property, startValue.value, endValue.value); + break; + case "grayscale": + case "invert": + case "brightness": + case "contrast": + case "opacity": + case "saturate": + case "sepia": + case "hue-rotate": + obj2.value = makeInterpolateNumber(layer, property, startValue.value.value, endValue.value.value, startValue.value.unit); + break; + case "drop-shadow": + obj2.offsetX = makeInterpolateLength(layer, property, startValue.offsetX, endValue.offsetX, "width", "self"); + obj2.offsetY = makeInterpolateLength(layer, property, startValue.offsetY, endValue.offsetY, "height", "self"); + obj2.blurRadius = makeInterpolateLength(layer, property, startValue.blurRadius, endValue.blurRadius, "width", "self"); + obj2.spreadRadius = makeInterpolateLength(layer, property, startValue.spreadRadius, endValue.spreadRadius, "width", "self"); + obj2.color = makeInterpolateColor(layer, property, startValue.color, endValue.color); + break; } - [BIND("$splitCircle")]() { - if (this.state.splitXY) { + return (rate, t) => { + var type = obj2.type(rate, t); + if (type === "drop-shadow") { return { - cx: this.state.splitXY.x, - cy: this.state.splitXY.y, - r: 5 + type: obj2.type(rate, t), + offsetX: obj2.offsetX(rate, t), + offsetY: obj2.offsetY(rate, t), + blurRadius: obj2.blurRadius(rate, t), + spreadRadius: obj2.spreadRadius(rate, t), + color: obj2.color(rate, t) }; } else { return { - r: 0 + type: obj2.type(rate, t), + value: obj2.value(rate, t) }; } - } - refreshPathLayer() { - this.updatePathLayer(); - } - renderPath() { - this.bindData("$view"); - } - getPathRect() { - this.initRect(true); - const { d } = this.pathGenerator.toPath(); - return vertiesToRectangle(PathParser.fromSVGString(d).getBBox()); - } - resetTransformZone() { - var rect2 = this.getPathRect(); - this.state.transformZoneRect = rect2; - } - [POINTERMOVE("$view") + PREVENT](e) { - this.initRect(); - if (this.isMode("path") && this.state.rect) { - this.state.moveXY = { - x: e.xy.x - this.state.rect.x, - y: e.xy.y - this.state.rect.y - }; - this.state.altKey = e.altKey; - this.renderPath(); + }; +} +function makeInterpolateFilter(layer, property, startValue, endValue) { + var s = Filter.parseStyle(startValue); + var e = Filter.parseStyle(endValue); + var totalLength = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0, len2 = totalLength; i < len2; i++) { + var startObject = s[i]; + var endObject = e[i]; + if (startObject && !endObject) { + list2.push(makeInterpolateIdentity(layer, property, startObject)); + } else if (!startObject && endObject) { + list2.push(makeInterpolateIdentity(layer, property, endObject)); } else { - var $target = Dom.create(e.target); - var isSplitPath = $target.hasClass("split-path"); - if (isSplitPath) { - this.state.splitXY = this.calculatePointOnLine($target.attr("d"), { - x: e.xy.x - this.state.rect.x, - y: e.xy.y - this.state.rect.y - }); + if (startObject.type != endObject.type || startObject.type === "svg" || endObject.type === "svg") { + list2.push(makeInterpolateBoolean(layer, property, startObject, endObject)); } else { - this.state.splitXY = null; + list2.push(makeInterpolateFilterItem(layer, property, startObject, endObject)); } - this.bindData("$splitCircle"); - this.state.altKey = false; } } - [POINTERSTART("$view :not(.split-path)") + PREVENT + STOP + MOVE() + END()](e) { - this.initRect(); - this.state.altKey = false; - var isPathMode = this.isMode("path"); - this.$config.set("set.move.control.point", true); - this.state.dragXY = { - x: e.xy.x - this.state.rect.x, - y: e.xy.y - this.state.rect.y + return (rate, t) => { + return Filter.join(list2.map((it) => it(rate, t))); + }; +} +function makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) { + var points = [ + { x: sx, y: sy }, + { x: cx1, y: cy1 }, + { x: cx2, y: cy2 }, + { x: ex, y: ey } + ]; + return (rate, t) => { + return getBezierPointOne(points, t); + }; +} +function makeInterpolateLine(x1, y1, x2, y2) { + var obj2 = { + x: makeInterpolateNumber("", "", x1, x2), + y: makeInterpolateNumber("", "", y1, y2) + }; + return (rate, t) => { + var results = { + x: obj2.x(rate, t), + y: obj2.y(rate, t) }; - this.$config.set("set.drag.path.area", false); - var $target = Dom.create(e.target); - if ($target.hasClass("svg-editor-canvas") && !isPathMode) { - this.$config.set("set.drag.path.area", true); - this.state.isGroupSegment = false; - this.state.selectedGroupIndex = -1; - this.state.selectedPointIndex = -1; - } else { - this.pathGenerator.reselect(); - this.state.isSegment = $target.attr("data-segment") === "true"; - this.state.isFirstSegment = this.state.isSegment && $target.attr("data-is-first") === "true"; - this.state.isGroupSegment = $target.hasClass("path-area"); - if (this.state.isGroupSegment) { - this.state.selectedGroupIndex = +$target.data("group-index"); - this.state.selectedPointIndex = +$target.data("point-index"); - } else { - this.state.selectedGroupIndex = -1; - this.state.selectedPointIndex = -1; - } - } - if (isPathMode) { - if (this.state.isFirstSegment) { - var index2 = +$target.attr("data-index"); - this.state.startPoint = this.pathGenerator.points[index2].startPoint; - } else { - this.state.startPoint = this.state.dragXY; - } - this.state.dragPoints = false; - this.state.endPoint = null; - } else { - if (this.state.isSegment) { - this.changeMode("segment-move"); - var [index2, segmentKey] = $target.attrs("data-index", "data-segment-point"); - const localIndex = +index2; - if (e.shiftKey) { - this.pathGenerator.toggleSelect(segmentKey, localIndex); - } else { - this.pathGenerator.setCachePoint(localIndex, segmentKey); - this.pathGenerator.selectKeyIndex(segmentKey, localIndex); + return results; + }; +} +function makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) { + var points = [ + { x: sx, y: sy }, + { x: cx1, y: cy1 }, + { x: ex, y: ey } + ]; + return (rate, t) => { + return getBezierPointOneQuard(points, t); + }; +} +function makeInterpolateOffset(segments) { + var interpolateList = []; + var startPoint = []; + segments.forEach((segment) => { + switch (segment.command) { + case "M": + var [ex, ey] = segment.values; + startPoint = [ex, ey]; + break; + case "m": + var [sx, sy] = startPoint; + var [ex, ey] = segment.values; + ex += sx; + ey += sy; + startPoint = [ex, ey]; + break; + case "L": + var [sx, sy] = startPoint; + var [ex, ey] = segment.values; + interpolateList.push({ + command: segment.command, + values: [sx, sy, ex, ey], + length: getDist(sx, sy, ex, ey), + interpolate: makeInterpolateLine(sx, sy, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "l": + var [sx, sy] = startPoint; + var [ex, ey] = segment.values; + ex += sx; + ey += sy; + interpolateList.push({ + command: segment.command, + values: [sx, sy, ex, ey], + length: getDist(sx, sy, ex, ey), + interpolate: makeInterpolateLine(sx, sy, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "C": + var [sx, sy] = startPoint; + var [cx1, cy1, cx2, cy2, ex, ey] = segment.values; + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], + length: getCurveDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), + interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "c": + var [sx, sy] = startPoint; + var [cx1, cy1, cx2, cy2, ex, ey] = segment.values; + cx1 += sx; + cx2 += sx; + ex += sx; + cy1 += sy; + cy2 += sy; + ey += sy; + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], + length: getCurveDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), + interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "Q": + var [sx, sy] = startPoint; + var [cx1, cy1, ex, ey] = segment.values; + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, ex, ey], + length: getQuardDist(sx, sy, cx1, cy1, ex, ey), + interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "q": + var [sx, sy] = startPoint; + var [cx1, cy1, ex, ey] = segment.values; + cx1 += sx; + ex += sx; + cy1 += sy; + ey += sy; + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, ex, ey], + length: getQuardDist(sx, sy, cx1, cy1, ex, ey), + interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) + }); + startPoint = [ex, ey]; + break; + case "S": + var [sx, sy] = startPoint; + var [cx2, cy2, ex, ey] = segment.values; + var prevSegment = interpolateList[interpolateList.length - 1]; + if (["C", "c", "S", "s"].includes(prevSegment.command)) { + var [, , , , preC1x, preC1y, preEx, preEy] = prevSegment.values; + var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], + length: getCubicDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), + interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) + }); + startPoint = [ex, ey]; + break; } - this.renderPath(); - } else if (this.state.isGroupSegment) { - this.changeMode("segment-move"); - this.pathGenerator.selectGroup(this.state.selectedGroupIndex); - this.renderPath(); - } - } - } - move(dx, dy) { - var e = this.$config.get("bodyEvent"); - if (this.$config.true("set.drag.path.area")) { - this.renderSelectBox(this.state.dragXY, dx, dy); - } else if (this.isMode("segment-move")) { - this.pathGenerator.move(dx, dy, e); - this.renderPath(); - this.updatePathLayer(); - } else if (this.isMode("path")) { - const dist2 = getDist(dx, dy, 0, 0); - if (dist2 >= 2) { - this.state.dragPoints = e.altKey ? false : true; - } + case "s": + var [sx, sy] = startPoint; + var [cx2, cy2, ex, ey] = segment.values; + cx2 += sx; + ex += sx; + cy2 += sy; + ey += sy; + var prevSegment = interpolateList[interpolateList.length - 1]; + if (["C", "c", "S", "s"].includes(prevSegment.command)) { + var [, , , , preC1x, preC1y, preEx, preEy] = prevSegment.values; + var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, cx2, cy2, ex, ey], + length: getCubicDist(sx, sy, cx1, cy1, cx2, cy2, ex, ey), + interpolate: makeInterpolateCubic(sx, sy, cx1, cy1, cx2, cy2, ex, ey) + }); + startPoint = [ex, ey]; + break; + } + case "T": + var [sx, sy] = startPoint; + var [ex, ey] = segment.values; + var prevSegment = interpolateList[interpolateList.length - 1]; + if (["Q", "q", "T", "t"].includes(prevSegment.command)) { + var [, , preC1x, preC1y, preEx, preEy] = prevSegment.values; + var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, ex, ey], + length: getQuardDist(sx, sy, cx1, cy1, ex, ey), + interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) + }); + startPoint = [ex, ey]; + } + break; + case "t": + var [sx, sy] = startPoint; + var [ex, ey] = segment.values; + ex += sx; + ey += sy; + var prevSegment = interpolateList[interpolateList.length - 1]; + if (["Q", "q", "T", "t"].includes(prevSegment.command)) { + var [, , preC1x, preC1y, preEx, preEy] = prevSegment.values; + var { x: cx1, y: cy1 } = Point.getReversePoint({ x: preEx, y: preEy }, { x: preC1x, preC1y }); + interpolateList.push({ + command: segment.command, + values: [sx, sy, cx1, cy1, ex, ey], + length: getQuardDist(sx, sy, cx1, cy1, ex, ey), + interpolate: makeInterpolateQuard(sx, sy, cx1, cy1, ex, ey) + }); + startPoint = [ex, ey]; + } + break; } - } - renderSegment(callback) { - if (this.pathGenerator.selectedLength) { - this.pathGenerator.reselect(); - if (isFunction(callback)) - callback(); - this.renderPath(); - this.updatePathLayer(); + }); + var totalLength = 0; + interpolateList.forEach((it) => { + totalLength += it.length; + }); + var start2 = 0; + interpolateList.forEach((it) => { + it.startT = start2 / totalLength; + it.endT = (start2 + it.length) / totalLength; + it.totalLength = totalLength; + start2 += it.length; + }); + return { totalLength, interpolateList }; +} +function makeInterpolateOffsetPath(layer, property, startValue, endValue, artboard2) { + var [id, distance2, rotateStatus, rotate2] = startValue.split(",").map((it) => it.trim()); + var startObject = { + id, + distance: Length.parse(distance2 || "0%"), + rotateStatus: rotateStatus || "auto", + rotate: Length.parse(rotate2 || "0deg") + }; + var innerInterpolate = () => { + return {}; + }; + var innerInterpolateAngle = (rotateStatus2, currentAngle) => { + var resultAngle = 0; + switch (rotateStatus2) { + case "angle": + resultAngle = startObject.rotate.value; + break; + case "auto angle": + resultAngle = currentAngle + startObject.rotate.value; + break; + case "reverse": + resultAngle = currentAngle + 180; + break; + case "auto": + resultAngle = currentAngle; + break; } - } - end(dx, dy) { - var e = this.$config.get("bodyEvent"); - this.$config.set("set.move.control.point", false); - if (this.state.isGroupSegment) { - this.pathGenerator.select(); + return resultAngle; + }; + var screenX = 0, screenY = 0; + if (artboard2) { + var pathLayer = artboard2.searchById(startObject.id); + if (pathLayer) { + screenX = pathLayer.screenX.value; + screenY = pathLayer.screenY.value; } - if (this.$config.true("set.drag.path.area")) { - if (dx === 0 && dy === 0) { - this.changeMode("modify"); - this.trigger("hidePathEditor"); - } else { - this.changeMode("segment-move"); - this.pathGenerator.selectInBox(this.getSelectBox(), e.shiftKey); - this.renderPath(); - this.hideSelectBox(); - } - } else if (this.isMode("modify")) { - this.pathGenerator.reselect(); - } else if (this.isMode("segment-move")) { - this.changeMode("modify"); - this.pathGenerator.reselect(); - this.renderPath(); - this.updatePathLayer(); - } else if (this.isMode("path")) { - if (this.state.isFirstSegment) { - this.changeMode("modify"); - this.pathGenerator.setConnectedPoint(dx, dy); - this.renderPath(); - if (this.state.current) { - this.refreshPathLayer(); - } else { - this.addPathLayer(); - this.trigger("initPathEditorView"); - } - } else { - if (this.state.isSplitPath) - ; - else { - this.pathGenerator.moveEnd(dx, dy); - this.state.clickCount++; - this.renderPath(); - this.pathGenerator.reselect(); - } + innerInterpolate = (rate, t, timing) => { + var parser = new PathParser(pathLayer.d || ""); + var { totalLength, interpolateList } = makeInterpolateOffset(parser.segments); + var distance3 = startObject.distance.toPx(totalLength); + var dt = distance3 / totalLength; + t = t + dt; + if (t > 1) { + t -= 1; } - this.state.isSplitPath = false; - } - } - hideSelectBox() { - this.refs.$segmentBox.css({ - left: -1e5 - }); - } - renderSelectBox(startXY = null, dx = 0, dy = 0) { - var obj2 = { - left: startXY.x + (dx < 0 ? dx : 0), - top: startXY.y + (dy < 0 ? dy : 0), - width: Math.abs(dx), - height: Math.abs(dy) + var obj2 = interpolateList[0]; + if (t === 0) { + obj2 = interpolateList[0]; + } else if (t === 1) { + obj2 = interpolateList[interpolateList.length - 1]; + } + var arr = interpolateList.find((it) => { + return it.startT <= t && t < it.endT; + }); + if (arr) { + obj2 = arr; + } + var newT = (t - obj2.startT) / (obj2.endT - obj2.startT); + var newRate = timing(newT); + return __spreadProps(__spreadValues({}, obj2.interpolate(newRate, newT, timing)), { + totalLength: obj2.totalLength + }); }; - this.refs.$segmentBox.css(obj2); } - getSelectBox() { - var [x, y, width2, height2] = this.refs.$segmentBox.styles("left", "top", "width", "height").map((it) => Length.parse(it)); - var rect2 = { - x, - y, - width: width2, - height: height2 + return (rate, t, timing) => { + var arr = (layer.transformOrigin || "50% 50% 0px").split(" ").map((it) => Length.parse(it)); + var tx = arr[0].toPx(layer.width); + var ty = arr[1].toPx(layer.height); + var obj2 = innerInterpolate(rate, t, timing); + var results = { + x: obj2.x + screenX - tx.value, + y: obj2.y + screenY - ty.value }; - rect2.x2 = rect2.x.value + rect2.width; - rect2.y2 = rect2.y.value + rect2.height; - return rect2; - } - [SUBSCRIBE("deleteSegment")]() { - this.pathGenerator.reselect(); - this.pathGenerator.removeSelectedSegment(); - this.renderPath(); - this.updatePathLayer(); - } - [SUBSCRIBE("moveSegment")](dx, dy) { - this.pathGenerator.reselect(); - this.pathGenerator.moveSelectedSegment(dx, dy); - this.renderPath(); - this.updatePathLayer(); - } - [SUBSCRIBE("initPathEditorView")]() { - this.pathParser.reset(""); - this.setState(this.initState(), false); - this.state.isShow = true; - this.refs.$view.empty(); - this.$el.focus(); - } + layer.setScreenX(results.x); + layer.setScreenY(results.y); + if (startObject.rotateStatus === "element") + ; + else { + var current = obj2; + var distValue = 0; + if (t < 1) { + distValue = 1 / obj2.totalLength; + } + var next = innerInterpolate(rate + distValue, t + distValue, timing); + var angle = calculateAngle(next.x - current.x, next.y - current.y); + var newAngle = Length.deg(innerInterpolateAngle(startObject.rotateStatus, angle)); + layer.reset({ + transform: Transform.rotate(layer.transform, newAngle) + }); + } + return results; + }; } -var PathManager$1 = ""; -const MODES = { - "segment-move": "modify", - modify: "modify", - path: "path", - transform: "transform", - warp: "warp" -}; -class PathManager extends EditorElement { - initState() { - return { - mode: "move", - fill: null, - stroke: null, - "fill-opacity": null, - "stroke-width": null, - msg: this.$i18n("path.manager.msg") - }; - } - template() { - return ` -
-
- -
-
- - - -
-
-
- -
-
- - - -
- - -
- -
- `; - } - [BIND("$mode")]() { - return { - "data-selected-value": MODES[this.state.mode] - }; - } - refresh() { - this.bindData("$mode"); +function makeInterpolatePerspectiveOrigin(layer, property, startValue, endValue) { + var s = startValue.split(" ").map((it) => Length.parse(it)); + var e = endValue.split(" ").map((it) => Length.parse(it)); + var max = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var startPos = s[i]; + var endPos = e[i]; + list2.push(makeInterpolateLength(layer, property, startPos, endPos, "perspective-origin")); } - [CLICK("$flip button")](e) { - var transformType = e.$dt.attr("data-value"); - if (transformType === "2x") { - this.emit("divideSegmentsByCount", 2); - } else if (transformType === "3x") { - this.emit("divideSegmentsByCount", 3); + return (rate, t) => { + var results = list2.map((it) => it(rate, t)).join(" "); + return results; + }; +} +function makeInterpolatePlayTime(layer, property, startValue, endValue, artboard2, layerElement) { + const mediaElement = layerElement.$("video").el; + let [sTime, , durationTime] = startValue.split(":"); + const duration = +(durationTime || 1); + const startTime = +(sTime || 0) * duration; + return (rate, t) => { + if (t === 0) { + mediaElement.currentTime = startTime; + if (mediaElement.paused) { + mediaElement.play(); + } + } else if (t === 1) { + layer.reset({ + currentTime: mediaElement.currentTime + }); + mediaElement.pause(); } else { - this.emit("changePathTransform", transformType); + if (mediaElement.paused) { + mediaElement.play(); + } } - } - [CLICK("$util button")](e) { - var utilType = e.$dt.attr("data-value"); - this.emit("changePathUtil", utilType); - } - [CLICK("$mode button")](e) { - var mode = e.$dt.attr("data-value"); - this.updateData({ - mode - }); - this.refresh(); - } - [CLICK("$left button")](e) { - var message = e.$dt.attr("data-value"); - this.emit(message); - } - updateData(obj2 = {}) { - this.setState(obj2, false); - this.emit(this.state.changeEvent, obj2); - } - [SUBSCRIBE("changePathManager")](mode) { - this.setState({ mode }); - } - [SUBSCRIBE("showPathManager")](obj2 = {}) { - obj2.changeEvent = obj2.changeEvent || "changePathManager"; - this.setState(obj2); - this.$el.show(); - } - [SUBSCRIBE("hidePathManager")]() { - this.$el.hide(); - } + }; } -function pathEditorView(editor) { - editor.registerUI("canvas.view", { - PathEditorView - }); - editor.registerUI("page.subeditor.view", { - PathManager - }); +function makeInterpolateRotate(layer, property, startNumber, endNumber) { + var startValue = Length.parse(startNumber); + var endValue = Length.parse(endNumber); + return (rate, t) => { + var realStartValue = startValue.value; + var realEndValue = endValue.value; + if (t === 0) { + return Length.deg(realStartValue); + } else if (t === 1) { + return Length.deg(realEndValue); + } + return Length.deg(realStartValue + (realEndValue - realStartValue) * rate).to(startValue.unit); + }; } -var PathToolProperty$1 = ""; -class PathToolProperty extends BaseProperty { - components() { - return { - LeftAlign, - CenterAlign, - RightAlign, - TopAlign, - MiddleAlign, - BottomAlign, - SameWidth, - SameHeight - }; - } - getTitle() { - return this.$i18n("alignment.property.title"); - } - isHideHeader() { - return true; - } - getBody() { - return ` -
-
- - -
-
- - -
-
- -
- - -
-
- - - -
- -
- `; +function makeInterpolateStrokeDashArrray(layer, property, startValue, endValue) { + var s = startValue.split(" ").map((it) => +it); + var e = endValue.split(" ").map((it) => +it); + var max = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var startPos = s[i]; + var endPos = e[i]; + list2.push(makeInterpolateNumber(layer, property, startPos, endPos)); } - [CLICK("$buttons button")](e) { - const command = e.$dt.data("command"); - const args2 = e.$dt.data("args"); - if (command === "convert.smooth.path") { - this.$commands.emit(command); + return (rate, t) => { + var results = list2.map((it) => it(rate, t)).join(" "); + return results; + }; +} +function makeInterpolateText(layer, property, startText, endText) { + var max = endText.length - 1; + var min = 0; + return (rate, t) => { + var result = 0; + if (t === 0) { + result = ""; + } else if (t === 1) { + result = endText; } else { - this.$commands.emit(command, args2); + result = endText.substring(min, Math.floor((max - min) * t)); } - } - [SUBSCRIBE(REFRESH_SELECTION)]() { - this.refreshShow(() => { - if (this.$context.selection.length === 1 && this.$context.selection.is("boolean-path")) - return true; - return this.$context.selection.is("svg-path", "polygon", "star"); - }); - } -} -function pathTool(editor) { - editor.registerUI("inspector.tab.style", { - PathToolProperty - }); + return result; + }; } -var check = { - key: "check", - title: "Check", - execute: function() { - return [ - { pattern: `check(20px 20px, 10px 10px, black, transparent)` }, - { pattern: `check(40px 40px, 20px 20px, black, transparent)` }, - { pattern: `check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))` }, - { pattern: `check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))` }, - { pattern: `check(100px 100px, 50px 50px, #DCF3DC, transparent)` }, - { pattern: `check(200px 200px, 100px 100px, #102C45, transparent)` } - ]; - } -}; -var crossdot = { - key: "cross-dot", - title: "Cross Dot", - execute: function() { - return [ - { - pattern: `cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)` - }, - { - pattern: `cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)` - }, - { - pattern: `cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)` - } - ]; - } -}; -var diagonalLine = { - key: "diagonal-line", - title: "Diagonal Line", - execute: function() { - return [ - { - pattern: `diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)` - }, - { - pattern: `diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)` - }, - { - pattern: `diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)` - } - ]; - } -}; -var dot = { - key: "dot", - title: "Dot", - execute: function() { - return [ - { pattern: `dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)` }, - { pattern: `dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)` }, - { pattern: `dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)` }, - { pattern: `dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)` } - ]; - } -}; -var grid = { - key: "grid", - title: "Grid", - execute: function() { - return [ - { pattern: `grid(20px 20px, 10px 10px, black, transparent)` }, - { pattern: `grid(40px 40px, 20px 20px, black, transparent)` }, - { pattern: `grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))` }, - { pattern: `grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))` }, - { pattern: `grid(100px 100px, 50px 50px, #DCF3DC, transparent)` }, - { pattern: `grid(200px 200px, 100px 100px, #102C45, transparent)` } - ]; - } -}; -var horizontalLine = { - key: "horizontal-line", - title: "Horizontal Line", - execute: function() { - return [ - { pattern: `horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)` }, - { - pattern: `horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)` - }, - { - pattern: `horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)` - } - ]; - } -}; -var verticalLine = { - key: "vertical-line", - title: "Vertical Line", - execute: function() { - return [ - { pattern: `vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)` }, - { - pattern: `vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)` - }, - { - pattern: `vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)` - } - ]; - } -}; -var patterns = [ - check, - grid, - dot, - crossdot, - diagonalLine, - verticalLine, - horizontalLine -]; -var PatternAssetsProperty$1 = ""; -class PatternAssetsProperty extends BaseProperty { - getTitle() { - return this.$i18n("pattern.asset.property.title"); - } - initState() { - return { - mode: "grid", - preset: "check" - }; - } - getTools() { - const options2 = variable$4(patterns.map((it) => { - return { value: it.key, text: it.title }; - })); - return createComponent("SelectEditor", { - ref: "$assets", - key: "preset", - value: this.state.preset, - options: options2, - onchange: "changePreset" - }); - } - [SUBSCRIBE_SELF("changePreset")](key, value) { - this.setState({ - [key]: value - }); - } - getClassName() { - return "elf--pattern-assets-property"; - } - get editableProperty() { - return "pattern"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { - } - getBody() { - return ` -
-
-
- `; - } - [DRAGSTART("$patternList .pattern-item")](e) { - const pattern = e.$dt.attr("data-pattern"); - e.dataTransfer.effectAllowed = "copy"; - e.dataTransfer.setData("text/pattern", pattern); - } - [LOAD("$patternList")]() { - var preset = patterns.find((it) => it.key === this.state.preset); - if (!preset) { - return ""; - } - var results = preset.execute().map((item, index2) => { - const cssText = CSS_TO_STRING(Pattern.toCSS(item.pattern)); - return `
-
-
-
-
`; +function makeInterpolateTextShadow(layer, property, startValue, endValue) { + var s = TextShadow.parseStyle(startValue); + var e = TextShadow.parseStyle(endValue); + var totalLength = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0, len2 = totalLength; i < len2; i++) { + var startObject = s[i] || TextShadow.parseStyle("0px 0px 0px rgba(0, 0, 0, 0)")[0]; + var endObject = e[i] || TextShadow.parseStyle("0px 0px 0px rgba(0, 0, 0, 0)")[0]; + list2.push({ + offsetX: makeInterpolateLength(layer, property, startObject.offsetX, endObject.offsetX, "width", "self"), + offsetY: makeInterpolateLength(layer, property, startObject.offsetY, endObject.offsetY, "height", "self"), + blurRadius: makeInterpolateLength(layer, property, startObject.blurRadius, endObject.blurRadius, "radius"), + color: makeInterpolateColor(layer, property, startObject.color, endObject.color) }); - return results; } - [CLICK("$patternList .pattern-item")](e) { - const pattern = e.$dt.attr("data-pattern"); - if (this.$modeView.isCurrentMode(ViewModeType.CanvasView)) { - this.$commands.emit("addBackgroundImagePattern", pattern); + return (rate, t) => { + return TextShadow.join(list2.map((it) => { + return { + offsetX: it.offsetX(rate, t), + offsetY: it.offsetY(rate, t), + blurRadius: it.blurRadius(rate, t), + color: it.color(rate, t) + }; + })); + }; +} +function makeInterpolateTransformLength(layer, property, startValue, endValue) { + var obj2 = { + type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) + }; + var value = []; + var max = Math.max(startValue.value.length, endValue.value.length); + for (var i = 0; i < max; i++) { + var s = startValue.value[i]; + var e = endValue.value[i]; + if (s && e) { + value.push(makeInterpolateLength(layer, property, s, e, startValue.type)); } else { - this.emit("setPatternAsset", pattern); + value.push(makeInterpolateLength(layer, property, startValue.value[i] || startValue.value[i - 1] || startValue.value[i - 2], endValue.value[i] || endValue.value[i - 1] || endValue.value[i - 2], startValue.type)); } } -} -var PatternEditor$1 = ""; -class PatternEditor extends EditorElement { - initState() { + obj2.value = value; + return (rate, t) => { return { - hideLabel: this.props.hideLabel, - value: this.props.value, - patterns: this.parsePattern(this.props.value) + type: obj2.type(rate, t), + value: obj2.value.map((it) => it(rate, t)) }; + }; +} +function makeInterpolateTransformNumber(layer, property, startValue, endValue) { + var obj2 = { + type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) + }; + var value = []; + var max = Math.max(startValue.value.length, endValue.value.length); + for (var i = 0; i < max; i++) { + var s = startValue.value[i]; + var e = endValue.value[i]; + if (s && e) { + value.push(makeInterpolateNumber(layer, property, s.value, e.value)); + } else { + var ss = startValue.value[i].value || startValue.value[i - 1].value || startValue.value[i - 2].value; + var ee = endValue.value[i].value || endValue.value[i - 1].value || startValue.value[i - 2].value; + value.push(makeInterpolateNumber(layer, property, ss, ee)); + } } - parsePattern(str) { - if (str === "undefined") - return []; - return Pattern.parseStyle(str); - } - setValue(value) { - this.setState({ - value, - patterns: this.parsePattern(value) - }); - } - template() { - return ` -
-
-
- `; + obj2.value = value; + return (rate, t) => { + var value2 = obj2.value.map((it) => it(rate, t)); + var type = obj2.type(rate, t); + if (type.includes("matrix") || type.includes("scale")) { + value2 = value2.map((it) => { + return Length.number(it); + }); + } + return { type, value: value2 }; + }; +} +function makeInterpolateTransformRotate(layer, property, startValue, endValue) { + var obj2 = { + type: makeInterpolateBoolean(layer, property, startValue.type, endValue.type) + }; + var value = []; + var max = Math.max(startValue.value.length, endValue.value.length); + for (var i = 0; i < max; i++) { + var tempStartValue = startValue.value[i]; + var tempEndValue = endValue.value[i]; + if (tempStartValue && tempEndValue) { + value.push(makeInterpolateRotate(layer, property, tempStartValue, tempEndValue)); + } else { + value.push(makeInterpolateRotate(layer, property, startValue.value[i] || startValue.value[i - 1] || startValue.value[i - 2], endValue.value[i] || endValue.value[i - 1] || startValue.value[i - 2])); + } } - [LOAD("$patternList")]() { - return this.state.patterns.map((it, index2) => { - const selectedClass = it.selected ? "selected" : ""; - if (it.selected) { - this.selectedIndex = index2; + obj2.value = value; + return (rate, t) => { + var results = { + type: obj2.type(rate, t), + value: obj2.value.map((it) => it(rate, t)) + }; + return results; + }; +} +function makeInterpolateTransform(layer, property, startValue, endValue) { + var startObject = Transform.parseStyle(startValue.trim()); + var endObject = Transform.parseStyle(endValue.trim()); + var max = Math.max(startObject.length, endObject.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var s = startObject[i]; + var e = endObject[i]; + if (s && !e) { + list2.push(makeInterpolateIdentity(layer, property, s)); + } else if (!s && e) { + list2.push(makeInterpolateIdentity(layer, property, e)); + } else if (s.type != e.type) { + list2.push(makeInterpolateBoolean(layer, property, s, e)); + } else { + switch (s.type) { + case "translate": + case "translateX": + case "translateY": + case "translateZ": + case "translate3d": + case "perspective": + list2.push(makeInterpolateTransformLength(layer, property, s, e)); + break; + case "rotate": + case "rotateX": + case "rotateY": + case "rotateZ": + case "rotate3d": + list2.push(makeInterpolateTransformRotate(layer, property, s, e)); + break; + case "scale": + case "scaleX": + case "scaleY": + case "scaleZ": + case "scale3d": + case "matrix": + case "matrix3d": + list2.push(makeInterpolateTransformNumber(layer, property, s, e)); + break; } - return ` -
- ${createComponent("PatternSizeEditor", { - key: "pattern-size", - ref: `$bp${index2}`, - type: it.type, - x: it.x, - y: it.y, - width: it.width, - height: it.height, - index: index2, - foreColor: it.foreColor, - backColor: it.backColor, - blendMode: it.blendMode, - lineWidth: it.lineWidth, - lineHeight: it.lineHeight, - onchange: "changePatternSizeInfo" - })} -
- -
-
- `; - }); - } - modifyPattern() { - var value = Pattern.join(this.state.patterns); - this.parent.trigger(this.props.onchange, this.props.key, value); - } - [SUBSCRIBE("add")](type = "check") { - var pattern = patterns.find((it) => it.key === type); - if (pattern) { - const data = Pattern.parseStyle(pattern.execute()[0].pattern); - this.state.patterns.push.apply(this.state.patterns, data); - this.refresh(); - this.modifyPattern(); } } - [CLICK("$add")]() { - this.trigger("add"); - } - [DRAGSTART("$patternList .pattern-item")](e) { - this.startIndex = +e.$dt.attr("data-index"); - } - [DRAGOVER("$patternList .pattern-item") + PREVENT]() { - } - sortItem(arr, startIndex, targetIndex) { - arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); - } - sortPattern(startIndex, targetIndex) { - this.sortItem(this.state.patterns, startIndex, targetIndex); - } - [DROP("$patternList .pattern-item") + PREVENT](e) { - var targetIndex = +e.$dt.attr("data-index"); - this.selectItem(this.startIndex, true); - this.sortPattern(this.startIndex, targetIndex); - this.modifyPattern(); - this.refresh(); - } - getCurrentPattern() { - return this.state.patterns[this.selectedIndex]; - } - [CLICK("$patternList .tools .remove")](e) { - var removeIndex = +e.$dt.attr("data-index"); - this.state.patterns.splice(removeIndex, 1); - this.modifyPattern(); - this.refresh(); + return (rate, t) => { + var results = Transform.join(list2.map((it) => { + return it(rate, t); + })); + return results; + }; +} +function makeInterpolateTransformOrigin(layer, property, startValue, endValue) { + var s = startValue.split(" ").map((it) => Length.parse(it)); + var e = endValue.split(" ").map((it) => Length.parse(it)); + var max = Math.max(s.length, e.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var startPos = s[i]; + var endPos = e[i]; + list2.push(makeInterpolateLength(layer, property, startPos, endPos, "transform-origin")); } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.refs[`fillIndex${selectedIndex}`].addClass("selected"); + return (rate, t) => { + var results = list2.map((it) => it(rate, t)).join(" "); + return results; + }; +} +function makeInterpolatePathValues(layer, property, s, e) { + var max = Math.max(s.length, e.length); + var list2 = []; + var startLastPos = s[s.length - 1]; + var endLastPos = e[e.length - 1]; + for (var i = 0; i < max; i++) { + var startPos = s[i]; + var endPos = e[i]; + if (startPos && !endPos) { + list2.push(makeInterpolateNumber(layer, property, startPos, endLastPos)); + } else if (!startPos && endPos) { + list2.push(makeInterpolateNumber(layer, property, startLastPos, endPos)); } else { - this.refs[`fillIndex${selectedIndex}`].removeClass("selected"); + list2.push(makeInterpolateNumber(layer, property, startPos, endPos)); } - this.state.patterns.forEach((it, index2) => { - it.selected = index2 === selectedIndex; - }); - } - [SUBSCRIBE("changePatternSizeInfo") + DEBOUNCE(10)](key, value, index2) { - var pattern = this.state.patterns[index2]; - pattern.reset(value); - this.modifyPattern(); - this.refresh(); } + return (rate, t) => { + return list2.map((it) => it(rate, t)); + }; } -var PatternInfoPopup$1 = ""; -class PatternInfoPopup extends BasePopup { - getClassName() { - return "pattern-info-popup"; +function makeInterpolatePath(layer, property, startValue, endValue) { + var returnParser = new PathParser(); + var s = new PathParser(startValue); + var e = new PathParser(endValue); + var max = Math.max(s.segments.length, e.segments.length); + var list2 = []; + for (var i = 0; i < max; i++) { + var sc = s.segments[i]; + var ec = e.segments[i]; + if (sc.command === ec.command) { + if (sc.values.length === ec.values.length) { + list2.push({ + command: makeInterpolateIdentity(layer, property, sc.command), + values: makeInterpolatePathValues(layer, property, sc.values, ec.values) + }); + } else { + list2.push({ + command: makeInterpolateIdentity(layer, property, sc.command), + values: makeInterpolateIdentity(layer, property, sc.values) + }); + } + } else { + list2.push({ + command: makeInterpolateBoolean(layer, property, sc.command, ec.command), + values: makeInterpolateBoolean(layer, property, sc.values, ec.values) + }); + } } - getTitle() { - return this.$i18n("pattern.info.popup.title"); + return (rate, t) => { + var segments = list2.map((it) => { + return { + command: it.command(rate, t), + values: it.values(rate, t) + }; + }); + var results = returnParser.joinPath(segments); + return results; + }; +} +function makeInterpolatePolygon(layer, property, startValue, endValue) { + var returnParser = new PolygonParser(); + var s = new PolygonParser(startValue); + var e = new PolygonParser(endValue); + var max = Math.max(s.segments.length, e.segments.length); + var list2 = []; + var startLastX = s.segments[s.segments.length - 1].x; + var startLastY = s.segments[s.segments.length - 1].y; + var endLastX = e.segments[e.segments.length - 1].x; + var endLastY = e.segments[e.segments.length - 1].y; + for (var i = 0; i < max; i++) { + var startPos = s.segments[i]; + var endPos = e.segments[i]; + if (startPos && !endPos) { + list2.push({ + x: makeInterpolateNumber(layer, property, startPos.x, endLastX), + y: makeInterpolateNumber(layer, property, startPos.y, endLastY) + }); + } else if (!startPos && endPos) { + list2.push({ + x: makeInterpolateNumber(layer, property, startLastX, endPos.x), + y: makeInterpolateNumber(layer, property, startLastY, endPos.y) + }); + } else { + list2.push({ + x: makeInterpolateNumber(layer, property, startPos.x, endPos.x), + y: makeInterpolateNumber(layer, property, startPos.y, endPos.y) + }); + } } - initState() { - return { - type: this.props.type || "grid", - x: this.props.x || 0, - y: this.props.y || 0, - width: this.props.width || 0, - height: this.props.height || 0, - lineWidth: this.props.lineWidth || 1, - lineHeight: this.props.lineHeight || 1, - foreColor: this.props.foreColor || "black", - backColor: this.props.backColor || "transparent", - blendMode: this.props.blendMode || "normal" - }; + return (rate, t) => { + var points = returnParser.joinPoints(list2.map((it) => { + return { + x: it.x(rate, t), + y: it.y(rate, t) + }; + })); + return points; + }; +} +const DEFAULT_FUCTION = () => () => { +}; +function makeInterpolateCustom(property) { + switch (property) { + case "border-radius": + return makeInterpolateBorderRadius; + case "box-shadow": + return makeInterpolateBoxShadow; + case "text-shadow": + return makeInterpolateTextShadow; + case "background-image": + case "BackgroundImageEditor": + return makeInterpolateBackgroundImage; + case "filter": + case "backdrop-filter": + return makeInterpolateFilter; + case "clip-path": + return makeInterpolateClipPath; + case "transform": + return makeInterpolateTransform; + case "transform-origin": + return makeInterpolateTransformOrigin; + case "perspective-origin": + return makeInterpolatePerspectiveOrigin; + case "stroke-dasharray": + return makeInterpolateStrokeDashArrray; + case "d": + return makeInterpolatePath; + case "points": + return makeInterpolatePolygon; + case "offset-path": + return makeInterpolateOffsetPath; + case "text": + return makeInterpolateText; + case "playTime": + return makeInterpolatePlayTime; } - updateData(opt = {}) { - this.setState(opt, false); - const { - x, - y, - width: width2, - height: height2, - foreColor, - backColor, - blendMode, - lineWidth, - lineHeight - } = this.state; - this.state.instance.trigger(this.state.changeEvent, { - x, - y, - width: width2, - height: height2, - foreColor, - backColor, - blendMode, - lineWidth, - lineHeight - }); +} +function makeInterpolate(layer, property, startValue, endValue, editorString, artboard2, layerElement) { + var checkField = editorString || property; + switch (checkField) { + case "width": + case "x": + return makeInterpolateLength(layer, property, startValue, endValue, "width"); + case "height": + case "y": + return makeInterpolateLength(layer, property, startValue, endValue, "height"); + case "perspective": + case "font-size": + case "font-weight": + case "text-stroke-width": + case "RangeEditor": + case "textLength": + case "startOffset": + return makeInterpolateLength(layer, property, startValue, endValue, property); + case "fill-opacity": + case "opacity": + case "stroke-dashoffset": + case "currentTime": + case "NumberRangeEditor": + return makeInterpolateNumber(layer, property, +startValue, +endValue); + case "background-color": + case "color": + case "text-fill-color": + case "text-stroke-color": + case "fill": + case "stroke": + case "ColorViewEditor": + return makeInterpolateColor(layer, property, startValue, endValue); + case "mix-blend-mode": + case "fill-rule": + case "stroke-linecap": + case "stroke-linejoin": + case "SelectEditor": + case "lengthAdjust": + return makeInterpolateString(layer, property, startValue, endValue); + case "rotate": + return makeInterpolateRotate(layer, property, startValue, endValue); } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { - this.updateData({ [key]: value }); + var func = makeInterpolateCustom(checkField); + if (func) { + return func(layer, property, startValue, endValue, artboard2, layerElement); } - templateForX() { - if (this.hasNotX()) - return ""; - let label = "X"; - let units = ""; - if (this.state.type === "diagonal-line") { - label = this.$i18n("pattern.info.popup.rotate"); - units = ["deg"]; - } - return createComponent("InputRangeEditor", { - label, - ref: "$x", - key: "x", - value: this.state.x, - min: 0, - max: 1e3, - step: 1, - units, - onchange: "changeRangeEditor" - }); + return DEFAULT_FUCTION; +} +function createInterpolateFunction(layer, property, startValue, endValue, editorString, artboard2, layerElement) { + return makeInterpolate(layer, property, startValue, endValue, editorString, artboard2, layerElement); +} +class AssetModel extends BaseModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + comments: [], + colors: [], + gradients: [], + svgfilters: [], + svgimages: [], + keyframes: [], + images: [], + imageKeys: [], + videos: [], + videoKeys: [], + audios: [] + }, obj2)); } - templateForY() { - if (this.hasNotY()) - return "
"; - return createComponent("InputRangeEditor", { - label: "Y", - ref: "$y", - key: "y", - value: this.state.y, - min: 0, - max: 1e3, - step: 1, - onchange: "changeRangeEditor" - }); + get comments() { + return this.get("comments"); } - templateForLabel() { - return ``; + get colors() { + return this.get("colors"); } - templateForWidth() { - return createComponent("InputRangeEditor", { - label: this.$i18n("pattern.info.popup.width"), - ref: "$width", - key: "width", - value: this.state.width, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); + get gradients() { + return this.get("gradients"); } - templateForHeight() { - return createComponent("InputRangeEditor", { - label: this.$i18n("pattern.info.popup.height"), - ref: "$height", - key: "height", - value: this.state.height, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); + get svgfilters() { + return this.get("svgfilters"); } - hasNotLineWidth() { - return ["check"].includes(this.state.type); + get svgimages() { + return this.get("svgimages"); } - hasNotLineHeight() { - return [ - "cross-dot", - "dot", - "check", - "diagonal-line", - "horizontal-line" - ].includes(this.state.type); + get keyframes() { + return this.get("keyframes"); } - hasNotX() { - return ["grid", "dot", "horizontal-line"].includes(this.state.type); + get videos() { + return this.get("videos"); } - hasNotY() { - return ["grid", "dot", "diagonal-line", "vertical-line"].includes(this.state.type); + get images() { + return this.get("images"); } - templateForLineWidth() { - if (this.hasNotLineWidth()) - return "
"; - return createComponent("InputRangeEditor", { - label: this.$i18n("pattern.info.popup.lineWidth"), - ref: "$lineWidth", - key: "lineWidth", - value: this.state.lineWidth, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); + set images(value) { + this.set("images", value); } - templateForLineHeight() { - if (this.hasNotLineHeight()) - return "
"; - return createComponent("InputRangeEditor", { - label: this.$i18n("pattern.info.popup.lineHeight"), - ref: "$lineHeight", - key: "lineHeight", - value: this.state.lineHeight, - min: 0, - max: 500, - step: 1, - onchange: "changeRangeEditor" - }); + get imageKeys() { + return this.get("imageKeys"); } - templateForForeColor() { - return createComponent("ColorViewEditor", { - ref: "$foreColor", - label: this.$i18n("pattern.info.popup.foreColor"), - key: "foreColor", - value: this.state.foreColor, - onchange: "changeRangeEditor" - }); + get videoKeys() { + return this.get("videoKeys"); } - templateForBackColor() { - return createComponent("ColorViewEditor", { - ref: "$backColor", - label: this.$i18n("pattern.info.popup.backColor"), - key: "backColor", - value: this.state.backColor, - onchange: "changeRangeEditor" - }); + addKeyframe(keyframe2) { + this.keyframes.push(keyframe2); + return keyframe2; } - templateForBlendMode() { - return ` -
- ${createComponent("BlendSelectEditor", { - ref: "$blend", - key: "blendMode", - label: this.$i18n("pattern.info.popup.blend"), - value: this.state.blendMode, - onchange: "changeRangeEditor" - })} -
- `; + createKeyframe(data = {}) { + return this.addKeyframe(new Keyframe(__spreadValues({ + checked: true + }, data))); } - getBody() { - return ` -
- `; + removeKeyframe(removeIndex) { + this.removePropertyList(this.keyframes, removeIndex); } - [LOAD("$picker")]() { - return ` - -
-
- ${this.templateForLabel()} -
-
- ${this.templateForWidth()} - ${this.templateForHeight()} -
-
- ${this.templateForLineWidth()} - ${this.templateForLineHeight()} -
-
- ${this.templateForX()} - ${this.templateForY()} -
-
- ${this.templateForForeColor()} - ${this.templateForBackColor()} -
-
- ${this.templateForBlendMode()} -
-
- `; + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); } - [SUBSCRIBE("showPatternInfoPopup")](data, rect2) { - this.state.changeEvent = data.changeEvent || "changePatternInfoPopup"; - this.state.instance = data.instance; - this.setState(data.data); - this.showByRect(rect2); + sortKeyframe(startIndex, targetIndex) { + this.sortItem(this.keyframes, startIndex, targetIndex); } -} -var PatternProperty$1 = ""; -class PatternProperty extends BaseProperty { - getTitle() { - return this.$i18n("pattern.property.title"); + updateKeyframe(index2, data = {}) { + this.keyframes[+index2].reset(data); } - getClassName() { - return "el--pattern-property"; + toKeyframeString(isAnimate = false) { + return this.keyframes.map((keyframe2) => keyframe2.toString(isAnimate)).join("\n\n"); } - getTitleClassName() { - return "pattern"; + copyPropertyList(arr, index2) { + var copyObject = __spreadValues({}, arr[index2]); + arr.splice(index2, 0, copyObject); } - getBody() { - return `
`; + removePropertyList(arr, removeIndex) { + arr.splice(removeIndex, 1); } - getTools() { - return ` -
- - - - - - - -
- `; + removeColor(removeIndex) { + this.removePropertyList(this.colors, removeIndex); } - [CLICK("$tools button")](e) { - var patternType = e.$dt.data("pattern"); - this.children.$patternEditor.trigger("add", patternType); + copyColor(index2) { + this.copyPropertyList(this.colors, index2); } - [LOAD("$body")]() { - var current = this.$context.selection.current || {}; - var value = current.pattern; - return createComponent("PatternEditor", { - ref: "$patternEditor", - value, - "hide-label": true, - onchange: "changePatternEditor" - }); + sortColor(startIndex, targetIndex) { + this.sortItem(this.colors, startIndex, targetIndex); } - [SUBSCRIBE_SELF("changePatternEditor")](key, pattern) { - this.$commands.executeCommand("setAttribute", "change pattern", this.$context.selection.packByValue({ - pattern - })); + setColorValue(index2, value = {}) { + this.colors[index2] = __spreadValues(__spreadValues({}, this.colors[index2]), value); } - get editableProperty() { - return "pattern"; + getColorIndex(index2) { + return this.colors[index2]; } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { - this.refresh(); + getColor(name) { + return this.colors.filter((item) => item.name === name)[0]; } - [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(1e3)]() { - this.load("$patternSelect"); + addColor(obj2) { + this.colors.push(obj2); + return obj2; } -} -var PatternSizeEditor$1 = ""; -class PatternSizeEditor extends EditorElement { - initState() { - return { - index: this.props.index, - x: Length.parse(this.props.x), - y: Length.parse(this.props.y), - width: Length.parse(this.props.width), - height: Length.parse(this.props.height), - lineWidth: Length.parse(this.props.lineWidth), - lineHeight: Length.parse(this.props.lineHeight), - backColor: this.props.backColor, - foreColor: this.props.foreColor, - blendMode: this.props.blendMode, - type: this.props.type - }; + createColor(data = {}) { + return this.addColor(data); } - updateData(opt = {}) { - this.setState(opt, false); - this.modifyValue(opt); + removeImage(removeIndex) { + this.removePropertyList(this.images, removeIndex); + this.refreshImageKeys(); } - modifyValue(value) { - this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); + copyImage(index2) { + this.copyPropertyList(this.images, index2); + this.refreshImageKeys(); } - setValue(obj2) { - this.setState(__spreadValues({}, obj2)); + sortImage(startIndex, targetIndex) { + this.sortItem(this.images, startIndex, targetIndex); } - [BIND("$miniView")]() { - const { - type, - x, - y, - width: width2, - height: height2, - lineWidth, - lineHeight, - backColor, - foreColor, - blendMode - } = this.state; - let obj2 = { - type, - x, - y, - width: width2, - height: height2, - lineWidth, - lineHeight, - backColor, - foreColor, - blendMode - }; - if (this.state.width > 80) { - obj2.width = 80; - obj2.x = obj2.x.value / this.state.width / 80; - } - if (this.state.height > 80) { - obj2.height = 80; - obj2.y = this.state.y.value / this.state.height / 80; - } - const pattern = Pattern.parse(obj2); - return { - cssText: pattern.toCSS() - }; + setImageValue(index2, value = {}) { + this.images[index2] = __spreadValues(__spreadValues({}, this.images[index2]), value); + this.refreshImageKeys(); } - template() { - return ` -
-
-
-
-
-
-
- `; + getImageValueById(id, defaultValue2 = "") { + const image2 = this.imageKeys[id]; + if (!image2) + return id || defaultValue2; + return image2.local; } - [CLICK("$preview")]() { - this.viewBackgroundPositionPopup(); + getImageDataURIById(id) { + const image2 = this.imageKeys[id]; + if (!image2) + return void 0; + return image2.original; } - viewBackgroundPositionPopup() { - const layoutElement = this.$config.get("editor.layout.elements"); - const bodyRect = layoutElement.$bodyPanel.rect(); - const rect2 = this.$el.rect(); - const newRect = { - left: bodyRect.left + bodyRect.width - 240, - top: rect2.top, - width: 240, - height: 300 - }; - this.emit("showPatternInfoPopup", { - changeEvent: (pattern) => { - this.updateData(__spreadValues({}, pattern)); - }, - data: this.state, - instance: this - }, newRect); + refreshImageKeys() { + let imageKeys = {}; + this.images.forEach((it) => { + imageKeys[it.id] = it; + }); + this.reset({ + imageKeys + }); } -} -function patternAsset(editor) { - editor.registerElement({ - PatternEditor, - PatternSizeEditor, - PatternAssetsProperty - }); - editor.registerUI("inspector.tab.style", { - PatternProperty - }); - editor.registerUI("popup", { - PatternInfoPopup - }); -} -var PositionProperty$1 = ""; -const DEFAULT_SIZE = 0; -class PositionProperty extends BaseProperty { - getTitle() { - return this.$i18n("position.property.title"); + addImage(obj2) { + this.images.push(obj2); + this.refreshImageKeys(); + return obj2; } - afterRender() { - this.show(); + createImage(data = {}) { + return this.addImage(data); } - [SUBSCRIBE(REFRESH_SELECTION)]() { - this.refreshShowIsNot(["project"]); + removeVideo(removeIndex) { + this.removePropertyList(this.videos, removeIndex); + this.refreshVideoKeys(); } - checkChangedValue() { - var current = this.$context.selection.current; - if (!current) - return false; - return current.hasChangedField("x", "y", "right", "bottom", "width", "height", "angle", "transform", "opacity", "resizingVertical", "resizingHorizontal", "constraints-horizontal", "constriants-vertical"); + copyVideo(index2) { + this.copyPropertyList(this.videos, index2); + this.refreshVideoKeys(); } - [SUBSCRIBE(UPDATE_CANVAS) + IF("checkChangedValue") + THROTTLE(10)]() { - var current = this.$context.selection.current; - if (!current) - return ""; - this.children.$x.setValue(round(current.offsetX || DEFAULT_SIZE, 100)); - this.children.$y.setValue(round(current.offsetY || DEFAULT_SIZE, 100)); - this.children.$width.setValue(round(current.width || DEFAULT_SIZE, 100)); - this.children.$height.setValue(round(current.height || DEFAULT_SIZE, 100)); - this.children.$opacity.setValue(current.opacity || "1"); - this.children.$rotate.setValue(Length.deg(current.angle).round(100)); + sortVideo(startIndex, targetIndex) { + this.sortItem(this.videos, startIndex, targetIndex); } - isHideHeader() { - return true; + setVideoValue(index2, value = {}) { + this.videos[index2] = __spreadValues(__spreadValues({}, this.videos[index2]), value); } - getBodyClassName() { - return "no-padding"; + getVideoValueById(id) { + const video2 = this.videoKeys[id]; + if (!video2) + return void 0; + return video2.local; } - getBody() { - return ` -
-
- ${createComponent("NumberInputEditor", { - ref: "$x", - compact: true, - label: "X", - key: "x", - min: -1e5, - max: 1e5, - trigger: "enter", - onchange: "changRangeEditor" - })} - ${createComponent("NumberInputEditor", { - ref: "$y", - compact: true, - trigger: "enter", - label: "Y", - key: "y", - min: -1e4, - max: 1e4, - onchange: "changRangeEditor" - })} -
-
- ${createComponent("NumberInputEditor", { - ref: "$width", - compact: true, - trigger: "enter", - label: "W", - key: "width", - min: 0, - max: 3e3, - onchange: "changRangeEditor" - })} - ${createComponent("NumberInputEditor", { - ref: "$height", - compact: true, - trigger: "enter", - label: "H", - key: "height", - min: 0, - max: 3e3, - onchange: "changRangeEditor" - })} -
-
- ${createComponent("InputRangeEditor", { - ref: "$rotate", - key: "rotateZ", - compact: true, - label: "rotate_left", - min: -360, - max: 360, - step: 1, - units: ["deg"], - onchange: "changeRotate" - })} - ${createComponent("NumberInputEditor", { - ref: "$opacity", - key: "opacity", - compact: true, - label: "opacity", - min: 0, - max: 1, - step: 0.01, - onchange: "changeSelect" - })} -
-
- `; + refreshVideoKeys() { + let videoKeys = {}; + this.videos.forEach((it) => { + videoKeys[it.id] = it; + }); + this.reset({ + videoKeys + }); } - refresh() { - const current = this.$context.selection.current; - if (current) { - this.children.$x.setValue(round(current.offsetX || DEFAULT_SIZE, 100)); - this.children.$y.setValue(round(current.offsetY || DEFAULT_SIZE, 100)); - this.children.$width.setValue(round(current.width || DEFAULT_SIZE, 100)); - this.children.$height.setValue(round(current.height || DEFAULT_SIZE, 100)); - this.children.$opacity.setValue(current.opacity || "1"); - this.children.$rotate.setValue(Length.deg(current.angle)); - } + addVideo(obj2) { + this.videos.push(obj2); + this.refreshVideoKeys(); + return obj2; } - [CLICK("$positionItem button[data-command]")](e) { - const command = e.$dt.data("command"); - console.log(command); + createVideo(data = {}) { + return this.addVideo(data); } - [SUBSCRIBE_SELF("changRangeEditor")](key, value) { - this.$commands.executeCommand("setAttribute", "change position or size", this.$context.selection.packByValue({ - [key]: value - })); + removeGradient(removeIndex) { + this.removePropertyList(this.gradients, removeIndex); } - [SUBSCRIBE_SELF("changeRotate")](key, rotate2) { - this.$commands.executeCommand("setAttribute", "change rotate", this.$context.selection.packByValue({ - angle: rotate2.value - })); + copyGradient(index2) { + this.copyPropertyList(this.gradients, index2); } - [SUBSCRIBE_SELF("changeSelect")](key, value) { - this.$commands.executeCommand("setAttribute", `change ${key}`, this.$context.selection.packByValue({ - [key]: value - })); + sortGradient(startIndex, targetIndex) { + this.sortItem(this.gradients, startIndex, targetIndex); } -} -function position(editor) { - editor.registerUI("inspector.tab.style", { - PositionProperty - }); -} -var ProjectProperty$1 = ""; -class ProjectProperty extends BaseProperty { - getTitle() { - return this.$i18n("project.property.title"); + setGradientValue(index2, value) { + this.gradients[index2] = __spreadValues(__spreadValues({}, this.gradients[index2]), value); } - getClassName() { - return "full"; + getGradientIndex(index2) { + return this.gradients[index2]; } - getTools() { - return ` - - `; + getGradient(name) { + return this.gradients.filter((item) => item.name === name)[0]; } - [CLICK("$add")]() { - this.$commands.emit("addProject"); + addGradient(obj2 = {}) { + this.gradients.push(obj2); + return obj2; } - getBody() { - return ` -
- `; + createGradient(data = {}) { + return this.addGradient(data); } - [LOAD("$projectList") + DOMDIFF]() { + getSVGFilterIndex(id) { var _a; - var projects = ((_a = this.$model) == null ? void 0 : _a.projects) || []; - return projects.map((projectId) => { - var selected = projectId === this.$context.selection.currentProject.id ? "selected" : ""; - const project2 = this.$model.get(projectId); - return ` -
-
- -
- -
-
-
- `; + var filter2 = this.svgfilters.map((it, index2) => { + return { id: it.id, index: index2 }; + }).filter((it) => { + return it.id === id; }); + return filter2.length ? (_a = filter2 == null ? void 0 : filter2[0]) == null ? void 0 : _a.index : -1; } - [DOUBLECLICK("$projectList .project-item")](e) { - this.startInputEditing(e.$dt.$("label")); + removeSVGFilter(removeIndex) { + this.removePropertyList(this.svgfilters, removeIndex); } - modifyDoneInputEditing(input2) { - this.endInputEditing(input2, (index2, text2) => { - var project2 = this.$editor.projects[index2]; - if (project2) { - project2.reset({ - name: text2 - }); - } - }); + copySVGFilter(index2) { + this.copyPropertyList(this.svgfilters, index2); } - [KEYDOWN("$projectList .project-item label") + ENTER + PREVENT + STOP](e) { - this.modifyDoneInputEditing(e.$dt); - return false; + sortSVGFilter(startIndex, targetIndex) { + this.sortItem(this.svgfilters, startIndex, targetIndex); } - [FOCUSOUT("$projectList .project-item label") + PREVENT + STOP](e) { - this.modifyDoneInputEditing(e.$dt); + setSVGFilterValue(index2, value) { + this.svgfilters[index2] = __spreadValues(__spreadValues({}, this.svgfilters[index2]), value); } - [CLICK("$projectList .project-item label")](e) { - var id = e.$dt.attr("data-id"); - this.commands.executeCommand("refreshSelectionPorject", "change project", id); - this.nextTick(() => { - this.refresh(); - }); + addSVGFilter(obj2 = {}) { + this.svgfilters.push(obj2); + var index2 = this.svgfilters.length - 1; + return index2; } - [CLICK("$projectList .project-item .remove")](e) { - var id = e.$dt.attr("data-id"); - this.$commands.executeCommand("removeProject", "remove project", id); - this.nextTick(() => { - this.refresh(); - }); + createSVGFilter(data = {}) { + return this.addSVGFilter(data); } - [SUBSCRIBE("refreshProjectList", "refreshAll")]() { - this.refresh(); + getSVGImageIndex(id) { + var filter2 = this.svgimages.map((it, index2) => { + return { id: it.id, index: index2 }; + }).filter((it) => { + return it.id === id; + })[0]; + return filter2 ? filter2.index : -1; + } + removeSVGImage(removeIndex) { + this.removePropertyList(this.svgimages, removeIndex); + } + copySVGImage(index2) { + this.copyPropertyList(this.svgimages, index2); + } + sortSVGImage(startIndex, targetIndex) { + this.sortItem(this.svgimages, startIndex, targetIndex); + } + setSVGImageValue(index2, value) { + this.svgimages[index2] = __spreadValues(__spreadValues({}, this.svgimages[index2]), value); + } + addSVGImage(obj2 = {}) { + this.svgimages.push(obj2); + var index2 = this.svgimages.length - 1; + return index2; + } + createSVGImage(data = {}) { + return this.addSVGImage(data); } } -function project(editor) { - editor.registerElement({ - ProjectProperty - }); -} -class JSONRenderer { - constructor(editor) { - this.editor = editor; +class TimelineModel extends AssetModel { + constructor() { + super(...arguments); + __privateAdd(this, _compiledTimeline, []); } - getDefaultRendererInstance() { - return this.editor.getRendererInstance("json", "rect"); + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + timeline: [], + compiledTimeline: {} + }, obj2)); } - getRendererInstance(item) { - return this.editor.getRendererInstance("json", item.itemType) || this.getDefaultRendererInstance() || item; + get timeline() { + return this.get("timeline"); } - async render(item, renderer) { - if (!item) + set timeline(value) { + this.set("timeline", value); + } + expectJSON(key) { + if (key === "compiledTimeline") + return false; + return super.expectJSON(key); + } + setTimelineInfo(obj2) { + var timeline = this.getSelectedTimeline(); + if (!timeline) return; - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return await currentRenderer.render(item, renderer || this); + ["speed", "iterationCount", "direction"].forEach((key) => { + if (isNotUndefined(obj2[key])) { + timeline[key] = obj2[key]; + } + }); + } + compileAll() { + var timeline = this.getSelectedTimeline(); + __privateSet(this, _compiledTimeline, {}); + if (timeline) { + timeline.animations.forEach((animation2) => { + animation2.properties.forEach((property) => { + this.compiledTimingFunction(animation2.id, property.property); + }); + }); } } - async renderAll(items, renderer) { - return await Promise.all(items.map(async (it) => { - return await this.render(it, renderer); - })); + searchTimelineOffset(time) { + var timeline = this.getSelectedTimeline(); + var filteredTimeline = []; + if (timeline) { + timeline.animations.forEach((animation2) => { + animation2.properties.forEach((p) => { + var list2 = this.getCompiledTimingFunction(animation2.id, p.property); + filteredTimeline.push(list2.find((keyframe2) => { + if (keyframe2.isOnlyTime && keyframe2.startTime <= time) + return true; + return keyframe2.startTime <= time && time < keyframe2.endTime; + })); + }); + }); + } + return filteredTimeline.filter((it) => it); } - async getResourceDataURI() { + getCompiledTimingFunction(layerId, property) { + return __privateGet(this, _compiledTimeline)[`${layerId}.${property}`]; } -} -class ItemRender$1 { - async render(item, renderer) { - return await this.toCloneObject(item, renderer); + compiledTimingFunction(layerId, property) { + var artboard2 = this; + var p = this.getTimelineProperty(layerId, property); + var layer = this.modelManager.get(layerId); + var key = `${layerId}.${property}`; + if (p.keyframes.length === 1) { + __privateGet(this, _compiledTimeline)[key] = []; + return; + } + let layerElement = Dom.body().$(`[data-id="${layerId}"]`); + let editorString = p.keyframes.map((it) => it.editor)[0]; + __privateGet(this, _compiledTimeline)[key] = p.keyframes.map((offset, index2) => { + var currentOffset = offset; + var nextOffset = p.keyframes[index2 + 1]; + offset.editor = editorString; + if (!nextOffset) { + nextOffset = { time: offset.time, value: offset.value }; + } + var it = { + layer, + layerElement, + property: p.property, + isOnlyTime: currentOffset.time === nextOffset.time, + startTime: offset.time, + endTime: nextOffset.time, + startValue: offset.value, + endValue: nextOffset.value, + timing: offset.timing, + interpolateFunction: createInterpolateFunction(layer, p.property, offset.value, nextOffset.value, offset.editor, artboard2, layerElement), + timingFunction: createTimingFunction(offset.timing) + }; + it.func = this.makeTimingFunction(it); + return it; + }).filter((it) => it); } - async toCloneObject(item, renderer) { - var json = item.attrs("itemType", "name", "elementType", "type", "visible", "lock", "selected"); - if (item.parent && item.parent.isNot("project")) { - json.parentId = item.parentId; + makeTimingFunction(it) { + return (time) => { + var totalT = it.endTime - it.startTime; + var t = 1; + if (totalT !== 0) { + t = (time - it.startTime) / totalT; + } + return it.interpolateFunction(it.timingFunction(t), t, totalT, it.timingFunction); + }; + } + stop() { + var timeline = this.getSelectedTimeline(); + if (timeline) { + var time = timeline.currentTime; + this.searchTimelineOffset(time).forEach((it) => { + if (it.property === "playTime") { + const $video = it.layerElement.$("video"); + if ($video) { + $video.el.pause(); + } + } + }); } - json.referenceId = item.id; - json.newTargetId = uuid(); - let layers2 = []; - for (var i = 0, len2 = item.layers.length; i < len2; i++) { - layers2.push(await renderer.render(item.layers[i], renderer)); + } + seek(frameOrCode, filterFunction = (it) => it) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + if (isNotUndefined(frameOrCode)) { + this.setTimelineCurrentTime(frameOrCode); + } + var time = timeline.currentTime; + this.searchTimelineOffset(time).filter(filterFunction).forEach((it) => { + if (it.property === "offset-path" || it.property === "playTime") { + it.func(time); + } else if (it.layer) { + it.layer.reset({ + [it.property]: it.func(time) + }); + } + }); } - json.layers = layers2; - return json; } -} -class BaseAssetRender extends ItemRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("svgfilters", "keyframes")); + getSelectedTimeline() { + var timeline = this.timeline; + var a = timeline.filter((it) => it.selected); + var selectedTimeline = a.length ? a[0] : timeline[0]; + return selectedTimeline || null; } -} -class GroupRender extends BaseAssetRender { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("layout", "constraintsHorizontal", "constraintsVertical", "resizingMode", "flexDirection", "flexWrap", "flexFlow", "justifyContent", "alignItems", "alignContent", "order", "flexBasis", "flexGrow", "flexShrink", "gap", "gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas", "gridAutoRows", "gridAutoColumns", "gridAutoFlow", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd", "gridColumnGap", "gridRowGap", "animation", "transition", "paddingTop", "paddingRight", "paddingLeft", "paddingBottom")); + getKeyframeListReturnArray() { + var timeline = this.getSelectedTimeline(); + var keyframes = []; + if (timeline) { + timeline.animations.forEach((a) => { + a.properties.forEach((p) => { + keyframes.push.apply(keyframes, p.keyframes); + }); + }); + } + return keyframes; } -} -class MovableRender extends GroupRender { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("x", "y", "right", "bottom", "width", "height", "angle", "transformOrigin")); + getKeyframeList(callback) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.animations.forEach((a) => { + a.properties.forEach((p) => { + p.keyframes.forEach((k) => { + callback && callback(timeline, k); + }); + }); + }); + } } -} -class DomRender$1 extends MovableRender { - async toCloneObject(item, renderer) { - return __spreadProps(__spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("position", "rootVariable", "variable", "filter", "backdropFilter", "backgroundColor", "backgroundImage", "textClip", "borderRadius", "border", "boxShadow", "textShadow", "clipPath", "color", "fontSize", "lineHeight", "textAlign", "textTransform", "textDecoration", "letterSpacing", "wordSpacing", "textIndent", "perspectiveOrigin", "transformStyle", "perspective", "mixBlendMode", "overflow", "opacity", "animation", "transition")), { - selectors: item.selectors.map((selector2) => selector2.clone()), - svg: item.svg.map((svg) => svg.clone()) + getSelectedTimelineLastTime() { + var time = 0; + this.getKeyframeList((timeline, keyframe2) => { + time = Math.max(keyframe2.time, time); }); + return time; } -} -class ArtBoardRender$2 extends DomRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("name")); + getSelectedTimelineFirstTime() { + var time = Number.MAX_SAFE_INTEGER; + this.getKeyframeList((timeline, keyframe2) => { + time = Math.min(keyframe2.time, time); + }); + return time; } -} -class LayerRender$1 extends DomRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("tagName")); + getSelectedTimelinePrevTime() { + var time = this.getSelectedTimelineFirstTime(); + this.getKeyframeList((timeline, keyframe2) => { + if (timecode(timeline.fps, keyframe2.time) < timeline.currentTimecode) { + time = Math.max(keyframe2.time, time); + } + }); + return time; } -} -class SVGItemRender$2 extends LayerRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("overflow", "stroke", "stroke-width", "svgfilter", "fill", "fill-rule", "fill-opacity", "stroke-linecap", "stroke-linejoin", "stroke-dashoffset", "stroke-dasharray", "text-anchor")); + getSelectedTimelineNextTime() { + var time = this.getSelectedTimelineLastTime(); + this.getKeyframeList((timeline, keyframe2) => { + if (timecode(timeline.fps, keyframe2.time) > timeline.currentTimecode) { + time = Math.min(keyframe2.time, time); + } + }); + return time; } -} -class BooleanPathRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("d", "booleanOperation")); + setTimelineTitle(id, text2) { + var timeline = this.timeline.find((it) => { + return it.id === id; + }); + if (timeline) { + timeline.title = text2; + } } -} -class CircleRender$2 extends LayerRender$1 { -} -class IFrameRender$1 extends LayerRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("src")); + selectTimeline(id) { + if (id) { + this.timeline.forEach((it) => { + it.selected = it.id === id; + }); + } else { + var selectedTimeline = this.timeline.filter((it) => it.selected); + if (selectedTimeline.length) + ; + else { + if (this.timeline.length) { + this.timeline.selected = true; + } + } + } + this.compileAll(); } -} -class ImageRender$2 extends LayerRender$1 { - async toCloneObject(item, renderer) { - const project2 = item.project; - const image2 = project2.imageKeys[item.src]; - const src = image2.original; - return __spreadProps(__spreadValues({}, await super.toCloneObject(item, renderer)), { - src + removeAnimation(id) { + this.timeline = this.timeline.filter((it) => { + return it.id !== id; }); + if (this.timeline.length) { + this.timeline[0].selected = true; + } + this.compileAll(); } -} -class AssetRender extends ItemRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("colors", "gradients", "svgfilters", "svgimages", "images", "keyframes")); + addTimeline(fps = 60, endTimecode = "00:00:10:00") { + var id = uuidShort(); + var selectedTimeline = __spreadProps(__spreadValues({ + id, + title: "sample" + }, this.getTimelineLayerInfo(fps, endTimecode)), { + animations: [] + }); + this.timeline.push(selectedTimeline); + this.selectTimeline(id); + return selectedTimeline; } -} -class TimelineRender extends AssetRender { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("timeline")); + addTimelineLayer(layerId, fps = 60, endTimecode = "00:00:10:00") { + var selectedTimeline = this.getSelectedTimeline(); + if (!selectedTimeline) { + selectedTimeline = this.addTimeline(fps, endTimecode); + } + selectedTimeline.selected = true; + if (layerId) { + var layer = selectedTimeline.animations.filter((it) => it.id === layerId); + if (!layer[0]) { + selectedTimeline.animations.push({ + id: layerId, + properties: [] + }); + } + } + } + getTimelineLayerInfo(fps = 60, endTimecode = "00:00:10:00") { + var endTime = second(fps, endTimecode); + return { + fps, + speed: 1, + direction: "normal", + iterationCount: 1, + currentTimecode: timecode(fps, 0), + totalTimecode: timecode(fps, endTime), + currentTime: 0, + totalTime: endTime, + displayStartTime: 0, + displayEndTime: endTime + }; } -} -class ProjectRender$2 extends TimelineRender { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("name", "description", "rootVariable")); + setTimelineCurrentTime(frameOrCode) { + var timeline = this.getSelectedTimeline(); + var { fps, totalTimecode } = timeline; + if (timeline) { + var frame = frameOrCode; + var code2 = frameOrCode; + if (+frame + "" === frame) { + frame = +frame; + code2 = framesToTimecode(fps, frame); + } + if (code2 > totalTimecode) { + code2 = totalTimecode; + } + var currentTime = second(fps, code2); + timeline.currentTime = currentTime; + timeline.currentTimecode = timecode(fps, currentTime); + } } -} -class RectRender$2 extends LayerRender$1 { -} -class SplineRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("points", "boundary")); + setDisplayTimeDxRate(dxRate, initStartTime, initEndTime) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + var dxTime = dxRate * timeline.totalTime; + var startTime = initStartTime + dxTime; + var endTime = initEndTime + dxTime; + startTime = Math.max(startTime, 0); + startTime = Math.min(startTime, endTime); + if (startTime === 0) { + endTime = initEndTime - initStartTime; + } + endTime = Math.max(endTime, startTime); + endTime = Math.min(endTime, timeline.totalTime); + if (endTime === timeline.totalTime) { + startTime = timeline.totalTime - (initEndTime - initStartTime); + } + timeline.displayStartTime = startTime; + timeline.displayEndTime = endTime; + } } -} -class SVGPathRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("d")); + setDisplayStartTimeRate(rate) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.displayStartTime = rate * timeline.totalTime; + } } -} -class SVGPolygonRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("count")); + setDisplayEndTimeRate(rate) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.displayEndTime = rate * timeline.totalTime; + } } -} -class SVGStarRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("count", "radius")); + setTimelineCurrentTimeRate(rate) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + var { displayStartTime, displayEndTime, fps } = timeline; + var currentTime = displayStartTime + (displayEndTime - displayStartTime) * rate; + this.setTimelineCurrentTime(timecode(fps, currentTime)); + } } -} -class SVGTextPathRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("totalLength", "d", "text", "textLength", "lengthAdjust", "startOffset")); + setTimelineTotalTime(frameOrCode) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + var frame = frameOrCode; + var code2 = frameOrCode; + if (+frame + "" === frame) { + frame = +frame; + code2 = framesToTimecode(timeline.fps, frame); + } + if (second(timeline.fps, code2) < timeline.displayEndTime) { + timeline.displayEndTime = second(timeline.fps, code2); + timeline.displayStartTime = 0; + } + timeline.totalTimecode = code2; + timeline.totalTime = second(timeline.fps, code2); + } } -} -class SVGTextRender$2 extends SVGItemRender$2 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("totalLength", "text", "textLength", "lengthAdjust", "shape-inside")); + getTimelineObject(layerId) { + var selectedTimeline = this.getSelectedTimeline(); + if (selectedTimeline) { + return selectedTimeline.animations.find((it) => it.id === layerId); + } } -} -class TemplateRender$2 extends LayerRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("engine", "template", "params")); + addTimelineProperty(layerId, property) { + this.addTimelineLayer(layerId); + var animation2 = this.getTimelineObject(layerId); + if (animation2) { + var p = animation2.properties.filter((it) => it.property === property); + if (!p.length) { + animation2.properties.push({ + property, + keyframes: [] + }); + this.compiledTimingFunction(layerId, property); + } + } } -} -class TextRender$2 extends LayerRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("content")); + getTimelineProperty(layerId, property) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + layerId = layerId || timeline.selectedLayerId; + property = property || timeline.selectedProperty; + var timelineObject = this.getTimelineObject(layerId); + if (timelineObject) { + return timelineObject.properties.find((it) => it.property === property); + } + } } -} -class VideoRender$2 extends LayerRender$1 { - async toCloneObject(item, renderer) { - return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("src")); + setSelectedOffset(layerId, property, time) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.selectedLayerId = layerId; + timeline.selectedProperty = property; + timeline.selectedOffsetTime = time; + var p = this.getTimelineProperty(); + p.keyframes.forEach((it) => { + it.selected = it.time === time; + }); + } } -} -function rendererJson(editor) { - editor.registerRendererType("json", new JSONRenderer(editor)); - editor.registerRenderer("json", "project", new ProjectRender$2()); - editor.registerRenderer("json", "artboard", new ArtBoardRender$2()); - editor.registerRenderer("json", "rect", new RectRender$2()); - editor.registerRenderer("json", "circle", new CircleRender$2()); - editor.registerRenderer("json", "image", new ImageRender$2()); - editor.registerRenderer("json", "template", new TemplateRender$2()); - editor.registerRenderer("json", "iframe", new IFrameRender$1()); - editor.registerRenderer("json", "text", new TextRender$2()); - editor.registerRenderer("json", "video", new VideoRender$2()); - editor.registerRenderer("json", "svg-path", new SVGPathRender$2()); - editor.registerRenderer("json", "boolean-path", new BooleanPathRender$2()); - editor.registerRenderer("json", "polygon", new SVGPolygonRender$2()); - editor.registerRenderer("json", "star", new SVGStarRender$2()); - editor.registerRenderer("json", "spline", new SplineRender$2()); - editor.registerRenderer("json", "svg-text", new SVGTextRender$2()); - editor.registerRenderer("json", "svg-textpath", new SVGTextPathRender$2()); -} -class SampleLayer extends LayerModel { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - itemType: "sample", - name: "New Sample Layer", - sampleText: "Sample Text 1", - sampleNumber: 1 - }, obj2)); + deleteTimelineKeyframe(layerId, property, offsetId) { + var p = this.getTimelineProperty(layerId, property); + if (p) { + p.keyframes = p.keyframes.filter((it) => it.id != offsetId); + } } - get sampleText() { - return this.get("sampleText"); + removeTimelineProperty(layerId, property) { + var layer = this.getTimelineObject(layerId); + if (layer) { + layer.properties = layer.properties.filter((p) => p.property != property); + } } - set sampleText(value) { - this.set("sampleText", value); + removeTimeline(layerId) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.animations = timeline.animations.filter((ani) => ani.id != layerId); + } } - get sampleNumber() { - return this.get("sampleNumber"); + setTimelineKeyframeOffsetTime(layerId, property, offsetId, changedTime) { + var keyframe2 = this.getTimelineKeyframeById(layerId, property, offsetId); + if (keyframe2) { + keyframe2.time = changedTime; + this.compiledTimingFunction(layerId, property); + } } - set sampleNumber(value) { - this.set("sampleNumber", value); + setTimelineKeyframeOffsetValue(layerId, property, offsetId, value = void 0, timing = void 0, time = void 0) { + var keyframe2 = this.getTimelineKeyframeById(layerId, property, offsetId); + if (keyframe2) { + if (isNotUndefined(time)) { + keyframe2.time = time; + } + if (isNotUndefined(value)) { + keyframe2.value = value; + } + if (isNotUndefined(timing)) { + keyframe2.timing = timing; + } + this.compiledTimingFunction(layerId, property); + } } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("sampleText", "sampleNumber")); + addTimelineKeyframe({ + layerId, + property, + value, + timing, + time: newTime, + editor + }) { + this.addTimelineProperty(layerId, property); + var timeline = this.getSelectedTimeline(); + var p = this.getTimelineProperty(layerId, property); + if (p) { + var time = newTime || timeline.currentTime; + var times = p.keyframes.filter((it) => it.time === time); + if (!times.length) { + value = isUndefined(value) || value === "" ? this.getDefaultPropertyValue(property) : value; + var obj2 = { + id: uuidShort(), + layerId, + property, + time, + value, + timing: timing || "linear", + editor + }; + p.keyframes.push(obj2); + p.keyframes.sort((a, b) => { + return a.time > b.time ? 1 : -1; + }); + this.compiledTimingFunction(layerId, property); + return obj2; + } + } } - editable(editablePropertyName) { - switch (editablePropertyName) { - case "sample": - return true; + getDefaultPropertyValue(property) { + switch (property) { + case "mix-blend-mode": + return "normal"; + case "rotate": + return "0deg"; + case "box-shadow": + return "0px 0px 0px 0px rgba(0, 0, 0, 1)"; + case "text-shadow": + return "0px 0px 0px rgba(0, 0, 0, 1)"; + case "opacity": + return 1; + default: + return ""; } - return super.editable(editablePropertyName); } - getDefaultTitle() { - return "Sample Layer"; + copyTimelineKeyframe(layerId, property, newTime = null) { + var p = this.getTimelineProperty(layerId, property); + if (p) { + var timeline = this.getSelectedTimeline(); + var time = newTime || timeline.currentTime; + var times = p.keyframes.filter((it) => it.time < time); + var value = this.getDefaultPropertyValue(property); + var timing = "linear"; + var editor = ""; + if (times.length) { + times.sort((a, b) => { + return a.time > b.time ? -1 : 1; + }); + value = times[0].value + ""; + timing = times[0].timing + ""; + editor = times[0].editor; + } + this.addTimelineKeyframe({ layerId, property, value, timing, editor }); + } } -} -class ItemRender { - constructor(renderer) { - this.renderer = renderer; + getTimelineKeyframe(layerId, property, time) { + var p = this.getTimelineProperty(layerId, property); + if (p) { + return p.keyframes.find((it) => it.time === time); + } } - setRenderer(renderer) { - this.renderer = renderer; + getTimelineKeyframeById(layerId, property, id) { + var p = this.getTimelineProperty(layerId, property); + if (p) { + return p.keyframes.find((it) => it.id === id); + } } - getInnerId(item, postfix = "") { - return item.id + postfix; + sortTimelineKeyframe(layerId, property) { + var p = this.getTimelineProperty(layerId, property); + if (p) { + p.keyframes.sort((a, b) => { + return a.time > b.time ? 1 : -1; + }); + this.compiledTimingFunction(layerId, property); + } } - uniqueId(item) { - return this.renderer.id + "-" + item.id; + setFps(fps) { + var timeline = this.getSelectedTimeline(); + if (timeline) { + timeline.fps = fps; + timeline.currentTimecode = timecode(fps, timeline.currentTime); + timeline.totalTimecode = timecode(fps, timeline.totalTime); + } } } -const Primitive = "SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","); -const DEFAULT_ATTRIBUTES = { - xChannelSelector: true, - yChannelSelector: true -}; -class BaseSVGFilter extends PropertyItem { - static parse(obj2) { - var FilterClass = SVGFilterClassName[obj2.type]; - return new FilterClass(obj2); +_compiledTimeline = new WeakMap(); +const identity = create$4(); +class Project extends TimelineModel { + getDefaultTitle() { + return "New Project"; } - hasLight() { + get isAbsolute() { return false; } - isLight() { - return false; + get parent() { + return null; } - isSource() { - return false; + get nestedAngle() { + return 0; + } + toRootVariableCSS() { + var obj2 = {}; + this.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { + var [key, value] = it.split(":"); + obj2[`--${key}`] = value; + }); + return obj2; } getDefaultObject(obj2 = {}) { - var id = uuidShort(); return super.getDefaultObject(__spreadValues({ - itemType: "svgfilter", - id, - in: [], - bound: { x: 100, y: 100, targetX: 0, targetY: 0 }, - connected: [] + itemType: "project", + name: "new Project", + description: "", + rootVariable: "" }, obj2)); } - getInCount() { - return 0; - } - setIn(index2, target) { - this.json.in[index2] = { id: target.id, type: target.type }; + get description() { + return this.get("description"); } - setConnected(target) { - var f = this.json.connected.filter((c2) => c2.id === target.id); - if (f.length === 0) { - this.json.connected.push({ id: target.id }); - } + set description(value) { + this.set("description", value); } - convert(json) { - if (typeof json.in === "string") { - json.in = JSON.parse(json.in); - } - if (typeof json.bound === "string") { - json.bound = JSON.parse(json.bound); - } - if (typeof json.connected === "string") { - json.connected = JSON.parse(json.connected); - } - return json; + get rootVariable() { + return this.get("rootVariable"); } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("id", "in", "bound", "connected")); + set rootVariable(value) { + this.set("rootVariable", value); } - getDefaultAttribute() { - var list2 = []; - if (this.json.connected.length) { - list2.push(`result="${this.json.id}result"`); - } - Object.keys(DEFAULT_ATTRIBUTES).filter((key) => { - return !!this.json[key]; - }).forEach((key) => { - list2.push(`${key}="${this.json[key]}"`); - }); - return list2.join(" ") + " " + this.getSourceInAttribute(); + get artboards() { + return (this.layers || []).filter((it) => it.is("artboard")); } - hasInIndex() { - return false; + get offsetX() { + return 0; } - getSourceInAttribute(inList) { - return (inList || this.json.in).map((it, index2) => { - if (!it) - return ""; - var indexString = index2 === 0 ? "" : index2 + 1 + ""; - if (!this.hasInIndex()) { - indexString = ""; - } - if (Primitive.includes(it.type)) { - return `in${indexString}="${it.type}"`; - } - return `in${indexString}="${it.id}result"`; - }).join(" "); + get offsetY() { + return 0; } - toString() { - var { type, value } = this.json; - return ``; + get screenWidth() { + return 0; } -} -class SourceSVGFilter extends BaseSVGFilter { - getDefaultObject(obj2 = {}) { - return super.getDefaultObject(__spreadValues({ - type: "Source" - }, obj2)); + get screenHeight() { + return 0; } - isSource() { - return true; + isLayoutItem() { + return false; } - toString() { - return ""; + hasLayout() { + return false; } -} -class BackgroundAlphaSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "BackgroundAlpha" - }); + getAbsoluteMatrix() { + return create$4(); } -} -class BackgroundImageSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "BackgroundImage" - }); + getTransformMatrix() { + return create$4(); } -} -class BlendSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Blend", - mode: BlendSVGFilter.spec.mode.defaultValue + resetMatrix(childItem) { + const [x, y] = getTranslation([], calculateMatrix(childItem.absoluteMatrix, childItem.localMatrixInverse)); + childItem.reset({ + x, + y }); } - getInCount() { - return 2; + get rectVerties() { + var _a; + return ((_a = this.layers) == null ? void 0 : _a.length) ? itemsToRectVerties(this.layers) : null; } - toString() { - var { mode } = this.json; - return ``; + get absoluteMatrix() { + return identity; } - hasInIndex() { - return true; + get absoluteMatrixInverse() { + return identity; } -} -BlendSVGFilter.spec = { - mode: { - title: "mode", - inputType: "blend", - defaultValue: "normal" + get contentBox() { + return { + left: 0, + top: 0, + width: 0, + height: 0 + }; } -}; -class ColorMatrixSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "ColorMatrix", - values: ColorMatrixSVGFilter.spec.values.defaultValue - }); +} +class RectLayer extends LayerModel { + getIcon() { + return obj$2.rect; } - getInCount() { - return 1; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "rect", + name: "New Rect" + }, obj2)); } - toString() { - var { values } = this.json; - var valueString = values.join(" "); - return ``; + getDefaultTitle() { + return "Rect"; } } -ColorMatrixSVGFilter.spec = { - values: { - title: "values", - inputType: "color-matrix", - column: 5, - defaultValue: [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] - } +var isNdarray$2 = function(arr) { + if (!arr) + return false; + if (!arr.dtype) + return false; + var re = new RegExp("function View[0-9]+d(:?" + arr.dtype + ")+"); + return re.test(String(arr.constructor)); }; -class ComponentTransferSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "ComponentTransfer", - r: ComponentTransferSVGFilter.spec.r.defaultValue, - g: ComponentTransferSVGFilter.spec.g.defaultValue, - b: ComponentTransferSVGFilter.spec.b.defaultValue, - a: ComponentTransferSVGFilter.spec.a.defaultValue - }); - } - getInCount() { - return 1; +var isNdarrayLike$3 = function(arr) { + if (!arr) + return false; + return arr.data !== void 0 && Array.isArray(arr.shape) && arr.offset !== void 0 && arr.stride !== void 0; +}; +var isArrayLike$5 = function isArrayLike(data) { + return Array.isArray(data) || ArrayBuffer.isView(data); +}; +var isNdarray$1 = isNdarray$2; +var isNdarrayLike$2 = isNdarrayLike$3; +var isArrayLike$4 = isArrayLike$5; +function inferType$5(x) { + if (!x) { + return void 0; } - parse(value) { - var [type, ...values] = value.split(" "); - if (type === "table" || type === "discrete") { - return { type, tableValues: values.join(" ") }; + if (isNdarray$1(x) || isNdarrayLike$2(x)) { + if (x.dtype === "generic") { + return inferType$5.GENERIC_NDARRAY; } - if (type === "linear") { - var [slop, intercept] = values; - return { type, slop, intercept }; - } else if (type === "gamma") { - var [amplitude, exponent, offset] = values; - return { type, amplitude, exponent, offset }; + return inferType$5.NDARRAY; + } else { + if (isArrayLike$4(x)) { + return inferType$5.ARRAY_OF_ARRAYS; } - return { type }; - } - toString() { - var { r, g, b, a } = this.json; - r = this.parse(r); - g = this.parse(g); - b = this.parse(b); - a = this.parse(a); - return ` - ${r && ``} - ${g && ``} - ${b && ``} - ${a && ``} - `; + throw new Error("Unhandled data type. Got type: " + typeof x); } } -ComponentTransferSVGFilter.spec = { - r: { - title: "R", - inputType: "FuncFilter", - defaultValue: "identity" - }, - g: { - title: "G", - inputType: "FuncFilter", - defaultValue: "identity" - }, - b: { - title: "B", - inputType: "FuncFilter", - defaultValue: "identity" - }, - a: { - title: "A", - inputType: "FuncFilter", - defaultValue: "identity" +inferType$5.ARRAY_OF_ARRAYS = "Arr"; +inferType$5.NDARRAY = "Nd"; +inferType$5.GENERIC_NDARRAY = "GenNd"; +inferType$5.PACKED = "PackArr"; +var inferType_1 = inferType$5; +var isArrayLike$3 = isArrayLike$5; +function capitalize(str) { + return str[0].toUpperCase() + str.slice(1); +} +var cacheKey = function(nurbs2, debug, checkBounds, pointType, weightType, knotType) { + var d; + var degreeParts = []; + var hasAnyKnots = false; + for (d = 0; d < nurbs2.splineDimension; d++) { + var hasKnots = isArrayLike$3(nurbs2.knots) && isArrayLike$3(nurbs2.knots[d]); + if (hasKnots) + hasAnyKnots = true; + degreeParts.push("Deg" + nurbs2.degree[d] + (hasKnots ? "" : "Uniform") + capitalize(nurbs2.boundary[d])); } -}; -class CompositeSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Composite", - operator: CompositeSVGFilter.spec.operator.defaultValue, - k1: CompositeSVGFilter.spec.k1.defaultValue, - k2: CompositeSVGFilter.spec.k2.defaultValue, - k3: CompositeSVGFilter.spec.k3.defaultValue, - k4: CompositeSVGFilter.spec.k4.defaultValue - }); + var parts = [ + [ + hasAnyKnots ? "NU" : "", + nurbs2.weights ? "RBS" : "BS" + ].join("") + nurbs2.dimension + "D", + degreeParts.join("_") + ]; + if (pointType) { + parts.push(pointType + "Pts"); } - getInCount() { - return 2; + if (weightType) { + parts.push(weightType + "Wts"); } - toString() { - var { operator, k1, k2, k3, k4 } = this.json; - var kNumbers = ""; - if (operator === "arithmetic") { - kNumbers = ` k1="${k1}" k2="${k2}" k3="${k3}" k4="${k4}" `; - } - return ``; + if (knotType) { + parts.push(knotType + "Kts"); } - hasInIndex() { - return true; + if (debug) { + parts.push("debug"); } + if (checkBounds) { + parts.push("chk"); + } + return parts.join("_"); +}; +var createVariable$1 = function createVariable(name, nurbs2) { + return function(i, period) { + if (i !== void 0 && !Array.isArray(i)) + i = [i]; + var dimAccessors = []; + for (var j = 0; j < i.length; j++) { + dimAccessors.push(createVariable.sum(i[j])); + } + if (period) { + for (i = 0; i < dimAccessors.length; i++) { + if (period[i] === void 0) + continue; + dimAccessors[i] = "(" + dimAccessors[i] + " + " + period[i] + ") % " + period[i]; + } + } + return name + dimAccessors.join("_"); + }; +}; +createVariable$1.sum = function(parts) { + parts = Array.isArray(parts) ? parts : [parts]; + parts = parts.filter(function(part) { + return part !== void 0 && part !== 0; + }); + if (parts.length === 0) + parts.push(0); + return parts.join(" + "); +}; +var variable$3 = createVariable$1; +var inferType$4 = inferType_1; +var createVariable2 = variable$3; +function wrapAccessor(callback) { + return function(i, period) { + if (i !== void 0 && !Array.isArray(i)) + i = [i]; + var dimAccessors = []; + for (var j = 0; j < i.length; j++) { + dimAccessors.push(createVariable2.sum(i[j])); + } + if (period) { + for (i = 0; i < dimAccessors.length; i++) { + if (period[i] === void 0) + continue; + dimAccessors[i] = "(" + dimAccessors[i] + " + " + period[i] + ") % " + period[i]; + } + } + return callback(dimAccessors); + }; } -CompositeSVGFilter.spec = { - operator: { - title: "operator", - inputType: "select", - options: "over,in,out,atop,xor,arithmetic", - defaultValue: "over" - }, - k1: { - title: "k1", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) - }, - k2: { - title: "k2", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) - }, - k3: { - title: "k3", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) - }, - k4: { - title: "k4", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) +function createAccessor(name, data) { + var i; + if (!data) + return void 0; + switch (inferType$4(data)) { + case inferType$4.ARRAY_OF_ARRAYS: + return wrapAccessor(function(accessors) { + return name + "[" + accessors.join("][") + "]"; + }); + case inferType$4.GENERIC_NDARRAY: + return wrapAccessor(function(accessors) { + return name + ".get(" + accessors.join(",") + ")"; + }); + case inferType$4.NDARRAY: + return wrapAccessor(function(accessors) { + var code2 = [name + "Offset"]; + for (i = 0; i < accessors.length; i++) { + code2.push(name + "Stride" + i + " * (" + accessors[i] + ")"); + } + return name + "[" + code2.join(" + ") + "]"; + }); + case inferType$4.PACKED: + default: + return void 0; } +} +var createAccessors$1 = function(nurbs2) { + var accessors = {}; + var accessor; + accessor = createAccessor("x", nurbs2.points); + if (accessor) + accessors.point = accessor; + accessor = createAccessor("w", nurbs2.weights); + if (accessor) + accessors.weight = accessor; + accessor = createAccessor("k", nurbs2.knots); + if (accessor) + accessors.knot = accessor; + return accessors; }; -class ConvolveMatrixSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "ConvolveMatrix", - kernelMatrix: ConvolveMatrixSVGFilter.spec.kernelMatrix.defaultValue - }); +var args = []; +var tmp = []; +var numericalDerivative$1 = function numericalDerivative(out, order, dimension) { + if (order !== 1) { + throw new Error("Numerical derivative not implemented for order n = " + order + "."); } - getInCount() { - return 1; + var i; + var h = arguments[this.splineDimension + 3] === void 0 ? 1e-4 : arguments[this.splineDimension + 3]; + args.length = this.splineDimension; + for (i = 0; i < this.splineDimension; i++) { + args[i + 1] = arguments[i + 3]; } - toString() { - var { kernelMatrix } = this.json; - var valueString = kernelMatrix.join(" "); - return ``; + var domain = this.domain; + var k0 = domain[dimension][0]; + var k1 = domain[dimension][1]; + var tm, tp, T; + var t0 = args[dimension + 1]; + var dt = (k1 - k0) * h; + if (this.boundary[dimension] === "closed") { + T = k1 - k0; + tm = k0 + (t0 - k0 - dt + T) % T; + tp = k0 + (t0 - k0 + dt + T) % T; + dt *= 2; + } else { + tm = Math.min(k1, Math.max(k0, t0 - dt)); + tp = Math.min(k1, Math.max(k0, t0 + dt)); + dt = tp - tm; } -} -ConvolveMatrixSVGFilter.spec = { - kernelMatrix: { - title: "kernelMatrix", - inputType: "input-array", - column: 3, - defaultValue: [1, 0, 0, 0, 1, 0, 0, 0, 1] + args[dimension + 1] = tm; + args[0] = tmp; + this.evaluate.apply(null, args); + args[dimension + 1] = tp; + args[0] = out; + this.evaluate.apply(null, args); + for (i = 0; i < this.dimension; i++) { + out[i] = (out[i] - tmp[i]) / dt; } + return out; }; -class DiffuseLightingSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "DiffuseLighting", - surfaceScale: DiffuseLightingSVGFilter.spec.surfaceScale.defaultValue, - lightingColor: DiffuseLightingSVGFilter.spec.lightingColor.defaultValue, - diffuseConstant: DiffuseLightingSVGFilter.spec.diffuseConstant.defaultValue, - lightInfo: "" - }); +var ndloop$2 = function ndloop(n, callback) { + for (var m = 1, k = 0, i = []; k < n.length; k++) { + m *= Array.isArray(n[k]) ? n[k][1] - n[k][0] : n[k]; + i[k] = Array.isArray(n[k]) ? n[k][0] : 0; } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("surfaceScale", "lightingColor", "diffuseConstant", "lightInfo")); + for (var ptr = 0; ptr < m; ptr++) { + callback(i.slice()); + for (k = n.length - 1; k >= 0; k--) { + if (i[k] === (Array.isArray(n[k]) ? n[k][1] : n[k]) - 1) { + i[k] = Array.isArray(n[k]) ? n[k][0] : 0; + } else { + i[k]++; + break; + } + } } - hasLight() { - return true; +}; +var inferType$3 = inferType_1; +var accessorPreamble$3 = function(nurbs2, variableName, propertyName, data) { + var i; + var code2 = []; + switch (inferType$3(data)) { + case inferType$3.NDARRAY: + code2.push(" var " + variableName + " = " + propertyName + ".data;"); + code2.push(" var " + variableName + "Offset = " + propertyName + ".offset;"); + for (i = 0; i < data.dimension; i++) { + code2.push(" var " + variableName + "Stride" + i + " = " + propertyName + ".stride[" + i + "];"); + } + break; + case inferType$3.ARRAY_OF_ARRAYS: + code2.push(" var " + variableName + " = " + propertyName + ";"); } - getInCount() { - return 1; + return code2.join("\n"); +}; +var isNdarrayLike$1 = isNdarrayLike$3; +var sizeGetter$3 = function(data, dataVariableName, dimension) { + if (!data) { + return "this.size[" + dimension + "]"; + } else if (isNdarrayLike$1(data)) { + return dataVariableName + ".shape[" + dimension + "]"; + } else { + var str = dataVariableName; + for (var i = 0; i < dimension; i++) { + str += "[0]"; + } + return str + ".length"; } - toString() { - var { surfaceScale, diffuseConstant, lightingColor } = this.json; - return ` - ${this.json.lightInfo} - `; +}; +var ndloop$1 = ndloop$2; +var variable$2 = variable$3; +var accessorPreamble$2 = accessorPreamble$3; +var inferType$2 = inferType_1; +var isArrayLike$2 = isArrayLike$5; +var sizeGetter$2 = sizeGetter$3; +var evaluatorCache = {}; +var codeCache = {}; +var evaluate = function(cacheKey2, nurbs2, accessors, debug, checkBounds, isBasis, derivative) { + var splineDimension = nurbs2.splineDimension; + var i, j, n, m, d, kvar; + var points = nurbs2.points; + var degree = nurbs2.degree; + var weights = nurbs2.weights; + var hasWeights = weights !== void 0; + var knots = nurbs2.knots; + var spaceDimension = nurbs2.dimension; + var boundary = nurbs2.boundary; + if (derivative !== void 0 && derivative !== null) { + if (!Array.isArray(derivative)) { + derivative = [derivative]; + } + var totalDerivativeOrder = 0; + for (i = 0; i < splineDimension; i++) { + if (derivative[i] === void 0) + derivative[i] = 0; + totalDerivativeOrder += derivative[i]; + } + if (hasWeights && totalDerivativeOrder > 1) { + throw new Error("Analytical derivative not implemented for rational b-splines with order n = " + totalDerivativeOrder + "."); + } } -} -DiffuseLightingSVGFilter.spec = { - surfaceScale: { - title: "surfaceScale", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - diffuseConstant: { - title: "diffuseConstant", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - lightingColor: { - title: "Lighting Color", - inputType: "color", - defaultValue: "rgba(0, 0, 0, 1)" + if (isBasis) + cacheKey2 = "Basis" + cacheKey2; + if (derivative) + cacheKey2 = "Der" + derivative.join("_") + "_" + cacheKey2; + var cachedEvaluator = evaluatorCache[cacheKey2]; + if (debug) { + var logger = typeof debug === "function" ? debug : console.log; } -}; -class DisplacementMapSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "DisplacementMap", - scale: DisplacementMapSVGFilter.spec.scale.defaultValue - }); + if (cachedEvaluator) { + if (debug) { + logger(codeCache[cacheKey2]); + } + return cachedEvaluator.bind(nurbs2); } - getInCount() { - return 2; + var code2 = []; + var functionName = "evaluate" + cacheKey2; + var pointAccessor = accessors.point; + if (isBasis) { + pointAccessor = function(src, period) { + var terms = []; + for (var i2 = 0; i2 < src.length; i2++) { + var accessor = src[i2]; + var terms2 = []; + for (var j2 = 0; j2 < accessor.length; j2++) { + if (accessor[j2] !== 0) + terms2.push(accessor[j2]); + } + accessor = terms2.join(" + "); + if (period[i2]) { + accessor = "(" + accessor + " + " + period[i2] + ") % " + period[i2]; + } + terms.push(accessor + " === " + indexVar(i2)); + } + return "((" + terms.join(" && ") + ") ? 1 : 0)"; + }; } - convert(obj2) { - obj2.scale = Length.parse(obj2.scale); - return obj2; + var weightAccessor = accessors.weight; + var knotAccessor = accessors.knot; + var knotVar = variable$2("k"); + var pointVar = variable$2("x"); + var weightVar = variable$2("w"); + var indexVar = variable$2("i"); + var tVar = variable$2("t"); + var domainVar = debug ? "domain" : "d"; + var sizeVar = variable$2(debug ? "size" : "s"); + var knotIndex = variable$2(debug ? "knotIndex" : "j"); + var allDimensionUniform = true; + for (d = 0; d < splineDimension; d++) { + if (isArrayLike$2(knots) && isArrayLike$2(knots[d])) { + allDimensionUniform = false; + } } - toString() { - var { scale: scale2 } = this.json; - var scaleOption = scale2.value ? `scale="${scale2}"` : ""; - return ``; + function line2(str) { + code2.push(" " + (str || "")); } - hasInIndex() { - return true; + function debugLine(str) { + if (debug) + line2(str); } -} -DisplacementMapSVGFilter.spec = { - scale: { - title: "scale", - inputType: "number-range", - min: 0, - max: 5e3, - step: 1, - defaultValue: Length.number(0) + if (isBasis) { + var indexArgs = []; } -}; -class DistantLightSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "DistantLight", - azimuth: DistantLightSVGFilter.spec.azimuth.defaultValue, - elevation: DistantLightSVGFilter.spec.elevation.defaultValue - }); + var parameterArgs = []; + for (i = 0; i < splineDimension; i++) { + if (isBasis) { + indexArgs.push(indexVar([i])); + } + parameterArgs.push(tVar([i])); } - isLight() { - return true; + code2.push("function " + functionName + " (" + (isBasis ? "" : "out, ") + parameterArgs.join(", ") + (isBasis ? ", " + indexArgs.join(", ") : "") + ") {"); + line2("var h, m, a, b;"); + if (checkBounds) { + line2("var " + domainVar + " = this.domain;"); + line2("for (var i = 0; i < this.splineDimension; i++) {"); + line2(" a = arguments[i + 1];"); + line2(" if (a < " + domainVar + "[i][0] || a > " + domainVar + "[i][1] || a === undefined || isNaN(a)) {"); + line2(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+" + domainVar + "[i][0]+', '+" + domainVar + "[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"); + line2(" }"); + line2("}"); } - toString() { - return ""; + for (d = 0; d < splineDimension; d++) { + line2("var " + sizeVar(d) + " = " + sizeGetter$2(points, "this.points", d) + ";"); } - toLightString() { - var { azimuth, elevation } = this.json; - return ``; + code2.push(accessorPreamble$2(nurbs2, "x", "this.points", points)); + if (hasWeights) { + code2.push(accessorPreamble$2(nurbs2, "w", "this.weights", weights)); } -} -DistantLightSVGFilter.spec = { - azimuth: { - title: "azimuth", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - elevation: { - title: "elevation", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) + if (!allDimensionUniform) { + code2.push(accessorPreamble$2(nurbs2, "k", "this.knots", knots)); } -}; -class DropShadowSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "DropShadow", - dx: DropShadowSVGFilter.spec.dx.defaultValue, - dy: DropShadowSVGFilter.spec.dy.defaultValue, - stdDeviation: DropShadowSVGFilter.spec.stdDeviation.defaultValue, - color: DropShadowSVGFilter.spec.color.defaultValue, - opacity: DropShadowSVGFilter.spec.opacity.defaultValue - }); + function ternary(cond, a, b) { + return "(" + cond + ") ? (" + a + ") : (" + b + ")"; } - getInCount() { - return 1; + var hasKnots = []; + for (d = 0; d < splineDimension; d++) { + switch (inferType$2(knots)) { + case inferType$2.NDARRAY: + hasKnots[d] = true; + break; + case inferType$2.ARRAY_OF_ARRAYS: + hasKnots[d] = isArrayLike$2(knots[d]); + break; + } } - toString() { - var { dx, dy, stdDeviation, color: color2, opacity: opacity2 } = this.json; - return ``; + for (d = 0; d < splineDimension; d++) { + if (hasKnots[d]) { + debugLine("\n // Bisect to locate the knot interval in dimension " + d + "\n"); + line2("var " + knotIndex(d) + " = 0;"); + line2("h = " + sizeVar(d) + ";"); + line2("while(h > " + knotIndex(d) + " + 1) {"); + line2(" m = 0.5 * (h + " + knotIndex(d) + ") | 0;"); + line2(" if (" + knotAccessor([d, "m"]) + " > " + tVar(d) + ") h = m;"); + line2(" else " + knotIndex(d) + " = m;"); + line2("}"); + debugLine("\n // Fetch knots for dimension " + d + "\n"); + for (i = -degree[d] + 1; i <= degree[d]; i++) { + if (boundary[d] === "closed") { + if (i < 0) { + line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + ternary(knotIndex(d) + " < " + -i, knotAccessor([d, 0]) + " + " + knotAccessor([d, [sizeVar(d), knotIndex(d), i]]) + " - " + knotAccessor([d, [sizeVar(d)]]), knotAccessor([d, [knotIndex(d), i]])) + ";"); + } else if (i > 0) { + line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + ternary(knotIndex(d) + " + " + i + " > " + sizeVar(d), knotAccessor([d, sizeVar(d)]) + " + " + knotAccessor([d, i + " + " + knotIndex(d) + " - " + sizeVar(d)]) + " - " + knotAccessor([d, 0]), knotAccessor([d, [knotIndex(d), i]])) + ";"); + } else { + line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + knotAccessor([d, [knotIndex(d), i]]) + ";"); + } + } else { + line2("var " + knotVar([d, i + degree[d] - 1]) + " = " + knotAccessor([d, [knotIndex(d), i]]) + ";"); + } + } + } else { + debugLine("\n // Directly compute knot interval for dimension " + d + "\n"); + if (boundary[d] === "closed") { + line2(knotIndex(d) + " = (" + tVar(d) + " | 0) % " + sizeVar(d) + ";"); + } else { + line2(knotIndex(d) + " = (" + tVar(d) + " | 0);"); + line2("if (" + knotIndex(d) + " < " + degree[d] + ") " + knotIndex(d) + " = " + degree[d] + ";"); + line2("if (" + knotIndex(d) + " > " + sizeVar(d) + " - 1) " + knotIndex(d) + " = " + sizeVar(d) + " - 1;"); + } + debugLine("\n // Compute and clamp knots for dimension " + d + "\n"); + for (i = -degree[d] + 1; i <= degree[d]; i++) { + kvar = knotVar([d, i + degree[d] - 1]); + line2("var " + kvar + " = " + knotIndex(d) + " + " + i + ";"); + } + if (boundary[d] === "clamped") { + for (i = -degree[d] + 1; i <= degree[d]; i++) { + kvar = knotVar([d, i + degree[d] - 1]); + if (i < 0) { + line2("if (" + kvar + " < " + degree[d] + ") " + kvar + " = " + degree[d] + ";"); + } + if (i > 0) { + line2("if (" + kvar + " > " + sizeVar(d) + ") " + kvar + " = " + sizeVar(d) + ";"); + } + } + } + if (boundary[d] === "closed") { + debugLine("\n // Wrap the B-Spline parameter for closed boundary"); + line2(tVar(d) + " %= " + sizeVar(d) + ";"); + } + } } -} -DropShadowSVGFilter.spec = { - dx: { - title: "dx", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - dy: { - title: "dy", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - stdDeviation: { - title: "stdDeviation", - inputType: "number-range", - min: 0, - max: 1e3, - step: 0.1, - defaultValue: Length.number(0) - }, - opacity: { - title: "opacity", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(1) - }, - color: { - title: "color", - inputType: "color", - defaultValue: "rgba(0, 0, 0, 1)" + for (d = 0, n = []; d < splineDimension; d++) { + n[d] = degree[d] + 1; } -}; -class FillPaintSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "FillPaint" + if (hasWeights) { + debugLine("\n // Fetch weights\n"); + ndloop$1(n, function(dst) { + var readIdx = []; + var period = []; + for (var d2 = 0; d2 < splineDimension; d2++) { + readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; + if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) + period[d2] = sizeVar(d2); + } + line2("var " + weightVar(dst) + " = " + weightAccessor(readIdx, period) + ";"); }); } -} -class FloodSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Flood", - x: FloodSVGFilter.spec.x.defaultValue, - y: FloodSVGFilter.spec.y.defaultValue, - width: FloodSVGFilter.spec.width.defaultValue, - height: FloodSVGFilter.spec.height.defaultValue, - color: FloodSVGFilter.spec.color.defaultValue, - opacity: FloodSVGFilter.spec.opacity.defaultValue - }); + if (debug) { + if (hasWeights) { + line2("\n // Fetch points and project into homogeneous (weighted) coordinates\n"); + } else { + line2("\n // Fetch points\n"); + } } - convert(json) { - json.x = Length.parse(json.x); - json.y = Length.parse(json.y); - json.width = Length.parse(json.width); - json.height = Length.parse(json.height); - return json; + ndloop$1(n, function(dst) { + var readIdx = []; + var period = []; + for (var d2 = 0; d2 < splineDimension; d2++) { + readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; + if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) + period[d2] = sizeVar(d2); + } + if (isBasis) { + if (hasWeights) { + line2("var " + pointVar(dst) + " = " + pointAccessor(readIdx, period) + " * " + weightVar(dst) + ";"); + } else { + line2("var " + pointVar(dst) + " = " + pointAccessor(readIdx, period) + ";"); + } + } else { + for (d2 = 0; d2 < spaceDimension; d2++) { + var dstWithDim = dst.concat(d2); + readIdx[splineDimension] = d2; + if (hasWeights) { + line2("var " + pointVar(dstWithDim) + " = " + pointAccessor(readIdx, period) + " * " + weightVar(dst) + ";"); + } else { + line2("var " + pointVar(dstWithDim) + " = " + pointAccessor(readIdx, period) + ";"); + } + } + } + }); + debugLine("\n"); + debugLine("// Perform De Boor's algorithm"); + for (d = n.length - 1; d >= 0; d--) { + n[d] = [degree[d], degree[d] + 1]; + for (i = 0; i < degree[d]; i++) { + debugLine("\n // Degree " + degree[d] + " evaluation in dimension " + d + ", step " + (i + 1) + "\n"); + for (j = degree[d]; j > i; j--) { + var isDerivative = derivative && degree[d] - i - derivative[d] <= 0; + if (isDerivative) { + line2("m = 1 / (" + knotVar([d, j - i + degree[d] - 1]) + " - " + knotVar([d, j - 1]) + ");"); + if (hasWeights) { + line2("a = (" + tVar(d) + " - " + knotVar([d, j - 1]) + ") * m;"); + line2("b = 1 - a;"); + } + } else { + line2("a = (" + tVar(d) + " - " + knotVar([d, j - 1]) + ") / (" + knotVar([d, j - i + degree[d] - 1]) + " - " + knotVar([d, j - 1]) + ");"); + line2("b = 1 - a;"); + } + if (hasWeights) { + ndloop$1(n, function(ii) { + var ij = ii.slice(); + var ij1 = ii.slice(); + ij[d] = j; + ij1[d] = j - 1; + if (isDerivative && hasWeights) + line2("h = " + weightVar(ij) + ";"); + line2(weightVar(ij) + " = b * " + weightVar(ij1) + " + a * " + weightVar(ij) + ";"); + }); + } + ndloop$1(n, function(ii) { + var weightFactor, pt1, pt2; + var ij = ii.slice(); + var ij1 = ii.slice(); + ij[d] = j; + ij1[d] = j - 1; + if (isDerivative) { + var derivCoeff = i + 1; + if (isBasis) { + weightFactor = hasWeights ? "h * " + weightVar(ij1) + " / " + weightVar(ij) + " * " : ""; + pt1 = pointVar(ij) + (hasWeights ? " / h" : ""); + pt2 = pointVar(ij1) + (hasWeights ? " / " + weightVar(ij1) : ""); + line2(pointVar(ij) + " = " + derivCoeff + " * " + weightFactor + "(" + pt1 + " - " + pt2 + ") * m;"); + } else { + var ijWithDimension = ij.slice(); + var ij1WithDimension = ij1.slice(); + for (m = 0; m < spaceDimension; m++) { + ijWithDimension[splineDimension] = ij1WithDimension[splineDimension] = m; + weightFactor = hasWeights ? "h * " + weightVar(ij1) + " / " + weightVar(ij) + " * " : ""; + pt1 = pointVar(ijWithDimension) + (hasWeights ? " / h" : ""); + pt2 = pointVar(ij1WithDimension) + (hasWeights ? " / " + weightVar(ij1) : ""); + line2(pointVar(ijWithDimension) + " = " + derivCoeff + " * " + weightFactor + "(" + pt1 + " - " + pt2 + ") * m;"); + } + } + } else { + if (isBasis) { + line2(pointVar(ij) + " = b * " + pointVar(ij1) + " + a * " + pointVar(ij) + ";"); + } else { + for (m = 0; m < spaceDimension; m++) { + ij[splineDimension] = ij1[splineDimension] = m; + line2(pointVar(ij) + " = b * " + pointVar(ij1) + " + a * " + pointVar(ij) + ";"); + } + } + } + }); + debugLine("\n"); + } + } } - toString() { - const { opacity: opacity2, color: color2, x, y, width: width2, height: height2 } = this.json; - return ``; + if (debug) { + if (hasWeights) { + line2("\n // Project back from homogeneous coordinates and return final output\n"); + } else { + line2("\n // Return final output\n"); + } } -} -FloodSVGFilter.spec = { - x: { - title: "X", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - y: { - title: "Y", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - width: { - title: "width", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - height: { - title: "height", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - opacity: { - title: "opacity", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) - }, - color: { - title: "color", - inputType: "color", - defaultValue: "rgba(0, 0, 0, 1)" + if (isBasis) { + if (hasWeights) { + line2("return " + pointVar(degree) + " / " + weightVar(degree) + ";"); + } else { + line2("return " + pointVar(degree) + ";"); + } + } else { + for (d = 0; d < spaceDimension; d++) { + if (hasWeights) { + line2("out[" + d + "] = " + pointVar(degree.concat([d])) + " / " + weightVar(degree) + ";"); + } else { + line2("out[" + d + "] = " + pointVar(degree.concat([d])) + ";"); + } + } } -}; -class GaussianBlurSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "GaussianBlur", - stdDeviationX: GaussianBlurSVGFilter.spec.stdDeviationX.defaultValue, - stdDeviationY: GaussianBlurSVGFilter.spec.stdDeviationY.defaultValue, - edgeMode: GaussianBlurSVGFilter.spec.edgeMode.defaultValue - }); + if (!isBasis) { + line2("return out;"); } - getInCount() { - return 1; + code2.push("}"); + if (debug) { + var codeStr = code2.join("\n"); + logger(codeStr); + codeCache[cacheKey2] = codeStr; } - convert(obj2) { - obj2.stdDeviationX = Length.parse(obj2.stdDeviationX); - obj2.stdDeviationY = Length.parse(obj2.stdDeviationY); - return obj2; + var evaluator = new Function([code2.join("\n"), "; return ", functionName].join(""))(); + evaluatorCache[cacheKey2] = evaluator; + return evaluator.bind(nurbs2); +}; +var transformerCache = {}; +var accessorPreamble$1 = accessorPreamble$3; +var sizeGetter$1 = sizeGetter$3; +var variable$1 = variable$3; +var transform = function createTransform(cacheKey2, nurbs2, accessors, debug) { + var i, j, iterator, iterators, terms, n, rvalue, lvalue; + var cachedTransformer = transformerCache[cacheKey2]; + if (cachedTransformer) { + return cachedTransformer.bind(nurbs2); } - toString() { - var { stdDeviationX, stdDeviationY, edgeMode } = this.json; - var stdDeviation = `${stdDeviationX} ${stdDeviationY}`; - if (stdDeviationX === stdDeviationY) { - stdDeviation = stdDeviationX; - } - return ``; + var code2 = []; + var functionName = "transform" + cacheKey2; + code2.push("function " + functionName + "(m) {"); + code2.push("var i, w;"); + code2.push(accessorPreamble$1(nurbs2, "x", "this.points", nurbs2.points)); + var sizeVar = variable$1(debug ? "size" : "s"); + for (i = 0; i < nurbs2.splineDimension; i++) { + code2.push("var " + sizeVar(i) + " = " + sizeGetter$1(nurbs2.points, "this.points", i) + ";"); } -} -GaussianBlurSVGFilter.spec = { - stdDeviationX: { - title: "X", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(0) - }, - stdDeviationY: { - title: "Y", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(0) - }, - edgeMode: { - title: "edge", - inputType: "select", - options: "none,duplicate,wrap", - defaultValue: "none" + iterators = []; + for (i = 0; i < nurbs2.splineDimension; i++) { + iterator = "i" + i; + iterators.push(iterator); + code2.push("for (" + iterator + " = " + sizeVar(i) + "- 1; " + iterator + " >= 0; " + iterator + "--) {"); } -}; -class HueRotateSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "HueRotate", - values: HueRotateSVGFilter.spec.values.defaultValue - }); + for (i = 0; i < nurbs2.dimension; i++) { + code2.push("x" + i + " = " + accessors.point(iterators.concat([i]))); } - getInCount() { - return 1; + terms = []; + for (i = 0; i < nurbs2.dimension; i++) { + terms.push("m[" + ((nurbs2.dimension + 1) * (i + 1) - 1) + "] * x" + i); } - toString() { - var { values } = this.json; - return ``; + terms.push("m[" + ((nurbs2.dimension + 1) * (nurbs2.dimension + 1) - 1) + "]"); + code2.push("var w = (" + terms.join(" + ") + ") || 1.0;"); + for (i = 0; i < nurbs2.dimension; i++) { + terms = []; + n = nurbs2.dimension; + for (j = 0; j < n; j++) { + terms.push("m[" + (j * (n + 1) + i) + "] * x" + j); + } + terms.push("m[" + (j * (n + 1) + i) + "]"); + lvalue = accessors.point(iterators.concat([i])); + rvalue = "(" + terms.join(" + ") + ") / w"; + code2.push(lvalue + " = " + rvalue + ";"); } -} -HueRotateSVGFilter.spec = { - values: { - title: "values", - inputType: "number-range", - min: 0, - max: 360, - step: 0.1, - defaultValue: Length.number(0) + for (i = nurbs2.splineDimension - 1; i >= 0; i--) { + code2.push("}"); } + code2.push("return this;"); + code2.push("}"); + var transform2 = new Function([code2.join("\n"), "; return ", functionName].join(""))(); + if (debug) + console.log(code2.join("\n")); + transformerCache[cacheKey2] = transform2; + return transform2.bind(nurbs2); }; -class ImageSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Image", - x: ImageSVGFilter.spec.x.defaultValue, - y: ImageSVGFilter.spec.y.defaultValue, - width: ImageSVGFilter.spec.width.defaultValue, - height: ImageSVGFilter.spec.height.defaultValue, - src: ImageSVGFilter.spec.src.defaultValue, - alignment: ImageSVGFilter.spec.alignment.defaultValue, - scaleing: ImageSVGFilter.spec.scaleing.defaultValue - }); - } - convert(json) { - json.x = Length.parse(json.x); - json.y = Length.parse(json.y); - json.width = Length.parse(json.width); - json.height = Length.parse(json.height); - return json; +var ndloop2 = ndloop$2; +var variable = variable$3; +var accessorPreamble = accessorPreamble$3; +var inferType$1 = inferType_1; +var isArrayLike$1 = isArrayLike$5; +var sizeGetter = sizeGetter$3; +var supportCache = {}; +var support = function(cacheKey2, nurbs2, accessors, debug, checkBounds) { + var cachedSupport = supportCache[cacheKey2]; + if (cachedSupport) { + return cachedSupport.bind(nurbs2); } - toString() { - const { src, x, y, width: width2, height: height2, alignment: alignment2, scaleing } = this.json; - return ``; + var degree = nurbs2.degree; + var knots = nurbs2.knots; + var splineDimension = nurbs2.splineDimension; + var boundary = nurbs2.boundary; + var i, n, d; + var code2 = []; + var functionName = "support" + cacheKey2; + var knotAccessor = accessors.knot; + var tVar = variable("t"); + var domainVar = debug ? "domain" : "d"; + var sizeVar = variable(debug ? "size" : "s"); + var knotIndex = variable(debug ? "knotIndex" : "i"); + var allDimensionUniform = true; + for (d = 0; d < splineDimension; d++) { + if (isArrayLike$1(knots) && isArrayLike$1(knots[d])) { + allDimensionUniform = false; + } } -} -ImageSVGFilter.spec = { - x: { - title: "X", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - y: { - title: "Y", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - width: { - title: "width", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - height: { - title: "height", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - alignment: { - title: "alignment", - inputType: "select", - options: "xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax", - defaultValue: "xMidYMid" - }, - scaleing: { - title: "scaleing", - inputType: "select", - options: "meet,slice", - defaultValue: "meet" - }, - src: { - title: "Image", - inputType: "ImageSelectEditor", - defaultValue: "" + function line2(str) { + code2.push(" " + (str || "")); } -}; -class LuminanceAlphaSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "LuminanceAlpha" - }); + var parameterArgs = []; + for (i = 0; i < splineDimension; i++) { + parameterArgs.push(tVar([i])); } - getInCount() { - return 1; + code2.push("function " + functionName + " (out, " + parameterArgs.join(", ") + ") {"); + var c2 = 0; + function pushSupport(args2, period) { + if (period === void 0) { + line2("out[" + c2++ + "] = " + args2.join(" + ") + ";"); + } else { + line2("out[" + c2++ + "] = (" + args2.join(" + ") + " + " + period + ") % " + period + ";"); + } } - toString() { - return ``; + line2("var h, m;"); + line2("var c = 0;"); + if (checkBounds) { + line2("var " + domainVar + " = this.domain;"); + line2("for (var i = 0; i < this.splineDimension; i++) {"); + line2(" a = arguments[i + 1];"); + line2(" if (a < " + domainVar + "[i][0] || a > " + domainVar + "[i][1] || a === undefined || isNaN(a)) {"); + line2(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+" + domainVar + "[i][0]+', '+" + domainVar + "[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"); + line2(" }"); + line2("}"); } -} -LuminanceAlphaSVGFilter.spec = {}; -class MergeSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Merge" - }); + for (d = 0; d < splineDimension; d++) { + line2("var " + sizeVar(d) + " = " + sizeGetter(nurbs2.points, "this.points", d) + ";"); } - getInCount() { - return 3; + if (!allDimensionUniform) { + code2.push(accessorPreamble(nurbs2, "k", "this.knots", knots)); } - getDefaultAttribute() { - var list2 = []; - if (this.json.connected.length) { - list2.push(`result="${this.json.id}result"`); + var hasKnots = []; + for (d = 0; d < splineDimension; d++) { + switch (inferType$1(knots)) { + case inferType$1.NDARRAY: + hasKnots[d] = true; + break; + case inferType$1.ARRAY_OF_ARRAYS: + hasKnots[d] = isArrayLike$1(knots[d]); + break; } - return list2.join(" "); - } - toString() { - var { in: inList } = this.json; - return ` - - ${inList.map((it) => { - return ``; - }).join("")} - `; - } -} -MergeSVGFilter.spec = {}; -class MorphologySVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Morphology", - operator: MorphologySVGFilter.spec.operator.defaultValue, - radius: MorphologySVGFilter.spec.radius.defaultValue - }); } - getInCount() { - return 1; + for (d = 0; d < splineDimension; d++) { + if (hasKnots[d]) { + line2("var " + knotIndex(d) + " = 0;"); + line2("h = " + sizeVar(d) + ";"); + line2("while(h > " + knotIndex(d) + " + 1) {"); + line2(" m = 0.5 * (h + " + knotIndex(d) + ") | 0;"); + line2(" if (" + knotAccessor([d, "m"]) + " > " + tVar(d) + ") h = m;"); + line2(" else " + knotIndex(d) + " = m;"); + line2("}"); + } else { + if (boundary[d] === "closed") { + line2(knotIndex(d) + " = (" + tVar(d) + " | 0) % " + sizeVar(d) + ";"); + } else { + line2(knotIndex(d) + " = (" + tVar(d) + " | 0);"); + line2("if (" + knotIndex(d) + " < " + degree[d] + ") " + knotIndex(d) + " = " + degree[d] + ";"); + line2("if (" + knotIndex(d) + " > " + sizeVar(d) + " - 1) " + knotIndex(d) + " = " + sizeVar(d) + " - 1;"); + } + } } - toString() { - var { operator, radius } = this.json; - return ``; + for (d = 0, n = []; d < splineDimension; d++) { + n[d] = degree[d] + 1; } + ndloop2(n, function(dst) { + var readIdx = []; + var period = []; + for (var d2 = 0; d2 < splineDimension; d2++) { + readIdx[d2] = [knotIndex(d2), dst[d2] - degree[d2]]; + if (boundary[d2] === "closed" && dst[d2] - degree[d2] < 0) + period[d2] = sizeVar(d2); + } + for (d2 = 0; d2 < splineDimension; d2++) { + pushSupport(readIdx[d2], period[d2]); + } + }); + line2("out.length = " + c2 + ";"); + line2("return out;"); + code2.push("}"); + if (debug) + console.log(code2.join("\n")); + var evaluator = new Function([code2.join("\n"), "; return ", functionName].join(""))(); + supportCache[cacheKey2] = evaluator; + return evaluator.bind(nurbs2); +}; +var inferType = inferType_1; +var computeCacheKey = cacheKey; +var isNdarray = isNdarray$2; +var isNdarrayLike = isNdarrayLike$3; +var createAccessors = createAccessors$1; +var numericalDerivative2 = numericalDerivative$1; +var isArrayLike2 = isArrayLike$5; +var createEvaluator = evaluate; +var createTransform2 = transform; +var createSupport = support; +var BOUNDARY_TYPES = { + open: "open", + closed: "closed", + clamped: "clamped" +}; +function isBlank(x) { + return x === void 0 || x === null; } -MorphologySVGFilter.spec = { - operator: { - title: "Operator", - inputType: "select", - options: "erode,dilate", - defaultValue: "erode" - }, - radius: { - title: "Radius", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(0) +function parseNURBS(points, degree, knots, weights, boundary, opts) { + var i, dflt; + if (points && !isArrayLike2(points) && !isNdarray(points)) { + opts = points; + this.debug = points.debug; + this.checkBounds = !!points.checkBounds; + this.weights = points.weights; + this.knots = points.knots; + this.degree = points.degree; + this.boundary = points.boundary; + this.points = points.points; + Object.defineProperty(this, "size", { value: opts.size, writable: true, configurable: true }); + } else { + opts = opts || {}; + this.weights = weights; + this.knots = knots; + this.degree = degree; + this.points = points; + this.boundary = boundary; + this.debug = opts.debug; + this.checkBounds = !!opts.checkBounds; + Object.defineProperty(this, "size", { value: opts.size, writable: true, configurable: true }); } -}; -class OffsetSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Offset", - dx: OffsetSVGFilter.spec.dx.defaultValue, - dy: OffsetSVGFilter.spec.dy.defaultValue + var pointType = inferType(this.points); + var weightType = inferType(this.weights); + var knotType = inferType(this.knots); + if (this.points) { + switch (pointType) { + case inferType.GENERIC_NDARRAY: + case inferType.NDARRAY: + Object.defineProperties(this, { + splineDimension: { + value: this.points.shape.length - 1, + writable: false, + configurable: true + }, + dimension: { + value: this.points.shape[this.points.shape.length - 1], + writable: false, + configurable: true + }, + size: { + get: function() { + return this.points.shape.slice(0, this.points.shape.length - 1); + }, + set: function() { + throw new Error("Cannot assign to read only property 'size'"); + }, + configurable: true + } + }); + break; + case inferType.ARRAY_OF_ARRAYS: + var splineDimension = 0; + var size2 = this.size || []; + size2.length = 0; + for (var ptr = this.points; isArrayLike2(ptr[0]); ptr = ptr[0]) { + splineDimension++; + size2.push(ptr.length); + } + if (splineDimension === 0) { + throw new Error("Expected an array of points"); + } + Object.defineProperties(this, { + splineDimension: { + value: splineDimension, + writable: false, + configurable: true + }, + dimension: { + value: ptr.length, + writable: false, + configurable: true + }, + size: { + get: function() { + var size3 = []; + size3.length = 0; + for (var i2 = 0, ptr2 = this.points; i2 < this.splineDimension; i2++, ptr2 = ptr2[0]) { + size3[i2] = ptr2.length; + } + return size3; + }, + set: function() { + throw new Error("Cannot assign to read only property 'size'"); + }, + configurable: true + } + }); + break; + case inferType.PACKED: + default: + throw new Error("Expected either a packed array, array of arrays, or ndarray of points"); + } + } else { + if (this.size === void 0 || this.size === null) { + throw new Error("Either points or a control hull size must be provided."); + } + if (!isArrayLike2(this.size)) { + Object.defineProperty(this, "size", { + value: [this.size], + writable: true, + configurable: true + }); + } + if (this.size.length === 0) { + throw new Error("`size` must be a number or an array of length at least one."); + } + Object.defineProperties(this, { + splineDimension: { + value: this.size.length, + writable: false, + configurable: true + }, + dimension: { + value: 0, + writable: false, + configurable: true + } }); } - getInCount() { - return 1; + if (isArrayLike2(this.degree)) { + for (i = 0; i < this.splineDimension; i++) { + if (isBlank(this.degree[i])) { + throw new Error("Missing degree in dimension " + (i + 1)); + } + } + } else { + var hasBaseDegree = !isBlank(this.degree); + var baseDegree = isBlank(this.degree) ? 2 : this.degree; + this.degree = []; + for (i = 0; i < this.splineDimension; i++) { + if (this.size[i] <= baseDegree) { + if (hasBaseDegree) { + throw new Error("Expected at least " + (baseDegree + 1) + " points for degree " + baseDegree + " spline in dimension " + (i + 1) + " but got only " + this.size[i]); + } else { + this.degree[i] = this.size[i] - 1; + } + } else { + this.degree[i] = baseDegree; + } + } } - toString() { - var { dx, dy } = this.json; - return ``; + dflt = typeof this.boundary !== "string" ? "open" : this.boundary; + if (!BOUNDARY_TYPES[dflt]) { + throw new Error("Boundary type must be one of " + Object.keys(BOUNDARY_TYPES) + ". Got " + dflt); } -} -OffsetSVGFilter.spec = { - dx: { - title: "dx", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - dy: { - title: "dy", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) + this.boundary = isArrayLike2(this.boundary) ? this.boundary : []; + this.boundary.length = this.splineDimension; + for (i = 0; i < this.splineDimension; i++) { + this.boundary[i] = isBlank(this.boundary[i]) ? dflt : this.boundary[i]; + if (!BOUNDARY_TYPES[dflt]) { + throw new Error("Boundary type must be one of " + Object.keys(BOUNDARY_TYPES) + ". Got " + dflt + " for dimension " + (i + 1)); + } } -}; -class PointLightSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "PointLight", - x: PointLightSVGFilter.spec.x.defaultValue, - y: PointLightSVGFilter.spec.y.defaultValue, - z: PointLightSVGFilter.spec.z.defaultValue - }); + switch (knotType) { + case inferType.ARRAY_OF_ARRAYS: + if (isArrayLike2(this.knots) && this.knots.length > 0 && !isArrayLike2(this.knots[0])) { + this.knots = [this.knots]; + } + for (i = 0; i < this.splineDimension; i++) { + if (this.size[i] <= this.degree[i]) { + throw new Error("Expected at least " + (this.degree[i] + 1) + " points in dimension " + (i + 1) + " but got " + this.size[i] + "."); + } + if (isArrayLike2(this.knots[i])) { + if (this.boundary[i] !== "closed" && this.knots[i].length !== this.degree[i] + this.size[i] + 1) { + throw new Error("Expected " + (this.degree[i] + this.size[i] + 1) + " knots in dimension " + (i + 1) + " but got " + this.knots[i].length + "."); + } else if (this.boundary[i] === "closed" && this.knots[i].length !== this.size[i] + 1) { + var canBeFudged = this.knots[i].length === this.size[i] + this.degree[i] + 1; + if (!canBeFudged) { + throw new Error("Expected " + (this.size[i] + 1) + " knots for closed spline in dimension " + (i + 1) + " but got " + this.knots[i].length + "."); + } + } + } + } + break; } - isLight() { - return true; + var newCacheKey = computeCacheKey(this, this.debug, this.checkBounds, pointType, weightType, knotType); + if (newCacheKey !== this.__cacheKey) { + this.__cacheKey = newCacheKey; + var accessors = createAccessors(this); + this.evaluate = createEvaluator(this.__cacheKey, this, accessors, this.debug, this.checkBounds, false); + this.transform = createTransform2(this.__cacheKey, this, accessors, this.debug); + this.support = createSupport(this.__cacheKey, this, accessors, this.debug, this.checkBounds); + this.evaluator = function(derivativeOrder, isBasis) { + return createEvaluator(this.__cacheKey, this, accessors, this.debug, this.checkBounds, isBasis, derivativeOrder); + }; } - toString() { - return ""; + this.numericalDerivative = numericalDerivative2.bind(this); + return this; +} +function domainGetter() { + var sizeArray; + var ret = []; + var ptr = this.points; + if (!ptr) { + sizeArray = this.size; + } else if (isNdarrayLike(ptr)) { + sizeArray = ptr.shape; } - toLightString() { - var { x, y, z } = this.json; - return ``; + for (var d = 0; d < this.splineDimension; d++) { + var size2 = sizeArray ? sizeArray[d] : ptr.length; + var p = this.degree[d]; + var isClosed = this.boundary[d] === "closed"; + if (this.knots && this.knots[d]) { + var k = this.knots[d]; + ret[d] = [k[isClosed ? 0 : p], k[size2]]; + } else { + ret[d] = [isClosed ? 0 : p, size2]; + } + if (ptr) + ptr = ptr[0]; } + return ret; } -PointLightSVGFilter.spec = { - x: { - title: "x", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - y: { - title: "y", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - z: { - title: "z", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) +function nurbs(points, degree, knots, weights, boundary, opts) { + var ctor = function(points2, degree2, knots2, weights2, boundary2, opts2) { + parseFcn(points2, degree2, knots2, weights2, boundary2, opts2); + return ctor; + }; + var parseFcn = parseNURBS.bind(ctor); + Object.defineProperty(ctor, "domain", { + get: domainGetter + }); + parseFcn(points, degree, knots, weights, boundary, opts); + return ctor; +} +var nurbs_1 = nurbs; +class SplineModel extends SVGModel { + getIcon() { + return obj$2.star; } -}; -class RotaMatrixSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "RotaMatrix", - hueRotate: RotaMatrixSVGFilter.spec.hueRotate.defaultValue - }); + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "spline", + name: "New Spline", + strokeWidth: 1, + points: [], + traceCount: 100, + degree: 2, + boundary: "clamped" + }, obj2)); } - convert(json) { - json.hueRotate = Length.parse(json.hueRotate); - return json; + get points() { + return this.get("points"); } - toString() { - var { id, hueRotate } = this.json; - return ` - - - `; + set points(value) { + this.set("points", value); } -} -RotaMatrixSVGFilter.spec = { - hueRotate: { - title: "hue-rotate", - inputType: "number-range", - min: 0, - max: 360, - step: 1, - defaultValue: Length.number(0) + get degree() { + return this.get("degree"); } -}; -class SaturateSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Saturate", - values: SaturateSVGFilter.spec.values.defaultValue - }); + set degree(value) { + this.set("degree", value); } - getInCount() { - return 1; + get traceCount() { + return this.get("traceCount"); } - toString() { - var { values } = this.json; - return ``; + set traceCount(value) { + this.set("traceCount", value); } -} -SaturateSVGFilter.spec = { - values: { - title: "values", - inputType: "number-range", - min: -1, - max: 1, - step: 0.01, - defaultValue: Length.number(0) + get boundary() { + return this.get("boundary"); } -}; -class SourceAlphaSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "SourceAlpha" - }); + set boundary(value) { + this.set("boundary", value); } -} -class SourceGraphicSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "SourceGraphic" - }); + enableHasChildren() { + return false; } -} -class SpecularLightingSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "SpecularLighting", - surfaceScale: SpecularLightingSVGFilter.spec.surfaceScale.defaultValue, - lightingColor: SpecularLightingSVGFilter.spec.lightingColor.defaultValue, - specularConstant: SpecularLightingSVGFilter.spec.specularConstant.defaultValue, - specularExponent: SpecularLightingSVGFilter.spec.specularExponent.defaultValue, - lightInfo: "" - }); + refreshMatrixCache() { + super.refreshMatrixCache(); + if (this.hasChangedField("points", "boundary")) { + this.setCache(); + } else if (this.hasChangedField("width", "height")) { + if (!this.cachePath) { + this.setCache(); + } + this.points = this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).verties; + this.modelManager.setChanged("reset", this.id, { + points: this.points + }); + } } - toCloneObject() { - return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("surfaceScale", "lightingColor", "specularConstant", "specularExponent", "lightInfo")); + setCache() { + super.setCache(); + this.cachePath = PathParser.makePathByVerties(this.points); + this.cacheWidth = this.width; + this.cacheHeight = this.height; } - hasLight() { - return true; + get editablePath() { + let { width: width2, height: height2, points } = this; + if (!points || points.length == 0) { + points = [ + [0, height2], + [0, 0], + [width2, 0], + [width2, height2] + ]; + } + return this.absolutePath(PathParser.makePathByVerties(points).d).d; } - getInCount() { - return 1; + recoverEditablePath(d) { + const points = this.invertPath(d).verties; + const pathData = this.updatePath(this.getPath(points)); + delete pathData.d; + return __spreadValues({ + points + }, pathData); } - toString() { - var { surfaceScale, specularConstant, specularExponent, lightingColor } = this.json; - return ` - ${this.json.lightInfo} - `; + get d() { + return this.getPath(this.points, this.boundary); } - getSourceInAttribute() { - return ""; + getPath(points, boundary) { + let { width: width2, height: height2 } = this; + if (!points) { + points = this.points; + } + if (!boundary) { + boundary = this.boundary; + } + if (!points || points.length == 0) { + points = [ + [0, height2], + [0, 0], + [width2, 0], + [width2, height2] + ]; + } + const curve = nurbs_1({ + points, + degree: points.length - 2, + boundary + }); + const pt = []; + const verties = []; + const traceCount = (points.length - 1) * 100; + const unit = 1 / traceCount; + const d0 = curve.domain[0][0]; + const d1 = curve.domain[0][1]; + for (var t = 0; t <= 1; t += unit) { + curve.evaluate(pt, d0 + (d1 - d0) * t); + verties.push(clone(pt)); + } + return PathParser.makePathByVerties(verties, false).round(1e3).d; + } + getDefaultTitle() { + return "BSpline"; } } -SpecularLightingSVGFilter.spec = { - surfaceScale: { - title: "surfaceScale", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - specularConstant: { - title: "Constant", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - specularExponent: { - title: "Exponent", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - lightingColor: { - title: "Lighting Color", - inputType: "color", - defaultValue: "rgba(0, 0, 0, 1)" +class StarModel extends SVGModel { + getIcon() { + return obj$2.star; } -}; -class SpotLightSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "SpotLight", - x: SpotLightSVGFilter.spec.x.defaultValue, - y: SpotLightSVGFilter.spec.x.defaultValue, - z: SpotLightSVGFilter.spec.x.defaultValue, - pointsAtX: SpotLightSVGFilter.spec.pointsAtX.defaultValue, - pointsAtY: SpotLightSVGFilter.spec.pointsAtY.defaultValue, - pointsAtZ: SpotLightSVGFilter.spec.pointsAtZ.defaultValue, - specularExponent: SpotLightSVGFilter.spec.specularExponent.defaultValue, - limitingConeAngle: SpotLightSVGFilter.spec.limitingConeAngle.defaultValue - }); + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "star", + name: "New Star", + strokeWidth: 1, + isCurve: false, + count: 5, + radius: 0.5, + tension: 0.5 + }, obj2)); } - isLight() { - return true; + get count() { + return this.get("count"); } - toString() { + set count(value) { + this.set("count", value); } - toLightString() { - var { - x, - y, - z, - pointsAtX, - pointsAtY, - pointsAtZ, - specularExponent, - limitingConeAngle - } = this.json; - return ``; + get radius() { + return this.get("radius"); } -} -SpotLightSVGFilter.spec = { - x: { - title: "x", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - y: { - title: "y", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - z: { - title: "z", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - pointsAtX: { - title: "pointsAtX", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - pointsAtY: { - title: "pointsAtY", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - pointsAtZ: { - title: "pointsAtZ", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - specularExponent: { - title: "specularExponent", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) - }, - limitingConeAngle: { - title: "limitingConeAngle", - inputType: "number-range", - min: 0, - max: 100, - step: 1, - defaultValue: Length.number(1) + set radius(value) { + this.set("radius", value); } -}; -class StrokePaintSVGFilter extends SourceSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "StrokePaint" - }); + get tension() { + return this.get("tension"); } -} -class TileSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Tile", - x: TileSVGFilter.spec.x.defaultValue, - y: TileSVGFilter.spec.y.defaultValue, - width: TileSVGFilter.spec.width.defaultValue, - height: TileSVGFilter.spec.height.defaultValue - }); + set tension(value) { + this.set("tension", value); } - getInCount() { - return 1; + get isCurve() { + return this.get("isCurve"); } convert(json) { - json.x = Length.parse(json.x); - json.y = Length.parse(json.y); - json.width = Length.parse(json.width); - json.height = Length.parse(json.height); + json = super.convert(json); + if (json.count) + json.count = +json.count; + if (json.radius) + json.radius = +json.radius; + if (json.tension) + json.tension = +json.tension; return json; } - toString() { - const { x, y, width: width2, height: height2 } = this.json; - return ``; - } -} -TileSVGFilter.spec = { - x: { - title: "X", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - y: { - title: "Y", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - width: { - title: "width", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - }, - height: { - title: "height", - inputType: "number-range", - min: 0, - max: 1e3, - step: 1, - defaultValue: Length.number(0) - } -}; -class TurbulenceSVGFilter extends BaseSVGFilter { - getDefaultObject() { - return super.getDefaultObject({ - type: "Turbulence", - filterType: TurbulenceSVGFilter.spec.filterType.defaultValue, - baseFrequency: TurbulenceSVGFilter.spec.baseFrequency.defaultValue, - numOctaves: TurbulenceSVGFilter.spec.numOctaves.defaultValue, - seed: TurbulenceSVGFilter.spec.seed.defaultValue - }); + enableHasChildren() { + return false; } - convert(obj2) { - obj2.baseFrequency = Length.parse(obj2.baseFrequency); - obj2.numOctaves = Length.parse(obj2.numOctaves); - obj2.seed = Length.parse(obj2.seed); - return obj2; + get d() { + const { width: width2, height: height2, count, radius, tension, isCurve } = this; + let newPath = ""; + if (isCurve) { + newPath = PathParser.makeCurvedStar(width2, height2, count, radius, tension).d; + } else { + newPath = PathParser.makeStar(width2, height2, count, radius).d; + } + return newPath; } - toString() { - var { filterType, baseFrequency, numOctaves, seed } = this.json; - return ``; + getDefaultTitle() { + return "Star"; } } -TurbulenceSVGFilter.spec = { - filterType: { - title: "Type", - inputType: "select", - options: "fractalNoise,turbulence", - defaultValue: "turbulence" - }, - baseFrequency: { - title: "Frequency", - inputType: "number-range", - min: 0, - max: 1, - step: 0.01, - defaultValue: Length.number(0) - }, - numOctaves: { - title: "Octaves", - inputType: "number-range", - min: 1, - max: 10, - step: 1, - defaultValue: Length.number(1) - }, - seed: { - title: "Seed", - inputType: "number-range", - min: 0, - max: 1e4, - step: 1, - defaultValue: Length.number(0) - } -}; -const SVG_FILTER_COMMON_ATTRIBUTES = ["result"]; -class SVGFilter extends PropertyItem { - static parse(obj2) { - var FilterClass = SVGFilterClassName[obj2.type]; - return new FilterClass(obj2); +class SVGTextItem extends SVGModel { + getIcon() { + return obj$2.title; } getDefaultObject(obj2 = {}) { return super.getDefaultObject(__spreadValues({ - itemType: "svgfilter", - result: "" + itemType: "svg-text", + name: "New Text", + totalLength: 0, + fill: "rgba(0, 0, 0, 1)", + text: "Insert a text", + fontWeight: Length.number(100), + textLength: Length.em(0), + lengthAdjust: "spacingAndGlyphs" }, obj2)); } - getDefaultAttribute() { - return SVG_FILTER_COMMON_ATTRIBUTES.map((key) => { - return `${key}="${this.json[key]}"`; - }).join(" "); + get text() { + return this.get("text"); } - toString() { - var { type, value } = this.json; - return ``; + set text(value) { + this.set("text", value); } -} -const SVGFilterClassName = { - Image: ImageSVGFilter, - Tile: TileSVGFilter, - Saturate: SaturateSVGFilter, - HueRotate: HueRotateSVGFilter, - LuminanceAlpha: LuminanceAlphaSVGFilter, - DropShadow: DropShadowSVGFilter, - SourceGraphic: SourceGraphicSVGFilter, - SourceAlpha: SourceAlphaSVGFilter, - BackgroundImage: BackgroundImageSVGFilter, - BackgroundAlpha: BackgroundAlphaSVGFilter, - FillPaint: FillPaintSVGFilter, - StrokePaint: StrokePaintSVGFilter, - ComponentTransfer: ComponentTransferSVGFilter, - DistantLight: DistantLightSVGFilter, - PointLight: PointLightSVGFilter, - SpotLight: SpotLightSVGFilter, - DiffuseLighting: DiffuseLightingSVGFilter, - SpecularLighting: SpecularLightingSVGFilter, - Blend: BlendSVGFilter, - Offset: OffsetSVGFilter, - RotaMatrix: RotaMatrixSVGFilter, - GaussianBlur: GaussianBlurSVGFilter, - Flood: FloodSVGFilter, - Merge: MergeSVGFilter, - Composite: CompositeSVGFilter, - Morphology: MorphologySVGFilter, - Turbulence: TurbulenceSVGFilter, - DisplacementMap: DisplacementMapSVGFilter, - ColorMatrix: ColorMatrixSVGFilter, - ConvolveMatrix: ConvolveMatrixSVGFilter -}; -const SVGFilterSpecList = { - Image: ImageSVGFilter.spec, - Tile: TileSVGFilter.spec, - DropShadow: DropShadowSVGFilter.spec, - Saturate: SaturateSVGFilter.spec, - HueRotate: HueRotateSVGFilter.spec, - LuminanceAlpha: LuminanceAlphaSVGFilter.spec, - Offset: OffsetSVGFilter.spec, - ComponentTransfer: ComponentTransferSVGFilter.spec, - SpecularLighting: SpecularLightingSVGFilter.spec, - SpotLight: SpotLightSVGFilter.spec, - PointLight: PointLightSVGFilter.spec, - DistantLight: DistantLightSVGFilter.spec, - DiffuseLighting: DiffuseLightingSVGFilter.spec, - Blend: BlendSVGFilter.spec, - RotaMatrix: RotaMatrixSVGFilter.spec, - Merge: MergeSVGFilter.spec, - GaussianBlur: GaussianBlurSVGFilter.spec, - Flood: FloodSVGFilter.spec, - Morphology: MorphologySVGFilter.spec, - Composite: CompositeSVGFilter.spec, - Turbulence: TurbulenceSVGFilter.spec, - DisplacementMap: DisplacementMapSVGFilter.spec, - ColorMatrix: ColorMatrixSVGFilter.spec, - ConvolveMatrix: ConvolveMatrixSVGFilter.spec -}; -const WEBKIT_ATTRIBUTE_FOR_CSS = [ - "text-fill-color", - "text-stroke-color", - "text-stroke-width", - "background-clip" -]; -function valueFilter(obj2) { - const result = {}; - Object.keys(obj2).forEach((key) => { - if (isNotUndefined(obj2[key])) { - result[key] = obj2[key]; - } - }); - return result; -} -const EMPTY_OBJECT = {}; -class DomRender extends ItemRender { - toStringPropertyCSS(item, field) { - return STRING_TO_CSS(item.get(field)); + get textLength() { + return this.get("textLength"); } - toBackgroundImageCSS(item) { - const cache = item.cacheBackgroundImage; - if (!cache) { - item.setBackgroundImageCache(); - } - if (!cache) { - return EMPTY_OBJECT; - } - return cache; + set textLength(value) { + this.set("textLength", value); } - toLayoutCSS(item) { - if (item.hasLayout()) { - if (item.isLayout(Layout.FLEX)) { - return this.toFlexLayoutCSS(item); - } else if (item.isLayout(Layout.GRID)) { - return this.toGridLayoutCSS(item); - } - } - return {}; + get lengthAdjust() { + return this.get("lengthAdjust"); } - toLayoutItemCSS(item) { - var _a, _b; - var parentLayout = (_a = item.parent) == null ? void 0 : _a["layout"]; - var obj2 = {}; - if (parentLayout === Layout.FLEX) { - obj2 = { - position: "relative", - left: "auto !important", - top: "auto !important" - }; - } else if (parentLayout === Layout.GRID) { - obj2 = { - position: "relative", - left: "auto", - top: "auto" - }; - } else if (parentLayout === Layout.DEFAULT) { - obj2 = this.toDefaultLayoutItemCSS(item); - } - if (parentLayout === Layout.FLEX) { - obj2 = __spreadProps(__spreadValues({}, obj2), { - "flex-basis": item.flexBasis, - "flex-shrink": item.flexShrink - }); - const parentLayoutDirection = (_b = item == null ? void 0 : item.parent) == null ? void 0 : _b.flexDirection; - if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { - obj2.width = "auto"; - obj2["flex-grow"] = item.flexGrow || 1; - } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical === ResizingMode.FILL_CONTAINER) { - obj2.height = "auto"; - obj2["flex-grow"] = item.flexGrow || 1; - } - } else if (parentLayout === Layout.GRID) { - obj2 = __spreadProps(__spreadValues({}, obj2), { - "grid-column-start": item.gridColumnStart, - "grid-column-end": item.gridColumnEnd, - "grid-row-start": item.gridRowStart, - "grid-row-end": item.gridRowEnd - }); - const columns = Grid.parseStyle(item.parent.gridTemplateColumns); - const rows = Grid.parseStyle(item.parent.gridTemplateRows); - obj2["grid-column-start"] = Math.max(1, Math.min(columns.length, obj2["grid-column-start"] || 1)); - obj2["grid-column-end"] = Math.min(columns.length + 1, obj2["grid-column-end"] || 2); - obj2["grid-row-start"] = Math.max(1, Math.min(rows.length, obj2["grid-row-start"] || 1)); - obj2["grid-row-end"] = Math.min(rows.length + 1, obj2["grid-row-end"] || 2); - } - return obj2; + set lengthAdjust(value) { + this.set("lengthAdjust", value); } - toDefaultLayoutItemCSS(item) { - var _a; - const obj2 = {}; - if ((_a = item.parent) == null ? void 0 : _a.is("project")) { - return obj2; - } - const parentWidth = item.parent.screenWidth; - switch (item[ConstraintsDirection.HORIZONTAL]) { - case Constraints.MIN: - obj2.left = Length.px(item.x); - obj2.right = "auto !important"; - break; - case Constraints.MAX: - obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth); - obj2.left = "auto !important"; - break; - case Constraints.STRETCH: - obj2.left = Length.px(item.x); - obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth); - obj2.width = "auto !important"; - break; - case Constraints.CENTER: - obj2.left = Length.px(item.x); - break; - case Constraints.SCALE: - obj2.left = Length.px(item.x).toPercent(parentWidth); - obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth).toPercent(parentWidth); - obj2.width = "auto !important"; - break; - } - const parentHeight = item.parent.screenHeight; - switch (item[ConstraintsDirection.VERTICAL]) { - case Constraints.MIN: - obj2.top = Length.px(item.y); - obj2.bottom = "auto !important"; - break; - case Constraints.MAX: - obj2.top = "auto !important"; - obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight); - break; - case Constraints.STRETCH: - obj2.top = Length.px(item.y); - obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight); - obj2.height = "auto !important"; - break; - case Constraints.CENTER: - obj2.top = Length.px(item.y); - break; - case Constraints.SCALE: - obj2.top = Length.px(item.y).toPercent(parentHeight); - obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight).toPercent(parentHeight); - obj2.height = "auto !important"; - break; - } - return obj2; + enableHasChildren() { + return false; } - toFlexLayoutCSS(item) { - if (item.parent.isNot("project")) - ; - return { - display: "flex", - gap: Length.px(item.gap), - "flex-direction": item.flexDirection, - "flex-wrap": item.flexWrap, - "justify-content": item.justifyContent, - "align-items": item.alignItems, - "align-content": item.alignContent - }; + convert(json) { + json = super.convert(json); + json.textLength = Length.parse(json.textLength); + return json; } - toGridLayoutCSS(item) { - return { - display: "grid", - "grid-template-columns": item.gridTemplateColumns, - "grid-template-rows": item.gridTemplateRows, - "grid-template-areas": item.gridTemplateAreas, - "grid-auto-columns": item.gridAutoColumns, - "grid-auto-rows": item.gridAutoRows, - "grid-auto-flow": item.gridAutoFlow, - "grid-column-gap": item.gridColumnGap, - "grid-row-gap": item.gridRowGap - }; + getDefaultTitle() { + return "Text"; } - toBorderCSS(item) { - const borderCSS = item.computed("border", (border2) => { - const obj2 = __spreadValues({}, STRING_TO_CSS(border2)); - return obj2; - }); - return borderCSS; +} +class SVGTextPathItem extends SVGModel { + getIcon() { + return obj$2.text_rotate; } - toBoxModelCSS(item) { - let obj2 = {}; - if (item.marginTop) - obj2["margin-top"] = Length.px(item.marginTop); - if (item.marginBottom) - obj2["margin-bottom"] = Length.px(item.marginBottom); - if (item.marginLeft) - obj2["margin-left"] = Length.px(item.marginLeft); - if (item.marginRight) - obj2["margin-right"] = Length.px(item.marginRight); - if (item.paddingTop) - obj2["padding-top"] = Length.px(item.paddingTop); - if (item.paddingBottom) - obj2["padding-bottom"] = Length.px(item.paddingBottom); - if (item.paddingLeft) - obj2["padding-left"] = Length.px(item.paddingLeft); - if (item.paddingRight) - obj2["padding-right"] = Length.px(item.paddingRight); - return obj2; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "svg-textpath", + name: "New TextPath", + d: "", + totalLength: 0, + fill: "rgba(0, 0, 0, 1)", + text: "Insert a text", + textLength: Length.em(0), + lengthAdjust: "spacingAndGlyphs", + startOffset: Length.em(0) + }, obj2)); } - toSizeCSS(item) { - const obj2 = {}; - if (item.isLayout(Layout.FLEX)) { - switch (item.resizingHorizontal) { - case ResizingMode.FIXED: - obj2.width = Length.px(item.screenWidth); - break; - case ResizingMode.HUG_CONTENT: - obj2["min-width"] = Length.px(item.screenWidth); - break; - } - switch (item.resizingVertical) { - case ResizingMode.FIXED: - obj2.height = Length.px(item.screenHeight); - break; - case ResizingMode.HUG_CONTENT: - obj2["min-height"] = Length.px(item.screenHeight); - break; - } - } - if (item.isInDefault()) { - obj2.width = Length.px(item.screenWidth); - obj2.height = Length.px(item.screenHeight); - } - if (item.isInFlex()) { - const direction2 = item.parent.flexDirection; - if (direction2 === FlexDirection.ROW || direction2 === FlexDirection.ROW_REVERSE) { - obj2.width = Length.px(item.screenWidth); - obj2.height = Length.px(item.screenHeight); - if (item.parent["align-items"] === AlignItems.STRETCH) { - obj2.height = "auto"; - } - if (item.resizingVertical === ResizingMode.FILL_CONTAINER) { - obj2.height = "auto"; - obj2["align-self"] = AlignItems.STRETCH; - } - } else { - obj2.width = Length.px(item.screenWidth); - obj2.height = Length.px(item.screenHeight); - if (item.parent["align-items"] === AlignItems.STRETCH) { - obj2.width = "auto"; - } - if (item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { - obj2.width = "auto"; - obj2["align-self"] = AlignItems.STRETCH; - } - } + get d() { + if (!this.get("d")) { + return null; } - if (item.isInGrid()) { - obj2.width = "auto"; - obj2.height = "auto"; + if (!this.cachePath) { + this.cachePath = new PathParser(this.get("d")); + this.cacheWidth = this.width; + this.cacheHeight = this.height; } - return obj2; + return this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; } - toDefaultCSS(item) { - if (!item.hasCache("toDefaultCSS")) { - item.addCache("toDefaultCSS", { - "box-sizing": "border-box" - }); - } - let result = item.getCache("toDefaultCSS"); - if (item.isAbsolute) { - result.left = Length.px(item.x); - result.top = Length.px(item.y); - } - result["background-color"] = item.backgroundColor; - result["color"] = item.color; - result["font-size"] = item.fontSize; - result["font-weight"] = item.fontWeight; - result["font-style"] = item.fontStyle; - result["font-family"] = item.fontFamily; - result["text-align"] = item.textAlign; - result["text-decoration"] = item.textDecoration; - result["text-transform"] = item.textTransform; - result["letter-spacing"] = item.letterSpacing; - result["word-spacing"] = item.wordSpacing; - result["line-height"] = item.lineHeight; - result["text-indent"] = item.textIndent; - result["text-shadow"] = item.textShadow; - result["text-overflow"] = item.textOverflow; - result["text-wrap"] = item.textWrap; - result["position"] = item.position; - result["overflow"] = item.overflow; - result["z-index"] = item.zIndex; - result["opacity"] = item.opacity; - result["mix-blend-mode"] = item.mixBlendMode; - result["transform-origin"] = item.transformOrigin; - result["border-radius"] = item.borderRadius; - result["filter"] = item.filter; - result["backdrop-filter"] = item.backdropFilter; - result["box-shadow"] = item.boxShadow; - result["animation"] = item.animation; - result["transition"] = item.transition; - return result; + set d(value) { + this.set("d", value); } - toVariableCSS(item) { - const v = item.computed("variable", (v2) => { - let obj2 = {}; - v2.split(";").filter((it) => it.trim()).forEach((it) => { - const [key, value] = it.split(":"); - obj2[`--${key}`] = value; - }); - return obj2; - }); - return v; + get text() { + return this.get("text"); } - toRootVariableCSS(item) { - let obj2 = {}; - item.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { - const [key, value] = it.split(":"); - obj2[`--${key}`] = value; - }); - return obj2; + set text(value) { + this.set("text", value); } - toRootVariableString(item) { - return CSS_TO_STRING(this.toRootVariableCSS(item)); + get textLength() { + return this.get("textLength"); } - toWebkitCSS(item) { - var results = {}; - WEBKIT_ATTRIBUTE_FOR_CSS.forEach((key) => { - results[`-webkit-${key}`] = item.get(key); - }); - return results; + set textLength(value) { + this.set("textLength", value); + } + get lengthAdjust() { + return this.get("lengthAdjust"); + } + set lengthAdjust(value) { + this.set("lengthAdjust", value); + } + get startOffset() { + return this.get("startOffset"); + } + set startOffset(value) { + this.set("startOffset", value); } - toTextClipCSS(item) { - let results = {}; - if (item.textClip === "text") { - results["-webkit-background-clip"] = "text"; - results["-webkit-text-fill-color"] = "transparent"; - results["color"] = "transparent"; + enableHasChildren() { + return false; + } + refreshMatrixCache() { + super.refreshMatrixCache(); + if (this.hasChangedField("d")) { + this.cachePath = new PathParser(this.get("d")); + this.cacheWidth = this.width; + this.cacheHeight = this.height; + } else if (this.hasChangedField("width", "height")) { + this.d = this.cachePath.clone().scale(this.width / this.cacheWidth, this.height / this.cacheHeight).d; + this.modelManager.setChanged("reset", this.id, { d: this.d }); } - return results; } - toTransformCSS(item) { - const transform2 = item.computed("angle", (angle) => { - return { - transform: angle === 0 ? "" : `rotateZ(${angle}deg)` - }; - }); - return transform2; + convert(json) { + json = super.convert(json); + json.textLength = Length.parse(json.textLength); + json.startOffset = Length.parse(json.startOffset); + return json; } - toDefInnerString(item) { - return ` - ${this.toClipPath(item)} - ${this.toSVGFilter(item)} - `.trim(); + getDefaultTitle() { + return "TextPath"; } - toClipPath(item) { - if (item.clipPath === "") - return ""; - if (!item.cacheClipPathObject) { - item.setClipPathCache(); - } - var obj2 = item.cacheClipPathObject; - var value = obj2.value; - switch (obj2.type) { - case "path": - return ``; - case "svg": - return `${value}`; +} +class Component extends LayerModel { + is(...itemType) { + if (itemType.includes("component")) { + return true; } - return ``; + return super.is(...itemType); } - toClipPathCSS(item) { - let str = item.clipPath; - if (Boolean(str) === false) { - return null; - } - if (!item.cacheClipPathObject) { - item.setClipPathCache(); - } - var obj2 = item.cacheClipPathObject; - switch (obj2.type) { - case "path": - if (obj2.value) { - str = `url(#${this.clipPathId(item)})`; - } - break; - case "svg": - str = `url(#${this.clipPathId(item)})`; - break; - } - return { - "clip-path": str + getProps() { + return []; + } + static createComponent({ + iconString, + title: title2 = "Unknown Title", + attrs = {}, + enableHasChildren = false + }) { + return class extends Component { + getIcon() { + return iconString || iconUse("add"); + } + getDefaultObject() { + return super.getDefaultObject(__spreadValues({ + itemType: "NewComponent", + name: "New Component" + }, attrs)); + } + enableHasChildren() { + return enableHasChildren || false; + } + getDefaultTitle() { + return title2; + } }; } - innerSVGId(item) { - return item.id + "inner-svg"; +} +const DEFAULT_TEMPLATE = ` + + + +`; +class TemplateModel extends Component { + getIcon() { + return obj$2.auto_awesome; } - booleanId(item) { - return item.id + "boolean"; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "template", + name: "New Template", + engine: "dom", + template: DEFAULT_TEMPLATE, + params: [] + }, obj2)); } - clipPathId(item) { - return item.id + "clip-path"; + get template() { + return this.get("template"); } - toDefString(item) { - var str = this.toDefInnerString(item).trim(); - return str ? ` - - - ${str} - - - ` : ""; + set template(value) { + this.set("template", value); } - toSelectorString(item, prefix = "") { - var _a; - return (_a = item.selectors) == null ? void 0 : _a.map((selector2) => selector2.toString(prefix)).join("\n\n"); + get params() { + return this.get("params"); } - generateView(item, prefix = "", appendCSS = "") { - var cssString = ` - ${prefix} { /* ${item.itemType} */ - ${CSS_TO_STRING(this.toCSS(item), "\n ")}; - ${appendCSS} + set params(value) { + this.set("params", value); } - ${this.toNestedCSS(item).map((it) => { - return `${prefix} ${it.selector} { - ${it.cssText ? it.cssText : CSS_TO_STRING(it.css || {}, "\n ")}; - }`; - }).join("\n")} - ${this.toSelectorString(item, prefix)} - `; - return cssString; + get engine() { + return this.get("engine"); } - toCSS(item) { - return valueFilter(Object.assign({}, this.toVariableCSS(item), this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toBoxModelCSS(item), this.toBorderCSS(item), this.toBackgroundImageCSS(item), this.toLayoutCSS(item), this.toSizeCSS(item), this.toTransformCSS(item), this.toLayoutItemCSS(item))); + set engine(value) { + this.set("engine", value); } - toStyleCode(item) { - const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); - return cssString; + enableHasChildren() { + return false; } - toStyle(item) { - const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); - return ` - - ` + item.layers.map((it) => { - return this.renderer.toStyle(it); - }).join(""); + getDefaultTitle() { + return "Template"; } - toStyleData(item) { - const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); - return { - styleTag: ``, - cssString - }; + editable(editablePropertyName) { + switch (editablePropertyName) { + case "font": + return true; + } + return super.editable(editablePropertyName); } - toExportStyle(item) { - const cssString = this.generateView(item, `.element-item[data-id='${item.id}']`); - return ` - - ` + item.layers.map((it) => { - return this.renderer.toExportStyle(it); - }).join(""); +} +class TextModel extends LayerModel { + getIcon() { + return obj$2.title; } - render(item) { - var { elementType, id, name, itemType, isBooleanItem } = item; - const tagName = elementType || "div"; - return `<${tagName} id="${this.uniqueId(item)}" class="element-item ${itemType}" data-is-boolean-item="${isBooleanItem}" data-id="${id}" data-title="${name}">${this.toDefString(item)}${item.layers.map((it) => { - return this.renderer.render(it); - }).join("")}`; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "text", + name: "New Text", + elementType: "p", + content: "" + }, obj2)); } - toSVGFilter(item) { - if (item.svgfilters.length === 0) - return ""; - var filterString = item.computedValue("svgfilters"); - if (item.hasChangedField("svgfilters") || !filterString) { - filterString = item.computed("svgfilters", (svgfilters) => { - var filterString2 = svgfilters.map((svgfilter) => { - return ` - - ${svgfilter.filters.map((filter2) => SVGFilter.parse(filter2)).join("\n")} - `; - }).join(""); - return filterString2; - }, true); - } - return filterString; + get content() { + return this.get("content"); } - renderSVG() { + set content(value) { + this.set("content", value); } - toNestedCSS() { - const result = []; - return result; + enableHasChildren() { + return false; } - updateStyle(item) { - if (item.hasCache("style")) { - const styleText = this.toStyleData(item).cssString; - if (item.hasCache("styleText")) { - if (item.getCache("styleText") === styleText) { - return; - } - } - item.addCache("styleText", styleText); - item.getCache("style").text(styleText); - } else { - const styleData = this.toStyleData(item); - const style = Dom.createByHTML(styleData.styleTag); - item.addCache("style", style); - item.addCache("styleText", styleData.cssString); - document.head.appendChild(style.el); + getDefaultTitle() { + return "Text"; + } + editable(editablePropertyName) { + switch (editablePropertyName) { + case "svg-item": + case "transform": + case "transformOrigin": + case "perspective": + case "perspectiveOrigin": + case "layout": + return false; + case "font": + case "fontSpacing": + case "textStyle": + case "textShadow": + case "textFill": + case "textClip": + case "backgroundImage": + case "box-model": + case "border": + case "borderRadius": + case "backdropFilter": + case "pattern": + return true; } + return super.editable(editablePropertyName); } - update(item, currentElement) { - if (!currentElement) - return; - this.updateStyle(item); - let $svg = currentElement.el.$svg; - if (!$svg) { - currentElement.el.$svg = currentElement.$(`[data-id="${this.innerSVGId(item)}"]`); - $svg = currentElement.el.$svg; - currentElement.el.$booleanSvg = currentElement.$(`[data-id="${this.booleanId(item)}"]`); +} +function defaultItems(editor) { + editor.registerItem("project", Project); + editor.registerItem("artboard", ArtBoard); + editor.registerItem("rect", RectLayer); + editor.registerItem("circle", CircleLayer); + editor.registerItem("image", ImageLayer); + editor.registerItem("text", TextModel); + editor.registerItem("boolean-path", BooleanPathModel); + editor.registerItem("svg-path", PathModel); + editor.registerItem("svg-text", SVGTextItem); + editor.registerItem("svg-textpath", SVGTextPathItem); + editor.registerItem("template", TemplateModel); + editor.registerItem("polygon", PolygonModel); + editor.registerItem("star", StarModel); + editor.registerItem("spline", SplineModel); +} +var texture = ` + + + +`; +var TextureView$1 = ""; +const cssPatterns = [ + { + itemType: "circle", + name: "base", + attrs: { + backgroundColor: "#ececec" } - if (currentElement.data("is-boolean-item") !== `${item.isBooleanItem}`) { - currentElement.attr("data-is-boolean-item", item.isBooleanItem); + }, + { + itemType: "circle", + name: "base", + attrs: { + backgroundColor: "black" } - if ($svg) { - const defString = this.toDefInnerString(item); - if (defString) { - var $defs = $svg.$("defs"); - $defs.updateSVGDiff(`${defString}`); - } - } else { - const defString = this.toDefString(item); - if (defString) { - var a = Dom.createByHTML(defString); - if (a) { - currentElement.prepend(a); - } - } + }, + { + itemType: "circle", + name: "base", + attrs: { + backgroundColor: "red" + } + }, + { + itemType: "circle", + name: "base", + attrs: { + backgroundImage: ` + background-image: linear-gradient(to right, #ececec, black 100%); + ` + } + }, + { + itemType: "circle", + name: "base", + attrs: { + backgroundImage: ` + background-image: linear-gradient(to right, #ececec, black 100%); + `, + border: ` + border:10px solid black; + ` } } +]; +class CSSTextureView extends EditorElement { + template() { + return ` +
+ `; + } + [LOAD("$css-list")]() { + return cssPatterns.map((it, index2) => { + const svg = this.$editor.renderer("svg").render(this.$model.createModel(__spreadValues({ + itemType: it.itemType, + width: 70, + height: 70 + }, it.attrs), false)); + return `
${svg}
`; + }); + } + [CLICK("$css-list .pattern-item")](e) { + const index2 = +e.$dt.data("index"); + const pattern = cssPatterns[index2]; + e.$dt.onlyOneClass("selected"); + this.$commands.emit("addLayerView", pattern.itemType, pattern.attrs); + } } -class LayerRender extends DomRender { -} -class SampleRender extends LayerRender { - update(item, currentElement) { - const $sampleText = currentElement.$(".sample-text"); - if ($sampleText) { - $sampleText.text(item.sampleText); +const svgPatterns = [ + { + itemType: "svg-path", + name: "path", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + d: PathParser.makeRect(0, 0, 80, 80).d + } + }, + { + itemType: "svg-path", + name: "line", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + d: PathParser.makeLine(0, 0, 80, 80).d + } + }, + { + itemType: "svg-path", + name: "line 2", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + d: PathParser.makeLine(0, 80, 80, 0).d + } + }, + { + itemType: "svg-path", + name: "circle", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + originWidth: 80, + originHeight: 80, + d: PathParser.makeCircle(0, 0, 80, 80).d + } + }, + { + itemType: "polygon", + name: "polygon - 3", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 3, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 3).d + } + }, + { + itemType: "polygon", + name: "polygon - 4", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 4, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 4).d + } + }, + { + itemType: "polygon", + name: "polygon - 4", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 5, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 5).d + } + }, + { + itemType: "polygon", + name: "polygon - 4", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 6, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 6).d + } + }, + { + itemType: "polygon", + name: "polygon - 4", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 7, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 7).d } - const $sampleNumber = currentElement.$(".sample-number"); - if ($sampleNumber) { - $sampleNumber.text(item.sampleNumber); + }, + { + itemType: "polygon", + name: "polygon - 4", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + count: 12, + originWidth: 80, + originHeight: 80, + d: PathParser.makePolygon(80, 80, 12).d } - const $sampleItems = currentElement.$(".sample-items"); - if ($sampleItems) { - const template = [...Array(item.sampleNumber)].map((_, i) => ` -
${i}
- `).join("\n"); - $sampleItems.html(template); + }, + { + itemType: "star", + name: "star - 5", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + originWidth: 80, + originHeight: 80, + count: 5, + radius: 0.5, + d: PathParser.makeStar(80, 80, 5, 0.5).d + } + }, + { + itemType: "star", + name: "curved star - 5", + attrs: { + backgroundColor: "transparent", + stroke: "black", + "stroke-width": 2, + fill: "#ececec", + originWidth: 80, + originHeight: 80, + count: 5, + radius: 0.5, + d: PathParser.makeCurvedStar(80, 80, 5, 0.5).d } - super.update(item, currentElement); } - render(item) { - var { id, sampleText, sampleNumber } = item; +]; +class SVGTextureView extends EditorElement { + template() { return ` -
- ${this.toDefString(item)} -
-
${sampleText}
-
${sampleNumber}
-
-
-
`; +
+ `; } -} -function sample(editor) { - editor.registerComponent("sample", SampleLayer); - editor.registerRenderer("html", "sample", new SampleRender()); - editor.registerInspector("sample", (current) => { - return [ - "Sample Text \uD3B8\uC9D1", - { - key: "sampleText", - editor: "TextEditor", - defaultValue: current.sampleText - }, - "Sample Number \uD3B8\uC9D1", - { - key: "sampleNumber", - editor: "NumberInputEditor", - editorOptions: { - min: 0, - max: 10, - step: 1, - label: "SN" - }, - defaultValue: current.sampleNumber - }, - "\uC2A4\uD0C0\uC77C \uCE74\uD53C", - { - type: "column", - size: [1, 1], - gap: 10, - columns: [ - { - key: "copyCssJSON", - editor: "Button", - editorOptions: { - text: "Copy CSS JSON", - onClick: () => { - console.log(JSON.stringify(editor.html.toCSS(current), null, 4)); - } - } - }, - { - key: "copyCssString", - editor: "Button", - editorOptions: { - text: "Copy CSS String", - onClick: () => { - console.log(CSS_TO_STRING(editor.html.toCSS(current))); - } - } - }, - { - key: "changeColor", - editor: "Button", - editorOptions: { - text: "Change Text Random Color", - onClick: () => { - const textColor = random$1(); - const backgroundColor = random$1(); - editor.context.commands.emit("setAttribute", { - [current.id]: { - color: textColor, - "background-color": backgroundColor - } - }); - } - } - } - ] + [LOAD("$svg-list")]() { + return svgPatterns.map((it, index2) => { + let d = it.attrs.d; + if (d) { + const path = PathParser.fromSVGString(d); + if (it.attrs.originWidth) { + path.scale(60 / it.attrs.originWidth, 60 / it.attrs.originHeight); + } else { + const rect2 = path.rect(); + path.scale(70 / rect2.width, 70 / rect2.height); + } + d = path.d; } - ]; - }); -} -var SelectionInfoView$1 = ""; -class SelectionInfoView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--selection-info-view" - }); - } - [POINTERSTART("$el [data-artboard-title-id]") + FIRSTMOVE("calculateFirstMovedElement") + MOVE("calculateMovedElement") + END("calculateEndedElement")](e) { - this.startXY = e.xy; - this.initMousePoint = this.$viewport.getWorldPosition(e); - const id = e.$dt.attr("data-artboard-title-id"); - this.$context.selection.select(id); - if (e.altKey) { - this.$commands.emit("history.copyLayer", "copy"); - } - this.initializeDragSelection(); - } - initializeDragSelection() { - this.$context.selection.reselect(); - this.$context.snapManager.clear(); - } - moveTo(dist2) { - const snap = this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map((v) => { - return add$1([], v, dist2); - }), 3 / this.$viewport.scale); - const localDist = add$1([], snap.dist, dist2); - const result = {}; - this.$context.selection.cachedItemMatrices.forEach((it) => { - const newVerties = it.verties.map((v) => { - return add$1([], v, localDist); - }); - const newDist = subtract([], transformMat4([], newVerties[0], it.parentMatrixInverse), transformMat4([], it.verties[0], it.parentMatrixInverse)); - result[it.id] = { - x: Math.floor(it.x + newDist[0]), - y: Math.floor(it.y + newDist[1]) - }; - }); - this.$context.selection.reset(result); - } - calculateFirstMovedElement() { - this.$config.set("set.move.control.point", true); - this.emit(REFRESH_SELECTION_TOOL); - } - calculateMovedElement() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); - this.moveTo(newDist); - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y")); - this.refresh(); - } - [SUBSCRIBE("refreshItemName")](id, title2) { - var _a; - this.$commands.emit("setAttribute", { - [id]: { name: title2 } + const svg = this.$editor.renderer("svg").render(this.$model.createModel(__spreadProps(__spreadValues({ + itemType: it.itemType, + width: 80, + height: 80 + }, it.attrs), { + d + }), false)); + return `
${svg}
`; }); - (_a = this.$el.$(`[data-artboard-title-id='${id}']`)) == null ? void 0 : _a.text(title2); - } - calculateEndedElement() { - this.$commands.executeCommand("setAttribute", "move item", this.$context.selection.pack("x", "y")); - this.$config.set("set.move.control.point", false); - this.emit(REFRESH_SELECTION_TOOL); - this.$commands.emit("history.refreshSelection"); } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.refresh(); + [CLICK("$svg-list .pattern-item")](e) { + const index2 = +e.$dt.data("index"); + const pattern = svgPatterns[index2]; + e.$dt.onlyOneClass("selected"); + this.$commands.emit("addLayerView", pattern.itemType, pattern.attrs); } - [SUBSCRIBE(UPDATE_CANVAS)]() { - if (this.$context.selection.current) { - if (this.$context.selection.current.is("artboard")) { - if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "transform", "transform-origin")) { - this.refresh(); - } +} +class TextureView extends EditorElement { + template() { + const isItemMode = this.$config.get("editor.design.mode") === "item"; + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--texture" + }, /* @__PURE__ */ createElementJsx(Tabs, { + ref: "$tab", + selectedValue: isItemMode ? "svg" : "css", + onchange: (value) => { + this.$config.set("inspector.selectedValue", value); } - } - } - [LOAD("$el") + DOMDIFF]() { - var _a; - return (_a = this.$context.selection.currentProject) == null ? void 0 : _a.artboards.map((it) => { - return { - item: it, - title: it.name, - id: it.id, - layout: it.layout, - pointers: this.$viewport.applyVerties(it.verties) - }; - }).map((it) => this.makeArtboardTitleArea(it)); + }, isItemMode ? "" : /* @__PURE__ */ createElementJsx(TabPanel, { + value: "css", + title: "CSS" + }, /* @__PURE__ */ createElementJsx("object", { + refClass: "CSSTextureView", + ref: "$css" + })), /* @__PURE__ */ createElementJsx(TabPanel, { + value: "svg", + title: "SVG" + }, /* @__PURE__ */ createElementJsx("object", { + refClass: "SVGTextureView", + ref: "$svg" + })))); } - getIcon(item) { - if (item.hasLayout() || item.hasChildren() || item.is("artboard")) { - if (item.isLayout("flex")) { - return iconUse("layout_flex", item.flexDirection === "column" ? "rotate(90 12 12)" : ""); - } else if (item.isLayout("grid")) { - return iconUse("layout_grid"); - } - return ""; +} +function defaultPatterns(editor) { + editor.registerElement({ + TextureView, + CSSTextureView, + SVGTextureView + }); + editor.registerUI("leftbar.tab", { + TextureView: { + value: "texture", + title: "Texture", + icon: texture, + designMode: ["design", "item"] } - return this.$icon.get(item.itemType, item); + }); + editor.registerUI("leftbar.tab.texture", { + TextureView + }); +} +var ExportProperty$1 = ""; +class ExportProperty extends BaseProperty { + getTitle() { + return this.$i18n("export.property.title"); } - createSize(pointers, artboardItem) { - const newPointer = pointers[0]; - const diff = subtract([], pointers[0], pointers[3]); - const angle = calculateAngle360(diff[0], diff[1]) - 90; - return /* @__PURE__ */ createElementJsx("div", { - class: "artboard-title is-not-drag-area", - "data-artboard-title-id": artboardItem.id, - "data-layout": artboardItem.layout, - style: { - "transform-origin": "0% 0%", - transform: `translate3d( calc(${newPointer[0]}px), calc(${newPointer[1]}px), 0px) rotateZ(${angle}deg)` - } - }, /* @__PURE__ */ createElementJsx("div", { - style: "transform: translateY(-100%);" - }, this.getIcon(artboardItem.item), artboardItem.title)); + isFirstShow() { + return true; } - makeArtboardTitleArea(it) { - return this.createSize(it.pointers, it); + getClassName() { + return "elf--export-property"; } - [SUBSCRIBE("refreshAll")]() { - this.refresh(); + getBody() { + return ` +
+ + +
+
+ + +
+ `; } - [SUBSCRIBE("appendLayer")]() { - this.refresh(); + [CLICK("$svg")]() { + this.$commands.emit("downloadSVG"); + } + [CLICK("$png")]() { + this.$commands.emit("downloadPNG"); } } -function selectionInfoView(editor) { - editor.registerUI("canvas.view", { - SelectionInfoView +function exportResource(editor) { + editor.registerUI("inspector.tab.style", { + ExportProperty }); } -var GhostToolView$1 = ""; -const CHECK_RATE = 0.5; -class GhostToolView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--ghost-tool-view" - }, /* @__PURE__ */ createElementJsx("div", { - ref: "$containerView" - }), /* @__PURE__ */ createElementJsx("div", { - ref: "$view" +var FillEditorView$1 = ""; +const spreadMethodList = [ + SpreadMethodType.PAD, + SpreadMethodType.REFLECT, + SpreadMethodType.REPEAT +]; +const TOOL_SIZE$1 = 20; +class FillBaseEditor extends EditorElement { + initializeData() { + const current = this.$context.selection.current; + this.state.currentMatrix = current.matrix; + this.state.imageResult = current.createFragmentMatrix(this.state.key); + this.state.originalResult = current.createFragmentMatrix(this.state.key); + } +} +class FillTimingStepEditor extends FillBaseEditor { + [POINTERSTART("$el .step-point") + MOVE("moveStepPoint") + END("moveEndStepPoint")](e) { + this.$el.toggleClass("dragging", true); + this.initializeData(); + const colorStepIndex = +e.$dt.data("colorstep-index"); + this.localColorStep = this.state.imageResult.image.colorsteps[colorStepIndex]; + this.localColorStepTimingCount = this.localColorStep.timing.count; + this.localColorCubicBezierTimingCount = this.localColorStep.timingCount; + } + moveStepPoint(dx, dy) { + const dist$1 = (dx < 0 ? -1 : 1) * Math.ceil(dist([0, 0, 0], [dx, dy, 0]) / 10); + switch (this.localColorStep.timing.name) { + case TimingFunction.LINEAR: + break; + case TimingFunction.STEPS: + this.localColorStep.timing.count = Math.max(this.localColorStepTimingCount + dist$1, 1); + break; + default: + this.localColorStep.timingCount = Math.max(this.localColorCubicBezierTimingCount + dist$1, 1); + break; + } + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` })); } - [SUBSCRIBE("startGhostToolView")]() { - const screenVerties = this.$context.selection.verties; - this.isLayoutItem = this.$context.selection.isLayoutItem; - this.verties = clone$1(screenVerties); - this.ghostVerties = clone$1(screenVerties); - this.ghostScreenVerties = this.$viewport.applyVerties(this.ghostVerties); - this.initMousePoint = this.$viewport.getWorldPosition(); - this.filteredLayers = this.$context.selection.notSelectedLayers; - this.containerList = this.filteredLayers.filter((it) => it.hasLayout() || it.is("artboard")).map((it) => it.originVerties); - this.$config.set("set.move.control.point", true); + makeTimingString(timing) { + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.EASE: + case TimingFunction.EASE_IN: + case TimingFunction.EASE_OUT: + case TimingFunction.EASE_IN_OUT: + return `${timing.name}`; + default: + return `cubic-bezier(${timing.x1}, ${timing.y1}, ${timing.x2}, ${timing.y2})`; + } } - collectInformation() { - var _a, _b; - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = this.getDist(); - this.ghostVerties = this.verties.map((v) => { - return add$1([], v, newDist); - }); - this.ghostScreenVerties = this.$viewport.applyVerties(this.ghostVerties); - const filteredLayers = this.$context.selection.filteredLayers.filter((it) => this.$context.selection.check(it) === false); - this.targetItem = filteredLayers[0]; - if (this.targetItem) { - const currentParent = (_a = this.$context.selection.current) == null ? void 0 : _a.parent; - if (currentParent.isNot("project") && (currentParent == null ? void 0 : currentParent.isLayout(Layout.GRID))) { - this.targetItem = this.$context.selection.current.parent; - } else { - if (this.targetItem.hasLayout() && ((_b = this.targetItem) == null ? void 0 : _b.hasChildren())) { - if (this.targetItem.isLayout(Layout.FLEX)) { - this.targetItem = this.targetItem.layers[this.targetItem.layers.length - 1]; - } else if (this.targetItem.isLayout(Layout.GRID)) - ; - } - } - this.$context.selection.updateDragTargetItem(this.targetItem); - this.targetOriginPosition = this.$viewport.applyVerties(toRectVerties(this.targetItem.contentVerties)); - this.targetPoint = this.$viewport.applyVertex(targetMousePoint); - this.targetRelativeMousePoint = { - x: (this.targetPoint[0] - this.targetOriginPosition[0][0]) / (this.targetOriginPosition[1][0] - this.targetOriginPosition[0][0]), - y: (this.targetPoint[1] - this.targetOriginPosition[0][1]) / (this.targetOriginPosition[3][1] - this.targetOriginPosition[0][1]) - }; - if (this.targetItem.isLayoutItem()) { - this.targetParent = this.targetItem.parent; - if (this.targetParent) { - this.targetParentPosition = this.$viewport.applyVerties(this.targetParent.contentVerties); - } - } else { - this.targetParent = null; - this.targetParentPosition = null; + moveEndStepPoint(dx, dy) { + if (dx === 0 && dy === 0) { + const { timing } = this.localColorStep; + switch (timing.name) { + case TimingFunction.STEPS: + this.localColorStep.timing.direction = this.localColorStep.timing.direction === "start" ? "end" : "start"; + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` + })); + break; + case TimingFunction.LINEAR: + break; + case TimingFunction.PATH: + this.emit("showComponentPopup", { + title: "Path Editor", + width: 400, + inspector: [ + { + key: "path", + editor: "path", + editorOptions: { + height: 160 + }, + defaultValue: timing.d + } + ], + changeEvent: (key, value) => { + this.localColorStep.timing = parseOneValue(`path(${value})`).parsed; + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` + })); + } + }); + break; + default: + this.emit("showComponentPopup", { + title: "Cubic Bezier", + width: 220, + inspector: [ + { + key: "timing", + editor: "cubic-bezier", + editorOptions: { + isAnimating: false + }, + defaultValue: this.makeTimingString(timing) + } + ], + changeEvent: (key, value) => { + this.localColorStep.timing = parseOneValue(value).parsed; + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` + })); + } + }); + this.$el.toggleClass("dragging", false); + return; } - } else { - this.targetPoint = null; - this.targetRelativeMousePoint = null; - this.targetParent = null; - this.targetParentPosition = null; - } - } - [SUBSCRIBE("moveFirstGhostToolView")]() { - this.collectInformation(); - this.load("$containerView"); - this.load("$view"); - } - [SUBSCRIBE("moveGhostToolView")]() { - this.collectInformation(); - this.load("$view"); - } - [LOAD("$containerView")]() { - var _a; - if (!this.ghostVerties) { - return /* @__PURE__ */ createElementJsx("svg", null); - } - return /* @__PURE__ */ createElementJsx("svg", null, (_a = this.containerList) == null ? void 0 : _a.map((it) => { - it = this.$viewport.applyVerties(it); - return /* @__PURE__ */ createElementJsx("path", { - class: "container", - d: ` - M ${it[0][0]} ${it[0][1]} - L ${it[1][0]} ${it[1][1]} - L ${it[2][0]} ${it[2][1]} - L ${it[3][0]} ${it[3][1]} - Z - ` - }); - })); - } - renderPathForVerties(verties, className) { - if (!verties) { - return /* @__PURE__ */ createElementJsx("g", null); } - const d = vertiesToPath(verties); - return /* @__PURE__ */ createElementJsx("g", null, /* @__PURE__ */ createElementJsx("path", { - class: className, - d + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` })); + this.$el.toggleClass("dragging", false); } - renderPath(verties, className, data = className) { - if (!verties) - return ""; - verties = data === "ghost" ? verties : toRectVerties(verties); - const textX = className === "flex-item" ? verties[0][0] : verties[0][0]; - const textY = className === "flex-item" ? verties[2][1] + 10 : verties[0][1] - 10; - return /* @__PURE__ */ createElementJsx("g", null, /* @__PURE__ */ createElementJsx("text", { - x: textX, - y: textY, - "font-size": 8 - }, data), this.renderPathForVerties(verties, className)); - } - renderLayoutFlexRowArea() { - if (this.targetRelativeMousePoint.x < CHECK_RATE) { - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, this.renderPathForVerties([this.targetOriginPosition[0], this.targetOriginPosition[3]], "flex-target")); - } else { - return /* @__PURE__ */ createElementJsx(FragmentInstance, null, this.renderPathForVerties([this.targetOriginPosition[1], this.targetOriginPosition[2]], "flex-target")); - } - } - renderLayoutFlexForFirstItem(direction2) { - const isColumn = direction2 === FlexDirection.COLUMN; - const verticalField = isColumn ? "align-items" : "justify-content"; - const verticalConst = isColumn ? AlignItems : JustifyContent; - const horizontalField = isColumn ? "justify-content" : "align-items"; - const horizontalConst = isColumn ? JustifyContent : AlignItems; - const rect2 = vertiesToRectangle(this.targetOriginPosition); - const center2 = this.ghostScreenVerties[4]; - const width2 = dist(this.ghostScreenVerties[0], this.ghostScreenVerties[1]); - const height2 = dist(this.ghostScreenVerties[0], this.ghostScreenVerties[3]); - let newCenterX = width2 / 2; - let newCenterY = height2 / 2; - switch (this.targetItem[verticalField]) { - case verticalConst.FLEX_START: - newCenterX = rect2.x + width2 / 2; - break; - case verticalConst.CENTER: - case verticalConst.SPACE_BETWEEN: - case verticalConst.SPACE_AROUND: - newCenterX = rect2.x + rect2.width / 2; +} +class FillColorstepEditor extends FillTimingStepEditor { + [KEYUP("$el .colorstep")](e) { + const index2 = +e.$dt.data("index"); + switch (e.code) { + case "Delete": + case "Backspace": + this.removeStep(index2); break; - case verticalConst.FLEX_END: - newCenterX = rect2.x + rect2.width - width2 / 2; + case "BracketRight": + this.sortToRight(index2); break; - } - switch (this.targetItem[horizontalField]) { - case horizontalConst.FLEX_START: - newCenterY = rect2.y + height2 / 2; + case "BracketLeft": + this.sortToLeft(index2); break; - case horizontalConst.CENTER: - case horizontalConst.SPACE_BETWEEN: - case horizontalConst.SPACE_AROUND: - newCenterY = rect2.y + rect2.height / 2; + case "Equal": + this.appendColorStep(index2); break; - case horizontalConst.FLEX_END: - newCenterY = rect2.y + rect2.height - height2 / 2; + case "Minus": + this.prependColorStep(index2); break; } - const newDist = subtract([], [newCenterX, newCenterY, 0], center2); - const renderVerties = this.ghostScreenVerties.map((it) => add$1([], it, newDist)).filter((it, index2) => index2 < 4); - return this.renderPathForVerties(renderVerties, "flex-item", "ghost"); } - renderLayoutFlexColumnArea() { - if (this.targetRelativeMousePoint.y < 0) { - return ""; - } - if (this.targetRelativeMousePoint.y < CHECK_RATE) { - return this.renderPathForVerties([this.targetOriginPosition[0], this.targetOriginPosition[1]], "flex-target"); + removeStep(currentIndex) { + const image2 = this.state.imageResult.image; + image2.removeColorStepByIndex(currentIndex); + this.updateColorStepStatus(image2, -1); + } + sortToRight() { + const image2 = this.state.imageResult.image; + image2.sortToRight(); + this.updateColorStepStatus(image2, -1); + } + sortToLeft() { + const image2 = this.state.imageResult.image; + image2.sortToLeft(); + this.updateColorStepStatus(image2, -1); + } + appendColorStep(currentIndex) { + const nextIndex = currentIndex + 1; + const image2 = this.state.imageResult.image; + const currentColorStep = image2.colorsteps[currentIndex]; + const nextColorStep = image2.colorsteps[nextIndex]; + let newIndex = -1; + if (!nextColorStep) { + if (currentColorStep.percent !== 100) { + newIndex = image2.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); + } } else { - return this.renderPathForVerties([this.targetOriginPosition[2], this.targetOriginPosition[3]], "flex-target"); + newIndex = image2.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); } + this.updateColorStepStatus(image2, newIndex); } - renderLayoutItemInsertArea() { - if (!this.targetParent) { - return; - } - if (this.targetParent.hasLayout()) { - if (this.targetParent.isLayout(Layout.FLEX)) { - switch (this.targetParent.flexDirection) { - case FlexDirection.ROW: - return this.renderLayoutFlexRowArea(); - case FlexDirection.COLUMN: - return this.renderLayoutFlexColumnArea(); - } - } else if (this.targetParent.isLayout(Layout.GRID)) - ; + prependColorStep(currentIndex) { + const prevIndex = currentIndex - 1; + const image2 = this.state.imageResult.image; + const currentColorStep = image2.colorsteps[currentIndex]; + const prevColorStep = image2.colorsteps[prevIndex]; + let newIndex = -1; + if (!prevColorStep) { + if (currentColorStep.percent !== 0) { + newIndex = image2.insertColorStep(currentColorStep.percent); + } + } else { + newIndex = image2.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); } - return /* @__PURE__ */ createElementJsx("path", { - class: "insert-area", - d: `` - }); + this.updateColorStepStatus(image2, newIndex); } - renderLayoutItemForFirst() { - var _a; - if (((_a = this.targetItem) == null ? void 0 : _a.hasChildren()) === false) { - if (this.targetItem.isLayout(Layout.FLEX)) { - return this.renderLayoutFlexForFirstItem(this.targetItem.flexDirection); - } else if (this.targetItem.isLayout(Layout.GRID)) - ; + [POINTERSTART("$el .point") + MOVE("movePoint") + END("moveEndPoint")](e) { + this.$el.toggleClass("dragging", true); + this.initializeData(); + const result = this.state.imageResult; + this.pointTarget = e.$dt.data("type"); + this.startPoint = this.$viewport.applyVertex(result.startPoint); + this.endPoint = this.$viewport.applyVertex(result.endPoint); + this.dist = dist(this.startPoint, this.endPoint); + if (result.shapePoint) { + this.shapePoint = this.$viewport.applyVertex(result.shapePoint); + this.shapeDist = dist(this.startPoint, this.shapePoint); } - return /* @__PURE__ */ createElementJsx("path", { - class: "insert-area", - d: `` - }); } - [LOAD("$view") + DOMDIFF]() { - var _a; - const current = this.$context.selection.current; - if (!this.ghostVerties || !current) { - return /* @__PURE__ */ createElementJsx("svg", null); + calculateNextPoint(nextPoint) { + if (this.$config.get("bodyEvent").shiftKey) { + let tempStartPoint, tempEndPoint; + if (this.pointTarget === "start") { + tempStartPoint = this.endPoint; + tempEndPoint = nextPoint; + } else { + tempStartPoint = this.startPoint; + tempEndPoint = nextPoint; + } + const newDist = subtract([], tempEndPoint, tempStartPoint); + let newAngle = calculateAngle360(newDist[0], newDist[1]) - 90; + newAngle = (newAngle + 360) % 360; + newAngle -= newAngle % this.$config.get("fixed.gradient.angle"); + nextPoint = vertiesMap([add$1([], tempStartPoint, [0, -this.dist, 0])], calculateRotationOriginMat4(newAngle, tempStartPoint))[0]; } - const hasTargetView = ((_a = this.targetItem) == null ? void 0 : _a.id) !== current.id; - return /* @__PURE__ */ createElementJsx("svg", null, this.targetParent && this.renderPathForVerties(this.targetParentPosition, "target-parent"), hasTargetView && this.renderPathForVerties(this.targetOriginPosition, "target", ""), hasTargetView && this.renderPathForVerties(this.targetOriginPosition, "target-rect", ""), hasTargetView ? this.renderLayoutItemInsertArea() : "", hasTargetView ? this.renderLayoutItemForFirst() : "", this.isLayoutItem && this.renderPathForVerties(this.ghostScreenVerties.filter((_, index2) => index2 < 4), "ghost")); - } - initializeGhostView() { - this.isLayoutItem = false; - this.ghostVerties = void 0; - this.ghostScreenVerties = void 0; - this.targetOriginPosition = void 0; - this.targetOriginPosition = void 0; - this.targetRelativeMousePoint = void 0; - this.targetItem = void 0; - this.targetParent = void 0; - this.targetParentPosition = void 0; - this.$context.selection.updateDragTargetItem(this.targetItem); - } - getDist() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); - return newDist; - } - insertToBackground() { - const current = this.$context.selection.current; - const newDist = this.getDist(); - if (current.isLayoutItem() === false) - return; - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.$context.selection.currentProject, newDist); + return nextPoint; } - getTargetAction() { - let targetAction = ""; - if (this.targetParent.hasLayout()) { - if (this.targetParent.isLayout(Layout.FLEX)) { - switch (this.targetParent.flexDirection) { - case FlexDirection.ROW: - if (this.targetRelativeMousePoint.x < CHECK_RATE) { - targetAction = TargetActionType.INSERT_BEFORE; - } else { - targetAction = TargetActionType.INSERT_AFTER; - } - break; - case FlexDirection.COLUMN: - if (this.targetRelativeMousePoint.y < CHECK_RATE) { - targetAction = TargetActionType.INSERT_BEFORE; - } else { - targetAction = TargetActionType.INSERT_AFTER; - } - break; - } - } + moveShapePoint(dx, dy) { + const targetPoint = this.shapePoint; + const nextPoint = this.calculateNextPoint(add$1([], targetPoint, [dx, dy, 0])); + const width2 = this.state.currentMatrix.width; + const height2 = this.state.currentMatrix.height; + const image2 = this.state.imageResult.image; + let newX, newY; + switch (image2.type) { + case GradientType.RADIAL: + const dist$1 = dist(this.startPoint, nextPoint); + const lastPoint = lerp([], this.startPoint, this.shapePoint, dist$1 / this.shapeDist); + const [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(lastPoint)], this.state.currentMatrix.absoluteMatrixInverse); + newX = Length.makePercent(worldPosition[0], width2); + newY = Length.makePercent(worldPosition[1], height2); + image2.reset({ + x3: newX, + y3: newY + }); + break; } - return targetAction; + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` + })); } - insertToLayoutItem() { - const current = this.$context.selection.current; - const newDist = this.getDist(); - if (this.targetParent.hasLayout()) { - let targetAction = this.getTargetAction(); - if (this.targetParent.isLayout(Layout.FLEX)) { - if (targetAction) { - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist, targetAction); + movePoint(dx, dy) { + if (this.pointTarget === "shape") { + return this.moveShapePoint(dx, dy); + } + const targetPoint = this.pointTarget === "start" ? this.startPoint : this.endPoint; + let nextPoint = this.calculateNextPoint(add$1([], targetPoint, [dx, dy, 0])); + var [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.state.currentMatrix.absoluteMatrixInverse); + const width2 = this.state.currentMatrix.width; + const height2 = this.state.currentMatrix.height; + const image2 = this.state.imageResult.image; + switch (image2.type) { + case GradientType.RADIAL: + var newX, newY, newX2, newY2, newX3, newY3; + if (this.pointTarget === "start") { + newX = image2.x1.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); + newY = image2.y1.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); + const nextEndPoint = this.calculateNextPoint(add$1([], this.endPoint, [dx, dy, 0])); + const [newEndPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextEndPoint)], this.state.currentMatrix.absoluteMatrixInverse); + newX2 = image2.x2.isPercent() ? Length.makePercent(newEndPosition[0], width2) : Length.px(newEndPosition[0]); + newY2 = image2.y2.isPercent() ? Length.makePercent(newEndPosition[1], height2) : Length.px(newEndPosition[1]); + const nextShapePoint = this.calculateNextPoint(add$1([], this.shapePoint, [dx, dy, 0])); + const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); + newX3 = image2.x3.isPercent() ? Length.makePercent(newShapePosition[0], width2) : Length.px(newShapePosition[0]); + newY3 = image2.y3.isPercent() ? Length.makePercent(newShapePosition[1], height2) : Length.px(newShapePosition[1]); + image2.reset({ + x1: newX, + y1: newY, + x2: newX2, + y2: newY2, + x3: newX3, + y3: newY3 + }); + } else if (this.pointTarget === "end") { + if (this.$config.get("bodyEvent").altKey) { + const dist$1 = dist(this.startPoint, nextPoint); + nextPoint = lerp([], this.startPoint, this.endPoint, dist$1 / this.dist); + var [worldPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.state.currentMatrix.absoluteMatrixInverse); + } + newX = Length.makePercent(worldPosition[0], width2); + newY = Length.makePercent(worldPosition[1], height2); + image2.reset({ + x2: newX, + y2: newY + }); + const lastDist = dist(this.startPoint, nextPoint); + const unitVector = lerp([], this.startPoint, nextPoint, 1 / lastDist); + const nextShapePoint = lerp([], this.startPoint, vertiesMap([unitVector], calculateRotationOriginMat4(90, this.startPoint))[0], image2.radialType === RadialGradientType.CIRCLE ? lastDist : this.shapeDist); + const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); + newX3 = Length.makePercent(newShapePosition[0], width2); + newY3 = Length.makePercent(newShapePosition[1], height2); + image2.reset({ + x3: newX3, + y3: newY3 + }); } - } else if (this.targetParent.isLayout(Layout.GRID)) { - this.insertToGridItem(); - } + break; + case GradientType.LINEAR: + var newX, newY; + if (this.pointTarget === "start") { + newX = image2.x1.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); + newY = image2.y1.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); + image2.reset({ + x1: newX, + y1: newY + }); + } else if (this.pointTarget === "end") { + newX = image2.x2.isPercent() ? Length.makePercent(worldPosition[0], width2) : Length.px(worldPosition[0]); + newY = image2.y2.isPercent() ? Length.makePercent(worldPosition[1], height2) : Length.px(worldPosition[1]); + image2.reset({ + x2: newX, + y2: newY + }); + } + break; } + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${this.state.imageResult.image}` + })); } - insertToGridItem() { - const current = this.$context.selection.current; - const { info, items } = this.$context.selection.gridInformation || { - items: [] - }; - const currentVerties = this.ghostVerties.filter((_, index2) => index2 < 4); - const targetRect = vertiesToRectangle(currentVerties); - const epsilon = IntersectEpsilonNumberType.RECT / this.$context.viewport.scale; - const checkedItems = items == null ? void 0 : items.filter((it) => { - return polyPoly(it.originVerties, currentVerties); - }).filter((it) => { - const intersect = intersectRectRect(it.originRect, targetRect); - return Math.floor(intersect.width) > epsilon && Math.floor(intersect.height) > epsilon; - }); - if (checkedItems == null ? void 0 : checkedItems.length) { - const columnList = checkedItems.map((it) => it.column); - const rowList = checkedItems.map((it) => it.row); - const columnStart = Math.min(...columnList); - const rowStart = Math.min(...rowList); - const columnEnd = Math.max(...columnList) + 1; - const rowEnd = Math.max(...rowList) + 1; - this.$commands.executeCommand("setAttribute", "change grid item", this.$context.selection.packByValue({ - "grid-column-start": columnStart, - "grid-column-end": columnEnd, - "grid-row-start": rowStart, - "grid-row-end": rowEnd - })); - if (info.current.hasChild(current.id) === false) { - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, info.current, void 0); - } - return; - } else { - if (this.targetItem) { - this.emit("refreshGridToolInfo", this.targetItem); - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, void 0); + moveEndPoint(dx, dy) { + const image2 = this.state.imageResult.image; + const width2 = this.state.currentMatrix.width; + const height2 = this.state.currentMatrix.height; + if (dx === 0 && dy === 0) { + switch (image2.type) { + case GradientType.RADIAL: + if (this.pointTarget === "start") { + switch (image2.radialType) { + case RadialGradientType.CIRCLE: + image2.reset({ + radialType: RadialGradientType.ELLIPSE + }); + break; + case RadialGradientType.ELLIPSE: + const lastDist = dist(this.startPoint, this.endPoint); + const unitVector = lerp([], this.startPoint, this.endPoint, 1 / lastDist); + const nextShapePoint = lerp([], this.startPoint, vertiesMap([unitVector], calculateRotationOriginMat4(90, this.startPoint))[0], lastDist); + const [newShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(nextShapePoint)], this.state.currentMatrix.absoluteMatrixInverse); + const x3 = Length.makePercent(newShapePosition[0], width2); + const y3 = Length.makePercent(newShapePosition[1], height2); + image2.reset({ + radialType: RadialGradientType.CIRCLE, + x3, + y3 + }); + break; + } + break; + } + default: + const index2 = spreadMethodList.findIndex((it) => image2.spreadMethod === it); + const nextIndex = (index2 + 1) % spreadMethodList.length; + image2.reset({ + spreadMethod: spreadMethodList[nextIndex] + }); + break; } } + this.emit("updateFillEditor", image2); + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${image2}` + })); } - updateLayer() { - var _a; - const current = this.$context.selection.current; - if (!current) - return; - const newDist = this.getDist(); - if (newDist[0] === 0 && newDist[1] === 0) { + [POINTERSTART("$el .colorstep") + MOVE("moveColorStep") + END("moveEndColorStep")](e) { + this.$el.toggleClass("dragging", true); + this.state.hoverColorStep = null; + this.initializeData(); + const $colorstep = e.$dt; + this.$targetIndex = +$colorstep.data("index"); + if (e.altKey) { + this.removeStep(this.$targetIndex); + this.state.altKey = true; return; } - if (this.targetItem && this.targetItem.id === (current == null ? void 0 : current.id)) { - return; + const result = this.state.imageResult; + switch (result.image.type) { + case GradientType.RADIAL: + case GradientType.LINEAR: + this.startPoint = this.$viewport.applyVertex(result.startPoint); + this.endPoint = this.$viewport.applyVertex(result.endPoint); + const x = +$colorstep.data("x"); + const y = +$colorstep.data("y"); + this.screenXY = [x, y, 0]; + const dist2 = subtract([], this.endPoint, this.startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + this.rotateInverse = calculateRotationOriginMat4(-angle, this.startPoint); + break; } - if (!this.targetItem) { - this.insertToBackground(); + } + moveColorStep(dx, dy) { + if (this.state.altKey) return; - } - if (this.targetItem.hasLayout()) { - const isCtrl = this.$context.keyboardManager.isCtrl(); - if (((_a = this.targetItem) == null ? void 0 : _a.hasChildren()) === false && this.targetItem.isLayout(Layout.FLEX) && isCtrl === false) { - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist); - return; - } else { - if (isCtrl) { - const { info } = this.$context.selection.gridInformation || { - items: [] - }; - if (info == null ? void 0 : info.current) { - this.insertToGridItem(); - return; - } + const nextPoint = add$1([], this.screenXY, [dx, dy, 0]); + const [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.startPoint, this.endPoint, nextPoint], this.rotateInverse); + const result = this.state.imageResult; + let newDist = 0; + let baseDist = 0; + switch (result.image.type) { + case GradientType.RADIAL: + case GradientType.LINEAR: + var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; + var baseDefaultDist = Math.abs(s - e); + if (n < s) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else if (n > e) { + newDist = Math.abs(n - s) / baseDefaultDist * 100; } else { - if (this.targetItem.isLayout(Layout.GRID)) { - this.insertToGridItem(); - return; - } + newDist = (n - s) / baseDefaultDist * 100; } - } + newDist = Math.max(0, Math.min(100, newDist)); + baseDist = baseDefaultDist; + break; } - if (this.targetParent) { - this.insertToLayoutItem(); + const image2 = this.state.imageResult.image; + image2.colorsteps[this.$targetIndex].setValue(newDist, baseDist); + const targetColorStep = { + color: image2.colorsteps[this.$targetIndex].color, + percent: image2.colorsteps[this.$targetIndex].percent + }; + const nextImage = this.state.originalResult.image; + nextImage.colorsteps = image2.colorsteps.map((it) => { + return it; + }); + nextImage.sortColorStep(); + this.emit("updateFillEditor", nextImage, targetColorStep); + this.$commands.executeCommand("setAttribute", `change ${this.state.key} fragment`, this.$context.selection.packByValue({ + [this.state.key]: `${nextImage}` + })); + } + moveEndColorStep(dx, dy) { + if (this.state.altKey) { + this.state.altKey = false; return; } - if (current.isLayoutItem() && current.parent.id !== this.targetItem.id) { - this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist); + if (dx === 0 && dy === 0) { + const image2 = this.state.imageResult.image; + image2.colorsteps[this.$targetIndex].toggleTiming(); + const targetColorStep = { + color: image2.colorsteps[this.$targetIndex].color, + percent: image2.colorsteps[this.$targetIndex].percent + }; + this.emit("updateFillEditor", image2, targetColorStep); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + [this.state.key]: `${image2}` + })); } + this.$el.toggleClass("dragging", false); } - [SUBSCRIBE("endGhostToolView")](hasMoved = false) { - if (hasMoved) { - this.updateLayer(); - } - this.initializeGhostView(); - this.load(); + updateColorStepStatus(image2, index2) { + this.initializeData(); + const { color: color2, percent } = image2.colorsteps[index2] || {}; + this.emit("updateFillEditor", image2, { color: color2, percent }); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + [this.state.key]: `${image2}` + })); + this.state.hoverColorStep = null; } -} -var SelectionView = ""; -var directionType$1 = { - 1: "to top left", - 2: "to top right", - 3: "to bottom right", - 4: "to bottom left", - 11: "to top", - 12: "to right", - 13: "to bottom", - 14: "to left" -}; -const SelectionToolEvent$1 = class extends EditorElement { - checkViewMode() { - return this.$modeView.isCurrentMode(ViewModeType.CanvasView); + [POINTERSTART("$el .area-line")]() { + const image2 = this.state.originalResult.image; + const index2 = image2.insertColorStep(this.state.hoverColorStep.percent); + this.updateColorStepStatus(image2, index2); } - [SUBSCRIBE(REFRESH_SELECTION, REFRESH_SELECTION_TOOL) + IF("checkViewMode")]() { - if (this.$context.selection.isMany) { - this.initSelectionTool(); - } else { - this.hide(); + [POINTEROUT("$el .area-line")]() { + if (this.state.hoverColorStep) { + this.state.hoverColorStep = null; + this.refresh(); } } - [SUBSCRIBE(UPDATE_VIEWPORT) + IF("checkViewMode")]() { - if (this.$context.selection.isMany) { - this.initSelectionTool(); + [POINTERMOVE("$el .area-line")](evt) { + const nextPoint = this.$viewport.applyVertex(this.$viewport.getWorldPosition(evt)); + const image2 = this.state.originalResult.image; + let baseStartPoint, baseEndPoint, baseNextPoint; + switch (image2.type) { + case GradientType.LINEAR: + case GradientType.RADIAL: + [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.state.startPoint, this.state.endPoint, nextPoint], this.state.rotateInverse); + var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; + var baseDefaultDist = Math.abs(s - e); + var newDist; + if (n < s) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else if (n > e) { + newDist = Math.abs(n - s) / baseDefaultDist * 100; + } else { + newDist = (n - s) / baseDefaultDist * 100; + } + this.state.hoverColorStep = image2.pickColorStep(newDist); + break; } + this.refresh(); } -}; -class GroupSelectionToolView extends SelectionToolEvent$1 { - template() { - return ` - - `; - } - toggleEditingPath(isEditingPath) { - this.refs.$selectionView.toggleClass("editing-path", isEditingPath); - } - [POINTERSTART("$pointerRect .rotate-pointer") + MOVE("rotateVertex") + END("rotateEndVertex")](e) { - this.state.moveType = "rotate"; - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.verties = this.groupItem.verties; - this.rotateTargetNumber = +e.$dt.attr("data-number"); - this.refreshRotatePointerIcon(); - this.state.dragging = false; - this.state.isRotate = true; - this.$config.set("set.move.control.point", true); - } - rotateVertex() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const distVector = subtract([], targetMousePoint, this.initMousePoint); - const targetRotatePointer = this.rotateTargetNumber === 4 ? getRotatePointer(this.verties, 34) : this.verties[this.rotateTargetNumber]; - var distAngle = Math.floor(calculateAngleForVec3(targetRotatePointer, this.verties[4], distVector)); - if (this.$config.get("bodyEvent").shiftKey) { - distAngle = distAngle - distAngle % this.$config.get("fixed.angle"); - } - this.localAngle = this.angle + distAngle; - this.groupItem.reset({ - angle: this.localAngle - }); - const selectionMatrix = calculateRotationOriginMat4(distAngle, this.verties[4]); - let cachedItemMatrices = this.$context.selection.cachedItemMatrices; - if (this.$context.selection.length === 1) { - cachedItemMatrices = cachedItemMatrices.filter((it) => it.id === this.$context.selection.current.id); - } - cachedItemMatrices.forEach((item) => { - const newVerties = vertiesMap(item.verties, multiply$1([], item.parentMatrixInverse, selectionMatrix)); - const rotatePointer = getRotatePointer(newVerties, 34); - var lastAngle = calculateAngle(rotatePointer[0] - newVerties[4][0], rotatePointer[1] - newVerties[4][1]) - 270; - const newTranslate = transformMat4([], newVerties[0], calculateRotationOriginMat4(-lastAngle, newVerties[4])); - const instance = this.$model.get(item.id); - if (instance) { - instance.reset({ - x: newTranslate[0], - y: newTranslate[1], - angle: lastAngle - }); - } - }); - this.state.dragging = true; - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "width", "height", "angle")); - this.renderPointers(); +} +class FillEditorView extends FillColorstepEditor { + initState() { + return { + key: "", + value: "", + isShow: false + }; } - rotateEndVertex() { - this.state.dragging = false; - this.state.isRotate = false; - this.$commands.emit("recoverCursor"); - this.$config.set("set.move.control.point", false); - this.$context.selection.reselect(); - this.initMatrix(true); - this.nextTick(() => { - this.$commands.executeCommand("setAttribute", "rotate selection pointer", this.$context.selection.pack("x", "y", "width", "height", "angle")); + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--fill-editor-view" }); } - refreshRotatePointerIcon() { - this.$commands.emit("refreshCursor", "rotate"); + updateData() { + this.trigger(this.state.onchange, this.state.key, this.state.value); } - refreshPointerIcon(e) { - const dataPointer = e.$dt.data("pointer"); - if (dataPointer) { - const pointer = dataPointer.split(",").map((it) => Number(it)); - const diff = subtract([], pointer, this.state.renderPointerList[0][4]); - const angle = calculateAngle360(diff[0], diff[1]); - let iconAngle = Math.floor(angle); - this.$commands.emit("refreshCursor", "direction", `rotate(${iconAngle} 8 8)`); - } else { - this.$commands.emit("recoverCursor"); + refresh() { + if (this.state.isShow) { + this.load(); } } - checkPointerIsNotMoved() { - return Boolean(this.state.dragging) === false && this.$config.false("set.move.control.point"); + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); } - [POINTEROVER("$pointerRect .rotate-pointer") + IF("checkPointerIsNotMoved") + PREVENT](e) { - this.refreshRotatePointerIcon(e); + [SUBSCRIBE(UPDATE_CANVAS) + DEBOUNCE(100)]() { + if (this.$context.selection.current) { + if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "fill", "stroke")) { + this.refresh(); + } + } } - [POINTEROVER("$pointerRect .pointer") + IF("checkPointerIsNotMoved") + PREVENT](e) { - this.refreshPointerIcon(e); + [SUBSCRIBE("showFillEditorView")](params = {}) { + this.setState({ + key: params.key, + isShow: true, + onchange: params.onchange + }); + this.$el.show(); + this.$context.commands.emit("push.mode.view", "FillEditorView"); } - [POINTEROUT("$pointerRect .pointer,.rotate-pointer") + IF("checkPointerIsNotMoved") + PREVENT]() { - this.$commands.emit("recoverCursor"); + [SUBSCRIBE("hideFillEditorView")]() { + this.setState({ + key: "", + isShow: false, + onchange: null + }); + this.$el.hide(); + this.$commands.emit("pop.mode.view", "FillEditorView"); } - [POINTERSTART("$pointerRect .pointer") + PREVENT + MOVE("moveVertex") + END("moveEndVertex")](e) { - this.refreshPointerIcon(e); - this.state.dragging = true; - const num = +e.$dt.attr("data-number"); - this.state.moveType = directionType$1[`${num}`]; - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.$context.selection.reselect(); - this.state.dragging = false; - this.initMatrix(true); - this.cachedGroupItem = this.groupItem.matrix; - this.$config.set("set.move.control.point", true); - this.$context.selection.startToCacheChildren(); + makeTimingLine(timing, width2 = 10, startX = 0, startY = 0) { + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0} ${startY + width2} + L${startX + width2 * 1 / 3} ${startY + width2} + L${startX + width2 * 1 / 3} ${startY + width2 * 2 / 3} + L${startX + width2 * 2 / 3} ${startY + width2 * 2 / 3} + L${startX + width2 * 2 / 3} ${startY + width2 * 1 / 3} + L${startX + width2} ${startY + width2 * 1 / 3} + L${startX + width2} ${startY + 0} + ` + }); + case TimingFunction.PATH: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(0, width2).translate(startX, startY).d + }); + default: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0} ${startY + width2} + C + ${startX + timing.x1 * width2} ${startY + width2 - timing.y1 * width2} + ${startX + timing.x2 * width2} ${startY + width2 - timing.y2 * width2} + ${startX + width2} ${startY + 0} + ` + }); + } } - calculateNewOffsetMatrixInverse(vertextOffset, width2, height2, origin, itemMatrix) { - const center2 = add$1([], TransformOrigin.scale(origin, width2, height2), negate([], vertextOffset)); - return calculateMatrixInverse(fromTranslation([], vertextOffset), fromTranslation([], center2), itemMatrix, fromTranslation([], negate([], center2))); + makeTimingCircle(colorstepIndex, current, prev) { + const prevStickScreenXY = prev.stickScreenXYInEnd; + const stickScreenXY = current.stickScreenXYInStart; + const { timing, timingCount } = current; + let pos; + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + pos = lerp([], prevStickScreenXY, stickScreenXY, 0.5); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timing.count)); + default: + pos = lerp([], prevStickScreenXY, stickScreenXY, 0.5); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timingCount)); + } } - calculateDistance(vertext, distVector, reverseMatrix) { - const currentVertex = clone(vertext); - const snap = this.$context.snapManager.check([add$1([], currentVertex, distVector)], 3 / this.$viewport.scale); - const nextVertex = add$1([], currentVertex, add$1([], distVector, snap.dist)); - var currentResult = transformMat4([], currentVertex, reverseMatrix); - var nextResult = transformMat4([], nextVertex, reverseMatrix); - const realDist = round$2([], subtract([], nextResult, currentResult)); - return realDist; + makeTimingArea(colorstepIndex, current, prev, size2) { + const prevStickScreenXY = prev.stickScreenXYInEnd; + const stickScreenXY = current.stickScreenXYInStart; + return /* @__PURE__ */ createElementJsx("g", { + class: "timing-area" + }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx("path", { + class: "timing-path", + d: ` + M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} + L ${stickScreenXY[0]} ${stickScreenXY[1]} + ` + }), this.makeTimingCircle(colorstepIndex, current, prev, size2)); } - calculateRealDist(item, vertextIndex, distVector) { - return this.calculateDistance(item.verties[vertextIndex], distVector, item.absoluteMatrixInverse); + makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint) { + const size2 = TOOL_SIZE$1; + const dist2 = subtract([], endPoint, startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { + if (index2 === 0) + return ""; + return this.makeTimingArea(index2, it, colorsteps[index2 - 1], TOOL_SIZE$1); + }), colorsteps.map((it, index2) => { + return /* @__PURE__ */ createElementJsx("g", { + transform: `rotate(${angle} ${it.stickScreenXY[0]} ${it.stickScreenXY[1]})` + }, /* @__PURE__ */ createElementJsx("rect", { + id: it.id, + "data-index": index2, + class: "colorstep", + x: it.stickScreenXY[0], + y: it.stickScreenXY[1], + width: size2, + height: size2, + fill: it.color, + tabIndex: -1, + "data-x": it.screenXY[0], + "data-y": it.screenXY[1] + }), this.makeTimingLine(it.timing, size2, it.stickScreenXY[0], it.stickScreenXY[1])); + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "start", + cx: startPoint[0], + cy: startPoint[1] + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "end", + cx: endPoint[0], + cy: endPoint[1] + }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "shape", + cx: shapePoint[0], + cy: shapePoint[1] + }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { + class: "hover-colorstep", + r: "5", + cx: newHoverColorStepPoint[0], + cy: newHoverColorStepPoint[1], + fill: this.state.hoverColorStep.color + })); } - moveGroupItem(lastStartVertex, newWidth, newHeight) { - this.groupItem.reset({ - x: lastStartVertex[0] + (newWidth < 0 ? newWidth : 0), - y: lastStartVertex[1] + (newHeight < 0 ? newHeight : 0), - width: Math.abs(newWidth), - height: Math.abs(newHeight) + makeStickPoint(colorsteps, startPoint, endPoint) { + const size2 = TOOL_SIZE$1; + const dist2 = subtract([], endPoint, startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + const rotateInverse = calculateRotationOriginMat4(-angle, startPoint); + const rotateInverseInverse = invert([], rotateInverse); + return colorsteps.map((it) => { + it.screenXY = this.$viewport.applyVertex(it.pos); + const [newScreenXY] = vertiesMap([it.screenXY], rotateInverse); + [it.stickScreenXY, it.stickScreenXYInStart, it.stickScreenXYInEnd] = vertiesMap([ + [newScreenXY[0] - size2 / 2, newScreenXY[1] - size2 * 1.5, 0], + [ + newScreenXY[0] - size2 / 2, + newScreenXY[1] - size2 * 1.5 + size2 / 2, + 0 + ], + [ + newScreenXY[0] + size2 / 2, + newScreenXY[1] - size2 * 1.5 + size2 / 2, + 0 + ] + ], rotateInverseInverse); + return it; }); } - moveItemForGroup(it, newVerties, realDx = 0, realDy = 0) { - const transformViewInverse = calculateMatrixInverse(fromTranslation([], newVerties[4]), it.itemMatrix, fromTranslation([], negate([], newVerties[4]))); - const [newX, newY] = transformMat4([], newVerties[0], transformViewInverse); - const newWidth = distance$1(newVerties[0], newVerties[1]); - const newHeight = distance$1(newVerties[0], newVerties[3]); - const instance = this.$model.get(it.id); - if (instance) { - instance.reset({ - x: newX + realDx, - y: newY + realDy, - width: Math.max(Math.abs(newWidth), 1), - height: Math.max(Math.abs(newHeight), 1) - }); + makeRadialCenterPoint(result) { + let startPoint, endPoint, shapePoint, colorsteps; + startPoint = this.$viewport.applyVertex(result.startPoint); + endPoint = this.$viewport.applyVertex(result.endPoint); + shapePoint = this.$viewport.applyVertex(result.shapePoint); + colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); + let newHoverColorStepPoint = null; + if (this.state.hoverColorStep) { + newHoverColorStepPoint = lerp([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); } + return /* @__PURE__ */ createElementJsx("svg", { + class: "gradient-editor-area" + }, /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "area-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "start-end-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${shapePoint[0]} ${shapePoint[1]} + `, + class: "normal-line" + }), this.makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint)); } - recoverItemForGroup(groupItem, scaleX, scaleY, realDx = 0, realDy = 0) { - const absoluteMatrix = groupItem.absoluteMatrix; - const absoluteMatrixInverse = groupItem.absoluteMatrixInverse; - this.$context.selection.cachedItemMatrices.forEach((it) => { - const localView = calculateMatrix(it.parentMatrixInverse, absoluteMatrix, fromTranslation([], [realDx, realDy, 0]), fromScaling([], [scaleX, scaleY, 1]), absoluteMatrixInverse); - const newVerties = vertiesMap(it.verties, localView); - this.moveItemForGroup(it, newVerties); - }); - } - moveBottomRightVertex(distVector) { - const groupItem = this.cachedGroupItem; - let [realDx, realDy] = this.calculateRealDist(groupItem, 2, distVector); - if (this.$config.get("bodyEvent").shiftKey) { - realDy = realDx * groupItem.height / groupItem.width; + makeLinearCenterPoint(result) { + let startPoint, endPoint, colorsteps; + startPoint = this.$viewport.applyVertex(result.startPoint); + endPoint = this.$viewport.applyVertex(result.endPoint); + colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); + let newHoverColorStepPoint = null; + if (this.state.hoverColorStep) { + newHoverColorStepPoint = lerp([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); } - const newWidth = groupItem.width + realDx; - const newHeight = groupItem.height + realDy; - this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to top left", [0, 0, 0]); + return /* @__PURE__ */ createElementJsx("svg", { + class: "gradient-editor-area" + }, /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "area-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "start-end-line" + }), this.makeGradientPoint(colorsteps, startPoint, endPoint, null, newHoverColorStepPoint)); } - moveTopRightVertex(distVector) { - const groupItem = this.cachedGroupItem; - let [realDx, realDy] = this.calculateRealDist(groupItem, 1, distVector); - if (this.$config.get("bodyEvent").shiftKey) { - realDy = -(realDx * groupItem.height / groupItem.width); + makeCenterPoint(result) { + const { image: image2 } = result; + switch (image2.type) { + case GradientType.LINEAR: + return this.makeLinearCenterPoint(result); + case GradientType.RADIAL: + return this.makeRadialCenterPoint(result); } - const newWidth = groupItem.width + realDx; - const newHeight = groupItem.height - realDy; - this.moveDirectionVertex(groupItem, 0, realDy, newWidth, newHeight, "to bottom left", [0, newHeight, 0]); + return ""; } - moveDirectionVertex(groupItem, realDx, realDy, newWidth, newHeight, direction2, directionNewVector) { - const scaleX = newWidth / groupItem.width; - const scaleY = newHeight / groupItem.height; - if (scaleX >= 0 && scaleY >= 0) { - const view = calculateMatrix(groupItem.directionMatrix[direction2], this.calculateNewOffsetMatrixInverse(directionNewVector, newWidth, newHeight, groupItem.originalTransformOrigin, groupItem.itemMatrix)); - const lastStartVertex = getTranslation([], view); - this.moveGroupItem(lastStartVertex, newWidth, newHeight); - this.recoverItemForGroup(groupItem, scaleX, scaleY, realDx, realDy); + [LOAD("$el") + DOMDIFF]() { + if (!this.state.isShow) + return ""; + const current = this.$context.selection.current; + if (!current) + return ""; + const result = current.createFragmentMatrix(this.state.key); + this.state.result = result; + this.state.originalResult = current.createFragmentMatrix(this.state.key); + const image2 = result.image; + let angle, dist2; + switch (image2.type) { + case GradientType.LINEAR: + this.state.startPoint = this.$viewport.applyVertex(result.startPoint); + this.state.endPoint = this.$viewport.applyVertex(result.endPoint); + dist2 = subtract([], this.state.endPoint, this.state.startPoint); + angle = calculateAngle360(dist2[0], dist2[1]) - 180; + this.state.rotateInverse = calculateRotationOriginMat4(-angle, this.state.startPoint); + break; + case GradientType.RADIAL: + this.state.startPoint = this.$viewport.applyVertex(result.startPoint); + this.state.endPoint = this.$viewport.applyVertex(result.endPoint); + this.state.shapePoint = this.$viewport.applyVertex(result.shapePoint); + dist2 = subtract([], this.state.endPoint, this.state.startPoint); + angle = calculateAngle360(dist2[0], dist2[1]) - 180; + this.state.rotateInverse = calculateRotationOriginMat4(-angle, this.state.startPoint); + break; } + return /* @__PURE__ */ createElementJsx("div", null, this.makeCenterPoint(result)); } - moveTopVertex(distVector) { - const groupItem = this.cachedGroupItem; - const [, realDy] = this.calculateRealDist(groupItem, 0, distVector); - const newWidth = groupItem.width; - const newHeight = groupItem.height - realDy; - this.moveDirectionVertex(groupItem, 0, realDy, newWidth, newHeight, "to bottom", [newWidth / 2, newHeight, 0]); +} +function fillEditorView(editor) { + editor.registerUI("canvas.view", { + FillEditorView + }); +} +var FilterProperty$1 = ""; +const filter_list = [ + "blur", + "grayscale", + "hue-rotate", + "invert", + "brightness", + "contrast", + "drop-shadow", + "opacity", + "saturate", + "sepia", + "svg" +]; +class FilterProperty extends BaseProperty { + getTitle() { + return this.$i18n("filter.property.title"); } - moveBottomVertex(distVector) { - const groupItem = this.cachedGroupItem; - const [, realDy] = this.calculateRealDist(groupItem, 2, distVector); - const newWidth = groupItem.width; - const newHeight = groupItem.height + realDy; - this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to top", [ - newWidth / 2, - 0, - 0 - ]); + hasKeyframe() { + return true; } - moveTopLeftVertex(distVector) { - const groupItem = this.cachedGroupItem; - let [realDx, realDy] = this.calculateRealDist(groupItem, 0, distVector); - if (this.$config.get("bodyEvent").shiftKey) { - realDy = realDx * groupItem.height / groupItem.width; - } - const newWidth = groupItem.width - realDx; - const newHeight = groupItem.height - realDy; - this.moveDirectionVertex(groupItem, realDx, realDy, newWidth, newHeight, "to bottom right", [newWidth, newHeight, 0]); + isFirstShow() { + return true; } - moveLeftVertex(distVector) { - const groupItem = this.cachedGroupItem; - const [realDx] = this.calculateRealDist(groupItem, 0, distVector); - const newWidth = groupItem.width - realDx; - const newHeight = groupItem.height; - this.moveDirectionVertex(groupItem, realDx, 0, newWidth, newHeight, "to right", [newWidth, newHeight / 2, 0]); + afterRender() { + this.show(); } - moveRightVertex(distVector) { - const groupItem = this.cachedGroupItem; - const [realDx] = this.calculateRealDist(groupItem, 2, distVector); - const newWidth = groupItem.width + realDx; - const newHeight = groupItem.height; - this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to left", [ - 0, - newHeight / 2, - 0 - ]); + getKeyframeProperty() { + return "filter"; } - moveBottomLeftVertex(distVector) { - const groupItem = this.cachedGroupItem; - let [realDx, realDy] = this.calculateRealDist(groupItem, 3, distVector); - if (this.$config.get("bodyEvent").shiftKey) { - realDy = -(realDx * groupItem.height / groupItem.width); - } - const newWidth = groupItem.width - realDx; - const newHeight = groupItem.height + realDy; - this.moveDirectionVertex(groupItem, realDx, 0, newWidth, newHeight, "to top right", [newWidth, 0, 0]); + getTitleClassName() { + return "filter"; } - moveVertex() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const distVector = floor([], subtract([], targetMousePoint, this.initMousePoint)); - if (this.state.moveType === "to bottom right") { - this.moveBottomRightVertex(distVector); - } else if (this.state.moveType === "to top right") { - this.moveTopRightVertex(distVector); - } else if (this.state.moveType === "to top left") { - this.moveTopLeftVertex(distVector); - } else if (this.state.moveType === "to bottom left") { - this.moveBottomLeftVertex(distVector); - } else if (this.state.moveType === "to top") { - this.moveTopVertex(distVector); - } else if (this.state.moveType === "to left") { - this.moveLeftVertex(distVector); - } else if (this.state.moveType === "to right") { - this.moveRightVertex(distVector); - } else if (this.state.moveType === "to bottom") { - this.moveBottomVertex(distVector); - } - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "width", "height")); - this.renderPointers(); - this.state.dragging = true; + getBodyClassName() { + return "no-padding"; } - moveEndVertex() { - this.state.dragging = false; - this.$commands.emit("recoverCursor"); - this.$config.set("set.move.control.point", false); - this.$context.selection.reselect(); - this.initMatrix(true); - this.nextTick(() => { - this.$context.selection.recoverChildren(); - this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "width", "height")); - this.$commands.emit("recoverBooleanPath"); - }); + getBody() { + return `
`; } - show() { - this.$el.show(); - this.state.show = true; + getTools() { + return ` + + + `; } - hide() { - if (this.state.show) { - this.$el.hide(); - this.state.show = false; - } + [CLICK("$add")]() { + var filterType = this.refs.$filterSelect.value; + this.children.$filterEditor.trigger("add", filterType); } - initSelectionTool() { - if (this.$el.isHide() && this.$context.selection.isMany) { - this.show(); + [LOAD("$filterSelect")]() { + var list2 = filter_list.map((it) => { + return { title: this.$i18n(`filter.property.${it}`), value: it }; + }); + var svgFilterList = this.getSVGFilterList(); + var totalList = []; + if (svgFilterList.length) { + totalList = [...list2, { title: "-------", value: "" }, ...svgFilterList]; } else { - if (this.$el.isShow() && this.$context.selection.isMany === false) - this.hide(); - } - this.initMatrix(); - this.makeSelectionTool(); - } - get item() { - const verties = this.verties || rectToVerties(0, 0, 0, 0); - if (!this.state.groupSelectionView) { - this.state.groupSelectionView = this.$editor.createModel({ itemType: "artboard" }, false); + totalList = [...list2]; } - this.state.groupSelectionView.reset({ - parentId: this.$context.selection.currentProject.id, - x: verties[0][0], - y: verties[0][1], - width: dist(verties[0], verties[1]), - height: dist(verties[0], verties[3]) + return totalList.map((it) => { + var { title: title2, value } = it; + return ``; }); - return this.state.groupSelectionView; - } - initMatrix() { - if (this.$context.selection.isMany && this.state.dragging === false) { - this.verties = clone$1(this.$context.selection.verties); - this.angle = 0; - this.localAngle = this.angle; - this.groupItem = this.item; - this.cachedGroupItem = this.item.matrix; - } } - makeSelectionTool() { - this.renderPointers(); - } - renderPointers() { - if (this.$context.selection.isEmpty) { - this.refs.$pointerRect.empty(); - return; + getSVGFilterList() { + var current = this.$context.selection.currentProject; + var arr = []; + if (current) { + arr = current.svgfilters.map((it) => { + var id = it.id; + return { + title: `svg - #${id}`, + value: id + }; + }); } - this.state.renderPointerList = [ - this.$viewport.applyVerties(this.$context.selection.verties) - ]; - const { line: line2, point: point2, size: size2, elementLine } = this.createRenderPointers(this.state.renderPointerList[0]); - this.refs.$pointerRect.updateDiff(line2 + elementLine + point2 + size2); + return arr; } - createPointer(pointer, number, rotate2) { - return ` -
- `; + [LOAD("$body") + DOMDIFF]() { + var current = this.$context.selection.current || {}; + var value = current.filter; + return createComponent("FilterEditor", { + ref: "$filterEditor", + key: "filter", + value, + onchange: "changeFilterEditor" + }); } - createPointerSide(pointer, number, rotate2, width2, height2) { - return ` -
- `; + [SUBSCRIBE_SELF("changeFilterEditor")](key, filter2) { + this.$commands.executeCommand("setAttribute", "change filter", this.$context.selection.packByValue({ + [key]: filter2 + })); } - createRotatePointer(pointer, number) { - if (pointer.length === 0) - return ""; - if (number < 4) { - return ` -
- `; - } - return ` -
- `; + get editableProperty() { + return "filter"; } - createPointerRect(pointers, rotatePointer) { - if (pointers.length === 0) - return ""; - const centerPointer = lerp$1([], pointers[0], pointers[1], 0.5); - const line2 = ` - M ${centerPointer[0]},${centerPointer[1]} - L ${rotatePointer[0]}, ${rotatePointer[1]} - `; - return ` - - - `; + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(100)]() { + this.refresh(); } - createLine(pointers) { - return ` - M ${pointers[0][0]}, ${pointers[0][1]} - L ${pointers[1][0]}, ${pointers[1][1]} - L ${pointers[2][0]}, ${pointers[2][1]} - L ${pointers[3][0]}, ${pointers[3][1]} - L ${pointers[0][0]}, ${pointers[0][1]} - Z - `; + [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(100)]() { + this.load("$filterSelect"); } - createSize(pointers) { - const top2 = lerp$1([], pointers[0], pointers[1], 0.5); - const right2 = lerp$1([], pointers[1], pointers[2], 0.5); - const bottom2 = lerp$1([], pointers[2], pointers[3], 0.5); - const left2 = lerp$1([], pointers[3], pointers[0], 0.5); - const worldPosition = this.$viewport.applyVertiesInverse(pointers); - const width2 = dist(worldPosition[0], worldPosition[1]); - const height2 = dist(worldPosition[0], worldPosition[3]); - const list2 = [ - { start: top2, end: bottom2 }, - { start: right2, end: left2 }, - { start: bottom2, end: top2 }, - { start: left2, end: right2 } - ].map((it, index2) => { - return { index: index2, data: it }; - }); - list2.sort((a, b) => { - return a.data.start[1] > b.data.start[1] ? -1 : 1; - }); - const item = list2[0]; - const newPointer = lerp$1([], item.data.end, item.data.start, 1 + 16 / dist(item.data.start, item.data.end)); - const diff = subtract([], item.data.start, item.data.end); - const angle = calculateAngle360(diff[0], diff[1]) + 90; - let text2 = `${round(width2, 100)} x ${round(height2, 100)}`; - if (this.state.isRotate) { - const rotateZ2 = this.groupItem.angle; - if (rotateZ2) { - text2 = `${rotateZ2}\xB0`; +} +function filter(editor) { + editor.registerUI("inspector.tab.style", { + FilterProperty + }); +} +function font(editor) { + editor.registerUI("inspector.tab.style", { + FontProperty: ObjectProperty.create({ + title: editor.$i18n("font.property.title"), + editableProperty: "font", + preventUpdate: true + }) + }); + editor.registerInspector("font", (current) => { + return [ + { + key: "font-family", + editor: "SelectEditor", + editorOptions: { + compact: true, + label: "font_download", + options: [ + "", + "Arial", + "Arial Black", + "Times New Roman", + "Times", + "Courier New", + "Courier", + "Verdana", + "Georgia", + "Palatino", + "Garamond", + "Bookman", + "Tahoma", + "Trebuchet MS", + "Impact", + "Comic Sans MS", + "serif", + "sans-serif", + "monospace", + "cursive", + "fantasy", + "system-ui" + ] + }, + defaultValue: current.fontFamily || "" + }, + { + type: "column", + size: [1, 1], + gap: 10, + columns: [ + { + key: "font-size", + editor: "NumberInputEditor", + editorOptions: { + label: "format_size", + compact: true, + min: 8, + max: 1e3, + step: 1 + }, + defaultValue: Length.parse(current.fontSize).value, + convert: (key, value) => Length.px(value) + }, + { + key: "padding", + editor: "NumberInputEditor", + editorOptions: { + label: "padding", + compact: true, + min: 8, + max: 1e3, + step: 1 + }, + defaultValue: Length.parse(current.paddingTop).value, + convert: (key, value) => Length.px(value) + } + ] + }, + { + type: "column", + size: [1, 1], + columns: [ + { + key: "color", + editor: "ColorViewEditor", + editorOptions: { + compact: true + }, + defaultValue: current.color || "#000" + }, + { + key: "font-weight", + editor: "NumberInputEditor", + editorOptions: { + label: "format_bold", + compact: true, + min: 100, + max: 900, + step: 100 + }, + defaultValue: current.fontWeight || 400 + } + ] + }, + { + type: "column", + size: [1, 1, 1], + gap: 10, + columns: [ + { + key: "text-indent", + editor: "NumberInputEditor", + editorOptions: { + label: "format_indent", + min: -100, + max: 100, + step: 1, + compact: true + }, + defaultValue: Length.parse(current.textIndent).value, + convert: (key, value) => Length.px(value) + }, + { + key: "line-height", + editor: "NumberInputEditor", + editorOptions: { + label: "format_line_spacing", + min: 0, + max: 10, + step: 0.01, + compact: true + }, + defaultValue: current.lineHeight || 1.2 + }, + { + key: "letter-spacing", + editor: "NumberInputEditor", + editorOptions: { + label: "space", + min: -100, + max: 100, + step: 1, + compact: true + }, + defaultValue: Length.parse(current.letterSpacing).value, + convert: (key, value) => Length.px(value) + } + ] } - } - return `
${text2}
`; - } - createRenderPointers(pointers) { - const diff = subtract([], lerp$1([], pointers[0], pointers[1], 0.5), lerp$1([], pointers[0], pointers[2], 0.5)); - const rotate2 = Length.deg(calculateAngle360(diff[0], diff[1]) - 90).round(1e3); - const rotatePointer = getRotatePointer(pointers, 30); - const dist$1 = dist(pointers[0], pointers[2]); - const width2 = dist(pointers[0], pointers[1]); - const height2 = dist(pointers[0], pointers[3]); + ]; + }); +} +var FillEditor$1 = ""; +class FillEditor extends EditorElement { + initState() { + var _a; + const image2 = SVGFill.parseImage(this.props.value || "transparent") || SVGStaticGradient.create(); + const id = (_a = image2.colorsteps[this.props.index]) == null ? void 0 : _a.id; + this.$context.selection.selectColorStep(id); + if (id) { + this.currentStep = image2.colorsteps.find((it) => this.$context.selection.isSelectedColorStep(it.id)); + } return { - line: this.createPointerRect(pointers, rotatePointer), - elementLine: ` - - - - `, - size: this.createSize(pointers), - point: [ - this.createRotatePointer(rotatePointer, 4, "center center"), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[0], pointers[1], 0.5), 11, rotate2, width2, 5), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[1], pointers[2], 0.5), 12, rotate2, 5, height2), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[2], pointers[3], 0.5), 13, rotate2, width2, 5), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[3], pointers[0], 0.5), 14, rotate2, 5, height2), - this.createPointer(pointers[0], 1, rotate2), - this.createPointer(pointers[1], 2, rotate2), - this.createPointer(pointers[2], 3, rotate2), - this.createPointer(pointers[3], 4, rotate2) - ].join("") + cachedRect: null, + index: +(this.props.index || 0), + value: this.props.value, + image: image2 }; } - checkShow() { - if (this.state.show && this.$context.selection.isMany) { - return true; - } - return false; - } - [SUBSCRIBE("hideSelectionToolView")]() { - this.hide(); - } -} -var directionType = { - 1: "to top left", - 2: "to top right", - 3: "to bottom right", - 4: "to bottom left", - 11: "to top", - 12: "to right", - 13: "to bottom", - 14: "to left" -}; -const SelectionToolEvent = class extends EditorElement { - checkViewMode() { - return this.$modeView.isCurrentMode(ViewModeType.CanvasView); + setValue(value) { + this.setState({ + cachedRect: null, + image: SVGFill.parseImage(value) + }, false); + this.refresh(); } - [SUBSCRIBE(REFRESH_SELECTION, REFRESH_SELECTION_TOOL) + IF("checkViewMode")]() { - this.initSelectionTool(); + template() { + return ` +
+
+
+
+
+
+
+
+
+ ${createComponent("SelectEditor", { + label: "Pattern", + ref: "$patternUnits", + options: ["userSpaceOnUse"], + key: "patternUnits", + onchange: "changeKeyValue" + })} +
+ +
+
+ `; } - [SUBSCRIBE(UPDATE_VIEWPORT) + IF("checkViewMode")]() { - if (this.$context.selection.isOne) { - this.initSelectionTool(); - } else { - this.hide(); + getImageFieldValue(image2, field) { + var value = image2[field]; + if (isUndefined(value)) { + switch (field) { + case "cx": + case "cy": + case "r": + case "fx": + case "fy": + return "50%"; + case "x1": + case "y1": + case "y2": + case "fr": + case "imageX": + case "imageY": + return "0%"; + case "x2": + case "patternWidth": + case "patternHeight": + case "imageWidth": + case "imageHeight": + return "100%"; + } } + return value; } - [SUBSCRIBE("updateModeView")]() { - if (this.checkViewMode()) { - this.initSelectionTool(); - } else { - this.hide(); + [CHANGE("$file")](e) { + var project2 = this.$context.selection.currentProject; + if (project2) { + [...e.target.files].forEach((item) => { + this.$commands.emit("updateImageAssetItem", item, (local) => { + this.trigger("setImageUrl", local); + }); + }); } } -}; -class SelectionToolView extends SelectionToolEvent { - template() { - return ` - - `; + refreshFieldValue() { + this.children.$cx.setValue(this.state.image.cx); + this.children.$cy.setValue(this.state.image.cy); + this.children.$r.setValue(this.state.image.r); + this.children.$fx.setValue(this.state.image.fx); + this.children.$fy.setValue(this.state.image.fy); + this.children.$fr.setValue(this.state.image.fr); + this.children.$patternUnits.setValue(this.state.image.patternUnits); + this.children.$patternWidth.setValue(this.state.image.patternWidth); + this.children.$patternHeight.setValue(this.state.image.patternHeight); + this.children.$imageX.setValue(this.state.image.imageX); + this.children.$imageY.setValue(this.state.image.imageY); + this.children.$imageWidth.setValue(this.state.image.imageWidth); + this.children.$imagenHeight.setValue(this.state.image.imageHeight); } - toggleEditingPath(isEditingPath) { - this.$el.toggleClass("editing-path", isEditingPath); + getFieldValue(field) { + return Length.parse(this.getImageFieldValue(this.state.image, field)); } - [POINTERSTART("$pointerRect .rotate-pointer") + MOVE("rotateVertex") + END("rotateEndVertex")](e) { - this.state.moveType = "rotate"; - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.$context.selection.reselect(); - this.verties = clone$1(this.$context.selection.verties); - this.$context.snapManager.clear(); - this.rotateTargetNumber = +e.$dt.attr("data-number"); - this.refreshRotatePointerIcon(); - this.state.dragging = true; - this.state.isRotate = true; - this.initAngle = this.$context.selection.current.angle; + getRectRate(rect2, x, y) { + var { width: width2, height: height2, x: rx, y: ry } = rect2; + if (rx > x) { + x = rx; + } else if (rx + width2 < x) { + x = rx + width2; + } + if (ry > y) { + y = ry; + } else if (ry + height2 < y) { + y = ry + height2; + } + var left2 = Length.makePercent(x - rx, width2); + var top2 = Length.makePercent(y - ry, height2); + return { left: left2, top: top2 }; } - rotateVertex() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const distVector = subtract([], targetMousePoint, this.initMousePoint); - const targetRotatePointer = this.rotateTargetNumber === 4 ? getRotatePointer(this.verties, 34) : this.verties[this.rotateTargetNumber]; - var distAngle = Math.floor(calculateAngleForVec3(targetRotatePointer, this.verties[4], distVector)); - const instance = this.$context.selection.current; - let newAngle = this.initAngle + distAngle; - if (instance) { - if (this.$config.get("bodyEvent").shiftKey) { - newAngle -= newAngle % this.$config.get("fixed.angle"); + [SUBSCRIBE_SELF("changeTabType")](type) { + var _a, _b; + const oldType = (_a = this.state.image) == null ? void 0 : _a.type; + const colorsteps = ((_b = this.state.image) == null ? void 0 : _b.colorsteps) || []; + if (colorsteps.length === 1) { + colorsteps.push(colorsteps[0]); + } + if (oldType === GradientType.STATIC) { + if (colorsteps.length === 0) { + colorsteps.push(colorsteps[0], colorsteps[0]); + } else if (colorsteps.length === 1) { + colorsteps.push(colorsteps[0]); } - instance.angle = round(newAngle % 360, 100); } - this.state.dragging = true; - this.$commands.emit("setAttribute", this.$context.selection.pack("angle")); - this.makeSelectionTool(); - } - rotateEndVertex() { - this.state.dragging = false; - this.state.isRotate = false; - this.$commands.emit("recoverCursor"); - this.verties = null; - this.$commands.executeCommand("setAttribute", "change rotate", this.$context.selection.pack("angle")); + var url = type === "image-resource" ? this.state.image.url : this.state.url; + this.state.image = SVGFill.changeImageType({ + type, + url, + colorsteps, + spreadMethod: this.state.image.spreadMethod + }); + this.refresh(); + this.updateData(); } - refreshRotatePointerIcon() { - this.$commands.emit("refreshCursor", "rotate"); + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + this.state.image.reset({ + [key]: value + }); + this.updateData(); } - refreshPointerIcon(e) { - const dataPointer = e.$dt.data("pointer"); - if (dataPointer) { - const pointer = dataPointer.split(",").map((it) => Number(it)); - const diff = subtract([], pointer, this.state.renderPointerList[0][4]); - const angle = calculateAngle360(diff[0], diff[1]); - let iconAngle = Math.floor(angle); - this.$commands.emit("refreshCursor", "direction", `rotate(${iconAngle} 8 8)`); - } else { - this.$commands.emit("recoverCursor"); + [SUBSCRIBE("changeColorStepOffset")](key, value) { + if (this.currentStep) { + this.currentStep.percent = value.value; + this.state.image.sortColorStep(); + this.refresh(); + this.updateData(); } } - checkPointerIsNotMoved() { - return Boolean(this.state.dragging) === false && this.$config.false("set.move.control.point"); - } - [POINTEROVER("$pointerRect .rotate-pointer") + IF("checkPointerIsNotMoved")](e) { - this.refreshRotatePointerIcon(e); + [CLICK("$back")](e) { + var rect2 = this.refs.$stepList.rect(); + var minX = rect2.x; + var maxX = rect2.right; + var x = e.xy.x; + if (x < minX) + x = minX; + else if (x > maxX) + x = maxX; + var percent = (x - minX) / rect2.width * 100; + this.state.image.insertColorStep(percent); + this.state.image.sortColorStep(); + this.refresh(); + this.updateData(); } - [POINTEROVER("$pointerRect .pointer") + IF("checkPointerIsNotMoved")](e) { - this.refreshPointerIcon(e); + [BIND("$el")]() { + var type = this.state.image.type; + if (type === "url") { + type = "image-resource"; + } + return { + "data-selected-editor": type + }; } - [POINTEROUT("$pointerRect .pointer,.rotate-pointer") + IF("checkPointerIsNotMoved")]() { - this.$commands.emit("recoverCursor"); + [BIND("$stepList")]() { + return { + style: { + "background-image": this.getLinearGradient() + } + }; } - [POINTERSTART("$pointerRect .pointer") + MOVE("moveVertex") + END("moveEndVertex")](e) { - this.refreshPointerIcon(e); - this.state.dragging = true; - const num = +e.$dt.attr("data-number"); - const direction2 = directionType[`${num}`]; - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.state.moveType = direction2; - this.state.moveTarget = num; - this.$context.snapManager.clear(); - this.verties = this.$context.selection.verties; - this.hasRotate = this.$context.selection.current.angle !== 0; - this.cachedCurrentItemMatrix = this.$context.selection.current.matrix; - this.$context.selection.startToCacheChildren(); + [LOAD("$stepList")]() { + var colorsteps = this.state.image.colorsteps || []; + return colorsteps.map((it) => { + var selected = this.$context.selection.isSelectedColorStep(it.id) ? "selected" : ""; + return ` +
+
+ ${Math.floor(it.percent * 10) / 10} +
+
+
`; + }); } - calculateDistance(vertex2, distVector, reverseMatrix) { - const currentVertex = clone(vertex2); - const moveVertex = add$1([], currentVertex, distVector); - const snap = this.$context.snapManager.check([moveVertex], 5 / this.$viewport.scale); - const nextVertex = add$1([], moveVertex, snap.dist); - const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); - const realDist = subtract([], nextResult, currentResult); - return realDist; + removeStep(id) { + this.state.image.removeColorStep(id); + this.refresh(); + this.updateData(); } - calculateRealDist(item, vertexIndex, distVector) { - return this.calculateDistance(item.verties[vertexIndex], distVector, item.absoluteMatrixInverse); + selectStep(id) { + this.state.id = id; + this.$context.selection.selectColorStep(id); + if (this.state.image.colorsteps) { + this.currentStep = this.state.image.colorsteps.find((it) => this.$context.selection.isSelectedColorStep(it.id)); + this.parent.trigger("selectColorStep", this.currentStep.color); + } + this.refresh(); } - moveItem(instance, lastStartVertex, newWidth, newHeight, options2 = {}) { - if (instance) { - let data = { - x: lastStartVertex[0] + (newWidth < 0 ? newWidth : 0), - y: lastStartVertex[1] + (newHeight < 0 ? newHeight : 0), - width: Math.max(Math.abs(newWidth), 1), - height: Math.max(Math.abs(newHeight), 1) - }; - if (instance.isInFlex()) { - delete data.x; - delete data.y; - } else if (instance.isInGrid()) - ; - if (this.hasRotate) - ; - else { - data = objectFloor(data); - data.width = Math.max(data.width, 1); - data.height = Math.max(data.height, 1); - } - instance.reset(__spreadValues(__spreadValues({}, data), options2)); + [KEYUP("$el .step")](e) { + const id = e.$dt.data("id"); + switch (e.code) { + case "Delete": + case "Backspace": + this.removeStep(id); + break; + case "BracketRight": + this.sortToRight(id); + break; + case "BracketLeft": + this.sortToLeft(id); + break; + case "Equal": + this.appendColorStep(id); + break; + case "Minus": + this.prependColorStep(id); + break; } } - moveDirectionVertex(item, newWidth, newHeight, direction2, directionNewVector, options2 = {}) { - const center2 = subtract([], TransformOrigin.scale(item.originalTransformOrigin, newWidth, newHeight), directionNewVector); - const newOffsetInverse = calculateMatrixInverse(fromTranslation([], directionNewVector), fromTranslation([], center2), item.itemMatrix, fromTranslation([], negate([], center2))); - const view = calculateMatrix(item.directionMatrix[direction2], newOffsetInverse); - const lastStartVertex = getTranslation([], view); - this.moveItem(this.$model.get(item.id), lastStartVertex, newWidth, newHeight, options2); + sortToRight(id) { + this.state.image.sortToRight(); + this.refresh(); + this.updateData(); + this.doFocus(id); } - moveBottomRightVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx, realDy] = this.calculateRealDist(item, 2, distVector); - let directionNewVector = fromValues(0, 0, 0); - if (altKey) { - realDx = realDx * 2; - realDy = realDy * 2; - } - if (shiftKey) { - realDy = realDx * item.height / item.width; - } - const newWidth = item.width + realDx; - const newHeight = metaKey ? newWidth : item.height + realDy; - if (altKey) { - directionNewVector = fromValues(realDx / 2, realDy / 2, 0); - } - this.moveDirectionVertex(item, newWidth, newHeight, "to top left", directionNewVector, { - resizingVertical: ResizingMode.FIXED, - resizingHorizontal: ResizingMode.FIXED - }); - this.updateGridArea(item); - } + sortToLeft(id) { + this.state.image.sortToLeft(); + this.refresh(); + this.updateData(); + this.doFocus(id); } - moveTopRightVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx, realDy] = this.calculateRealDist(item, 1, distVector); - if (altKey) { - realDx = realDx * 2; - realDy = realDy * 2; - } - if (shiftKey) { - realDy = -(realDx * item.height / item.width); - } - const newWidth = item.width + realDx; - const newHeight = metaKey ? newWidth : item.height - realDy; - let directionNewVector = fromValues(0, newHeight, 0); - if (altKey) { - directionNewVector = fromValues(realDx / 2, newHeight + realDy / 2, 0); + appendColorStep(id) { + const currentIndex = this.state.image.colorsteps.findIndex((it) => it.id === id); + const nextIndex = currentIndex + 1; + const currentColorStep = this.state.image.colorsteps[currentIndex]; + const nextColorStep = this.state.image.colorsteps[nextIndex]; + if (!nextColorStep) { + if (currentColorStep.percent !== 100) { + this.state.image.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); } - this.moveDirectionVertex(item, newWidth, newHeight, "to bottom left", directionNewVector, { - resizingVertical: ResizingMode.FIXED, - resizingHorizontal: ResizingMode.FIXED - }); - this.updateGridArea(item); + } else { + this.state.image.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); } + this.refresh(); + this.updateData(); + this.doFocus(id); } - moveTopLeftVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx, realDy] = this.calculateRealDist(item, 0, distVector); - if (altKey) { - realDx = realDx * 2; - realDy = realDy * 2; - } - if (shiftKey) { - realDy = realDx * item.height / item.width; - } - const newWidth = item.width - realDx; - const newHeight = metaKey ? newWidth : item.height - realDy; - let directionNewVector = fromValues(newWidth, newHeight, 0); - if (altKey) { - directionNewVector = fromValues(newWidth + realDx / 2, newHeight + realDy / 2, 0); - } - this.moveDirectionVertex(item, newWidth, newHeight, "to bottom right", directionNewVector, { - resizingHorizontal: ResizingMode.FIXED, - resizingVertical: ResizingMode.FIXED - }); - this.updateGridArea(item); - } + doFocus(id) { + this.nextTick(() => { + this.refs.$stepList.$(".step[data-id='" + id + "']").focus(); + }, 100); } - moveTopVertex(distVector) { - const { altKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [, realDy] = this.calculateRealDist(item, 0, distVector); - if (altKey) { - realDy = realDy * 2; - } - const newWidth = item.width; - const newHeight = item.height - realDy; - let directionNewVector = fromValues(newWidth / 2, newHeight, 0); - if (altKey) { - directionNewVector = fromValues(newWidth / 2, newHeight + realDy / 2, 0); + prependColorStep(id) { + const currentIndex = this.state.image.colorsteps.findIndex((it) => it.id === id); + const prevIndex = currentIndex - 1; + const currentColorStep = this.state.image.colorsteps[currentIndex]; + const prevColorStep = this.state.image.colorsteps[prevIndex]; + if (!prevColorStep) { + if (currentColorStep.percent !== 0) { + this.state.image.insertColorStep(currentColorStep.percent); } - this.moveDirectionVertex(item, newWidth, newHeight, "to bottom", directionNewVector, { - resizingVertical: ResizingMode.FIXED - }); - this.updateGridArea(item); + } else { + this.state.image.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); } - } - moveBottomVertex(distVector) { - const { altKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [, realDy] = this.calculateRealDist(item, 3, distVector); - if (altKey) { - realDy = realDy * 2; - } - const newWidth = item.width; - const newHeight = item.height + realDy; - let directionNewVector = fromValues(newWidth / 2, 0, 0); - if (altKey) { - directionNewVector = fromValues(newWidth / 2, realDy / 2, 0); - } - this.moveDirectionVertex(item, newWidth, newHeight, "to top", directionNewVector, { - resizingVertical: ResizingMode.FIXED - }); - this.updateGridArea(item); + this.refresh(); + this.updateData(); + this.doFocus(id); + } + [POINTERSTART("$stepList .step") + MOVE() + END()](e) { + var id = e.$dt.attr("data-id"); + if (e.altKey) { + this.removeStep(id); + return false; + } else { + e.$dt.focus(); + this.isSelectedColorStep = this.$context.selection.isSelectedColorStep(id); + this.selectStep(id); + this.startXY = e.xy; + this.cachedStepListRect = this.refs.$stepList.rect(); } } - moveRightVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx] = this.calculateRealDist(item, 1, distVector); - if (altKey) { - realDx = realDx * 2; - } - const newWidth = item.width + realDx; - let newHeight = item.height; - if (metaKey) { - newHeight = newWidth; - } else if (shiftKey) { - newHeight = item.height * (1 + realDx / item.width); - } - let directionNewVector = fromValues(0, newHeight / 2, 0); - if (altKey) { - directionNewVector = fromValues(realDx / 2, newHeight / 2, 0); - } - this.moveDirectionVertex(item, newWidth, newHeight, "to left", directionNewVector, { - resizingHorizontal: ResizingMode.FIXED - }); - this.updateGridArea(item); + getStepListRect() { + return this.cachedStepListRect; + } + move(dx) { + var rect2 = this.getStepListRect(); + var minX = rect2.x; + var maxX = rect2.right; + var x = this.startXY.x + dx; + if (x < minX) + x = minX; + else if (x > maxX) + x = maxX; + var percent = (x - minX) / rect2.width * 100; + if (this.$config.get("bodyEvent").shiftKey) { + percent = Math.floor(percent); } + this.currentStep.percent = percent; + this.state.image.sortColorStep(); + this.refresh(); + this.updateData(); } - moveLeftVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx] = this.calculateRealDist(item, 0, distVector); - if (altKey) { - realDx = realDx * 2; - } - const newWidth = item.width - realDx; - let newHeight = item.height; - if (metaKey) { - newHeight = newWidth; - } else if (shiftKey) { - newHeight = item.height * (1 - realDx / item.width); - } - let directionNewVector = fromValues(newWidth, newHeight / 2, 0); - if (altKey) { - directionNewVector = fromValues(newWidth + realDx / 2, newHeight / 2, 0); + end(dx, dy) { + if (dx === 0 && dy === 0) { + if (this.isSelectedColorStep) { + if (this.currentStep) { + this.currentStep.cut = !this.currentStep.cut; + this.refresh(); + this.updateData(); + } } - this.moveDirectionVertex(item, newWidth, newHeight, "to right", directionNewVector, { - resizingHorizontal: ResizingMode.FIXED - }); - this.updateGridArea(item); } + this.doFocus(this.state.id); } - moveBottomLeftVertex(distVector) { - const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); - const item = this.cachedCurrentItemMatrix; - if (item) { - let [realDx, realDy] = this.calculateRealDist(item, 3, distVector); - if (altKey) { - realDx = realDx * 2; - realDy = realDy * 2; - } - if (shiftKey) { - realDy = -(realDx * item.height / item.width); - } - const newWidth = item.width - realDx; - const newHeight = metaKey ? newWidth : item.height + realDy; - let directionNewVector = fromValues(newWidth, 0, 0); - if (altKey) { - directionNewVector = fromValues(newWidth + realDx / 2, realDy / 2, 0); + getLinearGradient() { + var { image: image2 } = this.state; + return `linear-gradient(to right, ${Gradient.toCSSColorString(image2.colorsteps)})`; + } + [SUBSCRIBE_SELF("setColorStepColor")](color2) { + if (this.state.image.type === "static-gradient") { + this.state.image.setColor(color2); + this.refresh(); + this.updateData(); + } else { + if (this.currentStep) { + this.currentStep.color = color2; + this.refresh(); + this.updateData(); } - this.moveDirectionVertex(item, newWidth, newHeight, "to top right", directionNewVector, { - resizingVertical: ResizingMode.FIXED, - resizingHorizontal: ResizingMode.FIXED - }); - this.updateGridArea(item); } } - moveVertex() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const distVector = floor([], subtract([], targetMousePoint, this.initMousePoint)); - if (this.state.moveType === "to top left") { - this.moveTopLeftVertex(distVector); - } else if (this.state.moveType === "to top") { - this.moveTopVertex(distVector); - } else if (this.state.moveType === "to right") { - this.moveRightVertex(distVector); - } else if (this.state.moveType === "to bottom") { - this.moveBottomVertex(distVector); - } else if (this.state.moveType === "to left") { - this.moveLeftVertex(distVector); - } else if (this.state.moveType === "to top right") { - this.moveTopRightVertex(distVector); - } else if (this.state.moveType === "to bottom right") { - this.moveBottomRightVertex(distVector); - } else if (this.state.moveType === "to bottom left") { - this.moveBottomLeftVertex(distVector); - } - this.$context.selection.recoverChildren(); - const current = this.$context.selection.current; - if (current.isInGrid()) { - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical", "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end")); - } else { - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical")); + [SUBSCRIBE("setImageUrl")](url, datauri) { + if (this.state.image) { + this.state.url = url; + this.state.image.reset({ url, datauri }); + this.refresh(); + this.updateData(); } - this.state.dragging = true; - this.makeSelectionTool(); } - updateGridArea() { - return GridLayoutEngine.updateGridArea(this.$context.selection.current, this.$context.selection.gridInformation, this.$context.viewport.scale); + updateData(data = {}) { + this.setState(data, false); + this.parent.trigger(this.props.onchange, this.state.image.toString()); } - moveEndVertex() { - this.state.dragging = false; - this.$commands.emit("recoverCursor"); - this.$context.selection.reselect(); - this.nextTick(() => { - this.$context.selection.recoverChildren(); - if (this.$context.selection.current.isInGrid()) { - this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical", "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end")); - } else { - this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical")); - } - this.$commands.emit("recoverBooleanPath"); +} +var GradientPickerPopup$1 = ""; +class GradientPickerPopup extends BasePopup { + getTitle() { + var _a; + return createComponent("SelectEditor", { + ref: "$select", + value: ((_a = this.state.image) == null ? void 0 : _a.type) || GradientType.STATIC, + onchange: "changeTabType", + options: [ + { + value: GradientType.STATIC, + text: "Static" + }, + { + value: GradientType.LINEAR, + text: "Linear Gradient" + }, + { + value: GradientType.RADIAL, + text: "Radial Gradient" + }, + { + value: GradientType.CONIC, + text: "Conic Gradient" + }, + { + value: GradientType.REPEATING_LINEAR, + text: "Repeating Linear Gradient" + }, + { + value: GradientType.REPEATING_RADIAL, + text: "Repeating Radial Gradient" + }, + { + value: GradientType.REPEATING_CONIC, + text: "Repeating Conic Gradient" + }, + { + value: GradientType.URL, + text: "Image" + } + ] }); } - show() { - this.$el.show(); - this.state.show = true; + initialize() { + super.initialize(); + this.selectedTab = "static-gradient"; } - hide() { - this.$el.hide(); - this.state.show = false; + getClassName() { + return "fill-picker-popup"; } - initSelectionTool() { - if (this.$el.isShow() && this.$context.selection.isOne === false) { - this.hide(); - } else if (this.$el.isHide() && this.$context.selection.isOne) { - this.show(); + getBody() { + var _a, _b; + return ` +
+
+
+
+
+
+ ${createComponent("EmbedColorPicker", { + ref: "$color", + onchange: "changeColor" + })} +
+
+ ${createComponent("ImageSelectEditor", { + ref: "$image", + key: "image", + value: (_b = this.state.image) == null ? void 0 : _b.url, + onchange: "changeImageUrl" + })} + ${createComponent("ImageAssetPicker", { + ref: "$asset", + onchange: "changeImageUrl" + })} +
+
+
+ + `; + } + getColorString() { + var value = ""; + if (this.state.image instanceof Gradient) { + value = this.state.image.getColorString(); } - this.makeSelectionTool(); + return value; } - makeSelectionTool() { - this.renderPointers(); + getCurrentColor() { + return this.state.image.colorsteps[this.state.selectColorStepIndex || 0].color; } - getRateDistance(startVetex, endVertex, dist$1 = 0) { - return lerp$1([], startVetex, endVertex, (dist(startVetex, endVertex) + dist$1) / dist(startVetex, endVertex)); + [BIND("$body")]() { + var _a; + return { + "data-selected-editor": (_a = this.state.image) == null ? void 0 : _a.type + }; } - renderPointers() { - if (this.$context.selection.isEmpty || this.$config.true("set.move.control.point")) { - this.refs.$pointerRect.empty(); - return; - } - const verties = this.$context.selection.verties; - if (dist(verties[0], verties[1]) === 0) { - return; + [LOAD("$gradientEditor") + DOMDIFF]() { + var _a; + if (((_a = this.state.image) == null ? void 0 : _a.type) === GradientType.URL) { + return ""; } - const screenVerties = this.$viewport.applyVerties(verties).map((it) => { - return round$2([], it); + return createComponent("GradientEditor", { + ref: "$g", + value: `${this.state.image ? this.state.image.toString() : ""}`, + index: this.state.selectColorStepIndex, + onchange: "changeGradientEditor" }); - this.state.renderPointerList = [ - screenVerties, - [ - this.getRateDistance(screenVerties[4], screenVerties[0], 20), - this.getRateDistance(screenVerties[4], screenVerties[1], 20), - this.getRateDistance(screenVerties[4], screenVerties[2], 20), - this.getRateDistance(screenVerties[4], screenVerties[3], 20) - ] - ]; - const pointers = this.createRenderPointers(...this.state.renderPointerList); - if (pointers) { - const { line: line2, parentRect, point: point2, size: size2, visiblePath } = pointers; - this.refs.$pointerRect.updateDiff(line2 + parentRect + point2 + size2 + visiblePath); - } } - createPointer(pointer, number, rotate2) { - return `
`; + [SUBSCRIBE("updateGradientEditor")](data, targetColorStep) { + this.state.image = isString(data) ? BackgroundImage.parseImage(data) : data; + this.state.selectColorStepIndex = this.state.image.colorsteps.findIndex((it) => it.color === targetColorStep.color && it.percent === targetColorStep.percent); + this.children.$color.setValue(targetColorStep.color); + this.refresh(); } - createPointerSide(pointer, number, rotate2, width2, height2) { - return `
`; + [SUBSCRIBE_SELF("changeGradientEditor")](data) { + this.state.image = isString(data) ? BackgroundImage.parseImage(data) : data; + this.updateTitle(); + this.updateData(); } - createRotatePointer(pointer, number) { - if (pointer.length === 0) - return ""; - if (number < 4) { - return `
`; - } - return `
`; + [SUBSCRIBE_SELF("changeTabType")](key, type) { + this.children.$g.trigger("changeTabType", type); + this.refs.$body.attr("data-selected-editor", type); } - createPointerRect(pointers, rotatePointer = void 0) { - if (pointers.length === 0) - return ""; - const current = this.$context.selection.current; - const isArtBoard = current && current.is("artboard"); - let line2 = ""; - if (!isArtBoard && rotatePointer) { - const centerPointer = lerp$1([], pointers[0], pointers[1], 0.5); - line2 += ` - M ${centerPointer[0]},${centerPointer[1]} - L ${rotatePointer[0]},${rotatePointer[1]} - `; + [SUBSCRIBE_SELF("changeColor")](color2) { + this.children.$g.trigger("setColorStepColor", color2); + } + [SUBSCRIBE_SELF("changeImageUrl")](key, url) { + if (this.state.image) { + this.state.image.reset({ + url + }); + this.trigger("changeGradientEditor", this.state.image); } - return ` - `; } - createParentRect(pointers = []) { - if (pointers.length === 0) - return ""; - return ` - - - `; + updateTitle() { + this.children.$select.setValue(this.state.image.type); } - createSize(pointers) { - const top2 = lerp$1([], pointers[0], pointers[1], 0.5); - const right2 = lerp$1([], pointers[1], pointers[2], 0.5); - const bottom2 = lerp$1([], pointers[2], pointers[3], 0.5); - const left2 = lerp$1([], pointers[3], pointers[0], 0.5); - const list2 = [ - { start: top2, end: bottom2 }, - { start: right2, end: left2 }, - { start: bottom2, end: top2 }, - { start: left2, end: right2 } - ].map((it, index2) => { - return { index: index2, data: it }; + [SUBSCRIBE("showGradientPickerPopup")](data, params, rect2) { + data.changeEvent = data.changeEvent || "changeFillPopup"; + data.image = data.gradient; + data.params = params; + this.showByRect(this.makeRect(248, 560, rect2)); + this.setState(data); + this.updateTitle(); + this.emit("showGradientEditorView", { + index: data.index }); - list2.sort((a, b) => { - return a.data.start[1] > b.data.start[1] ? -1 : 1; + } + [SUBSCRIBE("hideGradientickerPopup")]() { + this.hide(); + this.emit("hideGradientEditorView"); + } + onClose() { + this.emit("hideGradientEditorView"); + } + [SUBSCRIBE("selectColorStep")](color2) { + this.children.$color.setValue(color2); + } + [SUBSCRIBE("changeColorStep")](data = {}) { + this.state.image.reset(__spreadValues({}, data)); + this.updateData(); + } + load(...args2) { + if (this.$el.isShow()) { + super.load(...args2); + } + } + getValue() { + return `${this.state.image}`; + } + updateData() { + this.state.instance.trigger(this.state.changeEvent, this.getValue(), this.state.params); + } +} +class FillPickerPopup extends BasePopup { + getTitle() { + var _a; + return createComponent("SelectEditor", { + ref: "$select", + value: ((_a = this.state.image) == null ? void 0 : _a.type) || GradientType.STATIC, + onchange: "changeTabType", + options: [ + { + value: GradientType.STATIC, + text: "Static" + }, + { + value: GradientType.LINEAR, + text: "Linear Gradient" + }, + { + value: GradientType.RADIAL, + text: "Radial Gradient" + }, + { + value: GradientType.URL, + text: "Image" + } + ] }); - const item = list2[0]; - const newPointer = lerp$1([], item.data.end, item.data.start, 1 + 16 / dist(item.data.start, item.data.end)); - const width2 = this.$context.selection.current.width; - const height2 = this.$context.selection.current.height; - const diff = subtract([], item.data.start, item.data.end); - const angle = calculateAngle360(diff[0], diff[1]) + 90; - const widthPx = round(width2, 100); - const heightPx = round(height2, 100); - let text2 = widthPx === heightPx ? `WH: ${widthPx}` : `${round(width2, 100)} x ${round(height2, 100)}`; - if (this.state.isRotate) { - text2 = `${round(this.$context.selection.current.angle, 100)}\xB0`; + } + initState() { + return { + image: SVGStaticGradient.create() + }; + } + initialize() { + super.initialize(); + this.selectedTab = "static-gradient"; + } + getClassName() { + return "fill-picker-popup"; + } + getBody() { + var _a, _b; + return ` +
+
+
+
+
+
+ ${createComponent("EmbedColorPicker", { + ref: "$color", + onchange: "changeColor" + })} +
+
+ ${createComponent("ImageSelectEditor", { + ref: "$image", + key: "image", + value: (_b = this.state.image) == null ? void 0 : _b.url, + onchange: "changeImageUrl" + })} + ${createComponent("ImageAssetPicker", { + ref: "$asset", + onchange: "changeImageUrl" + })} +
+
+
+ + `; + } + [BIND("$body")]() { + var _a; + return { + "data-selected-editor": (_a = this.state.image) == null ? void 0 : _a.type + }; + } + getColorString() { + var value = ""; + if (this.state.image instanceof Gradient) { + value = this.state.image.getColorString(); } - return `
${text2}
`; + return value; } - createVisiblePath() { - const current = this.$context.selection.current; - if (!current) - return ""; - if (!current.isBooleanItem) { + getCurrentColor() { + return this.state.image.colorsteps[this.state.selectColorStepIndex || 0].color; + } + [LOAD("$gradientEditor")]() { + var _a; + if (((_a = this.state.image) == null ? void 0 : _a.type) === GradientType.URL) { return ""; } - const newPath = current.absolutePath(); - newPath.transformMat4(this.$viewport.matrix); - return ` - - - - `; - } - removeNaN(value) { - return value.replace(/NaN/g, "0"); + return createComponent("FillEditor", { + ref: "$g", + value: `${this.state.image}`, + index: this.state.selectColorStepIndex, + onchange: "changeFillEditor" + }); } - createRenderPointers(pointers, selectionPointers) { - const current = this.$context.selection.current; - if (current && current.is("text")) { - if (current.width === 0 && current.height === 0) { - return; - } + [SUBSCRIBE("updateFillEditor")](data, targetColorStep = void 0) { + this.state.image = isString(data) ? SVGFill.parseImage(data) : data; + if (targetColorStep) { + this.state.selectColorStepIndex = this.state.image.colorsteps.findIndex((it) => it.color === targetColorStep.color && it.percent === targetColorStep.percent); + this.children.$color.setValue(targetColorStep.color); } - const rotate2 = Length.deg(current.nestedAngle).round(1e3); - const dist$1 = dist(pointers[0], pointers[2]); - const width2 = dist(pointers[0], pointers[1]); - const height2 = dist(pointers[0], pointers[3]); - return { - line: this.createPointerRect(pointers), - size: this.createSize(pointers), - parentRect: "", - visiblePath: this.createVisiblePath(), - point: [ - this.createRotatePointer(selectionPointers[0], 0), - this.createRotatePointer(selectionPointers[1], 1), - this.createRotatePointer(selectionPointers[2], 2), - this.createRotatePointer(selectionPointers[3], 3), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[0], pointers[1], 0.5), 11, rotate2, width2, 5), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[1], pointers[2], 0.5), 12, rotate2, 5, height2), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[2], pointers[3], 0.5), 13, rotate2, width2, 5), - dist$1 < 20 ? void 0 : this.createPointerSide(lerp$1([], pointers[3], pointers[0], 0.5), 14, rotate2, 5, height2), - this.createPointer(pointers[0], 1, rotate2), - this.createPointer(pointers[1], 2, rotate2), - this.createPointer(pointers[2], 3, rotate2), - this.createPointer(pointers[3], 4, rotate2), - this.createPointer(pointers[4], 5, rotate2) - ].join("") - }; + this.refresh(); } - checkShow() { - if (this.$modeView.isCurrentMode(ViewModeType.CanvasView) === false) { - return false; + [SUBSCRIBE_SELF("changeFillEditor")](data) { + this.state.image = isString(data) ? SVGFill.parseImage(data) : data; + this.updateTitle(); + this.updateData(); + } + [SUBSCRIBE_SELF("changeTabType")](key, type) { + this.children.$g.trigger("changeTabType", type); + this.refs.$body.attr("data-selected-editor", type); + } + [SUBSCRIBE_SELF("changeColor")](color2) { + this.children.$g.trigger("setColorStepColor", color2); + } + [SUBSCRIBE_SELF("changeImageUrl")](url) { + if (this.state.image) { + this.state.image.reset({ + url + }); + this.trigger("changeFillEditor", this.state.image); } - if (this.state.show && this.$context.selection.isOne) { - return true; + } + updateTitle() { + this.children.$select.setValue(this.state.image.type); + } + [SUBSCRIBE("showFillPickerPopup")](data, params, rect2) { + data.changeEvent = data.changeEvent || "changeFillPopup"; + data.params = params; + this.showByRect(this.makeRect(248, 560, rect2)); + this.setState(data); + this.updateTitle(); + if (data.image.isGradient()) { + this.trigger("selectColorStep", data.image.colorsteps[0].color); } - return false; + this.emit("showFillEditorView", { + key: data.key + }); } - [SUBSCRIBE("hideSelectionToolView")]() { + [SUBSCRIBE("hideFillPickerPopup")]() { this.hide(); + this.emit("hideFillEditorView"); } -} -async function selectionToolView(editor) { - editor.registerUI("canvas.view", { - GhostToolView, - SelectionToolView, - GroupSelectionToolView - }, CanvasViewToolLevel.SELECTION_TOOL); -} -var SelectorPopup$1 = ""; -class SelectorPopup extends BasePopup { - getTitle() { - return this.$i18n("selector.popup.title"); + onClose() { + this.emit("hideFillEditorView"); + } + [SUBSCRIBE("selectColorStep")](color2) { + this.children.$color.setValue(color2); + } + [SUBSCRIBE("changeColorStep")](data = {}) { + this.state.image.reset(__spreadValues({}, data)); + this.updateData(); + } + load(...args2) { + if (this.$el.isShow()) { + super.load(...args2); + } } + getValue() { + return `${this.state.image}`; + } + updateData() { + this.state.instance.trigger(this.state.changeEvent, this.getValue(), this.state.params); + } +} +var FillSingleEditor$1 = ""; +class FillSingleEditor extends EditorElement { initState() { return { - selector: "", - properties: [] + index: this.props.index, + label: this.props.label, + simple: this.props.simple === "true" ? true : false, + image: SVGFill.parseImage(this.props.value || this.props.image || "transparent") }; } - updateData(opt) { - this.setState(opt, false); - this.emit("changeSelectorPopup", this.state); - } - getBody() { - return ` -
-
- ${this.templateForSelector()} - ${this.templateForProperty()} -
-
`; - } - templateForProperty() { - return createComponent("CSSPropertyEditor", { - ref: "$propertyEditor", - onchange: "changePropertyEditor" - }); + get fillId() { + return this.id + "fill"; } - templateForSelector() { - return ` -
- -
- -
-
- `; + updateData(opt = {}) { + this.setState(opt, false); + this.modifyValue(opt); } - [INPUT("$selector")](e) { - if (this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/)) { - this.updateData({ selector: this.refs.$selector.value }); - } else { - e.preventDefault(); - e.stopPropagation(); - return false; - } + modifyValue() { + this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.state.index); } - refresh() { - super.refresh(); - this.refs.$selector.val(this.state.selector); - this.children.$propertyEditor.trigger("showCSSPropertyEditor", this.state.properties); + getValue() { + return this.state.image.toString(); } - [SUBSCRIBE("changePropertyEditor")](properties) { - this.updateData({ - properties + setValue(value) { + this.setState({ + image: SVGFill.parseImage(value) }); } - [SUBSCRIBE("showSelectorPopup")](data) { - this.setState(data); - this.refresh(); - this.show(250); + [BIND("$fillView")]() { + var image2 = this.state.image; + if (!image2) + return { innerHTML: "" }; + return { + innerHTML: image2.toSVGString(this.fillId, { + width: 20, + height: 20, + sizeType: "percent" + }) + }; } -} -var SelectorProperty$1 = ""; -const selectorList = [ - "", - ":hover", - ":active", - ":before", - ":after", - ":first-child", - ":last-child", - ":link", - ":active", - ":focus" -].map((value) => ({ value })); -class SelectorProperty extends BaseProperty { - getTitle() { - return this.$i18n("selector.property.title"); + [BIND("$fillColor")]() { + var image2 = this.state.image; + if (!image2) + return { fill: "transparent" }; + return { + fill: image2.toFillValue(this.fillId) + }; } - getBody() { - return `
`; + [BIND("$colors")]() { + var image2 = this.state.image; + if (!image2) + return { fill: "transparent" }; + var colors2 = image2.type != "url" ? `${image2.colorsteps[0].color}` : "transparent"; + if ([GradientType.LINEAR, GradientType.RADIAL].includes(image2.type)) { + colors2 = image2.colorsteps.map((it) => { + return ``; + }).join(""); + } + return { + innerHTML: `
${colors2}
` + }; } - getTools() { + template() { + var { label, simple } = this.state; + var hasLabel = label ? "has-label" : ""; return ` -
- ${createComponent("SelectEditor", { - ref: "$select", - key: "selector", - "none-value": "selector", - options: selectorList - })} -
- - `; +
+ ${label ? `` : ""} +
+
+
+ + + + + +
+
+
+
+
+ `; } - makeSelectorTemplate(selector2, index2) { - index2 = index2.toString(); - return ` -
-
-
- ${selector2.selector || `<${this.$i18n("selector.property.none")}>`} -
-
- -
-
-
- `; + [CLICK()]() { + this.viewGradientPopup(); } - [CLICK("$selectorList .selector-item .name")](e) { - var index2 = +e.$dt.closest("selector-item").attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - this.viewSelectorPicker(index2); + viewGradientPopup() { + this.emit("showFillPickerPopup", { + instance: this, + key: this.props.key, + changeEvent: "changeFillSingle", + image: this.state.image + }, null, this.$el.rect()); } - [CLICK("$selectorList .selector-item .del") + PREVENT + STOP](e) { - var removeIndex = e.$dt.attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - current.removeSelector(removeIndex); - this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); + [SUBSCRIBE("changeFillSingle")](image2) { + this.updateData({ image: SVGFill.parseImage(image2) }); this.refresh(); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShowIsNot([ - "project", - "svg-path", - "svg-brush", - "svg-textpath", - "svg-text" - ]); - } - [LOAD("$selectorList")]() { - var current = this.$context.selection.current; - if (!current) - return ""; - var selectors = current.selector ? Selector.parseStyle(current) : current.selectors; - return (selectors || []).map((selector2, index2) => { - return this.makeSelectorTemplate(selector2, index2); - }); +} +var GradientSingleEditor$1 = ""; +class GradientSingleEditor extends EditorElement { + initState() { + return { + index: this.props.index, + image: this.props.image, + color: "rgba(0, 0, 0, 1)" + }; } - [DRAGSTART("$selectorList .selector-item .title")](e) { - this.startIndex = +e.$dt.attr("data-index"); + updateData(opt = {}) { + this.setState(opt, false); + this.modifyValue(opt); } - [DRAGOVER("$selectorList .selector-item") + PREVENT]() { + modifyValue(value) { + this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); } - [DROP("$selectorList .selector-item") + PREVENT](e) { - var targetIndex = +e.$dt.attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - current.sortSelector(this.startIndex, targetIndex); - this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); - this.refresh(); + setValue(obj2) { + this.setState(__spreadValues({}, obj2)); } - [CLICK("$add")]() { - var current = this.$context.selection.current; - if (current) { - current.createSelector({ - selector: this.children.$select.getValue() - }); - this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); + [BIND("$miniView")]() { + const project2 = this.$context.selection.currentProject; + let image2; + if (this.state.image.type === GradientType.URL) { + const imageUrl = project2.getImageValueById(this.state.image.url); + image2 = this.state.image.toString(imageUrl); + } else { + image2 = this.state.image.toCSSString(); } - this.refresh(); + return { + style: { + "background-image": image2 + } + }; } - viewSelectorPicker(index2) { - if (typeof this.selectedIndex === "number") { - this.selectItem(this.selectedIndex, false); - } - this.selectedIndex = +index2; - this.selectItem(this.selectedIndex, true); - this.current = this.$context.selection.current; - if (!this.current) - return; - this.currentSelector = this.current.selectors[this.selectedIndex]; - this.viewSelectorPropertyPopup(); + template() { + return ` +
+
+
+
+
+
+
+ `; } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.getRef("$selectorIndex", selectedIndex).addClass("selected"); - } else { - this.getRef("$selectorIndex", selectedIndex).removeClass("selected"); - } - if (this.current) { - this.current.selectors.forEach((it, index2) => { - it.selected = index2 === selectedIndex; - }); + [CLICK("$preview")]() { + this.viewGradientPopup(); + } + viewGradientPopup() { + this.emit("showGradientPickerPopup", { + instance: this, + changeEvent: "changeGradientSingle", + index: this.state.index, + gradient: this.state.image + }, null, this.$el.rect()); + } + [SUBSCRIBE("changeGradientSingle")](image2) { + var _a; + image2 = BackgroundImage.parseImage(image2); + const currentImage = (_a = this.$context.selection.current.getBackgroundImage(this.state.index)) == null ? void 0 : _a.image; + switch (currentImage.type) { + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + image2.reset({ + radialPosition: currentImage.radialPosition || ["50%", "50%"], + radialType: currentImage.radialType || RadialGradientType.CIRCLE + }); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + image2.reset({ + angle: currentImage.angle || 0, + radialPosition: currentImage.radialPosition || ["50%", "50%"] + }); + break; + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + case GradientType.STATIC: + image2.reset({ + angle: currentImage.angle || 0 + }); + break; } + this.updateData({ image: image2 }); + this.refresh(); } - viewSelectorPropertyPopup(position2) { - this.current = this.$context.selection.current; - if (!this.current) - return; - this.currentSelector = this.current.selectors[this.selectedIndex]; - const back = this.currentSelector; - const selector2 = back.selector; - const properties = back.properties; - this.emit("showSelectorPopup", { - position: position2, - selector: selector2, - properties - }); +} +function gradient(editor) { + editor.registerElement({ + FillSingleEditor, + FillEditor, + GradientSingleEditor + }); + editor.registerAlias({ + "fill-single": "FillSingleEditor", + fill: "FillEditor", + "gradient-single": "GradientSingleEditor" + }); + editor.registerUI("popup", { + FillPickerPopup, + GradientPickerPopup + }); +} +var GradientEditorView$1 = ""; +var radialTypeList = [ + "circle", + "circle farthest-corner", + "circle closest-side", + "circle closest-corner", + "circle farthest-side", + "ellipse", + "ellipse farthest-corner", + "ellipse closest-side", + "ellipse closest-corner", + "ellipse farthest-side" +]; +var repeatTypeList = [ + "no-repeat", + "repeat", + "repeat-x", + "repeat-y", + "space", + "round" +]; +const TOOL_SIZE = 20; +class GradientBaseEditor extends EditorElement { + initializeData() { + const value = this.$context.selection.current.backgroundImage; + const cssValue = STRING_TO_CSS(value); + this.state.backgroundImages = BackgroundImage.parseStyle(cssValue); + this.state.backImages = BackgroundImage.parseStyle(cssValue); + const current = this.$context.selection.current; + this.state.gradient = this.state.backImages[this.state.index]; + this.state.contentBox = current.contentBox; + this.state.backgroundImageMatrix = current.createBackgroundImageMatrix(this.state.index); } - [SUBSCRIBE("changeSelectorPopup")](data) { - this.current = this.$context.selection.current; - if (!this.current) - return; - this.currentselector = this.current.selectors[this.selectedIndex]; - if (this.currentSelector) { - this.currentSelector.reset(data); - } - this.refresh(); - this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); + updateData() { + var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + backgroundImage: value + })); } } -function selector(editor) { - editor.registerUI("inspector.tab.transition", { - SelectorProperty - }); - editor.registerUI("popup", { - SelectorPopup - }); -} -var SVGFilterAssetsProperty$1 = ""; -class SVGFilterAssetsProperty extends BaseProperty { - getTitle() { - return this.$i18n("svgfilter.asset.property.title"); - } - initState() { - return { - mode: "grid" - }; - } - getClassName() { - return "elf--svgfilter-assets-property"; - } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.show(); +class GradientTimingStepEditor extends GradientBaseEditor { + [POINTERSTART("$el .step-point") + MOVE("moveStepPoint") + END("moveEndStepPoint")](e) { + this.$el.toggleClass("dragging", true); + this.initializeData(); + const colorStepIndex = +e.$dt.data("colorstep-index"); + this.localColorStep = this.state.backgroundImages[this.state.index].image.colorsteps[colorStepIndex]; + this.localColorStepTimingCount = this.localColorStep.timing.count; + this.localColorCubicBezierTimingCount = this.localColorStep.timingCount; } - getBody() { - return ` -
-
-
- `; + moveStepPoint(dx, dy) { + const dist$1 = (dx < 0 ? -1 : 1) * Math.ceil(dist([0, 0, 0], [dx, dy, 0]) / 10); + switch (this.localColorStep.timing.name) { + case TimingFunction.LINEAR: + break; + case TimingFunction.STEPS: + this.localColorStep.timing.count = Math.max(this.localColorStepTimingCount + dist$1, 1); + break; + default: + this.localColorStep.timingCount = Math.max(this.localColorCubicBezierTimingCount + dist$1, 1); + break; + } + this.updateData(); } - [LOAD("$svgfilterList")]() { - var current = this.$context.selection.currentProject || { svgfilters: [] }; - var svgfilters = current.svgfilters; - var results = svgfilters.map((svgfilter, index2) => { - var filters = svgfilter.filters.map((filter2) => { - return SVGFilter.parse(filter2); - }); - return ` -
-
- - - ${filters.join("")} - - -
-
-
-
- -
-
-
- - -
-
- `; - }); - results.push(`
`); - return results; + makeTimingString(timing) { + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.EASE: + case TimingFunction.EASE_IN: + case TimingFunction.EASE_OUT: + case TimingFunction.EASE_IN_OUT: + return `${timing.name}`; + default: + return `cubic-bezier(${timing.x1}, ${timing.y1}, ${timing.x2}, ${timing.y2})`; + } } - executeSVGFilter(callback, isRefresh = true, isEmit = true) { - var project2 = this.$context.selection.currentProject; - if (project2) { - callback && callback(project2); - if (isRefresh) - this.refresh(); - if (isEmit) - this.emit("refreshSVGFilterAssets"); - } else { - window.alert("Please select a project."); + moveEndStepPoint(dx, dy) { + if (dx === 0 && dy === 0) { + const { timing } = this.localColorStep; + switch (timing.name) { + case TimingFunction.STEPS: + this.localColorStep.timing.direction = this.localColorStep.timing.direction === "start" ? "end" : "start"; + break; + case TimingFunction.LINEAR: + break; + case TimingFunction.PATH: + this.emit("showComponentPopup", { + title: "Path Editor", + width: 400, + inspector: [ + { + key: "path", + editor: "path", + editorOptions: { + height: 160 + }, + defaultValue: timing.d + } + ], + changeEvent: (key, value) => { + this.localColorStep.timing = parseOneValue(`path(${value})`).parsed; + this.updateData(); + } + }); + break; + default: + this.emit("showComponentPopup", { + title: "Cubic Bezier", + width: 220, + inspector: [ + { + key: "timing", + editor: "cubic-bezier", + editorOptions: { + isAnimating: false + }, + defaultValue: this.makeTimingString(timing) + } + ], + changeEvent: (key, value) => { + this.localColorStep.timing = parseOneValue(value).parsed; + this.updateData(); + } + }); + this.$el.toggleClass("dragging", false); + return; + } } + this.updateData(); + this.$el.toggleClass("dragging", false); } - [CLICK("$svgfilterList .add-svgfilter-item")]() { - this.executeSVGFilter((project2) => { - project2.createSVGFilter({ - id: uuidShort(), - filters: [] - }); - }); +} +class GradientResizer extends GradientTimingStepEditor { + [POINTERSTART("$el .resizer") + LEFT_BUTTON + MOVE("calculateMovedResizer") + END("calculateMovedEndResizer") + PREVENT](e) { + this.state.$target = e.$dt; + this.$el.toggleClass("dragging", true); + this.initializeData(); + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.isShiftKey = e.shiftKey; } - [CLICK("$svgfilterList .remove")](e) { - var $item = e.$dt.closest("svgfilter-item"); - var index2 = +$item.attr("data-index"); - this.executeSVGFilter((project2) => { - project2.removeSVGFilter(index2); + calculateMovedResizer() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const currentVertex = clone(this.initMousePoint); + const nextVertex = targetMousePoint; + const reverseMatrix = this.$context.selection.current.absoluteMatrixInverse; + const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); + const realDist = subtract([], nextResult, currentResult); + const { backRect: rect2 } = this.state.backgroundImageMatrix; + const backgroundImage2 = this.state.gradient; + const backRect = backgroundImage2.recoverOffset(rect2.x, rect2.y, this.state.contentBox, realDist[0], realDist[1], { + shiftKey: this.$config.get("bodyEvent").shiftKey }); - } - [CLICK("$svgfilterList .copy")](e) { - var $item = e.$dt.closest("svgfilter-item"); - var index2 = +$item.attr("data-index"); - this.executeSVGFilter((project2) => { - project2.copySVGFilter(index2); + this.state.backgroundImages[this.state.index].reset({ + x: backRect.x, + y: backRect.y, + width: backRect.width, + height: backRect.height }); + this.updateData(); } - [INPUT("$svgfilterList input")](e) { - var $item = e.$dt.closest("svgfilter-item"); - var index2 = +$item.attr("data-index"); - var obj2 = e.$dt.attrKeyValue("data-key"); - this.executeSVGFilter((project2) => { - project2.setSVGFilterValue(index2, obj2); - this.emit("refreshSVGArea"); - }, false); + calculateMovedEndResizer() { + this.updateData(); + this.$el.toggleClass("dragging", false); } - [CLICK("$svgfilterList .preview")](e) { - var $item = e.$dt.closest("svgfilter-item"); - var index2 = +$item.attr("data-index"); - this.state.$item = $item; - this.state.$el = e.$dt.$(".svgfilter-view"); - var currentProject = this.$context.selection.currentProject || { - svgfilters: [] - }; - var svgfilter = currentProject.svgfilters[index2]; - this.emit("showSVGFilterPopup", { - changeEvent: "changeSVGFilterAssets", - id: this.id, - index: index2, - filters: svgfilter.filters + [POINTERSTART("$el .back-rect") + LEFT_BUTTON + MOVE("calculateMovedRect") + END("calculateMovedEndRect") + PREVENT](e) { + this.state.$target = e.$dt; + this.initializeData(); + this.initMousePoint = this.$viewport.getWorldPosition(e); + } + calculateMovedRect() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const currentVertex = clone(this.initMousePoint); + const nextVertex = targetMousePoint; + const reverseMatrix = this.$context.selection.current.absoluteMatrixInverse; + const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); + const realDist = subtract([], nextResult, currentResult); + const { backRect: rect2 } = this.state.backgroundImageMatrix; + const backgroundImage2 = this.state.gradient; + const backRect = backgroundImage2.recoverOffset(rect2.x + realDist[0], rect2.y + realDist[1], this.state.contentBox); + this.state.backgroundImages[this.state.index].reset({ + x: backRect.x, + y: backRect.y }); + this.updateData(); } - [SUBSCRIBE("updateSVGFilterAssets")](params) { - this.executeSVGFilter((project2) => { - project2.setSVGFilterValue(params.index, { - filters: params.filters - }); - this.state.$item.$("filter").html(params.filters.join("\n")); - this.emit("refreshSVGArea"); - }, false); + calculateMovedEndRect(dx, dy) { + if (dx == 0 && dy === 0) { + const index2 = repeatTypeList.indexOf(this.state.gradient.repeat); + this.state.backgroundImages[this.state.index].repeat = repeatTypeList[(index2 + 1) % repeatTypeList.length]; + } + this.updateData(); } - [SUBSCRIBE("changeSVGFilterAssets")](params) { - if (params.id === this.id) { - this.trigger("updateSVGFilterAssets", params); +} +class GradientRotateEditor extends GradientResizer { + [POINTERSTART("$el .gradient-angle .rotate") + LEFT_BUTTON + MOVE("calculateMovedAngle") + END("calculatedMovedEndAngle") + PREVENT](e) { + this.state.$target = e.$dt; + this.initializeData(); + this.$el.toggleClass("dragging", true); + this.state.centerX = +this.state.$target.data("center-x"); + this.state.centerY = +this.state.$target.data("center-y"); + this.state.startX = +this.state.$target.attr("cx"); + this.state.startY = +this.state.$target.attr("cy"); + this.state.$target.toggleClass("moved"); + } + calculateMovedAngle(dx, dy) { + const center2 = [this.state.centerX, this.state.centerY, 0]; + const point2 = [this.state.startX, this.state.startY, 0]; + const dist2 = [dx, dy, 0]; + const distAngle = calculateAngleForVec3(point2, center2, dist2); + let newAngle = Math.floor(this.state.gradient.image.angle + distAngle); + if (this.$config.get("bodyEvent").shiftKey) { + newAngle -= newAngle % this.$config.get("fixed.gradient.angle"); } + this.state.backgroundImages[this.state.index].image.angle = newAngle; + this.updateData(); } - [SUBSCRIBE("refreshSVGFilterAssets")]() { - this.refresh(); + calculatedMovedEndAngle() { + this.state.$target.toggleClass("moved"); + this.$el.toggleClass("dragging", false); + this.updateData(); } } -function svgFilterAsset(editor) { - editor.registerElement({ - SVGFilterAssetsProperty - }); -} -var alpha = ` -1 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 0 .5 0 -`; -var blue = ` -0 0 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var BlueMagenta2 = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 .5 0 -0 0 0 1 0 -`; -var BlueShadowMagentHightlight = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 1 0 -0 0 0 1 0 -`; -var cyan = ` -0 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var darken = ` -.5 0 0 0 0 -0 .5 0 0 0 -0 0 .5 0 0 -0 0 0 1 0 -`; -var ElimBlue = ` -1 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 -2 1 0 -`; -var GrayOnDark = ` -0 0 1 0 0 -0 0 1 0 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var GrayOnLight = ` -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 -0 0 0 1 0 -`; -var GrayOnMid = ` -0 1 0 0 0 -0 1 0 0 0 -0 1 0 0 0 -0 0 0 1 0 -`; -var green = ` -0 0 0 0 0 -0 1 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`; -var HardGreen = ` -1 0 0 0 0 -0 1 0 1 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var HardYellow = ` -1 0 0 1 0 -0 1 0 1 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var IdenticalRedOverlay = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`; -var lighten = ` -1.5 0 0 0 0 -0 1.5 0 0 0 -0 0 1.5 0 0 -0 0 0 1 0 -`; -var lime = ` -1 0 0 0 0 -0 2 0 0 0 -0 0 0 .5 0 -0 0 0 1 0 -`; -var magenta = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var NoGreenMagenta = ` -1 1 0 0 0 -0 0 0 0 0 -0 1 1 0 0 -0 0 0 1 0 -`; -var NoGreenRed = ` -1 1 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`; -var peachy = ` -1 0 0 0 0 -0 .5 0 0 0 -0 0 0 .5 0 -0 0 0 1 0 -`; -var red = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`; -var RedOverlay = ` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 -1 0 -0 0 0 1 0 -`; -var yellow = ` -1 0 0 0 0 -0 1 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`; -var YesGreenColorizedMagenta = ` -1 1 0 0 0 -0 1 0 0 0 -0 1 1 0 0 -0 0 0 1 0 -`; -var colormatrix = { - red, - green, - blue, - yellow, - magenta, - cyan, - alpha, - BlueMagenta2, - BlueShadowMagentHightlight, - darken, - ElimBlue, - GrayOnDark, - GrayOnLight, - GrayOnMid, - HardGreen, - HardYellow, - IdenticalRedOverlay, - lighten, - lime, - NoGreenMagenta, - NoGreenRed, - peachy, - RedOverlay, - YesGreenColorizedMagenta -}; -var ColorMatrixEditor$1 = ""; -const COLUMN = 6; -const sampleList = Object.keys(colormatrix).map((it) => { - return { title: it, values: colormatrix[it] }; -}); -class ColorMatrixEditor extends EditorElement { - initState() { - return { - values: normalize(this.props.values) - }; +class GradientColorstepEditor extends GradientRotateEditor { + [KEYUP("$el .colorstep")](e) { + const index2 = +e.$dt.data("index"); + switch (e.code) { + case "Delete": + case "Backspace": + this.removeStep(index2); + break; + case "BracketRight": + this.sortToRight(index2); + break; + case "BracketLeft": + this.sortToLeft(index2); + break; + case "Equal": + this.appendColorStep(index2); + break; + case "Minus": + this.prependColorStep(index2); + break; + } } - template() { - return ` -
-
-
Mix Color Template
-
-
- `; + removeStep(currentIndex) { + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + image2.removeColorStepByIndex(currentIndex); + this.updateColorStepStatus(image2, -1); } - [BIND("$body")]() { - return { - cssText: ` - display: grid; - grid-template-columns: repeat(${COLUMN}, 1fr); - grid-column-gap: 2px; - grid-row-gap: 2px; - text-align: left; - ` - }; + sortToRight() { + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + image2.sortToRight(); + this.updateColorStepStatus(image2, -1); } - [LOAD("$sample")]() { - return sampleList.map((it, index2) => { - return `
${it.title}
`; - }); + sortToLeft() { + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + image2.sortToLeft(); + this.updateColorStepStatus(image2, -1); } - [CLICK("$sample .sample-item")](e) { - var index2 = +e.$dt.attr("data-index"); - var sample2 = sampleList[index2]; - this.updateData({ - values: normalize(sample2.values) - }); - this.load("$body"); + appendColorStep(currentIndex) { + const nextIndex = currentIndex + 1; + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + const currentColorStep = image2.colorsteps[currentIndex]; + const nextColorStep = image2.colorsteps[nextIndex]; + let newIndex = -1; + if (!nextColorStep) { + if (currentColorStep.percent !== 100) { + newIndex = image2.insertColorStep(currentColorStep.percent + (100 - currentColorStep.percent) / 2); + } + } else { + newIndex = image2.insertColorStep(currentColorStep.percent + (nextColorStep.percent - currentColorStep.percent) / 2); + } + this.updateColorStepStatus(image2, newIndex); } - [LOAD("$body")]() { - var { values } = this.state; - var text2 = ["R", "G", "B", "A"]; - var a = values.map((value, index2) => { - var h = ""; - if (index2 % (COLUMN - 1) === 0) { - h = `
${text2[Math.floor(index2 / (COLUMN - 1))]}
`; + prependColorStep(currentIndex) { + const prevIndex = currentIndex - 1; + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + const currentColorStep = image2.colorsteps[currentIndex]; + const prevColorStep = image2.colorsteps[prevIndex]; + let newIndex = -1; + if (!prevColorStep) { + if (currentColorStep.percent !== 0) { + newIndex = image2.insertColorStep(currentColorStep.percent); } - var result = ` - ${h} -
- -
- `; - return result; + } else { + newIndex = image2.insertColorStep(prevColorStep.percent + (currentColorStep.percent - prevColorStep.percent) / 2); + } + this.updateColorStepStatus(image2, newIndex); + } + [POINTERSTART("$el .colorstep") + MOVE("moveColorStep") + END("moveEndColorStep")](e) { + this.$el.toggleClass("dragging", true); + this.state.hoverColorStep = null; + this.initializeData(); + const $colorstep = e.$dt; + this.$targetIndex = +$colorstep.data("index"); + if (e.altKey) { + this.removeStep(this.$targetIndex); + this.state.altKey = true; + return; + } + const result = this.state.backgroundImageMatrix; + switch (result.backgroundImage.image.type) { + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + this.centerPosition = this.$viewport.applyVertex(result.centerPosition); + this.startPoint = this.$viewport.applyVertex(result.startPoint); + this.endPoint = this.$viewport.applyVertex(result.endPoint); + this.screenXY = this.$viewport.applyVertex(result.colorsteps[this.$targetIndex].pos); + this.rotateInverse = calculateRotationOriginMat4(-this.state.gradient.image.angle, this.centerPosition); + break; + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + this.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + this.startPoint = this.$viewport.applyVertex(result.startPoint); + this.endPoint = this.$viewport.applyVertex(result.endPoint); + this.screenXY = this.$viewport.applyVertex(result.colorsteps[this.$targetIndex].pos); + const dist2 = subtract([], this.endPoint, this.startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + this.rotateInverse = calculateRotationOriginMat4(-angle, this.centerPosition); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + this.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + this.startPoint = this.$viewport.applyVertex(result.shapePoint); + this.newStartPoint = subtract([], this.startPoint, this.centerPosition); + this.newStartAngle = calculateAngle360(this.newStartPoint[0], this.newStartPoint[1]); + const x = +$colorstep.data("x"); + const y = +$colorstep.data("y"); + this.screenXY = [x, y, 0]; + this.endPoint = this.$viewport.applyVertex(result.endPoint); + this.rotateInverse = create$4(); + break; + } + } + moveColorStep(dx, dy) { + if (this.state.altKey) + return; + const nextPoint = add$1([], this.screenXY, [dx, dy, 0]); + const [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.startPoint, this.endPoint, nextPoint], this.rotateInverse); + const result = this.state.backgroundImageMatrix; + let newDist = 0; + let baseDist = 0; + switch (result.backgroundImage.image.type) { + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + var [s, e, n] = [baseStartPoint[1], baseEndPoint[1], baseNextPoint[1]]; + var baseDefaultDist = Math.abs(s - e); + if (s < n) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else if (e > n) { + newDist = Math.abs(n - s) / baseDefaultDist * 100; + } else { + var distStart = Math.abs(s - n); + var distEnd = Math.abs(e - n); + newDist = distStart / (distEnd + distStart) * 100; + } + newDist = Math.max(0, Math.min(100, newDist)); + baseDist = dist(this.startPoint, this.endPoint); + break; + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; + var baseDefaultDist = Math.abs(s - e); + if (n < s) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else if (n > e) { + newDist = Math.abs(n - s) / baseDefaultDist * 100; + } else { + newDist = (n - s) / baseDefaultDist * 100; + } + newDist = Math.max(0, Math.min(100, newDist)); + baseDist = dist(this.startPoint, this.endPoint); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + const newNextPoint = subtract([], nextPoint, this.centerPosition); + let nextAngle = calculateAngle360(newNextPoint[0], newNextPoint[1]); + if (this.$config.get("bodyEvent").shiftKey) { + nextAngle -= nextAngle % this.$config.get("fixed.gradient.angle"); + } + let newAngle = nextAngle - this.newStartAngle; + newDist = newAngle / 360 * 100; + newDist = (newDist + 100) % 100; + baseDist = 100; + break; + } + const image2 = this.state.gradient.image; + image2.colorsteps[this.$targetIndex].setValue(newDist, baseDist); + const targetColorStep = { + color: image2.colorsteps[this.$targetIndex].color, + percent: image2.colorsteps[this.$targetIndex].percent + }; + const nextImage = this.state.backgroundImages[this.state.index].image; + nextImage.colorsteps = image2.colorsteps.map((it) => { + return it; }); - var header = ` -
-
R
-
G
-
B
-
A
-
M
- `; - return header + a; + nextImage.sortColorStep(); + this.emit("updateGradientEditor", nextImage, targetColorStep); + var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + backgroundImage: value + })); } - updateData(data) { - this.setState(data, false); - this.parent.trigger(this.props.onchange, this.props.key, this.state.values, this.props.params); + moveEndColorStep(dx, dy) { + if (this.state.altKey) { + this.state.altKey = false; + return; + } + if (dx === 0 && dy === 0) { + const image2 = this.state.backgroundImages[this.state.index].image; + image2.colorsteps[this.$targetIndex].toggleTiming(); + const targetColorStep = { + color: image2.colorsteps[this.$targetIndex].color, + percent: image2.colorsteps[this.$targetIndex].percent + }; + this.emit("updateGradientEditor", image2, targetColorStep); + var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + backgroundImage: value + })); + } + this.$el.toggleClass("dragging", false); } - [INPUT("$body input")](e) { - var $el = e.$dt; - var index2 = +$el.attr("data-index"); - var value = +$el.value; - this.state.values[index2] = value; - this.updateData(); + updateColorStepStatus(image2, index2) { + this.initializeData(); + const { color: color2, percent } = image2.colorsteps[index2] || {}; + this.emit("updateGradientEditor", image2, { color: color2, percent }); + this.state.backgroundImages[this.state.index].image = image2; + var value = CSS_TO_STRING(BackgroundImage.toProperty(this.state.backgroundImages)); + this.$commands.executeCommand("setAttribute", "change background image", this.$context.selection.packByValue({ + backgroundImage: value + })); + this.state.hoverColorStep = null; } -} -var FuncFilterEditor$1 = ""; -class FuncFilterEditor extends EditorElement { - initState() { - return __spreadValues({ - label: this.props.label || "" - }, this.parse(this.props.value)); + [POINTERSTART("$el .area-line")]() { + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + const index2 = image2.insertColorStep(this.state.hoverColorStep.percent); + this.updateColorStepStatus(image2, index2); } - parse(value) { - var [type, ...values] = value.split(" "); - if (type === "linear") { - var [slop, intercept] = values; - } else if (type === "gamma") { - var [amplitude, exponent, offset] = values; + [POINTEROUT("$el .area-line")]() { + if (this.state.hoverColorStep) { + this.state.hoverColorStep = null; + this.refresh(); } - return { - type, - values, - slop, - intercept, - amplitude, - exponent, - offset - }; } + [POINTERMOVE("$el .area-line")](evt) { + const nextPoint = this.$viewport.applyVertex(this.$viewport.getWorldPosition(evt)); + const image2 = this.state.lastBackgroundMatrix.backgroundImage.image; + let baseStartPoint, baseEndPoint, baseNextPoint; + switch (image2.type) { + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + [baseStartPoint, baseEndPoint, baseNextPoint] = vertiesMap([this.state.startPoint, this.state.endPoint, nextPoint], this.state.rotateInverse); + var newDist = 0; + var [s, e, n] = [baseStartPoint[1], baseEndPoint[1], baseNextPoint[1]]; + var baseDefaultDist = Math.abs(s - e); + if (s < n) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else if (e > n) { + newDist = Math.abs(n - s) / baseDefaultDist * 100; + } else { + const distStart = Math.abs(s - n); + const distEnd = Math.abs(e - n); + newDist = distStart / (distEnd + distStart) * 100; + } + this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); + break; + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + [baseStartPoint, baseEndPoint, baseNextPoint] = [ + this.state.startPoint, + this.state.endPoint, + nextPoint + ]; + var newDist = 0; + var [s, e, n] = [baseStartPoint[0], baseEndPoint[0], baseNextPoint[0]]; + var baseDefaultDist = Math.abs(s - e); + if (n < s) { + newDist = -1 * Math.abs(n - s) / baseDefaultDist * 100; + } else { + newDist = Math.abs(n - s) / baseDefaultDist * 100; + } + this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + const newStartPoint = subtract([], this.state.startPoint, this.state.centerPosition); + const newNextPoint = subtract([], nextPoint, this.state.centerPosition); + const startAngle = calculateAngle360(newStartPoint[0], newStartPoint[1]); + const nextAngle = calculateAngle360(newNextPoint[0], newNextPoint[1]); + var newDist = (nextAngle - startAngle) / 360 * 100; + this.state.hoverColorStep = this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(newDist); + break; + } + this.refresh(); + } +} +class GradientEditorView extends GradientColorstepEditor { template() { - return `
`; + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--gradient-editor-view" + }); } - [LOAD("$body")]() { - var { type, label } = this.state; - var hasLabel = label ? "has-label" : ""; - return ` - ${createComponent("SelectEditor", { - label, - ref: "$type", - key: "type", - value: this.state.type, - options: ["identity", "table", "discrete", "linear", "gamma"], - onchange: "changeType" - })} -
- ${label ? `` : ""} -
-
-
- ${createComponent("TextEditor", { - label: "tableValues", - ref: "$values", - key: "values", - value: this.state.values.join(" "), - onchange: (key, value) => { - this.updateData({ - [key]: value.split(" ") - }); - } - })} -
-
- ${["slop", "intercept"].map((it) => { - return ` -
- ${createComponent("NumberRangeEditor", { - label: it, - ref: `$${it}`, - key: it, - value: this.state[it], - onchange: (key, value) => { - this.updateData({ - [key]: value - }); + [POINTERSTART("$el .point") + LEFT_BUTTON + MOVE("calculateMovedElement") + END("calculateMovedEndElement") + PREVENT](e) { + this.$el.toggleClass("dragging", true); + this.initializeData(); + const result = this.state.backgroundImageMatrix; + this.pointTarget = e.$dt.data("type"); + this.startPoint = this.$viewport.applyVertex(result.startPoint); + this.endPoint = this.$viewport.applyVertex(result.endPoint); + if (result.shapePoint) { + this.shapePoint = this.$viewport.applyVertex(result.shapePoint); + } + } + calculateMovedElement(dx, dy) { + const targetPoint = this.pointTarget === "start" ? this.startPoint : this.endPoint; + let nextPoint = add$1([], targetPoint, [dx, dy, 0]); + var [localPosition] = vertiesMap([this.$viewport.applyVertexInverse(nextPoint)], this.$context.selection.current.absoluteMatrixInverse); + const backgroundImage2 = this.state.gradient; + const backRect = backgroundImage2.getOffset(this.state.contentBox); + const image2 = this.state.gradient.image; + switch (image2.type) { + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + if (this.pointTarget === "start") { + const newX = localPosition[0] - backRect.x; + const newY = localPosition[1] - backRect.y; + this.state.backgroundImages[this.state.index].image.radialPosition = [ + Length.makePercent(newX, backRect.width), + Length.makePercent(newY, backRect.height) + ]; + this.updateData(); + } else if (this.pointTarget === "end") { + var [localStartPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.startPoint)], this.$context.selection.current.absoluteMatrixInverse); + var [localEndPosition] = vertiesMap([ + this.$viewport.applyVertexInverse(add$1([], this.endPoint, [dx, 0, 0])) + ], this.$context.selection.current.absoluteMatrixInverse); + var [localShapePosition] = vertiesMap([this.$viewport.applyVertexInverse(this.shapePoint)], this.$context.selection.current.absoluteMatrixInverse); + const newEndX = localEndPosition[0] - backRect.x - localStartPosition[0]; + const newShapeY = localShapePosition[1] - backRect.y - localStartPosition[1]; + if (this.state.gradient.image.radialType === RadialGradientType.CIRCLE) { + this.state.backgroundImages[this.state.index].image.radialSize = [ + Length.px(Math.abs(newEndX)) + ]; + } else if (this.state.gradient.image.radialType === RadialGradientType.ELLIPSE) { + this.state.backgroundImages[this.state.index].image.radialSize = [ + Length.makePercent(Math.abs(newEndX), backRect.width), + Length.makePercent(Math.abs(newShapeY), backRect.height) + ]; + } + this.updateData(); + } else if (this.pointTarget === "shape") { + var [localStartPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.startPoint)], this.$context.selection.current.absoluteMatrixInverse); + var [localShapePosition] = vertiesMap([ + this.$viewport.applyVertexInverse(add$1([], this.shapePoint, [0, dy, 0])) + ], this.$context.selection.current.absoluteMatrixInverse); + var [localEndPosition] = vertiesMap([this.$viewport.applyVertexInverse(this.endPoint)], this.$context.selection.current.absoluteMatrixInverse); + const newEndX = localEndPosition[0] - backRect.x - localStartPosition[0]; + const newShapeY = localShapePosition[1] - backRect.y - localStartPosition[1]; + if (this.state.gradient.image.radialType === RadialGradientType.CIRCLE) { + this.state.backgroundImages[this.state.index].image.radialSize = [ + Length.px(Math.abs(newShapeY)) + ]; + } else if (this.state.gradient.image.radialType === RadialGradientType.ELLIPSE) { + this.state.backgroundImages[this.state.index].image.radialSize = [ + Length.makePercent(Math.abs(newEndX), backRect.width), + Length.makePercent(Math.abs(newShapeY), backRect.height) + ]; + } + this.updateData(); } - })} -
- `; - }).join("")} -
-
- ${["amplitude", "exponent", "offset"].map((it) => { - return ` -
- ${createComponent("NumberRangeEditor", { - label: it, - ref: `$${it}`, - key: it, - value: this.state[it], - onchange: (key, value) => { - this.updateData({ - [key]: value - }); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + if (this.pointTarget === "start") { + const newX = localPosition[0] - backRect.x; + const newY = localPosition[1] - backRect.y; + this.state.backgroundImages[this.state.index].image.radialPosition = [ + Length.makePercent(newX, backRect.width), + Length.makePercent(newY, backRect.height) + ]; + this.updateData(); } - })} -
- `; - }).join("")} -
-
- `; + break; + } + } + calculateMovedEndElement(dx, dy) { + if (dx == 0 && dy === 0) { + if (this.pointTarget === "start") { + switch (this.state.gradient.type) { + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + const findKey = `${this.state.gradient.image.radialType} ${this.state.gradient.image.radialSize}`.trim(); + const index2 = radialTypeList.indexOf(findKey); + const [radialType, radialSize] = radialTypeList[(index2 + 1) % radialTypeList.length].split(" "); + const image2 = this.state.backgroundImages[this.state.index].image; + image2.radialType = radialType; + image2.radialSize = radialSize; + break; + } + } + } + this.updateData(); + this.$el.toggleClass("dragging", false); + } + refresh() { + if (this.state.isShow) { + this.load(); + } + } + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); + } + [SUBSCRIBE(UPDATE_CANVAS) + DEBOUNCE(10)]() { + if (this.$context.selection.current) { + if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "backgroundImage", "border", "padding", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom")) { + this.refresh(); + } + } } - [SUBSCRIBE("changeType")](key, type) { - this.updateData({ type }); + [SUBSCRIBE("showGradientEditorView")]({ index: index2 }) { + this.state.index = index2; + this.$el.show(); + this.state.isShow = true; this.refresh(); + this.$commands.emit("recoverCursor"); + this.$context.commands.emit("push.mode.view", "GradientEditorView"); } - getValue() { - switch (this.state.type) { - case "table": - case "discrete": - return [this.state.type, ...this.state.values].join(" "); - case "linear": - return [this.state.type, this.state.slop, this.state.intercept].join(" "); - case "gamma": - return [ - this.state.type, - this.state.amplitude, - this.state.exponent, - this.state.offset - ].join(" "); + [SUBSCRIBE("hideGradientEditorView")]() { + this.$el.hide(); + this.state.isShow = false; + this.$commands.emit("pop.mode.view", "GradientEditorView"); + } + makeTimingLine(timing, width2 = 10, startX = 0, startY = 0) { + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0} ${startY + width2} + L${startX + width2 * 1 / 3} ${startY + width2} + L${startX + width2 * 1 / 3} ${startY + width2 * 2 / 3} + L${startX + width2 * 2 / 3} ${startY + width2 * 2 / 3} + L${startX + width2 * 2 / 3} ${startY + width2 * 1 / 3} + L${startX + width2} ${startY + width2 * 1 / 3} + L${startX + width2} ${startY + 0} + ` + }); + case TimingFunction.PATH: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(0, width2).d + }); + default: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0} ${startY + width2} + C + ${startX + timing.x1 * width2} ${startY + width2 - timing.y1 * width2} + ${startX + timing.x2 * width2} ${startY + width2 - timing.y2 * width2} + ${startX + width2} ${startY + 0} + ` + }); } - return "identity"; } - setValue(value) { - this.setState(__spreadValues({}, this.parse(value))); + makeConicTimingLine(timing, width2 = 10, startX = 0, startY = 0) { + const half = width2 / 2; + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0 - half} ${startY + width2 - half} + L${startX + width2 * 1 / 3 - half} ${startY + width2 - half} + L${startX + width2 * 1 / 3 - half} ${startY + width2 * 2 / 3 - half} + L${startX + width2 * 2 / 3 - half} ${startY + width2 * 2 / 3 - half} + L${startX + width2 * 2 / 3 - half} ${startY + width2 * 1 / 3 - half} + L${startX + width2 - half} ${startY + width2 * 1 / 3 - half} + L${startX + width2 - half} ${startY + 0 - half} + ` + }); + case TimingFunction.PATH: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: PathParser.fromSVGString(timing.d).scale(width2, width2).flipX().translate(-half, width2).d + }); + default: + return /* @__PURE__ */ createElementJsx("path", { + class: "timing", + d: ` + M${startX + 0 - half} ${startY + width2 - half} + C + ${startX + timing.x1 * width2 - half} ${startY + width2 - timing.y1 * width2 - half} + ${startX + timing.x2 * width2 - half} ${startY + width2 - timing.y2 * width2 - half} + ${startX + width2 - half} ${startY + 0 - half} + ` + }); + } } - updateData(data) { - this.setState(data, false); - this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); + makeTimingCircle(colorstepIndex, current, prev) { + const prevStickScreenXY = prev.stickScreenXYInEnd; + const stickScreenXY = current.stickScreenXYInStart; + const { timing, timingCount } = current; + let pos; + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + pos = lerp([], prevStickScreenXY, stickScreenXY, 0.5); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timing.count)); + default: + pos = lerp([], prevStickScreenXY, stickScreenXY, 0.5); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timingCount)); + } } -} -var dancingStroke = [ - { - type: "SourceAlpha", - id: "strokeSource", - bound: { x: 100, y: 100 }, - connected: [ - { - id: "morphology" - } - ] - }, - { - type: "Morphology", - id: "morphology", - operator: "dilate", - radius: "3 3", - bound: { x: 100, y: 200 }, - in: [{ id: "strokeSource" }], - connected: [{ id: "composite" }] - }, - { - type: "Flood", - id: "flood", - bound: { x: 100, y: 200 }, - color: "#30597E", - opacity: 1, - connected: [{ id: "composite" }] - }, - { - type: "Composite", - id: "composite", - bound: { x: 400, y: 150 }, - in: [{ id: "flood" }, { id: "morphology" }], - operator: "in", - connected: [ - { - id: "composite2" - } - ] - }, - { - type: "SourceAlpha", - id: "strokeSourceAlpha2", - bound: { x: 400, y: 200 }, - connected: [ - { - id: "composite2" - } - ] - }, - { - type: "Composite", - id: "composite2", - bound: { x: 400, y: 150 }, - in: [{ id: "composite" }, { id: "strokeSourceAlpha2" }], - operator: "out", - connected: [ - { - id: "displacementMap" - } - ] - }, - { - type: "Turbulence", - id: "turbulence", - filterType: "fractalNoise", - baseFrequency: "0.01 0.02", - numOctaves: 1, - seed: 0, - stitchTiles: "stitch", - bound: { x: 400, y: 200 }, - connected: [ - { - id: "displacementMap" - } - ] - }, - { - type: "DisplacementMap", - id: "displacementMap", - scale: 17, - xChannelSelector: "A", - yChannelSelector: "A", - bound: { x: 400, y: 200 }, - in: [{ id: "composite2" }, { id: "turbulence" }], - connected: [ - { - id: "merge" - } - ] - }, - { - type: "SourceGraphic", - id: "strokeSourceGraphic", - bound: { x: 400, y: 200 }, - connected: [ - { - id: "merge" - } - ] - }, - { - type: "Merge", - id: "merge", - bound: { x: 500, y: 150 }, - in: [{ id: "strokeSourceGraphic" }, { id: "displacementMap" }] + makeConicTimingCircle(startPoint, colorstepIndex, current, prev) { + const prevStickScreenXY = prev.stickScreenXY; + const stickScreenXY = current.stickScreenXY; + const { timing, timingCount } = current; + const dist$1 = dist(prevStickScreenXY, startPoint); + const prevAngle = calculateAngle360(...subtract([], prevStickScreenXY, startPoint)); + const angle = calculateAngle360(...subtract([], stickScreenXY, startPoint)); + let nextAngle = this.getRealAngle(prevAngle + (angle - prevAngle) / 2); + const bigArc = Math.abs(angle - prevAngle) % 360 >= 180 ? 1 : 0; + if (bigArc) { + nextAngle -= 180; + } + var [pos] = vertiesMap([lerp([], startPoint, add$1([], startPoint, [-1, 0, 0]), dist$1)], calculateRotationOriginMat4(nextAngle, startPoint)); + switch (timing.name) { + case TimingFunction.LINEAR: + return ``; + case TimingFunction.STEPS: + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timing.count)); + default: + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("circle", { + class: "step-point", + "data-colorstep-index": colorstepIndex, + cx: pos[0], + cy: pos[1], + r: 7 + }), /* @__PURE__ */ createElementJsx("text", { + x: pos[0], + y: pos[1], + dy: 4, + "text-anchor": "middle" + }, timingCount)); + } } -]; -var grayscale = [ - { - type: "Saturate", - values: "0" + makeTimingArea(colorstepIndex, current, prev, size2) { + const prevStickScreenXY = prev.stickScreenXYInEnd; + const stickScreenXY = current.stickScreenXYInStart; + return /* @__PURE__ */ createElementJsx("g", { + class: "timing-area" + }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx("path", { + class: "timing-path", + d: ` + M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} + L ${stickScreenXY[0]} ${stickScreenXY[1]} + ` + }), this.makeTimingCircle(colorstepIndex, current, prev, size2)); } -]; -var innerShadow = [ - { - type: "Flood", - id: "flood", - bound: { x: 100, y: 200 }, - color: "black", - opacity: 1, - connected: [{ id: "composite1" }] - }, - { - type: "SourceAlpha", - id: "shadowSource", - bound: { x: 100, y: 100 }, - connected: [ - { - id: "composite1" - } - ] - }, - { - type: "Composite", - id: "composite1", - bound: { x: 200, y: 150 }, - in: [{ id: "flood" }, { id: "shadowSource" }], - operator: "out", - connected: [ - { - id: "offset" - } - ] - }, - { - type: "Offset", - id: "offset", - bound: { x: 300, y: 150 }, - dx: 4, - dy: 4, - in: [{ id: "composite1" }], - connected: [{ id: "blur" }] - }, - { - type: "GaussianBlur", - id: "blur", - bound: { x: 400, y: 150 }, - stdDeviationX: 4, - stdDeviationY: 4, - edge: "none", - in: [{ id: "offset" }], - connected: [ - { - id: "composite2" - } - ] - }, - { - type: "SourceAlpha", - id: "shadowSource2", - bound: { x: 400, y: 250 }, - connected: [ - { - id: "composite2" - } - ] - }, - { - type: "Composite", - id: "composite2", - bound: { x: 500, y: 150 }, - in: [{ id: "blur" }, { id: "shadowSource2" }], - operator: "out", - connected: [ - { - id: "merge" - } - ] - }, - { - type: "SourceGraphic", - id: "shadowSource3", - bound: { x: 500, y: 250 }, - connected: [ - { - id: "merge" + getRealAngle(angle) { + return angle < 0 ? 360 + angle : angle; + } + makeConicTimingArea(startPoint, colorstepIndex, current, prev, size2, dist2, startAngle) { + const prevStickScreenXY = prev.stickScreenXY; + const stickScreenXY = current.stickScreenXY; + const prevAngle = calculateAngle360(...subtract([], prevStickScreenXY, startPoint)) + startAngle; + const angle = calculateAngle360(...subtract([], stickScreenXY, startPoint)) + startAngle; + const nextAngle = 360 - prevAngle; + const nextAngle2 = angle; + const bigArc = Math.abs(nextAngle + nextAngle2) % 360 >= 180 ? 1 : 0; + return /* @__PURE__ */ createElementJsx("g", { + class: "timing-area" + }, current.timing.name === TimingFunction.LINEAR ? `` : /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("path", { + class: "timing-path", + d: ` + M ${prevStickScreenXY[0]} ${prevStickScreenXY[1]} + A ${dist2} ${dist2} 0 ${bigArc} 1 ${stickScreenXY[0]} ${stickScreenXY[1]} + ` + })), this.makeConicTimingCircle(startPoint, colorstepIndex, current, prev, dist2)); + } + makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint) { + const size2 = TOOL_SIZE; + const dist2 = subtract([], endPoint, startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { + if (index2 === 0) + return ""; + return this.makeTimingArea(index2, it, colorsteps[index2 - 1], TOOL_SIZE); + }), colorsteps.map((it, index2) => { + return /* @__PURE__ */ createElementJsx("g", { + transform: `rotate(${angle} ${it.stickScreenXY[0]} ${it.stickScreenXY[1]})` + }, /* @__PURE__ */ createElementJsx("rect", { + id: it.id, + "data-index": index2, + class: "colorstep", + x: it.stickScreenXY[0], + y: it.stickScreenXY[1], + width: size2, + height: size2, + fill: it.color, + tabIndex: -1, + "data-x": it.screenXY[0], + "data-y": it.screenXY[1] + }), this.makeTimingLine(it.timing, size2, it.stickScreenXY[0], it.stickScreenXY[1])); + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "start", + cx: startPoint[0], + cy: startPoint[1] + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "end", + cx: endPoint[0], + cy: endPoint[1] + }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "shape", + cx: shapePoint[0], + cy: shapePoint[1] + }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { + class: "hover-colorstep", + r: "5", + cx: newHoverColorStepPoint[0], + cy: newHoverColorStepPoint[1], + fill: this.state.hoverColorStep.color + })); + } + makeConicGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint, dist2, startAngle) { + const size2 = TOOL_SIZE; + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, colorsteps.map((it, index2) => { + if (index2 === 0) + return ""; + return this.makeConicTimingArea(startPoint, index2, it, colorsteps[index2 - 1], TOOL_SIZE, dist2, startAngle); + }), colorsteps.map((it, index2) => { + const angle = calculateAngle360(...subtract([], it.screenXY, startPoint)) - 180; + return /* @__PURE__ */ createElementJsx("g", { + transform: `rotate(${angle} ${it.screenXY[0]} ${it.screenXY[1]})` + }, /* @__PURE__ */ createElementJsx("rect", { + id: it.id, + "data-index": index2, + class: "colorstep", + x: it.screenXY[0] - size2 / 2, + y: it.screenXY[1] - size2 / 2, + width: size2, + height: size2, + fill: it.color, + tabIndex: -1, + "data-x": it.screenXY[0], + "data-y": it.screenXY[1] + }), this.makeConicTimingLine(it.timing, size2, it.screenXY[0], it.screenXY[1], startAngle)); + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "start", + cx: startPoint[0], + cy: startPoint[1] + }), /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "end", + cx: endPoint[0], + cy: endPoint[1] + }), shapePoint && /* @__PURE__ */ createElementJsx("circle", { + class: "point", + "data-type": "shape", + cx: shapePoint[0], + cy: shapePoint[1] + }), newHoverColorStepPoint && /* @__PURE__ */ createElementJsx("circle", { + class: "hover-colorstep", + r: "5", + cx: newHoverColorStepPoint[0], + cy: newHoverColorStepPoint[1], + fill: this.state.hoverColorStep.color + })); + } + makeGradientRect(result) { + const boxPosition = this.$viewport.applyVerties(result.backVerties); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { + class: "gradient-rect" + }, /* @__PURE__ */ createElementJsx("svg", null, /* @__PURE__ */ createElementJsx("path", { + class: "back-rect", + d: ` + M ${boxPosition[0][0]} ${boxPosition[0][1]} + L ${boxPosition[1][0]} ${boxPosition[1][1]} + L ${boxPosition[2][0]} ${boxPosition[2][1]} + L ${boxPosition[3][0]} ${boxPosition[3][1]} + Z + ` + }))), /* @__PURE__ */ createElementJsx("div", { + class: "resizer", + "data-direction": "bottom-right", + style: { + left: Length.px(boxPosition[2][0]), + top: Length.px(boxPosition[2][1]) } - ] - }, - { - type: "Merge", - id: "merge", - bound: { x: 600, y: 150 }, - in: [{ id: "composite2" }, { id: "shadowSource3" }] + })); } -]; -var shadow = [ - { - type: "SourceAlpha", - id: "shadowSource", - bound: { x: 100, y: 100 }, - connected: [ - { - id: "offset" - } - ] - }, - { - type: "Offset", - id: "offset", - bound: { x: 200, y: 100 }, - dx: 10, - dy: 10, - in: [{ id: "shadowSource" }], - connected: [{ id: "blur" }] - }, - { - type: "GaussianBlur", - id: "blur", - bound: { x: 300, y: 100 }, - stdDeviationX: 5, - stdDeviationY: 5, - in: [{ id: "offset" }], - connected: [ - { - id: "composite" - } - ] - }, - { - type: "Flood", - id: "flood", - bound: { x: 100, y: 200 }, - color: "black", - opacity: 0.7, - connected: [{ id: "composite" }] - }, - { - type: "Composite", - id: "composite", - bound: { x: 400, y: 150 }, - in: [{ id: "flood" }, { id: "blur" }], - operator: "in", - connected: [ - { - id: "merge" - } - ] - }, - { - type: "SourceAlpha", - id: "shadowSource2", - bound: { x: 400, y: 200 }, - connected: [ - { - id: "merge" - } - ] - }, - { - type: "Merge", - id: "merge", - bound: { x: 500, y: 150 }, - in: [{ id: "composite" }, { id: "shadowSource2" }] + makeCenterPoint(result) { + const { image: image2 } = result.backgroundImage; + switch (image2.type) { + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + return this.makeLinearCenterPoint(result); + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + return this.makeRadialCenterPoint(result); + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + return this.makeConicCenterPoint(result); + } + return ""; } -]; -var stroke = [ - { - type: "SourceAlpha", - id: "strokeSource", - bound: { x: 100, y: 100 }, - connected: [ - { - id: "morphology" - } - ] - }, - { - type: "Morphology", - id: "morphology", - operator: "dilate", - radius: "3 3", - bound: { x: 100, y: 200 }, - in: [{ id: "strokeSource" }], - connected: [{ id: "composite" }] - }, - { - type: "Flood", - id: "flood", - bound: { x: 100, y: 200 }, - color: "#30597E", - opacity: 1, - connected: [{ id: "composite" }] - }, - { - type: "Composite", - id: "composite", - bound: { x: 400, y: 150 }, - in: [{ id: "flood" }, { id: "morphology" }], - operator: "in", - connected: [ - { - id: "merge" + makeConicCenterPoint(result) { + const { image: image2 } = result.backgroundImage; + let centerPosition, centerStick; + let startPoint, endPoint, shapePoint, colorsteps; + centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + startPoint = this.$viewport.applyVertex(result.startPoint); + endPoint = this.$viewport.applyVertex(result.endPoint); + shapePoint = this.$viewport.applyVertex(result.shapePoint); + let lastDist = dist(startPoint, endPoint) / 2; + if (lastDist < 50) { + lastDist = 50; + } + colorsteps = result.colorsteps.map((it) => { + it.screenXY = this.$viewport.applyVertex(it.pos); + const pointDist = dist(it.screenXY, startPoint); + if (pointDist < lastDist) { + it.screenXY = lerp([], startPoint, lerp([], startPoint, it.screenXY, 1 / pointDist), lastDist + 20); + } else if (pointDist > lastDist) { + it.screenXY = lerp([], startPoint, it.screenXY, (lastDist + 20) / pointDist); } - ] - }, - { - type: "SourceGraphic", - id: "strokeSourceGraphic", - bound: { x: 400, y: 200 }, - connected: [ - { - id: "merge" + it.stickScreenXY = clone(it.screenXY); + const dist$1 = subtract([], it.screenXY, startPoint); + it.angle = calculateAngle360(dist$1[0], dist$1[1]); + return it; + }); + centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + const stickPoint = this.$viewport.applyVertex(result.shapePoint); + centerStick = lerp([], centerPosition, lerp([], centerPosition, stickPoint, 1 / dist(centerPosition, stickPoint)), lastDist + 50); + const targetStick = lerp([], centerStick, centerPosition, 1); + let newHoverColorStepPoint = null; + if (this.state.hoverColorStep) { + const hoverAngle = this.state.hoverColorStep.percent * 3.6; + const originDist = dist(centerPosition, shapePoint); + [newHoverColorStepPoint] = vertiesMap([ + lerp([], centerPosition, shapePoint, (lastDist + 20) / originDist) + ], calculateRotationOriginMat4(hoverAngle, centerPosition)); + } + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { + class: "gradient-position center", + "data-radial-type": image2.radialType, + style: { + left: Length.px(centerPosition[0]), + top: Length.px(centerPosition[1]) } - ] - }, - { - type: "Merge", - id: "merge", - bound: { x: 500, y: 150 }, - in: [{ id: "composite" }, { id: "strokeSourceGraphic" }] + }), /* @__PURE__ */ createElementJsx("svg", { + class: "gradient-angle" + }, /* @__PURE__ */ createElementJsx("circle", { + class: "size", + cx: startPoint[0], + cy: startPoint[1], + r: lastDist + }), /* @__PURE__ */ createElementJsx("circle", { + class: "area-line", + cx: startPoint[0], + cy: startPoint[1], + r: lastDist + }), /* @__PURE__ */ createElementJsx("path", { + class: "stick", + d: ` + M ${targetStick[0]} ${targetStick[1]} + L ${centerStick[0]} ${centerStick[1]} + ` + }), /* @__PURE__ */ createElementJsx("circle", { + class: "rotate", + cx: centerStick[0], + cy: centerStick[1], + r: "7", + "data-center-x": centerPosition[0], + "data-center-y": centerPosition[1] + }), this.makeConicGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint, lastDist + 20, image2.angle))); } -]; -var svgFilterPreset = { - dancingStroke, - stroke, - grayscale, - shadow, - innerShadow -}; -var SVGFilterEditor$1 = ""; -const filterTypes = [ - { - label: "GRAPHIC REFERENCES", - items: [ - { label: "Source Graphic", value: "SourceGraphic" }, - { label: "Source Alpha", value: "SourceAlpha" }, - { label: "Background Image", value: "BackgroundImage" }, - { label: "Background Alpha", value: "BackgroundAlpha" }, - { label: "Fill Paint", value: "FillPaint" }, - { label: "Stroke Paint", value: "StrokePaint" } - ] - }, - { - label: "SOURCES", - items: [ - { label: "Flood", value: "Flood" }, - { label: "Turbulence", value: "Turbulence" }, - { label: "Image", value: "Image" } - ] - }, - { - label: "MODIFIER", - items: [ - { label: "Color Matrix", value: "ColorMatrix" }, - { label: "Saturate", value: "Saturate" }, - { label: "HueRotate", value: "HueRotate" }, - { label: "LuminanceToAlpha", value: "LuminanceAlpha" }, - { label: "Drop Shadow", value: "DropShadow" }, - { label: "Morphology", value: "Morphology" }, - { label: "Convolve Matrix", value: "ConvolveMatrix" }, - { label: "Offset", value: "Offset" }, - { label: "Gaussian Blur", value: "GaussianBlur" }, - { label: "Tile", value: "Tile" } - ] - }, - { - label: "LIGHTING", - items: [ - { label: "Specular Lighting", value: "SpecularLighting" }, - { label: "Diffuse Lighting", value: "DiffuseLighting" }, - { label: "Point Light", value: "PointLight" }, - { label: "Spot Light", value: "SpotLight" }, - { label: "Distant Light", value: "DistantLight" } - ] - }, - { - label: "COMBINERS", - items: [ - { label: "Blend", value: "Blend" }, - { label: "Composite", value: "Composite" }, - { label: "Merge", value: "Merge" }, - { label: "DisplacementMap", value: "DisplacementMap" } - ] + makeRadialCenterPoint(result) { + let colorsteps, startPoint, endPoint, shapePoint; + startPoint = this.$viewport.applyVertex(result.startPoint); + endPoint = this.$viewport.applyVertex(result.endPoint); + shapePoint = this.$viewport.applyVertex(result.shapePoint); + colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); + let newHoverColorStepPoint = null; + if (this.state.hoverColorStep) { + newHoverColorStepPoint = lerp([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); + } + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("svg", { + class: "gradient-radial-line" + }, /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "area-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "start-end-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${shapePoint[0]} ${shapePoint[1]} + `, + class: "shape-line" + }), this.makeGradientPoint(colorsteps, startPoint, endPoint, shapePoint, newHoverColorStepPoint))); } -]; -const SVGFilterTemplateList = [ - { - label: "Template", - items: [ - { label: "Grayscale", value: "grayscale" }, - { label: "Shadow", value: "shadow" }, - { label: "Inner Shadow", value: "innerShadow" }, - { label: "Stroke", value: "stroke" }, - { label: "Dancing Stroke", value: "dancingStroke" } - ] + makeStickPoint(colorsteps, startPoint, endPoint) { + const size2 = TOOL_SIZE; + const dist2 = subtract([], endPoint, startPoint); + const angle = calculateAngle360(dist2[0], dist2[1]) - 180; + const rotateInverse = calculateRotationOriginMat4(-angle, startPoint); + const rotateInverseInverse = invert([], rotateInverse); + return colorsteps.map((it) => { + it.screenXY = this.$viewport.applyVertex(it.pos); + const [newScreenXY] = vertiesMap([it.screenXY], rotateInverse); + [it.stickScreenXY, it.stickScreenXYInStart, it.stickScreenXYInEnd] = vertiesMap([ + [newScreenXY[0] - size2 / 2, newScreenXY[1] - size2 * 1.5, 0], + [ + newScreenXY[0] - size2 / 2, + newScreenXY[1] - size2 * 1.5 + size2 / 2, + 0 + ], + [ + newScreenXY[0] + size2 / 2, + newScreenXY[1] - size2 * 1.5 + size2 / 2, + 0 + ] + ], rotateInverseInverse); + return it; + }); } -]; -function getIcon(type) { - switch (type) { - case "SpecularLighting": - return iconUse("specular"); - case "DiffuseLighting": - return iconUse("diffuse"); - case "SourceGraphic": - case "SourceAlpha": - return iconUse("image"); - case "BackgroundImage": - case "BackgroundAlpha": - return iconUse("outline_image"); - case "Flood": - return iconUse("palette"); - case "Image": - return iconUse("landscape"); - case "GaussianBlur": - return iconUse("blur"); - case "ColorMatrix": - return iconUse("blur_linear"); - case "Turbulence": - return iconUse("waves"); - case "Saturate": - return iconUse("vintage"); - case "HueRotate": - return iconUse("looks"); - case "LuminanceAlpha": - return iconUse("opacity"); - case "DropShadow": - return iconUse("shadow"); - case "Morphology": - return iconUse("broken_image"); - case "ConvolveMatrix": - return iconUse("camera_roll"); - case "Offset": - return iconUse("transform"); - case "Tile": - return iconUse("view_comfy"); - case "Blend": - return iconUse("gradient"); - case "Composite": - return iconUse("merge"); - case "Merge": - return iconUse("settings_input_component"); - case "DisplacementMap": - return iconUse("texture"); + makeLinearCenterPoint(result) { + let centerPosition, centerStick, startPoint, endPoint, areaStartPoint, areaEndPoint, colorsteps; + startPoint = this.$viewport.applyVertex(result.startPoint); + endPoint = this.$viewport.applyVertex(result.endPoint); + areaStartPoint = this.$viewport.applyVertex(result.areaStartPoint); + areaEndPoint = this.$viewport.applyVertex(result.areaEndPoint); + centerPosition = this.$viewport.applyVertex(result.centerPosition); + colorsteps = this.makeStickPoint(result.colorsteps, startPoint, endPoint); + const lastDist = dist(centerPosition, endPoint); + const [stickPoint] = vertiesMap([endPoint], calculateRotationOriginMat4(90, lerp([], startPoint, endPoint, 0.5))); + centerStick = lerp([], centerPosition, lerp([], centerPosition, stickPoint, 1 / dist(centerPosition, stickPoint)), lastDist + 20); + const targetStick = lerp([], centerStick, centerPosition, 20 / (lastDist + 20)); + let newHoverColorStepPoint = null; + if (this.state.hoverColorStep) { + newHoverColorStepPoint = lerp([], startPoint, endPoint, this.state.hoverColorStep.percent / 100); + } + return /* @__PURE__ */ createElementJsx("svg", { + class: "gradient-angle" + }, /* @__PURE__ */ createElementJsx("path", { + class: "stick", + d: ` + M ${targetStick[0]} ${targetStick[1]} + L ${centerStick[0]} ${centerStick[1]} + ` + }), /* @__PURE__ */ createElementJsx("circle", { + class: "size", + cx: centerPosition[0], + cy: centerPosition[1], + r: dist(centerPosition, startPoint) + }), /* @__PURE__ */ createElementJsx("circle", { + class: "rotate", + cx: centerStick[0], + cy: centerStick[1], + r: "7", + "data-center-x": centerPosition[0], + "data-center-y": centerPosition[1] + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${areaStartPoint[0]} ${areaStartPoint[1]} + L ${areaEndPoint[0]} ${areaEndPoint[1]} + `, + class: "area-line" + }), /* @__PURE__ */ createElementJsx("path", { + d: ` + M ${startPoint[0]} ${startPoint[1]} + L ${endPoint[0]} ${endPoint[1]} + `, + class: "start-end-line" + }), this.makeGradientPoint(colorsteps, startPoint, endPoint, null, newHoverColorStepPoint)); } - return ""; -} -function getSourceTypeString(type) { - switch (type) { - case "SourceGraphic": - case "SourceAlpha": - case "BackgroundImage": - case "BackgroundAlpha": - case "FillPaint": - case "StrokePaint": - return "graphic"; - case "Flood": - case "Turbulence": - case "Image": - return "source"; - case "GaussianBlur": - case "ColorMatrix": - case "Saturate": - case "HueRotate": - case "LuminanceAlpha": - case "DropShadow": - case "Morphology": - case "ConvolveMatrix": - case "Offset": - case "Tile": - return "modifier"; - case "SpecularLighting": - case "DiffuseLighting": - case "SpotLight": - case "PointLight": - case "DistantLight": - return "lighting"; - case "Blend": - case "Composite": - case "Merge": - case "DisplacementMap": - return "combiner"; + [LOAD("$el") + DOMDIFF]() { + const current = this.$context.selection.current; + if (!current) + return ""; + const result = current.createBackgroundImageMatrix(this.state.index); + this.state.lastBackgroundMatrix = result; + const image2 = result.backgroundImage.image; + switch (image2.type) { + case GradientType.LINEAR: + case GradientType.REPEATING_LINEAR: + this.state.centerPosition = this.$viewport.applyVertex(result.centerPosition); + this.state.startPoint = this.$viewport.applyVertex(result.startPoint); + this.state.endPoint = this.$viewport.applyVertex(result.endPoint); + this.state.rotateInverse = calculateRotationOriginMat4(-1 * result.backgroundImage.image.angle, this.state.centerPosition); + break; + case GradientType.RADIAL: + case GradientType.REPEATING_RADIAL: + this.state.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + this.state.startPoint = this.$viewport.applyVertex(result.startPoint); + this.state.endPoint = this.$viewport.applyVertex(result.endPoint); + break; + case GradientType.CONIC: + case GradientType.REPEATING_CONIC: + this.state.centerPosition = this.$viewport.applyVertex(result.radialCenterPosition); + this.state.startPoint = this.$viewport.applyVertex(result.shapePoint); + break; + } + return /* @__PURE__ */ createElementJsx("div", null, this.makeGradientRect(result), image2.type === GradientType.STATIC || image2.type === GradientType.IMAGE ? null : this.makeCenterPoint(result)); } - return ""; } -const width = 40; -const half_height = 20; -const connectedXAxis = { - 1: [width + 5] +function gradientEditorView(editor) { + editor.registerUI("canvas.view", { + GradientEditorView + }); +} +var GuideLineView$1 = ""; +const line = (source2, target, className = "base-line") => { + return ``; }; -const connectedYAxis = { - 1: [half_height] +const hLineByPoint = (target, source2) => { + return line(target, source2); }; -const inXAxis = { - 1: [-7], - 2: [-7], - 3: [-7], - 4: [-7], - 5: [-7] +const vLineByPoint = (target, source2) => { + return line(target, source2); }; -let inYAxis = { - 1: [0], - 2: [-7, 7], - 3: [-14, 0, 14], - 4: [-21, -7, 7, 21], - 5: [-28, -14, 0, 14, 28] +const rect = (rectVerties) => { + return ``; }; -Object.keys(inYAxis).forEach((len2) => { - inYAxis[len2] = inYAxis[len2].map((it) => it + half_height); -}); -class SVGFilterEditor extends EditorElement { - makeFilterSelect() { - return ` - -
- - ${mapjoin(filterTypes, (f) => { - return ` -
- ${mapjoin(f.items, (i) => { - return ` -
- ${getIcon(i.value)} - ${this.$i18n(i.label)} -
- `; - })} -
- `; - })} -
- `; +const point = (target, dist2 = 3, direction2 = "left") => { + if (direction2 === "left") { + return ``; } - makeFilterTemplateSelect() { - return ` - -
- - ${mapjoin(SVGFilterTemplateList, (f) => { - return ` -
- ${mapjoin(f.items, (i) => { - return `
${this.$i18n(i.label)}
`; - })} -
- `; - })} -
- `; + if (direction2 === "right") { + return ``; + } + if (direction2 === "up") { + return ``; + } + if (direction2 === "down") { + return ``; + } + return ``; +}; +class GuideLineView extends EditorElement { + template() { + return ``; } initState() { - var filters = this.parseFilter(this.props.value || []); return { - filters, - selectedTabIndex: 1, - selectedIndex: -1, - selectedFilter: null + list: [] }; } - template() { - return ` -
-
-
-
-
- -
-
- -
-
- -
-
-
-
- ${this.makeFilterSelect()} -
-
- ${this.makeFilterTemplateSelect()} -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
`; + [BIND("$guide")]() { + const line2 = this.createGuideLine(this.state.list); + return { + svgDiff: `${line2}` + }; } - [CLICK("$header .tab-item:not(.empty-item)")](e) { - var selectedTabIndex = +e.$dt.attr("data-value"); - if (this.state.selectedTabIndex === selectedTabIndex) { + createLayerLine() { + return ""; + } + filterGuideLine(list2) { + list2 = list2.filter(Boolean); + return list2; + } + createGuideLine(list2) { + var images = []; + var texts = []; + list2 = this.filterGuideLine(list2); + for (var i = 0, len2 = list2.length; i < len2; i++) { + const [ + source2, + target, + axis, + dist$1, + newTarget, + sourceVerties, + targetVerties + ] = list2[i]; + const localDist = dist(source2, target); + const localSourceVertex = this.$viewport.applyVertex(source2); + const localTargetVertex = this.$viewport.applyVertex(target); + let localNewTargetVertex; + if (newTarget) { + localNewTargetVertex = this.$viewport.applyVerties([newTarget])[0]; + } + if (axis === "x") { + if (localDist > 0) { + images.push(line(localSourceVertex, localTargetVertex, "dash-line")); + } + if (localNewTargetVertex) { + images.push(line(localTargetVertex, localNewTargetVertex, "dash-line")); + } + } + if (axis === "y") { + if (localDist > 0) { + images.push(line(localSourceVertex, localTargetVertex, "dash-line")); + } + if (localNewTargetVertex) { + images.push(line(localTargetVertex, localNewTargetVertex, "dash-line")); + } + } + if (axis === "x") { + images.push(hLineByPoint(localTargetVertex, localSourceVertex)); + } + if (axis === "y") { + images.push(vLineByPoint(localTargetVertex, localSourceVertex)); + } + if (this.state.hasVerties) { + images.push(point(localSourceVertex, 3, "vertex")); + images.push(point(localTargetVertex, 3, "vertex")); + } + if (sourceVerties) { + if (this.$context.selection.isOne && this.$editor.isPointerDown || this.$context.selection.isMany && !this.$editor.isPointerMove) { + images.push(rect(this.$viewport.applyVerties(sourceVerties))); + } + } + if (targetVerties) { + images.push(rect(this.$viewport.applyVerties(targetVerties))); + } + } + return [...images, ...texts].join(""); + } + removeGuideLine() { + this.setState({ + list: [] + }); + } + setGuideLine(list2, hasVerties = false) { + this.setState({ + list: list2, + hasVerties + }); + } + refreshSmartGuides(targetVertiesList) { + if (this.$context.selection.isEmpty) return; + const sourceVerties = toRectVerties(this.$context.selection.verties); + let targetList; + if (targetVertiesList) { + targetList = targetVertiesList.map((it) => toRectVerties(it)); + } else { + const targets = this.$context.snapManager.snapTargetLayers.map((target) => { + const rectVerties = toRectVerties(target.verties); + return { + targetVerties: rectVerties, + dist: dist(rectVerties[4], sourceVerties[4]) + }; + }); + targets.sort((a, b) => { + return a.dist - b.dist; + }); + targetList = targets.map((target) => target.targetVerties); } - this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach((it) => it.removeClass("selected")); - this.$el.$$(`[data-value="${selectedTabIndex}"]`).forEach((it) => it.addClass("selected")); - this.setState({ selectedTabIndex }, false); + const xList = targetList.map((targetVerties) => makeGuidePoint(sourceVerties, targetVerties)); + xList.sort((a, b) => { + return a[3] - b[3]; + }); + const list2 = [xList[0], xList[1]].filter(Boolean); + this.setGuideLine(list2); } - [DRAGSTART("$filterSelect .item")](e) { - var filter2 = e.$dt.attr("value"); - e.dataTransfer.setData("filter/type", filter2); + refreshSmartGuidesForVerties(dist2 = 0) { + let verties = this.$context.selection.verties; + if (verties.length) { + verties = [ + ...verties, + lerp([], verties[0], verties[1], 0.5), + lerp([], verties[1], verties[2], 0.5), + lerp([], verties[2], verties[3], 0.5), + lerp([], verties[3], verties[0], 0.5) + ]; + } + const guides = this.$context.snapManager.findGuide(verties, dist2); + this.setGuideLine(guides, true); } - [DRAGOVER("$connectedLinePanel") + PREVENT]() { + [SUBSCRIBE("removeGuideLine", REFRESH_SELECTION)]() { + this.removeGuideLine(); } - [DROP("$connectedLinePanel") + PREVENT](e) { - var offset = { x: e.offsetX, y: e.offsetY }; - var filterType = e.dataTransfer.getData("filter/type"); - this.makeFilterNode(filterType, { bound: offset }); + [SUBSCRIBE("refreshGuideLineByTarget")](targetVertiesList = []) { + return this.refreshSmartGuides(targetVertiesList); } - makeFilterNode(filterType, opt = {}) { - this.state.filters.push(this.makeFilter(filterType, opt)); - this.state.selectedIndex = this.state.filters.length - 1; - this.state.selectedFilter = this.state.filters[this.state.selectedIndex]; - this.refresh(); - this.modifyFilter(); + get currentDistWithScale() { + return 1 / this.$viewport.scale; } - applyTemplate(templateType) { - var template = svgFilterPreset[templateType]; - if (template) { - this.setState({ - selectedIndex: -1, - selectedFilter: null, - filters: this.parseFilter(template) - }, false); - this.refresh(); - this.modifyFilter(); + [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION_TOOL)]() { + this.refreshSmartGuidesForVerties(this.currentDistWithScale); + } + [SUBSCRIBE(UPDATE_CANVAS)]() { + const expect = this.$context.selection.hasChangedField("d", "clip-path"); + if (!expect) { + this.refreshSmartGuidesForVerties(this.currentDistWithScale); } } - getSpec(filterType) { - return SVGFilterSpecList[filterType]; +} +function guideLineView(editor) { + editor.registerUI("canvas.view", { + GuideLineView + }); +} +var HistoryProperty$1 = ""; +class HistoryProperty extends BaseProperty { + afterRender() { + this.show(); } - makeFilterEditorTemplate(s, filter2, key) { - var objectId = `${filter2.type}${key}${this.state.selectedIndex}${Date.now()}`; - if (s.inputType === "color-matrix") { - return createComponent("ColorMatrixEditor", { - ref: `$colorMatrix${objectId}`, - label: s.title, - key, - column: s.column, - values: filter2[key].join(" "), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "input-array") { - return createComponent("InputArrayEditor", { - ref: `$inputArray${objectId}`, - label: s.title, - key, - "column-label": "R,G,B,A,M", - "row-label": "R,G,B,A", - column: s.column, - values: filter2[key].join(" "), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "blend") { - return createComponent("BlendSelectEditor", { - ref: `$blend${objectId}`, - label: s.title, - key, - value: filter2[key].toString(), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "select") { - var options2 = s.options; - if (isFunction(s.options)) { - options2 = s.options(this.state.filters); + getTitle() { + return "History"; + } + getBody() { + return ` +
+ `; + } + [LOAD("$body") + DOMDIFF]() { + return this.$editor.context.history.map((it, index2) => { + if (it === "-") { + return `
-
`; } - return createComponent("SelectEditor", { - ref: `$select${objectId}`, - label: s.title, - options: options2, - key, - value: filter2[key].toString(), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "text") { - return createComponent("TextEditor", { - ref: `$text${objectId}`, - label: s.title, - key, - value: filter2[key].toString(), - onchange: "changeTextEditor" - }); - } else if (s.inputType === "number-range") { - return createComponent("NumberRangeEditor", { - ref: `$numberrange${objectId}`, - label: s.title, - layout: "block", - min: s.min, - max: s.max, - step: s.step, - key, - value: filter2[key].toString(), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "color") { - return createComponent("ColorViewEditor", { - ref: `$colorview${objectId}`, - label: s.title, - key, - value: filter2[key].toString(), - onchange: "changeRangeEditor" - }); - } else if (s.inputType === "FuncFilter") { - return createComponent("FuncFilterEditor", { - ref: `$funcFilter${objectId}`, - label: s.title, - key, - value: filter2[key].toString(), - onchange: "changeFuncFilterEditor" - }); - } else if (s.inputType === "ImageSelectEditor") { - return createComponent("ImageSelectEditor", { - ref: `$imageSelect${objectId}`, - label: s.title, - key, - value: filter2[key].toString(), - onchange: "changeRangeEditor" - }); + return ` +
+ ${index2 === this.$editor.context.history.currentIndex ? obj$2.arrowRight : ""} + ${it.message} +
+ `; + }); + } + [SUBSCRIBE("refreshHistoryList")]() { + this.refresh(); + } +} +function history(editor) { + editor.registerUI("inspector.tab.history", { + HistoryProperty + }); +} +var HoverView$1 = ""; +class HoverView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--hover-view sepia(0.2)" + }, /* @__PURE__ */ createElementJsx("div", { + class: "elf--hover-rect", + ref: "$hoverRect" + })); + } + checkModeView() { + const e = this.$config.get("bodyEvent"); + if (!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))) { + return false; + } + const canvas = Dom.create(e.target).closest("elf--page-container"); + if (!canvas) + return false; + return this.$modeView.isCurrentMode(ViewModeType.CanvasView) && this.$stateManager.isPointerUp; + } + [CONFIG("bodyEvent") + IF("checkModeView")]() { + var _a, _b, _c; + if (this.$config.true("set.move.control.point")) { + this.$context.selection.setHoverId(""); + this.renderHoverLayer(); + return; + } + const filteredList = this.$context.selection.filteredLayers; + const point2 = this.$viewport.getWorldPosition(this.$config.get("bodyEvent")); + const items = filteredList.filter((it) => it.hasPoint(point2[0], point2[1])).filter((it) => it.isNot("artboard")); + let hoverItems = items; + let id = (_a = hoverItems[0]) == null ? void 0 : _a.id; + if (this.$context.selection.isEmpty) { + id = (_b = hoverItems[0]) == null ? void 0 : _b.id; + } else if (this.$context.selection.isOne) { + const pathIds = this.$context.selection.current.pathIds; + hoverItems = hoverItems.filter((it) => pathIds.includes(it.id) === false || it.id === this.$context.selection.current.id); + id = (_c = hoverItems[0]) == null ? void 0 : _c.id; + } + if (!id) { + this.$context.selection.setHoverId(""); + this.renderHoverLayer(); + } else { + if (this.$context.selection.setHoverId(id)) { + this.renderHoverLayer(); + } + } + } + [CONFIG("set.move.control.point")]() { + this.renderHoverLayer(); + } + [SUBSCRIBE("refreshHoverView")](id) { + if (this.$context.selection.setHoverId(id)) { + this.renderHoverLayer(); + } + } + [SUBSCRIBE(UPDATE_VIEWPORT, UPDATE_CANVAS)]() { + this.$context.selection.setHoverId(""); + this.renderHoverLayer(); + } + createVisiblePath(current) { + if (!current.is("boolean-path")) { + return ""; + } + const newPath = current.absolutePath(); + newPath.transformMat4(this.$viewport.matrix); + return ` + + + + `; + } + renderHoverLayer() { + const items = this.$context.selection.hoverItems; + if (items.length === 0) { + this.refs.$hoverRect.updateDiff(""); + } else { + const verties = items[0].verties; + const line2 = this.createPointerLine(this.$viewport.applyVerties(verties)); + const offsetLine = this.createOffsetLine(); + this.refs.$hoverRect.updateDiff(line2 + offsetLine); + } + } + getOffsetVerties(current, parent) { + const currentVerties = current.verties; + const parentVerties = parent.verties; + const result = {}; + const left2 = this.$viewport.applyVerties([ + [ + currentVerties[0][0], + lerp([], currentVerties[0], currentVerties[3], 0.5)[1], + 0 + ], + [ + parentVerties[0][0], + lerp([], currentVerties[0], currentVerties[3], 0.5)[1], + 0 + ] + ]); + var dist$1 = dist(...left2); + if (dist$1 > 0) { + result.left = left2; } - return createComponent("RangeEditor", { - ref: `$range${objectId}`, - layout: "block", - label: s.title, - min: s.min, - max: s.max, - step: s.step, - key, - value: filter2[key].toString(), - units: s.units, - onchange: "changeRangeEditor" - }); + const top2 = this.$viewport.applyVerties([ + [ + lerp([], currentVerties[0], currentVerties[1], 0.5)[0], + currentVerties[1][1], + 0 + ], + [ + lerp([], currentVerties[0], currentVerties[1], 0.5)[0], + parentVerties[1][1], + 0 + ] + ]); + var dist$1 = dist(...top2); + if (dist$1 > 0) { + result.top = top2; + } + return result; } - makeOneFilterTemplate(spec, filter2) { + createOffsetLine() { + const item = this.$context.selection.hoverItems[0] || this.$context.selection.current; + if (!item || !item.parent) { + return ""; + } + if (item.parent && item.parent.is("project")) { + return ""; + } + if (this.$context.selection.isEmpty) { + const offsetVerties = this.getOffsetVerties(item, item.parent); + return ` + + + + `; + } else { + const offsetVerties = this.getOffsetVerties(item, this.$context.selection.current); + return ` + + + + `; + } + } + createPointerLine(pointers) { + if (pointers.length === 0) + return ""; + pointers = pointers.filter((_, index2) => index2 < 4); + return ``; + } +} +function hoverView(editor) { + editor.registerUI("canvas.view", { + HoverView + }); +} +const image_size = [ + "", + "100x100", + "200x200", + "300x300", + "400x300", + "900x600", + "1024x762" +]; +class ImageProperty extends BaseProperty { + getClassName() { + return "item"; + } + getTitle() { + return this.$i18n("image.property.title"); + } + getBody() { + return `
`; + } + getFooter() { return ` -
-
- -
- -
+
+ + +
-
- ${keyMapJoin(spec, (key, value) => { - return this.makeFilterEditorTemplate(value, filter2, key); +
+ ${createComponent("SelectEditor", { + ref: "$select", + label: this.$i18n("image.property.size"), + key: "size", + value: "", + options: image_size, + onchange: "changeImageSize" })}
-
- `; + `; } - makeFilterTemplate(filter2) { - return this.makeOneFilterTemplate(this.getSpec(filter2.type), filter2); + [SUBSCRIBE_SELF("changeImageSize")](key, value) { + var [width2, height2] = value.split("x").map((it) => it); + this.$commands.executeCommand("setAttribute", "resize image", this.$context.selection.packByValue({ + width: width2, + height: height2 + })); } - [LOAD("$filterList")]() { - if (this.state.selectedFilter && this.state.selectedFilter.isSource() === false) { - return this.makeFilterTemplate(this.state.selectedFilter); + [CLICK("$resize")]() { + var current = this.$context.selection.current; + if (current) { + this.$commands.executeCommand("setAttribute", "resize image", this.$context.selection.packByValue({ + width: (item) => item.naturalWidth, + height: (item) => item.naturalHeight + })); } - return ""; } - modifyFilter() { - this.state.filters.forEach((f) => { - if (f.isLight() && f.connected.length) { - f.connected.forEach((c2) => { - this.state.filters.filter((s) => s.id === c2.id).forEach((lightManager) => { - lightManager.reset({ - lightInfo: f.toLightString() - }); - }); - }); - } + [BIND("$sizeInfo")]() { + var current = this.$context.selection.current || {}; + return { + innerHTML: `${this.$i18n("image.property.width")}: ${current.naturalWidth}, ${this.$i18n("image.property.height")}: ${current.naturalHeight}` + }; + } + [LOAD("$body")]() { + var current = this.$context.selection.current || {}; + var src = current.src || ""; + return createComponent("ImageSelectEditor", { + ref: "$1", + key: "src", + value: src, + onchange: "changeSelect" }); - this.parent.trigger(this.props.onchange, this.props.key, this.state.filters); } - parseFilter(list2 = []) { - return list2.map((it) => SVGFilter.parse(it)); + [SUBSCRIBE_SELF("changeSelect")](key, value, info) { + var current = this.$context.selection.current; + if (current) { + current.reset(__spreadValues({ + src: value + }, info)); + this.bindData("$sizeInfo"); + this.$commands.executeCommand("setAttribute", "change image", this.$context.selection.packByValue(__spreadValues({ + src: value + }, info))); + } } - makeFilter(type, opt = {}) { - return SVGFilter.parse(__spreadProps(__spreadValues({}, opt), { type })); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(["image"]); } - [CLICK("$filterSelect .item[value]")](e) { - var filterType = e.$dt.attr("value"); - this.makeFilterNode(filterType); +} +var ImageSelectEditor$1 = ""; +class ImageSelectEditor extends EditorElement { + initState() { + return { + key: this.props.key, + value: this.props.value + }; } - [CLICK("$filterTemplateSelect .item[value]")](e) { - var templateType = e.$dt.attr("value"); - this.applyTemplate(templateType); + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--image-select-editor", + ref: "$body" + }); } - [CLICK("$filterList .filter-menu .del")]() { - this.removeFilter(this.state.selectedFilter.id); + getValue() { + return this.state.value; } - [LOAD("$graphPanel")]() { - return this.makeGraphPanel(); + setValue(value) { + this.setState({ value }); } - selectFilter(index2) { - this.setState({ - selectedIndex: index2, - selectedFilter: this.state.filters[index2] - }, false); - this.load("$filterList"); + [LOAD("$body")]() { + const project2 = this.$context.selection.currentProject; + if (!project2) + return; + const imageUrl = project2.getImageValueById(this.state.value); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { + class: "preview-container" + }, imageUrl ? /* @__PURE__ */ createElementJsx("img", { + src: imageUrl + }) : null, /* @__PURE__ */ createElementJsx("input", { + type: "file", + ref: "$file", + accept: "image/*" + })), /* @__PURE__ */ createElementJsx("div", { + class: "select-container" + }, /* @__PURE__ */ createElementJsx("button", { + type: "button", + ref: "$select" + }, this.$i18n("image.select.editor.button")))); } - [POINTERSTART("$graphPanel .filter-node") + MOVE() + END()](e) { - this.$target = e.$dt; - this.$point = null; - this.pointType = "object"; - this.pointIndex = 0; - var rect2 = this.refs.$graphPanel.rect(); - this.rect = rect2; - var index2 = +this.$target.attr("data-index"); - this.selectFilter(index2); - this.$target.onlyOneClass("selected"); - var pointer = Dom.create(e.target); - if (pointer.hasClass("out")) { - this.$point = pointer; - this.pointType = "out"; - this.pointIndex = 0; - } else if (pointer.hasClass("in")) { - this.$point = pointer; - this.pointType = "in"; - this.pointIndex = +pointer.attr("data-index"); - } else { - var filter2 = this.state.selectedFilter; - this.startXY = clone$1(filter2.bound); - } - if (this.pointType === "in" || this.pointType === "out") { - var inRect = pointer.rect(); - var x = inRect.x - rect2.x; - var y = inRect.y - rect2.y; - var centerX = x + inRect.width / 2; - var centerY = y + inRect.height / 2; - this.startXY = { x: centerX, y: centerY }; + [CHANGE("$file")](e) { + var files = [...e.target.files]; + if (files.length) { + this.$commands.emit("updateImageAssetItem", files[0], (imageId) => { + this.trigger("changeImageSelectEditor", imageId); + }); } - this.startXY.dx = 0; - this.startXY.dy = 0; - this.load("$dragLinePanel"); } - [LOAD("$dragLinePanel")]() { - if (this.pointType === "in" || this.pointType === "out") { - var { x, y, dx, dy } = this.startXY; - return ` - - - - `; - } else { - return ""; - } + [CLICK("$select")]() { + this.emit("showImageSelectPopup", { + context: this, + changeEvent: "changeImageSelectEditor", + value: this.state.value + }); } - makeConnectedPath(points) { - var manager = new PathStringManager(); - var first = points[0]; - var last = points[points.length - 1]; - if (!first) - return ""; - if (!last) - return ""; - var dist2 = Math.abs(first.x - last.x) / 2; - manager.M(first).C({ x: first.x + dist2, y: first.y }, { x: last.x - dist2, y: last.y }, last); - return manager.d; + [SUBSCRIBE("changeImageSelectEditor")](value) { + this.updateData({ value }); + this.refresh(); } - createPath(sourceItem, connectedInfo) { - if (connectedInfo.path) { - return connectedInfo.path; - } - var sourceX = sourceItem.bound.x + connectedXAxis["1"][0]; - var sourceY = sourceItem.bound.y + connectedYAxis["1"][0]; - var target = this.state.filters.map((it, index3) => { - return { it, index: index3 }; - }).find((it) => { - if (!it) - return false; - if (!it.it) - return false; - return it && it.it.id === connectedInfo.id; - }); - var len2 = `${target.it.getInCount()}`; - var source2 = target.it.in.map((it, index3) => { - return { it, index: index3 }; - }).find((it) => { - if (!it) - return false; - if (!it.it) - return false; - return it.it.id === sourceItem.id; - }); - if (!source2) { - return []; - } - var index2 = source2.index; - var targetX = target.it.bound.x + inXAxis[len2][0]; - var targetY = target.it.bound.y + inYAxis[len2][index2]; - return [ - { x: sourceX, y: sourceY }, - { x: targetX, y: targetY } - ]; + updateData(data) { + this.setState(data, false); + this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); } - [LOAD("$connectedLinePanel")]() { - return ` - - ${this.state.filters.map((it) => { - return it.connected.map((connectedItem) => { - var path = this.createPath(it, connectedItem); - var sourceType = getSourceTypeString(it.type); - return ` - - - ${path.length && ` - - `} - - `; - }).join(""); - }).join("")} - - `; +} +var ImageSelectPopup$1 = ""; +class ImageSelectPopup extends BasePopup { + getTitle() { + return "Select a image"; } - [CLICK("$connectedLinePanel .connected-remove-circle")](e) { - var [tid, sid] = e.$dt.attrs("data-target-id", "data-source-id"); - var filters = this.state.filters; - filters.filter((it) => it.id === sid).forEach((it) => { - it.connected = it.connected.filter((c2) => c2.id != tid); + getClassName() { + return "compact"; + } + initState() { + return { + value: "" + }; + } + updateData(opt = {}) { + this.setState(opt, false); + this.state.context.trigger(this.state.changeEvent, this.state.value, { + width: this.state.width, + height: this.state.height, + naturalWidth: this.state.naturalWidth, + naturalHeight: this.state.naturalHeight }); - filters.filter((it) => it.id === tid).forEach((it) => { - it.in = it.in.map((inObject) => { - if (inObject && inObject.id == sid) { - return null; - } - return inObject; - }); + } + getBody() { + return `
`; + } + [LOAD("$imageBox") + DOMDIFF]() { + return ""; + } + [CLICK("$imageBox .image-item")](e) { + var $img = e.$dt.$("img"); + this.updateData({ + value: $img.attr("data-id"), + naturalWidth: $img.naturalWidth, + naturalHeight: $img.naturalHeight, + width: $img.naturalWidth, + height: $img.naturalHeight }); + this.trigger("hideImageSelectPopup"); + } + [SUBSCRIBE("showImageSelectPopup")](data, params) { + this.setState({ + context: data.context, + changeEvent: data.changeEvent, + value: data.value, + params + }, false); this.refresh(); - this.modifyFilter(); + this.show(500); } - getCenterXY($target) { - var inRect = $target.rect(); - var x = inRect.x - this.rect.x; - var y = inRect.y - this.rect.y; - var centerX = x + inRect.width / 2; - var centerY = y + inRect.height / 2; - return { x: centerX, y: centerY }; + [SUBSCRIBE("hideImageSelectPopup")]() { + this.hide(); } - end(dx, dy) { - if (this.pointType === "in" || this.pointType === "out") { - this.startXY.dx = dx; - this.startXY.dy = dy; - var filter2 = this.state.selectedFilter; - var e = this.$config.get("bodyEvent"); - var $target = Dom.create(e.target); - var $targetNode = $target.closest("filter-node"); - if (this.pointType === "out") { - if ($target.hasClass("in")) { - var targetFilter = this.state.filters[+$targetNode.attr("data-index")]; - if (targetFilter) { - if (!targetFilter.hasLight() && filter2.isLight()) - ; - else { - var targetIndex = +$target.attr("data-index"); - if (!targetFilter.in[targetIndex]) { - targetFilter.setIn(targetIndex, filter2); - filter2.setConnected(targetFilter); - } - } - } - } - } else if (this.pointType === "in") { - if ($target.hasClass("out")) { - var targetFilter = this.state.filters[+$targetNode.attr("data-index")]; - if (targetFilter) { - if (filter2.hasLight() && !targetFilter.isLight()) - ; - else { - if (!filter2.in[this.pointIndex]) { - filter2.setIn(this.pointIndex, targetFilter); - targetFilter.setConnected(filter2); - } - } - } - } - } - this.pointType = ""; - } - this.load("$dragLinePanel"); - this.load("$connectedLinePanel"); - this.modifyFilter(); +} +function image(editor) { + editor.registerElement({ + ImageSelectEditor + }); + editor.registerUI("inspector.tab.style", { + ImageProperty + }); + editor.registerUI("popup", { + ImageSelectPopup + }); +} +class ImageAssetPicker extends EditorElement { + initState() { + return { + mode: "grid" + }; } - move(dx, dy) { - var filter2 = this.state.selectedFilter; - if (filter2) { - this.startXY.dx = dx; - this.startXY.dy = dy; - if (this.pointType === "in") { - this.load("$dragLinePanel"); - } else if (this.pointType === "out") { - this.load("$dragLinePanel"); - } else { - filter2.reset({ - bound: { x: this.startXY.x + dx, y: this.startXY.y + dy } - }); - this.$target.css({ - left: filter2.bound.x, - top: filter2.bound.y - }); - this.load("$connectedLinePanel"); - } - } + template() { + return ` +
+
+
+ `; } - makeGraphPanel() { - return this.state.filters.map((it, index2) => { - const selectedClass = index2 === this.state.selectedIndex ? "selected" : ""; + [LOAD("$imageList") + DOMDIFF]() { + var current = this.$context.selection.currentProject || { images: [] }; + var images = current.images; + var results = images.map((image2) => { return ` -
-
${this.$i18n(it.type)}
-
${iconUse("close")}
-
${getIcon(it.type)}
-
- ${repeat(it.getInCount()).map((itIn, inIndex) => { - return `
`; - }).join("")} +
+
+
- -
${iconUse("chevron_right")}
- ${it.hasLight() ? `
` : ""}
`; }); + return results; } - [SUBSCRIBE_SELF("changeFuncFilterEditor")](key, value) { - var filter2 = this.state.selectedFilter; - if (filter2) { - filter2.reset({ - [key]: value - }); - } - this.modifyFilter(); + [CLICK("$imageList .image-item")](e) { + var $img = e.$dt.$("img"); + this.updateData($img.attr("src")); } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { - var filter2 = this.state.selectedFilter; - if (filter2) { - filter2.reset({ - [key]: value - }); - } - this.modifyFilter(); + updateData(localUrl) { + this.parent.trigger(this.props.onchange, localUrl); } - [SUBSCRIBE_SELF("changeTextEditor")](key, value) { - var filter2 = this.state.selectedFilter; - if (filter2) { - filter2.reset({ - [key]: value - }); - } - this.modifyFilter(); + [SUBSCRIBE("addImageAsset")]() { + this.refresh(); } - removeFilter(id) { - var filters = this.state.filters.filter((it) => it.id != id); - filters.forEach((it) => { - it.connected = it.connected.filter((c2) => c2.id != id); - it.in = it.in.filter((c2) => c2.id != id); - }); - if (this.state.selectedFilter.id === id) { - this.state.selectedFilter = null; - this.state.selectedIndex = -1; +} +function imageAsset(editor) { + editor.registerElement({ + ImageAssetPicker + }); +} +function inspector(editor) { + editor.context.config.set("inspector.selectedValue", "style"); + editor.registerUI("inspector.tab", { + Style: { + title: editor.$i18n("inspector.tab.title.design"), + value: "style" + }, + Transition: { + title: editor.$i18n("inspector.tab.title.transition"), + value: "transition" + }, + Code: { + title: editor.$i18n("inspector.tab.title.code"), + value: "code" } - this.setState({ - filters - }); - this.modifyFilter(); - } - [CLICK("$graphPanel .filter-node .remove")](e) { - var $target = e.$dt.closest("filter-node"); - var index2 = +$target.attr("data-index"); - var f = this.state.filters[index2]; - this.removeFilter(f.id); - } + }); } -var SVGFilterPopup$1 = ""; -class SVGFilterPopup extends BasePopup { +var KeyframePopup$1 = ""; +class KeyframePopup extends BasePopup { getTitle() { - return this.$i18n("svgfilter.popup.title"); - } - getClassName() { - return "transparent"; + return this.$i18n("keyframe.popup.title"); } initState() { return { - changeEvent: "changeSVGFilterPopup", - id: "", - preview: true, - filters: [] + name: "none", + offsets: [] }; } updateData(opt) { this.setState(opt, false); - this.emit(this.state.changeEvent, this.state); + this.emit("changeKeyframePopup", this.state); } getBody() { return ` -
+
-
+ ${this.templateForName()} + ${this.templateForOffset()}
`; } - [LOAD("$editor")]() { - return createComponent("SVGFilterEditor", { - ref: "$filter", - title: "Filter Type", - key: "filter", - value: this.state.filters, - onchange: (key, filters) => { - this.updateData({ - filters - }); - } - }); + templateForOffset() { + return ` +
+ ${createComponent("OffsetEditor", { ref: "$offsetEditor" })} +
+ `; } - [SUBSCRIBE("showSVGFilterPopup")](data) { - data.filters = data.filters.map((it) => { - return SVGFilter.parse(it); - }); - data.preview = isNotUndefined(data.preview) ? data.preview : true; + templateForName() { + return ` +
+ +
+ +
+
+ `; + } + [INPUT("$name")](e) { + if (this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/)) { + this.updateData({ name: this.refs.$name.value }); + } else { + e.preventDefault(); + e.stopPropagation(); + return false; + } + } + getOffsetData() { + var offsets = this.state.offsets.map((it) => it); + return { offsets }; + } + refresh() { + this.refs.$name.val(this.state.name); + this.emit("showOffsetEditor", this.getOffsetData()); + } + [SUBSCRIBE("changeOffsetEditor")](data) { + this.updateData(data); + } + [SUBSCRIBE("showKeyframePopup")](data) { this.setState(data); - this.show(1e3); + this.refresh(); + this.show(240); } - [SUBSCRIBE("hideSVGFilterPopup")]() { + [SUBSCRIBE("hideKeyframePopup")]() { this.$el.hide(); } } -var SVGFilterSelectEditor$1 = ""; -class SVGFilterSelectEditor extends EditorElement { - initState() { - var value = this.props.value; - return { - options: [], - label: this.props.label || "", - value - }; +var KeyframeProperty$1 = ""; +class KeyframeProperty extends BaseProperty { + getTitle() { + return this.$i18n("keyframe.property.title"); } - template() { - var { label } = this.state; - var hasLabel = label ? "has-label" : ""; + getBody() { + return `
`; + } + getTools() { return ` -
- ${label ? `` : ""} - - - + + `; + } + makeProperty(property) { + var key = property.key; + if (key === "x") + key = "left"; + else if (key === "y") + key = "top"; + return ` +
+ +
${property.value}
+
+ `; + } + makeOffset(offset) { + return ` +
+ +
+ ${offset.properties.map((p) => { + return this.makeProperty(p); + }).join("")} +
+
+ `; + } + makeKeyframeTemplate(keyframe2, index2) { + index2 = index2.toString(); + return ` +
+
+
${keyframe2.name}
+
+
+ +
- `; + +
+
+
+
+ ${keyframe2.offsets.map((o) => { + return ` +
+ `; + }).join("")} +
+
+
+ ${keyframe2.offsets.map((offset) => { + return this.makeOffset(offset); + }).join("")} +
+
+ 
${keyframe2.toString().trim()}
+
+
+ `; } - [CLICK("$remove")]() { - this.updateData({ - value: "" + [CLICK("$keyframeList .keyframe-item .title .group button[data-type]")](e) { + var $keyframeItem = e.$dt.closest("keyframe-item"); + var index2 = +$keyframeItem.attr("data-index"); + var type = e.$dt.attr("data-type"); + var current = this.$context.selection.currentProject; + if (!current) + return; + var currentKeyframe = current.keyframes[index2]; + if (currentKeyframe) { + currentKeyframe.reset({ + selectedType: type + }); + } + $keyframeItem.attr("data-selected-value", type); + } + [CLICK("$keyframeList .keyframe-item .offset-list")](e) { + var index2 = +e.$dt.closest("keyframe-item").attr("data-index"); + var current = this.$context.selection.currentProject; + if (!current) + return; + this.viewKeyframePicker(index2); + } + [CLICK("$keyframeList .del") + PREVENT](e) { + var removeIndex = e.$dt.attr("data-index"); + var current = this.$context.selection.currentProject; + if (!current) + return; + current.removeKeyframe(removeIndex); + this.$commands.emit("refreshProject", current); + this.refresh(); + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + const current = this.$context.selection.current; + if (current && current.hasChangedField("keyframes")) { + this.refresh(); + } + } + [LOAD("$keyframeList")]() { + var current = this.$context.selection.currentProject; + if (!current) + return ""; + var keyframes = current.keyframes || []; + return keyframes.map((keyframe2, index2) => { + return this.makeKeyframeTemplate(keyframe2, index2); }); } - [CLICK("$open")]() { - var value = this.state.value; - if (value.includes("id")) { - var currentProject = this.$context.selection.currentProject; - var index2 = currentProject.getSVGFilterIndex(value); - if (index2 > -1) { - this.trigger("openSVGFilterPopup", index2); - } + [CLICK("$add")]() { + var current = this.$context.selection.currentProject; + if (current) { + current.createKeyframe(); + this.refresh(); + this.$commands.emit("refreshProject", current); + } else { + window.alert("Please select a project."); } } - getValue() { - return this.state.value; + viewKeyframePicker(index2) { + if (typeof this.selectedIndex === "number") { + this.selectItem(this.selectedIndex, false); + } + this.selectedIndex = +index2; + this.selectItem(this.selectedIndex, true); + this.current = this.$context.selection.currentProject; + if (!this.current) + return; + this.currentKeyframe = this.current.keyframes[this.selectedIndex]; + this.viewKeyframePropertyPopup(); } - setValue(value) { - this.setState({ value }); + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.getRef("$keyframeIndex", selectedIndex).addClass("selected"); + } else { + this.getRef("$keyframeIndex", selectedIndex).removeClass("selected"); + } + if (this.current) { + this.current.keyframes.forEach((it, index2) => { + it.selected = index2 === selectedIndex; + }); + } } - [BIND("$options")]() { + viewKeyframePropertyPopup(position2) { + this.current = this.$context.selection.currentProject; + if (!this.current) + return; + this.currentKeyframe = this.current.keyframes[this.selectedIndex]; + const back = this.currentKeyframe; + const name = back.name; + const offsets = back.offsets; + this.emit("showKeyframePopup", { + position: position2, + name, + offsets + }); + } + [SUBSCRIBE("changeKeyframePopup")](data) { + var project2 = this.$context.selection.currentProject; + if (!project2) + return; + this.currentKeyframe = project2.keyframes[this.selectedIndex]; + if (this.currentKeyframe) { + this.currentKeyframe.reset(data); + } + this.refresh(); + this.$commands.emit("refreshProject", project2); + } +} +class OffsetEditor extends EditorElement { + initState() { return { - "data-count": this.state.options.length.toString() + offsets: [] }; } - [LOAD("$options")]() { - var current = this.$context.selection.currentProject; - var options2 = ""; - if (current) { - options2 = current.svgfilters.map((it) => it.id); - options2 = options2.length ? "," + options2.join(",") : ""; + updateData(opt) { + this.setState(opt, false); + this.modifyOffset(); + } + modifyOffset() { + this.emit("changeOffsetEditor", this.state); + } + template() { + return ` +
+ ${this.templateForOffset()} + ${this.templateForOffsetInput()} + ${this.templateForProperty()} +
`; + } + templateForOffsetInput() { + return ` +
+
+ +
+ ${createComponent("InputRangeEditor", { + key: "offset", + min: 0, + max: 100, + step: 0.01, + value: Length.percent(0), + ref: "$offsetInput", + units: "%", + onchange: "changeRangeEditor" + })} +
+
+
+ `; + } + [SUBSCRIBE("changeRangeEditor")](key, value) { + var offset = this.state.offsets[this.selectedIndex]; + if (offset) { + offset.offset = value.clone(); + this.refresh(); + this.modifyOffset(); } - options2 += ",-,new"; - options2 = options2.split(","); - var arr = options2.map((it) => { - var value = it; - var label = it; - if (value.includes(":")) { - var [value, label] = value.split(":"); + } + templateForProperty() { + return createComponent("CSSPropertyEditor", { + ref: "$offsetPropertyEditor", + "hide-refresh": true, + onchange: "changeCSSPropertyEditor" + }); + } + templateForOffset() { + return `
`; + } + makeOffset(offset, index2) { + return `
`; + } + selectItem(selectedIndex) { + if (isUndefined(selectedIndex)) { + selectedIndex = -1; + for (var i = 0, len2 = this.state.offsets.length; i < len2; i++) { + if (this.state.offsets[i].selected) { + selectedIndex = i; + break; + } } - if (label === "") { - label = this.props["none-value"] ? this.props["none-value"] : ""; - } else if (label === "-") { - label = "----------"; - value = ""; + if (selectedIndex === -1) { + selectedIndex = 0; } - var selected = value === this.state.value ? "selected" : ""; - return ``; + } + this.getRef("$offset").attr("data-selected-value", selectedIndex); + this.selectedIndex = selectedIndex; + this.state.offsets.forEach((it, index2) => { + it.selected = index2 === selectedIndex; }); - return arr; + var selectedList = this.state.offsets.filter((it) => it.selected); + this.selectedOffsetItem = selectedList.length ? selectedList[0] : {}; + this.refreshOffsetInput(); + } + refreshOffsetInput() { + var offset = this.state.offsets[this.selectedIndex]; + if (offset) { + this.children.$offsetInput.setValue(offset.offset); + } + } + [LOAD("$offset")]() { + return this.state.offsets.map((it, index2) => { + return this.makeOffset(it, index2); + }); + } + isNotOffsetItem(e) { + return !Dom.create(e.target).hasClass("offset-item") && !this.currentOffset; + } + [CLICK("$offset") + IF("isNotOffsetItem") + PREVENT](e) { + this.baseOffsetWidth = this.refs.$offset.width(); + this.baseOffsetArea = this.refs.$offset.offset(); + var currentX = e.xy.x; + var newOffset = Length.percent((currentX - this.baseOffsetArea.left) / this.baseOffsetWidth * 100).round(100); + this.state.offsets.push(new Offset({ + offset: newOffset + })); + this.selectItem(this.state.offsets.length - 1, true); + this.refresh(); + this.modifyOffset(); + } + refreshOffsetProperty() { + this.emit("showCSSPropertyEditor", this.selectedOffsetItem.properties); } - setOptions(options2 = "") { - this.setState({ - options: options2.split(this.state.splitChar).map((it) => it.trim()) - }); + [POINTERSTART("$offset .offset-item") + MOVE("moveOffset") + END("endOffset")](e) { + this.baseOffsetWidth = this.refs.$offset.width(); + this.baseOffsetArea = this.refs.$offset.offset(); + this.currentOffsetleft = Length.parse(e.$dt.css("left")); + this.currentOffset = e.$dt; + this.currentOffsetIndex = +e.$dt.attr("data-offset-index"); + this.currentOffsetXY = e.xy; + this.baseOffsetMin = this.baseOffsetArea.left; + this.baseOffsetMax = this.baseOffsetArea.left + this.baseOffsetWidth; + this.isRemoveOffset = false; + if (e.altKey) { + this.isRemoveOffset = true; + } else { + this.selectItem(this.currentOffsetIndex, true); + this.refreshOffsetInput(); + } } - [CHANGE("$options")]() { - var value = this.refs.$options.value; - if (value == "new") { - this.$commands.emit("addSVGFilterAssetItem", (index2, id) => { - this.updateData({ value: id }); - this.refresh(); - this.trigger("openSVGFilterPopup", index2); - }); - } else if (value === "-") - ; - else { - this.updateData({ value }); + moveOffset(dx) { + if (this.isRemoveOffset) + return; + var currentX = this.currentOffsetXY.x + dx; + if (currentX < this.baseOffsetMin) { + currentX = this.baseOffsetMin; + } + if (currentX > this.baseOffsetMax) { + currentX = this.baseOffsetMax; } + var newOffset = Length.percent((currentX - this.baseOffsetMin) / this.baseOffsetWidth * 100).round(100); + this.state.offsets[this.currentOffsetIndex].offset.set(newOffset.value); + this.currentOffset.css("left", newOffset); + this.refreshOffsetInput(); + this.modifyOffset(); } - updateData(data) { - this.setState(data, false); - this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); + removeOffset(index2) { + this.state.offsets.splice(index2, 1); + this.selectItem(0); + this.refresh(); + this.modifyOffset(); } - [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(1e3)]() { - this.load("$options"); + endOffset() { + if (this.isRemoveOffset) { + window.setTimeout(() => { + this.currentOffset = null; + this.removeOffset(this.currentOffsetIndex); + }, 10); + } else { + window.setTimeout(() => { + this.currentOffset = null; + this.refreshOffsetInput(); + this.refreshOffsetProperty(); + this.modifyOffset(); + }, 10); + } } - [SUBSCRIBE("openSVGFilterPopup")](index2) { - this.emit("refreshSVGFilterAssets"); - this.emit("refreshSVGArea"); - var currentProject = this.$context.selection.currentProject || { - svgfilters: [] - }; - var svgfilter = currentProject.svgfilters[index2]; - this.emit("showSVGFilterPopup", { - changeEvent: "changeSVGFilterEditorRealUpdate", - preview: false, - index: index2, - filters: svgfilter.filters - }); + refresh() { + this.load(); + this.refreshOffsetProperty(); } - [SUBSCRIBE("changeSVGFilterEditorRealUpdate")](params) { - var project2 = this.$context.selection.currentProject; - if (project2) { - project2.setSVGFilterValue(params.index, { - filters: params.filters - }); - this.emit("refreshSVGFilterAssets"); - this.emit("refreshSVGArea"); + [SUBSCRIBE("showOffsetEditor")](data) { + this.setState(data); + this.selectItem(); + this.refresh(); + } + [SUBSCRIBE("changeCSSPropertyEditor")](properties = []) { + var offset = this.state.offsets[this.selectedIndex]; + if (offset) { + offset.properties = [...properties]; } + this.modifyOffset(); } } -function svgItem(editor) { +function keyframe(editor) { editor.registerElement({ - ColorMatrixEditor, - FuncFilterEditor, - SVGFilterSelectEditor, - SVGFilterEditor + OffsetEditor }); - editor.registerUI("inspector.tab.style", { - SVGItemProperty: ObjectProperty.create({ - title: editor.$i18n("svg.item.property.title"), - editableProperty: "svg-item", - preventUpdate: true - }) + editor.registerUI("inspector.tab.transition", { + KeyframeProperty }); editor.registerUI("popup", { - SVGFilterPopup - }); - editor.registerInspector("svg-item", (current) => { - return [ - { - key: "edit", - editor: "Button", - editorOptions: { - text: "Edit", - action: ["open.editor", current] - } - }, - { - type: "column", - size: [2, 1], - columns: [ - { type: "label", label: editor.$i18n("svg.item.property.fill") }, - { - key: "fillRule", - editor: "ToggleCheckBox", - editorOptions: { - toggleLabels: [iconUse("join_full"), iconUse("join_right")], - toggleValues: ["nonzero", "evenodd"] - }, - defaultValue: current.fillRule || "nonzero" - } - ] - }, - { - type: "column", - size: [2, 1], - columns: [ - { - key: "fill", - editor: "FillSingleEditor", - editorOptions: { - wide: true - }, - defaultValue: current.fill - }, - { - key: "fillOpacity", - editor: "number-input", - editorOptions: { - compact: true, - label: "opacity", - min: 0, - max: 1, - step: 0.01 - }, - defaultValue: current.fillOpacity - } - ] - }, - { - type: "column", - size: [2, 1], - columns: [ - { type: "label", label: editor.$i18n("svg.item.property.stroke") } - ] - }, - { - type: "column", - size: [2, 1], - columns: [ - { - key: "stroke", - editor: "fill-single", - editorOptions: { - wide: true - }, - defaultValue: current.stroke - }, - { - key: "strokeWidth", - editor: "number-input", - editorOptions: { - compact: true, - label: "line_weight" - }, - defaultValue: current.strokeWidth - } - ] - }, - { - type: "column", - size: [2, 1], - columns: [ - { - key: "strokeDasharray", - editor: "StrokeDashArrayEditor", - editorOptions: { - label: editor.$i18n("svg.item.property.dashArray") - }, - defaultValue: current.strokeDasharray || "" - }, - { - key: "strokeDashoffset", - editor: "number-input", - editorOptions: { - compact: true, - label: "power_input", - min: -1e3, - max: 1e3, - step: 1 - }, - defaultValue: current.strokeDashoffset - } - ] - }, - { - key: "strokeLinecap", - editor: "ToggleCheckBox", - editorOptions: { - label: editor.$i18n("svg.item.property.lineCap"), - toggleLabels: [ - iconUse("line_cap_butt"), - iconUse("line_cap_round"), - iconUse("line_cap_square") - ], - toggleValues: [ - StrokeLineCap.BUTT, - StrokeLineJoin.ROUND, - StrokeLineCap.SQUARE - ] - }, - defaultValue: current.strokeLinecap || StrokeLineCap.BUTT - }, - { - key: "strokeLinejoin", - editor: "ToggleCheckBox", - editorOptions: { - label: editor.$i18n("svg.item.property.lineJoin"), - toggleLabels: [ - iconUse("line_join_miter"), - iconUse("line_join_round"), - iconUse("line_join_bevel") - ], - toggleValues: [ - StrokeLineJoin.MITER, - StrokeLineJoin.ROUND, - StrokeLineJoin.BEVEL - ] - }, - defaultValue: current.strokeLinejoin || StrokeLineJoin.MITER - }, - { - key: "mixBlendMode", - editor: "BlendSelectEditor", - editorOptions: { - label: editor.$i18n("svg.item.property.blend") - }, - defaultValue: current.mixBlendMode - } - ]; - }); - editor.registerInspector("polygon", (item) => { - return [ - { - key: "count", - editor: "NumberInputEditor", - editorOptions: { - label: "Count", - min: 3, - max: 100, - step: 1 - }, - defaultValue: item.count - }, - { - key: "button", - editor: "Button", - editorOptions: { - label: "Copy ", - text: "as path", - command: "copy.path" - } - }, - { - key: "button2", - editor: "Button", - editorOptions: { - label: "Test Popup", - action: [ - "showComponentPopup", - { - title: "Sample Test Popup", - width: 400, - inspector: [ - { - key: "test", - editor: "Button", - editorOptions: { - label: "Test", - text: "text", - onClick: () => { - window.alert("yellow"); - } - } - } - ] - } - ] - } - } - ]; - }); - editor.registerInspector("spline", () => { - return [ - { - key: "boundary", - editor: "SelectIconEditor", - editorOptions: { - label: "Boundary", - options: ["clamped", "open", "closed"] - } - }, - { - key: "button", - editor: "Button", - editorOptions: { - label: "Copy ", - text: "as path", - action: "copy.path" - } - } - ]; + KeyframePopup }); - editor.registerInspector("star", (item) => { - return [ - { - key: "isCurve", - editor: "ToggleCheckBox", - editorOptions: { - label: "Curve", - defaultValue: item.isCurve - } - }, - { - key: "count", - editor: "NumberInputEditor", - editorOptions: { - label: "Count", - min: 3, - max: 100, - step: 1, - wide: "true" - } +} +var LayerAppendView$1 = ""; +class LayerAppendView extends EditorElement { + template() { + return ` +
+
+
+
+
+ + +
+ `; + } + initState() { + return { + dragStart: false, + width: 0, + height: 0, + color: "black", + fontSize: 30, + showRectInfo: false, + areaVerties: rectToVerties(0, 0, 0, 0), + content: "Insert a text", + pathManager: new PathStringManager(), + rect: {}, + options: {}, + containerItem: void 0, + patternInfo: {} + }; + } + get scale() { + return this.$viewport.scale; + } + checkNotDragStart() { + return Boolean(this.state.dragStart) === false; + } + [POINTERMOVE("$el") + IF("checkNotDragStart")](e) { + const vertex = this.$viewport.getWorldPosition(e); + const newVertex = this.$context.snapManager.checkPoint(vertex); + if (equals$1(newVertex, vertex) === false) { + this.state.target = newVertex; + this.state.targetVertex = this.$viewport.applyVertex(this.state.target); + this.state.targetPositionVertex = clone(this.state.target); + this.state.targetGuides = this.$context.snapManager.findGuideOne([ + this.state.target + ]); + } else { + this.state.target = floor([], vertex); + this.state.targetVertex = floor([], this.$viewport.applyVertex(this.state.target)); + this.state.targetGuides = []; + this.state.targetPositionVertex = null; + } + this.bindData("$mousePointer"); + this.bindData("$mousePointerView"); + } + [POINTERSTART("$el") + MOVE() + END() + PREVENT + STOP](e) { + this.initMousePoint = this.state.targetPositionVertex ? this.state.targetPositionVertex : this.$viewport.getWorldPosition(e); + this.state.dragStart = true; + this.state.color = "#C4C4C4"; + this.state.text = ""; + const minX = this.initMousePoint[0]; + const minY = this.initMousePoint[1]; + const verties = rectToVerties(minX, minY, 0, 0); + this.state.areaVerties = this.$viewport.applyVerties(verties); + this.bindData("$area"); + this.bindData("$areaRect"); + } + createLayerTemplate(width2, height2) { + const { type, text: text2, color: color2, inlineStyle } = this.state; + switch (type) { + case "artboard": + return `
`; + case "rect": + return `
`; + case "circle": + return `
`; + case "text": + case "svg-text": + return ` +
+

+
`; + case "svg-rect": + return ` +
+ + + +
+ `; + case "svg-circle": + return ` +
+ + + +
+ `; + case "svg-path": + const newD = this.state.d.clone().scale(width2 / this.state.bboxRect.width, height2 / this.state.bboxRect.height).d; + const options2 = this.state.options; + return ` +
+ + + +
+ `; + case "polygon": + const options22 = this.state.options; + return ` +
+ + + +
+ `; + case "star": + const options3 = this.state.options; + return ` +
+ + + +
+ `; + case "svg-textpath": + return ` +
+ + + + + + ${text2} + + +
+ `; + default: + return `
`; + } + } + [BIND("$area")]() { + const { areaVerties } = this.state; + const { left: left2, top: top2, width: width2, height: height2 } = vertiesToRectangle(areaVerties); + return { + style: { + left: left2, + top: top2, + width: width2, + height: height2 }, - { - key: "radius", - editor: "NumberInputEditor", - editorOptions: { - label: "Inner Radius", - min: -1, - max: 1, - step: 0.01, - wide: "true" - } + innerHTML: this.createLayerTemplate(width2, height2) + }; + } + [BIND("$areaRect")]() { + const { areaVerties, showRectInfo } = this.state; + const newVerties = this.$viewport.applyVertiesInverse(areaVerties); + const { width: width2, height: height2 } = vertiesToRectangle(newVerties); + return { + style: { + display: showRectInfo ? "inline-block" : "none", + left: areaVerties[2][0], + top: areaVerties[2][1] }, - { - key: "tension", - editor: "NumberInputEditor", - editorOptions: { - label: "Tension", - min: 0, - max: 1, - step: 0.01, - wide: "true" - } + innerHTML: `x: ${Math.round(newVerties[0][0])}, y: ${Math.round(newVerties[0][1])}, ${Math.round(width2)} x ${Math.round(height2)}` + }; + } + [BIND("$mousePointerView")]() { + const { showRectInfo } = this.state; + const { target = create$3(), targetVertex = create$3() } = this.state; + return { + style: { + display: !showRectInfo ? "inline-block" : "none", + left: targetVertex[0] || -1e4, + top: targetVertex[1] || -1e4 }, - { - key: "button", - editor: "Button", - editorOptions: { - label: "Copy ", - text: "as path", - action: "copy.path" - } - } - ]; - }); -} -class SVGTextProperty extends BaseProperty { - getTitle() { - return this.$i18n("svg.text.property.title"); + innerHTML: `x: ${Math.round(target[0])}, y: ${Math.round(target[1])}` + }; } - [SUBSCRIBE(REFRESH_SELECTION)]() { - this.refreshShow(["svg-textpath", "svg-text", "svg-tspan"]); + makeMousePointer() { + if (this.state.dragStart) + return ""; + const { target } = this.state; + if (!target) + return ""; + const guides = (this.state.targetGuides || []).filter(Boolean); + return ` + + ${guides.map((guide) => { + this.state.pathManager.reset(); + guide = this.$viewport.applyVerties([guide[0], guide[1]]); + return this.state.pathManager.M({ x: guide[0][0], y: guide[0][1] }).L({ x: guide[1][0], y: guide[1][1] }).X({ x: guide[0][0], y: guide[0][1] }).X({ x: guide[1][0], y: guide[1][1] }).toString("layer-add-snap-pointer"); + }).join("\n")} + + `; } - refresh() { - var current = this.$context.selection.current; - if (current) { - this.setAllValue([ - "lengthAdjust", - "textLength", - "startOffset", - "text-anchor", - "text" - ]); - } + [BIND("$mousePointer")]() { + const html = this.makeMousePointer(); + return { + innerHTML: html + }; } - setAllValue(list2 = []) { - var current = this.$context.selection.current; - if (!current) - return; - list2.forEach((key) => { - this.children[`$${key}`].setValue(current[key]); - }); + move() { + const e = this.$config.get("bodyEvent"); + const targetMousePoint = this.$viewport.getWorldPosition(); + const newMousePoint = this.$context.snapManager.checkPoint(targetMousePoint); + if (equals$1(newMousePoint, targetMousePoint) === false) { + this.state.target = newMousePoint; + this.state.targetVertex = this.$viewport.applyVertex(newMousePoint); + this.state.targetGuides = this.$context.snapManager.findGuideOne([newMousePoint]).filter(Boolean); + } else { + this.state.target = void 0; + this.state.targetGuides = []; + } + const isShiftKey = e.shiftKey; + const minX = Math.min(newMousePoint[0], this.initMousePoint[0]); + const minY = Math.min(newMousePoint[1], this.initMousePoint[1]); + const maxX = Math.max(newMousePoint[0], this.initMousePoint[0]); + const maxY = Math.max(newMousePoint[1], this.initMousePoint[1]); + let dx = maxX - minX; + let dy = maxY - minY; + if (isShiftKey) { + dy = dx; + } + const verties = rectToVerties(minX, minY, dx, dy); + this.state.areaVerties = this.$viewport.applyVerties(verties); + this.state.showRectInfo = true; + this.bindData("$area"); + this.bindData("$areaRect"); + this.bindData("$mousePointer"); + this.bindData("$mousePointerView"); } - getBody() { - return ` -
- ${createComponent("TextAreaEditor", { - ref: "$text", - label: this.$i18n("svg.text.property.textarea"), - key: "text", - onchange: "changeTextValue" - })} -
-
- ${createComponent("SelectIconEditor", { - ref: "$text-anchor", - label: this.$i18n("svg.text.property.anchor"), - key: "textAnchor", - options: ["start", "middle", "end"], - onchange: "changeTextValue" - })} - -
-
- ${createComponent("SelectEditor", { - ref: "$lengthAdjust", - label: this.$i18n("svg.text.property.length.adjust"), - key: "lengthAdjust", - value: "spacing", - options: ["spacing", "spacingAndGlyphs"], - onchange: "changeTextValue" - })} - -
-
- ${createComponent("RangeEditor", { - ref: "$textLength", - label: this.$i18n("svg.text.property.text.length"), - key: "textLength", - min: 0, - max: 1e3, - step: 0.1, - onchange: "changeTextValue" - })} - -
-
- ${createComponent("RangeEditor", { - ref: "$startOffset", - label: this.$i18n("svg.text.property.start.offset"), - key: "startOffset", - min: 0, - max: 1e3, - step: 0.1, - onchange: "changeTextValue" - })} - -
- `; + end() { + const isAltKey = this.$config.get("bodyEvent").altKey; + let { color: color2, content: content2, fontSize, areaVerties, patternInfo } = this.state; + const rectVerties = this.$viewport.applyVertiesInverse(areaVerties); + const parentArtBoard = this.$context.selection.getArtboardByPoint(rectVerties[0]); + let { x, y, width: width2, height: height2 } = vertiesToRectangle(rectVerties); + let hasArea = true; + if (width2 === 0 && height2 === 0) { + switch (this.state.type) { + case "text": + content2 = ""; + height2.set(this.state.fontSize); + hasArea = false; + break; + default: + width2 = 100; + height2 = 100; + break; + } + } + var rect2 = __spreadValues(__spreadValues({ + x: Math.floor(x), + y: Math.floor(y), + width: Math.floor(width2), + height: Math.floor(height2), + backgroundColor: color2, + content: content2, + fontSize + }, patternInfo.attrs), this.state.options); + switch (this.state.type) { + case "text": + case "svg-text": + case "svg-textpath": + delete rect2.backgroundColor; + break; + case "svg-path": + rect2["d"] = this.state.d.clone().scale(width2 / this.state.bboxRect.width, height2 / this.state.bboxRect.height).d; + break; + default: + delete rect2["content"]; + break; + } + switch (this.state.type) { + case "image": + this.trigger("openImage", rect2, parentArtBoard); + break; + case "video": + this.trigger("openVideo", rect2, parentArtBoard); + break; + case "audio": + this.trigger("openAudio", rect2, parentArtBoard); + break; + case "text": + if (hasArea) { + rect2.fontSize = Length.px(this.state.fontSize).floor(); + } else { + const scaledFontSize = this.state.fontSize / this.$viewport.scale; + const $drawItem = this.refs.$area.$(".draw-item > p"); + $drawItem.parent().css("height", `${scaledFontSize}px`); + $drawItem.parent().css("font-size", `${scaledFontSize}px`); + $drawItem.select(); + $drawItem.focus(); + return; + } + this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); + break; + default: + this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); + this.$config.set("editing.mode.itemType", "select"); + break; + } + if (!isAltKey) { + this.trigger("hideLayerAppendView"); + } + this.state.dragStart = false; + this.state.showRectInfo = false; + this.state.target = void 0; + this.bindData("$areaRect"); } - [SUBSCRIBE_SELF("changeTextValue")](key, value) { - this.$commands.executeCommand("setAttribute", `change svg text property: ${key}`, this.$context.selection.packByValue({ - [key]: value + [SUBSCRIBE("showLayerAppendView")](type, options2 = {}) { + this.state.type = type; + this.state.options = options2; + this.state.isShow = true; + this.refs.$area.empty(); + this.$el.show(); + this.$el.focus(); + this.$context.snapManager.clear(); + const model = this.$model.createModel(__spreadValues({ + itemType: type + }, options2), false); + this.state.inlineStyle = CSS_TO_STRING(this.$editor.renderer("html").toCSS(model, { + top: true, + left: true, + width: true, + height: true, + transform: true, + transformOrigin: true })); + if (options2.d) { + this.state.d = new PathParser(options2.d); + this.state.bboxRect = this.state.d.rect(); + } + this.$context.commands.emit("push.mode.view", "LayerAppendView"); } -} -function svgText(editor) { - editor.registerUI("inspector.tab.style", { - SVGTextProperty - }); -} -function text(editor) { - editor.registerUI("inspector.tab.style", { - TextProperty: ObjectProperty.create({ - title: editor.$i18n("text.property.title"), - editableProperty: "text-style", - preventUpdate: true - }) - }); - editor.registerInspector("text-style", (current) => { - return [ - { - type: "column", - size: [2, 1, 1], - columns: [ - { - key: "textAlign", - editor: "SelectIconEditor", - editorOptions: { - compact: true, - options: ["left", "center", "right", "justify"], - icons: [ - "align_left", - "align_center", - "align_right", - "align_justify" - ] - }, - defaultValue: current.textAlign || TextAlign.LEFT - }, - "-", - { - key: "textTransform", - editor: "SelectIconEditor", - editorOptions: { - options: [ - { value: TextTransform.CAPITALIZE, text: "Ag" }, - { value: TextTransform.UPPERCASE, text: "AG" }, - { value: TextTransform.LOWERCASE, text: "ag" } - ], - compact: true, - icons: ["horizontal_rule"] - }, - defaultValue: current.textTransform - } - ] - }, - { - type: "column", - size: [3, 2, 1], - gap: 20, - columns: [ - { - key: "textDecoration", - editor: "SelectIconEditor", - editorOptions: { - options: [ - { value: TextDecoration.NONE, text: "None" }, - { value: TextDecoration.UNDERLINE, text: "Underline" }, - { value: TextDecoration.LINE_THROUGH, text: "LineThrough" } - ], - icons: ["horizontal_rule", "underline", "strikethrough"], - onchange: "changeTextValue" - }, - defaultValue: current.textDecoration - }, - { - key: "fontStyle", - editor: "SelectIconEditor", - editorOptions: { - compact: true, - options: ["normal", "italic"], - icons: ["title", "italic"] - }, - defaultValue: current.fontStyle - }, - { - key: "textClip", - editor: "ToggleButton", - editorOptions: { - checkedValue: TextClip.TEXT, - toggleLabels: [iconUse("vignette"), iconUse("vignette")], - toggleTitles: ["", "Text Clip"], - toggleValues: [TextClip.NONE, TextClip.TEXT] - }, - defaultValue: current.textClip || TextClip.NONE - } - ] - } - ]; - }); -} -var textShadow$1 = [ - { name: "Mystic", shadow: `20px 0px 10px rgb(0, 0, 0)` }, - { name: "Monoton", shadow: `0px -78px rgb(255, 196, 0)` }, - { name: "Radioactive", shadow: `-18px -18px 20px rgb(87, 255, 9);` }, - { name: "Bungee", shadow: `-18px 18px 0 rgb(66, 45, 45)` }, - { name: "Sprint", shadow: `-20px -108px 0px rgba(255, 255, 255, 0.445)` }, - { name: "Prickly", shadow: `-18px -18px 2px #777` }, - { - name: "Codystar", - shadow: `1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)` - }, - { name: "Elegant", shadow: `-18px 8px 18px #b4bbbb` }, - { - name: "Playful", - shadow: ` - -2px -2px 0px #888, - 4px 4px 0px #888, - 7px 7px 0px #888 - ` + [SUBSCRIBE("hideLayerAppendView")]() { + if (this.$el.isShow()) { + this.state.isShow = false; + this.$el.hide(); + this.$commands.emit("pop.mode.view", "LayerAppendView"); + } } -]; -var TextShadowProperty$1 = ""; -class TextShadowProperty extends BaseProperty { - getTitle() { - return this.$i18n("text.shadow.property.title"); + [SUBSCRIBE("hideAddViewLayer")]() { + this.state.isShow = false; + this.$el.hide(); } - getBody() { - return ` -
- `; + isShow() { + return this.state.isShow; } - getTools() { - return ` - - - `; + [KEYDOWN("document") + IF("isShow") + ESCAPE + ENTER]() { } - [CLICK("$add")]() { - const index2 = +this.refs.$select.value; - this.children.$textshadow.trigger("add", textShadow$1[index2].shadow); + [KEYUP("document") + IF("isShow") + ESCAPE + ENTER](e) { + switch (this.state.type) { + case "text": + const $t = Dom.create(e.target); + let { fontSize, areaVerties } = this.state; + const rectVerties = this.$viewport.applyVertiesInverse(areaVerties); + const { x, y } = vertiesToRectangle(rectVerties); + const { width: width2, height: height2 } = $t.rect(); + const text2 = $t.text(); + if (text2.length === 0) { + break; + } + const [[newWidth, newHeight, newFontSize]] = this.$viewport.applyScaleVertiesInverse([[width2, height2, fontSize]]); + const rect2 = { + x, + y, + width: newWidth, + height: newHeight, + content: text2.trim(), + "font-size": newFontSize + }; + const parentArtBoard = this.$context.selection.getArtboardByPoint(rectVerties[0]); + this.$commands.emit("newComponent", this.state.type, rect2, true, parentArtBoard || this.$context.selection.currentProject); + break; + } + this.state.dragStart = false; + this.state.showRectInfo = false; + this.state.target = null; + this.bindData("$areaRect"); + this.trigger("hideLayerAppendView"); } - [LOAD("$shadowList")]() { - var current = this.$context.selection.current || {}; - return createComponent("TextShadowEditor", { - ref: "$textshadow", - key: "textShadow", - value: current.textShadow, - onchange: (key, value) => { - this.$commands.executeCommand("setAttribute", "change text shadow", this.$context.selection.packByValue({ - [key]: value - })); - } + [CHANGE("$file")]() { + this.refs.$file.files.forEach((item) => { + this.$commands.emit("updateImage", item, this.state.rect, this.state.containerItem); + }); + } + [CHANGE("$video")]() { + this.refs.$video.files.forEach((item) => { + this.$commands.emit("updateVideo", item, this.state.rect, this.state.containerItem); }); } - get editableProperty() { - return "textShadow"; + [SUBSCRIBE("openImage")](rect2, containerItem) { + this.state.rect = rect2; + this.state.containerItem = containerItem; + this.refs.$file.click(); } - [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(100)]() { - this.refresh(); + [SUBSCRIBE("openVideo")](rect2, containerItem) { + this.state.rect = rect2; + this.state.containerItem = containerItem; + this.refs.$video.click(); + } + [SUBSCRIBE("setPatternInfo")](patternInfo) { + this.state.patternInfo = patternInfo; + } + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.$context.snapManager.clear(); + this.bindData("$mousePointer"); + this.bindData("$mousePointerView"); } } -function textShadow(editor) { - editor.registerUI("inspector.tab.style", { - TextShadowProperty +function layerAppendView(editor) { + editor.registerUI("canvas.view", { + LayerAppendView }); } -var TransitionProperty$1 = ""; -const TRANSITION_TIMING_REG = /((cubic-bezier|steps)\(([^)]*)\))/gi; -class Transition extends PropertyItem { - static parse(obj2) { - return new Transition(obj2); - } - getDefaultObject() { - return { - name: "all", - duration: Length.second(0), - timingFunction: "linear", - delay: Length.second(0) - }; +var LayerTreeProperty$1 = ""; +const DRAG_START_CLASS = "drag-start"; +class LayerTreeProperty extends BaseProperty { + getTitle() { + return this.$i18n("layer.tree.property.title"); } - toCloneObject() { - return { - name: this.json.name, - duration: this.json.duration + "", - timingFunction: this.json.timingFunction, - delay: this.json.delay + "" - }; + getClassName() { + return "full"; } - toCSS() { + initState() { return { - transition: this.toString() + hideDragPointer: true, + lastDragOverPosition: 0, + lastDragOverOffset: 0, + rootRect: { top: 0 }, + itemRect: { height: 0 } }; } - toString() { - var json = this.json; - return [json.name, json.duration, json.timingFunction, json.delay].join(" "); - } - static join(list2) { - return list2.map((it) => new Transition(it).toString()).join(","); - } - static add(transition2, item = {}) { - const list2 = Transition.parseStyle(transition2); - list2.push(Transition.parse(item)); - return Transition.join(list2); - } - static remove(transition2, removeIndex) { - return Transition.filter(transition2, (it, index2) => { - return removeIndex != index2; - }); - } - static filter(transition2, filterFunction) { - return Transition.join(Transition.parseStyle(transition2).filter((it) => filterFunction(it))); + getBody() { + return ` +
+
+ `; } - static replace(transition2, replaceIndex, valueObject) { - var list2 = Transition.parseStyle(transition2); - if (list2[replaceIndex]) { - list2[replaceIndex] = valueObject; + [BIND("$dragPointer")]() { + var offset = this.state.lastDragOverOffset; + var dist2 = this.state.itemRect.height / 3; + var bound = {}; + if (this.state.lastDragOverOffset < dist2) { + offset = 0; + var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; + bound = { + top: top2, + height: "1px", + width: "100%", + left: "0px" + }; + this.state.lastDragOverItemDirection = "before"; + } else if (this.state.lastDragOverOffset > this.state.itemRect.height - dist2) { + offset = this.state.itemRect.height; + var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; + bound = { + top: top2, + height: "1px", + width: "100%", + left: "0px" + }; + this.state.lastDragOverItemDirection = "after"; } else { - list2.push(valueObject); - } - return Transition.join(list2); - } - static get(transition2, index2) { - var arr = Transition.parseStyle(transition2); - return arr[index2]; - } - static parseStyle(transition2) { - var list2 = []; - if (!transition2) - return list2; - const result = customParseConvertMatches(transition2, TRANSITION_TIMING_REG); - list2 = result.str.split(",").map((it) => { - const fields2 = it.split(" ").filter(Boolean); - if (fields2.length >= 4) { - return { - name: fields2[0], - duration: Length.parse(fields2[1]), - timingFunction: customParseReverseMatches(fields2[2], result.matches), - delay: Length.parse(fields2[3]) - }; - } else if (fields2.length >= 3) { - return { - name: fields2[0], - duration: Length.parse(fields2[1]), - delay: Length.parse(fields2[2]) - }; - } else if (fields2.length >= 1) { - return { - name: fields2[0], - duration: Length.parse(fields2[1]) + const targetItem = this.$model.get(this.state.lastDragOverItemId); + if (targetItem == null ? void 0 : targetItem.enableHasChildren()) { + offset = 0; + var top2 = this.state.lastDragOverPosition + offset - this.state.rootRect.top; + bound = { + top: top2, + height: this.state.itemRect.height, + width: "100%", + left: "0px" }; - } else { - return {}; + this.state.lastDragOverItemDirection = "self"; } - }); - return list2.map((it) => Transition.parse(it)); - } -} -class TransitionProperty extends BaseProperty { - getTitle() { - return this.$i18n("transition.property.title"); + } + bound.display = this.state.hideDragPointer ? "none" : "block"; + return { + style: bound + }; } - getBody() { - return `
`; + getIcon(item) { + if (item.d) { + return iconUseForPath(item.d, { + width: item.screenWidth, + height: item.screenHeight, + fill: "currentColor", + stroke: "currentColor" + }); + } + if (item.hasLayout() || item.hasChildren() || item.is("artboard")) { + if (item.isLayout("flex")) { + return iconUse("layout_flex"); + } else if (item.isLayout("grid")) { + return iconUse("layout_grid"); + } + return iconUse("layout_default"); + } + return this.$icon.get(item.itemType, item); } - getTools() { - return ` - - `; + makeLayerList(parentObject, depth = 0) { + if (!parentObject.layers) + return ""; + const layers2 = parentObject.layers; + const data = []; + for (var last = layers2.length - 1; last > -1; last--) { + var layer = layers2[last]; + var selectedPathClass = this.$context.selection.hasPathOf(layer) ? "selected-path" : ""; + var selectedClass = this.$context.selection.check(layer) ? "selected" : ""; + var hovered = this.$context.selection.checkHover(layer) ? "hovered" : ""; + var name = layer.is("boolean-path") ? layer["boolean-operation"] : layer.name; + if (layer.is("text")) { + name = layer.text || layer.name; + } + var title2 = ""; + if (layer.hasLayout()) { + title2 = this.$i18n("layer.tree.property.layout.title." + layer.layout); + } + const isHide = layer.isTreeItemHide(); + const depthPadding = depth * 20; + const hasChildren = layer.hasChildren(); + const lock2 = this.$lockManager.get(layer.id); + const visible2 = this.$visibleManager.get(layer.id); + data[data.length] = `
${this.makeLayerList(layer, depth + 1)}`; + } + return data.join(""); } - isFirstShow() { - return true; + [SUBSCRIBE("refreshContent")]() { + this.refresh(); } - [LOAD("$transitionList") + DOMDIFF]() { - var current = this.$context.selection.current; - if (!current) + [LOAD("$layerList") + DOMDIFF]() { + var project2 = this.$context.selection.currentProject; + if (!project2) return ""; - return Transition.parseStyle(current.transition).map((it, index2) => { - const selectedClass = this.state.selectedIndex === index2 ? "selected" : ""; - const path = curveToPath(it.timingFunction, 30, 30); - return ` -
-
-
- - - -
-
-
- ${it.name} - Duration: ${it.duration} - Delay: ${it.delay} -
-
-
- -
+ return [ + this.makeLayerList(project2, 0), + ` +
-
- `; + ` + ]; + } + [DRAGSTART("$layerList .layer-item")](e) { + var layerId = e.$dt.attr("data-layer-id"); + e.$dt.addClass(DRAG_START_CLASS); + e.dataTransfer.setData("layer/id", layerId); + this.state.rootRect = this.refs.$layerList.rect(); + this.state.itemRect = e.$dt.rect(); + this.setState({ + hideDragPointer: false + }, false); + this.bindData("$dragPointer"); + } + [DRAGEND("$layerList .layer-item")]() { + this.setState({ + hideDragPointer: true + }, false); + this.bindData("$dragPointer"); + this.refs.$layerList.$$(`.${DRAG_START_CLASS}`).forEach((it) => { + it.removeClass(DRAG_START_CLASS); }); } - [SUBSCRIBE(REFRESH_SELECTION)]() { - this.refreshShowIsNot([]); + [DRAGOVER(`$layerList .layer-item:not(.${DRAG_START_CLASS})`) + PREVENT](e) { + var targetLayerId = e.$dt.attr("data-layer-id"); + this.state.lastDragOverItemId = targetLayerId; + this.state.lastDragOverPosition = e.$dt.rect().top; + this.state.lastDragOverOffset = e.offsetY; + this.bindData("$dragPointer"); } - [CLICK("$add")]() { - var current = this.$context.selection.current; - if (current) { - this.$commands.executeCommand("setAttribute", "add transition", this.$context.selection.packByValue({ - transition: (item) => Transition.add(item.transition) - })); - this.nextTick(() => { - window.setTimeout(() => { - this.refresh(); - }, 100); + [DROP(`$layerList .layer-item:not(.${DRAG_START_CLASS})`)](e) { + var targetLayerId = e.$dt.attr("data-layer-id"); + var sourceLayerId = e.dataTransfer.getData("layer/id"); + if (targetLayerId === sourceLayerId) + return; + var targetItem = this.$model.get(targetLayerId); + var sourceItem = this.$model.get(sourceLayerId); + if ((targetItem == null ? void 0 : targetItem.enableHasChildren()) === false) + return; + if (targetItem && targetItem.hasParent(sourceItem.id)) + return; + switch (this.state.lastDragOverItemDirection) { + case "self": + this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.APPEND_CHILD); + break; + case "before": + this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.INSERT_BEFORE); + break; + case "after": + this.$commands.emit("history.moveLayerToTarget", "change target with move", sourceItem, targetItem, void 0, TargetActionType.INSERT_AFTER); + break; + } + this.nextTick(() => { + this.$commands.emit("recoverBooleanPath"); + this.$context.selection.select(sourceItem); + this.setState({ + hideDragPointer: true + }); + }, 10); + } + [DOUBLECLICK("$layerList .layer-item")](e) { + this.startInputEditing(e.$dt.$(".name")); + } + modifyDoneInputEditing(input2, event) { + if (KEY_CODE.enter === event.keyCode) { + this.endInputEditing(input2, () => { + var id2 = input2.closest("layer-item").attr("data-layer-id"); + var text3 = input2.text(); + this.$commands.executeCommand("setAttribute", "change name", { + [id2]: { + name: text3 + } + }); }); } else { - window.alert("Select a layer"); + var id = input2.closest("layer-item").attr("data-layer-id"); + var text2 = input2.text(); + this.$commands.executeCommand("setAttribute", "change name", { + [id]: { + name: text2 + } + }); } } - getCurrentTransition() { - return this.current.transitions[this.selectedIndex]; + [KEYDOWN("$layerList .layer-item .name") + STOP](e) { + this.modifyDoneInputEditing(e.$dt, e); } - [CLICK("$transitionList .tools .del")](e) { - var removeIndex = e.$dt.attr("data-index"); - var current = this.$context.selection.current; - if (!current) - return; - current.reset({ - transition: Transition.remove(current.transition, removeIndex) - }); - this.emit("refreshElement", current); - this.refresh(); + [FOCUSOUT("$layerList .layer-item .name") + PREVENT + STOP](e) { + this.modifyDoneInputEditing(e.$dt, { keyCode: KEY_CODE.enter }); } - selectItem(selectedIndex, isSelected = true) { - if (isSelected) { - this.refs[`transitionIndex${selectedIndex}`].addClass("selected"); - } else { - this.refs[`transitionIndex${selectedIndex}`].removeClass("selected"); + selectLayer(layer) { + if (layer) { + this.$context.selection.select(layer); } + this.refresh(); } - viewTransitionPicker($preview) { - if (typeof this.selectedIndex === "number") { - this.selectItem(this.selectedIndex, false); + addLayer(layer) { + if (layer) { + this.$context.selection.select(layer); + this.$commands.emit("refreshArtboard"); } - this.selectedIndex = +$preview.attr("data-index"); - this.current = this.$context.selection.current; - if (!this.current) - return; - this.currentTransition = Transition.get(this.current.transition, this.selectedIndex); - this.viewTransitionPropertyPopup(); } - viewTransitionPropertyPopup() { - if (!this.currentTransition) - return; - const transition2 = this.currentTransition; - this.emit("showTransitionPropertyPopup", { - changeEvent: "changeTransitionPropertyPopup", - data: transition2.toCloneObject(), - instance: this + [CLICK("$add")]() { + this.$commands.emit("newComponent", "rect", { + backgroundColor: "#ececec", + width: 200, + height: 100 }); } - [CLICK("$transitionList .preview")](e) { - this.viewTransitionPicker(e.$dt); - } - getRef(...args2) { - return this.refs[args2.join("")]; + [CLICK("$layerList .layer-item label .name")](e) { + var $item = e.$dt.closest("layer-item"); + $item.onlyOneClass("selected"); + var id = $item.attr("data-layer-id"); + this.$context.selection.select(id); + this.$commands.emit("history.refreshSelection"); } - [SUBSCRIBE("changeTransitionPropertyPopup")](data) { - if (this.currentTransition) { - this.currentTransition.reset(__spreadValues({}, data)); - if (this.current) { - this.current.reset({ - transition: Transition.replace(this.current.transition, this.selectedIndex, this.currentTransition) - }); - this.emit("refreshElement", this.current); - this.refresh(); - } - } + [CLICK("$layerList .layer-item label .folder")](e) { + var $item = e.$dt.closest("layer-item"); + var id = $item.attr("data-layer-id"); + var item = this.$model.get(id); + item.reset({ + collapsed: !item.collapsed + }); + this.refresh(); } -} -var TransitionPropertyPopup$1 = ""; -const property_list = [ - "none", - "all", - "background-color", - "background-position", - "background-size", - "border", - "border-color", - "border-width", - "border-bottom", - "border-bottom-color", - "border-bottom-left-radius", - "border-bottom-right-radius", - "border-bottom-width", - "border-left", - "border-left-color", - "border-left-width", - "border-radius", - "border-right", - "border-right-color", - "border-right-width", - "border-spacing", - "border-top", - "border-top-color", - "border-top-left-radius", - "border-top-right-radius", - "border-top-width", - "bottom", - "box-shadow", - "color", - "filter", - "font-size", - "font-size-adjust", - "font-weight", - "height", - "left", - "letter-spacing", - "line-height", - "margin", - "margin-bottom", - "margin-left", - "margin-right", - "margin-top", - "max-height", - "max-width", - "min-height", - "min-width", - "opacity", - "padding", - "padding-bottom", - "padding-left", - "padding-right", - "padding-top", - "perspective", - "perspective-origin", - "right", - "text-decoration", - "text-decoration-color", - "text-indent", - "text-shadow", - "top", - "transform", - "vertical-align", - "visibility", - "width", - "word-spacing", - "z-index" -].map((it) => ({ - value: it, - text: it -})); -class TransitionPropertyPopup extends BasePopup { - getTitle() { - return "Transition"; + [CLICK("$layerList .layer-item .visible")](e) { + var $item = e.$dt.closest("layer-item"); + var id = $item.attr("data-layer-id"); + this.$visibleManager.toggle(id); + var visible2 = this.$visibleManager.get(id); + e.$dt.attr("data-visible", visible2); + this.emit("refreshVisibleView"); } - initState() { - return { - changeEvent: "", - instance: {}, - data: { - timingFunction: "linear", - duration: "0s", - delay: "0s", - name: "all" - } - }; + [CLICK("$layerList .layer-item .remove")](e) { + var $item = e.$dt.closest("layer-item"); + var id = $item.attr("data-layer-id"); + this.$commands.executeCommand("removeLayer", "remove a layer", [id]); + this.nextTick(() => { + this.refresh(); + }, 1e3); } - updateData(opt) { - this.state.data = __spreadValues(__spreadValues({}, this.state.data), opt); - if (this.state.instance) { - this.state.instance.trigger(this.state.changeEvent, this.state.data); + [CLICK("$layerList .layer-item .lock")](e) { + var $item = e.$dt.closest("layer-item"); + var id = $item.attr("data-layer-id"); + this.$lockManager.toggle(id); + var lastLock = this.$lockManager.get(id); + e.$dt.attr("data-lock", lastLock); + if (lastLock) { + this.$context.selection.removeById(id); } } - getBody() { - return `
`; + [SUBSCRIBE("changeHoverItem")]() { + this.refs.$layerList.$$(".hovered").forEach((it) => { + it.removeClass("hovered"); + }); + if (this.$context.selection.hoverItems.length) { + var selector2 = this.$context.selection.hoverItems.map((it) => { + return `[data-layer-id="${it.id}"]`; + }).join(","); + this.refs.$layerList.$$(selector2).forEach((it) => { + it.addClass("hovered"); + }); + } } - [LOAD("$popup")]() { - return ` -
- ${this.templateForProperty()} - ${this.templateForTimingFunction()} - ${this.templateForDelay()} - ${this.templateForDuration()} -
- `; + [SUBSCRIBE_SELF("changeSelection")](isSelection = false) { + if (isSelection && this.refs.$layerList) { + this.refs.$layerList.$$(".selected").forEach((it) => { + it.removeClass("selected"); + }); + this.refs.$layerList.$$(".selected-path").forEach((it) => { + it.removeClass("selected-path"); + }); + var selector2 = this.$context.selection.items.map((it) => { + return `[data-layer-id="${it.id}"]`; + }).join(","); + if (selector2) { + this.refs.$layerList.$$(selector2).forEach((it) => { + it.addClass("selected"); + var item = this.$context.selection.itemKeys[it.attr("data-layer-id")]; + if (item.is("svg-path", "svg-polygon")) { + it.$(".icon").html(this.getIcon(item)); + } + }); + } + } } - templateForTimingFunction() { - return ` -
- - ${createComponent("CubicBezierEditor", { - ref: "$cubicBezierEditor", - key: "timingFunction", - value: this.state.data.timingFunction || "linear", - onChange: "changeCubicBezier" - })} -
- `; + [SUBSCRIBE(REFRESH_SELECTION, "refreshAllCanvas")]() { + this.refresh(); } - [SUBSCRIBE_SELF("changeTransition")](key, value) { - this.updateData({ - [key]: value + [SUBSCRIBE("refreshLayerTreeView") + THROTTLE(100)]() { + this.refresh(); + } + [SUBSCRIBE("changeItemLayout")]() { + this.refresh(); + } + [CONFIG("bodyEvent")]() { + const $target = Dom.create(this.$config.get("bodyEvent").target); + const $layerItem = $target.closest("layer-item"); + if ($layerItem) { + this.emit("refreshHoverView", $layerItem.data("layer-id")); + } + } +} +function layerTree(editor) { + editor.registerElement({ + LayerTreeProperty + }); +} +var conic = { + title: "Conic", + key: "conic", + execute: function(count = 42) { + return repeat(count).map(() => { + var x = randomNumber(45, 55); + var y = randomNumber(45, 55); + var angle = randomNumber(0, 360); + return { + gradient: `conic-gradient(from ${angle}deg at ${x}% ${y}%, ${ColorStep.createColorStep(2, 360, "deg")})` + }; }); } - templateForProperty() { - return ` -
- ${createComponent("SelectEditor", { - ref: "$property", - icon: true, - label: "Property", - key: "name", - value: this.state.data.name, - options: property_list, - onChange: "changeTransition" - })} -
- `; +}; +const angle_list$2 = ["0deg", "45deg", "90deg"]; +var linear = { + title: "Linear", + key: "linear", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `linear-gradient(${randomItem(...angle_list$2)}, ${ColorStep.createColorStep(2)})` + }; + }); } - templateForDelay() { - return ` -
- ${createComponent("RangeEditor", { - ref: "$delay", - label: "Delay", - key: "delay", - value: this.state.data.delay, - units: ["s", "ms"], - onChange: "changeRangeEditor" - })} -
- `; +}; +var radial = { + title: "Radial", + key: "radial", + execute: function(count = 42) { + return repeat(count).map(() => { + var shape2 = "circle"; + return { + gradient: `radial-gradient(${shape2}, ${ColorStep.createColorStep(2)})` + }; + }); } - templateForDuration() { - return ` -
- ${createComponent("RangeEditor", { - ref: "$duration", - label: "Duration", - key: "duration", - value: this.state.data.duration, - units: ["s", "ms"], - onChange: "changeRangeEditor" - })} -
- `; +}; +var randomConic = { + title: "Random Conic", + key: "random-conic", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `conic-gradient(from 0deg at 50% 50%, ${ColorStep.createColorStep(10, 360, "deg")})` + }; + }); } - [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { - this.updateData({ [key]: value }); +}; +const angle_list$1 = ["0deg", "45deg", "90deg"]; +var randomLinear = { + title: "Random Linear", + key: "random-linear", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `linear-gradient(${randomItem(...angle_list$1)}, ${ColorStep.createColorStep(10)})` + }; + }); } - [SUBSCRIBE_SELF("changeCubicBezier")](key, value) { - this.updateData({ [key]: value }); +}; +var randomRadial = { + title: "Random Radial", + key: "random-radial", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `radial-gradient(circle, ${ColorStep.createColorStep(10)})` + }; + }); } - [SUBSCRIBE("showTransitionPropertyPopup")](data) { - this.setState(data); - this.show(250); - this.children.$cubicBezierEditor.trigger("showCubicBezierEditor", data.data.timingFunction); +}; +var repeatConic = { + title: "Repeat Conic", + key: "repeat-conic", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `repeating-conic-gradient(from 0deg at 0% 50%, ${ColorStep.createRepeatColorStep(10, "10deg")})` + }; + }); } - [SUBSCRIBE("hideTransitionPropertyPopup")]() { - this.$el.hide(); +}; +const angle_list = ["0deg", "45deg", "90deg"]; +var repeatLinear = { + title: "Repeat Linear", + key: "repeat-linear", + execute: function(count = 42) { + return repeat(count).map(() => { + return { + gradient: `repeating-linear-gradient(${randomItem(...angle_list)}, ${ColorStep.createRepeatColorStep(2, "10px")})` + }; + }); } -} -function transition(editor) { - editor.registerUI("inspector.tab.transition", { - TransitionProperty - }); - editor.registerUI("popup", { - TransitionPropertyPopup - }); -} -var VideoProperty$1 = ""; -class VideoProperty extends BaseProperty { - getClassName() { - return "item elf--video-property"; +}; +var repeatRadial = { + title: "Repeat Radial", + key: "repeat-radial", + execute: function(count = 42) { + return repeat(count).map(() => { + var shape2 = "circle"; + return { + gradient: `repeating-radial-gradient(${shape2}, ${ColorStep.createRepeatColorStep(3, "6px")})` + }; + }); } +}; +var gradients = [ + linear, + randomLinear, + repeatLinear, + radial, + randomRadial, + repeatRadial, + conic, + randomConic, + repeatConic +]; +var GradientAssetsProperty$1 = ""; +const options = gradients.map((it) => { + return { value: it.key, text: it.title }; +}); +class GradientAssetsProperty extends BaseProperty { getTitle() { - return this.$i18n("video.property.title"); + return this.$i18n("gradient.asset.property.title"); } initState() { return { - $video: { el: {} }, - status: "play", - volume: 1 + mode: "grid", + preset: "linear" }; } - getBody() { - return `
`; + getTools() { + return `
`; } - get video() { - return this.state.$video.el; + [LOAD("$tools")]() { + return createComponent("SelectEditor", { + ref: "$preset", + key: "preset", + value: this.state.preset, + options, + onchange: "changePreset" + }); } - get volumeStatus() { - if (this.state.volume === 0) - return "muted"; - if (this.state.volume > 0.5) - return "up"; - return "down"; + [SUBSCRIBE_SELF("changePreset")](key, value) { + this.setState({ + [key]: value + }); } - play() { - if (this.video) - this.video.play(); + getClassName() { + return "elf--gradient-assets-property"; } - pause() { - if (this.video) - this.video.pause(); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.show(); } - [LOAD("$body")]() { - var current = this.$context.selection.current || { playTime: "0:1:1" }; - var currentTime = current.currentTime || 0; - var duration = (current.playTime || "0:1:1").split(":").pop(); + getBody() { return ` -
- - -
- ${createComponent("NumberRangeEditor", { - ref: "$currentTime", - min: 0, - max: duration, - value: currentTime, - step: 1e-3, - onchange: "changeCurrentTime" - })} -
-
-
-
- - ${this.$i18n("video.property.volume")} -
-
- ${obj$3.volume_off} - ${obj$3.volume_down} - ${obj$3.volume_up} - -
-
-
-
- - ${this.$i18n("video.property.playbackRate")} -
-
- ${createComponent("NumberRangeEditor", { - ref: "$playbackRate", - min: 0.1, - max: 10, - clamp: true, - value: this.state.playbackRate, - step: 1e-3, - onchange: "changePlaybackRate" - })} -
-
-
-
- - ${this.$i18n("video.property.playTime")} -
- ${createComponent("MediaProgressEditor", { - ref: "$progress", - key: "playTime", - value: current.playTime, - onchange: "changeSelect" - })} -
- `; - } - [SUBSCRIBE("changeCurrentTime")](key, currentTime) { - this.setState({ currentTime }, false); - this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ currentTime })); - } - [SUBSCRIBE("changePlaybackRate")](key, playbackRate) { - this.setState({ playbackRate }, false); - this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ playbackRate })); - } - [CHANGEINPUT("$volume")]() { - const volume = Number(this.refs.$volume.value); - this.setState({ volume }, false); - this.bindData("$volume_control"); - this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ volume })); - } - [BIND("$volume_control")]() { - return { - "data-selected-value": this.volumeStatus - }; +
+
+
+ `; } - [BIND("$tools")]() { - return { - "data-selected-value": this.state.status - }; + [DRAGSTART("$gradientList .gradient-item")](e) { + const gradient2 = e.$dt.attr("data-gradient"); + e.dataTransfer.effectAllowed = "copy"; + e.dataTransfer.setData("text/gradient", gradient2); } - [CLICK("$tools button")](e) { - var playType = e.$dt.attr("data-value"); - switch (playType) { - case "play": - this.setState({ status: "pause" }, false); - this.play(); - break; - case "pause": - this.setState({ status: "play" }, false); - this.pause(); - break; + [LOAD("$gradientList")]() { + var preset = gradients.find((it) => it.key === this.state.preset); + if (!preset) { + return ""; } - this.bindData("$tools"); - } - [SUBSCRIBE_SELF("changeValue") + DEBOUNCE(100)](key, value) { - if (!this.state.$video) - return; - this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ [key]: value })); - } - [SUBSCRIBE_SELF("changeSelect")](key, value) { - this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ [key]: value })); + var results = preset.execute().map((item, index2) => { + return `
+
+
+
+
`; + }); + if (preset.edit) { + results.push(`
${iconUse("add")}
`); + } + return results; } - [SUBSCRIBE_SELF("updateVideoEvent")]() { - if (this.video.paused) { - this.setState({ - status: "play", - currentTime: this.video.currentTime - }, false); - this.bindData("$tools"); + executeGradient(callback, isRefresh = true, isEmit = true) { + var project2 = this.$context.selection.currentProject; + if (project2) { + callback && callback(project2); + if (isRefresh) + this.refresh(); + if (isEmit) + this.emit("refreshGradientAssets"); + } else { + window.alert("Please select a project."); } - this.children.$currentTime.setValue(this.video.currentTime); } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - const current = this.$context.selection.current; - this.refreshShow(["video"]); - if (current && current.is("video")) { - this.emit("refElement", current.id, ($el) => { - const $video = $el.$("video"); - this.state.$video = $video; - this.setState({ - volume: current.volume, - currentTime: current.currentTime, - playbackRate: current.playbackRate - }, false); - this.video.ontimeupdate = (e) => { - this.trigger("updateVideoEvent", e); - }; - this.video.onprogress = (e) => { - this.trigger("updateVideoEvent", e); - }; - this.load("$body"); + [CLICK("$gradientList .add-gradient-item")]() { + this.executeGradient((project2) => { + project2.createGradient({ + gradient: Gradient.random(), + name: "", + variable: "" }); - } + }); } -} -function video(editor) { - editor.registerUI("inspector.tab.style", { - VideoProperty - }); -} -var ComponentPopup$1 = ""; -class ComponentPopup extends BasePopup { - getClassName() { - return "component-property w(800)"; + [CLICK("$gradientList .preview")](e) { + var $item = e.$dt.closest("gradient-item"); + var gradient2 = $item.attr("data-gradient"); + this.$commands.emit("drop.asset", { gradient: gradient2 }); } +} +var ImageAssetsProperty$1 = ""; +function revokeObjectUrl(url) { + window.URL.revokeObjectURL(url); +} +class ImageAssetsProperty extends BaseProperty { getTitle() { - return "Component"; + return this.$i18n("image.asset.property.title"); } initState() { return { - title: "", - inspector: [] + mode: "grid" }; } - refresh() { - this.setTitle(this.state.title || this.getTitle()); - this.load(); + getClassNamef() { + return "elf--image-assets-property"; + } + afterRender() { + this.show(); } getBody() { return ` -
+
+
+
`; } - [BIND("$body")]() { - return { - style: { - width: this.state.width || 250 - } - }; - } - [LOAD("$body")]() { - const inspector = this.state.inspector; - return createComponent("ComponentEditor", { - inspector, - onchange: "changeComponent" + [LOAD("$imageList") + DOMDIFF]() { + var current = this.$context.selection.currentProject || { images: [] }; + var images = current.images; + var results = images.map((image2, index2) => { + return ` +
+
+ +
+
+ + +
+
+ `; }); + return ` +
+ ${results.join("")} +
+ + +
+
+ + `; } - [SUBSCRIBE_SELF("changeComponent")](key, value) { - if (isFunction(this.state.changeEvent)) { - this.emit(this.state.changeEvent, key, value); + executeImage(callback, isRefresh = true, isEmit = true) { + var project2 = this.$context.selection.currentProject; + if (project2) { + callback && callback(project2); + if (isRefresh) + this.refresh(); + if (isEmit) + this.emit("refreshImageAssets"); + } else { + window.alert("Please select a project."); } } - [SUBSCRIBE(SHOW_COMPONENT_POPUP)](data) { - this.setState(data, false); + [DRAGSTART("$imageList .preview img")](e) { + var index2 = +e.$dt.closest("image-item").attr("data-index"); + var project2 = this.$context.selection.currentProject; + if (project2) { + var imageInfo = project2.images[index2]; + e.dataTransfer.setData("image/info", imageInfo.local); + } + } + [CHANGE("$imageList .add-image-item input[type=file]")](e) { + this.executeImage(() => { + [...e.target.files].forEach((item) => { + this.$commands.emit("updateImageAssetItem", item); + }); + }); + } + [CLICK("$imageList .remove")](e) { + var $item = e.$dt.closest("image-item"); + var index2 = +$item.attr("data-index"); + this.executeImage((project2) => { + project2.removeImage(index2); + revokeObjectUrl($item.$(".preview img").attr("src")); + }); + } + [CLICK("$imageList .copy")](e) { + var $item = e.$dt.closest("image-item"); + var index2 = +$item.attr("data-index"); + this.executeImage((project2) => { + project2.copyImage(index2); + }); + } + [SUBSCRIBE("addImageAsset")]() { this.refresh(); - this.show(data.width); } } -var ComponentProperty$1 = ""; -class ComponentProperty extends BaseProperty { - getClassName() { - return "component-property"; - } - getTitle() { - return "Component"; +var check = { + key: "check", + title: "Check", + execute: function() { + return [ + { pattern: `check(20px 20px, 10px 10px, black, transparent)` }, + { pattern: `check(40px 40px, 20px 20px, black, transparent)` }, + { pattern: `check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))` }, + { pattern: `check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))` }, + { pattern: `check(100px 100px, 50px 50px, #DCF3DC, transparent)` }, + { pattern: `check(200px 200px, 100px 100px, #102C45, transparent)` } + ]; } - isShow() { - var _a; - var current = (_a = this.$context.selection) == null ? void 0 : _a.current; - const inspector = this.$context.components.createInspector(current); - if (current && (current.is("component") || inspector.length > 0)) { - return true; - } - return false; +}; +var crossdot = { + key: "cross-dot", + title: "Cross Dot", + execute: function() { + return [ + { + pattern: `cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)` + }, + { + pattern: `cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)` + }, + { + pattern: `cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)` + } + ]; } - [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { - this.refreshShow(() => { - const current = this.$context.selection.current; - const inspector = this.$context.components.createInspector(current); - return inspector.length > 0; - }); +}; +var diagonalLine = { + key: "diagonal-line", + title: "Diagonal Line", + execute: function() { + return [ + { + pattern: `diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)` + }, + { + pattern: `diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)` + }, + { + pattern: `diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)` + } + ]; } - refresh() { - var current = this.$context.selection.current; - if (current) { - this.setTitle(current.getDefaultTitle() || current.itemType || current.name); - this.load(); - } +}; +var dot = { + key: "dot", + title: "Dot", + execute: function() { + return [ + { pattern: `dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)` }, + { pattern: `dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)` }, + { pattern: `dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)` }, + { pattern: `dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)` } + ]; } - getBody() { - return ` -
- `; +}; +var grid = { + key: "grid", + title: "Grid", + execute: function() { + return [ + { pattern: `grid(20px 20px, 10px 10px, black, transparent)` }, + { pattern: `grid(40px 40px, 20px 20px, black, transparent)` }, + { pattern: `grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))` }, + { pattern: `grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))` }, + { pattern: `grid(100px 100px, 50px 50px, #DCF3DC, transparent)` }, + { pattern: `grid(200px 200px, 100px 100px, #102C45, transparent)` } + ]; } - [LOAD("$body")]() { - var _a; - var current = (_a = this.$context.selection) == null ? void 0 : _a.current; - if (!current) - return ""; - const inspector = this.$context.components.createInspector(current); - inspector.forEach((it) => { - if (isString(it)) { - return; +}; +var horizontalLine = { + key: "horizontal-line", + title: "Horizontal Line", + execute: function() { + return [ + { pattern: `horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)` }, + { + pattern: `horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)` + }, + { + pattern: `horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)` } - let defaultValue2 = current[it.key] || it.defaultValue; - if (isFunction(it.convertDefaultValue)) { - defaultValue2 = it.convertDefaultValue(current, it.key); + ]; + } +}; +var verticalLine = { + key: "vertical-line", + title: "Vertical Line", + execute: function() { + return [ + { pattern: `vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)` }, + { + pattern: `vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)` + }, + { + pattern: `vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)` } - it.defaultValue = defaultValue2; - }); - return createComponent("ComponentEditor", { - ref: "$comp", - inspector, - onchange: "changeComponentProperty" + ]; + } +}; +var patterns = [ + check, + grid, + dot, + crossdot, + diagonalLine, + verticalLine, + horizontalLine +]; +var PatternAssetsProperty$1 = ""; +class PatternAssetsProperty extends BaseProperty { + getTitle() { + return this.$i18n("pattern.asset.property.title"); + } + initState() { + return { + mode: "grid", + preset: "check" + }; + } + getTools() { + const options2 = variable$4(patterns.map((it) => { + return { value: it.key, text: it.title }; + })); + return createComponent("SelectEditor", { + ref: "$assets", + key: "preset", + value: this.state.preset, + options: options2, + onchange: "changePreset" }); } - [SUBSCRIBE_SELF("changeComponentProperty")](key, value) { - this.$commands.executeCommand("setAttribute", "change component : " + key, this.$context.selection.packByValue({ + [SUBSCRIBE_SELF("changePreset")](key, value) { + this.setState({ [key]: value - })); + }); } -} -function component(editor) { - editor.registerUI("inspector.tab.style", { - ComponentProperty - }); - editor.registerUI("popup", { - ComponentPopup - }); -} -var ContentProperty$1 = ""; -class ContentProperty extends BaseProperty { - getTitle() { - return "Content"; + getClassName() { + return "elf--pattern-assets-property"; } - [SUBSCRIBE(REFRESH_SELECTION, REFRESH_CONTENT) + DEBOUNCE(100)]() { - this.refreshShow(["text"]); + get editableProperty() { + return "pattern"; + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100) + IF("checkShow")]() { } getBody() { return ` -
- +
+
`; } - [BIND("$contentItem")]() { - var current = this.$context.selection.current; - if (!current) - return ""; - return { - value: current.content || "" - }; + [DRAGSTART("$patternList .pattern-item")](e) { + const pattern = e.$dt.attr("data-pattern"); + e.dataTransfer.effectAllowed = "copy"; + e.dataTransfer.setData("text/pattern", pattern); } - [INPUT("$contentItem")]() { - this.setContent(); + [LOAD("$patternList")]() { + var preset = patterns.find((it) => it.key === this.state.preset); + if (!preset) { + return ""; + } + var results = preset.execute().map((item, index2) => { + const cssText = CSS_TO_STRING(Pattern.toCSS(item.pattern)); + return `
+
+
+
+
`; + }); + return results; } - setContent() { - var current = this.$context.selection.current; - if (current) { - var data = { - content: this.refs.$contentItem.value - }; - current.reset(data); - this.emit(UPDATE_CANVAS, current); + [CLICK("$patternList .pattern-item")](e) { + const pattern = e.$dt.attr("data-pattern"); + if (this.$modeView.isCurrentMode(ViewModeType.CanvasView)) { + this.$commands.emit("addBackgroundImagePattern", pattern); + } else { + this.emit("setPatternAsset", pattern); } } } -function content(editor) { - editor.registerElement({ - ContentProperty - }); -} -var designEditorPlugins = [ - configs, - commands$1, - menus$1, - layertab, - defaultConfigs, - defaultIcons, - defaultMessages, - defaultItems, - defaultPatterns, - rendererJson, - baseEditor, - propertyEditor, - color, - gradient, - alignment, - position, - layout$2, - boxModel, - pathTool, - artboard, - svgText, - font, - text, - textShadow, - content, - appearance, - component, - backgroundImage, - patternAsset, - border, - borderRadius, - video, - image, - svgFilterAsset, - svgItem, - layerTree, - backgroundClip, - borderImage, - filter, - backdropFilter, - boxShadow, - clipPath, - gradientAsset, - exportResource, - transition, - keyframe, - animation, - selector, - codeview, - history, - project, - selectionInfoView, - selectionToolView, - guideLineView, - layerAppendView, - lineView, - hoverView, - pathDrawView, - pathEditorView, - gradientEditorView, - fillEditorView, - ClippathEditorView, - imageAsset, - sample, - function(editor) { - editor.registerMenu("context.menu.layer2", [ - { - type: "button", - title: "Layer" - } - ]); - editor.registerMenu("context.menu.layer", [ - { - type: "button", - title: "Sample" - }, - { - type: "button", - title: "Sample" - }, - { - type: "button", - title: "Sample", - action: (editor2) => { - console.log(editor2); - } - }, - { - type: "button", - title: "Sample" - }, - { - type: "dropdown", - title: "dropdown", - items: [ - { - title: "menu.item.fullscreen.title", - command: "toggle.fullscreen", - shortcut: "ALT+/", - closable: true - } - ] - } - ]); - editor.registerUI("context.menu", { - ContextMenuView - }); - } -]; -class Inspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); +var VideoAssetsProperty$1 = ""; +class VideoAssetsProperty extends BaseProperty { + getTitle() { + return this.$i18n("video.asset.property.title"); } - [BIND("$el")]() { + initState() { return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) ? "block" : "none" - } + mode: "grid" }; } - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "feature-control inspector" - }, /* @__PURE__ */ createElementJsx("div", null, /* @__PURE__ */ createElementJsx(Tabs, { - ref: "$tab", - selectedValue: "style", - onchange: (value) => { - this.$config.set("inspector.selectedValue", value); - } - }, /* @__PURE__ */ createElementJsx(TabPanel, { - value: "style", - title: this.$i18n("inspector.tab.title.design") - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex; flex-direction: column;" - }, this.$injectManager.generate("inspector.tab.style", true), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))), /* @__PURE__ */ createElementJsx(TabPanel, { - value: "transition", - title: this.$i18n("inspector.tab.title.transition") - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex; flex-direction: column;" - }, this.$injectManager.generate("inspector.tab.transition", true), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))), /* @__PURE__ */ createElementJsx(TabPanel, { - value: "code", - title: this.$i18n("inspector.tab.title.code") - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex; flex-direction: column;" - }, this.$injectManager.generate("inspector.tab.code", true), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))), this.$injectManager.getTargetUI("inspector.tab").map((it) => { - const { value, title: title2, loadElements } = it.class; - return /* @__PURE__ */ createElementJsx(TabPanel, { - value, - title: title2, - icon: it.icon - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex: flex-direction: column;" - }, loadElements.map((element) => createElement(element)), this.$injectManager.generate("inspector.tab." + it.value, true), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))); - })))); + getClassName() { + return "elf--video-assets-property"; + } + afterRender() { + this.show(); + } + getBody() { + return ` +
+
+
+ `; + } + [LOAD("$videoList") + DOMDIFF]() { + var current = this.$context.selection.currentProject || { videos: [] }; + var videos = current.videos; + var results = videos.map((video2, index2) => { + return ` +
+
+ +
+
+ + +
+
+ `; + }); + return ` +
+ ${results.join("")} +
+ + +
+
+ + `; + } + executeVideo(callback, isRefresh = true, isEmit = true) { + var project2 = this.$context.selection.currentProject; + if (project2) { + callback && callback(project2); + if (isRefresh) + this.refresh(); + if (isEmit) + this.emit("refreshVideoAssets"); + } else { + window.alert("Please select a project."); + } + } + [DRAGSTART("$videoList .preview img")](e) { + var index2 = +e.$dt.closest("video-item").attr("data-index"); + var project2 = this.$context.selection.currentProject; + if (project2) { + var videoInfo = project2.videos[index2]; + e.dataTransfer.setData("video/info", videoInfo.local); + } + } + [CHANGE("$videoList .add-video-item input[type=file]")](e) { + this.executeVideo(() => { + [...e.target.files].forEach((item) => { + this.emit("updateVideoAssetItem", item); + }); + }); + } + [CLICK("$videoList .remove")](e) { + var $item = e.$dt.closest("video-item"); + var index2 = +$item.attr("data-index"); + this.executeVideo((project2) => { + project2.removeVideo(index2); + revokeObjectUrl($item.$(".preview img").attr("src")); + }); + } + [CLICK("$videoList .copy")](e) { + var $item = e.$dt.closest("video-item"); + var index2 = +$item.attr("data-index"); + this.executeVideo((project2) => { + project2.copyVideo(index2); + }); + } + [SUBSCRIBE("addVideoAsset")]() { + this.refresh(); } } +registElement({ VideoAssetsProperty }); class AssetItems extends EditorElement { template() { return ` @@ -63937,33122 +50830,16131 @@ class ObjectItems extends EditorElement { `; } } -class LayerTab extends EditorElement { - components() { - return { - AssetItems, - LibraryItems, - CustomAssets, - ObjectItems - }; +function layertab(editor) { + editor.context.config.set("layertab.selectedValue", "layer"); + editor.registerUI("layertab.tab", { + Layer: { + title: editor.$i18n("app.tab.title.layers"), + icon: iconUse("layers"), + value: "layer" + }, + Library: { + title: editor.$i18n("app.tab.title.libraries"), + icon: iconUse("auto_awesome"), + value: "library" + }, + Asset: { + title: editor.$i18n("app.tab.title.assets"), + icon: iconUse("apps"), + value: "asset" + }, + Component: { + title: editor.$i18n("app.tab.title.components"), + icon: iconUse("plugin"), + value: "component" + } + }); + editor.registerUI("layertab.tab.layer", { + ObjectItems + }); + editor.registerUI("layertab.tab.library", { + LibraryItems + }); + editor.registerUI("layertab.tab.asset", { + AssetItems + }); + editor.registerUI("layertab.tab.component", { + CustomAssets + }); + editor.registerUI("asset", { + GradientAssetsProperty, + PatternAssetsProperty, + ImageAssetsProperty, + VideoAssetsProperty + }); +} +var DefaultLayoutItemProperty$1 = ""; +class DefaultLayoutItemProperty extends BaseProperty { + getTitle() { + return this.$i18n("default.layout.item.property.title.constraints"); } - initState() { - return { - selectedIndexValue: 2 - }; + getClassName() { + return "elf--default-layout-item-property"; } - template() { + getBody() { return ` -
-
-
-
- -
-
- -
-
- -
-
- -
+
+
+
+
+
+
+ `; + } + [LOAD("$constraintsInfo") + DOMDIFF]() { + var current = this.$context.selection.current; + const h = (current == null ? void 0 : current["constraints-horizontal"]) || Constraints.MIN; + const v = (current == null ? void 0 : current["constraints-vertical"]) || Constraints.MIN; + return ` +
- ${this.$injectManager.getTargetUI("leftbar.tab").map((it) => { - const { value, title: title2 } = it.class; - let iconString = it.class.icon; - if (obj$3[it.class.icon]) { - iconString = iconUse(it.class.icon); - } - return ` -
- -
- `; + +
+
+
+ + +
+
+
+
+
+ `; + } + [LOAD("$constraintsInfoInput")]() { + var current = this.$context.selection.current; + const hasLayout = current == null ? void 0 : current.hasLayout(); + return ` +
+ ${createComponent("SelectEditor", { + ref: "$constraintsHorizontal", + key: "constraints-horizontal", + value: (current == null ? void 0 : current["constraints-horizontal"]) || "min", + label: iconUse("width"), + compact: true, + options: [ + { value: "min", text: "Left" }, + { value: "max", text: "Right" }, + { value: "stretch", text: "Left and Right", disabled: hasLayout }, + { value: "center", text: "Center" }, + { value: "scale", text: "Scale", disabled: hasLayout } + ], + onchange: "changeConstraints" })} +
-
-
-
- ${createComponent("ObjectItems")} -
-
- ${createComponent("LibraryItems")} -
-
- ${createComponent("AssetItems")} -
- ${createComponent("GradientAssetsProperty")} - ${createComponent("PatternAssetsProperty")} - ${createComponent("ImageAssetsProperty")} - ${createComponent("VideoAssetsProperty")} - ${""} -
-
-
- ${createComponent("CustomAssets")} -
- ${this.$injectManager.getTargetUI("leftbar.tab").map((it) => { - const { value } = it.class; - return ` -
- ${this.$injectManager.generate(`leftbar.tab.${value}`)} -
- `; +
+ ${createComponent("SelectEditor", { + ref: "$constraintsVertical", + key: "constraints-vertical", + value: (current == null ? void 0 : current["constraints-vertical"]) || "min", + label: iconUse("height"), + compact: true, + options: [ + { value: "min", text: "Top" }, + { value: "max", text: "Bottom" }, + { value: "stretch", text: "Top and Bottom", disabled: hasLayout }, + { value: "center", text: "Center" }, + { value: "scale", text: "Scale", disabled: hasLayout } + ], + onchange: "changeConstraints" })} -
-
`; } - [CLICK("$header .tab-item:not(.extra-item)")](e) { - var selectedIndexValue = e.$dt.attr("data-value"); - if (this.state.selectedIndexValue === selectedIndexValue) { + [CLICK("$constraintsInfo .item")](e) { + const [value, key] = e.$dt.attrs("data-value", "data-key"); + const current = this.$context.selection.current; + if (!current) + return; + current.changeConstraints(key, value, e.shiftKey); + this.trigger("changeConstraints", key, current[key]); + } + [SUBSCRIBE_SELF("changeConstraints")](key, value) { + this.$commands.executeCommand("setAttribute", "apply constraints", this.$context.selection.packByValue({ + [key]: value + })); + this.nextTick(() => { + this.refresh(); + }, 100); + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(() => { + var current = this.$context.selection.current; + return current && current.isInDefault() && current.parent.isNot("project"); + }); + } +} +var FlexGrowToolView$1 = ""; +class FlexGrowToolView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--flex-grow-tool-view" + }); + } + [LOAD("$el") + DOMDIFF]() { + return this.$context.selection.map((item) => { + const parentItem = item.parent; + if (!parentItem) + return; + if (parentItem.is("project")) + return; + if (parentItem.isLayout(Layout.FLEX) === false) + return; + return parentItem.layers.map((child) => { + const verties = this.$viewport.applyVerties(child.verties); + const center2 = verties[4]; + let flexGrow = 0; + let size2 = child.screenWidth || 0; + const parentLayoutDirection = parentItem == null ? void 0 : parentItem.flexDirection; + if (parentLayoutDirection === FlexDirection.ROW) { + if (child.resizingHorizontal === ResizingMode.FILL_CONTAINER) { + flexGrow = child.flexGrow || 1; + } + size2 = child.screenWidth; + } else if (parentLayoutDirection === FlexDirection.COLUMN) { + if (child.resizingVertical === ResizingMode.FILL_CONTAINER) { + flexGrow = child.flexGrow || 1; + } + size2 = child.screenHeight; + } + return /* @__PURE__ */ createElementJsx("div", { + class: "flex-grow-item", + style: { + left: Length.px(center2[0]), + top: Length.px(center2[1]) + }, + "data-flex-item-id": child.id, + "data-parent-direction": parentLayoutDirection, + "data-flex-grow": flexGrow + }, /* @__PURE__ */ createElementJsx("span", { + class: "size" + }, Math.floor(size2)), " ", /* @__PURE__ */ createElementJsx("span", { + class: "grow" + }, flexGrow || "x")); + }).join(""); + }); + } + [POINTERSTART("$el .flex-grow-item") + MOVE() + END()](e) { + const [id, grow] = e.$dt.attrs("data-flex-item-id", "data-flex-grow"); + this.setState({ + id, + grow: +grow + }, false); + } + getFlexGrow(parentLayoutDirection, item, grow, dx, dy) { + let flexGrow = grow; + if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { + flexGrow = grow + Math.floor(dx / 10); + } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical === ResizingMode.FILL_CONTAINER) { + flexGrow = grow + Math.floor(dy / 10); + } + flexGrow = Math.max(1, flexGrow); + return flexGrow; + } + move(dx, dy) { + const { id, grow } = this.state; + const item = this.$editor.get(id); + if (!item) + return; + const parentItem = item.parent; + if (!parentItem) + return; + const parentLayoutDirection = parentItem.flexDirection; + let flexGrow = this.getFlexGrow(parentLayoutDirection, item, grow, dx, dy); + this.$commands.emit("setAttribute", { + [id]: { + flexGrow + } + }); + } + end(dx, dy) { + const { id, grow } = this.state; + const item = this.$editor.get(id); + if (!item) return; + const parentItem = item.parent; + if (!parentItem) + return; + const parentLayoutDirection = parentItem.flexDirection; + let flexGrow = this.getFlexGrow(parentLayoutDirection, item, grow, dx, dy); + if (dx === 0 && dy === 0) { + if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal !== ResizingMode.FILL_CONTAINER) { + this.$commands.executeCommand("setAttribute", "change self resizing", { + [id]: { + flexGrow: 1, + resizingHorizontal: ResizingMode.FILL_CONTAINER + } + }); + } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical !== ResizingMode.FILL_CONTAINER) { + this.$commands.executeCommand("setAttribute", "change self resizing", { + [id]: { + flexGrow: 1, + resizingVertical: ResizingMode.FILL_CONTAINER + } + }); + } + } else { + this.$commands.executeCommand("setAttribute", "change self resizing", { + [id]: { + flexGrow + } + }); } - this.$el.$$(`[data-value="${this.state.selectedIndexValue}"]`).forEach((it) => it.removeClass("selected")); - this.$el.$$(`[data-value="${selectedIndexValue}"]`).forEach((it) => it.addClass("selected")); - this.setState({ selectedIndexValue }, false); + this.nextTick(() => { + this.refresh(); + }, 10); + } + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); + } + [SUBSCRIBE(REFRESH_SELECTION) + THROTTLE(100)]() { + this.refresh(); + } + [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(1)]() { + this.refresh(); + } + [CONFIG("set.move.control.point")]() { + this.refresh(); } } -var SwitchLeftPanel$1 = ""; -class SwitchLeftPanel extends EditorElement { +var FlexLayoutEditor$1 = ""; +class FlexLayoutEditor extends EditorElement { + initialize() { + super.initialize(); + this.directionOptions = this.getDirectionOptions(); + this.wrapOptions = this.getWrapOptions(); + this.justifyContentOptions = this.getJustifyContentOptions(); + this.alignItemsOptions = this.getAlignItemsOptions(); + } + getDirectionOptions() { + return this.makeOptionsFunction("row,column"); + } + getWrapOptions() { + return this.makeOptionsFunction("nowrap,wrap"); + } + getJustifyContentOptions() { + return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around"); + } + getAlignItemsOptions() { + return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch"); + } + getAlignContentOptions() { + return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch"); + } + makeOptionsFunction(options2) { + return options2.split(",").map((it) => { + return { value: it, text: this.$i18n("flex.layout.editor." + it) }; + }); + } + initState() { + return __spreadValues({}, this.props.value); + } + setValue(value) { + this.setState(__spreadValues({}, value)); + } + getValue() { + return this.state; + } + modifyData(key, value) { + this.parent.trigger(this.props.onchange, key, value); + } + [LOAD("$body") + DOMDIFF]() { + const current = this.$context.selection.current; + if (!current) + return ""; + const realPaddingTop = Math.min(current.paddingTop || 0, 50); + const realPaddingLeft = Math.min(current.paddingLeft || 0, 50); + const realPaddingRight = Math.min(current.paddingRight || 0, 50); + const realPaddingBottom = Math.min(current.paddingBottom || 0, 50); + const padding2 = `padding-top:${realPaddingTop}px;padding-left: ${realPaddingLeft}px;padding-right:${realPaddingRight}px;padding-bottom: ${realPaddingBottom}px;`; + return `
${createComponent("SelectIconEditor", { + key: "flexDirection", + ref: "$flexDirection", + value: this.state.flexDirection || FlexDirection.ROW, + options: this.directionOptions, + icons: ["east", "south"], + onchange: "changeKeyValue" + })}
${createComponent("NumberInputEditor", { + compact: true, + ref: "$flex-gap", + label: iconUse("space"), + key: "gap", + value: this.state.gap, + min: 0, + max: 100, + step: 1, + onchange: "changeKeyValue" + })}
${createComponent("NumberInputEditor", { + compact: true, + label: iconUse("padding"), + key: "padding", + ref: "$padding", + value: current.paddingTop, + min: 0, + max: 100, + step: 1, + onchange: "changePadding" + })}
${createComponent("ToggleButton", { + compact: true, + key: "flexWrap", + ref: "$wrap", + size: 30, + checkedValue: "wrap", + value: this.state.flexWrap || FlexWrap.NOWRAP, + toggleLabels: [iconUse("wrap"), iconUse("wrap")], + toggleValues: [FlexWrap.NOWRAP, FlexWrap.WRAP], + onchange: "changeKeyValue" + })}
+
+
+
+
+
+
+
+
+
+ ${[1, 2, 3].map(() => { + return ` +
+
+
+
+
+ `; + }).join("\n")} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
${this.$i18n("flex.layout.editor.justify-content")}
+ ${createComponent("SelectIconEditor", { + key: "justifyContent", + ref: "$justify", + value: this.state.justifyContent || JustifyContent.FLEX_START, + options: this.justifyContentOptions, + icons: [ + "start", + "end", + "horizontal_align_center", + "horizontal_distribute", + "justify_content_space_around" + ], + onchange: "changeKeyValue" + })} +
+
+
${this.$i18n("flex.layout.editor.align-items")}
+ ${createComponent("SelectIconEditor", { + key: "alignItems", + ref: "$alignItems", + value: this.state.alignItems || AlignItems.FLEX_START, + options: this.alignItemsOptions, + icons: [ + "vertical_align_top", + "vertical_align_bottom", + "vertical_align_center", + "vertical_align_baseline", + "vertical_align_stretch" + ], + onchange: "changeKeyValue" + })} +
+ `; + } template() { return ` - +
`; } - [CLICK()]() { - this.$config.toggle("show.left.panel"); + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + this.setState({ + [key]: value + }, false); + this.modifyData(key, value); + this.refresh(); + } + [SUBSCRIBE_SELF("changePadding")](key, value) { + this.setState({ + [key]: value + }, false); + this.modifyData(key, { + paddingTop: value, + paddingLeft: value, + paddingRight: value, + paddingBottom: value + }); + this.refresh(); + } + [CLICK("$body .tool-area-item")](e) { + const $target = e.$dt; + const [justifyContent, alignItems] = $target.attrs("data-justify-content", "data-align-items", "data-align-content"); + if (this.state.justifyContent === JustifyContent.SPACE_BETWEEN) { + this.setState({ + alignItems + }, false); + this.modifyData("alignItems", alignItems); + } else if (this.state.justifyContent === JustifyContent.SPACE_AROUND) { + this.setState({ + alignItems + }, false); + this.modifyData("align-item", alignItems); + } else { + this.setState({ + justifyContent, + alignItems + }, false); + this.modifyData("justifyContent", justifyContent); + this.modifyData("alignItems", alignItems); + } + this.refresh(); + } +} +var GridBoxEditor$1 = ""; +const REG_CSS_UNIT = /(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi; +class GridBoxEditor extends EditorElement { + getLayoutItemOptions() { + return "none,auto,repeat,length".split(",").map((it) => { + return { value: it, text: this.$i18n(`grid.box.editor.${it}`) }; + }); + } + initState() { + return { + label: this.props.label, + list: this.parseValue(this.props.value) + }; + } + setValue(value) { + this.setState({ + list: this.parseValue(value) + }); } -} -var SwitchRightPanel$1 = ""; -class SwitchRightPanel extends EditorElement { - template() { - return ` - - `; + parseValue(value) { + let arr = null; + var target = []; + while ((arr = REG_CSS_UNIT.exec(value)) !== null) { + var text2 = arr[0]; + if (text2 === "auto") { + target.push({ type: "auto", count: 0, value: "0px" }); + } else if (text2.includes("repeat")) { + var tempArray = text2.split("repeat(")[1].split(")"); + tempArray.pop(); + let [count, ...size2] = tempArray.join("").split(","); + target.push({ type: "repeat", count, value: size2.join(", ") }); + } else { + target.push({ type: "length", count: 1, value: text2 }); + } + } + return target; } - [CLICK()]() { - this.$config.toggle("show.right.panel"); + getValue() { + return this.state.list.map((it) => { + if (it.type === "repeat") { + return `repeat(${it.count}, ${it.value})`; + } else if (it.type === "auto" || it.type === "none") { + return it.type; + } else { + return it.value; + } + }).join(" "); } -} -class LanguageSelector extends EditorElement { - get locales() { - return Object.keys(this.$editor.i18n.locales); + modifyData() { + this.parent.trigger(this.props.onchange, this.props.key, this.getValue()); } - template() { - var languages = this.locales.map((lang) => { - var label = this.$i18n(`app.lang.${lang}`); - return { text: label, value: lang }; - }); + makeItem(it, index2) { return ` -
-
+
+
${createComponent("SelectEditor", { - ref: "$locale", - options: languages, - value: this.$editor.locale, - onchange: "changeLocale" + ref: `$${index2}-type`, + compact: true, + options: this.getLayoutItemOptions(), + key: "type", + value: it.type || "auto", + params: index2, + onchange: "changeKeyValue" + })} +
+
+ ${createComponent("NumberInputEditor", { + compact: true, + ref: `$${index2}-count`, + key: "count", + value: it.count, + params: index2, + max: 1e3, + onchange: "changeKeyValue" })} - /> +
+
+ ${createComponent("InputRangeEditor", { + ref: `$${index2}-value`, + compact: true, + key: "value", + value: it.value, + params: index2, + units: ["auto", "fr", "px", "em", "%"], + onchange: "changeKeyValue" + })} +
+
+ +
`; } - [SUBSCRIBE_SELF("changeLocale")](key, locale) { - this.$command.emit("setLocale", locale); + [LOAD("$list")]() { + return this.state.list.map((it, index2) => { + return this.makeItem(it, index2); + }); } -} -class LayoutSelector extends EditorElement { template() { - var layouts = ["all", "css", "svg"].map((layout2) => { - var label = this.$i18n(`app.layout.${layout2}`); - return { value: layout2, text: label }; - }); return ` -
-
- ${createComponent("SelectEditor", { - ref: "$locale", - options: layouts, - value: this.$editor.layout, - onchange: "changeEditorLayoutValue" - })} - - /> +
+
+
+
+ + +
+
${this.$i18n("grid.box.editor.count")}
+
${this.$i18n("grid.box.editor.value")}
+
+
+
`; } - [SUBSCRIBE_SELF("changeEditorLayoutValue")](key, layout2) { - this.$config.set("editor.layout.mode", layout2); - } -} -var ToolBar$1 = ""; -class Download extends MenuItem { - getIconString() { - return "source"; - } - getTitle() { - return this.$i18n("menu.item.download.title"); - } - clickButton() { - this.$commands.emit("downloadJSON"); - } -} -class Outline extends MenuItem { - getIconString() { - return "outline"; - } - getTitle() { - return "Outline"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$config.toggle("show.outline"); - this.$commands.emit("addLayerView", "select"); - } - [CONFIG("show.outline")](isShow) { - this.setSelected(isShow); + [CLICK("$list .remove")](e) { + var index2 = +e.$dt.closest("item").attr("data-index"); + this.state.list.splice(index2, 1); + this.refresh(); + this.modifyData(); } -} -class Redo extends MenuItem { - getIconString() { - return "redo"; + [CLICK("$list .copy")](e) { + var index2 = +e.$dt.closest("item").attr("data-index"); + var newObj = clone$1(this.state.list[index2]); + this.state.list.splice(index2, 0, newObj); + this.refresh(); + this.modifyData(); } - getTitle() { - return "Redo"; + [CLICK("$add")]() { + this.trigger("add"); } - isHideTitle() { - return true; + [SUBSCRIBE("add")]() { + this.state.list.push({ type: "auto", count: 0, value: "0px" }); + this.refresh(); + this.modifyData(); } - clickButton() { - this.$commands.emit("history.redo"); + [SUBSCRIBE_SELF("changeKeyValue")](key, value, params) { + var index2 = +params; + var item = this.state.list[index2]; + if (item) { + if (key === "type") { + this.refs.$list.$(`[data-index="${index2}"]`).attr("data-repeat-type", value); + } + item[key] = value; + } + this.modifyData(); } } -class Save extends MenuItem { - getIconString() { - return "storage"; - } - getTitle() { - return this.$i18n("menu.item.save.title"); +class GridGapEditor extends EditorElement { + initState() { + return { + label: this.props.label, + value: this.parseValue(this.props.value) + }; } - clickButton() { - this.$commands.emit("saveJSON"); - this.nextTick(() => { - this.emit("notify", "alert", "Save", "Save the content on localStorage", 2e3); + setValue(value) { + this.setState({ + list: this.parseValue(value) }); } -} -class Undo extends MenuItem { - getIconString() { - return "undo"; - } - getTitle() { - return "Undo"; - } - isHideTitle() { - return true; - } - clickButton() { - this.$commands.emit("history.undo"); + parseValue(value) { + return Length.parse(value); } -} -class ToolBar extends EditorElement { - initState() { - return { - items: [ - { - type: "dropdown", - style: { - padding: "12px 0px 12px 12px" - }, - icon: `
`, - items: [ - { - title: "menu.item.fullscreen.title", - command: "toggle.fullscreen", - shortcut: "ALT+/" - }, - { - title: "menu.item.shortcuts.title", - command: "showShortcutWindow" - }, - "-", - { title: "menu.item.export.title", command: "showExportView" }, - { - title: "menu.item.export.title", - command: "showEmbedEditorWindow" - }, - { title: "menu.item.download.title", command: "downloadJSON" }, - { - title: "menu.item.save.title", - command: "saveJSON", - nextTick: () => { - this.emit("notify", "alert", "Save", "Save the content on localStorage", 2e3); - } - }, - { - title: "menu.item.language.title", - items: [ - { - title: "English", - command: "setLocale", - args: [Language.EN], - checked: (editor) => editor.locale === Language.EN - }, - { - title: "Fran\xE7ais", - command: "setLocale", - args: [Language.FR], - checked: (editor) => editor.locale === Language.FR - }, - { - title: "Korean", - command: "setLocale", - args: [Language.KO], - checked: (editor) => editor.locale === Language.KO - } - ] - }, - "-", - { - title: "EasyLogic Studio", - items: [ - { - type: "link", - title: "Github", - href: "https://github.com/easylogic/editor" - }, - { - type: "link", - title: "Learn", - href: "https://www.easylogic.studio" - } - ] - } - ] - } - ] - }; + getValue() { + return this.state.value; } - components() { - return { - ToolBarRenderer, - LayoutSelector, - LanguageSelector, - ThemeChanger, - Outline, - ExportView, - Download, - Save, - Undo, - Redo, - DropdownMenu - }; + modifyData() { + this.parent.trigger(this.props.onchange, this.props.key, this.getValue()); } - template() { + makeItem() { return ` -
-
- ${createComponent("ToolBarRenderer", { - items: this.state.items - })} -
-
-
- ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.left") +
+
+ ${createComponent("InputRangeEditor", { + label: this.state.label, + wide: true, + ref: "$value", + key: "value", + value: this.state.value, + max: 500, + units: ["px", "em", "%"], + onchange: "changeKeyValue" })} - ${this.$injectManager.generate("toolbar.left")} -
-
- ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.center") - })} - ${this.$injectManager.generate("toolbar.center")} -
-
- ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.right") - })} - ${this.$injectManager.generate("toolbar.right")} - ${createComponent("ThemeChanger")} -
`; } - [CONFIG("language.locale")]() { - this.refresh(); - } -} -var CanvasView$1 = ""; -var DragAreaView$1 = ""; -class DragAreaRectView extends EditorElement { - initState() { - return { - mode: "selection", - x: 0, - y: 0, - width: 1e4, - height: 1e4, - cachedCurrentElement: {}, - html: "" - }; + [LOAD("$list")]() { + return this.makeItem(); } template() { return ` -
-
-
+
+
+
+
+
`; } - [SUBSCRIBE("drawAreaView")](style) { - this.refs.$dragAreaRect.css(style); - } - [SUBSCRIBE("initDrawAreaView")]() { - this.trigger("drawAreaView", { - left: Length.px(-1e4), - top: Length.px(0), - width: Length.px(0), - height: Length.px(0) - }); - } - [SUBSCRIBE("startDragAreaView")]() { - this.initMousePoint = this.$viewport.getWorldPosition(); - this.dragRect = { - left: Length.px(this.initMousePoint[0]), - top: Length.px(this.initMousePoint[1]), - width: Length.px(0), - height: Length.px(0) - }; - this.trigger("drawAreaView", this.dragRect); + [SUBSCRIBE_SELF("changeKeyValue")](key, value) { + this.state.value = value; + this.modifyData(); } - getSelectedItems(rect2, areaVerties) { - var project2 = this.$context.selection.currentProject; - let items = []; - let selectedArtboard = []; - if (project2) { - if (rect2.width === 0 && rect2.height === 0) { - items = []; - } else { - project2.layers.forEach((layer) => { - if (layer.is("artboard") && layer.isIncludeByArea(areaVerties)) { - selectedArtboard.push(layer); - } else if (layer.is("artboard") && layer.checkInArea(areaVerties) && layer.hasChildren() === false) { - items.push(layer); - } else { - items.push.apply(items, layer.checkInAreaForAll(areaVerties)); +} +var GridGrowToolView$1 = ""; +class Grid { + static parseStyle(value) { + const units = []; + parseValue(value).forEach((it) => { + switch (it.func) { + case FuncType.REPEAT: + for (var i = 0, len2 = it.parsed.count; i < len2; i++) { + units.push(it.parsed.length); } - }); - items = items.filter((it) => { - return it.isDragSelectable; - }); - if (items.length > 1) { - items = items.filter((it) => { - return it.is("artboard") === false; - }); - } + break; + case FuncType.LENGTH: + units.push(it.parsed); + break; + case FuncType.KEYWORD: + units.push(it.matchedString); + break; } - } - const selectedItems = selectedArtboard.length ? selectedArtboard : items; - return selectedItems; - } - [SUBSCRIBE("moveDragAreaView")]() { - const e = this.$config.get("bodyEvent"); - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); - if (e.shiftKey) { - newDist[1] = newDist[0]; - } - const startVertex = floor([], this.initMousePoint); - const endVertex = floor([], add$1([], this.initMousePoint, newDist)); - const start2 = this.$viewport.applyVertex(startVertex); - const end2 = this.$viewport.applyVertex(endVertex); - const locaRect = toRectVerties([start2, end2]); - this.dragRect = { - left: locaRect[0][0], - top: locaRect[0][1], - width: Math.abs(locaRect[1][0] - locaRect[0][0]), - height: Math.abs(locaRect[3][1] - locaRect[0][1]) - }; - this.trigger("drawAreaView", { - left: Length.px(this.dragRect.left), - top: Length.px(this.dragRect.top), - width: Length.px(this.dragRect.width), - height: Length.px(this.dragRect.height) }); - var { left: x, top: y, width: width2, height: height2 } = this.dragRect; - var rect2 = { - x, - y, - width: width2, - height: height2 - }; - const selectedItems = this.getSelectedItems(rect2, toRectVertiesWithoutTransformOrigin([startVertex, endVertex])); - this.$context.selection.selectByGroup(...selectedItems); - } - [SUBSCRIBE("endDragAreaView")]() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); - this.$config.init("set.move.control.point", false); - if (newDist[0] === 0 && newDist[1] === 0) { - this.$context.selection.empty(); - } - this.trigger("initDrawAreaView"); - this.$context.selection.reselect(); - this.$commands.emit("history.refreshSelection"); - } -} -class DragAreaView extends EditorElement { - initState() { - return { - mode: "selection", - x: 0, - y: 0, - width: 1e4, - height: 1e4, - cachedCurrentElement: {}, - html: "" - }; - } - template() { - return ` -
- `; - } - checkSelectionArea(e) { - const mousePoint = this.$viewport.getWorldPosition(e); - if (this.$context.selection.hasPoint(mousePoint)) { - return true; - } - } - checkEditMode(e) { - if (this.$config.is("editing.mode", EditingMode.HAND)) { - return false; - } - const code2 = this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space); - if (this.$context.keyboardManager.check(code2)) { - return false; - } - const mousePoint = this.$viewport.getWorldPosition(e); - this.inSelection = false; - if (this.$context.selection.hasPoint(mousePoint)) { - this.inSelection = true; - if (this.$context.selection.current.is("artboard")) { - if (this.$context.selection.current.hasChildren()) { - this.$config.init("set.dragarea.mode", true); - this.$config.init("set.move.mode", false); - return true; - } else { - this.$config.init("set.dragarea.mode", false); - this.$config.init("set.move.mode", true); - return true; - } - } else { - this.$config.init("set.dragarea.mode", false); - this.$config.init("set.move.mode", true); - return true; - } - } - this.mouseOverItem = this.$context.selection.filteredLayers[0]; - if (this.mouseOverItem) { - this.$config.init("set.dragarea.mode", false); - this.$config.init("set.move.mode", true); - } else { - this.$config.init("set.dragarea.mode", true); - this.$config.init("set.move.mode", false); - } - return true; - } - [POINTERSTART("$dragAreaView") + IF("checkEditMode") + MOVE("movePointer") + END("moveEndPointer")]() { - if (this.$config.get("set.dragarea.mode")) { - this.emit("startDragAreaView"); - } - this.$config.set("editing.mode.itemType", "select"); - } - initializeDragSelection() { - this.$context.selection.reselect(); - this.$context.snapManager.clear(); - } - movePointer() { - if (this.$config.get("set.dragarea.mode")) { - this.emit("moveDragAreaView"); - } - } - moveEndPointer() { - if (this.$config.get("set.dragarea.mode")) { - this.emit("endDragAreaView"); - } - this.$config.init("set.dragarea.mode", false); - this.$config.init("set.move.mode", false); - } -} -var PageTools$1 = ""; -class PageTools extends EditorElement { - template() { - return ` -
- -
- ${createComponent("NumberInputEditor", { - ref: "$scaleInput", - min: 10, - max: 240, - step: 1, - key: "scale", - value: this.$viewport.scale * 100, - onchange: this.subscribe((key, scale2) => { - this.$viewport.setScale(scale2 / 100); - this.emit(UPDATE_VIEWPORT); - this.trigger(UPDATE_VIEWPORT); - }, 1e3) - })} -
- - - - - - ${this.$injectManager.generate("page.tools")} -
- - `; - } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - const scale2 = Math.floor(this.$viewport.scale * 100); - if (this.children.$scaleInput) { - this.children.$scaleInput.setValue(scale2); - } + return units; } - [CLICK("$plus")]() { - const oldScale = this.$viewport.scale; - this.$viewport.setScale(oldScale + 0.01); - this.emit(UPDATE_VIEWPORT); - this.trigger(UPDATE_VIEWPORT); + static join(values = []) { + return values.join(" "); } - [CLICK("$minus")]() { - const oldScale = this.$viewport.scale; - this.$viewport.setScale(oldScale - 0.01); - this.emit(UPDATE_VIEWPORT); - this.trigger(UPDATE_VIEWPORT); +} +class GridGrowBaseView extends EditorElement { + updateRows(current, newRows) { + const data = {}; + current.layers.forEach((it) => { + data[it.id] = { + gridRowStart: Math.max(1, Math.min(newRows.length, it.gridRowStart)), + gridRowEnd: Math.min(newRows.length + 1, it.gridRowEnd) + }; + }); + this.$commands.executeCommand("setAttribute", "change grid rows", __spreadProps(__spreadValues({}, data), { + [current.id]: { + gridTemplateRows: Grid.join(newRows) + } + })); } - [CLICK("$center")]() { - this.$commands.emit("moveSelectionToCenter"); + updateColumns(current, newColumns) { + const data = {}; + current.layers.forEach((it) => { + data[it.id] = { + gridColumnStart: Math.max(1, Math.min(newColumns.length, it.gridColumnStart)), + gridColumnEnd: Math.min(newColumns.length + 1, it.gridColumnEnd) + }; + }); + this.$commands.executeCommand("setAttribute", "change grid columns", __spreadProps(__spreadValues({}, data), { + [current.id]: { + gridTemplateColumns: Grid.join(newColumns) + } + })); } - [CLICK("$ruler")]() { - this.$config.toggle("show.ruler"); + updateColumnGap(current, columnGap) { + this.$commands.executeCommand("setAttribute", "change grid column gap", { + [current.id]: { + gridColumnGap: `${columnGap}` + } + }); } - [CLICK("$fullscreen")]() { - this.emit("bodypanel.toggle.fullscreen"); + updateRowGap(current, rowGap) { + this.$commands.executeCommand("setAttribute", "change grid row gap", { + [current.id]: { + gridRowGap: `${rowGap}` + } + }); } - [CLICK("$buttons button")](e) { - const itemId = e.$dt.data("item-id"); - const pathIndex = e.$dt.data("path-index"); - const current = this.$editor.get(itemId); - if (current.editablePath) { - this.$commands.emit("open.editor", current); + createNewGridItems(arr) { + let newArr = []; + if (arr.length === 0) { + newArr = [Length.fr(1)]; } else { - const pathList = PathParser.fromSVGString(current.absolutePath().d).toPathList(); - this.emit("showPathEditor", "modify", { - box: "canvas", - current, - matrix: current.matrix, - d: pathList[pathIndex].d, - changeEvent: (data) => { - pathList[pathIndex].reset(data.d); - const newPathD = current.invertPath(PathParser.joinPathList(pathList).d).d; - this.$commands.executeCommand("setAttribute", "modify sub path", { - [itemId]: current.updatePath(newPathD) - }); - } - }); + newArr = [...arr, arr[arr.length - 1]]; } - this.emit("hideSelectionToolView"); + return newArr; } -} -const char_list = [/\(/gi, /\)/gi]; -const function_list = "grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map((it) => { - return new RegExp(it, "gi"); -}); -const keyword_list = "butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map((it) => { - return new RegExp(it, "gi"); -}); -function replaceKeyword(str) { - keyword_list.forEach((ke) => { - str = str.replace(ke, (str2) => { - return `${str2}`; - }); - }); - function_list.forEach((ke) => { - str = str.replace(ke, (str2) => { - return `${str2}`; - }); - }); - char_list.forEach((ke) => { - str = str.replace(ke, (str2) => { - return `${str2}`; - }); - }); - return str; -} -function filterKeyName(str) { - return str.split(";").filter((it) => it.trim()).map((it) => { - it = it.trim(); - var [key, value] = it.split(":").map((it2) => it2.trim()); - if (value === "") { - return ""; - } - return `
${key}: ${replaceKeyword(value)};
`; - }).join("").trim(); -} -function modifyNewLine(str) { - return str.replace(/;/gi, ";\n").trim(); -} -class HTMLRenderer { - constructor(editor) { - __privateAdd(this, _id2, void 0); - __privateAdd(this, _renderers, {}); - this.editor = editor; - __privateSet(this, _id2, uuid()); + copyNewGridItems(arr, index2) { + return [...arr.slice(0, index2 + 1), ...arr.slice(index2)]; } - setRendererType(itemType, renderInstance) { - renderInstance.setRenderer(this); - __privateGet(this, _renderers)[itemType] = renderInstance; + getScaleDist(num) { + return num / this.$viewport.scale; } - get id() { - return __privateGet(this, _id2); +} +class GridGrowClickEventView extends GridGrowBaseView { + checkTargetLayer() { + const current = this.getGridTargetLayer(); + if (!current) + return false; + if (current.isLayout(Layout.GRID) === false) + return false; + return true; } - getDefaultRendererInstance() { - return __privateGet(this, _renderers)["rect"]; + [CLICK("$grid .column-plus") + IF("checkTargetLayer")]() { + const info = this.getGridLayoutInformation(); + this.updateColumns(info.current, this.createNewGridItems(info.columns)); } - getRendererInstance(item) { - const currentRenderer = __privateGet(this, _renderers)[item.itemType] || this.editor.getRendererInstance("html", item.itemType) || this.getDefaultRendererInstance() || item; - currentRenderer.setRenderer(this); - return currentRenderer; + [CLICK("$grid .row-plus") + IF("checkTargetLayer")]() { + const info = this.getGridLayoutInformation(); + this.updateRows(info.current, this.createNewGridItems(info.rows)); } - render(item) { - if (!item) + [CLICK("$grid .column-delete") + IF("checkTargetLayer")](e) { + const info = this.getGridLayoutInformation(); + if (info.columns.length < 2) { + this.alert("Alert", "Columns can not be less than one.", 2e3); return; - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.render(item); } + const index2 = +e.$dt.data("index"); + const newColumns = [ + ...info.columns.slice(0, index2), + ...info.columns.slice(index2 + 1) + ]; + this.updateColumns(info.current, newColumns); } - renderSVG(item) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer.renderSVG)) { - return currentRenderer.renderSVG(item); - } - return this.getDefaultRendererInstance().renderSVG(item); + [CLICK("$grid .column-add") + IF("checkTargetLayer")](e) { + const info = this.getGridLayoutInformation(); + const index2 = +e.$dt.data("index"); + this.updateColumns(info.current, this.copyNewGridItems(info.columns, index2), index2 + 1); } - to(type, item) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer[type])) { - return currentRenderer[type].call(currentRenderer, item); - } - const defaultInstance = this.getDefaultRendererInstance(); - if (isFunction(defaultInstance[type])) { - return defaultInstance[type].call(defaultInstance, item); + [CLICK("$grid .row-add") + IF("checkTargetLayer")](e) { + const info = this.getGridLayoutInformation(); + const index2 = +e.$dt.data("index"); + this.updateRows(info.current, this.copyNewGridItems(info.rows, index2)); + } + [CLICK("$grid .row-delete") + IF("checkTargetLayer")](e) { + const info = this.getGridLayoutInformation(); + if (info.rows.length < 2) { + this.alert("Alert", "Rows can not be less than one.", 2e3); + return; } + const index2 = +e.$dt.data("index"); + const newRows = [ + ...info.rows.slice(0, index2), + ...info.rows.slice(index2 + 1) + ]; + this.updateRows(info.current, newRows); } - toCSS(item, omit = {}) { - const css = this.to("toCSS", item); - Object.keys(omit).forEach((key) => { - delete css[key]; +} +class GridGrowDragEventView extends GridGrowClickEventView { + [POINTERSTART("$gridGap .gap-tool.column-gap") + IF("checkTargetLayer") + FIRSTMOVE("moveFirstColumnGap") + MOVE("moveColumnGap") + END("moveEndColumnGap")](e) { + const info = this.getGridLayoutInformation(); + this.current = info.current; + this.columnGap = info.columnGap; + this.lastColumnGap = info.columnGap; + this.initMousePosition = this.$viewport.getWorldPosition(e); + } + updateGapPointer(gap) { + const screenPosition = this.$viewport.applyVertex(this.$viewport.getWorldPosition()); + this.refs.$pointer.text(`${gap}`); + this.refs.$pointer.css({ + left: Length.px(screenPosition[0]), + top: Length.px(screenPosition[1] + 20) }); - return css; } - toNestedCSS(item) { - return this.to("toNestedCSS", item); + moveFirstColumnGap() { + this.refs.$pointer.show(); + this.updateGapPointer(this.columnGap); } - toTransformCSS(item) { - return this.to("toTransformCSS", item); + moveColumnGap() { + const targetPosition = this.$viewport.getWorldPosition(); + const newDist = subtract([], targetPosition, this.initMousePosition); + const stepRate = newDist[0] / this.getScaleDist(100); + const columnGap = this.columnGap; + let newColumnGap = columnGap; + if (columnGap instanceof Length) { + if (columnGap.isPercent()) { + newColumnGap = Length.percent(Math.max(columnGap.value + stepRate * this.getScaleDist(5), 0)).round(1e3); + } else if (columnGap.isPx() || columnGap.isEm()) { + newColumnGap = Length.px(Math.max(columnGap.value + stepRate * this.getScaleDist(100), 0)).floor(); + } + } + this.lastColumnGap = newColumnGap; + this.updateColumnGap(this.current, newColumnGap); + this.updateGapPointer(this.lastColumnGap); } - toGridLayoutCSS(item) { - return this.to("toGridLayoutCSS", item); + moveEndColumnGap() { + const targetPosition = this.$viewport.getWorldPosition(); + const realDistance = dist(targetPosition, this.initMousePosition); + if (realDistance < 1) { + if (this.lastColumnGap.isPx() || this.lastColumnGap.isEm()) { + this.lastColumnGap = Length.makePercent(this.lastColumnGap.value, this.current.screenWidth); + } else { + this.lastColumnGap = this.lastColumnGap.toPx(this.current.screenWidth); + } + } + this.updateColumnGap(this.current, this.lastColumnGap); + this.refs.$pointer.hide(); } - toLayoutItemCSS(item) { - return this.to("toLayoutItemCSS", item); + [POINTERSTART("$gridGap .gap-tool.row-gap") + IF("checkTargetLayer") + FIRSTMOVE("moveFirstColumnGap") + MOVE("moveRowGap") + END("moveEndRowGap")](e) { + const info = this.getGridLayoutInformation(); + this.current = info.current; + this.rowGap = info.rowGap; + this.lastColumnGap = info.rowGap; + this.initMousePosition = this.$viewport.getWorldPosition(e); } - toLayoutBaseModelCSS(item) { - return this.to("toLayoutBaseModelCSS", item); + moveRowGap() { + const targetPosition = this.$viewport.getWorldPosition(); + const newDist = subtract([], targetPosition, this.initMousePosition); + const stepRate = newDist[1] / this.getScaleDist(100); + const rowGap = this.rowGap; + let newRowGap = rowGap; + console.log(rowGap); + if (rowGap instanceof Length) { + if (rowGap.isPercent()) { + newRowGap = Length.percent(Math.max(rowGap.value + stepRate * this.getScaleDist(5), 0)).round(1e3); + } else if (rowGap.isPx() || rowGap.isNumber()) { + newRowGap = Length.px(Math.max(rowGap.value + stepRate * this.getScaleDist(100), 0)).floor(); + } + } + this.lastRowGap = newRowGap; + this.updateRowGap(this.current, newRowGap); + this.updateGapPointer(this.lastRowGap); } - toStyle(item) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer.toStyle)) { - return currentRenderer.toStyle(item); + moveEndRowGap() { + const targetPosition = this.$viewport.getWorldPosition(); + const realDistance = dist(targetPosition, this.initMousePosition); + if (realDistance < 1) { + if (!this.lastRowGap) { + this.lastRowGap = Length.px(0); + } + if (this.lastRowGap.isPx() || this.lastRowGap.isNumber()) { + this.lastRowGap = Length.makePercent(this.lastRowGap.value, this.current.screenHeight); + } else { + this.lastRowGap = this.lastRowGap.toPx(this.current.screenHeight); + } } - return this.getDefaultRendererInstance().toStyle(item); + this.updateRowGap(this.current, this.lastRowGap); + this.refs.$pointer.hide(); } - toStyleData(item) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer.toStyleData)) { - return currentRenderer.toStyleData(item); + [POINTERSTART("$grid .grid-item-tool.column .item") + MOVE("moveColumn") + END("moveEndColumn")](e) { + const index2 = +e.$dt.data("index"); + const info = this.getGridLayoutInformation(); + this.current = info.current; + this.columns = info.columns; + this.selectedColumnIndex = index2; + this.selectedColumnWidth = info.columns[index2]; + this.initMousePosition = this.$viewport.getWorldPosition(e); + } + moveColumn() { + const targetPosition = this.$viewport.getWorldPosition(); + const newDist = subtract([], targetPosition, this.initMousePosition); + const stepRate = newDist[0] / this.getScaleDist(100); + const columnWidth = this.selectedColumnWidth; + if (columnWidth instanceof Length) { + if (columnWidth.isPercent()) { + var newWidth = Math.max(columnWidth.value + stepRate * this.getScaleDist(5), 1); + this.columns[this.selectedColumnIndex] = Length.percent(newWidth).round(1e3); + } else if (columnWidth.isPx() || columnWidth.isNumber()) { + var newWidth = Math.max(10, columnWidth.value + stepRate * this.getScaleDist(100)); + this.columns[this.selectedColumnIndex] = Length.px(newWidth).floor(); + } else if (columnWidth.isFr()) { + var newWidth = Math.max(columnWidth.value + Math.floor(newDist[0] / this.getScaleDist(20)) * 0.25, 0.25); + this.columns[this.selectedColumnIndex] = Length.fr(newWidth); + } else { + var newWidth = Math.max(columnWidth.value + stepRate * 1, 10); + this.columns[this.selectedColumnIndex] = new Length(newWidth, columnWidth.unit); + } + this.updateColumns(this.current, this.columns); } - return this.getDefaultRendererInstance().toStyleData(item); } - toExportStyle(item) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer.toExportStyle)) { - return currentRenderer.toExportStyle(item); + changedColumnSize() { + const info = this.getGridLayoutInformation(); + const index2 = this.selectedColumnIndex; + const width2 = this.selectedColumnWidth; + if (width2 instanceof Length) { + if (width2.isPercent()) { + this.columns[index2] = Length.fr(1); + } else if (width2.isPx() || width2.isNumber()) { + this.columns[index2] = Length.makePercent(width2.value, info.current.screenWidth).round(1e3); + } else if (width2.isFr()) { + this.columns[index2] = "auto"; + } + } else if (width2 === "auto") { + const { items } = this.state.lastGridInfo; + const column = items.find((it) => it.column === index2 + 1); + this.columns[index2] = Length.px(column.rect.width).floor(); } - return this.getDefaultRendererInstance().toExportStyle(item); } - update(item, currentElement, editor) { - const currentRenderer = this.getRendererInstance(item); - if (isFunction(currentRenderer.update)) { - return currentRenderer.update(item, currentElement, editor); + moveEndColumn() { + const targetPosition = this.$viewport.getWorldPosition(); + const realDistance = dist(targetPosition, this.initMousePosition); + if (realDistance < 1) { + this.changedColumnSize(); } - return this.getDefaultRendererInstance().update(item, currentElement, editor); + this.updateColumns(this.current, this.columns); } - codeview(item) { - if (!item) { - return ""; + [POINTERSTART("$grid .grid-item-tool.row .item") + MOVE("moveRow") + END("moveEndRow")](e) { + const index2 = +e.$dt.data("index"); + const info = this.getGridLayoutInformation(); + this.current = info.current; + this.rows = info.rows; + this.selectedRowIndex = index2; + this.selectedRowHeight = info.rows[index2]; + this.initMousePosition = this.$viewport.getWorldPosition(e); + } + moveRow() { + const targetPosition = this.$viewport.getWorldPosition(); + const newDist = subtract([], targetPosition, this.initMousePosition); + const stepRate = newDist[1] / this.getScaleDist(30); + const rowHeight = this.selectedRowHeight; + if (rowHeight instanceof Length) { + if (rowHeight.isPercent()) { + var newHeight = Math.max(rowHeight.value - stepRate * this.getScaleDist(5), 1); + this.rows[this.selectedRowIndex] = Length.percent(newHeight).round(1e3); + } else if (rowHeight.isPx() || rowHeight.isNumber()) { + var newHeight = Math.max(10, rowHeight.value - stepRate * this.getScaleDist(100)); + this.rows[this.selectedRowIndex] = Length.px(newHeight).floor(); + } else if (rowHeight.isFr()) { + var newHeight = Math.max(rowHeight.value + Math.floor(newDist[1] / this.getScaleDist(20)) * 0.25, 0.25); + this.rows[this.selectedRowIndex] = Length.fr(newHeight); + } else { + var newHeight = Math.max(rowHeight.value - stepRate * 1, 10); + this.rows[this.selectedRowIndex] = new Length(newHeight, rowHeight.unit); + } + this.updateRows(this.current, this.rows); } - const currentProject = item.project; - let keyframeCode = modifyNewLine(filterKeyName(currentProject ? currentProject.toKeyframeString() : "")); - let rootVariable = currentProject ? CSS_TO_STRING(currentProject.toRootVariableCSS()) : ""; - const current = item; - const cssCode = filterKeyName(current ? TAG_TO_STRING(CSS_TO_STRING(this.toCSS(current))) : ""); - const nestedCssCode = current ? this.toNestedCSS(current).map((it) => { - var cssText = it.cssText ? it.cssText : CSS_TO_STRING(it.css); - return `${it.selector} { - ${filterKeyName(TAG_TO_STRING(cssText))} - }`; - }) : []; - const selectorCode = current ? current.selectors : []; - return ` -
- -${cssCode && `
${cssCode}
`} - -${nestedCssCode.map((it) => { - return `
${it}
`; - }).join("")} - -${(selectorCode || []).length ? `
- ${selectorCode.map((selector2) => { - return `
${selector2.toPropertyString()}
`; - }).join("")} - -
` : ""} - -${keyframeCode && `
${keyframeCode}
`} - -${rootVariable ? `
- - 
${rootVariable}
-
` : ""} - -
- `; + } + changedRowSize() { + const info = this.getGridLayoutInformation(); + const index2 = this.selectedRowIndex; + const height2 = this.selectedRowHeight; + if (height2 instanceof Length) { + if (height2.isPercent()) { + this.rows[index2] = Length.fr(1); + } else if (height2.isPx() || height2.isNumber()) { + this.rows[index2] = Length.makePercent(height2.value, info.current.screenHeight).round(1e3); + } else if (height2.isFr()) { + this.rows[index2] = "auto"; + } + } else if (height2 === "auto") { + const { items } = this.state.lastGridInfo; + const row = items.find((it) => it.row === index2 + 1); + this.rows[index2] = Length.px(row.rect.height).floor(); + } + } + moveEndRow() { + const targetPosition = this.$viewport.getWorldPosition(); + const realDistance = dist(targetPosition, this.initMousePosition); + if (realDistance < 1) { + this.changedRowSize(); + } + this.updateRows(this.current, this.rows); } } -_id2 = new WeakMap(); -_renderers = new WeakMap(); -class ArtBoardRender$1 extends DomRender { - render(item) { - var { id } = item; - return `
${this.toDefString(item)}${item.layers.map((it) => { - return this.renderer.render(it); - }).join("")}
`; +class GridGrowToolView extends GridGrowDragEventView { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--grid-grow-tool-view" + }, /* @__PURE__ */ createElementJsx("div", { + class: "layout-rect", + ref: "$grid" + }), /* @__PURE__ */ createElementJsx("div", { + class: "layout-rect blank-tool", + ref: "$gridGap" + }), /* @__PURE__ */ createElementJsx("div", { + class: "layout-pointer", + ref: "$pointer" + })); + } + [BIND("$el")]() { + var _a; + const current = this.getGridTargetLayer(); + return { + "data-drag-target-item": Boolean(this.$context.selection.dragTargetItem), + "data-grid-layout-own": ((_a = this.$context.selection.current) == null ? void 0 : _a.id) === (current == null ? void 0 : current.id), + style: { + display: current ? "block" : "none" + } + }; + } + [BIND("$grid")]() { + const current = this.getGridTargetLayer(); + if (!current) + return ""; + if (current.isLayout(Layout.GRID) === false) + return ""; + const rect2 = vertiesToRectangle(this.$viewport.applyVerties(current.verties)); + const info = this.getGridLayoutInformation(); + const [paddingTop, paddingRight, paddingBottom, paddingLeft] = this.getScaledInformation([ + Length.px(info.current.paddingTop), + Length.px(info.current.paddingRight), + Length.px(info.current.paddingBottom), + Length.px(info.current.paddingLeft) + ]); + const columns = this.getScaledInformation(info.columns); + const rows = this.getScaledInformation(info.rows); + const columnGap = this.getScaledLength(info.columnGap); + const rowGap = this.getScaledLength(info.rowGap); + const origin = subtract([], current.verties[1], current.verties[0]); + const angle = calculateAngle360(origin[0], origin[1]) - 180; + return { + style: { + display: "grid", + "grid-template-columns": Grid.join(columns), + "grid-template-rows": Grid.join(rows), + "grid-column-gap": columnGap, + "grid-row-gap": rowGap, + left: Length.px(rect2.left), + top: Length.px(rect2.top), + width: Length.px(rect2.width), + height: Length.px(rect2.height), + "padding-top": paddingTop, + "padding-right": paddingRight, + "padding-bottom": paddingBottom, + "padding-left": paddingLeft, + "transform-origin": "left top", + transform: `rotate(${angle}deg)` + } + }; } - toBorderCSS() { - return {}; + [BIND("$gridGap")]() { + const current = this.getGridTargetLayer(); + if (!current) + return ""; + if (current.isLayout(Layout.GRID) === false) + return ""; + const rect2 = vertiesToRectangle(this.$viewport.applyVerties(current.verties)); + const origin = subtract([], current.verties[1], current.verties[0]); + const angle = calculateAngle360(origin[0], origin[1]) - 180; + return { + style: { + left: Length.px(rect2.left), + top: Length.px(rect2.top), + width: Length.px(rect2.width), + height: Length.px(rect2.height), + "transform-origin": "left top", + transform: `rotate(${angle}deg)` + } + }; } -} -class SVGItemRender$1 extends LayerRender { - update(item, currentElement) { - this.updateElementCache(item, currentElement); - super.update(item, currentElement); + getScaledInformation(arr) { + return arr.map((it) => this.getScaledLength(it)); } - updateElementCache(item, currentElement) { - if (item.getCache("element") !== currentElement) { - item.addCache("element", currentElement); - const $path = currentElement.$("path"); - item.addCache("svgElement", $path.parent().el); - item.addCache("pathElement", $path.el); + getScaledLength(it) { + if (isString(it)) { + return it; + } else if (it instanceof Length) { + if (it.isPx() || it.isNumber()) { + return it.clone().mul(this.$viewport.scale); + } } + return it; } - updateDefString(item, currentElement) { - var $defs = currentElement.$("defs"); - if ($defs) { - $defs.updateSVGDiff(`${this.toDefInnerString(item)}`); - } else { - var str = this.toDefString(item).trim(); - currentElement.prepend(Dom.createByHTML(str)); + getGridTargetLayer() { + if (this.$context.selection.dragTargetItem) { + return this.$context.selection.dragTargetItem; } + const current = this.$context.selection.current; + if (!current) + return null; + if (current.isLayout(Layout.GRID)) + return current; + const parent = current.parent; + if (parent && parent.is("project")) + return null; + if (parent && parent.isLayout(Layout.GRID)) + return parent; + return null; } - toDefInnerString(item) { - return ` - ${this.toFillSVG(item)} - ${this.toStrokeSVG(item)} - `; + getParsedValue(it) { + if (it === "auto") { + return it; + } + return Length.parse(it); } - fillId(item) { - return this.getInnerId(item, "fill"); + getGridLayoutInformation() { + const current = this.getGridTargetLayer(); + const columns = Grid.parseStyle(current.gridTemplateColumns); + const rows = Grid.parseStyle(current.gridTemplateRows); + return { + current, + columns, + columnGap: this.getParsedValue(current.gridColumnGap), + rows, + rowGap: this.getParsedValue(current.gridRowGap) + }; } - strokeId(item) { - return this.getInnerId(item, "stroke"); + afterLoadRendering(targetRef, refName) { + this.trigger("refreshGridInformation", targetRef, refName); } - cachedStroke(item) { - return item.computed("stroke", (value) => { - if (item.isBooleanItem) { - return SVGFill.parseImage("transparent"); - } else { - return SVGFill.parseImage(value || "black"); - } + [SUBSCRIBE_SELF("refreshGridInformation") + DEBOUNCE(10)](targetRef, refName) { + const current = this.getGridTargetLayer(); + if (!current) + return; + if (current.isLayout(Layout.GRID) === false) + return; + if (refName !== "$grid") + return; + const info = this.getGridLayoutInformation(); + const scale2 = this.$viewport.scale; + const items = targetRef.$$(".grid-item").map((it) => { + const [row, column] = it.attrs("data-row", "data-column").map((it2) => +it2); + const { x, y, width: width2, height: height2 } = it.offsetRect(); + const rect2 = { + x: x / scale2, + y: y / scale2, + width: width2 / scale2, + height: height2 / scale2 + }; + const verties = vertiesMap(rectToVerties(rect2.x, rect2.y, rect2.width, rect2.height), info.current.absoluteMatrix); + const originVerties = verties.filter((_, index2) => index2 < 4); + return { + row, + column, + rect: rect2, + info, + verties, + originVerties, + originRect: vertiesToRectangle(originVerties) + }; + }); + this.state.lastGridInfo = { info, items }; + this.load("$gridGap"); + this.$context.selection.updateGridInformation({ + info, + items }); } - cachedFill(item) { - return item.computed("fill", (value) => { - if (item.isBooleanItem) { - return SVGFill.parseImage("transparent"); - } else { - return SVGFill.parseImage(value || "black"); + [LOAD("$gridGap") + DOMDIFF]() { + const current = this.getGridTargetLayer(); + if (!current) + return ""; + if (this.$config.true("set.move.control.point")) + return ""; + if (!this.$context.selection.current) + return ""; + const last = this.state.lastGridInfo; + const scale2 = this.$viewport.scale; + if (!last) + return ""; + const { info, items } = last; + const { columns, rows } = info; + const result = []; + const rowItems = items.filter((it) => it.column === 1); + const columnItems = items.filter((it) => it.row === 1); + const minY = Math.min(...rowItems.map((it) => it.verties[0][1])); + const maxY = Math.max(...rowItems.map((it) => it.verties[2][1])); + const h = maxY - minY; + for (var columnIndex = 1, len2 = columns.length; columnIndex < len2 && columnItems.length; columnIndex++) { + const prevCell = columnItems[columnIndex - 1]; + const cell = columnItems[columnIndex]; + const x = prevCell.rect.x + prevCell.rect.width; + const w2 = cell.rect.x - x; + const y = prevCell.rect.y; + result.push({ + type: "column-gap", + index: columnIndex, + x, + y, + width: w2, + height: h + }); + } + const minX = Math.min(...columnItems.map((it) => it.verties[0][0])); + const maxX = Math.max(...columnItems.map((it) => it.verties[2][0])); + const w = maxX - minX; + for (var rowIndex = 1, len2 = rows.length; rowIndex < len2; rowIndex++) { + const prevCell = rowItems[rowIndex - 1]; + const cell = rowItems[rowIndex]; + const y = prevCell.rect.y + prevCell.rect.height; + const h2 = cell.rect.y - y; + const x = prevCell.rect.x; + result.push({ + type: "row-gap", + index: rowIndex, + x, + y, + width: w, + height: h2 + }); + } + return result.map((it) => { + if (it.type === "column-gap") { + return /* @__PURE__ */ createElementJsx("div", { + class: "gap-tool column-gap", + style: { + left: Length.px(it.x * scale2), + top: Length.px(it.y * scale2), + width: Length.px(Math.max(it.width * scale2, 5)), + height: Length.px(it.height * scale2) + } + }); + } else if (it.type === "row-gap") { + return /* @__PURE__ */ createElementJsx("div", { + class: "gap-tool row-gap", + style: { + left: Length.px(it.x * scale2), + top: Length.px(it.y * scale2), + height: Length.px(Math.max(it.height * scale2, 5)), + width: Length.px(it.width * scale2) + } + }); } + return ""; }); } - toFillSVG(item) { - var _a; - const fillValue = this.cachedFill(item); - return (_a = fillValue == null ? void 0 : fillValue.toSVGString) == null ? void 0 : _a.call(fillValue, this.fillId(item), item.contentBox); - } - toStrokeSVG(item) { - var _a; - const strokeValue = this.cachedStroke(item); - return (_a = strokeValue == null ? void 0 : strokeValue.toSVGString) == null ? void 0 : _a.call(strokeValue, this.strokeId(item), item.contentBox); - } - toFillValue(item) { - var _a; - const fillValue = this.cachedFill(item); - return (_a = fillValue == null ? void 0 : fillValue.toFillValue) == null ? void 0 : _a.call(fillValue, this.fillId(item)); + isSelectedColumn(index2) { + const current = this.$context.selection.current; + return current.gridColumnStart <= index2 && index2 < current.gridColumnEnd; } - toFillOpacityValue(item) { - return parse(item.fill || "transparent").a; + isSelectedRow(index2) { + const current = this.$context.selection.current; + return current.gridRowStart <= index2 && index2 < current.gridRowEnd; } - toStrokeValue(item) { + [LOAD("$grid") + DOMDIFF]() { var _a; - const strokeValue = this.cachedStroke(item); - return (_a = strokeValue == null ? void 0 : strokeValue.toFillValue) == null ? void 0 : _a.call(strokeValue, this.strokeId(item)); - } - toFilterValue(item) { - if (!item.svgfilter) { + const current = this.getGridTargetLayer(); + if (!current) return ""; - } - return `url(#${item.svgfilter})`; - } - toLayoutCSS() { - return {}; - } - toDefaultCSS(item) { - var _a; - return Object.assign({}, super.toDefaultCSS(item), { - "stroke-width": item.strokeWidth, - "stroke-linecap": item.strokeLinecap, - "stroke-linejoin": item.strokeLinejoin, - "stroke-dashoffset": item.strokeDashoffset, - "fill-opacity": item.fillOpacity, - "fill-rule": item.fillRule, - "text-anchor": item.textAnchor, - "stroke-dasharray": (_a = item.strokeDasharray) == null ? void 0 : _a.join(" ") - }); + if (current.isLayout(Layout.GRID) === false) + return ""; + const info = this.getGridLayoutInformation(); + const totalCount = info.columns.length * info.rows.length; + const isChild = ((_a = this.$context.selection.current) == null ? void 0 : _a.id) !== info.current.id; + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, Array.from(Array(info.columns.length).keys()).map((index2) => { + const selected = isChild && this.isSelectedColumn(index2 + 1) ? "selected" : ""; + return /* @__PURE__ */ createElementJsx("div", { + class: `grid-item-tool column ${selected}`, + "data-index": index2, + style: { + "grid-column": `${index2 + 1} / span 1`, + "grid-row": `1 / span 1` + } + }, /* @__PURE__ */ createElementJsx("div", { + class: "grid-item-tool-inner" + }, /* @__PURE__ */ createElementJsx("div", { + class: "item", + "data-index": index2 + }, /* @__PURE__ */ createElementJsx("span", null, info.columns[index2])), /* @__PURE__ */ createElementJsx("div", { + class: "drag-handle right" + }, /* @__PURE__ */ createElementJsx("div", { + class: "column-delete", + "data-index": index2, + title: `Delete ${info.columns[index2]}` + }, iconUse("close")), /* @__PURE__ */ createElementJsx("div", { + class: "column-add", + "data-index": index2, + title: `Add ${info.columns[index2]}` + }, iconUse("add"))))); + }), /* @__PURE__ */ createElementJsx("div", { + class: "grid-item-tool append column-plus", + style: { + "grid-column": `${info.columns.length} / span 1`, + "grid-row": `1 / span 1` + } + }, iconUse("add")), Array.from(Array(info.rows.length).keys()).map((index2) => { + const selected = isChild && this.isSelectedRow(index2 + 1) ? "selected" : ""; + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { + class: `grid-item-tool row ${selected}`, + style: { + "grid-row": `${index2 + 1} / span 1`, + "grid-column": `1 / span 1` + } + }, /* @__PURE__ */ createElementJsx("div", { + class: "grid-item-tool-inner" + }, /* @__PURE__ */ createElementJsx("div", { + class: "item", + "data-index": index2 + }, /* @__PURE__ */ createElementJsx("span", null, info.rows[index2])), /* @__PURE__ */ createElementJsx("div", { + class: "drag-handle bottom" + }, /* @__PURE__ */ createElementJsx("div", { + class: "row-delete", + "data-index": index2, + title: `Delete ${info.rows[index2]}` + }, iconUse("close")), /* @__PURE__ */ createElementJsx("div", { + class: "row-add", + "data-index": index2, + title: `Add ${info.rows[index2]}` + }, iconUse("add")))))); + }), /* @__PURE__ */ createElementJsx("div", { + class: "grid-item-tool append row-plus", + style: { + "grid-row": `${info.rows.length} / span 1`, + "grid-column": `1 / span 1` + } + }, iconUse("add")), Array.from(Array(totalCount).keys()).map((i) => { + const column = i % info.columns.length; + const row = Math.floor(i / info.columns.length); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, /* @__PURE__ */ createElementJsx("div", { + class: "grid-item", + "data-row": row + 1, + "data-column": column + 1, + style: { + "grid-column": `${column + 1} / span 1`, + "grid-row": `${row + 1} / span 1` + } + })); + })); } - toSVGAttribute(item) { - return this.toDefaultCSS(item); + [SUBSCRIBE("refreshGridToolInfo")]() { + this.refresh(); } -} -class BooleanPathRender$1 extends SVGItemRender$1 { - toFillSVG(item) { - const layers2 = item.layers; - const op = item.booleanOperation; - switch (op) { - case BooleanOperation.DIFFERENCE: - return SVGFill.parseImage(layers2[1].fill || "transparent").toSVGString(this.fillId(item)); - } - return SVGFill.parseImage(layers2[0].fill || "transparent").toSVGString(this.fillId(item)); + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); } - toStrokeSVG(item) { - const layers2 = item.layers; - const op = item.booleanOperation; - switch (op) { - case BooleanOperation.DIFFERENCE: - return SVGFill.parseImage(layers2[1].stroke || "transparent").toSVGString(this.strokeId(item)); - } - return SVGFill.parseImage(layers2[0].stroke || "black").toSVGString(this.strokeId(item)); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refresh(); } - toFillValue(item) { - var _a, _b; - const layers2 = item.layers; - const op = item.booleanOperation; - switch (op) { - case BooleanOperation.DIFFERENCE: - return SVGFill.parseImage(layers2[1].fill || "transparent").toSVGString(this.fillId(item)); - } - return (_b = (_a = SVGFill.parseImage(layers2[0].fill || "transparent")).toFillValue) == null ? void 0 : _b.call(_a, this.fillId(item)); + [SUBSCRIBE(UPDATE_CANVAS)]() { + this.refresh(); } - toFillOpacityValue(item) { - return parse(item.fill || "transparent").a; +} +var GridLayoutEditor$1 = ""; +class GridLayoutEditor extends EditorElement { + modifyData(key, value) { + this.parent.trigger(this.props.onchange, key, value); } - toStrokeValue(item) { - var _a, _b, _c, _d; - const layers2 = item.layers; - const op = item.booleanOperation; - switch (op) { - case BooleanOperation.DIFFERENCE: - return (_b = (_a = SVGFill.parseImage(layers2[1].stroke || "transparent")).toFillValue) == null ? void 0 : _b.call(_a, this.strokeId(item)); - } - return (_d = (_c = SVGFill.parseImage(layers2[0].stroke || "black")).toFillValue) == null ? void 0 : _d.call(_c, this.strokeId(item)); + template() { + return ` +
+ `; } - update(item, currentElement) { - if (!currentElement) - return; - const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); - if ($path) { - if (item.hasChangedField("changedChildren", "d", "boolean-operation", "width", "height")) { - $path.setAttrNS({ - d: item.d - }); - } - if (item.hasChangedField("fill")) { - $path.setAttrNS({ - fill: this.toFillValue(item) - }); - } - if (item.hasChangedField("stroke")) { - $path.setAttrNS({ - stroke: this.toStrokeValue(item) - }); - } - if (item.hasChangedField("filter")) { - $path.setAttrNS({ - filter: this.toFilterValue(item) - }); - } - if (item.hasChangedField("fill-rule")) { - $path.setAttrNS({ - "fill-rule": item.fillRule || "nonezero" - }); - } - if (item.hasChangedField("stroke-linejoin")) { - $path.setAttrNS({ - "stroke-linejoin": item.strokeLinejoin - }); - } - if (item.hasChangedField("stroke-linecap")) { - $path.setAttrNS({ - "stroke-linecap": item.strokeLinecap - }); - } - } - super.update(item, currentElement); + [LOAD("$body") + DOMDIFF]() { + const current = this.$context.selection.current; + if (!current) + return ""; + if (current.isLayout(Layout.GRID) === false) + return ""; + return ` +
+ ${createComponent("NumberInputEditor", { + wide: true, + label: "grid padding", + key: "padding", + ref: "$padding", + value: current.paddingTop, + min: 0, + max: 300, + step: 1, + onchange: "changePadding" + })} +
+
+ ${createComponent("GridGapEditor", { + label: this.$i18n("grid.layout.editor.column.gap"), + ref: "$columnGap", + key: "gridColumnGap", + value: current.gridColumnGap || "", + onchange: "changeKeyValue" + })} +
+
+ ${createComponent("GridGapEditor", { + label: this.$i18n("grid.layout.editor.row.gap"), + ref: "$rowGap", + key: "gridRowGap", + value: current.gridRowGap || "", + onchange: "changeKeyValue" + })} +
+ `; } - updateElementCache(item, currentElement) { - if (item.getCache("element") !== currentElement) { - item.addCache("element", currentElement); - const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); - item.addCache("svgElement", $path.parent().el); - item.addCache("pathElement", $path.el); - } + [SUBSCRIBE_SELF("changePadding")](key, value) { + this.modifyData(key, { + paddingTop: value, + paddingLeft: value, + paddingRight: value, + paddingBottom: value + }); } - render(item) { - var { id, name, itemType } = item; - return ` -
- ${this.toDefString(item)} - ${item.layers.map((it) => { - return this.renderer.render(it); - }).join("")} - - - -
- `; + [SUBSCRIBE_SELF("changeKeyValue")](key, value, params) { + this.modifyData(key, value, params); } } -class CircleRender$1 extends LayerRender { -} -class ImageRender$1 extends LayerRender { - toNestedCSS() { - return [ - { - selector: "img", - cssText: ` - width: 100%; - height: 100%; - pointer-events: none; - `.trim() - } - ]; +var LayoutProperty$1 = ""; +class LayoutProperty extends BaseProperty { + getTitle() { + return this.$i18n("layout.property.title"); } - getUrl(item) { - var { src } = item; - var project2 = item.project; - return project2.getImageValueById(src) || src; + getClassName() { + return "elf--layout-property"; } - render(item) { - var { id } = item; + getBody() { return ` -
- ${this.toDefString(item)} - -
`; +
+ `; } - update(item, currentElement) { - const $image = currentElement == null ? void 0 : currentElement.$("img"); - if ($image) { - $image.attr("src", this.getUrl(item)); - } - super.update(item, currentElement); + getTools() { + return ` +
+ `; } -} -class ProjectRender$1 extends DomRender { - toRootVariableCSS(item) { - let obj2 = {}; - item.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { - var [key, value] = it.split(":"); - obj2[`--${key}`] = value; + [LOAD("$layoutType")]() { + const current = this.$context.selection.current; + if (!current) + return ""; + return createComponent("SelectIconEditor", { + ref: "$layout", + key: "layout", + height: 24, + value: current.layout, + options: [Layout.DEFAULT, Layout.FLEX, Layout.GRID], + icons: ["layout_default", "layout_flex", "layout_grid"], + onchange: "changeLayoutType" }); - return obj2; - } - toCSS(item) { - return Object.assign({}, this.toRootVariableCSS(item)); } - toStyle(item) { - const keyframeString = item.toKeyframeString(); - const rootVariable = this.toRootVariableCSS(item); + [LOAD("$layoutProperty") + DOMDIFF]() { + var current = this.$context.selection.current || { layout: "default" }; return ` - - `; +
+
+
+ ${createComponent("FlexLayoutEditor", { + ref: "$flex", + key: "flex-layout", + value: { + flexDirection: current.flexDirection, + flexWrap: current.flexWrap, + justifyContent: current.justifyContent, + alignItems: current.alignItems, + alignContent: current.alignContent, + gap: current.gap + }, + onchange: "changeLayoutInfo" + })} +
+
+ ${createComponent("GridLayoutEditor", { + ref: "$grid", + key: "grid-layout", + value: current["grid-layout"] || "", + onchange: "changeLayoutInfo" + })} +
+
+ `; } - toExportStyle(item) { - const keyframeString = item.toKeyframeString(); - const rootVariable = this.toRootVariableCSS(item); - return ` - - `; + this.nextTick(() => { + this.emit("refreshAllElementBoundSize"); + }); } - render(item) { - return item.layers.map((it) => { - return this.renderer.render(it); - }).join(""); + [SUBSCRIBE_SELF("changeLayoutType")](key, value) { + this.$context.selection.reset(this.$context.selection.packByValue({ + [key]: value + })); + this.updateTitle(); + this.$commands.executeCommand("setAttribute", "change layout type", this.$context.selection.packByValue({ + [key]: value + })); + this.nextTick(() => { + this.refresh(); + }); } - renderSVG() { - return ""; + get editableProperty() { + return "layout"; } -} -class RectRender$1 extends LayerRender { -} -class SVGPathRender$1 extends SVGItemRender$1 { - update(item, currentElement) { - if (!currentElement) - return; - const $path = currentElement.$("path"); - if ($path) { - if (item.hasChangedField("width", "height", "d")) { - $path.setAttrNS({ - d: item.d - }); - } - if (item.hasChangedField("fill")) { - $path.setAttrNS({ - fill: this.toFillValue(item) - }); - } - if (item.hasChangedField("stroke")) { - $path.setAttrNS({ - stroke: this.toStrokeValue(item) - }); - } - if (item.hasChangedField("filter")) { - $path.setAttrNS({ - filter: this.toFilterValue(item) - }); - } - if (item.hasChangedField("fill-rule")) { - $path.setAttrNS({ - "fill-rule": item.fillRule || "nonezero" - }); - } - if (item.hasChangedField("stroke-linejoin")) { - $path.setAttrNS({ - "stroke-linejoin": item.strokeLinejoin - }); - } - if (item.hasChangedField("stroke-linecap")) { - $path.setAttrNS({ - "stroke-linecap": item.strokeLinecap - }); - } - if (item.hasChangedField("stroke-dasharray")) { - $path.setAttrNS({ - "stroke-dasharray": item.strokeDasharray.join(" ") - }); - } - } - super.update(item, currentElement); + enableHasChildren() { + return this.$context.selection.current.enableHasChildren(); } - render(item) { - var { id, name, itemType } = item; - return ` -
- ${this.toDefString(item)} - - - -
- `; + updateTitle() { + this.setTitle(this.$context.selection.current.layout + " Layout"); } -} -class SplineRender$1 extends SVGPathRender$1 { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - if (item.hasChangedField("points", "boundary")) { - $path.setAttrNS({ - d: item.d - }); - } - } - super.update(item, currentElement); + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + IF("enableHasChildren")]() { + this.updateTitle(); + this.refresh(); } } -class SVGPolygonRender$1 extends SVGItemRender$1 { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - if (item.hasChangedField("width", "height", "count")) { - $path.setAttrNS({ - d: item.d - }); - } - if (item.hasChangedField("fill")) { - $path.setAttrNS({ - fill: this.toFillValue(item) - }); - } - if (item.hasChangedField("stroke")) { - $path.setAttrNS({ - stroke: this.toStrokeValue(item) - }); - } - if (item.hasChangedField("filter")) { - $path.setAttrNS({ - filter: this.toFilterValue(item) - }); - } - if (item.hasChangedField("fill-rule")) { - $path.setAttrNS({ - "fill-rule": item.fillRule || "nonezero" - }); - } - if (item.hasChangedField("stroke-linejoin")) { - $path.setAttrNS({ - "stroke-linejoin": item.strokeLinejoin - }); - } - if (item.hasChangedField("stroke-linecap")) { - $path.setAttrNS({ - "stroke-linecap": item.strokeLinecap - }); - } - } - super.update(item, currentElement); +var ResizingItemProperty$1 = ""; +class ResizingItemProperty extends BaseProperty { + getTitle() { + return this.$i18n("layout.property.resizing.self.title"); } - render(item) { - var { id, name, itemType } = item; - return ` -
- ${this.toDefString(item)} - - - -
- `; + getClassName() { + return "elf--resizing-item-property"; } -} -class SVGStarRender$1 extends SVGItemRender$1 { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - if (item.hasChangedField("width", "height", "count", "radius", "isCurve", "tension")) { - $path.setAttrNS({ - d: item.d - }); - } - if (item.hasChangedField("fill")) { - $path.setAttrNS({ - fill: this.toFillValue(item) - }); - } - if (item.hasChangedField("stroke")) { - $path.setAttrNS({ - stroke: this.toStrokeValue(item) - }); - } - if (item.hasChangedField("filter")) { - $path.setAttrNS({ - filter: this.toFilterValue(item) - }); - } - if (item.hasChangedField("fill-rule")) { - $path.setAttrNS({ - "fill-rule": item.fillRule || "nonezero" - }); - } - if (item.hasChangedField("stroke-linejoin")) { - $path.setAttrNS({ - "stroke-linejoin": item.strokeLinejoin - }); - } - if (item.hasChangedField("stroke-linecap")) { - $path.setAttrNS({ - "stroke-linecap": item.strokeLinecap - }); - } - } - super.update(item, currentElement); + getBody() { + return ` +
+
+
+
+
+
+ `; } - render(item) { - var { id, name, itemType } = item; - return ` -
- ${this.toDefString(item)} - - - -
+ [LOAD("$resizingModeInfo") + DOMDIFF]() { + var current = this.$context.selection.current || {}; + const h = current.resizingHorizontal || ResizingMode.FIXED; + const v = current.resizingVertical || ResizingMode.FIXED; + return ` +
+
+
+
+
${iconUse("keyboard_arrow_up")}
+
${iconUse("keyboard_arrow_down")}
+
+
+
${iconUse("keyboard_arrow_left")}
+
${iconUse("keyboard_arrow_right")}
+
+
+
+
+ +
`; } -} -class SVGTextPathRender$1 extends SVGItemRender$1 { - update(item, currentElement) { - var $path = currentElement.$("path.svg-path-item"); - if ($path) { - if (item.hasChangedField("width", "height", "d")) { - $path.attr("d", item.d); - } - } - var $guidePath = currentElement.$("path.guide"); - if ($guidePath) { - if (item.hasChangedField("width", "height", "d")) { - $guidePath.attr("d", item.d); - } - } - var $textPath = currentElement.$("textPath"); - if ($textPath) { - if (item.hasChangedField("text")) { - $textPath.text(item.text); - } - if (item.hasChangedField("textLength", "lengthAdjust", "startOffset")) { - $textPath.setAttrNS({ - textLength: item.textLength, - lengthAdjust: item.lengthAdjust, - startOffset: item.startOffset - }); - } - if (item.hasChangedField("fill")) { - $textPath.setAttrNS({ - fill: this.toFillValue(item) - }); - } - if (item.hasChangedField("stroke")) { - $textPath.setAttrNS({ - stroke: this.toStrokeValue(item) - }); - } - if (item.hasChangedField("filter")) { - $textPath.setAttrNS({ - filter: this.toFilterValue(item) - }); + makeOptionsForHorizontal() { + const options2 = [ + { value: ResizingMode.FIXED, text: "Fixed Width" }, + { value: ResizingMode.FILL_CONTAINER, text: "Fill Container" } + ]; + return options2; + } + makeOptionsForVertical() { + const options2 = [ + { value: ResizingMode.FIXED, text: "Fixed Height" }, + { value: ResizingMode.FILL_CONTAINER, text: "Fill Container" } + ]; + return options2; + } + [LOAD("$resizingModeInfoInput") + DOMDIFF]() { + var current = this.$context.selection.current || {}; + this.setState({ + resizingHorizontal: (current == null ? void 0 : current.resizingHorizontal) || ResizingMode.FIXED, + resizingVertical: (current == null ? void 0 : current.resizingVertical) || ResizingMode.FIXED + }, false); + return ` +
+ + ${createComponent("SelectEditor", { + ref: "$resizingHorizontal", + key: "resizingHorizontal", + value: this.state.resizingHorizontal, + options: this.makeOptionsForHorizontal(), + onchange: "changeResizingMode" + })} +
+ +
+ + ${createComponent("SelectEditor", { + ref: "$resizingVertical", + key: "resizingVertical", + value: this.state.resizingVertical, + options: this.makeOptionsForVertical(), + onchange: "changeResizingMode" + })} +
+ `; + } + [CLICK("$resizingModeInfo [data-key]")](e) { + const key = e.$dt.data("key"); + const current = this.$context.selection.current; + if (current[key] === ResizingMode.FIXED) { + this.trigger("changeResizingMode", key, ResizingMode.FILL_CONTAINER); + } else { + this.trigger("changeResizingMode", key, ResizingMode.FIXED); + } + } + [SUBSCRIBE_SELF("changeResizingMode")](key, value) { + this.$commands.executeCommand("setAttribute", "apply self resizing", this.$context.selection.packByValue({ + [key]: value, + flexGrow: 1 + })); + this.nextTick(() => { + this.refresh(); + }, 100); + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(() => { + var _a, _b; + var current = this.$context.selection.current; + return ((_a = current == null ? void 0 : current.parent) == null ? void 0 : _a.hasLayout()) && ((_b = current == null ? void 0 : current.parent) == null ? void 0 : _b.isLayout(Layout.GRID)) === false; + }); + } + [SUBSCRIBE(UPDATE_CANVAS)]() { + const current = this.$context.selection.current; + if (current && current.changedLayoutItem) { + if (current.resizingHorizontal !== this.state.resizingHorizontal || current.resizingVertical !== this.state.resizingVertical) { + this.refresh(); } } - super.update(item, currentElement); - item.totalLength = $path.totalLength; } - toDefInnerString(item) { - return ` - ${this.toPathSVG(item)} - ${this.toFillSVG(item)} - ${this.toStrokeSVG(item)} - `; +} +var ResizingProperty$1 = ""; +class ResizingProperty extends BaseProperty { + getTitle() { + return this.$i18n("layout.property.resizing.title"); } - toPathId(item) { - return this.getInnerId(item, "path"); + getClassName() { + return "elf--resizing-property"; } - toPathSVG(item) { + getBody() { return ` - +
+
+
+
+
+
+ `; + } + [LOAD("$resizingModeInfo") + DOMDIFF]() { + var current = this.$context.selection.current || {}; + const h = current.resizingHorizontal || ResizingMode.FIXED; + const v = current.resizingVertical || ResizingMode.FIXED; + return ` +
+
+
+
${iconUse("keyboard_arrow_down")}
+
${iconUse("keyboard_arrow_up")}
+
+
+
${iconUse("keyboard_arrow_right")}
+
${iconUse("keyboard_arrow_left")}
+
+
+
+
+
+
`; } - render(item) { - var { id, textLength, lengthAdjust, startOffset } = item; - const pathId = `#${this.toPathId(item)}`; + makeOptionsForHorizontal() { + const options2 = [ + { value: ResizingMode.FIXED, text: "Fixed Width" }, + { value: ResizingMode.HUG_CONTENT, text: "Hug Content" } + ]; + return options2; + } + makeOptionsForVertical() { + const options2 = [ + { value: ResizingMode.FIXED, text: "Fixed Height" }, + { value: ResizingMode.HUG_CONTENT, text: "Hug Content" } + ]; + return options2; + } + [LOAD("$resizingModeInfoInput")]() { + var current = this.$context.selection.current || {}; return ` - - ${this.toDefString(item)} - - ${item.text} - - - - +
+ + ${createComponent("SelectEditor", { + ref: "$resizingHorizontal", + key: "resizingHorizontal", + value: (current == null ? void 0 : current.resizingHorizontal) || ResizingMode.FIXED, + options: this.makeOptionsForHorizontal(), + onchange: "changeResizingMode" + })} +
+ +
+ + ${createComponent("SelectEditor", { + ref: "$resizingVertical", + key: "resizingVertical", + value: (current == null ? void 0 : current.resizingVertical) || ResizingMode.FIXED, + options: this.makeOptionsForVertical(), + onchange: "changeResizingMode" + })} +
`; } + [CLICK("$resizingModeInfo [data-key]")](e) { + const key = e.$dt.data("key"); + const current = this.$context.selection.current; + if (current[key] === ResizingMode.FIXED) { + this.trigger("changeResizingMode", key, ResizingMode.HUG_CONTENT); + } else { + this.trigger("changeResizingMode", key, ResizingMode.FIXED); + } + } + [SUBSCRIBE_SELF("changeResizingMode")](key, value) { + this.$commands.executeCommand("setAttribute", "apply constraints", this.$context.selection.packByValue({ + [key]: value + })); + this.nextTick(() => { + this.refresh(); + }, 100); + } + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(() => { + var current = this.$context.selection.current; + return current && current.hasLayout(); + }); + } } -class SVGTextRender$1 extends SVGItemRender$1 { - update(item, currentElement) { - var $text = currentElement.$("text"); - if ($text) { - if (item.hasChangedField("text")) { - $text.text(item.text); - } - if (item.hasChangedField("textLength", "lengthAdjust", "startOffset")) { - $text.setAttrNS({ - textLength: item.textLength, - lengthAdjust: item.lengthAdjust, - startOffset: item.startOffset +function layout(editor) { + editor.registerElement({ + FlexLayoutEditor, + GridLayoutEditor, + GridBoxEditor, + GridGapEditor + }); + editor.registerUI("inspector.tab.style", { + LayoutProperty, + ResizingProperty, + ResizingItemProperty, + DefaultLayoutItemProperty + }); + editor.registerUI("canvas.view", { + FlexGrowToolView, + GridGrowToolView + }, CanvasViewToolLevel.LAYOUT_TOOL); +} +var LineView$1 = ""; +class LineView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--line-view sepia(0.2)" + }); + } + [CONFIG("vertical.line")]() { + this.refresh(); + } + [CONFIG("horizontal.line")]() { + this.refresh(); + } + [SUBSCRIBE(UPDATE_VIEWPORT, UPDATE_CANVAS)]() { + this.refresh(); + } + [LOAD("$el") + DOMDIFF]() { + return [ + ...this.$config.get("vertical.line").map((it, index2) => { + const screen2 = this.$viewport.applyVertex([0, it, 0]); + return /* @__PURE__ */ createElementJsx("div", { + class: "vertical-line", + "data-index": index2, + style: `transform: translate3d(0px, ${screen2[1]}px, 0px);` }); - } - if (item.hasChangedField("fill")) { - $text.setAttrNS({ - fill: this.toFillValue(item) + }), + ...this.$config.get("horizontal.line").map((it, index2) => { + const screen2 = this.$viewport.applyVertex([it, 0, 0]); + return /* @__PURE__ */ createElementJsx("div", { + class: "horizontal-line", + "data-index": index2, + style: `transform: translate3d(${screen2[0]}px, 0px, 0px);` }); + }) + ]; + } + [POINTERSTART("$el .horizontal-line") + MOVE("moveHorizontalLine") + END("moveEndHorizontalLine")](e) { + this.startIndex = +e.$dt.data("index"); + this.$context.snapManager.clear(); + } + moveHorizontalLine() { + const newPos = this.$context.snapManager.getWorldPosition(); + this.$config.setIndexValue("horizontal.line", this.startIndex, newPos[0]); + } + moveEndHorizontalLine() { + this.$commands.emit("recoverCursor"); + } + [POINTERSTART("$el .vertical-line") + MOVE("moveVerticalLine") + END("moveEndVerticalLine")](e) { + this.startIndex = +e.$dt.data("index"); + this.$context.snapManager.clear(); + } + moveVerticalLine() { + const newPos = this.$context.snapManager.getWorldPosition(); + this.$config.setIndexValue("vertical.line", this.startIndex, newPos[1]); + } + moveEndVerticalLine() { + this.$commands.emit("recoverCursor"); + } +} +function lineView(editor) { + editor.registerUI("canvas.view", { + LineView + }); +} +var DefaultMenu = [ + { + type: "button", + icon: "navigation", + events: ["config:editing.mode"], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.SELECT); + }, + action: (editor) => { + editor.context.commands.emit("addLayerView", "select"); + editor.context.config.is("editing.mode.itemType", EditingMode.SELECT); + } + }, + { + type: "button", + icon: "artboard", + events: ["config:editing.mode", "config:editing.mode.itemType"], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.APPEND) && editor.context.config.is("editing.mode.itemType", "artboard"); + }, + action: (editor) => { + editor.context.commands.emit("addLayerView", "artboard"); + } + }, + { + type: "dropdown", + icon: (editor, dropdown) => { + var _a; + return ((_a = dropdown.findItem(editor.context.config.get("editing.css.itemType"))) == null ? void 0 : _a.icon) || iconUse("rect"); + }, + items: [ + { + icon: iconUse("rect"), + title: "Rect Layer", + key: "rect", + command: "addLayerView", + args: [ + "rect", + { + backgroundColor: "#ececec" + } + ], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "rect"); + }, + shortcut: KeyStringMaker({ key: "R" }) + }, + { + icon: iconUse("lens"), + title: "Circle Layer", + key: "circle", + command: "addLayerView", + args: ["circle"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "circle"); + }, + shortcut: KeyStringMaker({ key: "O" }) + }, + { + icon: iconUse("image"), + title: "Image", + key: "image", + command: "addLayerView", + args: ["image"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "image"); + }, + shortcut: KeyStringMaker({ key: "I" }) + }, + "-", + { + icon: iconUse("video"), + title: "Video", + key: "video", + command: "addLayerView", + args: ["video"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "video"); + }, + shortcut: KeyStringMaker({ key: "V" }) + }, + { + icon: iconUse("iframe"), + title: "IFrame", + key: "iframe", + command: "addLayerView", + args: ["iframe"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "iframe"); + }, + shortcut: KeyStringMaker({ key: "F" }) + }, + { + icon: iconUse("rect"), + title: "SampleLayer", + key: "sample", + command: "addLayerView", + args: ["sample"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.css.itemType", "sample"); + } } - if (item.hasChangedField("stroke")) { - $text.setAttrNS({ - stroke: this.toStrokeValue(item) - }); + ], + events: [ + "config:editing.mode", + "config:editing.mode.itemType", + "config:editing.css.itemType" + ], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.APPEND) && (editor.context.config.is("editing.mode.itemType", "rect") || editor.context.config.is("editing.mode.itemType", "circle") || editor.context.config.is("editing.mode.itemType", "image") || editor.context.config.is("editing.mode.itemType", "video") || editor.context.config.is("editing.mode.itemType", "iframe")); + }, + selectedKey: (editor) => { + return editor.context.config.get("editing.css.itemType"); + } + }, + { + type: "dropdown", + icon: (editor, dropdown) => { + var _a; + return ((_a = dropdown.findItem(editor.context.config.get("editing.draw.itemType"))) == null ? void 0 : _a.icon) || iconUse("pentool"); + }, + items: [ + { + icon: iconUse("pentool"), + title: "Pen", + key: "path", + command: "addLayerView", + args: ["path"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.draw.itemType", "path"); + }, + shortcut: KeyStringMaker({ key: "P" }) + }, + { + icon: iconUse("brush"), + title: "Pencil", + key: "brush", + command: "addLayerView", + args: ["brush"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.draw.itemType", "brush"); + }, + shortcut: KeyStringMaker({ key: "B" }) } - if (item.hasChangedField("filter")) { - $text.setAttrNS({ - filter: this.toFilterValue(item) - }); + ], + events: [ + "config:editing.mode", + "config:editing.mode.itemType", + "config:editing.draw.itemType" + ], + selected: (editor) => { + return editor.context.config.is("editing.mode.itemType", "path") || editor.context.config.is("editing.mode.itemType", "draw"); + }, + selectedKey: (editor) => { + return editor.context.config.get("editing.draw.itemType"); + } + }, + { + type: "dropdown", + icon: (editor, dropdown) => { + var _a; + return ((_a = dropdown.findItem(editor.context.config.get("editing.svg.itemType"))) == null ? void 0 : _a.icon) || iconUse("outline_rect"); + }, + items: [ + { + icon: iconUse("outline_rect"), + title: "Rectangle", + key: "svg-rect", + command: "addLayerView", + args: ["svg-rect"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "svg-rect"); + }, + shortcut: KeyStringMaker({ key: "Shift+R" }) + }, + { + icon: iconUse("outline_circle"), + title: "Circle", + key: "svg-circle", + command: "addLayerView", + args: ["svg-circle"], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "svg-circle"); + }, + shortcut: KeyStringMaker({ key: "Shift+O" }) + }, + { + icon: iconUse("polygon"), + title: "Polygon", + key: "svg-polygon", + command: "addLayerView", + args: [ + "polygon", + { + backgroundColor: "transparent" + } + ], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "polygon"); + }, + shortcut: KeyStringMaker({ key: "Shift+P" }) + }, + { + icon: iconUse("star"), + title: "Star", + key: "star", + command: "addLayerView", + args: [ + "star", + { + backgroundColor: "transparent" + } + ], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "star"); + }, + shortcut: KeyStringMaker({ key: "Shift+S" }) + }, + "-", + { + icon: iconUse("smooth"), + title: "Spline", + key: "spline", + command: "addLayerView", + args: [ + "spline", + { + backgroundColor: "transparent" + } + ], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "spline"); + }, + shortcut: KeyStringMaker({ key: "Shift+L" }) + }, + { + icon: iconUse("text_rotate"), + title: "TextPath", + key: "svg-texpath", + command: "addLayerView", + args: [ + "svg-textpath", + { + backgroundColor: "transparent" + } + ], + closable: true, + nextTick: (editor) => { + editor.context.config.set("editing.svg.itemType", "svg-textpath"); + }, + shortcut: KeyStringMaker({ key: "Shift+T" }) } + ], + events: [ + "config:editing.mode", + "config:editing.mode.itemType", + "config:editing.svg.itemType" + ], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.APPEND) && (editor.context.config.is("editing.mode.itemType", "svg-rect") || editor.context.config.is("editing.mode.itemType", "svg-circle") || editor.context.config.is("editing.mode.itemType", "polygon") || editor.context.config.is("editing.mode.itemType", "star") || editor.context.config.is("editing.mode.itemType", "spline") || editor.context.config.is("editing.mode.itemType", "svg-textpath")); + }, + selectedKey: (editor) => { + return editor.context.config.get("editing.svg.itemType"); + } + }, + { + type: "button", + icon: "title", + events: ["config:editing.mode", "config:editing.mode.itemType"], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.APPEND) && editor.context.config.is("editing.mode.itemType", "text"); + }, + action: (editor) => { + editor.context.commands.emit("addLayerView", "text"); + } + }, + { + type: "button", + tooltip: "Handle", + icon: "pantool", + events: ["config:editing.mode"], + selected: (editor) => { + return editor.context.config.is("editing.mode", EditingMode.HAND); + }, + action: (editor) => { + editor.context.commands.emit("toggleHandTool"); } - super.update(item, currentElement); - } - shapeInsideId(item) { - return this.getInnerId(item, "shape-inside"); - } - render(item) { - var { id, textLength, lengthAdjust } = item; - return ` - - ${this.toDefString(item)} - ${item.text} - `; - } -} -class DomTemplateEngine { - static compile(template, params = []) { - return template; } +]; +function menus(editor) { + editor.registerMenu("toolbar.logo", [ + { + type: "dropdown", + style: { + padding: "12px 0px 12px 12px" + }, + icon: `
`, + items: [ + { + title: "menu.item.fullscreen.title", + command: "toggle.fullscreen", + shortcut: "ALT+/" + }, + { + title: "menu.item.shortcuts.title", + command: "showShortcutWindow" + }, + "-", + { title: "menu.item.export.title", command: "showExportView" }, + { + title: "menu.item.export.title", + command: "showEmbedEditorWindow" + }, + { title: "menu.item.download.title", command: "downloadJSON" }, + { + title: "menu.item.save.title", + command: "saveJSON", + nextTick: () => { + this.emit("notify", "alert", "Save", "Save the content on localStorage", 2e3); + } + }, + { + title: "menu.item.language.title", + items: [ + { + title: "English", + command: "setLocale", + args: [Language.EN], + checked: (editor2) => editor2.locale === Language.EN + }, + { + title: "Fran\xE7ais", + command: "setLocale", + args: [Language.FR], + checked: (editor2) => editor2.locale === Language.FR + }, + { + title: "Korean", + command: "setLocale", + args: [Language.KO], + checked: (editor2) => editor2.locale === Language.KO + } + ] + }, + "-", + { + title: "elf document", + items: [ + { + type: "link", + title: "Github", + href: "https://github.com/easylogic/editor" + }, + { + type: "link", + title: "Learn", + href: "https://www.easylogic.studio" + } + ] + } + ] + } + ]); + editor.registerMenu("toolbar.left", DefaultMenu); } -const EngineList = { - dom: DomTemplateEngine -}; -class TemplateEngine { - static compile(engine, template, params = []) { - const currentEngine = EngineList[engine] || EngineList["dom"]; - return currentEngine.compile(template, params); +var DrawManager$1 = ""; +class DrawManager extends EditorElement { + initState() { + return { + tolerance: 1, + stroke: "black", + "stroke-width": 2, + "stroke-linecap": "round", + "stroke-linejoin": "round", + msg: this.$i18n("path.manager.msg") + }; } -} -class TemplateRender$1 extends LayerRender { - update(item, currentElement) { - if (item.hasChangedField("x", "y", "width", "height") === false) { - const compiledTemplate = this.compile(item); - let $innerHTML = currentElement.$(".inner-html"); - if ($innerHTML) { - $innerHTML.updateDiff(compiledTemplate); - } + [SUBSCRIBE(REFRESH_SELECTION)]() { + var _a, _b; + var current = this.$context.selection.current; + if (current) { + (_a = this.children.$stroke) == null ? void 0 : _a.setValue(current.stroke || "rgba(0, 0, 0, 1)"); + (_b = this.children.$strokeWidth) == null ? void 0 : _b.setValue(current.strokeWidth || Length.number(1)); } - super.update(item, currentElement); } - compile(item) { - return TemplateEngine.compile("dom", item.template, item.params); + [SUBSCRIBE("setColorAsset")]({ color: color2 }) { + if (this.$el.isShow()) { + this.setState({ + stroke: color2 + }, false); + this.children.$stroke.setValue(color2); + this.updateData({ + stroke: color2 + }); + } } - render(item) { - var { id } = item; - const compiledTemplate = this.compile(item); + template() { return ` -
- ${this.toDefString(item)} - -
- ${compiledTemplate} +
+ + ${createComponent("NumberInputEditor", { + ref: "$strokeWidth", + key: "strokeWidth", + value: this.state["strokeWidth"], + onchange: "changeValue" + })} +
+ + +
+ + ${createComponent("SelectEditor", { + ref: "$strokeLineCap", + key: "strokeLinecap", + value: this.state["strokeLinecap"], + options: ["butt", "round", "square"], + onchange: "changeValue" + })} +
+
+ + ${createComponent("SelectEditor", { + ref: "$strokeLineJoin", + key: "strokeLinejoin", + value: this.state["strokeLinejoin"], + options: ["miter", "bevel", "round"], + onchange: "changeValue" + })} +
-
`; - } -} -class TextRender$1 extends LayerRender { - toCSS(item) { - let css = super.toCSS(item); - css.margin = css.margin || "0px"; - if (item.overflow !== Overflow.SCROLL) { - if (item.content.length > 0) { - css.height = "auto"; - } - } - return css; +
+ `; } - update(item, currentElement) { - const $textElement = currentElement == null ? void 0 : currentElement.$(`.text-content`); - if ($textElement) { - var { content: content2 } = item; - $textElement.updateDiff(content2); - } - super.update(item, currentElement); + [SUBSCRIBE_SELF("changeValue")](key, value) { + this.updateData({ + [key]: value + }); } - render(item) { - var { id, content: content2 } = item; - return ` -
- ${this.toDefString(item)} -
${content2}
-
- `; + updateData(obj2 = {}) { + this.setState(obj2, false); + this.state.instance.trigger(this.state.changeEvent, obj2); } -} -class VideoRender$1 extends LayerRender { - toNestedCSS() { - return [ - { - selector: "video", - cssText: ` - width: 100%; - height: 100%; - pointer-events: none; - `.trim() - } - ]; + [SUBSCRIBE("changePathManager")](mode) { + this.setState({ mode }); } - getUrl(item) { - var { src } = item; - var project2 = item.project; - return project2.getVideoValueById(src); + [SUBSCRIBE("showDrawManager")](obj2 = {}) { + obj2.changeEvent = obj2.changeEvent || "changeDrawManager"; + this.setState(obj2); + this.$el.show(); + this.emit("hidePathManager"); } - render(item) { - var { id, controls, muted, poster, loop, crossorigin, autoplay } = item; - return ` -
- ${this.toDefString(item)} - -
`; + [SUBSCRIBE("hideDrawManager")]() { + this.$el.hide(); } - update(item, currentElement) { - const { currentTime, playbackRate, volume } = item; - const $video = currentElement.$("video"); - if ($video) { - $video.setProp({ - currentTime, - playbackRate, - volume - }); - } - super.update(item, currentElement); + [CLICK("$left button")](e) { + var message = e.$dt.attr("data-value"); + this.emit(message); } } -function rendererHtml(editor) { - const renderer = new HTMLRenderer(editor); - renderer.setRendererType("project", new ProjectRender$1()); - renderer.setRendererType("artboard", new ArtBoardRender$1()); - renderer.setRendererType("rect", new RectRender$1()); - renderer.setRendererType("circle", new CircleRender$1()); - renderer.setRendererType("image", new ImageRender$1()); - renderer.setRendererType("text", new TextRender$1()); - renderer.setRendererType("video", new VideoRender$1()); - renderer.setRendererType("boolean-path", new BooleanPathRender$1()); - renderer.setRendererType("svg-path", new SVGPathRender$1()); - renderer.setRendererType("polygon", new SVGPolygonRender$1()); - renderer.setRendererType("star", new SVGStarRender$1()); - renderer.setRendererType("spline", new SplineRender$1()); - renderer.setRendererType("svg-text", new SVGTextRender$1()); - renderer.setRendererType("svg-textpath", new SVGTextPathRender$1()); - renderer.setRendererType("template", new TemplateRender$1()); - editor.registerRendererType("html", renderer); -} -class SVGRenderer { - constructor(editor) { - this.editor = editor; +var PathDrawView$1 = ""; +const FIELDS$1 = [ + "fill", + "fill-opacity", + "stroke", + "stroke-width", + "stroke-linecap", + "stroke-linejoin" +]; +class PathDrawView extends EditorElement { + initialize() { + super.initialize(); + this.pathParser = new PathParser(); } - getDefaultRendererInstance() { - return this.editor.getRendererInstance("svg", "rect"); + initState() { + return { + points: [], + $target: null, + fill: "transparent", + stroke: "black", + "fill-opacity": null, + "stroke-width": 2, + "stroke-linecap": "round", + "stroke-linejoin": "round", + tolerance: 1 + }; } - getRendererInstance(item) { - return this.editor.getRendererInstance("svg", item.itemType) || this.getDefaultRendererInstance() || item; + [SUBSCRIBE("changeDrawManager")](obj2) { + this.setState(__spreadValues({}, obj2), false); } - render(item, renderer) { - if (!item) - return ""; - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.render(item, renderer || this); - } + get scale() { + return this.$viewport.scale; } - toCSS(item) { - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.toCSS(item); - } + template() { + return ` +
+
+
`; } - toTransformCSS(item) { - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.toTransformCSS(item); + initRect(isForce = false) { + if (!this.state.rect || isForce) { + this.state.rect = this.$el.rect(); } } - toStyle(item, renderer) { - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.toStyle(item, renderer || this); - } + [KEYUP("document") + IF("isShow") + ESCAPE + ENTER]() { + this.trigger("hidePathDrawEditor"); } - update(item, currentElement) { - const currentRenderer = this.getRendererInstance(item); - if (currentRenderer) { - return currentRenderer.update(item, currentElement); - } + [SUBSCRIBE("DrawEditorDone")]() { + this.trigger("hidePathDrawEditor"); } - codeview(item) { - if (!item) { - return ""; - } - let svgCode = this.render(item); - svgCode = svgCode.replace(//g, ">"); - return ` -
-${svgCode && `
${svgCode}
`} -
- `; + get totalPathLength() { + if (!this.refs.$view) + return 0; + var $obj = this.refs.$view.$("path.object"); + if (!$obj) + return 0; + return $obj.totalLength; } -} -class SVGRender extends DomRender { - toDefaultCSS(item) { - return { - overflow: "visible", - "background-color": item.backgroundColor, - color: item.color, - "font-size": item.fontSize, - "font-weight": item.fontWeight, - "font-style": item.fontStyle, - "font-family": item.fontFamily, - "text-align": item.textAlign, - "text-decoration": item.textDecoration, - "text-transform": item.textTransform, - "letter-spacing": item.letterSpacing, - "word-spacing": item.wordSpacing, - "line-height": item.lineHeight, - "text-indent": item.textIndent, - "text-shadow": item.textShadow, - "text-overflow": item.textOverflow, - "text-wrap": item.textWrap, - "z-index": item.zIndex, - opacity: item.opacity, - "mix-blend-mode": item.mixBlendMode, - "transform-origin": item.transformOrigin, - "border-radius": item.borderRadius, - filter: item.filter, - "backdrop-filter": item.backdropFilter, - "box-shadow": item.boxShadow, - animation: item.animation, - transition: item.transition + makePathLayer() { + var layer; + const newPath = PathParser.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30); + newPath.transformMat4(this.$viewport.matrixInverse); + const bbox = newPath.getBBox(); + const newWidth = distance$1(bbox[1], bbox[0]); + const newHeight = distance$1(bbox[3], bbox[0]); + newPath.translate(-bbox[0][0], -bbox[0][1]); + const pathItem = { + itemType: "svg-path", + x: bbox[0][0], + y: bbox[0][1], + width: newWidth, + height: newHeight, + d: newPath.d, + totalLength: this.totalPathLength }; + FIELDS$1.forEach((key) => { + if (this.state[key]) + Object.assign(pathItem, { [key]: this.state[key] }); + }); + const containerItem = this.$context.selection.currentProject; + layer = containerItem.appendChild(this.$editor.createModel(pathItem)); + return layer; } - toCSS(item) { - const css = Object.assign({}, this.toVariableCSS(item), this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toTransformCSS(item), this.toLayoutItemCSS(item), this.toBorderCSS(item), this.toBackgroundImageCSS(item), this.toLayoutCSS(item)); - delete css.left; - delete css.top; - delete css.width; - delete css.height; - delete css.position; - return css; + addPathLayer() { + var pathRect = this.getPathRect(); + if (pathRect.width !== 0 && pathRect.height !== 0) { + var layer = this.makePathLayer(pathRect); + if (layer) { + this.emit("refreshAll"); + } + } } - toSVGAttribute(item) { - var _a; - return __spreadProps(__spreadValues({}, this.toDefaultCSS(item)), { - strokeWidth: item.strokeWidth, - "fill-opacity": item.fillOpacity, - "fill-rule": item.fillRule, - "stroke-linecap": item.strokeLinecap, - "stroke-linejoin": item.strokeLinejoin, - "text-anchor": item.textAnchor, - "stroke-dasharray": (_a = item.strokeDasharray) == null ? void 0 : _a.join(" ") + changeMode(obj2) { + this.setState(__spreadValues(__spreadValues({}, this.initState()), obj2), false); + } + getCurrentObject() { + var current = this.state.current; + if (!current) { + return null; + } + return { + current, + d: current.d + }; + } + [SUBSCRIBE("showPathDrawEditor")](obj2 = {}) { + this.changeMode(obj2); + this.$el.show(); + this.$el.focus(); + this.emit("showDrawManager", { + instance: this, + fill: this.state.fill, + stroke: this.state.stroke, + "fill-opacity": this.state["fill-opacity"], + "stroke-width": this.state["stroke-width"], + "stroke-linecap": this.state["stroke-linecap"], + "stroke-linejoin": this.state["stroke-linejoin"] }); + this.emit("hidePathEditor"); + this.$context.commands.emit("push.mode.view", "PathDrawView"); } - wrappedRender(item, callback) { - const { id, x, y, width: width2, height: height2, itemType } = item; - return ` - - - ${this.toDefString(item)} - ${isFunction(callback) && callback()} - - `; + [SUBSCRIBE("initPathDrawEditor")]() { + this.pathParser.reset(""); + this.refs.$view.empty(); } - render(item, renderer) { - const { width: width2, height: height2, elementType } = item; - const tagName = elementType || "div"; - let css = this.toCSS(item); - return this.wrappedRender(item, () => { - return ` - - <${tagName} xmlns="http://www.w3.org/1999/xhtml" style="${CSS_TO_STRING(css)};width:100%;height:100%;"> - -${item.layers.map((it) => { - return renderer.render(it, renderer); - }).join("")} - `; - }); + [SUBSCRIBE("hidePathDrawEditor")]() { + if (this.$el.isShow()) { + this.trigger("initPathDrawEditor"); + this.$el.hide(); + this.emit("hideDrawManager"); + this.$commands.emit("pop.mode.view", "PathDrawView"); + } } -} -class ArtBoardRender extends SVGRender { - toCSS(item) { - const css = Object.assign({}, this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toBackgroundImageCSS(item)); - delete css.left; - delete css.top; - delete css.width; - delete css.height; - delete css.position; - return css; + [SUBSCRIBE("hideAddViewLayer")]() { + this.$el.hide(); + this.emit("hideDrawManager"); } - render(item, renderer, encoding = true) { - const { width: width2, height: height2 } = item; - let css = this.toCSS(item); - return ` -${encoding ? `` : ""} - - ${this.toDefString(item)} - ${item.layers.map((it) => { - return renderer.render(it, renderer); - }).join("")} - - `; + getInnerId(postfix = "") { + return "draw-manager-" + postfix; } -} -class SVGLayerRender extends SVGRender { -} -class SVGItemRender extends SVGLayerRender { - updateDefString(item, currentElement) { - var $defs = currentElement.$("defs"); - if ($defs) { - $defs.html(this.toDefInnerString(item)); - } else { - var str = this.toDefString(item).trim(); - currentElement.prepend(Dom.createByHTML(str)); - } + get toFillSVG() { + return SVGFill.parseImage(this.state.fill || "transparent").toSVGString(this.fillId); } - toDefInnerString(item) { + get toStrokeSVG() { + return SVGFill.parseImage(this.state.stroke || "black").toSVGString(this.strokeId); + } + get toDefInnerString() { return ` - ${this.toFillSVG(item)} - ${this.toStrokeSVG(item)} + ${this.toFillSVG} + ${this.toStrokeSVG} `; } - toDefString(item) { - const str = this.toDefInnerString(item).trim(); + get toDefString() { + var str = this.toDefInnerString.trim(); return ` ${str} `; } - fillId(item) { - return this.getInnerId(item, "fill"); - } - strokeId(item) { - return this.getInnerId(item, "stroke"); - } - toFillSVG(item) { - return SVGFill.parseImage(item.fill || "transparent").toSVGString(this.fillId(item)); - } - toStrokeSVG(item) { - return SVGFill.parseImage(item.stroke || "black").toSVGString(this.strokeId(item)); - } - toFillValue(item) { - return SVGFill.parseImage(item.fill || "transparent").toFillValue(this.fillId(item)); + get fillId() { + return this.getInnerId("fill"); } - toFillOpacityValue(item) { - return parse(item.fill || "transparent").a; + get strokeId() { + return this.getInnerId("stroke"); } - toStrokeValue(item) { - return SVGFill.parseImage(item.stroke || "black").toFillValue(this.strokeId(item)); + get toFillValue() { + return SVGFill.parseImage(this.state.fill || "transparent").toFillValue(this.fillId); } - toFilterValue(item) { - if (!item.svgfilter) { - return ""; - } - return `url(#${item.svgfilter})`; + get toStrokeValue() { + return SVGFill.parseImage(this.state.stroke || "black").toFillValue(this.strokeId); } - toLayoutCSS() { - return {}; + [BIND("$view")]() { + const newPath = PathParser.makePathByPoints(this.state.points).simplify(this.state.tolerance); + return { + innerHTML: ` + + ${this.toDefString} + + + ` + }; } -} -class BooleanPathRender extends SVGItemRender { - update(item, currentElement) { - if (!currentElement) - return; - const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); - if ($path) { - $path.setAttr({ - d: item.d, - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item) - }); - item.totalLength = $path.totalLength; - } - this.updateDefString(item, currentElement); + renderPath() { + this.bindData("$view"); } - render(item) { - var { d } = item; - return this.wrappedRender(item, () => { - return ` - - `; - }); + [SUBSCRIBE("resizeEditor")]() { + this.initRect(true); } -} -class CircleRender extends SVGLayerRender { -} -class IFrameRender extends SVGLayerRender { - update(item, currentElement) { - let $iframe = currentElement.$("iframe"); - if ($iframe) { - $iframe.attr("src", item.url || "about:blank"); + getPathRect() { + this.initRect(true); + var $obj = this.refs.$view.$("path.object"); + var pathRect = { x: 0, y: 0, width: 0, height: 0 }; + if ($obj) { + pathRect = $obj.rect(); + pathRect.x -= this.state.rect.x; + pathRect.y -= this.state.rect.y; } - super.update(item, currentElement); - } - render(item) { - const { width: width2, height: height2, url = "about:blank" } = item; - let css = this.toCSS(item); - return this.wrappedRender(item, () => { - return ` - - - - `; - }); + return pathRect; } -} -class ImageRender extends SVGLayerRender { - getUrl(item) { - var { src } = item; - var project2 = item.project; - return project2.getImageValueById(src); + [POINTERSTART("$view") + MOVE() + END()](e) { + this.initRect(); + this.state.altKey = false; + this.state.startXY = { + x: e.xy.x - this.state.rect.x, + y: e.xy.y - this.state.rect.y + }; + this.state.points = [this.state.startXY]; } - render(item) { - const { width: width2, height: height2 } = item; - let css = this.toCSS(item); - return this.wrappedRender(item, () => { - return ` - -
- -
- - `; + move(dx, dy, eventType, pressure) { + this.state.points.push({ + x: this.state.startXY.x + dx, + y: this.state.startXY.y + dy, + pressure }); + this.renderPath(); } - update(item, currentElement) { - const $image = currentElement.$("img"); - if ($image) { - $image.attr("src", this.getUrl(item)); - } - super.update(item, currentElement); - } -} -class ProjectRender extends SVGRender { - render(item, renderer) { - return item.artboards.map((it) => { - return renderer.render(it, renderer); - }); + end() { + this.addPathLayer(); + this.trigger("initPathDrawEditor"); } } -class RectRender extends SVGLayerRender { +function pathDrawView(editor) { + editor.registerUI("canvas.view", { + PathDrawView + }); + editor.registerUI("page.subeditor.view", { + DrawManager + }); } -class SplineRender extends SVGItemRender { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - $path.setAttr({ - d: item.d, - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item) - }); - } - this.updateDefString(item, currentElement); - } - render(item) { - var { d } = item; - return this.wrappedRender(item, () => { - return ` - - `; - }); +var PathEditorView$1 = ""; +const SEGMENT_DIRECTION = ["startPoint", "endPoint", "reversePoint"]; +function calculateSnapPoint(points, sourceKey, target, distanceValue, dist2) { + var checkedPointList = points.filter((p) => { + if (!p) + return false; + return Math.abs(p[sourceKey] - target) <= dist2; + }).map((p) => { + return { dist: Math.abs(p[sourceKey] - target), point: p }; + }); + checkedPointList.sort((a, b) => { + return a.dist < b.dist ? -1 : 1; + }); + var point2 = null; + if (checkedPointList.length) { + point2 = checkedPointList[0].point; + distanceValue += point2[sourceKey] - target; } + return { point: point2, distanceValue }; } -class SVGPathRender extends SVGItemRender { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - $path.setAttr({ - d: item.d, - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item) - }); - item.totalLength = $path.totalLength; - } - this.updateDefString(item, currentElement); +function calculateMovePointSnap(points, moveXY, dist2 = 1) { + var snapPointX = calculatePointDist(points, "x", moveXY.x, dist2); + var snapPointY = calculatePointDist(points, "y", moveXY.y, dist2); + var snapEndPoint = __spreadValues({}, moveXY); + if (snapPointX) { + snapEndPoint.x = snapPointX.x; } - render(item) { - var { d } = item; - return this.wrappedRender(item, () => { - return ` - - `; - }); + if (snapPointY) { + snapEndPoint.y = snapPointY.y; } -} -class SVGPolygonRender extends SVGItemRender { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - $path.setAttr({ - d: item.d, - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item) - }); - } - this.updateDefString(item, currentElement); + var snapPointList = []; + if (snapPointX) { + snapPointList.push({ startPoint: snapPointX, endPoint: snapEndPoint }); } - render(item) { - var { d } = item; - return this.wrappedRender(item, () => { - return ` - - `; - }); + if (snapPointY) { + snapPointList.push({ startPoint: snapPointY, endPoint: snapEndPoint }); } + return { snapPointList, moveXY: snapEndPoint }; } -class SVGStarRender extends SVGItemRender { - update(item, currentElement) { - if (!currentElement) - return; - var $path = currentElement.$("path"); - if ($path) { - $path.setAttr({ - d: item.d, - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item) - }); - } - this.updateDefString(item, currentElement); - } - render(item) { - var { d } = item; - return this.wrappedRender(item, () => { - return ` - - `; +function calculatePointDist(points, sourceKey, target, dist2) { + var checkedPointList = []; + var arr = SEGMENT_DIRECTION; + points.filter((p) => p).forEach((p) => { + arr.filter((key) => p[key]).forEach((key) => { + var point2 = p[key]; + var tempDist = Math.abs(point2[sourceKey] - target); + if (tempDist <= dist2) { + checkedPointList.push({ dist: tempDist, point: point2 }); + } }); - } + }); + checkedPointList.sort((a, b) => { + return a.dist > b.dist ? 1 : -1; + }); + return checkedPointList.length ? checkedPointList[0].point : null; } -class SVGTextPathRender extends SVGItemRender { - update(item, currentElement) { - var $path = currentElement.$("path"); - if ($path) { - $path.attr("d", item.d); +function toPath(points, minX, minY, scale2 = 1) { + var d = []; + for (var index2 = 0, len2 = points.length; index2 < len2; index2++) { + var currentIndex = index2; + var current = points[currentIndex]; + if (!current) + continue; + if (current.command === "M") { + d.push({ command: "M", values: [current.startPoint] }); + } else { + var prevPoint = Point.getPrevPoint(points, index2); + if (current.curve === false) { + if (prevPoint.curve === false) { + d.push({ command: "L", values: [current.startPoint] }); + } else { + d.push({ + command: "Q", + values: [prevPoint.endPoint, current.startPoint] + }); + } + } else { + if (prevPoint.curve === false) { + if (Point.isEqual(current.reversePoint, current.startPoint)) { + d.push({ command: "L", values: [current.startPoint] }); + } else { + d.push({ + command: "Q", + values: [current.reversePoint, current.startPoint] + }); + } + } else { + d.push({ + command: "C", + values: [ + prevPoint.endPoint, + current.reversePoint, + current.startPoint + ] + }); + } + } } - var $textPath = currentElement.$("textPath"); - if ($textPath) { - $textPath.text(item.text); - $textPath.setAttr({ - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item), - textLength: item.textLength, - lengthAdjust: item.lengthAdjust, - startOffset: item.startOffset - }); + if (current.close) { + d.push({ command: "Z" }); } - this.updateDefString(item, currentElement); - item.totalLength = $path.totalLength; } - toDefInnerString(item) { - return ` - ${this.toPathSVG(item)} - ${this.toFillSVG(item)} - ${this.toStrokeSVG(item)} - `; + var dString = d.map((segment) => { + return calculateRelativePosition(minX, minY, segment, scale2); + }).join(" "); + return { + d: dString + }; +} +function calculateRelativePosition(minX, minY, segment, scale2 = 1) { + var { command, values } = segment; + switch (command) { + case "Z": + return "Z"; + default: + var str = values.map((v) => { + var tx = v.x - minX === 0 ? 0 : (v.x - minX) / scale2; + var ty = v.y - minY === 0 ? 0 : (v.y - minY) / scale2; + return `${tx} ${ty}`; + }).join(" "); + return `${command} ${str}`; } - toPathId(item) { - return this.getInnerId(item, "path"); +} +function checkInArea(area2, point2) { + if (area2.x2.value < point2.x) { + return false; } - toPathSVG(item) { - return ` - - `; + if (area2.y2.value < point2.y) { + return false; } - render(item) { - return this.wrappedRender(item, () => { - const { textLength, lengthAdjust, startOffset } = item; - return ` - ${item.text} - `; - }); + if (area2.x.value > point2.x) { + return false; + } + if (area2.y.value > point2.y) { + return false; } + return true; } -class SVGTextRender extends SVGItemRender { - update(item, currentElement) { - var $text = currentElement.$("text"); - if ($text) { - $text.text(item.text); - $text.setAttr({ - filter: this.toFilterValue(item), - fill: this.toFillValue(item), - stroke: this.toStrokeValue(item), - textLength: item.textLength, - lengthAdjust: item.lengthAdjust - }); - } - this.updateDefString(item, currentElement); +class PathGenerator { + static generatorPathString(points, minX = 0, minY = 0, scale2 = 1) { + return toPath(points, minX, minY, scale2).d; } - shapeInsideId(item) { - return this.getInnerId(item, "shape-inside"); + constructor(pathEditor) { + this.pathEditor = pathEditor; + this.pathStringManager = new PathStringManager(); + this.guideLineManager = new PathStringManager(); + this.segmentManager = new SegmentManager(this.pathEditor.$viewport); + this.points = []; + this.cachedSegmentKeys = {}; + this.initialize(); + this.initializeSelect(); } - render(item) { - var { textLength, lengthAdjust } = item; - return this.wrappedRender(item, () => { - return ` - ${item.text} - `; - }); + initialize() { + this.splitLines = []; + this.guideLineManager.reset(); + this.segmentManager.reset(); + this.pathStringManager.reset(); } -} -class TemplateRender extends SVGLayerRender { - update(item, currentElement) { - const compiledTemplate = this.compile(item); - let $innerHTML = currentElement.$(".inner-html"); - if ($innerHTML) { - $innerHTML.updateDiff(compiledTemplate); + initializeSelect(initPointList = []) { + this.selectedPointKeys = {}; + this.selectedPointList = []; + if (initPointList.length) { + this.select(...initPointList.map((p) => { + const checkedPoint = this.points[p.index][p.key]; + if (!checkedPoint) + return void 0; + return { + x: checkedPoint.x, + y: checkedPoint.y, + key: p.key, + index: checkedPoint.index + }; + }).filter(Boolean)); } - super.update(item, currentElement); } - compile(item) { - return TemplateEngine.compile("dom", item.template, item.params); + get state() { + return this.pathEditor.state; } - render(item) { - const { id, width: width2, height: height2 } = item; - const compiledTemplate = this.compile(item); - return this.wrappedRender(item, () => { - return ` - -
- -
- ${compiledTemplate} -
-
- - `; - }); + get clonePoints() { + return [...this.points]; } -} -class TextRender extends SVGLayerRender { - toCSS(item) { - let css = super.toCSS(item); - css.margin = css.margin || "0px"; - css.height = "auto"; - return css; + get length() { + return this.points.length; } - render(item) { - const { content: content2, width: width2, height: height2 } = item; - let css = this.toCSS(item); - return this.wrappedRender(item, () => { - return ` - -

${content2}

- - `; - }); + setPoints(points = []) { + this.points = points; + this.snapPointList = []; + if (this.points.length === 0) { + this.select(); + this.selectGroup(-1); + } } - update(item, currentElement) { - var { content: content2 } = item; - currentElement.updateDiff(content2); + selectInBox(box, isToggle = false) { + var list2 = []; + this.points.forEach((point2, index2) => { + SEGMENT_DIRECTION.forEach((key) => { + const p = point2[key]; + if (checkInArea(box, p)) { + list2.push({ x: p.x, y: p.y, key, index: index2 }); + } + }); + }); + if (isToggle) { + list2 = list2.map((it) => { + const selectedKey = this.makeSegmentKey(it); + return __spreadProps(__spreadValues({}, it), { + included: Boolean(this.selectedPointKeys[selectedKey]) + }); + }); + const includedList = list2.filter((it) => it.included); + const notIncludedList = list2.filter((it) => !it.included); + let uniqueList = [...this.selectedPointList]; + if (includedList.length) { + uniqueList = this.selectedPointList.filter((it) => { + const oldKey = this.makeSegmentKey(it); + return Boolean(includedList.find((includeNode) => { + return oldKey === this.makeSegmentKey(includeNode); + })) === false; + }); + } + this.select(...uniqueList, ...notIncludedList); + } else { + this.select(...list2); + } } -} -class VideoRender extends SVGLayerRender { - getUrl(item) { - var { src } = item; - var project2 = item.project; - return project2.getVideoValueById(src); + makeSegmentKey(p) { + return `${p.key}_${p.index}`; } - render(item) { - var { - width: width2, - height: height2, - controls, - muted, - poster, - loop, - crossorigin, - autoplay - } = item; - let css = this.toCSS(item); - return this.wrappedRender(item, () => { - return ` - - - - `; + select(...list2) { + this.selectedPointKeys = {}; + this.selectedPointList = list2.map(({ x, y, key, index: index2 }) => ({ + x, + y, + key, + index: +index2 + })); + list2.forEach((it) => { + var key = this.makeSegmentKey(it); + this.selectedPointKeys[key] = true; }); } -} -function rendererSvg(editor) { - editor.registerRendererType("svg", new SVGRenderer(editor)); - editor.registerRenderer("svg", "project", new ProjectRender()); - editor.registerRenderer("svg", "artboard", new ArtBoardRender()); - editor.registerRenderer("svg", "rect", new RectRender()); - editor.registerRenderer("svg", "circle", new CircleRender()); - editor.registerRenderer("svg", "image", new ImageRender()); - editor.registerRenderer("svg", "template", new TemplateRender()); - editor.registerRenderer("svg", "iframe", new IFrameRender()); - editor.registerRenderer("svg", "video", new VideoRender()); - editor.registerRenderer("svg", "text", new TextRender()); - editor.registerRenderer("svg", "boolean-path", new BooleanPathRender()); - editor.registerRenderer("svg", "svg-path", new SVGPathRender()); - editor.registerRenderer("svg", "polygon", new SVGPolygonRender()); - editor.registerRenderer("svg", "star", new SVGStarRender()); - editor.registerRenderer("svg", "spline", new SplineRender()); - editor.registerRenderer("svg", "svg-text", new SVGTextRender()); - editor.registerRenderer("svg", "svg-textpath", new SVGTextPathRender()); -} -var HTMLRenderView$1 = ""; -class HTMLRenderView extends EditorElement { - initialize() { - super.initialize(); - rendererHtml(this.$editor); - rendererSvg(this.$editor); - this.renderer = this.$editor.renderer("html"); + convertPointsToSelectionList(points) { + var list2 = []; + points.forEach((point2) => { + SEGMENT_DIRECTION.forEach((key) => { + const { x, y } = point2[key]; + list2.push({ x, y, key, index: point2.index }); + }); + }); + return list2; } - initState() { - return { - mode: "selection", - x: 0, - y: 0, - width: 1e4, - height: 1e4, - cachedCurrentElement: {}, - doubleClickTime: 0 - }; + selectGroup(groupIndex) { + const group2 = this.splitedGroupList[groupIndex]; + if (group2) { + this.select(...this.convertPointsToSelectionList(group2.points)); + } else { + this.select(); + } } - template() { - return `
-
- ${this.$injectManager.generate("render.view")} -
`; + getCacheSegmentKey(segmentKey, index2) { + if (!this.cachedSegmentKeys[segmentKey]) { + this.cachedSegmentKeys[segmentKey] = {}; + } + if (!this.cachedSegmentKeys[segmentKey][index2]) { + this.cachedSegmentKeys[segmentKey][index2] = this.makeSegmentKey({ + key: segmentKey, + index: index2 + }); + } + return this.cachedSegmentKeys[segmentKey][index2]; } - [BIND("$view")]() { - const { translate: translate2, transformOrigin: origin, scale: scale2 } = this.$viewport; - const transform2 = `translate(${translate2[0]}px, ${translate2[1]}px) scale(${scale2 || 1})`; - const transformOrigin = `${origin[0]}px ${origin[1]}px`; - return { - style: { - "transform-origin": transformOrigin, - transform: transform2 + toggleSelect(key, index2) { + if (this.points[index2]) { + var point2 = this.points[index2][key]; + if (point2 && !this.isSelectedSegment(key, index2)) { + this.select(...this.selectedPointList, { + x: point2.x, + y: point2.y, + key, + index: index2 + }); + } else { + this.select(...this.selectedPointList.filter((it) => { + return it.key !== key || it.index !== index2; + })); } - }; - } - [CONFIG("show.outline")]() { - this.refs.$view.attr("data-outline", this.$config.get("show.outline")); + } } - [CONFIG("bodyEvent")]() { - const e = this.$config.get("bodyEvent"); - if (e.buttons === 0) { - if (Dom.create(e.target).hasClass("elf--drag-area-view")) { - this.$commands.emit("recoverCursor"); + selectKeyIndex(key, index2) { + if (this.points[index2]) { + var point2 = this.points[index2][key]; + if (point2 && !this.isSelectedSegment(key, index2)) { + this.select({ x: point2.x, y: point2.y, key, index: index2 }); } } } - [SUBSCRIBE("refElement")](id, callback) { - isFunction(callback) && callback(this.getElement(id)); + reselect() { + this.selectedPointList.filter(Boolean).forEach((it) => { + var _a; + var point2 = (_a = this.points[it.index]) == null ? void 0 : _a[it.key]; + if (point2) { + it.x = point2.x; + it.y = point2.y; + } + }); } - [SUBSCRIBE(UPDATE_CANVAS)](obj2) { - this.refreshSelectionStyleView(obj2); + isSelectedSegment(segment, index2) { + var key = this.getCacheSegmentKey(segment, index2); + return this.selectedPointKeys[key]; } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.bindData("$view"); + commitTransformMatrix(point2, transformMatrix) { + var result = transformMat4([], [point2.x, point2.y, 0], transformMatrix); + return { x: result[0], y: result[1] }; } - [SUBSCRIBE("refreshAllElementBoundSize")]() { - this.refreshAllElementBoundSize(); + transformMat4(transformMatrix) { + this.transformPoints.forEach((p, index2) => { + var realPoint = this.points[index2]; + Object.assign(realPoint.startPoint, this.commitTransformMatrix(p.startPoint, transformMatrix)); + Object.assign(realPoint.endPoint, this.commitTransformMatrix(p.endPoint, transformMatrix)); + Object.assign(realPoint.reversePoint, this.commitTransformMatrix(p.reversePoint, transformMatrix)); + }); } - [SUBSCRIBE("refreshElementBoundSize")](parentObj) { - this.refreshElementBoundSize(parentObj); + transform(type) { + var { x, y, width: width2, height: height2 } = this.transformRect; + var view = create$4(); + translate(view, view, [x, y, 0]); + switch (type) { + case "flipX": + scale$1(view, view, [-1, 1, 1]); + translate(view, view, [-width2, 0, 0]); + break; + case "flipY": + scale$1(view, view, [1, -1, 1]); + translate(view, view, [0, -height2, 0]); + break; + case "flip": + scale$1(view, view, [-1, -1, 1]); + translate(view, view, [-width2, -height2, 0]); + break; + } + translate(view, view, [-x, -y, 0]); + this.transformMat4(view); } - [SUBSCRIBE("updateAllCanvas")](parentLayer) { - this.updateAllCanvas(parentLayer); + initTransform(rect2) { + this.transformRect = clone$1(rect2); + this.transformPoints = this.clonePoints.map((p) => { + return { + startPoint: clone$1(p.startPoint), + endPoint: clone$1(p.endPoint), + reversePoint: clone$1(p.reversePoint) + }; + }); } - [SUBSCRIBE("refreshAllCanvas")]() { - this.refreshAllCanvas(); + setConnectedPoint(dx, dy) { + var state = this.state; + var x = state.dragXY.x + dx; + var y = state.dragXY.y + dy; + var endPoint = { x, y }; + var reversePoint = { x, y }; + if (state.dragPoints) { + state.reversePoint = Point.getReversePoint(state.startPoint, endPoint); + } + var point2 = { + startPoint: state.startPoint, + endPoint, + curve: !!state.dragPoints, + reversePoint, + connected: true, + close: true + }; + this.points.push(point2); + } + setLastPoint(startPoint) { + var endPoint = clone$1(startPoint); + var reversePoint = clone$1(startPoint); + var point2 = { + startPoint, + endPoint, + curve: false, + reversePoint, + connected: false, + close: false + }; + this.points.push(point2); } - [SUBSCRIBE("playTimeline", "moveTimeline")]() { - const project2 = this.$context.selection.currentProject; - var timeline = project2.getSelectedTimeline(); - if (timeline) { - timeline.animations.map((it) => this.$model.get(it.id)).forEach((current) => { - this.updateTimelineElement(current, true, false); - }); - } + getPrevPoint(index2) { + return Point.getPrevPoint(this.points, index2); } - clearElementAll() { - this.state.cachedCurrentElement = {}; + getIndexPoint(index2) { + return Point.getIndexPoint(this.points, index2); } - clearElement(id) { - this.state.cachedCurrentElement[id] = void 0; + getNextPoint(index2) { + return Point.getNextPoint(this.points, index2); } - getElement(id) { - if (!this.state.cachedCurrentElement[id]) { - this.state.cachedCurrentElement[id] = this.refs.$view.$(`[data-id="${id}"]`); - } - return this.state.cachedCurrentElement[id]; + getConnectedPointList(index2) { + return Point.getConnectedPointList(this.points, index2); } - [FOCUSOUT("$view .element-item.text .text-content")](e) { - e.$dt.removeAttr("contenteditable"); - e.$dt.removeClass("focused"); - this.$context.commands.emit("pop.mode.view", "TextEditorView"); - this.$context.commands.emit("recoverCursor"); + isFirst(segment) { + return Point.isFirst(segment); } - [KEYUP("$view .element-item.text .text-content")](e) { - var content2 = e.$dt.html(); - var text2 = e.$dt.text().trim(); - var id = e.$dt.parent().attr("data-id"); - var arr = []; - this.$context.selection.items.filter((it) => it.id === id).forEach((item) => { - item.reset({ - content: content2, - text: text2 - }); - arr.push({ id: item.id, content: content2, text: text2 }); - this.$commands.emit("setAttribute", { - [item.id]: { - content: content2, - text: text2 - } - }); - }); - this.emit("refreshContent", arr); + getLastPoint(index2) { + return Point.getLastPoint(this.points, index2); } - checkEditMode(e) { - this.state.hasDoubleClick = false; - if (window.performance.now() - this.state.doubleClickTime < this.$config.get("event.doubleclick.timing")) { - this.state.hasDoubleClick = true; - return false; - } - if (this.$config.is("editing.mode", EditingMode.HAND)) { - return false; - } - const code2 = this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space); - if (this.$context.keyboardManager.check(code2)) { - return false; + setCachePoint(index2, segmentKey) { + var state = this.state; + this.snapPointList = []; + this.selectedIndex = index2; + state.connectedPoint = this.getPrevPoint(index2); + state.connectedPointList = clone$1(Point.getConnectedPointList(this.points, this.selectedIndex)); + if (state.connectedPoint && !state.connectedPoint.connected) { + state.connectedPoint = null; } - const $target = Dom.create(e.target); - if ($target.hasClass("canvas-view")) { - return false; + state.segment = this.getIndexPoint(index2); + if (state.segment.connected) { + state.connectedPoint = this.getNextPoint(index2); } - if (!e.shiftKey) { - const mousePoint = this.$viewport.getWorldPosition(e); - if (this.$context.selection.hasPoint(mousePoint)) { - if (this.$context.selection.hasHoverItem()) { - if (this.$context.selection.hasParent(this.$context.selection.hoverId) === false) { - this.$context.selection.selectHoverItem(); - } - } - return true; - } - if (this.$context.selection.hasHoverItem()) { - this.$context.selection.selectHoverItem(); - return true; + var isFirstSegment = this.isFirst(state.segment); + if (isFirstSegment) { + var lastPoint = this.getLastPoint(index2); + if (lastPoint.connected) { + state.connectedPoint = lastPoint; } } - const $element = $target.closest("element-item"); - if ($element) { - if ($element.hasClass("focused")) { - return false; - } - var id = $element.attr("data-id"); - if (e.altKey === false) { - const item = this.$model.get(id); - if (item.is("artboard") && item.hasChildren()) { - this.$config.init("set.dragarea.mode", true); - return true; - } - } - } else { - return false; + state.segmentKey = segmentKey; + state.isCurveSegment = state.segment.curve && state.segmentKey != "startPoint"; + state.originalSegment = clone$1(state.segment); + if (state.connectedPoint) { + state.originalConnectedPoint = clone$1(state.connectedPoint); } - return true; + state.cachedPoints = []; + this.points.filter((p) => p && p != state.segment).forEach((p) => { + state.cachedPoints.push(p.startPoint, p.reversePoint, p.endPoint); + }); } - [DOUBLECLICK("$view")](e) { - this.state.doubleClickTime = window.performance.now(); - const $item = Dom.create(e.target).closest("element-item"); - if ($item) { - const id = $item.attr("data-id"); - const item = this.$model.get(id); - if (item.is("text")) { - const $content = $item.$(".text-content"); - $content.addClass("focused"); - $content.attr("contenteditable", "true"); - $content.focus(); - $content.select(); - this.$context.commands.emit("push.mode.view", "TextEditorView"); - } else { - this.$context.commands.emit("doubleclick.item", e, id); + moveSegment(segmentKey, dx, dy, originSegment = void 0) { + if (originSegment) { + const segment = this.points[originSegment.index][segmentKey]; + segment.x = originSegment[segmentKey].x + dx; + segment.y = originSegment[segmentKey].y + dy; + } else { + var state = this.state; + var originPoint = state.originalSegment[segmentKey]; + var targetPoint = state.segment[segmentKey]; + if (originPoint) { + targetPoint.x = originPoint.x + dx; + targetPoint.y = originPoint.y + dy; } } } - [CONTEXTMENU("$view") + PREVENT](e) { - const $target = Dom.create(e.target); - const $element = $target.closest("element-item"); - var id = $element && $element.attr("data-id"); - this.$context.selection.select(id); - this.emit(OPEN_CONTEXT_MENU, { - target: "context.menu.layer", - items: [ - "-", - { - type: "button", - checked: true, - title: "yellow", - action: () => { - console.log("console.log", "yellow"); - } - } - ], - x: e.clientX, - y: e.clientY, - id - }); + calculateToCurve(point2, nextPoint, prevPoint) { + var centerX = (nextPoint.startPoint.x + prevPoint.startPoint.x) / 2; + var centerY = (nextPoint.startPoint.y + prevPoint.startPoint.y) / 2; + var dx = (nextPoint.startPoint.x - centerX) / 2; + var dy = (nextPoint.startPoint.y - centerY) / 2; + point2.endPoint = { + x: point2.startPoint.x + dx, + y: point2.startPoint.y + dy + }; + point2.reversePoint = { + x: point2.startPoint.x - dx, + y: point2.startPoint.y - dy + }; + return { dx, dy }; } - [POINTERSTART("$view") + IF("checkEditMode") + MOVE("calculateMovedElement") + FIRSTMOVE("calculateFirstMovedElement") + END("calculateEndedElement")](e) { - this.initMousePoint = this.$viewport.getWorldPosition(e); - this.$config.init("set.move.control.point", true); - this.$config.set("editing.mode.itemType", "select"); - if (this.$config.get("set.dragarea.mode")) { - this.emit("startDragAreaView"); - return; - } - let isInSelectedArea = this.$context.selection.hasPoint(this.initMousePoint); - const $target = Dom.create(e.target); - if ($target.hasClass("canvas-view")) { - this.$context.selection.select(); - this.initializeDragSelection(); - return false; - } - const $element = $target.closest("element-item"); - var id = $element && $element.attr("data-id"); - if (e.altKey) { - if (isInSelectedArea) - ; - else { - if (this.$context.selection.check({ id }) === false) { - this.$context.selection.selectByGroup(id); + convertToCurve(index2) { + var point2 = this.points[index2]; + if (point2.curve) { + point2.curve = false; + point2.reversePoint = clone$1(point2.startPoint); + point2.endPoint = clone$1(point2.startPoint); + if (point2.command === "M") { + var lastPoint = Point.getPrevPoint(this.points, point2.index); + if (lastPoint.connected) { + lastPoint.curve = false; + lastPoint.reversePoint = clone$1(lastPoint.startPoint); + lastPoint.endPoint = clone$1(lastPoint.startPoint); + } + } else { + var nextPoint = this.getNextPoint(index2); + if (nextPoint && nextPoint.command === "M") { + var firstPoint = nextPoint; + firstPoint.curve = false; + firstPoint.reversePoint = clone$1(firstPoint.startPoint); + firstPoint.endPoint = clone$1(firstPoint.startPoint); } - } - if (this.$context.selection.isEmpty === false) { - this.$commands.emit("history.copyLayer", "copy"); - this.emit("refreshLayerTreeView"); - this.initializeDragSelection(); } } else { - if (isInSelectedArea) - ; - else { - if (e.shiftKey) { - this.$context.selection.toggleById(id); - } else { - if (this.$context.selection.check({ id }) === false) { - const current = this.$model.get(id); - if (current && current.is("artboard") && current.hasChildren()) - ; - else if (current.hasChildren()) { - this.$context.selection.selectByGroup(id); - } else { - this.$context.selection.selectByGroup(id); - } - } - } + point2.curve = true; + var prevPoint = this.getPrevPoint(index2); + var nextPoint = this.getNextPoint(index2); + if (nextPoint && nextPoint.index < index2 && nextPoint.command === "M") { + var firstPoint = nextPoint; + nextPoint = this.getNextPoint(firstPoint.index); + this.calculateToCurve(point2, nextPoint, prevPoint); + firstPoint.curve = true; + firstPoint.endPoint = clone$1(point2.endPoint); + firstPoint.reversePoint = clone$1(point2.reversePoint); + } else if (nextPoint && nextPoint.index > index2 && nextPoint.command !== "M") { + this.calculateToCurve(point2, nextPoint, prevPoint); + } else if (!nextPoint && prevPoint) { + var centerX = (point2.startPoint.x - prevPoint.startPoint.x) / 3; + var centerY = (point2.startPoint.y - prevPoint.startPoint.y) / 3; + point2.endPoint = { + x: point2.startPoint.x + centerX, + y: point2.startPoint.y + centerY + }; + point2.reversePoint = Point.getReversePoint(point2.startPoint, point2.endPoint); + } else if (!prevPoint && nextPoint) { + var centerX = (point2.startPoint.x - nextPoint.startPoint.x) / 3; + var centerY = (point2.startPoint.y - nextPoint.startPoint.y) / 3; + point2.endPoint = { + x: point2.startPoint.x + centerX, + y: point2.startPoint.y + centerY + }; + point2.reverse = Point.getReversePoint(point2.startPoint, point2.endPoint); } - this.initializeDragSelection(); } } - initializeDragSelection() { - this.$context.selection.reselect(); - this.$context.snapManager.clear(); - this.emit("startGhostToolView"); + moveCurveSegment(segmentKey, dx, dy) { + var state = this.state; + this.moveSegment(segmentKey, dx, dy); + var targetSegmentKey = segmentKey === "endPoint" ? "reversePoint" : "endPoint"; + state.segment[targetSegmentKey] = Point.getReversePoint(state.segment.startPoint, state.segment[segmentKey]); } - calculateFirstMovedElement() { - this.emit("hideSelectionToolView"); - this.emit("moveFirstGhostToolView"); + rotateSegmentTarget(segmentKey, target) { + var state = this.state; + if (state.originalSegment && state.segment) { + var { x: cx, y: cy } = state.originalSegment.startPoint; + var { x: rx, y: ry } = state.segment[segmentKey]; + var { x: tx, y: ty } = state.originalSegment[target]; + var { x, y } = getXYInCircle(calculateAngle360(rx - cx, ry - cy), getDist(tx, ty, cx, cy), cx, cy); + state.segment[target] = { x, y }; + } } - calculateMovedElement() { - if (this.$config.get("set.dragarea.mode")) { - this.emit("moveDragAreaView"); - return; + rotateSegment(segmentKey) { + this.rotateSegmentTarget(segmentKey, segmentKey === "endPoint" ? "reversePoint" : "endPoint"); + } + calculateSnap(segmentKey, dx, dy, dist2 = 1) { + var state = this.state; + var cachedPoints = state.cachedPoints; + var original = state.originalSegment[segmentKey]; + if (!segmentKey) { + return { dx, dy, snapPointList: [] }; } - const targetMousePoint = this.$viewport.getWorldPosition(); - this.emit("moveGhostToolView"); - if (this.$context.selection.isLayoutItem) { - return; + var realX = original.x + dx; + var realY = original.y + dy; + var { point: snapPointX, distanceValue: dx } = calculateSnapPoint(cachedPoints, "x", realX, dx, dist2); + var { point: snapPointY, distanceValue: dy } = calculateSnapPoint(cachedPoints, "y", realY, dy, dist2); + var snapEndPoint = { + x: original.x + dx, + y: original.y + dy + }; + var snapPointList = []; + if (snapPointX) { + snapPointList.push({ startPoint: snapPointX, endPoint: snapEndPoint }); } - const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); - this.moveTo(newDist); - if (this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(targetMousePoint))) { - this.initMousePoint = targetMousePoint; - this.$context.selection.reselect(); - this.$context.snapManager.clear(); - this.refreshAllCanvas(); - this.emit("refreshLayerTreeView"); + if (snapPointY) { + snapPointList.push({ startPoint: snapPointY, endPoint: snapEndPoint }); } - this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y")); + return { dx, dy, snapPointList }; } - moveTo(dist2) { - const snap = this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map((v) => { - return add$1([], v, dist2); - }), 3 / this.$viewport.scale); - const localDist = add$1([], snap.dist, dist2); - const result = {}; - this.$context.selection.cachedItemMatrices.forEach((it) => { - const oldVertex = it.verties[4]; - const newVertex = add$1([], oldVertex, localDist); - const newDist = subtract([], transformMat4([], newVertex, it.parentMatrixInverse), transformMat4([], oldVertex, it.parentMatrixInverse)); - if (this.$context.selection.isOne) { - result[it.id] = { - x: Math.round(it.x + newDist[0]), - y: Math.round(it.y + newDist[1]) - }; - } else { - result[it.id] = { - x: it.x + newDist[0], - y: it.y + newDist[1] - }; - } - }); - this.$context.selection.reset(result); + copySegment(from, to) { + to.startPoint = clone$1(from.startPoint); + to.endPoint = clone$1(from.endPoint); + to.reversePoint = clone$1(from.reversePoint); } - calculateEndedElement(dx, dy) { - if (this.state.hasDoubleClick) { - this.state.doubleClickTime = window.performance.now(); - return; - } - const targetMousePoint = this.$viewport.getWorldPosition(); - const newDist = dist(targetMousePoint, this.initMousePoint); - this.$config.init("set.move.control.point", false); - const hasMoved = Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5; - this.emit("endGhostToolView", hasMoved); - if (this.$config.get("set.dragarea.mode")) { - this.emit("endDragAreaView"); - this.$config.init("set.dragarea.mode", false); - return; - } - if (newDist < 1) - ; - else { - this.$context.selection.reselect(); - this.$context.snapManager.clear(); - this.$commands.executeCommand("setAttribute", "move item", this.$context.selection.pack("x", "y")); - this.nextTick(() => { - this.$commands.emit("recoverBooleanPath"); + get selectedLength() { + return this.selectedPointList.length; + } + moveSelectedSegment(dx, dy) { + if (this.selectedPointList.length > 0) { + this.selectedPointList.forEach((it) => { + var target = this.points[it.index][it.key]; + target.x = it.x + dx; + target.y = it.y + dy; }); + } else if (this.selectedGroup) { + this.moveSelectedGroup(dx, dy); } - this.$config.set("editing.mode.itemType", "select"); - this.$commands.emit("history.refreshSelection"); - this.emit(REFRESH_SELECTION_TOOL); } - refreshSelectionStyleView(obj2) { - let target = []; - if (obj2) { - if (isArray(obj2)) { - target = obj2; - } else { - target = [obj2]; - } - } else { - target = this.$context.selection.items; + moveSelectedGroup(dx, dy) { + this.selectedGroup.points.forEach((it) => { + const target = this.points[it.index]; + target.startPoint.x = it.startPoint.x + dx; + target.startPoint.y = it.startPoint.y + dy; + target.endPoint.x = it.endPoint.x + dx; + target.endPoint.y = it.endPoint.y + dy; + target.reversePoint.x = it.reversePoint.x + dx; + target.reversePoint.y = it.reversePoint.y + dy; + }); + } + get selectedGroup() { + return this.splitedGroupList[this.state.selectedGroupIndex]; + } + get splitedGroupList() { + return Point.getSplitedGroupList(this.points); + } + get groupList() { + return Point.getGroupList(this.points); + } + getGroup(groupList, pointIndex) { + return Point.getGroup(groupList, pointIndex); + } + get selectedGroupIndexList() { + const groupIndexList = /* @__PURE__ */ new Set(); + const groupList = this.groupList; + if (this.selectedPointList.length === 0 && this.state.selectedGroupIndex < 0) { + return groupList.map((group2) => group2.groupIndex); } - target.forEach((current) => { - this.updateElement(current); + const points = this.selectedPointList; + points.forEach((it) => { + const group2 = this.getGroup(groupList, it.index); + if (group2) { + groupIndexList.add(group2.groupIndex); + } }); + return [.../* @__PURE__ */ new Set([...groupIndexList, this.state.selectedGroupIndex])]; } - updateElement(item) { - if (item) { - this.renderer.update(item, this.getElement(item.id), this.$editor); + removeSelectedSegment() { + this.selectedPointList.forEach((it) => { + var target = this.points[it.index][it.key]; + target.removed = true; + }); + const pointGroup = Point.splitPoints(this.points); + const newPoints = Point.recoverPoints(pointGroup.map((points) => { + return points.filter((p) => !p.startPoint.removed).map((p) => { + if (p.endPoint.removed) { + p.endPoint = clone$1(p.startPoint); + } + if (p.reversePoint.removed) { + p.reversePoint = clone$1(p.startPoint); + } + if (Point.isEqual(p.endPoint, p.startPoint, p.reversePoint)) { + p.command = "L"; + p.curve = false; + } + return p; + }); + })); + this.points = newPoints; + this.select(); + } + move(dx, dy, e) { + var state = this.state; + var { isCurveSegment, segmentKey, connectedPoint } = state; + if (this.selectedPointList.length > 1) { + this.moveSelectedSegment(dx, dy); + } else if (this.selectedPointList.length === 1) { + var { dx, dy, snapPointList } = this.calculateSnap(segmentKey, dx, dy, 3); + this.snapPointList = snapPointList || []; + if (isCurveSegment) { + if (e.shiftKey) { + this.moveSegment(segmentKey, dx, dy); + var targetSegmentKey = segmentKey === "endPoint" ? "reversePoint" : "endPoint"; + state.segment[targetSegmentKey] = Point.getReversePoint(state.segment.startPoint, state.segment[segmentKey]); + } else if (e.altKey) { + this.moveSegment(segmentKey, dx, dy); + this.rotateSegment(segmentKey); + } else { + this.moveSegment(segmentKey, dx, dy); + } + } else { + this.moveSegment("startPoint", dx, dy); + this.moveSegment("endPoint", dx, dy); + this.moveSegment("reversePoint", dx, dy); + if (!e.altKey) { + state.connectedPointList.forEach((it) => { + this.moveSegment("startPoint", dx, dy, it); + this.moveSegment("endPoint", dx, dy, it); + this.moveSegment("reversePoint", dx, dy, it); + }); + } + } + connectedPoint && this.copySegment(state.segment, state.connectedPoint); + } else if (this.state.selectedGroupIndex > -1) { + this.moveSelectedGroup(dx, dy); } } - updateTimelineElement(item) { - if (item) { - this.renderer.update(item, this.getElement(item.id), this.$editor); + moveEnd(dx, dy) { + var state = this.state; + var points = this.points; + var x = state.dragXY.x + dx; + var y = state.dragXY.y + dy; + var endPoint = { x, y }; + var reversePoint = { x, y }; + if (state.dragPoints) { + reversePoint = Point.getReversePoint(state.startPoint, endPoint); } - } - refreshAllCanvas() { - this.clearElementAll(); - const project2 = this.$context.selection.currentProject; - const html = this.renderer.render(project2, null, this.$editor) || ""; - this.refs.$view.updateDiff(html, void 0, { - checkPassed: (oldEl, newEl) => { - const isPassed = oldEl.getAttribute("data-id") === newEl.getAttribute("data-id"); - return isPassed; - } + points.push({ + command: state.clickCount === 0 ? "M" : "", + startPoint: state.startPoint, + endPoint, + curve: !!state.dragPoints, + reversePoint }); - this.updateAllCanvas(project2); + state.startPoint = null; + state.dragPoints = false; + state.moveXY = null; } - updateAllCanvas(parentLayer) { - parentLayer == null ? void 0 : parentLayer.layers.forEach((item) => { - this.updateElement(item, this.getElement(item.id)); - this.updateAllCanvas(item); - }); + setPoint(obj2) { + var p0 = obj2.first[0]; + var p1 = obj2.second[obj2.second.length - 1]; + var allPoints = this.clonePoints; + var firstItem = Point.getPoint(allPoints, p0); + var secondItem = Point.getPoint(allPoints, p1); + var newPoints = [ + __spreadProps(__spreadValues({}, firstItem), { endPoint: obj2.first[1] }), + { + startPoint: obj2.first[3], + reversePoint: obj2.first[2], + curve: true, + endPoint: obj2.second[1] + }, + __spreadProps(__spreadValues({}, secondItem), { reversePoint: obj2.second[2] }) + ]; + var firstIndex = Point.getIndex(allPoints, p0); + allPoints.splice(firstIndex, 2, ...newPoints); + this.points = allPoints; + return firstIndex + 1; } - refreshAllElementBoundSize() { - var selectionList = this.$context.selection.items.map((it) => { - if (it.is("artboard")) { - return it; - } - return it.parent; - }); - var list2 = [...new Set(selectionList)]; - if (list2.length) { - list2.forEach((it) => { - this.refreshElementBoundSize(it); - }); + setPointQuard(obj2) { + var p0 = obj2.first[0]; + var p1 = obj2.second[obj2.second.length - 1]; + var allPoints = this.clonePoints; + var firstItem = Point.getPoint(allPoints, p0); + var secondItem = Point.getPoint(allPoints, p1); + if (firstItem.curve && secondItem.curve === false) { + var newPoints = [ + __spreadProps(__spreadValues({}, firstItem), { endPoint: firstItem.startPoint }), + { + startPoint: obj2.first[2], + reversePoint: obj2.first[1], + curve: true, + endPoint: obj2.second[1] + } + ]; + var firstIndex = Point.getIndex(allPoints, p0); + allPoints.splice(firstIndex, 1, ...newPoints); } else { - this.$context.selection.currentProject.artboards.forEach((it) => { - this.refreshElementBoundSize(it); - }); - } - } - refreshElementRect(item) { - var $el = this.getElement(item.id); - if (!$el) - return; - let offset = $el.offsetRect(); - if (offset.width === 0 || offset.height === 0) { - return; - } - item.reset(offset); - this.refreshSelectionStyleView(item); - if (this.$context.selection.check(item)) { - this.emit(REFRESH_SELECTION_TOOL); - } - } - refreshElementBoundSize(it) { - if (it) { - this.refreshElementRect(it); - it.layers.forEach((child) => { - this.refreshElementBoundSize(child); - }); + var newPoints = [ + __spreadValues({}, firstItem), + { + startPoint: obj2.first[2], + reversePoint: obj2.first[1], + curve: true, + endPoint: obj2.second[1] + }, + __spreadProps(__spreadValues({}, secondItem), { reversePoint: obj2.second[1], curve: true }) + ]; + var firstIndex = Point.getIndex(allPoints, p0); + allPoints.splice(firstIndex, 2, ...newPoints); } + this.points = allPoints; + return firstIndex + 1; } -} -class CanvasView extends EditorElement { - components() { - return { - PageTools, - DragAreaRectView, - HTMLRenderView, - DragAreaView - }; + setPointLine(obj2) { + var p0 = obj2.first[0]; + var allPoints = this.clonePoints; + var newPoints = [ + { + command: "L", + startPoint: obj2.first[1], + curve: false, + endPoint: obj2.first[1], + reversePoint: obj2.first[1] + } + ]; + var firstIndex = Point.getIndex(allPoints, p0); + allPoints.splice(firstIndex + 1, 0, ...newPoints); + this.points = allPoints; + return firstIndex + 1; } - initState() { - return { - cursor: "auto", - cursorArgs: [] - }; + toPath(minX = 0, minY = 0, scale2 = 1) { + return toPath(this.clonePoints, minX, minY, scale2); } - afterRender() { - this.nextTick(() => { - this.refreshCanvasSize(); - this.$commands.emit("moveSelectionToCenter", true); - this.refreshCursor(); - }); + makeSVGPath() { + this.initialize(); + this.makePointGuide(this.points); + this.makeMovePositionGuide(); + return this.toSVGString(); } - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--page-container", - tabIndex: "-1", - ref: "$container" - }, /* @__PURE__ */ createElementJsx("div", { - class: "page-view", - ref: "$pageView" - }, /* @__PURE__ */ createElementJsx("div", { - class: "page-lock scrollbar", - ref: "$lock" - }, /* @__PURE__ */ createElementJsx(DragAreaView, { - ref: "$dragArea" - }), /* @__PURE__ */ createElementJsx(HTMLRenderView, { - ref: "$htmlRenderView" - }), /* @__PURE__ */ createElementJsx(DragAreaRectView, { - ref: "$dragAreaRectView" - }), this.$injectManager.generate("canvas.view", true))), "$", createComponent("PageTools", { ref: "pageTools" })); + makeTriangleDistancePointGuide(first, second2) { + var minX = Math.min(first.startPoint.x, second2.startPoint.x); + var maxX = Math.max(first.startPoint.x, second2.startPoint.x); + var minY = Math.min(first.startPoint.y, second2.startPoint.y); + var maxY = Math.max(first.startPoint.y, second2.startPoint.y); + if (first.startPoint.x < second2.startPoint.x && first.startPoint.y < second2.startPoint.y) { + this.segmentManager.addDistanceLine({ x: minX, y: minY }, { x: maxX, y: minY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); + var centerX = minX; + var centerY = minY; + var angle = calculateAngle360(maxX - minX, maxY - minY) - 180; + var dist2 = 20; + var { x, y } = getXYInCircle(0, dist2, centerX, centerY); + var last = getXYInCircle(angle, dist2, centerX, centerY); + this.segmentManager.addDistanceAngle(last, dist2, dist2, angle, { x, y }, { x: x - dist2, y }); + } else if (first.startPoint.x < second2.startPoint.x && first.startPoint.y > second2.startPoint.y) { + this.segmentManager.addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); + } else if (first.startPoint.x > second2.startPoint.x && first.startPoint.y > second2.startPoint.y) { + this.segmentManager.addDistanceLine({ x: minX, y: minY }, { x: minX, y: maxY }).addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }); + } else if (first.startPoint.x > second2.startPoint.x && first.startPoint.y < second2.startPoint.y) { + this.segmentManager.addDistanceLine({ x: minX, y: maxY }, { x: maxX, y: maxY }).addDistanceLine({ x: maxX, y: minY }, { x: maxX, y: maxY }); + } } - [BIND("$pageView")]() { - return { - style: { - "--elf--canvas-background-color": this.$config.get("style.canvas.background.color") + makeDistancePointGuide(prevPoint, current, nextPoint) { + if (current.selected) { + if (prevPoint) { + this.makeTriangleDistancePointGuide(prevPoint, current); + } + if (nextPoint) { + this.makeTriangleDistancePointGuide(current, nextPoint); } - }; - } - checkSpace() { - if (this.$config.is("editing.mode", EditingMode.HAND)) { - return true; } - return this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space)); - } - [POINTERSTART("$lock") + IF("checkSpace") + MOVE("movePan") + END("moveEndPan")]() { - this.startMovePan(); } - [CONFIG("editing.mode")]() { - if (this.$config.is("editing.mode", EditingMode.HAND)) { - this.startMovePan(); - this.$commands.emit("refreshCursor", "grab"); + makeStartPointGuide(prevPoint, current, nextPoint, index2) { + current.startPoint.isFirst = true; + if (current.curve === false) { + this.segmentManager.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); } else { - this.$commands.emit("recoverCursor", "auto"); + this.segmentManager.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)).addGuideLine(current.startPoint, current.endPoint); + if (Point.isEqual(current.startPoint, current.endPoint) === false) { + this.segmentManager.addCurvePoint(current.endPoint, index2, "endPoint", this.isSelectedSegment("endPoint", index2)); + } } } - startMovePan() { - this.lastDist = create$3(); - } - movePan(dx, dy) { - this.$commands.emit("refreshCursor", "grabbing"); - const currentDist = fromValues(dx, dy, 0); - this.$viewport.pan(...transformMat4([], subtract([], this.lastDist, currentDist), this.$viewport.scaleMatrixInverse)); - this.lastDist = currentDist; - } - refreshCursor() { - if (this.$config.is("editing.mode", EditingMode.HAND)) { - this.$commands.emit("refreshCursor", "grab"); + makeMiddlePointGuideSegment(prevPoint, current, nextPoint, index2, isSiblingSelected) { + var mng = this.segmentManager; + if (current.curve === false) { + if (prevPoint.curve === false) { + mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } else { + if (isSiblingSelected === false) { + mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } else { + mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { + mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); + } + } + } } else { - this.$commands.emit("refreshCursor", "auto"); + if (prevPoint.curve === false) { + if (isSiblingSelected === false) { + if (Point.isEqual(current.reversePoint, current.startPoint)) { + mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } else { + mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } + } else { + if (Point.isEqual(current.reversePoint, current.startPoint)) { + mng.addPoint({}, current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } else { + mng.addGuideLine(current.startPoint, current.reversePoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + if (Point.isEqual(current.startPoint, current.reversePoint) === false) { + mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); + } + } + } + } else { + if (current.connected) { + if (isSiblingSelected === false) + ; + else { + mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addGuideLine(current.startPoint, current.reversePoint); + if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { + mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); + } + if (Point.isEqual(current.startPoint, current.reversePoint) === false) { + mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); + } + } + } else { + if (isSiblingSelected === false) { + mng.addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + } else { + mng.addGuideLine(prevPoint.startPoint, prevPoint.endPoint).addGuideLine(current.startPoint, current.reversePoint).addCurvePoint(current.startPoint, index2, "startPoint", this.isSelectedSegment("startPoint", index2)); + if (Point.isEqual(prevPoint.startPoint, prevPoint.endPoint) === false) { + mng.addCurvePoint(prevPoint.endPoint, prevPoint.index, "endPoint", this.isSelectedSegment("endPoint", prevPoint.index)); + } + if (Point.isEqual(current.startPoint, current.reversePoint) === false) { + mng.addCurvePoint(current.reversePoint, index2, "reversePoint", this.isSelectedSegment("reversePoint", index2)); + } + } + } + } } } - moveEndPan() { - this.refreshCursor(); - } - [DRAGOVER("$lock") + PREVENT]() { + checkInViewport(point2) { + const vertext = this.pathEditor.$viewport.applyVertexInverse([ + point2.x, + point2.y, + 0 + ]); + return this.pathEditor.$viewport.checkInViewport(vertext); } - [DROP("$lock") + PREVENT](e) { - const newCenter = this.$viewport.getWorldPosition(e); - if (e.dataTransfer.getData("text/asset")) { - this.$commands.emit("drop.asset", { - asset: { id: e.dataTransfer.getData("text/asset"), center: newCenter } - }); + makeMiddlePointGuideSplitLine(prevPoint, current, nextPoint, index2, isSiblingSelected) { + const selected = isSiblingSelected ? "selected" : ""; + if (current.curve === false) { + if (prevPoint.curve === false) { + if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.startPoint)) === false) { + return; + } + this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).L(current.startPoint).toString(`split-path ${selected}`)); + } else { + if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(prevPoint.endPoint) || this.checkInViewport(current.startPoint)) === false) { + return; + } + this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).Q(prevPoint.endPoint, current.startPoint).toString(`split-path ${selected}`)); + } } else { - const id = Dom.create(e.target).attr("data-id"); - if (id) { - this.$commands.emit("drop.asset", { - gradient: e.dataTransfer.getData("text/gradient"), - pattern: e.dataTransfer.getData("text/pattern"), - color: e.dataTransfer.getData("text/color"), - imageUrl: e.dataTransfer.getData("image/info") - }, id); + if (prevPoint.curve === false) { + if (Point.isEqual(current.reversePoint, current.startPoint)) { + if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.startPoint)) === false) { + return; + } + this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).L(current.startPoint).toString(`split-path ${selected}`)); + } else { + if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(current.reversePoint) || this.checkInViewport(current.startPoint)) === false) { + return; + } + this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).Q(current.reversePoint, current.startPoint).toString(`split-path ${selected}`)); + } } else { - const imageUrl = e.dataTransfer.getData("image/info"); - this.$commands.emit("dropImageUrl", imageUrl); + if ((this.checkInViewport(prevPoint.startPoint) || this.checkInViewport(prevPoint.endPoint) || this.checkInViewport(current.reversePoint) || this.checkInViewport(current.startPoint)) === false) { + return; + } + this.splitLines.push(new PathStringManager().M(prevPoint.startPoint).C(prevPoint.endPoint, current.reversePoint, current.startPoint).toString(`split-path ${selected}`)); } } } - [WHEEL("$lock") + PREVENT](e) { - const [dx, dy] = normalizeWheelEvent(e); - if (!this.state.gesture) { - if (e.ctrlKey) { - this.$viewport.setMousePoint(e.clientX, e.clientY); + makePointGuide(points) { + for (var index2 = 0, len2 = points.length; index2 < len2; index2++) { + var currentIndex = index2; + var current = points[currentIndex]; + if (!current) + continue; + var nextPoint = Point.getNextPoint(points, index2); + var prevPoint = Point.getPrevPoint(points, index2); + if (prevPoint && prevPoint.command === "M") { + if (current.startPoint) { + current.startPoint.isSecond = true; + } } - this.emit("startGesture"); - this.state.gesture = true; - } else { - if (e.ctrlKey) { - const zoomFactor = 1 - 2.5 * dy / 100; - this.$viewport.zoom(zoomFactor); + if (current.startPoint) { + if (nextPoint) { + current.startPoint.isLast = nextPoint.command === "M"; + } else { + current.startPoint.isLast = index2 === len2 - 1; + } + } + current.selected = this.selectedIndex === index2; + if (current.command === "M") { + this.makeStartPointGuide(prevPoint, current, nextPoint, index2); } else { - const newDx = -2.5 * dx; - const newDy = -2.5 * dy; - this.$viewport.pan(-newDx / this.$viewport.scale, -newDy / this.$viewport.scale, 0); + var isSiblingSelected = Boolean(this.isSelectedSegment("endPoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("startPoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("reversePoint", prevPoint == null ? void 0 : prevPoint.index) || this.isSelectedSegment("endPoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("startPoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("reversePoint", nextPoint == null ? void 0 : nextPoint.index) || this.isSelectedSegment("endPoint", current == null ? void 0 : current.index) || this.isSelectedSegment("startPoint", current == null ? void 0 : current.index) || this.isSelectedSegment("reversePoint", current == null ? void 0 : current.index)); + this.makeMiddlePointGuideSplitLine(prevPoint, current, nextPoint, index2, isSiblingSelected); + this.makeMiddlePointGuideSegment(prevPoint, current, nextPoint, index2, isSiblingSelected); + } + if (current.close) { + this.pathStringManager.Z(); } - } - window.clearTimeout(this.state.timer); - this.state.timer = window.setTimeout(() => { - this.state.gesture = void 0; - this.emit("endGesture"); - }, 200); - } - refreshCanvasSize() { - this.$viewport.refreshCanvasSize(this.refs.$lock.rect()); - } - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - this.refreshCanvasSize(); - } - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.$commands.emit("refreshCursor", "auto"); - } -} -var HorizontalRuler$1 = ""; -let pathString$1 = []; -class HorizontalRuler extends EditorElement { - template() { - return ` -
-
- - - -
-
-
-
-
-
-
- `; - } - afterRender() { - this.refreshCanvasSize(); - } - refreshCanvasSize() { - this.state.rect = this.$el.rect(); - } - initializeRect() { - if (!this.state.rect || this.state.rect.width == 0) { - this.state.rect = this.$el.rect(); } } - makeLine(pathString2, baseNumber, minX, maxX, realWidth, width2, epsilon = 3, lineWidth = 30, expect = 10) { - let startX = minX - minX % baseNumber; - let endX = maxX + maxX % baseNumber; - const firstX = (startX - minX) / realWidth * width2; - const secondX = (startX + baseNumber - minX) / realWidth * width2; - if (Math.abs(secondX - firstX) < epsilon) - return; - for (var i = startX; i < endX; i += baseNumber) { - if (i != 0 && i % expect === 0) - continue; - const x = Math.floor((i - minX) / realWidth * width2); - pathString2[pathString2.length] = `M ${x} ${30 - lineWidth} L ${x} 30 `; + makeMovePositionGuide() { + var state = this.state; + var { + startPoint, + moveXY, + dragPoints, + snapPointList, + isGroupSegment + } = state; + var points = this.points; + if (moveXY) { + snapPointList = snapPointList || []; + var { snapPointList: movePointSnapPointList, moveXY: newMoveXY } = calculateMovePointSnap(points, moveXY, 3); + snapPointList.push.apply(snapPointList, movePointSnapPointList); + state.moveXY = newMoveXY; + moveXY = newMoveXY; + this.snapPointList = snapPointList; + var prev = points[points.length - 1]; + if (dragPoints && !isGroupSegment) { + if (!prev) { + var { x, y } = Point.getReversePoint(startPoint, moveXY); + this.guideLineManager.M(moveXY).L(startPoint).L({ x, y }); + this.segmentManager.addCurvePoint(startPoint).addCurvePoint(moveXY).addCurvePoint({ x, y }); + } else if (prev.curve) { + var { x, y } = Point.getReversePoint(startPoint, moveXY); + this.guideLineManager.M(prev.startPoint).C(prev.endPoint, { x, y }, startPoint); + this.segmentManager.addGuideLine(prev.startPoint, prev.endPoint).addGuideLine(startPoint, { x, y }).addGuideLine(startPoint, moveXY).addCurvePoint(prev.endPoint).addCurvePoint({ x, y }).addCurvePoint(moveXY).addPoint(false, startPoint); + } else if (prev.curve === false) { + var { x, y } = Point.getReversePoint(startPoint, moveXY); + this.guideLineManager.M(prev.startPoint).Q({ x, y }, startPoint); + this.segmentManager.addGuideLine(moveXY, { x, y }).addPoint(false, startPoint).addCurvePoint({ x, y }).addCurvePoint(moveXY); + } + } else { + if (!prev) + ; + else if (prev.curve) { + this.guideLineManager.M(prev.startPoint).Q(prev.endPoint, moveXY); + this.segmentManager.addGuideLine(prev.endPoint, prev.startPoint).addCurvePoint(prev.endPoint); + } else { + if (!prev.close) { + this.guideLineManager.M(prev.startPoint).L(moveXY); + this.segmentManager.addPoint(false, prev.startPoint); + } + } + } } } - makeLineText(baseNumber, minX, maxX, realWidth, width2, epsilon = 3) { - const text2 = []; - let startX = minX - minX % baseNumber; - let endX = maxX + maxX % baseNumber; - const firstX = (startX - minX) / realWidth * width2; - const secondX = (startX + baseNumber - minX) / realWidth * width2; - if (Math.abs(secondX - firstX) < epsilon) - return; - for (var i = startX; i < endX; i += baseNumber) { - const x = Math.floor((i - minX) / realWidth * width2); - text2[text2.length] = `${i}`; + makeSnapLines() { + var snapLines = []; + if (this.snapPointList) { + var snapPath = new PathStringManager(); + snapLines = this.snapPointList.map((snapPoint) => { + snapPath.reset(); + return snapPath.M(snapPoint.startPoint).L(snapPoint.endPoint).X(snapPoint.startPoint).toString("snap-path"); + }); } - return text2.join(""); + return snapLines.join(""); } - makeRulerForCurrentArtboard() { - const current = this.$context.selection.current; - if (!current) - return ""; - const currentArtboard = current.artboard; - if (!currentArtboard) - return ""; - const verties = currentArtboard.verties; - const { minX, width: realWidth } = this.$viewport; - const width2 = this.state.rect.width; - const firstX = (verties[0][0] - minX) / realWidth * width2; - const secondX = (verties[2][0] - minX) / realWidth * width2; + makePathArea() { + const pathList = this.splitedGroupList.map(({ startPointIndex, points }, groupIndex) => { + const d = PathGenerator.generatorPathString(points); + const verties = toRectVerties(PathParser.fromSVGString(d).getBBox()); + return { + points, + startPointIndex, + groupIndex, + center: verties[4], + d + }; + }); + const pathCount = pathList.length; return ` - M ${firstX} 20 - L ${firstX} 30 - L ${secondX} 30 - L ${secondX} 20 - Z + + ${pathList.map((it) => { + const { center: center2 } = it; + const [x, y] = center2; + const selected = this.state.selectedGroupIndex === it.groupIndex; + return ` + + + ${pathCount > 1 && ` + ${it.groupIndex + 1} + `} + `; + }).join("")} + `; } - makeRulerForCurrent() { - const current = this.$context.selection.current; - if (!current) - return ""; - const verties = this.$context.selection.verties; - const xList = verties.map((it) => it[0]); - const currentMinX = Math.min.apply(Math, xList); - const currentMaxX = Math.max.apply(Math, xList); - const { minX, width: realWidth } = this.$viewport; - const width2 = this.state.rect.width; - const firstX = (currentMinX - minX) / realWidth * width2; - const secondX = (currentMaxX - minX) / realWidth * width2; + toSVGString() { return ` - M ${firstX} 0 - L ${firstX} 20 - L ${secondX} 20 - L ${secondX} 0 - Z + + ${this.guideLineManager.toString("guide")} + ${this.splitLines.join("")} + ${this.makeSnapLines()} + ${this.makePathArea()} + ${this.segmentManager.toString()} + `; } - makeRuler() { - const { minX, maxX, width: realWidth } = this.$viewport; - const width2 = this.state.rect.width; - pathString$1 = []; - this.makeLine(pathString$1, 1e3, minX, maxX, realWidth, width2, 10, 24, 1e4); - this.makeLine(pathString$1, 200, minX, maxX, realWidth, width2, 10, 20, 5e3); - this.makeLine(pathString$1, 100, minX, maxX, realWidth, width2, 10, 20, 200); - this.makeLine(pathString$1, 50, minX, maxX, realWidth, width2, 10, 20, 100); - this.makeLine(pathString$1, 10, minX, maxX, realWidth, width2, 10, 18, 50); - this.makeLine(pathString$1, 5, minX, maxX, realWidth, width2, 10, 15, 10); - this.makeLine(pathString$1, 1, minX, maxX, realWidth, width2, 10, 13, 10); - return pathString$1.join(""); - } - makeRulerText() { - const { minX, maxX, width: realWidth } = this.$viewport; - const width2 = this.state.rect.width; - const dist2 = Math.abs(maxX - minX); - return [ - dist2 > 3e3 ? this.makeLineText(3e3, minX, maxX, realWidth, width2, 24) : "", - 2e3 < dist2 && dist2 < 3e3 ? this.makeLineText(500, minX, maxX, realWidth, width2, 22) : "", - 1e3 < dist2 && dist2 < 2e3 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", - 800 < dist2 && dist2 < 1e3 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", - 500 < dist2 && dist2 < 800 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", - 500 < dist2 && dist2 < 800 ? this.makeLineText(50, minX, maxX, realWidth, width2, 20) : "", - 200 < dist2 && dist2 < 500 ? this.makeLineText(50, minX, maxX, realWidth, width2, 20) : "", - 50 < dist2 && dist2 < 200 ? this.makeLineText(10, minX, maxX, realWidth, width2, 20) : "", - 15 < dist2 && dist2 < 50 ? this.makeLineText(5, minX, maxX, realWidth, width2, 20) : "", - 0 < dist2 && dist2 < 15 ? this.makeLineText(1, minX, maxX, realWidth, width2, 20) : "" - ].join(""); +} +function xy([x, y]) { + return { x, y }; +} +const SegmentConvertor = class extends EditorElement { + convertToCurve(index2) { + this.pathGenerator.convertToCurve(index2); + this.renderPath(); + this.refreshPathLayer(); } - [LOAD("$ruler") + DOMDIFF]() { - this.initializeRect(); - return `${this.makeRulerText()}`; + isEditableSegment() { + return this.state.disableCurve === false; } - [LOAD("$lines") + DOMDIFF]() { - this.initializeRect(); - const lines = this.$config.get("horizontal.line").map((it) => { - const pos = this.$viewport.applyVertex([it, 0, 0]); - return ``; - }).join(""); - return `${lines}`; + [DOUBLECLICK("$view [data-segment]") + IF("isEditableSegment") + PREVENT](e) { + var index2 = +e.$dt.attr("data-index"); + this.convertToCurve(index2); } - [BIND("$rulerLines")]() { - return { - d: this.makeRulerForCurrent() - }; + [DOUBLETAB("$view [data-segment]") + PREVENT + DELAY(300)](e) { + var index2 = +e.$dt.attr("data-index"); + this.convertToCurve(index2); } - makeRulerCursor() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const { minX, width: realWidth } = this.$viewport; - this.initializeRect(); - const width2 = this.state.rect.width; - const distX = targetMousePoint[0] - minX; - const x = distX === 0 ? 0 : distX / realWidth * width2; - return `M ${x - 0.5} 0 L ${x - 0.5} 20`; +}; +const PathCutter = class extends SegmentConvertor { + calculatePointOnLine(d, clickPosition) { + var parser = new PathParser(d); + return parser.getClosedPoint(clickPosition); } - [BIND("$cursor")]() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const { minX, width: realWidth } = this.$viewport; - this.initializeRect(); - const width2 = this.state.rect.width; - const distX = targetMousePoint[0] - minX; - const x = distX === 0 ? 0 : distX / realWidth * width2; - return { - cssText: ` - --elf--horizontal-cursor-position: ${x}px; - ` + [POINTERSTART("$view .split-path") + MOVE() + END()](e) { + this.initRect(); + var parser = new PathParser(e.$dt.attr("d")); + var clickPosition = { + x: e.xy.x - this.state.rect.x, + y: e.xy.y - this.state.rect.y }; - } - [MOUSEOVER()]() { - this.$commands.emit("refreshCursor", "ns-resize"); - } - [POINTERSTART() + MOVE() + END()]() { - const pos = round$2([], this.$viewport.getWorldPosition()); - this.startIndex = this.$config.push("vertical.line", pos[1]); - this.$config.init("vertical.line.selected.index", this.startIndex); - this.$context.snapManager.clear(); - } - move() { - const newPos = this.$context.snapManager.getWorldPosition(); - if (this.$viewport.minY < newPos[1] && newPos[1] < this.$viewport.maxY) { - this.$config.setIndexValue("vertical.line", this.startIndex, newPos[1]); + var selectedSegmentIndex = -1; + if (this.isMode("path")) { + this.state.dragXY = clickPosition; + this.state.startPoint = this.state.dragXY; + this.pathGenerator.setLastPoint(this.state.startPoint); + this.state.isSplitPath = true; + this.renderPath(); + if (this.state.current) { + this.refreshPathLayer(); + } else { + this.addPathLayer(); + this.trigger("initPathEditorView"); + } + return; + } else { + if (parser.segments[1].command === "C") { + var points = [ + xy(parser.segments[0].values), + xy(parser.segments[1].values.slice(0, 2)), + xy(parser.segments[1].values.slice(2, 4)), + xy(parser.segments[1].values.slice(4, 6)) + ]; + var curve = recoverBezier(...points, 20); + var t = curve(clickPosition.x, clickPosition.y); + selectedSegmentIndex = this.pathGenerator.setPoint(getBezierPoints(points, t)); + } else if (parser.segments[1].command === "Q") { + var points = [ + xy(parser.segments[0].values), + xy(parser.segments[1].values.slice(0, 2)), + xy(parser.segments[1].values.slice(2, 4)) + ]; + var curve = recoverBezierQuard(...points, 20); + var t = curve(clickPosition.x, clickPosition.y); + selectedSegmentIndex = this.pathGenerator.setPointQuard(getBezierPointsQuard(points, t)); + } else if (parser.segments[1].command === "L") { + var points = [ + xy(parser.segments[0].values), + xy(parser.segments[1].values.slice(0, 2)) + ]; + var curve = recoverBezierLine(...points, 20); + var t = curve(clickPosition.x, clickPosition.y); + selectedSegmentIndex = this.pathGenerator.setPointLine(getBezierPointsLine(points, t)); + if (e.altKey) { + this.pathGenerator.convertToCurve(selectedSegmentIndex); + } + } + this.renderPath(); + this.refreshPathLayer(); + this.changeMode("segment-move"); + this.pathGenerator.setCachePoint(selectedSegmentIndex, "startPoint"); + this.pathGenerator.selectKeyIndex("startPoint", selectedSegmentIndex); } } - end() { - const pos = round$2([], this.$viewport.getWorldPosition()); - if (this.$viewport.minY < pos[1] && pos[1] < this.$viewport.maxY) - ; - else { - this.$config.removeIndex("vertical.line", this.startIndex); +}; +const PathTransformEditor = class extends PathCutter { + [SUBSCRIBE("changePathTransform")](transformMoveType) { + this.resetTransformZone(); + var { width: width2, height: height2 } = this.state.transformZoneRect; + this.pathGenerator.initTransform(this.state.transformZoneRect); + switch (transformMoveType) { + case "flipX": + this.pathGenerator.transform("flipX", width2, 0); + break; + case "flipY": + this.pathGenerator.transform("flipY", 0, height2); + break; + case "flip": + this.pathGenerator.transform("flip", width2, height2); } - this.startIndex = null; - this.$commands.emit("recoverCursor"); + this.renderPath(); + this.refreshPathLayer(); } - refresh() { - if (this.$config.get("show.ruler")) { - this.load(); + [SUBSCRIBE("changePathUtil")](utilType) { + if (utilType === "reverse") { + const { d } = this.pathGenerator.toPath(); + const pathParser = new PathParser(d); + pathParser.reverse(...this.pathGenerator.selectedGroupIndexList); + pathParser.transformMat4(this.state.cachedMatrixInverse); + this.refreshEditorView({ d: pathParser.d }); + this.updatePathLayer(); } } - [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION)]() { - this.refresh(); - } - [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(10)]() { - if (this.$context.selection.current) { - const current = this.$context.selection.current; - if (current.changedRect) { - this.refresh(); - } - } + [SUBSCRIBE("divideSegmentsByCount")](count) { + const { d } = this.pathGenerator.toPath(); + const pathParser = new PathParser(d); + const newPath = pathParser.divideSegmentByCount(count); + newPath.transformMat4(this.state.cachedMatrixInverse); + this.refreshEditorView({ d: newPath.d }); } - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - this.refreshCanvasSize(); +}; +const FIELDS = ["fill", "fill-opacity", "stroke", "stroke-width"]; +class PathEditorView extends PathTransformEditor { + initialize() { + super.initialize(); + this.pathParser = new PathParser(); + this.pathGenerator = new PathGenerator(this); } - [CONFIG("onMouseMovepageContainer")]() { - this.bindData("$cursor"); - this.bindData("$rulerLines"); + initState() { + return { + changeEvent: "updatePathItem", + isShow: false, + isControl: false, + disableCurve: false, + points: [], + mode: "path", + clickCount: 0, + isSegment: false, + isFirstSegment: false, + current: null + }; } - [CONFIG("horizontal.line")]() { - this.load("$lines"); + get scale() { + return this.$viewport.scale; } -} -var VerticalRuler$1 = ""; -let pathString = []; -class VerticalRuler extends EditorElement { template() { return ` -
-
- - +
+ + + + + + + + + + + +
+
+ + -
-
-
-
-
-
-
- `; - } - afterRender() { - this.refreshCanvasSize(); - } - refreshCanvasSize() { - this.state.rect = this.$el.rect(); - } - initializeRect() { - if (!this.state.rect || this.state.rect.width == 0) { - this.state.rect = this.$el.rect(); - } - } - [MOUSEOVER()]() { - this.$commands.emit("refreshCursor", "ew-resize"); - } - [MOUSELEAVE()]() { - this.$commands.emit("recoverCursor"); - } - [POINTERSTART() + MOVE() + END()]() { - const pos = round$2([], this.$viewport.getWorldPosition()); - this.startIndex = this.$config.push("horizontal.line", pos[0]); - this.$config.init("horizontal.line.selected.index", this.startIndex); - this.$context.snapManager.clear(); - } - move() { - const newPos = this.$context.snapManager.getWorldPosition(); - if (this.$viewport.minX < newPos[0] && newPos[0] < this.$viewport.maxX) { - this.$config.setIndexValue("horizontal.line", this.startIndex, newPos[0]); - } - } - end() { - const pos = round$2([], this.$viewport.getWorldPosition()); - if (this.$viewport.minX < pos[0] && pos[0] < this.$viewport.maxX) - ; - else { - this.$config.removeIndex("horizontal.line", this.startIndex); - } - this.startIndex = null; - this.$commands.emit("recoverCursor"); - } - makeLine(pathString2, baseNumber, minY, maxY, realHeight, height2, epsilon = 3, lineWidth = 30, expect = 10) { - let startY = minY - minY % baseNumber; - let endY = maxY + maxY % baseNumber; - const firstY = (startY - minY) / realHeight * height2; - const secondY = (startY + baseNumber - minY) / realHeight * height2; - if (Math.abs(secondY - firstY) < epsilon) - return; - for (var i = startY; i < endY; i += baseNumber) { - if (i != 0 && i % expect === 0) - continue; - const y = Math.floor((i - minY) / realHeight * height2); - pathString2[pathString2.length] = `M ${30 - lineWidth} ${y} L 30 ${y}`; - } - } - makeLineText(baseNumber, minY, maxY, realHeight, height2, epsilon = 3) { - const text2 = []; - let startY = minY - minY % baseNumber; - let endY = maxY + maxY % baseNumber; - const firstY = (startY - minY) / realHeight * height2; - const secondY = (startY + baseNumber - minY) / realHeight * height2; - if (Math.abs(secondY - firstY) < epsilon) - return; - for (var i = startY; i < endY; i += baseNumber) { - const y = Math.floor((i - minY) / realHeight * height2); - text2[text2.length] = `${i}`; - } - return text2.join(""); - } - makeRulerForCurrentArtboard() { - const current = this.$context.selection.current; - if (!current) - return ""; - const currentArtboard = current.artboard; - if (!currentArtboard) - return ""; - const verties = currentArtboard.verties; - const { minY, height: realHeight } = this.$viewport; - const height2 = this.state.rect.height; - const firstY = (verties[0][1] - minY) / realHeight * height2; - const secondY = (verties[2][1] - minY) / realHeight * height2; - return ` - M 20 ${firstY} - L 30 ${firstY} - L 30 ${secondY} - L 20 ${secondY} - Z - `; - } - makeRulerForCurrent() { - const current = this.$context.selection.current; - if (!current) - return ""; - const { minY, height: realHeight } = this.$viewport; - const height2 = this.state.rect.height; - const verties = this.$context.selection.verties; - const yList = verties.map((it) => it[1]); - const currentMinY = Math.min.apply(Math, yList); - const currentMaxY = Math.max.apply(Math, yList); - const firstY = (currentMinY - minY) / realHeight * height2; - const secondY = (currentMaxY - minY) / realHeight * height2; - return ` - M 0 ${firstY} - L 20 ${firstY} - L 20 ${secondY} - L 0 ${secondY} - Z - `; - } - makeRuler() { - const { minY, maxY, height: realHeight } = this.$viewport; - const height2 = this.state.rect.height; - pathString = []; - this.makeLine(pathString, 1e3, minY, maxY, realHeight, height2, 10, 20, 1e4); - this.makeLine(pathString, 200, minY, maxY, realHeight, height2, 10, 16, 5e3); - this.makeLine(pathString, 100, minY, maxY, realHeight, height2, 10, 18, 200); - this.makeLine(pathString, 50, minY, maxY, realHeight, height2, 10, 18, 100); - this.makeLine(pathString, 10, minY, maxY, realHeight, height2, 10, 18, 50); - this.makeLine(pathString, 5, minY, maxY, realHeight, height2, 10, 15, 10); - this.makeLine(pathString, 1, minY, maxY, realHeight, height2, 10, 14, 5); - return pathString.join(""); +
+
+
`; } - makeRulerText() { - const { minY, maxY, height: realHeight } = this.$viewport; - const height2 = this.state.rect.height; - const dist2 = Math.abs(maxY - minY); - return [ - dist2 > 3e3 ? this.makeLineText(3e3, minY, maxY, realHeight, height2, 24) : "", - 2e3 < dist2 && dist2 < 3e3 ? this.makeLineText(500, minY, maxY, realHeight, height2, 22) : "", - 1e3 < dist2 && dist2 < 2e3 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", - 800 < dist2 && dist2 < 1e3 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", - 500 < dist2 && dist2 < 800 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", - 500 < dist2 && dist2 < 800 ? this.makeLineText(50, minY, maxY, realHeight, height2, 20) : "", - 200 < dist2 && dist2 < 500 ? this.makeLineText(50, minY, maxY, realHeight, height2, 20) : "", - 50 < dist2 && dist2 < 200 ? this.makeLineText(10, minY, maxY, realHeight, height2, 20) : "", - 15 < dist2 && dist2 < 50 ? this.makeLineText(5, minY, maxY, realHeight, height2, 20) : "", - 0 < dist2 && dist2 < 15 ? this.makeLineText(1, minY, maxY, realHeight, height2, 20) : "" - ].join(""); + isShow() { + return this.state.isShow; } - [LOAD("$body") + DOMDIFF]() { - if (!this.state.rect || this.state.rect.width == 0) { + initRect(isForce = false) { + if (!this.state.rect || isForce) { this.state.rect = this.$el.rect(); } - return `${this.makeRulerText()}`; - } - [LOAD("$lines") + DOMDIFF]() { - this.initializeRect(); - const lines = this.$config.get("vertical.line").map((it) => { - const pos = this.$viewport.applyVertex([0, it, 0]); - return ``; - }).join(""); - return ` - ${lines} - `; } - [BIND("$rulerLines")]() { - return { - d: this.makeRulerForCurrent() - }; + [SUBSCRIBE("PathEditorDone")]() { + if (this.state.current) { + this.refreshPathLayer(); + this.trigger("hidePathEditor"); + } else { + this.addPathLayer(); + } + if (!this.state.current && this.pathGenerator.length) { + this.trigger("initPathEditorView"); + } else { + this.trigger("hidePathEditor"); + } } - [BIND("$cursor")]() { - const targetMousePoint = this.$viewport.getWorldPosition(); - const { minY, height: realHeight } = this.$viewport; - this.initializeRect(); - const height2 = this.state.rect.height; - const distY = targetMousePoint[1] - minY; - const y = distY === 0 ? 0 : distY / realHeight * height2; - return { - cssText: ` - --elf--vertical-cursor-position: ${y}px; - ` - }; + [KEYUP("document") + IF("isShow") + ENTER]() { + this.trigger("PathEditorDone"); } - refresh() { - if (this.$config.get("show.ruler")) { - this.load(); + [KEYUP("document") + IF("isShow") + ESCAPE]() { + if (this.state.current) { + this.refreshPathLayer(); + } else { + this.addPathLayer(); } + this.trigger("hidePathEditor"); } - [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(10)]() { - const current = this.$context.selection.current; - if (current && current.changedRect) { - this.refresh(); + makePathLayer() { + const pathString2 = this.pathGenerator.toPath().d; + if (!pathString2) { + return; } + var layer; + const newPath = new PathParser(pathString2); + newPath.transformMat4(this.$viewport.matrixInverse); + const bbox = newPath.getBBox(); + const newWidth = distance$1(bbox[1], bbox[0]); + const newHeight = distance$1(bbox[3], bbox[0]); + newPath.translate(-bbox[0][0], -bbox[0][1]); + const pathItem = { + itemType: "svg-path", + x: bbox[0][0], + y: bbox[0][1], + width: newWidth, + height: newHeight, + d: newPath.d, + fill: newPath.closed ? `#C4C4C4` : "transparent" + }; + FIELDS.forEach((key) => { + if (this.state[key]) { + pathItem[key] = this.state[key]; + } + }); + const containerItem = this.$context.selection.currentProject; + layer = containerItem.appendChild(this.$editor.createModel(pathItem)); + this.$commands.executeCommand("moveLayerToTarget", "add path", layer, this.$context.selection.currentProject); + return layer; } - [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION)]() { - this.refresh(); + updatePathLayer() { + var { d } = this.pathGenerator.toPath(); + var parser = new PathParser(d); + parser.transformMat4(this.$viewport.matrixInverse); + this.emit(this.state.changeEvent, { + d: parser.d, + matrix: this.state.matrix, + box: this.state.box + }); } - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - this.refreshCanvasSize(); + addPathLayer() { + this.changeMode("modify"); + var layer = this.makePathLayer(); + if (layer) { + this.$config.set("editing.mode.itemType", "select"); + this.$context.selection.select(layer); + this.trigger("hidePathEditor"); + } } - [CONFIG("onMouseMovepageContainer")]() { - this.bindData("$cursor"); - this.bindData("$rulerLines"); + changeMode(mode, obj2) { + this.setState(__spreadValues({ + mode, + clickCount: 0, + moveXY: null + }, obj2), false); + if (obj2 == null ? void 0 : obj2.points) { + this.pathGenerator.setPoints(obj2.points || []); + } + this.emit("changePathManager", this.state.mode); } - [CONFIG("vertical.line")]() { - this.load("$lines"); + [SUBSCRIBE("changePathManager")](obj2) { + this.setState(__spreadProps(__spreadValues({}, obj2), { clickCount: 0 }), false); + this.renderPath(); } -} -var BodyPanel$1 = ""; -class BodyPanel extends EditorElement { - components() { - return { - CanvasView, - VerticalRuler, - HorizontalRuler, - PageSubEditor - }; + isMode(mode) { + return this.state.mode === mode; } - template() { - return ` -
-
- ${createComponent("PageSubEditor", { ref: "subeditor" })} -
-
- ${createComponent("HorizontalRuler", { ref: "hruler" })} - ${createComponent("VerticalRuler", { ref: "vruler" })} -
- ${createComponent("CanvasView", { ref: "canvas" })} -
- -
-
- `; + afterRender() { + this.$el.hide(); } - [BIND("$el")]() { - return { - class: `elf--body-panel ${this.$config.get("show.ruler") ? "ruler" : ""}` - }; + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + if (this.$el.isShow()) { + const { d } = this.pathGenerator.toPath(); + const pathParser = new PathParser(d); + pathParser.transformMat4(this.state.cachedMatrixInverse); + this.refreshEditorView({ d: pathParser.d }); + } } - [CONFIG("show.ruler")]() { - this.refresh(); + refreshEditorView(obj2) { + if (obj2 && obj2.d) { + this.pathParser.reset(obj2.d); + this.pathParser.transformMat4(this.$viewport.matrix); + this.state.cachedMatrixInverse = this.$viewport.matrixInverse; + this.pathGenerator.setPoints(this.pathParser.convertGenerator()); + } + this.renderPath(); } - [SUBSCRIBE("bodypanel.toggle.fullscreen")]() { - this.refs.$el.toggleFullscreen(); + [SUBSCRIBE("showPathEditor")](mode = "path", obj2 = {}) { + this.state.isShow = true; + this.transformMode = mode; + if (mode === "move") { + obj2.current = null; + obj2.points = []; + } + obj2.box = obj2.box || "canvas"; + this.changeMode(mode, obj2); + this.refreshEditorView(obj2, true); + this.$el.show(); + this.$el.focus(); + this.emit("showPathManager", { mode: this.state.mode }); + this.emit("hidePathDrawEditor"); + this.$context.commands.emit("push.mode.view", "PathEditorView"); } - [CONFIG("editor.cursor")]() { - this.state.cursor = this.$config.get("editor.cursor"); - this.state.cursorArgs = this.$config.get("editor.cursor.args"); - this.bindData("$container"); + [SUBSCRIBE("hidePathEditor")]() { + if (this.$el.isShow()) { + this.pathParser.reset(""); + this.pathGenerator.setPoints([]); + this.setState(this.initState(), false); + this.refs.$view.empty(); + this.$el.hide(); + this.emit("hidePathManager"); + this.$context.commands.emit("pop.mode.view", "PathEditorView"); + this.emit(REFRESH_SELECTION); + } } - [CONFIG("editor.cursor.args")]() { - this.state.cursor = this.$config.get("editor.cursor"); - this.state.cursorArgs = this.$config.get("editor.cursor.args"); - this.bindData("$area"); + [SUBSCRIBE("hideAddViewLayer")]() { + this.state.isShow = false; + this.state.isControl = false; + this.pathParser.reset(""); + this.setState(this.initState(), false); + this.refs.$view.empty(); + this.$el.hide(); + this.emit("hidePathManager"); } - async [BIND("$area")]() { - const cursor = await this.$context.cursorManager.load(this.state.cursor, ...this.state.cursorArgs || []); + [BIND("$view")]() { + var _a; + const path = this.state.isShow ? this.pathGenerator.makeSVGPath() : ""; + const strokeWidth = Length.parse((_a = this.state.current) == null ? void 0 : _a["stroke-width"]).value || 0; return { - style: { - cursor - } + class: { + path: this.state.mode === "path", + modify: this.state.mode === "modify", + transform: this.state.mode === "transform", + box: this.state.box === "box", + canvas: this.state.box === "canvas", + "segment-move": this.state.mode === "segment-move", + "is-control": this.state.isControl, + "has-one-stroke-width": strokeWidth === 1 + }, + htmlDiff: path }; } -} -var ContextMenuManager$1 = ""; -class ContextMenuManager extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--context-menu-manger" - }, this.$injectManager.generate("context.menu")); - } - [SUBSCRIBE(OPEN_CONTEXT_MENU)](obj2) { - this.$context.config.set("context.menu.open", obj2); + [BIND("$splitCircle")]() { + if (this.state.splitXY) { + return { + cx: this.state.splitXY.x, + cy: this.state.splitXY.y, + r: 5 + }; + } else { + return { + r: 0 + }; + } } -} -class DesignEditor extends BaseLayout { - initialize() { - super.initialize(); - this.$context.pathkit.load(); + refreshPathLayer() { + this.updatePathLayer(); } - afterRender() { - super.afterRender(); - this.$config.init("editor.layout.elements", this.refs); - this.$commands.emit("load.json", this.opt.data); + renderPath() { + this.bindData("$view"); } - getManagers() { - return { - snapManager: SnapManager, - selection: SelectionManager, - segmentSelection: SegmentSelectionManager, - timeline: TimelineSelectionManager, - history: HistoryManager, - modelManager: ModelManager, - lockManager: LockManager, - visibleManager: VisibleManager, - clipboard: ClipboardManager, - pathkit: PathKitManager - }; + getPathRect() { + this.initRect(true); + const { d } = this.pathGenerator.toPath(); + return vertiesToRectangle(PathParser.fromSVGString(d).getBBox()); } - components() { - return { - LayerTab, - ToolBar, - Inspector, - BodyPanel, - PopupManager, - KeyboardManager, - IconManager: IconManager$1, - SwitchLeftPanel, - SwitchRightPanel, - ContextMenuManager - }; + resetTransformZone() { + var rect2 = this.getPathRect(); + this.state.transformZoneRect = rect2; } - getPlugins() { - return designEditorPlugins; + [POINTERMOVE("$view") + PREVENT](e) { + this.initRect(); + if (this.isMode("path") && this.state.rect) { + this.state.moveXY = { + x: e.xy.x - this.state.rect.x, + y: e.xy.y - this.state.rect.y + }; + this.state.altKey = e.altKey; + this.renderPath(); + } else { + var $target = Dom.create(e.target); + var isSplitPath = $target.hasClass("split-path"); + if (isSplitPath) { + this.state.splitXY = this.calculatePointOnLine($target.attr("d"), { + x: e.xy.x - this.state.rect.x, + y: e.xy.y - this.state.rect.y + }); + } else { + this.state.splitXY = null; + } + this.bindData("$splitCircle"); + this.state.altKey = false; + } } - initState() { - return { - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150 + [POINTERSTART("$view :not(.split-path)") + PREVENT + STOP + MOVE() + END()](e) { + this.initRect(); + this.state.altKey = false; + var isPathMode = this.isMode("path"); + this.$config.set("set.move.control.point", true); + this.state.dragXY = { + x: e.xy.x - this.state.rect.x, + y: e.xy.y - this.state.rect.y }; + this.$config.set("set.drag.path.area", false); + var $target = Dom.create(e.target); + if ($target.hasClass("svg-editor-canvas") && !isPathMode) { + this.$config.set("set.drag.path.area", true); + this.state.isGroupSegment = false; + this.state.selectedGroupIndex = -1; + this.state.selectedPointIndex = -1; + } else { + this.pathGenerator.reselect(); + this.state.isSegment = $target.attr("data-segment") === "true"; + this.state.isFirstSegment = this.state.isSegment && $target.attr("data-is-first") === "true"; + this.state.isGroupSegment = $target.hasClass("path-area"); + if (this.state.isGroupSegment) { + this.state.selectedGroupIndex = +$target.data("group-index"); + this.state.selectedPointIndex = +$target.data("point-index"); + } else { + this.state.selectedGroupIndex = -1; + this.state.selectedPointIndex = -1; + } + } + if (isPathMode) { + if (this.state.isFirstSegment) { + var index2 = +$target.attr("data-index"); + this.state.startPoint = this.pathGenerator.points[index2].startPoint; + } else { + this.state.startPoint = this.state.dragXY; + } + this.state.dragPoints = false; + this.state.endPoint = null; + } else { + if (this.state.isSegment) { + this.changeMode("segment-move"); + var [index2, segmentKey] = $target.attrs("data-index", "data-segment-point"); + const localIndex = +index2; + if (e.shiftKey) { + this.pathGenerator.toggleSelect(segmentKey, localIndex); + } else { + this.pathGenerator.setCachePoint(localIndex, segmentKey); + this.pathGenerator.selectKeyIndex(segmentKey, localIndex); + } + this.renderPath(); + } else if (this.state.isGroupSegment) { + this.changeMode("segment-move"); + this.pathGenerator.selectGroup(this.state.selectedGroupIndex); + this.renderPath(); + } + } } - template() { - return ` -
-
-
- ${createComponent("ToolBar")} -
-
-
- ${createComponent("BodyPanel", { ref: "$bodyPanelView" })} -
-
- ${createComponent("LayerTab")} -
-
- ${createComponent("Inspector")} -
-
-
- ${createComponent("KeyboardManager")} -
- ${createComponent("PopupManager")} - ${createComponent("IconManager")} - ${createComponent("ContextMenuManager")} -
- `; - } - [BIND("$el")]() { - return { - "data-design-mode": this.$config.get("editor.design.mode") - }; + move(dx, dy) { + var e = this.$config.get("bodyEvent"); + if (this.$config.true("set.drag.path.area")) { + this.renderSelectBox(this.state.dragXY, dx, dy); + } else if (this.isMode("segment-move")) { + this.pathGenerator.move(dx, dy, e); + this.renderPath(); + this.updatePathLayer(); + } else if (this.isMode("path")) { + const dist2 = getDist(dx, dy, 0, 0); + if (dist2 >= 2) { + this.state.dragPoints = e.altKey ? false : true; + } + } } - [BIND("$splitter")]() { - let left2 = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; + renderSegment(callback) { + if (this.pathGenerator.selectedLength) { + this.pathGenerator.reselect(); + if (isFunction(callback)) + callback(); + this.renderPath(); + this.updatePathLayer(); } - return { - style: { - left: left2 - } - }; } - [BIND("$leftArrow")]() { - let left2 = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; + end(dx, dy) { + var e = this.$config.get("bodyEvent"); + this.$config.set("set.move.control.point", false); + if (this.state.isGroupSegment) { + this.pathGenerator.select(); } - return { - style: { - left: left2 + if (this.$config.true("set.drag.path.area")) { + if (dx === 0 && dy === 0) { + this.changeMode("modify"); + this.trigger("hidePathEditor"); + } else { + this.changeMode("segment-move"); + this.pathGenerator.selectInBox(this.getSelectBox(), e.shiftKey); + this.renderPath(); + this.hideSelectBox(); + } + } else if (this.isMode("modify")) { + this.pathGenerator.reselect(); + } else if (this.isMode("segment-move")) { + this.changeMode("modify"); + this.pathGenerator.reselect(); + this.renderPath(); + this.updatePathLayer(); + } else if (this.isMode("path")) { + if (this.state.isFirstSegment) { + this.changeMode("modify"); + this.pathGenerator.setConnectedPoint(dx, dy); + this.renderPath(); + if (this.state.current) { + this.refreshPathLayer(); + } else { + this.addPathLayer(); + this.trigger("initPathEditorView"); + } + } else { + if (this.state.isSplitPath) + ; + else { + this.pathGenerator.moveEnd(dx, dy); + this.state.clickCount++; + this.renderPath(); + this.pathGenerator.reselect(); + } } + this.state.isSplitPath = false; + } + } + hideSelectBox() { + this.refs.$segmentBox.css({ + left: -1e5 + }); + } + renderSelectBox(startXY = null, dx = 0, dy = 0) { + var obj2 = { + left: startXY.x + (dx < 0 ? dx : 0), + top: startXY.y + (dy < 0 ? dy : 0), + width: Math.abs(dx), + height: Math.abs(dy) }; + this.refs.$segmentBox.css(obj2); } - [BIND("$leftPanel")]() { - let left2 = `0px`; - let width2 = this.state.leftSize; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left2 = `-${this.state.leftSize}px`; - } - return { - style: { left: left2, width: width2, bottom: bottom2 } + getSelectBox() { + var [x, y, width2, height2] = this.refs.$segmentBox.styles("left", "top", "width", "height").map((it) => Length.parse(it)); + var rect2 = { + x, + y, + width: width2, + height: height2 }; + rect2.x2 = rect2.x.value + rect2.width; + rect2.y2 = rect2.y.value + rect2.height; + return rect2; + } + [SUBSCRIBE("deleteSegment")]() { + this.pathGenerator.reselect(); + this.pathGenerator.removeSelectedSegment(); + this.renderPath(); + this.updatePathLayer(); + } + [SUBSCRIBE("moveSegment")](dx, dy) { + this.pathGenerator.reselect(); + this.pathGenerator.moveSelectedSegment(dx, dy); + this.renderPath(); + this.updatePathLayer(); + } + [SUBSCRIBE("initPathEditorView")]() { + this.pathParser.reset(""); + this.setState(this.initState(), false); + this.state.isShow = true; + this.refs.$view.empty(); + this.$el.focus(); } - [BIND("$rightPanel")]() { - let right2 = 0; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.right.panel")) { - right2 = -this.state.rightSize; - } +} +var PathManager$1 = ""; +const MODES = { + "segment-move": "modify", + modify: "modify", + path: "path", + transform: "transform", + warp: "warp" +}; +class PathManager extends EditorElement { + initState() { return { - style: { - right: right2, - bottom: bottom2 - } + mode: "move", + fill: null, + stroke: null, + "fill-opacity": null, + "stroke-width": null, + msg: this.$i18n("path.manager.msg") }; } - [BIND("$rightArrow")]() { - let right2 = 6; - let bottom2 = this.state.bottomSize; - if (this.$config.true("show.right.panel")) { - right2 = this.state.rightSize + 6; - } - return { - style: { - right: right2, - bottom: bottom2 - } - }; + template() { + return ` +
+
+ +
+
+ + + +
+
+
+ +
+
+ + + +
+ + +
+ +
+ `; } - [BIND("$bodyPanel")]() { - let left2 = this.state.leftSize; - let right2 = this.state.rightSize; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; - } - if (this.$config.false("show.right.panel")) { - right2 = 0; - } + [BIND("$mode")]() { return { - style: { - left: left2, - right: right2, - bottom: bottom2 - } + "data-selected-value": MODES[this.state.mode] }; } - [POINTERSTART("$splitter") + MOVE("moveSplitter") + END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); - } - moveSplitter(dx) { - this.setState({ - leftSize: Math.max(Math.min(this.leftSize + dx, this.maxSize), this.minSize) - }); + refresh() { + this.bindData("$mode"); } - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); + [CLICK("$flip button")](e) { + var transformType = e.$dt.attr("data-value"); + if (transformType === "2x") { + this.emit("divideSegmentsByCount", 2); + } else if (transformType === "3x") { + this.emit("divideSegmentsByCount", 3); + } else { + this.emit("changePathTransform", transformType); + } } - refresh() { - this.bindData("$el"); - this.bindData("$splitter"); - this.bindData("$headerPanel"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); - this.bindData("$toggleRightButton"); - this.bindData("$toggleLeftButton"); - this.bindData("$bodyPanel"); - this.bindData("$footerPanel"); - this.emit("resizeEditor"); + [CLICK("$util button")](e) { + var utilType = e.$dt.attr("data-value"); + this.emit("changePathUtil", utilType); } - [CONFIG("show.left.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - this.$config.init("editor.layout.elements", this.refs); + [CLICK("$mode button")](e) { + var mode = e.$dt.attr("data-value"); + this.updateData({ + mode }); - } - [CONFIG("show.right.panel")]() { this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - this.$config.init("editor.layout.elements", this.refs); - }); - } - [CONFIG("editor.design.mode")]() { - this.bindData("$el"); - } - [DRAGOVER("$middle") + PREVENT]() { } - [DROP("$middle") + PREVENT]() { - } - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); - } - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } + [CLICK("$left button")](e) { + var message = e.$dt.attr("data-value"); + this.emit(message); } - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - this.$config.init("editor.layout.elements", this.refs); + updateData(obj2 = {}) { + this.setState(obj2, false); + this.emit(this.state.changeEvent, obj2); } -} -var Canvas3DView$1 = ""; -/** - * @license - * Copyright 2010-2022 Three.js Authors - * SPDX-License-Identifier: MIT - */ -const REVISION = "139"; -const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 }; -const TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 }; -const CullFaceNone = 0; -const CullFaceBack = 1; -const CullFaceFront = 2; -const PCFShadowMap = 1; -const PCFSoftShadowMap = 2; -const VSMShadowMap = 3; -const FrontSide = 0; -const BackSide = 1; -const DoubleSide = 2; -const FlatShading = 1; -const NoBlending = 0; -const NormalBlending = 1; -const AdditiveBlending = 2; -const SubtractiveBlending = 3; -const MultiplyBlending = 4; -const CustomBlending = 5; -const AddEquation = 100; -const SubtractEquation = 101; -const ReverseSubtractEquation = 102; -const MinEquation = 103; -const MaxEquation = 104; -const ZeroFactor = 200; -const OneFactor = 201; -const SrcColorFactor = 202; -const OneMinusSrcColorFactor = 203; -const SrcAlphaFactor = 204; -const OneMinusSrcAlphaFactor = 205; -const DstAlphaFactor = 206; -const OneMinusDstAlphaFactor = 207; -const DstColorFactor = 208; -const OneMinusDstColorFactor = 209; -const SrcAlphaSaturateFactor = 210; -const NeverDepth = 0; -const AlwaysDepth = 1; -const LessDepth = 2; -const LessEqualDepth = 3; -const EqualDepth = 4; -const GreaterEqualDepth = 5; -const GreaterDepth = 6; -const NotEqualDepth = 7; -const MultiplyOperation = 0; -const MixOperation = 1; -const AddOperation = 2; -const NoToneMapping = 0; -const LinearToneMapping = 1; -const ReinhardToneMapping = 2; -const CineonToneMapping = 3; -const ACESFilmicToneMapping = 4; -const CustomToneMapping = 5; -const UVMapping = 300; -const CubeReflectionMapping = 301; -const CubeRefractionMapping = 302; -const EquirectangularReflectionMapping = 303; -const EquirectangularRefractionMapping = 304; -const CubeUVReflectionMapping = 306; -const RepeatWrapping = 1e3; -const ClampToEdgeWrapping = 1001; -const MirroredRepeatWrapping = 1002; -const NearestFilter = 1003; -const NearestMipmapNearestFilter = 1004; -const NearestMipmapLinearFilter = 1005; -const LinearFilter = 1006; -const LinearMipmapNearestFilter = 1007; -const LinearMipmapLinearFilter = 1008; -const UnsignedByteType = 1009; -const ByteType = 1010; -const ShortType = 1011; -const UnsignedShortType = 1012; -const IntType = 1013; -const UnsignedIntType = 1014; -const FloatType = 1015; -const HalfFloatType = 1016; -const UnsignedShort4444Type = 1017; -const UnsignedShort5551Type = 1018; -const UnsignedInt248Type = 1020; -const AlphaFormat = 1021; -const RGBFormat = 1022; -const RGBAFormat = 1023; -const LuminanceFormat = 1024; -const LuminanceAlphaFormat = 1025; -const DepthFormat = 1026; -const DepthStencilFormat = 1027; -const RedFormat = 1028; -const RedIntegerFormat = 1029; -const RGFormat = 1030; -const RGIntegerFormat = 1031; -const RGBAIntegerFormat = 1033; -const RGB_S3TC_DXT1_Format = 33776; -const RGBA_S3TC_DXT1_Format = 33777; -const RGBA_S3TC_DXT3_Format = 33778; -const RGBA_S3TC_DXT5_Format = 33779; -const RGB_PVRTC_4BPPV1_Format = 35840; -const RGB_PVRTC_2BPPV1_Format = 35841; -const RGBA_PVRTC_4BPPV1_Format = 35842; -const RGBA_PVRTC_2BPPV1_Format = 35843; -const RGB_ETC1_Format = 36196; -const RGB_ETC2_Format = 37492; -const RGBA_ETC2_EAC_Format = 37496; -const RGBA_ASTC_4x4_Format = 37808; -const RGBA_ASTC_5x4_Format = 37809; -const RGBA_ASTC_5x5_Format = 37810; -const RGBA_ASTC_6x5_Format = 37811; -const RGBA_ASTC_6x6_Format = 37812; -const RGBA_ASTC_8x5_Format = 37813; -const RGBA_ASTC_8x6_Format = 37814; -const RGBA_ASTC_8x8_Format = 37815; -const RGBA_ASTC_10x5_Format = 37816; -const RGBA_ASTC_10x6_Format = 37817; -const RGBA_ASTC_10x8_Format = 37818; -const RGBA_ASTC_10x10_Format = 37819; -const RGBA_ASTC_12x10_Format = 37820; -const RGBA_ASTC_12x12_Format = 37821; -const RGBA_BPTC_Format = 36492; -const LoopOnce = 2200; -const LoopRepeat = 2201; -const LoopPingPong = 2202; -const InterpolateDiscrete = 2300; -const InterpolateLinear = 2301; -const InterpolateSmooth = 2302; -const ZeroCurvatureEnding = 2400; -const ZeroSlopeEnding = 2401; -const WrapAroundEnding = 2402; -const NormalAnimationBlendMode = 2500; -const AdditiveAnimationBlendMode = 2501; -const TrianglesDrawMode = 0; -const LinearEncoding = 3e3; -const sRGBEncoding = 3001; -const BasicDepthPacking = 3200; -const RGBADepthPacking = 3201; -const TangentSpaceNormalMap = 0; -const ObjectSpaceNormalMap = 1; -const SRGBColorSpace = "srgb"; -const LinearSRGBColorSpace = "srgb-linear"; -const KeepStencilOp = 7680; -const AlwaysStencilFunc = 519; -const StaticDrawUsage = 35044; -const DynamicDrawUsage = 35048; -const GLSL3 = "300 es"; -const _SRGBAFormat = 1035; -class EventDispatcher { - addEventListener(type, listener) { - if (this._listeners === void 0) - this._listeners = {}; - const listeners = this._listeners; - if (listeners[type] === void 0) { - listeners[type] = []; - } - if (listeners[type].indexOf(listener) === -1) { - listeners[type].push(listener); - } - } - hasEventListener(type, listener) { - if (this._listeners === void 0) - return false; - const listeners = this._listeners; - return listeners[type] !== void 0 && listeners[type].indexOf(listener) !== -1; + [SUBSCRIBE("changePathManager")](mode) { + this.setState({ mode }); } - removeEventListener(type, listener) { - if (this._listeners === void 0) - return; - const listeners = this._listeners; - const listenerArray = listeners[type]; - if (listenerArray !== void 0) { - const index2 = listenerArray.indexOf(listener); - if (index2 !== -1) { - listenerArray.splice(index2, 1); - } - } + [SUBSCRIBE("showPathManager")](obj2 = {}) { + obj2.changeEvent = obj2.changeEvent || "changePathManager"; + this.setState(obj2); + this.$el.show(); } - dispatchEvent(event) { - if (this._listeners === void 0) - return; - const listeners = this._listeners; - const listenerArray = listeners[event.type]; - if (listenerArray !== void 0) { - event.target = this; - const array = listenerArray.slice(0); - for (let i = 0, l = array.length; i < l; i++) { - array[i].call(this, event); - } - event.target = null; - } + [SUBSCRIBE("hidePathManager")]() { + this.$el.hide(); } } -const _lut = []; -for (let i = 0; i < 256; i++) { - _lut[i] = (i < 16 ? "0" : "") + i.toString(16); -} -const DEG2RAD = Math.PI / 180; -const RAD2DEG = 180 / Math.PI; -function generateUUID() { - const d0 = Math.random() * 4294967295 | 0; - const d1 = Math.random() * 4294967295 | 0; - const d2 = Math.random() * 4294967295 | 0; - const d3 = Math.random() * 4294967295 | 0; - const uuid2 = _lut[d0 & 255] + _lut[d0 >> 8 & 255] + _lut[d0 >> 16 & 255] + _lut[d0 >> 24 & 255] + "-" + _lut[d1 & 255] + _lut[d1 >> 8 & 255] + "-" + _lut[d1 >> 16 & 15 | 64] + _lut[d1 >> 24 & 255] + "-" + _lut[d2 & 63 | 128] + _lut[d2 >> 8 & 255] + "-" + _lut[d2 >> 16 & 255] + _lut[d2 >> 24 & 255] + _lut[d3 & 255] + _lut[d3 >> 8 & 255] + _lut[d3 >> 16 & 255] + _lut[d3 >> 24 & 255]; - return uuid2.toLowerCase(); -} -function clamp(value, min, max) { - return Math.max(min, Math.min(max, value)); -} -function euclideanModulo(n, m) { - return (n % m + m) % m; -} -function lerp(x, y, t) { - return (1 - t) * x + t * y; -} -function isPowerOfTwo(value) { - return (value & value - 1) === 0 && value !== 0; -} -function ceilPowerOfTwo(value) { - return Math.pow(2, Math.ceil(Math.log(value) / Math.LN2)); -} -function floorPowerOfTwo(value) { - return Math.pow(2, Math.floor(Math.log(value) / Math.LN2)); +function pathEditorView(editor) { + editor.registerUI("canvas.view", { + PathEditorView + }); + editor.registerUI("page.subeditor.view", { + PathManager + }); } -class Vector2 { - constructor(x = 0, y = 0) { - this.x = x; - this.y = y; - } - get width() { - return this.x; - } - set width(value) { - this.x = value; - } - get height() { - return this.y; - } - set height(value) { - this.y = value; - } - set(x, y) { - this.x = x; - this.y = y; - return this; +var PathToolProperty$1 = ""; +class PathToolProperty extends BaseProperty { + components() { + return { + LeftAlign, + CenterAlign, + RightAlign, + TopAlign, + MiddleAlign, + BottomAlign, + SameWidth, + SameHeight + }; } - setScalar(scalar) { - this.x = scalar; - this.y = scalar; - return this; + getTitle() { + return this.$i18n("alignment.property.title"); } - setX(x) { - this.x = x; - return this; + isHideHeader() { + return true; } - setY(y) { - this.y = y; - return this; + getBody() { + return ` +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + + +
+ +
+ `; } - setComponent(index2, value) { - switch (index2) { - case 0: - this.x = value; - break; - case 1: - this.y = value; - break; - default: - throw new Error("index is out of range: " + index2); + [CLICK("$buttons button")](e) { + const command = e.$dt.data("command"); + const args2 = e.$dt.data("args"); + if (command === "convert.smooth.path") { + this.$commands.emit(command); + } else { + this.$commands.emit(command, args2); } - return this; } - getComponent(index2) { - switch (index2) { - case 0: - return this.x; - case 1: - return this.y; - default: - throw new Error("index is out of range: " + index2); - } + [SUBSCRIBE(REFRESH_SELECTION)]() { + this.refreshShow(() => { + if (this.$context.selection.length === 1 && this.$context.selection.is("boolean-path")) + return true; + return this.$context.selection.is("svg-path", "polygon", "star"); + }); } - clone() { - return new this.constructor(this.x, this.y); +} +function pathTool(editor) { + editor.registerUI("inspector.tab.style", { + PathToolProperty + }); +} +var PatternEditor$1 = ""; +class PatternEditor extends EditorElement { + initState() { + return { + hideLabel: this.props.hideLabel, + value: this.props.value, + patterns: this.parsePattern(this.props.value) + }; } - copy(v) { - this.x = v.x; - this.y = v.y; - return this; + parsePattern(str) { + if (str === "undefined") + return []; + return Pattern.parseStyle(str); } - add(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector2: .add() now only accepts one argument. Use .addVectors( a, b ) instead."); - return this.addVectors(v, w); - } - this.x += v.x; - this.y += v.y; - return this; + setValue(value) { + this.setState({ + value, + patterns: this.parsePattern(value) + }); } - addScalar(s) { - this.x += s; - this.y += s; - return this; + template() { + return ` +
+
+
+ `; } - addVectors(a, b) { - this.x = a.x + b.x; - this.y = a.y + b.y; - return this; + [LOAD("$patternList")]() { + return this.state.patterns.map((it, index2) => { + const selectedClass = it.selected ? "selected" : ""; + if (it.selected) { + this.selectedIndex = index2; + } + return ` +
+ ${createComponent("PatternSizeEditor", { + key: "pattern-size", + ref: `$bp${index2}`, + type: it.type, + x: it.x, + y: it.y, + width: it.width, + height: it.height, + index: index2, + foreColor: it.foreColor, + backColor: it.backColor, + blendMode: it.blendMode, + lineWidth: it.lineWidth, + lineHeight: it.lineHeight, + onchange: "changePatternSizeInfo" + })} +
+ +
+
+ `; + }); } - addScaledVector(v, s) { - this.x += v.x * s; - this.y += v.y * s; - return this; + modifyPattern() { + var value = Pattern.join(this.state.patterns); + this.parent.trigger(this.props.onchange, this.props.key, value); } - sub(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector2: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."); - return this.subVectors(v, w); + [SUBSCRIBE("add")](type = "check") { + var pattern = patterns.find((it) => it.key === type); + if (pattern) { + const data = Pattern.parseStyle(pattern.execute()[0].pattern); + this.state.patterns.push.apply(this.state.patterns, data); + this.refresh(); + this.modifyPattern(); } - this.x -= v.x; - this.y -= v.y; - return this; - } - subScalar(s) { - this.x -= s; - this.y -= s; - return this; - } - subVectors(a, b) { - this.x = a.x - b.x; - this.y = a.y - b.y; - return this; - } - multiply(v) { - this.x *= v.x; - this.y *= v.y; - return this; - } - multiplyScalar(scalar) { - this.x *= scalar; - this.y *= scalar; - return this; - } - divide(v) { - this.x /= v.x; - this.y /= v.y; - return this; - } - divideScalar(scalar) { - return this.multiplyScalar(1 / scalar); - } - applyMatrix3(m) { - const x = this.x, y = this.y; - const e = m.elements; - this.x = e[0] * x + e[3] * y + e[6]; - this.y = e[1] * x + e[4] * y + e[7]; - return this; - } - min(v) { - this.x = Math.min(this.x, v.x); - this.y = Math.min(this.y, v.y); - return this; - } - max(v) { - this.x = Math.max(this.x, v.x); - this.y = Math.max(this.y, v.y); - return this; - } - clamp(min, max) { - this.x = Math.max(min.x, Math.min(max.x, this.x)); - this.y = Math.max(min.y, Math.min(max.y, this.y)); - return this; - } - clampScalar(minVal, maxVal) { - this.x = Math.max(minVal, Math.min(maxVal, this.x)); - this.y = Math.max(minVal, Math.min(maxVal, this.y)); - return this; - } - clampLength(min, max) { - const length2 = this.length(); - return this.divideScalar(length2 || 1).multiplyScalar(Math.max(min, Math.min(max, length2))); - } - floor() { - this.x = Math.floor(this.x); - this.y = Math.floor(this.y); - return this; - } - ceil() { - this.x = Math.ceil(this.x); - this.y = Math.ceil(this.y); - return this; - } - round() { - this.x = Math.round(this.x); - this.y = Math.round(this.y); - return this; - } - roundToZero() { - this.x = this.x < 0 ? Math.ceil(this.x) : Math.floor(this.x); - this.y = this.y < 0 ? Math.ceil(this.y) : Math.floor(this.y); - return this; - } - negate() { - this.x = -this.x; - this.y = -this.y; - return this; - } - dot(v) { - return this.x * v.x + this.y * v.y; } - cross(v) { - return this.x * v.y - this.y * v.x; + [CLICK("$add")]() { + this.trigger("add"); } - lengthSq() { - return this.x * this.x + this.y * this.y; + [DRAGSTART("$patternList .pattern-item")](e) { + this.startIndex = +e.$dt.attr("data-index"); } - length() { - return Math.sqrt(this.x * this.x + this.y * this.y); + [DRAGOVER("$patternList .pattern-item") + PREVENT]() { } - manhattanLength() { - return Math.abs(this.x) + Math.abs(this.y); + sortItem(arr, startIndex, targetIndex) { + arr.splice(targetIndex + (startIndex < targetIndex ? -1 : 0), 0, ...arr.splice(startIndex, 1)); } - normalize() { - return this.divideScalar(this.length() || 1); + sortPattern(startIndex, targetIndex) { + this.sortItem(this.state.patterns, startIndex, targetIndex); } - angle() { - const angle = Math.atan2(-this.y, -this.x) + Math.PI; - return angle; + [DROP("$patternList .pattern-item") + PREVENT](e) { + var targetIndex = +e.$dt.attr("data-index"); + this.selectItem(this.startIndex, true); + this.sortPattern(this.startIndex, targetIndex); + this.modifyPattern(); + this.refresh(); } - distanceTo(v) { - return Math.sqrt(this.distanceToSquared(v)); + getCurrentPattern() { + return this.state.patterns[this.selectedIndex]; } - distanceToSquared(v) { - const dx = this.x - v.x, dy = this.y - v.y; - return dx * dx + dy * dy; + [CLICK("$patternList .tools .remove")](e) { + var removeIndex = +e.$dt.attr("data-index"); + this.state.patterns.splice(removeIndex, 1); + this.modifyPattern(); + this.refresh(); } - manhattanDistanceTo(v) { - return Math.abs(this.x - v.x) + Math.abs(this.y - v.y); + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.refs[`fillIndex${selectedIndex}`].addClass("selected"); + } else { + this.refs[`fillIndex${selectedIndex}`].removeClass("selected"); + } + this.state.patterns.forEach((it, index2) => { + it.selected = index2 === selectedIndex; + }); } - setLength(length2) { - return this.normalize().multiplyScalar(length2); + [SUBSCRIBE("changePatternSizeInfo") + DEBOUNCE(10)](key, value, index2) { + var pattern = this.state.patterns[index2]; + pattern.reset(value); + this.modifyPattern(); + this.refresh(); } - lerp(v, alpha2) { - this.x += (v.x - this.x) * alpha2; - this.y += (v.y - this.y) * alpha2; - return this; +} +var PatternInfoPopup$1 = ""; +class PatternInfoPopup extends BasePopup { + getClassName() { + return "pattern-info-popup"; } - lerpVectors(v1, v2, alpha2) { - this.x = v1.x + (v2.x - v1.x) * alpha2; - this.y = v1.y + (v2.y - v1.y) * alpha2; - return this; + getTitle() { + return this.$i18n("pattern.info.popup.title"); } - equals(v) { - return v.x === this.x && v.y === this.y; + initState() { + return { + type: this.props.type || "grid", + x: this.props.x || 0, + y: this.props.y || 0, + width: this.props.width || 0, + height: this.props.height || 0, + lineWidth: this.props.lineWidth || 1, + lineHeight: this.props.lineHeight || 1, + foreColor: this.props.foreColor || "black", + backColor: this.props.backColor || "transparent", + blendMode: this.props.blendMode || "normal" + }; } - fromArray(array, offset = 0) { - this.x = array[offset]; - this.y = array[offset + 1]; - return this; + updateData(opt = {}) { + this.setState(opt, false); + const { + x, + y, + width: width2, + height: height2, + foreColor, + backColor, + blendMode, + lineWidth, + lineHeight + } = this.state; + this.state.instance.trigger(this.state.changeEvent, { + x, + y, + width: width2, + height: height2, + foreColor, + backColor, + blendMode, + lineWidth, + lineHeight + }); } - toArray(array = [], offset = 0) { - array[offset] = this.x; - array[offset + 1] = this.y; - return array; + [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { + this.updateData({ [key]: value }); } - fromBufferAttribute(attribute, index2, offset) { - if (offset !== void 0) { - console.warn("THREE.Vector2: offset has been removed from .fromBufferAttribute()."); + templateForX() { + if (this.hasNotX()) + return ""; + let label = "X"; + let units = ""; + if (this.state.type === "diagonal-line") { + label = this.$i18n("pattern.info.popup.rotate"); + units = ["deg"]; } - this.x = attribute.getX(index2); - this.y = attribute.getY(index2); - return this; - } - rotateAround(center2, angle) { - const c2 = Math.cos(angle), s = Math.sin(angle); - const x = this.x - center2.x; - const y = this.y - center2.y; - this.x = x * c2 - y * s + center2.x; - this.y = x * s + y * c2 + center2.y; - return this; - } - random() { - this.x = Math.random(); - this.y = Math.random(); - return this; - } - *[Symbol.iterator]() { - yield this.x; - yield this.y; - } -} -Vector2.prototype.isVector2 = true; -class Matrix3 { - constructor() { - this.elements = [ - 1, - 0, - 0, - 0, - 1, - 0, - 0, - 0, - 1 - ]; - if (arguments.length > 0) { - console.error("THREE.Matrix3: the constructor no longer reads arguments. use .set() instead."); - } - } - set(n11, n12, n13, n21, n22, n23, n31, n32, n33) { - const te = this.elements; - te[0] = n11; - te[1] = n21; - te[2] = n31; - te[3] = n12; - te[4] = n22; - te[5] = n32; - te[6] = n13; - te[7] = n23; - te[8] = n33; - return this; - } - identity() { - this.set(1, 0, 0, 0, 1, 0, 0, 0, 1); - return this; + return createComponent("InputRangeEditor", { + label, + ref: "$x", + key: "x", + value: this.state.x, + min: 0, + max: 1e3, + step: 1, + units, + onchange: "changeRangeEditor" + }); } - copy(m) { - const te = this.elements; - const me = m.elements; - te[0] = me[0]; - te[1] = me[1]; - te[2] = me[2]; - te[3] = me[3]; - te[4] = me[4]; - te[5] = me[5]; - te[6] = me[6]; - te[7] = me[7]; - te[8] = me[8]; - return this; + templateForY() { + if (this.hasNotY()) + return "
"; + return createComponent("InputRangeEditor", { + label: "Y", + ref: "$y", + key: "y", + value: this.state.y, + min: 0, + max: 1e3, + step: 1, + onchange: "changeRangeEditor" + }); } - extractBasis(xAxis, yAxis, zAxis) { - xAxis.setFromMatrix3Column(this, 0); - yAxis.setFromMatrix3Column(this, 1); - zAxis.setFromMatrix3Column(this, 2); - return this; + templateForLabel() { + return ``; } - setFromMatrix4(m) { - const me = m.elements; - this.set(me[0], me[4], me[8], me[1], me[5], me[9], me[2], me[6], me[10]); - return this; + templateForWidth() { + return createComponent("InputRangeEditor", { + label: this.$i18n("pattern.info.popup.width"), + ref: "$width", + key: "width", + value: this.state.width, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); } - multiply(m) { - return this.multiplyMatrices(this, m); - } - premultiply(m) { - return this.multiplyMatrices(m, this); - } - multiplyMatrices(a, b) { - const ae = a.elements; - const be = b.elements; - const te = this.elements; - const a11 = ae[0], a12 = ae[3], a13 = ae[6]; - const a21 = ae[1], a22 = ae[4], a23 = ae[7]; - const a31 = ae[2], a32 = ae[5], a33 = ae[8]; - const b11 = be[0], b12 = be[3], b13 = be[6]; - const b21 = be[1], b22 = be[4], b23 = be[7]; - const b31 = be[2], b32 = be[5], b33 = be[8]; - te[0] = a11 * b11 + a12 * b21 + a13 * b31; - te[3] = a11 * b12 + a12 * b22 + a13 * b32; - te[6] = a11 * b13 + a12 * b23 + a13 * b33; - te[1] = a21 * b11 + a22 * b21 + a23 * b31; - te[4] = a21 * b12 + a22 * b22 + a23 * b32; - te[7] = a21 * b13 + a22 * b23 + a23 * b33; - te[2] = a31 * b11 + a32 * b21 + a33 * b31; - te[5] = a31 * b12 + a32 * b22 + a33 * b32; - te[8] = a31 * b13 + a32 * b23 + a33 * b33; - return this; + templateForHeight() { + return createComponent("InputRangeEditor", { + label: this.$i18n("pattern.info.popup.height"), + ref: "$height", + key: "height", + value: this.state.height, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); } - multiplyScalar(s) { - const te = this.elements; - te[0] *= s; - te[3] *= s; - te[6] *= s; - te[1] *= s; - te[4] *= s; - te[7] *= s; - te[2] *= s; - te[5] *= s; - te[8] *= s; - return this; + hasNotLineWidth() { + return ["check"].includes(this.state.type); } - determinant() { - const te = this.elements; - const a = te[0], b = te[1], c2 = te[2], d = te[3], e = te[4], f = te[5], g = te[6], h = te[7], i = te[8]; - return a * e * i - a * f * h - b * d * i + b * f * g + c2 * d * h - c2 * e * g; - } - invert() { - const te = this.elements, n11 = te[0], n21 = te[1], n31 = te[2], n12 = te[3], n22 = te[4], n32 = te[5], n13 = te[6], n23 = te[7], n33 = te[8], t11 = n33 * n22 - n32 * n23, t12 = n32 * n13 - n33 * n12, t13 = n23 * n12 - n22 * n13, det = n11 * t11 + n21 * t12 + n31 * t13; - if (det === 0) - return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0); - const detInv = 1 / det; - te[0] = t11 * detInv; - te[1] = (n31 * n23 - n33 * n21) * detInv; - te[2] = (n32 * n21 - n31 * n22) * detInv; - te[3] = t12 * detInv; - te[4] = (n33 * n11 - n31 * n13) * detInv; - te[5] = (n31 * n12 - n32 * n11) * detInv; - te[6] = t13 * detInv; - te[7] = (n21 * n13 - n23 * n11) * detInv; - te[8] = (n22 * n11 - n21 * n12) * detInv; - return this; + hasNotLineHeight() { + return [ + "cross-dot", + "dot", + "check", + "diagonal-line", + "horizontal-line" + ].includes(this.state.type); } - transpose() { - let tmp2; - const m = this.elements; - tmp2 = m[1]; - m[1] = m[3]; - m[3] = tmp2; - tmp2 = m[2]; - m[2] = m[6]; - m[6] = tmp2; - tmp2 = m[5]; - m[5] = m[7]; - m[7] = tmp2; - return this; + hasNotX() { + return ["grid", "dot", "horizontal-line"].includes(this.state.type); } - getNormalMatrix(matrix4) { - return this.setFromMatrix4(matrix4).invert().transpose(); - } - transposeIntoArray(r) { - const m = this.elements; - r[0] = m[0]; - r[1] = m[3]; - r[2] = m[6]; - r[3] = m[1]; - r[4] = m[4]; - r[5] = m[7]; - r[6] = m[2]; - r[7] = m[5]; - r[8] = m[8]; - return this; + hasNotY() { + return ["grid", "dot", "diagonal-line", "vertical-line"].includes(this.state.type); } - setUvTransform(tx, ty, sx, sy, rotation, cx, cy) { - const c2 = Math.cos(rotation); - const s = Math.sin(rotation); - this.set(sx * c2, sx * s, -sx * (c2 * cx + s * cy) + cx + tx, -sy * s, sy * c2, -sy * (-s * cx + c2 * cy) + cy + ty, 0, 0, 1); - return this; + templateForLineWidth() { + if (this.hasNotLineWidth()) + return "
"; + return createComponent("InputRangeEditor", { + label: this.$i18n("pattern.info.popup.lineWidth"), + ref: "$lineWidth", + key: "lineWidth", + value: this.state.lineWidth, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); } - scale(sx, sy) { - const te = this.elements; - te[0] *= sx; - te[3] *= sx; - te[6] *= sx; - te[1] *= sy; - te[4] *= sy; - te[7] *= sy; - return this; + templateForLineHeight() { + if (this.hasNotLineHeight()) + return "
"; + return createComponent("InputRangeEditor", { + label: this.$i18n("pattern.info.popup.lineHeight"), + ref: "$lineHeight", + key: "lineHeight", + value: this.state.lineHeight, + min: 0, + max: 500, + step: 1, + onchange: "changeRangeEditor" + }); } - rotate(theta) { - const c2 = Math.cos(theta); - const s = Math.sin(theta); - const te = this.elements; - const a11 = te[0], a12 = te[3], a13 = te[6]; - const a21 = te[1], a22 = te[4], a23 = te[7]; - te[0] = c2 * a11 + s * a21; - te[3] = c2 * a12 + s * a22; - te[6] = c2 * a13 + s * a23; - te[1] = -s * a11 + c2 * a21; - te[4] = -s * a12 + c2 * a22; - te[7] = -s * a13 + c2 * a23; - return this; + templateForForeColor() { + return createComponent("ColorViewEditor", { + ref: "$foreColor", + label: this.$i18n("pattern.info.popup.foreColor"), + key: "foreColor", + value: this.state.foreColor, + onchange: "changeRangeEditor" + }); } - translate(tx, ty) { - const te = this.elements; - te[0] += tx * te[2]; - te[3] += tx * te[5]; - te[6] += tx * te[8]; - te[1] += ty * te[2]; - te[4] += ty * te[5]; - te[7] += ty * te[8]; - return this; + templateForBackColor() { + return createComponent("ColorViewEditor", { + ref: "$backColor", + label: this.$i18n("pattern.info.popup.backColor"), + key: "backColor", + value: this.state.backColor, + onchange: "changeRangeEditor" + }); } - equals(matrix) { - const te = this.elements; - const me = matrix.elements; - for (let i = 0; i < 9; i++) { - if (te[i] !== me[i]) - return false; - } - return true; + templateForBlendMode() { + return ` +
+ ${createComponent("BlendSelectEditor", { + ref: "$blend", + key: "blendMode", + label: this.$i18n("pattern.info.popup.blend"), + value: this.state.blendMode, + onchange: "changeRangeEditor" + })} +
+ `; } - fromArray(array, offset = 0) { - for (let i = 0; i < 9; i++) { - this.elements[i] = array[i + offset]; - } - return this; + getBody() { + return ` +
+ `; } - toArray(array = [], offset = 0) { - const te = this.elements; - array[offset] = te[0]; - array[offset + 1] = te[1]; - array[offset + 2] = te[2]; - array[offset + 3] = te[3]; - array[offset + 4] = te[4]; - array[offset + 5] = te[5]; - array[offset + 6] = te[6]; - array[offset + 7] = te[7]; - array[offset + 8] = te[8]; - return array; + [LOAD("$picker")]() { + return ` + +
+
+ ${this.templateForLabel()} +
+
+ ${this.templateForWidth()} + ${this.templateForHeight()} +
+
+ ${this.templateForLineWidth()} + ${this.templateForLineHeight()} +
+
+ ${this.templateForX()} + ${this.templateForY()} +
+
+ ${this.templateForForeColor()} + ${this.templateForBackColor()} +
+
+ ${this.templateForBlendMode()} +
+
+ `; } - clone() { - return new this.constructor().fromArray(this.elements); + [SUBSCRIBE("showPatternInfoPopup")](data, rect2) { + this.state.changeEvent = data.changeEvent || "changePatternInfoPopup"; + this.state.instance = data.instance; + this.setState(data.data); + this.showByRect(rect2); } } -Matrix3.prototype.isMatrix3 = true; -function arrayNeedsUint32(array) { - for (let i = array.length - 1; i >= 0; --i) { - if (array[i] > 65535) - return true; +var PatternProperty$1 = ""; +class PatternProperty extends BaseProperty { + getTitle() { + return this.$i18n("pattern.property.title"); } - return false; -} -const TYPED_ARRAYS = { - Int8Array, - Uint8Array, - Uint8ClampedArray, - Int16Array, - Uint16Array, - Int32Array, - Uint32Array, - Float32Array, - Float64Array -}; -function getTypedArray(type, buffer) { - return new TYPED_ARRAYS[type](buffer); -} -function createElementNS(name) { - return document.createElementNS("http://www.w3.org/1999/xhtml", name); -} -function SRGBToLinear(c2) { - return c2 < 0.04045 ? c2 * 0.0773993808 : Math.pow(c2 * 0.9478672986 + 0.0521327014, 2.4); -} -function LinearToSRGB(c2) { - return c2 < 31308e-7 ? c2 * 12.92 : 1.055 * Math.pow(c2, 0.41666) - 0.055; -} -const FN = { - [SRGBColorSpace]: { [LinearSRGBColorSpace]: SRGBToLinear }, - [LinearSRGBColorSpace]: { [SRGBColorSpace]: LinearToSRGB } -}; -const ColorManagement = { - legacyMode: true, - get workingColorSpace() { - return LinearSRGBColorSpace; - }, - set workingColorSpace(colorSpace) { - console.warn("THREE.ColorManagement: .workingColorSpace is readonly."); - }, - convert: function(color2, sourceColorSpace, targetColorSpace) { - if (this.legacyMode || sourceColorSpace === targetColorSpace || !sourceColorSpace || !targetColorSpace) { - return color2; - } - if (FN[sourceColorSpace] && FN[sourceColorSpace][targetColorSpace] !== void 0) { - const fn = FN[sourceColorSpace][targetColorSpace]; - color2.r = fn(color2.r); - color2.g = fn(color2.g); - color2.b = fn(color2.b); - return color2; - } - throw new Error("Unsupported color space conversion."); - }, - fromWorkingColorSpace: function(color2, targetColorSpace) { - return this.convert(color2, this.workingColorSpace, targetColorSpace); - }, - toWorkingColorSpace: function(color2, sourceColorSpace) { - return this.convert(color2, sourceColorSpace, this.workingColorSpace); - } -}; -const _colorKeywords = { - "aliceblue": 15792383, - "antiquewhite": 16444375, - "aqua": 65535, - "aquamarine": 8388564, - "azure": 15794175, - "beige": 16119260, - "bisque": 16770244, - "black": 0, - "blanchedalmond": 16772045, - "blue": 255, - "blueviolet": 9055202, - "brown": 10824234, - "burlywood": 14596231, - "cadetblue": 6266528, - "chartreuse": 8388352, - "chocolate": 13789470, - "coral": 16744272, - "cornflowerblue": 6591981, - "cornsilk": 16775388, - "crimson": 14423100, - "cyan": 65535, - "darkblue": 139, - "darkcyan": 35723, - "darkgoldenrod": 12092939, - "darkgray": 11119017, - "darkgreen": 25600, - "darkgrey": 11119017, - "darkkhaki": 12433259, - "darkmagenta": 9109643, - "darkolivegreen": 5597999, - "darkorange": 16747520, - "darkorchid": 10040012, - "darkred": 9109504, - "darksalmon": 15308410, - "darkseagreen": 9419919, - "darkslateblue": 4734347, - "darkslategray": 3100495, - "darkslategrey": 3100495, - "darkturquoise": 52945, - "darkviolet": 9699539, - "deeppink": 16716947, - "deepskyblue": 49151, - "dimgray": 6908265, - "dimgrey": 6908265, - "dodgerblue": 2003199, - "firebrick": 11674146, - "floralwhite": 16775920, - "forestgreen": 2263842, - "fuchsia": 16711935, - "gainsboro": 14474460, - "ghostwhite": 16316671, - "gold": 16766720, - "goldenrod": 14329120, - "gray": 8421504, - "green": 32768, - "greenyellow": 11403055, - "grey": 8421504, - "honeydew": 15794160, - "hotpink": 16738740, - "indianred": 13458524, - "indigo": 4915330, - "ivory": 16777200, - "khaki": 15787660, - "lavender": 15132410, - "lavenderblush": 16773365, - "lawngreen": 8190976, - "lemonchiffon": 16775885, - "lightblue": 11393254, - "lightcoral": 15761536, - "lightcyan": 14745599, - "lightgoldenrodyellow": 16448210, - "lightgray": 13882323, - "lightgreen": 9498256, - "lightgrey": 13882323, - "lightpink": 16758465, - "lightsalmon": 16752762, - "lightseagreen": 2142890, - "lightskyblue": 8900346, - "lightslategray": 7833753, - "lightslategrey": 7833753, - "lightsteelblue": 11584734, - "lightyellow": 16777184, - "lime": 65280, - "limegreen": 3329330, - "linen": 16445670, - "magenta": 16711935, - "maroon": 8388608, - "mediumaquamarine": 6737322, - "mediumblue": 205, - "mediumorchid": 12211667, - "mediumpurple": 9662683, - "mediumseagreen": 3978097, - "mediumslateblue": 8087790, - "mediumspringgreen": 64154, - "mediumturquoise": 4772300, - "mediumvioletred": 13047173, - "midnightblue": 1644912, - "mintcream": 16121850, - "mistyrose": 16770273, - "moccasin": 16770229, - "navajowhite": 16768685, - "navy": 128, - "oldlace": 16643558, - "olive": 8421376, - "olivedrab": 7048739, - "orange": 16753920, - "orangered": 16729344, - "orchid": 14315734, - "palegoldenrod": 15657130, - "palegreen": 10025880, - "paleturquoise": 11529966, - "palevioletred": 14381203, - "papayawhip": 16773077, - "peachpuff": 16767673, - "peru": 13468991, - "pink": 16761035, - "plum": 14524637, - "powderblue": 11591910, - "purple": 8388736, - "rebeccapurple": 6697881, - "red": 16711680, - "rosybrown": 12357519, - "royalblue": 4286945, - "saddlebrown": 9127187, - "salmon": 16416882, - "sandybrown": 16032864, - "seagreen": 3050327, - "seashell": 16774638, - "sienna": 10506797, - "silver": 12632256, - "skyblue": 8900331, - "slateblue": 6970061, - "slategray": 7372944, - "slategrey": 7372944, - "snow": 16775930, - "springgreen": 65407, - "steelblue": 4620980, - "tan": 13808780, - "teal": 32896, - "thistle": 14204888, - "tomato": 16737095, - "turquoise": 4251856, - "violet": 15631086, - "wheat": 16113331, - "white": 16777215, - "whitesmoke": 16119285, - "yellow": 16776960, - "yellowgreen": 10145074 -}; -const _rgb = { r: 0, g: 0, b: 0 }; -const _hslA = { h: 0, s: 0, l: 0 }; -const _hslB = { h: 0, s: 0, l: 0 }; -function hue2rgb(p, q, t) { - if (t < 0) - t += 1; - if (t > 1) - t -= 1; - if (t < 1 / 6) - return p + (q - p) * 6 * t; - if (t < 1 / 2) - return q; - if (t < 2 / 3) - return p + (q - p) * 6 * (2 / 3 - t); - return p; -} -function toComponents(source2, target) { - target.r = source2.r; - target.g = source2.g; - target.b = source2.b; - return target; -} -class Color { - constructor(r, g, b) { - if (g === void 0 && b === void 0) { - return this.set(r); - } - return this.setRGB(r, g, b); + getClassName() { + return "el--pattern-property"; } - set(value) { - if (value && value.isColor) { - this.copy(value); - } else if (typeof value === "number") { - this.setHex(value); - } else if (typeof value === "string") { - this.setStyle(value); - } - return this; + getTitleClassName() { + return "pattern"; } - setScalar(scalar) { - this.r = scalar; - this.g = scalar; - this.b = scalar; - return this; + getBody() { + return `
`; } - setHex(hex2, colorSpace = SRGBColorSpace) { - hex2 = Math.floor(hex2); - this.r = (hex2 >> 16 & 255) / 255; - this.g = (hex2 >> 8 & 255) / 255; - this.b = (hex2 & 255) / 255; - ColorManagement.toWorkingColorSpace(this, colorSpace); - return this; + getTools() { + return ` +
+ + + + + + + +
+ `; } - setRGB(r, g, b, colorSpace = LinearSRGBColorSpace) { - this.r = r; - this.g = g; - this.b = b; - ColorManagement.toWorkingColorSpace(this, colorSpace); - return this; + [CLICK("$tools button")](e) { + var patternType = e.$dt.data("pattern"); + this.children.$patternEditor.trigger("add", patternType); } - setHSL(h, s, l, colorSpace = LinearSRGBColorSpace) { - h = euclideanModulo(h, 1); - s = clamp(s, 0, 1); - l = clamp(l, 0, 1); - if (s === 0) { - this.r = this.g = this.b = l; - } else { - const p = l <= 0.5 ? l * (1 + s) : l + s - l * s; - const q = 2 * l - p; - this.r = hue2rgb(q, p, h + 1 / 3); - this.g = hue2rgb(q, p, h); - this.b = hue2rgb(q, p, h - 1 / 3); - } - ColorManagement.toWorkingColorSpace(this, colorSpace); - return this; + [LOAD("$body")]() { + var current = this.$context.selection.current || {}; + var value = current.pattern; + return createComponent("PatternEditor", { + ref: "$patternEditor", + value, + "hide-label": true, + onchange: "changePatternEditor" + }); } - setStyle(style, colorSpace = SRGBColorSpace) { - function handleAlpha(string) { - if (string === void 0) - return; - if (parseFloat(string) < 1) { - console.warn("THREE.Color: Alpha component of " + style + " will be ignored."); - } - } - let m; - if (m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(style)) { - let color2; - const name = m[1]; - const components = m[2]; - switch (name) { - case "rgb": - case "rgba": - if (color2 = /^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components)) { - this.r = Math.min(255, parseInt(color2[1], 10)) / 255; - this.g = Math.min(255, parseInt(color2[2], 10)) / 255; - this.b = Math.min(255, parseInt(color2[3], 10)) / 255; - ColorManagement.toWorkingColorSpace(this, colorSpace); - handleAlpha(color2[4]); - return this; - } - if (color2 = /^\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components)) { - this.r = Math.min(100, parseInt(color2[1], 10)) / 100; - this.g = Math.min(100, parseInt(color2[2], 10)) / 100; - this.b = Math.min(100, parseInt(color2[3], 10)) / 100; - ColorManagement.toWorkingColorSpace(this, colorSpace); - handleAlpha(color2[4]); - return this; - } - break; - case "hsl": - case "hsla": - if (color2 = /^\s*(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components)) { - const h = parseFloat(color2[1]) / 360; - const s = parseInt(color2[2], 10) / 100; - const l = parseInt(color2[3], 10) / 100; - handleAlpha(color2[4]); - return this.setHSL(h, s, l, colorSpace); - } - break; - } - } else if (m = /^\#([A-Fa-f\d]+)$/.exec(style)) { - const hex2 = m[1]; - const size2 = hex2.length; - if (size2 === 3) { - this.r = parseInt(hex2.charAt(0) + hex2.charAt(0), 16) / 255; - this.g = parseInt(hex2.charAt(1) + hex2.charAt(1), 16) / 255; - this.b = parseInt(hex2.charAt(2) + hex2.charAt(2), 16) / 255; - ColorManagement.toWorkingColorSpace(this, colorSpace); - return this; - } else if (size2 === 6) { - this.r = parseInt(hex2.charAt(0) + hex2.charAt(1), 16) / 255; - this.g = parseInt(hex2.charAt(2) + hex2.charAt(3), 16) / 255; - this.b = parseInt(hex2.charAt(4) + hex2.charAt(5), 16) / 255; - ColorManagement.toWorkingColorSpace(this, colorSpace); - return this; - } - } - if (style && style.length > 0) { - return this.setColorName(style, colorSpace); - } - return this; + [SUBSCRIBE_SELF("changePatternEditor")](key, pattern) { + this.$commands.executeCommand("setAttribute", "change pattern", this.$context.selection.packByValue({ + pattern + })); } - setColorName(style, colorSpace = SRGBColorSpace) { - const hex2 = _colorKeywords[style.toLowerCase()]; - if (hex2 !== void 0) { - this.setHex(hex2, colorSpace); - } else { - console.warn("THREE.Color: Unknown color " + style); - } - return this; + get editableProperty() { + return "pattern"; } - clone() { - return new this.constructor(this.r, this.g, this.b); + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow")]() { + this.refresh(); } - copy(color2) { - this.r = color2.r; - this.g = color2.g; - this.b = color2.b; - return this; + [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(1e3)]() { + this.load("$patternSelect"); } - copySRGBToLinear(color2) { - this.r = SRGBToLinear(color2.r); - this.g = SRGBToLinear(color2.g); - this.b = SRGBToLinear(color2.b); - return this; +} +var PatternSizeEditor$1 = ""; +class PatternSizeEditor extends EditorElement { + initState() { + return { + index: this.props.index, + x: Length.parse(this.props.x), + y: Length.parse(this.props.y), + width: Length.parse(this.props.width), + height: Length.parse(this.props.height), + lineWidth: Length.parse(this.props.lineWidth), + lineHeight: Length.parse(this.props.lineHeight), + backColor: this.props.backColor, + foreColor: this.props.foreColor, + blendMode: this.props.blendMode, + type: this.props.type + }; } - copyLinearToSRGB(color2) { - this.r = LinearToSRGB(color2.r); - this.g = LinearToSRGB(color2.g); - this.b = LinearToSRGB(color2.b); - return this; + updateData(opt = {}) { + this.setState(opt, false); + this.modifyValue(opt); } - convertSRGBToLinear() { - this.copySRGBToLinear(this); - return this; + modifyValue(value) { + this.parent.trigger(this.props.onchange, this.props.key, value, this.state.index); } - convertLinearToSRGB() { - this.copyLinearToSRGB(this); - return this; + setValue(obj2) { + this.setState(__spreadValues({}, obj2)); } - getHex(colorSpace = SRGBColorSpace) { - ColorManagement.fromWorkingColorSpace(toComponents(this, _rgb), colorSpace); - return clamp(_rgb.r * 255, 0, 255) << 16 ^ clamp(_rgb.g * 255, 0, 255) << 8 ^ clamp(_rgb.b * 255, 0, 255) << 0; - } - getHexString(colorSpace = SRGBColorSpace) { - return ("000000" + this.getHex(colorSpace).toString(16)).slice(-6); - } - getHSL(target, colorSpace = LinearSRGBColorSpace) { - ColorManagement.fromWorkingColorSpace(toComponents(this, _rgb), colorSpace); - const r = _rgb.r, g = _rgb.g, b = _rgb.b; - const max = Math.max(r, g, b); - const min = Math.min(r, g, b); - let hue, saturation; - const lightness = (min + max) / 2; - if (min === max) { - hue = 0; - saturation = 0; - } else { - const delta = max - min; - saturation = lightness <= 0.5 ? delta / (max + min) : delta / (2 - max - min); - switch (max) { - case r: - hue = (g - b) / delta + (g < b ? 6 : 0); - break; - case g: - hue = (b - r) / delta + 2; - break; - case b: - hue = (r - g) / delta + 4; - break; - } - hue /= 6; + [BIND("$miniView")]() { + const { + type, + x, + y, + width: width2, + height: height2, + lineWidth, + lineHeight, + backColor, + foreColor, + blendMode + } = this.state; + let obj2 = { + type, + x, + y, + width: width2, + height: height2, + lineWidth, + lineHeight, + backColor, + foreColor, + blendMode + }; + if (this.state.width > 80) { + obj2.width = 80; + obj2.x = obj2.x.value / this.state.width / 80; } - target.h = hue; - target.s = saturation; - target.l = lightness; - return target; - } - getRGB(target, colorSpace = LinearSRGBColorSpace) { - ColorManagement.fromWorkingColorSpace(toComponents(this, _rgb), colorSpace); - target.r = _rgb.r; - target.g = _rgb.g; - target.b = _rgb.b; - return target; - } - getStyle(colorSpace = SRGBColorSpace) { - ColorManagement.fromWorkingColorSpace(toComponents(this, _rgb), colorSpace); - if (colorSpace !== SRGBColorSpace) { - return `color(${colorSpace} ${_rgb.r} ${_rgb.g} ${_rgb.b})`; + if (this.state.height > 80) { + obj2.height = 80; + obj2.y = this.state.y.value / this.state.height / 80; } - return `rgb(${_rgb.r * 255 | 0},${_rgb.g * 255 | 0},${_rgb.b * 255 | 0})`; - } - offsetHSL(h, s, l) { - this.getHSL(_hslA); - _hslA.h += h; - _hslA.s += s; - _hslA.l += l; - this.setHSL(_hslA.h, _hslA.s, _hslA.l); - return this; + const pattern = Pattern.parse(obj2); + return { + cssText: pattern.toCSS() + }; } - add(color2) { - this.r += color2.r; - this.g += color2.g; - this.b += color2.b; - return this; + template() { + return ` +
+
+
+
+
+
+
+ `; } - addColors(color1, color2) { - this.r = color1.r + color2.r; - this.g = color1.g + color2.g; - this.b = color1.b + color2.b; - return this; + [CLICK("$preview")]() { + this.viewBackgroundPositionPopup(); } - addScalar(s) { - this.r += s; - this.g += s; - this.b += s; - return this; + viewBackgroundPositionPopup() { + const layoutElement = this.$config.get("editor.layout.elements"); + const bodyRect = layoutElement.$bodyPanel.rect(); + const rect2 = this.$el.rect(); + const newRect = { + left: bodyRect.left + bodyRect.width - 240, + top: rect2.top, + width: 240, + height: 300 + }; + this.emit("showPatternInfoPopup", { + changeEvent: (pattern) => { + this.updateData(__spreadValues({}, pattern)); + }, + data: this.state, + instance: this + }, newRect); } - sub(color2) { - this.r = Math.max(0, this.r - color2.r); - this.g = Math.max(0, this.g - color2.g); - this.b = Math.max(0, this.b - color2.b); - return this; +} +function patternAsset(editor) { + editor.registerElement({ + PatternEditor, + PatternSizeEditor, + PatternAssetsProperty + }); + editor.registerUI("inspector.tab.style", { + PatternProperty + }); + editor.registerUI("popup", { + PatternInfoPopup + }); +} +var PositionProperty$1 = ""; +const DEFAULT_SIZE = 0; +class PositionProperty extends BaseProperty { + getTitle() { + return this.$i18n("position.property.title"); } - multiply(color2) { - this.r *= color2.r; - this.g *= color2.g; - this.b *= color2.b; - return this; + afterRender() { + this.show(); } - multiplyScalar(s) { - this.r *= s; - this.g *= s; - this.b *= s; - return this; + [SUBSCRIBE(REFRESH_SELECTION)]() { + this.refreshShowIsNot(["project"]); } - lerp(color2, alpha2) { - this.r += (color2.r - this.r) * alpha2; - this.g += (color2.g - this.g) * alpha2; - this.b += (color2.b - this.b) * alpha2; - return this; + checkChangedValue() { + var current = this.$context.selection.current; + if (!current) + return false; + return current.hasChangedField("x", "y", "right", "bottom", "width", "height", "angle", "transform", "opacity", "resizingVertical", "resizingHorizontal", "constraints-horizontal", "constriants-vertical"); } - lerpColors(color1, color2, alpha2) { - this.r = color1.r + (color2.r - color1.r) * alpha2; - this.g = color1.g + (color2.g - color1.g) * alpha2; - this.b = color1.b + (color2.b - color1.b) * alpha2; - return this; + [SUBSCRIBE(UPDATE_CANVAS) + IF("checkChangedValue") + THROTTLE(10)]() { + var current = this.$context.selection.current; + if (!current) + return ""; + this.children.$x.setValue(round(current.offsetX || DEFAULT_SIZE, 100)); + this.children.$y.setValue(round(current.offsetY || DEFAULT_SIZE, 100)); + this.children.$width.setValue(round(current.width || DEFAULT_SIZE, 100)); + this.children.$height.setValue(round(current.height || DEFAULT_SIZE, 100)); + this.children.$opacity.setValue(current.opacity || "1"); + this.children.$rotate.setValue(Length.deg(current.angle).round(100)); } - lerpHSL(color2, alpha2) { - this.getHSL(_hslA); - color2.getHSL(_hslB); - const h = lerp(_hslA.h, _hslB.h, alpha2); - const s = lerp(_hslA.s, _hslB.s, alpha2); - const l = lerp(_hslA.l, _hslB.l, alpha2); - this.setHSL(h, s, l); - return this; + isHideHeader() { + return true; } - equals(c2) { - return c2.r === this.r && c2.g === this.g && c2.b === this.b; + getBodyClassName() { + return "no-padding"; } - fromArray(array, offset = 0) { - this.r = array[offset]; - this.g = array[offset + 1]; - this.b = array[offset + 2]; - return this; + getBody() { + return ` +
+
+ ${createComponent("NumberInputEditor", { + ref: "$x", + compact: true, + label: "X", + key: "x", + min: -1e5, + max: 1e5, + trigger: "enter", + onchange: "changRangeEditor" + })} + ${createComponent("NumberInputEditor", { + ref: "$y", + compact: true, + trigger: "enter", + label: "Y", + key: "y", + min: -1e4, + max: 1e4, + onchange: "changRangeEditor" + })} +
+
+ ${createComponent("NumberInputEditor", { + ref: "$width", + compact: true, + trigger: "enter", + label: "W", + key: "width", + min: 0, + max: 3e3, + onchange: "changRangeEditor" + })} + ${createComponent("NumberInputEditor", { + ref: "$height", + compact: true, + trigger: "enter", + label: "H", + key: "height", + min: 0, + max: 3e3, + onchange: "changRangeEditor" + })} +
+
+ ${createComponent("InputRangeEditor", { + ref: "$rotate", + key: "rotateZ", + compact: true, + label: "rotate_left", + min: -360, + max: 360, + step: 1, + units: ["deg"], + onchange: "changeRotate" + })} + ${createComponent("NumberInputEditor", { + ref: "$opacity", + key: "opacity", + compact: true, + label: "opacity", + min: 0, + max: 1, + step: 0.01, + onchange: "changeSelect" + })} +
+
+ `; } - toArray(array = [], offset = 0) { - array[offset] = this.r; - array[offset + 1] = this.g; - array[offset + 2] = this.b; - return array; - } - fromBufferAttribute(attribute, index2) { - this.r = attribute.getX(index2); - this.g = attribute.getY(index2); - this.b = attribute.getZ(index2); - if (attribute.normalized === true) { - this.r /= 255; - this.g /= 255; - this.b /= 255; + refresh() { + const current = this.$context.selection.current; + if (current) { + this.children.$x.setValue(round(current.offsetX || DEFAULT_SIZE, 100)); + this.children.$y.setValue(round(current.offsetY || DEFAULT_SIZE, 100)); + this.children.$width.setValue(round(current.width || DEFAULT_SIZE, 100)); + this.children.$height.setValue(round(current.height || DEFAULT_SIZE, 100)); + this.children.$opacity.setValue(current.opacity || "1"); + this.children.$rotate.setValue(Length.deg(current.angle)); } - return this; } - toJSON() { - return this.getHex(); - } -} -Color.NAMES = _colorKeywords; -Color.prototype.isColor = true; -Color.prototype.r = 1; -Color.prototype.g = 1; -Color.prototype.b = 1; -let _canvas; -class ImageUtils { - static getDataURL(image2) { - if (/^data:/i.test(image2.src)) { - return image2.src; - } - if (typeof HTMLCanvasElement == "undefined") { - return image2.src; - } - let canvas; - if (image2 instanceof HTMLCanvasElement) { - canvas = image2; - } else { - if (_canvas === void 0) - _canvas = createElementNS("canvas"); - _canvas.width = image2.width; - _canvas.height = image2.height; - const context = _canvas.getContext("2d"); - if (image2 instanceof ImageData) { - context.putImageData(image2, 0, 0); - } else { - context.drawImage(image2, 0, 0, image2.width, image2.height); - } - canvas = _canvas; - } - if (canvas.width > 2048 || canvas.height > 2048) { - console.warn("THREE.ImageUtils.getDataURL: Image converted to jpg for performance reasons", image2); - return canvas.toDataURL("image/jpeg", 0.6); - } else { - return canvas.toDataURL("image/png"); - } - } - static sRGBToLinear(image2) { - if (typeof HTMLImageElement !== "undefined" && image2 instanceof HTMLImageElement || typeof HTMLCanvasElement !== "undefined" && image2 instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && image2 instanceof ImageBitmap) { - const canvas = createElementNS("canvas"); - canvas.width = image2.width; - canvas.height = image2.height; - const context = canvas.getContext("2d"); - context.drawImage(image2, 0, 0, image2.width, image2.height); - const imageData = context.getImageData(0, 0, image2.width, image2.height); - const data = imageData.data; - for (let i = 0; i < data.length; i++) { - data[i] = SRGBToLinear(data[i] / 255) * 255; - } - context.putImageData(imageData, 0, 0); - return canvas; - } else if (image2.data) { - const data = image2.data.slice(0); - for (let i = 0; i < data.length; i++) { - if (data instanceof Uint8Array || data instanceof Uint8ClampedArray) { - data[i] = Math.floor(SRGBToLinear(data[i] / 255) * 255); - } else { - data[i] = SRGBToLinear(data[i]); - } - } - return { - data, - width: image2.width, - height: image2.height - }; - } else { - console.warn("THREE.ImageUtils.sRGBToLinear(): Unsupported image type. No color space conversion applied."); - return image2; - } + [CLICK("$positionItem button[data-command]")](e) { + const command = e.$dt.data("command"); + console.log(command); } -} -class Source { - constructor(data = null) { - this.uuid = generateUUID(); - this.data = data; - this.version = 0; + [SUBSCRIBE_SELF("changRangeEditor")](key, value) { + this.$commands.executeCommand("setAttribute", "change position or size", this.$context.selection.packByValue({ + [key]: value + })); } - set needsUpdate(value) { - if (value === true) - this.version++; + [SUBSCRIBE_SELF("changeRotate")](key, rotate2) { + this.$commands.executeCommand("setAttribute", "change rotate", this.$context.selection.packByValue({ + angle: rotate2.value + })); } - toJSON(meta) { - const isRootObject = meta === void 0 || typeof meta === "string"; - if (!isRootObject && meta.images[this.uuid] !== void 0) { - return meta.images[this.uuid]; - } - const output = { - uuid: this.uuid, - url: "" - }; - const data = this.data; - if (data !== null) { - let url; - if (Array.isArray(data)) { - url = []; - for (let i = 0, l = data.length; i < l; i++) { - if (data[i].isDataTexture) { - url.push(serializeImage(data[i].image)); - } else { - url.push(serializeImage(data[i])); - } - } - } else { - url = serializeImage(data); - } - output.url = url; - } - if (!isRootObject) { - meta.images[this.uuid] = output; - } - return output; + [SUBSCRIBE_SELF("changeSelect")](key, value) { + this.$commands.executeCommand("setAttribute", `change ${key}`, this.$context.selection.packByValue({ + [key]: value + })); } } -function serializeImage(image2) { - if (typeof HTMLImageElement !== "undefined" && image2 instanceof HTMLImageElement || typeof HTMLCanvasElement !== "undefined" && image2 instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && image2 instanceof ImageBitmap) { - return ImageUtils.getDataURL(image2); - } else { - if (image2.data) { - return { - data: Array.prototype.slice.call(image2.data), - width: image2.width, - height: image2.height, - type: image2.data.constructor.name - }; - } else { - console.warn("THREE.Texture: Unable to serialize Texture."); - return {}; - } - } +function position(editor) { + editor.registerUI("inspector.tab.style", { + PositionProperty + }); } -Source.prototype.isSource = true; -let textureId = 0; -class Texture extends EventDispatcher { - constructor(image2 = Texture.DEFAULT_IMAGE, mapping = Texture.DEFAULT_MAPPING, wrapS = ClampToEdgeWrapping, wrapT = ClampToEdgeWrapping, magFilter = LinearFilter, minFilter = LinearMipmapLinearFilter, format2 = RGBAFormat, type = UnsignedByteType, anisotropy = 1, encoding = LinearEncoding) { - super(); - Object.defineProperty(this, "id", { value: textureId++ }); - this.uuid = generateUUID(); - this.name = ""; - this.source = new Source(image2); - this.mipmaps = []; - this.mapping = mapping; - this.wrapS = wrapS; - this.wrapT = wrapT; - this.magFilter = magFilter; - this.minFilter = minFilter; - this.anisotropy = anisotropy; - this.format = format2; - this.internalFormat = null; - this.type = type; - this.offset = new Vector2(0, 0); - this.repeat = new Vector2(1, 1); - this.center = new Vector2(0, 0); - this.rotation = 0; - this.matrixAutoUpdate = true; - this.matrix = new Matrix3(); - this.generateMipmaps = true; - this.premultiplyAlpha = false; - this.flipY = true; - this.unpackAlignment = 4; - this.encoding = encoding; - this.userData = {}; - this.version = 0; - this.onUpdate = null; - this.isRenderTargetTexture = false; - this.needsPMREMUpdate = false; +var ProjectProperty$1 = ""; +class ProjectProperty extends BaseProperty { + getTitle() { + return this.$i18n("project.property.title"); + } + getClassName() { + return "full"; } - get image() { - return this.source.data; + getTools() { + return ` + + `; } - set image(value) { - this.source.data = value; + [CLICK("$add")]() { + this.$commands.emit("addProject"); } - updateMatrix() { - this.matrix.setUvTransform(this.offset.x, this.offset.y, this.repeat.x, this.repeat.y, this.rotation, this.center.x, this.center.y); + getBody() { + return ` +
+ `; } - clone() { - return new this.constructor().copy(this); - } - copy(source2) { - this.name = source2.name; - this.source = source2.source; - this.mipmaps = source2.mipmaps.slice(0); - this.mapping = source2.mapping; - this.wrapS = source2.wrapS; - this.wrapT = source2.wrapT; - this.magFilter = source2.magFilter; - this.minFilter = source2.minFilter; - this.anisotropy = source2.anisotropy; - this.format = source2.format; - this.internalFormat = source2.internalFormat; - this.type = source2.type; - this.offset.copy(source2.offset); - this.repeat.copy(source2.repeat); - this.center.copy(source2.center); - this.rotation = source2.rotation; - this.matrixAutoUpdate = source2.matrixAutoUpdate; - this.matrix.copy(source2.matrix); - this.generateMipmaps = source2.generateMipmaps; - this.premultiplyAlpha = source2.premultiplyAlpha; - this.flipY = source2.flipY; - this.unpackAlignment = source2.unpackAlignment; - this.encoding = source2.encoding; - this.userData = JSON.parse(JSON.stringify(source2.userData)); - this.needsUpdate = true; - return this; + [LOAD("$projectList") + DOMDIFF]() { + var _a; + var projects = ((_a = this.$model) == null ? void 0 : _a.projects) || []; + return projects.map((projectId) => { + var selected = projectId === this.$context.selection.currentProject.id ? "selected" : ""; + const project2 = this.$model.get(projectId); + return ` +
+
+ +
+ +
+
+
+ `; + }); } - toJSON(meta) { - const isRootObject = meta === void 0 || typeof meta === "string"; - if (!isRootObject && meta.textures[this.uuid] !== void 0) { - return meta.textures[this.uuid]; - } - const output = { - metadata: { - version: 4.5, - type: "Texture", - generator: "Texture.toJSON" - }, - uuid: this.uuid, - name: this.name, - image: this.source.toJSON(meta).uuid, - mapping: this.mapping, - repeat: [this.repeat.x, this.repeat.y], - offset: [this.offset.x, this.offset.y], - center: [this.center.x, this.center.y], - rotation: this.rotation, - wrap: [this.wrapS, this.wrapT], - format: this.format, - type: this.type, - encoding: this.encoding, - minFilter: this.minFilter, - magFilter: this.magFilter, - anisotropy: this.anisotropy, - flipY: this.flipY, - premultiplyAlpha: this.premultiplyAlpha, - unpackAlignment: this.unpackAlignment - }; - if (JSON.stringify(this.userData) !== "{}") - output.userData = this.userData; - if (!isRootObject) { - meta.textures[this.uuid] = output; - } - return output; - } - dispose() { - this.dispatchEvent({ type: "dispose" }); - } - transformUv(uv) { - if (this.mapping !== UVMapping) - return uv; - uv.applyMatrix3(this.matrix); - if (uv.x < 0 || uv.x > 1) { - switch (this.wrapS) { - case RepeatWrapping: - uv.x = uv.x - Math.floor(uv.x); - break; - case ClampToEdgeWrapping: - uv.x = uv.x < 0 ? 0 : 1; - break; - case MirroredRepeatWrapping: - if (Math.abs(Math.floor(uv.x) % 2) === 1) { - uv.x = Math.ceil(uv.x) - uv.x; - } else { - uv.x = uv.x - Math.floor(uv.x); - } - break; - } - } - if (uv.y < 0 || uv.y > 1) { - switch (this.wrapT) { - case RepeatWrapping: - uv.y = uv.y - Math.floor(uv.y); - break; - case ClampToEdgeWrapping: - uv.y = uv.y < 0 ? 0 : 1; - break; - case MirroredRepeatWrapping: - if (Math.abs(Math.floor(uv.y) % 2) === 1) { - uv.y = Math.ceil(uv.y) - uv.y; - } else { - uv.y = uv.y - Math.floor(uv.y); - } - break; + [DOUBLECLICK("$projectList .project-item")](e) { + this.startInputEditing(e.$dt.$("label")); + } + modifyDoneInputEditing(input2) { + this.endInputEditing(input2, (index2, text2) => { + var project2 = this.$editor.projects[index2]; + if (project2) { + project2.reset({ + name: text2 + }); } - } - if (this.flipY) { - uv.y = 1 - uv.y; - } - return uv; + }); } - set needsUpdate(value) { - if (value === true) { - this.version++; - this.source.needsUpdate = true; - } + [KEYDOWN("$projectList .project-item label") + ENTER + PREVENT + STOP](e) { + this.modifyDoneInputEditing(e.$dt); + return false; } -} -Texture.DEFAULT_IMAGE = null; -Texture.DEFAULT_MAPPING = UVMapping; -Texture.prototype.isTexture = true; -class Vector4 { - constructor(x = 0, y = 0, z = 0, w = 1) { - this.x = x; - this.y = y; - this.z = z; - this.w = w; + [FOCUSOUT("$projectList .project-item label") + PREVENT + STOP](e) { + this.modifyDoneInputEditing(e.$dt); } - get width() { - return this.z; + [CLICK("$projectList .project-item label")](e) { + var id = e.$dt.attr("data-id"); + this.commands.executeCommand("refreshSelectionPorject", "change project", id); + this.nextTick(() => { + this.refresh(); + }); } - set width(value) { - this.z = value; + [CLICK("$projectList .project-item .remove")](e) { + var id = e.$dt.attr("data-id"); + this.$commands.executeCommand("removeProject", "remove project", id); + this.nextTick(() => { + this.refresh(); + }); } - get height() { - return this.w; + [SUBSCRIBE("refreshProjectList", "refreshAll")]() { + this.refresh(); } - set height(value) { - this.w = value; +} +function project(editor) { + editor.registerElement({ + ProjectProperty + }); +} +class JSONRenderer { + constructor(editor) { + this.editor = editor; } - set(x, y, z, w) { - this.x = x; - this.y = y; - this.z = z; - this.w = w; - return this; + getDefaultRendererInstance() { + return this.editor.getRendererInstance("json", "rect"); } - setScalar(scalar) { - this.x = scalar; - this.y = scalar; - this.z = scalar; - this.w = scalar; - return this; + getRendererInstance(item) { + return this.editor.getRendererInstance("json", item.itemType) || this.getDefaultRendererInstance() || item; } - setX(x) { - this.x = x; - return this; + async render(item, renderer) { + if (!item) + return; + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return await currentRenderer.render(item, renderer || this); + } } - setY(y) { - this.y = y; - return this; + async renderAll(items, renderer) { + return await Promise.all(items.map(async (it) => { + return await this.render(it, renderer); + })); } - setZ(z) { - this.z = z; - return this; + async getResourceDataURI() { } - setW(w) { - this.w = w; - return this; +} +class ItemRender$1 { + async render(item, renderer) { + return await this.toCloneObject(item, renderer); } - setComponent(index2, value) { - switch (index2) { - case 0: - this.x = value; - break; - case 1: - this.y = value; - break; - case 2: - this.z = value; - break; - case 3: - this.w = value; - break; - default: - throw new Error("index is out of range: " + index2); + async toCloneObject(item, renderer) { + var json = item.attrs("itemType", "name", "elementType", "type", "visible", "lock", "selected"); + if (item.parent && item.parent.isNot("project")) { + json.parentId = item.parentId; } - return this; - } - getComponent(index2) { - switch (index2) { - case 0: - return this.x; - case 1: - return this.y; - case 2: - return this.z; - case 3: - return this.w; - default: - throw new Error("index is out of range: " + index2); + json.referenceId = item.id; + json.newTargetId = uuid(); + let layers2 = []; + for (var i = 0, len2 = item.layers.length; i < len2; i++) { + layers2.push(await renderer.render(item.layers[i], renderer)); } + json.layers = layers2; + return json; } - clone() { - return new this.constructor(this.x, this.y, this.z, this.w); +} +class BaseAssetRender extends ItemRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("svgfilters", "keyframes")); } - copy(v) { - this.x = v.x; - this.y = v.y; - this.z = v.z; - this.w = v.w !== void 0 ? v.w : 1; - return this; +} +class GroupRender extends BaseAssetRender { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("layout", "constraintsHorizontal", "constraintsVertical", "resizingMode", "flexDirection", "flexWrap", "flexFlow", "justifyContent", "alignItems", "alignContent", "order", "flexBasis", "flexGrow", "flexShrink", "gap", "gridTemplateRows", "gridTemplateColumns", "gridTemplateAreas", "gridAutoRows", "gridAutoColumns", "gridAutoFlow", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd", "gridColumnGap", "gridRowGap", "animation", "transition", "paddingTop", "paddingRight", "paddingLeft", "paddingBottom")); } - add(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector4: .add() now only accepts one argument. Use .addVectors( a, b ) instead."); - return this.addVectors(v, w); - } - this.x += v.x; - this.y += v.y; - this.z += v.z; - this.w += v.w; - return this; +} +class MovableRender extends GroupRender { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("x", "y", "right", "bottom", "width", "height", "angle", "transformOrigin")); } - addScalar(s) { - this.x += s; - this.y += s; - this.z += s; - this.w += s; - return this; +} +class DomRender$1 extends MovableRender { + async toCloneObject(item, renderer) { + return __spreadProps(__spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("position", "rootVariable", "variable", "filter", "backdropFilter", "backgroundColor", "backgroundImage", "textClip", "borderRadius", "border", "boxShadow", "textShadow", "clipPath", "color", "fontSize", "lineHeight", "textAlign", "textTransform", "textDecoration", "letterSpacing", "wordSpacing", "textIndent", "perspectiveOrigin", "transformStyle", "perspective", "mixBlendMode", "overflow", "opacity", "animation", "transition")), { + selectors: item.selectors.map((selector2) => selector2.clone()), + svg: item.svg.map((svg) => svg.clone()) + }); } - addVectors(a, b) { - this.x = a.x + b.x; - this.y = a.y + b.y; - this.z = a.z + b.z; - this.w = a.w + b.w; - return this; +} +class ArtBoardRender$2 extends DomRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("name")); } - addScaledVector(v, s) { - this.x += v.x * s; - this.y += v.y * s; - this.z += v.z * s; - this.w += v.w * s; - return this; +} +class LayerRender$1 extends DomRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("tagName")); } - sub(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector4: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."); - return this.subVectors(v, w); - } - this.x -= v.x; - this.y -= v.y; - this.z -= v.z; - this.w -= v.w; - return this; +} +class SVGItemRender$2 extends LayerRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("overflow", "stroke", "stroke-width", "svgfilter", "fill", "fill-rule", "fill-opacity", "stroke-linecap", "stroke-linejoin", "stroke-dashoffset", "stroke-dasharray", "text-anchor")); } - subScalar(s) { - this.x -= s; - this.y -= s; - this.z -= s; - this.w -= s; - return this; +} +class BooleanPathRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("d", "booleanOperation")); } - subVectors(a, b) { - this.x = a.x - b.x; - this.y = a.y - b.y; - this.z = a.z - b.z; - this.w = a.w - b.w; - return this; +} +class CircleRender$2 extends LayerRender$1 { +} +class IFrameRender$1 extends LayerRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("src")); } - multiply(v) { - this.x *= v.x; - this.y *= v.y; - this.z *= v.z; - this.w *= v.w; - return this; +} +class ImageRender$2 extends LayerRender$1 { + async toCloneObject(item, renderer) { + const project2 = item.project; + const image2 = project2.imageKeys[item.src]; + const src = image2.original; + return __spreadProps(__spreadValues({}, await super.toCloneObject(item, renderer)), { + src + }); } - multiplyScalar(scalar) { - this.x *= scalar; - this.y *= scalar; - this.z *= scalar; - this.w *= scalar; - return this; +} +class AssetRender extends ItemRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("colors", "gradients", "svgfilters", "svgimages", "images", "keyframes")); } - applyMatrix4(m) { - const x = this.x, y = this.y, z = this.z, w = this.w; - const e = m.elements; - this.x = e[0] * x + e[4] * y + e[8] * z + e[12] * w; - this.y = e[1] * x + e[5] * y + e[9] * z + e[13] * w; - this.z = e[2] * x + e[6] * y + e[10] * z + e[14] * w; - this.w = e[3] * x + e[7] * y + e[11] * z + e[15] * w; - return this; +} +class TimelineRender extends AssetRender { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("timeline")); } - divideScalar(scalar) { - return this.multiplyScalar(1 / scalar); +} +class ProjectRender$2 extends TimelineRender { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("name", "description", "rootVariable")); } - setAxisAngleFromQuaternion(q) { - this.w = 2 * Math.acos(q.w); - const s = Math.sqrt(1 - q.w * q.w); - if (s < 1e-4) { - this.x = 1; - this.y = 0; - this.z = 0; - } else { - this.x = q.x / s; - this.y = q.y / s; - this.z = q.z / s; - } - return this; +} +class RectRender$2 extends LayerRender$1 { +} +class SplineRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("points", "boundary")); } - setAxisAngleFromRotationMatrix(m) { - let angle, x, y, z; - const epsilon = 0.01, epsilon2 = 0.1, te = m.elements, m11 = te[0], m12 = te[4], m13 = te[8], m21 = te[1], m22 = te[5], m23 = te[9], m31 = te[2], m32 = te[6], m33 = te[10]; - if (Math.abs(m12 - m21) < epsilon && Math.abs(m13 - m31) < epsilon && Math.abs(m23 - m32) < epsilon) { - if (Math.abs(m12 + m21) < epsilon2 && Math.abs(m13 + m31) < epsilon2 && Math.abs(m23 + m32) < epsilon2 && Math.abs(m11 + m22 + m33 - 3) < epsilon2) { - this.set(1, 0, 0, 0); - return this; - } - angle = Math.PI; - const xx = (m11 + 1) / 2; - const yy = (m22 + 1) / 2; - const zz = (m33 + 1) / 2; - const xy2 = (m12 + m21) / 4; - const xz = (m13 + m31) / 4; - const yz = (m23 + m32) / 4; - if (xx > yy && xx > zz) { - if (xx < epsilon) { - x = 0; - y = 0.707106781; - z = 0.707106781; - } else { - x = Math.sqrt(xx); - y = xy2 / x; - z = xz / x; - } - } else if (yy > zz) { - if (yy < epsilon) { - x = 0.707106781; - y = 0; - z = 0.707106781; - } else { - y = Math.sqrt(yy); - x = xy2 / y; - z = yz / y; - } - } else { - if (zz < epsilon) { - x = 0.707106781; - y = 0.707106781; - z = 0; - } else { - z = Math.sqrt(zz); - x = xz / z; - y = yz / z; - } - } - this.set(x, y, z, angle); - return this; - } - let s = Math.sqrt((m32 - m23) * (m32 - m23) + (m13 - m31) * (m13 - m31) + (m21 - m12) * (m21 - m12)); - if (Math.abs(s) < 1e-3) - s = 1; - this.x = (m32 - m23) / s; - this.y = (m13 - m31) / s; - this.z = (m21 - m12) / s; - this.w = Math.acos((m11 + m22 + m33 - 1) / 2); - return this; +} +class SVGPathRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("d")); } - min(v) { - this.x = Math.min(this.x, v.x); - this.y = Math.min(this.y, v.y); - this.z = Math.min(this.z, v.z); - this.w = Math.min(this.w, v.w); - return this; +} +class SVGPolygonRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("count")); } - max(v) { - this.x = Math.max(this.x, v.x); - this.y = Math.max(this.y, v.y); - this.z = Math.max(this.z, v.z); - this.w = Math.max(this.w, v.w); - return this; +} +class SVGStarRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("count", "radius")); } - clamp(min, max) { - this.x = Math.max(min.x, Math.min(max.x, this.x)); - this.y = Math.max(min.y, Math.min(max.y, this.y)); - this.z = Math.max(min.z, Math.min(max.z, this.z)); - this.w = Math.max(min.w, Math.min(max.w, this.w)); - return this; +} +class SVGTextPathRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("totalLength", "d", "text", "textLength", "lengthAdjust", "startOffset")); } - clampScalar(minVal, maxVal) { - this.x = Math.max(minVal, Math.min(maxVal, this.x)); - this.y = Math.max(minVal, Math.min(maxVal, this.y)); - this.z = Math.max(minVal, Math.min(maxVal, this.z)); - this.w = Math.max(minVal, Math.min(maxVal, this.w)); - return this; +} +class SVGTextRender$2 extends SVGItemRender$2 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("totalLength", "text", "textLength", "lengthAdjust", "shape-inside")); } - clampLength(min, max) { - const length2 = this.length(); - return this.divideScalar(length2 || 1).multiplyScalar(Math.max(min, Math.min(max, length2))); +} +class TemplateRender$2 extends LayerRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("engine", "template", "params")); } - floor() { - this.x = Math.floor(this.x); - this.y = Math.floor(this.y); - this.z = Math.floor(this.z); - this.w = Math.floor(this.w); - return this; +} +class TextRender$2 extends LayerRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("content")); } - ceil() { - this.x = Math.ceil(this.x); - this.y = Math.ceil(this.y); - this.z = Math.ceil(this.z); - this.w = Math.ceil(this.w); - return this; +} +class VideoRender$2 extends LayerRender$1 { + async toCloneObject(item, renderer) { + return __spreadValues(__spreadValues({}, await super.toCloneObject(item, renderer)), item.attrs("src")); } - round() { - this.x = Math.round(this.x); - this.y = Math.round(this.y); - this.z = Math.round(this.z); - this.w = Math.round(this.w); - return this; +} +function rendererJson(editor) { + editor.registerRendererType("json", new JSONRenderer(editor)); + editor.registerRenderer("json", "project", new ProjectRender$2()); + editor.registerRenderer("json", "artboard", new ArtBoardRender$2()); + editor.registerRenderer("json", "rect", new RectRender$2()); + editor.registerRenderer("json", "circle", new CircleRender$2()); + editor.registerRenderer("json", "image", new ImageRender$2()); + editor.registerRenderer("json", "template", new TemplateRender$2()); + editor.registerRenderer("json", "iframe", new IFrameRender$1()); + editor.registerRenderer("json", "text", new TextRender$2()); + editor.registerRenderer("json", "video", new VideoRender$2()); + editor.registerRenderer("json", "svg-path", new SVGPathRender$2()); + editor.registerRenderer("json", "boolean-path", new BooleanPathRender$2()); + editor.registerRenderer("json", "polygon", new SVGPolygonRender$2()); + editor.registerRenderer("json", "star", new SVGStarRender$2()); + editor.registerRenderer("json", "spline", new SplineRender$2()); + editor.registerRenderer("json", "svg-text", new SVGTextRender$2()); + editor.registerRenderer("json", "svg-textpath", new SVGTextPathRender$2()); +} +class SampleLayer extends LayerModel { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "sample", + name: "New Sample Layer", + sampleText: "Sample Text 1", + sampleNumber: 1 + }, obj2)); } - roundToZero() { - this.x = this.x < 0 ? Math.ceil(this.x) : Math.floor(this.x); - this.y = this.y < 0 ? Math.ceil(this.y) : Math.floor(this.y); - this.z = this.z < 0 ? Math.ceil(this.z) : Math.floor(this.z); - this.w = this.w < 0 ? Math.ceil(this.w) : Math.floor(this.w); - return this; + get sampleText() { + return this.get("sampleText"); } - negate() { - this.x = -this.x; - this.y = -this.y; - this.z = -this.z; - this.w = -this.w; - return this; + set sampleText(value) { + this.set("sampleText", value); } - dot(v) { - return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w; + get sampleNumber() { + return this.get("sampleNumber"); } - lengthSq() { - return this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w; + set sampleNumber(value) { + this.set("sampleNumber", value); } - length() { - return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("sampleText", "sampleNumber")); } - manhattanLength() { - return Math.abs(this.x) + Math.abs(this.y) + Math.abs(this.z) + Math.abs(this.w); + editable(editablePropertyName) { + switch (editablePropertyName) { + case "sample": + return true; + } + return super.editable(editablePropertyName); } - normalize() { - return this.divideScalar(this.length() || 1); + getDefaultTitle() { + return "Sample Layer"; } - setLength(length2) { - return this.normalize().multiplyScalar(length2); +} +class ItemRender { + constructor(renderer) { + this.renderer = renderer; } - lerp(v, alpha2) { - this.x += (v.x - this.x) * alpha2; - this.y += (v.y - this.y) * alpha2; - this.z += (v.z - this.z) * alpha2; - this.w += (v.w - this.w) * alpha2; - return this; + setRenderer(renderer) { + this.renderer = renderer; } - lerpVectors(v1, v2, alpha2) { - this.x = v1.x + (v2.x - v1.x) * alpha2; - this.y = v1.y + (v2.y - v1.y) * alpha2; - this.z = v1.z + (v2.z - v1.z) * alpha2; - this.w = v1.w + (v2.w - v1.w) * alpha2; - return this; + getInnerId(item, postfix = "") { + return item.id + postfix; } - equals(v) { - return v.x === this.x && v.y === this.y && v.z === this.z && v.w === this.w; + uniqueId(item) { + return this.renderer.id + "-" + item.id; } - fromArray(array, offset = 0) { - this.x = array[offset]; - this.y = array[offset + 1]; - this.z = array[offset + 2]; - this.w = array[offset + 3]; - return this; +} +const Primitive = "SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","); +const DEFAULT_ATTRIBUTES = { + xChannelSelector: true, + yChannelSelector: true +}; +class BaseSVGFilter extends PropertyItem { + static parse(obj2) { + var FilterClass = SVGFilterClassName[obj2.type]; + return new FilterClass(obj2); } - toArray(array = [], offset = 0) { - array[offset] = this.x; - array[offset + 1] = this.y; - array[offset + 2] = this.z; - array[offset + 3] = this.w; - return array; - } - fromBufferAttribute(attribute, index2, offset) { - if (offset !== void 0) { - console.warn("THREE.Vector4: offset has been removed from .fromBufferAttribute()."); - } - this.x = attribute.getX(index2); - this.y = attribute.getY(index2); - this.z = attribute.getZ(index2); - this.w = attribute.getW(index2); - return this; + hasLight() { + return false; } - random() { - this.x = Math.random(); - this.y = Math.random(); - this.z = Math.random(); - this.w = Math.random(); - return this; + isLight() { + return false; } - *[Symbol.iterator]() { - yield this.x; - yield this.y; - yield this.z; - yield this.w; + isSource() { + return false; } -} -Vector4.prototype.isVector4 = true; -class WebGLRenderTarget extends EventDispatcher { - constructor(width2, height2, options2 = {}) { - super(); - this.width = width2; - this.height = height2; - this.depth = 1; - this.scissor = new Vector4(0, 0, width2, height2); - this.scissorTest = false; - this.viewport = new Vector4(0, 0, width2, height2); - const image2 = { width: width2, height: height2, depth: 1 }; - this.texture = new Texture(image2, options2.mapping, options2.wrapS, options2.wrapT, options2.magFilter, options2.minFilter, options2.format, options2.type, options2.anisotropy, options2.encoding); - this.texture.isRenderTargetTexture = true; - this.texture.flipY = false; - this.texture.generateMipmaps = options2.generateMipmaps !== void 0 ? options2.generateMipmaps : false; - this.texture.internalFormat = options2.internalFormat !== void 0 ? options2.internalFormat : null; - this.texture.minFilter = options2.minFilter !== void 0 ? options2.minFilter : LinearFilter; - this.depthBuffer = options2.depthBuffer !== void 0 ? options2.depthBuffer : true; - this.stencilBuffer = options2.stencilBuffer !== void 0 ? options2.stencilBuffer : false; - this.depthTexture = options2.depthTexture !== void 0 ? options2.depthTexture : null; - this.samples = options2.samples !== void 0 ? options2.samples : 0; - } - setSize(width2, height2, depth = 1) { - if (this.width !== width2 || this.height !== height2 || this.depth !== depth) { - this.width = width2; - this.height = height2; - this.depth = depth; - this.texture.image.width = width2; - this.texture.image.height = height2; - this.texture.image.depth = depth; - this.dispose(); - } - this.viewport.set(0, 0, width2, height2); - this.scissor.set(0, 0, width2, height2); + getDefaultObject(obj2 = {}) { + var id = uuidShort(); + return super.getDefaultObject(__spreadValues({ + itemType: "svgfilter", + id, + in: [], + bound: { x: 100, y: 100, targetX: 0, targetY: 0 }, + connected: [] + }, obj2)); } - clone() { - return new this.constructor().copy(this); - } - copy(source2) { - this.width = source2.width; - this.height = source2.height; - this.depth = source2.depth; - this.viewport.copy(source2.viewport); - this.texture = source2.texture.clone(); - this.texture.isRenderTargetTexture = true; - this.texture.image = Object.assign({}, source2.texture.image); - this.depthBuffer = source2.depthBuffer; - this.stencilBuffer = source2.stencilBuffer; - if (source2.depthTexture !== null) - this.depthTexture = source2.depthTexture.clone(); - this.samples = source2.samples; - return this; + getInCount() { + return 0; } - dispose() { - this.dispatchEvent({ type: "dispose" }); - } -} -WebGLRenderTarget.prototype.isWebGLRenderTarget = true; -class DataArrayTexture extends Texture { - constructor(data = null, width2 = 1, height2 = 1, depth = 1) { - super(null); - this.image = { data, width: width2, height: height2, depth }; - this.magFilter = NearestFilter; - this.minFilter = NearestFilter; - this.wrapR = ClampToEdgeWrapping; - this.generateMipmaps = false; - this.flipY = false; - this.unpackAlignment = 1; - } -} -DataArrayTexture.prototype.isDataArrayTexture = true; -class WebGLArrayRenderTarget extends WebGLRenderTarget { - constructor(width2, height2, depth) { - super(width2, height2); - this.depth = depth; - this.texture = new DataArrayTexture(null, width2, height2, depth); - this.texture.isRenderTargetTexture = true; - } -} -WebGLArrayRenderTarget.prototype.isWebGLArrayRenderTarget = true; -class Data3DTexture extends Texture { - constructor(data = null, width2 = 1, height2 = 1, depth = 1) { - super(null); - this.image = { data, width: width2, height: height2, depth }; - this.magFilter = NearestFilter; - this.minFilter = NearestFilter; - this.wrapR = ClampToEdgeWrapping; - this.generateMipmaps = false; - this.flipY = false; - this.unpackAlignment = 1; - } -} -Data3DTexture.prototype.isData3DTexture = true; -class WebGL3DRenderTarget extends WebGLRenderTarget { - constructor(width2, height2, depth) { - super(width2, height2); - this.depth = depth; - this.texture = new Data3DTexture(null, width2, height2, depth); - this.texture.isRenderTargetTexture = true; - } -} -WebGL3DRenderTarget.prototype.isWebGL3DRenderTarget = true; -class WebGLMultipleRenderTargets extends WebGLRenderTarget { - constructor(width2, height2, count, options2 = {}) { - super(width2, height2, options2); - const texture2 = this.texture; - this.texture = []; - for (let i = 0; i < count; i++) { - this.texture[i] = texture2.clone(); - this.texture[i].isRenderTargetTexture = true; - } - } - setSize(width2, height2, depth = 1) { - if (this.width !== width2 || this.height !== height2 || this.depth !== depth) { - this.width = width2; - this.height = height2; - this.depth = depth; - for (let i = 0, il = this.texture.length; i < il; i++) { - this.texture[i].image.width = width2; - this.texture[i].image.height = height2; - this.texture[i].image.depth = depth; - } - this.dispose(); - } - this.viewport.set(0, 0, width2, height2); - this.scissor.set(0, 0, width2, height2); - return this; + setIn(index2, target) { + this.json.in[index2] = { id: target.id, type: target.type }; } - copy(source2) { - this.dispose(); - this.width = source2.width; - this.height = source2.height; - this.depth = source2.depth; - this.viewport.set(0, 0, this.width, this.height); - this.scissor.set(0, 0, this.width, this.height); - this.depthBuffer = source2.depthBuffer; - this.stencilBuffer = source2.stencilBuffer; - this.depthTexture = source2.depthTexture; - this.texture.length = 0; - for (let i = 0, il = source2.texture.length; i < il; i++) { - this.texture[i] = source2.texture[i].clone(); + setConnected(target) { + var f = this.json.connected.filter((c2) => c2.id === target.id); + if (f.length === 0) { + this.json.connected.push({ id: target.id }); } - return this; - } -} -WebGLMultipleRenderTargets.prototype.isWebGLMultipleRenderTargets = true; -class Quaternion { - constructor(x = 0, y = 0, z = 0, w = 1) { - this._x = x; - this._y = y; - this._z = z; - this._w = w; - } - static slerp(qa, qb, qm, t) { - console.warn("THREE.Quaternion: Static .slerp() has been deprecated. Use qm.slerpQuaternions( qa, qb, t ) instead."); - return qm.slerpQuaternions(qa, qb, t); } - static slerpFlat(dst, dstOffset, src0, srcOffset0, src1, srcOffset1, t) { - let x0 = src0[srcOffset0 + 0], y0 = src0[srcOffset0 + 1], z0 = src0[srcOffset0 + 2], w0 = src0[srcOffset0 + 3]; - const x1 = src1[srcOffset1 + 0], y1 = src1[srcOffset1 + 1], z1 = src1[srcOffset1 + 2], w1 = src1[srcOffset1 + 3]; - if (t === 0) { - dst[dstOffset + 0] = x0; - dst[dstOffset + 1] = y0; - dst[dstOffset + 2] = z0; - dst[dstOffset + 3] = w0; - return; + convert(json) { + if (typeof json.in === "string") { + json.in = JSON.parse(json.in); } - if (t === 1) { - dst[dstOffset + 0] = x1; - dst[dstOffset + 1] = y1; - dst[dstOffset + 2] = z1; - dst[dstOffset + 3] = w1; - return; + if (typeof json.bound === "string") { + json.bound = JSON.parse(json.bound); } - if (w0 !== w1 || x0 !== x1 || y0 !== y1 || z0 !== z1) { - let s = 1 - t; - const cos = x0 * x1 + y0 * y1 + z0 * z1 + w0 * w1, dir = cos >= 0 ? 1 : -1, sqrSin = 1 - cos * cos; - if (sqrSin > Number.EPSILON) { - const sin = Math.sqrt(sqrSin), len2 = Math.atan2(sin, cos * dir); - s = Math.sin(s * len2) / sin; - t = Math.sin(t * len2) / sin; - } - const tDir = t * dir; - x0 = x0 * s + x1 * tDir; - y0 = y0 * s + y1 * tDir; - z0 = z0 * s + z1 * tDir; - w0 = w0 * s + w1 * tDir; - if (s === 1 - t) { - const f = 1 / Math.sqrt(x0 * x0 + y0 * y0 + z0 * z0 + w0 * w0); - x0 *= f; - y0 *= f; - z0 *= f; - w0 *= f; - } - } - dst[dstOffset] = x0; - dst[dstOffset + 1] = y0; - dst[dstOffset + 2] = z0; - dst[dstOffset + 3] = w0; - } - static multiplyQuaternionsFlat(dst, dstOffset, src0, srcOffset0, src1, srcOffset1) { - const x0 = src0[srcOffset0]; - const y0 = src0[srcOffset0 + 1]; - const z0 = src0[srcOffset0 + 2]; - const w0 = src0[srcOffset0 + 3]; - const x1 = src1[srcOffset1]; - const y1 = src1[srcOffset1 + 1]; - const z1 = src1[srcOffset1 + 2]; - const w1 = src1[srcOffset1 + 3]; - dst[dstOffset] = x0 * w1 + w0 * x1 + y0 * z1 - z0 * y1; - dst[dstOffset + 1] = y0 * w1 + w0 * y1 + z0 * x1 - x0 * z1; - dst[dstOffset + 2] = z0 * w1 + w0 * z1 + x0 * y1 - y0 * x1; - dst[dstOffset + 3] = w0 * w1 - x0 * x1 - y0 * y1 - z0 * z1; - return dst; - } - get x() { - return this._x; + if (typeof json.connected === "string") { + json.connected = JSON.parse(json.connected); + } + return json; } - set x(value) { - this._x = value; - this._onChangeCallback(); + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("id", "in", "bound", "connected")); } - get y() { - return this._y; + getDefaultAttribute() { + var list2 = []; + if (this.json.connected.length) { + list2.push(`result="${this.json.id}result"`); + } + Object.keys(DEFAULT_ATTRIBUTES).filter((key) => { + return !!this.json[key]; + }).forEach((key) => { + list2.push(`${key}="${this.json[key]}"`); + }); + return list2.join(" ") + " " + this.getSourceInAttribute(); } - set y(value) { - this._y = value; - this._onChangeCallback(); + hasInIndex() { + return false; } - get z() { - return this._z; + getSourceInAttribute(inList) { + return (inList || this.json.in).map((it, index2) => { + if (!it) + return ""; + var indexString = index2 === 0 ? "" : index2 + 1 + ""; + if (!this.hasInIndex()) { + indexString = ""; + } + if (Primitive.includes(it.type)) { + return `in${indexString}="${it.type}"`; + } + return `in${indexString}="${it.id}result"`; + }).join(" "); } - set z(value) { - this._z = value; - this._onChangeCallback(); + toString() { + var { type, value } = this.json; + return ``; } - get w() { - return this._w; +} +class SourceSVGFilter extends BaseSVGFilter { + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + type: "Source" + }, obj2)); } - set w(value) { - this._w = value; - this._onChangeCallback(); + isSource() { + return true; } - set(x, y, z, w) { - this._x = x; - this._y = y; - this._z = z; - this._w = w; - this._onChangeCallback(); - return this; + toString() { + return ""; } - clone() { - return new this.constructor(this._x, this._y, this._z, this._w); - } - copy(quaternion) { - this._x = quaternion.x; - this._y = quaternion.y; - this._z = quaternion.z; - this._w = quaternion.w; - this._onChangeCallback(); - return this; +} +class BackgroundAlphaSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "BackgroundAlpha" + }); } - setFromEuler(euler, update2) { - if (!(euler && euler.isEuler)) { - throw new Error("THREE.Quaternion: .setFromEuler() now expects an Euler rotation rather than a Vector3 and order."); - } - const x = euler._x, y = euler._y, z = euler._z, order = euler._order; - const cos = Math.cos; - const sin = Math.sin; - const c1 = cos(x / 2); - const c2 = cos(y / 2); - const c3 = cos(z / 2); - const s1 = sin(x / 2); - const s2 = sin(y / 2); - const s3 = sin(z / 2); - switch (order) { - case "XYZ": - this._x = s1 * c2 * c3 + c1 * s2 * s3; - this._y = c1 * s2 * c3 - s1 * c2 * s3; - this._z = c1 * c2 * s3 + s1 * s2 * c3; - this._w = c1 * c2 * c3 - s1 * s2 * s3; - break; - case "YXZ": - this._x = s1 * c2 * c3 + c1 * s2 * s3; - this._y = c1 * s2 * c3 - s1 * c2 * s3; - this._z = c1 * c2 * s3 - s1 * s2 * c3; - this._w = c1 * c2 * c3 + s1 * s2 * s3; - break; - case "ZXY": - this._x = s1 * c2 * c3 - c1 * s2 * s3; - this._y = c1 * s2 * c3 + s1 * c2 * s3; - this._z = c1 * c2 * s3 + s1 * s2 * c3; - this._w = c1 * c2 * c3 - s1 * s2 * s3; - break; - case "ZYX": - this._x = s1 * c2 * c3 - c1 * s2 * s3; - this._y = c1 * s2 * c3 + s1 * c2 * s3; - this._z = c1 * c2 * s3 - s1 * s2 * c3; - this._w = c1 * c2 * c3 + s1 * s2 * s3; - break; - case "YZX": - this._x = s1 * c2 * c3 + c1 * s2 * s3; - this._y = c1 * s2 * c3 + s1 * c2 * s3; - this._z = c1 * c2 * s3 - s1 * s2 * c3; - this._w = c1 * c2 * c3 - s1 * s2 * s3; - break; - case "XZY": - this._x = s1 * c2 * c3 - c1 * s2 * s3; - this._y = c1 * s2 * c3 - s1 * c2 * s3; - this._z = c1 * c2 * s3 + s1 * s2 * c3; - this._w = c1 * c2 * c3 + s1 * s2 * s3; - break; - default: - console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: " + order); - } - if (update2 !== false) - this._onChangeCallback(); - return this; +} +class BackgroundImageSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "BackgroundImage" + }); } - setFromAxisAngle(axis, angle) { - const halfAngle = angle / 2, s = Math.sin(halfAngle); - this._x = axis.x * s; - this._y = axis.y * s; - this._z = axis.z * s; - this._w = Math.cos(halfAngle); - this._onChangeCallback(); - return this; +} +class BlendSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Blend", + mode: BlendSVGFilter.spec.mode.defaultValue + }); } - setFromRotationMatrix(m) { - const te = m.elements, m11 = te[0], m12 = te[4], m13 = te[8], m21 = te[1], m22 = te[5], m23 = te[9], m31 = te[2], m32 = te[6], m33 = te[10], trace = m11 + m22 + m33; - if (trace > 0) { - const s = 0.5 / Math.sqrt(trace + 1); - this._w = 0.25 / s; - this._x = (m32 - m23) * s; - this._y = (m13 - m31) * s; - this._z = (m21 - m12) * s; - } else if (m11 > m22 && m11 > m33) { - const s = 2 * Math.sqrt(1 + m11 - m22 - m33); - this._w = (m32 - m23) / s; - this._x = 0.25 * s; - this._y = (m12 + m21) / s; - this._z = (m13 + m31) / s; - } else if (m22 > m33) { - const s = 2 * Math.sqrt(1 + m22 - m11 - m33); - this._w = (m13 - m31) / s; - this._x = (m12 + m21) / s; - this._y = 0.25 * s; - this._z = (m23 + m32) / s; - } else { - const s = 2 * Math.sqrt(1 + m33 - m11 - m22); - this._w = (m21 - m12) / s; - this._x = (m13 + m31) / s; - this._y = (m23 + m32) / s; - this._z = 0.25 * s; - } - this._onChangeCallback(); - return this; + getInCount() { + return 2; } - setFromUnitVectors(vFrom, vTo) { - let r = vFrom.dot(vTo) + 1; - if (r < Number.EPSILON) { - r = 0; - if (Math.abs(vFrom.x) > Math.abs(vFrom.z)) { - this._x = -vFrom.y; - this._y = vFrom.x; - this._z = 0; - this._w = r; - } else { - this._x = 0; - this._y = -vFrom.z; - this._z = vFrom.y; - this._w = r; - } - } else { - this._x = vFrom.y * vTo.z - vFrom.z * vTo.y; - this._y = vFrom.z * vTo.x - vFrom.x * vTo.z; - this._z = vFrom.x * vTo.y - vFrom.y * vTo.x; - this._w = r; - } - return this.normalize(); + toString() { + var { mode } = this.json; + return ``; } - angleTo(q) { - return 2 * Math.acos(Math.abs(clamp(this.dot(q), -1, 1))); + hasInIndex() { + return true; } - rotateTowards(q, step2) { - const angle = this.angleTo(q); - if (angle === 0) - return this; - const t = Math.min(1, step2 / angle); - this.slerp(q, t); - return this; +} +BlendSVGFilter.spec = { + mode: { + title: "mode", + inputType: "blend", + defaultValue: "normal" } - identity() { - return this.set(0, 0, 0, 1); +}; +class ColorMatrixSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "ColorMatrix", + values: ColorMatrixSVGFilter.spec.values.defaultValue + }); } - invert() { - return this.conjugate(); + getInCount() { + return 1; } - conjugate() { - this._x *= -1; - this._y *= -1; - this._z *= -1; - this._onChangeCallback(); - return this; + toString() { + var { values } = this.json; + var valueString = values.join(" "); + return ``; } - dot(v) { - return this._x * v._x + this._y * v._y + this._z * v._z + this._w * v._w; +} +ColorMatrixSVGFilter.spec = { + values: { + title: "values", + inputType: "color-matrix", + column: 5, + defaultValue: [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] } - lengthSq() { - return this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w; +}; +class ComponentTransferSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "ComponentTransfer", + r: ComponentTransferSVGFilter.spec.r.defaultValue, + g: ComponentTransferSVGFilter.spec.g.defaultValue, + b: ComponentTransferSVGFilter.spec.b.defaultValue, + a: ComponentTransferSVGFilter.spec.a.defaultValue + }); } - length() { - return Math.sqrt(this._x * this._x + this._y * this._y + this._z * this._z + this._w * this._w); + getInCount() { + return 1; } - normalize() { - let l = this.length(); - if (l === 0) { - this._x = 0; - this._y = 0; - this._z = 0; - this._w = 1; - } else { - l = 1 / l; - this._x = this._x * l; - this._y = this._y * l; - this._z = this._z * l; - this._w = this._w * l; + parse(value) { + var [type, ...values] = value.split(" "); + if (type === "table" || type === "discrete") { + return { type, tableValues: values.join(" ") }; } - this._onChangeCallback(); - return this; - } - multiply(q, p) { - if (p !== void 0) { - console.warn("THREE.Quaternion: .multiply() now only accepts one argument. Use .multiplyQuaternions( a, b ) instead."); - return this.multiplyQuaternions(q, p); + if (type === "linear") { + var [slop, intercept] = values; + return { type, slop, intercept }; + } else if (type === "gamma") { + var [amplitude, exponent, offset] = values; + return { type, amplitude, exponent, offset }; } - return this.multiplyQuaternions(this, q); - } - premultiply(q) { - return this.multiplyQuaternions(q, this); + return { type }; } - multiplyQuaternions(a, b) { - const qax = a._x, qay = a._y, qaz = a._z, qaw = a._w; - const qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w; - this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby; - this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz; - this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx; - this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz; - this._onChangeCallback(); - return this; + toString() { + var { r, g, b, a } = this.json; + r = this.parse(r); + g = this.parse(g); + b = this.parse(b); + a = this.parse(a); + return ` + ${r && ``} + ${g && ``} + ${b && ``} + ${a && ``} + `; } - slerp(qb, t) { - if (t === 0) - return this; - if (t === 1) - return this.copy(qb); - const x = this._x, y = this._y, z = this._z, w = this._w; - let cosHalfTheta = w * qb._w + x * qb._x + y * qb._y + z * qb._z; - if (cosHalfTheta < 0) { - this._w = -qb._w; - this._x = -qb._x; - this._y = -qb._y; - this._z = -qb._z; - cosHalfTheta = -cosHalfTheta; - } else { - this.copy(qb); - } - if (cosHalfTheta >= 1) { - this._w = w; - this._x = x; - this._y = y; - this._z = z; - return this; - } - const sqrSinHalfTheta = 1 - cosHalfTheta * cosHalfTheta; - if (sqrSinHalfTheta <= Number.EPSILON) { - const s = 1 - t; - this._w = s * w + t * this._w; - this._x = s * x + t * this._x; - this._y = s * y + t * this._y; - this._z = s * z + t * this._z; - this.normalize(); - this._onChangeCallback(); - return this; - } - const sinHalfTheta = Math.sqrt(sqrSinHalfTheta); - const halfTheta = Math.atan2(sinHalfTheta, cosHalfTheta); - const ratioA = Math.sin((1 - t) * halfTheta) / sinHalfTheta, ratioB = Math.sin(t * halfTheta) / sinHalfTheta; - this._w = w * ratioA + this._w * ratioB; - this._x = x * ratioA + this._x * ratioB; - this._y = y * ratioA + this._y * ratioB; - this._z = z * ratioA + this._z * ratioB; - this._onChangeCallback(); - return this; +} +ComponentTransferSVGFilter.spec = { + r: { + title: "R", + inputType: "FuncFilter", + defaultValue: "identity" + }, + g: { + title: "G", + inputType: "FuncFilter", + defaultValue: "identity" + }, + b: { + title: "B", + inputType: "FuncFilter", + defaultValue: "identity" + }, + a: { + title: "A", + inputType: "FuncFilter", + defaultValue: "identity" } - slerpQuaternions(qa, qb, t) { - return this.copy(qa).slerp(qb, t); - } - random() { - const u1 = Math.random(); - const sqrt1u1 = Math.sqrt(1 - u1); - const sqrtu1 = Math.sqrt(u1); - const u2 = 2 * Math.PI * Math.random(); - const u3 = 2 * Math.PI * Math.random(); - return this.set(sqrt1u1 * Math.cos(u2), sqrtu1 * Math.sin(u3), sqrtu1 * Math.cos(u3), sqrt1u1 * Math.sin(u2)); - } - equals(quaternion) { - return quaternion._x === this._x && quaternion._y === this._y && quaternion._z === this._z && quaternion._w === this._w; - } - fromArray(array, offset = 0) { - this._x = array[offset]; - this._y = array[offset + 1]; - this._z = array[offset + 2]; - this._w = array[offset + 3]; - this._onChangeCallback(); - return this; +}; +class CompositeSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Composite", + operator: CompositeSVGFilter.spec.operator.defaultValue, + k1: CompositeSVGFilter.spec.k1.defaultValue, + k2: CompositeSVGFilter.spec.k2.defaultValue, + k3: CompositeSVGFilter.spec.k3.defaultValue, + k4: CompositeSVGFilter.spec.k4.defaultValue + }); } - toArray(array = [], offset = 0) { - array[offset] = this._x; - array[offset + 1] = this._y; - array[offset + 2] = this._z; - array[offset + 3] = this._w; - return array; - } - fromBufferAttribute(attribute, index2) { - this._x = attribute.getX(index2); - this._y = attribute.getY(index2); - this._z = attribute.getZ(index2); - this._w = attribute.getW(index2); - return this; + getInCount() { + return 2; } - _onChange(callback) { - this._onChangeCallback = callback; - return this; + toString() { + var { operator, k1, k2, k3, k4 } = this.json; + var kNumbers = ""; + if (operator === "arithmetic") { + kNumbers = ` k1="${k1}" k2="${k2}" k3="${k3}" k4="${k4}" `; + } + return ``; } - _onChangeCallback() { + hasInIndex() { + return true; } } -Quaternion.prototype.isQuaternion = true; -class Vector3 { - constructor(x = 0, y = 0, z = 0) { - this.x = x; - this.y = y; - this.z = z; +CompositeSVGFilter.spec = { + operator: { + title: "operator", + inputType: "select", + options: "over,in,out,atop,xor,arithmetic", + defaultValue: "over" + }, + k1: { + title: "k1", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) + }, + k2: { + title: "k2", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) + }, + k3: { + title: "k3", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) + }, + k4: { + title: "k4", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) } - set(x, y, z) { - if (z === void 0) - z = this.z; - this.x = x; - this.y = y; - this.z = z; - return this; +}; +class ConvolveMatrixSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "ConvolveMatrix", + kernelMatrix: ConvolveMatrixSVGFilter.spec.kernelMatrix.defaultValue + }); } - setScalar(scalar) { - this.x = scalar; - this.y = scalar; - this.z = scalar; - return this; + getInCount() { + return 1; } - setX(x) { - this.x = x; - return this; + toString() { + var { kernelMatrix } = this.json; + var valueString = kernelMatrix.join(" "); + return ``; } - setY(y) { - this.y = y; - return this; +} +ConvolveMatrixSVGFilter.spec = { + kernelMatrix: { + title: "kernelMatrix", + inputType: "input-array", + column: 3, + defaultValue: [1, 0, 0, 0, 1, 0, 0, 0, 1] } - setZ(z) { - this.z = z; - return this; +}; +class DiffuseLightingSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "DiffuseLighting", + surfaceScale: DiffuseLightingSVGFilter.spec.surfaceScale.defaultValue, + lightingColor: DiffuseLightingSVGFilter.spec.lightingColor.defaultValue, + diffuseConstant: DiffuseLightingSVGFilter.spec.diffuseConstant.defaultValue, + lightInfo: "" + }); } - setComponent(index2, value) { - switch (index2) { - case 0: - this.x = value; - break; - case 1: - this.y = value; - break; - case 2: - this.z = value; - break; - default: - throw new Error("index is out of range: " + index2); - } - return this; + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("surfaceScale", "lightingColor", "diffuseConstant", "lightInfo")); } - getComponent(index2) { - switch (index2) { - case 0: - return this.x; - case 1: - return this.y; - case 2: - return this.z; - default: - throw new Error("index is out of range: " + index2); - } + hasLight() { + return true; } - clone() { - return new this.constructor(this.x, this.y, this.z); + getInCount() { + return 1; } - copy(v) { - this.x = v.x; - this.y = v.y; - this.z = v.z; - return this; + toString() { + var { surfaceScale, diffuseConstant, lightingColor } = this.json; + return ` + ${this.json.lightInfo} + `; } - add(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector3: .add() now only accepts one argument. Use .addVectors( a, b ) instead."); - return this.addVectors(v, w); - } - this.x += v.x; - this.y += v.y; - this.z += v.z; - return this; +} +DiffuseLightingSVGFilter.spec = { + surfaceScale: { + title: "surfaceScale", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + diffuseConstant: { + title: "diffuseConstant", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + lightingColor: { + title: "Lighting Color", + inputType: "color", + defaultValue: "rgba(0, 0, 0, 1)" } - addScalar(s) { - this.x += s; - this.y += s; - this.z += s; - return this; +}; +class DisplacementMapSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "DisplacementMap", + scale: DisplacementMapSVGFilter.spec.scale.defaultValue + }); } - addVectors(a, b) { - this.x = a.x + b.x; - this.y = a.y + b.y; - this.z = a.z + b.z; - return this; + getInCount() { + return 2; } - addScaledVector(v, s) { - this.x += v.x * s; - this.y += v.y * s; - this.z += v.z * s; - return this; + convert(obj2) { + obj2.scale = Length.parse(obj2.scale); + return obj2; } - sub(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector3: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."); - return this.subVectors(v, w); - } - this.x -= v.x; - this.y -= v.y; - this.z -= v.z; - return this; + toString() { + var { scale: scale2 } = this.json; + var scaleOption = scale2.value ? `scale="${scale2}"` : ""; + return ``; } - subScalar(s) { - this.x -= s; - this.y -= s; - this.z -= s; - return this; + hasInIndex() { + return true; } - subVectors(a, b) { - this.x = a.x - b.x; - this.y = a.y - b.y; - this.z = a.z - b.z; - return this; +} +DisplacementMapSVGFilter.spec = { + scale: { + title: "scale", + inputType: "number-range", + min: 0, + max: 5e3, + step: 1, + defaultValue: Length.number(0) } - multiply(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector3: .multiply() now only accepts one argument. Use .multiplyVectors( a, b ) instead."); - return this.multiplyVectors(v, w); - } - this.x *= v.x; - this.y *= v.y; - this.z *= v.z; - return this; +}; +class DistantLightSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "DistantLight", + azimuth: DistantLightSVGFilter.spec.azimuth.defaultValue, + elevation: DistantLightSVGFilter.spec.elevation.defaultValue + }); } - multiplyScalar(scalar) { - this.x *= scalar; - this.y *= scalar; - this.z *= scalar; - return this; + isLight() { + return true; } - multiplyVectors(a, b) { - this.x = a.x * b.x; - this.y = a.y * b.y; - this.z = a.z * b.z; - return this; + toString() { + return ""; } - applyEuler(euler) { - if (!(euler && euler.isEuler)) { - console.error("THREE.Vector3: .applyEuler() now expects an Euler rotation rather than a Vector3 and order."); - } - return this.applyQuaternion(_quaternion$4.setFromEuler(euler)); + toLightString() { + var { azimuth, elevation } = this.json; + return ``; } - applyAxisAngle(axis, angle) { - return this.applyQuaternion(_quaternion$4.setFromAxisAngle(axis, angle)); +} +DistantLightSVGFilter.spec = { + azimuth: { + title: "azimuth", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + elevation: { + title: "elevation", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) } - applyMatrix3(m) { - const x = this.x, y = this.y, z = this.z; - const e = m.elements; - this.x = e[0] * x + e[3] * y + e[6] * z; - this.y = e[1] * x + e[4] * y + e[7] * z; - this.z = e[2] * x + e[5] * y + e[8] * z; - return this; +}; +class DropShadowSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "DropShadow", + dx: DropShadowSVGFilter.spec.dx.defaultValue, + dy: DropShadowSVGFilter.spec.dy.defaultValue, + stdDeviation: DropShadowSVGFilter.spec.stdDeviation.defaultValue, + color: DropShadowSVGFilter.spec.color.defaultValue, + opacity: DropShadowSVGFilter.spec.opacity.defaultValue + }); } - applyNormalMatrix(m) { - return this.applyMatrix3(m).normalize(); + getInCount() { + return 1; } - applyMatrix4(m) { - const x = this.x, y = this.y, z = this.z; - const e = m.elements; - const w = 1 / (e[3] * x + e[7] * y + e[11] * z + e[15]); - this.x = (e[0] * x + e[4] * y + e[8] * z + e[12]) * w; - this.y = (e[1] * x + e[5] * y + e[9] * z + e[13]) * w; - this.z = (e[2] * x + e[6] * y + e[10] * z + e[14]) * w; - return this; + toString() { + var { dx, dy, stdDeviation, color: color2, opacity: opacity2 } = this.json; + return ``; } - applyQuaternion(q) { - const x = this.x, y = this.y, z = this.z; - const qx = q.x, qy = q.y, qz = q.z, qw = q.w; - const ix = qw * x + qy * z - qz * y; - const iy = qw * y + qz * x - qx * z; - const iz = qw * z + qx * y - qy * x; - const iw = -qx * x - qy * y - qz * z; - this.x = ix * qw + iw * -qx + iy * -qz - iz * -qy; - this.y = iy * qw + iw * -qy + iz * -qx - ix * -qz; - this.z = iz * qw + iw * -qz + ix * -qy - iy * -qx; - return this; +} +DropShadowSVGFilter.spec = { + dx: { + title: "dx", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + dy: { + title: "dy", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + stdDeviation: { + title: "stdDeviation", + inputType: "number-range", + min: 0, + max: 1e3, + step: 0.1, + defaultValue: Length.number(0) + }, + opacity: { + title: "opacity", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(1) + }, + color: { + title: "color", + inputType: "color", + defaultValue: "rgba(0, 0, 0, 1)" } - project(camera) { - return this.applyMatrix4(camera.matrixWorldInverse).applyMatrix4(camera.projectionMatrix); +}; +class FillPaintSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "FillPaint" + }); } - unproject(camera) { - return this.applyMatrix4(camera.projectionMatrixInverse).applyMatrix4(camera.matrixWorld); +} +class FloodSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Flood", + x: FloodSVGFilter.spec.x.defaultValue, + y: FloodSVGFilter.spec.y.defaultValue, + width: FloodSVGFilter.spec.width.defaultValue, + height: FloodSVGFilter.spec.height.defaultValue, + color: FloodSVGFilter.spec.color.defaultValue, + opacity: FloodSVGFilter.spec.opacity.defaultValue + }); } - transformDirection(m) { - const x = this.x, y = this.y, z = this.z; - const e = m.elements; - this.x = e[0] * x + e[4] * y + e[8] * z; - this.y = e[1] * x + e[5] * y + e[9] * z; - this.z = e[2] * x + e[6] * y + e[10] * z; - return this.normalize(); + convert(json) { + json.x = Length.parse(json.x); + json.y = Length.parse(json.y); + json.width = Length.parse(json.width); + json.height = Length.parse(json.height); + return json; } - divide(v) { - this.x /= v.x; - this.y /= v.y; - this.z /= v.z; - return this; + toString() { + const { opacity: opacity2, color: color2, x, y, width: width2, height: height2 } = this.json; + return ``; } - divideScalar(scalar) { - return this.multiplyScalar(1 / scalar); +} +FloodSVGFilter.spec = { + x: { + title: "X", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + y: { + title: "Y", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + width: { + title: "width", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + height: { + title: "height", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + opacity: { + title: "opacity", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) + }, + color: { + title: "color", + inputType: "color", + defaultValue: "rgba(0, 0, 0, 1)" } - min(v) { - this.x = Math.min(this.x, v.x); - this.y = Math.min(this.y, v.y); - this.z = Math.min(this.z, v.z); - return this; +}; +class GaussianBlurSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "GaussianBlur", + stdDeviationX: GaussianBlurSVGFilter.spec.stdDeviationX.defaultValue, + stdDeviationY: GaussianBlurSVGFilter.spec.stdDeviationY.defaultValue, + edgeMode: GaussianBlurSVGFilter.spec.edgeMode.defaultValue + }); } - max(v) { - this.x = Math.max(this.x, v.x); - this.y = Math.max(this.y, v.y); - this.z = Math.max(this.z, v.z); - return this; + getInCount() { + return 1; } - clamp(min, max) { - this.x = Math.max(min.x, Math.min(max.x, this.x)); - this.y = Math.max(min.y, Math.min(max.y, this.y)); - this.z = Math.max(min.z, Math.min(max.z, this.z)); - return this; + convert(obj2) { + obj2.stdDeviationX = Length.parse(obj2.stdDeviationX); + obj2.stdDeviationY = Length.parse(obj2.stdDeviationY); + return obj2; } - clampScalar(minVal, maxVal) { - this.x = Math.max(minVal, Math.min(maxVal, this.x)); - this.y = Math.max(minVal, Math.min(maxVal, this.y)); - this.z = Math.max(minVal, Math.min(maxVal, this.z)); - return this; + toString() { + var { stdDeviationX, stdDeviationY, edgeMode } = this.json; + var stdDeviation = `${stdDeviationX} ${stdDeviationY}`; + if (stdDeviationX === stdDeviationY) { + stdDeviation = stdDeviationX; + } + return ``; } - clampLength(min, max) { - const length2 = this.length(); - return this.divideScalar(length2 || 1).multiplyScalar(Math.max(min, Math.min(max, length2))); +} +GaussianBlurSVGFilter.spec = { + stdDeviationX: { + title: "X", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(0) + }, + stdDeviationY: { + title: "Y", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(0) + }, + edgeMode: { + title: "edge", + inputType: "select", + options: "none,duplicate,wrap", + defaultValue: "none" } - floor() { - this.x = Math.floor(this.x); - this.y = Math.floor(this.y); - this.z = Math.floor(this.z); - return this; +}; +class HueRotateSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "HueRotate", + values: HueRotateSVGFilter.spec.values.defaultValue + }); } - ceil() { - this.x = Math.ceil(this.x); - this.y = Math.ceil(this.y); - this.z = Math.ceil(this.z); - return this; + getInCount() { + return 1; } - round() { - this.x = Math.round(this.x); - this.y = Math.round(this.y); - this.z = Math.round(this.z); - return this; + toString() { + var { values } = this.json; + return ``; } - roundToZero() { - this.x = this.x < 0 ? Math.ceil(this.x) : Math.floor(this.x); - this.y = this.y < 0 ? Math.ceil(this.y) : Math.floor(this.y); - this.z = this.z < 0 ? Math.ceil(this.z) : Math.floor(this.z); - return this; +} +HueRotateSVGFilter.spec = { + values: { + title: "values", + inputType: "number-range", + min: 0, + max: 360, + step: 0.1, + defaultValue: Length.number(0) } - negate() { - this.x = -this.x; - this.y = -this.y; - this.z = -this.z; - return this; +}; +class ImageSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Image", + x: ImageSVGFilter.spec.x.defaultValue, + y: ImageSVGFilter.spec.y.defaultValue, + width: ImageSVGFilter.spec.width.defaultValue, + height: ImageSVGFilter.spec.height.defaultValue, + src: ImageSVGFilter.spec.src.defaultValue, + alignment: ImageSVGFilter.spec.alignment.defaultValue, + scaleing: ImageSVGFilter.spec.scaleing.defaultValue + }); } - dot(v) { - return this.x * v.x + this.y * v.y + this.z * v.z; + convert(json) { + json.x = Length.parse(json.x); + json.y = Length.parse(json.y); + json.width = Length.parse(json.width); + json.height = Length.parse(json.height); + return json; } - lengthSq() { - return this.x * this.x + this.y * this.y + this.z * this.z; + toString() { + const { src, x, y, width: width2, height: height2, alignment: alignment2, scaleing } = this.json; + return ``; } - length() { - return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); +} +ImageSVGFilter.spec = { + x: { + title: "X", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + y: { + title: "Y", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + width: { + title: "width", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + height: { + title: "height", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + alignment: { + title: "alignment", + inputType: "select", + options: "xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax", + defaultValue: "xMidYMid" + }, + scaleing: { + title: "scaleing", + inputType: "select", + options: "meet,slice", + defaultValue: "meet" + }, + src: { + title: "Image", + inputType: "ImageSelectEditor", + defaultValue: "" } - manhattanLength() { - return Math.abs(this.x) + Math.abs(this.y) + Math.abs(this.z); +}; +class LuminanceAlphaSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "LuminanceAlpha" + }); } - normalize() { - return this.divideScalar(this.length() || 1); + getInCount() { + return 1; } - setLength(length2) { - return this.normalize().multiplyScalar(length2); + toString() { + return ``; } - lerp(v, alpha2) { - this.x += (v.x - this.x) * alpha2; - this.y += (v.y - this.y) * alpha2; - this.z += (v.z - this.z) * alpha2; - return this; +} +LuminanceAlphaSVGFilter.spec = {}; +class MergeSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Merge" + }); } - lerpVectors(v1, v2, alpha2) { - this.x = v1.x + (v2.x - v1.x) * alpha2; - this.y = v1.y + (v2.y - v1.y) * alpha2; - this.z = v1.z + (v2.z - v1.z) * alpha2; - return this; + getInCount() { + return 3; } - cross(v, w) { - if (w !== void 0) { - console.warn("THREE.Vector3: .cross() now only accepts one argument. Use .crossVectors( a, b ) instead."); - return this.crossVectors(v, w); + getDefaultAttribute() { + var list2 = []; + if (this.json.connected.length) { + list2.push(`result="${this.json.id}result"`); } - return this.crossVectors(this, v); + return list2.join(" "); } - crossVectors(a, b) { - const ax = a.x, ay = a.y, az = a.z; - const bx = b.x, by = b.y, bz = b.z; - this.x = ay * bz - az * by; - this.y = az * bx - ax * bz; - this.z = ax * by - ay * bx; - return this; + toString() { + var { in: inList } = this.json; + return ` + + ${inList.map((it) => { + return ``; + }).join("")} + `; } - projectOnVector(v) { - const denominator = v.lengthSq(); - if (denominator === 0) - return this.set(0, 0, 0); - const scalar = v.dot(this) / denominator; - return this.copy(v).multiplyScalar(scalar); - } - projectOnPlane(planeNormal) { - _vector$c.copy(this).projectOnVector(planeNormal); - return this.sub(_vector$c); - } - reflect(normal) { - return this.sub(_vector$c.copy(normal).multiplyScalar(2 * this.dot(normal))); - } - angleTo(v) { - const denominator = Math.sqrt(this.lengthSq() * v.lengthSq()); - if (denominator === 0) - return Math.PI / 2; - const theta = this.dot(v) / denominator; - return Math.acos(clamp(theta, -1, 1)); - } - distanceTo(v) { - return Math.sqrt(this.distanceToSquared(v)); - } - distanceToSquared(v) { - const dx = this.x - v.x, dy = this.y - v.y, dz = this.z - v.z; - return dx * dx + dy * dy + dz * dz; - } - manhattanDistanceTo(v) { - return Math.abs(this.x - v.x) + Math.abs(this.y - v.y) + Math.abs(this.z - v.z); - } - setFromSpherical(s) { - return this.setFromSphericalCoords(s.radius, s.phi, s.theta); - } - setFromSphericalCoords(radius, phi, theta) { - const sinPhiRadius = Math.sin(phi) * radius; - this.x = sinPhiRadius * Math.sin(theta); - this.y = Math.cos(phi) * radius; - this.z = sinPhiRadius * Math.cos(theta); - return this; +} +MergeSVGFilter.spec = {}; +class MorphologySVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Morphology", + operator: MorphologySVGFilter.spec.operator.defaultValue, + radius: MorphologySVGFilter.spec.radius.defaultValue + }); } - setFromCylindrical(c2) { - return this.setFromCylindricalCoords(c2.radius, c2.theta, c2.y); + getInCount() { + return 1; } - setFromCylindricalCoords(radius, theta, y) { - this.x = radius * Math.sin(theta); - this.y = y; - this.z = radius * Math.cos(theta); - return this; + toString() { + var { operator, radius } = this.json; + return ``; } - setFromMatrixPosition(m) { - const e = m.elements; - this.x = e[12]; - this.y = e[13]; - this.z = e[14]; - return this; +} +MorphologySVGFilter.spec = { + operator: { + title: "Operator", + inputType: "select", + options: "erode,dilate", + defaultValue: "erode" + }, + radius: { + title: "Radius", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(0) } - setFromMatrixScale(m) { - const sx = this.setFromMatrixColumn(m, 0).length(); - const sy = this.setFromMatrixColumn(m, 1).length(); - const sz = this.setFromMatrixColumn(m, 2).length(); - this.x = sx; - this.y = sy; - this.z = sz; - return this; +}; +class OffsetSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Offset", + dx: OffsetSVGFilter.spec.dx.defaultValue, + dy: OffsetSVGFilter.spec.dy.defaultValue + }); } - setFromMatrixColumn(m, index2) { - return this.fromArray(m.elements, index2 * 4); + getInCount() { + return 1; } - setFromMatrix3Column(m, index2) { - return this.fromArray(m.elements, index2 * 3); + toString() { + var { dx, dy } = this.json; + return ``; } - setFromEuler(e) { - this.x = e._x; - this.y = e._y; - this.z = e._z; - return this; +} +OffsetSVGFilter.spec = { + dx: { + title: "dx", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + dy: { + title: "dy", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) } - equals(v) { - return v.x === this.x && v.y === this.y && v.z === this.z; +}; +class PointLightSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "PointLight", + x: PointLightSVGFilter.spec.x.defaultValue, + y: PointLightSVGFilter.spec.y.defaultValue, + z: PointLightSVGFilter.spec.z.defaultValue + }); } - fromArray(array, offset = 0) { - this.x = array[offset]; - this.y = array[offset + 1]; - this.z = array[offset + 2]; - return this; + isLight() { + return true; } - toArray(array = [], offset = 0) { - array[offset] = this.x; - array[offset + 1] = this.y; - array[offset + 2] = this.z; - return array; + toString() { + return ""; } - fromBufferAttribute(attribute, index2, offset) { - if (offset !== void 0) { - console.warn("THREE.Vector3: offset has been removed from .fromBufferAttribute()."); - } - this.x = attribute.getX(index2); - this.y = attribute.getY(index2); - this.z = attribute.getZ(index2); - return this; + toLightString() { + var { x, y, z } = this.json; + return ``; } - random() { - this.x = Math.random(); - this.y = Math.random(); - this.z = Math.random(); - return this; +} +PointLightSVGFilter.spec = { + x: { + title: "x", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + y: { + title: "y", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + z: { + title: "z", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) } - randomDirection() { - const u = (Math.random() - 0.5) * 2; - const t = Math.random() * Math.PI * 2; - const f = Math.sqrt(1 - u ** 2); - this.x = f * Math.cos(t); - this.y = f * Math.sin(t); - this.z = u; - return this; +}; +class RotaMatrixSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "RotaMatrix", + hueRotate: RotaMatrixSVGFilter.spec.hueRotate.defaultValue + }); + } + convert(json) { + json.hueRotate = Length.parse(json.hueRotate); + return json; } - *[Symbol.iterator]() { - yield this.x; - yield this.y; - yield this.z; + toString() { + var { id, hueRotate } = this.json; + return ` + + + `; } } -Vector3.prototype.isVector3 = true; -const _vector$c = /* @__PURE__ */ new Vector3(); -const _quaternion$4 = /* @__PURE__ */ new Quaternion(); -class Box3 { - constructor(min = new Vector3(Infinity, Infinity, Infinity), max = new Vector3(-Infinity, -Infinity, -Infinity)) { - this.min = min; - this.max = max; +RotaMatrixSVGFilter.spec = { + hueRotate: { + title: "hue-rotate", + inputType: "number-range", + min: 0, + max: 360, + step: 1, + defaultValue: Length.number(0) } - set(min, max) { - this.min.copy(min); - this.max.copy(max); - return this; +}; +class SaturateSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Saturate", + values: SaturateSVGFilter.spec.values.defaultValue + }); } - setFromArray(array) { - let minX = Infinity; - let minY = Infinity; - let minZ = Infinity; - let maxX = -Infinity; - let maxY = -Infinity; - let maxZ = -Infinity; - for (let i = 0, l = array.length; i < l; i += 3) { - const x = array[i]; - const y = array[i + 1]; - const z = array[i + 2]; - if (x < minX) - minX = x; - if (y < minY) - minY = y; - if (z < minZ) - minZ = z; - if (x > maxX) - maxX = x; - if (y > maxY) - maxY = y; - if (z > maxZ) - maxZ = z; - } - this.min.set(minX, minY, minZ); - this.max.set(maxX, maxY, maxZ); - return this; + getInCount() { + return 1; } - setFromBufferAttribute(attribute) { - let minX = Infinity; - let minY = Infinity; - let minZ = Infinity; - let maxX = -Infinity; - let maxY = -Infinity; - let maxZ = -Infinity; - for (let i = 0, l = attribute.count; i < l; i++) { - const x = attribute.getX(i); - const y = attribute.getY(i); - const z = attribute.getZ(i); - if (x < minX) - minX = x; - if (y < minY) - minY = y; - if (z < minZ) - minZ = z; - if (x > maxX) - maxX = x; - if (y > maxY) - maxY = y; - if (z > maxZ) - maxZ = z; - } - this.min.set(minX, minY, minZ); - this.max.set(maxX, maxY, maxZ); - return this; + toString() { + var { values } = this.json; + return ``; } - setFromPoints(points) { - this.makeEmpty(); - for (let i = 0, il = points.length; i < il; i++) { - this.expandByPoint(points[i]); - } - return this; +} +SaturateSVGFilter.spec = { + values: { + title: "values", + inputType: "number-range", + min: -1, + max: 1, + step: 0.01, + defaultValue: Length.number(0) } - setFromCenterAndSize(center2, size2) { - const halfSize = _vector$b.copy(size2).multiplyScalar(0.5); - this.min.copy(center2).sub(halfSize); - this.max.copy(center2).add(halfSize); - return this; +}; +class SourceAlphaSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "SourceAlpha" + }); } - setFromObject(object, precise = false) { - this.makeEmpty(); - return this.expandByObject(object, precise); +} +class SourceGraphicSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "SourceGraphic" + }); } - clone() { - return new this.constructor().copy(this); +} +class SpecularLightingSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "SpecularLighting", + surfaceScale: SpecularLightingSVGFilter.spec.surfaceScale.defaultValue, + lightingColor: SpecularLightingSVGFilter.spec.lightingColor.defaultValue, + specularConstant: SpecularLightingSVGFilter.spec.specularConstant.defaultValue, + specularExponent: SpecularLightingSVGFilter.spec.specularExponent.defaultValue, + lightInfo: "" + }); } - copy(box) { - this.min.copy(box.min); - this.max.copy(box.max); - return this; + toCloneObject() { + return __spreadValues(__spreadValues({}, super.toCloneObject()), this.attrs("surfaceScale", "lightingColor", "specularConstant", "specularExponent", "lightInfo")); } - makeEmpty() { - this.min.x = this.min.y = this.min.z = Infinity; - this.max.x = this.max.y = this.max.z = -Infinity; - return this; + hasLight() { + return true; } - isEmpty() { - return this.max.x < this.min.x || this.max.y < this.min.y || this.max.z < this.min.z; + getInCount() { + return 1; } - getCenter(target) { - return this.isEmpty() ? target.set(0, 0, 0) : target.addVectors(this.min, this.max).multiplyScalar(0.5); + toString() { + var { surfaceScale, specularConstant, specularExponent, lightingColor } = this.json; + return ` + ${this.json.lightInfo} + `; } - getSize(target) { - return this.isEmpty() ? target.set(0, 0, 0) : target.subVectors(this.max, this.min); + getSourceInAttribute() { + return ""; } - expandByPoint(point2) { - this.min.min(point2); - this.max.max(point2); - return this; +} +SpecularLightingSVGFilter.spec = { + surfaceScale: { + title: "surfaceScale", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + specularConstant: { + title: "Constant", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + specularExponent: { + title: "Exponent", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + lightingColor: { + title: "Lighting Color", + inputType: "color", + defaultValue: "rgba(0, 0, 0, 1)" } - expandByVector(vector) { - this.min.sub(vector); - this.max.add(vector); - return this; +}; +class SpotLightSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "SpotLight", + x: SpotLightSVGFilter.spec.x.defaultValue, + y: SpotLightSVGFilter.spec.x.defaultValue, + z: SpotLightSVGFilter.spec.x.defaultValue, + pointsAtX: SpotLightSVGFilter.spec.pointsAtX.defaultValue, + pointsAtY: SpotLightSVGFilter.spec.pointsAtY.defaultValue, + pointsAtZ: SpotLightSVGFilter.spec.pointsAtZ.defaultValue, + specularExponent: SpotLightSVGFilter.spec.specularExponent.defaultValue, + limitingConeAngle: SpotLightSVGFilter.spec.limitingConeAngle.defaultValue + }); } - expandByScalar(scalar) { - this.min.addScalar(-scalar); - this.max.addScalar(scalar); - return this; + isLight() { + return true; } - expandByObject(object, precise = false) { - object.updateWorldMatrix(false, false); - const geometry = object.geometry; - if (geometry !== void 0) { - if (precise && geometry.attributes != void 0 && geometry.attributes.position !== void 0) { - const position2 = geometry.attributes.position; - for (let i = 0, l = position2.count; i < l; i++) { - _vector$b.fromBufferAttribute(position2, i).applyMatrix4(object.matrixWorld); - this.expandByPoint(_vector$b); - } - } else { - if (geometry.boundingBox === null) { - geometry.computeBoundingBox(); - } - _box$3.copy(geometry.boundingBox); - _box$3.applyMatrix4(object.matrixWorld); - this.union(_box$3); - } - } - const children2 = object.children; - for (let i = 0, l = children2.length; i < l; i++) { - this.expandByObject(children2[i], precise); - } - return this; + toString() { + } + toLightString() { + var { + x, + y, + z, + pointsAtX, + pointsAtY, + pointsAtZ, + specularExponent, + limitingConeAngle + } = this.json; + return ``; } - containsPoint(point2) { - return point2.x < this.min.x || point2.x > this.max.x || point2.y < this.min.y || point2.y > this.max.y || point2.z < this.min.z || point2.z > this.max.z ? false : true; +} +SpotLightSVGFilter.spec = { + x: { + title: "x", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + y: { + title: "y", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + z: { + title: "z", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + pointsAtX: { + title: "pointsAtX", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + pointsAtY: { + title: "pointsAtY", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + pointsAtZ: { + title: "pointsAtZ", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + specularExponent: { + title: "specularExponent", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) + }, + limitingConeAngle: { + title: "limitingConeAngle", + inputType: "number-range", + min: 0, + max: 100, + step: 1, + defaultValue: Length.number(1) } - containsBox(box) { - return this.min.x <= box.min.x && box.max.x <= this.max.x && this.min.y <= box.min.y && box.max.y <= this.max.y && this.min.z <= box.min.z && box.max.z <= this.max.z; +}; +class StrokePaintSVGFilter extends SourceSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "StrokePaint" + }); } - getParameter(point2, target) { - return target.set((point2.x - this.min.x) / (this.max.x - this.min.x), (point2.y - this.min.y) / (this.max.y - this.min.y), (point2.z - this.min.z) / (this.max.z - this.min.z)); +} +class TileSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Tile", + x: TileSVGFilter.spec.x.defaultValue, + y: TileSVGFilter.spec.y.defaultValue, + width: TileSVGFilter.spec.width.defaultValue, + height: TileSVGFilter.spec.height.defaultValue + }); } - intersectsBox(box) { - return box.max.x < this.min.x || box.min.x > this.max.x || box.max.y < this.min.y || box.min.y > this.max.y || box.max.z < this.min.z || box.min.z > this.max.z ? false : true; + getInCount() { + return 1; } - intersectsSphere(sphere) { - this.clampPoint(sphere.center, _vector$b); - return _vector$b.distanceToSquared(sphere.center) <= sphere.radius * sphere.radius; + convert(json) { + json.x = Length.parse(json.x); + json.y = Length.parse(json.y); + json.width = Length.parse(json.width); + json.height = Length.parse(json.height); + return json; } - intersectsPlane(plane) { - let min, max; - if (plane.normal.x > 0) { - min = plane.normal.x * this.min.x; - max = plane.normal.x * this.max.x; - } else { - min = plane.normal.x * this.max.x; - max = plane.normal.x * this.min.x; - } - if (plane.normal.y > 0) { - min += plane.normal.y * this.min.y; - max += plane.normal.y * this.max.y; - } else { - min += plane.normal.y * this.max.y; - max += plane.normal.y * this.min.y; - } - if (plane.normal.z > 0) { - min += plane.normal.z * this.min.z; - max += plane.normal.z * this.max.z; - } else { - min += plane.normal.z * this.max.z; - max += plane.normal.z * this.min.z; - } - return min <= -plane.constant && max >= -plane.constant; + toString() { + const { x, y, width: width2, height: height2 } = this.json; + return ``; } - intersectsTriangle(triangle) { - if (this.isEmpty()) { - return false; - } - this.getCenter(_center); - _extents.subVectors(this.max, _center); - _v0$2.subVectors(triangle.a, _center); - _v1$7.subVectors(triangle.b, _center); - _v2$3.subVectors(triangle.c, _center); - _f0.subVectors(_v1$7, _v0$2); - _f1.subVectors(_v2$3, _v1$7); - _f2.subVectors(_v0$2, _v2$3); - let axes = [ - 0, - -_f0.z, - _f0.y, - 0, - -_f1.z, - _f1.y, - 0, - -_f2.z, - _f2.y, - _f0.z, - 0, - -_f0.x, - _f1.z, - 0, - -_f1.x, - _f2.z, - 0, - -_f2.x, - -_f0.y, - _f0.x, - 0, - -_f1.y, - _f1.x, - 0, - -_f2.y, - _f2.x, - 0 - ]; - if (!satForAxes(axes, _v0$2, _v1$7, _v2$3, _extents)) { - return false; - } - axes = [1, 0, 0, 0, 1, 0, 0, 0, 1]; - if (!satForAxes(axes, _v0$2, _v1$7, _v2$3, _extents)) { - return false; - } - _triangleNormal.crossVectors(_f0, _f1); - axes = [_triangleNormal.x, _triangleNormal.y, _triangleNormal.z]; - return satForAxes(axes, _v0$2, _v1$7, _v2$3, _extents); +} +TileSVGFilter.spec = { + x: { + title: "X", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + y: { + title: "Y", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + width: { + title: "width", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) + }, + height: { + title: "height", + inputType: "number-range", + min: 0, + max: 1e3, + step: 1, + defaultValue: Length.number(0) } - clampPoint(point2, target) { - return target.copy(point2).clamp(this.min, this.max); +}; +class TurbulenceSVGFilter extends BaseSVGFilter { + getDefaultObject() { + return super.getDefaultObject({ + type: "Turbulence", + filterType: TurbulenceSVGFilter.spec.filterType.defaultValue, + baseFrequency: TurbulenceSVGFilter.spec.baseFrequency.defaultValue, + numOctaves: TurbulenceSVGFilter.spec.numOctaves.defaultValue, + seed: TurbulenceSVGFilter.spec.seed.defaultValue + }); } - distanceToPoint(point2) { - const clampedPoint = _vector$b.copy(point2).clamp(this.min, this.max); - return clampedPoint.sub(point2).length(); + convert(obj2) { + obj2.baseFrequency = Length.parse(obj2.baseFrequency); + obj2.numOctaves = Length.parse(obj2.numOctaves); + obj2.seed = Length.parse(obj2.seed); + return obj2; } - getBoundingSphere(target) { - this.getCenter(target.center); - target.radius = this.getSize(_vector$b).length() * 0.5; - return target; + toString() { + var { filterType, baseFrequency, numOctaves, seed } = this.json; + return ``; } - intersect(box) { - this.min.max(box.min); - this.max.min(box.max); - if (this.isEmpty()) - this.makeEmpty(); - return this; +} +TurbulenceSVGFilter.spec = { + filterType: { + title: "Type", + inputType: "select", + options: "fractalNoise,turbulence", + defaultValue: "turbulence" + }, + baseFrequency: { + title: "Frequency", + inputType: "number-range", + min: 0, + max: 1, + step: 0.01, + defaultValue: Length.number(0) + }, + numOctaves: { + title: "Octaves", + inputType: "number-range", + min: 1, + max: 10, + step: 1, + defaultValue: Length.number(1) + }, + seed: { + title: "Seed", + inputType: "number-range", + min: 0, + max: 1e4, + step: 1, + defaultValue: Length.number(0) } - union(box) { - this.min.min(box.min); - this.max.max(box.max); - return this; +}; +const SVG_FILTER_COMMON_ATTRIBUTES = ["result"]; +class SVGFilter extends PropertyItem { + static parse(obj2) { + var FilterClass = SVGFilterClassName[obj2.type]; + return new FilterClass(obj2); } - applyMatrix4(matrix) { - if (this.isEmpty()) - return this; - _points[0].set(this.min.x, this.min.y, this.min.z).applyMatrix4(matrix); - _points[1].set(this.min.x, this.min.y, this.max.z).applyMatrix4(matrix); - _points[2].set(this.min.x, this.max.y, this.min.z).applyMatrix4(matrix); - _points[3].set(this.min.x, this.max.y, this.max.z).applyMatrix4(matrix); - _points[4].set(this.max.x, this.min.y, this.min.z).applyMatrix4(matrix); - _points[5].set(this.max.x, this.min.y, this.max.z).applyMatrix4(matrix); - _points[6].set(this.max.x, this.max.y, this.min.z).applyMatrix4(matrix); - _points[7].set(this.max.x, this.max.y, this.max.z).applyMatrix4(matrix); - this.setFromPoints(_points); - return this; + getDefaultObject(obj2 = {}) { + return super.getDefaultObject(__spreadValues({ + itemType: "svgfilter", + result: "" + }, obj2)); } - translate(offset) { - this.min.add(offset); - this.max.add(offset); - return this; + getDefaultAttribute() { + return SVG_FILTER_COMMON_ATTRIBUTES.map((key) => { + return `${key}="${this.json[key]}"`; + }).join(" "); } - equals(box) { - return box.min.equals(this.min) && box.max.equals(this.max); + toString() { + var { type, value } = this.json; + return ``; } } -Box3.prototype.isBox3 = true; -const _points = [ - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3(), - /* @__PURE__ */ new Vector3() +const SVGFilterClassName = { + Image: ImageSVGFilter, + Tile: TileSVGFilter, + Saturate: SaturateSVGFilter, + HueRotate: HueRotateSVGFilter, + LuminanceAlpha: LuminanceAlphaSVGFilter, + DropShadow: DropShadowSVGFilter, + SourceGraphic: SourceGraphicSVGFilter, + SourceAlpha: SourceAlphaSVGFilter, + BackgroundImage: BackgroundImageSVGFilter, + BackgroundAlpha: BackgroundAlphaSVGFilter, + FillPaint: FillPaintSVGFilter, + StrokePaint: StrokePaintSVGFilter, + ComponentTransfer: ComponentTransferSVGFilter, + DistantLight: DistantLightSVGFilter, + PointLight: PointLightSVGFilter, + SpotLight: SpotLightSVGFilter, + DiffuseLighting: DiffuseLightingSVGFilter, + SpecularLighting: SpecularLightingSVGFilter, + Blend: BlendSVGFilter, + Offset: OffsetSVGFilter, + RotaMatrix: RotaMatrixSVGFilter, + GaussianBlur: GaussianBlurSVGFilter, + Flood: FloodSVGFilter, + Merge: MergeSVGFilter, + Composite: CompositeSVGFilter, + Morphology: MorphologySVGFilter, + Turbulence: TurbulenceSVGFilter, + DisplacementMap: DisplacementMapSVGFilter, + ColorMatrix: ColorMatrixSVGFilter, + ConvolveMatrix: ConvolveMatrixSVGFilter +}; +const SVGFilterSpecList = { + Image: ImageSVGFilter.spec, + Tile: TileSVGFilter.spec, + DropShadow: DropShadowSVGFilter.spec, + Saturate: SaturateSVGFilter.spec, + HueRotate: HueRotateSVGFilter.spec, + LuminanceAlpha: LuminanceAlphaSVGFilter.spec, + Offset: OffsetSVGFilter.spec, + ComponentTransfer: ComponentTransferSVGFilter.spec, + SpecularLighting: SpecularLightingSVGFilter.spec, + SpotLight: SpotLightSVGFilter.spec, + PointLight: PointLightSVGFilter.spec, + DistantLight: DistantLightSVGFilter.spec, + DiffuseLighting: DiffuseLightingSVGFilter.spec, + Blend: BlendSVGFilter.spec, + RotaMatrix: RotaMatrixSVGFilter.spec, + Merge: MergeSVGFilter.spec, + GaussianBlur: GaussianBlurSVGFilter.spec, + Flood: FloodSVGFilter.spec, + Morphology: MorphologySVGFilter.spec, + Composite: CompositeSVGFilter.spec, + Turbulence: TurbulenceSVGFilter.spec, + DisplacementMap: DisplacementMapSVGFilter.spec, + ColorMatrix: ColorMatrixSVGFilter.spec, + ConvolveMatrix: ConvolveMatrixSVGFilter.spec +}; +const WEBKIT_ATTRIBUTE_FOR_CSS = [ + "text-fill-color", + "text-stroke-color", + "text-stroke-width", + "background-clip" ]; -const _vector$b = /* @__PURE__ */ new Vector3(); -const _box$3 = /* @__PURE__ */ new Box3(); -const _v0$2 = /* @__PURE__ */ new Vector3(); -const _v1$7 = /* @__PURE__ */ new Vector3(); -const _v2$3 = /* @__PURE__ */ new Vector3(); -const _f0 = /* @__PURE__ */ new Vector3(); -const _f1 = /* @__PURE__ */ new Vector3(); -const _f2 = /* @__PURE__ */ new Vector3(); -const _center = /* @__PURE__ */ new Vector3(); -const _extents = /* @__PURE__ */ new Vector3(); -const _triangleNormal = /* @__PURE__ */ new Vector3(); -const _testAxis = /* @__PURE__ */ new Vector3(); -function satForAxes(axes, v0, v1, v2, extents) { - for (let i = 0, j = axes.length - 3; i <= j; i += 3) { - _testAxis.fromArray(axes, i); - const r = extents.x * Math.abs(_testAxis.x) + extents.y * Math.abs(_testAxis.y) + extents.z * Math.abs(_testAxis.z); - const p0 = v0.dot(_testAxis); - const p1 = v1.dot(_testAxis); - const p2 = v2.dot(_testAxis); - if (Math.max(-Math.max(p0, p1, p2), Math.min(p0, p1, p2)) > r) { - return false; +function valueFilter(obj2) { + const result = {}; + Object.keys(obj2).forEach((key) => { + if (isNotUndefined(obj2[key])) { + result[key] = obj2[key]; } - } - return true; + }); + return result; } -const _box$2 = /* @__PURE__ */ new Box3(); -const _v1$6 = /* @__PURE__ */ new Vector3(); -const _toFarthestPoint = /* @__PURE__ */ new Vector3(); -const _toPoint = /* @__PURE__ */ new Vector3(); -class Sphere { - constructor(center2 = new Vector3(), radius = -1) { - this.center = center2; - this.radius = radius; - } - set(center2, radius) { - this.center.copy(center2); - this.radius = radius; - return this; +class DomRender extends ItemRender { + toStringPropertyCSS(item, field) { + return STRING_TO_CSS(item.get(field)); } - setFromPoints(points, optionalCenter) { - const center2 = this.center; - if (optionalCenter !== void 0) { - center2.copy(optionalCenter); - } else { - _box$2.setFromPoints(points).getCenter(center2); - } - let maxRadiusSq = 0; - for (let i = 0, il = points.length; i < il; i++) { - maxRadiusSq = Math.max(maxRadiusSq, center2.distanceToSquared(points[i])); + toBackgroundImageCSS(item) { + if (!item.cacheBackgroundImage) { + item.setBackgroundImageCache(); } - this.radius = Math.sqrt(maxRadiusSq); - return this; - } - copy(sphere) { - this.center.copy(sphere.center); - this.radius = sphere.radius; - return this; - } - isEmpty() { - return this.radius < 0; + return item.cacheBackgroundImage; } - makeEmpty() { - this.center.set(0, 0, 0); - this.radius = -1; - return this; - } - containsPoint(point2) { - return point2.distanceToSquared(this.center) <= this.radius * this.radius; - } - distanceToPoint(point2) { - return point2.distanceTo(this.center) - this.radius; - } - intersectsSphere(sphere) { - const radiusSum = this.radius + sphere.radius; - return sphere.center.distanceToSquared(this.center) <= radiusSum * radiusSum; - } - intersectsBox(box) { - return box.intersectsSphere(this); - } - intersectsPlane(plane) { - return Math.abs(plane.distanceToPoint(this.center)) <= this.radius; - } - clampPoint(point2, target) { - const deltaLengthSq = this.center.distanceToSquared(point2); - target.copy(point2); - if (deltaLengthSq > this.radius * this.radius) { - target.sub(this.center).normalize(); - target.multiplyScalar(this.radius).add(this.center); + toLayoutCSS(item) { + if (item.hasLayout()) { + if (item.isLayout(Layout.FLEX)) { + return this.toFlexLayoutCSS(item); + } else if (item.isLayout(Layout.GRID)) { + return this.toGridLayoutCSS(item); + } } - return target; + return {}; } - getBoundingBox(target) { - if (this.isEmpty()) { - target.makeEmpty(); - return target; + toLayoutItemCSS(item) { + var _a, _b; + var parentLayout = (_a = item.parent) == null ? void 0 : _a["layout"]; + var obj2 = {}; + if (parentLayout === Layout.FLEX) { + obj2 = { + position: "relative", + left: "auto !important", + top: "auto !important" + }; + } else if (parentLayout === Layout.GRID) { + obj2 = { + position: "relative", + left: "auto", + top: "auto" + }; + } else if (parentLayout === Layout.DEFAULT) { + obj2 = this.toDefaultLayoutItemCSS(item); } - target.set(this.center, this.center); - target.expandByScalar(this.radius); - return target; - } - applyMatrix4(matrix) { - this.center.applyMatrix4(matrix); - this.radius = this.radius * matrix.getMaxScaleOnAxis(); - return this; - } - translate(offset) { - this.center.add(offset); - return this; - } - expandByPoint(point2) { - _toPoint.subVectors(point2, this.center); - const lengthSq = _toPoint.lengthSq(); - if (lengthSq > this.radius * this.radius) { - const length2 = Math.sqrt(lengthSq); - const missingRadiusHalf = (length2 - this.radius) * 0.5; - this.center.add(_toPoint.multiplyScalar(missingRadiusHalf / length2)); - this.radius += missingRadiusHalf; + if (parentLayout === Layout.FLEX) { + obj2 = __spreadProps(__spreadValues({}, obj2), { + "flex-basis": item.flexBasis, + "flex-shrink": item.flexShrink + }); + const parentLayoutDirection = (_b = item == null ? void 0 : item.parent) == null ? void 0 : _b.flexDirection; + if (parentLayoutDirection === FlexDirection.ROW && item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { + obj2.width = "auto"; + obj2["flex-grow"] = item.flexGrow || 1; + } else if (parentLayoutDirection === FlexDirection.COLUMN && item.resizingVertical === ResizingMode.FILL_CONTAINER) { + obj2.height = "auto"; + obj2["flex-grow"] = item.flexGrow || 1; + } + } else if (parentLayout === Layout.GRID) { + obj2 = __spreadProps(__spreadValues({}, obj2), { + "grid-column-start": item.gridColumnStart, + "grid-column-end": item.gridColumnEnd, + "grid-row-start": item.gridRowStart, + "grid-row-end": item.gridRowEnd + }); + const columns = Grid.parseStyle(item.parent.gridTemplateColumns); + const rows = Grid.parseStyle(item.parent.gridTemplateRows); + obj2["grid-column-start"] = Math.max(1, Math.min(columns.length, obj2["grid-column-start"] || 1)); + obj2["grid-column-end"] = Math.min(columns.length + 1, obj2["grid-column-end"] || 2); + obj2["grid-row-start"] = Math.max(1, Math.min(rows.length, obj2["grid-row-start"] || 1)); + obj2["grid-row-end"] = Math.min(rows.length + 1, obj2["grid-row-end"] || 2); } - return this; + return obj2; } - union(sphere) { - if (this.center.equals(sphere.center) === true) { - _toFarthestPoint.set(0, 0, 1).multiplyScalar(sphere.radius); - } else { - _toFarthestPoint.subVectors(sphere.center, this.center).normalize().multiplyScalar(sphere.radius); + toDefaultLayoutItemCSS(item) { + var _a; + const obj2 = {}; + if ((_a = item.parent) == null ? void 0 : _a.is("project")) { + return obj2; } - this.expandByPoint(_v1$6.copy(sphere.center).add(_toFarthestPoint)); - this.expandByPoint(_v1$6.copy(sphere.center).sub(_toFarthestPoint)); - return this; - } - equals(sphere) { - return sphere.center.equals(this.center) && sphere.radius === this.radius; - } - clone() { - return new this.constructor().copy(this); - } -} -const _vector$a = /* @__PURE__ */ new Vector3(); -const _segCenter = /* @__PURE__ */ new Vector3(); -const _segDir = /* @__PURE__ */ new Vector3(); -const _diff = /* @__PURE__ */ new Vector3(); -const _edge1 = /* @__PURE__ */ new Vector3(); -const _edge2 = /* @__PURE__ */ new Vector3(); -const _normal$1 = /* @__PURE__ */ new Vector3(); -class Ray { - constructor(origin = new Vector3(), direction2 = new Vector3(0, 0, -1)) { - this.origin = origin; - this.direction = direction2; - } - set(origin, direction2) { - this.origin.copy(origin); - this.direction.copy(direction2); - return this; + const parentWidth = item.parent.screenWidth; + switch (item[ConstraintsDirection.HORIZONTAL]) { + case Constraints.MIN: + obj2.left = Length.px(item.x); + obj2.right = "auto !important"; + break; + case Constraints.MAX: + obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth); + obj2.left = "auto !important"; + break; + case Constraints.STRETCH: + obj2.left = Length.px(item.x); + obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth); + obj2.width = "auto !important"; + break; + case Constraints.CENTER: + obj2.left = Length.px(item.x); + break; + case Constraints.SCALE: + obj2.left = Length.px(item.x).toPercent(parentWidth); + obj2.right = Length.px(parentWidth - item.offsetX - item.screenWidth).toPercent(parentWidth); + obj2.width = "auto !important"; + break; + } + const parentHeight = item.parent.screenHeight; + switch (item[ConstraintsDirection.VERTICAL]) { + case Constraints.MIN: + obj2.top = Length.px(item.y); + obj2.bottom = "auto !important"; + break; + case Constraints.MAX: + obj2.top = "auto !important"; + obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight); + break; + case Constraints.STRETCH: + obj2.top = Length.px(item.y); + obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight); + obj2.height = "auto !important"; + break; + case Constraints.CENTER: + obj2.top = Length.px(item.y); + break; + case Constraints.SCALE: + obj2.top = Length.px(item.y).toPercent(parentHeight); + obj2.bottom = Length.px(parentHeight - item.offsetY - item.screenHeight).toPercent(parentHeight); + obj2.height = "auto !important"; + break; + } + return obj2; } - copy(ray) { - this.origin.copy(ray.origin); - this.direction.copy(ray.direction); - return this; + toFlexLayoutCSS(item) { + if (item.parent.isNot("project")) + ; + return { + display: "flex", + gap: Length.px(item.gap), + "flex-direction": item.flexDirection, + "flex-wrap": item.flexWrap, + "justify-content": item.justifyContent, + "align-items": item.alignItems, + "align-content": item.alignContent + }; } - at(t, target) { - return target.copy(this.direction).multiplyScalar(t).add(this.origin); + toGridLayoutCSS(item) { + return { + display: "grid", + "grid-template-columns": item.gridTemplateColumns, + "grid-template-rows": item.gridTemplateRows, + "grid-template-areas": item.gridTemplateAreas, + "grid-auto-columns": item.gridAutoColumns, + "grid-auto-rows": item.gridAutoRows, + "grid-auto-flow": item.gridAutoFlow, + "grid-column-gap": item.gridColumnGap, + "grid-row-gap": item.gridRowGap + }; } - lookAt(v) { - this.direction.copy(v).sub(this.origin).normalize(); - return this; + toBorderCSS(item) { + const borderCSS = item.computed("border", (border2) => { + const obj2 = __spreadValues({}, STRING_TO_CSS(border2)); + return obj2; + }); + return borderCSS; } - recast(t) { - this.origin.copy(this.at(t, _vector$a)); - return this; + toBoxModelCSS(item) { + let obj2 = {}; + if (item.marginTop) + obj2["margin-top"] = Length.px(item.marginTop); + if (item.marginBottom) + obj2["margin-bottom"] = Length.px(item.marginBottom); + if (item.marginLeft) + obj2["margin-left"] = Length.px(item.marginLeft); + if (item.marginRight) + obj2["margin-right"] = Length.px(item.marginRight); + if (item.paddingTop) + obj2["padding-top"] = Length.px(item.paddingTop); + if (item.paddingBottom) + obj2["padding-bottom"] = Length.px(item.paddingBottom); + if (item.paddingLeft) + obj2["padding-left"] = Length.px(item.paddingLeft); + if (item.paddingRight) + obj2["padding-right"] = Length.px(item.paddingRight); + return obj2; } - closestPointToPoint(point2, target) { - target.subVectors(point2, this.origin); - const directionDistance = target.dot(this.direction); - if (directionDistance < 0) { - return target.copy(this.origin); - } - return target.copy(this.direction).multiplyScalar(directionDistance).add(this.origin); - } - distanceToPoint(point2) { - return Math.sqrt(this.distanceSqToPoint(point2)); - } - distanceSqToPoint(point2) { - const directionDistance = _vector$a.subVectors(point2, this.origin).dot(this.direction); - if (directionDistance < 0) { - return this.origin.distanceToSquared(point2); - } - _vector$a.copy(this.direction).multiplyScalar(directionDistance).add(this.origin); - return _vector$a.distanceToSquared(point2); - } - distanceSqToSegment(v0, v1, optionalPointOnRay, optionalPointOnSegment) { - _segCenter.copy(v0).add(v1).multiplyScalar(0.5); - _segDir.copy(v1).sub(v0).normalize(); - _diff.copy(this.origin).sub(_segCenter); - const segExtent = v0.distanceTo(v1) * 0.5; - const a01 = -this.direction.dot(_segDir); - const b0 = _diff.dot(this.direction); - const b1 = -_diff.dot(_segDir); - const c2 = _diff.lengthSq(); - const det = Math.abs(1 - a01 * a01); - let s0, s1, sqrDist, extDet; - if (det > 0) { - s0 = a01 * b1 - b0; - s1 = a01 * b0 - b1; - extDet = segExtent * det; - if (s0 >= 0) { - if (s1 >= -extDet) { - if (s1 <= extDet) { - const invDet = 1 / det; - s0 *= invDet; - s1 *= invDet; - sqrDist = s0 * (s0 + a01 * s1 + 2 * b0) + s1 * (a01 * s0 + s1 + 2 * b1) + c2; - } else { - s1 = segExtent; - s0 = Math.max(0, -(a01 * s1 + b0)); - sqrDist = -s0 * s0 + s1 * (s1 + 2 * b1) + c2; - } - } else { - s1 = -segExtent; - s0 = Math.max(0, -(a01 * s1 + b0)); - sqrDist = -s0 * s0 + s1 * (s1 + 2 * b1) + c2; + toSizeCSS(item) { + const obj2 = {}; + if (item.isLayout(Layout.FLEX)) { + switch (item.resizingHorizontal) { + case ResizingMode.FIXED: + obj2.width = Length.px(item.screenWidth); + break; + case ResizingMode.HUG_CONTENT: + obj2["min-width"] = Length.px(item.screenWidth); + break; + } + switch (item.resizingVertical) { + case ResizingMode.FIXED: + obj2.height = Length.px(item.screenHeight); + break; + case ResizingMode.HUG_CONTENT: + obj2["min-height"] = Length.px(item.screenHeight); + break; + } + } + if (item.isInDefault()) { + obj2.width = Length.px(item.screenWidth); + obj2.height = Length.px(item.screenHeight); + } + if (item.isInFlex()) { + const direction2 = item.parent.flexDirection; + if (direction2 === FlexDirection.ROW || direction2 === FlexDirection.ROW_REVERSE) { + obj2.width = Length.px(item.screenWidth); + obj2.height = Length.px(item.screenHeight); + if (item.parent["align-items"] === AlignItems.STRETCH) { + obj2.height = "auto"; + } + if (item.resizingVertical === ResizingMode.FILL_CONTAINER) { + obj2.height = "auto"; + obj2["align-self"] = AlignItems.STRETCH; } } else { - if (s1 <= -extDet) { - s0 = Math.max(0, -(-a01 * segExtent + b0)); - s1 = s0 > 0 ? -segExtent : Math.min(Math.max(-segExtent, -b1), segExtent); - sqrDist = -s0 * s0 + s1 * (s1 + 2 * b1) + c2; - } else if (s1 <= extDet) { - s0 = 0; - s1 = Math.min(Math.max(-segExtent, -b1), segExtent); - sqrDist = s1 * (s1 + 2 * b1) + c2; - } else { - s0 = Math.max(0, -(a01 * segExtent + b0)); - s1 = s0 > 0 ? segExtent : Math.min(Math.max(-segExtent, -b1), segExtent); - sqrDist = -s0 * s0 + s1 * (s1 + 2 * b1) + c2; + obj2.width = Length.px(item.screenWidth); + obj2.height = Length.px(item.screenHeight); + if (item.parent["align-items"] === AlignItems.STRETCH) { + obj2.width = "auto"; + } + if (item.resizingHorizontal === ResizingMode.FILL_CONTAINER) { + obj2.width = "auto"; + obj2["align-self"] = AlignItems.STRETCH; } } - } else { - s1 = a01 > 0 ? -segExtent : segExtent; - s0 = Math.max(0, -(a01 * s1 + b0)); - sqrDist = -s0 * s0 + s1 * (s1 + 2 * b1) + c2; } - if (optionalPointOnRay) { - optionalPointOnRay.copy(this.direction).multiplyScalar(s0).add(this.origin); + if (item.isInGrid()) { + obj2.width = "auto"; + obj2.height = "auto"; + } + return obj2; + } + toDefaultCSS(item) { + if (!item.hasCache("toDefaultCSS")) { + item.addCache("toDefaultCSS", { + "box-sizing": "border-box" + }); } - if (optionalPointOnSegment) { - optionalPointOnSegment.copy(_segDir).multiplyScalar(s1).add(_segCenter); + let result = item.getCache("toDefaultCSS"); + if (item.isAbsolute) { + result.left = Length.px(item.x); + result.top = Length.px(item.y); } - return sqrDist; + result["background-color"] = item.backgroundColor; + result["color"] = item.color; + result["font-size"] = item.fontSize; + result["font-weight"] = item.fontWeight; + result["font-style"] = item.fontStyle; + result["font-family"] = item.fontFamily; + result["text-align"] = item.textAlign; + result["text-decoration"] = item.textDecoration; + result["text-transform"] = item.textTransform; + result["letter-spacing"] = item.letterSpacing; + result["word-spacing"] = item.wordSpacing; + result["line-height"] = item.lineHeight; + result["text-indent"] = item.textIndent; + result["text-shadow"] = item.textShadow; + result["text-overflow"] = item.textOverflow; + result["text-wrap"] = item.textWrap; + result["position"] = item.position; + result["overflow"] = item.overflow; + result["z-index"] = item.zIndex; + result["opacity"] = item.opacity; + result["mix-blend-mode"] = item.mixBlendMode; + result["transform-origin"] = item.transformOrigin; + result["border-radius"] = item.borderRadius; + result["filter"] = item.filter; + result["backdrop-filter"] = item.backdropFilter; + result["box-shadow"] = item.boxShadow; + result["animation"] = item.animation; + result["transition"] = item.transition; + return result; + } + toVariableCSS(item) { + const v = item.computed("variable", (v2) => { + let obj2 = {}; + v2.split(";").filter((it) => it.trim()).forEach((it) => { + const [key, value] = it.split(":"); + obj2[`--${key}`] = value; + }); + return obj2; + }); + return v; } - intersectSphere(sphere, target) { - _vector$a.subVectors(sphere.center, this.origin); - const tca = _vector$a.dot(this.direction); - const d2 = _vector$a.dot(_vector$a) - tca * tca; - const radius2 = sphere.radius * sphere.radius; - if (d2 > radius2) - return null; - const thc = Math.sqrt(radius2 - d2); - const t0 = tca - thc; - const t1 = tca + thc; - if (t0 < 0 && t1 < 0) - return null; - if (t0 < 0) - return this.at(t1, target); - return this.at(t0, target); + toRootVariableCSS(item) { + let obj2 = {}; + item.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { + const [key, value] = it.split(":"); + obj2[`--${key}`] = value; + }); + return obj2; } - intersectsSphere(sphere) { - return this.distanceSqToPoint(sphere.center) <= sphere.radius * sphere.radius; + toRootVariableString(item) { + return CSS_TO_STRING(this.toRootVariableCSS(item)); } - distanceToPlane(plane) { - const denominator = plane.normal.dot(this.direction); - if (denominator === 0) { - if (plane.distanceToPoint(this.origin) === 0) { - return 0; - } - return null; - } - const t = -(this.origin.dot(plane.normal) + plane.constant) / denominator; - return t >= 0 ? t : null; + toWebkitCSS(item) { + var results = {}; + WEBKIT_ATTRIBUTE_FOR_CSS.forEach((key) => { + results[`-webkit-${key}`] = item.get(key); + }); + return results; } - intersectPlane(plane, target) { - const t = this.distanceToPlane(plane); - if (t === null) { - return null; + toTextClipCSS(item) { + let results = {}; + if (item.textClip === "text") { + results["-webkit-background-clip"] = "text"; + results["-webkit-text-fill-color"] = "transparent"; + results["color"] = "transparent"; } - return this.at(t, target); + return results; } - intersectsPlane(plane) { - const distToPoint = plane.distanceToPoint(this.origin); - if (distToPoint === 0) { - return true; - } - const denominator = plane.normal.dot(this.direction); - if (denominator * distToPoint < 0) { - return true; - } - return false; + toTransformCSS(item) { + const transform2 = item.computed("angle", (angle) => { + return { + transform: angle === 0 ? "" : `rotateZ(${angle}deg)` + }; + }); + return transform2; } - intersectBox(box, target) { - let tmin, tmax, tymin, tymax, tzmin, tzmax; - const invdirx = 1 / this.direction.x, invdiry = 1 / this.direction.y, invdirz = 1 / this.direction.z; - const origin = this.origin; - if (invdirx >= 0) { - tmin = (box.min.x - origin.x) * invdirx; - tmax = (box.max.x - origin.x) * invdirx; - } else { - tmin = (box.max.x - origin.x) * invdirx; - tmax = (box.min.x - origin.x) * invdirx; - } - if (invdiry >= 0) { - tymin = (box.min.y - origin.y) * invdiry; - tymax = (box.max.y - origin.y) * invdiry; - } else { - tymin = (box.max.y - origin.y) * invdiry; - tymax = (box.min.y - origin.y) * invdiry; - } - if (tmin > tymax || tymin > tmax) - return null; - if (tymin > tmin || tmin !== tmin) - tmin = tymin; - if (tymax < tmax || tmax !== tmax) - tmax = tymax; - if (invdirz >= 0) { - tzmin = (box.min.z - origin.z) * invdirz; - tzmax = (box.max.z - origin.z) * invdirz; - } else { - tzmin = (box.max.z - origin.z) * invdirz; - tzmax = (box.min.z - origin.z) * invdirz; - } - if (tmin > tzmax || tzmin > tmax) - return null; - if (tzmin > tmin || tmin !== tmin) - tmin = tzmin; - if (tzmax < tmax || tmax !== tmax) - tmax = tzmax; - if (tmax < 0) - return null; - return this.at(tmin >= 0 ? tmin : tmax, target); - } - intersectsBox(box) { - return this.intersectBox(box, _vector$a) !== null; - } - intersectTriangle(a, b, c2, backfaceCulling, target) { - _edge1.subVectors(b, a); - _edge2.subVectors(c2, a); - _normal$1.crossVectors(_edge1, _edge2); - let DdN = this.direction.dot(_normal$1); - let sign2; - if (DdN > 0) { - if (backfaceCulling) - return null; - sign2 = 1; - } else if (DdN < 0) { - sign2 = -1; - DdN = -DdN; - } else { - return null; + toDefInnerString(item) { + return ` + ${this.toClipPath(item)} + ${this.toSVGFilter(item)} + `.trim(); + } + toClipPath(item) { + if (item.clipPath === "") + return ""; + if (!item.cacheClipPathObject) { + item.setClipPathCache(); } - _diff.subVectors(this.origin, a); - const DdQxE2 = sign2 * this.direction.dot(_edge2.crossVectors(_diff, _edge2)); - if (DdQxE2 < 0) { - return null; + var obj2 = item.cacheClipPathObject; + var value = obj2.value; + switch (obj2.type) { + case "path": + return ``; + case "svg": + return `${value}`; } - const DdE1xQ = sign2 * this.direction.dot(_edge1.cross(_diff)); - if (DdE1xQ < 0) { + return ``; + } + toClipPathCSS(item) { + let str = item.clipPath; + if (Boolean(str) === false) { return null; } - if (DdQxE2 + DdE1xQ > DdN) { - return null; + if (!item.cacheClipPathObject) { + item.setClipPathCache(); } - const QdN = -sign2 * _diff.dot(_normal$1); - if (QdN < 0) { - return null; + var obj2 = item.cacheClipPathObject; + switch (obj2.type) { + case "path": + if (obj2.value) { + str = `url(#${this.clipPathId(item)})`; + } + break; + case "svg": + str = `url(#${this.clipPathId(item)})`; + break; } - return this.at(QdN / DdN, target); + return { + "clip-path": str + }; } - applyMatrix4(matrix4) { - this.origin.applyMatrix4(matrix4); - this.direction.transformDirection(matrix4); - return this; + innerSVGId(item) { + return item.id + "inner-svg"; } - equals(ray) { - return ray.origin.equals(this.origin) && ray.direction.equals(this.direction); + booleanId(item) { + return item.id + "boolean"; } - clone() { - return new this.constructor().copy(this); + clipPathId(item) { + return item.id + "clip-path"; } -} -class Matrix4 { - constructor() { - this.elements = [ - 1, - 0, - 0, - 0, - 0, - 1, - 0, - 0, - 0, - 0, - 1, - 0, - 0, - 0, - 0, - 1 - ]; - if (arguments.length > 0) { - console.error("THREE.Matrix4: the constructor no longer reads arguments. use .set() instead."); - } - } - set(n11, n12, n13, n14, n21, n22, n23, n24, n31, n32, n33, n34, n41, n42, n43, n44) { - const te = this.elements; - te[0] = n11; - te[4] = n12; - te[8] = n13; - te[12] = n14; - te[1] = n21; - te[5] = n22; - te[9] = n23; - te[13] = n24; - te[2] = n31; - te[6] = n32; - te[10] = n33; - te[14] = n34; - te[3] = n41; - te[7] = n42; - te[11] = n43; - te[15] = n44; - return this; + toDefString(item) { + var str = this.toDefInnerString(item).trim(); + return str ? ` + + + ${str} + + + ` : ""; } - identity() { - this.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - return this; + toSelectorString(item, prefix = "") { + var _a; + return (_a = item.selectors) == null ? void 0 : _a.map((selector2) => selector2.toString(prefix)).join("\n\n"); } - clone() { - return new Matrix4().fromArray(this.elements); - } - copy(m) { - const te = this.elements; - const me = m.elements; - te[0] = me[0]; - te[1] = me[1]; - te[2] = me[2]; - te[3] = me[3]; - te[4] = me[4]; - te[5] = me[5]; - te[6] = me[6]; - te[7] = me[7]; - te[8] = me[8]; - te[9] = me[9]; - te[10] = me[10]; - te[11] = me[11]; - te[12] = me[12]; - te[13] = me[13]; - te[14] = me[14]; - te[15] = me[15]; - return this; + generateView(item, prefix = "", appendCSS = "") { + var cssString = ` + ${prefix} { /* ${item.itemType} */ + ${CSS_TO_STRING(this.toCSS(item), "\n ")}; + ${appendCSS} } - copyPosition(m) { - const te = this.elements, me = m.elements; - te[12] = me[12]; - te[13] = me[13]; - te[14] = me[14]; - return this; + ${this.toNestedCSS(item).map((it) => { + return `${prefix} ${it.selector} { + ${it.cssText ? it.cssText : CSS_TO_STRING(it.css || {}, "\n ")}; + }`; + }).join("\n")} + ${this.toSelectorString(item, prefix)} + `; + return cssString; } - setFromMatrix3(m) { - const me = m.elements; - this.set(me[0], me[3], me[6], 0, me[1], me[4], me[7], 0, me[2], me[5], me[8], 0, 0, 0, 0, 1); - return this; + toCSS(item) { + return valueFilter(Object.assign({}, this.toVariableCSS(item), this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toBoxModelCSS(item), this.toBorderCSS(item), this.toBackgroundImageCSS(item), this.toLayoutCSS(item), this.toSizeCSS(item), this.toTransformCSS(item), this.toLayoutItemCSS(item))); } - extractBasis(xAxis, yAxis, zAxis) { - xAxis.setFromMatrixColumn(this, 0); - yAxis.setFromMatrixColumn(this, 1); - zAxis.setFromMatrixColumn(this, 2); - return this; + toStyleCode(item) { + const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); + return cssString; } - makeBasis(xAxis, yAxis, zAxis) { - this.set(xAxis.x, yAxis.x, zAxis.x, 0, xAxis.y, yAxis.y, zAxis.y, 0, xAxis.z, yAxis.z, zAxis.z, 0, 0, 0, 0, 1); - return this; + toStyle(item) { + const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); + return ` + + ` + item.layers.map((it) => { + return this.renderer.toStyle(it); + }).join(""); } - extractRotation(m) { - const te = this.elements; - const me = m.elements; - const scaleX = 1 / _v1$5.setFromMatrixColumn(m, 0).length(); - const scaleY = 1 / _v1$5.setFromMatrixColumn(m, 1).length(); - const scaleZ = 1 / _v1$5.setFromMatrixColumn(m, 2).length(); - te[0] = me[0] * scaleX; - te[1] = me[1] * scaleX; - te[2] = me[2] * scaleX; - te[3] = 0; - te[4] = me[4] * scaleY; - te[5] = me[5] * scaleY; - te[6] = me[6] * scaleY; - te[7] = 0; - te[8] = me[8] * scaleZ; - te[9] = me[9] * scaleZ; - te[10] = me[10] * scaleZ; - te[11] = 0; - te[12] = 0; - te[13] = 0; - te[14] = 0; - te[15] = 1; - return this; + toStyleData(item) { + const cssString = this.generateView(item, `[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${item.id}']`); + return { + styleTag: ``, + cssString + }; } - makeRotationFromEuler(euler) { - if (!(euler && euler.isEuler)) { - console.error("THREE.Matrix4: .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order."); - } - const te = this.elements; - const x = euler.x, y = euler.y, z = euler.z; - const a = Math.cos(x), b = Math.sin(x); - const c2 = Math.cos(y), d = Math.sin(y); - const e = Math.cos(z), f = Math.sin(z); - if (euler.order === "XYZ") { - const ae = a * e, af = a * f, be = b * e, bf = b * f; - te[0] = c2 * e; - te[4] = -c2 * f; - te[8] = d; - te[1] = af + be * d; - te[5] = ae - bf * d; - te[9] = -b * c2; - te[2] = bf - ae * d; - te[6] = be + af * d; - te[10] = a * c2; - } else if (euler.order === "YXZ") { - const ce = c2 * e, cf = c2 * f, de = d * e, df = d * f; - te[0] = ce + df * b; - te[4] = de * b - cf; - te[8] = a * d; - te[1] = a * f; - te[5] = a * e; - te[9] = -b; - te[2] = cf * b - de; - te[6] = df + ce * b; - te[10] = a * c2; - } else if (euler.order === "ZXY") { - const ce = c2 * e, cf = c2 * f, de = d * e, df = d * f; - te[0] = ce - df * b; - te[4] = -a * f; - te[8] = de + cf * b; - te[1] = cf + de * b; - te[5] = a * e; - te[9] = df - ce * b; - te[2] = -a * d; - te[6] = b; - te[10] = a * c2; - } else if (euler.order === "ZYX") { - const ae = a * e, af = a * f, be = b * e, bf = b * f; - te[0] = c2 * e; - te[4] = be * d - af; - te[8] = ae * d + bf; - te[1] = c2 * f; - te[5] = bf * d + ae; - te[9] = af * d - be; - te[2] = -d; - te[6] = b * c2; - te[10] = a * c2; - } else if (euler.order === "YZX") { - const ac = a * c2, ad = a * d, bc = b * c2, bd = b * d; - te[0] = c2 * e; - te[4] = bd - ac * f; - te[8] = bc * f + ad; - te[1] = f; - te[5] = a * e; - te[9] = -b * e; - te[2] = -d * e; - te[6] = ad * f + bc; - te[10] = ac - bd * f; - } else if (euler.order === "XZY") { - const ac = a * c2, ad = a * d, bc = b * c2, bd = b * d; - te[0] = c2 * e; - te[4] = -f; - te[8] = d * e; - te[1] = ac * f + bd; - te[5] = a * e; - te[9] = ad * f - bc; - te[2] = bc * f - ad; - te[6] = b * e; - te[10] = bd * f + ac; - } - te[3] = 0; - te[7] = 0; - te[11] = 0; - te[12] = 0; - te[13] = 0; - te[14] = 0; - te[15] = 1; - return this; + toExportStyle(item) { + const cssString = this.generateView(item, `.element-item[data-id='${item.id}']`); + return ` + + ` + item.layers.map((it) => { + return this.renderer.toExportStyle(it); + }).join(""); } - makeRotationFromQuaternion(q) { - return this.compose(_zero, q, _one); + render(item) { + var { elementType, id, name, itemType, isBooleanItem } = item; + const tagName = elementType || "div"; + return `<${tagName} id="${this.uniqueId(item)}" class="element-item ${itemType}" data-is-boolean-item="${isBooleanItem}" data-id="${id}" data-title="${name}">${this.toDefString(item)}${item.layers.map((it) => { + return this.renderer.render(it); + }).join("")}`; } - lookAt(eye, target, up) { - const te = this.elements; - _z.subVectors(eye, target); - if (_z.lengthSq() === 0) { - _z.z = 1; + toSVGFilter(item) { + if (item.svgfilters.length === 0) + return ""; + var filterString = item.computedValue("svgfilters"); + if (item.hasChangedField("svgfilters") || !filterString) { + filterString = item.computed("svgfilters", (svgfilters) => { + var filterString2 = svgfilters.map((svgfilter) => { + return ` + + ${svgfilter.filters.map((filter2) => SVGFilter.parse(filter2)).join("\n")} + `; + }).join(""); + return filterString2; + }, true); } - _z.normalize(); - _x.crossVectors(up, _z); - if (_x.lengthSq() === 0) { - if (Math.abs(up.z) === 1) { - _z.x += 1e-4; - } else { - _z.z += 1e-4; - } - _z.normalize(); - _x.crossVectors(up, _z); - } - _x.normalize(); - _y.crossVectors(_z, _x); - te[0] = _x.x; - te[4] = _y.x; - te[8] = _z.x; - te[1] = _x.y; - te[5] = _y.y; - te[9] = _z.y; - te[2] = _x.z; - te[6] = _y.z; - te[10] = _z.z; - return this; - } - multiply(m, n) { - if (n !== void 0) { - console.warn("THREE.Matrix4: .multiply() now only accepts one argument. Use .multiplyMatrices( a, b ) instead."); - return this.multiplyMatrices(m, n); - } - return this.multiplyMatrices(this, m); - } - premultiply(m) { - return this.multiplyMatrices(m, this); - } - multiplyMatrices(a, b) { - const ae = a.elements; - const be = b.elements; - const te = this.elements; - const a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12]; - const a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13]; - const a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14]; - const a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15]; - const b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12]; - const b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13]; - const b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14]; - const b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15]; - te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41; - te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42; - te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43; - te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44; - te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41; - te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42; - te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43; - te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44; - te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41; - te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42; - te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43; - te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44; - te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41; - te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42; - te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43; - te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44; - return this; + return filterString; } - multiplyScalar(s) { - const te = this.elements; - te[0] *= s; - te[4] *= s; - te[8] *= s; - te[12] *= s; - te[1] *= s; - te[5] *= s; - te[9] *= s; - te[13] *= s; - te[2] *= s; - te[6] *= s; - te[10] *= s; - te[14] *= s; - te[3] *= s; - te[7] *= s; - te[11] *= s; - te[15] *= s; - return this; + renderSVG() { } - determinant() { - const te = this.elements; - const n11 = te[0], n12 = te[4], n13 = te[8], n14 = te[12]; - const n21 = te[1], n22 = te[5], n23 = te[9], n24 = te[13]; - const n31 = te[2], n32 = te[6], n33 = te[10], n34 = te[14]; - const n41 = te[3], n42 = te[7], n43 = te[11], n44 = te[15]; - return n41 * (+n14 * n23 * n32 - n13 * n24 * n32 - n14 * n22 * n33 + n12 * n24 * n33 + n13 * n22 * n34 - n12 * n23 * n34) + n42 * (+n11 * n23 * n34 - n11 * n24 * n33 + n14 * n21 * n33 - n13 * n21 * n34 + n13 * n24 * n31 - n14 * n23 * n31) + n43 * (+n11 * n24 * n32 - n11 * n22 * n34 - n14 * n21 * n32 + n12 * n21 * n34 + n14 * n22 * n31 - n12 * n24 * n31) + n44 * (-n13 * n22 * n31 - n11 * n23 * n32 + n11 * n22 * n33 + n13 * n21 * n32 - n12 * n21 * n33 + n12 * n23 * n31); - } - transpose() { - const te = this.elements; - let tmp2; - tmp2 = te[1]; - te[1] = te[4]; - te[4] = tmp2; - tmp2 = te[2]; - te[2] = te[8]; - te[8] = tmp2; - tmp2 = te[6]; - te[6] = te[9]; - te[9] = tmp2; - tmp2 = te[3]; - te[3] = te[12]; - te[12] = tmp2; - tmp2 = te[7]; - te[7] = te[13]; - te[13] = tmp2; - tmp2 = te[11]; - te[11] = te[14]; - te[14] = tmp2; - return this; + toNestedCSS() { + const result = []; + return result; } - setPosition(x, y, z) { - const te = this.elements; - if (x.isVector3) { - te[12] = x.x; - te[13] = x.y; - te[14] = x.z; + updateStyle(item) { + if (item.hasCache("style")) { + const styleText = this.toStyleData(item).cssString; + if (item.hasCache("styleText")) { + if (item.getCache("styleText") === styleText) { + return; + } + } + item.addCache("styleText", styleText); + item.getCache("style").text(styleText); } else { - te[12] = x; - te[13] = y; - te[14] = z; + const styleData = this.toStyleData(item); + const style = Dom.createByHTML(styleData.styleTag); + item.addCache("style", style); + item.addCache("styleText", styleData.cssString); + document.head.appendChild(style.el); } - return this; - } - invert() { - const te = this.elements, n11 = te[0], n21 = te[1], n31 = te[2], n41 = te[3], n12 = te[4], n22 = te[5], n32 = te[6], n42 = te[7], n13 = te[8], n23 = te[9], n33 = te[10], n43 = te[11], n14 = te[12], n24 = te[13], n34 = te[14], n44 = te[15], t11 = n23 * n34 * n42 - n24 * n33 * n42 + n24 * n32 * n43 - n22 * n34 * n43 - n23 * n32 * n44 + n22 * n33 * n44, t12 = n14 * n33 * n42 - n13 * n34 * n42 - n14 * n32 * n43 + n12 * n34 * n43 + n13 * n32 * n44 - n12 * n33 * n44, t13 = n13 * n24 * n42 - n14 * n23 * n42 + n14 * n22 * n43 - n12 * n24 * n43 - n13 * n22 * n44 + n12 * n23 * n44, t14 = n14 * n23 * n32 - n13 * n24 * n32 - n14 * n22 * n33 + n12 * n24 * n33 + n13 * n22 * n34 - n12 * n23 * n34; - const det = n11 * t11 + n21 * t12 + n31 * t13 + n41 * t14; - if (det === 0) - return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); - const detInv = 1 / det; - te[0] = t11 * detInv; - te[1] = (n24 * n33 * n41 - n23 * n34 * n41 - n24 * n31 * n43 + n21 * n34 * n43 + n23 * n31 * n44 - n21 * n33 * n44) * detInv; - te[2] = (n22 * n34 * n41 - n24 * n32 * n41 + n24 * n31 * n42 - n21 * n34 * n42 - n22 * n31 * n44 + n21 * n32 * n44) * detInv; - te[3] = (n23 * n32 * n41 - n22 * n33 * n41 - n23 * n31 * n42 + n21 * n33 * n42 + n22 * n31 * n43 - n21 * n32 * n43) * detInv; - te[4] = t12 * detInv; - te[5] = (n13 * n34 * n41 - n14 * n33 * n41 + n14 * n31 * n43 - n11 * n34 * n43 - n13 * n31 * n44 + n11 * n33 * n44) * detInv; - te[6] = (n14 * n32 * n41 - n12 * n34 * n41 - n14 * n31 * n42 + n11 * n34 * n42 + n12 * n31 * n44 - n11 * n32 * n44) * detInv; - te[7] = (n12 * n33 * n41 - n13 * n32 * n41 + n13 * n31 * n42 - n11 * n33 * n42 - n12 * n31 * n43 + n11 * n32 * n43) * detInv; - te[8] = t13 * detInv; - te[9] = (n14 * n23 * n41 - n13 * n24 * n41 - n14 * n21 * n43 + n11 * n24 * n43 + n13 * n21 * n44 - n11 * n23 * n44) * detInv; - te[10] = (n12 * n24 * n41 - n14 * n22 * n41 + n14 * n21 * n42 - n11 * n24 * n42 - n12 * n21 * n44 + n11 * n22 * n44) * detInv; - te[11] = (n13 * n22 * n41 - n12 * n23 * n41 - n13 * n21 * n42 + n11 * n23 * n42 + n12 * n21 * n43 - n11 * n22 * n43) * detInv; - te[12] = t14 * detInv; - te[13] = (n13 * n24 * n31 - n14 * n23 * n31 + n14 * n21 * n33 - n11 * n24 * n33 - n13 * n21 * n34 + n11 * n23 * n34) * detInv; - te[14] = (n14 * n22 * n31 - n12 * n24 * n31 - n14 * n21 * n32 + n11 * n24 * n32 + n12 * n21 * n34 - n11 * n22 * n34) * detInv; - te[15] = (n12 * n23 * n31 - n13 * n22 * n31 + n13 * n21 * n32 - n11 * n23 * n32 - n12 * n21 * n33 + n11 * n22 * n33) * detInv; - return this; - } - scale(v) { - const te = this.elements; - const x = v.x, y = v.y, z = v.z; - te[0] *= x; - te[4] *= y; - te[8] *= z; - te[1] *= x; - te[5] *= y; - te[9] *= z; - te[2] *= x; - te[6] *= y; - te[10] *= z; - te[3] *= x; - te[7] *= y; - te[11] *= z; - return this; - } - getMaxScaleOnAxis() { - const te = this.elements; - const scaleXSq = te[0] * te[0] + te[1] * te[1] + te[2] * te[2]; - const scaleYSq = te[4] * te[4] + te[5] * te[5] + te[6] * te[6]; - const scaleZSq = te[8] * te[8] + te[9] * te[9] + te[10] * te[10]; - return Math.sqrt(Math.max(scaleXSq, scaleYSq, scaleZSq)); - } - makeTranslation(x, y, z) { - this.set(1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1); - return this; - } - makeRotationX(theta) { - const c2 = Math.cos(theta), s = Math.sin(theta); - this.set(1, 0, 0, 0, 0, c2, -s, 0, 0, s, c2, 0, 0, 0, 0, 1); - return this; - } - makeRotationY(theta) { - const c2 = Math.cos(theta), s = Math.sin(theta); - this.set(c2, 0, s, 0, 0, 1, 0, 0, -s, 0, c2, 0, 0, 0, 0, 1); - return this; - } - makeRotationZ(theta) { - const c2 = Math.cos(theta), s = Math.sin(theta); - this.set(c2, -s, 0, 0, s, c2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - return this; - } - makeRotationAxis(axis, angle) { - const c2 = Math.cos(angle); - const s = Math.sin(angle); - const t = 1 - c2; - const x = axis.x, y = axis.y, z = axis.z; - const tx = t * x, ty = t * y; - this.set(tx * x + c2, tx * y - s * z, tx * z + s * y, 0, tx * y + s * z, ty * y + c2, ty * z - s * x, 0, tx * z - s * y, ty * z + s * x, t * z * z + c2, 0, 0, 0, 0, 1); - return this; - } - makeScale(x, y, z) { - this.set(x, 0, 0, 0, 0, y, 0, 0, 0, 0, z, 0, 0, 0, 0, 1); - return this; - } - makeShear(xy2, xz, yx, yz, zx, zy) { - this.set(1, yx, zx, 0, xy2, 1, zy, 0, xz, yz, 1, 0, 0, 0, 0, 1); - return this; - } - compose(position2, quaternion, scale2) { - const te = this.elements; - const x = quaternion._x, y = quaternion._y, z = quaternion._z, w = quaternion._w; - const x2 = x + x, y2 = y + y, z2 = z + z; - const xx = x * x2, xy2 = x * y2, xz = x * z2; - const yy = y * y2, yz = y * z2, zz = z * z2; - const wx = w * x2, wy = w * y2, wz = w * z2; - const sx = scale2.x, sy = scale2.y, sz = scale2.z; - te[0] = (1 - (yy + zz)) * sx; - te[1] = (xy2 + wz) * sx; - te[2] = (xz - wy) * sx; - te[3] = 0; - te[4] = (xy2 - wz) * sy; - te[5] = (1 - (xx + zz)) * sy; - te[6] = (yz + wx) * sy; - te[7] = 0; - te[8] = (xz + wy) * sz; - te[9] = (yz - wx) * sz; - te[10] = (1 - (xx + yy)) * sz; - te[11] = 0; - te[12] = position2.x; - te[13] = position2.y; - te[14] = position2.z; - te[15] = 1; - return this; - } - decompose(position2, quaternion, scale2) { - const te = this.elements; - let sx = _v1$5.set(te[0], te[1], te[2]).length(); - const sy = _v1$5.set(te[4], te[5], te[6]).length(); - const sz = _v1$5.set(te[8], te[9], te[10]).length(); - const det = this.determinant(); - if (det < 0) - sx = -sx; - position2.x = te[12]; - position2.y = te[13]; - position2.z = te[14]; - _m1$2.copy(this); - const invSX = 1 / sx; - const invSY = 1 / sy; - const invSZ = 1 / sz; - _m1$2.elements[0] *= invSX; - _m1$2.elements[1] *= invSX; - _m1$2.elements[2] *= invSX; - _m1$2.elements[4] *= invSY; - _m1$2.elements[5] *= invSY; - _m1$2.elements[6] *= invSY; - _m1$2.elements[8] *= invSZ; - _m1$2.elements[9] *= invSZ; - _m1$2.elements[10] *= invSZ; - quaternion.setFromRotationMatrix(_m1$2); - scale2.x = sx; - scale2.y = sy; - scale2.z = sz; - return this; - } - makePerspective(left2, right2, top2, bottom2, near, far) { - if (far === void 0) { - console.warn("THREE.Matrix4: .makePerspective() has been redefined and has a new signature. Please check the docs."); - } - const te = this.elements; - const x = 2 * near / (right2 - left2); - const y = 2 * near / (top2 - bottom2); - const a = (right2 + left2) / (right2 - left2); - const b = (top2 + bottom2) / (top2 - bottom2); - const c2 = -(far + near) / (far - near); - const d = -2 * far * near / (far - near); - te[0] = x; - te[4] = 0; - te[8] = a; - te[12] = 0; - te[1] = 0; - te[5] = y; - te[9] = b; - te[13] = 0; - te[2] = 0; - te[6] = 0; - te[10] = c2; - te[14] = d; - te[3] = 0; - te[7] = 0; - te[11] = -1; - te[15] = 0; - return this; } - makeOrthographic(left2, right2, top2, bottom2, near, far) { - const te = this.elements; - const w = 1 / (right2 - left2); - const h = 1 / (top2 - bottom2); - const p = 1 / (far - near); - const x = (right2 + left2) * w; - const y = (top2 + bottom2) * h; - const z = (far + near) * p; - te[0] = 2 * w; - te[4] = 0; - te[8] = 0; - te[12] = -x; - te[1] = 0; - te[5] = 2 * h; - te[9] = 0; - te[13] = -y; - te[2] = 0; - te[6] = 0; - te[10] = -2 * p; - te[14] = -z; - te[3] = 0; - te[7] = 0; - te[11] = 0; - te[15] = 1; - return this; - } - equals(matrix) { - const te = this.elements; - const me = matrix.elements; - for (let i = 0; i < 16; i++) { - if (te[i] !== me[i]) - return false; + update(item, currentElement) { + if (!currentElement) + return; + this.updateStyle(item); + let $svg = currentElement.el.$svg; + if (!$svg) { + currentElement.el.$svg = currentElement.$(`[data-id="${this.innerSVGId(item)}"]`); + $svg = currentElement.el.$svg; + currentElement.el.$booleanSvg = currentElement.$(`[data-id="${this.booleanId(item)}"]`); } - return true; - } - fromArray(array, offset = 0) { - for (let i = 0; i < 16; i++) { - this.elements[i] = array[i + offset]; + if (currentElement.data("is-boolean-item") !== `${item.isBooleanItem}`) { + currentElement.attr("data-is-boolean-item", item.isBooleanItem); } - return this; - } - toArray(array = [], offset = 0) { - const te = this.elements; - array[offset] = te[0]; - array[offset + 1] = te[1]; - array[offset + 2] = te[2]; - array[offset + 3] = te[3]; - array[offset + 4] = te[4]; - array[offset + 5] = te[5]; - array[offset + 6] = te[6]; - array[offset + 7] = te[7]; - array[offset + 8] = te[8]; - array[offset + 9] = te[9]; - array[offset + 10] = te[10]; - array[offset + 11] = te[11]; - array[offset + 12] = te[12]; - array[offset + 13] = te[13]; - array[offset + 14] = te[14]; - array[offset + 15] = te[15]; - return array; - } -} -Matrix4.prototype.isMatrix4 = true; -const _v1$5 = /* @__PURE__ */ new Vector3(); -const _m1$2 = /* @__PURE__ */ new Matrix4(); -const _zero = /* @__PURE__ */ new Vector3(0, 0, 0); -const _one = /* @__PURE__ */ new Vector3(1, 1, 1); -const _x = /* @__PURE__ */ new Vector3(); -const _y = /* @__PURE__ */ new Vector3(); -const _z = /* @__PURE__ */ new Vector3(); -const _matrix$1 = /* @__PURE__ */ new Matrix4(); -const _quaternion$3 = /* @__PURE__ */ new Quaternion(); -class Euler { - constructor(x = 0, y = 0, z = 0, order = Euler.DefaultOrder) { - this._x = x; - this._y = y; - this._z = z; - this._order = order; - } - get x() { - return this._x; - } - set x(value) { - this._x = value; - this._onChangeCallback(); - } - get y() { - return this._y; - } - set y(value) { - this._y = value; - this._onChangeCallback(); - } - get z() { - return this._z; - } - set z(value) { - this._z = value; - this._onChangeCallback(); - } - get order() { - return this._order; - } - set order(value) { - this._order = value; - this._onChangeCallback(); - } - set(x, y, z, order = this._order) { - this._x = x; - this._y = y; - this._z = z; - this._order = order; - this._onChangeCallback(); - return this; - } - clone() { - return new this.constructor(this._x, this._y, this._z, this._order); - } - copy(euler) { - this._x = euler._x; - this._y = euler._y; - this._z = euler._z; - this._order = euler._order; - this._onChangeCallback(); - return this; - } - setFromRotationMatrix(m, order = this._order, update2 = true) { - const te = m.elements; - const m11 = te[0], m12 = te[4], m13 = te[8]; - const m21 = te[1], m22 = te[5], m23 = te[9]; - const m31 = te[2], m32 = te[6], m33 = te[10]; - switch (order) { - case "XYZ": - this._y = Math.asin(clamp(m13, -1, 1)); - if (Math.abs(m13) < 0.9999999) { - this._x = Math.atan2(-m23, m33); - this._z = Math.atan2(-m12, m11); - } else { - this._x = Math.atan2(m32, m22); - this._z = 0; - } - break; - case "YXZ": - this._x = Math.asin(-clamp(m23, -1, 1)); - if (Math.abs(m23) < 0.9999999) { - this._y = Math.atan2(m13, m33); - this._z = Math.atan2(m21, m22); - } else { - this._y = Math.atan2(-m31, m11); - this._z = 0; - } - break; - case "ZXY": - this._x = Math.asin(clamp(m32, -1, 1)); - if (Math.abs(m32) < 0.9999999) { - this._y = Math.atan2(-m31, m33); - this._z = Math.atan2(-m12, m22); - } else { - this._y = 0; - this._z = Math.atan2(m21, m11); - } - break; - case "ZYX": - this._y = Math.asin(-clamp(m31, -1, 1)); - if (Math.abs(m31) < 0.9999999) { - this._x = Math.atan2(m32, m33); - this._z = Math.atan2(m21, m11); - } else { - this._x = 0; - this._z = Math.atan2(-m12, m22); - } - break; - case "YZX": - this._z = Math.asin(clamp(m21, -1, 1)); - if (Math.abs(m21) < 0.9999999) { - this._x = Math.atan2(-m23, m22); - this._y = Math.atan2(-m31, m11); - } else { - this._x = 0; - this._y = Math.atan2(m13, m33); - } - break; - case "XZY": - this._z = Math.asin(-clamp(m12, -1, 1)); - if (Math.abs(m12) < 0.9999999) { - this._x = Math.atan2(m32, m22); - this._y = Math.atan2(m13, m11); - } else { - this._x = Math.atan2(-m23, m33); - this._y = 0; + if ($svg) { + const defString = this.toDefInnerString(item); + if (defString) { + var $defs = $svg.$("defs"); + $defs.updateSVGDiff(`${defString}`); + } + } else { + const defString = this.toDefString(item); + if (defString) { + var a = Dom.createByHTML(defString); + if (a) { + currentElement.prepend(a); } - break; - default: - console.warn("THREE.Euler: .setFromRotationMatrix() encountered an unknown order: " + order); + } } - this._order = order; - if (update2 === true) - this._onChangeCallback(); - return this; - } - setFromQuaternion(q, order, update2) { - _matrix$1.makeRotationFromQuaternion(q); - return this.setFromRotationMatrix(_matrix$1, order, update2); - } - setFromVector3(v, order = this._order) { - return this.set(v.x, v.y, v.z, order); - } - reorder(newOrder) { - _quaternion$3.setFromEuler(this); - return this.setFromQuaternion(_quaternion$3, newOrder); } - equals(euler) { - return euler._x === this._x && euler._y === this._y && euler._z === this._z && euler._order === this._order; - } - fromArray(array) { - this._x = array[0]; - this._y = array[1]; - this._z = array[2]; - if (array[3] !== void 0) - this._order = array[3]; - this._onChangeCallback(); - return this; - } - toArray(array = [], offset = 0) { - array[offset] = this._x; - array[offset + 1] = this._y; - array[offset + 2] = this._z; - array[offset + 3] = this._order; - return array; - } - _onChange(callback) { - this._onChangeCallback = callback; - return this; +} +class LayerRender extends DomRender { +} +class SampleRender extends LayerRender { + update(item, currentElement) { + const $sampleText = currentElement.$(".sample-text"); + if ($sampleText) { + $sampleText.text(item.sampleText); + } + const $sampleNumber = currentElement.$(".sample-number"); + if ($sampleNumber) { + $sampleNumber.text(item.sampleNumber); + } + const $sampleItems = currentElement.$(".sample-items"); + if ($sampleItems) { + const template = [...Array(item.sampleNumber)].map((_, i) => ` +
${i}
+ `).join("\n"); + $sampleItems.html(template); + } + super.update(item, currentElement); } - _onChangeCallback() { + render(item) { + var { id, sampleText, sampleNumber } = item; + return ` +
+ ${this.toDefString(item)} +
+
${sampleText}
+
${sampleNumber}
+
+
+
`; } } -Euler.prototype.isEuler = true; -Euler.DefaultOrder = "XYZ"; -Euler.RotationOrders = ["XYZ", "YZX", "ZXY", "XZY", "YXZ", "ZYX"]; -class Layers { - constructor() { - this.mask = 1 | 0; - } - set(channel) { - this.mask = (1 << channel | 0) >>> 0; +function sample(editor) { + editor.registerComponent("sample", SampleLayer); + editor.registerRenderer("html", "sample", new SampleRender()); + editor.registerInspector("sample", (current) => { + return [ + "Sample Text \uD3B8\uC9D1", + { + key: "sampleText", + editor: "TextEditor", + defaultValue: current.sampleText + }, + "Sample Number \uD3B8\uC9D1", + { + key: "sampleNumber", + editor: "NumberInputEditor", + editorOptions: { + min: 0, + max: 10, + step: 1, + label: "SN" + }, + defaultValue: current.sampleNumber + }, + "\uC2A4\uD0C0\uC77C \uCE74\uD53C", + { + type: "column", + size: [1, 1], + gap: 10, + columns: [ + { + key: "copyCssJSON", + editor: "Button", + editorOptions: { + text: "Copy CSS JSON", + onClick: () => { + console.log(JSON.stringify(editor.html.toCSS(current), null, 4)); + } + } + }, + { + key: "copyCssString", + editor: "Button", + editorOptions: { + text: "Copy CSS String", + onClick: () => { + console.log(CSS_TO_STRING(editor.html.toCSS(current))); + } + } + }, + { + key: "changeColor", + editor: "Button", + editorOptions: { + text: "Change Text Random Color", + onClick: () => { + const textColor = random$1(); + const backgroundColor = random$1(); + editor.context.commands.emit("setAttribute", { + [current.id]: { + color: textColor, + "background-color": backgroundColor + } + }); + } + } + } + ] + } + ]; + }); +} +var SelectionInfoView$1 = ""; +class SelectionInfoView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--selection-info-view" + }); } - enable(channel) { - this.mask |= 1 << channel | 0; + [POINTERSTART("$el [data-artboard-title-id]") + FIRSTMOVE("calculateFirstMovedElement") + MOVE("calculateMovedElement") + END("calculateEndedElement")](e) { + this.startXY = e.xy; + this.initMousePoint = this.$viewport.getWorldPosition(e); + const id = e.$dt.attr("data-artboard-title-id"); + this.$context.selection.select(id); + if (e.altKey) { + this.$commands.emit("history.copyLayer", "copy"); + } + this.initializeDragSelection(); } - enableAll() { - this.mask = 4294967295 | 0; + initializeDragSelection() { + this.$context.selection.reselect(); + this.$context.snapManager.clear(); } - toggle(channel) { - this.mask ^= 1 << channel | 0; + moveTo(dist2) { + const snap = this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map((v) => { + return add$1([], v, dist2); + }), 3 / this.$viewport.scale); + const localDist = add$1([], snap.dist, dist2); + const result = {}; + this.$context.selection.cachedItemMatrices.forEach((it) => { + const newVerties = it.verties.map((v) => { + return add$1([], v, localDist); + }); + const newDist = subtract([], transformMat4([], newVerties[0], it.parentMatrixInverse), transformMat4([], it.verties[0], it.parentMatrixInverse)); + result[it.id] = { + x: Math.floor(it.x + newDist[0]), + y: Math.floor(it.y + newDist[1]) + }; + }); + this.$context.selection.reset(result); } - disable(channel) { - this.mask &= ~(1 << channel | 0); + calculateFirstMovedElement() { + this.$config.set("set.move.control.point", true); + this.emit(REFRESH_SELECTION_TOOL); } - disableAll() { - this.mask = 0; + calculateMovedElement() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); + this.moveTo(newDist); + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y")); + this.refresh(); } - test(layers2) { - return (this.mask & layers2.mask) !== 0; + [SUBSCRIBE("refreshItemName")](id, title2) { + var _a; + this.$commands.emit("setAttribute", { + [id]: { name: title2 } + }); + (_a = this.$el.$(`[data-artboard-title-id='${id}']`)) == null ? void 0 : _a.text(title2); } - isEnabled(channel) { - return (this.mask & (1 << channel | 0)) !== 0; + calculateEndedElement() { + this.$commands.executeCommand("setAttribute", "move item", this.$context.selection.pack("x", "y")); + this.$config.set("set.move.control.point", false); + this.emit(REFRESH_SELECTION_TOOL); + this.$commands.emit("history.refreshSelection"); } -} -let _object3DId = 0; -const _v1$4 = /* @__PURE__ */ new Vector3(); -const _q1 = /* @__PURE__ */ new Quaternion(); -const _m1$1 = /* @__PURE__ */ new Matrix4(); -const _target = /* @__PURE__ */ new Vector3(); -const _position$3 = /* @__PURE__ */ new Vector3(); -const _scale$2 = /* @__PURE__ */ new Vector3(); -const _quaternion$2 = /* @__PURE__ */ new Quaternion(); -const _xAxis = /* @__PURE__ */ new Vector3(1, 0, 0); -const _yAxis = /* @__PURE__ */ new Vector3(0, 1, 0); -const _zAxis = /* @__PURE__ */ new Vector3(0, 0, 1); -const _addedEvent = { type: "added" }; -const _removedEvent = { type: "removed" }; -class Object3D extends EventDispatcher { - constructor() { - super(); - Object.defineProperty(this, "id", { value: _object3DId++ }); - this.uuid = generateUUID(); - this.name = ""; - this.type = "Object3D"; - this.parent = null; - this.children = []; - this.up = Object3D.DefaultUp.clone(); - const position2 = new Vector3(); - const rotation = new Euler(); - const quaternion = new Quaternion(); - const scale2 = new Vector3(1, 1, 1); - function onRotationChange() { - quaternion.setFromEuler(rotation, false); - } - function onQuaternionChange() { - rotation.setFromQuaternion(quaternion, void 0, false); - } - rotation._onChange(onRotationChange); - quaternion._onChange(onQuaternionChange); - Object.defineProperties(this, { - position: { - configurable: true, - enumerable: true, - value: position2 - }, - rotation: { - configurable: true, - enumerable: true, - value: rotation - }, - quaternion: { - configurable: true, - enumerable: true, - value: quaternion - }, - scale: { - configurable: true, - enumerable: true, - value: scale2 - }, - modelViewMatrix: { - value: new Matrix4() - }, - normalMatrix: { - value: new Matrix3() - } - }); - this.matrix = new Matrix4(); - this.matrixWorld = new Matrix4(); - this.matrixAutoUpdate = Object3D.DefaultMatrixAutoUpdate; - this.matrixWorldNeedsUpdate = false; - this.layers = new Layers(); - this.visible = true; - this.castShadow = false; - this.receiveShadow = false; - this.frustumCulled = true; - this.renderOrder = 0; - this.animations = []; - this.userData = {}; - } - onBeforeRender() { - } - onAfterRender() { - } - applyMatrix4(matrix) { - if (this.matrixAutoUpdate) - this.updateMatrix(); - this.matrix.premultiply(matrix); - this.matrix.decompose(this.position, this.quaternion, this.scale); - } - applyQuaternion(q) { - this.quaternion.premultiply(q); - return this; + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.refresh(); } - setRotationFromAxisAngle(axis, angle) { - this.quaternion.setFromAxisAngle(axis, angle); + [SUBSCRIBE(UPDATE_CANVAS)]() { + if (this.$context.selection.current) { + if (this.$context.selection.current.is("artboard")) { + if (this.$context.selection.hasChangedField("x", "y", "width", "height", "angle", "transform", "transform-origin")) { + this.refresh(); + } + } + } } - setRotationFromEuler(euler) { - this.quaternion.setFromEuler(euler, true); + [LOAD("$el") + DOMDIFF]() { + var _a; + return (_a = this.$context.selection.currentProject) == null ? void 0 : _a.artboards.map((it) => { + return { + item: it, + title: it.name, + id: it.id, + layout: it.layout, + pointers: this.$viewport.applyVerties(it.verties) + }; + }).map((it) => this.makeArtboardTitleArea(it)); } - setRotationFromMatrix(m) { - this.quaternion.setFromRotationMatrix(m); + getIcon(item) { + if (item.hasLayout() || item.hasChildren() || item.is("artboard")) { + if (item.isLayout("flex")) { + return iconUse("layout_flex", item.flexDirection === "column" ? "rotate(90 12 12)" : ""); + } else if (item.isLayout("grid")) { + return iconUse("layout_grid"); + } + return ""; + } + return this.$icon.get(item.itemType, item); } - setRotationFromQuaternion(q) { - this.quaternion.copy(q); + createSize(pointers, artboardItem) { + const newPointer = pointers[0]; + const diff = subtract([], pointers[0], pointers[3]); + const angle = calculateAngle360(diff[0], diff[1]) - 90; + return /* @__PURE__ */ createElementJsx("div", { + class: "artboard-title is-not-drag-area", + "data-artboard-title-id": artboardItem.id, + "data-layout": artboardItem.layout, + style: { + "transform-origin": "0% 0%", + transform: `translate3d( calc(${newPointer[0]}px), calc(${newPointer[1]}px), 0px) rotateZ(${angle}deg)` + } + }, /* @__PURE__ */ createElementJsx("div", { + style: "transform: translateY(-100%);" + }, this.getIcon(artboardItem.item), artboardItem.title)); } - rotateOnAxis(axis, angle) { - _q1.setFromAxisAngle(axis, angle); - this.quaternion.multiply(_q1); - return this; + makeArtboardTitleArea(it) { + return this.createSize(it.pointers, it); } - rotateOnWorldAxis(axis, angle) { - _q1.setFromAxisAngle(axis, angle); - this.quaternion.premultiply(_q1); - return this; + [SUBSCRIBE("refreshAll")]() { + this.refresh(); } - rotateX(angle) { - return this.rotateOnAxis(_xAxis, angle); + [SUBSCRIBE("appendLayer")]() { + this.refresh(); } - rotateY(angle) { - return this.rotateOnAxis(_yAxis, angle); +} +function selectionInfoView(editor) { + editor.registerUI("canvas.view", { + SelectionInfoView + }); +} +var GhostToolView$1 = ""; +const CHECK_RATE = 0.5; +class GhostToolView extends EditorElement { + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--ghost-tool-view" + }, /* @__PURE__ */ createElementJsx("div", { + ref: "$containerView" + }), /* @__PURE__ */ createElementJsx("div", { + ref: "$view" + })); } - rotateZ(angle) { - return this.rotateOnAxis(_zAxis, angle); + [SUBSCRIBE("startGhostToolView")]() { + const screenVerties = this.$context.selection.verties; + this.isLayoutItem = this.$context.selection.isLayoutItem; + this.verties = clone$1(screenVerties); + this.ghostVerties = clone$1(screenVerties); + this.ghostScreenVerties = this.$viewport.applyVerties(this.ghostVerties); + this.initMousePoint = this.$viewport.getWorldPosition(); + this.filteredLayers = this.$context.selection.notSelectedLayers; + this.containerList = this.filteredLayers.filter((it) => it.hasLayout() || it.is("artboard")).map((it) => it.originVerties); + this.$config.set("set.move.control.point", true); } - translateOnAxis(axis, distance2) { - _v1$4.copy(axis).applyQuaternion(this.quaternion); - this.position.add(_v1$4.multiplyScalar(distance2)); - return this; + collectInformation() { + var _a, _b; + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = this.getDist(); + this.ghostVerties = this.verties.map((v) => { + return add$1([], v, newDist); + }); + this.ghostScreenVerties = this.$viewport.applyVerties(this.ghostVerties); + const filteredLayers = this.$context.selection.filteredLayers.filter((it) => this.$context.selection.check(it) === false); + this.targetItem = filteredLayers[0]; + if (this.targetItem) { + const currentParent = (_a = this.$context.selection.current) == null ? void 0 : _a.parent; + if (currentParent.isNot("project") && (currentParent == null ? void 0 : currentParent.isLayout(Layout.GRID))) { + this.targetItem = this.$context.selection.current.parent; + } else { + if (this.targetItem.hasLayout() && ((_b = this.targetItem) == null ? void 0 : _b.hasChildren())) { + if (this.targetItem.isLayout(Layout.FLEX)) { + this.targetItem = this.targetItem.layers[this.targetItem.layers.length - 1]; + } else if (this.targetItem.isLayout(Layout.GRID)) + ; + } + } + this.$context.selection.updateDragTargetItem(this.targetItem); + this.targetOriginPosition = this.$viewport.applyVerties(toRectVerties(this.targetItem.contentVerties)); + this.targetPoint = this.$viewport.applyVertex(targetMousePoint); + this.targetRelativeMousePoint = { + x: (this.targetPoint[0] - this.targetOriginPosition[0][0]) / (this.targetOriginPosition[1][0] - this.targetOriginPosition[0][0]), + y: (this.targetPoint[1] - this.targetOriginPosition[0][1]) / (this.targetOriginPosition[3][1] - this.targetOriginPosition[0][1]) + }; + if (this.targetItem.isLayoutItem()) { + this.targetParent = this.targetItem.parent; + if (this.targetParent) { + this.targetParentPosition = this.$viewport.applyVerties(this.targetParent.contentVerties); + } + } else { + this.targetParent = null; + this.targetParentPosition = null; + } + } else { + this.targetPoint = null; + this.targetRelativeMousePoint = null; + this.targetParent = null; + this.targetParentPosition = null; + } } - translateX(distance2) { - return this.translateOnAxis(_xAxis, distance2); + [SUBSCRIBE("moveFirstGhostToolView")]() { + this.collectInformation(); + this.load("$containerView"); + this.load("$view"); } - translateY(distance2) { - return this.translateOnAxis(_yAxis, distance2); + [SUBSCRIBE("moveGhostToolView")]() { + this.collectInformation(); + this.load("$view"); } - translateZ(distance2) { - return this.translateOnAxis(_zAxis, distance2); + [LOAD("$containerView")]() { + var _a; + if (!this.ghostVerties) { + return /* @__PURE__ */ createElementJsx("svg", null); + } + return /* @__PURE__ */ createElementJsx("svg", null, (_a = this.containerList) == null ? void 0 : _a.map((it) => { + it = this.$viewport.applyVerties(it); + return /* @__PURE__ */ createElementJsx("path", { + class: "container", + d: ` + M ${it[0][0]} ${it[0][1]} + L ${it[1][0]} ${it[1][1]} + L ${it[2][0]} ${it[2][1]} + L ${it[3][0]} ${it[3][1]} + Z + ` + }); + })); } - localToWorld(vector) { - return vector.applyMatrix4(this.matrixWorld); + renderPathForVerties(verties, className) { + if (!verties) { + return /* @__PURE__ */ createElementJsx("g", null); + } + const d = vertiesToPath(verties); + return /* @__PURE__ */ createElementJsx("g", null, /* @__PURE__ */ createElementJsx("path", { + class: className, + d + })); } - worldToLocal(vector) { - return vector.applyMatrix4(_m1$1.copy(this.matrixWorld).invert()); + renderPath(verties, className, data = className) { + if (!verties) + return ""; + verties = data === "ghost" ? verties : toRectVerties(verties); + const textX = className === "flex-item" ? verties[0][0] : verties[0][0]; + const textY = className === "flex-item" ? verties[2][1] + 10 : verties[0][1] - 10; + return /* @__PURE__ */ createElementJsx("g", null, /* @__PURE__ */ createElementJsx("text", { + x: textX, + y: textY, + "font-size": 8 + }, data), this.renderPathForVerties(verties, className)); } - lookAt(x, y, z) { - if (x.isVector3) { - _target.copy(x); + renderLayoutFlexRowArea() { + if (this.targetRelativeMousePoint.x < CHECK_RATE) { + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, this.renderPathForVerties([this.targetOriginPosition[0], this.targetOriginPosition[3]], "flex-target")); } else { - _target.set(x, y, z); + return /* @__PURE__ */ createElementJsx(FragmentInstance, null, this.renderPathForVerties([this.targetOriginPosition[1], this.targetOriginPosition[2]], "flex-target")); } - const parent = this.parent; - this.updateWorldMatrix(true, false); - _position$3.setFromMatrixPosition(this.matrixWorld); - if (this.isCamera || this.isLight) { - _m1$1.lookAt(_position$3, _target, this.up); - } else { - _m1$1.lookAt(_target, _position$3, this.up); + } + renderLayoutFlexForFirstItem(direction2) { + const isColumn = direction2 === FlexDirection.COLUMN; + const verticalField = isColumn ? "align-items" : "justify-content"; + const verticalConst = isColumn ? AlignItems : JustifyContent; + const horizontalField = isColumn ? "justify-content" : "align-items"; + const horizontalConst = isColumn ? JustifyContent : AlignItems; + const rect2 = vertiesToRectangle(this.targetOriginPosition); + const center2 = this.ghostScreenVerties[4]; + const width2 = dist(this.ghostScreenVerties[0], this.ghostScreenVerties[1]); + const height2 = dist(this.ghostScreenVerties[0], this.ghostScreenVerties[3]); + let newCenterX = width2 / 2; + let newCenterY = height2 / 2; + switch (this.targetItem[verticalField]) { + case verticalConst.FLEX_START: + newCenterX = rect2.x + width2 / 2; + break; + case verticalConst.CENTER: + case verticalConst.SPACE_BETWEEN: + case verticalConst.SPACE_AROUND: + newCenterX = rect2.x + rect2.width / 2; + break; + case verticalConst.FLEX_END: + newCenterX = rect2.x + rect2.width - width2 / 2; + break; } - this.quaternion.setFromRotationMatrix(_m1$1); - if (parent) { - _m1$1.extractRotation(parent.matrixWorld); - _q1.setFromRotationMatrix(_m1$1); - this.quaternion.premultiply(_q1.invert()); + switch (this.targetItem[horizontalField]) { + case horizontalConst.FLEX_START: + newCenterY = rect2.y + height2 / 2; + break; + case horizontalConst.CENTER: + case horizontalConst.SPACE_BETWEEN: + case horizontalConst.SPACE_AROUND: + newCenterY = rect2.y + rect2.height / 2; + break; + case horizontalConst.FLEX_END: + newCenterY = rect2.y + rect2.height - height2 / 2; + break; } + const newDist = subtract([], [newCenterX, newCenterY, 0], center2); + const renderVerties = this.ghostScreenVerties.map((it) => add$1([], it, newDist)).filter((it, index2) => index2 < 4); + return this.renderPathForVerties(renderVerties, "flex-item", "ghost"); } - add(object) { - if (arguments.length > 1) { - for (let i = 0; i < arguments.length; i++) { - this.add(arguments[i]); - } - return this; - } - if (object === this) { - console.error("THREE.Object3D.add: object can't be added as a child of itself.", object); - return this; + renderLayoutFlexColumnArea() { + if (this.targetRelativeMousePoint.y < 0) { + return ""; } - if (object && object.isObject3D) { - if (object.parent !== null) { - object.parent.remove(object); - } - object.parent = this; - this.children.push(object); - object.dispatchEvent(_addedEvent); + if (this.targetRelativeMousePoint.y < CHECK_RATE) { + return this.renderPathForVerties([this.targetOriginPosition[0], this.targetOriginPosition[1]], "flex-target"); } else { - console.error("THREE.Object3D.add: object not an instance of THREE.Object3D.", object); + return this.renderPathForVerties([this.targetOriginPosition[2], this.targetOriginPosition[3]], "flex-target"); } - return this; } - remove(object) { - if (arguments.length > 1) { - for (let i = 0; i < arguments.length; i++) { - this.remove(arguments[i]); - } - return this; + renderLayoutItemInsertArea() { + if (!this.targetParent) { + return; } - const index2 = this.children.indexOf(object); - if (index2 !== -1) { - object.parent = null; - this.children.splice(index2, 1); - object.dispatchEvent(_removedEvent); + if (this.targetParent.hasLayout()) { + if (this.targetParent.isLayout(Layout.FLEX)) { + switch (this.targetParent.flexDirection) { + case FlexDirection.ROW: + return this.renderLayoutFlexRowArea(); + case FlexDirection.COLUMN: + return this.renderLayoutFlexColumnArea(); + } + } else if (this.targetParent.isLayout(Layout.GRID)) + ; } - return this; + return /* @__PURE__ */ createElementJsx("path", { + class: "insert-area", + d: `` + }); } - removeFromParent() { - const parent = this.parent; - if (parent !== null) { - parent.remove(this); + renderLayoutItemForFirst() { + var _a; + if (((_a = this.targetItem) == null ? void 0 : _a.hasChildren()) === false) { + if (this.targetItem.isLayout(Layout.FLEX)) { + return this.renderLayoutFlexForFirstItem(this.targetItem.flexDirection); + } else if (this.targetItem.isLayout(Layout.GRID)) + ; } - return this; + return /* @__PURE__ */ createElementJsx("path", { + class: "insert-area", + d: `` + }); } - clear() { - for (let i = 0; i < this.children.length; i++) { - const object = this.children[i]; - object.parent = null; - object.dispatchEvent(_removedEvent); + [LOAD("$view") + DOMDIFF]() { + var _a; + const current = this.$context.selection.current; + if (!this.ghostVerties || !current) { + return /* @__PURE__ */ createElementJsx("svg", null); } - this.children.length = 0; - return this; + const hasTargetView = ((_a = this.targetItem) == null ? void 0 : _a.id) !== current.id; + return /* @__PURE__ */ createElementJsx("svg", null, this.targetParent && this.renderPathForVerties(this.targetParentPosition, "target-parent"), hasTargetView && this.renderPathForVerties(this.targetOriginPosition, "target", ""), hasTargetView && this.renderPathForVerties(this.targetOriginPosition, "target-rect", ""), hasTargetView ? this.renderLayoutItemInsertArea() : "", hasTargetView ? this.renderLayoutItemForFirst() : "", this.isLayoutItem && this.renderPathForVerties(this.ghostScreenVerties.filter((_, index2) => index2 < 4), "ghost")); } - attach(object) { - this.updateWorldMatrix(true, false); - _m1$1.copy(this.matrixWorld).invert(); - if (object.parent !== null) { - object.parent.updateWorldMatrix(true, false); - _m1$1.multiply(object.parent.matrixWorld); - } - object.applyMatrix4(_m1$1); - this.add(object); - object.updateWorldMatrix(false, true); - return this; + initializeGhostView() { + this.isLayoutItem = false; + this.ghostVerties = void 0; + this.ghostScreenVerties = void 0; + this.targetOriginPosition = void 0; + this.targetOriginPosition = void 0; + this.targetRelativeMousePoint = void 0; + this.targetItem = void 0; + this.targetParent = void 0; + this.targetParentPosition = void 0; + this.$context.selection.updateDragTargetItem(this.targetItem); } - getObjectById(id) { - return this.getObjectByProperty("id", id); + getDist() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); + return newDist; } - getObjectByName(name) { - return this.getObjectByProperty("name", name); + insertToBackground() { + const current = this.$context.selection.current; + const newDist = this.getDist(); + if (current.isLayoutItem() === false) + return; + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.$context.selection.currentProject, newDist); } - getObjectByProperty(name, value) { - if (this[name] === value) - return this; - for (let i = 0, l = this.children.length; i < l; i++) { - const child = this.children[i]; - const object = child.getObjectByProperty(name, value); - if (object !== void 0) { - return object; + getTargetAction() { + let targetAction = ""; + if (this.targetParent.hasLayout()) { + if (this.targetParent.isLayout(Layout.FLEX)) { + switch (this.targetParent.flexDirection) { + case FlexDirection.ROW: + if (this.targetRelativeMousePoint.x < CHECK_RATE) { + targetAction = TargetActionType.INSERT_BEFORE; + } else { + targetAction = TargetActionType.INSERT_AFTER; + } + break; + case FlexDirection.COLUMN: + if (this.targetRelativeMousePoint.y < CHECK_RATE) { + targetAction = TargetActionType.INSERT_BEFORE; + } else { + targetAction = TargetActionType.INSERT_AFTER; + } + break; + } } } - return void 0; - } - getWorldPosition(target) { - this.updateWorldMatrix(true, false); - return target.setFromMatrixPosition(this.matrixWorld); - } - getWorldQuaternion(target) { - this.updateWorldMatrix(true, false); - this.matrixWorld.decompose(_position$3, target, _scale$2); - return target; - } - getWorldScale(target) { - this.updateWorldMatrix(true, false); - this.matrixWorld.decompose(_position$3, _quaternion$2, target); - return target; - } - getWorldDirection(target) { - this.updateWorldMatrix(true, false); - const e = this.matrixWorld.elements; - return target.set(e[8], e[9], e[10]).normalize(); - } - raycast() { + return targetAction; } - traverse(callback) { - callback(this); - const children2 = this.children; - for (let i = 0, l = children2.length; i < l; i++) { - children2[i].traverse(callback); + insertToLayoutItem() { + const current = this.$context.selection.current; + const newDist = this.getDist(); + if (this.targetParent.hasLayout()) { + let targetAction = this.getTargetAction(); + if (this.targetParent.isLayout(Layout.FLEX)) { + if (targetAction) { + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist, targetAction); + } + } else if (this.targetParent.isLayout(Layout.GRID)) { + this.insertToGridItem(); + } } } - traverseVisible(callback) { - if (this.visible === false) + insertToGridItem() { + const current = this.$context.selection.current; + const { info, items } = this.$context.selection.gridInformation || { + items: [] + }; + const currentVerties = this.ghostVerties.filter((_, index2) => index2 < 4); + const targetRect = vertiesToRectangle(currentVerties); + const epsilon = IntersectEpsilonNumberType.RECT / this.$context.viewport.scale; + const checkedItems = items == null ? void 0 : items.filter((it) => { + return polyPoly(it.originVerties, currentVerties); + }).filter((it) => { + const intersect = intersectRectRect(it.originRect, targetRect); + return Math.floor(intersect.width) > epsilon && Math.floor(intersect.height) > epsilon; + }); + if (checkedItems == null ? void 0 : checkedItems.length) { + const columnList = checkedItems.map((it) => it.column); + const rowList = checkedItems.map((it) => it.row); + const columnStart = Math.min(...columnList); + const rowStart = Math.min(...rowList); + const columnEnd = Math.max(...columnList) + 1; + const rowEnd = Math.max(...rowList) + 1; + this.$commands.executeCommand("setAttribute", "change grid item", this.$context.selection.packByValue({ + "grid-column-start": columnStart, + "grid-column-end": columnEnd, + "grid-row-start": rowStart, + "grid-row-end": rowEnd + })); + if (info.current.hasChild(current.id) === false) { + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, info.current, void 0); + } return; - callback(this); - const children2 = this.children; - for (let i = 0, l = children2.length; i < l; i++) { - children2[i].traverseVisible(callback); - } - } - traverseAncestors(callback) { - const parent = this.parent; - if (parent !== null) { - callback(parent); - parent.traverseAncestors(callback); - } - } - updateMatrix() { - this.matrix.compose(this.position, this.quaternion, this.scale); - this.matrixWorldNeedsUpdate = true; - } - updateMatrixWorld(force) { - if (this.matrixAutoUpdate) - this.updateMatrix(); - if (this.matrixWorldNeedsUpdate || force) { - if (this.parent === null) { - this.matrixWorld.copy(this.matrix); - } else { - this.matrixWorld.multiplyMatrices(this.parent.matrixWorld, this.matrix); + } else { + if (this.targetItem) { + this.emit("refreshGridToolInfo", this.targetItem); + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, void 0); } - this.matrixWorldNeedsUpdate = false; - force = true; - } - const children2 = this.children; - for (let i = 0, l = children2.length; i < l; i++) { - children2[i].updateMatrixWorld(force); } } - updateWorldMatrix(updateParents, updateChildren) { - const parent = this.parent; - if (updateParents === true && parent !== null) { - parent.updateWorldMatrix(true, false); + updateLayer() { + var _a; + const current = this.$context.selection.current; + if (!current) + return; + const newDist = this.getDist(); + if (newDist[0] === 0 && newDist[1] === 0) { + return; } - if (this.matrixAutoUpdate) - this.updateMatrix(); - if (this.parent === null) { - this.matrixWorld.copy(this.matrix); - } else { - this.matrixWorld.multiplyMatrices(this.parent.matrixWorld, this.matrix); - } - if (updateChildren === true) { - const children2 = this.children; - for (let i = 0, l = children2.length; i < l; i++) { - children2[i].updateWorldMatrix(false, true); - } - } - } - toJSON(meta) { - const isRootObject = meta === void 0 || typeof meta === "string"; - const output = {}; - if (isRootObject) { - meta = { - geometries: {}, - materials: {}, - textures: {}, - images: {}, - shapes: {}, - skeletons: {}, - animations: {}, - nodes: {} - }; - output.metadata = { - version: 4.5, - type: "Object", - generator: "Object3D.toJSON" - }; + if (this.targetItem && this.targetItem.id === (current == null ? void 0 : current.id)) { + return; } - const object = {}; - object.uuid = this.uuid; - object.type = this.type; - if (this.name !== "") - object.name = this.name; - if (this.castShadow === true) - object.castShadow = true; - if (this.receiveShadow === true) - object.receiveShadow = true; - if (this.visible === false) - object.visible = false; - if (this.frustumCulled === false) - object.frustumCulled = false; - if (this.renderOrder !== 0) - object.renderOrder = this.renderOrder; - if (JSON.stringify(this.userData) !== "{}") - object.userData = this.userData; - object.layers = this.layers.mask; - object.matrix = this.matrix.toArray(); - if (this.matrixAutoUpdate === false) - object.matrixAutoUpdate = false; - if (this.isInstancedMesh) { - object.type = "InstancedMesh"; - object.count = this.count; - object.instanceMatrix = this.instanceMatrix.toJSON(); - if (this.instanceColor !== null) - object.instanceColor = this.instanceColor.toJSON(); - } - function serialize(library, element) { - if (library[element.uuid] === void 0) { - library[element.uuid] = element.toJSON(meta); - } - return element.uuid; - } - if (this.isScene) { - if (this.background) { - if (this.background.isColor) { - object.background = this.background.toJSON(); - } else if (this.background.isTexture) { - object.background = this.background.toJSON(meta).uuid; - } - } - if (this.environment && this.environment.isTexture) { - object.environment = this.environment.toJSON(meta).uuid; - } - } else if (this.isMesh || this.isLine || this.isPoints) { - object.geometry = serialize(meta.geometries, this.geometry); - const parameters = this.geometry.parameters; - if (parameters !== void 0 && parameters.shapes !== void 0) { - const shapes = parameters.shapes; - if (Array.isArray(shapes)) { - for (let i = 0, l = shapes.length; i < l; i++) { - const shape2 = shapes[i]; - serialize(meta.shapes, shape2); + if (!this.targetItem) { + this.insertToBackground(); + return; + } + if (this.targetItem.hasLayout()) { + const isCtrl = this.$context.keyboardManager.isCtrl(); + if (((_a = this.targetItem) == null ? void 0 : _a.hasChildren()) === false && this.targetItem.isLayout(Layout.FLEX) && isCtrl === false) { + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist); + return; + } else { + if (isCtrl) { + const { info } = this.$context.selection.gridInformation || { + items: [] + }; + if (info == null ? void 0 : info.current) { + this.insertToGridItem(); + return; } } else { - serialize(meta.shapes, shapes); - } - } - } - if (this.isSkinnedMesh) { - object.bindMode = this.bindMode; - object.bindMatrix = this.bindMatrix.toArray(); - if (this.skeleton !== void 0) { - serialize(meta.skeletons, this.skeleton); - object.skeleton = this.skeleton.uuid; - } - } - if (this.material !== void 0) { - if (Array.isArray(this.material)) { - const uuids = []; - for (let i = 0, l = this.material.length; i < l; i++) { - uuids.push(serialize(meta.materials, this.material[i])); + if (this.targetItem.isLayout(Layout.GRID)) { + this.insertToGridItem(); + return; + } } - object.material = uuids; - } else { - object.material = serialize(meta.materials, this.material); - } - } - if (this.children.length > 0) { - object.children = []; - for (let i = 0; i < this.children.length; i++) { - object.children.push(this.children[i].toJSON(meta).object); - } - } - if (this.animations.length > 0) { - object.animations = []; - for (let i = 0; i < this.animations.length; i++) { - const animation2 = this.animations[i]; - object.animations.push(serialize(meta.animations, animation2)); - } - } - if (isRootObject) { - const geometries = extractFromCache(meta.geometries); - const materials = extractFromCache(meta.materials); - const textures = extractFromCache(meta.textures); - const images = extractFromCache(meta.images); - const shapes = extractFromCache(meta.shapes); - const skeletons = extractFromCache(meta.skeletons); - const animations = extractFromCache(meta.animations); - const nodes = extractFromCache(meta.nodes); - if (geometries.length > 0) - output.geometries = geometries; - if (materials.length > 0) - output.materials = materials; - if (textures.length > 0) - output.textures = textures; - if (images.length > 0) - output.images = images; - if (shapes.length > 0) - output.shapes = shapes; - if (skeletons.length > 0) - output.skeletons = skeletons; - if (animations.length > 0) - output.animations = animations; - if (nodes.length > 0) - output.nodes = nodes; - } - output.object = object; - return output; - function extractFromCache(cache) { - const values = []; - for (const key in cache) { - const data = cache[key]; - delete data.metadata; - values.push(data); - } - return values; - } - } - clone(recursive) { - return new this.constructor().copy(this, recursive); - } - copy(source2, recursive = true) { - this.name = source2.name; - this.up.copy(source2.up); - this.position.copy(source2.position); - this.rotation.order = source2.rotation.order; - this.quaternion.copy(source2.quaternion); - this.scale.copy(source2.scale); - this.matrix.copy(source2.matrix); - this.matrixWorld.copy(source2.matrixWorld); - this.matrixAutoUpdate = source2.matrixAutoUpdate; - this.matrixWorldNeedsUpdate = source2.matrixWorldNeedsUpdate; - this.layers.mask = source2.layers.mask; - this.visible = source2.visible; - this.castShadow = source2.castShadow; - this.receiveShadow = source2.receiveShadow; - this.frustumCulled = source2.frustumCulled; - this.renderOrder = source2.renderOrder; - this.userData = JSON.parse(JSON.stringify(source2.userData)); - if (recursive === true) { - for (let i = 0; i < source2.children.length; i++) { - const child = source2.children[i]; - this.add(child.clone()); } } - return this; - } -} -Object3D.DefaultUp = new Vector3(0, 1, 0); -Object3D.DefaultMatrixAutoUpdate = true; -Object3D.prototype.isObject3D = true; -const _v0$1 = /* @__PURE__ */ new Vector3(); -const _v1$3 = /* @__PURE__ */ new Vector3(); -const _v2$2 = /* @__PURE__ */ new Vector3(); -const _v3$1 = /* @__PURE__ */ new Vector3(); -const _vab = /* @__PURE__ */ new Vector3(); -const _vac = /* @__PURE__ */ new Vector3(); -const _vbc = /* @__PURE__ */ new Vector3(); -const _vap = /* @__PURE__ */ new Vector3(); -const _vbp = /* @__PURE__ */ new Vector3(); -const _vcp = /* @__PURE__ */ new Vector3(); -class Triangle { - constructor(a = new Vector3(), b = new Vector3(), c2 = new Vector3()) { - this.a = a; - this.b = b; - this.c = c2; - } - static getNormal(a, b, c2, target) { - target.subVectors(c2, b); - _v0$1.subVectors(a, b); - target.cross(_v0$1); - const targetLengthSq = target.lengthSq(); - if (targetLengthSq > 0) { - return target.multiplyScalar(1 / Math.sqrt(targetLengthSq)); - } - return target.set(0, 0, 0); - } - static getBarycoord(point2, a, b, c2, target) { - _v0$1.subVectors(c2, a); - _v1$3.subVectors(b, a); - _v2$2.subVectors(point2, a); - const dot00 = _v0$1.dot(_v0$1); - const dot01 = _v0$1.dot(_v1$3); - const dot02 = _v0$1.dot(_v2$2); - const dot11 = _v1$3.dot(_v1$3); - const dot12 = _v1$3.dot(_v2$2); - const denom = dot00 * dot11 - dot01 * dot01; - if (denom === 0) { - return target.set(-2, -1, -1); - } - const invDenom = 1 / denom; - const u = (dot11 * dot02 - dot01 * dot12) * invDenom; - const v = (dot00 * dot12 - dot01 * dot02) * invDenom; - return target.set(1 - u - v, v, u); - } - static containsPoint(point2, a, b, c2) { - this.getBarycoord(point2, a, b, c2, _v3$1); - return _v3$1.x >= 0 && _v3$1.y >= 0 && _v3$1.x + _v3$1.y <= 1; - } - static getUV(point2, p1, p2, p3, uv1, uv2, uv3, target) { - this.getBarycoord(point2, p1, p2, p3, _v3$1); - target.set(0, 0); - target.addScaledVector(uv1, _v3$1.x); - target.addScaledVector(uv2, _v3$1.y); - target.addScaledVector(uv3, _v3$1.z); - return target; - } - static isFrontFacing(a, b, c2, direction2) { - _v0$1.subVectors(c2, b); - _v1$3.subVectors(a, b); - return _v0$1.cross(_v1$3).dot(direction2) < 0 ? true : false; - } - set(a, b, c2) { - this.a.copy(a); - this.b.copy(b); - this.c.copy(c2); - return this; - } - setFromPointsAndIndices(points, i0, i1, i2) { - this.a.copy(points[i0]); - this.b.copy(points[i1]); - this.c.copy(points[i2]); - return this; - } - setFromAttributeAndIndices(attribute, i0, i1, i2) { - this.a.fromBufferAttribute(attribute, i0); - this.b.fromBufferAttribute(attribute, i1); - this.c.fromBufferAttribute(attribute, i2); - return this; - } - clone() { - return new this.constructor().copy(this); - } - copy(triangle) { - this.a.copy(triangle.a); - this.b.copy(triangle.b); - this.c.copy(triangle.c); - return this; - } - getArea() { - _v0$1.subVectors(this.c, this.b); - _v1$3.subVectors(this.a, this.b); - return _v0$1.cross(_v1$3).length() * 0.5; - } - getMidpoint(target) { - return target.addVectors(this.a, this.b).add(this.c).multiplyScalar(1 / 3); - } - getNormal(target) { - return Triangle.getNormal(this.a, this.b, this.c, target); - } - getPlane(target) { - return target.setFromCoplanarPoints(this.a, this.b, this.c); - } - getBarycoord(point2, target) { - return Triangle.getBarycoord(point2, this.a, this.b, this.c, target); - } - getUV(point2, uv1, uv2, uv3, target) { - return Triangle.getUV(point2, this.a, this.b, this.c, uv1, uv2, uv3, target); - } - containsPoint(point2) { - return Triangle.containsPoint(point2, this.a, this.b, this.c); - } - isFrontFacing(direction2) { - return Triangle.isFrontFacing(this.a, this.b, this.c, direction2); - } - intersectsBox(box) { - return box.intersectsTriangle(this); - } - closestPointToPoint(p, target) { - const a = this.a, b = this.b, c2 = this.c; - let v, w; - _vab.subVectors(b, a); - _vac.subVectors(c2, a); - _vap.subVectors(p, a); - const d1 = _vab.dot(_vap); - const d2 = _vac.dot(_vap); - if (d1 <= 0 && d2 <= 0) { - return target.copy(a); - } - _vbp.subVectors(p, b); - const d3 = _vab.dot(_vbp); - const d4 = _vac.dot(_vbp); - if (d3 >= 0 && d4 <= d3) { - return target.copy(b); - } - const vc = d1 * d4 - d3 * d2; - if (vc <= 0 && d1 >= 0 && d3 <= 0) { - v = d1 / (d1 - d3); - return target.copy(a).addScaledVector(_vab, v); - } - _vcp.subVectors(p, c2); - const d5 = _vab.dot(_vcp); - const d6 = _vac.dot(_vcp); - if (d6 >= 0 && d5 <= d6) { - return target.copy(c2); - } - const vb = d5 * d2 - d1 * d6; - if (vb <= 0 && d2 >= 0 && d6 <= 0) { - w = d2 / (d2 - d6); - return target.copy(a).addScaledVector(_vac, w); - } - const va = d3 * d6 - d5 * d4; - if (va <= 0 && d4 - d3 >= 0 && d5 - d6 >= 0) { - _vbc.subVectors(c2, b); - w = (d4 - d3) / (d4 - d3 + (d5 - d6)); - return target.copy(b).addScaledVector(_vbc, w); - } - const denom = 1 / (va + vb + vc); - v = vb * denom; - w = vc * denom; - return target.copy(a).addScaledVector(_vab, v).addScaledVector(_vac, w); - } - equals(triangle) { - return triangle.a.equals(this.a) && triangle.b.equals(this.b) && triangle.c.equals(this.c); - } -} -let materialId = 0; -class Material extends EventDispatcher { - constructor() { - super(); - Object.defineProperty(this, "id", { value: materialId++ }); - this.uuid = generateUUID(); - this.name = ""; - this.type = "Material"; - this.fog = true; - this.blending = NormalBlending; - this.side = FrontSide; - this.vertexColors = false; - this.opacity = 1; - this.transparent = false; - this.blendSrc = SrcAlphaFactor; - this.blendDst = OneMinusSrcAlphaFactor; - this.blendEquation = AddEquation; - this.blendSrcAlpha = null; - this.blendDstAlpha = null; - this.blendEquationAlpha = null; - this.depthFunc = LessEqualDepth; - this.depthTest = true; - this.depthWrite = true; - this.stencilWriteMask = 255; - this.stencilFunc = AlwaysStencilFunc; - this.stencilRef = 0; - this.stencilFuncMask = 255; - this.stencilFail = KeepStencilOp; - this.stencilZFail = KeepStencilOp; - this.stencilZPass = KeepStencilOp; - this.stencilWrite = false; - this.clippingPlanes = null; - this.clipIntersection = false; - this.clipShadows = false; - this.shadowSide = null; - this.colorWrite = true; - this.precision = null; - this.polygonOffset = false; - this.polygonOffsetFactor = 0; - this.polygonOffsetUnits = 0; - this.dithering = false; - this.alphaToCoverage = false; - this.premultipliedAlpha = false; - this.visible = true; - this.toneMapped = true; - this.userData = {}; - this.version = 0; - this._alphaTest = 0; - } - get alphaTest() { - return this._alphaTest; - } - set alphaTest(value) { - if (this._alphaTest > 0 !== value > 0) { - this.version++; - } - this._alphaTest = value; - } - onBuild() { - } - onBeforeRender() { - } - onBeforeCompile() { - } - customProgramCacheKey() { - return this.onBeforeCompile.toString(); - } - setValues(values) { - if (values === void 0) + if (this.targetParent) { + this.insertToLayoutItem(); return; - for (const key in values) { - const newValue = values[key]; - if (newValue === void 0) { - console.warn("THREE.Material: '" + key + "' parameter is undefined."); - continue; - } - if (key === "shading") { - console.warn("THREE." + this.type + ": .shading has been removed. Use the boolean .flatShading instead."); - this.flatShading = newValue === FlatShading ? true : false; - continue; - } - const currentValue = this[key]; - if (currentValue === void 0) { - console.warn("THREE." + this.type + ": '" + key + "' is not a property of this material."); - continue; - } - if (currentValue && currentValue.isColor) { - currentValue.set(newValue); - } else if (currentValue && currentValue.isVector3 && (newValue && newValue.isVector3)) { - currentValue.copy(newValue); - } else { - this[key] = newValue; - } } - } - toJSON(meta) { - const isRootObject = meta === void 0 || typeof meta === "string"; - if (isRootObject) { - meta = { - textures: {}, - images: {} - }; - } - const data = { - metadata: { - version: 4.5, - type: "Material", - generator: "Material.toJSON" - } - }; - data.uuid = this.uuid; - data.type = this.type; - if (this.name !== "") - data.name = this.name; - if (this.color && this.color.isColor) - data.color = this.color.getHex(); - if (this.roughness !== void 0) - data.roughness = this.roughness; - if (this.metalness !== void 0) - data.metalness = this.metalness; - if (this.sheen !== void 0) - data.sheen = this.sheen; - if (this.sheenColor && this.sheenColor.isColor) - data.sheenColor = this.sheenColor.getHex(); - if (this.sheenRoughness !== void 0) - data.sheenRoughness = this.sheenRoughness; - if (this.emissive && this.emissive.isColor) - data.emissive = this.emissive.getHex(); - if (this.emissiveIntensity && this.emissiveIntensity !== 1) - data.emissiveIntensity = this.emissiveIntensity; - if (this.specular && this.specular.isColor) - data.specular = this.specular.getHex(); - if (this.specularIntensity !== void 0) - data.specularIntensity = this.specularIntensity; - if (this.specularColor && this.specularColor.isColor) - data.specularColor = this.specularColor.getHex(); - if (this.shininess !== void 0) - data.shininess = this.shininess; - if (this.clearcoat !== void 0) - data.clearcoat = this.clearcoat; - if (this.clearcoatRoughness !== void 0) - data.clearcoatRoughness = this.clearcoatRoughness; - if (this.clearcoatMap && this.clearcoatMap.isTexture) { - data.clearcoatMap = this.clearcoatMap.toJSON(meta).uuid; - } - if (this.clearcoatRoughnessMap && this.clearcoatRoughnessMap.isTexture) { - data.clearcoatRoughnessMap = this.clearcoatRoughnessMap.toJSON(meta).uuid; - } - if (this.clearcoatNormalMap && this.clearcoatNormalMap.isTexture) { - data.clearcoatNormalMap = this.clearcoatNormalMap.toJSON(meta).uuid; - data.clearcoatNormalScale = this.clearcoatNormalScale.toArray(); - } - if (this.map && this.map.isTexture) - data.map = this.map.toJSON(meta).uuid; - if (this.matcap && this.matcap.isTexture) - data.matcap = this.matcap.toJSON(meta).uuid; - if (this.alphaMap && this.alphaMap.isTexture) - data.alphaMap = this.alphaMap.toJSON(meta).uuid; - if (this.lightMap && this.lightMap.isTexture) { - data.lightMap = this.lightMap.toJSON(meta).uuid; - data.lightMapIntensity = this.lightMapIntensity; - } - if (this.aoMap && this.aoMap.isTexture) { - data.aoMap = this.aoMap.toJSON(meta).uuid; - data.aoMapIntensity = this.aoMapIntensity; - } - if (this.bumpMap && this.bumpMap.isTexture) { - data.bumpMap = this.bumpMap.toJSON(meta).uuid; - data.bumpScale = this.bumpScale; - } - if (this.normalMap && this.normalMap.isTexture) { - data.normalMap = this.normalMap.toJSON(meta).uuid; - data.normalMapType = this.normalMapType; - data.normalScale = this.normalScale.toArray(); - } - if (this.displacementMap && this.displacementMap.isTexture) { - data.displacementMap = this.displacementMap.toJSON(meta).uuid; - data.displacementScale = this.displacementScale; - data.displacementBias = this.displacementBias; - } - if (this.roughnessMap && this.roughnessMap.isTexture) - data.roughnessMap = this.roughnessMap.toJSON(meta).uuid; - if (this.metalnessMap && this.metalnessMap.isTexture) - data.metalnessMap = this.metalnessMap.toJSON(meta).uuid; - if (this.emissiveMap && this.emissiveMap.isTexture) - data.emissiveMap = this.emissiveMap.toJSON(meta).uuid; - if (this.specularMap && this.specularMap.isTexture) - data.specularMap = this.specularMap.toJSON(meta).uuid; - if (this.specularIntensityMap && this.specularIntensityMap.isTexture) - data.specularIntensityMap = this.specularIntensityMap.toJSON(meta).uuid; - if (this.specularColorMap && this.specularColorMap.isTexture) - data.specularColorMap = this.specularColorMap.toJSON(meta).uuid; - if (this.envMap && this.envMap.isTexture) { - data.envMap = this.envMap.toJSON(meta).uuid; - if (this.combine !== void 0) - data.combine = this.combine; - } - if (this.envMapIntensity !== void 0) - data.envMapIntensity = this.envMapIntensity; - if (this.reflectivity !== void 0) - data.reflectivity = this.reflectivity; - if (this.refractionRatio !== void 0) - data.refractionRatio = this.refractionRatio; - if (this.gradientMap && this.gradientMap.isTexture) { - data.gradientMap = this.gradientMap.toJSON(meta).uuid; - } - if (this.transmission !== void 0) - data.transmission = this.transmission; - if (this.transmissionMap && this.transmissionMap.isTexture) - data.transmissionMap = this.transmissionMap.toJSON(meta).uuid; - if (this.thickness !== void 0) - data.thickness = this.thickness; - if (this.thicknessMap && this.thicknessMap.isTexture) - data.thicknessMap = this.thicknessMap.toJSON(meta).uuid; - if (this.attenuationDistance !== void 0) - data.attenuationDistance = this.attenuationDistance; - if (this.attenuationColor !== void 0) - data.attenuationColor = this.attenuationColor.getHex(); - if (this.size !== void 0) - data.size = this.size; - if (this.shadowSide !== null) - data.shadowSide = this.shadowSide; - if (this.sizeAttenuation !== void 0) - data.sizeAttenuation = this.sizeAttenuation; - if (this.blending !== NormalBlending) - data.blending = this.blending; - if (this.side !== FrontSide) - data.side = this.side; - if (this.vertexColors) - data.vertexColors = true; - if (this.opacity < 1) - data.opacity = this.opacity; - if (this.transparent === true) - data.transparent = this.transparent; - data.depthFunc = this.depthFunc; - data.depthTest = this.depthTest; - data.depthWrite = this.depthWrite; - data.colorWrite = this.colorWrite; - data.stencilWrite = this.stencilWrite; - data.stencilWriteMask = this.stencilWriteMask; - data.stencilFunc = this.stencilFunc; - data.stencilRef = this.stencilRef; - data.stencilFuncMask = this.stencilFuncMask; - data.stencilFail = this.stencilFail; - data.stencilZFail = this.stencilZFail; - data.stencilZPass = this.stencilZPass; - if (this.rotation !== void 0 && this.rotation !== 0) - data.rotation = this.rotation; - if (this.polygonOffset === true) - data.polygonOffset = true; - if (this.polygonOffsetFactor !== 0) - data.polygonOffsetFactor = this.polygonOffsetFactor; - if (this.polygonOffsetUnits !== 0) - data.polygonOffsetUnits = this.polygonOffsetUnits; - if (this.linewidth !== void 0 && this.linewidth !== 1) - data.linewidth = this.linewidth; - if (this.dashSize !== void 0) - data.dashSize = this.dashSize; - if (this.gapSize !== void 0) - data.gapSize = this.gapSize; - if (this.scale !== void 0) - data.scale = this.scale; - if (this.dithering === true) - data.dithering = true; - if (this.alphaTest > 0) - data.alphaTest = this.alphaTest; - if (this.alphaToCoverage === true) - data.alphaToCoverage = this.alphaToCoverage; - if (this.premultipliedAlpha === true) - data.premultipliedAlpha = this.premultipliedAlpha; - if (this.wireframe === true) - data.wireframe = this.wireframe; - if (this.wireframeLinewidth > 1) - data.wireframeLinewidth = this.wireframeLinewidth; - if (this.wireframeLinecap !== "round") - data.wireframeLinecap = this.wireframeLinecap; - if (this.wireframeLinejoin !== "round") - data.wireframeLinejoin = this.wireframeLinejoin; - if (this.flatShading === true) - data.flatShading = this.flatShading; - if (this.visible === false) - data.visible = false; - if (this.toneMapped === false) - data.toneMapped = false; - if (JSON.stringify(this.userData) !== "{}") - data.userData = this.userData; - function extractFromCache(cache) { - const values = []; - for (const key in cache) { - const data2 = cache[key]; - delete data2.metadata; - values.push(data2); - } - return values; - } - if (isRootObject) { - const textures = extractFromCache(meta.textures); - const images = extractFromCache(meta.images); - if (textures.length > 0) - data.textures = textures; - if (images.length > 0) - data.images = images; + if (current.isLayoutItem() && current.parent.id !== this.targetItem.id) { + this.$commands.executeCommand("moveLayerToTarget", "change target with move", current, this.targetItem, newDist); } - return data; } - clone() { - return new this.constructor().copy(this); - } - copy(source2) { - this.name = source2.name; - this.fog = source2.fog; - this.blending = source2.blending; - this.side = source2.side; - this.vertexColors = source2.vertexColors; - this.opacity = source2.opacity; - this.transparent = source2.transparent; - this.blendSrc = source2.blendSrc; - this.blendDst = source2.blendDst; - this.blendEquation = source2.blendEquation; - this.blendSrcAlpha = source2.blendSrcAlpha; - this.blendDstAlpha = source2.blendDstAlpha; - this.blendEquationAlpha = source2.blendEquationAlpha; - this.depthFunc = source2.depthFunc; - this.depthTest = source2.depthTest; - this.depthWrite = source2.depthWrite; - this.stencilWriteMask = source2.stencilWriteMask; - this.stencilFunc = source2.stencilFunc; - this.stencilRef = source2.stencilRef; - this.stencilFuncMask = source2.stencilFuncMask; - this.stencilFail = source2.stencilFail; - this.stencilZFail = source2.stencilZFail; - this.stencilZPass = source2.stencilZPass; - this.stencilWrite = source2.stencilWrite; - const srcPlanes = source2.clippingPlanes; - let dstPlanes = null; - if (srcPlanes !== null) { - const n = srcPlanes.length; - dstPlanes = new Array(n); - for (let i = 0; i !== n; ++i) { - dstPlanes[i] = srcPlanes[i].clone(); - } - } - this.clippingPlanes = dstPlanes; - this.clipIntersection = source2.clipIntersection; - this.clipShadows = source2.clipShadows; - this.shadowSide = source2.shadowSide; - this.colorWrite = source2.colorWrite; - this.precision = source2.precision; - this.polygonOffset = source2.polygonOffset; - this.polygonOffsetFactor = source2.polygonOffsetFactor; - this.polygonOffsetUnits = source2.polygonOffsetUnits; - this.dithering = source2.dithering; - this.alphaTest = source2.alphaTest; - this.alphaToCoverage = source2.alphaToCoverage; - this.premultipliedAlpha = source2.premultipliedAlpha; - this.visible = source2.visible; - this.toneMapped = source2.toneMapped; - this.userData = JSON.parse(JSON.stringify(source2.userData)); - return this; - } - dispose() { - this.dispatchEvent({ type: "dispose" }); - } - set needsUpdate(value) { - if (value === true) - this.version++; - } -} -Material.prototype.isMaterial = true; -Material.fromType = function() { - return null; -}; -class MeshBasicMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshBasicMaterial"; - this.color = new Color(16777215); - this.map = null; - this.lightMap = null; - this.lightMapIntensity = 1; - this.aoMap = null; - this.aoMapIntensity = 1; - this.specularMap = null; - this.alphaMap = null; - this.envMap = null; - this.combine = MultiplyOperation; - this.reflectivity = 1; - this.refractionRatio = 0.98; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.wireframeLinecap = "round"; - this.wireframeLinejoin = "round"; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.map = source2.map; - this.lightMap = source2.lightMap; - this.lightMapIntensity = source2.lightMapIntensity; - this.aoMap = source2.aoMap; - this.aoMapIntensity = source2.aoMapIntensity; - this.specularMap = source2.specularMap; - this.alphaMap = source2.alphaMap; - this.envMap = source2.envMap; - this.combine = source2.combine; - this.reflectivity = source2.reflectivity; - this.refractionRatio = source2.refractionRatio; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.wireframeLinecap = source2.wireframeLinecap; - this.wireframeLinejoin = source2.wireframeLinejoin; - return this; + [SUBSCRIBE("endGhostToolView")](hasMoved = false) { + if (hasMoved) { + this.updateLayer(); + } + this.initializeGhostView(); + this.load(); } } -MeshBasicMaterial.prototype.isMeshBasicMaterial = true; -const _vector$9 = /* @__PURE__ */ new Vector3(); -const _vector2$1 = /* @__PURE__ */ new Vector2(); -class BufferAttribute { - constructor(array, itemSize, normalized) { - if (Array.isArray(array)) { - throw new TypeError("THREE.BufferAttribute: array should be a Typed Array."); - } - this.name = ""; - this.array = array; - this.itemSize = itemSize; - this.count = array !== void 0 ? array.length / itemSize : 0; - this.normalized = normalized === true; - this.usage = StaticDrawUsage; - this.updateRange = { offset: 0, count: -1 }; - this.version = 0; - } - onUploadCallback() { - } - set needsUpdate(value) { - if (value === true) - this.version++; - } - setUsage(value) { - this.usage = value; - return this; +var SelectionView = ""; +var directionType$1 = { + 1: "to top left", + 2: "to top right", + 3: "to bottom right", + 4: "to bottom left", + 11: "to top", + 12: "to right", + 13: "to bottom", + 14: "to left" +}; +const SelectionToolEvent$1 = class extends EditorElement { + checkViewMode() { + return this.$modeView.isCurrentMode(ViewModeType.CanvasView); } - copy(source2) { - this.name = source2.name; - this.array = new source2.array.constructor(source2.array); - this.itemSize = source2.itemSize; - this.count = source2.count; - this.normalized = source2.normalized; - this.usage = source2.usage; - return this; + [SUBSCRIBE(REFRESH_SELECTION, REFRESH_SELECTION_TOOL) + IF("checkViewMode")]() { + if (this.$context.selection.isMany) { + this.initSelectionTool(); + } else { + this.hide(); + } } - copyAt(index1, attribute, index2) { - index1 *= this.itemSize; - index2 *= attribute.itemSize; - for (let i = 0, l = this.itemSize; i < l; i++) { - this.array[index1 + i] = attribute.array[index2 + i]; + [SUBSCRIBE(UPDATE_VIEWPORT) + IF("checkViewMode")]() { + if (this.$context.selection.isMany) { + this.initSelectionTool(); } - return this; } - copyArray(array) { - this.array.set(array); - return this; +}; +class GroupSelectionToolView extends SelectionToolEvent$1 { + template() { + return ` + + `; } - copyColorsArray(colors2) { - const array = this.array; - let offset = 0; - for (let i = 0, l = colors2.length; i < l; i++) { - let color2 = colors2[i]; - if (color2 === void 0) { - console.warn("THREE.BufferAttribute.copyColorsArray(): color is undefined", i); - color2 = new Color(); - } - array[offset++] = color2.r; - array[offset++] = color2.g; - array[offset++] = color2.b; - } - return this; + toggleEditingPath(isEditingPath) { + this.refs.$selectionView.toggleClass("editing-path", isEditingPath); } - copyVector2sArray(vectors) { - const array = this.array; - let offset = 0; - for (let i = 0, l = vectors.length; i < l; i++) { - let vector = vectors[i]; - if (vector === void 0) { - console.warn("THREE.BufferAttribute.copyVector2sArray(): vector is undefined", i); - vector = new Vector2(); - } - array[offset++] = vector.x; - array[offset++] = vector.y; - } - return this; + [POINTERSTART("$pointerRect .rotate-pointer") + MOVE("rotateVertex") + END("rotateEndVertex")](e) { + this.state.moveType = "rotate"; + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.verties = this.groupItem.verties; + this.rotateTargetNumber = +e.$dt.attr("data-number"); + this.refreshRotatePointerIcon(); + this.state.dragging = false; + this.state.isRotate = true; + this.$config.set("set.move.control.point", true); } - copyVector3sArray(vectors) { - const array = this.array; - let offset = 0; - for (let i = 0, l = vectors.length; i < l; i++) { - let vector = vectors[i]; - if (vector === void 0) { - console.warn("THREE.BufferAttribute.copyVector3sArray(): vector is undefined", i); - vector = new Vector3(); - } - array[offset++] = vector.x; - array[offset++] = vector.y; - array[offset++] = vector.z; + rotateVertex() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const distVector = subtract([], targetMousePoint, this.initMousePoint); + const targetRotatePointer = this.rotateTargetNumber === 4 ? getRotatePointer(this.verties, 34) : this.verties[this.rotateTargetNumber]; + var distAngle = Math.floor(calculateAngleForVec3(targetRotatePointer, this.verties[4], distVector)); + if (this.$config.get("bodyEvent").shiftKey) { + distAngle = distAngle - distAngle % this.$config.get("fixed.angle"); } - return this; - } - copyVector4sArray(vectors) { - const array = this.array; - let offset = 0; - for (let i = 0, l = vectors.length; i < l; i++) { - let vector = vectors[i]; - if (vector === void 0) { - console.warn("THREE.BufferAttribute.copyVector4sArray(): vector is undefined", i); - vector = new Vector4(); - } - array[offset++] = vector.x; - array[offset++] = vector.y; - array[offset++] = vector.z; - array[offset++] = vector.w; + this.localAngle = this.angle + distAngle; + this.groupItem.reset({ + angle: this.localAngle + }); + const selectionMatrix = calculateRotationOriginMat4(distAngle, this.verties[4]); + let cachedItemMatrices = this.$context.selection.cachedItemMatrices; + if (this.$context.selection.length === 1) { + cachedItemMatrices = cachedItemMatrices.filter((it) => it.id === this.$context.selection.current.id); } - return this; - } - applyMatrix3(m) { - if (this.itemSize === 2) { - for (let i = 0, l = this.count; i < l; i++) { - _vector2$1.fromBufferAttribute(this, i); - _vector2$1.applyMatrix3(m); - this.setXY(i, _vector2$1.x, _vector2$1.y); - } - } else if (this.itemSize === 3) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$9.fromBufferAttribute(this, i); - _vector$9.applyMatrix3(m); - this.setXYZ(i, _vector$9.x, _vector$9.y, _vector$9.z); + cachedItemMatrices.forEach((item) => { + const newVerties = vertiesMap(item.verties, multiply$1([], item.parentMatrixInverse, selectionMatrix)); + const rotatePointer = getRotatePointer(newVerties, 34); + var lastAngle = calculateAngle(rotatePointer[0] - newVerties[4][0], rotatePointer[1] - newVerties[4][1]) - 270; + const newTranslate = transformMat4([], newVerties[0], calculateRotationOriginMat4(-lastAngle, newVerties[4])); + const instance = this.$model.get(item.id); + if (instance) { + instance.reset({ + x: newTranslate[0], + y: newTranslate[1], + angle: lastAngle + }); } - } - return this; + }); + this.state.dragging = true; + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "width", "height", "angle")); + this.renderPointers(); } - applyMatrix4(m) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$9.fromBufferAttribute(this, i); - _vector$9.applyMatrix4(m); - this.setXYZ(i, _vector$9.x, _vector$9.y, _vector$9.z); - } - return this; + rotateEndVertex() { + this.state.dragging = false; + this.state.isRotate = false; + this.$commands.emit("recoverCursor"); + this.$config.set("set.move.control.point", false); + this.$context.selection.reselect(); + this.initMatrix(true); + this.nextTick(() => { + this.$commands.executeCommand("setAttribute", "rotate selection pointer", this.$context.selection.pack("x", "y", "width", "height", "angle")); + }); } - applyNormalMatrix(m) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$9.fromBufferAttribute(this, i); - _vector$9.applyNormalMatrix(m); - this.setXYZ(i, _vector$9.x, _vector$9.y, _vector$9.z); - } - return this; + refreshRotatePointerIcon() { + this.$commands.emit("refreshCursor", "rotate"); } - transformDirection(m) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$9.fromBufferAttribute(this, i); - _vector$9.transformDirection(m); - this.setXYZ(i, _vector$9.x, _vector$9.y, _vector$9.z); + refreshPointerIcon(e) { + const dataPointer = e.$dt.data("pointer"); + if (dataPointer) { + const pointer = dataPointer.split(",").map((it) => Number(it)); + const diff = subtract([], pointer, this.state.renderPointerList[0][4]); + const angle = calculateAngle360(diff[0], diff[1]); + let iconAngle = Math.floor(angle); + this.$commands.emit("refreshCursor", "direction", `rotate(${iconAngle} 8 8)`); + } else { + this.$commands.emit("recoverCursor"); } - return this; - } - set(value, offset = 0) { - this.array.set(value, offset); - return this; - } - getX(index2) { - return this.array[index2 * this.itemSize]; - } - setX(index2, x) { - this.array[index2 * this.itemSize] = x; - return this; - } - getY(index2) { - return this.array[index2 * this.itemSize + 1]; - } - setY(index2, y) { - this.array[index2 * this.itemSize + 1] = y; - return this; - } - getZ(index2) { - return this.array[index2 * this.itemSize + 2]; - } - setZ(index2, z) { - this.array[index2 * this.itemSize + 2] = z; - return this; - } - getW(index2) { - return this.array[index2 * this.itemSize + 3]; - } - setW(index2, w) { - this.array[index2 * this.itemSize + 3] = w; - return this; - } - setXY(index2, x, y) { - index2 *= this.itemSize; - this.array[index2 + 0] = x; - this.array[index2 + 1] = y; - return this; } - setXYZ(index2, x, y, z) { - index2 *= this.itemSize; - this.array[index2 + 0] = x; - this.array[index2 + 1] = y; - this.array[index2 + 2] = z; - return this; + checkPointerIsNotMoved() { + return Boolean(this.state.dragging) === false && this.$config.false("set.move.control.point"); } - setXYZW(index2, x, y, z, w) { - index2 *= this.itemSize; - this.array[index2 + 0] = x; - this.array[index2 + 1] = y; - this.array[index2 + 2] = z; - this.array[index2 + 3] = w; - return this; + [POINTEROVER("$pointerRect .rotate-pointer") + IF("checkPointerIsNotMoved") + PREVENT](e) { + this.refreshRotatePointerIcon(e); } - onUpload(callback) { - this.onUploadCallback = callback; - return this; + [POINTEROVER("$pointerRect .pointer") + IF("checkPointerIsNotMoved") + PREVENT](e) { + this.refreshPointerIcon(e); } - clone() { - return new this.constructor(this.array, this.itemSize).copy(this); + [POINTEROUT("$pointerRect .pointer,.rotate-pointer") + IF("checkPointerIsNotMoved") + PREVENT]() { + this.$commands.emit("recoverCursor"); } - toJSON() { - const data = { - itemSize: this.itemSize, - type: this.array.constructor.name, - array: Array.prototype.slice.call(this.array), - normalized: this.normalized - }; - if (this.name !== "") - data.name = this.name; - if (this.usage !== StaticDrawUsage) - data.usage = this.usage; - if (this.updateRange.offset !== 0 || this.updateRange.count !== -1) - data.updateRange = this.updateRange; - return data; + [POINTERSTART("$pointerRect .pointer") + PREVENT + MOVE("moveVertex") + END("moveEndVertex")](e) { + this.refreshPointerIcon(e); + this.state.dragging = true; + const num = +e.$dt.attr("data-number"); + this.state.moveType = directionType$1[`${num}`]; + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.$context.selection.reselect(); + this.state.dragging = false; + this.initMatrix(true); + this.cachedGroupItem = this.groupItem.matrix; + this.$config.set("set.move.control.point", true); + this.$context.selection.startToCacheChildren(); } -} -BufferAttribute.prototype.isBufferAttribute = true; -class Uint16BufferAttribute extends BufferAttribute { - constructor(array, itemSize, normalized) { - super(new Uint16Array(array), itemSize, normalized); + calculateNewOffsetMatrixInverse(vertextOffset, width2, height2, origin, itemMatrix) { + const center2 = add$1([], TransformOrigin.scale(origin, width2, height2), negate([], vertextOffset)); + return calculateMatrixInverse(fromTranslation([], vertextOffset), fromTranslation([], center2), itemMatrix, fromTranslation([], negate([], center2))); } -} -class Uint32BufferAttribute extends BufferAttribute { - constructor(array, itemSize, normalized) { - super(new Uint32Array(array), itemSize, normalized); + calculateDistance(vertext, distVector, reverseMatrix) { + const currentVertex = clone(vertext); + const snap = this.$context.snapManager.check([add$1([], currentVertex, distVector)], 3 / this.$viewport.scale); + const nextVertex = add$1([], currentVertex, add$1([], distVector, snap.dist)); + var currentResult = transformMat4([], currentVertex, reverseMatrix); + var nextResult = transformMat4([], nextVertex, reverseMatrix); + const realDist = round$2([], subtract([], nextResult, currentResult)); + return realDist; } -} -class Float16BufferAttribute extends BufferAttribute { - constructor(array, itemSize, normalized) { - super(new Uint16Array(array), itemSize, normalized); + calculateRealDist(item, vertextIndex, distVector) { + return this.calculateDistance(item.verties[vertextIndex], distVector, item.absoluteMatrixInverse); } -} -Float16BufferAttribute.prototype.isFloat16BufferAttribute = true; -class Float32BufferAttribute extends BufferAttribute { - constructor(array, itemSize, normalized) { - super(new Float32Array(array), itemSize, normalized); + moveGroupItem(lastStartVertex, newWidth, newHeight) { + this.groupItem.reset({ + x: lastStartVertex[0] + (newWidth < 0 ? newWidth : 0), + y: lastStartVertex[1] + (newHeight < 0 ? newHeight : 0), + width: Math.abs(newWidth), + height: Math.abs(newHeight) + }); } -} -let _id$1 = 0; -const _m1 = /* @__PURE__ */ new Matrix4(); -const _obj = /* @__PURE__ */ new Object3D(); -const _offset = /* @__PURE__ */ new Vector3(); -const _box$1 = /* @__PURE__ */ new Box3(); -const _boxMorphTargets = /* @__PURE__ */ new Box3(); -const _vector$8 = /* @__PURE__ */ new Vector3(); -class BufferGeometry extends EventDispatcher { - constructor() { - super(); - Object.defineProperty(this, "id", { value: _id$1++ }); - this.uuid = generateUUID(); - this.name = ""; - this.type = "BufferGeometry"; - this.index = null; - this.attributes = {}; - this.morphAttributes = {}; - this.morphTargetsRelative = false; - this.groups = []; - this.boundingBox = null; - this.boundingSphere = null; - this.drawRange = { start: 0, count: Infinity }; - this.userData = {}; - } - getIndex() { - return this.index; - } - setIndex(index2) { - if (Array.isArray(index2)) { - this.index = new (arrayNeedsUint32(index2) ? Uint32BufferAttribute : Uint16BufferAttribute)(index2, 1); - } else { - this.index = index2; + moveItemForGroup(it, newVerties, realDx = 0, realDy = 0) { + const transformViewInverse = calculateMatrixInverse(fromTranslation([], newVerties[4]), it.itemMatrix, fromTranslation([], negate([], newVerties[4]))); + const [newX, newY] = transformMat4([], newVerties[0], transformViewInverse); + const newWidth = distance$1(newVerties[0], newVerties[1]); + const newHeight = distance$1(newVerties[0], newVerties[3]); + const instance = this.$model.get(it.id); + if (instance) { + instance.reset({ + x: newX + realDx, + y: newY + realDy, + width: Math.max(Math.abs(newWidth), 1), + height: Math.max(Math.abs(newHeight), 1) + }); } - return this; } - getAttribute(name) { - return this.attributes[name]; - } - setAttribute(name, attribute) { - this.attributes[name] = attribute; - return this; - } - deleteAttribute(name) { - delete this.attributes[name]; - return this; - } - hasAttribute(name) { - return this.attributes[name] !== void 0; - } - addGroup(start2, count, materialIndex = 0) { - this.groups.push({ - start: start2, - count, - materialIndex + recoverItemForGroup(groupItem, scaleX, scaleY, realDx = 0, realDy = 0) { + const absoluteMatrix = groupItem.absoluteMatrix; + const absoluteMatrixInverse = groupItem.absoluteMatrixInverse; + this.$context.selection.cachedItemMatrices.forEach((it) => { + const localView = calculateMatrix(it.parentMatrixInverse, absoluteMatrix, fromTranslation([], [realDx, realDy, 0]), fromScaling([], [scaleX, scaleY, 1]), absoluteMatrixInverse); + const newVerties = vertiesMap(it.verties, localView); + this.moveItemForGroup(it, newVerties); }); } - clearGroups() { - this.groups = []; - } - setDrawRange(start2, count) { - this.drawRange.start = start2; - this.drawRange.count = count; - } - applyMatrix4(matrix) { - const position2 = this.attributes.position; - if (position2 !== void 0) { - position2.applyMatrix4(matrix); - position2.needsUpdate = true; - } - const normal = this.attributes.normal; - if (normal !== void 0) { - const normalMatrix = new Matrix3().getNormalMatrix(matrix); - normal.applyNormalMatrix(normalMatrix); - normal.needsUpdate = true; - } - const tangent = this.attributes.tangent; - if (tangent !== void 0) { - tangent.transformDirection(matrix); - tangent.needsUpdate = true; + moveBottomRightVertex(distVector) { + const groupItem = this.cachedGroupItem; + let [realDx, realDy] = this.calculateRealDist(groupItem, 2, distVector); + if (this.$config.get("bodyEvent").shiftKey) { + realDy = realDx * groupItem.height / groupItem.width; } - if (this.boundingBox !== null) { - this.computeBoundingBox(); + const newWidth = groupItem.width + realDx; + const newHeight = groupItem.height + realDy; + this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to top left", [0, 0, 0]); + } + moveTopRightVertex(distVector) { + const groupItem = this.cachedGroupItem; + let [realDx, realDy] = this.calculateRealDist(groupItem, 1, distVector); + if (this.$config.get("bodyEvent").shiftKey) { + realDy = -(realDx * groupItem.height / groupItem.width); } - if (this.boundingSphere !== null) { - this.computeBoundingSphere(); + const newWidth = groupItem.width + realDx; + const newHeight = groupItem.height - realDy; + this.moveDirectionVertex(groupItem, 0, realDy, newWidth, newHeight, "to bottom left", [0, newHeight, 0]); + } + moveDirectionVertex(groupItem, realDx, realDy, newWidth, newHeight, direction2, directionNewVector) { + const scaleX = newWidth / groupItem.width; + const scaleY = newHeight / groupItem.height; + if (scaleX >= 0 && scaleY >= 0) { + const view = calculateMatrix(groupItem.directionMatrix[direction2], this.calculateNewOffsetMatrixInverse(directionNewVector, newWidth, newHeight, groupItem.originalTransformOrigin, groupItem.itemMatrix)); + const lastStartVertex = getTranslation([], view); + this.moveGroupItem(lastStartVertex, newWidth, newHeight); + this.recoverItemForGroup(groupItem, scaleX, scaleY, realDx, realDy); } - return this; } - applyQuaternion(q) { - _m1.makeRotationFromQuaternion(q); - this.applyMatrix4(_m1); - return this; + moveTopVertex(distVector) { + const groupItem = this.cachedGroupItem; + const [, realDy] = this.calculateRealDist(groupItem, 0, distVector); + const newWidth = groupItem.width; + const newHeight = groupItem.height - realDy; + this.moveDirectionVertex(groupItem, 0, realDy, newWidth, newHeight, "to bottom", [newWidth / 2, newHeight, 0]); } - rotateX(angle) { - _m1.makeRotationX(angle); - this.applyMatrix4(_m1); - return this; + moveBottomVertex(distVector) { + const groupItem = this.cachedGroupItem; + const [, realDy] = this.calculateRealDist(groupItem, 2, distVector); + const newWidth = groupItem.width; + const newHeight = groupItem.height + realDy; + this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to top", [ + newWidth / 2, + 0, + 0 + ]); } - rotateY(angle) { - _m1.makeRotationY(angle); - this.applyMatrix4(_m1); - return this; + moveTopLeftVertex(distVector) { + const groupItem = this.cachedGroupItem; + let [realDx, realDy] = this.calculateRealDist(groupItem, 0, distVector); + if (this.$config.get("bodyEvent").shiftKey) { + realDy = realDx * groupItem.height / groupItem.width; + } + const newWidth = groupItem.width - realDx; + const newHeight = groupItem.height - realDy; + this.moveDirectionVertex(groupItem, realDx, realDy, newWidth, newHeight, "to bottom right", [newWidth, newHeight, 0]); } - rotateZ(angle) { - _m1.makeRotationZ(angle); - this.applyMatrix4(_m1); - return this; + moveLeftVertex(distVector) { + const groupItem = this.cachedGroupItem; + const [realDx] = this.calculateRealDist(groupItem, 0, distVector); + const newWidth = groupItem.width - realDx; + const newHeight = groupItem.height; + this.moveDirectionVertex(groupItem, realDx, 0, newWidth, newHeight, "to right", [newWidth, newHeight / 2, 0]); } - translate(x, y, z) { - _m1.makeTranslation(x, y, z); - this.applyMatrix4(_m1); - return this; + moveRightVertex(distVector) { + const groupItem = this.cachedGroupItem; + const [realDx] = this.calculateRealDist(groupItem, 2, distVector); + const newWidth = groupItem.width + realDx; + const newHeight = groupItem.height; + this.moveDirectionVertex(groupItem, 0, 0, newWidth, newHeight, "to left", [ + 0, + newHeight / 2, + 0 + ]); } - scale(x, y, z) { - _m1.makeScale(x, y, z); - this.applyMatrix4(_m1); - return this; + moveBottomLeftVertex(distVector) { + const groupItem = this.cachedGroupItem; + let [realDx, realDy] = this.calculateRealDist(groupItem, 3, distVector); + if (this.$config.get("bodyEvent").shiftKey) { + realDy = -(realDx * groupItem.height / groupItem.width); + } + const newWidth = groupItem.width - realDx; + const newHeight = groupItem.height + realDy; + this.moveDirectionVertex(groupItem, realDx, 0, newWidth, newHeight, "to top right", [newWidth, 0, 0]); } - lookAt(vector) { - _obj.lookAt(vector); - _obj.updateMatrix(); - this.applyMatrix4(_obj.matrix); - return this; + moveVertex() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const distVector = floor([], subtract([], targetMousePoint, this.initMousePoint)); + if (this.state.moveType === "to bottom right") { + this.moveBottomRightVertex(distVector); + } else if (this.state.moveType === "to top right") { + this.moveTopRightVertex(distVector); + } else if (this.state.moveType === "to top left") { + this.moveTopLeftVertex(distVector); + } else if (this.state.moveType === "to bottom left") { + this.moveBottomLeftVertex(distVector); + } else if (this.state.moveType === "to top") { + this.moveTopVertex(distVector); + } else if (this.state.moveType === "to left") { + this.moveLeftVertex(distVector); + } else if (this.state.moveType === "to right") { + this.moveRightVertex(distVector); + } else if (this.state.moveType === "to bottom") { + this.moveBottomVertex(distVector); + } + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "width", "height")); + this.renderPointers(); + this.state.dragging = true; } - center() { - this.computeBoundingBox(); - this.boundingBox.getCenter(_offset).negate(); - this.translate(_offset.x, _offset.y, _offset.z); - return this; + moveEndVertex() { + this.state.dragging = false; + this.$commands.emit("recoverCursor"); + this.$config.set("set.move.control.point", false); + this.$context.selection.reselect(); + this.initMatrix(true); + this.nextTick(() => { + this.$context.selection.recoverChildren(); + this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "width", "height")); + this.$commands.emit("recoverBooleanPath"); + }); } - setFromPoints(points) { - const position2 = []; - for (let i = 0, l = points.length; i < l; i++) { - const point2 = points[i]; - position2.push(point2.x, point2.y, point2.z || 0); - } - this.setAttribute("position", new Float32BufferAttribute(position2, 3)); - return this; + show() { + this.$el.show(); + this.state.show = true; } - computeBoundingBox() { - if (this.boundingBox === null) { - this.boundingBox = new Box3(); - } - const position2 = this.attributes.position; - const morphAttributesPosition = this.morphAttributes.position; - if (position2 && position2.isGLBufferAttribute) { - console.error('THREE.BufferGeometry.computeBoundingBox(): GLBufferAttribute requires a manual bounding box. Alternatively set "mesh.frustumCulled" to "false".', this); - this.boundingBox.set(new Vector3(-Infinity, -Infinity, -Infinity), new Vector3(Infinity, Infinity, Infinity)); - return; - } - if (position2 !== void 0) { - this.boundingBox.setFromBufferAttribute(position2); - if (morphAttributesPosition) { - for (let i = 0, il = morphAttributesPosition.length; i < il; i++) { - const morphAttribute = morphAttributesPosition[i]; - _box$1.setFromBufferAttribute(morphAttribute); - if (this.morphTargetsRelative) { - _vector$8.addVectors(this.boundingBox.min, _box$1.min); - this.boundingBox.expandByPoint(_vector$8); - _vector$8.addVectors(this.boundingBox.max, _box$1.max); - this.boundingBox.expandByPoint(_vector$8); - } else { - this.boundingBox.expandByPoint(_box$1.min); - this.boundingBox.expandByPoint(_box$1.max); - } - } - } - } else { - this.boundingBox.makeEmpty(); - } - if (isNaN(this.boundingBox.min.x) || isNaN(this.boundingBox.min.y) || isNaN(this.boundingBox.min.z)) { - console.error('THREE.BufferGeometry.computeBoundingBox(): Computed min/max have NaN values. The "position" attribute is likely to have NaN values.', this); + hide() { + if (this.state.show) { + this.$el.hide(); + this.state.show = false; } } - computeBoundingSphere() { - if (this.boundingSphere === null) { - this.boundingSphere = new Sphere(); - } - const position2 = this.attributes.position; - const morphAttributesPosition = this.morphAttributes.position; - if (position2 && position2.isGLBufferAttribute) { - console.error('THREE.BufferGeometry.computeBoundingSphere(): GLBufferAttribute requires a manual bounding sphere. Alternatively set "mesh.frustumCulled" to "false".', this); - this.boundingSphere.set(new Vector3(), Infinity); - return; - } - if (position2) { - const center2 = this.boundingSphere.center; - _box$1.setFromBufferAttribute(position2); - if (morphAttributesPosition) { - for (let i = 0, il = morphAttributesPosition.length; i < il; i++) { - const morphAttribute = morphAttributesPosition[i]; - _boxMorphTargets.setFromBufferAttribute(morphAttribute); - if (this.morphTargetsRelative) { - _vector$8.addVectors(_box$1.min, _boxMorphTargets.min); - _box$1.expandByPoint(_vector$8); - _vector$8.addVectors(_box$1.max, _boxMorphTargets.max); - _box$1.expandByPoint(_vector$8); - } else { - _box$1.expandByPoint(_boxMorphTargets.min); - _box$1.expandByPoint(_boxMorphTargets.max); - } - } - } - _box$1.getCenter(center2); - let maxRadiusSq = 0; - for (let i = 0, il = position2.count; i < il; i++) { - _vector$8.fromBufferAttribute(position2, i); - maxRadiusSq = Math.max(maxRadiusSq, center2.distanceToSquared(_vector$8)); - } - if (morphAttributesPosition) { - for (let i = 0, il = morphAttributesPosition.length; i < il; i++) { - const morphAttribute = morphAttributesPosition[i]; - const morphTargetsRelative = this.morphTargetsRelative; - for (let j = 0, jl = morphAttribute.count; j < jl; j++) { - _vector$8.fromBufferAttribute(morphAttribute, j); - if (morphTargetsRelative) { - _offset.fromBufferAttribute(position2, j); - _vector$8.add(_offset); - } - maxRadiusSq = Math.max(maxRadiusSq, center2.distanceToSquared(_vector$8)); - } - } - } - this.boundingSphere.radius = Math.sqrt(maxRadiusSq); - if (isNaN(this.boundingSphere.radius)) { - console.error('THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.', this); - } + initSelectionTool() { + if (this.$el.isHide() && this.$context.selection.isMany) { + this.show(); + } else { + if (this.$el.isShow() && this.$context.selection.isMany === false) + this.hide(); } + this.initMatrix(); + this.makeSelectionTool(); } - computeTangents() { - const index2 = this.index; - const attributes = this.attributes; - if (index2 === null || attributes.position === void 0 || attributes.normal === void 0 || attributes.uv === void 0) { - console.error("THREE.BufferGeometry: .computeTangents() failed. Missing required attributes (index, position, normal or uv)"); - return; - } - const indices = index2.array; - const positions = attributes.position.array; - const normals = attributes.normal.array; - const uvs = attributes.uv.array; - const nVertices = positions.length / 3; - if (this.hasAttribute("tangent") === false) { - this.setAttribute("tangent", new BufferAttribute(new Float32Array(4 * nVertices), 4)); - } - const tangents = this.getAttribute("tangent").array; - const tan1 = [], tan2 = []; - for (let i = 0; i < nVertices; i++) { - tan1[i] = new Vector3(); - tan2[i] = new Vector3(); - } - const vA = new Vector3(), vB = new Vector3(), vC = new Vector3(), uvA = new Vector2(), uvB = new Vector2(), uvC = new Vector2(), sdir = new Vector3(), tdir = new Vector3(); - function handleTriangle(a, b, c2) { - vA.fromArray(positions, a * 3); - vB.fromArray(positions, b * 3); - vC.fromArray(positions, c2 * 3); - uvA.fromArray(uvs, a * 2); - uvB.fromArray(uvs, b * 2); - uvC.fromArray(uvs, c2 * 2); - vB.sub(vA); - vC.sub(vA); - uvB.sub(uvA); - uvC.sub(uvA); - const r = 1 / (uvB.x * uvC.y - uvC.x * uvB.y); - if (!isFinite(r)) - return; - sdir.copy(vB).multiplyScalar(uvC.y).addScaledVector(vC, -uvB.y).multiplyScalar(r); - tdir.copy(vC).multiplyScalar(uvB.x).addScaledVector(vB, -uvC.x).multiplyScalar(r); - tan1[a].add(sdir); - tan1[b].add(sdir); - tan1[c2].add(sdir); - tan2[a].add(tdir); - tan2[b].add(tdir); - tan2[c2].add(tdir); - } - let groups = this.groups; - if (groups.length === 0) { - groups = [{ - start: 0, - count: indices.length - }]; - } - for (let i = 0, il = groups.length; i < il; ++i) { - const group2 = groups[i]; - const start2 = group2.start; - const count = group2.count; - for (let j = start2, jl = start2 + count; j < jl; j += 3) { - handleTriangle(indices[j + 0], indices[j + 1], indices[j + 2]); - } - } - const tmp2 = new Vector3(), tmp22 = new Vector3(); - const n = new Vector3(), n2 = new Vector3(); - function handleVertex(v) { - n.fromArray(normals, v * 3); - n2.copy(n); - const t = tan1[v]; - tmp2.copy(t); - tmp2.sub(n.multiplyScalar(n.dot(t))).normalize(); - tmp22.crossVectors(n2, t); - const test = tmp22.dot(tan2[v]); - const w = test < 0 ? -1 : 1; - tangents[v * 4] = tmp2.x; - tangents[v * 4 + 1] = tmp2.y; - tangents[v * 4 + 2] = tmp2.z; - tangents[v * 4 + 3] = w; - } - for (let i = 0, il = groups.length; i < il; ++i) { - const group2 = groups[i]; - const start2 = group2.start; - const count = group2.count; - for (let j = start2, jl = start2 + count; j < jl; j += 3) { - handleVertex(indices[j + 0]); - handleVertex(indices[j + 1]); - handleVertex(indices[j + 2]); - } - } - } - computeVertexNormals() { - const index2 = this.index; - const positionAttribute = this.getAttribute("position"); - if (positionAttribute !== void 0) { - let normalAttribute = this.getAttribute("normal"); - if (normalAttribute === void 0) { - normalAttribute = new BufferAttribute(new Float32Array(positionAttribute.count * 3), 3); - this.setAttribute("normal", normalAttribute); - } else { - for (let i = 0, il = normalAttribute.count; i < il; i++) { - normalAttribute.setXYZ(i, 0, 0, 0); - } - } - const pA = new Vector3(), pB = new Vector3(), pC = new Vector3(); - const nA = new Vector3(), nB = new Vector3(), nC = new Vector3(); - const cb = new Vector3(), ab = new Vector3(); - if (index2) { - for (let i = 0, il = index2.count; i < il; i += 3) { - const vA = index2.getX(i + 0); - const vB = index2.getX(i + 1); - const vC = index2.getX(i + 2); - pA.fromBufferAttribute(positionAttribute, vA); - pB.fromBufferAttribute(positionAttribute, vB); - pC.fromBufferAttribute(positionAttribute, vC); - cb.subVectors(pC, pB); - ab.subVectors(pA, pB); - cb.cross(ab); - nA.fromBufferAttribute(normalAttribute, vA); - nB.fromBufferAttribute(normalAttribute, vB); - nC.fromBufferAttribute(normalAttribute, vC); - nA.add(cb); - nB.add(cb); - nC.add(cb); - normalAttribute.setXYZ(vA, nA.x, nA.y, nA.z); - normalAttribute.setXYZ(vB, nB.x, nB.y, nB.z); - normalAttribute.setXYZ(vC, nC.x, nC.y, nC.z); - } - } else { - for (let i = 0, il = positionAttribute.count; i < il; i += 3) { - pA.fromBufferAttribute(positionAttribute, i + 0); - pB.fromBufferAttribute(positionAttribute, i + 1); - pC.fromBufferAttribute(positionAttribute, i + 2); - cb.subVectors(pC, pB); - ab.subVectors(pA, pB); - cb.cross(ab); - normalAttribute.setXYZ(i + 0, cb.x, cb.y, cb.z); - normalAttribute.setXYZ(i + 1, cb.x, cb.y, cb.z); - normalAttribute.setXYZ(i + 2, cb.x, cb.y, cb.z); - } - } - this.normalizeNormals(); - normalAttribute.needsUpdate = true; + get item() { + const verties = this.verties || rectToVerties(0, 0, 0, 0); + if (!this.state.groupSelectionView) { + this.state.groupSelectionView = this.$editor.createModel({ itemType: "artboard" }, false); } + this.state.groupSelectionView.reset({ + parentId: this.$context.selection.currentProject.id, + x: verties[0][0], + y: verties[0][1], + width: dist(verties[0], verties[1]), + height: dist(verties[0], verties[3]) + }); + return this.state.groupSelectionView; } - merge(geometry, offset) { - if (!(geometry && geometry.isBufferGeometry)) { - console.error("THREE.BufferGeometry.merge(): geometry not an instance of THREE.BufferGeometry.", geometry); - return; - } - if (offset === void 0) { - offset = 0; - console.warn("THREE.BufferGeometry.merge(): Overwriting original geometry, starting at offset=0. Use BufferGeometryUtils.mergeBufferGeometries() for lossless merge."); - } - const attributes = this.attributes; - for (const key in attributes) { - if (geometry.attributes[key] === void 0) - continue; - const attribute1 = attributes[key]; - const attributeArray1 = attribute1.array; - const attribute2 = geometry.attributes[key]; - const attributeArray2 = attribute2.array; - const attributeOffset = attribute2.itemSize * offset; - const length2 = Math.min(attributeArray2.length, attributeArray1.length - attributeOffset); - for (let i = 0, j = attributeOffset; i < length2; i++, j++) { - attributeArray1[j] = attributeArray2[i]; - } + initMatrix() { + if (this.$context.selection.isMany && this.state.dragging === false) { + this.verties = clone$1(this.$context.selection.verties); + this.angle = 0; + this.localAngle = this.angle; + this.groupItem = this.item; + this.cachedGroupItem = this.item.matrix; } - return this; } - normalizeNormals() { - const normals = this.attributes.normal; - for (let i = 0, il = normals.count; i < il; i++) { - _vector$8.fromBufferAttribute(normals, i); - _vector$8.normalize(); - normals.setXYZ(i, _vector$8.x, _vector$8.y, _vector$8.z); - } - } - toNonIndexed() { - function convertBufferAttribute(attribute, indices2) { - const array = attribute.array; - const itemSize = attribute.itemSize; - const normalized = attribute.normalized; - const array2 = new array.constructor(indices2.length * itemSize); - let index2 = 0, index22 = 0; - for (let i = 0, l = indices2.length; i < l; i++) { - if (attribute.isInterleavedBufferAttribute) { - index2 = indices2[i] * attribute.data.stride + attribute.offset; - } else { - index2 = indices2[i] * itemSize; - } - for (let j = 0; j < itemSize; j++) { - array2[index22++] = array[index2++]; - } - } - return new BufferAttribute(array2, itemSize, normalized); - } - if (this.index === null) { - console.warn("THREE.BufferGeometry.toNonIndexed(): BufferGeometry is already non-indexed."); - return this; - } - const geometry2 = new BufferGeometry(); - const indices = this.index.array; - const attributes = this.attributes; - for (const name in attributes) { - const attribute = attributes[name]; - const newAttribute = convertBufferAttribute(attribute, indices); - geometry2.setAttribute(name, newAttribute); - } - const morphAttributes = this.morphAttributes; - for (const name in morphAttributes) { - const morphArray = []; - const morphAttribute = morphAttributes[name]; - for (let i = 0, il = morphAttribute.length; i < il; i++) { - const attribute = morphAttribute[i]; - const newAttribute = convertBufferAttribute(attribute, indices); - morphArray.push(newAttribute); - } - geometry2.morphAttributes[name] = morphArray; - } - geometry2.morphTargetsRelative = this.morphTargetsRelative; - const groups = this.groups; - for (let i = 0, l = groups.length; i < l; i++) { - const group2 = groups[i]; - geometry2.addGroup(group2.start, group2.count, group2.materialIndex); - } - return geometry2; + makeSelectionTool() { + this.renderPointers(); } - toJSON() { - const data = { - metadata: { - version: 4.5, - type: "BufferGeometry", - generator: "BufferGeometry.toJSON" - } - }; - data.uuid = this.uuid; - data.type = this.type; - if (this.name !== "") - data.name = this.name; - if (Object.keys(this.userData).length > 0) - data.userData = this.userData; - if (this.parameters !== void 0) { - const parameters = this.parameters; - for (const key in parameters) { - if (parameters[key] !== void 0) - data[key] = parameters[key]; - } - return data; - } - data.data = { attributes: {} }; - const index2 = this.index; - if (index2 !== null) { - data.data.index = { - type: index2.array.constructor.name, - array: Array.prototype.slice.call(index2.array) - }; - } - const attributes = this.attributes; - for (const key in attributes) { - const attribute = attributes[key]; - data.data.attributes[key] = attribute.toJSON(data.data); - } - const morphAttributes = {}; - let hasMorphAttributes = false; - for (const key in this.morphAttributes) { - const attributeArray = this.morphAttributes[key]; - const array = []; - for (let i = 0, il = attributeArray.length; i < il; i++) { - const attribute = attributeArray[i]; - array.push(attribute.toJSON(data.data)); - } - if (array.length > 0) { - morphAttributes[key] = array; - hasMorphAttributes = true; - } - } - if (hasMorphAttributes) { - data.data.morphAttributes = morphAttributes; - data.data.morphTargetsRelative = this.morphTargetsRelative; - } - const groups = this.groups; - if (groups.length > 0) { - data.data.groups = JSON.parse(JSON.stringify(groups)); - } - const boundingSphere = this.boundingSphere; - if (boundingSphere !== null) { - data.data.boundingSphere = { - center: boundingSphere.center.toArray(), - radius: boundingSphere.radius - }; + renderPointers() { + if (this.$context.selection.isEmpty) { + this.refs.$pointerRect.empty(); + return; } - return data; - } - clone() { - return new this.constructor().copy(this); - } - copy(source2) { - this.index = null; - this.attributes = {}; - this.morphAttributes = {}; - this.groups = []; - this.boundingBox = null; - this.boundingSphere = null; - const data = {}; - this.name = source2.name; - const index2 = source2.index; - if (index2 !== null) { - this.setIndex(index2.clone(data)); - } - const attributes = source2.attributes; - for (const name in attributes) { - const attribute = attributes[name]; - this.setAttribute(name, attribute.clone(data)); - } - const morphAttributes = source2.morphAttributes; - for (const name in morphAttributes) { - const array = []; - const morphAttribute = morphAttributes[name]; - for (let i = 0, l = morphAttribute.length; i < l; i++) { - array.push(morphAttribute[i].clone(data)); - } - this.morphAttributes[name] = array; - } - this.morphTargetsRelative = source2.morphTargetsRelative; - const groups = source2.groups; - for (let i = 0, l = groups.length; i < l; i++) { - const group2 = groups[i]; - this.addGroup(group2.start, group2.count, group2.materialIndex); - } - const boundingBox = source2.boundingBox; - if (boundingBox !== null) { - this.boundingBox = boundingBox.clone(); - } - const boundingSphere = source2.boundingSphere; - if (boundingSphere !== null) { - this.boundingSphere = boundingSphere.clone(); - } - this.drawRange.start = source2.drawRange.start; - this.drawRange.count = source2.drawRange.count; - this.userData = source2.userData; - if (source2.parameters !== void 0) - this.parameters = Object.assign({}, source2.parameters); - return this; + this.state.renderPointerList = [ + this.$viewport.applyVerties(this.$context.selection.verties) + ]; + const { line: line2, point: point2, size: size2, elementLine } = this.createRenderPointers(this.state.renderPointerList[0]); + this.refs.$pointerRect.updateDiff(line2 + elementLine + point2 + size2); } - dispose() { - this.dispatchEvent({ type: "dispose" }); - } -} -BufferGeometry.prototype.isBufferGeometry = true; -const _inverseMatrix$2 = /* @__PURE__ */ new Matrix4(); -const _ray$2 = /* @__PURE__ */ new Ray(); -const _sphere$3 = /* @__PURE__ */ new Sphere(); -const _vA$1 = /* @__PURE__ */ new Vector3(); -const _vB$1 = /* @__PURE__ */ new Vector3(); -const _vC$1 = /* @__PURE__ */ new Vector3(); -const _tempA = /* @__PURE__ */ new Vector3(); -const _tempB = /* @__PURE__ */ new Vector3(); -const _tempC = /* @__PURE__ */ new Vector3(); -const _morphA = /* @__PURE__ */ new Vector3(); -const _morphB = /* @__PURE__ */ new Vector3(); -const _morphC = /* @__PURE__ */ new Vector3(); -const _uvA$1 = /* @__PURE__ */ new Vector2(); -const _uvB$1 = /* @__PURE__ */ new Vector2(); -const _uvC$1 = /* @__PURE__ */ new Vector2(); -const _intersectionPoint = /* @__PURE__ */ new Vector3(); -const _intersectionPointWorld = /* @__PURE__ */ new Vector3(); -class Mesh extends Object3D { - constructor(geometry = new BufferGeometry(), material = new MeshBasicMaterial()) { - super(); - this.type = "Mesh"; - this.geometry = geometry; - this.material = material; - this.updateMorphTargets(); - } - copy(source2) { - super.copy(source2); - if (source2.morphTargetInfluences !== void 0) { - this.morphTargetInfluences = source2.morphTargetInfluences.slice(); - } - if (source2.morphTargetDictionary !== void 0) { - this.morphTargetDictionary = Object.assign({}, source2.morphTargetDictionary); - } - this.material = source2.material; - this.geometry = source2.geometry; - return this; + createPointer(pointer, number, rotate2) { + return ` +
+ `; } - updateMorphTargets() { - const geometry = this.geometry; - if (geometry.isBufferGeometry) { - const morphAttributes = geometry.morphAttributes; - const keys2 = Object.keys(morphAttributes); - if (keys2.length > 0) { - const morphAttribute = morphAttributes[keys2[0]]; - if (morphAttribute !== void 0) { - this.morphTargetInfluences = []; - this.morphTargetDictionary = {}; - for (let m = 0, ml = morphAttribute.length; m < ml; m++) { - const name = morphAttribute[m].name || String(m); - this.morphTargetInfluences.push(0); - this.morphTargetDictionary[name] = m; - } - } - } - } else { - const morphTargets = geometry.morphTargets; - if (morphTargets !== void 0 && morphTargets.length > 0) { - console.error("THREE.Mesh.updateMorphTargets() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); - } - } + createPointerSide(pointer, number, rotate2, width2, height2) { + return ` +
+ `; } - raycast(raycaster, intersects2) { - const geometry = this.geometry; - const material = this.material; - const matrixWorld = this.matrixWorld; - if (material === void 0) - return; - if (geometry.boundingSphere === null) - geometry.computeBoundingSphere(); - _sphere$3.copy(geometry.boundingSphere); - _sphere$3.applyMatrix4(matrixWorld); - if (raycaster.ray.intersectsSphere(_sphere$3) === false) - return; - _inverseMatrix$2.copy(matrixWorld).invert(); - _ray$2.copy(raycaster.ray).applyMatrix4(_inverseMatrix$2); - if (geometry.boundingBox !== null) { - if (_ray$2.intersectsBox(geometry.boundingBox) === false) - return; - } - let intersection; - if (geometry.isBufferGeometry) { - const index2 = geometry.index; - const position2 = geometry.attributes.position; - const morphPosition = geometry.morphAttributes.position; - const morphTargetsRelative = geometry.morphTargetsRelative; - const uv = geometry.attributes.uv; - const uv2 = geometry.attributes.uv2; - const groups = geometry.groups; - const drawRange = geometry.drawRange; - if (index2 !== null) { - if (Array.isArray(material)) { - for (let i = 0, il = groups.length; i < il; i++) { - const group2 = groups[i]; - const groupMaterial = material[group2.materialIndex]; - const start2 = Math.max(group2.start, drawRange.start); - const end2 = Math.min(index2.count, Math.min(group2.start + group2.count, drawRange.start + drawRange.count)); - for (let j = start2, jl = end2; j < jl; j += 3) { - const a = index2.getX(j); - const b = index2.getX(j + 1); - const c2 = index2.getX(j + 2); - intersection = checkBufferGeometryIntersection(this, groupMaterial, raycaster, _ray$2, position2, morphPosition, morphTargetsRelative, uv, uv2, a, b, c2); - if (intersection) { - intersection.faceIndex = Math.floor(j / 3); - intersection.face.materialIndex = group2.materialIndex; - intersects2.push(intersection); - } - } - } - } else { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(index2.count, drawRange.start + drawRange.count); - for (let i = start2, il = end2; i < il; i += 3) { - const a = index2.getX(i); - const b = index2.getX(i + 1); - const c2 = index2.getX(i + 2); - intersection = checkBufferGeometryIntersection(this, material, raycaster, _ray$2, position2, morphPosition, morphTargetsRelative, uv, uv2, a, b, c2); - if (intersection) { - intersection.faceIndex = Math.floor(i / 3); - intersects2.push(intersection); - } - } - } - } else if (position2 !== void 0) { - if (Array.isArray(material)) { - for (let i = 0, il = groups.length; i < il; i++) { - const group2 = groups[i]; - const groupMaterial = material[group2.materialIndex]; - const start2 = Math.max(group2.start, drawRange.start); - const end2 = Math.min(position2.count, Math.min(group2.start + group2.count, drawRange.start + drawRange.count)); - for (let j = start2, jl = end2; j < jl; j += 3) { - const a = j; - const b = j + 1; - const c2 = j + 2; - intersection = checkBufferGeometryIntersection(this, groupMaterial, raycaster, _ray$2, position2, morphPosition, morphTargetsRelative, uv, uv2, a, b, c2); - if (intersection) { - intersection.faceIndex = Math.floor(j / 3); - intersection.face.materialIndex = group2.materialIndex; - intersects2.push(intersection); - } - } - } - } else { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(position2.count, drawRange.start + drawRange.count); - for (let i = start2, il = end2; i < il; i += 3) { - const a = i; - const b = i + 1; - const c2 = i + 2; - intersection = checkBufferGeometryIntersection(this, material, raycaster, _ray$2, position2, morphPosition, morphTargetsRelative, uv, uv2, a, b, c2); - if (intersection) { - intersection.faceIndex = Math.floor(i / 3); - intersects2.push(intersection); - } - } - } - } - } else if (geometry.isGeometry) { - console.error("THREE.Mesh.raycast() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); + createRotatePointer(pointer, number) { + if (pointer.length === 0) + return ""; + if (number < 4) { + return ` +
+ `; } + return ` +
+ `; } -} -Mesh.prototype.isMesh = true; -function checkIntersection(object, material, raycaster, ray, pA, pB, pC, point2) { - let intersect; - if (material.side === BackSide) { - intersect = ray.intersectTriangle(pC, pB, pA, true, point2); - } else { - intersect = ray.intersectTriangle(pA, pB, pC, material.side !== DoubleSide, point2); + createPointerRect(pointers, rotatePointer) { + if (pointers.length === 0) + return ""; + const centerPointer = lerp([], pointers[0], pointers[1], 0.5); + const line2 = ` + M ${centerPointer[0]},${centerPointer[1]} + L ${rotatePointer[0]}, ${rotatePointer[1]} + `; + return ` + + + `; } - if (intersect === null) - return null; - _intersectionPointWorld.copy(point2); - _intersectionPointWorld.applyMatrix4(object.matrixWorld); - const distance2 = raycaster.ray.origin.distanceTo(_intersectionPointWorld); - if (distance2 < raycaster.near || distance2 > raycaster.far) - return null; - return { - distance: distance2, - point: _intersectionPointWorld.clone(), - object - }; -} -function checkBufferGeometryIntersection(object, material, raycaster, ray, position2, morphPosition, morphTargetsRelative, uv, uv2, a, b, c2) { - _vA$1.fromBufferAttribute(position2, a); - _vB$1.fromBufferAttribute(position2, b); - _vC$1.fromBufferAttribute(position2, c2); - const morphInfluences = object.morphTargetInfluences; - if (morphPosition && morphInfluences) { - _morphA.set(0, 0, 0); - _morphB.set(0, 0, 0); - _morphC.set(0, 0, 0); - for (let i = 0, il = morphPosition.length; i < il; i++) { - const influence = morphInfluences[i]; - const morphAttribute = morphPosition[i]; - if (influence === 0) - continue; - _tempA.fromBufferAttribute(morphAttribute, a); - _tempB.fromBufferAttribute(morphAttribute, b); - _tempC.fromBufferAttribute(morphAttribute, c2); - if (morphTargetsRelative) { - _morphA.addScaledVector(_tempA, influence); - _morphB.addScaledVector(_tempB, influence); - _morphC.addScaledVector(_tempC, influence); - } else { - _morphA.addScaledVector(_tempA.sub(_vA$1), influence); - _morphB.addScaledVector(_tempB.sub(_vB$1), influence); - _morphC.addScaledVector(_tempC.sub(_vC$1), influence); - } - } - _vA$1.add(_morphA); - _vB$1.add(_morphB); - _vC$1.add(_morphC); - } - if (object.isSkinnedMesh) { - object.boneTransform(a, _vA$1); - object.boneTransform(b, _vB$1); - object.boneTransform(c2, _vC$1); - } - const intersection = checkIntersection(object, material, raycaster, ray, _vA$1, _vB$1, _vC$1, _intersectionPoint); - if (intersection) { - if (uv) { - _uvA$1.fromBufferAttribute(uv, a); - _uvB$1.fromBufferAttribute(uv, b); - _uvC$1.fromBufferAttribute(uv, c2); - intersection.uv = Triangle.getUV(_intersectionPoint, _vA$1, _vB$1, _vC$1, _uvA$1, _uvB$1, _uvC$1, new Vector2()); - } - if (uv2) { - _uvA$1.fromBufferAttribute(uv2, a); - _uvB$1.fromBufferAttribute(uv2, b); - _uvC$1.fromBufferAttribute(uv2, c2); - intersection.uv2 = Triangle.getUV(_intersectionPoint, _vA$1, _vB$1, _vC$1, _uvA$1, _uvB$1, _uvC$1, new Vector2()); - } - const face2 = { - a, - b, - c: c2, - normal: new Vector3(), - materialIndex: 0 - }; - Triangle.getNormal(_vA$1, _vB$1, _vC$1, face2.normal); - intersection.face = face2; + createLine(pointers) { + return ` + M ${pointers[0][0]}, ${pointers[0][1]} + L ${pointers[1][0]}, ${pointers[1][1]} + L ${pointers[2][0]}, ${pointers[2][1]} + L ${pointers[3][0]}, ${pointers[3][1]} + L ${pointers[0][0]}, ${pointers[0][1]} + Z + `; } - return intersection; -} -class BoxGeometry extends BufferGeometry { - constructor(width2 = 1, height2 = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1) { - super(); - this.type = "BoxGeometry"; - this.parameters = { - width: width2, - height: height2, - depth, - widthSegments, - heightSegments, - depthSegments - }; - const scope = this; - widthSegments = Math.floor(widthSegments); - heightSegments = Math.floor(heightSegments); - depthSegments = Math.floor(depthSegments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - let numberOfVertices = 0; - let groupStart = 0; - buildPlane("z", "y", "x", -1, -1, depth, height2, width2, depthSegments, heightSegments, 0); - buildPlane("z", "y", "x", 1, -1, depth, height2, -width2, depthSegments, heightSegments, 1); - buildPlane("x", "z", "y", 1, 1, width2, depth, height2, widthSegments, depthSegments, 2); - buildPlane("x", "z", "y", 1, -1, width2, depth, -height2, widthSegments, depthSegments, 3); - buildPlane("x", "y", "z", 1, -1, width2, height2, depth, widthSegments, heightSegments, 4); - buildPlane("x", "y", "z", -1, -1, width2, height2, -depth, widthSegments, heightSegments, 5); - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - function buildPlane(u, v, w, udir, vdir, width3, height3, depth2, gridX, gridY, materialIndex) { - const segmentWidth = width3 / gridX; - const segmentHeight = height3 / gridY; - const widthHalf = width3 / 2; - const heightHalf = height3 / 2; - const depthHalf = depth2 / 2; - const gridX1 = gridX + 1; - const gridY1 = gridY + 1; - let vertexCounter = 0; - let groupCount = 0; - const vector = new Vector3(); - for (let iy = 0; iy < gridY1; iy++) { - const y = iy * segmentHeight - heightHalf; - for (let ix = 0; ix < gridX1; ix++) { - const x = ix * segmentWidth - widthHalf; - vector[u] = x * udir; - vector[v] = y * vdir; - vector[w] = depthHalf; - vertices.push(vector.x, vector.y, vector.z); - vector[u] = 0; - vector[v] = 0; - vector[w] = depth2 > 0 ? 1 : -1; - normals.push(vector.x, vector.y, vector.z); - uvs.push(ix / gridX); - uvs.push(1 - iy / gridY); - vertexCounter += 1; - } - } - for (let iy = 0; iy < gridY; iy++) { - for (let ix = 0; ix < gridX; ix++) { - const a = numberOfVertices + ix + gridX1 * iy; - const b = numberOfVertices + ix + gridX1 * (iy + 1); - const c2 = numberOfVertices + (ix + 1) + gridX1 * (iy + 1); - const d = numberOfVertices + (ix + 1) + gridX1 * iy; - indices.push(a, b, d); - indices.push(b, c2, d); - groupCount += 6; - } + createSize(pointers) { + const top2 = lerp([], pointers[0], pointers[1], 0.5); + const right2 = lerp([], pointers[1], pointers[2], 0.5); + const bottom2 = lerp([], pointers[2], pointers[3], 0.5); + const left2 = lerp([], pointers[3], pointers[0], 0.5); + const worldPosition = this.$viewport.applyVertiesInverse(pointers); + const width2 = dist(worldPosition[0], worldPosition[1]); + const height2 = dist(worldPosition[0], worldPosition[3]); + const list2 = [ + { start: top2, end: bottom2 }, + { start: right2, end: left2 }, + { start: bottom2, end: top2 }, + { start: left2, end: right2 } + ].map((it, index2) => { + return { index: index2, data: it }; + }); + list2.sort((a, b) => { + return a.data.start[1] > b.data.start[1] ? -1 : 1; + }); + const item = list2[0]; + const newPointer = lerp([], item.data.end, item.data.start, 1 + 16 / dist(item.data.start, item.data.end)); + const diff = subtract([], item.data.start, item.data.end); + const angle = calculateAngle360(diff[0], diff[1]) + 90; + let text2 = `${round(width2, 100)} x ${round(height2, 100)}`; + if (this.state.isRotate) { + const rotateZ2 = this.groupItem.angle; + if (rotateZ2) { + text2 = `${rotateZ2}\xB0`; } - scope.addGroup(groupStart, groupCount, materialIndex); - groupStart += groupCount; - numberOfVertices += vertexCounter; } + return `
${text2}
`; } - static fromJSON(data) { - return new BoxGeometry(data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments); - } -} -function cloneUniforms(src) { - const dst = {}; - for (const u in src) { - dst[u] = {}; - for (const p in src[u]) { - const property = src[u][p]; - if (property && (property.isColor || property.isMatrix3 || property.isMatrix4 || property.isVector2 || property.isVector3 || property.isVector4 || property.isTexture || property.isQuaternion)) { - dst[u][p] = property.clone(); - } else if (Array.isArray(property)) { - dst[u][p] = property.slice(); - } else { - dst[u][p] = property; - } - } - } - return dst; -} -function mergeUniforms(uniforms) { - const merged = {}; - for (let u = 0; u < uniforms.length; u++) { - const tmp2 = cloneUniforms(uniforms[u]); - for (const p in tmp2) { - merged[p] = tmp2[p]; - } - } - return merged; -} -const UniformsUtils = { clone: cloneUniforms, merge: mergeUniforms }; -var default_vertex = "void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}"; -var default_fragment = "void main() {\n gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n}"; -class ShaderMaterial extends Material { - constructor(parameters) { - super(); - this.type = "ShaderMaterial"; - this.defines = {}; - this.uniforms = {}; - this.vertexShader = default_vertex; - this.fragmentShader = default_fragment; - this.linewidth = 1; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.fog = false; - this.lights = false; - this.clipping = false; - this.extensions = { - derivatives: false, - fragDepth: false, - drawBuffers: false, - shaderTextureLOD: false - }; - this.defaultAttributeValues = { - "color": [1, 1, 1], - "uv": [0, 0], - "uv2": [0, 0] + createRenderPointers(pointers) { + const diff = subtract([], lerp([], pointers[0], pointers[1], 0.5), lerp([], pointers[0], pointers[2], 0.5)); + const rotate2 = Length.deg(calculateAngle360(diff[0], diff[1]) - 90).round(1e3); + const rotatePointer = getRotatePointer(pointers, 30); + const dist$1 = dist(pointers[0], pointers[2]); + const width2 = dist(pointers[0], pointers[1]); + const height2 = dist(pointers[0], pointers[3]); + return { + line: this.createPointerRect(pointers, rotatePointer), + elementLine: ` + + + + `, + size: this.createSize(pointers), + point: [ + this.createRotatePointer(rotatePointer, 4, "center center"), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[0], pointers[1], 0.5), 11, rotate2, width2, 5), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[1], pointers[2], 0.5), 12, rotate2, 5, height2), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[2], pointers[3], 0.5), 13, rotate2, width2, 5), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[3], pointers[0], 0.5), 14, rotate2, 5, height2), + this.createPointer(pointers[0], 1, rotate2), + this.createPointer(pointers[1], 2, rotate2), + this.createPointer(pointers[2], 3, rotate2), + this.createPointer(pointers[3], 4, rotate2) + ].join("") }; - this.index0AttributeName = void 0; - this.uniformsNeedUpdate = false; - this.glslVersion = null; - if (parameters !== void 0) { - if (parameters.attributes !== void 0) { - console.error("THREE.ShaderMaterial: attributes should now be defined in THREE.BufferGeometry instead."); - } - this.setValues(parameters); - } - } - copy(source2) { - super.copy(source2); - this.fragmentShader = source2.fragmentShader; - this.vertexShader = source2.vertexShader; - this.uniforms = cloneUniforms(source2.uniforms); - this.defines = Object.assign({}, source2.defines); - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.lights = source2.lights; - this.clipping = source2.clipping; - this.extensions = Object.assign({}, source2.extensions); - this.glslVersion = source2.glslVersion; - return this; } - toJSON(meta) { - const data = super.toJSON(meta); - data.glslVersion = this.glslVersion; - data.uniforms = {}; - for (const name in this.uniforms) { - const uniform = this.uniforms[name]; - const value = uniform.value; - if (value && value.isTexture) { - data.uniforms[name] = { - type: "t", - value: value.toJSON(meta).uuid - }; - } else if (value && value.isColor) { - data.uniforms[name] = { - type: "c", - value: value.getHex() - }; - } else if (value && value.isVector2) { - data.uniforms[name] = { - type: "v2", - value: value.toArray() - }; - } else if (value && value.isVector3) { - data.uniforms[name] = { - type: "v3", - value: value.toArray() - }; - } else if (value && value.isVector4) { - data.uniforms[name] = { - type: "v4", - value: value.toArray() - }; - } else if (value && value.isMatrix3) { - data.uniforms[name] = { - type: "m3", - value: value.toArray() - }; - } else if (value && value.isMatrix4) { - data.uniforms[name] = { - type: "m4", - value: value.toArray() - }; - } else { - data.uniforms[name] = { - value - }; - } - } - if (Object.keys(this.defines).length > 0) - data.defines = this.defines; - data.vertexShader = this.vertexShader; - data.fragmentShader = this.fragmentShader; - const extensions = {}; - for (const key in this.extensions) { - if (this.extensions[key] === true) - extensions[key] = true; + checkShow() { + if (this.state.show && this.$context.selection.isMany) { + return true; } - if (Object.keys(extensions).length > 0) - data.extensions = extensions; - return data; - } -} -ShaderMaterial.prototype.isShaderMaterial = true; -class Camera extends Object3D { - constructor() { - super(); - this.type = "Camera"; - this.matrixWorldInverse = new Matrix4(); - this.projectionMatrix = new Matrix4(); - this.projectionMatrixInverse = new Matrix4(); - } - copy(source2, recursive) { - super.copy(source2, recursive); - this.matrixWorldInverse.copy(source2.matrixWorldInverse); - this.projectionMatrix.copy(source2.projectionMatrix); - this.projectionMatrixInverse.copy(source2.projectionMatrixInverse); - return this; - } - getWorldDirection(target) { - this.updateWorldMatrix(true, false); - const e = this.matrixWorld.elements; - return target.set(-e[8], -e[9], -e[10]).normalize(); - } - updateMatrixWorld(force) { - super.updateMatrixWorld(force); - this.matrixWorldInverse.copy(this.matrixWorld).invert(); - } - updateWorldMatrix(updateParents, updateChildren) { - super.updateWorldMatrix(updateParents, updateChildren); - this.matrixWorldInverse.copy(this.matrixWorld).invert(); - } - clone() { - return new this.constructor().copy(this); - } -} -Camera.prototype.isCamera = true; -class PerspectiveCamera extends Camera { - constructor(fov2 = 50, aspect2 = 1, near = 0.1, far = 2e3) { - super(); - this.type = "PerspectiveCamera"; - this.fov = fov2; - this.zoom = 1; - this.near = near; - this.far = far; - this.focus = 10; - this.aspect = aspect2; - this.view = null; - this.filmGauge = 35; - this.filmOffset = 0; - this.updateProjectionMatrix(); - } - copy(source2, recursive) { - super.copy(source2, recursive); - this.fov = source2.fov; - this.zoom = source2.zoom; - this.near = source2.near; - this.far = source2.far; - this.focus = source2.focus; - this.aspect = source2.aspect; - this.view = source2.view === null ? null : Object.assign({}, source2.view); - this.filmGauge = source2.filmGauge; - this.filmOffset = source2.filmOffset; - return this; + return false; } - setFocalLength(focalLength) { - const vExtentSlope = 0.5 * this.getFilmHeight() / focalLength; - this.fov = RAD2DEG * 2 * Math.atan(vExtentSlope); - this.updateProjectionMatrix(); - } - getFocalLength() { - const vExtentSlope = Math.tan(DEG2RAD * 0.5 * this.fov); - return 0.5 * this.getFilmHeight() / vExtentSlope; - } - getEffectiveFOV() { - return RAD2DEG * 2 * Math.atan(Math.tan(DEG2RAD * 0.5 * this.fov) / this.zoom); - } - getFilmWidth() { - return this.filmGauge * Math.min(this.aspect, 1); - } - getFilmHeight() { - return this.filmGauge / Math.max(this.aspect, 1); - } - setViewOffset(fullWidth, fullHeight, x, y, width2, height2) { - this.aspect = fullWidth / fullHeight; - if (this.view === null) { - this.view = { - enabled: true, - fullWidth: 1, - fullHeight: 1, - offsetX: 0, - offsetY: 0, - width: 1, - height: 1 - }; - } - this.view.enabled = true; - this.view.fullWidth = fullWidth; - this.view.fullHeight = fullHeight; - this.view.offsetX = x; - this.view.offsetY = y; - this.view.width = width2; - this.view.height = height2; - this.updateProjectionMatrix(); - } - clearViewOffset() { - if (this.view !== null) { - this.view.enabled = false; - } - this.updateProjectionMatrix(); - } - updateProjectionMatrix() { - const near = this.near; - let top2 = near * Math.tan(DEG2RAD * 0.5 * this.fov) / this.zoom; - let height2 = 2 * top2; - let width2 = this.aspect * height2; - let left2 = -0.5 * width2; - const view = this.view; - if (this.view !== null && this.view.enabled) { - const fullWidth = view.fullWidth, fullHeight = view.fullHeight; - left2 += view.offsetX * width2 / fullWidth; - top2 -= view.offsetY * height2 / fullHeight; - width2 *= view.width / fullWidth; - height2 *= view.height / fullHeight; - } - const skew = this.filmOffset; - if (skew !== 0) - left2 += near * skew / this.getFilmWidth(); - this.projectionMatrix.makePerspective(left2, left2 + width2, top2, top2 - height2, near, this.far); - this.projectionMatrixInverse.copy(this.projectionMatrix).invert(); - } - toJSON(meta) { - const data = super.toJSON(meta); - data.object.fov = this.fov; - data.object.zoom = this.zoom; - data.object.near = this.near; - data.object.far = this.far; - data.object.focus = this.focus; - data.object.aspect = this.aspect; - if (this.view !== null) - data.object.view = Object.assign({}, this.view); - data.object.filmGauge = this.filmGauge; - data.object.filmOffset = this.filmOffset; - return data; + [SUBSCRIBE("hideSelectionToolView")]() { + this.hide(); } } -PerspectiveCamera.prototype.isPerspectiveCamera = true; -const fov = 90, aspect = 1; -class CubeCamera extends Object3D { - constructor(near, far, renderTarget) { - super(); - this.type = "CubeCamera"; - if (renderTarget.isWebGLCubeRenderTarget !== true) { - console.error("THREE.CubeCamera: The constructor now expects an instance of WebGLCubeRenderTarget as third parameter."); - return; - } - this.renderTarget = renderTarget; - const cameraPX = new PerspectiveCamera(fov, aspect, near, far); - cameraPX.layers = this.layers; - cameraPX.up.set(0, -1, 0); - cameraPX.lookAt(new Vector3(1, 0, 0)); - this.add(cameraPX); - const cameraNX = new PerspectiveCamera(fov, aspect, near, far); - cameraNX.layers = this.layers; - cameraNX.up.set(0, -1, 0); - cameraNX.lookAt(new Vector3(-1, 0, 0)); - this.add(cameraNX); - const cameraPY = new PerspectiveCamera(fov, aspect, near, far); - cameraPY.layers = this.layers; - cameraPY.up.set(0, 0, 1); - cameraPY.lookAt(new Vector3(0, 1, 0)); - this.add(cameraPY); - const cameraNY = new PerspectiveCamera(fov, aspect, near, far); - cameraNY.layers = this.layers; - cameraNY.up.set(0, 0, -1); - cameraNY.lookAt(new Vector3(0, -1, 0)); - this.add(cameraNY); - const cameraPZ = new PerspectiveCamera(fov, aspect, near, far); - cameraPZ.layers = this.layers; - cameraPZ.up.set(0, -1, 0); - cameraPZ.lookAt(new Vector3(0, 0, 1)); - this.add(cameraPZ); - const cameraNZ = new PerspectiveCamera(fov, aspect, near, far); - cameraNZ.layers = this.layers; - cameraNZ.up.set(0, -1, 0); - cameraNZ.lookAt(new Vector3(0, 0, -1)); - this.add(cameraNZ); - } - update(renderer, scene) { - if (this.parent === null) - this.updateMatrixWorld(); - const renderTarget = this.renderTarget; - const [cameraPX, cameraNX, cameraPY, cameraNY, cameraPZ, cameraNZ] = this.children; - const currentRenderTarget = renderer.getRenderTarget(); - const currentOutputEncoding = renderer.outputEncoding; - const currentToneMapping = renderer.toneMapping; - const currentXrEnabled = renderer.xr.enabled; - renderer.outputEncoding = LinearEncoding; - renderer.toneMapping = NoToneMapping; - renderer.xr.enabled = false; - const generateMipmaps = renderTarget.texture.generateMipmaps; - renderTarget.texture.generateMipmaps = false; - renderer.setRenderTarget(renderTarget, 0); - renderer.render(scene, cameraPX); - renderer.setRenderTarget(renderTarget, 1); - renderer.render(scene, cameraNX); - renderer.setRenderTarget(renderTarget, 2); - renderer.render(scene, cameraPY); - renderer.setRenderTarget(renderTarget, 3); - renderer.render(scene, cameraNY); - renderer.setRenderTarget(renderTarget, 4); - renderer.render(scene, cameraPZ); - renderTarget.texture.generateMipmaps = generateMipmaps; - renderer.setRenderTarget(renderTarget, 5); - renderer.render(scene, cameraNZ); - renderer.setRenderTarget(currentRenderTarget); - renderer.outputEncoding = currentOutputEncoding; - renderer.toneMapping = currentToneMapping; - renderer.xr.enabled = currentXrEnabled; - renderTarget.texture.needsPMREMUpdate = true; - } -} -class CubeTexture extends Texture { - constructor(images, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy, encoding) { - images = images !== void 0 ? images : []; - mapping = mapping !== void 0 ? mapping : CubeReflectionMapping; - super(images, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy, encoding); - this.flipY = false; - } - get images() { - return this.image; +var directionType = { + 1: "to top left", + 2: "to top right", + 3: "to bottom right", + 4: "to bottom left", + 11: "to top", + 12: "to right", + 13: "to bottom", + 14: "to left" +}; +const SelectionToolEvent = class extends EditorElement { + checkViewMode() { + return this.$modeView.isCurrentMode(ViewModeType.CanvasView); } - set images(value) { - this.image = value; - } -} -CubeTexture.prototype.isCubeTexture = true; -class WebGLCubeRenderTarget extends WebGLRenderTarget { - constructor(size2, options2 = {}) { - super(size2, size2, options2); - const image2 = { width: size2, height: size2, depth: 1 }; - const images = [image2, image2, image2, image2, image2, image2]; - this.texture = new CubeTexture(images, options2.mapping, options2.wrapS, options2.wrapT, options2.magFilter, options2.minFilter, options2.format, options2.type, options2.anisotropy, options2.encoding); - this.texture.isRenderTargetTexture = true; - this.texture.generateMipmaps = options2.generateMipmaps !== void 0 ? options2.generateMipmaps : false; - this.texture.minFilter = options2.minFilter !== void 0 ? options2.minFilter : LinearFilter; - } - fromEquirectangularTexture(renderer, texture2) { - this.texture.type = texture2.type; - this.texture.encoding = texture2.encoding; - this.texture.generateMipmaps = texture2.generateMipmaps; - this.texture.minFilter = texture2.minFilter; - this.texture.magFilter = texture2.magFilter; - const shader = { - uniforms: { - tEquirect: { value: null } - }, - vertexShader: ` - - varying vec3 vWorldDirection; - - vec3 transformDirection( in vec3 dir, in mat4 matrix ) { - - return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz ); - - } - - void main() { - - vWorldDirection = transformDirection( position, modelMatrix ); - - #include - #include - - } - `, - fragmentShader: ` - - uniform sampler2D tEquirect; - - varying vec3 vWorldDirection; - - #include - - void main() { - - vec3 direction = normalize( vWorldDirection ); - - vec2 sampleUV = equirectUv( direction ); - - gl_FragColor = texture2D( tEquirect, sampleUV ); - - } - ` - }; - const geometry = new BoxGeometry(5, 5, 5); - const material = new ShaderMaterial({ - name: "CubemapFromEquirect", - uniforms: cloneUniforms(shader.uniforms), - vertexShader: shader.vertexShader, - fragmentShader: shader.fragmentShader, - side: BackSide, - blending: NoBlending - }); - material.uniforms.tEquirect.value = texture2; - const mesh = new Mesh(geometry, material); - const currentMinFilter = texture2.minFilter; - if (texture2.minFilter === LinearMipmapLinearFilter) - texture2.minFilter = LinearFilter; - const camera = new CubeCamera(1, 10, this); - camera.update(renderer, mesh); - texture2.minFilter = currentMinFilter; - mesh.geometry.dispose(); - mesh.material.dispose(); - return this; + [SUBSCRIBE(REFRESH_SELECTION, REFRESH_SELECTION_TOOL) + IF("checkViewMode")]() { + this.initSelectionTool(); } - clear(renderer, color2, depth, stencil) { - const currentRenderTarget = renderer.getRenderTarget(); - for (let i = 0; i < 6; i++) { - renderer.setRenderTarget(this, i); - renderer.clear(color2, depth, stencil); + [SUBSCRIBE(UPDATE_VIEWPORT) + IF("checkViewMode")]() { + if (this.$context.selection.isOne) { + this.initSelectionTool(); + } else { + this.hide(); } - renderer.setRenderTarget(currentRenderTarget); - } -} -WebGLCubeRenderTarget.prototype.isWebGLCubeRenderTarget = true; -const _vector1 = /* @__PURE__ */ new Vector3(); -const _vector2 = /* @__PURE__ */ new Vector3(); -const _normalMatrix = /* @__PURE__ */ new Matrix3(); -class Plane { - constructor(normal = new Vector3(1, 0, 0), constant = 0) { - this.normal = normal; - this.constant = constant; - } - set(normal, constant) { - this.normal.copy(normal); - this.constant = constant; - return this; - } - setComponents(x, y, z, w) { - this.normal.set(x, y, z); - this.constant = w; - return this; - } - setFromNormalAndCoplanarPoint(normal, point2) { - this.normal.copy(normal); - this.constant = -point2.dot(this.normal); - return this; } - setFromCoplanarPoints(a, b, c2) { - const normal = _vector1.subVectors(c2, b).cross(_vector2.subVectors(a, b)).normalize(); - this.setFromNormalAndCoplanarPoint(normal, a); - return this; + [SUBSCRIBE("updateModeView")]() { + if (this.checkViewMode()) { + this.initSelectionTool(); + } else { + this.hide(); + } } - copy(plane) { - this.normal.copy(plane.normal); - this.constant = plane.constant; - return this; +}; +class SelectionToolView extends SelectionToolEvent { + template() { + return ` + + `; } - normalize() { - const inverseNormalLength = 1 / this.normal.length(); - this.normal.multiplyScalar(inverseNormalLength); - this.constant *= inverseNormalLength; - return this; + toggleEditingPath(isEditingPath) { + this.$el.toggleClass("editing-path", isEditingPath); } - negate() { - this.constant *= -1; - this.normal.negate(); - return this; + [POINTERSTART("$pointerRect .rotate-pointer") + MOVE("rotateVertex") + END("rotateEndVertex")](e) { + this.state.moveType = "rotate"; + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.$context.selection.reselect(); + this.verties = clone$1(this.$context.selection.verties); + this.$context.snapManager.clear(); + this.rotateTargetNumber = +e.$dt.attr("data-number"); + this.refreshRotatePointerIcon(); + this.state.dragging = true; + this.state.isRotate = true; + this.initAngle = this.$context.selection.current.angle; } - distanceToPoint(point2) { - return this.normal.dot(point2) + this.constant; + rotateVertex() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const distVector = subtract([], targetMousePoint, this.initMousePoint); + const targetRotatePointer = this.rotateTargetNumber === 4 ? getRotatePointer(this.verties, 34) : this.verties[this.rotateTargetNumber]; + var distAngle = Math.floor(calculateAngleForVec3(targetRotatePointer, this.verties[4], distVector)); + const instance = this.$context.selection.current; + let newAngle = this.initAngle + distAngle; + if (instance) { + if (this.$config.get("bodyEvent").shiftKey) { + newAngle -= newAngle % this.$config.get("fixed.angle"); + } + instance.angle = round(newAngle % 360, 100); + } + this.state.dragging = true; + this.$commands.emit("setAttribute", this.$context.selection.pack("angle")); + this.makeSelectionTool(); } - distanceToSphere(sphere) { - return this.distanceToPoint(sphere.center) - sphere.radius; + rotateEndVertex() { + this.state.dragging = false; + this.state.isRotate = false; + this.$commands.emit("recoverCursor"); + this.verties = null; + this.$commands.executeCommand("setAttribute", "change rotate", this.$context.selection.pack("angle")); } - projectPoint(point2, target) { - return target.copy(this.normal).multiplyScalar(-this.distanceToPoint(point2)).add(point2); + refreshRotatePointerIcon() { + this.$commands.emit("refreshCursor", "rotate"); } - intersectLine(line2, target) { - const direction2 = line2.delta(_vector1); - const denominator = this.normal.dot(direction2); - if (denominator === 0) { - if (this.distanceToPoint(line2.start) === 0) { - return target.copy(line2.start); - } - return null; - } - const t = -(line2.start.dot(this.normal) + this.constant) / denominator; - if (t < 0 || t > 1) { - return null; + refreshPointerIcon(e) { + const dataPointer = e.$dt.data("pointer"); + if (dataPointer) { + const pointer = dataPointer.split(",").map((it) => Number(it)); + const diff = subtract([], pointer, this.state.renderPointerList[0][4]); + const angle = calculateAngle360(diff[0], diff[1]); + let iconAngle = Math.floor(angle); + this.$commands.emit("refreshCursor", "direction", `rotate(${iconAngle} 8 8)`); + } else { + this.$commands.emit("recoverCursor"); } - return target.copy(direction2).multiplyScalar(t).add(line2.start); - } - intersectsLine(line2) { - const startSign = this.distanceToPoint(line2.start); - const endSign = this.distanceToPoint(line2.end); - return startSign < 0 && endSign > 0 || endSign < 0 && startSign > 0; } - intersectsBox(box) { - return box.intersectsPlane(this); + checkPointerIsNotMoved() { + return Boolean(this.state.dragging) === false && this.$config.false("set.move.control.point"); } - intersectsSphere(sphere) { - return sphere.intersectsPlane(this); + [POINTEROVER("$pointerRect .rotate-pointer") + IF("checkPointerIsNotMoved")](e) { + this.refreshRotatePointerIcon(e); } - coplanarPoint(target) { - return target.copy(this.normal).multiplyScalar(-this.constant); + [POINTEROVER("$pointerRect .pointer") + IF("checkPointerIsNotMoved")](e) { + this.refreshPointerIcon(e); } - applyMatrix4(matrix, optionalNormalMatrix) { - const normalMatrix = optionalNormalMatrix || _normalMatrix.getNormalMatrix(matrix); - const referencePoint = this.coplanarPoint(_vector1).applyMatrix4(matrix); - const normal = this.normal.applyMatrix3(normalMatrix).normalize(); - this.constant = -referencePoint.dot(normal); - return this; + [POINTEROUT("$pointerRect .pointer,.rotate-pointer") + IF("checkPointerIsNotMoved")]() { + this.$commands.emit("recoverCursor"); } - translate(offset) { - this.constant -= offset.dot(this.normal); - return this; + [POINTERSTART("$pointerRect .pointer") + MOVE("moveVertex") + END("moveEndVertex")](e) { + this.refreshPointerIcon(e); + this.state.dragging = true; + const num = +e.$dt.attr("data-number"); + const direction2 = directionType[`${num}`]; + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.state.moveType = direction2; + this.state.moveTarget = num; + this.$context.snapManager.clear(); + this.verties = this.$context.selection.verties; + this.hasRotate = this.$context.selection.current.angle !== 0; + this.cachedCurrentItemMatrix = this.$context.selection.current.matrix; + this.$context.selection.startToCacheChildren(); } - equals(plane) { - return plane.normal.equals(this.normal) && plane.constant === this.constant; + calculateDistance(vertex, distVector, reverseMatrix) { + const currentVertex = clone(vertex); + const moveVertex = add$1([], currentVertex, distVector); + const snap = this.$context.snapManager.check([moveVertex], 5 / this.$viewport.scale); + const nextVertex = add$1([], moveVertex, snap.dist); + const [currentResult, nextResult] = vertiesMap([currentVertex, nextVertex], reverseMatrix); + const realDist = subtract([], nextResult, currentResult); + return realDist; } - clone() { - return new this.constructor().copy(this); - } -} -Plane.prototype.isPlane = true; -const _sphere$2 = /* @__PURE__ */ new Sphere(); -const _vector$7 = /* @__PURE__ */ new Vector3(); -class Frustum { - constructor(p0 = new Plane(), p1 = new Plane(), p2 = new Plane(), p3 = new Plane(), p4 = new Plane(), p5 = new Plane()) { - this.planes = [p0, p1, p2, p3, p4, p5]; - } - set(p0, p1, p2, p3, p4, p5) { - const planes = this.planes; - planes[0].copy(p0); - planes[1].copy(p1); - planes[2].copy(p2); - planes[3].copy(p3); - planes[4].copy(p4); - planes[5].copy(p5); - return this; + calculateRealDist(item, vertexIndex, distVector) { + return this.calculateDistance(item.verties[vertexIndex], distVector, item.absoluteMatrixInverse); } - copy(frustum) { - const planes = this.planes; - for (let i = 0; i < 6; i++) { - planes[i].copy(frustum.planes[i]); + moveItem(instance, lastStartVertex, newWidth, newHeight, options2 = {}) { + if (instance) { + let data = { + x: lastStartVertex[0] + (newWidth < 0 ? newWidth : 0), + y: lastStartVertex[1] + (newHeight < 0 ? newHeight : 0), + width: Math.max(Math.abs(newWidth), 1), + height: Math.max(Math.abs(newHeight), 1) + }; + if (instance.isInFlex()) { + delete data.x; + delete data.y; + } else if (instance.isInGrid()) + ; + if (this.hasRotate) + ; + else { + data = objectFloor(data); + data.width = Math.max(data.width, 1); + data.height = Math.max(data.height, 1); + } + instance.reset(__spreadValues(__spreadValues({}, data), options2)); } - return this; } - setFromProjectionMatrix(m) { - const planes = this.planes; - const me = m.elements; - const me0 = me[0], me1 = me[1], me2 = me[2], me3 = me[3]; - const me4 = me[4], me5 = me[5], me6 = me[6], me7 = me[7]; - const me8 = me[8], me9 = me[9], me10 = me[10], me11 = me[11]; - const me12 = me[12], me13 = me[13], me14 = me[14], me15 = me[15]; - planes[0].setComponents(me3 - me0, me7 - me4, me11 - me8, me15 - me12).normalize(); - planes[1].setComponents(me3 + me0, me7 + me4, me11 + me8, me15 + me12).normalize(); - planes[2].setComponents(me3 + me1, me7 + me5, me11 + me9, me15 + me13).normalize(); - planes[3].setComponents(me3 - me1, me7 - me5, me11 - me9, me15 - me13).normalize(); - planes[4].setComponents(me3 - me2, me7 - me6, me11 - me10, me15 - me14).normalize(); - planes[5].setComponents(me3 + me2, me7 + me6, me11 + me10, me15 + me14).normalize(); - return this; + moveDirectionVertex(item, newWidth, newHeight, direction2, directionNewVector, options2 = {}) { + const center2 = subtract([], TransformOrigin.scale(item.originalTransformOrigin, newWidth, newHeight), directionNewVector); + const newOffsetInverse = calculateMatrixInverse(fromTranslation([], directionNewVector), fromTranslation([], center2), item.itemMatrix, fromTranslation([], negate([], center2))); + const view = calculateMatrix(item.directionMatrix[direction2], newOffsetInverse); + const lastStartVertex = getTranslation([], view); + this.moveItem(this.$model.get(item.id), lastStartVertex, newWidth, newHeight, options2); } - intersectsObject(object) { - const geometry = object.geometry; - if (geometry.boundingSphere === null) - geometry.computeBoundingSphere(); - _sphere$2.copy(geometry.boundingSphere).applyMatrix4(object.matrixWorld); - return this.intersectsSphere(_sphere$2); - } - intersectsSprite(sprite) { - _sphere$2.center.set(0, 0, 0); - _sphere$2.radius = 0.7071067811865476; - _sphere$2.applyMatrix4(sprite.matrixWorld); - return this.intersectsSphere(_sphere$2); - } - intersectsSphere(sphere) { - const planes = this.planes; - const center2 = sphere.center; - const negRadius = -sphere.radius; - for (let i = 0; i < 6; i++) { - const distance2 = planes[i].distanceToPoint(center2); - if (distance2 < negRadius) { - return false; + moveBottomRightVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx, realDy] = this.calculateRealDist(item, 2, distVector); + let directionNewVector = fromValues(0, 0, 0); + if (altKey) { + realDx = realDx * 2; + realDy = realDy * 2; + } + if (shiftKey) { + realDy = realDx * item.height / item.width; + } + const newWidth = item.width + realDx; + const newHeight = metaKey ? newWidth : item.height + realDy; + if (altKey) { + directionNewVector = fromValues(realDx / 2, realDy / 2, 0); } + this.moveDirectionVertex(item, newWidth, newHeight, "to top left", directionNewVector, { + resizingVertical: ResizingMode.FIXED, + resizingHorizontal: ResizingMode.FIXED + }); + this.updateGridArea(item); } - return true; } - intersectsBox(box) { - const planes = this.planes; - for (let i = 0; i < 6; i++) { - const plane = planes[i]; - _vector$7.x = plane.normal.x > 0 ? box.max.x : box.min.x; - _vector$7.y = plane.normal.y > 0 ? box.max.y : box.min.y; - _vector$7.z = plane.normal.z > 0 ? box.max.z : box.min.z; - if (plane.distanceToPoint(_vector$7) < 0) { - return false; + moveTopRightVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx, realDy] = this.calculateRealDist(item, 1, distVector); + if (altKey) { + realDx = realDx * 2; + realDy = realDy * 2; + } + if (shiftKey) { + realDy = -(realDx * item.height / item.width); + } + const newWidth = item.width + realDx; + const newHeight = metaKey ? newWidth : item.height - realDy; + let directionNewVector = fromValues(0, newHeight, 0); + if (altKey) { + directionNewVector = fromValues(realDx / 2, newHeight + realDy / 2, 0); } + this.moveDirectionVertex(item, newWidth, newHeight, "to bottom left", directionNewVector, { + resizingVertical: ResizingMode.FIXED, + resizingHorizontal: ResizingMode.FIXED + }); + this.updateGridArea(item); } - return true; } - containsPoint(point2) { - const planes = this.planes; - for (let i = 0; i < 6; i++) { - if (planes[i].distanceToPoint(point2) < 0) { - return false; + moveTopLeftVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx, realDy] = this.calculateRealDist(item, 0, distVector); + if (altKey) { + realDx = realDx * 2; + realDy = realDy * 2; + } + if (shiftKey) { + realDy = realDx * item.height / item.width; + } + const newWidth = item.width - realDx; + const newHeight = metaKey ? newWidth : item.height - realDy; + let directionNewVector = fromValues(newWidth, newHeight, 0); + if (altKey) { + directionNewVector = fromValues(newWidth + realDx / 2, newHeight + realDy / 2, 0); } + this.moveDirectionVertex(item, newWidth, newHeight, "to bottom right", directionNewVector, { + resizingHorizontal: ResizingMode.FIXED, + resizingVertical: ResizingMode.FIXED + }); + this.updateGridArea(item); } - return true; - } - clone() { - return new this.constructor().copy(this); } -} -function WebGLAnimation() { - let context = null; - let isAnimating = false; - let animationLoop = null; - let requestId = null; - function onAnimationFrame(time, frame) { - animationLoop(time, frame); - requestId = context.requestAnimationFrame(onAnimationFrame); - } - return { - start: function() { - if (isAnimating === true) - return; - if (animationLoop === null) - return; - requestId = context.requestAnimationFrame(onAnimationFrame); - isAnimating = true; - }, - stop: function() { - context.cancelAnimationFrame(requestId); - isAnimating = false; - }, - setAnimationLoop: function(callback) { - animationLoop = callback; - }, - setContext: function(value) { - context = value; - } - }; -} -function WebGLAttributes(gl, capabilities) { - const isWebGL2 = capabilities.isWebGL2; - const buffers = /* @__PURE__ */ new WeakMap(); - function createBuffer(attribute, bufferType) { - const array = attribute.array; - const usage = attribute.usage; - const buffer = gl.createBuffer(); - gl.bindBuffer(bufferType, buffer); - gl.bufferData(bufferType, array, usage); - attribute.onUploadCallback(); - let type; - if (array instanceof Float32Array) { - type = 5126; - } else if (array instanceof Uint16Array) { - if (attribute.isFloat16BufferAttribute) { - if (isWebGL2) { - type = 5131; - } else { - throw new Error("THREE.WebGLAttributes: Usage of Float16BufferAttribute requires WebGL2."); - } - } else { - type = 5123; - } - } else if (array instanceof Int16Array) { - type = 5122; - } else if (array instanceof Uint32Array) { - type = 5125; - } else if (array instanceof Int32Array) { - type = 5124; - } else if (array instanceof Int8Array) { - type = 5120; - } else if (array instanceof Uint8Array) { - type = 5121; - } else if (array instanceof Uint8ClampedArray) { - type = 5121; - } else { - throw new Error("THREE.WebGLAttributes: Unsupported buffer data format: " + array); + moveTopVertex(distVector) { + const { altKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [, realDy] = this.calculateRealDist(item, 0, distVector); + if (altKey) { + realDy = realDy * 2; + } + const newWidth = item.width; + const newHeight = item.height - realDy; + let directionNewVector = fromValues(newWidth / 2, newHeight, 0); + if (altKey) { + directionNewVector = fromValues(newWidth / 2, newHeight + realDy / 2, 0); + } + this.moveDirectionVertex(item, newWidth, newHeight, "to bottom", directionNewVector, { + resizingVertical: ResizingMode.FIXED + }); + this.updateGridArea(item); } - return { - buffer, - type, - bytesPerElement: array.BYTES_PER_ELEMENT, - version: attribute.version - }; } - function updateBuffer(buffer, attribute, bufferType) { - const array = attribute.array; - const updateRange = attribute.updateRange; - gl.bindBuffer(bufferType, buffer); - if (updateRange.count === -1) { - gl.bufferSubData(bufferType, 0, array); - } else { - if (isWebGL2) { - gl.bufferSubData(bufferType, updateRange.offset * array.BYTES_PER_ELEMENT, array, updateRange.offset, updateRange.count); - } else { - gl.bufferSubData(bufferType, updateRange.offset * array.BYTES_PER_ELEMENT, array.subarray(updateRange.offset, updateRange.offset + updateRange.count)); - } - updateRange.count = -1; - } - } - function get2(attribute) { - if (attribute.isInterleavedBufferAttribute) - attribute = attribute.data; - return buffers.get(attribute); - } - function remove3(attribute) { - if (attribute.isInterleavedBufferAttribute) - attribute = attribute.data; - const data = buffers.get(attribute); - if (data) { - gl.deleteBuffer(data.buffer); - buffers.delete(attribute); - } - } - function update2(attribute, bufferType) { - if (attribute.isGLBufferAttribute) { - const cached = buffers.get(attribute); - if (!cached || cached.version < attribute.version) { - buffers.set(attribute, { - buffer: attribute.buffer, - type: attribute.type, - bytesPerElement: attribute.elementSize, - version: attribute.version - }); + moveBottomVertex(distVector) { + const { altKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [, realDy] = this.calculateRealDist(item, 3, distVector); + if (altKey) { + realDy = realDy * 2; } - return; - } - if (attribute.isInterleavedBufferAttribute) - attribute = attribute.data; - const data = buffers.get(attribute); - if (data === void 0) { - buffers.set(attribute, createBuffer(attribute, bufferType)); - } else if (data.version < attribute.version) { - updateBuffer(data.buffer, attribute, bufferType); - data.version = attribute.version; + const newWidth = item.width; + const newHeight = item.height + realDy; + let directionNewVector = fromValues(newWidth / 2, 0, 0); + if (altKey) { + directionNewVector = fromValues(newWidth / 2, realDy / 2, 0); + } + this.moveDirectionVertex(item, newWidth, newHeight, "to top", directionNewVector, { + resizingVertical: ResizingMode.FIXED + }); + this.updateGridArea(item); } } - return { - get: get2, - remove: remove3, - update: update2 - }; -} -class PlaneGeometry extends BufferGeometry { - constructor(width2 = 1, height2 = 1, widthSegments = 1, heightSegments = 1) { - super(); - this.type = "PlaneGeometry"; - this.parameters = { - width: width2, - height: height2, - widthSegments, - heightSegments - }; - const width_half = width2 / 2; - const height_half = height2 / 2; - const gridX = Math.floor(widthSegments); - const gridY = Math.floor(heightSegments); - const gridX1 = gridX + 1; - const gridY1 = gridY + 1; - const segment_width = width2 / gridX; - const segment_height = height2 / gridY; - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - for (let iy = 0; iy < gridY1; iy++) { - const y = iy * segment_height - height_half; - for (let ix = 0; ix < gridX1; ix++) { - const x = ix * segment_width - width_half; - vertices.push(x, -y, 0); - normals.push(0, 0, 1); - uvs.push(ix / gridX); - uvs.push(1 - iy / gridY); - } - } - for (let iy = 0; iy < gridY; iy++) { - for (let ix = 0; ix < gridX; ix++) { - const a = ix + gridX1 * iy; - const b = ix + gridX1 * (iy + 1); - const c2 = ix + 1 + gridX1 * (iy + 1); - const d = ix + 1 + gridX1 * iy; - indices.push(a, b, d); - indices.push(b, c2, d); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - } - static fromJSON(data) { - return new PlaneGeometry(data.width, data.height, data.widthSegments, data.heightSegments); - } -} -var alphamap_fragment = "#ifdef USE_ALPHAMAP\n diffuseColor.a *= texture2D( alphaMap, vUv ).g;\n#endif"; -var alphamap_pars_fragment = "#ifdef USE_ALPHAMAP\n uniform sampler2D alphaMap;\n#endif"; -var alphatest_fragment = "#ifdef USE_ALPHATEST\n if ( diffuseColor.a < alphaTest ) discard;\n#endif"; -var alphatest_pars_fragment = "#ifdef USE_ALPHATEST\n uniform float alphaTest;\n#endif"; -var aomap_fragment = "#ifdef USE_AOMAP\n float ambientOcclusion = ( texture2D( aoMap, vUv2 ).r - 1.0 ) * aoMapIntensity + 1.0;\n reflectedLight.indirectDiffuse *= ambientOcclusion;\n #if defined( USE_ENVMAP ) && defined( STANDARD )\n float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) );\n reflectedLight.indirectSpecular *= computeSpecularOcclusion( dotNV, ambientOcclusion, material.roughness );\n #endif\n#endif"; -var aomap_pars_fragment = "#ifdef USE_AOMAP\n uniform sampler2D aoMap;\n uniform float aoMapIntensity;\n#endif"; -var begin_vertex = "vec3 transformed = vec3( position );"; -var beginnormal_vertex = "vec3 objectNormal = vec3( normal );\n#ifdef USE_TANGENT\n vec3 objectTangent = vec3( tangent.xyz );\n#endif"; -var bsdfs = "vec3 BRDF_Lambert( const in vec3 diffuseColor ) {\n return RECIPROCAL_PI * diffuseColor;\n}\nvec3 F_Schlick( const in vec3 f0, const in float f90, const in float dotVH ) {\n float fresnel = exp2( ( - 5.55473 * dotVH - 6.98316 ) * dotVH );\n return f0 * ( 1.0 - fresnel ) + ( f90 * fresnel );\n}\nfloat V_GGX_SmithCorrelated( const in float alpha, const in float dotNL, const in float dotNV ) {\n float a2 = pow2( alpha );\n float gv = dotNL * sqrt( a2 + ( 1.0 - a2 ) * pow2( dotNV ) );\n float gl = dotNV * sqrt( a2 + ( 1.0 - a2 ) * pow2( dotNL ) );\n return 0.5 / max( gv + gl, EPSILON );\n}\nfloat D_GGX( const in float alpha, const in float dotNH ) {\n float a2 = pow2( alpha );\n float denom = pow2( dotNH ) * ( a2 - 1.0 ) + 1.0;\n return RECIPROCAL_PI * a2 / pow2( denom );\n}\nvec3 BRDF_GGX( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, const in vec3 f0, const in float f90, const in float roughness ) {\n float alpha = pow2( roughness );\n vec3 halfDir = normalize( lightDir + viewDir );\n float dotNL = saturate( dot( normal, lightDir ) );\n float dotNV = saturate( dot( normal, viewDir ) );\n float dotNH = saturate( dot( normal, halfDir ) );\n float dotVH = saturate( dot( viewDir, halfDir ) );\n vec3 F = F_Schlick( f0, f90, dotVH );\n float V = V_GGX_SmithCorrelated( alpha, dotNL, dotNV );\n float D = D_GGX( alpha, dotNH );\n return F * ( V * D );\n}\nvec2 LTC_Uv( const in vec3 N, const in vec3 V, const in float roughness ) {\n const float LUT_SIZE = 64.0;\n const float LUT_SCALE = ( LUT_SIZE - 1.0 ) / LUT_SIZE;\n const float LUT_BIAS = 0.5 / LUT_SIZE;\n float dotNV = saturate( dot( N, V ) );\n vec2 uv = vec2( roughness, sqrt( 1.0 - dotNV ) );\n uv = uv * LUT_SCALE + LUT_BIAS;\n return uv;\n}\nfloat LTC_ClippedSphereFormFactor( const in vec3 f ) {\n float l = length( f );\n return max( ( l * l + f.z ) / ( l + 1.0 ), 0.0 );\n}\nvec3 LTC_EdgeVectorFormFactor( const in vec3 v1, const in vec3 v2 ) {\n float x = dot( v1, v2 );\n float y = abs( x );\n float a = 0.8543985 + ( 0.4965155 + 0.0145206 * y ) * y;\n float b = 3.4175940 + ( 4.1616724 + y ) * y;\n float v = a / b;\n float theta_sintheta = ( x > 0.0 ) ? v : 0.5 * inversesqrt( max( 1.0 - x * x, 1e-7 ) ) - v;\n return cross( v1, v2 ) * theta_sintheta;\n}\nvec3 LTC_Evaluate( const in vec3 N, const in vec3 V, const in vec3 P, const in mat3 mInv, const in vec3 rectCoords[ 4 ] ) {\n vec3 v1 = rectCoords[ 1 ] - rectCoords[ 0 ];\n vec3 v2 = rectCoords[ 3 ] - rectCoords[ 0 ];\n vec3 lightNormal = cross( v1, v2 );\n if( dot( lightNormal, P - rectCoords[ 0 ] ) < 0.0 ) return vec3( 0.0 );\n vec3 T1, T2;\n T1 = normalize( V - N * dot( V, N ) );\n T2 = - cross( N, T1 );\n mat3 mat = mInv * transposeMat3( mat3( T1, T2, N ) );\n vec3 coords[ 4 ];\n coords[ 0 ] = mat * ( rectCoords[ 0 ] - P );\n coords[ 1 ] = mat * ( rectCoords[ 1 ] - P );\n coords[ 2 ] = mat * ( rectCoords[ 2 ] - P );\n coords[ 3 ] = mat * ( rectCoords[ 3 ] - P );\n coords[ 0 ] = normalize( coords[ 0 ] );\n coords[ 1 ] = normalize( coords[ 1 ] );\n coords[ 2 ] = normalize( coords[ 2 ] );\n coords[ 3 ] = normalize( coords[ 3 ] );\n vec3 vectorFormFactor = vec3( 0.0 );\n vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 0 ], coords[ 1 ] );\n vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 1 ], coords[ 2 ] );\n vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 2 ], coords[ 3 ] );\n vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 3 ], coords[ 0 ] );\n float result = LTC_ClippedSphereFormFactor( vectorFormFactor );\n return vec3( result );\n}\nfloat G_BlinnPhong_Implicit( ) {\n return 0.25;\n}\nfloat D_BlinnPhong( const in float shininess, const in float dotNH ) {\n return RECIPROCAL_PI * ( shininess * 0.5 + 1.0 ) * pow( dotNH, shininess );\n}\nvec3 BRDF_BlinnPhong( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, const in vec3 specularColor, const in float shininess ) {\n vec3 halfDir = normalize( lightDir + viewDir );\n float dotNH = saturate( dot( normal, halfDir ) );\n float dotVH = saturate( dot( viewDir, halfDir ) );\n vec3 F = F_Schlick( specularColor, 1.0, dotVH );\n float G = G_BlinnPhong_Implicit( );\n float D = D_BlinnPhong( shininess, dotNH );\n return F * ( G * D );\n}\n#if defined( USE_SHEEN )\nfloat D_Charlie( float roughness, float dotNH ) {\n float alpha = pow2( roughness );\n float invAlpha = 1.0 / alpha;\n float cos2h = dotNH * dotNH;\n float sin2h = max( 1.0 - cos2h, 0.0078125 );\n return ( 2.0 + invAlpha ) * pow( sin2h, invAlpha * 0.5 ) / ( 2.0 * PI );\n}\nfloat V_Neubelt( float dotNV, float dotNL ) {\n return saturate( 1.0 / ( 4.0 * ( dotNL + dotNV - dotNL * dotNV ) ) );\n}\nvec3 BRDF_Sheen( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, vec3 sheenColor, const in float sheenRoughness ) {\n vec3 halfDir = normalize( lightDir + viewDir );\n float dotNL = saturate( dot( normal, lightDir ) );\n float dotNV = saturate( dot( normal, viewDir ) );\n float dotNH = saturate( dot( normal, halfDir ) );\n float D = D_Charlie( sheenRoughness, dotNH );\n float V = V_Neubelt( dotNV, dotNL );\n return sheenColor * ( D * V );\n}\n#endif"; -var bumpmap_pars_fragment = "#ifdef USE_BUMPMAP\n uniform sampler2D bumpMap;\n uniform float bumpScale;\n vec2 dHdxy_fwd() {\n vec2 dSTdx = dFdx( vUv );\n vec2 dSTdy = dFdy( vUv );\n float Hll = bumpScale * texture2D( bumpMap, vUv ).x;\n float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll;\n float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll;\n return vec2( dBx, dBy );\n }\n vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) {\n vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) );\n vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) );\n vec3 vN = surf_norm;\n vec3 R1 = cross( vSigmaY, vN );\n vec3 R2 = cross( vN, vSigmaX );\n float fDet = dot( vSigmaX, R1 ) * faceDirection;\n vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );\n return normalize( abs( fDet ) * surf_norm - vGrad );\n }\n#endif"; -var clipping_planes_fragment = "#if NUM_CLIPPING_PLANES > 0\n vec4 plane;\n #pragma unroll_loop_start\n for ( int i = 0; i < UNION_CLIPPING_PLANES; i ++ ) {\n plane = clippingPlanes[ i ];\n if ( dot( vClipPosition, plane.xyz ) > plane.w ) discard;\n }\n #pragma unroll_loop_end\n #if UNION_CLIPPING_PLANES < NUM_CLIPPING_PLANES\n bool clipped = true;\n #pragma unroll_loop_start\n for ( int i = UNION_CLIPPING_PLANES; i < NUM_CLIPPING_PLANES; i ++ ) {\n plane = clippingPlanes[ i ];\n clipped = ( dot( vClipPosition, plane.xyz ) > plane.w ) && clipped;\n }\n #pragma unroll_loop_end\n if ( clipped ) discard;\n #endif\n#endif"; -var clipping_planes_pars_fragment = "#if NUM_CLIPPING_PLANES > 0\n varying vec3 vClipPosition;\n uniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ];\n#endif"; -var clipping_planes_pars_vertex = "#if NUM_CLIPPING_PLANES > 0\n varying vec3 vClipPosition;\n#endif"; -var clipping_planes_vertex = "#if NUM_CLIPPING_PLANES > 0\n vClipPosition = - mvPosition.xyz;\n#endif"; -var color_fragment = "#if defined( USE_COLOR_ALPHA )\n diffuseColor *= vColor;\n#elif defined( USE_COLOR )\n diffuseColor.rgb *= vColor;\n#endif"; -var color_pars_fragment = "#if defined( USE_COLOR_ALPHA )\n varying vec4 vColor;\n#elif defined( USE_COLOR )\n varying vec3 vColor;\n#endif"; -var color_pars_vertex = "#if defined( USE_COLOR_ALPHA )\n varying vec4 vColor;\n#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n varying vec3 vColor;\n#endif"; -var color_vertex = "#if defined( USE_COLOR_ALPHA )\n vColor = vec4( 1.0 );\n#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n vColor = vec3( 1.0 );\n#endif\n#ifdef USE_COLOR\n vColor *= color;\n#endif\n#ifdef USE_INSTANCING_COLOR\n vColor.xyz *= instanceColor.xyz;\n#endif"; -var common = "#define PI 3.141592653589793\n#define PI2 6.283185307179586\n#define PI_HALF 1.5707963267948966\n#define RECIPROCAL_PI 0.3183098861837907\n#define RECIPROCAL_PI2 0.15915494309189535\n#define EPSILON 1e-6\n#ifndef saturate\n#define saturate( a ) clamp( a, 0.0, 1.0 )\n#endif\n#define whiteComplement( a ) ( 1.0 - saturate( a ) )\nfloat pow2( const in float x ) { return x*x; }\nfloat pow3( const in float x ) { return x*x*x; }\nfloat pow4( const in float x ) { float x2 = x*x; return x2*x2; }\nfloat max3( const in vec3 v ) { return max( max( v.x, v.y ), v.z ); }\nfloat average( const in vec3 color ) { return dot( color, vec3( 0.3333 ) ); }\nhighp float rand( const in vec2 uv ) {\n const highp float a = 12.9898, b = 78.233, c = 43758.5453;\n highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );\n return fract( sin( sn ) * c );\n}\n#ifdef HIGH_PRECISION\n float precisionSafeLength( vec3 v ) { return length( v ); }\n#else\n float precisionSafeLength( vec3 v ) {\n float maxComponent = max3( abs( v ) );\n return length( v / maxComponent ) * maxComponent;\n }\n#endif\nstruct IncidentLight {\n vec3 color;\n vec3 direction;\n bool visible;\n};\nstruct ReflectedLight {\n vec3 directDiffuse;\n vec3 directSpecular;\n vec3 indirectDiffuse;\n vec3 indirectSpecular;\n};\nstruct GeometricContext {\n vec3 position;\n vec3 normal;\n vec3 viewDir;\n#ifdef USE_CLEARCOAT\n vec3 clearcoatNormal;\n#endif\n};\nvec3 transformDirection( in vec3 dir, in mat4 matrix ) {\n return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz );\n}\nvec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {\n return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );\n}\nmat3 transposeMat3( const in mat3 m ) {\n mat3 tmp;\n tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x );\n tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y );\n tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z );\n return tmp;\n}\nfloat linearToRelativeLuminance( const in vec3 color ) {\n vec3 weights = vec3( 0.2126, 0.7152, 0.0722 );\n return dot( weights, color.rgb );\n}\nbool isPerspectiveMatrix( mat4 m ) {\n return m[ 2 ][ 3 ] == - 1.0;\n}\nvec2 equirectUv( in vec3 dir ) {\n float u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5;\n float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;\n return vec2( u, v );\n}"; -var cube_uv_reflection_fragment = "#ifdef ENVMAP_TYPE_CUBE_UV\n #define cubeUV_minMipLevel 4.0\n #define cubeUV_minTileSize 16.0\n float getFace( vec3 direction ) {\n vec3 absDirection = abs( direction );\n float face = - 1.0;\n if ( absDirection.x > absDirection.z ) {\n if ( absDirection.x > absDirection.y )\n face = direction.x > 0.0 ? 0.0 : 3.0;\n else\n face = direction.y > 0.0 ? 1.0 : 4.0;\n } else {\n if ( absDirection.z > absDirection.y )\n face = direction.z > 0.0 ? 2.0 : 5.0;\n else\n face = direction.y > 0.0 ? 1.0 : 4.0;\n }\n return face;\n }\n vec2 getUV( vec3 direction, float face ) {\n vec2 uv;\n if ( face == 0.0 ) {\n uv = vec2( direction.z, direction.y ) / abs( direction.x );\n } else if ( face == 1.0 ) {\n uv = vec2( - direction.x, - direction.z ) / abs( direction.y );\n } else if ( face == 2.0 ) {\n uv = vec2( - direction.x, direction.y ) / abs( direction.z );\n } else if ( face == 3.0 ) {\n uv = vec2( - direction.z, direction.y ) / abs( direction.x );\n } else if ( face == 4.0 ) {\n uv = vec2( - direction.x, direction.z ) / abs( direction.y );\n } else {\n uv = vec2( direction.x, direction.y ) / abs( direction.z );\n }\n return 0.5 * ( uv + 1.0 );\n }\n vec3 bilinearCubeUV( sampler2D envMap, vec3 direction, float mipInt ) {\n float face = getFace( direction );\n float filterInt = max( cubeUV_minMipLevel - mipInt, 0.0 );\n mipInt = max( mipInt, cubeUV_minMipLevel );\n float faceSize = exp2( mipInt );\n vec2 uv = getUV( direction, face ) * ( faceSize - 1.0 ) + 0.5;\n if ( face > 2.0 ) {\n uv.y += faceSize;\n face -= 3.0;\n }\n uv.x += face * faceSize;\n uv.x += filterInt * 3.0 * cubeUV_minTileSize;\n uv.y += 4.0 * ( exp2( CUBEUV_MAX_MIP ) - faceSize );\n uv.x *= CUBEUV_TEXEL_WIDTH;\n uv.y *= CUBEUV_TEXEL_HEIGHT;\n #ifdef texture2DGradEXT\n return texture2DGradEXT( envMap, uv, vec2( 0.0 ), vec2( 0.0 ) ).rgb;\n #else\n return texture2D( envMap, uv ).rgb;\n #endif\n }\n #define r0 1.0\n #define v0 0.339\n #define m0 - 2.0\n #define r1 0.8\n #define v1 0.276\n #define m1 - 1.0\n #define r4 0.4\n #define v4 0.046\n #define m4 2.0\n #define r5 0.305\n #define v5 0.016\n #define m5 3.0\n #define r6 0.21\n #define v6 0.0038\n #define m6 4.0\n float roughnessToMip( float roughness ) {\n float mip = 0.0;\n if ( roughness >= r1 ) {\n mip = ( r0 - roughness ) * ( m1 - m0 ) / ( r0 - r1 ) + m0;\n } else if ( roughness >= r4 ) {\n mip = ( r1 - roughness ) * ( m4 - m1 ) / ( r1 - r4 ) + m1;\n } else if ( roughness >= r5 ) {\n mip = ( r4 - roughness ) * ( m5 - m4 ) / ( r4 - r5 ) + m4;\n } else if ( roughness >= r6 ) {\n mip = ( r5 - roughness ) * ( m6 - m5 ) / ( r5 - r6 ) + m5;\n } else {\n mip = - 2.0 * log2( 1.16 * roughness ); }\n return mip;\n }\n vec4 textureCubeUV( sampler2D envMap, vec3 sampleDir, float roughness ) {\n float mip = clamp( roughnessToMip( roughness ), m0, CUBEUV_MAX_MIP );\n float mipF = fract( mip );\n float mipInt = floor( mip );\n vec3 color0 = bilinearCubeUV( envMap, sampleDir, mipInt );\n if ( mipF == 0.0 ) {\n return vec4( color0, 1.0 );\n } else {\n vec3 color1 = bilinearCubeUV( envMap, sampleDir, mipInt + 1.0 );\n return vec4( mix( color0, color1, mipF ), 1.0 );\n }\n }\n#endif"; -var defaultnormal_vertex = "vec3 transformedNormal = objectNormal;\n#ifdef USE_INSTANCING\n mat3 m = mat3( instanceMatrix );\n transformedNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) );\n transformedNormal = m * transformedNormal;\n#endif\ntransformedNormal = normalMatrix * transformedNormal;\n#ifdef FLIP_SIDED\n transformedNormal = - transformedNormal;\n#endif\n#ifdef USE_TANGENT\n vec3 transformedTangent = ( modelViewMatrix * vec4( objectTangent, 0.0 ) ).xyz;\n #ifdef FLIP_SIDED\n transformedTangent = - transformedTangent;\n #endif\n#endif"; -var displacementmap_pars_vertex = "#ifdef USE_DISPLACEMENTMAP\n uniform sampler2D displacementMap;\n uniform float displacementScale;\n uniform float displacementBias;\n#endif"; -var displacementmap_vertex = "#ifdef USE_DISPLACEMENTMAP\n transformed += normalize( objectNormal ) * ( texture2D( displacementMap, vUv ).x * displacementScale + displacementBias );\n#endif"; -var emissivemap_fragment = "#ifdef USE_EMISSIVEMAP\n vec4 emissiveColor = texture2D( emissiveMap, vUv );\n totalEmissiveRadiance *= emissiveColor.rgb;\n#endif"; -var emissivemap_pars_fragment = "#ifdef USE_EMISSIVEMAP\n uniform sampler2D emissiveMap;\n#endif"; -var encodings_fragment = "gl_FragColor = linearToOutputTexel( gl_FragColor );"; -var encodings_pars_fragment = "vec4 LinearToLinear( in vec4 value ) {\n return value;\n}\nvec4 LinearTosRGB( in vec4 value ) {\n return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );\n}"; -var envmap_fragment = "#ifdef USE_ENVMAP\n #ifdef ENV_WORLDPOS\n vec3 cameraToFrag;\n if ( isOrthographic ) {\n cameraToFrag = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) );\n } else {\n cameraToFrag = normalize( vWorldPosition - cameraPosition );\n }\n vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );\n #ifdef ENVMAP_MODE_REFLECTION\n vec3 reflectVec = reflect( cameraToFrag, worldNormal );\n #else\n vec3 reflectVec = refract( cameraToFrag, worldNormal, refractionRatio );\n #endif\n #else\n vec3 reflectVec = vReflect;\n #endif\n #ifdef ENVMAP_TYPE_CUBE\n vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );\n #elif defined( ENVMAP_TYPE_CUBE_UV )\n vec4 envColor = textureCubeUV( envMap, reflectVec, 0.0 );\n #else\n vec4 envColor = vec4( 0.0 );\n #endif\n #ifdef ENVMAP_BLENDING_MULTIPLY\n outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity );\n #elif defined( ENVMAP_BLENDING_MIX )\n outgoingLight = mix( outgoingLight, envColor.xyz, specularStrength * reflectivity );\n #elif defined( ENVMAP_BLENDING_ADD )\n outgoingLight += envColor.xyz * specularStrength * reflectivity;\n #endif\n#endif"; -var envmap_common_pars_fragment = "#ifdef USE_ENVMAP\n uniform float envMapIntensity;\n uniform float flipEnvMap;\n #ifdef ENVMAP_TYPE_CUBE\n uniform samplerCube envMap;\n #else\n uniform sampler2D envMap;\n #endif\n \n#endif"; -var envmap_pars_fragment = "#ifdef USE_ENVMAP\n uniform float reflectivity;\n #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG )\n #define ENV_WORLDPOS\n #endif\n #ifdef ENV_WORLDPOS\n varying vec3 vWorldPosition;\n uniform float refractionRatio;\n #else\n varying vec3 vReflect;\n #endif\n#endif"; -var envmap_pars_vertex = "#ifdef USE_ENVMAP\n #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) ||defined( PHONG )\n #define ENV_WORLDPOS\n #endif\n #ifdef ENV_WORLDPOS\n \n varying vec3 vWorldPosition;\n #else\n varying vec3 vReflect;\n uniform float refractionRatio;\n #endif\n#endif"; -var envmap_vertex = "#ifdef USE_ENVMAP\n #ifdef ENV_WORLDPOS\n vWorldPosition = worldPosition.xyz;\n #else\n vec3 cameraToVertex;\n if ( isOrthographic ) {\n cameraToVertex = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) );\n } else {\n cameraToVertex = normalize( worldPosition.xyz - cameraPosition );\n }\n vec3 worldNormal = inverseTransformDirection( transformedNormal, viewMatrix );\n #ifdef ENVMAP_MODE_REFLECTION\n vReflect = reflect( cameraToVertex, worldNormal );\n #else\n vReflect = refract( cameraToVertex, worldNormal, refractionRatio );\n #endif\n #endif\n#endif"; -var fog_vertex = "#ifdef USE_FOG\n vFogDepth = - mvPosition.z;\n#endif"; -var fog_pars_vertex = "#ifdef USE_FOG\n varying float vFogDepth;\n#endif"; -var fog_fragment = "#ifdef USE_FOG\n #ifdef FOG_EXP2\n float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth );\n #else\n float fogFactor = smoothstep( fogNear, fogFar, vFogDepth );\n #endif\n gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );\n#endif"; -var fog_pars_fragment = "#ifdef USE_FOG\n uniform vec3 fogColor;\n varying float vFogDepth;\n #ifdef FOG_EXP2\n uniform float fogDensity;\n #else\n uniform float fogNear;\n uniform float fogFar;\n #endif\n#endif"; -var gradientmap_pars_fragment = "#ifdef USE_GRADIENTMAP\n uniform sampler2D gradientMap;\n#endif\nvec3 getGradientIrradiance( vec3 normal, vec3 lightDirection ) {\n float dotNL = dot( normal, lightDirection );\n vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 );\n #ifdef USE_GRADIENTMAP\n return vec3( texture2D( gradientMap, coord ).r );\n #else\n return ( coord.x < 0.7 ) ? vec3( 0.7 ) : vec3( 1.0 );\n #endif\n}"; -var lightmap_fragment = "#ifdef USE_LIGHTMAP\n vec4 lightMapTexel = texture2D( lightMap, vUv2 );\n vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity;\n reflectedLight.indirectDiffuse += lightMapIrradiance;\n#endif"; -var lightmap_pars_fragment = "#ifdef USE_LIGHTMAP\n uniform sampler2D lightMap;\n uniform float lightMapIntensity;\n#endif"; -var lights_lambert_vertex = "vec3 diffuse = vec3( 1.0 );\nGeometricContext geometry;\ngeometry.position = mvPosition.xyz;\ngeometry.normal = normalize( transformedNormal );\ngeometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( -mvPosition.xyz );\nGeometricContext backGeometry;\nbackGeometry.position = geometry.position;\nbackGeometry.normal = -geometry.normal;\nbackGeometry.viewDir = geometry.viewDir;\nvLightFront = vec3( 0.0 );\nvIndirectFront = vec3( 0.0 );\n#ifdef DOUBLE_SIDED\n vLightBack = vec3( 0.0 );\n vIndirectBack = vec3( 0.0 );\n#endif\nIncidentLight directLight;\nfloat dotNL;\nvec3 directLightColor_Diffuse;\nvIndirectFront += getAmbientLightIrradiance( ambientLightColor );\nvIndirectFront += getLightProbeIrradiance( lightProbe, geometry.normal );\n#ifdef DOUBLE_SIDED\n vIndirectBack += getAmbientLightIrradiance( ambientLightColor );\n vIndirectBack += getLightProbeIrradiance( lightProbe, backGeometry.normal );\n#endif\n#if NUM_POINT_LIGHTS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {\n getPointLightInfo( pointLights[ i ], geometry, directLight );\n dotNL = dot( geometry.normal, directLight.direction );\n directLightColor_Diffuse = directLight.color;\n vLightFront += saturate( dotNL ) * directLightColor_Diffuse;\n #ifdef DOUBLE_SIDED\n vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;\n #endif\n }\n #pragma unroll_loop_end\n#endif\n#if NUM_SPOT_LIGHTS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {\n getSpotLightInfo( spotLights[ i ], geometry, directLight );\n dotNL = dot( geometry.normal, directLight.direction );\n directLightColor_Diffuse = directLight.color;\n vLightFront += saturate( dotNL ) * directLightColor_Diffuse;\n #ifdef DOUBLE_SIDED\n vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;\n #endif\n }\n #pragma unroll_loop_end\n#endif\n#if NUM_DIR_LIGHTS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {\n getDirectionalLightInfo( directionalLights[ i ], geometry, directLight );\n dotNL = dot( geometry.normal, directLight.direction );\n directLightColor_Diffuse = directLight.color;\n vLightFront += saturate( dotNL ) * directLightColor_Diffuse;\n #ifdef DOUBLE_SIDED\n vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;\n #endif\n }\n #pragma unroll_loop_end\n#endif\n#if NUM_HEMI_LIGHTS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {\n vIndirectFront += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal );\n #ifdef DOUBLE_SIDED\n vIndirectBack += getHemisphereLightIrradiance( hemisphereLights[ i ], backGeometry.normal );\n #endif\n }\n #pragma unroll_loop_end\n#endif"; -var lights_pars_begin = "uniform bool receiveShadow;\nuniform vec3 ambientLightColor;\nuniform vec3 lightProbe[ 9 ];\nvec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {\n float x = normal.x, y = normal.y, z = normal.z;\n vec3 result = shCoefficients[ 0 ] * 0.886227;\n result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;\n result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;\n result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;\n result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;\n result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;\n result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );\n result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;\n result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );\n return result;\n}\nvec3 getLightProbeIrradiance( const in vec3 lightProbe[ 9 ], const in vec3 normal ) {\n vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );\n vec3 irradiance = shGetIrradianceAt( worldNormal, lightProbe );\n return irradiance;\n}\nvec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) {\n vec3 irradiance = ambientLightColor;\n return irradiance;\n}\nfloat getDistanceAttenuation( const in float lightDistance, const in float cutoffDistance, const in float decayExponent ) {\n #if defined ( PHYSICALLY_CORRECT_LIGHTS )\n float distanceFalloff = 1.0 / max( pow( lightDistance, decayExponent ), 0.01 );\n if ( cutoffDistance > 0.0 ) {\n distanceFalloff *= pow2( saturate( 1.0 - pow4( lightDistance / cutoffDistance ) ) );\n }\n return distanceFalloff;\n #else\n if ( cutoffDistance > 0.0 && decayExponent > 0.0 ) {\n return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent );\n }\n return 1.0;\n #endif\n}\nfloat getSpotAttenuation( const in float coneCosine, const in float penumbraCosine, const in float angleCosine ) {\n return smoothstep( coneCosine, penumbraCosine, angleCosine );\n}\n#if NUM_DIR_LIGHTS > 0\n struct DirectionalLight {\n vec3 direction;\n vec3 color;\n };\n uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];\n void getDirectionalLightInfo( const in DirectionalLight directionalLight, const in GeometricContext geometry, out IncidentLight light ) {\n light.color = directionalLight.color;\n light.direction = directionalLight.direction;\n light.visible = true;\n }\n#endif\n#if NUM_POINT_LIGHTS > 0\n struct PointLight {\n vec3 position;\n vec3 color;\n float distance;\n float decay;\n };\n uniform PointLight pointLights[ NUM_POINT_LIGHTS ];\n void getPointLightInfo( const in PointLight pointLight, const in GeometricContext geometry, out IncidentLight light ) {\n vec3 lVector = pointLight.position - geometry.position;\n light.direction = normalize( lVector );\n float lightDistance = length( lVector );\n light.color = pointLight.color;\n light.color *= getDistanceAttenuation( lightDistance, pointLight.distance, pointLight.decay );\n light.visible = ( light.color != vec3( 0.0 ) );\n }\n#endif\n#if NUM_SPOT_LIGHTS > 0\n struct SpotLight {\n vec3 position;\n vec3 direction;\n vec3 color;\n float distance;\n float decay;\n float coneCos;\n float penumbraCos;\n };\n uniform SpotLight spotLights[ NUM_SPOT_LIGHTS ];\n void getSpotLightInfo( const in SpotLight spotLight, const in GeometricContext geometry, out IncidentLight light ) {\n vec3 lVector = spotLight.position - geometry.position;\n light.direction = normalize( lVector );\n float angleCos = dot( light.direction, spotLight.direction );\n float spotAttenuation = getSpotAttenuation( spotLight.coneCos, spotLight.penumbraCos, angleCos );\n if ( spotAttenuation > 0.0 ) {\n float lightDistance = length( lVector );\n light.color = spotLight.color * spotAttenuation;\n light.color *= getDistanceAttenuation( lightDistance, spotLight.distance, spotLight.decay );\n light.visible = ( light.color != vec3( 0.0 ) );\n } else {\n light.color = vec3( 0.0 );\n light.visible = false;\n }\n }\n#endif\n#if NUM_RECT_AREA_LIGHTS > 0\n struct RectAreaLight {\n vec3 color;\n vec3 position;\n vec3 halfWidth;\n vec3 halfHeight;\n };\n uniform sampler2D ltc_1; uniform sampler2D ltc_2;\n uniform RectAreaLight rectAreaLights[ NUM_RECT_AREA_LIGHTS ];\n#endif\n#if NUM_HEMI_LIGHTS > 0\n struct HemisphereLight {\n vec3 direction;\n vec3 skyColor;\n vec3 groundColor;\n };\n uniform HemisphereLight hemisphereLights[ NUM_HEMI_LIGHTS ];\n vec3 getHemisphereLightIrradiance( const in HemisphereLight hemiLight, const in vec3 normal ) {\n float dotNL = dot( normal, hemiLight.direction );\n float hemiDiffuseWeight = 0.5 * dotNL + 0.5;\n vec3 irradiance = mix( hemiLight.groundColor, hemiLight.skyColor, hemiDiffuseWeight );\n return irradiance;\n }\n#endif"; -var envmap_physical_pars_fragment = "#if defined( USE_ENVMAP )\n vec3 getIBLIrradiance( const in vec3 normal ) {\n #if defined( ENVMAP_TYPE_CUBE_UV )\n vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );\n vec4 envMapColor = textureCubeUV( envMap, worldNormal, 1.0 );\n return PI * envMapColor.rgb * envMapIntensity;\n #else\n return vec3( 0.0 );\n #endif\n }\n vec3 getIBLRadiance( const in vec3 viewDir, const in vec3 normal, const in float roughness ) {\n #if defined( ENVMAP_TYPE_CUBE_UV )\n vec3 reflectVec = reflect( - viewDir, normal );\n reflectVec = normalize( mix( reflectVec, normal, roughness * roughness) );\n reflectVec = inverseTransformDirection( reflectVec, viewMatrix );\n vec4 envMapColor = textureCubeUV( envMap, reflectVec, roughness );\n return envMapColor.rgb * envMapIntensity;\n #else\n return vec3( 0.0 );\n #endif\n }\n#endif"; -var lights_toon_fragment = "ToonMaterial material;\nmaterial.diffuseColor = diffuseColor.rgb;"; -var lights_toon_pars_fragment = "varying vec3 vViewPosition;\nstruct ToonMaterial {\n vec3 diffuseColor;\n};\nvoid RE_Direct_Toon( const in IncidentLight directLight, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) {\n vec3 irradiance = getGradientIrradiance( geometry.normal, directLight.direction ) * directLight.color;\n reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n}\nvoid RE_IndirectDiffuse_Toon( const in vec3 irradiance, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) {\n reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n}\n#define RE_Direct RE_Direct_Toon\n#define RE_IndirectDiffuse RE_IndirectDiffuse_Toon\n#define Material_LightProbeLOD( material ) (0)"; -var lights_phong_fragment = "BlinnPhongMaterial material;\nmaterial.diffuseColor = diffuseColor.rgb;\nmaterial.specularColor = specular;\nmaterial.specularShininess = shininess;\nmaterial.specularStrength = specularStrength;"; -var lights_phong_pars_fragment = "varying vec3 vViewPosition;\nstruct BlinnPhongMaterial {\n vec3 diffuseColor;\n vec3 specularColor;\n float specularShininess;\n float specularStrength;\n};\nvoid RE_Direct_BlinnPhong( const in IncidentLight directLight, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) {\n float dotNL = saturate( dot( geometry.normal, directLight.direction ) );\n vec3 irradiance = dotNL * directLight.color;\n reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n reflectedLight.directSpecular += irradiance * BRDF_BlinnPhong( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularShininess ) * material.specularStrength;\n}\nvoid RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) {\n reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n}\n#define RE_Direct RE_Direct_BlinnPhong\n#define RE_IndirectDiffuse RE_IndirectDiffuse_BlinnPhong\n#define Material_LightProbeLOD( material ) (0)"; -var lights_physical_fragment = "PhysicalMaterial material;\nmaterial.diffuseColor = diffuseColor.rgb * ( 1.0 - metalnessFactor );\nvec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );\nfloat geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );\nmaterial.roughness = max( roughnessFactor, 0.0525 );material.roughness += geometryRoughness;\nmaterial.roughness = min( material.roughness, 1.0 );\n#ifdef IOR\n #ifdef SPECULAR\n float specularIntensityFactor = specularIntensity;\n vec3 specularColorFactor = specularColor;\n #ifdef USE_SPECULARINTENSITYMAP\n specularIntensityFactor *= texture2D( specularIntensityMap, vUv ).a;\n #endif\n #ifdef USE_SPECULARCOLORMAP\n specularColorFactor *= texture2D( specularColorMap, vUv ).rgb;\n #endif\n material.specularF90 = mix( specularIntensityFactor, 1.0, metalnessFactor );\n #else\n float specularIntensityFactor = 1.0;\n vec3 specularColorFactor = vec3( 1.0 );\n material.specularF90 = 1.0;\n #endif\n material.specularColor = mix( min( pow2( ( ior - 1.0 ) / ( ior + 1.0 ) ) * specularColorFactor, vec3( 1.0 ) ) * specularIntensityFactor, diffuseColor.rgb, metalnessFactor );\n#else\n material.specularColor = mix( vec3( 0.04 ), diffuseColor.rgb, metalnessFactor );\n material.specularF90 = 1.0;\n#endif\n#ifdef USE_CLEARCOAT\n material.clearcoat = clearcoat;\n material.clearcoatRoughness = clearcoatRoughness;\n material.clearcoatF0 = vec3( 0.04 );\n material.clearcoatF90 = 1.0;\n #ifdef USE_CLEARCOATMAP\n material.clearcoat *= texture2D( clearcoatMap, vUv ).x;\n #endif\n #ifdef USE_CLEARCOAT_ROUGHNESSMAP\n material.clearcoatRoughness *= texture2D( clearcoatRoughnessMap, vUv ).y;\n #endif\n material.clearcoat = saturate( material.clearcoat ); material.clearcoatRoughness = max( material.clearcoatRoughness, 0.0525 );\n material.clearcoatRoughness += geometryRoughness;\n material.clearcoatRoughness = min( material.clearcoatRoughness, 1.0 );\n#endif\n#ifdef USE_SHEEN\n material.sheenColor = sheenColor;\n #ifdef USE_SHEENCOLORMAP\n material.sheenColor *= texture2D( sheenColorMap, vUv ).rgb;\n #endif\n material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 );\n #ifdef USE_SHEENROUGHNESSMAP\n material.sheenRoughness *= texture2D( sheenRoughnessMap, vUv ).a;\n #endif\n#endif"; -var lights_physical_pars_fragment = "struct PhysicalMaterial {\n vec3 diffuseColor;\n float roughness;\n vec3 specularColor;\n float specularF90;\n #ifdef USE_CLEARCOAT\n float clearcoat;\n float clearcoatRoughness;\n vec3 clearcoatF0;\n float clearcoatF90;\n #endif\n #ifdef USE_SHEEN\n vec3 sheenColor;\n float sheenRoughness;\n #endif\n};\nvec3 clearcoatSpecular = vec3( 0.0 );\nvec3 sheenSpecular = vec3( 0.0 );\nfloat IBLSheenBRDF( const in vec3 normal, const in vec3 viewDir, const in float roughness) {\n float dotNV = saturate( dot( normal, viewDir ) );\n float r2 = roughness * roughness;\n float a = roughness < 0.25 ? -339.2 * r2 + 161.4 * roughness - 25.9 : -8.48 * r2 + 14.3 * roughness - 9.95;\n float b = roughness < 0.25 ? 44.0 * r2 - 23.7 * roughness + 3.26 : 1.97 * r2 - 3.27 * roughness + 0.72;\n float DG = exp( a * dotNV + b ) + ( roughness < 0.25 ? 0.0 : 0.1 * ( roughness - 0.25 ) );\n return saturate( DG * RECIPROCAL_PI );\n}\nvec2 DFGApprox( const in vec3 normal, const in vec3 viewDir, const in float roughness ) {\n float dotNV = saturate( dot( normal, viewDir ) );\n const vec4 c0 = vec4( - 1, - 0.0275, - 0.572, 0.022 );\n const vec4 c1 = vec4( 1, 0.0425, 1.04, - 0.04 );\n vec4 r = roughness * c0 + c1;\n float a004 = min( r.x * r.x, exp2( - 9.28 * dotNV ) ) * r.x + r.y;\n vec2 fab = vec2( - 1.04, 1.04 ) * a004 + r.zw;\n return fab;\n}\nvec3 EnvironmentBRDF( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness ) {\n vec2 fab = DFGApprox( normal, viewDir, roughness );\n return specularColor * fab.x + specularF90 * fab.y;\n}\nvoid computeMultiscattering( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness, inout vec3 singleScatter, inout vec3 multiScatter ) {\n vec2 fab = DFGApprox( normal, viewDir, roughness );\n vec3 FssEss = specularColor * fab.x + specularF90 * fab.y;\n float Ess = fab.x + fab.y;\n float Ems = 1.0 - Ess;\n vec3 Favg = specularColor + ( 1.0 - specularColor ) * 0.047619; vec3 Fms = FssEss * Favg / ( 1.0 - Ems * Favg );\n singleScatter += FssEss;\n multiScatter += Fms * Ems;\n}\n#if NUM_RECT_AREA_LIGHTS > 0\n void RE_Direct_RectArea_Physical( const in RectAreaLight rectAreaLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) {\n vec3 normal = geometry.normal;\n vec3 viewDir = geometry.viewDir;\n vec3 position = geometry.position;\n vec3 lightPos = rectAreaLight.position;\n vec3 halfWidth = rectAreaLight.halfWidth;\n vec3 halfHeight = rectAreaLight.halfHeight;\n vec3 lightColor = rectAreaLight.color;\n float roughness = material.roughness;\n vec3 rectCoords[ 4 ];\n rectCoords[ 0 ] = lightPos + halfWidth - halfHeight; rectCoords[ 1 ] = lightPos - halfWidth - halfHeight;\n rectCoords[ 2 ] = lightPos - halfWidth + halfHeight;\n rectCoords[ 3 ] = lightPos + halfWidth + halfHeight;\n vec2 uv = LTC_Uv( normal, viewDir, roughness );\n vec4 t1 = texture2D( ltc_1, uv );\n vec4 t2 = texture2D( ltc_2, uv );\n mat3 mInv = mat3(\n vec3( t1.x, 0, t1.y ),\n vec3( 0, 1, 0 ),\n vec3( t1.z, 0, t1.w )\n );\n vec3 fresnel = ( material.specularColor * t2.x + ( vec3( 1.0 ) - material.specularColor ) * t2.y );\n reflectedLight.directSpecular += lightColor * fresnel * LTC_Evaluate( normal, viewDir, position, mInv, rectCoords );\n reflectedLight.directDiffuse += lightColor * material.diffuseColor * LTC_Evaluate( normal, viewDir, position, mat3( 1.0 ), rectCoords );\n }\n#endif\nvoid RE_Direct_Physical( const in IncidentLight directLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) {\n float dotNL = saturate( dot( geometry.normal, directLight.direction ) );\n vec3 irradiance = dotNL * directLight.color;\n #ifdef USE_CLEARCOAT\n float dotNLcc = saturate( dot( geometry.clearcoatNormal, directLight.direction ) );\n vec3 ccIrradiance = dotNLcc * directLight.color;\n clearcoatSpecular += ccIrradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.clearcoatNormal, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness );\n #endif\n #ifdef USE_SHEEN\n sheenSpecular += irradiance * BRDF_Sheen( directLight.direction, geometry.viewDir, geometry.normal, material.sheenColor, material.sheenRoughness );\n #endif\n reflectedLight.directSpecular += irradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularF90, material.roughness );\n reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n}\nvoid RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) {\n reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );\n}\nvoid RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradiance, const in vec3 clearcoatRadiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) {\n #ifdef USE_CLEARCOAT\n clearcoatSpecular += clearcoatRadiance * EnvironmentBRDF( geometry.clearcoatNormal, geometry.viewDir, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness );\n #endif\n #ifdef USE_SHEEN\n sheenSpecular += irradiance * material.sheenColor * IBLSheenBRDF( geometry.normal, geometry.viewDir, material.sheenRoughness );\n #endif\n vec3 singleScattering = vec3( 0.0 );\n vec3 multiScattering = vec3( 0.0 );\n vec3 cosineWeightedIrradiance = irradiance * RECIPROCAL_PI;\n computeMultiscattering( geometry.normal, geometry.viewDir, material.specularColor, material.specularF90, material.roughness, singleScattering, multiScattering );\n vec3 diffuse = material.diffuseColor * ( 1.0 - ( singleScattering + multiScattering ) );\n reflectedLight.indirectSpecular += radiance * singleScattering;\n reflectedLight.indirectSpecular += multiScattering * cosineWeightedIrradiance;\n reflectedLight.indirectDiffuse += diffuse * cosineWeightedIrradiance;\n}\n#define RE_Direct RE_Direct_Physical\n#define RE_Direct_RectArea RE_Direct_RectArea_Physical\n#define RE_IndirectDiffuse RE_IndirectDiffuse_Physical\n#define RE_IndirectSpecular RE_IndirectSpecular_Physical\nfloat computeSpecularOcclusion( const in float dotNV, const in float ambientOcclusion, const in float roughness ) {\n return saturate( pow( dotNV + ambientOcclusion, exp2( - 16.0 * roughness - 1.0 ) ) - 1.0 + ambientOcclusion );\n}"; -var lights_fragment_begin = "\nGeometricContext geometry;\ngeometry.position = - vViewPosition;\ngeometry.normal = normal;\ngeometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition );\n#ifdef USE_CLEARCOAT\n geometry.clearcoatNormal = clearcoatNormal;\n#endif\nIncidentLight directLight;\n#if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct )\n PointLight pointLight;\n #if defined( USE_SHADOWMAP ) && NUM_POINT_LIGHT_SHADOWS > 0\n PointLightShadow pointLightShadow;\n #endif\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {\n pointLight = pointLights[ i ];\n getPointLightInfo( pointLight, geometry, directLight );\n #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_POINT_LIGHT_SHADOWS )\n pointLightShadow = pointLightShadows[ i ];\n directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getPointShadow( pointShadowMap[ i ], pointLightShadow.shadowMapSize, pointLightShadow.shadowBias, pointLightShadow.shadowRadius, vPointShadowCoord[ i ], pointLightShadow.shadowCameraNear, pointLightShadow.shadowCameraFar ) : 1.0;\n #endif\n RE_Direct( directLight, geometry, material, reflectedLight );\n }\n #pragma unroll_loop_end\n#endif\n#if ( NUM_SPOT_LIGHTS > 0 ) && defined( RE_Direct )\n SpotLight spotLight;\n #if defined( USE_SHADOWMAP ) && NUM_SPOT_LIGHT_SHADOWS > 0\n SpotLightShadow spotLightShadow;\n #endif\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {\n spotLight = spotLights[ i ];\n getSpotLightInfo( spotLight, geometry, directLight );\n #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS )\n spotLightShadow = spotLightShadows[ i ];\n directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( spotShadowMap[ i ], spotLightShadow.shadowMapSize, spotLightShadow.shadowBias, spotLightShadow.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0;\n #endif\n RE_Direct( directLight, geometry, material, reflectedLight );\n }\n #pragma unroll_loop_end\n#endif\n#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct )\n DirectionalLight directionalLight;\n #if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0\n DirectionalLightShadow directionalLightShadow;\n #endif\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {\n directionalLight = directionalLights[ i ];\n getDirectionalLightInfo( directionalLight, geometry, directLight );\n #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS )\n directionalLightShadow = directionalLightShadows[ i ];\n directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;\n #endif\n RE_Direct( directLight, geometry, material, reflectedLight );\n }\n #pragma unroll_loop_end\n#endif\n#if ( NUM_RECT_AREA_LIGHTS > 0 ) && defined( RE_Direct_RectArea )\n RectAreaLight rectAreaLight;\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_RECT_AREA_LIGHTS; i ++ ) {\n rectAreaLight = rectAreaLights[ i ];\n RE_Direct_RectArea( rectAreaLight, geometry, material, reflectedLight );\n }\n #pragma unroll_loop_end\n#endif\n#if defined( RE_IndirectDiffuse )\n vec3 iblIrradiance = vec3( 0.0 );\n vec3 irradiance = getAmbientLightIrradiance( ambientLightColor );\n irradiance += getLightProbeIrradiance( lightProbe, geometry.normal );\n #if ( NUM_HEMI_LIGHTS > 0 )\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {\n irradiance += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal );\n }\n #pragma unroll_loop_end\n #endif\n#endif\n#if defined( RE_IndirectSpecular )\n vec3 radiance = vec3( 0.0 );\n vec3 clearcoatRadiance = vec3( 0.0 );\n#endif"; -var lights_fragment_maps = "#if defined( RE_IndirectDiffuse )\n #ifdef USE_LIGHTMAP\n vec4 lightMapTexel = texture2D( lightMap, vUv2 );\n vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity;\n irradiance += lightMapIrradiance;\n #endif\n #if defined( USE_ENVMAP ) && defined( STANDARD ) && defined( ENVMAP_TYPE_CUBE_UV )\n iblIrradiance += getIBLIrradiance( geometry.normal );\n #endif\n#endif\n#if defined( USE_ENVMAP ) && defined( RE_IndirectSpecular )\n radiance += getIBLRadiance( geometry.viewDir, geometry.normal, material.roughness );\n #ifdef USE_CLEARCOAT\n clearcoatRadiance += getIBLRadiance( geometry.viewDir, geometry.clearcoatNormal, material.clearcoatRoughness );\n #endif\n#endif"; -var lights_fragment_end = "#if defined( RE_IndirectDiffuse )\n RE_IndirectDiffuse( irradiance, geometry, material, reflectedLight );\n#endif\n#if defined( RE_IndirectSpecular )\n RE_IndirectSpecular( radiance, iblIrradiance, clearcoatRadiance, geometry, material, reflectedLight );\n#endif"; -var logdepthbuf_fragment = "#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )\n gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;\n#endif"; -var logdepthbuf_pars_fragment = "#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT )\n uniform float logDepthBufFC;\n varying float vFragDepth;\n varying float vIsPerspective;\n#endif"; -var logdepthbuf_pars_vertex = "#ifdef USE_LOGDEPTHBUF\n #ifdef USE_LOGDEPTHBUF_EXT\n varying float vFragDepth;\n varying float vIsPerspective;\n #else\n uniform float logDepthBufFC;\n #endif\n#endif"; -var logdepthbuf_vertex = "#ifdef USE_LOGDEPTHBUF\n #ifdef USE_LOGDEPTHBUF_EXT\n vFragDepth = 1.0 + gl_Position.w;\n vIsPerspective = float( isPerspectiveMatrix( projectionMatrix ) );\n #else\n if ( isPerspectiveMatrix( projectionMatrix ) ) {\n gl_Position.z = log2( max( EPSILON, gl_Position.w + 1.0 ) ) * logDepthBufFC - 1.0;\n gl_Position.z *= gl_Position.w;\n }\n #endif\n#endif"; -var map_fragment = "#ifdef USE_MAP\n vec4 sampledDiffuseColor = texture2D( map, vUv );\n #ifdef DECODE_VIDEO_TEXTURE\n sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w );\n #endif\n diffuseColor *= sampledDiffuseColor;\n#endif"; -var map_pars_fragment = "#ifdef USE_MAP\n uniform sampler2D map;\n#endif"; -var map_particle_fragment = "#if defined( USE_MAP ) || defined( USE_ALPHAMAP )\n vec2 uv = ( uvTransform * vec3( gl_PointCoord.x, 1.0 - gl_PointCoord.y, 1 ) ).xy;\n#endif\n#ifdef USE_MAP\n diffuseColor *= texture2D( map, uv );\n#endif\n#ifdef USE_ALPHAMAP\n diffuseColor.a *= texture2D( alphaMap, uv ).g;\n#endif"; -var map_particle_pars_fragment = "#if defined( USE_MAP ) || defined( USE_ALPHAMAP )\n uniform mat3 uvTransform;\n#endif\n#ifdef USE_MAP\n uniform sampler2D map;\n#endif\n#ifdef USE_ALPHAMAP\n uniform sampler2D alphaMap;\n#endif"; -var metalnessmap_fragment = "float metalnessFactor = metalness;\n#ifdef USE_METALNESSMAP\n vec4 texelMetalness = texture2D( metalnessMap, vUv );\n metalnessFactor *= texelMetalness.b;\n#endif"; -var metalnessmap_pars_fragment = "#ifdef USE_METALNESSMAP\n uniform sampler2D metalnessMap;\n#endif"; -var morphcolor_vertex = "#if defined( USE_MORPHCOLORS ) && defined( MORPHTARGETS_TEXTURE )\n vColor *= morphTargetBaseInfluence;\n for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {\n #if defined( USE_COLOR_ALPHA )\n if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ) * morphTargetInfluences[ i ];\n #elif defined( USE_COLOR )\n if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ).rgb * morphTargetInfluences[ i ];\n #endif\n }\n#endif"; -var morphnormal_vertex = "#ifdef USE_MORPHNORMALS\n objectNormal *= morphTargetBaseInfluence;\n #ifdef MORPHTARGETS_TEXTURE\n for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {\n if ( morphTargetInfluences[ i ] != 0.0 ) objectNormal += getMorph( gl_VertexID, i, 1 ).xyz * morphTargetInfluences[ i ];\n }\n #else\n objectNormal += morphNormal0 * morphTargetInfluences[ 0 ];\n objectNormal += morphNormal1 * morphTargetInfluences[ 1 ];\n objectNormal += morphNormal2 * morphTargetInfluences[ 2 ];\n objectNormal += morphNormal3 * morphTargetInfluences[ 3 ];\n #endif\n#endif"; -var morphtarget_pars_vertex = "#ifdef USE_MORPHTARGETS\n uniform float morphTargetBaseInfluence;\n #ifdef MORPHTARGETS_TEXTURE\n uniform float morphTargetInfluences[ MORPHTARGETS_COUNT ];\n uniform sampler2DArray morphTargetsTexture;\n uniform ivec2 morphTargetsTextureSize;\n vec4 getMorph( const in int vertexIndex, const in int morphTargetIndex, const in int offset ) {\n int texelIndex = vertexIndex * MORPHTARGETS_TEXTURE_STRIDE + offset;\n int y = texelIndex / morphTargetsTextureSize.x;\n int x = texelIndex - y * morphTargetsTextureSize.x;\n ivec3 morphUV = ivec3( x, y, morphTargetIndex );\n return texelFetch( morphTargetsTexture, morphUV, 0 );\n }\n #else\n #ifndef USE_MORPHNORMALS\n uniform float morphTargetInfluences[ 8 ];\n #else\n uniform float morphTargetInfluences[ 4 ];\n #endif\n #endif\n#endif"; -var morphtarget_vertex = "#ifdef USE_MORPHTARGETS\n transformed *= morphTargetBaseInfluence;\n #ifdef MORPHTARGETS_TEXTURE\n for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) {\n if ( morphTargetInfluences[ i ] != 0.0 ) transformed += getMorph( gl_VertexID, i, 0 ).xyz * morphTargetInfluences[ i ];\n }\n #else\n transformed += morphTarget0 * morphTargetInfluences[ 0 ];\n transformed += morphTarget1 * morphTargetInfluences[ 1 ];\n transformed += morphTarget2 * morphTargetInfluences[ 2 ];\n transformed += morphTarget3 * morphTargetInfluences[ 3 ];\n #ifndef USE_MORPHNORMALS\n transformed += morphTarget4 * morphTargetInfluences[ 4 ];\n transformed += morphTarget5 * morphTargetInfluences[ 5 ];\n transformed += morphTarget6 * morphTargetInfluences[ 6 ];\n transformed += morphTarget7 * morphTargetInfluences[ 7 ];\n #endif\n #endif\n#endif"; -var normal_fragment_begin = "float faceDirection = gl_FrontFacing ? 1.0 : - 1.0;\n#ifdef FLAT_SHADED\n vec3 fdx = vec3( dFdx( vViewPosition.x ), dFdx( vViewPosition.y ), dFdx( vViewPosition.z ) );\n vec3 fdy = vec3( dFdy( vViewPosition.x ), dFdy( vViewPosition.y ), dFdy( vViewPosition.z ) );\n vec3 normal = normalize( cross( fdx, fdy ) );\n#else\n vec3 normal = normalize( vNormal );\n #ifdef DOUBLE_SIDED\n normal = normal * faceDirection;\n #endif\n #ifdef USE_TANGENT\n vec3 tangent = normalize( vTangent );\n vec3 bitangent = normalize( vBitangent );\n #ifdef DOUBLE_SIDED\n tangent = tangent * faceDirection;\n bitangent = bitangent * faceDirection;\n #endif\n #if defined( TANGENTSPACE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP )\n mat3 vTBN = mat3( tangent, bitangent, normal );\n #endif\n #endif\n#endif\nvec3 geometryNormal = normal;"; -var normal_fragment_maps = "#ifdef OBJECTSPACE_NORMALMAP\n normal = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;\n #ifdef FLIP_SIDED\n normal = - normal;\n #endif\n #ifdef DOUBLE_SIDED\n normal = normal * faceDirection;\n #endif\n normal = normalize( normalMatrix * normal );\n#elif defined( TANGENTSPACE_NORMALMAP )\n vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;\n mapN.xy *= normalScale;\n #ifdef USE_TANGENT\n normal = normalize( vTBN * mapN );\n #else\n normal = perturbNormal2Arb( - vViewPosition, normal, mapN, faceDirection );\n #endif\n#elif defined( USE_BUMPMAP )\n normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection );\n#endif"; -var normal_pars_fragment = "#ifndef FLAT_SHADED\n varying vec3 vNormal;\n #ifdef USE_TANGENT\n varying vec3 vTangent;\n varying vec3 vBitangent;\n #endif\n#endif"; -var normal_pars_vertex = "#ifndef FLAT_SHADED\n varying vec3 vNormal;\n #ifdef USE_TANGENT\n varying vec3 vTangent;\n varying vec3 vBitangent;\n #endif\n#endif"; -var normal_vertex = "#ifndef FLAT_SHADED\n vNormal = normalize( transformedNormal );\n #ifdef USE_TANGENT\n vTangent = normalize( transformedTangent );\n vBitangent = normalize( cross( vNormal, vTangent ) * tangent.w );\n #endif\n#endif"; -var normalmap_pars_fragment = "#ifdef USE_NORMALMAP\n uniform sampler2D normalMap;\n uniform vec2 normalScale;\n#endif\n#ifdef OBJECTSPACE_NORMALMAP\n uniform mat3 normalMatrix;\n#endif\n#if ! defined ( USE_TANGENT ) && ( defined ( TANGENTSPACE_NORMALMAP ) || defined ( USE_CLEARCOAT_NORMALMAP ) )\n vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec3 mapN, float faceDirection ) {\n vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );\n vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );\n vec2 st0 = dFdx( vUv.st );\n vec2 st1 = dFdy( vUv.st );\n vec3 N = surf_norm;\n vec3 q1perp = cross( q1, N );\n vec3 q0perp = cross( N, q0 );\n vec3 T = q1perp * st0.x + q0perp * st1.x;\n vec3 B = q1perp * st0.y + q0perp * st1.y;\n float det = max( dot( T, T ), dot( B, B ) );\n float scale = ( det == 0.0 ) ? 0.0 : faceDirection * inversesqrt( det );\n return normalize( T * ( mapN.x * scale ) + B * ( mapN.y * scale ) + N * mapN.z );\n }\n#endif"; -var clearcoat_normal_fragment_begin = "#ifdef USE_CLEARCOAT\n vec3 clearcoatNormal = geometryNormal;\n#endif"; -var clearcoat_normal_fragment_maps = "#ifdef USE_CLEARCOAT_NORMALMAP\n vec3 clearcoatMapN = texture2D( clearcoatNormalMap, vUv ).xyz * 2.0 - 1.0;\n clearcoatMapN.xy *= clearcoatNormalScale;\n #ifdef USE_TANGENT\n clearcoatNormal = normalize( vTBN * clearcoatMapN );\n #else\n clearcoatNormal = perturbNormal2Arb( - vViewPosition, clearcoatNormal, clearcoatMapN, faceDirection );\n #endif\n#endif"; -var clearcoat_pars_fragment = "#ifdef USE_CLEARCOATMAP\n uniform sampler2D clearcoatMap;\n#endif\n#ifdef USE_CLEARCOAT_ROUGHNESSMAP\n uniform sampler2D clearcoatRoughnessMap;\n#endif\n#ifdef USE_CLEARCOAT_NORMALMAP\n uniform sampler2D clearcoatNormalMap;\n uniform vec2 clearcoatNormalScale;\n#endif"; -var output_fragment = "#ifdef OPAQUE\ndiffuseColor.a = 1.0;\n#endif\n#ifdef USE_TRANSMISSION\ndiffuseColor.a *= transmissionAlpha + 0.1;\n#endif\ngl_FragColor = vec4( outgoingLight, diffuseColor.a );"; -var packing = "vec3 packNormalToRGB( const in vec3 normal ) {\n return normalize( normal ) * 0.5 + 0.5;\n}\nvec3 unpackRGBToNormal( const in vec3 rgb ) {\n return 2.0 * rgb.xyz - 1.0;\n}\nconst float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.;\nconst vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256., 256. );\nconst vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );\nconst float ShiftRight8 = 1. / 256.;\nvec4 packDepthToRGBA( const in float v ) {\n vec4 r = vec4( fract( v * PackFactors ), v );\n r.yzw -= r.xyz * ShiftRight8; return r * PackUpscale;\n}\nfloat unpackRGBAToDepth( const in vec4 v ) {\n return dot( v, UnpackFactors );\n}\nvec4 pack2HalfToRGBA( vec2 v ) {\n vec4 r = vec4( v.x, fract( v.x * 255.0 ), v.y, fract( v.y * 255.0 ) );\n return vec4( r.x - r.y / 255.0, r.y, r.z - r.w / 255.0, r.w );\n}\nvec2 unpackRGBATo2Half( vec4 v ) {\n return vec2( v.x + ( v.y / 255.0 ), v.z + ( v.w / 255.0 ) );\n}\nfloat viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {\n return ( viewZ + near ) / ( near - far );\n}\nfloat orthographicDepthToViewZ( const in float linearClipZ, const in float near, const in float far ) {\n return linearClipZ * ( near - far ) - near;\n}\nfloat viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) {\n return ( ( near + viewZ ) * far ) / ( ( far - near ) * viewZ );\n}\nfloat perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {\n return ( near * far ) / ( ( far - near ) * invClipZ - far );\n}"; -var premultiplied_alpha_fragment = "#ifdef PREMULTIPLIED_ALPHA\n gl_FragColor.rgb *= gl_FragColor.a;\n#endif"; -var project_vertex = "vec4 mvPosition = vec4( transformed, 1.0 );\n#ifdef USE_INSTANCING\n mvPosition = instanceMatrix * mvPosition;\n#endif\nmvPosition = modelViewMatrix * mvPosition;\ngl_Position = projectionMatrix * mvPosition;"; -var dithering_fragment = "#ifdef DITHERING\n gl_FragColor.rgb = dithering( gl_FragColor.rgb );\n#endif"; -var dithering_pars_fragment = "#ifdef DITHERING\n vec3 dithering( vec3 color ) {\n float grid_position = rand( gl_FragCoord.xy );\n vec3 dither_shift_RGB = vec3( 0.25 / 255.0, -0.25 / 255.0, 0.25 / 255.0 );\n dither_shift_RGB = mix( 2.0 * dither_shift_RGB, -2.0 * dither_shift_RGB, grid_position );\n return color + dither_shift_RGB;\n }\n#endif"; -var roughnessmap_fragment = "float roughnessFactor = roughness;\n#ifdef USE_ROUGHNESSMAP\n vec4 texelRoughness = texture2D( roughnessMap, vUv );\n roughnessFactor *= texelRoughness.g;\n#endif"; -var roughnessmap_pars_fragment = "#ifdef USE_ROUGHNESSMAP\n uniform sampler2D roughnessMap;\n#endif"; -var shadowmap_pars_fragment = "#ifdef USE_SHADOWMAP\n #if NUM_DIR_LIGHT_SHADOWS > 0\n uniform sampler2D directionalShadowMap[ NUM_DIR_LIGHT_SHADOWS ];\n varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ];\n struct DirectionalLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n };\n uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ];\n #endif\n #if NUM_SPOT_LIGHT_SHADOWS > 0\n uniform sampler2D spotShadowMap[ NUM_SPOT_LIGHT_SHADOWS ];\n varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ];\n struct SpotLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n };\n uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ];\n #endif\n #if NUM_POINT_LIGHT_SHADOWS > 0\n uniform sampler2D pointShadowMap[ NUM_POINT_LIGHT_SHADOWS ];\n varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ];\n struct PointLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n float shadowCameraNear;\n float shadowCameraFar;\n };\n uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ];\n #endif\n float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {\n return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );\n }\n vec2 texture2DDistribution( sampler2D shadow, vec2 uv ) {\n return unpackRGBATo2Half( texture2D( shadow, uv ) );\n }\n float VSMShadow (sampler2D shadow, vec2 uv, float compare ){\n float occlusion = 1.0;\n vec2 distribution = texture2DDistribution( shadow, uv );\n float hard_shadow = step( compare , distribution.x );\n if (hard_shadow != 1.0 ) {\n float distance = compare - distribution.x ;\n float variance = max( 0.00000, distribution.y * distribution.y );\n float softness_probability = variance / (variance + distance * distance ); softness_probability = clamp( ( softness_probability - 0.3 ) / ( 0.95 - 0.3 ), 0.0, 1.0 ); occlusion = clamp( max( hard_shadow, softness_probability ), 0.0, 1.0 );\n }\n return occlusion;\n }\n float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {\n float shadow = 1.0;\n shadowCoord.xyz /= shadowCoord.w;\n shadowCoord.z += shadowBias;\n bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );\n bool inFrustum = all( inFrustumVec );\n bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );\n bool frustumTest = all( frustumTestVec );\n if ( frustumTest ) {\n #if defined( SHADOWMAP_TYPE_PCF )\n vec2 texelSize = vec2( 1.0 ) / shadowMapSize;\n float dx0 = - texelSize.x * shadowRadius;\n float dy0 = - texelSize.y * shadowRadius;\n float dx1 = + texelSize.x * shadowRadius;\n float dy1 = + texelSize.y * shadowRadius;\n float dx2 = dx0 / 2.0;\n float dy2 = dy0 / 2.0;\n float dx3 = dx1 / 2.0;\n float dy3 = dy1 / 2.0;\n shadow = (\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy2 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy2 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy2 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, 0.0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, 0.0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy3 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy3 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy3 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )\n ) * ( 1.0 / 17.0 );\n #elif defined( SHADOWMAP_TYPE_PCF_SOFT )\n vec2 texelSize = vec2( 1.0 ) / shadowMapSize;\n float dx = texelSize.x;\n float dy = texelSize.y;\n vec2 uv = shadowCoord.xy;\n vec2 f = fract( uv * shadowMapSize + 0.5 );\n uv -= f * texelSize;\n shadow = (\n texture2DCompare( shadowMap, uv, shadowCoord.z ) +\n texture2DCompare( shadowMap, uv + vec2( dx, 0.0 ), shadowCoord.z ) +\n texture2DCompare( shadowMap, uv + vec2( 0.0, dy ), shadowCoord.z ) +\n texture2DCompare( shadowMap, uv + texelSize, shadowCoord.z ) +\n mix( texture2DCompare( shadowMap, uv + vec2( -dx, 0.0 ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 0.0 ), shadowCoord.z ),\n f.x ) +\n mix( texture2DCompare( shadowMap, uv + vec2( -dx, dy ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, dy ), shadowCoord.z ),\n f.x ) +\n mix( texture2DCompare( shadowMap, uv + vec2( 0.0, -dy ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( 0.0, 2.0 * dy ), shadowCoord.z ),\n f.y ) +\n mix( texture2DCompare( shadowMap, uv + vec2( dx, -dy ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( dx, 2.0 * dy ), shadowCoord.z ),\n f.y ) +\n mix( mix( texture2DCompare( shadowMap, uv + vec2( -dx, -dy ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, -dy ), shadowCoord.z ),\n f.x ),\n mix( texture2DCompare( shadowMap, uv + vec2( -dx, 2.0 * dy ), shadowCoord.z ), \n texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 2.0 * dy ), shadowCoord.z ),\n f.x ),\n f.y )\n ) * ( 1.0 / 9.0 );\n #elif defined( SHADOWMAP_TYPE_VSM )\n shadow = VSMShadow( shadowMap, shadowCoord.xy, shadowCoord.z );\n #else\n shadow = texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z );\n #endif\n }\n return shadow;\n }\n vec2 cubeToUV( vec3 v, float texelSizeY ) {\n vec3 absV = abs( v );\n float scaleToCube = 1.0 / max( absV.x, max( absV.y, absV.z ) );\n absV *= scaleToCube;\n v *= scaleToCube * ( 1.0 - 2.0 * texelSizeY );\n vec2 planar = v.xy;\n float almostATexel = 1.5 * texelSizeY;\n float almostOne = 1.0 - almostATexel;\n if ( absV.z >= almostOne ) {\n if ( v.z > 0.0 )\n planar.x = 4.0 - v.x;\n } else if ( absV.x >= almostOne ) {\n float signX = sign( v.x );\n planar.x = v.z * signX + 2.0 * signX;\n } else if ( absV.y >= almostOne ) {\n float signY = sign( v.y );\n planar.x = v.x + 2.0 * signY + 2.0;\n planar.y = v.z * signY - 2.0;\n }\n return vec2( 0.125, 0.25 ) * planar + vec2( 0.375, 0.75 );\n }\n float getPointShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord, float shadowCameraNear, float shadowCameraFar ) {\n vec2 texelSize = vec2( 1.0 ) / ( shadowMapSize * vec2( 4.0, 2.0 ) );\n vec3 lightToPosition = shadowCoord.xyz;\n float dp = ( length( lightToPosition ) - shadowCameraNear ) / ( shadowCameraFar - shadowCameraNear ); dp += shadowBias;\n vec3 bd3D = normalize( lightToPosition );\n #if defined( SHADOWMAP_TYPE_PCF ) || defined( SHADOWMAP_TYPE_PCF_SOFT ) || defined( SHADOWMAP_TYPE_VSM )\n vec2 offset = vec2( - 1, 1 ) * shadowRadius * texelSize.y;\n return (\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyy, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyy, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyx, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyx, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxy, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxy, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxx, texelSize.y ), dp ) +\n texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxx, texelSize.y ), dp )\n ) * ( 1.0 / 9.0 );\n #else\n return texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp );\n #endif\n }\n#endif"; -var shadowmap_pars_vertex = "#ifdef USE_SHADOWMAP\n #if NUM_DIR_LIGHT_SHADOWS > 0\n uniform mat4 directionalShadowMatrix[ NUM_DIR_LIGHT_SHADOWS ];\n varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ];\n struct DirectionalLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n };\n uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ];\n #endif\n #if NUM_SPOT_LIGHT_SHADOWS > 0\n uniform mat4 spotShadowMatrix[ NUM_SPOT_LIGHT_SHADOWS ];\n varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ];\n struct SpotLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n };\n uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ];\n #endif\n #if NUM_POINT_LIGHT_SHADOWS > 0\n uniform mat4 pointShadowMatrix[ NUM_POINT_LIGHT_SHADOWS ];\n varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ];\n struct PointLightShadow {\n float shadowBias;\n float shadowNormalBias;\n float shadowRadius;\n vec2 shadowMapSize;\n float shadowCameraNear;\n float shadowCameraFar;\n };\n uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ];\n #endif\n#endif"; -var shadowmap_vertex = "#ifdef USE_SHADOWMAP\n #if NUM_DIR_LIGHT_SHADOWS > 0 || NUM_SPOT_LIGHT_SHADOWS > 0 || NUM_POINT_LIGHT_SHADOWS > 0\n vec3 shadowWorldNormal = inverseTransformDirection( transformedNormal, viewMatrix );\n vec4 shadowWorldPosition;\n #endif\n #if NUM_DIR_LIGHT_SHADOWS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) {\n shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * directionalLightShadows[ i ].shadowNormalBias, 0 );\n vDirectionalShadowCoord[ i ] = directionalShadowMatrix[ i ] * shadowWorldPosition;\n }\n #pragma unroll_loop_end\n #endif\n #if NUM_SPOT_LIGHT_SHADOWS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) {\n shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * spotLightShadows[ i ].shadowNormalBias, 0 );\n vSpotShadowCoord[ i ] = spotShadowMatrix[ i ] * shadowWorldPosition;\n }\n #pragma unroll_loop_end\n #endif\n #if NUM_POINT_LIGHT_SHADOWS > 0\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) {\n shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * pointLightShadows[ i ].shadowNormalBias, 0 );\n vPointShadowCoord[ i ] = pointShadowMatrix[ i ] * shadowWorldPosition;\n }\n #pragma unroll_loop_end\n #endif\n#endif"; -var shadowmask_pars_fragment = "float getShadowMask() {\n float shadow = 1.0;\n #ifdef USE_SHADOWMAP\n #if NUM_DIR_LIGHT_SHADOWS > 0\n DirectionalLightShadow directionalLight;\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) {\n directionalLight = directionalLightShadows[ i ];\n shadow *= receiveShadow ? getShadow( directionalShadowMap[ i ], directionalLight.shadowMapSize, directionalLight.shadowBias, directionalLight.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0;\n }\n #pragma unroll_loop_end\n #endif\n #if NUM_SPOT_LIGHT_SHADOWS > 0\n SpotLightShadow spotLight;\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) {\n spotLight = spotLightShadows[ i ];\n shadow *= receiveShadow ? getShadow( spotShadowMap[ i ], spotLight.shadowMapSize, spotLight.shadowBias, spotLight.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0;\n }\n #pragma unroll_loop_end\n #endif\n #if NUM_POINT_LIGHT_SHADOWS > 0\n PointLightShadow pointLight;\n #pragma unroll_loop_start\n for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) {\n pointLight = pointLightShadows[ i ];\n shadow *= receiveShadow ? getPointShadow( pointShadowMap[ i ], pointLight.shadowMapSize, pointLight.shadowBias, pointLight.shadowRadius, vPointShadowCoord[ i ], pointLight.shadowCameraNear, pointLight.shadowCameraFar ) : 1.0;\n }\n #pragma unroll_loop_end\n #endif\n #endif\n return shadow;\n}"; -var skinbase_vertex = "#ifdef USE_SKINNING\n mat4 boneMatX = getBoneMatrix( skinIndex.x );\n mat4 boneMatY = getBoneMatrix( skinIndex.y );\n mat4 boneMatZ = getBoneMatrix( skinIndex.z );\n mat4 boneMatW = getBoneMatrix( skinIndex.w );\n#endif"; -var skinning_pars_vertex = "#ifdef USE_SKINNING\n uniform mat4 bindMatrix;\n uniform mat4 bindMatrixInverse;\n #ifdef BONE_TEXTURE\n uniform highp sampler2D boneTexture;\n uniform int boneTextureSize;\n mat4 getBoneMatrix( const in float i ) {\n float j = i * 4.0;\n float x = mod( j, float( boneTextureSize ) );\n float y = floor( j / float( boneTextureSize ) );\n float dx = 1.0 / float( boneTextureSize );\n float dy = 1.0 / float( boneTextureSize );\n y = dy * ( y + 0.5 );\n vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) );\n vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) );\n vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) );\n vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) );\n mat4 bone = mat4( v1, v2, v3, v4 );\n return bone;\n }\n #else\n uniform mat4 boneMatrices[ MAX_BONES ];\n mat4 getBoneMatrix( const in float i ) {\n mat4 bone = boneMatrices[ int(i) ];\n return bone;\n }\n #endif\n#endif"; -var skinning_vertex = "#ifdef USE_SKINNING\n vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 );\n vec4 skinned = vec4( 0.0 );\n skinned += boneMatX * skinVertex * skinWeight.x;\n skinned += boneMatY * skinVertex * skinWeight.y;\n skinned += boneMatZ * skinVertex * skinWeight.z;\n skinned += boneMatW * skinVertex * skinWeight.w;\n transformed = ( bindMatrixInverse * skinned ).xyz;\n#endif"; -var skinnormal_vertex = "#ifdef USE_SKINNING\n mat4 skinMatrix = mat4( 0.0 );\n skinMatrix += skinWeight.x * boneMatX;\n skinMatrix += skinWeight.y * boneMatY;\n skinMatrix += skinWeight.z * boneMatZ;\n skinMatrix += skinWeight.w * boneMatW;\n skinMatrix = bindMatrixInverse * skinMatrix * bindMatrix;\n objectNormal = vec4( skinMatrix * vec4( objectNormal, 0.0 ) ).xyz;\n #ifdef USE_TANGENT\n objectTangent = vec4( skinMatrix * vec4( objectTangent, 0.0 ) ).xyz;\n #endif\n#endif"; -var specularmap_fragment = "float specularStrength;\n#ifdef USE_SPECULARMAP\n vec4 texelSpecular = texture2D( specularMap, vUv );\n specularStrength = texelSpecular.r;\n#else\n specularStrength = 1.0;\n#endif"; -var specularmap_pars_fragment = "#ifdef USE_SPECULARMAP\n uniform sampler2D specularMap;\n#endif"; -var tonemapping_fragment = "#if defined( TONE_MAPPING )\n gl_FragColor.rgb = toneMapping( gl_FragColor.rgb );\n#endif"; -var tonemapping_pars_fragment = "#ifndef saturate\n#define saturate( a ) clamp( a, 0.0, 1.0 )\n#endif\nuniform float toneMappingExposure;\nvec3 LinearToneMapping( vec3 color ) {\n return toneMappingExposure * color;\n}\nvec3 ReinhardToneMapping( vec3 color ) {\n color *= toneMappingExposure;\n return saturate( color / ( vec3( 1.0 ) + color ) );\n}\nvec3 OptimizedCineonToneMapping( vec3 color ) {\n color *= toneMappingExposure;\n color = max( vec3( 0.0 ), color - 0.004 );\n return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) );\n}\nvec3 RRTAndODTFit( vec3 v ) {\n vec3 a = v * ( v + 0.0245786 ) - 0.000090537;\n vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081;\n return a / b;\n}\nvec3 ACESFilmicToneMapping( vec3 color ) {\n const mat3 ACESInputMat = mat3(\n vec3( 0.59719, 0.07600, 0.02840 ), vec3( 0.35458, 0.90834, 0.13383 ),\n vec3( 0.04823, 0.01566, 0.83777 )\n );\n const mat3 ACESOutputMat = mat3(\n vec3( 1.60475, -0.10208, -0.00327 ), vec3( -0.53108, 1.10813, -0.07276 ),\n vec3( -0.07367, -0.00605, 1.07602 )\n );\n color *= toneMappingExposure / 0.6;\n color = ACESInputMat * color;\n color = RRTAndODTFit( color );\n color = ACESOutputMat * color;\n return saturate( color );\n}\nvec3 CustomToneMapping( vec3 color ) { return color; }"; -var transmission_fragment = "#ifdef USE_TRANSMISSION\n float transmissionAlpha = 1.0;\n float transmissionFactor = transmission;\n float thicknessFactor = thickness;\n #ifdef USE_TRANSMISSIONMAP\n transmissionFactor *= texture2D( transmissionMap, vUv ).r;\n #endif\n #ifdef USE_THICKNESSMAP\n thicknessFactor *= texture2D( thicknessMap, vUv ).g;\n #endif\n vec3 pos = vWorldPosition;\n vec3 v = normalize( cameraPosition - pos );\n vec3 n = inverseTransformDirection( normal, viewMatrix );\n vec4 transmission = getIBLVolumeRefraction(\n n, v, roughnessFactor, material.diffuseColor, material.specularColor, material.specularF90,\n pos, modelMatrix, viewMatrix, projectionMatrix, ior, thicknessFactor,\n attenuationColor, attenuationDistance );\n totalDiffuse = mix( totalDiffuse, transmission.rgb, transmissionFactor );\n transmissionAlpha = mix( transmissionAlpha, transmission.a, transmissionFactor );\n#endif"; -var transmission_pars_fragment = "#ifdef USE_TRANSMISSION\n uniform float transmission;\n uniform float thickness;\n uniform float attenuationDistance;\n uniform vec3 attenuationColor;\n #ifdef USE_TRANSMISSIONMAP\n uniform sampler2D transmissionMap;\n #endif\n #ifdef USE_THICKNESSMAP\n uniform sampler2D thicknessMap;\n #endif\n uniform vec2 transmissionSamplerSize;\n uniform sampler2D transmissionSamplerMap;\n uniform mat4 modelMatrix;\n uniform mat4 projectionMatrix;\n varying vec3 vWorldPosition;\n vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {\n vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );\n vec3 modelScale;\n modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );\n modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );\n modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );\n return normalize( refractionVector ) * thickness * modelScale;\n }\n float applyIorToRoughness( const in float roughness, const in float ior ) {\n return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );\n }\n vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {\n float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );\n #ifdef texture2DLodEXT\n return texture2DLodEXT( transmissionSamplerMap, fragCoord.xy, framebufferLod );\n #else\n return texture2D( transmissionSamplerMap, fragCoord.xy, framebufferLod );\n #endif\n }\n vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {\n if ( attenuationDistance == 0.0 ) {\n return radiance;\n } else {\n vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;\n vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); return transmittance * radiance;\n }\n }\n vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,\n const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,\n const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,\n const in vec3 attenuationColor, const in float attenuationDistance ) {\n vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );\n vec3 refractedRayExit = position + transmissionRay;\n vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );\n vec2 refractionCoords = ndcPos.xy / ndcPos.w;\n refractionCoords += 1.0;\n refractionCoords /= 2.0;\n vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );\n vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );\n vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );\n return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );\n }\n#endif"; -var uv_pars_fragment = "#if ( defined( USE_UV ) && ! defined( UVS_VERTEX_ONLY ) )\n varying vec2 vUv;\n#endif"; -var uv_pars_vertex = "#ifdef USE_UV\n #ifdef UVS_VERTEX_ONLY\n vec2 vUv;\n #else\n varying vec2 vUv;\n #endif\n uniform mat3 uvTransform;\n#endif"; -var uv_vertex = "#ifdef USE_UV\n vUv = ( uvTransform * vec3( uv, 1 ) ).xy;\n#endif"; -var uv2_pars_fragment = "#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )\n varying vec2 vUv2;\n#endif"; -var uv2_pars_vertex = "#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )\n attribute vec2 uv2;\n varying vec2 vUv2;\n uniform mat3 uv2Transform;\n#endif"; -var uv2_vertex = "#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP )\n vUv2 = ( uv2Transform * vec3( uv2, 1 ) ).xy;\n#endif"; -var worldpos_vertex = "#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP ) || defined ( USE_TRANSMISSION )\n vec4 worldPosition = vec4( transformed, 1.0 );\n #ifdef USE_INSTANCING\n worldPosition = instanceMatrix * worldPosition;\n #endif\n worldPosition = modelMatrix * worldPosition;\n#endif"; -const vertex$g = "varying vec2 vUv;\nuniform mat3 uvTransform;\nvoid main() {\n vUv = ( uvTransform * vec3( uv, 1 ) ).xy;\n gl_Position = vec4( position.xy, 1.0, 1.0 );\n}"; -const fragment$g = "uniform sampler2D t2D;\nvarying vec2 vUv;\nvoid main() {\n gl_FragColor = texture2D( t2D, vUv );\n #ifdef DECODE_VIDEO_TEXTURE\n gl_FragColor = vec4( mix( pow( gl_FragColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), gl_FragColor.rgb * 0.0773993808, vec3( lessThanEqual( gl_FragColor.rgb, vec3( 0.04045 ) ) ) ), gl_FragColor.w );\n #endif\n #include \n #include \n}"; -const vertex$f = "varying vec3 vWorldDirection;\n#include \nvoid main() {\n vWorldDirection = transformDirection( position, modelMatrix );\n #include \n #include \n gl_Position.z = gl_Position.w;\n}"; -const fragment$f = "#include \nuniform float opacity;\nvarying vec3 vWorldDirection;\n#include \nvoid main() {\n vec3 vReflect = vWorldDirection;\n #include \n gl_FragColor = envColor;\n gl_FragColor.a *= opacity;\n #include \n #include \n}"; -const vertex$e = "#include \n#include \n#include \n#include \n#include \n#include \n#include \nvarying vec2 vHighPrecisionZW;\nvoid main() {\n #include \n #include \n #ifdef USE_DISPLACEMENTMAP\n #include \n #include \n #include \n #endif\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vHighPrecisionZW = gl_Position.zw;\n}"; -const fragment$e = "#if DEPTH_PACKING == 3200\n uniform float opacity;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvarying vec2 vHighPrecisionZW;\nvoid main() {\n #include \n vec4 diffuseColor = vec4( 1.0 );\n #if DEPTH_PACKING == 3200\n diffuseColor.a = opacity;\n #endif\n #include \n #include \n #include \n #include \n float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;\n #if DEPTH_PACKING == 3200\n gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );\n #elif DEPTH_PACKING == 3201\n gl_FragColor = packDepthToRGBA( fragCoordZ );\n #endif\n}"; -const vertex$d = "#define DISTANCE\nvarying vec3 vWorldPosition;\n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #ifdef USE_DISPLACEMENTMAP\n #include \n #include \n #include \n #endif\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vWorldPosition = worldPosition.xyz;\n}"; -const fragment$d = "#define DISTANCE\nuniform vec3 referencePosition;\nuniform float nearDistance;\nuniform float farDistance;\nvarying vec3 vWorldPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main () {\n #include \n vec4 diffuseColor = vec4( 1.0 );\n #include \n #include \n #include \n float dist = length( vWorldPosition - referencePosition );\n dist = ( dist - nearDistance ) / ( farDistance - nearDistance );\n dist = saturate( dist );\n gl_FragColor = packDepthToRGBA( dist );\n}"; -const vertex$c = "varying vec3 vWorldDirection;\n#include \nvoid main() {\n vWorldDirection = transformDirection( position, modelMatrix );\n #include \n #include \n}"; -const fragment$c = "uniform sampler2D tEquirect;\nvarying vec3 vWorldDirection;\n#include \nvoid main() {\n vec3 direction = normalize( vWorldDirection );\n vec2 sampleUV = equirectUv( direction );\n gl_FragColor = texture2D( tEquirect, sampleUV );\n #include \n #include \n}"; -const vertex$b = "uniform float scale;\nattribute float lineDistance;\nvarying float vLineDistance;\n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n vLineDistance = scale * lineDistance;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const fragment$b = "uniform vec3 diffuse;\nuniform float opacity;\nuniform float dashSize;\nuniform float totalSize;\nvarying float vLineDistance;\n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n if ( mod( vLineDistance, totalSize ) > dashSize ) {\n discard;\n }\n vec3 outgoingLight = vec3( 0.0 );\n vec4 diffuseColor = vec4( diffuse, opacity );\n #include \n #include \n outgoingLight = diffuseColor.rgb;\n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$a = "#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )\n #include \n #include \n #include \n #include \n #include \n #endif\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const fragment$a = "uniform vec3 diffuse;\nuniform float opacity;\n#ifndef FLAT_SHADED\n varying vec3 vNormal;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n #include \n #include \n #include \n #include \n #include \n #include \n ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );\n #ifdef USE_LIGHTMAP\n vec4 lightMapTexel = texture2D( lightMap, vUv2 );\n reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI;\n #else\n reflectedLight.indirectDiffuse += vec3( 1.0 );\n #endif\n #include \n reflectedLight.indirectDiffuse *= diffuseColor.rgb;\n vec3 outgoingLight = reflectedLight.indirectDiffuse;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$9 = "#define LAMBERT\nvarying vec3 vLightFront;\nvarying vec3 vIndirectFront;\n#ifdef DOUBLE_SIDED\n varying vec3 vLightBack;\n varying vec3 vIndirectBack;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const fragment$9 = "uniform vec3 diffuse;\nuniform vec3 emissive;\nuniform float opacity;\nvarying vec3 vLightFront;\nvarying vec3 vIndirectFront;\n#ifdef DOUBLE_SIDED\n varying vec3 vLightBack;\n varying vec3 vIndirectBack;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );\n vec3 totalEmissiveRadiance = emissive;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #ifdef DOUBLE_SIDED\n reflectedLight.indirectDiffuse += ( gl_FrontFacing ) ? vIndirectFront : vIndirectBack;\n #else\n reflectedLight.indirectDiffuse += vIndirectFront;\n #endif\n #include \n reflectedLight.indirectDiffuse *= BRDF_Lambert( diffuseColor.rgb );\n #ifdef DOUBLE_SIDED\n reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack;\n #else\n reflectedLight.directDiffuse = vLightFront;\n #endif\n reflectedLight.directDiffuse *= BRDF_Lambert( diffuseColor.rgb ) * getShadowMask();\n #include \n vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$8 = "#define MATCAP\nvarying vec3 vViewPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vViewPosition = - mvPosition.xyz;\n}"; -const fragment$8 = "#define MATCAP\nuniform vec3 diffuse;\nuniform float opacity;\nuniform sampler2D matcap;\nvarying vec3 vViewPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vec3 viewDir = normalize( vViewPosition );\n vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) );\n vec3 y = cross( viewDir, x );\n vec2 uv = vec2( dot( x, normal ), dot( y, normal ) ) * 0.495 + 0.5;\n #ifdef USE_MATCAP\n vec4 matcapColor = texture2D( matcap, uv );\n #else\n vec4 matcapColor = vec4( vec3( mix( 0.2, 0.8, uv.y ) ), 1.0 );\n #endif\n vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb;\n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$7 = "#define NORMAL\n#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP )\n varying vec3 vViewPosition;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP )\n vViewPosition = - mvPosition.xyz;\n#endif\n}"; -const fragment$7 = "#define NORMAL\nuniform float opacity;\n#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP )\n varying vec3 vViewPosition;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n gl_FragColor = vec4( packNormalToRGB( normal ), opacity );\n #ifdef OPAQUE\n gl_FragColor.a = 1.0;\n #endif\n}"; -const vertex$6 = "#define PHONG\nvarying vec3 vViewPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vViewPosition = - mvPosition.xyz;\n #include \n #include \n #include \n #include \n}"; -const fragment$6 = "#define PHONG\nuniform vec3 diffuse;\nuniform vec3 emissive;\nuniform vec3 specular;\nuniform float shininess;\nuniform float opacity;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );\n vec3 totalEmissiveRadiance = emissive;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$5 = "#define STANDARD\nvarying vec3 vViewPosition;\n#ifdef USE_TRANSMISSION\n varying vec3 vWorldPosition;\n#endif\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vViewPosition = - mvPosition.xyz;\n #include \n #include \n #include \n#ifdef USE_TRANSMISSION\n vWorldPosition = worldPosition.xyz;\n#endif\n}"; -const fragment$5 = "#define STANDARD\n#ifdef PHYSICAL\n #define IOR\n #define SPECULAR\n#endif\nuniform vec3 diffuse;\nuniform vec3 emissive;\nuniform float roughness;\nuniform float metalness;\nuniform float opacity;\n#ifdef IOR\n uniform float ior;\n#endif\n#ifdef SPECULAR\n uniform float specularIntensity;\n uniform vec3 specularColor;\n #ifdef USE_SPECULARINTENSITYMAP\n uniform sampler2D specularIntensityMap;\n #endif\n #ifdef USE_SPECULARCOLORMAP\n uniform sampler2D specularColorMap;\n #endif\n#endif\n#ifdef USE_CLEARCOAT\n uniform float clearcoat;\n uniform float clearcoatRoughness;\n#endif\n#ifdef USE_SHEEN\n uniform vec3 sheenColor;\n uniform float sheenRoughness;\n #ifdef USE_SHEENCOLORMAP\n uniform sampler2D sheenColorMap;\n #endif\n #ifdef USE_SHEENROUGHNESSMAP\n uniform sampler2D sheenRoughnessMap;\n #endif\n#endif\nvarying vec3 vViewPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );\n vec3 totalEmissiveRadiance = emissive;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vec3 totalDiffuse = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse;\n vec3 totalSpecular = reflectedLight.directSpecular + reflectedLight.indirectSpecular;\n #include \n vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;\n #ifdef USE_SHEEN\n float sheenEnergyComp = 1.0 - 0.157 * max3( material.sheenColor );\n outgoingLight = outgoingLight * sheenEnergyComp + sheenSpecular;\n #endif\n #ifdef USE_CLEARCOAT\n float dotNVcc = saturate( dot( geometry.clearcoatNormal, geometry.viewDir ) );\n vec3 Fcc = F_Schlick( material.clearcoatF0, material.clearcoatF90, dotNVcc );\n outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + clearcoatSpecular * material.clearcoat;\n #endif\n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$4 = "#define TOON\nvarying vec3 vViewPosition;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vViewPosition = - mvPosition.xyz;\n #include \n #include \n #include \n}"; -const fragment$4 = "#define TOON\nuniform vec3 diffuse;\nuniform vec3 emissive;\nuniform float opacity;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 diffuseColor = vec4( diffuse, opacity );\n ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );\n vec3 totalEmissiveRadiance = emissive;\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;\n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$3 = "uniform float size;\nuniform float scale;\n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n gl_PointSize = size;\n #ifdef USE_SIZEATTENUATION\n bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n if ( isPerspective ) gl_PointSize *= ( scale / - mvPosition.z );\n #endif\n #include \n #include \n #include \n #include \n}"; -const fragment$3 = "uniform vec3 diffuse;\nuniform float opacity;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec3 outgoingLight = vec3( 0.0 );\n vec4 diffuseColor = vec4( diffuse, opacity );\n #include \n #include \n #include \n #include \n outgoingLight = diffuseColor.rgb;\n #include \n #include \n #include \n #include \n #include \n}"; -const vertex$2 = "#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n #include \n}"; -const fragment$2 = "uniform vec3 color;\nuniform float opacity;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n gl_FragColor = vec4( color, opacity * ( 1.0 - getShadowMask() ) );\n #include \n #include \n #include \n}"; -const vertex$1 = "uniform float rotation;\nuniform vec2 center;\n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n vec2 scale;\n scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n #ifndef USE_SIZEATTENUATION\n bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n if ( isPerspective ) scale *= - mvPosition.z;\n #endif\n vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale;\n vec2 rotatedPosition;\n rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n mvPosition.xy += rotatedPosition;\n gl_Position = projectionMatrix * mvPosition;\n #include \n #include \n #include \n}"; -const fragment$1 = "uniform vec3 diffuse;\nuniform float opacity;\n#include \n#include \n#include \n#include \n#include \n#include \n#include \n#include \nvoid main() {\n #include \n vec3 outgoingLight = vec3( 0.0 );\n vec4 diffuseColor = vec4( diffuse, opacity );\n #include \n #include \n #include \n #include \n outgoingLight = diffuseColor.rgb;\n #include \n #include \n #include \n #include \n}"; -const ShaderChunk = { - alphamap_fragment, - alphamap_pars_fragment, - alphatest_fragment, - alphatest_pars_fragment, - aomap_fragment, - aomap_pars_fragment, - begin_vertex, - beginnormal_vertex, - bsdfs, - bumpmap_pars_fragment, - clipping_planes_fragment, - clipping_planes_pars_fragment, - clipping_planes_pars_vertex, - clipping_planes_vertex, - color_fragment, - color_pars_fragment, - color_pars_vertex, - color_vertex, - common, - cube_uv_reflection_fragment, - defaultnormal_vertex, - displacementmap_pars_vertex, - displacementmap_vertex, - emissivemap_fragment, - emissivemap_pars_fragment, - encodings_fragment, - encodings_pars_fragment, - envmap_fragment, - envmap_common_pars_fragment, - envmap_pars_fragment, - envmap_pars_vertex, - envmap_physical_pars_fragment, - envmap_vertex, - fog_vertex, - fog_pars_vertex, - fog_fragment, - fog_pars_fragment, - gradientmap_pars_fragment, - lightmap_fragment, - lightmap_pars_fragment, - lights_lambert_vertex, - lights_pars_begin, - lights_toon_fragment, - lights_toon_pars_fragment, - lights_phong_fragment, - lights_phong_pars_fragment, - lights_physical_fragment, - lights_physical_pars_fragment, - lights_fragment_begin, - lights_fragment_maps, - lights_fragment_end, - logdepthbuf_fragment, - logdepthbuf_pars_fragment, - logdepthbuf_pars_vertex, - logdepthbuf_vertex, - map_fragment, - map_pars_fragment, - map_particle_fragment, - map_particle_pars_fragment, - metalnessmap_fragment, - metalnessmap_pars_fragment, - morphcolor_vertex, - morphnormal_vertex, - morphtarget_pars_vertex, - morphtarget_vertex, - normal_fragment_begin, - normal_fragment_maps, - normal_pars_fragment, - normal_pars_vertex, - normal_vertex, - normalmap_pars_fragment, - clearcoat_normal_fragment_begin, - clearcoat_normal_fragment_maps, - clearcoat_pars_fragment, - output_fragment, - packing, - premultiplied_alpha_fragment, - project_vertex, - dithering_fragment, - dithering_pars_fragment, - roughnessmap_fragment, - roughnessmap_pars_fragment, - shadowmap_pars_fragment, - shadowmap_pars_vertex, - shadowmap_vertex, - shadowmask_pars_fragment, - skinbase_vertex, - skinning_pars_vertex, - skinning_vertex, - skinnormal_vertex, - specularmap_fragment, - specularmap_pars_fragment, - tonemapping_fragment, - tonemapping_pars_fragment, - transmission_fragment, - transmission_pars_fragment, - uv_pars_fragment, - uv_pars_vertex, - uv_vertex, - uv2_pars_fragment, - uv2_pars_vertex, - uv2_vertex, - worldpos_vertex, - background_vert: vertex$g, - background_frag: fragment$g, - cube_vert: vertex$f, - cube_frag: fragment$f, - depth_vert: vertex$e, - depth_frag: fragment$e, - distanceRGBA_vert: vertex$d, - distanceRGBA_frag: fragment$d, - equirect_vert: vertex$c, - equirect_frag: fragment$c, - linedashed_vert: vertex$b, - linedashed_frag: fragment$b, - meshbasic_vert: vertex$a, - meshbasic_frag: fragment$a, - meshlambert_vert: vertex$9, - meshlambert_frag: fragment$9, - meshmatcap_vert: vertex$8, - meshmatcap_frag: fragment$8, - meshnormal_vert: vertex$7, - meshnormal_frag: fragment$7, - meshphong_vert: vertex$6, - meshphong_frag: fragment$6, - meshphysical_vert: vertex$5, - meshphysical_frag: fragment$5, - meshtoon_vert: vertex$4, - meshtoon_frag: fragment$4, - points_vert: vertex$3, - points_frag: fragment$3, - shadow_vert: vertex$2, - shadow_frag: fragment$2, - sprite_vert: vertex$1, - sprite_frag: fragment$1 -}; -const UniformsLib = { - common: { - diffuse: { value: new Color(16777215) }, - opacity: { value: 1 }, - map: { value: null }, - uvTransform: { value: new Matrix3() }, - uv2Transform: { value: new Matrix3() }, - alphaMap: { value: null }, - alphaTest: { value: 0 } - }, - specularmap: { - specularMap: { value: null } - }, - envmap: { - envMap: { value: null }, - flipEnvMap: { value: -1 }, - reflectivity: { value: 1 }, - ior: { value: 1.5 }, - refractionRatio: { value: 0.98 } - }, - aomap: { - aoMap: { value: null }, - aoMapIntensity: { value: 1 } - }, - lightmap: { - lightMap: { value: null }, - lightMapIntensity: { value: 1 } - }, - emissivemap: { - emissiveMap: { value: null } - }, - bumpmap: { - bumpMap: { value: null }, - bumpScale: { value: 1 } - }, - normalmap: { - normalMap: { value: null }, - normalScale: { value: new Vector2(1, 1) } - }, - displacementmap: { - displacementMap: { value: null }, - displacementScale: { value: 1 }, - displacementBias: { value: 0 } - }, - roughnessmap: { - roughnessMap: { value: null } - }, - metalnessmap: { - metalnessMap: { value: null } - }, - gradientmap: { - gradientMap: { value: null } - }, - fog: { - fogDensity: { value: 25e-5 }, - fogNear: { value: 1 }, - fogFar: { value: 2e3 }, - fogColor: { value: new Color(16777215) } - }, - lights: { - ambientLightColor: { value: [] }, - lightProbe: { value: [] }, - directionalLights: { value: [], properties: { - direction: {}, - color: {} - } }, - directionalLightShadows: { value: [], properties: { - shadowBias: {}, - shadowNormalBias: {}, - shadowRadius: {}, - shadowMapSize: {} - } }, - directionalShadowMap: { value: [] }, - directionalShadowMatrix: { value: [] }, - spotLights: { value: [], properties: { - color: {}, - position: {}, - direction: {}, - distance: {}, - coneCos: {}, - penumbraCos: {}, - decay: {} - } }, - spotLightShadows: { value: [], properties: { - shadowBias: {}, - shadowNormalBias: {}, - shadowRadius: {}, - shadowMapSize: {} - } }, - spotShadowMap: { value: [] }, - spotShadowMatrix: { value: [] }, - pointLights: { value: [], properties: { - color: {}, - position: {}, - decay: {}, - distance: {} - } }, - pointLightShadows: { value: [], properties: { - shadowBias: {}, - shadowNormalBias: {}, - shadowRadius: {}, - shadowMapSize: {}, - shadowCameraNear: {}, - shadowCameraFar: {} - } }, - pointShadowMap: { value: [] }, - pointShadowMatrix: { value: [] }, - hemisphereLights: { value: [], properties: { - direction: {}, - skyColor: {}, - groundColor: {} - } }, - rectAreaLights: { value: [], properties: { - color: {}, - position: {}, - width: {}, - height: {} - } }, - ltc_1: { value: null }, - ltc_2: { value: null } - }, - points: { - diffuse: { value: new Color(16777215) }, - opacity: { value: 1 }, - size: { value: 1 }, - scale: { value: 1 }, - map: { value: null }, - alphaMap: { value: null }, - alphaTest: { value: 0 }, - uvTransform: { value: new Matrix3() } - }, - sprite: { - diffuse: { value: new Color(16777215) }, - opacity: { value: 1 }, - center: { value: new Vector2(0.5, 0.5) }, - rotation: { value: 0 }, - map: { value: null }, - alphaMap: { value: null }, - alphaTest: { value: 0 }, - uvTransform: { value: new Matrix3() } - } -}; -const ShaderLib = { - basic: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.specularmap, - UniformsLib.envmap, - UniformsLib.aomap, - UniformsLib.lightmap, - UniformsLib.fog - ]), - vertexShader: ShaderChunk.meshbasic_vert, - fragmentShader: ShaderChunk.meshbasic_frag - }, - lambert: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.specularmap, - UniformsLib.envmap, - UniformsLib.aomap, - UniformsLib.lightmap, - UniformsLib.emissivemap, - UniformsLib.fog, - UniformsLib.lights, - { - emissive: { value: new Color(0) } + moveRightVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx] = this.calculateRealDist(item, 1, distVector); + if (altKey) { + realDx = realDx * 2; } - ]), - vertexShader: ShaderChunk.meshlambert_vert, - fragmentShader: ShaderChunk.meshlambert_frag - }, - phong: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.specularmap, - UniformsLib.envmap, - UniformsLib.aomap, - UniformsLib.lightmap, - UniformsLib.emissivemap, - UniformsLib.bumpmap, - UniformsLib.normalmap, - UniformsLib.displacementmap, - UniformsLib.fog, - UniformsLib.lights, - { - emissive: { value: new Color(0) }, - specular: { value: new Color(1118481) }, - shininess: { value: 30 } + const newWidth = item.width + realDx; + let newHeight = item.height; + if (metaKey) { + newHeight = newWidth; + } else if (shiftKey) { + newHeight = item.height * (1 + realDx / item.width); } - ]), - vertexShader: ShaderChunk.meshphong_vert, - fragmentShader: ShaderChunk.meshphong_frag - }, - standard: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.envmap, - UniformsLib.aomap, - UniformsLib.lightmap, - UniformsLib.emissivemap, - UniformsLib.bumpmap, - UniformsLib.normalmap, - UniformsLib.displacementmap, - UniformsLib.roughnessmap, - UniformsLib.metalnessmap, - UniformsLib.fog, - UniformsLib.lights, - { - emissive: { value: new Color(0) }, - roughness: { value: 1 }, - metalness: { value: 0 }, - envMapIntensity: { value: 1 } - } - ]), - vertexShader: ShaderChunk.meshphysical_vert, - fragmentShader: ShaderChunk.meshphysical_frag - }, - toon: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.aomap, - UniformsLib.lightmap, - UniformsLib.emissivemap, - UniformsLib.bumpmap, - UniformsLib.normalmap, - UniformsLib.displacementmap, - UniformsLib.gradientmap, - UniformsLib.fog, - UniformsLib.lights, - { - emissive: { value: new Color(0) } + let directionNewVector = fromValues(0, newHeight / 2, 0); + if (altKey) { + directionNewVector = fromValues(realDx / 2, newHeight / 2, 0); } - ]), - vertexShader: ShaderChunk.meshtoon_vert, - fragmentShader: ShaderChunk.meshtoon_frag - }, - matcap: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.bumpmap, - UniformsLib.normalmap, - UniformsLib.displacementmap, - UniformsLib.fog, - { - matcap: { value: null } + this.moveDirectionVertex(item, newWidth, newHeight, "to left", directionNewVector, { + resizingHorizontal: ResizingMode.FIXED + }); + this.updateGridArea(item); + } + } + moveLeftVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx] = this.calculateRealDist(item, 0, distVector); + if (altKey) { + realDx = realDx * 2; } - ]), - vertexShader: ShaderChunk.meshmatcap_vert, - fragmentShader: ShaderChunk.meshmatcap_frag - }, - points: { - uniforms: mergeUniforms([ - UniformsLib.points, - UniformsLib.fog - ]), - vertexShader: ShaderChunk.points_vert, - fragmentShader: ShaderChunk.points_frag - }, - dashed: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.fog, - { - scale: { value: 1 }, - dashSize: { value: 1 }, - totalSize: { value: 2 } + const newWidth = item.width - realDx; + let newHeight = item.height; + if (metaKey) { + newHeight = newWidth; + } else if (shiftKey) { + newHeight = item.height * (1 - realDx / item.width); } - ]), - vertexShader: ShaderChunk.linedashed_vert, - fragmentShader: ShaderChunk.linedashed_frag - }, - depth: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.displacementmap - ]), - vertexShader: ShaderChunk.depth_vert, - fragmentShader: ShaderChunk.depth_frag - }, - normal: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.bumpmap, - UniformsLib.normalmap, - UniformsLib.displacementmap, - { - opacity: { value: 1 } + let directionNewVector = fromValues(newWidth, newHeight / 2, 0); + if (altKey) { + directionNewVector = fromValues(newWidth + realDx / 2, newHeight / 2, 0); } - ]), - vertexShader: ShaderChunk.meshnormal_vert, - fragmentShader: ShaderChunk.meshnormal_frag - }, - sprite: { - uniforms: mergeUniforms([ - UniformsLib.sprite, - UniformsLib.fog - ]), - vertexShader: ShaderChunk.sprite_vert, - fragmentShader: ShaderChunk.sprite_frag - }, - background: { - uniforms: { - uvTransform: { value: new Matrix3() }, - t2D: { value: null } - }, - vertexShader: ShaderChunk.background_vert, - fragmentShader: ShaderChunk.background_frag - }, - cube: { - uniforms: mergeUniforms([ - UniformsLib.envmap, - { - opacity: { value: 1 } + this.moveDirectionVertex(item, newWidth, newHeight, "to right", directionNewVector, { + resizingHorizontal: ResizingMode.FIXED + }); + this.updateGridArea(item); + } + } + moveBottomLeftVertex(distVector) { + const { shiftKey, altKey, metaKey } = this.$config.get("bodyEvent"); + const item = this.cachedCurrentItemMatrix; + if (item) { + let [realDx, realDy] = this.calculateRealDist(item, 3, distVector); + if (altKey) { + realDx = realDx * 2; + realDy = realDy * 2; } - ]), - vertexShader: ShaderChunk.cube_vert, - fragmentShader: ShaderChunk.cube_frag - }, - equirect: { - uniforms: { - tEquirect: { value: null } - }, - vertexShader: ShaderChunk.equirect_vert, - fragmentShader: ShaderChunk.equirect_frag - }, - distanceRGBA: { - uniforms: mergeUniforms([ - UniformsLib.common, - UniformsLib.displacementmap, - { - referencePosition: { value: new Vector3() }, - nearDistance: { value: 1 }, - farDistance: { value: 1e3 } + if (shiftKey) { + realDy = -(realDx * item.height / item.width); } - ]), - vertexShader: ShaderChunk.distanceRGBA_vert, - fragmentShader: ShaderChunk.distanceRGBA_frag - }, - shadow: { - uniforms: mergeUniforms([ - UniformsLib.lights, - UniformsLib.fog, - { - color: { value: new Color(0) }, - opacity: { value: 1 } + const newWidth = item.width - realDx; + const newHeight = metaKey ? newWidth : item.height + realDy; + let directionNewVector = fromValues(newWidth, 0, 0); + if (altKey) { + directionNewVector = fromValues(newWidth + realDx / 2, realDy / 2, 0); } - ]), - vertexShader: ShaderChunk.shadow_vert, - fragmentShader: ShaderChunk.shadow_frag + this.moveDirectionVertex(item, newWidth, newHeight, "to top right", directionNewVector, { + resizingVertical: ResizingMode.FIXED, + resizingHorizontal: ResizingMode.FIXED + }); + this.updateGridArea(item); + } + } + moveVertex() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const distVector = floor([], subtract([], targetMousePoint, this.initMousePoint)); + if (this.state.moveType === "to top left") { + this.moveTopLeftVertex(distVector); + } else if (this.state.moveType === "to top") { + this.moveTopVertex(distVector); + } else if (this.state.moveType === "to right") { + this.moveRightVertex(distVector); + } else if (this.state.moveType === "to bottom") { + this.moveBottomVertex(distVector); + } else if (this.state.moveType === "to left") { + this.moveLeftVertex(distVector); + } else if (this.state.moveType === "to top right") { + this.moveTopRightVertex(distVector); + } else if (this.state.moveType === "to bottom right") { + this.moveBottomRightVertex(distVector); + } else if (this.state.moveType === "to bottom left") { + this.moveBottomLeftVertex(distVector); + } + this.$context.selection.recoverChildren(); + const current = this.$context.selection.current; + if (current.isInGrid()) { + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical", "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end")); + } else { + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical")); + } + this.state.dragging = true; + this.makeSelectionTool(); } -}; -ShaderLib.physical = { - uniforms: mergeUniforms([ - ShaderLib.standard.uniforms, - { - clearcoat: { value: 0 }, - clearcoatMap: { value: null }, - clearcoatRoughness: { value: 0 }, - clearcoatRoughnessMap: { value: null }, - clearcoatNormalScale: { value: new Vector2(1, 1) }, - clearcoatNormalMap: { value: null }, - sheen: { value: 0 }, - sheenColor: { value: new Color(0) }, - sheenColorMap: { value: null }, - sheenRoughness: { value: 1 }, - sheenRoughnessMap: { value: null }, - transmission: { value: 0 }, - transmissionMap: { value: null }, - transmissionSamplerSize: { value: new Vector2() }, - transmissionSamplerMap: { value: null }, - thickness: { value: 0 }, - thicknessMap: { value: null }, - attenuationDistance: { value: 0 }, - attenuationColor: { value: new Color(0) }, - specularIntensity: { value: 1 }, - specularIntensityMap: { value: null }, - specularColor: { value: new Color(1, 1, 1) }, - specularColorMap: { value: null } - } - ]), - vertexShader: ShaderChunk.meshphysical_vert, - fragmentShader: ShaderChunk.meshphysical_frag -}; -function WebGLBackground(renderer, cubemaps, state, objects, alpha2, premultipliedAlpha) { - const clearColor = new Color(0); - let clearAlpha = alpha2 === true ? 0 : 1; - let planeMesh; - let boxMesh; - let currentBackground = null; - let currentBackgroundVersion = 0; - let currentTonemapping = null; - function render(renderList, scene) { - let forceClear = false; - let background = scene.isScene === true ? scene.background : null; - if (background && background.isTexture) { - background = cubemaps.get(background); - } - const xr = renderer.xr; - const session = xr.getSession && xr.getSession(); - if (session && session.environmentBlendMode === "additive") { - background = null; - } - if (background === null) { - setClear(clearColor, clearAlpha); - } else if (background && background.isColor) { - setClear(background, 1); - forceClear = true; - } - if (renderer.autoClear || forceClear) { - renderer.clear(renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil); - } - if (background && (background.isCubeTexture || background.mapping === CubeUVReflectionMapping)) { - if (boxMesh === void 0) { - boxMesh = new Mesh(new BoxGeometry(1, 1, 1), new ShaderMaterial({ - name: "BackgroundCubeMaterial", - uniforms: cloneUniforms(ShaderLib.cube.uniforms), - vertexShader: ShaderLib.cube.vertexShader, - fragmentShader: ShaderLib.cube.fragmentShader, - side: BackSide, - depthTest: false, - depthWrite: false, - fog: false - })); - boxMesh.geometry.deleteAttribute("normal"); - boxMesh.geometry.deleteAttribute("uv"); - boxMesh.onBeforeRender = function(renderer2, scene2, camera) { - this.matrixWorld.copyPosition(camera.matrixWorld); - }; - Object.defineProperty(boxMesh.material, "envMap", { - get: function() { - return this.uniforms.envMap.value; - } - }); - objects.update(boxMesh); - } - boxMesh.material.uniforms.envMap.value = background; - boxMesh.material.uniforms.flipEnvMap.value = background.isCubeTexture && background.isRenderTargetTexture === false ? -1 : 1; - if (currentBackground !== background || currentBackgroundVersion !== background.version || currentTonemapping !== renderer.toneMapping) { - boxMesh.material.needsUpdate = true; - currentBackground = background; - currentBackgroundVersion = background.version; - currentTonemapping = renderer.toneMapping; - } - renderList.unshift(boxMesh, boxMesh.geometry, boxMesh.material, 0, 0, null); - } else if (background && background.isTexture) { - if (planeMesh === void 0) { - planeMesh = new Mesh(new PlaneGeometry(2, 2), new ShaderMaterial({ - name: "BackgroundMaterial", - uniforms: cloneUniforms(ShaderLib.background.uniforms), - vertexShader: ShaderLib.background.vertexShader, - fragmentShader: ShaderLib.background.fragmentShader, - side: FrontSide, - depthTest: false, - depthWrite: false, - fog: false - })); - planeMesh.geometry.deleteAttribute("normal"); - Object.defineProperty(planeMesh.material, "map", { - get: function() { - return this.uniforms.t2D.value; - } - }); - objects.update(planeMesh); - } - planeMesh.material.uniforms.t2D.value = background; - if (background.matrixAutoUpdate === true) { - background.updateMatrix(); - } - planeMesh.material.uniforms.uvTransform.value.copy(background.matrix); - if (currentBackground !== background || currentBackgroundVersion !== background.version || currentTonemapping !== renderer.toneMapping) { - planeMesh.material.needsUpdate = true; - currentBackground = background; - currentBackgroundVersion = background.version; - currentTonemapping = renderer.toneMapping; + updateGridArea() { + return GridLayoutEngine.updateGridArea(this.$context.selection.current, this.$context.selection.gridInformation, this.$context.viewport.scale); + } + moveEndVertex() { + this.state.dragging = false; + this.$commands.emit("recoverCursor"); + this.$context.selection.reselect(); + this.nextTick(() => { + this.$context.selection.recoverChildren(); + if (this.$context.selection.current.isInGrid()) { + this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical", "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end")); + } else { + this.$commands.executeCommand("setAttribute", "move selection pointer", this.$context.selection.pack("x", "y", "angle", "width", "height", "resizingHorizontal", "resizingVertical")); } - renderList.unshift(planeMesh, planeMesh.geometry, planeMesh.material, 0, 0, null); - } + this.$commands.emit("recoverBooleanPath"); + }); } - function setClear(color2, alpha3) { - state.buffers.color.setClear(color2.r, color2.g, color2.b, alpha3, premultipliedAlpha); + show() { + this.$el.show(); + this.state.show = true; } - return { - getClearColor: function() { - return clearColor; - }, - setClearColor: function(color2, alpha3 = 1) { - clearColor.set(color2); - clearAlpha = alpha3; - setClear(clearColor, clearAlpha); - }, - getClearAlpha: function() { - return clearAlpha; - }, - setClearAlpha: function(alpha3) { - clearAlpha = alpha3; - setClear(clearColor, clearAlpha); - }, - render - }; -} -function WebGLBindingStates(gl, extensions, attributes, capabilities) { - const maxVertexAttributes = gl.getParameter(34921); - const extension = capabilities.isWebGL2 ? null : extensions.get("OES_vertex_array_object"); - const vaoAvailable = capabilities.isWebGL2 || extension !== null; - const bindingStates = {}; - const defaultState = createBindingState(null); - let currentState = defaultState; - let forceUpdate = false; - function setup(object, material, program, geometry, index2) { - let updateBuffers = false; - if (vaoAvailable) { - const state = getBindingState(geometry, program, material); - if (currentState !== state) { - currentState = state; - bindVertexArrayObject(currentState.object); - } - updateBuffers = needsUpdate(geometry, index2); - if (updateBuffers) - saveCache(geometry, index2); - } else { - const wireframe = material.wireframe === true; - if (currentState.geometry !== geometry.id || currentState.program !== program.id || currentState.wireframe !== wireframe) { - currentState.geometry = geometry.id; - currentState.program = program.id; - currentState.wireframe = wireframe; - updateBuffers = true; - } - } - if (object.isInstancedMesh === true) { - updateBuffers = true; - } - if (index2 !== null) { - attributes.update(index2, 34963); - } - if (updateBuffers || forceUpdate) { - forceUpdate = false; - setupVertexAttributes(object, material, program, geometry); - if (index2 !== null) { - gl.bindBuffer(34963, attributes.get(index2).buffer); - } - } - } - function createVertexArrayObject() { - if (capabilities.isWebGL2) - return gl.createVertexArray(); - return extension.createVertexArrayOES(); - } - function bindVertexArrayObject(vao) { - if (capabilities.isWebGL2) - return gl.bindVertexArray(vao); - return extension.bindVertexArrayOES(vao); - } - function deleteVertexArrayObject(vao) { - if (capabilities.isWebGL2) - return gl.deleteVertexArray(vao); - return extension.deleteVertexArrayOES(vao); - } - function getBindingState(geometry, program, material) { - const wireframe = material.wireframe === true; - let programMap = bindingStates[geometry.id]; - if (programMap === void 0) { - programMap = {}; - bindingStates[geometry.id] = programMap; - } - let stateMap = programMap[program.id]; - if (stateMap === void 0) { - stateMap = {}; - programMap[program.id] = stateMap; - } - let state = stateMap[wireframe]; - if (state === void 0) { - state = createBindingState(createVertexArrayObject()); - stateMap[wireframe] = state; - } - return state; - } - function createBindingState(vao) { - const newAttributes = []; - const enabledAttributes = []; - const attributeDivisors = []; - for (let i = 0; i < maxVertexAttributes; i++) { - newAttributes[i] = 0; - enabledAttributes[i] = 0; - attributeDivisors[i] = 0; - } - return { - geometry: null, - program: null, - wireframe: false, - newAttributes, - enabledAttributes, - attributeDivisors, - object: vao, - attributes: {}, - index: null - }; + hide() { + this.$el.hide(); + this.state.show = false; } - function needsUpdate(geometry, index2) { - const cachedAttributes = currentState.attributes; - const geometryAttributes = geometry.attributes; - let attributesNum = 0; - for (const key in geometryAttributes) { - const cachedAttribute = cachedAttributes[key]; - const geometryAttribute = geometryAttributes[key]; - if (cachedAttribute === void 0) - return true; - if (cachedAttribute.attribute !== geometryAttribute) - return true; - if (cachedAttribute.data !== geometryAttribute.data) - return true; - attributesNum++; + initSelectionTool() { + if (this.$el.isShow() && this.$context.selection.isOne === false) { + this.hide(); + } else if (this.$el.isHide() && this.$context.selection.isOne) { + this.show(); } - if (currentState.attributesNum !== attributesNum) - return true; - if (currentState.index !== index2) - return true; - return false; + this.makeSelectionTool(); } - function saveCache(geometry, index2) { - const cache = {}; - const attributes2 = geometry.attributes; - let attributesNum = 0; - for (const key in attributes2) { - const attribute = attributes2[key]; - const data = {}; - data.attribute = attribute; - if (attribute.data) { - data.data = attribute.data; - } - cache[key] = data; - attributesNum++; - } - currentState.attributes = cache; - currentState.attributesNum = attributesNum; - currentState.index = index2; - } - function initAttributes() { - const newAttributes = currentState.newAttributes; - for (let i = 0, il = newAttributes.length; i < il; i++) { - newAttributes[i] = 0; - } - } - function enableAttribute(attribute) { - enableAttributeAndDivisor(attribute, 0); - } - function enableAttributeAndDivisor(attribute, meshPerAttribute) { - const newAttributes = currentState.newAttributes; - const enabledAttributes = currentState.enabledAttributes; - const attributeDivisors = currentState.attributeDivisors; - newAttributes[attribute] = 1; - if (enabledAttributes[attribute] === 0) { - gl.enableVertexAttribArray(attribute); - enabledAttributes[attribute] = 1; - } - if (attributeDivisors[attribute] !== meshPerAttribute) { - const extension2 = capabilities.isWebGL2 ? gl : extensions.get("ANGLE_instanced_arrays"); - extension2[capabilities.isWebGL2 ? "vertexAttribDivisor" : "vertexAttribDivisorANGLE"](attribute, meshPerAttribute); - attributeDivisors[attribute] = meshPerAttribute; - } - } - function disableUnusedAttributes() { - const newAttributes = currentState.newAttributes; - const enabledAttributes = currentState.enabledAttributes; - for (let i = 0, il = enabledAttributes.length; i < il; i++) { - if (enabledAttributes[i] !== newAttributes[i]) { - gl.disableVertexAttribArray(i); - enabledAttributes[i] = 0; - } - } - } - function vertexAttribPointer(index2, size2, type, normalized, stride, offset) { - if (capabilities.isWebGL2 === true && (type === 5124 || type === 5125)) { - gl.vertexAttribIPointer(index2, size2, type, stride, offset); - } else { - gl.vertexAttribPointer(index2, size2, type, normalized, stride, offset); - } + makeSelectionTool() { + this.renderPointers(); } - function setupVertexAttributes(object, material, program, geometry) { - if (capabilities.isWebGL2 === false && (object.isInstancedMesh || geometry.isInstancedBufferGeometry)) { - if (extensions.get("ANGLE_instanced_arrays") === null) - return; + getRateDistance(startVetex, endVertex, dist$1 = 0) { + return lerp([], startVetex, endVertex, (dist(startVetex, endVertex) + dist$1) / dist(startVetex, endVertex)); + } + renderPointers() { + if (this.$context.selection.isEmpty || this.$config.true("set.move.control.point")) { + this.refs.$pointerRect.empty(); + return; } - initAttributes(); - const geometryAttributes = geometry.attributes; - const programAttributes = program.getAttributes(); - const materialDefaultAttributeValues = material.defaultAttributeValues; - for (const name in programAttributes) { - const programAttribute = programAttributes[name]; - if (programAttribute.location >= 0) { - let geometryAttribute = geometryAttributes[name]; - if (geometryAttribute === void 0) { - if (name === "instanceMatrix" && object.instanceMatrix) - geometryAttribute = object.instanceMatrix; - if (name === "instanceColor" && object.instanceColor) - geometryAttribute = object.instanceColor; - } - if (geometryAttribute !== void 0) { - const normalized = geometryAttribute.normalized; - const size2 = geometryAttribute.itemSize; - const attribute = attributes.get(geometryAttribute); - if (attribute === void 0) - continue; - const buffer = attribute.buffer; - const type = attribute.type; - const bytesPerElement = attribute.bytesPerElement; - if (geometryAttribute.isInterleavedBufferAttribute) { - const data = geometryAttribute.data; - const stride = data.stride; - const offset = geometryAttribute.offset; - if (data.isInstancedInterleavedBuffer) { - for (let i = 0; i < programAttribute.locationSize; i++) { - enableAttributeAndDivisor(programAttribute.location + i, data.meshPerAttribute); - } - if (object.isInstancedMesh !== true && geometry._maxInstanceCount === void 0) { - geometry._maxInstanceCount = data.meshPerAttribute * data.count; - } - } else { - for (let i = 0; i < programAttribute.locationSize; i++) { - enableAttribute(programAttribute.location + i); - } - } - gl.bindBuffer(34962, buffer); - for (let i = 0; i < programAttribute.locationSize; i++) { - vertexAttribPointer(programAttribute.location + i, size2 / programAttribute.locationSize, type, normalized, stride * bytesPerElement, (offset + size2 / programAttribute.locationSize * i) * bytesPerElement); - } - } else { - if (geometryAttribute.isInstancedBufferAttribute) { - for (let i = 0; i < programAttribute.locationSize; i++) { - enableAttributeAndDivisor(programAttribute.location + i, geometryAttribute.meshPerAttribute); - } - if (object.isInstancedMesh !== true && geometry._maxInstanceCount === void 0) { - geometry._maxInstanceCount = geometryAttribute.meshPerAttribute * geometryAttribute.count; - } - } else { - for (let i = 0; i < programAttribute.locationSize; i++) { - enableAttribute(programAttribute.location + i); - } - } - gl.bindBuffer(34962, buffer); - for (let i = 0; i < programAttribute.locationSize; i++) { - vertexAttribPointer(programAttribute.location + i, size2 / programAttribute.locationSize, type, normalized, size2 * bytesPerElement, size2 / programAttribute.locationSize * i * bytesPerElement); - } - } - } else if (materialDefaultAttributeValues !== void 0) { - const value = materialDefaultAttributeValues[name]; - if (value !== void 0) { - switch (value.length) { - case 2: - gl.vertexAttrib2fv(programAttribute.location, value); - break; - case 3: - gl.vertexAttrib3fv(programAttribute.location, value); - break; - case 4: - gl.vertexAttrib4fv(programAttribute.location, value); - break; - default: - gl.vertexAttrib1fv(programAttribute.location, value); - } - } - } - } + const verties = this.$context.selection.verties; + if (dist(verties[0], verties[1]) === 0) { + return; } - disableUnusedAttributes(); - } - function dispose() { - reset(); - for (const geometryId in bindingStates) { - const programMap = bindingStates[geometryId]; - for (const programId in programMap) { - const stateMap = programMap[programId]; - for (const wireframe in stateMap) { - deleteVertexArrayObject(stateMap[wireframe].object); - delete stateMap[wireframe]; - } - delete programMap[programId]; - } - delete bindingStates[geometryId]; + const screenVerties = this.$viewport.applyVerties(verties).map((it) => { + return round$2([], it); + }); + this.state.renderPointerList = [ + screenVerties, + [ + this.getRateDistance(screenVerties[4], screenVerties[0], 20), + this.getRateDistance(screenVerties[4], screenVerties[1], 20), + this.getRateDistance(screenVerties[4], screenVerties[2], 20), + this.getRateDistance(screenVerties[4], screenVerties[3], 20) + ] + ]; + const pointers = this.createRenderPointers(...this.state.renderPointerList); + if (pointers) { + const { line: line2, parentRect, point: point2, size: size2, visiblePath } = pointers; + this.refs.$pointerRect.updateDiff(line2 + parentRect + point2 + size2 + visiblePath); } } - function releaseStatesOfGeometry(geometry) { - if (bindingStates[geometry.id] === void 0) - return; - const programMap = bindingStates[geometry.id]; - for (const programId in programMap) { - const stateMap = programMap[programId]; - for (const wireframe in stateMap) { - deleteVertexArrayObject(stateMap[wireframe].object); - delete stateMap[wireframe]; - } - delete programMap[programId]; + createPointer(pointer, number, rotate2) { + return `
`; + } + createPointerSide(pointer, number, rotate2, width2, height2) { + return `
`; + } + createRotatePointer(pointer, number) { + if (pointer.length === 0) + return ""; + if (number < 4) { + return `
`; } - delete bindingStates[geometry.id]; + return `
`; } - function releaseStatesOfProgram(program) { - for (const geometryId in bindingStates) { - const programMap = bindingStates[geometryId]; - if (programMap[program.id] === void 0) - continue; - const stateMap = programMap[program.id]; - for (const wireframe in stateMap) { - deleteVertexArrayObject(stateMap[wireframe].object); - delete stateMap[wireframe]; - } - delete programMap[program.id]; + createPointerRect(pointers, rotatePointer = void 0) { + if (pointers.length === 0) + return ""; + const current = this.$context.selection.current; + const isArtBoard = current && current.is("artboard"); + let line2 = ""; + if (!isArtBoard && rotatePointer) { + const centerPointer = lerp([], pointers[0], pointers[1], 0.5); + line2 += ` + M ${centerPointer[0]},${centerPointer[1]} + L ${rotatePointer[0]},${rotatePointer[1]} + `; } + return ` + `; } - function reset() { - resetDefaultState(); - forceUpdate = true; - if (currentState === defaultState) - return; - currentState = defaultState; - bindVertexArrayObject(currentState.object); + createParentRect(pointers = []) { + if (pointers.length === 0) + return ""; + return ` + + + `; } - function resetDefaultState() { - defaultState.geometry = null; - defaultState.program = null; - defaultState.wireframe = false; + createSize(pointers) { + const top2 = lerp([], pointers[0], pointers[1], 0.5); + const right2 = lerp([], pointers[1], pointers[2], 0.5); + const bottom2 = lerp([], pointers[2], pointers[3], 0.5); + const left2 = lerp([], pointers[3], pointers[0], 0.5); + const list2 = [ + { start: top2, end: bottom2 }, + { start: right2, end: left2 }, + { start: bottom2, end: top2 }, + { start: left2, end: right2 } + ].map((it, index2) => { + return { index: index2, data: it }; + }); + list2.sort((a, b) => { + return a.data.start[1] > b.data.start[1] ? -1 : 1; + }); + const item = list2[0]; + const newPointer = lerp([], item.data.end, item.data.start, 1 + 16 / dist(item.data.start, item.data.end)); + const width2 = this.$context.selection.current.width; + const height2 = this.$context.selection.current.height; + const diff = subtract([], item.data.start, item.data.end); + const angle = calculateAngle360(diff[0], diff[1]) + 90; + const widthPx = round(width2, 100); + const heightPx = round(height2, 100); + let text2 = widthPx === heightPx ? `WH: ${widthPx}` : `${round(width2, 100)} x ${round(height2, 100)}`; + if (this.state.isRotate) { + text2 = `${round(this.$context.selection.current.angle, 100)}\xB0`; + } + return `
${text2}
`; } - return { - setup, - reset, - resetDefaultState, - dispose, - releaseStatesOfGeometry, - releaseStatesOfProgram, - initAttributes, - enableAttribute, - disableUnusedAttributes - }; -} -function WebGLBufferRenderer(gl, extensions, info, capabilities) { - const isWebGL2 = capabilities.isWebGL2; - let mode; - function setMode(value) { - mode = value; + createVisiblePath() { + const current = this.$context.selection.current; + if (!current) + return ""; + if (!current.isBooleanItem) { + return ""; + } + const newPath = current.absolutePath(); + newPath.transformMat4(this.$viewport.matrix); + return ` + + + + `; } - function render(start2, count) { - gl.drawArrays(mode, start2, count); - info.update(count, mode, 1); + removeNaN(value) { + return value.replace(/NaN/g, "0"); } - function renderInstances(start2, count, primcount) { - if (primcount === 0) - return; - let extension, methodName; - if (isWebGL2) { - extension = gl; - methodName = "drawArraysInstanced"; - } else { - extension = extensions.get("ANGLE_instanced_arrays"); - methodName = "drawArraysInstancedANGLE"; - if (extension === null) { - console.error("THREE.WebGLBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays."); + createRenderPointers(pointers, selectionPointers) { + const current = this.$context.selection.current; + if (current && current.is("text")) { + if (current.width === 0 && current.height === 0) { return; } } - extension[methodName](mode, start2, count, primcount); - info.update(count, mode, primcount); + const rotate2 = Length.deg(current.nestedAngle).round(1e3); + const dist$1 = dist(pointers[0], pointers[2]); + const width2 = dist(pointers[0], pointers[1]); + const height2 = dist(pointers[0], pointers[3]); + return { + line: this.createPointerRect(pointers), + size: this.createSize(pointers), + parentRect: "", + visiblePath: this.createVisiblePath(), + point: [ + this.createRotatePointer(selectionPointers[0], 0), + this.createRotatePointer(selectionPointers[1], 1), + this.createRotatePointer(selectionPointers[2], 2), + this.createRotatePointer(selectionPointers[3], 3), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[0], pointers[1], 0.5), 11, rotate2, width2, 5), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[1], pointers[2], 0.5), 12, rotate2, 5, height2), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[2], pointers[3], 0.5), 13, rotate2, width2, 5), + dist$1 < 20 ? void 0 : this.createPointerSide(lerp([], pointers[3], pointers[0], 0.5), 14, rotate2, 5, height2), + this.createPointer(pointers[0], 1, rotate2), + this.createPointer(pointers[1], 2, rotate2), + this.createPointer(pointers[2], 3, rotate2), + this.createPointer(pointers[3], 4, rotate2), + this.createPointer(pointers[4], 5, rotate2) + ].join("") + }; } - this.setMode = setMode; - this.render = render; - this.renderInstances = renderInstances; -} -function WebGLCapabilities(gl, extensions, parameters) { - let maxAnisotropy; - function getMaxAnisotropy() { - if (maxAnisotropy !== void 0) - return maxAnisotropy; - if (extensions.has("EXT_texture_filter_anisotropic") === true) { - const extension = extensions.get("EXT_texture_filter_anisotropic"); - maxAnisotropy = gl.getParameter(extension.MAX_TEXTURE_MAX_ANISOTROPY_EXT); - } else { - maxAnisotropy = 0; - } - return maxAnisotropy; - } - function getMaxPrecision(precision2) { - if (precision2 === "highp") { - if (gl.getShaderPrecisionFormat(35633, 36338).precision > 0 && gl.getShaderPrecisionFormat(35632, 36338).precision > 0) { - return "highp"; - } - precision2 = "mediump"; - } - if (precision2 === "mediump") { - if (gl.getShaderPrecisionFormat(35633, 36337).precision > 0 && gl.getShaderPrecisionFormat(35632, 36337).precision > 0) { - return "mediump"; - } - } - return "lowp"; - } - const isWebGL2 = typeof WebGL2RenderingContext !== "undefined" && gl instanceof WebGL2RenderingContext || typeof WebGL2ComputeRenderingContext !== "undefined" && gl instanceof WebGL2ComputeRenderingContext; - let precision = parameters.precision !== void 0 ? parameters.precision : "highp"; - const maxPrecision = getMaxPrecision(precision); - if (maxPrecision !== precision) { - console.warn("THREE.WebGLRenderer:", precision, "not supported, using", maxPrecision, "instead."); - precision = maxPrecision; - } - const drawBuffers = isWebGL2 || extensions.has("WEBGL_draw_buffers"); - const logarithmicDepthBuffer = parameters.logarithmicDepthBuffer === true; - const maxTextures = gl.getParameter(34930); - const maxVertexTextures = gl.getParameter(35660); - const maxTextureSize = gl.getParameter(3379); - const maxCubemapSize = gl.getParameter(34076); - const maxAttributes = gl.getParameter(34921); - const maxVertexUniforms = gl.getParameter(36347); - const maxVaryings = gl.getParameter(36348); - const maxFragmentUniforms = gl.getParameter(36349); - const vertexTextures = maxVertexTextures > 0; - const floatFragmentTextures = isWebGL2 || extensions.has("OES_texture_float"); - const floatVertexTextures = vertexTextures && floatFragmentTextures; - const maxSamples = isWebGL2 ? gl.getParameter(36183) : 0; - return { - isWebGL2, - drawBuffers, - getMaxAnisotropy, - getMaxPrecision, - precision, - logarithmicDepthBuffer, - maxTextures, - maxVertexTextures, - maxTextureSize, - maxCubemapSize, - maxAttributes, - maxVertexUniforms, - maxVaryings, - maxFragmentUniforms, - vertexTextures, - floatFragmentTextures, - floatVertexTextures, - maxSamples - }; -} -function WebGLClipping(properties) { - const scope = this; - let globalState = null, numGlobalPlanes = 0, localClippingEnabled = false, renderingShadows = false; - const plane = new Plane(), viewNormalMatrix = new Matrix3(), uniform = { value: null, needsUpdate: false }; - this.uniform = uniform; - this.numPlanes = 0; - this.numIntersection = 0; - this.init = function(planes, enableLocalClipping, camera) { - const enabled = planes.length !== 0 || enableLocalClipping || numGlobalPlanes !== 0 || localClippingEnabled; - localClippingEnabled = enableLocalClipping; - globalState = projectPlanes(planes, camera, 0); - numGlobalPlanes = planes.length; - return enabled; - }; - this.beginShadows = function() { - renderingShadows = true; - projectPlanes(null); - }; - this.endShadows = function() { - renderingShadows = false; - resetGlobalState(); - }; - this.setState = function(material, camera, useCache) { - const planes = material.clippingPlanes, clipIntersection = material.clipIntersection, clipShadows = material.clipShadows; - const materialProperties = properties.get(material); - if (!localClippingEnabled || planes === null || planes.length === 0 || renderingShadows && !clipShadows) { - if (renderingShadows) { - projectPlanes(null); - } else { - resetGlobalState(); - } - } else { - const nGlobal = renderingShadows ? 0 : numGlobalPlanes, lGlobal = nGlobal * 4; - let dstArray = materialProperties.clippingState || null; - uniform.value = dstArray; - dstArray = projectPlanes(planes, camera, lGlobal, useCache); - for (let i = 0; i !== lGlobal; ++i) { - dstArray[i] = globalState[i]; - } - materialProperties.clippingState = dstArray; - this.numIntersection = clipIntersection ? this.numPlanes : 0; - this.numPlanes += nGlobal; + checkShow() { + if (this.$modeView.isCurrentMode(ViewModeType.CanvasView) === false) { + return false; } - }; - function resetGlobalState() { - if (uniform.value !== globalState) { - uniform.value = globalState; - uniform.needsUpdate = numGlobalPlanes > 0; - } - scope.numPlanes = numGlobalPlanes; - scope.numIntersection = 0; - } - function projectPlanes(planes, camera, dstOffset, skipTransform) { - const nPlanes = planes !== null ? planes.length : 0; - let dstArray = null; - if (nPlanes !== 0) { - dstArray = uniform.value; - if (skipTransform !== true || dstArray === null) { - const flatSize = dstOffset + nPlanes * 4, viewMatrix = camera.matrixWorldInverse; - viewNormalMatrix.getNormalMatrix(viewMatrix); - if (dstArray === null || dstArray.length < flatSize) { - dstArray = new Float32Array(flatSize); - } - for (let i = 0, i4 = dstOffset; i !== nPlanes; ++i, i4 += 4) { - plane.copy(planes[i]).applyMatrix4(viewMatrix, viewNormalMatrix); - plane.normal.toArray(dstArray, i4); - dstArray[i4 + 3] = plane.constant; - } - } - uniform.value = dstArray; - uniform.needsUpdate = true; + if (this.state.show && this.$context.selection.isOne) { + return true; } - scope.numPlanes = nPlanes; - scope.numIntersection = 0; - return dstArray; + return false; + } + [SUBSCRIBE("hideSelectionToolView")]() { + this.hide(); } } -function WebGLCubeMaps(renderer) { - let cubemaps = /* @__PURE__ */ new WeakMap(); - function mapTextureMapping(texture2, mapping) { - if (mapping === EquirectangularReflectionMapping) { - texture2.mapping = CubeReflectionMapping; - } else if (mapping === EquirectangularRefractionMapping) { - texture2.mapping = CubeRefractionMapping; - } - return texture2; +async function selectionToolView(editor) { + editor.registerUI("canvas.view", { + GhostToolView, + SelectionToolView, + GroupSelectionToolView + }, CanvasViewToolLevel.SELECTION_TOOL); +} +var SelectorPopup$1 = ""; +class SelectorPopup extends BasePopup { + getTitle() { + return this.$i18n("selector.popup.title"); } - function get2(texture2) { - if (texture2 && texture2.isTexture && texture2.isRenderTargetTexture === false) { - const mapping = texture2.mapping; - if (mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping) { - if (cubemaps.has(texture2)) { - const cubemap = cubemaps.get(texture2).texture; - return mapTextureMapping(cubemap, texture2.mapping); - } else { - const image2 = texture2.image; - if (image2 && image2.height > 0) { - const renderTarget = new WebGLCubeRenderTarget(image2.height / 2); - renderTarget.fromEquirectangularTexture(renderer, texture2); - cubemaps.set(texture2, renderTarget); - texture2.addEventListener("dispose", onTextureDispose); - return mapTextureMapping(renderTarget.texture, texture2.mapping); - } else { - return null; - } - } - } - } - return texture2; + initState() { + return { + selector: "", + properties: [] + }; } - function onTextureDispose(event) { - const texture2 = event.target; - texture2.removeEventListener("dispose", onTextureDispose); - const cubemap = cubemaps.get(texture2); - if (cubemap !== void 0) { - cubemaps.delete(texture2); - cubemap.dispose(); - } + updateData(opt) { + this.setState(opt, false); + this.emit("changeSelectorPopup", this.state); } - function dispose() { - cubemaps = /* @__PURE__ */ new WeakMap(); + getBody() { + return ` +
+
+ ${this.templateForSelector()} + ${this.templateForProperty()} +
+
`; } - return { - get: get2, - dispose - }; -} -class OrthographicCamera extends Camera { - constructor(left2 = -1, right2 = 1, top2 = 1, bottom2 = -1, near = 0.1, far = 2e3) { - super(); - this.type = "OrthographicCamera"; - this.zoom = 1; - this.view = null; - this.left = left2; - this.right = right2; - this.top = top2; - this.bottom = bottom2; - this.near = near; - this.far = far; - this.updateProjectionMatrix(); - } - copy(source2, recursive) { - super.copy(source2, recursive); - this.left = source2.left; - this.right = source2.right; - this.top = source2.top; - this.bottom = source2.bottom; - this.near = source2.near; - this.far = source2.far; - this.zoom = source2.zoom; - this.view = source2.view === null ? null : Object.assign({}, source2.view); - return this; + templateForProperty() { + return createComponent("CSSPropertyEditor", { + ref: "$propertyEditor", + onchange: "changePropertyEditor" + }); } - setViewOffset(fullWidth, fullHeight, x, y, width2, height2) { - if (this.view === null) { - this.view = { - enabled: true, - fullWidth: 1, - fullHeight: 1, - offsetX: 0, - offsetY: 0, - width: 1, - height: 1 - }; - } - this.view.enabled = true; - this.view.fullWidth = fullWidth; - this.view.fullHeight = fullHeight; - this.view.offsetX = x; - this.view.offsetY = y; - this.view.width = width2; - this.view.height = height2; - this.updateProjectionMatrix(); - } - clearViewOffset() { - if (this.view !== null) { - this.view.enabled = false; - } - this.updateProjectionMatrix(); - } - updateProjectionMatrix() { - const dx = (this.right - this.left) / (2 * this.zoom); - const dy = (this.top - this.bottom) / (2 * this.zoom); - const cx = (this.right + this.left) / 2; - const cy = (this.top + this.bottom) / 2; - let left2 = cx - dx; - let right2 = cx + dx; - let top2 = cy + dy; - let bottom2 = cy - dy; - if (this.view !== null && this.view.enabled) { - const scaleW = (this.right - this.left) / this.view.fullWidth / this.zoom; - const scaleH2 = (this.top - this.bottom) / this.view.fullHeight / this.zoom; - left2 += scaleW * this.view.offsetX; - right2 = left2 + scaleW * this.view.width; - top2 -= scaleH2 * this.view.offsetY; - bottom2 = top2 - scaleH2 * this.view.height; - } - this.projectionMatrix.makeOrthographic(left2, right2, top2, bottom2, this.near, this.far); - this.projectionMatrixInverse.copy(this.projectionMatrix).invert(); - } - toJSON(meta) { - const data = super.toJSON(meta); - data.object.zoom = this.zoom; - data.object.left = this.left; - data.object.right = this.right; - data.object.top = this.top; - data.object.bottom = this.bottom; - data.object.near = this.near; - data.object.far = this.far; - if (this.view !== null) - data.object.view = Object.assign({}, this.view); - return data; + templateForSelector() { + return ` +
+ +
+ +
+
+ `; } -} -OrthographicCamera.prototype.isOrthographicCamera = true; -const LOD_MIN = 4; -const EXTRA_LOD_SIGMA = [0.125, 0.215, 0.35, 0.446, 0.526, 0.582]; -const MAX_SAMPLES = 20; -const _flatCamera = /* @__PURE__ */ new OrthographicCamera(); -const _clearColor = /* @__PURE__ */ new Color(); -let _oldTarget = null; -const PHI = (1 + Math.sqrt(5)) / 2; -const INV_PHI = 1 / PHI; -const _axisDirections = [ - /* @__PURE__ */ new Vector3(1, 1, 1), - /* @__PURE__ */ new Vector3(-1, 1, 1), - /* @__PURE__ */ new Vector3(1, 1, -1), - /* @__PURE__ */ new Vector3(-1, 1, -1), - /* @__PURE__ */ new Vector3(0, PHI, INV_PHI), - /* @__PURE__ */ new Vector3(0, PHI, -INV_PHI), - /* @__PURE__ */ new Vector3(INV_PHI, 0, PHI), - /* @__PURE__ */ new Vector3(-INV_PHI, 0, PHI), - /* @__PURE__ */ new Vector3(PHI, INV_PHI, 0), - /* @__PURE__ */ new Vector3(-PHI, INV_PHI, 0) -]; -class PMREMGenerator { - constructor(renderer) { - this._renderer = renderer; - this._pingPongRenderTarget = null; - this._lodMax = 0; - this._cubeSize = 0; - this._lodPlanes = []; - this._sizeLods = []; - this._sigmas = []; - this._blurMaterial = null; - this._cubemapMaterial = null; - this._equirectMaterial = null; - this._compileMaterial(this._blurMaterial); - } - fromScene(scene, sigma = 0, near = 0.1, far = 100) { - _oldTarget = this._renderer.getRenderTarget(); - this._setSize(256); - const cubeUVRenderTarget = this._allocateTargets(); - cubeUVRenderTarget.depthBuffer = true; - this._sceneToCubeUV(scene, near, far, cubeUVRenderTarget); - if (sigma > 0) { - this._blur(cubeUVRenderTarget, 0, 0, sigma); - } - this._applyPMREM(cubeUVRenderTarget); - this._cleanup(cubeUVRenderTarget); - return cubeUVRenderTarget; - } - fromEquirectangular(equirectangular, renderTarget = null) { - return this._fromTexture(equirectangular, renderTarget); - } - fromCubemap(cubemap, renderTarget = null) { - return this._fromTexture(cubemap, renderTarget); - } - compileCubemapShader() { - if (this._cubemapMaterial === null) { - this._cubemapMaterial = _getCubemapMaterial(); - this._compileMaterial(this._cubemapMaterial); - } - } - compileEquirectangularShader() { - if (this._equirectMaterial === null) { - this._equirectMaterial = _getEquirectMaterial(); - this._compileMaterial(this._equirectMaterial); - } - } - dispose() { - this._dispose(); - if (this._cubemapMaterial !== null) - this._cubemapMaterial.dispose(); - if (this._equirectMaterial !== null) - this._equirectMaterial.dispose(); - } - _setSize(cubeSize) { - this._lodMax = Math.floor(Math.log2(cubeSize)); - this._cubeSize = Math.pow(2, this._lodMax); - } - _dispose() { - if (this._blurMaterial !== null) - this._blurMaterial.dispose(); - if (this._pingPongRenderTarget !== null) - this._pingPongRenderTarget.dispose(); - for (let i = 0; i < this._lodPlanes.length; i++) { - this._lodPlanes[i].dispose(); - } - } - _cleanup(outputTarget) { - this._renderer.setRenderTarget(_oldTarget); - outputTarget.scissorTest = false; - _setViewport(outputTarget, 0, 0, outputTarget.width, outputTarget.height); - } - _fromTexture(texture2, renderTarget) { - if (texture2.mapping === CubeReflectionMapping || texture2.mapping === CubeRefractionMapping) { - this._setSize(texture2.image.length === 0 ? 16 : texture2.image[0].width || texture2.image[0].image.width); - } else { - this._setSize(texture2.image.width / 4); - } - _oldTarget = this._renderer.getRenderTarget(); - const cubeUVRenderTarget = renderTarget || this._allocateTargets(); - this._textureToCubeUV(texture2, cubeUVRenderTarget); - this._applyPMREM(cubeUVRenderTarget); - this._cleanup(cubeUVRenderTarget); - return cubeUVRenderTarget; - } - _allocateTargets() { - const width2 = 3 * Math.max(this._cubeSize, 16 * 7); - const height2 = 4 * this._cubeSize - 32; - const params = { - magFilter: LinearFilter, - minFilter: LinearFilter, - generateMipmaps: false, - type: HalfFloatType, - format: RGBAFormat, - encoding: LinearEncoding, - depthBuffer: false - }; - const cubeUVRenderTarget = _createRenderTarget(width2, height2, params); - if (this._pingPongRenderTarget === null || this._pingPongRenderTarget.width !== width2) { - if (this._pingPongRenderTarget !== null) { - this._dispose(); - } - this._pingPongRenderTarget = _createRenderTarget(width2, height2, params); - const { _lodMax } = this; - ({ sizeLods: this._sizeLods, lodPlanes: this._lodPlanes, sigmas: this._sigmas } = _createPlanes(_lodMax)); - this._blurMaterial = _getBlurShader(_lodMax, width2, height2); - } - return cubeUVRenderTarget; - } - _compileMaterial(material) { - const tmpMesh = new Mesh(this._lodPlanes[0], material); - this._renderer.compile(tmpMesh, _flatCamera); - } - _sceneToCubeUV(scene, near, far, cubeUVRenderTarget) { - const fov2 = 90; - const aspect2 = 1; - const cubeCamera = new PerspectiveCamera(fov2, aspect2, near, far); - const upSign = [1, -1, 1, 1, 1, 1]; - const forwardSign = [1, 1, 1, -1, -1, -1]; - const renderer = this._renderer; - const originalAutoClear = renderer.autoClear; - const toneMapping = renderer.toneMapping; - renderer.getClearColor(_clearColor); - renderer.toneMapping = NoToneMapping; - renderer.autoClear = false; - const backgroundMaterial = new MeshBasicMaterial({ - name: "PMREM.Background", - side: BackSide, - depthWrite: false, - depthTest: false - }); - const backgroundBox = new Mesh(new BoxGeometry(), backgroundMaterial); - let useSolidColor = false; - const background = scene.background; - if (background) { - if (background.isColor) { - backgroundMaterial.color.copy(background); - scene.background = null; - useSolidColor = true; - } - } else { - backgroundMaterial.color.copy(_clearColor); - useSolidColor = true; - } - for (let i = 0; i < 6; i++) { - const col = i % 3; - if (col === 0) { - cubeCamera.up.set(0, upSign[i], 0); - cubeCamera.lookAt(forwardSign[i], 0, 0); - } else if (col === 1) { - cubeCamera.up.set(0, 0, upSign[i]); - cubeCamera.lookAt(0, forwardSign[i], 0); - } else { - cubeCamera.up.set(0, upSign[i], 0); - cubeCamera.lookAt(0, 0, forwardSign[i]); - } - const size2 = this._cubeSize; - _setViewport(cubeUVRenderTarget, col * size2, i > 2 ? size2 : 0, size2, size2); - renderer.setRenderTarget(cubeUVRenderTarget); - if (useSolidColor) { - renderer.render(backgroundBox, cubeCamera); - } - renderer.render(scene, cubeCamera); - } - backgroundBox.geometry.dispose(); - backgroundBox.material.dispose(); - renderer.toneMapping = toneMapping; - renderer.autoClear = originalAutoClear; - scene.background = background; - } - _textureToCubeUV(texture2, cubeUVRenderTarget) { - const renderer = this._renderer; - const isCubeTexture = texture2.mapping === CubeReflectionMapping || texture2.mapping === CubeRefractionMapping; - if (isCubeTexture) { - if (this._cubemapMaterial === null) { - this._cubemapMaterial = _getCubemapMaterial(); - } - this._cubemapMaterial.uniforms.flipEnvMap.value = texture2.isRenderTargetTexture === false ? -1 : 1; + [INPUT("$selector")](e) { + if (this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/)) { + this.updateData({ selector: this.refs.$selector.value }); } else { - if (this._equirectMaterial === null) { - this._equirectMaterial = _getEquirectMaterial(); - } - } - const material = isCubeTexture ? this._cubemapMaterial : this._equirectMaterial; - const mesh = new Mesh(this._lodPlanes[0], material); - const uniforms = material.uniforms; - uniforms["envMap"].value = texture2; - const size2 = this._cubeSize; - _setViewport(cubeUVRenderTarget, 0, 0, 3 * size2, 2 * size2); - renderer.setRenderTarget(cubeUVRenderTarget); - renderer.render(mesh, _flatCamera); - } - _applyPMREM(cubeUVRenderTarget) { - const renderer = this._renderer; - const autoClear = renderer.autoClear; - renderer.autoClear = false; - for (let i = 1; i < this._lodPlanes.length; i++) { - const sigma = Math.sqrt(this._sigmas[i] * this._sigmas[i] - this._sigmas[i - 1] * this._sigmas[i - 1]); - const poleAxis = _axisDirections[(i - 1) % _axisDirections.length]; - this._blur(cubeUVRenderTarget, i - 1, i, sigma, poleAxis); - } - renderer.autoClear = autoClear; - } - _blur(cubeUVRenderTarget, lodIn, lodOut, sigma, poleAxis) { - const pingPongRenderTarget = this._pingPongRenderTarget; - this._halfBlur(cubeUVRenderTarget, pingPongRenderTarget, lodIn, lodOut, sigma, "latitudinal", poleAxis); - this._halfBlur(pingPongRenderTarget, cubeUVRenderTarget, lodOut, lodOut, sigma, "longitudinal", poleAxis); - } - _halfBlur(targetIn, targetOut, lodIn, lodOut, sigmaRadians, direction2, poleAxis) { - const renderer = this._renderer; - const blurMaterial = this._blurMaterial; - if (direction2 !== "latitudinal" && direction2 !== "longitudinal") { - console.error("blur direction must be either latitudinal or longitudinal!"); - } - const STANDARD_DEVIATIONS = 3; - const blurMesh = new Mesh(this._lodPlanes[lodOut], blurMaterial); - const blurUniforms = blurMaterial.uniforms; - const pixels = this._sizeLods[lodIn] - 1; - const radiansPerPixel = isFinite(sigmaRadians) ? Math.PI / (2 * pixels) : 2 * Math.PI / (2 * MAX_SAMPLES - 1); - const sigmaPixels = sigmaRadians / radiansPerPixel; - const samples = isFinite(sigmaRadians) ? 1 + Math.floor(STANDARD_DEVIATIONS * sigmaPixels) : MAX_SAMPLES; - if (samples > MAX_SAMPLES) { - console.warn(`sigmaRadians, ${sigmaRadians}, is too large and will clip, as it requested ${samples} samples when the maximum is set to ${MAX_SAMPLES}`); - } - const weights = []; - let sum = 0; - for (let i = 0; i < MAX_SAMPLES; ++i) { - const x2 = i / sigmaPixels; - const weight = Math.exp(-x2 * x2 / 2); - weights.push(weight); - if (i === 0) { - sum += weight; - } else if (i < samples) { - sum += 2 * weight; - } - } - for (let i = 0; i < weights.length; i++) { - weights[i] = weights[i] / sum; - } - blurUniforms["envMap"].value = targetIn.texture; - blurUniforms["samples"].value = samples; - blurUniforms["weights"].value = weights; - blurUniforms["latitudinal"].value = direction2 === "latitudinal"; - if (poleAxis) { - blurUniforms["poleAxis"].value = poleAxis; - } - const { _lodMax } = this; - blurUniforms["dTheta"].value = radiansPerPixel; - blurUniforms["mipInt"].value = _lodMax - lodIn; - const outputSize = this._sizeLods[lodOut]; - const x = 3 * outputSize * (lodOut > _lodMax - LOD_MIN ? lodOut - _lodMax + LOD_MIN : 0); - const y = 4 * (this._cubeSize - outputSize); - _setViewport(targetOut, x, y, 3 * outputSize, 2 * outputSize); - renderer.setRenderTarget(targetOut); - renderer.render(blurMesh, _flatCamera); - } -} -function _createPlanes(lodMax) { - const lodPlanes = []; - const sizeLods = []; - const sigmas = []; - let lod = lodMax; - const totalLods = lodMax - LOD_MIN + 1 + EXTRA_LOD_SIGMA.length; - for (let i = 0; i < totalLods; i++) { - const sizeLod = Math.pow(2, lod); - sizeLods.push(sizeLod); - let sigma = 1 / sizeLod; - if (i > lodMax - LOD_MIN) { - sigma = EXTRA_LOD_SIGMA[i - lodMax + LOD_MIN - 1]; - } else if (i === 0) { - sigma = 0; - } - sigmas.push(sigma); - const texelSize = 1 / (sizeLod - 1); - const min = -texelSize / 2; - const max = 1 + texelSize / 2; - const uv1 = [min, min, max, min, max, max, min, min, max, max, min, max]; - const cubeFaces = 6; - const vertices = 6; - const positionSize = 3; - const uvSize = 2; - const faceIndexSize = 1; - const position2 = new Float32Array(positionSize * vertices * cubeFaces); - const uv = new Float32Array(uvSize * vertices * cubeFaces); - const faceIndex = new Float32Array(faceIndexSize * vertices * cubeFaces); - for (let face2 = 0; face2 < cubeFaces; face2++) { - const x = face2 % 3 * 2 / 3 - 1; - const y = face2 > 2 ? 0 : -1; - const coordinates = [ - x, - y, - 0, - x + 2 / 3, - y, - 0, - x + 2 / 3, - y + 1, - 0, - x, - y, - 0, - x + 2 / 3, - y + 1, - 0, - x, - y + 1, - 0 - ]; - position2.set(coordinates, positionSize * vertices * face2); - uv.set(uv1, uvSize * vertices * face2); - const fill = [face2, face2, face2, face2, face2, face2]; - faceIndex.set(fill, faceIndexSize * vertices * face2); - } - const planes = new BufferGeometry(); - planes.setAttribute("position", new BufferAttribute(position2, positionSize)); - planes.setAttribute("uv", new BufferAttribute(uv, uvSize)); - planes.setAttribute("faceIndex", new BufferAttribute(faceIndex, faceIndexSize)); - lodPlanes.push(planes); - if (lod > LOD_MIN) { - lod--; - } - } - return { lodPlanes, sizeLods, sigmas }; -} -function _createRenderTarget(width2, height2, params) { - const cubeUVRenderTarget = new WebGLRenderTarget(width2, height2, params); - cubeUVRenderTarget.texture.mapping = CubeUVReflectionMapping; - cubeUVRenderTarget.texture.name = "PMREM.cubeUv"; - cubeUVRenderTarget.scissorTest = true; - return cubeUVRenderTarget; -} -function _setViewport(target, x, y, width2, height2) { - target.viewport.set(x, y, width2, height2); - target.scissor.set(x, y, width2, height2); -} -function _getBlurShader(lodMax, width2, height2) { - const weights = new Float32Array(MAX_SAMPLES); - const poleAxis = new Vector3(0, 1, 0); - const shaderMaterial = new ShaderMaterial({ - name: "SphericalGaussianBlur", - defines: { - "n": MAX_SAMPLES, - "CUBEUV_TEXEL_WIDTH": 1 / width2, - "CUBEUV_TEXEL_HEIGHT": 1 / height2, - "CUBEUV_MAX_MIP": `${lodMax}.0` - }, - uniforms: { - "envMap": { value: null }, - "samples": { value: 1 }, - "weights": { value: weights }, - "latitudinal": { value: false }, - "dTheta": { value: 0 }, - "mipInt": { value: 0 }, - "poleAxis": { value: poleAxis } - }, - vertexShader: _getCommonVertexShader(), - fragmentShader: ` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - uniform int samples; - uniform float weights[ n ]; - uniform bool latitudinal; - uniform float dTheta; - uniform float mipInt; - uniform vec3 poleAxis; - - #define ENVMAP_TYPE_CUBE_UV - #include - - vec3 getSample( float theta, vec3 axis ) { - - float cosTheta = cos( theta ); - // Rodrigues' axis-angle rotation - vec3 sampleDirection = vOutputDirection * cosTheta - + cross( axis, vOutputDirection ) * sin( theta ) - + axis * dot( axis, vOutputDirection ) * ( 1.0 - cosTheta ); - - return bilinearCubeUV( envMap, sampleDirection, mipInt ); - - } - - void main() { - - vec3 axis = latitudinal ? poleAxis : cross( poleAxis, vOutputDirection ); - - if ( all( equal( axis, vec3( 0.0 ) ) ) ) { - - axis = vec3( vOutputDirection.z, 0.0, - vOutputDirection.x ); - - } - - axis = normalize( axis ); - - gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 ); - gl_FragColor.rgb += weights[ 0 ] * getSample( 0.0, axis ); - - for ( int i = 1; i < n; i++ ) { - - if ( i >= samples ) { - - break; - - } - - float theta = dTheta * float( i ); - gl_FragColor.rgb += weights[ i ] * getSample( -1.0 * theta, axis ); - gl_FragColor.rgb += weights[ i ] * getSample( theta, axis ); - - } - - } - `, - blending: NoBlending, - depthTest: false, - depthWrite: false - }); - return shaderMaterial; -} -function _getEquirectMaterial() { - return new ShaderMaterial({ - name: "EquirectangularToCubeUV", - uniforms: { - "envMap": { value: null } - }, - vertexShader: _getCommonVertexShader(), - fragmentShader: ` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - - #include - - void main() { - - vec3 outputDirection = normalize( vOutputDirection ); - vec2 uv = equirectUv( outputDirection ); - - gl_FragColor = vec4( texture2D ( envMap, uv ).rgb, 1.0 ); - - } - `, - blending: NoBlending, - depthTest: false, - depthWrite: false - }); -} -function _getCubemapMaterial() { - return new ShaderMaterial({ - name: "CubemapToCubeUV", - uniforms: { - "envMap": { value: null }, - "flipEnvMap": { value: -1 } - }, - vertexShader: _getCommonVertexShader(), - fragmentShader: ` - - precision mediump float; - precision mediump int; - - uniform float flipEnvMap; - - varying vec3 vOutputDirection; - - uniform samplerCube envMap; - - void main() { - - gl_FragColor = textureCube( envMap, vec3( flipEnvMap * vOutputDirection.x, vOutputDirection.yz ) ); - - } - `, - blending: NoBlending, - depthTest: false, - depthWrite: false - }); -} -function _getCommonVertexShader() { - return ` - - precision mediump float; - precision mediump int; - - attribute float faceIndex; - - varying vec3 vOutputDirection; - - // RH coordinate system; PMREM face-indexing convention - vec3 getDirection( vec2 uv, float face ) { - - uv = 2.0 * uv - 1.0; - - vec3 direction = vec3( uv, 1.0 ); - - if ( face == 0.0 ) { - - direction = direction.zyx; // ( 1, v, u ) pos x - - } else if ( face == 1.0 ) { - - direction = direction.xzy; - direction.xz *= -1.0; // ( -u, 1, -v ) pos y - - } else if ( face == 2.0 ) { - - direction.x *= -1.0; // ( -u, v, 1 ) pos z - - } else if ( face == 3.0 ) { - - direction = direction.zyx; - direction.xz *= -1.0; // ( -1, v, -u ) neg x - - } else if ( face == 4.0 ) { - - direction = direction.xzy; - direction.xy *= -1.0; // ( -u, -1, v ) neg y - - } else if ( face == 5.0 ) { - - direction.z *= -1.0; // ( u, v, -1 ) neg z - - } - - return direction; - - } - - void main() { - - vOutputDirection = getDirection( uv, faceIndex ); - gl_Position = vec4( position, 1.0 ); - - } - `; -} -function WebGLCubeUVMaps(renderer) { - let cubeUVmaps = /* @__PURE__ */ new WeakMap(); - let pmremGenerator = null; - function get2(texture2) { - if (texture2 && texture2.isTexture) { - const mapping = texture2.mapping; - const isEquirectMap = mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping; - const isCubeMap = mapping === CubeReflectionMapping || mapping === CubeRefractionMapping; - if (isEquirectMap || isCubeMap) { - if (texture2.isRenderTargetTexture && texture2.needsPMREMUpdate === true) { - texture2.needsPMREMUpdate = false; - let renderTarget = cubeUVmaps.get(texture2); - if (pmremGenerator === null) - pmremGenerator = new PMREMGenerator(renderer); - renderTarget = isEquirectMap ? pmremGenerator.fromEquirectangular(texture2, renderTarget) : pmremGenerator.fromCubemap(texture2, renderTarget); - cubeUVmaps.set(texture2, renderTarget); - return renderTarget.texture; - } else { - if (cubeUVmaps.has(texture2)) { - return cubeUVmaps.get(texture2).texture; - } else { - const image2 = texture2.image; - if (isEquirectMap && image2 && image2.height > 0 || isCubeMap && image2 && isCubeTextureComplete(image2)) { - if (pmremGenerator === null) - pmremGenerator = new PMREMGenerator(renderer); - const renderTarget = isEquirectMap ? pmremGenerator.fromEquirectangular(texture2) : pmremGenerator.fromCubemap(texture2); - cubeUVmaps.set(texture2, renderTarget); - texture2.addEventListener("dispose", onTextureDispose); - return renderTarget.texture; - } else { - return null; - } - } - } - } + e.preventDefault(); + e.stopPropagation(); + return false; } - return texture2; } - function isCubeTextureComplete(image2) { - let count = 0; - const length2 = 6; - for (let i = 0; i < length2; i++) { - if (image2[i] !== void 0) - count++; - } - return count === length2; + refresh() { + super.refresh(); + this.refs.$selector.val(this.state.selector); + this.children.$propertyEditor.trigger("showCSSPropertyEditor", this.state.properties); } - function onTextureDispose(event) { - const texture2 = event.target; - texture2.removeEventListener("dispose", onTextureDispose); - const cubemapUV = cubeUVmaps.get(texture2); - if (cubemapUV !== void 0) { - cubeUVmaps.delete(texture2); - cubemapUV.dispose(); - } + [SUBSCRIBE("changePropertyEditor")](properties) { + this.updateData({ + properties + }); } - function dispose() { - cubeUVmaps = /* @__PURE__ */ new WeakMap(); - if (pmremGenerator !== null) { - pmremGenerator.dispose(); - pmremGenerator = null; - } + [SUBSCRIBE("showSelectorPopup")](data) { + this.setState(data); + this.refresh(); + this.show(250); } - return { - get: get2, - dispose - }; } -function WebGLExtensions(gl) { - const extensions = {}; - function getExtension(name) { - if (extensions[name] !== void 0) { - return extensions[name]; - } - let extension; - switch (name) { - case "WEBGL_depth_texture": - extension = gl.getExtension("WEBGL_depth_texture") || gl.getExtension("MOZ_WEBGL_depth_texture") || gl.getExtension("WEBKIT_WEBGL_depth_texture"); - break; - case "EXT_texture_filter_anisotropic": - extension = gl.getExtension("EXT_texture_filter_anisotropic") || gl.getExtension("MOZ_EXT_texture_filter_anisotropic") || gl.getExtension("WEBKIT_EXT_texture_filter_anisotropic"); - break; - case "WEBGL_compressed_texture_s3tc": - extension = gl.getExtension("WEBGL_compressed_texture_s3tc") || gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") || gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc"); - break; - case "WEBGL_compressed_texture_pvrtc": - extension = gl.getExtension("WEBGL_compressed_texture_pvrtc") || gl.getExtension("WEBKIT_WEBGL_compressed_texture_pvrtc"); - break; - default: - extension = gl.getExtension(name); - } - extensions[name] = extension; - return extension; +var SelectorProperty$1 = ""; +const selectorList = [ + "", + ":hover", + ":active", + ":before", + ":after", + ":first-child", + ":last-child", + ":link", + ":active", + ":focus" +].map((value) => ({ value })); +class SelectorProperty extends BaseProperty { + getTitle() { + return this.$i18n("selector.property.title"); + } + getBody() { + return `
`; + } + getTools() { + return ` +
+ ${createComponent("SelectEditor", { + ref: "$select", + key: "selector", + "none-value": "selector", + options: selectorList + })} +
+ + `; + } + makeSelectorTemplate(selector2, index2) { + index2 = index2.toString(); + return ` +
+
+
+ ${selector2.selector || `<${this.$i18n("selector.property.none")}>`} +
+
+ +
+
+
+ `; + } + [CLICK("$selectorList .selector-item .name")](e) { + var index2 = +e.$dt.closest("selector-item").attr("data-index"); + var current = this.$context.selection.current; + if (!current) + return; + this.viewSelectorPicker(index2); + } + [CLICK("$selectorList .selector-item .del") + PREVENT + STOP](e) { + var removeIndex = e.$dt.attr("data-index"); + var current = this.$context.selection.current; + if (!current) + return; + current.removeSelector(removeIndex); + this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); + this.refresh(); } - return { - has: function(name) { - return getExtension(name) !== null; - }, - init: function(capabilities) { - if (capabilities.isWebGL2) { - getExtension("EXT_color_buffer_float"); - } else { - getExtension("WEBGL_depth_texture"); - getExtension("OES_texture_float"); - getExtension("OES_texture_half_float"); - getExtension("OES_texture_half_float_linear"); - getExtension("OES_standard_derivatives"); - getExtension("OES_element_index_uint"); - getExtension("OES_vertex_array_object"); - getExtension("ANGLE_instanced_arrays"); - } - getExtension("OES_texture_float_linear"); - getExtension("EXT_color_buffer_half_float"); - getExtension("WEBGL_multisampled_render_to_texture"); - }, - get: function(name) { - const extension = getExtension(name); - if (extension === null) { - console.warn("THREE.WebGLRenderer: " + name + " extension not supported."); - } - return extension; - } - }; -} -function WebGLGeometries(gl, attributes, info, bindingStates) { - const geometries = {}; - const wireframeAttributes = /* @__PURE__ */ new WeakMap(); - function onGeometryDispose(event) { - const geometry = event.target; - if (geometry.index !== null) { - attributes.remove(geometry.index); - } - for (const name in geometry.attributes) { - attributes.remove(geometry.attributes[name]); - } - geometry.removeEventListener("dispose", onGeometryDispose); - delete geometries[geometry.id]; - const attribute = wireframeAttributes.get(geometry); - if (attribute) { - attributes.remove(attribute); - wireframeAttributes.delete(geometry); - } - bindingStates.releaseStatesOfGeometry(geometry); - if (geometry.isInstancedBufferGeometry === true) { - delete geometry._maxInstanceCount; - } - info.memory.geometries--; - } - function get2(object, geometry) { - if (geometries[geometry.id] === true) - return geometry; - geometry.addEventListener("dispose", onGeometryDispose); - geometries[geometry.id] = true; - info.memory.geometries++; - return geometry; - } - function update2(geometry) { - const geometryAttributes = geometry.attributes; - for (const name in geometryAttributes) { - attributes.update(geometryAttributes[name], 34962); - } - const morphAttributes = geometry.morphAttributes; - for (const name in morphAttributes) { - const array = morphAttributes[name]; - for (let i = 0, l = array.length; i < l; i++) { - attributes.update(array[i], 34962); - } - } - } - function updateWireframeAttribute(geometry) { - const indices = []; - const geometryIndex = geometry.index; - const geometryPosition = geometry.attributes.position; - let version = 0; - if (geometryIndex !== null) { - const array = geometryIndex.array; - version = geometryIndex.version; - for (let i = 0, l = array.length; i < l; i += 3) { - const a = array[i + 0]; - const b = array[i + 1]; - const c2 = array[i + 2]; - indices.push(a, b, b, c2, c2, a); - } - } else { - const array = geometryPosition.array; - version = geometryPosition.version; - for (let i = 0, l = array.length / 3 - 1; i < l; i += 3) { - const a = i + 0; - const b = i + 1; - const c2 = i + 2; - indices.push(a, b, b, c2, c2, a); - } - } - const attribute = new (arrayNeedsUint32(indices) ? Uint32BufferAttribute : Uint16BufferAttribute)(indices, 1); - attribute.version = version; - const previousAttribute = wireframeAttributes.get(geometry); - if (previousAttribute) - attributes.remove(previousAttribute); - wireframeAttributes.set(geometry, attribute); - } - function getWireframeAttribute(geometry) { - const currentAttribute = wireframeAttributes.get(geometry); - if (currentAttribute) { - const geometryIndex = geometry.index; - if (geometryIndex !== null) { - if (currentAttribute.version < geometryIndex.version) { - updateWireframeAttribute(geometry); - } - } - } else { - updateWireframeAttribute(geometry); - } - return wireframeAttributes.get(geometry); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShowIsNot([ + "project", + "svg-path", + "svg-brush", + "svg-textpath", + "svg-text" + ]); } - return { - get: get2, - update: update2, - getWireframeAttribute - }; -} -function WebGLIndexedBufferRenderer(gl, extensions, info, capabilities) { - const isWebGL2 = capabilities.isWebGL2; - let mode; - function setMode(value) { - mode = value; + [LOAD("$selectorList")]() { + var current = this.$context.selection.current; + if (!current) + return ""; + var selectors = current.selector ? Selector.parseStyle(current) : current.selectors; + return (selectors || []).map((selector2, index2) => { + return this.makeSelectorTemplate(selector2, index2); + }); } - let type, bytesPerElement; - function setIndex(value) { - type = value.type; - bytesPerElement = value.bytesPerElement; + [DRAGSTART("$selectorList .selector-item .title")](e) { + this.startIndex = +e.$dt.attr("data-index"); } - function render(start2, count) { - gl.drawElements(mode, count, type, start2 * bytesPerElement); - info.update(count, mode, 1); + [DRAGOVER("$selectorList .selector-item") + PREVENT]() { } - function renderInstances(start2, count, primcount) { - if (primcount === 0) + [DROP("$selectorList .selector-item") + PREVENT](e) { + var targetIndex = +e.$dt.attr("data-index"); + var current = this.$context.selection.current; + if (!current) return; - let extension, methodName; - if (isWebGL2) { - extension = gl; - methodName = "drawElementsInstanced"; - } else { - extension = extensions.get("ANGLE_instanced_arrays"); - methodName = "drawElementsInstancedANGLE"; - if (extension === null) { - console.error("THREE.WebGLIndexedBufferRenderer: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays."); - return; - } - } - extension[methodName](mode, count, type, start2 * bytesPerElement, primcount); - info.update(count, mode, primcount); + current.sortSelector(this.startIndex, targetIndex); + this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); + this.refresh(); } - this.setMode = setMode; - this.setIndex = setIndex; - this.render = render; - this.renderInstances = renderInstances; -} -function WebGLInfo(gl) { - const memory = { - geometries: 0, - textures: 0 - }; - const render = { - frame: 0, - calls: 0, - triangles: 0, - points: 0, - lines: 0 - }; - function update2(count, mode, instanceCount) { - render.calls++; - switch (mode) { - case 4: - render.triangles += instanceCount * (count / 3); - break; - case 1: - render.lines += instanceCount * (count / 2); - break; - case 3: - render.lines += instanceCount * (count - 1); - break; - case 2: - render.lines += instanceCount * count; - break; - case 0: - render.points += instanceCount * count; - break; - default: - console.error("THREE.WebGLInfo: Unknown draw mode:", mode); - break; + [CLICK("$add")]() { + var current = this.$context.selection.current; + if (current) { + current.createSelector({ + selector: this.children.$select.getValue() + }); + this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); } + this.refresh(); } - function reset() { - render.frame++; - render.calls = 0; - render.triangles = 0; - render.points = 0; - render.lines = 0; - } - return { - memory, - render, - programs: null, - autoReset: true, - reset, - update: update2 - }; -} -function numericalSort(a, b) { - return a[0] - b[0]; -} -function absNumericalSort(a, b) { - return Math.abs(b[1]) - Math.abs(a[1]); -} -function denormalize(morph, attribute) { - let denominator = 1; - const array = attribute.isInterleavedBufferAttribute ? attribute.data.array : attribute.array; - if (array instanceof Int8Array) - denominator = 127; - else if (array instanceof Int16Array) - denominator = 32767; - else if (array instanceof Int32Array) - denominator = 2147483647; - else - console.error("THREE.WebGLMorphtargets: Unsupported morph attribute data type: ", array); - morph.divideScalar(denominator); -} -function WebGLMorphtargets(gl, capabilities, textures) { - const influencesList = {}; - const morphInfluences = new Float32Array(8); - const morphTextures = /* @__PURE__ */ new WeakMap(); - const morph = new Vector4(); - const workInfluences = []; - for (let i = 0; i < 8; i++) { - workInfluences[i] = [i, 0]; - } - function update2(object, geometry, material, program) { - const objectInfluences = object.morphTargetInfluences; - if (capabilities.isWebGL2 === true) { - const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color; - const morphTargetsCount = morphAttribute !== void 0 ? morphAttribute.length : 0; - let entry = morphTextures.get(geometry); - if (entry === void 0 || entry.count !== morphTargetsCount) { - let disposeTexture = function() { - texture2.dispose(); - morphTextures.delete(geometry); - geometry.removeEventListener("dispose", disposeTexture); - }; - if (entry !== void 0) - entry.texture.dispose(); - const hasMorphPosition = geometry.morphAttributes.position !== void 0; - const hasMorphNormals = geometry.morphAttributes.normal !== void 0; - const hasMorphColors = geometry.morphAttributes.color !== void 0; - const morphTargets = geometry.morphAttributes.position || []; - const morphNormals = geometry.morphAttributes.normal || []; - const morphColors = geometry.morphAttributes.color || []; - let vertexDataCount = 0; - if (hasMorphPosition === true) - vertexDataCount = 1; - if (hasMorphNormals === true) - vertexDataCount = 2; - if (hasMorphColors === true) - vertexDataCount = 3; - let width2 = geometry.attributes.position.count * vertexDataCount; - let height2 = 1; - if (width2 > capabilities.maxTextureSize) { - height2 = Math.ceil(width2 / capabilities.maxTextureSize); - width2 = capabilities.maxTextureSize; - } - const buffer = new Float32Array(width2 * height2 * 4 * morphTargetsCount); - const texture2 = new DataArrayTexture(buffer, width2, height2, morphTargetsCount); - texture2.type = FloatType; - texture2.needsUpdate = true; - const vertexDataStride = vertexDataCount * 4; - for (let i = 0; i < morphTargetsCount; i++) { - const morphTarget = morphTargets[i]; - const morphNormal = morphNormals[i]; - const morphColor = morphColors[i]; - const offset = width2 * height2 * 4 * i; - for (let j = 0; j < morphTarget.count; j++) { - const stride = j * vertexDataStride; - if (hasMorphPosition === true) { - morph.fromBufferAttribute(morphTarget, j); - if (morphTarget.normalized === true) - denormalize(morph, morphTarget); - buffer[offset + stride + 0] = morph.x; - buffer[offset + stride + 1] = morph.y; - buffer[offset + stride + 2] = morph.z; - buffer[offset + stride + 3] = 0; - } - if (hasMorphNormals === true) { - morph.fromBufferAttribute(morphNormal, j); - if (morphNormal.normalized === true) - denormalize(morph, morphNormal); - buffer[offset + stride + 4] = morph.x; - buffer[offset + stride + 5] = morph.y; - buffer[offset + stride + 6] = morph.z; - buffer[offset + stride + 7] = 0; - } - if (hasMorphColors === true) { - morph.fromBufferAttribute(morphColor, j); - if (morphColor.normalized === true) - denormalize(morph, morphColor); - buffer[offset + stride + 8] = morph.x; - buffer[offset + stride + 9] = morph.y; - buffer[offset + stride + 10] = morph.z; - buffer[offset + stride + 11] = morphColor.itemSize === 4 ? morph.w : 1; - } - } - } - entry = { - count: morphTargetsCount, - texture: texture2, - size: new Vector2(width2, height2) - }; - morphTextures.set(geometry, entry); - geometry.addEventListener("dispose", disposeTexture); - } - let morphInfluencesSum = 0; - for (let i = 0; i < objectInfluences.length; i++) { - morphInfluencesSum += objectInfluences[i]; - } - const morphBaseInfluence = geometry.morphTargetsRelative ? 1 : 1 - morphInfluencesSum; - program.getUniforms().setValue(gl, "morphTargetBaseInfluence", morphBaseInfluence); - program.getUniforms().setValue(gl, "morphTargetInfluences", objectInfluences); - program.getUniforms().setValue(gl, "morphTargetsTexture", entry.texture, textures); - program.getUniforms().setValue(gl, "morphTargetsTextureSize", entry.size); - } else { - const length2 = objectInfluences === void 0 ? 0 : objectInfluences.length; - let influences = influencesList[geometry.id]; - if (influences === void 0 || influences.length !== length2) { - influences = []; - for (let i = 0; i < length2; i++) { - influences[i] = [i, 0]; - } - influencesList[geometry.id] = influences; - } - for (let i = 0; i < length2; i++) { - const influence = influences[i]; - influence[0] = i; - influence[1] = objectInfluences[i]; - } - influences.sort(absNumericalSort); - for (let i = 0; i < 8; i++) { - if (i < length2 && influences[i][1]) { - workInfluences[i][0] = influences[i][0]; - workInfluences[i][1] = influences[i][1]; - } else { - workInfluences[i][0] = Number.MAX_SAFE_INTEGER; - workInfluences[i][1] = 0; - } - } - workInfluences.sort(numericalSort); - const morphTargets = geometry.morphAttributes.position; - const morphNormals = geometry.morphAttributes.normal; - let morphInfluencesSum = 0; - for (let i = 0; i < 8; i++) { - const influence = workInfluences[i]; - const index2 = influence[0]; - const value = influence[1]; - if (index2 !== Number.MAX_SAFE_INTEGER && value) { - if (morphTargets && geometry.getAttribute("morphTarget" + i) !== morphTargets[index2]) { - geometry.setAttribute("morphTarget" + i, morphTargets[index2]); - } - if (morphNormals && geometry.getAttribute("morphNormal" + i) !== morphNormals[index2]) { - geometry.setAttribute("morphNormal" + i, morphNormals[index2]); - } - morphInfluences[i] = value; - morphInfluencesSum += value; - } else { - if (morphTargets && geometry.hasAttribute("morphTarget" + i) === true) { - geometry.deleteAttribute("morphTarget" + i); - } - if (morphNormals && geometry.hasAttribute("morphNormal" + i) === true) { - geometry.deleteAttribute("morphNormal" + i); - } - morphInfluences[i] = 0; - } - } - const morphBaseInfluence = geometry.morphTargetsRelative ? 1 : 1 - morphInfluencesSum; - program.getUniforms().setValue(gl, "morphTargetBaseInfluence", morphBaseInfluence); - program.getUniforms().setValue(gl, "morphTargetInfluences", morphInfluences); + viewSelectorPicker(index2) { + if (typeof this.selectedIndex === "number") { + this.selectItem(this.selectedIndex, false); } + this.selectedIndex = +index2; + this.selectItem(this.selectedIndex, true); + this.current = this.$context.selection.current; + if (!this.current) + return; + this.currentSelector = this.current.selectors[this.selectedIndex]; + this.viewSelectorPropertyPopup(); } - return { - update: update2 - }; -} -function WebGLObjects(gl, geometries, attributes, info) { - let updateMap = /* @__PURE__ */ new WeakMap(); - function update2(object) { - const frame = info.render.frame; - const geometry = object.geometry; - const buffergeometry = geometries.get(object, geometry); - if (updateMap.get(buffergeometry) !== frame) { - geometries.update(buffergeometry); - updateMap.set(buffergeometry, frame); + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.getRef("$selectorIndex", selectedIndex).addClass("selected"); + } else { + this.getRef("$selectorIndex", selectedIndex).removeClass("selected"); } - if (object.isInstancedMesh) { - if (object.hasEventListener("dispose", onInstancedMeshDispose) === false) { - object.addEventListener("dispose", onInstancedMeshDispose); - } - attributes.update(object.instanceMatrix, 34962); - if (object.instanceColor !== null) { - attributes.update(object.instanceColor, 34962); - } + if (this.current) { + this.current.selectors.forEach((it, index2) => { + it.selected = index2 === selectedIndex; + }); } - return buffergeometry; } - function dispose() { - updateMap = /* @__PURE__ */ new WeakMap(); + viewSelectorPropertyPopup(position2) { + this.current = this.$context.selection.current; + if (!this.current) + return; + this.currentSelector = this.current.selectors[this.selectedIndex]; + const back = this.currentSelector; + const selector2 = back.selector; + const properties = back.properties; + this.emit("showSelectorPopup", { + position: position2, + selector: selector2, + properties + }); } - function onInstancedMeshDispose(event) { - const instancedMesh = event.target; - instancedMesh.removeEventListener("dispose", onInstancedMeshDispose); - attributes.remove(instancedMesh.instanceMatrix); - if (instancedMesh.instanceColor !== null) - attributes.remove(instancedMesh.instanceColor); + [SUBSCRIBE("changeSelectorPopup")](data) { + this.current = this.$context.selection.current; + if (!this.current) + return; + this.currentselector = this.current.selectors[this.selectedIndex]; + if (this.currentSelector) { + this.currentSelector.reset(data); + } + this.refresh(); + this.$commands.executeCommand("setAttribute", "change selectors", this.$context.selection.pack("selectors")); } - return { - update: update2, - dispose - }; } -const emptyTexture = new Texture(); -const emptyArrayTexture = new DataArrayTexture(); -const empty3dTexture = new Data3DTexture(); -const emptyCubeTexture = new CubeTexture(); -const arrayCacheF32 = []; -const arrayCacheI32 = []; -const mat4array = new Float32Array(16); -const mat3array = new Float32Array(9); -const mat2array = new Float32Array(4); -function flatten(array, nBlocks, blockSize) { - const firstElem = array[0]; - if (firstElem <= 0 || firstElem > 0) - return array; - const n = nBlocks * blockSize; - let r = arrayCacheF32[n]; - if (r === void 0) { - r = new Float32Array(n); - arrayCacheF32[n] = r; - } - if (nBlocks !== 0) { - firstElem.toArray(r, 0); - for (let i = 1, offset = 0; i !== nBlocks; ++i) { - offset += blockSize; - array[i].toArray(r, offset); - } - } - return r; -} -function arraysEqual(a, b) { - if (a.length !== b.length) - return false; - for (let i = 0, l = a.length; i < l; i++) { - if (a[i] !== b[i]) - return false; - } - return true; +function selector(editor) { + editor.registerUI("inspector.tab.transition", { + SelectorProperty + }); + editor.registerUI("popup", { + SelectorPopup + }); } -function copyArray(a, b) { - for (let i = 0, l = b.length; i < l; i++) { - a[i] = b[i]; +var SVGFilterAssetsProperty$1 = ""; +class SVGFilterAssetsProperty extends BaseProperty { + getTitle() { + return this.$i18n("svgfilter.asset.property.title"); } -} -function allocTexUnits(textures, n) { - let r = arrayCacheI32[n]; - if (r === void 0) { - r = new Int32Array(n); - arrayCacheI32[n] = r; + initState() { + return { + mode: "grid" + }; } - for (let i = 0; i !== n; ++i) { - r[i] = textures.allocateTextureUnit(); + getClassName() { + return "elf--svgfilter-assets-property"; } - return r; -} -function setValueV1f(gl, v) { - const cache = this.cache; - if (cache[0] === v) - return; - gl.uniform1f(this.addr, v); - cache[0] = v; -} -function setValueV2f(gl, v) { - const cache = this.cache; - if (v.x !== void 0) { - if (cache[0] !== v.x || cache[1] !== v.y) { - gl.uniform2f(this.addr, v.x, v.y); - cache[0] = v.x; - cache[1] = v.y; - } - } else { - if (arraysEqual(cache, v)) - return; - gl.uniform2fv(this.addr, v); - copyArray(cache, v); - } -} -function setValueV3f(gl, v) { - const cache = this.cache; - if (v.x !== void 0) { - if (cache[0] !== v.x || cache[1] !== v.y || cache[2] !== v.z) { - gl.uniform3f(this.addr, v.x, v.y, v.z); - cache[0] = v.x; - cache[1] = v.y; - cache[2] = v.z; - } - } else if (v.r !== void 0) { - if (cache[0] !== v.r || cache[1] !== v.g || cache[2] !== v.b) { - gl.uniform3f(this.addr, v.r, v.g, v.b); - cache[0] = v.r; - cache[1] = v.g; - cache[2] = v.b; - } - } else { - if (arraysEqual(cache, v)) - return; - gl.uniform3fv(this.addr, v); - copyArray(cache, v); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.show(); } -} -function setValueV4f(gl, v) { - const cache = this.cache; - if (v.x !== void 0) { - if (cache[0] !== v.x || cache[1] !== v.y || cache[2] !== v.z || cache[3] !== v.w) { - gl.uniform4f(this.addr, v.x, v.y, v.z, v.w); - cache[0] = v.x; - cache[1] = v.y; - cache[2] = v.z; - cache[3] = v.w; - } - } else { - if (arraysEqual(cache, v)) - return; - gl.uniform4fv(this.addr, v); - copyArray(cache, v); + getBody() { + return ` +
+
+
+ `; } -} -function setValueM2(gl, v) { - const cache = this.cache; - const elements = v.elements; - if (elements === void 0) { - if (arraysEqual(cache, v)) - return; - gl.uniformMatrix2fv(this.addr, false, v); - copyArray(cache, v); - } else { - if (arraysEqual(cache, elements)) - return; - mat2array.set(elements); - gl.uniformMatrix2fv(this.addr, false, mat2array); - copyArray(cache, elements); + [LOAD("$svgfilterList")]() { + var current = this.$context.selection.currentProject || { svgfilters: [] }; + var svgfilters = current.svgfilters; + var results = svgfilters.map((svgfilter, index2) => { + var filters = svgfilter.filters.map((filter2) => { + return SVGFilter.parse(filter2); + }); + return ` +
+
+ + + ${filters.join("")} + + +
+
+
+
+ +
+
+
+ + +
+
+ `; + }); + results.push(`
`); + return results; } -} -function setValueM3(gl, v) { - const cache = this.cache; - const elements = v.elements; - if (elements === void 0) { - if (arraysEqual(cache, v)) - return; - gl.uniformMatrix3fv(this.addr, false, v); - copyArray(cache, v); - } else { - if (arraysEqual(cache, elements)) - return; - mat3array.set(elements); - gl.uniformMatrix3fv(this.addr, false, mat3array); - copyArray(cache, elements); + executeSVGFilter(callback, isRefresh = true, isEmit = true) { + var project2 = this.$context.selection.currentProject; + if (project2) { + callback && callback(project2); + if (isRefresh) + this.refresh(); + if (isEmit) + this.emit("refreshSVGFilterAssets"); + } else { + window.alert("Please select a project."); + } } -} -function setValueM4(gl, v) { - const cache = this.cache; - const elements = v.elements; - if (elements === void 0) { - if (arraysEqual(cache, v)) - return; - gl.uniformMatrix4fv(this.addr, false, v); - copyArray(cache, v); - } else { - if (arraysEqual(cache, elements)) - return; - mat4array.set(elements); - gl.uniformMatrix4fv(this.addr, false, mat4array); - copyArray(cache, elements); + [CLICK("$svgfilterList .add-svgfilter-item")]() { + this.executeSVGFilter((project2) => { + project2.createSVGFilter({ + id: uuidShort(), + filters: [] + }); + }); } -} -function setValueV1i(gl, v) { - const cache = this.cache; - if (cache[0] === v) - return; - gl.uniform1i(this.addr, v); - cache[0] = v; -} -function setValueV2i(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform2iv(this.addr, v); - copyArray(cache, v); -} -function setValueV3i(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform3iv(this.addr, v); - copyArray(cache, v); -} -function setValueV4i(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform4iv(this.addr, v); - copyArray(cache, v); -} -function setValueV1ui(gl, v) { - const cache = this.cache; - if (cache[0] === v) - return; - gl.uniform1ui(this.addr, v); - cache[0] = v; -} -function setValueV2ui(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform2uiv(this.addr, v); - copyArray(cache, v); -} -function setValueV3ui(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform3uiv(this.addr, v); - copyArray(cache, v); -} -function setValueV4ui(gl, v) { - const cache = this.cache; - if (arraysEqual(cache, v)) - return; - gl.uniform4uiv(this.addr, v); - copyArray(cache, v); -} -function setValueT1(gl, v, textures) { - const cache = this.cache; - const unit = textures.allocateTextureUnit(); - if (cache[0] !== unit) { - gl.uniform1i(this.addr, unit); - cache[0] = unit; - } - textures.setTexture2D(v || emptyTexture, unit); -} -function setValueT3D1(gl, v, textures) { - const cache = this.cache; - const unit = textures.allocateTextureUnit(); - if (cache[0] !== unit) { - gl.uniform1i(this.addr, unit); - cache[0] = unit; - } - textures.setTexture3D(v || empty3dTexture, unit); -} -function setValueT6(gl, v, textures) { - const cache = this.cache; - const unit = textures.allocateTextureUnit(); - if (cache[0] !== unit) { - gl.uniform1i(this.addr, unit); - cache[0] = unit; - } - textures.setTextureCube(v || emptyCubeTexture, unit); -} -function setValueT2DArray1(gl, v, textures) { - const cache = this.cache; - const unit = textures.allocateTextureUnit(); - if (cache[0] !== unit) { - gl.uniform1i(this.addr, unit); - cache[0] = unit; - } - textures.setTexture2DArray(v || emptyArrayTexture, unit); -} -function getSingularSetter(type) { - switch (type) { - case 5126: - return setValueV1f; - case 35664: - return setValueV2f; - case 35665: - return setValueV3f; - case 35666: - return setValueV4f; - case 35674: - return setValueM2; - case 35675: - return setValueM3; - case 35676: - return setValueM4; - case 5124: - case 35670: - return setValueV1i; - case 35667: - case 35671: - return setValueV2i; - case 35668: - case 35672: - return setValueV3i; - case 35669: - case 35673: - return setValueV4i; - case 5125: - return setValueV1ui; - case 36294: - return setValueV2ui; - case 36295: - return setValueV3ui; - case 36296: - return setValueV4ui; - case 35678: - case 36198: - case 36298: - case 36306: - case 35682: - return setValueT1; - case 35679: - case 36299: - case 36307: - return setValueT3D1; - case 35680: - case 36300: - case 36308: - case 36293: - return setValueT6; - case 36289: - case 36303: - case 36311: - case 36292: - return setValueT2DArray1; - } -} -function setValueV1fArray(gl, v) { - gl.uniform1fv(this.addr, v); -} -function setValueV2fArray(gl, v) { - const data = flatten(v, this.size, 2); - gl.uniform2fv(this.addr, data); -} -function setValueV3fArray(gl, v) { - const data = flatten(v, this.size, 3); - gl.uniform3fv(this.addr, data); -} -function setValueV4fArray(gl, v) { - const data = flatten(v, this.size, 4); - gl.uniform4fv(this.addr, data); -} -function setValueM2Array(gl, v) { - const data = flatten(v, this.size, 4); - gl.uniformMatrix2fv(this.addr, false, data); -} -function setValueM3Array(gl, v) { - const data = flatten(v, this.size, 9); - gl.uniformMatrix3fv(this.addr, false, data); -} -function setValueM4Array(gl, v) { - const data = flatten(v, this.size, 16); - gl.uniformMatrix4fv(this.addr, false, data); -} -function setValueV1iArray(gl, v) { - gl.uniform1iv(this.addr, v); -} -function setValueV2iArray(gl, v) { - gl.uniform2iv(this.addr, v); -} -function setValueV3iArray(gl, v) { - gl.uniform3iv(this.addr, v); -} -function setValueV4iArray(gl, v) { - gl.uniform4iv(this.addr, v); -} -function setValueV1uiArray(gl, v) { - gl.uniform1uiv(this.addr, v); -} -function setValueV2uiArray(gl, v) { - gl.uniform2uiv(this.addr, v); -} -function setValueV3uiArray(gl, v) { - gl.uniform3uiv(this.addr, v); -} -function setValueV4uiArray(gl, v) { - gl.uniform4uiv(this.addr, v); -} -function setValueT1Array(gl, v, textures) { - const n = v.length; - const units = allocTexUnits(textures, n); - gl.uniform1iv(this.addr, units); - for (let i = 0; i !== n; ++i) { - textures.setTexture2D(v[i] || emptyTexture, units[i]); - } -} -function setValueT3DArray(gl, v, textures) { - const n = v.length; - const units = allocTexUnits(textures, n); - gl.uniform1iv(this.addr, units); - for (let i = 0; i !== n; ++i) { - textures.setTexture3D(v[i] || empty3dTexture, units[i]); - } -} -function setValueT6Array(gl, v, textures) { - const n = v.length; - const units = allocTexUnits(textures, n); - gl.uniform1iv(this.addr, units); - for (let i = 0; i !== n; ++i) { - textures.setTextureCube(v[i] || emptyCubeTexture, units[i]); - } -} -function setValueT2DArrayArray(gl, v, textures) { - const n = v.length; - const units = allocTexUnits(textures, n); - gl.uniform1iv(this.addr, units); - for (let i = 0; i !== n; ++i) { - textures.setTexture2DArray(v[i] || emptyArrayTexture, units[i]); + [CLICK("$svgfilterList .remove")](e) { + var $item = e.$dt.closest("svgfilter-item"); + var index2 = +$item.attr("data-index"); + this.executeSVGFilter((project2) => { + project2.removeSVGFilter(index2); + }); } -} -function getPureArraySetter(type) { - switch (type) { - case 5126: - return setValueV1fArray; - case 35664: - return setValueV2fArray; - case 35665: - return setValueV3fArray; - case 35666: - return setValueV4fArray; - case 35674: - return setValueM2Array; - case 35675: - return setValueM3Array; - case 35676: - return setValueM4Array; - case 5124: - case 35670: - return setValueV1iArray; - case 35667: - case 35671: - return setValueV2iArray; - case 35668: - case 35672: - return setValueV3iArray; - case 35669: - case 35673: - return setValueV4iArray; - case 5125: - return setValueV1uiArray; - case 36294: - return setValueV2uiArray; - case 36295: - return setValueV3uiArray; - case 36296: - return setValueV4uiArray; - case 35678: - case 36198: - case 36298: - case 36306: - case 35682: - return setValueT1Array; - case 35679: - case 36299: - case 36307: - return setValueT3DArray; - case 35680: - case 36300: - case 36308: - case 36293: - return setValueT6Array; - case 36289: - case 36303: - case 36311: - case 36292: - return setValueT2DArrayArray; - } -} -function SingleUniform(id, activeInfo, addr) { - this.id = id; - this.addr = addr; - this.cache = []; - this.setValue = getSingularSetter(activeInfo.type); -} -function PureArrayUniform(id, activeInfo, addr) { - this.id = id; - this.addr = addr; - this.cache = []; - this.size = activeInfo.size; - this.setValue = getPureArraySetter(activeInfo.type); -} -PureArrayUniform.prototype.updateCache = function(data) { - const cache = this.cache; - if (data instanceof Float32Array && cache.length !== data.length) { - this.cache = new Float32Array(data.length); - } - copyArray(cache, data); -}; -function StructuredUniform(id) { - this.id = id; - this.seq = []; - this.map = {}; -} -StructuredUniform.prototype.setValue = function(gl, value, textures) { - const seq = this.seq; - for (let i = 0, n = seq.length; i !== n; ++i) { - const u = seq[i]; - u.setValue(gl, value[u.id], textures); - } -}; -const RePathPart = /(\w+)(\])?(\[|\.)?/g; -function addUniform(container, uniformObject) { - container.seq.push(uniformObject); - container.map[uniformObject.id] = uniformObject; -} -function parseUniform(activeInfo, addr, container) { - const path = activeInfo.name, pathLength = path.length; - RePathPart.lastIndex = 0; - while (true) { - const match = RePathPart.exec(path), matchEnd = RePathPart.lastIndex; - let id = match[1]; - const idIsIndex = match[2] === "]", subscript = match[3]; - if (idIsIndex) - id = id | 0; - if (subscript === void 0 || subscript === "[" && matchEnd + 2 === pathLength) { - addUniform(container, subscript === void 0 ? new SingleUniform(id, activeInfo, addr) : new PureArrayUniform(id, activeInfo, addr)); - break; - } else { - const map2 = container.map; - let next = map2[id]; - if (next === void 0) { - next = new StructuredUniform(id); - addUniform(container, next); - } - container = next; - } - } -} -function WebGLUniforms(gl, program) { - this.seq = []; - this.map = {}; - const n = gl.getProgramParameter(program, 35718); - for (let i = 0; i < n; ++i) { - const info = gl.getActiveUniform(program, i), addr = gl.getUniformLocation(program, info.name); - parseUniform(info, addr, this); - } -} -WebGLUniforms.prototype.setValue = function(gl, name, value, textures) { - const u = this.map[name]; - if (u !== void 0) - u.setValue(gl, value, textures); -}; -WebGLUniforms.prototype.setOptional = function(gl, object, name) { - const v = object[name]; - if (v !== void 0) - this.setValue(gl, name, v); -}; -WebGLUniforms.upload = function(gl, seq, values, textures) { - for (let i = 0, n = seq.length; i !== n; ++i) { - const u = seq[i], v = values[u.id]; - if (v.needsUpdate !== false) { - u.setValue(gl, v.value, textures); - } - } -}; -WebGLUniforms.seqWithValue = function(seq, values) { - const r = []; - for (let i = 0, n = seq.length; i !== n; ++i) { - const u = seq[i]; - if (u.id in values) - r.push(u); - } - return r; -}; -function WebGLShader(gl, type, string) { - const shader = gl.createShader(type); - gl.shaderSource(shader, string); - gl.compileShader(shader); - return shader; -} -let programIdCount = 0; -function handleSource(string, errorLine) { - const lines = string.split("\n"); - const lines2 = []; - const from = Math.max(errorLine - 6, 0); - const to = Math.min(errorLine + 6, lines.length); - for (let i = from; i < to; i++) { - lines2.push(i + 1 + ": " + lines[i]); - } - return lines2.join("\n"); -} -function getEncodingComponents(encoding) { - switch (encoding) { - case LinearEncoding: - return ["Linear", "( value )"]; - case sRGBEncoding: - return ["sRGB", "( value )"]; - default: - console.warn("THREE.WebGLProgram: Unsupported encoding:", encoding); - return ["Linear", "( value )"]; + [CLICK("$svgfilterList .copy")](e) { + var $item = e.$dt.closest("svgfilter-item"); + var index2 = +$item.attr("data-index"); + this.executeSVGFilter((project2) => { + project2.copySVGFilter(index2); + }); } -} -function getShaderErrors(gl, shader, type) { - const status = gl.getShaderParameter(shader, 35713); - const errors = gl.getShaderInfoLog(shader).trim(); - if (status && errors === "") - return ""; - const errorLine = parseInt(/ERROR: 0:(\d+)/.exec(errors)[1]); - return type.toUpperCase() + "\n\n" + errors + "\n\n" + handleSource(gl.getShaderSource(shader), errorLine); -} -function getTexelEncodingFunction(functionName, encoding) { - const components = getEncodingComponents(encoding); - return "vec4 " + functionName + "( vec4 value ) { return LinearTo" + components[0] + components[1] + "; }"; -} -function getToneMappingFunction(functionName, toneMapping) { - let toneMappingName; - switch (toneMapping) { - case LinearToneMapping: - toneMappingName = "Linear"; - break; - case ReinhardToneMapping: - toneMappingName = "Reinhard"; - break; - case CineonToneMapping: - toneMappingName = "OptimizedCineon"; - break; - case ACESFilmicToneMapping: - toneMappingName = "ACESFilmic"; - break; - case CustomToneMapping: - toneMappingName = "Custom"; - break; - default: - console.warn("THREE.WebGLProgram: Unsupported toneMapping:", toneMapping); - toneMappingName = "Linear"; + [INPUT("$svgfilterList input")](e) { + var $item = e.$dt.closest("svgfilter-item"); + var index2 = +$item.attr("data-index"); + var obj2 = e.$dt.attrKeyValue("data-key"); + this.executeSVGFilter((project2) => { + project2.setSVGFilterValue(index2, obj2); + this.emit("refreshSVGArea"); + }, false); } - return "vec3 " + functionName + "( vec3 color ) { return " + toneMappingName + "ToneMapping( color ); }"; -} -function generateExtensions(parameters) { - const chunks = [ - parameters.extensionDerivatives || !!parameters.envMapCubeUVHeight || parameters.bumpMap || parameters.tangentSpaceNormalMap || parameters.clearcoatNormalMap || parameters.flatShading || parameters.shaderID === "physical" ? "#extension GL_OES_standard_derivatives : enable" : "", - (parameters.extensionFragDepth || parameters.logarithmicDepthBuffer) && parameters.rendererExtensionFragDepth ? "#extension GL_EXT_frag_depth : enable" : "", - parameters.extensionDrawBuffers && parameters.rendererExtensionDrawBuffers ? "#extension GL_EXT_draw_buffers : require" : "", - (parameters.extensionShaderTextureLOD || parameters.envMap || parameters.transmission) && parameters.rendererExtensionShaderTextureLod ? "#extension GL_EXT_shader_texture_lod : enable" : "" - ]; - return chunks.filter(filterEmptyLine).join("\n"); -} -function generateDefines(defines) { - const chunks = []; - for (const name in defines) { - const value = defines[name]; - if (value === false) - continue; - chunks.push("#define " + name + " " + value); - } - return chunks.join("\n"); -} -function fetchAttributeLocations(gl, program) { - const attributes = {}; - const n = gl.getProgramParameter(program, 35721); - for (let i = 0; i < n; i++) { - const info = gl.getActiveAttrib(program, i); - const name = info.name; - let locationSize = 1; - if (info.type === 35674) - locationSize = 2; - if (info.type === 35675) - locationSize = 3; - if (info.type === 35676) - locationSize = 4; - attributes[name] = { - type: info.type, - location: gl.getAttribLocation(program, name), - locationSize + [CLICK("$svgfilterList .preview")](e) { + var $item = e.$dt.closest("svgfilter-item"); + var index2 = +$item.attr("data-index"); + this.state.$item = $item; + this.state.$el = e.$dt.$(".svgfilter-view"); + var currentProject = this.$context.selection.currentProject || { + svgfilters: [] }; + var svgfilter = currentProject.svgfilters[index2]; + this.emit("showSVGFilterPopup", { + changeEvent: "changeSVGFilterAssets", + id: this.id, + index: index2, + filters: svgfilter.filters + }); } - return attributes; -} -function filterEmptyLine(string) { - return string !== ""; -} -function replaceLightNums(string, parameters) { - return string.replace(/NUM_DIR_LIGHTS/g, parameters.numDirLights).replace(/NUM_SPOT_LIGHTS/g, parameters.numSpotLights).replace(/NUM_RECT_AREA_LIGHTS/g, parameters.numRectAreaLights).replace(/NUM_POINT_LIGHTS/g, parameters.numPointLights).replace(/NUM_HEMI_LIGHTS/g, parameters.numHemiLights).replace(/NUM_DIR_LIGHT_SHADOWS/g, parameters.numDirLightShadows).replace(/NUM_SPOT_LIGHT_SHADOWS/g, parameters.numSpotLightShadows).replace(/NUM_POINT_LIGHT_SHADOWS/g, parameters.numPointLightShadows); -} -function replaceClippingPlaneNums(string, parameters) { - return string.replace(/NUM_CLIPPING_PLANES/g, parameters.numClippingPlanes).replace(/UNION_CLIPPING_PLANES/g, parameters.numClippingPlanes - parameters.numClipIntersection); -} -const includePattern = /^[ \t]*#include +<([\w\d./]+)>/gm; -function resolveIncludes(string) { - return string.replace(includePattern, includeReplacer); -} -function includeReplacer(match, include) { - const string = ShaderChunk[include]; - if (string === void 0) { - throw new Error("Can not resolve #include <" + include + ">"); - } - return resolveIncludes(string); -} -const deprecatedUnrollLoopPattern = /#pragma unroll_loop[\s]+?for \( int i \= (\d+)\; i < (\d+)\; i \+\+ \) \{([\s\S]+?)(?=\})\}/g; -const unrollLoopPattern = /#pragma unroll_loop_start\s+for\s*\(\s*int\s+i\s*=\s*(\d+)\s*;\s*i\s*<\s*(\d+)\s*;\s*i\s*\+\+\s*\)\s*{([\s\S]+?)}\s+#pragma unroll_loop_end/g; -function unrollLoops(string) { - return string.replace(unrollLoopPattern, loopReplacer).replace(deprecatedUnrollLoopPattern, deprecatedLoopReplacer); -} -function deprecatedLoopReplacer(match, start2, end2, snippet) { - console.warn("WebGLProgram: #pragma unroll_loop shader syntax is deprecated. Please use #pragma unroll_loop_start syntax instead."); - return loopReplacer(match, start2, end2, snippet); -} -function loopReplacer(match, start2, end2, snippet) { - let string = ""; - for (let i = parseInt(start2); i < parseInt(end2); i++) { - string += snippet.replace(/\[\s*i\s*\]/g, "[ " + i + " ]").replace(/UNROLLED_LOOP_INDEX/g, i); - } - return string; -} -function generatePrecision(parameters) { - let precisionstring = "precision " + parameters.precision + " float;\nprecision " + parameters.precision + " int;"; - if (parameters.precision === "highp") { - precisionstring += "\n#define HIGH_PRECISION"; - } else if (parameters.precision === "mediump") { - precisionstring += "\n#define MEDIUM_PRECISION"; - } else if (parameters.precision === "lowp") { - precisionstring += "\n#define LOW_PRECISION"; - } - return precisionstring; -} -function generateShadowMapTypeDefine(parameters) { - let shadowMapTypeDefine = "SHADOWMAP_TYPE_BASIC"; - if (parameters.shadowMapType === PCFShadowMap) { - shadowMapTypeDefine = "SHADOWMAP_TYPE_PCF"; - } else if (parameters.shadowMapType === PCFSoftShadowMap) { - shadowMapTypeDefine = "SHADOWMAP_TYPE_PCF_SOFT"; - } else if (parameters.shadowMapType === VSMShadowMap) { - shadowMapTypeDefine = "SHADOWMAP_TYPE_VSM"; - } - return shadowMapTypeDefine; -} -function generateEnvMapTypeDefine(parameters) { - let envMapTypeDefine = "ENVMAP_TYPE_CUBE"; - if (parameters.envMap) { - switch (parameters.envMapMode) { - case CubeReflectionMapping: - case CubeRefractionMapping: - envMapTypeDefine = "ENVMAP_TYPE_CUBE"; - break; - case CubeUVReflectionMapping: - envMapTypeDefine = "ENVMAP_TYPE_CUBE_UV"; - break; - } + [SUBSCRIBE("updateSVGFilterAssets")](params) { + this.executeSVGFilter((project2) => { + project2.setSVGFilterValue(params.index, { + filters: params.filters + }); + this.state.$item.$("filter").html(params.filters.join("\n")); + this.emit("refreshSVGArea"); + }, false); } - return envMapTypeDefine; -} -function generateEnvMapModeDefine(parameters) { - let envMapModeDefine = "ENVMAP_MODE_REFLECTION"; - if (parameters.envMap) { - switch (parameters.envMapMode) { - case CubeRefractionMapping: - envMapModeDefine = "ENVMAP_MODE_REFRACTION"; - break; + [SUBSCRIBE("changeSVGFilterAssets")](params) { + if (params.id === this.id) { + this.trigger("updateSVGFilterAssets", params); } } - return envMapModeDefine; -} -function generateEnvMapBlendingDefine(parameters) { - let envMapBlendingDefine = "ENVMAP_BLENDING_NONE"; - if (parameters.envMap) { - switch (parameters.combine) { - case MultiplyOperation: - envMapBlendingDefine = "ENVMAP_BLENDING_MULTIPLY"; - break; - case MixOperation: - envMapBlendingDefine = "ENVMAP_BLENDING_MIX"; - break; - case AddOperation: - envMapBlendingDefine = "ENVMAP_BLENDING_ADD"; - break; - } + [SUBSCRIBE("refreshSVGFilterAssets")]() { + this.refresh(); } - return envMapBlendingDefine; } -function generateCubeUVSize(parameters) { - const imageHeight = parameters.envMapCubeUVHeight; - if (imageHeight === null) - return null; - const maxMip = Math.log2(imageHeight / 32 + 1) + 3; - const texelHeight = 1 / imageHeight; - const texelWidth = 1 / (3 * Math.max(Math.pow(2, maxMip), 7 * 16)); - return { texelWidth, texelHeight, maxMip }; -} -function WebGLProgram(renderer, cacheKey2, parameters, bindingStates) { - const gl = renderer.getContext(); - const defines = parameters.defines; - let vertexShader = parameters.vertexShader; - let fragmentShader = parameters.fragmentShader; - const shadowMapTypeDefine = generateShadowMapTypeDefine(parameters); - const envMapTypeDefine = generateEnvMapTypeDefine(parameters); - const envMapModeDefine = generateEnvMapModeDefine(parameters); - const envMapBlendingDefine = generateEnvMapBlendingDefine(parameters); - const envMapCubeUVSize = generateCubeUVSize(parameters); - const customExtensions = parameters.isWebGL2 ? "" : generateExtensions(parameters); - const customDefines = generateDefines(defines); - const program = gl.createProgram(); - let prefixVertex, prefixFragment; - let versionString = parameters.glslVersion ? "#version " + parameters.glslVersion + "\n" : ""; - if (parameters.isRawShaderMaterial) { - prefixVertex = [ - customDefines - ].filter(filterEmptyLine).join("\n"); - if (prefixVertex.length > 0) { - prefixVertex += "\n"; - } - prefixFragment = [ - customExtensions, - customDefines - ].filter(filterEmptyLine).join("\n"); - if (prefixFragment.length > 0) { - prefixFragment += "\n"; - } - } else { - prefixVertex = [ - generatePrecision(parameters), - "#define SHADER_NAME " + parameters.shaderName, - customDefines, - parameters.instancing ? "#define USE_INSTANCING" : "", - parameters.instancingColor ? "#define USE_INSTANCING_COLOR" : "", - parameters.supportsVertexTextures ? "#define VERTEX_TEXTURES" : "", - "#define MAX_BONES " + parameters.maxBones, - parameters.useFog && parameters.fog ? "#define USE_FOG" : "", - parameters.useFog && parameters.fogExp2 ? "#define FOG_EXP2" : "", - parameters.map ? "#define USE_MAP" : "", - parameters.envMap ? "#define USE_ENVMAP" : "", - parameters.envMap ? "#define " + envMapModeDefine : "", - parameters.lightMap ? "#define USE_LIGHTMAP" : "", - parameters.aoMap ? "#define USE_AOMAP" : "", - parameters.emissiveMap ? "#define USE_EMISSIVEMAP" : "", - parameters.bumpMap ? "#define USE_BUMPMAP" : "", - parameters.normalMap ? "#define USE_NORMALMAP" : "", - parameters.normalMap && parameters.objectSpaceNormalMap ? "#define OBJECTSPACE_NORMALMAP" : "", - parameters.normalMap && parameters.tangentSpaceNormalMap ? "#define TANGENTSPACE_NORMALMAP" : "", - parameters.clearcoatMap ? "#define USE_CLEARCOATMAP" : "", - parameters.clearcoatRoughnessMap ? "#define USE_CLEARCOAT_ROUGHNESSMAP" : "", - parameters.clearcoatNormalMap ? "#define USE_CLEARCOAT_NORMALMAP" : "", - parameters.displacementMap && parameters.supportsVertexTextures ? "#define USE_DISPLACEMENTMAP" : "", - parameters.specularMap ? "#define USE_SPECULARMAP" : "", - parameters.specularIntensityMap ? "#define USE_SPECULARINTENSITYMAP" : "", - parameters.specularColorMap ? "#define USE_SPECULARCOLORMAP" : "", - parameters.roughnessMap ? "#define USE_ROUGHNESSMAP" : "", - parameters.metalnessMap ? "#define USE_METALNESSMAP" : "", - parameters.alphaMap ? "#define USE_ALPHAMAP" : "", - parameters.transmission ? "#define USE_TRANSMISSION" : "", - parameters.transmissionMap ? "#define USE_TRANSMISSIONMAP" : "", - parameters.thicknessMap ? "#define USE_THICKNESSMAP" : "", - parameters.sheenColorMap ? "#define USE_SHEENCOLORMAP" : "", - parameters.sheenRoughnessMap ? "#define USE_SHEENROUGHNESSMAP" : "", - parameters.vertexTangents ? "#define USE_TANGENT" : "", - parameters.vertexColors ? "#define USE_COLOR" : "", - parameters.vertexAlphas ? "#define USE_COLOR_ALPHA" : "", - parameters.vertexUvs ? "#define USE_UV" : "", - parameters.uvsVertexOnly ? "#define UVS_VERTEX_ONLY" : "", - parameters.flatShading ? "#define FLAT_SHADED" : "", - parameters.skinning ? "#define USE_SKINNING" : "", - parameters.useVertexTexture ? "#define BONE_TEXTURE" : "", - parameters.morphTargets ? "#define USE_MORPHTARGETS" : "", - parameters.morphNormals && parameters.flatShading === false ? "#define USE_MORPHNORMALS" : "", - parameters.morphColors && parameters.isWebGL2 ? "#define USE_MORPHCOLORS" : "", - parameters.morphTargetsCount > 0 && parameters.isWebGL2 ? "#define MORPHTARGETS_TEXTURE" : "", - parameters.morphTargetsCount > 0 && parameters.isWebGL2 ? "#define MORPHTARGETS_TEXTURE_STRIDE " + parameters.morphTextureStride : "", - parameters.morphTargetsCount > 0 && parameters.isWebGL2 ? "#define MORPHTARGETS_COUNT " + parameters.morphTargetsCount : "", - parameters.doubleSided ? "#define DOUBLE_SIDED" : "", - parameters.flipSided ? "#define FLIP_SIDED" : "", - parameters.shadowMapEnabled ? "#define USE_SHADOWMAP" : "", - parameters.shadowMapEnabled ? "#define " + shadowMapTypeDefine : "", - parameters.sizeAttenuation ? "#define USE_SIZEATTENUATION" : "", - parameters.logarithmicDepthBuffer ? "#define USE_LOGDEPTHBUF" : "", - parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ? "#define USE_LOGDEPTHBUF_EXT" : "", - "uniform mat4 modelMatrix;", - "uniform mat4 modelViewMatrix;", - "uniform mat4 projectionMatrix;", - "uniform mat4 viewMatrix;", - "uniform mat3 normalMatrix;", - "uniform vec3 cameraPosition;", - "uniform bool isOrthographic;", - "#ifdef USE_INSTANCING", - " attribute mat4 instanceMatrix;", - "#endif", - "#ifdef USE_INSTANCING_COLOR", - " attribute vec3 instanceColor;", - "#endif", - "attribute vec3 position;", - "attribute vec3 normal;", - "attribute vec2 uv;", - "#ifdef USE_TANGENT", - " attribute vec4 tangent;", - "#endif", - "#if defined( USE_COLOR_ALPHA )", - " attribute vec4 color;", - "#elif defined( USE_COLOR )", - " attribute vec3 color;", - "#endif", - "#if ( defined( USE_MORPHTARGETS ) && ! defined( MORPHTARGETS_TEXTURE ) )", - " attribute vec3 morphTarget0;", - " attribute vec3 morphTarget1;", - " attribute vec3 morphTarget2;", - " attribute vec3 morphTarget3;", - " #ifdef USE_MORPHNORMALS", - " attribute vec3 morphNormal0;", - " attribute vec3 morphNormal1;", - " attribute vec3 morphNormal2;", - " attribute vec3 morphNormal3;", - " #else", - " attribute vec3 morphTarget4;", - " attribute vec3 morphTarget5;", - " attribute vec3 morphTarget6;", - " attribute vec3 morphTarget7;", - " #endif", - "#endif", - "#ifdef USE_SKINNING", - " attribute vec4 skinIndex;", - " attribute vec4 skinWeight;", - "#endif", - "\n" - ].filter(filterEmptyLine).join("\n"); - prefixFragment = [ - customExtensions, - generatePrecision(parameters), - "#define SHADER_NAME " + parameters.shaderName, - customDefines, - parameters.useFog && parameters.fog ? "#define USE_FOG" : "", - parameters.useFog && parameters.fogExp2 ? "#define FOG_EXP2" : "", - parameters.map ? "#define USE_MAP" : "", - parameters.matcap ? "#define USE_MATCAP" : "", - parameters.envMap ? "#define USE_ENVMAP" : "", - parameters.envMap ? "#define " + envMapTypeDefine : "", - parameters.envMap ? "#define " + envMapModeDefine : "", - parameters.envMap ? "#define " + envMapBlendingDefine : "", - envMapCubeUVSize ? "#define CUBEUV_TEXEL_WIDTH " + envMapCubeUVSize.texelWidth : "", - envMapCubeUVSize ? "#define CUBEUV_TEXEL_HEIGHT " + envMapCubeUVSize.texelHeight : "", - envMapCubeUVSize ? "#define CUBEUV_MAX_MIP " + envMapCubeUVSize.maxMip + ".0" : "", - parameters.lightMap ? "#define USE_LIGHTMAP" : "", - parameters.aoMap ? "#define USE_AOMAP" : "", - parameters.emissiveMap ? "#define USE_EMISSIVEMAP" : "", - parameters.bumpMap ? "#define USE_BUMPMAP" : "", - parameters.normalMap ? "#define USE_NORMALMAP" : "", - parameters.normalMap && parameters.objectSpaceNormalMap ? "#define OBJECTSPACE_NORMALMAP" : "", - parameters.normalMap && parameters.tangentSpaceNormalMap ? "#define TANGENTSPACE_NORMALMAP" : "", - parameters.clearcoat ? "#define USE_CLEARCOAT" : "", - parameters.clearcoatMap ? "#define USE_CLEARCOATMAP" : "", - parameters.clearcoatRoughnessMap ? "#define USE_CLEARCOAT_ROUGHNESSMAP" : "", - parameters.clearcoatNormalMap ? "#define USE_CLEARCOAT_NORMALMAP" : "", - parameters.specularMap ? "#define USE_SPECULARMAP" : "", - parameters.specularIntensityMap ? "#define USE_SPECULARINTENSITYMAP" : "", - parameters.specularColorMap ? "#define USE_SPECULARCOLORMAP" : "", - parameters.roughnessMap ? "#define USE_ROUGHNESSMAP" : "", - parameters.metalnessMap ? "#define USE_METALNESSMAP" : "", - parameters.alphaMap ? "#define USE_ALPHAMAP" : "", - parameters.alphaTest ? "#define USE_ALPHATEST" : "", - parameters.sheen ? "#define USE_SHEEN" : "", - parameters.sheenColorMap ? "#define USE_SHEENCOLORMAP" : "", - parameters.sheenRoughnessMap ? "#define USE_SHEENROUGHNESSMAP" : "", - parameters.transmission ? "#define USE_TRANSMISSION" : "", - parameters.transmissionMap ? "#define USE_TRANSMISSIONMAP" : "", - parameters.thicknessMap ? "#define USE_THICKNESSMAP" : "", - parameters.decodeVideoTexture ? "#define DECODE_VIDEO_TEXTURE" : "", - parameters.vertexTangents ? "#define USE_TANGENT" : "", - parameters.vertexColors || parameters.instancingColor ? "#define USE_COLOR" : "", - parameters.vertexAlphas ? "#define USE_COLOR_ALPHA" : "", - parameters.vertexUvs ? "#define USE_UV" : "", - parameters.uvsVertexOnly ? "#define UVS_VERTEX_ONLY" : "", - parameters.gradientMap ? "#define USE_GRADIENTMAP" : "", - parameters.flatShading ? "#define FLAT_SHADED" : "", - parameters.doubleSided ? "#define DOUBLE_SIDED" : "", - parameters.flipSided ? "#define FLIP_SIDED" : "", - parameters.shadowMapEnabled ? "#define USE_SHADOWMAP" : "", - parameters.shadowMapEnabled ? "#define " + shadowMapTypeDefine : "", - parameters.premultipliedAlpha ? "#define PREMULTIPLIED_ALPHA" : "", - parameters.physicallyCorrectLights ? "#define PHYSICALLY_CORRECT_LIGHTS" : "", - parameters.logarithmicDepthBuffer ? "#define USE_LOGDEPTHBUF" : "", - parameters.logarithmicDepthBuffer && parameters.rendererExtensionFragDepth ? "#define USE_LOGDEPTHBUF_EXT" : "", - "uniform mat4 viewMatrix;", - "uniform vec3 cameraPosition;", - "uniform bool isOrthographic;", - parameters.toneMapping !== NoToneMapping ? "#define TONE_MAPPING" : "", - parameters.toneMapping !== NoToneMapping ? ShaderChunk["tonemapping_pars_fragment"] : "", - parameters.toneMapping !== NoToneMapping ? getToneMappingFunction("toneMapping", parameters.toneMapping) : "", - parameters.dithering ? "#define DITHERING" : "", - parameters.opaque ? "#define OPAQUE" : "", - ShaderChunk["encodings_pars_fragment"], - getTexelEncodingFunction("linearToOutputTexel", parameters.outputEncoding), - parameters.depthPacking ? "#define DEPTH_PACKING " + parameters.depthPacking : "", - "\n" - ].filter(filterEmptyLine).join("\n"); - } - vertexShader = resolveIncludes(vertexShader); - vertexShader = replaceLightNums(vertexShader, parameters); - vertexShader = replaceClippingPlaneNums(vertexShader, parameters); - fragmentShader = resolveIncludes(fragmentShader); - fragmentShader = replaceLightNums(fragmentShader, parameters); - fragmentShader = replaceClippingPlaneNums(fragmentShader, parameters); - vertexShader = unrollLoops(vertexShader); - fragmentShader = unrollLoops(fragmentShader); - if (parameters.isWebGL2 && parameters.isRawShaderMaterial !== true) { - versionString = "#version 300 es\n"; - prefixVertex = [ - "precision mediump sampler2DArray;", - "#define attribute in", - "#define varying out", - "#define texture2D texture" - ].join("\n") + "\n" + prefixVertex; - prefixFragment = [ - "#define varying in", - parameters.glslVersion === GLSL3 ? "" : "layout(location = 0) out highp vec4 pc_fragColor;", - parameters.glslVersion === GLSL3 ? "" : "#define gl_FragColor pc_fragColor", - "#define gl_FragDepthEXT gl_FragDepth", - "#define texture2D texture", - "#define textureCube texture", - "#define texture2DProj textureProj", - "#define texture2DLodEXT textureLod", - "#define texture2DProjLodEXT textureProjLod", - "#define textureCubeLodEXT textureLod", - "#define texture2DGradEXT textureGrad", - "#define texture2DProjGradEXT textureProjGrad", - "#define textureCubeGradEXT textureGrad" - ].join("\n") + "\n" + prefixFragment; - } - const vertexGlsl = versionString + prefixVertex + vertexShader; - const fragmentGlsl = versionString + prefixFragment + fragmentShader; - const glVertexShader = WebGLShader(gl, 35633, vertexGlsl); - const glFragmentShader = WebGLShader(gl, 35632, fragmentGlsl); - gl.attachShader(program, glVertexShader); - gl.attachShader(program, glFragmentShader); - if (parameters.index0AttributeName !== void 0) { - gl.bindAttribLocation(program, 0, parameters.index0AttributeName); - } else if (parameters.morphTargets === true) { - gl.bindAttribLocation(program, 0, "position"); - } - gl.linkProgram(program); - if (renderer.debug.checkShaderErrors) { - const programLog = gl.getProgramInfoLog(program).trim(); - const vertexLog = gl.getShaderInfoLog(glVertexShader).trim(); - const fragmentLog = gl.getShaderInfoLog(glFragmentShader).trim(); - let runnable = true; - let haveDiagnostics = true; - if (gl.getProgramParameter(program, 35714) === false) { - runnable = false; - const vertexErrors = getShaderErrors(gl, glVertexShader, "vertex"); - const fragmentErrors = getShaderErrors(gl, glFragmentShader, "fragment"); - console.error("THREE.WebGLProgram: Shader Error " + gl.getError() + " - VALIDATE_STATUS " + gl.getProgramParameter(program, 35715) + "\n\nProgram Info Log: " + programLog + "\n" + vertexErrors + "\n" + fragmentErrors); - } else if (programLog !== "") { - console.warn("THREE.WebGLProgram: Program Info Log:", programLog); - } else if (vertexLog === "" || fragmentLog === "") { - haveDiagnostics = false; - } - if (haveDiagnostics) { - this.diagnostics = { - runnable, - programLog, - vertexShader: { - log: vertexLog, - prefix: prefixVertex - }, - fragmentShader: { - log: fragmentLog, - prefix: prefixFragment - } - }; - } - } - gl.deleteShader(glVertexShader); - gl.deleteShader(glFragmentShader); - let cachedUniforms; - this.getUniforms = function() { - if (cachedUniforms === void 0) { - cachedUniforms = new WebGLUniforms(gl, program); - } - return cachedUniforms; - }; - let cachedAttributes; - this.getAttributes = function() { - if (cachedAttributes === void 0) { - cachedAttributes = fetchAttributeLocations(gl, program); - } - return cachedAttributes; - }; - this.destroy = function() { - bindingStates.releaseStatesOfProgram(this); - gl.deleteProgram(program); - this.program = void 0; - }; - this.name = parameters.shaderName; - this.id = programIdCount++; - this.cacheKey = cacheKey2; - this.usedTimes = 1; - this.program = program; - this.vertexShader = glVertexShader; - this.fragmentShader = glFragmentShader; - return this; +function svgFilterAsset(editor) { + editor.registerElement({ + SVGFilterAssetsProperty + }); } -let _id = 0; -class WebGLShaderCache { - constructor() { - this.shaderCache = /* @__PURE__ */ new Map(); - this.materialCache = /* @__PURE__ */ new Map(); - } - update(material) { - const vertexShader = material.vertexShader; - const fragmentShader = material.fragmentShader; - const vertexShaderStage = this._getShaderStage(vertexShader); - const fragmentShaderStage = this._getShaderStage(fragmentShader); - const materialShaders = this._getShaderCacheForMaterial(material); - if (materialShaders.has(vertexShaderStage) === false) { - materialShaders.add(vertexShaderStage); - vertexShaderStage.usedTimes++; - } - if (materialShaders.has(fragmentShaderStage) === false) { - materialShaders.add(fragmentShaderStage); - fragmentShaderStage.usedTimes++; - } - return this; - } - remove(material) { - const materialShaders = this.materialCache.get(material); - for (const shaderStage of materialShaders) { - shaderStage.usedTimes--; - if (shaderStage.usedTimes === 0) - this.shaderCache.delete(shaderStage.code); - } - this.materialCache.delete(material); - return this; - } - getVertexShaderID(material) { - return this._getShaderStage(material.vertexShader).id; - } - getFragmentShaderID(material) { - return this._getShaderStage(material.fragmentShader).id; - } - dispose() { - this.shaderCache.clear(); - this.materialCache.clear(); - } - _getShaderCacheForMaterial(material) { - const cache = this.materialCache; - if (cache.has(material) === false) { - cache.set(material, /* @__PURE__ */ new Set()); - } - return cache.get(material); - } - _getShaderStage(code2) { - const cache = this.shaderCache; - if (cache.has(code2) === false) { - const stage = new WebGLShaderStage(code2); - cache.set(code2, stage); - } - return cache.get(code2); - } -} -class WebGLShaderStage { - constructor(code2) { - this.id = _id++; - this.code = code2; - this.usedTimes = 0; - } -} -function WebGLPrograms(renderer, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping) { - const _programLayers = new Layers(); - const _customShaders = new WebGLShaderCache(); - const programs = []; - const isWebGL2 = capabilities.isWebGL2; - const logarithmicDepthBuffer = capabilities.logarithmicDepthBuffer; - const floatVertexTextures = capabilities.floatVertexTextures; - const maxVertexUniforms = capabilities.maxVertexUniforms; - const vertexTextures = capabilities.vertexTextures; - let precision = capabilities.precision; - const shaderIDs = { - MeshDepthMaterial: "depth", - MeshDistanceMaterial: "distanceRGBA", - MeshNormalMaterial: "normal", - MeshBasicMaterial: "basic", - MeshLambertMaterial: "lambert", - MeshPhongMaterial: "phong", - MeshToonMaterial: "toon", - MeshStandardMaterial: "physical", - MeshPhysicalMaterial: "physical", - MeshMatcapMaterial: "matcap", - LineBasicMaterial: "basic", - LineDashedMaterial: "dashed", - PointsMaterial: "points", - ShadowMaterial: "shadow", - SpriteMaterial: "sprite" - }; - function getMaxBones(object) { - const skeleton = object.skeleton; - const bones = skeleton.bones; - if (floatVertexTextures) { - return 1024; - } else { - const nVertexUniforms = maxVertexUniforms; - const nVertexMatrices = Math.floor((nVertexUniforms - 20) / 4); - const maxBones = Math.min(nVertexMatrices, bones.length); - if (maxBones < bones.length) { - console.warn("THREE.WebGLRenderer: Skeleton has " + bones.length + " bones. This GPU supports " + maxBones + "."); - return 0; - } - return maxBones; - } - } - function getParameters(material, lights, shadows, scene, object) { - const fog = scene.fog; - const geometry = object.geometry; - const environment = material.isMeshStandardMaterial ? scene.environment : null; - const envMap = (material.isMeshStandardMaterial ? cubeuvmaps : cubemaps).get(material.envMap || environment); - const envMapCubeUVHeight = !!envMap && envMap.mapping === CubeUVReflectionMapping ? envMap.image.height : null; - const shaderID = shaderIDs[material.type]; - const maxBones = object.isSkinnedMesh ? getMaxBones(object) : 0; - if (material.precision !== null) { - precision = capabilities.getMaxPrecision(material.precision); - if (precision !== material.precision) { - console.warn("THREE.WebGLProgram.getParameters:", material.precision, "not supported, using", precision, "instead."); - } - } - const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color; - const morphTargetsCount = morphAttribute !== void 0 ? morphAttribute.length : 0; - let morphTextureStride = 0; - if (geometry.morphAttributes.position !== void 0) - morphTextureStride = 1; - if (geometry.morphAttributes.normal !== void 0) - morphTextureStride = 2; - if (geometry.morphAttributes.color !== void 0) - morphTextureStride = 3; - let vertexShader, fragmentShader; - let customVertexShaderID, customFragmentShaderID; - if (shaderID) { - const shader = ShaderLib[shaderID]; - vertexShader = shader.vertexShader; - fragmentShader = shader.fragmentShader; - } else { - vertexShader = material.vertexShader; - fragmentShader = material.fragmentShader; - _customShaders.update(material); - customVertexShaderID = _customShaders.getVertexShaderID(material); - customFragmentShaderID = _customShaders.getFragmentShaderID(material); - } - const currentRenderTarget = renderer.getRenderTarget(); - const useAlphaTest = material.alphaTest > 0; - const useClearcoat = material.clearcoat > 0; - const parameters = { - isWebGL2, - shaderID, - shaderName: material.type, - vertexShader, - fragmentShader, - defines: material.defines, - customVertexShaderID, - customFragmentShaderID, - isRawShaderMaterial: material.isRawShaderMaterial === true, - glslVersion: material.glslVersion, - precision, - instancing: object.isInstancedMesh === true, - instancingColor: object.isInstancedMesh === true && object.instanceColor !== null, - supportsVertexTextures: vertexTextures, - outputEncoding: currentRenderTarget === null ? renderer.outputEncoding : currentRenderTarget.isXRRenderTarget === true ? currentRenderTarget.texture.encoding : LinearEncoding, - map: !!material.map, - matcap: !!material.matcap, - envMap: !!envMap, - envMapMode: envMap && envMap.mapping, - envMapCubeUVHeight, - lightMap: !!material.lightMap, - aoMap: !!material.aoMap, - emissiveMap: !!material.emissiveMap, - bumpMap: !!material.bumpMap, - normalMap: !!material.normalMap, - objectSpaceNormalMap: material.normalMapType === ObjectSpaceNormalMap, - tangentSpaceNormalMap: material.normalMapType === TangentSpaceNormalMap, - decodeVideoTexture: !!material.map && material.map.isVideoTexture === true && material.map.encoding === sRGBEncoding, - clearcoat: useClearcoat, - clearcoatMap: useClearcoat && !!material.clearcoatMap, - clearcoatRoughnessMap: useClearcoat && !!material.clearcoatRoughnessMap, - clearcoatNormalMap: useClearcoat && !!material.clearcoatNormalMap, - displacementMap: !!material.displacementMap, - roughnessMap: !!material.roughnessMap, - metalnessMap: !!material.metalnessMap, - specularMap: !!material.specularMap, - specularIntensityMap: !!material.specularIntensityMap, - specularColorMap: !!material.specularColorMap, - opaque: material.transparent === false && material.blending === NormalBlending, - alphaMap: !!material.alphaMap, - alphaTest: useAlphaTest, - gradientMap: !!material.gradientMap, - sheen: material.sheen > 0, - sheenColorMap: !!material.sheenColorMap, - sheenRoughnessMap: !!material.sheenRoughnessMap, - transmission: material.transmission > 0, - transmissionMap: !!material.transmissionMap, - thicknessMap: !!material.thicknessMap, - combine: material.combine, - vertexTangents: !!material.normalMap && !!geometry.attributes.tangent, - vertexColors: material.vertexColors, - vertexAlphas: material.vertexColors === true && !!geometry.attributes.color && geometry.attributes.color.itemSize === 4, - vertexUvs: !!material.map || !!material.bumpMap || !!material.normalMap || !!material.specularMap || !!material.alphaMap || !!material.emissiveMap || !!material.roughnessMap || !!material.metalnessMap || !!material.clearcoatMap || !!material.clearcoatRoughnessMap || !!material.clearcoatNormalMap || !!material.displacementMap || !!material.transmissionMap || !!material.thicknessMap || !!material.specularIntensityMap || !!material.specularColorMap || !!material.sheenColorMap || !!material.sheenRoughnessMap, - uvsVertexOnly: !(!!material.map || !!material.bumpMap || !!material.normalMap || !!material.specularMap || !!material.alphaMap || !!material.emissiveMap || !!material.roughnessMap || !!material.metalnessMap || !!material.clearcoatNormalMap || material.transmission > 0 || !!material.transmissionMap || !!material.thicknessMap || !!material.specularIntensityMap || !!material.specularColorMap || material.sheen > 0 || !!material.sheenColorMap || !!material.sheenRoughnessMap) && !!material.displacementMap, - fog: !!fog, - useFog: material.fog, - fogExp2: fog && fog.isFogExp2, - flatShading: !!material.flatShading, - sizeAttenuation: material.sizeAttenuation, - logarithmicDepthBuffer, - skinning: object.isSkinnedMesh === true && maxBones > 0, - maxBones, - useVertexTexture: floatVertexTextures, - morphTargets: geometry.morphAttributes.position !== void 0, - morphNormals: geometry.morphAttributes.normal !== void 0, - morphColors: geometry.morphAttributes.color !== void 0, - morphTargetsCount, - morphTextureStride, - numDirLights: lights.directional.length, - numPointLights: lights.point.length, - numSpotLights: lights.spot.length, - numRectAreaLights: lights.rectArea.length, - numHemiLights: lights.hemi.length, - numDirLightShadows: lights.directionalShadowMap.length, - numPointLightShadows: lights.pointShadowMap.length, - numSpotLightShadows: lights.spotShadowMap.length, - numClippingPlanes: clipping.numPlanes, - numClipIntersection: clipping.numIntersection, - dithering: material.dithering, - shadowMapEnabled: renderer.shadowMap.enabled && shadows.length > 0, - shadowMapType: renderer.shadowMap.type, - toneMapping: material.toneMapped ? renderer.toneMapping : NoToneMapping, - physicallyCorrectLights: renderer.physicallyCorrectLights, - premultipliedAlpha: material.premultipliedAlpha, - doubleSided: material.side === DoubleSide, - flipSided: material.side === BackSide, - depthPacking: material.depthPacking !== void 0 ? material.depthPacking : false, - index0AttributeName: material.index0AttributeName, - extensionDerivatives: material.extensions && material.extensions.derivatives, - extensionFragDepth: material.extensions && material.extensions.fragDepth, - extensionDrawBuffers: material.extensions && material.extensions.drawBuffers, - extensionShaderTextureLOD: material.extensions && material.extensions.shaderTextureLOD, - rendererExtensionFragDepth: isWebGL2 || extensions.has("EXT_frag_depth"), - rendererExtensionDrawBuffers: isWebGL2 || extensions.has("WEBGL_draw_buffers"), - rendererExtensionShaderTextureLod: isWebGL2 || extensions.has("EXT_shader_texture_lod"), - customProgramCacheKey: material.customProgramCacheKey() +var alpha = ` +1 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 0 .5 0 +`; +var blue = ` +0 0 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var BlueMagenta2 = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 .5 0 +0 0 0 1 0 +`; +var BlueShadowMagentHightlight = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 1 0 +0 0 0 1 0 +`; +var cyan = ` +0 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var darken = ` +.5 0 0 0 0 +0 .5 0 0 0 +0 0 .5 0 0 +0 0 0 1 0 +`; +var ElimBlue = ` +1 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 -2 1 0 +`; +var GrayOnDark = ` +0 0 1 0 0 +0 0 1 0 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var GrayOnLight = ` +1 0 0 0 0 +1 0 0 0 0 +1 0 0 0 0 +0 0 0 1 0 +`; +var GrayOnMid = ` +0 1 0 0 0 +0 1 0 0 0 +0 1 0 0 0 +0 0 0 1 0 +`; +var green = ` +0 0 0 0 0 +0 1 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`; +var HardGreen = ` +1 0 0 0 0 +0 1 0 1 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var HardYellow = ` +1 0 0 1 0 +0 1 0 1 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var IdenticalRedOverlay = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`; +var lighten = ` +1.5 0 0 0 0 +0 1.5 0 0 0 +0 0 1.5 0 0 +0 0 0 1 0 +`; +var lime = ` +1 0 0 0 0 +0 2 0 0 0 +0 0 0 .5 0 +0 0 0 1 0 +`; +var magenta = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var NoGreenMagenta = ` +1 1 0 0 0 +0 0 0 0 0 +0 1 1 0 0 +0 0 0 1 0 +`; +var NoGreenRed = ` +1 1 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`; +var peachy = ` +1 0 0 0 0 +0 .5 0 0 0 +0 0 0 .5 0 +0 0 0 1 0 +`; +var red = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`; +var RedOverlay = ` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 -1 0 +0 0 0 1 0 +`; +var yellow = ` +1 0 0 0 0 +0 1 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`; +var YesGreenColorizedMagenta = ` +1 1 0 0 0 +0 1 0 0 0 +0 1 1 0 0 +0 0 0 1 0 +`; +var colormatrix = { + red, + green, + blue, + yellow, + magenta, + cyan, + alpha, + BlueMagenta2, + BlueShadowMagentHightlight, + darken, + ElimBlue, + GrayOnDark, + GrayOnLight, + GrayOnMid, + HardGreen, + HardYellow, + IdenticalRedOverlay, + lighten, + lime, + NoGreenMagenta, + NoGreenRed, + peachy, + RedOverlay, + YesGreenColorizedMagenta +}; +var ColorMatrixEditor$1 = ""; +const COLUMN = 6; +const sampleList = Object.keys(colormatrix).map((it) => { + return { title: it, values: colormatrix[it] }; +}); +class ColorMatrixEditor extends EditorElement { + initState() { + return { + values: normalize(this.props.values) }; - return parameters; - } - function getProgramCacheKey(parameters) { - const array = []; - if (parameters.shaderID) { - array.push(parameters.shaderID); - } else { - array.push(parameters.customVertexShaderID); - array.push(parameters.customFragmentShaderID); - } - if (parameters.defines !== void 0) { - for (const name in parameters.defines) { - array.push(name); - array.push(parameters.defines[name]); - } - } - if (parameters.isRawShaderMaterial === false) { - getProgramCacheKeyParameters(array, parameters); - getProgramCacheKeyBooleans(array, parameters); - array.push(renderer.outputEncoding); - } - array.push(parameters.customProgramCacheKey); - return array.join(); - } - function getProgramCacheKeyParameters(array, parameters) { - array.push(parameters.precision); - array.push(parameters.outputEncoding); - array.push(parameters.envMapMode); - array.push(parameters.envMapCubeUVHeight); - array.push(parameters.combine); - array.push(parameters.vertexUvs); - array.push(parameters.fogExp2); - array.push(parameters.sizeAttenuation); - array.push(parameters.maxBones); - array.push(parameters.morphTargetsCount); - array.push(parameters.morphAttributeCount); - array.push(parameters.numDirLights); - array.push(parameters.numPointLights); - array.push(parameters.numSpotLights); - array.push(parameters.numHemiLights); - array.push(parameters.numRectAreaLights); - array.push(parameters.numDirLightShadows); - array.push(parameters.numPointLightShadows); - array.push(parameters.numSpotLightShadows); - array.push(parameters.shadowMapType); - array.push(parameters.toneMapping); - array.push(parameters.numClippingPlanes); - array.push(parameters.numClipIntersection); - } - function getProgramCacheKeyBooleans(array, parameters) { - _programLayers.disableAll(); - if (parameters.isWebGL2) - _programLayers.enable(0); - if (parameters.supportsVertexTextures) - _programLayers.enable(1); - if (parameters.instancing) - _programLayers.enable(2); - if (parameters.instancingColor) - _programLayers.enable(3); - if (parameters.map) - _programLayers.enable(4); - if (parameters.matcap) - _programLayers.enable(5); - if (parameters.envMap) - _programLayers.enable(6); - if (parameters.lightMap) - _programLayers.enable(7); - if (parameters.aoMap) - _programLayers.enable(8); - if (parameters.emissiveMap) - _programLayers.enable(9); - if (parameters.bumpMap) - _programLayers.enable(10); - if (parameters.normalMap) - _programLayers.enable(11); - if (parameters.objectSpaceNormalMap) - _programLayers.enable(12); - if (parameters.tangentSpaceNormalMap) - _programLayers.enable(13); - if (parameters.clearcoat) - _programLayers.enable(14); - if (parameters.clearcoatMap) - _programLayers.enable(15); - if (parameters.clearcoatRoughnessMap) - _programLayers.enable(16); - if (parameters.clearcoatNormalMap) - _programLayers.enable(17); - if (parameters.displacementMap) - _programLayers.enable(18); - if (parameters.specularMap) - _programLayers.enable(19); - if (parameters.roughnessMap) - _programLayers.enable(20); - if (parameters.metalnessMap) - _programLayers.enable(21); - if (parameters.gradientMap) - _programLayers.enable(22); - if (parameters.alphaMap) - _programLayers.enable(23); - if (parameters.alphaTest) - _programLayers.enable(24); - if (parameters.vertexColors) - _programLayers.enable(25); - if (parameters.vertexAlphas) - _programLayers.enable(26); - if (parameters.vertexUvs) - _programLayers.enable(27); - if (parameters.vertexTangents) - _programLayers.enable(28); - if (parameters.uvsVertexOnly) - _programLayers.enable(29); - if (parameters.fog) - _programLayers.enable(30); - array.push(_programLayers.mask); - _programLayers.disableAll(); - if (parameters.useFog) - _programLayers.enable(0); - if (parameters.flatShading) - _programLayers.enable(1); - if (parameters.logarithmicDepthBuffer) - _programLayers.enable(2); - if (parameters.skinning) - _programLayers.enable(3); - if (parameters.useVertexTexture) - _programLayers.enable(4); - if (parameters.morphTargets) - _programLayers.enable(5); - if (parameters.morphNormals) - _programLayers.enable(6); - if (parameters.morphColors) - _programLayers.enable(7); - if (parameters.premultipliedAlpha) - _programLayers.enable(8); - if (parameters.shadowMapEnabled) - _programLayers.enable(9); - if (parameters.physicallyCorrectLights) - _programLayers.enable(10); - if (parameters.doubleSided) - _programLayers.enable(11); - if (parameters.flipSided) - _programLayers.enable(12); - if (parameters.depthPacking) - _programLayers.enable(13); - if (parameters.dithering) - _programLayers.enable(14); - if (parameters.specularIntensityMap) - _programLayers.enable(15); - if (parameters.specularColorMap) - _programLayers.enable(16); - if (parameters.transmission) - _programLayers.enable(17); - if (parameters.transmissionMap) - _programLayers.enable(18); - if (parameters.thicknessMap) - _programLayers.enable(19); - if (parameters.sheen) - _programLayers.enable(20); - if (parameters.sheenColorMap) - _programLayers.enable(21); - if (parameters.sheenRoughnessMap) - _programLayers.enable(22); - if (parameters.decodeVideoTexture) - _programLayers.enable(23); - if (parameters.opaque) - _programLayers.enable(24); - array.push(_programLayers.mask); - } - function getUniforms(material) { - const shaderID = shaderIDs[material.type]; - let uniforms; - if (shaderID) { - const shader = ShaderLib[shaderID]; - uniforms = UniformsUtils.clone(shader.uniforms); - } else { - uniforms = material.uniforms; - } - return uniforms; - } - function acquireProgram(parameters, cacheKey2) { - let program; - for (let p = 0, pl = programs.length; p < pl; p++) { - const preexistingProgram = programs[p]; - if (preexistingProgram.cacheKey === cacheKey2) { - program = preexistingProgram; - ++program.usedTimes; - break; - } - } - if (program === void 0) { - program = new WebGLProgram(renderer, cacheKey2, parameters, bindingStates); - programs.push(program); - } - return program; } - function releaseProgram(program) { - if (--program.usedTimes === 0) { - const i = programs.indexOf(program); - programs[i] = programs[programs.length - 1]; - programs.pop(); - program.destroy(); - } + template() { + return ` +
+
+
Mix Color Template
+
+
+ `; } - function releaseShaderCache(material) { - _customShaders.remove(material); + [BIND("$body")]() { + return { + cssText: ` + display: grid; + grid-template-columns: repeat(${COLUMN}, 1fr); + grid-column-gap: 2px; + grid-row-gap: 2px; + text-align: left; + ` + }; } - function dispose() { - _customShaders.dispose(); + [LOAD("$sample")]() { + return sampleList.map((it, index2) => { + return `
${it.title}
`; + }); } - return { - getParameters, - getProgramCacheKey, - getUniforms, - acquireProgram, - releaseProgram, - releaseShaderCache, - programs, - dispose - }; -} -function WebGLProperties() { - let properties = /* @__PURE__ */ new WeakMap(); - function get2(object) { - let map2 = properties.get(object); - if (map2 === void 0) { - map2 = {}; - properties.set(object, map2); - } - return map2; + [CLICK("$sample .sample-item")](e) { + var index2 = +e.$dt.attr("data-index"); + var sample2 = sampleList[index2]; + this.updateData({ + values: normalize(sample2.values) + }); + this.load("$body"); } - function remove3(object) { - properties.delete(object); + [LOAD("$body")]() { + var { values } = this.state; + var text2 = ["R", "G", "B", "A"]; + var a = values.map((value, index2) => { + var h = ""; + if (index2 % (COLUMN - 1) === 0) { + h = `
${text2[Math.floor(index2 / (COLUMN - 1))]}
`; + } + var result = ` + ${h} +
+ +
+ `; + return result; + }); + var header = ` +
+
R
+
G
+
B
+
A
+
M
+ `; + return header + a; } - function update2(object, key, value) { - properties.get(object)[key] = value; + updateData(data) { + this.setState(data, false); + this.parent.trigger(this.props.onchange, this.props.key, this.state.values, this.props.params); } - function dispose() { - properties = /* @__PURE__ */ new WeakMap(); + [INPUT("$body input")](e) { + var $el = e.$dt; + var index2 = +$el.attr("data-index"); + var value = +$el.value; + this.state.values[index2] = value; + this.updateData(); } - return { - get: get2, - remove: remove3, - update: update2, - dispose - }; } -function painterSortStable(a, b) { - if (a.groupOrder !== b.groupOrder) { - return a.groupOrder - b.groupOrder; - } else if (a.renderOrder !== b.renderOrder) { - return a.renderOrder - b.renderOrder; - } else if (a.material.id !== b.material.id) { - return a.material.id - b.material.id; - } else if (a.z !== b.z) { - return a.z - b.z; - } else { - return a.id - b.id; +var FuncFilterEditor$1 = ""; +class FuncFilterEditor extends EditorElement { + initState() { + return __spreadValues({ + label: this.props.label || "" + }, this.parse(this.props.value)); } -} -function reversePainterSortStable(a, b) { - if (a.groupOrder !== b.groupOrder) { - return a.groupOrder - b.groupOrder; - } else if (a.renderOrder !== b.renderOrder) { - return a.renderOrder - b.renderOrder; - } else if (a.z !== b.z) { - return b.z - a.z; - } else { - return a.id - b.id; - } -} -function WebGLRenderList() { - const renderItems = []; - let renderItemsIndex = 0; - const opaque = []; - const transmissive = []; - const transparent = []; - function init() { - renderItemsIndex = 0; - opaque.length = 0; - transmissive.length = 0; - transparent.length = 0; - } - function getNextRenderItem(object, geometry, material, groupOrder, z, group2) { - let renderItem = renderItems[renderItemsIndex]; - if (renderItem === void 0) { - renderItem = { - id: object.id, - object, - geometry, - material, - groupOrder, - renderOrder: object.renderOrder, - z, - group: group2 - }; - renderItems[renderItemsIndex] = renderItem; - } else { - renderItem.id = object.id; - renderItem.object = object; - renderItem.geometry = geometry; - renderItem.material = material; - renderItem.groupOrder = groupOrder; - renderItem.renderOrder = object.renderOrder; - renderItem.z = z; - renderItem.group = group2; - } - renderItemsIndex++; - return renderItem; - } - function push(object, geometry, material, groupOrder, z, group2) { - const renderItem = getNextRenderItem(object, geometry, material, groupOrder, z, group2); - if (material.transmission > 0) { - transmissive.push(renderItem); - } else if (material.transparent === true) { - transparent.push(renderItem); - } else { - opaque.push(renderItem); + parse(value) { + var [type, ...values] = value.split(" "); + if (type === "linear") { + var [slop, intercept] = values; + } else if (type === "gamma") { + var [amplitude, exponent, offset] = values; } + return { + type, + values, + slop, + intercept, + amplitude, + exponent, + offset + }; } - function unshift(object, geometry, material, groupOrder, z, group2) { - const renderItem = getNextRenderItem(object, geometry, material, groupOrder, z, group2); - if (material.transmission > 0) { - transmissive.unshift(renderItem); - } else if (material.transparent === true) { - transparent.unshift(renderItem); - } else { - opaque.unshift(renderItem); - } + template() { + return `
`; + } + [LOAD("$body")]() { + var { type, label } = this.state; + var hasLabel = label ? "has-label" : ""; + return ` + ${createComponent("SelectEditor", { + label, + ref: "$type", + key: "type", + value: this.state.type, + options: ["identity", "table", "discrete", "linear", "gamma"], + onchange: "changeType" + })} +
+ ${label ? `` : ""} +
+
+
+ ${createComponent("TextEditor", { + label: "tableValues", + ref: "$values", + key: "values", + value: this.state.values.join(" "), + onchange: (key, value) => { + this.updateData({ + [key]: value.split(" ") + }); + } + })} +
+
+ ${["slop", "intercept"].map((it) => { + return ` +
+ ${createComponent("NumberRangeEditor", { + label: it, + ref: `$${it}`, + key: it, + value: this.state[it], + onchange: (key, value) => { + this.updateData({ + [key]: value + }); + } + })} +
+ `; + }).join("")} +
+
+ ${["amplitude", "exponent", "offset"].map((it) => { + return ` +
+ ${createComponent("NumberRangeEditor", { + label: it, + ref: `$${it}`, + key: it, + value: this.state[it], + onchange: (key, value) => { + this.updateData({ + [key]: value + }); + } + })} +
+ `; + }).join("")} +
+
+ `; } - function sort(customOpaqueSort, customTransparentSort) { - if (opaque.length > 1) - opaque.sort(customOpaqueSort || painterSortStable); - if (transmissive.length > 1) - transmissive.sort(customTransparentSort || reversePainterSortStable); - if (transparent.length > 1) - transparent.sort(customTransparentSort || reversePainterSortStable); + [SUBSCRIBE("changeType")](key, type) { + this.updateData({ type }); + this.refresh(); } - function finish() { - for (let i = renderItemsIndex, il = renderItems.length; i < il; i++) { - const renderItem = renderItems[i]; - if (renderItem.id === null) - break; - renderItem.id = null; - renderItem.object = null; - renderItem.geometry = null; - renderItem.material = null; - renderItem.group = null; + getValue() { + switch (this.state.type) { + case "table": + case "discrete": + return [this.state.type, ...this.state.values].join(" "); + case "linear": + return [this.state.type, this.state.slop, this.state.intercept].join(" "); + case "gamma": + return [ + this.state.type, + this.state.amplitude, + this.state.exponent, + this.state.offset + ].join(" "); } + return "identity"; } - return { - opaque, - transmissive, - transparent, - init, - push, - unshift, - finish, - sort - }; -} -function WebGLRenderLists() { - let lists = /* @__PURE__ */ new WeakMap(); - function get2(scene, renderCallDepth) { - let list2; - if (lists.has(scene) === false) { - list2 = new WebGLRenderList(); - lists.set(scene, [list2]); - } else { - if (renderCallDepth >= lists.get(scene).length) { - list2 = new WebGLRenderList(); - lists.get(scene).push(list2); - } else { - list2 = lists.get(scene)[renderCallDepth]; - } - } - return list2; + setValue(value) { + this.setState(__spreadValues({}, this.parse(value))); } - function dispose() { - lists = /* @__PURE__ */ new WeakMap(); + updateData(data) { + this.setState(data, false); + this.parent.trigger(this.props.onchange, this.props.key, this.getValue(), this.props.params); } - return { - get: get2, - dispose - }; } -function UniformsCache() { - const lights = {}; - return { - get: function(light2) { - if (lights[light2.id] !== void 0) { - return lights[light2.id]; - } - let uniforms; - switch (light2.type) { - case "DirectionalLight": - uniforms = { - direction: new Vector3(), - color: new Color() - }; - break; - case "SpotLight": - uniforms = { - position: new Vector3(), - direction: new Vector3(), - color: new Color(), - distance: 0, - coneCos: 0, - penumbraCos: 0, - decay: 0 - }; - break; - case "PointLight": - uniforms = { - position: new Vector3(), - color: new Color(), - distance: 0, - decay: 0 - }; - break; - case "HemisphereLight": - uniforms = { - direction: new Vector3(), - skyColor: new Color(), - groundColor: new Color() - }; - break; - case "RectAreaLight": - uniforms = { - color: new Color(), - position: new Vector3(), - halfWidth: new Vector3(), - halfHeight: new Vector3() - }; - break; +var dancingStroke = [ + { + type: "SourceAlpha", + id: "strokeSource", + bound: { x: 100, y: 100 }, + connected: [ + { + id: "morphology" } - lights[light2.id] = uniforms; - return uniforms; - } - }; -} -function ShadowUniformsCache() { - const lights = {}; - return { - get: function(light2) { - if (lights[light2.id] !== void 0) { - return lights[light2.id]; - } - let uniforms; - switch (light2.type) { - case "DirectionalLight": - uniforms = { - shadowBias: 0, - shadowNormalBias: 0, - shadowRadius: 1, - shadowMapSize: new Vector2() - }; - break; - case "SpotLight": - uniforms = { - shadowBias: 0, - shadowNormalBias: 0, - shadowRadius: 1, - shadowMapSize: new Vector2() - }; - break; - case "PointLight": - uniforms = { - shadowBias: 0, - shadowNormalBias: 0, - shadowRadius: 1, - shadowMapSize: new Vector2(), - shadowCameraNear: 1, - shadowCameraFar: 1e3 - }; - break; + ] + }, + { + type: "Morphology", + id: "morphology", + operator: "dilate", + radius: "3 3", + bound: { x: 100, y: 200 }, + in: [{ id: "strokeSource" }], + connected: [{ id: "composite" }] + }, + { + type: "Flood", + id: "flood", + bound: { x: 100, y: 200 }, + color: "#30597E", + opacity: 1, + connected: [{ id: "composite" }] + }, + { + type: "Composite", + id: "composite", + bound: { x: 400, y: 150 }, + in: [{ id: "flood" }, { id: "morphology" }], + operator: "in", + connected: [ + { + id: "composite2" } - lights[light2.id] = uniforms; - return uniforms; - } - }; -} -let nextVersion = 0; -function shadowCastingLightsFirst(lightA, lightB) { - return (lightB.castShadow ? 1 : 0) - (lightA.castShadow ? 1 : 0); -} -function WebGLLights(extensions, capabilities) { - const cache = new UniformsCache(); - const shadowCache = ShadowUniformsCache(); - const state = { - version: 0, - hash: { - directionalLength: -1, - pointLength: -1, - spotLength: -1, - rectAreaLength: -1, - hemiLength: -1, - numDirectionalShadows: -1, - numPointShadows: -1, - numSpotShadows: -1 - }, - ambient: [0, 0, 0], - probe: [], - directional: [], - directionalShadow: [], - directionalShadowMap: [], - directionalShadowMatrix: [], - spot: [], - spotShadow: [], - spotShadowMap: [], - spotShadowMatrix: [], - rectArea: [], - rectAreaLTC1: null, - rectAreaLTC2: null, - point: [], - pointShadow: [], - pointShadowMap: [], - pointShadowMatrix: [], - hemi: [] - }; - for (let i = 0; i < 9; i++) - state.probe.push(new Vector3()); - const vector3 = new Vector3(); - const matrix4 = new Matrix4(); - const matrix42 = new Matrix4(); - function setup(lights, physicallyCorrectLights) { - let r = 0, g = 0, b = 0; - for (let i = 0; i < 9; i++) - state.probe[i].set(0, 0, 0); - let directionalLength = 0; - let pointLength = 0; - let spotLength = 0; - let rectAreaLength = 0; - let hemiLength = 0; - let numDirectionalShadows = 0; - let numPointShadows = 0; - let numSpotShadows = 0; - lights.sort(shadowCastingLightsFirst); - const scaleFactor = physicallyCorrectLights !== true ? Math.PI : 1; - for (let i = 0, l = lights.length; i < l; i++) { - const light2 = lights[i]; - const color2 = light2.color; - const intensity = light2.intensity; - const distance2 = light2.distance; - const shadowMap = light2.shadow && light2.shadow.map ? light2.shadow.map.texture : null; - if (light2.isAmbientLight) { - r += color2.r * intensity * scaleFactor; - g += color2.g * intensity * scaleFactor; - b += color2.b * intensity * scaleFactor; - } else if (light2.isLightProbe) { - for (let j = 0; j < 9; j++) { - state.probe[j].addScaledVector(light2.sh.coefficients[j], intensity); - } - } else if (light2.isDirectionalLight) { - const uniforms = cache.get(light2); - uniforms.color.copy(light2.color).multiplyScalar(light2.intensity * scaleFactor); - if (light2.castShadow) { - const shadow2 = light2.shadow; - const shadowUniforms = shadowCache.get(light2); - shadowUniforms.shadowBias = shadow2.bias; - shadowUniforms.shadowNormalBias = shadow2.normalBias; - shadowUniforms.shadowRadius = shadow2.radius; - shadowUniforms.shadowMapSize = shadow2.mapSize; - state.directionalShadow[directionalLength] = shadowUniforms; - state.directionalShadowMap[directionalLength] = shadowMap; - state.directionalShadowMatrix[directionalLength] = light2.shadow.matrix; - numDirectionalShadows++; - } - state.directional[directionalLength] = uniforms; - directionalLength++; - } else if (light2.isSpotLight) { - const uniforms = cache.get(light2); - uniforms.position.setFromMatrixPosition(light2.matrixWorld); - uniforms.color.copy(color2).multiplyScalar(intensity * scaleFactor); - uniforms.distance = distance2; - uniforms.coneCos = Math.cos(light2.angle); - uniforms.penumbraCos = Math.cos(light2.angle * (1 - light2.penumbra)); - uniforms.decay = light2.decay; - if (light2.castShadow) { - const shadow2 = light2.shadow; - const shadowUniforms = shadowCache.get(light2); - shadowUniforms.shadowBias = shadow2.bias; - shadowUniforms.shadowNormalBias = shadow2.normalBias; - shadowUniforms.shadowRadius = shadow2.radius; - shadowUniforms.shadowMapSize = shadow2.mapSize; - state.spotShadow[spotLength] = shadowUniforms; - state.spotShadowMap[spotLength] = shadowMap; - state.spotShadowMatrix[spotLength] = light2.shadow.matrix; - numSpotShadows++; - } - state.spot[spotLength] = uniforms; - spotLength++; - } else if (light2.isRectAreaLight) { - const uniforms = cache.get(light2); - uniforms.color.copy(color2).multiplyScalar(intensity); - uniforms.halfWidth.set(light2.width * 0.5, 0, 0); - uniforms.halfHeight.set(0, light2.height * 0.5, 0); - state.rectArea[rectAreaLength] = uniforms; - rectAreaLength++; - } else if (light2.isPointLight) { - const uniforms = cache.get(light2); - uniforms.color.copy(light2.color).multiplyScalar(light2.intensity * scaleFactor); - uniforms.distance = light2.distance; - uniforms.decay = light2.decay; - if (light2.castShadow) { - const shadow2 = light2.shadow; - const shadowUniforms = shadowCache.get(light2); - shadowUniforms.shadowBias = shadow2.bias; - shadowUniforms.shadowNormalBias = shadow2.normalBias; - shadowUniforms.shadowRadius = shadow2.radius; - shadowUniforms.shadowMapSize = shadow2.mapSize; - shadowUniforms.shadowCameraNear = shadow2.camera.near; - shadowUniforms.shadowCameraFar = shadow2.camera.far; - state.pointShadow[pointLength] = shadowUniforms; - state.pointShadowMap[pointLength] = shadowMap; - state.pointShadowMatrix[pointLength] = light2.shadow.matrix; - numPointShadows++; - } - state.point[pointLength] = uniforms; - pointLength++; - } else if (light2.isHemisphereLight) { - const uniforms = cache.get(light2); - uniforms.skyColor.copy(light2.color).multiplyScalar(intensity * scaleFactor); - uniforms.groundColor.copy(light2.groundColor).multiplyScalar(intensity * scaleFactor); - state.hemi[hemiLength] = uniforms; - hemiLength++; - } - } - if (rectAreaLength > 0) { - if (capabilities.isWebGL2) { - state.rectAreaLTC1 = UniformsLib.LTC_FLOAT_1; - state.rectAreaLTC2 = UniformsLib.LTC_FLOAT_2; - } else { - if (extensions.has("OES_texture_float_linear") === true) { - state.rectAreaLTC1 = UniformsLib.LTC_FLOAT_1; - state.rectAreaLTC2 = UniformsLib.LTC_FLOAT_2; - } else if (extensions.has("OES_texture_half_float_linear") === true) { - state.rectAreaLTC1 = UniformsLib.LTC_HALF_1; - state.rectAreaLTC2 = UniformsLib.LTC_HALF_2; - } else { - console.error("THREE.WebGLRenderer: Unable to use RectAreaLight. Missing WebGL extensions."); - } + ] + }, + { + type: "SourceAlpha", + id: "strokeSourceAlpha2", + bound: { x: 400, y: 200 }, + connected: [ + { + id: "composite2" } - } - state.ambient[0] = r; - state.ambient[1] = g; - state.ambient[2] = b; - const hash = state.hash; - if (hash.directionalLength !== directionalLength || hash.pointLength !== pointLength || hash.spotLength !== spotLength || hash.rectAreaLength !== rectAreaLength || hash.hemiLength !== hemiLength || hash.numDirectionalShadows !== numDirectionalShadows || hash.numPointShadows !== numPointShadows || hash.numSpotShadows !== numSpotShadows) { - state.directional.length = directionalLength; - state.spot.length = spotLength; - state.rectArea.length = rectAreaLength; - state.point.length = pointLength; - state.hemi.length = hemiLength; - state.directionalShadow.length = numDirectionalShadows; - state.directionalShadowMap.length = numDirectionalShadows; - state.pointShadow.length = numPointShadows; - state.pointShadowMap.length = numPointShadows; - state.spotShadow.length = numSpotShadows; - state.spotShadowMap.length = numSpotShadows; - state.directionalShadowMatrix.length = numDirectionalShadows; - state.pointShadowMatrix.length = numPointShadows; - state.spotShadowMatrix.length = numSpotShadows; - hash.directionalLength = directionalLength; - hash.pointLength = pointLength; - hash.spotLength = spotLength; - hash.rectAreaLength = rectAreaLength; - hash.hemiLength = hemiLength; - hash.numDirectionalShadows = numDirectionalShadows; - hash.numPointShadows = numPointShadows; - hash.numSpotShadows = numSpotShadows; - state.version = nextVersion++; - } - } - function setupView(lights, camera) { - let directionalLength = 0; - let pointLength = 0; - let spotLength = 0; - let rectAreaLength = 0; - let hemiLength = 0; - const viewMatrix = camera.matrixWorldInverse; - for (let i = 0, l = lights.length; i < l; i++) { - const light2 = lights[i]; - if (light2.isDirectionalLight) { - const uniforms = state.directional[directionalLength]; - uniforms.direction.setFromMatrixPosition(light2.matrixWorld); - vector3.setFromMatrixPosition(light2.target.matrixWorld); - uniforms.direction.sub(vector3); - uniforms.direction.transformDirection(viewMatrix); - directionalLength++; - } else if (light2.isSpotLight) { - const uniforms = state.spot[spotLength]; - uniforms.position.setFromMatrixPosition(light2.matrixWorld); - uniforms.position.applyMatrix4(viewMatrix); - uniforms.direction.setFromMatrixPosition(light2.matrixWorld); - vector3.setFromMatrixPosition(light2.target.matrixWorld); - uniforms.direction.sub(vector3); - uniforms.direction.transformDirection(viewMatrix); - spotLength++; - } else if (light2.isRectAreaLight) { - const uniforms = state.rectArea[rectAreaLength]; - uniforms.position.setFromMatrixPosition(light2.matrixWorld); - uniforms.position.applyMatrix4(viewMatrix); - matrix42.identity(); - matrix4.copy(light2.matrixWorld); - matrix4.premultiply(viewMatrix); - matrix42.extractRotation(matrix4); - uniforms.halfWidth.set(light2.width * 0.5, 0, 0); - uniforms.halfHeight.set(0, light2.height * 0.5, 0); - uniforms.halfWidth.applyMatrix4(matrix42); - uniforms.halfHeight.applyMatrix4(matrix42); - rectAreaLength++; - } else if (light2.isPointLight) { - const uniforms = state.point[pointLength]; - uniforms.position.setFromMatrixPosition(light2.matrixWorld); - uniforms.position.applyMatrix4(viewMatrix); - pointLength++; - } else if (light2.isHemisphereLight) { - const uniforms = state.hemi[hemiLength]; - uniforms.direction.setFromMatrixPosition(light2.matrixWorld); - uniforms.direction.transformDirection(viewMatrix); - uniforms.direction.normalize(); - hemiLength++; + ] + }, + { + type: "Composite", + id: "composite2", + bound: { x: 400, y: 150 }, + in: [{ id: "composite" }, { id: "strokeSourceAlpha2" }], + operator: "out", + connected: [ + { + id: "displacementMap" } - } - } - return { - setup, - setupView, - state - }; -} -function WebGLRenderState(extensions, capabilities) { - const lights = new WebGLLights(extensions, capabilities); - const lightsArray = []; - const shadowsArray = []; - function init() { - lightsArray.length = 0; - shadowsArray.length = 0; - } - function pushLight(light2) { - lightsArray.push(light2); - } - function pushShadow(shadowLight) { - shadowsArray.push(shadowLight); - } - function setupLights(physicallyCorrectLights) { - lights.setup(lightsArray, physicallyCorrectLights); - } - function setupLightsView(camera) { - lights.setupView(lightsArray, camera); - } - const state = { - lightsArray, - shadowsArray, - lights - }; - return { - init, - state, - setupLights, - setupLightsView, - pushLight, - pushShadow - }; -} -function WebGLRenderStates(extensions, capabilities) { - let renderStates = /* @__PURE__ */ new WeakMap(); - function get2(scene, renderCallDepth = 0) { - let renderState; - if (renderStates.has(scene) === false) { - renderState = new WebGLRenderState(extensions, capabilities); - renderStates.set(scene, [renderState]); - } else { - if (renderCallDepth >= renderStates.get(scene).length) { - renderState = new WebGLRenderState(extensions, capabilities); - renderStates.get(scene).push(renderState); - } else { - renderState = renderStates.get(scene)[renderCallDepth]; + ] + }, + { + type: "Turbulence", + id: "turbulence", + filterType: "fractalNoise", + baseFrequency: "0.01 0.02", + numOctaves: 1, + seed: 0, + stitchTiles: "stitch", + bound: { x: 400, y: 200 }, + connected: [ + { + id: "displacementMap" } - } - return renderState; - } - function dispose() { - renderStates = /* @__PURE__ */ new WeakMap(); - } - return { - get: get2, - dispose - }; -} -class MeshDepthMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshDepthMaterial"; - this.depthPacking = BasicDepthPacking; - this.map = null; - this.alphaMap = null; - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.fog = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.depthPacking = source2.depthPacking; - this.map = source2.map; - this.alphaMap = source2.alphaMap; - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - return this; - } -} -MeshDepthMaterial.prototype.isMeshDepthMaterial = true; -class MeshDistanceMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshDistanceMaterial"; - this.referencePosition = new Vector3(); - this.nearDistance = 1; - this.farDistance = 1e3; - this.map = null; - this.alphaMap = null; - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.fog = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.referencePosition.copy(source2.referencePosition); - this.nearDistance = source2.nearDistance; - this.farDistance = source2.farDistance; - this.map = source2.map; - this.alphaMap = source2.alphaMap; - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - return this; - } -} -MeshDistanceMaterial.prototype.isMeshDistanceMaterial = true; -const vertex = "void main() {\n gl_Position = vec4( position, 1.0 );\n}"; -const fragment = "uniform sampler2D shadow_pass;\nuniform vec2 resolution;\nuniform float radius;\n#include \nvoid main() {\n const float samples = float( VSM_SAMPLES );\n float mean = 0.0;\n float squared_mean = 0.0;\n float uvStride = samples <= 1.0 ? 0.0 : 2.0 / ( samples - 1.0 );\n float uvStart = samples <= 1.0 ? 0.0 : - 1.0;\n for ( float i = 0.0; i < samples; i ++ ) {\n float uvOffset = uvStart + i * uvStride;\n #ifdef HORIZONTAL_PASS\n vec2 distribution = unpackRGBATo2Half( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( uvOffset, 0.0 ) * radius ) / resolution ) );\n mean += distribution.x;\n squared_mean += distribution.y * distribution.y + distribution.x * distribution.x;\n #else\n float depth = unpackRGBAToDepth( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( 0.0, uvOffset ) * radius ) / resolution ) );\n mean += depth;\n squared_mean += depth * depth;\n #endif\n }\n mean = mean / samples;\n squared_mean = squared_mean / samples;\n float std_dev = sqrt( squared_mean - mean * mean );\n gl_FragColor = pack2HalfToRGBA( vec2( mean, std_dev ) );\n}"; -function WebGLShadowMap(_renderer, _objects, _capabilities) { - let _frustum = new Frustum(); - const _shadowMapSize = new Vector2(), _viewportSize = new Vector2(), _viewport = new Vector4(), _depthMaterial = new MeshDepthMaterial({ depthPacking: RGBADepthPacking }), _distanceMaterial = new MeshDistanceMaterial(), _materialCache = {}, _maxTextureSize = _capabilities.maxTextureSize; - const shadowSide = { 0: BackSide, 1: FrontSide, 2: DoubleSide }; - const shadowMaterialVertical = new ShaderMaterial({ - defines: { - VSM_SAMPLES: 8 - }, - uniforms: { - shadow_pass: { value: null }, - resolution: { value: new Vector2() }, - radius: { value: 4 } - }, - vertexShader: vertex, - fragmentShader: fragment - }); - const shadowMaterialHorizontal = shadowMaterialVertical.clone(); - shadowMaterialHorizontal.defines.HORIZONTAL_PASS = 1; - const fullScreenTri = new BufferGeometry(); - fullScreenTri.setAttribute("position", new BufferAttribute(new Float32Array([-1, -1, 0.5, 3, -1, 0.5, -1, 3, 0.5]), 3)); - const fullScreenMesh = new Mesh(fullScreenTri, shadowMaterialVertical); - const scope = this; - this.enabled = false; - this.autoUpdate = true; - this.needsUpdate = false; - this.type = PCFShadowMap; - this.render = function(lights, scene, camera) { - if (scope.enabled === false) - return; - if (scope.autoUpdate === false && scope.needsUpdate === false) - return; - if (lights.length === 0) - return; - const currentRenderTarget = _renderer.getRenderTarget(); - const activeCubeFace = _renderer.getActiveCubeFace(); - const activeMipmapLevel = _renderer.getActiveMipmapLevel(); - const _state2 = _renderer.state; - _state2.setBlending(NoBlending); - _state2.buffers.color.setClear(1, 1, 1, 1); - _state2.buffers.depth.setTest(true); - _state2.setScissorTest(false); - for (let i = 0, il = lights.length; i < il; i++) { - const light2 = lights[i]; - const shadow2 = light2.shadow; - if (shadow2 === void 0) { - console.warn("THREE.WebGLShadowMap:", light2, "has no shadow."); - continue; + ] + }, + { + type: "DisplacementMap", + id: "displacementMap", + scale: 17, + xChannelSelector: "A", + yChannelSelector: "A", + bound: { x: 400, y: 200 }, + in: [{ id: "composite2" }, { id: "turbulence" }], + connected: [ + { + id: "merge" } - if (shadow2.autoUpdate === false && shadow2.needsUpdate === false) - continue; - _shadowMapSize.copy(shadow2.mapSize); - const shadowFrameExtents = shadow2.getFrameExtents(); - _shadowMapSize.multiply(shadowFrameExtents); - _viewportSize.copy(shadow2.mapSize); - if (_shadowMapSize.x > _maxTextureSize || _shadowMapSize.y > _maxTextureSize) { - if (_shadowMapSize.x > _maxTextureSize) { - _viewportSize.x = Math.floor(_maxTextureSize / shadowFrameExtents.x); - _shadowMapSize.x = _viewportSize.x * shadowFrameExtents.x; - shadow2.mapSize.x = _viewportSize.x; - } - if (_shadowMapSize.y > _maxTextureSize) { - _viewportSize.y = Math.floor(_maxTextureSize / shadowFrameExtents.y); - _shadowMapSize.y = _viewportSize.y * shadowFrameExtents.y; - shadow2.mapSize.y = _viewportSize.y; - } + ] + }, + { + type: "SourceGraphic", + id: "strokeSourceGraphic", + bound: { x: 400, y: 200 }, + connected: [ + { + id: "merge" } - if (shadow2.map === null && !shadow2.isPointLightShadow && this.type === VSMShadowMap) { - shadow2.map = new WebGLRenderTarget(_shadowMapSize.x, _shadowMapSize.y); - shadow2.map.texture.name = light2.name + ".shadowMap"; - shadow2.mapPass = new WebGLRenderTarget(_shadowMapSize.x, _shadowMapSize.y); - shadow2.camera.updateProjectionMatrix(); - } - if (shadow2.map === null) { - const pars = { minFilter: NearestFilter, magFilter: NearestFilter, format: RGBAFormat }; - shadow2.map = new WebGLRenderTarget(_shadowMapSize.x, _shadowMapSize.y, pars); - shadow2.map.texture.name = light2.name + ".shadowMap"; - shadow2.camera.updateProjectionMatrix(); - } - _renderer.setRenderTarget(shadow2.map); - _renderer.clear(); - const viewportCount = shadow2.getViewportCount(); - for (let vp = 0; vp < viewportCount; vp++) { - const viewport = shadow2.getViewport(vp); - _viewport.set(_viewportSize.x * viewport.x, _viewportSize.y * viewport.y, _viewportSize.x * viewport.z, _viewportSize.y * viewport.w); - _state2.viewport(_viewport); - shadow2.updateMatrices(light2, vp); - _frustum = shadow2.getFrustum(); - renderObject(scene, camera, shadow2.camera, light2, this.type); - } - if (!shadow2.isPointLightShadow && this.type === VSMShadowMap) { - VSMPass(shadow2, camera); - } - shadow2.needsUpdate = false; - } - scope.needsUpdate = false; - _renderer.setRenderTarget(currentRenderTarget, activeCubeFace, activeMipmapLevel); - }; - function VSMPass(shadow2, camera) { - const geometry = _objects.update(fullScreenMesh); - if (shadowMaterialVertical.defines.VSM_SAMPLES !== shadow2.blurSamples) { - shadowMaterialVertical.defines.VSM_SAMPLES = shadow2.blurSamples; - shadowMaterialHorizontal.defines.VSM_SAMPLES = shadow2.blurSamples; - shadowMaterialVertical.needsUpdate = true; - shadowMaterialHorizontal.needsUpdate = true; - } - shadowMaterialVertical.uniforms.shadow_pass.value = shadow2.map.texture; - shadowMaterialVertical.uniforms.resolution.value = shadow2.mapSize; - shadowMaterialVertical.uniforms.radius.value = shadow2.radius; - _renderer.setRenderTarget(shadow2.mapPass); - _renderer.clear(); - _renderer.renderBufferDirect(camera, null, geometry, shadowMaterialVertical, fullScreenMesh, null); - shadowMaterialHorizontal.uniforms.shadow_pass.value = shadow2.mapPass.texture; - shadowMaterialHorizontal.uniforms.resolution.value = shadow2.mapSize; - shadowMaterialHorizontal.uniforms.radius.value = shadow2.radius; - _renderer.setRenderTarget(shadow2.map); - _renderer.clear(); - _renderer.renderBufferDirect(camera, null, geometry, shadowMaterialHorizontal, fullScreenMesh, null); - } - function getDepthMaterial(object, material, light2, shadowCameraNear, shadowCameraFar, type) { - let result = null; - const customMaterial = light2.isPointLight === true ? object.customDistanceMaterial : object.customDepthMaterial; - if (customMaterial !== void 0) { - result = customMaterial; - } else { - result = light2.isPointLight === true ? _distanceMaterial : _depthMaterial; - } - if (_renderer.localClippingEnabled && material.clipShadows === true && material.clippingPlanes.length !== 0 || material.displacementMap && material.displacementScale !== 0 || material.alphaMap && material.alphaTest > 0) { - const keyA = result.uuid, keyB = material.uuid; - let materialsForVariant = _materialCache[keyA]; - if (materialsForVariant === void 0) { - materialsForVariant = {}; - _materialCache[keyA] = materialsForVariant; - } - let cachedMaterial = materialsForVariant[keyB]; - if (cachedMaterial === void 0) { - cachedMaterial = result.clone(); - materialsForVariant[keyB] = cachedMaterial; - } - result = cachedMaterial; - } - result.visible = material.visible; - result.wireframe = material.wireframe; - if (type === VSMShadowMap) { - result.side = material.shadowSide !== null ? material.shadowSide : material.side; - } else { - result.side = material.shadowSide !== null ? material.shadowSide : shadowSide[material.side]; - } - result.alphaMap = material.alphaMap; - result.alphaTest = material.alphaTest; - result.clipShadows = material.clipShadows; - result.clippingPlanes = material.clippingPlanes; - result.clipIntersection = material.clipIntersection; - result.displacementMap = material.displacementMap; - result.displacementScale = material.displacementScale; - result.displacementBias = material.displacementBias; - result.wireframeLinewidth = material.wireframeLinewidth; - result.linewidth = material.linewidth; - if (light2.isPointLight === true && result.isMeshDistanceMaterial === true) { - result.referencePosition.setFromMatrixPosition(light2.matrixWorld); - result.nearDistance = shadowCameraNear; - result.farDistance = shadowCameraFar; - } - return result; + ] + }, + { + type: "Merge", + id: "merge", + bound: { x: 500, y: 150 }, + in: [{ id: "strokeSourceGraphic" }, { id: "displacementMap" }] } - function renderObject(object, camera, shadowCamera, light2, type) { - if (object.visible === false) - return; - const visible2 = object.layers.test(camera.layers); - if (visible2 && (object.isMesh || object.isLine || object.isPoints)) { - if ((object.castShadow || object.receiveShadow && type === VSMShadowMap) && (!object.frustumCulled || _frustum.intersectsObject(object))) { - object.modelViewMatrix.multiplyMatrices(shadowCamera.matrixWorldInverse, object.matrixWorld); - const geometry = _objects.update(object); - const material = object.material; - if (Array.isArray(material)) { - const groups = geometry.groups; - for (let k = 0, kl = groups.length; k < kl; k++) { - const group2 = groups[k]; - const groupMaterial = material[group2.materialIndex]; - if (groupMaterial && groupMaterial.visible) { - const depthMaterial = getDepthMaterial(object, groupMaterial, light2, shadowCamera.near, shadowCamera.far, type); - _renderer.renderBufferDirect(shadowCamera, null, geometry, depthMaterial, object, group2); - } - } - } else if (material.visible) { - const depthMaterial = getDepthMaterial(object, material, light2, shadowCamera.near, shadowCamera.far, type); - _renderer.renderBufferDirect(shadowCamera, null, geometry, depthMaterial, object, null); - } - } - } - const children2 = object.children; - for (let i = 0, l = children2.length; i < l; i++) { - renderObject(children2[i], camera, shadowCamera, light2, type); - } +]; +var grayscale = [ + { + type: "Saturate", + values: "0" } -} -function WebGLState(gl, extensions, capabilities) { - const isWebGL2 = capabilities.isWebGL2; - function ColorBuffer() { - let locked = false; - const color2 = new Vector4(); - let currentColorMask = null; - const currentColorClear = new Vector4(0, 0, 0, 0); - return { - setMask: function(colorMask) { - if (currentColorMask !== colorMask && !locked) { - gl.colorMask(colorMask, colorMask, colorMask, colorMask); - currentColorMask = colorMask; - } - }, - setLocked: function(lock2) { - locked = lock2; - }, - setClear: function(r, g, b, a, premultipliedAlpha) { - if (premultipliedAlpha === true) { - r *= a; - g *= a; - b *= a; - } - color2.set(r, g, b, a); - if (currentColorClear.equals(color2) === false) { - gl.clearColor(r, g, b, a); - currentColorClear.copy(color2); - } - }, - reset: function() { - locked = false; - currentColorMask = null; - currentColorClear.set(-1, 0, 0, 0); +]; +var innerShadow = [ + { + type: "Flood", + id: "flood", + bound: { x: 100, y: 200 }, + color: "black", + opacity: 1, + connected: [{ id: "composite1" }] + }, + { + type: "SourceAlpha", + id: "shadowSource", + bound: { x: 100, y: 100 }, + connected: [ + { + id: "composite1" } - }; - } - function DepthBuffer() { - let locked = false; - let currentDepthMask = null; - let currentDepthFunc = null; - let currentDepthClear = null; - return { - setTest: function(depthTest) { - if (depthTest) { - enable(2929); - } else { - disable(2929); - } - }, - setMask: function(depthMask) { - if (currentDepthMask !== depthMask && !locked) { - gl.depthMask(depthMask); - currentDepthMask = depthMask; - } - }, - setFunc: function(depthFunc) { - if (currentDepthFunc !== depthFunc) { - if (depthFunc) { - switch (depthFunc) { - case NeverDepth: - gl.depthFunc(512); - break; - case AlwaysDepth: - gl.depthFunc(519); - break; - case LessDepth: - gl.depthFunc(513); - break; - case LessEqualDepth: - gl.depthFunc(515); - break; - case EqualDepth: - gl.depthFunc(514); - break; - case GreaterEqualDepth: - gl.depthFunc(518); - break; - case GreaterDepth: - gl.depthFunc(516); - break; - case NotEqualDepth: - gl.depthFunc(517); - break; - default: - gl.depthFunc(515); - } - } else { - gl.depthFunc(515); - } - currentDepthFunc = depthFunc; - } - }, - setLocked: function(lock2) { - locked = lock2; - }, - setClear: function(depth) { - if (currentDepthClear !== depth) { - gl.clearDepth(depth); - currentDepthClear = depth; - } - }, - reset: function() { - locked = false; - currentDepthMask = null; - currentDepthFunc = null; - currentDepthClear = null; + ] + }, + { + type: "Composite", + id: "composite1", + bound: { x: 200, y: 150 }, + in: [{ id: "flood" }, { id: "shadowSource" }], + operator: "out", + connected: [ + { + id: "offset" + } + ] + }, + { + type: "Offset", + id: "offset", + bound: { x: 300, y: 150 }, + dx: 4, + dy: 4, + in: [{ id: "composite1" }], + connected: [{ id: "blur" }] + }, + { + type: "GaussianBlur", + id: "blur", + bound: { x: 400, y: 150 }, + stdDeviationX: 4, + stdDeviationY: 4, + edge: "none", + in: [{ id: "offset" }], + connected: [ + { + id: "composite2" } - }; - } - function StencilBuffer() { - let locked = false; - let currentStencilMask = null; - let currentStencilFunc = null; - let currentStencilRef = null; - let currentStencilFuncMask = null; - let currentStencilFail = null; - let currentStencilZFail = null; - let currentStencilZPass = null; - let currentStencilClear = null; - return { - setTest: function(stencilTest) { - if (!locked) { - if (stencilTest) { - enable(2960); - } else { - disable(2960); - } - } - }, - setMask: function(stencilMask) { - if (currentStencilMask !== stencilMask && !locked) { - gl.stencilMask(stencilMask); - currentStencilMask = stencilMask; - } - }, - setFunc: function(stencilFunc, stencilRef, stencilMask) { - if (currentStencilFunc !== stencilFunc || currentStencilRef !== stencilRef || currentStencilFuncMask !== stencilMask) { - gl.stencilFunc(stencilFunc, stencilRef, stencilMask); - currentStencilFunc = stencilFunc; - currentStencilRef = stencilRef; - currentStencilFuncMask = stencilMask; - } - }, - setOp: function(stencilFail, stencilZFail, stencilZPass) { - if (currentStencilFail !== stencilFail || currentStencilZFail !== stencilZFail || currentStencilZPass !== stencilZPass) { - gl.stencilOp(stencilFail, stencilZFail, stencilZPass); - currentStencilFail = stencilFail; - currentStencilZFail = stencilZFail; - currentStencilZPass = stencilZPass; - } - }, - setLocked: function(lock2) { - locked = lock2; - }, - setClear: function(stencil) { - if (currentStencilClear !== stencil) { - gl.clearStencil(stencil); - currentStencilClear = stencil; - } - }, - reset: function() { - locked = false; - currentStencilMask = null; - currentStencilFunc = null; - currentStencilRef = null; - currentStencilFuncMask = null; - currentStencilFail = null; - currentStencilZFail = null; - currentStencilZPass = null; - currentStencilClear = null; + ] + }, + { + type: "SourceAlpha", + id: "shadowSource2", + bound: { x: 400, y: 250 }, + connected: [ + { + id: "composite2" } - }; - } - const colorBuffer = new ColorBuffer(); - const depthBuffer = new DepthBuffer(); - const stencilBuffer = new StencilBuffer(); - let enabledCapabilities = {}; - let currentBoundFramebuffers = {}; - let currentDrawbuffers = /* @__PURE__ */ new WeakMap(); - let defaultDrawbuffers = []; - let currentProgram = null; - let currentBlendingEnabled = false; - let currentBlending = null; - let currentBlendEquation = null; - let currentBlendSrc = null; - let currentBlendDst = null; - let currentBlendEquationAlpha = null; - let currentBlendSrcAlpha = null; - let currentBlendDstAlpha = null; - let currentPremultipledAlpha = false; - let currentFlipSided = null; - let currentCullFace = null; - let currentLineWidth = null; - let currentPolygonOffsetFactor = null; - let currentPolygonOffsetUnits = null; - const maxTextures = gl.getParameter(35661); - let lineWidthAvailable = false; - let version = 0; - const glVersion = gl.getParameter(7938); - if (glVersion.indexOf("WebGL") !== -1) { - version = parseFloat(/^WebGL (\d)/.exec(glVersion)[1]); - lineWidthAvailable = version >= 1; - } else if (glVersion.indexOf("OpenGL ES") !== -1) { - version = parseFloat(/^OpenGL ES (\d)/.exec(glVersion)[1]); - lineWidthAvailable = version >= 2; - } - let currentTextureSlot = null; - let currentBoundTextures = {}; - const scissorParam = gl.getParameter(3088); - const viewportParam = gl.getParameter(2978); - const currentScissor = new Vector4().fromArray(scissorParam); - const currentViewport = new Vector4().fromArray(viewportParam); - function createTexture(type, target, count) { - const data = new Uint8Array(4); - const texture2 = gl.createTexture(); - gl.bindTexture(type, texture2); - gl.texParameteri(type, 10241, 9728); - gl.texParameteri(type, 10240, 9728); - for (let i = 0; i < count; i++) { - gl.texImage2D(target + i, 0, 6408, 1, 1, 0, 6408, 5121, data); - } - return texture2; - } - const emptyTextures = {}; - emptyTextures[3553] = createTexture(3553, 3553, 1); - emptyTextures[34067] = createTexture(34067, 34069, 6); - colorBuffer.setClear(0, 0, 0, 1); - depthBuffer.setClear(1); - stencilBuffer.setClear(0); - enable(2929); - depthBuffer.setFunc(LessEqualDepth); - setFlipSided(false); - setCullFace(CullFaceBack); - enable(2884); - setBlending(NoBlending); - function enable(id) { - if (enabledCapabilities[id] !== true) { - gl.enable(id); - enabledCapabilities[id] = true; - } - } - function disable(id) { - if (enabledCapabilities[id] !== false) { - gl.disable(id); - enabledCapabilities[id] = false; - } - } - function bindFramebuffer(target, framebuffer) { - if (currentBoundFramebuffers[target] !== framebuffer) { - gl.bindFramebuffer(target, framebuffer); - currentBoundFramebuffers[target] = framebuffer; - if (isWebGL2) { - if (target === 36009) { - currentBoundFramebuffers[36160] = framebuffer; - } - if (target === 36160) { - currentBoundFramebuffers[36009] = framebuffer; - } + ] + }, + { + type: "Composite", + id: "composite2", + bound: { x: 500, y: 150 }, + in: [{ id: "blur" }, { id: "shadowSource2" }], + operator: "out", + connected: [ + { + id: "merge" } - return true; - } - return false; + ] + }, + { + type: "SourceGraphic", + id: "shadowSource3", + bound: { x: 500, y: 250 }, + connected: [ + { + id: "merge" + } + ] + }, + { + type: "Merge", + id: "merge", + bound: { x: 600, y: 150 }, + in: [{ id: "composite2" }, { id: "shadowSource3" }] } - function drawBuffers(renderTarget, framebuffer) { - let drawBuffers2 = defaultDrawbuffers; - let needsUpdate = false; - if (renderTarget) { - drawBuffers2 = currentDrawbuffers.get(framebuffer); - if (drawBuffers2 === void 0) { - drawBuffers2 = []; - currentDrawbuffers.set(framebuffer, drawBuffers2); - } - if (renderTarget.isWebGLMultipleRenderTargets) { - const textures = renderTarget.texture; - if (drawBuffers2.length !== textures.length || drawBuffers2[0] !== 36064) { - for (let i = 0, il = textures.length; i < il; i++) { - drawBuffers2[i] = 36064 + i; - } - drawBuffers2.length = textures.length; - needsUpdate = true; - } - } else { - if (drawBuffers2[0] !== 36064) { - drawBuffers2[0] = 36064; - needsUpdate = true; - } +]; +var shadow = [ + { + type: "SourceAlpha", + id: "shadowSource", + bound: { x: 100, y: 100 }, + connected: [ + { + id: "offset" } - } else { - if (drawBuffers2[0] !== 1029) { - drawBuffers2[0] = 1029; - needsUpdate = true; + ] + }, + { + type: "Offset", + id: "offset", + bound: { x: 200, y: 100 }, + dx: 10, + dy: 10, + in: [{ id: "shadowSource" }], + connected: [{ id: "blur" }] + }, + { + type: "GaussianBlur", + id: "blur", + bound: { x: 300, y: 100 }, + stdDeviationX: 5, + stdDeviationY: 5, + in: [{ id: "offset" }], + connected: [ + { + id: "composite" } - } - if (needsUpdate) { - if (capabilities.isWebGL2) { - gl.drawBuffers(drawBuffers2); - } else { - extensions.get("WEBGL_draw_buffers").drawBuffersWEBGL(drawBuffers2); + ] + }, + { + type: "Flood", + id: "flood", + bound: { x: 100, y: 200 }, + color: "black", + opacity: 0.7, + connected: [{ id: "composite" }] + }, + { + type: "Composite", + id: "composite", + bound: { x: 400, y: 150 }, + in: [{ id: "flood" }, { id: "blur" }], + operator: "in", + connected: [ + { + id: "merge" } - } - } - function useProgram(program) { - if (currentProgram !== program) { - gl.useProgram(program); - currentProgram = program; - return true; - } - return false; + ] + }, + { + type: "SourceAlpha", + id: "shadowSource2", + bound: { x: 400, y: 200 }, + connected: [ + { + id: "merge" + } + ] + }, + { + type: "Merge", + id: "merge", + bound: { x: 500, y: 150 }, + in: [{ id: "composite" }, { id: "shadowSource2" }] } - const equationToGL = { - [AddEquation]: 32774, - [SubtractEquation]: 32778, - [ReverseSubtractEquation]: 32779 - }; - if (isWebGL2) { - equationToGL[MinEquation] = 32775; - equationToGL[MaxEquation] = 32776; - } else { - const extension = extensions.get("EXT_blend_minmax"); - if (extension !== null) { - equationToGL[MinEquation] = extension.MIN_EXT; - equationToGL[MaxEquation] = extension.MAX_EXT; - } - } - const factorToGL = { - [ZeroFactor]: 0, - [OneFactor]: 1, - [SrcColorFactor]: 768, - [SrcAlphaFactor]: 770, - [SrcAlphaSaturateFactor]: 776, - [DstColorFactor]: 774, - [DstAlphaFactor]: 772, - [OneMinusSrcColorFactor]: 769, - [OneMinusSrcAlphaFactor]: 771, - [OneMinusDstColorFactor]: 775, - [OneMinusDstAlphaFactor]: 773 - }; - function setBlending(blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha, premultipliedAlpha) { - if (blending === NoBlending) { - if (currentBlendingEnabled === true) { - disable(3042); - currentBlendingEnabled = false; +]; +var stroke = [ + { + type: "SourceAlpha", + id: "strokeSource", + bound: { x: 100, y: 100 }, + connected: [ + { + id: "morphology" } - return; - } - if (currentBlendingEnabled === false) { - enable(3042); - currentBlendingEnabled = true; - } - if (blending !== CustomBlending) { - if (blending !== currentBlending || premultipliedAlpha !== currentPremultipledAlpha) { - if (currentBlendEquation !== AddEquation || currentBlendEquationAlpha !== AddEquation) { - gl.blendEquation(32774); - currentBlendEquation = AddEquation; - currentBlendEquationAlpha = AddEquation; - } - if (premultipliedAlpha) { - switch (blending) { - case NormalBlending: - gl.blendFuncSeparate(1, 771, 1, 771); - break; - case AdditiveBlending: - gl.blendFunc(1, 1); - break; - case SubtractiveBlending: - gl.blendFuncSeparate(0, 769, 0, 1); - break; - case MultiplyBlending: - gl.blendFuncSeparate(0, 768, 0, 770); - break; - default: - console.error("THREE.WebGLState: Invalid blending: ", blending); - break; - } - } else { - switch (blending) { - case NormalBlending: - gl.blendFuncSeparate(770, 771, 1, 771); - break; - case AdditiveBlending: - gl.blendFunc(770, 1); - break; - case SubtractiveBlending: - gl.blendFuncSeparate(0, 769, 0, 1); - break; - case MultiplyBlending: - gl.blendFunc(0, 768); - break; - default: - console.error("THREE.WebGLState: Invalid blending: ", blending); - break; - } - } - currentBlendSrc = null; - currentBlendDst = null; - currentBlendSrcAlpha = null; - currentBlendDstAlpha = null; - currentBlending = blending; - currentPremultipledAlpha = premultipliedAlpha; + ] + }, + { + type: "Morphology", + id: "morphology", + operator: "dilate", + radius: "3 3", + bound: { x: 100, y: 200 }, + in: [{ id: "strokeSource" }], + connected: [{ id: "composite" }] + }, + { + type: "Flood", + id: "flood", + bound: { x: 100, y: 200 }, + color: "#30597E", + opacity: 1, + connected: [{ id: "composite" }] + }, + { + type: "Composite", + id: "composite", + bound: { x: 400, y: 150 }, + in: [{ id: "flood" }, { id: "morphology" }], + operator: "in", + connected: [ + { + id: "merge" } - return; - } - blendEquationAlpha = blendEquationAlpha || blendEquation; - blendSrcAlpha = blendSrcAlpha || blendSrc; - blendDstAlpha = blendDstAlpha || blendDst; - if (blendEquation !== currentBlendEquation || blendEquationAlpha !== currentBlendEquationAlpha) { - gl.blendEquationSeparate(equationToGL[blendEquation], equationToGL[blendEquationAlpha]); - currentBlendEquation = blendEquation; - currentBlendEquationAlpha = blendEquationAlpha; - } - if (blendSrc !== currentBlendSrc || blendDst !== currentBlendDst || blendSrcAlpha !== currentBlendSrcAlpha || blendDstAlpha !== currentBlendDstAlpha) { - gl.blendFuncSeparate(factorToGL[blendSrc], factorToGL[blendDst], factorToGL[blendSrcAlpha], factorToGL[blendDstAlpha]); - currentBlendSrc = blendSrc; - currentBlendDst = blendDst; - currentBlendSrcAlpha = blendSrcAlpha; - currentBlendDstAlpha = blendDstAlpha; - } - currentBlending = blending; - currentPremultipledAlpha = null; - } - function setMaterial(material, frontFaceCW) { - material.side === DoubleSide ? disable(2884) : enable(2884); - let flipSided = material.side === BackSide; - if (frontFaceCW) - flipSided = !flipSided; - setFlipSided(flipSided); - material.blending === NormalBlending && material.transparent === false ? setBlending(NoBlending) : setBlending(material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha); - depthBuffer.setFunc(material.depthFunc); - depthBuffer.setTest(material.depthTest); - depthBuffer.setMask(material.depthWrite); - colorBuffer.setMask(material.colorWrite); - const stencilWrite = material.stencilWrite; - stencilBuffer.setTest(stencilWrite); - if (stencilWrite) { - stencilBuffer.setMask(material.stencilWriteMask); - stencilBuffer.setFunc(material.stencilFunc, material.stencilRef, material.stencilFuncMask); - stencilBuffer.setOp(material.stencilFail, material.stencilZFail, material.stencilZPass); - } - setPolygonOffset(material.polygonOffset, material.polygonOffsetFactor, material.polygonOffsetUnits); - material.alphaToCoverage === true ? enable(32926) : disable(32926); - } - function setFlipSided(flipSided) { - if (currentFlipSided !== flipSided) { - if (flipSided) { - gl.frontFace(2304); - } else { - gl.frontFace(2305); + ] + }, + { + type: "SourceGraphic", + id: "strokeSourceGraphic", + bound: { x: 400, y: 200 }, + connected: [ + { + id: "merge" } - currentFlipSided = flipSided; - } + ] + }, + { + type: "Merge", + id: "merge", + bound: { x: 500, y: 150 }, + in: [{ id: "composite" }, { id: "strokeSourceGraphic" }] } - function setCullFace(cullFace) { - if (cullFace !== CullFaceNone) { - enable(2884); - if (cullFace !== currentCullFace) { - if (cullFace === CullFaceBack) { - gl.cullFace(1029); - } else if (cullFace === CullFaceFront) { - gl.cullFace(1028); - } else { - gl.cullFace(1032); - } - } - } else { - disable(2884); - } - currentCullFace = cullFace; +]; +var svgFilterPreset = { + dancingStroke, + stroke, + grayscale, + shadow, + innerShadow +}; +var SVGFilterEditor$1 = ""; +const filterTypes = [ + { + label: "GRAPHIC REFERENCES", + items: [ + { label: "Source Graphic", value: "SourceGraphic" }, + { label: "Source Alpha", value: "SourceAlpha" }, + { label: "Background Image", value: "BackgroundImage" }, + { label: "Background Alpha", value: "BackgroundAlpha" }, + { label: "Fill Paint", value: "FillPaint" }, + { label: "Stroke Paint", value: "StrokePaint" } + ] + }, + { + label: "SOURCES", + items: [ + { label: "Flood", value: "Flood" }, + { label: "Turbulence", value: "Turbulence" }, + { label: "Image", value: "Image" } + ] + }, + { + label: "MODIFIER", + items: [ + { label: "Color Matrix", value: "ColorMatrix" }, + { label: "Saturate", value: "Saturate" }, + { label: "HueRotate", value: "HueRotate" }, + { label: "LuminanceToAlpha", value: "LuminanceAlpha" }, + { label: "Drop Shadow", value: "DropShadow" }, + { label: "Morphology", value: "Morphology" }, + { label: "Convolve Matrix", value: "ConvolveMatrix" }, + { label: "Offset", value: "Offset" }, + { label: "Gaussian Blur", value: "GaussianBlur" }, + { label: "Tile", value: "Tile" } + ] + }, + { + label: "LIGHTING", + items: [ + { label: "Specular Lighting", value: "SpecularLighting" }, + { label: "Diffuse Lighting", value: "DiffuseLighting" }, + { label: "Point Light", value: "PointLight" }, + { label: "Spot Light", value: "SpotLight" }, + { label: "Distant Light", value: "DistantLight" } + ] + }, + { + label: "COMBINERS", + items: [ + { label: "Blend", value: "Blend" }, + { label: "Composite", value: "Composite" }, + { label: "Merge", value: "Merge" }, + { label: "DisplacementMap", value: "DisplacementMap" } + ] } - function setLineWidth(width2) { - if (width2 !== currentLineWidth) { - if (lineWidthAvailable) - gl.lineWidth(width2); - currentLineWidth = width2; - } +]; +const SVGFilterTemplateList = [ + { + label: "Template", + items: [ + { label: "Grayscale", value: "grayscale" }, + { label: "Shadow", value: "shadow" }, + { label: "Inner Shadow", value: "innerShadow" }, + { label: "Stroke", value: "stroke" }, + { label: "Dancing Stroke", value: "dancingStroke" } + ] } - function setPolygonOffset(polygonOffset, factor, units) { - if (polygonOffset) { - enable(32823); - if (currentPolygonOffsetFactor !== factor || currentPolygonOffsetUnits !== units) { - gl.polygonOffset(factor, units); - currentPolygonOffsetFactor = factor; - currentPolygonOffsetUnits = units; - } - } else { - disable(32823); - } +]; +function getIcon(type) { + switch (type) { + case "SpecularLighting": + return iconUse("specular"); + case "DiffuseLighting": + return iconUse("diffuse"); + case "SourceGraphic": + case "SourceAlpha": + return iconUse("image"); + case "BackgroundImage": + case "BackgroundAlpha": + return iconUse("outline_image"); + case "Flood": + return iconUse("palette"); + case "Image": + return iconUse("landscape"); + case "GaussianBlur": + return iconUse("blur"); + case "ColorMatrix": + return iconUse("blur_linear"); + case "Turbulence": + return iconUse("waves"); + case "Saturate": + return iconUse("vintage"); + case "HueRotate": + return iconUse("looks"); + case "LuminanceAlpha": + return iconUse("opacity"); + case "DropShadow": + return iconUse("shadow"); + case "Morphology": + return iconUse("broken_image"); + case "ConvolveMatrix": + return iconUse("camera_roll"); + case "Offset": + return iconUse("transform"); + case "Tile": + return iconUse("view_comfy"); + case "Blend": + return iconUse("gradient"); + case "Composite": + return iconUse("merge"); + case "Merge": + return iconUse("settings_input_component"); + case "DisplacementMap": + return iconUse("texture"); } - function setScissorTest(scissorTest) { - if (scissorTest) { - enable(3089); - } else { - disable(3089); - } + return ""; +} +function getSourceTypeString(type) { + switch (type) { + case "SourceGraphic": + case "SourceAlpha": + case "BackgroundImage": + case "BackgroundAlpha": + case "FillPaint": + case "StrokePaint": + return "graphic"; + case "Flood": + case "Turbulence": + case "Image": + return "source"; + case "GaussianBlur": + case "ColorMatrix": + case "Saturate": + case "HueRotate": + case "LuminanceAlpha": + case "DropShadow": + case "Morphology": + case "ConvolveMatrix": + case "Offset": + case "Tile": + return "modifier"; + case "SpecularLighting": + case "DiffuseLighting": + case "SpotLight": + case "PointLight": + case "DistantLight": + return "lighting"; + case "Blend": + case "Composite": + case "Merge": + case "DisplacementMap": + return "combiner"; } - function activeTexture(webglSlot) { - if (webglSlot === void 0) - webglSlot = 33984 + maxTextures - 1; - if (currentTextureSlot !== webglSlot) { - gl.activeTexture(webglSlot); - currentTextureSlot = webglSlot; - } + return ""; +} +const width = 40; +const half_height = 20; +const connectedXAxis = { + 1: [width + 5] +}; +const connectedYAxis = { + 1: [half_height] +}; +const inXAxis = { + 1: [-7], + 2: [-7], + 3: [-7], + 4: [-7], + 5: [-7] +}; +let inYAxis = { + 1: [0], + 2: [-7, 7], + 3: [-14, 0, 14], + 4: [-21, -7, 7, 21], + 5: [-28, -14, 0, 14, 28] +}; +Object.keys(inYAxis).forEach((len2) => { + inYAxis[len2] = inYAxis[len2].map((it) => it + half_height); +}); +class SVGFilterEditor extends EditorElement { + makeFilterSelect() { + return ` + +
+ + ${mapjoin(filterTypes, (f) => { + return ` +
+ ${mapjoin(f.items, (i) => { + return ` +
+ ${getIcon(i.value)} + ${this.$i18n(i.label)} +
+ `; + })} +
+ `; + })} +
+ `; } - function bindTexture(webglType, webglTexture) { - if (currentTextureSlot === null) { - activeTexture(); - } - let boundTexture = currentBoundTextures[currentTextureSlot]; - if (boundTexture === void 0) { - boundTexture = { type: void 0, texture: void 0 }; - currentBoundTextures[currentTextureSlot] = boundTexture; - } - if (boundTexture.type !== webglType || boundTexture.texture !== webglTexture) { - gl.bindTexture(webglType, webglTexture || emptyTextures[webglType]); - boundTexture.type = webglType; - boundTexture.texture = webglTexture; - } + makeFilterTemplateSelect() { + return ` + +
+ + ${mapjoin(SVGFilterTemplateList, (f) => { + return ` +
+ ${mapjoin(f.items, (i) => { + return `
${this.$i18n(i.label)}
`; + })} +
+ `; + })} +
+ `; } - function unbindTexture() { - const boundTexture = currentBoundTextures[currentTextureSlot]; - if (boundTexture !== void 0 && boundTexture.type !== void 0) { - gl.bindTexture(boundTexture.type, null); - boundTexture.type = void 0; - boundTexture.texture = void 0; - } + initState() { + var filters = this.parseFilter(this.props.value || []); + return { + filters, + selectedTabIndex: 1, + selectedIndex: -1, + selectedFilter: null + }; } - function compressedTexImage2D() { - try { - gl.compressedTexImage2D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } + template() { + return ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ ${this.makeFilterSelect()} +
+
+ ${this.makeFilterTemplateSelect()} +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
`; } - function texSubImage2D() { - try { - gl.texSubImage2D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); + [CLICK("$header .tab-item:not(.empty-item)")](e) { + var selectedTabIndex = +e.$dt.attr("data-value"); + if (this.state.selectedTabIndex === selectedTabIndex) { + return; } + this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach((it) => it.removeClass("selected")); + this.$el.$$(`[data-value="${selectedTabIndex}"]`).forEach((it) => it.addClass("selected")); + this.setState({ selectedTabIndex }, false); } - function texSubImage3D() { - try { - gl.texSubImage3D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } + [DRAGSTART("$filterSelect .item")](e) { + var filter2 = e.$dt.attr("value"); + e.dataTransfer.setData("filter/type", filter2); } - function compressedTexSubImage2D() { - try { - gl.compressedTexSubImage2D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } + [DRAGOVER("$connectedLinePanel") + PREVENT]() { } - function texStorage2D() { - try { - gl.texStorage2D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } + [DROP("$connectedLinePanel") + PREVENT](e) { + var offset = { x: e.offsetX, y: e.offsetY }; + var filterType = e.dataTransfer.getData("filter/type"); + this.makeFilterNode(filterType, { bound: offset }); } - function texStorage3D() { - try { - gl.texStorage3D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } + makeFilterNode(filterType, opt = {}) { + this.state.filters.push(this.makeFilter(filterType, opt)); + this.state.selectedIndex = this.state.filters.length - 1; + this.state.selectedFilter = this.state.filters[this.state.selectedIndex]; + this.refresh(); + this.modifyFilter(); } - function texImage2D() { - try { - gl.texImage2D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); + applyTemplate(templateType) { + var template = svgFilterPreset[templateType]; + if (template) { + this.setState({ + selectedIndex: -1, + selectedFilter: null, + filters: this.parseFilter(template) + }, false); + this.refresh(); + this.modifyFilter(); } } - function texImage3D() { - try { - gl.texImage3D.apply(gl, arguments); - } catch (error) { - console.error("THREE.WebGLState:", error); - } - } - function scissor(scissor2) { - if (currentScissor.equals(scissor2) === false) { - gl.scissor(scissor2.x, scissor2.y, scissor2.z, scissor2.w); - currentScissor.copy(scissor2); - } - } - function viewport(viewport2) { - if (currentViewport.equals(viewport2) === false) { - gl.viewport(viewport2.x, viewport2.y, viewport2.z, viewport2.w); - currentViewport.copy(viewport2); - } - } - function reset() { - gl.disable(3042); - gl.disable(2884); - gl.disable(2929); - gl.disable(32823); - gl.disable(3089); - gl.disable(2960); - gl.disable(32926); - gl.blendEquation(32774); - gl.blendFunc(1, 0); - gl.blendFuncSeparate(1, 0, 1, 0); - gl.colorMask(true, true, true, true); - gl.clearColor(0, 0, 0, 0); - gl.depthMask(true); - gl.depthFunc(513); - gl.clearDepth(1); - gl.stencilMask(4294967295); - gl.stencilFunc(519, 0, 4294967295); - gl.stencilOp(7680, 7680, 7680); - gl.clearStencil(0); - gl.cullFace(1029); - gl.frontFace(2305); - gl.polygonOffset(0, 0); - gl.activeTexture(33984); - gl.bindFramebuffer(36160, null); - if (isWebGL2 === true) { - gl.bindFramebuffer(36009, null); - gl.bindFramebuffer(36008, null); - } - gl.useProgram(null); - gl.lineWidth(1); - gl.scissor(0, 0, gl.canvas.width, gl.canvas.height); - gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); - enabledCapabilities = {}; - currentTextureSlot = null; - currentBoundTextures = {}; - currentBoundFramebuffers = {}; - currentDrawbuffers = /* @__PURE__ */ new WeakMap(); - defaultDrawbuffers = []; - currentProgram = null; - currentBlendingEnabled = false; - currentBlending = null; - currentBlendEquation = null; - currentBlendSrc = null; - currentBlendDst = null; - currentBlendEquationAlpha = null; - currentBlendSrcAlpha = null; - currentBlendDstAlpha = null; - currentPremultipledAlpha = false; - currentFlipSided = null; - currentCullFace = null; - currentLineWidth = null; - currentPolygonOffsetFactor = null; - currentPolygonOffsetUnits = null; - currentScissor.set(0, 0, gl.canvas.width, gl.canvas.height); - currentViewport.set(0, 0, gl.canvas.width, gl.canvas.height); - colorBuffer.reset(); - depthBuffer.reset(); - stencilBuffer.reset(); + getSpec(filterType) { + return SVGFilterSpecList[filterType]; } - return { - buffers: { - color: colorBuffer, - depth: depthBuffer, - stencil: stencilBuffer - }, - enable, - disable, - bindFramebuffer, - drawBuffers, - useProgram, - setBlending, - setMaterial, - setFlipSided, - setCullFace, - setLineWidth, - setPolygonOffset, - setScissorTest, - activeTexture, - bindTexture, - unbindTexture, - compressedTexImage2D, - texImage2D, - texImage3D, - texStorage2D, - texStorage3D, - texSubImage2D, - texSubImage3D, - compressedTexSubImage2D, - scissor, - viewport, - reset - }; -} -function WebGLTextures(_gl, extensions, state, properties, capabilities, utils, info) { - const isWebGL2 = capabilities.isWebGL2; - const maxTextures = capabilities.maxTextures; - const maxCubemapSize = capabilities.maxCubemapSize; - const maxTextureSize = capabilities.maxTextureSize; - const maxSamples = capabilities.maxSamples; - const multisampledRTTExt = extensions.has("WEBGL_multisampled_render_to_texture") ? extensions.get("WEBGL_multisampled_render_to_texture") : null; - const supportsInvalidateFramebuffer = /OculusBrowser/g.test(navigator.userAgent); - const _videoTextures = /* @__PURE__ */ new WeakMap(); - let _canvas2; - const _sources = /* @__PURE__ */ new WeakMap(); - let useOffscreenCanvas = false; - try { - useOffscreenCanvas = typeof OffscreenCanvas !== "undefined" && new OffscreenCanvas(1, 1).getContext("2d") !== null; - } catch (err) { - } - function createCanvas(width2, height2) { - return useOffscreenCanvas ? new OffscreenCanvas(width2, height2) : createElementNS("canvas"); - } - function resizeImage(image2, needsPowerOfTwo, needsNewCanvas, maxSize) { - let scale2 = 1; - if (image2.width > maxSize || image2.height > maxSize) { - scale2 = maxSize / Math.max(image2.width, image2.height); - } - if (scale2 < 1 || needsPowerOfTwo === true) { - if (typeof HTMLImageElement !== "undefined" && image2 instanceof HTMLImageElement || typeof HTMLCanvasElement !== "undefined" && image2 instanceof HTMLCanvasElement || typeof ImageBitmap !== "undefined" && image2 instanceof ImageBitmap) { - const floor2 = needsPowerOfTwo ? floorPowerOfTwo : Math.floor; - const width2 = floor2(scale2 * image2.width); - const height2 = floor2(scale2 * image2.height); - if (_canvas2 === void 0) - _canvas2 = createCanvas(width2, height2); - const canvas = needsNewCanvas ? createCanvas(width2, height2) : _canvas2; - canvas.width = width2; - canvas.height = height2; - const context = canvas.getContext("2d"); - context.drawImage(image2, 0, 0, width2, height2); - console.warn("THREE.WebGLRenderer: Texture has been resized from (" + image2.width + "x" + image2.height + ") to (" + width2 + "x" + height2 + ")."); - return canvas; - } else { - if ("data" in image2) { - console.warn("THREE.WebGLRenderer: Image in DataTexture is too big (" + image2.width + "x" + image2.height + ")."); - } - return image2; + makeFilterEditorTemplate(s, filter2, key) { + var objectId = `${filter2.type}${key}${this.state.selectedIndex}${Date.now()}`; + if (s.inputType === "color-matrix") { + return createComponent("ColorMatrixEditor", { + ref: `$colorMatrix${objectId}`, + label: s.title, + key, + column: s.column, + values: filter2[key].join(" "), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "input-array") { + return createComponent("InputArrayEditor", { + ref: `$inputArray${objectId}`, + label: s.title, + key, + "column-label": "R,G,B,A,M", + "row-label": "R,G,B,A", + column: s.column, + values: filter2[key].join(" "), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "blend") { + return createComponent("BlendSelectEditor", { + ref: `$blend${objectId}`, + label: s.title, + key, + value: filter2[key].toString(), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "select") { + var options2 = s.options; + if (isFunction(s.options)) { + options2 = s.options(this.state.filters); } + return createComponent("SelectEditor", { + ref: `$select${objectId}`, + label: s.title, + options: options2, + key, + value: filter2[key].toString(), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "text") { + return createComponent("TextEditor", { + ref: `$text${objectId}`, + label: s.title, + key, + value: filter2[key].toString(), + onchange: "changeTextEditor" + }); + } else if (s.inputType === "number-range") { + return createComponent("NumberRangeEditor", { + ref: `$numberrange${objectId}`, + label: s.title, + layout: "block", + min: s.min, + max: s.max, + step: s.step, + key, + value: filter2[key].toString(), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "color") { + return createComponent("ColorViewEditor", { + ref: `$colorview${objectId}`, + label: s.title, + key, + value: filter2[key].toString(), + onchange: "changeRangeEditor" + }); + } else if (s.inputType === "FuncFilter") { + return createComponent("FuncFilterEditor", { + ref: `$funcFilter${objectId}`, + label: s.title, + key, + value: filter2[key].toString(), + onchange: "changeFuncFilterEditor" + }); + } else if (s.inputType === "ImageSelectEditor") { + return createComponent("ImageSelectEditor", { + ref: `$imageSelect${objectId}`, + label: s.title, + key, + value: filter2[key].toString(), + onchange: "changeRangeEditor" + }); } - return image2; + return createComponent("RangeEditor", { + ref: `$range${objectId}`, + layout: "block", + label: s.title, + min: s.min, + max: s.max, + step: s.step, + key, + value: filter2[key].toString(), + units: s.units, + onchange: "changeRangeEditor" + }); } - function isPowerOfTwo$1(image2) { - return isPowerOfTwo(image2.width) && isPowerOfTwo(image2.height); + makeOneFilterTemplate(spec, filter2) { + return ` +
+
+ +
+ +
+
+
+ ${keyMapJoin(spec, (key, value) => { + return this.makeFilterEditorTemplate(value, filter2, key); + })} + +
+
+ `; } - function textureNeedsPowerOfTwo(texture2) { - if (isWebGL2) - return false; - return texture2.wrapS !== ClampToEdgeWrapping || texture2.wrapT !== ClampToEdgeWrapping || texture2.minFilter !== NearestFilter && texture2.minFilter !== LinearFilter; - } - function textureNeedsGenerateMipmaps(texture2, supportsMips) { - return texture2.generateMipmaps && supportsMips && texture2.minFilter !== NearestFilter && texture2.minFilter !== LinearFilter; - } - function generateMipmap(target) { - _gl.generateMipmap(target); - } - function getInternalFormat(internalFormatName, glFormat, glType, encoding, isVideoTexture = false) { - if (isWebGL2 === false) - return glFormat; - if (internalFormatName !== null) { - if (_gl[internalFormatName] !== void 0) - return _gl[internalFormatName]; - console.warn("THREE.WebGLRenderer: Attempt to use non-existing WebGL internal format '" + internalFormatName + "'"); - } - let internalFormat = glFormat; - if (glFormat === 6403) { - if (glType === 5126) - internalFormat = 33326; - if (glType === 5131) - internalFormat = 33325; - if (glType === 5121) - internalFormat = 33321; - } - if (glFormat === 33319) { - if (glType === 5126) - internalFormat = 33328; - if (glType === 5131) - internalFormat = 33327; - if (glType === 5121) - internalFormat = 33323; - } - if (glFormat === 6408) { - if (glType === 5126) - internalFormat = 34836; - if (glType === 5131) - internalFormat = 34842; - if (glType === 5121) - internalFormat = encoding === sRGBEncoding && isVideoTexture === false ? 35907 : 32856; - if (glType === 32819) - internalFormat = 32854; - if (glType === 32820) - internalFormat = 32855; - } - if (internalFormat === 33325 || internalFormat === 33326 || internalFormat === 33327 || internalFormat === 33328 || internalFormat === 34842 || internalFormat === 34836) { - extensions.get("EXT_color_buffer_float"); - } - return internalFormat; - } - function getMipLevels(texture2, image2, supportsMips) { - if (textureNeedsGenerateMipmaps(texture2, supportsMips) === true || texture2.isFramebufferTexture && texture2.minFilter !== NearestFilter && texture2.minFilter !== LinearFilter) { - return Math.log2(Math.max(image2.width, image2.height)) + 1; - } else if (texture2.mipmaps !== void 0 && texture2.mipmaps.length > 0) { - return texture2.mipmaps.length; - } else if (texture2.isCompressedTexture && Array.isArray(texture2.image)) { - return image2.mipmaps.length; - } else { - return 1; - } + makeFilterTemplate(filter2) { + return this.makeOneFilterTemplate(this.getSpec(filter2.type), filter2); } - function filterFallback(f) { - if (f === NearestFilter || f === NearestMipmapNearestFilter || f === NearestMipmapLinearFilter) { - return 9728; + [LOAD("$filterList")]() { + if (this.state.selectedFilter && this.state.selectedFilter.isSource() === false) { + return this.makeFilterTemplate(this.state.selectedFilter); } - return 9729; + return ""; } - function onTextureDispose(event) { - const texture2 = event.target; - texture2.removeEventListener("dispose", onTextureDispose); - deallocateTexture(texture2); - if (texture2.isVideoTexture) { - _videoTextures.delete(texture2); - } + modifyFilter() { + this.state.filters.forEach((f) => { + if (f.isLight() && f.connected.length) { + f.connected.forEach((c2) => { + this.state.filters.filter((s) => s.id === c2.id).forEach((lightManager) => { + lightManager.reset({ + lightInfo: f.toLightString() + }); + }); + }); + } + }); + this.parent.trigger(this.props.onchange, this.props.key, this.state.filters); } - function onRenderTargetDispose(event) { - const renderTarget = event.target; - renderTarget.removeEventListener("dispose", onRenderTargetDispose); - deallocateRenderTarget(renderTarget); + parseFilter(list2 = []) { + return list2.map((it) => SVGFilter.parse(it)); } - function deallocateTexture(texture2) { - const textureProperties = properties.get(texture2); - if (textureProperties.__webglInit === void 0) - return; - const source2 = texture2.source; - const webglTextures = _sources.get(source2); - if (webglTextures) { - const webglTexture = webglTextures[textureProperties.__cacheKey]; - webglTexture.usedTimes--; - if (webglTexture.usedTimes === 0) { - deleteTexture(texture2); - } - if (Object.keys(webglTextures).length === 0) { - _sources.delete(source2); - } - } - properties.remove(texture2); - } - function deleteTexture(texture2) { - const textureProperties = properties.get(texture2); - _gl.deleteTexture(textureProperties.__webglTexture); - const source2 = texture2.source; - const webglTextures = _sources.get(source2); - delete webglTextures[textureProperties.__cacheKey]; - info.memory.textures--; - } - function deallocateRenderTarget(renderTarget) { - const texture2 = renderTarget.texture; - const renderTargetProperties = properties.get(renderTarget); - const textureProperties = properties.get(texture2); - if (textureProperties.__webglTexture !== void 0) { - _gl.deleteTexture(textureProperties.__webglTexture); - info.memory.textures--; - } - if (renderTarget.depthTexture) { - renderTarget.depthTexture.dispose(); - } - if (renderTarget.isWebGLCubeRenderTarget) { - for (let i = 0; i < 6; i++) { - _gl.deleteFramebuffer(renderTargetProperties.__webglFramebuffer[i]); - if (renderTargetProperties.__webglDepthbuffer) - _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthbuffer[i]); - } - } else { - _gl.deleteFramebuffer(renderTargetProperties.__webglFramebuffer); - if (renderTargetProperties.__webglDepthbuffer) - _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthbuffer); - if (renderTargetProperties.__webglMultisampledFramebuffer) - _gl.deleteFramebuffer(renderTargetProperties.__webglMultisampledFramebuffer); - if (renderTargetProperties.__webglColorRenderbuffer) - _gl.deleteRenderbuffer(renderTargetProperties.__webglColorRenderbuffer); - if (renderTargetProperties.__webglDepthRenderbuffer) - _gl.deleteRenderbuffer(renderTargetProperties.__webglDepthRenderbuffer); - } - if (renderTarget.isWebGLMultipleRenderTargets) { - for (let i = 0, il = texture2.length; i < il; i++) { - const attachmentProperties = properties.get(texture2[i]); - if (attachmentProperties.__webglTexture) { - _gl.deleteTexture(attachmentProperties.__webglTexture); - info.memory.textures--; - } - properties.remove(texture2[i]); - } - } - properties.remove(texture2); - properties.remove(renderTarget); - } - let textureUnits = 0; - function resetTextureUnits() { - textureUnits = 0; - } - function allocateTextureUnit() { - const textureUnit = textureUnits; - if (textureUnit >= maxTextures) { - console.warn("THREE.WebGLTextures: Trying to use " + textureUnit + " texture units while this GPU supports only " + maxTextures); - } - textureUnits += 1; - return textureUnit; - } - function getTextureCacheKey(texture2) { - const array = []; - array.push(texture2.wrapS); - array.push(texture2.wrapT); - array.push(texture2.magFilter); - array.push(texture2.minFilter); - array.push(texture2.anisotropy); - array.push(texture2.internalFormat); - array.push(texture2.format); - array.push(texture2.type); - array.push(texture2.generateMipmaps); - array.push(texture2.premultiplyAlpha); - array.push(texture2.flipY); - array.push(texture2.unpackAlignment); - array.push(texture2.encoding); - return array.join(); - } - function setTexture2D(texture2, slot) { - const textureProperties = properties.get(texture2); - if (texture2.isVideoTexture) - updateVideoTexture(texture2); - if (texture2.isRenderTargetTexture === false && texture2.version > 0 && textureProperties.__version !== texture2.version) { - const image2 = texture2.image; - if (image2 === null) { - console.warn("THREE.WebGLRenderer: Texture marked for update but no image data found."); - } else if (image2.complete === false) { - console.warn("THREE.WebGLRenderer: Texture marked for update but image is incomplete"); - } else { - uploadTexture(textureProperties, texture2, slot); - return; - } - } - state.activeTexture(33984 + slot); - state.bindTexture(3553, textureProperties.__webglTexture); + makeFilter(type, opt = {}) { + return SVGFilter.parse(__spreadProps(__spreadValues({}, opt), { type })); } - function setTexture2DArray(texture2, slot) { - const textureProperties = properties.get(texture2); - if (texture2.version > 0 && textureProperties.__version !== texture2.version) { - uploadTexture(textureProperties, texture2, slot); - return; - } - state.activeTexture(33984 + slot); - state.bindTexture(35866, textureProperties.__webglTexture); + [CLICK("$filterSelect .item[value]")](e) { + var filterType = e.$dt.attr("value"); + this.makeFilterNode(filterType); } - function setTexture3D(texture2, slot) { - const textureProperties = properties.get(texture2); - if (texture2.version > 0 && textureProperties.__version !== texture2.version) { - uploadTexture(textureProperties, texture2, slot); - return; - } - state.activeTexture(33984 + slot); - state.bindTexture(32879, textureProperties.__webglTexture); + [CLICK("$filterTemplateSelect .item[value]")](e) { + var templateType = e.$dt.attr("value"); + this.applyTemplate(templateType); } - function setTextureCube(texture2, slot) { - const textureProperties = properties.get(texture2); - if (texture2.version > 0 && textureProperties.__version !== texture2.version) { - uploadCubeTexture(textureProperties, texture2, slot); - return; - } - state.activeTexture(33984 + slot); - state.bindTexture(34067, textureProperties.__webglTexture); + [CLICK("$filterList .filter-menu .del")]() { + this.removeFilter(this.state.selectedFilter.id); } - const wrappingToGL = { - [RepeatWrapping]: 10497, - [ClampToEdgeWrapping]: 33071, - [MirroredRepeatWrapping]: 33648 - }; - const filterToGL = { - [NearestFilter]: 9728, - [NearestMipmapNearestFilter]: 9984, - [NearestMipmapLinearFilter]: 9986, - [LinearFilter]: 9729, - [LinearMipmapNearestFilter]: 9985, - [LinearMipmapLinearFilter]: 9987 - }; - function setTextureParameters(textureType, texture2, supportsMips) { - if (supportsMips) { - _gl.texParameteri(textureType, 10242, wrappingToGL[texture2.wrapS]); - _gl.texParameteri(textureType, 10243, wrappingToGL[texture2.wrapT]); - if (textureType === 32879 || textureType === 35866) { - _gl.texParameteri(textureType, 32882, wrappingToGL[texture2.wrapR]); - } - _gl.texParameteri(textureType, 10240, filterToGL[texture2.magFilter]); - _gl.texParameteri(textureType, 10241, filterToGL[texture2.minFilter]); - } else { - _gl.texParameteri(textureType, 10242, 33071); - _gl.texParameteri(textureType, 10243, 33071); - if (textureType === 32879 || textureType === 35866) { - _gl.texParameteri(textureType, 32882, 33071); - } - if (texture2.wrapS !== ClampToEdgeWrapping || texture2.wrapT !== ClampToEdgeWrapping) { - console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.wrapS and Texture.wrapT should be set to THREE.ClampToEdgeWrapping."); - } - _gl.texParameteri(textureType, 10240, filterFallback(texture2.magFilter)); - _gl.texParameteri(textureType, 10241, filterFallback(texture2.minFilter)); - if (texture2.minFilter !== NearestFilter && texture2.minFilter !== LinearFilter) { - console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter."); - } - } - if (extensions.has("EXT_texture_filter_anisotropic") === true) { - const extension = extensions.get("EXT_texture_filter_anisotropic"); - if (texture2.type === FloatType && extensions.has("OES_texture_float_linear") === false) - return; - if (isWebGL2 === false && (texture2.type === HalfFloatType && extensions.has("OES_texture_half_float_linear") === false)) - return; - if (texture2.anisotropy > 1 || properties.get(texture2).__currentAnisotropy) { - _gl.texParameterf(textureType, extension.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(texture2.anisotropy, capabilities.getMaxAnisotropy())); - properties.get(texture2).__currentAnisotropy = texture2.anisotropy; - } - } - } - function initTexture(textureProperties, texture2) { - let forceUpload = false; - if (textureProperties.__webglInit === void 0) { - textureProperties.__webglInit = true; - texture2.addEventListener("dispose", onTextureDispose); - } - const source2 = texture2.source; - let webglTextures = _sources.get(source2); - if (webglTextures === void 0) { - webglTextures = {}; - _sources.set(source2, webglTextures); - } - const textureCacheKey = getTextureCacheKey(texture2); - if (textureCacheKey !== textureProperties.__cacheKey) { - if (webglTextures[textureCacheKey] === void 0) { - webglTextures[textureCacheKey] = { - texture: _gl.createTexture(), - usedTimes: 0 - }; - info.memory.textures++; - forceUpload = true; - } - webglTextures[textureCacheKey].usedTimes++; - const webglTexture = webglTextures[textureProperties.__cacheKey]; - if (webglTexture !== void 0) { - webglTextures[textureProperties.__cacheKey].usedTimes--; - if (webglTexture.usedTimes === 0) { - deleteTexture(texture2); - } - } - textureProperties.__cacheKey = textureCacheKey; - textureProperties.__webglTexture = webglTextures[textureCacheKey].texture; - } - return forceUpload; - } - function uploadTexture(textureProperties, texture2, slot) { - let textureType = 3553; - if (texture2.isDataArrayTexture) - textureType = 35866; - if (texture2.isData3DTexture) - textureType = 32879; - const forceUpload = initTexture(textureProperties, texture2); - const source2 = texture2.source; - state.activeTexture(33984 + slot); - state.bindTexture(textureType, textureProperties.__webglTexture); - if (source2.version !== source2.__currentVersion || forceUpload === true) { - _gl.pixelStorei(37440, texture2.flipY); - _gl.pixelStorei(37441, texture2.premultiplyAlpha); - _gl.pixelStorei(3317, texture2.unpackAlignment); - _gl.pixelStorei(37443, 0); - const needsPowerOfTwo = textureNeedsPowerOfTwo(texture2) && isPowerOfTwo$1(texture2.image) === false; - let image2 = resizeImage(texture2.image, needsPowerOfTwo, false, maxTextureSize); - image2 = verifyColorSpace(texture2, image2); - const supportsMips = isPowerOfTwo$1(image2) || isWebGL2, glFormat = utils.convert(texture2.format, texture2.encoding); - let glType = utils.convert(texture2.type), glInternalFormat = getInternalFormat(texture2.internalFormat, glFormat, glType, texture2.encoding, texture2.isVideoTexture); - setTextureParameters(textureType, texture2, supportsMips); - let mipmap; - const mipmaps = texture2.mipmaps; - const useTexStorage = isWebGL2 && texture2.isVideoTexture !== true; - const allocateMemory = textureProperties.__version === void 0; - const levels = getMipLevels(texture2, image2, supportsMips); - if (texture2.isDepthTexture) { - glInternalFormat = 6402; - if (isWebGL2) { - if (texture2.type === FloatType) { - glInternalFormat = 36012; - } else if (texture2.type === UnsignedIntType) { - glInternalFormat = 33190; - } else if (texture2.type === UnsignedInt248Type) { - glInternalFormat = 35056; - } else { - glInternalFormat = 33189; - } - } else { - if (texture2.type === FloatType) { - console.error("WebGLRenderer: Floating point depth texture requires WebGL2."); - } - } - if (texture2.format === DepthFormat && glInternalFormat === 6402) { - if (texture2.type !== UnsignedShortType && texture2.type !== UnsignedIntType) { - console.warn("THREE.WebGLRenderer: Use UnsignedShortType or UnsignedIntType for DepthFormat DepthTexture."); - texture2.type = UnsignedShortType; - glType = utils.convert(texture2.type); - } - } - if (texture2.format === DepthStencilFormat && glInternalFormat === 6402) { - glInternalFormat = 34041; - if (texture2.type !== UnsignedInt248Type) { - console.warn("THREE.WebGLRenderer: Use UnsignedInt248Type for DepthStencilFormat DepthTexture."); - texture2.type = UnsignedInt248Type; - glType = utils.convert(texture2.type); - } - } - if (useTexStorage && allocateMemory) { - state.texStorage2D(3553, 1, glInternalFormat, image2.width, image2.height); - } else { - state.texImage2D(3553, 0, glInternalFormat, image2.width, image2.height, 0, glFormat, glType, null); - } - } else if (texture2.isDataTexture) { - if (mipmaps.length > 0 && supportsMips) { - if (useTexStorage && allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, mipmaps[0].width, mipmaps[0].height); - } - for (let i = 0, il = mipmaps.length; i < il; i++) { - mipmap = mipmaps[i]; - if (useTexStorage) { - state.texSubImage2D(3553, i, 0, 0, mipmap.width, mipmap.height, glFormat, glType, mipmap.data); - } else { - state.texImage2D(3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data); - } - } - texture2.generateMipmaps = false; - } else { - if (useTexStorage) { - if (allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, image2.width, image2.height); - } - state.texSubImage2D(3553, 0, 0, 0, image2.width, image2.height, glFormat, glType, image2.data); - } else { - state.texImage2D(3553, 0, glInternalFormat, image2.width, image2.height, 0, glFormat, glType, image2.data); - } - } - } else if (texture2.isCompressedTexture) { - if (useTexStorage && allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, mipmaps[0].width, mipmaps[0].height); - } - for (let i = 0, il = mipmaps.length; i < il; i++) { - mipmap = mipmaps[i]; - if (texture2.format !== RGBAFormat) { - if (glFormat !== null) { - if (useTexStorage) { - state.compressedTexSubImage2D(3553, i, 0, 0, mipmap.width, mipmap.height, glFormat, mipmap.data); - } else { - state.compressedTexImage2D(3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data); - } - } else { - console.warn("THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture()"); - } - } else { - if (useTexStorage) { - state.texSubImage2D(3553, i, 0, 0, mipmap.width, mipmap.height, glFormat, glType, mipmap.data); - } else { - state.texImage2D(3553, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data); - } - } - } - } else if (texture2.isDataArrayTexture) { - if (useTexStorage) { - if (allocateMemory) { - state.texStorage3D(35866, levels, glInternalFormat, image2.width, image2.height, image2.depth); - } - state.texSubImage3D(35866, 0, 0, 0, 0, image2.width, image2.height, image2.depth, glFormat, glType, image2.data); - } else { - state.texImage3D(35866, 0, glInternalFormat, image2.width, image2.height, image2.depth, 0, glFormat, glType, image2.data); - } - } else if (texture2.isData3DTexture) { - if (useTexStorage) { - if (allocateMemory) { - state.texStorage3D(32879, levels, glInternalFormat, image2.width, image2.height, image2.depth); - } - state.texSubImage3D(32879, 0, 0, 0, 0, image2.width, image2.height, image2.depth, glFormat, glType, image2.data); - } else { - state.texImage3D(32879, 0, glInternalFormat, image2.width, image2.height, image2.depth, 0, glFormat, glType, image2.data); - } - } else if (texture2.isFramebufferTexture) { - if (useTexStorage && allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, image2.width, image2.height); - } else { - state.texImage2D(3553, 0, glInternalFormat, image2.width, image2.height, 0, glFormat, glType, null); - } - } else { - if (mipmaps.length > 0 && supportsMips) { - if (useTexStorage && allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, mipmaps[0].width, mipmaps[0].height); - } - for (let i = 0, il = mipmaps.length; i < il; i++) { - mipmap = mipmaps[i]; - if (useTexStorage) { - state.texSubImage2D(3553, i, 0, 0, glFormat, glType, mipmap); - } else { - state.texImage2D(3553, i, glInternalFormat, glFormat, glType, mipmap); - } - } - texture2.generateMipmaps = false; - } else { - if (useTexStorage) { - if (allocateMemory) { - state.texStorage2D(3553, levels, glInternalFormat, image2.width, image2.height); - } - state.texSubImage2D(3553, 0, 0, 0, glFormat, glType, image2); - } else { - state.texImage2D(3553, 0, glInternalFormat, glFormat, glType, image2); - } - } - } - if (textureNeedsGenerateMipmaps(texture2, supportsMips)) { - generateMipmap(textureType); - } - source2.__currentVersion = source2.version; - if (texture2.onUpdate) - texture2.onUpdate(texture2); - } - textureProperties.__version = texture2.version; + [LOAD("$graphPanel")]() { + return this.makeGraphPanel(); } - function uploadCubeTexture(textureProperties, texture2, slot) { - if (texture2.image.length !== 6) - return; - const forceUpload = initTexture(textureProperties, texture2); - const source2 = texture2.source; - state.activeTexture(33984 + slot); - state.bindTexture(34067, textureProperties.__webglTexture); - if (source2.version !== source2.__currentVersion || forceUpload === true) { - _gl.pixelStorei(37440, texture2.flipY); - _gl.pixelStorei(37441, texture2.premultiplyAlpha); - _gl.pixelStorei(3317, texture2.unpackAlignment); - _gl.pixelStorei(37443, 0); - const isCompressed = texture2.isCompressedTexture || texture2.image[0].isCompressedTexture; - const isDataTexture = texture2.image[0] && texture2.image[0].isDataTexture; - const cubeImage = []; - for (let i = 0; i < 6; i++) { - if (!isCompressed && !isDataTexture) { - cubeImage[i] = resizeImage(texture2.image[i], false, true, maxCubemapSize); - } else { - cubeImage[i] = isDataTexture ? texture2.image[i].image : texture2.image[i]; - } - cubeImage[i] = verifyColorSpace(texture2, cubeImage[i]); - } - const image2 = cubeImage[0], supportsMips = isPowerOfTwo$1(image2) || isWebGL2, glFormat = utils.convert(texture2.format, texture2.encoding), glType = utils.convert(texture2.type), glInternalFormat = getInternalFormat(texture2.internalFormat, glFormat, glType, texture2.encoding); - const useTexStorage = isWebGL2 && texture2.isVideoTexture !== true; - const allocateMemory = textureProperties.__version === void 0; - let levels = getMipLevels(texture2, image2, supportsMips); - setTextureParameters(34067, texture2, supportsMips); - let mipmaps; - if (isCompressed) { - if (useTexStorage && allocateMemory) { - state.texStorage2D(34067, levels, glInternalFormat, image2.width, image2.height); - } - for (let i = 0; i < 6; i++) { - mipmaps = cubeImage[i].mipmaps; - for (let j = 0; j < mipmaps.length; j++) { - const mipmap = mipmaps[j]; - if (texture2.format !== RGBAFormat) { - if (glFormat !== null) { - if (useTexStorage) { - state.compressedTexSubImage2D(34069 + i, j, 0, 0, mipmap.width, mipmap.height, glFormat, mipmap.data); - } else { - state.compressedTexImage2D(34069 + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data); - } - } else { - console.warn("THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .setTextureCube()"); - } - } else { - if (useTexStorage) { - state.texSubImage2D(34069 + i, j, 0, 0, mipmap.width, mipmap.height, glFormat, glType, mipmap.data); - } else { - state.texImage2D(34069 + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data); - } - } - } - } - } else { - mipmaps = texture2.mipmaps; - if (useTexStorage && allocateMemory) { - if (mipmaps.length > 0) - levels++; - state.texStorage2D(34067, levels, glInternalFormat, cubeImage[0].width, cubeImage[0].height); - } - for (let i = 0; i < 6; i++) { - if (isDataTexture) { - if (useTexStorage) { - state.texSubImage2D(34069 + i, 0, 0, 0, cubeImage[i].width, cubeImage[i].height, glFormat, glType, cubeImage[i].data); - } else { - state.texImage2D(34069 + i, 0, glInternalFormat, cubeImage[i].width, cubeImage[i].height, 0, glFormat, glType, cubeImage[i].data); - } - for (let j = 0; j < mipmaps.length; j++) { - const mipmap = mipmaps[j]; - const mipmapImage = mipmap.image[i].image; - if (useTexStorage) { - state.texSubImage2D(34069 + i, j + 1, 0, 0, mipmapImage.width, mipmapImage.height, glFormat, glType, mipmapImage.data); - } else { - state.texImage2D(34069 + i, j + 1, glInternalFormat, mipmapImage.width, mipmapImage.height, 0, glFormat, glType, mipmapImage.data); - } - } - } else { - if (useTexStorage) { - state.texSubImage2D(34069 + i, 0, 0, 0, glFormat, glType, cubeImage[i]); - } else { - state.texImage2D(34069 + i, 0, glInternalFormat, glFormat, glType, cubeImage[i]); - } - for (let j = 0; j < mipmaps.length; j++) { - const mipmap = mipmaps[j]; - if (useTexStorage) { - state.texSubImage2D(34069 + i, j + 1, 0, 0, glFormat, glType, mipmap.image[i]); - } else { - state.texImage2D(34069 + i, j + 1, glInternalFormat, glFormat, glType, mipmap.image[i]); - } - } - } - } - } - if (textureNeedsGenerateMipmaps(texture2, supportsMips)) { - generateMipmap(34067); - } - source2.__currentVersion = source2.version; - if (texture2.onUpdate) - texture2.onUpdate(texture2); - } - textureProperties.__version = texture2.version; + selectFilter(index2) { + this.setState({ + selectedIndex: index2, + selectedFilter: this.state.filters[index2] + }, false); + this.load("$filterList"); } - function setupFrameBufferTexture(framebuffer, renderTarget, texture2, attachment, textureTarget) { - const glFormat = utils.convert(texture2.format, texture2.encoding); - const glType = utils.convert(texture2.type); - const glInternalFormat = getInternalFormat(texture2.internalFormat, glFormat, glType, texture2.encoding); - const renderTargetProperties = properties.get(renderTarget); - if (!renderTargetProperties.__hasExternalTextures) { - if (textureTarget === 32879 || textureTarget === 35866) { - state.texImage3D(textureTarget, 0, glInternalFormat, renderTarget.width, renderTarget.height, renderTarget.depth, 0, glFormat, glType, null); - } else { - state.texImage2D(textureTarget, 0, glInternalFormat, renderTarget.width, renderTarget.height, 0, glFormat, glType, null); - } - } - state.bindFramebuffer(36160, framebuffer); - if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.framebufferTexture2DMultisampleEXT(36160, attachment, textureTarget, properties.get(texture2).__webglTexture, 0, getRenderTargetSamples(renderTarget)); - } else { - _gl.framebufferTexture2D(36160, attachment, textureTarget, properties.get(texture2).__webglTexture, 0); - } - state.bindFramebuffer(36160, null); - } - function setupRenderBufferStorage(renderbuffer, renderTarget, isMultisample) { - _gl.bindRenderbuffer(36161, renderbuffer); - if (renderTarget.depthBuffer && !renderTarget.stencilBuffer) { - let glInternalFormat = 33189; - if (isMultisample || useMultisampledRTT(renderTarget)) { - const depthTexture = renderTarget.depthTexture; - if (depthTexture && depthTexture.isDepthTexture) { - if (depthTexture.type === FloatType) { - glInternalFormat = 36012; - } else if (depthTexture.type === UnsignedIntType) { - glInternalFormat = 33190; - } - } - const samples = getRenderTargetSamples(renderTarget); - if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.renderbufferStorageMultisampleEXT(36161, samples, glInternalFormat, renderTarget.width, renderTarget.height); - } else { - _gl.renderbufferStorageMultisample(36161, samples, glInternalFormat, renderTarget.width, renderTarget.height); - } - } else { - _gl.renderbufferStorage(36161, glInternalFormat, renderTarget.width, renderTarget.height); - } - _gl.framebufferRenderbuffer(36160, 36096, 36161, renderbuffer); - } else if (renderTarget.depthBuffer && renderTarget.stencilBuffer) { - const samples = getRenderTargetSamples(renderTarget); - if (isMultisample && useMultisampledRTT(renderTarget) === false) { - _gl.renderbufferStorageMultisample(36161, samples, 35056, renderTarget.width, renderTarget.height); - } else if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.renderbufferStorageMultisampleEXT(36161, samples, 35056, renderTarget.width, renderTarget.height); - } else { - _gl.renderbufferStorage(36161, 34041, renderTarget.width, renderTarget.height); - } - _gl.framebufferRenderbuffer(36160, 33306, 36161, renderbuffer); - } else { - const texture2 = renderTarget.isWebGLMultipleRenderTargets === true ? renderTarget.texture[0] : renderTarget.texture; - const glFormat = utils.convert(texture2.format, texture2.encoding); - const glType = utils.convert(texture2.type); - const glInternalFormat = getInternalFormat(texture2.internalFormat, glFormat, glType, texture2.encoding); - const samples = getRenderTargetSamples(renderTarget); - if (isMultisample && useMultisampledRTT(renderTarget) === false) { - _gl.renderbufferStorageMultisample(36161, samples, glInternalFormat, renderTarget.width, renderTarget.height); - } else if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.renderbufferStorageMultisampleEXT(36161, samples, glInternalFormat, renderTarget.width, renderTarget.height); - } else { - _gl.renderbufferStorage(36161, glInternalFormat, renderTarget.width, renderTarget.height); - } - } - _gl.bindRenderbuffer(36161, null); - } - function setupDepthTexture(framebuffer, renderTarget) { - const isCube = renderTarget && renderTarget.isWebGLCubeRenderTarget; - if (isCube) - throw new Error("Depth Texture with cube render targets is not supported"); - state.bindFramebuffer(36160, framebuffer); - if (!(renderTarget.depthTexture && renderTarget.depthTexture.isDepthTexture)) { - throw new Error("renderTarget.depthTexture must be an instance of THREE.DepthTexture"); - } - if (!properties.get(renderTarget.depthTexture).__webglTexture || renderTarget.depthTexture.image.width !== renderTarget.width || renderTarget.depthTexture.image.height !== renderTarget.height) { - renderTarget.depthTexture.image.width = renderTarget.width; - renderTarget.depthTexture.image.height = renderTarget.height; - renderTarget.depthTexture.needsUpdate = true; - } - setTexture2D(renderTarget.depthTexture, 0); - const webglDepthTexture = properties.get(renderTarget.depthTexture).__webglTexture; - const samples = getRenderTargetSamples(renderTarget); - if (renderTarget.depthTexture.format === DepthFormat) { - if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.framebufferTexture2DMultisampleEXT(36160, 36096, 3553, webglDepthTexture, 0, samples); - } else { - _gl.framebufferTexture2D(36160, 36096, 3553, webglDepthTexture, 0); - } - } else if (renderTarget.depthTexture.format === DepthStencilFormat) { - if (useMultisampledRTT(renderTarget)) { - multisampledRTTExt.framebufferTexture2DMultisampleEXT(36160, 33306, 3553, webglDepthTexture, 0, samples); - } else { - _gl.framebufferTexture2D(36160, 33306, 3553, webglDepthTexture, 0); - } + [POINTERSTART("$graphPanel .filter-node") + MOVE() + END()](e) { + this.$target = e.$dt; + this.$point = null; + this.pointType = "object"; + this.pointIndex = 0; + var rect2 = this.refs.$graphPanel.rect(); + this.rect = rect2; + var index2 = +this.$target.attr("data-index"); + this.selectFilter(index2); + this.$target.onlyOneClass("selected"); + var pointer = Dom.create(e.target); + if (pointer.hasClass("out")) { + this.$point = pointer; + this.pointType = "out"; + this.pointIndex = 0; + } else if (pointer.hasClass("in")) { + this.$point = pointer; + this.pointType = "in"; + this.pointIndex = +pointer.attr("data-index"); } else { - throw new Error("Unknown depthTexture format"); + var filter2 = this.state.selectedFilter; + this.startXY = clone$1(filter2.bound); } + if (this.pointType === "in" || this.pointType === "out") { + var inRect = pointer.rect(); + var x = inRect.x - rect2.x; + var y = inRect.y - rect2.y; + var centerX = x + inRect.width / 2; + var centerY = y + inRect.height / 2; + this.startXY = { x: centerX, y: centerY }; + } + this.startXY.dx = 0; + this.startXY.dy = 0; + this.load("$dragLinePanel"); } - function setupDepthRenderbuffer(renderTarget) { - const renderTargetProperties = properties.get(renderTarget); - const isCube = renderTarget.isWebGLCubeRenderTarget === true; - if (renderTarget.depthTexture && !renderTargetProperties.__autoAllocateDepthBuffer) { - if (isCube) - throw new Error("target.depthTexture not supported in Cube render targets"); - setupDepthTexture(renderTargetProperties.__webglFramebuffer, renderTarget); + [LOAD("$dragLinePanel")]() { + if (this.pointType === "in" || this.pointType === "out") { + var { x, y, dx, dy } = this.startXY; + return ` + + + + `; } else { - if (isCube) { - renderTargetProperties.__webglDepthbuffer = []; - for (let i = 0; i < 6; i++) { - state.bindFramebuffer(36160, renderTargetProperties.__webglFramebuffer[i]); - renderTargetProperties.__webglDepthbuffer[i] = _gl.createRenderbuffer(); - setupRenderBufferStorage(renderTargetProperties.__webglDepthbuffer[i], renderTarget, false); - } - } else { - state.bindFramebuffer(36160, renderTargetProperties.__webglFramebuffer); - renderTargetProperties.__webglDepthbuffer = _gl.createRenderbuffer(); - setupRenderBufferStorage(renderTargetProperties.__webglDepthbuffer, renderTarget, false); - } + return ""; } - state.bindFramebuffer(36160, null); } - function rebindTextures(renderTarget, colorTexture, depthTexture) { - const renderTargetProperties = properties.get(renderTarget); - if (colorTexture !== void 0) { - setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer, renderTarget, renderTarget.texture, 36064, 3553); + makeConnectedPath(points) { + var manager = new PathStringManager(); + var first = points[0]; + var last = points[points.length - 1]; + if (!first) + return ""; + if (!last) + return ""; + var dist2 = Math.abs(first.x - last.x) / 2; + manager.M(first).C({ x: first.x + dist2, y: first.y }, { x: last.x - dist2, y: last.y }, last); + return manager.d; + } + createPath(sourceItem, connectedInfo) { + if (connectedInfo.path) { + return connectedInfo.path; } - if (depthTexture !== void 0) { - setupDepthRenderbuffer(renderTarget); + var sourceX = sourceItem.bound.x + connectedXAxis["1"][0]; + var sourceY = sourceItem.bound.y + connectedYAxis["1"][0]; + var target = this.state.filters.map((it, index3) => { + return { it, index: index3 }; + }).find((it) => { + if (!it) + return false; + if (!it.it) + return false; + return it && it.it.id === connectedInfo.id; + }); + var len2 = `${target.it.getInCount()}`; + var source2 = target.it.in.map((it, index3) => { + return { it, index: index3 }; + }).find((it) => { + if (!it) + return false; + if (!it.it) + return false; + return it.it.id === sourceItem.id; + }); + if (!source2) { + return []; } + var index2 = source2.index; + var targetX = target.it.bound.x + inXAxis[len2][0]; + var targetY = target.it.bound.y + inYAxis[len2][index2]; + return [ + { x: sourceX, y: sourceY }, + { x: targetX, y: targetY } + ]; } - function setupRenderTarget(renderTarget) { - const texture2 = renderTarget.texture; - const renderTargetProperties = properties.get(renderTarget); - const textureProperties = properties.get(texture2); - renderTarget.addEventListener("dispose", onRenderTargetDispose); - if (renderTarget.isWebGLMultipleRenderTargets !== true) { - if (textureProperties.__webglTexture === void 0) { - textureProperties.__webglTexture = _gl.createTexture(); - } - textureProperties.__version = texture2.version; - info.memory.textures++; - } - const isCube = renderTarget.isWebGLCubeRenderTarget === true; - const isMultipleRenderTargets = renderTarget.isWebGLMultipleRenderTargets === true; - const supportsMips = isPowerOfTwo$1(renderTarget) || isWebGL2; - if (isCube) { - renderTargetProperties.__webglFramebuffer = []; - for (let i = 0; i < 6; i++) { - renderTargetProperties.__webglFramebuffer[i] = _gl.createFramebuffer(); - } - } else { - renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer(); - if (isMultipleRenderTargets) { - if (capabilities.drawBuffers) { - const textures = renderTarget.texture; - for (let i = 0, il = textures.length; i < il; i++) { - const attachmentProperties = properties.get(textures[i]); - if (attachmentProperties.__webglTexture === void 0) { - attachmentProperties.__webglTexture = _gl.createTexture(); - info.memory.textures++; - } - } - } else { - console.warn("THREE.WebGLRenderer: WebGLMultipleRenderTargets can only be used with WebGL2 or WEBGL_draw_buffers extension."); - } - } else if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) { - renderTargetProperties.__webglMultisampledFramebuffer = _gl.createFramebuffer(); - renderTargetProperties.__webglColorRenderbuffer = _gl.createRenderbuffer(); - _gl.bindRenderbuffer(36161, renderTargetProperties.__webglColorRenderbuffer); - const glFormat = utils.convert(texture2.format, texture2.encoding); - const glType = utils.convert(texture2.type); - const glInternalFormat = getInternalFormat(texture2.internalFormat, glFormat, glType, texture2.encoding); - const samples = getRenderTargetSamples(renderTarget); - _gl.renderbufferStorageMultisample(36161, samples, glInternalFormat, renderTarget.width, renderTarget.height); - state.bindFramebuffer(36160, renderTargetProperties.__webglMultisampledFramebuffer); - _gl.framebufferRenderbuffer(36160, 36064, 36161, renderTargetProperties.__webglColorRenderbuffer); - _gl.bindRenderbuffer(36161, null); - if (renderTarget.depthBuffer) { - renderTargetProperties.__webglDepthRenderbuffer = _gl.createRenderbuffer(); - setupRenderBufferStorage(renderTargetProperties.__webglDepthRenderbuffer, renderTarget, true); - } - state.bindFramebuffer(36160, null); - } - } - if (isCube) { - state.bindTexture(34067, textureProperties.__webglTexture); - setTextureParameters(34067, texture2, supportsMips); - for (let i = 0; i < 6; i++) { - setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer[i], renderTarget, texture2, 36064, 34069 + i); - } - if (textureNeedsGenerateMipmaps(texture2, supportsMips)) { - generateMipmap(34067); - } - state.unbindTexture(); - } else if (isMultipleRenderTargets) { - const textures = renderTarget.texture; - for (let i = 0, il = textures.length; i < il; i++) { - const attachment = textures[i]; - const attachmentProperties = properties.get(attachment); - state.bindTexture(3553, attachmentProperties.__webglTexture); - setTextureParameters(3553, attachment, supportsMips); - setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer, renderTarget, attachment, 36064 + i, 3553); - if (textureNeedsGenerateMipmaps(attachment, supportsMips)) { - generateMipmap(3553); - } - } - state.unbindTexture(); - } else { - let glTextureType = 3553; - if (renderTarget.isWebGL3DRenderTarget || renderTarget.isWebGLArrayRenderTarget) { - if (isWebGL2) { - glTextureType = renderTarget.isWebGL3DRenderTarget ? 32879 : 35866; - } else { - console.error("THREE.WebGLTextures: THREE.Data3DTexture and THREE.DataArrayTexture only supported with WebGL2."); + [LOAD("$connectedLinePanel")]() { + return ` + + ${this.state.filters.map((it) => { + return it.connected.map((connectedItem) => { + var path = this.createPath(it, connectedItem); + var sourceType = getSourceTypeString(it.type); + return ` + + + ${path.length && ` + + `} + + `; + }).join(""); + }).join("")} + + `; + } + [CLICK("$connectedLinePanel .connected-remove-circle")](e) { + var [tid, sid] = e.$dt.attrs("data-target-id", "data-source-id"); + var filters = this.state.filters; + filters.filter((it) => it.id === sid).forEach((it) => { + it.connected = it.connected.filter((c2) => c2.id != tid); + }); + filters.filter((it) => it.id === tid).forEach((it) => { + it.in = it.in.map((inObject) => { + if (inObject && inObject.id == sid) { + return null; } - } - state.bindTexture(glTextureType, textureProperties.__webglTexture); - setTextureParameters(glTextureType, texture2, supportsMips); - setupFrameBufferTexture(renderTargetProperties.__webglFramebuffer, renderTarget, texture2, 36064, glTextureType); - if (textureNeedsGenerateMipmaps(texture2, supportsMips)) { - generateMipmap(glTextureType); - } - state.unbindTexture(); - } - if (renderTarget.depthBuffer) { - setupDepthRenderbuffer(renderTarget); - } - } - function updateRenderTargetMipmap(renderTarget) { - const supportsMips = isPowerOfTwo$1(renderTarget) || isWebGL2; - const textures = renderTarget.isWebGLMultipleRenderTargets === true ? renderTarget.texture : [renderTarget.texture]; - for (let i = 0, il = textures.length; i < il; i++) { - const texture2 = textures[i]; - if (textureNeedsGenerateMipmaps(texture2, supportsMips)) { - const target = renderTarget.isWebGLCubeRenderTarget ? 34067 : 3553; - const webglTexture = properties.get(texture2).__webglTexture; - state.bindTexture(target, webglTexture); - generateMipmap(target); - state.unbindTexture(); - } - } - } - function updateMultisampleRenderTarget(renderTarget) { - if (isWebGL2 && renderTarget.samples > 0 && useMultisampledRTT(renderTarget) === false) { - const width2 = renderTarget.width; - const height2 = renderTarget.height; - let mask = 16384; - const invalidationArray = [36064]; - const depthStyle = renderTarget.stencilBuffer ? 33306 : 36096; - if (renderTarget.depthBuffer) { - invalidationArray.push(depthStyle); - } - const renderTargetProperties = properties.get(renderTarget); - const ignoreDepthValues = renderTargetProperties.__ignoreDepthValues !== void 0 ? renderTargetProperties.__ignoreDepthValues : false; - if (ignoreDepthValues === false) { - if (renderTarget.depthBuffer) - mask |= 256; - if (renderTarget.stencilBuffer) - mask |= 1024; - } - state.bindFramebuffer(36008, renderTargetProperties.__webglMultisampledFramebuffer); - state.bindFramebuffer(36009, renderTargetProperties.__webglFramebuffer); - if (ignoreDepthValues === true) { - _gl.invalidateFramebuffer(36008, [depthStyle]); - _gl.invalidateFramebuffer(36009, [depthStyle]); - } - _gl.blitFramebuffer(0, 0, width2, height2, 0, 0, width2, height2, mask, 9728); - if (supportsInvalidateFramebuffer) { - _gl.invalidateFramebuffer(36008, invalidationArray); - } - state.bindFramebuffer(36008, null); - state.bindFramebuffer(36009, renderTargetProperties.__webglMultisampledFramebuffer); - } - } - function getRenderTargetSamples(renderTarget) { - return Math.min(maxSamples, renderTarget.samples); - } - function useMultisampledRTT(renderTarget) { - const renderTargetProperties = properties.get(renderTarget); - return isWebGL2 && renderTarget.samples > 0 && extensions.has("WEBGL_multisampled_render_to_texture") === true && renderTargetProperties.__useRenderToTexture !== false; - } - function updateVideoTexture(texture2) { - const frame = info.render.frame; - if (_videoTextures.get(texture2) !== frame) { - _videoTextures.set(texture2, frame); - texture2.update(); - } - } - function verifyColorSpace(texture2, image2) { - const encoding = texture2.encoding; - const format2 = texture2.format; - const type = texture2.type; - if (texture2.isCompressedTexture === true || texture2.isVideoTexture === true || texture2.format === _SRGBAFormat) - return image2; - if (encoding !== LinearEncoding) { - if (encoding === sRGBEncoding) { - if (isWebGL2 === false) { - if (extensions.has("EXT_sRGB") === true && format2 === RGBAFormat) { - texture2.format = _SRGBAFormat; - texture2.minFilter = LinearFilter; - texture2.generateMipmaps = false; - } else { - image2 = ImageUtils.sRGBToLinear(image2); + return inObject; + }); + }); + this.refresh(); + this.modifyFilter(); + } + getCenterXY($target) { + var inRect = $target.rect(); + var x = inRect.x - this.rect.x; + var y = inRect.y - this.rect.y; + var centerX = x + inRect.width / 2; + var centerY = y + inRect.height / 2; + return { x: centerX, y: centerY }; + } + end(dx, dy) { + if (this.pointType === "in" || this.pointType === "out") { + this.startXY.dx = dx; + this.startXY.dy = dy; + var filter2 = this.state.selectedFilter; + var e = this.$config.get("bodyEvent"); + var $target = Dom.create(e.target); + var $targetNode = $target.closest("filter-node"); + if (this.pointType === "out") { + if ($target.hasClass("in")) { + var targetFilter = this.state.filters[+$targetNode.attr("data-index")]; + if (targetFilter) { + if (!targetFilter.hasLight() && filter2.isLight()) + ; + else { + var targetIndex = +$target.attr("data-index"); + if (!targetFilter.in[targetIndex]) { + targetFilter.setIn(targetIndex, filter2); + filter2.setConnected(targetFilter); + } + } } - } else { - if (format2 !== RGBAFormat || type !== UnsignedByteType) { - console.warn("THREE.WebGLTextures: sRGB encoded textures have to use RGBAFormat and UnsignedByteType."); + } + } else if (this.pointType === "in") { + if ($target.hasClass("out")) { + var targetFilter = this.state.filters[+$targetNode.attr("data-index")]; + if (targetFilter) { + if (filter2.hasLight() && !targetFilter.isLight()) + ; + else { + if (!filter2.in[this.pointIndex]) { + filter2.setIn(this.pointIndex, targetFilter); + targetFilter.setConnected(filter2); + } + } } } - } else { - console.error("THREE.WebGLTextures: Unsupported texture encoding:", encoding); } + this.pointType = ""; } - return image2; + this.load("$dragLinePanel"); + this.load("$connectedLinePanel"); + this.modifyFilter(); } - this.allocateTextureUnit = allocateTextureUnit; - this.resetTextureUnits = resetTextureUnits; - this.setTexture2D = setTexture2D; - this.setTexture2DArray = setTexture2DArray; - this.setTexture3D = setTexture3D; - this.setTextureCube = setTextureCube; - this.rebindTextures = rebindTextures; - this.setupRenderTarget = setupRenderTarget; - this.updateRenderTargetMipmap = updateRenderTargetMipmap; - this.updateMultisampleRenderTarget = updateMultisampleRenderTarget; - this.setupDepthRenderbuffer = setupDepthRenderbuffer; - this.setupFrameBufferTexture = setupFrameBufferTexture; - this.useMultisampledRTT = useMultisampledRTT; -} -function WebGLUtils(gl, extensions, capabilities) { - const isWebGL2 = capabilities.isWebGL2; - function convert(p, encoding = null) { - let extension; - if (p === UnsignedByteType) - return 5121; - if (p === UnsignedShort4444Type) - return 32819; - if (p === UnsignedShort5551Type) - return 32820; - if (p === ByteType) - return 5120; - if (p === ShortType) - return 5122; - if (p === UnsignedShortType) - return 5123; - if (p === IntType) - return 5124; - if (p === UnsignedIntType) - return 5125; - if (p === FloatType) - return 5126; - if (p === HalfFloatType) { - if (isWebGL2) - return 5131; - extension = extensions.get("OES_texture_half_float"); - if (extension !== null) { - return extension.HALF_FLOAT_OES; + move(dx, dy) { + var filter2 = this.state.selectedFilter; + if (filter2) { + this.startXY.dx = dx; + this.startXY.dy = dy; + if (this.pointType === "in") { + this.load("$dragLinePanel"); + } else if (this.pointType === "out") { + this.load("$dragLinePanel"); } else { - return null; + filter2.reset({ + bound: { x: this.startXY.x + dx, y: this.startXY.y + dy } + }); + this.$target.css({ + left: filter2.bound.x, + top: filter2.bound.y + }); + this.load("$connectedLinePanel"); } } - if (p === AlphaFormat) - return 6406; - if (p === RGBAFormat) - return 6408; - if (p === LuminanceFormat) - return 6409; - if (p === LuminanceAlphaFormat) - return 6410; - if (p === DepthFormat) - return 6402; - if (p === DepthStencilFormat) - return 34041; - if (p === RedFormat) - return 6403; - if (p === RGBFormat) { - console.warn("THREE.WebGLRenderer: THREE.RGBFormat has been removed. Use THREE.RGBAFormat instead. https://github.com/mrdoob/three.js/pull/23228"); - return 6408; - } - if (p === _SRGBAFormat) { - extension = extensions.get("EXT_sRGB"); - if (extension !== null) { - return extension.SRGB_ALPHA_EXT; - } else { - return null; - } + } + makeGraphPanel() { + return this.state.filters.map((it, index2) => { + const selectedClass = index2 === this.state.selectedIndex ? "selected" : ""; + return ` +
+
${this.$i18n(it.type)}
+
${iconUse("close")}
+
${getIcon(it.type)}
+
+ ${repeat(it.getInCount()).map((itIn, inIndex) => { + return `
`; + }).join("")} +
+ +
${iconUse("chevron_right")}
+ ${it.hasLight() ? `
` : ""} +
+ `; + }); + } + [SUBSCRIBE_SELF("changeFuncFilterEditor")](key, value) { + var filter2 = this.state.selectedFilter; + if (filter2) { + filter2.reset({ + [key]: value + }); } - if (p === RedIntegerFormat) - return 36244; - if (p === RGFormat) - return 33319; - if (p === RGIntegerFormat) - return 33320; - if (p === RGBAIntegerFormat) - return 36249; - if (p === RGB_S3TC_DXT1_Format || p === RGBA_S3TC_DXT1_Format || p === RGBA_S3TC_DXT3_Format || p === RGBA_S3TC_DXT5_Format) { - if (encoding === sRGBEncoding) { - extension = extensions.get("WEBGL_compressed_texture_s3tc_srgb"); - if (extension !== null) { - if (p === RGB_S3TC_DXT1_Format) - return extension.COMPRESSED_SRGB_S3TC_DXT1_EXT; - if (p === RGBA_S3TC_DXT1_Format) - return extension.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT; - if (p === RGBA_S3TC_DXT3_Format) - return extension.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT; - if (p === RGBA_S3TC_DXT5_Format) - return extension.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT; - } else { - return null; - } - } else { - extension = extensions.get("WEBGL_compressed_texture_s3tc"); - if (extension !== null) { - if (p === RGB_S3TC_DXT1_Format) - return extension.COMPRESSED_RGB_S3TC_DXT1_EXT; - if (p === RGBA_S3TC_DXT1_Format) - return extension.COMPRESSED_RGBA_S3TC_DXT1_EXT; - if (p === RGBA_S3TC_DXT3_Format) - return extension.COMPRESSED_RGBA_S3TC_DXT3_EXT; - if (p === RGBA_S3TC_DXT5_Format) - return extension.COMPRESSED_RGBA_S3TC_DXT5_EXT; - } else { - return null; - } - } + this.modifyFilter(); + } + [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { + var filter2 = this.state.selectedFilter; + if (filter2) { + filter2.reset({ + [key]: value + }); } - if (p === RGB_PVRTC_4BPPV1_Format || p === RGB_PVRTC_2BPPV1_Format || p === RGBA_PVRTC_4BPPV1_Format || p === RGBA_PVRTC_2BPPV1_Format) { - extension = extensions.get("WEBGL_compressed_texture_pvrtc"); - if (extension !== null) { - if (p === RGB_PVRTC_4BPPV1_Format) - return extension.COMPRESSED_RGB_PVRTC_4BPPV1_IMG; - if (p === RGB_PVRTC_2BPPV1_Format) - return extension.COMPRESSED_RGB_PVRTC_2BPPV1_IMG; - if (p === RGBA_PVRTC_4BPPV1_Format) - return extension.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG; - if (p === RGBA_PVRTC_2BPPV1_Format) - return extension.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG; - } else { - return null; - } + this.modifyFilter(); + } + [SUBSCRIBE_SELF("changeTextEditor")](key, value) { + var filter2 = this.state.selectedFilter; + if (filter2) { + filter2.reset({ + [key]: value + }); } - if (p === RGB_ETC1_Format) { - extension = extensions.get("WEBGL_compressed_texture_etc1"); - if (extension !== null) { - return extension.COMPRESSED_RGB_ETC1_WEBGL; - } else { - return null; - } + this.modifyFilter(); + } + removeFilter(id) { + var filters = this.state.filters.filter((it) => it.id != id); + filters.forEach((it) => { + it.connected = it.connected.filter((c2) => c2.id != id); + it.in = it.in.filter((c2) => c2.id != id); + }); + if (this.state.selectedFilter.id === id) { + this.state.selectedFilter = null; + this.state.selectedIndex = -1; } - if (p === RGB_ETC2_Format || p === RGBA_ETC2_EAC_Format) { - extension = extensions.get("WEBGL_compressed_texture_etc"); - if (extension !== null) { - if (p === RGB_ETC2_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ETC2 : extension.COMPRESSED_RGB8_ETC2; - if (p === RGBA_ETC2_EAC_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC : extension.COMPRESSED_RGBA8_ETC2_EAC; - } else { - return null; + this.setState({ + filters + }); + this.modifyFilter(); + } + [CLICK("$graphPanel .filter-node .remove")](e) { + var $target = e.$dt.closest("filter-node"); + var index2 = +$target.attr("data-index"); + var f = this.state.filters[index2]; + this.removeFilter(f.id); + } +} +var SVGFilterPopup$1 = ""; +class SVGFilterPopup extends BasePopup { + getTitle() { + return this.$i18n("svgfilter.popup.title"); + } + getClassName() { + return "transparent"; + } + initState() { + return { + changeEvent: "changeSVGFilterPopup", + id: "", + preview: true, + filters: [] + }; + } + updateData(opt) { + this.setState(opt, false); + this.emit(this.state.changeEvent, this.state); + } + getBody() { + return ` +
+
+
+
+
`; + } + [LOAD("$editor")]() { + return createComponent("SVGFilterEditor", { + ref: "$filter", + title: "Filter Type", + key: "filter", + value: this.state.filters, + onchange: (key, filters) => { + this.updateData({ + filters + }); } - } - if (p === RGBA_ASTC_4x4_Format || p === RGBA_ASTC_5x4_Format || p === RGBA_ASTC_5x5_Format || p === RGBA_ASTC_6x5_Format || p === RGBA_ASTC_6x6_Format || p === RGBA_ASTC_8x5_Format || p === RGBA_ASTC_8x6_Format || p === RGBA_ASTC_8x8_Format || p === RGBA_ASTC_10x5_Format || p === RGBA_ASTC_10x6_Format || p === RGBA_ASTC_10x8_Format || p === RGBA_ASTC_10x10_Format || p === RGBA_ASTC_12x10_Format || p === RGBA_ASTC_12x12_Format) { - extension = extensions.get("WEBGL_compressed_texture_astc"); - if (extension !== null) { - if (p === RGBA_ASTC_4x4_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR : extension.COMPRESSED_RGBA_ASTC_4x4_KHR; - if (p === RGBA_ASTC_5x4_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR : extension.COMPRESSED_RGBA_ASTC_5x4_KHR; - if (p === RGBA_ASTC_5x5_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR : extension.COMPRESSED_RGBA_ASTC_5x5_KHR; - if (p === RGBA_ASTC_6x5_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR : extension.COMPRESSED_RGBA_ASTC_6x5_KHR; - if (p === RGBA_ASTC_6x6_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR : extension.COMPRESSED_RGBA_ASTC_6x6_KHR; - if (p === RGBA_ASTC_8x5_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR : extension.COMPRESSED_RGBA_ASTC_8x5_KHR; - if (p === RGBA_ASTC_8x6_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR : extension.COMPRESSED_RGBA_ASTC_8x6_KHR; - if (p === RGBA_ASTC_8x8_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR : extension.COMPRESSED_RGBA_ASTC_8x8_KHR; - if (p === RGBA_ASTC_10x5_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR : extension.COMPRESSED_RGBA_ASTC_10x5_KHR; - if (p === RGBA_ASTC_10x6_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR : extension.COMPRESSED_RGBA_ASTC_10x6_KHR; - if (p === RGBA_ASTC_10x8_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR : extension.COMPRESSED_RGBA_ASTC_10x8_KHR; - if (p === RGBA_ASTC_10x10_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR : extension.COMPRESSED_RGBA_ASTC_10x10_KHR; - if (p === RGBA_ASTC_12x10_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR : extension.COMPRESSED_RGBA_ASTC_12x10_KHR; - if (p === RGBA_ASTC_12x12_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR : extension.COMPRESSED_RGBA_ASTC_12x12_KHR; - } else { - return null; + }); + } + [SUBSCRIBE("showSVGFilterPopup")](data) { + data.filters = data.filters.map((it) => { + return SVGFilter.parse(it); + }); + data.preview = isNotUndefined(data.preview) ? data.preview : true; + this.setState(data); + this.show(1e3); + } + [SUBSCRIBE("hideSVGFilterPopup")]() { + this.$el.hide(); + } +} +var SVGFilterSelectEditor$1 = ""; +class SVGFilterSelectEditor extends EditorElement { + initState() { + var value = this.props.value; + return { + options: [], + label: this.props.label || "", + value + }; + } + template() { + var { label } = this.state; + var hasLabel = label ? "has-label" : ""; + return ` +
+ ${label ? `` : ""} + + + +
+ `; + } + [CLICK("$remove")]() { + this.updateData({ + value: "" + }); + } + [CLICK("$open")]() { + var value = this.state.value; + if (value.includes("id")) { + var currentProject = this.$context.selection.currentProject; + var index2 = currentProject.getSVGFilterIndex(value); + if (index2 > -1) { + this.trigger("openSVGFilterPopup", index2); } } - if (p === RGBA_BPTC_Format) { - extension = extensions.get("EXT_texture_compression_bptc"); - if (extension !== null) { - if (p === RGBA_BPTC_Format) - return encoding === sRGBEncoding ? extension.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT : extension.COMPRESSED_RGBA_BPTC_UNORM_EXT; - } else { - return null; - } + } + getValue() { + return this.state.value; + } + setValue(value) { + this.setState({ value }); + } + [BIND("$options")]() { + return { + "data-count": this.state.options.length.toString() + }; + } + [LOAD("$options")]() { + var current = this.$context.selection.currentProject; + var options2 = ""; + if (current) { + options2 = current.svgfilters.map((it) => it.id); + options2 = options2.length ? "," + options2.join(",") : ""; } - if (p === UnsignedInt248Type) { - if (isWebGL2) - return 34042; - extension = extensions.get("WEBGL_depth_texture"); - if (extension !== null) { - return extension.UNSIGNED_INT_24_8_WEBGL; - } else { - return null; + options2 += ",-,new"; + options2 = options2.split(","); + var arr = options2.map((it) => { + var value = it; + var label = it; + if (value.includes(":")) { + var [value, label] = value.split(":"); } + if (label === "") { + label = this.props["none-value"] ? this.props["none-value"] : ""; + } else if (label === "-") { + label = "----------"; + value = ""; + } + var selected = value === this.state.value ? "selected" : ""; + return ``; + }); + return arr; + } + setOptions(options2 = "") { + this.setState({ + options: options2.split(this.state.splitChar).map((it) => it.trim()) + }); + } + [CHANGE("$options")]() { + var value = this.refs.$options.value; + if (value == "new") { + this.$commands.emit("addSVGFilterAssetItem", (index2, id) => { + this.updateData({ value: id }); + this.refresh(); + this.trigger("openSVGFilterPopup", index2); + }); + } else if (value === "-") + ; + else { + this.updateData({ value }); } } - return { convert }; -} -class ArrayCamera extends PerspectiveCamera { - constructor(array = []) { - super(); - this.cameras = array; + updateData(data) { + this.setState(data, false); + this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); } -} -ArrayCamera.prototype.isArrayCamera = true; -class Group extends Object3D { - constructor() { - super(); - this.type = "Group"; + [SUBSCRIBE("refreshSVGArea") + DEBOUNCE(1e3)]() { + this.load("$options"); } -} -Group.prototype.isGroup = true; -const _moveEvent = { type: "move" }; -class WebXRController { - constructor() { - this._targetRay = null; - this._grip = null; - this._hand = null; - } - getHandSpace() { - if (this._hand === null) { - this._hand = new Group(); - this._hand.matrixAutoUpdate = false; - this._hand.visible = false; - this._hand.joints = {}; - this._hand.inputState = { pinching: false }; - } - return this._hand; - } - getTargetRaySpace() { - if (this._targetRay === null) { - this._targetRay = new Group(); - this._targetRay.matrixAutoUpdate = false; - this._targetRay.visible = false; - this._targetRay.hasLinearVelocity = false; - this._targetRay.linearVelocity = new Vector3(); - this._targetRay.hasAngularVelocity = false; - this._targetRay.angularVelocity = new Vector3(); - } - return this._targetRay; - } - getGripSpace() { - if (this._grip === null) { - this._grip = new Group(); - this._grip.matrixAutoUpdate = false; - this._grip.visible = false; - this._grip.hasLinearVelocity = false; - this._grip.linearVelocity = new Vector3(); - this._grip.hasAngularVelocity = false; - this._grip.angularVelocity = new Vector3(); - } - return this._grip; - } - dispatchEvent(event) { - if (this._targetRay !== null) { - this._targetRay.dispatchEvent(event); - } - if (this._grip !== null) { - this._grip.dispatchEvent(event); - } - if (this._hand !== null) { - this._hand.dispatchEvent(event); - } - return this; + [SUBSCRIBE("openSVGFilterPopup")](index2) { + this.emit("refreshSVGFilterAssets"); + this.emit("refreshSVGArea"); + var currentProject = this.$context.selection.currentProject || { + svgfilters: [] + }; + var svgfilter = currentProject.svgfilters[index2]; + this.emit("showSVGFilterPopup", { + changeEvent: "changeSVGFilterEditorRealUpdate", + preview: false, + index: index2, + filters: svgfilter.filters + }); } - disconnect(inputSource) { - this.dispatchEvent({ type: "disconnected", data: inputSource }); - if (this._targetRay !== null) { - this._targetRay.visible = false; - } - if (this._grip !== null) { - this._grip.visible = false; - } - if (this._hand !== null) { - this._hand.visible = false; + [SUBSCRIBE("changeSVGFilterEditorRealUpdate")](params) { + var project2 = this.$context.selection.currentProject; + if (project2) { + project2.setSVGFilterValue(params.index, { + filters: params.filters + }); + this.emit("refreshSVGFilterAssets"); + this.emit("refreshSVGArea"); } - return this; } - update(inputSource, frame, referenceSpace) { - let inputPose = null; - let gripPose = null; - let handPose = null; - const targetRay = this._targetRay; - const grip = this._grip; - const hand = this._hand; - if (inputSource && frame.session.visibilityState !== "visible-blurred") { - if (targetRay !== null) { - inputPose = frame.getPose(inputSource.targetRaySpace, referenceSpace); - if (inputPose !== null) { - targetRay.matrix.fromArray(inputPose.transform.matrix); - targetRay.matrix.decompose(targetRay.position, targetRay.rotation, targetRay.scale); - if (inputPose.linearVelocity) { - targetRay.hasLinearVelocity = true; - targetRay.linearVelocity.copy(inputPose.linearVelocity); - } else { - targetRay.hasLinearVelocity = false; +} +function svgItem(editor) { + editor.registerElement({ + ColorMatrixEditor, + FuncFilterEditor, + SVGFilterSelectEditor, + SVGFilterEditor + }); + editor.registerUI("inspector.tab.style", { + SVGItemProperty: ObjectProperty.create({ + title: editor.$i18n("svg.item.property.title"), + editableProperty: "svg-item", + preventUpdate: true + }) + }); + editor.registerUI("popup", { + SVGFilterPopup + }); + editor.registerInspector("svg-item", (current) => { + return [ + { + key: "edit", + editor: "Button", + editorOptions: { + text: "Edit", + action: ["open.editor", current] + } + }, + { + type: "column", + size: [2, 1], + columns: [ + { type: "label", label: editor.$i18n("svg.item.property.fill") }, + { + key: "fillRule", + editor: "ToggleCheckBox", + editorOptions: { + toggleLabels: [iconUse("join_full"), iconUse("join_right")], + toggleValues: ["nonzero", "evenodd"] + }, + defaultValue: current.fillRule || "nonzero" } - if (inputPose.angularVelocity) { - targetRay.hasAngularVelocity = true; - targetRay.angularVelocity.copy(inputPose.angularVelocity); - } else { - targetRay.hasAngularVelocity = false; + ] + }, + { + type: "column", + size: [2, 1], + columns: [ + { + key: "fill", + editor: "FillSingleEditor", + editorOptions: { + wide: true + }, + defaultValue: current.fill + }, + { + key: "fillOpacity", + editor: "number-input", + editorOptions: { + compact: true, + label: "opacity", + min: 0, + max: 1, + step: 0.01 + }, + defaultValue: current.fillOpacity } - this.dispatchEvent(_moveEvent); - } - } - if (hand && inputSource.hand) { - handPose = true; - for (const inputjoint of inputSource.hand.values()) { - const jointPose = frame.getJointPose(inputjoint, referenceSpace); - if (hand.joints[inputjoint.jointName] === void 0) { - const joint2 = new Group(); - joint2.matrixAutoUpdate = false; - joint2.visible = false; - hand.joints[inputjoint.jointName] = joint2; - hand.add(joint2); + ] + }, + { + type: "column", + size: [2, 1], + columns: [ + { type: "label", label: editor.$i18n("svg.item.property.stroke") } + ] + }, + { + type: "column", + size: [2, 1], + columns: [ + { + key: "stroke", + editor: "fill-single", + editorOptions: { + wide: true + }, + defaultValue: current.stroke + }, + { + key: "strokeWidth", + editor: "number-input", + editorOptions: { + compact: true, + label: "line_weight" + }, + defaultValue: current.strokeWidth } - const joint = hand.joints[inputjoint.jointName]; - if (jointPose !== null) { - joint.matrix.fromArray(jointPose.transform.matrix); - joint.matrix.decompose(joint.position, joint.rotation, joint.scale); - joint.jointRadius = jointPose.radius; + ] + }, + { + type: "column", + size: [2, 1], + columns: [ + { + key: "strokeDasharray", + editor: "StrokeDashArrayEditor", + editorOptions: { + label: editor.$i18n("svg.item.property.dashArray") + }, + defaultValue: current.strokeDasharray || "" + }, + { + key: "strokeDashoffset", + editor: "number-input", + editorOptions: { + compact: true, + label: "power_input", + min: -1e3, + max: 1e3, + step: 1 + }, + defaultValue: current.strokeDashoffset } - joint.visible = jointPose !== null; - } - const indexTip = hand.joints["index-finger-tip"]; - const thumbTip = hand.joints["thumb-tip"]; - const distance2 = indexTip.position.distanceTo(thumbTip.position); - const distanceToPinch = 0.02; - const threshold = 5e-3; - if (hand.inputState.pinching && distance2 > distanceToPinch + threshold) { - hand.inputState.pinching = false; - this.dispatchEvent({ - type: "pinchend", - handedness: inputSource.handedness, - target: this - }); - } else if (!hand.inputState.pinching && distance2 <= distanceToPinch - threshold) { - hand.inputState.pinching = true; - this.dispatchEvent({ - type: "pinchstart", - handedness: inputSource.handedness, - target: this - }); + ] + }, + { + key: "strokeLinecap", + editor: "ToggleCheckBox", + editorOptions: { + label: editor.$i18n("svg.item.property.lineCap"), + toggleLabels: [ + iconUse("line_cap_butt"), + iconUse("line_cap_round"), + iconUse("line_cap_square") + ], + toggleValues: [ + StrokeLineCap.BUTT, + StrokeLineJoin.ROUND, + StrokeLineCap.SQUARE + ] + }, + defaultValue: current.strokeLinecap || StrokeLineCap.BUTT + }, + { + key: "strokeLinejoin", + editor: "ToggleCheckBox", + editorOptions: { + label: editor.$i18n("svg.item.property.lineJoin"), + toggleLabels: [ + iconUse("line_join_miter"), + iconUse("line_join_round"), + iconUse("line_join_bevel") + ], + toggleValues: [ + StrokeLineJoin.MITER, + StrokeLineJoin.ROUND, + StrokeLineJoin.BEVEL + ] + }, + defaultValue: current.strokeLinejoin || StrokeLineJoin.MITER + }, + { + key: "mixBlendMode", + editor: "BlendSelectEditor", + editorOptions: { + label: editor.$i18n("svg.item.property.blend") + }, + defaultValue: current.mixBlendMode + } + ]; + }); + editor.registerInspector("polygon", (item) => { + return [ + { + key: "count", + editor: "NumberInputEditor", + editorOptions: { + label: "Count", + min: 3, + max: 100, + step: 1 + }, + defaultValue: item.count + }, + { + key: "button", + editor: "Button", + editorOptions: { + label: "Copy ", + text: "as path", + command: "copy.path" } - } else { - if (grip !== null && inputSource.gripSpace) { - gripPose = frame.getPose(inputSource.gripSpace, referenceSpace); - if (gripPose !== null) { - grip.matrix.fromArray(gripPose.transform.matrix); - grip.matrix.decompose(grip.position, grip.rotation, grip.scale); - if (gripPose.linearVelocity) { - grip.hasLinearVelocity = true; - grip.linearVelocity.copy(gripPose.linearVelocity); - } else { - grip.hasLinearVelocity = false; - } - if (gripPose.angularVelocity) { - grip.hasAngularVelocity = true; - grip.angularVelocity.copy(gripPose.angularVelocity); - } else { - grip.hasAngularVelocity = false; + }, + { + key: "button2", + editor: "Button", + editorOptions: { + label: "Test Popup", + action: [ + "showComponentPopup", + { + title: "Sample Test Popup", + width: 400, + inspector: [ + { + key: "test", + editor: "Button", + editorOptions: { + label: "Test", + text: "text", + onClick: () => { + window.alert("yellow"); + } + } + } + ] } - } + ] } } - } - if (targetRay !== null) { - targetRay.visible = inputPose !== null; - } - if (grip !== null) { - grip.visible = gripPose !== null; - } - if (hand !== null) { - hand.visible = handPose !== null; - } - return this; - } -} -class DepthTexture extends Texture { - constructor(width2, height2, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, format2) { - format2 = format2 !== void 0 ? format2 : DepthFormat; - if (format2 !== DepthFormat && format2 !== DepthStencilFormat) { - throw new Error("DepthTexture format must be either THREE.DepthFormat or THREE.DepthStencilFormat"); - } - if (type === void 0 && format2 === DepthFormat) - type = UnsignedShortType; - if (type === void 0 && format2 === DepthStencilFormat) - type = UnsignedInt248Type; - super(null, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy); - this.image = { width: width2, height: height2 }; - this.magFilter = magFilter !== void 0 ? magFilter : NearestFilter; - this.minFilter = minFilter !== void 0 ? minFilter : NearestFilter; - this.flipY = false; - this.generateMipmaps = false; - } -} -DepthTexture.prototype.isDepthTexture = true; -class WebXRManager extends EventDispatcher { - constructor(renderer, gl) { - super(); - const scope = this; - let session = null; - let framebufferScaleFactor = 1; - let referenceSpace = null; - let referenceSpaceType = "local-floor"; - let pose = null; - let glBinding = null; - let glProjLayer = null; - let glBaseLayer = null; - let xrFrame = null; - const attributes = gl.getContextAttributes(); - let initialRenderTarget = null; - let newRenderTarget = null; - const controllers = []; - const inputSourcesMap = /* @__PURE__ */ new Map(); - const cameraL = new PerspectiveCamera(); - cameraL.layers.enable(1); - cameraL.viewport = new Vector4(); - const cameraR = new PerspectiveCamera(); - cameraR.layers.enable(2); - cameraR.viewport = new Vector4(); - const cameras = [cameraL, cameraR]; - const cameraVR = new ArrayCamera(); - cameraVR.layers.enable(1); - cameraVR.layers.enable(2); - let _currentDepthNear = null; - let _currentDepthFar = null; - this.cameraAutoUpdate = true; - this.enabled = false; - this.isPresenting = false; - this.getController = function(index2) { - let controller = controllers[index2]; - if (controller === void 0) { - controller = new WebXRController(); - controllers[index2] = controller; - } - return controller.getTargetRaySpace(); - }; - this.getControllerGrip = function(index2) { - let controller = controllers[index2]; - if (controller === void 0) { - controller = new WebXRController(); - controllers[index2] = controller; - } - return controller.getGripSpace(); - }; - this.getHand = function(index2) { - let controller = controllers[index2]; - if (controller === void 0) { - controller = new WebXRController(); - controllers[index2] = controller; - } - return controller.getHandSpace(); - }; - function onSessionEvent(event) { - const controller = inputSourcesMap.get(event.inputSource); - if (controller) { - controller.dispatchEvent({ type: event.type, data: event.inputSource }); - } - } - function onSessionEnd() { - inputSourcesMap.forEach(function(controller, inputSource) { - controller.disconnect(inputSource); - }); - inputSourcesMap.clear(); - _currentDepthNear = null; - _currentDepthFar = null; - renderer.setRenderTarget(initialRenderTarget); - glBaseLayer = null; - glProjLayer = null; - glBinding = null; - session = null; - newRenderTarget = null; - animation2.stop(); - scope.isPresenting = false; - scope.dispatchEvent({ type: "sessionend" }); - } - this.setFramebufferScaleFactor = function(value) { - framebufferScaleFactor = value; - if (scope.isPresenting === true) { - console.warn("THREE.WebXRManager: Cannot change framebuffer scale while presenting."); - } - }; - this.setReferenceSpaceType = function(value) { - referenceSpaceType = value; - if (scope.isPresenting === true) { - console.warn("THREE.WebXRManager: Cannot change reference space type while presenting."); - } - }; - this.getReferenceSpace = function() { - return referenceSpace; - }; - this.getBaseLayer = function() { - return glProjLayer !== null ? glProjLayer : glBaseLayer; - }; - this.getBinding = function() { - return glBinding; - }; - this.getFrame = function() { - return xrFrame; - }; - this.getSession = function() { - return session; - }; - this.setSession = async function(value) { - session = value; - if (session !== null) { - initialRenderTarget = renderer.getRenderTarget(); - session.addEventListener("select", onSessionEvent); - session.addEventListener("selectstart", onSessionEvent); - session.addEventListener("selectend", onSessionEvent); - session.addEventListener("squeeze", onSessionEvent); - session.addEventListener("squeezestart", onSessionEvent); - session.addEventListener("squeezeend", onSessionEvent); - session.addEventListener("end", onSessionEnd); - session.addEventListener("inputsourceschange", onInputSourcesChange); - if (attributes.xrCompatible !== true) { - await gl.makeXRCompatible(); + ]; + }); + editor.registerInspector("spline", () => { + return [ + { + key: "boundary", + editor: "SelectIconEditor", + editorOptions: { + label: "Boundary", + options: ["clamped", "open", "closed"] } - if (session.renderState.layers === void 0 || renderer.capabilities.isWebGL2 === false) { - const layerInit = { - antialias: session.renderState.layers === void 0 ? attributes.antialias : true, - alpha: attributes.alpha, - depth: attributes.depth, - stencil: attributes.stencil, - framebufferScaleFactor - }; - glBaseLayer = new XRWebGLLayer(session, gl, layerInit); - session.updateRenderState({ baseLayer: glBaseLayer }); - newRenderTarget = new WebGLRenderTarget(glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, { - format: RGBAFormat, - type: UnsignedByteType, - encoding: renderer.outputEncoding - }); - } else { - let depthFormat = null; - let depthType = null; - let glDepthFormat = null; - if (attributes.depth) { - glDepthFormat = attributes.stencil ? 35056 : 33190; - depthFormat = attributes.stencil ? DepthStencilFormat : DepthFormat; - depthType = attributes.stencil ? UnsignedInt248Type : UnsignedShortType; - } - const projectionlayerInit = { - colorFormat: renderer.outputEncoding === sRGBEncoding ? 35907 : 32856, - depthFormat: glDepthFormat, - scaleFactor: framebufferScaleFactor - }; - glBinding = new XRWebGLBinding(session, gl); - glProjLayer = glBinding.createProjectionLayer(projectionlayerInit); - session.updateRenderState({ layers: [glProjLayer] }); - newRenderTarget = new WebGLRenderTarget(glProjLayer.textureWidth, glProjLayer.textureHeight, { - format: RGBAFormat, - type: UnsignedByteType, - depthTexture: new DepthTexture(glProjLayer.textureWidth, glProjLayer.textureHeight, depthType, void 0, void 0, void 0, void 0, void 0, void 0, depthFormat), - stencilBuffer: attributes.stencil, - encoding: renderer.outputEncoding, - samples: attributes.antialias ? 4 : 0 - }); - const renderTargetProperties = renderer.properties.get(newRenderTarget); - renderTargetProperties.__ignoreDepthValues = glProjLayer.ignoreDepthValues; + }, + { + key: "button", + editor: "Button", + editorOptions: { + label: "Copy ", + text: "as path", + action: "copy.path" } - newRenderTarget.isXRRenderTarget = true; - this.setFoveation(1); - referenceSpace = await session.requestReferenceSpace(referenceSpaceType); - animation2.setContext(session); - animation2.start(); - scope.isPresenting = true; - scope.dispatchEvent({ type: "sessionstart" }); } - }; - function onInputSourcesChange(event) { - const inputSources = session.inputSources; - for (let i = 0; i < controllers.length; i++) { - inputSourcesMap.set(inputSources[i], controllers[i]); - } - for (let i = 0; i < event.removed.length; i++) { - const inputSource = event.removed[i]; - const controller = inputSourcesMap.get(inputSource); - if (controller) { - controller.dispatchEvent({ type: "disconnected", data: inputSource }); - inputSourcesMap.delete(inputSource); + ]; + }); + editor.registerInspector("star", (item) => { + return [ + { + key: "isCurve", + editor: "ToggleCheckBox", + editorOptions: { + label: "Curve", + defaultValue: item.isCurve } - } - for (let i = 0; i < event.added.length; i++) { - const inputSource = event.added[i]; - const controller = inputSourcesMap.get(inputSource); - if (controller) { - controller.dispatchEvent({ type: "connected", data: inputSource }); + }, + { + key: "count", + editor: "NumberInputEditor", + editorOptions: { + label: "Count", + min: 3, + max: 100, + step: 1, + wide: "true" } - } - } - const cameraLPos = new Vector3(); - const cameraRPos = new Vector3(); - function setProjectionFromUnion(camera, cameraL2, cameraR2) { - cameraLPos.setFromMatrixPosition(cameraL2.matrixWorld); - cameraRPos.setFromMatrixPosition(cameraR2.matrixWorld); - const ipd = cameraLPos.distanceTo(cameraRPos); - const projL = cameraL2.projectionMatrix.elements; - const projR = cameraR2.projectionMatrix.elements; - const near = projL[14] / (projL[10] - 1); - const far = projL[14] / (projL[10] + 1); - const topFov = (projL[9] + 1) / projL[5]; - const bottomFov = (projL[9] - 1) / projL[5]; - const leftFov = (projL[8] - 1) / projL[0]; - const rightFov = (projR[8] + 1) / projR[0]; - const left2 = near * leftFov; - const right2 = near * rightFov; - const zOffset = ipd / (-leftFov + rightFov); - const xOffset = zOffset * -leftFov; - cameraL2.matrixWorld.decompose(camera.position, camera.quaternion, camera.scale); - camera.translateX(xOffset); - camera.translateZ(zOffset); - camera.matrixWorld.compose(camera.position, camera.quaternion, camera.scale); - camera.matrixWorldInverse.copy(camera.matrixWorld).invert(); - const near2 = near + zOffset; - const far2 = far + zOffset; - const left22 = left2 - xOffset; - const right22 = right2 + (ipd - xOffset); - const top2 = topFov * far / far2 * near2; - const bottom2 = bottomFov * far / far2 * near2; - camera.projectionMatrix.makePerspective(left22, right22, top2, bottom2, near2, far2); - } - function updateCamera(camera, parent) { - if (parent === null) { - camera.matrixWorld.copy(camera.matrix); - } else { - camera.matrixWorld.multiplyMatrices(parent.matrixWorld, camera.matrix); - } - camera.matrixWorldInverse.copy(camera.matrixWorld).invert(); - } - this.updateCamera = function(camera) { - if (session === null) - return; - cameraVR.near = cameraR.near = cameraL.near = camera.near; - cameraVR.far = cameraR.far = cameraL.far = camera.far; - if (_currentDepthNear !== cameraVR.near || _currentDepthFar !== cameraVR.far) { - session.updateRenderState({ - depthNear: cameraVR.near, - depthFar: cameraVR.far - }); - _currentDepthNear = cameraVR.near; - _currentDepthFar = cameraVR.far; - } - const parent = camera.parent; - const cameras2 = cameraVR.cameras; - updateCamera(cameraVR, parent); - for (let i = 0; i < cameras2.length; i++) { - updateCamera(cameras2[i], parent); - } - cameraVR.matrixWorld.decompose(cameraVR.position, cameraVR.quaternion, cameraVR.scale); - camera.position.copy(cameraVR.position); - camera.quaternion.copy(cameraVR.quaternion); - camera.scale.copy(cameraVR.scale); - camera.matrix.copy(cameraVR.matrix); - camera.matrixWorld.copy(cameraVR.matrixWorld); - const children2 = camera.children; - for (let i = 0, l = children2.length; i < l; i++) { - children2[i].updateMatrixWorld(true); - } - if (cameras2.length === 2) { - setProjectionFromUnion(cameraVR, cameraL, cameraR); - } else { - cameraVR.projectionMatrix.copy(cameraL.projectionMatrix); - } - }; - this.getCamera = function() { - return cameraVR; - }; - this.getFoveation = function() { - if (glProjLayer !== null) { - return glProjLayer.fixedFoveation; - } - if (glBaseLayer !== null) { - return glBaseLayer.fixedFoveation; - } - return void 0; - }; - this.setFoveation = function(foveation) { - if (glProjLayer !== null) { - glProjLayer.fixedFoveation = foveation; - } - if (glBaseLayer !== null && glBaseLayer.fixedFoveation !== void 0) { - glBaseLayer.fixedFoveation = foveation; - } - }; - let onAnimationFrameCallback = null; - function onAnimationFrame(time, frame) { - pose = frame.getViewerPose(referenceSpace); - xrFrame = frame; - if (pose !== null) { - const views = pose.views; - if (glBaseLayer !== null) { - renderer.setRenderTargetFramebuffer(newRenderTarget, glBaseLayer.framebuffer); - renderer.setRenderTarget(newRenderTarget); + }, + { + key: "radius", + editor: "NumberInputEditor", + editorOptions: { + label: "Inner Radius", + min: -1, + max: 1, + step: 0.01, + wide: "true" } - let cameraVRNeedsUpdate = false; - if (views.length !== cameraVR.cameras.length) { - cameraVR.cameras.length = 0; - cameraVRNeedsUpdate = true; + }, + { + key: "tension", + editor: "NumberInputEditor", + editorOptions: { + label: "Tension", + min: 0, + max: 1, + step: 0.01, + wide: "true" } - for (let i = 0; i < views.length; i++) { - const view = views[i]; - let viewport = null; - if (glBaseLayer !== null) { - viewport = glBaseLayer.getViewport(view); - } else { - const glSubImage = glBinding.getViewSubImage(glProjLayer, view); - viewport = glSubImage.viewport; - if (i === 0) { - renderer.setRenderTargetTextures(newRenderTarget, glSubImage.colorTexture, glProjLayer.ignoreDepthValues ? void 0 : glSubImage.depthStencilTexture); - renderer.setRenderTarget(newRenderTarget); - } - } - const camera = cameras[i]; - camera.matrix.fromArray(view.transform.matrix); - camera.projectionMatrix.fromArray(view.projectionMatrix); - camera.viewport.set(viewport.x, viewport.y, viewport.width, viewport.height); - if (i === 0) { - cameraVR.matrix.copy(camera.matrix); - } - if (cameraVRNeedsUpdate === true) { - cameraVR.cameras.push(camera); - } + }, + { + key: "button", + editor: "Button", + editorOptions: { + label: "Copy ", + text: "as path", + action: "copy.path" } } - const inputSources = session.inputSources; - for (let i = 0; i < controllers.length; i++) { - const controller = controllers[i]; - const inputSource = inputSources[i]; - controller.update(inputSource, frame, referenceSpace); - } - if (onAnimationFrameCallback) - onAnimationFrameCallback(time, frame); - xrFrame = null; - } - const animation2 = new WebGLAnimation(); - animation2.setAnimationLoop(onAnimationFrame); - this.setAnimationLoop = function(callback) { - onAnimationFrameCallback = callback; - }; - this.dispose = function() { - }; - } + ]; + }); } -function WebGLMaterials(renderer, properties) { - function refreshFogUniforms(uniforms, fog) { - uniforms.fogColor.value.copy(fog.color); - if (fog.isFog) { - uniforms.fogNear.value = fog.near; - uniforms.fogFar.value = fog.far; - } else if (fog.isFogExp2) { - uniforms.fogDensity.value = fog.density; - } - } - function refreshMaterialUniforms(uniforms, material, pixelRatio, height2, transmissionRenderTarget) { - if (material.isMeshBasicMaterial) { - refreshUniformsCommon(uniforms, material); - } else if (material.isMeshLambertMaterial) { - refreshUniformsCommon(uniforms, material); - } else if (material.isMeshToonMaterial) { - refreshUniformsCommon(uniforms, material); - refreshUniformsToon(uniforms, material); - } else if (material.isMeshPhongMaterial) { - refreshUniformsCommon(uniforms, material); - refreshUniformsPhong(uniforms, material); - } else if (material.isMeshStandardMaterial) { - refreshUniformsCommon(uniforms, material); - refreshUniformsStandard(uniforms, material); - if (material.isMeshPhysicalMaterial) { - refreshUniformsPhysical(uniforms, material, transmissionRenderTarget); - } - } else if (material.isMeshMatcapMaterial) { - refreshUniformsCommon(uniforms, material); - refreshUniformsMatcap(uniforms, material); - } else if (material.isMeshDepthMaterial) { - refreshUniformsCommon(uniforms, material); - } else if (material.isMeshDistanceMaterial) { - refreshUniformsCommon(uniforms, material); - refreshUniformsDistance(uniforms, material); - } else if (material.isMeshNormalMaterial) { - refreshUniformsCommon(uniforms, material); - } else if (material.isLineBasicMaterial) { - refreshUniformsLine(uniforms, material); - if (material.isLineDashedMaterial) { - refreshUniformsDash(uniforms, material); - } - } else if (material.isPointsMaterial) { - refreshUniformsPoints(uniforms, material, pixelRatio, height2); - } else if (material.isSpriteMaterial) { - refreshUniformsSprites(uniforms, material); - } else if (material.isShadowMaterial) { - uniforms.color.value.copy(material.color); - uniforms.opacity.value = material.opacity; - } else if (material.isShaderMaterial) { - material.uniformsNeedUpdate = false; - } - } - function refreshUniformsCommon(uniforms, material) { - uniforms.opacity.value = material.opacity; - if (material.color) { - uniforms.diffuse.value.copy(material.color); - } - if (material.emissive) { - uniforms.emissive.value.copy(material.emissive).multiplyScalar(material.emissiveIntensity); - } - if (material.map) { - uniforms.map.value = material.map; - } - if (material.alphaMap) { - uniforms.alphaMap.value = material.alphaMap; - } - if (material.bumpMap) { - uniforms.bumpMap.value = material.bumpMap; - uniforms.bumpScale.value = material.bumpScale; - if (material.side === BackSide) - uniforms.bumpScale.value *= -1; - } - if (material.displacementMap) { - uniforms.displacementMap.value = material.displacementMap; - uniforms.displacementScale.value = material.displacementScale; - uniforms.displacementBias.value = material.displacementBias; - } - if (material.emissiveMap) { - uniforms.emissiveMap.value = material.emissiveMap; - } - if (material.normalMap) { - uniforms.normalMap.value = material.normalMap; - uniforms.normalScale.value.copy(material.normalScale); - if (material.side === BackSide) - uniforms.normalScale.value.negate(); - } - if (material.specularMap) { - uniforms.specularMap.value = material.specularMap; - } - if (material.alphaTest > 0) { - uniforms.alphaTest.value = material.alphaTest; - } - const envMap = properties.get(material).envMap; - if (envMap) { - uniforms.envMap.value = envMap; - uniforms.flipEnvMap.value = envMap.isCubeTexture && envMap.isRenderTargetTexture === false ? -1 : 1; - uniforms.reflectivity.value = material.reflectivity; - uniforms.ior.value = material.ior; - uniforms.refractionRatio.value = material.refractionRatio; - } - if (material.lightMap) { - uniforms.lightMap.value = material.lightMap; - const scaleFactor = renderer.physicallyCorrectLights !== true ? Math.PI : 1; - uniforms.lightMapIntensity.value = material.lightMapIntensity * scaleFactor; - } - if (material.aoMap) { - uniforms.aoMap.value = material.aoMap; - uniforms.aoMapIntensity.value = material.aoMapIntensity; - } - let uvScaleMap; - if (material.map) { - uvScaleMap = material.map; - } else if (material.specularMap) { - uvScaleMap = material.specularMap; - } else if (material.displacementMap) { - uvScaleMap = material.displacementMap; - } else if (material.normalMap) { - uvScaleMap = material.normalMap; - } else if (material.bumpMap) { - uvScaleMap = material.bumpMap; - } else if (material.roughnessMap) { - uvScaleMap = material.roughnessMap; - } else if (material.metalnessMap) { - uvScaleMap = material.metalnessMap; - } else if (material.alphaMap) { - uvScaleMap = material.alphaMap; - } else if (material.emissiveMap) { - uvScaleMap = material.emissiveMap; - } else if (material.clearcoatMap) { - uvScaleMap = material.clearcoatMap; - } else if (material.clearcoatNormalMap) { - uvScaleMap = material.clearcoatNormalMap; - } else if (material.clearcoatRoughnessMap) { - uvScaleMap = material.clearcoatRoughnessMap; - } else if (material.specularIntensityMap) { - uvScaleMap = material.specularIntensityMap; - } else if (material.specularColorMap) { - uvScaleMap = material.specularColorMap; - } else if (material.transmissionMap) { - uvScaleMap = material.transmissionMap; - } else if (material.thicknessMap) { - uvScaleMap = material.thicknessMap; - } else if (material.sheenColorMap) { - uvScaleMap = material.sheenColorMap; - } else if (material.sheenRoughnessMap) { - uvScaleMap = material.sheenRoughnessMap; - } - if (uvScaleMap !== void 0) { - if (uvScaleMap.isWebGLRenderTarget) { - uvScaleMap = uvScaleMap.texture; - } - if (uvScaleMap.matrixAutoUpdate === true) { - uvScaleMap.updateMatrix(); - } - uniforms.uvTransform.value.copy(uvScaleMap.matrix); - } - let uv2ScaleMap; - if (material.aoMap) { - uv2ScaleMap = material.aoMap; - } else if (material.lightMap) { - uv2ScaleMap = material.lightMap; - } - if (uv2ScaleMap !== void 0) { - if (uv2ScaleMap.isWebGLRenderTarget) { - uv2ScaleMap = uv2ScaleMap.texture; - } - if (uv2ScaleMap.matrixAutoUpdate === true) { - uv2ScaleMap.updateMatrix(); - } - uniforms.uv2Transform.value.copy(uv2ScaleMap.matrix); - } - } - function refreshUniformsLine(uniforms, material) { - uniforms.diffuse.value.copy(material.color); - uniforms.opacity.value = material.opacity; - } - function refreshUniformsDash(uniforms, material) { - uniforms.dashSize.value = material.dashSize; - uniforms.totalSize.value = material.dashSize + material.gapSize; - uniforms.scale.value = material.scale; - } - function refreshUniformsPoints(uniforms, material, pixelRatio, height2) { - uniforms.diffuse.value.copy(material.color); - uniforms.opacity.value = material.opacity; - uniforms.size.value = material.size * pixelRatio; - uniforms.scale.value = height2 * 0.5; - if (material.map) { - uniforms.map.value = material.map; - } - if (material.alphaMap) { - uniforms.alphaMap.value = material.alphaMap; - } - if (material.alphaTest > 0) { - uniforms.alphaTest.value = material.alphaTest; - } - let uvScaleMap; - if (material.map) { - uvScaleMap = material.map; - } else if (material.alphaMap) { - uvScaleMap = material.alphaMap; - } - if (uvScaleMap !== void 0) { - if (uvScaleMap.matrixAutoUpdate === true) { - uvScaleMap.updateMatrix(); - } - uniforms.uvTransform.value.copy(uvScaleMap.matrix); - } - } - function refreshUniformsSprites(uniforms, material) { - uniforms.diffuse.value.copy(material.color); - uniforms.opacity.value = material.opacity; - uniforms.rotation.value = material.rotation; - if (material.map) { - uniforms.map.value = material.map; - } - if (material.alphaMap) { - uniforms.alphaMap.value = material.alphaMap; - } - if (material.alphaTest > 0) { - uniforms.alphaTest.value = material.alphaTest; - } - let uvScaleMap; - if (material.map) { - uvScaleMap = material.map; - } else if (material.alphaMap) { - uvScaleMap = material.alphaMap; - } - if (uvScaleMap !== void 0) { - if (uvScaleMap.matrixAutoUpdate === true) { - uvScaleMap.updateMatrix(); - } - uniforms.uvTransform.value.copy(uvScaleMap.matrix); - } - } - function refreshUniformsPhong(uniforms, material) { - uniforms.specular.value.copy(material.specular); - uniforms.shininess.value = Math.max(material.shininess, 1e-4); +class SVGTextProperty extends BaseProperty { + getTitle() { + return this.$i18n("svg.text.property.title"); } - function refreshUniformsToon(uniforms, material) { - if (material.gradientMap) { - uniforms.gradientMap.value = material.gradientMap; - } + [SUBSCRIBE(REFRESH_SELECTION)]() { + this.refreshShow(["svg-textpath", "svg-text", "svg-tspan"]); } - function refreshUniformsStandard(uniforms, material) { - uniforms.roughness.value = material.roughness; - uniforms.metalness.value = material.metalness; - if (material.roughnessMap) { - uniforms.roughnessMap.value = material.roughnessMap; - } - if (material.metalnessMap) { - uniforms.metalnessMap.value = material.metalnessMap; - } - const envMap = properties.get(material).envMap; - if (envMap) { - uniforms.envMapIntensity.value = material.envMapIntensity; + refresh() { + var current = this.$context.selection.current; + if (current) { + this.setAllValue([ + "lengthAdjust", + "textLength", + "startOffset", + "text-anchor", + "text" + ]); } } - function refreshUniformsPhysical(uniforms, material, transmissionRenderTarget) { - uniforms.ior.value = material.ior; - if (material.sheen > 0) { - uniforms.sheenColor.value.copy(material.sheenColor).multiplyScalar(material.sheen); - uniforms.sheenRoughness.value = material.sheenRoughness; - if (material.sheenColorMap) { - uniforms.sheenColorMap.value = material.sheenColorMap; - } - if (material.sheenRoughnessMap) { - uniforms.sheenRoughnessMap.value = material.sheenRoughnessMap; - } - } - if (material.clearcoat > 0) { - uniforms.clearcoat.value = material.clearcoat; - uniforms.clearcoatRoughness.value = material.clearcoatRoughness; - if (material.clearcoatMap) { - uniforms.clearcoatMap.value = material.clearcoatMap; - } - if (material.clearcoatRoughnessMap) { - uniforms.clearcoatRoughnessMap.value = material.clearcoatRoughnessMap; - } - if (material.clearcoatNormalMap) { - uniforms.clearcoatNormalScale.value.copy(material.clearcoatNormalScale); - uniforms.clearcoatNormalMap.value = material.clearcoatNormalMap; - if (material.side === BackSide) { - uniforms.clearcoatNormalScale.value.negate(); - } - } - } - if (material.transmission > 0) { - uniforms.transmission.value = material.transmission; - uniforms.transmissionSamplerMap.value = transmissionRenderTarget.texture; - uniforms.transmissionSamplerSize.value.set(transmissionRenderTarget.width, transmissionRenderTarget.height); - if (material.transmissionMap) { - uniforms.transmissionMap.value = material.transmissionMap; - } - uniforms.thickness.value = material.thickness; - if (material.thicknessMap) { - uniforms.thicknessMap.value = material.thicknessMap; - } - uniforms.attenuationDistance.value = material.attenuationDistance; - uniforms.attenuationColor.value.copy(material.attenuationColor); - } - uniforms.specularIntensity.value = material.specularIntensity; - uniforms.specularColor.value.copy(material.specularColor); - if (material.specularIntensityMap) { - uniforms.specularIntensityMap.value = material.specularIntensityMap; - } - if (material.specularColorMap) { - uniforms.specularColorMap.value = material.specularColorMap; - } + setAllValue(list2 = []) { + var current = this.$context.selection.current; + if (!current) + return; + list2.forEach((key) => { + this.children[`$${key}`].setValue(current[key]); + }); } - function refreshUniformsMatcap(uniforms, material) { - if (material.matcap) { - uniforms.matcap.value = material.matcap; - } + getBody() { + return ` +
+ ${createComponent("TextAreaEditor", { + ref: "$text", + label: this.$i18n("svg.text.property.textarea"), + key: "text", + onchange: "changeTextValue" + })} +
+
+ ${createComponent("SelectIconEditor", { + ref: "$text-anchor", + label: this.$i18n("svg.text.property.anchor"), + key: "textAnchor", + options: ["start", "middle", "end"], + onchange: "changeTextValue" + })} + +
+
+ ${createComponent("SelectEditor", { + ref: "$lengthAdjust", + label: this.$i18n("svg.text.property.length.adjust"), + key: "lengthAdjust", + value: "spacing", + options: ["spacing", "spacingAndGlyphs"], + onchange: "changeTextValue" + })} + +
+
+ ${createComponent("RangeEditor", { + ref: "$textLength", + label: this.$i18n("svg.text.property.text.length"), + key: "textLength", + min: 0, + max: 1e3, + step: 0.1, + onchange: "changeTextValue" + })} + +
+
+ ${createComponent("RangeEditor", { + ref: "$startOffset", + label: this.$i18n("svg.text.property.start.offset"), + key: "startOffset", + min: 0, + max: 1e3, + step: 0.1, + onchange: "changeTextValue" + })} + +
+ `; } - function refreshUniformsDistance(uniforms, material) { - uniforms.referencePosition.value.copy(material.referencePosition); - uniforms.nearDistance.value = material.nearDistance; - uniforms.farDistance.value = material.farDistance; + [SUBSCRIBE_SELF("changeTextValue")](key, value) { + this.$commands.executeCommand("setAttribute", `change svg text property: ${key}`, this.$context.selection.packByValue({ + [key]: value + })); } - return { - refreshFogUniforms, - refreshMaterialUniforms - }; } -function createCanvasElement() { - const canvas = createElementNS("canvas"); - canvas.style.display = "block"; - return canvas; +function svgText(editor) { + editor.registerUI("inspector.tab.style", { + SVGTextProperty + }); } -function WebGLRenderer(parameters = {}) { - const _canvas2 = parameters.canvas !== void 0 ? parameters.canvas : createCanvasElement(), _context2 = parameters.context !== void 0 ? parameters.context : null, _depth = parameters.depth !== void 0 ? parameters.depth : true, _stencil = parameters.stencil !== void 0 ? parameters.stencil : true, _antialias = parameters.antialias !== void 0 ? parameters.antialias : false, _premultipliedAlpha = parameters.premultipliedAlpha !== void 0 ? parameters.premultipliedAlpha : true, _preserveDrawingBuffer = parameters.preserveDrawingBuffer !== void 0 ? parameters.preserveDrawingBuffer : false, _powerPreference = parameters.powerPreference !== void 0 ? parameters.powerPreference : "default", _failIfMajorPerformanceCaveat = parameters.failIfMajorPerformanceCaveat !== void 0 ? parameters.failIfMajorPerformanceCaveat : false; - let _alpha; - if (parameters.context !== void 0) { - _alpha = _context2.getContextAttributes().alpha; - } else { - _alpha = parameters.alpha !== void 0 ? parameters.alpha : false; - } - let currentRenderList = null; - let currentRenderState = null; - const renderListStack = []; - const renderStateStack = []; - this.domElement = _canvas2; - this.debug = { - checkShaderErrors: true - }; - this.autoClear = true; - this.autoClearColor = true; - this.autoClearDepth = true; - this.autoClearStencil = true; - this.sortObjects = true; - this.clippingPlanes = []; - this.localClippingEnabled = false; - this.outputEncoding = LinearEncoding; - this.physicallyCorrectLights = false; - this.toneMapping = NoToneMapping; - this.toneMappingExposure = 1; - const _this = this; - let _isContextLost = false; - let _currentActiveCubeFace = 0; - let _currentActiveMipmapLevel = 0; - let _currentRenderTarget = null; - let _currentMaterialId = -1; - let _currentCamera = null; - const _currentViewport = new Vector4(); - const _currentScissor = new Vector4(); - let _currentScissorTest = null; - let _width = _canvas2.width; - let _height = _canvas2.height; - let _pixelRatio = 1; - let _opaqueSort = null; - let _transparentSort = null; - const _viewport = new Vector4(0, 0, _width, _height); - const _scissor = new Vector4(0, 0, _width, _height); - let _scissorTest = false; - const _frustum = new Frustum(); - let _clippingEnabled = false; - let _localClippingEnabled = false; - let _transmissionRenderTarget = null; - const _projScreenMatrix2 = new Matrix4(); - const _vector22 = new Vector2(); - const _vector3 = new Vector3(); - const _emptyScene = { background: null, fog: null, environment: null, overrideMaterial: null, isScene: true }; - function getTargetPixelRatio() { - return _currentRenderTarget === null ? _pixelRatio : 1; - } - let _gl = _context2; - function getContext(contextNames, contextAttributes) { - for (let i = 0; i < contextNames.length; i++) { - const contextName = contextNames[i]; - const context = _canvas2.getContext(contextName, contextAttributes); - if (context !== null) - return context; - } - return null; - } - try { - const contextAttributes = { - alpha: true, - depth: _depth, - stencil: _stencil, - antialias: _antialias, - premultipliedAlpha: _premultipliedAlpha, - preserveDrawingBuffer: _preserveDrawingBuffer, - powerPreference: _powerPreference, - failIfMajorPerformanceCaveat: _failIfMajorPerformanceCaveat - }; - if ("setAttribute" in _canvas2) - _canvas2.setAttribute("data-engine", `three.js r${REVISION}`); - _canvas2.addEventListener("webglcontextlost", onContextLost, false); - _canvas2.addEventListener("webglcontextrestored", onContextRestore, false); - if (_gl === null) { - const contextNames = ["webgl2", "webgl", "experimental-webgl"]; - if (_this.isWebGL1Renderer === true) { - contextNames.shift(); - } - _gl = getContext(contextNames, contextAttributes); - if (_gl === null) { - if (getContext(contextNames)) { - throw new Error("Error creating WebGL context with your selected attributes."); - } else { - throw new Error("Error creating WebGL context."); - } - } - } - if (_gl.getShaderPrecisionFormat === void 0) { - _gl.getShaderPrecisionFormat = function() { - return { "rangeMin": 1, "rangeMax": 1, "precision": 1 }; - }; - } - } catch (error) { - console.error("THREE.WebGLRenderer: " + error.message); - throw error; - } - let extensions, capabilities, state, info; - let properties, textures, cubemaps, cubeuvmaps, attributes, geometries, objects; - let programCache, materials, renderLists, renderStates, clipping, shadowMap; - let background, morphtargets, bufferRenderer, indexedBufferRenderer; - let utils, bindingStates; - function initGLContext() { - extensions = new WebGLExtensions(_gl); - capabilities = new WebGLCapabilities(_gl, extensions, parameters); - extensions.init(capabilities); - utils = new WebGLUtils(_gl, extensions, capabilities); - state = new WebGLState(_gl, extensions, capabilities); - info = new WebGLInfo(_gl); - properties = new WebGLProperties(); - textures = new WebGLTextures(_gl, extensions, state, properties, capabilities, utils, info); - cubemaps = new WebGLCubeMaps(_this); - cubeuvmaps = new WebGLCubeUVMaps(_this); - attributes = new WebGLAttributes(_gl, capabilities); - bindingStates = new WebGLBindingStates(_gl, extensions, attributes, capabilities); - geometries = new WebGLGeometries(_gl, attributes, info, bindingStates); - objects = new WebGLObjects(_gl, geometries, attributes, info); - morphtargets = new WebGLMorphtargets(_gl, capabilities, textures); - clipping = new WebGLClipping(properties); - programCache = new WebGLPrograms(_this, cubemaps, cubeuvmaps, extensions, capabilities, bindingStates, clipping); - materials = new WebGLMaterials(_this, properties); - renderLists = new WebGLRenderLists(); - renderStates = new WebGLRenderStates(extensions, capabilities); - background = new WebGLBackground(_this, cubemaps, state, objects, _alpha, _premultipliedAlpha); - shadowMap = new WebGLShadowMap(_this, objects, capabilities); - bufferRenderer = new WebGLBufferRenderer(_gl, extensions, info, capabilities); - indexedBufferRenderer = new WebGLIndexedBufferRenderer(_gl, extensions, info, capabilities); - info.programs = programCache.programs; - _this.capabilities = capabilities; - _this.extensions = extensions; - _this.properties = properties; - _this.renderLists = renderLists; - _this.shadowMap = shadowMap; - _this.state = state; - _this.info = info; - } - initGLContext(); - const xr = new WebXRManager(_this, _gl); - this.xr = xr; - this.getContext = function() { - return _gl; - }; - this.getContextAttributes = function() { - return _gl.getContextAttributes(); - }; - this.forceContextLoss = function() { - const extension = extensions.get("WEBGL_lose_context"); - if (extension) - extension.loseContext(); - }; - this.forceContextRestore = function() { - const extension = extensions.get("WEBGL_lose_context"); - if (extension) - extension.restoreContext(); - }; - this.getPixelRatio = function() { - return _pixelRatio; - }; - this.setPixelRatio = function(value) { - if (value === void 0) - return; - _pixelRatio = value; - this.setSize(_width, _height, false); - }; - this.getSize = function(target) { - return target.set(_width, _height); - }; - this.setSize = function(width2, height2, updateStyle) { - if (xr.isPresenting) { - console.warn("THREE.WebGLRenderer: Can't change size while VR device is presenting."); - return; - } - _width = width2; - _height = height2; - _canvas2.width = Math.floor(width2 * _pixelRatio); - _canvas2.height = Math.floor(height2 * _pixelRatio); - if (updateStyle !== false) { - _canvas2.style.width = width2 + "px"; - _canvas2.style.height = height2 + "px"; - } - this.setViewport(0, 0, width2, height2); - }; - this.getDrawingBufferSize = function(target) { - return target.set(_width * _pixelRatio, _height * _pixelRatio).floor(); - }; - this.setDrawingBufferSize = function(width2, height2, pixelRatio) { - _width = width2; - _height = height2; - _pixelRatio = pixelRatio; - _canvas2.width = Math.floor(width2 * pixelRatio); - _canvas2.height = Math.floor(height2 * pixelRatio); - this.setViewport(0, 0, width2, height2); - }; - this.getCurrentViewport = function(target) { - return target.copy(_currentViewport); - }; - this.getViewport = function(target) { - return target.copy(_viewport); - }; - this.setViewport = function(x, y, width2, height2) { - if (x.isVector4) { - _viewport.set(x.x, x.y, x.z, x.w); - } else { - _viewport.set(x, y, width2, height2); - } - state.viewport(_currentViewport.copy(_viewport).multiplyScalar(_pixelRatio).floor()); - }; - this.getScissor = function(target) { - return target.copy(_scissor); - }; - this.setScissor = function(x, y, width2, height2) { - if (x.isVector4) { - _scissor.set(x.x, x.y, x.z, x.w); - } else { - _scissor.set(x, y, width2, height2); - } - state.scissor(_currentScissor.copy(_scissor).multiplyScalar(_pixelRatio).floor()); - }; - this.getScissorTest = function() { - return _scissorTest; - }; - this.setScissorTest = function(boolean) { - state.setScissorTest(_scissorTest = boolean); - }; - this.setOpaqueSort = function(method) { - _opaqueSort = method; - }; - this.setTransparentSort = function(method) { - _transparentSort = method; - }; - this.getClearColor = function(target) { - return target.copy(background.getClearColor()); - }; - this.setClearColor = function() { - background.setClearColor.apply(background, arguments); - }; - this.getClearAlpha = function() { - return background.getClearAlpha(); - }; - this.setClearAlpha = function() { - background.setClearAlpha.apply(background, arguments); - }; - this.clear = function(color2 = true, depth = true, stencil = true) { - let bits = 0; - if (color2) - bits |= 16384; - if (depth) - bits |= 256; - if (stencil) - bits |= 1024; - _gl.clear(bits); - }; - this.clearColor = function() { - this.clear(true, false, false); - }; - this.clearDepth = function() { - this.clear(false, true, false); - }; - this.clearStencil = function() { - this.clear(false, false, true); - }; - this.dispose = function() { - _canvas2.removeEventListener("webglcontextlost", onContextLost, false); - _canvas2.removeEventListener("webglcontextrestored", onContextRestore, false); - renderLists.dispose(); - renderStates.dispose(); - properties.dispose(); - cubemaps.dispose(); - cubeuvmaps.dispose(); - objects.dispose(); - bindingStates.dispose(); - programCache.dispose(); - xr.dispose(); - xr.removeEventListener("sessionstart", onXRSessionStart); - xr.removeEventListener("sessionend", onXRSessionEnd); - if (_transmissionRenderTarget) { - _transmissionRenderTarget.dispose(); - _transmissionRenderTarget = null; - } - animation2.stop(); - }; - function onContextLost(event) { - event.preventDefault(); - console.log("THREE.WebGLRenderer: Context Lost."); - _isContextLost = true; - } - function onContextRestore() { - console.log("THREE.WebGLRenderer: Context Restored."); - _isContextLost = false; - const infoAutoReset = info.autoReset; - const shadowMapEnabled = shadowMap.enabled; - const shadowMapAutoUpdate = shadowMap.autoUpdate; - const shadowMapNeedsUpdate = shadowMap.needsUpdate; - const shadowMapType = shadowMap.type; - initGLContext(); - info.autoReset = infoAutoReset; - shadowMap.enabled = shadowMapEnabled; - shadowMap.autoUpdate = shadowMapAutoUpdate; - shadowMap.needsUpdate = shadowMapNeedsUpdate; - shadowMap.type = shadowMapType; - } - function onMaterialDispose(event) { - const material = event.target; - material.removeEventListener("dispose", onMaterialDispose); - deallocateMaterial(material); - } - function deallocateMaterial(material) { - releaseMaterialProgramReferences(material); - properties.remove(material); - } - function releaseMaterialProgramReferences(material) { - const programs = properties.get(material).programs; - if (programs !== void 0) { - programs.forEach(function(program) { - programCache.releaseProgram(program); - }); - if (material.isShaderMaterial) { - programCache.releaseShaderCache(material); - } - } - } - this.renderBufferDirect = function(camera, scene, geometry, material, object, group2) { - if (scene === null) - scene = _emptyScene; - const frontFaceCW = object.isMesh && object.matrixWorld.determinant() < 0; - const program = setProgram(camera, scene, geometry, material, object); - state.setMaterial(material, frontFaceCW); - let index2 = geometry.index; - const position2 = geometry.attributes.position; - if (index2 === null) { - if (position2 === void 0 || position2.count === 0) - return; - } else if (index2.count === 0) { - return; - } - let rangeFactor = 1; - if (material.wireframe === true) { - index2 = geometries.getWireframeAttribute(geometry); - rangeFactor = 2; - } - bindingStates.setup(object, material, program, geometry, index2); - let attribute; - let renderer = bufferRenderer; - if (index2 !== null) { - attribute = attributes.get(index2); - renderer = indexedBufferRenderer; - renderer.setIndex(attribute); - } - const dataCount = index2 !== null ? index2.count : position2.count; - const rangeStart = geometry.drawRange.start * rangeFactor; - const rangeCount = geometry.drawRange.count * rangeFactor; - const groupStart = group2 !== null ? group2.start * rangeFactor : 0; - const groupCount = group2 !== null ? group2.count * rangeFactor : Infinity; - const drawStart = Math.max(rangeStart, groupStart); - const drawEnd = Math.min(dataCount, rangeStart + rangeCount, groupStart + groupCount) - 1; - const drawCount = Math.max(0, drawEnd - drawStart + 1); - if (drawCount === 0) - return; - if (object.isMesh) { - if (material.wireframe === true) { - state.setLineWidth(material.wireframeLinewidth * getTargetPixelRatio()); - renderer.setMode(1); - } else { - renderer.setMode(4); - } - } else if (object.isLine) { - let lineWidth = material.linewidth; - if (lineWidth === void 0) - lineWidth = 1; - state.setLineWidth(lineWidth * getTargetPixelRatio()); - if (object.isLineSegments) { - renderer.setMode(1); - } else if (object.isLineLoop) { - renderer.setMode(2); - } else { - renderer.setMode(3); - } - } else if (object.isPoints) { - renderer.setMode(0); - } else if (object.isSprite) { - renderer.setMode(4); - } - if (object.isInstancedMesh) { - renderer.renderInstances(drawStart, drawCount, object.count); - } else if (geometry.isInstancedBufferGeometry) { - const instanceCount = Math.min(geometry.instanceCount, geometry._maxInstanceCount); - renderer.renderInstances(drawStart, drawCount, instanceCount); - } else { - renderer.render(drawStart, drawCount); - } - }; - this.compile = function(scene, camera) { - currentRenderState = renderStates.get(scene); - currentRenderState.init(); - renderStateStack.push(currentRenderState); - scene.traverseVisible(function(object) { - if (object.isLight && object.layers.test(camera.layers)) { - currentRenderState.pushLight(object); - if (object.castShadow) { - currentRenderState.pushShadow(object); - } - } - }); - currentRenderState.setupLights(_this.physicallyCorrectLights); - scene.traverse(function(object) { - const material = object.material; - if (material) { - if (Array.isArray(material)) { - for (let i = 0; i < material.length; i++) { - const material2 = material[i]; - getProgram(material2, scene, object); - } - } else { - getProgram(material, scene, object); - } - } - }); - renderStateStack.pop(); - currentRenderState = null; - }; - let onAnimationFrameCallback = null; - function onAnimationFrame(time) { - if (onAnimationFrameCallback) - onAnimationFrameCallback(time); - } - function onXRSessionStart() { - animation2.stop(); - } - function onXRSessionEnd() { - animation2.start(); - } - const animation2 = new WebGLAnimation(); - animation2.setAnimationLoop(onAnimationFrame); - if (typeof self !== "undefined") - animation2.setContext(self); - this.setAnimationLoop = function(callback) { - onAnimationFrameCallback = callback; - xr.setAnimationLoop(callback); - callback === null ? animation2.stop() : animation2.start(); - }; - xr.addEventListener("sessionstart", onXRSessionStart); - xr.addEventListener("sessionend", onXRSessionEnd); - this.render = function(scene, camera) { - if (camera !== void 0 && camera.isCamera !== true) { - console.error("THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera."); - return; - } - if (_isContextLost === true) - return; - if (scene.autoUpdate === true) - scene.updateMatrixWorld(); - if (camera.parent === null) - camera.updateMatrixWorld(); - if (xr.enabled === true && xr.isPresenting === true) { - if (xr.cameraAutoUpdate === true) - xr.updateCamera(camera); - camera = xr.getCamera(); - } - if (scene.isScene === true) - scene.onBeforeRender(_this, scene, camera, _currentRenderTarget); - currentRenderState = renderStates.get(scene, renderStateStack.length); - currentRenderState.init(); - renderStateStack.push(currentRenderState); - _projScreenMatrix2.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); - _frustum.setFromProjectionMatrix(_projScreenMatrix2); - _localClippingEnabled = this.localClippingEnabled; - _clippingEnabled = clipping.init(this.clippingPlanes, _localClippingEnabled, camera); - currentRenderList = renderLists.get(scene, renderListStack.length); - currentRenderList.init(); - renderListStack.push(currentRenderList); - projectObject(scene, camera, 0, _this.sortObjects); - currentRenderList.finish(); - if (_this.sortObjects === true) { - currentRenderList.sort(_opaqueSort, _transparentSort); - } - if (_clippingEnabled === true) - clipping.beginShadows(); - const shadowsArray = currentRenderState.state.shadowsArray; - shadowMap.render(shadowsArray, scene, camera); - if (_clippingEnabled === true) - clipping.endShadows(); - if (this.info.autoReset === true) - this.info.reset(); - background.render(currentRenderList, scene); - currentRenderState.setupLights(_this.physicallyCorrectLights); - if (camera.isArrayCamera) { - const cameras = camera.cameras; - for (let i = 0, l = cameras.length; i < l; i++) { - const camera2 = cameras[i]; - renderScene(currentRenderList, scene, camera2, camera2.viewport); - } - } else { - renderScene(currentRenderList, scene, camera); - } - if (_currentRenderTarget !== null) { - textures.updateMultisampleRenderTarget(_currentRenderTarget); - textures.updateRenderTargetMipmap(_currentRenderTarget); - } - if (scene.isScene === true) - scene.onAfterRender(_this, scene, camera); - bindingStates.resetDefaultState(); - _currentMaterialId = -1; - _currentCamera = null; - renderStateStack.pop(); - if (renderStateStack.length > 0) { - currentRenderState = renderStateStack[renderStateStack.length - 1]; - } else { - currentRenderState = null; - } - renderListStack.pop(); - if (renderListStack.length > 0) { - currentRenderList = renderListStack[renderListStack.length - 1]; - } else { - currentRenderList = null; - } - }; - function projectObject(object, camera, groupOrder, sortObjects) { - if (object.visible === false) - return; - const visible2 = object.layers.test(camera.layers); - if (visible2) { - if (object.isGroup) { - groupOrder = object.renderOrder; - } else if (object.isLOD) { - if (object.autoUpdate === true) - object.update(camera); - } else if (object.isLight) { - currentRenderState.pushLight(object); - if (object.castShadow) { - currentRenderState.pushShadow(object); - } - } else if (object.isSprite) { - if (!object.frustumCulled || _frustum.intersectsSprite(object)) { - if (sortObjects) { - _vector3.setFromMatrixPosition(object.matrixWorld).applyMatrix4(_projScreenMatrix2); - } - const geometry = objects.update(object); - const material = object.material; - if (material.visible) { - currentRenderList.push(object, geometry, material, groupOrder, _vector3.z, null); - } - } - } else if (object.isMesh || object.isLine || object.isPoints) { - if (object.isSkinnedMesh) { - if (object.skeleton.frame !== info.render.frame) { - object.skeleton.update(); - object.skeleton.frame = info.render.frame; - } - } - if (!object.frustumCulled || _frustum.intersectsObject(object)) { - if (sortObjects) { - _vector3.setFromMatrixPosition(object.matrixWorld).applyMatrix4(_projScreenMatrix2); +function text(editor) { + editor.registerUI("inspector.tab.style", { + TextProperty: ObjectProperty.create({ + title: editor.$i18n("text.property.title"), + editableProperty: "text-style", + preventUpdate: true + }) + }); + editor.registerInspector("text-style", (current) => { + return [ + { + type: "column", + size: [2, 1, 1], + columns: [ + { + key: "textAlign", + editor: "SelectIconEditor", + editorOptions: { + compact: true, + options: ["left", "center", "right", "justify"], + icons: [ + "align_left", + "align_center", + "align_right", + "align_justify" + ] + }, + defaultValue: current.textAlign || TextAlign.LEFT + }, + "-", + { + key: "textTransform", + editor: "SelectIconEditor", + editorOptions: { + options: [ + { value: TextTransform.CAPITALIZE, text: "Ag" }, + { value: TextTransform.UPPERCASE, text: "AG" }, + { value: TextTransform.LOWERCASE, text: "ag" } + ], + compact: true, + icons: ["horizontal_rule"] + }, + defaultValue: current.textTransform } - const geometry = objects.update(object); - const material = object.material; - if (Array.isArray(material)) { - const groups = geometry.groups; - for (let i = 0, l = groups.length; i < l; i++) { - const group2 = groups[i]; - const groupMaterial = material[group2.materialIndex]; - if (groupMaterial && groupMaterial.visible) { - currentRenderList.push(object, geometry, groupMaterial, groupOrder, _vector3.z, group2); - } - } - } else if (material.visible) { - currentRenderList.push(object, geometry, material, groupOrder, _vector3.z, null); + ] + }, + { + type: "column", + size: [3, 2, 1], + gap: 20, + columns: [ + { + key: "textDecoration", + editor: "SelectIconEditor", + editorOptions: { + options: [ + { value: TextDecoration.NONE, text: "None" }, + { value: TextDecoration.UNDERLINE, text: "Underline" }, + { value: TextDecoration.LINE_THROUGH, text: "LineThrough" } + ], + icons: ["horizontal_rule", "underline", "strikethrough"], + onchange: "changeTextValue" + }, + defaultValue: current.textDecoration + }, + { + key: "fontStyle", + editor: "SelectIconEditor", + editorOptions: { + compact: true, + options: ["normal", "italic"], + icons: ["title", "italic"] + }, + defaultValue: current.fontStyle + }, + { + key: "textClip", + editor: "ToggleButton", + editorOptions: { + checkedValue: TextClip.TEXT, + toggleLabels: [iconUse("vignette"), iconUse("vignette")], + toggleTitles: ["", "Text Clip"], + toggleValues: [TextClip.NONE, TextClip.TEXT] + }, + defaultValue: current.textClip || TextClip.NONE } - } - } - } - const children2 = object.children; - for (let i = 0, l = children2.length; i < l; i++) { - projectObject(children2[i], camera, groupOrder, sortObjects); - } - } - function renderScene(currentRenderList2, scene, camera, viewport) { - const opaqueObjects = currentRenderList2.opaque; - const transmissiveObjects = currentRenderList2.transmissive; - const transparentObjects = currentRenderList2.transparent; - currentRenderState.setupLightsView(camera); - if (transmissiveObjects.length > 0) - renderTransmissionPass(opaqueObjects, scene, camera); - if (viewport) - state.viewport(_currentViewport.copy(viewport)); - if (opaqueObjects.length > 0) - renderObjects(opaqueObjects, scene, camera); - if (transmissiveObjects.length > 0) - renderObjects(transmissiveObjects, scene, camera); - if (transparentObjects.length > 0) - renderObjects(transparentObjects, scene, camera); - state.buffers.depth.setTest(true); - state.buffers.depth.setMask(true); - state.buffers.color.setMask(true); - state.setPolygonOffset(false); - } - function renderTransmissionPass(opaqueObjects, scene, camera) { - const isWebGL2 = capabilities.isWebGL2; - if (_transmissionRenderTarget === null) { - _transmissionRenderTarget = new WebGLRenderTarget(1, 1, { - generateMipmaps: true, - type: utils.convert(HalfFloatType) !== null ? HalfFloatType : UnsignedByteType, - minFilter: LinearMipmapLinearFilter, - samples: isWebGL2 && _antialias === true ? 4 : 0 - }); - } - _this.getDrawingBufferSize(_vector22); - if (isWebGL2) { - _transmissionRenderTarget.setSize(_vector22.x, _vector22.y); - } else { - _transmissionRenderTarget.setSize(floorPowerOfTwo(_vector22.x), floorPowerOfTwo(_vector22.y)); - } - const currentRenderTarget = _this.getRenderTarget(); - _this.setRenderTarget(_transmissionRenderTarget); - _this.clear(); - const currentToneMapping = _this.toneMapping; - _this.toneMapping = NoToneMapping; - renderObjects(opaqueObjects, scene, camera); - _this.toneMapping = currentToneMapping; - textures.updateMultisampleRenderTarget(_transmissionRenderTarget); - textures.updateRenderTargetMipmap(_transmissionRenderTarget); - _this.setRenderTarget(currentRenderTarget); - } - function renderObjects(renderList, scene, camera) { - const overrideMaterial = scene.isScene === true ? scene.overrideMaterial : null; - for (let i = 0, l = renderList.length; i < l; i++) { - const renderItem = renderList[i]; - const object = renderItem.object; - const geometry = renderItem.geometry; - const material = overrideMaterial === null ? renderItem.material : overrideMaterial; - const group2 = renderItem.group; - if (object.layers.test(camera.layers)) { - renderObject(object, scene, camera, geometry, material, group2); - } - } - } - function renderObject(object, scene, camera, geometry, material, group2) { - object.onBeforeRender(_this, scene, camera, geometry, material, group2); - object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld); - object.normalMatrix.getNormalMatrix(object.modelViewMatrix); - material.onBeforeRender(_this, scene, camera, geometry, object, group2); - if (material.transparent === true && material.side === DoubleSide) { - material.side = BackSide; - material.needsUpdate = true; - _this.renderBufferDirect(camera, scene, geometry, material, object, group2); - material.side = FrontSide; - material.needsUpdate = true; - _this.renderBufferDirect(camera, scene, geometry, material, object, group2); - material.side = DoubleSide; - } else { - _this.renderBufferDirect(camera, scene, geometry, material, object, group2); - } - object.onAfterRender(_this, scene, camera, geometry, material, group2); - } - function getProgram(material, scene, object) { - if (scene.isScene !== true) - scene = _emptyScene; - const materialProperties = properties.get(material); - const lights = currentRenderState.state.lights; - const shadowsArray = currentRenderState.state.shadowsArray; - const lightsStateVersion = lights.state.version; - const parameters2 = programCache.getParameters(material, lights.state, shadowsArray, scene, object); - const programCacheKey = programCache.getProgramCacheKey(parameters2); - let programs = materialProperties.programs; - materialProperties.environment = material.isMeshStandardMaterial ? scene.environment : null; - materialProperties.fog = scene.fog; - materialProperties.envMap = (material.isMeshStandardMaterial ? cubeuvmaps : cubemaps).get(material.envMap || materialProperties.environment); - if (programs === void 0) { - material.addEventListener("dispose", onMaterialDispose); - programs = /* @__PURE__ */ new Map(); - materialProperties.programs = programs; - } - let program = programs.get(programCacheKey); - if (program !== void 0) { - if (materialProperties.currentProgram === program && materialProperties.lightsStateVersion === lightsStateVersion) { - updateCommonMaterialProperties(material, parameters2); - return program; - } - } else { - parameters2.uniforms = programCache.getUniforms(material); - material.onBuild(object, parameters2, _this); - material.onBeforeCompile(parameters2, _this); - program = programCache.acquireProgram(parameters2, programCacheKey); - programs.set(programCacheKey, program); - materialProperties.uniforms = parameters2.uniforms; - } - const uniforms = materialProperties.uniforms; - if (!material.isShaderMaterial && !material.isRawShaderMaterial || material.clipping === true) { - uniforms.clippingPlanes = clipping.uniform; - } - updateCommonMaterialProperties(material, parameters2); - materialProperties.needsLights = materialNeedsLights(material); - materialProperties.lightsStateVersion = lightsStateVersion; - if (materialProperties.needsLights) { - uniforms.ambientLightColor.value = lights.state.ambient; - uniforms.lightProbe.value = lights.state.probe; - uniforms.directionalLights.value = lights.state.directional; - uniforms.directionalLightShadows.value = lights.state.directionalShadow; - uniforms.spotLights.value = lights.state.spot; - uniforms.spotLightShadows.value = lights.state.spotShadow; - uniforms.rectAreaLights.value = lights.state.rectArea; - uniforms.ltc_1.value = lights.state.rectAreaLTC1; - uniforms.ltc_2.value = lights.state.rectAreaLTC2; - uniforms.pointLights.value = lights.state.point; - uniforms.pointLightShadows.value = lights.state.pointShadow; - uniforms.hemisphereLights.value = lights.state.hemi; - uniforms.directionalShadowMap.value = lights.state.directionalShadowMap; - uniforms.directionalShadowMatrix.value = lights.state.directionalShadowMatrix; - uniforms.spotShadowMap.value = lights.state.spotShadowMap; - uniforms.spotShadowMatrix.value = lights.state.spotShadowMatrix; - uniforms.pointShadowMap.value = lights.state.pointShadowMap; - uniforms.pointShadowMatrix.value = lights.state.pointShadowMatrix; - } - const progUniforms = program.getUniforms(); - const uniformsList = WebGLUniforms.seqWithValue(progUniforms.seq, uniforms); - materialProperties.currentProgram = program; - materialProperties.uniformsList = uniformsList; - return program; - } - function updateCommonMaterialProperties(material, parameters2) { - const materialProperties = properties.get(material); - materialProperties.outputEncoding = parameters2.outputEncoding; - materialProperties.instancing = parameters2.instancing; - materialProperties.skinning = parameters2.skinning; - materialProperties.morphTargets = parameters2.morphTargets; - materialProperties.morphNormals = parameters2.morphNormals; - materialProperties.morphColors = parameters2.morphColors; - materialProperties.morphTargetsCount = parameters2.morphTargetsCount; - materialProperties.numClippingPlanes = parameters2.numClippingPlanes; - materialProperties.numIntersection = parameters2.numClipIntersection; - materialProperties.vertexAlphas = parameters2.vertexAlphas; - materialProperties.vertexTangents = parameters2.vertexTangents; - materialProperties.toneMapping = parameters2.toneMapping; - } - function setProgram(camera, scene, geometry, material, object) { - if (scene.isScene !== true) - scene = _emptyScene; - textures.resetTextureUnits(); - const fog = scene.fog; - const environment = material.isMeshStandardMaterial ? scene.environment : null; - const encoding = _currentRenderTarget === null ? _this.outputEncoding : _currentRenderTarget.isXRRenderTarget === true ? _currentRenderTarget.texture.encoding : LinearEncoding; - const envMap = (material.isMeshStandardMaterial ? cubeuvmaps : cubemaps).get(material.envMap || environment); - const vertexAlphas = material.vertexColors === true && !!geometry.attributes.color && geometry.attributes.color.itemSize === 4; - const vertexTangents = !!material.normalMap && !!geometry.attributes.tangent; - const morphTargets = !!geometry.morphAttributes.position; - const morphNormals = !!geometry.morphAttributes.normal; - const morphColors = !!geometry.morphAttributes.color; - const toneMapping = material.toneMapped ? _this.toneMapping : NoToneMapping; - const morphAttribute = geometry.morphAttributes.position || geometry.morphAttributes.normal || geometry.morphAttributes.color; - const morphTargetsCount = morphAttribute !== void 0 ? morphAttribute.length : 0; - const materialProperties = properties.get(material); - const lights = currentRenderState.state.lights; - if (_clippingEnabled === true) { - if (_localClippingEnabled === true || camera !== _currentCamera) { - const useCache = camera === _currentCamera && material.id === _currentMaterialId; - clipping.setState(material, camera, useCache); - } - } - let needsProgramChange = false; - if (material.version === materialProperties.__version) { - if (materialProperties.needsLights && materialProperties.lightsStateVersion !== lights.state.version) { - needsProgramChange = true; - } else if (materialProperties.outputEncoding !== encoding) { - needsProgramChange = true; - } else if (object.isInstancedMesh && materialProperties.instancing === false) { - needsProgramChange = true; - } else if (!object.isInstancedMesh && materialProperties.instancing === true) { - needsProgramChange = true; - } else if (object.isSkinnedMesh && materialProperties.skinning === false) { - needsProgramChange = true; - } else if (!object.isSkinnedMesh && materialProperties.skinning === true) { - needsProgramChange = true; - } else if (materialProperties.envMap !== envMap) { - needsProgramChange = true; - } else if (material.fog && materialProperties.fog !== fog) { - needsProgramChange = true; - } else if (materialProperties.numClippingPlanes !== void 0 && (materialProperties.numClippingPlanes !== clipping.numPlanes || materialProperties.numIntersection !== clipping.numIntersection)) { - needsProgramChange = true; - } else if (materialProperties.vertexAlphas !== vertexAlphas) { - needsProgramChange = true; - } else if (materialProperties.vertexTangents !== vertexTangents) { - needsProgramChange = true; - } else if (materialProperties.morphTargets !== morphTargets) { - needsProgramChange = true; - } else if (materialProperties.morphNormals !== morphNormals) { - needsProgramChange = true; - } else if (materialProperties.morphColors !== morphColors) { - needsProgramChange = true; - } else if (materialProperties.toneMapping !== toneMapping) { - needsProgramChange = true; - } else if (capabilities.isWebGL2 === true && materialProperties.morphTargetsCount !== morphTargetsCount) { - needsProgramChange = true; - } - } else { - needsProgramChange = true; - materialProperties.__version = material.version; - } - let program = materialProperties.currentProgram; - if (needsProgramChange === true) { - program = getProgram(material, scene, object); - } - let refreshProgram = false; - let refreshMaterial = false; - let refreshLights = false; - const p_uniforms = program.getUniforms(), m_uniforms = materialProperties.uniforms; - if (state.useProgram(program.program)) { - refreshProgram = true; - refreshMaterial = true; - refreshLights = true; - } - if (material.id !== _currentMaterialId) { - _currentMaterialId = material.id; - refreshMaterial = true; - } - if (refreshProgram || _currentCamera !== camera) { - p_uniforms.setValue(_gl, "projectionMatrix", camera.projectionMatrix); - if (capabilities.logarithmicDepthBuffer) { - p_uniforms.setValue(_gl, "logDepthBufFC", 2 / (Math.log(camera.far + 1) / Math.LN2)); - } - if (_currentCamera !== camera) { - _currentCamera = camera; - refreshMaterial = true; - refreshLights = true; - } - if (material.isShaderMaterial || material.isMeshPhongMaterial || material.isMeshToonMaterial || material.isMeshStandardMaterial || material.envMap) { - const uCamPos = p_uniforms.map.cameraPosition; - if (uCamPos !== void 0) { - uCamPos.setValue(_gl, _vector3.setFromMatrixPosition(camera.matrixWorld)); - } - } - if (material.isMeshPhongMaterial || material.isMeshToonMaterial || material.isMeshLambertMaterial || material.isMeshBasicMaterial || material.isMeshStandardMaterial || material.isShaderMaterial) { - p_uniforms.setValue(_gl, "isOrthographic", camera.isOrthographicCamera === true); - } - if (material.isMeshPhongMaterial || material.isMeshToonMaterial || material.isMeshLambertMaterial || material.isMeshBasicMaterial || material.isMeshStandardMaterial || material.isShaderMaterial || material.isShadowMaterial || object.isSkinnedMesh) { - p_uniforms.setValue(_gl, "viewMatrix", camera.matrixWorldInverse); - } - } - if (object.isSkinnedMesh) { - p_uniforms.setOptional(_gl, object, "bindMatrix"); - p_uniforms.setOptional(_gl, object, "bindMatrixInverse"); - const skeleton = object.skeleton; - if (skeleton) { - if (capabilities.floatVertexTextures) { - if (skeleton.boneTexture === null) - skeleton.computeBoneTexture(); - p_uniforms.setValue(_gl, "boneTexture", skeleton.boneTexture, textures); - p_uniforms.setValue(_gl, "boneTextureSize", skeleton.boneTextureSize); - } else { - p_uniforms.setOptional(_gl, skeleton, "boneMatrices"); - } - } - } - const morphAttributes = geometry.morphAttributes; - if (morphAttributes.position !== void 0 || morphAttributes.normal !== void 0 || morphAttributes.color !== void 0 && capabilities.isWebGL2 === true) { - morphtargets.update(object, geometry, material, program); - } - if (refreshMaterial || materialProperties.receiveShadow !== object.receiveShadow) { - materialProperties.receiveShadow = object.receiveShadow; - p_uniforms.setValue(_gl, "receiveShadow", object.receiveShadow); - } - if (refreshMaterial) { - p_uniforms.setValue(_gl, "toneMappingExposure", _this.toneMappingExposure); - if (materialProperties.needsLights) { - markUniformsLightsNeedsUpdate(m_uniforms, refreshLights); - } - if (fog && material.fog) { - materials.refreshFogUniforms(m_uniforms, fog); - } - materials.refreshMaterialUniforms(m_uniforms, material, _pixelRatio, _height, _transmissionRenderTarget); - WebGLUniforms.upload(_gl, materialProperties.uniformsList, m_uniforms, textures); - } - if (material.isShaderMaterial && material.uniformsNeedUpdate === true) { - WebGLUniforms.upload(_gl, materialProperties.uniformsList, m_uniforms, textures); - material.uniformsNeedUpdate = false; - } - if (material.isSpriteMaterial) { - p_uniforms.setValue(_gl, "center", object.center); - } - p_uniforms.setValue(_gl, "modelViewMatrix", object.modelViewMatrix); - p_uniforms.setValue(_gl, "normalMatrix", object.normalMatrix); - p_uniforms.setValue(_gl, "modelMatrix", object.matrixWorld); - return program; - } - function markUniformsLightsNeedsUpdate(uniforms, value) { - uniforms.ambientLightColor.needsUpdate = value; - uniforms.lightProbe.needsUpdate = value; - uniforms.directionalLights.needsUpdate = value; - uniforms.directionalLightShadows.needsUpdate = value; - uniforms.pointLights.needsUpdate = value; - uniforms.pointLightShadows.needsUpdate = value; - uniforms.spotLights.needsUpdate = value; - uniforms.spotLightShadows.needsUpdate = value; - uniforms.rectAreaLights.needsUpdate = value; - uniforms.hemisphereLights.needsUpdate = value; - } - function materialNeedsLights(material) { - return material.isMeshLambertMaterial || material.isMeshToonMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial || material.isShadowMaterial || material.isShaderMaterial && material.lights === true; - } - this.getActiveCubeFace = function() { - return _currentActiveCubeFace; - }; - this.getActiveMipmapLevel = function() { - return _currentActiveMipmapLevel; - }; - this.getRenderTarget = function() { - return _currentRenderTarget; - }; - this.setRenderTargetTextures = function(renderTarget, colorTexture, depthTexture) { - properties.get(renderTarget.texture).__webglTexture = colorTexture; - properties.get(renderTarget.depthTexture).__webglTexture = depthTexture; - const renderTargetProperties = properties.get(renderTarget); - renderTargetProperties.__hasExternalTextures = true; - if (renderTargetProperties.__hasExternalTextures) { - renderTargetProperties.__autoAllocateDepthBuffer = depthTexture === void 0; - if (!renderTargetProperties.__autoAllocateDepthBuffer) { - if (extensions.has("WEBGL_multisampled_render_to_texture") === true) { - console.warn("THREE.WebGLRenderer: Render-to-texture extension was disabled because an external texture was provided"); - renderTargetProperties.__useRenderToTexture = false; - } - } - } - }; - this.setRenderTargetFramebuffer = function(renderTarget, defaultFramebuffer) { - const renderTargetProperties = properties.get(renderTarget); - renderTargetProperties.__webglFramebuffer = defaultFramebuffer; - renderTargetProperties.__useDefaultFramebuffer = defaultFramebuffer === void 0; - }; - this.setRenderTarget = function(renderTarget, activeCubeFace = 0, activeMipmapLevel = 0) { - _currentRenderTarget = renderTarget; - _currentActiveCubeFace = activeCubeFace; - _currentActiveMipmapLevel = activeMipmapLevel; - let useDefaultFramebuffer = true; - if (renderTarget) { - const renderTargetProperties = properties.get(renderTarget); - if (renderTargetProperties.__useDefaultFramebuffer !== void 0) { - state.bindFramebuffer(36160, null); - useDefaultFramebuffer = false; - } else if (renderTargetProperties.__webglFramebuffer === void 0) { - textures.setupRenderTarget(renderTarget); - } else if (renderTargetProperties.__hasExternalTextures) { - textures.rebindTextures(renderTarget, properties.get(renderTarget.texture).__webglTexture, properties.get(renderTarget.depthTexture).__webglTexture); - } - } - let framebuffer = null; - let isCube = false; - let isRenderTarget3D = false; - if (renderTarget) { - const texture2 = renderTarget.texture; - if (texture2.isData3DTexture || texture2.isDataArrayTexture) { - isRenderTarget3D = true; - } - const __webglFramebuffer = properties.get(renderTarget).__webglFramebuffer; - if (renderTarget.isWebGLCubeRenderTarget) { - framebuffer = __webglFramebuffer[activeCubeFace]; - isCube = true; - } else if (capabilities.isWebGL2 && renderTarget.samples > 0 && textures.useMultisampledRTT(renderTarget) === false) { - framebuffer = properties.get(renderTarget).__webglMultisampledFramebuffer; - } else { - framebuffer = __webglFramebuffer; - } - _currentViewport.copy(renderTarget.viewport); - _currentScissor.copy(renderTarget.scissor); - _currentScissorTest = renderTarget.scissorTest; - } else { - _currentViewport.copy(_viewport).multiplyScalar(_pixelRatio).floor(); - _currentScissor.copy(_scissor).multiplyScalar(_pixelRatio).floor(); - _currentScissorTest = _scissorTest; - } - const framebufferBound = state.bindFramebuffer(36160, framebuffer); - if (framebufferBound && capabilities.drawBuffers && useDefaultFramebuffer) { - state.drawBuffers(renderTarget, framebuffer); - } - state.viewport(_currentViewport); - state.scissor(_currentScissor); - state.setScissorTest(_currentScissorTest); - if (isCube) { - const textureProperties = properties.get(renderTarget.texture); - _gl.framebufferTexture2D(36160, 36064, 34069 + activeCubeFace, textureProperties.__webglTexture, activeMipmapLevel); - } else if (isRenderTarget3D) { - const textureProperties = properties.get(renderTarget.texture); - const layer = activeCubeFace || 0; - _gl.framebufferTextureLayer(36160, 36064, textureProperties.__webglTexture, activeMipmapLevel || 0, layer); - } - _currentMaterialId = -1; - }; - this.readRenderTargetPixels = function(renderTarget, x, y, width2, height2, buffer, activeCubeFaceIndex) { - if (!(renderTarget && renderTarget.isWebGLRenderTarget)) { - console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not THREE.WebGLRenderTarget."); - return; - } - let framebuffer = properties.get(renderTarget).__webglFramebuffer; - if (renderTarget.isWebGLCubeRenderTarget && activeCubeFaceIndex !== void 0) { - framebuffer = framebuffer[activeCubeFaceIndex]; - } - if (framebuffer) { - state.bindFramebuffer(36160, framebuffer); - try { - const texture2 = renderTarget.texture; - const textureFormat = texture2.format; - const textureType = texture2.type; - if (textureFormat !== RGBAFormat && utils.convert(textureFormat) !== _gl.getParameter(35739)) { - console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in RGBA or implementation defined format."); - return; - } - const halfFloatSupportedByExt = textureType === HalfFloatType && (extensions.has("EXT_color_buffer_half_float") || capabilities.isWebGL2 && extensions.has("EXT_color_buffer_float")); - if (textureType !== UnsignedByteType && utils.convert(textureType) !== _gl.getParameter(35738) && !(textureType === FloatType && (capabilities.isWebGL2 || extensions.has("OES_texture_float") || extensions.has("WEBGL_color_buffer_float"))) && !halfFloatSupportedByExt) { - console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in UnsignedByteType or implementation defined type."); - return; - } - if (x >= 0 && x <= renderTarget.width - width2 && (y >= 0 && y <= renderTarget.height - height2)) { - _gl.readPixels(x, y, width2, height2, utils.convert(textureFormat), utils.convert(textureType), buffer); - } - } finally { - const framebuffer2 = _currentRenderTarget !== null ? properties.get(_currentRenderTarget).__webglFramebuffer : null; - state.bindFramebuffer(36160, framebuffer2); - } - } - }; - this.copyFramebufferToTexture = function(position2, texture2, level = 0) { - if (texture2.isFramebufferTexture !== true) { - console.error("THREE.WebGLRenderer: copyFramebufferToTexture() can only be used with FramebufferTexture."); - return; - } - const levelScale = Math.pow(2, -level); - const width2 = Math.floor(texture2.image.width * levelScale); - const height2 = Math.floor(texture2.image.height * levelScale); - textures.setTexture2D(texture2, 0); - _gl.copyTexSubImage2D(3553, level, 0, 0, position2.x, position2.y, width2, height2); - state.unbindTexture(); - }; - this.copyTextureToTexture = function(position2, srcTexture, dstTexture, level = 0) { - const width2 = srcTexture.image.width; - const height2 = srcTexture.image.height; - const glFormat = utils.convert(dstTexture.format); - const glType = utils.convert(dstTexture.type); - textures.setTexture2D(dstTexture, 0); - _gl.pixelStorei(37440, dstTexture.flipY); - _gl.pixelStorei(37441, dstTexture.premultiplyAlpha); - _gl.pixelStorei(3317, dstTexture.unpackAlignment); - if (srcTexture.isDataTexture) { - _gl.texSubImage2D(3553, level, position2.x, position2.y, width2, height2, glFormat, glType, srcTexture.image.data); - } else { - if (srcTexture.isCompressedTexture) { - _gl.compressedTexSubImage2D(3553, level, position2.x, position2.y, srcTexture.mipmaps[0].width, srcTexture.mipmaps[0].height, glFormat, srcTexture.mipmaps[0].data); - } else { - _gl.texSubImage2D(3553, level, position2.x, position2.y, glFormat, glType, srcTexture.image); - } - } - if (level === 0 && dstTexture.generateMipmaps) - _gl.generateMipmap(3553); - state.unbindTexture(); - }; - this.copyTextureToTexture3D = function(sourceBox, position2, srcTexture, dstTexture, level = 0) { - if (_this.isWebGL1Renderer) { - console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2."); - return; - } - const width2 = sourceBox.max.x - sourceBox.min.x + 1; - const height2 = sourceBox.max.y - sourceBox.min.y + 1; - const depth = sourceBox.max.z - sourceBox.min.z + 1; - const glFormat = utils.convert(dstTexture.format); - const glType = utils.convert(dstTexture.type); - let glTarget; - if (dstTexture.isData3DTexture) { - textures.setTexture3D(dstTexture, 0); - glTarget = 32879; - } else if (dstTexture.isDataArrayTexture) { - textures.setTexture2DArray(dstTexture, 0); - glTarget = 35866; - } else { - console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: only supports THREE.DataTexture3D and THREE.DataTexture2DArray."); - return; - } - _gl.pixelStorei(37440, dstTexture.flipY); - _gl.pixelStorei(37441, dstTexture.premultiplyAlpha); - _gl.pixelStorei(3317, dstTexture.unpackAlignment); - const unpackRowLen = _gl.getParameter(3314); - const unpackImageHeight = _gl.getParameter(32878); - const unpackSkipPixels = _gl.getParameter(3316); - const unpackSkipRows = _gl.getParameter(3315); - const unpackSkipImages = _gl.getParameter(32877); - const image2 = srcTexture.isCompressedTexture ? srcTexture.mipmaps[0] : srcTexture.image; - _gl.pixelStorei(3314, image2.width); - _gl.pixelStorei(32878, image2.height); - _gl.pixelStorei(3316, sourceBox.min.x); - _gl.pixelStorei(3315, sourceBox.min.y); - _gl.pixelStorei(32877, sourceBox.min.z); - if (srcTexture.isDataTexture || srcTexture.isData3DTexture) { - _gl.texSubImage3D(glTarget, level, position2.x, position2.y, position2.z, width2, height2, depth, glFormat, glType, image2.data); - } else { - if (srcTexture.isCompressedTexture) { - console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: untested support for compressed srcTexture."); - _gl.compressedTexSubImage3D(glTarget, level, position2.x, position2.y, position2.z, width2, height2, depth, glFormat, image2.data); - } else { - _gl.texSubImage3D(glTarget, level, position2.x, position2.y, position2.z, width2, height2, depth, glFormat, glType, image2); - } - } - _gl.pixelStorei(3314, unpackRowLen); - _gl.pixelStorei(32878, unpackImageHeight); - _gl.pixelStorei(3316, unpackSkipPixels); - _gl.pixelStorei(3315, unpackSkipRows); - _gl.pixelStorei(32877, unpackSkipImages); - if (level === 0 && dstTexture.generateMipmaps) - _gl.generateMipmap(glTarget); - state.unbindTexture(); - }; - this.initTexture = function(texture2) { - textures.setTexture2D(texture2, 0); - state.unbindTexture(); - }; - this.resetState = function() { - _currentActiveCubeFace = 0; - _currentActiveMipmapLevel = 0; - _currentRenderTarget = null; - state.reset(); - bindingStates.reset(); - }; - if (typeof __THREE_DEVTOOLS__ !== "undefined") { - __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe", { detail: this })); - } -} -WebGLRenderer.prototype.isWebGLRenderer = true; -class WebGL1Renderer extends WebGLRenderer { + ] + } + ]; + }); } -WebGL1Renderer.prototype.isWebGL1Renderer = true; -class FogExp2 { - constructor(color2, density = 25e-5) { - this.name = ""; - this.color = new Color(color2); - this.density = density; +var textShadow$1 = [ + { name: "Mystic", shadow: `20px 0px 10px rgb(0, 0, 0)` }, + { name: "Monoton", shadow: `0px -78px rgb(255, 196, 0)` }, + { name: "Radioactive", shadow: `-18px -18px 20px rgb(87, 255, 9);` }, + { name: "Bungee", shadow: `-18px 18px 0 rgb(66, 45, 45)` }, + { name: "Sprint", shadow: `-20px -108px 0px rgba(255, 255, 255, 0.445)` }, + { name: "Prickly", shadow: `-18px -18px 2px #777` }, + { + name: "Codystar", + shadow: `1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)` + }, + { name: "Elegant", shadow: `-18px 8px 18px #b4bbbb` }, + { + name: "Playful", + shadow: ` + -2px -2px 0px #888, + 4px 4px 0px #888, + 7px 7px 0px #888 + ` } - clone() { - return new FogExp2(this.color, this.density); +]; +var TextShadowProperty$1 = ""; +class TextShadowProperty extends BaseProperty { + getTitle() { + return this.$i18n("text.shadow.property.title"); } - toJSON() { - return { - type: "FogExp2", - color: this.color.getHex(), - density: this.density - }; + getBody() { + return ` +
+ `; } -} -FogExp2.prototype.isFogExp2 = true; -class Fog { - constructor(color2, near = 1, far = 1e3) { - this.name = ""; - this.color = new Color(color2); - this.near = near; - this.far = far; + getTools() { + return ` + + + `; } - clone() { - return new Fog(this.color, this.near, this.far); + [CLICK("$add")]() { + const index2 = +this.refs.$select.value; + this.children.$textshadow.trigger("add", textShadow$1[index2].shadow); } - toJSON() { - return { - type: "Fog", - color: this.color.getHex(), - near: this.near, - far: this.far - }; + [LOAD("$shadowList")]() { + var current = this.$context.selection.current || {}; + return createComponent("TextShadowEditor", { + ref: "$textshadow", + key: "textShadow", + value: current.textShadow, + onchange: (key, value) => { + this.$commands.executeCommand("setAttribute", "change text shadow", this.$context.selection.packByValue({ + [key]: value + })); + } + }); } -} -Fog.prototype.isFog = true; -class Scene extends Object3D { - constructor() { - super(); - this.type = "Scene"; - this.background = null; - this.environment = null; - this.fog = null; - this.overrideMaterial = null; - this.autoUpdate = true; - if (typeof __THREE_DEVTOOLS__ !== "undefined") { - __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe", { detail: this })); - } - } - copy(source2, recursive) { - super.copy(source2, recursive); - if (source2.background !== null) - this.background = source2.background.clone(); - if (source2.environment !== null) - this.environment = source2.environment.clone(); - if (source2.fog !== null) - this.fog = source2.fog.clone(); - if (source2.overrideMaterial !== null) - this.overrideMaterial = source2.overrideMaterial.clone(); - this.autoUpdate = source2.autoUpdate; - this.matrixAutoUpdate = source2.matrixAutoUpdate; - return this; + get editableProperty() { + return "textShadow"; } - toJSON(meta) { - const data = super.toJSON(meta); - if (this.fog !== null) - data.object.fog = this.fog.toJSON(); - return data; + [SUBSCRIBE(REFRESH_SELECTION) + IF("checkShow") + DEBOUNCE(100)]() { + this.refresh(); } } -Scene.prototype.isScene = true; -class InterleavedBuffer { - constructor(array, stride) { - this.array = array; - this.stride = stride; - this.count = array !== void 0 ? array.length / stride : 0; - this.usage = StaticDrawUsage; - this.updateRange = { offset: 0, count: -1 }; - this.version = 0; - this.uuid = generateUUID(); - } - onUploadCallback() { - } - set needsUpdate(value) { - if (value === true) - this.version++; - } - setUsage(value) { - this.usage = value; - return this; - } - copy(source2) { - this.array = new source2.array.constructor(source2.array); - this.count = source2.count; - this.stride = source2.stride; - this.usage = source2.usage; - return this; - } - copyAt(index1, attribute, index2) { - index1 *= this.stride; - index2 *= attribute.stride; - for (let i = 0, l = this.stride; i < l; i++) { - this.array[index1 + i] = attribute.array[index2 + i]; - } - return this; - } - set(value, offset = 0) { - this.array.set(value, offset); - return this; - } - clone(data) { - if (data.arrayBuffers === void 0) { - data.arrayBuffers = {}; - } - if (this.array.buffer._uuid === void 0) { - this.array.buffer._uuid = generateUUID(); - } - if (data.arrayBuffers[this.array.buffer._uuid] === void 0) { - data.arrayBuffers[this.array.buffer._uuid] = this.array.slice(0).buffer; - } - const array = new this.array.constructor(data.arrayBuffers[this.array.buffer._uuid]); - const ib = new this.constructor(array, this.stride); - ib.setUsage(this.usage); - return ib; +function textShadow(editor) { + editor.registerUI("inspector.tab.style", { + TextShadowProperty + }); +} +var TransitionProperty$1 = ""; +const TRANSITION_TIMING_REG = /((cubic-bezier|steps)\(([^)]*)\))/gi; +class Transition extends PropertyItem { + static parse(obj2) { + return new Transition(obj2); } - onUpload(callback) { - this.onUploadCallback = callback; - return this; + getDefaultObject() { + return { + name: "all", + duration: Length.second(0), + timingFunction: "linear", + delay: Length.second(0) + }; } - toJSON(data) { - if (data.arrayBuffers === void 0) { - data.arrayBuffers = {}; - } - if (this.array.buffer._uuid === void 0) { - this.array.buffer._uuid = generateUUID(); - } - if (data.arrayBuffers[this.array.buffer._uuid] === void 0) { - data.arrayBuffers[this.array.buffer._uuid] = Array.prototype.slice.call(new Uint32Array(this.array.buffer)); - } + toCloneObject() { return { - uuid: this.uuid, - buffer: this.array.buffer._uuid, - type: this.array.constructor.name, - stride: this.stride + name: this.json.name, + duration: this.json.duration + "", + timingFunction: this.json.timingFunction, + delay: this.json.delay + "" }; } -} -InterleavedBuffer.prototype.isInterleavedBuffer = true; -const _vector$6 = /* @__PURE__ */ new Vector3(); -class InterleavedBufferAttribute { - constructor(interleavedBuffer, itemSize, offset, normalized = false) { - this.name = ""; - this.data = interleavedBuffer; - this.itemSize = itemSize; - this.offset = offset; - this.normalized = normalized === true; + toCSS() { + return { + transition: this.toString() + }; } - get count() { - return this.data.count; + toString() { + var json = this.json; + return [json.name, json.duration, json.timingFunction, json.delay].join(" "); } - get array() { - return this.data.array; + static join(list2) { + return list2.map((it) => new Transition(it).toString()).join(","); } - set needsUpdate(value) { - this.data.needsUpdate = value; + static add(transition2, item = {}) { + const list2 = Transition.parseStyle(transition2); + list2.push(Transition.parse(item)); + return Transition.join(list2); } - applyMatrix4(m) { - for (let i = 0, l = this.data.count; i < l; i++) { - _vector$6.fromBufferAttribute(this, i); - _vector$6.applyMatrix4(m); - this.setXYZ(i, _vector$6.x, _vector$6.y, _vector$6.z); - } - return this; + static remove(transition2, removeIndex) { + return Transition.filter(transition2, (it, index2) => { + return removeIndex != index2; + }); } - applyNormalMatrix(m) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$6.fromBufferAttribute(this, i); - _vector$6.applyNormalMatrix(m); - this.setXYZ(i, _vector$6.x, _vector$6.y, _vector$6.z); - } - return this; + static filter(transition2, filterFunction) { + return Transition.join(Transition.parseStyle(transition2).filter((it) => filterFunction(it))); } - transformDirection(m) { - for (let i = 0, l = this.count; i < l; i++) { - _vector$6.fromBufferAttribute(this, i); - _vector$6.transformDirection(m); - this.setXYZ(i, _vector$6.x, _vector$6.y, _vector$6.z); + static replace(transition2, replaceIndex, valueObject) { + var list2 = Transition.parseStyle(transition2); + if (list2[replaceIndex]) { + list2[replaceIndex] = valueObject; + } else { + list2.push(valueObject); } - return this; - } - setX(index2, x) { - this.data.array[index2 * this.data.stride + this.offset] = x; - return this; - } - setY(index2, y) { - this.data.array[index2 * this.data.stride + this.offset + 1] = y; - return this; - } - setZ(index2, z) { - this.data.array[index2 * this.data.stride + this.offset + 2] = z; - return this; + return Transition.join(list2); } - setW(index2, w) { - this.data.array[index2 * this.data.stride + this.offset + 3] = w; - return this; + static get(transition2, index2) { + var arr = Transition.parseStyle(transition2); + return arr[index2]; } - getX(index2) { - return this.data.array[index2 * this.data.stride + this.offset]; + static parseStyle(transition2) { + var list2 = []; + if (!transition2) + return list2; + const result = customParseConvertMatches(transition2, TRANSITION_TIMING_REG); + list2 = result.str.split(",").map((it) => { + const fields2 = it.split(" ").filter(Boolean); + if (fields2.length >= 4) { + return { + name: fields2[0], + duration: Length.parse(fields2[1]), + timingFunction: customParseReverseMatches(fields2[2], result.matches), + delay: Length.parse(fields2[3]) + }; + } else if (fields2.length >= 3) { + return { + name: fields2[0], + duration: Length.parse(fields2[1]), + delay: Length.parse(fields2[2]) + }; + } else if (fields2.length >= 1) { + return { + name: fields2[0], + duration: Length.parse(fields2[1]) + }; + } else { + return {}; + } + }); + return list2.map((it) => Transition.parse(it)); } - getY(index2) { - return this.data.array[index2 * this.data.stride + this.offset + 1]; +} +class TransitionProperty extends BaseProperty { + getTitle() { + return this.$i18n("transition.property.title"); } - getZ(index2) { - return this.data.array[index2 * this.data.stride + this.offset + 2]; + getBody() { + return `
`; } - getW(index2) { - return this.data.array[index2 * this.data.stride + this.offset + 3]; + getTools() { + return ` + + `; } - setXY(index2, x, y) { - index2 = index2 * this.data.stride + this.offset; - this.data.array[index2 + 0] = x; - this.data.array[index2 + 1] = y; - return this; + isFirstShow() { + return true; } - setXYZ(index2, x, y, z) { - index2 = index2 * this.data.stride + this.offset; - this.data.array[index2 + 0] = x; - this.data.array[index2 + 1] = y; - this.data.array[index2 + 2] = z; - return this; + [LOAD("$transitionList") + DOMDIFF]() { + var current = this.$context.selection.current; + if (!current) + return ""; + return Transition.parseStyle(current.transition).map((it, index2) => { + const selectedClass = this.state.selectedIndex === index2 ? "selected" : ""; + const path = curveToPath(it.timingFunction, 30, 30); + return ` +
+
+
+ + + +
+
+
+ ${it.name} + Duration: ${it.duration} + Delay: ${it.delay} +
+
+
+ +
+
+
+ `; + }); } - setXYZW(index2, x, y, z, w) { - index2 = index2 * this.data.stride + this.offset; - this.data.array[index2 + 0] = x; - this.data.array[index2 + 1] = y; - this.data.array[index2 + 2] = z; - this.data.array[index2 + 3] = w; - return this; + [SUBSCRIBE(REFRESH_SELECTION)]() { + this.refreshShowIsNot([]); } - clone(data) { - if (data === void 0) { - console.log("THREE.InterleavedBufferAttribute.clone(): Cloning an interlaved buffer attribute will deinterleave buffer data."); - const array = []; - for (let i = 0; i < this.count; i++) { - const index2 = i * this.data.stride + this.offset; - for (let j = 0; j < this.itemSize; j++) { - array.push(this.data.array[index2 + j]); - } - } - return new BufferAttribute(new this.array.constructor(array), this.itemSize, this.normalized); + [CLICK("$add")]() { + var current = this.$context.selection.current; + if (current) { + this.$commands.executeCommand("setAttribute", "add transition", this.$context.selection.packByValue({ + transition: (item) => Transition.add(item.transition) + })); + this.nextTick(() => { + window.setTimeout(() => { + this.refresh(); + }, 100); + }); } else { - if (data.interleavedBuffers === void 0) { - data.interleavedBuffers = {}; - } - if (data.interleavedBuffers[this.data.uuid] === void 0) { - data.interleavedBuffers[this.data.uuid] = this.data.clone(data); - } - return new InterleavedBufferAttribute(data.interleavedBuffers[this.data.uuid], this.itemSize, this.offset, this.normalized); + window.alert("Select a layer"); } } - toJSON(data) { - if (data === void 0) { - console.log("THREE.InterleavedBufferAttribute.toJSON(): Serializing an interlaved buffer attribute will deinterleave buffer data."); - const array = []; - for (let i = 0; i < this.count; i++) { - const index2 = i * this.data.stride + this.offset; - for (let j = 0; j < this.itemSize; j++) { - array.push(this.data.array[index2 + j]); - } - } - return { - itemSize: this.itemSize, - type: this.array.constructor.name, - array, - normalized: this.normalized - }; + getCurrentTransition() { + return this.current.transitions[this.selectedIndex]; + } + [CLICK("$transitionList .tools .del")](e) { + var removeIndex = e.$dt.attr("data-index"); + var current = this.$context.selection.current; + if (!current) + return; + current.reset({ + transition: Transition.remove(current.transition, removeIndex) + }); + this.emit("refreshElement", current); + this.refresh(); + } + selectItem(selectedIndex, isSelected = true) { + if (isSelected) { + this.refs[`transitionIndex${selectedIndex}`].addClass("selected"); } else { - if (data.interleavedBuffers === void 0) { - data.interleavedBuffers = {}; - } - if (data.interleavedBuffers[this.data.uuid] === void 0) { - data.interleavedBuffers[this.data.uuid] = this.data.toJSON(data); - } - return { - isInterleavedBufferAttribute: true, - itemSize: this.itemSize, - data: this.data.uuid, - offset: this.offset, - normalized: this.normalized - }; + this.refs[`transitionIndex${selectedIndex}`].removeClass("selected"); } } -} -InterleavedBufferAttribute.prototype.isInterleavedBufferAttribute = true; -class SpriteMaterial extends Material { - constructor(parameters) { - super(); - this.type = "SpriteMaterial"; - this.color = new Color(16777215); - this.map = null; - this.alphaMap = null; - this.rotation = 0; - this.sizeAttenuation = true; - this.transparent = true; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.map = source2.map; - this.alphaMap = source2.alphaMap; - this.rotation = source2.rotation; - this.sizeAttenuation = source2.sizeAttenuation; - return this; - } -} -SpriteMaterial.prototype.isSpriteMaterial = true; -let _geometry; -const _intersectPoint = /* @__PURE__ */ new Vector3(); -const _worldScale = /* @__PURE__ */ new Vector3(); -const _mvPosition = /* @__PURE__ */ new Vector3(); -const _alignedPosition = /* @__PURE__ */ new Vector2(); -const _rotatedPosition = /* @__PURE__ */ new Vector2(); -const _viewWorldMatrix = /* @__PURE__ */ new Matrix4(); -const _vA = /* @__PURE__ */ new Vector3(); -const _vB = /* @__PURE__ */ new Vector3(); -const _vC = /* @__PURE__ */ new Vector3(); -const _uvA = /* @__PURE__ */ new Vector2(); -const _uvB = /* @__PURE__ */ new Vector2(); -const _uvC = /* @__PURE__ */ new Vector2(); -class Sprite extends Object3D { - constructor(material) { - super(); - this.type = "Sprite"; - if (_geometry === void 0) { - _geometry = new BufferGeometry(); - const float32Array = new Float32Array([ - -0.5, - -0.5, - 0, - 0, - 0, - 0.5, - -0.5, - 0, - 1, - 0, - 0.5, - 0.5, - 0, - 1, - 1, - -0.5, - 0.5, - 0, - 0, - 1 - ]); - const interleavedBuffer = new InterleavedBuffer(float32Array, 5); - _geometry.setIndex([0, 1, 2, 0, 2, 3]); - _geometry.setAttribute("position", new InterleavedBufferAttribute(interleavedBuffer, 3, 0, false)); - _geometry.setAttribute("uv", new InterleavedBufferAttribute(interleavedBuffer, 2, 3, false)); - } - this.geometry = _geometry; - this.material = material !== void 0 ? material : new SpriteMaterial(); - this.center = new Vector2(0.5, 0.5); - } - raycast(raycaster, intersects2) { - if (raycaster.camera === null) { - console.error('THREE.Sprite: "Raycaster.camera" needs to be set in order to raycast against sprites.'); - } - _worldScale.setFromMatrixScale(this.matrixWorld); - _viewWorldMatrix.copy(raycaster.camera.matrixWorld); - this.modelViewMatrix.multiplyMatrices(raycaster.camera.matrixWorldInverse, this.matrixWorld); - _mvPosition.setFromMatrixPosition(this.modelViewMatrix); - if (raycaster.camera.isPerspectiveCamera && this.material.sizeAttenuation === false) { - _worldScale.multiplyScalar(-_mvPosition.z); - } - const rotation = this.material.rotation; - let sin, cos; - if (rotation !== 0) { - cos = Math.cos(rotation); - sin = Math.sin(rotation); - } - const center2 = this.center; - transformVertex(_vA.set(-0.5, -0.5, 0), _mvPosition, center2, _worldScale, sin, cos); - transformVertex(_vB.set(0.5, -0.5, 0), _mvPosition, center2, _worldScale, sin, cos); - transformVertex(_vC.set(0.5, 0.5, 0), _mvPosition, center2, _worldScale, sin, cos); - _uvA.set(0, 0); - _uvB.set(1, 0); - _uvC.set(1, 1); - let intersect = raycaster.ray.intersectTriangle(_vA, _vB, _vC, false, _intersectPoint); - if (intersect === null) { - transformVertex(_vB.set(-0.5, 0.5, 0), _mvPosition, center2, _worldScale, sin, cos); - _uvB.set(0, 1); - intersect = raycaster.ray.intersectTriangle(_vA, _vC, _vB, false, _intersectPoint); - if (intersect === null) { - return; - } + viewTransitionPicker($preview) { + if (typeof this.selectedIndex === "number") { + this.selectItem(this.selectedIndex, false); } - const distance2 = raycaster.ray.origin.distanceTo(_intersectPoint); - if (distance2 < raycaster.near || distance2 > raycaster.far) + this.selectedIndex = +$preview.attr("data-index"); + this.current = this.$context.selection.current; + if (!this.current) return; - intersects2.push({ - distance: distance2, - point: _intersectPoint.clone(), - uv: Triangle.getUV(_intersectPoint, _vA, _vB, _vC, _uvA, _uvB, _uvC, new Vector2()), - face: null, - object: this - }); - } - copy(source2) { - super.copy(source2); - if (source2.center !== void 0) - this.center.copy(source2.center); - this.material = source2.material; - return this; - } -} -Sprite.prototype.isSprite = true; -function transformVertex(vertexPosition, mvPosition, center2, scale2, sin, cos) { - _alignedPosition.subVectors(vertexPosition, center2).addScalar(0.5).multiply(scale2); - if (sin !== void 0) { - _rotatedPosition.x = cos * _alignedPosition.x - sin * _alignedPosition.y; - _rotatedPosition.y = sin * _alignedPosition.x + cos * _alignedPosition.y; - } else { - _rotatedPosition.copy(_alignedPosition); + this.currentTransition = Transition.get(this.current.transition, this.selectedIndex); + this.viewTransitionPropertyPopup(); } - vertexPosition.copy(mvPosition); - vertexPosition.x += _rotatedPosition.x; - vertexPosition.y += _rotatedPosition.y; - vertexPosition.applyMatrix4(_viewWorldMatrix); -} -const _v1$2 = /* @__PURE__ */ new Vector3(); -const _v2$1 = /* @__PURE__ */ new Vector3(); -class LOD extends Object3D { - constructor() { - super(); - this._currentLevel = 0; - this.type = "LOD"; - Object.defineProperties(this, { - levels: { - enumerable: true, - value: [] - }, - isLOD: { - value: true - } + viewTransitionPropertyPopup() { + if (!this.currentTransition) + return; + const transition2 = this.currentTransition; + this.emit("showTransitionPropertyPopup", { + changeEvent: "changeTransitionPropertyPopup", + data: transition2.toCloneObject(), + instance: this }); - this.autoUpdate = true; } - copy(source2) { - super.copy(source2, false); - const levels = source2.levels; - for (let i = 0, l = levels.length; i < l; i++) { - const level = levels[i]; - this.addLevel(level.object.clone(), level.distance); - } - this.autoUpdate = source2.autoUpdate; - return this; + [CLICK("$transitionList .preview")](e) { + this.viewTransitionPicker(e.$dt); } - addLevel(object, distance2 = 0) { - distance2 = Math.abs(distance2); - const levels = this.levels; - let l; - for (l = 0; l < levels.length; l++) { - if (distance2 < levels[l].distance) { - break; + getRef(...args2) { + return this.refs[args2.join("")]; + } + [SUBSCRIBE("changeTransitionPropertyPopup")](data) { + if (this.currentTransition) { + this.currentTransition.reset(__spreadValues({}, data)); + if (this.current) { + this.current.reset({ + transition: Transition.replace(this.current.transition, this.selectedIndex, this.currentTransition) + }); + this.emit("refreshElement", this.current); + this.refresh(); } } - levels.splice(l, 0, { distance: distance2, object }); - this.add(object); - return this; } - getCurrentLevel() { - return this._currentLevel; +} +var TransitionPropertyPopup$1 = ""; +const property_list = [ + "none", + "all", + "background-color", + "background-position", + "background-size", + "border", + "border-color", + "border-width", + "border-bottom", + "border-bottom-color", + "border-bottom-left-radius", + "border-bottom-right-radius", + "border-bottom-width", + "border-left", + "border-left-color", + "border-left-width", + "border-radius", + "border-right", + "border-right-color", + "border-right-width", + "border-spacing", + "border-top", + "border-top-color", + "border-top-left-radius", + "border-top-right-radius", + "border-top-width", + "bottom", + "box-shadow", + "color", + "filter", + "font-size", + "font-size-adjust", + "font-weight", + "height", + "left", + "letter-spacing", + "line-height", + "margin", + "margin-bottom", + "margin-left", + "margin-right", + "margin-top", + "max-height", + "max-width", + "min-height", + "min-width", + "opacity", + "padding", + "padding-bottom", + "padding-left", + "padding-right", + "padding-top", + "perspective", + "perspective-origin", + "right", + "text-decoration", + "text-decoration-color", + "text-indent", + "text-shadow", + "top", + "transform", + "vertical-align", + "visibility", + "width", + "word-spacing", + "z-index" +].map((it) => ({ + value: it, + text: it +})); +class TransitionPropertyPopup extends BasePopup { + getTitle() { + return "Transition"; } - getObjectForDistance(distance2) { - const levels = this.levels; - if (levels.length > 0) { - let i, l; - for (i = 1, l = levels.length; i < l; i++) { - if (distance2 < levels[i].distance) { - break; - } + initState() { + return { + changeEvent: "", + instance: {}, + data: { + timingFunction: "linear", + duration: "0s", + delay: "0s", + name: "all" } - return levels[i - 1].object; - } - return null; + }; } - raycast(raycaster, intersects2) { - const levels = this.levels; - if (levels.length > 0) { - _v1$2.setFromMatrixPosition(this.matrixWorld); - const distance2 = raycaster.ray.origin.distanceTo(_v1$2); - this.getObjectForDistance(distance2).raycast(raycaster, intersects2); - } - } - update(camera) { - const levels = this.levels; - if (levels.length > 1) { - _v1$2.setFromMatrixPosition(camera.matrixWorld); - _v2$1.setFromMatrixPosition(this.matrixWorld); - const distance2 = _v1$2.distanceTo(_v2$1) / camera.zoom; - levels[0].object.visible = true; - let i, l; - for (i = 1, l = levels.length; i < l; i++) { - if (distance2 >= levels[i].distance) { - levels[i - 1].object.visible = false; - levels[i].object.visible = true; - } else { - break; - } - } - this._currentLevel = i - 1; - for (; i < l; i++) { - levels[i].object.visible = false; - } + updateData(opt) { + this.state.data = __spreadValues(__spreadValues({}, this.state.data), opt); + if (this.state.instance) { + this.state.instance.trigger(this.state.changeEvent, this.state.data); } } - toJSON(meta) { - const data = super.toJSON(meta); - if (this.autoUpdate === false) - data.object.autoUpdate = false; - data.object.levels = []; - const levels = this.levels; - for (let i = 0, l = levels.length; i < l; i++) { - const level = levels[i]; - data.object.levels.push({ - object: level.object.uuid, - distance: level.distance - }); - } - return data; + getBody() { + return `
`; } -} -const _basePosition = /* @__PURE__ */ new Vector3(); -const _skinIndex = /* @__PURE__ */ new Vector4(); -const _skinWeight = /* @__PURE__ */ new Vector4(); -const _vector$5 = /* @__PURE__ */ new Vector3(); -const _matrix = /* @__PURE__ */ new Matrix4(); -class SkinnedMesh extends Mesh { - constructor(geometry, material) { - super(geometry, material); - this.type = "SkinnedMesh"; - this.bindMode = "attached"; - this.bindMatrix = new Matrix4(); - this.bindMatrixInverse = new Matrix4(); - } - copy(source2) { - super.copy(source2); - this.bindMode = source2.bindMode; - this.bindMatrix.copy(source2.bindMatrix); - this.bindMatrixInverse.copy(source2.bindMatrixInverse); - this.skeleton = source2.skeleton; - return this; + [LOAD("$popup")]() { + return ` +
+ ${this.templateForProperty()} + ${this.templateForTimingFunction()} + ${this.templateForDelay()} + ${this.templateForDuration()} +
+ `; } - bind(skeleton, bindMatrix) { - this.skeleton = skeleton; - if (bindMatrix === void 0) { - this.updateMatrixWorld(true); - this.skeleton.calculateInverses(); - bindMatrix = this.matrixWorld; - } - this.bindMatrix.copy(bindMatrix); - this.bindMatrixInverse.copy(bindMatrix).invert(); - } - pose() { - this.skeleton.pose(); - } - normalizeSkinWeights() { - const vector = new Vector4(); - const skinWeight = this.geometry.attributes.skinWeight; - for (let i = 0, l = skinWeight.count; i < l; i++) { - vector.fromBufferAttribute(skinWeight, i); - const scale2 = 1 / vector.manhattanLength(); - if (scale2 !== Infinity) { - vector.multiplyScalar(scale2); - } else { - vector.set(1, 0, 0, 0); - } - skinWeight.setXYZW(i, vector.x, vector.y, vector.z, vector.w); - } + templateForTimingFunction() { + return ` +
+ + ${createComponent("CubicBezierEditor", { + ref: "$cubicBezierEditor", + key: "timingFunction", + value: this.state.data.timingFunction || "linear", + onChange: "changeCubicBezier" + })} +
+ `; } - updateMatrixWorld(force) { - super.updateMatrixWorld(force); - if (this.bindMode === "attached") { - this.bindMatrixInverse.copy(this.matrixWorld).invert(); - } else if (this.bindMode === "detached") { - this.bindMatrixInverse.copy(this.bindMatrix).invert(); - } else { - console.warn("THREE.SkinnedMesh: Unrecognized bindMode: " + this.bindMode); - } + [SUBSCRIBE_SELF("changeTransition")](key, value) { + this.updateData({ + [key]: value + }); } - boneTransform(index2, target) { - const skeleton = this.skeleton; - const geometry = this.geometry; - _skinIndex.fromBufferAttribute(geometry.attributes.skinIndex, index2); - _skinWeight.fromBufferAttribute(geometry.attributes.skinWeight, index2); - _basePosition.copy(target).applyMatrix4(this.bindMatrix); - target.set(0, 0, 0); - for (let i = 0; i < 4; i++) { - const weight = _skinWeight.getComponent(i); - if (weight !== 0) { - const boneIndex = _skinIndex.getComponent(i); - _matrix.multiplyMatrices(skeleton.bones[boneIndex].matrixWorld, skeleton.boneInverses[boneIndex]); - target.addScaledVector(_vector$5.copy(_basePosition).applyMatrix4(_matrix), weight); - } - } - return target.applyMatrix4(this.bindMatrixInverse); + templateForProperty() { + return ` +
+ ${createComponent("SelectEditor", { + ref: "$property", + icon: true, + label: "Property", + key: "name", + value: this.state.data.name, + options: property_list, + onChange: "changeTransition" + })} +
+ `; } -} -SkinnedMesh.prototype.isSkinnedMesh = true; -class Bone extends Object3D { - constructor() { - super(); - this.type = "Bone"; - } -} -Bone.prototype.isBone = true; -class DataTexture extends Texture { - constructor(data = null, width2 = 1, height2 = 1, format2, type, mapping, wrapS, wrapT, magFilter = NearestFilter, minFilter = NearestFilter, anisotropy, encoding) { - super(null, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy, encoding); - this.image = { data, width: width2, height: height2 }; - this.generateMipmaps = false; - this.flipY = false; - this.unpackAlignment = 1; - } -} -DataTexture.prototype.isDataTexture = true; -const _offsetMatrix = /* @__PURE__ */ new Matrix4(); -const _identityMatrix = /* @__PURE__ */ new Matrix4(); -class Skeleton { - constructor(bones = [], boneInverses = []) { - this.uuid = generateUUID(); - this.bones = bones.slice(0); - this.boneInverses = boneInverses; - this.boneMatrices = null; - this.boneTexture = null; - this.boneTextureSize = 0; - this.frame = -1; - this.init(); - } - init() { - const bones = this.bones; - const boneInverses = this.boneInverses; - this.boneMatrices = new Float32Array(bones.length * 16); - if (boneInverses.length === 0) { - this.calculateInverses(); - } else { - if (bones.length !== boneInverses.length) { - console.warn("THREE.Skeleton: Number of inverse bone matrices does not match amount of bones."); - this.boneInverses = []; - for (let i = 0, il = this.bones.length; i < il; i++) { - this.boneInverses.push(new Matrix4()); - } - } - } + templateForDelay() { + return ` +
+ ${createComponent("RangeEditor", { + ref: "$delay", + label: "Delay", + key: "delay", + value: this.state.data.delay, + units: ["s", "ms"], + onChange: "changeRangeEditor" + })} +
+ `; } - calculateInverses() { - this.boneInverses.length = 0; - for (let i = 0, il = this.bones.length; i < il; i++) { - const inverse = new Matrix4(); - if (this.bones[i]) { - inverse.copy(this.bones[i].matrixWorld).invert(); - } - this.boneInverses.push(inverse); - } + templateForDuration() { + return ` +
+ ${createComponent("RangeEditor", { + ref: "$duration", + label: "Duration", + key: "duration", + value: this.state.data.duration, + units: ["s", "ms"], + onChange: "changeRangeEditor" + })} +
+ `; } - pose() { - for (let i = 0, il = this.bones.length; i < il; i++) { - const bone = this.bones[i]; - if (bone) { - bone.matrixWorld.copy(this.boneInverses[i]).invert(); - } - } - for (let i = 0, il = this.bones.length; i < il; i++) { - const bone = this.bones[i]; - if (bone) { - if (bone.parent && bone.parent.isBone) { - bone.matrix.copy(bone.parent.matrixWorld).invert(); - bone.matrix.multiply(bone.matrixWorld); - } else { - bone.matrix.copy(bone.matrixWorld); - } - bone.matrix.decompose(bone.position, bone.quaternion, bone.scale); - } - } + [SUBSCRIBE_SELF("changeRangeEditor")](key, value) { + this.updateData({ [key]: value }); } - update() { - const bones = this.bones; - const boneInverses = this.boneInverses; - const boneMatrices = this.boneMatrices; - const boneTexture = this.boneTexture; - for (let i = 0, il = bones.length; i < il; i++) { - const matrix = bones[i] ? bones[i].matrixWorld : _identityMatrix; - _offsetMatrix.multiplyMatrices(matrix, boneInverses[i]); - _offsetMatrix.toArray(boneMatrices, i * 16); - } - if (boneTexture !== null) { - boneTexture.needsUpdate = true; - } + [SUBSCRIBE_SELF("changeCubicBezier")](key, value) { + this.updateData({ [key]: value }); } - clone() { - return new Skeleton(this.bones, this.boneInverses); - } - computeBoneTexture() { - let size2 = Math.sqrt(this.bones.length * 4); - size2 = ceilPowerOfTwo(size2); - size2 = Math.max(size2, 4); - const boneMatrices = new Float32Array(size2 * size2 * 4); - boneMatrices.set(this.boneMatrices); - const boneTexture = new DataTexture(boneMatrices, size2, size2, RGBAFormat, FloatType); - boneTexture.needsUpdate = true; - this.boneMatrices = boneMatrices; - this.boneTexture = boneTexture; - this.boneTextureSize = size2; - return this; + [SUBSCRIBE("showTransitionPropertyPopup")](data) { + this.setState(data); + this.show(250); + this.children.$cubicBezierEditor.trigger("showCubicBezierEditor", data.data.timingFunction); } - getBoneByName(name) { - for (let i = 0, il = this.bones.length; i < il; i++) { - const bone = this.bones[i]; - if (bone.name === name) { - return bone; - } - } - return void 0; + [SUBSCRIBE("hideTransitionPropertyPopup")]() { + this.$el.hide(); } - dispose() { - if (this.boneTexture !== null) { - this.boneTexture.dispose(); - this.boneTexture = null; - } +} +function transition(editor) { + editor.registerUI("inspector.tab.transition", { + TransitionProperty + }); + editor.registerUI("popup", { + TransitionPropertyPopup + }); +} +var VideoProperty$1 = ""; +class VideoProperty extends BaseProperty { + getClassName() { + return "item elf--video-property"; } - fromJSON(json, bones) { - this.uuid = json.uuid; - for (let i = 0, l = json.bones.length; i < l; i++) { - const uuid2 = json.bones[i]; - let bone = bones[uuid2]; - if (bone === void 0) { - console.warn("THREE.Skeleton: No bone found with UUID:", uuid2); - bone = new Bone(); - } - this.bones.push(bone); - this.boneInverses.push(new Matrix4().fromArray(json.boneInverses[i])); - } - this.init(); - return this; + getTitle() { + return this.$i18n("video.property.title"); } - toJSON() { - const data = { - metadata: { - version: 4.5, - type: "Skeleton", - generator: "Skeleton.toJSON" - }, - bones: [], - boneInverses: [] + initState() { + return { + $video: { el: {} }, + status: "play", + volume: 1 }; - data.uuid = this.uuid; - const bones = this.bones; - const boneInverses = this.boneInverses; - for (let i = 0, l = bones.length; i < l; i++) { - const bone = bones[i]; - data.bones.push(bone.uuid); - const boneInverse = boneInverses[i]; - data.boneInverses.push(boneInverse.toArray()); - } - return data; - } -} -class InstancedBufferAttribute extends BufferAttribute { - constructor(array, itemSize, normalized, meshPerAttribute = 1) { - if (typeof normalized === "number") { - meshPerAttribute = normalized; - normalized = false; - console.error("THREE.InstancedBufferAttribute: The constructor now expects normalized as the third argument."); - } - super(array, itemSize, normalized); - this.meshPerAttribute = meshPerAttribute; } - copy(source2) { - super.copy(source2); - this.meshPerAttribute = source2.meshPerAttribute; - return this; + getBody() { + return `
`; } - toJSON() { - const data = super.toJSON(); - data.meshPerAttribute = this.meshPerAttribute; - data.isInstancedBufferAttribute = true; - return data; + get video() { + return this.state.$video.el; } -} -InstancedBufferAttribute.prototype.isInstancedBufferAttribute = true; -const _instanceLocalMatrix = /* @__PURE__ */ new Matrix4(); -const _instanceWorldMatrix = /* @__PURE__ */ new Matrix4(); -const _instanceIntersects = []; -const _mesh = /* @__PURE__ */ new Mesh(); -class InstancedMesh extends Mesh { - constructor(geometry, material, count) { - super(geometry, material); - this.instanceMatrix = new InstancedBufferAttribute(new Float32Array(count * 16), 16); - this.instanceColor = null; - this.count = count; - this.frustumCulled = false; - } - copy(source2) { - super.copy(source2); - this.instanceMatrix.copy(source2.instanceMatrix); - if (source2.instanceColor !== null) - this.instanceColor = source2.instanceColor.clone(); - this.count = source2.count; - return this; + get volumeStatus() { + if (this.state.volume === 0) + return "muted"; + if (this.state.volume > 0.5) + return "up"; + return "down"; } - getColorAt(index2, color2) { - color2.fromArray(this.instanceColor.array, index2 * 3); + play() { + if (this.video) + this.video.play(); } - getMatrixAt(index2, matrix) { - matrix.fromArray(this.instanceMatrix.array, index2 * 16); + pause() { + if (this.video) + this.video.pause(); } - raycast(raycaster, intersects2) { - const matrixWorld = this.matrixWorld; - const raycastTimes = this.count; - _mesh.geometry = this.geometry; - _mesh.material = this.material; - if (_mesh.material === void 0) - return; - for (let instanceId = 0; instanceId < raycastTimes; instanceId++) { - this.getMatrixAt(instanceId, _instanceLocalMatrix); - _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); - _mesh.matrixWorld = _instanceWorldMatrix; - _mesh.raycast(raycaster, _instanceIntersects); - for (let i = 0, l = _instanceIntersects.length; i < l; i++) { - const intersect = _instanceIntersects[i]; - intersect.instanceId = instanceId; - intersect.object = this; - intersects2.push(intersect); - } - _instanceIntersects.length = 0; - } - } - setColorAt(index2, color2) { - if (this.instanceColor === null) { - this.instanceColor = new InstancedBufferAttribute(new Float32Array(this.instanceMatrix.count * 3), 3); - } - color2.toArray(this.instanceColor.array, index2 * 3); - } - setMatrixAt(index2, matrix) { - matrix.toArray(this.instanceMatrix.array, index2 * 16); - } - updateMorphTargets() { - } - dispose() { - this.dispatchEvent({ type: "dispose" }); - } -} -InstancedMesh.prototype.isInstancedMesh = true; -class LineBasicMaterial extends Material { - constructor(parameters) { - super(); - this.type = "LineBasicMaterial"; - this.color = new Color(16777215); - this.linewidth = 1; - this.linecap = "round"; - this.linejoin = "round"; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.linewidth = source2.linewidth; - this.linecap = source2.linecap; - this.linejoin = source2.linejoin; - return this; + [LOAD("$body")]() { + var current = this.$context.selection.current || { playTime: "0:1:1" }; + var currentTime = current.currentTime || 0; + var duration = (current.playTime || "0:1:1").split(":").pop(); + return ` +
+ + +
+ ${createComponent("NumberRangeEditor", { + ref: "$currentTime", + min: 0, + max: duration, + value: currentTime, + step: 1e-3, + onchange: "changeCurrentTime" + })} +
+
+
+
+ + ${this.$i18n("video.property.volume")} +
+
+ ${obj$2.volume_off} + ${obj$2.volume_down} + ${obj$2.volume_up} + +
+
+
+
+ + ${this.$i18n("video.property.playbackRate")} +
+
+ ${createComponent("NumberRangeEditor", { + ref: "$playbackRate", + min: 0.1, + max: 10, + clamp: true, + value: this.state.playbackRate, + step: 1e-3, + onchange: "changePlaybackRate" + })} +
+
+
+
+ + ${this.$i18n("video.property.playTime")} +
+ ${createComponent("MediaProgressEditor", { + ref: "$progress", + key: "playTime", + value: current.playTime, + onchange: "changeSelect" + })} +
+ `; } -} -LineBasicMaterial.prototype.isLineBasicMaterial = true; -const _start$1 = /* @__PURE__ */ new Vector3(); -const _end$1 = /* @__PURE__ */ new Vector3(); -const _inverseMatrix$1 = /* @__PURE__ */ new Matrix4(); -const _ray$1 = /* @__PURE__ */ new Ray(); -const _sphere$1 = /* @__PURE__ */ new Sphere(); -class Line extends Object3D { - constructor(geometry = new BufferGeometry(), material = new LineBasicMaterial()) { - super(); - this.type = "Line"; - this.geometry = geometry; - this.material = material; - this.updateMorphTargets(); - } - copy(source2) { - super.copy(source2); - this.material = source2.material; - this.geometry = source2.geometry; - return this; + [SUBSCRIBE("changeCurrentTime")](key, currentTime) { + this.setState({ currentTime }, false); + this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ currentTime })); } - computeLineDistances() { - const geometry = this.geometry; - if (geometry.isBufferGeometry) { - if (geometry.index === null) { - const positionAttribute = geometry.attributes.position; - const lineDistances = [0]; - for (let i = 1, l = positionAttribute.count; i < l; i++) { - _start$1.fromBufferAttribute(positionAttribute, i - 1); - _end$1.fromBufferAttribute(positionAttribute, i); - lineDistances[i] = lineDistances[i - 1]; - lineDistances[i] += _start$1.distanceTo(_end$1); - } - geometry.setAttribute("lineDistance", new Float32BufferAttribute(lineDistances, 1)); - } else { - console.warn("THREE.Line.computeLineDistances(): Computation only possible with non-indexed BufferGeometry."); - } - } else if (geometry.isGeometry) { - console.error("THREE.Line.computeLineDistances() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); - } - return this; + [SUBSCRIBE("changePlaybackRate")](key, playbackRate) { + this.setState({ playbackRate }, false); + this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ playbackRate })); } - raycast(raycaster, intersects2) { - const geometry = this.geometry; - const matrixWorld = this.matrixWorld; - const threshold = raycaster.params.Line.threshold; - const drawRange = geometry.drawRange; - if (geometry.boundingSphere === null) - geometry.computeBoundingSphere(); - _sphere$1.copy(geometry.boundingSphere); - _sphere$1.applyMatrix4(matrixWorld); - _sphere$1.radius += threshold; - if (raycaster.ray.intersectsSphere(_sphere$1) === false) - return; - _inverseMatrix$1.copy(matrixWorld).invert(); - _ray$1.copy(raycaster.ray).applyMatrix4(_inverseMatrix$1); - const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3); - const localThresholdSq = localThreshold * localThreshold; - const vStart = new Vector3(); - const vEnd = new Vector3(); - const interSegment = new Vector3(); - const interRay = new Vector3(); - const step2 = this.isLineSegments ? 2 : 1; - if (geometry.isBufferGeometry) { - const index2 = geometry.index; - const attributes = geometry.attributes; - const positionAttribute = attributes.position; - if (index2 !== null) { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(index2.count, drawRange.start + drawRange.count); - for (let i = start2, l = end2 - 1; i < l; i += step2) { - const a = index2.getX(i); - const b = index2.getX(i + 1); - vStart.fromBufferAttribute(positionAttribute, a); - vEnd.fromBufferAttribute(positionAttribute, b); - const distSq = _ray$1.distanceSqToSegment(vStart, vEnd, interRay, interSegment); - if (distSq > localThresholdSq) - continue; - interRay.applyMatrix4(this.matrixWorld); - const distance2 = raycaster.ray.origin.distanceTo(interRay); - if (distance2 < raycaster.near || distance2 > raycaster.far) - continue; - intersects2.push({ - distance: distance2, - point: interSegment.clone().applyMatrix4(this.matrixWorld), - index: i, - face: null, - faceIndex: null, - object: this - }); - } - } else { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(positionAttribute.count, drawRange.start + drawRange.count); - for (let i = start2, l = end2 - 1; i < l; i += step2) { - vStart.fromBufferAttribute(positionAttribute, i); - vEnd.fromBufferAttribute(positionAttribute, i + 1); - const distSq = _ray$1.distanceSqToSegment(vStart, vEnd, interRay, interSegment); - if (distSq > localThresholdSq) - continue; - interRay.applyMatrix4(this.matrixWorld); - const distance2 = raycaster.ray.origin.distanceTo(interRay); - if (distance2 < raycaster.near || distance2 > raycaster.far) - continue; - intersects2.push({ - distance: distance2, - point: interSegment.clone().applyMatrix4(this.matrixWorld), - index: i, - face: null, - faceIndex: null, - object: this - }); - } - } - } else if (geometry.isGeometry) { - console.error("THREE.Line.raycast() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); - } - } - updateMorphTargets() { - const geometry = this.geometry; - if (geometry.isBufferGeometry) { - const morphAttributes = geometry.morphAttributes; - const keys2 = Object.keys(morphAttributes); - if (keys2.length > 0) { - const morphAttribute = morphAttributes[keys2[0]]; - if (morphAttribute !== void 0) { - this.morphTargetInfluences = []; - this.morphTargetDictionary = {}; - for (let m = 0, ml = morphAttribute.length; m < ml; m++) { - const name = morphAttribute[m].name || String(m); - this.morphTargetInfluences.push(0); - this.morphTargetDictionary[name] = m; - } - } - } - } else { - const morphTargets = geometry.morphTargets; - if (morphTargets !== void 0 && morphTargets.length > 0) { - console.error("THREE.Line.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead."); - } - } - } -} -Line.prototype.isLine = true; -const _start = /* @__PURE__ */ new Vector3(); -const _end = /* @__PURE__ */ new Vector3(); -class LineSegments extends Line { - constructor(geometry, material) { - super(geometry, material); - this.type = "LineSegments"; - } - computeLineDistances() { - const geometry = this.geometry; - if (geometry.isBufferGeometry) { - if (geometry.index === null) { - const positionAttribute = geometry.attributes.position; - const lineDistances = []; - for (let i = 0, l = positionAttribute.count; i < l; i += 2) { - _start.fromBufferAttribute(positionAttribute, i); - _end.fromBufferAttribute(positionAttribute, i + 1); - lineDistances[i] = i === 0 ? 0 : lineDistances[i - 1]; - lineDistances[i + 1] = lineDistances[i] + _start.distanceTo(_end); - } - geometry.setAttribute("lineDistance", new Float32BufferAttribute(lineDistances, 1)); - } else { - console.warn("THREE.LineSegments.computeLineDistances(): Computation only possible with non-indexed BufferGeometry."); - } - } else if (geometry.isGeometry) { - console.error("THREE.LineSegments.computeLineDistances() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); - } - return this; + [CHANGEINPUT("$volume")]() { + const volume = Number(this.refs.$volume.value); + this.setState({ volume }, false); + this.bindData("$volume_control"); + this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ volume })); } -} -LineSegments.prototype.isLineSegments = true; -class LineLoop extends Line { - constructor(geometry, material) { - super(geometry, material); - this.type = "LineLoop"; - } -} -LineLoop.prototype.isLineLoop = true; -class PointsMaterial extends Material { - constructor(parameters) { - super(); - this.type = "PointsMaterial"; - this.color = new Color(16777215); - this.map = null; - this.alphaMap = null; - this.size = 1; - this.sizeAttenuation = true; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.map = source2.map; - this.alphaMap = source2.alphaMap; - this.size = source2.size; - this.sizeAttenuation = source2.sizeAttenuation; - return this; + [BIND("$volume_control")]() { + return { + "data-selected-value": this.volumeStatus + }; } -} -PointsMaterial.prototype.isPointsMaterial = true; -const _inverseMatrix = /* @__PURE__ */ new Matrix4(); -const _ray = /* @__PURE__ */ new Ray(); -const _sphere = /* @__PURE__ */ new Sphere(); -const _position$2 = /* @__PURE__ */ new Vector3(); -class Points extends Object3D { - constructor(geometry = new BufferGeometry(), material = new PointsMaterial()) { - super(); - this.type = "Points"; - this.geometry = geometry; - this.material = material; - this.updateMorphTargets(); - } - copy(source2) { - super.copy(source2); - this.material = source2.material; - this.geometry = source2.geometry; - return this; + [BIND("$tools")]() { + return { + "data-selected-value": this.state.status + }; } - raycast(raycaster, intersects2) { - const geometry = this.geometry; - const matrixWorld = this.matrixWorld; - const threshold = raycaster.params.Points.threshold; - const drawRange = geometry.drawRange; - if (geometry.boundingSphere === null) - geometry.computeBoundingSphere(); - _sphere.copy(geometry.boundingSphere); - _sphere.applyMatrix4(matrixWorld); - _sphere.radius += threshold; - if (raycaster.ray.intersectsSphere(_sphere) === false) - return; - _inverseMatrix.copy(matrixWorld).invert(); - _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix); - const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3); - const localThresholdSq = localThreshold * localThreshold; - if (geometry.isBufferGeometry) { - const index2 = geometry.index; - const attributes = geometry.attributes; - const positionAttribute = attributes.position; - if (index2 !== null) { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(index2.count, drawRange.start + drawRange.count); - for (let i = start2, il = end2; i < il; i++) { - const a = index2.getX(i); - _position$2.fromBufferAttribute(positionAttribute, a); - testPoint(_position$2, a, localThresholdSq, matrixWorld, raycaster, intersects2, this); - } - } else { - const start2 = Math.max(0, drawRange.start); - const end2 = Math.min(positionAttribute.count, drawRange.start + drawRange.count); - for (let i = start2, l = end2; i < l; i++) { - _position$2.fromBufferAttribute(positionAttribute, i); - testPoint(_position$2, i, localThresholdSq, matrixWorld, raycaster, intersects2, this); - } - } - } else { - console.error("THREE.Points.raycast() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead."); - } - } - updateMorphTargets() { - const geometry = this.geometry; - if (geometry.isBufferGeometry) { - const morphAttributes = geometry.morphAttributes; - const keys2 = Object.keys(morphAttributes); - if (keys2.length > 0) { - const morphAttribute = morphAttributes[keys2[0]]; - if (morphAttribute !== void 0) { - this.morphTargetInfluences = []; - this.morphTargetDictionary = {}; - for (let m = 0, ml = morphAttribute.length; m < ml; m++) { - const name = morphAttribute[m].name || String(m); - this.morphTargetInfluences.push(0); - this.morphTargetDictionary[name] = m; - } - } - } - } else { - const morphTargets = geometry.morphTargets; - if (morphTargets !== void 0 && morphTargets.length > 0) { - console.error("THREE.Points.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead."); - } + [CLICK("$tools button")](e) { + var playType = e.$dt.attr("data-value"); + switch (playType) { + case "play": + this.setState({ status: "pause" }, false); + this.play(); + break; + case "pause": + this.setState({ status: "play" }, false); + this.pause(); + break; } + this.bindData("$tools"); } -} -Points.prototype.isPoints = true; -function testPoint(point2, index2, localThresholdSq, matrixWorld, raycaster, intersects2, object) { - const rayPointDistanceSq = _ray.distanceSqToPoint(point2); - if (rayPointDistanceSq < localThresholdSq) { - const intersectPoint = new Vector3(); - _ray.closestPointToPoint(point2, intersectPoint); - intersectPoint.applyMatrix4(matrixWorld); - const distance2 = raycaster.ray.origin.distanceTo(intersectPoint); - if (distance2 < raycaster.near || distance2 > raycaster.far) + [SUBSCRIBE_SELF("changeValue") + DEBOUNCE(100)](key, value) { + if (!this.state.$video) return; - intersects2.push({ - distance: distance2, - distanceToRay: Math.sqrt(rayPointDistanceSq), - point: intersectPoint, - index: index2, - face: null, - object - }); - } -} -class VideoTexture extends Texture { - constructor(video2, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy) { - super(video2, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy); - this.minFilter = minFilter !== void 0 ? minFilter : LinearFilter; - this.magFilter = magFilter !== void 0 ? magFilter : LinearFilter; - this.generateMipmaps = false; - const scope = this; - function updateVideo2() { - scope.needsUpdate = true; - video2.requestVideoFrameCallback(updateVideo2); - } - if ("requestVideoFrameCallback" in video2) { - video2.requestVideoFrameCallback(updateVideo2); - } + this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ [key]: value })); } - clone() { - return new this.constructor(this.image).copy(this); + [SUBSCRIBE_SELF("changeSelect")](key, value) { + this.$commands.executeCommand("setAttribute", "change video property", this.$context.selection.packByValue({ [key]: value })); } - update() { - const video2 = this.image; - const hasVideoFrameCallback = "requestVideoFrameCallback" in video2; - if (hasVideoFrameCallback === false && video2.readyState >= video2.HAVE_CURRENT_DATA) { - this.needsUpdate = true; + [SUBSCRIBE_SELF("updateVideoEvent")]() { + if (this.video.paused) { + this.setState({ + status: "play", + currentTime: this.video.currentTime + }, false); + this.bindData("$tools"); } + this.children.$currentTime.setValue(this.video.currentTime); } -} -VideoTexture.prototype.isVideoTexture = true; -class FramebufferTexture extends Texture { - constructor(width2, height2, format2) { - super({ width: width2, height: height2 }); - this.format = format2; - this.magFilter = NearestFilter; - this.minFilter = NearestFilter; - this.generateMipmaps = false; - this.needsUpdate = true; - } -} -FramebufferTexture.prototype.isFramebufferTexture = true; -class CompressedTexture extends Texture { - constructor(mipmaps, width2, height2, format2, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, encoding) { - super(null, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy, encoding); - this.image = { width: width2, height: height2 }; - this.mipmaps = mipmaps; - this.flipY = false; - this.generateMipmaps = false; + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + const current = this.$context.selection.current; + this.refreshShow(["video"]); + if (current && current.is("video")) { + this.emit("refElement", current.id, ($el) => { + const $video = $el.$("video"); + this.state.$video = $video; + this.setState({ + volume: current.volume, + currentTime: current.currentTime, + playbackRate: current.playbackRate + }, false); + this.video.ontimeupdate = (e) => { + this.trigger("updateVideoEvent", e); + }; + this.video.onprogress = (e) => { + this.trigger("updateVideoEvent", e); + }; + this.load("$body"); + }); + } } } -CompressedTexture.prototype.isCompressedTexture = true; -class CanvasTexture extends Texture { - constructor(canvas, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy) { - super(canvas, mapping, wrapS, wrapT, magFilter, minFilter, format2, type, anisotropy); - this.needsUpdate = true; - } +function video(editor) { + editor.registerUI("inspector.tab.style", { + VideoProperty + }); } -CanvasTexture.prototype.isCanvasTexture = true; -class Curve { - constructor() { - this.type = "Curve"; - this.arcLengthDivisions = 200; - } - getPoint() { - console.warn("THREE.Curve: .getPoint() not implemented."); - return null; +class ColorInformation extends EditorElement { + template() { + return ` +
+
+ +
+
+
+ +
HEX
+
+
+
+
+ +
R
+
+
+ +
G
+
+
+ +
B
+
+
+ +
A
+
+
+
+
+ +
H
+
+
+ +
%
+
S
+
+
+ +
%
+
L
+
+
+ +
A
+
+
+
+ `; } - getPointAt(u, optionalTarget) { - const t = this.getUtoTmapping(u); - return this.getPoint(t, optionalTarget); + get manager() { + return this.parent.manager; } - getPoints(divisions = 5) { - const points = []; - for (let d = 0; d <= divisions; d++) { - points.push(this.getPoint(d / divisions)); - } - return points; + setCurrentFormat(format2) { + this.format = format2; + this.initFormat(); } - getSpacedPoints(divisions = 5) { - const points = []; - for (let d = 0; d <= divisions; d++) { - points.push(this.getPointAt(d / divisions)); - } - return points; + initFormat() { + var current_format = this.format || "hex"; + ["hex", "rgb", "hsl"].filter((it) => it !== current_format).forEach((formatString) => { + this.$el.removeClass(formatString); + }); + this.$el.addClass(current_format); } - getLength() { - const lengths = this.getLengths(); - return lengths[lengths.length - 1]; - } - getLengths(divisions = this.arcLengthDivisions) { - if (this.cacheArcLengths && this.cacheArcLengths.length === divisions + 1 && !this.needsUpdate) { - return this.cacheArcLengths; - } - this.needsUpdate = false; - const cache = []; - let current, last = this.getPoint(0); - let sum = 0; - cache.push(0); - for (let p = 1; p <= divisions; p++) { - current = this.getPoint(p / divisions); - sum += current.distanceTo(last); - cache.push(sum); - last = current; - } - this.cacheArcLengths = cache; - return cache; - } - updateArcLengths() { - this.needsUpdate = true; - this.getLengths(); - } - getUtoTmapping(u, distance2) { - const arcLengths = this.getLengths(); - let i = 0; - const il = arcLengths.length; - let targetArcLength; - if (distance2) { - targetArcLength = distance2; - } else { - targetArcLength = u * arcLengths[il - 1]; - } - let low = 0, high = il - 1, comparison; - while (low <= high) { - i = Math.floor(low + (high - low) / 2); - comparison = arcLengths[i] - targetArcLength; - if (comparison < 0) { - low = i + 1; - } else if (comparison > 0) { - high = i - 1; + nextFormat() { + var current_format = this.format || "hex"; + var next_format = "hex"; + if (current_format == "hex") { + next_format = "rgb"; + } else if (current_format == "rgb") { + next_format = "hsl"; + } else if (current_format == "hsl") { + if (this.parent.alpha == 1) { + next_format = "hex"; } else { - high = i; - break; - } - } - i = high; - if (arcLengths[i] === targetArcLength) { - return i / (il - 1); - } - const lengthBefore = arcLengths[i]; - const lengthAfter = arcLengths[i + 1]; - const segmentLength = lengthAfter - lengthBefore; - const segmentFraction = (targetArcLength - lengthBefore) / segmentLength; - const t = (i + segmentFraction) / (il - 1); - return t; - } - getTangent(t, optionalTarget) { - const delta = 1e-4; - let t1 = t - delta; - let t2 = t + delta; - if (t1 < 0) - t1 = 0; - if (t2 > 1) - t2 = 1; - const pt1 = this.getPoint(t1); - const pt2 = this.getPoint(t2); - const tangent = optionalTarget || (pt1.isVector2 ? new Vector2() : new Vector3()); - tangent.copy(pt2).sub(pt1).normalize(); - return tangent; - } - getTangentAt(u, optionalTarget) { - const t = this.getUtoTmapping(u); - return this.getTangent(t, optionalTarget); - } - computeFrenetFrames(segments, closed) { - const normal = new Vector3(); - const tangents = []; - const normals = []; - const binormals = []; - const vec = new Vector3(); - const mat = new Matrix4(); - for (let i = 0; i <= segments; i++) { - const u = i / segments; - tangents[i] = this.getTangentAt(u, new Vector3()); - } - normals[0] = new Vector3(); - binormals[0] = new Vector3(); - let min = Number.MAX_VALUE; - const tx = Math.abs(tangents[0].x); - const ty = Math.abs(tangents[0].y); - const tz = Math.abs(tangents[0].z); - if (tx <= min) { - min = tx; - normal.set(1, 0, 0); - } - if (ty <= min) { - min = ty; - normal.set(0, 1, 0); - } - if (tz <= min) { - normal.set(0, 0, 1); - } - vec.crossVectors(tangents[0], normal).normalize(); - normals[0].crossVectors(tangents[0], vec); - binormals[0].crossVectors(tangents[0], normals[0]); - for (let i = 1; i <= segments; i++) { - normals[i] = normals[i - 1].clone(); - binormals[i] = binormals[i - 1].clone(); - vec.crossVectors(tangents[i - 1], tangents[i]); - if (vec.length() > Number.EPSILON) { - vec.normalize(); - const theta = Math.acos(clamp(tangents[i - 1].dot(tangents[i]), -1, 1)); - normals[i].applyMatrix4(mat.makeRotationAxis(vec, theta)); - } - binormals[i].crossVectors(tangents[i], normals[i]); - } - if (closed === true) { - let theta = Math.acos(clamp(normals[0].dot(normals[segments]), -1, 1)); - theta /= segments; - if (tangents[0].dot(vec.crossVectors(normals[0], normals[segments])) > 0) { - theta = -theta; - } - for (let i = 1; i <= segments; i++) { - normals[i].applyMatrix4(mat.makeRotationAxis(tangents[i], theta * i)); - binormals[i].crossVectors(tangents[i], normals[i]); + next_format = "rgb"; } } - return { - tangents, - normals, - binormals - }; + this.format = next_format; + this.initFormat(); + this.parent.changeFormat(this.format); } - clone() { - return new this.constructor().copy(this); + goToFormat(to_format) { + this.format = to_format; + if (to_format === "rgb" || to_format === "hsl") { + this.initFormat(); + } + this.parent.changeFormat(this.format); } - copy(source2) { - this.arcLengthDivisions = source2.arcLengthDivisions; - return this; + getFormat() { + return this.format || "hex"; } - toJSON() { - const data = { - metadata: { - version: 4.5, - type: "Curve", - generator: "Curve.toJSON" - } - }; - data.arcLengthDivisions = this.arcLengthDivisions; - data.type = this.type; - return data; + changeRgbColor() { + this.parent.lastUpdateColor({ + type: "rgb", + r: this.refs.$rgb_r.int(), + g: this.refs.$rgb_g.int(), + b: this.refs.$rgb_b.int(), + a: this.refs.$rgb_a.float() + }); } - fromJSON(json) { - this.arcLengthDivisions = json.arcLengthDivisions; - return this; + changeHslColor() { + this.parent.lastUpdateColor({ + type: "hsl", + h: this.refs.$hsl_h.int(), + s: this.refs.$hsl_s.int(), + l: this.refs.$hsl_l.int(), + a: this.refs.$hsl_a.float() + }); } -} -class EllipseCurve extends Curve { - constructor(aX = 0, aY = 0, xRadius = 1, yRadius = 1, aStartAngle = 0, aEndAngle = Math.PI * 2, aClockwise = false, aRotation = 0) { - super(); - this.type = "EllipseCurve"; - this.aX = aX; - this.aY = aY; - this.xRadius = xRadius; - this.yRadius = yRadius; - this.aStartAngle = aStartAngle; - this.aEndAngle = aEndAngle; - this.aClockwise = aClockwise; - this.aRotation = aRotation; - } - getPoint(t, optionalTarget) { - const point2 = optionalTarget || new Vector2(); - const twoPi = Math.PI * 2; - let deltaAngle = this.aEndAngle - this.aStartAngle; - const samePoints = Math.abs(deltaAngle) < Number.EPSILON; - while (deltaAngle < 0) - deltaAngle += twoPi; - while (deltaAngle > twoPi) - deltaAngle -= twoPi; - if (deltaAngle < Number.EPSILON) { - if (samePoints) { - deltaAngle = 0; - } else { - deltaAngle = twoPi; - } + hasValue(e) { + if (e.target.value === "") { + return false; } - if (this.aClockwise === true && !samePoints) { - if (deltaAngle === twoPi) { - deltaAngle = -twoPi; - } else { - deltaAngle = deltaAngle - twoPi; - } - } - const angle = this.aStartAngle + t * deltaAngle; - let x = this.aX + this.xRadius * Math.cos(angle); - let y = this.aY + this.yRadius * Math.sin(angle); - if (this.aRotation !== 0) { - const cos = Math.cos(this.aRotation); - const sin = Math.sin(this.aRotation); - const tx = x - this.aX; - const ty = y - this.aY; - x = tx * cos - ty * sin + this.aX; - y = tx * sin + ty * cos + this.aY; - } - return point2.set(x, y); - } - copy(source2) { - super.copy(source2); - this.aX = source2.aX; - this.aY = source2.aY; - this.xRadius = source2.xRadius; - this.yRadius = source2.yRadius; - this.aStartAngle = source2.aStartAngle; - this.aEndAngle = source2.aEndAngle; - this.aClockwise = source2.aClockwise; - this.aRotation = source2.aRotation; - return this; + return true; } - toJSON() { - const data = super.toJSON(); - data.aX = this.aX; - data.aY = this.aY; - data.xRadius = this.xRadius; - data.yRadius = this.yRadius; - data.aStartAngle = this.aStartAngle; - data.aEndAngle = this.aEndAngle; - data.aClockwise = this.aClockwise; - data.aRotation = this.aRotation; - return data; + [INPUT("$rgb_r") + IF("hasValue")]() { + this.changeRgbColor(); } - fromJSON(json) { - super.fromJSON(json); - this.aX = json.aX; - this.aY = json.aY; - this.xRadius = json.xRadius; - this.yRadius = json.yRadius; - this.aStartAngle = json.aStartAngle; - this.aEndAngle = json.aEndAngle; - this.aClockwise = json.aClockwise; - this.aRotation = json.aRotation; - return this; + [INPUT("$rgb_g") + IF("hasValue")]() { + this.changeRgbColor(); } -} -EllipseCurve.prototype.isEllipseCurve = true; -class ArcCurve extends EllipseCurve { - constructor(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { - super(aX, aY, aRadius, aRadius, aStartAngle, aEndAngle, aClockwise); - this.type = "ArcCurve"; + [INPUT("$rgb_b") + IF("hasValue")]() { + this.changeRgbColor(); } -} -ArcCurve.prototype.isArcCurve = true; -function CubicPoly() { - let c0 = 0, c1 = 0, c2 = 0, c3 = 0; - function init(x0, x1, t0, t1) { - c0 = x0; - c1 = t0; - c2 = -3 * x0 + 3 * x1 - 2 * t0 - t1; - c3 = 2 * x0 - 2 * x1 + t0 + t1; + [INPUT("$rgb_a") + IF("hasValue")]() { + this.changeRgbColor(); } - return { - initCatmullRom: function(x0, x1, x2, x3, tension) { - init(x1, x2, tension * (x2 - x0), tension * (x3 - x1)); - }, - initNonuniformCatmullRom: function(x0, x1, x2, x3, dt0, dt1, dt2) { - let t1 = (x1 - x0) / dt0 - (x2 - x0) / (dt0 + dt1) + (x2 - x1) / dt1; - let t2 = (x2 - x1) / dt1 - (x3 - x1) / (dt1 + dt2) + (x3 - x2) / dt2; - t1 *= dt1; - t2 *= dt1; - init(x1, x2, t1, t2); - }, - calc: function(t) { - const t2 = t * t; - const t3 = t2 * t; - return c0 + c1 * t + c2 * t2 + c3 * t3; - } - }; -} -const tmp = new Vector3(); -const px = new CubicPoly(), py = new CubicPoly(), pz = new CubicPoly(); -class CatmullRomCurve3 extends Curve { - constructor(points = [], closed = false, curveType = "centripetal", tension = 0.5) { - super(); - this.type = "CatmullRomCurve3"; - this.points = points; - this.closed = closed; - this.curveType = curveType; - this.tension = tension; - } - getPoint(t, optionalTarget = new Vector3()) { - const point2 = optionalTarget; - const points = this.points; - const l = points.length; - const p = (l - (this.closed ? 0 : 1)) * t; - let intPoint = Math.floor(p); - let weight = p - intPoint; - if (this.closed) { - intPoint += intPoint > 0 ? 0 : (Math.floor(Math.abs(intPoint) / l) + 1) * l; - } else if (weight === 0 && intPoint === l - 1) { - intPoint = l - 2; - weight = 1; - } - let p0, p3; - if (this.closed || intPoint > 0) { - p0 = points[(intPoint - 1) % l]; - } else { - tmp.subVectors(points[0], points[1]).add(points[0]); - p0 = tmp; + [INPUT("$hsl_h") + IF("hasValue")]() { + this.changeHslColor(); + } + [INPUT("$hsl_s") + IF("hasValue")]() { + this.changeHslColor(); + } + [INPUT("$hsl_l") + IF("hasValue")]() { + this.changeHslColor(); + } + [INPUT("$hsl_a") + IF("hasValue")]() { + this.changeHslColor(); + } + [KEYUP("$hexCode") + IF("hasValue")]() { + var code2 = this.refs.$hexCode.val(); + if (code2.charAt(0) == "#" && (code2.length == 7 || code2.length === 9)) { + this.parent.lastUpdateColor(code2); } - const p1 = points[intPoint % l]; - const p2 = points[(intPoint + 1) % l]; - if (this.closed || intPoint + 2 < l) { - p3 = points[(intPoint + 2) % l]; - } else { - tmp.subVectors(points[l - 1], points[l - 2]).add(points[l - 1]); - p3 = tmp; - } - if (this.curveType === "centripetal" || this.curveType === "chordal") { - const pow = this.curveType === "chordal" ? 0.5 : 0.25; - let dt0 = Math.pow(p0.distanceToSquared(p1), pow); - let dt1 = Math.pow(p1.distanceToSquared(p2), pow); - let dt2 = Math.pow(p2.distanceToSquared(p3), pow); - if (dt1 < 1e-4) - dt1 = 1; - if (dt0 < 1e-4) - dt0 = dt1; - if (dt2 < 1e-4) - dt2 = dt1; - px.initNonuniformCatmullRom(p0.x, p1.x, p2.x, p3.x, dt0, dt1, dt2); - py.initNonuniformCatmullRom(p0.y, p1.y, p2.y, p3.y, dt0, dt1, dt2); - pz.initNonuniformCatmullRom(p0.z, p1.z, p2.z, p3.z, dt0, dt1, dt2); - } else if (this.curveType === "catmullrom") { - px.initCatmullRom(p0.x, p1.x, p2.x, p3.x, this.tension); - py.initCatmullRom(p0.y, p1.y, p2.y, p3.y, this.tension); - pz.initCatmullRom(p0.z, p1.z, p2.z, p3.z, this.tension); - } - point2.set(px.calc(weight), py.calc(weight), pz.calc(weight)); - return point2; } - copy(source2) { - super.copy(source2); - this.points = []; - for (let i = 0, l = source2.points.length; i < l; i++) { - const point2 = source2.points[i]; - this.points.push(point2.clone()); + [PASTE("$hexCode") + IF("hasValue")]() { + var code2 = this.refs.$hexCode.val(); + if (code2.charAt(0) == "#" && (code2.length == 7 || code2.length === 9)) { + this.parent.lastUpdateColor(code2); } - this.closed = source2.closed; - this.curveType = source2.curveType; - this.tension = source2.tension; - return this; } - toJSON() { - const data = super.toJSON(); - data.points = []; - for (let i = 0, l = this.points.length; i < l; i++) { - const point2 = this.points[i]; - data.points.push(point2.toArray()); - } - data.closed = this.closed; - data.curveType = this.curveType; - data.tension = this.tension; - return data; + [CLICK("$formatChangeButton")]() { + this.nextFormat(); } - fromJSON(json) { - super.fromJSON(json); - this.points = []; - for (let i = 0, l = json.points.length; i < l; i++) { - const point2 = json.points[i]; - this.points.push(new Vector3().fromArray(point2)); - } - this.closed = json.closed; - this.curveType = json.curveType; - this.tension = json.tension; - return this; + [CLICK("$el .information-item.hex .input-field .title")]() { + this.goToFormat("hex"); } -} -CatmullRomCurve3.prototype.isCatmullRomCurve3 = true; -function CatmullRom(t, p0, p1, p2, p3) { - const v0 = (p2 - p0) * 0.5; - const v1 = (p3 - p1) * 0.5; - const t2 = t * t; - const t3 = t * t2; - return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1; -} -function QuadraticBezierP0(t, p) { - const k = 1 - t; - return k * k * p; -} -function QuadraticBezierP1(t, p) { - return 2 * (1 - t) * t * p; -} -function QuadraticBezierP2(t, p) { - return t * t * p; -} -function QuadraticBezier(t, p0, p1, p2) { - return QuadraticBezierP0(t, p0) + QuadraticBezierP1(t, p1) + QuadraticBezierP2(t, p2); -} -function CubicBezierP0(t, p) { - const k = 1 - t; - return k * k * k * p; -} -function CubicBezierP1(t, p) { - const k = 1 - t; - return 3 * k * k * t * p; -} -function CubicBezierP2(t, p) { - return 3 * (1 - t) * t * t * p; -} -function CubicBezierP3(t, p) { - return t * t * t * p; -} -function CubicBezier(t, p0, p1, p2, p3) { - return CubicBezierP0(t, p0) + CubicBezierP1(t, p1) + CubicBezierP2(t, p2) + CubicBezierP3(t, p3); -} -class CubicBezierCurve extends Curve { - constructor(v0 = new Vector2(), v1 = new Vector2(), v2 = new Vector2(), v3 = new Vector2()) { - super(); - this.type = "CubicBezierCurve"; - this.v0 = v0; - this.v1 = v1; - this.v2 = v2; - this.v3 = v3; + [CLICK("$el .information-item.rgb .input-field .title")]() { + this.goToFormat("hsl"); } - getPoint(t, optionalTarget = new Vector2()) { - const point2 = optionalTarget; - const v0 = this.v0, v1 = this.v1, v2 = this.v2, v3 = this.v3; - point2.set(CubicBezier(t, v0.x, v1.x, v2.x, v3.x), CubicBezier(t, v0.y, v1.y, v2.y, v3.y)); - return point2; + [CLICK("$el .information-item.hsl .input-field .title")]() { + this.goToFormat("rgb"); } - copy(source2) { - super.copy(source2); - this.v0.copy(source2.v0); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - this.v3.copy(source2.v3); - return this; + setRGBInput() { + this.refs.$rgb_r.val(this.manager.rgb.r); + this.refs.$rgb_g.val(this.manager.rgb.g); + this.refs.$rgb_b.val(this.manager.rgb.b); + this.refs.$rgb_a.val(this.manager.alpha); } - toJSON() { - const data = super.toJSON(); - data.v0 = this.v0.toArray(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - data.v3 = this.v3.toArray(); - return data; + setHSLInput() { + this.refs.$hsl_h.val(this.manager.hsl.h); + this.refs.$hsl_s.val(this.manager.hsl.s); + this.refs.$hsl_l.val(this.manager.hsl.l); + this.refs.$hsl_a.val(this.manager.alpha); } - fromJSON(json) { - super.fromJSON(json); - this.v0.fromArray(json.v0); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - this.v3.fromArray(json.v3); - return this; + setHexInput() { + this.refs.$hexCode.val(this.manager.toString("hex")); } -} -CubicBezierCurve.prototype.isCubicBezierCurve = true; -class CubicBezierCurve3 extends Curve { - constructor(v0 = new Vector3(), v1 = new Vector3(), v2 = new Vector3(), v3 = new Vector3()) { - super(); - this.type = "CubicBezierCurve3"; - this.v0 = v0; - this.v1 = v1; - this.v2 = v2; - this.v3 = v3; - } - getPoint(t, optionalTarget = new Vector3()) { - const point2 = optionalTarget; - const v0 = this.v0, v1 = this.v1, v2 = this.v2, v3 = this.v3; - point2.set(CubicBezier(t, v0.x, v1.x, v2.x, v3.x), CubicBezier(t, v0.y, v1.y, v2.y, v3.y), CubicBezier(t, v0.z, v1.z, v2.z, v3.z)); - return point2; + setValue() { + this.refresh(); } - copy(source2) { - super.copy(source2); - this.v0.copy(source2.v0); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - this.v3.copy(source2.v3); - return this; + refresh() { + this.setCurrentFormat(this.manager.format); + this.setRGBInput(); + this.setHSLInput(); + this.setHexInput(); } - toJSON() { - const data = super.toJSON(); - data.v0 = this.v0.toArray(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - data.v3 = this.v3.toArray(); - return data; +} +class ColorPalette extends EditorElement { + initState() { + return { + hueColor: "rgba(0, 0, 0, 1)", + s: 0, + v: 0 + }; + } + template() { + return ` +
+
+
+
+
+
+
+ `; } - fromJSON(json) { - super.fromJSON(json); - this.v0.fromArray(json.v0); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - this.v3.fromArray(json.v3); - return this; + afterRender() { + this.rect = this.$el.rect(); } -} -CubicBezierCurve3.prototype.isCubicBezierCurve3 = true; -class LineCurve extends Curve { - constructor(v1 = new Vector2(), v2 = new Vector2()) { - super(); - this.type = "LineCurve"; - this.v1 = v1; - this.v2 = v2; + [BIND("$el")]() { + return { + style: { + "background-color": this.state.hueColor + } + }; } - getPoint(t, optionalTarget = new Vector2()) { - const point2 = optionalTarget; - if (t === 1) { - point2.copy(this.v2); - } else { - point2.copy(this.v2).sub(this.v1); - point2.multiplyScalar(t).add(this.v1); + [BIND("$drag_pointer")]() { + if (!this.rect || this.rect.width === 0) { + this.rect = this.$el.rect(); } - return point2; + const x = this.rect.width * this.state.s; + const y = this.rect.height * (1 - this.state.v); + return { + style: { + left: x, + top: y + } + }; } - getPointAt(u, optionalTarget) { - return this.getPoint(u, optionalTarget); + [POINTERSTART("$el") + MOVE("movePointer") + END("moveEndPointer")]() { + this.rect = this.$el.rect(); + this.refreshColorUI(); } - getTangent(t, optionalTarget) { - const tangent = optionalTarget || new Vector2(); - tangent.copy(this.v2).sub(this.v1).normalize(); - return tangent; + movePointer() { + this.refreshColorUI(); } - copy(source2) { - super.copy(source2); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - return this; + moveEndPointer() { + this.parent.changeEndColor(); } - toJSON() { - const data = super.toJSON(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - return data; + refreshColorUI() { + const e = this.$config.get("bodyEvent"); + const minX = this.rect.left; + const maxX = this.rect.right; + const minY = this.rect.top; + const maxY = this.rect.bottom; + const currentX = Math.min(maxX, Math.max(minX, e.clientX)); + const currentY = Math.min(maxY, Math.max(minY, e.clientY)); + const width2 = maxX - minX; + const height2 = maxY - minY; + var s = (currentX - minX) / width2; + var v = (height2 - (currentY - minY)) / height2; + this.parent.changeColor({ + type: "hsv", + s, + v + }); } - fromJSON(json) { - super.fromJSON(json); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - return this; + setValue(s, v, hueColor) { + this.setState({ + s, + v, + hueColor + }); } } -LineCurve.prototype.isLineCurve = true; -class LineCurve3 extends Curve { - constructor(v1 = new Vector3(), v2 = new Vector3()) { - super(); - this.type = "LineCurve3"; - this.isLineCurve3 = true; - this.v1 = v1; - this.v2 = v2; - } - getPoint(t, optionalTarget = new Vector3()) { - const point2 = optionalTarget; - if (t === 1) { - point2.copy(this.v2); - } else { - point2.copy(this.v2).sub(this.v1); - point2.multiplyScalar(t).add(this.v1); - } - return point2; - } - getPointAt(u, optionalTarget) { - return this.getPoint(u, optionalTarget); +class ColorView extends EditorElement { + initState() { + return { + value: "rgba(0, 0, 0, 1)" + }; } - copy(source2) { - super.copy(source2); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - return this; + template() { + return `
`; } - toJSON() { - const data = super.toJSON(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - return data; + [BIND("$el")]() { + return { + style: { + "background-color": this.state.value + } + }; } - fromJSON(json) { - super.fromJSON(json); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - return this; + setValue(value) { + this.setState({ + value + }); } } -class QuadraticBezierCurve extends Curve { - constructor(v0 = new Vector2(), v1 = new Vector2(), v2 = new Vector2()) { - super(); - this.type = "QuadraticBezierCurve"; - this.v0 = v0; - this.v1 = v1; - this.v2 = v2; +class Hue extends EditorElement { + initState() { + return { + hue: 0, + minValue: 0, + maxValue: 360 + }; } - getPoint(t, optionalTarget = new Vector2()) { - const point2 = optionalTarget; - const v0 = this.v0, v1 = this.v1, v2 = this.v2; - point2.set(QuadraticBezier(t, v0.x, v1.x, v2.x), QuadraticBezier(t, v0.y, v1.y, v2.y)); - return point2; + template() { + return ` +
+
+
+
+
+ `; } - copy(source2) { - super.copy(source2); - this.v0.copy(source2.v0); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - return this; + [BIND("$bar")]() { + const hue = this.state.hue; + return { + style: { + left: Length.makePercent(hue, 360) + }, + class: { + first: hue <= this.state.minValue, + last: hue >= this.state.maxValue + } + }; } - toJSON() { - const data = super.toJSON(); - data.v0 = this.v0.toArray(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - return data; + [POINTERSTART("$container") + MOVE("movePointer") + END("moveEndPointer")]() { + this.rect = this.refs.$container.rect(); + this.refreshColorUI(); } - fromJSON(json) { - super.fromJSON(json); - this.v0.fromArray(json.v0); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - return this; + movePointer() { + this.refreshColorUI(); } -} -QuadraticBezierCurve.prototype.isQuadraticBezierCurve = true; -class QuadraticBezierCurve3 extends Curve { - constructor(v0 = new Vector3(), v1 = new Vector3(), v2 = new Vector3()) { - super(); - this.type = "QuadraticBezierCurve3"; - this.v0 = v0; - this.v1 = v1; - this.v2 = v2; + refreshColorUI() { + const minX = this.rect.left; + const maxX = this.rect.right; + const currentX = Math.max(Math.min(maxX, this.$config.get("bodyEvent").clientX), minX); + const rate = (currentX - minX) / (maxX - minX); + this.parent.changeColor({ + h: rate * this.state.maxValue, + type: "hsv" + }); } - getPoint(t, optionalTarget = new Vector3()) { - const point2 = optionalTarget; - const v0 = this.v0, v1 = this.v1, v2 = this.v2; - point2.set(QuadraticBezier(t, v0.x, v1.x, v2.x), QuadraticBezier(t, v0.y, v1.y, v2.y), QuadraticBezier(t, v0.z, v1.z, v2.z)); - return point2; + setValue(hue) { + this.setState({ + hue + }); } - copy(source2) { - super.copy(source2); - this.v0.copy(source2.v0); - this.v1.copy(source2.v1); - this.v2.copy(source2.v2); - return this; +} +class Opacity extends EditorElement { + initState() { + return { + colorbar: parse("rgba(0, 0, 0, 1)"), + opacity: 0, + minValue: 0, + maxValue: 100 + }; } - toJSON() { - const data = super.toJSON(); - data.v0 = this.v0.toArray(); - data.v1 = this.v1.toArray(); - data.v2 = this.v2.toArray(); - return data; + template() { + return ` +
+
+
+
+
+
+ `; } - fromJSON(json) { - super.fromJSON(json); - this.v0.fromArray(json.v0); - this.v1.fromArray(json.v1); - this.v2.fromArray(json.v2); - return this; + [BIND("$colorbar")]() { + const rgb2 = clone$1(this.state.colorbar); + rgb2.a = 0; + const start2 = format(rgb2, "rgb"); + rgb2.a = 1; + const end2 = format(rgb2, "rgb"); + return { + style: { + background: `linear-gradient(to right, ${start2}, ${end2})` + } + }; } -} -QuadraticBezierCurve3.prototype.isQuadraticBezierCurve3 = true; -class SplineCurve extends Curve { - constructor(points = []) { - super(); - this.type = "SplineCurve"; - this.points = points; + [BIND("$bar")]() { + const opacity2 = this.state.opacity * 100; + return { + style: { + left: Length.percent(opacity2) + }, + class: { + first: opacity2 <= this.state.minValue, + last: opacity2 >= this.state.maxValue + } + }; } - getPoint(t, optionalTarget = new Vector2()) { - const point2 = optionalTarget; - const points = this.points; - const p = (points.length - 1) * t; - const intPoint = Math.floor(p); - const weight = p - intPoint; - const p0 = points[intPoint === 0 ? intPoint : intPoint - 1]; - const p1 = points[intPoint]; - const p2 = points[intPoint > points.length - 2 ? points.length - 1 : intPoint + 1]; - const p3 = points[intPoint > points.length - 3 ? points.length - 1 : intPoint + 2]; - point2.set(CatmullRom(weight, p0.x, p1.x, p2.x, p3.x), CatmullRom(weight, p0.y, p1.y, p2.y, p3.y)); - return point2; + [POINTERSTART("$container") + MOVE("movePointer") + END("moveEndPointer")]() { + this.rect = this.refs.$container.rect(); + this.refreshColorUI(); } - copy(source2) { - super.copy(source2); - this.points = []; - for (let i = 0, l = source2.points.length; i < l; i++) { - const point2 = source2.points[i]; - this.points.push(point2.clone()); - } - return this; + movePointer() { + this.refreshColorUI(); } - toJSON() { - const data = super.toJSON(); - data.points = []; - for (let i = 0, l = this.points.length; i < l; i++) { - const point2 = this.points[i]; - data.points.push(point2.toArray()); - } - return data; + refreshColorUI() { + const minX = this.rect.left; + const maxX = this.rect.right; + const currentX = Math.max(Math.min(maxX, this.$config.get("bodyEvent").clientX), minX); + const rate = (currentX - minX) / (maxX - minX); + this.parent.changeColor({ + a: rate.toFixed(2) + }); } - fromJSON(json) { - super.fromJSON(json); - this.points = []; - for (let i = 0, l = json.points.length; i < l; i++) { - const point2 = json.points[i]; - this.points.push(new Vector2().fromArray(point2)); - } - return this; + setValue(colorbar, opacity2) { + this.setState({ + opacity: opacity2, + colorbar + }); } } -SplineCurve.prototype.isSplineCurve = true; -var Curves = /* @__PURE__ */ Object.freeze({ - __proto__: null, - ArcCurve, - CatmullRomCurve3, - CubicBezierCurve, - CubicBezierCurve3, - EllipseCurve, - LineCurve, - LineCurve3, - QuadraticBezierCurve, - QuadraticBezierCurve3, - SplineCurve -}); -class CurvePath extends Curve { +class ColorManagerV2 { constructor() { - super(); - this.type = "CurvePath"; - this.curves = []; - this.autoClose = false; - } - add(curve) { - this.curves.push(curve); - } - closePath() { - const startPoint = this.curves[0].getPoint(0); - const endPoint = this.curves[this.curves.length - 1].getPoint(1); - if (!startPoint.equals(endPoint)) { - this.curves.push(new LineCurve(endPoint, startPoint)); - } - } - getPoint(t, optionalTarget) { - const d = t * this.getLength(); - const curveLengths = this.getCurveLengths(); - let i = 0; - while (i < curveLengths.length) { - if (curveLengths[i] >= d) { - const diff = curveLengths[i] - d; - const curve = this.curves[i]; - const segmentLength = curve.getLength(); - const u = segmentLength === 0 ? 0 : 1 - diff / segmentLength; - return curve.getPointAt(u, optionalTarget); - } - i++; - } - return null; + this.initialize(); } - getLength() { - const lens2 = this.getCurveLengths(); - return lens2[lens2.length - 1]; + initialize() { + this.state = { + rgb: {}, + hsl: {}, + hsv: {}, + alpha: 1, + format: "hex" + }; } - updateArcLengths() { - this.needsUpdate = true; - this.cacheLengths = null; - this.getCurveLengths(); + get hsv() { + return this.state.hsv; } - getCurveLengths() { - if (this.cacheLengths && this.cacheLengths.length === this.curves.length) { - return this.cacheLengths; - } - const lengths = []; - let sums = 0; - for (let i = 0, l = this.curves.length; i < l; i++) { - sums += this.curves[i].getLength(); - lengths.push(sums); - } - this.cacheLengths = lengths; - return lengths; + get rgb() { + return this.state.rgb; } - getSpacedPoints(divisions = 40) { - const points = []; - for (let i = 0; i <= divisions; i++) { - points.push(this.getPoint(i / divisions)); - } - if (this.autoClose) { - points.push(points[0]); - } - return points; + get hsl() { + return this.state.hsl; } - getPoints(divisions = 12) { - const points = []; - let last; - for (let i = 0, curves = this.curves; i < curves.length; i++) { - const curve = curves[i]; - const resolution = curve.isEllipseCurve ? divisions * 2 : curve.isLineCurve || curve.isLineCurve3 ? 1 : curve.isSplineCurve ? divisions * curve.points.length : divisions; - const pts = curve.getPoints(resolution); - for (let j = 0; j < pts.length; j++) { - const point2 = pts[j]; - if (last && last.equals(point2)) - continue; - points.push(point2); - last = point2; - } - } - if (this.autoClose && points.length > 1 && !points[points.length - 1].equals(points[0])) { - points.push(points[0]); - } - return points; + get hex() { + return this.state.hex; } - copy(source2) { - super.copy(source2); - this.curves = []; - for (let i = 0, l = source2.curves.length; i < l; i++) { - const curve = source2.curves[i]; - this.curves.push(curve.clone()); - } - this.autoClose = source2.autoClose; - return this; + get alpha() { + if (typeof this.state.alpha === "undefined") + return 1; + return this.state.alpha; } - toJSON() { - const data = super.toJSON(); - data.autoClose = this.autoClose; - data.curves = []; - for (let i = 0, l = this.curves.length; i < l; i++) { - const curve = this.curves[i]; - data.curves.push(curve.toJSON()); - } - return data; + get format() { + return this.state.format; } - fromJSON(json) { - super.fromJSON(json); - this.autoClose = json.autoClose; - this.curves = []; - for (let i = 0, l = json.curves.length; i < l; i++) { - const curve = json.curves[i]; - this.curves.push(new Curves[curve.type]().fromJSON(curve)); - } - return this; + changeFormat(format2) { + this.state.format = format2; } -} -class Path extends CurvePath { - constructor(points) { - super(); - this.type = "Path"; - this.currentPoint = new Vector2(); - if (points) { - this.setFromPoints(points); - } + initColor(colorObj) { + this.changeColor(colorObj); } - setFromPoints(points) { - this.moveTo(points[0].x, points[0].y); - for (let i = 1, l = points.length; i < l; i++) { - this.lineTo(points[i].x, points[i].y); + changeColor(colorObj) { + colorObj = colorObj || "#FF0000"; + if (typeof colorObj === "string") { + colorObj = parse(colorObj); + } + this.state.alpha = typeof colorObj.a !== "undefined" ? colorObj.a : this.state.alpha; + this.state.format = colorObj.type != "hsv" ? colorObj.type || this.state.format : this.state.format; + if (colorObj.type == "hsl") { + this.state.hsl = __spreadValues(__spreadValues({}, this.state.hsl), colorObj); + this.state.rgb = HSLtoRGB(this.state.hsl); + this.state.hsv = HSLtoHSV(colorObj); + } else if (colorObj.type == "hex") { + this.state.rgb = __spreadValues(__spreadValues({}, this.state.rgb), colorObj); + this.state.hsl = RGBtoHSL(this.state.rgb); + this.state.hsv = RGBtoHSV(colorObj); + } else if (colorObj.type == "rgb") { + this.state.rgb = __spreadValues(__spreadValues({}, this.state.rgb), colorObj); + this.state.hsl = RGBtoHSL(this.state.rgb); + this.state.hsv = RGBtoHSV(colorObj); + } else if (colorObj.type == "hsv") { + this.state.hsv = __spreadValues(__spreadValues({}, this.state.hsv), colorObj); + this.state.rgb = HSVtoRGB(this.state.hsv); + this.state.hsl = HSVtoHSL(this.state.hsv); } - return this; } - moveTo(x, y) { - this.currentPoint.set(x, y); - return this; + getHueColor() { + return checkHueColor(this.state.hsv.h / 360); } - lineTo(x, y) { - const curve = new LineCurve(this.currentPoint.clone(), new Vector2(x, y)); - this.curves.push(curve); - this.currentPoint.set(x, y); - return this; + toString(type) { + type = type || this.state.format; + var colorObj = this.state[type] || this.state.rgb; + return format(__spreadProps(__spreadValues({}, colorObj), { a: this.state.alpha }), type); } - quadraticCurveTo(aCPx, aCPy, aX, aY) { - const curve = new QuadraticBezierCurve(this.currentPoint.clone(), new Vector2(aCPx, aCPy), new Vector2(aX, aY)); - this.curves.push(curve); - this.currentPoint.set(aX, aY); - return this; + toColor(type) { + type = (type || this.state.format).toLowerCase(); + return this.toString(type); } - bezierCurveTo(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY) { - const curve = new CubicBezierCurve(this.currentPoint.clone(), new Vector2(aCP1x, aCP1y), new Vector2(aCP2x, aCP2y), new Vector2(aX, aY)); - this.curves.push(curve); - this.currentPoint.set(aX, aY); - return this; +} +class ColorPickerEditor extends EditorElement { + created() { + this.manager = new ColorManagerV2(); } - splineThru(pts) { - const npts = [this.currentPoint.clone()].concat(pts); - const curve = new SplineCurve(npts); - this.curves.push(curve); - this.currentPoint.copy(pts[pts.length - 1]); - return this; + initState() { + const value = this.props.value || "rgba(0, 0, 0, 1)"; + this.manager.initColor(value); + return { + key: this.props.key, + value: this.manager.toString() + }; } - arc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { - const x0 = this.currentPoint.x; - const y0 = this.currentPoint.y; - this.absarc(aX + x0, aY + y0, aRadius, aStartAngle, aEndAngle, aClockwise); - return this; + updateData(opt = {}) { + this.setState(opt, false); + this.modifyColorPicker(); } - absarc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { - this.absellipse(aX, aY, aRadius, aRadius, aStartAngle, aEndAngle, aClockwise); - return this; + modifyColorPicker() { + this.parent.trigger(this.props.onchange, this.props.key, this.state.value, this.props.params); } - ellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation) { - const x0 = this.currentPoint.x; - const y0 = this.currentPoint.y; - this.absellipse(aX + x0, aY + y0, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation); - return this; + initColor(newColor, format2) { + this.manager.changeColor(newColor, format2); + this.refresh(); } - absellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation) { - const curve = new EllipseCurve(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation); - if (this.curves.length > 0) { - const firstPoint = curve.getPoint(0); - if (!firstPoint.equals(this.currentPoint)) { - this.lineTo(firstPoint.x, firstPoint.y); - } - } - this.curves.push(curve); - const lastPoint = curve.getPoint(1); - this.currentPoint.copy(lastPoint); - return this; + changeColor(newColor, format2) { + this.manager.changeColor(newColor, format2); + this.refresh(); + this.updateData({ + value: this.manager.toColor() + }); } - copy(source2) { - super.copy(source2); - this.currentPoint.copy(source2.currentPoint); - return this; + [SUBSCRIBE_SELF("selectColorAssets")](key, color2) { + this.lastUpdateColor(color2); } - toJSON() { - const data = super.toJSON(); - data.currentPoint = this.currentPoint.toArray(); - return data; + changeFormat(format2) { + this.manager.changeFormat(format2); + this.setState({ + value: this.manager.toColor() + }, false); + this.modifyColorPicker(); + this.changeEndColor(); } - fromJSON(json) { - super.fromJSON(json); - this.currentPoint.fromArray(json.currentPoint); - return this; + lastUpdateColor(newColor, format2) { + this.manager.changeColor(newColor, format2); + this.refresh(); + this.setState({ + value: this.manager.toColor() + }, false); + this.modifyColorPicker(); + this.changeEndColor(); } -} -class LatheGeometry extends BufferGeometry { - constructor(points = [new Vector2(0, 0.5), new Vector2(0.5, 0), new Vector2(0, -0.5)], segments = 12, phiStart = 0, phiLength = Math.PI * 2) { - super(); - this.type = "LatheGeometry"; - this.parameters = { - points, - segments, - phiStart, - phiLength - }; - segments = Math.floor(segments); - phiLength = clamp(phiLength, 0, Math.PI * 2); - const indices = []; - const vertices = []; - const uvs = []; - const initNormals = []; - const normals = []; - const inverseSegments = 1 / segments; - const vertex2 = new Vector3(); - const uv = new Vector2(); - const normal = new Vector3(); - const curNormal = new Vector3(); - const prevNormal = new Vector3(); - let dx = 0; - let dy = 0; - for (let j = 0; j <= points.length - 1; j++) { - switch (j) { - case 0: - dx = points[j + 1].x - points[j].x; - dy = points[j + 1].y - points[j].y; - normal.x = dy * 1; - normal.y = -dx; - normal.z = dy * 0; - prevNormal.copy(normal); - normal.normalize(); - initNormals.push(normal.x, normal.y, normal.z); - break; - case points.length - 1: - initNormals.push(prevNormal.x, prevNormal.y, prevNormal.z); - break; - default: - dx = points[j + 1].x - points[j].x; - dy = points[j + 1].y - points[j].y; - normal.x = dy * 1; - normal.y = -dx; - normal.z = dy * 0; - curNormal.copy(normal); - normal.x += prevNormal.x; - normal.y += prevNormal.y; - normal.z += prevNormal.z; - normal.normalize(); - initNormals.push(normal.x, normal.y, normal.z); - prevNormal.copy(curNormal); - } - } - for (let i = 0; i <= segments; i++) { - const phi = phiStart + i * inverseSegments * phiLength; - const sin = Math.sin(phi); - const cos = Math.cos(phi); - for (let j = 0; j <= points.length - 1; j++) { - vertex2.x = points[j].x * sin; - vertex2.y = points[j].y; - vertex2.z = points[j].x * cos; - vertices.push(vertex2.x, vertex2.y, vertex2.z); - uv.x = i / segments; - uv.y = j / (points.length - 1); - uvs.push(uv.x, uv.y); - const x = initNormals[3 * j + 0] * sin; - const y = initNormals[3 * j + 1]; - const z = initNormals[3 * j + 0] * cos; - normals.push(x, y, z); - } - } - for (let i = 0; i < segments; i++) { - for (let j = 0; j < points.length - 1; j++) { - const base = j + i * points.length; - const a = base; - const b = base + points.length; - const c2 = base + points.length + 1; - const d = base + 1; - indices.push(a, b, d); - indices.push(c2, d, b); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - } - static fromJSON(data) { - return new LatheGeometry(data.points, data.segments, data.phiStart, data.phiLength); - } -} -class CapsuleGeometry extends LatheGeometry { - constructor(radius = 1, length2 = 1, capSegments = 4, radialSegments = 8) { - const path = new Path(); - path.absarc(0, -length2 / 2, radius, Math.PI * 1.5, 0); - path.absarc(0, length2 / 2, radius, 0, Math.PI * 0.5); - super(path.getPoints(capSegments), radialSegments); - this.type = "CapsuleGeometry"; - this.parameters = { - radius, - height: length2, - capSegments, - radialSegments - }; + changeEndColor() { + this.parent.trigger(this.props.onchangeend, this.props.key, this.state.value, this.props.params); } - static fromJSON(data) { - return new CapsuleGeometry(data.radius, data.length, data.capSegments, data.radialSegments); + refresh() { + const color2 = this.manager.toColor(); + this.children.$palette.setValue(this.manager.hsv.s, this.manager.hsv.v, this.manager.getHueColor()); + this.children.$opacity.setValue(this.manager.rgb, this.manager.alpha); + this.children.$hue.setValue(this.manager.hsv.h); + this.children.$colorview.setValue(color2); + this.children.$information.setValue(); } -} -class CircleGeometry extends BufferGeometry { - constructor(radius = 1, segments = 8, thetaStart = 0, thetaLength = Math.PI * 2) { - super(); - this.type = "CircleGeometry"; - this.parameters = { - radius, - segments, - thetaStart, - thetaLength - }; - segments = Math.max(3, segments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - const vertex2 = new Vector3(); - const uv = new Vector2(); - vertices.push(0, 0, 0); - normals.push(0, 0, 1); - uvs.push(0.5, 0.5); - for (let s = 0, i = 3; s <= segments; s++, i += 3) { - const segment = thetaStart + s / segments * thetaLength; - vertex2.x = radius * Math.cos(segment); - vertex2.y = radius * Math.sin(segment); - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normals.push(0, 0, 1); - uv.x = (vertices[i] / radius + 1) / 2; - uv.y = (vertices[i + 1] / radius + 1) / 2; - uvs.push(uv.x, uv.y); - } - for (let i = 1; i <= segments; i++) { - indices.push(i, i + 1, 0); - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - } - static fromJSON(data) { - return new CircleGeometry(data.radius, data.segments, data.thetaStart, data.thetaLength); - } -} -class CylinderGeometry extends BufferGeometry { - constructor(radiusTop = 1, radiusBottom = 1, height2 = 1, radialSegments = 8, heightSegments = 1, openEnded = false, thetaStart = 0, thetaLength = Math.PI * 2) { - super(); - this.type = "CylinderGeometry"; - this.parameters = { - radiusTop, - radiusBottom, - height: height2, - radialSegments, - heightSegments, - openEnded, - thetaStart, - thetaLength + components() { + return { + Hue, + Opacity, + ColorView, + Palette: ColorPalette, + ColorInformation }; - const scope = this; - radialSegments = Math.floor(radialSegments); - heightSegments = Math.floor(heightSegments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - let index2 = 0; - const indexArray = []; - const halfHeight = height2 / 2; - let groupStart = 0; - generateTorso(); - if (openEnded === false) { - if (radiusTop > 0) - generateCap(true); - if (radiusBottom > 0) - generateCap(false); - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - function generateTorso() { - const normal = new Vector3(); - const vertex2 = new Vector3(); - let groupCount = 0; - const slope = (radiusBottom - radiusTop) / height2; - for (let y = 0; y <= heightSegments; y++) { - const indexRow = []; - const v = y / heightSegments; - const radius = v * (radiusBottom - radiusTop) + radiusTop; - for (let x = 0; x <= radialSegments; x++) { - const u = x / radialSegments; - const theta = u * thetaLength + thetaStart; - const sinTheta = Math.sin(theta); - const cosTheta = Math.cos(theta); - vertex2.x = radius * sinTheta; - vertex2.y = -v * height2 + halfHeight; - vertex2.z = radius * cosTheta; - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normal.set(sinTheta, slope, cosTheta).normalize(); - normals.push(normal.x, normal.y, normal.z); - uvs.push(u, 1 - v); - indexRow.push(index2++); - } - indexArray.push(indexRow); - } - for (let x = 0; x < radialSegments; x++) { - for (let y = 0; y < heightSegments; y++) { - const a = indexArray[y][x]; - const b = indexArray[y + 1][x]; - const c2 = indexArray[y + 1][x + 1]; - const d = indexArray[y][x + 1]; - indices.push(a, b, d); - indices.push(b, c2, d); - groupCount += 6; - } - } - scope.addGroup(groupStart, groupCount, 0); - groupStart += groupCount; - } - function generateCap(top2) { - const centerIndexStart = index2; - const uv = new Vector2(); - const vertex2 = new Vector3(); - let groupCount = 0; - const radius = top2 === true ? radiusTop : radiusBottom; - const sign2 = top2 === true ? 1 : -1; - for (let x = 1; x <= radialSegments; x++) { - vertices.push(0, halfHeight * sign2, 0); - normals.push(0, sign2, 0); - uvs.push(0.5, 0.5); - index2++; - } - const centerIndexEnd = index2; - for (let x = 0; x <= radialSegments; x++) { - const u = x / radialSegments; - const theta = u * thetaLength + thetaStart; - const cosTheta = Math.cos(theta); - const sinTheta = Math.sin(theta); - vertex2.x = radius * sinTheta; - vertex2.y = halfHeight * sign2; - vertex2.z = radius * cosTheta; - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normals.push(0, sign2, 0); - uv.x = cosTheta * 0.5 + 0.5; - uv.y = sinTheta * 0.5 * sign2 + 0.5; - uvs.push(uv.x, uv.y); - index2++; - } - for (let x = 0; x < radialSegments; x++) { - const c2 = centerIndexStart + x; - const i = centerIndexEnd + x; - if (top2 === true) { - indices.push(i, i + 1, c2); - } else { - indices.push(i + 1, i, c2); - } - groupCount += 3; - } - scope.addGroup(groupStart, groupCount, top2 === true ? 1 : 2); - groupStart += groupCount; - } } - static fromJSON(data) { - return new CylinderGeometry(data.radiusTop, data.radiusBottom, data.height, data.radialSegments, data.heightSegments, data.openEnded, data.thetaStart, data.thetaLength); + template() { + return ` +
+
+ ${createComponent("Palette", { ref: "$palette" })} +
+ ${createComponent("Hue", { ref: "$hue" })} + ${createComponent("Opacity", { ref: "$opacity" })} +
+ ${createComponent("ColorView", { + ref: "$colorview" + })} +
+ ${createComponent("ColorInformation", { + ref: "$information" + })} + ${this.$context.injectManager.generate("colorpicker")} + ${createComponent("ColorAssetsEditor", { + ref: "$colorAsset", + key: "colorAssets", + onchange: "selectColorAssets" + })} +
+
+ `; } } -class ConeGeometry extends CylinderGeometry { - constructor(radius = 1, height2 = 1, radialSegments = 8, heightSegments = 1, openEnded = false, thetaStart = 0, thetaLength = Math.PI * 2) { - super(0, radius, height2, radialSegments, heightSegments, openEnded, thetaStart, thetaLength); - this.type = "ConeGeometry"; - this.parameters = { - radius, - height: height2, - radialSegments, - heightSegments, - openEnded, - thetaStart, - thetaLength - }; +var ColorPickerPopup$1 = ""; +class ColorPickerPopup extends BasePopup { + getTitle() { + return this.$i18n("colorpicker.popup.title"); } - static fromJSON(data) { - return new ConeGeometry(data.radius, data.height, data.radialSegments, data.heightSegments, data.openEnded, data.thetaStart, data.thetaLength); + getClassName() { + return "compact elf--colorpicker-popup"; } -} -class PolyhedronGeometry extends BufferGeometry { - constructor(vertices = [], indices = [], radius = 1, detail = 0) { - super(); - this.type = "PolyhedronGeometry"; - this.parameters = { - vertices, - indices, - radius, - detail + initState() { + return { + color: "rgba(0, 0, 0, 1)" }; - const vertexBuffer = []; - const uvBuffer = []; - subdivide(detail); - applyRadius(radius); - generateUVs(); - this.setAttribute("position", new Float32BufferAttribute(vertexBuffer, 3)); - this.setAttribute("normal", new Float32BufferAttribute(vertexBuffer.slice(), 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvBuffer, 2)); - if (detail === 0) { - this.computeVertexNormals(); - } else { - this.normalizeNormals(); - } - function subdivide(detail2) { - const a = new Vector3(); - const b = new Vector3(); - const c2 = new Vector3(); - for (let i = 0; i < indices.length; i += 3) { - getVertexByIndex(indices[i + 0], a); - getVertexByIndex(indices[i + 1], b); - getVertexByIndex(indices[i + 2], c2); - subdivideFace(a, b, c2, detail2); - } - } - function subdivideFace(a, b, c2, detail2) { - const cols = detail2 + 1; - const v = []; - for (let i = 0; i <= cols; i++) { - v[i] = []; - const aj = a.clone().lerp(c2, i / cols); - const bj = b.clone().lerp(c2, i / cols); - const rows = cols - i; - for (let j = 0; j <= rows; j++) { - if (j === 0 && i === cols) { - v[i][j] = aj; - } else { - v[i][j] = aj.clone().lerp(bj, j / rows); - } - } - } - for (let i = 0; i < cols; i++) { - for (let j = 0; j < 2 * (cols - i) - 1; j++) { - const k = Math.floor(j / 2); - if (j % 2 === 0) { - pushVertex(v[i][k + 1]); - pushVertex(v[i + 1][k]); - pushVertex(v[i][k]); - } else { - pushVertex(v[i][k + 1]); - pushVertex(v[i + 1][k + 1]); - pushVertex(v[i + 1][k]); - } - } - } - } - function applyRadius(radius2) { - const vertex2 = new Vector3(); - for (let i = 0; i < vertexBuffer.length; i += 3) { - vertex2.x = vertexBuffer[i + 0]; - vertex2.y = vertexBuffer[i + 1]; - vertex2.z = vertexBuffer[i + 2]; - vertex2.normalize().multiplyScalar(radius2); - vertexBuffer[i + 0] = vertex2.x; - vertexBuffer[i + 1] = vertex2.y; - vertexBuffer[i + 2] = vertex2.z; - } - } - function generateUVs() { - const vertex2 = new Vector3(); - for (let i = 0; i < vertexBuffer.length; i += 3) { - vertex2.x = vertexBuffer[i + 0]; - vertex2.y = vertexBuffer[i + 1]; - vertex2.z = vertexBuffer[i + 2]; - const u = azimuth(vertex2) / 2 / Math.PI + 0.5; - const v = inclination(vertex2) / Math.PI + 0.5; - uvBuffer.push(u, 1 - v); - } - correctUVs(); - correctSeam(); - } - function correctSeam() { - for (let i = 0; i < uvBuffer.length; i += 6) { - const x0 = uvBuffer[i + 0]; - const x1 = uvBuffer[i + 2]; - const x2 = uvBuffer[i + 4]; - const max = Math.max(x0, x1, x2); - const min = Math.min(x0, x1, x2); - if (max > 0.9 && min < 0.1) { - if (x0 < 0.2) - uvBuffer[i + 0] += 1; - if (x1 < 0.2) - uvBuffer[i + 2] += 1; - if (x2 < 0.2) - uvBuffer[i + 4] += 1; - } - } + } + updateData(opt = {}) { + this.setState(opt, false); + if (this.state.target) { + this.state.target.trigger(this.state.changeEvent, this.state.color, this.params); } - function pushVertex(vertex2) { - vertexBuffer.push(vertex2.x, vertex2.y, vertex2.z); - } - function getVertexByIndex(index2, vertex2) { - const stride = index2 * 3; - vertex2.x = vertices[stride + 0]; - vertex2.y = vertices[stride + 1]; - vertex2.z = vertices[stride + 2]; - } - function correctUVs() { - const a = new Vector3(); - const b = new Vector3(); - const c2 = new Vector3(); - const centroid = new Vector3(); - const uvA = new Vector2(); - const uvB = new Vector2(); - const uvC = new Vector2(); - for (let i = 0, j = 0; i < vertexBuffer.length; i += 9, j += 6) { - a.set(vertexBuffer[i + 0], vertexBuffer[i + 1], vertexBuffer[i + 2]); - b.set(vertexBuffer[i + 3], vertexBuffer[i + 4], vertexBuffer[i + 5]); - c2.set(vertexBuffer[i + 6], vertexBuffer[i + 7], vertexBuffer[i + 8]); - uvA.set(uvBuffer[j + 0], uvBuffer[j + 1]); - uvB.set(uvBuffer[j + 2], uvBuffer[j + 3]); - uvC.set(uvBuffer[j + 4], uvBuffer[j + 5]); - centroid.copy(a).add(b).add(c2).divideScalar(3); - const azi = azimuth(centroid); - correctUV(uvA, j + 0, a, azi); - correctUV(uvB, j + 2, b, azi); - correctUV(uvC, j + 4, c2, azi); - } - } - function correctUV(uv, stride, vector, azimuth2) { - if (azimuth2 < 0 && uv.x === 1) { - uvBuffer[stride] = uv.x - 1; - } - if (vector.x === 0 && vector.z === 0) { - uvBuffer[stride] = azimuth2 / 2 / Math.PI + 0.5; - } - } - function azimuth(vector) { - return Math.atan2(vector.z, -vector.x); - } - function inclination(vector) { - return Math.atan2(-vector.y, Math.sqrt(vector.x * vector.x + vector.z * vector.z)); - } - } - static fromJSON(data) { - return new PolyhedronGeometry(data.vertices, data.indices, data.radius, data.details); - } -} -class DodecahedronGeometry extends PolyhedronGeometry { - constructor(radius = 1, detail = 0) { - const t = (1 + Math.sqrt(5)) / 2; - const r = 1 / t; - const vertices = [ - -1, - -1, - -1, - -1, - -1, - 1, - -1, - 1, - -1, - -1, - 1, - 1, - 1, - -1, - -1, - 1, - -1, - 1, - 1, - 1, - -1, - 1, - 1, - 1, - 0, - -r, - -t, - 0, - -r, - t, - 0, - r, - -t, - 0, - r, - t, - -r, - -t, - 0, - -r, - t, - 0, - r, - -t, - 0, - r, - t, - 0, - -t, - 0, - -r, - t, - 0, - -r, - -t, - 0, - r, - t, - 0, - r - ]; - const indices = [ - 3, - 11, - 7, - 3, - 7, - 15, - 3, - 15, - 13, - 7, - 19, - 17, - 7, - 17, - 6, - 7, - 6, - 15, - 17, - 4, - 8, - 17, - 8, - 10, - 17, - 10, - 6, - 8, - 0, - 16, - 8, - 16, - 2, - 8, - 2, - 10, - 0, - 12, - 1, - 0, - 1, - 18, - 0, - 18, - 16, - 6, - 10, - 2, - 6, - 2, - 13, - 6, - 13, - 15, - 2, - 16, - 18, - 2, - 18, - 3, - 2, - 3, - 13, - 18, - 1, - 9, - 18, - 9, - 11, - 18, - 11, - 3, - 4, - 14, - 12, - 4, - 12, - 0, - 4, - 0, - 8, - 11, - 9, - 5, - 11, - 5, - 19, - 11, - 19, - 7, - 19, - 5, - 14, - 19, - 14, - 4, - 19, - 4, - 17, - 1, - 12, - 14, - 1, - 14, - 5, - 1, - 5, - 9 - ]; - super(vertices, indices, radius, detail); - this.type = "DodecahedronGeometry"; - this.parameters = { - radius, - detail - }; } - static fromJSON(data) { - return new DodecahedronGeometry(data.radius, data.detail); - } -} -const _v0 = new Vector3(); -const _v1$1 = new Vector3(); -const _normal = new Vector3(); -const _triangle = new Triangle(); -class EdgesGeometry extends BufferGeometry { - constructor(geometry = null, thresholdAngle = 1) { - super(); - this.type = "EdgesGeometry"; - this.parameters = { - geometry, - thresholdAngle - }; - if (geometry !== null) { - const precisionPoints = 4; - const precision = Math.pow(10, precisionPoints); - const thresholdDot = Math.cos(DEG2RAD * thresholdAngle); - const indexAttr = geometry.getIndex(); - const positionAttr = geometry.getAttribute("position"); - const indexCount = indexAttr ? indexAttr.count : positionAttr.count; - const indexArr = [0, 0, 0]; - const vertKeys = ["a", "b", "c"]; - const hashes = new Array(3); - const edgeData = {}; - const vertices = []; - for (let i = 0; i < indexCount; i += 3) { - if (indexAttr) { - indexArr[0] = indexAttr.getX(i); - indexArr[1] = indexAttr.getX(i + 1); - indexArr[2] = indexAttr.getX(i + 2); - } else { - indexArr[0] = i; - indexArr[1] = i + 1; - indexArr[2] = i + 2; - } - const { a, b, c: c2 } = _triangle; - a.fromBufferAttribute(positionAttr, indexArr[0]); - b.fromBufferAttribute(positionAttr, indexArr[1]); - c2.fromBufferAttribute(positionAttr, indexArr[2]); - _triangle.getNormal(_normal); - hashes[0] = `${Math.round(a.x * precision)},${Math.round(a.y * precision)},${Math.round(a.z * precision)}`; - hashes[1] = `${Math.round(b.x * precision)},${Math.round(b.y * precision)},${Math.round(b.z * precision)}`; - hashes[2] = `${Math.round(c2.x * precision)},${Math.round(c2.y * precision)},${Math.round(c2.z * precision)}`; - if (hashes[0] === hashes[1] || hashes[1] === hashes[2] || hashes[2] === hashes[0]) { - continue; - } - for (let j = 0; j < 3; j++) { - const jNext = (j + 1) % 3; - const vecHash0 = hashes[j]; - const vecHash1 = hashes[jNext]; - const v0 = _triangle[vertKeys[j]]; - const v1 = _triangle[vertKeys[jNext]]; - const hash = `${vecHash0}_${vecHash1}`; - const reverseHash = `${vecHash1}_${vecHash0}`; - if (reverseHash in edgeData && edgeData[reverseHash]) { - if (_normal.dot(edgeData[reverseHash].normal) <= thresholdDot) { - vertices.push(v0.x, v0.y, v0.z); - vertices.push(v1.x, v1.y, v1.z); - } - edgeData[reverseHash] = null; - } else if (!(hash in edgeData)) { - edgeData[hash] = { - index0: indexArr[j], - index1: indexArr[jNext], - normal: _normal.clone() - }; - } - } - } - for (const key in edgeData) { - if (edgeData[key]) { - const { index0, index1 } = edgeData[key]; - _v0.fromBufferAttribute(positionAttr, index0); - _v1$1.fromBufferAttribute(positionAttr, index1); - vertices.push(_v0.x, _v0.y, _v0.z); - vertices.push(_v1$1.x, _v1$1.y, _v1$1.z); - } - } - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); + updateEndData(opt = {}) { + this.setState(opt, false); + if (this.state.target) { + this.state.target.trigger(this.state.changeEndEvent, this.state.color, this.params); } } -} -class Shape extends Path { - constructor(points) { - super(points); - this.uuid = generateUUID(); - this.type = "Shape"; - this.holes = []; + getBody() { + return ` +
+
+ ${createComponent("EmbedColorPicker", { + ref: "$color", + value: this.state.color, + onchange: (color2) => this.updateData({ color: color2 }), + onchangeend: (color2) => this.updateEndData({ color: color2 }) + })} +
+ `; + } + [LOAD("$projectColors")]() { + var project2 = this.$context.selection.currentProject || { colors: [] }; + var colors2 = project2.colors; + return colors2.map((color2) => { + return ` +
+
+
`; + }); + } + [CLICK("$projectColors .color-view")](e) { + this.updateData({ + color: e.$dt.attr("data-color") + }); + this.children.$color.setValue(this.state.color); } - getPointsHoles(divisions) { - const holesPts = []; - for (let i = 0, l = this.holes.length; i < l; i++) { - holesPts[i] = this.holes[i].getPoints(divisions); + [SUBSCRIBE("showColorPickerPopup")](data, params, rect2) { + data.changeEvent = data.changeEvent || "changeFillPopup"; + if (!(data.target instanceof UIElement)) { + throw new Error("ColorPicker needs data.target"); } - return holesPts; + this.params = params; + this.setState(data, false); + this.children.$color.setValue(this.state.color); + this.showByRect(this.makeRect(245, 500, rect2)); } - extractPoints(divisions) { + [SUBSCRIBE("hideColorPickerPopup")]() { + this.hide(); + } +} +class EmbedColorPicker extends EditorElement { + initState() { return { - shape: this.getPoints(divisions), - holes: this.getPointsHoles(divisions) + value: this.props.value || "rgba(0, 0, 0, 1)" }; } - copy(source2) { - super.copy(source2); - this.holes = []; - for (let i = 0, l = source2.holes.length; i < l; i++) { - const hole = source2.holes[i]; - this.holes.push(hole.clone()); - } - return this; + template() { + return ` +
+ ${createComponent("ColorPickerEditor", { + ref: "$colorpicker", + key: "colorpicker", + value: this.state.value, + onchange: "localChangeColor", + onchangeend: "localLastUpdate" + })} +
+ `; } - toJSON() { - const data = super.toJSON(); - data.uuid = this.uuid; - data.holes = []; - for (let i = 0, l = this.holes.length; i < l; i++) { - const hole = this.holes[i]; - data.holes.push(hole.toJSON()); - } - return data; + [SUBSCRIBE_SELF("localChangeColor")](key, color2) { + this.parent.trigger(this.props.onchange, color2); } - fromJSON(json) { - super.fromJSON(json); - this.uuid = json.uuid; - this.holes = []; - for (let i = 0, l = json.holes.length; i < l; i++) { - const hole = json.holes[i]; - this.holes.push(new Path().fromJSON(hole)); - } - return this; + [SUBSCRIBE_SELF("localLastUpdate")](key, color2) { + this.parent.trigger(this.props.onchangeend, color2); } -} -const Earcut = { - triangulate: function(data, holeIndices, dim = 2) { - const hasHoles = holeIndices && holeIndices.length; - const outerLen = hasHoles ? holeIndices[0] * dim : data.length; - let outerNode = linkedList(data, 0, outerLen, dim, true); - const triangles = []; - if (!outerNode || outerNode.next === outerNode.prev) - return triangles; - let minX, minY, maxX, maxY, x, y, invSize; - if (hasHoles) - outerNode = eliminateHoles(data, holeIndices, outerNode, dim); - if (data.length > 80 * dim) { - minX = maxX = data[0]; - minY = maxY = data[1]; - for (let i = dim; i < outerLen; i += dim) { - x = data[i]; - y = data[i + 1]; - if (x < minX) - minX = x; - if (y < minY) - minY = y; - if (x > maxX) - maxX = x; - if (y > maxY) - maxY = y; - } - invSize = Math.max(maxX - minX, maxY - minY); - invSize = invSize !== 0 ? 1 / invSize : 0; - } - earcutLinked(outerNode, triangles, dim, minX, minY, invSize); - return triangles; - } -}; -function linkedList(data, start2, end2, dim, clockwise) { - let i, last; - if (clockwise === signedArea(data, start2, end2, dim) > 0) { - for (i = start2; i < end2; i += dim) - last = insertNode(i, data[i], data[i + 1], last); - } else { - for (i = end2 - dim; i >= start2; i -= dim) - last = insertNode(i, data[i], data[i + 1], last); + setValue(color2) { + this.state.value = color2; + this.children.$colorpicker.initColor(color2); } - if (last && equals(last, last.next)) { - removeNode(last); - last = last.next; + refresh() { + this.children.$colorpicker.initColor(this.props.value); } - return last; } -function filterPoints(start2, end2) { - if (!start2) - return start2; - if (!end2) - end2 = start2; - let p = start2, again; - do { - again = false; - if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) { - removeNode(p); - p = end2 = p.prev; - if (p === p.next) - break; - again = true; - } else { - p = p.next; - } - } while (again || p !== end2); - return end2; +function color(editor) { + editor.registerElement({ + ColorPickerEditor, + EmbedColorPicker + }); + editor.registerUI("popup", { + ColorPickerPopup + }); } -function earcutLinked(ear, triangles, dim, minX, minY, invSize, pass) { - if (!ear) - return; - if (!pass && invSize) - indexCurve(ear, minX, minY, invSize); - let stop = ear, prev, next; - while (ear.prev !== ear.next) { - prev = ear.prev; - next = ear.next; - if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) { - triangles.push(prev.i / dim); - triangles.push(ear.i / dim); - triangles.push(next.i / dim); - removeNode(ear); - ear = next.next; - stop = next.next; - continue; - } - ear = next; - if (ear === stop) { - if (!pass) { - earcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1); - } else if (pass === 1) { - ear = cureLocalIntersections(filterPoints(ear), triangles, dim); - earcutLinked(ear, triangles, dim, minX, minY, invSize, 2); - } else if (pass === 2) { - splitEarcut(ear, triangles, dim, minX, minY, invSize); - } - break; - } +var ComponentPopup$1 = ""; +class ComponentPopup extends BasePopup { + getClassName() { + return "component-property w(800)"; } -} -function isEar(ear) { - const a = ear.prev, b = ear, c2 = ear.next; - if (area(a, b, c2) >= 0) - return false; - let p = ear.next.next; - while (p !== ear.prev) { - if (pointInTriangle(a.x, a.y, b.x, b.y, c2.x, c2.y, p.x, p.y) && area(p.prev, p, p.next) >= 0) - return false; - p = p.next; + getTitle() { + return "Component"; } - return true; -} -function isEarHashed(ear, minX, minY, invSize) { - const a = ear.prev, b = ear, c2 = ear.next; - if (area(a, b, c2) >= 0) - return false; - const minTX = a.x < b.x ? a.x < c2.x ? a.x : c2.x : b.x < c2.x ? b.x : c2.x, minTY = a.y < b.y ? a.y < c2.y ? a.y : c2.y : b.y < c2.y ? b.y : c2.y, maxTX = a.x > b.x ? a.x > c2.x ? a.x : c2.x : b.x > c2.x ? b.x : c2.x, maxTY = a.y > b.y ? a.y > c2.y ? a.y : c2.y : b.y > c2.y ? b.y : c2.y; - const minZ = zOrder(minTX, minTY, minX, minY, invSize), maxZ = zOrder(maxTX, maxTY, minX, minY, invSize); - let p = ear.prevZ, n = ear.nextZ; - while (p && p.z >= minZ && n && n.z <= maxZ) { - if (p !== ear.prev && p !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c2.x, c2.y, p.x, p.y) && area(p.prev, p, p.next) >= 0) - return false; - p = p.prevZ; - if (n !== ear.prev && n !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c2.x, c2.y, n.x, n.y) && area(n.prev, n, n.next) >= 0) - return false; - n = n.nextZ; + initState() { + return { + title: "", + inspector: [] + }; } - while (p && p.z >= minZ) { - if (p !== ear.prev && p !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c2.x, c2.y, p.x, p.y) && area(p.prev, p, p.next) >= 0) - return false; - p = p.prevZ; + refresh() { + this.setTitle(this.state.title || this.getTitle()); + this.load(); } - while (n && n.z <= maxZ) { - if (n !== ear.prev && n !== ear.next && pointInTriangle(a.x, a.y, b.x, b.y, c2.x, c2.y, n.x, n.y) && area(n.prev, n, n.next) >= 0) - return false; - n = n.nextZ; + getBody() { + return ` +
+ `; } - return true; -} -function cureLocalIntersections(start2, triangles, dim) { - let p = start2; - do { - const a = p.prev, b = p.next.next; - if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) { - triangles.push(a.i / dim); - triangles.push(p.i / dim); - triangles.push(b.i / dim); - removeNode(p); - removeNode(p.next); - p = start2 = b; - } - p = p.next; - } while (p !== start2); - return filterPoints(p); -} -function splitEarcut(start2, triangles, dim, minX, minY, invSize) { - let a = start2; - do { - let b = a.next.next; - while (b !== a.prev) { - if (a.i !== b.i && isValidDiagonal(a, b)) { - let c2 = splitPolygon(a, b); - a = filterPoints(a, a.next); - c2 = filterPoints(c2, c2.next); - earcutLinked(a, triangles, dim, minX, minY, invSize); - earcutLinked(c2, triangles, dim, minX, minY, invSize); - return; - } - b = b.next; - } - a = a.next; - } while (a !== start2); -} -function eliminateHoles(data, holeIndices, outerNode, dim) { - const queue = []; - let i, len2, start2, end2, list2; - for (i = 0, len2 = holeIndices.length; i < len2; i++) { - start2 = holeIndices[i] * dim; - end2 = i < len2 - 1 ? holeIndices[i + 1] * dim : data.length; - list2 = linkedList(data, start2, end2, dim, false); - if (list2 === list2.next) - list2.steiner = true; - queue.push(getLeftmost(list2)); - } - queue.sort(compareX); - for (i = 0; i < queue.length; i++) { - eliminateHole(queue[i], outerNode); - outerNode = filterPoints(outerNode, outerNode.next); - } - return outerNode; -} -function compareX(a, b) { - return a.x - b.x; -} -function eliminateHole(hole, outerNode) { - outerNode = findHoleBridge(hole, outerNode); - if (outerNode) { - const b = splitPolygon(outerNode, hole); - filterPoints(outerNode, outerNode.next); - filterPoints(b, b.next); - } -} -function findHoleBridge(hole, outerNode) { - let p = outerNode; - const hx = hole.x; - const hy = hole.y; - let qx = -Infinity, m; - do { - if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) { - const x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y); - if (x <= hx && x > qx) { - qx = x; - if (x === hx) { - if (hy === p.y) - return p; - if (hy === p.next.y) - return p.next; - } - m = p.x < p.next.x ? p : p.next; - } - } - p = p.next; - } while (p !== outerNode); - if (!m) - return null; - if (hx === qx) - return m; - const stop = m, mx = m.x, my = m.y; - let tanMin = Infinity, tan; - p = m; - do { - if (hx >= p.x && p.x >= mx && hx !== p.x && pointInTriangle(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) { - tan = Math.abs(hy - p.y) / (hx - p.x); - if (locallyInside(p, hole) && (tan < tanMin || tan === tanMin && (p.x > m.x || p.x === m.x && sectorContainsSector(m, p)))) { - m = p; - tanMin = tan; - } - } - p = p.next; - } while (p !== stop); - return m; -} -function sectorContainsSector(m, p) { - return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0; -} -function indexCurve(start2, minX, minY, invSize) { - let p = start2; - do { - if (p.z === null) - p.z = zOrder(p.x, p.y, minX, minY, invSize); - p.prevZ = p.prev; - p.nextZ = p.next; - p = p.next; - } while (p !== start2); - p.prevZ.nextZ = null; - p.prevZ = null; - sortLinked(p); -} -function sortLinked(list2) { - let i, p, q, e, tail, numMerges, pSize, qSize, inSize = 1; - do { - p = list2; - list2 = null; - tail = null; - numMerges = 0; - while (p) { - numMerges++; - q = p; - pSize = 0; - for (i = 0; i < inSize; i++) { - pSize++; - q = q.nextZ; - if (!q) - break; + [BIND("$body")]() { + return { + style: { + width: this.state.width || 250 } - qSize = inSize; - while (pSize > 0 || qSize > 0 && q) { - if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) { - e = p; - p = p.nextZ; - pSize--; - } else { - e = q; - q = q.nextZ; - qSize--; - } - if (tail) - tail.nextZ = e; - else - list2 = e; - e.prevZ = tail; - tail = e; - } - p = q; - } - tail.nextZ = null; - inSize *= 2; - } while (numMerges > 1); - return list2; -} -function zOrder(x, y, minX, minY, invSize) { - x = 32767 * (x - minX) * invSize; - y = 32767 * (y - minY) * invSize; - x = (x | x << 8) & 16711935; - x = (x | x << 4) & 252645135; - x = (x | x << 2) & 858993459; - x = (x | x << 1) & 1431655765; - y = (y | y << 8) & 16711935; - y = (y | y << 4) & 252645135; - y = (y | y << 2) & 858993459; - y = (y | y << 1) & 1431655765; - return x | y << 1; -} -function getLeftmost(start2) { - let p = start2, leftmost = start2; - do { - if (p.x < leftmost.x || p.x === leftmost.x && p.y < leftmost.y) - leftmost = p; - p = p.next; - } while (p !== start2); - return leftmost; -} -function pointInTriangle(ax, ay, bx, by, cx, cy, px2, py2) { - return (cx - px2) * (ay - py2) - (ax - px2) * (cy - py2) >= 0 && (ax - px2) * (by - py2) - (bx - px2) * (ay - py2) >= 0 && (bx - px2) * (cy - py2) - (cx - px2) * (by - py2) >= 0; -} -function isValidDiagonal(a, b) { - return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && (locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && (area(a.prev, a, b.prev) || area(a, b.prev, b)) || equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0); -} -function area(p, q, r) { - return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y); -} -function equals(p1, p2) { - return p1.x === p2.x && p1.y === p2.y; -} -function intersects(p1, q1, p2, q2) { - const o1 = sign(area(p1, q1, p2)); - const o2 = sign(area(p1, q1, q2)); - const o3 = sign(area(p2, q2, p1)); - const o4 = sign(area(p2, q2, q1)); - if (o1 !== o2 && o3 !== o4) - return true; - if (o1 === 0 && onSegment(p1, p2, q1)) - return true; - if (o2 === 0 && onSegment(p1, q2, q1)) - return true; - if (o3 === 0 && onSegment(p2, p1, q2)) - return true; - if (o4 === 0 && onSegment(p2, q1, q2)) - return true; - return false; -} -function onSegment(p, q, r) { - return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y); -} -function sign(num) { - return num > 0 ? 1 : num < 0 ? -1 : 0; -} -function intersectsPolygon(a, b) { - let p = a; - do { - if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i && intersects(p, p.next, a, b)) - return true; - p = p.next; - } while (p !== a); - return false; -} -function locallyInside(a, b) { - return area(a.prev, a, a.next) < 0 ? area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 : area(a, b, a.prev) < 0 || area(a, a.next, b) < 0; -} -function middleInside(a, b) { - let p = a, inside = false; - const px2 = (a.x + b.x) / 2, py2 = (a.y + b.y) / 2; - do { - if (p.y > py2 !== p.next.y > py2 && p.next.y !== p.y && px2 < (p.next.x - p.x) * (py2 - p.y) / (p.next.y - p.y) + p.x) - inside = !inside; - p = p.next; - } while (p !== a); - return inside; -} -function splitPolygon(a, b) { - const a2 = new Node(a.i, a.x, a.y), b2 = new Node(b.i, b.x, b.y), an = a.next, bp = b.prev; - a.next = b; - b.prev = a; - a2.next = an; - an.prev = a2; - b2.next = a2; - a2.prev = b2; - bp.next = b2; - b2.prev = bp; - return b2; -} -function insertNode(i, x, y, last) { - const p = new Node(i, x, y); - if (!last) { - p.prev = p; - p.next = p; - } else { - p.next = last.next; - p.prev = last; - last.next.prev = p; - last.next = p; - } - return p; -} -function removeNode(p) { - p.next.prev = p.prev; - p.prev.next = p.next; - if (p.prevZ) - p.prevZ.nextZ = p.nextZ; - if (p.nextZ) - p.nextZ.prevZ = p.prevZ; -} -function Node(i, x, y) { - this.i = i; - this.x = x; - this.y = y; - this.prev = null; - this.next = null; - this.z = null; - this.prevZ = null; - this.nextZ = null; - this.steiner = false; -} -function signedArea(data, start2, end2, dim) { - let sum = 0; - for (let i = start2, j = end2 - dim; i < end2; i += dim) { - sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]); - j = i; - } - return sum; -} -class ShapeUtils { - static area(contour) { - const n = contour.length; - let a = 0; - for (let p = n - 1, q = 0; q < n; p = q++) { - a += contour[p].x * contour[q].y - contour[q].x * contour[p].y; - } - return a * 0.5; - } - static isClockWise(pts) { - return ShapeUtils.area(pts) < 0; - } - static triangulateShape(contour, holes) { - const vertices = []; - const holeIndices = []; - const faces = []; - removeDupEndPts(contour); - addContour(vertices, contour); - let holeIndex = contour.length; - holes.forEach(removeDupEndPts); - for (let i = 0; i < holes.length; i++) { - holeIndices.push(holeIndex); - holeIndex += holes[i].length; - addContour(vertices, holes[i]); - } - const triangles = Earcut.triangulate(vertices, holeIndices); - for (let i = 0; i < triangles.length; i += 3) { - faces.push(triangles.slice(i, i + 3)); - } - return faces; - } -} -function removeDupEndPts(points) { - const l = points.length; - if (l > 2 && points[l - 1].equals(points[0])) { - points.pop(); - } -} -function addContour(vertices, contour) { - for (let i = 0; i < contour.length; i++) { - vertices.push(contour[i].x); - vertices.push(contour[i].y); - } -} -class ExtrudeGeometry extends BufferGeometry { - constructor(shapes = new Shape([new Vector2(0.5, 0.5), new Vector2(-0.5, 0.5), new Vector2(-0.5, -0.5), new Vector2(0.5, -0.5)]), options2 = {}) { - super(); - this.type = "ExtrudeGeometry"; - this.parameters = { - shapes, - options: options2 }; - shapes = Array.isArray(shapes) ? shapes : [shapes]; - const scope = this; - const verticesArray = []; - const uvArray = []; - for (let i = 0, l = shapes.length; i < l; i++) { - const shape2 = shapes[i]; - addShape(shape2); - } - this.setAttribute("position", new Float32BufferAttribute(verticesArray, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvArray, 2)); - this.computeVertexNormals(); - function addShape(shape2) { - const placeholder = []; - const curveSegments = options2.curveSegments !== void 0 ? options2.curveSegments : 12; - const steps = options2.steps !== void 0 ? options2.steps : 1; - let depth = options2.depth !== void 0 ? options2.depth : 1; - let bevelEnabled = options2.bevelEnabled !== void 0 ? options2.bevelEnabled : true; - let bevelThickness = options2.bevelThickness !== void 0 ? options2.bevelThickness : 0.2; - let bevelSize = options2.bevelSize !== void 0 ? options2.bevelSize : bevelThickness - 0.1; - let bevelOffset = options2.bevelOffset !== void 0 ? options2.bevelOffset : 0; - let bevelSegments = options2.bevelSegments !== void 0 ? options2.bevelSegments : 3; - const extrudePath = options2.extrudePath; - const uvgen = options2.UVGenerator !== void 0 ? options2.UVGenerator : WorldUVGenerator; - if (options2.amount !== void 0) { - console.warn("THREE.ExtrudeBufferGeometry: amount has been renamed to depth."); - depth = options2.amount; - } - let extrudePts, extrudeByPath = false; - let splineTube, binormal, normal, position2; - if (extrudePath) { - extrudePts = extrudePath.getSpacedPoints(steps); - extrudeByPath = true; - bevelEnabled = false; - splineTube = extrudePath.computeFrenetFrames(steps, false); - binormal = new Vector3(); - normal = new Vector3(); - position2 = new Vector3(); - } - if (!bevelEnabled) { - bevelSegments = 0; - bevelThickness = 0; - bevelSize = 0; - bevelOffset = 0; - } - const shapePoints = shape2.extractPoints(curveSegments); - let vertices = shapePoints.shape; - const holes = shapePoints.holes; - const reverse = !ShapeUtils.isClockWise(vertices); - if (reverse) { - vertices = vertices.reverse(); - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - if (ShapeUtils.isClockWise(ahole)) { - holes[h] = ahole.reverse(); - } - } - } - const faces = ShapeUtils.triangulateShape(vertices, holes); - const contour = vertices; - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - vertices = vertices.concat(ahole); - } - function scalePt2(pt, vec, size2) { - if (!vec) - console.error("THREE.ExtrudeGeometry: vec does not exist"); - return vec.clone().multiplyScalar(size2).add(pt); - } - const vlen = vertices.length, flen = faces.length; - function getBevelVec(inPt, inPrev, inNext) { - let v_trans_x, v_trans_y, shrink_by; - const v_prev_x = inPt.x - inPrev.x, v_prev_y = inPt.y - inPrev.y; - const v_next_x = inNext.x - inPt.x, v_next_y = inNext.y - inPt.y; - const v_prev_lensq = v_prev_x * v_prev_x + v_prev_y * v_prev_y; - const collinear0 = v_prev_x * v_next_y - v_prev_y * v_next_x; - if (Math.abs(collinear0) > Number.EPSILON) { - const v_prev_len = Math.sqrt(v_prev_lensq); - const v_next_len = Math.sqrt(v_next_x * v_next_x + v_next_y * v_next_y); - const ptPrevShift_x = inPrev.x - v_prev_y / v_prev_len; - const ptPrevShift_y = inPrev.y + v_prev_x / v_prev_len; - const ptNextShift_x = inNext.x - v_next_y / v_next_len; - const ptNextShift_y = inNext.y + v_next_x / v_next_len; - const sf = ((ptNextShift_x - ptPrevShift_x) * v_next_y - (ptNextShift_y - ptPrevShift_y) * v_next_x) / (v_prev_x * v_next_y - v_prev_y * v_next_x); - v_trans_x = ptPrevShift_x + v_prev_x * sf - inPt.x; - v_trans_y = ptPrevShift_y + v_prev_y * sf - inPt.y; - const v_trans_lensq = v_trans_x * v_trans_x + v_trans_y * v_trans_y; - if (v_trans_lensq <= 2) { - return new Vector2(v_trans_x, v_trans_y); - } else { - shrink_by = Math.sqrt(v_trans_lensq / 2); - } - } else { - let direction_eq = false; - if (v_prev_x > Number.EPSILON) { - if (v_next_x > Number.EPSILON) { - direction_eq = true; - } - } else { - if (v_prev_x < -Number.EPSILON) { - if (v_next_x < -Number.EPSILON) { - direction_eq = true; - } - } else { - if (Math.sign(v_prev_y) === Math.sign(v_next_y)) { - direction_eq = true; - } - } - } - if (direction_eq) { - v_trans_x = -v_prev_y; - v_trans_y = v_prev_x; - shrink_by = Math.sqrt(v_prev_lensq); - } else { - v_trans_x = v_prev_x; - v_trans_y = v_prev_y; - shrink_by = Math.sqrt(v_prev_lensq / 2); - } - } - return new Vector2(v_trans_x / shrink_by, v_trans_y / shrink_by); - } - const contourMovements = []; - for (let i = 0, il = contour.length, j = il - 1, k = i + 1; i < il; i++, j++, k++) { - if (j === il) - j = 0; - if (k === il) - k = 0; - contourMovements[i] = getBevelVec(contour[i], contour[j], contour[k]); - } - const holesMovements = []; - let oneHoleMovements, verticesMovements = contourMovements.concat(); - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - oneHoleMovements = []; - for (let i = 0, il = ahole.length, j = il - 1, k = i + 1; i < il; i++, j++, k++) { - if (j === il) - j = 0; - if (k === il) - k = 0; - oneHoleMovements[i] = getBevelVec(ahole[i], ahole[j], ahole[k]); - } - holesMovements.push(oneHoleMovements); - verticesMovements = verticesMovements.concat(oneHoleMovements); - } - for (let b = 0; b < bevelSegments; b++) { - const t = b / bevelSegments; - const z = bevelThickness * Math.cos(t * Math.PI / 2); - const bs2 = bevelSize * Math.sin(t * Math.PI / 2) + bevelOffset; - for (let i = 0, il = contour.length; i < il; i++) { - const vert = scalePt2(contour[i], contourMovements[i], bs2); - v(vert.x, vert.y, -z); - } - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - oneHoleMovements = holesMovements[h]; - for (let i = 0, il = ahole.length; i < il; i++) { - const vert = scalePt2(ahole[i], oneHoleMovements[i], bs2); - v(vert.x, vert.y, -z); - } - } - } - const bs = bevelSize + bevelOffset; - for (let i = 0; i < vlen; i++) { - const vert = bevelEnabled ? scalePt2(vertices[i], verticesMovements[i], bs) : vertices[i]; - if (!extrudeByPath) { - v(vert.x, vert.y, 0); - } else { - normal.copy(splineTube.normals[0]).multiplyScalar(vert.x); - binormal.copy(splineTube.binormals[0]).multiplyScalar(vert.y); - position2.copy(extrudePts[0]).add(normal).add(binormal); - v(position2.x, position2.y, position2.z); - } - } - for (let s = 1; s <= steps; s++) { - for (let i = 0; i < vlen; i++) { - const vert = bevelEnabled ? scalePt2(vertices[i], verticesMovements[i], bs) : vertices[i]; - if (!extrudeByPath) { - v(vert.x, vert.y, depth / steps * s); - } else { - normal.copy(splineTube.normals[s]).multiplyScalar(vert.x); - binormal.copy(splineTube.binormals[s]).multiplyScalar(vert.y); - position2.copy(extrudePts[s]).add(normal).add(binormal); - v(position2.x, position2.y, position2.z); - } - } - } - for (let b = bevelSegments - 1; b >= 0; b--) { - const t = b / bevelSegments; - const z = bevelThickness * Math.cos(t * Math.PI / 2); - const bs2 = bevelSize * Math.sin(t * Math.PI / 2) + bevelOffset; - for (let i = 0, il = contour.length; i < il; i++) { - const vert = scalePt2(contour[i], contourMovements[i], bs2); - v(vert.x, vert.y, depth + z); - } - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - oneHoleMovements = holesMovements[h]; - for (let i = 0, il = ahole.length; i < il; i++) { - const vert = scalePt2(ahole[i], oneHoleMovements[i], bs2); - if (!extrudeByPath) { - v(vert.x, vert.y, depth + z); - } else { - v(vert.x, vert.y + extrudePts[steps - 1].y, extrudePts[steps - 1].x + z); - } - } - } - } - buildLidFaces(); - buildSideFaces(); - function buildLidFaces() { - const start2 = verticesArray.length / 3; - if (bevelEnabled) { - let layer = 0; - let offset = vlen * layer; - for (let i = 0; i < flen; i++) { - const face2 = faces[i]; - f3(face2[2] + offset, face2[1] + offset, face2[0] + offset); - } - layer = steps + bevelSegments * 2; - offset = vlen * layer; - for (let i = 0; i < flen; i++) { - const face2 = faces[i]; - f3(face2[0] + offset, face2[1] + offset, face2[2] + offset); - } - } else { - for (let i = 0; i < flen; i++) { - const face2 = faces[i]; - f3(face2[2], face2[1], face2[0]); - } - for (let i = 0; i < flen; i++) { - const face2 = faces[i]; - f3(face2[0] + vlen * steps, face2[1] + vlen * steps, face2[2] + vlen * steps); - } - } - scope.addGroup(start2, verticesArray.length / 3 - start2, 0); - } - function buildSideFaces() { - const start2 = verticesArray.length / 3; - let layeroffset = 0; - sidewalls(contour, layeroffset); - layeroffset += contour.length; - for (let h = 0, hl = holes.length; h < hl; h++) { - const ahole = holes[h]; - sidewalls(ahole, layeroffset); - layeroffset += ahole.length; - } - scope.addGroup(start2, verticesArray.length / 3 - start2, 1); - } - function sidewalls(contour2, layeroffset) { - let i = contour2.length; - while (--i >= 0) { - const j = i; - let k = i - 1; - if (k < 0) - k = contour2.length - 1; - for (let s = 0, sl = steps + bevelSegments * 2; s < sl; s++) { - const slen1 = vlen * s; - const slen2 = vlen * (s + 1); - const a = layeroffset + j + slen1, b = layeroffset + k + slen1, c2 = layeroffset + k + slen2, d = layeroffset + j + slen2; - f4(a, b, c2, d); - } - } - } - function v(x, y, z) { - placeholder.push(x); - placeholder.push(y); - placeholder.push(z); - } - function f3(a, b, c2) { - addVertex(a); - addVertex(b); - addVertex(c2); - const nextIndex = verticesArray.length / 3; - const uvs = uvgen.generateTopUV(scope, verticesArray, nextIndex - 3, nextIndex - 2, nextIndex - 1); - addUV(uvs[0]); - addUV(uvs[1]); - addUV(uvs[2]); - } - function f4(a, b, c2, d) { - addVertex(a); - addVertex(b); - addVertex(d); - addVertex(b); - addVertex(c2); - addVertex(d); - const nextIndex = verticesArray.length / 3; - const uvs = uvgen.generateSideWallUV(scope, verticesArray, nextIndex - 6, nextIndex - 3, nextIndex - 2, nextIndex - 1); - addUV(uvs[0]); - addUV(uvs[1]); - addUV(uvs[3]); - addUV(uvs[1]); - addUV(uvs[2]); - addUV(uvs[3]); - } - function addVertex(index2) { - verticesArray.push(placeholder[index2 * 3 + 0]); - verticesArray.push(placeholder[index2 * 3 + 1]); - verticesArray.push(placeholder[index2 * 3 + 2]); - } - function addUV(vector2) { - uvArray.push(vector2.x); - uvArray.push(vector2.y); - } - } } - toJSON() { - const data = super.toJSON(); - const shapes = this.parameters.shapes; - const options2 = this.parameters.options; - return toJSON$1(shapes, options2, data); - } - static fromJSON(data, shapes) { - const geometryShapes = []; - for (let j = 0, jl = data.shapes.length; j < jl; j++) { - const shape2 = shapes[data.shapes[j]]; - geometryShapes.push(shape2); - } - const extrudePath = data.options.extrudePath; - if (extrudePath !== void 0) { - data.options.extrudePath = new Curves[extrudePath.type]().fromJSON(extrudePath); - } - return new ExtrudeGeometry(geometryShapes, data.options); - } -} -const WorldUVGenerator = { - generateTopUV: function(geometry, vertices, indexA, indexB, indexC) { - const a_x = vertices[indexA * 3]; - const a_y = vertices[indexA * 3 + 1]; - const b_x = vertices[indexB * 3]; - const b_y = vertices[indexB * 3 + 1]; - const c_x = vertices[indexC * 3]; - const c_y = vertices[indexC * 3 + 1]; - return [ - new Vector2(a_x, a_y), - new Vector2(b_x, b_y), - new Vector2(c_x, c_y) - ]; - }, - generateSideWallUV: function(geometry, vertices, indexA, indexB, indexC, indexD) { - const a_x = vertices[indexA * 3]; - const a_y = vertices[indexA * 3 + 1]; - const a_z = vertices[indexA * 3 + 2]; - const b_x = vertices[indexB * 3]; - const b_y = vertices[indexB * 3 + 1]; - const b_z = vertices[indexB * 3 + 2]; - const c_x = vertices[indexC * 3]; - const c_y = vertices[indexC * 3 + 1]; - const c_z = vertices[indexC * 3 + 2]; - const d_x = vertices[indexD * 3]; - const d_y = vertices[indexD * 3 + 1]; - const d_z = vertices[indexD * 3 + 2]; - if (Math.abs(a_y - b_y) < Math.abs(a_x - b_x)) { - return [ - new Vector2(a_x, 1 - a_z), - new Vector2(b_x, 1 - b_z), - new Vector2(c_x, 1 - c_z), - new Vector2(d_x, 1 - d_z) - ]; - } else { - return [ - new Vector2(a_y, 1 - a_z), - new Vector2(b_y, 1 - b_z), - new Vector2(c_y, 1 - c_z), - new Vector2(d_y, 1 - d_z) - ]; - } + [LOAD("$body")]() { + const inspector2 = this.state.inspector; + return createComponent("ComponentEditor", { + inspector: inspector2, + onchange: "changeComponent" + }); } -}; -function toJSON$1(shapes, options2, data) { - data.shapes = []; - if (Array.isArray(shapes)) { - for (let i = 0, l = shapes.length; i < l; i++) { - const shape2 = shapes[i]; - data.shapes.push(shape2.uuid); + [SUBSCRIBE_SELF("changeComponent")](key, value) { + if (isFunction(this.state.changeEvent)) { + this.emit(this.state.changeEvent, key, value); } - } else { - data.shapes.push(shapes.uuid); - } - if (options2.extrudePath !== void 0) - data.options.extrudePath = options2.extrudePath.toJSON(); - return data; -} -class IcosahedronGeometry extends PolyhedronGeometry { - constructor(radius = 1, detail = 0) { - const t = (1 + Math.sqrt(5)) / 2; - const vertices = [ - -1, - t, - 0, - 1, - t, - 0, - -1, - -t, - 0, - 1, - -t, - 0, - 0, - -1, - t, - 0, - 1, - t, - 0, - -1, - -t, - 0, - 1, - -t, - t, - 0, - -1, - t, - 0, - 1, - -t, - 0, - -1, - -t, - 0, - 1 - ]; - const indices = [ - 0, - 11, - 5, - 0, - 5, - 1, - 0, - 1, - 7, - 0, - 7, - 10, - 0, - 10, - 11, - 1, - 5, - 9, - 5, - 11, - 4, - 11, - 10, - 2, - 10, - 7, - 6, - 7, - 1, - 8, - 3, - 9, - 4, - 3, - 4, - 2, - 3, - 2, - 6, - 3, - 6, - 8, - 3, - 8, - 9, - 4, - 9, - 5, - 2, - 4, - 11, - 6, - 2, - 10, - 8, - 6, - 7, - 9, - 8, - 1 - ]; - super(vertices, indices, radius, detail); - this.type = "IcosahedronGeometry"; - this.parameters = { - radius, - detail - }; } - static fromJSON(data) { - return new IcosahedronGeometry(data.radius, data.detail); + [SUBSCRIBE(SHOW_COMPONENT_POPUP)](data) { + this.setState(data, false); + this.refresh(); + this.show(data.width); } } -class OctahedronGeometry extends PolyhedronGeometry { - constructor(radius = 1, detail = 0) { - const vertices = [ - 1, - 0, - 0, - -1, - 0, - 0, - 0, - 1, - 0, - 0, - -1, - 0, - 0, - 0, - 1, - 0, - 0, - -1 - ]; - const indices = [ - 0, - 2, - 4, - 0, - 4, - 3, - 0, - 3, - 5, - 0, - 5, - 2, - 1, - 2, - 5, - 1, - 5, - 3, - 1, - 3, - 4, - 1, - 4, - 2 - ]; - super(vertices, indices, radius, detail); - this.type = "OctahedronGeometry"; - this.parameters = { - radius, - detail - }; - } - static fromJSON(data) { - return new OctahedronGeometry(data.radius, data.detail); - } -} -class RingGeometry extends BufferGeometry { - constructor(innerRadius = 0.5, outerRadius = 1, thetaSegments = 8, phiSegments = 1, thetaStart = 0, thetaLength = Math.PI * 2) { - super(); - this.type = "RingGeometry"; - this.parameters = { - innerRadius, - outerRadius, - thetaSegments, - phiSegments, - thetaStart, - thetaLength - }; - thetaSegments = Math.max(3, thetaSegments); - phiSegments = Math.max(1, phiSegments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - let radius = innerRadius; - const radiusStep = (outerRadius - innerRadius) / phiSegments; - const vertex2 = new Vector3(); - const uv = new Vector2(); - for (let j = 0; j <= phiSegments; j++) { - for (let i = 0; i <= thetaSegments; i++) { - const segment = thetaStart + i / thetaSegments * thetaLength; - vertex2.x = radius * Math.cos(segment); - vertex2.y = radius * Math.sin(segment); - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normals.push(0, 0, 1); - uv.x = (vertex2.x / outerRadius + 1) / 2; - uv.y = (vertex2.y / outerRadius + 1) / 2; - uvs.push(uv.x, uv.y); - } - radius += radiusStep; - } - for (let j = 0; j < phiSegments; j++) { - const thetaSegmentLevel = j * (thetaSegments + 1); - for (let i = 0; i < thetaSegments; i++) { - const segment = i + thetaSegmentLevel; - const a = segment; - const b = segment + thetaSegments + 1; - const c2 = segment + thetaSegments + 2; - const d = segment + 1; - indices.push(a, b, d); - indices.push(b, c2, d); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - } - static fromJSON(data) { - return new RingGeometry(data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength); - } -} -class ShapeGeometry extends BufferGeometry { - constructor(shapes = new Shape([new Vector2(0, 0.5), new Vector2(-0.5, -0.5), new Vector2(0.5, -0.5)]), curveSegments = 12) { - super(); - this.type = "ShapeGeometry"; - this.parameters = { - shapes, - curveSegments - }; - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - let groupStart = 0; - let groupCount = 0; - if (Array.isArray(shapes) === false) { - addShape(shapes); - } else { - for (let i = 0; i < shapes.length; i++) { - addShape(shapes[i]); - this.addGroup(groupStart, groupCount, i); - groupStart += groupCount; - groupCount = 0; - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - function addShape(shape2) { - const indexOffset = vertices.length / 3; - const points = shape2.extractPoints(curveSegments); - let shapeVertices = points.shape; - const shapeHoles = points.holes; - if (ShapeUtils.isClockWise(shapeVertices) === false) { - shapeVertices = shapeVertices.reverse(); - } - for (let i = 0, l = shapeHoles.length; i < l; i++) { - const shapeHole = shapeHoles[i]; - if (ShapeUtils.isClockWise(shapeHole) === true) { - shapeHoles[i] = shapeHole.reverse(); - } - } - const faces = ShapeUtils.triangulateShape(shapeVertices, shapeHoles); - for (let i = 0, l = shapeHoles.length; i < l; i++) { - const shapeHole = shapeHoles[i]; - shapeVertices = shapeVertices.concat(shapeHole); - } - for (let i = 0, l = shapeVertices.length; i < l; i++) { - const vertex2 = shapeVertices[i]; - vertices.push(vertex2.x, vertex2.y, 0); - normals.push(0, 0, 1); - uvs.push(vertex2.x, vertex2.y); - } - for (let i = 0, l = faces.length; i < l; i++) { - const face2 = faces[i]; - const a = face2[0] + indexOffset; - const b = face2[1] + indexOffset; - const c2 = face2[2] + indexOffset; - indices.push(a, b, c2); - groupCount += 3; - } - } +var ComponentProperty$1 = ""; +class ComponentProperty extends BaseProperty { + getClassName() { + return "component-property"; } - toJSON() { - const data = super.toJSON(); - const shapes = this.parameters.shapes; - return toJSON(shapes, data); + getTitle() { + return "Component"; } - static fromJSON(data, shapes) { - const geometryShapes = []; - for (let j = 0, jl = data.shapes.length; j < jl; j++) { - const shape2 = shapes[data.shapes[j]]; - geometryShapes.push(shape2); + isShow() { + var _a; + var current = (_a = this.$context.selection) == null ? void 0 : _a.current; + const inspector2 = this.$context.components.createInspector(current); + if (current && (current.is("component") || inspector2.length > 0)) { + return true; } - return new ShapeGeometry(geometryShapes, data.curveSegments); + return false; } -} -function toJSON(shapes, data) { - data.shapes = []; - if (Array.isArray(shapes)) { - for (let i = 0, l = shapes.length; i < l; i++) { - const shape2 = shapes[i]; - data.shapes.push(shape2.uuid); - } - } else { - data.shapes.push(shapes.uuid); + [SUBSCRIBE(REFRESH_SELECTION) + DEBOUNCE(100)]() { + this.refreshShow(() => { + const current = this.$context.selection.current; + const inspector2 = this.$context.components.createInspector(current); + return inspector2.length > 0; + }); } - return data; -} -class SphereGeometry extends BufferGeometry { - constructor(radius = 1, widthSegments = 32, heightSegments = 16, phiStart = 0, phiLength = Math.PI * 2, thetaStart = 0, thetaLength = Math.PI) { - super(); - this.type = "SphereGeometry"; - this.parameters = { - radius, - widthSegments, - heightSegments, - phiStart, - phiLength, - thetaStart, - thetaLength - }; - widthSegments = Math.max(3, Math.floor(widthSegments)); - heightSegments = Math.max(2, Math.floor(heightSegments)); - const thetaEnd = Math.min(thetaStart + thetaLength, Math.PI); - let index2 = 0; - const grid2 = []; - const vertex2 = new Vector3(); - const normal = new Vector3(); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - for (let iy = 0; iy <= heightSegments; iy++) { - const verticesRow = []; - const v = iy / heightSegments; - let uOffset = 0; - if (iy == 0 && thetaStart == 0) { - uOffset = 0.5 / widthSegments; - } else if (iy == heightSegments && thetaEnd == Math.PI) { - uOffset = -0.5 / widthSegments; - } - for (let ix = 0; ix <= widthSegments; ix++) { - const u = ix / widthSegments; - vertex2.x = -radius * Math.cos(phiStart + u * phiLength) * Math.sin(thetaStart + v * thetaLength); - vertex2.y = radius * Math.cos(thetaStart + v * thetaLength); - vertex2.z = radius * Math.sin(phiStart + u * phiLength) * Math.sin(thetaStart + v * thetaLength); - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normal.copy(vertex2).normalize(); - normals.push(normal.x, normal.y, normal.z); - uvs.push(u + uOffset, 1 - v); - verticesRow.push(index2++); - } - grid2.push(verticesRow); - } - for (let iy = 0; iy < heightSegments; iy++) { - for (let ix = 0; ix < widthSegments; ix++) { - const a = grid2[iy][ix + 1]; - const b = grid2[iy][ix]; - const c2 = grid2[iy + 1][ix]; - const d = grid2[iy + 1][ix + 1]; - if (iy !== 0 || thetaStart > 0) - indices.push(a, b, d); - if (iy !== heightSegments - 1 || thetaEnd < Math.PI) - indices.push(b, c2, d); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - } - static fromJSON(data) { - return new SphereGeometry(data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength); - } -} -class TetrahedronGeometry extends PolyhedronGeometry { - constructor(radius = 1, detail = 0) { - const vertices = [ - 1, - 1, - 1, - -1, - -1, - 1, - -1, - 1, - -1, - 1, - -1, - -1 - ]; - const indices = [ - 2, - 1, - 0, - 0, - 3, - 2, - 1, - 3, - 0, - 2, - 3, - 1 - ]; - super(vertices, indices, radius, detail); - this.type = "TetrahedronGeometry"; - this.parameters = { - radius, - detail - }; + refresh() { + var current = this.$context.selection.current; + if (current) { + this.setTitle(current.getDefaultTitle() || current.itemType || current.name); + this.load(); + } } - static fromJSON(data) { - return new TetrahedronGeometry(data.radius, data.detail); + getBody() { + return ` +
+ `; } -} -class TorusGeometry extends BufferGeometry { - constructor(radius = 1, tube = 0.4, radialSegments = 8, tubularSegments = 6, arc = Math.PI * 2) { - super(); - this.type = "TorusGeometry"; - this.parameters = { - radius, - tube, - radialSegments, - tubularSegments, - arc - }; - radialSegments = Math.floor(radialSegments); - tubularSegments = Math.floor(tubularSegments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - const center2 = new Vector3(); - const vertex2 = new Vector3(); - const normal = new Vector3(); - for (let j = 0; j <= radialSegments; j++) { - for (let i = 0; i <= tubularSegments; i++) { - const u = i / tubularSegments * arc; - const v = j / radialSegments * Math.PI * 2; - vertex2.x = (radius + tube * Math.cos(v)) * Math.cos(u); - vertex2.y = (radius + tube * Math.cos(v)) * Math.sin(u); - vertex2.z = tube * Math.sin(v); - vertices.push(vertex2.x, vertex2.y, vertex2.z); - center2.x = radius * Math.cos(u); - center2.y = radius * Math.sin(u); - normal.subVectors(vertex2, center2).normalize(); - normals.push(normal.x, normal.y, normal.z); - uvs.push(i / tubularSegments); - uvs.push(j / radialSegments); - } - } - for (let j = 1; j <= radialSegments; j++) { - for (let i = 1; i <= tubularSegments; i++) { - const a = (tubularSegments + 1) * j + i - 1; - const b = (tubularSegments + 1) * (j - 1) + i - 1; - const c2 = (tubularSegments + 1) * (j - 1) + i; - const d = (tubularSegments + 1) * j + i; - indices.push(a, b, d); - indices.push(b, c2, d); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - } - static fromJSON(data) { - return new TorusGeometry(data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc); - } -} -class TorusKnotGeometry extends BufferGeometry { - constructor(radius = 1, tube = 0.4, tubularSegments = 64, radialSegments = 8, p = 2, q = 3) { - super(); - this.type = "TorusKnotGeometry"; - this.parameters = { - radius, - tube, - tubularSegments, - radialSegments, - p, - q - }; - tubularSegments = Math.floor(tubularSegments); - radialSegments = Math.floor(radialSegments); - const indices = []; - const vertices = []; - const normals = []; - const uvs = []; - const vertex2 = new Vector3(); - const normal = new Vector3(); - const P1 = new Vector3(); - const P2 = new Vector3(); - const B = new Vector3(); - const T = new Vector3(); - const N = new Vector3(); - for (let i = 0; i <= tubularSegments; ++i) { - const u = i / tubularSegments * p * Math.PI * 2; - calculatePositionOnCurve(u, p, q, radius, P1); - calculatePositionOnCurve(u + 0.01, p, q, radius, P2); - T.subVectors(P2, P1); - N.addVectors(P2, P1); - B.crossVectors(T, N); - N.crossVectors(B, T); - B.normalize(); - N.normalize(); - for (let j = 0; j <= radialSegments; ++j) { - const v = j / radialSegments * Math.PI * 2; - const cx = -tube * Math.cos(v); - const cy = tube * Math.sin(v); - vertex2.x = P1.x + (cx * N.x + cy * B.x); - vertex2.y = P1.y + (cx * N.y + cy * B.y); - vertex2.z = P1.z + (cx * N.z + cy * B.z); - vertices.push(vertex2.x, vertex2.y, vertex2.z); - normal.subVectors(vertex2, P1).normalize(); - normals.push(normal.x, normal.y, normal.z); - uvs.push(i / tubularSegments); - uvs.push(j / radialSegments); - } - } - for (let j = 1; j <= tubularSegments; j++) { - for (let i = 1; i <= radialSegments; i++) { - const a = (radialSegments + 1) * (j - 1) + (i - 1); - const b = (radialSegments + 1) * j + (i - 1); - const c2 = (radialSegments + 1) * j + i; - const d = (radialSegments + 1) * (j - 1) + i; - indices.push(a, b, d); - indices.push(b, c2, d); - } - } - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - function calculatePositionOnCurve(u, p2, q2, radius2, position2) { - const cu = Math.cos(u); - const su = Math.sin(u); - const quOverP = q2 / p2 * u; - const cs = Math.cos(quOverP); - position2.x = radius2 * (2 + cs) * 0.5 * cu; - position2.y = radius2 * (2 + cs) * su * 0.5; - position2.z = radius2 * Math.sin(quOverP) * 0.5; - } - } - static fromJSON(data) { - return new TorusKnotGeometry(data.radius, data.tube, data.tubularSegments, data.radialSegments, data.p, data.q); - } -} -class TubeGeometry extends BufferGeometry { - constructor(path = new QuadraticBezierCurve3(new Vector3(-1, -1, 0), new Vector3(-1, 1, 0), new Vector3(1, 1, 0)), tubularSegments = 64, radius = 1, radialSegments = 8, closed = false) { - super(); - this.type = "TubeGeometry"; - this.parameters = { - path, - tubularSegments, - radius, - radialSegments, - closed - }; - const frames = path.computeFrenetFrames(tubularSegments, closed); - this.tangents = frames.tangents; - this.normals = frames.normals; - this.binormals = frames.binormals; - const vertex2 = new Vector3(); - const normal = new Vector3(); - const uv = new Vector2(); - let P = new Vector3(); - const vertices = []; - const normals = []; - const uvs = []; - const indices = []; - generateBufferData(); - this.setIndex(indices); - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - this.setAttribute("normal", new Float32BufferAttribute(normals, 3)); - this.setAttribute("uv", new Float32BufferAttribute(uvs, 2)); - function generateBufferData() { - for (let i = 0; i < tubularSegments; i++) { - generateSegment(i); - } - generateSegment(closed === false ? tubularSegments : 0); - generateUVs(); - generateIndices(); - } - function generateSegment(i) { - P = path.getPointAt(i / tubularSegments, P); - const N = frames.normals[i]; - const B = frames.binormals[i]; - for (let j = 0; j <= radialSegments; j++) { - const v = j / radialSegments * Math.PI * 2; - const sin = Math.sin(v); - const cos = -Math.cos(v); - normal.x = cos * N.x + sin * B.x; - normal.y = cos * N.y + sin * B.y; - normal.z = cos * N.z + sin * B.z; - normal.normalize(); - normals.push(normal.x, normal.y, normal.z); - vertex2.x = P.x + radius * normal.x; - vertex2.y = P.y + radius * normal.y; - vertex2.z = P.z + radius * normal.z; - vertices.push(vertex2.x, vertex2.y, vertex2.z); - } - } - function generateIndices() { - for (let j = 1; j <= tubularSegments; j++) { - for (let i = 1; i <= radialSegments; i++) { - const a = (radialSegments + 1) * (j - 1) + (i - 1); - const b = (radialSegments + 1) * j + (i - 1); - const c2 = (radialSegments + 1) * j + i; - const d = (radialSegments + 1) * (j - 1) + i; - indices.push(a, b, d); - indices.push(b, c2, d); - } + [LOAD("$body")]() { + var _a; + var current = (_a = this.$context.selection) == null ? void 0 : _a.current; + if (!current) + return ""; + const inspector2 = this.$context.components.createInspector(current); + inspector2.forEach((it) => { + if (isString(it)) { + return; } - } - function generateUVs() { - for (let i = 0; i <= tubularSegments; i++) { - for (let j = 0; j <= radialSegments; j++) { - uv.x = i / tubularSegments; - uv.y = j / radialSegments; - uvs.push(uv.x, uv.y); - } + let defaultValue2 = current[it.key] || it.defaultValue; + if (isFunction(it.convertDefaultValue)) { + defaultValue2 = it.convertDefaultValue(current, it.key); } - } - } - toJSON() { - const data = super.toJSON(); - data.path = this.parameters.path.toJSON(); - return data; + it.defaultValue = defaultValue2; + }); + return createComponent("ComponentEditor", { + ref: "$comp", + inspector: inspector2, + onchange: "changeComponentProperty" + }); } - static fromJSON(data) { - return new TubeGeometry(new Curves[data.path.type]().fromJSON(data.path), data.tubularSegments, data.radius, data.radialSegments, data.closed); + [SUBSCRIBE_SELF("changeComponentProperty")](key, value) { + this.$commands.executeCommand("setAttribute", "change component : " + key, this.$context.selection.packByValue({ + [key]: value + })); } } -class WireframeGeometry extends BufferGeometry { - constructor(geometry = null) { - super(); - this.type = "WireframeGeometry"; - this.parameters = { - geometry - }; - if (geometry !== null) { - const vertices = []; - const edges = /* @__PURE__ */ new Set(); - const start2 = new Vector3(); - const end2 = new Vector3(); - if (geometry.index !== null) { - const position2 = geometry.attributes.position; - const indices = geometry.index; - let groups = geometry.groups; - if (groups.length === 0) { - groups = [{ start: 0, count: indices.count, materialIndex: 0 }]; - } - for (let o = 0, ol = groups.length; o < ol; ++o) { - const group2 = groups[o]; - const groupStart = group2.start; - const groupCount = group2.count; - for (let i = groupStart, l = groupStart + groupCount; i < l; i += 3) { - for (let j = 0; j < 3; j++) { - const index1 = indices.getX(i + j); - const index2 = indices.getX(i + (j + 1) % 3); - start2.fromBufferAttribute(position2, index1); - end2.fromBufferAttribute(position2, index2); - if (isUniqueEdge(start2, end2, edges) === true) { - vertices.push(start2.x, start2.y, start2.z); - vertices.push(end2.x, end2.y, end2.z); - } - } - } - } - } else { - const position2 = geometry.attributes.position; - for (let i = 0, l = position2.count / 3; i < l; i++) { - for (let j = 0; j < 3; j++) { - const index1 = 3 * i + j; - const index2 = 3 * i + (j + 1) % 3; - start2.fromBufferAttribute(position2, index1); - end2.fromBufferAttribute(position2, index2); - if (isUniqueEdge(start2, end2, edges) === true) { - vertices.push(start2.x, start2.y, start2.z); - vertices.push(end2.x, end2.y, end2.z); - } - } - } - } - this.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - } - } +function component(editor) { + editor.registerUI("inspector.tab.style", { + ComponentProperty + }); + editor.registerUI("popup", { + ComponentPopup + }); } -function isUniqueEdge(start2, end2, edges) { - const hash1 = `${start2.x},${start2.y},${start2.z}-${end2.x},${end2.y},${end2.z}`; - const hash2 = `${end2.x},${end2.y},${end2.z}-${start2.x},${start2.y},${start2.z}`; - if (edges.has(hash1) === true || edges.has(hash2) === true) { - return false; - } else { - edges.add(hash1); - edges.add(hash2); - return true; +var ContentProperty$1 = ""; +class ContentProperty extends BaseProperty { + getTitle() { + return "Content"; } -} -var Geometries = /* @__PURE__ */ Object.freeze({ - __proto__: null, - BoxGeometry, - BoxBufferGeometry: BoxGeometry, - CapsuleGeometry, - CapsuleBufferGeometry: CapsuleGeometry, - CircleGeometry, - CircleBufferGeometry: CircleGeometry, - ConeGeometry, - ConeBufferGeometry: ConeGeometry, - CylinderGeometry, - CylinderBufferGeometry: CylinderGeometry, - DodecahedronGeometry, - DodecahedronBufferGeometry: DodecahedronGeometry, - EdgesGeometry, - ExtrudeGeometry, - ExtrudeBufferGeometry: ExtrudeGeometry, - IcosahedronGeometry, - IcosahedronBufferGeometry: IcosahedronGeometry, - LatheGeometry, - LatheBufferGeometry: LatheGeometry, - OctahedronGeometry, - OctahedronBufferGeometry: OctahedronGeometry, - PlaneGeometry, - PlaneBufferGeometry: PlaneGeometry, - PolyhedronGeometry, - PolyhedronBufferGeometry: PolyhedronGeometry, - RingGeometry, - RingBufferGeometry: RingGeometry, - ShapeGeometry, - ShapeBufferGeometry: ShapeGeometry, - SphereGeometry, - SphereBufferGeometry: SphereGeometry, - TetrahedronGeometry, - TetrahedronBufferGeometry: TetrahedronGeometry, - TorusGeometry, - TorusBufferGeometry: TorusGeometry, - TorusKnotGeometry, - TorusKnotBufferGeometry: TorusKnotGeometry, - TubeGeometry, - TubeBufferGeometry: TubeGeometry, - WireframeGeometry -}); -class ShadowMaterial extends Material { - constructor(parameters) { - super(); - this.type = "ShadowMaterial"; - this.color = new Color(0); - this.transparent = true; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - return this; + [SUBSCRIBE(REFRESH_SELECTION, REFRESH_CONTENT) + DEBOUNCE(100)]() { + this.refreshShow(["text"]); } -} -ShadowMaterial.prototype.isShadowMaterial = true; -class RawShaderMaterial extends ShaderMaterial { - constructor(parameters) { - super(parameters); - this.type = "RawShaderMaterial"; - } -} -RawShaderMaterial.prototype.isRawShaderMaterial = true; -class MeshStandardMaterial extends Material { - constructor(parameters) { - super(); - this.defines = { "STANDARD": "" }; - this.type = "MeshStandardMaterial"; - this.color = new Color(16777215); - this.roughness = 1; - this.metalness = 0; - this.map = null; - this.lightMap = null; - this.lightMapIntensity = 1; - this.aoMap = null; - this.aoMapIntensity = 1; - this.emissive = new Color(0); - this.emissiveIntensity = 1; - this.emissiveMap = null; - this.bumpMap = null; - this.bumpScale = 1; - this.normalMap = null; - this.normalMapType = TangentSpaceNormalMap; - this.normalScale = new Vector2(1, 1); - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.roughnessMap = null; - this.metalnessMap = null; - this.alphaMap = null; - this.envMap = null; - this.envMapIntensity = 1; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.wireframeLinecap = "round"; - this.wireframeLinejoin = "round"; - this.flatShading = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.defines = { "STANDARD": "" }; - this.color.copy(source2.color); - this.roughness = source2.roughness; - this.metalness = source2.metalness; - this.map = source2.map; - this.lightMap = source2.lightMap; - this.lightMapIntensity = source2.lightMapIntensity; - this.aoMap = source2.aoMap; - this.aoMapIntensity = source2.aoMapIntensity; - this.emissive.copy(source2.emissive); - this.emissiveMap = source2.emissiveMap; - this.emissiveIntensity = source2.emissiveIntensity; - this.bumpMap = source2.bumpMap; - this.bumpScale = source2.bumpScale; - this.normalMap = source2.normalMap; - this.normalMapType = source2.normalMapType; - this.normalScale.copy(source2.normalScale); - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.roughnessMap = source2.roughnessMap; - this.metalnessMap = source2.metalnessMap; - this.alphaMap = source2.alphaMap; - this.envMap = source2.envMap; - this.envMapIntensity = source2.envMapIntensity; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.wireframeLinecap = source2.wireframeLinecap; - this.wireframeLinejoin = source2.wireframeLinejoin; - this.flatShading = source2.flatShading; - return this; + getBody() { + return ` +
+ +
+ `; } -} -MeshStandardMaterial.prototype.isMeshStandardMaterial = true; -class MeshPhysicalMaterial extends MeshStandardMaterial { - constructor(parameters) { - super(); - this.defines = { - "STANDARD": "", - "PHYSICAL": "" - }; - this.type = "MeshPhysicalMaterial"; - this.clearcoatMap = null; - this.clearcoatRoughness = 0; - this.clearcoatRoughnessMap = null; - this.clearcoatNormalScale = new Vector2(1, 1); - this.clearcoatNormalMap = null; - this.ior = 1.5; - Object.defineProperty(this, "reflectivity", { - get: function() { - return clamp(2.5 * (this.ior - 1) / (this.ior + 1), 0, 1); - }, - set: function(reflectivity) { - this.ior = (1 + 0.4 * reflectivity) / (1 - 0.4 * reflectivity); - } - }); - this.sheenColor = new Color(0); - this.sheenColorMap = null; - this.sheenRoughness = 1; - this.sheenRoughnessMap = null; - this.transmissionMap = null; - this.thickness = 0; - this.thicknessMap = null; - this.attenuationDistance = 0; - this.attenuationColor = new Color(1, 1, 1); - this.specularIntensity = 1; - this.specularIntensityMap = null; - this.specularColor = new Color(1, 1, 1); - this.specularColorMap = null; - this._sheen = 0; - this._clearcoat = 0; - this._transmission = 0; - this.setValues(parameters); - } - get sheen() { - return this._sheen; - } - set sheen(value) { - if (this._sheen > 0 !== value > 0) { - this.version++; - } - this._sheen = value; - } - get clearcoat() { - return this._clearcoat; - } - set clearcoat(value) { - if (this._clearcoat > 0 !== value > 0) { - this.version++; - } - this._clearcoat = value; - } - get transmission() { - return this._transmission; - } - set transmission(value) { - if (this._transmission > 0 !== value > 0) { - this.version++; - } - this._transmission = value; - } - copy(source2) { - super.copy(source2); - this.defines = { - "STANDARD": "", - "PHYSICAL": "" + [BIND("$contentItem")]() { + var current = this.$context.selection.current; + if (!current) + return ""; + return { + value: current.content || "" }; - this.clearcoat = source2.clearcoat; - this.clearcoatMap = source2.clearcoatMap; - this.clearcoatRoughness = source2.clearcoatRoughness; - this.clearcoatRoughnessMap = source2.clearcoatRoughnessMap; - this.clearcoatNormalMap = source2.clearcoatNormalMap; - this.clearcoatNormalScale.copy(source2.clearcoatNormalScale); - this.ior = source2.ior; - this.sheen = source2.sheen; - this.sheenColor.copy(source2.sheenColor); - this.sheenColorMap = source2.sheenColorMap; - this.sheenRoughness = source2.sheenRoughness; - this.sheenRoughnessMap = source2.sheenRoughnessMap; - this.transmission = source2.transmission; - this.transmissionMap = source2.transmissionMap; - this.thickness = source2.thickness; - this.thicknessMap = source2.thicknessMap; - this.attenuationDistance = source2.attenuationDistance; - this.attenuationColor.copy(source2.attenuationColor); - this.specularIntensity = source2.specularIntensity; - this.specularIntensityMap = source2.specularIntensityMap; - this.specularColor.copy(source2.specularColor); - this.specularColorMap = source2.specularColorMap; - return this; - } -} -MeshPhysicalMaterial.prototype.isMeshPhysicalMaterial = true; -class MeshPhongMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshPhongMaterial"; - this.color = new Color(16777215); - this.specular = new Color(1118481); - this.shininess = 30; - this.map = null; - this.lightMap = null; - this.lightMapIntensity = 1; - this.aoMap = null; - this.aoMapIntensity = 1; - this.emissive = new Color(0); - this.emissiveIntensity = 1; - this.emissiveMap = null; - this.bumpMap = null; - this.bumpScale = 1; - this.normalMap = null; - this.normalMapType = TangentSpaceNormalMap; - this.normalScale = new Vector2(1, 1); - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.specularMap = null; - this.alphaMap = null; - this.envMap = null; - this.combine = MultiplyOperation; - this.reflectivity = 1; - this.refractionRatio = 0.98; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.wireframeLinecap = "round"; - this.wireframeLinejoin = "round"; - this.flatShading = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.specular.copy(source2.specular); - this.shininess = source2.shininess; - this.map = source2.map; - this.lightMap = source2.lightMap; - this.lightMapIntensity = source2.lightMapIntensity; - this.aoMap = source2.aoMap; - this.aoMapIntensity = source2.aoMapIntensity; - this.emissive.copy(source2.emissive); - this.emissiveMap = source2.emissiveMap; - this.emissiveIntensity = source2.emissiveIntensity; - this.bumpMap = source2.bumpMap; - this.bumpScale = source2.bumpScale; - this.normalMap = source2.normalMap; - this.normalMapType = source2.normalMapType; - this.normalScale.copy(source2.normalScale); - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.specularMap = source2.specularMap; - this.alphaMap = source2.alphaMap; - this.envMap = source2.envMap; - this.combine = source2.combine; - this.reflectivity = source2.reflectivity; - this.refractionRatio = source2.refractionRatio; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.wireframeLinecap = source2.wireframeLinecap; - this.wireframeLinejoin = source2.wireframeLinejoin; - this.flatShading = source2.flatShading; - return this; } -} -MeshPhongMaterial.prototype.isMeshPhongMaterial = true; -class MeshToonMaterial extends Material { - constructor(parameters) { - super(); - this.defines = { "TOON": "" }; - this.type = "MeshToonMaterial"; - this.color = new Color(16777215); - this.map = null; - this.gradientMap = null; - this.lightMap = null; - this.lightMapIntensity = 1; - this.aoMap = null; - this.aoMapIntensity = 1; - this.emissive = new Color(0); - this.emissiveIntensity = 1; - this.emissiveMap = null; - this.bumpMap = null; - this.bumpScale = 1; - this.normalMap = null; - this.normalMapType = TangentSpaceNormalMap; - this.normalScale = new Vector2(1, 1); - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.alphaMap = null; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.wireframeLinecap = "round"; - this.wireframeLinejoin = "round"; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.map = source2.map; - this.gradientMap = source2.gradientMap; - this.lightMap = source2.lightMap; - this.lightMapIntensity = source2.lightMapIntensity; - this.aoMap = source2.aoMap; - this.aoMapIntensity = source2.aoMapIntensity; - this.emissive.copy(source2.emissive); - this.emissiveMap = source2.emissiveMap; - this.emissiveIntensity = source2.emissiveIntensity; - this.bumpMap = source2.bumpMap; - this.bumpScale = source2.bumpScale; - this.normalMap = source2.normalMap; - this.normalMapType = source2.normalMapType; - this.normalScale.copy(source2.normalScale); - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.alphaMap = source2.alphaMap; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.wireframeLinecap = source2.wireframeLinecap; - this.wireframeLinejoin = source2.wireframeLinejoin; - return this; - } -} -MeshToonMaterial.prototype.isMeshToonMaterial = true; -class MeshNormalMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshNormalMaterial"; - this.bumpMap = null; - this.bumpScale = 1; - this.normalMap = null; - this.normalMapType = TangentSpaceNormalMap; - this.normalScale = new Vector2(1, 1); - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.fog = false; - this.flatShading = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.bumpMap = source2.bumpMap; - this.bumpScale = source2.bumpScale; - this.normalMap = source2.normalMap; - this.normalMapType = source2.normalMapType; - this.normalScale.copy(source2.normalScale); - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.flatShading = source2.flatShading; - return this; - } -} -MeshNormalMaterial.prototype.isMeshNormalMaterial = true; -class MeshLambertMaterial extends Material { - constructor(parameters) { - super(); - this.type = "MeshLambertMaterial"; - this.color = new Color(16777215); - this.map = null; - this.lightMap = null; - this.lightMapIntensity = 1; - this.aoMap = null; - this.aoMapIntensity = 1; - this.emissive = new Color(0); - this.emissiveIntensity = 1; - this.emissiveMap = null; - this.specularMap = null; - this.alphaMap = null; - this.envMap = null; - this.combine = MultiplyOperation; - this.reflectivity = 1; - this.refractionRatio = 0.98; - this.wireframe = false; - this.wireframeLinewidth = 1; - this.wireframeLinecap = "round"; - this.wireframeLinejoin = "round"; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.map = source2.map; - this.lightMap = source2.lightMap; - this.lightMapIntensity = source2.lightMapIntensity; - this.aoMap = source2.aoMap; - this.aoMapIntensity = source2.aoMapIntensity; - this.emissive.copy(source2.emissive); - this.emissiveMap = source2.emissiveMap; - this.emissiveIntensity = source2.emissiveIntensity; - this.specularMap = source2.specularMap; - this.alphaMap = source2.alphaMap; - this.envMap = source2.envMap; - this.combine = source2.combine; - this.reflectivity = source2.reflectivity; - this.refractionRatio = source2.refractionRatio; - this.wireframe = source2.wireframe; - this.wireframeLinewidth = source2.wireframeLinewidth; - this.wireframeLinecap = source2.wireframeLinecap; - this.wireframeLinejoin = source2.wireframeLinejoin; - return this; + [INPUT("$contentItem")]() { + this.setContent(); } -} -MeshLambertMaterial.prototype.isMeshLambertMaterial = true; -class MeshMatcapMaterial extends Material { - constructor(parameters) { - super(); - this.defines = { "MATCAP": "" }; - this.type = "MeshMatcapMaterial"; - this.color = new Color(16777215); - this.matcap = null; - this.map = null; - this.bumpMap = null; - this.bumpScale = 1; - this.normalMap = null; - this.normalMapType = TangentSpaceNormalMap; - this.normalScale = new Vector2(1, 1); - this.displacementMap = null; - this.displacementScale = 1; - this.displacementBias = 0; - this.alphaMap = null; - this.flatShading = false; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.defines = { "MATCAP": "" }; - this.color.copy(source2.color); - this.matcap = source2.matcap; - this.map = source2.map; - this.bumpMap = source2.bumpMap; - this.bumpScale = source2.bumpScale; - this.normalMap = source2.normalMap; - this.normalMapType = source2.normalMapType; - this.normalScale.copy(source2.normalScale); - this.displacementMap = source2.displacementMap; - this.displacementScale = source2.displacementScale; - this.displacementBias = source2.displacementBias; - this.alphaMap = source2.alphaMap; - this.flatShading = source2.flatShading; - return this; + setContent() { + var current = this.$context.selection.current; + if (current) { + var data = { + content: this.refs.$contentItem.value + }; + current.reset(data); + this.emit(UPDATE_CANVAS, current); + } } } -MeshMatcapMaterial.prototype.isMeshMatcapMaterial = true; -class LineDashedMaterial extends LineBasicMaterial { - constructor(parameters) { - super(); - this.type = "LineDashedMaterial"; - this.scale = 1; - this.dashSize = 3; - this.gapSize = 1; - this.setValues(parameters); - } - copy(source2) { - super.copy(source2); - this.scale = source2.scale; - this.dashSize = source2.dashSize; - this.gapSize = source2.gapSize; - return this; - } +function content(editor) { + editor.registerElement({ + ContentProperty + }); } -LineDashedMaterial.prototype.isLineDashedMaterial = true; -const materialLib = { - ShadowMaterial, - SpriteMaterial, - RawShaderMaterial, - ShaderMaterial, - PointsMaterial, - MeshPhysicalMaterial, - MeshStandardMaterial, - MeshPhongMaterial, - MeshToonMaterial, - MeshNormalMaterial, - MeshLambertMaterial, - MeshDepthMaterial, - MeshDistanceMaterial, - MeshBasicMaterial, - MeshMatcapMaterial, - LineDashedMaterial, - LineBasicMaterial, - Material -}; -Material.fromType = function(type) { - return new materialLib[type](); -}; -const AnimationUtils = { - arraySlice: function(array, from, to) { - if (AnimationUtils.isTypedArray(array)) { - return new array.constructor(array.subarray(from, to !== void 0 ? to : array.length)); - } - return array.slice(from, to); - }, - convertArray: function(array, type, forceClone) { - if (!array || !forceClone && array.constructor === type) - return array; - if (typeof type.BYTES_PER_ELEMENT === "number") { - return new type(array); - } - return Array.prototype.slice.call(array); - }, - isTypedArray: function(object) { - return ArrayBuffer.isView(object) && !(object instanceof DataView); - }, - getKeyframeOrder: function(times) { - function compareTime(i, j) { - return times[i] - times[j]; - } - const n = times.length; - const result = new Array(n); - for (let i = 0; i !== n; ++i) - result[i] = i; - result.sort(compareTime); - return result; - }, - sortedArray: function(values, stride, order) { - const nValues = values.length; - const result = new values.constructor(nValues); - for (let i = 0, dstOffset = 0; dstOffset !== nValues; ++i) { - const srcOffset = order[i] * stride; - for (let j = 0; j !== stride; ++j) { - result[dstOffset++] = values[srcOffset + j]; - } - } - return result; - }, - flattenJSON: function(jsonKeys, times, values, valuePropertyName) { - let i = 1, key = jsonKeys[0]; - while (key !== void 0 && key[valuePropertyName] === void 0) { - key = jsonKeys[i++]; - } - if (key === void 0) - return; - let value = key[valuePropertyName]; - if (value === void 0) - return; - if (Array.isArray(value)) { - do { - value = key[valuePropertyName]; - if (value !== void 0) { - times.push(key.time); - values.push.apply(values, value); - } - key = jsonKeys[i++]; - } while (key !== void 0); - } else if (value.toArray !== void 0) { - do { - value = key[valuePropertyName]; - if (value !== void 0) { - times.push(key.time); - value.toArray(values, values.length); - } - key = jsonKeys[i++]; - } while (key !== void 0); - } else { - do { - value = key[valuePropertyName]; - if (value !== void 0) { - times.push(key.time); - values.push(value); - } - key = jsonKeys[i++]; - } while (key !== void 0); - } - }, - subclip: function(sourceClip, name, startFrame, endFrame, fps = 30) { - const clip = sourceClip.clone(); - clip.name = name; - const tracks = []; - for (let i = 0; i < clip.tracks.length; ++i) { - const track = clip.tracks[i]; - const valueSize = track.getValueSize(); - const times = []; - const values = []; - for (let j = 0; j < track.times.length; ++j) { - const frame = track.times[j] * fps; - if (frame < startFrame || frame >= endFrame) - continue; - times.push(track.times[j]); - for (let k = 0; k < valueSize; ++k) { - values.push(track.values[j * valueSize + k]); - } - } - if (times.length === 0) - continue; - track.times = AnimationUtils.convertArray(times, track.times.constructor); - track.values = AnimationUtils.convertArray(values, track.values.constructor); - tracks.push(track); - } - clip.tracks = tracks; - let minStartTime = Infinity; - for (let i = 0; i < clip.tracks.length; ++i) { - if (minStartTime > clip.tracks[i].times[0]) { - minStartTime = clip.tracks[i].times[0]; - } - } - for (let i = 0; i < clip.tracks.length; ++i) { - clip.tracks[i].shift(-1 * minStartTime); - } - clip.resetDuration(); - return clip; - }, - makeClipAdditive: function(targetClip, referenceFrame = 0, referenceClip = targetClip, fps = 30) { - if (fps <= 0) - fps = 30; - const numTracks = referenceClip.tracks.length; - const referenceTime = referenceFrame / fps; - for (let i = 0; i < numTracks; ++i) { - const referenceTrack = referenceClip.tracks[i]; - const referenceTrackType = referenceTrack.ValueTypeName; - if (referenceTrackType === "bool" || referenceTrackType === "string") - continue; - const targetTrack = targetClip.tracks.find(function(track) { - return track.name === referenceTrack.name && track.ValueTypeName === referenceTrackType; - }); - if (targetTrack === void 0) - continue; - let referenceOffset = 0; - const referenceValueSize = referenceTrack.getValueSize(); - if (referenceTrack.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline) { - referenceOffset = referenceValueSize / 3; - } - let targetOffset = 0; - const targetValueSize = targetTrack.getValueSize(); - if (targetTrack.createInterpolant.isInterpolantFactoryMethodGLTFCubicSpline) { - targetOffset = targetValueSize / 3; - } - const lastIndex = referenceTrack.times.length - 1; - let referenceValue; - if (referenceTime <= referenceTrack.times[0]) { - const startIndex = referenceOffset; - const endIndex = referenceValueSize - referenceOffset; - referenceValue = AnimationUtils.arraySlice(referenceTrack.values, startIndex, endIndex); - } else if (referenceTime >= referenceTrack.times[lastIndex]) { - const startIndex = lastIndex * referenceValueSize + referenceOffset; - const endIndex = startIndex + referenceValueSize - referenceOffset; - referenceValue = AnimationUtils.arraySlice(referenceTrack.values, startIndex, endIndex); - } else { - const interpolant = referenceTrack.createInterpolant(); - const startIndex = referenceOffset; - const endIndex = referenceValueSize - referenceOffset; - interpolant.evaluate(referenceTime); - referenceValue = AnimationUtils.arraySlice(interpolant.resultBuffer, startIndex, endIndex); - } - if (referenceTrackType === "quaternion") { - const referenceQuat = new Quaternion().fromArray(referenceValue).normalize().conjugate(); - referenceQuat.toArray(referenceValue); - } - const numTimes = targetTrack.times.length; - for (let j = 0; j < numTimes; ++j) { - const valueStart = j * targetValueSize + targetOffset; - if (referenceTrackType === "quaternion") { - Quaternion.multiplyQuaternionsFlat(targetTrack.values, valueStart, referenceValue, 0, targetTrack.values, valueStart); - } else { - const valueEnd = targetValueSize - targetOffset * 2; - for (let k = 0; k < valueEnd; ++k) { - targetTrack.values[valueStart + k] -= referenceValue[k]; - } - } +var designEditorPlugins = [ + configs, + commands, + menus, + defaultConfigs, + defaultIcons, + defaultMessages, + defaultItems, + defaultPatterns, + rendererJson, + baseEditor, + propertyEditor, + color, + gradient, + layertab, + inspector, + alignment, + position, + layout, + boxModel, + pathTool, + artboard, + svgText, + font, + text, + textShadow, + content, + appearance, + component, + backgroundImage, + patternAsset, + border, + borderRadius, + video, + image, + svgFilterAsset, + svgItem, + layerTree, + backgroundClip, + borderImage, + filter, + backdropFilter, + boxShadow, + clipPath, + exportResource, + transition, + keyframe, + animation, + selector, + codeview, + history, + project, + selectionInfoView, + selectionToolView, + guideLineView, + layerAppendView, + lineView, + hoverView, + pathDrawView, + pathEditorView, + gradientEditorView, + fillEditorView, + ClippathEditorView, + imageAsset, + sample, + function(editor) { + editor.registerMenu("context.menu.layer2", [ + { + type: "button", + title: "Layer" } - } - targetClip.blendMode = AdditiveAnimationBlendMode; - return targetClip; - } -}; -class Interpolant { - constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { - this.parameterPositions = parameterPositions; - this._cachedIndex = 0; - this.resultBuffer = resultBuffer !== void 0 ? resultBuffer : new sampleValues.constructor(sampleSize); - this.sampleValues = sampleValues; - this.valueSize = sampleSize; - this.settings = null; - this.DefaultSettings_ = {}; - } - evaluate(t) { - const pp = this.parameterPositions; - let i1 = this._cachedIndex, t1 = pp[i1], t0 = pp[i1 - 1]; - validate_interval: { - seek: { - let right2; - linear_scan: { - forward_scan: - if (!(t < t1)) { - for (let giveUpAt = i1 + 2; ; ) { - if (t1 === void 0) { - if (t < t0) - break forward_scan; - i1 = pp.length; - this._cachedIndex = i1; - return this.afterEnd_(i1 - 1, t, t0); - } - if (i1 === giveUpAt) - break; - t0 = t1; - t1 = pp[++i1]; - if (t < t1) { - break seek; - } - } - right2 = pp.length; - break linear_scan; - } - if (!(t >= t0)) { - const t1global = pp[1]; - if (t < t1global) { - i1 = 2; - t0 = t1global; - } - for (let giveUpAt = i1 - 2; ; ) { - if (t0 === void 0) { - this._cachedIndex = 0; - return this.beforeStart_(0, t, t1); - } - if (i1 === giveUpAt) - break; - t1 = t0; - t0 = pp[--i1 - 1]; - if (t >= t0) { - break seek; - } - } - right2 = i1; - i1 = 0; - break linear_scan; - } - break validate_interval; + ]); + editor.registerMenu("context.menu.layer", [ + { + type: "button", + title: "Sample" + }, + { + type: "button", + title: "Sample" + }, + { + type: "button", + title: "Sample", + action: (editor2) => { + console.log(editor2); } - while (i1 < right2) { - const mid = i1 + right2 >>> 1; - if (t < pp[mid]) { - right2 = mid; - } else { - i1 = mid + 1; + }, + { + type: "button", + title: "Sample" + }, + { + type: "dropdown", + title: "dropdown", + items: [ + { + title: "menu.item.fullscreen.title", + command: "toggle.fullscreen", + shortcut: "ALT+/", + closable: true } - } - t1 = pp[i1]; - t0 = pp[i1 - 1]; - if (t0 === void 0) { - this._cachedIndex = 0; - return this.beforeStart_(0, t, t1); - } - if (t1 === void 0) { - i1 = pp.length; - this._cachedIndex = i1; - return this.afterEnd_(i1 - 1, t0, t); - } + ] } - this._cachedIndex = i1; - this.intervalChanged_(i1, t0, t1); - } - return this.interpolate_(i1, t0, t, t1); + ]); + editor.registerUI("context.menu", { + ContextMenuView + }); } - getSettings_() { - return this.settings || this.DefaultSettings_; +]; +var CanvasView$1 = ""; +var DragAreaView$1 = ""; +class DragAreaRectView extends EditorElement { + initState() { + return { + mode: "selection", + x: 0, + y: 0, + width: 1e4, + height: 1e4, + cachedCurrentElement: {}, + html: "" + }; } - copySampleValue_(index2) { - const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, offset = index2 * stride; - for (let i = 0; i !== stride; ++i) { - result[i] = values[offset + i]; - } - return result; + template() { + return ` +
+
+
+ `; } - interpolate_() { - throw new Error("call to abstract method"); + [SUBSCRIBE("drawAreaView")](style) { + this.refs.$dragAreaRect.css(style); } - intervalChanged_() { + [SUBSCRIBE("initDrawAreaView")]() { + this.trigger("drawAreaView", { + left: Length.px(-1e4), + top: Length.px(0), + width: Length.px(0), + height: Length.px(0) + }); } -} -Interpolant.prototype.beforeStart_ = Interpolant.prototype.copySampleValue_; -Interpolant.prototype.afterEnd_ = Interpolant.prototype.copySampleValue_; -class CubicInterpolant extends Interpolant { - constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { - super(parameterPositions, sampleValues, sampleSize, resultBuffer); - this._weightPrev = -0; - this._offsetPrev = -0; - this._weightNext = -0; - this._offsetNext = -0; - this.DefaultSettings_ = { - endingStart: ZeroCurvatureEnding, - endingEnd: ZeroCurvatureEnding + [SUBSCRIBE("startDragAreaView")]() { + this.initMousePoint = this.$viewport.getWorldPosition(); + this.dragRect = { + left: Length.px(this.initMousePoint[0]), + top: Length.px(this.initMousePoint[1]), + width: Length.px(0), + height: Length.px(0) }; + this.trigger("drawAreaView", this.dragRect); } - intervalChanged_(i1, t0, t1) { - const pp = this.parameterPositions; - let iPrev = i1 - 2, iNext = i1 + 1, tPrev = pp[iPrev], tNext = pp[iNext]; - if (tPrev === void 0) { - switch (this.getSettings_().endingStart) { - case ZeroSlopeEnding: - iPrev = i1; - tPrev = 2 * t0 - t1; - break; - case WrapAroundEnding: - iPrev = pp.length - 2; - tPrev = t0 + pp[iPrev] - pp[iPrev + 1]; - break; - default: - iPrev = i1; - tPrev = t1; - } - } - if (tNext === void 0) { - switch (this.getSettings_().endingEnd) { - case ZeroSlopeEnding: - iNext = i1; - tNext = 2 * t1 - t0; - break; - case WrapAroundEnding: - iNext = 1; - tNext = t1 + pp[1] - pp[0]; - break; - default: - iNext = i1 - 1; - tNext = t0; + getSelectedItems(rect2, areaVerties) { + var project2 = this.$context.selection.currentProject; + let items = []; + let selectedArtboard = []; + if (project2) { + if (rect2.width === 0 && rect2.height === 0) { + items = []; + } else { + project2.layers.forEach((layer) => { + if (layer.is("artboard") && layer.isIncludeByArea(areaVerties)) { + selectedArtboard.push(layer); + } else if (layer.is("artboard") && layer.checkInArea(areaVerties) && layer.hasChildren() === false) { + items.push(layer); + } else { + items.push.apply(items, layer.checkInAreaForAll(areaVerties)); + } + }); + items = items.filter((it) => { + return it.isDragSelectable; + }); + if (items.length > 1) { + items = items.filter((it) => { + return it.is("artboard") === false; + }); + } } } - const halfDt = (t1 - t0) * 0.5, stride = this.valueSize; - this._weightPrev = halfDt / (t0 - tPrev); - this._weightNext = halfDt / (tNext - t1); - this._offsetPrev = iPrev * stride; - this._offsetNext = iNext * stride; + const selectedItems = selectedArtboard.length ? selectedArtboard : items; + return selectedItems; } - interpolate_(i1, t0, t, t1) { - const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, o1 = i1 * stride, o0 = o1 - stride, oP = this._offsetPrev, oN = this._offsetNext, wP = this._weightPrev, wN = this._weightNext, p = (t - t0) / (t1 - t0), pp = p * p, ppp = pp * p; - const sP = -wP * ppp + 2 * wP * pp - wP * p; - const s0 = (1 + wP) * ppp + (-1.5 - 2 * wP) * pp + (-0.5 + wP) * p + 1; - const s1 = (-1 - wN) * ppp + (1.5 + wN) * pp + 0.5 * p; - const sN = wN * ppp - wN * pp; - for (let i = 0; i !== stride; ++i) { - result[i] = sP * values[oP + i] + s0 * values[o0 + i] + s1 * values[o1 + i] + sN * values[oN + i]; + [SUBSCRIBE("moveDragAreaView")]() { + const e = this.$config.get("bodyEvent"); + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); + if (e.shiftKey) { + newDist[1] = newDist[0]; } - return result; - } -} -class LinearInterpolant extends Interpolant { - constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { - super(parameterPositions, sampleValues, sampleSize, resultBuffer); + const startVertex = floor([], this.initMousePoint); + const endVertex = floor([], add$1([], this.initMousePoint, newDist)); + const start2 = this.$viewport.applyVertex(startVertex); + const end2 = this.$viewport.applyVertex(endVertex); + const locaRect = toRectVerties([start2, end2]); + this.dragRect = { + left: locaRect[0][0], + top: locaRect[0][1], + width: Math.abs(locaRect[1][0] - locaRect[0][0]), + height: Math.abs(locaRect[3][1] - locaRect[0][1]) + }; + this.trigger("drawAreaView", { + left: Length.px(this.dragRect.left), + top: Length.px(this.dragRect.top), + width: Length.px(this.dragRect.width), + height: Length.px(this.dragRect.height) + }); + var { left: x, top: y, width: width2, height: height2 } = this.dragRect; + var rect2 = { + x, + y, + width: width2, + height: height2 + }; + const selectedItems = this.getSelectedItems(rect2, toRectVertiesWithoutTransformOrigin([startVertex, endVertex])); + this.$context.selection.selectByGroup(...selectedItems); } - interpolate_(i1, t0, t, t1) { - const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, offset1 = i1 * stride, offset0 = offset1 - stride, weight1 = (t - t0) / (t1 - t0), weight0 = 1 - weight1; - for (let i = 0; i !== stride; ++i) { - result[i] = values[offset0 + i] * weight0 + values[offset1 + i] * weight1; + [SUBSCRIBE("endDragAreaView")]() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); + this.$config.init("set.move.control.point", false); + if (newDist[0] === 0 && newDist[1] === 0) { + this.$context.selection.empty(); } - return result; + this.trigger("initDrawAreaView"); + this.$context.selection.reselect(); + this.$commands.emit("history.refreshSelection"); } } -class DiscreteInterpolant extends Interpolant { - constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { - super(parameterPositions, sampleValues, sampleSize, resultBuffer); - } - interpolate_(i1) { - return this.copySampleValue_(i1 - 1); +class DragAreaView extends EditorElement { + initState() { + return { + mode: "selection", + x: 0, + y: 0, + width: 1e4, + height: 1e4, + cachedCurrentElement: {}, + html: "" + }; } -} -class KeyframeTrack { - constructor(name, times, values, interpolation) { - if (name === void 0) - throw new Error("THREE.KeyframeTrack: track name is undefined"); - if (times === void 0 || times.length === 0) - throw new Error("THREE.KeyframeTrack: no keyframes in track named " + name); - this.name = name; - this.times = AnimationUtils.convertArray(times, this.TimeBufferType); - this.values = AnimationUtils.convertArray(values, this.ValueBufferType); - this.setInterpolation(interpolation || this.DefaultInterpolation); + template() { + return ` +
+ `; } - static toJSON(track) { - const trackType = track.constructor; - let json; - if (trackType.toJSON !== this.toJSON) { - json = trackType.toJSON(track); - } else { - json = { - "name": track.name, - "times": AnimationUtils.convertArray(track.times, Array), - "values": AnimationUtils.convertArray(track.values, Array) - }; - const interpolation = track.getInterpolation(); - if (interpolation !== track.DefaultInterpolation) { - json.interpolation = interpolation; - } + checkSelectionArea(e) { + const mousePoint = this.$viewport.getWorldPosition(e); + if (this.$context.selection.hasPoint(mousePoint)) { + return true; } - json.type = track.ValueTypeName; - return json; - } - InterpolantFactoryMethodDiscrete(result) { - return new DiscreteInterpolant(this.times, this.values, this.getValueSize(), result); } - InterpolantFactoryMethodLinear(result) { - return new LinearInterpolant(this.times, this.values, this.getValueSize(), result); - } - InterpolantFactoryMethodSmooth(result) { - return new CubicInterpolant(this.times, this.values, this.getValueSize(), result); - } - setInterpolation(interpolation) { - let factoryMethod; - switch (interpolation) { - case InterpolateDiscrete: - factoryMethod = this.InterpolantFactoryMethodDiscrete; - break; - case InterpolateLinear: - factoryMethod = this.InterpolantFactoryMethodLinear; - break; - case InterpolateSmooth: - factoryMethod = this.InterpolantFactoryMethodSmooth; - break; + checkEditMode(e) { + if (this.$config.is("editing.mode", EditingMode.HAND)) { + return false; } - if (factoryMethod === void 0) { - const message = "unsupported interpolation for " + this.ValueTypeName + " keyframe track named " + this.name; - if (this.createInterpolant === void 0) { - if (interpolation !== this.DefaultInterpolation) { - this.setInterpolation(this.DefaultInterpolation); + const code2 = this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space); + if (this.$context.keyboardManager.check(code2)) { + return false; + } + const mousePoint = this.$viewport.getWorldPosition(e); + this.inSelection = false; + if (this.$context.selection.hasPoint(mousePoint)) { + this.inSelection = true; + if (this.$context.selection.current.is("artboard")) { + if (this.$context.selection.current.hasChildren()) { + this.$config.init("set.dragarea.mode", true); + this.$config.init("set.move.mode", false); + return true; } else { - throw new Error(message); + this.$config.init("set.dragarea.mode", false); + this.$config.init("set.move.mode", true); + return true; } + } else { + this.$config.init("set.dragarea.mode", false); + this.$config.init("set.move.mode", true); + return true; } - console.warn("THREE.KeyframeTrack:", message); - return this; } - this.createInterpolant = factoryMethod; - return this; + this.mouseOverItem = this.$context.selection.filteredLayers[0]; + if (this.mouseOverItem) { + this.$config.init("set.dragarea.mode", false); + this.$config.init("set.move.mode", true); + } else { + this.$config.init("set.dragarea.mode", true); + this.$config.init("set.move.mode", false); + } + return true; } - getInterpolation() { - switch (this.createInterpolant) { - case this.InterpolantFactoryMethodDiscrete: - return InterpolateDiscrete; - case this.InterpolantFactoryMethodLinear: - return InterpolateLinear; - case this.InterpolantFactoryMethodSmooth: - return InterpolateSmooth; + [POINTERSTART("$dragAreaView") + IF("checkEditMode") + MOVE("movePointer") + END("moveEndPointer")]() { + if (this.$config.get("set.dragarea.mode")) { + this.emit("startDragAreaView"); } + this.$config.set("editing.mode.itemType", "select"); } - getValueSize() { - return this.values.length / this.times.length; + initializeDragSelection() { + this.$context.selection.reselect(); + this.$context.snapManager.clear(); } - shift(timeOffset) { - if (timeOffset !== 0) { - const times = this.times; - for (let i = 0, n = times.length; i !== n; ++i) { - times[i] += timeOffset; - } + movePointer() { + if (this.$config.get("set.dragarea.mode")) { + this.emit("moveDragAreaView"); } - return this; } - scale(timeScale) { - if (timeScale !== 1) { - const times = this.times; - for (let i = 0, n = times.length; i !== n; ++i) { - times[i] *= timeScale; - } + moveEndPointer() { + if (this.$config.get("set.dragarea.mode")) { + this.emit("endDragAreaView"); } - return this; + this.$config.init("set.dragarea.mode", false); + this.$config.init("set.move.mode", false); } - trim(startTime, endTime) { - const times = this.times, nKeys = times.length; - let from = 0, to = nKeys - 1; - while (from !== nKeys && times[from] < startTime) { - ++from; - } - while (to !== -1 && times[to] > endTime) { - --to; - } - ++to; - if (from !== 0 || to !== nKeys) { - if (from >= to) { - to = Math.max(to, 1); - from = to - 1; - } - const stride = this.getValueSize(); - this.times = AnimationUtils.arraySlice(times, from, to); - this.values = AnimationUtils.arraySlice(this.values, from * stride, to * stride); - } - return this; +} +var PageTools$1 = ""; +class PageTools extends EditorElement { + template() { + return ` +
+ +
+ ${createComponent("NumberInputEditor", { + ref: "$scaleInput", + min: 10, + max: 240, + step: 1, + key: "scale", + value: this.$viewport.scale * 100, + onchange: this.subscribe((key, scale2) => { + this.$viewport.setScale(scale2 / 100); + this.emit(UPDATE_VIEWPORT); + this.trigger(UPDATE_VIEWPORT); + }, 1e3) + })} +
+ + + + + + ${this.$injectManager.generate("page.tools")} +
+ + `; } - validate() { - let valid = true; - const valueSize = this.getValueSize(); - if (valueSize - Math.floor(valueSize) !== 0) { - console.error("THREE.KeyframeTrack: Invalid value size in track.", this); - valid = false; - } - const times = this.times, values = this.values, nKeys = times.length; - if (nKeys === 0) { - console.error("THREE.KeyframeTrack: Track is empty.", this); - valid = false; - } - let prevTime = null; - for (let i = 0; i !== nKeys; i++) { - const currTime = times[i]; - if (typeof currTime === "number" && isNaN(currTime)) { - console.error("THREE.KeyframeTrack: Time is not a valid number.", this, i, currTime); - valid = false; - break; - } - if (prevTime !== null && prevTime > currTime) { - console.error("THREE.KeyframeTrack: Out of order keys.", this, i, currTime, prevTime); - valid = false; - break; - } - prevTime = currTime; - } - if (values !== void 0) { - if (AnimationUtils.isTypedArray(values)) { - for (let i = 0, n = values.length; i !== n; ++i) { - const value = values[i]; - if (isNaN(value)) { - console.error("THREE.KeyframeTrack: Value is not a valid number.", this, i, value); - valid = false; - break; - } - } - } - } - return valid; - } - optimize() { - const times = AnimationUtils.arraySlice(this.times), values = AnimationUtils.arraySlice(this.values), stride = this.getValueSize(), smoothInterpolation = this.getInterpolation() === InterpolateSmooth, lastIndex = times.length - 1; - let writeIndex = 1; - for (let i = 1; i < lastIndex; ++i) { - let keep = false; - const time = times[i]; - const timeNext = times[i + 1]; - if (time !== timeNext && (i !== 1 || time !== times[0])) { - if (!smoothInterpolation) { - const offset = i * stride, offsetP = offset - stride, offsetN = offset + stride; - for (let j = 0; j !== stride; ++j) { - const value = values[offset + j]; - if (value !== values[offsetP + j] || value !== values[offsetN + j]) { - keep = true; - break; - } - } - } else { - keep = true; - } - } - if (keep) { - if (i !== writeIndex) { - times[writeIndex] = times[i]; - const readOffset = i * stride, writeOffset = writeIndex * stride; - for (let j = 0; j !== stride; ++j) { - values[writeOffset + j] = values[readOffset + j]; - } - } - ++writeIndex; - } - } - if (lastIndex > 0) { - times[writeIndex] = times[lastIndex]; - for (let readOffset = lastIndex * stride, writeOffset = writeIndex * stride, j = 0; j !== stride; ++j) { - values[writeOffset + j] = values[readOffset + j]; - } - ++writeIndex; - } - if (writeIndex !== times.length) { - this.times = AnimationUtils.arraySlice(times, 0, writeIndex); - this.values = AnimationUtils.arraySlice(values, 0, writeIndex * stride); - } else { - this.times = times; - this.values = values; + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + const scale2 = Math.floor(this.$viewport.scale * 100); + if (this.children.$scaleInput) { + this.children.$scaleInput.setValue(scale2); } - return this; } - clone() { - const times = AnimationUtils.arraySlice(this.times, 0); - const values = AnimationUtils.arraySlice(this.values, 0); - const TypedKeyframeTrack = this.constructor; - const track = new TypedKeyframeTrack(this.name, times, values); - track.createInterpolant = this.createInterpolant; - return track; - } -} -KeyframeTrack.prototype.TimeBufferType = Float32Array; -KeyframeTrack.prototype.ValueBufferType = Float32Array; -KeyframeTrack.prototype.DefaultInterpolation = InterpolateLinear; -class BooleanKeyframeTrack extends KeyframeTrack { -} -BooleanKeyframeTrack.prototype.ValueTypeName = "bool"; -BooleanKeyframeTrack.prototype.ValueBufferType = Array; -BooleanKeyframeTrack.prototype.DefaultInterpolation = InterpolateDiscrete; -BooleanKeyframeTrack.prototype.InterpolantFactoryMethodLinear = void 0; -BooleanKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = void 0; -class ColorKeyframeTrack extends KeyframeTrack { -} -ColorKeyframeTrack.prototype.ValueTypeName = "color"; -class NumberKeyframeTrack extends KeyframeTrack { -} -NumberKeyframeTrack.prototype.ValueTypeName = "number"; -class QuaternionLinearInterpolant extends Interpolant { - constructor(parameterPositions, sampleValues, sampleSize, resultBuffer) { - super(parameterPositions, sampleValues, sampleSize, resultBuffer); - } - interpolate_(i1, t0, t, t1) { - const result = this.resultBuffer, values = this.sampleValues, stride = this.valueSize, alpha2 = (t - t0) / (t1 - t0); - let offset = i1 * stride; - for (let end2 = offset + stride; offset !== end2; offset += 4) { - Quaternion.slerpFlat(result, 0, values, offset - stride, values, offset, alpha2); - } - return result; + [CLICK("$plus")]() { + const oldScale = this.$viewport.scale; + this.$viewport.setScale(oldScale + 0.01); + this.emit(UPDATE_VIEWPORT); + this.trigger(UPDATE_VIEWPORT); } -} -class QuaternionKeyframeTrack extends KeyframeTrack { - InterpolantFactoryMethodLinear(result) { - return new QuaternionLinearInterpolant(this.times, this.values, this.getValueSize(), result); - } -} -QuaternionKeyframeTrack.prototype.ValueTypeName = "quaternion"; -QuaternionKeyframeTrack.prototype.DefaultInterpolation = InterpolateLinear; -QuaternionKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = void 0; -class StringKeyframeTrack extends KeyframeTrack { -} -StringKeyframeTrack.prototype.ValueTypeName = "string"; -StringKeyframeTrack.prototype.ValueBufferType = Array; -StringKeyframeTrack.prototype.DefaultInterpolation = InterpolateDiscrete; -StringKeyframeTrack.prototype.InterpolantFactoryMethodLinear = void 0; -StringKeyframeTrack.prototype.InterpolantFactoryMethodSmooth = void 0; -class VectorKeyframeTrack extends KeyframeTrack { -} -VectorKeyframeTrack.prototype.ValueTypeName = "vector"; -class AnimationClip { - constructor(name, duration = -1, tracks, blendMode = NormalAnimationBlendMode) { - this.name = name; - this.tracks = tracks; - this.duration = duration; - this.blendMode = blendMode; - this.uuid = generateUUID(); - if (this.duration < 0) { - this.resetDuration(); - } - } - static parse(json) { - const tracks = [], jsonTracks = json.tracks, frameTime = 1 / (json.fps || 1); - for (let i = 0, n = jsonTracks.length; i !== n; ++i) { - tracks.push(parseKeyframeTrack(jsonTracks[i]).scale(frameTime)); - } - const clip = new this(json.name, json.duration, tracks, json.blendMode); - clip.uuid = json.uuid; - return clip; - } - static toJSON(clip) { - const tracks = [], clipTracks = clip.tracks; - const json = { - "name": clip.name, - "duration": clip.duration, - "tracks": tracks, - "uuid": clip.uuid, - "blendMode": clip.blendMode - }; - for (let i = 0, n = clipTracks.length; i !== n; ++i) { - tracks.push(KeyframeTrack.toJSON(clipTracks[i])); - } - return json; + [CLICK("$minus")]() { + const oldScale = this.$viewport.scale; + this.$viewport.setScale(oldScale - 0.01); + this.emit(UPDATE_VIEWPORT); + this.trigger(UPDATE_VIEWPORT); } - static CreateFromMorphTargetSequence(name, morphTargetSequence, fps, noLoop) { - const numMorphTargets = morphTargetSequence.length; - const tracks = []; - for (let i = 0; i < numMorphTargets; i++) { - let times = []; - let values = []; - times.push((i + numMorphTargets - 1) % numMorphTargets, i, (i + 1) % numMorphTargets); - values.push(0, 1, 0); - const order = AnimationUtils.getKeyframeOrder(times); - times = AnimationUtils.sortedArray(times, 1, order); - values = AnimationUtils.sortedArray(values, 1, order); - if (!noLoop && times[0] === 0) { - times.push(numMorphTargets); - values.push(values[0]); - } - tracks.push(new NumberKeyframeTrack(".morphTargetInfluences[" + morphTargetSequence[i].name + "]", times, values).scale(1 / fps)); - } - return new this(name, -1, tracks); + [CLICK("$center")]() { + this.$commands.emit("moveSelectionToCenter"); } - static findByName(objectOrClipArray, name) { - let clipArray = objectOrClipArray; - if (!Array.isArray(objectOrClipArray)) { - const o = objectOrClipArray; - clipArray = o.geometry && o.geometry.animations || o.animations; - } - for (let i = 0; i < clipArray.length; i++) { - if (clipArray[i].name === name) { - return clipArray[i]; - } - } - return null; + [CLICK("$ruler")]() { + this.$config.toggle("show.ruler"); } - static CreateClipsFromMorphTargetSequences(morphTargets, fps, noLoop) { - const animationToMorphTargets = {}; - const pattern = /^([\w-]*?)([\d]+)$/; - for (let i = 0, il = morphTargets.length; i < il; i++) { - const morphTarget = morphTargets[i]; - const parts = morphTarget.name.match(pattern); - if (parts && parts.length > 1) { - const name = parts[1]; - let animationMorphTargets = animationToMorphTargets[name]; - if (!animationMorphTargets) { - animationToMorphTargets[name] = animationMorphTargets = []; - } - animationMorphTargets.push(morphTarget); - } - } - const clips = []; - for (const name in animationToMorphTargets) { - clips.push(this.CreateFromMorphTargetSequence(name, animationToMorphTargets[name], fps, noLoop)); - } - return clips; + [CLICK("$fullscreen")]() { + this.emit("bodypanel.toggle.fullscreen"); } - static parseAnimation(animation2, bones) { - if (!animation2) { - console.error("THREE.AnimationClip: No animation in JSONLoader data."); - return null; - } - const addNonemptyTrack = function(trackType, trackName, animationKeys, propertyName, destTracks) { - if (animationKeys.length !== 0) { - const times = []; - const values = []; - AnimationUtils.flattenJSON(animationKeys, times, values, propertyName); - if (times.length !== 0) { - destTracks.push(new trackType(trackName, times, values)); - } - } - }; - const tracks = []; - const clipName = animation2.name || "default"; - const fps = animation2.fps || 30; - const blendMode = animation2.blendMode; - let duration = animation2.length || -1; - const hierarchyTracks = animation2.hierarchy || []; - for (let h = 0; h < hierarchyTracks.length; h++) { - const animationKeys = hierarchyTracks[h].keys; - if (!animationKeys || animationKeys.length === 0) - continue; - if (animationKeys[0].morphTargets) { - const morphTargetNames = {}; - let k; - for (k = 0; k < animationKeys.length; k++) { - if (animationKeys[k].morphTargets) { - for (let m = 0; m < animationKeys[k].morphTargets.length; m++) { - morphTargetNames[animationKeys[k].morphTargets[m]] = -1; - } - } - } - for (const morphTargetName in morphTargetNames) { - const times = []; - const values = []; - for (let m = 0; m !== animationKeys[k].morphTargets.length; ++m) { - const animationKey = animationKeys[k]; - times.push(animationKey.time); - values.push(animationKey.morphTarget === morphTargetName ? 1 : 0); - } - tracks.push(new NumberKeyframeTrack(".morphTargetInfluence[" + morphTargetName + "]", times, values)); + [CLICK("$buttons button")](e) { + const itemId = e.$dt.data("item-id"); + const pathIndex = e.$dt.data("path-index"); + const current = this.$editor.get(itemId); + if (current.editablePath) { + this.$commands.emit("open.editor", current); + } else { + const pathList = PathParser.fromSVGString(current.absolutePath().d).toPathList(); + this.emit("showPathEditor", "modify", { + box: "canvas", + current, + matrix: current.matrix, + d: pathList[pathIndex].d, + changeEvent: (data) => { + pathList[pathIndex].reset(data.d); + const newPathD = current.invertPath(PathParser.joinPathList(pathList).d).d; + this.$commands.executeCommand("setAttribute", "modify sub path", { + [itemId]: current.updatePath(newPathD) + }); } - duration = morphTargetNames.length * fps; - } else { - const boneName = ".bones[" + bones[h].name + "]"; - addNonemptyTrack(VectorKeyframeTrack, boneName + ".position", animationKeys, "pos", tracks); - addNonemptyTrack(QuaternionKeyframeTrack, boneName + ".quaternion", animationKeys, "rot", tracks); - addNonemptyTrack(VectorKeyframeTrack, boneName + ".scale", animationKeys, "scl", tracks); - } - } - if (tracks.length === 0) { - return null; - } - const clip = new this(clipName, duration, tracks, blendMode); - return clip; - } - resetDuration() { - const tracks = this.tracks; - let duration = 0; - for (let i = 0, n = tracks.length; i !== n; ++i) { - const track = this.tracks[i]; - duration = Math.max(duration, track.times[track.times.length - 1]); + }); } - this.duration = duration; - return this; + this.emit("hideSelectionToolView"); } - trim() { - for (let i = 0; i < this.tracks.length; i++) { - this.tracks[i].trim(0, this.duration); +} +const char_list = [/\(/gi, /\)/gi]; +const function_list = "grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map((it) => { + return new RegExp(it, "gi"); +}); +const keyword_list = "butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map((it) => { + return new RegExp(it, "gi"); +}); +function replaceKeyword(str) { + keyword_list.forEach((ke) => { + str = str.replace(ke, (str2) => { + return `${str2}`; + }); + }); + function_list.forEach((ke) => { + str = str.replace(ke, (str2) => { + return `${str2}`; + }); + }); + char_list.forEach((ke) => { + str = str.replace(ke, (str2) => { + return `${str2}`; + }); + }); + return str; +} +function filterKeyName(str) { + return str.split(";").filter((it) => it.trim()).map((it) => { + it = it.trim(); + var [key, value] = it.split(":").map((it2) => it2.trim()); + if (value === "") { + return ""; } - return this; + return `
${key}: ${replaceKeyword(value)};
`; + }).join("").trim(); +} +function modifyNewLine(str) { + return str.replace(/;/gi, ";\n").trim(); +} +class HTMLRenderer { + constructor(editor) { + __privateAdd(this, _id, void 0); + __privateAdd(this, _renderers, {}); + this.editor = editor; + __privateSet(this, _id, uuid()); } - validate() { - let valid = true; - for (let i = 0; i < this.tracks.length; i++) { - valid = valid && this.tracks[i].validate(); - } - return valid; + setRendererType(itemType, renderInstance) { + renderInstance.setRenderer(this); + __privateGet(this, _renderers)[itemType] = renderInstance; } - optimize() { - for (let i = 0; i < this.tracks.length; i++) { - this.tracks[i].optimize(); - } - return this; + get id() { + return __privateGet(this, _id); } - clone() { - const tracks = []; - for (let i = 0; i < this.tracks.length; i++) { - tracks.push(this.tracks[i].clone()); - } - return new this.constructor(this.name, this.duration, tracks, this.blendMode); + getDefaultRendererInstance() { + return __privateGet(this, _renderers)["rect"]; } - toJSON() { - return this.constructor.toJSON(this); - } -} -function getTrackTypeForValueTypeName(typeName) { - switch (typeName.toLowerCase()) { - case "scalar": - case "double": - case "float": - case "number": - case "integer": - return NumberKeyframeTrack; - case "vector": - case "vector2": - case "vector3": - case "vector4": - return VectorKeyframeTrack; - case "color": - return ColorKeyframeTrack; - case "quaternion": - return QuaternionKeyframeTrack; - case "bool": - case "boolean": - return BooleanKeyframeTrack; - case "string": - return StringKeyframeTrack; - } - throw new Error("THREE.KeyframeTrack: Unsupported typeName: " + typeName); -} -function parseKeyframeTrack(json) { - if (json.type === void 0) { - throw new Error("THREE.KeyframeTrack: track type undefined, can not parse"); - } - const trackType = getTrackTypeForValueTypeName(json.type); - if (json.times === void 0) { - const times = [], values = []; - AnimationUtils.flattenJSON(json.keys, times, values, "value"); - json.times = times; - json.values = values; - } - if (trackType.parse !== void 0) { - return trackType.parse(json); - } else { - return new trackType(json.name, json.times, json.values, json.interpolation); + getRendererInstance(item) { + const currentRenderer = __privateGet(this, _renderers)[item.itemType] || this.editor.getRendererInstance("html", item.itemType) || this.getDefaultRendererInstance() || item; + currentRenderer.setRenderer(this); + return currentRenderer; } -} -const Cache = { - enabled: false, - files: {}, - add: function(key, file) { - if (this.enabled === false) - return; - this.files[key] = file; - }, - get: function(key) { - if (this.enabled === false) + render(item) { + if (!item) return; - return this.files[key]; - }, - remove: function(key) { - delete this.files[key]; - }, - clear: function() { - this.files = {}; - } -}; -class LoadingManager { - constructor(onLoad, onProgress, onError) { - const scope = this; - let isLoading = false; - let itemsLoaded = 0; - let itemsTotal = 0; - let urlModifier = void 0; - const handlers = []; - this.onStart = void 0; - this.onLoad = onLoad; - this.onProgress = onProgress; - this.onError = onError; - this.itemStart = function(url) { - itemsTotal++; - if (isLoading === false) { - if (scope.onStart !== void 0) { - scope.onStart(url, itemsLoaded, itemsTotal); - } - } - isLoading = true; - }; - this.itemEnd = function(url) { - itemsLoaded++; - if (scope.onProgress !== void 0) { - scope.onProgress(url, itemsLoaded, itemsTotal); - } - if (itemsLoaded === itemsTotal) { - isLoading = false; - if (scope.onLoad !== void 0) { - scope.onLoad(); - } - } - }; - this.itemError = function(url) { - if (scope.onError !== void 0) { - scope.onError(url); - } - }; - this.resolveURL = function(url) { - if (urlModifier) { - return urlModifier(url); - } - return url; - }; - this.setURLModifier = function(transform2) { - urlModifier = transform2; - return this; - }; - this.addHandler = function(regex, loader) { - handlers.push(regex, loader); - return this; - }; - this.removeHandler = function(regex) { - const index2 = handlers.indexOf(regex); - if (index2 !== -1) { - handlers.splice(index2, 2); - } - return this; - }; - this.getHandler = function(file) { - for (let i = 0, l = handlers.length; i < l; i += 2) { - const regex = handlers[i]; - const loader = handlers[i + 1]; - if (regex.global) - regex.lastIndex = 0; - if (regex.test(file)) { - return loader; - } - } - return null; - }; + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.render(item); + } } -} -const DefaultLoadingManager = new LoadingManager(); -class Loader { - constructor(manager) { - this.manager = manager !== void 0 ? manager : DefaultLoadingManager; - this.crossOrigin = "anonymous"; - this.withCredentials = false; - this.path = ""; - this.resourcePath = ""; - this.requestHeader = {}; + renderSVG(item) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer.renderSVG)) { + return currentRenderer.renderSVG(item); + } + return this.getDefaultRendererInstance().renderSVG(item); } - load() { + to(type, item) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer[type])) { + return currentRenderer[type].call(currentRenderer, item); + } + const defaultInstance = this.getDefaultRendererInstance(); + if (isFunction(defaultInstance[type])) { + return defaultInstance[type].call(defaultInstance, item); + } } - loadAsync(url, onProgress) { - const scope = this; - return new Promise(function(resolve, reject) { - scope.load(url, resolve, onProgress, reject); + toCSS(item, omit = {}) { + const css = this.to("toCSS", item); + Object.keys(omit).forEach((key) => { + delete css[key]; }); + return css; } - parse() { - } - setCrossOrigin(crossOrigin) { - this.crossOrigin = crossOrigin; - return this; + toNestedCSS(item) { + return this.to("toNestedCSS", item); } - setWithCredentials(value) { - this.withCredentials = value; - return this; + toTransformCSS(item) { + return this.to("toTransformCSS", item); } - setPath(path) { - this.path = path; - return this; + toGridLayoutCSS(item) { + return this.to("toGridLayoutCSS", item); } - setResourcePath(resourcePath) { - this.resourcePath = resourcePath; - return this; + toLayoutItemCSS(item) { + return this.to("toLayoutItemCSS", item); } - setRequestHeader(requestHeader) { - this.requestHeader = requestHeader; - return this; + toLayoutBaseModelCSS(item) { + return this.to("toLayoutBaseModelCSS", item); } -} -const loading = {}; -class FileLoader extends Loader { - constructor(manager) { - super(manager); - } - load(url, onLoad, onProgress, onError) { - if (url === void 0) - url = ""; - if (this.path !== void 0) - url = this.path + url; - url = this.manager.resolveURL(url); - const cached = Cache.get(url); - if (cached !== void 0) { - this.manager.itemStart(url); - setTimeout(() => { - if (onLoad) - onLoad(cached); - this.manager.itemEnd(url); - }, 0); - return cached; - } - if (loading[url] !== void 0) { - loading[url].push({ - onLoad, - onProgress, - onError - }); - return; + toStyle(item) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer.toStyle)) { + return currentRenderer.toStyle(item); } - loading[url] = []; - loading[url].push({ - onLoad, - onProgress, - onError - }); - const req = new Request(url, { - headers: new Headers(this.requestHeader), - credentials: this.withCredentials ? "include" : "same-origin" - }); - const mimeType = this.mimeType; - const responseType = this.responseType; - fetch(req).then((response) => { - if (response.status === 200 || response.status === 0) { - if (response.status === 0) { - console.warn("THREE.FileLoader: HTTP Status 0 received."); - } - if (typeof ReadableStream === "undefined" || response.body === void 0 || response.body.getReader === void 0) { - return response; - } - const callbacks = loading[url]; - const reader = response.body.getReader(); - const contentLength = response.headers.get("Content-Length"); - const total = contentLength ? parseInt(contentLength) : 0; - const lengthComputable = total !== 0; - let loaded = 0; - const stream = new ReadableStream({ - start(controller) { - readData(); - function readData() { - reader.read().then(({ done, value }) => { - if (done) { - controller.close(); - } else { - loaded += value.byteLength; - const event = new ProgressEvent("progress", { lengthComputable, loaded, total }); - for (let i = 0, il = callbacks.length; i < il; i++) { - const callback = callbacks[i]; - if (callback.onProgress) - callback.onProgress(event); - } - controller.enqueue(value); - readData(); - } - }); - } - } - }); - return new Response(stream); - } else { - throw Error(`fetch for "${response.url}" responded with ${response.status}: ${response.statusText}`); - } - }).then((response) => { - switch (responseType) { - case "arraybuffer": - return response.arrayBuffer(); - case "blob": - return response.blob(); - case "document": - return response.text().then((text2) => { - const parser = new DOMParser(); - return parser.parseFromString(text2, mimeType); - }); - case "json": - return response.json(); - default: - if (mimeType === void 0) { - return response.text(); - } else { - const re = /charset="?([^;"\s]*)"?/i; - const exec = re.exec(mimeType); - const label = exec && exec[1] ? exec[1].toLowerCase() : void 0; - const decoder = new TextDecoder(label); - return response.arrayBuffer().then((ab) => decoder.decode(ab)); - } - } - }).then((data) => { - Cache.add(url, data); - const callbacks = loading[url]; - delete loading[url]; - for (let i = 0, il = callbacks.length; i < il; i++) { - const callback = callbacks[i]; - if (callback.onLoad) - callback.onLoad(data); - } - }).catch((err) => { - const callbacks = loading[url]; - if (callbacks === void 0) { - this.manager.itemError(url); - throw err; - } - delete loading[url]; - for (let i = 0, il = callbacks.length; i < il; i++) { - const callback = callbacks[i]; - if (callback.onError) - callback.onError(err); - } - this.manager.itemError(url); - }).finally(() => { - this.manager.itemEnd(url); - }); - this.manager.itemStart(url); - } - setResponseType(value) { - this.responseType = value; - return this; + return this.getDefaultRendererInstance().toStyle(item); } - setMimeType(value) { - this.mimeType = value; - return this; + toStyleData(item) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer.toStyleData)) { + return currentRenderer.toStyleData(item); + } + return this.getDefaultRendererInstance().toStyleData(item); } -} -class ImageLoader extends Loader { - constructor(manager) { - super(manager); - } - load(url, onLoad, onProgress, onError) { - if (this.path !== void 0) - url = this.path + url; - url = this.manager.resolveURL(url); - const scope = this; - const cached = Cache.get(url); - if (cached !== void 0) { - scope.manager.itemStart(url); - setTimeout(function() { - if (onLoad) - onLoad(cached); - scope.manager.itemEnd(url); - }, 0); - return cached; - } - const image2 = createElementNS("img"); - function onImageLoad() { - removeEventListeners(); - Cache.add(url, this); - if (onLoad) - onLoad(this); - scope.manager.itemEnd(url); - } - function onImageError(event) { - removeEventListeners(); - if (onError) - onError(event); - scope.manager.itemError(url); - scope.manager.itemEnd(url); - } - function removeEventListeners() { - image2.removeEventListener("load", onImageLoad, false); - image2.removeEventListener("error", onImageError, false); - } - image2.addEventListener("load", onImageLoad, false); - image2.addEventListener("error", onImageError, false); - if (url.slice(0, 5) !== "data:") { - if (this.crossOrigin !== void 0) - image2.crossOrigin = this.crossOrigin; - } - scope.manager.itemStart(url); - image2.src = url; - return image2; + toExportStyle(item) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer.toExportStyle)) { + return currentRenderer.toExportStyle(item); + } + return this.getDefaultRendererInstance().toExportStyle(item); } -} -class CubeTextureLoader extends Loader { - constructor(manager) { - super(manager); - } - load(urls, onLoad, onProgress, onError) { - const texture2 = new CubeTexture(); - const loader = new ImageLoader(this.manager); - loader.setCrossOrigin(this.crossOrigin); - loader.setPath(this.path); - let loaded = 0; - function loadTexture(i) { - loader.load(urls[i], function(image2) { - texture2.images[i] = image2; - loaded++; - if (loaded === 6) { - texture2.needsUpdate = true; - if (onLoad) - onLoad(texture2); - } - }, void 0, onError); + update(item, currentElement, editor) { + const currentRenderer = this.getRendererInstance(item); + if (isFunction(currentRenderer.update)) { + return currentRenderer.update(item, currentElement, editor); } - for (let i = 0; i < urls.length; ++i) { - loadTexture(i); + return this.getDefaultRendererInstance().update(item, currentElement, editor); + } + codeview(item) { + if (!item) { + return ""; } - return texture2; + const currentProject = item.project; + let keyframeCode = modifyNewLine(filterKeyName(currentProject ? currentProject.toKeyframeString() : "")); + let rootVariable = currentProject ? CSS_TO_STRING(currentProject.toRootVariableCSS()) : ""; + const current = item; + const cssCode = filterKeyName(current ? TAG_TO_STRING(CSS_TO_STRING(this.toCSS(current))) : ""); + const nestedCssCode = current ? this.toNestedCSS(current).map((it) => { + var cssText = it.cssText ? it.cssText : CSS_TO_STRING(it.css); + return `${it.selector} { + ${filterKeyName(TAG_TO_STRING(cssText))} + }`; + }) : []; + const selectorCode = current ? current.selectors : []; + return ` +
+ +${cssCode && `
${cssCode}
`} + +${nestedCssCode.map((it) => { + return `
${it}
`; + }).join("")} + +${(selectorCode || []).length ? `
+ ${selectorCode.map((selector2) => { + return `
${selector2.toPropertyString()}
`; + }).join("")} + +
` : ""} + +${keyframeCode && `
${keyframeCode}
`} + +${rootVariable ? `
+ + 
${rootVariable}
+
` : ""} + +
+ `; } } -class TextureLoader extends Loader { - constructor(manager) { - super(manager); +_id = new WeakMap(); +_renderers = new WeakMap(); +class ArtBoardRender$1 extends DomRender { + render(item) { + var { id } = item; + return `
${this.toDefString(item)}${item.layers.map((it) => { + return this.renderer.render(it); + }).join("")}
`; } - load(url, onLoad, onProgress, onError) { - const texture2 = new Texture(); - const loader = new ImageLoader(this.manager); - loader.setCrossOrigin(this.crossOrigin); - loader.setPath(this.path); - loader.load(url, function(image2) { - texture2.image = image2; - texture2.needsUpdate = true; - if (onLoad !== void 0) { - onLoad(texture2); - } - }, onProgress, onError); - return texture2; + toBorderCSS() { + return {}; } } -class Light extends Object3D { - constructor(color2, intensity = 1) { - super(); - this.type = "Light"; - this.color = new Color(color2); - this.intensity = intensity; - } - dispose() { - } - copy(source2) { - super.copy(source2); - this.color.copy(source2.color); - this.intensity = source2.intensity; - return this; - } - toJSON(meta) { - const data = super.toJSON(meta); - data.object.color = this.color.getHex(); - data.object.intensity = this.intensity; - if (this.groundColor !== void 0) - data.object.groundColor = this.groundColor.getHex(); - if (this.distance !== void 0) - data.object.distance = this.distance; - if (this.angle !== void 0) - data.object.angle = this.angle; - if (this.decay !== void 0) - data.object.decay = this.decay; - if (this.penumbra !== void 0) - data.object.penumbra = this.penumbra; - if (this.shadow !== void 0) - data.object.shadow = this.shadow.toJSON(); - return data; +class SVGItemRender$1 extends LayerRender { + update(item, currentElement) { + this.updateElementCache(item, currentElement); + super.update(item, currentElement); } -} -Light.prototype.isLight = true; -class HemisphereLight extends Light { - constructor(skyColor, groundColor, intensity) { - super(skyColor, intensity); - this.type = "HemisphereLight"; - this.position.copy(Object3D.DefaultUp); - this.updateMatrix(); - this.groundColor = new Color(groundColor); + updateElementCache(item, currentElement) { + if (item.getCache("element") !== currentElement) { + item.addCache("element", currentElement); + const $path = currentElement.$("path"); + item.addCache("svgElement", $path.parent().el); + item.addCache("pathElement", $path.el); + } } - copy(source2) { - Light.prototype.copy.call(this, source2); - this.groundColor.copy(source2.groundColor); - return this; + updateDefString(item, currentElement) { + var $defs = currentElement.$("defs"); + if ($defs) { + $defs.updateSVGDiff(`${this.toDefInnerString(item)}`); + } else { + var str = this.toDefString(item).trim(); + currentElement.prepend(Dom.createByHTML(str)); + } } -} -HemisphereLight.prototype.isHemisphereLight = true; -const _projScreenMatrix$1 = /* @__PURE__ */ new Matrix4(); -const _lightPositionWorld$1 = /* @__PURE__ */ new Vector3(); -const _lookTarget$1 = /* @__PURE__ */ new Vector3(); -class LightShadow { - constructor(camera) { - this.camera = camera; - this.bias = 0; - this.normalBias = 0; - this.radius = 1; - this.blurSamples = 8; - this.mapSize = new Vector2(512, 512); - this.map = null; - this.mapPass = null; - this.matrix = new Matrix4(); - this.autoUpdate = true; - this.needsUpdate = false; - this._frustum = new Frustum(); - this._frameExtents = new Vector2(1, 1); - this._viewportCount = 1; - this._viewports = [ - new Vector4(0, 0, 1, 1) - ]; + toDefInnerString(item) { + return ` + ${this.toFillSVG(item)} + ${this.toStrokeSVG(item)} + `; } - getViewportCount() { - return this._viewportCount; - } - getFrustum() { - return this._frustum; - } - updateMatrices(light2) { - const shadowCamera = this.camera; - const shadowMatrix = this.matrix; - _lightPositionWorld$1.setFromMatrixPosition(light2.matrixWorld); - shadowCamera.position.copy(_lightPositionWorld$1); - _lookTarget$1.setFromMatrixPosition(light2.target.matrixWorld); - shadowCamera.lookAt(_lookTarget$1); - shadowCamera.updateMatrixWorld(); - _projScreenMatrix$1.multiplyMatrices(shadowCamera.projectionMatrix, shadowCamera.matrixWorldInverse); - this._frustum.setFromProjectionMatrix(_projScreenMatrix$1); - shadowMatrix.set(0.5, 0, 0, 0.5, 0, 0.5, 0, 0.5, 0, 0, 0.5, 0.5, 0, 0, 0, 1); - shadowMatrix.multiply(shadowCamera.projectionMatrix); - shadowMatrix.multiply(shadowCamera.matrixWorldInverse); - } - getViewport(viewportIndex) { - return this._viewports[viewportIndex]; - } - getFrameExtents() { - return this._frameExtents; - } - dispose() { - if (this.map) { - this.map.dispose(); - } - if (this.mapPass) { - this.mapPass.dispose(); - } - } - copy(source2) { - this.camera = source2.camera.clone(); - this.bias = source2.bias; - this.radius = source2.radius; - this.mapSize.copy(source2.mapSize); - return this; + fillId(item) { + return this.getInnerId(item, "fill"); } - clone() { - return new this.constructor().copy(this); + strokeId(item) { + return this.getInnerId(item, "stroke"); } - toJSON() { - const object = {}; - if (this.bias !== 0) - object.bias = this.bias; - if (this.normalBias !== 0) - object.normalBias = this.normalBias; - if (this.radius !== 1) - object.radius = this.radius; - if (this.mapSize.x !== 512 || this.mapSize.y !== 512) - object.mapSize = this.mapSize.toArray(); - object.camera = this.camera.toJSON(false).object; - delete object.camera.matrix; - return object; - } -} -class SpotLightShadow extends LightShadow { - constructor() { - super(new PerspectiveCamera(50, 1, 0.5, 500)); - this.focus = 1; - } - updateMatrices(light2) { - const camera = this.camera; - const fov2 = RAD2DEG * 2 * light2.angle * this.focus; - const aspect2 = this.mapSize.width / this.mapSize.height; - const far = light2.distance || camera.far; - if (fov2 !== camera.fov || aspect2 !== camera.aspect || far !== camera.far) { - camera.fov = fov2; - camera.aspect = aspect2; - camera.far = far; - camera.updateProjectionMatrix(); - } - super.updateMatrices(light2); - } - copy(source2) { - super.copy(source2); - this.focus = source2.focus; - return this; + cachedStroke(item) { + return item.computed("stroke", (value) => { + if (item.isBooleanItem) { + return SVGFill.parseImage("transparent"); + } else { + return SVGFill.parseImage(value || "black"); + } + }); } -} -SpotLightShadow.prototype.isSpotLightShadow = true; -class SpotLight extends Light { - constructor(color2, intensity, distance2 = 0, angle = Math.PI / 3, penumbra = 0, decay = 1) { - super(color2, intensity); - this.type = "SpotLight"; - this.position.copy(Object3D.DefaultUp); - this.updateMatrix(); - this.target = new Object3D(); - this.distance = distance2; - this.angle = angle; - this.penumbra = penumbra; - this.decay = decay; - this.shadow = new SpotLightShadow(); - } - get power() { - return this.intensity * Math.PI; - } - set power(power) { - this.intensity = power / Math.PI; - } - dispose() { - this.shadow.dispose(); - } - copy(source2) { - super.copy(source2); - this.distance = source2.distance; - this.angle = source2.angle; - this.penumbra = source2.penumbra; - this.decay = source2.decay; - this.target = source2.target.clone(); - this.shadow = source2.shadow.clone(); - return this; + cachedFill(item) { + return item.computed("fill", (value) => { + if (item.isBooleanItem) { + return SVGFill.parseImage("transparent"); + } else { + return SVGFill.parseImage(value || "black"); + } + }); } -} -SpotLight.prototype.isSpotLight = true; -const _projScreenMatrix = /* @__PURE__ */ new Matrix4(); -const _lightPositionWorld = /* @__PURE__ */ new Vector3(); -const _lookTarget = /* @__PURE__ */ new Vector3(); -class PointLightShadow extends LightShadow { - constructor() { - super(new PerspectiveCamera(90, 1, 0.5, 500)); - this._frameExtents = new Vector2(4, 2); - this._viewportCount = 6; - this._viewports = [ - new Vector4(2, 1, 1, 1), - new Vector4(0, 1, 1, 1), - new Vector4(3, 1, 1, 1), - new Vector4(1, 1, 1, 1), - new Vector4(3, 0, 1, 1), - new Vector4(1, 0, 1, 1) - ]; - this._cubeDirections = [ - new Vector3(1, 0, 0), - new Vector3(-1, 0, 0), - new Vector3(0, 0, 1), - new Vector3(0, 0, -1), - new Vector3(0, 1, 0), - new Vector3(0, -1, 0) - ]; - this._cubeUps = [ - new Vector3(0, 1, 0), - new Vector3(0, 1, 0), - new Vector3(0, 1, 0), - new Vector3(0, 1, 0), - new Vector3(0, 0, 1), - new Vector3(0, 0, -1) - ]; + toFillSVG(item) { + var _a; + const fillValue = this.cachedFill(item); + return (_a = fillValue == null ? void 0 : fillValue.toSVGString) == null ? void 0 : _a.call(fillValue, this.fillId(item), item.contentBox); } - updateMatrices(light2, viewportIndex = 0) { - const camera = this.camera; - const shadowMatrix = this.matrix; - const far = light2.distance || camera.far; - if (far !== camera.far) { - camera.far = far; - camera.updateProjectionMatrix(); - } - _lightPositionWorld.setFromMatrixPosition(light2.matrixWorld); - camera.position.copy(_lightPositionWorld); - _lookTarget.copy(camera.position); - _lookTarget.add(this._cubeDirections[viewportIndex]); - camera.up.copy(this._cubeUps[viewportIndex]); - camera.lookAt(_lookTarget); - camera.updateMatrixWorld(); - shadowMatrix.makeTranslation(-_lightPositionWorld.x, -_lightPositionWorld.y, -_lightPositionWorld.z); - _projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); - this._frustum.setFromProjectionMatrix(_projScreenMatrix); - } -} -PointLightShadow.prototype.isPointLightShadow = true; -class PointLight extends Light { - constructor(color2, intensity, distance2 = 0, decay = 1) { - super(color2, intensity); - this.type = "PointLight"; - this.distance = distance2; - this.decay = decay; - this.shadow = new PointLightShadow(); - } - get power() { - return this.intensity * 4 * Math.PI; - } - set power(power) { - this.intensity = power / (4 * Math.PI); - } - dispose() { - this.shadow.dispose(); - } - copy(source2) { - super.copy(source2); - this.distance = source2.distance; - this.decay = source2.decay; - this.shadow = source2.shadow.clone(); - return this; + toStrokeSVG(item) { + var _a; + const strokeValue = this.cachedStroke(item); + return (_a = strokeValue == null ? void 0 : strokeValue.toSVGString) == null ? void 0 : _a.call(strokeValue, this.strokeId(item), item.contentBox); } -} -PointLight.prototype.isPointLight = true; -class DirectionalLightShadow extends LightShadow { - constructor() { - super(new OrthographicCamera(-5, 5, 5, -5, 0.5, 500)); - } -} -DirectionalLightShadow.prototype.isDirectionalLightShadow = true; -class DirectionalLight extends Light { - constructor(color2, intensity) { - super(color2, intensity); - this.type = "DirectionalLight"; - this.position.copy(Object3D.DefaultUp); - this.updateMatrix(); - this.target = new Object3D(); - this.shadow = new DirectionalLightShadow(); - } - dispose() { - this.shadow.dispose(); - } - copy(source2) { - super.copy(source2); - this.target = source2.target.clone(); - this.shadow = source2.shadow.clone(); - return this; + toFillValue(item) { + var _a; + const fillValue = this.cachedFill(item); + return (_a = fillValue == null ? void 0 : fillValue.toFillValue) == null ? void 0 : _a.call(fillValue, this.fillId(item)); } -} -DirectionalLight.prototype.isDirectionalLight = true; -class AmbientLight extends Light { - constructor(color2, intensity) { - super(color2, intensity); - this.type = "AmbientLight"; + toFillOpacityValue(item) { + return parse(item.fill || "transparent").a; } -} -AmbientLight.prototype.isAmbientLight = true; -class RectAreaLight extends Light { - constructor(color2, intensity, width2 = 10, height2 = 10) { - super(color2, intensity); - this.type = "RectAreaLight"; - this.width = width2; - this.height = height2; + toStrokeValue(item) { + var _a; + const strokeValue = this.cachedStroke(item); + return (_a = strokeValue == null ? void 0 : strokeValue.toFillValue) == null ? void 0 : _a.call(strokeValue, this.strokeId(item)); } - get power() { - return this.intensity * this.width * this.height * Math.PI; + toFilterValue(item) { + if (!item.svgfilter) { + return ""; + } + return `url(#${item.svgfilter})`; } - set power(power) { - this.intensity = power / (this.width * this.height * Math.PI); + toLayoutCSS() { + return {}; } - copy(source2) { - super.copy(source2); - this.width = source2.width; - this.height = source2.height; - return this; + toDefaultCSS(item) { + var _a; + return Object.assign({}, super.toDefaultCSS(item), { + "stroke-width": item.strokeWidth, + "stroke-linecap": item.strokeLinecap, + "stroke-linejoin": item.strokeLinejoin, + "stroke-dashoffset": item.strokeDashoffset, + "fill-opacity": item.fillOpacity, + "fill-rule": item.fillRule, + "text-anchor": item.textAnchor, + "stroke-dasharray": (_a = item.strokeDasharray) == null ? void 0 : _a.join(" ") + }); } - toJSON(meta) { - const data = super.toJSON(meta); - data.object.width = this.width; - data.object.height = this.height; - return data; + toSVGAttribute(item) { + return this.toDefaultCSS(item); } } -RectAreaLight.prototype.isRectAreaLight = true; -class SphericalHarmonics3 { - constructor() { - this.coefficients = []; - for (let i = 0; i < 9; i++) { - this.coefficients.push(new Vector3()); +class BooleanPathRender$1 extends SVGItemRender$1 { + toFillSVG(item) { + const layers2 = item.layers; + const op = item.booleanOperation; + switch (op) { + case BooleanOperation.DIFFERENCE: + return SVGFill.parseImage(layers2[1].fill || "transparent").toSVGString(this.fillId(item)); } + return SVGFill.parseImage(layers2[0].fill || "transparent").toSVGString(this.fillId(item)); } - set(coefficients) { - for (let i = 0; i < 9; i++) { - this.coefficients[i].copy(coefficients[i]); + toStrokeSVG(item) { + const layers2 = item.layers; + const op = item.booleanOperation; + switch (op) { + case BooleanOperation.DIFFERENCE: + return SVGFill.parseImage(layers2[1].stroke || "transparent").toSVGString(this.strokeId(item)); } - return this; + return SVGFill.parseImage(layers2[0].stroke || "black").toSVGString(this.strokeId(item)); } - zero() { - for (let i = 0; i < 9; i++) { - this.coefficients[i].set(0, 0, 0); + toFillValue(item) { + var _a, _b; + const layers2 = item.layers; + const op = item.booleanOperation; + switch (op) { + case BooleanOperation.DIFFERENCE: + return SVGFill.parseImage(layers2[1].fill || "transparent").toSVGString(this.fillId(item)); } - return this; - } - getAt(normal, target) { - const x = normal.x, y = normal.y, z = normal.z; - const coeff = this.coefficients; - target.copy(coeff[0]).multiplyScalar(0.282095); - target.addScaledVector(coeff[1], 0.488603 * y); - target.addScaledVector(coeff[2], 0.488603 * z); - target.addScaledVector(coeff[3], 0.488603 * x); - target.addScaledVector(coeff[4], 1.092548 * (x * y)); - target.addScaledVector(coeff[5], 1.092548 * (y * z)); - target.addScaledVector(coeff[6], 0.315392 * (3 * z * z - 1)); - target.addScaledVector(coeff[7], 1.092548 * (x * z)); - target.addScaledVector(coeff[8], 0.546274 * (x * x - y * y)); - return target; + return (_b = (_a = SVGFill.parseImage(layers2[0].fill || "transparent")).toFillValue) == null ? void 0 : _b.call(_a, this.fillId(item)); } - getIrradianceAt(normal, target) { - const x = normal.x, y = normal.y, z = normal.z; - const coeff = this.coefficients; - target.copy(coeff[0]).multiplyScalar(0.886227); - target.addScaledVector(coeff[1], 2 * 0.511664 * y); - target.addScaledVector(coeff[2], 2 * 0.511664 * z); - target.addScaledVector(coeff[3], 2 * 0.511664 * x); - target.addScaledVector(coeff[4], 2 * 0.429043 * x * y); - target.addScaledVector(coeff[5], 2 * 0.429043 * y * z); - target.addScaledVector(coeff[6], 0.743125 * z * z - 0.247708); - target.addScaledVector(coeff[7], 2 * 0.429043 * x * z); - target.addScaledVector(coeff[8], 0.429043 * (x * x - y * y)); - return target; + toFillOpacityValue(item) { + return parse(item.fill || "transparent").a; } - add(sh) { - for (let i = 0; i < 9; i++) { - this.coefficients[i].add(sh.coefficients[i]); + toStrokeValue(item) { + var _a, _b, _c, _d; + const layers2 = item.layers; + const op = item.booleanOperation; + switch (op) { + case BooleanOperation.DIFFERENCE: + return (_b = (_a = SVGFill.parseImage(layers2[1].stroke || "transparent")).toFillValue) == null ? void 0 : _b.call(_a, this.strokeId(item)); } - return this; + return (_d = (_c = SVGFill.parseImage(layers2[0].stroke || "black")).toFillValue) == null ? void 0 : _d.call(_c, this.strokeId(item)); } - addScaledSH(sh, s) { - for (let i = 0; i < 9; i++) { - this.coefficients[i].addScaledVector(sh.coefficients[i], s); + update(item, currentElement) { + if (!currentElement) + return; + const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); + if ($path) { + if (item.hasChangedField("changedChildren", "d", "boolean-operation", "width", "height")) { + $path.setAttrNS({ + d: item.d + }); + } + if (item.hasChangedField("fill")) { + $path.setAttrNS({ + fill: this.toFillValue(item) + }); + } + if (item.hasChangedField("stroke")) { + $path.setAttrNS({ + stroke: this.toStrokeValue(item) + }); + } + if (item.hasChangedField("filter")) { + $path.setAttrNS({ + filter: this.toFilterValue(item) + }); + } + if (item.hasChangedField("fill-rule")) { + $path.setAttrNS({ + "fill-rule": item.fillRule || "nonezero" + }); + } + if (item.hasChangedField("stroke-linejoin")) { + $path.setAttrNS({ + "stroke-linejoin": item.strokeLinejoin + }); + } + if (item.hasChangedField("stroke-linecap")) { + $path.setAttrNS({ + "stroke-linecap": item.strokeLinecap + }); + } } - return this; + super.update(item, currentElement); } - scale(s) { - for (let i = 0; i < 9; i++) { - this.coefficients[i].multiplyScalar(s); + updateElementCache(item, currentElement) { + if (item.getCache("element") !== currentElement) { + item.addCache("element", currentElement); + const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); + item.addCache("svgElement", $path.parent().el); + item.addCache("pathElement", $path.el); } - return this; } - lerp(sh, alpha2) { - for (let i = 0; i < 9; i++) { - this.coefficients[i].lerp(sh.coefficients[i], alpha2); - } - return this; + render(item) { + var { id, name, itemType } = item; + return ` +
+ ${this.toDefString(item)} + ${item.layers.map((it) => { + return this.renderer.render(it); + }).join("")} + + + +
+ `; } - equals(sh) { - for (let i = 0; i < 9; i++) { - if (!this.coefficients[i].equals(sh.coefficients[i])) { - return false; +} +class CircleRender$1 extends LayerRender { +} +class ImageRender$1 extends LayerRender { + toNestedCSS() { + return [ + { + selector: "img", + cssText: ` + width: 100%; + height: 100%; + pointer-events: none; + `.trim() } - } - return true; + ]; } - copy(sh) { - return this.set(sh.coefficients); + getUrl(item) { + var { src } = item; + var project2 = item.project; + return project2.getImageValueById(src) || src; } - clone() { - return new this.constructor().copy(this); + render(item) { + var { id } = item; + return ` +
+ ${this.toDefString(item)} + +
`; } - fromArray(array, offset = 0) { - const coefficients = this.coefficients; - for (let i = 0; i < 9; i++) { - coefficients[i].fromArray(array, offset + i * 3); + update(item, currentElement) { + const $image = currentElement == null ? void 0 : currentElement.$("img"); + if ($image) { + $image.attr("src", this.getUrl(item)); } - return this; - } - toArray(array = [], offset = 0) { - const coefficients = this.coefficients; - for (let i = 0; i < 9; i++) { - coefficients[i].toArray(array, offset + i * 3); - } - return array; - } - static getBasisAt(normal, shBasis) { - const x = normal.x, y = normal.y, z = normal.z; - shBasis[0] = 0.282095; - shBasis[1] = 0.488603 * y; - shBasis[2] = 0.488603 * z; - shBasis[3] = 0.488603 * x; - shBasis[4] = 1.092548 * x * y; - shBasis[5] = 1.092548 * y * z; - shBasis[6] = 0.315392 * (3 * z * z - 1); - shBasis[7] = 1.092548 * x * z; - shBasis[8] = 0.546274 * (x * x - y * y); - } -} -SphericalHarmonics3.prototype.isSphericalHarmonics3 = true; -class LightProbe extends Light { - constructor(sh = new SphericalHarmonics3(), intensity = 1) { - super(void 0, intensity); - this.sh = sh; - } - copy(source2) { - super.copy(source2); - this.sh.copy(source2.sh); - return this; - } - fromJSON(json) { - this.intensity = json.intensity; - this.sh.fromArray(json.sh); - return this; - } - toJSON(meta) { - const data = super.toJSON(meta); - data.object.sh = this.sh.toArray(); - return data; + super.update(item, currentElement); } } -LightProbe.prototype.isLightProbe = true; -class MaterialLoader extends Loader { - constructor(manager) { - super(manager); - this.textures = {}; +class ProjectRender$1 extends DomRender { + toRootVariableCSS(item) { + let obj2 = {}; + item.rootVariable.split(";").filter((it) => it.trim()).forEach((it) => { + var [key, value] = it.split(":"); + obj2[`--${key}`] = value; + }); + return obj2; } - load(url, onLoad, onProgress, onError) { - const scope = this; - const loader = new FileLoader(scope.manager); - loader.setPath(scope.path); - loader.setRequestHeader(scope.requestHeader); - loader.setWithCredentials(scope.withCredentials); - loader.load(url, function(text2) { - try { - onLoad(scope.parse(JSON.parse(text2))); - } catch (e) { - if (onError) { - onError(e); - } else { - console.error(e); - } - scope.manager.itemError(url); - } - }, onProgress, onError); - } - parse(json) { - const textures = this.textures; - function getTexture(name) { - if (textures[name] === void 0) { - console.warn("THREE.MaterialLoader: Undefined texture", name); - } - return textures[name]; - } - const material = Material.fromType(json.type); - if (json.uuid !== void 0) - material.uuid = json.uuid; - if (json.name !== void 0) - material.name = json.name; - if (json.color !== void 0 && material.color !== void 0) - material.color.setHex(json.color); - if (json.roughness !== void 0) - material.roughness = json.roughness; - if (json.metalness !== void 0) - material.metalness = json.metalness; - if (json.sheen !== void 0) - material.sheen = json.sheen; - if (json.sheenColor !== void 0) - material.sheenColor = new Color().setHex(json.sheenColor); - if (json.sheenRoughness !== void 0) - material.sheenRoughness = json.sheenRoughness; - if (json.emissive !== void 0 && material.emissive !== void 0) - material.emissive.setHex(json.emissive); - if (json.specular !== void 0 && material.specular !== void 0) - material.specular.setHex(json.specular); - if (json.specularIntensity !== void 0) - material.specularIntensity = json.specularIntensity; - if (json.specularColor !== void 0 && material.specularColor !== void 0) - material.specularColor.setHex(json.specularColor); - if (json.shininess !== void 0) - material.shininess = json.shininess; - if (json.clearcoat !== void 0) - material.clearcoat = json.clearcoat; - if (json.clearcoatRoughness !== void 0) - material.clearcoatRoughness = json.clearcoatRoughness; - if (json.transmission !== void 0) - material.transmission = json.transmission; - if (json.thickness !== void 0) - material.thickness = json.thickness; - if (json.attenuationDistance !== void 0) - material.attenuationDistance = json.attenuationDistance; - if (json.attenuationColor !== void 0 && material.attenuationColor !== void 0) - material.attenuationColor.setHex(json.attenuationColor); - if (json.fog !== void 0) - material.fog = json.fog; - if (json.flatShading !== void 0) - material.flatShading = json.flatShading; - if (json.blending !== void 0) - material.blending = json.blending; - if (json.combine !== void 0) - material.combine = json.combine; - if (json.side !== void 0) - material.side = json.side; - if (json.shadowSide !== void 0) - material.shadowSide = json.shadowSide; - if (json.opacity !== void 0) - material.opacity = json.opacity; - if (json.transparent !== void 0) - material.transparent = json.transparent; - if (json.alphaTest !== void 0) - material.alphaTest = json.alphaTest; - if (json.depthTest !== void 0) - material.depthTest = json.depthTest; - if (json.depthWrite !== void 0) - material.depthWrite = json.depthWrite; - if (json.colorWrite !== void 0) - material.colorWrite = json.colorWrite; - if (json.stencilWrite !== void 0) - material.stencilWrite = json.stencilWrite; - if (json.stencilWriteMask !== void 0) - material.stencilWriteMask = json.stencilWriteMask; - if (json.stencilFunc !== void 0) - material.stencilFunc = json.stencilFunc; - if (json.stencilRef !== void 0) - material.stencilRef = json.stencilRef; - if (json.stencilFuncMask !== void 0) - material.stencilFuncMask = json.stencilFuncMask; - if (json.stencilFail !== void 0) - material.stencilFail = json.stencilFail; - if (json.stencilZFail !== void 0) - material.stencilZFail = json.stencilZFail; - if (json.stencilZPass !== void 0) - material.stencilZPass = json.stencilZPass; - if (json.wireframe !== void 0) - material.wireframe = json.wireframe; - if (json.wireframeLinewidth !== void 0) - material.wireframeLinewidth = json.wireframeLinewidth; - if (json.wireframeLinecap !== void 0) - material.wireframeLinecap = json.wireframeLinecap; - if (json.wireframeLinejoin !== void 0) - material.wireframeLinejoin = json.wireframeLinejoin; - if (json.rotation !== void 0) - material.rotation = json.rotation; - if (json.linewidth !== 1) - material.linewidth = json.linewidth; - if (json.dashSize !== void 0) - material.dashSize = json.dashSize; - if (json.gapSize !== void 0) - material.gapSize = json.gapSize; - if (json.scale !== void 0) - material.scale = json.scale; - if (json.polygonOffset !== void 0) - material.polygonOffset = json.polygonOffset; - if (json.polygonOffsetFactor !== void 0) - material.polygonOffsetFactor = json.polygonOffsetFactor; - if (json.polygonOffsetUnits !== void 0) - material.polygonOffsetUnits = json.polygonOffsetUnits; - if (json.dithering !== void 0) - material.dithering = json.dithering; - if (json.alphaToCoverage !== void 0) - material.alphaToCoverage = json.alphaToCoverage; - if (json.premultipliedAlpha !== void 0) - material.premultipliedAlpha = json.premultipliedAlpha; - if (json.visible !== void 0) - material.visible = json.visible; - if (json.toneMapped !== void 0) - material.toneMapped = json.toneMapped; - if (json.userData !== void 0) - material.userData = json.userData; - if (json.vertexColors !== void 0) { - if (typeof json.vertexColors === "number") { - material.vertexColors = json.vertexColors > 0 ? true : false; - } else { - material.vertexColors = json.vertexColors; - } - } - if (json.uniforms !== void 0) { - for (const name in json.uniforms) { - const uniform = json.uniforms[name]; - material.uniforms[name] = {}; - switch (uniform.type) { - case "t": - material.uniforms[name].value = getTexture(uniform.value); - break; - case "c": - material.uniforms[name].value = new Color().setHex(uniform.value); - break; - case "v2": - material.uniforms[name].value = new Vector2().fromArray(uniform.value); - break; - case "v3": - material.uniforms[name].value = new Vector3().fromArray(uniform.value); - break; - case "v4": - material.uniforms[name].value = new Vector4().fromArray(uniform.value); - break; - case "m3": - material.uniforms[name].value = new Matrix3().fromArray(uniform.value); - break; - case "m4": - material.uniforms[name].value = new Matrix4().fromArray(uniform.value); - break; - default: - material.uniforms[name].value = uniform.value; - } - } - } - if (json.defines !== void 0) - material.defines = json.defines; - if (json.vertexShader !== void 0) - material.vertexShader = json.vertexShader; - if (json.fragmentShader !== void 0) - material.fragmentShader = json.fragmentShader; - if (json.extensions !== void 0) { - for (const key in json.extensions) { - material.extensions[key] = json.extensions[key]; - } - } - if (json.shading !== void 0) - material.flatShading = json.shading === 1; - if (json.size !== void 0) - material.size = json.size; - if (json.sizeAttenuation !== void 0) - material.sizeAttenuation = json.sizeAttenuation; - if (json.map !== void 0) - material.map = getTexture(json.map); - if (json.matcap !== void 0) - material.matcap = getTexture(json.matcap); - if (json.alphaMap !== void 0) - material.alphaMap = getTexture(json.alphaMap); - if (json.bumpMap !== void 0) - material.bumpMap = getTexture(json.bumpMap); - if (json.bumpScale !== void 0) - material.bumpScale = json.bumpScale; - if (json.normalMap !== void 0) - material.normalMap = getTexture(json.normalMap); - if (json.normalMapType !== void 0) - material.normalMapType = json.normalMapType; - if (json.normalScale !== void 0) { - let normalScale = json.normalScale; - if (Array.isArray(normalScale) === false) { - normalScale = [normalScale, normalScale]; - } - material.normalScale = new Vector2().fromArray(normalScale); - } - if (json.displacementMap !== void 0) - material.displacementMap = getTexture(json.displacementMap); - if (json.displacementScale !== void 0) - material.displacementScale = json.displacementScale; - if (json.displacementBias !== void 0) - material.displacementBias = json.displacementBias; - if (json.roughnessMap !== void 0) - material.roughnessMap = getTexture(json.roughnessMap); - if (json.metalnessMap !== void 0) - material.metalnessMap = getTexture(json.metalnessMap); - if (json.emissiveMap !== void 0) - material.emissiveMap = getTexture(json.emissiveMap); - if (json.emissiveIntensity !== void 0) - material.emissiveIntensity = json.emissiveIntensity; - if (json.specularMap !== void 0) - material.specularMap = getTexture(json.specularMap); - if (json.specularIntensityMap !== void 0) - material.specularIntensityMap = getTexture(json.specularIntensityMap); - if (json.specularColorMap !== void 0) - material.specularColorMap = getTexture(json.specularColorMap); - if (json.envMap !== void 0) - material.envMap = getTexture(json.envMap); - if (json.envMapIntensity !== void 0) - material.envMapIntensity = json.envMapIntensity; - if (json.reflectivity !== void 0) - material.reflectivity = json.reflectivity; - if (json.refractionRatio !== void 0) - material.refractionRatio = json.refractionRatio; - if (json.lightMap !== void 0) - material.lightMap = getTexture(json.lightMap); - if (json.lightMapIntensity !== void 0) - material.lightMapIntensity = json.lightMapIntensity; - if (json.aoMap !== void 0) - material.aoMap = getTexture(json.aoMap); - if (json.aoMapIntensity !== void 0) - material.aoMapIntensity = json.aoMapIntensity; - if (json.gradientMap !== void 0) - material.gradientMap = getTexture(json.gradientMap); - if (json.clearcoatMap !== void 0) - material.clearcoatMap = getTexture(json.clearcoatMap); - if (json.clearcoatRoughnessMap !== void 0) - material.clearcoatRoughnessMap = getTexture(json.clearcoatRoughnessMap); - if (json.clearcoatNormalMap !== void 0) - material.clearcoatNormalMap = getTexture(json.clearcoatNormalMap); - if (json.clearcoatNormalScale !== void 0) - material.clearcoatNormalScale = new Vector2().fromArray(json.clearcoatNormalScale); - if (json.transmissionMap !== void 0) - material.transmissionMap = getTexture(json.transmissionMap); - if (json.thicknessMap !== void 0) - material.thicknessMap = getTexture(json.thicknessMap); - if (json.sheenColorMap !== void 0) - material.sheenColorMap = getTexture(json.sheenColorMap); - if (json.sheenRoughnessMap !== void 0) - material.sheenRoughnessMap = getTexture(json.sheenRoughnessMap); - return material; - } - setTextures(value) { - this.textures = value; - return this; + toCSS(item) { + return Object.assign({}, this.toRootVariableCSS(item)); } -} -class LoaderUtils { - static decodeText(array) { - if (typeof TextDecoder !== "undefined") { - return new TextDecoder().decode(array); - } - let s = ""; - for (let i = 0, il = array.length; i < il; i++) { - s += String.fromCharCode(array[i]); - } - try { - return decodeURIComponent(escape(s)); - } catch (e) { - return s; + toStyle(item) { + const keyframeString = item.toKeyframeString(); + const rootVariable = this.toRootVariableCSS(item); + return ` + + `; } - static extractUrlBase(url) { - const index2 = url.lastIndexOf("/"); - if (index2 === -1) - return "./"; - return url.slice(0, index2 + 1); - } - static resolveURL(url, path) { - if (typeof url !== "string" || url === "") - return ""; - if (/^https?:\/\//i.test(path) && /^\//.test(url)) { - path = path.replace(/(^https?:\/\/[^\/]+).*/i, "$1"); + toExportStyle(item) { + const keyframeString = item.toKeyframeString(); + const rootVariable = this.toRootVariableCSS(item); + return ` + + `; } - clone() { - return new this.constructor().copy(this); + render(item) { + return item.layers.map((it) => { + return this.renderer.render(it); + }).join(""); } - toJSON() { - const data = super.toJSON(this); - data.instanceCount = this.instanceCount; - data.isInstancedBufferGeometry = true; - return data; + renderSVG() { + return ""; } } -InstancedBufferGeometry.prototype.isInstancedBufferGeometry = true; -class BufferGeometryLoader extends Loader { - constructor(manager) { - super(manager); - } - load(url, onLoad, onProgress, onError) { - const scope = this; - const loader = new FileLoader(scope.manager); - loader.setPath(scope.path); - loader.setRequestHeader(scope.requestHeader); - loader.setWithCredentials(scope.withCredentials); - loader.load(url, function(text2) { - try { - onLoad(scope.parse(JSON.parse(text2))); - } catch (e) { - if (onError) { - onError(e); - } else { - console.error(e); - } - scope.manager.itemError(url); - } - }, onProgress, onError); - } - parse(json) { - const interleavedBufferMap = {}; - const arrayBufferMap = {}; - function getInterleavedBuffer(json2, uuid2) { - if (interleavedBufferMap[uuid2] !== void 0) - return interleavedBufferMap[uuid2]; - const interleavedBuffers = json2.interleavedBuffers; - const interleavedBuffer = interleavedBuffers[uuid2]; - const buffer = getArrayBuffer(json2, interleavedBuffer.buffer); - const array = getTypedArray(interleavedBuffer.type, buffer); - const ib = new InterleavedBuffer(array, interleavedBuffer.stride); - ib.uuid = interleavedBuffer.uuid; - interleavedBufferMap[uuid2] = ib; - return ib; - } - function getArrayBuffer(json2, uuid2) { - if (arrayBufferMap[uuid2] !== void 0) - return arrayBufferMap[uuid2]; - const arrayBuffers = json2.arrayBuffers; - const arrayBuffer = arrayBuffers[uuid2]; - const ab = new Uint32Array(arrayBuffer).buffer; - arrayBufferMap[uuid2] = ab; - return ab; - } - const geometry = json.isInstancedBufferGeometry ? new InstancedBufferGeometry() : new BufferGeometry(); - const index2 = json.data.index; - if (index2 !== void 0) { - const typedArray = getTypedArray(index2.type, index2.array); - geometry.setIndex(new BufferAttribute(typedArray, 1)); - } - const attributes = json.data.attributes; - for (const key in attributes) { - const attribute = attributes[key]; - let bufferAttribute; - if (attribute.isInterleavedBufferAttribute) { - const interleavedBuffer = getInterleavedBuffer(json.data, attribute.data); - bufferAttribute = new InterleavedBufferAttribute(interleavedBuffer, attribute.itemSize, attribute.offset, attribute.normalized); - } else { - const typedArray = getTypedArray(attribute.type, attribute.array); - const bufferAttributeConstr = attribute.isInstancedBufferAttribute ? InstancedBufferAttribute : BufferAttribute; - bufferAttribute = new bufferAttributeConstr(typedArray, attribute.itemSize, attribute.normalized); - } - if (attribute.name !== void 0) - bufferAttribute.name = attribute.name; - if (attribute.usage !== void 0) - bufferAttribute.setUsage(attribute.usage); - if (attribute.updateRange !== void 0) { - bufferAttribute.updateRange.offset = attribute.updateRange.offset; - bufferAttribute.updateRange.count = attribute.updateRange.count; - } - geometry.setAttribute(key, bufferAttribute); - } - const morphAttributes = json.data.morphAttributes; - if (morphAttributes) { - for (const key in morphAttributes) { - const attributeArray = morphAttributes[key]; - const array = []; - for (let i = 0, il = attributeArray.length; i < il; i++) { - const attribute = attributeArray[i]; - let bufferAttribute; - if (attribute.isInterleavedBufferAttribute) { - const interleavedBuffer = getInterleavedBuffer(json.data, attribute.data); - bufferAttribute = new InterleavedBufferAttribute(interleavedBuffer, attribute.itemSize, attribute.offset, attribute.normalized); - } else { - const typedArray = getTypedArray(attribute.type, attribute.array); - bufferAttribute = new BufferAttribute(typedArray, attribute.itemSize, attribute.normalized); - } - if (attribute.name !== void 0) - bufferAttribute.name = attribute.name; - array.push(bufferAttribute); - } - geometry.morphAttributes[key] = array; +class RectRender$1 extends LayerRender { +} +class SVGPathRender$1 extends SVGItemRender$1 { + update(item, currentElement) { + if (!currentElement) + return; + const $path = currentElement.$("path"); + if ($path) { + if (item.hasChangedField("width", "height", "d")) { + $path.setAttrNS({ + d: item.d + }); } - } - const morphTargetsRelative = json.data.morphTargetsRelative; - if (morphTargetsRelative) { - geometry.morphTargetsRelative = true; - } - const groups = json.data.groups || json.data.drawcalls || json.data.offsets; - if (groups !== void 0) { - for (let i = 0, n = groups.length; i !== n; ++i) { - const group2 = groups[i]; - geometry.addGroup(group2.start, group2.count, group2.materialIndex); + if (item.hasChangedField("fill")) { + $path.setAttrNS({ + fill: this.toFillValue(item) + }); + } + if (item.hasChangedField("stroke")) { + $path.setAttrNS({ + stroke: this.toStrokeValue(item) + }); + } + if (item.hasChangedField("filter")) { + $path.setAttrNS({ + filter: this.toFilterValue(item) + }); + } + if (item.hasChangedField("fill-rule")) { + $path.setAttrNS({ + "fill-rule": item.fillRule || "nonezero" + }); + } + if (item.hasChangedField("stroke-linejoin")) { + $path.setAttrNS({ + "stroke-linejoin": item.strokeLinejoin + }); + } + if (item.hasChangedField("stroke-linecap")) { + $path.setAttrNS({ + "stroke-linecap": item.strokeLinecap + }); + } + if (item.hasChangedField("stroke-dasharray")) { + $path.setAttrNS({ + "stroke-dasharray": item.strokeDasharray.join(" ") + }); } } - const boundingSphere = json.data.boundingSphere; - if (boundingSphere !== void 0) { - const center2 = new Vector3(); - if (boundingSphere.center !== void 0) { - center2.fromArray(boundingSphere.center); + super.update(item, currentElement); + } + render(item) { + var { id, name, itemType } = item; + return ` +
+ ${this.toDefString(item)} + + + +
+ `; + } +} +class SplineRender$1 extends SVGPathRender$1 { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + if (item.hasChangedField("points", "boundary")) { + $path.setAttrNS({ + d: item.d + }); } - geometry.boundingSphere = new Sphere(center2, boundingSphere.radius); } - if (json.name) - geometry.name = json.name; - if (json.userData) - geometry.userData = json.userData; - return geometry; + super.update(item, currentElement); } } -class ObjectLoader extends Loader { - constructor(manager) { - super(manager); - } - load(url, onLoad, onProgress, onError) { - const scope = this; - const path = this.path === "" ? LoaderUtils.extractUrlBase(url) : this.path; - this.resourcePath = this.resourcePath || path; - const loader = new FileLoader(this.manager); - loader.setPath(this.path); - loader.setRequestHeader(this.requestHeader); - loader.setWithCredentials(this.withCredentials); - loader.load(url, function(text2) { - let json = null; - try { - json = JSON.parse(text2); - } catch (error) { - if (onError !== void 0) - onError(error); - console.error("THREE:ObjectLoader: Can't parse " + url + ".", error.message); - return; +class SVGPolygonRender$1 extends SVGItemRender$1 { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + if (item.hasChangedField("width", "height", "count")) { + $path.setAttrNS({ + d: item.d + }); } - const metadata = json.metadata; - if (metadata === void 0 || metadata.type === void 0 || metadata.type.toLowerCase() === "geometry") { - console.error("THREE.ObjectLoader: Can't load " + url); - return; + if (item.hasChangedField("fill")) { + $path.setAttrNS({ + fill: this.toFillValue(item) + }); } - scope.parse(json, onLoad); - }, onProgress, onError); - } - async loadAsync(url, onProgress) { - const scope = this; - const path = this.path === "" ? LoaderUtils.extractUrlBase(url) : this.path; - this.resourcePath = this.resourcePath || path; - const loader = new FileLoader(this.manager); - loader.setPath(this.path); - loader.setRequestHeader(this.requestHeader); - loader.setWithCredentials(this.withCredentials); - const text2 = await loader.loadAsync(url, onProgress); - const json = JSON.parse(text2); - const metadata = json.metadata; - if (metadata === void 0 || metadata.type === void 0 || metadata.type.toLowerCase() === "geometry") { - throw new Error("THREE.ObjectLoader: Can't load " + url); - } - return await scope.parseAsync(json); - } - parse(json, onLoad) { - const animations = this.parseAnimations(json.animations); - const shapes = this.parseShapes(json.shapes); - const geometries = this.parseGeometries(json.geometries, shapes); - const images = this.parseImages(json.images, function() { - if (onLoad !== void 0) - onLoad(object); - }); - const textures = this.parseTextures(json.textures, images); - const materials = this.parseMaterials(json.materials, textures); - const object = this.parseObject(json.object, geometries, materials, textures, animations); - const skeletons = this.parseSkeletons(json.skeletons, object); - this.bindSkeletons(object, skeletons); - if (onLoad !== void 0) { - let hasImages = false; - for (const uuid2 in images) { - if (images[uuid2] instanceof HTMLImageElement) { - hasImages = true; - break; - } + if (item.hasChangedField("stroke")) { + $path.setAttrNS({ + stroke: this.toStrokeValue(item) + }); } - if (hasImages === false) - onLoad(object); - } - return object; - } - async parseAsync(json) { - const animations = this.parseAnimations(json.animations); - const shapes = this.parseShapes(json.shapes); - const geometries = this.parseGeometries(json.geometries, shapes); - const images = await this.parseImagesAsync(json.images); - const textures = this.parseTextures(json.textures, images); - const materials = this.parseMaterials(json.materials, textures); - const object = this.parseObject(json.object, geometries, materials, textures, animations); - const skeletons = this.parseSkeletons(json.skeletons, object); - this.bindSkeletons(object, skeletons); - return object; - } - parseShapes(json) { - const shapes = {}; - if (json !== void 0) { - for (let i = 0, l = json.length; i < l; i++) { - const shape2 = new Shape().fromJSON(json[i]); - shapes[shape2.uuid] = shape2; - } - } - return shapes; - } - parseSkeletons(json, object) { - const skeletons = {}; - const bones = {}; - object.traverse(function(child) { - if (child.isBone) - bones[child.uuid] = child; - }); - if (json !== void 0) { - for (let i = 0, l = json.length; i < l; i++) { - const skeleton = new Skeleton().fromJSON(json[i], bones); - skeletons[skeleton.uuid] = skeleton; - } - } - return skeletons; - } - parseGeometries(json, shapes) { - const geometries = {}; - if (json !== void 0) { - const bufferGeometryLoader = new BufferGeometryLoader(); - for (let i = 0, l = json.length; i < l; i++) { - let geometry; - const data = json[i]; - switch (data.type) { - case "BufferGeometry": - case "InstancedBufferGeometry": - geometry = bufferGeometryLoader.parse(data); - break; - case "Geometry": - console.error("THREE.ObjectLoader: The legacy Geometry type is no longer supported."); - break; - default: - if (data.type in Geometries) { - geometry = Geometries[data.type].fromJSON(data, shapes); - } else { - console.warn(`THREE.ObjectLoader: Unsupported geometry type "${data.type}"`); - } - } - geometry.uuid = data.uuid; - if (data.name !== void 0) - geometry.name = data.name; - if (geometry.isBufferGeometry === true && data.userData !== void 0) - geometry.userData = data.userData; - geometries[data.uuid] = geometry; - } - } - return geometries; - } - parseMaterials(json, textures) { - const cache = {}; - const materials = {}; - if (json !== void 0) { - const loader = new MaterialLoader(); - loader.setTextures(textures); - for (let i = 0, l = json.length; i < l; i++) { - const data = json[i]; - if (data.type === "MultiMaterial") { - const array = []; - for (let j = 0; j < data.materials.length; j++) { - const material = data.materials[j]; - if (cache[material.uuid] === void 0) { - cache[material.uuid] = loader.parse(material); - } - array.push(cache[material.uuid]); - } - materials[data.uuid] = array; - } else { - if (cache[data.uuid] === void 0) { - cache[data.uuid] = loader.parse(data); - } - materials[data.uuid] = cache[data.uuid]; - } + if (item.hasChangedField("filter")) { + $path.setAttrNS({ + filter: this.toFilterValue(item) + }); } - } - return materials; - } - parseAnimations(json) { - const animations = {}; - if (json !== void 0) { - for (let i = 0; i < json.length; i++) { - const data = json[i]; - const clip = AnimationClip.parse(data); - animations[clip.uuid] = clip; + if (item.hasChangedField("fill-rule")) { + $path.setAttrNS({ + "fill-rule": item.fillRule || "nonezero" + }); } - } - return animations; - } - parseImages(json, onLoad) { - const scope = this; - const images = {}; - let loader; - function loadImage(url) { - scope.manager.itemStart(url); - return loader.load(url, function() { - scope.manager.itemEnd(url); - }, void 0, function() { - scope.manager.itemError(url); - scope.manager.itemEnd(url); - }); - } - function deserializeImage(image2) { - if (typeof image2 === "string") { - const url = image2; - const path = /^(\/\/)|([a-z]+:(\/\/)?)/i.test(url) ? url : scope.resourcePath + url; - return loadImage(path); - } else { - if (image2.data) { - return { - data: getTypedArray(image2.type, image2.data), - width: image2.width, - height: image2.height - }; - } else { - return null; - } + if (item.hasChangedField("stroke-linejoin")) { + $path.setAttrNS({ + "stroke-linejoin": item.strokeLinejoin + }); } - } - if (json !== void 0 && json.length > 0) { - const manager = new LoadingManager(onLoad); - loader = new ImageLoader(manager); - loader.setCrossOrigin(this.crossOrigin); - for (let i = 0, il = json.length; i < il; i++) { - const image2 = json[i]; - const url = image2.url; - if (Array.isArray(url)) { - const imageArray = []; - for (let j = 0, jl = url.length; j < jl; j++) { - const currentUrl = url[j]; - const deserializedImage = deserializeImage(currentUrl); - if (deserializedImage !== null) { - if (deserializedImage instanceof HTMLImageElement) { - imageArray.push(deserializedImage); - } else { - imageArray.push(new DataTexture(deserializedImage.data, deserializedImage.width, deserializedImage.height)); - } - } - } - images[image2.uuid] = new Source(imageArray); - } else { - const deserializedImage = deserializeImage(image2.url); - images[image2.uuid] = new Source(deserializedImage); - } + if (item.hasChangedField("stroke-linecap")) { + $path.setAttrNS({ + "stroke-linecap": item.strokeLinecap + }); } } - return images; + super.update(item, currentElement); } - async parseImagesAsync(json) { - const scope = this; - const images = {}; - let loader; - async function deserializeImage(image2) { - if (typeof image2 === "string") { - const url = image2; - const path = /^(\/\/)|([a-z]+:(\/\/)?)/i.test(url) ? url : scope.resourcePath + url; - return await loader.loadAsync(path); - } else { - if (image2.data) { - return { - data: getTypedArray(image2.type, image2.data), - width: image2.width, - height: image2.height - }; - } else { - return null; - } + render(item) { + var { id, name, itemType } = item; + return ` +
+ ${this.toDefString(item)} + + + +
+ `; + } +} +class SVGStarRender$1 extends SVGItemRender$1 { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + if (item.hasChangedField("width", "height", "count", "radius", "isCurve", "tension")) { + $path.setAttrNS({ + d: item.d + }); } - } - if (json !== void 0 && json.length > 0) { - loader = new ImageLoader(this.manager); - loader.setCrossOrigin(this.crossOrigin); - for (let i = 0, il = json.length; i < il; i++) { - const image2 = json[i]; - const url = image2.url; - if (Array.isArray(url)) { - const imageArray = []; - for (let j = 0, jl = url.length; j < jl; j++) { - const currentUrl = url[j]; - const deserializedImage = await deserializeImage(currentUrl); - if (deserializedImage !== null) { - if (deserializedImage instanceof HTMLImageElement) { - imageArray.push(deserializedImage); - } else { - imageArray.push(new DataTexture(deserializedImage.data, deserializedImage.width, deserializedImage.height)); - } - } - } - images[image2.uuid] = new Source(imageArray); - } else { - const deserializedImage = await deserializeImage(image2.url); - images[image2.uuid] = new Source(deserializedImage); - } + if (item.hasChangedField("fill")) { + $path.setAttrNS({ + fill: this.toFillValue(item) + }); } - } - return images; - } - parseTextures(json, images) { - function parseConstant(value, type) { - if (typeof value === "number") - return value; - console.warn("THREE.ObjectLoader.parseTexture: Constant should be in numeric form.", value); - return type[value]; - } - const textures = {}; - if (json !== void 0) { - for (let i = 0, l = json.length; i < l; i++) { - const data = json[i]; - if (data.image === void 0) { - console.warn('THREE.ObjectLoader: No "image" specified for', data.uuid); - } - if (images[data.image] === void 0) { - console.warn("THREE.ObjectLoader: Undefined image", data.image); - } - const source2 = images[data.image]; - const image2 = source2.data; - let texture2; - if (Array.isArray(image2)) { - texture2 = new CubeTexture(); - if (image2.length === 6) - texture2.needsUpdate = true; - } else { - if (image2 && image2.data) { - texture2 = new DataTexture(); - } else { - texture2 = new Texture(); - } - if (image2) - texture2.needsUpdate = true; - } - texture2.source = source2; - texture2.uuid = data.uuid; - if (data.name !== void 0) - texture2.name = data.name; - if (data.mapping !== void 0) - texture2.mapping = parseConstant(data.mapping, TEXTURE_MAPPING); - if (data.offset !== void 0) - texture2.offset.fromArray(data.offset); - if (data.repeat !== void 0) - texture2.repeat.fromArray(data.repeat); - if (data.center !== void 0) - texture2.center.fromArray(data.center); - if (data.rotation !== void 0) - texture2.rotation = data.rotation; - if (data.wrap !== void 0) { - texture2.wrapS = parseConstant(data.wrap[0], TEXTURE_WRAPPING); - texture2.wrapT = parseConstant(data.wrap[1], TEXTURE_WRAPPING); - } - if (data.format !== void 0) - texture2.format = data.format; - if (data.type !== void 0) - texture2.type = data.type; - if (data.encoding !== void 0) - texture2.encoding = data.encoding; - if (data.minFilter !== void 0) - texture2.minFilter = parseConstant(data.minFilter, TEXTURE_FILTER); - if (data.magFilter !== void 0) - texture2.magFilter = parseConstant(data.magFilter, TEXTURE_FILTER); - if (data.anisotropy !== void 0) - texture2.anisotropy = data.anisotropy; - if (data.flipY !== void 0) - texture2.flipY = data.flipY; - if (data.premultiplyAlpha !== void 0) - texture2.premultiplyAlpha = data.premultiplyAlpha; - if (data.unpackAlignment !== void 0) - texture2.unpackAlignment = data.unpackAlignment; - if (data.userData !== void 0) - texture2.userData = data.userData; - textures[data.uuid] = texture2; - } - } - return textures; - } - parseObject(data, geometries, materials, textures, animations) { - let object; - function getGeometry(name) { - if (geometries[name] === void 0) { - console.warn("THREE.ObjectLoader: Undefined geometry", name); - } - return geometries[name]; - } - function getMaterial(name) { - if (name === void 0) - return void 0; - if (Array.isArray(name)) { - const array = []; - for (let i = 0, l = name.length; i < l; i++) { - const uuid2 = name[i]; - if (materials[uuid2] === void 0) { - console.warn("THREE.ObjectLoader: Undefined material", uuid2); - } - array.push(materials[uuid2]); - } - return array; + if (item.hasChangedField("stroke")) { + $path.setAttrNS({ + stroke: this.toStrokeValue(item) + }); } - if (materials[name] === void 0) { - console.warn("THREE.ObjectLoader: Undefined material", name); + if (item.hasChangedField("filter")) { + $path.setAttrNS({ + filter: this.toFilterValue(item) + }); } - return materials[name]; - } - function getTexture(uuid2) { - if (textures[uuid2] === void 0) { - console.warn("THREE.ObjectLoader: Undefined texture", uuid2); + if (item.hasChangedField("fill-rule")) { + $path.setAttrNS({ + "fill-rule": item.fillRule || "nonezero" + }); } - return textures[uuid2]; - } - let geometry, material; - switch (data.type) { - case "Scene": - object = new Scene(); - if (data.background !== void 0) { - if (Number.isInteger(data.background)) { - object.background = new Color(data.background); - } else { - object.background = getTexture(data.background); - } - } - if (data.environment !== void 0) { - object.environment = getTexture(data.environment); - } - if (data.fog !== void 0) { - if (data.fog.type === "Fog") { - object.fog = new Fog(data.fog.color, data.fog.near, data.fog.far); - } else if (data.fog.type === "FogExp2") { - object.fog = new FogExp2(data.fog.color, data.fog.density); - } - } - break; - case "PerspectiveCamera": - object = new PerspectiveCamera(data.fov, data.aspect, data.near, data.far); - if (data.focus !== void 0) - object.focus = data.focus; - if (data.zoom !== void 0) - object.zoom = data.zoom; - if (data.filmGauge !== void 0) - object.filmGauge = data.filmGauge; - if (data.filmOffset !== void 0) - object.filmOffset = data.filmOffset; - if (data.view !== void 0) - object.view = Object.assign({}, data.view); - break; - case "OrthographicCamera": - object = new OrthographicCamera(data.left, data.right, data.top, data.bottom, data.near, data.far); - if (data.zoom !== void 0) - object.zoom = data.zoom; - if (data.view !== void 0) - object.view = Object.assign({}, data.view); - break; - case "AmbientLight": - object = new AmbientLight(data.color, data.intensity); - break; - case "DirectionalLight": - object = new DirectionalLight(data.color, data.intensity); - break; - case "PointLight": - object = new PointLight(data.color, data.intensity, data.distance, data.decay); - break; - case "RectAreaLight": - object = new RectAreaLight(data.color, data.intensity, data.width, data.height); - break; - case "SpotLight": - object = new SpotLight(data.color, data.intensity, data.distance, data.angle, data.penumbra, data.decay); - break; - case "HemisphereLight": - object = new HemisphereLight(data.color, data.groundColor, data.intensity); - break; - case "LightProbe": - object = new LightProbe().fromJSON(data); - break; - case "SkinnedMesh": - geometry = getGeometry(data.geometry); - material = getMaterial(data.material); - object = new SkinnedMesh(geometry, material); - if (data.bindMode !== void 0) - object.bindMode = data.bindMode; - if (data.bindMatrix !== void 0) - object.bindMatrix.fromArray(data.bindMatrix); - if (data.skeleton !== void 0) - object.skeleton = data.skeleton; - break; - case "Mesh": - geometry = getGeometry(data.geometry); - material = getMaterial(data.material); - object = new Mesh(geometry, material); - break; - case "InstancedMesh": - geometry = getGeometry(data.geometry); - material = getMaterial(data.material); - const count = data.count; - const instanceMatrix = data.instanceMatrix; - const instanceColor = data.instanceColor; - object = new InstancedMesh(geometry, material, count); - object.instanceMatrix = new InstancedBufferAttribute(new Float32Array(instanceMatrix.array), 16); - if (instanceColor !== void 0) - object.instanceColor = new InstancedBufferAttribute(new Float32Array(instanceColor.array), instanceColor.itemSize); - break; - case "LOD": - object = new LOD(); - break; - case "Line": - object = new Line(getGeometry(data.geometry), getMaterial(data.material)); - break; - case "LineLoop": - object = new LineLoop(getGeometry(data.geometry), getMaterial(data.material)); - break; - case "LineSegments": - object = new LineSegments(getGeometry(data.geometry), getMaterial(data.material)); - break; - case "PointCloud": - case "Points": - object = new Points(getGeometry(data.geometry), getMaterial(data.material)); - break; - case "Sprite": - object = new Sprite(getMaterial(data.material)); - break; - case "Group": - object = new Group(); - break; - case "Bone": - object = new Bone(); - break; - default: - object = new Object3D(); - } - object.uuid = data.uuid; - if (data.name !== void 0) - object.name = data.name; - if (data.matrix !== void 0) { - object.matrix.fromArray(data.matrix); - if (data.matrixAutoUpdate !== void 0) - object.matrixAutoUpdate = data.matrixAutoUpdate; - if (object.matrixAutoUpdate) - object.matrix.decompose(object.position, object.quaternion, object.scale); - } else { - if (data.position !== void 0) - object.position.fromArray(data.position); - if (data.rotation !== void 0) - object.rotation.fromArray(data.rotation); - if (data.quaternion !== void 0) - object.quaternion.fromArray(data.quaternion); - if (data.scale !== void 0) - object.scale.fromArray(data.scale); - } - if (data.castShadow !== void 0) - object.castShadow = data.castShadow; - if (data.receiveShadow !== void 0) - object.receiveShadow = data.receiveShadow; - if (data.shadow) { - if (data.shadow.bias !== void 0) - object.shadow.bias = data.shadow.bias; - if (data.shadow.normalBias !== void 0) - object.shadow.normalBias = data.shadow.normalBias; - if (data.shadow.radius !== void 0) - object.shadow.radius = data.shadow.radius; - if (data.shadow.mapSize !== void 0) - object.shadow.mapSize.fromArray(data.shadow.mapSize); - if (data.shadow.camera !== void 0) - object.shadow.camera = this.parseObject(data.shadow.camera); - } - if (data.visible !== void 0) - object.visible = data.visible; - if (data.frustumCulled !== void 0) - object.frustumCulled = data.frustumCulled; - if (data.renderOrder !== void 0) - object.renderOrder = data.renderOrder; - if (data.userData !== void 0) - object.userData = data.userData; - if (data.layers !== void 0) - object.layers.mask = data.layers; - if (data.children !== void 0) { - const children2 = data.children; - for (let i = 0; i < children2.length; i++) { - object.add(this.parseObject(children2[i], geometries, materials, textures, animations)); - } - } - if (data.animations !== void 0) { - const objectAnimations = data.animations; - for (let i = 0; i < objectAnimations.length; i++) { - const uuid2 = objectAnimations[i]; - object.animations.push(animations[uuid2]); - } - } - if (data.type === "LOD") { - if (data.autoUpdate !== void 0) - object.autoUpdate = data.autoUpdate; - const levels = data.levels; - for (let l = 0; l < levels.length; l++) { - const level = levels[l]; - const child = object.getObjectByProperty("uuid", level.object); - if (child !== void 0) { - object.addLevel(child, level.distance); - } + if (item.hasChangedField("stroke-linejoin")) { + $path.setAttrNS({ + "stroke-linejoin": item.strokeLinejoin + }); } - } - return object; - } - bindSkeletons(object, skeletons) { - if (Object.keys(skeletons).length === 0) - return; - object.traverse(function(child) { - if (child.isSkinnedMesh === true && child.skeleton !== void 0) { - const skeleton = skeletons[child.skeleton]; - if (skeleton === void 0) { - console.warn("THREE.ObjectLoader: No skeleton found with UUID:", child.skeleton); - } else { - child.bind(skeleton, child.bindMatrix); - } + if (item.hasChangedField("stroke-linecap")) { + $path.setAttrNS({ + "stroke-linecap": item.strokeLinecap + }); } - }); + } + super.update(item, currentElement); } - setTexturePath(value) { - console.warn("THREE.ObjectLoader: .setTexturePath() has been renamed to .setResourcePath()."); - return this.setResourcePath(value); + render(item) { + var { id, name, itemType } = item; + return ` +
+ ${this.toDefString(item)} + + + +
+ `; } } -const TEXTURE_MAPPING = { - UVMapping, - CubeReflectionMapping, - CubeRefractionMapping, - EquirectangularReflectionMapping, - EquirectangularRefractionMapping, - CubeUVReflectionMapping -}; -const TEXTURE_WRAPPING = { - RepeatWrapping, - ClampToEdgeWrapping, - MirroredRepeatWrapping -}; -const TEXTURE_FILTER = { - NearestFilter, - NearestMipmapNearestFilter, - NearestMipmapLinearFilter, - LinearFilter, - LinearMipmapNearestFilter, - LinearMipmapLinearFilter -}; -class ImageBitmapLoader extends Loader { - constructor(manager) { - super(manager); - if (typeof createImageBitmap === "undefined") { - console.warn("THREE.ImageBitmapLoader: createImageBitmap() not supported."); +class SVGTextPathRender$1 extends SVGItemRender$1 { + update(item, currentElement) { + var $path = currentElement.$("path.svg-path-item"); + if ($path) { + if (item.hasChangedField("width", "height", "d")) { + $path.attr("d", item.d); + } } - if (typeof fetch === "undefined") { - console.warn("THREE.ImageBitmapLoader: fetch() not supported."); + var $guidePath = currentElement.$("path.guide"); + if ($guidePath) { + if (item.hasChangedField("width", "height", "d")) { + $guidePath.attr("d", item.d); + } } - this.options = { premultiplyAlpha: "none" }; - } - setOptions(options2) { - this.options = options2; - return this; - } - load(url, onLoad, onProgress, onError) { - if (url === void 0) - url = ""; - if (this.path !== void 0) - url = this.path + url; - url = this.manager.resolveURL(url); - const scope = this; - const cached = Cache.get(url); - if (cached !== void 0) { - scope.manager.itemStart(url); - setTimeout(function() { - if (onLoad) - onLoad(cached); - scope.manager.itemEnd(url); - }, 0); - return cached; - } - const fetchOptions = {}; - fetchOptions.credentials = this.crossOrigin === "anonymous" ? "same-origin" : "include"; - fetchOptions.headers = this.requestHeader; - fetch(url, fetchOptions).then(function(res) { - return res.blob(); - }).then(function(blob) { - return createImageBitmap(blob, Object.assign(scope.options, { colorSpaceConversion: "none" })); - }).then(function(imageBitmap) { - Cache.add(url, imageBitmap); - if (onLoad) - onLoad(imageBitmap); - scope.manager.itemEnd(url); - }).catch(function(e) { - if (onError) - onError(e); - scope.manager.itemError(url); - scope.manager.itemEnd(url); - }); - scope.manager.itemStart(url); - } -} -ImageBitmapLoader.prototype.isImageBitmapLoader = true; -let _context; -const AudioContext = { - getContext: function() { - if (_context === void 0) { - _context = new (window.AudioContext || window.webkitAudioContext)(); - } - return _context; - }, - setContext: function(value) { - _context = value; - } -}; -class AudioLoader extends Loader { - constructor(manager) { - super(manager); - } - load(url, onLoad, onProgress, onError) { - const scope = this; - const loader = new FileLoader(this.manager); - loader.setResponseType("arraybuffer"); - loader.setPath(this.path); - loader.setRequestHeader(this.requestHeader); - loader.setWithCredentials(this.withCredentials); - loader.load(url, function(buffer) { - try { - const bufferCopy = buffer.slice(0); - const context = AudioContext.getContext(); - context.decodeAudioData(bufferCopy, function(audioBuffer) { - onLoad(audioBuffer); + var $textPath = currentElement.$("textPath"); + if ($textPath) { + if (item.hasChangedField("text")) { + $textPath.text(item.text); + } + if (item.hasChangedField("textLength", "lengthAdjust", "startOffset")) { + $textPath.setAttrNS({ + textLength: item.textLength, + lengthAdjust: item.lengthAdjust, + startOffset: item.startOffset }); - } catch (e) { - if (onError) { - onError(e); - } else { - console.error(e); - } - scope.manager.itemError(url); - } - }, onProgress, onError); - } -} -class HemisphereLightProbe extends LightProbe { - constructor(skyColor, groundColor, intensity = 1) { - super(void 0, intensity); - const color1 = new Color().set(skyColor); - const color2 = new Color().set(groundColor); - const sky = new Vector3(color1.r, color1.g, color1.b); - const ground = new Vector3(color2.r, color2.g, color2.b); - const c0 = Math.sqrt(Math.PI); - const c1 = c0 * Math.sqrt(0.75); - this.sh.coefficients[0].copy(sky).add(ground).multiplyScalar(c0); - this.sh.coefficients[1].copy(sky).sub(ground).multiplyScalar(c1); - } -} -HemisphereLightProbe.prototype.isHemisphereLightProbe = true; -class AmbientLightProbe extends LightProbe { - constructor(color2, intensity = 1) { - super(void 0, intensity); - const color1 = new Color().set(color2); - this.sh.coefficients[0].set(color1.r, color1.g, color1.b).multiplyScalar(2 * Math.sqrt(Math.PI)); - } -} -AmbientLightProbe.prototype.isAmbientLightProbe = true; -class Audio extends Object3D { - constructor(listener) { - super(); - this.type = "Audio"; - this.listener = listener; - this.context = listener.context; - this.gain = this.context.createGain(); - this.gain.connect(listener.getInput()); - this.autoplay = false; - this.buffer = null; - this.detune = 0; - this.loop = false; - this.loopStart = 0; - this.loopEnd = 0; - this.offset = 0; - this.duration = void 0; - this.playbackRate = 1; - this.isPlaying = false; - this.hasPlaybackControl = true; - this.source = null; - this.sourceType = "empty"; - this._startedAt = 0; - this._progress = 0; - this._connected = false; - this.filters = []; - } - getOutput() { - return this.gain; - } - setNodeSource(audioNode) { - this.hasPlaybackControl = false; - this.sourceType = "audioNode"; - this.source = audioNode; - this.connect(); - return this; - } - setMediaElementSource(mediaElement) { - this.hasPlaybackControl = false; - this.sourceType = "mediaNode"; - this.source = this.context.createMediaElementSource(mediaElement); - this.connect(); - return this; - } - setMediaStreamSource(mediaStream) { - this.hasPlaybackControl = false; - this.sourceType = "mediaStreamNode"; - this.source = this.context.createMediaStreamSource(mediaStream); - this.connect(); - return this; - } - setBuffer(audioBuffer) { - this.buffer = audioBuffer; - this.sourceType = "buffer"; - if (this.autoplay) - this.play(); - return this; - } - play(delay = 0) { - if (this.isPlaying === true) { - console.warn("THREE.Audio: Audio is already playing."); - return; - } - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return; - } - this._startedAt = this.context.currentTime + delay; - const source2 = this.context.createBufferSource(); - source2.buffer = this.buffer; - source2.loop = this.loop; - source2.loopStart = this.loopStart; - source2.loopEnd = this.loopEnd; - source2.onended = this.onEnded.bind(this); - source2.start(this._startedAt, this._progress + this.offset, this.duration); - this.isPlaying = true; - this.source = source2; - this.setDetune(this.detune); - this.setPlaybackRate(this.playbackRate); - return this.connect(); - } - pause() { - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return; - } - if (this.isPlaying === true) { - this._progress += Math.max(this.context.currentTime - this._startedAt, 0) * this.playbackRate; - if (this.loop === true) { - this._progress = this._progress % (this.duration || this.buffer.duration); } - this.source.stop(); - this.source.onended = null; - this.isPlaying = false; - } - return this; - } - stop() { - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return; - } - this._progress = 0; - this.source.stop(); - this.source.onended = null; - this.isPlaying = false; - return this; - } - connect() { - if (this.filters.length > 0) { - this.source.connect(this.filters[0]); - for (let i = 1, l = this.filters.length; i < l; i++) { - this.filters[i - 1].connect(this.filters[i]); + if (item.hasChangedField("fill")) { + $textPath.setAttrNS({ + fill: this.toFillValue(item) + }); } - this.filters[this.filters.length - 1].connect(this.getOutput()); - } else { - this.source.connect(this.getOutput()); - } - this._connected = true; - return this; - } - disconnect() { - if (this.filters.length > 0) { - this.source.disconnect(this.filters[0]); - for (let i = 1, l = this.filters.length; i < l; i++) { - this.filters[i - 1].disconnect(this.filters[i]); + if (item.hasChangedField("stroke")) { + $textPath.setAttrNS({ + stroke: this.toStrokeValue(item) + }); + } + if (item.hasChangedField("filter")) { + $textPath.setAttrNS({ + filter: this.toFilterValue(item) + }); } - this.filters[this.filters.length - 1].disconnect(this.getOutput()); - } else { - this.source.disconnect(this.getOutput()); - } - this._connected = false; - return this; - } - getFilters() { - return this.filters; - } - setFilters(value) { - if (!value) - value = []; - if (this._connected === true) { - this.disconnect(); - this.filters = value.slice(); - this.connect(); - } else { - this.filters = value.slice(); - } - return this; - } - setDetune(value) { - this.detune = value; - if (this.source.detune === void 0) - return; - if (this.isPlaying === true) { - this.source.detune.setTargetAtTime(this.detune, this.context.currentTime, 0.01); } - return this; - } - getDetune() { - return this.detune; - } - getFilter() { - return this.getFilters()[0]; - } - setFilter(filter2) { - return this.setFilters(filter2 ? [filter2] : []); + super.update(item, currentElement); + item.totalLength = $path.totalLength; } - setPlaybackRate(value) { - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return; - } - this.playbackRate = value; - if (this.isPlaying === true) { - this.source.playbackRate.setTargetAtTime(this.playbackRate, this.context.currentTime, 0.01); - } - return this; + toDefInnerString(item) { + return ` + ${this.toPathSVG(item)} + ${this.toFillSVG(item)} + ${this.toStrokeSVG(item)} + `; } - getPlaybackRate() { - return this.playbackRate; + toPathId(item) { + return this.getInnerId(item, "path"); } - onEnded() { - this.isPlaying = false; + toPathSVG(item) { + return ` + + `; } - getLoop() { - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return false; - } - return this.loop; + render(item) { + var { id, textLength, lengthAdjust, startOffset } = item; + const pathId = `#${this.toPathId(item)}`; + return ` + + ${this.toDefString(item)} + + ${item.text} + + + + + `; } - setLoop(value) { - if (this.hasPlaybackControl === false) { - console.warn("THREE.Audio: this Audio has no playback control."); - return; - } - this.loop = value; - if (this.isPlaying === true) { - this.source.loop = this.loop; +} +class SVGTextRender$1 extends SVGItemRender$1 { + update(item, currentElement) { + var $text = currentElement.$("text"); + if ($text) { + if (item.hasChangedField("text")) { + $text.text(item.text); + } + if (item.hasChangedField("textLength", "lengthAdjust", "startOffset")) { + $text.setAttrNS({ + textLength: item.textLength, + lengthAdjust: item.lengthAdjust, + startOffset: item.startOffset + }); + } + if (item.hasChangedField("fill")) { + $text.setAttrNS({ + fill: this.toFillValue(item) + }); + } + if (item.hasChangedField("stroke")) { + $text.setAttrNS({ + stroke: this.toStrokeValue(item) + }); + } + if (item.hasChangedField("filter")) { + $text.setAttrNS({ + filter: this.toFilterValue(item) + }); + } } - return this; + super.update(item, currentElement); } - setLoopStart(value) { - this.loopStart = value; - return this; + shapeInsideId(item) { + return this.getInnerId(item, "shape-inside"); } - setLoopEnd(value) { - this.loopEnd = value; - return this; + render(item) { + var { id, textLength, lengthAdjust } = item; + return ` + + ${this.toDefString(item)} + ${item.text} + `; } - getVolume() { - return this.gain.gain.value; +} +class DomTemplateEngine { + static compile(template, params = []) { + return template; } - setVolume(value) { - this.gain.gain.setTargetAtTime(value, this.context.currentTime, 0.01); - return this; +} +const EngineList = { + dom: DomTemplateEngine +}; +class TemplateEngine { + static compile(engine, template, params = []) { + const currentEngine = EngineList[engine] || EngineList["dom"]; + return currentEngine.compile(template, params); } } -class PropertyMixer { - constructor(binding, typeName, valueSize) { - this.binding = binding; - this.valueSize = valueSize; - let mixFunction, mixFunctionAdditive, setIdentity; - switch (typeName) { - case "quaternion": - mixFunction = this._slerp; - mixFunctionAdditive = this._slerpAdditive; - setIdentity = this._setAdditiveIdentityQuaternion; - this.buffer = new Float64Array(valueSize * 6); - this._workIndex = 5; - break; - case "string": - case "bool": - mixFunction = this._select; - mixFunctionAdditive = this._select; - setIdentity = this._setAdditiveIdentityOther; - this.buffer = new Array(valueSize * 5); - break; - default: - mixFunction = this._lerp; - mixFunctionAdditive = this._lerpAdditive; - setIdentity = this._setAdditiveIdentityNumeric; - this.buffer = new Float64Array(valueSize * 5); - } - this._mixBufferRegion = mixFunction; - this._mixBufferRegionAdditive = mixFunctionAdditive; - this._setIdentity = setIdentity; - this._origIndex = 3; - this._addIndex = 4; - this.cumulativeWeight = 0; - this.cumulativeWeightAdditive = 0; - this.useCount = 0; - this.referenceCount = 0; - } - accumulate(accuIndex, weight) { - const buffer = this.buffer, stride = this.valueSize, offset = accuIndex * stride + stride; - let currentWeight = this.cumulativeWeight; - if (currentWeight === 0) { - for (let i = 0; i !== stride; ++i) { - buffer[offset + i] = buffer[i]; - } - currentWeight = weight; - } else { - currentWeight += weight; - const mix2 = weight / currentWeight; - this._mixBufferRegion(buffer, offset, 0, mix2, stride); - } - this.cumulativeWeight = currentWeight; - } - accumulateAdditive(weight) { - const buffer = this.buffer, stride = this.valueSize, offset = stride * this._addIndex; - if (this.cumulativeWeightAdditive === 0) { - this._setIdentity(); - } - this._mixBufferRegionAdditive(buffer, offset, 0, weight, stride); - this.cumulativeWeightAdditive += weight; - } - apply(accuIndex) { - const stride = this.valueSize, buffer = this.buffer, offset = accuIndex * stride + stride, weight = this.cumulativeWeight, weightAdditive = this.cumulativeWeightAdditive, binding = this.binding; - this.cumulativeWeight = 0; - this.cumulativeWeightAdditive = 0; - if (weight < 1) { - const originalValueOffset = stride * this._origIndex; - this._mixBufferRegion(buffer, offset, originalValueOffset, 1 - weight, stride); - } - if (weightAdditive > 0) { - this._mixBufferRegionAdditive(buffer, offset, this._addIndex * stride, 1, stride); - } - for (let i = stride, e = stride + stride; i !== e; ++i) { - if (buffer[i] !== buffer[i + stride]) { - binding.setValue(buffer, offset); - break; +class TemplateRender$1 extends LayerRender { + update(item, currentElement) { + if (item.hasChangedField("x", "y", "width", "height") === false) { + const compiledTemplate = this.compile(item); + let $innerHTML = currentElement.$(".inner-html"); + if ($innerHTML) { + $innerHTML.updateDiff(compiledTemplate); } } + super.update(item, currentElement); } - saveOriginalState() { - const binding = this.binding; - const buffer = this.buffer, stride = this.valueSize, originalValueOffset = stride * this._origIndex; - binding.getValue(buffer, originalValueOffset); - for (let i = stride, e = originalValueOffset; i !== e; ++i) { - buffer[i] = buffer[originalValueOffset + i % stride]; - } - this._setIdentity(); - this.cumulativeWeight = 0; - this.cumulativeWeightAdditive = 0; + compile(item) { + return TemplateEngine.compile("dom", item.template, item.params); } - restoreOriginalState() { - const originalValueOffset = this.valueSize * 3; - this.binding.setValue(this.buffer, originalValueOffset); + render(item) { + var { id } = item; + const compiledTemplate = this.compile(item); + return ` +
+ ${this.toDefString(item)} + +
+ ${compiledTemplate} +
+
`; } - _setAdditiveIdentityNumeric() { - const startIndex = this._addIndex * this.valueSize; - const endIndex = startIndex + this.valueSize; - for (let i = startIndex; i < endIndex; i++) { - this.buffer[i] = 0; +} +class TextRender$1 extends LayerRender { + toCSS(item) { + let css = super.toCSS(item); + css.margin = css.margin || "0px"; + if (item.overflow !== Overflow.SCROLL) { + if (item.content.length > 0) { + css.height = "auto"; + } } + return css; } - _setAdditiveIdentityQuaternion() { - this._setAdditiveIdentityNumeric(); - this.buffer[this._addIndex * this.valueSize + 3] = 1; - } - _setAdditiveIdentityOther() { - const startIndex = this._origIndex * this.valueSize; - const targetIndex = this._addIndex * this.valueSize; - for (let i = 0; i < this.valueSize; i++) { - this.buffer[targetIndex + i] = this.buffer[startIndex + i]; + update(item, currentElement) { + const $textElement = currentElement == null ? void 0 : currentElement.$(`.text-content`); + if ($textElement) { + var { content: content2 } = item; + $textElement.updateDiff(content2); } + super.update(item, currentElement); } - _select(buffer, dstOffset, srcOffset, t, stride) { - if (t >= 0.5) { - for (let i = 0; i !== stride; ++i) { - buffer[dstOffset + i] = buffer[srcOffset + i]; - } - } + render(item) { + var { id, content: content2 } = item; + return ` +
+ ${this.toDefString(item)} +
${content2}
+
+ `; } - _slerp(buffer, dstOffset, srcOffset, t) { - Quaternion.slerpFlat(buffer, dstOffset, buffer, dstOffset, buffer, srcOffset, t); +} +class VideoRender$1 extends LayerRender { + toNestedCSS() { + return [ + { + selector: "video", + cssText: ` + width: 100%; + height: 100%; + pointer-events: none; + `.trim() + } + ]; } - _slerpAdditive(buffer, dstOffset, srcOffset, t, stride) { - const workOffset = this._workIndex * stride; - Quaternion.multiplyQuaternionsFlat(buffer, workOffset, buffer, dstOffset, buffer, srcOffset); - Quaternion.slerpFlat(buffer, dstOffset, buffer, dstOffset, buffer, workOffset, t); + getUrl(item) { + var { src } = item; + var project2 = item.project; + return project2.getVideoValueById(src); } - _lerp(buffer, dstOffset, srcOffset, t, stride) { - const s = 1 - t; - for (let i = 0; i !== stride; ++i) { - const j = dstOffset + i; - buffer[j] = buffer[j] * s + buffer[srcOffset + i] * t; - } + render(item) { + var { id, controls, muted, poster, loop, crossorigin, autoplay } = item; + return ` +
+ ${this.toDefString(item)} + +
`; } - _lerpAdditive(buffer, dstOffset, srcOffset, t, stride) { - for (let i = 0; i !== stride; ++i) { - const j = dstOffset + i; - buffer[j] = buffer[j] + buffer[srcOffset + i] * t; + update(item, currentElement) { + const { currentTime, playbackRate, volume } = item; + const $video = currentElement.$("video"); + if ($video) { + $video.setProp({ + currentTime, + playbackRate, + volume + }); } + super.update(item, currentElement); } } -const _RESERVED_CHARS_RE = "\\[\\]\\.:\\/"; -const _reservedRe = new RegExp("[" + _RESERVED_CHARS_RE + "]", "g"); -const _wordChar = "[^" + _RESERVED_CHARS_RE + "]"; -const _wordCharOrDot = "[^" + _RESERVED_CHARS_RE.replace("\\.", "") + "]"; -const _directoryRe = /((?:WC+[\/:])*)/.source.replace("WC", _wordChar); -const _nodeRe = /(WCOD+)?/.source.replace("WCOD", _wordCharOrDot); -const _objectRe = /(?:\.(WC+)(?:\[(.+)\])?)?/.source.replace("WC", _wordChar); -const _propertyRe = /\.(WC+)(?:\[(.+)\])?/.source.replace("WC", _wordChar); -const _trackRe = new RegExp("^" + _directoryRe + _nodeRe + _objectRe + _propertyRe + "$"); -const _supportedObjectNames = ["material", "materials", "bones"]; -class Composite { - constructor(targetGroup, path, optionalParsedPath) { - const parsedPath = optionalParsedPath || PropertyBinding.parseTrackName(path); - this._targetGroup = targetGroup; - this._bindings = targetGroup.subscribe_(path, parsedPath); - } - getValue(array, offset) { - this.bind(); - const firstValidIndex = this._targetGroup.nCachedObjects_, binding = this._bindings[firstValidIndex]; - if (binding !== void 0) - binding.getValue(array, offset); - } - setValue(array, offset) { - const bindings = this._bindings; - for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) { - bindings[i].setValue(array, offset); - } - } - bind() { - const bindings = this._bindings; - for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) { - bindings[i].bind(); - } - } - unbind() { - const bindings = this._bindings; - for (let i = this._targetGroup.nCachedObjects_, n = bindings.length; i !== n; ++i) { - bindings[i].unbind(); - } - } +function rendererHtml(editor) { + const renderer = new HTMLRenderer(editor); + renderer.setRendererType("project", new ProjectRender$1()); + renderer.setRendererType("artboard", new ArtBoardRender$1()); + renderer.setRendererType("rect", new RectRender$1()); + renderer.setRendererType("circle", new CircleRender$1()); + renderer.setRendererType("image", new ImageRender$1()); + renderer.setRendererType("text", new TextRender$1()); + renderer.setRendererType("video", new VideoRender$1()); + renderer.setRendererType("boolean-path", new BooleanPathRender$1()); + renderer.setRendererType("svg-path", new SVGPathRender$1()); + renderer.setRendererType("polygon", new SVGPolygonRender$1()); + renderer.setRendererType("star", new SVGStarRender$1()); + renderer.setRendererType("spline", new SplineRender$1()); + renderer.setRendererType("svg-text", new SVGTextRender$1()); + renderer.setRendererType("svg-textpath", new SVGTextPathRender$1()); + renderer.setRendererType("template", new TemplateRender$1()); + editor.registerRendererType("html", renderer); } -class PropertyBinding { - constructor(rootNode, path, parsedPath) { - this.path = path; - this.parsedPath = parsedPath || PropertyBinding.parseTrackName(path); - this.node = PropertyBinding.findNode(rootNode, this.parsedPath.nodeName) || rootNode; - this.rootNode = rootNode; - this.getValue = this._getValue_unbound; - this.setValue = this._setValue_unbound; +class SVGRenderer { + constructor(editor) { + this.editor = editor; } - static create(root, path, parsedPath) { - if (!(root && root.isAnimationObjectGroup)) { - return new PropertyBinding(root, path, parsedPath); - } else { - return new PropertyBinding.Composite(root, path, parsedPath); - } + getDefaultRendererInstance() { + return this.editor.getRendererInstance("svg", "rect"); } - static sanitizeNodeName(name) { - return name.replace(/\s/g, "_").replace(_reservedRe, ""); + getRendererInstance(item) { + return this.editor.getRendererInstance("svg", item.itemType) || this.getDefaultRendererInstance() || item; } - static parseTrackName(trackName) { - const matches2 = _trackRe.exec(trackName); - if (matches2 === null) { - throw new Error("PropertyBinding: Cannot parse trackName: " + trackName); - } - const results = { - nodeName: matches2[2], - objectName: matches2[3], - objectIndex: matches2[4], - propertyName: matches2[5], - propertyIndex: matches2[6] - }; - const lastDot = results.nodeName && results.nodeName.lastIndexOf("."); - if (lastDot !== void 0 && lastDot !== -1) { - const objectName = results.nodeName.substring(lastDot + 1); - if (_supportedObjectNames.indexOf(objectName) !== -1) { - results.nodeName = results.nodeName.substring(0, lastDot); - results.objectName = objectName; - } - } - if (results.propertyName === null || results.propertyName.length === 0) { - throw new Error("PropertyBinding: can not parse propertyName from trackName: " + trackName); + render(item, renderer) { + if (!item) + return ""; + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.render(item, renderer || this); } - return results; } - static findNode(root, nodeName) { - if (nodeName === void 0 || nodeName === "" || nodeName === "." || nodeName === -1 || nodeName === root.name || nodeName === root.uuid) { - return root; - } - if (root.skeleton) { - const bone = root.skeleton.getBoneByName(nodeName); - if (bone !== void 0) { - return bone; - } - } - if (root.children) { - const searchNodeSubtree = function(children2) { - for (let i = 0; i < children2.length; i++) { - const childNode = children2[i]; - if (childNode.name === nodeName || childNode.uuid === nodeName) { - return childNode; - } - const result = searchNodeSubtree(childNode.children); - if (result) - return result; - } - return null; - }; - const subTreeNode = searchNodeSubtree(root.children); - if (subTreeNode) { - return subTreeNode; - } + toCSS(item) { + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.toCSS(item); } - return null; - } - _getValue_unavailable() { - } - _setValue_unavailable() { - } - _getValue_direct(buffer, offset) { - buffer[offset] = this.targetObject[this.propertyName]; } - _getValue_array(buffer, offset) { - const source2 = this.resolvedProperty; - for (let i = 0, n = source2.length; i !== n; ++i) { - buffer[offset++] = source2[i]; + toTransformCSS(item) { + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.toTransformCSS(item); } } - _getValue_arrayElement(buffer, offset) { - buffer[offset] = this.resolvedProperty[this.propertyIndex]; - } - _getValue_toArray(buffer, offset) { - this.resolvedProperty.toArray(buffer, offset); - } - _setValue_direct(buffer, offset) { - this.targetObject[this.propertyName] = buffer[offset]; - } - _setValue_direct_setNeedsUpdate(buffer, offset) { - this.targetObject[this.propertyName] = buffer[offset]; - this.targetObject.needsUpdate = true; - } - _setValue_direct_setMatrixWorldNeedsUpdate(buffer, offset) { - this.targetObject[this.propertyName] = buffer[offset]; - this.targetObject.matrixWorldNeedsUpdate = true; - } - _setValue_array(buffer, offset) { - const dest = this.resolvedProperty; - for (let i = 0, n = dest.length; i !== n; ++i) { - dest[i] = buffer[offset++]; + toStyle(item, renderer) { + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.toStyle(item, renderer || this); } } - _setValue_array_setNeedsUpdate(buffer, offset) { - const dest = this.resolvedProperty; - for (let i = 0, n = dest.length; i !== n; ++i) { - dest[i] = buffer[offset++]; + update(item, currentElement) { + const currentRenderer = this.getRendererInstance(item); + if (currentRenderer) { + return currentRenderer.update(item, currentElement); } - this.targetObject.needsUpdate = true; } - _setValue_array_setMatrixWorldNeedsUpdate(buffer, offset) { - const dest = this.resolvedProperty; - for (let i = 0, n = dest.length; i !== n; ++i) { - dest[i] = buffer[offset++]; + codeview(item) { + if (!item) { + return ""; } - this.targetObject.matrixWorldNeedsUpdate = true; - } - _setValue_arrayElement(buffer, offset) { - this.resolvedProperty[this.propertyIndex] = buffer[offset]; + let svgCode = this.render(item); + svgCode = svgCode.replace(//g, ">"); + return ` +
+${svgCode && `
${svgCode}
`} +
+ `; } - _setValue_arrayElement_setNeedsUpdate(buffer, offset) { - this.resolvedProperty[this.propertyIndex] = buffer[offset]; - this.targetObject.needsUpdate = true; +} +class SVGRender extends DomRender { + toDefaultCSS(item) { + return { + overflow: "visible", + "background-color": item.backgroundColor, + color: item.color, + "font-size": item.fontSize, + "font-weight": item.fontWeight, + "font-style": item.fontStyle, + "font-family": item.fontFamily, + "text-align": item.textAlign, + "text-decoration": item.textDecoration, + "text-transform": item.textTransform, + "letter-spacing": item.letterSpacing, + "word-spacing": item.wordSpacing, + "line-height": item.lineHeight, + "text-indent": item.textIndent, + "text-shadow": item.textShadow, + "text-overflow": item.textOverflow, + "text-wrap": item.textWrap, + "z-index": item.zIndex, + opacity: item.opacity, + "mix-blend-mode": item.mixBlendMode, + "transform-origin": item.transformOrigin, + "border-radius": item.borderRadius, + filter: item.filter, + "backdrop-filter": item.backdropFilter, + "box-shadow": item.boxShadow, + animation: item.animation, + transition: item.transition + }; } - _setValue_arrayElement_setMatrixWorldNeedsUpdate(buffer, offset) { - this.resolvedProperty[this.propertyIndex] = buffer[offset]; - this.targetObject.matrixWorldNeedsUpdate = true; + toCSS(item) { + const css = Object.assign({}, this.toVariableCSS(item), this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toTransformCSS(item), this.toLayoutItemCSS(item), this.toBorderCSS(item), this.toBackgroundImageCSS(item), this.toLayoutCSS(item)); + delete css.left; + delete css.top; + delete css.width; + delete css.height; + delete css.position; + return css; } - _setValue_fromArray(buffer, offset) { - this.resolvedProperty.fromArray(buffer, offset); + toSVGAttribute(item) { + var _a; + return __spreadProps(__spreadValues({}, this.toDefaultCSS(item)), { + strokeWidth: item.strokeWidth, + "fill-opacity": item.fillOpacity, + "fill-rule": item.fillRule, + "stroke-linecap": item.strokeLinecap, + "stroke-linejoin": item.strokeLinejoin, + "text-anchor": item.textAnchor, + "stroke-dasharray": (_a = item.strokeDasharray) == null ? void 0 : _a.join(" ") + }); } - _setValue_fromArray_setNeedsUpdate(buffer, offset) { - this.resolvedProperty.fromArray(buffer, offset); - this.targetObject.needsUpdate = true; + wrappedRender(item, callback) { + const { id, x, y, width: width2, height: height2, itemType } = item; + return ` + + + ${this.toDefString(item)} + ${isFunction(callback) && callback()} + + `; } - _setValue_fromArray_setMatrixWorldNeedsUpdate(buffer, offset) { - this.resolvedProperty.fromArray(buffer, offset); - this.targetObject.matrixWorldNeedsUpdate = true; + render(item, renderer) { + const { width: width2, height: height2, elementType } = item; + const tagName = elementType || "div"; + let css = this.toCSS(item); + return this.wrappedRender(item, () => { + return ` + + <${tagName} xmlns="http://www.w3.org/1999/xhtml" style="${CSS_TO_STRING(css)};width:100%;height:100%;"> + +${item.layers.map((it) => { + return renderer.render(it, renderer); + }).join("")} + `; + }); } - _getValue_unbound(targetArray, offset) { - this.bind(); - this.getValue(targetArray, offset); +} +class ArtBoardRender extends SVGRender { + toCSS(item) { + const css = Object.assign({}, this.toDefaultCSS(item), this.toClipPathCSS(item), this.toWebkitCSS(item), this.toTextClipCSS(item), this.toBackgroundImageCSS(item)); + delete css.left; + delete css.top; + delete css.width; + delete css.height; + delete css.position; + return css; } - _setValue_unbound(sourceArray, offset) { - this.bind(); - this.setValue(sourceArray, offset); + render(item, renderer, encoding = true) { + const { width: width2, height: height2 } = item; + let css = this.toCSS(item); + return ` +${encoding ? `` : ""} + + ${this.toDefString(item)} + ${item.layers.map((it) => { + return renderer.render(it, renderer); + }).join("")} + + `; } - bind() { - let targetObject = this.node; - const parsedPath = this.parsedPath; - const objectName = parsedPath.objectName; - const propertyName = parsedPath.propertyName; - let propertyIndex = parsedPath.propertyIndex; - if (!targetObject) { - targetObject = PropertyBinding.findNode(this.rootNode, parsedPath.nodeName) || this.rootNode; - this.node = targetObject; - } - this.getValue = this._getValue_unavailable; - this.setValue = this._setValue_unavailable; - if (!targetObject) { - console.error("THREE.PropertyBinding: Trying to update node for track: " + this.path + " but it wasn't found."); - return; - } - if (objectName) { - let objectIndex = parsedPath.objectIndex; - switch (objectName) { - case "materials": - if (!targetObject.material) { - console.error("THREE.PropertyBinding: Can not bind to material as node does not have a material.", this); - return; - } - if (!targetObject.material.materials) { - console.error("THREE.PropertyBinding: Can not bind to material.materials as node.material does not have a materials array.", this); - return; - } - targetObject = targetObject.material.materials; - break; - case "bones": - if (!targetObject.skeleton) { - console.error("THREE.PropertyBinding: Can not bind to bones as node does not have a skeleton.", this); - return; - } - targetObject = targetObject.skeleton.bones; - for (let i = 0; i < targetObject.length; i++) { - if (targetObject[i].name === objectIndex) { - objectIndex = i; - break; - } - } - break; - default: - if (targetObject[objectName] === void 0) { - console.error("THREE.PropertyBinding: Can not bind to objectName of node undefined.", this); - return; - } - targetObject = targetObject[objectName]; - } - if (objectIndex !== void 0) { - if (targetObject[objectIndex] === void 0) { - console.error("THREE.PropertyBinding: Trying to bind to objectIndex of objectName, but is undefined.", this, targetObject); - return; - } - targetObject = targetObject[objectIndex]; - } - } - const nodeProperty = targetObject[propertyName]; - if (nodeProperty === void 0) { - const nodeName = parsedPath.nodeName; - console.error("THREE.PropertyBinding: Trying to update property for track: " + nodeName + "." + propertyName + " but it wasn't found.", targetObject); - return; - } - let versioning = this.Versioning.None; - this.targetObject = targetObject; - if (targetObject.needsUpdate !== void 0) { - versioning = this.Versioning.NeedsUpdate; - } else if (targetObject.matrixWorldNeedsUpdate !== void 0) { - versioning = this.Versioning.MatrixWorldNeedsUpdate; - } - let bindingType = this.BindingType.Direct; - if (propertyIndex !== void 0) { - if (propertyName === "morphTargetInfluences") { - if (!targetObject.geometry) { - console.error("THREE.PropertyBinding: Can not bind to morphTargetInfluences because node does not have a geometry.", this); - return; - } - if (targetObject.geometry.isBufferGeometry) { - if (!targetObject.geometry.morphAttributes) { - console.error("THREE.PropertyBinding: Can not bind to morphTargetInfluences because node does not have a geometry.morphAttributes.", this); - return; - } - if (targetObject.morphTargetDictionary[propertyIndex] !== void 0) { - propertyIndex = targetObject.morphTargetDictionary[propertyIndex]; - } - } else { - console.error("THREE.PropertyBinding: Can not bind to morphTargetInfluences on THREE.Geometry. Use THREE.BufferGeometry instead.", this); - return; - } - } - bindingType = this.BindingType.ArrayElement; - this.resolvedProperty = nodeProperty; - this.propertyIndex = propertyIndex; - } else if (nodeProperty.fromArray !== void 0 && nodeProperty.toArray !== void 0) { - bindingType = this.BindingType.HasFromToArray; - this.resolvedProperty = nodeProperty; - } else if (Array.isArray(nodeProperty)) { - bindingType = this.BindingType.EntireArray; - this.resolvedProperty = nodeProperty; +} +class SVGLayerRender extends SVGRender { +} +class SVGItemRender extends SVGLayerRender { + updateDefString(item, currentElement) { + var $defs = currentElement.$("defs"); + if ($defs) { + $defs.html(this.toDefInnerString(item)); } else { - this.propertyName = propertyName; - } - this.getValue = this.GetterByBindingType[bindingType]; - this.setValue = this.SetterByBindingTypeAndVersioning[bindingType][versioning]; - } - unbind() { - this.node = null; - this.getValue = this._getValue_unbound; - this.setValue = this._setValue_unbound; - } -} -PropertyBinding.Composite = Composite; -PropertyBinding.prototype.BindingType = { - Direct: 0, - EntireArray: 1, - ArrayElement: 2, - HasFromToArray: 3 -}; -PropertyBinding.prototype.Versioning = { - None: 0, - NeedsUpdate: 1, - MatrixWorldNeedsUpdate: 2 -}; -PropertyBinding.prototype.GetterByBindingType = [ - PropertyBinding.prototype._getValue_direct, - PropertyBinding.prototype._getValue_array, - PropertyBinding.prototype._getValue_arrayElement, - PropertyBinding.prototype._getValue_toArray -]; -PropertyBinding.prototype.SetterByBindingTypeAndVersioning = [ - [ - PropertyBinding.prototype._setValue_direct, - PropertyBinding.prototype._setValue_direct_setNeedsUpdate, - PropertyBinding.prototype._setValue_direct_setMatrixWorldNeedsUpdate - ], - [ - PropertyBinding.prototype._setValue_array, - PropertyBinding.prototype._setValue_array_setNeedsUpdate, - PropertyBinding.prototype._setValue_array_setMatrixWorldNeedsUpdate - ], - [ - PropertyBinding.prototype._setValue_arrayElement, - PropertyBinding.prototype._setValue_arrayElement_setNeedsUpdate, - PropertyBinding.prototype._setValue_arrayElement_setMatrixWorldNeedsUpdate - ], - [ - PropertyBinding.prototype._setValue_fromArray, - PropertyBinding.prototype._setValue_fromArray_setNeedsUpdate, - PropertyBinding.prototype._setValue_fromArray_setMatrixWorldNeedsUpdate - ] -]; -class AnimationAction { - constructor(mixer, clip, localRoot = null, blendMode = clip.blendMode) { - this._mixer = mixer; - this._clip = clip; - this._localRoot = localRoot; - this.blendMode = blendMode; - const tracks = clip.tracks, nTracks = tracks.length, interpolants = new Array(nTracks); - const interpolantSettings = { - endingStart: ZeroCurvatureEnding, - endingEnd: ZeroCurvatureEnding - }; - for (let i = 0; i !== nTracks; ++i) { - const interpolant = tracks[i].createInterpolant(null); - interpolants[i] = interpolant; - interpolant.settings = interpolantSettings; - } - this._interpolantSettings = interpolantSettings; - this._interpolants = interpolants; - this._propertyBindings = new Array(nTracks); - this._cacheIndex = null; - this._byClipCacheIndex = null; - this._timeScaleInterpolant = null; - this._weightInterpolant = null; - this.loop = LoopRepeat; - this._loopCount = -1; - this._startTime = null; - this.time = 0; - this.timeScale = 1; - this._effectiveTimeScale = 1; - this.weight = 1; - this._effectiveWeight = 1; - this.repetitions = Infinity; - this.paused = false; - this.enabled = true; - this.clampWhenFinished = false; - this.zeroSlopeAtStart = true; - this.zeroSlopeAtEnd = true; - } - play() { - this._mixer._activateAction(this); - return this; - } - stop() { - this._mixer._deactivateAction(this); - return this.reset(); - } - reset() { - this.paused = false; - this.enabled = true; - this.time = 0; - this._loopCount = -1; - this._startTime = null; - return this.stopFading().stopWarping(); - } - isRunning() { - return this.enabled && !this.paused && this.timeScale !== 0 && this._startTime === null && this._mixer._isActiveAction(this); - } - isScheduled() { - return this._mixer._isActiveAction(this); - } - startAt(time) { - this._startTime = time; - return this; + var str = this.toDefString(item).trim(); + currentElement.prepend(Dom.createByHTML(str)); + } } - setLoop(mode, repetitions) { - this.loop = mode; - this.repetitions = repetitions; - return this; + toDefInnerString(item) { + return ` + ${this.toFillSVG(item)} + ${this.toStrokeSVG(item)} + `; } - setEffectiveWeight(weight) { - this.weight = weight; - this._effectiveWeight = this.enabled ? weight : 0; - return this.stopFading(); + toDefString(item) { + const str = this.toDefInnerString(item).trim(); + return ` + + ${str} + + `; } - getEffectiveWeight() { - return this._effectiveWeight; + fillId(item) { + return this.getInnerId(item, "fill"); } - fadeIn(duration) { - return this._scheduleFading(duration, 0, 1); + strokeId(item) { + return this.getInnerId(item, "stroke"); } - fadeOut(duration) { - return this._scheduleFading(duration, 1, 0); + toFillSVG(item) { + return SVGFill.parseImage(item.fill || "transparent").toSVGString(this.fillId(item)); } - crossFadeFrom(fadeOutAction, duration, warp) { - fadeOutAction.fadeOut(duration); - this.fadeIn(duration); - if (warp) { - const fadeInDuration = this._clip.duration, fadeOutDuration = fadeOutAction._clip.duration, startEndRatio = fadeOutDuration / fadeInDuration, endStartRatio = fadeInDuration / fadeOutDuration; - fadeOutAction.warp(1, startEndRatio, duration); - this.warp(endStartRatio, 1, duration); - } - return this; + toStrokeSVG(item) { + return SVGFill.parseImage(item.stroke || "black").toSVGString(this.strokeId(item)); } - crossFadeTo(fadeInAction, duration, warp) { - return fadeInAction.crossFadeFrom(this, duration, warp); + toFillValue(item) { + return SVGFill.parseImage(item.fill || "transparent").toFillValue(this.fillId(item)); } - stopFading() { - const weightInterpolant = this._weightInterpolant; - if (weightInterpolant !== null) { - this._weightInterpolant = null; - this._mixer._takeBackControlInterpolant(weightInterpolant); - } - return this; + toFillOpacityValue(item) { + return parse(item.fill || "transparent").a; } - setEffectiveTimeScale(timeScale) { - this.timeScale = timeScale; - this._effectiveTimeScale = this.paused ? 0 : timeScale; - return this.stopWarping(); - } - getEffectiveTimeScale() { - return this._effectiveTimeScale; - } - setDuration(duration) { - this.timeScale = this._clip.duration / duration; - return this.stopWarping(); - } - syncWith(action) { - this.time = action.time; - this.timeScale = action.timeScale; - return this.stopWarping(); - } - halt(duration) { - return this.warp(this._effectiveTimeScale, 0, duration); - } - warp(startTimeScale, endTimeScale, duration) { - const mixer = this._mixer, now = mixer.time, timeScale = this.timeScale; - let interpolant = this._timeScaleInterpolant; - if (interpolant === null) { - interpolant = mixer._lendControlInterpolant(); - this._timeScaleInterpolant = interpolant; - } - const times = interpolant.parameterPositions, values = interpolant.sampleValues; - times[0] = now; - times[1] = now + duration; - values[0] = startTimeScale / timeScale; - values[1] = endTimeScale / timeScale; - return this; + toStrokeValue(item) { + return SVGFill.parseImage(item.stroke || "black").toFillValue(this.strokeId(item)); } - stopWarping() { - const timeScaleInterpolant = this._timeScaleInterpolant; - if (timeScaleInterpolant !== null) { - this._timeScaleInterpolant = null; - this._mixer._takeBackControlInterpolant(timeScaleInterpolant); + toFilterValue(item) { + if (!item.svgfilter) { + return ""; } - return this; - } - getMixer() { - return this._mixer; - } - getClip() { - return this._clip; + return `url(#${item.svgfilter})`; } - getRoot() { - return this._localRoot || this._mixer._root; + toLayoutCSS() { + return {}; } - _update(time, deltaTime, timeDirection, accuIndex) { - if (!this.enabled) { - this._updateWeight(time); +} +class BooleanPathRender extends SVGItemRender { + update(item, currentElement) { + if (!currentElement) return; + const $path = currentElement.$(`[data-boolean-path-id="${item.id}"]`); + if ($path) { + $path.setAttr({ + d: item.d, + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item) + }); + item.totalLength = $path.totalLength; } - const startTime = this._startTime; - if (startTime !== null) { - const timeRunning = (time - startTime) * timeDirection; - if (timeRunning < 0 || timeDirection === 0) { - return; - } - this._startTime = null; - deltaTime = timeDirection * timeRunning; - } - deltaTime *= this._updateTimeScale(time); - const clipTime = this._updateTime(deltaTime); - const weight = this._updateWeight(time); - if (weight > 0) { - const interpolants = this._interpolants; - const propertyMixers = this._propertyBindings; - switch (this.blendMode) { - case AdditiveAnimationBlendMode: - for (let j = 0, m = interpolants.length; j !== m; ++j) { - interpolants[j].evaluate(clipTime); - propertyMixers[j].accumulateAdditive(weight); - } - break; - case NormalAnimationBlendMode: - default: - for (let j = 0, m = interpolants.length; j !== m; ++j) { - interpolants[j].evaluate(clipTime); - propertyMixers[j].accumulate(accuIndex, weight); - } - } - } + this.updateDefString(item, currentElement); } - _updateWeight(time) { - let weight = 0; - if (this.enabled) { - weight = this.weight; - const interpolant = this._weightInterpolant; - if (interpolant !== null) { - const interpolantValue = interpolant.evaluate(time)[0]; - weight *= interpolantValue; - if (time > interpolant.parameterPositions[1]) { - this.stopFading(); - if (interpolantValue === 0) { - this.enabled = false; - } - } - } - } - this._effectiveWeight = weight; - return weight; - } - _updateTimeScale(time) { - let timeScale = 0; - if (!this.paused) { - timeScale = this.timeScale; - const interpolant = this._timeScaleInterpolant; - if (interpolant !== null) { - const interpolantValue = interpolant.evaluate(time)[0]; - timeScale *= interpolantValue; - if (time > interpolant.parameterPositions[1]) { - this.stopWarping(); - if (timeScale === 0) { - this.paused = true; - } else { - this.timeScale = timeScale; - } - } - } - } - this._effectiveTimeScale = timeScale; - return timeScale; - } - _updateTime(deltaTime) { - const duration = this._clip.duration; - const loop = this.loop; - let time = this.time + deltaTime; - let loopCount = this._loopCount; - const pingPong = loop === LoopPingPong; - if (deltaTime === 0) { - if (loopCount === -1) - return time; - return pingPong && (loopCount & 1) === 1 ? duration - time : time; - } - if (loop === LoopOnce) { - if (loopCount === -1) { - this._loopCount = 0; - this._setEndings(true, true, false); - } - handle_stop: { - if (time >= duration) { - time = duration; - } else if (time < 0) { - time = 0; - } else { - this.time = time; - break handle_stop; - } - if (this.clampWhenFinished) - this.paused = true; - else - this.enabled = false; - this.time = time; - this._mixer.dispatchEvent({ - type: "finished", - action: this, - direction: deltaTime < 0 ? -1 : 1 - }); - } - } else { - if (loopCount === -1) { - if (deltaTime >= 0) { - loopCount = 0; - this._setEndings(true, this.repetitions === 0, pingPong); - } else { - this._setEndings(this.repetitions === 0, true, pingPong); - } - } - if (time >= duration || time < 0) { - const loopDelta = Math.floor(time / duration); - time -= duration * loopDelta; - loopCount += Math.abs(loopDelta); - const pending = this.repetitions - loopCount; - if (pending <= 0) { - if (this.clampWhenFinished) - this.paused = true; - else - this.enabled = false; - time = deltaTime > 0 ? duration : 0; - this.time = time; - this._mixer.dispatchEvent({ - type: "finished", - action: this, - direction: deltaTime > 0 ? 1 : -1 - }); - } else { - if (pending === 1) { - const atStart = deltaTime < 0; - this._setEndings(atStart, !atStart, pingPong); - } else { - this._setEndings(false, false, pingPong); - } - this._loopCount = loopCount; - this.time = time; - this._mixer.dispatchEvent({ - type: "loop", - action: this, - loopDelta - }); - } - } else { - this.time = time; - } - if (pingPong && (loopCount & 1) === 1) { - return duration - time; - } - } - return time; + render(item) { + var { d } = item; + return this.wrappedRender(item, () => { + return ` + + `; + }); } - _setEndings(atStart, atEnd, pingPong) { - const settings = this._interpolantSettings; - if (pingPong) { - settings.endingStart = ZeroSlopeEnding; - settings.endingEnd = ZeroSlopeEnding; - } else { - if (atStart) { - settings.endingStart = this.zeroSlopeAtStart ? ZeroSlopeEnding : ZeroCurvatureEnding; - } else { - settings.endingStart = WrapAroundEnding; - } - if (atEnd) { - settings.endingEnd = this.zeroSlopeAtEnd ? ZeroSlopeEnding : ZeroCurvatureEnding; - } else { - settings.endingEnd = WrapAroundEnding; - } +} +class CircleRender extends SVGLayerRender { +} +class IFrameRender extends SVGLayerRender { + update(item, currentElement) { + let $iframe = currentElement.$("iframe"); + if ($iframe) { + $iframe.attr("src", item.url || "about:blank"); } + super.update(item, currentElement); } - _scheduleFading(duration, weightNow, weightThen) { - const mixer = this._mixer, now = mixer.time; - let interpolant = this._weightInterpolant; - if (interpolant === null) { - interpolant = mixer._lendControlInterpolant(); - this._weightInterpolant = interpolant; - } - const times = interpolant.parameterPositions, values = interpolant.sampleValues; - times[0] = now; - values[0] = weightNow; - times[1] = now + duration; - values[1] = weightThen; - return this; + render(item) { + const { width: width2, height: height2, url = "about:blank" } = item; + let css = this.toCSS(item); + return this.wrappedRender(item, () => { + return ` + + + + `; + }); } } -class AnimationMixer extends EventDispatcher { - constructor(root) { - super(); - this._root = root; - this._initMemoryManager(); - this._accuIndex = 0; - this.time = 0; - this.timeScale = 1; - } - _bindAction(action, prototypeAction) { - const root = action._localRoot || this._root, tracks = action._clip.tracks, nTracks = tracks.length, bindings = action._propertyBindings, interpolants = action._interpolants, rootUuid = root.uuid, bindingsByRoot = this._bindingsByRootAndName; - let bindingsByName = bindingsByRoot[rootUuid]; - if (bindingsByName === void 0) { - bindingsByName = {}; - bindingsByRoot[rootUuid] = bindingsByName; - } - for (let i = 0; i !== nTracks; ++i) { - const track = tracks[i], trackName = track.name; - let binding = bindingsByName[trackName]; - if (binding !== void 0) { - ++binding.referenceCount; - bindings[i] = binding; - } else { - binding = bindings[i]; - if (binding !== void 0) { - if (binding._cacheIndex === null) { - ++binding.referenceCount; - this._addInactiveBinding(binding, rootUuid, trackName); - } - continue; - } - const path = prototypeAction && prototypeAction._propertyBindings[i].binding.parsedPath; - binding = new PropertyMixer(PropertyBinding.create(root, trackName, path), track.ValueTypeName, track.getValueSize()); - ++binding.referenceCount; - this._addInactiveBinding(binding, rootUuid, trackName); - bindings[i] = binding; - } - interpolants[i].resultBuffer = binding.buffer; - } - } - _activateAction(action) { - if (!this._isActiveAction(action)) { - if (action._cacheIndex === null) { - const rootUuid = (action._localRoot || this._root).uuid, clipUuid = action._clip.uuid, actionsForClip = this._actionsByClip[clipUuid]; - this._bindAction(action, actionsForClip && actionsForClip.knownActions[0]); - this._addInactiveAction(action, clipUuid, rootUuid); - } - const bindings = action._propertyBindings; - for (let i = 0, n = bindings.length; i !== n; ++i) { - const binding = bindings[i]; - if (binding.useCount++ === 0) { - this._lendBinding(binding); - binding.saveOriginalState(); - } - } - this._lendAction(action); - } +class ImageRender extends SVGLayerRender { + getUrl(item) { + var { src } = item; + var project2 = item.project; + return project2.getImageValueById(src); } - _deactivateAction(action) { - if (this._isActiveAction(action)) { - const bindings = action._propertyBindings; - for (let i = 0, n = bindings.length; i !== n; ++i) { - const binding = bindings[i]; - if (--binding.useCount === 0) { - binding.restoreOriginalState(); - this._takeBackBinding(binding); - } - } - this._takeBackAction(action); + render(item) { + const { width: width2, height: height2 } = item; + let css = this.toCSS(item); + return this.wrappedRender(item, () => { + return ` + +
+ +
+ + `; + }); + } + update(item, currentElement) { + const $image = currentElement.$("img"); + if ($image) { + $image.attr("src", this.getUrl(item)); } + super.update(item, currentElement); } - _initMemoryManager() { - this._actions = []; - this._nActiveActions = 0; - this._actionsByClip = {}; - this._bindings = []; - this._nActiveBindings = 0; - this._bindingsByRootAndName = {}; - this._controlInterpolants = []; - this._nActiveControlInterpolants = 0; - const scope = this; - this.stats = { - actions: { - get total() { - return scope._actions.length; - }, - get inUse() { - return scope._nActiveActions; - } - }, - bindings: { - get total() { - return scope._bindings.length; - }, - get inUse() { - return scope._nActiveBindings; - } - }, - controlInterpolants: { - get total() { - return scope._controlInterpolants.length; - }, - get inUse() { - return scope._nActiveControlInterpolants; - } - } - }; +} +class ProjectRender extends SVGRender { + render(item, renderer) { + return item.artboards.map((it) => { + return renderer.render(it, renderer); + }); } - _isActiveAction(action) { - const index2 = action._cacheIndex; - return index2 !== null && index2 < this._nActiveActions; - } - _addInactiveAction(action, clipUuid, rootUuid) { - const actions = this._actions, actionsByClip = this._actionsByClip; - let actionsForClip = actionsByClip[clipUuid]; - if (actionsForClip === void 0) { - actionsForClip = { - knownActions: [action], - actionByRoot: {} - }; - action._byClipCacheIndex = 0; - actionsByClip[clipUuid] = actionsForClip; - } else { - const knownActions = actionsForClip.knownActions; - action._byClipCacheIndex = knownActions.length; - knownActions.push(action); - } - action._cacheIndex = actions.length; - actions.push(action); - actionsForClip.actionByRoot[rootUuid] = action; - } - _removeInactiveAction(action) { - const actions = this._actions, lastInactiveAction = actions[actions.length - 1], cacheIndex = action._cacheIndex; - lastInactiveAction._cacheIndex = cacheIndex; - actions[cacheIndex] = lastInactiveAction; - actions.pop(); - action._cacheIndex = null; - const clipUuid = action._clip.uuid, actionsByClip = this._actionsByClip, actionsForClip = actionsByClip[clipUuid], knownActionsForClip = actionsForClip.knownActions, lastKnownAction = knownActionsForClip[knownActionsForClip.length - 1], byClipCacheIndex = action._byClipCacheIndex; - lastKnownAction._byClipCacheIndex = byClipCacheIndex; - knownActionsForClip[byClipCacheIndex] = lastKnownAction; - knownActionsForClip.pop(); - action._byClipCacheIndex = null; - const actionByRoot = actionsForClip.actionByRoot, rootUuid = (action._localRoot || this._root).uuid; - delete actionByRoot[rootUuid]; - if (knownActionsForClip.length === 0) { - delete actionsByClip[clipUuid]; - } - this._removeInactiveBindingsForAction(action); - } - _removeInactiveBindingsForAction(action) { - const bindings = action._propertyBindings; - for (let i = 0, n = bindings.length; i !== n; ++i) { - const binding = bindings[i]; - if (--binding.referenceCount === 0) { - this._removeInactiveBinding(binding); - } - } - } - _lendAction(action) { - const actions = this._actions, prevIndex = action._cacheIndex, lastActiveIndex = this._nActiveActions++, firstInactiveAction = actions[lastActiveIndex]; - action._cacheIndex = lastActiveIndex; - actions[lastActiveIndex] = action; - firstInactiveAction._cacheIndex = prevIndex; - actions[prevIndex] = firstInactiveAction; - } - _takeBackAction(action) { - const actions = this._actions, prevIndex = action._cacheIndex, firstInactiveIndex = --this._nActiveActions, lastActiveAction = actions[firstInactiveIndex]; - action._cacheIndex = firstInactiveIndex; - actions[firstInactiveIndex] = action; - lastActiveAction._cacheIndex = prevIndex; - actions[prevIndex] = lastActiveAction; - } - _addInactiveBinding(binding, rootUuid, trackName) { - const bindingsByRoot = this._bindingsByRootAndName, bindings = this._bindings; - let bindingByName = bindingsByRoot[rootUuid]; - if (bindingByName === void 0) { - bindingByName = {}; - bindingsByRoot[rootUuid] = bindingByName; - } - bindingByName[trackName] = binding; - binding._cacheIndex = bindings.length; - bindings.push(binding); - } - _removeInactiveBinding(binding) { - const bindings = this._bindings, propBinding = binding.binding, rootUuid = propBinding.rootNode.uuid, trackName = propBinding.path, bindingsByRoot = this._bindingsByRootAndName, bindingByName = bindingsByRoot[rootUuid], lastInactiveBinding = bindings[bindings.length - 1], cacheIndex = binding._cacheIndex; - lastInactiveBinding._cacheIndex = cacheIndex; - bindings[cacheIndex] = lastInactiveBinding; - bindings.pop(); - delete bindingByName[trackName]; - if (Object.keys(bindingByName).length === 0) { - delete bindingsByRoot[rootUuid]; - } - } - _lendBinding(binding) { - const bindings = this._bindings, prevIndex = binding._cacheIndex, lastActiveIndex = this._nActiveBindings++, firstInactiveBinding = bindings[lastActiveIndex]; - binding._cacheIndex = lastActiveIndex; - bindings[lastActiveIndex] = binding; - firstInactiveBinding._cacheIndex = prevIndex; - bindings[prevIndex] = firstInactiveBinding; - } - _takeBackBinding(binding) { - const bindings = this._bindings, prevIndex = binding._cacheIndex, firstInactiveIndex = --this._nActiveBindings, lastActiveBinding = bindings[firstInactiveIndex]; - binding._cacheIndex = firstInactiveIndex; - bindings[firstInactiveIndex] = binding; - lastActiveBinding._cacheIndex = prevIndex; - bindings[prevIndex] = lastActiveBinding; - } - _lendControlInterpolant() { - const interpolants = this._controlInterpolants, lastActiveIndex = this._nActiveControlInterpolants++; - let interpolant = interpolants[lastActiveIndex]; - if (interpolant === void 0) { - interpolant = new LinearInterpolant(new Float32Array(2), new Float32Array(2), 1, this._controlInterpolantsResultBuffer); - interpolant.__cacheIndex = lastActiveIndex; - interpolants[lastActiveIndex] = interpolant; - } - return interpolant; - } - _takeBackControlInterpolant(interpolant) { - const interpolants = this._controlInterpolants, prevIndex = interpolant.__cacheIndex, firstInactiveIndex = --this._nActiveControlInterpolants, lastActiveInterpolant = interpolants[firstInactiveIndex]; - interpolant.__cacheIndex = firstInactiveIndex; - interpolants[firstInactiveIndex] = interpolant; - lastActiveInterpolant.__cacheIndex = prevIndex; - interpolants[prevIndex] = lastActiveInterpolant; - } - clipAction(clip, optionalRoot, blendMode) { - const root = optionalRoot || this._root, rootUuid = root.uuid; - let clipObject = typeof clip === "string" ? AnimationClip.findByName(root, clip) : clip; - const clipUuid = clipObject !== null ? clipObject.uuid : clip; - const actionsForClip = this._actionsByClip[clipUuid]; - let prototypeAction = null; - if (blendMode === void 0) { - if (clipObject !== null) { - blendMode = clipObject.blendMode; - } else { - blendMode = NormalAnimationBlendMode; - } - } - if (actionsForClip !== void 0) { - const existingAction = actionsForClip.actionByRoot[rootUuid]; - if (existingAction !== void 0 && existingAction.blendMode === blendMode) { - return existingAction; - } - prototypeAction = actionsForClip.knownActions[0]; - if (clipObject === null) - clipObject = prototypeAction._clip; +} +class RectRender extends SVGLayerRender { +} +class SplineRender extends SVGItemRender { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + $path.setAttr({ + d: item.d, + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item) + }); } - if (clipObject === null) - return null; - const newAction = new AnimationAction(this, clipObject, optionalRoot, blendMode); - this._bindAction(newAction, prototypeAction); - this._addInactiveAction(newAction, clipUuid, rootUuid); - return newAction; + this.updateDefString(item, currentElement); } - existingAction(clip, optionalRoot) { - const root = optionalRoot || this._root, rootUuid = root.uuid, clipObject = typeof clip === "string" ? AnimationClip.findByName(root, clip) : clip, clipUuid = clipObject ? clipObject.uuid : clip, actionsForClip = this._actionsByClip[clipUuid]; - if (actionsForClip !== void 0) { - return actionsForClip.actionByRoot[rootUuid] || null; - } - return null; + render(item) { + var { d } = item; + return this.wrappedRender(item, () => { + return ` + + `; + }); } - stopAllAction() { - const actions = this._actions, nActions = this._nActiveActions; - for (let i = nActions - 1; i >= 0; --i) { - actions[i].stop(); +} +class SVGPathRender extends SVGItemRender { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + $path.setAttr({ + d: item.d, + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item) + }); + item.totalLength = $path.totalLength; } - return this; + this.updateDefString(item, currentElement); } - update(deltaTime) { - deltaTime *= this.timeScale; - const actions = this._actions, nActions = this._nActiveActions, time = this.time += deltaTime, timeDirection = Math.sign(deltaTime), accuIndex = this._accuIndex ^= 1; - for (let i = 0; i !== nActions; ++i) { - const action = actions[i]; - action._update(time, deltaTime, timeDirection, accuIndex); - } - const bindings = this._bindings, nBindings = this._nActiveBindings; - for (let i = 0; i !== nBindings; ++i) { - bindings[i].apply(accuIndex); - } - return this; + render(item) { + var { d } = item; + return this.wrappedRender(item, () => { + return ` + + `; + }); } - setTime(timeInSeconds) { - this.time = 0; - for (let i = 0; i < this._actions.length; i++) { - this._actions[i].time = 0; +} +class SVGPolygonRender extends SVGItemRender { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + $path.setAttr({ + d: item.d, + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item) + }); } - return this.update(timeInSeconds); + this.updateDefString(item, currentElement); } - getRoot() { - return this._root; + render(item) { + var { d } = item; + return this.wrappedRender(item, () => { + return ` + + `; + }); } - uncacheClip(clip) { - const actions = this._actions, clipUuid = clip.uuid, actionsByClip = this._actionsByClip, actionsForClip = actionsByClip[clipUuid]; - if (actionsForClip !== void 0) { - const actionsToRemove = actionsForClip.knownActions; - for (let i = 0, n = actionsToRemove.length; i !== n; ++i) { - const action = actionsToRemove[i]; - this._deactivateAction(action); - const cacheIndex = action._cacheIndex, lastInactiveAction = actions[actions.length - 1]; - action._cacheIndex = null; - action._byClipCacheIndex = null; - lastInactiveAction._cacheIndex = cacheIndex; - actions[cacheIndex] = lastInactiveAction; - actions.pop(); - this._removeInactiveBindingsForAction(action); - } - delete actionsByClip[clipUuid]; +} +class SVGStarRender extends SVGItemRender { + update(item, currentElement) { + if (!currentElement) + return; + var $path = currentElement.$("path"); + if ($path) { + $path.setAttr({ + d: item.d, + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item) + }); } + this.updateDefString(item, currentElement); } - uncacheRoot(root) { - const rootUuid = root.uuid, actionsByClip = this._actionsByClip; - for (const clipUuid in actionsByClip) { - const actionByRoot = actionsByClip[clipUuid].actionByRoot, action = actionByRoot[rootUuid]; - if (action !== void 0) { - this._deactivateAction(action); - this._removeInactiveAction(action); - } - } - const bindingsByRoot = this._bindingsByRootAndName, bindingByName = bindingsByRoot[rootUuid]; - if (bindingByName !== void 0) { - for (const trackName in bindingByName) { - const binding = bindingByName[trackName]; - binding.restoreOriginalState(); - this._removeInactiveBinding(binding); - } - } + render(item) { + var { d } = item; + return this.wrappedRender(item, () => { + return ` + + `; + }); } - uncacheAction(clip, optionalRoot) { - const action = this.existingAction(clip, optionalRoot); - if (action !== null) { - this._deactivateAction(action); - this._removeInactiveAction(action); +} +class SVGTextPathRender extends SVGItemRender { + update(item, currentElement) { + var $path = currentElement.$("path"); + if ($path) { + $path.attr("d", item.d); + } + var $textPath = currentElement.$("textPath"); + if ($textPath) { + $textPath.text(item.text); + $textPath.setAttr({ + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item), + textLength: item.textLength, + lengthAdjust: item.lengthAdjust, + startOffset: item.startOffset + }); } + this.updateDefString(item, currentElement); + item.totalLength = $path.totalLength; } -} -AnimationMixer.prototype._controlInterpolantsResultBuffer = new Float32Array(1); -class InstancedInterleavedBuffer extends InterleavedBuffer { - constructor(array, stride, meshPerAttribute = 1) { - super(array, stride); - this.meshPerAttribute = meshPerAttribute; + toDefInnerString(item) { + return ` + ${this.toPathSVG(item)} + ${this.toFillSVG(item)} + ${this.toStrokeSVG(item)} + `; } - copy(source2) { - super.copy(source2); - this.meshPerAttribute = source2.meshPerAttribute; - return this; + toPathId(item) { + return this.getInnerId(item, "path"); } - clone(data) { - const ib = super.clone(data); - ib.meshPerAttribute = this.meshPerAttribute; - return ib; + toPathSVG(item) { + return ` + + `; } - toJSON(data) { - const json = super.toJSON(data); - json.isInstancedInterleavedBuffer = true; - json.meshPerAttribute = this.meshPerAttribute; - return json; + render(item) { + return this.wrappedRender(item, () => { + const { textLength, lengthAdjust, startOffset } = item; + return ` + ${item.text} + `; + }); } } -InstancedInterleavedBuffer.prototype.isInstancedInterleavedBuffer = true; -class Raycaster { - constructor(origin, direction2, near = 0, far = Infinity) { - this.ray = new Ray(origin, direction2); - this.near = near; - this.far = far; - this.camera = null; - this.layers = new Layers(); - this.params = { - Mesh: {}, - Line: { threshold: 1 }, - LOD: {}, - Points: { threshold: 1 }, - Sprite: {} - }; - } - set(origin, direction2) { - this.ray.set(origin, direction2); - } - setFromCamera(coords, camera) { - if (camera.isPerspectiveCamera) { - this.ray.origin.setFromMatrixPosition(camera.matrixWorld); - this.ray.direction.set(coords.x, coords.y, 0.5).unproject(camera).sub(this.ray.origin).normalize(); - this.camera = camera; - } else if (camera.isOrthographicCamera) { - this.ray.origin.set(coords.x, coords.y, (camera.near + camera.far) / (camera.near - camera.far)).unproject(camera); - this.ray.direction.set(0, 0, -1).transformDirection(camera.matrixWorld); - this.camera = camera; - } else { - console.error("THREE.Raycaster: Unsupported camera type: " + camera.type); +class SVGTextRender extends SVGItemRender { + update(item, currentElement) { + var $text = currentElement.$("text"); + if ($text) { + $text.text(item.text); + $text.setAttr({ + filter: this.toFilterValue(item), + fill: this.toFillValue(item), + stroke: this.toStrokeValue(item), + textLength: item.textLength, + lengthAdjust: item.lengthAdjust + }); } + this.updateDefString(item, currentElement); } - intersectObject(object, recursive = true, intersects2 = []) { - intersectObject(object, this, intersects2, recursive); - intersects2.sort(ascSort); - return intersects2; + shapeInsideId(item) { + return this.getInnerId(item, "shape-inside"); } - intersectObjects(objects, recursive = true, intersects2 = []) { - for (let i = 0, l = objects.length; i < l; i++) { - intersectObject(objects[i], this, intersects2, recursive); - } - intersects2.sort(ascSort); - return intersects2; + render(item) { + var { textLength, lengthAdjust } = item; + return this.wrappedRender(item, () => { + return ` + ${item.text} + `; + }); } } -function ascSort(a, b) { - return a.distance - b.distance; -} -function intersectObject(object, raycaster, intersects2, recursive) { - if (object.layers.test(raycaster.layers)) { - object.raycast(raycaster, intersects2); - } - if (recursive === true) { - const children2 = object.children; - for (let i = 0, l = children2.length; i < l; i++) { - intersectObject(children2[i], raycaster, intersects2, true); +class TemplateRender extends SVGLayerRender { + update(item, currentElement) { + const compiledTemplate = this.compile(item); + let $innerHTML = currentElement.$(".inner-html"); + if ($innerHTML) { + $innerHTML.updateDiff(compiledTemplate); } + super.update(item, currentElement); } -} -class Spherical { - constructor(radius = 1, phi = 0, theta = 0) { - this.radius = radius; - this.phi = phi; - this.theta = theta; - return this; + compile(item) { + return TemplateEngine.compile("dom", item.template, item.params); } - set(radius, phi, theta) { - this.radius = radius; - this.phi = phi; - this.theta = theta; - return this; + render(item) { + const { id, width: width2, height: height2 } = item; + const compiledTemplate = this.compile(item); + return this.wrappedRender(item, () => { + return ` + +
+ +
+ ${compiledTemplate} +
+
+ + `; + }); } - copy(other) { - this.radius = other.radius; - this.phi = other.phi; - this.theta = other.theta; - return this; +} +class TextRender extends SVGLayerRender { + toCSS(item) { + let css = super.toCSS(item); + css.margin = css.margin || "0px"; + css.height = "auto"; + return css; } - makeSafe() { - const EPS = 1e-6; - this.phi = Math.max(EPS, Math.min(Math.PI - EPS, this.phi)); - return this; + render(item) { + const { content: content2, width: width2, height: height2 } = item; + let css = this.toCSS(item); + return this.wrappedRender(item, () => { + return ` + +

${content2}

+ + `; + }); } - setFromVector3(v) { - return this.setFromCartesianCoords(v.x, v.y, v.z); + update(item, currentElement) { + var { content: content2 } = item; + currentElement.updateDiff(content2); } - setFromCartesianCoords(x, y, z) { - this.radius = Math.sqrt(x * x + y * y + z * z); - if (this.radius === 0) { - this.theta = 0; - this.phi = 0; - } else { - this.theta = Math.atan2(x, z); - this.phi = Math.acos(clamp(y / this.radius, -1, 1)); - } - return this; +} +class VideoRender extends SVGLayerRender { + getUrl(item) { + var { src } = item; + var project2 = item.project; + return project2.getVideoValueById(src); } - clone() { - return new this.constructor().copy(this); - } -} -const _vector$3 = /* @__PURE__ */ new Vector3(); -class SpotLightHelper extends Object3D { - constructor(light2, color2) { - super(); - this.light = light2; - this.light.updateMatrixWorld(); - this.matrix = light2.matrixWorld; - this.matrixAutoUpdate = false; - this.color = color2; - const geometry = new BufferGeometry(); - const positions = [ - 0, - 0, - 0, - 0, - 0, - 1, - 0, - 0, - 0, - 1, - 0, - 1, - 0, - 0, - 0, - -1, - 0, - 1, - 0, - 0, - 0, - 0, - 1, - 1, - 0, - 0, - 0, - 0, - -1, - 1 - ]; - for (let i = 0, j = 1, l = 32; i < l; i++, j++) { - const p1 = i / l * Math.PI * 2; - const p2 = j / l * Math.PI * 2; - positions.push(Math.cos(p1), Math.sin(p1), 1, Math.cos(p2), Math.sin(p2), 1); - } - geometry.setAttribute("position", new Float32BufferAttribute(positions, 3)); - const material = new LineBasicMaterial({ fog: false, toneMapped: false }); - this.cone = new LineSegments(geometry, material); - this.add(this.cone); - this.update(); - } - dispose() { - this.cone.geometry.dispose(); - this.cone.material.dispose(); - } - update() { - this.light.updateMatrixWorld(); - const coneLength = this.light.distance ? this.light.distance : 1e3; - const coneWidth = coneLength * Math.tan(this.light.angle); - this.cone.scale.set(coneWidth, coneWidth, coneLength); - _vector$3.setFromMatrixPosition(this.light.target.matrixWorld); - this.cone.lookAt(_vector$3); - if (this.color !== void 0) { - this.cone.material.color.set(this.color); - } else { - this.cone.material.color.copy(this.light.color); - } - } -} -const _vector$2 = /* @__PURE__ */ new Vector3(); -const _boneMatrix = /* @__PURE__ */ new Matrix4(); -const _matrixWorldInv = /* @__PURE__ */ new Matrix4(); -class SkeletonHelper extends LineSegments { - constructor(object) { - const bones = getBoneList(object); - const geometry = new BufferGeometry(); - const vertices = []; - const colors2 = []; - const color1 = new Color(0, 0, 1); - const color2 = new Color(0, 1, 0); - for (let i = 0; i < bones.length; i++) { - const bone = bones[i]; - if (bone.parent && bone.parent.isBone) { - vertices.push(0, 0, 0); - vertices.push(0, 0, 0); - colors2.push(color1.r, color1.g, color1.b); - colors2.push(color2.r, color2.g, color2.b); - } - } - geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - geometry.setAttribute("color", new Float32BufferAttribute(colors2, 3)); - const material = new LineBasicMaterial({ vertexColors: true, depthTest: false, depthWrite: false, toneMapped: false, transparent: true }); - super(geometry, material); - this.type = "SkeletonHelper"; - this.isSkeletonHelper = true; - this.root = object; - this.bones = bones; - this.matrix = object.matrixWorld; - this.matrixAutoUpdate = false; - } - updateMatrixWorld(force) { - const bones = this.bones; - const geometry = this.geometry; - const position2 = geometry.getAttribute("position"); - _matrixWorldInv.copy(this.root.matrixWorld).invert(); - for (let i = 0, j = 0; i < bones.length; i++) { - const bone = bones[i]; - if (bone.parent && bone.parent.isBone) { - _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.matrixWorld); - _vector$2.setFromMatrixPosition(_boneMatrix); - position2.setXYZ(j, _vector$2.x, _vector$2.y, _vector$2.z); - _boneMatrix.multiplyMatrices(_matrixWorldInv, bone.parent.matrixWorld); - _vector$2.setFromMatrixPosition(_boneMatrix); - position2.setXYZ(j + 1, _vector$2.x, _vector$2.y, _vector$2.z); - j += 2; - } - } - geometry.getAttribute("position").needsUpdate = true; - super.updateMatrixWorld(force); - } -} -function getBoneList(object) { - const boneList = []; - if (object.isBone === true) { - boneList.push(object); - } - for (let i = 0; i < object.children.length; i++) { - boneList.push.apply(boneList, getBoneList(object.children[i])); - } - return boneList; -} -class PointLightHelper extends Mesh { - constructor(light2, sphereSize, color2) { - const geometry = new SphereGeometry(sphereSize, 4, 2); - const material = new MeshBasicMaterial({ wireframe: true, fog: false, toneMapped: false }); - super(geometry, material); - this.light = light2; - this.light.updateMatrixWorld(); - this.color = color2; - this.type = "PointLightHelper"; - this.matrix = this.light.matrixWorld; - this.matrixAutoUpdate = false; - this.update(); - } - dispose() { - this.geometry.dispose(); - this.material.dispose(); - } - update() { - if (this.color !== void 0) { - this.material.color.set(this.color); - } else { - this.material.color.copy(this.light.color); - } - } -} -const _vector$1 = /* @__PURE__ */ new Vector3(); -const _color1 = /* @__PURE__ */ new Color(); -const _color2 = /* @__PURE__ */ new Color(); -class HemisphereLightHelper extends Object3D { - constructor(light2, size2, color2) { - super(); - this.light = light2; - this.light.updateMatrixWorld(); - this.matrix = light2.matrixWorld; - this.matrixAutoUpdate = false; - this.color = color2; - const geometry = new OctahedronGeometry(size2); - geometry.rotateY(Math.PI * 0.5); - this.material = new MeshBasicMaterial({ wireframe: true, fog: false, toneMapped: false }); - if (this.color === void 0) - this.material.vertexColors = true; - const position2 = geometry.getAttribute("position"); - const colors2 = new Float32Array(position2.count * 3); - geometry.setAttribute("color", new BufferAttribute(colors2, 3)); - this.add(new Mesh(geometry, this.material)); - this.update(); - } - dispose() { - this.children[0].geometry.dispose(); - this.children[0].material.dispose(); - } - update() { - const mesh = this.children[0]; - if (this.color !== void 0) { - this.material.color.set(this.color); - } else { - const colors2 = mesh.geometry.getAttribute("color"); - _color1.copy(this.light.color); - _color2.copy(this.light.groundColor); - for (let i = 0, l = colors2.count; i < l; i++) { - const color2 = i < l / 2 ? _color1 : _color2; - colors2.setXYZ(i, color2.r, color2.g, color2.b); - } - colors2.needsUpdate = true; - } - mesh.lookAt(_vector$1.setFromMatrixPosition(this.light.matrixWorld).negate()); - } -} -class GridHelper extends LineSegments { - constructor(size2 = 10, divisions = 10, color1 = 4473924, color2 = 8947848) { - color1 = new Color(color1); - color2 = new Color(color2); - const center2 = divisions / 2; - const step2 = size2 / divisions; - const halfSize = size2 / 2; - const vertices = [], colors2 = []; - for (let i = 0, j = 0, k = -halfSize; i <= divisions; i++, k += step2) { - vertices.push(-halfSize, 0, k, halfSize, 0, k); - vertices.push(k, 0, -halfSize, k, 0, halfSize); - const color3 = i === center2 ? color1 : color2; - color3.toArray(colors2, j); - j += 3; - color3.toArray(colors2, j); - j += 3; - color3.toArray(colors2, j); - j += 3; - color3.toArray(colors2, j); - j += 3; - } - const geometry = new BufferGeometry(); - geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - geometry.setAttribute("color", new Float32BufferAttribute(colors2, 3)); - const material = new LineBasicMaterial({ vertexColors: true, toneMapped: false }); - super(geometry, material); - this.type = "GridHelper"; - } -} -const _v1$8 = /* @__PURE__ */ new Vector3(); -const _v2$4 = /* @__PURE__ */ new Vector3(); -const _v3$2 = /* @__PURE__ */ new Vector3(); -class DirectionalLightHelper extends Object3D { - constructor(light2, size2, color2) { - super(); - this.light = light2; - this.light.updateMatrixWorld(); - this.matrix = light2.matrixWorld; - this.matrixAutoUpdate = false; - this.color = color2; - if (size2 === void 0) - size2 = 1; - let geometry = new BufferGeometry(); - geometry.setAttribute("position", new Float32BufferAttribute([ - -size2, - size2, - 0, - size2, - size2, - 0, - size2, - -size2, - 0, - -size2, - -size2, - 0, - -size2, - size2, - 0 - ], 3)); - const material = new LineBasicMaterial({ fog: false, toneMapped: false }); - this.lightPlane = new Line(geometry, material); - this.add(this.lightPlane); - geometry = new BufferGeometry(); - geometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 0, 0, 1], 3)); - this.targetLine = new Line(geometry, material); - this.add(this.targetLine); - this.update(); - } - dispose() { - this.lightPlane.geometry.dispose(); - this.lightPlane.material.dispose(); - this.targetLine.geometry.dispose(); - this.targetLine.material.dispose(); - } - update() { - _v1$8.setFromMatrixPosition(this.light.matrixWorld); - _v2$4.setFromMatrixPosition(this.light.target.matrixWorld); - _v3$2.subVectors(_v2$4, _v1$8); - this.lightPlane.lookAt(_v2$4); - if (this.color !== void 0) { - this.lightPlane.material.color.set(this.color); - this.targetLine.material.color.set(this.color); - } else { - this.lightPlane.material.color.copy(this.light.color); - this.targetLine.material.color.copy(this.light.color); - } - this.targetLine.lookAt(_v2$4); - this.targetLine.scale.z = _v3$2.length(); - } -} -const _vector = /* @__PURE__ */ new Vector3(); -const _camera = /* @__PURE__ */ new Camera(); -class CameraHelper extends LineSegments { - constructor(camera) { - const geometry = new BufferGeometry(); - const material = new LineBasicMaterial({ color: 16777215, vertexColors: true, toneMapped: false }); - const vertices = []; - const colors2 = []; - const pointMap = {}; - const colorFrustum = new Color(16755200); - const colorCone = new Color(16711680); - const colorUp = new Color(43775); - const colorTarget = new Color(16777215); - const colorCross = new Color(3355443); - addLine("n1", "n2", colorFrustum); - addLine("n2", "n4", colorFrustum); - addLine("n4", "n3", colorFrustum); - addLine("n3", "n1", colorFrustum); - addLine("f1", "f2", colorFrustum); - addLine("f2", "f4", colorFrustum); - addLine("f4", "f3", colorFrustum); - addLine("f3", "f1", colorFrustum); - addLine("n1", "f1", colorFrustum); - addLine("n2", "f2", colorFrustum); - addLine("n3", "f3", colorFrustum); - addLine("n4", "f4", colorFrustum); - addLine("p", "n1", colorCone); - addLine("p", "n2", colorCone); - addLine("p", "n3", colorCone); - addLine("p", "n4", colorCone); - addLine("u1", "u2", colorUp); - addLine("u2", "u3", colorUp); - addLine("u3", "u1", colorUp); - addLine("c", "t", colorTarget); - addLine("p", "c", colorCross); - addLine("cn1", "cn2", colorCross); - addLine("cn3", "cn4", colorCross); - addLine("cf1", "cf2", colorCross); - addLine("cf3", "cf4", colorCross); - function addLine(a, b, color2) { - addPoint(a, color2); - addPoint(b, color2); - } - function addPoint(id, color2) { - vertices.push(0, 0, 0); - colors2.push(color2.r, color2.g, color2.b); - if (pointMap[id] === void 0) { - pointMap[id] = []; - } - pointMap[id].push(vertices.length / 3 - 1); - } - geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3)); - geometry.setAttribute("color", new Float32BufferAttribute(colors2, 3)); - super(geometry, material); - this.type = "CameraHelper"; - this.camera = camera; - if (this.camera.updateProjectionMatrix) - this.camera.updateProjectionMatrix(); - this.matrix = camera.matrixWorld; - this.matrixAutoUpdate = false; - this.pointMap = pointMap; - this.update(); - } - update() { - const geometry = this.geometry; - const pointMap = this.pointMap; - const w = 1, h = 1; - _camera.projectionMatrixInverse.copy(this.camera.projectionMatrixInverse); - setPoint("c", pointMap, geometry, _camera, 0, 0, -1); - setPoint("t", pointMap, geometry, _camera, 0, 0, 1); - setPoint("n1", pointMap, geometry, _camera, -w, -h, -1); - setPoint("n2", pointMap, geometry, _camera, w, -h, -1); - setPoint("n3", pointMap, geometry, _camera, -w, h, -1); - setPoint("n4", pointMap, geometry, _camera, w, h, -1); - setPoint("f1", pointMap, geometry, _camera, -w, -h, 1); - setPoint("f2", pointMap, geometry, _camera, w, -h, 1); - setPoint("f3", pointMap, geometry, _camera, -w, h, 1); - setPoint("f4", pointMap, geometry, _camera, w, h, 1); - setPoint("u1", pointMap, geometry, _camera, w * 0.7, h * 1.1, -1); - setPoint("u2", pointMap, geometry, _camera, -w * 0.7, h * 1.1, -1); - setPoint("u3", pointMap, geometry, _camera, 0, h * 2, -1); - setPoint("cf1", pointMap, geometry, _camera, -w, 0, 1); - setPoint("cf2", pointMap, geometry, _camera, w, 0, 1); - setPoint("cf3", pointMap, geometry, _camera, 0, -h, 1); - setPoint("cf4", pointMap, geometry, _camera, 0, h, 1); - setPoint("cn1", pointMap, geometry, _camera, -w, 0, -1); - setPoint("cn2", pointMap, geometry, _camera, w, 0, -1); - setPoint("cn3", pointMap, geometry, _camera, 0, -h, -1); - setPoint("cn4", pointMap, geometry, _camera, 0, h, -1); - geometry.getAttribute("position").needsUpdate = true; - } - dispose() { - this.geometry.dispose(); - this.material.dispose(); - } -} -function setPoint(point2, pointMap, geometry, camera, x, y, z) { - _vector.set(x, y, z).unproject(camera); - const points = pointMap[point2]; - if (points !== void 0) { - const position2 = geometry.getAttribute("position"); - for (let i = 0, l = points.length; i < l; i++) { - position2.setXYZ(points[i], _vector.x, _vector.y, _vector.z); - } - } -} -class Box3Helper extends LineSegments { - constructor(box, color2 = 16776960) { - const indices = new Uint16Array([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]); - const positions = [1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1]; - const geometry = new BufferGeometry(); - geometry.setIndex(new BufferAttribute(indices, 1)); - geometry.setAttribute("position", new Float32BufferAttribute(positions, 3)); - super(geometry, new LineBasicMaterial({ color: color2, toneMapped: false })); - this.box = box; - this.type = "Box3Helper"; - this.geometry.computeBoundingSphere(); - } - updateMatrixWorld(force) { - const box = this.box; - if (box.isEmpty()) - return; - box.getCenter(this.position); - box.getSize(this.scale); - this.scale.multiplyScalar(0.5); - super.updateMatrixWorld(force); - } -} -const _baseTable = new Uint32Array(512); -const _shiftTable = new Uint32Array(512); -for (let i = 0; i < 256; ++i) { - const e = i - 127; - if (e < -27) { - _baseTable[i] = 0; - _baseTable[i | 256] = 32768; - _shiftTable[i] = 24; - _shiftTable[i | 256] = 24; - } else if (e < -14) { - _baseTable[i] = 1024 >> -e - 14; - _baseTable[i | 256] = 1024 >> -e - 14 | 32768; - _shiftTable[i] = -e - 1; - _shiftTable[i | 256] = -e - 1; - } else if (e <= 15) { - _baseTable[i] = e + 15 << 10; - _baseTable[i | 256] = e + 15 << 10 | 32768; - _shiftTable[i] = 13; - _shiftTable[i | 256] = 13; - } else if (e < 128) { - _baseTable[i] = 31744; - _baseTable[i | 256] = 64512; - _shiftTable[i] = 24; - _shiftTable[i | 256] = 24; - } else { - _baseTable[i] = 31744; - _baseTable[i | 256] = 64512; - _shiftTable[i] = 13; - _shiftTable[i | 256] = 13; - } -} -const _mantissaTable = new Uint32Array(2048); -const _exponentTable = new Uint32Array(64); -const _offsetTable = new Uint32Array(64); -for (let i = 1; i < 1024; ++i) { - let m = i << 13; - let e = 0; - while ((m & 8388608) === 0) { - m <<= 1; - e -= 8388608; - } - m &= ~8388608; - e += 947912704; - _mantissaTable[i] = m | e; -} -for (let i = 1024; i < 2048; ++i) { - _mantissaTable[i] = 939524096 + (i - 1024 << 13); -} -for (let i = 1; i < 31; ++i) { - _exponentTable[i] = i << 23; -} -_exponentTable[31] = 1199570944; -_exponentTable[32] = 2147483648; -for (let i = 33; i < 63; ++i) { - _exponentTable[i] = 2147483648 + (i - 32 << 23); -} -_exponentTable[63] = 3347054592; -for (let i = 1; i < 64; ++i) { - if (i !== 32) { - _offsetTable[i] = 1024; - } -} -Curve.create = function(construct, getPoint) { - console.log("THREE.Curve.create() has been deprecated"); - construct.prototype = Object.create(Curve.prototype); - construct.prototype.constructor = construct; - construct.prototype.getPoint = getPoint; - return construct; -}; -Path.prototype.fromPoints = function(points) { - console.warn("THREE.Path: .fromPoints() has been renamed to .setFromPoints()."); - return this.setFromPoints(points); -}; -GridHelper.prototype.setColors = function() { - console.error("THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead."); -}; -SkeletonHelper.prototype.update = function() { - console.error("THREE.SkeletonHelper: update() no longer needs to be called."); -}; -Loader.prototype.extractUrlBase = function(url) { - console.warn("THREE.Loader: .extractUrlBase() has been deprecated. Use THREE.LoaderUtils.extractUrlBase() instead."); - return LoaderUtils.extractUrlBase(url); -}; -Loader.Handlers = { - add: function() { - console.error("THREE.Loader: Handlers.add() has been removed. Use LoadingManager.addHandler() instead."); - }, - get: function() { - console.error("THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead."); + render(item) { + var { + width: width2, + height: height2, + controls, + muted, + poster, + loop, + crossorigin, + autoplay + } = item; + let css = this.toCSS(item); + return this.wrappedRender(item, () => { + return ` + + + + `; + }); } -}; -Box3.prototype.center = function(optionalTarget) { - console.warn("THREE.Box3: .center() has been renamed to .getCenter()."); - return this.getCenter(optionalTarget); -}; -Box3.prototype.empty = function() { - console.warn("THREE.Box3: .empty() has been renamed to .isEmpty()."); - return this.isEmpty(); -}; -Box3.prototype.isIntersectionBox = function(box) { - console.warn("THREE.Box3: .isIntersectionBox() has been renamed to .intersectsBox()."); - return this.intersectsBox(box); -}; -Box3.prototype.isIntersectionSphere = function(sphere) { - console.warn("THREE.Box3: .isIntersectionSphere() has been renamed to .intersectsSphere()."); - return this.intersectsSphere(sphere); -}; -Box3.prototype.size = function(optionalTarget) { - console.warn("THREE.Box3: .size() has been renamed to .getSize()."); - return this.getSize(optionalTarget); -}; -Euler.prototype.toVector3 = function() { - console.error("THREE.Euler: .toVector3() has been removed. Use Vector3.setFromEuler() instead"); -}; -Sphere.prototype.empty = function() { - console.warn("THREE.Sphere: .empty() has been renamed to .isEmpty()."); - return this.isEmpty(); -}; -Frustum.prototype.setFromMatrix = function(m) { - console.warn("THREE.Frustum: .setFromMatrix() has been renamed to .setFromProjectionMatrix()."); - return this.setFromProjectionMatrix(m); -}; -Matrix3.prototype.flattenToArrayOffset = function(array, offset) { - console.warn("THREE.Matrix3: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."); - return this.toArray(array, offset); -}; -Matrix3.prototype.multiplyVector3 = function(vector) { - console.warn("THREE.Matrix3: .multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead."); - return vector.applyMatrix3(this); -}; -Matrix3.prototype.multiplyVector3Array = function() { - console.error("THREE.Matrix3: .multiplyVector3Array() has been removed."); -}; -Matrix3.prototype.applyToBufferAttribute = function(attribute) { - console.warn("THREE.Matrix3: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix3( matrix ) instead."); - return attribute.applyMatrix3(this); -}; -Matrix3.prototype.applyToVector3Array = function() { - console.error("THREE.Matrix3: .applyToVector3Array() has been removed."); -}; -Matrix3.prototype.getInverse = function(matrix) { - console.warn("THREE.Matrix3: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."); - return this.copy(matrix).invert(); -}; -Matrix4.prototype.extractPosition = function(m) { - console.warn("THREE.Matrix4: .extractPosition() has been renamed to .copyPosition()."); - return this.copyPosition(m); -}; -Matrix4.prototype.flattenToArrayOffset = function(array, offset) { - console.warn("THREE.Matrix4: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."); - return this.toArray(array, offset); -}; -Matrix4.prototype.getPosition = function() { - console.warn("THREE.Matrix4: .getPosition() has been removed. Use Vector3.setFromMatrixPosition( matrix ) instead."); - return new Vector3().setFromMatrixColumn(this, 3); -}; -Matrix4.prototype.setRotationFromQuaternion = function(q) { - console.warn("THREE.Matrix4: .setRotationFromQuaternion() has been renamed to .makeRotationFromQuaternion()."); - return this.makeRotationFromQuaternion(q); -}; -Matrix4.prototype.multiplyToArray = function() { - console.warn("THREE.Matrix4: .multiplyToArray() has been removed."); -}; -Matrix4.prototype.multiplyVector3 = function(vector) { - console.warn("THREE.Matrix4: .multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead."); - return vector.applyMatrix4(this); -}; -Matrix4.prototype.multiplyVector4 = function(vector) { - console.warn("THREE.Matrix4: .multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead."); - return vector.applyMatrix4(this); -}; -Matrix4.prototype.multiplyVector3Array = function() { - console.error("THREE.Matrix4: .multiplyVector3Array() has been removed."); -}; -Matrix4.prototype.rotateAxis = function(v) { - console.warn("THREE.Matrix4: .rotateAxis() has been removed. Use Vector3.transformDirection( matrix ) instead."); - v.transformDirection(this); -}; -Matrix4.prototype.crossVector = function(vector) { - console.warn("THREE.Matrix4: .crossVector() has been removed. Use vector.applyMatrix4( matrix ) instead."); - return vector.applyMatrix4(this); -}; -Matrix4.prototype.translate = function() { - console.error("THREE.Matrix4: .translate() has been removed."); -}; -Matrix4.prototype.rotateX = function() { - console.error("THREE.Matrix4: .rotateX() has been removed."); -}; -Matrix4.prototype.rotateY = function() { - console.error("THREE.Matrix4: .rotateY() has been removed."); -}; -Matrix4.prototype.rotateZ = function() { - console.error("THREE.Matrix4: .rotateZ() has been removed."); -}; -Matrix4.prototype.rotateByAxis = function() { - console.error("THREE.Matrix4: .rotateByAxis() has been removed."); -}; -Matrix4.prototype.applyToBufferAttribute = function(attribute) { - console.warn("THREE.Matrix4: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix4( matrix ) instead."); - return attribute.applyMatrix4(this); -}; -Matrix4.prototype.applyToVector3Array = function() { - console.error("THREE.Matrix4: .applyToVector3Array() has been removed."); -}; -Matrix4.prototype.makeFrustum = function(left2, right2, bottom2, top2, near, far) { - console.warn("THREE.Matrix4: .makeFrustum() has been removed. Use .makePerspective( left, right, top, bottom, near, far ) instead."); - return this.makePerspective(left2, right2, top2, bottom2, near, far); -}; -Matrix4.prototype.getInverse = function(matrix) { - console.warn("THREE.Matrix4: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."); - return this.copy(matrix).invert(); -}; -Plane.prototype.isIntersectionLine = function(line2) { - console.warn("THREE.Plane: .isIntersectionLine() has been renamed to .intersectsLine()."); - return this.intersectsLine(line2); -}; -Quaternion.prototype.multiplyVector3 = function(vector) { - console.warn("THREE.Quaternion: .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead."); - return vector.applyQuaternion(this); -}; -Quaternion.prototype.inverse = function() { - console.warn("THREE.Quaternion: .inverse() has been renamed to invert()."); - return this.invert(); -}; -Ray.prototype.isIntersectionBox = function(box) { - console.warn("THREE.Ray: .isIntersectionBox() has been renamed to .intersectsBox()."); - return this.intersectsBox(box); -}; -Ray.prototype.isIntersectionPlane = function(plane) { - console.warn("THREE.Ray: .isIntersectionPlane() has been renamed to .intersectsPlane()."); - return this.intersectsPlane(plane); -}; -Ray.prototype.isIntersectionSphere = function(sphere) { - console.warn("THREE.Ray: .isIntersectionSphere() has been renamed to .intersectsSphere()."); - return this.intersectsSphere(sphere); -}; -Triangle.prototype.area = function() { - console.warn("THREE.Triangle: .area() has been renamed to .getArea()."); - return this.getArea(); -}; -Triangle.prototype.barycoordFromPoint = function(point2, target) { - console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."); - return this.getBarycoord(point2, target); -}; -Triangle.prototype.midpoint = function(target) { - console.warn("THREE.Triangle: .midpoint() has been renamed to .getMidpoint()."); - return this.getMidpoint(target); -}; -Triangle.prototypenormal = function(target) { - console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."); - return this.getNormal(target); -}; -Triangle.prototype.plane = function(target) { - console.warn("THREE.Triangle: .plane() has been renamed to .getPlane()."); - return this.getPlane(target); -}; -Triangle.barycoordFromPoint = function(point2, a, b, c2, target) { - console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."); - return Triangle.getBarycoord(point2, a, b, c2, target); -}; -Triangle.normal = function(a, b, c2, target) { - console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."); - return Triangle.getNormal(a, b, c2, target); -}; -Shape.prototype.extractAllPoints = function(divisions) { - console.warn("THREE.Shape: .extractAllPoints() has been removed. Use .extractPoints() instead."); - return this.extractPoints(divisions); -}; -Shape.prototype.extrude = function(options2) { - console.warn("THREE.Shape: .extrude() has been removed. Use ExtrudeGeometry() instead."); - return new ExtrudeGeometry(this, options2); -}; -Shape.prototype.makeGeometry = function(options2) { - console.warn("THREE.Shape: .makeGeometry() has been removed. Use ShapeGeometry() instead."); - return new ShapeGeometry(this, options2); -}; -Vector2.prototype.fromAttribute = function(attribute, index2, offset) { - console.warn("THREE.Vector2: .fromAttribute() has been renamed to .fromBufferAttribute()."); - return this.fromBufferAttribute(attribute, index2, offset); -}; -Vector2.prototype.distanceToManhattan = function(v) { - console.warn("THREE.Vector2: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."); - return this.manhattanDistanceTo(v); -}; -Vector2.prototype.lengthManhattan = function() { - console.warn("THREE.Vector2: .lengthManhattan() has been renamed to .manhattanLength()."); - return this.manhattanLength(); -}; -Vector3.prototype.setEulerFromRotationMatrix = function() { - console.error("THREE.Vector3: .setEulerFromRotationMatrix() has been removed. Use Euler.setFromRotationMatrix() instead."); -}; -Vector3.prototype.setEulerFromQuaternion = function() { - console.error("THREE.Vector3: .setEulerFromQuaternion() has been removed. Use Euler.setFromQuaternion() instead."); -}; -Vector3.prototype.getPositionFromMatrix = function(m) { - console.warn("THREE.Vector3: .getPositionFromMatrix() has been renamed to .setFromMatrixPosition()."); - return this.setFromMatrixPosition(m); -}; -Vector3.prototype.getScaleFromMatrix = function(m) { - console.warn("THREE.Vector3: .getScaleFromMatrix() has been renamed to .setFromMatrixScale()."); - return this.setFromMatrixScale(m); -}; -Vector3.prototype.getColumnFromMatrix = function(index2, matrix) { - console.warn("THREE.Vector3: .getColumnFromMatrix() has been renamed to .setFromMatrixColumn()."); - return this.setFromMatrixColumn(matrix, index2); -}; -Vector3.prototype.applyProjection = function(m) { - console.warn("THREE.Vector3: .applyProjection() has been removed. Use .applyMatrix4( m ) instead."); - return this.applyMatrix4(m); -}; -Vector3.prototype.fromAttribute = function(attribute, index2, offset) { - console.warn("THREE.Vector3: .fromAttribute() has been renamed to .fromBufferAttribute()."); - return this.fromBufferAttribute(attribute, index2, offset); -}; -Vector3.prototype.distanceToManhattan = function(v) { - console.warn("THREE.Vector3: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."); - return this.manhattanDistanceTo(v); -}; -Vector3.prototype.lengthManhattan = function() { - console.warn("THREE.Vector3: .lengthManhattan() has been renamed to .manhattanLength()."); - return this.manhattanLength(); -}; -Vector4.prototype.fromAttribute = function(attribute, index2, offset) { - console.warn("THREE.Vector4: .fromAttribute() has been renamed to .fromBufferAttribute()."); - return this.fromBufferAttribute(attribute, index2, offset); -}; -Vector4.prototype.lengthManhattan = function() { - console.warn("THREE.Vector4: .lengthManhattan() has been renamed to .manhattanLength()."); - return this.manhattanLength(); -}; -Object3D.prototype.getChildByName = function(name) { - console.warn("THREE.Object3D: .getChildByName() has been renamed to .getObjectByName()."); - return this.getObjectByName(name); -}; -Object3D.prototype.renderDepth = function() { - console.warn("THREE.Object3D: .renderDepth has been removed. Use .renderOrder, instead."); -}; -Object3D.prototype.translate = function(distance2, axis) { - console.warn("THREE.Object3D: .translate() has been removed. Use .translateOnAxis( axis, distance ) instead."); - return this.translateOnAxis(axis, distance2); -}; -Object3D.prototype.getWorldRotation = function() { - console.error("THREE.Object3D: .getWorldRotation() has been removed. Use THREE.Object3D.getWorldQuaternion( target ) instead."); -}; -Object3D.prototype.applyMatrix = function(matrix) { - console.warn("THREE.Object3D: .applyMatrix() has been renamed to .applyMatrix4()."); - return this.applyMatrix4(matrix); -}; -Object.defineProperties(Object3D.prototype, { - eulerOrder: { - get: function() { - console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."); - return this.rotation.order; - }, - set: function(value) { - console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."); - this.rotation.order = value; - } - }, - useQuaternion: { - get: function() { - console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default."); - }, - set: function() { - console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default."); - } +} +function rendererSvg(editor) { + editor.registerRendererType("svg", new SVGRenderer(editor)); + editor.registerRenderer("svg", "project", new ProjectRender()); + editor.registerRenderer("svg", "artboard", new ArtBoardRender()); + editor.registerRenderer("svg", "rect", new RectRender()); + editor.registerRenderer("svg", "circle", new CircleRender()); + editor.registerRenderer("svg", "image", new ImageRender()); + editor.registerRenderer("svg", "template", new TemplateRender()); + editor.registerRenderer("svg", "iframe", new IFrameRender()); + editor.registerRenderer("svg", "video", new VideoRender()); + editor.registerRenderer("svg", "text", new TextRender()); + editor.registerRenderer("svg", "boolean-path", new BooleanPathRender()); + editor.registerRenderer("svg", "svg-path", new SVGPathRender()); + editor.registerRenderer("svg", "polygon", new SVGPolygonRender()); + editor.registerRenderer("svg", "star", new SVGStarRender()); + editor.registerRenderer("svg", "spline", new SplineRender()); + editor.registerRenderer("svg", "svg-text", new SVGTextRender()); + editor.registerRenderer("svg", "svg-textpath", new SVGTextPathRender()); +} +var HTMLRenderView$1 = ""; +class HTMLRenderView extends EditorElement { + initialize() { + super.initialize(); + rendererHtml(this.$editor); + rendererSvg(this.$editor); + this.renderer = this.$editor.renderer("html"); } -}); -Mesh.prototype.setDrawMode = function() { - console.error("THREE.Mesh: .setDrawMode() has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary."); -}; -Object.defineProperties(Mesh.prototype, { - drawMode: { - get: function() { - console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode."); - return TrianglesDrawMode; - }, - set: function() { - console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary."); - } + initState() { + return { + mode: "selection", + x: 0, + y: 0, + width: 1e4, + height: 1e4, + cachedCurrentElement: {}, + doubleClickTime: 0 + }; } -}); -SkinnedMesh.prototype.initBones = function() { - console.error("THREE.SkinnedMesh: initBones() has been removed."); -}; -PerspectiveCamera.prototype.setLens = function(focalLength, filmGauge) { - console.warn("THREE.PerspectiveCamera.setLens is deprecated. Use .setFocalLength and .filmGauge for a photographic setup."); - if (filmGauge !== void 0) - this.filmGauge = filmGauge; - this.setFocalLength(focalLength); -}; -Object.defineProperties(Light.prototype, { - onlyShadow: { - set: function() { - console.warn("THREE.Light: .onlyShadow has been removed."); - } - }, - shadowCameraFov: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraFov is now .shadow.camera.fov."); - this.shadow.camera.fov = value; - } - }, - shadowCameraLeft: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraLeft is now .shadow.camera.left."); - this.shadow.camera.left = value; - } - }, - shadowCameraRight: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraRight is now .shadow.camera.right."); - this.shadow.camera.right = value; - } - }, - shadowCameraTop: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraTop is now .shadow.camera.top."); - this.shadow.camera.top = value; - } - }, - shadowCameraBottom: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraBottom is now .shadow.camera.bottom."); - this.shadow.camera.bottom = value; - } - }, - shadowCameraNear: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraNear is now .shadow.camera.near."); - this.shadow.camera.near = value; - } - }, - shadowCameraFar: { - set: function(value) { - console.warn("THREE.Light: .shadowCameraFar is now .shadow.camera.far."); - this.shadow.camera.far = value; - } - }, - shadowCameraVisible: { - set: function() { - console.warn("THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( light.shadow.camera ) instead."); - } - }, - shadowBias: { - set: function(value) { - console.warn("THREE.Light: .shadowBias is now .shadow.bias."); - this.shadow.bias = value; - } - }, - shadowDarkness: { - set: function() { - console.warn("THREE.Light: .shadowDarkness has been removed."); - } - }, - shadowMapWidth: { - set: function(value) { - console.warn("THREE.Light: .shadowMapWidth is now .shadow.mapSize.width."); - this.shadow.mapSize.width = value; - } - }, - shadowMapHeight: { - set: function(value) { - console.warn("THREE.Light: .shadowMapHeight is now .shadow.mapSize.height."); - this.shadow.mapSize.height = value; - } + template() { + return `
+
+ ${this.$injectManager.generate("render.view")} +
`; + } + [BIND("$view")]() { + const { translate: translate2, transformOrigin: origin, scale: scale2 } = this.$viewport; + const transform2 = `translate(${translate2[0]}px, ${translate2[1]}px) scale(${scale2 || 1})`; + const transformOrigin = `${origin[0]}px ${origin[1]}px`; + return { + style: { + "transform-origin": transformOrigin, + transform: transform2 + } + }; } -}); -Object.defineProperties(BufferAttribute.prototype, { - length: { - get: function() { - console.warn("THREE.BufferAttribute: .length has been deprecated. Use .count instead."); - return this.array.length; - } - }, - dynamic: { - get: function() { - console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."); - return this.usage === DynamicDrawUsage; - }, - set: function() { - console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."); - this.setUsage(DynamicDrawUsage); + [CONFIG("show.outline")]() { + this.refs.$view.attr("data-outline", this.$config.get("show.outline")); + } + [CONFIG("bodyEvent")]() { + const e = this.$config.get("bodyEvent"); + if (e.buttons === 0) { + if (Dom.create(e.target).hasClass("elf--drag-area-view")) { + this.$commands.emit("recoverCursor"); + } } } -}); -BufferAttribute.prototype.setDynamic = function(value) { - console.warn("THREE.BufferAttribute: .setDynamic() has been deprecated. Use .setUsage() instead."); - this.setUsage(value === true ? DynamicDrawUsage : StaticDrawUsage); - return this; -}; -BufferAttribute.prototype.copyIndicesArray = function() { - console.error("THREE.BufferAttribute: .copyIndicesArray() has been removed."); -}, BufferAttribute.prototype.setArray = function() { - console.error("THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers"); -}; -BufferGeometry.prototype.addIndex = function(index2) { - console.warn("THREE.BufferGeometry: .addIndex() has been renamed to .setIndex()."); - this.setIndex(index2); -}; -BufferGeometry.prototype.addAttribute = function(name, attribute) { - console.warn("THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute()."); - if (!(attribute && attribute.isBufferAttribute) && !(attribute && attribute.isInterleavedBufferAttribute)) { - console.warn("THREE.BufferGeometry: .addAttribute() now expects ( name, attribute )."); - return this.setAttribute(name, new BufferAttribute(arguments[1], arguments[2])); + [SUBSCRIBE("refElement")](id, callback) { + isFunction(callback) && callback(this.getElement(id)); } - if (name === "index") { - console.warn("THREE.BufferGeometry.addAttribute: Use .setIndex() for index attribute."); - this.setIndex(attribute); - return this; + [SUBSCRIBE(UPDATE_CANVAS)](obj2) { + this.refreshSelectionStyleView(obj2); } - return this.setAttribute(name, attribute); -}; -BufferGeometry.prototype.addDrawCall = function(start2, count, indexOffset) { - if (indexOffset !== void 0) { - console.warn("THREE.BufferGeometry: .addDrawCall() no longer supports indexOffset."); + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.bindData("$view"); } - console.warn("THREE.BufferGeometry: .addDrawCall() is now .addGroup()."); - this.addGroup(start2, count); -}; -BufferGeometry.prototype.clearDrawCalls = function() { - console.warn("THREE.BufferGeometry: .clearDrawCalls() is now .clearGroups()."); - this.clearGroups(); -}; -BufferGeometry.prototype.computeOffsets = function() { - console.warn("THREE.BufferGeometry: .computeOffsets() has been removed."); -}; -BufferGeometry.prototype.removeAttribute = function(name) { - console.warn("THREE.BufferGeometry: .removeAttribute() has been renamed to .deleteAttribute()."); - return this.deleteAttribute(name); -}; -BufferGeometry.prototype.applyMatrix = function(matrix) { - console.warn("THREE.BufferGeometry: .applyMatrix() has been renamed to .applyMatrix4()."); - return this.applyMatrix4(matrix); -}; -Object.defineProperties(BufferGeometry.prototype, { - drawcalls: { - get: function() { - console.error("THREE.BufferGeometry: .drawcalls has been renamed to .groups."); - return this.groups; - } - }, - offsets: { - get: function() { - console.warn("THREE.BufferGeometry: .offsets has been renamed to .groups."); - return this.groups; - } + [SUBSCRIBE("refreshAllElementBoundSize")]() { + this.refreshAllElementBoundSize(); } -}); -InterleavedBuffer.prototype.setDynamic = function(value) { - console.warn("THREE.InterleavedBuffer: .setDynamic() has been deprecated. Use .setUsage() instead."); - this.setUsage(value === true ? DynamicDrawUsage : StaticDrawUsage); - return this; -}; -InterleavedBuffer.prototype.setArray = function() { - console.error("THREE.InterleavedBuffer: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers"); -}; -ExtrudeGeometry.prototype.getArrays = function() { - console.error("THREE.ExtrudeGeometry: .getArrays() has been removed."); -}; -ExtrudeGeometry.prototype.addShapeList = function() { - console.error("THREE.ExtrudeGeometry: .addShapeList() has been removed."); -}; -ExtrudeGeometry.prototype.addShape = function() { - console.error("THREE.ExtrudeGeometry: .addShape() has been removed."); -}; -Scene.prototype.dispose = function() { - console.error("THREE.Scene: .dispose() has been removed."); -}; -Object.defineProperties(Material.prototype, { - wrapAround: { - get: function() { - console.warn("THREE.Material: .wrapAround has been removed."); - }, - set: function() { - console.warn("THREE.Material: .wrapAround has been removed."); - } - }, - overdraw: { - get: function() { - console.warn("THREE.Material: .overdraw has been removed."); - }, - set: function() { - console.warn("THREE.Material: .overdraw has been removed."); - } - }, - wrapRGB: { - get: function() { - console.warn("THREE.Material: .wrapRGB has been removed."); - return new Color(); - } - }, - shading: { - get: function() { - console.error("THREE." + this.type + ": .shading has been removed. Use the boolean .flatShading instead."); - }, - set: function(value) { - console.warn("THREE." + this.type + ": .shading has been removed. Use the boolean .flatShading instead."); - this.flatShading = value === FlatShading; - } - }, - stencilMask: { - get: function() { - console.warn("THREE." + this.type + ": .stencilMask has been removed. Use .stencilFuncMask instead."); - return this.stencilFuncMask; - }, - set: function(value) { - console.warn("THREE." + this.type + ": .stencilMask has been removed. Use .stencilFuncMask instead."); - this.stencilFuncMask = value; - } - }, - vertexTangents: { - get: function() { - console.warn("THREE." + this.type + ": .vertexTangents has been removed."); - }, - set: function() { - console.warn("THREE." + this.type + ": .vertexTangents has been removed."); - } + [SUBSCRIBE("refreshElementBoundSize")](parentObj) { + this.refreshElementBoundSize(parentObj); } -}); -Object.defineProperties(ShaderMaterial.prototype, { - derivatives: { - get: function() { - console.warn("THREE.ShaderMaterial: .derivatives has been moved to .extensions.derivatives."); - return this.extensions.derivatives; - }, - set: function(value) { - console.warn("THREE. ShaderMaterial: .derivatives has been moved to .extensions.derivatives."); - this.extensions.derivatives = value; - } + [SUBSCRIBE("updateAllCanvas")](parentLayer) { + this.updateAllCanvas(parentLayer); } -}); -WebGLRenderer.prototype.clearTarget = function(renderTarget, color2, depth, stencil) { - console.warn("THREE.WebGLRenderer: .clearTarget() has been deprecated. Use .setRenderTarget() and .clear() instead."); - this.setRenderTarget(renderTarget); - this.clear(color2, depth, stencil); -}; -WebGLRenderer.prototype.animate = function(callback) { - console.warn("THREE.WebGLRenderer: .animate() is now .setAnimationLoop()."); - this.setAnimationLoop(callback); -}; -WebGLRenderer.prototype.getCurrentRenderTarget = function() { - console.warn("THREE.WebGLRenderer: .getCurrentRenderTarget() is now .getRenderTarget()."); - return this.getRenderTarget(); -}; -WebGLRenderer.prototype.getMaxAnisotropy = function() { - console.warn("THREE.WebGLRenderer: .getMaxAnisotropy() is now .capabilities.getMaxAnisotropy()."); - return this.capabilities.getMaxAnisotropy(); -}; -WebGLRenderer.prototype.getPrecision = function() { - console.warn("THREE.WebGLRenderer: .getPrecision() is now .capabilities.precision."); - return this.capabilities.precision; -}; -WebGLRenderer.prototype.resetGLState = function() { - console.warn("THREE.WebGLRenderer: .resetGLState() is now .state.reset()."); - return this.state.reset(); -}; -WebGLRenderer.prototype.supportsFloatTextures = function() { - console.warn("THREE.WebGLRenderer: .supportsFloatTextures() is now .extensions.get( 'OES_texture_float' )."); - return this.extensions.get("OES_texture_float"); -}; -WebGLRenderer.prototype.supportsHalfFloatTextures = function() { - console.warn("THREE.WebGLRenderer: .supportsHalfFloatTextures() is now .extensions.get( 'OES_texture_half_float' )."); - return this.extensions.get("OES_texture_half_float"); -}; -WebGLRenderer.prototype.supportsStandardDerivatives = function() { - console.warn("THREE.WebGLRenderer: .supportsStandardDerivatives() is now .extensions.get( 'OES_standard_derivatives' )."); - return this.extensions.get("OES_standard_derivatives"); -}; -WebGLRenderer.prototype.supportsCompressedTextureS3TC = function() { - console.warn("THREE.WebGLRenderer: .supportsCompressedTextureS3TC() is now .extensions.get( 'WEBGL_compressed_texture_s3tc' )."); - return this.extensions.get("WEBGL_compressed_texture_s3tc"); -}; -WebGLRenderer.prototype.supportsCompressedTexturePVRTC = function() { - console.warn("THREE.WebGLRenderer: .supportsCompressedTexturePVRTC() is now .extensions.get( 'WEBGL_compressed_texture_pvrtc' )."); - return this.extensions.get("WEBGL_compressed_texture_pvrtc"); -}; -WebGLRenderer.prototype.supportsBlendMinMax = function() { - console.warn("THREE.WebGLRenderer: .supportsBlendMinMax() is now .extensions.get( 'EXT_blend_minmax' )."); - return this.extensions.get("EXT_blend_minmax"); -}; -WebGLRenderer.prototype.supportsVertexTextures = function() { - console.warn("THREE.WebGLRenderer: .supportsVertexTextures() is now .capabilities.vertexTextures."); - return this.capabilities.vertexTextures; -}; -WebGLRenderer.prototype.supportsInstancedArrays = function() { - console.warn("THREE.WebGLRenderer: .supportsInstancedArrays() is now .extensions.get( 'ANGLE_instanced_arrays' )."); - return this.extensions.get("ANGLE_instanced_arrays"); -}; -WebGLRenderer.prototype.enableScissorTest = function(boolean) { - console.warn("THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest()."); - this.setScissorTest(boolean); -}; -WebGLRenderer.prototype.initMaterial = function() { - console.warn("THREE.WebGLRenderer: .initMaterial() has been removed."); -}; -WebGLRenderer.prototype.addPrePlugin = function() { - console.warn("THREE.WebGLRenderer: .addPrePlugin() has been removed."); -}; -WebGLRenderer.prototype.addPostPlugin = function() { - console.warn("THREE.WebGLRenderer: .addPostPlugin() has been removed."); -}; -WebGLRenderer.prototype.updateShadowMap = function() { - console.warn("THREE.WebGLRenderer: .updateShadowMap() has been removed."); -}; -WebGLRenderer.prototype.setFaceCulling = function() { - console.warn("THREE.WebGLRenderer: .setFaceCulling() has been removed."); -}; -WebGLRenderer.prototype.allocTextureUnit = function() { - console.warn("THREE.WebGLRenderer: .allocTextureUnit() has been removed."); -}; -WebGLRenderer.prototype.setTexture = function() { - console.warn("THREE.WebGLRenderer: .setTexture() has been removed."); -}; -WebGLRenderer.prototype.setTexture2D = function() { - console.warn("THREE.WebGLRenderer: .setTexture2D() has been removed."); -}; -WebGLRenderer.prototype.setTextureCube = function() { - console.warn("THREE.WebGLRenderer: .setTextureCube() has been removed."); -}; -WebGLRenderer.prototype.getActiveMipMapLevel = function() { - console.warn("THREE.WebGLRenderer: .getActiveMipMapLevel() is now .getActiveMipmapLevel()."); - return this.getActiveMipmapLevel(); -}; -Object.defineProperties(WebGLRenderer.prototype, { - shadowMapEnabled: { - get: function() { - return this.shadowMap.enabled; - }, - set: function(value) { - console.warn("THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled."); - this.shadowMap.enabled = value; - } - }, - shadowMapType: { - get: function() { - return this.shadowMap.type; - }, - set: function(value) { - console.warn("THREE.WebGLRenderer: .shadowMapType is now .shadowMap.type."); - this.shadowMap.type = value; - } - }, - shadowMapCullFace: { - get: function() { - console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead."); - return void 0; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead."); - } - }, - context: { - get: function() { - console.warn("THREE.WebGLRenderer: .context has been removed. Use .getContext() instead."); - return this.getContext(); - } - }, - vr: { - get: function() { - console.warn("THREE.WebGLRenderer: .vr has been renamed to .xr"); - return this.xr; - } - }, - gammaInput: { - get: function() { - console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead."); - return false; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead."); - } - }, - gammaOutput: { - get: function() { - console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."); - return false; - }, - set: function(value) { - console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."); - this.outputEncoding = value === true ? sRGBEncoding : LinearEncoding; - } - }, - toneMappingWhitePoint: { - get: function() { - console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed."); - return 1; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed."); - } - }, - gammaFactor: { - get: function() { - console.warn("THREE.WebGLRenderer: .gammaFactor has been removed."); - return 2; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .gammaFactor has been removed."); - } + [SUBSCRIBE("refreshAllCanvas")]() { + this.refreshAllCanvas(); } -}); -Object.defineProperties(WebGLShadowMap.prototype, { - cullFace: { - get: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead."); - return void 0; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead."); - } - }, - renderReverseSided: { - get: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead."); - return void 0; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead."); - } - }, - renderSingleSided: { - get: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead."); - return void 0; - }, - set: function() { - console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead."); + [SUBSCRIBE("playTimeline", "moveTimeline")]() { + const project2 = this.$context.selection.currentProject; + var timeline = project2.getSelectedTimeline(); + if (timeline) { + timeline.animations.map((it) => this.$model.get(it.id)).forEach((current) => { + this.updateTimelineElement(current, true, false); + }); } } -}); -Object.defineProperties(WebGLRenderTarget.prototype, { - wrapS: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."); - return this.texture.wrapS; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."); - this.texture.wrapS = value; - } - }, - wrapT: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."); - return this.texture.wrapT; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."); - this.texture.wrapT = value; - } - }, - magFilter: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."); - return this.texture.magFilter; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."); - this.texture.magFilter = value; - } - }, - minFilter: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."); - return this.texture.minFilter; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."); - this.texture.minFilter = value; - } - }, - anisotropy: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."); - return this.texture.anisotropy; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."); - this.texture.anisotropy = value; - } - }, - offset: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."); - return this.texture.offset; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."); - this.texture.offset = value; + clearElementAll() { + this.state.cachedCurrentElement = {}; + } + clearElement(id) { + this.state.cachedCurrentElement[id] = void 0; + } + getElement(id) { + if (!this.state.cachedCurrentElement[id]) { + this.state.cachedCurrentElement[id] = this.refs.$view.$(`[data-id="${id}"]`); } - }, - repeat: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."); - return this.texture.repeat; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."); - this.texture.repeat = value; + return this.state.cachedCurrentElement[id]; + } + [FOCUSOUT("$view .element-item.text .text-content")](e) { + e.$dt.removeAttr("contenteditable"); + e.$dt.removeClass("focused"); + this.$context.commands.emit("pop.mode.view", "TextEditorView"); + this.$context.commands.emit("recoverCursor"); + } + [KEYUP("$view .element-item.text .text-content")](e) { + var content2 = e.$dt.html(); + var text2 = e.$dt.text().trim(); + var id = e.$dt.parent().attr("data-id"); + var arr = []; + this.$context.selection.items.filter((it) => it.id === id).forEach((item) => { + item.reset({ + content: content2, + text: text2 + }); + arr.push({ id: item.id, content: content2, text: text2 }); + this.$commands.emit("setAttribute", { + [item.id]: { + content: content2, + text: text2 + } + }); + }); + this.emit("refreshContent", arr); + } + checkEditMode(e) { + this.state.hasDoubleClick = false; + if (window.performance.now() - this.state.doubleClickTime < this.$config.get("event.doubleclick.timing")) { + this.state.hasDoubleClick = true; + return false; } - }, - format: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."); - return this.texture.format; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."); - this.texture.format = value; + if (this.$config.is("editing.mode", EditingMode.HAND)) { + return false; } - }, - type: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."); - return this.texture.type; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."); - this.texture.type = value; + const code2 = this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space); + if (this.$context.keyboardManager.check(code2)) { + return false; } - }, - generateMipmaps: { - get: function() { - console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."); - return this.texture.generateMipmaps; - }, - set: function(value) { - console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."); - this.texture.generateMipmaps = value; + const $target = Dom.create(e.target); + if ($target.hasClass("canvas-view")) { + return false; } - } -}); -Audio.prototype.load = function(file) { - console.warn("THREE.Audio: .load has been deprecated. Use THREE.AudioLoader instead."); - const scope = this; - const audioLoader = new AudioLoader(); - audioLoader.load(file, function(buffer) { - scope.setBuffer(buffer); - }); - return this; -}; -CubeCamera.prototype.updateCubeMap = function(renderer, scene) { - console.warn("THREE.CubeCamera: .updateCubeMap() is now .update()."); - return this.update(renderer, scene); -}; -CubeCamera.prototype.clear = function(renderer, color2, depth, stencil) { - console.warn("THREE.CubeCamera: .clear() is now .renderTarget.clear()."); - return this.renderTarget.clear(renderer, color2, depth, stencil); -}; -ImageUtils.crossOrigin = void 0; -ImageUtils.loadTexture = function(url, mapping, onLoad, onError) { - console.warn("THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead."); - const loader = new TextureLoader(); - loader.setCrossOrigin(this.crossOrigin); - const texture2 = loader.load(url, onLoad, void 0, onError); - if (mapping) - texture2.mapping = mapping; - return texture2; -}; -ImageUtils.loadTextureCube = function(urls, mapping, onLoad, onError) { - console.warn("THREE.ImageUtils.loadTextureCube has been deprecated. Use THREE.CubeTextureLoader() instead."); - const loader = new CubeTextureLoader(); - loader.setCrossOrigin(this.crossOrigin); - const texture2 = loader.load(urls, onLoad, void 0, onError); - if (mapping) - texture2.mapping = mapping; - return texture2; -}; -ImageUtils.loadCompressedTexture = function() { - console.error("THREE.ImageUtils.loadCompressedTexture has been removed. Use THREE.DDSLoader instead."); -}; -ImageUtils.loadCompressedTextureCube = function() { - console.error("THREE.ImageUtils.loadCompressedTextureCube has been removed. Use THREE.DDSLoader instead."); -}; -if (typeof __THREE_DEVTOOLS__ !== "undefined") { - __THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register", { detail: { - revision: REVISION - } })); -} -if (typeof window !== "undefined") { - if (window.__THREE__) { - console.warn("WARNING: Multiple instances of Three.js being imported."); - } else { - window.__THREE__ = REVISION; - } -} -const _changeEvent$1 = { type: "change" }; -const _startEvent = { type: "start" }; -const _endEvent = { type: "end" }; -class OrbitControls extends EventDispatcher { - constructor(object, domElement) { - super(); - if (domElement === void 0) - console.warn('THREE.OrbitControls: The second parameter "domElement" is now mandatory.'); - if (domElement === document) - console.error('THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.'); - this.object = object; - this.domElement = domElement; - this.domElement.style.touchAction = "none"; - this.enabled = true; - this.target = new Vector3(); - this.minDistance = 0; - this.maxDistance = Infinity; - this.minZoom = 0; - this.maxZoom = Infinity; - this.minPolarAngle = 0; - this.maxPolarAngle = Math.PI; - this.minAzimuthAngle = -Infinity; - this.maxAzimuthAngle = Infinity; - this.enableDamping = false; - this.dampingFactor = 0.05; - this.enableZoom = true; - this.zoomSpeed = 1; - this.enableRotate = true; - this.rotateSpeed = 1; - this.enablePan = true; - this.panSpeed = 1; - this.screenSpacePanning = true; - this.keyPanSpeed = 7; - this.autoRotate = false; - this.autoRotateSpeed = 2; - this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }; - this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; - this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }; - this.target0 = this.target.clone(); - this.position0 = this.object.position.clone(); - this.zoom0 = this.object.zoom; - this._domElementKeyEvents = null; - this.getPolarAngle = function() { - return spherical.phi; - }; - this.getAzimuthalAngle = function() { - return spherical.theta; - }; - this.getDistance = function() { - return this.object.position.distanceTo(this.target); - }; - this.listenToKeyEvents = function(domElement2) { - domElement2.addEventListener("keydown", onKeyDown); - this._domElementKeyEvents = domElement2; - }; - this.saveState = function() { - scope.target0.copy(scope.target); - scope.position0.copy(scope.object.position); - scope.zoom0 = scope.object.zoom; - }; - this.reset = function() { - scope.target.copy(scope.target0); - scope.object.position.copy(scope.position0); - scope.object.zoom = scope.zoom0; - scope.object.updateProjectionMatrix(); - scope.dispatchEvent(_changeEvent$1); - scope.update(); - state = STATE.NONE; - }; - this.update = function() { - const offset = new Vector3(); - const quat = new Quaternion().setFromUnitVectors(object.up, new Vector3(0, 1, 0)); - const quatInverse = quat.clone().invert(); - const lastPosition = new Vector3(); - const lastQuaternion = new Quaternion(); - const twoPI = 2 * Math.PI; - return function update2() { - const position2 = scope.object.position; - offset.copy(position2).sub(scope.target); - offset.applyQuaternion(quat); - spherical.setFromVector3(offset); - if (scope.autoRotate && state === STATE.NONE) { - rotateLeft(getAutoRotationAngle()); - } - if (scope.enableDamping) { - spherical.theta += sphericalDelta.theta * scope.dampingFactor; - spherical.phi += sphericalDelta.phi * scope.dampingFactor; - } else { - spherical.theta += sphericalDelta.theta; - spherical.phi += sphericalDelta.phi; - } - let min = scope.minAzimuthAngle; - let max = scope.maxAzimuthAngle; - if (isFinite(min) && isFinite(max)) { - if (min < -Math.PI) - min += twoPI; - else if (min > Math.PI) - min -= twoPI; - if (max < -Math.PI) - max += twoPI; - else if (max > Math.PI) - max -= twoPI; - if (min <= max) { - spherical.theta = Math.max(min, Math.min(max, spherical.theta)); - } else { - spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta); + if (!e.shiftKey) { + const mousePoint = this.$viewport.getWorldPosition(e); + if (this.$context.selection.hasPoint(mousePoint)) { + if (this.$context.selection.hasHoverItem()) { + if (this.$context.selection.hasParent(this.$context.selection.hoverId) === false) { + this.$context.selection.selectHoverItem(); } } - spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi)); - spherical.makeSafe(); - spherical.radius *= scale2; - spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius)); - if (scope.enableDamping === true) { - scope.target.addScaledVector(panOffset, scope.dampingFactor); - } else { - scope.target.add(panOffset); - } - offset.setFromSpherical(spherical); - offset.applyQuaternion(quatInverse); - position2.copy(scope.target).add(offset); - scope.object.lookAt(scope.target); - if (scope.enableDamping === true) { - sphericalDelta.theta *= 1 - scope.dampingFactor; - sphericalDelta.phi *= 1 - scope.dampingFactor; - panOffset.multiplyScalar(1 - scope.dampingFactor); - } else { - sphericalDelta.set(0, 0, 0); - panOffset.set(0, 0, 0); - } - scale2 = 1; - if (zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) { - scope.dispatchEvent(_changeEvent$1); - lastPosition.copy(scope.object.position); - lastQuaternion.copy(scope.object.quaternion); - zoomChanged = false; - return true; - } - return false; - }; - }(); - this.dispose = function() { - scope.domElement.removeEventListener("contextmenu", onContextMenu); - scope.domElement.removeEventListener("pointerdown", onPointerDown2); - scope.domElement.removeEventListener("pointercancel", onPointerCancel); - scope.domElement.removeEventListener("wheel", onMouseWheel); - scope.domElement.removeEventListener("pointermove", onPointerMove2); - scope.domElement.removeEventListener("pointerup", onPointerUp2); - if (scope._domElementKeyEvents !== null) { - scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown); + return true; } - }; - const scope = this; - const STATE = { - NONE: -1, - ROTATE: 0, - DOLLY: 1, - PAN: 2, - TOUCH_ROTATE: 3, - TOUCH_PAN: 4, - TOUCH_DOLLY_PAN: 5, - TOUCH_DOLLY_ROTATE: 6 - }; - let state = STATE.NONE; - const EPS = 1e-6; - const spherical = new Spherical(); - const sphericalDelta = new Spherical(); - let scale2 = 1; - const panOffset = new Vector3(); - let zoomChanged = false; - const rotateStart = new Vector2(); - const rotateEnd = new Vector2(); - const rotateDelta = new Vector2(); - const panStart = new Vector2(); - const panEnd = new Vector2(); - const panDelta = new Vector2(); - const dollyStart = new Vector2(); - const dollyEnd = new Vector2(); - const dollyDelta = new Vector2(); - const pointers = []; - const pointerPositions = {}; - function getAutoRotationAngle() { - return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; - } - function getZoomScale() { - return Math.pow(0.95, scope.zoomSpeed); - } - function rotateLeft(angle) { - sphericalDelta.theta -= angle; - } - function rotateUp(angle) { - sphericalDelta.phi -= angle; - } - const panLeft = function() { - const v = new Vector3(); - return function panLeft2(distance2, objectMatrix) { - v.setFromMatrixColumn(objectMatrix, 0); - v.multiplyScalar(-distance2); - panOffset.add(v); - }; - }(); - const panUp = function() { - const v = new Vector3(); - return function panUp2(distance2, objectMatrix) { - if (scope.screenSpacePanning === true) { - v.setFromMatrixColumn(objectMatrix, 1); - } else { - v.setFromMatrixColumn(objectMatrix, 0); - v.crossVectors(scope.object.up, v); - } - v.multiplyScalar(distance2); - panOffset.add(v); - }; - }(); - const pan = function() { - const offset = new Vector3(); - return function pan2(deltaX, deltaY) { - const element = scope.domElement; - if (scope.object.isPerspectiveCamera) { - const position2 = scope.object.position; - offset.copy(position2).sub(scope.target); - let targetDistance = offset.length(); - targetDistance *= Math.tan(scope.object.fov / 2 * Math.PI / 180); - panLeft(2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix); - panUp(2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix); - } else if (scope.object.isOrthographicCamera) { - panLeft(deltaX * (scope.object.right - scope.object.left) / scope.object.zoom / element.clientWidth, scope.object.matrix); - panUp(deltaY * (scope.object.top - scope.object.bottom) / scope.object.zoom / element.clientHeight, scope.object.matrix); - } else { - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."); - scope.enablePan = false; - } - }; - }(); - function dollyOut(dollyScale) { - if (scope.object.isPerspectiveCamera) { - scale2 /= dollyScale; - } else if (scope.object.isOrthographicCamera) { - scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale)); - scope.object.updateProjectionMatrix(); - zoomChanged = true; - } else { - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."); - scope.enableZoom = false; + if (this.$context.selection.hasHoverItem()) { + this.$context.selection.selectHoverItem(); + return true; } } - function dollyIn(dollyScale) { - if (scope.object.isPerspectiveCamera) { - scale2 *= dollyScale; - } else if (scope.object.isOrthographicCamera) { - scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale)); - scope.object.updateProjectionMatrix(); - zoomChanged = true; - } else { - console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."); - scope.enableZoom = false; - } - } - function handleMouseDownRotate(event) { - rotateStart.set(event.clientX, event.clientY); - } - function handleMouseDownDolly(event) { - dollyStart.set(event.clientX, event.clientY); - } - function handleMouseDownPan(event) { - panStart.set(event.clientX, event.clientY); - } - function handleMouseMoveRotate(event) { - rotateEnd.set(event.clientX, event.clientY); - rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(scope.rotateSpeed); - const element = scope.domElement; - rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight); - rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight); - rotateStart.copy(rotateEnd); - scope.update(); - } - function handleMouseMoveDolly(event) { - dollyEnd.set(event.clientX, event.clientY); - dollyDelta.subVectors(dollyEnd, dollyStart); - if (dollyDelta.y > 0) { - dollyOut(getZoomScale()); - } else if (dollyDelta.y < 0) { - dollyIn(getZoomScale()); - } - dollyStart.copy(dollyEnd); - scope.update(); - } - function handleMouseMovePan(event) { - panEnd.set(event.clientX, event.clientY); - panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); - pan(panDelta.x, panDelta.y); - panStart.copy(panEnd); - scope.update(); - } - function handleMouseWheel(event) { - if (event.deltaY < 0) { - dollyIn(getZoomScale()); - } else if (event.deltaY > 0) { - dollyOut(getZoomScale()); - } - scope.update(); - } - function handleKeyDown(event) { - let needsUpdate = false; - switch (event.code) { - case scope.keys.UP: - pan(0, scope.keyPanSpeed); - needsUpdate = true; - break; - case scope.keys.BOTTOM: - pan(0, -scope.keyPanSpeed); - needsUpdate = true; - break; - case scope.keys.LEFT: - pan(scope.keyPanSpeed, 0); - needsUpdate = true; - break; - case scope.keys.RIGHT: - pan(-scope.keyPanSpeed, 0); - needsUpdate = true; - break; + const $element = $target.closest("element-item"); + if ($element) { + if ($element.hasClass("focused")) { + return false; } - if (needsUpdate) { - event.preventDefault(); - scope.update(); + var id = $element.attr("data-id"); + if (e.altKey === false) { + const item = this.$model.get(id); + if (item.is("artboard") && item.hasChildren()) { + this.$config.init("set.dragarea.mode", true); + return true; + } } + } else { + return false; } - function handleTouchStartRotate() { - if (pointers.length === 1) { - rotateStart.set(pointers[0].pageX, pointers[0].pageY); + return true; + } + [DOUBLECLICK("$view")](e) { + this.state.doubleClickTime = window.performance.now(); + const $item = Dom.create(e.target).closest("element-item"); + if ($item) { + const id = $item.attr("data-id"); + const item = this.$model.get(id); + if (item.is("text")) { + const $content = $item.$(".text-content"); + $content.addClass("focused"); + $content.attr("contenteditable", "true"); + $content.focus(); + $content.select(); + this.$context.commands.emit("push.mode.view", "TextEditorView"); } else { - const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); - const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); - rotateStart.set(x, y); + this.$context.commands.emit("doubleclick.item", e, id); } } - function handleTouchStartPan() { - if (pointers.length === 1) { - panStart.set(pointers[0].pageX, pointers[0].pageY); - } else { - const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); - const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); - panStart.set(x, y); - } - } - function handleTouchStartDolly() { - const dx = pointers[0].pageX - pointers[1].pageX; - const dy = pointers[0].pageY - pointers[1].pageY; - const distance2 = Math.sqrt(dx * dx + dy * dy); - dollyStart.set(0, distance2); - } - function handleTouchStartDollyPan() { - if (scope.enableZoom) - handleTouchStartDolly(); - if (scope.enablePan) - handleTouchStartPan(); - } - function handleTouchStartDollyRotate() { - if (scope.enableZoom) - handleTouchStartDolly(); - if (scope.enableRotate) - handleTouchStartRotate(); - } - function handleTouchMoveRotate(event) { - if (pointers.length == 1) { - rotateEnd.set(event.pageX, event.pageY); - } else { - const position2 = getSecondPointerPosition(event); - const x = 0.5 * (event.pageX + position2.x); - const y = 0.5 * (event.pageY + position2.y); - rotateEnd.set(x, y); - } - rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(scope.rotateSpeed); - const element = scope.domElement; - rotateLeft(2 * Math.PI * rotateDelta.x / element.clientHeight); - rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight); - rotateStart.copy(rotateEnd); - } - function handleTouchMovePan(event) { - if (pointers.length === 1) { - panEnd.set(event.pageX, event.pageY); - } else { - const position2 = getSecondPointerPosition(event); - const x = 0.5 * (event.pageX + position2.x); - const y = 0.5 * (event.pageY + position2.y); - panEnd.set(x, y); - } - panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); - pan(panDelta.x, panDelta.y); - panStart.copy(panEnd); - } - function handleTouchMoveDolly(event) { - const position2 = getSecondPointerPosition(event); - const dx = event.pageX - position2.x; - const dy = event.pageY - position2.y; - const distance2 = Math.sqrt(dx * dx + dy * dy); - dollyEnd.set(0, distance2); - dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed)); - dollyOut(dollyDelta.y); - dollyStart.copy(dollyEnd); - } - function handleTouchMoveDollyPan(event) { - if (scope.enableZoom) - handleTouchMoveDolly(event); - if (scope.enablePan) - handleTouchMovePan(event); - } - function handleTouchMoveDollyRotate(event) { - if (scope.enableZoom) - handleTouchMoveDolly(event); - if (scope.enableRotate) - handleTouchMoveRotate(event); - } - function onPointerDown2(event) { - if (scope.enabled === false) - return; - if (pointers.length === 0) { - scope.domElement.setPointerCapture(event.pointerId); - scope.domElement.addEventListener("pointermove", onPointerMove2); - scope.domElement.addEventListener("pointerup", onPointerUp2); - } - addPointer(event); - if (event.pointerType === "touch") { - onTouchStart(event); - } else { - onMouseDown(event); - } + } + [CONTEXTMENU("$view") + PREVENT](e) { + const $target = Dom.create(e.target); + const $element = $target.closest("element-item"); + var id = $element && $element.attr("data-id"); + this.$context.selection.select(id); + this.emit(OPEN_CONTEXT_MENU, { + target: "context.menu.layer", + items: [ + "-", + { + type: "button", + checked: true, + title: "yellow", + action: () => { + console.log("console.log", "yellow"); + } + } + ], + x: e.clientX, + y: e.clientY, + id + }); + } + [POINTERSTART("$view") + IF("checkEditMode") + MOVE("calculateMovedElement") + FIRSTMOVE("calculateFirstMovedElement") + END("calculateEndedElement")](e) { + this.initMousePoint = this.$viewport.getWorldPosition(e); + this.$config.init("set.move.control.point", true); + this.$config.set("editing.mode.itemType", "select"); + if (this.$config.get("set.dragarea.mode")) { + this.emit("startDragAreaView"); + return; } - function onPointerMove2(event) { - if (scope.enabled === false) - return; - if (event.pointerType === "touch") { - onTouchMove(event); - } else { - onMouseMove(event); - } + let isInSelectedArea = this.$context.selection.hasPoint(this.initMousePoint); + const $target = Dom.create(e.target); + if ($target.hasClass("canvas-view")) { + this.$context.selection.select(); + this.initializeDragSelection(); + return false; } - function onPointerUp2(event) { - removePointer(event); - if (pointers.length === 0) { - scope.domElement.releasePointerCapture(event.pointerId); - scope.domElement.removeEventListener("pointermove", onPointerMove2); - scope.domElement.removeEventListener("pointerup", onPointerUp2); + const $element = $target.closest("element-item"); + var id = $element && $element.attr("data-id"); + if (e.altKey) { + if (isInSelectedArea) + ; + else { + if (this.$context.selection.check({ id }) === false) { + this.$context.selection.selectByGroup(id); + } } - scope.dispatchEvent(_endEvent); - state = STATE.NONE; - } - function onPointerCancel(event) { - removePointer(event); - } - function onMouseDown(event) { - let mouseAction; - switch (event.button) { - case 0: - mouseAction = scope.mouseButtons.LEFT; - break; - case 1: - mouseAction = scope.mouseButtons.MIDDLE; - break; - case 2: - mouseAction = scope.mouseButtons.RIGHT; - break; - default: - mouseAction = -1; + if (this.$context.selection.isEmpty === false) { + this.$commands.emit("history.copyLayer", "copy"); + this.emit("refreshLayerTreeView"); + this.initializeDragSelection(); } - switch (mouseAction) { - case MOUSE.DOLLY: - if (scope.enableZoom === false) - return; - handleMouseDownDolly(event); - state = STATE.DOLLY; - break; - case MOUSE.ROTATE: - if (event.ctrlKey || event.metaKey || event.shiftKey) { - if (scope.enablePan === false) - return; - handleMouseDownPan(event); - state = STATE.PAN; - } else { - if (scope.enableRotate === false) - return; - handleMouseDownRotate(event); - state = STATE.ROTATE; - } - break; - case MOUSE.PAN: - if (event.ctrlKey || event.metaKey || event.shiftKey) { - if (scope.enableRotate === false) - return; - handleMouseDownRotate(event); - state = STATE.ROTATE; - } else { - if (scope.enablePan === false) - return; - handleMouseDownPan(event); - state = STATE.PAN; + } else { + if (isInSelectedArea) + ; + else { + if (e.shiftKey) { + this.$context.selection.toggleById(id); + } else { + if (this.$context.selection.check({ id }) === false) { + const current = this.$model.get(id); + if (current && current.is("artboard") && current.hasChildren()) + ; + else if (current.hasChildren()) { + this.$context.selection.selectByGroup(id); + } else { + this.$context.selection.selectByGroup(id); + } } - break; - default: - state = STATE.NONE; - } - if (state !== STATE.NONE) { - scope.dispatchEvent(_startEvent); + } } + this.initializeDragSelection(); } - function onMouseMove(event) { - if (scope.enabled === false) - return; - switch (state) { - case STATE.ROTATE: - if (scope.enableRotate === false) - return; - handleMouseMoveRotate(event); - break; - case STATE.DOLLY: - if (scope.enableZoom === false) - return; - handleMouseMoveDolly(event); - break; - case STATE.PAN: - if (scope.enablePan === false) - return; - handleMouseMovePan(event); - break; - } + } + initializeDragSelection() { + this.$context.selection.reselect(); + this.$context.snapManager.clear(); + this.emit("startGhostToolView"); + } + calculateFirstMovedElement() { + this.emit("hideSelectionToolView"); + this.emit("moveFirstGhostToolView"); + } + calculateMovedElement() { + if (this.$config.get("set.dragarea.mode")) { + this.emit("moveDragAreaView"); + return; } - function onMouseWheel(event) { - if (scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE) - return; - event.preventDefault(); - scope.dispatchEvent(_startEvent); - handleMouseWheel(event); - scope.dispatchEvent(_endEvent); + const targetMousePoint = this.$viewport.getWorldPosition(); + this.emit("moveGhostToolView"); + if (this.$context.selection.isLayoutItem) { + return; } - function onKeyDown(event) { - if (scope.enabled === false || scope.enablePan === false) - return; - handleKeyDown(event); - } - function onTouchStart(event) { - trackPointer(event); - switch (pointers.length) { - case 1: - switch (scope.touches.ONE) { - case TOUCH.ROTATE: - if (scope.enableRotate === false) - return; - handleTouchStartRotate(); - state = STATE.TOUCH_ROTATE; - break; - case TOUCH.PAN: - if (scope.enablePan === false) - return; - handleTouchStartPan(); - state = STATE.TOUCH_PAN; - break; - default: - state = STATE.NONE; - } - break; - case 2: - switch (scope.touches.TWO) { - case TOUCH.DOLLY_PAN: - if (scope.enableZoom === false && scope.enablePan === false) - return; - handleTouchStartDollyPan(); - state = STATE.TOUCH_DOLLY_PAN; - break; - case TOUCH.DOLLY_ROTATE: - if (scope.enableZoom === false && scope.enableRotate === false) - return; - handleTouchStartDollyRotate(); - state = STATE.TOUCH_DOLLY_ROTATE; - break; - default: - state = STATE.NONE; - } - break; - default: - state = STATE.NONE; - } - if (state !== STATE.NONE) { - scope.dispatchEvent(_startEvent); - } + const newDist = floor([], subtract([], targetMousePoint, this.initMousePoint)); + this.moveTo(newDist); + if (this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(targetMousePoint))) { + this.initMousePoint = targetMousePoint; + this.$context.selection.reselect(); + this.$context.snapManager.clear(); + this.refreshAllCanvas(); + this.emit("refreshLayerTreeView"); } - function onTouchMove(event) { - trackPointer(event); - switch (state) { - case STATE.TOUCH_ROTATE: - if (scope.enableRotate === false) - return; - handleTouchMoveRotate(event); - scope.update(); - break; - case STATE.TOUCH_PAN: - if (scope.enablePan === false) - return; - handleTouchMovePan(event); - scope.update(); - break; - case STATE.TOUCH_DOLLY_PAN: - if (scope.enableZoom === false && scope.enablePan === false) - return; - handleTouchMoveDollyPan(event); - scope.update(); - break; - case STATE.TOUCH_DOLLY_ROTATE: - if (scope.enableZoom === false && scope.enableRotate === false) - return; - handleTouchMoveDollyRotate(event); - scope.update(); - break; - default: - state = STATE.NONE; + this.$commands.emit("setAttribute", this.$context.selection.pack("x", "y")); + } + moveTo(dist2) { + const snap = this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map((v) => { + return add$1([], v, dist2); + }), 3 / this.$viewport.scale); + const localDist = add$1([], snap.dist, dist2); + const result = {}; + this.$context.selection.cachedItemMatrices.forEach((it) => { + const oldVertex = it.verties[4]; + const newVertex = add$1([], oldVertex, localDist); + const newDist = subtract([], transformMat4([], newVertex, it.parentMatrixInverse), transformMat4([], oldVertex, it.parentMatrixInverse)); + if (this.$context.selection.isOne) { + result[it.id] = { + x: Math.round(it.x + newDist[0]), + y: Math.round(it.y + newDist[1]) + }; + } else { + result[it.id] = { + x: it.x + newDist[0], + y: it.y + newDist[1] + }; } + }); + this.$context.selection.reset(result); + } + calculateEndedElement(dx, dy) { + if (this.state.hasDoubleClick) { + this.state.doubleClickTime = window.performance.now(); + return; } - function onContextMenu(event) { - if (scope.enabled === false) - return; - event.preventDefault(); - } - function addPointer(event) { - pointers.push(event); - } - function removePointer(event) { - delete pointerPositions[event.pointerId]; - for (let i = 0; i < pointers.length; i++) { - if (pointers[i].pointerId == event.pointerId) { - pointers.splice(i, 1); - return; - } - } + const targetMousePoint = this.$viewport.getWorldPosition(); + const newDist = dist(targetMousePoint, this.initMousePoint); + this.$config.init("set.move.control.point", false); + const hasMoved = Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5; + this.emit("endGhostToolView", hasMoved); + if (this.$config.get("set.dragarea.mode")) { + this.emit("endDragAreaView"); + this.$config.init("set.dragarea.mode", false); + return; } - function trackPointer(event) { - let position2 = pointerPositions[event.pointerId]; - if (position2 === void 0) { - position2 = new Vector2(); - pointerPositions[event.pointerId] = position2; - } - position2.set(event.pageX, event.pageY); - } - function getSecondPointerPosition(event) { - const pointer = event.pointerId === pointers[0].pointerId ? pointers[1] : pointers[0]; - return pointerPositions[pointer.pointerId]; - } - scope.domElement.addEventListener("contextmenu", onContextMenu); - scope.domElement.addEventListener("pointerdown", onPointerDown2); - scope.domElement.addEventListener("pointercancel", onPointerCancel); - scope.domElement.addEventListener("wheel", onMouseWheel, { passive: false }); - this.update(); - } -} -const _raycaster = new Raycaster(); -const _tempVector = new Vector3(); -const _tempVector2 = new Vector3(); -const _tempQuaternion = new Quaternion(); -const _unit = { - X: new Vector3(1, 0, 0), - Y: new Vector3(0, 1, 0), - Z: new Vector3(0, 0, 1) -}; -const _changeEvent = { type: "change" }; -const _mouseDownEvent = { type: "mouseDown" }; -const _mouseUpEvent = { type: "mouseUp", mode: null }; -const _objectChangeEvent = { type: "objectChange" }; -class TransformControls extends Object3D { - constructor(camera, domElement) { - super(); - if (domElement === void 0) { - console.warn('THREE.TransformControls: The second parameter "domElement" is now mandatory.'); - domElement = document; - } - this.visible = false; - this.domElement = domElement; - this.domElement.style.touchAction = "none"; - const _gizmo = new TransformControlsGizmo(); - this._gizmo = _gizmo; - this.add(_gizmo); - const _plane = new TransformControlsPlane(); - this._plane = _plane; - this.add(_plane); - const scope = this; - function defineProperty(propName, defaultValue2) { - let propValue = defaultValue2; - Object.defineProperty(scope, propName, { - get: function() { - return propValue !== void 0 ? propValue : defaultValue2; - }, - set: function(value) { - if (propValue !== value) { - propValue = value; - _plane[propName] = value; - _gizmo[propName] = value; - scope.dispatchEvent({ type: propName + "-changed", value }); - scope.dispatchEvent(_changeEvent); - } - } + if (newDist < 1) + ; + else { + this.$context.selection.reselect(); + this.$context.snapManager.clear(); + this.$commands.executeCommand("setAttribute", "move item", this.$context.selection.pack("x", "y")); + this.nextTick(() => { + this.$commands.emit("recoverBooleanPath"); }); - scope[propName] = defaultValue2; - _plane[propName] = defaultValue2; - _gizmo[propName] = defaultValue2; - } - defineProperty("camera", camera); - defineProperty("object", void 0); - defineProperty("enabled", true); - defineProperty("axis", null); - defineProperty("mode", "translate"); - defineProperty("translationSnap", null); - defineProperty("rotationSnap", null); - defineProperty("scaleSnap", null); - defineProperty("space", "world"); - defineProperty("size", 1); - defineProperty("dragging", false); - defineProperty("showX", true); - defineProperty("showY", true); - defineProperty("showZ", true); - const worldPosition = new Vector3(); - const worldPositionStart = new Vector3(); - const worldQuaternion = new Quaternion(); - const worldQuaternionStart = new Quaternion(); - const cameraPosition = new Vector3(); - const cameraQuaternion = new Quaternion(); - const pointStart = new Vector3(); - const pointEnd = new Vector3(); - const rotationAxis = new Vector3(); - const rotationAngle = 0; - const eye = new Vector3(); - defineProperty("worldPosition", worldPosition); - defineProperty("worldPositionStart", worldPositionStart); - defineProperty("worldQuaternion", worldQuaternion); - defineProperty("worldQuaternionStart", worldQuaternionStart); - defineProperty("cameraPosition", cameraPosition); - defineProperty("cameraQuaternion", cameraQuaternion); - defineProperty("pointStart", pointStart); - defineProperty("pointEnd", pointEnd); - defineProperty("rotationAxis", rotationAxis); - defineProperty("rotationAngle", rotationAngle); - defineProperty("eye", eye); - this._offset = new Vector3(); - this._startNorm = new Vector3(); - this._endNorm = new Vector3(); - this._cameraScale = new Vector3(); - this._parentPosition = new Vector3(); - this._parentQuaternion = new Quaternion(); - this._parentQuaternionInv = new Quaternion(); - this._parentScale = new Vector3(); - this._worldScaleStart = new Vector3(); - this._worldQuaternionInv = new Quaternion(); - this._worldScale = new Vector3(); - this._positionStart = new Vector3(); - this._quaternionStart = new Quaternion(); - this._scaleStart = new Vector3(); - this._getPointer = getPointer.bind(this); - this._onPointerDown = onPointerDown.bind(this); - this._onPointerHover = onPointerHover.bind(this); - this._onPointerMove = onPointerMove.bind(this); - this._onPointerUp = onPointerUp.bind(this); - this.domElement.addEventListener("pointerdown", this._onPointerDown); - this.domElement.addEventListener("pointermove", this._onPointerHover); - this.domElement.addEventListener("pointerup", this._onPointerUp); - } - updateMatrixWorld() { - if (this.object !== void 0) { - this.object.updateMatrixWorld(); - if (this.object.parent === null) { - console.error("TransformControls: The attached 3D object must be a part of the scene graph."); + } + this.$config.set("editing.mode.itemType", "select"); + this.$commands.emit("history.refreshSelection"); + this.emit(REFRESH_SELECTION_TOOL); + } + refreshSelectionStyleView(obj2) { + let target = []; + if (obj2) { + if (isArray(obj2)) { + target = obj2; } else { - this.object.parent.matrixWorld.decompose(this._parentPosition, this._parentQuaternion, this._parentScale); + target = [obj2]; } - this.object.matrixWorld.decompose(this.worldPosition, this.worldQuaternion, this._worldScale); - this._parentQuaternionInv.copy(this._parentQuaternion).invert(); - this._worldQuaternionInv.copy(this.worldQuaternion).invert(); + } else { + target = this.$context.selection.items; } - this.camera.updateMatrixWorld(); - this.camera.matrixWorld.decompose(this.cameraPosition, this.cameraQuaternion, this._cameraScale); - this.eye.copy(this.cameraPosition).sub(this.worldPosition).normalize(); - super.updateMatrixWorld(this); + target.forEach((current) => { + this.updateElement(current); + }); } - pointerHover(pointer) { - if (this.object === void 0 || this.dragging === true) - return; - _raycaster.setFromCamera(pointer, this.camera); - const intersect = intersectObjectWithRay(this._gizmo.picker[this.mode], _raycaster); - if (intersect) { - this.axis = intersect.object.name; - } else { - this.axis = null; + updateElement(item) { + if (item) { + this.renderer.update(item, this.getElement(item.id), this.$editor); } } - pointerDown(pointer) { - if (this.object === void 0 || this.dragging === true || pointer.button !== 0) - return; - if (this.axis !== null) { - _raycaster.setFromCamera(pointer, this.camera); - const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true); - if (planeIntersect) { - this.object.updateMatrixWorld(); - this.object.parent.updateMatrixWorld(); - this._positionStart.copy(this.object.position); - this._quaternionStart.copy(this.object.quaternion); - this._scaleStart.copy(this.object.scale); - this.object.matrixWorld.decompose(this.worldPositionStart, this.worldQuaternionStart, this._worldScaleStart); - this.pointStart.copy(planeIntersect.point).sub(this.worldPositionStart); - } - this.dragging = true; - _mouseDownEvent.mode = this.mode; - this.dispatchEvent(_mouseDownEvent); - } - } - pointerMove(pointer) { - const axis = this.axis; - const mode = this.mode; - const object = this.object; - let space2 = this.space; - if (mode === "scale") { - space2 = "local"; - } else if (axis === "E" || axis === "XYZE" || axis === "XYZ") { - space2 = "world"; - } - if (object === void 0 || axis === null || this.dragging === false || pointer.button !== -1) - return; - _raycaster.setFromCamera(pointer, this.camera); - const planeIntersect = intersectObjectWithRay(this._plane, _raycaster, true); - if (!planeIntersect) - return; - this.pointEnd.copy(planeIntersect.point).sub(this.worldPositionStart); - if (mode === "translate") { - this._offset.copy(this.pointEnd).sub(this.pointStart); - if (space2 === "local" && axis !== "XYZ") { - this._offset.applyQuaternion(this._worldQuaternionInv); - } - if (axis.indexOf("X") === -1) - this._offset.x = 0; - if (axis.indexOf("Y") === -1) - this._offset.y = 0; - if (axis.indexOf("Z") === -1) - this._offset.z = 0; - if (space2 === "local" && axis !== "XYZ") { - this._offset.applyQuaternion(this._quaternionStart).divide(this._parentScale); - } else { - this._offset.applyQuaternion(this._parentQuaternionInv).divide(this._parentScale); - } - object.position.copy(this._offset).add(this._positionStart); - if (this.translationSnap) { - if (space2 === "local") { - object.position.applyQuaternion(_tempQuaternion.copy(this._quaternionStart).invert()); - if (axis.search("X") !== -1) { - object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap; - } - if (axis.search("Y") !== -1) { - object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap; - } - if (axis.search("Z") !== -1) { - object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap; - } - object.position.applyQuaternion(this._quaternionStart); - } - if (space2 === "world") { - if (object.parent) { - object.position.add(_tempVector.setFromMatrixPosition(object.parent.matrixWorld)); - } - if (axis.search("X") !== -1) { - object.position.x = Math.round(object.position.x / this.translationSnap) * this.translationSnap; - } - if (axis.search("Y") !== -1) { - object.position.y = Math.round(object.position.y / this.translationSnap) * this.translationSnap; - } - if (axis.search("Z") !== -1) { - object.position.z = Math.round(object.position.z / this.translationSnap) * this.translationSnap; - } - if (object.parent) { - object.position.sub(_tempVector.setFromMatrixPosition(object.parent.matrixWorld)); - } - } - } - } else if (mode === "scale") { - if (axis.search("XYZ") !== -1) { - let d = this.pointEnd.length() / this.pointStart.length(); - if (this.pointEnd.dot(this.pointStart) < 0) - d *= -1; - _tempVector2.set(d, d, d); - } else { - _tempVector.copy(this.pointStart); - _tempVector2.copy(this.pointEnd); - _tempVector.applyQuaternion(this._worldQuaternionInv); - _tempVector2.applyQuaternion(this._worldQuaternionInv); - _tempVector2.divide(_tempVector); - if (axis.search("X") === -1) { - _tempVector2.x = 1; - } - if (axis.search("Y") === -1) { - _tempVector2.y = 1; - } - if (axis.search("Z") === -1) { - _tempVector2.z = 1; - } - } - object.scale.copy(this._scaleStart).multiply(_tempVector2); - if (this.scaleSnap) { - if (axis.search("X") !== -1) { - object.scale.x = Math.round(object.scale.x / this.scaleSnap) * this.scaleSnap || this.scaleSnap; - } - if (axis.search("Y") !== -1) { - object.scale.y = Math.round(object.scale.y / this.scaleSnap) * this.scaleSnap || this.scaleSnap; - } - if (axis.search("Z") !== -1) { - object.scale.z = Math.round(object.scale.z / this.scaleSnap) * this.scaleSnap || this.scaleSnap; - } - } - } else if (mode === "rotate") { - this._offset.copy(this.pointEnd).sub(this.pointStart); - const ROTATION_SPEED = 20 / this.worldPosition.distanceTo(_tempVector.setFromMatrixPosition(this.camera.matrixWorld)); - if (axis === "E") { - this.rotationAxis.copy(this.eye); - this.rotationAngle = this.pointEnd.angleTo(this.pointStart); - this._startNorm.copy(this.pointStart).normalize(); - this._endNorm.copy(this.pointEnd).normalize(); - this.rotationAngle *= this._endNorm.cross(this._startNorm).dot(this.eye) < 0 ? 1 : -1; - } else if (axis === "XYZE") { - this.rotationAxis.copy(this._offset).cross(this.eye).normalize(); - this.rotationAngle = this._offset.dot(_tempVector.copy(this.rotationAxis).cross(this.eye)) * ROTATION_SPEED; - } else if (axis === "X" || axis === "Y" || axis === "Z") { - this.rotationAxis.copy(_unit[axis]); - _tempVector.copy(_unit[axis]); - if (space2 === "local") { - _tempVector.applyQuaternion(this.worldQuaternion); - } - this.rotationAngle = this._offset.dot(_tempVector.cross(this.eye).normalize()) * ROTATION_SPEED; + updateTimelineElement(item) { + if (item) { + this.renderer.update(item, this.getElement(item.id), this.$editor); + } + } + refreshAllCanvas() { + this.clearElementAll(); + const project2 = this.$context.selection.currentProject; + const html = this.renderer.render(project2, null, this.$editor) || ""; + this.refs.$view.updateDiff(html, void 0, { + checkPassed: (oldEl, newEl) => { + const isPassed = oldEl.getAttribute("data-id") === newEl.getAttribute("data-id"); + return isPassed; } - if (this.rotationSnap) - this.rotationAngle = Math.round(this.rotationAngle / this.rotationSnap) * this.rotationSnap; - if (space2 === "local" && axis !== "E" && axis !== "XYZE") { - object.quaternion.copy(this._quaternionStart); - object.quaternion.multiply(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle)).normalize(); - } else { - this.rotationAxis.applyQuaternion(this._parentQuaternionInv); - object.quaternion.copy(_tempQuaternion.setFromAxisAngle(this.rotationAxis, this.rotationAngle)); - object.quaternion.multiply(this._quaternionStart).normalize(); + }); + this.updateAllCanvas(project2); + } + updateAllCanvas(parentLayer) { + parentLayer == null ? void 0 : parentLayer.layers.forEach((item) => { + this.updateElement(item, this.getElement(item.id)); + this.updateAllCanvas(item); + }); + } + refreshAllElementBoundSize() { + var selectionList = this.$context.selection.items.map((it) => { + if (it.is("artboard")) { + return it; } + return it.parent; + }); + var list2 = [...new Set(selectionList)]; + if (list2.length) { + list2.forEach((it) => { + this.refreshElementBoundSize(it); + }); + } else { + this.$context.selection.currentProject.artboards.forEach((it) => { + this.refreshElementBoundSize(it); + }); } - this.dispatchEvent(_changeEvent); - this.dispatchEvent(_objectChangeEvent); } - pointerUp(pointer) { - if (pointer.button !== 0) + refreshElementRect(item) { + var $el = this.getElement(item.id); + if (!$el) return; - if (this.dragging && this.axis !== null) { - _mouseUpEvent.mode = this.mode; - this.dispatchEvent(_mouseUpEvent); - } - this.dragging = false; - this.axis = null; - } - dispose() { - this.domElement.removeEventListener("pointerdown", this._onPointerDown); - this.domElement.removeEventListener("pointermove", this._onPointerHover); - this.domElement.removeEventListener("pointermove", this._onPointerMove); - this.domElement.removeEventListener("pointerup", this._onPointerUp); - this.traverse(function(child) { - if (child.geometry) - child.geometry.dispose(); - if (child.material) - child.material.dispose(); - }); - } - attach(object) { - this.object = object; - this.visible = true; - return this; - } - detach() { - this.object = void 0; - this.visible = false; - this.axis = null; - return this; - } - reset() { - if (!this.enabled) + let offset = $el.offsetRect(); + if (offset.width === 0 || offset.height === 0) { return; - if (this.dragging) { - this.object.position.copy(this._positionStart); - this.object.quaternion.copy(this._quaternionStart); - this.object.scale.copy(this._scaleStart); - this.dispatchEvent(_changeEvent); - this.dispatchEvent(_objectChangeEvent); - this.pointStart.copy(this.pointEnd); + } + item.reset(offset); + this.refreshSelectionStyleView(item); + if (this.$context.selection.check(item)) { + this.emit(REFRESH_SELECTION_TOOL); } } - getRaycaster() { - return _raycaster; - } - getMode() { - return this.mode; - } - setMode(mode) { - this.mode = mode; - } - setTranslationSnap(translationSnap) { - this.translationSnap = translationSnap; - } - setRotationSnap(rotationSnap) { - this.rotationSnap = rotationSnap; - } - setScaleSnap(scaleSnap) { - this.scaleSnap = scaleSnap; - } - setSize(size2) { - this.size = size2; - } - setSpace(space2) { - this.space = space2; - } - update() { - console.warn("THREE.TransformControls: update function has no more functionality and therefore has been deprecated."); + refreshElementBoundSize(it) { + if (it) { + this.refreshElementRect(it); + it.layers.forEach((child) => { + this.refreshElementBoundSize(child); + }); + } } } -TransformControls.prototype.isTransformControls = true; -function getPointer(event) { - if (this.domElement.ownerDocument.pointerLockElement) { +class CanvasView extends EditorElement { + components() { return { - x: 0, - y: 0, - button: event.button + PageTools, + DragAreaRectView, + HTMLRenderView, + DragAreaView }; - } else { - const rect2 = this.domElement.getBoundingClientRect(); + } + initState() { return { - x: (event.clientX - rect2.left) / rect2.width * 2 - 1, - y: -(event.clientY - rect2.top) / rect2.height * 2 + 1, - button: event.button + cursor: "auto", + cursorArgs: [] }; } -} -function onPointerHover(event) { - if (!this.enabled) - return; - switch (event.pointerType) { - case "mouse": - case "pen": - this.pointerHover(this._getPointer(event)); - break; + afterRender() { + this.nextTick(() => { + this.refreshCanvasSize(); + this.$commands.emit("moveSelectionToCenter", true); + this.refreshCursor(); + }); } -} -function onPointerDown(event) { - if (!this.enabled) - return; - if (!document.pointerLockElement) { - this.domElement.setPointerCapture(event.pointerId); + template() { + return /* @__PURE__ */ createElementJsx("div", { + class: "elf--page-container", + tabIndex: "-1", + ref: "$container" + }, /* @__PURE__ */ createElementJsx("div", { + class: "page-view", + ref: "$pageView" + }, /* @__PURE__ */ createElementJsx("div", { + class: "page-lock scrollbar", + ref: "$lock" + }, /* @__PURE__ */ createElementJsx(DragAreaView, { + ref: "$dragArea" + }), /* @__PURE__ */ createElementJsx(HTMLRenderView, { + ref: "$htmlRenderView" + }), /* @__PURE__ */ createElementJsx(DragAreaRectView, { + ref: "$dragAreaRectView" + }), this.$injectManager.generate("canvas.view", true))), "$", createComponent("PageTools", { ref: "pageTools" })); } - this.domElement.addEventListener("pointermove", this._onPointerMove); - this.pointerHover(this._getPointer(event)); - this.pointerDown(this._getPointer(event)); -} -function onPointerMove(event) { - if (!this.enabled) - return; - this.pointerMove(this._getPointer(event)); -} -function onPointerUp(event) { - if (!this.enabled) - return; - this.domElement.releasePointerCapture(event.pointerId); - this.domElement.removeEventListener("pointermove", this._onPointerMove); - this.pointerUp(this._getPointer(event)); -} -function intersectObjectWithRay(object, raycaster, includeInvisible) { - const allIntersections = raycaster.intersectObject(object, true); - for (let i = 0; i < allIntersections.length; i++) { - if (allIntersections[i].object.visible || includeInvisible) { - return allIntersections[i]; - } - } - return false; -} -const _tempEuler = new Euler(); -const _alignVector = new Vector3(0, 1, 0); -const _zeroVector = new Vector3(0, 0, 0); -const _lookAtMatrix = new Matrix4(); -const _tempQuaternion2 = new Quaternion(); -const _identityQuaternion = new Quaternion(); -const _dirVector = new Vector3(); -const _tempMatrix = new Matrix4(); -const _unitX = new Vector3(1, 0, 0); -const _unitY = new Vector3(0, 1, 0); -const _unitZ = new Vector3(0, 0, 1); -const _v1 = new Vector3(); -const _v2 = new Vector3(); -const _v3 = new Vector3(); -class TransformControlsGizmo extends Object3D { - constructor() { - super(); - this.type = "TransformControlsGizmo"; - const gizmoMaterial = new MeshBasicMaterial({ - depthTest: false, - depthWrite: false, - fog: false, - toneMapped: false, - transparent: true - }); - const gizmoLineMaterial = new LineBasicMaterial({ - depthTest: false, - depthWrite: false, - fog: false, - toneMapped: false, - transparent: true - }); - const matInvisible = gizmoMaterial.clone(); - matInvisible.opacity = 0.15; - const matHelper = gizmoLineMaterial.clone(); - matHelper.opacity = 0.5; - const matRed = gizmoMaterial.clone(); - matRed.color.setHex(16711680); - const matGreen = gizmoMaterial.clone(); - matGreen.color.setHex(65280); - const matBlue = gizmoMaterial.clone(); - matBlue.color.setHex(255); - const matRedTransparent = gizmoMaterial.clone(); - matRedTransparent.color.setHex(16711680); - matRedTransparent.opacity = 0.5; - const matGreenTransparent = gizmoMaterial.clone(); - matGreenTransparent.color.setHex(65280); - matGreenTransparent.opacity = 0.5; - const matBlueTransparent = gizmoMaterial.clone(); - matBlueTransparent.color.setHex(255); - matBlueTransparent.opacity = 0.5; - const matWhiteTransparent = gizmoMaterial.clone(); - matWhiteTransparent.opacity = 0.25; - const matYellowTransparent = gizmoMaterial.clone(); - matYellowTransparent.color.setHex(16776960); - matYellowTransparent.opacity = 0.25; - const matYellow = gizmoMaterial.clone(); - matYellow.color.setHex(16776960); - const matGray = gizmoMaterial.clone(); - matGray.color.setHex(7895160); - const arrowGeometry = new CylinderGeometry(0, 0.04, 0.1, 12); - arrowGeometry.translate(0, 0.05, 0); - const scaleHandleGeometry = new BoxGeometry(0.08, 0.08, 0.08); - scaleHandleGeometry.translate(0, 0.04, 0); - const lineGeometry = new BufferGeometry(); - lineGeometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 1, 0, 0], 3)); - const lineGeometry2 = new CylinderGeometry(75e-4, 75e-4, 0.5, 3); - lineGeometry2.translate(0, 0.25, 0); - function CircleGeometry2(radius, arc) { - const geometry = new TorusGeometry(radius, 75e-4, 3, 64, arc * Math.PI * 2); - geometry.rotateY(Math.PI / 2); - geometry.rotateX(Math.PI / 2); - return geometry; - } - function TranslateHelperGeometry() { - const geometry = new BufferGeometry(); - geometry.setAttribute("position", new Float32BufferAttribute([0, 0, 0, 1, 1, 1], 3)); - return geometry; - } - const gizmoTranslate = { - X: [ - [new Mesh(arrowGeometry, matRed), [0.5, 0, 0], [0, 0, -Math.PI / 2]], - [new Mesh(arrowGeometry, matRed), [-0.5, 0, 0], [0, 0, Math.PI / 2]], - [new Mesh(lineGeometry2, matRed), [0, 0, 0], [0, 0, -Math.PI / 2]] - ], - Y: [ - [new Mesh(arrowGeometry, matGreen), [0, 0.5, 0]], - [new Mesh(arrowGeometry, matGreen), [0, -0.5, 0], [Math.PI, 0, 0]], - [new Mesh(lineGeometry2, matGreen)] - ], - Z: [ - [new Mesh(arrowGeometry, matBlue), [0, 0, 0.5], [Math.PI / 2, 0, 0]], - [new Mesh(arrowGeometry, matBlue), [0, 0, -0.5], [-Math.PI / 2, 0, 0]], - [new Mesh(lineGeometry2, matBlue), null, [Math.PI / 2, 0, 0]] - ], - XYZ: [ - [new Mesh(new OctahedronGeometry(0.1, 0), matWhiteTransparent.clone()), [0, 0, 0]] - ], - XY: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matBlueTransparent.clone()), [0.15, 0.15, 0]] - ], - YZ: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matRedTransparent.clone()), [0, 0.15, 0.15], [0, Math.PI / 2, 0]] - ], - XZ: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matGreenTransparent.clone()), [0.15, 0, 0.15], [-Math.PI / 2, 0, 0]] - ] - }; - const pickerTranslate = { - X: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0.3, 0, 0], [0, 0, -Math.PI / 2]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [-0.3, 0, 0], [0, 0, Math.PI / 2]] - ], - Y: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0.3, 0]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, -0.3, 0], [0, 0, Math.PI]] - ], - Z: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0, 0.3], [Math.PI / 2, 0, 0]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0, -0.3], [-Math.PI / 2, 0, 0]] - ], - XYZ: [ - [new Mesh(new OctahedronGeometry(0.2, 0), matInvisible)] - ], - XY: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0.15, 0.15, 0]] - ], - YZ: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0, 0.15, 0.15], [0, Math.PI / 2, 0]] - ], - XZ: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0.15, 0, 0.15], [-Math.PI / 2, 0, 0]] - ] - }; - const helperTranslate = { - START: [ - [new Mesh(new OctahedronGeometry(0.01, 2), matHelper), null, null, null, "helper"] - ], - END: [ - [new Mesh(new OctahedronGeometry(0.01, 2), matHelper), null, null, null, "helper"] - ], - DELTA: [ - [new Line(TranslateHelperGeometry(), matHelper), null, null, null, "helper"] - ], - X: [ - [new Line(lineGeometry, matHelper.clone()), [-1e3, 0, 0], null, [1e6, 1, 1], "helper"] - ], - Y: [ - [new Line(lineGeometry, matHelper.clone()), [0, -1e3, 0], [0, 0, Math.PI / 2], [1e6, 1, 1], "helper"] - ], - Z: [ - [new Line(lineGeometry, matHelper.clone()), [0, 0, -1e3], [0, -Math.PI / 2, 0], [1e6, 1, 1], "helper"] - ] - }; - const gizmoRotate = { - XYZE: [ - [new Mesh(CircleGeometry2(0.5, 1), matGray), null, [0, Math.PI / 2, 0]] - ], - X: [ - [new Mesh(CircleGeometry2(0.5, 0.5), matRed)] - ], - Y: [ - [new Mesh(CircleGeometry2(0.5, 0.5), matGreen), null, [0, 0, -Math.PI / 2]] - ], - Z: [ - [new Mesh(CircleGeometry2(0.5, 0.5), matBlue), null, [0, Math.PI / 2, 0]] - ], - E: [ - [new Mesh(CircleGeometry2(0.75, 1), matYellowTransparent), null, [0, Math.PI / 2, 0]] - ] - }; - const helperRotate = { - AXIS: [ - [new Line(lineGeometry, matHelper.clone()), [-1e3, 0, 0], null, [1e6, 1, 1], "helper"] - ] - }; - const pickerRotate = { - XYZE: [ - [new Mesh(new SphereGeometry(0.25, 10, 8), matInvisible)] - ], - X: [ - [new Mesh(new TorusGeometry(0.5, 0.1, 4, 24), matInvisible), [0, 0, 0], [0, -Math.PI / 2, -Math.PI / 2]] - ], - Y: [ - [new Mesh(new TorusGeometry(0.5, 0.1, 4, 24), matInvisible), [0, 0, 0], [Math.PI / 2, 0, 0]] - ], - Z: [ - [new Mesh(new TorusGeometry(0.5, 0.1, 4, 24), matInvisible), [0, 0, 0], [0, 0, -Math.PI / 2]] - ], - E: [ - [new Mesh(new TorusGeometry(0.75, 0.1, 2, 24), matInvisible)] - ] - }; - const gizmoScale = { - X: [ - [new Mesh(scaleHandleGeometry, matRed), [0.5, 0, 0], [0, 0, -Math.PI / 2]], - [new Mesh(lineGeometry2, matRed), [0, 0, 0], [0, 0, -Math.PI / 2]], - [new Mesh(scaleHandleGeometry, matRed), [-0.5, 0, 0], [0, 0, Math.PI / 2]] - ], - Y: [ - [new Mesh(scaleHandleGeometry, matGreen), [0, 0.5, 0]], - [new Mesh(lineGeometry2, matGreen)], - [new Mesh(scaleHandleGeometry, matGreen), [0, -0.5, 0], [0, 0, Math.PI]] - ], - Z: [ - [new Mesh(scaleHandleGeometry, matBlue), [0, 0, 0.5], [Math.PI / 2, 0, 0]], - [new Mesh(lineGeometry2, matBlue), [0, 0, 0], [Math.PI / 2, 0, 0]], - [new Mesh(scaleHandleGeometry, matBlue), [0, 0, -0.5], [-Math.PI / 2, 0, 0]] - ], - XY: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matBlueTransparent), [0.15, 0.15, 0]] - ], - YZ: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matRedTransparent), [0, 0.15, 0.15], [0, Math.PI / 2, 0]] - ], - XZ: [ - [new Mesh(new BoxGeometry(0.15, 0.15, 0.01), matGreenTransparent), [0.15, 0, 0.15], [-Math.PI / 2, 0, 0]] - ], - XYZ: [ - [new Mesh(new BoxGeometry(0.1, 0.1, 0.1), matWhiteTransparent.clone())] - ] - }; - const pickerScale = { - X: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0.3, 0, 0], [0, 0, -Math.PI / 2]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [-0.3, 0, 0], [0, 0, Math.PI / 2]] - ], - Y: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0.3, 0]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, -0.3, 0], [0, 0, Math.PI]] - ], - Z: [ - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0, 0.3], [Math.PI / 2, 0, 0]], - [new Mesh(new CylinderGeometry(0.2, 0, 0.6, 4), matInvisible), [0, 0, -0.3], [-Math.PI / 2, 0, 0]] - ], - XY: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0.15, 0.15, 0]] - ], - YZ: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0, 0.15, 0.15], [0, Math.PI / 2, 0]] - ], - XZ: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.01), matInvisible), [0.15, 0, 0.15], [-Math.PI / 2, 0, 0]] - ], - XYZ: [ - [new Mesh(new BoxGeometry(0.2, 0.2, 0.2), matInvisible), [0, 0, 0]] - ] - }; - const helperScale = { - X: [ - [new Line(lineGeometry, matHelper.clone()), [-1e3, 0, 0], null, [1e6, 1, 1], "helper"] - ], - Y: [ - [new Line(lineGeometry, matHelper.clone()), [0, -1e3, 0], [0, 0, Math.PI / 2], [1e6, 1, 1], "helper"] - ], - Z: [ - [new Line(lineGeometry, matHelper.clone()), [0, 0, -1e3], [0, -Math.PI / 2, 0], [1e6, 1, 1], "helper"] - ] - }; - function setupGizmo(gizmoMap) { - const gizmo = new Object3D(); - for (const name in gizmoMap) { - for (let i = gizmoMap[name].length; i--; ) { - const object = gizmoMap[name][i][0].clone(); - const position2 = gizmoMap[name][i][1]; - const rotation = gizmoMap[name][i][2]; - const scale2 = gizmoMap[name][i][3]; - const tag = gizmoMap[name][i][4]; - object.name = name; - object.tag = tag; - if (position2) { - object.position.set(position2[0], position2[1], position2[2]); - } - if (rotation) { - object.rotation.set(rotation[0], rotation[1], rotation[2]); - } - if (scale2) { - object.scale.set(scale2[0], scale2[1], scale2[2]); - } - object.updateMatrix(); - const tempGeometry = object.geometry.clone(); - tempGeometry.applyMatrix4(object.matrix); - object.geometry = tempGeometry; - object.renderOrder = Infinity; - object.position.set(0, 0, 0); - object.rotation.set(0, 0, 0); - object.scale.set(1, 1, 1); - gizmo.add(object); - } - } - return gizmo; - } - this.gizmo = {}; - this.picker = {}; - this.helper = {}; - this.add(this.gizmo["translate"] = setupGizmo(gizmoTranslate)); - this.add(this.gizmo["rotate"] = setupGizmo(gizmoRotate)); - this.add(this.gizmo["scale"] = setupGizmo(gizmoScale)); - this.add(this.picker["translate"] = setupGizmo(pickerTranslate)); - this.add(this.picker["rotate"] = setupGizmo(pickerRotate)); - this.add(this.picker["scale"] = setupGizmo(pickerScale)); - this.add(this.helper["translate"] = setupGizmo(helperTranslate)); - this.add(this.helper["rotate"] = setupGizmo(helperRotate)); - this.add(this.helper["scale"] = setupGizmo(helperScale)); - this.picker["translate"].visible = false; - this.picker["rotate"].visible = false; - this.picker["scale"].visible = false; - } - updateMatrixWorld(force) { - const space2 = this.mode === "scale" ? "local" : this.space; - const quaternion = space2 === "local" ? this.worldQuaternion : _identityQuaternion; - this.gizmo["translate"].visible = this.mode === "translate"; - this.gizmo["rotate"].visible = this.mode === "rotate"; - this.gizmo["scale"].visible = this.mode === "scale"; - this.helper["translate"].visible = this.mode === "translate"; - this.helper["rotate"].visible = this.mode === "rotate"; - this.helper["scale"].visible = this.mode === "scale"; - let handles = []; - handles = handles.concat(this.picker[this.mode].children); - handles = handles.concat(this.gizmo[this.mode].children); - handles = handles.concat(this.helper[this.mode].children); - for (let i = 0; i < handles.length; i++) { - const handle = handles[i]; - handle.visible = true; - handle.rotation.set(0, 0, 0); - handle.position.copy(this.worldPosition); - let factor; - if (this.camera.isOrthographicCamera) { - factor = (this.camera.top - this.camera.bottom) / this.camera.zoom; - } else { - factor = this.worldPosition.distanceTo(this.cameraPosition) * Math.min(1.9 * Math.tan(Math.PI * this.camera.fov / 360) / this.camera.zoom, 7); - } - handle.scale.set(1, 1, 1).multiplyScalar(factor * this.size / 4); - if (handle.tag === "helper") { - handle.visible = false; - if (handle.name === "AXIS") { - handle.position.copy(this.worldPositionStart); - handle.visible = !!this.axis; - if (this.axis === "X") { - _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, 0)); - handle.quaternion.copy(quaternion).multiply(_tempQuaternion); - if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > 0.9) { - handle.visible = false; - } - } - if (this.axis === "Y") { - _tempQuaternion.setFromEuler(_tempEuler.set(0, 0, Math.PI / 2)); - handle.quaternion.copy(quaternion).multiply(_tempQuaternion); - if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > 0.9) { - handle.visible = false; - } - } - if (this.axis === "Z") { - _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0)); - handle.quaternion.copy(quaternion).multiply(_tempQuaternion); - if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > 0.9) { - handle.visible = false; - } - } - if (this.axis === "XYZE") { - _tempQuaternion.setFromEuler(_tempEuler.set(0, Math.PI / 2, 0)); - _alignVector.copy(this.rotationAxis); - handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(_zeroVector, _alignVector, _unitY)); - handle.quaternion.multiply(_tempQuaternion); - handle.visible = this.dragging; - } - if (this.axis === "E") { - handle.visible = false; - } - } else if (handle.name === "START") { - handle.position.copy(this.worldPositionStart); - handle.visible = this.dragging; - } else if (handle.name === "END") { - handle.position.copy(this.worldPosition); - handle.visible = this.dragging; - } else if (handle.name === "DELTA") { - handle.position.copy(this.worldPositionStart); - handle.quaternion.copy(this.worldQuaternionStart); - _tempVector.set(1e-10, 1e-10, 1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1); - _tempVector.applyQuaternion(this.worldQuaternionStart.clone().invert()); - handle.scale.copy(_tempVector); - handle.visible = this.dragging; - } else { - handle.quaternion.copy(quaternion); - if (this.dragging) { - handle.position.copy(this.worldPositionStart); - } else { - handle.position.copy(this.worldPosition); - } - if (this.axis) { - handle.visible = this.axis.search(handle.name) !== -1; - } - } - continue; - } - handle.quaternion.copy(quaternion); - if (this.mode === "translate" || this.mode === "scale") { - const AXIS_HIDE_TRESHOLD = 0.99; - const PLANE_HIDE_TRESHOLD = 0.2; - if (handle.name === "X") { - if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - if (handle.name === "Y") { - if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - if (handle.name === "Z") { - if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) > AXIS_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - if (handle.name === "XY") { - if (Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - if (handle.name === "YZ") { - if (Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - if (handle.name === "XZ") { - if (Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(this.eye)) < PLANE_HIDE_TRESHOLD) { - handle.scale.set(1e-10, 1e-10, 1e-10); - handle.visible = false; - } - } - } else if (this.mode === "rotate") { - _tempQuaternion2.copy(quaternion); - _alignVector.copy(this.eye).applyQuaternion(_tempQuaternion.copy(quaternion).invert()); - if (handle.name.search("E") !== -1) { - handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(this.eye, _zeroVector, _unitY)); - } - if (handle.name === "X") { - _tempQuaternion.setFromAxisAngle(_unitX, Math.atan2(-_alignVector.y, _alignVector.z)); - _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion); - handle.quaternion.copy(_tempQuaternion); - } - if (handle.name === "Y") { - _tempQuaternion.setFromAxisAngle(_unitY, Math.atan2(_alignVector.x, _alignVector.z)); - _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion); - handle.quaternion.copy(_tempQuaternion); - } - if (handle.name === "Z") { - _tempQuaternion.setFromAxisAngle(_unitZ, Math.atan2(_alignVector.y, _alignVector.x)); - _tempQuaternion.multiplyQuaternions(_tempQuaternion2, _tempQuaternion); - handle.quaternion.copy(_tempQuaternion); - } - } - handle.visible = handle.visible && (handle.name.indexOf("X") === -1 || this.showX); - handle.visible = handle.visible && (handle.name.indexOf("Y") === -1 || this.showY); - handle.visible = handle.visible && (handle.name.indexOf("Z") === -1 || this.showZ); - handle.visible = handle.visible && (handle.name.indexOf("E") === -1 || this.showX && this.showY && this.showZ); - handle.material._color = handle.material._color || handle.material.color.clone(); - handle.material._opacity = handle.material._opacity || handle.material.opacity; - handle.material.color.copy(handle.material._color); - handle.material.opacity = handle.material._opacity; - if (this.enabled && this.axis) { - if (handle.name === this.axis) { - handle.material.color.setHex(16776960); - handle.material.opacity = 1; - } else if (this.axis.split("").some(function(a) { - return handle.name === a; - })) { - handle.material.color.setHex(16776960); - handle.material.opacity = 1; - } + [BIND("$pageView")]() { + return { + style: { + "--elf--canvas-background-color": this.$config.get("style.canvas.background.color") } + }; + } + checkSpace() { + if (this.$config.is("editing.mode", EditingMode.HAND)) { + return true; } - super.updateMatrixWorld(force); + return this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(KEY_CODE.space)); } -} -TransformControlsGizmo.prototype.isTransformControlsGizmo = true; -class TransformControlsPlane extends Mesh { - constructor() { - super(new PlaneGeometry(1e5, 1e5, 2, 2), new MeshBasicMaterial({ visible: false, wireframe: true, side: DoubleSide, transparent: true, opacity: 0.1, toneMapped: false })); - this.type = "TransformControlsPlane"; - } - updateMatrixWorld(force) { - let space2 = this.space; - this.position.copy(this.worldPosition); - if (this.mode === "scale") - space2 = "local"; - _v1.copy(_unitX).applyQuaternion(space2 === "local" ? this.worldQuaternion : _identityQuaternion); - _v2.copy(_unitY).applyQuaternion(space2 === "local" ? this.worldQuaternion : _identityQuaternion); - _v3.copy(_unitZ).applyQuaternion(space2 === "local" ? this.worldQuaternion : _identityQuaternion); - _alignVector.copy(_v2); - switch (this.mode) { - case "translate": - case "scale": - switch (this.axis) { - case "X": - _alignVector.copy(this.eye).cross(_v1); - _dirVector.copy(_v1).cross(_alignVector); - break; - case "Y": - _alignVector.copy(this.eye).cross(_v2); - _dirVector.copy(_v2).cross(_alignVector); - break; - case "Z": - _alignVector.copy(this.eye).cross(_v3); - _dirVector.copy(_v3).cross(_alignVector); - break; - case "XY": - _dirVector.copy(_v3); - break; - case "YZ": - _dirVector.copy(_v1); - break; - case "XZ": - _alignVector.copy(_v3); - _dirVector.copy(_v2); - break; - case "XYZ": - case "E": - _dirVector.set(0, 0, 0); - break; - } - break; - case "rotate": - default: - _dirVector.set(0, 0, 0); + [POINTERSTART("$lock") + IF("checkSpace") + MOVE("movePan") + END("moveEndPan")]() { + this.startMovePan(); + } + [CONFIG("editing.mode")]() { + if (this.$config.is("editing.mode", EditingMode.HAND)) { + this.startMovePan(); + this.$commands.emit("refreshCursor", "grab"); + } else { + this.$commands.emit("recoverCursor", "auto"); } - if (_dirVector.length() === 0) { - this.quaternion.copy(this.cameraQuaternion); + } + startMovePan() { + this.lastDist = create$3(); + } + movePan(dx, dy) { + this.$commands.emit("refreshCursor", "grabbing"); + const currentDist = fromValues(dx, dy, 0); + this.$viewport.pan(...transformMat4([], subtract([], this.lastDist, currentDist), this.$viewport.scaleMatrixInverse)); + this.lastDist = currentDist; + } + refreshCursor() { + if (this.$config.is("editing.mode", EditingMode.HAND)) { + this.$commands.emit("refreshCursor", "grab"); } else { - _tempMatrix.lookAt(_tempVector.set(0, 0, 0), _dirVector, _alignVector); - this.quaternion.setFromRotationMatrix(_tempMatrix); + this.$commands.emit("refreshCursor", "auto"); } - super.updateMatrixWorld(force); } -} -TransformControlsPlane.prototype.isTransformControlsPlane = true; -var ThreeRenderView$1 = ""; -class ThreeRenderView extends EditorElement { - afterRender() { - window.setTimeout(() => { - this.refresh(); - }, 100); + moveEndPan() { + this.refreshCursor(); } - renderCanvas() { - this.renderer.render(this.$context.sceneManager.scene, this.$context.sceneManager.viewportCamera); - } - initializeCamera(rect2) { - const camera = new PerspectiveCamera(75, rect2.width / rect2.height, 0.1, 1e3); - camera.position.x = 1; - camera.position.y = 3; - camera.position.z = 1; - camera.lookAt(0, 0, 0); - this.$context.sceneManager.camera = camera; - this.$context.sceneManager.addCamera(camera); - this.$context.sceneManager.setViewportCamera(camera.uuid); - } - initializeRenderer() { - const rect2 = this.refs.$view.offsetRect(); - this.state.rect = rect2; - this.initializeCamera(rect2); - console.log(this.$context.sceneManager.viewportCamera); - const renderer = new WebGLRenderer({ - canvas: this.refs.$view.el, - antialias: true - }); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(rect2.width, rect2.height); - const controls = new OrbitControls(this.$context.sceneManager.viewportCamera, this.refs.$body.el); - controls.addEventListener("change", () => { - this.renderCanvas(); - }); - const grid2 = new Group(); - const grid1 = new GridHelper(30, 30, 8947848, "yellow"); - grid1.material.color.setHex(8947848); - grid1.material.vertexColors = false; - grid2.add(grid1); - const grid22 = new GridHelper(30, 6, 2236962, "white"); - grid22.material.color.setHex(2236962); - grid22.material.depthFunc = AlwaysDepth; - grid22.material.vertexColors = false; - grid2.add(grid22); - this.grid = grid2; - this.$context.sceneManager.addObject(this.grid, void 0, void 0, false); - const light2 = new DirectionalLight(16777215, 2); - light2.position.set(1, 1, 1); - this.$context.sceneManager.scene.add(light2); - const box = new Box3(); - const selectionBox = new Box3Helper(box); - selectionBox.material.depthTest = false; - selectionBox.material.transparent = true; - selectionBox.visible = false; - this.$context.sceneManager.sceneHelpers.add(selectionBox); - let objectPositionOnDown = null; - let objectRotationOnDown = null; - let objectScaleOnDown = null; - const transformControls = new TransformControls(this.$context.sceneManager.viewportCamera, this.refs.$view.el); - this.transformControls = transformControls; - transformControls.addEventListener("change", () => { - this.renderCanvas(); - }); - transformControls.addEventListener("mouseDown", () => { - const object = transformControls.object; - objectPositionOnDown = object.position.clone(); - objectRotationOnDown = object.rotation.clone(); - objectScaleOnDown = object.scale.clone(); - controls.enabled = false; - }); - transformControls.addEventListener("mouseUp", () => { - const object = transformControls.object; - if (object !== void 0) { - switch (transformControls.getMode()) { - case "translate": - if (!objectPositionOnDown.equals(object.position)) { - this.emit("SetPosition", object, object.position, objectPositionOnDown); - } - break; - case "rotate": - if (!objectRotationOnDown.equals(object.rotation)) { - this.emit("SetRotation", object, object.rotation, objectRotationOnDown); - } - break; - case "scale": - if (!objectScaleOnDown.equals(object.scale)) { - this.emit("SetScale", object, object.scale, objectScaleOnDown); - } - break; - } - } - controls.enabled = true; - }); - this.$context.sceneManager.scene.add(transformControls); - return renderer; + [DRAGOVER("$lock") + PREVENT]() { } - refresh() { - if (!this.renderer) { - const renderer = this.initializeRenderer(); - console.log(renderer); - this.renderer = renderer; + [DROP("$lock") + PREVENT](e) { + const newCenter = this.$viewport.getWorldPosition(e); + if (e.dataTransfer.getData("text/asset")) { + this.$commands.emit("drop.asset", { + asset: { id: e.dataTransfer.getData("text/asset"), center: newCenter } + }); + } else { + const id = Dom.create(e.target).attr("data-id"); + if (id) { + this.$commands.emit("drop.asset", { + gradient: e.dataTransfer.getData("text/gradient"), + pattern: e.dataTransfer.getData("text/pattern"), + color: e.dataTransfer.getData("text/color"), + imageUrl: e.dataTransfer.getData("image/info") + }, id); + } else { + const imageUrl = e.dataTransfer.getData("image/info"); + this.$commands.emit("dropImageUrl", imageUrl); + } } - const self2 = this; - function animate(time) { - self2.renderCanvas(time); + } + [WHEEL("$lock") + PREVENT](e) { + const [dx, dy] = normalizeWheelEvent(e); + if (!this.state.gesture) { + if (e.ctrlKey) { + this.$viewport.setMousePoint(e.clientX, e.clientY); + } + this.emit("startGesture"); + this.state.gesture = true; + } else { + if (e.ctrlKey) { + const zoomFactor = 1 - 2.5 * dy / 100; + this.$viewport.zoom(zoomFactor); + } else { + const newDx = -2.5 * dx; + const newDy = -2.5 * dy; + this.$viewport.pan(-newDx / this.$viewport.scale, -newDy / this.$viewport.scale, 0); + } } - animate(0); + window.clearTimeout(this.state.timer); + this.state.timer = window.setTimeout(() => { + this.state.gesture = void 0; + this.emit("endGesture"); + }, 200); } refreshCanvasSize() { - const rect2 = this.refs.$view.offsetRect(); - this.state.rect = rect2; - this.$context.sceneManager.viewportCamera.aspect = rect2.width / rect2.height; - this.$context.sceneManager.viewportCamera.updateProjectionMatrix(); - this.renderer.setSize(rect2.width, rect2.height); - this.renderCanvas(0); - } - [SUBSCRIBE("objectSelected")]() { - this.transformControls.attach(this.$context.sceneManager.selected); - } - [SUBSCRIBE("objectAdded")]() { - this.renderCanvas(0); + this.$viewport.refreshCanvasSize(this.refs.$lock.rect()); } [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - console.log("resize"); this.refreshCanvasSize(); } + [SUBSCRIBE(UPDATE_VIEWPORT)]() { + this.$commands.emit("refreshCursor", "auto"); + } +} +var HorizontalRuler$1 = ""; +let pathString$1 = []; +class HorizontalRuler extends EditorElement { template() { return ` -
- - ${this.$injectManager.generate("render.view")} +
+
+ + + +
+
+
+
+
+
`; } -} -class Canvas3DView extends EditorElement { - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "elf--page-three-container", - tabIndex: "-1", - ref: "$container" - }, /* @__PURE__ */ createElementJsx("div", { - class: "page-view", - ref: "$pageView" - }, /* @__PURE__ */ createElementJsx("div", { - class: "page-lock scrollbar", - ref: "$lock" - }, /* @__PURE__ */ createElementJsx(ThreeRenderView, { - ref: "$threeRenderView" - }), this.$injectManager.generate("canvas.view")))); + afterRender() { + this.refreshCanvasSize(); + } + refreshCanvasSize() { + this.state.rect = this.$el.rect(); + } + initializeRect() { + if (!this.state.rect || this.state.rect.width == 0) { + this.state.rect = this.$el.rect(); + } + } + makeLine(pathString2, baseNumber, minX, maxX, realWidth, width2, epsilon = 3, lineWidth = 30, expect = 10) { + let startX = minX - minX % baseNumber; + let endX = maxX + maxX % baseNumber; + const firstX = (startX - minX) / realWidth * width2; + const secondX = (startX + baseNumber - minX) / realWidth * width2; + if (Math.abs(secondX - firstX) < epsilon) + return; + for (var i = startX; i < endX; i += baseNumber) { + if (i != 0 && i % expect === 0) + continue; + const x = Math.floor((i - minX) / realWidth * width2); + pathString2[pathString2.length] = `M ${x} ${30 - lineWidth} L ${x} 30 `; + } + } + makeLineText(baseNumber, minX, maxX, realWidth, width2, epsilon = 3) { + const text2 = []; + let startX = minX - minX % baseNumber; + let endX = maxX + maxX % baseNumber; + const firstX = (startX - minX) / realWidth * width2; + const secondX = (startX + baseNumber - minX) / realWidth * width2; + if (Math.abs(secondX - firstX) < epsilon) + return; + for (var i = startX; i < endX; i += baseNumber) { + const x = Math.floor((i - minX) / realWidth * width2); + text2[text2.length] = `${i}`; + } + return text2.join(""); + } + makeRulerForCurrentArtboard() { + const current = this.$context.selection.current; + if (!current) + return ""; + const currentArtboard = current.artboard; + if (!currentArtboard) + return ""; + const verties = currentArtboard.verties; + const { minX, width: realWidth } = this.$viewport; + const width2 = this.state.rect.width; + const firstX = (verties[0][0] - minX) / realWidth * width2; + const secondX = (verties[2][0] - minX) / realWidth * width2; + return ` + M ${firstX} 20 + L ${firstX} 30 + L ${secondX} 30 + L ${secondX} 20 + Z + `; + } + makeRulerForCurrent() { + const current = this.$context.selection.current; + if (!current) + return ""; + const verties = this.$context.selection.verties; + const xList = verties.map((it) => it[0]); + const currentMinX = Math.min.apply(Math, xList); + const currentMaxX = Math.max.apply(Math, xList); + const { minX, width: realWidth } = this.$viewport; + const width2 = this.state.rect.width; + const firstX = (currentMinX - minX) / realWidth * width2; + const secondX = (currentMaxX - minX) / realWidth * width2; + return ` + M ${firstX} 0 + L ${firstX} 20 + L ${secondX} 20 + L ${secondX} 0 + Z + `; + } + makeRuler() { + const { minX, maxX, width: realWidth } = this.$viewport; + const width2 = this.state.rect.width; + pathString$1 = []; + this.makeLine(pathString$1, 1e3, minX, maxX, realWidth, width2, 10, 24, 1e4); + this.makeLine(pathString$1, 200, minX, maxX, realWidth, width2, 10, 20, 5e3); + this.makeLine(pathString$1, 100, minX, maxX, realWidth, width2, 10, 20, 200); + this.makeLine(pathString$1, 50, minX, maxX, realWidth, width2, 10, 20, 100); + this.makeLine(pathString$1, 10, minX, maxX, realWidth, width2, 10, 18, 50); + this.makeLine(pathString$1, 5, minX, maxX, realWidth, width2, 10, 15, 10); + this.makeLine(pathString$1, 1, minX, maxX, realWidth, width2, 10, 13, 10); + return pathString$1.join(""); + } + makeRulerText() { + const { minX, maxX, width: realWidth } = this.$viewport; + const width2 = this.state.rect.width; + const dist2 = Math.abs(maxX - minX); + return [ + dist2 > 3e3 ? this.makeLineText(3e3, minX, maxX, realWidth, width2, 24) : "", + 2e3 < dist2 && dist2 < 3e3 ? this.makeLineText(500, minX, maxX, realWidth, width2, 22) : "", + 1e3 < dist2 && dist2 < 2e3 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", + 800 < dist2 && dist2 < 1e3 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", + 500 < dist2 && dist2 < 800 ? this.makeLineText(100, minX, maxX, realWidth, width2, 20) : "", + 500 < dist2 && dist2 < 800 ? this.makeLineText(50, minX, maxX, realWidth, width2, 20) : "", + 200 < dist2 && dist2 < 500 ? this.makeLineText(50, minX, maxX, realWidth, width2, 20) : "", + 50 < dist2 && dist2 < 200 ? this.makeLineText(10, minX, maxX, realWidth, width2, 20) : "", + 15 < dist2 && dist2 < 50 ? this.makeLineText(5, minX, maxX, realWidth, width2, 20) : "", + 0 < dist2 && dist2 < 15 ? this.makeLineText(1, minX, maxX, realWidth, width2, 20) : "" + ].join(""); + } + [LOAD("$ruler") + DOMDIFF]() { + this.initializeRect(); + return `${this.makeRulerText()}`; + } + [LOAD("$lines") + DOMDIFF]() { + this.initializeRect(); + const lines = this.$config.get("horizontal.line").map((it) => { + const pos = this.$viewport.applyVertex([it, 0, 0]); + return ``; + }).join(""); + return `${lines}`; } -} -var Body3DPanel$1 = ""; -class Body3DPanel extends EditorElement { - components() { + [BIND("$rulerLines")]() { return { - Canvas3DView + d: this.makeRulerForCurrent() }; } - template() { - return ` -
-
-
- ${createComponent("Canvas3DView")} -
-
-
- `; - } - [SUBSCRIBE("bodypanel.toggle.fullscreen")]() { - this.refs.$el.toggleFullscreen(); - } -} -class ThreeInspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); + makeRulerCursor() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const { minX, width: realWidth } = this.$viewport; + this.initializeRect(); + const width2 = this.state.rect.width; + const distX = targetMousePoint[0] - minX; + const x = distX === 0 ? 0 : distX / realWidth * width2; + return `M ${x - 0.5} 0 L ${x - 0.5} 20`; } - [BIND("$el")]() { + [BIND("$cursor")]() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const { minX, width: realWidth } = this.$viewport; + this.initializeRect(); + const width2 = this.state.rect.width; + const distX = targetMousePoint[0] - minX; + const x = distX === 0 ? 0 : distX / realWidth * width2; return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) ? "block" : "none" - } + cssText: ` + --elf--horizontal-cursor-position: ${x}px; + ` }; } - template() { - return /* @__PURE__ */ createElementJsx("div", { - class: "feature-control inspector" - }, /* @__PURE__ */ createElementJsx("div", null, /* @__PURE__ */ createElementJsx(Tabs, { - ref: "$tab", - selectedValue: "style", - onchange: (value) => { - this.$config.set("inspector.selectedValue", value); - } - }, /* @__PURE__ */ createElementJsx(TabPanel, { - value: "style", - title: this.$i18n("inspector.tab.title.design") - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex; flex-direction: column;" - }, this.$injectManager.generate("inspector.tab.style"), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))), this.$injectManager.getTargetUI("inspector.tab").map((it) => { - const { value, title: title2, loadElements } = it.class; - return /* @__PURE__ */ createElementJsx(TabPanel, { - value, - title: title2, - icon: it.icon - }, /* @__PURE__ */ createElementJsx("div", { - style: "display: flex: flex-direction: column;" - }, loadElements.map((element) => createElement(element)), this.$injectManager.generate("inspector.tab." + it.value), /* @__PURE__ */ createElementJsx("div", { - class: "empty", - style: "order: 1000000;" - }))); - })))); + [MOUSEOVER()]() { + this.$commands.emit("refreshCursor", "ns-resize"); } -} -var layout$1 = ""; -var _DEFAULT_CAMERA = new PerspectiveCamera(3, 1, 0.01, 1e3); -_DEFAULT_CAMERA.name = "Camera"; -_DEFAULT_CAMERA.position.set(0, 5, 10); -_DEFAULT_CAMERA.lookAt(new Vector3()); -class SceneManager { - constructor(editor) { - this.editor = editor; - this.camera = _DEFAULT_CAMERA.clone(); - this.scene = new Scene(); - this.scene.name = "Scene"; - this.sceneHelpers = new Scene(); - this.object = {}; - this.geometries = {}; - this.materials = {}; - this.textures = {}; - this.scripts = {}; - this.materialsRefCounter = /* @__PURE__ */ new Map(); - this.mixer = new AnimationMixer(this.scene); - this.selected = null; - this.helpers = {}; - this.cameras = {}; - this.viewportCamera = this.camera; - this.addCamera(this.camera); + [POINTERSTART() + MOVE() + END()]() { + const pos = round$2([], this.$viewport.getWorldPosition()); + this.startIndex = this.$config.push("vertical.line", pos[1]); + this.$config.init("vertical.line.selected.index", this.startIndex); + this.$context.snapManager.clear(); } - emit(event, ...args2) { - this.editor.emit(event, ...args2); - } - setScene(scene) { - this.scene.uuid = scene.uuid; - this.scene.name = scene.name; - this.scene.background = scene.background; - this.scene.environment = scene.environment; - this.scene.fog = scene.fog; - this.scene.userData = JSON.parse(JSON.stringify(scene.userData)); - while (scene.children.length > 0) { - this.addObject(scene.children[0], void 0, void 0, false); - } - this.emit("sceneChanged", this.scene); - } - addObject(object, parent, index2, hasEmit = true) { - object.traverse((child) => { - if (child.geometry !== void 0) - this.addGeometry(child.geometry); - if (child.material !== void 0) - this.addMaterial(child.material); - this.addCamera(child); - this.addHelper(child); - }); - if (parent === void 0) { - this.scene.add(object); - } else { - parent.children.splice(index2, 0, object); - object.parent = parent; + move() { + const newPos = this.$context.snapManager.getWorldPosition(); + if (this.$viewport.minY < newPos[1] && newPos[1] < this.$viewport.maxY) { + this.$config.setIndexValue("vertical.line", this.startIndex, newPos[1]); } - this.emit("objectAdded", object); - this.emit("sceneGraphChanged"); } - moveObject(object, parent, before) { - if (parent === void 0) { - parent = this.scene; - } - parent.add(object); - if (before !== void 0) { - var index2 = parent.children.indexOf(before); - parent.children.splice(index2, 0, object); - parent.children.pop(); + end() { + const pos = round$2([], this.$viewport.getWorldPosition()); + if (this.$viewport.minY < pos[1] && pos[1] < this.$viewport.maxY) + ; + else { + this.$config.removeIndex("vertical.line", this.startIndex); } - this.emit("sceneGraphChanged"); - } - nameObject(object, name) { - object.name = name; - this.emit("sceneGraphChanged"); - } - removeObject(object) { - if (object.parent === null) - return; - object.traverse((child) => { - this.removeCamera(child); - this.removeHelper(child); - if (child.material !== void 0) - this.removeMaterial(child.material); - }); - object.parent.remove(object); - this.emit("objectRemoved", object); - this.emit("sceneGraphChanged"); - } - addGeometry(geometry) { - this.geometries[geometry.uuid] = geometry; - } - setGeometryName(geometry, name) { - geometry.name = name; - this.emit("sceneGraphChanged"); + this.startIndex = null; + this.$commands.emit("recoverCursor"); } - addMaterial(material) { - if (isArray(material)) { - for (var i = 0, l = material.length; i < l; i++) { - this.addMaterialToRefCounter(material[i]); - } - } else { - this.addMaterialToRefCounter(material); + refresh() { + if (this.$config.get("show.ruler")) { + this.load(); } - this.emit("materialAdded"); } - addMaterialToRefCounter(material) { - var materialsRefCounter = this.materialsRefCounter; - var count = materialsRefCounter.get(material); - if (count === void 0) { - materialsRefCounter.set(material, 1); - this.materials[material.uuid] = material; - } else { - count++; - materialsRefCounter.set(material, count); - } + [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION)]() { + this.refresh(); } - removeMaterial(material) { - if (isArray(material)) { - for (var i = 0, l = material.length; i < l; i++) { - this.removeMaterialFromRefCounter(material[i]); + [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(10)]() { + if (this.$context.selection.current) { + const current = this.$context.selection.current; + if (current.changedRect) { + this.refresh(); } - } else { - this.removeMaterialFromRefCounter(material); } - this.emit("materialRemoved"); } - removeMaterialFromRefCounter(material) { - var materialsRefCounter = this.materialsRefCounter; - var count = materialsRefCounter.get(material); - count--; - if (count === 0) { - materialsRefCounter.delete(material); - delete this.materials[material.uuid]; - } else { - materialsRefCounter.set(material, count); - } + [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { + this.refreshCanvasSize(); } - getMaterialById(id) { - return Object.values(this.materials).find((m) => m.id === id); + [CONFIG("onMouseMovepageContainer")]() { + this.bindData("$cursor"); + this.bindData("$rulerLines"); } - setMaterialName(material, name) { - material.name = name; - this.emit("sceneGraphChanged"); + [CONFIG("horizontal.line")]() { + this.load("$lines"); } - addTexture(texture2) { - this.textures[texture2.uuid] = texture2; +} +var VerticalRuler$1 = ""; +let pathString = []; +class VerticalRuler extends EditorElement { + template() { + return ` +
+
+ + + +
+
+
+
+
+
+
+ `; } - addCamera(camera) { - if (camera.isCamera) { - this.cameras[camera.uuid] = camera; - this.emit("cameraAdded", camera); - } + afterRender() { + this.refreshCanvasSize(); } - removeCamera(camera) { - if (this.cameras[camera.uuid] !== void 0) { - delete this.cameras[camera.uuid]; - this.emit("cameraRemoved", camera); - } + refreshCanvasSize() { + this.state.rect = this.$el.rect(); } - addHelper(object, helper) { - var _a; - var geometry = new SphereGeometry(2, 4, 2); - var material = new MeshBasicMaterial({ - color: 16711680, - visible: false - }); - if (helper === void 0) { - if (object.isCamera) { - helper = new CameraHelper(object); - } else if (object.isPointLight) { - helper = new PointLightHelper(object, 1); - } else if (object.isDirectionalLight) { - helper = new DirectionalLightHelper(object, 1); - } else if (object.isSpotLight) { - helper = new SpotLightHelper(object); - } else if (object.isHemisphereLight) { - helper = new HemisphereLightHelper(object, 1); - } else if (object.isSkinnedMesh) { - helper = new SkeletonHelper(object.skeleton.bones[0]); - } else if (object.isBone === true && ((_a = object.parent) == null ? void 0 : _a.isBone) !== true) { - helper = new SkeletonHelper(object); - } else { - return; - } - const picker = new Mesh(geometry, material); - picker.name = "picker"; - picker.userData.object = object; - helper.add(picker); + initializeRect() { + if (!this.state.rect || this.state.rect.width == 0) { + this.state.rect = this.$el.rect(); } - this.sceneHelpers.add(helper); - this.helpers[object.id] = helper; - this.emit("helperAdded", helper); } - removeHelper(object) { - if (this.helpers[object.id] !== void 0) { - var helper = this.helpers[object.id]; - helper.parent.remove(helper); - delete this.helpers[object.id]; - this.emit("helperRemoved", helper); - } + [MOUSEOVER()]() { + this.$commands.emit("refreshCursor", "ew-resize"); } - addScript(object, script) { - if (this.scripts[object.uuid] === void 0) { - this.scripts[object.uuid] = []; - } - this.scripts[object.uuid].push(script); - this.emit("scriptAdded", script); + [MOUSELEAVE()]() { + this.$commands.emit("recoverCursor"); } - removeScript(object, script) { - if (this.scripts[object.uuid] === void 0) - return; - var index2 = this.scripts[object.uuid].indexOf(script); - if (index2 !== -1) { - this.scripts[object.uuid].splice(index2, 1); - } - this.emit("scriptRemoved", script); + [POINTERSTART() + MOVE() + END()]() { + const pos = round$2([], this.$viewport.getWorldPosition()); + this.startIndex = this.$config.push("horizontal.line", pos[0]); + this.$config.init("horizontal.line.selected.index", this.startIndex); + this.$context.snapManager.clear(); } - getObjectMaterial(object, slot) { - var material = object.material; - if (isArray(material) && slot !== void 0) { - material = material[slot]; + move() { + const newPos = this.$context.snapManager.getWorldPosition(); + if (this.$viewport.minX < newPos[0] && newPos[0] < this.$viewport.maxX) { + this.$config.setIndexValue("horizontal.line", this.startIndex, newPos[0]); } - return material; } - setObjectMaterial(object, slot, newMaterial) { - if (isArray(object.material) && slot !== void 0) { - object.material[slot] = newMaterial; - } else { - object.material = newMaterial; + end() { + const pos = round$2([], this.$viewport.getWorldPosition()); + if (this.$viewport.minX < pos[0] && pos[0] < this.$viewport.maxX) + ; + else { + this.$config.removeIndex("horizontal.line", this.startIndex); } + this.startIndex = null; + this.$commands.emit("recoverCursor"); } - setViewportCamera(uuid2) { - this.viewportCamera = this.cameras[uuid2]; - this.emit("viewportCameraChanged"); - } - select(object) { - if (this.selected === object) + makeLine(pathString2, baseNumber, minY, maxY, realHeight, height2, epsilon = 3, lineWidth = 30, expect = 10) { + let startY = minY - minY % baseNumber; + let endY = maxY + maxY % baseNumber; + const firstY = (startY - minY) / realHeight * height2; + const secondY = (startY + baseNumber - minY) / realHeight * height2; + if (Math.abs(secondY - firstY) < epsilon) return; - var uuid2 = null; - if (object !== null) { - uuid2 = object.uuid; + for (var i = startY; i < endY; i += baseNumber) { + if (i != 0 && i % expect === 0) + continue; + const y = Math.floor((i - minY) / realHeight * height2); + pathString2[pathString2.length] = `M ${30 - lineWidth} ${y} L 30 ${y}`; } - this.selected = object; - this.editor.context.config.set("selected", uuid2); - this.emit("objectSelected", object); } - selectById(id) { - if (id === this.camera.id) { - this.select(this.camera); + makeLineText(baseNumber, minY, maxY, realHeight, height2, epsilon = 3) { + const text2 = []; + let startY = minY - minY % baseNumber; + let endY = maxY + maxY % baseNumber; + const firstY = (startY - minY) / realHeight * height2; + const secondY = (startY + baseNumber - minY) / realHeight * height2; + if (Math.abs(secondY - firstY) < epsilon) return; + for (var i = startY; i < endY; i += baseNumber) { + const y = Math.floor((i - minY) / realHeight * height2); + text2[text2.length] = `${i}`; } - this.select(this.scene.getObjectById(id)); - } - selectByUuid(uuid2) { - this.scene.traverse((child) => { - if (child.uuid === uuid2) { - this.select(child); - } - }); - } - deselect() { - this.select(null); - } - focus(object) { - if (object !== void 0) { - this.emit("objectFocused", object); - } - } - focusById(id) { - this.focus(this.scene.getObjectById(id)); - } - clear() { - this.camera.copy(_DEFAULT_CAMERA); - this.emit("cameraChanged"); - this.scene.name = "Scene"; - this.scene.userData = {}; - this.scene.background = null; - this.scene.environment = null; - this.scene.fog = null; - var objects = this.scene.children; - while (objects.length > 0) { - this.removeObject(objects[0]); - } - this.geometries = {}; - this.materials = {}; - this.textures = {}; - this.scripts = {}; - this.materialsRefCounter.clear(); - this.animations = {}; - this.mixer.stopAllAction(); - this.deselect(); - this.emit("editorCleared"); - } - async fromJSON(json) { - var loader = new ObjectLoader(); - var camera = await loader.parseAsync(json.camera); - this.camera.copy(camera); - this.emit("cameraResetted"); - this.scripts = json.scripts; - this.setScene(await loader.parseAsync(json.scene)); - } - toJSON() { - var scene = this.scene; - var scripts = this.scripts; - for (var key in scripts) { - var script = scripts[key]; - if (script.length === 0 || scene.getObjectByProperty("uuid", key) === void 0) { - delete scripts[key]; - } - } - return { - metadata: {}, - project: { - shadows: this.editor.context.config.get("project/renderer/shadows"), - shadowType: this.editor.context.config.get("project/renderer/shadowType"), - vr: this.editor.context.config.get("project/vr"), - physicallyCorrectLights: this.editor.context.config.get("project/renderer/physicallyCorrectLights"), - toneMapping: this.editor.context.config.get("project/renderer/toneMapping"), - toneMappingExposure: this.editor.context.config.get("project/renderer/toneMappingExposure") - }, - camera: this.camera.toJSON(), - scene: this.scene.toJSON(), - scripts: this.scripts - }; - } - objectByUuid(uuid2) { - return this.scene.getObjectByProperty("uuid", uuid2, true); + return text2.join(""); } -} -var addCubeBox = { - command: "addCubeBox", - execute: (editor) => { - const geometry = new BoxGeometry(1, 1, 1, 1, 1, 1); - const material = new MeshBasicMaterial({ color: 15794160 }); - const mesh = new Mesh(geometry, material); - mesh.name = "Box"; - mesh.position.y = 0.5; - editor.context.sceneManager.addObject(mesh); - editor.context.sceneManager.select(mesh); + makeRulerForCurrentArtboard() { + const current = this.$context.selection.current; + if (!current) + return ""; + const currentArtboard = current.artboard; + if (!currentArtboard) + return ""; + const verties = currentArtboard.verties; + const { minY, height: realHeight } = this.$viewport; + const height2 = this.state.rect.height; + const firstY = (verties[0][1] - minY) / realHeight * height2; + const secondY = (verties[2][1] - minY) / realHeight * height2; + return ` + M 20 ${firstY} + L 30 ${firstY} + L 30 ${secondY} + L 20 ${secondY} + Z + `; } -}; -var __glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": addCubeBox -}, Symbol.toStringTag, { value: "Module" })); -var editor_config_body_event = { - command: "change.bodyEvent", - description: "fire when bodyEvent was set", - execute: function(editor) { - const $target = Dom.create(editor.context.config.get("bodyEvent").target); - editor.context.config.init("onMouseMovepageContainer", $target); + makeRulerForCurrent() { + const current = this.$context.selection.current; + if (!current) + return ""; + const { minY, height: realHeight } = this.$viewport; + const height2 = this.state.rect.height; + const verties = this.$context.selection.verties; + const yList = verties.map((it) => it[1]); + const currentMinY = Math.min.apply(Math, yList); + const currentMaxY = Math.max.apply(Math, yList); + const firstY = (currentMinY - minY) / realHeight * height2; + const secondY = (currentMaxY - minY) / realHeight * height2; + return ` + M 0 ${firstY} + L 20 ${firstY} + L 20 ${secondY} + L 0 ${secondY} + Z + `; } -}; -var __glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({ - __proto__: null, - "default": editor_config_body_event -}, Symbol.toStringTag, { value: "Module" })); -const modules = { "./command_list/addCubeBox.js": __glob_0_0, "./command_list/editor.config.body.event.js": __glob_0_1 }; -const obj = {}; -Object.entries(modules).forEach(([key, value]) => { - key = key.replace("./command_list/", "").replace(".js", ""); - obj[key] = value.default; -}); -function commands(editor) { - editor.loadCommands(obj); -} -var DefaultMenu = [ - { - type: "button", - icon: "cube", - action: (editor) => { - editor.context.commands.emit("addCubeBox"); - } + makeRuler() { + const { minY, maxY, height: realHeight } = this.$viewport; + const height2 = this.state.rect.height; + pathString = []; + this.makeLine(pathString, 1e3, minY, maxY, realHeight, height2, 10, 20, 1e4); + this.makeLine(pathString, 200, minY, maxY, realHeight, height2, 10, 16, 5e3); + this.makeLine(pathString, 100, minY, maxY, realHeight, height2, 10, 18, 200); + this.makeLine(pathString, 50, minY, maxY, realHeight, height2, 10, 18, 100); + this.makeLine(pathString, 10, minY, maxY, realHeight, height2, 10, 18, 50); + this.makeLine(pathString, 5, minY, maxY, realHeight, height2, 10, 15, 10); + this.makeLine(pathString, 1, minY, maxY, realHeight, height2, 10, 14, 5); + return pathString.join(""); } -]; -function menus(editor) { - editor.registerMenu("toolbar.left", DefaultMenu); -} -function threeHelpers(editor) { - editor.registerUI("render.view", {}); -} -var threeEditorPlugins = [ - defaultConfigs, - defaultIcons, - defaultMessages, - baseEditor, - commands, - propertyEditor, - component, - project, - threeHelpers, - menus -]; -class ThreeEditor extends BaseLayout { - getManagers() { - return { - sceneManager: SceneManager - }; + makeRulerText() { + const { minY, maxY, height: realHeight } = this.$viewport; + const height2 = this.state.rect.height; + const dist2 = Math.abs(maxY - minY); + return [ + dist2 > 3e3 ? this.makeLineText(3e3, minY, maxY, realHeight, height2, 24) : "", + 2e3 < dist2 && dist2 < 3e3 ? this.makeLineText(500, minY, maxY, realHeight, height2, 22) : "", + 1e3 < dist2 && dist2 < 2e3 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", + 800 < dist2 && dist2 < 1e3 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", + 500 < dist2 && dist2 < 800 ? this.makeLineText(100, minY, maxY, realHeight, height2, 20) : "", + 500 < dist2 && dist2 < 800 ? this.makeLineText(50, minY, maxY, realHeight, height2, 20) : "", + 200 < dist2 && dist2 < 500 ? this.makeLineText(50, minY, maxY, realHeight, height2, 20) : "", + 50 < dist2 && dist2 < 200 ? this.makeLineText(10, minY, maxY, realHeight, height2, 20) : "", + 15 < dist2 && dist2 < 50 ? this.makeLineText(5, minY, maxY, realHeight, height2, 20) : "", + 0 < dist2 && dist2 < 15 ? this.makeLineText(1, minY, maxY, realHeight, height2, 20) : "" + ].join(""); } - afterRender() { - super.afterRender(); - this.$config.init("editor.layout.elements", this.refs); - if (this.opt.data) { - this.$editor.sceneManager.fromJSON(this.opt.data); + [LOAD("$body") + DOMDIFF]() { + if (!this.state.rect || this.state.rect.width == 0) { + this.state.rect = this.$el.rect(); } + return `${this.makeRulerText()}`; } - components() { - return { - LayerTab, - ToolBar, - ThreeInspector, - Body3DPanel, - PopupManager, - KeyboardManager, - IconManager: IconManager$1 - }; - } - getPlugins() { - return threeEditorPlugins; - } - initState() { - return { - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150 - }; - } - template() { + [LOAD("$lines") + DOMDIFF]() { + this.initializeRect(); + const lines = this.$config.get("vertical.line").map((it) => { + const pos = this.$viewport.applyVertex([0, it, 0]); + return ``; + }).join(""); return ` -
-
-
- ${createComponent("ToolBar")} -
-
-
- ${createComponent("Body3DPanel")} -
-
- ${createComponent("LayerTab")} -
-
- ${createComponent("ThreeInspector")} -
-
-
- ${createComponent("KeyboardManager")} -
- ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
- `; - } - [BIND("$el")]() { - return { - "data-design-mode": this.$config.get("editor.design.mode") - }; - } - [BIND("$splitter")]() { - let left2 = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; - } - return { - style: { - left: left2 - } - }; - } - [BIND("$leftArrow")]() { - let left2 = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; - } - return { - style: { - left: left2 - } - }; + ${lines} + `; } - [BIND("$leftPanel")]() { - let left2 = `0px`; - let width2 = this.state.leftSize; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left2 = `-${this.state.leftSize}px`; - } + [BIND("$rulerLines")]() { return { - style: { left: left2, width: width2, bottom: bottom2 } + d: this.makeRulerForCurrent() }; } - [BIND("$rightPanel")]() { - let right2 = 0; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.right.panel")) { - right2 = -this.state.rightSize; - } + [BIND("$cursor")]() { + const targetMousePoint = this.$viewport.getWorldPosition(); + const { minY, height: realHeight } = this.$viewport; + this.initializeRect(); + const height2 = this.state.rect.height; + const distY = targetMousePoint[1] - minY; + const y = distY === 0 ? 0 : distY / realHeight * height2; return { - style: { - right: right2, - bottom: bottom2 - } + cssText: ` + --elf--vertical-cursor-position: ${y}px; + ` }; } - [BIND("$rightArrow")]() { - let right2 = 6; - let bottom2 = this.state.bottomSize; - if (this.$config.true("show.right.panel")) { - right2 = this.state.rightSize + 6; + refresh() { + if (this.$config.get("show.ruler")) { + this.load(); } - return { - style: { - right: right2, - bottom: bottom2 - } - }; } - [BIND("$bodyPanel")]() { - let left2 = this.state.leftSize; - let right2 = this.state.rightSize; - let bottom2 = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left2 = 0; - } - if (this.$config.false("show.right.panel")) { - right2 = 0; + [SUBSCRIBE(UPDATE_CANVAS) + THROTTLE(10)]() { + const current = this.$context.selection.current; + if (current && current.changedRect) { + this.refresh(); } - return { - style: { - left: left2, - right: right2, - bottom: bottom2 - } - }; - } - [POINTERSTART("$splitter") + MOVE("moveSplitter") + END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); - } - moveSplitter(dx) { - this.setState({ - leftSize: Math.max(Math.min(this.leftSize + dx, this.maxSize), this.minSize) - }); - } - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); - } - refresh() { - this.bindData("$el"); - this.bindData("$splitter"); - this.bindData("$headerPanel"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); - this.bindData("$toggleRightButton"); - this.bindData("$toggleLeftButton"); - this.bindData("$bodyPanel"); - this.bindData("$footerPanel"); - this.emit("resizeEditor"); - } - [CONFIG("show.left.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); } - [CONFIG("show.right.panel")]() { + [SUBSCRIBE(UPDATE_VIEWPORT, REFRESH_SELECTION)]() { this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - [CONFIG("editor.design.mode")]() { - this.bindData("$el"); } - [DRAGOVER("$middle") + PREVENT]() { - } - [DROP("$middle") + PREVENT]() { + [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { + this.refreshCanvasSize(); } - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); + [CONFIG("onMouseMovepageContainer")]() { + this.bindData("$cursor"); + this.bindData("$rulerLines"); } - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } + [CONFIG("vertical.line")]() { + this.load("$lines"); } } -var layout = ""; -var whiteboardPlugins = [ - commands$1, - defaultConfigs, - defaultIcons, - defaultMessages, - defaultItems, - rendererJson, - baseEditor, - propertyEditor, - color, - gradient, - sample, - history, - selectionInfoView, - selectionToolView, - guideLineView, - layerAppendView, - hoverView, - pathDrawView, - pathEditorView, - gradientEditorView, - fillEditorView -]; -var PreviewBodyPanel$1 = ""; -class PreviewBodyPanel extends EditorElement { +var BodyPanel$1 = ""; +class BodyPanel extends EditorElement { components() { return { CanvasView, @@ -97068,16 +66970,19 @@ class PreviewBodyPanel extends EditorElement { ${createComponent("PageSubEditor", { ref: "subeditor" })}
+ ${createComponent("HorizontalRuler", { ref: "hruler" })} + ${createComponent("VerticalRuler", { ref: "vruler" })}
${createComponent("CanvasView", { ref: "canvas" })}
+
`; } [BIND("$el")]() { return { - class: `elf--body-panel` + class: `elf--body-panel ${this.$config.get("show.ruler") ? "ruler" : ""}` }; } [CONFIG("show.ruler")]() { @@ -97105,16 +67010,22 @@ class PreviewBodyPanel extends EditorElement { }; } } -class WhiteBoard extends BaseLayout { +class DesignEditor extends BlankEditor { initialize() { super.initialize(); this.$context.pathkit.load(); } + afterRender() { + super.afterRender(); + this.$commands.emit("load.json", this.opt.data); + this.$config.init("editor.layout.elements", this.children.$layout.getLayoutElements()); + } getManagers() { return { snapManager: SnapManager, selection: SelectionManager, segmentSelection: SegmentSelectionManager, + timeline: TimelineSelectionManager, history: HistoryManager, modelManager: ModelManager, lockManager: LockManager, @@ -97123,64 +67034,21 @@ class WhiteBoard extends BaseLayout { pathkit: PathKitManager }; } - components() { - return { - PreviewBodyPanel, - PopupManager, - KeyboardManager, - IconManager: IconManager$1 - }; - } getPlugins() { - return whiteboardPlugins; - } - template() { - return ` -
-
-
-
- ${createComponent("PreviewBodyPanel")} -
-
- ${createComponent("KeyboardManager")} -
- ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
- `; - } - afterRender() { - super.afterRender(); - this.$config.init("editor.layout.elements", this.refs); - this.$commands.emit("load.json", this.opt.data); - } - [DRAGOVER("$middle") + PREVENT]() { - } - [DROP("$middle") + PREVENT]() { - } - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); + return designEditorPlugins; } - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } + getBodyPanel() { + return /* @__PURE__ */ createElementJsx(DefaultLayoutItem, { + type: "body" + }, /* @__PURE__ */ createElementJsx(BodyPanel, { + ref: "$bodyPanelView" + })); } } function createDesignEditor(opts) { return start$1(DesignEditor, opts); } -function createThreeEditor(opts) { - return start$1(ThreeEditor, opts); -} function createBlankEditor(opts) { return start$1(BlankEditor, opts); } -function createDataEditor(opts) { - return start$1(DataEditor, opts); -} -function createWhiteBoard(opts) { - return start$1(WhiteBoard, opts); -} -export { ADD_BODY_FIRST_MOUSEMOVE, ADD_BODY_MOUSEMOVE, ADD_BODY_MOUSEUP, AFTER, ALL_TRIGGER, ALT, ANIMATIONEND, ANIMATIONITERATION, ANIMATIONSTART, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AlignContent, AlignItems, AssetParser, BACKSPACE, BEFORE, BIND, BIND_CHECK_DEFAULT_FUNCTION, BIND_CHECK_FUNCTION, BLUR, BRACKET_LEFT, BRACKET_RIGHT, BaseProperty, BaseStore, BlendMode, BooleanOperation, BorderStyle, BoxShadowStyle, CALLBACK, CAPTURE, CHANGE, CHANGEINPUT, CHECKER, CLICK, CMYKtoRGB, COMMAND, CONFIG, CONTEXTMENU, CONTROL, CUSTOM, CanvasViewToolLevel, ClipPathType, ClipboardActionType, ClipboardType, Component, Constraints, ConstraintsDirection, D1000, DEBOUNCE, DELAY, DELETE, DOMDIFF, DOUBLECLICK, DOUBLETAB, DRAG, DRAGEND, DRAGENTER, DRAGEXIT, DRAGLEAVE, DRAGOUT, DRAGOVER, DRAGSTART, DROP, DesignMode, DirectionNumberType, DirectionType, Dom, DomDiff, END, END_GUESTURE, ENTER, EQUAL, ESCAPE, EVENT, EditingMode, Editor, EditorElement, FIRSTMOVE, FIT, FOCUS, FOCUSIN, FOCUSOUT, FRAME, FUNC_END_CHARACTER, FUNC_REGEXP, FUNC_START_CHARACTER, FlexDirection, FlexWrap, FragmentInstance, FuncType, GradientType, HSLtoHSV, HSLtoRGB, HSVtoHSL, HSVtoRGB, HUEtoRGB, IF, INPUT, IntersectEpsilonNumberType, JustifyContent, KEY, KEYDOWN, KEYMAP_KEYDOWN, KEYMAP_KEYUP, KEYPRESS, KEYUP, KEY_CODE, KeyStringMaker, LABtoRGB, LABtoXYZ, LEFT_BUTTON, LOAD, Language, Layout, Length, MAGIC_METHOD, MAGIC_METHOD_REG, META, MINUS, MOUSE$1 as MOUSE, MOUSEDOWN, MOUSEENTER, MOUSELEAVE, MOUSEMOVE, MOUSEOUT, MOUSEOVER, MOUSEUP, MOVE, MagicMethod, MenuItemType, NAME_SAPARATOR, NotifyType, OBSERVER, ON, OPEN_CONTEXT_MENU, ObjectProperty, Overflow, PARAMS, PASSIVE, PASTE, PEN, PIPE, POINTEREND, POINTERENTER, POINTERMOVE, POINTEROUT, POINTEROVER, POINTERSTART, POP_MODE_VIEW, PREVENT, PUSH_MODE_VIEW, PathGenerator, PathParser, PathSegmentType, PathStringManager, PivotRGB, PivotXyz, Point, PolygonParser, Position, RAF, REFRESH_CONTENT, REFRESH_SELECTION, REFRESH_SELECTION_TOOL, RESIZE, RESIZE_CANVAS, RESIZE_WINDOW, RGBtoCMYK, RGBtoGray, RGBtoHSL, RGBtoHSV, RGBtoLAB, RGBtoSimpleGray, RGBtoXYZ, RGBtoYCrCb, RIGHT_BUTTON, RadialGradientSizeType, RadialGradientType, ResizingMode, ReverseRGB, ReverseXyz, SAPARATOR, SCROLL, SELF, SELF_TRIGGER, SET_LOCALE, SHIFT, SHOW_COMPONENT_POPUP, SHOW_NOTIFY, SPACE, SPLITTER, START_GUESTURE, STOP, SUBMIT, SUBSCRIBE, SUBSCRIBE_ALL, SUBSCRIBE_SELF, SegmentManager, SpreadMethodType, StrokeLineCap, StrokeLineJoin, THROTTLE, TOGGLE_FULLSCREEN, TOUCH$1 as TOUCH, TOUCHEND, TOUCHMOVE, TOUCHSTART, TRANSITIONCANCEL, TRANSITIONEND, TRANSITIONRUN, TRANSITIONSTART, TargetActionType, TextAlign, TextClip, TextDecoration, TextTransform, TimingFunction, TransformValue, UIElement, UPDATE_CANVAS, UPDATE_VIEWPORT, VARIABLE_SAPARATOR, ViewModeType, VisibilityType, WHEEL, XYZtoLAB, XYZtoRGB, YCrCbtoRGB, blend, brightness, c, checkHueColor, classnames, clone$1 as clone, collectProps, combineKeyArray, contrast, contrastColor, convertMatches, convertMatchesArray, createBlankEditor, createComponent, createComponentList, createDataEditor, createDesignEditor, createElement, createElementJsx, createHandlerInstance, createThreeEditor, createWhiteBoard, debounce, defaultValue, format, formatWithoutAlpha, get, getColorIndexString, getRef, getRootElementInstanceList, getVariable, gradient$1 as gradient, gray, hasVariable, hex, hsl, hue_color, ifCheck, initializeGroupVariables, interpolateRGB, interpolateRGBObject, isArray, isBoolean, isColor, isFunction, isNotString, isNotUndefined, isNotZero, isNumber, isObject, isString, isUndefined, isZero, keyEach, keyMap, keyMapJoin, makeEventChecker, makeRequestAnimationFrame, matches, mix, normalizeWheelEvent, parse, parseGradient, random$1 as random, randomByCount, randomNumber, randomRGBA, recoverVariable, registAlias, registElement, registHandler, registRootElementInstance, renderRootElementInstance, renderToString, replaceElement, retriveAlias, retriveElement, retriveHandler, reverseMatches, rgb, scale, scaleH, scaleHSV, scaleS, scaleV, spreadVariable, start$1 as start, throttle, trim, uuid$1 as uuid, uuidShort$1 as uuidShort, variable$4 as variable }; +export { ADD_BODY_FIRST_MOUSEMOVE, ADD_BODY_MOUSEMOVE, ADD_BODY_MOUSEUP, AFTER, ALL_TRIGGER, ALT, ANIMATIONEND, ANIMATIONITERATION, ANIMATIONSTART, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, AlignContent, AlignItems, AssetParser, BACKSPACE, BEFORE, BIND, BIND_CHECK_DEFAULT_FUNCTION, BIND_CHECK_FUNCTION, BLUR, BRACKET_LEFT, BRACKET_RIGHT, BaseProperty, BaseStore, BlankEditor, BlendMode, BooleanOperation, BorderStyle, BoxShadowStyle, CALLBACK, CAPTURE, CHANGE, CHANGEINPUT, CHECKER, CLICK, CMYKtoRGB, COMMAND, CONFIG, CONTEXTMENU, CONTROL, CUSTOM, CanvasViewToolLevel, ClipPathType, ClipboardActionType, ClipboardType, Component, Constraints, ConstraintsDirection, D1000, DEBOUNCE, DELAY, DELETE, DOMDIFF, DOUBLECLICK, DOUBLETAB, DRAG, DRAGEND, DRAGENTER, DRAGEXIT, DRAGLEAVE, DRAGOUT, DRAGOVER, DRAGSTART, DROP, DesignEditor, DesignMode, DirectionNumberType, DirectionType, Dom, DomDiff, END, END_GUESTURE, ENTER, EQUAL, ESCAPE, EVENT, EditingMode, Editor, EditorElement, FIRSTMOVE, FIT, FOCUS, FOCUSIN, FOCUSOUT, FRAME, FUNC_END_CHARACTER, FUNC_REGEXP, FUNC_START_CHARACTER, FlexDirection, FlexWrap, FragmentInstance, FuncType, GradientType, HSLtoHSV, HSLtoRGB, HSVtoHSL, HSVtoRGB, HUEtoRGB, IF, INPUT, IntersectEpsilonNumberType, JustifyContent, KEY, KEYDOWN, KEYMAP_KEYDOWN, KEYMAP_KEYUP, KEYPRESS, KEYUP, KEY_CODE, KeyStringMaker, LABtoRGB, LABtoXYZ, LEFT_BUTTON, LOAD, Language, Layout, Length, MAGIC_METHOD, MAGIC_METHOD_REG, META, MINUS, MOUSE, MOUSEDOWN, MOUSEENTER, MOUSELEAVE, MOUSEMOVE, MOUSEOUT, MOUSEOVER, MOUSEUP, MOVE, MagicMethod, MenuItemType, NAME_SAPARATOR, NotifyType, OBSERVER, ON, OPEN_CONTEXT_MENU, ObjectProperty, Overflow, PARAMS, PASSIVE, PASTE, PEN, PIPE, POINTEREND, POINTERENTER, POINTERMOVE, POINTEROUT, POINTEROVER, POINTERSTART, POP_MODE_VIEW, PREVENT, PUSH_MODE_VIEW, PathGenerator, PathParser, PathSegmentType, PathStringManager, PivotRGB, PivotXyz, Point, PolygonParser, Position, RAF, REFRESH_CONTENT, REFRESH_SELECTION, REFRESH_SELECTION_TOOL, RESIZE, RESIZE_CANVAS, RESIZE_WINDOW, RGBtoCMYK, RGBtoGray, RGBtoHSL, RGBtoHSV, RGBtoLAB, RGBtoSimpleGray, RGBtoXYZ, RGBtoYCrCb, RIGHT_BUTTON, RadialGradientSizeType, RadialGradientType, ResizingMode, ReverseRGB, ReverseXyz, SAPARATOR, SCROLL, SELF, SELF_TRIGGER, SET_LOCALE, SHIFT, SHOW_COMPONENT_POPUP, SHOW_NOTIFY, SPACE, SPLITTER, START_GUESTURE, STOP, SUBMIT, SUBSCRIBE, SUBSCRIBE_ALL, SUBSCRIBE_SELF, SegmentManager, SpreadMethodType, StrokeLineCap, StrokeLineJoin, THROTTLE, TOGGLE_FULLSCREEN, TOUCH, TOUCHEND, TOUCHMOVE, TOUCHSTART, TRANSITIONCANCEL, TRANSITIONEND, TRANSITIONRUN, TRANSITIONSTART, TargetActionType, TextAlign, TextClip, TextDecoration, TextTransform, TimingFunction, TransformValue, UIElement, UPDATE_CANVAS, UPDATE_VIEWPORT, VARIABLE_SAPARATOR, ViewModeType, VisibilityType, WHEEL, XYZtoLAB, XYZtoRGB, YCrCbtoRGB, blend, brightness, c, checkHueColor, classnames, clone$1 as clone, collectProps, combineKeyArray, contrast, contrastColor, convertMatches, convertMatchesArray, createBlankEditor, createComponent, createComponentList, createDesignEditor, createElement, createElementJsx, createHandlerInstance, debounce, defaultValue, format, formatWithoutAlpha, get, getColorIndexString, getRef, getRootElementInstanceList, getVariable, gradient$1 as gradient, gray, hasVariable, hex, hsl, hue_color, ifCheck, initializeGroupVariables, interpolateRGB, interpolateRGBObject, isArray, isBoolean, isColor, isFunction, isNotString, isNotUndefined, isNotZero, isNumber, isObject, isString, isUndefined, isZero, keyEach, keyMap, keyMapJoin, makeEventChecker, makeRequestAnimationFrame, matches, mix, normalizeWheelEvent, parse, parseGradient, random$1 as random, randomByCount, randomNumber, randomRGBA, recoverVariable, registAlias, registElement, registHandler, registRootElementInstance, renderRootElementInstance, renderToString, replaceElement, retriveAlias, retriveElement, retriveHandler, reverseMatches, rgb, scale, scaleH, scaleHSV, scaleS, scaleV, spreadVariable, start$1 as start, throttle, trim, uuid$1 as uuid, uuidShort$1 as uuidShort, variable$4 as variable }; diff --git a/dist/editor.umd.js b/dist/editor.umd.js index adefc18e3..e5de03e4a 100644 --- a/dist/editor.umd.js +++ b/dist/editor.umd.js @@ -1,61 +1,61 @@ -var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnPropertyDescriptors;var P2=Object.getOwnPropertySymbols;var zte=Object.prototype.hasOwnProperty,Vte=Object.prototype.propertyIsEnumerable;var T2=(C,Yt,di)=>Yt in C?Ate(C,Yt,{enumerable:!0,configurable:!0,writable:!0,value:di}):C[Yt]=di,P=(C,Yt)=>{for(var di in Yt||(Yt={}))zte.call(Yt,di)&&T2(C,di,Yt[di]);if(P2)for(var di of P2(Yt))Vte.call(Yt,di)&&T2(C,di,Yt[di]);return C},Ve=(C,Yt)=>Rte(C,Ote(Yt));var jv=(C,Yt,di)=>{if(!Yt.has(C))throw TypeError("Cannot "+di)};var Pt=(C,Yt,di)=>(jv(C,Yt,"read from private field"),di?di.call(C):Yt.get(C)),zi=(C,Yt,di)=>{if(Yt.has(C))throw TypeError("Cannot add the same private member more than once");Yt instanceof WeakSet?Yt.add(C):Yt.set(C,di)},Vi=(C,Yt,di,ws)=>(jv(C,Yt,"write to private field"),ws?ws.call(C,di):Yt.set(C,di),di),C2=(C,Yt,di,ws)=>({set _(Ed){Vi(C,Yt,Ed,di)},get _(){return Pt(C,Yt,ws)}}),Cd=(C,Yt,di)=>(jv(C,Yt,"access private method"),di);(function(C,Yt){typeof exports=="object"&&typeof module!="undefined"?Yt(exports):typeof define=="function"&&define.amd?define(["exports"],Yt):(C=typeof globalThis!="undefined"?globalThis:C||self,Yt(C.elf={}))})(this,function(C){var Ss,tf,md,yc,vd,bc,xc,el,yd,bd,rf,E2,xd,Gv,nf,I2,tl,os,Lr,_c,_d,Sd,wd,il,Md,Sc;"use strict";function Yt(n,e=()=>!0){let t=n,i=[];do{if(t instanceof Object===!1)break;const s=Object.getOwnPropertyNames(t).filter(e);i.push.apply(i,s)}while(t=Object.getPrototypeOf(t));return i}function di(n,e=0){if(e===0)return n;var t=void 0;return function(i,r,s,a,o){t&&window.clearTimeout(t),t=window.setTimeout(function(){n(i,r,s,a,o)},e||300)}}function ws(n,e){var t=void 0;return function(i,r,s,a,o){t||(t=window.setTimeout(function(){n(i,r,s,a,o),t=null},e||300))}}function Ed(n,e,t){return(...i)=>{t.every(s=>e[s].apply(e,i))&&n.apply(e,i)}}function Hv(n,e){return(...t)=>{window.requestAnimationFrame(()=>{n.apply(e,t)})}}function $c(n,e){Object.keys(n).forEach((t,i)=>{e(t,n[t],i)})}function cf(n,e){return Object.keys(n).map((t,i)=>e(t,n[t],i))}function Uv(n,e,t=""){return cf(n,e).join(t)}function L2(n,e,t){var i=Wv(n[e],e);return Ue(t)?t(i):i}function Wv(n,e){return typeof n=="undefined"?e:n}function Di(n){return typeof n=="undefined"}function $t(n){return!Di(n)}function Dn(n){return typeof n=="boolean"}function ni(n){return typeof n=="string"}function k2(n){return!ni(n)}function Fi(n){return Array.isArray(n)}function Fn(n){return typeof n=="object"&&!Array.isArray(n)&&!_i(n)&&!ni(n)&&n!==null}function Ue(n){return typeof n=="function"}function _i(n){return typeof n=="number"}function Xv(n){return n===0}function so(n){return!Xv(n)}const A2=n=>JSON.parse(JSON.stringify(n));function rt(n){if(!Di(n))return A2(n)}function hf(n){return Object.keys(n).forEach(e=>{Array.isArray(n[e])&&(n[e]=n[e].join(", "))}),n}function vn(...n){const e=[];return n.filter(Boolean).forEach(t=>{Fi(t)?e.push(vn(...t)):Fn(t)?Object.keys(t).filter(i=>Boolean(t[i])).forEach(i=>{e.push(i)}):ni(t)&&e.push(t)}),e.join(" ")}const R2=(n,e,t)=>{t?(n.setAttribute(e,e),n[e]=t):(n.removeAttribute(e),n[e]=t)},O2=(n,e,t)=>{typeof t=="boolean"?R2(n,e,t):n.setAttribute(e,t)},z2=(n,e)=>{n.removeAttribute(e),n[e]=!1},V2=(n,e)=>{n.removeAttribute(e)},D2=(n,e,t)=>{typeof t=="boolean"?z2(n,e):e&&V2(n,e)},F2=(n,e,t,i)=>{t?(!i||t!==i)&&O2(n,e,t):D2(n,e,i)},N2=(n,e={},t={})=>{const i=[];i.push.apply(i,Object.keys(e)),i.push.apply(i,Object.keys(t)),new Set(i).forEach(s=>{F2(n,s,e[s],t[s])})};function B2(n,e){return n.nodeType===window.Node.TEXT_NODE&&n.textContent!==e.textContent||n.nodeName!==e.nodeName}function Yv(n){return(n==null?void 0:n.nodeType)===8?!0:n.nodeType!==window.Node.TEXT_NODE&&n.getAttribute("data-domdiff-pass")==="true"}function j2(n){return n.nodeType!==window.Node.TEXT_NODE&&n.getAttribute("refClass")}function Kv(n){var e={};const t=n.length;for(let i=0;i{var e=n.firstChild;if(!e)return[];var t=[];do t.push(e),e=e.nextSibling;while(e);return t};function Ld(n,e,t={}){t.checkPassed=Ue(t.checkPassed)?t.checkPassed:void 0,t.removedElements=[],n=n.el||n,e=e.el||e;var i=Id(n),r=Id(e),s=Math.max(i.length,r.length);if(s!==0)if(i.length===0&&r.length>0)n.append(...r);else if(i.length>0&&r.length===0)n.textContent="";else for(var a=0;a{ea.delete(e)}),al.delete(n))}function t0(n,e=!0){if(ni(n)===!1)return n;let t=n;return ea.has(n)&&(t=ea.get(n),e&&ea.delete(n)),t}function Tc(n){return ea.has(n)?ea.get(n):n}function i0(n){return ea.has(n)}function r0(n){return Object.entries(n).map(([e,t])=>`${e}=${ta(t)}`).join(" ")}function ao(n={}){Object.keys(n).forEach(e=>{Ad[e]=n[e]})}function n0(n){Ad[n.name]&&(Ad[n.name]=n)}function s0(n,e){Jv[n]=e}function a0(n){return Jv[n]}function o0(n){return Ad[a0(n)||n]}function l0(n){Qv.add(n)}function c0(){return[...Qv]}function U2(n){n0(n),c0().forEach(e=>{e.hmr()})}function h0(n){Object.keys(n).forEach(e=>{Pc[e]=n[e]})}function W2(n){return Pc[n]}function d0(n){return Object.keys(Pc).filter(e=>Boolean(Pc[e])).map(e=>{const t=Pc[e];return new t(n)})}class Ze{constructor(e,t,i){if(typeof e!="string")e instanceof Ze?this.el=e.el:this.el=e;else{var r=document.createElement(e);t&&(r.className=t),i=i||{},Object.assign(r,i),this.el=r}}static create(e,t,i){return new Ze(e,t,i)}static createByHTML(e){var t=Ze.create("div");return t.html(e).firstChild}static makeElementList(e){const t=Ze.create("div");let i=[];Fi(e)||(e=[e]),e=e.filter(Boolean);for(let r=0,s=e.length;r{this.attr(t,e[t])}),this}setAttrNS(e,t="http://www.w3.org/2000/svg"){return Object.keys(e).forEach(i=>{this.attr(i,e[i],t)}),this}setProp(e){return Object.keys(e).forEach(t=>{this.el[t]!=e[t]&&(this.el[t]=e[t])}),this}data(e,t){if(arguments.length===1){const i=this.attr("data-"+e);return t0(i,!1)}else if(arguments.length===2)return this.attr("data-"+e,t);return this}attr(...e){return e.length==1?Ue(this.el.getAttribute)&&this.el.getAttribute(e[0]):(this.el.getAttribute(e[0])!=e[1]&&this.el.setAttribute(e[0],e[1]),this)}attrNS(e,t,i="http://www.w3.org/2000/svg"){return arguments.length==1?this.el.getAttributeNS(i,e):(this.el.getAttributeNS(i,e)!=t&&this.el.setAttributeNS(i,e,t),this)}attrKeyValue(e){return{[this.el.getAttribute(e)]:this.val()}}get attributes(){try{return[...this.el.attributes],this.el.attributes}catch{const i=this.el.attributes.length,r=[];for(var e=0;ethis.el.getAttribute(t))}styles(...e){return e.map(t=>this.el.style[t])}removeAttr(e){return this.el.removeAttribute(e),this}removeStyle(e){return this.el.style.removeProperty(e),this}is(e){return e instanceof Ze?this.el===e.el:this.el===e}isTag(e){return this.el.tagName.toLowerCase()===e.toLowerCase()}closest(e){for(var t=this,i=!1;!(i=t.hasClass(e));)if(t.el.parentNode)t=Ze.create(t.el.parentNode);else return null;return i?t:null}path(){if(!this.el)return[];let e=[this],t=this.parent();if(!t.el)return e;for(;t&&(e.unshift(t),t=t.parent(),!!t.el););return e}get $parent(){return this.parent()}parent(){return Ze.create(this.el.parentNode)}hasParent(){return!!this.el.parentNode}removeClass(...e){return this.el.classList.remove(...e),this}updateClass(e){return this.el.className=e,this}replaceClass(e,t){return this.el.classList.replace(e,t),this}hasClass(e){return this.el.classList?this.el.classList.contains(e):!1}addClass(...e){return this.el.classList.add(...e),this}onlyOneClass(e){var t=this.parent();t.children().forEach(i=>{i.removeClass(e)}),this.addClass(e)}toggleClass(e,t){return this.el.classList.toggle(e,t),this}outerHTML(){return this.isTextNode?this.text():this.el.outerHTML}html(e){try{return typeof e=="undefined"?this.el.innerHTML:(typeof e=="string"?Object.assign(this.el,{innerHTML:e}):this.empty().append(e),this)}catch(t){return console.log(t,e),this}}htmlDiff(e){Ld(this,e)}updateDiff(e,t="div",i={}){Ld(this,Ze.create(t).html(e),i)}updateSVGDiff(e,t="div"){Ld(this,Ze.create(t).html(`${e}`).firstChild.firstChild)}getById(e){return this.el.getElementById(e)}find(e){if(!this.isTextNode)return this.el.querySelector(e)}$(e){var t=this.find(e);return t?Ze.create(t):null}findAll(e){return this.isTextNode?[]:Array.from(this.el.querySelectorAll(e))}$$(e){var t=this.findAll(e);return t.map(i=>Ze.create(i))}empty(){for(;this.el.firstChild;)this.el.removeChild(this.el.firstChild);return this}append(e){return Fi(e)?this.el.append(...e.map(t=>t.el||t)):typeof e=="string"?this.el.appendChild(document.createTextNode(e)):this.el.appendChild(e.el||e),this}prepend(e){return typeof e=="string"?this.el.prepend(document.createTextNode(e)):this.el.prepend(e.el||e),this}prependHTML(e){var t=Ze.create("div").html(e);return this.prepend(t.createChildrenFragment()),t}appendHTML(e){var t=Ze.create("div").html(e);return this.append(t.createChildrenFragment()),t}createChildrenFragment(){const e=this.childNodes;var t=document.createDocumentFragment();return e.forEach(i=>t.appendChild(i.el)),t}appendTo(e){var t=e.el?e.el:e;return t.appendChild(this.el),this}remove(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}removeChild(e){return this.el.removeChild(e.el||e),this}text(e){if(typeof e=="undefined")return this.el.textContent;var t=e;return e instanceof Ze&&(t=e.text()),this.el.textContent!==t&&(this.el.textContent=t),this}css(e,t){if(typeof e!="undefined"&&typeof t!="undefined")e.indexOf("--")===0&&typeof t!="undefined"?this.el.style.setProperty(e,t):this.el.style[e]=t;else if(typeof e!="undefined"){if(typeof e=="string")return window.getComputedStyle(this.el)[e];Object.entries(e).forEach(([i,r])=>{i.indexOf("--")===0&&typeof r!="undefined"?this.el.style.setProperty(i,r):this.el.style[i]=r})}return this}getComputedStyle(...e){var t=window.getComputedStyle(this.el),i={};return e.forEach(r=>{i[r]=t[r]}),i}getStyleList(...e){for(var t={},i=this.el.style.length,r=0;r{t[a]=this.css(a)}),t}cssText(e){return typeof e=="undefined"?this.el.style.cssText:(e!=this.el.tempCssText&&(this.el.style.cssText=e,this.el.tempCssText=e),this)}cssArray(e){return e[0]&&(this.el.style[e[0]]=e[1]),e[2]&&(this.el.style[e[2]]=e[3]),e[4]&&(this.el.style[e[4]]=e[5]),e[6]&&(this.el.style[e[6]]=e[7]),e[8]&&(this.el.style[e[8]]=e[9]),this}cssFloat(e){return parseFloat(this.css(e))}cssInt(e){return parseInt(this.css(e))}px(e,t){return this.css(e,`${t}px`)}rect(){return this.el.getBoundingClientRect()}bbox(){return this.el.getBBox()}isSVG(){return this.el._cachedIsSVG||(this.el._cachedIsSVG={value:this.el.tagName.toLowerCase()==="svg"}),this.el._cachedIsSVG.value}offsetRect(){if(this.isSVG()){const t=this.parent().rect(),i=this.rect();return{x:i.x-t.x,y:i.y-t.y,width:i.width,height:i.height}}const e=this.el;return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}offsetClientRect(){if(this.isSVG()){const i=this.parent().rect(),r=this.rect();return{x:r.x-i.x,y:r.y-i.y,width:r.width,height:r.height}}const e=this.parent().rect(),t=this.rect();return{x:t.x-e.x,y:t.y-e.y,width:t.width,height:t.height}}offset(){var e=this.rect(),t=Ze.getScrollTop(),i=Ze.getScrollLeft();return{top:e.top+t,left:e.left+i}}offsetLeft(){return this.offset().left}offsetTop(){return this.offset().top}position(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.rect()}size(){return[this.width(),this.height()]}width(){return this.el.offsetWidth||this.rect().width}contentWidth(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}height(){return this.el.offsetHeight||this.rect().height}contentHeight(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}val(e){if(typeof e=="undefined")return this.el.value;if(typeof e!="undefined"){var t=e;e instanceof Ze&&(t=e.val()),this.el.value=t}return this}matches(e){return this.el&&this.el.matches?this.el.matches(e)?this:this.parent().matches(e):null}get value(){return this.el.value}get naturalWidth(){return this.el.naturalWidth}get naturalHeight(){return this.el.naturalHeight}get files(){return this.el.files?[...this.el.files]:[]}get isTextNode(){return this.el.nodeType===3}realVal(){switch(this.el.nodeType){case"INPUT":var e=this.attr("type");return e=="checkbox"||e=="radio"?this.checked():this.el.value;case"SELECT":case"TEXTAREA":return this.el.value}return""}int(){return parseInt(this.val(),10)}float(){return parseFloat(this.val())}show(e="block"){return this.el.style.display=e!="none"?e:"block",this}hide(){return this.el.style.display="none",this}isHide(){return this.el.style.display==="none"}isShow(){return!this.isHide()}toggle(e){var t=this.isHide();return arguments.length==1?e?this.show():this.hide():t?this.show():this.hide()}get totalLength(){return this.el.getTotalLength()}scrollIntoView(){this.el.scrollIntoView()}addScrollLeft(e){return this.el.scrollLeft+=e,this}addScrollTop(e){return this.el.scrollTop+=e,this}setScrollTop(e){return this.el.scrollTop=e,this}setScrollLeft(e){return this.el.scrollLeft=e,this}scrollTop(){return this.el===document.body?Ze.getScrollTop():this.el.scrollTop}scrollLeft(){return this.el===document.body?Ze.getScrollLeft():this.el.scrollLeft}scrollHeight(){return this.el.scrollHeight}scrollWidth(){return this.el.scrollWidth}on(e,t,i,r){return this.el.addEventListener(e,t,i,r),this}off(e,t){return this.el.removeEventListener(e,t),this}getElement(){return this.el}createChild(e,t="",i={},r={}){let s=Ze.create(e,t,i);return s.css(r),this.append(s),s}get firstChild(){return Ze.create(this.el.firstElementChild)}get first(){return Ze.create(this.el.firstChild)}children(){var e=this.el.firstElementChild;if(!e)return[];var t=[];do t.push(Ze.create(e)),e=e.nextElementSibling;while(e);return t}get childNodes(){const e=[];if(this.el.hasChildNodes()){const t=this.el.childNodes;for(let i=0;i{r==0?t.moveTo(i[0],i[1]):t.lineTo(i[0],i[1])}),t.stroke(),t.fill(),t.closePath()}drawCircle(e,t,i){var r=this.context();r.beginPath(),r.arc(e,t,i,0,2*Math.PI),r.stroke(),r.fill()}drawText(e,t,i){this.context().fillText(i,e,t)}fullscreen(){var e=this.el;e.requestFullscreen?e.requestFullscreen():e.wekitRequestFullscreen&&e.wekitRequestFullscreen()}toggleFullscreen(){this.el===document.fullscreenElement?document.exitFullscreen():this.fullscreen()}}class uf{constructor(e){this.id=kd(),this.cachedCallback={},this.callbacks={},this.editor=e}getCallbacks(e){return this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e]}setCallbacks(e,t=[]){this.callbacks[e]=t}debug(...e){this.editor&&this.editor.context.config.get("debug.mode")&&console.debug(...e)}on(e,t,i,r=0,s=0,a=!1,o=!1,l=[],c=!1){var h=t;return r>0?h=di(t,r):s>0&&(h=ws(t,s)),l.length&&(h=Ed(h,i,l)),c&&(h=Hv(h,i)),this.getCallbacks(e).push({event:e,callback:h,context:i,originalCallback:t,enableAllTrigger:a,enableSelfTrigger:o}),()=>{this.off(e,t)}}off(e,t){this.debug("off message event",e),arguments.length==1?this.setCallbacks(e):arguments.length==2&&this.setCallbacks(e,this.getCallbacks(e).filter(i=>i.originalCallback!==t))}offAll(e){Object.keys(this.callbacks).forEach(t=>{this.setCallbacks(t,this.getCallbacks(t).filter(i=>i.context!==e))}),this.debug("off all message",e.sourceName)}getCachedCallbacks(e){return this.getCallbacks(e)}sendMessage(e,t,...i){this.sendMessageList(e,[[t,...i]])}runMessage(e,t){const i=e.callback.apply(e.context,t);if($t(i)){if(i===!1)return;if(Ue(i)){i();return}}}sendMessageList(e,t=[]){window.Promise.resolve().then(()=>{t.forEach(([i,...r])=>{var s=this.getCachedCallbacks(i);if(s&&s.length){const a=s.filter(l=>!l.enableSelfTrigger).filter(l=>l.enableAllTrigger||l.originalCallback.source!==e);let o=a.length;for(;o--;){const l=a[o];this.runMessage(l,r)}}else this.debug(`message event ${i} is not exist.`)})})}nextSendMessage(e,t,...i){window.Promise.resolve().then(()=>{t(...i)})}triggerMessage(e,t,...i){window.Promise.resolve().then(()=>{var r=this.getCachedCallbacks(t);r?r.filter(a=>a.originalCallback.source===e).forEach(a=>{a.callback.apply(a.context,i)}):this.debug(t," is not valid event")})}emit(e,...t){Ue(e)?e(...t):Fi(e)?this.sendMessageList(this.source,e):this.sendMessage(this.source,e,...t)}nextTick(e){this.nextSendMessage(this.source,e)}trigger(e,...t){Ue(e)?e(...t):this.triggerMessage(this.source,e,...t)}}const pf=/^@magic:([a-zA-Z][a-zA-Z0-9]*)[\W]{1}(.*)*$/g,ff="@magic:",ia="|",u0=/(([\$a-z_\-]+)\([^\(\)]*\)|([a-z_\-]+))/gi,gf="(",p0=")",Rd={KEYWORD:"keyword",FUNCTION:"function",VALUE:"value"};class Nn{constructor(e){this.context=e.context,this.originalMethod=e.originalMethod,this.method=e.method,this.args=e.args,this.pipes=e.pipes,this.keys=e.keys,this.__cache=new Map}setCache(e,t){this.__cache.set(e,t)}hasCache(e){return this.__cache.has(e)}getCache(e){return this.__cache.get(e)}hasKeyword(e){if(this.hasCache(e))return this.getCache(e);let t=!1;return this.pipes.forEach(i=>{switch(i.type){case Rd.KEYWORD:i.value===e&&(t=!0);break}}),this.setCache(e,t),t}hasFunction(e){if(this.hasCache(e))return this.getCache(e);let t=!!this.getFunction(e);return this.setCache(e,t),t}getFunction(e){return this.functions.find(t=>t.func===e)}getFunctionList(e){return this.functions.filter(t=>t.func===e)}get originalCallback(){return this.context[this.originalMethod]}get keywords(){return this.keys[Rd.KEYWORD].map(e=>e.value)}get functions(){return this.keys[Rd.FUNCTION]}get values(){return this.keys[Rd.VALUE].map(e=>e.value)}execute(...e){return this.originalCallback.call(this.context,...e)}executeWithContext(e,...t){return this.originalCallback.call(e,...t)}static make(e,...t){return`${ff}${e} ${t.join(ia)}`}static check(e){return e.match(pf)!==null}static parse(e,t={}){const i=e.match(pf);if(!i)return;const r=i[0].split(ff)[1].split(ia).map(d=>d.trim());let[s,...a]=r;const[o,...l]=s.split(" "),c=a.map(d=>this.parsePipe(d)).filter(d=>d.value),h={function:[],keyword:[],value:[]};return c.forEach(d=>{d.type==="function"?h.function.push(d):d.type==="keyword"?h.keyword.push(d):h.value.push(d)}),new Nn({context:t,originalMethod:e,method:o,args:l,pipes:c,keys:h})}static parsePipe(e){const t=e.match(u0);if(!t)return{type:"value",value:e};const[i]=t;if(i.includes(gf)){const[r,s]=i.split(gf),[a]=s.split(p0);return{type:"function",value:i,func:r,args:a.split(",").map(o=>o.trim()).filter(Boolean)}}return{type:"keyword",value:t[0]}}}const f0=(n,e=ia)=>` ${e} ${n}`,X2="ME@",g0=(...n)=>n.join(ia),mf=(...n)=>X2+g0(...n),Y2=mf,K2=mf,Od=":",m0=" ",q2={},Rt=(...n)=>{var e=n.join(Od);return(...t)=>{const[i,...r]=t;return Nn.make("domevent",[e,i].join(" "),...r)}},zd=(...n)=>Nn.make("subscribe",...n),Z2=(...n)=>Nn.make("callback",...n),J2=(...n)=>Nn.make("observer",...n),Ht=(n,e=ia)=>f0(n,e),ol=(n,e=ia)=>Ht(`after(${n})`,e),Q2=(n,e=ia)=>Ht(`before(${n})`,e),Qe=Ht,ew=Ht,tw=Ht("ArrowUp"),iw=Ht("ArrowDown"),rw=Ht("ArrowLeft"),nw=Ht("ArrowRight"),ra=Ht("Enter"),sw=Ht("Space"),ll=Ht("Escape"),aw=Ht("Backspace"),v0=Ht("Delete"),ow=Ht("Equal"),lw=Ht("Minus"),cw=Ht("BracketRight"),hw=Ht("BracketLeft"),dw=Ht("isAltKey"),uw=Ht("isShiftKey"),pw=Ht("isMetaKey"),fw=Ht("isCtrlKey"),gw=Ht("hasMouse"),mw=Ht("hasTouch"),vw=Ht("hasPen"),yw=Ht("self"),an=Ht("isMouseLeftButton"),bw=Ht("isMouseRightButton"),xw=Ht("fit"),_w=Ht("passive"),It=Ht("domdiff"),Ft=(n=100)=>Ht(`debounce(${n})`),vf=(n=300)=>Ht(`delay(${n})`),Sw=Ft(1e3),oo=(n=100)=>Ht(`throttle(${n})`),y0=Ht("allTrigger()"),b0=Ht("selfTrigger()"),ww=Ht("frame()"),Mw=n=>Ht(`params(${ta(n)})`),$w=Ht("capture()"),St=ol("preventDefault"),Bn=ol("stopPropagation"),U=zd,Vd=(...n)=>zd(...n,y0),Me=(...n)=>zd(...n,b0),Qt=(n,...e)=>zd(`config:${n}`,...e),x0=Z2,Pw=x0("requestAnimationFrame"),Tw=J2,hs=Rt,se=Rt("click"),cl=Rt("dblclick"),Cw=Rt("mousedown"),Ew=Rt("mouseup"),Iw=Rt("mousemove"),yf=Rt("mouseover"),Lw=Rt("mouseout"),kw=Rt("mouseenter"),_0=Rt("mouseleave"),Aw=Rt("touchstart"),Rw=Rt("touchmove"),Ow=Rt("touchend"),Cc=Rt("keydown"),Pr=Rt("keyup"),zw=Rt("keypress"),Vw=Rt("drag"),on=Rt("dragstart"),Yr=Rt("drop"),Kr=Rt("dragover"),Dw=Rt("dragenter"),Fw=Rt("dragleave"),Nw=Rt("dragexit"),Bw=Rt("dragout"),S0=Rt("dragend"),w0=Rt("contextmenu"),yn=Rt("change"),fi=Rt("input"),bf=Rt("focus"),Ec=Rt("focusin"),na=Rt("focusout"),xf=Rt("blur"),M0=Rt("paste"),$0=Rt("resize"),jw=Rt("scroll"),Gw=Rt("submit"),qe=(...n)=>hs("pointerdown")(...n)+an,Ic=hs("pointerover"),Hw=hs("pointerenter"),Lc=hs("pointerout"),lo=hs("pointermove"),P0=hs("pointerup"),T0=hs("change","input"),_f=hs("wheel","mousewheel","DOMMouseScroll"),Uw=Rt("animationstart"),Ww=Rt("animationend"),Xw=Rt("animationiteration"),Yw=Rt("transitionstart"),C0=Rt("transitionend"),Kw=Rt("transitionrun"),qw=Rt("transitioncancel"),Sf=hs("doubletab"),ve=(n="$el")=>Nn.make("load",n),Zw=n=>q2[n]||"",E0=n=>function(){return this.prevState[n]!=this.state[n]},I0=()=>!0,$e=(n="$el")=>Nn.make("bind",n);function wf(n){let e=n.deltaX,t=n.deltaY;return e===0&&n.shiftKey&&([t,e]=[e,t]),n.deltaMode===window.WheelEvent.DOM_DELTA_LINE?t*=8:n.deltaMode===window.WheelEvent.DOM_DELTA_PAGE&&(t*=24),[L0(e,24),L0(t,24),0]}function L0(n,e){return Math.sign(n)*Math.min(e,Math.abs(n))}var Mf={addDomEvent(n,e,t,i=!1){n&&n.addEventListener(e,t,i)},removeDomEvent(n,e,t){n&&n.removeEventListener(e,t)},pos(n){return n.touches&&n.touches[0]?n.touches[0]:n},posXY(n){var e=this.pos(n);return{x:e.pageX,y:e.pageY}}};class kc{constructor(e,t={}){this.context=e,this.options=t}initialize(){}load(){}refresh(){}render(){}getRef(e){return this.context.getRef(e)}run(){}destroy(){}}const Jw=(n,e)=>{if(_i(e))switch(n){case"width":case"height":case"top":case"left":case"right":case"bottom":return e+"px"}return e},Qw=(n,e,t,i=!1)=>{if(e==="cssText"){n.cssText(t);return}else if(e==="style"){if(typeof t!="string"){const r={};if(Object.entries(t).forEach(([s,a])=>{r[s]=Jw(s,a)}),i){const s=Object.keys(r).map(a=>`${a}:${r[a]};`).join("");n.attr("style",s)}else n.css(r)}return}else if(e==="class"){Array.isArray(t)?n.updateClass(vn(...t)):n.updateClass(vn(t));return}else if(e==="callback"&&typeof t=="function"){t();return}typeof t=="undefined"?n.removeAttr(e):n.el.nodeName==="TEXTAREA"&&e==="value"||e==="text"||e==="textContent"?n.text(t):e==="innerHTML"||e==="html"?n.html(t):e==="htmlDiff"?n.updateDiff(t):e==="svgDiff"?n.updateSVGDiff(t):e==="value"?n.val(t):n.attr(e,t)},$f={};class eM extends kc{async initialize(){$f[this.context.sourceName]||($f[this.context.sourceName]=this.context.filterMethodes("bind"))}getBindMethods(){return $f[this.context.sourceName]||[]}async bindData(...e){const t=this.getBindMethods();if(!(t!=null&&t.length))return;const i=t==null?void 0:t.filter(r=>e.length?e.indexOf(r.args[0])>-1:!0);await Promise.all(i==null?void 0:i.map(async r=>{let s=this.getRef(`${r.keywords[0]}`),a=I0;typeof s=="string"&&s!==""?a=E0(s):typeof s=="function"&&(a=s);const o=r.args[0];let l=this.context.refs[o];const c=typeof a=="function"&&a.call(this.context);if(l&&c){const u=await r.executeWithContext(this.context,...e);if(!u)return;const p=Object.keys(u);for(var h=0,d=p.length;hthis.parseCallback(i))}destroy(){this.context.notEventRedefine||this.removeCallbackAll()}getCallback(e){return this.context[e]}removeCallbackAll(){this.getBindings().forEach(e=>{this.removeCallback(e)}),this.initBindings()}removeCallback({requestId:e}){window.cancelAnimationFrame(e)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}makeCallback(e){const t=e.callback,i=r=>{t(r),e.requestId=window.requestAnimationFrame(i)};return()=>{e.requestId=window.requestAnimationFrame(i)}}addCallback(e,t){const i=this.makeCallback(e,t);this.addBinding(e),i()}bindingCallback(e,t){var l,c;const i={eventName:e.args[0],callback:t};i.codes=[],i.checkMethodList=[];const r=e.getFunction("debounce"),s=e.getFunction("throttle");if(r){var a=+(((l=r.args)==null?void 0:l[0])||0);i.callback=di(t,a)}else if(s){var o=+(((c=s.args)==null?void 0:c[0])||0);i.callback=ws(t,o)}e.keywords.forEach(h=>{const d=h;this.getCallback(d)?i.checkMethodList.push(d):i.codes.push(d.toLowerCase())}),this.addCallback(i,e)}parseCallback(e){const t=this.context;var i=e.args;if(i){var r=t[e.originalMethod].bind(t);this.bindingCallback(e,r)}}}const iM={touchstart:!0,touchmove:!0,mousedown:!0,mouseup:!0,mousemove:!0},rM={doubletab:"touchend"},nM={doubletab:!0},sM={self(n){return n&&n.$dt&&n.$dt.is(n.target)},isAltKey(n){return n.altKey},isCtrlKey(n){return n.ctrlKey},isShiftKey(n){return n.shiftKey},isMetaKey(n){return n.metaKey||n.key=="Meta"||n.code.indexOf("Meta")>-1},isMouseLeftButton(n){return n.buttons===1},isMouseRightButton(n){return n.buttons===2},hasMouse(n){return n.pointerType==="mouse"},hasTouch(n){return n.pointerType==="touch"},hasPen(n){return n.pointerType==="pen"},preventDefault(n){return n.preventDefault(),!0},stopPropagation(n){return n.stopPropagation(),!0}};class aM extends kc{initialize(){var e,t;this.destroy(),!(this._domEvents&&this.context.notEventRedefine)&&((!this._domEvents||this._domEvents.length===0||this._bindings.length===0)&&(this._domEvents=this.context.filterMethodes("domevent")),!((e=this._bindings)!=null&&e.length)&&((t=this._domEvents)==null?void 0:t.length)&&this._domEvents.forEach(i=>this.parseDomEvent(i)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}getCallback(e){return this.context[e]||sM[e]}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}removeDomEvent({eventName:e,dom:t,callback:i}){Mf.removeDomEvent(t,e,i)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}matchPath(e,t){return e?e.matches(t)?e:this.matchPath(e.parentElement,t):null}hasDelegate(e,t){return this.matchPath(e.target||e.srcElement,t.delegate)}makeCallback(e,t,i){return e.delegate?this.makeDelegateCallback(e,t,i):this.makeDefaultCallback(e,t,i)}makeDefaultCallback(e,t,i){return r=>{var s=this.runEventCallback(r,e,t,i);if($t(s))return s}}makeDelegateCallback(e,t,i){return r=>{const s=this.hasDelegate(r,e);if(s){r.$dt=Ze.create(s);var a=this.runEventCallback(r,e,t,i);if($t(a))return a}}}runEventCallback(e,t,i,r){const s=this.context;if(e.xy=Mf.posXY(e),t.beforeMethods.length&&t.beforeMethods.every(o=>this.getCallback(o.target).call(s,e,o.param)),this.checkEventType(e,t)){var a=r(e,e.$dt,e.xy);return a!==!1&&t.afterMethods.length&&t.afterMethods.forEach(o=>this.getCallback(o.target).call(s,e,o.param)),a}}checkEventType(e,t){const i=this.context;var r=!0;t.codes.length&&(r=(e.code?t.codes.indexOf(e.code.toLowerCase())>-1:!1)||(e.key?t.codes.indexOf(e.key.toLowerCase())>-1:!1));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(a=>{var o=this.getCallback(a);return Ue(o)&&o?o.call(i,e):$t(o)?!!o:!0})),r&&s}getDefaultDomElement(e){const t=this.context;let i;return e?i=t.refs[e]||t[e]||window[e]:i=t.el||t.$el||t.$root,i instanceof Ze?i.getElement():i}getRealEventName(e){return rM[e]||e}getCustomEventName(e){return nM[e]?e:""}getDefaultEventObject(e,t,i,r,s){var f,g;const a={eventName:this.getRealEventName(e),customEventName:this.getCustomEventName(e),callback:s},[,,...o]=r.args;a.dom=this.getDefaultDomElement(t),a.delegate=o.join(m0),a.beforeMethods=[],a.afterMethods=[],a.codes=[],a.checkMethodList=[];const l=r.getFunction("debounce"),c=r.getFunction("throttle");if(l){var h=+(((f=l.args)==null?void 0:f[0])||0);a.callback=di(s,h)}else if(c){var d=+(((g=c.args)==null?void 0:g[0])||0);a.callback=ws(s,d)}const u=r.getFunctionList("after"),p=r.getFunctionList("before");return u.length&&u.forEach(m=>{var v=m.args[0].split(" "),[b,_]=v;a.afterMethods.push({target:b,param:_})}),p.length&&p.forEach(m=>{var v=m.args[0].split(" "),[b,_]=v;a.beforeMethods.push({target:b,param:_})}),r.keywords.forEach(m=>{const v=m;this.getCallback(v)?a.checkMethodList.push(v):a.codes.push(v.toLowerCase())}),a}addDomEvent(e,t,i){e.callback=this.makeCallback(e,t,i),this.addBinding(e);var r=!1;t.hasKeyword("capture")&&(r=!0),iM[e.eventName]&&(r={passive:!0,capture:r}),e.dom&&Mf.addDomEvent(e.dom,e.eventName,e.callback,r)}makeCustomEventCallback(e,t,i){var a;if(e.customEventName==="doubletab"){var r=300,s=t.getFunction("delay");return s&&(r=+(((a=s.args)==null?void 0:a[0])||0)),(...o)=>{this.doubleTab?(window.performance.now()-this.doubleTab.time{var r=i.split(Od);t.push.apply(t,r)}),t}parseDomEvent(e){const t=this.context;var i=e.args;if(i){var r=this.getEventNames(i[0]),s=t[e.originalMethod].bind(t);for(let a=0,o=r.length;athis.parseObserver(i)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}disconnectObserver(e){e==null||e.disconnect()}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}addObserver(e){this.addBinding(e)}getDefaultDomElement(e){const t=this.context;let i;return e?i=t.refs[e]||t[e]||window[e]:i=t.el||t.$el||t.$root,i instanceof Ze?i.getElement():i}createObserver(e,t){var c;const[i,r]=e.args||["intersection"],s=this.getDefaultDomElement(r),a=e.getFunction("params"),o=Tc((c=a==null?void 0:a.args)==null?void 0:c[0]);let l;switch(i){case"intersection":o.root&&(o.root=this.getDefaultDomElement(o.root)),l=new window.IntersectionObserver(t,o||{}),l.observe(s);break;case"mutation":l=new window.MutationObserver(t),l.observe(s,o||{attributes:!0,characterData:!0,childList:!0});break;case"performance":l=new window.PerformanceObserver(t),l.observe(o||{entryTypes:["paint"]});break}return l}bindingObserver(e,t){this.addObserver(this.createObserver(e,t))}parseObserver(e){const t=this.context;var i=t[e.originalMethod].bind(t);this.bindingObserver(e,i)}}class lM extends kc{initialize(){var e,t;this.destroy(),this._callbacks||(this._callbacks=this.context.filterMethodes("subscribe")),!((e=this._bindings)!=null&&e.length)&&((t=this._callbacks)==null?void 0:t.length)&&this._callbacks.forEach(i=>this.parseSubscribe(i))}destroy(){this.context.notEventRedefine||this.context.$store.offAll(this.context)}getCallback(e){return this.context[e]}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}createLocalCallback(e,t){var i=t.bind(this.context);return i.displayName=`${this.context.sourceName}.${e}`,i.source=this.context.source,i}parseSubscribe(e){var m,v;const t=e.args.join(" "),i=[],r=[];let s=0,a=0,o=!1,l=!1,c=!1;const h=e.getFunction("debounce"),d=e.getFunction("throttle"),u=e.getFunction("allTrigger"),p=e.getFunction("selfTrigger"),f=e.getFunction("frame");h&&(s=+(((m=h.args)==null?void 0:m[0])||0)),d&&(a=+(((v=d.args)==null?void 0:v[0])||0)),u&&(o=!0),p&&(l=!0),f&&(c=!0),e.keywords.forEach(b=>{const _=b;this.context[_]?i.push(_):r.push(_)});const g=this.context[e.originalMethod];[...r,t].filter(Boolean).forEach(b=>{var _=this.createLocalCallback(b,g);this.context.$store.on(b,_,this.context,s,a,o,l,i,c)}),this.addBinding(e)}}h0({BindHandler:eM,CallbackHandler:tM,DomEventHandler:aM,ObserverHandler:oM,StoreHandler:lM});const Ac="ref",k0=Ze.create("div"),A0=`[${Ac}]`,Pf="refclass",cM=`[${Pf}]`,R0=[],Vv=class{constructor(e,t){zi(this,rf);zi(this,xd);zi(this,nf);zi(this,Ss,{});zi(this,tf,{});zi(this,md,0);zi(this,yc,void 0);zi(this,vd,void 0);zi(this,bc,void 0);zi(this,xc,{});zi(this,el,{});zi(this,yd,!1);zi(this,bd,[]);this.refs={},this.children={},this.id=df(),this.initializeProperty(e,t),this.handlers=this.initializeHandler(),this.initComponents()}get __timestamp(){return Pt(this,md)}get timestamp(){return Pt(this,vd)}set timestamp(e){Vi(this,vd,e)}get target(){return this.$el.el}checkProps(e={}){return e}initializeProperty(e,t={}){this.opt=e||{},this.parent=this.opt,this.source=df(),this.sourceName=this.constructor.name,this.props=new Proxy(Pt(this,xc),{get:(i,r)=>Cd(this,nf,I2).call(this,r),set:(i,r)=>{throw new Error(`${r} is readonly`)}}),Cd(this,xd,Gv).call(this,t)}hasProp(e){return Pt(this,bd).includes(e==null?void 0:e.toUpperCase())}setServer(e=!0){Vi(this,yd,e)}get isServer(){var e;return((e=this.parent)==null?void 0:e.isServer)||Pt(this,yd)}initComponents(){this.childComponents=this.components()}initializeHandler(){return d0(this)}initState(){return{}}setState(e={},t=!0){Vi(this,tf,Pt(this,Ss)),Vi(this,Ss,Object.assign({},Pt(this,Ss),e)),t&&this.load()}toggleState(e,t=!0){this.setState({[e]:!Pt(this,Ss)[e]},t)}apply(e){return r0(e)}_reload(e,t=null){t&&this.render(t),Cd(this,xd,Gv).call(this,e),Vi(this,Ss,{}),this.setState(this.initState(),!1),this.refresh(!0)}checkLoad(e){window.requestAnimationFrame(()=>{this.render(e)})}get state(){return Pt(this,Ss)}get isPreLoaded(){return!0}async render(e){if(!this.isPreLoaded){this.checkLoad(e);return}const t=this.template(),i=this.parseTemplate(t);return this.$el?this.$el.htmlDiff(i):(this.$el=i,this.refs.$el=this.$el,e&&e.append(this.$el)),await this.load(),this.afterRender(),this}get html(){return this.$el.outerHTML()}initialize(){Vi(this,Ss,this.initState())}afterRender(){}components(){return P({},this.parent.childComponents)}getRef(...e){const t=e.join("");return this.refs[t]}refreshElementReference(e,t){for(var i=e.$$(A0),r=0,s=i.length;rthis._getComponentInfo(i)).filter(i=>t.length===0?!0:t.includes(i.refClass))}_getComponentInfo(e){const t=e.attr(Pf),i=this.getEventMachineComponent(t);if(i){let r=this.parsePropertyInfo(e),s=e.attr(Ac);return{$dom:e,refClass:t,props:r,refName:s||r.ref,component:i}}else return{refClass:t,notUsed:!0,$dom:e}}getComponentInfoList(e){if(!e)return R0;let t=e.$$(cM).filter(i=>i.path().filter(r=>r.attr(Pf)).length===1);return t.length?t.map(i=>this._getComponentInfo(i)):R0}async parseComponent(){const e=this.$el,t=this.getComponentInfoList(e);!t.length||(await Promise.all(t.map(async i=>{i.notUsed?(i.$dom.remove(),console.warn(`${i.refClass} is not used.`)):await this.renderComponent(i)})),$c(this.children,(i,r)=>{r.timestamp!==this.__timestamp&&r.clean()}))}clean(){if(this.$el&&!this.$el.hasParent())return $c(this.children,(e,t)=>{Ue(t==null?void 0:t.clean)&&t.clean()}),this.destroy(),!0}refresh(){this.load()}async _afterLoad(){Cd(this,rf,E2).call(this),this.runHandlers("initialize"),await this.bindData(),await this.parseComponent()}async makeLoadAction(e){const[t,...i]=e.args;let r=e.hasKeyword("domdiff");const s=this.refs[t];if(s){const a=await e.execute(...i),o=this.parseTemplate(a,!0);r?s.htmlDiff(o):s.html(o),this.refreshElementReference(s,t)}}async load(...e){Pt(this,yc)||Vi(this,yc,this.filterMethodes("load"));const t=Pt(this,yc).filter(i=>e.length===0?!0:i.args[0]===e[0]);await Promise.all(t.map(async i=>{await this.makeLoadAction(i)})),await this._afterLoad()}async runHandlers(e="run",...t){await Promise.all(this.handlers.filter(i=>i[e]).map(async i=>{await i[e](...t)}))}async bindData(...e){await this.runHandlers("bindData",...e)}template(){return null}eachChildren(e){!Ue(e)||Object.keys(this.children).forEach(t=>{e(this.children[t])})}hmr(){this.created(),this.initialize(),this.rerender(),this.eachChildren(e=>{e.hmr()})}rerender(){var e=this.$el.parent();this.destroy(),this.render(e)}destroy(){this.eachChildren(e=>{e.destroy()}),this.runHandlers("destroy"),this.$el&&this.$el.remove(),this.$el=null,this.refs={},this.children={}}collectMethodes(e=!1){return(!Pt(this,bc)||e)&&Vi(this,bc,Yt(this,t=>Nn.check(t)).map(t=>Nn.parse(t,this))),Pt(this,bc)}filterMethodes(e,t=!1){return this.collectMethodes(t).filter(i=>i.method===e)}findChildren(e){return this.props.contentChildren.filter(t=>t.component===e)}getChildContent(e,t=""){var i;return((i=this.props.contentChildren.find(e))==null?void 0:i.props.content)||t}};let Tf=Vv;Ss=new WeakMap,tf=new WeakMap,md=new WeakMap,yc=new WeakMap,vd=new WeakMap,bc=new WeakMap,xc=new WeakMap,el=new WeakMap,yd=new WeakMap,bd=new WeakMap,rf=new WeakSet,E2=function(){C2(this,md)._++},xd=new WeakSet,Gv=function(e){Vi(this,xc,this.checkProps(e)),Vi(this,el,{}),Object.keys(e).forEach(t=>{Pt(this,el)[t.toUpperCase()]=t}),Vi(this,bd,Object.keys(Pt(this,el)))},nf=new WeakSet,I2=function(e){return Pt(this,xc)[Pt(this,el)[e.toUpperCase()]]};const sf=class extends Tf{constructor(t,i={}){super(t,i);zi(this,tl,void 0);i.store?Vi(this,tl,i.store):Vi(this,tl,new uf),this.created(),this.initialize()}currentContext(){return this.contexts[this.contexts.length-1]}setStore(t){Vi(this,tl,t)}get $store(){return Pt(this,tl)||this.parent.$store}async created(){}createLocalCallback(t,i){var r=i.bind(this);return r.displayName=`${this.sourceName}.${t}`,r.source=this.source,r}emit(t,...i){this.$store.source=this.source,this.$store.sourceContext=this,this.$store.emit(t,...i)}nextTick(t,i=0){window.setTimeout(()=>{this.$store.nextTick(t)},i)}trigger(t,...i){this.$store.source=this.source,this.$store.trigger(t,...i)}broadcast(t,...i){Object.keys(this.children).forEach(r=>{this.children[r].trigger(t,...i),this.children[r].broadcast(t,...i)})}on(t,i,r=0,s=0,a=!1,o=!1,l=!1){this.$store.on(t,i,this.source,r,s,a,o,[],l)}off(t,i){this.$store.off(t,i,this.source)}subscribe(t,i=0,r=0){const s=`subscribe.${kd()}`,a=this.createLocalCallback(s,t);return this.$store.on(s,a,this,i,r,!1,!0),s}createFunctionComponent(t,i,r=sf){return super.createFunctionComponent(t,i,r)}static createElementInstance(t,i){if(t.__proto__.name===""){class r extends sf{template(){return t.call(this,this.props)}}return new r(i,i)}else return new t(i,i)}};let ds=sf;tl=new WeakMap;const hl=(n,e)=>{const t=Ze.create(e.container||document.body),i=ds.createElementInstance(n,e);return i.render(t),l0(i),i};async function hM(n,e){const t=ds.createElementInstance(n,e);return t.setServer(!0),(await t.render()).html}function dM(n,e=""){var t=n||{};return Object.keys(t).filter(i=>$t(t[i])).map(i=>`${i}: ${t[i]}`).join(";"+e)}function uM(n){return Object.keys(n||{}).map(t=>t==="class"&&Fn(n[t])?`${t}="${vn(n[t])}"`:t==="style"&&Fn(n[t])?`${t}="${dM(n[t])}"`:Dn(n[t])||Di(n[t])||n[t]==="undefined"?n[t]?t:"":`${t}="${n[t]}"`).join(" ")}function W(n,e={},t=[]){t=t.flat(1/0).join("");let i;i=Object.keys(e).length?ta(e):"";const r=e.ref?`ref="${e.ref}"`:"";return`${t}`}function Rc(...n){return n.map(e=>{let t,i={},r=[];return ni(e)?t=e:Fi(e)&&([t,i={},r=[]]=e),r.length?W(t,i,Rc(r)):W(t,i)}).join(` -`)}function dl(n,e,t=[]){return t=t.flat(1/0),`<${n} ${uM(e)}>${t.join(" ")}`}function D(n,e={},...t){if(t=t.flat(1/0),n===Yi)return t;if(e=e||{},typeof n!="string"){const i=n.name;return ao({[i]:n}),W(i,e,t)}else return dl(n,e,t)}const Yi=new Object;var Dte="",Fte="",Ms=1e-6,Ar=typeof Float32Array!="undefined"?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var n=0,e=arguments.length;e--;)n+=arguments[e]*arguments[e];return Math.sqrt(n)});function O0(){var n=new Ar(9);return Ar!=Float32Array&&(n[1]=0,n[2]=0,n[3]=0,n[5]=0,n[6]=0,n[7]=0),n[0]=1,n[4]=1,n[8]=1,n}function Cf(n,e,t){var i=e[0],r=e[1],s=e[2],a=e[3],o=e[4],l=e[5],c=e[6],h=e[7],d=e[8],u=t[0],p=t[1],f=t[2],g=t[3],m=t[4],v=t[5],b=t[6],_=t[7],x=t[8];return n[0]=u*i+p*a+f*c,n[1]=u*r+p*o+f*h,n[2]=u*s+p*l+f*d,n[3]=g*i+m*a+v*c,n[4]=g*r+m*o+v*h,n[5]=g*s+m*l+v*d,n[6]=b*i+_*a+x*c,n[7]=b*r+_*o+x*h,n[8]=b*s+_*l+x*d,n}function pM(n,e){return n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=1,n[5]=0,n[6]=e[0],n[7]=e[1],n[8]=1,n}function fM(n,e){var t=Math.sin(e),i=Math.cos(e);return n[0]=i,n[1]=t,n[2]=0,n[3]=-t,n[4]=i,n[5]=0,n[6]=0,n[7]=0,n[8]=1,n}function gM(n,e){return n[0]=e[0],n[1]=0,n[2]=0,n[3]=0,n[4]=e[1],n[5]=0,n[6]=0,n[7]=0,n[8]=1,n}function Ki(){var n=new Ar(16);return Ar!=Float32Array&&(n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[11]=0,n[12]=0,n[13]=0,n[14]=0),n[0]=1,n[5]=1,n[10]=1,n[15]=1,n}function sa(n,e,t,i,r,s,a,o,l,c,h,d,u,p,f,g){var m=new Ar(16);return m[0]=n,m[1]=e,m[2]=t,m[3]=i,m[4]=r,m[5]=s,m[6]=a,m[7]=o,m[8]=l,m[9]=c,m[10]=h,m[11]=d,m[12]=u,m[13]=p,m[14]=f,m[15]=g,m}function mM(n){return n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n}function z0(n,e){if(n===e){var t=e[1],i=e[2],r=e[3],s=e[6],a=e[7],o=e[11];n[1]=e[4],n[2]=e[8],n[3]=e[12],n[4]=t,n[6]=e[9],n[7]=e[13],n[8]=i,n[9]=s,n[11]=e[14],n[12]=r,n[13]=a,n[14]=o}else n[0]=e[0],n[1]=e[4],n[2]=e[8],n[3]=e[12],n[4]=e[1],n[5]=e[5],n[6]=e[9],n[7]=e[13],n[8]=e[2],n[9]=e[6],n[10]=e[10],n[11]=e[14],n[12]=e[3],n[13]=e[7],n[14]=e[11],n[15]=e[15];return n}function ir(n,e){var t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=e[9],u=e[10],p=e[11],f=e[12],g=e[13],m=e[14],v=e[15],b=t*o-i*a,_=t*l-r*a,x=t*c-s*a,S=i*l-r*o,E=i*c-s*o,A=r*c-s*l,z=h*g-d*f,Z=h*m-u*f,Y=h*v-p*f,T=d*m-u*g,V=d*v-p*g,oe=u*v-p*m,B=b*oe-_*V+x*T+S*Y-E*Z+A*z;return B?(B=1/B,n[0]=(o*oe-l*V+c*T)*B,n[1]=(r*V-i*oe-s*T)*B,n[2]=(g*A-m*E+v*S)*B,n[3]=(u*E-d*A-p*S)*B,n[4]=(l*Y-a*oe-c*Z)*B,n[5]=(t*oe-r*Y+s*Z)*B,n[6]=(m*x-f*A-v*_)*B,n[7]=(h*A-u*x+p*_)*B,n[8]=(a*V-o*Y+c*z)*B,n[9]=(i*Y-t*V-s*z)*B,n[10]=(f*E-g*x+v*b)*B,n[11]=(d*x-h*E-p*b)*B,n[12]=(o*Z-a*T-l*z)*B,n[13]=(t*T-i*Z+r*z)*B,n[14]=(g*_-f*S-m*b)*B,n[15]=(h*S-d*_+u*b)*B,n):null}function qi(n,e,t){var i=e[0],r=e[1],s=e[2],a=e[3],o=e[4],l=e[5],c=e[6],h=e[7],d=e[8],u=e[9],p=e[10],f=e[11],g=e[12],m=e[13],v=e[14],b=e[15],_=t[0],x=t[1],S=t[2],E=t[3];return n[0]=_*i+x*o+S*d+E*g,n[1]=_*r+x*l+S*u+E*m,n[2]=_*s+x*c+S*p+E*v,n[3]=_*a+x*h+S*f+E*b,_=t[4],x=t[5],S=t[6],E=t[7],n[4]=_*i+x*o+S*d+E*g,n[5]=_*r+x*l+S*u+E*m,n[6]=_*s+x*c+S*p+E*v,n[7]=_*a+x*h+S*f+E*b,_=t[8],x=t[9],S=t[10],E=t[11],n[8]=_*i+x*o+S*d+E*g,n[9]=_*r+x*l+S*u+E*m,n[10]=_*s+x*c+S*p+E*v,n[11]=_*a+x*h+S*f+E*b,_=t[12],x=t[13],S=t[14],E=t[15],n[12]=_*i+x*o+S*d+E*g,n[13]=_*r+x*l+S*u+E*m,n[14]=_*s+x*c+S*p+E*v,n[15]=_*a+x*h+S*f+E*b,n}function Ni(n,e,t){var i=t[0],r=t[1],s=t[2],a,o,l,c,h,d,u,p,f,g,m,v;return e===n?(n[12]=e[0]*i+e[4]*r+e[8]*s+e[12],n[13]=e[1]*i+e[5]*r+e[9]*s+e[13],n[14]=e[2]*i+e[6]*r+e[10]*s+e[14],n[15]=e[3]*i+e[7]*r+e[11]*s+e[15]):(a=e[0],o=e[1],l=e[2],c=e[3],h=e[4],d=e[5],u=e[6],p=e[7],f=e[8],g=e[9],m=e[10],v=e[11],n[0]=a,n[1]=o,n[2]=l,n[3]=c,n[4]=h,n[5]=d,n[6]=u,n[7]=p,n[8]=f,n[9]=g,n[10]=m,n[11]=v,n[12]=a*i+h*r+f*s+e[12],n[13]=o*i+d*r+g*s+e[13],n[14]=l*i+u*r+m*s+e[14],n[15]=c*i+p*r+v*s+e[15]),n}function us(n,e,t){var i=t[0],r=t[1],s=t[2];return n[0]=e[0]*i,n[1]=e[1]*i,n[2]=e[2]*i,n[3]=e[3]*i,n[4]=e[4]*r,n[5]=e[5]*r,n[6]=e[6]*r,n[7]=e[7]*r,n[8]=e[8]*s,n[9]=e[9]*s,n[10]=e[10]*s,n[11]=e[11]*s,n[12]=e[12],n[13]=e[13],n[14]=e[14],n[15]=e[15],n}function vM(n,e,t,i){var r=i[0],s=i[1],a=i[2],o=Math.hypot(r,s,a),l,c,h,d,u,p,f,g,m,v,b,_,x,S,E,A,z,Z,Y,T,V,oe,B,Q;return o0?(m=Math.sqrt(g+1)*2,n[3]=.25*m,n[0]=(d-p)/m,n[1]=(u-l)/m,n[2]=(o-c)/m):a>h&&a>f?(m=Math.sqrt(1+a-h-f)*2,n[3]=(d-p)/m,n[0]=.25*m,n[1]=(o+c)/m,n[2]=(u+l)/m):h>f?(m=Math.sqrt(1+h-a-f)*2,n[3]=(u-l)/m,n[0]=(o+c)/m,n[1]=.25*m,n[2]=(d+p)/m):(m=Math.sqrt(1+f-a-h)*2,n[3]=(o-c)/m,n[0]=(u+l)/m,n[1]=(d+p)/m,n[2]=.25*m),n}function _M(n,e,t,i,r){var s=1/Math.tan(e/2),a;return n[0]=s/t,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=s,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[11]=-1,n[12]=0,n[13]=0,n[15]=0,r!=null&&r!==1/0?(a=1/(i-r),n[10]=(r+i)*a,n[14]=2*r*i*a):(n[10]=-1,n[14]=-2*i),n}var SM=_M;function ps(){var n=new Ar(3);return Ar!=Float32Array&&(n[0]=0,n[1]=0,n[2]=0),n}function vr(n){var e=new Ar(3);return e[0]=n[0],e[1]=n[1],e[2]=n[2],e}function wM(n){var e=n[0],t=n[1],i=n[2];return Math.hypot(e,t,i)}function Ct(n,e,t){var i=new Ar(3);return i[0]=n,i[1]=e,i[2]=t,i}function _t(n,e,t){return n[0]=e[0]+t[0],n[1]=e[1]+t[1],n[2]=e[2]+t[2],n}function ft(n,e,t){return n[0]=e[0]-t[0],n[1]=e[1]-t[1],n[2]=e[2]-t[2],n}function oa(n,e,t){return n[0]=e[0]*t[0],n[1]=e[1]*t[1],n[2]=e[2]*t[2],n}function MM(n,e,t){return n[0]=e[0]/t[0],n[1]=e[1]/t[1],n[2]=e[2]/t[2],n}function Gn(n,e){return n[0]=Math.floor(e[0]),n[1]=Math.floor(e[1]),n[2]=Math.floor(e[2]),n}function la(n,e){return n[0]=Math.round(e[0]),n[1]=Math.round(e[1]),n[2]=Math.round(e[2]),n}function yr(n,e){var t=e[0]-n[0],i=e[1]-n[1],r=e[2]-n[2];return Math.hypot(t,i,r)}function Tr(n,e){return n[0]=-e[0],n[1]=-e[1],n[2]=-e[2],n}function $M(n,e){var t=e[0],i=e[1],r=e[2],s=t*t+i*i+r*r;return s>0&&(s=1/Math.sqrt(s)),n[0]=e[0]*s,n[1]=e[1]*s,n[2]=e[2]*s,n}function PM(n,e){return n[0]*e[0]+n[1]*e[1]+n[2]*e[2]}function Ef(n,e,t){var i=e[0],r=e[1],s=e[2],a=t[0],o=t[1],l=t[2];return n[0]=r*l-s*o,n[1]=s*a-i*l,n[2]=i*o-r*a,n}function Ae(n,e,t,i){var r=e[0],s=e[1],a=e[2];return n[0]=r+i*(t[0]-r),n[1]=s+i*(t[1]-s),n[2]=a+i*(t[2]-a),n}function Kt(n,e,t){var i=e[0],r=e[1],s=e[2],a=t[3]*i+t[7]*r+t[11]*s+t[15];return a=a||1,n[0]=(t[0]*i+t[4]*r+t[8]*s+t[12])/a,n[1]=(t[1]*i+t[5]*r+t[9]*s+t[13])/a,n[2]=(t[2]*i+t[6]*r+t[10]*s+t[14])/a,n}function If(n,e){var t=n[0],i=n[1],r=n[2],s=e[0],a=e[1],o=e[2];return Math.abs(t-s)<=Ms*Math.max(1,Math.abs(t),Math.abs(s))&&Math.abs(i-a)<=Ms*Math.max(1,Math.abs(i),Math.abs(a))&&Math.abs(r-o)<=Ms*Math.max(1,Math.abs(r),Math.abs(o))}var B0=MM,Ne=yr,TM=wM;(function(){var n=ps();return function(e,t,i,r,s,a){var o,l;for(t||(t=3),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;o0&&(a=1/Math.sqrt(a)),n[0]=t*a,n[1]=i*a,n[2]=r*a,n[3]=s*a,n}(function(){var n=CM();return function(e,t,i,r,s,a){var o,l;for(t||(t=4),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;oMs?(n[0]=e[0]/i,n[1]=e[1]/i,n[2]=e[2]/i):(n[0]=1,n[1]=0,n[2]=0),t}function kf(n,e,t,i){var r=e[0],s=e[1],a=e[2],o=e[3],l=t[0],c=t[1],h=t[2],d=t[3],u,p,f,g,m;return p=r*l+s*c+a*h+o*d,p<0&&(p=-p,l=-l,c=-c,h=-h,d=-d),1-p>Ms?(u=Math.acos(p),f=Math.sin(u),g=Math.sin((1-i)*u)/f,m=Math.sin(i*u)/f):(g=1-i,m=i),n[0]=g*r+m*l,n[1]=g*s+m*c,n[2]=g*a+m*h,n[3]=g*o+m*d,n}function LM(n,e){var t=e[0]+e[4]+e[8],i;if(t>0)i=Math.sqrt(t+1),n[3]=.5*i,i=.5/i,n[0]=(e[5]-e[7])*i,n[1]=(e[6]-e[2])*i,n[2]=(e[1]-e[3])*i;else{var r=0;e[4]>e[0]&&(r=1),e[8]>e[r*3+r]&&(r=2);var s=(r+1)%3,a=(r+2)%3;i=Math.sqrt(e[r*3+r]-e[s*3+s]-e[a*3+a]+1),n[r]=.5*i,i=.5/i,n[3]=(e[s*3+a]-e[a*3+s])*i,n[s]=(e[s*3+r]+e[r*3+s])*i,n[a]=(e[a*3+r]+e[r*3+a])*i}return n}function kM(n,e,t,i){var r=.5*Math.PI/180;e*=r,t*=r,i*=r;var s=Math.sin(e),a=Math.cos(e),o=Math.sin(t),l=Math.cos(t),c=Math.sin(i),h=Math.cos(i);return n[0]=s*l*h-a*o*c,n[1]=a*o*h+s*l*c,n[2]=a*l*c-s*o*h,n[3]=a*l*h+s*o*c,n}var G0=EM;(function(){var n=ps(),e=Ct(1,0,0),t=Ct(0,1,0);return function(i,r,s){var a=PM(r,s);return a<-.999999?(Ef(n,e,r),TM(n)<1e-6&&Ef(n,t,r),$M(n,n),IM(i,n,Math.PI),i):a>.999999?(i[0]=0,i[1]=0,i[2]=0,i[3]=1,i):(Ef(n,r,s),i[0]=n[0],i[1]=n[1],i[2]=n[2],i[3]=1+a,G0(i,i))}})(),function(){var n=Lf(),e=Lf();return function(t,i,r,s,a,o){return kf(n,i,a,o),kf(e,r,s,o),kf(t,n,e,2*o*(1-o)),t}}(),function(){var n=O0();return function(e,t,i,r){return n[0]=i[0],n[3]=i[1],n[6]=i[2],n[1]=r[0],n[4]=r[1],n[7]=r[2],n[2]=-t[0],n[5]=-t[1],n[8]=-t[2],G0(e,LM(e,n))}}();function AM(){var n=new Ar(2);return Ar!=Float32Array&&(n[0]=0,n[1]=0),n}function RM(n,e){var t=e[0]-n[0],i=e[1]-n[1];return Math.hypot(t,i)}function OM(n,e){var t=n[0],i=n[1],r=e[0],s=e[1];return Math.abs(t-r)<=Ms*Math.max(1,Math.abs(t),Math.abs(r))&&Math.abs(i-s)<=Ms*Math.max(1,Math.abs(i),Math.abs(s))}(function(){var n=AM();return function(e,t,i,r,s,a){var o,l;for(t||(t=2),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;ool(`bodyMouseFirstMove ${n}`),at=(n="move")=>ol(`bodyMouseMove ${n}`),lt=(n="end")=>ol(`bodyMouseUp ${n}`),si="updateViewport",Df="toggle.fullscreen",kt="refreshSelection",da="refreshSelectionTool",U0="refreshContent",W0="showComponentPopup",Ff="showNotify",ua="resize.window",ln="resizeCanvas",Gi="updateCanvas",Nf="openContextMenu",VM="startGuesture",DM="endGuesture",FM="keymapKeydown",NM="keymapKeyup",BM="setLocale",jM="pushModeView",GM="popModeView";let ul={name:void 0};function Bf(){return ul.name===void 0&&(window.navigator.appVersion.indexOf("Win")!=-1?ul.name="win":window.navigator.appVersion.indexOf("Mac")!=-1?ul.name="mac":window.navigator.appVersion.indexOf("X11")!=-1?ul.name="linux":ul.name=""),ul.name}const pa={backspace:8,tab:9,enter:13,escape:27,space:32,pageup:33,pagedown:34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,semicolon:59,equals:61,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,multiply:106,add:107,subtract:109,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,f16:127,f17:128,f18:129,f19:130,comma:188,",":188,period:190,".":190,slash:191,"/":191,backquote:192,"`":192,openbracket:219,"[":219,backslash:220,"\\":220,closebracket:221,"]":221,quote:222,"'":222,altgr:225},HM={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318",SHIFT:"\u21E7",CTRL:"\u2303",ALT:"\u2325",ENTER:"\u21B5",ESC:"\u238B",TAB:"\u21E5",SPACE:"\u2423",CAPSLOCK:"\u21EA",DELETE:"\u2326",INSERT:"\u2324",HOME:"\u21F1",END:"\u21F2",PAGEUP:"\u21DE",PAGEDOWN:"\u21DF",PRINTSCREEN:"\u2399",SCROLLLOCK:"\u21DE",PAUSE:"\u23CF",NUMLOCK:"\u21EA",META:"\u2318",WINDOWS:"\u2318",CONTEXTMENU:"\u2325",COMMAND:"\u2318"},UM=Bf(),qr=(n,e=UM)=>(n[e]||n.key).split("+").map(t=>t.trim()).map(t=>{const i=t.toUpperCase();return HM[i]||i}).join(" ");class ge extends ds{get notEventRedefine(){return!0}get $editor(){if(!this.__cacheParentEditor){let e=this.parent;for(;e;){if(e.$editor){this.__cacheParentEditor=e.$editor;break}e=e.parent}}return this.__cacheParentEditor}get $context(){return this.$editor.context}get $store(){return this.$context.store||this.parent.$store}get localeKey(){return""}getMessageKey(e){return this.localeKey?`${this.localeKey}.${e}`:e}$i18n(e,t={},i){return this.$editor.getI18nMessage(this.getMessageKey(e),t,i)}$initI18n(e){return this.$editor.initI18nMessage(this.getMessageKey(e))}get $config(){return this.$context.config}get $selection(){return this.$context.selection}get $segmentSelection(){return this.$context.segmentSelection}get $commands(){return this.$context.commands}get $viewport(){return this.$context.viewport}get $snapManager(){return this.$context.snapManager}get $timeline(){return this.$context.timeline}get $history(){return this.$context.history}get $shortcuts(){return this.$context.shortcuts}get $keyboardManager(){return this.$context.keyboardManager}get $storageManager(){return this.$context.storageManager}get $injectManager(){return this.$context.injectManager}get $model(){return this.$context.modelManager}get $lockManager(){return this.$context.lockManager}get $visibleManager(){return this.$context.visibleManager}get $modeView(){return this.$context.modeViewManager}get $icon(){return this.$context.icon}get $stateManager(){return this.$context.stateManager}get $menu(){return this.$context.menuManager}notify(e,t,i,r=1e3){this.emit(Ff,e,t,i,r)}alert(e,t,i=1e3){this.notify(H0.ALERT,e,t,i)}$theme(e){return this.$editor.themeValue(e)}bodyMouseFirstMove(e,t){this[t]&&this.emit(Of,this[t],this,e.xy)}bodyMouseMove(e,t){this[t]&&this.emit(zf,this[t],this,e.xy)}bodyMouseUp(e,t){this[t]&&this.emit(Vf,this[t],this,e.xy)}createFunctionComponent(e,t,i=ge){return super.createFunctionComponent(e,t,i)}}class WM extends ge{initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.refreshCursor()})}template(){return D("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},D("div",{class:"page-view",ref:"$pageView"},D("div",{class:"page-lock scrollbar",ref:"$lock"},this.$injectManager.generate("canvas.view"))))}[$e("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$context.config.is("editing.mode",Ti.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(pa.space))}[qe("$lock")+Qe("checkSpace")+at("movePan")+lt("moveEndPan")](){this.startMovePan()}[Qt("editing.mode")](){this.$config.is("editing.mode",Ti.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ps()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const i=Ct(e,t,0);this.$context.viewport.pan(...Kt([],ft([],this.lastDist,i),this.$context.viewport.scaleMatrixInverse)),this.lastDist=i}refreshCursor(){this.$context.config.is("editing.mode",Ti.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}async[$e("$container")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}[Kr("$lock")+St](){}[Yr("$lock")+St](e){const t=this.$context.viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$command.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const i=Ze.create(e.target).attr("data-id");if(i)this.$command.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},i);else{const r=e.dataTransfer.getData("image/info");this.$command.emit("dropImageUrl",r)}}}[_f("$lock")+St](e){const[t,i]=wf(e);if(!this.state.gesture)e.ctrlKey&&this.$context.viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const r=1-2.5*i/100;this.$context.viewport.zoom(r)}else{const r=-2.5*t,s=-2.5*i;this.$context.viewport.pan(-r/this.$viewport.scale,-s/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$context.viewport.refreshCanvasSize(this.refs.$lock.rect())}[U(ua,ln)](){this.refreshCanvasSize()}[Qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[U(si)](){this.$commands.emit("refreshCursor","auto")}}var Bte="";class jf extends ge{template(){return` +var T7=Object.defineProperty,k7=Object.defineProperties;var M7=Object.getOwnPropertyDescriptors;var qg=Object.getOwnPropertySymbols;var I7=Object.prototype.hasOwnProperty,E7=Object.prototype.propertyIsEnumerable;var Qg=($,Ke,lt)=>Ke in $?T7($,Ke,{enumerable:!0,configurable:!0,writable:!0,value:lt}):$[Ke]=lt,b=($,Ke)=>{for(var lt in Ke||(Ke={}))I7.call(Ke,lt)&&Qg($,lt,Ke[lt]);if(qg)for(var lt of qg(Ke))E7.call(Ke,lt)&&Qg($,lt,Ke[lt]);return $},se=($,Ke)=>k7($,M7(Ke));var Th=($,Ke,lt)=>{if(!Ke.has($))throw TypeError("Cannot "+lt)};var Te=($,Ke,lt)=>(Th($,Ke,"read from private field"),lt?lt.call($):Ke.get($)),Pt=($,Ke,lt)=>{if(Ke.has($))throw TypeError("Cannot add the same private member more than once");Ke instanceof WeakSet?Ke.add($):Ke.set($,lt)},wt=($,Ke,lt,gi)=>(Th($,Ke,"write to private field"),gi?gi.call($,lt):Ke.set($,lt),lt),Jg=($,Ke,lt,gi)=>({set _(Zn){wt($,Ke,Zn,lt)},get _(){return Te($,Ke,gi)}}),Kn=($,Ke,lt)=>(Th($,Ke,"access private method"),lt);(function($,Ke){typeof exports=="object"&&typeof module!="undefined"?Ke(exports):typeof define=="function"&&define.amd?define(["exports"],Ke):($=typeof globalThis!="undefined"?globalThis:$||self,Ke($.elf={}))})(this,function($){var di,el,jn,_a,zn,Sa,Pa,ys,An,Dn,tl,ef,Fn,kh,rl,tf,Ks,si,rr,wa,Bn,Nn,Gn,Zs,Hn,Ca;"use strict";function Ke(s,e=()=>!0){let t=s,r=[];do{if(t instanceof Object===!1)break;const a=Object.getOwnPropertyNames(t).filter(e);r.push.apply(r,a)}while(t=Object.getPrototypeOf(t));return r}function lt(s,e=0){if(e===0)return s;var t=void 0;return function(r,i,a,n,o){t&&window.clearTimeout(t),t=window.setTimeout(function(){s(r,i,a,n,o)},e||300)}}function gi(s,e){var t=void 0;return function(r,i,a,n,o){t||(t=window.setTimeout(function(){s(r,i,a,n,o),t=null},e||300))}}function Zn(s,e,t){return(...r)=>{t.every(a=>e[a].apply(e,r))&&s.apply(e,r)}}function Mh(s,e){return(...t)=>{window.requestAnimationFrame(()=>{s.apply(e,t)})}}function La(s,e){Object.keys(s).forEach((t,r)=>{e(t,s[t],r)})}function vl(s,e){return Object.keys(s).map((t,r)=>e(t,s[t],r))}function Ih(s,e,t=""){return vl(s,e).join(t)}function rf(s,e,t){var r=Eh(s[e],e);return de(t)?t(r):r}function Eh(s,e){return typeof s=="undefined"?e:s}function Ct(s){return typeof s=="undefined"}function ke(s){return!Ct(s)}function ai(s){return typeof s=="boolean"}function it(s){return typeof s=="string"}function sf(s){return!it(s)}function Gt(s){return Array.isArray(s)}function Hr(s){return typeof s=="object"&&!Array.isArray(s)&&!ft(s)&&!it(s)&&s!==null}function de(s){return typeof s=="function"}function ft(s){return typeof s=="number"}function Lh(s){return s===0}function _s(s){return!Lh(s)}const af=s=>JSON.parse(JSON.stringify(s));function be(s){if(!Ct(s))return af(s)}function yl(s){return Object.keys(s).forEach(e=>{Array.isArray(s[e])&&(s[e]=s[e].join(", "))}),s}function kr(...s){const e=[];return s.filter(Boolean).forEach(t=>{Gt(t)?e.push(kr(...t)):Hr(t)?Object.keys(t).filter(r=>Boolean(t[r])).forEach(r=>{e.push(r)}):it(t)&&e.push(t)}),e.join(" ")}const nf=(s,e,t)=>{t?(s.setAttribute(e,e),s[e]=t):(s.removeAttribute(e),s[e]=t)},of=(s,e,t)=>{typeof t=="boolean"?nf(s,e,t):s.setAttribute(e,t)},lf=(s,e)=>{s.removeAttribute(e),s[e]=!1},cf=(s,e)=>{s.removeAttribute(e)},hf=(s,e,t)=>{typeof t=="boolean"?lf(s,e):e&&cf(s,e)},df=(s,e,t,r)=>{t?(!r||t!==r)&&of(s,e,t):hf(s,e,r)},uf=(s,e={},t={})=>{const r=[];r.push.apply(r,Object.keys(e)),r.push.apply(r,Object.keys(t)),new Set(r).forEach(a=>{df(s,a,e[a],t[a])})};function pf(s,e){return s.nodeType===window.Node.TEXT_NODE&&s.textContent!==e.textContent||s.nodeName!==e.nodeName}function Vh(s){return(s==null?void 0:s.nodeType)===8?!0:s.nodeType!==window.Node.TEXT_NODE&&s.getAttribute("data-domdiff-pass")==="true"}function gf(s){return s.nodeType!==window.Node.TEXT_NODE&&s.getAttribute("refClass")}function Oh(s){var e={};const t=s.length;for(let r=0;r{var e=s.firstChild;if(!e)return[];var t=[];do t.push(e),e=e.nextSibling;while(e);return t};function Qn(s,e,t={}){t.checkPassed=de(t.checkPassed)?t.checkPassed:void 0,t.removedElements=[],s=s.el||s,e=e.el||e;var r=qn(s),i=qn(e),a=Math.max(r.length,i.length);if(a!==0)if(r.length===0&&i.length>0)s.append(...i);else if(r.length>0&&i.length===0)s.textContent="";else for(var n=0;n{Ri.delete(e)}),ea.delete(s))}function Fh(s,e=!0){if(it(s)===!1)return s;let t=s;return Ri.has(s)&&(t=Ri.get(s),e&&Ri.delete(s)),t}function Oa(s){return Ri.has(s)?Ri.get(s):s}function Bh(s){return Ri.has(s)}function Nh(s){return Object.entries(s).map(([e,t])=>`${e}=${ji(t)}`).join(" ")}function zi(s={}){Object.keys(s).forEach(e=>{eo[e]=s[e]})}function Gh(s){eo[s.name]&&(eo[s.name]=s)}function Hh(s,e){zh[s]=e}function Uh(s){return zh[s]}function Wh(s){return eo[Uh(s)||s]}function Xh(s){Ah.add(s)}function Yh(){return[...Ah]}function vf(s){Gh(s),Yh().forEach(e=>{e.hmr()})}function Kh(s){Object.keys(s).forEach(e=>{Va[e]=s[e]})}function yf(s){return Va[s]}function Zh(s){return Object.keys(Va).filter(e=>Boolean(Va[e])).map(e=>{const t=Va[e];return new t(s)})}class ge{constructor(e,t,r){if(typeof e!="string")e instanceof ge?this.el=e.el:this.el=e;else{var i=document.createElement(e);t&&(i.className=t),r=r||{},Object.assign(i,r),this.el=i}}static create(e,t,r){return new ge(e,t,r)}static createByHTML(e){var t=ge.create("div");return t.html(e).firstChild}static makeElementList(e){const t=ge.create("div");let r=[];Gt(e)||(e=[e]),e=e.filter(Boolean);for(let i=0,a=e.length;i{this.attr(t,e[t])}),this}setAttrNS(e,t="http://www.w3.org/2000/svg"){return Object.keys(e).forEach(r=>{this.attr(r,e[r],t)}),this}setProp(e){return Object.keys(e).forEach(t=>{this.el[t]!=e[t]&&(this.el[t]=e[t])}),this}data(e,t){if(arguments.length===1){const r=this.attr("data-"+e);return Fh(r,!1)}else if(arguments.length===2)return this.attr("data-"+e,t);return this}attr(...e){return e.length==1?de(this.el.getAttribute)&&this.el.getAttribute(e[0]):(this.el.getAttribute(e[0])!=e[1]&&this.el.setAttribute(e[0],e[1]),this)}attrNS(e,t,r="http://www.w3.org/2000/svg"){return arguments.length==1?this.el.getAttributeNS(r,e):(this.el.getAttributeNS(r,e)!=t&&this.el.setAttributeNS(r,e,t),this)}attrKeyValue(e){return{[this.el.getAttribute(e)]:this.val()}}get attributes(){try{return[...this.el.attributes],this.el.attributes}catch{const r=this.el.attributes.length,i=[];for(var e=0;ethis.el.getAttribute(t))}styles(...e){return e.map(t=>this.el.style[t])}removeAttr(e){return this.el.removeAttribute(e),this}removeStyle(e){return this.el.style.removeProperty(e),this}is(e){return e instanceof ge?this.el===e.el:this.el===e}isTag(e){return this.el.tagName.toLowerCase()===e.toLowerCase()}closest(e){for(var t=this,r=!1;!(r=t.hasClass(e));)if(t.el.parentNode)t=ge.create(t.el.parentNode);else return null;return r?t:null}path(){if(!this.el)return[];let e=[this],t=this.parent();if(!t.el)return e;for(;t&&(e.unshift(t),t=t.parent(),!!t.el););return e}get $parent(){return this.parent()}parent(){return ge.create(this.el.parentNode)}hasParent(){return!!this.el.parentNode}removeClass(...e){return this.el.classList.remove(...e),this}updateClass(e){return this.el.className=e,this}replaceClass(e,t){return this.el.classList.replace(e,t),this}hasClass(e){return this.el.classList?this.el.classList.contains(e):!1}addClass(...e){return this.el.classList.add(...e),this}onlyOneClass(e){var t=this.parent();t.children().forEach(r=>{r.removeClass(e)}),this.addClass(e)}toggleClass(e,t){return this.el.classList.toggle(e,t),this}outerHTML(){return this.isTextNode?this.text():this.el.outerHTML}html(e){try{return typeof e=="undefined"?this.el.innerHTML:(typeof e=="string"?Object.assign(this.el,{innerHTML:e}):this.empty().append(e),this)}catch(t){return console.log(t,e),this}}htmlDiff(e){Qn(this,e)}updateDiff(e,t="div",r={}){Qn(this,ge.create(t).html(e),r)}updateSVGDiff(e,t="div"){Qn(this,ge.create(t).html(`${e}`).firstChild.firstChild)}getById(e){return this.el.getElementById(e)}find(e){if(!this.isTextNode)return this.el.querySelector(e)}$(e){var t=this.find(e);return t?ge.create(t):null}findAll(e){return this.isTextNode?[]:Array.from(this.el.querySelectorAll(e))}$$(e){var t=this.findAll(e);return t.map(r=>ge.create(r))}empty(){for(;this.el.firstChild;)this.el.removeChild(this.el.firstChild);return this}append(e){return e?(Gt(e)?this.el.append(...e.map(t=>t.el||t)):typeof e=="string"?this.el.appendChild(document.createTextNode(e)):this.el.appendChild(e.el||e),this):this}prepend(e){return typeof e=="string"?this.el.prepend(document.createTextNode(e)):this.el.prepend(e.el||e),this}prependHTML(e){var t=ge.create("div").html(e);return this.prepend(t.createChildrenFragment()),t}appendHTML(e){var t=ge.create("div").html(e);return this.append(t.createChildrenFragment()),t}createChildrenFragment(){const e=this.childNodes;var t=document.createDocumentFragment();return e.forEach(r=>t.appendChild(r.el)),t}appendTo(e){var t=e.el?e.el:e;return t.appendChild(this.el),this}remove(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}removeChild(e){return this.el.removeChild(e.el||e),this}text(e){if(typeof e=="undefined")return this.el.textContent;var t=e;return e instanceof ge&&(t=e.text()),this.el.textContent!==t&&(this.el.textContent=t),this}css(e,t){if(typeof e!="undefined"&&typeof t!="undefined")e.indexOf("--")===0&&typeof t!="undefined"?this.el.style.setProperty(e,t):this.el.style[e]=t;else if(typeof e!="undefined"){if(typeof e=="string")return window.getComputedStyle(this.el)[e];Object.entries(e).forEach(([r,i])=>{r.indexOf("--")===0&&typeof i!="undefined"?this.el.style.setProperty(r,i):this.el.style[r]=i})}return this}getComputedStyle(...e){var t=window.getComputedStyle(this.el),r={};return e.forEach(i=>{r[i]=t[i]}),r}getStyleList(...e){for(var t={},r=this.el.style.length,i=0;i{t[n]=this.css(n)}),t}cssText(e){return typeof e=="undefined"?this.el.style.cssText:(e!=this.el.tempCssText&&(this.el.style.cssText=e,this.el.tempCssText=e),this)}cssArray(e){return e[0]&&(this.el.style[e[0]]=e[1]),e[2]&&(this.el.style[e[2]]=e[3]),e[4]&&(this.el.style[e[4]]=e[5]),e[6]&&(this.el.style[e[6]]=e[7]),e[8]&&(this.el.style[e[8]]=e[9]),this}cssFloat(e){return parseFloat(this.css(e))}cssInt(e){return parseInt(this.css(e))}px(e,t){return this.css(e,`${t}px`)}rect(){return this.el.getBoundingClientRect()}bbox(){return this.el.getBBox()}isSVG(){return this.el._cachedIsSVG||(this.el._cachedIsSVG={value:this.el.tagName.toLowerCase()==="svg"}),this.el._cachedIsSVG.value}offsetRect(){if(this.isSVG()){const t=this.parent().rect(),r=this.rect();return{x:r.x-t.x,y:r.y-t.y,width:r.width,height:r.height}}const e=this.el;return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}offsetClientRect(){if(this.isSVG()){const r=this.parent().rect(),i=this.rect();return{x:i.x-r.x,y:i.y-r.y,width:i.width,height:i.height}}const e=this.parent().rect(),t=this.rect();return{x:t.x-e.x,y:t.y-e.y,width:t.width,height:t.height}}offset(){var e=this.rect(),t=ge.getScrollTop(),r=ge.getScrollLeft();return{top:e.top+t,left:e.left+r}}offsetLeft(){return this.offset().left}offsetTop(){return this.offset().top}position(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.rect()}size(){return[this.width(),this.height()]}width(){return this.el.offsetWidth||this.rect().width}contentWidth(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}height(){return this.el.offsetHeight||this.rect().height}contentHeight(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}val(e){if(typeof e=="undefined")return this.el.value;if(typeof e!="undefined"){var t=e;e instanceof ge&&(t=e.val()),this.el.value=t}return this}matches(e){return this.el&&this.el.matches?this.el.matches(e)?this:this.parent().matches(e):null}get value(){return this.el.value}get naturalWidth(){return this.el.naturalWidth}get naturalHeight(){return this.el.naturalHeight}get files(){return this.el.files?[...this.el.files]:[]}get isTextNode(){return this.el.nodeType===3}realVal(){switch(this.el.nodeType){case"INPUT":var e=this.attr("type");return e=="checkbox"||e=="radio"?this.checked():this.el.value;case"SELECT":case"TEXTAREA":return this.el.value}return""}int(){return parseInt(this.val(),10)}float(){return parseFloat(this.val())}show(e="block"){return this.el.style.display=e!="none"?e:"block",this}hide(){return this.el.style.display="none",this}isHide(){return this.el.style.display==="none"}isShow(){return!this.isHide()}toggle(e){var t=this.isHide();return arguments.length==1?e?this.show():this.hide():t?this.show():this.hide()}get totalLength(){return this.el.getTotalLength()}scrollIntoView(){this.el.scrollIntoView()}addScrollLeft(e){return this.el.scrollLeft+=e,this}addScrollTop(e){return this.el.scrollTop+=e,this}setScrollTop(e){return this.el.scrollTop=e,this}setScrollLeft(e){return this.el.scrollLeft=e,this}scrollTop(){return this.el===document.body?ge.getScrollTop():this.el.scrollTop}scrollLeft(){return this.el===document.body?ge.getScrollLeft():this.el.scrollLeft}scrollHeight(){return this.el.scrollHeight}scrollWidth(){return this.el.scrollWidth}on(e,t,r,i){return this.el.addEventListener(e,t,r,i),this}off(e,t){return this.el.removeEventListener(e,t),this}getElement(){return this.el}createChild(e,t="",r={},i={}){let a=ge.create(e,t,r);return a.css(i),this.append(a),a}get firstChild(){return ge.create(this.el.firstElementChild)}get first(){return ge.create(this.el.firstChild)}children(){var e=this.el.firstElementChild;if(!e)return[];var t=[];do t.push(ge.create(e)),e=e.nextElementSibling;while(e);return t}get childNodes(){const e=[];if(this.el.hasChildNodes()){const t=this.el.childNodes;for(let r=0;r{i==0?t.moveTo(r[0],r[1]):t.lineTo(r[0],r[1])}),t.stroke(),t.fill(),t.closePath()}drawCircle(e,t,r){var i=this.context();i.beginPath(),i.arc(e,t,r,0,2*Math.PI),i.stroke(),i.fill()}drawText(e,t,r){this.context().fillText(r,e,t)}fullscreen(){var e=this.el;e.requestFullscreen?e.requestFullscreen():e.wekitRequestFullscreen&&e.wekitRequestFullscreen()}toggleFullscreen(){this.el===document.fullscreenElement?document.exitFullscreen():this.fullscreen()}}class xl{constructor(e){this.id=Jn(),this.cachedCallback={},this.callbacks={},this.editor=e}getCallbacks(e){return this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e]}setCallbacks(e,t=[]){this.callbacks[e]=t}debug(...e){this.editor&&this.editor.context.config.get("debug.mode")&&console.debug(...e)}on(e,t,r,i=0,a=0,n=!1,o=!1,l=[],c=!1){var h=t;return i>0?h=lt(t,i):a>0&&(h=gi(t,a)),l.length&&(h=Zn(h,r,l)),c&&(h=Mh(h,r)),this.getCallbacks(e).push({event:e,callback:h,context:r,originalCallback:t,enableAllTrigger:n,enableSelfTrigger:o}),()=>{this.off(e,t)}}off(e,t){this.debug("off message event",e),arguments.length==1?this.setCallbacks(e):arguments.length==2&&this.setCallbacks(e,this.getCallbacks(e).filter(r=>r.originalCallback!==t))}offAll(e){Object.keys(this.callbacks).forEach(t=>{this.setCallbacks(t,this.getCallbacks(t).filter(r=>r.context!==e))}),this.debug("off all message",e.sourceName)}getCachedCallbacks(e){return this.getCallbacks(e)}sendMessage(e,t,...r){this.sendMessageList(e,[[t,...r]])}runMessage(e,t){const r=e.callback.apply(e.context,t);if(ke(r)){if(r===!1)return;if(de(r)){r();return}}}sendMessageList(e,t=[]){window.Promise.resolve().then(()=>{t.forEach(([r,...i])=>{var a=this.getCachedCallbacks(r);if(a&&a.length){const n=a.filter(l=>!l.enableSelfTrigger).filter(l=>l.enableAllTrigger||l.originalCallback.source!==e);let o=n.length;for(;o--;){const l=n[o];this.runMessage(l,i)}}else this.debug(`message event ${r} is not exist.`)})})}nextSendMessage(e,t,...r){window.Promise.resolve().then(()=>{t(...r)})}triggerMessage(e,t,...r){window.Promise.resolve().then(()=>{var i=this.getCachedCallbacks(t);i?i.filter(n=>n.originalCallback.source===e).forEach(n=>{n.callback.apply(n.context,r)}):this.debug(t," is not valid event")})}emit(e,...t){de(e)?e(...t):Gt(e)?this.sendMessageList(this.source,e):this.sendMessage(this.source,e,...t)}nextTick(e){this.nextSendMessage(this.source,e)}trigger(e,...t){de(e)?e(...t):this.triggerMessage(this.source,e,...t)}}const $l=/^@magic:([a-zA-Z][a-zA-Z0-9]*)[\W]{1}(.*)*$/g,_l="@magic:",Ai="|",qh=/(([\$a-z_\-]+)\([^\(\)]*\)|([a-z_\-]+))/gi,Sl="(",Qh=")",to={KEYWORD:"keyword",FUNCTION:"function",VALUE:"value"};class Ur{constructor(e){this.context=e.context,this.originalMethod=e.originalMethod,this.method=e.method,this.args=e.args,this.pipes=e.pipes,this.keys=e.keys,this.__cache=new Map}setCache(e,t){this.__cache.set(e,t)}hasCache(e){return this.__cache.has(e)}getCache(e){return this.__cache.get(e)}hasKeyword(e){if(this.hasCache(e))return this.getCache(e);let t=!1;return this.pipes.forEach(r=>{switch(r.type){case to.KEYWORD:r.value===e&&(t=!0);break}}),this.setCache(e,t),t}hasFunction(e){if(this.hasCache(e))return this.getCache(e);let t=!!this.getFunction(e);return this.setCache(e,t),t}getFunction(e){return this.functions.find(t=>t.func===e)}getFunctionList(e){return this.functions.filter(t=>t.func===e)}get originalCallback(){return this.context[this.originalMethod]}get keywords(){return this.keys[to.KEYWORD].map(e=>e.value)}get functions(){return this.keys[to.FUNCTION]}get values(){return this.keys[to.VALUE].map(e=>e.value)}execute(...e){return this.originalCallback.call(this.context,...e)}executeWithContext(e,...t){return this.originalCallback.call(e,...t)}static make(e,...t){return`${_l}${e} ${t.join(Ai)}`}static check(e){return e.match($l)!==null}static parse(e,t={}){const r=e.match($l);if(!r)return;const i=r[0].split(_l)[1].split(Ai).map(u=>u.trim());let[a,...n]=i;const[o,...l]=a.split(" "),c=n.map(u=>this.parsePipe(u)).filter(u=>u.value),h={function:[],keyword:[],value:[]};return c.forEach(u=>{u.type==="function"?h.function.push(u):u.type==="keyword"?h.keyword.push(u):h.value.push(u)}),new Ur({context:t,originalMethod:e,method:o,args:l,pipes:c,keys:h})}static parsePipe(e){const t=e.match(qh);if(!t)return{type:"value",value:e};const[r]=t;if(r.includes(Sl)){const[i,a]=r.split(Sl),[n]=a.split(Qh);return{type:"function",value:r,func:i,args:n.split(",").map(o=>o.trim()).filter(Boolean)}}return{type:"keyword",value:t[0]}}}const Jh=(s,e=Ai)=>` ${e} ${s}`,bf="ME@",ed=(...s)=>s.join(Ai),Pl=(...s)=>bf+ed(...s),xf=Pl,$f=Pl,ro=":",td=" ",_f={},Fe=(...s)=>{var e=s.join(ro);return(...t)=>{const[r,...i]=t;return Ur.make("domevent",[e,r].join(" "),...i)}},io=(...s)=>Ur.make("subscribe",...s),Sf=(...s)=>Ur.make("callback",...s),Pf=(...s)=>Ur.make("observer",...s),We=(s,e=Ai)=>Jh(s,e),ta=(s,e=Ai)=>We(`after(${s})`,e),wf=(s,e=Ai)=>We(`before(${s})`,e),fe=We,Cf=We,Tf=We("ArrowUp"),kf=We("ArrowDown"),Mf=We("ArrowLeft"),If=We("ArrowRight"),Di=We("Enter"),Ef=We("Space"),ra=We("Escape"),Lf=We("Backspace"),rd=We("Delete"),Vf=We("Equal"),Of=We("Minus"),Rf=We("BracketRight"),jf=We("BracketLeft"),zf=We("isAltKey"),Af=We("isShiftKey"),Df=We("isMetaKey"),Ff=We("isCtrlKey"),Bf=We("hasMouse"),Nf=We("hasTouch"),Gf=We("hasPen"),Hf=We("self"),_r=We("isMouseLeftButton"),Uf=We("isMouseRightButton"),Wf=We("fit"),Xf=We("passive"),Ee=We("domdiff"),Ne=(s=100)=>We(`debounce(${s})`),wl=(s=300)=>We(`delay(${s})`),Yf=Ne(1e3),Ss=(s=100)=>We(`throttle(${s})`),id=We("allTrigger()"),sd=We("selfTrigger()"),Kf=We("frame()"),Zf=s=>We(`params(${ji(s)})`),qf=We("capture()"),Ve=ta("preventDefault"),Wr=ta("stopPropagation"),M=io,so=(...s)=>io(...s,id),Z=(...s)=>io(...s,sd),Tt=(s,...e)=>io(`config:${s}`,...e),ad=Sf,Qf=ad("requestAnimationFrame"),Jf=Pf,ni=Fe,A=Fe("click"),ia=Fe("dblclick"),em=Fe("mousedown"),tm=Fe("mouseup"),rm=Fe("mousemove"),Cl=Fe("mouseover"),im=Fe("mouseout"),sm=Fe("mouseenter"),nd=Fe("mouseleave"),am=Fe("touchstart"),nm=Fe("touchmove"),om=Fe("touchend"),Ra=Fe("keydown"),er=Fe("keyup"),lm=Fe("keypress"),cm=Fe("drag"),pr=Fe("dragstart"),Xr=Fe("drop"),Yr=Fe("dragover"),hm=Fe("dragenter"),dm=Fe("dragleave"),um=Fe("dragexit"),pm=Fe("dragout"),od=Fe("dragend"),ld=Fe("contextmenu"),Sr=Fe("change"),dt=Fe("input"),Tl=Fe("focus"),ja=Fe("focusin"),Fi=Fe("focusout"),kl=Fe("blur"),cd=Fe("paste"),hd=Fe("resize"),gm=Fe("scroll"),fm=Fe("submit"),me=(...s)=>ni("pointerdown")(...s)+_r,za=ni("pointerover"),mm=ni("pointerenter"),Aa=ni("pointerout"),Ps=ni("pointermove"),dd=ni("pointerup"),ud=ni("change","input"),Ml=ni("wheel","mousewheel","DOMMouseScroll"),vm=Fe("animationstart"),ym=Fe("animationend"),bm=Fe("animationiteration"),xm=Fe("transitionstart"),pd=Fe("transitionend"),$m=Fe("transitionrun"),_m=Fe("transitioncancel"),Il=ni("doubletab"),G=(s="$el")=>Ur.make("load",s),Sm=s=>_f[s]||"",gd=s=>function(){return this.prevState[s]!=this.state[s]},fd=()=>!0,ne=(s="$el")=>Ur.make("bind",s);function El(s){let e=s.deltaX,t=s.deltaY;return e===0&&s.shiftKey&&([t,e]=[e,t]),s.deltaMode===window.WheelEvent.DOM_DELTA_LINE?t*=8:s.deltaMode===window.WheelEvent.DOM_DELTA_PAGE&&(t*=24),[md(e,24),md(t,24),0]}function md(s,e){return Math.sign(s)*Math.min(e,Math.abs(s))}var Ll={addDomEvent(s,e,t,r=!1){s&&s.addEventListener(e,t,r)},removeDomEvent(s,e,t){s&&s.removeEventListener(e,t)},pos(s){return s.touches&&s.touches[0]?s.touches[0]:s},posXY(s){var e=this.pos(s);return{x:e.pageX,y:e.pageY}}};class Da{constructor(e,t={}){this.context=e,this.options=t}initialize(){}load(){}refresh(){}render(){}getRef(e){return this.context.getRef(e)}run(){}destroy(){}}const Pm=(s,e)=>{if(ft(e))switch(s){case"width":case"height":case"top":case"left":case"right":case"bottom":return e+"px"}return e},wm=(s,e,t,r=!1)=>{if(e==="cssText"){s.cssText(t);return}else if(e==="style"){if(typeof t!="string"){const i={};if(Object.entries(t).forEach(([a,n])=>{i[a]=Pm(a,n)}),r){const a=Object.keys(i).map(n=>`${n}:${i[n]};`).join("");s.attr("style",a)}else s.css(i)}return}else if(e==="class"){Array.isArray(t)?s.updateClass(kr(...t)):s.updateClass(kr(t));return}else if(e==="callback"&&typeof t=="function"){t();return}typeof t=="undefined"?s.removeAttr(e):s.el.nodeName==="TEXTAREA"&&e==="value"||e==="text"||e==="textContent"?s.text(t):e==="innerHTML"||e==="html"?s.html(t):e==="htmlDiff"?s.updateDiff(t):e==="svgDiff"?s.updateSVGDiff(t):e==="value"?s.val(t):s.attr(e,t)},Vl={};class Cm extends Da{async initialize(){Vl[this.context.sourceName]||(Vl[this.context.sourceName]=this.context.filterMethodes("bind"))}getBindMethods(){return Vl[this.context.sourceName]||[]}async bindData(...e){const t=this.getBindMethods();if(!(t!=null&&t.length))return;const r=t==null?void 0:t.filter(i=>e.length?e.indexOf(i.args[0])>-1:!0);await Promise.all(r==null?void 0:r.map(async i=>{let a=this.getRef(`${i.keywords[0]}`),n=fd;typeof a=="string"&&a!==""?n=gd(a):typeof a=="function"&&(n=a);const o=i.args[0];let l=this.context.refs[o];const c=typeof n=="function"&&n.call(this.context);if(l&&c){const d=await i.executeWithContext(this.context,...e);if(!d)return;const v=Object.keys(d);for(var h=0,u=v.length;hthis.parseCallback(r))}destroy(){this.context.notEventRedefine||this.removeCallbackAll()}getCallback(e){return this.context[e]}removeCallbackAll(){this.getBindings().forEach(e=>{this.removeCallback(e)}),this.initBindings()}removeCallback({requestId:e}){window.cancelAnimationFrame(e)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}makeCallback(e){const t=e.callback,r=i=>{t(i),e.requestId=window.requestAnimationFrame(r)};return()=>{e.requestId=window.requestAnimationFrame(r)}}addCallback(e,t){const r=this.makeCallback(e,t);this.addBinding(e),r()}bindingCallback(e,t){var l,c;const r={eventName:e.args[0],callback:t};r.codes=[],r.checkMethodList=[];const i=e.getFunction("debounce"),a=e.getFunction("throttle");if(i){var n=+(((l=i.args)==null?void 0:l[0])||0);r.callback=lt(t,n)}else if(a){var o=+(((c=a.args)==null?void 0:c[0])||0);r.callback=gi(t,o)}e.keywords.forEach(h=>{const u=h;this.getCallback(u)?r.checkMethodList.push(u):r.codes.push(u.toLowerCase())}),this.addCallback(r,e)}parseCallback(e){const t=this.context;var r=e.args;if(r){var i=t[e.originalMethod].bind(t);this.bindingCallback(e,i)}}}const km={touchstart:!0,touchmove:!0,mousedown:!0,mouseup:!0,mousemove:!0},Mm={doubletab:"touchend"},Im={doubletab:!0},Em={self(s){return s&&s.$dt&&s.$dt.is(s.target)},isAltKey(s){return s.altKey},isCtrlKey(s){return s.ctrlKey},isShiftKey(s){return s.shiftKey},isMetaKey(s){return s.metaKey||s.key=="Meta"||s.code.indexOf("Meta")>-1},isMouseLeftButton(s){return s.buttons===1},isMouseRightButton(s){return s.buttons===2},hasMouse(s){return s.pointerType==="mouse"},hasTouch(s){return s.pointerType==="touch"},hasPen(s){return s.pointerType==="pen"},preventDefault(s){return s.preventDefault(),!0},stopPropagation(s){return s.stopPropagation(),!0}};class Lm extends Da{initialize(){var e,t;this.destroy(),!(this._domEvents&&this.context.notEventRedefine)&&((!this._domEvents||this._domEvents.length===0||this._bindings.length===0)&&(this._domEvents=this.context.filterMethodes("domevent")),!((e=this._bindings)!=null&&e.length)&&((t=this._domEvents)==null?void 0:t.length)&&this._domEvents.forEach(r=>this.parseDomEvent(r)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}getCallback(e){return this.context[e]||Em[e]}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}removeDomEvent({eventName:e,dom:t,callback:r}){Ll.removeDomEvent(t,e,r)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}matchPath(e,t){return e?e.matches(t)?e:this.matchPath(e.parentElement,t):null}hasDelegate(e,t){return this.matchPath(e.target||e.srcElement,t.delegate)}makeCallback(e,t,r){return e.delegate?this.makeDelegateCallback(e,t,r):this.makeDefaultCallback(e,t,r)}makeDefaultCallback(e,t,r){return i=>{var a=this.runEventCallback(i,e,t,r);if(ke(a))return a}}makeDelegateCallback(e,t,r){return i=>{const a=this.hasDelegate(i,e);if(a){i.$dt=ge.create(a);var n=this.runEventCallback(i,e,t,r);if(ke(n))return n}}}runEventCallback(e,t,r,i){const a=this.context;if(e.xy=Ll.posXY(e),t.beforeMethods.length&&t.beforeMethods.every(o=>this.getCallback(o.target).call(a,e,o.param)),this.checkEventType(e,t)){var n=i(e,e.$dt,e.xy);return n!==!1&&t.afterMethods.length&&t.afterMethods.forEach(o=>this.getCallback(o.target).call(a,e,o.param)),n}}checkEventType(e,t){const r=this.context;var i=!0;t.codes.length&&(i=(e.code?t.codes.indexOf(e.code.toLowerCase())>-1:!1)||(e.key?t.codes.indexOf(e.key.toLowerCase())>-1:!1));var a=!0;return t.checkMethodList.length&&(a=t.checkMethodList.every(n=>{var o=this.getCallback(n);return de(o)&&o?o.call(r,e):ke(o)?!!o:!0})),i&&a}getDefaultDomElement(e){const t=this.context;let r;return e?r=t.refs[e]||t[e]||window[e]:r=t.el||t.$el||t.$root,r instanceof ge?r.getElement():r}getRealEventName(e){return Mm[e]||e}getCustomEventName(e){return Im[e]?e:""}getDefaultEventObject(e,t,r,i,a){var g,y;const n={eventName:this.getRealEventName(e),customEventName:this.getCustomEventName(e),callback:a},[,,...o]=i.args;n.dom=this.getDefaultDomElement(t),n.delegate=o.join(td),n.beforeMethods=[],n.afterMethods=[],n.codes=[],n.checkMethodList=[];const l=i.getFunction("debounce"),c=i.getFunction("throttle");if(l){var h=+(((g=l.args)==null?void 0:g[0])||0);n.callback=lt(a,h)}else if(c){var u=+(((y=c.args)==null?void 0:y[0])||0);n.callback=gi(a,u)}const d=i.getFunctionList("after"),v=i.getFunctionList("before");return d.length&&d.forEach(P=>{var S=P.args[0].split(" "),[V,E]=S;n.afterMethods.push({target:V,param:E})}),v.length&&v.forEach(P=>{var S=P.args[0].split(" "),[V,E]=S;n.beforeMethods.push({target:V,param:E})}),i.keywords.forEach(P=>{const S=P;this.getCallback(S)?n.checkMethodList.push(S):n.codes.push(S.toLowerCase())}),n}addDomEvent(e,t,r){e.callback=this.makeCallback(e,t,r),this.addBinding(e);var i=!1;t.hasKeyword("capture")&&(i=!0),km[e.eventName]&&(i={passive:!0,capture:i}),e.dom&&Ll.addDomEvent(e.dom,e.eventName,e.callback,i)}makeCustomEventCallback(e,t,r){var n;if(e.customEventName==="doubletab"){var i=300,a=t.getFunction("delay");return a&&(i=+(((n=a.args)==null?void 0:n[0])||0)),(...o)=>{this.doubleTab?(window.performance.now()-this.doubleTab.time{var i=r.split(ro);t.push.apply(t,i)}),t}parseDomEvent(e){const t=this.context;var r=e.args;if(r){var i=this.getEventNames(r[0]),a=t[e.originalMethod].bind(t);for(let n=0,o=i.length;nthis.parseObserver(r)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}disconnectObserver(e){e==null||e.disconnect()}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}addObserver(e){this.addBinding(e)}getDefaultDomElement(e){const t=this.context;let r;return e?r=t.refs[e]||t[e]||window[e]:r=t.el||t.$el||t.$root,r instanceof ge?r.getElement():r}createObserver(e,t){var c;const[r,i]=e.args||["intersection"],a=this.getDefaultDomElement(i),n=e.getFunction("params"),o=Oa((c=n==null?void 0:n.args)==null?void 0:c[0]);let l;switch(r){case"intersection":o.root&&(o.root=this.getDefaultDomElement(o.root)),l=new window.IntersectionObserver(t,o||{}),l.observe(a);break;case"mutation":l=new window.MutationObserver(t),l.observe(a,o||{attributes:!0,characterData:!0,childList:!0});break;case"performance":l=new window.PerformanceObserver(t),l.observe(o||{entryTypes:["paint"]});break}return l}bindingObserver(e,t){this.addObserver(this.createObserver(e,t))}parseObserver(e){const t=this.context;var r=t[e.originalMethod].bind(t);this.bindingObserver(e,r)}}class Om extends Da{initialize(){var e,t;this.destroy(),this._callbacks||(this._callbacks=this.context.filterMethodes("subscribe")),!((e=this._bindings)!=null&&e.length)&&((t=this._callbacks)==null?void 0:t.length)&&this._callbacks.forEach(r=>this.parseSubscribe(r))}destroy(){this.context.notEventRedefine||this.context.$store.offAll(this.context)}getCallback(e){return this.context[e]}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}createLocalCallback(e,t){var r=t.bind(this.context);return r.displayName=`${this.context.sourceName}.${e}`,r.source=this.context.source,r}parseSubscribe(e){var P,S;const t=e.args.join(" "),r=[],i=[];let a=0,n=0,o=!1,l=!1,c=!1;const h=e.getFunction("debounce"),u=e.getFunction("throttle"),d=e.getFunction("allTrigger"),v=e.getFunction("selfTrigger"),g=e.getFunction("frame");h&&(a=+(((P=h.args)==null?void 0:P[0])||0)),u&&(n=+(((S=u.args)==null?void 0:S[0])||0)),d&&(o=!0),v&&(l=!0),g&&(c=!0),e.keywords.forEach(V=>{const E=V;this.context[E]?r.push(E):i.push(E)});const y=this.context[e.originalMethod];[...i,t].filter(Boolean).forEach(V=>{var E=this.createLocalCallback(V,y);this.context.$store.on(V,E,this.context,a,n,o,l,r,c)}),this.addBinding(e)}}Kh({BindHandler:Cm,CallbackHandler:Tm,DomEventHandler:Lm,ObserverHandler:Vm,StoreHandler:Om});const Fa="ref",vd=ge.create("div"),yd=`[${Fa}]`,Ol="refclass",Rm=`[${Ol}]`,bd=[],gh=class{constructor(e,t){Pt(this,tl);Pt(this,Fn);Pt(this,rl);Pt(this,di,{});Pt(this,el,{});Pt(this,jn,0);Pt(this,_a,void 0);Pt(this,zn,void 0);Pt(this,Sa,void 0);Pt(this,Pa,{});Pt(this,ys,{});Pt(this,An,!1);Pt(this,Dn,[]);this.refs={},this.children={},this.id=bl(),this.initializeProperty(e,t),this.handlers=this.initializeHandler(),this.initComponents()}get __timestamp(){return Te(this,jn)}get timestamp(){return Te(this,zn)}set timestamp(e){wt(this,zn,e)}get target(){return this.$el.el}checkProps(e={}){return e}initializeProperty(e,t={}){this.opt=e||{},this.parent=this.opt,this.source=bl(),this.sourceName=this.constructor.name,this.props=new Proxy(Te(this,Pa),{get:(r,i)=>Kn(this,rl,tf).call(this,i),set:(r,i)=>{throw new Error(`${i} is readonly`)}}),Kn(this,Fn,kh).call(this,t)}hasProp(e){return Te(this,Dn).includes(e==null?void 0:e.toUpperCase())}setServer(e=!0){wt(this,An,e)}get isServer(){var e;return((e=this.parent)==null?void 0:e.isServer)||Te(this,An)}initComponents(){this.childComponents=this.components()}initializeHandler(){return Zh(this)}initState(){return{}}setState(e={},t=!0){wt(this,el,Te(this,di)),wt(this,di,Object.assign({},Te(this,di),e)),t&&this.load()}toggleState(e,t=!0){this.setState({[e]:!Te(this,di)[e]},t)}apply(e){return Nh(e)}_reload(e,t=null){t&&this.render(t),Kn(this,Fn,kh).call(this,e),wt(this,di,{}),this.setState(this.initState(),!1),this.refresh(!0)}checkLoad(e){window.requestAnimationFrame(()=>{this.render(e)})}get state(){return Te(this,di)}get propKeys(){return Te(this,ys)}get isPreLoaded(){return!0}async render(e){if(!this.isPreLoaded){this.checkLoad(e);return}const t=this.template(),r=this.parseTemplate(t);return this.$el?this.$el.htmlDiff(r):(this.$el=r,this.refs.$el=this.$el,e&&e.append(this.$el)),await this.load(),this.afterRender(),this}get html(){return this.$el.outerHTML()}initialize(){wt(this,di,this.initState())}afterRender(){}components(){return b({},this.parent.childComponents)}getRef(...e){const t=e.join("");return this.refs[t]}refreshElementReference(e,t){for(var r=e.$$(yd),i=0,a=r.length;ithis._getComponentInfo(r)).filter(r=>t.length===0?!0:t.includes(r.refClass))}_getComponentInfo(e){const t=e.attr(Ol),r=this.getEventMachineComponent(t);if(r){let i=this.parsePropertyInfo(e),a=e.attr(Fa);return{$dom:e,refClass:t,props:i,refName:a||i.ref,component:r}}else return{refClass:t,notUsed:!0,$dom:e}}getComponentInfoList(e){if(!e)return bd;let t=e.$$(Rm).filter(r=>r.path().filter(i=>i.attr(Ol)).length===1);return t.length?t.map(r=>this._getComponentInfo(r)):bd}async parseComponent(){const e=this.$el,t=this.getComponentInfoList(e);!t.length||(await Promise.all(t.map(async r=>{r.notUsed?(r.$dom.remove(),console.warn(`${r.refClass} is not used.`)):await this.renderComponent(r)})),La(this.children,(r,i)=>{i.timestamp!==this.__timestamp&&i.clean()}))}clean(){if(this.$el&&!this.$el.hasParent())return La(this.children,(e,t)=>{de(t==null?void 0:t.clean)&&t.clean()}),this.destroy(),!0}refresh(){this.load()}async _afterLoad(){Kn(this,tl,ef).call(this),this.runHandlers("initialize"),await this.bindData(),await this.parseComponent()}async makeLoadAction(e){const[t,...r]=e.args;let i=e.hasKeyword("domdiff");const a=this.refs[t];if(a){const n=await e.execute(...r),o=this.parseTemplate(n,!0);i?a.htmlDiff(o):a.html(o),this.refreshElementReference(a,t)}}async load(...e){Te(this,_a)||wt(this,_a,this.filterMethodes("load"));const t=Te(this,_a).filter(r=>e.length===0?!0:r.args[0]===e[0]);await Promise.all(t.map(async r=>{await this.makeLoadAction(r)})),await this._afterLoad()}async runHandlers(e="run",...t){await Promise.all(this.handlers.filter(r=>r[e]).map(async r=>{await r[e](...t)}))}async bindData(...e){await this.runHandlers("bindData",...e)}template(){return null}eachChildren(e){!de(e)||Object.keys(this.children).forEach(t=>{e(this.children[t])})}hmr(){this.created(),this.initialize(),this.rerender(),this.eachChildren(e=>{e.hmr()})}rerender(){var e=this.$el.parent();this.destroy(),this.render(e)}destroy(){this.eachChildren(e=>{e.destroy()}),this.runHandlers("destroy"),this.$el&&this.$el.remove(),this.$el=null,this.refs={},this.children={}}collectMethodes(e=!1){return(!Te(this,Sa)||e)&&wt(this,Sa,Ke(this,t=>Ur.check(t)).map(t=>Ur.parse(t,this))),Te(this,Sa)}filterMethodes(e,t=!1){return this.collectMethodes(t).filter(r=>r.method===e)}findChildren(e){return this.props.contentChildren.filter(t=>t.component===e)}getChildContent(e,t=""){var r;return((r=this.getChild(e))==null?void 0:r.props.content)||t}getChild(e){return this.props.contentChildren.find(e)}};let Rl=gh;di=new WeakMap,el=new WeakMap,jn=new WeakMap,_a=new WeakMap,zn=new WeakMap,Sa=new WeakMap,Pa=new WeakMap,ys=new WeakMap,An=new WeakMap,Dn=new WeakMap,tl=new WeakSet,ef=function(){Jg(this,jn)._++},Fn=new WeakSet,kh=function(e){wt(this,Pa,this.checkProps(e)),wt(this,ys,{}),Object.keys(e).forEach(t=>{Te(this,ys)[t.toUpperCase()]=t}),wt(this,Dn,Object.keys(Te(this,ys)))},rl=new WeakSet,tf=function(e){return Te(this,Pa)[Te(this,ys)[e.toUpperCase()]]};const il=class extends Rl{constructor(t,r={}){super(t,r);Pt(this,Ks,void 0);r.store?wt(this,Ks,r.store):wt(this,Ks,new xl),this.created(),this.initialize()}currentContext(){return this.contexts[this.contexts.length-1]}setStore(t){wt(this,Ks,t)}get $store(){return Te(this,Ks)||this.parent.$store}async created(){}createLocalCallback(t,r){var i=r.bind(this);return i.displayName=`${this.sourceName}.${t}`,i.source=this.source,i}emit(t,...r){this.$store.source=this.source,this.$store.sourceContext=this,this.$store.emit(t,...r)}nextTick(t,r=0){window.setTimeout(()=>{this.$store.nextTick(t)},r)}trigger(t,...r){this.$store.source=this.source,this.$store.trigger(t,...r)}broadcast(t,...r){Object.keys(this.children).forEach(i=>{this.children[i].trigger(t,...r),this.children[i].broadcast(t,...r)})}on(t,r,i=0,a=0,n=!1,o=!1,l=!1){this.$store.on(t,r,this.source,i,a,n,o,[],l)}off(t,r){this.$store.off(t,r,this.source)}subscribe(t,r=0,i=0){const a=`subscribe.${Jn()}`,n=this.createLocalCallback(a,t);return this.$store.on(a,n,this,r,i,!1,!0),a}createFunctionComponent(t,r,i=il){return super.createFunctionComponent(t,r,i)}static createElementInstance(t,r){if(t.__proto__.name===""){class i extends il{template(){return t.call(this,this.props)}}return new i(r,r)}else return new t(r,r)}};let oi=il;Ks=new WeakMap;const jl=(s,e)=>{const t=ge.create(e.container||document.body),r=oi.createElementInstance(s,e);return r.render(t),Xh(r),r};async function jm(s,e){const t=oi.createElementInstance(s,e);return t.setServer(!0),(await t.render()).html}function zm(s,e=""){var t=s||{};return Object.keys(t).filter(r=>ke(t[r])).map(r=>`${r}: ${t[r]}`).join(";"+e)}function Am(s){return Object.keys(s||{}).map(t=>t==="class"&&Hr(s[t])?`${t}="${kr(s[t])}"`:t==="style"&&Hr(s[t])?`${t}="${zm(s[t])}"`:ai(s[t])||Ct(s[t])||s[t]==="undefined"?s[t]?t:"":`${t}="${s[t]}"`).join(" ")}function R(s,e={},t=[]){t=t.flat(1/0).join("");let r;r=Object.keys(e).length?ji(e):"";const i=e.ref?`ref="${e.ref}"`:"";return`${t}`}function Ba(...s){return s.map(e=>{let t,r={},i=[];return it(e)?t=e:Gt(e)&&([t,r={},i=[]]=e),i.length?R(t,r,Ba(i)):R(t,r)}).join(` +`)}function ao(s,e,t=[]){return t=t.flat(1/0),`<${s} ${Am(e)}>${t.join(" ")}`}function C(s,e={},...t){if(t=t.flat(1/0),s===Lt)return t;if(e=e||{},typeof s!="string"){const r=s.name;return zi({[r]:s}),R(r,e,t)}else return ao(s,e,t)}const Lt=new Object;var L7="",V7="",fi=1e-6,ir=typeof Float32Array!="undefined"?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var s=0,e=arguments.length;e--;)s+=arguments[e]*arguments[e];return Math.sqrt(s)});function xd(){var s=new ir(9);return ir!=Float32Array&&(s[1]=0,s[2]=0,s[3]=0,s[5]=0,s[6]=0,s[7]=0),s[0]=1,s[4]=1,s[8]=1,s}function zl(s,e,t){var r=e[0],i=e[1],a=e[2],n=e[3],o=e[4],l=e[5],c=e[6],h=e[7],u=e[8],d=t[0],v=t[1],g=t[2],y=t[3],P=t[4],S=t[5],V=t[6],E=t[7],I=t[8];return s[0]=d*r+v*n+g*c,s[1]=d*i+v*o+g*h,s[2]=d*a+v*l+g*u,s[3]=y*r+P*n+S*c,s[4]=y*i+P*o+S*h,s[5]=y*a+P*l+S*u,s[6]=V*r+E*n+I*c,s[7]=V*i+E*o+I*h,s[8]=V*a+E*l+I*u,s}function Dm(s,e){return s[0]=1,s[1]=0,s[2]=0,s[3]=0,s[4]=1,s[5]=0,s[6]=e[0],s[7]=e[1],s[8]=1,s}function Fm(s,e){var t=Math.sin(e),r=Math.cos(e);return s[0]=r,s[1]=t,s[2]=0,s[3]=-t,s[4]=r,s[5]=0,s[6]=0,s[7]=0,s[8]=1,s}function Bm(s,e){return s[0]=e[0],s[1]=0,s[2]=0,s[3]=0,s[4]=e[1],s[5]=0,s[6]=0,s[7]=0,s[8]=1,s}function Vt(){var s=new ir(16);return ir!=Float32Array&&(s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[11]=0,s[12]=0,s[13]=0,s[14]=0),s[0]=1,s[5]=1,s[10]=1,s[15]=1,s}function Bi(s,e,t,r,i,a,n,o,l,c,h,u,d,v,g,y){var P=new ir(16);return P[0]=s,P[1]=e,P[2]=t,P[3]=r,P[4]=i,P[5]=a,P[6]=n,P[7]=o,P[8]=l,P[9]=c,P[10]=h,P[11]=u,P[12]=d,P[13]=v,P[14]=g,P[15]=y,P}function Nm(s){return s[0]=1,s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[5]=1,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[10]=1,s[11]=0,s[12]=0,s[13]=0,s[14]=0,s[15]=1,s}function $d(s,e){if(s===e){var t=e[1],r=e[2],i=e[3],a=e[6],n=e[7],o=e[11];s[1]=e[4],s[2]=e[8],s[3]=e[12],s[4]=t,s[6]=e[9],s[7]=e[13],s[8]=r,s[9]=a,s[11]=e[14],s[12]=i,s[13]=n,s[14]=o}else s[0]=e[0],s[1]=e[4],s[2]=e[8],s[3]=e[12],s[4]=e[1],s[5]=e[5],s[6]=e[9],s[7]=e[13],s[8]=e[2],s[9]=e[6],s[10]=e[10],s[11]=e[14],s[12]=e[3],s[13]=e[7],s[14]=e[11],s[15]=e[15];return s}function Dt(s,e){var t=e[0],r=e[1],i=e[2],a=e[3],n=e[4],o=e[5],l=e[6],c=e[7],h=e[8],u=e[9],d=e[10],v=e[11],g=e[12],y=e[13],P=e[14],S=e[15],V=t*o-r*n,E=t*l-i*n,I=t*c-a*n,O=r*l-i*o,B=r*c-a*o,U=i*c-a*l,X=h*y-u*g,ce=h*P-d*g,he=h*S-v*g,ye=u*P-d*y,ve=u*S-v*y,Re=d*S-v*P,Q=V*Re-E*ve+I*ye+O*he-B*ce+U*X;return Q?(Q=1/Q,s[0]=(o*Re-l*ve+c*ye)*Q,s[1]=(i*ve-r*Re-a*ye)*Q,s[2]=(y*U-P*B+S*O)*Q,s[3]=(d*B-u*U-v*O)*Q,s[4]=(l*he-n*Re-c*ce)*Q,s[5]=(t*Re-i*he+a*ce)*Q,s[6]=(P*I-g*U-S*E)*Q,s[7]=(h*U-d*I+v*E)*Q,s[8]=(n*ve-o*he+c*X)*Q,s[9]=(r*he-t*ve-a*X)*Q,s[10]=(g*B-y*I+S*V)*Q,s[11]=(u*I-h*B-v*V)*Q,s[12]=(o*ce-n*ye-l*X)*Q,s[13]=(t*ye-r*ce+i*X)*Q,s[14]=(y*E-g*O-P*V)*Q,s[15]=(h*O-u*E+d*V)*Q,s):null}function Ot(s,e,t){var r=e[0],i=e[1],a=e[2],n=e[3],o=e[4],l=e[5],c=e[6],h=e[7],u=e[8],d=e[9],v=e[10],g=e[11],y=e[12],P=e[13],S=e[14],V=e[15],E=t[0],I=t[1],O=t[2],B=t[3];return s[0]=E*r+I*o+O*u+B*y,s[1]=E*i+I*l+O*d+B*P,s[2]=E*a+I*c+O*v+B*S,s[3]=E*n+I*h+O*g+B*V,E=t[4],I=t[5],O=t[6],B=t[7],s[4]=E*r+I*o+O*u+B*y,s[5]=E*i+I*l+O*d+B*P,s[6]=E*a+I*c+O*v+B*S,s[7]=E*n+I*h+O*g+B*V,E=t[8],I=t[9],O=t[10],B=t[11],s[8]=E*r+I*o+O*u+B*y,s[9]=E*i+I*l+O*d+B*P,s[10]=E*a+I*c+O*v+B*S,s[11]=E*n+I*h+O*g+B*V,E=t[12],I=t[13],O=t[14],B=t[15],s[12]=E*r+I*o+O*u+B*y,s[13]=E*i+I*l+O*d+B*P,s[14]=E*a+I*c+O*v+B*S,s[15]=E*n+I*h+O*g+B*V,s}function kt(s,e,t){var r=t[0],i=t[1],a=t[2],n,o,l,c,h,u,d,v,g,y,P,S;return e===s?(s[12]=e[0]*r+e[4]*i+e[8]*a+e[12],s[13]=e[1]*r+e[5]*i+e[9]*a+e[13],s[14]=e[2]*r+e[6]*i+e[10]*a+e[14],s[15]=e[3]*r+e[7]*i+e[11]*a+e[15]):(n=e[0],o=e[1],l=e[2],c=e[3],h=e[4],u=e[5],d=e[6],v=e[7],g=e[8],y=e[9],P=e[10],S=e[11],s[0]=n,s[1]=o,s[2]=l,s[3]=c,s[4]=h,s[5]=u,s[6]=d,s[7]=v,s[8]=g,s[9]=y,s[10]=P,s[11]=S,s[12]=n*r+h*i+g*a+e[12],s[13]=o*r+u*i+y*a+e[13],s[14]=l*r+d*i+P*a+e[14],s[15]=c*r+v*i+S*a+e[15]),s}function li(s,e,t){var r=t[0],i=t[1],a=t[2];return s[0]=e[0]*r,s[1]=e[1]*r,s[2]=e[2]*r,s[3]=e[3]*r,s[4]=e[4]*i,s[5]=e[5]*i,s[6]=e[6]*i,s[7]=e[7]*i,s[8]=e[8]*a,s[9]=e[9]*a,s[10]=e[10]*a,s[11]=e[11]*a,s[12]=e[12],s[13]=e[13],s[14]=e[14],s[15]=e[15],s}function Gm(s,e,t,r){var i=r[0],a=r[1],n=r[2],o=Math.hypot(i,a,n),l,c,h,u,d,v,g,y,P,S,V,E,I,O,B,U,X,ce,he,ye,ve,Re,Q,He;return o0?(P=Math.sqrt(y+1)*2,s[3]=.25*P,s[0]=(u-v)/P,s[1]=(d-l)/P,s[2]=(o-c)/P):n>h&&n>g?(P=Math.sqrt(1+n-h-g)*2,s[3]=(u-v)/P,s[0]=.25*P,s[1]=(o+c)/P,s[2]=(d+l)/P):h>g?(P=Math.sqrt(1+h-n-g)*2,s[3]=(d-l)/P,s[0]=(o+c)/P,s[1]=.25*P,s[2]=(u+v)/P):(P=Math.sqrt(1+g-n-h)*2,s[3]=(o-c)/P,s[0]=(d+l)/P,s[1]=(u+v)/P,s[2]=.25*P),s}function Xm(s,e,t,r,i){var a=1/Math.tan(e/2),n;return s[0]=a/t,s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[5]=a,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[11]=-1,s[12]=0,s[13]=0,s[15]=0,i!=null&&i!==1/0?(n=1/(r-i),s[10]=(i+r)*n,s[14]=2*i*r*n):(s[10]=-1,s[14]=-2*r),s}var Ym=Xm;function ci(){var s=new ir(3);return ir!=Float32Array&&(s[0]=0,s[1]=0,s[2]=0),s}function Yt(s){var e=new ir(3);return e[0]=s[0],e[1]=s[1],e[2]=s[2],e}function Km(s){var e=s[0],t=s[1],r=s[2];return Math.hypot(e,t,r)}function Ie(s,e,t){var r=new ir(3);return r[0]=s,r[1]=e,r[2]=t,r}function we(s,e,t){return s[0]=e[0]+t[0],s[1]=e[1]+t[1],s[2]=e[2]+t[2],s}function _e(s,e,t){return s[0]=e[0]-t[0],s[1]=e[1]-t[1],s[2]=e[2]-t[2],s}function Gi(s,e,t){return s[0]=e[0]*t[0],s[1]=e[1]*t[1],s[2]=e[2]*t[2],s}function Zm(s,e,t){return s[0]=e[0]/t[0],s[1]=e[1]/t[1],s[2]=e[2]/t[2],s}function Zr(s,e){return s[0]=Math.floor(e[0]),s[1]=Math.floor(e[1]),s[2]=Math.floor(e[2]),s}function Hi(s,e){return s[0]=Math.round(e[0]),s[1]=Math.round(e[1]),s[2]=Math.round(e[2]),s}function Kt(s,e){var t=e[0]-s[0],r=e[1]-s[1],i=e[2]-s[2];return Math.hypot(t,r,i)}function tr(s,e){return s[0]=-e[0],s[1]=-e[1],s[2]=-e[2],s}function qm(s,e){var t=e[0],r=e[1],i=e[2],a=t*t+r*r+i*i;return a>0&&(a=1/Math.sqrt(a)),s[0]=e[0]*a,s[1]=e[1]*a,s[2]=e[2]*a,s}function Qm(s,e){return s[0]*e[0]+s[1]*e[1]+s[2]*e[2]}function Al(s,e,t){var r=e[0],i=e[1],a=e[2],n=t[0],o=t[1],l=t[2];return s[0]=i*l-a*o,s[1]=a*n-r*l,s[2]=r*o-i*n,s}function te(s,e,t,r){var i=e[0],a=e[1],n=e[2];return s[0]=i+r*(t[0]-i),s[1]=a+r*(t[1]-a),s[2]=n+r*(t[2]-n),s}function Ze(s,e,t){var r=e[0],i=e[1],a=e[2],n=t[3]*r+t[7]*i+t[11]*a+t[15];return n=n||1,s[0]=(t[0]*r+t[4]*i+t[8]*a+t[12])/n,s[1]=(t[1]*r+t[5]*i+t[9]*a+t[13])/n,s[2]=(t[2]*r+t[6]*i+t[10]*a+t[14])/n,s}function Dl(s,e){var t=s[0],r=s[1],i=s[2],a=e[0],n=e[1],o=e[2];return Math.abs(t-a)<=fi*Math.max(1,Math.abs(t),Math.abs(a))&&Math.abs(r-n)<=fi*Math.max(1,Math.abs(r),Math.abs(n))&&Math.abs(i-o)<=fi*Math.max(1,Math.abs(i),Math.abs(o))}var Cd=Zm,ae=Kt,Jm=Km;(function(){var s=ci();return function(e,t,r,i,a,n){var o,l;for(t||(t=3),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;o0&&(n=1/Math.sqrt(n)),s[0]=t*n,s[1]=r*n,s[2]=i*n,s[3]=a*n,s}(function(){var s=ev();return function(e,t,r,i,a,n){var o,l;for(t||(t=4),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;ofi?(s[0]=e[0]/r,s[1]=e[1]/r,s[2]=e[2]/r):(s[0]=1,s[1]=0,s[2]=0),t}function Bl(s,e,t,r){var i=e[0],a=e[1],n=e[2],o=e[3],l=t[0],c=t[1],h=t[2],u=t[3],d,v,g,y,P;return v=i*l+a*c+n*h+o*u,v<0&&(v=-v,l=-l,c=-c,h=-h,u=-u),1-v>fi?(d=Math.acos(v),g=Math.sin(d),y=Math.sin((1-r)*d)/g,P=Math.sin(r*d)/g):(y=1-r,P=r),s[0]=y*i+P*l,s[1]=y*a+P*c,s[2]=y*n+P*h,s[3]=y*o+P*u,s}function iv(s,e){var t=e[0]+e[4]+e[8],r;if(t>0)r=Math.sqrt(t+1),s[3]=.5*r,r=.5/r,s[0]=(e[5]-e[7])*r,s[1]=(e[6]-e[2])*r,s[2]=(e[1]-e[3])*r;else{var i=0;e[4]>e[0]&&(i=1),e[8]>e[i*3+i]&&(i=2);var a=(i+1)%3,n=(i+2)%3;r=Math.sqrt(e[i*3+i]-e[a*3+a]-e[n*3+n]+1),s[i]=.5*r,r=.5/r,s[3]=(e[a*3+n]-e[n*3+a])*r,s[a]=(e[a*3+i]+e[i*3+a])*r,s[n]=(e[n*3+i]+e[i*3+n])*r}return s}function sv(s,e,t,r){var i=.5*Math.PI/180;e*=i,t*=i,r*=i;var a=Math.sin(e),n=Math.cos(e),o=Math.sin(t),l=Math.cos(t),c=Math.sin(r),h=Math.cos(r);return s[0]=a*l*h-n*o*c,s[1]=n*o*h+a*l*c,s[2]=n*l*c-a*o*h,s[3]=n*l*h+a*o*c,s}var kd=tv;(function(){var s=ci(),e=Ie(1,0,0),t=Ie(0,1,0);return function(r,i,a){var n=Qm(i,a);return n<-.999999?(Al(s,e,i),Jm(s)<1e-6&&Al(s,t,i),qm(s,s),rv(r,s,Math.PI),r):n>.999999?(r[0]=0,r[1]=0,r[2]=0,r[3]=1,r):(Al(s,i,a),r[0]=s[0],r[1]=s[1],r[2]=s[2],r[3]=1+n,kd(r,r))}})(),function(){var s=Fl(),e=Fl();return function(t,r,i,a,n,o){return Bl(s,r,n,o),Bl(e,i,a,o),Bl(t,s,e,2*o*(1-o)),t}}(),function(){var s=xd();return function(e,t,r,i){return s[0]=r[0],s[3]=r[1],s[6]=r[2],s[1]=i[0],s[4]=i[1],s[7]=i[2],s[2]=-t[0],s[5]=-t[1],s[8]=-t[2],kd(e,iv(e,s))}}();function av(){var s=new ir(2);return ir!=Float32Array&&(s[0]=0,s[1]=0),s}function nv(s,e){var t=e[0]-s[0],r=e[1]-s[1];return Math.hypot(t,r)}function ov(s,e){var t=s[0],r=s[1],i=e[0],a=e[1];return Math.abs(t-i)<=fi*Math.max(1,Math.abs(t),Math.abs(i))&&Math.abs(r-a)<=fi*Math.max(1,Math.abs(r),Math.abs(a))}(function(){var s=av();return function(e,t,r,i,a,n){var o,l;for(t||(t=2),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;ota(`bodyMouseFirstMove ${s}`),xe=(s="move")=>ta(`bodyMouseMove ${s}`),Se=(s="end")=>ta(`bodyMouseUp ${s}`),st="updateViewport",Xl="toggle.fullscreen",Oe="refreshSelection",Xi="refreshSelectionTool",Id="refreshContent",Ed="showComponentPopup",Yl="showNotify",sa="resize.window",Ga="resizeCanvas",Mt="updateCanvas",Kl="openContextMenu",hv="startGuesture",dv="endGuesture",uv="keymapKeydown",pv="keymapKeyup",gv="setLocale",fv="pushModeView",mv="popModeView";let aa={name:void 0};function Zl(){return aa.name===void 0&&(window.navigator.appVersion.indexOf("Win")!=-1?aa.name="win":window.navigator.appVersion.indexOf("Mac")!=-1?aa.name="mac":window.navigator.appVersion.indexOf("X11")!=-1?aa.name="linux":aa.name=""),aa.name}const Yi={backspace:8,tab:9,enter:13,escape:27,space:32,pageup:33,pagedown:34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,semicolon:59,equals:61,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,multiply:106,add:107,subtract:109,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,f16:127,f17:128,f18:129,f19:130,comma:188,",":188,period:190,".":190,slash:191,"/":191,backquote:192,"`":192,openbracket:219,"[":219,backslash:220,"\\":220,closebracket:221,"]":221,quote:222,"'":222,altgr:225},vv={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318",SHIFT:"\u21E7",CTRL:"\u2303",ALT:"\u2325",ENTER:"\u21B5",ESC:"\u238B",TAB:"\u21E5",SPACE:"\u2423",CAPSLOCK:"\u21EA",DELETE:"\u2326",INSERT:"\u2324",HOME:"\u21F1",END:"\u21F2",PAGEUP:"\u21DE",PAGEDOWN:"\u21DF",PRINTSCREEN:"\u2399",SCROLLLOCK:"\u21DE",PAUSE:"\u23CF",NUMLOCK:"\u21EA",META:"\u2318",WINDOWS:"\u2318",CONTEXTMENU:"\u2325",COMMAND:"\u2318"},yv=Zl(),gr=(s,e=yv)=>(s[e]||s.key).split("+").map(t=>t.trim()).map(t=>{const r=t.toUpperCase();return vv[r]||r}).join(" ");class Y extends oi{get notEventRedefine(){return!0}get $editor(){if(!this.__cacheParentEditor){let e=this.parent;for(;e;){if(e.$editor){this.__cacheParentEditor=e.$editor;break}e=e.parent}}return this.__cacheParentEditor}get $context(){return this.$editor.context}get $store(){return this.$context.store||this.parent.$store}get localeKey(){return""}getMessageKey(e){return this.localeKey?`${this.localeKey}.${e}`:e}$i18n(e,t={},r){return this.$editor.getI18nMessage(this.getMessageKey(e),t,r)}$initI18n(e){return this.$editor.initI18nMessage(this.getMessageKey(e))}get $config(){return this.$context.config}get $selection(){return this.$context.selection}get $segmentSelection(){return this.$context.segmentSelection}get $commands(){return this.$context.commands}get $viewport(){return this.$context.viewport}get $snapManager(){return this.$context.snapManager}get $timeline(){return this.$context.timeline}get $history(){return this.$context.history}get $shortcuts(){return this.$context.shortcuts}get $keyboardManager(){return this.$context.keyboardManager}get $storageManager(){return this.$context.storageManager}get $injectManager(){return this.$context.injectManager}get $model(){return this.$context.modelManager}get $lockManager(){return this.$context.lockManager}get $visibleManager(){return this.$context.visibleManager}get $modeView(){return this.$context.modeViewManager}get $icon(){return this.$context.icon}get $stateManager(){return this.$context.stateManager}get $menu(){return this.$context.menuManager}notify(e,t,r,i=1e3){this.emit(Yl,e,t,r,i)}alert(e,t,r=1e3){this.notify(Md.ALERT,e,t,r)}$theme(e){return this.$editor.themeValue(e)}bodyMouseFirstMove(e,t){this[t]&&this.emit(Hl,this[t],this,e.xy)}bodyMouseMove(e,t){this[t]&&this.emit(Ul,this[t],this,e.xy)}bodyMouseUp(e,t){this[t]&&this.emit(Wl,this[t],this,e.xy)}createFunctionComponent(e,t,r=Y){return super.createFunctionComponent(e,t,r)}}class bv extends Y{initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.refreshCursor()})}template(){return C("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},C("div",{class:"page-view",ref:"$pageView"},C("div",{class:"page-lock scrollbar",ref:"$lock"},this.$injectManager.generate("canvas.view"))))}[ne("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$context.config.is("editing.mode",St.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(Yi.space))}[me("$lock")+fe("checkSpace")+xe("movePan")+Se("moveEndPan")](){this.startMovePan()}[Tt("editing.mode")](){this.$config.is("editing.mode",St.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ci()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const r=Ie(e,t,0);this.$context.viewport.pan(...Ze([],_e([],this.lastDist,r),this.$context.viewport.scaleMatrixInverse)),this.lastDist=r}refreshCursor(){this.$context.config.is("editing.mode",St.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}async[ne("$container")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}[Yr("$lock")+Ve](){}[Xr("$lock")+Ve](e){const t=this.$context.viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$command.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const r=ge.create(e.target).attr("data-id");if(r)this.$command.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},r);else{const i=e.dataTransfer.getData("image/info");this.$command.emit("dropImageUrl",i)}}}[Ml("$lock")+Ve](e){const[t,r]=El(e);if(!this.state.gesture)e.ctrlKey&&this.$context.viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const i=1-2.5*r/100;this.$context.viewport.zoom(i)}else{const i=-2.5*t,a=-2.5*r;this.$context.viewport.pan(-i/this.$viewport.scale,-a/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$context.viewport.refreshCanvasSize(this.refs.$lock.rect())}[M(sa,Ga)](){this.refreshCanvasSize()}[Tt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Tt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[M(st)](){this.$commands.emit("refreshCursor","auto")}}var R7="";class Ld extends Y{template(){return`
${this.$injectManager.generate("page.subeditor.view")}
- `}}class XM extends ge{components(){return{BlankCanvasView:WM,PageSubEditor:jf}}template(){return` + `}}class xv extends Y{components(){return{BlankCanvasView:bv,PageSubEditor:Ld}}template(){return`
- ${W("PageSubEditor")} + ${R("PageSubEditor")}
- ${W("BlankCanvasView")} + ${R("BlankCanvasView")}
- `}[U(Df)](){this.refs.$el.toggleFullscreen()}}class Gf extends ds{get notEventRedefine(){return!0}getValue(){return this.props.defaultValue}sendEvent(){const e=this.props.key,t=this.getValue(),i=this.props.params;Ue(this.props.onClick)?this.props.onClick(e,t,i):this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):ni(this.props.action)||Ue(this.props.action)?this.emit(this.props.action,e,t,i):Fi(this.props.action)?this.emit(this.props.action.map(r=>[r,e,t,i])):this.props.onChange&&this.parent.trigger(this.props.onChange,e,t,i)}}var jte="";class YM extends Gf{initState(){return{label:this.props.label||"",text:this.props.text||"",params:this.props.params||""}}template(){return"
"}[ve("$body")+It](){var{label:e,text:t}=this.state,i=e?"has-label":"";return` -
+ `}[M(Xl)](){this.refs.$el.toggleFullscreen()}}class ql extends oi{get notEventRedefine(){return!0}getValue(){return this.props.defaultValue}sendEvent(){const e=this.props.key,t=this.getValue(),r=this.props.params;de(this.props.onClick)?this.props.onClick(e,t,r):this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):it(this.props.action)||de(this.props.action)?this.emit(this.props.action,e,t,r):Gt(this.props.action)?this.emit(this.props.action.map(i=>[i,e,t,r])):this.props.onChange&&this.parent.trigger(this.props.onChange,e,t,r)}}var j7="";class $v extends ql{initState(){return{label:this.props.label||"",text:this.props.text||"",params:this.props.params||""}}template(){return"
"}[G("$body")+Ee](){var{label:e,text:t}=this.state,r=e?"has-label":"";return` +
${e?``:""}
- `}getValue(){return this.props.defaultValue}[se("$el button")](){this.sendEvent()}}var Gte="";const KM=["True","False"];class qM extends Gf{initState(){return{checkedValue:this.props.checkedValue||this.props.value,checked:this.props.value||"false",toggleLabels:this.props.toggleLabels||KM,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||["true","false"]}}template(){return D("div",{class:"small-editor button",ref:"$body"})}[ve("$body")+It](){var{checked:e,checkedValue:t}=this.state;return` + `}getValue(){return this.props.defaultValue}[A("$el button")](){this.sendEvent()}}var z7="";const _v=["True","False"];class Sv extends ql{initState(){return{checkedValue:this.props.checkedValue||this.props.value,checked:this.props.value||"false",size:this.props.size,toggleLabels:this.props.toggleLabels||_v,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||["true","false"]}}template(){return C("div",{class:"small-editor button",ref:"$body"})}[G("$body")+Ee](){var{checked:e,checkedValue:t}=this.state;return`
- ${this.state.toggleValues.map((i,r)=>{let s=this.state.toggleLabels[r],a=this.state.toggleTitles[r];return D("div",{class:`${i===e?"visible":""} ${i===t?"checked":""}`},D("button",{type:"button","data-index":r,class:i===t?"checked":"",value:i,title:a,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},s))}).join("")} + ${this.state.toggleValues.map((r,i)=>{let a=this.state.toggleLabels[i],n=this.state.toggleTitles[i];return C("div",{class:`${r===e?"visible":""} ${r===t?"checked":""}`},C("button",{type:"button","data-index":i,class:r===t?"checked":"",value:r,title:n,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},a))}).join("")}
- `}[$e("$area")](){return{"data-selected-index":this.state.toggleValues.findIndex(t=>t===this.state.checked)}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[se("$el button")+St+Bn](e){const t=e.$dt.value,i=this.state.toggleValues.findIndex(s=>s===t),r=this.state.toggleValues[(i+1)%this.state.toggleValues.length];this.setValue(r),this.trigger("change")}[Me("change")](){this.sendEvent()}}var Hte="";const ZM=["True","False"];class JM extends Gf{initState(){return{label:this.props.label||"",checked:this.props.value||!1,toggleLabels:this.props.toggleLabels||ZM,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||[!0,!1]}}template(){return D("div",{class:"small-editor button",ref:"$body"})}[ve("$body")](){var{label:e,checked:t}=this.state,i=e?"has-label":"";return` -
+ `}[ne("$area")](){return{"data-selected-index":this.state.toggleValues.findIndex(t=>t===this.state.checked)}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[A("$el button")+Ve+Wr](e){const t=e.$dt.value,r=this.state.toggleValues.findIndex(a=>a===t),i=this.state.toggleValues[(r+1)%this.state.toggleValues.length];this.setValue(i),this.trigger("change")}[Z("change")](){this.sendEvent()}}var A7="";const Pv=["True","False"];class wv extends ql{initState(){return{label:this.props.label||"",checked:this.props.value||!1,toggleLabels:this.props.toggleLabels||Pv,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||[!0,!1]}}template(){return C("div",{class:"small-editor button",ref:"$body"})}[G("$body")](){var{label:e,checked:t}=this.state,r=e?"has-label":"";return` +
${e?``:""}
- ${this.state.toggleValues.map((r,s)=>{let a=this.state.toggleLabels[s],o=this.state.toggleTitles[s];return D("div",null,D("button",{type:"button",class:`${r===t?"checked":""}`,"data-index":s,title:o,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},a))}).join("")} + ${this.state.toggleValues.map((i,a)=>{let n=this.state.toggleLabels[a],o=this.state.toggleTitles[a];return C("div",null,C("button",{type:"button",class:`${i===t?"checked":""}`,"data-index":a,title:o,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},n))}).join("")}
- `}[$e("$area")](){const e=this.state.toggleValues.findIndex(i=>i===this.state.checked),t=100/this.state.toggleValues.length;return{"data-selected-index":e,cssText:` + `}[ne("$area")](){const e=this.state.toggleValues.findIndex(r=>r===this.state.checked),t=100/this.state.toggleValues.length;return{"data-selected-index":e,cssText:` --unit-count: ${this.state.toggleValues.length}; --button-font-size: ${13-this.state.toggleValues.length}px ; --selected-button-size: ${1/this.state.toggleValues.length*100}%; --selected-button-position: ${e*t}%; - `}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[se("$el button")](e){const t=+e.$dt.data("index");this.setValue(this.state.toggleValues[t]),this.trigger("change")}[Me("change")](){this.sendEvent()}}class Hn extends ds{initState(){return{value:this.props.value||""}}template(){const{content:e}=this.props,{value:t}=this.state;return D("div",{class:"tab-content scrollbar","data-value":t},e)}}var Ute="";class zc extends ds{afterRender(){window.setTimeout(()=>{this.setValue(this.state.selectedValue)},0)}initState(){return{type:this.props.type||"number",direction:this.props.direction||"",selectedValue:this.props.selectedValue||""}}template(){return` + `}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[A("$el button")](e){const t=+e.$dt.data("index");this.setValue(this.state.toggleValues[t]),this.trigger("change")}[Z("change")](){this.sendEvent()}}class Ha extends oi{initState(){return{value:this.props.value||""}}template(){const{content:e}=this.props,{value:t}=this.state;return C("div",{class:"tab-content scrollbar","data-value":t},e)}}var D7="";class Ql extends oi{afterRender(){window.setTimeout(()=>{this.setValue(this.state.selectedValue)},0)}initState(){return{type:this.props.type||"number",direction:this.props.direction||"",selectedValue:this.props.selectedValue||""}}template(){return`
- `}[ve("$tab")](){const{content:e,contentChildren:t=[]}=this.props,i=t.filter(r=>r.component===Hn);return[D("div",{class:"tab-header",ref:"$header"},i.map(r=>D("div",{class:"tab-item","data-value":r.props.value,title:r.props.title},D("label",{class:"title"},r.props.icon||r.props.title)))),D("div",{class:"tab-body",ref:"$body"},e)]}[se("$header .tab-item:not(.empty-item)")](e){var t=e.$dt.attr("data-value");this.setValue(t)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.getValue())}getValue(){return this.state.selectedValue}setValue(e){var t,i;(t=this.$el.$(`* > .tab-item[data-value="${e}"]`))==null||t.onlyOneClass("selected"),(i=this.$el.$(`* > .tab-content[data-value="${e}"]`))==null||i.onlyOneClass("selected"),this.updateData({selectedValue:e})}}class QM extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",co.DESIGN))}[$e("$el")](){return{style:{display:this.$config.is("editor.design.mode",co.DESIGN)?"block":"none"}}}template(){return D("div",{class:"feature-control inspector"},D("div",null,D(zc,{ref:"$tab",selectedValue:this.$config.get("inspector.selectedValue"),onchange:e=>{this.$config.set("inspector.selectedValue",e)}},this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,icon:r,loadElements:s=[]}=e.class;return D(Hn,{value:t,title:i,icon:r},D("div",{style:"display: flex: flex-direction: column;"},s==null?void 0:s.map(a=>dl(a)),this.$injectManager.generate("inspector.tab."+t),D("div",{class:"empty",style:"order: 1000000;"})))}))))}}class e$ extends ge{template(){return D("div",{class:"layer-tab"},D(zc,{ref:"$tab",type:"side",direction:"left",selectedValue:this.$config.get("layertab.selectedValue"),onchange:e=>{this.$config.set("layertab.selectedValue",e)}},this.$injectManager.getTargetUI("layertab.tab").map(e=>{const{value:t,title:i,icon:r,loadElements:s=[]}=e.class;return D(Hn,{value:t,title:i,icon:r},D("div",{style:"display: flex: flex-direction: column;"},s==null?void 0:s.map(a=>dl(a)),this.$injectManager.generate("layertab.tab."+t),D("div",{class:"empty",style:"order: 1000000;"})))})))}}var Wte="",Xte="";function j(n,e){const t=Object.assign({width:24,height:24},e);return` + `}[G("$tab")](){const{content:e,contentChildren:t=[]}=this.props,r=t.filter(i=>i.component===Ha);return[C("div",{class:"tab-header",ref:"$header"},r.map(i=>C("div",{class:"tab-item","data-value":i.props.value,title:i.props.title},C("label",{class:"title"},i.props.icon||i.props.title)))),C("div",{class:"tab-body",ref:"$body"},e)]}[A("$header .tab-item:not(.empty-item)")](e){var t=e.$dt.attr("data-value");this.setValue(t)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.getValue())}getValue(){return this.state.selectedValue}setValue(e){var t,r;(t=this.$el.$(`* > .tab-item[data-value="${e}"]`))==null||t.onlyOneClass("selected"),(r=this.$el.$(`* > .tab-content[data-value="${e}"]`))==null||r.onlyOneClass("selected"),this.updateData({selectedValue:e})}}class Cv extends Y{template(){return C("div",{class:"feature-control inspector"},C("div",null,C(Ql,{ref:"$tab",selectedValue:this.$config.get("inspector.selectedValue"),onchange:e=>{this.$config.set("inspector.selectedValue",e)}},this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:r,icon:i,loadElements:a=[]}=e.class;return C(Ha,{value:t,title:r,icon:i},C("div",{style:"display: flex: flex-direction: column;"},a==null?void 0:a.map(n=>ao(n)),this.$injectManager.generate("inspector.tab."+t),C("div",{class:"empty",style:"order: 1000000;"})))}))))}}class Tv extends Y{template(){return C("div",{class:"layer-tab"},C(Ql,{ref:"$tab",type:"side",direction:"left",selectedValue:this.$config.get("layertab.selectedValue"),onchange:e=>{this.$config.set("layertab.selectedValue",e)}},this.$injectManager.getTargetUI("layertab.tab").map(e=>{const{value:t,title:r,icon:i,loadElements:a=[]}=e.class;return C(Ha,{value:t,title:r,icon:i},C("div",{style:"display: flex: flex-direction: column;"},a==null?void 0:a.map(n=>ao(n)),this.$injectManager.generate("layertab.tab."+t),C("div",{class:"empty",style:"order: 1000000;"})))})))}}var F7="",B7="";function T(s,e){const t=Object.assign({width:24,height:24},e);return` ${n}`}var t$=Object.freeze(Object.defineProperty({__proto__:null,default:j},Symbol.toStringTag,{value:"Module"})),i$=j(''),r$=Object.freeze(Object.defineProperty({__proto__:null,default:i$},Symbol.toStringTag,{value:"Module"})),n$=j(''),s$=Object.freeze(Object.defineProperty({__proto__:null,default:n$},Symbol.toStringTag,{value:"Module"})),a$=j(''),o$=Object.freeze(Object.defineProperty({__proto__:null,default:a$},Symbol.toStringTag,{value:"Module"})),l$=j(''),c$=Object.freeze(Object.defineProperty({__proto__:null,default:l$},Symbol.toStringTag,{value:"Module"})),h$=j(''),d$=Object.freeze(Object.defineProperty({__proto__:null,default:h$},Symbol.toStringTag,{value:"Module"})),u$=j(''),p$=Object.freeze(Object.defineProperty({__proto__:null,default:u$},Symbol.toStringTag,{value:"Module"})),f$=j(''),g$=Object.freeze(Object.defineProperty({__proto__:null,default:f$},Symbol.toStringTag,{value:"Module"})),m$=j(''),v$=Object.freeze(Object.defineProperty({__proto__:null,default:m$},Symbol.toStringTag,{value:"Module"})),y$=j(''),b$=Object.freeze(Object.defineProperty({__proto__:null,default:y$},Symbol.toStringTag,{value:"Module"})),x$=j(''),_$=Object.freeze(Object.defineProperty({__proto__:null,default:x$},Symbol.toStringTag,{value:"Module"})),S$=j(''),w$=Object.freeze(Object.defineProperty({__proto__:null,default:S$},Symbol.toStringTag,{value:"Module"})),M$=j(''),$$=Object.freeze(Object.defineProperty({__proto__:null,default:M$},Symbol.toStringTag,{value:"Module"})),P$=j(''),T$=Object.freeze(Object.defineProperty({__proto__:null,default:P$},Symbol.toStringTag,{value:"Module"})),C$=j(''),E$=Object.freeze(Object.defineProperty({__proto__:null,default:C$},Symbol.toStringTag,{value:"Module"})),I$=j(''),L$=Object.freeze(Object.defineProperty({__proto__:null,default:I$},Symbol.toStringTag,{value:"Module"})),k$=j(''),A$=Object.freeze(Object.defineProperty({__proto__:null,default:k$},Symbol.toStringTag,{value:"Module"})),R$=j(''),O$=Object.freeze(Object.defineProperty({__proto__:null,default:R$},Symbol.toStringTag,{value:"Module"})),z$=j(''),V$=Object.freeze(Object.defineProperty({__proto__:null,default:z$},Symbol.toStringTag,{value:"Module"})),D$=j(''),F$=Object.freeze(Object.defineProperty({__proto__:null,default:D$},Symbol.toStringTag,{value:"Module"})),N$=j(''),B$=Object.freeze(Object.defineProperty({__proto__:null,default:N$},Symbol.toStringTag,{value:"Module"})),j$=j(''),G$=Object.freeze(Object.defineProperty({__proto__:null,default:j$},Symbol.toStringTag,{value:"Module"})),H$=j(''),U$=Object.freeze(Object.defineProperty({__proto__:null,default:H$},Symbol.toStringTag,{value:"Module"})),W$=j('',{width:48,height:48}),X$=Object.freeze(Object.defineProperty({__proto__:null,default:W$},Symbol.toStringTag,{value:"Module"})),Y$=j(''),K$=Object.freeze(Object.defineProperty({__proto__:null,default:Y$},Symbol.toStringTag,{value:"Module"})),q$=j(''),Z$=Object.freeze(Object.defineProperty({__proto__:null,default:q$},Symbol.toStringTag,{value:"Module"})),J$=j(''),Q$=Object.freeze(Object.defineProperty({__proto__:null,default:J$},Symbol.toStringTag,{value:"Module"})),eP=j(''),tP=Object.freeze(Object.defineProperty({__proto__:null,default:eP},Symbol.toStringTag,{value:"Module"})),iP=j(''),rP=Object.freeze(Object.defineProperty({__proto__:null,default:iP},Symbol.toStringTag,{value:"Module"})),nP=j(''),sP=Object.freeze(Object.defineProperty({__proto__:null,default:nP},Symbol.toStringTag,{value:"Module"})),aP=j('',{width:30,height:30}),oP=Object.freeze(Object.defineProperty({__proto__:null,default:aP},Symbol.toStringTag,{value:"Module"})),lP=j(`${s}`}var kv=Object.freeze(Object.defineProperty({__proto__:null,default:T},Symbol.toStringTag,{value:"Module"})),Mv=T(''),Iv=Object.freeze(Object.defineProperty({__proto__:null,default:Mv},Symbol.toStringTag,{value:"Module"})),Ev=T(''),Lv=Object.freeze(Object.defineProperty({__proto__:null,default:Ev},Symbol.toStringTag,{value:"Module"})),Vv=T(''),Ov=Object.freeze(Object.defineProperty({__proto__:null,default:Vv},Symbol.toStringTag,{value:"Module"})),Rv=T(''),jv=Object.freeze(Object.defineProperty({__proto__:null,default:Rv},Symbol.toStringTag,{value:"Module"})),zv=T(''),Av=Object.freeze(Object.defineProperty({__proto__:null,default:zv},Symbol.toStringTag,{value:"Module"})),Dv=T(''),Fv=Object.freeze(Object.defineProperty({__proto__:null,default:Dv},Symbol.toStringTag,{value:"Module"})),Bv=T(''),Nv=Object.freeze(Object.defineProperty({__proto__:null,default:Bv},Symbol.toStringTag,{value:"Module"})),Gv=T(''),Hv=Object.freeze(Object.defineProperty({__proto__:null,default:Gv},Symbol.toStringTag,{value:"Module"})),Uv=T(''),Wv=Object.freeze(Object.defineProperty({__proto__:null,default:Uv},Symbol.toStringTag,{value:"Module"})),Xv=T(''),Yv=Object.freeze(Object.defineProperty({__proto__:null,default:Xv},Symbol.toStringTag,{value:"Module"})),Kv=T(''),Zv=Object.freeze(Object.defineProperty({__proto__:null,default:Kv},Symbol.toStringTag,{value:"Module"})),qv=T(''),Qv=Object.freeze(Object.defineProperty({__proto__:null,default:qv},Symbol.toStringTag,{value:"Module"})),Jv=T(''),e1=Object.freeze(Object.defineProperty({__proto__:null,default:Jv},Symbol.toStringTag,{value:"Module"})),t1=T(''),r1=Object.freeze(Object.defineProperty({__proto__:null,default:t1},Symbol.toStringTag,{value:"Module"})),i1=T(''),s1=Object.freeze(Object.defineProperty({__proto__:null,default:i1},Symbol.toStringTag,{value:"Module"})),a1=T(''),n1=Object.freeze(Object.defineProperty({__proto__:null,default:a1},Symbol.toStringTag,{value:"Module"})),o1=T(''),l1=Object.freeze(Object.defineProperty({__proto__:null,default:o1},Symbol.toStringTag,{value:"Module"})),c1=T(''),h1=Object.freeze(Object.defineProperty({__proto__:null,default:c1},Symbol.toStringTag,{value:"Module"})),d1=T(''),u1=Object.freeze(Object.defineProperty({__proto__:null,default:d1},Symbol.toStringTag,{value:"Module"})),p1=T(''),g1=Object.freeze(Object.defineProperty({__proto__:null,default:p1},Symbol.toStringTag,{value:"Module"})),f1=T(''),m1=Object.freeze(Object.defineProperty({__proto__:null,default:f1},Symbol.toStringTag,{value:"Module"})),v1=T(''),y1=Object.freeze(Object.defineProperty({__proto__:null,default:v1},Symbol.toStringTag,{value:"Module"})),b1=T('',{width:48,height:48}),x1=Object.freeze(Object.defineProperty({__proto__:null,default:b1},Symbol.toStringTag,{value:"Module"})),$1=T(''),_1=Object.freeze(Object.defineProperty({__proto__:null,default:$1},Symbol.toStringTag,{value:"Module"})),S1=T(''),P1=Object.freeze(Object.defineProperty({__proto__:null,default:S1},Symbol.toStringTag,{value:"Module"})),w1=T(''),C1=Object.freeze(Object.defineProperty({__proto__:null,default:w1},Symbol.toStringTag,{value:"Module"})),T1=T(''),k1=Object.freeze(Object.defineProperty({__proto__:null,default:T1},Symbol.toStringTag,{value:"Module"})),M1=T(''),I1=Object.freeze(Object.defineProperty({__proto__:null,default:M1},Symbol.toStringTag,{value:"Module"})),E1=T(''),L1=Object.freeze(Object.defineProperty({__proto__:null,default:E1},Symbol.toStringTag,{value:"Module"})),V1=T('',{width:30,height:30}),O1=Object.freeze(Object.defineProperty({__proto__:null,default:V1},Symbol.toStringTag,{value:"Module"})),R1=T(``,{width:30,height:30}),cP=Object.freeze(Object.defineProperty({__proto__:null,default:lP},Symbol.toStringTag,{value:"Module"})),hP=j('',{width:30,height:30}),dP=Object.freeze(Object.defineProperty({__proto__:null,default:hP},Symbol.toStringTag,{value:"Module"})),uP=j(``,{width:30,height:30}),j1=Object.freeze(Object.defineProperty({__proto__:null,default:R1},Symbol.toStringTag,{value:"Module"})),z1=T('',{width:30,height:30}),A1=Object.freeze(Object.defineProperty({__proto__:null,default:z1},Symbol.toStringTag,{value:"Module"})),D1=T(``,{width:30,height:30}),pP=Object.freeze(Object.defineProperty({__proto__:null,default:uP},Symbol.toStringTag,{value:"Module"})),fP=j(''),gP=Object.freeze(Object.defineProperty({__proto__:null,default:fP},Symbol.toStringTag,{value:"Module"})),mP=j(''),vP=Object.freeze(Object.defineProperty({__proto__:null,default:mP},Symbol.toStringTag,{value:"Module"})),yP=j(''),bP=Object.freeze(Object.defineProperty({__proto__:null,default:yP},Symbol.toStringTag,{value:"Module"})),xP=j(''),_P=Object.freeze(Object.defineProperty({__proto__:null,default:xP},Symbol.toStringTag,{value:"Module"})),SP=j(''),wP=Object.freeze(Object.defineProperty({__proto__:null,default:SP},Symbol.toStringTag,{value:"Module"})),MP=j(''),$P=Object.freeze(Object.defineProperty({__proto__:null,default:MP},Symbol.toStringTag,{value:"Module"})),PP=j(''),TP=Object.freeze(Object.defineProperty({__proto__:null,default:PP},Symbol.toStringTag,{value:"Module"})),CP=j(''),EP=Object.freeze(Object.defineProperty({__proto__:null,default:CP},Symbol.toStringTag,{value:"Module"})),IP=j(` +" fill-rule="evenodd"/>`,{width:30,height:30}),F1=Object.freeze(Object.defineProperty({__proto__:null,default:D1},Symbol.toStringTag,{value:"Module"})),B1=T(''),N1=Object.freeze(Object.defineProperty({__proto__:null,default:B1},Symbol.toStringTag,{value:"Module"})),G1=T(''),H1=Object.freeze(Object.defineProperty({__proto__:null,default:G1},Symbol.toStringTag,{value:"Module"})),U1=T(''),W1=Object.freeze(Object.defineProperty({__proto__:null,default:U1},Symbol.toStringTag,{value:"Module"})),X1=T(''),Y1=Object.freeze(Object.defineProperty({__proto__:null,default:X1},Symbol.toStringTag,{value:"Module"})),K1=T(''),Z1=Object.freeze(Object.defineProperty({__proto__:null,default:K1},Symbol.toStringTag,{value:"Module"})),q1=T(''),Q1=Object.freeze(Object.defineProperty({__proto__:null,default:q1},Symbol.toStringTag,{value:"Module"})),J1=T(''),e0=Object.freeze(Object.defineProperty({__proto__:null,default:J1},Symbol.toStringTag,{value:"Module"})),t0=T(''),r0=Object.freeze(Object.defineProperty({__proto__:null,default:t0},Symbol.toStringTag,{value:"Module"})),i0=T(` -`),LP=Object.freeze(Object.defineProperty({__proto__:null,default:IP},Symbol.toStringTag,{value:"Module"})),kP=j(` +`),s0=Object.freeze(Object.defineProperty({__proto__:null,default:i0},Symbol.toStringTag,{value:"Module"})),a0=T(` -`),AP=Object.freeze(Object.defineProperty({__proto__:null,default:kP},Symbol.toStringTag,{value:"Module"})),RP=j(''),OP=Object.freeze(Object.defineProperty({__proto__:null,default:RP},Symbol.toStringTag,{value:"Module"})),zP=j(''),VP=Object.freeze(Object.defineProperty({__proto__:null,default:zP},Symbol.toStringTag,{value:"Module"})),DP=j(''),FP=Object.freeze(Object.defineProperty({__proto__:null,default:DP},Symbol.toStringTag,{value:"Module"})),NP=j(` +`),n0=Object.freeze(Object.defineProperty({__proto__:null,default:a0},Symbol.toStringTag,{value:"Module"})),o0=T(''),l0=Object.freeze(Object.defineProperty({__proto__:null,default:o0},Symbol.toStringTag,{value:"Module"})),c0=T(''),h0=Object.freeze(Object.defineProperty({__proto__:null,default:c0},Symbol.toStringTag,{value:"Module"})),d0=T(''),u0=Object.freeze(Object.defineProperty({__proto__:null,default:d0},Symbol.toStringTag,{value:"Module"})),p0=T(` -`),BP=Object.freeze(Object.defineProperty({__proto__:null,default:NP},Symbol.toStringTag,{value:"Module"})),jP=j(''),GP=Object.freeze(Object.defineProperty({__proto__:null,default:jP},Symbol.toStringTag,{value:"Module"})),HP=j(''),UP=Object.freeze(Object.defineProperty({__proto__:null,default:HP},Symbol.toStringTag,{value:"Module"})),WP=j(''),XP=Object.freeze(Object.defineProperty({__proto__:null,default:WP},Symbol.toStringTag,{value:"Module"})),YP=j(''),KP=Object.freeze(Object.defineProperty({__proto__:null,default:YP},Symbol.toStringTag,{value:"Module"})),qP=j(''),ZP=Object.freeze(Object.defineProperty({__proto__:null,default:qP},Symbol.toStringTag,{value:"Module"})),JP=j(''),QP=Object.freeze(Object.defineProperty({__proto__:null,default:JP},Symbol.toStringTag,{value:"Module"})),eT=j(''),tT=Object.freeze(Object.defineProperty({__proto__:null,default:eT},Symbol.toStringTag,{value:"Module"})),iT=j(` +`),g0=Object.freeze(Object.defineProperty({__proto__:null,default:p0},Symbol.toStringTag,{value:"Module"})),f0=T(''),m0=Object.freeze(Object.defineProperty({__proto__:null,default:f0},Symbol.toStringTag,{value:"Module"})),v0=T(''),y0=Object.freeze(Object.defineProperty({__proto__:null,default:v0},Symbol.toStringTag,{value:"Module"})),b0=T(''),x0=Object.freeze(Object.defineProperty({__proto__:null,default:b0},Symbol.toStringTag,{value:"Module"})),$0=T(''),_0=Object.freeze(Object.defineProperty({__proto__:null,default:$0},Symbol.toStringTag,{value:"Module"})),S0=T(''),P0=Object.freeze(Object.defineProperty({__proto__:null,default:S0},Symbol.toStringTag,{value:"Module"})),w0=T(''),C0=Object.freeze(Object.defineProperty({__proto__:null,default:w0},Symbol.toStringTag,{value:"Module"})),T0=T(''),k0=Object.freeze(Object.defineProperty({__proto__:null,default:T0},Symbol.toStringTag,{value:"Module"})),M0=T(` -`),rT=Object.freeze(Object.defineProperty({__proto__:null,default:iT},Symbol.toStringTag,{value:"Module"})),nT=j(''),sT=Object.freeze(Object.defineProperty({__proto__:null,default:nT},Symbol.toStringTag,{value:"Module"})),aT=j(` +`),I0=Object.freeze(Object.defineProperty({__proto__:null,default:M0},Symbol.toStringTag,{value:"Module"})),E0=T(''),L0=Object.freeze(Object.defineProperty({__proto__:null,default:E0},Symbol.toStringTag,{value:"Module"})),V0=T(` -`),oT=Object.freeze(Object.defineProperty({__proto__:null,default:aT},Symbol.toStringTag,{value:"Module"})),lT=j(''),cT=Object.freeze(Object.defineProperty({__proto__:null,default:lT},Symbol.toStringTag,{value:"Module"})),hT=j(''),dT=Object.freeze(Object.defineProperty({__proto__:null,default:hT},Symbol.toStringTag,{value:"Module"})),uT=j(''),pT=Object.freeze(Object.defineProperty({__proto__:null,default:uT},Symbol.toStringTag,{value:"Module"})),fT=j(''),gT=Object.freeze(Object.defineProperty({__proto__:null,default:fT},Symbol.toStringTag,{value:"Module"})),mT=j(''),vT=Object.freeze(Object.defineProperty({__proto__:null,default:mT},Symbol.toStringTag,{value:"Module"}));function yT(n=""){return j(` - - `,{width:24,height:24,viewBoxWidth:16,viewBoxHeight:16})}var bT=Object.freeze(Object.defineProperty({__proto__:null,default:yT},Symbol.toStringTag,{value:"Module"})),xT=j(''),_T=Object.freeze(Object.defineProperty({__proto__:null,default:xT},Symbol.toStringTag,{value:"Module"})),ST=j(''),wT=Object.freeze(Object.defineProperty({__proto__:null,default:ST},Symbol.toStringTag,{value:"Module"})),MT=j(''),$T=Object.freeze(Object.defineProperty({__proto__:null,default:MT},Symbol.toStringTag,{value:"Module"})),PT=j(''),TT=Object.freeze(Object.defineProperty({__proto__:null,default:PT},Symbol.toStringTag,{value:"Module"})),CT=j(''),ET=Object.freeze(Object.defineProperty({__proto__:null,default:CT},Symbol.toStringTag,{value:"Module"})),IT=j(''),LT=Object.freeze(Object.defineProperty({__proto__:null,default:IT},Symbol.toStringTag,{value:"Module"})),kT=j(''),AT=Object.freeze(Object.defineProperty({__proto__:null,default:kT},Symbol.toStringTag,{value:"Module"})),RT=j(''),OT=Object.freeze(Object.defineProperty({__proto__:null,default:RT},Symbol.toStringTag,{value:"Module"})),zT=j(''),VT=Object.freeze(Object.defineProperty({__proto__:null,default:zT},Symbol.toStringTag,{value:"Module"})),DT=j(''),FT=Object.freeze(Object.defineProperty({__proto__:null,default:DT},Symbol.toStringTag,{value:"Module"})),NT=j(''),BT=Object.freeze(Object.defineProperty({__proto__:null,default:NT},Symbol.toStringTag,{value:"Module"})),jT=j(''),GT=Object.freeze(Object.defineProperty({__proto__:null,default:jT},Symbol.toStringTag,{value:"Module"})),HT=j(''),UT=Object.freeze(Object.defineProperty({__proto__:null,default:HT},Symbol.toStringTag,{value:"Module"})),WT=j(''),XT=Object.freeze(Object.defineProperty({__proto__:null,default:WT},Symbol.toStringTag,{value:"Module"})),YT=j(''),KT=Object.freeze(Object.defineProperty({__proto__:null,default:YT},Symbol.toStringTag,{value:"Module"})),qT=j(''),ZT=Object.freeze(Object.defineProperty({__proto__:null,default:qT},Symbol.toStringTag,{value:"Module"})),JT=j(''),QT=Object.freeze(Object.defineProperty({__proto__:null,default:JT},Symbol.toStringTag,{value:"Module"})),eC=j(''),tC=Object.freeze(Object.defineProperty({__proto__:null,default:eC},Symbol.toStringTag,{value:"Module"})),iC=j(''),rC=Object.freeze(Object.defineProperty({__proto__:null,default:iC},Symbol.toStringTag,{value:"Module"})),nC=j(''),sC=Object.freeze(Object.defineProperty({__proto__:null,default:nC},Symbol.toStringTag,{value:"Module"})),aC=j(''),oC=Object.freeze(Object.defineProperty({__proto__:null,default:aC},Symbol.toStringTag,{value:"Module"})),lC=j(''),cC=Object.freeze(Object.defineProperty({__proto__:null,default:lC},Symbol.toStringTag,{value:"Module"})),hC=j(` +`),O0=Object.freeze(Object.defineProperty({__proto__:null,default:V0},Symbol.toStringTag,{value:"Module"})),R0=T(''),j0=Object.freeze(Object.defineProperty({__proto__:null,default:R0},Symbol.toStringTag,{value:"Module"})),z0=T(''),A0=Object.freeze(Object.defineProperty({__proto__:null,default:z0},Symbol.toStringTag,{value:"Module"})),D0=T(''),F0=Object.freeze(Object.defineProperty({__proto__:null,default:D0},Symbol.toStringTag,{value:"Module"})),B0=T(''),N0=Object.freeze(Object.defineProperty({__proto__:null,default:B0},Symbol.toStringTag,{value:"Module"})),G0=T(''),H0=Object.freeze(Object.defineProperty({__proto__:null,default:G0},Symbol.toStringTag,{value:"Module"}));function U0(s=""){return T(` + + `,{width:24,height:24,viewBoxWidth:16,viewBoxHeight:16})}var W0=Object.freeze(Object.defineProperty({__proto__:null,default:U0},Symbol.toStringTag,{value:"Module"})),X0=T(''),Y0=Object.freeze(Object.defineProperty({__proto__:null,default:X0},Symbol.toStringTag,{value:"Module"})),K0=T(''),Z0=Object.freeze(Object.defineProperty({__proto__:null,default:K0},Symbol.toStringTag,{value:"Module"})),q0=T(''),Q0=Object.freeze(Object.defineProperty({__proto__:null,default:q0},Symbol.toStringTag,{value:"Module"})),J0=T(''),ey=Object.freeze(Object.defineProperty({__proto__:null,default:J0},Symbol.toStringTag,{value:"Module"})),ty=T(''),ry=Object.freeze(Object.defineProperty({__proto__:null,default:ty},Symbol.toStringTag,{value:"Module"})),iy=T(''),sy=Object.freeze(Object.defineProperty({__proto__:null,default:iy},Symbol.toStringTag,{value:"Module"})),ay=T(''),ny=Object.freeze(Object.defineProperty({__proto__:null,default:ay},Symbol.toStringTag,{value:"Module"})),oy=T(''),ly=Object.freeze(Object.defineProperty({__proto__:null,default:oy},Symbol.toStringTag,{value:"Module"})),cy=T(''),hy=Object.freeze(Object.defineProperty({__proto__:null,default:cy},Symbol.toStringTag,{value:"Module"})),dy=T(''),uy=Object.freeze(Object.defineProperty({__proto__:null,default:dy},Symbol.toStringTag,{value:"Module"})),py=T(''),gy=Object.freeze(Object.defineProperty({__proto__:null,default:py},Symbol.toStringTag,{value:"Module"})),fy=T(''),my=Object.freeze(Object.defineProperty({__proto__:null,default:fy},Symbol.toStringTag,{value:"Module"})),vy=T(''),yy=Object.freeze(Object.defineProperty({__proto__:null,default:vy},Symbol.toStringTag,{value:"Module"})),by=T(''),xy=Object.freeze(Object.defineProperty({__proto__:null,default:by},Symbol.toStringTag,{value:"Module"})),$y=T(''),_y=Object.freeze(Object.defineProperty({__proto__:null,default:$y},Symbol.toStringTag,{value:"Module"})),Sy=T(''),Py=Object.freeze(Object.defineProperty({__proto__:null,default:Sy},Symbol.toStringTag,{value:"Module"})),wy=T(''),Cy=Object.freeze(Object.defineProperty({__proto__:null,default:wy},Symbol.toStringTag,{value:"Module"})),Ty=T(''),ky=Object.freeze(Object.defineProperty({__proto__:null,default:Ty},Symbol.toStringTag,{value:"Module"})),My=T(''),Iy=Object.freeze(Object.defineProperty({__proto__:null,default:My},Symbol.toStringTag,{value:"Module"})),Ey=T(''),Ly=Object.freeze(Object.defineProperty({__proto__:null,default:Ey},Symbol.toStringTag,{value:"Module"})),Vy=T(''),Oy=Object.freeze(Object.defineProperty({__proto__:null,default:Vy},Symbol.toStringTag,{value:"Module"})),Ry=T(''),jy=Object.freeze(Object.defineProperty({__proto__:null,default:Ry},Symbol.toStringTag,{value:"Module"})),zy=T(` -`),dC=Object.freeze(Object.defineProperty({__proto__:null,default:hC},Symbol.toStringTag,{value:"Module"})),uC=j(''),pC=Object.freeze(Object.defineProperty({__proto__:null,default:uC},Symbol.toStringTag,{value:"Module"})),fC=j(''),gC=Object.freeze(Object.defineProperty({__proto__:null,default:fC},Symbol.toStringTag,{value:"Module"})),mC=j(''),vC=Object.freeze(Object.defineProperty({__proto__:null,default:mC},Symbol.toStringTag,{value:"Module"})),yC=j(''),bC=Object.freeze(Object.defineProperty({__proto__:null,default:yC},Symbol.toStringTag,{value:"Module"})),xC=j(''),_C=Object.freeze(Object.defineProperty({__proto__:null,default:xC},Symbol.toStringTag,{value:"Module"})),SC=j(''),wC=Object.freeze(Object.defineProperty({__proto__:null,default:SC},Symbol.toStringTag,{value:"Module"})),MC=j(''),$C=Object.freeze(Object.defineProperty({__proto__:null,default:MC},Symbol.toStringTag,{value:"Module"})),PC=j(''),TC=Object.freeze(Object.defineProperty({__proto__:null,default:PC},Symbol.toStringTag,{value:"Module"})),CC=j(''),EC=Object.freeze(Object.defineProperty({__proto__:null,default:CC},Symbol.toStringTag,{value:"Module"})),IC=j(''),LC=Object.freeze(Object.defineProperty({__proto__:null,default:IC},Symbol.toStringTag,{value:"Module"})),kC=j(''),AC=Object.freeze(Object.defineProperty({__proto__:null,default:kC},Symbol.toStringTag,{value:"Module"})),RC=j(''),OC=Object.freeze(Object.defineProperty({__proto__:null,default:RC},Symbol.toStringTag,{value:"Module"})),zC=j(` +`),Ay=Object.freeze(Object.defineProperty({__proto__:null,default:zy},Symbol.toStringTag,{value:"Module"})),Dy=T(''),Fy=Object.freeze(Object.defineProperty({__proto__:null,default:Dy},Symbol.toStringTag,{value:"Module"})),By=T(''),Ny=Object.freeze(Object.defineProperty({__proto__:null,default:By},Symbol.toStringTag,{value:"Module"})),Gy=T(''),Hy=Object.freeze(Object.defineProperty({__proto__:null,default:Gy},Symbol.toStringTag,{value:"Module"})),Uy=T(''),Wy=Object.freeze(Object.defineProperty({__proto__:null,default:Uy},Symbol.toStringTag,{value:"Module"})),Xy=T(''),Yy=Object.freeze(Object.defineProperty({__proto__:null,default:Xy},Symbol.toStringTag,{value:"Module"})),Ky=T(''),Zy=Object.freeze(Object.defineProperty({__proto__:null,default:Ky},Symbol.toStringTag,{value:"Module"})),qy=T(''),Qy=Object.freeze(Object.defineProperty({__proto__:null,default:qy},Symbol.toStringTag,{value:"Module"})),Jy=T(''),eb=Object.freeze(Object.defineProperty({__proto__:null,default:Jy},Symbol.toStringTag,{value:"Module"})),tb=T(''),rb=Object.freeze(Object.defineProperty({__proto__:null,default:tb},Symbol.toStringTag,{value:"Module"})),ib=T(''),sb=Object.freeze(Object.defineProperty({__proto__:null,default:ib},Symbol.toStringTag,{value:"Module"})),ab=T(''),nb=Object.freeze(Object.defineProperty({__proto__:null,default:ab},Symbol.toStringTag,{value:"Module"})),ob=T(''),lb=Object.freeze(Object.defineProperty({__proto__:null,default:ob},Symbol.toStringTag,{value:"Module"})),cb=T(` - `),VC=Object.freeze(Object.defineProperty({__proto__:null,default:zC},Symbol.toStringTag,{value:"Module"})),DC=j(''),FC=Object.freeze(Object.defineProperty({__proto__:null,default:DC},Symbol.toStringTag,{value:"Module"})),NC=j(''),BC=Object.freeze(Object.defineProperty({__proto__:null,default:NC},Symbol.toStringTag,{value:"Module"})),jC=j(''),GC=Object.freeze(Object.defineProperty({__proto__:null,default:jC},Symbol.toStringTag,{value:"Module"})),HC=j(''),UC=Object.freeze(Object.defineProperty({__proto__:null,default:HC},Symbol.toStringTag,{value:"Module"})),WC=j(''),XC=Object.freeze(Object.defineProperty({__proto__:null,default:WC},Symbol.toStringTag,{value:"Module"})),YC=j(''),KC=Object.freeze(Object.defineProperty({__proto__:null,default:YC},Symbol.toStringTag,{value:"Module"})),qC=j(''),ZC=Object.freeze(Object.defineProperty({__proto__:null,default:qC},Symbol.toStringTag,{value:"Module"})),JC=j(''),QC=Object.freeze(Object.defineProperty({__proto__:null,default:JC},Symbol.toStringTag,{value:"Module"})),eE=j(` + `),hb=Object.freeze(Object.defineProperty({__proto__:null,default:cb},Symbol.toStringTag,{value:"Module"})),db=T(''),ub=Object.freeze(Object.defineProperty({__proto__:null,default:db},Symbol.toStringTag,{value:"Module"})),pb=T(''),gb=Object.freeze(Object.defineProperty({__proto__:null,default:pb},Symbol.toStringTag,{value:"Module"})),fb=T(''),mb=Object.freeze(Object.defineProperty({__proto__:null,default:fb},Symbol.toStringTag,{value:"Module"})),vb=T(''),yb=Object.freeze(Object.defineProperty({__proto__:null,default:vb},Symbol.toStringTag,{value:"Module"})),bb=T(''),xb=Object.freeze(Object.defineProperty({__proto__:null,default:bb},Symbol.toStringTag,{value:"Module"})),$b=T(''),_b=Object.freeze(Object.defineProperty({__proto__:null,default:$b},Symbol.toStringTag,{value:"Module"})),Sb=T(''),Pb=Object.freeze(Object.defineProperty({__proto__:null,default:Sb},Symbol.toStringTag,{value:"Module"})),wb=T(''),Cb=Object.freeze(Object.defineProperty({__proto__:null,default:wb},Symbol.toStringTag,{value:"Module"})),Tb=T(` -`),tE=Object.freeze(Object.defineProperty({__proto__:null,default:eE},Symbol.toStringTag,{value:"Module"})),iE=j(` +`),kb=Object.freeze(Object.defineProperty({__proto__:null,default:Tb},Symbol.toStringTag,{value:"Module"})),Mb=T(` -`),rE=Object.freeze(Object.defineProperty({__proto__:null,default:iE},Symbol.toStringTag,{value:"Module"})),nE=j(''),sE=Object.freeze(Object.defineProperty({__proto__:null,default:nE},Symbol.toStringTag,{value:"Module"})),aE=j(''),oE=Object.freeze(Object.defineProperty({__proto__:null,default:aE},Symbol.toStringTag,{value:"Module"})),lE=j(''),cE=Object.freeze(Object.defineProperty({__proto__:null,default:lE},Symbol.toStringTag,{value:"Module"})),hE=j(''),dE=Object.freeze(Object.defineProperty({__proto__:null,default:hE},Symbol.toStringTag,{value:"Module"})),uE=j(''),pE=Object.freeze(Object.defineProperty({__proto__:null,default:uE},Symbol.toStringTag,{value:"Module"})),fE=j(''),gE=Object.freeze(Object.defineProperty({__proto__:null,default:fE},Symbol.toStringTag,{value:"Module"})),mE=j(''),vE=Object.freeze(Object.defineProperty({__proto__:null,default:mE},Symbol.toStringTag,{value:"Module"})),yE=j(` +`),Ib=Object.freeze(Object.defineProperty({__proto__:null,default:Mb},Symbol.toStringTag,{value:"Module"})),Eb=T(''),Lb=Object.freeze(Object.defineProperty({__proto__:null,default:Eb},Symbol.toStringTag,{value:"Module"})),Vb=T(''),Ob=Object.freeze(Object.defineProperty({__proto__:null,default:Vb},Symbol.toStringTag,{value:"Module"})),Rb=T(''),jb=Object.freeze(Object.defineProperty({__proto__:null,default:Rb},Symbol.toStringTag,{value:"Module"})),zb=T(''),Ab=Object.freeze(Object.defineProperty({__proto__:null,default:zb},Symbol.toStringTag,{value:"Module"})),Db=T(''),Fb=Object.freeze(Object.defineProperty({__proto__:null,default:Db},Symbol.toStringTag,{value:"Module"})),Bb=T(''),Nb=Object.freeze(Object.defineProperty({__proto__:null,default:Bb},Symbol.toStringTag,{value:"Module"})),Gb=T(''),Hb=Object.freeze(Object.defineProperty({__proto__:null,default:Gb},Symbol.toStringTag,{value:"Module"})),Ub=T(` - `),bE=Object.freeze(Object.defineProperty({__proto__:null,default:yE},Symbol.toStringTag,{value:"Module"})),xE=j(''),_E=Object.freeze(Object.defineProperty({__proto__:null,default:xE},Symbol.toStringTag,{value:"Module"})),SE=j(''),wE=Object.freeze(Object.defineProperty({__proto__:null,default:SE},Symbol.toStringTag,{value:"Module"})),ME=j(''),$E=Object.freeze(Object.defineProperty({__proto__:null,default:ME},Symbol.toStringTag,{value:"Module"})),PE=j(''),TE=Object.freeze(Object.defineProperty({__proto__:null,default:PE},Symbol.toStringTag,{value:"Module"})),CE=j(''),EE=Object.freeze(Object.defineProperty({__proto__:null,default:CE},Symbol.toStringTag,{value:"Module"})),IE=j(''),LE=Object.freeze(Object.defineProperty({__proto__:null,default:IE},Symbol.toStringTag,{value:"Module"})),kE=j(''),AE=Object.freeze(Object.defineProperty({__proto__:null,default:kE},Symbol.toStringTag,{value:"Module"})),RE=j(''),OE=Object.freeze(Object.defineProperty({__proto__:null,default:RE},Symbol.toStringTag,{value:"Module"})),zE=j(` + `),Wb=Object.freeze(Object.defineProperty({__proto__:null,default:Ub},Symbol.toStringTag,{value:"Module"})),Xb=T(''),Yb=Object.freeze(Object.defineProperty({__proto__:null,default:Xb},Symbol.toStringTag,{value:"Module"})),Kb=T(''),Zb=Object.freeze(Object.defineProperty({__proto__:null,default:Kb},Symbol.toStringTag,{value:"Module"})),qb=T(''),Qb=Object.freeze(Object.defineProperty({__proto__:null,default:qb},Symbol.toStringTag,{value:"Module"})),Jb=T(''),ex=Object.freeze(Object.defineProperty({__proto__:null,default:Jb},Symbol.toStringTag,{value:"Module"})),tx=T(''),rx=Object.freeze(Object.defineProperty({__proto__:null,default:tx},Symbol.toStringTag,{value:"Module"})),ix=T(''),sx=Object.freeze(Object.defineProperty({__proto__:null,default:ix},Symbol.toStringTag,{value:"Module"})),ax=T(''),nx=Object.freeze(Object.defineProperty({__proto__:null,default:ax},Symbol.toStringTag,{value:"Module"})),ox=T(''),lx=Object.freeze(Object.defineProperty({__proto__:null,default:ox},Symbol.toStringTag,{value:"Module"})),cx=T(` - `,{width:18,height:16}),VE=Object.freeze(Object.defineProperty({__proto__:null,default:zE},Symbol.toStringTag,{value:"Module"})),DE=j(` + `,{width:18,height:16}),hx=Object.freeze(Object.defineProperty({__proto__:null,default:cx},Symbol.toStringTag,{value:"Module"})),dx=T(` - `,{width:18,height:16}),FE=Object.freeze(Object.defineProperty({__proto__:null,default:DE},Symbol.toStringTag,{value:"Module"})),NE=j(` + `,{width:18,height:16}),ux=Object.freeze(Object.defineProperty({__proto__:null,default:dx},Symbol.toStringTag,{value:"Module"})),px=T(` - `,{width:18,height:16}),BE=Object.freeze(Object.defineProperty({__proto__:null,default:NE},Symbol.toStringTag,{value:"Module"})),jE=j(''),GE=Object.freeze(Object.defineProperty({__proto__:null,default:jE},Symbol.toStringTag,{value:"Module"})),HE=j('',{width:18,height:16}),UE=Object.freeze(Object.defineProperty({__proto__:null,default:HE},Symbol.toStringTag,{value:"Module"})),WE=j('',{width:18,height:16}),XE=Object.freeze(Object.defineProperty({__proto__:null,default:WE},Symbol.toStringTag,{value:"Module"})),YE=j('',{width:18,height:16}),KE=Object.freeze(Object.defineProperty({__proto__:null,default:YE},Symbol.toStringTag,{value:"Module"})),qE=j(''),ZE=Object.freeze(Object.defineProperty({__proto__:null,default:qE},Symbol.toStringTag,{value:"Module"})),JE=j(''),QE=Object.freeze(Object.defineProperty({__proto__:null,default:JE},Symbol.toStringTag,{value:"Module"})),e3=j(''),t3=Object.freeze(Object.defineProperty({__proto__:null,default:e3},Symbol.toStringTag,{value:"Module"})),i3=j(''),r3=Object.freeze(Object.defineProperty({__proto__:null,default:i3},Symbol.toStringTag,{value:"Module"})),n3=j(''),s3=Object.freeze(Object.defineProperty({__proto__:null,default:n3},Symbol.toStringTag,{value:"Module"})),a3=j(''),o3=Object.freeze(Object.defineProperty({__proto__:null,default:a3},Symbol.toStringTag,{value:"Module"})),l3=j(''),c3=Object.freeze(Object.defineProperty({__proto__:null,default:l3},Symbol.toStringTag,{value:"Module"})),h3=j(''),d3=Object.freeze(Object.defineProperty({__proto__:null,default:h3},Symbol.toStringTag,{value:"Module"})),u3=j(''),p3=Object.freeze(Object.defineProperty({__proto__:null,default:u3},Symbol.toStringTag,{value:"Module"})),f3=j(''),g3=Object.freeze(Object.defineProperty({__proto__:null,default:f3},Symbol.toStringTag,{value:"Module"})),m3=j(''),v3=Object.freeze(Object.defineProperty({__proto__:null,default:m3},Symbol.toStringTag,{value:"Module"})),y3=j(''),b3=Object.freeze(Object.defineProperty({__proto__:null,default:y3},Symbol.toStringTag,{value:"Module"})),x3=j(''),_3=Object.freeze(Object.defineProperty({__proto__:null,default:x3},Symbol.toStringTag,{value:"Module"})),S3=j(''),w3=Object.freeze(Object.defineProperty({__proto__:null,default:S3},Symbol.toStringTag,{value:"Module"})),M3=j(''),$3=Object.freeze(Object.defineProperty({__proto__:null,default:M3},Symbol.toStringTag,{value:"Module"})),P3=j(''),T3=Object.freeze(Object.defineProperty({__proto__:null,default:P3},Symbol.toStringTag,{value:"Module"})),C3=j(''),E3=Object.freeze(Object.defineProperty({__proto__:null,default:C3},Symbol.toStringTag,{value:"Module"})),I3=j(` + `,{width:18,height:16}),gx=Object.freeze(Object.defineProperty({__proto__:null,default:px},Symbol.toStringTag,{value:"Module"})),fx=T(''),mx=Object.freeze(Object.defineProperty({__proto__:null,default:fx},Symbol.toStringTag,{value:"Module"})),vx=T('',{width:18,height:16}),yx=Object.freeze(Object.defineProperty({__proto__:null,default:vx},Symbol.toStringTag,{value:"Module"})),bx=T('',{width:18,height:16}),xx=Object.freeze(Object.defineProperty({__proto__:null,default:bx},Symbol.toStringTag,{value:"Module"})),$x=T('',{width:18,height:16}),_x=Object.freeze(Object.defineProperty({__proto__:null,default:$x},Symbol.toStringTag,{value:"Module"})),Sx=T(''),Px=Object.freeze(Object.defineProperty({__proto__:null,default:Sx},Symbol.toStringTag,{value:"Module"})),wx=T(''),Cx=Object.freeze(Object.defineProperty({__proto__:null,default:wx},Symbol.toStringTag,{value:"Module"})),Tx=T(''),kx=Object.freeze(Object.defineProperty({__proto__:null,default:Tx},Symbol.toStringTag,{value:"Module"})),Mx=T(''),Ix=Object.freeze(Object.defineProperty({__proto__:null,default:Mx},Symbol.toStringTag,{value:"Module"})),Ex=T(''),Lx=Object.freeze(Object.defineProperty({__proto__:null,default:Ex},Symbol.toStringTag,{value:"Module"})),Vx=T(''),Ox=Object.freeze(Object.defineProperty({__proto__:null,default:Vx},Symbol.toStringTag,{value:"Module"})),Rx=T(''),jx=Object.freeze(Object.defineProperty({__proto__:null,default:Rx},Symbol.toStringTag,{value:"Module"})),zx=T(''),Ax=Object.freeze(Object.defineProperty({__proto__:null,default:zx},Symbol.toStringTag,{value:"Module"})),Dx=T(''),Fx=Object.freeze(Object.defineProperty({__proto__:null,default:Dx},Symbol.toStringTag,{value:"Module"})),Bx=T(''),Nx=Object.freeze(Object.defineProperty({__proto__:null,default:Bx},Symbol.toStringTag,{value:"Module"})),Gx=T(''),Hx=Object.freeze(Object.defineProperty({__proto__:null,default:Gx},Symbol.toStringTag,{value:"Module"})),Ux=T(''),Wx=Object.freeze(Object.defineProperty({__proto__:null,default:Ux},Symbol.toStringTag,{value:"Module"})),Xx=T(''),Yx=Object.freeze(Object.defineProperty({__proto__:null,default:Xx},Symbol.toStringTag,{value:"Module"})),Kx=T(''),Zx=Object.freeze(Object.defineProperty({__proto__:null,default:Kx},Symbol.toStringTag,{value:"Module"})),qx=T(''),Qx=Object.freeze(Object.defineProperty({__proto__:null,default:qx},Symbol.toStringTag,{value:"Module"})),Jx=T(''),e$=Object.freeze(Object.defineProperty({__proto__:null,default:Jx},Symbol.toStringTag,{value:"Module"})),t$=T(''),r$=Object.freeze(Object.defineProperty({__proto__:null,default:t$},Symbol.toStringTag,{value:"Module"})),i$=T(` -`),L3=Object.freeze(Object.defineProperty({__proto__:null,default:I3},Symbol.toStringTag,{value:"Module"})),k3=j(''),A3=Object.freeze(Object.defineProperty({__proto__:null,default:k3},Symbol.toStringTag,{value:"Module"})),R3=j(''),O3=Object.freeze(Object.defineProperty({__proto__:null,default:R3},Symbol.toStringTag,{value:"Module"})),z3=j(''),V3=Object.freeze(Object.defineProperty({__proto__:null,default:z3},Symbol.toStringTag,{value:"Module"})),D3=j(''),F3=Object.freeze(Object.defineProperty({__proto__:null,default:D3},Symbol.toStringTag,{value:"Module"})),N3=j(''),B3=Object.freeze(Object.defineProperty({__proto__:null,default:N3},Symbol.toStringTag,{value:"Module"})),j3=j(''),G3=Object.freeze(Object.defineProperty({__proto__:null,default:j3},Symbol.toStringTag,{value:"Module"})),H3=j(''),U3=Object.freeze(Object.defineProperty({__proto__:null,default:H3},Symbol.toStringTag,{value:"Module"})),W3=j(''),X3=Object.freeze(Object.defineProperty({__proto__:null,default:W3},Symbol.toStringTag,{value:"Module"})),Y3=j(''),K3=Object.freeze(Object.defineProperty({__proto__:null,default:Y3},Symbol.toStringTag,{value:"Module"})),q3=j(''),Z3=Object.freeze(Object.defineProperty({__proto__:null,default:q3},Symbol.toStringTag,{value:"Module"})),J3=j(''),Q3=Object.freeze(Object.defineProperty({__proto__:null,default:J3},Symbol.toStringTag,{value:"Module"})),e5=j(''),t5=Object.freeze(Object.defineProperty({__proto__:null,default:e5},Symbol.toStringTag,{value:"Module"})),i5=j(''),r5=Object.freeze(Object.defineProperty({__proto__:null,default:i5},Symbol.toStringTag,{value:"Module"})),n5=j(''),s5=Object.freeze(Object.defineProperty({__proto__:null,default:n5},Symbol.toStringTag,{value:"Module"})),a5=j(` +`),s$=Object.freeze(Object.defineProperty({__proto__:null,default:i$},Symbol.toStringTag,{value:"Module"})),a$=T(''),n$=Object.freeze(Object.defineProperty({__proto__:null,default:a$},Symbol.toStringTag,{value:"Module"})),o$=T(''),l$=Object.freeze(Object.defineProperty({__proto__:null,default:o$},Symbol.toStringTag,{value:"Module"})),c$=T(''),h$=Object.freeze(Object.defineProperty({__proto__:null,default:c$},Symbol.toStringTag,{value:"Module"})),d$=T(''),u$=Object.freeze(Object.defineProperty({__proto__:null,default:d$},Symbol.toStringTag,{value:"Module"})),p$=T(''),g$=Object.freeze(Object.defineProperty({__proto__:null,default:p$},Symbol.toStringTag,{value:"Module"})),f$=T(''),m$=Object.freeze(Object.defineProperty({__proto__:null,default:f$},Symbol.toStringTag,{value:"Module"})),v$=T(''),y$=Object.freeze(Object.defineProperty({__proto__:null,default:v$},Symbol.toStringTag,{value:"Module"})),b$=T(''),x$=Object.freeze(Object.defineProperty({__proto__:null,default:b$},Symbol.toStringTag,{value:"Module"})),$$=T(''),_$=Object.freeze(Object.defineProperty({__proto__:null,default:$$},Symbol.toStringTag,{value:"Module"})),S$=T(''),P$=Object.freeze(Object.defineProperty({__proto__:null,default:S$},Symbol.toStringTag,{value:"Module"})),w$=T(''),C$=Object.freeze(Object.defineProperty({__proto__:null,default:w$},Symbol.toStringTag,{value:"Module"})),T$=T(''),k$=Object.freeze(Object.defineProperty({__proto__:null,default:T$},Symbol.toStringTag,{value:"Module"})),M$=T(''),I$=Object.freeze(Object.defineProperty({__proto__:null,default:M$},Symbol.toStringTag,{value:"Module"})),E$=T(''),L$=Object.freeze(Object.defineProperty({__proto__:null,default:E$},Symbol.toStringTag,{value:"Module"})),V$=T(` -`),o5=Object.freeze(Object.defineProperty({__proto__:null,default:a5},Symbol.toStringTag,{value:"Module"})),l5=j(''),c5=Object.freeze(Object.defineProperty({__proto__:null,default:l5},Symbol.toStringTag,{value:"Module"})),h5=j(''),d5=Object.freeze(Object.defineProperty({__proto__:null,default:h5},Symbol.toStringTag,{value:"Module"})),u5=j(''),p5=Object.freeze(Object.defineProperty({__proto__:null,default:u5},Symbol.toStringTag,{value:"Module"})),f5=j(''),g5=Object.freeze(Object.defineProperty({__proto__:null,default:f5},Symbol.toStringTag,{value:"Module"})),m5=j(''),v5=Object.freeze(Object.defineProperty({__proto__:null,default:m5},Symbol.toStringTag,{value:"Module"})),y5=j(''),b5=Object.freeze(Object.defineProperty({__proto__:null,default:y5},Symbol.toStringTag,{value:"Module"})),x5=j(''),_5=Object.freeze(Object.defineProperty({__proto__:null,default:x5},Symbol.toStringTag,{value:"Module"})),S5=j(''),w5=Object.freeze(Object.defineProperty({__proto__:null,default:S5},Symbol.toStringTag,{value:"Module"})),M5=j(''),$5=Object.freeze(Object.defineProperty({__proto__:null,default:M5},Symbol.toStringTag,{value:"Module"})),P5=j(''),T5=Object.freeze(Object.defineProperty({__proto__:null,default:P5},Symbol.toStringTag,{value:"Module"})),C5=j(''),E5=Object.freeze(Object.defineProperty({__proto__:null,default:C5},Symbol.toStringTag,{value:"Module"})),I5=j(''),L5=Object.freeze(Object.defineProperty({__proto__:null,default:I5},Symbol.toStringTag,{value:"Module"})),k5=j(''),A5=Object.freeze(Object.defineProperty({__proto__:null,default:k5},Symbol.toStringTag,{value:"Module"})),R5=j(''),O5=Object.freeze(Object.defineProperty({__proto__:null,default:R5},Symbol.toStringTag,{value:"Module"})),z5=j(''),V5=Object.freeze(Object.defineProperty({__proto__:null,default:z5},Symbol.toStringTag,{value:"Module"})),D5=j(` +`),O$=Object.freeze(Object.defineProperty({__proto__:null,default:V$},Symbol.toStringTag,{value:"Module"})),R$=T(''),j$=Object.freeze(Object.defineProperty({__proto__:null,default:R$},Symbol.toStringTag,{value:"Module"})),z$=T(''),A$=Object.freeze(Object.defineProperty({__proto__:null,default:z$},Symbol.toStringTag,{value:"Module"})),D$=T(''),F$=Object.freeze(Object.defineProperty({__proto__:null,default:D$},Symbol.toStringTag,{value:"Module"})),B$=T(''),N$=Object.freeze(Object.defineProperty({__proto__:null,default:B$},Symbol.toStringTag,{value:"Module"})),G$=T(''),H$=Object.freeze(Object.defineProperty({__proto__:null,default:G$},Symbol.toStringTag,{value:"Module"})),U$=T(''),W$=Object.freeze(Object.defineProperty({__proto__:null,default:U$},Symbol.toStringTag,{value:"Module"})),X$=T(''),Y$=Object.freeze(Object.defineProperty({__proto__:null,default:X$},Symbol.toStringTag,{value:"Module"})),K$=T(''),Z$=Object.freeze(Object.defineProperty({__proto__:null,default:K$},Symbol.toStringTag,{value:"Module"})),q$=T(''),Q$=Object.freeze(Object.defineProperty({__proto__:null,default:q$},Symbol.toStringTag,{value:"Module"})),J$=T(''),e2=Object.freeze(Object.defineProperty({__proto__:null,default:J$},Symbol.toStringTag,{value:"Module"})),t2=T(''),r2=Object.freeze(Object.defineProperty({__proto__:null,default:t2},Symbol.toStringTag,{value:"Module"})),i2=T(''),s2=Object.freeze(Object.defineProperty({__proto__:null,default:i2},Symbol.toStringTag,{value:"Module"})),a2=T(''),n2=Object.freeze(Object.defineProperty({__proto__:null,default:a2},Symbol.toStringTag,{value:"Module"})),o2=T(''),l2=Object.freeze(Object.defineProperty({__proto__:null,default:o2},Symbol.toStringTag,{value:"Module"})),c2=T(''),h2=Object.freeze(Object.defineProperty({__proto__:null,default:c2},Symbol.toStringTag,{value:"Module"})),d2=T(` - `),F5=Object.freeze(Object.defineProperty({__proto__:null,default:D5},Symbol.toStringTag,{value:"Module"})),N5=j(''),B5=Object.freeze(Object.defineProperty({__proto__:null,default:N5},Symbol.toStringTag,{value:"Module"})),j5=j(''),G5=Object.freeze(Object.defineProperty({__proto__:null,default:j5},Symbol.toStringTag,{value:"Module"})),H5=j(` + `),u2=Object.freeze(Object.defineProperty({__proto__:null,default:d2},Symbol.toStringTag,{value:"Module"})),p2=T(''),g2=Object.freeze(Object.defineProperty({__proto__:null,default:p2},Symbol.toStringTag,{value:"Module"})),f2=T(''),m2=Object.freeze(Object.defineProperty({__proto__:null,default:f2},Symbol.toStringTag,{value:"Module"})),v2=T(` -`),U5=Object.freeze(Object.defineProperty({__proto__:null,default:H5},Symbol.toStringTag,{value:"Module"})),W5=j(` +`),y2=Object.freeze(Object.defineProperty({__proto__:null,default:v2},Symbol.toStringTag,{value:"Module"})),b2=T(` -`),X5=Object.freeze(Object.defineProperty({__proto__:null,default:W5},Symbol.toStringTag,{value:"Module"})),Y5=j(''),K5=Object.freeze(Object.defineProperty({__proto__:null,default:Y5},Symbol.toStringTag,{value:"Module"})),q5=j(''),Z5=Object.freeze(Object.defineProperty({__proto__:null,default:q5},Symbol.toStringTag,{value:"Module"})),J5=j(''),Q5=Object.freeze(Object.defineProperty({__proto__:null,default:J5},Symbol.toStringTag,{value:"Module"})),eI=j(''),tI=Object.freeze(Object.defineProperty({__proto__:null,default:eI},Symbol.toStringTag,{value:"Module"})),iI=j(''),rI=Object.freeze(Object.defineProperty({__proto__:null,default:iI},Symbol.toStringTag,{value:"Module"})),nI=j(''),sI=Object.freeze(Object.defineProperty({__proto__:null,default:nI},Symbol.toStringTag,{value:"Module"})),aI=j(''),oI=Object.freeze(Object.defineProperty({__proto__:null,default:aI},Symbol.toStringTag,{value:"Module"})),lI=j(''),cI=Object.freeze(Object.defineProperty({__proto__:null,default:lI},Symbol.toStringTag,{value:"Module"})),hI=j(''),dI=Object.freeze(Object.defineProperty({__proto__:null,default:hI},Symbol.toStringTag,{value:"Module"})),uI=j(''),pI=Object.freeze(Object.defineProperty({__proto__:null,default:uI},Symbol.toStringTag,{value:"Module"})),fI=j(''),gI=Object.freeze(Object.defineProperty({__proto__:null,default:fI},Symbol.toStringTag,{value:"Module"})),mI=j(''),vI=Object.freeze(Object.defineProperty({__proto__:null,default:mI},Symbol.toStringTag,{value:"Module"})),yI=j(''),bI=Object.freeze(Object.defineProperty({__proto__:null,default:yI},Symbol.toStringTag,{value:"Module"})),xI=j(''),_I=Object.freeze(Object.defineProperty({__proto__:null,default:xI},Symbol.toStringTag,{value:"Module"})),SI=j(''),wI=Object.freeze(Object.defineProperty({__proto__:null,default:SI},Symbol.toStringTag,{value:"Module"})),MI=j(''),$I=Object.freeze(Object.defineProperty({__proto__:null,default:MI},Symbol.toStringTag,{value:"Module"})),PI=j(''),TI=Object.freeze(Object.defineProperty({__proto__:null,default:PI},Symbol.toStringTag,{value:"Module"})),CI=j(''),EI=Object.freeze(Object.defineProperty({__proto__:null,default:CI},Symbol.toStringTag,{value:"Module"})),II=j(''),LI=Object.freeze(Object.defineProperty({__proto__:null,default:II},Symbol.toStringTag,{value:"Module"})),kI=j(''),AI=Object.freeze(Object.defineProperty({__proto__:null,default:kI},Symbol.toStringTag,{value:"Module"})),RI=j(''),OI=Object.freeze(Object.defineProperty({__proto__:null,default:RI},Symbol.toStringTag,{value:"Module"})),zI=j(''),VI=Object.freeze(Object.defineProperty({__proto__:null,default:zI},Symbol.toStringTag,{value:"Module"})),DI=j(''),FI=Object.freeze(Object.defineProperty({__proto__:null,default:DI},Symbol.toStringTag,{value:"Module"})),NI=j(''),BI=Object.freeze(Object.defineProperty({__proto__:null,default:NI},Symbol.toStringTag,{value:"Module"})),jI=j(''),GI=Object.freeze(Object.defineProperty({__proto__:null,default:jI},Symbol.toStringTag,{value:"Module"})),HI=j(''),UI=Object.freeze(Object.defineProperty({__proto__:null,default:HI},Symbol.toStringTag,{value:"Module"})),WI=j(''),XI=Object.freeze(Object.defineProperty({__proto__:null,default:WI},Symbol.toStringTag,{value:"Module"})),YI=j(''),KI=Object.freeze(Object.defineProperty({__proto__:null,default:YI},Symbol.toStringTag,{value:"Module"})),qI=j(''),ZI=Object.freeze(Object.defineProperty({__proto__:null,default:qI},Symbol.toStringTag,{value:"Module"})),JI=j(''),QI=Object.freeze(Object.defineProperty({__proto__:null,default:JI},Symbol.toStringTag,{value:"Module"})),eL=j(''),tL=Object.freeze(Object.defineProperty({__proto__:null,default:eL},Symbol.toStringTag,{value:"Module"})),iL=j('',{width:48,height:48}),rL=Object.freeze(Object.defineProperty({__proto__:null,default:iL},Symbol.toStringTag,{value:"Module"})),nL=j('',{width:30,height:30}),sL=Object.freeze(Object.defineProperty({__proto__:null,default:nL},Symbol.toStringTag,{value:"Module"})),aL=j('',{width:30,height:30}),oL=Object.freeze(Object.defineProperty({__proto__:null,default:aL},Symbol.toStringTag,{value:"Module"})),lL=j(''),cL=Object.freeze(Object.defineProperty({__proto__:null,default:lL},Symbol.toStringTag,{value:"Module"})),hL=j(''),dL=Object.freeze(Object.defineProperty({__proto__:null,default:hL},Symbol.toStringTag,{value:"Module"})),uL=j(''),pL=Object.freeze(Object.defineProperty({__proto__:null,default:uL},Symbol.toStringTag,{value:"Module"})),fL=j(''),gL=Object.freeze(Object.defineProperty({__proto__:null,default:fL},Symbol.toStringTag,{value:"Module"})),mL=j(''),vL=Object.freeze(Object.defineProperty({__proto__:null,default:mL},Symbol.toStringTag,{value:"Module"})),yL=j(''),bL=Object.freeze(Object.defineProperty({__proto__:null,default:yL},Symbol.toStringTag,{value:"Module"})),xL=j(''),_L=Object.freeze(Object.defineProperty({__proto__:null,default:xL},Symbol.toStringTag,{value:"Module"})),SL=j(''),wL=Object.freeze(Object.defineProperty({__proto__:null,default:SL},Symbol.toStringTag,{value:"Module"})),ML=j(''),$L=Object.freeze(Object.defineProperty({__proto__:null,default:ML},Symbol.toStringTag,{value:"Module"})),PL=j(` +`),x2=Object.freeze(Object.defineProperty({__proto__:null,default:b2},Symbol.toStringTag,{value:"Module"})),$2=T(''),_2=Object.freeze(Object.defineProperty({__proto__:null,default:$2},Symbol.toStringTag,{value:"Module"})),S2=T(''),P2=Object.freeze(Object.defineProperty({__proto__:null,default:S2},Symbol.toStringTag,{value:"Module"})),w2=T(''),C2=Object.freeze(Object.defineProperty({__proto__:null,default:w2},Symbol.toStringTag,{value:"Module"})),T2=T(''),k2=Object.freeze(Object.defineProperty({__proto__:null,default:T2},Symbol.toStringTag,{value:"Module"})),M2=T(''),I2=Object.freeze(Object.defineProperty({__proto__:null,default:M2},Symbol.toStringTag,{value:"Module"})),E2=T(''),L2=Object.freeze(Object.defineProperty({__proto__:null,default:E2},Symbol.toStringTag,{value:"Module"})),V2=T(''),O2=Object.freeze(Object.defineProperty({__proto__:null,default:V2},Symbol.toStringTag,{value:"Module"})),R2=T(''),j2=Object.freeze(Object.defineProperty({__proto__:null,default:R2},Symbol.toStringTag,{value:"Module"})),z2=T(''),A2=Object.freeze(Object.defineProperty({__proto__:null,default:z2},Symbol.toStringTag,{value:"Module"})),D2=T(''),F2=Object.freeze(Object.defineProperty({__proto__:null,default:D2},Symbol.toStringTag,{value:"Module"})),B2=T(''),N2=Object.freeze(Object.defineProperty({__proto__:null,default:B2},Symbol.toStringTag,{value:"Module"})),G2=T(''),H2=Object.freeze(Object.defineProperty({__proto__:null,default:G2},Symbol.toStringTag,{value:"Module"})),U2=T(''),W2=Object.freeze(Object.defineProperty({__proto__:null,default:U2},Symbol.toStringTag,{value:"Module"})),X2=T(''),Y2=Object.freeze(Object.defineProperty({__proto__:null,default:X2},Symbol.toStringTag,{value:"Module"})),K2=T(''),Z2=Object.freeze(Object.defineProperty({__proto__:null,default:K2},Symbol.toStringTag,{value:"Module"})),q2=T(''),Q2=Object.freeze(Object.defineProperty({__proto__:null,default:q2},Symbol.toStringTag,{value:"Module"})),J2=T(''),e_=Object.freeze(Object.defineProperty({__proto__:null,default:J2},Symbol.toStringTag,{value:"Module"})),t_=T(''),r_=Object.freeze(Object.defineProperty({__proto__:null,default:t_},Symbol.toStringTag,{value:"Module"})),i_=T(''),s_=Object.freeze(Object.defineProperty({__proto__:null,default:i_},Symbol.toStringTag,{value:"Module"})),a_=T(''),n_=Object.freeze(Object.defineProperty({__proto__:null,default:a_},Symbol.toStringTag,{value:"Module"})),o_=T(''),l_=Object.freeze(Object.defineProperty({__proto__:null,default:o_},Symbol.toStringTag,{value:"Module"})),c_=T(''),h_=Object.freeze(Object.defineProperty({__proto__:null,default:c_},Symbol.toStringTag,{value:"Module"})),d_=T(''),u_=Object.freeze(Object.defineProperty({__proto__:null,default:d_},Symbol.toStringTag,{value:"Module"})),p_=T(''),g_=Object.freeze(Object.defineProperty({__proto__:null,default:p_},Symbol.toStringTag,{value:"Module"})),f_=T(''),m_=Object.freeze(Object.defineProperty({__proto__:null,default:f_},Symbol.toStringTag,{value:"Module"})),v_=T(''),y_=Object.freeze(Object.defineProperty({__proto__:null,default:v_},Symbol.toStringTag,{value:"Module"})),b_=T(''),x_=Object.freeze(Object.defineProperty({__proto__:null,default:b_},Symbol.toStringTag,{value:"Module"})),$_=T(''),__=Object.freeze(Object.defineProperty({__proto__:null,default:$_},Symbol.toStringTag,{value:"Module"})),S_=T(''),P_=Object.freeze(Object.defineProperty({__proto__:null,default:S_},Symbol.toStringTag,{value:"Module"})),w_=T(''),C_=Object.freeze(Object.defineProperty({__proto__:null,default:w_},Symbol.toStringTag,{value:"Module"})),T_=T(''),k_=Object.freeze(Object.defineProperty({__proto__:null,default:T_},Symbol.toStringTag,{value:"Module"})),M_=T('',{width:48,height:48}),I_=Object.freeze(Object.defineProperty({__proto__:null,default:M_},Symbol.toStringTag,{value:"Module"})),E_=T('',{width:30,height:30}),L_=Object.freeze(Object.defineProperty({__proto__:null,default:E_},Symbol.toStringTag,{value:"Module"})),V_=T('',{width:30,height:30}),O_=Object.freeze(Object.defineProperty({__proto__:null,default:V_},Symbol.toStringTag,{value:"Module"})),R_=T(''),j_=Object.freeze(Object.defineProperty({__proto__:null,default:R_},Symbol.toStringTag,{value:"Module"})),z_=T(''),A_=Object.freeze(Object.defineProperty({__proto__:null,default:z_},Symbol.toStringTag,{value:"Module"})),D_=T(''),F_=Object.freeze(Object.defineProperty({__proto__:null,default:D_},Symbol.toStringTag,{value:"Module"})),B_=T(''),N_=Object.freeze(Object.defineProperty({__proto__:null,default:B_},Symbol.toStringTag,{value:"Module"})),G_=T(''),H_=Object.freeze(Object.defineProperty({__proto__:null,default:G_},Symbol.toStringTag,{value:"Module"})),U_=T(''),W_=Object.freeze(Object.defineProperty({__proto__:null,default:U_},Symbol.toStringTag,{value:"Module"})),X_=T(''),Y_=Object.freeze(Object.defineProperty({__proto__:null,default:X_},Symbol.toStringTag,{value:"Module"})),K_=T(''),Z_=Object.freeze(Object.defineProperty({__proto__:null,default:K_},Symbol.toStringTag,{value:"Module"})),q_=T(''),Q_=Object.freeze(Object.defineProperty({__proto__:null,default:q_},Symbol.toStringTag,{value:"Module"})),J_=T(` -`),TL=Object.freeze(Object.defineProperty({__proto__:null,default:PL},Symbol.toStringTag,{value:"Module"})),CL=j(''),EL=Object.freeze(Object.defineProperty({__proto__:null,default:CL},Symbol.toStringTag,{value:"Module"})),IL=j(''),LL=Object.freeze(Object.defineProperty({__proto__:null,default:IL},Symbol.toStringTag,{value:"Module"})),kL=j(` +`),eS=Object.freeze(Object.defineProperty({__proto__:null,default:J_},Symbol.toStringTag,{value:"Module"})),tS=T(''),rS=Object.freeze(Object.defineProperty({__proto__:null,default:tS},Symbol.toStringTag,{value:"Module"})),iS=T(''),sS=Object.freeze(Object.defineProperty({__proto__:null,default:iS},Symbol.toStringTag,{value:"Module"})),aS=T(` - `),AL=Object.freeze(Object.defineProperty({__proto__:null,default:kL},Symbol.toStringTag,{value:"Module"})),RL=j(''),OL=Object.freeze(Object.defineProperty({__proto__:null,default:RL},Symbol.toStringTag,{value:"Module"})),zL=j(''),VL=Object.freeze(Object.defineProperty({__proto__:null,default:zL},Symbol.toStringTag,{value:"Module"})),DL=j(''),FL=Object.freeze(Object.defineProperty({__proto__:null,default:DL},Symbol.toStringTag,{value:"Module"})),NL=j(''),BL=Object.freeze(Object.defineProperty({__proto__:null,default:NL},Symbol.toStringTag,{value:"Module"})),jL=j(''),GL=Object.freeze(Object.defineProperty({__proto__:null,default:jL},Symbol.toStringTag,{value:"Module"})),HL=j(''),UL=Object.freeze(Object.defineProperty({__proto__:null,default:HL},Symbol.toStringTag,{value:"Module"})),WL=j(''),XL=Object.freeze(Object.defineProperty({__proto__:null,default:WL},Symbol.toStringTag,{value:"Module"})),YL=j(''),KL=Object.freeze(Object.defineProperty({__proto__:null,default:YL},Symbol.toStringTag,{value:"Module"})),qL=j(` + `),nS=Object.freeze(Object.defineProperty({__proto__:null,default:aS},Symbol.toStringTag,{value:"Module"})),oS=T(''),lS=Object.freeze(Object.defineProperty({__proto__:null,default:oS},Symbol.toStringTag,{value:"Module"})),cS=T(''),hS=Object.freeze(Object.defineProperty({__proto__:null,default:cS},Symbol.toStringTag,{value:"Module"})),dS=T(''),uS=Object.freeze(Object.defineProperty({__proto__:null,default:dS},Symbol.toStringTag,{value:"Module"})),pS=T(''),gS=Object.freeze(Object.defineProperty({__proto__:null,default:pS},Symbol.toStringTag,{value:"Module"})),fS=T(''),mS=Object.freeze(Object.defineProperty({__proto__:null,default:fS},Symbol.toStringTag,{value:"Module"})),vS=T(''),yS=Object.freeze(Object.defineProperty({__proto__:null,default:vS},Symbol.toStringTag,{value:"Module"})),bS=T(''),xS=Object.freeze(Object.defineProperty({__proto__:null,default:bS},Symbol.toStringTag,{value:"Module"})),$S=T(''),_S=Object.freeze(Object.defineProperty({__proto__:null,default:$S},Symbol.toStringTag,{value:"Module"})),SS=T(` - `),ZL=Object.freeze(Object.defineProperty({__proto__:null,default:qL},Symbol.toStringTag,{value:"Module"})),JL=j(` + `),PS=Object.freeze(Object.defineProperty({__proto__:null,default:SS},Symbol.toStringTag,{value:"Module"})),wS=T(` -`),QL=Object.freeze(Object.defineProperty({__proto__:null,default:JL},Symbol.toStringTag,{value:"Module"})),ek=j(` +`),CS=Object.freeze(Object.defineProperty({__proto__:null,default:wS},Symbol.toStringTag,{value:"Module"})),TS=T(` -`),tk=Object.freeze(Object.defineProperty({__proto__:null,default:ek},Symbol.toStringTag,{value:"Module"})),ik=j(''),rk=Object.freeze(Object.defineProperty({__proto__:null,default:ik},Symbol.toStringTag,{value:"Module"})),nk=j(''),sk=Object.freeze(Object.defineProperty({__proto__:null,default:nk},Symbol.toStringTag,{value:"Module"})),ak=j(''),ok=Object.freeze(Object.defineProperty({__proto__:null,default:ak},Symbol.toStringTag,{value:"Module"})),lk=j(''),ck=Object.freeze(Object.defineProperty({__proto__:null,default:lk},Symbol.toStringTag,{value:"Module"})),hk=j(''),dk=Object.freeze(Object.defineProperty({__proto__:null,default:hk},Symbol.toStringTag,{value:"Module"})),uk=j(''),pk=Object.freeze(Object.defineProperty({__proto__:null,default:uk},Symbol.toStringTag,{value:"Module"})),fk=j(''),gk=Object.freeze(Object.defineProperty({__proto__:null,default:fk},Symbol.toStringTag,{value:"Module"}));const mk={"./icon_list/_icon_template.js":t$,"./icon_list/account_tree.js":r$,"./icon_list/add.js":s$,"./icon_list/add_box.js":o$,"./icon_list/add_circle.js":c$,"./icon_list/add_note.js":d$,"./icon_list/align_center.js":p$,"./icon_list/align_horizontal_center.js":g$,"./icon_list/align_horizontal_left.js":v$,"./icon_list/align_horizontal_right.js":b$,"./icon_list/align_justify.js":_$,"./icon_list/align_left.js":w$,"./icon_list/align_right.js":$$,"./icon_list/align_vertical_bottom.js":T$,"./icon_list/align_vertical_center.js":E$,"./icon_list/align_vertical_top.js":L$,"./icon_list/alternate.js":A$,"./icon_list/alternate_reverse.js":O$,"./icon_list/apps.js":V$,"./icon_list/archive.js":F$,"./icon_list/arrowLeft.js":B$,"./icon_list/arrowRight.js":G$,"./icon_list/arrow_right.js":U$,"./icon_list/artboard.js":X$,"./icon_list/auto_awesome.js":K$,"./icon_list/autorenew.js":Z$,"./icon_list/ballot.js":Q$,"./icon_list/bar_chart.js":tP,"./icon_list/blur.js":rP,"./icon_list/blur_linear.js":sP,"./icon_list/boolean_difference.js":oP,"./icon_list/boolean_intersection.js":cP,"./icon_list/boolean_union.js":dP,"./icon_list/boolean_xor.js":pP,"./icon_list/border_all.js":gP,"./icon_list/border_inner.js":vP,"./icon_list/border_style.js":bP,"./icon_list/bottom.js":_P,"./icon_list/broken_image.js":wP,"./icon_list/brush.js":$P,"./icon_list/build.js":TP,"./icon_list/camera_roll.js":EP,"./icon_list/cat.js":LP,"./icon_list/center.js":AP,"./icon_list/chart.js":OP,"./icon_list/check.js":VP,"./icon_list/chevron_left.js":FP,"./icon_list/chevron_right.js":BP,"./icon_list/circle.js":GP,"./icon_list/close.js":UP,"./icon_list/code.js":XP,"./icon_list/color.js":KP,"./icon_list/color_lens.js":ZP,"./icon_list/control_point.js":QP,"./icon_list/copy.js":tT,"./icon_list/create_folder.js":rT,"./icon_list/cube.js":sT,"./icon_list/cylinder.js":oT,"./icon_list/dahaze.js":cT,"./icon_list/dark.js":dT,"./icon_list/delete_forever.js":pT,"./icon_list/device_hub.js":gT,"./icon_list/diffuse.js":vT,"./icon_list/direction.js":bT,"./icon_list/doc.js":_T,"./icon_list/drag_handle.js":wT,"./icon_list/drag_indicator.js":$T,"./icon_list/draw.js":TT,"./icon_list/east.js":ET,"./icon_list/edit.js":LT,"./icon_list/end.js":AT,"./icon_list/exit_to_app.js":OT,"./icon_list/expand.js":VT,"./icon_list/expand_more.js":FT,"./icon_list/export.js":BT,"./icon_list/face.js":GT,"./icon_list/fast_forward.js":UT,"./icon_list/fast_rewind.js":XT,"./icon_list/file_copy.js":KT,"./icon_list/filter.js":ZT,"./icon_list/flag.js":QT,"./icon_list/flash_on.js":tC,"./icon_list/flatten.js":rC,"./icon_list/flex.js":sC,"./icon_list/flip.js":oC,"./icon_list/flipY.js":cC,"./icon_list/flip_camera.js":dC,"./icon_list/folder.js":pC,"./icon_list/font_download.js":gC,"./icon_list/format_bold.js":vC,"./icon_list/format_indent.js":bC,"./icon_list/format_line_spacing.js":_C,"./icon_list/format_shapes.js":wC,"./icon_list/format_size.js":$C,"./icon_list/fullscreen.js":TC,"./icon_list/gps_fixed.js":EC,"./icon_list/gradient.js":LC,"./icon_list/grid.js":AC,"./icon_list/grid3x3.js":OC,"./icon_list/group.js":VC,"./icon_list/height.js":FC,"./icon_list/highlight_at.js":BC,"./icon_list/horizontal_align_center.js":GC,"./icon_list/horizontal_distribute.js":UC,"./icon_list/horizontal_rule.js":XC,"./icon_list/image.js":KC,"./icon_list/input.js":ZC,"./icon_list/italic.js":QC,"./icon_list/join_full.js":tE,"./icon_list/join_right.js":rE,"./icon_list/justify_content_space_around.js":sE,"./icon_list/keyboard.js":oE,"./icon_list/keyboard_arrow_down.js":cE,"./icon_list/keyboard_arrow_left.js":dE,"./icon_list/keyboard_arrow_right.js":pE,"./icon_list/keyboard_arrow_up.js":gE,"./icon_list/landscape.js":vE,"./icon_list/launch.js":bE,"./icon_list/layers.js":_E,"./icon_list/layout_default.js":wE,"./icon_list/layout_flex.js":$E,"./icon_list/layout_grid.js":TE,"./icon_list/left.js":EE,"./icon_list/left_hide.js":LE,"./icon_list/lens.js":AE,"./icon_list/light.js":OE,"./icon_list/line_cap_butt.js":VE,"./icon_list/line_cap_round.js":FE,"./icon_list/line_cap_square.js":BE,"./icon_list/line_chart.js":GE,"./icon_list/line_join_bevel.js":UE,"./icon_list/line_join_miter.js":XE,"./icon_list/line_join_round.js":KE,"./icon_list/line_style.js":ZE,"./icon_list/line_weight.js":QE,"./icon_list/list.js":t3,"./icon_list/local_library.js":r3,"./icon_list/local_movie.js":s3,"./icon_list/lock.js":o3,"./icon_list/lock_open.js":c3,"./icon_list/looks.js":d3,"./icon_list/margin.js":p3,"./icon_list/merge.js":g3,"./icon_list/middle.js":v3,"./icon_list/navigation.js":b3,"./icon_list/near_me.js":_3,"./icon_list/north.js":w3,"./icon_list/note.js":$3,"./icon_list/nowrap.js":T3,"./icon_list/opacity.js":E3,"./icon_list/outline.js":L3,"./icon_list/outline_circle.js":A3,"./icon_list/outline_image.js":O3,"./icon_list/outline_rect.js":V3,"./icon_list/outline_shape.js":F3,"./icon_list/padding.js":B3,"./icon_list/paint.js":G3,"./icon_list/palette.js":U3,"./icon_list/pantool.js":X3,"./icon_list/pattern_check.js":K3,"./icon_list/pattern_cross_dot.js":Z3,"./icon_list/pattern_dot.js":Q3,"./icon_list/pattern_grid.js":t5,"./icon_list/pattern_horizontal_line.js":r5,"./icon_list/pause.js":s5,"./icon_list/pentool.js":o5,"./icon_list/photo.js":c5,"./icon_list/play.js":d5,"./icon_list/plugin.js":p5,"./icon_list/polygon.js":g5,"./icon_list/power_input.js":v5,"./icon_list/publish.js":b5,"./icon_list/rect.js":_5,"./icon_list/redo.js":w5,"./icon_list/refresh.js":$5,"./icon_list/remove.js":T5,"./icon_list/remove2.js":E5,"./icon_list/repeat.js":L5,"./icon_list/replay.js":A5,"./icon_list/right.js":O5,"./icon_list/right_hide.js":V5,"./icon_list/rotate.js":F5,"./icon_list/rotate_left.js":B5,"./icon_list/round.js":G5,"./icon_list/same_height.js":U5,"./icon_list/same_width.js":X5,"./icon_list/save.js":K5,"./icon_list/scatter.js":Z5,"./icon_list/screen.js":Q5,"./icon_list/setting.js":tI,"./icon_list/settings_input_component.js":rI,"./icon_list/shadow.js":sI,"./icon_list/shape.js":oI,"./icon_list/shuffle.js":cI,"./icon_list/size.js":dI,"./icon_list/skip_next.js":pI,"./icon_list/skip_prev.js":gI,"./icon_list/smooth.js":vI,"./icon_list/source.js":bI,"./icon_list/south.js":_I,"./icon_list/space.js":wI,"./icon_list/specular.js":$I,"./icon_list/speed.js":TI,"./icon_list/star.js":EI,"./icon_list/start.js":LI,"./icon_list/storage.js":AI,"./icon_list/straighten.js":OI,"./icon_list/strikethrough.js":VI,"./icon_list/stroke_to_path.js":FI,"./icon_list/swap_horiz.js":BI,"./icon_list/switch_left.js":GI,"./icon_list/switch_right.js":UI,"./icon_list/sync.js":XI,"./icon_list/table_rows.js":KI,"./icon_list/text_rotate.js":ZI,"./icon_list/texture.js":QI,"./icon_list/timer.js":tL,"./icon_list/title.js":rL,"./icon_list/to_back.js":sL,"./icon_list/to_front.js":oL,"./icon_list/tonality.js":cL,"./icon_list/top.js":dL,"./icon_list/transform.js":pL,"./icon_list/underline.js":gL,"./icon_list/undo.js":vL,"./icon_list/unfold.js":bL,"./icon_list/vertical_align_baseline.js":_L,"./icon_list/vertical_align_bottom.js":wL,"./icon_list/vertical_align_center.js":$L,"./icon_list/vertical_align_stretch.js":TL,"./icon_list/vertical_align_top.js":EL,"./icon_list/vertical_distribute.js":LL,"./icon_list/video.js":AL,"./icon_list/view_comfy.js":OL,"./icon_list/view_list.js":VL,"./icon_list/view_week.js":FL,"./icon_list/view_week_reverse.js":BL,"./icon_list/vignette.js":GL,"./icon_list/vintage.js":UL,"./icon_list/visible.js":XL,"./icon_list/visible_off.js":KL,"./icon_list/volume_down.js":ZL,"./icon_list/volume_off.js":QL,"./icon_list/volume_up.js":tk,"./icon_list/wave.js":rk,"./icon_list/waves.js":sk,"./icon_list/web.js":ok,"./icon_list/west.js":ck,"./icon_list/width.js":dk,"./icon_list/wrap.js":pk,"./icon_list/wrap_text.js":gk},We={};Object.entries(mk).forEach(([n,e])=>{n=n.replace("./icon_list/","").replace(".js",""),We[n]=e.default});function re(n,e="",t={width:24,height:24}){return n?` - -`:""}function vk(n,e={width:24,height:24}){return` +`),kS=Object.freeze(Object.defineProperty({__proto__:null,default:TS},Symbol.toStringTag,{value:"Module"})),MS=T(''),IS=Object.freeze(Object.defineProperty({__proto__:null,default:MS},Symbol.toStringTag,{value:"Module"})),ES=T(''),LS=Object.freeze(Object.defineProperty({__proto__:null,default:ES},Symbol.toStringTag,{value:"Module"})),VS=T(''),OS=Object.freeze(Object.defineProperty({__proto__:null,default:VS},Symbol.toStringTag,{value:"Module"})),RS=T(''),jS=Object.freeze(Object.defineProperty({__proto__:null,default:RS},Symbol.toStringTag,{value:"Module"})),zS=T(''),AS=Object.freeze(Object.defineProperty({__proto__:null,default:zS},Symbol.toStringTag,{value:"Module"})),DS=T(''),FS=Object.freeze(Object.defineProperty({__proto__:null,default:DS},Symbol.toStringTag,{value:"Module"})),BS=T(''),NS=Object.freeze(Object.defineProperty({__proto__:null,default:BS},Symbol.toStringTag,{value:"Module"}));const GS={"./icon_list/_icon_template.js":kv,"./icon_list/account_tree.js":Iv,"./icon_list/add.js":Lv,"./icon_list/add_box.js":Ov,"./icon_list/add_circle.js":jv,"./icon_list/add_note.js":Av,"./icon_list/align_center.js":Fv,"./icon_list/align_horizontal_center.js":Nv,"./icon_list/align_horizontal_left.js":Hv,"./icon_list/align_horizontal_right.js":Wv,"./icon_list/align_justify.js":Yv,"./icon_list/align_left.js":Zv,"./icon_list/align_right.js":Qv,"./icon_list/align_vertical_bottom.js":e1,"./icon_list/align_vertical_center.js":r1,"./icon_list/align_vertical_top.js":s1,"./icon_list/alternate.js":n1,"./icon_list/alternate_reverse.js":l1,"./icon_list/apps.js":h1,"./icon_list/archive.js":u1,"./icon_list/arrowLeft.js":g1,"./icon_list/arrowRight.js":m1,"./icon_list/arrow_right.js":y1,"./icon_list/artboard.js":x1,"./icon_list/auto_awesome.js":_1,"./icon_list/autorenew.js":P1,"./icon_list/ballot.js":C1,"./icon_list/bar_chart.js":k1,"./icon_list/blur.js":I1,"./icon_list/blur_linear.js":L1,"./icon_list/boolean_difference.js":O1,"./icon_list/boolean_intersection.js":j1,"./icon_list/boolean_union.js":A1,"./icon_list/boolean_xor.js":F1,"./icon_list/border_all.js":N1,"./icon_list/border_inner.js":H1,"./icon_list/border_style.js":W1,"./icon_list/bottom.js":Y1,"./icon_list/broken_image.js":Z1,"./icon_list/brush.js":Q1,"./icon_list/build.js":e0,"./icon_list/camera_roll.js":r0,"./icon_list/cat.js":s0,"./icon_list/center.js":n0,"./icon_list/chart.js":l0,"./icon_list/check.js":h0,"./icon_list/chevron_left.js":u0,"./icon_list/chevron_right.js":g0,"./icon_list/circle.js":m0,"./icon_list/close.js":y0,"./icon_list/code.js":x0,"./icon_list/color.js":_0,"./icon_list/color_lens.js":P0,"./icon_list/control_point.js":C0,"./icon_list/copy.js":k0,"./icon_list/create_folder.js":I0,"./icon_list/cube.js":L0,"./icon_list/cylinder.js":O0,"./icon_list/dahaze.js":j0,"./icon_list/dark.js":A0,"./icon_list/delete_forever.js":F0,"./icon_list/device_hub.js":N0,"./icon_list/diffuse.js":H0,"./icon_list/direction.js":W0,"./icon_list/doc.js":Y0,"./icon_list/drag_handle.js":Z0,"./icon_list/drag_indicator.js":Q0,"./icon_list/draw.js":ey,"./icon_list/east.js":ry,"./icon_list/edit.js":sy,"./icon_list/end.js":ny,"./icon_list/exit_to_app.js":ly,"./icon_list/expand.js":hy,"./icon_list/expand_more.js":uy,"./icon_list/export.js":gy,"./icon_list/face.js":my,"./icon_list/fast_forward.js":yy,"./icon_list/fast_rewind.js":xy,"./icon_list/file_copy.js":_y,"./icon_list/filter.js":Py,"./icon_list/flag.js":Cy,"./icon_list/flash_on.js":ky,"./icon_list/flatten.js":Iy,"./icon_list/flex.js":Ly,"./icon_list/flip.js":Oy,"./icon_list/flipY.js":jy,"./icon_list/flip_camera.js":Ay,"./icon_list/folder.js":Fy,"./icon_list/font_download.js":Ny,"./icon_list/format_bold.js":Hy,"./icon_list/format_indent.js":Wy,"./icon_list/format_line_spacing.js":Yy,"./icon_list/format_shapes.js":Zy,"./icon_list/format_size.js":Qy,"./icon_list/fullscreen.js":eb,"./icon_list/gps_fixed.js":rb,"./icon_list/gradient.js":sb,"./icon_list/grid.js":nb,"./icon_list/grid3x3.js":lb,"./icon_list/group.js":hb,"./icon_list/height.js":ub,"./icon_list/highlight_at.js":gb,"./icon_list/horizontal_align_center.js":mb,"./icon_list/horizontal_distribute.js":yb,"./icon_list/horizontal_rule.js":xb,"./icon_list/image.js":_b,"./icon_list/input.js":Pb,"./icon_list/italic.js":Cb,"./icon_list/join_full.js":kb,"./icon_list/join_right.js":Ib,"./icon_list/justify_content_space_around.js":Lb,"./icon_list/keyboard.js":Ob,"./icon_list/keyboard_arrow_down.js":jb,"./icon_list/keyboard_arrow_left.js":Ab,"./icon_list/keyboard_arrow_right.js":Fb,"./icon_list/keyboard_arrow_up.js":Nb,"./icon_list/landscape.js":Hb,"./icon_list/launch.js":Wb,"./icon_list/layers.js":Yb,"./icon_list/layout_default.js":Zb,"./icon_list/layout_flex.js":Qb,"./icon_list/layout_grid.js":ex,"./icon_list/left.js":rx,"./icon_list/left_hide.js":sx,"./icon_list/lens.js":nx,"./icon_list/light.js":lx,"./icon_list/line_cap_butt.js":hx,"./icon_list/line_cap_round.js":ux,"./icon_list/line_cap_square.js":gx,"./icon_list/line_chart.js":mx,"./icon_list/line_join_bevel.js":yx,"./icon_list/line_join_miter.js":xx,"./icon_list/line_join_round.js":_x,"./icon_list/line_style.js":Px,"./icon_list/line_weight.js":Cx,"./icon_list/list.js":kx,"./icon_list/local_library.js":Ix,"./icon_list/local_movie.js":Lx,"./icon_list/lock.js":Ox,"./icon_list/lock_open.js":jx,"./icon_list/looks.js":Ax,"./icon_list/margin.js":Fx,"./icon_list/merge.js":Nx,"./icon_list/middle.js":Hx,"./icon_list/navigation.js":Wx,"./icon_list/near_me.js":Yx,"./icon_list/north.js":Zx,"./icon_list/note.js":Qx,"./icon_list/nowrap.js":e$,"./icon_list/opacity.js":r$,"./icon_list/outline.js":s$,"./icon_list/outline_circle.js":n$,"./icon_list/outline_image.js":l$,"./icon_list/outline_rect.js":h$,"./icon_list/outline_shape.js":u$,"./icon_list/padding.js":g$,"./icon_list/paint.js":m$,"./icon_list/palette.js":y$,"./icon_list/pantool.js":x$,"./icon_list/pattern_check.js":_$,"./icon_list/pattern_cross_dot.js":P$,"./icon_list/pattern_dot.js":C$,"./icon_list/pattern_grid.js":k$,"./icon_list/pattern_horizontal_line.js":I$,"./icon_list/pause.js":L$,"./icon_list/pentool.js":O$,"./icon_list/photo.js":j$,"./icon_list/play.js":A$,"./icon_list/plugin.js":F$,"./icon_list/polygon.js":N$,"./icon_list/power_input.js":H$,"./icon_list/publish.js":W$,"./icon_list/rect.js":Y$,"./icon_list/redo.js":Z$,"./icon_list/refresh.js":Q$,"./icon_list/remove.js":e2,"./icon_list/remove2.js":r2,"./icon_list/repeat.js":s2,"./icon_list/replay.js":n2,"./icon_list/right.js":l2,"./icon_list/right_hide.js":h2,"./icon_list/rotate.js":u2,"./icon_list/rotate_left.js":g2,"./icon_list/round.js":m2,"./icon_list/same_height.js":y2,"./icon_list/same_width.js":x2,"./icon_list/save.js":_2,"./icon_list/scatter.js":P2,"./icon_list/screen.js":C2,"./icon_list/setting.js":k2,"./icon_list/settings_input_component.js":I2,"./icon_list/shadow.js":L2,"./icon_list/shape.js":O2,"./icon_list/shuffle.js":j2,"./icon_list/size.js":A2,"./icon_list/skip_next.js":F2,"./icon_list/skip_prev.js":N2,"./icon_list/smooth.js":H2,"./icon_list/source.js":W2,"./icon_list/south.js":Y2,"./icon_list/space.js":Z2,"./icon_list/specular.js":Q2,"./icon_list/speed.js":e_,"./icon_list/star.js":r_,"./icon_list/start.js":s_,"./icon_list/storage.js":n_,"./icon_list/straighten.js":l_,"./icon_list/strikethrough.js":h_,"./icon_list/stroke_to_path.js":u_,"./icon_list/swap_horiz.js":g_,"./icon_list/switch_left.js":m_,"./icon_list/switch_right.js":y_,"./icon_list/sync.js":x_,"./icon_list/table_rows.js":__,"./icon_list/text_rotate.js":P_,"./icon_list/texture.js":C_,"./icon_list/timer.js":k_,"./icon_list/title.js":I_,"./icon_list/to_back.js":L_,"./icon_list/to_front.js":O_,"./icon_list/tonality.js":j_,"./icon_list/top.js":A_,"./icon_list/transform.js":F_,"./icon_list/underline.js":N_,"./icon_list/undo.js":H_,"./icon_list/unfold.js":W_,"./icon_list/vertical_align_baseline.js":Y_,"./icon_list/vertical_align_bottom.js":Z_,"./icon_list/vertical_align_center.js":Q_,"./icon_list/vertical_align_stretch.js":eS,"./icon_list/vertical_align_top.js":rS,"./icon_list/vertical_distribute.js":sS,"./icon_list/video.js":nS,"./icon_list/view_comfy.js":lS,"./icon_list/view_list.js":hS,"./icon_list/view_week.js":uS,"./icon_list/view_week_reverse.js":gS,"./icon_list/vignette.js":mS,"./icon_list/vintage.js":yS,"./icon_list/visible.js":xS,"./icon_list/visible_off.js":_S,"./icon_list/volume_down.js":PS,"./icon_list/volume_off.js":CS,"./icon_list/volume_up.js":kS,"./icon_list/wave.js":IS,"./icon_list/waves.js":LS,"./icon_list/web.js":OS,"./icon_list/west.js":jS,"./icon_list/width.js":AS,"./icon_list/wrap.js":FS,"./icon_list/wrap_text.js":NS},oe={};Object.entries(GS).forEach(([s,e])=>{s=s.replace("./icon_list/","").replace(".js",""),oe[s]=e.default});function z(s,e="",t={width:24,height:24}){return s?` + +`:""}function HS(s,e={width:24,height:24}){return` - + - `}function yk(n,e={width:24,height:24}){return` + `}function US(s,e={width:24,height:24}){return` - ${n} + ${s} - `}function bk(){return yk('')}class X0 extends ge{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){return``}[se("$el")](){this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):Ue(this.props.action)?this.props.action(this.$editor,this):Ue(this.props.onClick)&&this.props.onClick(this.$editor,this),Ue(this.props.nextTick)&&this.props.nextTick(this.$editor)}[ve("$el")+It](){let e="";return this.props.icon&&(e+=`${re(this.props.icon)}`),this.props.title&&(e+=`${this.props.title}`),e}[$e("$el")](){const e=Ue(this.props.selected)?this.props.selected(this.$editor):!1;return{style:P({},this.props.style),"data-selected":e}}}var Yte="";function Y0(){return Ze.createByHTML('
  • ')}class Fd extends ge{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){var i;const e=this.props,t=Ue(e.checked)?e.checked(this.$editor):e.checked;return` -
  • ')}class Vd extends Y{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){return``}[A("$el")](){this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):de(this.props.action)?this.props.action(this.$editor,this):de(this.props.onClick)&&this.props.onClick(this.$editor,this),de(this.props.nextTick)&&this.props.nextTick(this.$editor)}[G("$el")+Ee](){let e="";return this.props.icon&&(e+=`${z(this.props.icon)}`),this.props.title&&(e+=`${this.props.title}`),e}[ne("$el")](){const e=de(this.props.selected)?this.props.selected(this.$editor):!1;return{style:b({},this.props.style),"data-selected":e}}}var N7="";function Od(){return ge.createByHTML('
  • ')}class oo extends Y{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){var r;const e=this.props,t=de(e.checked)?e.checked(this.$editor):e.checked;return` +
  • - ${t?re("check"):e.icon||""} + ${t?z("check"):e.icon||""}
    ${e.shortcut||""}
    • - `}[se("$el")+St+Bn](){console.log("click",this.props.command,this.props.args),this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):Ue(this.props.action)?this.props.action(this.$editor,this):Ue(this.props.onClick)&&this.props.action(this.$editor,this),Ue(this.props.nextTick)&&this.nextTick(()=>{this.props.nextTick(this.$editor,this)}),this.props.closable&&this.parent.close()}}class K0 extends Fd{template(){return"
  • "}get checked(){return Ue(this.props.checked)?this.props.checked(this.$editor,this):this.props.checked}[ve("$el")+It](){return` + `}[A("$el")+Ve+Wr](){console.log("click",this.props.command,this.props.args),this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):de(this.props.action)?this.props.action(this.$editor,this):de(this.props.onClick)&&this.props.action(this.$editor,this),de(this.props.nextTick)&&this.nextTick(()=>{this.props.nextTick(this.$editor,this)}),this.props.closable&&this.parent.close()}}class Rd extends oo{template(){return"
  • "}get checked(){return de(this.props.checked)?this.props.checked(this.$editor,this):this.props.checked}[G("$el")+Ee](){return` - `}}class q0 extends Fd{template(){return"
  • "}getTemplateString(){return Ue(this.props.template)?this.props.template(this.$editor,this):this.$i18n(this.props.template)}[ve("$el")+It](){return this.getTemplateString()}}function Z0(){return'
  • '}function J0(){return`
  • + `}}class jd extends oo{template(){return"
  • "}getTemplateString(){return de(this.props.template)?this.props.template(this.$editor,this):this.$i18n(this.props.template)}[G("$el")+Ee](){return this.getTemplateString()}}function zd(){return'
  • '}function Ad(){return`
  • ${this.$i18n(this.props.title)} -
    • `}function Q0(){return`
    • `}function Hf(n,e){return n==="-"?W("Divider",{ref:`${e}-divider`}):n==="-"||n.type==="divider"?W("DropdownDividerMenuItem",{ref:`${e}-divider`}):ni(n)?W("DropdownTextMenuItem",{text:n,ref:`${e}-text`}):n.type==="link"?W("DropdownLinkMenuItem",{href:n.href,target:n.target,title:n.title,closable:n.closable,ref:`${e}-link`}):n.type==="custom"?W("DropdownCustomMenuItem",{action:n.action,command:n.command,args:n.args,icon:n.icon,text:n.text,events:n.events,template:n.template,closable:n.closable,ref:`${e}-custom`}):n.type==="checkbox"?W("DropdownCheckboxMenuItem",{checked:n.checked,command:n.command,args:n.args||[],disabled:n.disabled,direction:n.direction,icon:n.icon,nextTick:n.nextTick,onClick:n.onClick,action:n.action,shortcut:n.shortcut,title:n.title,key:n.key,events:n.events,closable:n.closable,items:n.items||[],ref:`${e}-checkbox`}):Fi(n.items)?W("DropdownMenuList",{title:n.title,items:n.items,ref:`${e}-list`}):W("DropdownMenuItem",{checked:n.checked,command:n.command,args:n.args||[],disabled:n.disabled,direction:n.direction,icon:n.icon,nextTick:n.nextTick,onClick:n.onClick,action:n.action,shortcut:n.shortcut,title:n.title,key:n.key,events:n.events,closable:n.closable,items:n.items||[],ref:`${e}-menu-item`})}class Nd extends ge{components(){return{Divider:Y0,DropdownDividerMenuItem:Z0,DropdownLinkMenuItem:J0,DropdownTextMenuItem:Q0,DropdownCustomMenuItem:q0,DropdownCheckboxMenuItem:K0,DropdownMenuList:Nd,DropdownMenuItem:Fd}}get groupId(){return`${this.props.id}-groupId`}template(){return` + `}function Dd(){return`
    • `}function Jl(s,e){return s==="-"?R("Divider",{ref:`${e}-divider`}):s==="-"||s.type==="divider"?R("DropdownDividerMenuItem",{ref:`${e}-divider`}):it(s)?R("DropdownTextMenuItem",{text:s,ref:`${e}-text`}):s.type==="link"?R("DropdownLinkMenuItem",{href:s.href,target:s.target,title:s.title,closable:s.closable,ref:`${e}-link`}):s.type==="custom"?R("DropdownCustomMenuItem",{action:s.action,command:s.command,args:s.args,icon:s.icon,text:s.text,events:s.events,template:s.template,closable:s.closable,ref:`${e}-custom`}):s.type==="checkbox"?R("DropdownCheckboxMenuItem",{checked:s.checked,command:s.command,args:s.args||[],disabled:s.disabled,direction:s.direction,icon:s.icon,nextTick:s.nextTick,onClick:s.onClick,action:s.action,shortcut:s.shortcut,title:s.title,key:s.key,events:s.events,closable:s.closable,items:s.items||[],ref:`${e}-checkbox`}):Gt(s.items)?R("DropdownMenuList",{title:s.title,items:s.items,ref:`${e}-list`}):R("DropdownMenuItem",{checked:s.checked,command:s.command,args:s.args||[],disabled:s.disabled,direction:s.direction,icon:s.icon,nextTick:s.nextTick,onClick:s.onClick,action:s.action,shortcut:s.shortcut,title:s.title,key:s.key,events:s.events,closable:s.closable,items:s.items||[],ref:`${e}-menu-item`})}class lo extends Y{components(){return{Divider:Od,DropdownDividerMenuItem:zd,DropdownLinkMenuItem:Ad,DropdownTextMenuItem:Dd,DropdownCustomMenuItem:jd,DropdownCheckboxMenuItem:Rd,DropdownMenuList:lo,DropdownMenuItem:oo}}get groupId(){return`${this.props.id}-groupId`}template(){return`
  • - ${re("arrowRight")} + ${z("arrowRight")}
      - ${this.props.items.map((e,t)=>Hf(e,`${this.groupId}-${t}`)).join("")} + ${this.props.items.map((e,t)=>Jl(e,`${this.groupId}-${t}`)).join("")}
    • - `}}var Kte="";function Bt(n,e){return e=typeof e=="undefined"?1:e,Math.round(n*e)/e}function Uf(n,e,t=100){const i=n<0?Math.floor(n/t):Math.ceil(n/t);return[e<0?Math.floor(e/t):Math.ceil(e/t),i]}function lr(n){return n*(Math.PI/180)}function ey(n,e=1){return n===0?0:n/e}function Bd(n){var e=n*(180/Math.PI);return e<0&&(e=360+e),e}function xk(n,e,t=0){return t+e*Math.cos(lr(n))}function _k(n,e,t=0){return t+e*Math.sin(lr(n))}function pl(n,e,t=0,i=0){return{x:xk(n,e,t),y:_k(n,e,i)}}function Rr(n,e,t=0,i=0){return RM([n,e],[t,i])}function Sk(n,e,t=0){return Ae([],n,e,1+t/Ne(n,e))}function Xe(n,e){return n.length===1?[Kt([],n[0],e)]:n.length===2?[Kt([],n[0],e),Kt([],n[1],e)]:n.length===3?[Kt([],n[0],e),Kt([],n[1],e),Kt([],n[2],e)]:n.length===4?[Kt([],n[0],e),Kt([],n[1],e),Kt([],n[2],e),Kt([],n[3],e)]:n.length===5?[Kt([],n[0],e),Kt([],n[1],e),Kt([],n[2],e),Kt([],n[3],e),Kt([],n[4],e)]:n.map(t=>Kt([],t,e))}function Wf(n,e,t,i){return[n,[e[0],n[1],e[2]],t,Math.abs(n[0]-e[0]),i]}function jd(n,e,t,i){return[[e[0],n[1],n[2]],e,t,Math.abs(n[1]-e[1]),i]}function wk(n,e=!1){if(e===!1)return n;const[t,i,r,s,a,o,l]=n;return a?[[i[0],a[1],i[2]],[t[0],a[1],t[2]],r,s,[t[0],t[1],a[2]],o,l,e]:[i,t,r,s,a,o,l,e]}function Mk(n,e){let t=n,i=e,r=!1;n[4][0]-e[4][0]>0&&(t=e,i=n,r=!0);const s=Ae([],t[1],t[2],.5),a=Ae([],i[0],i[3],.5);let o=[];return i[0][1]<=s[1]&&s[1]<=i[3][1]?o.push(Wf(s,a,"x",null)):i[0][1]<=t[1][1]?i[3][0]<=t[1][0]&&t[1][0]<=i[2][0]?o.push(jd(i[3],[i[3][0],t[1][1],t[1][2]],"y",null)):o.push(Wf(t[1],a,"x",i[3])):t[3][0]<=i[0][0]&&i[0][0]<=t[2][0]?o.push(jd(t[3],i[0],"y")):i[3][0]<=t[0][0]&&t[0][0]<=i[2][0]?o.push(jd([i[0][0],t[3][1],t[3][2]],i[0],"y")):i[3][0]<=t[1][0]&&t[1][0]<=i[2][0]?o.push(jd(i[3],[i[3][0],t[1][1],t[1][2]],"y")):o.push(Wf(t[2],a,"x",i[0])),o.sort((l,c)=>l[3]-c[3]),wk([...o[0],n,e],r)}function Gd(n){let e=Number.MIN_SAFE_INTEGER;return n.forEach(t=>{e=Math.max(t[0],e)}),e}function Hd(n){let e=Number.MIN_SAFE_INTEGER;return n.forEach(t=>{e=Math.max(t[1],e)}),e}function Ud(n){let e=Number.MAX_SAFE_INTEGER;return n.forEach(t=>{e=Math.min(t[0],e)}),e}function Wd(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return n.forEach(i=>{e=Math.min(i[0],e),t=Math.max(i[0],t)}),Math.round((e+t)/2)}function Xd(n){let e=Number.MAX_SAFE_INTEGER;return n.forEach(t=>{e=Math.min(t[1],e)}),e}function Yd(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return n.forEach(i=>{e=Math.min(i[1],e),t=Math.max(i[1],t)}),Math.round((e+t)/2)}function fl(n,e){return Bd(Math.atan2(e,n))}function Xf(n,e,t){return $k({x:n[0],y:n[1]},{x:e[0],y:e[1]},{dx:t[0],dy:t[1]})}function cr(n,e){const t=Ki();return Ni(t,t,e),V0(t,t,lr(n)),Ni(t,t,Tr([],e)),t}function Or(...n){const e=Ki();return n.forEach(t=>{qi(e,e,t)}),e}function fa(...n){return ir([],Or(...n))}function $k(n,e,t){var i=n.x-e.x,r=n.y-e.y,s=fl(i,r),a=n.x+t.dx-e.x,o=n.y+t.dy-e.y,l=fl(a,o)-s;return l}function li(n,e){return(fl(n,e)+180)%360}const ty=/[xy]/g;function ho(){var n=new Date().getTime(),e="xxx12-xx-34xx".replace(ty,function(t){var i=(n+Math.random()*16)%16|0;return n=Math.floor(n/16),(t=="x"?i:i&3|8).toString(16)});return e}function Zr(){var n=new Date().getTime(),e="idxxxxxxx".replace(ty,function(t){var i=(n+Math.random()*16)%16|0;return n=Math.floor(n/16),(t=="x"?i:i&3|8).toString(16)});return e}const Pk=/[\b\t ,\n]/g;function iy(n){return n.trim().split(Pk).filter(e=>e).map(e=>+e)}const ry={center:50,top:0,left:0,right:100,bottom:100};class zr{}zr.CENTER="center",zr.TOP="top",zr.RIGHT="right",zr.LEFT="left",zr.BOTTOM="bottom";const Tk=/([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)/gi;class y{constructor(e="",t=""){this.value=e,_i(this.value)&&isNaN(this.value)&&(this.value=0),this.unit=t}[Symbol.toPrimitive](e){return e=="number"?this.value:this.toString()}static min(...e){for(var t=e.shift(),i=0,r=e.length;ie[i].value&&(t=e[i]);return t}static max(...e){for(var t=e.shift(),i=0,r=e.length;i{this.on(t,()=>this.refresh())})}initState(){return{direction:this.props.direction||"left",opened:this.props.opened||!1,items:this.props.items||[],dy:this.props.dy||0}}findItem(e){return this.state.items.find(t=>t.key&&t.key===e)}template(){const{direction:e}=this.state;return` -
    + `}}var G7="";function Ue(s,e){return e=typeof e=="undefined"?1:e,Math.round(s*e)/e}function ec(s,e,t=100){const r=s<0?Math.floor(s/t):Math.ceil(s/t);return[e<0?Math.floor(e/t):Math.ceil(e/t),r]}function Ht(s){return s*(Math.PI/180)}function Fd(s,e=1){return s===0?0:s/e}function co(s){var e=s*(180/Math.PI);return e<0&&(e=360+e),e}function XS(s,e,t=0){return t+e*Math.cos(Ht(s))}function YS(s,e,t=0){return t+e*Math.sin(Ht(s))}function na(s,e,t=0,r=0){return{x:XS(s,e,t),y:YS(s,e,r)}}function sr(s,e,t=0,r=0){return nv([s,e],[t,r])}function KS(s,e,t=0){return te([],s,e,1+t/ae(s,e))}function le(s,e){return s.length===1?[Ze([],s[0],e)]:s.length===2?[Ze([],s[0],e),Ze([],s[1],e)]:s.length===3?[Ze([],s[0],e),Ze([],s[1],e),Ze([],s[2],e)]:s.length===4?[Ze([],s[0],e),Ze([],s[1],e),Ze([],s[2],e),Ze([],s[3],e)]:s.length===5?[Ze([],s[0],e),Ze([],s[1],e),Ze([],s[2],e),Ze([],s[3],e),Ze([],s[4],e)]:s.map(t=>Ze([],t,e))}function tc(s,e,t,r){return[s,[e[0],s[1],e[2]],t,Math.abs(s[0]-e[0]),r]}function ho(s,e,t,r){return[[e[0],s[1],s[2]],e,t,Math.abs(s[1]-e[1]),r]}function ZS(s,e=!1){if(e===!1)return s;const[t,r,i,a,n,o,l]=s;return n?[[r[0],n[1],r[2]],[t[0],n[1],t[2]],i,a,[t[0],t[1],n[2]],o,l,e]:[r,t,i,a,n,o,l,e]}function qS(s,e){let t=s,r=e,i=!1;s[4][0]-e[4][0]>0&&(t=e,r=s,i=!0);const a=te([],t[1],t[2],.5),n=te([],r[0],r[3],.5);let o=[];return r[0][1]<=a[1]&&a[1]<=r[3][1]?o.push(tc(a,n,"x",null)):r[0][1]<=t[1][1]?r[3][0]<=t[1][0]&&t[1][0]<=r[2][0]?o.push(ho(r[3],[r[3][0],t[1][1],t[1][2]],"y",null)):o.push(tc(t[1],n,"x",r[3])):t[3][0]<=r[0][0]&&r[0][0]<=t[2][0]?o.push(ho(t[3],r[0],"y")):r[3][0]<=t[0][0]&&t[0][0]<=r[2][0]?o.push(ho([r[0][0],t[3][1],t[3][2]],r[0],"y")):r[3][0]<=t[1][0]&&t[1][0]<=r[2][0]?o.push(ho(r[3],[r[3][0],t[1][1],t[1][2]],"y")):o.push(tc(t[2],n,"x",r[0])),o.sort((l,c)=>l[3]-c[3]),ZS([...o[0],s,e],i)}function uo(s){let e=Number.MIN_SAFE_INTEGER;return s.forEach(t=>{e=Math.max(t[0],e)}),e}function po(s){let e=Number.MIN_SAFE_INTEGER;return s.forEach(t=>{e=Math.max(t[1],e)}),e}function go(s){let e=Number.MAX_SAFE_INTEGER;return s.forEach(t=>{e=Math.min(t[0],e)}),e}function fo(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return s.forEach(r=>{e=Math.min(r[0],e),t=Math.max(r[0],t)}),Math.round((e+t)/2)}function mo(s){let e=Number.MAX_SAFE_INTEGER;return s.forEach(t=>{e=Math.min(t[1],e)}),e}function vo(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return s.forEach(r=>{e=Math.min(r[1],e),t=Math.max(r[1],t)}),Math.round((e+t)/2)}function oa(s,e){return co(Math.atan2(e,s))}function rc(s,e,t){return QS({x:s[0],y:s[1]},{x:e[0],y:e[1]},{dx:t[0],dy:t[1]})}function Ut(s,e){const t=Vt();return kt(t,t,e),_d(t,t,Ht(s)),kt(t,t,tr([],e)),t}function ar(...s){const e=Vt();return s.forEach(t=>{Ot(e,e,t)}),e}function Ki(...s){return Dt([],ar(...s))}function QS(s,e,t){var r=s.x-e.x,i=s.y-e.y,a=oa(r,i),n=s.x+t.dx-e.x,o=s.y+t.dy-e.y,l=oa(n,o)-a;return l}function ot(s,e){return(oa(s,e)+180)%360}const Bd=/[xy]/g;function ws(){var s=new Date().getTime(),e="xxx12-xx-34xx".replace(Bd,function(t){var r=(s+Math.random()*16)%16|0;return s=Math.floor(s/16),(t=="x"?r:r&3|8).toString(16)});return e}function fr(){var s=new Date().getTime(),e="idxxxxxxx".replace(Bd,function(t){var r=(s+Math.random()*16)%16|0;return s=Math.floor(s/16),(t=="x"?r:r&3|8).toString(16)});return e}const JS=/[\b\t ,\n]/g;function Nd(s){return s.trim().split(JS).filter(e=>e).map(e=>+e)}const Gd={center:50,top:0,left:0,right:100,bottom:100};class nr{}nr.CENTER="center",nr.TOP="top",nr.RIGHT="right",nr.LEFT="left",nr.BOTTOM="bottom";const eP=/([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)/gi;class p{constructor(e="",t=""){this.value=e,ft(this.value)&&isNaN(this.value)&&(this.value=0),this.unit=t}[Symbol.toPrimitive](e){return e=="number"?this.value:this.toString()}static min(...e){for(var t=e.shift(),r=0,i=e.length;re[r].value&&(t=e[r]);return t}static max(...e){for(var t=e.shift(),r=0,i=e.length;r{this.on(t,()=>this.refresh())})}initState(){return{direction:this.props.direction||"left",opened:this.props.opened||!1,items:this.props.items||[],dy:this.props.dy||0}}findItem(e){return this.state.items.find(t=>t.key&&t.key===e)}template(){const{direction:e}=this.state;return` +
    - ${re("keyboard_arrow_down")} + ${z("keyboard_arrow_down")}
      @@ -215,7 +215,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[ve("$icon")](){return Ue(this.props.icon)?this.props.icon(this.$editor,this):this.props.icon}[$e("$label")](){return{innerHTML:this.props.title}}[$e("$el")](){return{"data-selected":!!(Ue(this.props.selected)?this.props.selected(this.$editor,this):!1),style:Ve(P({},this.props.style||{}),{"--elf--dropdown-menu-width":this.props.width,"--elf--dropdown-menu-dy":$t(this.props.dy)?y.px(this.props.dy):0})}}close(){this.setState({opened:!1},!1),this.$el.removeClass("opened")}toggle(){this.setState({opened:!this.state.opened},!1),this.$el.toggleClass("opened",this.state.opened),this.state.opened&&this.emit("hideDropdownMenu")}get groupId(){return this.id+"$list"}[ve("$list")+It](){return this.state.items.map((e,t)=>Hf(e,`${this.groupId}-${t}`))}checkDropdownOpen(e){return!Ze.create(e.target).closest("dropdown-menu-item-list")}[se("$arrow")+Qe("checkDropdownOpen")](){this.toggle()}[se("$label")+Qe("checkDropdownOpen")](){this.toggle()}[se("$icon")](){const e=Ue(this.props.selectedKey)?this.props.selectedKey(this.$editor,this):this.props.selectedKey,t=this.findItem(e);if(!t){Ue(this.props.action)&&this.props.action(this.$editor,this);return}const i=t.command,r=t.args,s=t.action,a=t.nextTick;i?this.$commands.emit(i,...r):s&&Ue(s)&&this.emit(s),a&&Ue(a)&&this.nextTick(()=>{a(this.$editor)}),this.close()}[Me("updateMenuItems")](e){this.setState({items:e})}[U("hideDropdownMenu")](){this.close()}[qe("document")](e){const i=Ze.create(e.target).closest("dropdown-menu");i?i.el!==this.$el.el&&this.close():this.close()}}class ny extends ge{checkProps(e={}){return e}components(){return{DropdownMenu:Yf,ToolbarButtonMenuItem:X0}}template(){return'
      '}[ve("$el")](){return this.props.items.map((e,t)=>this.renderMenuItem(e,t))}renderMenuItem(e,t){switch(e.type){case $s.LINK:return this.renderLink(e,t);case $s.SUBMENU:return this.renderMenu(e,t);case $s.BUTTON:return this.renderButton(e,t);case $s.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return W("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,tooltip:e.tooltip,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return W("DropdownMenu",Ve(P({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,tooltip:e.tooltip,direction:e.direction,events:e.events||[],selected:e.selected,selectedKey:e.selectedKey,action:e.action,style:e.style,dy:6}),[e.content])}}const Ck="",sy="",Ek=!1;class Cr extends ge{template(){return` + `}[G("$icon")](){return de(this.props.icon)?this.props.icon(this.$editor,this):this.props.icon}[ne("$label")](){return{innerHTML:this.props.title}}[ne("$el")](){return{"data-selected":!!(de(this.props.selected)?this.props.selected(this.$editor,this):!1),style:se(b({},this.props.style||{}),{"--elf--dropdown-menu-width":this.props.width,"--elf--dropdown-menu-dy":ke(this.props.dy)?p.px(this.props.dy):0})}}close(){this.setState({opened:!1},!1),this.$el.removeClass("opened")}toggle(){this.setState({opened:!this.state.opened},!1),this.$el.toggleClass("opened",this.state.opened),this.state.opened&&this.emit("hideDropdownMenu")}get groupId(){return this.id+"$list"}[G("$list")+Ee](){return this.state.items.map((e,t)=>Jl(e,`${this.groupId}-${t}`))}checkDropdownOpen(e){return!ge.create(e.target).closest("dropdown-menu-item-list")}[A("$arrow")+fe("checkDropdownOpen")](){this.toggle()}[A("$label")+fe("checkDropdownOpen")](){this.toggle()}[A("$icon")](){const e=de(this.props.selectedKey)?this.props.selectedKey(this.$editor,this):this.props.selectedKey,t=this.findItem(e);if(!t){de(this.props.action)&&this.props.action(this.$editor,this);return}const r=t.command,i=t.args,a=t.action,n=t.nextTick;r?this.$commands.emit(r,...i):a&&de(a)&&this.emit(a),n&&de(n)&&this.nextTick(()=>{n(this.$editor)}),this.close()}[Z("updateMenuItems")](e){this.setState({items:e})}[M("hideDropdownMenu")](){this.close()}[me("document")](e){const r=ge.create(e.target).closest("dropdown-menu");r?r.el!==this.$el.el&&this.close():this.close()}}class tP extends Y{checkProps(e={}){return e}components(){return{DropdownMenu:Hd,ToolbarButtonMenuItem:Vd}}template(){return'
      '}[G("$el")](){return this.props.items.map((e,t)=>this.renderMenuItem(e,t))}renderMenuItem(e,t){switch(e.type){case mi.LINK:return this.renderLink(e,t);case mi.SUBMENU:return this.renderMenu(e,t);case mi.BUTTON:return this.renderButton(e,t);case mi.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return R("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,tooltip:e.tooltip,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return R("DropdownMenu",se(b({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,tooltip:e.tooltip,direction:e.direction,events:e.events||[],selected:e.selected,selectedKey:e.selectedKey,action:e.action,style:e.style,dy:6}),[e.content])}}const rP="",Ud="",iP=!1;class Mr extends Y{template(){return` - `}getClassName(){return""}clickButton(){}getChecked(){return Ek}isDisabled(){return!1}setSelected(e){this.$el.toggleClass("selected",e)}getTitle(){return Ck}getIcon(){return sy}setIcon(e){this.refs.$icon.html(We[e]||e||"")}getIconString(){return sy}isHideTitle(){return!1}isHideTooltip(){return!0}[se()](e){this.clickButton(e)}getDirection(){return this.props.direction||""}static createMenuItem(e={}){return class extends Cr{getIconString(){return e.iconString||"add_box"}getTitle(){return e.title||"New Item"}isHideTitle(){return e.isHideTitle||!0}clickButton(t){e.clickButton(t)}getDirection(){return e.direction}}}}class ay extends Cr{getIconString(){return"launch"}getTitle(){return this.$i18n("menu.item.export.title")}clickButton(){this.emit("showExportView")}}class oy extends Cr{getIconString(){return this.$config.is("editor.theme","dark")?"dark":"light"}getTitle(){return"Theme"}isHideTitle(){return!0}clickButton(){this.$config.get("editor.theme")==="dark"?(this.$config.set("editor.theme","light"),this.setIcon("light")):(this.$config.set("editor.theme","dark"),this.setIcon("dark"))}}class Ik extends ge{components(){return{ToolBarRenderer:ny,ThemeChanger:oy,ExportView:ay,DropdownMenu:Yf}}template(){return` + `}getClassName(){return""}clickButton(){}getChecked(){return iP}isDisabled(){return!1}setSelected(e){this.$el.toggleClass("selected",e)}getTitle(){return rP}getIcon(){return Ud}setIcon(e){this.refs.$icon.html(oe[e]||e||"")}getIconString(){return Ud}isHideTitle(){return!1}isHideTooltip(){return!0}[A()](e){this.clickButton(e)}getDirection(){return this.props.direction||""}static createMenuItem(e={}){return class extends Mr{getIconString(){return e.iconString||"add_box"}getTitle(){return e.title||"New Item"}isHideTitle(){return e.isHideTitle||!0}clickButton(t){e.clickButton(t)}getDirection(){return e.direction}}}}class sP extends Mr{getIconString(){return"launch"}getTitle(){return this.$i18n("menu.item.export.title")}clickButton(){this.emit("showExportView")}}class aP extends Mr{getIconString(){return this.$config.is("editor.theme","dark")?"dark":"light"}getTitle(){return"Theme"}isHideTitle(){return!0}clickButton(){this.$config.get("editor.theme")==="dark"?(this.$config.set("editor.theme","light"),this.setIcon("light")):(this.$config.set("editor.theme","dark"),this.setIcon("dark"))}}class nP extends Y{components(){return{ToolBarRenderer:tP,ThemeChanger:aP,ExportView:sP,DropdownMenu:Hd}}template(){return`
      +
      + ${R("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.logo")})} +
      +
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} + ${R("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} ${this.$injectManager.generate("toolbar.left")}
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} + ${R("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} ${this.$injectManager.generate("toolbar.center")}
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} + ${R("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} ${this.$injectManager.generate("toolbar.right")} - ${W("ThemeChanger")} + ${R("ThemeChanger")}
      +
      - `}[U("updateMenu")](e){(e==="toolbar.left"||e==="toolbar.center"||e==="toolbar.right")&&this.refresh()}}var qte="",Lk={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},kk=Object.freeze(Object.defineProperty({__proto__:null,default:Lk},Symbol.toStringTag,{value:"Module"})),Ak={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},Rk=Object.freeze(Object.defineProperty({__proto__:null,default:Ak},Symbol.toStringTag,{value:"Module"})),Ok=Object.values({"./config_list/show.left.panel.js":kk,"./config_list/show.right.panel.js":Rk}).map(n=>n.default);function zk(n){Ok.forEach(e=>{n.registerConfig(e)})}function Vc(n){n.registerElement({Button:YM,ToggleButton:qM,ToggleCheckBox:JM}),n.registerAlias({"toggle-checkbox":"ToggleCheckBox","toggle-button":"ToggleButton",button:"Button"})}var Vk={key:"body.move.ms",defaultValue:30,title:"pointer move delay millisecond",description:"Set delay millisecond to moving pointer in body ",type:"number"},Dk=Object.freeze(Object.defineProperty({__proto__:null,default:Vk},Symbol.toStringTag,{value:"Module"})),Fk={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},Nk=Object.freeze(Object.defineProperty({__proto__:null,default:Fk},Symbol.toStringTag,{value:"Module"})),Bk={key:"editor.cursor",defaultValue:"auto",title:"Editor Cursor ",description:"Set editor's cursor",type:"string"},jk=Object.freeze(Object.defineProperty({__proto__:null,default:Bk},Symbol.toStringTag,{value:"Module"})),Gk={key:"editor.theme",defaultValue:"light",title:"Editor Theme ",description:"Set editor's theme",type:"string"},Hk=Object.freeze(Object.defineProperty({__proto__:null,default:Gk},Symbol.toStringTag,{value:"Module"})),Uk={key:"event.doubleclick.timing",defaultValue:500,title:"doubleclick timing",description:"whether doubleclick timing is in some seconds",type:"number"},Wk=Object.freeze(Object.defineProperty({__proto__:null,default:Uk},Symbol.toStringTag,{value:"Module"})),Xk={key:"language.locale",defaultValue:ca.EN,title:"set locale for editor",description:"set locale for editor",type:"string"},Yk=Object.freeze(Object.defineProperty({__proto__:null,default:Xk},Symbol.toStringTag,{value:"Module"})),Kk={key:"store.key",defaultValue:"easylogic.studio",title:"Store Key",description:"Set localStorage key",type:"string"},qk=Object.freeze(Object.defineProperty({__proto__:null,default:Kk},Symbol.toStringTag,{value:"Module"})),Zk={key:"style.canvas.background.color",defaultValue:"#ececec",title:"Canvas Background Color",description:"Set canvas background color",type:"color"},Jk=Object.freeze(Object.defineProperty({__proto__:null,default:Zk},Symbol.toStringTag,{value:"Module"})),Qk=Object.values({"./config_list/body.move.ms.js":Dk,"./config_list/debug.mode.js":Nk,"./config_list/editor.cursor.js":jk,"./config_list/editor.theme.js":Hk,"./config_list/event.doubleclick.timing.js":Wk,"./config_list/language.locale.js":Yk,"./config_list/store.key.js":qk,"./config_list/style.canvas.background.color.js":Jk}).map(n=>n.default);function Dc(n){Qk.forEach(e=>{n.registerConfig(e)})}function Fc(n){n.registerIcon("artboard","artboard"),n.registerIcon("circle","lens"),n.registerIcon("image","image"),n.registerIcon("text","title"),n.registerIcon("svg-text","title"),n.registerIcon("boolean-path","pentool"),n.registerIcon("svg-path","pentool"),n.registerIcon("polygon","polygon"),n.registerIcon("star","star"),n.registerIcon("spline","smooth"),n.registerIcon("rect","rect")}var eA={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Language","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Dark","app.theme.light":"Light","app.theme.toon":"Toon","app.theme.gray":"Gray","app.label.theme":"Theme","app.tab.title.projects":"Projects","app.tab.title.layers":"Layers","app.tab.title.libraries":"Library","app.tab.title.components":"Component","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Assets","app.tab.title.keyMap":"KeyMap","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"Source","menu.item.save.title":"Save","menu.item.export.title":"Export","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Full Screen","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Learn","menu.item.projects.title":"Projects","menu.item.language.title":"Language","project.property.title":"Project","project.information.property.title":"Project information","project.information.property.name":"Name","project.information.property.description":"Description","artboard.property.title":"ArtBoards","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grid","layer.tree.property.title":"Layers","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grid","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Size","position.property.width":"W","position.property.height":"H","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Appearance","background.color.property.color":"Color","background.color.property.zindex":"z-index","background.color.property.blend":"Blend","background.color.property.overflow":"Overflow","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Hidden","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiply","blend.screen":"screen","blend.overlay":"overlay","blend.darken":"darken","blend.lighten":"lighten","blend.color-dodge":"color-dodge","blend.color-burn":"color-burn","blend.hard-light":"hard-light","blend.soft-light":"soft-light","blend.difference":"difference","blend.exclusion":"exclusion","blend.hue":"hue","blend.saturation":"saturation","blend.color":"color","blend.luminosity":"luminosity","background.image.property.title":"Fill","border.property.title":"Border","border.radius.property.title":"Border Radius","boxshadow.property.title":"Box Shadows","filter.property.title":"Filter","filter.property.blur":"Blur","filter.property.grayscale":"GrayScale","filter.property.hue-rotate":"Hue Rotate","filter.property.invert":"Invert","filter.property.brightness":"Brightness","filter.property.contrast":"Contrast","filter.property.drop-shadow":"Drop Shadow","filter.property.drop-shadow.color":"Color","filter.property.drop-shadow.offsetX":"Offset X","filter.property.drop-shadow.offsetY":"Offset Y","filter.property.drop-shadow.blurRadius":"Blur","filter.property.opacity":"Opacity","filter.property.saturate":"Saturate","filter.property.sepia":"Sepia","filter.property.svg":"SVG","font.property.title":"Font","font.property.color":"Color","font.property.size":"Size","font.property.stretch":"Stretch","font.property.weight":"Weight","font.property.style":"Style","font.property.family":"Family","font.spacing.property.title":"Font spacing","font.spacing.property.lineHeight":"Line height","font.spacing.property.letterSpacing":"Letter spacing","font.spacing.property.wordSpacing":"Word spacing","font.spacing.property.indent":"Indent","backdrop.filter.property.title":"Backdrop Filter","clippath.property.title":"Clip Path","export.property.title":"Export","export.property.download":"Download","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origin","image.property.size":"Size","image.property.width":"Width","image.property.height":"height","video.property.title":"Video","video.property.play":"Play","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Playback Rate","video.property.currentTime":"Current Time","video.property.playTime":"Play Time Distance","motion.property.title":"Motion","text.property.title":"Text Style","text.property.align":"Align","text.property.transform":"Transform","text.property.decoration":"Decoration","text.clip.property.title":"Text Clip","text.shadow.property.title":"Text Shadows","text.fill.property.title":"Text Fill","text.fill.property.fill":"Fill","text.fill.property.stroke":"Stroke","text.fill.property.strokeWidth":"Width","transform.property.title":"Transform","transform.origin.property.title":"Transform Origin","transition.property.title":"CSS Transition","keyframe.property.title":"CSS Keyframe","selector.property.title":"Selector","selector.property.none":"None selector","path.data.property.title":"Path Information","polygon.data.property.title":"Polygon Information","perspective.property.title":"Perspective","perspective.origin.property.title":"Perspective Origin","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Motion Path","svg.item.property.fill":"Fill","svg.item.property.fillOpacity":"Opacity","svg.item.property.path":"Path","svg.item.property.polygon":"Polygon","svg.item.property.totalLength":"Total Length","svg.item.property.fillRule":"Fill Rule","svg.item.property.stroke":"Stroke","svg.item.property.strokeWidth":"Width","svg.item.property.dashArray":"Dash Array","svg.item.property.dashOffset":"Dash Offset","svg.item.property.lineCap":"Line Cap","svg.item.property.lineJoin":"Line Join","svg.item.property.filter":"Filter","svg.item.property.blend":"Blend Mode","border.editor.all":"All","border.editor.width":"Width","border.editor.style":"Style","border.editor.color":"C","border.editor.top":"Top","border.editor.left":"Left","border.editor.right":"Right","border.editor.bottom":"Bottom","border.radius.editor.topLeft":"Top Left","border.radius.editor.topRight":"Top Right","border.radius.editor.bottomLeft":"Bottom Left","border.radius.editor.bottomRight":"Bottom Right","boxshadow.editor.blur":"Blur","boxshadow.editor.spread":"Spread","css.property.editor.properties":"Properties","offset.path.list.editor.path":"Path","offset.path.list.editor.totalLength":"Total Length","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotate","svgfilter.select.editor.message.create":"Create new svg filter","svgfilter.select.editor.message.select":"Select a filter","fill.editor.message.click.image":"Click the preview area if you want to select a image","fill.editor.message.drag.position":"Drag if you want to move center position","fill.editor.x1":"Start X","fill.editor.x2":"End X","fill.editor.y1":"Start Y","fill.editor.y2":"End Y","fill.editor.spread":"Spread","fill.editor.offset":"Offset","fill.editor.cx":"Center X","fill.editor.cy":"Center Y","fill.editor.r":"End radius","fill.editor.fx":"Start X","fill.editor.fy":"Start Y","fill.editor.fr":"Start radius","perspective.origin.editor.originX":"Origin X","perspective.origin.editor.originY":"Origin Y","path.manager.msg":"Keydown ESC or Enter key to close editing","path.manager.mode.done":"Done","path.manager.mode.modify":"Modify","path.manager.mode.path":"Path","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transform","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Flip X","path.manager.mode.flipY":"Flip Y","path.manager.mode.flipOrigin":"Flip Origin","colorpicker.popup.title":"ColorPicker","selector.popup.title":"Selector Property","selector.popup.selector":"Selector","background.image.position.popup.title":"Background Pattern","background.image.position.popup.size":"Size","background.image.position.popup.width":"Width","background.image.position.popup.height":"Height","background.image.position.popup.repeat":"Repeat","background.image.position.popup.blend":"Blend","background.image.position.popup.type.repeat":"repeat","background.image.position.popup.type.no-repeat":"no repeat","background.image.position.popup.type.repeat-x":"repeat-x","background.image.position.popup.type.repeat-y":"repeat-y","background.image.position.popup.type.space":"space","background.image.position.popup.type.round":"round","gradient.picker.popup.title":"Gradient & Image Picker","gradient.picker.popup.static-gradient":"Static","gradient.picker.popup.linear-gradient":"Linear","gradient.picker.popup.repeating-linear-gradient":"Repeating Linear","gradient.picker.popup.radial-gradient":"Radial","gradient.picker.popup.repeating-radial-gradient":"Repeating Radial","gradient.picker.popup.conic-gradient":"Linear","gradient.picker.popup.repeating-conic-gradient":"Repeating Conic","image.asset.property.title":"Image","video.asset.property.title":"Video","color.asset.property.title":"Color","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Pattern","svgfilter.asset.property.title":"SVG Filter","inspector.tab.title.design":"Design","inspector.tab.title.component":"Component","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"Assets","inspector.tab.title.text":"Text","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Timeline","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Play","timeline.play.control.pause":"Pause","timeline.play.control.first":"First","timeline.play.control.prev":"Previous","timeline.play.control.next":"Next","timeline.play.control.last":"Last","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Speed","timeline.play.control.repeat":"Repeat","timeline.play.control.infinite":"Infinite","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"Value","timeline.value.editor.time":"Time","timeline.value.editor.timing":"Timing","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"SVG Filter","css.item.rotate":"Rotate","css.item.rotateX":"Rotate X","css.item.rotateY":"Rotate Y","css.item.rotateZ":"Rotate Z","css.item.rotate3d":"3D Rotate","css.item.skewX":"Skew X","css.item.skewY":"Skew Y","css.item.translate":"Translate","css.item.translateX":"Translate X","css.item.translateY":"Translate Y","css.item.translateZ":"Translate Z","css.item.translate3d":"3D Translate","css.item.perspective":"Perspective","css.item.scale":"Scale","css.item.scaleX":"Scale X","css.item.scaleY":"Scale Y","css.item.scaleZ":"Scale Z","css.item.scale3d":"3D Scale","css.item.matrix":"Matrix","css.item.matrix3d":"3D Matrix","animation.property.title":"CSS Animation","animation.property.direction":"Direction","animation.property.play.state":"Play State","animation.property.fill.mode":"Fill Mode","animation.property.delay":"Delay","animation.property.duration":"Duration","animation.property.iteration.count":"Iteration Count","animation.property.Select a keyframe":"Select a keyframe","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Timing Function","animation.property.popup.keyframe":"Keyframe","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Play State","animation.property.popup.fill.mode":"Fill Mode","animation.property.popup.delay":"Delay","animation.property.popup.duration":"Duration","animation.property.popup.iteration":"Iteration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"reverse","animation.property.popup.alternate":"alternate","animation.property.popup.alternate-reverse":"alternate-reverse","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"Select a keyframe","keyframe.popup.title":"Keyframe","code.view.property.title":"CodeView","svg.filter.editor.tab.filter":"Filter","svg.filter.editor.tab.preset":"Preset","svg.filter.editor.tab.asset":"Assets","svg.filter.editor.GRAPHIC REFERENCES":"GRAPHIC REFERENCES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"LIGHTING","svg.filter.editor.COMBINERS":"COMBINERS","svg.filter.editor.Template":"Template","layout.property.title":"Layout","layout.property.flex":"Flex Box","layout.property.grid":"Grid","layout.property.default":"Default","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Row","flex.layout.editor.column":"column","flex.layout.editor.row-reverse":"Row Reverse","flex.layout.editor.column-reverse":"Column Reverse","flex.layout.editor.nowrap":"Nowrap","flex.layout.editor.wrap":"Wrap","flex.layout.editor.wrap-reverse":"Wrap Reverse","flex.layout.editor.flex-start":"Start","flex.layout.editor.flex-end":"End","flex.layout.editor.center":"Center","flex.layout.editor.space-between":"Between","flex.layout.editor.space-around":"Around","flex.layout.editor.baseline":"BaseLine","flex.layout.editor.stretch":"Stretch","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justify Content","flex.layout.editor.align-items":"Align Items","flex.layout.editor.align-content":"Align Content","flex.layout.item.property.title":"Flex Item Detail","flex.layout.item.property.grow":"Flex Grow","flex.layout.item.property.shrink":"Flex Shrink","flex.layout.item.property.basis":"Flex Basis","flex.layout.item.property.none":"none","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"value","grid.layout.editor.template.columns":"Columns","grid.layout.editor.column.gap":"Column Gap","grid.layout.editor.template.rows":"Rows","grid.layout.editor.row.gap":"Row Gap","grid.box.editor.box.title":"Box","grid.box.editor.type":"Type","grid.box.editor.repeat":"Repeat","grid.box.editor.length":"Length","grid.box.editor.none":"None","grid.box.editor.auto":"Auto","grid.box.editor.count":"Count","grid.box.editor.value":"Size","grid.layout.item.property.title":"Layout Item Detail","grid.layout.item.property.column":"Column","grid.layout.item.property.row":"Row","grid.layout.item.property.start":"Start","grid.layout.item.property.end":"End","grid.layout.item.property.none":"none","grid.layout.item.property.value":"value","box.model.property.title":"Box Model","box.model.property.margin":"Margin","box.model.property.padding":"Padding","component.items.canvas":"Canvas","component.items.layer":"Layer","component.items.3dlayer":"3D Layer","component.items.drawing":"Drawing","component.items.custom":"Custom Component","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"SVG Text Style","svg.text.property.textarea":"Text Area","svg.text.property.size":"Font Size","svg.text.property.weight":"Font Weight","svg.text.property.style":"Font Style","svg.text.property.anchor":"Text Anchor","svg.text.property.family":"Font Family","svg.text.property.length.adjust":"Length Adjust","svg.text.property.text.length":"Text Length","svg.text.property.start.offset":"Start Offset","fill.picker.popup.title":"SVG Fragment picker","gradient.editor.drag.message":"Drag if you want to move center pointer.","draw.manager.tolerance":"Tolerance","pattern.property.title":"Pattern","pattern.info.popup.title":"Pattern Info","pattern.info.popup.width":"Width","pattern.info.popup.height":"Height","pattern.info.popup.lineWidth":"Line Width","pattern.info.popup.lineHeight":"Line Height","pattern.info.popup.rotate":"Rotate","pattern.info.popup.blend":"Blend Mode","pattern.info.popup.foreColor":"Fore","pattern.info.popup.backColor":"Back","stroke.dasharray.editor.add":"Add Dash","viewport.panning.enable":"You can move the area by holding down space key and dragging the screen.","image.select.editor.button":"Select Image"},tA={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Langue","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Sombre","app.theme.light":"Clair","app.theme.gray":"Gris","app.label.theme":"Th\xE8me","app.tab.title.projects":"Projets","app.tab.title.layers":"Objets","app.tab.title.libraries":"Librarie","app.tab.title.components":"Objet","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Elements","app.tab.title.keyMap":"Clavier","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"T\xE9l\xE9charger","menu.item.save.title":"Enregistrer","menu.item.export.title":"Exporter","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Ecran","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Docs","menu.item.projects.title":"Projects","project.property.title":"Projet","project.information.property.title":"Information","project.information.property.name":"Nom","project.information.property.description":"Description","artboard.property.title":"Planche","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grille","layer.tree.property.title":"Objets","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grille","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Taille","position.property.width":"Largeur","position.property.height":"Hauteur","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Apparance","background.color.property.color":"Couleur","background.color.property.zindex":"z-index","background.color.property.opacity":"Opacit\xE9","background.color.property.blend":"M\xE9lange","background.color.property.overflow":"D\xE9bordement","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Cach\xE9","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiplie","blend.screen":"\xE9cran","blend.overlay":"couche","blend.darken":"sombre","blend.lighten":"clair","blend.color-dodge":"dodge","blend.color-burn":"brul\xE9","blend.hard-light":"dur","blend.soft-light":"doux","blend.difference":'diff"rence',"blend.exclusion":"exclusion","blend.hue":"teinte","blend.saturation":"saturation","blend.color":"couleur","blend.luminosity":"luminosit\xE9","background.image.property.title":"Remplissage","border.property.title":"Bordure","border.radius.property.title":"Rayon de bordure","boxshadow.property.title":"Ombres","filter.property.title":"Filtre","filter.property.blur":"Flou","filter.property.grayscale":"Echelle de gris","filter.property.hue-rotate":"Rotation teinte","filter.property.invert":"Invertir","filter.property.brightness":"Luminosit\xE9","filter.property.contrast":"Contraste","filter.property.drop-shadow":"Ombre port\xE9e","filter.property.drop-shadow.color":"Couleur","filter.property.drop-shadow.offsetX":"D\xE9calage X","filter.property.drop-shadow.offsetY":"D\xE9calage Y","filter.property.drop-shadow.blurRadius":"Flou","filter.property.opacity":"Opacit\xE9","filter.property.saturate":"Saturation","filter.property.sepia":"S\xE9pia","filter.property.svg":"SVG","font.property.title":"Police","font.property.color":"Couleur","font.property.size":"Taille","font.property.stretch":"Etirement","font.property.weight":"Poids","font.property.style":"Style","font.property.family":"Famille","font.spacing.property.title":"Espaces du texte","font.spacing.property.lineHeight":"Hauteur de ligne","font.spacing.property.letterSpacing":"Espace inter-caract\xE8res","font.spacing.property.wordSpacing":"Espace inter-mots","font.spacing.property.indent":"Identation","backdrop.filter.property.title":"Filtre Backdrop","clippath.property.title":"Chemin du Clip","export.property.title":"Exporter","export.property.download":"T\xE9l\xE9charger","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origine","image.property.size":"Taille","image.property.width":"Largeur","image.property.height":"Hauteur","video.property.title":"Video","video.property.play":"Jouer","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Vitesse de lecture","video.property.currentTime":"Temps actuel","video.property.playTime":"Temps de lecture","motion.property.title":"Mouvement","text.property.title":"Style Texte","text.property.align":"Alignement","text.property.transform":"Transformation","text.property.decoration":"D\xE9coration","text.clip.property.title":"Clip Texte","text.shadow.property.title":"Ombres Texte","text.fill.property.title":"Remplissage Texte","text.fill.property.fill":"Remplissage","text.fill.property.stroke":"Trait","text.fill.property.strokeWidth":"Largeur","transform.property.title":"Transformation","transform.origin.property.title":"Origine Transformation","transition.property.title":"Transition CSS","keyframe.property.title":"Image cl\xE9 CSS","selector.property.title":"S\xE9l\xE9cteur","selector.property.none":"Aucun s\xE9l\xE9cteur","path.data.property.title":"Information Chemin","polygon.data.property.title":"Information Polygone","perspective.property.title":"Perspective","perspective.origin.property.title":"Origine Perspective","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Chemin de mouvement","svg.item.property.fill":"Remplissage","svg.item.property.fillOpacity":"Opacit\xE9","svg.item.property.path":"Chemin","svg.item.property.polygon":"Polygone","svg.item.property.totalLength":"Longueur totale","svg.item.property.fillRule":"R\xE8gle remplissage","svg.item.property.stroke":"Trait","svg.item.property.strokeWidth":"Largeur de trait","svg.item.property.dashArray":"Suite tiret","svg.item.property.dashOffset":"D\xE9calage tiret","svg.item.property.lineCap":"Chapeau Ligne","svg.item.property.lineJoin":"Jonction ligne","svg.item.property.filter":"Filtre","svg.item.property.blend":"Blend Mode","border.editor.all":"Tout","border.editor.width":"Largeur","border.editor.style":"Style","border.editor.color":"Couleur","border.editor.top":"Haut","border.editor.left":"Gauche","border.editor.right":"Droite","border.editor.bottom":"Bas","border.radius.editor.topLeft":"Haut gauche","border.radius.editor.topRight":"Haut droite","border.radius.editor.bottomLeft":"Bas gauche","border.radius.editor.bottomRight":"Bas droite","boxshadow.editor.blur":"Flou","boxshadow.editor.spread":"Etalement","css.property.editor.properties":"Propri\xE9t\xE9s","offset.path.list.editor.path":"Chemin","offset.path.list.editor.totalLength":"Longueur totale","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotation","svgfilter.select.editor.message.create":"Cr\xE9er un filtre svg","svgfilter.select.editor.message.select":"S\xE9lection filtre","fill.editor.message.click.image":"Cliquez sur aper\xE7u si vous souhaitez s\xE9lectionner une image","fill.editor.message.drag.position":"Prendre pour changer la position centrale","fill.editor.x1":"D\xE9but X","fill.editor.x2":"Fin X","fill.editor.y1":"D\xE9but Y","fill.editor.y2":"Fin Y","fill.editor.spread":"Etalement","fill.editor.offset":"D\xE9calage","fill.editor.cx":"Centre X","fill.editor.cy":"Centre Y","fill.editor.r":"Rayon de fin","fill.editor.fx":"D\xE9part X","fill.editor.fy":"D\xE9part Y","fill.editor.fr":"Rayon de d\xE9part","perspective.origin.editor.originX":"Origine X","perspective.origin.editor.originY":"Origine Y","path.manager.msg":"Appuyer ESC ou Entr\xE9z keypour fermer Edition","path.manager.mode.done":"Done","path.manager.mode.modify":"Modifier","path.manager.mode.path":"Chemin","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transformer","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Retouner X","path.manager.mode.flipY":"Retouner Y","path.manager.mode.flipOrigin":"Retouner Origine","colorpicker.popup.title":"Pipette","selector.popup.title":"Propi\xE9t\xE9 de S\xE9lecteur","selector.popup.selector":"S\xE9lecteur","background.image.position.popup.title":"Motif de fond","background.image.position.popup.size":"Taille","background.image.position.popup.width":"Largeur","background.image.position.popup.height":"Hauteur","background.image.position.popup.repeat":"Rep\xE8te","background.image.position.popup.blend":"M\xE9lange","background.image.position.popup.type.repeat":"rep\xE8te","background.image.position.popup.type.no-repeat":"sans rep\xE9tition","background.image.position.popup.type.repeat-x":"rep\xE8te-x","background.image.position.popup.type.repeat-y":"rep\xE8te-y","background.image.position.popup.type.space":"espace","background.image.position.popup.type.round":"rond","gradient.picker.popup.title":"S\xE9lection Gradient & Image","image.asset.property.title":"Image","video.asset.property.title":"Vid\xE9o","color.asset.property.title":"Couleur","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Motif","svgfilter.asset.property.title":"Filtre SVG","inspector.tab.title.design":"Design","inspector.tab.title.component":"Composant","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"El\xE9ments","inspector.tab.title.text":"Texte","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Chronologie","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Jouer","timeline.play.control.pause":"Pause","timeline.play.control.first":"Premier","timeline.play.control.prev":"Pr\xE9c\xE9dent","timeline.play.control.next":"Suivant","timeline.play.control.last":"Dernier","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Vitesse","timeline.play.control.repeat":"R\xE9p\xE9ter","timeline.play.control.infinite":"Infini","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternatif","timeline.play.control.reverse":"inverse","timeline.play.control.alternate.reverse":"inverse alternatif","timeline.value.editor.value":"Valeur","timeline.value.editor.time":"Temps","timeline.value.editor.timing":"Calage temps","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"Filtre SVG","css.item.rotate":"Rotation","css.item.rotateX":"Rotation X","css.item.rotateY":"Rotation Y","css.item.rotateZ":"Rotation Z","css.item.rotate3d":"Rotation 3D","css.item.skewX":"Oblique X","css.item.skewY":"Oblique Y","css.item.translate":"Translation","css.item.translateX":"Translation X","css.item.translateY":"Translation Y","css.item.translateZ":"Translation Z","css.item.translate3d":"Translation 3D","css.item.perspective":"Persp\xE9ctive","css.item.scale":"Echelle","css.item.scaleX":"Echelle X","css.item.scaleY":"Echelle Y","css.item.scaleZ":"Echelle Z","css.item.scale3d":"Echelle 3D","css.item.matrix":"Matrice","css.item.matrix3d":"Matrice 3D","animation.property.title":"Animation CSS","animation.property.direction":"Direction","animation.property.play.state":"Etat lecture","animation.property.fill.mode":"Mode remplissage","animation.property.delay":"D\xE9lais","animation.property.duration":"Dur\xE9e","animation.property.iteration.count":"Nombre It\xE9rations","animation.property.Select a keyframe":"Selectionner une image cl\xE9","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Fonction temps","animation.property.popup.keyframe":"image cl\xE9","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Etat lecture","animation.property.popup.fill.mode":"Mode remplissage","animation.property.popup.delay":"D\xE9lais","animation.property.popup.duration":"Dur\xE9\xE9","animation.property.popup.iteration":"It\xE9ration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"inverse","animation.property.popup.alternate":"alternatif","animation.property.popup.alternate-reverse":"inverse alternatif","animation.property.popup.none":"Aucun","animation.property.popup.forwards":"en avant","animation.property.popup.backwards":"en arri\xE8re","animation.property.popup.both":"les deux","animation.property.popup.Select a keyframe":"Selectionner une image cl\xE9","keyframe.popup.title":"image cl\xE9","code.view.property.title":"Vue code","svg.filter.editor.tab.filter":"Filtrer","svg.filter.editor.tab.preset":"Pre-rempli","svg.filter.editor.tab.asset":"El\xE9ments","svg.filter.editor.GRAPHIC REFERENCES":"REFERENCES GRAPHIQUES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"ECLAIRAGE","svg.filter.editor.COMBINERS":"COMBINER","svg.filter.editor.Template":"Mod\xE8le","layout.property.title":"Disposition","layout.property.flex":"Bo\xEEte Flex","layout.property.grid":"Grille","layout.property.default":"D\xE9faut","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Ligne","flex.layout.editor.column":"Colonne","flex.layout.editor.row-reverse":"Inverse ligne","flex.layout.editor.column-reverse":"Inverse Colonne","flex.layout.editor.nowrap":"Non-emball\xE9","flex.layout.editor.wrap":"Emball\xE9 (wrap)","flex.layout.editor.wrap-reverse":"Inverse emball\xE9","flex.layout.editor.flex-start":"D\xE9but","flex.layout.editor.flex-end":"Fin","flex.layout.editor.center":"Centrer","flex.layout.editor.space-between":"Entre","flex.layout.editor.space-around":"Autour","flex.layout.editor.baseline":"Base","flex.layout.editor.stretch":"Etirement","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justifier","flex.layout.editor.align-items":"Aligner objets","flex.layout.editor.align-content":"Aligner contenu","flex.layout.item.property.title":"D\xE9tail Disposition objet","flex.layout.item.property.grow":"Augmenter Flex","flex.layout.item.property.shrink":"R\xE9duire Flex","flex.layout.item.property.basis":"Base Flex","flex.layout.item.property.none":"Aucun","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"valeur","grid.layout.editor.template.columns":"Colonne","grid.layout.editor.column.gap":"Espace Colonne","grid.layout.editor.template.rows":"Lignes","grid.layout.editor.row.gap":"Espace lignes","grid.box.editor.box.title":"Bo\xEEte","grid.box.editor.type":"Type","grid.box.editor.repeat":"R\xE9p\xE9ter","grid.box.editor.length":"Longueur","grid.box.editor.none":"Aucun","grid.box.editor.auto":"Auto","grid.box.editor.count":"Compte","grid.box.editor.value":"Taille","grid.layout.item.property.title":"D\xE9tail disposition objets","grid.layout.item.property.column":"Colonne","grid.layout.item.property.row":"Ligne","grid.layout.item.property.start":"D\xE9but","grid.layout.item.property.end":"Fin","grid.layout.item.property.none":"Aucun","grid.layout.item.property.value":"valeur","box.model.property.title":"Mod\xE8le","box.model.property.margin":"Marge","box.model.property.padding":"Espace","component.items.canvas":"Toile","component.items.layer":"Objet","component.items.3dlayer":"Objet 3D","component.items.drawing":"Dessin","component.items.custom":"Composant personnalis\xE9","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"Style SVG Texte","svg.text.property.textarea":"Zone Texte","svg.text.property.size":"Taille","svg.text.property.weight":"Poids","svg.text.property.style":"Style","svg.text.property.anchor":"Ancre Texte","svg.text.property.family":"Famille","svg.text.property.length.adjust":"Ajusteement longueur","svg.text.property.text.length":"Ajusteement Texte","svg.text.property.start.offset":"D\xE9callage d\xE9part","fill.picker.popup.title":"S\xE9lection Fragment SVG","gradient.editor.drag.message":"Glisser pour d\xE9placer centre.","draw.manager.tolerance":"Tol\xE9rance","pattern.property.title":"Motif","pattern.info.popup.title":"Info Motif","pattern.info.popup.width":"Largeur","pattern.info.popup.height":"Hauteur","pattern.info.popup.lineWidth":"Largeur ligne","pattern.info.popup.lineHeight":"Hauteur de ligne","pattern.info.popup.rotate":"Rotatation","pattern.info.popup.blend":"M\xE9lange","pattern.info.popup.foreColor":"Avant","pattern.info.popup.backColor":"Arri\xE8re","stroke.dasharray.editor.add":"Ajout tiret","viewport.panning.enable":"You can move the area by holding down space and dragging the screen."},iA={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"\uC5B8\uC5B4","app.layout.all":"\uB808\uC774\uC544\uC6C3","app.layout.css":"CSS \uBAA8\uB4DC","app.layout.svg":"SVG \uBAA8\uB4DC","app.label.layout":"\uBA54\uB274\uAD6C\uC131","app.theme.dark":"\uC5B4\uB450\uC6B4","app.theme.light":"\uBC1D\uC740","app.theme.toon":"\uADF8\uB9AC\uAE30","app.theme.gray":"\uD68C\uC0C9","app.label.theme":"\uD14C\uB9C8","app.tab.title.projects":"\uD504\uB85C\uC81D\uD2B8","app.tab.title.layers":"\uB808\uC774\uC5B4","app.tab.title.libraries":"\uB77C\uC774\uBE0C\uB7EC\uB9AC","app.tab.title.components":"\uCEF4\uD3EC\uB10C\uD2B8","app.tab.title.artboards":"\uC544\uD2B8\uBCF4\uB4DC","app.tab.title.assets":"\uC5D0\uC14B","app.tab.title.keyMap":"\uB2E8\uCD95\uD0A4","app.confirm.message.artboard.items.removeArtboard":"\uC544\uD2B8\uBCF4\uB4DC \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","app.confirm.message.custom-component.items.removeCustomComponent":"\uCEF4\uD3EC\uB10C\uD2B8 \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","menu.item.download.title":"\uB2E4\uC6B4\uB85C\uB4DC","menu.item.save.title":"\uC800\uC7A5","menu.item.export.title":"\uB0B4\uBCF4\uB0B4\uAE30","menu.item.fullscreen.title":"\uC804\uCCB4\uD654\uBA74","menu.item.shortcuts.title":"\uB2E8\uCD95\uD0A4","menu.item.github.title":"Github","menu.item.learn.title":"\uBC30\uC6B0\uAE30","menu.item.projects.title":"\uD504\uB85C\uC81D\uD2B8","project.property.title":"\uD504\uB85C\uC81D\uD2B8","project.information.property.title":"\uD504\uB85C\uC81D\uD2B8 \uC815\uBCF4","project.information.property.name":"\uC774\uB984","project.information.property.description":"\uC124\uBA85","artboard.property.title":"\uC544\uD2B8\uBCF4\uB4DC","artboard.property.layout.title.flex":"\uD50C\uB809\uC2A4","artboard.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","layer.tree.property.title":"\uB808\uC774\uC5B4","layer.tree.property.layout.title.flex":"\uD50C\uB809\uC2A4","layer.tree.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","alignment.property.title":"\uC815\uB82C","position.property.title":"\uC704\uCE58","position.property.X":"X","position.property.Y":"Y","size.property.title":"\uD06C\uAE30","position.property.width":"\uB113\uC774","position.property.height":"\uB192\uC774","position.property.rotate":"\uD68C\uC804","position.property.opacity":"\uD22C\uBA85","background.color.property.title":"\uD45C\uC2DC","background.color.property.color":"\uBC30\uACBD\uC0C9","background.color.property.zindex":"z-index","background.color.property.blend":"\uBE14\uB80C\uB4DC\uBAA8\uB4DC","background.color.property.overflow":"\uC624\uBC84\uD50C\uB85C\uC6B0","background.color.property.overflow.visible":"\uBCF4\uC774\uAE30","background.color.property.overflow.hidden":"\uC228\uAE30\uAE30","background.color.property.overflow.scroll":"\uC2A4\uD06C\uB864","background.color.property.overflow.auto":"\uC790\uB3D9","blend.normal":"Normal(\uD45C\uC900) \uD63C\uD569\uBAA8\uB4DC","blend.multiply":"Multiply(\uACF1\uD558\uAE30) \uBAA8\uB4DC","blend.screen":"Screen(\uC2A4\uD06C\uB9B0) \uBAA8\uB4DC ","blend.overlay":"Overlay(\uC624\uBC84\uB808\uC774) \uBAA8\uB4DC","blend.darken":"Darken(\uC5B4\uB461\uAE30) \uBAA8\uB4DC","blend.lighten":"Lighten(\uBC1D\uAE30) \uBAA8\uB4DC ","blend.color-dodge":"Color Dodge(\uCEEC\uB7EC \uB2F7\uC9C0) \uBAA8\uB4DC ","blend.color-burn":"Color Burn(\uCEEC\uB7EC \uBC88) \uBAA8\uB4DC ","blend.hard-light":"Hard Light(\uD558\uB4DC \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.soft-light":"Soft Light(\uC18C\uD504\uD2B8 \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.difference":"Difference(\uCC28\uC774) \uBAA8\uB4DC","blend.exclusion":"Exclusion(\uC81C\uC678) \uBAA8\uB4DC","blend.hue":"Hue(\uC0C9\uC870) \uBAA8\uB4DC ","blend.saturation":"Saturation(\uCC44\uB3C4) \uBAA8\uB4DC","blend.color":"Color(\uC0C9\uC0C1) \uBAA8\uB4DC","blend.luminosity":"Luminosity(\uAD11\uB3C4) \uBAA8\uB4DC ","background.image.property.title":"\uCC44\uC6B0\uAE30","border.property.title":"\uC678\uACFD\uC120","border.radius.property.title":"\uB465\uADFC \uC678\uACFD\uC120","boxshadow.property.title":"\uADF8\uB9BC\uC790","filter.property.title":"\uD544\uD130","filter.property.blur":"\uD750\uB9BC(Blur)","filter.property.grayscale":"\uD68C\uC0C9(GrayScale)","filter.property.hue-rotate":"\uC0C9\uC870(HueRotate)","filter.property.invert":"\uBC18\uC804(Invert)","filter.property.brightness":"\uBC1D\uAE30(Brightness)","filter.property.contrast":"\uB300\b\uC870(Contrast)","filter.property.drop-shadow":"\uADF8\uB9BC\uC790(Drop Shadow)","filter.property.drop-shadow.color":"\uC0C9","filter.property.drop-shadow.offsetX":"X","filter.property.drop-shadow.offsetY":"Y","filter.property.drop-shadow.blurRadius":"\uD750\uB9BC","filter.property.opacity":"\uD22C\uBA85\uB3C4(Opacity)","filter.property.saturate":"\uCC44\uB3C4(Saturate)","filter.property.sepia":"\uAC08\uC0C9\uD1A4(Sepia)","filter.property.svg":"SVG","font.property.title":"\uD3F0\uD2B8","font.property.color":"\uC0C9","font.property.size":"\uD06C\uAE30","font.property.stretch":"\uBED7\uAE30","font.property.weight":"\uAD75\uAE30","font.property.style":"\uC2A4\uD0C0\uC77C","font.property.family":"\uAE00\uAF34","font.spacing.property.title":"\uD3F0\uD2B8 \uACF5\uAC04","font.spacing.property.lineHeight":"\uC904 \uB192\uC774","font.spacing.property.letterSpacing":"\uAE00\uC790 \uAC04\uACA9","font.spacing.property.wordSpacing":"\uB2E8\uC5B4 \uAC04\uACA9","font.spacing.property.indent":"\uB4E4\uC5EC\uC4F0\uAE30","backdrop.filter.property.title":"\uD6C4\uBA74 \uD544\uD130","clippath.property.title":"\uD074\uB9BD\uD328\uC2A4","export.property.title":"\uB0B4\uBCF4\uB0B4\uAE30","export.property.download":"\uB2E4\uC6B4\uB85C\uB4DC","iframe.property.title":"\uC544\uC774\uD504\uB808\uC784","image.property.title":"\uC774\uBBF8\uC9C0","image.property.origin":"\uC6D0\uBCF8","image.property.size":"\uD06C\uAE30","image.property.width":"\uB113\uC774","image.property.height":"\uB192\uC774","video.property.title":"\uBE44\uB514\uC624","video.property.play":"\uC2DC\uC791","video.property.pause":"\uBA48\uCDA4","video.property.volume":"\uBCFC\uB968","video.property.playbackRate":"\uBE60\uB974\uAE30","video.property.currentTime":"\uD604\uC7AC \uC2DC\uAC04","video.property.playTime":"\uD50C\uB808\uC774 \uC2DC\uAC04 \uAC04\uACA9","motion.property.title":"\uBAA8\uC158","path.data.property.title":"\uD328\uC2A4 \uC815\uBCF4","polygon.data.property.title":"\uD3F4\uB9AC\uACE4 \uC815\uBCF4","text.property.title":"\uD14D\uC2A4\uD2B8 \uC2A4\uD0C0\uC77C","text.property.align":"\uC815\uB82C","text.property.transform":"\uBCC0\uD615","text.property.decoration":"\uC7A5\uC2DD","text.clip.property.title":"\uD14D\uC2A4\uD2B8 \uD074\uB9BD","text.shadow.property.title":"\uD14D\uC2A4\uD2B8 \uADF8\uB9BC\uC790","text.fill.property.title":"\uD14D\uC2A4\uD2B8 \uCC44\uC6B0\uAE30","text.fill.property.fill":"\uCC44\uC6B0\uAE30","text.fill.property.stroke":"\uC724\uACFD\uC120","text.fill.property.strokeWidth":"\uC724\uACFD\uC120 \uAD75\uAE30","transform.property.title":"\uD2B8\uB79C\uC2A4\uD3FC","transform.origin.property.title":"\uD2B8\uB79C\uC2A4\uD3FC Origin","transition.property.title":"CSS \uD2B8\uB79C\uC9C0\uC158","keyframe.property.title":"CSS \uD0A4\uD504\uB808\uC784","selector.property.title":"CSS \uC140\uB809\uD130","selector.property.none":"\uC120\uD0DD\uC790 \uC5C6\uC74C","perspective.property.title":"\uD22C\uC601(perspective)","perspective.origin.property.title":"\uD22C\uC601 \uC911\uC2EC\uC810","svg.item.property.title":"\uBCF4\uC774\uAE30","svg.item.property.isMotionPath":"\uBAA8\uC158 \uD328\uC2A4","svg.item.property.fill":"\uCC44\uC6B0\uAE30","svg.item.property.fillOpacity":"\uD22C\uBA85\uB3C4","svg.item.property.path":"\uD328\uC2A4","svg.item.property.polygon":"\uD3F4\uB9AC\uACE4","svg.item.property.totalLength":"\uC804\uCCB4 \uAE38\uC774","svg.item.property.fillRule":"\uCC44\uC6B0\uAE30 \uADDC\uCE59","svg.item.property.stroke":"\uC120","svg.item.property.strokeWidth":"\uC120 \uAD75\uAE30","svg.item.property.dashArray":"\uC810\uC120 \uAE38\uC774","svg.item.property.dashOffset":"\uC810\uC120 \uC704\uCE58","svg.item.property.lineCap":"\uC120 \uBAA8\uC591","svg.item.property.lineJoin":"\uACB9\uCE5C \uC120","svg.item.property.filter":"\uD544\uD130","svg.item.property.blend":"\uBE14\uB80C\uB4DC","border.editor.all":"\uC804\uCCB4","border.editor.width":"\uD06C\uAE30","border.editor.style":"\uC2A4\uD0C0\uC77C","border.editor.color":"\uC0C9","border.editor.top":"\uC704","border.editor.left":"\uC67C\uCABD","border.editor.right":"\uC624\uB978\uCABD","border.editor.bottom":"\uC544\uB798","border.radius.editor.topLeft":"\uC67C\uCABD \uC704","border.radius.editor.topRight":"\uC624\uB978\uCABD \uC704","border.radius.editor.bottomLeft":"\uC67C\uCABD \uC544\uB798","border.radius.editor.bottomRight":"\uC624\uB978\uCABD \uC544\uB798","boxshadow.editor.blur":"\uD750\uB9BC","boxshadow.editor.spread":"\uAE38\uC774","css.property.editor.properties":"\uC18D\uC131","offset.path.list.editor.path":"\uD328\uC2A4","offset.path.list.editor.totalLength":"\uC804\uCCB4 \uAE38\uC774","offset.path.list.editor.distance":"\uAC70\uB9AC","offset.path.list.editor.direction":"\uBC29\uD5A5","offset.path.list.editor.rotate":"\uD68C\uC804","svgfilter.select.editor.message.create":"\uC0C8\uB85C\uC6B4 SVG Filter \uB97C \uB9CC\uB4DC\uC138\uC694.","svgfilter.select.editor.message.select":"\uD544\uD130\uB97C \uC120\uD0DD\uD558\uC138\uC694.","fill.editor.message.click.image":"\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uACE0 \uC2F6\uC73C\uBA74 \uD504\uB9AC\uBDF0 \uC601\uC5ED\uC744 \uD074\uB9AD\uD558\uC138\uC694.","fill.editor.message.drag.position":"\uAC00\uC6B4\uB370 \uC704\uCE58\uB97C \uB4DC\uB798\uADF8 \uD574\uBCF4\uC138\uC694.","fill.editor.x1":"\uC2DC\uC791 X","fill.editor.x2":"\uB05D X","fill.editor.y1":"\uC2DC\uC791 Y","fill.editor.y2":"\uB05D Y","fill.editor.spread":"\uD655\uC0B0","fill.editor.offset":"\uC704\uCE58","fill.editor.cx":"\uC911\uC2EC\uC810 X","fill.editor.cy":"\uC911\uC2EC\uC810 Y","fill.editor.r":"\uB05D \uBC18\uC9C0\uB984","fill.editor.fx":"\uC2DC\uC791 X","fill.editor.fy":"\uC2DC\uC791 Y","fill.editor.fr":"\uC2DC\uC791 \uBC18\uC9C0\uB984","perspective.origin.editor.originX":"\uC911\uC2EC\uC810 X","perspective.origin.editor.originY":"\uC911\uC2EC\uC810 Y","path.manager.msg":"\uD3B8\uC9D1\uC744 \uC885\uB8CC\uD560 \uB54C\uB294 ESC \uD0A4\uB098 Enter \uD0A4\uB97C \uB204\uB974\uC138\uC694. \uB610\uB294 \uD654\uBA74\uC744 \uD074\uB9AD\uD558\uC2DC\uBA74 \uB429\uB2C8\uB2E4.","path.manager.mode.done":"\uC644\uB8CC","path.manager.mode.modify":"\uC810 \uD3B8\uC9D1","path.manager.mode.path":"\uC810 \uCD94\uAC00","path.manager.mode.warp":"\uC6CC\uD504","path.manager.mode.transform":"\uBCC0\uD615","path.manager.mode.reverse":"\uC21C\uC11C\uBCC0\uACBD","path.manager.mode.flipX":"X\uCD95 \uD68C\uC804","path.manager.mode.flipY":"Y\uCD95 \uD68C\uC804","path.manager.mode.flipOrigin":"\uC804\uCCB4 \uD68C\uC804","colorpicker.popup.title":"\uC0C9\uC0C1 \uC120\uD0DD","selector.popup.title":"\uC120\uD0DD\uC790 \uC18D\uC131","selector.popup.selector":"\uC120\uD0DD\uC790","background.image.position.popup.title":"\uBC30\uACBD \uD328\uD134","background.image.position.popup.size":"\uD06C\uAE30","background.image.position.popup.width":"\uB113\uC774","background.image.position.popup.height":"\uB192\uC774","background.image.position.popup.repeat":"\uBC18\uBCF5","background.image.position.popup.blend":"\uBE14\uB80C\uB4DC","background.image.position.popup.type.repeat":"\uBC18\uBCF5","background.image.position.popup.type.no-repeat":"\uBC18\uBCF5 \uC548\uD568","background.image.position.popup.type.repeat-x":"x\uCD95 \uBC18\uBCF5","background.image.position.popup.type.repeat-y":"y\uCD95 \uBC18\uBCF5","background.image.position.popup.type.space":"\uACF5\uBC31\uC720\uC9C0","background.image.position.popup.type.round":"\uBC18\uC62C\uB9BC","gradient.picker.popup.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8\uC640 \uC774\uBBF8\uC9C0","image.asset.property.title":"\uC774\uBBF8\uC9C0","video.asset.property.title":"\uBE44\uB514\uC624","color.asset.property.title":"\uC0C9","gradient.asset.property.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8","pattern.asset.property.title":"\uD328\uD134","svgfilter.asset.property.title":"SVG \uD544\uD130","inspector.tab.title.design":"\uB514\uC790\uC778","inspector.tab.title.component":"\uCEF4\uD3EC\uB10C\uD2B8 \uC18D\uC131","inspector.tab.title.transition":"\uC560\uB2C8\uBA54\uC774\uC158","inspector.tab.title.asset":"\uC5D0\uC14B \uAD00\uB9AC\uC790","inspector.tab.title.text":"\uD14D\uC2A4\uD2B8","inspector.tab.title.code":"\uCF54\uB4DC","inspector.tab.title.history":"\uAE30\uB85D","timeline.property.title":"\uD0C0\uC784\uB77C\uC778","timeline.property.resize":"\uD0C0\uC784\uB77C\uC778 \uB192\uC774\uB97C \uBCC0\uACBD\uD569\uB2C8\uB2E4. \uB4DC\uB798\uADF8 \uD574\uC8FC\uC138\uC694.","timeline.animation.property.title":"\uC560\uB2C8\uBA54\uC774\uC158","timeline.play.control.play":"\uD50C\uB808\uC774","timeline.play.control.pause":"\uBA48\uCDA4","timeline.play.control.first":"\uCC98\uC74C\uC73C\uB85C","timeline.play.control.prev":"\uC774\uC804\uC73C\uB85C","timeline.play.control.next":"\uB2E4\uC74C\uC73C\uB85C","timeline.play.control.last":"\uB9C8\uC9C0\uB9C9\uC73C\uB85C","timeline.play.control.direction":"\uBC29\uD5A5","timeline.play.control.speed":"\uC18D\uB825","timeline.play.control.repeat":"\uBC18\uBCF5","timeline.play.control.infinite":"\uBB34\uD55C","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"\uAC12","timeline.value.editor.time":"\uC2DC\uAC04","timeline.value.editor.timing":"\uD0C0\uC774\uBC0D \uD568\uC218","timeline.value.editor.offset.message":"Enter\uD0A4\uB97C \uC785\uB825\uD558\uBA74 \uC801\uC6A9\uB429\uB2C8\uB2E4.","svgfilter.popup.title":"SVG \uD544\uD130","css.item.rotate":"\uD68C\uC804","css.item.rotateX":"X\uCD95 \uD68C\uC804","css.item.rotateY":"Y\uCD95 \uD68C\uC804","css.item.rotateZ":"Z\uCD95 \uD68C\uC804","css.item.rotate3d":"3D \uD68C\uC804","css.item.skewX":"X\uCD95 \uB298\uC774\uAE30","css.item.skewY":"Y\uCD95 \uB298\uC774\uAE30","css.item.translate":"\uC774\uB3D9","css.item.translateX":"X\uCD95 \uC774\uB3D9","css.item.translateY":"Y\uCD95 \uC774\uB3D9","css.item.translateZ":"Z\uCD95 \uC774\uB3D9","css.item.translate3d":"3D \uC774\uB3D9","css.item.perspective":"\uC6D0\uADFC","css.item.scale":"\uD06C\uAE30\uBCC0\uACBD","css.item.scaleX":"X\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleY":"Y\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleZ":"Z\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scale3d":"3D \uD06C\uAE30\uBCC0\uACBD","css.item.matrix":"\uBCC0\uD658 \uD589\uB82C","css.item.matrix3d":"3D \uBCC0\uD658 \uD589\uB82C","animation.property.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.direction":"\uBC29\uD5A5","animation.property.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.duration":"\uC2DC\uAC04","animation.property.iteration.count":"\uBC18\uBCF5 \uD69F\uC218","animation.property.select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694","animation.property.popup.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.popup.timing.function":"\uD0C0\uC774\uBC0D \uD568\uC218","animation.property.popup.keyframe":"\uD0A4\uD504\uB808\uC784","animation.property.popup.direction":"\uBC29\uD5A5","animation.property.popup.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.popup.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.popup.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.popup.duration":"\uC2DC\uAC04","animation.property.popup.iteration":"\uBC18\uBCF5 \uD69F\uC218","animation.property.popup.normal":"\uC2DC\uAC04\uC21C","animation.property.popup.reverse":"\uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.alternate":"\uC655\uBCF5 \uC2DC\uAC04\uC21C","animation.property.popup.alternate-reverse":"\uC655\uBCF5 \uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.","keyframe.popup.title":"\uD0A4\uD504\uB808\uC784","code.view.property.title":"\uCF54\uB4DC\uBDF0","svg.filter.editor.tab.filter":"\uD544\uD130","svg.filter.editor.tab.preset":"\uD504\uB9AC\uC14B","svg.filter.editor.tab.asset":"\uC5D0\uC14B","svg.filter.editor.GRAPHIC REFERENCES":"\uCC38\uC870 \uADF8\uB798\uD53D","svg.filter.editor.SOURCES":"\uC6D0\uBCF8","svg.filter.editor.MODIFIER":"\uC218\uC815","svg.filter.editor.LIGHTING":"\uBE5B","svg.filter.editor.COMBINERS":"\uACB0\uD569","svg.filter.editor.Template":"\uD15C\uD50C\uB9BF","layout.property.title":"\uB808\uC774\uC544\uC6C3","layout.property.flex":"\uD50C\uB809\uC2A4 \uBC15\uC2A4","layout.property.grid":"\uADF8\uB9AC\uB4DC","layout.property.default":"\uAE30\uBCF8 \uC88C\uD45C","layout.property.resizing.title":"\uC0AC\uC774\uC988 \uC870\uC808","layout.property.resizing.self.title":"\uC544\uC774\uD15C \uC0AC\uC774\uC988 \uC870\uC808","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"\uD589","flex.layout.editor.column":"\uC5F4","flex.layout.editor.row-reverse":"\uC5ED\uBC29\uD5A5 \uD589","flex.layout.editor.column-reverse":"\uC5ED\uBC29\uD5A5 \uC5F4","flex.layout.editor.nowrap":"\uAC10\uC2F8\uC9C0 \uC54A\uAE30","flex.layout.editor.wrap":"\uAC10\uC2F8\uAE30","flex.layout.editor.wrap-reverse":"\uC5ED\uBC29\uD5A5 \uAC10\uC2F8\uAE30","flex.layout.editor.flex-start":"\uC2DC\uC791","flex.layout.editor.flex-end":"\uB05D","flex.layout.editor.center":"\uC911\uAC04","flex.layout.editor.space-between":"\uACF5\uAC04 \uC911\uAC04 \uCC44\uC6C0","flex.layout.editor.space-around":"\uACF5\uAC04 \uC591\uB05D \uCC44\uC6C0","flex.layout.editor.baseline":"\uAE30\uBCF8\uC120","flex.layout.editor.stretch":"\uD3BC\uCE58\uAE30","flex.layout.editor.direction":"\uBC29\uD5A5","flex.layout.editor.justify-content":"\uCEE8\uD150\uCE20 \uC870\uC815","flex.layout.editor.align-items":"\uC544\uC774\uD15C \uC815\uB82C","flex.layout.editor.align-content":"\uCEE8\uD150\uCE20 \uC815\uB82C","flex.layout.item.property.title":"\uD50C\uB809\uC2A4 \uC544\uC774\uD15C \uC124\uC815","flex.layout.item.property.grow":"\uACF5\uAC04 \uBE44\uC728","flex.layout.item.property.shrink":"\uCD95\uC18C \uBE44\uC728","flex.layout.item.property.basis":"\uCD08\uAE30 \uD06C\uAE30","flex.layout.item.property.none":"\uC5C6\uC74C","flex.layout.item.property.auto":"\uC790\uB3D9","flex.layout.item.property.value":"\uAC12","grid.layout.editor.template.columns":"\uC5F4","grid.layout.editor.column.gap":"\uC5F4 \uAC04\uACA9","grid.layout.editor.template.rows":"\uD589","grid.layout.editor.row.gap":"\uD589 \uAC04\uACA9","grid.box.editor.box.title":"\uC601\uC5ED","grid.box.editor.type":"\uD0C0\uC785","grid.box.editor.repeat":"\uBC18\uBCF5","grid.box.editor.length":"\uAE38\uC774","grid.box.editor.none":"\uC5C6\uC74C","grid.box.editor.auto":"\uC790\uB3D9","grid.box.editor.count":"\uAC1C\uC218","grid.box.editor.value":"\uD06C\uAE30","grid.layout.item.property.title":"\uADF8\uB9AC\uB4DC \uC544\uC774\uD15C \uC124\uC815","grid.layout.item.property.column":"\uC5F4","grid.layout.item.property.row":"\uD589","grid.layout.item.property.start":"\uC2DC\uC791","grid.layout.item.property.End":"\uB05D","grid.layout.item.property.none":"\uC5C6\uC74C","grid.layout.item.property.value":"\uAC12","box.model.property.title":"\uBC15\uC2A4 \uBAA8\uB378","box.model.property.margin":"\uB9C8\uC9C4","box.model.property.padding":"\uD328\uB529","component.items.canvas":"\uCE94\uBC84\uC2A4","component.items.layer":"\uB808\uC774\uC5B4","component.items.3dlayer":"3D \uB808\uC774\uC5B4","component.items.drawing":"\uADF8\uB9AC\uAE30","component.items.custom":"\uC0AC\uC6A9\uC790 \uC815\uC758 \uCEF4\uD3EC\uB10C\uD2B8","component.items.chart":"\uCC28\uD2B8","component.items.plugin":"\uD50C\uB7EC\uADF8\uC778","svg.text.property.title":"SVG Text \uC2A4\uD0C0\uC77C","svg.text.property.textarea":"\uD14D\uC2A4\uD2B8 \uC785\uB825","svg.text.property.size":"\uD3F0\uD2B8 \uD06C\uAE30","svg.text.property.weight":"\uD3F0\uD2B8 \uAD75\uAE30","svg.text.property.style":"\uD3F0\uD2B8 \uC2A4\uD0C0\uC77C","svg.text.property.anchor":"\uD14D\uC2A4\uD2B8 \uC704\uCE58","svg.text.property.family":"\uD3F0\uD2B8 \uAE00\uAF34","svg.text.property.length.adjust":"\uAE38\uC774 \uB300\uC751","svg.text.property.text.length":"\uD14D\uC2A4\uD2B8 \uAE38\uC774","svg.text.property.start.offset":"\uC2DC\uC791 \uC9C0\uC810","fill.picker.popup.title":"\uC0C9 \uCC44\uC6B0\uAE30","gradient.editor.drag.message":"\uB4DC\uB798\uADF8 \uD558\uBA74 \uC911\uC2EC\uC810\uC744 \uC62E\uAE38 \uC218 \uC788\uC2B5\uB2C8\uB2E4.","draw.manager.tolerance":"\uD3EC\uC778\uD2B8 \uD5C8\uC6A9 \uC624\uCC28","pattern.property.title":"\uD328\uD134","pattern.info.popup.title":"\uD328\uD134 \uC815\uBCF4","pattern.info.popup.width":"\uB113\uC774","pattern.info.popup.height":"\uB192\uC774","pattern.info.popup.lineWidth":"\uC120 \uB113\uC774","pattern.info.popup.lineHeight":"\uC120 \uB192\uC774","pattern.info.popup.rotate":"\uD68C\uC804","pattern.info.popup.blend":"\uBE14\uB80C\uB4DC","pattern.info.popup.foreColor":"\uD328\uD134\uC0C9","pattern.info.popup.backColor":"\uBC30\uACBD\uC0C9","stroke.dasharray.editor.add":"\uC810 \uCD94\uAC00","viewport.panning.enable":"space \uB97C \uB204\uB978\uCC44 \uD654\uBA74\uC744 \uB4DC\uB798\uADF8 \uD558\uBA74 \uC601\uC5ED\uC744 \uC6C0\uC9C1\uC77C \uC218 \uC788\uC2B5\uB2C8\uB2E4."},ly={en_US:eA,fr_FR:tA,ko_KR:iA};function Nc(n){Object.keys(ly).forEach(function(e){n.registerI18nMessage(e,ly[e])})}var Qte="";const Un={HORIZONTAL:"constraints-horizontal",VERTICAL:"constraints-vertical"},Tt={NONE:"none",MIN:"min",MAX:"max",STRETCH:"stretch",SCALE:"scale",CENTER:"center"},Wn={DIFFERENCE:"difference",INTERSECTION:"intersection",UNION:"union",REVERSE_DIFFERENCE:"reverse-difference",XOR:"xor"},Kd={BUTT:"butt",ROUND:"round",SQUARE:"square"},gl={MITER:"miter",ROUND:"round",BEVEL:"bevel"},hr={NORMAL:"normal",MULTIPLY:"multiply",SCREEN:"screen",OVERLAY:"overlay",DARKEN:"darken",LIGHTEN:"lighten",COLOR_DODGE:"color-dodge",COLOR_BURN:"color-burn",HARD_LIGHT:"hard-light",SOFT_LIGHT:"soft-light",DIFFERENCE:"difference",EXCLUSION:"exclusion",HUE:"hue",SATURATION:"saturation",COLOR:"color",LUMINOSITY:"luminosity"},qd={NONE:"none",UNDERLINE:"underline",OVERLINE:"overline",LINE_THROUGH:"line-through",BLINK:"blink"},Zd={NONE:"none",CAPITALIZE:"capitalize",UPPERCASE:"uppercase",LOWERCASE:"lowercase"},cy={START:"start",END:"end",LEFT:"left",RIGHT:"right",CENTER:"center",JUSTIFY:"justify"},ml={VISIBLE:"visible",HIDDEN:"hidden",SCROLL:"scroll",AUTO:"auto"},Xn={NONE:"none",HIDDEN:"hidden",DOTTED:"dotted",DASHED:"dashed",SOLID:"solid",DOUBLE:"double",GROOVE:"groove",RIDGE:"ridge",INSET:"inset",OUTSET:"outset"},rA={NONE:"none",PERSPECTIVE:"perspective",TRANSLATE:"translate",TRANSLATE_X:"translateX",TRANSLATE_Y:"translateY",TRANSLATE_Z:"translateZ",TRANSLATE_3D:"translate3d",SCALE:"scale",SCALE_X:"scaleX",SCALE_Y:"scaleY",SCALE_Z:"scaleZ",SCALE_3D:"scale3d",ROTATE:"rotate",ROTATE_X:"rotateX",ROTATE_Y:"rotateY",ROTATE_Z:"rotateZ",SKEW:"skew",SKEW_X:"skewX",SKEW_Y:"skewY",MATRIX:"matrix",MATRIX_3D:"matrix3d"},At={DEFAULT:"default",FLEX:"flex",GRID:"grid"},br={ROW:"row",ROW_REVERSE:"row-reverse",COLUMN:"column",COLUMN_REVERSE:"column-reverse"},uo={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},Ps={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",BASELINE:"baseline",STRETCH:"stretch"},hy={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},Bc={NOWRAP:"nowrap",WRAP:"wrap",WRAP_REVERSE:"wrap-reverse"},wt={FIXED:"fixed",HUG_CONTENT:"hug-content",FILL_CONTAINER:"fill-container"},jc={NONE:"none",TEXT:"text"},bn={OUTSET:"outset",INSET:"inset"},ue={STATIC:"static-gradient",LINEAR:"linear-gradient",RADIAL:"radial-gradient",CONIC:"conic-gradient",REPEATING_LINEAR:"repeating-linear-gradient",REPEATING_RADIAL:"repeating-radial-gradient",REPEATING_CONIC:"repeating-conic-gradient",IMAGE:"image",URL:"url"},cn={CLOSEST_SIDE:"closest-side",CLOSEST_CORNER:"closest-corner",FARTHEST_SIDE:"farthest-side",FARTHEST_CORNER:"farthest-corner"},Ci={CIRCLE:"circle",ELLIPSE:"ellipse"},xr={NONE:"none",CIRCLE:"circle",ELLIPSE:"ellipse",POLYGON:"polygon",INSET:"inset",PATH:"path",SVG:"svg"},xn={VISIBLE:"visible",HIDDEN:"hidden"},Je={LINEAR:"linear",EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",STEPS:"steps",CUBIC_BEZIER:"cubic-bezier",PATH:"path"},Jr={PAD:"pad",REFLECT:"reflect",REPEAT:"repeat"},Ut={COMMA:"comma",COLOR:"color",LENGTH:"length",GRADIENT:"gradient",TIMING:"timing",KEYWORD:"keyword",STRING:"string",NUMBER:"number",BOOLEAN:"boolean",FUNCTION:"function",PATH:"path",URL:"url",REPEAT:"repeat",UNKNOWN:"unknown"},dy={MOVETO:"M",LINETO:"L",CURVETO:"C",QUARDTO:"Q",ARCTO:"A",CLOSEPATH:"Z",UNKNOWN:"unknown"},Ts={TO_TOP:"to top",TO_RIGHT:"to right",TO_BOTTOM:"to bottom",TO_LEFT:"to left",TO_TOP_LEFT:"to top left",TO_TOP_RIGHT:"to top right",TO_BOTTOM_LEFT:"to bottom left",TO_BOTTOM_RIGHT:"to bottom right"},nA={1:Ts.TO_TOP_LEFT,2:Ts.TO_TOP_RIGHT,3:Ts.TO_BOTTOM_LEFT,4:Ts.TO_BOTTOM_RIGHT,11:Ts.TO_TOP,12:Ts.TO_RIGHT,13:Ts.TO_BOTTOM,14:Ts.TO_LEFT},_n={APPEND_CHILD:"appendChild",INSERT_BEFORE:"insertBefore",INSERT_AFTER:"insertAfter"};class Kf extends ge{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(a=>typeof a=="string"?{value:a,text:a}:a):(this.props.options||"").split(e).map(a=>a.trim()).map(a=>{const[o,l]=a.split(":");return{value:o,text:l||o}}),i=this.props.value,r=this.props.tabindex,s=this.props.title;return{splitChar:e,label:this.props.label||"",title:s,options:t,value:i,tabIndex:r}}getOptionString(){var e=this.state.options.map(t=>{var i=t.value,r=t.text||t.value;r===""?r=this.props["none-value"]?this.props["none-value"]:"":r==="-"&&(r="----------",i="");var s=i===this.state.value?"selected":"";const a=t.disabled?"disabled":"";return``});return e.join("")}template(){var{label:e,title:t,tabIndex:i,value:r=hr.NORMAL}=this.state,s=e?"has-label":"",a=i?'tabIndex="1"':"",o=this.props.compact?"compact":"";return We[e]&&(e=re(e)),` -
      + `}[M("updateMenu")](e){(e==="toolbar.left"||e==="toolbar.center"||e==="toolbar.right")&&this.refresh()}}var H7="",oP={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},lP=Object.freeze(Object.defineProperty({__proto__:null,default:oP},Symbol.toStringTag,{value:"Module"})),cP={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},hP=Object.freeze(Object.defineProperty({__proto__:null,default:cP},Symbol.toStringTag,{value:"Module"})),dP=Object.values({"./config_list/show.left.panel.js":lP,"./config_list/show.right.panel.js":hP}).map(s=>s.default);function uP(s){dP.forEach(e=>{s.registerConfig(e)})}function Wd(s){s.registerElement({Button:$v,ToggleButton:Sv,ToggleCheckBox:wv}),s.registerAlias({"toggle-checkbox":"ToggleCheckBox","toggle-button":"ToggleButton",button:"Button"})}var pP={key:"body.move.ms",defaultValue:30,title:"pointer move delay millisecond",description:"Set delay millisecond to moving pointer in body ",type:"number"},gP=Object.freeze(Object.defineProperty({__proto__:null,default:pP},Symbol.toStringTag,{value:"Module"})),fP={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},mP=Object.freeze(Object.defineProperty({__proto__:null,default:fP},Symbol.toStringTag,{value:"Module"})),vP={key:"editor.cursor",defaultValue:"auto",title:"Editor Cursor ",description:"Set editor's cursor",type:"string"},yP=Object.freeze(Object.defineProperty({__proto__:null,default:vP},Symbol.toStringTag,{value:"Module"})),bP={key:"editor.theme",defaultValue:"light",title:"Editor Theme ",description:"Set editor's theme",type:"string"},xP=Object.freeze(Object.defineProperty({__proto__:null,default:bP},Symbol.toStringTag,{value:"Module"})),$P={key:"event.doubleclick.timing",defaultValue:500,title:"doubleclick timing",description:"whether doubleclick timing is in some seconds",type:"number"},_P=Object.freeze(Object.defineProperty({__proto__:null,default:$P},Symbol.toStringTag,{value:"Module"})),SP={key:"language.locale",defaultValue:Ui.EN,title:"set locale for editor",description:"set locale for editor",type:"string"},PP=Object.freeze(Object.defineProperty({__proto__:null,default:SP},Symbol.toStringTag,{value:"Module"})),wP={key:"store.key",defaultValue:"easylogic.studio",title:"Store Key",description:"Set localStorage key",type:"string"},CP=Object.freeze(Object.defineProperty({__proto__:null,default:wP},Symbol.toStringTag,{value:"Module"})),TP={key:"style.canvas.background.color",defaultValue:"#ececec",title:"Canvas Background Color",description:"Set canvas background color",type:"color"},kP=Object.freeze(Object.defineProperty({__proto__:null,default:TP},Symbol.toStringTag,{value:"Module"})),MP=Object.values({"./config_list/body.move.ms.js":gP,"./config_list/debug.mode.js":mP,"./config_list/editor.cursor.js":yP,"./config_list/editor.theme.js":xP,"./config_list/event.doubleclick.timing.js":_P,"./config_list/language.locale.js":PP,"./config_list/store.key.js":CP,"./config_list/style.canvas.background.color.js":kP}).map(s=>s.default);function Xd(s){MP.forEach(e=>{s.registerConfig(e)})}function Yd(s){s.registerIcon("artboard","artboard"),s.registerIcon("circle","lens"),s.registerIcon("image","image"),s.registerIcon("text","title"),s.registerIcon("svg-text","title"),s.registerIcon("boolean-path","pentool"),s.registerIcon("svg-path","pentool"),s.registerIcon("polygon","polygon"),s.registerIcon("star","star"),s.registerIcon("spline","smooth"),s.registerIcon("rect","rect")}var IP={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Language","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Dark","app.theme.light":"Light","app.theme.toon":"Toon","app.theme.gray":"Gray","app.label.theme":"Theme","app.tab.title.projects":"Projects","app.tab.title.layers":"Layers","app.tab.title.libraries":"Library","app.tab.title.components":"Component","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Assets","app.tab.title.keyMap":"KeyMap","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"Source","menu.item.save.title":"Save","menu.item.export.title":"Export","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Full Screen","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Learn","menu.item.projects.title":"Projects","menu.item.language.title":"Language","project.property.title":"Project","project.information.property.title":"Project information","project.information.property.name":"Name","project.information.property.description":"Description","artboard.property.title":"ArtBoards","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grid","layer.tree.property.title":"Layers","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grid","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Size","position.property.width":"W","position.property.height":"H","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Appearance","background.color.property.color":"Color","background.color.property.zindex":"z-index","background.color.property.blend":"Blend","background.color.property.overflow":"Overflow","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Hidden","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiply","blend.screen":"screen","blend.overlay":"overlay","blend.darken":"darken","blend.lighten":"lighten","blend.color-dodge":"color-dodge","blend.color-burn":"color-burn","blend.hard-light":"hard-light","blend.soft-light":"soft-light","blend.difference":"difference","blend.exclusion":"exclusion","blend.hue":"hue","blend.saturation":"saturation","blend.color":"color","blend.luminosity":"luminosity","background.image.property.title":"Fill","border.property.title":"Border","border.radius.property.title":"Border Radius","boxshadow.property.title":"Box Shadows","filter.property.title":"Filter","filter.property.blur":"Blur","filter.property.grayscale":"GrayScale","filter.property.hue-rotate":"Hue Rotate","filter.property.invert":"Invert","filter.property.brightness":"Brightness","filter.property.contrast":"Contrast","filter.property.drop-shadow":"Drop Shadow","filter.property.drop-shadow.color":"Color","filter.property.drop-shadow.offsetX":"Offset X","filter.property.drop-shadow.offsetY":"Offset Y","filter.property.drop-shadow.blurRadius":"Blur","filter.property.opacity":"Opacity","filter.property.saturate":"Saturate","filter.property.sepia":"Sepia","filter.property.svg":"SVG","font.property.title":"Font","font.property.color":"Color","font.property.size":"Size","font.property.stretch":"Stretch","font.property.weight":"Weight","font.property.style":"Style","font.property.family":"Family","font.spacing.property.title":"Font spacing","font.spacing.property.lineHeight":"Line height","font.spacing.property.letterSpacing":"Letter spacing","font.spacing.property.wordSpacing":"Word spacing","font.spacing.property.indent":"Indent","backdrop.filter.property.title":"Backdrop Filter","clippath.property.title":"Clip Path","export.property.title":"Export","export.property.download":"Download","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origin","image.property.size":"Size","image.property.width":"Width","image.property.height":"height","video.property.title":"Video","video.property.play":"Play","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Playback Rate","video.property.currentTime":"Current Time","video.property.playTime":"Play Time Distance","motion.property.title":"Motion","text.property.title":"Text Style","text.property.align":"Align","text.property.transform":"Transform","text.property.decoration":"Decoration","text.clip.property.title":"Text Clip","text.shadow.property.title":"Text Shadows","text.fill.property.title":"Text Fill","text.fill.property.fill":"Fill","text.fill.property.stroke":"Stroke","text.fill.property.strokeWidth":"Width","transform.property.title":"Transform","transform.origin.property.title":"Transform Origin","transition.property.title":"CSS Transition","keyframe.property.title":"CSS Keyframe","selector.property.title":"Selector","selector.property.none":"None selector","path.data.property.title":"Path Information","polygon.data.property.title":"Polygon Information","perspective.property.title":"Perspective","perspective.origin.property.title":"Perspective Origin","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Motion Path","svg.item.property.fill":"Fill","svg.item.property.fillOpacity":"Opacity","svg.item.property.path":"Path","svg.item.property.polygon":"Polygon","svg.item.property.totalLength":"Total Length","svg.item.property.fillRule":"Fill Rule","svg.item.property.stroke":"Stroke","svg.item.property.strokeWidth":"Width","svg.item.property.dashArray":"Dash Array","svg.item.property.dashOffset":"Dash Offset","svg.item.property.lineCap":"Line Cap","svg.item.property.lineJoin":"Line Join","svg.item.property.filter":"Filter","svg.item.property.blend":"Blend Mode","border.editor.all":"All","border.editor.width":"Width","border.editor.style":"Style","border.editor.color":"C","border.editor.top":"Top","border.editor.left":"Left","border.editor.right":"Right","border.editor.bottom":"Bottom","border.radius.editor.topLeft":"Top Left","border.radius.editor.topRight":"Top Right","border.radius.editor.bottomLeft":"Bottom Left","border.radius.editor.bottomRight":"Bottom Right","boxshadow.editor.blur":"Blur","boxshadow.editor.spread":"Spread","css.property.editor.properties":"Properties","offset.path.list.editor.path":"Path","offset.path.list.editor.totalLength":"Total Length","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotate","svgfilter.select.editor.message.create":"Create new svg filter","svgfilter.select.editor.message.select":"Select a filter","fill.editor.message.click.image":"Click the preview area if you want to select a image","fill.editor.message.drag.position":"Drag if you want to move center position","fill.editor.x1":"Start X","fill.editor.x2":"End X","fill.editor.y1":"Start Y","fill.editor.y2":"End Y","fill.editor.spread":"Spread","fill.editor.offset":"Offset","fill.editor.cx":"Center X","fill.editor.cy":"Center Y","fill.editor.r":"End radius","fill.editor.fx":"Start X","fill.editor.fy":"Start Y","fill.editor.fr":"Start radius","perspective.origin.editor.originX":"Origin X","perspective.origin.editor.originY":"Origin Y","path.manager.msg":"Keydown ESC or Enter key to close editing","path.manager.mode.done":"Done","path.manager.mode.modify":"Modify","path.manager.mode.path":"Path","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transform","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Flip X","path.manager.mode.flipY":"Flip Y","path.manager.mode.flipOrigin":"Flip Origin","colorpicker.popup.title":"ColorPicker","selector.popup.title":"Selector Property","selector.popup.selector":"Selector","background.image.position.popup.title":"Background Pattern","background.image.position.popup.size":"Size","background.image.position.popup.width":"Width","background.image.position.popup.height":"Height","background.image.position.popup.repeat":"Repeat","background.image.position.popup.blend":"Blend","background.image.position.popup.type.repeat":"repeat","background.image.position.popup.type.no-repeat":"no repeat","background.image.position.popup.type.repeat-x":"repeat-x","background.image.position.popup.type.repeat-y":"repeat-y","background.image.position.popup.type.space":"space","background.image.position.popup.type.round":"round","gradient.picker.popup.title":"Gradient & Image Picker","gradient.picker.popup.static-gradient":"Static","gradient.picker.popup.linear-gradient":"Linear","gradient.picker.popup.repeating-linear-gradient":"Repeating Linear","gradient.picker.popup.radial-gradient":"Radial","gradient.picker.popup.repeating-radial-gradient":"Repeating Radial","gradient.picker.popup.conic-gradient":"Linear","gradient.picker.popup.repeating-conic-gradient":"Repeating Conic","image.asset.property.title":"Image","video.asset.property.title":"Video","color.asset.property.title":"Color","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Pattern","svgfilter.asset.property.title":"SVG Filter","inspector.tab.title.design":"Design","inspector.tab.title.component":"Component","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"Assets","inspector.tab.title.text":"Text","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Timeline","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Play","timeline.play.control.pause":"Pause","timeline.play.control.first":"First","timeline.play.control.prev":"Previous","timeline.play.control.next":"Next","timeline.play.control.last":"Last","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Speed","timeline.play.control.repeat":"Repeat","timeline.play.control.infinite":"Infinite","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"Value","timeline.value.editor.time":"Time","timeline.value.editor.timing":"Timing","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"SVG Filter","css.item.rotate":"Rotate","css.item.rotateX":"Rotate X","css.item.rotateY":"Rotate Y","css.item.rotateZ":"Rotate Z","css.item.rotate3d":"3D Rotate","css.item.skewX":"Skew X","css.item.skewY":"Skew Y","css.item.translate":"Translate","css.item.translateX":"Translate X","css.item.translateY":"Translate Y","css.item.translateZ":"Translate Z","css.item.translate3d":"3D Translate","css.item.perspective":"Perspective","css.item.scale":"Scale","css.item.scaleX":"Scale X","css.item.scaleY":"Scale Y","css.item.scaleZ":"Scale Z","css.item.scale3d":"3D Scale","css.item.matrix":"Matrix","css.item.matrix3d":"3D Matrix","animation.property.title":"CSS Animation","animation.property.direction":"Direction","animation.property.play.state":"Play State","animation.property.fill.mode":"Fill Mode","animation.property.delay":"Delay","animation.property.duration":"Duration","animation.property.iteration.count":"Iteration Count","animation.property.Select a keyframe":"Select a keyframe","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Timing Function","animation.property.popup.keyframe":"Keyframe","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Play State","animation.property.popup.fill.mode":"Fill Mode","animation.property.popup.delay":"Delay","animation.property.popup.duration":"Duration","animation.property.popup.iteration":"Iteration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"reverse","animation.property.popup.alternate":"alternate","animation.property.popup.alternate-reverse":"alternate-reverse","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"Select a keyframe","keyframe.popup.title":"Keyframe","code.view.property.title":"CodeView","svg.filter.editor.tab.filter":"Filter","svg.filter.editor.tab.preset":"Preset","svg.filter.editor.tab.asset":"Assets","svg.filter.editor.GRAPHIC REFERENCES":"GRAPHIC REFERENCES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"LIGHTING","svg.filter.editor.COMBINERS":"COMBINERS","svg.filter.editor.Template":"Template","layout.property.title":"Layout","layout.property.flex":"Flex Box","layout.property.grid":"Grid","layout.property.default":"Default","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Row","flex.layout.editor.column":"column","flex.layout.editor.row-reverse":"Row Reverse","flex.layout.editor.column-reverse":"Column Reverse","flex.layout.editor.nowrap":"Nowrap","flex.layout.editor.wrap":"Wrap","flex.layout.editor.wrap-reverse":"Wrap Reverse","flex.layout.editor.flex-start":"Start","flex.layout.editor.flex-end":"End","flex.layout.editor.center":"Center","flex.layout.editor.space-between":"Between","flex.layout.editor.space-around":"Around","flex.layout.editor.baseline":"BaseLine","flex.layout.editor.stretch":"Stretch","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justify Content","flex.layout.editor.align-items":"Align Items","flex.layout.editor.align-content":"Align Content","flex.layout.item.property.title":"Flex Item Detail","flex.layout.item.property.grow":"Flex Grow","flex.layout.item.property.shrink":"Flex Shrink","flex.layout.item.property.basis":"Flex Basis","flex.layout.item.property.none":"none","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"value","grid.layout.editor.template.columns":"Columns","grid.layout.editor.column.gap":"Column Gap","grid.layout.editor.template.rows":"Rows","grid.layout.editor.row.gap":"Row Gap","grid.box.editor.box.title":"Box","grid.box.editor.type":"Type","grid.box.editor.repeat":"Repeat","grid.box.editor.length":"Length","grid.box.editor.none":"None","grid.box.editor.auto":"Auto","grid.box.editor.count":"Count","grid.box.editor.value":"Size","grid.layout.item.property.title":"Layout Item Detail","grid.layout.item.property.column":"Column","grid.layout.item.property.row":"Row","grid.layout.item.property.start":"Start","grid.layout.item.property.end":"End","grid.layout.item.property.none":"none","grid.layout.item.property.value":"value","box.model.property.title":"Box Model","box.model.property.margin":"Margin","box.model.property.padding":"Padding","component.items.canvas":"Canvas","component.items.layer":"Layer","component.items.3dlayer":"3D Layer","component.items.drawing":"Drawing","component.items.custom":"Custom Component","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"SVG Text Style","svg.text.property.textarea":"Text Area","svg.text.property.size":"Font Size","svg.text.property.weight":"Font Weight","svg.text.property.style":"Font Style","svg.text.property.anchor":"Text Anchor","svg.text.property.family":"Font Family","svg.text.property.length.adjust":"Length Adjust","svg.text.property.text.length":"Text Length","svg.text.property.start.offset":"Start Offset","fill.picker.popup.title":"SVG Fragment picker","gradient.editor.drag.message":"Drag if you want to move center pointer.","draw.manager.tolerance":"Tolerance","pattern.property.title":"Pattern","pattern.info.popup.title":"Pattern Info","pattern.info.popup.width":"Width","pattern.info.popup.height":"Height","pattern.info.popup.lineWidth":"Line Width","pattern.info.popup.lineHeight":"Line Height","pattern.info.popup.rotate":"Rotate","pattern.info.popup.blend":"Blend Mode","pattern.info.popup.foreColor":"Fore","pattern.info.popup.backColor":"Back","stroke.dasharray.editor.add":"Add Dash","viewport.panning.enable":"You can move the area by holding down space key and dragging the screen.","image.select.editor.button":"Select Image"},EP={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Langue","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Sombre","app.theme.light":"Clair","app.theme.gray":"Gris","app.label.theme":"Th\xE8me","app.tab.title.projects":"Projets","app.tab.title.layers":"Objets","app.tab.title.libraries":"Librarie","app.tab.title.components":"Objet","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Elements","app.tab.title.keyMap":"Clavier","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"T\xE9l\xE9charger","menu.item.save.title":"Enregistrer","menu.item.export.title":"Exporter","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Ecran","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Docs","menu.item.projects.title":"Projects","project.property.title":"Projet","project.information.property.title":"Information","project.information.property.name":"Nom","project.information.property.description":"Description","artboard.property.title":"Planche","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grille","layer.tree.property.title":"Objets","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grille","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Taille","position.property.width":"Largeur","position.property.height":"Hauteur","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Apparance","background.color.property.color":"Couleur","background.color.property.zindex":"z-index","background.color.property.opacity":"Opacit\xE9","background.color.property.blend":"M\xE9lange","background.color.property.overflow":"D\xE9bordement","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Cach\xE9","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiplie","blend.screen":"\xE9cran","blend.overlay":"couche","blend.darken":"sombre","blend.lighten":"clair","blend.color-dodge":"dodge","blend.color-burn":"brul\xE9","blend.hard-light":"dur","blend.soft-light":"doux","blend.difference":'diff"rence',"blend.exclusion":"exclusion","blend.hue":"teinte","blend.saturation":"saturation","blend.color":"couleur","blend.luminosity":"luminosit\xE9","background.image.property.title":"Remplissage","border.property.title":"Bordure","border.radius.property.title":"Rayon de bordure","boxshadow.property.title":"Ombres","filter.property.title":"Filtre","filter.property.blur":"Flou","filter.property.grayscale":"Echelle de gris","filter.property.hue-rotate":"Rotation teinte","filter.property.invert":"Invertir","filter.property.brightness":"Luminosit\xE9","filter.property.contrast":"Contraste","filter.property.drop-shadow":"Ombre port\xE9e","filter.property.drop-shadow.color":"Couleur","filter.property.drop-shadow.offsetX":"D\xE9calage X","filter.property.drop-shadow.offsetY":"D\xE9calage Y","filter.property.drop-shadow.blurRadius":"Flou","filter.property.opacity":"Opacit\xE9","filter.property.saturate":"Saturation","filter.property.sepia":"S\xE9pia","filter.property.svg":"SVG","font.property.title":"Police","font.property.color":"Couleur","font.property.size":"Taille","font.property.stretch":"Etirement","font.property.weight":"Poids","font.property.style":"Style","font.property.family":"Famille","font.spacing.property.title":"Espaces du texte","font.spacing.property.lineHeight":"Hauteur de ligne","font.spacing.property.letterSpacing":"Espace inter-caract\xE8res","font.spacing.property.wordSpacing":"Espace inter-mots","font.spacing.property.indent":"Identation","backdrop.filter.property.title":"Filtre Backdrop","clippath.property.title":"Chemin du Clip","export.property.title":"Exporter","export.property.download":"T\xE9l\xE9charger","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origine","image.property.size":"Taille","image.property.width":"Largeur","image.property.height":"Hauteur","video.property.title":"Video","video.property.play":"Jouer","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Vitesse de lecture","video.property.currentTime":"Temps actuel","video.property.playTime":"Temps de lecture","motion.property.title":"Mouvement","text.property.title":"Style Texte","text.property.align":"Alignement","text.property.transform":"Transformation","text.property.decoration":"D\xE9coration","text.clip.property.title":"Clip Texte","text.shadow.property.title":"Ombres Texte","text.fill.property.title":"Remplissage Texte","text.fill.property.fill":"Remplissage","text.fill.property.stroke":"Trait","text.fill.property.strokeWidth":"Largeur","transform.property.title":"Transformation","transform.origin.property.title":"Origine Transformation","transition.property.title":"Transition CSS","keyframe.property.title":"Image cl\xE9 CSS","selector.property.title":"S\xE9l\xE9cteur","selector.property.none":"Aucun s\xE9l\xE9cteur","path.data.property.title":"Information Chemin","polygon.data.property.title":"Information Polygone","perspective.property.title":"Perspective","perspective.origin.property.title":"Origine Perspective","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Chemin de mouvement","svg.item.property.fill":"Remplissage","svg.item.property.fillOpacity":"Opacit\xE9","svg.item.property.path":"Chemin","svg.item.property.polygon":"Polygone","svg.item.property.totalLength":"Longueur totale","svg.item.property.fillRule":"R\xE8gle remplissage","svg.item.property.stroke":"Trait","svg.item.property.strokeWidth":"Largeur de trait","svg.item.property.dashArray":"Suite tiret","svg.item.property.dashOffset":"D\xE9calage tiret","svg.item.property.lineCap":"Chapeau Ligne","svg.item.property.lineJoin":"Jonction ligne","svg.item.property.filter":"Filtre","svg.item.property.blend":"Blend Mode","border.editor.all":"Tout","border.editor.width":"Largeur","border.editor.style":"Style","border.editor.color":"Couleur","border.editor.top":"Haut","border.editor.left":"Gauche","border.editor.right":"Droite","border.editor.bottom":"Bas","border.radius.editor.topLeft":"Haut gauche","border.radius.editor.topRight":"Haut droite","border.radius.editor.bottomLeft":"Bas gauche","border.radius.editor.bottomRight":"Bas droite","boxshadow.editor.blur":"Flou","boxshadow.editor.spread":"Etalement","css.property.editor.properties":"Propri\xE9t\xE9s","offset.path.list.editor.path":"Chemin","offset.path.list.editor.totalLength":"Longueur totale","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotation","svgfilter.select.editor.message.create":"Cr\xE9er un filtre svg","svgfilter.select.editor.message.select":"S\xE9lection filtre","fill.editor.message.click.image":"Cliquez sur aper\xE7u si vous souhaitez s\xE9lectionner une image","fill.editor.message.drag.position":"Prendre pour changer la position centrale","fill.editor.x1":"D\xE9but X","fill.editor.x2":"Fin X","fill.editor.y1":"D\xE9but Y","fill.editor.y2":"Fin Y","fill.editor.spread":"Etalement","fill.editor.offset":"D\xE9calage","fill.editor.cx":"Centre X","fill.editor.cy":"Centre Y","fill.editor.r":"Rayon de fin","fill.editor.fx":"D\xE9part X","fill.editor.fy":"D\xE9part Y","fill.editor.fr":"Rayon de d\xE9part","perspective.origin.editor.originX":"Origine X","perspective.origin.editor.originY":"Origine Y","path.manager.msg":"Appuyer ESC ou Entr\xE9z keypour fermer Edition","path.manager.mode.done":"Done","path.manager.mode.modify":"Modifier","path.manager.mode.path":"Chemin","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transformer","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Retouner X","path.manager.mode.flipY":"Retouner Y","path.manager.mode.flipOrigin":"Retouner Origine","colorpicker.popup.title":"Pipette","selector.popup.title":"Propi\xE9t\xE9 de S\xE9lecteur","selector.popup.selector":"S\xE9lecteur","background.image.position.popup.title":"Motif de fond","background.image.position.popup.size":"Taille","background.image.position.popup.width":"Largeur","background.image.position.popup.height":"Hauteur","background.image.position.popup.repeat":"Rep\xE8te","background.image.position.popup.blend":"M\xE9lange","background.image.position.popup.type.repeat":"rep\xE8te","background.image.position.popup.type.no-repeat":"sans rep\xE9tition","background.image.position.popup.type.repeat-x":"rep\xE8te-x","background.image.position.popup.type.repeat-y":"rep\xE8te-y","background.image.position.popup.type.space":"espace","background.image.position.popup.type.round":"rond","gradient.picker.popup.title":"S\xE9lection Gradient & Image","image.asset.property.title":"Image","video.asset.property.title":"Vid\xE9o","color.asset.property.title":"Couleur","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Motif","svgfilter.asset.property.title":"Filtre SVG","inspector.tab.title.design":"Design","inspector.tab.title.component":"Composant","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"El\xE9ments","inspector.tab.title.text":"Texte","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Chronologie","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Jouer","timeline.play.control.pause":"Pause","timeline.play.control.first":"Premier","timeline.play.control.prev":"Pr\xE9c\xE9dent","timeline.play.control.next":"Suivant","timeline.play.control.last":"Dernier","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Vitesse","timeline.play.control.repeat":"R\xE9p\xE9ter","timeline.play.control.infinite":"Infini","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternatif","timeline.play.control.reverse":"inverse","timeline.play.control.alternate.reverse":"inverse alternatif","timeline.value.editor.value":"Valeur","timeline.value.editor.time":"Temps","timeline.value.editor.timing":"Calage temps","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"Filtre SVG","css.item.rotate":"Rotation","css.item.rotateX":"Rotation X","css.item.rotateY":"Rotation Y","css.item.rotateZ":"Rotation Z","css.item.rotate3d":"Rotation 3D","css.item.skewX":"Oblique X","css.item.skewY":"Oblique Y","css.item.translate":"Translation","css.item.translateX":"Translation X","css.item.translateY":"Translation Y","css.item.translateZ":"Translation Z","css.item.translate3d":"Translation 3D","css.item.perspective":"Persp\xE9ctive","css.item.scale":"Echelle","css.item.scaleX":"Echelle X","css.item.scaleY":"Echelle Y","css.item.scaleZ":"Echelle Z","css.item.scale3d":"Echelle 3D","css.item.matrix":"Matrice","css.item.matrix3d":"Matrice 3D","animation.property.title":"Animation CSS","animation.property.direction":"Direction","animation.property.play.state":"Etat lecture","animation.property.fill.mode":"Mode remplissage","animation.property.delay":"D\xE9lais","animation.property.duration":"Dur\xE9e","animation.property.iteration.count":"Nombre It\xE9rations","animation.property.Select a keyframe":"Selectionner une image cl\xE9","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Fonction temps","animation.property.popup.keyframe":"image cl\xE9","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Etat lecture","animation.property.popup.fill.mode":"Mode remplissage","animation.property.popup.delay":"D\xE9lais","animation.property.popup.duration":"Dur\xE9\xE9","animation.property.popup.iteration":"It\xE9ration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"inverse","animation.property.popup.alternate":"alternatif","animation.property.popup.alternate-reverse":"inverse alternatif","animation.property.popup.none":"Aucun","animation.property.popup.forwards":"en avant","animation.property.popup.backwards":"en arri\xE8re","animation.property.popup.both":"les deux","animation.property.popup.Select a keyframe":"Selectionner une image cl\xE9","keyframe.popup.title":"image cl\xE9","code.view.property.title":"Vue code","svg.filter.editor.tab.filter":"Filtrer","svg.filter.editor.tab.preset":"Pre-rempli","svg.filter.editor.tab.asset":"El\xE9ments","svg.filter.editor.GRAPHIC REFERENCES":"REFERENCES GRAPHIQUES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"ECLAIRAGE","svg.filter.editor.COMBINERS":"COMBINER","svg.filter.editor.Template":"Mod\xE8le","layout.property.title":"Disposition","layout.property.flex":"Bo\xEEte Flex","layout.property.grid":"Grille","layout.property.default":"D\xE9faut","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Ligne","flex.layout.editor.column":"Colonne","flex.layout.editor.row-reverse":"Inverse ligne","flex.layout.editor.column-reverse":"Inverse Colonne","flex.layout.editor.nowrap":"Non-emball\xE9","flex.layout.editor.wrap":"Emball\xE9 (wrap)","flex.layout.editor.wrap-reverse":"Inverse emball\xE9","flex.layout.editor.flex-start":"D\xE9but","flex.layout.editor.flex-end":"Fin","flex.layout.editor.center":"Centrer","flex.layout.editor.space-between":"Entre","flex.layout.editor.space-around":"Autour","flex.layout.editor.baseline":"Base","flex.layout.editor.stretch":"Etirement","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justifier","flex.layout.editor.align-items":"Aligner objets","flex.layout.editor.align-content":"Aligner contenu","flex.layout.item.property.title":"D\xE9tail Disposition objet","flex.layout.item.property.grow":"Augmenter Flex","flex.layout.item.property.shrink":"R\xE9duire Flex","flex.layout.item.property.basis":"Base Flex","flex.layout.item.property.none":"Aucun","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"valeur","grid.layout.editor.template.columns":"Colonne","grid.layout.editor.column.gap":"Espace Colonne","grid.layout.editor.template.rows":"Lignes","grid.layout.editor.row.gap":"Espace lignes","grid.box.editor.box.title":"Bo\xEEte","grid.box.editor.type":"Type","grid.box.editor.repeat":"R\xE9p\xE9ter","grid.box.editor.length":"Longueur","grid.box.editor.none":"Aucun","grid.box.editor.auto":"Auto","grid.box.editor.count":"Compte","grid.box.editor.value":"Taille","grid.layout.item.property.title":"D\xE9tail disposition objets","grid.layout.item.property.column":"Colonne","grid.layout.item.property.row":"Ligne","grid.layout.item.property.start":"D\xE9but","grid.layout.item.property.end":"Fin","grid.layout.item.property.none":"Aucun","grid.layout.item.property.value":"valeur","box.model.property.title":"Mod\xE8le","box.model.property.margin":"Marge","box.model.property.padding":"Espace","component.items.canvas":"Toile","component.items.layer":"Objet","component.items.3dlayer":"Objet 3D","component.items.drawing":"Dessin","component.items.custom":"Composant personnalis\xE9","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"Style SVG Texte","svg.text.property.textarea":"Zone Texte","svg.text.property.size":"Taille","svg.text.property.weight":"Poids","svg.text.property.style":"Style","svg.text.property.anchor":"Ancre Texte","svg.text.property.family":"Famille","svg.text.property.length.adjust":"Ajusteement longueur","svg.text.property.text.length":"Ajusteement Texte","svg.text.property.start.offset":"D\xE9callage d\xE9part","fill.picker.popup.title":"S\xE9lection Fragment SVG","gradient.editor.drag.message":"Glisser pour d\xE9placer centre.","draw.manager.tolerance":"Tol\xE9rance","pattern.property.title":"Motif","pattern.info.popup.title":"Info Motif","pattern.info.popup.width":"Largeur","pattern.info.popup.height":"Hauteur","pattern.info.popup.lineWidth":"Largeur ligne","pattern.info.popup.lineHeight":"Hauteur de ligne","pattern.info.popup.rotate":"Rotatation","pattern.info.popup.blend":"M\xE9lange","pattern.info.popup.foreColor":"Avant","pattern.info.popup.backColor":"Arri\xE8re","stroke.dasharray.editor.add":"Ajout tiret","viewport.panning.enable":"You can move the area by holding down space and dragging the screen."},LP={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"\uC5B8\uC5B4","app.layout.all":"\uB808\uC774\uC544\uC6C3","app.layout.css":"CSS \uBAA8\uB4DC","app.layout.svg":"SVG \uBAA8\uB4DC","app.label.layout":"\uBA54\uB274\uAD6C\uC131","app.theme.dark":"\uC5B4\uB450\uC6B4","app.theme.light":"\uBC1D\uC740","app.theme.toon":"\uADF8\uB9AC\uAE30","app.theme.gray":"\uD68C\uC0C9","app.label.theme":"\uD14C\uB9C8","app.tab.title.projects":"\uD504\uB85C\uC81D\uD2B8","app.tab.title.layers":"\uB808\uC774\uC5B4","app.tab.title.libraries":"\uB77C\uC774\uBE0C\uB7EC\uB9AC","app.tab.title.components":"\uCEF4\uD3EC\uB10C\uD2B8","app.tab.title.artboards":"\uC544\uD2B8\uBCF4\uB4DC","app.tab.title.assets":"\uC5D0\uC14B","app.tab.title.keyMap":"\uB2E8\uCD95\uD0A4","app.confirm.message.artboard.items.removeArtboard":"\uC544\uD2B8\uBCF4\uB4DC \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","app.confirm.message.custom-component.items.removeCustomComponent":"\uCEF4\uD3EC\uB10C\uD2B8 \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","menu.item.download.title":"\uB2E4\uC6B4\uB85C\uB4DC","menu.item.save.title":"\uC800\uC7A5","menu.item.export.title":"\uB0B4\uBCF4\uB0B4\uAE30","menu.item.fullscreen.title":"\uC804\uCCB4\uD654\uBA74","menu.item.shortcuts.title":"\uB2E8\uCD95\uD0A4","menu.item.github.title":"Github","menu.item.learn.title":"\uBC30\uC6B0\uAE30","menu.item.projects.title":"\uD504\uB85C\uC81D\uD2B8","project.property.title":"\uD504\uB85C\uC81D\uD2B8","project.information.property.title":"\uD504\uB85C\uC81D\uD2B8 \uC815\uBCF4","project.information.property.name":"\uC774\uB984","project.information.property.description":"\uC124\uBA85","artboard.property.title":"\uC544\uD2B8\uBCF4\uB4DC","artboard.property.layout.title.flex":"\uD50C\uB809\uC2A4","artboard.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","layer.tree.property.title":"\uB808\uC774\uC5B4","layer.tree.property.layout.title.flex":"\uD50C\uB809\uC2A4","layer.tree.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","alignment.property.title":"\uC815\uB82C","position.property.title":"\uC704\uCE58","position.property.X":"X","position.property.Y":"Y","size.property.title":"\uD06C\uAE30","position.property.width":"\uB113\uC774","position.property.height":"\uB192\uC774","position.property.rotate":"\uD68C\uC804","position.property.opacity":"\uD22C\uBA85","background.color.property.title":"\uD45C\uC2DC","background.color.property.color":"\uBC30\uACBD\uC0C9","background.color.property.zindex":"z-index","background.color.property.blend":"\uBE14\uB80C\uB4DC\uBAA8\uB4DC","background.color.property.overflow":"\uC624\uBC84\uD50C\uB85C\uC6B0","background.color.property.overflow.visible":"\uBCF4\uC774\uAE30","background.color.property.overflow.hidden":"\uC228\uAE30\uAE30","background.color.property.overflow.scroll":"\uC2A4\uD06C\uB864","background.color.property.overflow.auto":"\uC790\uB3D9","blend.normal":"Normal(\uD45C\uC900) \uD63C\uD569\uBAA8\uB4DC","blend.multiply":"Multiply(\uACF1\uD558\uAE30) \uBAA8\uB4DC","blend.screen":"Screen(\uC2A4\uD06C\uB9B0) \uBAA8\uB4DC ","blend.overlay":"Overlay(\uC624\uBC84\uB808\uC774) \uBAA8\uB4DC","blend.darken":"Darken(\uC5B4\uB461\uAE30) \uBAA8\uB4DC","blend.lighten":"Lighten(\uBC1D\uAE30) \uBAA8\uB4DC ","blend.color-dodge":"Color Dodge(\uCEEC\uB7EC \uB2F7\uC9C0) \uBAA8\uB4DC ","blend.color-burn":"Color Burn(\uCEEC\uB7EC \uBC88) \uBAA8\uB4DC ","blend.hard-light":"Hard Light(\uD558\uB4DC \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.soft-light":"Soft Light(\uC18C\uD504\uD2B8 \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.difference":"Difference(\uCC28\uC774) \uBAA8\uB4DC","blend.exclusion":"Exclusion(\uC81C\uC678) \uBAA8\uB4DC","blend.hue":"Hue(\uC0C9\uC870) \uBAA8\uB4DC ","blend.saturation":"Saturation(\uCC44\uB3C4) \uBAA8\uB4DC","blend.color":"Color(\uC0C9\uC0C1) \uBAA8\uB4DC","blend.luminosity":"Luminosity(\uAD11\uB3C4) \uBAA8\uB4DC ","background.image.property.title":"\uCC44\uC6B0\uAE30","border.property.title":"\uC678\uACFD\uC120","border.radius.property.title":"\uB465\uADFC \uC678\uACFD\uC120","boxshadow.property.title":"\uADF8\uB9BC\uC790","filter.property.title":"\uD544\uD130","filter.property.blur":"\uD750\uB9BC(Blur)","filter.property.grayscale":"\uD68C\uC0C9(GrayScale)","filter.property.hue-rotate":"\uC0C9\uC870(HueRotate)","filter.property.invert":"\uBC18\uC804(Invert)","filter.property.brightness":"\uBC1D\uAE30(Brightness)","filter.property.contrast":"\uB300\b\uC870(Contrast)","filter.property.drop-shadow":"\uADF8\uB9BC\uC790(Drop Shadow)","filter.property.drop-shadow.color":"\uC0C9","filter.property.drop-shadow.offsetX":"X","filter.property.drop-shadow.offsetY":"Y","filter.property.drop-shadow.blurRadius":"\uD750\uB9BC","filter.property.opacity":"\uD22C\uBA85\uB3C4(Opacity)","filter.property.saturate":"\uCC44\uB3C4(Saturate)","filter.property.sepia":"\uAC08\uC0C9\uD1A4(Sepia)","filter.property.svg":"SVG","font.property.title":"\uD3F0\uD2B8","font.property.color":"\uC0C9","font.property.size":"\uD06C\uAE30","font.property.stretch":"\uBED7\uAE30","font.property.weight":"\uAD75\uAE30","font.property.style":"\uC2A4\uD0C0\uC77C","font.property.family":"\uAE00\uAF34","font.spacing.property.title":"\uD3F0\uD2B8 \uACF5\uAC04","font.spacing.property.lineHeight":"\uC904 \uB192\uC774","font.spacing.property.letterSpacing":"\uAE00\uC790 \uAC04\uACA9","font.spacing.property.wordSpacing":"\uB2E8\uC5B4 \uAC04\uACA9","font.spacing.property.indent":"\uB4E4\uC5EC\uC4F0\uAE30","backdrop.filter.property.title":"\uD6C4\uBA74 \uD544\uD130","clippath.property.title":"\uD074\uB9BD\uD328\uC2A4","export.property.title":"\uB0B4\uBCF4\uB0B4\uAE30","export.property.download":"\uB2E4\uC6B4\uB85C\uB4DC","iframe.property.title":"\uC544\uC774\uD504\uB808\uC784","image.property.title":"\uC774\uBBF8\uC9C0","image.property.origin":"\uC6D0\uBCF8","image.property.size":"\uD06C\uAE30","image.property.width":"\uB113\uC774","image.property.height":"\uB192\uC774","video.property.title":"\uBE44\uB514\uC624","video.property.play":"\uC2DC\uC791","video.property.pause":"\uBA48\uCDA4","video.property.volume":"\uBCFC\uB968","video.property.playbackRate":"\uBE60\uB974\uAE30","video.property.currentTime":"\uD604\uC7AC \uC2DC\uAC04","video.property.playTime":"\uD50C\uB808\uC774 \uC2DC\uAC04 \uAC04\uACA9","motion.property.title":"\uBAA8\uC158","path.data.property.title":"\uD328\uC2A4 \uC815\uBCF4","polygon.data.property.title":"\uD3F4\uB9AC\uACE4 \uC815\uBCF4","text.property.title":"\uD14D\uC2A4\uD2B8 \uC2A4\uD0C0\uC77C","text.property.align":"\uC815\uB82C","text.property.transform":"\uBCC0\uD615","text.property.decoration":"\uC7A5\uC2DD","text.clip.property.title":"\uD14D\uC2A4\uD2B8 \uD074\uB9BD","text.shadow.property.title":"\uD14D\uC2A4\uD2B8 \uADF8\uB9BC\uC790","text.fill.property.title":"\uD14D\uC2A4\uD2B8 \uCC44\uC6B0\uAE30","text.fill.property.fill":"\uCC44\uC6B0\uAE30","text.fill.property.stroke":"\uC724\uACFD\uC120","text.fill.property.strokeWidth":"\uC724\uACFD\uC120 \uAD75\uAE30","transform.property.title":"\uD2B8\uB79C\uC2A4\uD3FC","transform.origin.property.title":"\uD2B8\uB79C\uC2A4\uD3FC Origin","transition.property.title":"CSS \uD2B8\uB79C\uC9C0\uC158","keyframe.property.title":"CSS \uD0A4\uD504\uB808\uC784","selector.property.title":"CSS \uC140\uB809\uD130","selector.property.none":"\uC120\uD0DD\uC790 \uC5C6\uC74C","perspective.property.title":"\uD22C\uC601(perspective)","perspective.origin.property.title":"\uD22C\uC601 \uC911\uC2EC\uC810","svg.item.property.title":"\uBCF4\uC774\uAE30","svg.item.property.isMotionPath":"\uBAA8\uC158 \uD328\uC2A4","svg.item.property.fill":"\uCC44\uC6B0\uAE30","svg.item.property.fillOpacity":"\uD22C\uBA85\uB3C4","svg.item.property.path":"\uD328\uC2A4","svg.item.property.polygon":"\uD3F4\uB9AC\uACE4","svg.item.property.totalLength":"\uC804\uCCB4 \uAE38\uC774","svg.item.property.fillRule":"\uCC44\uC6B0\uAE30 \uADDC\uCE59","svg.item.property.stroke":"\uC120","svg.item.property.strokeWidth":"\uC120 \uAD75\uAE30","svg.item.property.dashArray":"\uC810\uC120 \uAE38\uC774","svg.item.property.dashOffset":"\uC810\uC120 \uC704\uCE58","svg.item.property.lineCap":"\uC120 \uBAA8\uC591","svg.item.property.lineJoin":"\uACB9\uCE5C \uC120","svg.item.property.filter":"\uD544\uD130","svg.item.property.blend":"\uBE14\uB80C\uB4DC","border.editor.all":"\uC804\uCCB4","border.editor.width":"\uD06C\uAE30","border.editor.style":"\uC2A4\uD0C0\uC77C","border.editor.color":"\uC0C9","border.editor.top":"\uC704","border.editor.left":"\uC67C\uCABD","border.editor.right":"\uC624\uB978\uCABD","border.editor.bottom":"\uC544\uB798","border.radius.editor.topLeft":"\uC67C\uCABD \uC704","border.radius.editor.topRight":"\uC624\uB978\uCABD \uC704","border.radius.editor.bottomLeft":"\uC67C\uCABD \uC544\uB798","border.radius.editor.bottomRight":"\uC624\uB978\uCABD \uC544\uB798","boxshadow.editor.blur":"\uD750\uB9BC","boxshadow.editor.spread":"\uAE38\uC774","css.property.editor.properties":"\uC18D\uC131","offset.path.list.editor.path":"\uD328\uC2A4","offset.path.list.editor.totalLength":"\uC804\uCCB4 \uAE38\uC774","offset.path.list.editor.distance":"\uAC70\uB9AC","offset.path.list.editor.direction":"\uBC29\uD5A5","offset.path.list.editor.rotate":"\uD68C\uC804","svgfilter.select.editor.message.create":"\uC0C8\uB85C\uC6B4 SVG Filter \uB97C \uB9CC\uB4DC\uC138\uC694.","svgfilter.select.editor.message.select":"\uD544\uD130\uB97C \uC120\uD0DD\uD558\uC138\uC694.","fill.editor.message.click.image":"\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uACE0 \uC2F6\uC73C\uBA74 \uD504\uB9AC\uBDF0 \uC601\uC5ED\uC744 \uD074\uB9AD\uD558\uC138\uC694.","fill.editor.message.drag.position":"\uAC00\uC6B4\uB370 \uC704\uCE58\uB97C \uB4DC\uB798\uADF8 \uD574\uBCF4\uC138\uC694.","fill.editor.x1":"\uC2DC\uC791 X","fill.editor.x2":"\uB05D X","fill.editor.y1":"\uC2DC\uC791 Y","fill.editor.y2":"\uB05D Y","fill.editor.spread":"\uD655\uC0B0","fill.editor.offset":"\uC704\uCE58","fill.editor.cx":"\uC911\uC2EC\uC810 X","fill.editor.cy":"\uC911\uC2EC\uC810 Y","fill.editor.r":"\uB05D \uBC18\uC9C0\uB984","fill.editor.fx":"\uC2DC\uC791 X","fill.editor.fy":"\uC2DC\uC791 Y","fill.editor.fr":"\uC2DC\uC791 \uBC18\uC9C0\uB984","perspective.origin.editor.originX":"\uC911\uC2EC\uC810 X","perspective.origin.editor.originY":"\uC911\uC2EC\uC810 Y","path.manager.msg":"\uD3B8\uC9D1\uC744 \uC885\uB8CC\uD560 \uB54C\uB294 ESC \uD0A4\uB098 Enter \uD0A4\uB97C \uB204\uB974\uC138\uC694. \uB610\uB294 \uD654\uBA74\uC744 \uD074\uB9AD\uD558\uC2DC\uBA74 \uB429\uB2C8\uB2E4.","path.manager.mode.done":"\uC644\uB8CC","path.manager.mode.modify":"\uC810 \uD3B8\uC9D1","path.manager.mode.path":"\uC810 \uCD94\uAC00","path.manager.mode.warp":"\uC6CC\uD504","path.manager.mode.transform":"\uBCC0\uD615","path.manager.mode.reverse":"\uC21C\uC11C\uBCC0\uACBD","path.manager.mode.flipX":"X\uCD95 \uD68C\uC804","path.manager.mode.flipY":"Y\uCD95 \uD68C\uC804","path.manager.mode.flipOrigin":"\uC804\uCCB4 \uD68C\uC804","colorpicker.popup.title":"\uC0C9\uC0C1 \uC120\uD0DD","selector.popup.title":"\uC120\uD0DD\uC790 \uC18D\uC131","selector.popup.selector":"\uC120\uD0DD\uC790","background.image.position.popup.title":"\uBC30\uACBD \uD328\uD134","background.image.position.popup.size":"\uD06C\uAE30","background.image.position.popup.width":"\uB113\uC774","background.image.position.popup.height":"\uB192\uC774","background.image.position.popup.repeat":"\uBC18\uBCF5","background.image.position.popup.blend":"\uBE14\uB80C\uB4DC","background.image.position.popup.type.repeat":"\uBC18\uBCF5","background.image.position.popup.type.no-repeat":"\uBC18\uBCF5 \uC548\uD568","background.image.position.popup.type.repeat-x":"x\uCD95 \uBC18\uBCF5","background.image.position.popup.type.repeat-y":"y\uCD95 \uBC18\uBCF5","background.image.position.popup.type.space":"\uACF5\uBC31\uC720\uC9C0","background.image.position.popup.type.round":"\uBC18\uC62C\uB9BC","gradient.picker.popup.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8\uC640 \uC774\uBBF8\uC9C0","image.asset.property.title":"\uC774\uBBF8\uC9C0","video.asset.property.title":"\uBE44\uB514\uC624","color.asset.property.title":"\uC0C9","gradient.asset.property.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8","pattern.asset.property.title":"\uD328\uD134","svgfilter.asset.property.title":"SVG \uD544\uD130","inspector.tab.title.design":"\uB514\uC790\uC778","inspector.tab.title.component":"\uCEF4\uD3EC\uB10C\uD2B8 \uC18D\uC131","inspector.tab.title.transition":"\uC560\uB2C8\uBA54\uC774\uC158","inspector.tab.title.asset":"\uC5D0\uC14B \uAD00\uB9AC\uC790","inspector.tab.title.text":"\uD14D\uC2A4\uD2B8","inspector.tab.title.code":"\uCF54\uB4DC","inspector.tab.title.history":"\uAE30\uB85D","timeline.property.title":"\uD0C0\uC784\uB77C\uC778","timeline.property.resize":"\uD0C0\uC784\uB77C\uC778 \uB192\uC774\uB97C \uBCC0\uACBD\uD569\uB2C8\uB2E4. \uB4DC\uB798\uADF8 \uD574\uC8FC\uC138\uC694.","timeline.animation.property.title":"\uC560\uB2C8\uBA54\uC774\uC158","timeline.play.control.play":"\uD50C\uB808\uC774","timeline.play.control.pause":"\uBA48\uCDA4","timeline.play.control.first":"\uCC98\uC74C\uC73C\uB85C","timeline.play.control.prev":"\uC774\uC804\uC73C\uB85C","timeline.play.control.next":"\uB2E4\uC74C\uC73C\uB85C","timeline.play.control.last":"\uB9C8\uC9C0\uB9C9\uC73C\uB85C","timeline.play.control.direction":"\uBC29\uD5A5","timeline.play.control.speed":"\uC18D\uB825","timeline.play.control.repeat":"\uBC18\uBCF5","timeline.play.control.infinite":"\uBB34\uD55C","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"\uAC12","timeline.value.editor.time":"\uC2DC\uAC04","timeline.value.editor.timing":"\uD0C0\uC774\uBC0D \uD568\uC218","timeline.value.editor.offset.message":"Enter\uD0A4\uB97C \uC785\uB825\uD558\uBA74 \uC801\uC6A9\uB429\uB2C8\uB2E4.","svgfilter.popup.title":"SVG \uD544\uD130","css.item.rotate":"\uD68C\uC804","css.item.rotateX":"X\uCD95 \uD68C\uC804","css.item.rotateY":"Y\uCD95 \uD68C\uC804","css.item.rotateZ":"Z\uCD95 \uD68C\uC804","css.item.rotate3d":"3D \uD68C\uC804","css.item.skewX":"X\uCD95 \uB298\uC774\uAE30","css.item.skewY":"Y\uCD95 \uB298\uC774\uAE30","css.item.translate":"\uC774\uB3D9","css.item.translateX":"X\uCD95 \uC774\uB3D9","css.item.translateY":"Y\uCD95 \uC774\uB3D9","css.item.translateZ":"Z\uCD95 \uC774\uB3D9","css.item.translate3d":"3D \uC774\uB3D9","css.item.perspective":"\uC6D0\uADFC","css.item.scale":"\uD06C\uAE30\uBCC0\uACBD","css.item.scaleX":"X\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleY":"Y\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleZ":"Z\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scale3d":"3D \uD06C\uAE30\uBCC0\uACBD","css.item.matrix":"\uBCC0\uD658 \uD589\uB82C","css.item.matrix3d":"3D \uBCC0\uD658 \uD589\uB82C","animation.property.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.direction":"\uBC29\uD5A5","animation.property.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.duration":"\uC2DC\uAC04","animation.property.iteration.count":"\uBC18\uBCF5 \uD69F\uC218","animation.property.select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694","animation.property.popup.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.popup.timing.function":"\uD0C0\uC774\uBC0D \uD568\uC218","animation.property.popup.keyframe":"\uD0A4\uD504\uB808\uC784","animation.property.popup.direction":"\uBC29\uD5A5","animation.property.popup.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.popup.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.popup.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.popup.duration":"\uC2DC\uAC04","animation.property.popup.iteration":"\uBC18\uBCF5 \uD69F\uC218","animation.property.popup.normal":"\uC2DC\uAC04\uC21C","animation.property.popup.reverse":"\uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.alternate":"\uC655\uBCF5 \uC2DC\uAC04\uC21C","animation.property.popup.alternate-reverse":"\uC655\uBCF5 \uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.","keyframe.popup.title":"\uD0A4\uD504\uB808\uC784","code.view.property.title":"\uCF54\uB4DC\uBDF0","svg.filter.editor.tab.filter":"\uD544\uD130","svg.filter.editor.tab.preset":"\uD504\uB9AC\uC14B","svg.filter.editor.tab.asset":"\uC5D0\uC14B","svg.filter.editor.GRAPHIC REFERENCES":"\uCC38\uC870 \uADF8\uB798\uD53D","svg.filter.editor.SOURCES":"\uC6D0\uBCF8","svg.filter.editor.MODIFIER":"\uC218\uC815","svg.filter.editor.LIGHTING":"\uBE5B","svg.filter.editor.COMBINERS":"\uACB0\uD569","svg.filter.editor.Template":"\uD15C\uD50C\uB9BF","layout.property.title":"\uB808\uC774\uC544\uC6C3","layout.property.flex":"\uD50C\uB809\uC2A4 \uBC15\uC2A4","layout.property.grid":"\uADF8\uB9AC\uB4DC","layout.property.default":"\uAE30\uBCF8 \uC88C\uD45C","layout.property.resizing.title":"\uC0AC\uC774\uC988 \uC870\uC808","layout.property.resizing.self.title":"\uC544\uC774\uD15C \uC0AC\uC774\uC988 \uC870\uC808","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"\uD589","flex.layout.editor.column":"\uC5F4","flex.layout.editor.row-reverse":"\uC5ED\uBC29\uD5A5 \uD589","flex.layout.editor.column-reverse":"\uC5ED\uBC29\uD5A5 \uC5F4","flex.layout.editor.nowrap":"\uAC10\uC2F8\uC9C0 \uC54A\uAE30","flex.layout.editor.wrap":"\uAC10\uC2F8\uAE30","flex.layout.editor.wrap-reverse":"\uC5ED\uBC29\uD5A5 \uAC10\uC2F8\uAE30","flex.layout.editor.flex-start":"\uC2DC\uC791","flex.layout.editor.flex-end":"\uB05D","flex.layout.editor.center":"\uC911\uAC04","flex.layout.editor.space-between":"\uACF5\uAC04 \uC911\uAC04 \uCC44\uC6C0","flex.layout.editor.space-around":"\uACF5\uAC04 \uC591\uB05D \uCC44\uC6C0","flex.layout.editor.baseline":"\uAE30\uBCF8\uC120","flex.layout.editor.stretch":"\uD3BC\uCE58\uAE30","flex.layout.editor.direction":"\uBC29\uD5A5","flex.layout.editor.justify-content":"\uCEE8\uD150\uCE20 \uC870\uC815","flex.layout.editor.align-items":"\uC544\uC774\uD15C \uC815\uB82C","flex.layout.editor.align-content":"\uCEE8\uD150\uCE20 \uC815\uB82C","flex.layout.item.property.title":"\uD50C\uB809\uC2A4 \uC544\uC774\uD15C \uC124\uC815","flex.layout.item.property.grow":"\uACF5\uAC04 \uBE44\uC728","flex.layout.item.property.shrink":"\uCD95\uC18C \uBE44\uC728","flex.layout.item.property.basis":"\uCD08\uAE30 \uD06C\uAE30","flex.layout.item.property.none":"\uC5C6\uC74C","flex.layout.item.property.auto":"\uC790\uB3D9","flex.layout.item.property.value":"\uAC12","grid.layout.editor.template.columns":"\uC5F4","grid.layout.editor.column.gap":"\uC5F4 \uAC04\uACA9","grid.layout.editor.template.rows":"\uD589","grid.layout.editor.row.gap":"\uD589 \uAC04\uACA9","grid.box.editor.box.title":"\uC601\uC5ED","grid.box.editor.type":"\uD0C0\uC785","grid.box.editor.repeat":"\uBC18\uBCF5","grid.box.editor.length":"\uAE38\uC774","grid.box.editor.none":"\uC5C6\uC74C","grid.box.editor.auto":"\uC790\uB3D9","grid.box.editor.count":"\uAC1C\uC218","grid.box.editor.value":"\uD06C\uAE30","grid.layout.item.property.title":"\uADF8\uB9AC\uB4DC \uC544\uC774\uD15C \uC124\uC815","grid.layout.item.property.column":"\uC5F4","grid.layout.item.property.row":"\uD589","grid.layout.item.property.start":"\uC2DC\uC791","grid.layout.item.property.End":"\uB05D","grid.layout.item.property.none":"\uC5C6\uC74C","grid.layout.item.property.value":"\uAC12","box.model.property.title":"\uBC15\uC2A4 \uBAA8\uB378","box.model.property.margin":"\uB9C8\uC9C4","box.model.property.padding":"\uD328\uB529","component.items.canvas":"\uCE94\uBC84\uC2A4","component.items.layer":"\uB808\uC774\uC5B4","component.items.3dlayer":"3D \uB808\uC774\uC5B4","component.items.drawing":"\uADF8\uB9AC\uAE30","component.items.custom":"\uC0AC\uC6A9\uC790 \uC815\uC758 \uCEF4\uD3EC\uB10C\uD2B8","component.items.chart":"\uCC28\uD2B8","component.items.plugin":"\uD50C\uB7EC\uADF8\uC778","svg.text.property.title":"SVG Text \uC2A4\uD0C0\uC77C","svg.text.property.textarea":"\uD14D\uC2A4\uD2B8 \uC785\uB825","svg.text.property.size":"\uD3F0\uD2B8 \uD06C\uAE30","svg.text.property.weight":"\uD3F0\uD2B8 \uAD75\uAE30","svg.text.property.style":"\uD3F0\uD2B8 \uC2A4\uD0C0\uC77C","svg.text.property.anchor":"\uD14D\uC2A4\uD2B8 \uC704\uCE58","svg.text.property.family":"\uD3F0\uD2B8 \uAE00\uAF34","svg.text.property.length.adjust":"\uAE38\uC774 \uB300\uC751","svg.text.property.text.length":"\uD14D\uC2A4\uD2B8 \uAE38\uC774","svg.text.property.start.offset":"\uC2DC\uC791 \uC9C0\uC810","fill.picker.popup.title":"\uC0C9 \uCC44\uC6B0\uAE30","gradient.editor.drag.message":"\uB4DC\uB798\uADF8 \uD558\uBA74 \uC911\uC2EC\uC810\uC744 \uC62E\uAE38 \uC218 \uC788\uC2B5\uB2C8\uB2E4.","draw.manager.tolerance":"\uD3EC\uC778\uD2B8 \uD5C8\uC6A9 \uC624\uCC28","pattern.property.title":"\uD328\uD134","pattern.info.popup.title":"\uD328\uD134 \uC815\uBCF4","pattern.info.popup.width":"\uB113\uC774","pattern.info.popup.height":"\uB192\uC774","pattern.info.popup.lineWidth":"\uC120 \uB113\uC774","pattern.info.popup.lineHeight":"\uC120 \uB192\uC774","pattern.info.popup.rotate":"\uD68C\uC804","pattern.info.popup.blend":"\uBE14\uB80C\uB4DC","pattern.info.popup.foreColor":"\uD328\uD134\uC0C9","pattern.info.popup.backColor":"\uBC30\uACBD\uC0C9","stroke.dasharray.editor.add":"\uC810 \uCD94\uAC00","viewport.panning.enable":"space \uB97C \uB204\uB978\uCC44 \uD654\uBA74\uC744 \uB4DC\uB798\uADF8 \uD558\uBA74 \uC601\uC5ED\uC744 \uC6C0\uC9C1\uC77C \uC218 \uC788\uC2B5\uB2C8\uB2E4."},Kd={en_US:IP,fr_FR:EP,ko_KR:LP};function Zd(s){Object.keys(Kd).forEach(function(e){s.registerI18nMessage(e,Kd[e])})}var X7="";const qr={HORIZONTAL:"constraints-horizontal",VERTICAL:"constraints-vertical"},Me={NONE:"none",MIN:"min",MAX:"max",STRETCH:"stretch",SCALE:"scale",CENTER:"center"},Qr={DIFFERENCE:"difference",INTERSECTION:"intersection",UNION:"union",REVERSE_DIFFERENCE:"reverse-difference",XOR:"xor"},yo={BUTT:"butt",ROUND:"round",SQUARE:"square"},la={MITER:"miter",ROUND:"round",BEVEL:"bevel"},Wt={NORMAL:"normal",MULTIPLY:"multiply",SCREEN:"screen",OVERLAY:"overlay",DARKEN:"darken",LIGHTEN:"lighten",COLOR_DODGE:"color-dodge",COLOR_BURN:"color-burn",HARD_LIGHT:"hard-light",SOFT_LIGHT:"soft-light",DIFFERENCE:"difference",EXCLUSION:"exclusion",HUE:"hue",SATURATION:"saturation",COLOR:"color",LUMINOSITY:"luminosity"},bo={NONE:"none",UNDERLINE:"underline",OVERLINE:"overline",LINE_THROUGH:"line-through",BLINK:"blink"},xo={NONE:"none",CAPITALIZE:"capitalize",UPPERCASE:"uppercase",LOWERCASE:"lowercase"},qd={START:"start",END:"end",LEFT:"left",RIGHT:"right",CENTER:"center",JUSTIFY:"justify"},ca={VISIBLE:"visible",HIDDEN:"hidden",SCROLL:"scroll",AUTO:"auto"},Jr={NONE:"none",HIDDEN:"hidden",DOTTED:"dotted",DASHED:"dashed",SOLID:"solid",DOUBLE:"double",GROOVE:"groove",RIDGE:"ridge",INSET:"inset",OUTSET:"outset"},VP={NONE:"none",PERSPECTIVE:"perspective",TRANSLATE:"translate",TRANSLATE_X:"translateX",TRANSLATE_Y:"translateY",TRANSLATE_Z:"translateZ",TRANSLATE_3D:"translate3d",SCALE:"scale",SCALE_X:"scaleX",SCALE_Y:"scaleY",SCALE_Z:"scaleZ",SCALE_3D:"scale3d",ROTATE:"rotate",ROTATE_X:"rotateX",ROTATE_Y:"rotateY",ROTATE_Z:"rotateZ",SKEW:"skew",SKEW_X:"skewX",SKEW_Y:"skewY",MATRIX:"matrix",MATRIX_3D:"matrix3d"},Ae={DEFAULT:"default",FLEX:"flex",GRID:"grid"},Zt={ROW:"row",ROW_REVERSE:"row-reverse",COLUMN:"column",COLUMN_REVERSE:"column-reverse"},Cs={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},vi={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",BASELINE:"baseline",STRETCH:"stretch"},Qd={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},Ua={NOWRAP:"nowrap",WRAP:"wrap",WRAP_REVERSE:"wrap-reverse"},Ce={FIXED:"fixed",HUG_CONTENT:"hug-content",FILL_CONTAINER:"fill-container"},Wa={NONE:"none",TEXT:"text"},Ir={OUTSET:"outset",INSET:"inset"},F={STATIC:"static-gradient",LINEAR:"linear-gradient",RADIAL:"radial-gradient",CONIC:"conic-gradient",REPEATING_LINEAR:"repeating-linear-gradient",REPEATING_RADIAL:"repeating-radial-gradient",REPEATING_CONIC:"repeating-conic-gradient",IMAGE:"image",URL:"url"},Pr={CLOSEST_SIDE:"closest-side",CLOSEST_CORNER:"closest-corner",FARTHEST_SIDE:"farthest-side",FARTHEST_CORNER:"farthest-corner"},bt={CIRCLE:"circle",ELLIPSE:"ellipse"},qt={NONE:"none",CIRCLE:"circle",ELLIPSE:"ellipse",POLYGON:"polygon",INSET:"inset",PATH:"path",SVG:"svg"},Er={VISIBLE:"visible",HIDDEN:"hidden"},ue={LINEAR:"linear",EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",STEPS:"steps",CUBIC_BEZIER:"cubic-bezier",PATH:"path"},mr={PAD:"pad",REFLECT:"reflect",REPEAT:"repeat"},Xe={COMMA:"comma",COLOR:"color",LENGTH:"length",GRADIENT:"gradient",TIMING:"timing",KEYWORD:"keyword",STRING:"string",NUMBER:"number",BOOLEAN:"boolean",FUNCTION:"function",PATH:"path",URL:"url",REPEAT:"repeat",UNKNOWN:"unknown"},Jd={MOVETO:"M",LINETO:"L",CURVETO:"C",QUARDTO:"Q",ARCTO:"A",CLOSEPATH:"Z",UNKNOWN:"unknown"},yi={TO_TOP:"to top",TO_RIGHT:"to right",TO_BOTTOM:"to bottom",TO_LEFT:"to left",TO_TOP_LEFT:"to top left",TO_TOP_RIGHT:"to top right",TO_BOTTOM_LEFT:"to bottom left",TO_BOTTOM_RIGHT:"to bottom right"},OP={1:yi.TO_TOP_LEFT,2:yi.TO_TOP_RIGHT,3:yi.TO_BOTTOM_LEFT,4:yi.TO_BOTTOM_RIGHT,11:yi.TO_TOP,12:yi.TO_RIGHT,13:yi.TO_BOTTOM,14:yi.TO_LEFT},Lr={APPEND_CHILD:"appendChild",INSERT_BEFORE:"insertBefore",INSERT_AFTER:"insertAfter"};class ic extends Y{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(n=>typeof n=="string"?{value:n,text:n}:n):(this.props.options||"").split(e).map(n=>n.trim()).map(n=>{const[o,l]=n.split(":");return{value:o,text:l||o}}),r=this.props.value,i=this.props.tabindex,a=this.props.title;return{splitChar:e,label:this.props.label||"",title:a,options:t,value:r,tabIndex:i}}getOptionString(){var e=this.state.options.map(t=>{var r=t.value,i=t.text||t.value;i===""?i=this.props["none-value"]?this.props["none-value"]:"":i==="-"&&(i="----------",r="");var a=r===this.state.value?"selected":"";const n=t.disabled?"disabled":"";return``});return e.join("")}template(){var{label:e,title:t,tabIndex:r,value:i=Wt.NORMAL}=this.state,a=e?"has-label":"",n=r?'tabIndex="1"':"",o=this.props.compact?"compact":"";return oe[e]&&(e=z(e)),` +
      ${e?``:""}
      - ${this.getOptionString()}
      - ${r} - ${re("expand_more")} + ${i} + ${z("expand_more")}
      - `}getValue(){return this.refs.$options.value}setValue(e){this.refs.$options.val(this.state.value),this.setState({value:e+""})}[$e("$options")](){return{"data-count":this.state.options.length.toString()}}[$e("$selectedValue")](){var e;return{text:(e=this.state.options.find(t=>t.value===this.state.value))==null?void 0:e.text}}[yn("$options")](){this.updateData({value:this.refs.$options.value}),this.bindData("$selectedValue")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}const sA=[hr.NORMAL,hr.MULTIPLY,hr.SCREEN,hr.OVERLAY,hr.DARKEN,hr.LIGHTEN,hr.COLOR_DODGE,hr.COLOR_BURN,hr.HARD_LIGHT,hr.SOFT_LIGHT,hr.DIFFERENCE,hr.EXCLUSION,hr.HUE,hr.SATURATION,hr.COLOR,hr.LUMINOSITY];class aA extends Kf{getBlendList(){return sA.map(e=>({value:e,text:this.$i18n(`blend.${e}`)}))}initState(){return Ve(P({},super.initState()),{options:this.getBlendList()})}}var eie="";const uy={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)",currentColor:"currentColor"};function oA(n){return!!uy[n]}function lA(n){return uy[n]}var Jd={isColorName:oA,getColorByName:lA};function Qd(n){return Math.pow(n,3)>.008856?Math.pow(n,3):(n-16/116)/7.787}function eu(n){return n>.0031308?1.055*Math.pow(n,1/2.4)-.055:12.92*n}function py(n,e,t){if(arguments.length==1)var{x:n,y:e,z:t}=arguments[0];let i=n/100,r=e/100,s=t/100,a=i*3.2406+r*-1.5372+s*-.4986,o=i*-.9689+r*1.8758+s*.0415,l=i*.0557+r*-.204+s*1.057;a=eu(a),o=eu(o),l=eu(l);const c=Bt(a*255),h=Bt(o*255),d=Bt(l*255);return{r:c,g:h,b:d}}function fy(n,e,t){if(arguments.length==1)var{l:n,a:e,b:t}=arguments[0];let i=(n+16)/116,r=e/500+i,s=i-t/200;i=Qd(i),r=Qd(r),s=Qd(s);const a=r*95.047,o=i*100,l=s*108.883;return{x:a,y:o,z:l}}function tu(n){return n>.008856?Math.pow(n,1/3):(7.787*n+16)/116}function gy(n,e,t){if(arguments.length==1)var{x:n,y:e,z:t}=arguments[0];let i=n/95.047,r=e/100,s=t/108.883;i=tu(i),r=tu(r),s=tu(s);const a=116*r-16,o=500*(i-r),l=200*(r-s);return{l:a,a:o,b:l}}function cA(n,e,t){if(arguments.length==1)var{l:n,a:e,b:t}=arguments[0];return py(fy(n,e,t))}function Gc(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];const i=n/255,r=e/255,s=t/255,a=Math.max(i,r,s),o=Math.min(i,r,s),l=a-o;var c=0;l==0?c=0:a==i?c=60*((r-s)/l%6):a==r?c=60*((s-i)/l+2):a==s&&(c=60*((i-r)/l+4)),c<0&&(c=360+c);var h=0;a==0?h=0:h=l/a;var d=a;return{h:c,s:h,v:d}}function hA(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];const i=n/255,r=e/255,s=t/255,a=1-Math.max(i,r,s),o=(1-i-a)/(1-a),l=(1-r-a)/(1-a),c=(1-s-a)/(1-a);return{c:o,m:l,y:c,k:a}}function Cs(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];n/=255,e/=255,t/=255;var i=Math.max(n,e,t),r=Math.min(n,e,t),s,a,o=(i+r)/2;if(i==r)s=a=0;else{var l=i-r;switch(a=o>.5?l/(2-i-r):l/(i+r),i){case n:s=(e-t)/l+(e90?0:255)}function iu(n){return{r:n,g:n,b:n}}function uA(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];return iu(Math.ceil((n+e+t)/3))}function pA(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];return iu(vy(n,e,t).y)}function my(n,e,t){return Math.ceil(n*.2126+e*.7152+t*.0722)}function vy(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];const i=my(n,e,t),r=.564*(t-i),s=.713*(n-i);return{y:i,cr:s,cb:r}}function ru(n){return(n>.04045?Math.pow((n+.055)/1.055,2.4):n/12.92)*100}function yy(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];let i=n/255,r=e/255,s=t/255;i=ru(i),r=ru(r),s=ru(s);const a=i*.4124+r*.3576+s*.1805,o=i*.2126+r*.7152+s*.0722,l=i*.0193+r*.1192+s*.9505;return{x:a,y:o,z:l}}function fA(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];return gy(yy(n,e,t))}function nu(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+(e-n)*6*t:t<1/2?e:t<2/3?n+(e-n)*(2/3-t)*6:n}function by(n,e,t){if(arguments.length==1)var{h:n,s:e,l:t}=arguments[0];const i=Hc(n,e,t);return Gc(i.r,i.g,i.b)}function Hc(n,e,t){if(arguments.length==1)var{h:n,s:e,l:t}=arguments[0];var i,r,s;if(n/=360,e/=100,t/=100,e==0)i=r=s=t;else{var a=t<.5?t*(1+e):t+e-t*e,o=2*t-a;i=nu(o,a,n+1/3),r=nu(o,a,n),s=nu(o,a,n-1/3)}return{r:Bt(i*255),g:Bt(r*255),b:Bt(s*255)}}const gA=/(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_-]+))/gi;function su(n,e="@"){return`${e}${n.startIndex}`.padEnd(10,"0")}function xy(n){return!!qf(n).length}function qf(n){const e=n.match(gA);let t=[];if(!e)return t;for(var i=0,r=e.length;i-1||e[i].indexOf("rgb")>-1||e[i].indexOf("hsl")>-1)t.push({color:e[i]});else{var s=Jd.getColorByName(e[i]);s&&t.push({color:e[i],nameColor:s})}var a={next:0};return t.forEach(o=>{const l=n.indexOf(o.color,a.next);o.startIndex=l,o.endIndex=l+o.color.length,a.next=o.endIndex}),t}function ga(n,e="@"){const t=qf(n);return t.forEach(i=>{n=n.replace(i.color,su(i,e))}),{str:n,matches:t}}function Zf(n,e=","){const t=ga(n);return t.str.split(e).map((i,r)=>(i=Es(i),t.matches[r]&&(i=i.replace(su(t.matches[r]),t.matches[r].color)),i))}function vl(n,e){return e.forEach(t=>{n=n.replace(su(t),t.color)}),n}const mA=/^\s+|\s+$/g;function Es(n){return n.replace(mA,"")}function bi(n){if(ni(n)){if(Jd.isColorName(n)&&(n=Jd.getColorByName(n)),n.indexOf("rgb(")>-1){for(var e=n.replace("rgb(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("rgba(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("hsl(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("hsla(","").replace(")","").split(","),t=0,i=e.length;t>16,l=(n&65280)>>8,c=(n&255)>>0;var r={type:"hex",r:o,g:l,b:c,a:1};return r=P(P({},r),Cs(r)),r}else if(0<=n&&n<=4294967295){const o=(n&4278190080)>>24,l=(n&16711680)>>16,c=(n&65280)>>8,h=(n&255)/255;var r={type:"hex",r:o,g:l,b:c,a:h};return r=P(P({},r),Cs(r)),r}}return n}function _y(n){ni(n)&&(n=Zf(n)),n=n.map(t=>{if(ni(t)){const i=ga(t);let r=Es(i.str).split(" ");return r[1]?r[1].indexOf("%")>-1?r[1]=parseFloat(r[1].replace(/%/,""))/100:r[1]=parseFloat(r[1]):r[1]="*",r[0]=vl(r[0],i.matches),r}else if(Array.isArray(t))return t[1]?ni(t[1])&&(t[1].indexOf("%")>-1?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[...t]});const e=n.filter(t=>t[1]==="*").length;if(e>0){const t=n.filter(r=>r[1]!="*"&&r[1]!=1).map(r=>r[1]).reduce((r,s)=>r+s,0),i=(1-t)/e;n.forEach((r,s)=>{r[1]=="*"&&s>0&&(n.length-1==s||(r[1]=i))})}return n}const vA=()=>!0;function Jf(n,e=vA){var t=[];let i=n.layers.length;for(let r=i;r--;){let s=n.layers[r];t.push(...Jf(s.ref,e))}return e(n)&&t.push(n),t}class Qf{constructor(e={}){return this.ref=new Proxy(this,{get:(t,i)=>{var r=t[i];return Ue(r)?(...s)=>r.apply(t,s):r||t.json[i]},set:(t,i,r)=>(t.json[i]!=r&&(t.json[i]=r,this.changed()),!0)}),e instanceof Qf&&(e=e.toJSON()),this.json=this.convert(Object.assign(this.getDefaultObject(),e)),this.lastChangedField={},this.lastChangedFieldKeys=[],this.cachedValue={},this.ref}getDefaultTitle(){return"Item"}getIcon(){return""}isAttribute(){return!1}isChanged(e){return this.json.timestamp!=Number(e)}changed(){this.json.timestamp=this.json._timestamp+window.performance.now()}get title(){return this.json.name||this.getDefaultTitle()}renameWithCount(){let e=this.json.name.split(" ");if(e.length<2)return;let t=e.pop(),i=+t;_i(i)&&isNaN(i)===!1?i++:i=t;const r=[...e,i].join(" ");this.reset({name:r})}get allLayers(){return Jf(this.ref)}filteredAllLayers(e){return Jf(this.ref,e)}get id(){return this.json.id}get layers(){return this.json.layers}get parent(){return this.json.parent}setParent(e){this.json.parent=e}get depth(){return this.parent?this.parent.depth+1:1}get top(){if(!this.parent)return this.ref;let e=this.parent;do{if(!e.parent)return e;e=e.parent}while(e)}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){if(!this.parent)return[this.ref];const e=this.parent.path;return e.push(this.ref),e}getInnerId(e=""){return this.json.id+e}is(e){return this.json?e===this.json.itemType:!1}isNot(e){return this.is(e)===!1}isSVG(){return!1}addCache(e,t){this.cachedValue[e]=t}getCache(e){return this.cachedValue[e]}computed(e,t){const r=`${`__cachedKey_${e}`}__parseValue`,s=this.json[e];return this.getCache(e)===s&&this.getCache(r)?this.getCache(r):(this.addCache(e,s),this.addCache(r,t(s,this.ref)),this.getCache(r))}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e){return e.layers&&e.layers.forEach(t=>{t.parent=this.ref}),e}setCache(){}toCloneObject(e=!0){var t=this.attrs("itemType","name","elementType","type","visible","lock","selected");return e&&(t.layers=this.json.layers.map(i=>i.clone(e))),t}clone(e=!0){var t=this.constructor,i=new t(this.toCloneObject(e));return i.setParent(this.json.parent),i}reset(e){return e.__changedId||(e.__changedId=ho()),this.lastChangedField.__changedId!==e.__changedId&&(this.json=this.convert(Object.assign(this.json,e)),this.lastChangedField=e,this.lastChangedFieldKeys=Object.keys(e),this.changed()),!0}hasChangedField(...e){return e.some(t=>this.lastChangedFieldKeys.includes(t))}getDefaultObject(e={}){var t=Zr();return P({id:t,_timestamp:Date.now(),_time:window.performance.now(),visible:!0,lock:!1,selected:!1,layers:[]},e)}attrs(...e){const t={};return e.forEach(i=>{t[i]=rt(this.json[i])}),t}hasChildren(){return this.layers.length>0}appendChild(e){return e.parent===this.ref||(this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.push(e),this.project.addIndexItem(e)),e}prependChildItem(e){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.unshift(e),this.project.addIndexItem(e),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.splice(t,0,e),this.project.addIndexItem(e),e}insertAfter(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t),this.project.addIndexItem(e),e}insertBefore(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t-1),this.project.addIndexItem(e),e}setPositionInPlace(e,t){this.layers.splice(e,0,t)}toggle(e,t){Di(t)?this.json[e]=!this.json[e]:this.json[e]=!!t}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!(e==="parent"||Di(this.json[e]))}toJSON(){const e=this.json;let t={};return Object.keys(e).filter(i=>this.expectJSON(i)).forEach(i=>{t[i]=e[i]}),t}resize(){}copy(e=0){return this.json.parent.copyItem(this.ref,e)}findIndex(e){return this.json.layers.indexOf(e.ref)}copyItem(e,t=10){var i=e.clone();i.renameWithCount(),i.move([t,t,0]);var r=this.findIndex(e);return r>-1&&(this.json.layers.push(i),this.project.addIndexItem(i)),i}remove(){this.json.parent.removeChild(this.ref),this.project.removeIndexItem(this.ref)}removeChild(e){const t=this.findIndex(e);t>-1&&this.json.layers.splice(t,1)}hasParent(e){var t=this.json.parent.id===e;return!t&&this.json.parent.is("project")===!1?this.json.parent.hasParent(e):t}}const yA=1e3,Uc=new Map;class eg{static has(e){return Uc.has(e)}static get(e){return Uc.get(e)}static set(e,t){Uc.size>yA&&Uc.clear(),Uc.set(e,t)}}class Sn{static parseStyle(e="50% 50% 0px"){if(eg.has(e))return eg.get(e);const t=e.trim().split(" ").filter(r=>r.trim());let i=null;return t.length===1?i=[t[0],t[0]].map(r=>y.parse(r)):i=t.map(r=>y.parse(r)),eg.set(e,i),i}static scale(e,t,i){let r=Sn.parseStyle(e);if(t===0&&i===0)return[0,0,0];const s=r[0].toPx(t).value,a=r[1].toPx(i).value,o=r[2].value;return[s,a,o]}static toPx(e,t,i,r=0){let[s,a,o]=Sn.parseStyle(e);return s=s.toPx(t),a=a.toPx(i),o=o.toPx(r),`${s} ${a} ${o}`}}function bA(n,e,t,i,r,s,a,o){return n+t>=r&&n<=r+a&&e+i>=s&&e<=s+o}class Sy{constructor(e,t,i,r){this.x=e,this.y=t,this.width=i,this.height=r}get left(){return this.x}get right(){return this.x+this.width}get top(){return this.y}get bottom(){return this.y+this.height}get centerX(){return this.x+this.width/2}get centerY(){return this.y+this.height/2}get center(){return[this.centerX,this.centerY]}get topLeft(){return[this.left,this.top]}get topRight(){return[this.right,this.top]}get bottomLeft(){return[this.left,this.bottom]}get bottomRight(){return[this.right,this.bottom]}get vertices(){return[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight]}intersect(e){return tg(this,e)}}function tg(n,e){const t=Math.min(n.x,e.x),i=Math.min(n.y,e.y),r=Ei(n.x-t,n.y-i,n.width,n.height),s=Ei(e.x-t,e.y-i,e.width,e.height),a=[Math.max(r[0][0],s[0][0]),Math.max(r[0][1],s[0][1]),Math.max(r[0][2],s[0][2])],o=[Math.min(r[2][0],s[2][0]),Math.min(r[2][1],s[2][1]),Math.min(r[2][2],s[2][2])],l=Math.min(a[0],o[0]),c=Math.min(a[1],o[1]),h=Math.max(a[0],o[0]),d=Math.max(a[1],o[1]);return new Sy(l+t,c+i,h-l,d-c)}function Wc(n,e,t,i,r,s,a=.1){const o=Math.hypot(r-n,s-e),l=Math.hypot(r-t,s-i),c=Math.hypot(n-t,e-i),h=o+l;return h>=c-a&&h<=c+a}function wy(n,e,t,i,r,s,a,o){let l=((a-r)*(e-s)-(o-s)*(n-r))/((o-s)*(t-n)-(a-r)*(i-e)),c=((t-n)*(e-s)-(i-e)*(n-r))/((o-s)*(t-n)-(a-r)*(i-e));return 0<=l&&l<=1&&0<=c&&c<=1}function xA(n,e,t,i,r,s,a,o,l=.1){return Wc(n,e,t,i,r,s)||Wc(n,e,t,i,a,o)?!0:Wc(r,s,a,o,n,e)?[n,e]:Wc(r,s,a,o,t,i)?[t,i]:wy(n,e,t,i,r,s,a,o)}function po(n=[],e,t,i=!1){let r=!1;const s=n.length;if(i===!1)for(let a=0;a{const[l,c]=a,[h,d]=n[(o+1)%s];(c>=t&&d=t)&&e<(h-l)*(t-c)/(d-c)+l&&(r=!r)}),r)}function _A(n=[],e,t,i,r,s=!1){const a=n.length;return n.some((o,l)=>{const[c,h]=o,[d,u]=n[(l+1)%a];return s?wy(e,t,i,r,c,h,d,u):xA(e,t,i,r,c,h,d,u)})}function ig(n=[],e=[],t=!1){const i=n.length;return n.some((r,s)=>{const[a,o]=r,[l,c]=n[(s+1)%i];let h=_A(e,a,o,l,c,t);return!!(h||(h=po(n,e[0][0],e[0][1],t),h))})}function Ei(n,e,t,i,r="50% 50% 0px"){const s=Sn.scale(r,t,i);return[[n,e,0],[n+t,e,0],[n+t,e+i,0],[n,e+i,0],[n+s[0],e+s[1],0]]}function au(n,e=0){const t=Ae([],n[0],n[1],.5),i=Ae([],n[2],n[3],.5);return Sk(i,t,e)}function SA(n,e,t,i){return Ei(n,e,t,i)}function Xc(n=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{o.originVerties.forEach(l=>{s.push(l[0]),a.push(l[1])})}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),Ei(e,t,i-e,r-t)}function wA(n=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{o.targetVerties.forEach(l=>{s.push(l[0]),a.push(l[1])})}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),Ei(e,t,i-e,r-t)}function Zi(n){const e=n[0][0],t=n[0][1],i=Ne(n[0],n[1]),r=Ne(n[0],n[3]);return new Sy(e,t,i,r)}function ma(n=[]){const e=[];for(var t=0;tt<4)}function wn(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{s.push(o[0]),a.push(o[1])}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),Ei(e,t,i-e,r-t)}const MA={linear:!0,ease:!0,"ease-in":!0,"ease-out":!0,"ease-in-out":!0},$A={ease:"cubic-bezier(0.25, 0.1, 0.25, 1)","ease-in":"cubic-bezier(0.42, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.58, 1)"},va=[[0,0,1,1,"linear",!0],[.25,.1,.25,1,"ease",!0],[.42,0,1,1,"ease-in",!0],[0,0,.58,1,"ease-out",!0],[.47,0,.745,.715,"ease-in-sine"],[.39,.575,.565,1,"ease-out-sine"],[.445,.05,.55,.95,"ease-in-out-sine"],[.55,.085,.68,.53,"ease-in-quad"],[.25,.46,.45,.94,"ease-out-quad"],[.455,.03,.515,.955,"ease-in-out-quad"],[.55,.055,.675,.19,"ease-in-cubic"],[.215,.61,.355,1,"ease-out-cubic"],[.645,.045,.355,1,"ease-in-out-cubic"],[.895,.03,.685,.22,"ease-in-quart"],[.165,.84,.44,1,"ease-out-quart"],[.77,0,.175,1,"ease-in-out-quart"],[.6,.04,.98,.335,"ease-in-circ"],[.075,.82,.165,1,"ease-out-circ"],[.785,.135,.15,.86,"ease-in-out-circ"],[.95,.05,.795,.035,"ease-in-expo"],[.19,1,.22,1,"ease-out-expo"],[1,0,0,1,"ease-in-out-expo"],[.755,.05,.855,.06,"ease-in-quint"],[.23,1,.32,1,"ease-out-quint"],[.86,0,.07,1,"ease-in-out-quint"],[.6,-.28,.735,.045,"ease-in-back"],[.175,.885,.32,1.275,"ease-out-back"],[.68,-.55,.265,1.55,"ease-in-out-back"]],fo=n=>[...Py($A[n]||n)],$y=n=>{n=n.map(r=>Math.floor(r*100)/100);for(var e=0,t=va.length;es<4).join(",")} )`};function Py(n){if(typeof n=="string"){if(MA[n])return va.filter(t=>t[4]===n)[0];var e=n.replace("cubic-bezier","").replace("(","").replace(")","").split(",");return e=e.map(t=>parseFloat(t.trim())),e}return n}const ou=(n,e,t,i)=>{var r=[n,e,t,i];return function(s){return lu(r,s)}},Ty=(n,e,t)=>{var i=[n,e,t];return function(r){return Iy(i,r)}},Cy=(n,e)=>{var t=[n,e];return function(i){return TA(t,i)}},rg=(n,e,t,i,r)=>{var s=e(t),a=Rr(i,r,s.x,s.y);a{let e=0;return n.forEach((t,i)=>{var r=n[i+1];if(!!r){var s=Ne(Ct(t.x,t.y,0),Ct(r.x,r.y,0));e+=s}}),e},Yc=(n,e,t,i,r,s,a,o,l=1e3)=>{for(var c=ou({x:n,y:e},{x:t,y:i},{x:r,y:s},{x:a,y:o}),h=0,d=c(0),u=0;u<=l;u++){var p=u/l,f=c(p);h+=Rr(d.x,d.y,f.x,f.y),d=f}return h},yl=(n,e,t,i,r,s,a=1e3)=>{for(var o=Ty({x:n,y:e},{x:t,y:i},{x:r,y:s}),l=0,c=o(0),h=0;h<=a;h++){var d=h/a,u=o(d);l+=Rr(c.x,c.y,u.x,u.y),c=u}return l},ng=(n,e=10)=>{var t={minDist:1/0,minT:0};return function(i,r){for(var s=0;s<=e;s++)rg(t,n,s/e,i,r);for(var a=1/(e*2),o=t.minT,s=0;sng(ou(n,e,t,i),r),ag=(n,e,t,i=20)=>ng(Ty(n,e,t),i),og=(n,e,t=20)=>ng(Cy(n,e),t),Ey=n=>{if(n==="linear"){var t={x:0,y:0},i={x:1,y:1};return Cy(t,i)}var e=Py(n),t={x:0,y:0},i={x:e[0],y:e[1]},r={x:e[2],y:e[3]},s={x:1,y:1};return ou(t,i,r,s)},rr=(n,e,t)=>({x:n.x+(e.x-n.x)*t,y:n.y+(e.y-n.y)*t}),lu=(n,e)=>{var t=rr(n[0],n[1],e),i=rr(n[1],n[2],e),r=rr(n[2],n[3],e),s=rr(t,i,e),a=rr(i,r,e);return rr(s,a,e)},Iy=(n,e)=>{var t=rr(n[0],n[1],e),i=rr(n[1],n[2],e);return rr(t,i,e)},TA=(n,e)=>rr(n[0],n[1],e),Kc=(n,e)=>{var t=rr(n[0],n[1],e),i=rr(n[1],n[2],e),r=rr(n[2],n[3],e),s=rr(t,i,e),a=rr(i,r,e),o=rr(s,a,e);return{first:[n[0],t,s,o],second:[o,a,r,n[3]]}},qc=(n,e)=>{var t=rr(n[0],n[1],e),i=rr(n[1],n[2],e),r=rr(t,i,e);return{first:[n[0],t,r],second:[r,i,n[2]]}},CA=(n,e=1)=>{for(var t=[];e>0;){const i=Kc(n,1/e);t.push(i.first),n=i.second,e--}return t},EA=(n,e=1)=>{for(var t=[];e>0;){const i=qc(n,1/e);t.push(i.first),n=i.second,e--}return t},IA=(n,e=1)=>{var t=[];const i=1/e;for(;e>0;){const r=Zc(n,i);t.push(r.first),n=r.second,e--}return t},Zc=(n,e)=>{var t=rr(n[0],n[1],e);return{first:[n[0],t],second:[t,n[1]]}},LA=n=>[vr(n[0]),[n[0][0]+(n[1][0]-n[0][0])*.33,n[0][1]+(n[1][1]-n[0][1])*.33,0],[n[0][0]+(n[1][0]-n[0][0])*.66,n[0][1]+(n[1][1]-n[0][1])*.66,0],vr(n[1])],lg=n=>{const e=.6666666666666666;return[vr(n[0]),Ct(n[0][0]+e*(n[1][0]-n[0][0]),n[0][1]+e*(n[1][1]-n[0][1]),0),Ct(n[2][0]+e*(n[1][0]-n[2][0]),n[2][1]+e*(n[1][1]-n[2][1]),0),vr(n[2])]},Ly=(n,e,t,i,r=1e3)=>{const s=Yc(n[0],n[1],e[0],e[1],t[0],t[1],i[0],i[1],r);let a=10,o=s/a,l=0,c=[];const h=[n,e,t,i].map(d=>({x:d[0],y:d[1]}));do{c=[];let d=0;for(let u=0;u<=a;u++){const p=lu(h,d/s);c.push(p),d+=o}l=PA(c),a+=a*(s-l)/s,o=s/a}while(s-l>.25);return c.map(d=>Ct(d.x,d.y,0))},kA=n=>{const e=Tr([],n[0]),t=oa([],[3,3,3],n[1]),i=oa([],[-3,-3,-3],n[2]),r=n[3],s=_t([],_t([],e,t),_t([],i,r));return oa([],[3,3,3],s)},AA=n=>{const e=n[0],t=oa([],[-2,-2,-2],n[1]),i=n[2],r=_t([],_t([],e,t),i);return oa([],[6,6,6],r)},RA=n=>{const e=_t([],n[1],Tr([],n[0]));return oa([],[3,3,3],e)},OA=n=>{const e=kA(n),t=AA(n),i=RA(n),r=[],s=t[0]*t[0]-4*e[0]*i[0];if(!(s<0)){if(s===0){let o=-t[0]/(2*e[0]);isNaN(o)&&(o=0),0<=o&&o<=1&&r.push(o)}else if(s>0){const o=(-t[0]+Math.sqrt(s))/(2*e[0]),l=(-t[0]-Math.sqrt(s))/(2*e[0]);0<=o&&o<=1&&r.push(o),0<=l&&l<=1&&r.push(l)}}const a=t[1]*t[1]-4*e[1]*i[1];if(!(a<0)){if(a===0){let o=-t[1]/(2*e[1]);isNaN(o)&&(o=0),0<=o&&o<=1&&r.push(o)}else if(a>0){const o=(-t[1]+Math.sqrt(a))/(2*e[1]),l=(-t[1]-Math.sqrt(a))/(2*e[1]);0<=o&&o<=1&&r.push(o),0<=l&&l<=1&&r.push(l)}}return r},ky=n=>{const e=OA(n),t=n.map(i=>({x:i[0],y:i[1]}));return e.push(0,1),e.map(i=>{const{x:r,y:s}=lu(t,i);return[r,s,0]})};function Is(n,e,t="rgba(0, 0, 0, 0)"){return Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),e=="hex"?Ry(n):e=="rgb"?cu(n,t):e=="hsl"?Oy(n):n}function Ay(n,e,t="rgba(0, 0, 0, 0)"){const i=rt(n);return i.a=1,Is(i,e,t)}function Ry(n){Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]});var e=n.r.toString(16);n.r<16&&(e="0"+e);var t=n.g.toString(16);n.g<16&&(t="0"+t);var i=n.b.toString(16);if(n.b<16&&(i="0"+i),n.a==1||typeof n.a=="undefined")return`#${e}${t}${i}`;{const s=Math.ceil(n.a*255);var r=s.toString(16);return s<16&&(r="0"+r),`#${e}${t}${i}${r}`}}function cu(n,e="rgba(0, 0, 0, 0)"){if(Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),typeof n!="undefined")return n.a==1||typeof n.a=="undefined"?isNaN(n.r)?e:`rgb(${n.r},${n.g},${n.b})`:`rgba(${n.r},${n.g},${n.b},${n.a})`}function Oy(n){return Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),n.a==1||typeof n.a=="undefined"?`hsl(${n.h},${n.s}%,${n.l}%)`:`hsla(${n.h},${n.s}%,${n.l}%,${n.a})`}function Qr(n,e){return Math.floor(Math.random()*(e-n+1))+n}function zy(n=1){let e=[];for(var t=0;t$t(t[i])).map(i=>`${i}: ${t[i]}`).join(";"+e)}function hn(n="",e=";",t=":"){n=n+"";var i={};return n===""||n.split(e).forEach(r=>{var[s,...a]=r.split(t).map(o=>o.trim());s!=""&&(i[s]=a.join(t))}),i}function $i(n){return Object.keys(n||{}).map(t=>t==="class"&&Fn(n[t])?`${t}="${vn(n[t])}"`:t==="style"&&Fn(n[t])?`${t}="${ei(n[t])}"`:Dn(n[t])||Di(n[t])||n[t]==="undefined"?n[t]?t:"":`${t}="${n[t]}"`).join(" ")}function Vy(n){return n.replace(//g,">")}function hu(n,e,t=""){return n.map(e).join(t)}function hg(n,e){const t=new Set([...n,...e]);return t.size===n.length&&t.size===e.length}const go=(n,e=30,t=30)=>{const i=fo(n);return` + `}getValue(){return this.refs.$options.value}setValue(e){this.refs.$options.val(this.state.value),this.setState({value:e+""})}[ne("$options")](){return{"data-count":this.state.options.length.toString()}}[ne("$selectedValue")](){var e;return{text:(e=this.state.options.find(t=>t.value===this.state.value))==null?void 0:e.text}}[Sr("$options")](){this.updateData({value:this.refs.$options.value}),this.bindData("$selectedValue")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}const RP=[Wt.NORMAL,Wt.MULTIPLY,Wt.SCREEN,Wt.OVERLAY,Wt.DARKEN,Wt.LIGHTEN,Wt.COLOR_DODGE,Wt.COLOR_BURN,Wt.HARD_LIGHT,Wt.SOFT_LIGHT,Wt.DIFFERENCE,Wt.EXCLUSION,Wt.HUE,Wt.SATURATION,Wt.COLOR,Wt.LUMINOSITY];class jP extends ic{getBlendList(){return RP.map(e=>({value:e,text:this.$i18n(`blend.${e}`)}))}initState(){return se(b({},super.initState()),{options:this.getBlendList()})}}var Y7="";const eu={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)",currentColor:"currentColor"};function zP(s){return!!eu[s]}function AP(s){return eu[s]}var $o={isColorName:zP,getColorByName:AP};function _o(s){return Math.pow(s,3)>.008856?Math.pow(s,3):(s-16/116)/7.787}function So(s){return s>.0031308?1.055*Math.pow(s,1/2.4)-.055:12.92*s}function tu(s,e,t){if(arguments.length==1)var{x:s,y:e,z:t}=arguments[0];let r=s/100,i=e/100,a=t/100,n=r*3.2406+i*-1.5372+a*-.4986,o=r*-.9689+i*1.8758+a*.0415,l=r*.0557+i*-.204+a*1.057;n=So(n),o=So(o),l=So(l);const c=Ue(n*255),h=Ue(o*255),u=Ue(l*255);return{r:c,g:h,b:u}}function ru(s,e,t){if(arguments.length==1)var{l:s,a:e,b:t}=arguments[0];let r=(s+16)/116,i=e/500+r,a=r-t/200;r=_o(r),i=_o(i),a=_o(a);const n=i*95.047,o=r*100,l=a*108.883;return{x:n,y:o,z:l}}function Po(s){return s>.008856?Math.pow(s,1/3):(7.787*s+16)/116}function iu(s,e,t){if(arguments.length==1)var{x:s,y:e,z:t}=arguments[0];let r=s/95.047,i=e/100,a=t/108.883;r=Po(r),i=Po(i),a=Po(a);const n=116*i-16,o=500*(r-i),l=200*(i-a);return{l:n,a:o,b:l}}function DP(s,e,t){if(arguments.length==1)var{l:s,a:e,b:t}=arguments[0];return tu(ru(s,e,t))}function Xa(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];const r=s/255,i=e/255,a=t/255,n=Math.max(r,i,a),o=Math.min(r,i,a),l=n-o;var c=0;l==0?c=0:n==r?c=60*((i-a)/l%6):n==i?c=60*((a-r)/l+2):n==a&&(c=60*((r-i)/l+4)),c<0&&(c=360+c);var h=0;n==0?h=0:h=l/n;var u=n;return{h:c,s:h,v:u}}function FP(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];const r=s/255,i=e/255,a=t/255,n=1-Math.max(r,i,a),o=(1-r-n)/(1-n),l=(1-i-n)/(1-n),c=(1-a-n)/(1-n);return{c:o,m:l,y:c,k:n}}function bi(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];s/=255,e/=255,t/=255;var r=Math.max(s,e,t),i=Math.min(s,e,t),a,n,o=(r+i)/2;if(r==i)a=n=0;else{var l=r-i;switch(n=o>.5?l/(2-r-i):l/(r+i),r){case s:a=(e-t)/l+(e90?0:255)}function wo(s){return{r:s,g:s,b:s}}function NP(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];return wo(Math.ceil((s+e+t)/3))}function GP(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];return wo(au(s,e,t).y)}function su(s,e,t){return Math.ceil(s*.2126+e*.7152+t*.0722)}function au(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];const r=su(s,e,t),i=.564*(t-r),a=.713*(s-r);return{y:r,cr:a,cb:i}}function Co(s){return(s>.04045?Math.pow((s+.055)/1.055,2.4):s/12.92)*100}function nu(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];let r=s/255,i=e/255,a=t/255;r=Co(r),i=Co(i),a=Co(a);const n=r*.4124+i*.3576+a*.1805,o=r*.2126+i*.7152+a*.0722,l=r*.0193+i*.1192+a*.9505;return{x:n,y:o,z:l}}function HP(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];return iu(nu(s,e,t))}function To(s,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?s+(e-s)*6*t:t<1/2?e:t<2/3?s+(e-s)*(2/3-t)*6:s}function ou(s,e,t){if(arguments.length==1)var{h:s,s:e,l:t}=arguments[0];const r=Ya(s,e,t);return Xa(r.r,r.g,r.b)}function Ya(s,e,t){if(arguments.length==1)var{h:s,s:e,l:t}=arguments[0];var r,i,a;if(s/=360,e/=100,t/=100,e==0)r=i=a=t;else{var n=t<.5?t*(1+e):t+e-t*e,o=2*t-n;r=To(o,n,s+1/3),i=To(o,n,s),a=To(o,n,s-1/3)}return{r:Ue(r*255),g:Ue(i*255),b:Ue(a*255)}}const UP=/(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_-]+))/gi;function ko(s,e="@"){return`${e}${s.startIndex}`.padEnd(10,"0")}function lu(s){return!!sc(s).length}function sc(s){const e=s.match(UP);let t=[];if(!e)return t;for(var r=0,i=e.length;r-1||e[r].indexOf("rgb")>-1||e[r].indexOf("hsl")>-1)t.push({color:e[r]});else{var a=$o.getColorByName(e[r]);a&&t.push({color:e[r],nameColor:a})}var n={next:0};return t.forEach(o=>{const l=s.indexOf(o.color,n.next);o.startIndex=l,o.endIndex=l+o.color.length,n.next=o.endIndex}),t}function Zi(s,e="@"){const t=sc(s);return t.forEach(r=>{s=s.replace(r.color,ko(r,e))}),{str:s,matches:t}}function ac(s,e=","){const t=Zi(s);return t.str.split(e).map((r,i)=>(r=xi(r),t.matches[i]&&(r=r.replace(ko(t.matches[i]),t.matches[i].color)),r))}function ha(s,e){return e.forEach(t=>{s=s.replace(ko(t),t.color)}),s}const WP=/^\s+|\s+$/g;function xi(s){return s.replace(WP,"")}function pt(s){if(it(s)){if($o.isColorName(s)&&(s=$o.getColorByName(s)),s.indexOf("rgb(")>-1){for(var e=s.replace("rgb(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("rgba(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("hsl(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("hsla(","").replace(")","").split(","),t=0,r=e.length;t>16,l=(s&65280)>>8,c=(s&255)>>0;var i={type:"hex",r:o,g:l,b:c,a:1};return i=b(b({},i),bi(i)),i}else if(0<=s&&s<=4294967295){const o=(s&4278190080)>>24,l=(s&16711680)>>16,c=(s&65280)>>8,h=(s&255)/255;var i={type:"hex",r:o,g:l,b:c,a:h};return i=b(b({},i),bi(i)),i}}return s}function cu(s){it(s)&&(s=ac(s)),s=s.map(t=>{if(it(t)){const r=Zi(t);let i=xi(r.str).split(" ");return i[1]?i[1].indexOf("%")>-1?i[1]=parseFloat(i[1].replace(/%/,""))/100:i[1]=parseFloat(i[1]):i[1]="*",i[0]=ha(i[0],r.matches),i}else if(Array.isArray(t))return t[1]?it(t[1])&&(t[1].indexOf("%")>-1?t[1]=parseFloat(t[1].replace(/%/,""))/100:t[1]=+t[1]):t[1]="*",[...t]});const e=s.filter(t=>t[1]==="*").length;if(e>0){const t=s.filter(i=>i[1]!="*"&&i[1]!=1).map(i=>i[1]).reduce((i,a)=>i+a,0),r=(1-t)/e;s.forEach((i,a)=>{i[1]=="*"&&a>0&&(s.length-1==a||(i[1]=r))})}return s}const XP=()=>!0;function nc(s,e=XP){var t=[];let r=s.layers.length;for(let i=r;i--;){let a=s.layers[i];t.push(...nc(a.ref,e))}return e(s)&&t.push(s),t}class oc{constructor(e={}){return this.ref=new Proxy(this,{get:(t,r)=>{var i=t[r];return de(i)?(...a)=>i.apply(t,a):i||t.json[r]},set:(t,r,i)=>(t.json[r]!=i&&(t.json[r]=i,this.changed()),!0)}),e instanceof oc&&(e=e.toJSON()),this.json=this.convert(Object.assign(this.getDefaultObject(),e)),this.lastChangedField={},this.lastChangedFieldKeys=[],this.cachedValue={},this.ref}getDefaultTitle(){return"Item"}getIcon(){return""}isAttribute(){return!1}isChanged(e){return this.json.timestamp!=Number(e)}changed(){this.json.timestamp=this.json._timestamp+window.performance.now()}get title(){return this.json.name||this.getDefaultTitle()}renameWithCount(){let e=this.json.name.split(" ");if(e.length<2)return;let t=e.pop(),r=+t;ft(r)&&isNaN(r)===!1?r++:r=t;const i=[...e,r].join(" ");this.reset({name:i})}get allLayers(){return nc(this.ref)}filteredAllLayers(e){return nc(this.ref,e)}get id(){return this.json.id}get layers(){return this.json.layers}get parent(){return this.json.parent}setParent(e){this.json.parent=e}get depth(){return this.parent?this.parent.depth+1:1}get top(){if(!this.parent)return this.ref;let e=this.parent;do{if(!e.parent)return e;e=e.parent}while(e)}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){if(!this.parent)return[this.ref];const e=this.parent.path;return e.push(this.ref),e}getInnerId(e=""){return this.json.id+e}is(e){return this.json?e===this.json.itemType:!1}isNot(e){return this.is(e)===!1}isSVG(){return!1}addCache(e,t){this.cachedValue[e]=t}getCache(e){return this.cachedValue[e]}computed(e,t){const i=`${`__cachedKey_${e}`}__parseValue`,a=this.json[e];return this.getCache(e)===a&&this.getCache(i)?this.getCache(i):(this.addCache(e,a),this.addCache(i,t(a,this.ref)),this.getCache(i))}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e){return e.layers&&e.layers.forEach(t=>{t.parent=this.ref}),e}setCache(){}toCloneObject(e=!0){var t=this.attrs("itemType","name","elementType","type","visible","lock","selected");return e&&(t.layers=this.json.layers.map(r=>r.clone(e))),t}clone(e=!0){var t=this.constructor,r=new t(this.toCloneObject(e));return r.setParent(this.json.parent),r}reset(e){return e.__changedId||(e.__changedId=ws()),this.lastChangedField.__changedId!==e.__changedId&&(this.json=this.convert(Object.assign(this.json,e)),this.lastChangedField=e,this.lastChangedFieldKeys=Object.keys(e),this.changed()),!0}hasChangedField(...e){return e.some(t=>this.lastChangedFieldKeys.includes(t))}getDefaultObject(e={}){var t=fr();return b({id:t,_timestamp:Date.now(),_time:window.performance.now(),visible:!0,lock:!1,selected:!1,layers:[]},e)}attrs(...e){const t={};return e.forEach(r=>{t[r]=be(this.json[r])}),t}hasChildren(){return this.layers.length>0}appendChild(e){return e.parent===this.ref||(this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.push(e),this.project.addIndexItem(e)),e}prependChildItem(e){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.unshift(e),this.project.addIndexItem(e),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.splice(t,0,e),this.project.addIndexItem(e),e}insertAfter(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t),this.project.addIndexItem(e),e}insertBefore(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t-1),this.project.addIndexItem(e),e}setPositionInPlace(e,t){this.layers.splice(e,0,t)}toggle(e,t){Ct(t)?this.json[e]=!this.json[e]:this.json[e]=!!t}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!(e==="parent"||Ct(this.json[e]))}toJSON(){const e=this.json;let t={};return Object.keys(e).filter(r=>this.expectJSON(r)).forEach(r=>{t[r]=e[r]}),t}resize(){}copy(e=0){return this.json.parent.copyItem(this.ref,e)}findIndex(e){return this.json.layers.indexOf(e.ref)}copyItem(e,t=10){var r=e.clone();r.renameWithCount(),r.move([t,t,0]);var i=this.findIndex(e);return i>-1&&(this.json.layers.push(r),this.project.addIndexItem(r)),r}remove(){this.json.parent.removeChild(this.ref),this.project.removeIndexItem(this.ref)}removeChild(e){const t=this.findIndex(e);t>-1&&this.json.layers.splice(t,1)}hasParent(e){var t=this.json.parent.id===e;return!t&&this.json.parent.is("project")===!1?this.json.parent.hasParent(e):t}}const YP=1e3,Ka=new Map;class lc{static has(e){return Ka.has(e)}static get(e){return Ka.get(e)}static set(e,t){Ka.size>YP&&Ka.clear(),Ka.set(e,t)}}class Vr{static parseStyle(e="50% 50% 0px"){if(lc.has(e))return lc.get(e);const t=e.trim().split(" ").filter(i=>i.trim());let r=null;return t.length===1?r=[t[0],t[0]].map(i=>p.parse(i)):r=t.map(i=>p.parse(i)),lc.set(e,r),r}static scale(e,t,r){let i=Vr.parseStyle(e);if(t===0&&r===0)return[0,0,0];const a=i[0].toPx(t).value,n=i[1].toPx(r).value,o=i[2].value;return[a,n,o]}static toPx(e,t,r,i=0){let[a,n,o]=Vr.parseStyle(e);return a=a.toPx(t),n=n.toPx(r),o=o.toPx(i),`${a} ${n} ${o}`}}function KP(s,e,t,r,i,a,n,o){return s+t>=i&&s<=i+n&&e+r>=a&&e<=a+o}class hu{constructor(e,t,r,i){this.x=e,this.y=t,this.width=r,this.height=i}get left(){return this.x}get right(){return this.x+this.width}get top(){return this.y}get bottom(){return this.y+this.height}get centerX(){return this.x+this.width/2}get centerY(){return this.y+this.height/2}get center(){return[this.centerX,this.centerY]}get topLeft(){return[this.left,this.top]}get topRight(){return[this.right,this.top]}get bottomLeft(){return[this.left,this.bottom]}get bottomRight(){return[this.right,this.bottom]}get vertices(){return[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight]}intersect(e){return cc(this,e)}}function cc(s,e){const t=Math.min(s.x,e.x),r=Math.min(s.y,e.y),i=xt(s.x-t,s.y-r,s.width,s.height),a=xt(e.x-t,e.y-r,e.width,e.height),n=[Math.max(i[0][0],a[0][0]),Math.max(i[0][1],a[0][1]),Math.max(i[0][2],a[0][2])],o=[Math.min(i[2][0],a[2][0]),Math.min(i[2][1],a[2][1]),Math.min(i[2][2],a[2][2])],l=Math.min(n[0],o[0]),c=Math.min(n[1],o[1]),h=Math.max(n[0],o[0]),u=Math.max(n[1],o[1]);return new hu(l+t,c+r,h-l,u-c)}function Za(s,e,t,r,i,a,n=.1){const o=Math.hypot(i-s,a-e),l=Math.hypot(i-t,a-r),c=Math.hypot(s-t,e-r),h=o+l;return h>=c-n&&h<=c+n}function du(s,e,t,r,i,a,n,o){let l=((n-i)*(e-a)-(o-a)*(s-i))/((o-a)*(t-s)-(n-i)*(r-e)),c=((t-s)*(e-a)-(r-e)*(s-i))/((o-a)*(t-s)-(n-i)*(r-e));return 0<=l&&l<=1&&0<=c&&c<=1}function ZP(s,e,t,r,i,a,n,o,l=.1){return Za(s,e,t,r,i,a)||Za(s,e,t,r,n,o)?!0:Za(i,a,n,o,s,e)?[s,e]:Za(i,a,n,o,t,r)?[t,r]:du(s,e,t,r,i,a,n,o)}function Ts(s=[],e,t,r=!1){let i=!1;const a=s.length;if(r===!1)for(let n=0;n{const[l,c]=n,[h,u]=s[(o+1)%a];(c>=t&&u=t)&&e<(h-l)*(t-c)/(u-c)+l&&(i=!i)}),i)}function qP(s=[],e,t,r,i,a=!1){const n=s.length;return s.some((o,l)=>{const[c,h]=o,[u,d]=s[(l+1)%n];return a?du(e,t,r,i,c,h,u,d):ZP(e,t,r,i,c,h,u,d)})}function hc(s=[],e=[],t=!1){const r=s.length;return s.some((i,a)=>{const[n,o]=i,[l,c]=s[(a+1)%r];let h=qP(e,n,o,l,c,t);return!!(h||(h=Ts(s,e[0][0],e[0][1],t),h))})}function xt(s,e,t,r,i="50% 50% 0px"){const a=Vr.scale(i,t,r);return[[s,e,0],[s+t,e,0],[s+t,e+r,0],[s,e+r,0],[s+a[0],e+a[1],0]]}function Mo(s,e=0){const t=te([],s[0],s[1],.5),r=te([],s[2],s[3],.5);return KS(r,t,e)}function QP(s,e,t,r){return xt(s,e,t,r)}function qa(s=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{o.originVerties.forEach(l=>{a.push(l[0]),n.push(l[1])})}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),xt(e,t,r-e,i-t)}function JP(s=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{o.targetVerties.forEach(l=>{a.push(l[0]),n.push(l[1])})}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),xt(e,t,r-e,i-t)}function Rt(s){const e=s[0][0],t=s[0][1],r=ae(s[0],s[1]),i=ae(s[0],s[3]);return new hu(e,t,r,i)}function qi(s=[]){const e=[];for(var t=0;tt<4)}function Or(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{a.push(o[0]),n.push(o[1])}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),xt(e,t,r-e,i-t)}const ew={linear:!0,ease:!0,"ease-in":!0,"ease-out":!0,"ease-in-out":!0},tw={ease:"cubic-bezier(0.25, 0.1, 0.25, 1)","ease-in":"cubic-bezier(0.42, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.58, 1)"},Qi=[[0,0,1,1,"linear",!0],[.25,.1,.25,1,"ease",!0],[.42,0,1,1,"ease-in",!0],[0,0,.58,1,"ease-out",!0],[.47,0,.745,.715,"ease-in-sine"],[.39,.575,.565,1,"ease-out-sine"],[.445,.05,.55,.95,"ease-in-out-sine"],[.55,.085,.68,.53,"ease-in-quad"],[.25,.46,.45,.94,"ease-out-quad"],[.455,.03,.515,.955,"ease-in-out-quad"],[.55,.055,.675,.19,"ease-in-cubic"],[.215,.61,.355,1,"ease-out-cubic"],[.645,.045,.355,1,"ease-in-out-cubic"],[.895,.03,.685,.22,"ease-in-quart"],[.165,.84,.44,1,"ease-out-quart"],[.77,0,.175,1,"ease-in-out-quart"],[.6,.04,.98,.335,"ease-in-circ"],[.075,.82,.165,1,"ease-out-circ"],[.785,.135,.15,.86,"ease-in-out-circ"],[.95,.05,.795,.035,"ease-in-expo"],[.19,1,.22,1,"ease-out-expo"],[1,0,0,1,"ease-in-out-expo"],[.755,.05,.855,.06,"ease-in-quint"],[.23,1,.32,1,"ease-out-quint"],[.86,0,.07,1,"ease-in-out-quint"],[.6,-.28,.735,.045,"ease-in-back"],[.175,.885,.32,1.275,"ease-out-back"],[.68,-.55,.265,1.55,"ease-in-out-back"]],ks=s=>[...gu(tw[s]||s)],pu=s=>{s=s.map(i=>Math.floor(i*100)/100);for(var e=0,t=Qi.length;ea<4).join(",")} )`};function gu(s){if(typeof s=="string"){if(ew[s])return Qi.filter(t=>t[4]===s)[0];var e=s.replace("cubic-bezier","").replace("(","").replace(")","").split(",");return e=e.map(t=>parseFloat(t.trim())),e}return s}const Io=(s,e,t,r)=>{var i=[s,e,t,r];return function(a){return Eo(i,a)}},fu=(s,e,t)=>{var r=[s,e,t];return function(i){return yu(r,i)}},mu=(s,e)=>{var t=[s,e];return function(r){return iw(t,r)}},dc=(s,e,t,r,i)=>{var a=e(t),n=sr(r,i,a.x,a.y);n{let e=0;return s.forEach((t,r)=>{var i=s[r+1];if(!!i){var a=ae(Ie(t.x,t.y,0),Ie(i.x,i.y,0));e+=a}}),e},Qa=(s,e,t,r,i,a,n,o,l=1e3)=>{for(var c=Io({x:s,y:e},{x:t,y:r},{x:i,y:a},{x:n,y:o}),h=0,u=c(0),d=0;d<=l;d++){var v=d/l,g=c(v);h+=sr(u.x,u.y,g.x,g.y),u=g}return h},da=(s,e,t,r,i,a,n=1e3)=>{for(var o=fu({x:s,y:e},{x:t,y:r},{x:i,y:a}),l=0,c=o(0),h=0;h<=n;h++){var u=h/n,d=o(u);l+=sr(c.x,c.y,d.x,d.y),c=d}return l},uc=(s,e=10)=>{var t={minDist:1/0,minT:0};return function(r,i){for(var a=0;a<=e;a++)dc(t,s,a/e,r,i);for(var n=1/(e*2),o=t.minT,a=0;auc(Io(s,e,t,r),i),gc=(s,e,t,r=20)=>uc(fu(s,e,t),r),fc=(s,e,t=20)=>uc(mu(s,e),t),vu=s=>{if(s==="linear"){var t={x:0,y:0},r={x:1,y:1};return mu(t,r)}var e=gu(s),t={x:0,y:0},r={x:e[0],y:e[1]},i={x:e[2],y:e[3]},a={x:1,y:1};return Io(t,r,i,a)},Ft=(s,e,t)=>({x:s.x+(e.x-s.x)*t,y:s.y+(e.y-s.y)*t}),Eo=(s,e)=>{var t=Ft(s[0],s[1],e),r=Ft(s[1],s[2],e),i=Ft(s[2],s[3],e),a=Ft(t,r,e),n=Ft(r,i,e);return Ft(a,n,e)},yu=(s,e)=>{var t=Ft(s[0],s[1],e),r=Ft(s[1],s[2],e);return Ft(t,r,e)},iw=(s,e)=>Ft(s[0],s[1],e),Ja=(s,e)=>{var t=Ft(s[0],s[1],e),r=Ft(s[1],s[2],e),i=Ft(s[2],s[3],e),a=Ft(t,r,e),n=Ft(r,i,e),o=Ft(a,n,e);return{first:[s[0],t,a,o],second:[o,n,i,s[3]]}},en=(s,e)=>{var t=Ft(s[0],s[1],e),r=Ft(s[1],s[2],e),i=Ft(t,r,e);return{first:[s[0],t,i],second:[i,r,s[2]]}},sw=(s,e=1)=>{for(var t=[];e>0;){const r=Ja(s,1/e);t.push(r.first),s=r.second,e--}return t},aw=(s,e=1)=>{for(var t=[];e>0;){const r=en(s,1/e);t.push(r.first),s=r.second,e--}return t},nw=(s,e=1)=>{var t=[];const r=1/e;for(;e>0;){const i=tn(s,r);t.push(i.first),s=i.second,e--}return t},tn=(s,e)=>{var t=Ft(s[0],s[1],e);return{first:[s[0],t],second:[t,s[1]]}},ow=s=>[Yt(s[0]),[s[0][0]+(s[1][0]-s[0][0])*.33,s[0][1]+(s[1][1]-s[0][1])*.33,0],[s[0][0]+(s[1][0]-s[0][0])*.66,s[0][1]+(s[1][1]-s[0][1])*.66,0],Yt(s[1])],mc=s=>{const e=.6666666666666666;return[Yt(s[0]),Ie(s[0][0]+e*(s[1][0]-s[0][0]),s[0][1]+e*(s[1][1]-s[0][1]),0),Ie(s[2][0]+e*(s[1][0]-s[2][0]),s[2][1]+e*(s[1][1]-s[2][1]),0),Yt(s[2])]},bu=(s,e,t,r,i=1e3)=>{const a=Qa(s[0],s[1],e[0],e[1],t[0],t[1],r[0],r[1],i);let n=10,o=a/n,l=0,c=[];const h=[s,e,t,r].map(u=>({x:u[0],y:u[1]}));do{c=[];let u=0;for(let d=0;d<=n;d++){const v=Eo(h,u/a);c.push(v),u+=o}l=rw(c),n+=n*(a-l)/a,o=a/n}while(a-l>.25);return c.map(u=>Ie(u.x,u.y,0))},lw=s=>{const e=tr([],s[0]),t=Gi([],[3,3,3],s[1]),r=Gi([],[-3,-3,-3],s[2]),i=s[3],a=we([],we([],e,t),we([],r,i));return Gi([],[3,3,3],a)},cw=s=>{const e=s[0],t=Gi([],[-2,-2,-2],s[1]),r=s[2],i=we([],we([],e,t),r);return Gi([],[6,6,6],i)},hw=s=>{const e=we([],s[1],tr([],s[0]));return Gi([],[3,3,3],e)},dw=s=>{const e=lw(s),t=cw(s),r=hw(s),i=[],a=t[0]*t[0]-4*e[0]*r[0];if(!(a<0)){if(a===0){let o=-t[0]/(2*e[0]);isNaN(o)&&(o=0),0<=o&&o<=1&&i.push(o)}else if(a>0){const o=(-t[0]+Math.sqrt(a))/(2*e[0]),l=(-t[0]-Math.sqrt(a))/(2*e[0]);0<=o&&o<=1&&i.push(o),0<=l&&l<=1&&i.push(l)}}const n=t[1]*t[1]-4*e[1]*r[1];if(!(n<0)){if(n===0){let o=-t[1]/(2*e[1]);isNaN(o)&&(o=0),0<=o&&o<=1&&i.push(o)}else if(n>0){const o=(-t[1]+Math.sqrt(n))/(2*e[1]),l=(-t[1]-Math.sqrt(n))/(2*e[1]);0<=o&&o<=1&&i.push(o),0<=l&&l<=1&&i.push(l)}}return i},xu=s=>{const e=dw(s),t=s.map(r=>({x:r[0],y:r[1]}));return e.push(0,1),e.map(r=>{const{x:i,y:a}=Eo(t,r);return[i,a,0]})};function $i(s,e,t="rgba(0, 0, 0, 0)"){return Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),e=="hex"?_u(s):e=="rgb"?Lo(s,t):e=="hsl"?Su(s):s}function $u(s,e,t="rgba(0, 0, 0, 0)"){const r=be(s);return r.a=1,$i(r,e,t)}function _u(s){Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]});var e=s.r.toString(16);s.r<16&&(e="0"+e);var t=s.g.toString(16);s.g<16&&(t="0"+t);var r=s.b.toString(16);if(s.b<16&&(r="0"+r),s.a==1||typeof s.a=="undefined")return`#${e}${t}${r}`;{const a=Math.ceil(s.a*255);var i=a.toString(16);return a<16&&(i="0"+i),`#${e}${t}${r}${i}`}}function Lo(s,e="rgba(0, 0, 0, 0)"){if(Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),typeof s!="undefined")return s.a==1||typeof s.a=="undefined"?isNaN(s.r)?e:`rgb(${s.r},${s.g},${s.b})`:`rgba(${s.r},${s.g},${s.b},${s.a})`}function Su(s){return Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),s.a==1||typeof s.a=="undefined"?`hsl(${s.h},${s.s}%,${s.l}%)`:`hsla(${s.h},${s.s}%,${s.l}%,${s.a})`}function vr(s,e){return Math.floor(Math.random()*(e-s+1))+s}function Pu(s=1){let e=[];for(var t=0;tke(t[r])).map(r=>`${r}: ${t[r]}`).join(";"+e)}function wr(s="",e=";",t=":"){s=s+"";var r={};return s===""||s.split(e).forEach(i=>{var[a,...n]=i.split(t).map(o=>o.trim());a!=""&&(r[a]=n.join(t))}),r}function vt(s){return Object.keys(s||{}).map(t=>t==="class"&&Hr(s[t])?`${t}="${kr(s[t])}"`:t==="style"&&Hr(s[t])?`${t}="${Je(s[t])}"`:ai(s[t])||Ct(s[t])||s[t]==="undefined"?s[t]?t:"":`${t}="${s[t]}"`).join(" ")}function wu(s){return s.replace(//g,">")}function Vo(s,e,t=""){return s.map(e).join(t)}function yc(s,e){const t=new Set([...s,...e]);return t.size===s.length&&t.size===e.length}const Ms=(s,e=30,t=30)=>{const r=ks(s);return` M0 ${e} C - ${i[0]*e} ${i[1]==0?t:(1-i[1])*t}, - ${i[2]*e} ${i[3]==1?0:(1-i[3])*t}, + ${r[0]*e} ${r[1]==0?t:(1-r[1])*t}, + ${r[2]*e} ${r[3]==1?0:(1-r[3])*t}, ${e} 0 - `},Jc=(n,e=30,t=30)=>{const i=fo(n);return` + `},rn=(s,e=30,t=30)=>{const r=ks(s);return` M 0 ${e} - L ${i[0]*e} ${i[1]==0?t:(1-i[1])*t} + L ${r[0]*e} ${r[1]==0?t:(1-r[1])*t} M ${e} 0 - L ${i[2]*e} ${i[3]==1?0:(1-i[3])*t} - `},VA=n=>n,DA=(n,e=VA)=>{const t=rt(n);return Object.keys(t).forEach(i=>{t[i]=e(t[i])}),t},FA=n=>DA(n,Math.floor);class Vr extends Qf{getDefaultObject(e={}){return P({selected:!1,layers:[]},e)}isAttribute(){return!0}toCSS(){return{}}toString(){return ei(this.toCSS())}}class $n extends Vr{static parse(e){return new $n(e)}static parseStyle(e){var t=[];if(e=e.trim(),!e)return t;var i=ga(e);return t=i.str.split(",").filter(r=>r.trim()).map(r=>{var s=r.trim().split(" "),a=s.filter(c=>c===bn.INSET),o=s.filter(c=>c.includes("@")).map(c=>vl(c,i.matches)),l=s.filter(c=>c!==bn.INSET&&!c.includes("@"));return $n.parse({inset:a.length?bn.INSET:bn.OUTSET,color:o[0]||"rgba(0, 0, 0, 1)",offsetX:y.parse(l[0]||"0px"),offsetY:y.parse(l[1]||"0px"),blurRadius:y.parse(l[2]||"0px"),spreadRadius:y.parse(l[3]||"0px")})}),t}static join(e){return e.map(t=>$n.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"box-shadow",inset:!1,offsetX:0,offsetY:0,blurRadius:0,spreadRadius:0,color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("inset","offsetX","offsetY","blurRadius","spreadRadius","color"))}convert(e){return e=super.convert(e),_i(e.offsetX)?e.offsetX=y.px(e.offsetX):e.offsetX&&(e.offsetX=y.parse(e.offsetX)),_i(e.offsetY)?e.offsetY=y.px(e.offsetY):e.offsetY&&(e.offsetY=y.parse(e.offsetY)),_i(e.blurRadius)?e.blurRadius=y.px(e.blurRadius):e.blurRadius&&(e.blurRadius=y.parse(e.blurRadius)),_i(e.spreadRadius)?e.spreadRadius=y.px(e.spreadRadius):e.spreadRadius&&(e.spreadRadius=y.parse(e.spreadRadius)),e}toCSS(){return{"box-shadow":this.toString()}}toString(){var e=this.json;return`${e.inset===bn.INSET?"inset ":""}${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.spreadRadius} ${e.color}`}}class NA extends ge{initState(){return{boxShadows:$n.parseStyle(this.props.value||"")}}template(){return` + L ${r[2]*e} ${r[3]==1?0:(1-r[3])*t} + `},pw=s=>s,gw=(s,e=pw)=>{const t=be(s);return Object.keys(t).forEach(r=>{t[r]=e(t[r])}),t},fw=s=>gw(s,Math.floor);class or extends oc{getDefaultObject(e={}){return b({selected:!1,layers:[]},e)}isAttribute(){return!0}toCSS(){return{}}toString(){return Je(this.toCSS())}}class jr extends or{static parse(e){return new jr(e)}static parseStyle(e){var t=[];if(e=e.trim(),!e)return t;var r=Zi(e);return t=r.str.split(",").filter(i=>i.trim()).map(i=>{var a=i.trim().split(" "),n=a.filter(c=>c===Ir.INSET),o=a.filter(c=>c.includes("@")).map(c=>ha(c,r.matches)),l=a.filter(c=>c!==Ir.INSET&&!c.includes("@"));return jr.parse({inset:n.length?Ir.INSET:Ir.OUTSET,color:o[0]||"rgba(0, 0, 0, 1)",offsetX:p.parse(l[0]||"0px"),offsetY:p.parse(l[1]||"0px"),blurRadius:p.parse(l[2]||"0px"),spreadRadius:p.parse(l[3]||"0px")})}),t}static join(e){return e.map(t=>jr.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"box-shadow",inset:!1,offsetX:0,offsetY:0,blurRadius:0,spreadRadius:0,color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("inset","offsetX","offsetY","blurRadius","spreadRadius","color"))}convert(e){return e=super.convert(e),ft(e.offsetX)?e.offsetX=p.px(e.offsetX):e.offsetX&&(e.offsetX=p.parse(e.offsetX)),ft(e.offsetY)?e.offsetY=p.px(e.offsetY):e.offsetY&&(e.offsetY=p.parse(e.offsetY)),ft(e.blurRadius)?e.blurRadius=p.px(e.blurRadius):e.blurRadius&&(e.blurRadius=p.parse(e.blurRadius)),ft(e.spreadRadius)?e.spreadRadius=p.px(e.spreadRadius):e.spreadRadius&&(e.spreadRadius=p.parse(e.spreadRadius)),e}toCSS(){return{"box-shadow":this.toString()}}toString(){var e=this.json;return`${e.inset===Ir.INSET?"inset ":""}${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.spreadRadius} ${e.color}`}}class mw extends Y{initState(){return{boxShadows:jr.parseStyle(this.props.value||"")}}template(){return`
      - `}[ve("$shadowList")+It](){var e=this.state.boxShadows.map((t,i)=>` -
      - + `}[G("$shadowList")+Ee](){var e=this.state.boxShadows.map((t,r)=>` +
      +
      - ${W("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:i,onchange:"changeKeyValue"})} - ${W("ToggleButton",{mini:!0,key:"inset",value:t.inset,params:i,onChange:"changeKeyValue",checkedValue:bn.INSET,toggleLabels:[re("border_style"),re("border_style")],toggleTitles:[bn.INSET,bn.INSET],toggleValues:[bn.OUTSET,bn.INSET]})} + ${R("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:r,onchange:"changeKeyValue"})} + ${R("ToggleButton",{mini:!0,key:"inset",value:t.inset,params:r,onChange:"changeKeyValue",checkedValue:Ir.INSET,toggleLabels:[z("border_style"),z("border_style")],toggleTitles:[Ir.INSET,Ir.INSET],toggleValues:[Ir.OUTSET,Ir.INSET]})} - ${W("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,label:"S",key:"spreadRadius",value:t.spreadRadius,params:i,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,label:"S",key:"spreadRadius",value:t.spreadRadius,params:r,onchange:"changeKeyValue"})}
      -
      - `);return e.join("")}modifyBoxShadow(){var e=this.state.boxShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[U("add")](e=""){if(e)this.state.boxShadows=$n.parseStyle(e);else{const t=new $n({color:"black",inset:bn.OUTSET,offsetX:2,offsetY:2,blurRadius:3,spreadRadius:1});this.state.boxShadows.push(t)}this.refresh(),this.modifyBoxShadow()}[se("$add")](){this.trigger("add")}[on("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$shadowList .shadow-item")+St](){}sortItem(e,t,i){e.splice(i+(t({color:n}));var jA={title:"material amber",key:"material-amber",execute:function(){return BA}},GA=Object.freeze(Object.defineProperty({__proto__:null,default:jA},Symbol.toStringTag,{value:"Module"}));const HA=["#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#2196f3","#82b1ff","#448aff","#2979ff","#2962ff"].map(n=>({color:n}));var UA={title:"material blue",key:"material-blue",execute:function(){return HA}},WA=Object.freeze(Object.defineProperty({__proto__:null,default:UA},Symbol.toStringTag,{value:"Module"}));const XA=["#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"].map(n=>({color:n}));var YA={title:"material bluegray",key:"material-bluegray",execute:function(){return XA}},KA=Object.freeze(Object.defineProperty({__proto__:null,default:YA},Symbol.toStringTag,{value:"Module"}));const qA=["#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"].map(n=>({color:n}));var ZA={title:"material brown",key:"material-brown",execute:function(){return qA}},JA=Object.freeze(Object.defineProperty({__proto__:null,default:ZA},Symbol.toStringTag,{value:"Module"}));const QA=["#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#00bcd4","#84ffff","#18ffff","#00e5ff","#00b8d4"].map(n=>({color:n}));var e4={title:"material cyan",key:"material-cyan",execute:function(){return QA}},t4=Object.freeze(Object.defineProperty({__proto__:null,default:e4},Symbol.toStringTag,{value:"Module"}));const i4=["#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"].map(n=>({color:n}));var r4={title:"material deep orange",key:"material-deeporange",execute:function(){return i4}},n4=Object.freeze(Object.defineProperty({__proto__:null,default:r4},Symbol.toStringTag,{value:"Module"}));const s4=["#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#673ab7","#b388ff","#7c4dff","#651fff","#6200ea"].map(n=>({color:n}));var a4={title:"material deep purple",key:"material-deeppurple",execute:function(){return s4}},o4=Object.freeze(Object.defineProperty({__proto__:null,default:a4},Symbol.toStringTag,{value:"Module"}));const l4=["#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"].map(n=>({color:n}));var c4={title:"material gray",key:"material-gray",execute:function(){return l4}},h4=Object.freeze(Object.defineProperty({__proto__:null,default:c4},Symbol.toStringTag,{value:"Module"}));const d4=["#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"].map(n=>({color:n}));var u4={title:"material green",key:"material-green",execute:function(){return d4}},p4=Object.freeze(Object.defineProperty({__proto__:null,default:u4},Symbol.toStringTag,{value:"Module"}));const f4=["#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#3f51b5","#8c9eff","#536dfe","#3d5afe","#304ffe"].map(n=>({color:n}));var g4={title:"material indigo",key:"material-indigo",execute:function(){return f4}},m4=Object.freeze(Object.defineProperty({__proto__:null,default:g4},Symbol.toStringTag,{value:"Module"}));const v4=["#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#03a9f4","#80d8ff","#40c4ff","#00b0ff","#0091ea"].map(n=>({color:n}));var y4={title:"material light blue",key:"material-lightblue",execute:function(){return v4}},b4=Object.freeze(Object.defineProperty({__proto__:null,default:y4},Symbol.toStringTag,{value:"Module"}));const x4=["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"].map(n=>({color:n}));var _4={title:"material lightgreen",key:"material-lightgreen",execute:function(){return x4}},S4=Object.freeze(Object.defineProperty({__proto__:null,default:_4},Symbol.toStringTag,{value:"Module"}));const w4=["#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"].map(n=>({color:n}));var M4={title:"material lime",key:"material-lime",execute:function(){return w4}},$4=Object.freeze(Object.defineProperty({__proto__:null,default:M4},Symbol.toStringTag,{value:"Module"}));const P4=["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"].map(n=>({color:n}));var T4={title:"material orange",key:"material-orange",execute:function(){return P4}},C4=Object.freeze(Object.defineProperty({__proto__:null,default:T4},Symbol.toStringTag,{value:"Module"}));const E4=["#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#e91e63","#ff80ab","#ff4081","#f50057","#c51162"].map(n=>({color:n}));var I4={title:"material pink",key:"material-pink",execute:function(){return E4}},L4=Object.freeze(Object.defineProperty({__proto__:null,default:I4},Symbol.toStringTag,{value:"Module"}));const k4=["#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#9c27b0","#ea80fc","#e040fb","#d500f9","#aa00ff"].map(n=>({color:n}));var A4={title:"material purple",key:"material-purple",execute:function(){return k4}},R4=Object.freeze(Object.defineProperty({__proto__:null,default:A4},Symbol.toStringTag,{value:"Module"}));const O4=["#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#f44336","#ff8a80","#ff5252","#ff1744","#d50000"].map(n=>({color:n}));var z4={title:"material red",key:"material-red",execute:function(){return O4}},V4=Object.freeze(Object.defineProperty({__proto__:null,default:z4},Symbol.toStringTag,{value:"Module"}));const D4=["#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#009688","#a7ffeb","#64ffda","#1de9b6","#00bfa5"].map(n=>({color:n}));var F4={title:"material teal",key:"material-teal",execute:function(){return D4}},N4=Object.freeze(Object.defineProperty({__proto__:null,default:F4},Symbol.toStringTag,{value:"Module"}));const B4=["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"].map(n=>({color:n}));var j4={title:"material yellow",key:"material-yellow",execute:function(){return B4}},G4=Object.freeze(Object.defineProperty({__proto__:null,default:j4},Symbol.toStringTag,{value:"Module"}));const H4=["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"].map(n=>({color:n}));var U4={title:"opencolor gray",resource:"https://yeun.github.io/open-color/",key:"opencolor-gray",execute:function(){return H4}},W4=Object.freeze(Object.defineProperty({__proto__:null,default:U4},Symbol.toStringTag,{value:"Module"}));function X4(n,e,t,i){if(arguments.length==1)var{c:n,m:e,y:t,k:i}=arguments[0];const r=255*(1-n)*(1-i),s=255*(1-e)*(1-i),a=255*(1-t)*(1-i);return{r,g:s,b:a}}function du(n,e,t){if(arguments.length==1)var{h:n,s:e,v:t}=arguments[0];var i=n,r=e,s=t;i>=360&&(i=0);const a=r*s,o=a*(1-Math.abs(i/60%2-1)),l=s-a;let c=[];return 0<=i&&i<60?c=[a,o,0]:60<=i&&i<120?c=[o,a,0]:120<=i&&i<180?c=[0,a,o]:180<=i&&i<240?c=[0,o,a]:240<=i&&i<300?c=[o,0,a]:300<=i&&i<360&&(c=[a,0,o]),{r:Bt((c[0]+l)*255),g:Bt((c[1]+l)*255),b:Bt((c[2]+l)*255)}}function Dy(n,e,t){if(arguments.length==1)var{h:n,s:e,v:t}=arguments[0];const i=du(n,e,t);return Cs(i.r,i.g,i.b)}function Y4(n,e,t,i){if(arguments.length==1){var{y:n,cr:e,cb:t,bit:i}=arguments[0];i=i||0}const r=n+1.402*(e-i),s=n-.344*(t-i)-.714*(e-i),a=n+1.772*(t-i);return{r:Math.ceil(r),g:Math.ceil(s),b:Math.ceil(a)}}function dg(n,e,t=.5,i="hex"){var r=Fy(n,e,t);return Is(r,i)}function Fy(n,e,t=.5){const i=typeof n.a=="undefined"?1:n.a,r=typeof e.a=="undefined"?1:e.a;return{r:Bt(n.r+(e.r-n.r)*t),g:Bt(n.g+(e.g-n.g)*t),b:Bt(n.b+(e.b-n.b)*t),a:Bt(i+(r-i)*t,100)}}function Dr(n,e=5){if(!n)return[];typeof n=="string"&&(n=Zf(n)),n=n||[];for(var t=n.length,i=[],r=0;r=128?"black":"white"}function q4(n,e=10){n=_y(n);let t=[],i=e-(n.length-1),r=i;for(var s=1,a=n.length;s=n){e=ya[i-1],t=ya[i];break}return e&&t?mo(e,t,(n-e.start)/(t.start-e.start)):ya[0].rgb}function eR(){for(var n=0,e=ya.length;n({color:t}));return e.sort((t,i)=>{const r=bi(t.color),s=bi(i.color);return r.h>s.h?1:-1}),e}},iR=Object.freeze(Object.defineProperty({__proto__:null,default:tR},Symbol.toStringTag,{value:"Module"})),rR=Object.values({"./colors_list/material-amber.js":GA,"./colors_list/material-blue.js":WA,"./colors_list/material-bluegray.js":KA,"./colors_list/material-brown.js":JA,"./colors_list/material-cyan.js":t4,"./colors_list/material-deeporange.js":n4,"./colors_list/material-deeppurple.js":o4,"./colors_list/material-gray.js":h4,"./colors_list/material-green.js":p4,"./colors_list/material-indigo.js":m4,"./colors_list/material-lightblue.js":b4,"./colors_list/material-lightgreen.js":S4,"./colors_list/material-lime.js":$4,"./colors_list/material-orange.js":C4,"./colors_list/material-pink.js":L4,"./colors_list/material-purple.js":R4,"./colors_list/material-red.js":V4,"./colors_list/material-teal.js":N4,"./colors_list/material-yellow.js":G4,"./colors_list/opencolor-gray.js":W4,"./colors_list/random.js":iR}).map(n=>n.default),iie="";class nR extends ge{initState(){return{mode:"grid",preset:"random",isLoaded:!1,colors:rR}}getTools(){return'
      '}[ve("$tools")](){const e=this.state.colors.map(t=>({value:t.key,text:t.title}));return W("SelectEditor",{key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[U("changePreset")](e,t){this.setState({[e]:t})}template(){return` + `);return e.join("")}modifyBoxShadow(){var e=this.state.boxShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e=""){if(e)this.state.boxShadows=jr.parseStyle(e);else{const t=new jr({color:"black",inset:Ir.OUTSET,offsetX:2,offsetY:2,blurRadius:3,spreadRadius:1});this.state.boxShadows.push(t)}this.refresh(),this.modifyBoxShadow()}[A("$add")](){this.trigger("add")}[pr("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$shadowList .shadow-item")+Ve](){}sortItem(e,t,r){e.splice(r+(t({color:s}));var yw={title:"material amber",key:"material-amber",execute:function(){return vw}},bw=Object.freeze(Object.defineProperty({__proto__:null,default:yw},Symbol.toStringTag,{value:"Module"}));const xw=["#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#2196f3","#82b1ff","#448aff","#2979ff","#2962ff"].map(s=>({color:s}));var $w={title:"material blue",key:"material-blue",execute:function(){return xw}},_w=Object.freeze(Object.defineProperty({__proto__:null,default:$w},Symbol.toStringTag,{value:"Module"}));const Sw=["#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"].map(s=>({color:s}));var Pw={title:"material bluegray",key:"material-bluegray",execute:function(){return Sw}},ww=Object.freeze(Object.defineProperty({__proto__:null,default:Pw},Symbol.toStringTag,{value:"Module"}));const Cw=["#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"].map(s=>({color:s}));var Tw={title:"material brown",key:"material-brown",execute:function(){return Cw}},kw=Object.freeze(Object.defineProperty({__proto__:null,default:Tw},Symbol.toStringTag,{value:"Module"}));const Mw=["#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#00bcd4","#84ffff","#18ffff","#00e5ff","#00b8d4"].map(s=>({color:s}));var Iw={title:"material cyan",key:"material-cyan",execute:function(){return Mw}},Ew=Object.freeze(Object.defineProperty({__proto__:null,default:Iw},Symbol.toStringTag,{value:"Module"}));const Lw=["#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"].map(s=>({color:s}));var Vw={title:"material deep orange",key:"material-deeporange",execute:function(){return Lw}},Ow=Object.freeze(Object.defineProperty({__proto__:null,default:Vw},Symbol.toStringTag,{value:"Module"}));const Rw=["#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#673ab7","#b388ff","#7c4dff","#651fff","#6200ea"].map(s=>({color:s}));var jw={title:"material deep purple",key:"material-deeppurple",execute:function(){return Rw}},zw=Object.freeze(Object.defineProperty({__proto__:null,default:jw},Symbol.toStringTag,{value:"Module"}));const Aw=["#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"].map(s=>({color:s}));var Dw={title:"material gray",key:"material-gray",execute:function(){return Aw}},Fw=Object.freeze(Object.defineProperty({__proto__:null,default:Dw},Symbol.toStringTag,{value:"Module"}));const Bw=["#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"].map(s=>({color:s}));var Nw={title:"material green",key:"material-green",execute:function(){return Bw}},Gw=Object.freeze(Object.defineProperty({__proto__:null,default:Nw},Symbol.toStringTag,{value:"Module"}));const Hw=["#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#3f51b5","#8c9eff","#536dfe","#3d5afe","#304ffe"].map(s=>({color:s}));var Uw={title:"material indigo",key:"material-indigo",execute:function(){return Hw}},Ww=Object.freeze(Object.defineProperty({__proto__:null,default:Uw},Symbol.toStringTag,{value:"Module"}));const Xw=["#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#03a9f4","#80d8ff","#40c4ff","#00b0ff","#0091ea"].map(s=>({color:s}));var Yw={title:"material light blue",key:"material-lightblue",execute:function(){return Xw}},Kw=Object.freeze(Object.defineProperty({__proto__:null,default:Yw},Symbol.toStringTag,{value:"Module"}));const Zw=["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"].map(s=>({color:s}));var qw={title:"material lightgreen",key:"material-lightgreen",execute:function(){return Zw}},Qw=Object.freeze(Object.defineProperty({__proto__:null,default:qw},Symbol.toStringTag,{value:"Module"}));const Jw=["#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"].map(s=>({color:s}));var e5={title:"material lime",key:"material-lime",execute:function(){return Jw}},t5=Object.freeze(Object.defineProperty({__proto__:null,default:e5},Symbol.toStringTag,{value:"Module"}));const r5=["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"].map(s=>({color:s}));var i5={title:"material orange",key:"material-orange",execute:function(){return r5}},s5=Object.freeze(Object.defineProperty({__proto__:null,default:i5},Symbol.toStringTag,{value:"Module"}));const a5=["#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#e91e63","#ff80ab","#ff4081","#f50057","#c51162"].map(s=>({color:s}));var n5={title:"material pink",key:"material-pink",execute:function(){return a5}},o5=Object.freeze(Object.defineProperty({__proto__:null,default:n5},Symbol.toStringTag,{value:"Module"}));const l5=["#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#9c27b0","#ea80fc","#e040fb","#d500f9","#aa00ff"].map(s=>({color:s}));var c5={title:"material purple",key:"material-purple",execute:function(){return l5}},h5=Object.freeze(Object.defineProperty({__proto__:null,default:c5},Symbol.toStringTag,{value:"Module"}));const d5=["#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#f44336","#ff8a80","#ff5252","#ff1744","#d50000"].map(s=>({color:s}));var u5={title:"material red",key:"material-red",execute:function(){return d5}},p5=Object.freeze(Object.defineProperty({__proto__:null,default:u5},Symbol.toStringTag,{value:"Module"}));const g5=["#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#009688","#a7ffeb","#64ffda","#1de9b6","#00bfa5"].map(s=>({color:s}));var f5={title:"material teal",key:"material-teal",execute:function(){return g5}},m5=Object.freeze(Object.defineProperty({__proto__:null,default:f5},Symbol.toStringTag,{value:"Module"}));const v5=["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"].map(s=>({color:s}));var y5={title:"material yellow",key:"material-yellow",execute:function(){return v5}},b5=Object.freeze(Object.defineProperty({__proto__:null,default:y5},Symbol.toStringTag,{value:"Module"}));const x5=["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"].map(s=>({color:s}));var $5={title:"opencolor gray",resource:"https://yeun.github.io/open-color/",key:"opencolor-gray",execute:function(){return x5}},_5=Object.freeze(Object.defineProperty({__proto__:null,default:$5},Symbol.toStringTag,{value:"Module"}));function S5(s,e,t,r){if(arguments.length==1)var{c:s,m:e,y:t,k:r}=arguments[0];const i=255*(1-s)*(1-r),a=255*(1-e)*(1-r),n=255*(1-t)*(1-r);return{r:i,g:a,b:n}}function Oo(s,e,t){if(arguments.length==1)var{h:s,s:e,v:t}=arguments[0];var r=s,i=e,a=t;r>=360&&(r=0);const n=i*a,o=n*(1-Math.abs(r/60%2-1)),l=a-n;let c=[];return 0<=r&&r<60?c=[n,o,0]:60<=r&&r<120?c=[o,n,0]:120<=r&&r<180?c=[0,n,o]:180<=r&&r<240?c=[0,o,n]:240<=r&&r<300?c=[o,0,n]:300<=r&&r<360&&(c=[n,0,o]),{r:Ue((c[0]+l)*255),g:Ue((c[1]+l)*255),b:Ue((c[2]+l)*255)}}function Cu(s,e,t){if(arguments.length==1)var{h:s,s:e,v:t}=arguments[0];const r=Oo(s,e,t);return bi(r.r,r.g,r.b)}function P5(s,e,t,r){if(arguments.length==1){var{y:s,cr:e,cb:t,bit:r}=arguments[0];r=r||0}const i=s+1.402*(e-r),a=s-.344*(t-r)-.714*(e-r),n=s+1.772*(t-r);return{r:Math.ceil(i),g:Math.ceil(a),b:Math.ceil(n)}}function bc(s,e,t=.5,r="hex"){var i=Tu(s,e,t);return $i(i,r)}function Tu(s,e,t=.5){const r=typeof s.a=="undefined"?1:s.a,i=typeof e.a=="undefined"?1:e.a;return{r:Ue(s.r+(e.r-s.r)*t),g:Ue(s.g+(e.g-s.g)*t),b:Ue(s.b+(e.b-s.b)*t),a:Ue(r+(i-r)*t,100)}}function lr(s,e=5){if(!s)return[];typeof s=="string"&&(s=ac(s)),s=s||[];for(var t=s.length,r=[],i=0;i=128?"black":"white"}function C5(s,e=10){s=cu(s);let t=[],r=e-(s.length-1),i=r;for(var a=1,n=s.length;a=s){e=Ji[r-1],t=Ji[r];break}return e&&t?Is(e,t,(s-e.start)/(t.start-e.start)):Ji[0].rgb}function I5(){for(var s=0,e=Ji.length;s({color:t}));return e.sort((t,r)=>{const i=pt(t.color),a=pt(r.color);return i.h>a.h?1:-1}),e}},L5=Object.freeze(Object.defineProperty({__proto__:null,default:E5},Symbol.toStringTag,{value:"Module"})),V5=Object.values({"./colors_list/material-amber.js":bw,"./colors_list/material-blue.js":_w,"./colors_list/material-bluegray.js":ww,"./colors_list/material-brown.js":kw,"./colors_list/material-cyan.js":Ew,"./colors_list/material-deeporange.js":Ow,"./colors_list/material-deeppurple.js":zw,"./colors_list/material-gray.js":Fw,"./colors_list/material-green.js":Gw,"./colors_list/material-indigo.js":Ww,"./colors_list/material-lightblue.js":Kw,"./colors_list/material-lightgreen.js":Qw,"./colors_list/material-lime.js":t5,"./colors_list/material-orange.js":s5,"./colors_list/material-pink.js":o5,"./colors_list/material-purple.js":h5,"./colors_list/material-red.js":p5,"./colors_list/material-teal.js":m5,"./colors_list/material-yellow.js":b5,"./colors_list/opencolor-gray.js":_5,"./colors_list/random.js":L5}).map(s=>s.default),Z7="";class O5 extends Y{initState(){return{mode:"grid",preset:"random",isLoaded:!1,colors:V5}}getTools(){return'
      '}[G("$tools")](){const e=this.state.colors.map(t=>({value:t.key,text:t.title}));return R("SelectEditor",{key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[M("changePreset")](e,t){this.setState({[e]:t})}template(){return`
      ${this.getTools()}
      - `}[se("$title")](){this.$el.toggleClass("is-open")}[ve("$colorList")](){var e=this.state.colors.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>`
      `);return t}executeColor(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshColorAssets")):window.alert("Please select a project.")}[se("$colorList .preview")](e){const t=e.$dt.$(".color-view").css("background-color");this.modifyColorPicker(t)}modifyColorPicker(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.props.params)}}var rie="";class sR extends ge{initState(){return{params:this.props.params,color:this.props.color||"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyColor()}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.color,this.state.params)}changeColor(e){this.setState({color:e})}setValue(e){this.changeColor(e)}[$e("$miniView")](){return{style:{"background-color":this.state.color}}}template(){return` + `}[A("$title")](){this.$el.toggleClass("is-open")}[G("$colorList")](){var e=this.state.colors.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>`
      `);return t}executeColor(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshColorAssets")):window.alert("Please select a project.")}[A("$colorList .preview")](e){const t=e.$dt.$(".color-view").css("background-color");this.modifyColorPicker(t)}modifyColorPicker(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.props.params)}}var q7="";class R5 extends Y{initState(){return{params:this.props.params,color:this.props.color||"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyColor()}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.color,this.state.params)}changeColor(e){this.setState({color:e})}setValue(e){this.changeColor(e)}[ne("$miniView")](){return{style:{"background-color":this.state.color}}}template(){return`
      @@ -306,8 +311,8 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[se("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.refs.$miniView.cssText(`background-color: ${e}`),this.updateData({color:e})},color:this.state.color})}}var nie="";class aR extends ge{initState(){const e=this.props.value||"rgba(0, 0, 0, 1)",t=Dn(this.props.compact)?this.props.compact:this.props.compact==="true",i=Dn(this.props.mini)?this.props.mini:this.props.mini==="true";return{label:this.props.label,value:e,compact:t,mini:i,color:bi(e),colorFocus:!1,opacityFocus:!1}}updateData(e={}){this.setState(e),this.modifyColor()}updateEndData(e={}){this.setState(e),this.modifyEndColor()}getValue(){return this.state.value}setValue(e){this.changeColor(e)}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}modifyEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}changeColor(e){this.setState({value:e,color:bi(e)})}get alpha(){return this.state.color.a*100}get hexColor(){return Ay(this.state.color,"hex")}get fullColor(){return Is(this.state.color,this.state.color.type)}refresh(){this.refreshColorView(),this.refs.$colorCode.val(this.state.value),this.refs.$opacityCode.val(this.alpha)}refreshColorView(){this.bindData("$miniView1"),this.bindData("$miniView2")}template(){var{label:e,compact:t,mini:i}=this.state,r=e?"has-label":"",s=t?"compact":"",a=i?"mini":"";return` -
      + `}[A("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.refs.$miniView.cssText(`background-color: ${e}`),this.updateData({color:e})},color:this.state.color})}}var Q7="";class j5 extends Y{initState(){const e=this.props.value||"rgba(0, 0, 0, 1)",t=ai(this.props.compact)?this.props.compact:this.props.compact==="true",r=ai(this.props.mini)?this.props.mini:this.props.mini==="true";return{label:this.props.label,value:e,compact:t,mini:r,color:pt(e),colorFocus:!1,opacityFocus:!1}}updateData(e={}){this.setState(e),this.modifyColor()}updateEndData(e={}){this.setState(e),this.modifyEndColor()}getValue(){return this.state.value}setValue(e){this.changeColor(e)}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}modifyEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}changeColor(e){this.setState({value:e,color:pt(e)})}get alpha(){return this.state.color.a*100}get hexColor(){return $u(this.state.color,"hex")}get fullColor(){return $i(this.state.color,this.state.color.type)}refresh(){this.refreshColorView(),this.refs.$colorCode.val(this.state.value),this.refs.$opacityCode.val(this.alpha)}refreshColorView(){this.bindData("$miniView1"),this.bindData("$miniView2")}template(){var{label:e}=this.state;return` +
      ${e?``:""}
      @@ -324,58 +329,58 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[$e("$el")](){return{class:{focused:this.state.colorFocus||this.state.opacityFocus}}}[$e("$miniView1")](){return{style:{"background-color":this.hexColor}}}[$e("$miniView2")](){return{style:{"background-color":this.fullColor}}}[$e("$colorCode")](){return{value:this.props.format?this.hexColor:this.state.value}}[$e("$opacityCode")](){return{value:this.alpha}}[Ec("$colorCode")](){this.setState({colorFocus:!0}),this.refs.$colorCode.select()}[na("$colorCode")](){this.setState({colorFocus:!1})}[Ec("$opacityCode")](){this.setState({opacityFocus:!0}),this.refs.$opacityCode.select()}[na("$opacityCode")](){this.setState({opacityFocus:!1})}[se("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.updateData({value:e,color:bi(e)})},changeEndEvent:e=>{this.updateEndData({value:e,color:bi(e)})},color:this.state.value},null,this.$el.rect())}[se("$remove")](){this.updateData({value:""})}[fi("$el .color-input input")](e){var t=e.$dt.value;this.updateData({value:t,color:bi(t)}),this.refreshColorView()}[fi("$el .opacity-input input")](e){var t=+e.$dt.value;t=Math.max(0,Math.min(100,t));const i=bi(this.state.value);i.a=Bt(t/100,1e3);const r=Is(i,i.type);this.updateData({value:r,color:i}),this.refreshColorView()}}var sie="";class oR extends ge{initState(){return{inspector:this.props.inspector}}template(){return` + `}[ne("$el")](){var{label:e,compact:t,mini:r,colorFocus:i,opacityFocus:a}=this.state;return{class:["elf--color-view-editor",{"has-label":e,compact:t,mini:r},{focused:i||a}]}}[ne("$miniView1")](){return{style:{"background-color":this.hexColor}}}[ne("$miniView2")](){return{style:{"background-color":this.fullColor}}}[ne("$colorCode")](){return{value:this.props.format?this.hexColor:this.state.value}}[ne("$opacityCode")](){return{value:this.alpha}}[ja("$colorCode")](){this.setState({colorFocus:!0}),this.refs.$colorCode.select()}[Fi("$colorCode")](){this.setState({colorFocus:!1})}[ja("$opacityCode")](){this.setState({opacityFocus:!0}),this.refs.$opacityCode.select()}[Fi("$opacityCode")](){this.setState({opacityFocus:!1})}[A("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.updateData({value:e,color:pt(e)})},changeEndEvent:e=>{this.updateEndData({value:e,color:pt(e)})},color:this.state.value},null,this.$el.rect())}[A("$remove")](){this.updateData({value:""})}[dt("$el .color-input input")](e){var t=e.$dt.value;this.updateData({value:t,color:pt(t)}),this.refreshColorView()}[dt("$el .opacity-input input")](e){var t=+e.$dt.value;t=Math.max(0,Math.min(100,t));const r=pt(this.state.value);r.a=Ue(t/100,1e3);const i=$i(r,r.type);this.updateData({value:i,color:r}),this.refreshColorView()}}var J7="";class z5 extends Y{initState(){return{inspector:this.props.inspector}}template(){return`
      `}getPropertyEditor(e,t){return t.type==="folder"?`
      - +
        - ${t.children.map((i,r)=>`
      • ${this.getPropertyEditor(`${e}${r}`,i)}
        • `).join("")} + ${t.children.map((r,i)=>`
      • ${this.getPropertyEditor(`${e}${i}`,r)}
        • `).join("")}
      `:t.type==="column"?`
      - ${t.columns.map((r,s)=>r==="-"?'
      ':r.type==="label"?`
      - + ${t.columns.map((i,a)=>i==="-"?'
      ':i.type==="label"?`
      +
      `:`
      - ${this.getPropertyEditor(`${e}${s}`,r)} + ${this.getPropertyEditor(`${e}${a}`,i)}
      `).join("")}
      - `:W(t.editor,Ve(P({},t.editorOptions),{onchange:(i,r)=>{const s=Ue(t.convert)?t.convert(i,r):r;this.trigger("changeComponentValue",i,s)},ref:`${t.key}${e}`,key:t.key,value:t.defaultValue}))}[ve("$body")](){var t=this.state.inspector.map((i,r)=>ni(i)||i.type==="label"?` + `:R(t.editor,se(b({},t.editorOptions),{onchange:(r,i)=>{const a=de(t.convert)?t.convert(r,i):i;this.trigger("changeComponentValue",r,a)},ref:`${t.key}${e}`,key:t.key,value:t.defaultValue}))}[G("$body")](){var t=this.state.inspector.map((r,i)=>it(r)||r.type==="label"?`
      - -
      `:i.type==="folder"?` + +
      `:r.type==="folder"?`
      - ${this.getPropertyEditor(r,i)} + ${this.getPropertyEditor(i,r)}
      `:`
      - ${this.getPropertyEditor(r,i)} + ${this.getPropertyEditor(i,r)}
      - `);return t}setInspector(e){this.setState({inspector:e})}setValue(e={}){Object.keys(e).forEach(t=>{const i=e[t];this.eachChildren(r=>{r.setValue&&r.props.key===t&&r.setValue(i)})})}getValue(){const e={};return this.eachChildren(t=>{Ue(t.getValue)&&t.props.key&&(e[t.props.key]=t.getValue())}),e}[Me("changeComponentValue")](e,t){this.parent.trigger(this.props.onchange,e,t)}[se("$el .component-folder > label")](e){e.$dt.closest("component-folder").toggleClass("close")}}var aie="";class lR extends ge{initState(){return{hideTitle:this.props["hide-title"]==="true",hideRefresh:this.props["hide-refresh"]==="true",properties:[]}}updateData(e){this.setState(e,!1),this.modifyProperty()}modifyProperty(){this.parent.trigger(this.props.onchange,this.state.properties)}template(){const e=this.state.hideTitle?"hide-title":"",t=this.state.hideRefresh?"hide-refresh":"";return` + `);return t}setInspector(e){this.setState({inspector:e})}setValue(e={}){Object.keys(e).forEach(t=>{const r=e[t];this.eachChildren(i=>{i.setValue&&i.props.key===t&&i.setValue(r)})})}getValue(){const e={};return this.eachChildren(t=>{de(t.getValue)&&t.props.key&&(e[t.props.key]=t.getValue())}),e}[Z("changeComponentValue")](e,t){this.parent.trigger(this.props.onchange,e,t)}[A("$el .component-folder > label")](e){e.$dt.closest("component-folder").toggleClass("close")}}var eD="";class A5 extends Y{initState(){return{hideTitle:this.props["hide-title"]==="true",hideRefresh:this.props["hide-refresh"]==="true",properties:[]}}updateData(e){this.setState(e,!1),this.modifyProperty()}modifyProperty(){this.parent.trigger(this.props.onchange,this.state.properties)}template(){const e=this.state.hideTitle?"hide-title":"",t=this.state.hideRefresh?"hide-refresh":"";return`
      ${this.makePropertySelect()} - +
      - `}getPropertyDefaultValue(e){switch(e){case"animation-timing-function":case"box-shadow":case"text-shadow":case"color":case"background-image":case"background-color":case"text-fill-color":case"text-stroke-color":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"playTime":return y.string("");case"offset-distance":return y.percent(0);case"rotate":return y.deg(0);case"mix-blend-mode":return"normal";case"clip-path":return"";case"opacity":return 1;default:return 0}}[se("$addProperty")](){var e=this.getRef("$propertySelect").value,t=this.state.properties.find(s=>s.key===e);if(t){window.alert(`${e} is already added.`);return}var i=this.getPropertyDefaultValue(e),r=this.$context.selection.current;r&&(i=r[e]),this.state.properties.push({key:e,value:i}),this.refresh(),this.modifyProperty()}makeIndivisualPropertyColorEditor(e,t){var i=e.key.split("-").join("");return` + `}getPropertyDefaultValue(e){switch(e){case"animation-timing-function":case"box-shadow":case"text-shadow":case"color":case"background-image":case"background-color":case"text-fill-color":case"text-stroke-color":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"playTime":return p.string("");case"offset-distance":return p.percent(0);case"rotate":return p.deg(0);case"mix-blend-mode":return"normal";case"clip-path":return"";case"opacity":return 1;default:return 0}}[A("$addProperty")](){var e=this.getRef("$propertySelect").value,t=this.state.properties.find(a=>a.key===e);if(t){window.alert(`${e} is already added.`);return}var r=this.getPropertyDefaultValue(e),i=this.$context.selection.current;i&&(r=i[e]),this.state.properties.push({key:e,value:r}),this.refresh(),this.modifyProperty()}makeIndivisualPropertyColorEditor(e,t){var r=e.key.split("-").join("");return`
      - + `}makeCustomePropertyEditor(e,t){return`
      - ${W(e.editor,{onchange:"changeSelect",ref:`$customProperty${t}`,key:e.key,value:e.value})} + ${R(e.editor,{onchange:"changeSelect",ref:`$customProperty${t}`,key:e.key,value:e.value})}
      `}makeIndivisualPropertyEditor(e,t){return e.key==="background-image"?`
      - ${W("BackgroundImageEditor",{ref:`$backgroundImage${t}`,key:e.key,"hide-title":this.state.hideTitle,value:e.value,onchange:"changeKeyValue"})} + ${R("BackgroundImageEditor",{ref:`$backgroundImage${t}`,key:e.key,"hide-title":this.state.hideTitle,value:e.value,onchange:"changeKeyValue"})}
      `:e.key==="filter"?`
      @@ -415,7 +420,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP ref='$fillRule${t}' key='fill-rule' icon="true" - options=${ta(["nonzero","evenodd"])} + options=${ji(["nonzero","evenodd"])} value="${e.value}" onchange="changeSelect" />
      @@ -425,7 +430,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP ref='$strokeLinecap${t}' key='stroke-linecap' icon="true" - options=${ta(["butt","round","square"])} + options=${ji(["butt","round","square"])} value="${e.value}" onchange="changeSelect" /> @@ -435,7 +440,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP ref='$strokeLinejoin${t}' key='stroke-linejoin' icon="true" - options=${ta(["miter","arcs","bevel","miter-clip","round"])} + options=${ji(["miter","arcs","bevel","miter-clip","round"])} value="${e.value}" onchange="changeSelect" /> @@ -487,14 +492,14 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP ??? - `}[Me("changeKeyValue")](e,t){this.modifyPropertyValue(e,t)}[Me("changeBorderRadius")](e){this.modifyPropertyValue("border-radius",e)}[Me("changeClipPath")](e){this.modifyPropertyValue("clip-path",e)}[Me("changeColorProperty")](e,t){this.modifyPropertyValue(e,t)}[Me("changeBackgroundImageProperty")](e,t){this.modifyPropertyValue(e,t)}[Me("changeFilterProperty")](e){this.modifyPropertyValue("filter",e)}[Me("changeBackdropFilterProperty")](e){this.modifyPropertyValue("backdrop-filter",e)}[Me("changeBoxShadowProperty")](e){this.modifyPropertyValue("box-shadow",e)}[Me("changeTextShadowProperty")](e){this.modifyPropertyValue("text-shadow",e)}[Me("changeVar")](e){this.modifyPropertyValue("var",e)}[Me("changeTransform")](e){this.modifyPropertyValue("transform",e)}[Me("changeTransformOrigin")](e){this.modifyPropertyValue("transform-origin",e)}[Me("changePerspectiveOrigin")](e){this.modifyPropertyValue("perspective-origin",e)}[Me("changeSelect")](e,t){this.modifyPropertyValue(e,t)}makePropertyEditor(e,t){if(e.editor)return this.makeCustomePropertyEditor(e,t);switch(e.key){case"animation-timing-function":case"box-shadow":case"text-shadow":case"background-image":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"mix-blend-mode":case"border":case"border-radius":case"clip-path":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"stroke-dasharray":case"d":case"points":case"offset-path":case"playTime":return this.makeIndivisualPropertyEditor(e,t);case"color":case"background-color":case"text-fill-color":case"text-stroke-color":case"stroke":case"fill":return this.makeIndivisualPropertyColorEditor(e,t);case"opacity":case"fill-opacity":case"stroke-dashoffset":case"offset-distance":let i=0,r=1,s=.01;return` + `}[Z("changeKeyValue")](e,t){this.modifyPropertyValue(e,t)}[Z("changeBorderRadius")](e){this.modifyPropertyValue("border-radius",e)}[Z("changeClipPath")](e){this.modifyPropertyValue("clip-path",e)}[Z("changeColorProperty")](e,t){this.modifyPropertyValue(e,t)}[Z("changeBackgroundImageProperty")](e,t){this.modifyPropertyValue(e,t)}[Z("changeFilterProperty")](e){this.modifyPropertyValue("filter",e)}[Z("changeBackdropFilterProperty")](e){this.modifyPropertyValue("backdrop-filter",e)}[Z("changeBoxShadowProperty")](e){this.modifyPropertyValue("box-shadow",e)}[Z("changeTextShadowProperty")](e){this.modifyPropertyValue("text-shadow",e)}[Z("changeVar")](e){this.modifyPropertyValue("var",e)}[Z("changeTransform")](e){this.modifyPropertyValue("transform",e)}[Z("changeTransformOrigin")](e){this.modifyPropertyValue("transform-origin",e)}[Z("changePerspectiveOrigin")](e){this.modifyPropertyValue("perspective-origin",e)}[Z("changeSelect")](e,t){this.modifyPropertyValue(e,t)}makePropertyEditor(e,t){if(e.editor)return this.makeCustomePropertyEditor(e,t);switch(e.key){case"animation-timing-function":case"box-shadow":case"text-shadow":case"background-image":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"mix-blend-mode":case"border":case"border-radius":case"clip-path":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"stroke-dasharray":case"d":case"points":case"offset-path":case"playTime":return this.makeIndivisualPropertyEditor(e,t);case"color":case"background-color":case"text-fill-color":case"text-stroke-color":case"stroke":case"fill":return this.makeIndivisualPropertyColorEditor(e,t);case"opacity":case"fill-opacity":case"stroke-dashoffset":case"offset-distance":let r=0,i=1,a=.01;return`
      - `}}[Me("changeRangeEditor")](e,t){this.modifyPropertyValue(e,t+"")}searchKey(e,t){this.state.properties.filter(i=>i.key===e).forEach(t)}modifyPropertyValue(e,t){this.searchKey(e,i=>{i.value=t}),this.modifyProperty()}makePropertySelect(){return` + `}}[Z("changeRangeEditor")](e,t){this.modifyPropertyValue(e,t+"")}searchKey(e,t){this.state.properties.filter(r=>r.key===e).forEach(t)}modifyPropertyValue(e,t){this.searchKey(e,r=>{r.value=t}),this.modifyProperty()}makePropertySelect(){return` - `}[ve("$property")](){return this.state.properties.map((e,t)=>` + `}[G("$property")](){return this.state.properties.map((e,t)=>`
      - +
      - +
      ${this.makePropertyEditor(e,t)}
      - `)}[U("showCSSPropertyEditor")](e=[]){this.setState({properties:e}),this.refresh()}[se("$property .remove")](e){var t=+e.$dt.attr("data-index");this.state.properties.splice(t,1),this.refresh(),this.modifyProperty()}[se("$property .refresh")](){this.parent.trigger("refreshPropertyValue")}}var oie="";class cR extends ge{initState(){return{key:this.props.key,currentBezier:fo(this.props.value||"linear"),isAnimating:Di(this.props.isAnimating)?!0:Boolean(this.props.isAnimating),currentBezierIndex:0,selectedColor:"#609de2",animatedColor:"#609de266",curveColor:"#609de2",baseLineColor:"rgba(117, 117, 117, 0.46)"}}afterRender(){window.setTimeout(()=>{this.refresh()},10)}template(){const e=go(this.state.currentBezier,150,150),t=Jc(this.state.currentBezier,150,150),i=go("ease",30,30),r=Jc("ease",30,30),s=go("ease-in",30,30),a=Jc("ease-in",30,30),o=go("ease-out",30,30),l=Jc("ease-out",30,30);return` + `)}[M("showCSSPropertyEditor")](e=[]){this.setState({properties:e}),this.refresh()}[A("$property .remove")](e){var t=+e.$dt.attr("data-index");this.state.properties.splice(t,1),this.refresh(),this.modifyProperty()}[A("$property .refresh")](){this.parent.trigger("refreshPropertyValue")}}var tD="";class D5 extends Y{initState(){return{key:this.props.key,currentBezier:ks(this.props.value||"linear"),isAnimating:Ct(this.props.isAnimating)?!0:Boolean(this.props.isAnimating),currentBezierIndex:0,selectedColor:"#609de2",animatedColor:"#609de266",curveColor:"#609de2",baseLineColor:"rgba(117, 117, 117, 0.46)"}}afterRender(){window.setTimeout(()=>{this.refresh()},10)}template(){const e=Ms(this.state.currentBezier,150,150),t=rn(this.state.currentBezier,150,150),r=Ms("ease",30,30),i=rn("ease",30,30),a=Ms("ease-in",30,30),n=rn("ease-in",30,30),o=Ms("ease-out",30,30),l=rn("ease-out",30,30);return`
      -
      ${We.chevron_left}
      +
      ${oe.chevron_left}
      -
      ${We.chevron_right}
      +
      ${oe.chevron_right}
      - - + +
      - - + +
      @@ -626,69 +631,69 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[$e("$animationArea")](){return{style:{display:this.state.isAnimating?"block":"none"}}}[$e("$bezierCanvas")](){return{d:go(this.state.currentBezier,150,150)}}[$e("$bezierCanvasPoint")](){return{d:Jc(this.state.currentBezier,150,150)}}updateData(e={}){this.setState(e),this.modifyCubicBezier()}modifyCubicBezier(){this.parent.trigger(this.props.onchange,this.state.key,$y(this.state.currentBezier))}[se("$left")](){var{currentBezier:t,currentBezierIndex:e}=this.state;e==0?e=va.length-1:--e;var t=va[e];this.updateData({currentBezierIndex:e,currentBezier:t}),this.refresh()}[se("$right")](){var{currentBezier:e,currentBezierIndex:t}=this.state;t=++t%va.length,e=va[t],this.updateData({currentBezierIndex:t,currentBezier:e}),this.refresh()}[se("$text")](){var e=[...va[this.state.currentBezierIndex]];this.updateData({currentBezier:e}),this.refresh()}[se("$itemList .item")](e){var t=e.$dt.attr("data-bezier");this.refs.$itemList.attr("data-selected-value",t);var i=fo(t);this.updateData({currentBezier:i}),this.refresh()}refresh(){this.refreshEasingText(),this.refreshBezierCanvas()}refreshBezierCanvas(){this.bindData("$bezierCanvas"),this.bindData("$bezierCanvasPoint"),this.refreshPointer(),this.drawPoint()}refreshEasingText(){this.refs.$text.html(this.state.currentBezier[4]||"ease")}refreshPointer(){var e=fo(this.state.currentBezier),t=this.refs.$control.width(),i=this.refs.$control.height(),r=e[0]*t,s=(1-e[1])*i;this.refs.$pointer1.css({left:y.px(r),top:y.px(s)}),r=e[2]*t,s=(1-e[3])*i,this.refs.$pointer2.css({left:y.px(r),top:y.px(s)})}drawPoint(){this.state.isAnimating!==!1&&(this.timer&&window.clearTimeout(this.timer),this.animationTimer&&window.clearTimeout(this.animationTimer),this.timer=window.setTimeout(()=>{this.animationPoint()},100))}start(e){var t=this.animationCanvasData.func(e),i=10+(this.animationCanvasData.width-20)*t.y,r=10,s=this.animationCanvasData.context;s.beginPath(),s.arc(i,r,5,0,2*Math.PI),s.fill(),s.stroke(),s.closePath(),!(e>=1)&&(this.animationTimer=window.setTimeout(()=>{this.start(e+.05)},50))}animationPoint(){const e=fo(this.state.currentBezier);var t=Ey($y(e));this.refs.$animationCanvas.clear();var i=this.refs.$animationCanvas.width(),r=this.refs.$animationCanvas.height(),s=this.refs.$animationCanvas.context();s.fillStyle=this.state.animatedColor,s.strokeStyle=this.state.selectedColor,s.lineWidth=1,this.animationCanvasData={func:t,width:i,height:r,context:s},this.start(0)}setPosition(e){var t=this.refs.$control.width(),i=this.refs.$control.height(),r=this.refs.$control.offset().left,s=this.refs.$control.offset().top,a=e,o=a.x;0>o?o=0:a.x>document.body.clientWidth&&(o=document.body.clientWidth),o-=r,o<0&&(o=0),to.trim()).map(o=>y.parse(o)),i=y.percent(0),r=y.percent(0),s=y.percent(0),a=y.percent(0);return t.length===1?(i=t[0].clone(),r=t[0].clone(),s=t[0].clone(),a=t[0].clone()):t.length===2?(i=t[0].clone(),r=t[1].clone(),s=t[0].clone(),a=t[1].clone()):t.length===3?(i=t[0].clone(),r=t[1].clone(),s=t[2].clone(),a=t[1].clone()):t.length===4&&(i=t[0].clone(),r=t[1].clone(),s=t[2].clone(),a=t[3].clone()),[t.length,i,r,s,a]}}const jy=[{key:"top",title:"Top"},{key:"right",title:"Right"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"}];class hR extends ge{initState(){var[e,t,i,r,s]=pg.parse(this.props.value);return{isAll:e===1,all:t.clone(),top:t.clone(),right:i.clone(),bottom:r.clone(),left:s.clone()}}template(){return"
      "}[U("changeBorderRadius")](e,t){e==="all"&&jy.forEach(i=>{this.state[i.key]=t.clone(),this.children[`$${i.key}`].setValue(t.clone())}),this.updateData({[e]:t})}[ve("$body")](){var e=this.state.isAll?"all":"partitial",t=this.state.all,i=e==="all"?"display:none":"display:block";return` + `}[ne("$animationArea")](){return{style:{display:this.state.isAnimating?"block":"none"}}}[ne("$bezierCanvas")](){return{d:Ms(this.state.currentBezier,150,150)}}[ne("$bezierCanvasPoint")](){return{d:rn(this.state.currentBezier,150,150)}}updateData(e={}){this.setState(e),this.modifyCubicBezier()}modifyCubicBezier(){this.parent.trigger(this.props.onchange,this.state.key,pu(this.state.currentBezier))}[A("$left")](){var{currentBezier:t,currentBezierIndex:e}=this.state;e==0?e=Qi.length-1:--e;var t=Qi[e];this.updateData({currentBezierIndex:e,currentBezier:t}),this.refresh()}[A("$right")](){var{currentBezier:e,currentBezierIndex:t}=this.state;t=++t%Qi.length,e=Qi[t],this.updateData({currentBezierIndex:t,currentBezier:e}),this.refresh()}[A("$text")](){var e=[...Qi[this.state.currentBezierIndex]];this.updateData({currentBezier:e}),this.refresh()}[A("$itemList .item")](e){var t=e.$dt.attr("data-bezier");this.refs.$itemList.attr("data-selected-value",t);var r=ks(t);this.updateData({currentBezier:r}),this.refresh()}refresh(){this.refreshEasingText(),this.refreshBezierCanvas()}refreshBezierCanvas(){this.bindData("$bezierCanvas"),this.bindData("$bezierCanvasPoint"),this.refreshPointer(),this.drawPoint()}refreshEasingText(){this.refs.$text.html(this.state.currentBezier[4]||"ease")}refreshPointer(){var e=ks(this.state.currentBezier),t=this.refs.$control.width(),r=this.refs.$control.height(),i=e[0]*t,a=(1-e[1])*r;this.refs.$pointer1.css({left:p.px(i),top:p.px(a)}),i=e[2]*t,a=(1-e[3])*r,this.refs.$pointer2.css({left:p.px(i),top:p.px(a)})}drawPoint(){this.state.isAnimating!==!1&&(this.timer&&window.clearTimeout(this.timer),this.animationTimer&&window.clearTimeout(this.animationTimer),this.timer=window.setTimeout(()=>{this.animationPoint()},100))}start(e){var t=this.animationCanvasData.func(e),r=10+(this.animationCanvasData.width-20)*t.y,i=10,a=this.animationCanvasData.context;a.beginPath(),a.arc(r,i,5,0,2*Math.PI),a.fill(),a.stroke(),a.closePath(),!(e>=1)&&(this.animationTimer=window.setTimeout(()=>{this.start(e+.05)},50))}animationPoint(){const e=ks(this.state.currentBezier);var t=vu(pu(e));this.refs.$animationCanvas.clear();var r=this.refs.$animationCanvas.width(),i=this.refs.$animationCanvas.height(),a=this.refs.$animationCanvas.context();a.fillStyle=this.state.animatedColor,a.strokeStyle=this.state.selectedColor,a.lineWidth=1,this.animationCanvasData={func:t,width:r,height:i,context:a},this.start(0)}setPosition(e){var t=this.refs.$control.width(),r=this.refs.$control.height(),i=this.refs.$control.offset().left,a=this.refs.$control.offset().top,n=e,o=n.x;0>o?o=0:n.x>document.body.clientWidth&&(o=document.body.clientWidth),o-=i,o<0&&(o=0),to.trim()).map(o=>p.parse(o)),r=p.percent(0),i=p.percent(0),a=p.percent(0),n=p.percent(0);return t.length===1?(r=t[0].clone(),i=t[0].clone(),a=t[0].clone(),n=t[0].clone()):t.length===2?(r=t[0].clone(),i=t[1].clone(),a=t[0].clone(),n=t[1].clone()):t.length===3?(r=t[0].clone(),i=t[1].clone(),a=t[2].clone(),n=t[1].clone()):t.length===4&&(r=t[0].clone(),i=t[1].clone(),a=t[2].clone(),n=t[3].clone()),[t.length,r,i,a,n]}}const Iu=[{key:"top",title:"Top"},{key:"right",title:"Right"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"}];class F5 extends Y{initState(){var[e,t,r,i,a]=$c.parse(this.props.value);return{isAll:e===1,all:t.clone(),top:t.clone(),right:r.clone(),bottom:i.clone(),left:a.clone()}}template(){return"
      "}[M("changeBorderRadius")](e,t){e==="all"&&Iu.forEach(r=>{this.state[r.key]=t.clone(),this.children[`$${r.key}`].setValue(t.clone())}),this.updateData({[e]:t})}[G("$body")](){var e=this.state.isAll?"all":"partitial",t=this.state.all,r=e==="all"?"display:none":"display:block";return`
      - +
      - ${W("RangeEditor",{ref:"$all",key:"all",value:t,onchange:"changeBorderRadius"})} + ${R("RangeEditor",{ref:"$all",key:"all",value:t,onchange:"changeBorderRadius"})}
      - ${jy.map(r=>{var s=this.state[r.key];return` + ${Iu.map(i=>{var a=this.state[i.key];return`
      - ${W("RangeEditor",{ref:`$${r.key}`,label:r.title,key:r.key,value:s,onchange:"changeBorderRadius"})} + ${R("RangeEditor",{ref:`$${i.key}`,label:i.title,key:i.key,value:a,onchange:"changeBorderRadius"})}
      `}).join("")}
      - `}updateData(e={}){this.setState(e,!1);var t=[];this.state.isAll?t=[1,this.state.all,this.state.all,this.state.all,this.state.all]:t=[4,this.state.top,this.state.right,this.state.bottom,this.state.left],this.parent.trigger(this.props.onchange,t)}[se("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.updateData({isAll:t==="all"})}}var cie="";const dR=/((blur|grayscale|drop-shadow|hue-rotate|invert|brightness|contrast|opacity|saturate|sepia|url)\(([^)]*)\))/gi;class nr extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"filter"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=uR[e.type];return t?new t(e):new xl({value:e.value})}static parseStyle(e){var t=[];if(!e)return t;var i=ga(e),r=i.str.match(dR)||[];return r.forEach((s,a)=>{var[o,l]=s.split("(");if(l=l.split(")")[0],o==="drop-shadow"){var c=l.split(" "),h=c.filter(u=>u.includes("@")).map(u=>vl(u,i.matches)),d=c.filter(u=>!u.includes("@"));t[a]=nr.parse({type:o,offsetX:y.parse(d[0]),offsetY:y.parse(d[1]),blurRadius:y.parse(d[2]),color:h[0]||"rgba(0, 0, 0, 1)"})}else t[a]=nr.parse({type:o,value:y.parse(l)})}),t}static join(e){return e.map(t=>nr.parse(t)).join(" ")}}class Qc extends nr{getDefaultObject(){return super.getDefaultObject({type:"blur",value:Qc.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}}Qc.spec={inputType:"range",min:0,max:100,step:1,unit:"px",units:["px","em"],defaultValue:"0px"};class xl extends nr{getDefaultObject(){return super.getDefaultObject({type:"svg",value:xl.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}toString(){return`url(#${this.json.value||""})`}}xl.spec={inputType:"select",defaultValue:""};class eh extends nr{getDefaultObject(){return super.getDefaultObject({type:"grayscale",value:eh.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}}eh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class th extends nr{getDefaultObject(){return super.getDefaultObject({type:"hue-rotate",value:th.spec.defaultValue})}}th.spec={inputType:"range",min:0,max:360,step:1,unit:"deg",units:["deg"],defaultValue:y.deg(0)};class ih extends nr{getDefaultObject(){return super.getDefaultObject({type:"invert",value:ih.spec.defaultValue})}}ih.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class rh extends nr{getDefaultObject(){return super.getDefaultObject({type:"brightness",value:rh.spec.defaultValue})}}rh.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class nh extends nr{getDefaultObject(){return super.getDefaultObject({type:"contrast",value:nh.spec.defaultValue})}}nh.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class sh extends nr{getDefaultObject(){return super.getDefaultObject({type:"opacity",value:sh.spec.defaultValue})}}sh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class ah extends nr{getDefaultObject(){return super.getDefaultObject({type:"saturate",value:ah.spec.defaultValue})}}ah.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class oh extends nr{getDefaultObject(){return super.getDefaultObject({type:"sepia",value:oh.spec.defaultValue})}}oh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class ba extends nr{getDefaultObject(){return super.getDefaultObject({type:"drop-shadow",multi:!0,offsetX:ba.spec.offsetX.defaultValue,offsetY:ba.spec.offsetY.defaultValue,blurRadius:ba.spec.blurRadius.defaultValue,color:ba.spec.color.defaultValue})}toString(){var e=this.json;return`drop-shadow(${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.color})`}}ba.spec={offsetX:{title:"Offset X",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},offsetY:{title:"Offset Y",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},blurRadius:{title:"Blur Radius",inputType:"range",min:0,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em","%"]},color:{title:"Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)",unit:"color"}};const uR={blur:Qc,grayscale:eh,"hue-rotate":th,invert:ih,brightness:rh,contrast:nh,opacity:sh,saturate:ah,sepia:oh,"drop-shadow":ba,svg:xl},pR=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];var fR={blur:Qc.spec,grayscale:eh.spec,"hue-rotate":th.spec,invert:ih.spec,brightness:rh.spec,contrast:nh.spec,"drop-shadow":ba.spec,opacity:sh.spec,saturate:ah.spec,sepia:oh.spec,svg:xl.spec};class gR extends ge{initState(){return{hideLabel:this.props.hideLabel==="true",filters:nr.parseStyle(this.props.value)}}template(){return` + `}updateData(e={}){this.setState(e,!1);var t=[];this.state.isAll?t=[1,this.state.all,this.state.all,this.state.all,this.state.all]:t=[4,this.state.top,this.state.right,this.state.bottom,this.state.left],this.parent.trigger(this.props.onchange,t)}[A("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.updateData({isAll:t==="all"})}}var iD="";const B5=/((blur|grayscale|drop-shadow|hue-rotate|invert|brightness|contrast|opacity|saturate|sepia|url)\(([^)]*)\))/gi;class Bt extends or{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"filter"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=N5[e.type];return t?new t(e):new pa({value:e.value})}static parseStyle(e){var t=[];if(!e)return t;var r=Zi(e),i=r.str.match(B5)||[];return i.forEach((a,n)=>{var[o,l]=a.split("(");if(l=l.split(")")[0],o==="drop-shadow"){var c=l.split(" "),h=c.filter(d=>d.includes("@")).map(d=>ha(d,r.matches)),u=c.filter(d=>!d.includes("@"));t[n]=Bt.parse({type:o,offsetX:p.parse(u[0]),offsetY:p.parse(u[1]),blurRadius:p.parse(u[2]),color:h[0]||"rgba(0, 0, 0, 1)"})}else t[n]=Bt.parse({type:o,value:p.parse(l)})}),t}static join(e){return e.map(t=>Bt.parse(t)).join(" ")}}class sn extends Bt{getDefaultObject(){return super.getDefaultObject({type:"blur",value:sn.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}}sn.spec={inputType:"range",min:0,max:100,step:1,unit:"px",units:["px","em"],defaultValue:"0px"};class pa extends Bt{getDefaultObject(){return super.getDefaultObject({type:"svg",value:pa.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}toString(){return`url(#${this.json.value||""})`}}pa.spec={inputType:"select",defaultValue:""};class an extends Bt{getDefaultObject(){return super.getDefaultObject({type:"grayscale",value:an.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}}an.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class nn extends Bt{getDefaultObject(){return super.getDefaultObject({type:"hue-rotate",value:nn.spec.defaultValue})}}nn.spec={inputType:"range",min:0,max:360,step:1,unit:"deg",units:["deg"],defaultValue:p.deg(0)};class on extends Bt{getDefaultObject(){return super.getDefaultObject({type:"invert",value:on.spec.defaultValue})}}on.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class ln extends Bt{getDefaultObject(){return super.getDefaultObject({type:"brightness",value:ln.spec.defaultValue})}}ln.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class cn extends Bt{getDefaultObject(){return super.getDefaultObject({type:"contrast",value:cn.spec.defaultValue})}}cn.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class hn extends Bt{getDefaultObject(){return super.getDefaultObject({type:"opacity",value:hn.spec.defaultValue})}}hn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class dn extends Bt{getDefaultObject(){return super.getDefaultObject({type:"saturate",value:dn.spec.defaultValue})}}dn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class un extends Bt{getDefaultObject(){return super.getDefaultObject({type:"sepia",value:un.spec.defaultValue})}}un.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class es extends Bt{getDefaultObject(){return super.getDefaultObject({type:"drop-shadow",multi:!0,offsetX:es.spec.offsetX.defaultValue,offsetY:es.spec.offsetY.defaultValue,blurRadius:es.spec.blurRadius.defaultValue,color:es.spec.color.defaultValue})}toString(){var e=this.json;return`drop-shadow(${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.color})`}}es.spec={offsetX:{title:"Offset X",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},offsetY:{title:"Offset Y",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},blurRadius:{title:"Blur Radius",inputType:"range",min:0,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em","%"]},color:{title:"Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)",unit:"color"}};const N5={blur:sn,grayscale:an,"hue-rotate":nn,invert:on,brightness:ln,contrast:cn,opacity:hn,saturate:dn,sepia:un,"drop-shadow":es,svg:pa},G5=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];var H5={blur:sn.spec,grayscale:an.spec,"hue-rotate":nn.spec,invert:on.spec,brightness:ln.spec,contrast:cn.spec,"drop-shadow":es.spec,opacity:hn.spec,saturate:dn.spec,sepia:un.spec,svg:pa.spec};class U5 extends Y{initState(){return{hideLabel:this.props.hideLabel==="true",filters:Bt.parseStyle(this.props.value)}}template(){return`
      -
      `}[ve("$filterSelect")](){var e=pR.map(r=>({title:r,value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSpec(e){return fR[e]}makeDropShadowFilterTemplate(e,t,i){return` + `}[G("$filterSelect")](){var e=G5.map(i=>({title:i,value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSpec(e){return H5[e]}makeDropShadowFilterTemplate(e,t,r){return`
      - + ${this.$i18n("filter.property.drop-shadow")}
      - +
      - ${Rc(["ColorViewEditor",{ref:`$dropShadowColorView${i}`,params:i,compact:!0,value:t.color,onchange:"changeDropShadowColor"}],...["offsetX","offsetY","blurRadius"].map(r=>["InputRangeEditor",{ref:`$${r}${i}`,label:this.$i18n(`filter.property.drop-shadow.${r}`),key:i,min:e[r].min,max:e[r].max,step:e[r].step,params:r,value:t[r].value||e[r].defaultValue,units:e[r].units,onchange:"changeRangeEditor"}]))} + ${Ba(["ColorViewEditor",{ref:`$dropShadowColorView${r}`,params:r,compact:!0,value:t.color,onchange:"changeDropShadowColor"}],...["offsetX","offsetY","blurRadius"].map(i=>["InputRangeEditor",{ref:`$${i}${r}`,label:this.$i18n(`filter.property.drop-shadow.${i}`),key:r,min:e[i].min,max:e[i].max,step:e[i].step,params:i,value:t[i].value||e[i].defaultValue,units:e[i].units,onchange:"changeRangeEditor"}]))}
      - `}getSVGFilterList(){var e=this.$context.selection.current,t=[];return e&&(t=e.svgfilters.map(i=>({title:`svg - #${i.id}`,value:i.id}))),t}makeOneFilterEditor(e,t,i){if(t.type==="svg"){var r="",s=this.$context.selection.current;return s&&(r=s.svgfilters.map(a=>({value:a.id}))),W("SelectEditor",{ref:`$select${e}`,key:e,label:"SVG Filter",value:t.value,options:["",...r],onchange:"changeRangeEditor"})}return W("InputRangeEditor",{ref:`$range${e}_${t.type}`,label:this.$i18n("filter.property."+t.type),key:e,min:i.min,max:i.max,value:t.value,units:i.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t,i){return` -
      + `}getSVGFilterList(){var e=this.$context.selection.current,t=[];return e&&(t=e.svgfilters.map(r=>({title:`svg - #${r.id}`,value:r.id}))),t}makeOneFilterEditor(e,t,r){if(t.type==="svg"){var i="",a=this.$context.selection.current;return a&&(i=a.svgfilters.map(n=>({value:n.id}))),R("SelectEditor",{ref:`$select${e}`,key:e,label:"SVG Filter",value:t.value,options:["",...i],onchange:"changeRangeEditor"})}return R("InputRangeEditor",{ref:`$range${e}_${t.type}`,label:this.$i18n("filter.property."+t.type),key:e,min:r.min,max:r.max,value:t.value,units:r.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t,r){return` +
      - + ${t.type!="svg"?`
      - ${this.makeOneFilterEditor(i,t,e)} + ${this.makeOneFilterEditor(r,t,e)}
      `:`
      - ${t.value} + ${t.value}
      `}
      -
      - `}makeFilterTemplate(e,t){return e.type==="drop-shadow"?this.makeDropShadowFilterTemplate(this.getSpec(e.type),e,t):this.makeOneFilterTemplate(this.getSpec(e.type),e,t)}[ve("$filterList")](){return this.state.filters.map((e,t)=>this.makeFilterTemplate(e,t.toString()))}[on("$filterList .filter-item > .title > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$filterList .filter-item > .title > label")+St](){}sortItem(e,t,i){e.splice(i+(t{var s=this.$context.selection.current;s&&(s.setSVGFilterValue(r.index,{filters:r.filters}),this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.pack("svgfilters","filter")))},index:e,preview:!1,filters:i.filters})}[Me("add")](e){if(e==="svg"){const t=this.$context.selection.current.createSVGFilter({filters:[]}),i=this.$context.selection.current.svgfilters[t];this.state.filters.push(this.makeFilter(e,{value:i.id})),this.refresh(),this.modifyFilter(),this.trigger("openSVGFilterPopup",t)}else this.state.filters.push(this.makeFilter(e)),this.refresh(),this.modifyFilter()}[se("$add")](){var e=this.refs.$filterSelect.value;this.trigger("add",e)}[se("$filterList .filter-menu .del")](e){var t=+e.$dt.attr("data-index");this.state.filters.splice(t,1),this.refresh(),this.modifyFilter()}[Me("changeDropShadowColor")](e,t,i){var r=+i;this.state.filters[r].reset({color:t}),this.modifyFilter()}[Me("changeRangeEditor")](e,t,i){i?this.state.filters[+e].reset({[i]:t}):this.state.filters[+e].reset({value:t}),this.modifyFilter()}}const mR=["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"];class vR extends Kf{getFontList(){return mR.map(e=>({value:e}))}initState(){return Ve(P({},super.initState()),{options:this.getFontList()})}}var hie="";const yR=/(([-]?[\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?)|#(?:[\da-f]{8})|(#(?:[\da-f]{3}){1,2}|([a-z_-]+)\([^()]+\)|([a-z_-]+))|(,)/gi,bR=/^[-]?([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?$/gi,xR=/^[a-z_-]+$/gi,Gy=[ue.STATIC,ue.LINEAR,ue.RADIAL,ue.CONIC,ue.REPEATING_CONIC,ue.REPEATING_LINEAR,ue.REPEATING_RADIAL],Hy=[Je.LINEAR,Je.EASE,Je.EASE_IN,Je.EASE_OUT,Je.EASE_IN_OUT],_R=n=>{if(n===",")return"comma";if(n.indexOf("#")===0)return"hex";if(Jd.isColorName(n))return"color";if(Gy.includes(n)||Hy.includes(n))return n;if(n.match(bR))return"length";if(n.match(xR))return"keyword"},SR=(n,e,t="(",i=")")=>{const r=[];for(var s=e;s0?-1:s+1},Uy=n=>Gy.includes(n)?Ut.GRADIENT:Hy.includes(n)?Ut.TIMING:n==="color"||n==="hex"?Ut.COLOR:n==="length"?Ut.LENGTH:n==="comma"?Ut.COMMA:n,Hr=n=>(e,t,i="(",r=")")=>{const s=SR(t,e.startIndex,i,r);if(s===-1)return{convert:!0,funcType:Uy(n),matchedString:t,type:n,startIndex:e.startIndex,endIndex:e.startIndex+t.length};const a=t.substring(e.startIndex,s),o=a.indexOf(i)+i.length,l=t.substring(e.startIndex+o,e.startIndex+a.lastIndexOf(r)),c=e.startIndex,h=e.startIndex+a.length,d=_l(l).map(f=>Ve(P({},f),{fullTextStartIndex:e.startIndex+o+f.startIndex,fullTextEndIndex:e.startIndex+o+f.endIndex}));let u=[],p=0;return d.forEach(f=>{f.func===Ut.COMMA?p++:(u[p]||(u[p]=[]),u[p].push(f))}),{convert:!0,funcType:Uy(n),type:n,startIndex:c,endIndex:h,matchedString:a,args:l,parameters:u}},fg={length:n=>y.parse(n.matchedString),hex:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),rgb:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),rgba:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),hsl:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),hsla:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),color:n=>P({funcType:Ut.COLOR},bi(n.matchedString)),steps:n=>({funcType:Ut.TIMING,name:Je.STEPS,count:+n.parameters[0],direction:n.parameters[1]}),path:n=>({funcType:Ut.TIMING,name:Je.PATH,d:n.args}),repeat:n=>({funcType:Ut.REPEAT,count:+n.parameters[0],length:y.parse(n.parameters[1])}),"static-gradient":Hr("static-gradient"),"linear-gradient":Hr("linear-gradient"),"radial-gradient":Hr("radial-gradient"),"conic-gradient":Hr("conic-gradient"),"repeating-linear-gradient":Hr("repeating-linear-gradient"),"repeating-radial-gradient":Hr("repeating-radial-gradient"),"repeating-conic-gradient":Hr("repeating-conic-gradient"),"cubic-bezier":n=>({funcType:Ut.TIMING,name:Je.CUBIC_BEZIER,matchedString:n.matchedString,x1:+n.parameters[0],y1:+n.parameters[1],x2:+n.parameters[2],y2:+n.parameters[3]}),ease:n=>({funcType:Ut.TIMING,name:Je.EASE,matchedString:n.matchedString,x1:.25,y1:.1,x2:.25,y2:1}),"ease-in":n=>({funcType:Ut.TIMING,name:Je.EASE_IN,matchedString:n.matchedString,x1:.42,y1:0,x2:1,y2:1}),"ease-out":n=>({funcType:Ut.TIMING,name:Je.EASE_OUT,matchedString:n.matchedString,x1:0,y1:0,x2:.58,y2:1}),"ease-in-out":n=>({funcType:Ut.TIMING,name:Je.EASE_IN_OUT,matchedString:n.matchedString,x1:.42,y1:0,x2:.58,y2:1}),linear:n=>({funcType:Ut.TIMING,name:Je.LINEAR,matchedString:n.matchedString,x1:0,y1:0,x2:1,y2:1})};function _l(n,{funcStartCharacter:e="(",funcEndCharacter:t=")",parameterSaparator:i=",",customFuncMap:r={}}={}){let s=n.match(yR),a=[];if(!s)return a;function o(d,u,p){return a.some(f=>f.parsed&&Fi(f.parsed)?f.parsed.some(g=>g.startIndex===d&&g.endIndex===u&&p===g.matchedString):f.startIndex===d&&f.endIndex===u&&p===f.matchedString)}var l={next:0};s=s.map(d=>{const u=n.indexOf(d,l.next);return l.next=u+d.length,{index:u,matchedString:d}}),l.next=0;for(var c=0,h=s.length;cS.trim())}),p=b}let v;if(fg[p]?v=fg[p]||fg[f.matchedString]:(r[p]||r[f.matchedString])&&(v=r[p]||r[f.matchedString]),v){const b=v.call(null,f,n,e,t,i);b!=null&&b.convert?(f=P(P({},f),b),delete f.convert):f=Ve(P({},f),{parsed:b})}a.push(f),l.next=f.endIndex}return a}function dr(n){return _l(n)[0]}function wR(n,e="temp"){var t;return(t=_l(`${e}(${n})`,{customFuncMap:{[e]:Hr(e)}})[0])==null?void 0:t.parameters}class ti{constructor(e={}){this.id=e.id||Zr(),this.color=e.color||"transparent",this.cut=e.cut||!1,this.percent=e.percent||0,this.unit=e.unit||"%",this.px=e.px||0,this.em=e.em||0,this.prevColorStep=e.prevColorStep||null,this.timing=e.timing||_l("linear")[0].parsed,this.timingCount=e.timingCount||1}toCloneObject(){return{id:this.id,color:this.color,cut:this.cut,percent:this.percent,unit:this.unit,px:this.px,em:this.em,prevColorStep:this.prevColorStep,timing:this.timing,timingCount:this.timingCount}}on(){this.cut=!0}off(){this.cut=!1}toggle(){this.cut=!this.cut}toggleTiming(){switch(this.timing.name){case Je.LINEAR:this.timing=dr("steps(1, start)").parsed;break;case Je.STEPS:this.timing=dr("ease").parsed,this.timingCount=15;break;case Je.EASE:case Je.EASE_IN:case Je.EASE_IN_OUT:case Je.EASE_OUT:case Je.CUBIC_BEZIER:this.timing=dr("path(M 0 0 C 0.25 0.25 0.75 0.75 1 1)").parsed,this.timingCount=15;break;default:this.timing=dr("linear").parsed,this.timingCount=1;break}}getUnit(){return this.unit=="%"?"percent":this.unit}add(e){var t=this.getUnit();return this[t]+=+e,this}sub(e){var t=this.getUnit();return this[t]-=+e,this}mul(e){var t=this.getUnit();return this[t]*=+e,this}div(e){var t=this.getUnit();return this[t]/=+e,this}mod(e){var t=this.getUnit();return this[t]%=+e,this}get isPx(){return this.unit=="px"}get isPercent(){return this.unit=="%"||this.unit==="percent"}get isEm(){return this.unit=="em"}toLength(){if(this.isPx)return y.px(this.px);if(this.isPercent)return y.percent(this.percent);if(this.isEm)return y.em(this.em)}getPrevLength(){return this.prevColorStep?this.prevColorStep.toLength():""}toString(){var e=this.cut?this.getPrevLength():"",t=this.color||"transparent";return`${t} ${e} ${this.toLength()}`}setValue(e,t){this.isPx?this.px=t*e/100:this.isPercent?this.percent=e:this.isEm&&(this.em=t*e/100/16),this.parent&&this.parent.sortColorStep()}static parse(e){let t=[];const i=ga(e);var r=i.str.split(" ").filter(o=>o.trim());const s=+r[0].replace("@",""),a=i.matches[s].color;if(r.length===1)t.push(new ti({color:a,unit:"%",percent:0,hasNotUnit:!0}));else if(r.length===2){const o=y.parse(r[1]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new ti(P({color:a},l)))}else if(r.length===3){const o=y.parse(r[2]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new ti(P({color:a,cut:!0},l)))}return t}static createColorStep(e=2,t=100,i="%"){var r=Qr(2,e),s=t/r,a=Mn(r).map((o,l)=>`${bl()} ${l*s}${i}`).join(",");return a}static createRepeatColorStep(e=2,t=1){var i=Qr(2,e),r=Mn(i).map((s,a)=>`${bl()} ${y.parse(t).mul(a+1)}`).join(",");return r}}class gg extends Vr{getDefaultObject(e={}){return P({itemType:"image-resource",type:"image"},e)}isGradient(){return!1}isLinear(){return!1}isImage(){return!1}hasAngle(){return!1}isUrl(){return!1}isFile(){return!1}isAttribute(){return!0}toString(){return"none"}}var Wy=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function MR(n){if(n.__esModule)return n;var e=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(n).forEach(function(t){var i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:function(){return n[t]}})}),e}var Xy={exports:{}};(function(n,e){(function(t,i){i(n)})(Wy,function(t){function i(v,b){if(!(v instanceof b))throw new TypeError("Cannot call a class as a function")}/** + `}makeFilterTemplate(e,t){return e.type==="drop-shadow"?this.makeDropShadowFilterTemplate(this.getSpec(e.type),e,t):this.makeOneFilterTemplate(this.getSpec(e.type),e,t)}[G("$filterList")](){return this.state.filters.map((e,t)=>this.makeFilterTemplate(e,t.toString()))}[pr("$filterList .filter-item > .title > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$filterList .filter-item > .title > label")+Ve](){}sortItem(e,t,r){e.splice(r+(t{var a=this.$context.selection.current;a&&(a.setSVGFilterValue(i.index,{filters:i.filters}),this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.pack("svgfilters","filter")))},index:e,preview:!1,filters:r.filters})}[Z("add")](e){if(e==="svg"){const t=this.$context.selection.current.createSVGFilter({filters:[]}),r=this.$context.selection.current.svgfilters[t];this.state.filters.push(this.makeFilter(e,{value:r.id})),this.refresh(),this.modifyFilter(),this.trigger("openSVGFilterPopup",t)}else this.state.filters.push(this.makeFilter(e)),this.refresh(),this.modifyFilter()}[A("$add")](){var e=this.refs.$filterSelect.value;this.trigger("add",e)}[A("$filterList .filter-menu .del")](e){var t=+e.$dt.attr("data-index");this.state.filters.splice(t,1),this.refresh(),this.modifyFilter()}[Z("changeDropShadowColor")](e,t,r){var i=+r;this.state.filters[i].reset({color:t}),this.modifyFilter()}[Z("changeRangeEditor")](e,t,r){r?this.state.filters[+e].reset({[r]:t}):this.state.filters[+e].reset({value:t}),this.modifyFilter()}}const W5=["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"];class X5 extends ic{getFontList(){return W5.map(e=>({value:e}))}initState(){return se(b({},super.initState()),{options:this.getFontList()})}}var sD="";const Y5=/(([-]?[\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?)|#(?:[\da-f]{8})|(#(?:[\da-f]{3}){1,2}|([a-z_-]+)\([^()]+\)|([a-z_-]+))|(,)/gi,K5=/^[-]?([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?$/gi,Z5=/^[a-z_-]+$/gi,Eu=[F.STATIC,F.LINEAR,F.RADIAL,F.CONIC,F.REPEATING_CONIC,F.REPEATING_LINEAR,F.REPEATING_RADIAL],Lu=[ue.LINEAR,ue.EASE,ue.EASE_IN,ue.EASE_OUT,ue.EASE_IN_OUT],q5=s=>{if(s===",")return"comma";if(s.indexOf("#")===0)return"hex";if($o.isColorName(s))return"color";if(Eu.includes(s)||Lu.includes(s))return s;if(s.match(K5))return"length";if(s.match(Z5))return"keyword"},Q5=(s,e,t="(",r=")")=>{const i=[];for(var a=e;a0?-1:a+1},Vu=s=>Eu.includes(s)?Xe.GRADIENT:Lu.includes(s)?Xe.TIMING:s==="color"||s==="hex"?Xe.COLOR:s==="length"?Xe.LENGTH:s==="comma"?Xe.COMMA:s,dr=s=>(e,t,r="(",i=")")=>{const a=Q5(t,e.startIndex,r,i);if(a===-1)return{convert:!0,funcType:Vu(s),matchedString:t,type:s,startIndex:e.startIndex,endIndex:e.startIndex+t.length};const n=t.substring(e.startIndex,a),o=n.indexOf(r)+r.length,l=t.substring(e.startIndex+o,e.startIndex+n.lastIndexOf(i)),c=e.startIndex,h=e.startIndex+n.length,u=ga(l).map(g=>se(b({},g),{fullTextStartIndex:e.startIndex+o+g.startIndex,fullTextEndIndex:e.startIndex+o+g.endIndex}));let d=[],v=0;return u.forEach(g=>{g.func===Xe.COMMA?v++:(d[v]||(d[v]=[]),d[v].push(g))}),{convert:!0,funcType:Vu(s),type:s,startIndex:c,endIndex:h,matchedString:n,args:l,parameters:d}},_c={length:s=>p.parse(s.matchedString),hex:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),rgb:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),rgba:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),hsl:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),hsla:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),color:s=>b({funcType:Xe.COLOR},pt(s.matchedString)),steps:s=>({funcType:Xe.TIMING,name:ue.STEPS,count:+s.parameters[0],direction:s.parameters[1]}),path:s=>({funcType:Xe.TIMING,name:ue.PATH,d:s.args}),repeat:s=>({funcType:Xe.REPEAT,count:+s.parameters[0],length:p.parse(s.parameters[1])}),"static-gradient":dr("static-gradient"),"linear-gradient":dr("linear-gradient"),"radial-gradient":dr("radial-gradient"),"conic-gradient":dr("conic-gradient"),"repeating-linear-gradient":dr("repeating-linear-gradient"),"repeating-radial-gradient":dr("repeating-radial-gradient"),"repeating-conic-gradient":dr("repeating-conic-gradient"),"cubic-bezier":s=>({funcType:Xe.TIMING,name:ue.CUBIC_BEZIER,matchedString:s.matchedString,x1:+s.parameters[0],y1:+s.parameters[1],x2:+s.parameters[2],y2:+s.parameters[3]}),ease:s=>({funcType:Xe.TIMING,name:ue.EASE,matchedString:s.matchedString,x1:.25,y1:.1,x2:.25,y2:1}),"ease-in":s=>({funcType:Xe.TIMING,name:ue.EASE_IN,matchedString:s.matchedString,x1:.42,y1:0,x2:1,y2:1}),"ease-out":s=>({funcType:Xe.TIMING,name:ue.EASE_OUT,matchedString:s.matchedString,x1:0,y1:0,x2:.58,y2:1}),"ease-in-out":s=>({funcType:Xe.TIMING,name:ue.EASE_IN_OUT,matchedString:s.matchedString,x1:.42,y1:0,x2:.58,y2:1}),linear:s=>({funcType:Xe.TIMING,name:ue.LINEAR,matchedString:s.matchedString,x1:0,y1:0,x2:1,y2:1})};function ga(s,{funcStartCharacter:e="(",funcEndCharacter:t=")",parameterSaparator:r=",",customFuncMap:i={}}={}){let a=s.match(Y5),n=[];if(!a)return n;function o(u,d,v){return n.some(g=>g.parsed&&Gt(g.parsed)?g.parsed.some(y=>y.startIndex===u&&y.endIndex===d&&v===y.matchedString):g.startIndex===u&&g.endIndex===d&&v===g.matchedString)}var l={next:0};a=a.map(u=>{const d=s.indexOf(u,l.next);return l.next=d+u.length,{index:d,matchedString:u}}),l.next=0;for(var c=0,h=a.length;cO.trim())}),v=V}let S;if(_c[v]?S=_c[v]||_c[g.matchedString]:(i[v]||i[g.matchedString])&&(S=i[v]||i[g.matchedString]),S){const V=S.call(null,g,s,e,t,r);V!=null&&V.convert?(g=b(b({},g),V),delete g.convert):g=se(b({},g),{parsed:V})}n.push(g),l.next=g.endIndex}return n}function Xt(s){return ga(s)[0]}function J5(s,e="temp"){var t;return(t=ga(`${e}(${s})`,{customFuncMap:{[e]:dr(e)}})[0])==null?void 0:t.parameters}class et{constructor(e={}){this.id=e.id||fr(),this.color=e.color||"transparent",this.cut=e.cut||!1,this.percent=e.percent||0,this.unit=e.unit||"%",this.px=e.px||0,this.em=e.em||0,this.prevColorStep=e.prevColorStep||null,this.timing=e.timing||ga("linear")[0].parsed,this.timingCount=e.timingCount||1}toCloneObject(){return{id:this.id,color:this.color,cut:this.cut,percent:this.percent,unit:this.unit,px:this.px,em:this.em,prevColorStep:this.prevColorStep,timing:this.timing,timingCount:this.timingCount}}on(){this.cut=!0}off(){this.cut=!1}toggle(){this.cut=!this.cut}toggleTiming(){switch(this.timing.name){case ue.LINEAR:this.timing=Xt("steps(1, start)").parsed;break;case ue.STEPS:this.timing=Xt("ease").parsed,this.timingCount=15;break;case ue.EASE:case ue.EASE_IN:case ue.EASE_IN_OUT:case ue.EASE_OUT:case ue.CUBIC_BEZIER:this.timing=Xt("path(M 0 0 C 0.25 0.25 0.75 0.75 1 1)").parsed,this.timingCount=15;break;default:this.timing=Xt("linear").parsed,this.timingCount=1;break}}getUnit(){return this.unit=="%"?"percent":this.unit}add(e){var t=this.getUnit();return this[t]+=+e,this}sub(e){var t=this.getUnit();return this[t]-=+e,this}mul(e){var t=this.getUnit();return this[t]*=+e,this}div(e){var t=this.getUnit();return this[t]/=+e,this}mod(e){var t=this.getUnit();return this[t]%=+e,this}get isPx(){return this.unit=="px"}get isPercent(){return this.unit=="%"||this.unit==="percent"}get isEm(){return this.unit=="em"}toLength(){if(this.isPx)return p.px(this.px);if(this.isPercent)return p.percent(this.percent);if(this.isEm)return p.em(this.em)}getPrevLength(){return this.prevColorStep?this.prevColorStep.toLength():""}toString(){var e=this.cut?this.getPrevLength():"",t=this.color||"transparent";return`${t} ${e} ${this.toLength()}`}setValue(e,t){this.isPx?this.px=t*e/100:this.isPercent?this.percent=e:this.isEm&&(this.em=t*e/100/16),this.parent&&this.parent.sortColorStep()}static parse(e){let t=[];const r=Zi(e);var i=r.str.split(" ").filter(o=>o.trim());const a=+i[0].replace("@",""),n=r.matches[a].color;if(i.length===1)t.push(new et({color:n,unit:"%",percent:0,hasNotUnit:!0}));else if(i.length===2){const o=p.parse(i[1]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new et(b({color:n},l)))}else if(i.length===3){const o=p.parse(i[2]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new et(b({color:n,cut:!0},l)))}return t}static createColorStep(e=2,t=100,r="%"){var i=vr(2,e),a=t/i,n=Rr(i).map((o,l)=>`${ua()} ${l*a}${r}`).join(",");return n}static createRepeatColorStep(e=2,t=1){var r=vr(2,e),i=Rr(r).map((a,n)=>`${ua()} ${p.parse(t).mul(n+1)}`).join(",");return i}}class Sc extends or{getDefaultObject(e={}){return b({itemType:"image-resource",type:"image"},e)}isGradient(){return!1}isLinear(){return!1}isImage(){return!1}hasAngle(){return!1}isUrl(){return!1}isFile(){return!1}isAttribute(){return!0}toString(){return"none"}}var Ou=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function eC(s){if(s.__esModule)return s;var e=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(s).forEach(function(t){var r=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:function(){return s[t]}})}),e}var Ru={exports:{}};(function(s,e){(function(t,r){r(s)})(Ou,function(t){function r(S,V){if(!(S instanceof V))throw new TypeError("Cannot call a class as a function")}/** * @preserve JavaScript implementation of * Algorithm for Automatically Fitting Digitized Curves * by Philip J. Schneider @@ -697,7 +702,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP * The MIT License (MIT) * * https://github.com/soswow/fit-curves - */function r(v,b,_){if(!Array.isArray(v))throw new TypeError("First argument should be an array");if(v.forEach(function(A){if(!Array.isArray(A)||A.some(function(z){return typeof z!="number"})||A.length!==v[0].length)throw Error("Each point should be an array of numbers. Each point should have the same amount of numbers.")}),v=v.filter(function(A,z){return z===0||!A.every(function(Z,Y){return Z===v[z-1][Y]})}),v.length<2)return[];var x=v.length,S=f(v[1],v[0]),E=f(v[x-2],v[x-1]);return s(v,S,E,b,_)}function s(v,b,_,x,S){var E=20,A,z,Z,Y,T,V,oe,B,Q,ee,te,q,ne;if(v.length===2)return q=g.vectorLen(g.subtract(v[0],v[1]))/3,A=[v[0],g.addArrays(v[0],g.mulItems(b,q)),g.addArrays(v[1],g.mulItems(_,q)),v[1]],[A];z=h(v);var ce=a(v,z,z,b,_,S);if(A=ce[0],Y=ce[1],V=ce[2],Y===0||Y.9999&&J<1.0001)break}T=Y,oe=V}if(te=[],B=g.subtract(v[V-1],v[V+1]),B.every(function(et){return et===0})){B=g.subtract(v[V-1],v[V]);var Re=[-B[1],B[0]];B[0]=Re[0],B[1]=Re[1]}return Q=g.normalize(B),ee=g.mulItems(Q,-1),te=te.concat(s(v.slice(0,V+1),b,Q,x,S)),te=te.concat(s(v.slice(V),ee,_,x,S)),te}function a(v,b,_,x,S,E){var A,z,Z;A=o(v,_,x,S);var Y=d(v,A,b);return z=Y[0],Z=Y[1],E&&E({bez:A,points:v,params:b,maxErr:z,maxPoint:Z}),[A,z,Z]}function o(v,b,_,x){var S,E,A,z,Z,Y,T,V,oe,B,Q,ee,te,q,ne,ce,ye,J=v[0],Re=v[v.length-1];for(S=[J,null,null,Re],E=g.zeros_Xx2x2(b.length),te=0,q=b.length;teS&&(S=x,E=z);return[S,E]}var u=function(b,_){for(var x,S=[0],E=b[0],A=0,z=1;z<=_;z++)x=m.q(b,z/_),A+=g.vectorLen(g.subtract(x,E)),S.push(A),E=x;return S=S.map(function(Z){return Z/A}),S};function p(v,b,_,x){if(b<0)return 0;if(b>1)return 1;for(var S,E,A,z,Z,Y=1;Y<=x;Y++)if(b<=_[Y]){z=(Y-1)/x,A=Y/x,E=_[Y-1],S=_[Y],Z=(b-E)/(S-E)*(A-z)+z;break}return Z}function f(v,b){return g.normalize(g.subtract(v,b))}var g=function(){function v(){i(this,v)}return v.zeros_Xx2x2=function(_){for(var x=[];_--;)x.push([0,0]);return x},v.mulItems=function(_,x){return _.map(function(S){return S*x})},v.mulMatrix=function(_,x){return _.reduce(function(S,E,A){return S+E*x[A]},0)},v.subtract=function(_,x){return _.map(function(S,E){return S-x[E]})},v.addArrays=function(_,x){return _.map(function(S,E){return S+x[E]})},v.addItems=function(_,x){return _.map(function(S){return S+x})},v.sum=function(_){return _.reduce(function(x,S){return x+S})},v.dot=function(_,x){return v.mulMatrix(_,x)},v.vectorLen=function(_){return Math.hypot.apply(Math,_)},v.divItems=function(_,x){return _.map(function(S){return S/x})},v.squareItems=function(_){return _.map(function(x){return x*x})},v.normalize=function(_){return this.divItems(_,this.vectorLen(_))},v}(),m=function(){function v(){i(this,v)}return v.q=function(_,x){var S=1-x,E=g.mulItems(_[0],S*S*S),A=g.mulItems(_[1],3*S*S*x),z=g.mulItems(_[2],3*S*x*x),Z=g.mulItems(_[3],x*x*x);return g.addArrays(g.addArrays(E,A),g.addArrays(z,Z))},v.qprime=function(_,x){var S=1-x,E=g.mulItems(g.subtract(_[1],_[0]),3*S*S),A=g.mulItems(g.subtract(_[2],_[1]),6*S*x),z=g.mulItems(g.subtract(_[3],_[2]),3*x*x);return g.addArrays(g.addArrays(E,A),z)},v.qprimeprime=function(_,x){return g.addArrays(g.mulItems(g.addArrays(g.subtract(_[2],g.mulItems(_[1],2)),_[0]),6*(1-x)),g.mulItems(g.addArrays(g.subtract(_[3],g.mulItems(_[2],2)),_[1]),6*x))},v}();t.exports=r,t.exports.fitCubic=s,t.exports.createTangent=f})})(Xy);var $R=Xy.exports,PR=function(){function n(e,t){var i=[],r=!0,s=!1,a=void 0;try{for(var o=e[Symbol.iterator](),l;!(r=(l=o.next()).done)&&(i.push(l.value),!(t&&i.length===t));r=!0);}catch(c){s=!0,a=c}finally{try{!r&&o.return&&o.return()}finally{if(s)throw a}}return i}return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return n(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),lh=Math.PI*2,mg=function(e,t,i,r,s,a,o){var l=e.x,c=e.y;l*=t,c*=i;var h=r*l-s*c,d=s*l+r*c;return{x:h+a,y:d+o}},TR=function(e,t){var i=t===1.5707963267948966?.551915024494:t===-1.5707963267948966?-.551915024494:1.3333333333333333*Math.tan(t/4),r=Math.cos(e),s=Math.sin(e),a=Math.cos(e+t),o=Math.sin(e+t);return[{x:r-s*i,y:s+r*i},{x:a+o*i,y:o-a*i},{x:a,y:o}]},Yy=function(e,t,i,r){var s=e*r-t*i<0?-1:1,a=e*i+t*r;return a>1&&(a=1),a<-1&&(a=-1),s*Math.acos(a)},CR=function(e,t,i,r,s,a,o,l,c,h,d,u){var p=Math.pow(s,2),f=Math.pow(a,2),g=Math.pow(d,2),m=Math.pow(u,2),v=p*f-p*m-f*g;v<0&&(v=0),v/=p*m+f*g,v=Math.sqrt(v)*(o===l?-1:1);var b=v*s/a*u,_=v*-a/s*d,x=h*b-c*_+(e+i)/2,S=c*b+h*_+(t+r)/2,E=(d-b)/s,A=(u-_)/a,z=(-d-b)/s,Z=(-u-_)/a,Y=Yy(1,0,E,A),T=Yy(E,A,z,Z);return l===0&&T>0&&(T-=lh),l===1&&T<0&&(T+=lh),[x,S,Y,T]},ER=function(e){var t=e.px,i=e.py,r=e.cx,s=e.cy,a=e.rx,o=e.ry,l=e.xAxisRotation,c=l===void 0?0:l,h=e.largeArcFlag,d=h===void 0?0:h,u=e.sweepFlag,p=u===void 0?0:u,f=[];if(a===0||o===0)return[];var g=Math.sin(c*lh/360),m=Math.cos(c*lh/360),v=m*(t-r)/2+g*(i-s)/2,b=-g*(t-r)/2+m*(i-s)/2;if(v===0&&b===0)return[];a=Math.abs(a),o=Math.abs(o);var _=Math.pow(v,2)/Math.pow(a,2)+Math.pow(b,2)/Math.pow(o,2);_>1&&(a*=Math.sqrt(_),o*=Math.sqrt(_));var x=CR(t,i,r,s,a,o,d,p,g,m,v,b),S=PR(x,4),E=S[0],A=S[1],z=S[2],Z=S[3],Y=Math.abs(Z)/(lh/4);Math.abs(1-Y)<1e-7&&(Y=1);var T=Math.max(Math.ceil(Y),1);Z/=T;for(var V=0;Vo&&(t[a].mark=!0,xe.DouglasPeuker(e,t,i,a),xe.DouglasPeuker(e,t,a,r))}static simply(e,t=10){return e.length<=2?e:(e=rt(e),e[0].mark=!0,e[e.length-1].mark=!0,xe.DouglasPeuker(t,e,0,e.length-1),e.filter(i=>Boolean(i.mark)))}static segmentDistance2(e,t,i,r){let s=r.x-i.x,a=r.y-i.y,o=s*s+a*a,l=e-i.x,c=t-i.y,h=s*l+a*c;if(o===0||h<=0)return l*l+c*c;if(h>=o)return l=e-r.x,c=t-r.y,l*l+c*c;{const d=l*a-c*s;return d*d/o}}static isInLine(e,t,i){return e.x===i.x?t.x===i.x:e.y===i.y?t.y===i.y:(e.x-i.x)*(e.y-i.y)===(i.x-t.x)*(i.y-t.y)}static isLine(e){return xe.isInLine(e.endPoint,e.startPoint,e,e.reversePoint)}static getReversePoint(e,t){const[i,r]=Ae([],[t.x,t.y,0],[e.x,e.y,0],2);return{x:i,y:r}}static getIndexPoint(e,t){return e[t]}static getPoint(e,t){return e.filter(i=>xe.isEqual(i.startPoint,t))[0]}static getIndex(e,t){for(var i=-1,r=0,s=e.length;r{r.command==="M"&&t.push({point:r,index:s,groupIndex:i++})}),t}static getSplitedGroupList(e){const t=rt(e),i=[];for(var r=0,s=-1,a=t.length;rr.point.index<=t).pop()}static getGroupIndex(e,t){for(var i=-1,r=0,s=e.length;r0;r--)if(e[r].command==="M"){i=r;break}i===-1&&(i=0);var s=e[i];return s&&(s.index=i),s}static getConnectedPointList(e,t){const i=e[t];return e.filter((r,s)=>s!==t&&xe.isEqual(r.startPoint,i.startPoint))}static getPrevPoint(e,t){var i=t-1;if(i<0)return xe.getLastPoint(e,t);var r=e[i];return r&&(r.index=i),r}static getNextPoint(e,t){var i=e[t],r=e[t+1];return r&&(r.index=t+1),(i.connected||i.close)&&(r=xe.getFirstPoint(e,t)),r}static removePoint(e,t,i){if(i==="startPoint")return e.filter((r,s)=>s!==t)}static splitPoints(e){let t=[],i=[];return e.forEach(r=>{xe.isFirst(r)?(i=[r],t.push(i)):i.push(r)}),t}static recoverPoints(e){const t=[];return e.forEach(i=>{i.forEach((r,s)=>{s===0&&(r.command="M",r.originalCommand="M")}),t.push.apply(t,i)}),t.forEach((i,r)=>{i.index=r}),t}}class dt{static M(e,t){return{command:"M",values:[e,t]}}static L(e,t){return{command:"L",values:[e,t]}}static Q(e,t,i,r){return{command:"Q",values:[e,t,i,r]}}static C(e,t,i,r,s,a){return{command:"C",values:[e,t,i,r,s,a]}}static A(e,t,i,r,s,a,o){return{command:"A",values:[e,t,i,r,s,a,o]}}static Z(){return{command:"Z",values:[]}}static isMoveTo(e){return e.command==="M"}static isLineTo(e){return e.command==="L"}static isQuadraticBezierCurve(e){return e.command==="Q"}static isCubicBezierCurve(e){return e.command==="C"}static isArc(e){return e.command==="A"}static isClosePath(e){return e.command==="Z"}}const IR=/([mMlLvVhHcCsSqQtTaAzZ]([^mMlLvVhHcCsSqQtTaAzZ]*))/g;var LR=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function pu(n){return{x:n[0],y:n[1]}}class _e{constructor(e=""){this.reset(e)}reset(e=""){return this.segments=[],this.pathString=e.trim(),this.parse(),this}resetSegments(e){return this.segments=e||[],this.pathString=this.joinPath(),this}addSegments(e){return this.resetSegments([...this.segments,...e])}addPath(e,t=Ki()){const i=e.clone();return i.transformMat4(t),this.addSegments(i.segments)}trim(e=""){var t=e.match(LR)||[];return t.filter(i=>i!="")}parse(){var e=this.pathString.match(IR)||[];return this.segments=e.map(t=>{var i=t[0],r=this.trim(t.replace(i,"")).map(s=>+s);return{command:i,values:r}}),this.segments=this.segments.map((t,i)=>{switch(t.command){case"m":var a=this.segments[i-1];a&&(a.command=="z"||a.command=="Z")&&(a=this.segments[i-2]);for(var o=(a==null?void 0:a.values[a.values.length-2])||0,l=(a==null?void 0:a.values[a.values.length-1])||0,r=0,s=t.values.length;r{const r=this.segments[i-1];if(t.command=="A"){const s=(r==null?void 0:r.values[r.values.length-2])||0,a=(r==null?void 0:r.values[r.values.length-1])||0,[o,l,c,h,d,u,p]=t.values;_e.arcToCurve(s,a,o,l,c,h,d,u,p).segments.forEach(g=>{g.command!=="M"||g.command})}}),this}convertGenerator(){for(var e=[],t=0,i=this.segments.length;t!!x),e}setSegments(e,t){this.segments[e]=t}getSegments(e){return $t(e)?this.segments[e]:this.segments}joinPath(e,t=""){var i=e||this.segments;return i.map(r=>`${r.command} ${r.values.length?r.values.join(" "):""}`).join(t)}each(e,t=!1){var i=this.segments.map((r,s)=>e.call(this,r,s));return t?i:(this.segments=i,this)}_loop(e,t=!1){return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":var a=e(r,0);i.values=[a[0],a[1]];break;case"V":var a=e([+r[0],0]);i.values=[a[0]];break;case"H":var a=e([0,+r[0]]);i.values=[a[1]];break;case"C":case"S":case"T":case"Q":for(var o=0,l=r.length;o({command:t.command,values:t.values.slice()}))),e}translate(e,t){return this.transformMat4(Si([],[e,t,0])),this}translateTo(e,t){return this.joinPath(this.transformMat4(Si([],[e,t,0]),!0))}scale(e,t){return this.transformMat4(jn([],[e,t,1])),this}scaleTo(e,t){return this.joinPath(this.transformMat4(jn([],[e,t,1]),!0))}scaleWith(e,t){const i=this.clone(),r=Zi(i.getBBox());i.translate(-r.x,-r.y);const s=Math.min(e/r.width,t/r.height);return i.scale(s,s).translate(e/2-r.width/2*s,t/2-r.height/2*s)}scaleFunc(e=i=>i,t=i=>i){return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":i.values=[e(r[0]),t(r[1])];break;case"C":case"Q":for(var a=0,o=r.length;a{for(let s=0,a=t.length;s{const r=[];i.segments.forEach(({segment:s},a)=>{var l;const o=(l=i.segments[a-1])==null?void 0:l.segment;if(s.command==="M"){r.push(s);return}else if(s.command==="L"){const c=LA([[o.values[o.values.length-2],o.values[o.values.length-1],0],[s.values[0],s.values[1],0]]);r.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]});return}else if(s.command==="C")r.push(s);else if(s.command==="Q"){const c=lg([[o.values[o.values.length-2],o.values[o.values.length-1],0],[s.values[0],s.values[1],0],[s.values[2],s.values[3],0]]);r.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]})}else s.command==="Z"&&r.push(s)}),e.push(...r)}),_e.fromSegments(e)}polygonal(){const e=this.toPathList();return e.forEach(t=>{const i=[];t.segments.forEach((r,s)=>{const a=t.segments[s-1];r.command==="M"||r.command==="L"?i.push(r):r.command==="C"?i.push(...Ly([a.values[a.values.length-2],a.values[a.values.length-1],0],[r.values[0],r.values[1],0],[r.values[2],r.values[3],0],[r.values[4],r.values[5],0]).map(o=>({command:"L",values:[o[0],o[1],0]}))):r.command==="Q"?i.push(...Ly(...lg([[a.values[a.values.length-2],a.values[a.values.length-1],0],[r.values[0],r.values[1],0],[r.values[2],r.values[3],0]])).map(o=>({command:"L",values:[o[0],o[1],0]}))):r.command==="Z"&&i.push(r)}),t.resetSegments(i)}),_e.joinPathList(e)}divideSegmentByCount(e=1){let t=[];return this.getGroup().forEach(r=>{const s=[];r.segments.forEach(({segment:a},o)=>{var c;const l=(c=r.segments[o-1])==null?void 0:c.segment;a.command==="M"?s.push(a):a.command==="L"?IA([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]}],e).forEach(([,d])=>{s.push(dt.L(d.x,d.y))}):a.command==="Q"?EA([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]},{x:a.values[2],y:a.values[3]}],e).forEach(([,d,u])=>{s.push(dt.Q(d.x,d.y,u.x,u.y))}):a.command==="C"?CA([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]},{x:a.values[2],y:a.values[3]},{x:a.values[4],y:a.values[5]}],e).forEach(([,d,u,p])=>{s.push(dt.C(d.x,d.y,u.x,u.y,p.x,p.y))}):a.command==="Z"&&s.push(a)}),t=t.concat(s)}),_e.fromSegments(t)}getBBox(){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;return this.each(function(s,a){var o=s.values,l=s.command;const c=this.segments[a-1];switch(l){case"M":case"L":e=Math.min(e,o[0]),i=Math.max(i,o[0]),t=Math.min(t,o[1]),r=Math.max(r,o[1]);break;case"C":ky([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0],[o[4],o[5],0]]).forEach(h=>{e=Math.min(e,h[0]),i=Math.max(i,h[0]),t=Math.min(t,h[1]),r=Math.max(r,h[1])});break;case"Q":ky(lg([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0]])).forEach(h=>{e=Math.min(e,h[0]),i=Math.max(i,h[0]),t=Math.min(t,h[1]),r=Math.max(r,h[1])});break}return s}),[[e,t,0],[i,t,0],[i,r,0],[e,r,0]]}rect(){const e=this.getBBox();return{x:e[0][0],y:e[0][1],width:yr(e[0],e[1]),height:yr(e[0],e[3]),right:e[0][0]+yr(e[0],e[1]),bottom:e[0][1]+yr(e[0],e[3])}}getClosedPointInfo({x:e,y:t},i=20){let r=Number.MAX_SAFE_INTEGER,s={},a={};for(var o=1,l=this.segments.length;o[t,i,r]){const t=Zi(this.getBBox());return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":case"C":case"Q":for(var a=0,o=r.length;aBt(i,e)),t}),this}reverseSegments(e){const t=[];let i=e.length-1;for(var r=i;r>0;r--){const s=e[r],a=s.values,o=s.command,l=e[r-1],c=l.values[l.values.length-2],h=l.values[l.values.length-1];switch(o){case"L":r===i&&t.push(dt.M(a[0],a[1])),t.push(dt.L(c,h));break;case"C":r===i&&t.push(dt.M(a[4],a[5])),t.push(dt.C(a[2],a[3],a[0],a[1],c,h));break;case"Q":r===i&&t.push(dt.M(a[2],a[3])),t.push(dt.Q(a[0],a[1],c,h));break;case"Z":t.push(s),i=r-1;break}}return t[0].command==="Z"&&t.push(t.shift()),t}splitSegments(){const e=[];let t=[];return this.segments.forEach(i=>{i.command==="M"?(t=[i],e.push(t)):t.push(i)}),e}reverse(...e){const t=this.splitSegments(),i=[];return e.length===0?t.forEach(r=>{i.push.apply(i,this.reverseSegments(r))}):t.forEach((r,s)=>{e.includes(s)?i.push.apply(i,this.reverseSegments(r)):i.push.apply(i,r)}),this.resetSegments(i)}reversePathStringByFunc(e){const t=this.toPathList().map((i,r)=>e(i,r)?i.reverse():i);return _e.joinPathList(t).toSVGString()}getCenterPointers(){let e=[],t=[];return this.segments.forEach((i,r)=>{var s=i.values,a=i.command;switch(a){case"M":case"L":e.push({index:r,pointer:[...i.values,0]});break;case"V":e.push({index:r,pointer:[s[0],t.pop(),0]});break;case"H":t.pop(),e.push({index:r,pointer:[t.pop(),s[0],0]});break;case"C":case"S":case"T":case"Q":e.push({index:r,pointer:[s[s.length-2],s[s.length-1],0]});break}t=rt(s)}),e}get points(){return this.getCenterPointers()}getSamePointers(e,t=0){return this.getCenterPointers().filter(i=>{if(yr(i.pointer,e)<=t)return!0})}getGroup(){const e=[];let t=[];return this.segments.forEach((i,r)=>{i.command==="M"?(t=[{index:r,segment:i}],e.push({index:r,groupIndex:e.length,segments:t})):t.push({index:r,segment:i})}),e}createGroupPath(e){var i,r;const t=new _e;return t.resetSegments(((r=(i=this.getGroup()[e])==null?void 0:i.segments)==null?void 0:r.map(s=>s.segment))||[]),t}toPathList(){return this.getGroup().map(e=>_e.fromSegments(e.segments.map(t=>t.segment)))}replaceSegment(e,...t){const i=[...this.segments];i.splice(e,1,...t),this.resetSegments(i)}splitSegmentByPoint(e,t=0){const i=this.getClosedPointInfo(e,t);if(i&&i.t>0&&i.t<1){switch(i.segment.command){case"C":var r=Kc(i.points,i.t),s=r.first,a=dt.C(s[1].x,s[1].y,s[2].x,s[2].y,s[3].x,s[3].y),o=r.second,l=dt.C(o[1].x,o[1].y,o[2].x,o[2].y,o[3].x,o[3].y);this.replaceSegment(i.index,a,l);break;case"Q":var r=qc(i.points,i.t),s=r.first,a=dt.Q(s[1].x,s[1].y,s[2].x,s[2].y),o=r.second,l=dt.Q(o[1].x,o[1].y,o[2].x,o[2].y);this.replaceSegment(i.index,a,l);break;case"L":var r=Zc(i.points,i.t),s=r.first,a=dt.L(s[1].x,s[1].y),o=r.second,l=dt.L(o[1].x,o[1].y);this.replaceSegment(i.index,a,l);break;default:return}return i}}toMultiSegmentPathList(){const e=[];return this.getGroup().forEach(i=>{i.segments.forEach((r,s)=>{var d;const a=i.segments[s-1],o=((d=a==null?void 0:a.segment)==null?void 0:d.values)||[],l=o[o.length-2],c=o[o.length-1],h=r.segment.values;r.segment.command==="M"||(r.segment.command==="L"?e.push(new _e(`M ${l} ${c}L ${h.join(" ")}`)):r.segment.command==="C"?e.push(new _e(`M ${l} ${c}C ${h.join(" ")}`)):r.segment.command==="Q"&&e.push(new _e(`M ${l} ${c}Q ${h.join(" ")}`)))})}),e}simplify(e=.1){const t=[];return this.getGroup().forEach(r=>{const s=[...r.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>({x:l.segment.values[0],y:l.segment.values[1]}))],a=xe.simply(s,e),o=[];a.forEach((l,c)=>{c===0?o.push(dt.M(l.x,l.y)):o.push(dt.L(l.x,l.y))}),t.push(...o)}),_e.fromSegments(t)}smooth(e=50){let t=[];return this.getGroup().forEach(r=>{const s=[...r.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>[...l.segment.values,0])],a=$R(s,e),o=[];a.forEach((l,c)=>{c===0&&o.push(dt.M(...l[0])),o.push(dt.C(l[1][0],l[1][1],l[2][0],l[2][1],l[3][0],l[3][1]))}),r.segments[r.segments.length-1].segment.command.toLowerCase()==="z"&&o.push(dt.Z()),t=t.concat(o)}),_e.fromSegments(t)}cardinalSplines(e=.5){const t=[];this.getGroup().forEach(s=>{const a=[...s.segments.filter(c=>c.segment.command.toLowerCase()!=="z").map(c=>[...c.segment.values,0])],o=[];a.forEach((c,h)=>{const d=a[h-1],u=a[h+1];if(h===0)o.push({point:c});else if(h===a.length-1){const p=a[0];if(If(p,c)){const f=d,g=c,m=a[1],v=B0([],ft([],m,f),[2,2,1]),b=oa([],v,[1-e,1-e,1]),_=Tr([],b);o.push({reversePoint:_t([],g,_),point:g,endPoint:_t([],g,b)})}else o.push({point:c})}else{const p=d,f=c,m=B0([],ft([],u,p),[2,2,1]),v=oa([],m,[1-e,1-e,1]),b=Tr([],v);o.push({reversePoint:_t([],f,b),point:f,endPoint:_t([],f,v)})}});const l=[];o.forEach((c,h)=>{if(h===0)l.push(dt.M(c.point[0],c.point[1]));else{const d=o[h-1]||o[o.length-1];if(d.endPoint)c.reversePoint?l.push(dt.C(d.endPoint[0],d.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(dt.Q(d.endPoint[0],d.endPoint[1],c.point[0],c.point[1]));else if(h===1){const u=o[o.length-1];u.endPoint?l.push(dt.C(u.endPoint[0],u.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(dt.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}else l.push(dt.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}}),t.push(...l)});const r=new _e;return r.resetSegments(t),r}Z(){return this.segments.push(dt.Z()),this}M(e,t){return this.segments.push(dt.M(e,t)),this}L(e,t){return this.segments.push(dt.L(e,t)),this}C(e,t,i,r,s,a){return this.segments.push(dt.C(e,t,i,r,s,a)),this}Q(e,t,i,r){return this.segments.push(dt.Q(e,t,i,r)),this}drawRect(e,t,i,r){return this.segments.push(dt.M(e,t),dt.L(e+i,t),dt.L(e+i,t+r),dt.L(e,t+r),dt.L(e,t),dt.Z()),this}drawLine(e,t,i,r){return this.segments.push(dt.M(e,t),dt.L(i,r)),this}drawCircleWithRect(e,t,i,r=i){var s=.552284749831;const a=new _e;return a.resetSegments([dt.M(0,-1),dt.C(s,-1,1,-s,1,0),dt.C(1,s,s,1,0,1),dt.C(-s,1,-1,s,-1,0),dt.C(-1,-s,-s,-1,0,-1),dt.Z()]),a.translate(1,1).scale(i/2,r/2).translate(e,t),this.addPath(a),this}drawCircle(e,t,i){return this.drawCircleWithRect(e-i,t-i,i*2,i*2)}drawArc(e,t,i,r,s,a,o){const[l,c]=this.lastPoint;return this.addPath(_e.arcToCurve(l,c,e,t,i,r,s,a,o))}get verties(){let e=[],t=[];return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":e.push([...i.values,0]);break;case"V":e.push([r[0],t.pop(),0]);break;case"H":t.pop(),e.push([t.pop(),r[0],0]);break;case"C":case"S":case"T":case"Q":for(var a=0,o=r.length;a{const r=this.segments[i-1],s=this.segments[i+1];if(t.values.length>0){const l=t.values;for(var a=0,o=l.length;ae.command==="Z")&&OM(this.lastPoint,this.firstPoint)}get opened(){return!this.closed}get length(){let e=0;return this.getGroup().forEach(i=>{i.segments.forEach((r,s)=>{var d;const a=i.segments[s-1],o=((d=a==null?void 0:a.segment)==null?void 0:d.values)||[],l=o[o.length-2],c=o[o.length-1],h=r.segment.values;r.segment.command==="M"||(r.segment.command==="L"?e+=Rr(l,c,h[0],h[1]):r.segment.command==="C"?e+=Yc(l,c,h[0],h[1],h[2],h[3],h[4],h[5]):r.segment.command==="Q"&&(e+=yl(l,c,h[0],h[1],h[2],h[3])))})}),e}get lengthList(){let e=[];return this.getGroup().forEach((i,r)=>{i.segments.forEach((s,a)=>{var u;const o=i.segments[a-1],l=((u=o==null?void 0:o.segment)==null?void 0:u.values)||[],c=l[l.length-2],h=l[l.length-1],d=s.segment.values;s.segment.command==="M"||(s.segment.command==="L"?e.push({groupIndex:r,segmentIndex:a,length:Rr(c,h,d[0],d[1])}):s.segment.command==="C"?e.push({groupIndex:r,segmentIndex:a,length:Yc(c,h,d[0],d[1],d[2],d[3],d[4],d[5])}):s.segment.command==="Q"&&e.push({groupIndex:r,segmentIndex:a,length:yl(c,h,d[0],d[1],d[2],d[3])}))})}),e}get lastSegment(){const e=this.segments[this.segments.length-1];return e.command!=="Z"?e:this.segments[this.segments.length-2]}get lastPoint(){const e=this.lastSegment.values;return[e[e.length-2],e[e.length-1]]}get firstSegment(){return this.segments[0]}get firstPoint(){const e=this.firstSegment.values;return[e[0],e[1]]}static joinPathList(e=[]){const t=_e.fromSVGString();return e.forEach(i=>{t.addPath(i)}),t}static fromSegments(e){const t=new _e;return t.resetSegments(e),t}static fromStructuredVerties(e){const t=new _e,i=[];return e.forEach(r=>{i[r.segmentIndex]||(i[r.segmentIndex]={command:r.segment.command,values:[]}),i[r.segmentIndex].command!==dy.CLOSEPATH&&(i[r.segmentIndex].values[r.valueIndex]=r.vertex[0],i[r.segmentIndex].values[r.valueIndex+1]=r.vertex[1])}),t.resetSegments(i),t}static fromSVGString(e=""){return new _e(e)}static makeRect(e,t,i,r){return _e.fromSVGString().drawRect(e,t,i,r)}static makeLine(e,t,i,r){return _e.fromSVGString().drawLine(e,t,i,r)}static makeCircle(e,t,i,r){return _e.fromSVGString().drawCircleWithRect(e,t,i,r)}static makePathByPoints(e=[]){const t=e.map((i,r)=>r===0?dt.M(i.x,i.y):dt.L(i.x,i.y));return t.push(dt.Z()),_e.fromSegments(t)}static makePathByVerties(e=[],t=!0){const i=e.map((r,s)=>s===0?dt.M(r[0],r[1]):dt.L(r[0],r[1]));return t&&i.push(dt.Z()),_e.fromSegments(i)}static makePolygon(e,t,i=3){const r=[];for(var o=0;o{d.C(u.x1,u.y1,u.x2,u.y2,u.x,u.y)}),d}toCurveList(){const e=[];return this.segments.forEach((t,i)=>{if(i>0){const r=this.segments[i-1],s=[r.values[r.values.length-2],r.values[r.values.length-1]],a=[pu(s),pu([t.values[0],t.values[1]]),pu([t.values[2],t.values[3]]),pu([t.values[4],t.values[5]])];e.push({points:a,curveFunction:ou(...a)})}}),e}toInterpolateFunction(){const e=this.normalize().toCurveList().map(t=>({points:t.points,curveFunction:t.curveFunction,start:t.points[0].x,end:t.points[t.points.length-1].x}));return t=>{const i=e.find(s=>s.start<=t&&t<=s.end);if(i)return i.curveFunction(t).y;if(t===0)return e[0].points[0].y;const r=e[e.length-1].points;return r[r.length-1].y}}}function Ky(){return n=>Math.pow(2,-10*n)*Math.sin((n-.1)*5*Math.PI)+1}const vg=(n=1,e="end")=>{var t=1/n;return function(i){let r=0;const s=Bt(i/t,1e7);if(e=="start")r=Math.ceil(s);else if(e=="end"){if(i===0)return 0;if(i===1)return 1;r=Math.ceil(s)-1}return Math.min(Math.max(t*r,0),1)}};function yg(n=1,e="end"){return vg(n,e)}function qy(){return vg(1,"start")}function Zy(){return vg(1,"end")}var kR={step:yg,"step-start":qy,"step-end":Zy,stepStart:qy,stepEnd:Zy,"ease-out-elastic":Ky,easeOutElastic:Ky};function bg(n="linear"){var[e]=n.split("(").map(r=>r.trim()),t=kR[e];if(t){var i=n.split("(")[1].split(")")[0].split(",").map(r=>r.trim());return t(...i)}else return AR(n)}function AR(n){var e=Ey(n);return t=>e(t).y}const Jy={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class en extends gg{isGradient(){return!0}toString(){return"none"}getDefaultObject(e={}){return P({itemType:"image-resource",type:"gradient",colorsteps:[]},e)}toCloneObject(){return Ve(P({},super.toCloneObject()),{colorsteps:this.json.colorsteps.map(e=>e.clone())})}convert(e){return e.colorsteps[0]instanceof ti||(e.colorsteps=e.colorsteps.map(t=>new ti(t))),e}calculateAngle(){var e=this.json.angle;return Di(Jy[e])?e:Jy[e]||0}addColorStep(e,t=!0){return this.json.colorsteps.push(e),t&&this.sortColorStep(),e}pickColorStep(e){var t=this.colorsteps;if(!t.length)return{percent:0,color:"rgba(0,0,0,0)"};if(e{if(t.percent>i.percent)return 1;if(t.percenti.index?1:-1}),e.forEach((t,i)=>{t.index=i*100})}sortToRight(){var e=this.colorsteps;const t=e.length,i=100/t;e.forEach((r,s)=>{r.percent=i*(s+1)}),this.sortColorStep()}sortToLeft(){var e=this.colorsteps;const t=e.length,i=100/t;e.forEach((r,s)=>{r.percent=i*s}),this.sortColorStep()}addColorStepList(e=[]){e.forEach(t=>{this.addColorStep(t,!1)}),this.sortColorStep()}getColorStep(e){return this.json.colorsteps.filter(t=>t.id==e)[0]}clear(...e){e.length?this.json.colorsteps.splice(+e[0],1):this.json.colorsteps=[]}removeColorStepByIndex(e){this.json.colorsteps.splice(e,1)}removeColorStep(e){this.json.colorsteps=this.json.colorsteps.filter(t=>t.id!=e)}get colorsteps(){return this.json.colorsteps}makeTimingString(e,t=1){switch(e.name){case Je.LINEAR:return"";case Je.EASE:case Je.EASE_IN:case Je.EASE_OUT:case Je.EASE_IN_OUT:return`${e.name} ${t}`;case Je.STEPS:return`steps(${e.count}, ${e.direction})`;case Je.PATH:return`path(${e.d}) ${t}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2}) ${t}`}}getColorString(){return this.colorsteps.map(e=>{const{color:t,percent:i,timing:r,timingCount:s}=e;return`${t} ${i}% ${this.makeTimingString(r,s)}`}).join(",")}static makeColorStepList(e){const t=[];return e.forEach((i,r)=>{const{color:s,percent:a,timing:o,timingCount:l}=i;var c=e[r-1];if(r===0)return t.push({color:s,percent:a}),t;switch(o.name){case Je.STEPS:for(var p=yg(o.count,o.direction),f=[],h=0;h<=o.count;h++){var d=c.percent+(a-c.percent)*(h/o.count),u=mo(c.color,s,p(h/o.count));f.push({percent:d,color:u})}f.forEach((g,m)=>{if(m===0)t.push({percent:c.percent,color:g.color}),t.push(g);else{const v=f[m-1];t.push({percent:v.percent,color:g.color}),t.push(g)}});break;case Je.PATH:for(var p=_e.fromSVGString(o.d).toInterpolateFunction(),f=[],h=0;h<=l;h++){const m=c.percent+(a-c.percent)*(h/l),v=mo(c.color,s,p(h/l));f.push({percent:m,color:v})}t.push(...f);break;default:for(var p=bg(o.matchedString),f=[],h=0;h<=l;h++){const m=c.percent+(a-c.percent)*(h/l),v=mo(c.color,s,p(h/l));f.push({percent:m,color:v})}t.push(...f);break}}),t}static toCSSColorString(e=[],t="%",i=100){return en.makeColorStepList(e).map(s=>{const{color:a,percent:o}=s,l=o/100*i;return`${a} ${l}${t}`}).join(",")}static parseColorSteps(e){return e.map((t,i)=>{var r,s,a;if(t.length===1){const o=((r=e[i-1])==null?void 0:r[1])||{parsed:{value:0}},l=((s=e[i+1])==null?void 0:s[1])||{parsed:{value:100}};let c=0;return e[i-1]?e[i+1]?c=o.parsed.value+(l.parsed.value-o.parsed.value)*.5:c=100:c=0,new ti({color:t[0].matchedString,percent:c,unit:"%",timing:dr("linear").parsed,timingCount:1})}if(t.length===2)return new ti({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:dr("linear").parsed,timingCount:1});if(t.length===3)return t[2].parsed.funcType===Ut.TIMING?new ti({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:(a=t[3])==null?void 0:a.parsed.value}):new ti({color:t[0].matchedString,percent:t[2].parsed.value,unit:t[2].parsed.unit,timing:dr("steps(1, start)").parsed});if(t.length===4)return new ti({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:t[3].parsed.value})})}}const Qy={center:!0,top:!0,left:!0,right:!0,bottom:!0},e1={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Yn extends en{getDefaultObject(e={}){return super.getDefaultObject(P({type:"conic-gradient",angle:0,radialPosition:[zr.CENTER,zr.CENTER]},e))}toCloneObject(){return Ve(P({},super.toCloneObject()),{angle:this.json.angle,radialPosition:rt(this.json.radialPosition)})}hasAngle(){return!0}pickColorStep(e){return super.pickColorStep((e+100)%100)}getStartEndPoint(e){let t,i,r,[s,a]=this.json.radialPosition;const o=e.backRect,l=Ei(o.x,o.y,o.width,o.height);s=="center"&&(s=y.percent(50)),a=="center"&&(a=y.percent(50));const c=s.toPx(o.width),h=a.toPx(o.height),d=[o.x+c.value,o.y+h.value,0];let u=l[0],p=l[1],f=l[3],g=l[2];const m=Ne(d,u),v=Ne(d,p),b=Ne(d,f),_=Ne(d,g);t=vr(d);const x=Math.max(m,v,b,_);return i=Ct(t[0]+x,t[1],t[2]),r=Ct(t[0],t[1]-x,t[2]),{startPoint:t,endPoint:i,shapePoint:r}}toString(){var e=this.getColorString(),t=[],i=this.json,r=i.angle,s=i.radialPosition||zr.CENTER;s=Qy[s]?s:s.join(" "),$t(r)&&(r=+(e1[r]||r),t.push(`from ${r}deg`)),s&&t.push(`at ${s}`);var a=t.length?t.join(" ")+",":"";return`${i.type}(${a} ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=Yn.toCSSColorString(this.colorsteps,"deg",360),t=[],i=this.json,r=i.angle,s=i.radialPosition||zr.CENTER;s=Qy[s]?s:s.join(" "),$t(r)&&(r=+(e1[r]||r),t.push(`from ${r}deg`)),s&&t.push(`at ${s}`);var a=t.length?t.join(" ")+",":"";return`${i.type}(${a} ${e})`}static parse(e){const t=dr(e);var i={angle:0,radialPosition:["center","center"]};let[r,...s]=t.parameters;if(r[0].func!==Ut.COLOR){let o=!1,l=!1,c=[],h=[];r.forEach(d=>{d.func===Ut.KEYWORD&&d.matchedString==="from"?o=!0:d.func===Ut.KEYWORD&&d.matchedString==="at"?l=!0:l?c.push(d):o&&h.push(d)}),i.radialPosition=c.map(d=>{if(d.func===Ut.KEYWORD)switch(d.matchedString){case"top":return y.percent(0);case"left":return y.percent(0);case"right":return y.percent(100);case"bottom":return y.percent(100);case"center":return y.percent(50)}return d.parsed}),h.length&&(i.angle=h[0].parsed.value)}else s=t.parameters;const a=Yn.parseColorSteps(s);return new Yn(Ve(P({},i),{colorsteps:a}))}}const t1={0:"to top",45:"to top right",90:"to right",135:"to bottom right",180:"to bottom",225:"to bottom left",270:"to left",315:"to top left"},RR={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Kn extends en{getDefaultObject(e){return super.getDefaultObject(P({type:"linear-gradient",angle:0},e))}toCloneObject(){return Ve(P({},super.toCloneObject()),{angle:this.json.angle})}isLinear(){return!0}hasAngle(){return!0}getRealAngle(){return this.json.angle}get angle(){return this.getRealAngle()}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t="",i=this.json.angle||0;t=i,_i(t)&&(t=t1[`${t}`]||t),_i(t)&&(t=t>360?t%360:t,t=`${t}deg`);var r=`${this.json.type}(${t}, ${e})`;return r}toCSSString(){if(this.colorsteps.length===0)return"";var e=Kn.toCSSColorString(this.colorsteps),t="",i=this.json.angle||0;t=i,_i(t)&&(t=t1[`${t}`]||t),_i(t)&&(t=t>360?t%360:t,t=`${t}deg`);var r=`${this.json.type}(${t}, ${e})`;return r}static parse(e){const t=dr(e);var i={};let[r,...s]=t.parameters;const a=[],o=[];r[0].func!==Ut.COLOR?r.forEach(h=>{h.func===Ut.KEYWORD?o.push(h):a.push(h)}):s=t.parameters;let l=o.map(h=>h.matchedString).join(" ");l===""?[l]=a.map(h=>h.parsed.value):l=RR[l],i=Ve(P({},i),{angle:l});const c=Kn.parseColorSteps(s);return new Kn(Ve(P({},i),{colorsteps:c}))}}const i1={center:!0,top:!0,left:!0,right:!0,bottom:!0};class qn extends en{getDefaultObject(e={}){return super.getDefaultObject(P({type:"radial-gradient",radialType:"ellipse",radialSize:cn.FARTHEST_CORNER,radialPosition:[zr.CENTER,zr.CENTER]},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("radialType","radialSize","radialPosition"))}getConerDist(e){let t=e.backVerties[0],i=e.backVerties[1],r=e.backVerties[3],s=e.backVerties[2];const a=Ne(e.radialCenterPosition,t),o=Ne(e.radialCenterPosition,i),l=Ne(e.radialCenterPosition,r),c=Ne(e.radialCenterPosition,s),h=[["top-left",t,a],["top-right",i,o],["bottom-left",r,l],["bottom-right",s,c]];return h.sort((d,u)=>d[2]-u[2]),{cornerList:h,topLeftDist:a,topRightDist:o,bottomLeftDist:l,bottomRightDist:c}}EllipseRadiusToSide(e,t=!0){var i=Math.abs(e.radialCenterPoint[0]),r=Math.abs(e.radialCenterPoint[1]),s=Math.abs(e.radialCenterPoint[0]-e.backRect.width),a=Math.abs(e.radialCenterPoint[1]-e.backRect.height);if(t)var o=is?i:s,l=r>a?r:a;return{width:o,height:l}}EllipseRadius(e,t,i=!0){const{cornerList:r,topLeftDist:s,topRightDist:a,bottomRightDist:o,bottomLeftDist:l}=this.getConerDist(t),c=[s,a,l,o];var h=i?Math.min(...c):Math.max(...c),d=r.find(m=>m[2]===h)[1],u=e.width/e.height;if(u!==0){var p=ft([],d,t.radialCenterPosition),f=Math.sqrt(Math.pow(p[0],2)+Math.pow(p[1],2)*Math.pow(u,2)),g=f/u;return{width:f,height:g}}}getStartEndPoint(e){let t,i,r;const s=this.json.radialType,a=this.json.radialSize;let[o,l]=this.json.radialPosition;const c=e.backRect,h=Ei(c.x,c.y,c.width,c.height);o=="center"&&(o=y.percent(50)),l=="center"&&(l=y.percent(50));const d=o.toPx(c.width),u=l.toPx(c.height),p=[c.x+d.value,c.y+u.value,0];let f=[h[0][0],u.value,0],g=[h[1][0],u.value,0],m=[d.value,h[0][1],0],v=[d.value,h[3][1],0];const b=Ne(p,f),_=Ne(p,g),x=Ne(p,m),S=Ne(p,v),E=[["top",m,x],["left",f,b],["right",g,_],["bottom",v,S]];E.sort((ye,J)=>ye[2]-J[2]);let A=h[0],z=h[1],Z=h[3],Y=h[2];const T=Ne(p,A),V=Ne(p,z),oe=Ne(p,Z),B=Ne(p,Y),Q=[["top-left",A,T],["top-right",z,V],["bottom-left",Z,oe],["bottom-right",Y,B]];switch(Q.sort((ye,J)=>ye[2]-J[2]),t=vr(p),s){case Ci.CIRCLE:switch(a){case cn.CLOSEST_SIDE:var[,,ee]=E[0];i=Ct(t[0]+ee,t[1],t[2]),r=Ct(t[0],t[1]+ee,t[2]);break;case cn.CLOSEST_CORNER:var[,,ee]=Q[0];i=Ct(t[0]+ee,t[1],t[2]),r=Ct(t[0],t[1]+ee,t[2]);break;case cn.FARTHEST_SIDE:var[,,ee]=E[E.length-1];i=Ct(t[0]+ee,t[1],t[2]),r=Ct(t[0],t[1]+ee,t[2]);break;case Ci.CIRCLE:case cn.FARTHEST_CORNER:var[,,ee]=Q[Q.length-1];i=Ct(t[0]+ee,t[1],t[2]),r=Ct(t[0],t[1]+ee,t[2]);break;default:var ee=(a[0]||a).toPx(Ne(e.backVerties[1],e.backVerties[0])).value;i=Ct(t[0]+ee,t[1],t[2]),r=Ct(t[0],t[1]+ee,t[2]);break}break;case Ci.ELLIPSE:switch(a){case cn.CLOSEST_SIDE:var te=this.EllipseRadiusToSide(e,!0);i=Ct(t[0]+te.width,t[1],t[2]),r=Ct(t[0],t[1]+te.height,t[2]);break;case cn.CLOSEST_CORNER:var te=this.EllipseRadiusToSide(e,!0),q=this.EllipseRadius(te,e,!0);i=Ct(t[0]+q.width,t[1],t[2]),r=Ct(t[0],t[1]+q.height,t[2]);break;case cn.FARTHEST_SIDE:var te=this.EllipseRadiusToSide(e,!1);i=Ct(t[0]+te.width,t[1],t[2]),r=Ct(t[0],t[1]+te.height,t[2]);break;case cn.FARTHEST_CORNER:var te=this.EllipseRadiusToSide(e,!1),q=this.EllipseRadius(te,e,!1);i=Ct(t[0]+q.width,t[1],t[2]),r=Ct(t[0],t[1]+q.height,t[2]);break;default:var ne=a[0].toPx(Ne(e.backVerties[1],e.backVerties[0])).value,ce=a[1].toPx(Ne(e.backVerties[3],e.backVerties[0])).value;i=Ct(t[0]+ne,t[1],t[2]),r=Ct(t[0],t[1]+ce,t[2]);break}break}return{startPoint:t,endPoint:i,shapePoint:r}}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t=this.json,i="",r=t.radialType||Ci.ELLIPSE,s=t.radialSize||cn.FARTHEST_CORNER,a=t.radialPosition||["center","center"];return a=i1[a]?a:a.join(" "),s=Fi(s)?s.join(" "):s,i=a?`${r} ${s} at ${a}`:`${r} ${s}`,`${t.type||"radial-gradient"}(${i}, ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=qn.toCSSColorString(this.colorsteps),t=this.json,i="",r=t.radialType||Ci.ELLIPSE,s=t.radialSize||cn.FARTHEST_CORNER,a=t.radialPosition||["center","center"];return a=i1[a]?a:a.join(" "),s=Fi(s)?s.join(" "):s,i=a?`${r} ${s} at ${a}`:`${r} ${s}`,`${t.type||"radial-gradient"}(${i}, ${e})`}static parse(e){const t=dr(e);var i={radialType:Ci.ELLIPSE,radialSize:cn.FARTHEST_CORNER,radialPosition:["center","center"]};let[r,...s]=t.parameters;if(r[0].func!==Ut.COLOR){let o=Ci.ELLIPSE,l=!1,c=[],h=[];r.forEach(d=>{if(d.func===Ut.KEYWORD&&d.matchedString==="at")l=!0;else if(l)c.push(d);else switch(d.matchedString){case Ci.CIRCLE:case Ci.ELLIPSE:o=d.matchedString;break;default:h.push(d);break}}),i.radialType=o,i.radialPosition=c.map(d=>{if(d.func===Ut.KEYWORD)switch(d.matchedString){case"top":return y.percent(0);case"left":return y.percent(0);case"right":return y.percent(100);case"bottom":return y.percent(100);case"center":return y.percent(50)}return d.parsed}),i.radialSize=h.map(d=>d.func===Ut.KEYWORD?d.matchedString:d.parsed),i.radialSize.length===1&&(i.radialSize=i.radialSize[0])}else s=t.parameters;const a=qn.parseColorSteps(s);return new qn(Ve(P({},i),{colorsteps:a}))}}class vo extends Yn{getDefaultObject(){return super.getDefaultObject({type:"repeating-conic-gradient",angle:0,radialPosition:[zr.CENTER,zr.CENTER]})}static parse(e){var t=Yn.parse(e);return new vo({angle:t.angle,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class yo extends Kn{getDefaultObject(){return super.getDefaultObject({type:"repeating-linear-gradient",angle:0})}static parse(e){var t=Kn.parse(e);return new yo({angle:t.angle,colorsteps:t.colorsteps})}}class bo extends qn{getDefaultObject(){return super.getDefaultObject({type:"repeating-radial-gradient"})}static parse(e){var t=qn.parse(e);return new bo({radialType:t.radialType,radialSize:t.radialSize,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class xa extends en{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",static:!0,colorsteps:[new ti({color:"red",percent:0,index:0}),new ti({color:"red",percent:100,index:0})]})}toCloneObject(){return Ve(P({},super.toCloneObject()),{static:!0})}static parse(e){const t=dr(e);var i=en.parseColorSteps(t.parameters);return new xa({colorsteps:i})}static create(e="transparent"){return new xa({colorsteps:[new ti({color:e,percent:0,index:0}),new ti({color:e,percent:100,index:1})]})}toString(){var e=this.json.colorsteps[0].color;return`static-gradient(${e})`}toCSSString(){if(this.colorsteps.length===0)return"";const e=this.colorsteps[0].color||"black";return`linear-gradient(${e} 0%, ${e} 100%)`}}const OR=["jpg","jpeg","png","gif","svg"];class xo extends gg{getDefaultObject(e={}){return super.getDefaultObject(P({type:ue.URL,url:"",datauri:""},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("url","datauri"))}static parse(e){var t=e.split("(")[1].split(")")[0];return new xo({url:t})}isUrl(){return!0}toString(e){return`url(${e||this.json.url})`}static isImageFile(e){return OR.includes(e)}}const zR=["repeat","no-repeat","repeat-x","repeat-y","round","space"];class Ot extends Vr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:Ot.createImage(e.images[0])})}static createImage(e){return new xo({url:e})}setGradient(e){this.reset({type:e.type,image:Ot.createGradient(e,this.json.image)})}static createGradient(e,t){const i=e.colorsteps||t.colorsteps,r=e.angle||t.angle,s=e.radialType||t.radialType,a=e.radialPosition||t.radialPosition;let o=t.toJSON();switch(delete o.itemType,delete o.type,e.type){case"static-gradient":return new xa(Ve(P({},o),{colorsteps:i}));case"linear-gradient":return new Kn(Ve(P({},o),{colorsteps:i,angle:r}));case"repeating-linear-gradient":return new yo(Ve(P({},o),{colorsteps:i,angle:r}));case"radial-gradient":return new qn(Ve(P({},o),{colorsteps:i,radialType:s,radialPosition:a}));case"repeating-radial-gradient":return new bo(Ve(P({},o),{colorsteps:i,radialType:s,radialPosition:a}));case"conic-gradient":return new Yn(Ve(P({},o),{colorsteps:i,angle:r,radialPosition:a}));case"repeating-conic-gradient":return new vo(Ve(P({},o),{colorsteps:i,angle:r,radialPosition:a}))}return new en}getDefaultObject(){return super.getDefaultObject({itemType:"background-image",checked:!1,blendMode:"normal",size:"auto",repeat:"repeat",width:y.percent(100),height:y.percent(100),x:y.percent(0),y:y.percent(0)})}toCloneObject(){var e=this.json;return Ve(P(P({},super.toCloneObject()),this.attrs("checked","blendMode","size","repeat","width","height","x","y")),{image:e.image.toString()})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width&&(e.width=y.parse(e.width)),e.height&&(e.height=y.parse(e.height)),ni(e.image)&&(e.image=Ot.parseImage(e.image)),e}get image(){return this.json.image}set image(e){this.json.image=e}checkField(e,t){return e==="repeat"?zR.includes(t):super.checkField(e,t)}recoverOffset(e,t,i,r=0,s=0,a={}){const{x:o,y:l,width:c,height:h}=this.json,d=Math.floor(c.toPx(i.width).value+r),u=a.shiftKey?d:Math.floor(h.toPx(i.height).value+s);e-=i.x,t-=i.y,d<0&&(e+=d),u<0&&(t+=u);let p=y.px(e),f=y.px(t);const g=2;return o.isPercent()&&(Math.abs(e)`${e}: ${t}`).join(";")}toBackgroundCSS(){var e=this.toCSS();return{background:`${e["background-image"]} `}}static parse(e){return new Ot(e)}static parseImage(e){const t=dr(e);let i=null;if(!t||e==="undefined")return xa.create(e||"transparent");switch(t.func){case ue.LINEAR:i=Kn.parse(t.matchedString);break;case ue.REPEATING_LINEAR:i=yo.parse(t.matchedString);break;case ue.RADIAL:i=qn.parse(t.matchedString);break;case ue.REPEATING_RADIAL:i=bo.parse(t.matchedString);break;case ue.CONIC:i=Yn.parse(t.matchedString);break;case ue.REPEATING_CONIC:i=vo.parse(t.matchedString);break;case ue.URL:i=xo.parse(t.matchedString);break;default:i=xa.parse(t.matchedString);break}return i}static changeImageType(e){switch(e.type){case ue.STATIC:return new xa(e);case ue.LINEAR:return new Kn(e);case ue.REPEATING_LINEAR:return new yo(e);case ue.RADIAL:return new qn(e);case ue.REPEATING_RADIAL:return new bo(e);case ue.CONIC:return new Yn(e);case ue.REPEATING_CONIC:return new vo(e);case ue.URL:return new xo(e)}}static parseStyle(e){var t=[];return e["background-image"]&&wR(e["background-image"],"background-image").forEach((r,s)=>{const a=r[0];let o;switch(a.func){case ue.STATIC:o=xa.parse(a.matchedString);break;case ue.LINEAR:o=Kn.parse(a.matchedString);break;case ue.REPEATING_LINEAR:o=yo.parse(a.matchedString);break;case ue.RADIAL:o=qn.parse(a.matchedString);break;case ue.REPEATING_RADIAL:o=bo.parse(a.matchedString);break;case ue.CONIC:o=Yn.parse(a.matchedString);break;case ue.REPEATING_CONIC:o=vo.parse(a.matchedString);break;case ue.URL:o=xo.parse(a.matchedString);break}t[s]=new Ot({type:o.type,image:o})}),e["background-repeat"]&&e["background-repeat"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].repeat=i)}),e["background-blend-mode"]&&e["background-blend-mode"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].blendMode=i)}),e["background-size"]&&e["background-size"].split(",").map(i=>i.trim()).forEach((i,r)=>{if(t[r])if(i=="cover"||i==="contain"||i==="auto")t[r].size=i;else{t[r].size="auto";let[s,a]=i.split(" ");t[r].width=y.parse(s),t[r].height=y.parse(a)}}),e["background-position"]&&e["background-position"].split(",").map(i=>i.trim()).forEach((i,r)=>{if(t[r]){let[s,a]=i.split(" ");t[r].x=y.parse(s),t[r].y=y.parse(a)}}),e["background-visibility"]&&e["background-visibility"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].visibility=i===xn.HIDDEN?xn.HIDDEN:xn.VISIBLE)}),t}static toCSS(e){var t={};return e.forEach(i=>{$c(i.toCSS(),(r,s)=>{t[r]||(t[r]=[]),t[r].push(s)})}),hf(t)}static toProperty(e){var t={};return e.forEach(i=>{$c(i.toProperty(),(r,s)=>{t[r]||(t[r]=[]),t[r].push(s)})}),hf(t)}static join(e){return ei(Ot.toProperty(e.map(t=>Ot.parse(t))))}static joinCSS(e){return Ot.toCSS(e.map(t=>Ot.parse(t)))}static parseList(e=[]){return e.map(t=>Ot.parse(t))}}class VR extends ge{initState(){var i;const e=Ot.parseImage(this.props.value||"static-gradient(#ececec)"),t=(i=e.colorsteps[this.props.index])==null?void 0:i.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(r=>this.$context.selection.isSelectedColorStep(r.id))),{id:t,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({image:Ot.parseImage(e)},!1),this.refresh()}template(){return` + */function i(S,V,E){if(!Array.isArray(S))throw new TypeError("First argument should be an array");if(S.forEach(function(U){if(!Array.isArray(U)||U.some(function(X){return typeof X!="number"})||U.length!==S[0].length)throw Error("Each point should be an array of numbers. Each point should have the same amount of numbers.")}),S=S.filter(function(U,X){return X===0||!U.every(function(ce,he){return ce===S[X-1][he]})}),S.length<2)return[];var I=S.length,O=g(S[1],S[0]),B=g(S[I-2],S[I-1]);return a(S,O,B,V,E)}function a(S,V,E,I,O){var B=20,U,X,ce,he,ye,ve,Re,Q,He,Ye,De,yt,je;if(S.length===2)return yt=y.vectorLen(y.subtract(S[0],S[1]))/3,U=[S[0],y.addArrays(S[0],y.mulItems(V,yt)),y.addArrays(S[1],y.mulItems(E,yt)),S[1]],[U];X=h(S);var ze=n(S,X,X,V,E,O);if(U=ze[0],he=ze[1],ve=ze[2],he===0||he.9999&&ie<1.0001)break}ye=he,Re=ve}if(De=[],Q=y.subtract(S[ve-1],S[ve+1]),Q.every(function(_t){return _t===0})){Q=y.subtract(S[ve-1],S[ve]);var ut=[-Q[1],Q[0]];Q[0]=ut[0],Q[1]=ut[1]}return He=y.normalize(Q),Ye=y.mulItems(He,-1),De=De.concat(a(S.slice(0,ve+1),V,He,I,O)),De=De.concat(a(S.slice(ve),Ye,E,I,O)),De}function n(S,V,E,I,O,B){var U,X,ce;U=o(S,E,I,O);var he=u(S,U,V);return X=he[0],ce=he[1],B&&B({bez:U,points:S,params:V,maxErr:X,maxPoint:ce}),[U,X,ce]}function o(S,V,E,I){var O,B,U,X,ce,he,ye,ve,Re,Q,He,Ye,De,yt,je,ze,tt,ie=S[0],ut=S[S.length-1];for(O=[ie,null,null,ut],B=y.zeros_Xx2x2(V.length),De=0,yt=V.length;DeO&&(O=I,B=X);return[O,B]}var d=function(V,E){for(var I,O=[0],B=V[0],U=0,X=1;X<=E;X++)I=P.q(V,X/E),U+=y.vectorLen(y.subtract(I,B)),O.push(U),B=I;return O=O.map(function(ce){return ce/U}),O};function v(S,V,E,I){if(V<0)return 0;if(V>1)return 1;for(var O,B,U,X,ce,he=1;he<=I;he++)if(V<=E[he]){X=(he-1)/I,U=he/I,B=E[he-1],O=E[he],ce=(V-B)/(O-B)*(U-X)+X;break}return ce}function g(S,V){return y.normalize(y.subtract(S,V))}var y=function(){function S(){r(this,S)}return S.zeros_Xx2x2=function(E){for(var I=[];E--;)I.push([0,0]);return I},S.mulItems=function(E,I){return E.map(function(O){return O*I})},S.mulMatrix=function(E,I){return E.reduce(function(O,B,U){return O+B*I[U]},0)},S.subtract=function(E,I){return E.map(function(O,B){return O-I[B]})},S.addArrays=function(E,I){return E.map(function(O,B){return O+I[B]})},S.addItems=function(E,I){return E.map(function(O){return O+I})},S.sum=function(E){return E.reduce(function(I,O){return I+O})},S.dot=function(E,I){return S.mulMatrix(E,I)},S.vectorLen=function(E){return Math.hypot.apply(Math,E)},S.divItems=function(E,I){return E.map(function(O){return O/I})},S.squareItems=function(E){return E.map(function(I){return I*I})},S.normalize=function(E){return this.divItems(E,this.vectorLen(E))},S}(),P=function(){function S(){r(this,S)}return S.q=function(E,I){var O=1-I,B=y.mulItems(E[0],O*O*O),U=y.mulItems(E[1],3*O*O*I),X=y.mulItems(E[2],3*O*I*I),ce=y.mulItems(E[3],I*I*I);return y.addArrays(y.addArrays(B,U),y.addArrays(X,ce))},S.qprime=function(E,I){var O=1-I,B=y.mulItems(y.subtract(E[1],E[0]),3*O*O),U=y.mulItems(y.subtract(E[2],E[1]),6*O*I),X=y.mulItems(y.subtract(E[3],E[2]),3*I*I);return y.addArrays(y.addArrays(B,U),X)},S.qprimeprime=function(E,I){return y.addArrays(y.mulItems(y.addArrays(y.subtract(E[2],y.mulItems(E[1],2)),E[0]),6*(1-I)),y.mulItems(y.addArrays(y.subtract(E[3],y.mulItems(E[2],2)),E[1]),6*I))},S}();t.exports=i,t.exports.fitCubic=a,t.exports.createTangent=g})})(Ru);var tC=Ru.exports,rC=function(){function s(e,t){var r=[],i=!0,a=!1,n=void 0;try{for(var o=e[Symbol.iterator](),l;!(i=(l=o.next()).done)&&(r.push(l.value),!(t&&r.length===t));i=!0);}catch(c){a=!0,n=c}finally{try{!i&&o.return&&o.return()}finally{if(a)throw n}}return r}return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return s(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),pn=Math.PI*2,Pc=function(e,t,r,i,a,n,o){var l=e.x,c=e.y;l*=t,c*=r;var h=i*l-a*c,u=a*l+i*c;return{x:h+n,y:u+o}},iC=function(e,t){var r=t===1.5707963267948966?.551915024494:t===-1.5707963267948966?-.551915024494:1.3333333333333333*Math.tan(t/4),i=Math.cos(e),a=Math.sin(e),n=Math.cos(e+t),o=Math.sin(e+t);return[{x:i-a*r,y:a+i*r},{x:n+o*r,y:o-n*r},{x:n,y:o}]},ju=function(e,t,r,i){var a=e*i-t*r<0?-1:1,n=e*r+t*i;return n>1&&(n=1),n<-1&&(n=-1),a*Math.acos(n)},sC=function(e,t,r,i,a,n,o,l,c,h,u,d){var v=Math.pow(a,2),g=Math.pow(n,2),y=Math.pow(u,2),P=Math.pow(d,2),S=v*g-v*P-g*y;S<0&&(S=0),S/=v*P+g*y,S=Math.sqrt(S)*(o===l?-1:1);var V=S*a/n*d,E=S*-n/a*u,I=h*V-c*E+(e+r)/2,O=c*V+h*E+(t+i)/2,B=(u-V)/a,U=(d-E)/n,X=(-u-V)/a,ce=(-d-E)/n,he=ju(1,0,B,U),ye=ju(B,U,X,ce);return l===0&&ye>0&&(ye-=pn),l===1&&ye<0&&(ye+=pn),[I,O,he,ye]},aC=function(e){var t=e.px,r=e.py,i=e.cx,a=e.cy,n=e.rx,o=e.ry,l=e.xAxisRotation,c=l===void 0?0:l,h=e.largeArcFlag,u=h===void 0?0:h,d=e.sweepFlag,v=d===void 0?0:d,g=[];if(n===0||o===0)return[];var y=Math.sin(c*pn/360),P=Math.cos(c*pn/360),S=P*(t-i)/2+y*(r-a)/2,V=-y*(t-i)/2+P*(r-a)/2;if(S===0&&V===0)return[];n=Math.abs(n),o=Math.abs(o);var E=Math.pow(S,2)/Math.pow(n,2)+Math.pow(V,2)/Math.pow(o,2);E>1&&(n*=Math.sqrt(E),o*=Math.sqrt(E));var I=sC(t,r,i,a,n,o,u,v,y,P,S,V),O=rC(I,4),B=O[0],U=O[1],X=O[2],ce=O[3],he=Math.abs(ce)/(pn/4);Math.abs(1-he)<1e-7&&(he=1);var ye=Math.max(Math.ceil(he),1);ce/=ye;for(var ve=0;veo&&(t[n].mark=!0,W.DouglasPeuker(e,t,r,n),W.DouglasPeuker(e,t,n,i))}static simply(e,t=10){return e.length<=2?e:(e=be(e),e[0].mark=!0,e[e.length-1].mark=!0,W.DouglasPeuker(t,e,0,e.length-1),e.filter(r=>Boolean(r.mark)))}static segmentDistance2(e,t,r,i){let a=i.x-r.x,n=i.y-r.y,o=a*a+n*n,l=e-r.x,c=t-r.y,h=a*l+n*c;if(o===0||h<=0)return l*l+c*c;if(h>=o)return l=e-i.x,c=t-i.y,l*l+c*c;{const u=l*n-c*a;return u*u/o}}static isInLine(e,t,r){return e.x===r.x?t.x===r.x:e.y===r.y?t.y===r.y:(e.x-r.x)*(e.y-r.y)===(r.x-t.x)*(r.y-t.y)}static isLine(e){return W.isInLine(e.endPoint,e.startPoint,e,e.reversePoint)}static getReversePoint(e,t){const[r,i]=te([],[t.x,t.y,0],[e.x,e.y,0],2);return{x:r,y:i}}static getIndexPoint(e,t){return e[t]}static getPoint(e,t){return e.filter(r=>W.isEqual(r.startPoint,t))[0]}static getIndex(e,t){for(var r=-1,i=0,a=e.length;i{i.command==="M"&&t.push({point:i,index:a,groupIndex:r++})}),t}static getSplitedGroupList(e){const t=be(e),r=[];for(var i=0,a=-1,n=t.length;ii.point.index<=t).pop()}static getGroupIndex(e,t){for(var r=-1,i=0,a=e.length;i0;i--)if(e[i].command==="M"){r=i;break}r===-1&&(r=0);var a=e[r];return a&&(a.index=r),a}static getConnectedPointList(e,t){const r=e[t];return e.filter((i,a)=>a!==t&&W.isEqual(i.startPoint,r.startPoint))}static getPrevPoint(e,t){var r=t-1;if(r<0)return W.getLastPoint(e,t);var i=e[r];return i&&(i.index=r),i}static getNextPoint(e,t){var r=e[t],i=e[t+1];return i&&(i.index=t+1),(r.connected||r.close)&&(i=W.getFirstPoint(e,t)),i}static removePoint(e,t,r){if(r==="startPoint")return e.filter((i,a)=>a!==t)}static splitPoints(e){let t=[],r=[];return e.forEach(i=>{W.isFirst(i)?(r=[i],t.push(r)):r.push(i)}),t}static recoverPoints(e){const t=[];return e.forEach(r=>{r.forEach((i,a)=>{a===0&&(i.command="M",i.originalCommand="M")}),t.push.apply(t,r)}),t.forEach((r,i)=>{r.index=i}),t}}class $e{static M(e,t){return{command:"M",values:[e,t]}}static L(e,t){return{command:"L",values:[e,t]}}static Q(e,t,r,i){return{command:"Q",values:[e,t,r,i]}}static C(e,t,r,i,a,n){return{command:"C",values:[e,t,r,i,a,n]}}static A(e,t,r,i,a,n,o){return{command:"A",values:[e,t,r,i,a,n,o]}}static Z(){return{command:"Z",values:[]}}static isMoveTo(e){return e.command==="M"}static isLineTo(e){return e.command==="L"}static isQuadraticBezierCurve(e){return e.command==="Q"}static isCubicBezierCurve(e){return e.command==="C"}static isArc(e){return e.command==="A"}static isClosePath(e){return e.command==="Z"}}const nC=/([mMlLvVhHcCsSqQtTaAzZ]([^mMlLvVhHcCsSqQtTaAzZ]*))/g;var oC=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function jo(s){return{x:s[0],y:s[1]}}class K{constructor(e=""){this.reset(e)}reset(e=""){return this.segments=[],this.pathString=e.trim(),this.parse(),this}resetSegments(e){return this.segments=e||[],this.pathString=this.joinPath(),this}addSegments(e){return this.resetSegments([...this.segments,...e])}addPath(e,t=Vt()){const r=e.clone();return r.transformMat4(t),this.addSegments(r.segments)}trim(e=""){var t=e.match(oC)||[];return t.filter(r=>r!="")}parse(){var e=this.pathString.match(nC)||[];return this.segments=e.map(t=>{var r=t[0],i=this.trim(t.replace(r,"")).map(a=>+a);return{command:r,values:i}}),this.segments=this.segments.map((t,r)=>{switch(t.command){case"m":var n=this.segments[r-1];n&&(n.command=="z"||n.command=="Z")&&(n=this.segments[r-2]);for(var o=(n==null?void 0:n.values[n.values.length-2])||0,l=(n==null?void 0:n.values[n.values.length-1])||0,i=0,a=t.values.length;i{const i=this.segments[r-1];if(t.command=="A"){const a=(i==null?void 0:i.values[i.values.length-2])||0,n=(i==null?void 0:i.values[i.values.length-1])||0,[o,l,c,h,u,d,v]=t.values;K.arcToCurve(a,n,o,l,c,h,u,d,v).segments.forEach(y=>{y.command!=="M"||y.command})}}),this}convertGenerator(){for(var e=[],t=0,r=this.segments.length;t!!I),e}setSegments(e,t){this.segments[e]=t}getSegments(e){return ke(e)?this.segments[e]:this.segments}joinPath(e,t=""){var r=e||this.segments;return r.map(i=>`${i.command} ${i.values.length?i.values.join(" "):""}`).join(t)}each(e,t=!1){var r=this.segments.map((i,a)=>e.call(this,i,a));return t?r:(this.segments=r,this)}_loop(e,t=!1){return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":var n=e(i,0);r.values=[n[0],n[1]];break;case"V":var n=e([+i[0],0]);r.values=[n[0]];break;case"H":var n=e([0,+i[0]]);r.values=[n[1]];break;case"C":case"S":case"T":case"Q":for(var o=0,l=i.length;o({command:t.command,values:t.values.slice()}))),e}translate(e,t){return this.transformMat4(mt([],[e,t,0])),this}translateTo(e,t){return this.joinPath(this.transformMat4(mt([],[e,t,0]),!0))}scale(e,t){return this.transformMat4(Kr([],[e,t,1])),this}scaleTo(e,t){return this.joinPath(this.transformMat4(Kr([],[e,t,1]),!0))}scaleWith(e,t){const r=this.clone(),i=Rt(r.getBBox());r.translate(-i.x,-i.y);const a=Math.min(e/i.width,t/i.height);return r.scale(a,a).translate(e/2-i.width/2*a,t/2-i.height/2*a)}scaleFunc(e=r=>r,t=r=>r){return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":r.values=[e(i[0]),t(i[1])];break;case"C":case"Q":for(var n=0,o=i.length;n{for(let a=0,n=t.length;a{const i=[];r.segments.forEach(({segment:a},n)=>{var l;const o=(l=r.segments[n-1])==null?void 0:l.segment;if(a.command==="M"){i.push(a);return}else if(a.command==="L"){const c=ow([[o.values[o.values.length-2],o.values[o.values.length-1],0],[a.values[0],a.values[1],0]]);i.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]});return}else if(a.command==="C")i.push(a);else if(a.command==="Q"){const c=mc([[o.values[o.values.length-2],o.values[o.values.length-1],0],[a.values[0],a.values[1],0],[a.values[2],a.values[3],0]]);i.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]})}else a.command==="Z"&&i.push(a)}),e.push(...i)}),K.fromSegments(e)}polygonal(){const e=this.toPathList();return e.forEach(t=>{const r=[];t.segments.forEach((i,a)=>{const n=t.segments[a-1];i.command==="M"||i.command==="L"?r.push(i):i.command==="C"?r.push(...bu([n.values[n.values.length-2],n.values[n.values.length-1],0],[i.values[0],i.values[1],0],[i.values[2],i.values[3],0],[i.values[4],i.values[5],0]).map(o=>({command:"L",values:[o[0],o[1],0]}))):i.command==="Q"?r.push(...bu(...mc([[n.values[n.values.length-2],n.values[n.values.length-1],0],[i.values[0],i.values[1],0],[i.values[2],i.values[3],0]])).map(o=>({command:"L",values:[o[0],o[1],0]}))):i.command==="Z"&&r.push(i)}),t.resetSegments(r)}),K.joinPathList(e)}divideSegmentByCount(e=1){let t=[];return this.getGroup().forEach(i=>{const a=[];i.segments.forEach(({segment:n},o)=>{var c;const l=(c=i.segments[o-1])==null?void 0:c.segment;n.command==="M"?a.push(n):n.command==="L"?nw([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]}],e).forEach(([,u])=>{a.push($e.L(u.x,u.y))}):n.command==="Q"?aw([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]},{x:n.values[2],y:n.values[3]}],e).forEach(([,u,d])=>{a.push($e.Q(u.x,u.y,d.x,d.y))}):n.command==="C"?sw([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]},{x:n.values[2],y:n.values[3]},{x:n.values[4],y:n.values[5]}],e).forEach(([,u,d,v])=>{a.push($e.C(u.x,u.y,d.x,d.y,v.x,v.y))}):n.command==="Z"&&a.push(n)}),t=t.concat(a)}),K.fromSegments(t)}getBBox(){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;return this.each(function(a,n){var o=a.values,l=a.command;const c=this.segments[n-1];switch(l){case"M":case"L":e=Math.min(e,o[0]),r=Math.max(r,o[0]),t=Math.min(t,o[1]),i=Math.max(i,o[1]);break;case"C":xu([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0],[o[4],o[5],0]]).forEach(h=>{e=Math.min(e,h[0]),r=Math.max(r,h[0]),t=Math.min(t,h[1]),i=Math.max(i,h[1])});break;case"Q":xu(mc([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0]])).forEach(h=>{e=Math.min(e,h[0]),r=Math.max(r,h[0]),t=Math.min(t,h[1]),i=Math.max(i,h[1])});break}return a}),[[e,t,0],[r,t,0],[r,i,0],[e,i,0]]}rect(){const e=this.getBBox();return{x:e[0][0],y:e[0][1],width:Kt(e[0],e[1]),height:Kt(e[0],e[3]),right:e[0][0]+Kt(e[0],e[1]),bottom:e[0][1]+Kt(e[0],e[3])}}getClosedPointInfo({x:e,y:t},r=20){let i=Number.MAX_SAFE_INTEGER,a={},n={};for(var o=1,l=this.segments.length;o[t,r,i]){const t=Rt(this.getBBox());return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":case"C":case"Q":for(var n=0,o=i.length;nUe(r,e)),t}),this}reverseSegments(e){const t=[];let r=e.length-1;for(var i=r;i>0;i--){const a=e[i],n=a.values,o=a.command,l=e[i-1],c=l.values[l.values.length-2],h=l.values[l.values.length-1];switch(o){case"L":i===r&&t.push($e.M(n[0],n[1])),t.push($e.L(c,h));break;case"C":i===r&&t.push($e.M(n[4],n[5])),t.push($e.C(n[2],n[3],n[0],n[1],c,h));break;case"Q":i===r&&t.push($e.M(n[2],n[3])),t.push($e.Q(n[0],n[1],c,h));break;case"Z":t.push(a),r=i-1;break}}return t[0].command==="Z"&&t.push(t.shift()),t}splitSegments(){const e=[];let t=[];return this.segments.forEach(r=>{r.command==="M"?(t=[r],e.push(t)):t.push(r)}),e}reverse(...e){const t=this.splitSegments(),r=[];return e.length===0?t.forEach(i=>{r.push.apply(r,this.reverseSegments(i))}):t.forEach((i,a)=>{e.includes(a)?r.push.apply(r,this.reverseSegments(i)):r.push.apply(r,i)}),this.resetSegments(r)}reversePathStringByFunc(e){const t=this.toPathList().map((r,i)=>e(r,i)?r.reverse():r);return K.joinPathList(t).toSVGString()}getCenterPointers(){let e=[],t=[];return this.segments.forEach((r,i)=>{var a=r.values,n=r.command;switch(n){case"M":case"L":e.push({index:i,pointer:[...r.values,0]});break;case"V":e.push({index:i,pointer:[a[0],t.pop(),0]});break;case"H":t.pop(),e.push({index:i,pointer:[t.pop(),a[0],0]});break;case"C":case"S":case"T":case"Q":e.push({index:i,pointer:[a[a.length-2],a[a.length-1],0]});break}t=be(a)}),e}get points(){return this.getCenterPointers()}getSamePointers(e,t=0){return this.getCenterPointers().filter(r=>{if(Kt(r.pointer,e)<=t)return!0})}getGroup(){const e=[];let t=[];return this.segments.forEach((r,i)=>{r.command==="M"?(t=[{index:i,segment:r}],e.push({index:i,groupIndex:e.length,segments:t})):t.push({index:i,segment:r})}),e}createGroupPath(e){var r,i;const t=new K;return t.resetSegments(((i=(r=this.getGroup()[e])==null?void 0:r.segments)==null?void 0:i.map(a=>a.segment))||[]),t}toPathList(){return this.getGroup().map(e=>K.fromSegments(e.segments.map(t=>t.segment)))}replaceSegment(e,...t){const r=[...this.segments];r.splice(e,1,...t),this.resetSegments(r)}splitSegmentByPoint(e,t=0){const r=this.getClosedPointInfo(e,t);if(r&&r.t>0&&r.t<1){switch(r.segment.command){case"C":var i=Ja(r.points,r.t),a=i.first,n=$e.C(a[1].x,a[1].y,a[2].x,a[2].y,a[3].x,a[3].y),o=i.second,l=$e.C(o[1].x,o[1].y,o[2].x,o[2].y,o[3].x,o[3].y);this.replaceSegment(r.index,n,l);break;case"Q":var i=en(r.points,r.t),a=i.first,n=$e.Q(a[1].x,a[1].y,a[2].x,a[2].y),o=i.second,l=$e.Q(o[1].x,o[1].y,o[2].x,o[2].y);this.replaceSegment(r.index,n,l);break;case"L":var i=tn(r.points,r.t),a=i.first,n=$e.L(a[1].x,a[1].y),o=i.second,l=$e.L(o[1].x,o[1].y);this.replaceSegment(r.index,n,l);break;default:return}return r}}toMultiSegmentPathList(){const e=[];return this.getGroup().forEach(r=>{r.segments.forEach((i,a)=>{var u;const n=r.segments[a-1],o=((u=n==null?void 0:n.segment)==null?void 0:u.values)||[],l=o[o.length-2],c=o[o.length-1],h=i.segment.values;i.segment.command==="M"||(i.segment.command==="L"?e.push(new K(`M ${l} ${c}L ${h.join(" ")}`)):i.segment.command==="C"?e.push(new K(`M ${l} ${c}C ${h.join(" ")}`)):i.segment.command==="Q"&&e.push(new K(`M ${l} ${c}Q ${h.join(" ")}`)))})}),e}simplify(e=.1){const t=[];return this.getGroup().forEach(i=>{const a=[...i.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>({x:l.segment.values[0],y:l.segment.values[1]}))],n=W.simply(a,e),o=[];n.forEach((l,c)=>{c===0?o.push($e.M(l.x,l.y)):o.push($e.L(l.x,l.y))}),t.push(...o)}),K.fromSegments(t)}smooth(e=50){let t=[];return this.getGroup().forEach(i=>{const a=[...i.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>[...l.segment.values,0])],n=tC(a,e),o=[];n.forEach((l,c)=>{c===0&&o.push($e.M(...l[0])),o.push($e.C(l[1][0],l[1][1],l[2][0],l[2][1],l[3][0],l[3][1]))}),i.segments[i.segments.length-1].segment.command.toLowerCase()==="z"&&o.push($e.Z()),t=t.concat(o)}),K.fromSegments(t)}cardinalSplines(e=.5){const t=[];this.getGroup().forEach(a=>{const n=[...a.segments.filter(c=>c.segment.command.toLowerCase()!=="z").map(c=>[...c.segment.values,0])],o=[];n.forEach((c,h)=>{const u=n[h-1],d=n[h+1];if(h===0)o.push({point:c});else if(h===n.length-1){const v=n[0];if(Dl(v,c)){const g=u,y=c,P=n[1],S=Cd([],_e([],P,g),[2,2,1]),V=Gi([],S,[1-e,1-e,1]),E=tr([],V);o.push({reversePoint:we([],y,E),point:y,endPoint:we([],y,V)})}else o.push({point:c})}else{const v=u,g=c,P=Cd([],_e([],d,v),[2,2,1]),S=Gi([],P,[1-e,1-e,1]),V=tr([],S);o.push({reversePoint:we([],g,V),point:g,endPoint:we([],g,S)})}});const l=[];o.forEach((c,h)=>{if(h===0)l.push($e.M(c.point[0],c.point[1]));else{const u=o[h-1]||o[o.length-1];if(u.endPoint)c.reversePoint?l.push($e.C(u.endPoint[0],u.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push($e.Q(u.endPoint[0],u.endPoint[1],c.point[0],c.point[1]));else if(h===1){const d=o[o.length-1];d.endPoint?l.push($e.C(d.endPoint[0],d.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push($e.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}else l.push($e.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}}),t.push(...l)});const i=new K;return i.resetSegments(t),i}Z(){return this.segments.push($e.Z()),this}M(e,t){return this.segments.push($e.M(e,t)),this}L(e,t){return this.segments.push($e.L(e,t)),this}C(e,t,r,i,a,n){return this.segments.push($e.C(e,t,r,i,a,n)),this}Q(e,t,r,i){return this.segments.push($e.Q(e,t,r,i)),this}drawRect(e,t,r,i){return this.segments.push($e.M(e,t),$e.L(e+r,t),$e.L(e+r,t+i),$e.L(e,t+i),$e.L(e,t),$e.Z()),this}drawLine(e,t,r,i){return this.segments.push($e.M(e,t),$e.L(r,i)),this}drawCircleWithRect(e,t,r,i=r){var a=.552284749831;const n=new K;return n.resetSegments([$e.M(0,-1),$e.C(a,-1,1,-a,1,0),$e.C(1,a,a,1,0,1),$e.C(-a,1,-1,a,-1,0),$e.C(-1,-a,-a,-1,0,-1),$e.Z()]),n.translate(1,1).scale(r/2,i/2).translate(e,t),this.addPath(n),this}drawCircle(e,t,r){return this.drawCircleWithRect(e-r,t-r,r*2,r*2)}drawArc(e,t,r,i,a,n,o){const[l,c]=this.lastPoint;return this.addPath(K.arcToCurve(l,c,e,t,r,i,a,n,o))}get verties(){let e=[],t=[];return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":e.push([...r.values,0]);break;case"V":e.push([i[0],t.pop(),0]);break;case"H":t.pop(),e.push([t.pop(),i[0],0]);break;case"C":case"S":case"T":case"Q":for(var n=0,o=i.length;n{const i=this.segments[r-1],a=this.segments[r+1];if(t.values.length>0){const l=t.values;for(var n=0,o=l.length;ne.command==="Z")&&ov(this.lastPoint,this.firstPoint)}get opened(){return!this.closed}get length(){let e=0;return this.getGroup().forEach(r=>{r.segments.forEach((i,a)=>{var u;const n=r.segments[a-1],o=((u=n==null?void 0:n.segment)==null?void 0:u.values)||[],l=o[o.length-2],c=o[o.length-1],h=i.segment.values;i.segment.command==="M"||(i.segment.command==="L"?e+=sr(l,c,h[0],h[1]):i.segment.command==="C"?e+=Qa(l,c,h[0],h[1],h[2],h[3],h[4],h[5]):i.segment.command==="Q"&&(e+=da(l,c,h[0],h[1],h[2],h[3])))})}),e}get lengthList(){let e=[];return this.getGroup().forEach((r,i)=>{r.segments.forEach((a,n)=>{var d;const o=r.segments[n-1],l=((d=o==null?void 0:o.segment)==null?void 0:d.values)||[],c=l[l.length-2],h=l[l.length-1],u=a.segment.values;a.segment.command==="M"||(a.segment.command==="L"?e.push({groupIndex:i,segmentIndex:n,length:sr(c,h,u[0],u[1])}):a.segment.command==="C"?e.push({groupIndex:i,segmentIndex:n,length:Qa(c,h,u[0],u[1],u[2],u[3],u[4],u[5])}):a.segment.command==="Q"&&e.push({groupIndex:i,segmentIndex:n,length:da(c,h,u[0],u[1],u[2],u[3])}))})}),e}get lastSegment(){const e=this.segments[this.segments.length-1];return e.command!=="Z"?e:this.segments[this.segments.length-2]}get lastPoint(){const e=this.lastSegment.values;return[e[e.length-2],e[e.length-1]]}get firstSegment(){return this.segments[0]}get firstPoint(){const e=this.firstSegment.values;return[e[0],e[1]]}static joinPathList(e=[]){const t=K.fromSVGString();return e.forEach(r=>{t.addPath(r)}),t}static fromSegments(e){const t=new K;return t.resetSegments(e),t}static fromStructuredVerties(e){const t=new K,r=[];return e.forEach(i=>{r[i.segmentIndex]||(r[i.segmentIndex]={command:i.segment.command,values:[]}),r[i.segmentIndex].command!==Jd.CLOSEPATH&&(r[i.segmentIndex].values[i.valueIndex]=i.vertex[0],r[i.segmentIndex].values[i.valueIndex+1]=i.vertex[1])}),t.resetSegments(r),t}static fromSVGString(e=""){return new K(e)}static makeRect(e,t,r,i){return K.fromSVGString().drawRect(e,t,r,i)}static makeLine(e,t,r,i){return K.fromSVGString().drawLine(e,t,r,i)}static makeCircle(e,t,r,i){return K.fromSVGString().drawCircleWithRect(e,t,r,i)}static makePathByPoints(e=[]){const t=e.map((r,i)=>i===0?$e.M(r.x,r.y):$e.L(r.x,r.y));return t.push($e.Z()),K.fromSegments(t)}static makePathByVerties(e=[],t=!0){const r=e.map((i,a)=>a===0?$e.M(i[0],i[1]):$e.L(i[0],i[1]));return t&&r.push($e.Z()),K.fromSegments(r)}static makePolygon(e,t,r=3){const i=[];for(var o=0;o{u.C(d.x1,d.y1,d.x2,d.y2,d.x,d.y)}),u}toCurveList(){const e=[];return this.segments.forEach((t,r)=>{if(r>0){const i=this.segments[r-1],a=[i.values[i.values.length-2],i.values[i.values.length-1]],n=[jo(a),jo([t.values[0],t.values[1]]),jo([t.values[2],t.values[3]]),jo([t.values[4],t.values[5]])];e.push({points:n,curveFunction:Io(...n)})}}),e}toInterpolateFunction(){const e=this.normalize().toCurveList().map(t=>({points:t.points,curveFunction:t.curveFunction,start:t.points[0].x,end:t.points[t.points.length-1].x}));return t=>{const r=e.find(a=>a.start<=t&&t<=a.end);if(r)return r.curveFunction(t).y;if(t===0)return e[0].points[0].y;const i=e[e.length-1].points;return i[i.length-1].y}}}function zu(){return s=>Math.pow(2,-10*s)*Math.sin((s-.1)*5*Math.PI)+1}const wc=(s=1,e="end")=>{var t=1/s;return function(r){let i=0;const a=Ue(r/t,1e7);if(e=="start")i=Math.ceil(a);else if(e=="end"){if(r===0)return 0;if(r===1)return 1;i=Math.ceil(a)-1}return Math.min(Math.max(t*i,0),1)}};function Cc(s=1,e="end"){return wc(s,e)}function Au(){return wc(1,"start")}function Du(){return wc(1,"end")}var lC={step:Cc,"step-start":Au,"step-end":Du,stepStart:Au,stepEnd:Du,"ease-out-elastic":zu,easeOutElastic:zu};function Tc(s="linear"){var[e]=s.split("(").map(i=>i.trim()),t=lC[e];if(t){var r=s.split("(")[1].split(")")[0].split(",").map(i=>i.trim());return t(...r)}else return cC(s)}function cC(s){var e=vu(s);return t=>e(t).y}const Fu={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class yr extends Sc{isGradient(){return!0}toString(){return"none"}getDefaultObject(e={}){return b({itemType:"image-resource",type:"gradient",colorsteps:[]},e)}toCloneObject(){return se(b({},super.toCloneObject()),{colorsteps:this.json.colorsteps.map(e=>e.clone())})}convert(e){return e.colorsteps[0]instanceof et||(e.colorsteps=e.colorsteps.map(t=>new et(t))),e}calculateAngle(){var e=this.json.angle;return Ct(Fu[e])?e:Fu[e]||0}addColorStep(e,t=!0){return this.json.colorsteps.push(e),t&&this.sortColorStep(),e}pickColorStep(e){var t=this.colorsteps;if(!t.length)return{percent:0,color:"rgba(0,0,0,0)"};if(e{if(t.percent>r.percent)return 1;if(t.percentr.index?1:-1}),e.forEach((t,r)=>{t.index=r*100})}sortToRight(){var e=this.colorsteps;const t=e.length,r=100/t;e.forEach((i,a)=>{i.percent=r*(a+1)}),this.sortColorStep()}sortToLeft(){var e=this.colorsteps;const t=e.length,r=100/t;e.forEach((i,a)=>{i.percent=r*a}),this.sortColorStep()}addColorStepList(e=[]){e.forEach(t=>{this.addColorStep(t,!1)}),this.sortColorStep()}getColorStep(e){return this.json.colorsteps.filter(t=>t.id==e)[0]}clear(...e){e.length?this.json.colorsteps.splice(+e[0],1):this.json.colorsteps=[]}removeColorStepByIndex(e){this.json.colorsteps.splice(e,1)}removeColorStep(e){this.json.colorsteps=this.json.colorsteps.filter(t=>t.id!=e)}get colorsteps(){return this.json.colorsteps}makeTimingString(e,t=1){switch(e.name){case ue.LINEAR:return"";case ue.EASE:case ue.EASE_IN:case ue.EASE_OUT:case ue.EASE_IN_OUT:return`${e.name} ${t}`;case ue.STEPS:return`steps(${e.count}, ${e.direction})`;case ue.PATH:return`path(${e.d}) ${t}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2}) ${t}`}}getColorString(){return this.colorsteps.map(e=>{const{color:t,percent:r,timing:i,timingCount:a}=e;return`${t} ${r}% ${this.makeTimingString(i,a)}`}).join(",")}static makeColorStepList(e){const t=[];return e.forEach((r,i)=>{const{color:a,percent:n,timing:o,timingCount:l}=r;var c=e[i-1];if(i===0)return t.push({color:a,percent:n}),t;switch(o.name){case ue.STEPS:for(var v=Cc(o.count,o.direction),g=[],h=0;h<=o.count;h++){var u=c.percent+(n-c.percent)*(h/o.count),d=Is(c.color,a,v(h/o.count));g.push({percent:u,color:d})}g.forEach((y,P)=>{if(P===0)t.push({percent:c.percent,color:y.color}),t.push(y);else{const S=g[P-1];t.push({percent:S.percent,color:y.color}),t.push(y)}});break;case ue.PATH:for(var v=K.fromSVGString(o.d).toInterpolateFunction(),g=[],h=0;h<=l;h++){const P=c.percent+(n-c.percent)*(h/l),S=Is(c.color,a,v(h/l));g.push({percent:P,color:S})}t.push(...g);break;default:for(var v=Tc(o.matchedString),g=[],h=0;h<=l;h++){const P=c.percent+(n-c.percent)*(h/l),S=Is(c.color,a,v(h/l));g.push({percent:P,color:S})}t.push(...g);break}}),t}static toCSSColorString(e=[],t="%",r=100){return yr.makeColorStepList(e).map(a=>{const{color:n,percent:o}=a,l=o/100*r;return`${n} ${l}${t}`}).join(",")}static parseColorSteps(e){return e.map((t,r)=>{var i,a,n;if(t.length===1){const o=((i=e[r-1])==null?void 0:i[1])||{parsed:{value:0}},l=((a=e[r+1])==null?void 0:a[1])||{parsed:{value:100}};let c=0;return e[r-1]?e[r+1]?c=o.parsed.value+(l.parsed.value-o.parsed.value)*.5:c=100:c=0,new et({color:t[0].matchedString,percent:c,unit:"%",timing:Xt("linear").parsed,timingCount:1})}if(t.length===2)return new et({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:Xt("linear").parsed,timingCount:1});if(t.length===3)return t[2].parsed.funcType===Xe.TIMING?new et({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:(n=t[3])==null?void 0:n.parsed.value}):new et({color:t[0].matchedString,percent:t[2].parsed.value,unit:t[2].parsed.unit,timing:Xt("steps(1, start)").parsed});if(t.length===4)return new et({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:t[3].parsed.value})})}}const Bu={center:!0,top:!0,left:!0,right:!0,bottom:!0},Nu={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class ei extends yr{getDefaultObject(e={}){return super.getDefaultObject(b({type:"conic-gradient",angle:0,radialPosition:[nr.CENTER,nr.CENTER]},e))}toCloneObject(){return se(b({},super.toCloneObject()),{angle:this.json.angle,radialPosition:be(this.json.radialPosition)})}hasAngle(){return!0}pickColorStep(e){return super.pickColorStep((e+100)%100)}getStartEndPoint(e){let t,r,i,[a,n]=this.json.radialPosition;const o=e.backRect,l=xt(o.x,o.y,o.width,o.height);a=="center"&&(a=p.percent(50)),n=="center"&&(n=p.percent(50));const c=a.toPx(o.width),h=n.toPx(o.height),u=[o.x+c.value,o.y+h.value,0];let d=l[0],v=l[1],g=l[3],y=l[2];const P=ae(u,d),S=ae(u,v),V=ae(u,g),E=ae(u,y);t=Yt(u);const I=Math.max(P,S,V,E);return r=Ie(t[0]+I,t[1],t[2]),i=Ie(t[0],t[1]-I,t[2]),{startPoint:t,endPoint:r,shapePoint:i}}toString(){var e=this.getColorString(),t=[],r=this.json,i=r.angle,a=r.radialPosition||nr.CENTER;a=Bu[a]?a:a.join(" "),ke(i)&&(i=+(Nu[i]||i),t.push(`from ${i}deg`)),a&&t.push(`at ${a}`);var n=t.length?t.join(" ")+",":"";return`${r.type}(${n} ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=ei.toCSSColorString(this.colorsteps,"deg",360),t=[],r=this.json,i=r.angle,a=r.radialPosition||nr.CENTER;a=Bu[a]?a:a.join(" "),ke(i)&&(i=+(Nu[i]||i),t.push(`from ${i}deg`)),a&&t.push(`at ${a}`);var n=t.length?t.join(" ")+",":"";return`${r.type}(${n} ${e})`}static parse(e){const t=Xt(e);var r={angle:0,radialPosition:["center","center"]};let[i,...a]=t.parameters;if(i[0].func!==Xe.COLOR){let o=!1,l=!1,c=[],h=[];i.forEach(u=>{u.func===Xe.KEYWORD&&u.matchedString==="from"?o=!0:u.func===Xe.KEYWORD&&u.matchedString==="at"?l=!0:l?c.push(u):o&&h.push(u)}),r.radialPosition=c.map(u=>{if(u.func===Xe.KEYWORD)switch(u.matchedString){case"top":return p.percent(0);case"left":return p.percent(0);case"right":return p.percent(100);case"bottom":return p.percent(100);case"center":return p.percent(50)}return u.parsed}),h.length&&(r.angle=h[0].parsed.value)}else a=t.parameters;const n=ei.parseColorSteps(a);return new ei(se(b({},r),{colorsteps:n}))}}const Gu={0:"to top",45:"to top right",90:"to right",135:"to bottom right",180:"to bottom",225:"to bottom left",270:"to left",315:"to top left"},hC={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class ti extends yr{getDefaultObject(e){return super.getDefaultObject(b({type:"linear-gradient",angle:0},e))}toCloneObject(){return se(b({},super.toCloneObject()),{angle:this.json.angle})}isLinear(){return!0}hasAngle(){return!0}getRealAngle(){return this.json.angle}get angle(){return this.getRealAngle()}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t="",r=this.json.angle||0;t=r,ft(t)&&(t=Gu[`${t}`]||t),ft(t)&&(t=t>360?t%360:t,t=`${t}deg`);var i=`${this.json.type}(${t}, ${e})`;return i}toCSSString(){if(this.colorsteps.length===0)return"";var e=ti.toCSSColorString(this.colorsteps),t="",r=this.json.angle||0;t=r,ft(t)&&(t=Gu[`${t}`]||t),ft(t)&&(t=t>360?t%360:t,t=`${t}deg`);var i=`${this.json.type}(${t}, ${e})`;return i}static parse(e){const t=Xt(e);var r={};let[i,...a]=t.parameters;const n=[],o=[];i[0].func!==Xe.COLOR?i.forEach(h=>{h.func===Xe.KEYWORD?o.push(h):n.push(h)}):a=t.parameters;let l=o.map(h=>h.matchedString).join(" ");l===""?[l]=n.map(h=>h.parsed.value):l=hC[l],r=se(b({},r),{angle:l});const c=ti.parseColorSteps(a);return new ti(se(b({},r),{colorsteps:c}))}}const Hu={center:!0,top:!0,left:!0,right:!0,bottom:!0};class ri extends yr{getDefaultObject(e={}){return super.getDefaultObject(b({type:"radial-gradient",radialType:"ellipse",radialSize:Pr.FARTHEST_CORNER,radialPosition:[nr.CENTER,nr.CENTER]},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("radialType","radialSize","radialPosition"))}getConerDist(e){let t=e.backVerties[0],r=e.backVerties[1],i=e.backVerties[3],a=e.backVerties[2];const n=ae(e.radialCenterPosition,t),o=ae(e.radialCenterPosition,r),l=ae(e.radialCenterPosition,i),c=ae(e.radialCenterPosition,a),h=[["top-left",t,n],["top-right",r,o],["bottom-left",i,l],["bottom-right",a,c]];return h.sort((u,d)=>u[2]-d[2]),{cornerList:h,topLeftDist:n,topRightDist:o,bottomLeftDist:l,bottomRightDist:c}}EllipseRadiusToSide(e,t=!0){var r=Math.abs(e.radialCenterPoint[0]),i=Math.abs(e.radialCenterPoint[1]),a=Math.abs(e.radialCenterPoint[0]-e.backRect.width),n=Math.abs(e.radialCenterPoint[1]-e.backRect.height);if(t)var o=ra?r:a,l=i>n?i:n;return{width:o,height:l}}EllipseRadius(e,t,r=!0){const{cornerList:i,topLeftDist:a,topRightDist:n,bottomRightDist:o,bottomLeftDist:l}=this.getConerDist(t),c=[a,n,l,o];var h=r?Math.min(...c):Math.max(...c),u=i.find(P=>P[2]===h)[1],d=e.width/e.height;if(d!==0){var v=_e([],u,t.radialCenterPosition),g=Math.sqrt(Math.pow(v[0],2)+Math.pow(v[1],2)*Math.pow(d,2)),y=g/d;return{width:g,height:y}}}getStartEndPoint(e){let t,r,i;const a=this.json.radialType,n=this.json.radialSize;let[o,l]=this.json.radialPosition;const c=e.backRect,h=xt(c.x,c.y,c.width,c.height);o=="center"&&(o=p.percent(50)),l=="center"&&(l=p.percent(50));const u=o.toPx(c.width),d=l.toPx(c.height),v=[c.x+u.value,c.y+d.value,0];let g=[h[0][0],d.value,0],y=[h[1][0],d.value,0],P=[u.value,h[0][1],0],S=[u.value,h[3][1],0];const V=ae(v,g),E=ae(v,y),I=ae(v,P),O=ae(v,S),B=[["top",P,I],["left",g,V],["right",y,E],["bottom",S,O]];B.sort((tt,ie)=>tt[2]-ie[2]);let U=h[0],X=h[1],ce=h[3],he=h[2];const ye=ae(v,U),ve=ae(v,X),Re=ae(v,ce),Q=ae(v,he),He=[["top-left",U,ye],["top-right",X,ve],["bottom-left",ce,Re],["bottom-right",he,Q]];switch(He.sort((tt,ie)=>tt[2]-ie[2]),t=Yt(v),a){case bt.CIRCLE:switch(n){case Pr.CLOSEST_SIDE:var[,,Ye]=B[0];r=Ie(t[0]+Ye,t[1],t[2]),i=Ie(t[0],t[1]+Ye,t[2]);break;case Pr.CLOSEST_CORNER:var[,,Ye]=He[0];r=Ie(t[0]+Ye,t[1],t[2]),i=Ie(t[0],t[1]+Ye,t[2]);break;case Pr.FARTHEST_SIDE:var[,,Ye]=B[B.length-1];r=Ie(t[0]+Ye,t[1],t[2]),i=Ie(t[0],t[1]+Ye,t[2]);break;case bt.CIRCLE:case Pr.FARTHEST_CORNER:var[,,Ye]=He[He.length-1];r=Ie(t[0]+Ye,t[1],t[2]),i=Ie(t[0],t[1]+Ye,t[2]);break;default:var Ye=(n[0]||n).toPx(ae(e.backVerties[1],e.backVerties[0])).value;r=Ie(t[0]+Ye,t[1],t[2]),i=Ie(t[0],t[1]+Ye,t[2]);break}break;case bt.ELLIPSE:switch(n){case Pr.CLOSEST_SIDE:var De=this.EllipseRadiusToSide(e,!0);r=Ie(t[0]+De.width,t[1],t[2]),i=Ie(t[0],t[1]+De.height,t[2]);break;case Pr.CLOSEST_CORNER:var De=this.EllipseRadiusToSide(e,!0),yt=this.EllipseRadius(De,e,!0);r=Ie(t[0]+yt.width,t[1],t[2]),i=Ie(t[0],t[1]+yt.height,t[2]);break;case Pr.FARTHEST_SIDE:var De=this.EllipseRadiusToSide(e,!1);r=Ie(t[0]+De.width,t[1],t[2]),i=Ie(t[0],t[1]+De.height,t[2]);break;case Pr.FARTHEST_CORNER:var De=this.EllipseRadiusToSide(e,!1),yt=this.EllipseRadius(De,e,!1);r=Ie(t[0]+yt.width,t[1],t[2]),i=Ie(t[0],t[1]+yt.height,t[2]);break;default:var je=n[0].toPx(ae(e.backVerties[1],e.backVerties[0])).value,ze=n[1].toPx(ae(e.backVerties[3],e.backVerties[0])).value;r=Ie(t[0]+je,t[1],t[2]),i=Ie(t[0],t[1]+ze,t[2]);break}break}return{startPoint:t,endPoint:r,shapePoint:i}}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t=this.json,r="",i=t.radialType||bt.ELLIPSE,a=t.radialSize||Pr.FARTHEST_CORNER,n=t.radialPosition||["center","center"];return n=Hu[n]?n:n.join(" "),a=Gt(a)?a.join(" "):a,r=n?`${i} ${a} at ${n}`:`${i} ${a}`,`${t.type||"radial-gradient"}(${r}, ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=ri.toCSSColorString(this.colorsteps),t=this.json,r="",i=t.radialType||bt.ELLIPSE,a=t.radialSize||Pr.FARTHEST_CORNER,n=t.radialPosition||["center","center"];return n=Hu[n]?n:n.join(" "),a=Gt(a)?a.join(" "):a,r=n?`${i} ${a} at ${n}`:`${i} ${a}`,`${t.type||"radial-gradient"}(${r}, ${e})`}static parse(e){const t=Xt(e);var r={radialType:bt.ELLIPSE,radialSize:Pr.FARTHEST_CORNER,radialPosition:["center","center"]};let[i,...a]=t.parameters;if(i[0].func!==Xe.COLOR){let o=bt.ELLIPSE,l=!1,c=[],h=[];i.forEach(u=>{if(u.func===Xe.KEYWORD&&u.matchedString==="at")l=!0;else if(l)c.push(u);else switch(u.matchedString){case bt.CIRCLE:case bt.ELLIPSE:o=u.matchedString;break;default:h.push(u);break}}),r.radialType=o,r.radialPosition=c.map(u=>{if(u.func===Xe.KEYWORD)switch(u.matchedString){case"top":return p.percent(0);case"left":return p.percent(0);case"right":return p.percent(100);case"bottom":return p.percent(100);case"center":return p.percent(50)}return u.parsed}),r.radialSize=h.map(u=>u.func===Xe.KEYWORD?u.matchedString:u.parsed),r.radialSize.length===1&&(r.radialSize=r.radialSize[0])}else a=t.parameters;const n=ri.parseColorSteps(a);return new ri(se(b({},r),{colorsteps:n}))}}class Es extends ei{getDefaultObject(){return super.getDefaultObject({type:"repeating-conic-gradient",angle:0,radialPosition:[nr.CENTER,nr.CENTER]})}static parse(e){var t=ei.parse(e);return new Es({angle:t.angle,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class Ls extends ti{getDefaultObject(){return super.getDefaultObject({type:"repeating-linear-gradient",angle:0})}static parse(e){var t=ti.parse(e);return new Ls({angle:t.angle,colorsteps:t.colorsteps})}}class Vs extends ri{getDefaultObject(){return super.getDefaultObject({type:"repeating-radial-gradient"})}static parse(e){var t=ri.parse(e);return new Vs({radialType:t.radialType,radialSize:t.radialSize,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class ts extends yr{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",static:!0,colorsteps:[new et({color:"red",percent:0,index:0}),new et({color:"red",percent:100,index:0})]})}toCloneObject(){return se(b({},super.toCloneObject()),{static:!0})}static parse(e){const t=Xt(e);var r=yr.parseColorSteps(t.parameters);return new ts({colorsteps:r})}static create(e="transparent"){return new ts({colorsteps:[new et({color:e,percent:0,index:0}),new et({color:e,percent:100,index:1})]})}toString(){var e=this.json.colorsteps[0].color;return`static-gradient(${e})`}toCSSString(){if(this.colorsteps.length===0)return"";const e=this.colorsteps[0].color||"black";return`linear-gradient(${e} 0%, ${e} 100%)`}}const dC=["jpg","jpeg","png","gif","svg"];class Os extends Sc{getDefaultObject(e={}){return super.getDefaultObject(b({type:F.URL,url:"",datauri:""},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("url","datauri"))}static parse(e){var t=e.split("(")[1].split(")")[0];return new Os({url:t})}isUrl(){return!0}toString(e){return`url(${e||this.json.url})`}static isImageFile(e){return dC.includes(e)}}const uC=["repeat","no-repeat","repeat-x","repeat-y","round","space"];class Be extends or{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:Be.createImage(e.images[0])})}static createImage(e){return new Os({url:e})}setGradient(e){this.reset({type:e.type,image:Be.createGradient(e,this.json.image)})}static createGradient(e,t){const r=e.colorsteps||t.colorsteps,i=e.angle||t.angle,a=e.radialType||t.radialType,n=e.radialPosition||t.radialPosition;let o=t.toJSON();switch(delete o.itemType,delete o.type,e.type){case"static-gradient":return new ts(se(b({},o),{colorsteps:r}));case"linear-gradient":return new ti(se(b({},o),{colorsteps:r,angle:i}));case"repeating-linear-gradient":return new Ls(se(b({},o),{colorsteps:r,angle:i}));case"radial-gradient":return new ri(se(b({},o),{colorsteps:r,radialType:a,radialPosition:n}));case"repeating-radial-gradient":return new Vs(se(b({},o),{colorsteps:r,radialType:a,radialPosition:n}));case"conic-gradient":return new ei(se(b({},o),{colorsteps:r,angle:i,radialPosition:n}));case"repeating-conic-gradient":return new Es(se(b({},o),{colorsteps:r,angle:i,radialPosition:n}))}return new yr}getDefaultObject(){return super.getDefaultObject({itemType:"background-image",checked:!1,blendMode:"normal",size:"auto",repeat:"repeat",width:p.percent(100),height:p.percent(100),x:p.percent(0),y:p.percent(0)})}toCloneObject(){var e=this.json;return se(b(b({},super.toCloneObject()),this.attrs("checked","blendMode","size","repeat","width","height","x","y")),{image:e.image.toString()})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width&&(e.width=p.parse(e.width)),e.height&&(e.height=p.parse(e.height)),it(e.image)&&(e.image=Be.parseImage(e.image)),e}get image(){return this.json.image}set image(e){this.json.image=e}checkField(e,t){return e==="repeat"?uC.includes(t):super.checkField(e,t)}recoverOffset(e,t,r,i=0,a=0,n={}){const{x:o,y:l,width:c,height:h}=this.json,u=Math.floor(c.toPx(r.width).value+i),d=n.shiftKey?u:Math.floor(h.toPx(r.height).value+a);e-=r.x,t-=r.y,u<0&&(e+=u),d<0&&(t+=d);let v=p.px(e),g=p.px(t);const y=2;return o.isPercent()&&(Math.abs(e)`${e}: ${t}`).join(";")}toBackgroundCSS(){var e=this.toCSS();return{background:`${e["background-image"]} `}}static parse(e){return new Be(e)}static parseImage(e){const t=Xt(e);let r=null;if(!t||e==="undefined")return ts.create(e||"transparent");switch(t.func){case F.LINEAR:r=ti.parse(t.matchedString);break;case F.REPEATING_LINEAR:r=Ls.parse(t.matchedString);break;case F.RADIAL:r=ri.parse(t.matchedString);break;case F.REPEATING_RADIAL:r=Vs.parse(t.matchedString);break;case F.CONIC:r=ei.parse(t.matchedString);break;case F.REPEATING_CONIC:r=Es.parse(t.matchedString);break;case F.URL:r=Os.parse(t.matchedString);break;default:r=ts.parse(t.matchedString);break}return r}static changeImageType(e){switch(e.type){case F.STATIC:return new ts(e);case F.LINEAR:return new ti(e);case F.REPEATING_LINEAR:return new Ls(e);case F.RADIAL:return new ri(e);case F.REPEATING_RADIAL:return new Vs(e);case F.CONIC:return new ei(e);case F.REPEATING_CONIC:return new Es(e);case F.URL:return new Os(e)}}static parseStyle(e){var t=[];return e["background-image"]&&J5(e["background-image"],"background-image").forEach((i,a)=>{const n=i[0];let o;switch(n.func){case F.STATIC:o=ts.parse(n.matchedString);break;case F.LINEAR:o=ti.parse(n.matchedString);break;case F.REPEATING_LINEAR:o=Ls.parse(n.matchedString);break;case F.RADIAL:o=ri.parse(n.matchedString);break;case F.REPEATING_RADIAL:o=Vs.parse(n.matchedString);break;case F.CONIC:o=ei.parse(n.matchedString);break;case F.REPEATING_CONIC:o=Es.parse(n.matchedString);break;case F.URL:o=Os.parse(n.matchedString);break}t[a]=new Be({type:o.type,image:o})}),e["background-repeat"]&&e["background-repeat"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].repeat=r)}),e["background-blend-mode"]&&e["background-blend-mode"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].blendMode=r)}),e["background-size"]&&e["background-size"].split(",").map(r=>r.trim()).forEach((r,i)=>{if(t[i])if(r=="cover"||r==="contain"||r==="auto")t[i].size=r;else{t[i].size="auto";let[a,n]=r.split(" ");t[i].width=p.parse(a),t[i].height=p.parse(n)}}),e["background-position"]&&e["background-position"].split(",").map(r=>r.trim()).forEach((r,i)=>{if(t[i]){let[a,n]=r.split(" ");t[i].x=p.parse(a),t[i].y=p.parse(n)}}),e["background-visibility"]&&e["background-visibility"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].visibility=r===Er.HIDDEN?Er.HIDDEN:Er.VISIBLE)}),t}static toCSS(e){var t={};return e.forEach(r=>{La(r.toCSS(),(i,a)=>{t[i]||(t[i]=[]),t[i].push(a)})}),yl(t)}static toProperty(e){var t={};return e.forEach(r=>{La(r.toProperty(),(i,a)=>{t[i]||(t[i]=[]),t[i].push(a)})}),yl(t)}static join(e){return Je(Be.toProperty(e.map(t=>Be.parse(t))))}static joinCSS(e){return Be.toCSS(e.map(t=>Be.parse(t)))}static parseList(e=[]){return e.map(t=>Be.parse(t))}}class pC extends Y{initState(){var r;const e=Be.parseImage(this.props.value||"static-gradient(#ececec)"),t=(r=e.colorsteps[this.props.index])==null?void 0:r.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(i=>this.$context.selection.isSelectedColorStep(i.id))),{id:t,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({image:Be.parseImage(e)},!1),this.refresh()}template(){return`
      @@ -706,54 +711,54 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[yn("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(i=>{this.$commands.emit("updateImageAssetItem",i,r=>{this.trigger("setImageUrl",r)})})}[Me("changeTabType")](e){var s,a;const t=(s=this.state.image)==null?void 0:s.type,i=((a=this.state.image)==null?void 0:a.colorsteps)||[];t===ue.STATIC&&(i.length===0||i.length===1)&&i.push(i[0],i[0]);var r=e==="image-resource"?this.state.image.url:this.state.url;this.state.image=Ot.changeImageType({type:e,url:r,colorsteps:i,angle:this.state.image.angle||0,radialType:this.state.image.radialType||Ci.CIRCLE,radialPosition:this.state.image.radialPosition||["50%","50%"]}),this.refresh(),this.updateData()}[Me("changeColorStepOffset")](e,t){this.currentStep&&(this.currentStep.percent=t.value,this.state.image.sortColorStep(),this.refresh(),this.updateData())}[se("$back")](e){var t=this.refs.$stepList.rect(),i=t.x,r=t.right,s=e.xy.x;sr&&(s=r);var a=(s-i)/t.width*100;this.state.image.insertColorStep(a),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[$e("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[$e("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[ve("$stepList")+It](){var t;var e=((t=this.state.image)==null?void 0:t.colorsteps)||[];return e.map(i=>{var r=this.$context.selection.isSelectedColorStep(i.id)?"selected":"";return` -
      -
      - ${Math.floor(i.percent*10)/10} + `}[Sr("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(r=>{this.$commands.emit("updateImageAssetItem",r,i=>{this.trigger("setImageUrl",i)})})}[Z("changeTabType")](e){var a,n;const t=(a=this.state.image)==null?void 0:a.type,r=((n=this.state.image)==null?void 0:n.colorsteps)||[];t===F.STATIC&&(r.length===0||r.length===1)&&r.push(r[0],r[0]);var i=e==="image-resource"?this.state.image.url:this.state.url;this.state.image=Be.changeImageType({type:e,url:i,colorsteps:r,angle:this.state.image.angle||0,radialType:this.state.image.radialType||bt.CIRCLE,radialPosition:this.state.image.radialPosition||["50%","50%"]}),this.refresh(),this.updateData()}[Z("changeColorStepOffset")](e,t){this.currentStep&&(this.currentStep.percent=t.value,this.state.image.sortColorStep(),this.refresh(),this.updateData())}[A("$back")](e){var t=this.refs.$stepList.rect(),r=t.x,i=t.right,a=e.xy.x;ai&&(a=i);var n=(a-r)/t.width*100;this.state.image.insertColorStep(n),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[ne("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[ne("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[G("$stepList")+Ee](){var t;var e=((t=this.state.image)==null?void 0:t.colorsteps)||[];return e.map(r=>{var i=this.$context.selection.isSelectedColorStep(r.id)?"selected":"";return` +
      +
      + ${Math.floor(r.percent*10)/10}
      -
      `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[Pr("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t+1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&this.state.image.insertColorStep(r.percent+(100-r.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t-1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&this.state.image.insertColorStep(r.percent),this.refresh(),this.updateData(),this.doFocus(e)}[qe("$stepList .step")+at()+lt()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),i=t.x,r=t.right,s=this.startXY.x+e;sr&&(s=r);var a=(s-i)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(a=Math.floor(a)),this.currentStep.setValue(a,t.width),this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${en.toCSSColorString(e.colorsteps)})`}[Me("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.colorsteps[0].color=e,this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[U("setImageUrl")](e){this.state.image&&(this.state.url=e,this.state.image.reset({url:e}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}var die="";class DR extends ge{initState(){return{value:this.props.value}}template(){return"
      "}[$e("$body")](){return{"data-column":this.props.column||1}}[ve("$body")](){return Object.keys(We).map(e=>{var t=We[e],i=e===this.state.value?"selected":"";return`
      ${t}
      `})}getValue(){return this.state.value}setValue(e){this.state.value=e,this.refresh()}[se("$body .list-view-item")](e){var t=e.$dt.attr("data-key");e.$dt.onlyOneClass("selected"),this.updateData({value:t})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class FR extends ge{initState(){var e=this.props.values.split(" ").map(t=>+t);return{values:e,column:this.props.column}}template(){return"
      "}[$e("$body")](){return{cssText:` +
      `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[er("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t+1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&this.state.image.insertColorStep(i.percent+(100-i.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t-1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&this.state.image.insertColorStep(i.percent),this.refresh(),this.updateData(),this.doFocus(e)}[me("$stepList .step")+xe()+Se()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),r=t.x,i=t.right,a=this.startXY.x+e;ai&&(a=i);var n=(a-r)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(n=Math.floor(n)),this.currentStep.setValue(n,t.width),this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${yr.toCSSColorString(e.colorsteps)})`}[Z("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.colorsteps[0].color=e,this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[M("setImageUrl")](e){this.state.image&&(this.state.url=e,this.state.image.reset({url:e}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}var aD="";class gC extends Y{initState(){return{value:this.props.value}}template(){return"
      "}[ne("$body")](){return{"data-column":this.props.column||1}}[G("$body")](){return Object.keys(oe).map(e=>{var t=oe[e],r=e===this.state.value?"selected":"";return`
      ${t}
      `})}getValue(){return this.state.value}setValue(e){this.state.value=e,this.refresh()}[A("$body .list-view-item")](e){var t=e.$dt.attr("data-key");e.$dt.onlyOneClass("selected"),this.updateData({value:t})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class fC extends Y{initState(){var e=this.props.values.split(" ").map(t=>+t);return{values:e,column:this.props.column}}template(){return"
      "}[ne("$body")](){return{cssText:` display: grid; grid-template-columns: repeat(${this.state.column}, 1fr); grid-column-gap: 2px; grid-row-gap: 2px; - `}}[ve("$body")](){var{values:e}=this.state;return e.map((t,i)=>` + `}}[G("$body")](){var{values:e}=this.state;return e.map((t,r)=>`
      - +
      - `)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[fi("$body input")](e){var t=e.$dt,i=+t.attr("data-index"),r=+t.value;this.state.values[i]=r,this.updateData()}}var uie="";class NR extends ge{initState(){var e=this.props.units||["px","em","%","auto"],t=y.parse(this.props.value||"0px");let i=this.props.label||"";return We[i]&&(i=We[i]),{removable:this.props.removable,label:i,compact:this.props.compact,wide:this.props.wide,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",disabled:this.props.disabled,title:this.props.title||"",units:e,value:t}}template(){return"
      "}[ve("$body")+It](){var{min:e,max:t,step:i,label:r,title:s,compact:a,wide:o,removable:l,layout:c,disabled:h}=this.state,d=+this.state.value.value.toString();isNaN(d)&&(d=0);var u=c,p=(+d).toString();const f=this.state.units;return` + `)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[dt("$body input")](e){var t=e.$dt,r=+t.attr("data-index"),i=+t.value;this.state.values[r]=i,this.updateData()}}var nD="";class mC extends Y{initState(){var e=this.props.units||["px","em","%","auto"],t=p.parse(this.props.value||"0px");let r=this.props.label||"";return oe[r]&&(r=oe[r]),{removable:this.props.removable,label:r,compact:this.props.compact,wide:this.props.wide,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",disabled:this.props.disabled,title:this.props.title||"",units:e,value:t}}template(){return"
      "}[G("$body")+Ee](){var{min:e,max:t,step:r,label:i,title:a,compact:n,wide:o,removable:l,layout:c,disabled:h}=this.state,u=+this.state.value.value.toString();isNaN(u)&&(u=0);var d=c,v=(+u).toString();const g=this.state.units;return`
      - ${r?``:""} + ${i?``:""}
      - + - ${f.length===1?`${f[0]}`:W("SelectEditor",{ref:"$unit",key:"unit",compact:!0,value:this.state.selectedUnit||this.state.value.unit,options:this.state.units,onchange:"changeUnit"})} + ${g.length===1?`${g[0]}`:R("SelectEditor",{ref:"$unit",key:"unit",compact:!0,value:this.state.selectedUnit||this.state.value.unit,options:this.state.units,onchange:"changeUnit"})}
      - +
      - `}getValue(){return this.state.value.clone()}setValue(e){var t;this.setState({value:y.parse(e)},!1),this.refs.$propertyNumber.val(this.state.value.value),(t=this.children.$unit)==null||t.setValue(this.state.value.unit)}disabled(){this.setState({disabled:!0})}enabled(){this.setState({disabled:!1})}[se("$remove")](){this.updateData({value:""})}getUnit(){var e;return((e=this.children.$unit)==null?void 0:e.getValue())||this.state.value.unit}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new y(0,this.getUnit()))}[fi("$body .property-number")](e){var t=+e.$dt.value;this.initValue(),this.updateData({value:new y(t,this.getUnit())})}[Me("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}[Ec("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[na("$body input[type=number]")](){this.refs.$range.removeClass("focused")}[qe("$body .elf--input-range-editor label")+at("moveDrag")+lt("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initNumberValue=+this.refs.$propertyNumber.value,this.initUnit=this.state.value.unit,this.initUnits=this.state.units,this.refs.$propertyNumber.focus(),this.refs.$propertyNumber.select()}moveDrag(e){let t=Math.floor(Bt(this.initNumberValue+e*this.state.step,100));t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:new y(t,this.getUnit())}),this.refs.$propertyNumber.val(this.state.value.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}var pie="";class r1 extends ge{initState(){var e=this.props.units||["px","em","%"],t=y.parse(this.props.value||0);return{removable:this.props.removable==="true",calc:this.props.calc==="true",compact:this.props.compact==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",units:e,value:t}}template(){return"
      "}[ve("$body")](){var{min:e,max:t,step:i,label:r,removable:s,layout:a,compact:o}=this.state,l=+this.state.value.value.toString();isNaN(l)&&(l=0);var c=a,h=(+l).toString();if(this.state.units==="%")throw new Error("%");var d=this.state.units.map(u=>{let p=u;return p==="number"&&(p=""),{value:u,text:p}});return` + `}getValue(){return this.state.value.clone()}setValue(e){var t;this.setState({value:p.parse(e)},!1),this.refs.$propertyNumber.val(this.state.value.value),(t=this.children.$unit)==null||t.setValue(this.state.value.unit)}disabled(){this.setState({disabled:!0})}enabled(){this.setState({disabled:!1})}[A("$remove")](){this.updateData({value:""})}getUnit(){var e;return((e=this.children.$unit)==null?void 0:e.getValue())||this.state.value.unit}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new p(0,this.getUnit()))}[dt("$body .property-number")](e){var t=+e.$dt.value;this.initValue(),this.updateData({value:new p(t,this.getUnit())})}[Z("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}[ja("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[Fi("$body input[type=number]")](){this.refs.$range.removeClass("focused")}[me("$body .elf--input-range-editor label")+xe("moveDrag")+Se("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initNumberValue=+this.refs.$propertyNumber.value,this.initUnit=this.state.value.unit,this.initUnits=this.state.units,this.refs.$propertyNumber.focus(),this.refs.$propertyNumber.select()}moveDrag(e){let t=Math.floor(Ue(this.initNumberValue+e*this.state.step,100));t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:new p(t,this.getUnit())}),this.refs.$propertyNumber.val(this.state.value.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}var oD="";class Uu extends Y{initState(){var e=this.props.units||["px","em","%"],t=p.parse(this.props.value||0);return{removable:this.props.removable==="true",calc:this.props.calc==="true",compact:this.props.compact==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",units:e,value:t}}template(){return"
      "}[G("$body")](){var{min:e,max:t,step:r,label:i,removable:a,layout:n,compact:o}=this.state,l=+this.state.value.value.toString();isNaN(l)&&(l=0);var c=n,h=(+l).toString();if(this.state.units==="%")throw new Error("%");var u=this.state.units.map(d=>{let v=d;return v==="number"&&(v=""),{value:d,text:v}});return`
      - ${r?``:""} + ${i?``:""}
      - +
      - - ${W("SelectEditor",{ref:"$unit",key:"unit",value:this.state.value.unit,options:d,onchange:"changeUnit"})} + + ${R("SelectEditor",{ref:"$unit",key:"unit",value:this.state.value.unit,options:u,onchange:"changeUnit"})}
      - +
      - `}getValue(){return this.state.value.clone()}setValue(e){this.setState({value:y.parse(e)})}[bf('$body input[type="number"]')](){this.refs.$rangeArea.addClass("focused")}[xf('$body input[type="number"]')](){this.refs.$rangeArea.removeClass("focused")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new y(0,this.children.$unit.getValue()))}[fi('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.initValue(),this.updateData({value:new y(e,this.children.$unit.getValue())})}[fi('$body input[type="range"]')](){this.trigger("changeRangeValue")}[qe('$body input[type="range"]')+lt()](){}end(){this.trigger("changeRangeValue")}[Me("changeRangeValue")](){var e=+this.getRef("$property").value;this.refs.$propertyNumber.val(e),this.initValue(),this.updateData({value:new y(e,this.children.$unit.getValue())})}[Me("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}}class BR extends r1{initState(){var e=this.props.value;e==="infinite"?e=new y(0,"infinite"):e=y.number(e);var t=this.props.units||["px","em","%"];return Ve(P({},super.initState()),{key:this.props.key,params:this.props.params||"",units:t,value:e})}}var fie="";class jR extends ge{initState(){const[e,t,i]=(this.props.value||"").split(":");return{start:+(e||0),end:+(t||1),duration:+(i||1)}}refresh(){this.load(),this.children.$s.setValue(this.state.start*this.state.duration),this.children.$e.setValue(this.state.end*this.state.duration),this.children.$s.setMax(this.state.duration),this.children.$e.setMax(this.state.duration)}template(){const{start:e,end:t,duration:i}=this.state;return` + `}getValue(){return this.state.value.clone()}setValue(e){this.setState({value:p.parse(e)})}[Tl('$body input[type="number"]')](){this.refs.$rangeArea.addClass("focused")}[kl('$body input[type="number"]')](){this.refs.$rangeArea.removeClass("focused")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new p(0,this.children.$unit.getValue()))}[dt('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.initValue(),this.updateData({value:new p(e,this.children.$unit.getValue())})}[dt('$body input[type="range"]')](){this.trigger("changeRangeValue")}[me('$body input[type="range"]')+Se()](){}end(){this.trigger("changeRangeValue")}[Z("changeRangeValue")](){var e=+this.getRef("$property").value;this.refs.$propertyNumber.val(e),this.initValue(),this.updateData({value:new p(e,this.children.$unit.getValue())})}[Z("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}}class vC extends Uu{initState(){var e=this.props.value;e==="infinite"?e=new p(0,"infinite"):e=p.number(e);var t=this.props.units||["px","em","%"];return se(b({},super.initState()),{key:this.props.key,params:this.props.params||"",units:t,value:e})}}var lD="";class yC extends Y{initState(){const[e,t,r]=(this.props.value||"").split(":");return{start:+(e||0),end:+(t||1),duration:+(r||1)}}refresh(){this.load(),this.children.$s.setValue(this.state.start*this.state.duration),this.children.$e.setValue(this.state.end*this.state.duration),this.children.$s.setMax(this.state.duration),this.children.$e.setMax(this.state.duration)}template(){const{start:e,end:t,duration:r}=this.state;return`
      @@ -762,42 +767,42 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - ${W("NumberRangeEditor",{ref:"$s",label:"Start",key:"start",min:0,max:i,step:.001,value:e*i,onchange:"changeValue"})} + ${R("NumberRangeEditor",{ref:"$s",label:"Start",key:"start",min:0,max:r,step:.001,value:e*r,onchange:"changeValue"})}
      - ${W("NumberRangeEditor",{ref:"$e",label:"End",key:"end",min:0,max:i,step:.001,value:t*i,onchange:"changeValue"})} + ${R("NumberRangeEditor",{ref:"$e",label:"End",key:"end",min:0,max:r,step:.001,value:t*r,onchange:"changeValue"})}
      - `}[Me("changeValue")](e,t){this.updateData({[e]:t/this.state.duration},!0)}[qe("$start")+at("moveStart")](){this.rect=this.refs.$progress.rect(),this.pos=y.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=y.parse(this.refs.$end.css("left")).toPx(this.rect.width)}moveStart(e){var t=Math.min(this.max.value,Math.max(0,this.pos.value+e));this.state.start=t/this.rect.width,this.children.$s.setValue(this.state.start*this.state.duration),this.refresh(),this.updateData()}[$e("$start")](){return{"data-info":this.state.start,style:{left:y.percent((this.state.start||0)*100)}}}[qe("$end")+at("moveStartForEnd")](){this.rect=this.refs.$progress.rect(),this.pos=y.parse(this.refs.$end.css("left")).toPx(this.rect.width),this.min=y.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=this.rect.width}moveStartForEnd(e){var t=Math.max(this.min.value,Math.min(this.max.value,this.pos.value+e));this.state.end=t/this.rect.width,this.children.$e.setValue(this.state.end*this.state.duration),this.refresh(),this.updateData()}[$e("$end")](){return{"data-info":this.state.end,style:{left:y.percent((this.state.end||1)*100)}}}[$e("$bar")](){const e=this.state.start||0,t=this.state.end||1;return{style:{left:y.percent(e*100),width:y.percent((t-e)*100)}}}getValue(){const{start:e,end:t,duration:i}=this.state;return`${e}:${t}:${i}`}setValue(e){const[t,i,r]=e.split(":");this.setState({start:Number(t),end:Number(i),duration:Number(r)})}updateData(e={},t=!1){this.setState(e,t),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var gie="";class GR extends ge{initState(){var e=+this.props.value;let t=this.props.label||"";We[t]&&(t=We[t]);const i=Dn(this.props.compact)?this.props.compact:this.props.compact==="true",r=Dn(this.props.wide)?this.props.wide:this.props.wide==="true",s=Dn(this.props.mini)?this.props.mini:this.props.mini==="true",a=this.props.trigger||"input";return{label:t,compact:i,wide:r,mini:s,trigger:a,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
      "}[ve("$body")+It](){var{min:e,max:t,step:i,label:r,type:s,layout:a,mini:o,compact:l,wide:c,disabled:h,removable:d}=this.state,u=this.state.value;isNaN(u)&&(u=0);var p=a,f=(+u).toString();return` + `}[Z("changeValue")](e,t){this.updateData({[e]:t/this.state.duration},!0)}[me("$start")+xe("moveStart")](){this.rect=this.refs.$progress.rect(),this.pos=p.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=p.parse(this.refs.$end.css("left")).toPx(this.rect.width)}moveStart(e){var t=Math.min(this.max.value,Math.max(0,this.pos.value+e));this.state.start=t/this.rect.width,this.children.$s.setValue(this.state.start*this.state.duration),this.refresh(),this.updateData()}[ne("$start")](){return{"data-info":this.state.start,style:{left:p.percent((this.state.start||0)*100)}}}[me("$end")+xe("moveStartForEnd")](){this.rect=this.refs.$progress.rect(),this.pos=p.parse(this.refs.$end.css("left")).toPx(this.rect.width),this.min=p.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=this.rect.width}moveStartForEnd(e){var t=Math.max(this.min.value,Math.min(this.max.value,this.pos.value+e));this.state.end=t/this.rect.width,this.children.$e.setValue(this.state.end*this.state.duration),this.refresh(),this.updateData()}[ne("$end")](){return{"data-info":this.state.end,style:{left:p.percent((this.state.end||1)*100)}}}[ne("$bar")](){const e=this.state.start||0,t=this.state.end||1;return{style:{left:p.percent(e*100),width:p.percent((t-e)*100)}}}getValue(){const{start:e,end:t,duration:r}=this.state;return`${e}:${t}:${r}`}setValue(e){const[t,r,i]=e.split(":");this.setState({start:Number(t),end:Number(r),duration:Number(i)})}updateData(e={},t=!1){this.setState(e,t),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var cD="";class bC extends Y{initState(){var e=+this.props.value;let t=this.props.label||"";oe[t]&&(t=oe[t]);const r=ai(this.props.compact)?this.props.compact:this.props.compact==="true",i=ai(this.props.wide)?this.props.wide:this.props.wide==="true",a=ai(this.props.mini)?this.props.mini:this.props.mini==="true",n=this.props.trigger||"input";return{label:t,compact:r,wide:i,mini:a,trigger:n,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
      "}[G("$body")+Ee](){var{min:e,max:t,step:r,label:i,type:a,layout:n,mini:o,compact:l,wide:c,disabled:h,removable:u}=this.state,d=this.state.value;isNaN(d)&&(d=0);var v=n,g=(+d).toString();return`
      - ${r?``:""} + data-selected-type='${a}'> + ${i?``:""}
      - +
      - `}getValue(){return this.state.value||0}setValue(e){this.setState({value:e},!1),this.refs.$propertyNumber.val(this.state.value)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[Ec("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[na("$body input[type=number]")](){this.refs.$range.removeClass("focused")}updateValue(e){var t=+e.$dt.value;this.updateData({value:t})}isTriggerInput(){return this.state.trigger==="input"}isTriggerEnter(){return this.state.trigger==="enter"}[fi("$body input[type=number]")+Qe("isTriggerInput")+Ft(500)](e){this.updateValue(e)}[Pr("$body input[type=number]")+Qe("isTriggerEnter")+ra](e){this.updateValue(e),e.$dt.select()}[qe("$body label")+at("moveDrag")+lt("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initValue=+this.refs.$propertyNumber.value}moveDrag(e){let t=Bt(this.initValue+e*this.state.step,1/this.state.step);t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:t}),this.refs.$propertyNumber.val(this.state.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}var mie="";class HR extends ge{initState(){var e=y.parse(this.props.value||y.number(0));return e=e.toUnit("number"),{removable:this.props.removable==="true",compact:this.props.compact==="true",wide:this.props.wide==="true",clamp:this.props.clamp==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
      "}[ve("$body")](){var{min:e,max:t,step:i,label:r,removable:s,layout:a,compact:o,wide:l,disabled:c}=this.state,h=+this.state.value.value.toString();isNaN(h)&&(h=0);var d=a,u=(+h).toString();return` + `}getValue(){return this.state.value||0}setValue(e){this.setState({value:e},!1),this.refs.$propertyNumber.val(this.state.value)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[ja("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[Fi("$body input[type=number]")](){this.refs.$range.removeClass("focused")}updateValue(e){var t=+e.$dt.value;this.updateData({value:t})}isTriggerInput(){return this.state.trigger==="input"}isTriggerEnter(){return this.state.trigger==="enter"}[dt("$body input[type=number]")+fe("isTriggerInput")+Ne(500)](e){this.updateValue(e)}[er("$body input[type=number]")+fe("isTriggerEnter")+Di](e){this.updateValue(e),e.$dt.select()}[me("$body label")+xe("moveDrag")+Se("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initValue=+this.refs.$propertyNumber.value}moveDrag(e){let t=Ue(this.initValue+e*this.state.step,1/this.state.step);t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:t}),this.refs.$propertyNumber.val(this.state.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}var hD="";class xC extends Y{initState(){var e=p.parse(this.props.value||p.number(0));return e=e.toUnit("number"),{removable:this.props.removable==="true",compact:this.props.compact==="true",wide:this.props.wide==="true",clamp:this.props.clamp==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
      "}[G("$body")](){var{min:e,max:t,step:r,label:i,removable:a,layout:n,compact:o,wide:l,disabled:c}=this.state,h=+this.state.value.value.toString();isNaN(h)&&(h=0);var u=n,d=(+h).toString();return`
      - ${r?``:""} + ${i?``:""}
      - +
      - +
      - +
      - `}setMin(e){this.setState({min:y.parse(e)})}setMax(e){this.setState({max:y.parse(e)})}getValue(){return this.state.clamp?this.state.value.clamp(this.state.min,this.state.max):this.state.value}setValue(e){console.log(e),this.setState({value:y.parse(e)})}[bf('$body input[type="number"]')](){this.refs.$propertyNumber.addClass("focused")}[xf('$body input[type="number"]')](){this.refs.$propertyNumber.removeClass("focused")}[se("$remove")](){this.updateData({value:""})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[fi('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.updateData({value:this.state.value.set(e)})}[fi('$body input[type="range"]')](){this.trigger("changeRangeValue")}[qe('$body input[type="range"]')+lt()](){}end(){this.trigger("changeRangeValue")}[Me("changeRangeValue")](){var e=+this.getRef("$property").value;this.getRef("$propertyNumber").val(e),this.state.value===""&&(this.state.value=y.number(0)),this.updateData({value:this.state.value.set(e)})}}var vie="";class Ji{constructor(){this.pathArray=[]}reset(){this.pathArray=[]}getPointString(e){return e.map(t=>`${t.x} ${t.y}`).join(" ")}makeString(e,t=[]){return this.pathArray.push(`${e} ${this.getPointString(t)}`),this}M(...e){return this.makeString("M",e)}L(...e){return this.makeString("L",e)}X(...e){const i=e[0],r={x:i.x-3,y:i.y-3},s={x:i.x+3,y:i.y-3},a={x:i.x-3,y:i.y+3},o={x:i.x+3,y:i.y+3};return this.M(r).L(o).M(s).L(a)}Q(...e){return this.makeString("Q",e)}C(...e){return this.makeString("C",e)}Z(){return this.makeString("Z")}get d(){return this.pathArray.join(" ").trim()}toString(e="object"){return``}}class xg{constructor(e){this.viewport=e,this.segmentList=[]}get hasViewport(){return Boolean(this.viewport)}reset(){return this.segmentList=[],this}checkInViewport(e){if(!this.hasViewport)return!0;const t=this.viewport.applyVertexInverse([e.x,e.y,0]);return this.viewport.checkInViewport(t)}addLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addGuideLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,guide:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:(this.segmentList.push({line:!0,distance:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceAngle(e,t,i,r,s,a){return this.segmentList.push({angle:!0,rx:t,ry:i,line:a,degree:r,center:e,last:s}),this}addPoint(e,t,i,r,s=!1){return this.checkInViewport(t)&&this.segmentList.push(Ve(P({},e),{cx:t.x,cy:t.y,selected:s,index:i,segment:r,isFirst:t.isFirst,isLast:t.isLast,isSecond:t.isSecond})),this}addStartPoint(e,t){return this.checkInViewport(t)&&this.segmentList.push(Ve(P({},e),{cx:t.x,cy:t.y,start:!0})),this}addCurvePoint(e,t,i,r=!1){return this.checkInViewport(e)&&this.segmentList.push({curve:!0,cx:e.x,cy:e.y,index:t,selected:r,segment:i,isFirst:e.isFirst,isLast:e.isLast,isSecond:e.isSecond}),this}addText(e,t){return this.segmentList.push({type:"text",cx:e.x,cy:e.y,text:t+""}),this}toString(){return this.segmentList.sort((e,t)=>e.line&&!t.line?-1:!e.line&&t.line?1:0),this.segmentList.map(e=>e.angle?` + `}setMin(e){this.setState({min:p.parse(e)})}setMax(e){this.setState({max:p.parse(e)})}getValue(){return this.state.clamp?this.state.value.clamp(this.state.min,this.state.max):this.state.value}setValue(e){console.log(e),this.setState({value:p.parse(e)})}[Tl('$body input[type="number"]')](){this.refs.$propertyNumber.addClass("focused")}[kl('$body input[type="number"]')](){this.refs.$propertyNumber.removeClass("focused")}[A("$remove")](){this.updateData({value:""})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[dt('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.updateData({value:this.state.value.set(e)})}[dt('$body input[type="range"]')](){this.trigger("changeRangeValue")}[me('$body input[type="range"]')+Se()](){}end(){this.trigger("changeRangeValue")}[Z("changeRangeValue")](){var e=+this.getRef("$property").value;this.getRef("$propertyNumber").val(e),this.state.value===""&&(this.state.value=p.number(0)),this.updateData({value:this.state.value.set(e)})}}var dD="";class jt{constructor(){this.pathArray=[]}reset(){this.pathArray=[]}getPointString(e){return e.map(t=>`${t.x} ${t.y}`).join(" ")}makeString(e,t=[]){return this.pathArray.push(`${e} ${this.getPointString(t)}`),this}M(...e){return this.makeString("M",e)}L(...e){return this.makeString("L",e)}X(...e){const r=e[0],i={x:r.x-3,y:r.y-3},a={x:r.x+3,y:r.y-3},n={x:r.x-3,y:r.y+3},o={x:r.x+3,y:r.y+3};return this.M(i).L(o).M(a).L(n)}Q(...e){return this.makeString("Q",e)}C(...e){return this.makeString("C",e)}Z(){return this.makeString("Z")}get d(){return this.pathArray.join(" ").trim()}toString(e="object"){return``}}class kc{constructor(e){this.viewport=e,this.segmentList=[]}get hasViewport(){return Boolean(this.viewport)}reset(){return this.segmentList=[],this}checkInViewport(e){if(!this.hasViewport)return!0;const t=this.viewport.applyVertexInverse([e.x,e.y,0]);return this.viewport.checkInViewport(t)}addLine(e,t){return this.hasViewport&&sr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addGuideLine(e,t){return this.hasViewport&&sr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,guide:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceLine(e,t){return this.hasViewport&&sr(e.x,e.y,t.x,t.y)<1?this:(this.segmentList.push({line:!0,distance:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceAngle(e,t,r,i,a,n){return this.segmentList.push({angle:!0,rx:t,ry:r,line:n,degree:i,center:e,last:a}),this}addPoint(e,t,r,i,a=!1){return this.checkInViewport(t)&&this.segmentList.push(se(b({},e),{cx:t.x,cy:t.y,selected:a,index:r,segment:i,isFirst:t.isFirst,isLast:t.isLast,isSecond:t.isSecond})),this}addStartPoint(e,t){return this.checkInViewport(t)&&this.segmentList.push(se(b({},e),{cx:t.x,cy:t.y,start:!0})),this}addCurvePoint(e,t,r,i=!1){return this.checkInViewport(e)&&this.segmentList.push({curve:!0,cx:e.x,cy:e.y,index:t,selected:i,segment:r,isFirst:e.isFirst,isLast:e.isLast,isSecond:e.isSecond}),this}addText(e,t){return this.segmentList.push({type:"text",cx:e.x,cy:e.y,text:t+""}),this}toString(){return this.segmentList.sort((e,t)=>e.line&&!t.line?-1:!e.line&&t.line?1:0),this.segmentList.map(e=>e.angle?` `).join("")}}const _g=["startPoint","endPoint","reversePoint"];function n1(n,e,t,i,r){var s=n.filter(o=>o?Math.abs(o[e]-t)<=r:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));s.sort((o,l)=>o.dista).forEach(a=>{s.filter(o=>a[o]).forEach(o=>{var l=a[o],c=Math.abs(l[e]-t);c<=i&&r.push({dist:c,point:l})})}),r.sort((a,o)=>a.dist>o.dist?1:-1),r.length?r[0].point:null}function a1(n,e,t,i=1){for(var r=[],s=0,a=n.length;sWR(e,t,d,i)).join(" ");return{d:h}}function WR(n,e,t,i=1){var{command:r,values:s}=t;switch(r){case"Z":return"Z";default:var a=s.map(o=>{var l=o.x-n===0?0:(o.x-n)/i,c=o.y-e===0?0:(o.y-e)/i;return`${l} ${c}`}).join(" ");return`${r} ${a}`}}function XR(n,e){return!(n.x2.valuee.x||n.y.value>e.y)}class YR{generatorPathString(e,t=0,i=0,r=1){return a1(e,t,i,r).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Ji,this.guideLineManager=new Ji,this.segmentManager=new xg(null),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const i=this.points[t.index][t.key];if(!!i)return{x:i.x,y:i.y,key:t.key,index:i.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var i=[];if(this.points.forEach((r,s)=>{_g.forEach(a=>{const o=r[a];XR(e,o)&&i.push({x:o.x,y:o.y,key:a,index:s})})}),t){i=i.map(o=>{const l=this.makeSegmentKey(o);return Ve(P({},o),{included:Boolean(this.selectedPointKeys[l])})});const r=i.filter(o=>o.included),s=i.filter(o=>!o.included);let a=[...this.selectedPointList];r.length&&(a=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(r.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...a,...s)}else this.select(...i)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:i,key:r,index:s})=>({x:t,y:i,key:r,index:+s})),e.forEach(t=>{var i=this.makeSegmentKey(t);this.selectedPointKeys[i]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(i=>{_g.forEach(r=>{const{x:s,y:a}=i[r];t.push({x:s,y:a,key:r,index:i.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:i.x,y:i.y,key:e,index:t}):this.select(...this.selectedPointList.filter(r=>r.key!==e||r.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)&&this.select({x:i.x,y:i.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var i;var t=(i=this.points[e.index])==null?void 0:i[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var i=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[i]}commitTransformMatrix(e,t){var i=Kt([],[e.x,e.y,0],t);return{x:i[0],y:i[1]}}transformMat4(e){this.transformPoints.forEach((t,i)=>{var r=this.points[i];Object.assign(r.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(r.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(r.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:i,width:r,height:s}=this.transformRect,a=Ki();switch(Ni(a,a,[t,i,0]),e){case"flipX":us(a,a,[-1,1,1]),Ni(a,a,[-r,0,0]);break;case"flipY":us(a,a,[1,-1,1]),Ni(a,a,[0,-s,0]);break;case"flip":us(a,a,[-1,-1,1]),Ni(a,a,[-r,-s,0]);break}Ni(a,a,[-t,-i,0]),this.transformMat4(a)}initTransform(e){this.transformRect=rt(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:rt(t.startPoint),endPoint:rt(t.endPoint),reversePoint:rt(t.reversePoint)}))}setConnectedPoint(e,t){var i=this.state,r=i.dragXY.x+e,s=i.dragXY.y+t,a={x:r,y:s},o={x:r,y:s};i.dragPoints&&(i.reversePoint=xe.getReversePoint(i.startPoint,a));var l={startPoint:i.startPoint,endPoint:a,curve:!!i.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=rt(e),i=rt(e),r={startPoint:e,endPoint:t,curve:!1,reversePoint:i,connected:!1,close:!1};this.points.push(r)}getPrevPoint(e){return xe.getPrevPoint(this.points,e)}getIndexPoint(e){return xe.getIndexPoint(this.points,e)}getNextPoint(e){return xe.getNextPoint(this.points,e)}getConnectedPointList(e){return xe.getConnectedPointList(this.points,e)}isFirst(e){return xe.isFirst(e)}getLastPoint(e){return xe.getLastPoint(this.points,e)}setCachePoint(e,t){var i=this.state;this.snapPointList=[],this.selectedIndex=e,i.connectedPoint=this.getPrevPoint(e),i.connectedPointList=rt(xe.getConnectedPointList(this.points,this.selectedIndex)),i.connectedPoint&&!i.connectedPoint.connected&&(i.connectedPoint=null),i.segment=this.getIndexPoint(e),i.segment.connected&&(i.connectedPoint=this.getNextPoint(e));var r=this.isFirst(i.segment);if(r){var s=this.getLastPoint(e);s.connected&&(i.connectedPoint=s)}i.segmentKey=t,i.isCurveSegment=i.segment.curve&&i.segmentKey!="startPoint",i.originalSegment=rt(i.segment),i.connectedPoint&&(i.originalConnectedPoint=rt(i.connectedPoint)),i.cachedPoints=[],this.points.filter(a=>a&&a!=i.segment).forEach(a=>{i.cachedPoints.push(a.startPoint,a.reversePoint,a.endPoint)})}clamp(e,t,i){return Di(t)||Di(i)?e:Math.max(t,Math.min(i,e))}moveSegment(e,t,i,r=void 0,s=void 0,a=void 0){if(r){const h=this.points[r.index][e];h.x=this.clamp(r[e].x+t,0,s),h.y=this.clamp(r[e].y+i,0,a)}else{var o=this.state,l=o.originalSegment[e],c=o.segment[e];l&&(c.x=this.clamp(l.x+t,0,s),c.y=this.clamp(l.y+i,0,a))}}calculateToCurve(e,t,i){var r=(t.startPoint.x+i.startPoint.x)/2,s=(t.startPoint.y+i.startPoint.y)/2,a=(t.startPoint.x-r)/2,o=(t.startPoint.y-s)/2;return e.endPoint={x:e.startPoint.x+a,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-a,y:e.startPoint.y-o},{dx:a,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=rt(t.startPoint),t.endPoint=rt(t.startPoint),t.command==="M"){var i=xe.getPrevPoint(this.points,t.index);i.connected&&(i.curve=!1,i.reversePoint=rt(i.startPoint),i.endPoint=rt(i.startPoint))}else{var r=this.getNextPoint(e);if(r&&r.command==="M"){var s=r;s.curve=!1,s.reversePoint=rt(s.startPoint),s.endPoint=rt(s.startPoint)}}else{t.curve=!0;var a=this.getPrevPoint(e),r=this.getNextPoint(e);if(r&&r.indexe&&r.command!=="M")this.calculateToCurve(t,r,a);else if(!r&&a){var o=(t.startPoint.x-a.startPoint.x)/3,l=(t.startPoint.y-a.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=xe.getReversePoint(t.startPoint,t.endPoint)}else if(!a&&r){var o=(t.startPoint.x-r.startPoint.x)/3,l=(t.startPoint.y-r.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=xe.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,i){var r=this.state;this.moveSegment(e,t,i);var s=e==="endPoint"?"reversePoint":"endPoint";r.segment[s]=xe.getReversePoint(r.segment.startPoint,r.segment[e])}rotateSegmentTarget(e,t){var i=this.state;if(i.originalSegment&&i.segment){var{x:r,y:s}=i.originalSegment.startPoint,{x:a,y:o}=i.segment[e],{x:l,y:c}=i.originalSegment[t],{x:h,y:d}=pl(li(a-r,o-s),Rr(l,c,r,s),r,s);i.segment[t]={x:h,y:d}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,d,p,r=1){var s=this.state,a=s.cachedPoints,o=s.originalSegment[e];if(!e)return{dx:d,dy:p,snapPointList:[]};var l=o.x+d,c=o.y+p,{point:h,distanceValue:d}=n1(a,"x",l,d,r),{point:u,distanceValue:p}=n1(a,"y",c,p,r),f={x:o.x+d,y:o.y+p},g=[];return h&&g.push({startPoint:h,endPoint:f}),u&&g.push({startPoint:u,endPoint:f}),{dx:d,dy:p,snapPointList:g}}copySegment(e,t){t.startPoint=rt(e.startPoint),t.endPoint=rt(e.endPoint),t.reversePoint=rt(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.x=i.x+e,r.y=i.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t,i,r){this.selectedGroup.points.forEach(s=>{const a=this.points[s.index];a.startPoint.x=this.clamp(s.startPoint.x+e,0,i),a.startPoint.y=this.clamp(s.startPoint.y+t,0,r),a.endPoint.x=s.endPoint.x+e,a.endPoint.y=s.endPoint.y+t,a.reversePoint.x=s.reversePoint.x+e,a.reversePoint.y=s.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return xe.getSplitedGroupList(this.points)}get groupList(){return xe.getGroupList(this.points)}getGroup(e,t){return xe.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(r=>r.groupIndex):(this.selectedPointList.forEach(r=>{const s=this.getGroup(t,r.index);s&&e.add(s.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.removed=!0});const e=xe.splitPoints(this.points),t=xe.recoverPoints(e.map(i=>i.filter(r=>!r.startPoint.removed).map(r=>(r.endPoint.removed&&(r.endPoint=rt(r.startPoint)),r.reversePoint.removed&&(r.reversePoint=rt(r.startPoint)),xe.isEqual(r.endPoint,r.startPoint,r.reversePoint)&&(r.command="L",r.curve=!1),r))));this.points=t,this.select()}move(e,t,i,r,s){var a=this.state,{isCurveSegment:o,segmentKey:l,connectedPoint:c}=a;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t,r,s);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:h}=this.calculateSnap(l,e,t,3);if(this.snapPointList=h||[],o)if(i.altKey)this.moveSegment(l,e,t),this.rotateSegment(l);else if(i.shiftKey)this.moveSegment(l,e,t);else{this.moveSegment(l,e,t);var d=l==="endPoint"?"reversePoint":"endPoint";a.segment[d]=xe.getReversePoint(a.segment.startPoint,a.segment[l])}else this.moveSegment("startPoint",e,t,null,r,s),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),i.altKey||a.connectedPointList.forEach(f=>{this.moveSegment("startPoint",e,t,f,r,s),this.moveSegment("endPoint",e,t,f),this.moveSegment("reversePoint",e,t,f)});c&&this.copySegment(a.segment,a.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t,r,s)}moveEnd(e,t){var i=this.state,r=this.points,s=i.dragXY.x+e,a=i.dragXY.y+t,o={x:s,y:a},l={x:s,y:a};i.dragPoints&&(l=xe.getReversePoint(i.startPoint,o)),r.push({command:i.clickCount===0?"M":"",startPoint:i.startPoint,endPoint:o,curve:!!i.dragPoints,reversePoint:l}),i.startPoint=null,i.dragPoints=!1,i.moveXY=null}setPoint(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i),o=[Ve(P({},s),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},Ve(P({},a),{reversePoint:e.second[2]})],l=xe.getIndex(r,t);return r.splice(l,2,...o),this.points=r,l+1}setPointQuard(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i);if(s.curve&&a.curve===!1){var o=[Ve(P({},s),{endPoint:s.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=xe.getIndex(r,t);r.splice(l,1,...o)}else{var o=[P({},s),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},Ve(P({},a),{reversePoint:e.second[1],curve:!0})],l=xe.getIndex(r,t);r.splice(l,2,...o)}return this.points=r,l+1}setPointLine(e){var t=e.first[0],i=this.clonePoints,r=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],s=xe.getIndex(i,t);return i.splice(s+1,0,...r),this.points=i,s+1}toPath(e=0,t=0,i=1){return a1(this.clonePoints,e,t,i)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var i=Math.min(e.startPoint.x,t.startPoint.x),r=Math.max(e.startPoint.x,t.startPoint.x),s=Math.min(e.startPoint.y,t.startPoint.y),a=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:a},{x:r,y:a}).addDistanceLine({x:r,y:s},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:s},{x:i,y:a}).addDistanceLine({x:i,y:a},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(i.startPoint).L(i.endPoint).X(i.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:i,points:r},s)=>{const a=this.generatorPathString(r),o=wn(_e.fromSVGString(a).getBBox());return{points:r,startPointIndex:i,groupIndex:s,center:o[4],d:a}}),t=e.length;return` + />`).join("")}}const Mc=["startPoint","endPoint","reversePoint"];function Wu(s,e,t,r,i){var a=s.filter(o=>o?Math.abs(o[e]-t)<=i:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));a.sort((o,l)=>o.distn).forEach(n=>{a.filter(o=>n[o]).forEach(o=>{var l=n[o],c=Math.abs(l[e]-t);c<=r&&i.push({dist:c,point:l})})}),i.sort((n,o)=>n.dist>o.dist?1:-1),i.length?i[0].point:null}function Yu(s,e,t,r=1){for(var i=[],a=0,n=s.length;a_C(e,t,u,r)).join(" ");return{d:h}}function _C(s,e,t,r=1){var{command:i,values:a}=t;switch(i){case"Z":return"Z";default:var n=a.map(o=>{var l=o.x-s===0?0:(o.x-s)/r,c=o.y-e===0?0:(o.y-e)/r;return`${l} ${c}`}).join(" ");return`${i} ${n}`}}function SC(s,e){return!(s.x2.valuee.x||s.y.value>e.y)}class PC{generatorPathString(e,t=0,r=0,i=1){return Yu(e,t,r,i).d}constructor(e){this.pathEditor=e,this.pathStringManager=new jt,this.guideLineManager=new jt,this.segmentManager=new kc(null),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const r=this.points[t.index][t.key];if(!!r)return{x:r.x,y:r.y,key:t.key,index:r.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var r=[];if(this.points.forEach((i,a)=>{Mc.forEach(n=>{const o=i[n];SC(e,o)&&r.push({x:o.x,y:o.y,key:n,index:a})})}),t){r=r.map(o=>{const l=this.makeSegmentKey(o);return se(b({},o),{included:Boolean(this.selectedPointKeys[l])})});const i=r.filter(o=>o.included),a=r.filter(o=>!o.included);let n=[...this.selectedPointList];i.length&&(n=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(i.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...n,...a)}else this.select(...r)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:r,key:i,index:a})=>({x:t,y:r,key:i,index:+a})),e.forEach(t=>{var r=this.makeSegmentKey(t);this.selectedPointKeys[r]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(r=>{Mc.forEach(i=>{const{x:a,y:n}=r[i];t.push({x:a,y:n,key:i,index:r.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:r.x,y:r.y,key:e,index:t}):this.select(...this.selectedPointList.filter(i=>i.key!==e||i.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)&&this.select({x:r.x,y:r.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var r;var t=(r=this.points[e.index])==null?void 0:r[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var r=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[r]}commitTransformMatrix(e,t){var r=Ze([],[e.x,e.y,0],t);return{x:r[0],y:r[1]}}transformMat4(e){this.transformPoints.forEach((t,r)=>{var i=this.points[r];Object.assign(i.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(i.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(i.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:r,width:i,height:a}=this.transformRect,n=Vt();switch(kt(n,n,[t,r,0]),e){case"flipX":li(n,n,[-1,1,1]),kt(n,n,[-i,0,0]);break;case"flipY":li(n,n,[1,-1,1]),kt(n,n,[0,-a,0]);break;case"flip":li(n,n,[-1,-1,1]),kt(n,n,[-i,-a,0]);break}kt(n,n,[-t,-r,0]),this.transformMat4(n)}initTransform(e){this.transformRect=be(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:be(t.startPoint),endPoint:be(t.endPoint),reversePoint:be(t.reversePoint)}))}setConnectedPoint(e,t){var r=this.state,i=r.dragXY.x+e,a=r.dragXY.y+t,n={x:i,y:a},o={x:i,y:a};r.dragPoints&&(r.reversePoint=W.getReversePoint(r.startPoint,n));var l={startPoint:r.startPoint,endPoint:n,curve:!!r.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=be(e),r=be(e),i={startPoint:e,endPoint:t,curve:!1,reversePoint:r,connected:!1,close:!1};this.points.push(i)}getPrevPoint(e){return W.getPrevPoint(this.points,e)}getIndexPoint(e){return W.getIndexPoint(this.points,e)}getNextPoint(e){return W.getNextPoint(this.points,e)}getConnectedPointList(e){return W.getConnectedPointList(this.points,e)}isFirst(e){return W.isFirst(e)}getLastPoint(e){return W.getLastPoint(this.points,e)}setCachePoint(e,t){var r=this.state;this.snapPointList=[],this.selectedIndex=e,r.connectedPoint=this.getPrevPoint(e),r.connectedPointList=be(W.getConnectedPointList(this.points,this.selectedIndex)),r.connectedPoint&&!r.connectedPoint.connected&&(r.connectedPoint=null),r.segment=this.getIndexPoint(e),r.segment.connected&&(r.connectedPoint=this.getNextPoint(e));var i=this.isFirst(r.segment);if(i){var a=this.getLastPoint(e);a.connected&&(r.connectedPoint=a)}r.segmentKey=t,r.isCurveSegment=r.segment.curve&&r.segmentKey!="startPoint",r.originalSegment=be(r.segment),r.connectedPoint&&(r.originalConnectedPoint=be(r.connectedPoint)),r.cachedPoints=[],this.points.filter(n=>n&&n!=r.segment).forEach(n=>{r.cachedPoints.push(n.startPoint,n.reversePoint,n.endPoint)})}clamp(e,t,r){return Ct(t)||Ct(r)?e:Math.max(t,Math.min(r,e))}moveSegment(e,t,r,i=void 0,a=void 0,n=void 0){if(i){const h=this.points[i.index][e];h.x=this.clamp(i[e].x+t,0,a),h.y=this.clamp(i[e].y+r,0,n)}else{var o=this.state,l=o.originalSegment[e],c=o.segment[e];l&&(c.x=this.clamp(l.x+t,0,a),c.y=this.clamp(l.y+r,0,n))}}calculateToCurve(e,t,r){var i=(t.startPoint.x+r.startPoint.x)/2,a=(t.startPoint.y+r.startPoint.y)/2,n=(t.startPoint.x-i)/2,o=(t.startPoint.y-a)/2;return e.endPoint={x:e.startPoint.x+n,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-n,y:e.startPoint.y-o},{dx:n,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=be(t.startPoint),t.endPoint=be(t.startPoint),t.command==="M"){var r=W.getPrevPoint(this.points,t.index);r.connected&&(r.curve=!1,r.reversePoint=be(r.startPoint),r.endPoint=be(r.startPoint))}else{var i=this.getNextPoint(e);if(i&&i.command==="M"){var a=i;a.curve=!1,a.reversePoint=be(a.startPoint),a.endPoint=be(a.startPoint)}}else{t.curve=!0;var n=this.getPrevPoint(e),i=this.getNextPoint(e);if(i&&i.indexe&&i.command!=="M")this.calculateToCurve(t,i,n);else if(!i&&n){var o=(t.startPoint.x-n.startPoint.x)/3,l=(t.startPoint.y-n.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=W.getReversePoint(t.startPoint,t.endPoint)}else if(!n&&i){var o=(t.startPoint.x-i.startPoint.x)/3,l=(t.startPoint.y-i.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=W.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,r){var i=this.state;this.moveSegment(e,t,r);var a=e==="endPoint"?"reversePoint":"endPoint";i.segment[a]=W.getReversePoint(i.segment.startPoint,i.segment[e])}rotateSegmentTarget(e,t){var r=this.state;if(r.originalSegment&&r.segment){var{x:i,y:a}=r.originalSegment.startPoint,{x:n,y:o}=r.segment[e],{x:l,y:c}=r.originalSegment[t],{x:h,y:u}=na(ot(n-i,o-a),sr(l,c,i,a),i,a);r.segment[t]={x:h,y:u}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,u,v,i=1){var a=this.state,n=a.cachedPoints,o=a.originalSegment[e];if(!e)return{dx:u,dy:v,snapPointList:[]};var l=o.x+u,c=o.y+v,{point:h,distanceValue:u}=Wu(n,"x",l,u,i),{point:d,distanceValue:v}=Wu(n,"y",c,v,i),g={x:o.x+u,y:o.y+v},y=[];return h&&y.push({startPoint:h,endPoint:g}),d&&y.push({startPoint:d,endPoint:g}),{dx:u,dy:v,snapPointList:y}}copySegment(e,t){t.startPoint=be(e.startPoint),t.endPoint=be(e.endPoint),t.reversePoint=be(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.x=r.x+e,i.y=r.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t,r,i){this.selectedGroup.points.forEach(a=>{const n=this.points[a.index];n.startPoint.x=this.clamp(a.startPoint.x+e,0,r),n.startPoint.y=this.clamp(a.startPoint.y+t,0,i),n.endPoint.x=a.endPoint.x+e,n.endPoint.y=a.endPoint.y+t,n.reversePoint.x=a.reversePoint.x+e,n.reversePoint.y=a.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return W.getSplitedGroupList(this.points)}get groupList(){return W.getGroupList(this.points)}getGroup(e,t){return W.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(i=>i.groupIndex):(this.selectedPointList.forEach(i=>{const a=this.getGroup(t,i.index);a&&e.add(a.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.removed=!0});const e=W.splitPoints(this.points),t=W.recoverPoints(e.map(r=>r.filter(i=>!i.startPoint.removed).map(i=>(i.endPoint.removed&&(i.endPoint=be(i.startPoint)),i.reversePoint.removed&&(i.reversePoint=be(i.startPoint)),W.isEqual(i.endPoint,i.startPoint,i.reversePoint)&&(i.command="L",i.curve=!1),i))));this.points=t,this.select()}move(e,t,r,i,a){var n=this.state,{isCurveSegment:o,segmentKey:l,connectedPoint:c}=n;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t,i,a);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:h}=this.calculateSnap(l,e,t,3);if(this.snapPointList=h||[],o)if(r.altKey)this.moveSegment(l,e,t),this.rotateSegment(l);else if(r.shiftKey)this.moveSegment(l,e,t);else{this.moveSegment(l,e,t);var u=l==="endPoint"?"reversePoint":"endPoint";n.segment[u]=W.getReversePoint(n.segment.startPoint,n.segment[l])}else this.moveSegment("startPoint",e,t,null,i,a),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),r.altKey||n.connectedPointList.forEach(g=>{this.moveSegment("startPoint",e,t,g,i,a),this.moveSegment("endPoint",e,t,g),this.moveSegment("reversePoint",e,t,g)});c&&this.copySegment(n.segment,n.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t,i,a)}moveEnd(e,t){var r=this.state,i=this.points,a=r.dragXY.x+e,n=r.dragXY.y+t,o={x:a,y:n},l={x:a,y:n};r.dragPoints&&(l=W.getReversePoint(r.startPoint,o)),i.push({command:r.clickCount===0?"M":"",startPoint:r.startPoint,endPoint:o,curve:!!r.dragPoints,reversePoint:l}),r.startPoint=null,r.dragPoints=!1,r.moveXY=null}setPoint(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=W.getPoint(i,t),n=W.getPoint(i,r),o=[se(b({},a),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},se(b({},n),{reversePoint:e.second[2]})],l=W.getIndex(i,t);return i.splice(l,2,...o),this.points=i,l+1}setPointQuard(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=W.getPoint(i,t),n=W.getPoint(i,r);if(a.curve&&n.curve===!1){var o=[se(b({},a),{endPoint:a.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=W.getIndex(i,t);i.splice(l,1,...o)}else{var o=[b({},a),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},se(b({},n),{reversePoint:e.second[1],curve:!0})],l=W.getIndex(i,t);i.splice(l,2,...o)}return this.points=i,l+1}setPointLine(e){var t=e.first[0],r=this.clonePoints,i=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],a=W.getIndex(r,t);return r.splice(a+1,0,...i),this.points=r,a+1}toPath(e=0,t=0,r=1){return Yu(this.clonePoints,e,t,r)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var r=Math.min(e.startPoint.x,t.startPoint.x),i=Math.max(e.startPoint.x,t.startPoint.x),a=Math.min(e.startPoint.y,t.startPoint.y),n=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:n},{x:i,y:n}).addDistanceLine({x:i,y:a},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:a},{x:r,y:n}).addDistanceLine({x:r,y:n},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(r.startPoint).L(r.endPoint).X(r.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:r,points:i},a)=>{const n=this.generatorPathString(i),o=Or(K.fromSVGString(n).getBBox());return{points:i,startPointIndex:r,groupIndex:a,center:o[4],d:n}}),t=e.length;return` - ${e.map(i=>{const{center:r}=i,[s,a]=r;return` - {const{center:i}=r,[a,n]=i;return` + ${t>1&&` - ${i.groupIndex+1} + ${r.groupIndex+1} `} `}).join("")} @@ -868,7 +873,7 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP ${this.makePathArea()} ${this.segmentManager.toString()} - `}}function Ls([n,e]){return{x:n,y:e}}function fu(n,e){function t(r){if(e[0]e[1])return e[0]-r*(e[0]-e[1])}function i(r,s,a){const o=Math.min(r,s),l=Math.max(r,s);return(a-o)/(l-o)}return r=>{if(n[0]n[1])return t(1-i(n[0],n[1],r))}}const KR=class extends ge{convertToCurve(n){this.pathGenerator.convertToCurve(n),this.renderPath(),this.updatePathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[cl("$view [data-segment]")+Qe("isEditableSegment")+St](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}[Sf("$view [data-segment]")+St+vf(300)](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}},qR=class extends KR{calculatePointOnLine(n,e){var t=new _e(n);return t.getClosedPoint(e)}[qe("$view .split-path")+at()+lt()](n){this.initRect();var e=new _e(n.$dt.attr("d")),t={x:n.xy.x-this.state.rect.x,y:n.xy.y-this.state.rect.y},i=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current&&this.updatePathLayer();return}else{if(e.segments[1].command==="C"){var r=[Ls(e.segments[0].values),Ls(e.segments[1].values.slice(0,2)),Ls(e.segments[1].values.slice(2,4)),Ls(e.segments[1].values.slice(4,6))],s=sg(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPoint(Kc(r,a))}else if(e.segments[1].command==="Q"){var r=[Ls(e.segments[0].values),Ls(e.segments[1].values.slice(0,2)),Ls(e.segments[1].values.slice(2,4))],s=ag(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointQuard(qc(r,a))}else if(e.segments[1].command==="L"){var r=[Ls(e.segments[0].values),Ls(e.segments[1].values.slice(0,2))],s=og(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointLine(Zc(r,a)),n.altKey&&this.pathGenerator.convertToCurve(i)}this.renderPath(),this.updatePathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(i,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",i)}}};class ZR extends qR{initialize(){super.initialize(),this.pathParser=new _e,this.pathGenerator=new YR(this)}initState(){return{domain:this.props.domain||[0,1],range:this.props.range||[1,0],isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}template(){return` + `}}function _i([s,e]){return{x:s,y:e}}function zo(s,e){function t(i){if(e[0]e[1])return e[0]-i*(e[0]-e[1])}function r(i,a,n){const o=Math.min(i,a),l=Math.max(i,a);return(n-o)/(l-o)}return i=>{if(s[0]s[1])return t(1-r(s[0],s[1],i))}}const wC=class extends Y{convertToCurve(s){this.pathGenerator.convertToCurve(s),this.renderPath(),this.updatePathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[ia("$view [data-segment]")+fe("isEditableSegment")+Ve](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}[Il("$view [data-segment]")+Ve+wl(300)](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}},CC=class extends wC{calculatePointOnLine(s,e){var t=new K(s);return t.getClosedPoint(e)}[me("$view .split-path")+xe()+Se()](s){this.initRect();var e=new K(s.$dt.attr("d")),t={x:s.xy.x-this.state.rect.x,y:s.xy.y-this.state.rect.y},r=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current&&this.updatePathLayer();return}else{if(e.segments[1].command==="C"){var i=[_i(e.segments[0].values),_i(e.segments[1].values.slice(0,2)),_i(e.segments[1].values.slice(2,4)),_i(e.segments[1].values.slice(4,6))],a=pc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPoint(Ja(i,n))}else if(e.segments[1].command==="Q"){var i=[_i(e.segments[0].values),_i(e.segments[1].values.slice(0,2)),_i(e.segments[1].values.slice(2,4))],a=gc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointQuard(en(i,n))}else if(e.segments[1].command==="L"){var i=[_i(e.segments[0].values),_i(e.segments[1].values.slice(0,2))],a=fc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointLine(tn(i,n)),s.altKey&&this.pathGenerator.convertToCurve(r)}this.renderPath(),this.updatePathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(r,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",r)}}};class TC extends CC{initialize(){super.initialize(),this.pathParser=new K,this.pathGenerator=new PC(this)}initState(){return{domain:this.props.domain||[0,1],range:this.props.range||[1,0],isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}template(){return`
      @@ -888,20 +893,20 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      -
      `}[$e("$el")](){return{style:{height:y.px(this.props.height)||200}}}initRect(e=!1){(!this.state.rect||e||this.state.rect.width==0||this.state.rect.height==0)&&(this.state.rect=this.refs.$view.rect())}[U("PathEditorDone")](){this.updatePathLayer()}[Pr()+ra](){this.trigger("PathEditorDone")}[Pr()+ll](){this.state.current&&this.updatePathLayer()}[Pr()+v0](){console.log("delete")}[Pr("$el .segment")](e){const t=+e.$dt.data("index");switch(console.log(t),e.code){case"Delete":case"Backspace":this.trigger("deleteSegment");break}}[Me("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[Me("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}recoverAreaToPath(e){this.initRect(!0);var t=new _e(e);return t.scaleFunc(this.state.domainScaleInvert,this.state.rangeScaleInvert),t.d}updatePathLayer(){var{d:e}=this.pathGenerator.toPath();const t=this.recoverAreaToPath(e);this.parent.trigger(this.props.onchange,this.state.key,t)}changeMode(e,t){this.setState(P({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[])}isMode(e){return this.state.mode===e}convertPathToArea(e){this.initRect(!0);const t=this.state.rect.width,i=this.state.rect.height;this.state.domainScale=fu([0,1],[0,t]),this.state.rangeScale=fu([1,0],[0,i]),this.state.domainScaleInvert=fu([0,t],[0,1]),this.state.rangeScaleInvert=fu([0,i],[1,0]),this.pathParser.reset(e.d).scaleFunc(this.state.domainScale,this.state.rangeScale)}refreshEditorView(e){this.convertPathToArea(e),this.pathGenerator.setPoints(this.pathParser.convertGenerator()),this.renderPath()}afterRender(){const{mode:e,value:t}=this.props,i={d:t};e==="move"&&(i.current=null,i.points=[]),this.changeMode(e,i),window.setTimeout(()=>{this.refreshEditorView(i,!0)},10)}[$e("$view")](){var i;const e=this.pathGenerator.makeSVGPath(),t=y.parse((i=this.state.current)==null?void 0:i["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[$e("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}renderPath(){this.bindData("$view")}get checkDistance(){return!1}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Zi(_e.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[lo("$view")+St](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=Ze.create(e.target),i=t.hasClass("split-path");i?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[qe("$view :not(.split-path)")+St+Bn+at()+lt()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y};var i=Ze.create(e.target);if(this.$segmentTarget=i,i.hasClass("svg-editor-canvas")&&!t||(this.pathGenerator.reselect(),this.state.isSegment=i.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&i.attr("data-is-first")==="true",this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1),t){if(this.state.isFirstSegment){var r=+i.attr("data-index");this.state.startPoint=this.pathGenerator.points[r].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[r,s]=i.attrs("data-index","data-segment-point");const o=+r;this.pathGenerator.setCachePoint(o,s),this.pathGenerator.selectKeyIndex(s,o),this.state.segmentKey=s,this.renderPath()}}move(e,t){const i=this.$config.get("bodyEvent");if(this.state.segmentKey==="startPoint"){const r={x:Math.max(0,Math.min(this.state.rect.width,i.xy.x-this.state.rect.x)),y:Math.max(0,Math.min(this.state.rect.height,i.xy.y-this.state.rect.y))};e=r.x-this.state.dragXY.x,t=r.y-this.state.dragXY.y}this.isMode("segment-move")?(this.pathGenerator.move(e,t,i,this.state.rect.width,this.state.rect.height),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&Rr(e,t,0,0)>=2&&(this.state.dragPoints=!i.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),Ue(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){this.$config.set("set.move.control.point",!1),this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current&&this.updatePathLayer()):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}}var yie="";class JR extends ge{initState(){var e=new _e(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=e.$(".command"),i=t.attr("data-command");if(i==="Z"&&t.attr("data-toggle")==="false")return null;var r=e.$$(".values input[type=number]").map(s=>+s.value);return{command:i,values:r}}).filter(e=>e)}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPathData()}modifyPathData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new _e(e)})}getValue(){return this.state.parser.joinPath()}template(){return` + `}[ne("$el")](){return{style:{height:p.px(this.props.height)||200}}}initRect(e=!1){(!this.state.rect||e||this.state.rect.width==0||this.state.rect.height==0)&&(this.state.rect=this.refs.$view.rect())}[M("PathEditorDone")](){this.updatePathLayer()}[er()+Di](){this.trigger("PathEditorDone")}[er()+ra](){this.state.current&&this.updatePathLayer()}[er()+rd](){console.log("delete")}[er("$el .segment")](e){const t=+e.$dt.data("index");switch(console.log(t),e.code){case"Delete":case"Backspace":this.trigger("deleteSegment");break}}[Z("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[Z("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}recoverAreaToPath(e){this.initRect(!0);var t=new K(e);return t.scaleFunc(this.state.domainScaleInvert,this.state.rangeScaleInvert),t.d}updatePathLayer(){var{d:e}=this.pathGenerator.toPath();const t=this.recoverAreaToPath(e);this.parent.trigger(this.props.onchange,this.state.key,t)}changeMode(e,t){this.setState(b({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[])}isMode(e){return this.state.mode===e}convertPathToArea(e){this.initRect(!0);const t=this.state.rect.width,r=this.state.rect.height;this.state.domainScale=zo([0,1],[0,t]),this.state.rangeScale=zo([1,0],[0,r]),this.state.domainScaleInvert=zo([0,t],[0,1]),this.state.rangeScaleInvert=zo([0,r],[1,0]),this.pathParser.reset(e.d).scaleFunc(this.state.domainScale,this.state.rangeScale)}refreshEditorView(e){this.convertPathToArea(e),this.pathGenerator.setPoints(this.pathParser.convertGenerator()),this.renderPath()}afterRender(){const{mode:e,value:t}=this.props,r={d:t};e==="move"&&(r.current=null,r.points=[]),this.changeMode(e,r),window.setTimeout(()=>{this.refreshEditorView(r,!0)},10)}[ne("$view")](){var r;const e=this.pathGenerator.makeSVGPath(),t=p.parse((r=this.state.current)==null?void 0:r["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[ne("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}renderPath(){this.bindData("$view")}get checkDistance(){return!1}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Rt(K.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[Ps("$view")+Ve](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=ge.create(e.target),r=t.hasClass("split-path");r?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[me("$view :not(.split-path)")+Ve+Wr+xe()+Se()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y};var r=ge.create(e.target);if(this.$segmentTarget=r,r.hasClass("svg-editor-canvas")&&!t||(this.pathGenerator.reselect(),this.state.isSegment=r.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&r.attr("data-is-first")==="true",this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1),t){if(this.state.isFirstSegment){var i=+r.attr("data-index");this.state.startPoint=this.pathGenerator.points[i].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[i,a]=r.attrs("data-index","data-segment-point");const o=+i;this.pathGenerator.setCachePoint(o,a),this.pathGenerator.selectKeyIndex(a,o),this.state.segmentKey=a,this.renderPath()}}move(e,t){const r=this.$config.get("bodyEvent");if(this.state.segmentKey==="startPoint"){const i={x:Math.max(0,Math.min(this.state.rect.width,r.xy.x-this.state.rect.x)),y:Math.max(0,Math.min(this.state.rect.height,r.xy.y-this.state.rect.y))};e=i.x-this.state.dragXY.x,t=i.y-this.state.dragXY.y}this.isMode("segment-move")?(this.pathGenerator.move(e,t,r,this.state.rect.width,this.state.rect.height),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&sr(e,t,0,0)>=2&&(this.state.dragPoints=!r.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),de(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){this.$config.set("set.move.control.point",!1),this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current&&this.updatePathLayer()):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}}var uD="";class kC extends Y{initState(){var e=new K(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=e.$(".command"),r=t.attr("data-command");if(r==="Z"&&t.attr("data-toggle")==="false")return null;var i=e.$$(".values input[type=number]").map(a=>+a.value);return{command:r,values:i}}).filter(e=>e)}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPathData()}modifyPathData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new K(e)})}getValue(){return this.state.parser.joinPath()}template(){return`
      - `}[ve("$data")](){var e=[];this.state.parser.segments.forEach((r,s)=>{var a=P({},r);e.push(a);var o=this.state.parser.segments[s+1];o&&o.command==="M"&&(a.command!=="Z"?e.push({command:"Z",toggle:!1,values:[]}):a.toggle=!0)});var t=this.state.parser.segments[this.state.parser.segments.length-1];t&&t.command!=="Z"&&e.push({command:"Z",toggle:!1,values:[]});var i=e.map(r=>{var s=r.command==="M"?"m":"";return` -
      -
      ${r.command}
      + `}[G("$data")](){var e=[];this.state.parser.segments.forEach((i,a)=>{var n=b({},i);e.push(n);var o=this.state.parser.segments[a+1];o&&o.command==="M"&&(n.command!=="Z"?e.push({command:"Z",toggle:!1,values:[]}):n.toggle=!0)});var t=this.state.parser.segments[this.state.parser.segments.length-1];t&&t.command!=="Z"&&e.push({command:"Z",toggle:!1,values:[]});var r=e.map(i=>{var a=i.command==="M"?"m":"";return` +
      +
      ${i.command}
      - ${r.values.map(a=>``).join("")} + ${i.values.map(n=>``).join("")} - ${r.command==="Z"?r.toggle===!1?"opened":"closed":""} + ${i.command==="Z"?i.toggle===!1?"opened":"closed":""}
      - `});return i.unshift(` + `});return r.unshift(`
      @@ -909,38 +914,38 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP Y
      - `),i}[fi("$data input[type=number]")+Ft(300)](){this.updateData()}[se("$data .command[data-toggle]")](e){var[t,i]=e.$dt.attrs("data-command","data-toggle");t==="Z"&&(i!=="false"?i="false":i="true",e.$dt.attr("data-toggle",i),this.updateData())}}var bie="";const QR=/[\b\t ,]/g;class _a extends _e{constructor(e=""){super(e)}reset(e=""){this.segments=[],this.points=e,this.parse()}resetSegments(e=[]){this.segments=e,this.points=this.joinPoints()}parse(){var e=this.points;Array.isArray(e)&&(e=e.join(" "));for(var t=e.trim().split(QR).filter(a=>a),i=[],r=0,s=t.length;r`${i.x},${i.y}`).join(" ")}each(e,t=!1){var i=this.segments.map(r=>e.call(this,r));if(t)return i;this.segments=i}_loop(e,t=!1){return this.each(function(i){var[r,s]=e([i.x,i.y],0);return i.x=r,i.y=s,i},t)}clone(){return new _a(this.joinPoints())}toString(){return this.joinPoints()}}class eO extends ge{initState(){var e=new _a(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=+e.$('[data-key="x"]').value,i=+e.$('[data-key="y"]').value;return{x:t,y:i}})}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPolygonData()}modifyPolygonData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new _a(e||"")})}getValue(){return this.state.parser.joinPoints()}template(){return` + `),r}[dt("$data input[type=number]")+Ne(300)](){this.updateData()}[A("$data .command[data-toggle]")](e){var[t,r]=e.$dt.attrs("data-command","data-toggle");t==="Z"&&(r!=="false"?r="false":r="true",e.$dt.attr("data-toggle",r),this.updateData())}}var pD="";const MC=/[\b\t ,]/g;class rs extends K{constructor(e=""){super(e)}reset(e=""){this.segments=[],this.points=e,this.parse()}resetSegments(e=[]){this.segments=e,this.points=this.joinPoints()}parse(){var e=this.points;Array.isArray(e)&&(e=e.join(" "));for(var t=e.trim().split(MC).filter(n=>n),r=[],i=0,a=t.length;i`${r.x},${r.y}`).join(" ")}each(e,t=!1){var r=this.segments.map(i=>e.call(this,i));if(t)return r;this.segments=r}_loop(e,t=!1){return this.each(function(r){var[i,a]=e([r.x,r.y],0);return r.x=i,r.y=a,r},t)}clone(){return new rs(this.joinPoints())}toString(){return this.joinPoints()}}class IC extends Y{initState(){var e=new rs(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=+e.$('[data-key="x"]').value,r=+e.$('[data-key="y"]').value;return{x:t,y:r}})}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPolygonData()}modifyPolygonData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new rs(e||"")})}getValue(){return this.state.parser.joinPoints()}template(){return`
      - `}[ve("$data")](){return this.state.parser.segments.map(e=>` + `}[G("$data")](){return this.state.parser.segments.map(e=>`
      - `)}[fi("$data input[type=number]")+Ft(300)](){this.updateData()}}var xie="";class tO extends ge{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(a=>ni(a)?{value:a,text:a}:a):(this.props.options||"").split(e).map(a=>a.trim()).map(a=>{const[o,l]=a.split(":");return{value:o,text:l}}),i=this.props.icons||[],r=this.props.colors||[],s=this.props.value||"";return{label:this.props.label||"",compact:Dn(this.props.compact)?this.props.compact:this.props.compact==="true",options:t,icons:i,colors:r,value:s,height:this.props.height}}template(){var{label:e,compact:t,height:i}=this.state,r=e?"has-label":"",s=t?"compact":"",a=i?`--elf--input-height: ${i}px;`:"";return` -
      + `)}[dt("$data input[type=number]")+Ne(300)](){this.updateData()}}var gD="";class EC extends Y{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(n=>it(n)?{value:n,text:n}:n):(this.props.options||"").split(e).map(n=>n.trim()).map(n=>{const[o,l]=n.split(":");return{value:o,text:l}}),r=this.props.icons||[],i=this.props.colors||[],a=this.props.value||"";return{label:this.props.label||"",compact:ai(this.props.compact)?this.props.compact:this.props.compact==="true",options:t,icons:r,colors:i,value:a,height:this.props.height}}template(){var{label:e,compact:t,height:r}=this.state,i=e?"has-label":"",a=t?"compact":"",n=r?`--elf--input-height: ${r}px;`:"";return` +
      ${e?``:""} -
      +
      - `}[se("$close")](){this.updateData({value:""}),this.refresh()}getValue(){return this.state.value||""}setValue(e){this.setState({value:e})}[ve("$options")+It](){return this.state.options.map((e,t)=>{var i=e.value,r=e.text,s=e.text,a="",o=i===this.state.value,l=o?"selected":"";if(e.value===""){var r="";s="close",$t(this.state.icons[t])&&(a="icon",r=bk(),i="__blank__")}else{var c=this.state.icons[t];We[c]&&(a="icon"),s=r,r=We[c]||r||c||e.text||e.value}var h=this.state.colors[t],d={};return o&&h&&(d["background-color"]=h),`
      ${r}
      `})}[se("$options .select-icon-item")](e){var t=e.$dt.attr("data-value");!t||t==="__blank__"||(this.updateData({value:t}),this.refresh())}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var _ie="";const o1=[[10,5],[5,1],[1,5],[.9],[15,10,5],[15,10,5,10],[15,10,5,10,15],[5,5,1,5]];class iO extends ge{initState(){var e=Fi(this.props.value)?this.props.value:this.generateValue(this.props.value||"");return{label:this.props.label||"",value:e,count:1}}template(){const{label:e}=this.state,t=!!e;return` + `}[A("$close")](){this.updateData({value:""}),this.refresh()}getValue(){return this.state.value||""}setValue(e){this.setState({value:e})}[G("$options")+Ee](){return this.state.options.map((e,t)=>{var r=e.value,i=e.text,a=e.text,n="",o=r===this.state.value,l=o?"selected":"";if(e.value===""){var i="";a="close",ke(this.state.icons[t])&&(n="icon",i=WS(),r="__blank__")}else{var c=this.state.icons[t];oe[c]&&(n="icon"),a=i,i=oe[c]||i||c||e.text||e.value}var h=this.state.colors[t],u={};return o&&h&&(u["background-color"]=h),`
      ${i}
      `})}[A("$options .select-icon-item")](e){var t=e.$dt.attr("data-value");!t||t==="__blank__"||(this.updateData({value:t}),this.refresh())}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var fD="";const Ku=[[10,5],[5,1],[1,5],[.9],[15,10,5],[15,10,5,10],[15,10,5,10,15],[5,5,1,5]];class LC extends Y{initState(){var e=Gt(this.props.value)?this.props.value:this.generateValue(this.props.value||"");return{label:this.props.label||"",value:e,count:1}}template(){const{label:e}=this.state,t=!!e;return`
      ${t?``:""}
      - +
      - `}[se("$el .tools label")](){this.refs.$list.toggle()}getValue(){return this.state.value}generateValue(e){return e.split(" ").filter(Boolean).map(t=>+t)}setValue(e){Fi(e)||(e=this.generateValue(e)),this.setState({value:e})}[ve("$list")](){return o1.map((e,t)=>` + `}[A("$el .tools label")](){this.refs.$list.toggle()}getValue(){return this.state.value}generateValue(e){return e.split(" ").filter(Boolean).map(t=>+t)}setValue(e){Gt(e)||(e=this.generateValue(e)),this.setState({value:e})}[G("$list")](){return Ku.map((e,t)=>`
      @@ -948,50 +953,50 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `)}[ve("$body")](){return this.state.count++,this.state.value.map((e,t)=>{var i=t+1;return` + `)}[G("$body")](){return this.state.count++,this.state.value.map((e,t)=>{var r=t+1;return`
      - ${W("NumberInputEditor",{ref:`$dash-${this.state.count}-${i}`,compact:!0,key:t,value:e,min:0,max:100,step:1,onchange:"changeRangeEditor"})} - + ${R("NumberInputEditor",{ref:`$dash-${this.state.count}-${r}`,compact:!0,key:t,value:e,min:0,max:100,step:1,onchange:"changeRangeEditor"})} +
      - `})}[Me("changeRangeEditor")](e,t){var i=+e;this.state.value[i]=t,this.modifyStrokeDashArray()}[se("$list .dash-sample")](e){const t=o1[+e.$dt.data("index")];this.setState({value:t},!1),this.refresh(),this.modifyStrokeDashArray(),this.refs.$list.toggle()}[se("$add")](){this.setState({value:[...this.state.value,0]},!1),this.refresh(),this.modifyStrokeDashArray()}[se("$body .delete")](e){const t=+e.$dt.attr("data-index");this.state.value.splice(t,1),this.refresh(),this.modifyStrokeDashArray()}modifyStrokeDashArray(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[qe("document")](e){Ze.create(e.target).closest("elf--stroke-dasharray-editor")||this.refs.$list.hide()}}var Sie="";class rO extends ge{initState(){var e=this.props.value;return{label:this.props.label||"",height:100,value:e}}template(){var{label:e,height:t,value:i}=this.state,r=e?"has-label":"";return` -
      + `})}[Z("changeRangeEditor")](e,t){var r=+e;this.state.value[r]=t,this.modifyStrokeDashArray()}[A("$list .dash-sample")](e){const t=Ku[+e.$dt.data("index")];this.setState({value:t},!1),this.refresh(),this.modifyStrokeDashArray(),this.refs.$list.toggle()}[A("$add")](){this.setState({value:[...this.state.value,0]},!1),this.refresh(),this.modifyStrokeDashArray()}[A("$body .delete")](e){const t=+e.$dt.attr("data-index");this.state.value.splice(t,1),this.refresh(),this.modifyStrokeDashArray()}modifyStrokeDashArray(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[me("document")](e){ge.create(e.target).closest("elf--stroke-dasharray-editor")||this.refs.$list.hide()}}var mD="";class VC extends Y{initState(){var e=this.props.value;return{label:this.props.label||"",height:100,value:e}}template(){var{label:e,height:t,value:r}=this.state,i=e?"has-label":"";return` +
      ${e?``:""} - +
      - `}getValue(){return this.refs.$options.value}setValue(e,t){this.setState({value:e},!1),t&&this.setState({height:t},!1),this.refresh()}[$e("$text")](){return{text:this.state.value||"",style:{height:this.state.height}}}[fi("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}var wie="";class nO extends ge{initState(){var e=this.props.value;return{label:this.props.label||"",value:e}}template(){var{label:e,value:t}=this.state,i=e?"has-label":"";return` -
      + `}getValue(){return this.refs.$options.value}setValue(e,t){this.setState({value:e},!1),t&&this.setState({height:t},!1),this.refresh()}[ne("$text")](){return{text:this.state.value||"",style:{height:this.state.height}}}[dt("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}var vD="";class OC extends Y{initState(){var e=this.props.value;return{label:this.props.label||"",value:e}}template(){var{label:e,value:t}=this.state,r=e?"has-label":"";return` +
      ${e?``:""}
      - `}getValue(){return this.refs.$text.value}setValue(e){this.refs.$text.val(e),this.setState({value:e},!1)}[$e("$text")](){return{value:this.state.value}}[fi("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var Mie="";class Pn extends Vr{static parse(e){return new Pn(e)}static parseStyle(e=""){var t=ga(e);e=e.trim();var i=t.str.split(",").filter(r=>r.trim()).map(r=>{var s=r.trim().split(" "),a=s.filter(l=>l.includes("@")).map(l=>vl(l,t.matches)||"black"),o=s.filter(l=>!l.includes("@"));return Pn.parse({color:a[0]||"rgba(0, 0, 0, 1)",offsetX:y.parse(o[0]||"0px"),offsetY:y.parse(o[1]||"0px"),blurRadius:y.parse(o[2]||"0px")})});return i}static join(e){return e.map(t=>Pn.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"text-shadow",offsetX:"0px",offsetY:"0px",blurRadius:"0px",color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("offsetX","offsetY","blurRadius","color"))}convert(e){return e=super.convert(e),_i(e.offsetX)?e.offsetX=y.px(e.offsetX):e.offsetX&&(e.offsetX=y.parse(e.offsetX)),_i(e.offsetY)?e.offsetY=y.px(e.offsetY):e.offsetY&&(e.offsetY=y.parse(e.offsetY)),_i(e.blurRadius)?e.blurRadius=y.px(e.blurRadius):e.blurRadius&&(e.blurRadius=y.parse(e.blurRadius)),e}toCSS(){return{"text-shadow":this.toString()}}toString(){var{offsetX:e,offsetY:t,blurRadius:i,color:r}=this.json;return _i(e)&&(e=y.px(e)),_i(t)&&(t=y.px(t)),_i(i)&&(i=y.px(i)),`${e} ${t} ${i} ${r}`}}class sO extends ge{initState(){return{textShadows:Pn.parseStyle(this.props.value)}}template(){return` + `}getValue(){return this.refs.$text.value}setValue(e){this.refs.$text.val(e),this.setState({value:e},!1)}[ne("$text")](){return{value:this.state.value}}[dt("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var yD="";class zr extends or{static parse(e){return new zr(e)}static parseStyle(e=""){var t=Zi(e);e=e.trim();var r=t.str.split(",").filter(i=>i.trim()).map(i=>{var a=i.trim().split(" "),n=a.filter(l=>l.includes("@")).map(l=>ha(l,t.matches)||"black"),o=a.filter(l=>!l.includes("@"));return zr.parse({color:n[0]||"rgba(0, 0, 0, 1)",offsetX:p.parse(o[0]||"0px"),offsetY:p.parse(o[1]||"0px"),blurRadius:p.parse(o[2]||"0px")})});return r}static join(e){return e.map(t=>zr.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"text-shadow",offsetX:"0px",offsetY:"0px",blurRadius:"0px",color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("offsetX","offsetY","blurRadius","color"))}convert(e){return e=super.convert(e),ft(e.offsetX)?e.offsetX=p.px(e.offsetX):e.offsetX&&(e.offsetX=p.parse(e.offsetX)),ft(e.offsetY)?e.offsetY=p.px(e.offsetY):e.offsetY&&(e.offsetY=p.parse(e.offsetY)),ft(e.blurRadius)?e.blurRadius=p.px(e.blurRadius):e.blurRadius&&(e.blurRadius=p.parse(e.blurRadius)),e}toCSS(){return{"text-shadow":this.toString()}}toString(){var{offsetX:e,offsetY:t,blurRadius:r,color:i}=this.json;return ft(e)&&(e=p.px(e)),ft(t)&&(t=p.px(t)),ft(r)&&(r=p.px(r)),`${e} ${t} ${r} ${i}`}}class RC extends Y{initState(){return{textShadows:zr.parseStyle(this.props.value)}}template(){return`
      - `}[ve("$shadowList")](){var e=this.state.textShadows.map((t,i)=>` -
      - - ${W("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:i,onchange:"changeKeyValue"})} + `}[G("$shadowList")](){var e=this.state.textShadows.map((t,r)=>` +
      + + ${R("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:r,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:r,onchange:"changeKeyValue"})}
      -
      - `);return e.join("")}modifyTextShadow(){var e=this.state.textShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[U("add")](e=""){e?this.state.textShadows=Pn.parseStyle(e):this.state.textShadows.push(new Pn),this.refresh(),this.modifyTextShadow()}[se("$add")](){this.trigger("add")}[on("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$shadowList .shadow-item")+St](){}sortItem(e,t,i){e.splice(i+(tt.trim()).map(t=>{let[i,r]=t.split(":");return i=i.replace("--",""),{key:i,value:r}});return{hideLabel:this.props.hideLabel=="true",params:this.props.params||"",values:e}}template(){var e=this.state.hideLabel?"hide":"";return` + `);return e.join("")}modifyTextShadow(){var e=this.state.textShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e=""){e?this.state.textShadows=zr.parseStyle(e):this.state.textShadows.push(new zr),this.refresh(),this.modifyTextShadow()}[A("$add")](){this.trigger("add")}[pr("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$shadowList .shadow-item")+Ve](){}sortItem(e,t,r){e.splice(r+(tt.trim()).map(t=>{let[r,i]=t.split(":");return r=r.replace("--",""),{key:r,value:i}});return{hideLabel:this.props.hideLabel=="true",params:this.props.params||"",values:e}}template(){var e=this.state.hideLabel?"hide":"";return`
      - +
      -
      `}[U("add")](){this.state.values.push({key:"",value:""}),this.refresh(),this.updateData()}[se("$add")](){this.trigger("add")}[ve("$varList")](){return this.state.values.map((e,t)=>` +
      `}[M("add")](){this.state.values.push({key:"",value:""}),this.refresh(),this.updateData()}[A("$add")](){this.trigger("add")}[G("$varList")](){return this.state.values.map((e,t)=>`
      @@ -1001,41 +1006,41 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `)}[se("$varList .del")](e){var t=+e.$dt.attr("data-index");this.state.values.splice(t,1),this.refresh(),this.updateData()}[fi("$varList input")](e){var t=+e.$dt.attr("data-index"),i=e.$dt.attr("data-type");this.state.values[t][i]=e.$dt.value,this.updateData()}updateData(){var e=this.state.values.map(t=>`${t.key}:${t.value}`).join(";");this.parent.trigger(this.props.onchange,e,this.props.params)}}var oO={BlendSelectEditor:aA,BoxShadowEditor:NA,ColorAssetsEditor:nR,ColorSingleEditor:sR,ColorViewEditor:aR,ComponentEditor:oR,CSSPropertyEditor:lR,CubicBezierEditor:cR,DirectionEditor:hR,FilterEditor:gR,FontSelectEditor:vR,GradientEditor:VR,IconListViewEditor:DR,InputArrayEditor:FR,InputRangeEditor:NR,IterationCountEditor:BR,MediaProgressEditor:jR,NumberInputEditor:GR,NumberRangeEditor:HR,PathEditor:ZR,PathDataEditor:JR,PolygonDataEditor:eO,RangeEditor:r1,SelectEditor:Kf,SelectIconEditor:tO,StrokeDashArrayEditor:iO,TextAreaEditor:rO,TextEditor:nO,TextShadowEditor:sO,VarEditor:aO};function ch(n){n.registerElement(oO),n.registerAlias({"icon-list-view":"IconListViewEditor","box-shadow":"BoxShadowEditor","text-shadow":"TextShadowEditor",component:"ComponentEditor","text-area":"TextAreaEditor",text:"TextEditor","color-single":"ColorSingleEditor","cubic-bezier":"CubicBezierEditor",path:"PathEditor","clip-path":"ClipPathEditor","color-view":"ColorViewEditor",var:"VarEditor","path-data":"PathDataEditor","polygon-data":"PolygonDataEditor","input-array":"InputArrayEditor","stroke-dash-array":"StrokeDashArrayEditor","number-input":"NumberInputEditor","number-range":"NumberRangeEditor","media-progress":"MediaProgressEditor","select-icon":"SelectIconEditor","css-property":"CSSPropertyEditor",direction:"DirectionEditor","iteration-count":"IterationCountEditor",gradient:"GradientEditor",filter:"FilterEditor",select:"SelectEditor","blend-select":"BlendSelectEditor",range:"RangeEditor","input-range":"InputRangeEditor","color-assets":"ColorAssetsEditor","font-select":"FontSelectEditor"})}var lO=[Dc,Fc,Nc,Vc,ch,zk];class hh extends ge{template(){return` + `)}[A("$varList .del")](e){var t=+e.$dt.attr("data-index");this.state.values.splice(t,1),this.refresh(),this.updateData()}[dt("$varList input")](e){var t=+e.$dt.attr("data-index"),r=e.$dt.attr("data-type");this.state.values[t][r]=e.$dt.value,this.updateData()}updateData(){var e=this.state.values.map(t=>`${t.key}:${t.value}`).join(";");this.parent.trigger(this.props.onchange,e,this.props.params)}}var zC={BlendSelectEditor:jP,BoxShadowEditor:mw,ColorAssetsEditor:O5,ColorSingleEditor:R5,ColorViewEditor:j5,ComponentEditor:z5,CSSPropertyEditor:A5,CubicBezierEditor:D5,DirectionEditor:F5,FilterEditor:U5,FontSelectEditor:X5,GradientEditor:pC,IconListViewEditor:gC,InputArrayEditor:fC,InputRangeEditor:mC,IterationCountEditor:vC,MediaProgressEditor:yC,NumberInputEditor:bC,NumberRangeEditor:xC,PathEditor:TC,PathDataEditor:kC,PolygonDataEditor:IC,RangeEditor:Uu,SelectEditor:ic,SelectIconEditor:EC,StrokeDashArrayEditor:LC,TextAreaEditor:VC,TextEditor:OC,TextShadowEditor:RC,VarEditor:jC};function Zu(s){s.registerElement(zC),s.registerAlias({"icon-list-view":"IconListViewEditor","box-shadow":"BoxShadowEditor","text-shadow":"TextShadowEditor",component:"ComponentEditor","text-area":"TextAreaEditor",text:"TextEditor","color-single":"ColorSingleEditor","cubic-bezier":"CubicBezierEditor",path:"PathEditor","clip-path":"ClipPathEditor","color-view":"ColorViewEditor",var:"VarEditor","path-data":"PathDataEditor","polygon-data":"PolygonDataEditor","input-array":"InputArrayEditor","stroke-dash-array":"StrokeDashArrayEditor","number-input":"NumberInputEditor","number-range":"NumberRangeEditor","media-progress":"MediaProgressEditor","select-icon":"SelectIconEditor","css-property":"CSSPropertyEditor",direction:"DirectionEditor","iteration-count":"IterationCountEditor",gradient:"GradientEditor",filter:"FilterEditor",select:"SelectEditor","blend-select":"BlendSelectEditor",range:"RangeEditor","input-range":"InputRangeEditor","color-assets":"ColorAssetsEditor","font-select":"FontSelectEditor"})}var AC=[Xd,Yd,Zd,Wd,Zu,uP],xD="";class DC extends Y{template(){return C("div",{class:"elf--context-menu-manger"},this.$injectManager.generate("context.menu"))}[M(Kl)](e){this.$context.config.set("context.menu.open",e)}}class FC extends Y{template(){return` - `}[ve("$list")](){return Object.entries(We).map(([e,t])=>ni(t)===!1?"":t.replace(/\{console.log(...e)}},dO=Object.freeze(Object.defineProperty({__proto__:null,default:hO},Symbol.toStringTag,{value:"Module"})),uO={command:"history.redo",execute:function(n){n.context.history.redo()}},pO=Object.freeze(Object.defineProperty({__proto__:null,default:uO},Symbol.toStringTag,{value:"Module"})),fO={command:"history.undo",execute:function(n){n.context.history.undo()}},gO=Object.freeze(Object.defineProperty({__proto__:null,default:fO},Symbol.toStringTag,{value:"Module"})),mO={command:"keymap.keydown",execute:function(n,e){n.context.keyboardManager.add(e.code,e.keyCode,e),n.context.shortcuts&&n.context.shortcuts.execute(e,"keydown")}},vO=Object.freeze(Object.defineProperty({__proto__:null,default:mO},Symbol.toStringTag,{value:"Module"})),yO={command:"keymap.keyup",execute:function(n,e){n.context.keyboardManager.remove(e.key,e.keyCode),n.context.shortcuts&&n.context.shortcuts.execute(e,"keyup")}},bO=Object.freeze(Object.defineProperty({__proto__:null,default:yO},Symbol.toStringTag,{value:"Module"})),xO={command:"moveToCenter",description:"Move Layer to Center on Viewport",execute:function(n,e,t=!1){e&&n.context.viewport.moveToCenter(e,t?-.2:0,t)}},_O=Object.freeze(Object.defineProperty({__proto__:null,default:xO},Symbol.toStringTag,{value:"Module"})),SO={command:"pop.mode.view",execute:function(n,e=void 0){n.context.modeViewManager.popMode(e)}},wO=Object.freeze(Object.defineProperty({__proto__:null,default:SO},Symbol.toStringTag,{value:"Module"})),MO={command:"push.mode.view",execute:function(n,e=ha.CanvasView){n.context.modeViewManager.pushMode(e),n.emit("updateModeView")}},$O=Object.freeze(Object.defineProperty({__proto__:null,default:MO},Symbol.toStringTag,{value:"Module"})),PO={command:"recoverCursor",execute:function(n){n.context.config.set("editor.cursor","auto"),n.context.config.set("editor.cursor.args",[])}},TO=Object.freeze(Object.defineProperty({__proto__:null,default:PO},Symbol.toStringTag,{value:"Module"})),CO={command:"refreshCursor",execute:function(n,e,...t){n.context.config.set("editor.cursor",e),n.context.config.set("editor.cursor.args",t)}},EO=Object.freeze(Object.defineProperty({__proto__:null,default:CO},Symbol.toStringTag,{value:"Module"})),IO={command:"setLocale",execute:function(n,e){n.setLocale(e),n.emit("changed.locale")}},LO=Object.freeze(Object.defineProperty({__proto__:null,default:IO},Symbol.toStringTag,{value:"Module"})),kO={command:"toggleToolHand",execute:function(n){n.context.config.is("editing.mode",Ti.HAND)?n.context.config.set("editing.mode",Ti.SELECT):n.context.config.set("editing.mode",Ti.HAND),n.emit("hideLayerAppendView")}},AO=Object.freeze(Object.defineProperty({__proto__:null,default:kO},Symbol.toStringTag,{value:"Module"})),RO={command:"zoom.default",execute:function(n){n.context.viewport.zoomDefault()}},OO=Object.freeze(Object.defineProperty({__proto__:null,default:RO},Symbol.toStringTag,{value:"Module"})),zO={command:"zoom.in",execute:function(n){n.context.viewport.zoomIn(.02)}},VO=Object.freeze(Object.defineProperty({__proto__:null,default:zO},Symbol.toStringTag,{value:"Module"})),DO={command:"zoom.out",execute:function(n){n.context.viewport.zoomOut(.02)}},FO=Object.freeze(Object.defineProperty({__proto__:null,default:DO},Symbol.toStringTag,{value:"Module"}));const NO={"./command_list/Console.js":dO,"./command_list/history.redo.js":pO,"./command_list/history.undo.js":gO,"./command_list/keymap.keydown.js":vO,"./command_list/keymap.keyup.js":bO,"./command_list/moveToCenter.js":_O,"./command_list/pop.mode.view.js":wO,"./command_list/push.mode.view.js":$O,"./command_list/recoverCursor.js":TO,"./command_list/refreshCursor.js":EO,"./command_list/setLocale.js":LO,"./command_list/toggle.tool.hand.js":AO,"./command_list/zoom.default.js":OO,"./command_list/zoom.in.js":VO,"./command_list/zoom.out.js":FO},l1={};Object.entries(NO).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),l1[n]=e.default});class uh{static parse(e,t=!1){var[,i]=e.split("data:"),[r,...s]=i.split(","),[a,o]=r.split(";");return s=s.join(","),{mimeType:a,local:t&&uh.getLink(a,o,s)}}static getLink(e,t,i){if(t==="base64"){for(var r=window.atob(i),s=r.length,a=new window.Uint8Array(s),o=0;o{r.images.forEach(s=>{i[`#${s.id}`]=s})}),Object.keys(i).map(r=>{var s=i[r],a=uh.parse(s.original,!0);s.local=a.local}),t.forEach(r=>{r.layers=this.applyAsset(r.layers,i)}),t}applyAsset(e,t){return Array.isArray(e)?e=e.map(i=>this.applyAsset(i,t)):Fn(e)?Object.keys(e).forEach(i=>{e[i]=this.applyAsset(e[i],t)}):ni(e)&&Object.keys(t).forEach(i=>{var r=t[i];e.indexOf(`#${r.id}`)>-1&&(e=e.replace(new RegExp(`#${r.id}`,"g"),r.local))}),e}}class jO{constructor(e){this.editor=e,this.commands=[]}log(){console.log(this.commands)}emit(...e){this.commands.push(e)}run(){this.editor.emit(this.commands)}add(e){this.commands=this.commands.concat(e.commands)}}class GO{constructor(e){return this.$editor=e,this.promiseProxy=this.localCommands={},this.loadCommands(),new Proxy(this,{get:(t,i)=>{var r=t[i];return Ue(r)?(...s)=>r.apply(t,s):this.makePromiseEvent(i)}})}loadCommands(e={}){Object.keys(e).forEach(t=>{Ue(e[t])?this.registerCommand(t,e[t]):this.registerCommand(e[t])})}registerCommand(e,t){if(this.localCommands[e])throw new Error(`command ${e} is already registered`);if(arguments.length===2){const i=(...r)=>{const s=t.call(this,this.$editor,...r);return this.$editor.debug("command execute",this,...r),s};i.source=e,this.localCommands[e]=i}else if(Fn(e)){const i=(...r)=>{const s=e.execute.call(e,this.$editor,...r);return this.$editor.debug("command execute",e,...r),s};i.source=e.command,this.localCommands[e.command]=i}}getCallback(e){return this.localCommands[e]}makePromiseEvent(e){const t=this.getCallback(e);if(t)return(...i)=>new Promise(r=>{r(t(...i))})}executeCommand(e,t,...i){return this.$editor.context.stateManager.isPointerUp?(e=`history.${e}`,this.getCallback(e)(t,...i)):this.emit(e,...i)}emit(e,...t){const i=this.getCallback(e);if(i)return i(...t)}}class HO{constructor(e){this.editor=e,this.components={},this.inspectors={}}registerComponent(e,t){this.components[e]=t}registerInspector(e,t){this.inspectors[e]=t}isComponentClass(e){return!!this.getComponentClass(e)}getComponentClass(e){return this.components[e]||this.components.rect}getInspector(e){return this.inspectors[e]}createComponent(e,t={}){var i=this.getComponentClass(e);if(!i){console.warn(`${e} type is not valid.`);return}return new i(t)}createInspector(e,t=""){const i=this.getInspector(t||e.itemType);return Ue(i)?i(e)||[]:Ue(e.getProps)?e.getProps()||[]:[]}}class UO{constructor(e){this.editor=e,this.configList=[],this.config=new Map}load(){const e=this.editor.loadItem("config")||{};Object.keys(e).forEach(t=>{this.config.set(t,e[t])})}get(e){var t;return this.config.has(e)===!1&&this.config.set(e,(t=this.configList.find(i=>i.key==e))==null?void 0:t.defaultValue),this.config.get(e)}set(e,t,i=!0){const r=this.config.get(e);r!==t&&(this.config.set(e,t),this.editor.emit("config:"+e,t,r),i&&this.save())}push(e,t){const r=this.get(e).length;return this.setIndexValue(e,r,t),r}setIndexValue(e,t,i){const r=this.get(e);r[t]=i,this.set(e,[...r])}getIndexValue(e,t){return this.get(e)[t]}removeByIndex(e,t){const i=this.get(e);i.splice(t,1),this.set(e,[...i])}init(e,t){this.set(e,t,!1)}save(){const e={};this.configList.filter(t=>t.storage!=="none").forEach(t=>{e[t.key]=this.get(t.key)}),this.editor.saveItem("config",e)}setAll(e){Object.keys(e).forEach(t=>{this.set(t,e[t])})}getType(e){var t;return(t=this.configList.find(i=>i.key==e))==null?void 0:t.type}isType(e,t){return this.getType(e)===t}isBoolean(e){return this.isType(e,"boolean")}toggle(e){this.set(e,!this.get(e))}toggleWith(e,t,i){this.get(e)===t?this.set(e,i):this.set(e,t)}true(e){return this.get(e)===!0}false(e){return this.get(e)===!1}is(e,t){return this.get(e)===t}remove(e){this.config.delete(e),this.editor.emit("config:"+e)}registerConfig(e){this.config.set(e.key,e.defaultValue),this.configList.push(e)}}class WO{async load(e="default",...t){if(We[e]){const i=Ue(We[e])?We[e].call(We[e],...t):We[e],r=new window.Blob([i],{type:"image/svg+xml"});return new Promise(s=>{const a=new window.FileReader;a.onload=o=>{const l=o.target.result;s(`url(${l}) 12 12, auto`)},a.readAsDataURL(r)})}else return e}}class XO{constructor(e){this.editor=e,this.locales={},this.fallbackLang="en_US"}getLang(e=void 0){return e||this.fallbackLang}setFallbackLang(e){this.fallbackLang=e}get(e,t={},i=void 0){var a,o;const r=this.getLang(i),s=((a=this.locales[r])==null?void 0:a[e])||((o=this.locales[this.fallbackLang])==null?void 0:o[e])||e||void 0;if(Ue(s))return s(t);{let l=s;return e===l?e.split(".").pop():(Object.entries(t).forEach(([c,h])=>{l=l.replace(new RegExp(`{${c}}`,"ig"),h)}),l)}}hasKey(e,t=void 0){const i=this.getLang(t);return!!(this.locales[i][e]||this.locales[this.fallbackLang][e])}registerI18nMessage(e,t){this.locales[e]||(this.locales[e]={}),Object.assign(this.locales[e],t)}}class YO{constructor(e){this.editor=e,this.iconMap={}}get(e,t){const i=this.iconMap[e];return Ue(i)?i(t):re(i||t.getIcon()||"rect")}set(e,t){this.iconMap[e]=t}registerIcon(e,t){this.set(e,t)}}class KO{constructor(e){this.editor=e,this.ui={}}registerUI(e,t={},i=1){this.ui[e]||(this.ui[e]=[]),Object.keys(t).forEach(r=>{const s=this.ui[e].find(a=>a.refClass===r);s?s.class=t[r]:this.ui[e].push({refClass:r,order:i,class:t[r]})})}getTargetUI(e){return this.ui[e]||[]}generate(e,t=!1){const i=this.getTargetUI(e);return i.sort((r,s)=>r.order===s.order?0:r.order>s.order?1:-1),i.map((r,s)=>{if(Fi(r.class))return D(...r.class);{const a={};return t&&(a.ref=`$${r.refClass}-${s}`),W(r.refClass,a)}}).join(` -`)}}class qO{constructor(e){this.editor=e,this.codeSet=new Set,this.keyCodeSet=new Set,this.event={}}add(e,t,i){this.codeSet.has(e)===!1&&this.codeSet.add(e),this.keyCodeSet.has(t)===!1&&this.keyCodeSet.add(t),this.event=i}remove(e,t){this.codeSet.delete(e),this.keyCodeSet.delete(t)}hasKey(e){return this.codeSet.has(e)||this.keyCodeSet.has(e)}check(...e){return e.some(t=>this.hasKey(t))}isShift(){return Boolean(this.event.shiftKey)}isCtrl(){return Boolean(this.event.ctrlKey)}isAlt(){return Boolean(this.event.altKey)}isMeta(){return Boolean(this.event.metaKey)}}class ZO{constructor(e){this.editor=e,this.menus={}}registerMenu(e,t=[],i=1){this.menus[e]||(this.menus[e]=[]),Fi(t)||(t=[t]),t.forEach(r=>{this.menus[e].push(r)}),this.editor.emit("updateMenu",e)}getTargetMenu(e){return this.menus[e]||[]}}class JO{constructor(e){this.editor=e,this.modes=[ha.CanvasView]}pushMode(e){this.isCurrentMode(e)||this.modes.push(e)}popMode(e=void 0){e?this.isCurrentMode(e)&&this.modes.pop():this.modes.pop()}currentMode(){return this.modes[this.modes.length-1]}isCurrentMode(e){return this.currentMode()===e}}class QO{constructor(e){this.editor=e,this.plugins=[]}registerPlugin(e){this.plugins.push(e)}async initializePlugin(e={}){return await Promise.all(this.plugins.map(async t=>await t(this.editor,e)))}}class ez{constructor(e){this.editor=e,this.renderers={},this.rendererTypes={}}getRenderType(e){return this.renderers[e]||(this.renderers[e]={}),this.renderers[e]}registerRenderer(e,t,i){const r=this.getRenderType(e);r[t]=i}registerRendererType(e,t){this.rendererTypes[e]=t}getRenderer(e){return this.rendererTypes[e]}getRendererInstance(e,t){return this.getRenderType(e)[t]}}var tz={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"CanvasView"},iz=Object.freeze(Object.defineProperty({__proto__:null,default:tz},Symbol.toStringTag,{value:"Module"})),rz={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"LayerAppendView"},nz=Object.freeze(Object.defineProperty({__proto__:null,default:rz},Symbol.toStringTag,{value:"Module"})),sz={category:"Tool",key:"b",command:"addLayerView",args:["brush"],description:"Draw SVG Path",when:"CanvasView"},az=Object.freeze(Object.defineProperty({__proto__:null,default:sz},Symbol.toStringTag,{value:"Module"})),oz={category:"Tool",key:"o",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},lz=Object.freeze(Object.defineProperty({__proto__:null,default:oz},Symbol.toStringTag,{value:"Module"})),cz={category:"Tool",key:"l",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},hz=Object.freeze(Object.defineProperty({__proto__:null,default:cz},Symbol.toStringTag,{value:"Module"})),dz={category:"Tool",key:"p",command:"addLayerView",args:["path"],description:"Add SVG Path layer",when:"CanvasView"},uz=Object.freeze(Object.defineProperty({__proto__:null,default:dz},Symbol.toStringTag,{value:"Module"})),pz={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"CanvasView"},fz=Object.freeze(Object.defineProperty({__proto__:null,default:pz},Symbol.toStringTag,{value:"Module"})),gz={category:"Tool",key:"m",command:"addLayerView",args:["rect"],description:"Add rect layer",when:"CanvasView"},mz=Object.freeze(Object.defineProperty({__proto__:null,default:gz},Symbol.toStringTag,{value:"Module"})),vz={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"LayerAppendView"},yz=Object.freeze(Object.defineProperty({__proto__:null,default:vz},Symbol.toStringTag,{value:"Module"})),bz={category:"Tool",key:"t",command:"addLayerView",args:["text"],description:"Add text layer",when:"CanvasView"},xz=Object.freeze(Object.defineProperty({__proto__:null,default:bz},Symbol.toStringTag,{value:"Module"})),_z={category:"Edit",key:"cmd+c",command:"clipboard.copy",description:"Copy objects",when:"CanvasView"},Sz=Object.freeze(Object.defineProperty({__proto__:null,default:_z},Symbol.toStringTag,{value:"Module"})),wz={category:"Edit",key:"cmd+v",win:"ctrl+v",command:"clipboard.paste",description:"Paste selected objects",when:"CanvasView"},Mz=Object.freeze(Object.defineProperty({__proto__:null,default:wz},Symbol.toStringTag,{value:"Module"})),$z={category:"Tool",key:"escape",command:"select.none",description:"None selection",when:"CanvasView"},Pz=Object.freeze(Object.defineProperty({__proto__:null,default:$z},Symbol.toStringTag,{value:"Module"})),Tz={category:"Group",key:"cmd+g",win:"ctrl+g",command:"group.item",description:"Grouping selected items",when:"CanvasView"},Cz=Object.freeze(Object.defineProperty({__proto__:null,default:Tz},Symbol.toStringTag,{value:"Module"})),Ez={category:"History",key:"cmd+shift+z",win:"ctrl+shift+z",command:"history.redo",description:"redoing in history",when:"CanvasView"},Iz=Object.freeze(Object.defineProperty({__proto__:null,default:Ez},Symbol.toStringTag,{value:"Module"})),Lz={category:"History",key:"cmd+z",win:"ctrl+z",command:"history.undo",description:"undoing in history",when:"CanvasView"},kz=Object.freeze(Object.defineProperty({__proto__:null,default:Lz},Symbol.toStringTag,{value:"Module"})),Az={category:"Layer",key:"Alt+ArrowDown",command:"moveLayer",description:"move 5px to down",args:[0,5],when:"CanvasView"},Rz=Object.freeze(Object.defineProperty({__proto__:null,default:Az},Symbol.toStringTag,{value:"Module"})),Oz={category:"Layer",key:"Alt+ArrowLeft",command:"moveLayer",description:"move 5px to left",args:[-5,0],when:"CanvasView"},zz=Object.freeze(Object.defineProperty({__proto__:null,default:Oz},Symbol.toStringTag,{value:"Module"})),Vz={category:"Layer",key:"Alt+ArrowRight",command:"moveLayer",description:"move 5px to right",args:[5,0],when:"CanvasView"},Dz=Object.freeze(Object.defineProperty({__proto__:null,default:Vz},Symbol.toStringTag,{value:"Module"})),Fz={category:"Layer",key:"Alt+ArrowUp",command:"moveLayer",description:"move 5px to up",args:[0,-5],when:"CanvasView"},Nz=Object.freeze(Object.defineProperty({__proto__:null,default:Fz},Symbol.toStringTag,{value:"Module"})),Bz={category:"Layer",key:"[",command:"history.send.backward",description:"move layer to below",args:["send backward"],when:"CanvasView"},jz=Object.freeze(Object.defineProperty({__proto__:null,default:Bz},Symbol.toStringTag,{value:"Module"})),Gz={category:"Layer",key:"]",command:"history.bring.forward",description:"move layer to above",args:["bring forward"],when:"CanvasView"},Hz=Object.freeze(Object.defineProperty({__proto__:null,default:Gz},Symbol.toStringTag,{value:"Module"})),Uz={category:"Layer",key:"ArrowDown",command:"moveLayer",description:"move 1px to down",args:[0,1],when:"CanvasView"},Wz=Object.freeze(Object.defineProperty({__proto__:null,default:Uz},Symbol.toStringTag,{value:"Module"})),Xz={category:"Layer",key:"ArrowLeft",command:"moveLayer",description:"move 1px to left",args:[-1,0],when:"CanvasView"},Yz=Object.freeze(Object.defineProperty({__proto__:null,default:Xz},Symbol.toStringTag,{value:"Module"})),Kz={category:"Layer",key:"ArrowRight",command:"moveLayer",description:"move 1px to right",args:[1,0],when:"CanvasView"},qz=Object.freeze(Object.defineProperty({__proto__:null,default:Kz},Symbol.toStringTag,{value:"Module"})),Zz={category:"Layer",key:"ArrowUp",command:"moveLayer",description:"move 1px to up",args:[0,-1],when:"CanvasView"},Jz=Object.freeze(Object.defineProperty({__proto__:null,default:Zz},Symbol.toStringTag,{value:"Module"})),Qz={category:"Layer",key:"Shift+ArrowDown",command:"moveLayer",description:"move 10px to down",args:[0,10],when:"CanvasView"},eV=Object.freeze(Object.defineProperty({__proto__:null,default:Qz},Symbol.toStringTag,{value:"Module"})),tV={category:"Layer",key:"Shift+ArrowLeft",command:"moveLayer",description:"move 10px to left",args:[-10,0],when:"CanvasView"},iV=Object.freeze(Object.defineProperty({__proto__:null,default:tV},Symbol.toStringTag,{value:"Module"})),rV={category:"Layer",key:"Shift+ArrowRight",command:"moveLayer",description:"move 10px to right",args:[10,0],when:"CanvasView"},nV=Object.freeze(Object.defineProperty({__proto__:null,default:rV},Symbol.toStringTag,{value:"Module"})),sV={category:"Layer",key:"Shift+ArrowUp",command:"moveLayer",description:"move 10px to up",args:[0,-10],when:"CanvasView"},aV=Object.freeze(Object.defineProperty({__proto__:null,default:sV},Symbol.toStringTag,{value:"Module"})),oV={category:"Layer",key:"Meta+ArrowLeft",command:"rotateLayer",description:"rotate to left",args:[-5],when:"CanvasView"},lV=Object.freeze(Object.defineProperty({__proto__:null,default:oV},Symbol.toStringTag,{value:"Module"})),cV={category:"Layer",key:"Meta+ArrowRight",command:"rotateLayer",description:"rotate to right",args:[5],when:"CanvasView"},hV=Object.freeze(Object.defineProperty({__proto__:null,default:cV},Symbol.toStringTag,{value:"Module"})),dV={category:"Layer",key:"Backspace",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},uV=Object.freeze(Object.defineProperty({__proto__:null,default:dV},Symbol.toStringTag,{value:"Module"})),pV={category:"Layer",key:"Delete",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},fV=Object.freeze(Object.defineProperty({__proto__:null,default:pV},Symbol.toStringTag,{value:"Module"})),gV={category:"Path",key:"Backspace",command:"segment.delete",description:"Delete selected segment",when:"PathEditorView"},mV=Object.freeze(Object.defineProperty({__proto__:null,default:gV},Symbol.toStringTag,{value:"Module"})),vV={category:"Path",key:"Alt+ArrowDown",command:"segment.move.down",description:"move 5px to down",args:[{dy:5}],when:"PathEditorView"},yV=Object.freeze(Object.defineProperty({__proto__:null,default:vV},Symbol.toStringTag,{value:"Module"})),bV={category:"Path",key:"Alt+ArrowLeft",command:"segment.move.left",description:"move 5px to left",args:[{dx:5}],when:"PathEditorView"},xV=Object.freeze(Object.defineProperty({__proto__:null,default:bV},Symbol.toStringTag,{value:"Module"})),_V={category:"Path",key:"Alt+ArrowRight",command:"segment.move.right",description:"move 5px to right",args:[{dx:5}],when:"PathEditorView"},SV=Object.freeze(Object.defineProperty({__proto__:null,default:_V},Symbol.toStringTag,{value:"Module"})),wV={category:"Path",key:"Alt+ArrowUp",command:"segment.move.up",description:"move 5px to up ",args:[{dy:5}],when:"PathEditorView"},MV=Object.freeze(Object.defineProperty({__proto__:null,default:wV},Symbol.toStringTag,{value:"Module"})),$V={category:"Path",key:"ArrowDown",command:"segment.move.down",description:"move 1px to down",args:[{dy:1}],when:"PathEditorView"},PV=Object.freeze(Object.defineProperty({__proto__:null,default:$V},Symbol.toStringTag,{value:"Module"})),TV={category:"Path",key:"ArrowLeft",command:"segment.move.left",description:"move 1px to left",args:[{dx:1}],when:"PathEditorView"},CV=Object.freeze(Object.defineProperty({__proto__:null,default:TV},Symbol.toStringTag,{value:"Module"})),EV={category:"Path",key:"ArrowRight",command:"segment.move.right",description:"move 1px to right",args:[{dx:1}],when:"PathEditorView"},IV=Object.freeze(Object.defineProperty({__proto__:null,default:EV},Symbol.toStringTag,{value:"Module"})),LV={category:"Path",key:"ArrowUp",command:"segment.move.up",description:"move 1px to up",args:[{dy:1}],when:"PathEditorView"},kV=Object.freeze(Object.defineProperty({__proto__:null,default:LV},Symbol.toStringTag,{value:"Module"})),AV={category:"Path",key:"Shift+ArrowDown",command:"segment.move.down",description:"move 10px to down",args:[{dy:10}],when:"PathEditorView"},RV=Object.freeze(Object.defineProperty({__proto__:null,default:AV},Symbol.toStringTag,{value:"Module"})),OV={category:"Path",key:"Shift+ArrowLeft",command:"segment.move.left",description:"move 10px to left",args:[{dx:10}],when:"PathEditorView"},zV=Object.freeze(Object.defineProperty({__proto__:null,default:OV},Symbol.toStringTag,{value:"Module"})),VV={category:"Path",key:"Shift+ArrowRight",command:"segment.move.right",description:"move 10px to right",args:[{dx:10}],when:"PathEditorView"},DV=Object.freeze(Object.defineProperty({__proto__:null,default:VV},Symbol.toStringTag,{value:"Module"})),FV={category:"Path",key:"Shift+ArrowUp",command:"segment.move.up",description:"move 10px to up",args:[{dy:10}],when:"PathEditorView"},NV=Object.freeze(Object.defineProperty({__proto__:null,default:FV},Symbol.toStringTag,{value:"Module"})),BV={category:"Tool",key:"CMD+A",win:"CTRL+A",command:"select.all",description:"Selection all layers"},jV=Object.freeze(Object.defineProperty({__proto__:null,default:BV},Symbol.toStringTag,{value:"Module"})),GV={category:"Tool",key:"v",command:"addLayerView",args:["select"],description:"Selection"},HV=Object.freeze(Object.defineProperty({__proto__:null,default:GV},Symbol.toStringTag,{value:"Module"})),UV={category:"Tools",key:"h",command:"toggleToolHand",description:"set hand tool on",when:"CanvasView"},WV=Object.freeze(Object.defineProperty({__proto__:null,default:UV},Symbol.toStringTag,{value:"Module"})),XV={category:"Tools",key:"h",command:"toggleToolHand",description:"set hand tool on",when:"LayerAppendView"},YV=Object.freeze(Object.defineProperty({__proto__:null,default:XV},Symbol.toStringTag,{value:"Module"})),KV={category:"Tool",key:"space",command:"showPan",description:"Show panning area",when:"CanvasView"},qV=Object.freeze(Object.defineProperty({__proto__:null,default:KV},Symbol.toStringTag,{value:"Module"})),ZV={category:"Group",key:"shift+cmd+g",win:"shift+ctrl+g",command:"ungroup.item",description:"Ungrouping selected group layer",when:"CanvasView"},JV=Object.freeze(Object.defineProperty({__proto__:null,default:ZV},Symbol.toStringTag,{value:"Module"})),QV={category:"View",key:"0",command:"zoom.default",description:"zoom by scale 1",when:"CanvasView"},eD=Object.freeze(Object.defineProperty({__proto__:null,default:QV},Symbol.toStringTag,{value:"Module"})),tD={category:"View",key:"Equal",command:"zoom.in",description:"zoom in",when:"CanvasView"},iD=Object.freeze(Object.defineProperty({__proto__:null,default:tD},Symbol.toStringTag,{value:"Module"})),rD={category:"View",key:"minus",command:"zoom.out",description:"zoom Out",when:"CanvasView"},nD=Object.freeze(Object.defineProperty({__proto__:null,default:rD},Symbol.toStringTag,{value:"Module"})),Sg=Object.values({"./shortcuts_list/add.artboard.js":iz,"./shortcuts_list/add.artboard.pan.js":nz,"./shortcuts_list/add.brush.js":az,"./shortcuts_list/add.circle.js":lz,"./shortcuts_list/add.circle.l.js":hz,"./shortcuts_list/add.path.js":uz,"./shortcuts_list/add.rect.js":fz,"./shortcuts_list/add.rect.m.js":mz,"./shortcuts_list/add.rect.pan.js":yz,"./shortcuts_list/add.text.js":xz,"./shortcuts_list/clipboard.copy.js":Sz,"./shortcuts_list/clipboard.paste.js":Mz,"./shortcuts_list/escape.js":Pz,"./shortcuts_list/group.item.js":Cz,"./shortcuts_list/history.redo.js":Iz,"./shortcuts_list/history.undo.js":kz,"./shortcuts_list/item.move.alt.down.js":Rz,"./shortcuts_list/item.move.alt.left.js":zz,"./shortcuts_list/item.move.alt.right.js":Dz,"./shortcuts_list/item.move.alt.up.js":Nz,"./shortcuts_list/item.move.depth.down.js":jz,"./shortcuts_list/item.move.depth.up.js":Hz,"./shortcuts_list/item.move.key.down.js":Wz,"./shortcuts_list/item.move.key.left.js":Yz,"./shortcuts_list/item.move.key.right.js":qz,"./shortcuts_list/item.move.key.up.js":Jz,"./shortcuts_list/item.move.shift.down.js":eV,"./shortcuts_list/item.move.shift.left.js":iV,"./shortcuts_list/item.move.shift.right.js":nV,"./shortcuts_list/item.move.shift.up.js":aV,"./shortcuts_list/item.rotate.meta.left.js":lV,"./shortcuts_list/item.rotate.meta.right.js":hV,"./shortcuts_list/removeLayer.js":uV,"./shortcuts_list/removeLayerByDeleteKey.js":fV,"./shortcuts_list/segment.delete.js":mV,"./shortcuts_list/segment.move.alt.down.js":yV,"./shortcuts_list/segment.move.alt.left.js":xV,"./shortcuts_list/segment.move.alt.right.js":SV,"./shortcuts_list/segment.move.alt.up.js":MV,"./shortcuts_list/segment.move.key.down.js":PV,"./shortcuts_list/segment.move.key.left.js":CV,"./shortcuts_list/segment.move.key.right.js":IV,"./shortcuts_list/segment.move.key.up.js":kV,"./shortcuts_list/segment.move.shift.down.js":RV,"./shortcuts_list/segment.move.shift.left.js":zV,"./shortcuts_list/segment.move.shift.right.js":DV,"./shortcuts_list/segment.move.shift.up.js":NV,"./shortcuts_list/select.all.js":jV,"./shortcuts_list/select.view.js":HV,"./shortcuts_list/set.tool.hand.js":WV,"./shortcuts_list/set.tool.hand.m.js":YV,"./shortcuts_list/show.pan.js":qV,"./shortcuts_list/ungroup.item.js":JV,"./shortcuts_list/zoom.default.js":eD,"./shortcuts_list/zoom.in.js":iD,"./shortcuts_list/zoom.out.js":nD}).map(n=>n.default);function gu(...n){return n.filter(Boolean).join("+")}function c1(n){return pa[`${n}`.toLowerCase()]||n}class sD{constructor(e){this.$editor=e,this.loadShortCuts()}getGeneratedKeyCode(e){return c1(e)}loadShortCuts(){this.list=[],this.commands={},Sg.forEach(e=>{this.registerShortCut(e)}),this.sort()}registerShortCut(e){const t=Bf();this.list.push(Ve(P({key:"",command:"",args:[],eventType:"keydown"},e),{checkKeyString:this.splitShortCut(e[t]||e.key),whenFunction:this.makeWhenFunction(e.command,e.when||!0)})),this.sort()}makeWhenFunction(e,t){if(Dn(t)&&t)return()=>!0;const i=this.$editor,r=t.split("|").map(s=>s.trim());return()=>r.some(s=>i.context.modeViewManager.isCurrentMode(s))}sort(){this.commands={},this.list.forEach(e=>{Array.isArray(this.commands[e.checkKeyString])===!1&&(this.commands[e.checkKeyString]=[]),this.commands[e.checkKeyString].push(e)})}splitShortCut(e){var t=e.toUpperCase().split("+").map(l=>l.trim()).filter(Boolean);let i=!1,r=!1,s=!1,a=!1,o=[];return t.forEach(l=>{l.includes("ALT")?i=!0:l.includes("CTRL")?r=!0:l.includes("SHIFT")?s=!0:l.includes("CMD")||l.includes("WIN")||l.includes("META")?a=!0:o.push(l)}),gu(i?"ALT":"",r?"CTRL":"",s?"SHIFT":"",a?"META":"",c1(o.join("")))}makeKeyString(e){return gu(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.key.toUpperCase())}makeCodeString(e){return gu(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.code.toUpperCase())}makeKeyCodeString(e){return gu(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.keyCode)}checkShortCut(e,t,i){return this.commands[e]||this.commands[t]||this.commands[i]}checkWhen(e){return e.whenFunction()}execute(e,t="keydown"){let i=this.checkShortCut(this.makeKeyCodeString(e),this.makeKeyString(e),this.makeCodeString(e));if(i){const r=i.filter(s=>s.eventType===t).filter(s=>this.checkWhen(s));r.length&&r.forEach(s=>{this.$editor.context.commands.emit(s.command,...s.args)})}}}class aD{constructor(e){this.editor=e}get config(){return this.editor.context.config}get zIndex(){return this.popupZIndex++}get isPointerUp(){const e=this.config.get("bodyEvent");return!e||e.type==="pointerup"?!0:e.type==="pointermove"&&e.buttons===0}get isPointerDown(){return!this.isPointerUp}get isPointerMove(){return this.config.get("bodyEvent")?this.config.get("bodyEvent").type==="pointermove":!1}}class oD{constructor(e){this.editor=e,this.customAssetKey="custom-assets"}async getCustomAssetList(){let e=!1;const t=(this.editor.loadItem(this.customAssetKey)||[]).map(i=>(i.id||(i.id=ho(),e=!0),i));return e&&await this.setCustomAssetList(t),t}async setCustomAssetList(e){this.editor.saveItem(this.customAssetKey,e)}async getCustomAsset(e){const i=(await this.getCustomAssetList()).find(r=>r.id===e);return i&&i.component?i.component:null}async saveCustomAsset(e=""){const t=this.editor.context.selection.current;if(t){const i=await this.getCustomAssetList(),r=await this.editor.json.render(t);r.x=0,r.y=0,await this.setCustomAssetList([...i,{id:ho(),preview:e,component:r}])}}async removeCustomAsset(e){const t=await this.getCustomAssetList();await this.setCustomAssetList(t.filter(i=>i.id!==e))}}class lD{constructor(e){this.editor=e,this.context=this.editor.context,this.canvasSize=null,this.cachedViewport=Ei(0,0,0,0),this.mouse=ps(),this.scaleMax=1e5,this.scale=1,this.translate=ps(),this.transformOrigin=ps(),this.maxScale=25,this.minScale=.02,this.zoomFactor=1,this.resetWorldMatrix()}setTransformOrigin(e){this.transformOrigin=e,this.resetWorldMatrix()}setTransformOriginWithTranslate(e){const t=vr(this.transformOrigin);this.setTransformOrigin(e),this.setTranslate(_t([],this.translate,ft([],t,e)))}setScale(e){this.scale=Math.min(Math.max(this.minScale,e),this.maxScale),this.scaleMax=this.scale*1e5,this.resetWorldMatrix()}setTranslate(e){this.translate=e,this.resetWorldMatrix()}resetWorldMatrix(){this.translate=this.translate.map(e=>+e.toFixed(4)),this.transformOrigin=this.transformOrigin.map(e=>+e.toFixed(4)),this.scale=+this.scale.toFixed(4),this.matrix=Or(Si([],this.translate),Si([],this.transformOrigin),jn([],[this.scale,this.scale,1]),Si([],Tr([],this.transformOrigin))),this.matrixInverse=ir([],this.matrix),this.scaleMatrix=Or(jn([],[this.scale,this.scale,1])),this.scaleMatrixInverse=ir([],this.scaleMatrix),this.refresh()}refreshCanvasSize(e){if(this.canvasSize){this.canvasSize=e,this.cachedViewport=Ei(0,0,this.canvasSize.width,this.canvasSize.height);const t=Kt([],[this.canvasSize.width,this.canvasSize.height,0],this.scaleMatrixInverse),i=_t([],this.verties[0],[t[0]/2,t[1]/2,0]),r=aa([],Or(this.matrix,fa(Si([],i),this.scaleMatrix,ir([],Si([],i)))));this.setTranslate(r),this.setTransformOrigin(i)}else this.canvasSize=e,this.cachedViewport=Ei(0,0,this.canvasSize.width,this.canvasSize.height),this.setTransformOrigin([this.canvasSize.width/2,this.canvasSize.height/2,0]);this.editor.emit(si)}refresh(){this.cachedViewport&&(this.verties=Xe(this.cachedViewport,this.matrixInverse),this.originVerties=this.verties.filter((e,t)=>t<4),this.originRect=Zi(this.originVerties))}getWorldPosition(e){return e=e||this.context.config.get("bodyEvent"),e?this.createWorldPosition(e.clientX,e.clientY):this.createWorldPosition(0,0)}createWorldPosition(e,t){if(!this.canvasSize)return ps();const i={x:e-this.canvasSize.x,y:t-this.canvasSize.y},r=this.verties[0][0]+(this.verties[2][0]-this.verties[0][0])*(i.x/this.canvasSize.width),s=this.verties[0][1]+(this.verties[2][1]-this.verties[0][1])*(i.y/this.canvasSize.height);return[r,s,0]}setMousePoint(e,t){this.mouse=this.createWorldPosition(e,t),this.setTransformOriginWithTranslate(Ae([],this.verties[0],this.verties[2],.5)),this.editor.emit(si)}zoom(e){const t=this.scale,i=t*e;this.setScale(i);const r=this.scale/t;this.zoomFactor=r,r!==1&&(this.setTransformOriginWithTranslate(Ae([],this.mouse,this.transformOrigin,1/e)),this.editor.emit(si))}pan(e,t,i=0){this.setTransformOriginWithTranslate(_t([],this.transformOrigin,[e,t,0])),this.editor.emit(si)}moveToCenter(e,t=-.2,i=!0){if(!this.canvasSize)return;const r=Ae([],e[0],e[2],.5),s=Ne(e[0],e[1]),a=Ne(e[0],e[3]),o=Ae([],this.verties[0],this.verties[2],.5),l=Ne(this.verties[0],this.verties[1]),c=Ne(this.verties[0],this.verties[3]),h=i?Math.min(l/s,c/a)+t:1;this.setTranslate(_t([],this.translate,ft([],o,r))),this.setTransformOrigin(r),this.setScale(this.scale*h),this.editor.emit(si)}get pos(){const e=(this.mouse[0]-this.verties[0][0])/(this.verties[2][0]-this.verties[0][0])*100,t=(this.mouse[1]-this.verties[0][1])/(this.verties[2][1]-this.verties[0][1])*100;return[e,t,0]}get minX(){return this.verties[0][0]}get maxX(){return this.verties[2][0]}get minY(){return this.verties[0][1]}get maxY(){return this.verties[2][1]}get center(){return this.verties[4]}get height(){return this.maxY-this.minY}get width(){return this.maxX-this.minX}get pixelSize(){return Math.round(this.width/this.canvasSize.width)}checkInViewport(e){const t=this.minX{const i=e[t];Object.defineProperty(this.context,t,{value:new i(this),writable:!1})})}initStorage(){this.locale=this.loadItem("locale")||"en_US",this.layout=this.loadItem("layout")||"all"}createProject(){return this.createModel({itemType:"project"})}getI18nMessage(e,t={},i){return this.context.i18n.get(e,t,i||this.locale)}$i18n(e,t={},i){return this.getI18nMessage(e,t,i)}hasI18nkey(e,t){return this.context.i18n.hasKey(e,t||this.locale)}initI18nMessage(e=""){return(t,i={},r)=>{const s=`${e}.${t}`;return this.hasI18nkey(s,r)?this.context.i18(`${e}.${t}`,i,r):this.context.i18(`${t}`,i,r)}}setLocale(e="en_US"){this.locale=e,this.saveItem("locale",this.locale)}setUser(e){this.user=e}async initPlugins(e={}){await this.context.pluginManager.initializePlugin(e)}themeValue(e,t=""){return dD[this.context.config.get("editor.theme")][e]||t}get zIndex(){return this.popupZIndex++}getFile(e){return this.images[e]||e}setStore(e){this.store=e}emit(...e){this.context.store.source=this.EDITOR_ID,this.context.store.emit(...e)}on(...e){const[t,i,r,...s]=e;return this.context.store.on(t,i,r||this,...s)}off(...e){this.context.store.off(...e)}offAll(...e){this.context.store.offAll(...e)}debug(){}command(e,t,...i){return console.warn("command",e,t,i),this.context.stateManager.isPointerUp?this.context.store.emit(`history.${e}`,t,...i):this.context.store.emit(e,...i)}nextTick(e,t=0){this.context.store&&window.setTimeout(()=>{this.context.store.nextTick(e)},t)}get(e){return this.context.modelManager.get((e==null?void 0:e.id)||e)}replaceLocalUrltoRealUrl(e){var t=this.context.selection.currentProject,i={};return t.images.forEach(r=>{e.indexOf(r.local)>-1&&(i[r.local]=r.original)}),Object.keys(i).forEach(r=>{e.indexOf(r)>-1&&(e=e.replace(new RegExp(r,"g"),i[r]))}),e}createModel(e,t=!0){return this.context.modelManager.createModel(e,t)}searchItem(e){return this.context.modelManager.searchItem(e)}get storeKey(){return`__els__.${this.context.config.get("store.key")}`}saveItem(e,t){window.localStorage.setItem(`${this.storeKey}.${e}`,JSON.stringify(t))}loadItem(e){return JSON.parse(window.localStorage.getItem(`${this.storeKey}.${e}`)||JSON.stringify(""))}createCommandMaker(){return new jO(this)}registerElement(e){ao(e)}registerAlias(e){Object.entries(e).forEach(([t,i])=>{s0(t,i)})}registerUI(e,t={},i=1){this.context.injectManager.registerUI(e,t,i),this.registerElement(t)}isComponentClass(e){return this.context.components.isComponentClass(e)}registerComponent(e,t){this.context.components.registerComponent(e,t)}registerItem(e,t){this.registerComponent(e,t)}registerInspector(e,t){this.context.components.registerInspector(e,t)}registerRenderer(e,t,i){this.context.renderers.registerRenderer(e,t,i)}registerRendererType(e,t){this.context.renderers.registerRendererType(e,t)}getRendererInstance(e,t){return this.context.renderers.getRendererInstance(e,t)}renderer(e){return this.context.renderers.getRenderer(e)}get json(){return this.renderer("json")}loadCommands(e){return this.context.commands.loadCommands(e)}registerCommand(e){return this.context.commands.registerCommand(e)}registerShortCut(e){this.context.shortcuts.registerShortCut(e)}registerPlugin(e){this.context.pluginManager.registerPlugin(e)}registerPluginList(e=[]){e.forEach(t=>this.registerPlugin(t))}registerConfig(e){this.context.config.registerConfig(e)}registerI18nMessage(e,t){this.context.i18n.registerI18nMessage(e,t)}registerI18nMessageWithLocale(e){Object.entries(e).forEach(([t,i])=>{this.registerI18nMessage(t,i)})}registerIcon(e,t){this.context.icon.registerIcon(e,t)}registerMenu(e,t){this.context.menuManager.registerMenu(e,t)}}const h1={x:0,y:0},uD={x:Number.MAX_SAFE_INTEGER,y:Number.MAX_SAFE_INTEGER},d1=0;class ph extends ge{async created(){this.$editor.registerManager(this.getManagers()),this.$editor.registerPluginList(this.getPlugins()),Array.isArray(this.opt.plugins)&&this.$editor.registerPluginList(this.opt.plugins),await this.$editor.initPlugins(),this.$config.load(),Fn(this.opt.config)&&this.$config.setAll(this.opt.config||{}),this._isPluginLoaded=!0}get isPreLoaded(){return Boolean(this._isPluginLoaded)}get $editor(){return this.__editorInstance||(this.__editorInstance=this.createEditorInstance()),this.__editorInstance}createEditorInstance(){return new wg}afterRender(){super.afterRender(),this.$el.attr("data-theme",this.$config.get("editor.theme")),this.$el.addClass(window.navigator.userAgent.includes("Windows")?"ua-window":"ua-default"),this.trigger("initialize")}initialize(){super.initialize(),this.__initBodyMoves()}[Qt("editor.theme")](){this.$el.attr("data-theme",this.$config.get("editor.theme"))}getPlugins(){return[]}getManagers(){return{}}__initBodyMoves(){this.__firstMove=new Set,this.__moves=new Set,this.__ends=new Set,this.__modifyBodyMoveSecond(d1)}__modifyBodyMoveSecond(e=d1){this.$config.set("body.move.ms",e);const t=e===0?this.__loopBodyMoves.bind(this):di(this.__loopBodyMoves.bind(this),this.$config.get("body.move.ms"));this.__funcBodyMoves=t}__loopBodyMoves(){var e=this.pos,t=this.$config.get("bodyEvent"),i=this.lastPos||uD,r=!(i.x===e.x&&i.y===e.y);if(r&&this.__firstMove.size){let s=0;this.__firstMove.forEach(a=>{const o=Rr(e.x,e.y,a.xy.x,a.xy.y);if(Math.abs(o)>0){var l=e.x-a.xy.x,c=e.y-a.xy.y;a.func.call(a.context,l,c,"move",t.pressure),s++}}),s>0&&this.__firstMove.clear()}r&&this.__moves.size&&(this.__moves.forEach(s=>{const a=Rr(e.x,e.y,s.xy.x,s.xy.y);if(Math.abs(a)>.5){var o=e.x-s.xy.x,l=e.y-s.xy.y;s.func.call(s.context,o,l,"move",t.pressure)}}),this.lastPos=e),window.requestAnimationFrame(this.__funcBodyMoves)}__removeBodyMoves(){var e=this.lastPos,t=this.$config.get("bodyEvent");e&&this.__ends.forEach(i=>{i.func.call(i.context,e.x-i.xy.x,e.y-i.xy.y,"end",t.pressure)}),this.__firstMove.clear(),this.__moves.clear(),this.__ends.clear()}[Vd(Of)](e,t,i){this.__firstMove.add({func:e,context:t,xy:i})}[Vd(zf)](e,t,i){this.__moves.add({func:e,context:t,xy:i})}[Vd(Vf)](e,t,i){this.__ends.add({func:e,context:t,xy:i})}[qe()](e){var t=e.xy||h1;this.$config.init("bodyEvent",e),this.pos=t}[lo()](e){var t=e.xy||h1;this.$config.init("bodyEvent",e),this.$commands.emit("change.bodyEvent"),this.pos=t,this.__requestId||(this.__requestId=window.requestAnimationFrame(this.__funcBodyMoves))}[P0()](e){this.$config.set("bodyEvent",e),this.__removeBodyMoves(),window.cancelAnimationFrame(this.__requestId),this.__requestId=null}[$0("window")+Ft(100)](){this.emit(ua)}[U("refreshAll")](){this.emit("refreshProjectList"),this.$commands.emit("refreshArtboard")}[U("changed.locale")](){this.rerender()}}var Tie="";const Sl={LEFT:"left",RIGHT:"right",TOP:"top",BOTTOM:"bottom",BODY:"body",INNER:"inner",OUTER:"outer"};class wl extends ge{}class pD extends ge{checkProps(e){return e}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}initState(){return{showLeftPanel:$t(this.props.showLeftPanel)?Boolean(this.props.showLeftPanel):!0,showRightPanel:$t(this.props.showRightPanel)?Boolean(this.props.showRightPanel):!0,topSize:$t(this.props.topSize)?Number(this.props.topSize):48,leftSize:$t(this.props.leftSize)?Number(this.props.leftSize):340,rightSize:$t(this.props.rightSize)?Number(this.props.rightSize):280,bottomSize:this.props.bottomSize||0,lastBottomSize:this.props.lastBottomSize||150,minSize:$t(this.props.minSize)?Boolean(this.props.minSize):240,maxSize:$t(this.props.maxSize)?Boolean(this.props.maxSize):500}}getDirection(e){return this.getChildContent(t=>t.props.type===e)}template(){const e=this.getDirection(Sl.TOP),t=this.getDirection(Sl.LEFT),i=this.getDirection(Sl.RIGHT),r=this.getDirection(Sl.BODY),s=this.getDirection(Sl.INNER),a=this.getDirection(Sl.OUTER);return D("div",{class:"elf--default-layout-container"},D("div",{class:"elf--default-layout"},e?D("div",{class:"layout-top",ref:"$topPanel"},e):"",D("div",{class:"layout-middle",ref:"$middle"},t?D("div",{class:"layout-left",ref:"$leftPanel"},t):"",D("div",{class:"layout-body",ref:"$bodyPanel"},r),i?D("div",{class:"layout-right",ref:"$rightPanel"},i):"",D("div",{class:"splitter",ref:"$splitter"})),s),a)}[$e("$splitter")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{left:y.px(e)}}}[$e("$leftPanel")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{width:e}}}[$e("$rightPanel")](){let e=this.state.rightSize;return this.state.showRightPanel||(e=0),{class:vn("layout-right",{closed:!this.state.showRightPanel}),style:{width:e}}}setOptions(e={}){this.setState(e)}[qe("$splitter")+at("moveSplitter")+lt("moveEndSplitter")](){this.leftSize=this.state.leftSize,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.state.maxSize),this.state.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$splitter"),this.bindData("$leftPanel")}}var Cie="",Eie="";class fD extends ge{template(){return` + `}[G("$list")](){return Object.entries(oe).map(([e,t])=>it(t)===!1?"":t.replace(/\{console.log(...e)}},HC=Object.freeze(Object.defineProperty({__proto__:null,default:GC},Symbol.toStringTag,{value:"Module"})),UC={command:"history.redo",execute:function(s){s.context.history.redo()}},WC=Object.freeze(Object.defineProperty({__proto__:null,default:UC},Symbol.toStringTag,{value:"Module"})),XC={command:"history.undo",execute:function(s){s.context.history.undo()}},YC=Object.freeze(Object.defineProperty({__proto__:null,default:XC},Symbol.toStringTag,{value:"Module"})),KC={command:"keymap.keydown",execute:function(s,e){s.context.keyboardManager.add(e.code,e.keyCode,e),s.context.shortcuts&&s.context.shortcuts.execute(e,"keydown")}},ZC=Object.freeze(Object.defineProperty({__proto__:null,default:KC},Symbol.toStringTag,{value:"Module"})),qC={command:"keymap.keyup",execute:function(s,e){s.context.keyboardManager.remove(e.key,e.keyCode),s.context.shortcuts&&s.context.shortcuts.execute(e,"keyup")}},QC=Object.freeze(Object.defineProperty({__proto__:null,default:qC},Symbol.toStringTag,{value:"Module"})),JC={command:"moveToCenter",description:"Move Layer to Center on Viewport",execute:function(s,e,t=!1){e&&s.context.viewport.moveToCenter(e,t?-.2:0,t)}},eT=Object.freeze(Object.defineProperty({__proto__:null,default:JC},Symbol.toStringTag,{value:"Module"})),tT={command:"pop.mode.view",execute:function(s,e=void 0){s.context.modeViewManager.popMode(e)}},rT=Object.freeze(Object.defineProperty({__proto__:null,default:tT},Symbol.toStringTag,{value:"Module"})),iT={command:"push.mode.view",execute:function(s,e=Wi.CanvasView){s.context.modeViewManager.pushMode(e),s.emit("updateModeView")}},sT=Object.freeze(Object.defineProperty({__proto__:null,default:iT},Symbol.toStringTag,{value:"Module"})),aT={command:"recoverCursor",execute:function(s){s.context.config.set("editor.cursor","auto"),s.context.config.set("editor.cursor.args",[])}},nT=Object.freeze(Object.defineProperty({__proto__:null,default:aT},Symbol.toStringTag,{value:"Module"})),oT={command:"refreshCursor",execute:function(s,e,...t){s.context.config.set("editor.cursor",e),s.context.config.set("editor.cursor.args",t)}},lT=Object.freeze(Object.defineProperty({__proto__:null,default:oT},Symbol.toStringTag,{value:"Module"})),cT={command:"setLocale",execute:function(s,e){s.setLocale(e),s.emit("changed.locale")}},hT=Object.freeze(Object.defineProperty({__proto__:null,default:cT},Symbol.toStringTag,{value:"Module"})),dT={command:"toggleHandTool",execute:function(s){s.context.config.is("editing.mode",St.HAND)?s.context.config.set("editing.mode",St.SELECT):s.context.config.set("editing.mode",St.HAND),s.emit("hideLayerAppendView")}},uT=Object.freeze(Object.defineProperty({__proto__:null,default:dT},Symbol.toStringTag,{value:"Module"})),pT={command:"zoom.default",execute:function(s){s.context.viewport.zoomDefault()}},gT=Object.freeze(Object.defineProperty({__proto__:null,default:pT},Symbol.toStringTag,{value:"Module"})),fT={command:"zoom.in",execute:function(s){s.context.viewport.zoomIn(.02)}},mT=Object.freeze(Object.defineProperty({__proto__:null,default:fT},Symbol.toStringTag,{value:"Module"})),vT={command:"zoom.out",execute:function(s){s.context.viewport.zoomOut(.02)}},yT=Object.freeze(Object.defineProperty({__proto__:null,default:vT},Symbol.toStringTag,{value:"Module"}));const bT={"./command_list/Console.js":HC,"./command_list/history.redo.js":WC,"./command_list/history.undo.js":YC,"./command_list/keymap.keydown.js":ZC,"./command_list/keymap.keyup.js":QC,"./command_list/moveToCenter.js":eT,"./command_list/pop.mode.view.js":rT,"./command_list/push.mode.view.js":sT,"./command_list/recoverCursor.js":nT,"./command_list/refreshCursor.js":lT,"./command_list/setLocale.js":hT,"./command_list/toggle.tool.hand.js":uT,"./command_list/zoom.default.js":gT,"./command_list/zoom.in.js":mT,"./command_list/zoom.out.js":yT},qu={};Object.entries(bT).forEach(([s,e])=>{s=s.replace("./command_list/","").replace(".js",""),qu[s]=e.default});class gn{static parse(e,t=!1){var[,r]=e.split("data:"),[i,...a]=r.split(","),[n,o]=i.split(";");return a=a.join(","),{mimeType:n,local:t&&gn.getLink(n,o,a)}}static getLink(e,t,r){if(t==="base64"){for(var i=window.atob(r),a=i.length,n=new window.Uint8Array(a),o=0;o{i.images.forEach(a=>{r[`#${a.id}`]=a})}),Object.keys(r).map(i=>{var a=r[i],n=gn.parse(a.original,!0);a.local=n.local}),t.forEach(i=>{i.layers=this.applyAsset(i.layers,r)}),t}applyAsset(e,t){return Array.isArray(e)?e=e.map(r=>this.applyAsset(r,t)):Hr(e)?Object.keys(e).forEach(r=>{e[r]=this.applyAsset(e[r],t)}):it(e)&&Object.keys(t).forEach(r=>{var i=t[r];e.indexOf(`#${i.id}`)>-1&&(e=e.replace(new RegExp(`#${i.id}`,"g"),i.local))}),e}}class $T{constructor(e){this.editor=e,this.commands=[]}log(){console.log(this.commands)}emit(...e){this.commands.push(e)}run(){this.editor.emit(this.commands)}add(e){this.commands=this.commands.concat(e.commands)}}class _T{constructor(e){return this.$editor=e,this.promiseProxy=this.localCommands={},this.loadCommands(),new Proxy(this,{get:(t,r)=>{var i=t[r];return de(i)?(...a)=>i.apply(t,a):this.makePromiseEvent(r)}})}loadCommands(e={}){Object.keys(e).forEach(t=>{de(e[t])?this.registerCommand(t,e[t]):this.registerCommand(e[t])})}registerCommand(e,t){if(this.localCommands[e])throw new Error(`command ${e} is already registered`);if(arguments.length===2){const r=(...i)=>{const a=t.call(this,this.$editor,...i);return this.$editor.debug("command execute",this,...i),a};r.source=e,this.localCommands[e]=r}else if(Hr(e)){const r=(...i)=>{const a=e.execute.call(e,this.$editor,...i);return this.$editor.debug("command execute",e,...i),a};r.source=e.command,this.localCommands[e.command]=r}}getCallback(e){return this.localCommands[e]}makePromiseEvent(e){const t=this.getCallback(e);if(t)return(...r)=>new Promise(i=>{i(t(...r))})}executeCommand(e,t,...r){return this.$editor.context.stateManager.isPointerUp?(e=`history.${e}`,this.getCallback(e)(t,...r)):this.emit(e,...r)}emit(e,...t){const r=this.getCallback(e);if(r)return r(...t)}}class ST{constructor(e){this.editor=e,this.components={},this.inspectors={}}registerComponent(e,t){this.components[e]=t}registerInspector(e,t){this.inspectors[e]=t}isComponentClass(e){return!!this.getComponentClass(e)}getComponentClass(e){return this.components[e]||this.components.rect}getInspector(e){return this.inspectors[e]}createComponent(e,t={}){var r=this.getComponentClass(e);if(!r){console.warn(`${e} type is not valid.`);return}return new r(t)}createInspector(e,t=""){const r=this.getInspector(t||e.itemType);return de(r)?r(e)||[]:de(e.getProps)?e.getProps()||[]:[]}}class PT{constructor(e){this.editor=e,this.configList=[],this.config=new Map}load(){const e=this.editor.loadItem("config")||{};Object.keys(e).forEach(t=>{this.config.set(t,e[t])})}get(e){var t;return this.config.has(e)===!1&&this.config.set(e,(t=this.configList.find(r=>r.key==e))==null?void 0:t.defaultValue),this.config.get(e)}set(e,t,r=!0){const i=this.config.get(e);i!==t&&(this.config.set(e,t),this.editor.emit("config:"+e,t,i),r&&this.save())}push(e,t){const i=this.get(e).length;return this.setIndexValue(e,i,t),i}setIndexValue(e,t,r){const i=this.get(e);i[t]=r,this.set(e,[...i])}getIndexValue(e,t){return this.get(e)[t]}removeByIndex(e,t){const r=this.get(e);r.splice(t,1),this.set(e,[...r])}init(e,t){this.set(e,t,!1)}save(){const e={};this.configList.filter(t=>t.storage!=="none").forEach(t=>{e[t.key]=this.get(t.key)}),this.editor.saveItem("config",e)}setAll(e){Object.keys(e).forEach(t=>{this.set(t,e[t])})}getType(e){var t;return(t=this.configList.find(r=>r.key==e))==null?void 0:t.type}isType(e,t){return this.getType(e)===t}isBoolean(e){return this.isType(e,"boolean")}toggle(e){this.set(e,!this.get(e))}toggleWith(e,t,r){this.get(e)===t?this.set(e,r):this.set(e,t)}true(e){return this.get(e)===!0}false(e){return this.get(e)===!1}is(e,t){return this.get(e)===t}remove(e){this.config.delete(e),this.editor.emit("config:"+e)}registerConfig(e){this.config.set(e.key,e.defaultValue),this.configList.push(e)}}class wT{async load(e="default",...t){if(oe[e]){const r=de(oe[e])?oe[e].call(oe[e],...t):oe[e],i=new window.Blob([r],{type:"image/svg+xml"});return new Promise(a=>{const n=new window.FileReader;n.onload=o=>{const l=o.target.result;a(`url(${l}) 12 12, auto`)},n.readAsDataURL(i)})}else return e}}class CT{constructor(e){this.editor=e,this.locales={},this.fallbackLang="en_US"}getLang(e=void 0){return e||this.fallbackLang}setFallbackLang(e){this.fallbackLang=e}get(e,t={},r=void 0){var n,o;const i=this.getLang(r),a=((n=this.locales[i])==null?void 0:n[e])||((o=this.locales[this.fallbackLang])==null?void 0:o[e])||e||void 0;if(de(a))return a(t);{let l=a;return e===l?e.split(".").pop():(Object.entries(t).forEach(([c,h])=>{l=l.replace(new RegExp(`{${c}}`,"ig"),h)}),l)}}hasKey(e,t=void 0){const r=this.getLang(t);return!!(this.locales[r][e]||this.locales[this.fallbackLang][e])}registerI18nMessage(e,t){this.locales[e]||(this.locales[e]={}),Object.assign(this.locales[e],t)}}class TT{constructor(e){this.editor=e,this.iconMap={}}get(e,t){const r=this.iconMap[e];return de(r)?r(t):z(r||t.getIcon()||"rect")}set(e,t){this.iconMap[e]=t}registerIcon(e,t){this.set(e,t)}}class kT{constructor(e){this.editor=e,this.ui={}}registerUI(e,t={},r=1){this.ui[e]||(this.ui[e]=[]),Object.keys(t).forEach(i=>{const a=this.ui[e].find(n=>n.refClass===i);a?a.class=t[i]:this.ui[e].push({refClass:i,order:r,class:t[i]})})}getTargetUI(e){return this.ui[e]||[]}generate(e,t=!1){const r=this.getTargetUI(e);return r.sort((i,a)=>i.order===a.order?0:i.order>a.order?1:-1),r.map((i,a)=>{if(Gt(i.class))return C(...i.class);{const n={};return t&&(n.ref=`$${i.refClass}-${a}`),R(i.refClass,n)}}).join(` +`)}}class MT{constructor(e){this.editor=e,this.codeSet=new Set,this.keyCodeSet=new Set,this.event={}}add(e,t,r){this.codeSet.has(e)===!1&&this.codeSet.add(e),this.keyCodeSet.has(t)===!1&&this.keyCodeSet.add(t),this.event=r}remove(e,t){this.codeSet.delete(e),this.keyCodeSet.delete(t)}hasKey(e){return this.codeSet.has(e)||this.keyCodeSet.has(e)}check(...e){return e.some(t=>this.hasKey(t))}isShift(){return Boolean(this.event.shiftKey)}isCtrl(){return Boolean(this.event.ctrlKey)}isAlt(){return Boolean(this.event.altKey)}isMeta(){return Boolean(this.event.metaKey)}}class IT{constructor(e){this.editor=e,this.menus={}}registerMenu(e,t=[],r=1){this.menus[e]||(this.menus[e]=[]),Gt(t)||(t=[t]),t.forEach(i=>{this.menus[e].push(i)}),this.editor.emit("updateMenu",e)}getTargetMenu(e){return this.menus[e]||[]}}class ET{constructor(e){this.editor=e,this.modes=[Wi.CanvasView]}pushMode(e){this.isCurrentMode(e)||this.modes.push(e)}popMode(e=void 0){e?this.isCurrentMode(e)&&this.modes.pop():this.modes.pop()}currentMode(){return this.modes[this.modes.length-1]}isCurrentMode(e){return this.currentMode()===e}}class LT{constructor(e){this.editor=e,this.plugins=[]}registerPlugin(e){this.plugins.push(e)}async initializePlugin(e={}){return await Promise.all(this.plugins.map(async t=>await t(this.editor,e)))}}class VT{constructor(e){this.editor=e,this.renderers={},this.rendererTypes={}}getRenderType(e){return this.renderers[e]||(this.renderers[e]={}),this.renderers[e]}registerRenderer(e,t,r){const i=this.getRenderType(e);i[t]=r}registerRendererType(e,t){this.rendererTypes[e]=t}getRenderer(e){return this.rendererTypes[e]}getRendererInstance(e,t){return this.getRenderType(e)[t]}}var OT={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"CanvasView"},RT=Object.freeze(Object.defineProperty({__proto__:null,default:OT},Symbol.toStringTag,{value:"Module"})),jT={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"LayerAppendView"},zT=Object.freeze(Object.defineProperty({__proto__:null,default:jT},Symbol.toStringTag,{value:"Module"})),AT={category:"Tool",key:"b",command:"addLayerView",args:["brush"],description:"Draw SVG Path",when:"CanvasView"},DT=Object.freeze(Object.defineProperty({__proto__:null,default:AT},Symbol.toStringTag,{value:"Module"})),FT={category:"Tool",key:"o",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},BT=Object.freeze(Object.defineProperty({__proto__:null,default:FT},Symbol.toStringTag,{value:"Module"})),NT={category:"Tool",key:"l",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},GT=Object.freeze(Object.defineProperty({__proto__:null,default:NT},Symbol.toStringTag,{value:"Module"})),HT={category:"Tool",key:"p",command:"addLayerView",args:["path"],description:"Add SVG Path layer",when:"CanvasView"},UT=Object.freeze(Object.defineProperty({__proto__:null,default:HT},Symbol.toStringTag,{value:"Module"})),WT={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"CanvasView"},XT=Object.freeze(Object.defineProperty({__proto__:null,default:WT},Symbol.toStringTag,{value:"Module"})),YT={category:"Tool",key:"m",command:"addLayerView",args:["rect"],description:"Add rect layer",when:"CanvasView"},KT=Object.freeze(Object.defineProperty({__proto__:null,default:YT},Symbol.toStringTag,{value:"Module"})),ZT={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"LayerAppendView"},qT=Object.freeze(Object.defineProperty({__proto__:null,default:ZT},Symbol.toStringTag,{value:"Module"})),QT={category:"Tool",key:"t",command:"addLayerView",args:["text"],description:"Add text layer",when:"CanvasView"},JT=Object.freeze(Object.defineProperty({__proto__:null,default:QT},Symbol.toStringTag,{value:"Module"})),ek={category:"Edit",key:"cmd+c",command:"clipboard.copy",description:"Copy objects",when:"CanvasView"},tk=Object.freeze(Object.defineProperty({__proto__:null,default:ek},Symbol.toStringTag,{value:"Module"})),rk={category:"Edit",key:"cmd+v",win:"ctrl+v",command:"clipboard.paste",description:"Paste selected objects",when:"CanvasView"},ik=Object.freeze(Object.defineProperty({__proto__:null,default:rk},Symbol.toStringTag,{value:"Module"})),sk={category:"Tool",key:"escape",command:"select.none",description:"None selection",when:"CanvasView"},ak=Object.freeze(Object.defineProperty({__proto__:null,default:sk},Symbol.toStringTag,{value:"Module"})),nk={category:"Group",key:"cmd+g",win:"ctrl+g",command:"group.item",description:"Grouping selected items",when:"CanvasView"},ok=Object.freeze(Object.defineProperty({__proto__:null,default:nk},Symbol.toStringTag,{value:"Module"})),lk={category:"History",key:"cmd+shift+z",win:"ctrl+shift+z",command:"history.redo",description:"redoing in history",when:"CanvasView"},ck=Object.freeze(Object.defineProperty({__proto__:null,default:lk},Symbol.toStringTag,{value:"Module"})),hk={category:"History",key:"cmd+z",win:"ctrl+z",command:"history.undo",description:"undoing in history",when:"CanvasView"},dk=Object.freeze(Object.defineProperty({__proto__:null,default:hk},Symbol.toStringTag,{value:"Module"})),uk={category:"Layer",key:"Alt+ArrowDown",command:"moveLayer",description:"move 5px to down",args:[0,5],when:"CanvasView"},pk=Object.freeze(Object.defineProperty({__proto__:null,default:uk},Symbol.toStringTag,{value:"Module"})),gk={category:"Layer",key:"Alt+ArrowLeft",command:"moveLayer",description:"move 5px to left",args:[-5,0],when:"CanvasView"},fk=Object.freeze(Object.defineProperty({__proto__:null,default:gk},Symbol.toStringTag,{value:"Module"})),mk={category:"Layer",key:"Alt+ArrowRight",command:"moveLayer",description:"move 5px to right",args:[5,0],when:"CanvasView"},vk=Object.freeze(Object.defineProperty({__proto__:null,default:mk},Symbol.toStringTag,{value:"Module"})),yk={category:"Layer",key:"Alt+ArrowUp",command:"moveLayer",description:"move 5px to up",args:[0,-5],when:"CanvasView"},bk=Object.freeze(Object.defineProperty({__proto__:null,default:yk},Symbol.toStringTag,{value:"Module"})),xk={category:"Layer",key:"[",command:"history.send.backward",description:"move layer to below",args:["send backward"],when:"CanvasView"},$k=Object.freeze(Object.defineProperty({__proto__:null,default:xk},Symbol.toStringTag,{value:"Module"})),_k={category:"Layer",key:"]",command:"history.bring.forward",description:"move layer to above",args:["bring forward"],when:"CanvasView"},Sk=Object.freeze(Object.defineProperty({__proto__:null,default:_k},Symbol.toStringTag,{value:"Module"})),Pk={category:"Layer",key:"ArrowDown",command:"moveLayer",description:"move 1px to down",args:[0,1],when:"CanvasView"},wk=Object.freeze(Object.defineProperty({__proto__:null,default:Pk},Symbol.toStringTag,{value:"Module"})),Ck={category:"Layer",key:"ArrowLeft",command:"moveLayer",description:"move 1px to left",args:[-1,0],when:"CanvasView"},Tk=Object.freeze(Object.defineProperty({__proto__:null,default:Ck},Symbol.toStringTag,{value:"Module"})),kk={category:"Layer",key:"ArrowRight",command:"moveLayer",description:"move 1px to right",args:[1,0],when:"CanvasView"},Mk=Object.freeze(Object.defineProperty({__proto__:null,default:kk},Symbol.toStringTag,{value:"Module"})),Ik={category:"Layer",key:"ArrowUp",command:"moveLayer",description:"move 1px to up",args:[0,-1],when:"CanvasView"},Ek=Object.freeze(Object.defineProperty({__proto__:null,default:Ik},Symbol.toStringTag,{value:"Module"})),Lk={category:"Layer",key:"Shift+ArrowDown",command:"moveLayer",description:"move 10px to down",args:[0,10],when:"CanvasView"},Vk=Object.freeze(Object.defineProperty({__proto__:null,default:Lk},Symbol.toStringTag,{value:"Module"})),Ok={category:"Layer",key:"Shift+ArrowLeft",command:"moveLayer",description:"move 10px to left",args:[-10,0],when:"CanvasView"},Rk=Object.freeze(Object.defineProperty({__proto__:null,default:Ok},Symbol.toStringTag,{value:"Module"})),jk={category:"Layer",key:"Shift+ArrowRight",command:"moveLayer",description:"move 10px to right",args:[10,0],when:"CanvasView"},zk=Object.freeze(Object.defineProperty({__proto__:null,default:jk},Symbol.toStringTag,{value:"Module"})),Ak={category:"Layer",key:"Shift+ArrowUp",command:"moveLayer",description:"move 10px to up",args:[0,-10],when:"CanvasView"},Dk=Object.freeze(Object.defineProperty({__proto__:null,default:Ak},Symbol.toStringTag,{value:"Module"})),Fk={category:"Layer",key:"Meta+ArrowLeft",command:"rotateLayer",description:"rotate to left",args:[-5],when:"CanvasView"},Bk=Object.freeze(Object.defineProperty({__proto__:null,default:Fk},Symbol.toStringTag,{value:"Module"})),Nk={category:"Layer",key:"Meta+ArrowRight",command:"rotateLayer",description:"rotate to right",args:[5],when:"CanvasView"},Gk=Object.freeze(Object.defineProperty({__proto__:null,default:Nk},Symbol.toStringTag,{value:"Module"})),Hk={category:"Layer",key:"Backspace",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},Uk=Object.freeze(Object.defineProperty({__proto__:null,default:Hk},Symbol.toStringTag,{value:"Module"})),Wk={category:"Layer",key:"Delete",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},Xk=Object.freeze(Object.defineProperty({__proto__:null,default:Wk},Symbol.toStringTag,{value:"Module"})),Yk={category:"Path",key:"Backspace",command:"segment.delete",description:"Delete selected segment",when:"PathEditorView"},Kk=Object.freeze(Object.defineProperty({__proto__:null,default:Yk},Symbol.toStringTag,{value:"Module"})),Zk={category:"Path",key:"Alt+ArrowDown",command:"segment.move.down",description:"move 5px to down",args:[{dy:5}],when:"PathEditorView"},qk=Object.freeze(Object.defineProperty({__proto__:null,default:Zk},Symbol.toStringTag,{value:"Module"})),Qk={category:"Path",key:"Alt+ArrowLeft",command:"segment.move.left",description:"move 5px to left",args:[{dx:5}],when:"PathEditorView"},Jk=Object.freeze(Object.defineProperty({__proto__:null,default:Qk},Symbol.toStringTag,{value:"Module"})),e3={category:"Path",key:"Alt+ArrowRight",command:"segment.move.right",description:"move 5px to right",args:[{dx:5}],when:"PathEditorView"},t3=Object.freeze(Object.defineProperty({__proto__:null,default:e3},Symbol.toStringTag,{value:"Module"})),r3={category:"Path",key:"Alt+ArrowUp",command:"segment.move.up",description:"move 5px to up ",args:[{dy:5}],when:"PathEditorView"},i3=Object.freeze(Object.defineProperty({__proto__:null,default:r3},Symbol.toStringTag,{value:"Module"})),s3={category:"Path",key:"ArrowDown",command:"segment.move.down",description:"move 1px to down",args:[{dy:1}],when:"PathEditorView"},a3=Object.freeze(Object.defineProperty({__proto__:null,default:s3},Symbol.toStringTag,{value:"Module"})),n3={category:"Path",key:"ArrowLeft",command:"segment.move.left",description:"move 1px to left",args:[{dx:1}],when:"PathEditorView"},o3=Object.freeze(Object.defineProperty({__proto__:null,default:n3},Symbol.toStringTag,{value:"Module"})),l3={category:"Path",key:"ArrowRight",command:"segment.move.right",description:"move 1px to right",args:[{dx:1}],when:"PathEditorView"},c3=Object.freeze(Object.defineProperty({__proto__:null,default:l3},Symbol.toStringTag,{value:"Module"})),h3={category:"Path",key:"ArrowUp",command:"segment.move.up",description:"move 1px to up",args:[{dy:1}],when:"PathEditorView"},d3=Object.freeze(Object.defineProperty({__proto__:null,default:h3},Symbol.toStringTag,{value:"Module"})),u3={category:"Path",key:"Shift+ArrowDown",command:"segment.move.down",description:"move 10px to down",args:[{dy:10}],when:"PathEditorView"},p3=Object.freeze(Object.defineProperty({__proto__:null,default:u3},Symbol.toStringTag,{value:"Module"})),g3={category:"Path",key:"Shift+ArrowLeft",command:"segment.move.left",description:"move 10px to left",args:[{dx:10}],when:"PathEditorView"},f3=Object.freeze(Object.defineProperty({__proto__:null,default:g3},Symbol.toStringTag,{value:"Module"})),m3={category:"Path",key:"Shift+ArrowRight",command:"segment.move.right",description:"move 10px to right",args:[{dx:10}],when:"PathEditorView"},v3=Object.freeze(Object.defineProperty({__proto__:null,default:m3},Symbol.toStringTag,{value:"Module"})),y3={category:"Path",key:"Shift+ArrowUp",command:"segment.move.up",description:"move 10px to up",args:[{dy:10}],when:"PathEditorView"},b3=Object.freeze(Object.defineProperty({__proto__:null,default:y3},Symbol.toStringTag,{value:"Module"})),x3={category:"Tool",key:"CMD+A",win:"CTRL+A",command:"select.all",description:"Selection all layers"},$3=Object.freeze(Object.defineProperty({__proto__:null,default:x3},Symbol.toStringTag,{value:"Module"})),_3={category:"Tool",key:"v",command:"addLayerView",args:["select"],description:"Selection"},S3=Object.freeze(Object.defineProperty({__proto__:null,default:_3},Symbol.toStringTag,{value:"Module"})),P3={category:"Tools",key:"h",command:"toggleHandTool",description:"set hand tool on",when:"CanvasView"},w3=Object.freeze(Object.defineProperty({__proto__:null,default:P3},Symbol.toStringTag,{value:"Module"})),C3={category:"Tools",key:"h",command:"toggleHandTool",description:"set hand tool on",when:"LayerAppendView"},T3=Object.freeze(Object.defineProperty({__proto__:null,default:C3},Symbol.toStringTag,{value:"Module"})),k3={category:"Tool",key:"space",command:"showPan",description:"Show panning area",when:"CanvasView"},M3=Object.freeze(Object.defineProperty({__proto__:null,default:k3},Symbol.toStringTag,{value:"Module"})),I3={category:"Group",key:"shift+cmd+g",win:"shift+ctrl+g",command:"ungroup.item",description:"Ungrouping selected group layer",when:"CanvasView"},E3=Object.freeze(Object.defineProperty({__proto__:null,default:I3},Symbol.toStringTag,{value:"Module"})),L3={category:"View",key:"0",command:"zoom.default",description:"zoom by scale 1",when:"CanvasView"},V3=Object.freeze(Object.defineProperty({__proto__:null,default:L3},Symbol.toStringTag,{value:"Module"})),O3={category:"View",key:"Equal",command:"zoom.in",description:"zoom in",when:"CanvasView"},R3=Object.freeze(Object.defineProperty({__proto__:null,default:O3},Symbol.toStringTag,{value:"Module"})),j3={category:"View",key:"minus",command:"zoom.out",description:"zoom Out",when:"CanvasView"},z3=Object.freeze(Object.defineProperty({__proto__:null,default:j3},Symbol.toStringTag,{value:"Module"})),Ic=Object.values({"./shortcuts_list/add.artboard.js":RT,"./shortcuts_list/add.artboard.pan.js":zT,"./shortcuts_list/add.brush.js":DT,"./shortcuts_list/add.circle.js":BT,"./shortcuts_list/add.circle.l.js":GT,"./shortcuts_list/add.path.js":UT,"./shortcuts_list/add.rect.js":XT,"./shortcuts_list/add.rect.m.js":KT,"./shortcuts_list/add.rect.pan.js":qT,"./shortcuts_list/add.text.js":JT,"./shortcuts_list/clipboard.copy.js":tk,"./shortcuts_list/clipboard.paste.js":ik,"./shortcuts_list/escape.js":ak,"./shortcuts_list/group.item.js":ok,"./shortcuts_list/history.redo.js":ck,"./shortcuts_list/history.undo.js":dk,"./shortcuts_list/item.move.alt.down.js":pk,"./shortcuts_list/item.move.alt.left.js":fk,"./shortcuts_list/item.move.alt.right.js":vk,"./shortcuts_list/item.move.alt.up.js":bk,"./shortcuts_list/item.move.depth.down.js":$k,"./shortcuts_list/item.move.depth.up.js":Sk,"./shortcuts_list/item.move.key.down.js":wk,"./shortcuts_list/item.move.key.left.js":Tk,"./shortcuts_list/item.move.key.right.js":Mk,"./shortcuts_list/item.move.key.up.js":Ek,"./shortcuts_list/item.move.shift.down.js":Vk,"./shortcuts_list/item.move.shift.left.js":Rk,"./shortcuts_list/item.move.shift.right.js":zk,"./shortcuts_list/item.move.shift.up.js":Dk,"./shortcuts_list/item.rotate.meta.left.js":Bk,"./shortcuts_list/item.rotate.meta.right.js":Gk,"./shortcuts_list/removeLayer.js":Uk,"./shortcuts_list/removeLayerByDeleteKey.js":Xk,"./shortcuts_list/segment.delete.js":Kk,"./shortcuts_list/segment.move.alt.down.js":qk,"./shortcuts_list/segment.move.alt.left.js":Jk,"./shortcuts_list/segment.move.alt.right.js":t3,"./shortcuts_list/segment.move.alt.up.js":i3,"./shortcuts_list/segment.move.key.down.js":a3,"./shortcuts_list/segment.move.key.left.js":o3,"./shortcuts_list/segment.move.key.right.js":c3,"./shortcuts_list/segment.move.key.up.js":d3,"./shortcuts_list/segment.move.shift.down.js":p3,"./shortcuts_list/segment.move.shift.left.js":f3,"./shortcuts_list/segment.move.shift.right.js":v3,"./shortcuts_list/segment.move.shift.up.js":b3,"./shortcuts_list/select.all.js":$3,"./shortcuts_list/select.view.js":S3,"./shortcuts_list/set.tool.hand.js":w3,"./shortcuts_list/set.tool.hand.m.js":T3,"./shortcuts_list/show.pan.js":M3,"./shortcuts_list/ungroup.item.js":E3,"./shortcuts_list/zoom.default.js":V3,"./shortcuts_list/zoom.in.js":R3,"./shortcuts_list/zoom.out.js":z3}).map(s=>s.default);function Ao(...s){return s.filter(Boolean).join("+")}function Qu(s){return Yi[`${s}`.toLowerCase()]||s}class A3{constructor(e){this.$editor=e,this.loadShortCuts()}getGeneratedKeyCode(e){return Qu(e)}loadShortCuts(){this.list=[],this.commands={},Ic.forEach(e=>{this.registerShortCut(e)}),this.sort()}registerShortCut(e){const t=Zl();this.list.push(se(b({key:"",command:"",args:[],eventType:"keydown"},e),{checkKeyString:this.splitShortCut(e[t]||e.key),whenFunction:this.makeWhenFunction(e.command,e.when||!0)})),this.sort()}makeWhenFunction(e,t){if(ai(t)&&t)return()=>!0;const r=this.$editor,i=t.split("|").map(a=>a.trim());return()=>i.some(a=>r.context.modeViewManager.isCurrentMode(a))}sort(){this.commands={},this.list.forEach(e=>{Array.isArray(this.commands[e.checkKeyString])===!1&&(this.commands[e.checkKeyString]=[]),this.commands[e.checkKeyString].push(e)})}splitShortCut(e){var t=e.toUpperCase().split("+").map(l=>l.trim()).filter(Boolean);let r=!1,i=!1,a=!1,n=!1,o=[];return t.forEach(l=>{l.includes("ALT")?r=!0:l.includes("CTRL")?i=!0:l.includes("SHIFT")?a=!0:l.includes("CMD")||l.includes("WIN")||l.includes("META")?n=!0:o.push(l)}),Ao(r?"ALT":"",i?"CTRL":"",a?"SHIFT":"",n?"META":"",Qu(o.join("")))}makeKeyString(e){return Ao(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.key.toUpperCase())}makeCodeString(e){return Ao(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.code.toUpperCase())}makeKeyCodeString(e){return Ao(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.keyCode)}checkShortCut(e,t,r){return this.commands[e]||this.commands[t]||this.commands[r]}checkWhen(e){return e.whenFunction()}execute(e,t="keydown"){let r=this.checkShortCut(this.makeKeyCodeString(e),this.makeKeyString(e),this.makeCodeString(e));if(r){const i=r.filter(a=>a.eventType===t).filter(a=>this.checkWhen(a));i.length&&i.forEach(a=>{this.$editor.context.commands.emit(a.command,...a.args)})}}}class D3{constructor(e){this.editor=e}get config(){return this.editor.context.config}get zIndex(){return this.popupZIndex++}get isPointerUp(){const e=this.config.get("bodyEvent");return!e||e.type==="pointerup"?!0:e.type==="pointermove"&&e.buttons===0}get isPointerDown(){return!this.isPointerUp}get isPointerMove(){return this.config.get("bodyEvent")?this.config.get("bodyEvent").type==="pointermove":!1}}class F3{constructor(e){this.editor=e,this.customAssetKey="custom-assets"}async getCustomAssetList(){let e=!1;const t=(this.editor.loadItem(this.customAssetKey)||[]).map(r=>(r.id||(r.id=ws(),e=!0),r));return e&&await this.setCustomAssetList(t),t}async setCustomAssetList(e){this.editor.saveItem(this.customAssetKey,e)}async getCustomAsset(e){const r=(await this.getCustomAssetList()).find(i=>i.id===e);return r&&r.component?r.component:null}async saveCustomAsset(e=""){const t=this.editor.context.selection.current;if(t){const r=await this.getCustomAssetList(),i=await this.editor.json.render(t);i.x=0,i.y=0,await this.setCustomAssetList([...r,{id:ws(),preview:e,component:i}])}}async removeCustomAsset(e){const t=await this.getCustomAssetList();await this.setCustomAssetList(t.filter(r=>r.id!==e))}}class B3{constructor(e){this.editor=e,this.context=this.editor.context,this.canvasSize=null,this.cachedViewport=xt(0,0,0,0),this.mouse=ci(),this.scaleMax=1e5,this.scale=1,this.translate=ci(),this.transformOrigin=ci(),this.maxScale=25,this.minScale=.02,this.zoomFactor=1,this.resetWorldMatrix()}setTransformOrigin(e){this.transformOrigin=e,this.resetWorldMatrix()}setTransformOriginWithTranslate(e){const t=Yt(this.transformOrigin);this.setTransformOrigin(e),this.setTranslate(we([],this.translate,_e([],t,e)))}setScale(e){this.scale=Math.min(Math.max(this.minScale,e),this.maxScale),this.scaleMax=this.scale*1e5,this.resetWorldMatrix()}setTranslate(e){this.translate=e,this.resetWorldMatrix()}resetWorldMatrix(){this.translate=this.translate.map(e=>+e.toFixed(4)),this.transformOrigin=this.transformOrigin.map(e=>+e.toFixed(4)),this.scale=+this.scale.toFixed(4),this.matrix=ar(mt([],this.translate),mt([],this.transformOrigin),Kr([],[this.scale,this.scale,1]),mt([],tr([],this.transformOrigin))),this.matrixInverse=Dt([],this.matrix),this.scaleMatrix=ar(Kr([],[this.scale,this.scale,1])),this.scaleMatrixInverse=Dt([],this.scaleMatrix),this.refresh()}refreshCanvasSize(e){if(this.canvasSize){this.canvasSize=e,this.cachedViewport=xt(0,0,this.canvasSize.width,this.canvasSize.height);const t=Ze([],[this.canvasSize.width,this.canvasSize.height,0],this.scaleMatrixInverse),r=we([],this.verties[0],[t[0]/2,t[1]/2,0]),i=Ni([],ar(this.matrix,Ki(mt([],r),this.scaleMatrix,Dt([],mt([],r)))));this.setTranslate(i),this.setTransformOrigin(r)}else this.canvasSize=e,this.cachedViewport=xt(0,0,this.canvasSize.width,this.canvasSize.height),this.setTransformOrigin([this.canvasSize.width/2,this.canvasSize.height/2,0]);this.editor.emit(st)}refresh(){this.cachedViewport&&(this.verties=le(this.cachedViewport,this.matrixInverse),this.originVerties=this.verties.filter((e,t)=>t<4),this.originRect=Rt(this.originVerties))}getWorldPosition(e){return e=e||this.context.config.get("bodyEvent"),e?this.createWorldPosition(e.clientX,e.clientY):this.createWorldPosition(0,0)}createWorldPosition(e,t){if(!this.canvasSize)return ci();const r={x:e-this.canvasSize.x,y:t-this.canvasSize.y},i=this.verties[0][0]+(this.verties[2][0]-this.verties[0][0])*(r.x/this.canvasSize.width),a=this.verties[0][1]+(this.verties[2][1]-this.verties[0][1])*(r.y/this.canvasSize.height);return[i,a,0]}setMousePoint(e,t){this.mouse=this.createWorldPosition(e,t),this.setTransformOriginWithTranslate(te([],this.verties[0],this.verties[2],.5)),this.editor.emit(st)}zoom(e){const t=this.scale,r=t*e;this.setScale(r);const i=this.scale/t;this.zoomFactor=i,i!==1&&(this.setTransformOriginWithTranslate(te([],this.mouse,this.transformOrigin,1/e)),this.editor.emit(st))}pan(e,t,r=0){this.setTransformOriginWithTranslate(we([],this.transformOrigin,[e,t,0])),this.editor.emit(st)}moveToCenter(e,t=-.2,r=!0){if(!this.canvasSize)return;const i=te([],e[0],e[2],.5),a=ae(e[0],e[1]),n=ae(e[0],e[3]),o=te([],this.verties[0],this.verties[2],.5),l=ae(this.verties[0],this.verties[1]),c=ae(this.verties[0],this.verties[3]),h=r?Math.min(l/a,c/n)+t:1;this.setTranslate(we([],this.translate,_e([],o,i))),this.setTransformOrigin(i),this.setScale(this.scale*h),this.editor.emit(st)}get pos(){const e=(this.mouse[0]-this.verties[0][0])/(this.verties[2][0]-this.verties[0][0])*100,t=(this.mouse[1]-this.verties[0][1])/(this.verties[2][1]-this.verties[0][1])*100;return[e,t,0]}get minX(){return this.verties[0][0]}get maxX(){return this.verties[2][0]}get minY(){return this.verties[0][1]}get maxY(){return this.verties[2][1]}get center(){return this.verties[4]}get height(){return this.maxY-this.minY}get width(){return this.maxX-this.minX}get pixelSize(){return Math.round(this.width/this.canvasSize.width)}checkInViewport(e){const t=this.minX{const r=e[t];Object.defineProperty(this.context,t,{value:new r(this),writable:!1})})}initStorage(){this.locale=this.loadItem("locale")||"en_US",this.layout=this.loadItem("layout")||"all"}createProject(){return this.createModel({itemType:"project"})}getI18nMessage(e,t={},r){return this.context.i18n.get(e,t,r||this.locale)}$i18n(e,t={},r){return this.getI18nMessage(e,t,r)}hasI18nkey(e,t){return this.context.i18n.hasKey(e,t||this.locale)}initI18nMessage(e=""){return(t,r={},i)=>{const a=`${e}.${t}`;return this.hasI18nkey(a,i)?this.context.i18(`${e}.${t}`,r,i):this.context.i18(`${t}`,r,i)}}setLocale(e="en_US"){this.locale=e,this.saveItem("locale",this.locale)}setUser(e){this.user=e}async initPlugins(e={}){await this.context.pluginManager.initializePlugin(e)}themeValue(e,t=""){return H3[this.context.config.get("editor.theme")][e]||t}get zIndex(){return this.popupZIndex++}getFile(e){return this.images[e]||e}setStore(e){this.store=e}emit(...e){this.context.store.source=this.EDITOR_ID,this.context.store.emit(...e)}on(...e){const[t,r,i,...a]=e;return this.context.store.on(t,r,i||this,...a)}off(...e){this.context.store.off(...e)}offAll(...e){this.context.store.offAll(...e)}debug(){}command(e,t,...r){return console.warn("command",e,t,r),this.context.stateManager.isPointerUp?this.context.store.emit(`history.${e}`,t,...r):this.context.store.emit(e,...r)}nextTick(e,t=0){this.context.store&&window.setTimeout(()=>{this.context.store.nextTick(e)},t)}get(e){return this.context.modelManager.get((e==null?void 0:e.id)||e)}replaceLocalUrltoRealUrl(e){var t=this.context.selection.currentProject,r={};return t.images.forEach(i=>{e.indexOf(i.local)>-1&&(r[i.local]=i.original)}),Object.keys(r).forEach(i=>{e.indexOf(i)>-1&&(e=e.replace(new RegExp(i,"g"),r[i]))}),e}createModel(e,t=!0){return this.context.modelManager.createModel(e,t)}searchItem(e){return this.context.modelManager.searchItem(e)}get storeKey(){return`__els__.${this.context.config.get("store.key")}`}saveItem(e,t){window.localStorage.setItem(`${this.storeKey}.${e}`,JSON.stringify(t))}loadItem(e){return JSON.parse(window.localStorage.getItem(`${this.storeKey}.${e}`)||JSON.stringify(""))}createCommandMaker(){return new $T(this)}registerElement(e){zi(e)}registerAlias(e){Object.entries(e).forEach(([t,r])=>{Hh(t,r)})}registerUI(e,t={},r=1){this.context.injectManager.registerUI(e,t,r),this.registerElement(t)}isComponentClass(e){return this.context.components.isComponentClass(e)}registerComponent(e,t){this.context.components.registerComponent(e,t)}registerItem(e,t){this.registerComponent(e,t)}registerInspector(e,t){this.context.components.registerInspector(e,t)}registerRenderer(e,t,r){this.context.renderers.registerRenderer(e,t,r)}registerRendererType(e,t){this.context.renderers.registerRendererType(e,t)}getRendererInstance(e,t){return this.context.renderers.getRendererInstance(e,t)}renderer(e){return this.context.renderers.getRenderer(e)}get json(){return this.renderer("json")}loadCommands(e){return this.context.commands.loadCommands(e)}registerCommand(e){return this.context.commands.registerCommand(e)}registerShortCut(e){this.context.shortcuts.registerShortCut(e)}registerPlugin(e){this.context.pluginManager.registerPlugin(e)}registerPluginList(e=[]){e.forEach(t=>this.registerPlugin(t))}registerConfig(e){this.context.config.registerConfig(e)}registerI18nMessage(e,t){this.context.i18n.registerI18nMessage(e,t)}registerI18nMessageWithLocale(e){Object.entries(e).forEach(([t,r])=>{this.registerI18nMessage(t,r)})}registerIcon(e,t){this.context.icon.registerIcon(e,t)}registerMenu(e,t){this.context.menuManager.registerMenu(e,t)}}const ep={x:0,y:0},U3={x:Number.MAX_SAFE_INTEGER,y:Number.MAX_SAFE_INTEGER},tp=0;class W3 extends Y{async created(){this.$editor.registerManager(this.getManagers()),this.$editor.registerPluginList(this.getPlugins()),Array.isArray(this.opt.plugins)&&this.$editor.registerPluginList(this.opt.plugins),await this.$editor.initPlugins(),this.$config.load(),Hr(this.opt.config)&&this.$config.setAll(this.opt.config||{}),this._isPluginLoaded=!0}get isPreLoaded(){return Boolean(this._isPluginLoaded)}get $editor(){return this.__editorInstance||(this.__editorInstance=this.createEditorInstance()),this.__editorInstance}createEditorInstance(){return new Ju}afterRender(){super.afterRender(),this.$el.attr("data-theme",this.$config.get("editor.theme")),this.$el.addClass(window.navigator.userAgent.includes("Windows")?"ua-window":"ua-default"),this.trigger("initialize")}initialize(){super.initialize(),this.__initBodyMoves()}[Tt("editor.theme")](){this.$el.attr("data-theme",this.$config.get("editor.theme"))}getPlugins(){return[]}getManagers(){return{}}__initBodyMoves(){this.__firstMove=new Set,this.__moves=new Set,this.__ends=new Set,this.__modifyBodyMoveSecond(tp)}__modifyBodyMoveSecond(e=tp){this.$config.set("body.move.ms",e);const t=e===0?this.__loopBodyMoves.bind(this):lt(this.__loopBodyMoves.bind(this),this.$config.get("body.move.ms"));this.__funcBodyMoves=t}__loopBodyMoves(){var e=this.pos,t=this.$config.get("bodyEvent"),r=this.lastPos||U3,i=!(r.x===e.x&&r.y===e.y);if(i&&this.__firstMove.size){let a=0;this.__firstMove.forEach(n=>{const o=sr(e.x,e.y,n.xy.x,n.xy.y);if(Math.abs(o)>0){var l=e.x-n.xy.x,c=e.y-n.xy.y;n.func.call(n.context,l,c,"move",t.pressure),a++}}),a>0&&this.__firstMove.clear()}i&&this.__moves.size&&(this.__moves.forEach(a=>{const n=sr(e.x,e.y,a.xy.x,a.xy.y);if(Math.abs(n)>.5){var o=e.x-a.xy.x,l=e.y-a.xy.y;a.func.call(a.context,o,l,"move",t.pressure)}}),this.lastPos=e),window.requestAnimationFrame(this.__funcBodyMoves)}__removeBodyMoves(){var e=this.lastPos,t=this.$config.get("bodyEvent");e&&this.__ends.forEach(r=>{r.func.call(r.context,e.x-r.xy.x,e.y-r.xy.y,"end",t.pressure)}),this.__firstMove.clear(),this.__moves.clear(),this.__ends.clear()}[so(Hl)](e,t,r){this.__firstMove.add({func:e,context:t,xy:r})}[so(Ul)](e,t,r){this.__moves.add({func:e,context:t,xy:r})}[so(Wl)](e,t,r){this.__ends.add({func:e,context:t,xy:r})}[me()](e){var t=e.xy||ep;this.$config.init("bodyEvent",e),this.pos=t}[Ps()](e){var t=e.xy||ep;this.$config.init("bodyEvent",e),this.$commands.emit("change.bodyEvent"),this.pos=t,this.__requestId||(this.__requestId=window.requestAnimationFrame(this.__funcBodyMoves))}[dd()](e){this.$config.set("bodyEvent",e),this.__removeBodyMoves(),window.cancelAnimationFrame(this.__requestId),this.__requestId=null}[hd("window")+Ne(100)](){this.emit(sa)}[M("refreshAll")](){this.emit("refreshProjectList"),this.$commands.emit("refreshArtboard")}[M("changed.locale")](){this.rerender()}}var _D="";const Rs={LEFT:"left",RIGHT:"right",TOP:"top",BOTTOM:"bottom",BODY:"body",INNER:"inner",OUTER:"outer"};class js extends Y{get size(){return this.props.size}}class X3 extends Y{getLayoutElements(){return this.refs}initState(){return{showLeftPanel:ke(this.props.showLeftPanel)?Boolean(this.props.showLeftPanel):!0,showRightPanel:ke(this.props.showRightPanel)?Boolean(this.props.showRightPanel):!0,topSize:ke(this.props.topSize)?Number(this.props.topSize):48,leftSize:ke(this.props.leftSize)?Number(this.props.leftSize):340,rightSize:ke(this.props.rightSize)?Number(this.props.rightSize):280,bottomSize:this.props.bottomSize||20,lastBottomSize:this.props.lastBottomSize||150,minSize:ke(this.props.minSize)?Boolean(this.props.minSize):240,maxSize:ke(this.props.maxSize)?Boolean(this.props.maxSize):500}}getDirection(e){return this.getChildContent(t=>t.props.type===e)}template(){const e=this.getDirection(Rs.TOP),t=this.getDirection(Rs.LEFT),r=this.getDirection(Rs.RIGHT),i=this.getDirection(Rs.BOTTOM),a=this.getDirection(Rs.BODY),n=this.getDirection(Rs.INNER),o=this.getDirection(Rs.OUTER);return C("div",{class:"elf--default-layout-container"},C("div",{class:"elf--default-layout"},e?C("div",{class:"layout-top",ref:"$topPanel"},e):"",C("div",{class:"layout-middle",ref:"$middle"},t?C("div",{class:"layout-left",ref:"$leftPanel"},t):"",C("div",{class:"layout-body",ref:"$bodyPanel"},a),r?C("div",{class:"layout-right",ref:"$rightPanel"},r):"",C("div",{class:"splitter",ref:"$splitter"})),i?C("div",{class:"layout-bottom",ref:"$bottomPanel"},i):"",n),o)}[ne("$splitter")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{left:p.px(e)}}}[ne("$leftPanel")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{width:e}}}[ne("$rightPanel")](){let e=this.state.rightSize;return this.state.showRightPanel||(e=0),{class:kr("layout-right",{closed:!this.state.showRightPanel}),style:{width:e}}}setOptions(e={}){this.setState(e)}[me("$splitter")+xe("moveSplitter")+Se("moveEndSplitter")](){this.leftSize=this.state.leftSize,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.state.maxSize),this.state.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}}var SD="",PD="";class Y3 extends Y{template(){return`
      - `}[C0("$el")](e){Ze.create(e.target).remove()}[se("$el .item > .icon")](e){e.$dt.parent().remove()}getMessageTemplate(e,t,i,r=1e3){return` -
      + `}[pd("$el")](e){ge.create(e.target).remove()}[A("$el .item > .icon")](e){e.$dt.parent().remove()}getMessageTemplate(e,t,r,i=1e3){return` +
      ${t}
      -
      ${i}
      - ${re("close")} +
      ${r}
      + ${z("close")}
      - `}[U(Ff)](e,t,i,r=1e3){const s=Ze.createByHTML(this.getMessageTemplate(e,t,i,1e3));this.$el.prepend(s),window.setTimeout(a=>{a.css("opacity",0)},r,s)}}var Iie="";class mu extends ge{template(){return` + `}[M(Yl)](e,t,r,i=1e3){const a=ge.createByHTML(this.getMessageTemplate(e,t,r,1e3));this.$el.prepend(a),window.setTimeout(n=>{n.css("opacity",0)},i,a)}}var wD="";class Do extends Y{template(){return`
      ${this.getTools()} - +
      ${this.getBody()}
      - `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}[se("$close")](){this.$el.hide()}show(){this.$el.show("block")}hide(){this.$el.hide()}}var Lie="";class gD extends mu{getClassName(){return"elf--export-window"}getTitle(){return"Mini Editor"}initState(){return{selectedIndex:1}}refresh(){this.$el.isShow()&&m2({container:this.refs.$body.el,config:{"editor.design.mode":"item"}})}getBody(){return` + `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}[A("$close")](){this.$el.hide()}show(){this.$el.show("block")}hide(){this.$el.hide()}}var CD="";class K3 extends Do{getClassName(){return"elf--export-window"}getTitle(){return"Mini Editor"}initState(){return{selectedIndex:1}}refresh(){this.$el.isShow()&&wg({container:this.refs.$body.el,config:{"editor.design.mode":"item"}})}getBody(){return`
      - `}[U("showEmbedEditorWindow")](){this.show(),this.refresh()}}ao({EmbedEditorWindow:gD});class mD extends mu{getClassName(){return"elf--export-window"}getTitle(){return"Export"}initState(){return{selectedIndex:1}}getBody(){return` + `}[M("showEmbedEditorWindow")](){this.show(),this.refresh()}}zi({EmbedEditorWindow:K3});class Z3 extends Do{getClassName(){return"elf--export-window"}getTitle(){return"Export"}initState(){return{selectedIndex:1}}getBody(){return`
      @@ -1057,14 +1062,14 @@ var Ate=Object.defineProperty,Rte=Object.defineProperties;var Ote=Object.getOwnP
      - `}[U("showExportWindow")](){this.show(),this.refresh()}refresh(){var e=this.$context.selection.currentProject||{layers:[]},t=` + `}[M("showExportWindow")](){this.show(),this.refresh()}refresh(){var e=this.$context.selection.currentProject||{layers:[]},t=` ${this.makeStyle(e)} -${e.layers.map(s=>this.makeStyle(s)).join(` +${e.layers.map(a=>this.makeStyle(a)).join(` `)} -`,i=` +`,r=` ${this.$editor.renderer("html").renderSVG(e)} ${this.$editor.renderer("html").render(e)} - `,r=e.layers.map(s=>this.$editor.svg.render(s));shiki&&shiki.getHighlighter({theme:"light-plus"}).then(s=>{if(html_beautify){i=html_beautify(i,{indent:2});const a=s.codeToHtml(i,"html");this.refs.$html.html(a),t=html_beautify(t,{indent:2});const o=s.codeToHtml(t,"html");this.refs.$css.html(o),r=html_beautify(r.join(""),{indent:2});const l=s.codeToHtml(r,"html");this.refs.$svgimage.html(l)}})}makeStyle(e){return this.$editor.renderer("html").toExportStyle(e,null)}makeHTML(e){return this.$editor.renderer("html").render(e)}[se("$header .tab-item")](e){var t=+e.$dt.attr("data-value");this.state.selectedIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndex}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedIndex:t},!1))}}ao({ExportWindow:mD});var kie="";class vD extends mu{getClassName(){return"elf--project-window"}getTitle(){return"Project Manager"}initState(){return{selectedIndex:1}}getBody(){return` + `,i=e.layers.map(a=>this.$editor.svg.render(a));shiki&&shiki.getHighlighter({theme:"light-plus"}).then(a=>{if(html_beautify){r=html_beautify(r,{indent:2});const n=a.codeToHtml(r,"html");this.refs.$html.html(n),t=html_beautify(t,{indent:2});const o=a.codeToHtml(t,"html");this.refs.$css.html(o),i=html_beautify(i.join(""),{indent:2});const l=a.codeToHtml(i,"html");this.refs.$svgimage.html(l)}})}makeStyle(e){return this.$editor.renderer("html").toExportStyle(e,null)}makeHTML(e){return this.$editor.renderer("html").render(e)}[A("$header .tab-item")](e){var t=+e.$dt.attr("data-value");this.state.selectedIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndex}"]`).forEach(r=>r.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(r=>r.addClass("selected")),this.setState({selectedIndex:t},!1))}}zi({ExportWindow:Z3});var TD="";class q3 extends Do{getClassName(){return"elf--project-window"}getTitle(){return"Project Manager"}initState(){return{selectedIndex:1}}getBody(){return`
      Project Menu @@ -1073,16 +1078,16 @@ ${this.$editor.renderer("html").render(e)} Project List
      - `}[U("open.projects")](){this.show(),this.refresh()}refresh(){}}ao({ProjectWindow:vD});var Aie="";const u1=new Set;Sg.forEach(n=>{u1.add(n.category)});const fh={};u1.forEach(n=>{Sg.filter(e=>e.category===n).forEach(e=>{fh[e.category]||(fh[e.category]=[]),fh[e.category].push(e)})});const yD={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318"},bD=Bf();class xD extends mu{getClassName(){return"elf--shortcut-window"}getTitle(){return"ShortCuts"}getKeyString(e,t){return(t[e]||t.key).split("+").map(i=>i.trim()).map(i=>{const r=i.toUpperCase();return`${yD[r]||r}`}).join(" + ")}getTemplateForShortcutItem(e){return` + `}[M("open.projects")](){this.show(),this.refresh()}refresh(){}}zi({ProjectWindow:q3});var kD="";const rp=new Set;Ic.forEach(s=>{rp.add(s.category)});const fn={};rp.forEach(s=>{Ic.filter(e=>e.category===s).forEach(e=>{fn[e.category]||(fn[e.category]=[]),fn[e.category].push(e)})});const Q3={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318"},J3=Zl();class e4 extends Do{getClassName(){return"elf--shortcut-window"}getTitle(){return"ShortCuts"}getKeyString(e,t){return(t[e]||t.key).split("+").map(r=>r.trim()).map(r=>{const i=r.toUpperCase();return`${Q3[i]||i}`}).join(" + ")}getTemplateForShortcutItem(e){return`
      ${e.description}
      -
      ${this.getKeyString(bD,e)}
      +
      ${this.getKeyString(J3,e)}
      `}getTemplateForCategory(e,t=[]){return`

      ${e}

      - ${t.map(i=>this.getTemplateForShortcutItem(i)).join("")} + ${t.map(r=>this.getTemplateForShortcutItem(r)).join("")}
      `}getTemplateForLayer(){return` @@ -1103,171 +1108,48 @@ ${this.$editor.renderer("html").render(e)}
      `}getBody(){return`
      - ${Object.keys(fh).map(e=>this.getTemplateForCategory(e,fh[e])).join("")} -
      - `}[U("showShortcutWindow")](){this.show()}}ao({ShortcutWindow:xD});class gh extends ge{components(){return{NotificationView:fD}}template(){return D("div",{class:"elf--popup-manager"},W("ExportWindow"),W("EmbedEditorWindow"),W("ProjectWindow"),W("ShortcutWindow"),W("NotificationView"),this.$injectManager.generate("popup",!0))}}class _D extends ph{afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}getPlugins(){return lO}initState(){return{leftSize:340}}template(){return D("div",{class:"elf-studio blank-editor"},D(pD,{showLeftPanel:this.$config.get("show.left.panel"),showRightPanel:this.$config.get("show.right.panel"),leftSize:340,rightSize:280,ref:"$layout"},D(wl,{type:"top"},D(Ik,null)),D(wl,{type:"left",resizable:"true"},D(e$,null)),D(wl,{type:"right"},D(QM,null)),D(wl,{type:"body"},D(XM,null)),D(wl,{type:"inner"},D(dh,null)),D(wl,{type:"outer"},D(hh,null),D(gh,null))))}[$e("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[$e("$leftPanel")](){return{style:{width:this.state.leftSize,display:this.$config.true("show.left.panel")?"block":"none"}}}[$e("$rightPanel")](){return{style:{display:this.$config.true("show.right.panel")?"block":"none"}}}[qe("$splitter")+at("moveSplitter")+lt("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$splitter"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.emit("resizeEditor")}[Qt("show.left.panel")](){this.children.$layout.setOptions({showLeftPanel:this.$config.get("show.left.panel")}),this.nextTick(()=>{this.emit(ln)})}[Qt("show.right.panel")](){this.children.$layout.setOptions({showLeftPanel:this.$config.get("show.right.panel")}),this.nextTick(()=>{this.emit(ln)})}[U(Df)](){this.$el.toggleFullscreen()}}var Rie="";class SD extends ge{template(){return` -
      -
      - -
      -
      -
      - -
      HEX
      -
      -
      -
      -
      - -
      R
      -
      -
      - -
      G
      -
      -
      - -
      B
      -
      -
      - -
      A
      -
      -
      -
      -
      - -
      H
      -
      -
      - -
      %
      -
      S
      -
      -
      - -
      %
      -
      L
      -
      -
      - -
      A
      -
      -
      -
      - `}get manager(){return this.parent.manager}setCurrentFormat(e){this.format=e,this.initFormat()}initFormat(){var e=this.format||"hex";["hex","rgb","hsl"].filter(t=>t!==e).forEach(t=>{this.$el.removeClass(t)}),this.$el.addClass(e)}nextFormat(){var e=this.format||"hex",t="hex";e=="hex"?t="rgb":e=="rgb"?t="hsl":e=="hsl"&&(this.parent.alpha==1?t="hex":t="rgb"),this.format=t,this.initFormat(),this.parent.changeFormat(this.format)}goToFormat(e){this.format=e,(e==="rgb"||e==="hsl")&&this.initFormat(),this.parent.changeFormat(this.format)}getFormat(){return this.format||"hex"}changeRgbColor(){this.parent.lastUpdateColor({type:"rgb",r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()})}changeHslColor(){this.parent.lastUpdateColor({type:"hsl",h:this.refs.$hsl_h.int(),s:this.refs.$hsl_s.int(),l:this.refs.$hsl_l.int(),a:this.refs.$hsl_a.float()})}hasValue(e){return e.target.value!==""}[fi("$rgb_r")+Qe("hasValue")](){this.changeRgbColor()}[fi("$rgb_g")+Qe("hasValue")](){this.changeRgbColor()}[fi("$rgb_b")+Qe("hasValue")](){this.changeRgbColor()}[fi("$rgb_a")+Qe("hasValue")](){this.changeRgbColor()}[fi("$hsl_h")+Qe("hasValue")](){this.changeHslColor()}[fi("$hsl_s")+Qe("hasValue")](){this.changeHslColor()}[fi("$hsl_l")+Qe("hasValue")](){this.changeHslColor()}[fi("$hsl_a")+Qe("hasValue")](){this.changeHslColor()}[Pr("$hexCode")+Qe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[M0("$hexCode")+Qe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[se("$formatChangeButton")](){this.nextFormat()}[se("$el .information-item.hex .input-field .title")](){this.goToFormat("hex")}[se("$el .information-item.rgb .input-field .title")](){this.goToFormat("hsl")}[se("$el .information-item.hsl .input-field .title")](){this.goToFormat("rgb")}setRGBInput(){this.refs.$rgb_r.val(this.manager.rgb.r),this.refs.$rgb_g.val(this.manager.rgb.g),this.refs.$rgb_b.val(this.manager.rgb.b),this.refs.$rgb_a.val(this.manager.alpha)}setHSLInput(){this.refs.$hsl_h.val(this.manager.hsl.h),this.refs.$hsl_s.val(this.manager.hsl.s),this.refs.$hsl_l.val(this.manager.hsl.l),this.refs.$hsl_a.val(this.manager.alpha)}setHexInput(){this.refs.$hexCode.val(this.manager.toString("hex"))}setValue(){this.refresh()}refresh(){this.setCurrentFormat(this.manager.format),this.setRGBInput(),this.setHSLInput(),this.setHexInput()}}class wD extends ge{initState(){return{hueColor:"rgba(0, 0, 0, 1)",s:0,v:0}}template(){return` -
      -
      -
      -
      -
      -
      -
      - `}afterRender(){this.rect=this.$el.rect()}[$e("$el")](){return{style:{"background-color":this.state.hueColor}}}[$e("$drag_pointer")](){(!this.rect||this.rect.width===0)&&(this.rect=this.$el.rect());const e=this.rect.width*this.state.s,t=this.rect.height*(1-this.state.v);return{style:{left:e,top:t}}}[qe("$el")+at("movePointer")+lt("moveEndPointer")](){this.rect=this.$el.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}moveEndPointer(){this.parent.changeEndColor()}refreshColorUI(){const e=this.$config.get("bodyEvent"),t=this.rect.left,i=this.rect.right,r=this.rect.top,s=this.rect.bottom,a=Math.min(i,Math.max(t,e.clientX)),o=Math.min(s,Math.max(r,e.clientY)),l=i-t,c=s-r;var h=(a-t)/l,d=(c-(o-r))/c;this.parent.changeColor({type:"hsv",s:h,v:d})}setValue(e,t,i){this.setState({s:e,v:t,hueColor:i})}}class MD extends ge{initState(){return{value:"rgba(0, 0, 0, 1)"}}template(){return"
      "}[$e("$el")](){return{style:{"background-color":this.state.value}}}setValue(e){this.setState({value:e})}}class $D extends ge{initState(){return{hue:0,minValue:0,maxValue:360}}template(){return` -
      -
      -
      -
      -
      - `}[$e("$bar")](){const e=this.state.hue;return{style:{left:y.makePercent(e,360)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[qe("$container")+at("movePointer")+lt("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,r=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({h:r*this.state.maxValue,type:"hsv"})}setValue(e){this.setState({hue:e})}}class PD extends ge{initState(){return{colorbar:bi("rgba(0, 0, 0, 1)"),opacity:0,minValue:0,maxValue:100}}template(){return` -
      -
      -
      -
      -
      -
      - `}[$e("$colorbar")](){const e=rt(this.state.colorbar);e.a=0;const t=Is(e,"rgb");e.a=1;const i=Is(e,"rgb");return{style:{background:`linear-gradient(to right, ${t}, ${i})`}}}[$e("$bar")](){const e=this.state.opacity*100;return{style:{left:y.percent(e)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[qe("$container")+at("movePointer")+lt("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,r=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({a:r.toFixed(2)})}setValue(e,t){this.setState({opacity:t,colorbar:e})}}class TD{constructor(){this.initialize()}initialize(){this.state={rgb:{},hsl:{},hsv:{},alpha:1,format:"hex"}}get hsv(){return this.state.hsv}get rgb(){return this.state.rgb}get hsl(){return this.state.hsl}get hex(){return this.state.hex}get alpha(){return typeof this.state.alpha=="undefined"?1:this.state.alpha}get format(){return this.state.format}changeFormat(e){this.state.format=e}initColor(e){this.changeColor(e)}changeColor(e){e=e||"#FF0000",typeof e=="string"&&(e=bi(e)),this.state.alpha=typeof e.a!="undefined"?e.a:this.state.alpha,this.state.format=e.type!="hsv"?e.type||this.state.format:this.state.format,e.type=="hsl"?(this.state.hsl=P(P({},this.state.hsl),e),this.state.rgb=Hc(this.state.hsl),this.state.hsv=by(e)):e.type=="hex"?(this.state.rgb=P(P({},this.state.rgb),e),this.state.hsl=Cs(this.state.rgb),this.state.hsv=Gc(e)):e.type=="rgb"?(this.state.rgb=P(P({},this.state.rgb),e),this.state.hsl=Cs(this.state.rgb),this.state.hsv=Gc(e)):e.type=="hsv"&&(this.state.hsv=P(P({},this.state.hsv),e),this.state.rgb=du(this.state.hsv),this.state.hsl=Dy(this.state.hsv))}getHueColor(){return By(this.state.hsv.h/360)}toString(e){e=e||this.state.format;var t=this.state[e]||this.state.rgb;return Is(Ve(P({},t),{a:this.state.alpha}),e)}toColor(e){return e=(e||this.state.format).toLowerCase(),this.toString(e)}}class CD extends ge{created(){this.manager=new TD}initState(){const e=this.props.value||"rgba(0, 0, 0, 1)";return this.manager.initColor(e),{key:this.props.key,value:this.manager.toString()}}updateData(e={}){this.setState(e,!1),this.modifyColorPicker()}modifyColorPicker(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initColor(e,t){this.manager.changeColor(e,t),this.refresh()}changeColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.updateData({value:this.manager.toColor()})}[Me("selectColorAssets")](e,t){this.lastUpdateColor(t)}changeFormat(e){this.manager.changeFormat(e),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}lastUpdateColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}changeEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}refresh(){const e=this.manager.toColor();this.children.$palette.setValue(this.manager.hsv.s,this.manager.hsv.v,this.manager.getHueColor()),this.children.$opacity.setValue(this.manager.rgb,this.manager.alpha),this.children.$hue.setValue(this.manager.hsv.h),this.children.$colorview.setValue(e),this.children.$information.setValue()}components(){return{Hue:$D,Opacity:PD,ColorView:MD,Palette:wD,ColorInformation:SD}}template(){return` -
      -
      - ${W("Palette",{ref:"$palette"})} -
      - ${W("Hue",{ref:"$hue"})} - ${W("Opacity",{ref:"$opacity"})} -
      - ${W("ColorView",{ref:"$colorview"})} -
      - ${W("ColorInformation",{ref:"$information"})} - ${this.$context.injectManager.generate("colorpicker")} - ${W("ColorAssetsEditor",{ref:"$colorAsset",key:"colorAssets",onchange:"selectColorAssets"})} -
      -
      - `}}var Oie="",zie="";class Tn extends ge{template(){return` -
      -
      - - - ${this.getTools()} - - -
      -
      ${this.getBody()}
      - -
      - `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}onClose(){}[se("$close")](){this.$el.hide(),this.onClose()}setTitle(e){this.refs.$title.$("label").text(e)}[qe("$title")+at("movePopupTitle")+lt("endPopupTitle")](){this.x=y.parse(this.$el.css("left")),this.y=y.parse(this.$el.css("top"))}movePopupTitle(e,t){var i=y.px(this.x.value+e),r=y.px(this.y.value+t);this.$el.css({left:i,top:r,right:"auto",bottom:"auto"})}show(e=200){var t=28,i=320,r=this.$el.css("top"),s=this.$el.css("left"),a=r!=="auto"?y.parse(r):110,o=s!=="auto"?y.parse(s):document.body.clientWidth-i-t-e;this.$el.css({top:y.px(a),left:y.px(o),"z-index":this.$editor.zIndex}).show("inline-block")}makeRect(e,t,i){const s=this.$config.get("editor.layout.elements").$bodyPanel.rect();let a=s.left+s.width-e-10,o=i.top+t>s.top+s.height?s.top+s.height-t-10:i.top;return o<10&&(o=10),{top:o,left:a,width:e,height:t}}showByRect(e){this.$el.css({top:y.px(e.top),left:y.px(e.left),width:y.px(e.width),height:y.px(e.height),"z-index":this.$editor.zIndex}).show("inline-block")}hide(){this.$el.hide()}[U("hidePropertyPopup")](){this.hide()}[qe("$resizer")+at("moveResizer")](){this.width=y.parse(this.$el.css("width")),this.height=y.parse(this.$el.css("height"))}moveResizer(e,t){this.$el.css({width:Math.min(this.width+e,1e3),height:Math.min(this.height+t,700)})}}class ED extends Tn{getTitle(){return this.$i18n("colorpicker.popup.title")}getClassName(){return"compact elf--colorpicker-popup"}initState(){return{color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEvent,this.state.color,this.params)}updateEndData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEndEvent,this.state.color,this.params)}getBody(){return` -
      -
      - ${W("EmbedColorPicker",{ref:"$color",value:this.state.color,onchange:e=>this.updateData({color:e}),onchangeend:e=>this.updateEndData({color:e})})} -
      - `}[ve("$projectColors")](){var e=this.$context.selection.currentProject||{colors:[]},t=e.colors;return t.map(i=>` -
      -
      -
      `)}[se("$projectColors .color-view")](e){this.updateData({color:e.$dt.attr("data-color")}),this.children.$color.setValue(this.state.color)}[U("showColorPickerPopup")](e,t,i){if(e.changeEvent=e.changeEvent||"changeFillPopup",!(e.target instanceof ds))throw new Error("ColorPicker needs data.target");this.params=t,this.setState(e,!1),this.children.$color.setValue(this.state.color),this.showByRect(this.makeRect(245,500,i))}[U("hideColorPickerPopup")](){this.hide()}}class ID extends ge{initState(){return{value:this.props.value||"rgba(0, 0, 0, 1)"}}template(){return` -
      - ${W("ColorPickerEditor",{ref:"$colorpicker",key:"colorpicker",value:this.state.value,onchange:"localChangeColor",onchangeend:"localLastUpdate"})} + ${Object.keys(fn).map(e=>this.getTemplateForCategory(e,fn[e])).join("")}
      - `}[Me("localChangeColor")](e,t){this.parent.trigger(this.props.onchange,t)}[Me("localLastUpdate")](e,t){this.parent.trigger(this.props.onchangeend,t)}setValue(e){this.state.value=e,this.children.$colorpicker.initColor(e)}refresh(){this.children.$colorpicker.initColor(this.props.value)}}function Mg(n){n.registerElement({ColorPickerEditor:CD,EmbedColorPicker:ID}),n.registerUI("popup",{ColorPickerPopup:ED})}var LD=[Dc,Fc,Nc,Vc,ch,Mg];class kD extends ph{components(){return{PopupManager:gh,KeyboardManager:dh,IconManager:hh}}getPlugins(){return LD}createEditorInstance(){return new wg({ignoreManagers:["ShortCutManager"]})}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}initState(){return{inspector:this.props.inspector||[],onChange:this.props.onChange||(()=>!0),open:!(Dn(this.props.open)&&this.props.open===!1),leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
      -
      -
      -
      Close Controls
      -
      - - ${W("KeyboardManager")} - ${W("PopupManager")} - ${W("IconManager")} -
      - `}[se("$close")](){this.setState({open:!this.state.open},!1),this.bindData("$main"),this.bindData("$close")}[$e("$main")](){return{"data-open-status":this.state.open}}[$e("$close")](){return{text:this.state.open?"Close Controls":"Open Controls"}}[ve("$body")](){const e=this.state.inspector;return W("ComponentEditor",{ref:"$comp",inspector:e,onchange:"changeComponent"})}getValue(){return this.children.$comp.getValue()}[Me("changeComponent")](e,t){Ue(this.state.onChange)&&this.emit(this.state.onChange,this,e,t)}}var Vie="";class p1{constructor(e){this.editor=e,this.clipboard=[]}get length(){return this.clipboard.length}clear(){this.clipboard=[]}get isEmpty(){return this.clipboard.length==0}get last(){return this.clipboard[this.clipboard.length-1]}push(e){this.clipboard.push(e)}pop(){return this.clipboard.pop()}}class f1{constructor(e){this.$editor=e,this.$context=e.context,this.currentIndex=-1,this.undoHistories=[],this.redoHistories=[],this.selection={}}get length(){return this.undoHistories.length}get selectedIds(){return Object.keys(this.selection)}createCommand(e){return this.$context.stateManager.isPointerUp?`history.${e}`:e}saveSelection(e={}){this.selection=this.$editor.context.selection.toCloneObject()}getUndoValues(e={}){let t={};return Object.keys(e).forEach(i=>{t[i]={};const r=this.selection[i]||this.$editor.context.selection.itemsByIds(i)[0],s=e[i];Object.keys(s).forEach(a=>{t[i][a]=r[a]})}),t}add(e,t,i){const r=window.performance.now(),s=this.undoHistories[this.undoHistories.length-1],a={message:e,command:t,data:i,time:r};return s&&s.message===e&&r-s.time{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}redo(){if(this.currentIndex>this.length)return;this.currentIndex<0&&this.currentIndex++;const e=this.undoHistories[this.currentIndex];e&&e.command&&(this.currentIndex++,e.command.redo(this.$editor,e.data),this.$editor.debug(e),this.$editor.nextTick(()=>{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}}class g1{constructor(e){this.editor=e,this.lockList={}}get(e){return this.lockList[e]}set(e,t){this.lockList[e]=!0}toggle(e){this.lockList[e]?delete this.lockList[e]:this.lockList[e]=!0}}const AD=()=>!0;class m1{constructor(e){this.editor=e,this.context=this.editor.context,this.version="0.0.0",this.name="",this.description="",this.items=new Map,this.projects=[]}load(e=void 0,t={origin:"*"}){var r;const i=e||this.editor.loadItem("model");this.items.clear(),this.version=i==null?void 0:i.version,this.name=i==null?void 0:i.name,this.description=i==null?void 0:i.description,(r=i==null?void 0:i.projects)==null||r.forEach(s=>{this.createModel(s)}),this.projects.length===0&&this.createProject()}createProject(){this.createModel({itemType:"project",name:"New Project"})}getProjectByIndex(e=0){return this.get(this.projects[e])}get(e){return this.items.get(e)}set(e,t){this.items.set(e,t),this.setChanged("set",e,t)}remove(e){const t=this.items.get(e),i=t.parent.children,r=i.indexOf(e);t.reset({removed:!0,removedIndex:r,removedLeftSibling:r>0?i[r-1]:null,removedRightSibling:rt.get("removedRightSibling"))-1,0,e):t.get("removedLeftSibling")&&!t.get("removedRightSibling")?i.children.splice(i.children.findIndex(()=>t.get("removedLeftSibling"))+1,0,e):i.children.splice(t.get("removedIndex"),0,e),t.removeField("removed"),t.removeField("removedLeftSibling"),t.removeField("removedRightSibling"),t.removeField("removedIndex"),this.setChanged("recover",e)}clear(){this.items.clear()}toJSON(){return{version:this.version,name:this.name,description:this.description,projects:this.projects.map(e=>this.get(e).toJSON())}}setChanged(e,t,i){this.editor.emit("changed",e,t,i)}removeChild(e,t){const i=this.get(e);i.reset({children:i.children.filter(r=>r!==t)}),this.setChanged("removeChild",e,{childId:t})}get components(){return this.context.components}searchItem(e){return this.get(e)}searchLayers(e,t){const i=this.get(e);return this.get(i.children.find(r=>r===t))}searchItemsById(e){return e.map(t=>this.get(t))}findGroupItem(e){const t=this.get(e);return t.hasChildren()||t.parent&&(t.parent.is("project")||t.parent.is("artboard")||t.isBooleanItem)?t:t.parent&&this.findGroupItem(t.parentId)}convertGroupItems(e){const t={};return e.forEach(i=>{if(i.parent&&i.isNot("project")&&i.parent.hasLayout()){const r=i.parent;t[r.id]=r}else{const r=this.findGroupItem(i.id)||i;t[r.id]=r}}),Object.values(t).filter(i=>i.isNot("project"))}searchLiveItemsById(e){return e.map(t=>this.get(t)).filter(t=>!t.removed)}markRemove(e=[]){e.forEach(t=>{this.remove(t)}),this.setChanged("markRemove",e,{isLayer:!0})}markRemoveProject(e){const t=this.projects.findIndex(i=>i===e);return this.projects.splice(t,1),this.get(e).removed=!0,this.setChanged("markRemoveProject",[e],{isProject:!0}),t}unmarkRemove(e=[]){e.forEach(t=>{this.recover(t)}),this.setChanged("unmarkRemove",e,{isLayer:!0})}unmarkRemoveProject(e,t){this.projects.splice(t,0,e),this.get(e).removed=!1,this.setChanged("unmarkRemoveProject",[e],{removed:!0,isProject:!0})}createModel(e,t=!0,i={origin:"*"}){const r=e.layers;delete e.layers;let s;this.get(e.id)?(s=this.get(e.id),s.reset(e)):(s=this.components.createComponent(e.itemType,P({},e)),s.setModelManager(this)),t&&(this.set(s.id,s),s.is("project")&&(this.projects=[...new Set([...this.projects,s.id])]));const a=(r||[]).map(o=>this.createModel(Ve(P({},o),{parentId:s.id}),!0,i));return a.length&&s.reset({children:a.map(o=>o.id)},i),s}getAllLayers(e,t=AD){var i=[];const r=this.get(e);let s=r.children.length;for(let a=s;a--;){let o=r.children[a];i.push(...this.getAllLayers(o,t))}return Ue(t)&&t(r)&&i.push(r),i}getLayers(e){var i;const t=this.get(e);return((i=t==null?void 0:t.children)==null?void 0:i.map(r=>this.get(r)))||[]}eachLayers(e,t){const i=this.get(e);let r=i.children.length;for(let s=r;s--;){let a=i.children[s];t(this.get(a))}}mapLayers(e,t){return this.get(e).children.map(r=>t(this.get(r)))}getParent(e){var t;return this.get((t=this.get(e))==null?void 0:t.parentId)}getDepth(e){const t=this.getParent(e);return t?this.getDepth(t.id)+1:1}getPath(e,t=null){const i=this.get(e)||t,r=this.getParent(e);if(!r)return[i];const s=this.getPath(r.id);return s.push(i),s}clone(e,t=!0){const i=this.get(e),r=i.toCloneObject(t),s=this.createModel(r);return s.setParentId(i.parentId),s}}var v1={exports:{}},RD={},OD=Object.freeze(Object.defineProperty({__proto__:null,default:RD},Symbol.toStringTag,{value:"Module"})),$g=MR(OD);(function(n,e){var t=function(){var i=typeof document!="undefined"&&document.currentScript?document.currentScript.src:void 0;return typeof __filename!="undefined"&&(i=i||__filename),function(r){r=r||{};var s;s||(s=typeof r!="undefined"?r:{});var a;s.ready=new Promise(function(M){a=M}),function(M){var $={};M.loadCmdsTypedArray=function(me){for(var Ce=0,Ie=0;Ie=H);)++I;if(16ie?H+=String.fromCharCode(ie):(ie-=65536,H+=String.fromCharCode(55296|ie>>10,56320|ie&1023))}}else H+=String.fromCharCode(ie)}return H}function T(M,$,I){var H=ye;if(0=le){var ke=M.charCodeAt(++ie);le=65536+((le&1023)<<10)|ke&1023}if(127>=le){if($>=I)break;H[$++]=le}else{if(2047>=le){if($+1>=I)break;H[$++]=192|le>>6}else{if(65535>=le){if($+2>=I)break;H[$++]=224|le>>12}else{if($+3>=I)break;H[$++]=240|le>>18,H[$++]=128|le>>12&63}H[$++]=128|le>>6&63}H[$++]=128|le&63}}H[$]=0}}var V=typeof TextDecoder!="undefined"?new TextDecoder("utf-16le"):void 0;function oe(M,$){for(var I=M>>1,H=I+$/2;!(I>=H)&&Re[I];)++I;if(I<<=1,32>1];if(ie==0||I==$/2)return H;++I,H+=String.fromCharCode(ie)}}function B(M,$,I){if(I===void 0&&(I=2147483647),2>I)return 0;I-=2;var H=$;I=I<2*M.length?I/2:M.length;for(var ie=0;ie>1]=M.charCodeAt(ie),$+=2;return J[$>>1]=0,$-H}function Q(M){return 2*M.length}function ee(M,$){for(var I=0,H="";!(I>=$/4);){var ie=et[M+4*I>>2];if(ie==0)break;++I,65536<=ie?(ie-=65536,H+=String.fromCharCode(55296|ie>>10,56320|ie&1023)):H+=String.fromCharCode(ie)}return H}function te(M,$,I){if(I===void 0&&(I=2147483647),4>I)return 0;var H=$;I=H+I-4;for(var ie=0;ie=le){var ke=M.charCodeAt(++ie);le=65536+((le&1023)<<10)|ke&1023}if(et[$>>2]=le,$+=4,$+4>I)break}return et[$>>2]=0,$-H}function q(M){for(var $=0,I=0;I=H&&++I,$+=4}return $}var ne,ce,ye,J,Re,et,nt,be,Dt,xt=s.INITIAL_MEMORY||16777216;s.wasmMemory?S=s.wasmMemory:S=new WebAssembly.Memory({initial:xt/65536,maximum:xt/65536}),S&&(ne=S.buffer),xt=ne.byteLength;var vt=ne;ne=vt,s.HEAP8=ce=new Int8Array(vt),s.HEAP16=J=new Int16Array(vt),s.HEAP32=et=new Int32Array(vt),s.HEAPU8=ye=new Uint8Array(vt),s.HEAPU16=Re=new Uint16Array(vt),s.HEAPU32=nt=new Uint32Array(vt),s.HEAPF32=be=new Float32Array(vt),s.HEAPF64=Dt=new Float64Array(vt),et[3e3]=5255040;function w(M){for(;0>2])}var pt={},F={},Le={};function ot(M){if(M===void 0)return"_unknown";M=M.replace(/[^a-zA-Z0-9_]/g,"$");var $=M.charCodeAt(0);return 48<=$&&57>=$?"_"+M:M}function Fe(M,$){return M=ot(M),new Function("body","return function "+M+`() { + `}[M("showShortcutWindow")](){this.show()}}zi({ShortcutWindow:e4});class t4 extends Y{components(){return{NotificationView:Y3}}template(){return C("div",{class:"elf--popup-manager"},R("ExportWindow"),R("EmbedEditorWindow"),R("ProjectWindow"),R("ShortcutWindow"),R("NotificationView"),this.$injectManager.generate("popup",!0))}}class Ec extends W3{afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}getPlugins(){return AC}initState(){return{leftSize:340}}getTopPanel(){return C(js,{type:"top"},C(nP,null))}getLeftPanel(){return C(js,{type:"left",resizable:!0},C(Tv,null))}getRightPanel(){return C(js,{type:"right"},C(Cv,null))}getBodyPanel(){return C(js,{type:"body"},C(xv,null))}getInnerPanel(){return C(js,{type:"inner"},C(NC,null))}getOuterPanel(){return C(js,{type:"outer"},C(FC,null),C(t4,null),C(DC,null))}template(){return C("div",{class:"elf-studio blank-editor"},C(X3,{showLeftPanel:this.$config.get("show.left.panel"),showRightPanel:this.$config.get("show.right.panel"),leftSize:340,rightSize:280,ref:"$layout"},this.getTopPanel(),this.getLeftPanel(),this.getRightPanel(),this.getBodyPanel(),this.getInnerPanel(),this.getOuterPanel()))}refresh(){super.refresh(),this.emit("resizeEditor")}[M(Xl)](){this.$el.toggleFullscreen()}}var MD="";class r4{constructor(e){this.editor=e,this.clipboard=[]}get length(){return this.clipboard.length}clear(){this.clipboard=[]}get isEmpty(){return this.clipboard.length==0}get last(){return this.clipboard[this.clipboard.length-1]}push(e){this.clipboard.push(e)}pop(){return this.clipboard.pop()}}class i4{constructor(e){this.$editor=e,this.$context=e.context,this.currentIndex=-1,this.undoHistories=[],this.redoHistories=[],this.selection={}}get length(){return this.undoHistories.length}get selectedIds(){return Object.keys(this.selection)}createCommand(e){return this.$context.stateManager.isPointerUp?`history.${e}`:e}saveSelection(e={}){this.selection=this.$editor.context.selection.toCloneObject()}getUndoValues(e={}){let t={};return Object.keys(e).forEach(r=>{t[r]={};const i=this.selection[r]||this.$editor.context.selection.itemsByIds(r)[0],a=e[r];Object.keys(a).forEach(n=>{t[r][n]=i[n]})}),t}add(e,t,r){const i=window.performance.now(),a=this.undoHistories[this.undoHistories.length-1],n={message:e,command:t,data:r,time:i};return a&&a.message===e&&i-a.time{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}redo(){if(this.currentIndex>this.length)return;this.currentIndex<0&&this.currentIndex++;const e=this.undoHistories[this.currentIndex];e&&e.command&&(this.currentIndex++,e.command.redo(this.$editor,e.data),this.$editor.debug(e),this.$editor.nextTick(()=>{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}}class s4{constructor(e){this.editor=e,this.lockList={}}get(e){return this.lockList[e]}set(e,t){this.lockList[e]=!0}toggle(e){this.lockList[e]?delete this.lockList[e]:this.lockList[e]=!0}}const a4=()=>!0;class n4{constructor(e){this.editor=e,this.context=this.editor.context,this.version="0.0.0",this.name="",this.description="",this.items=new Map,this.projects=[]}load(e=void 0,t={origin:"*"}){var i;const r=e||this.editor.loadItem("model");this.items.clear(),this.version=r==null?void 0:r.version,this.name=r==null?void 0:r.name,this.description=r==null?void 0:r.description,(i=r==null?void 0:r.projects)==null||i.forEach(a=>{this.createModel(a)}),this.projects.length===0&&this.createProject()}createProject(){this.createModel({itemType:"project",name:"New Project"})}getProjectByIndex(e=0){return this.get(this.projects[e])}get(e){return this.items.get(e)}set(e,t){this.items.set(e,t),this.setChanged("set",e,t)}remove(e){const t=this.items.get(e),r=t.parent.children,i=r.indexOf(e);t.reset({removed:!0,removedIndex:i,removedLeftSibling:i>0?r[i-1]:null,removedRightSibling:it.get("removedRightSibling"))-1,0,e):t.get("removedLeftSibling")&&!t.get("removedRightSibling")?r.children.splice(r.children.findIndex(()=>t.get("removedLeftSibling"))+1,0,e):r.children.splice(t.get("removedIndex"),0,e),t.removeField("removed"),t.removeField("removedLeftSibling"),t.removeField("removedRightSibling"),t.removeField("removedIndex"),this.setChanged("recover",e)}clear(){this.items.clear()}toJSON(){return{version:this.version,name:this.name,description:this.description,projects:this.projects.map(e=>this.get(e).toJSON())}}setChanged(e,t,r){this.editor.emit("changed",e,t,r)}removeChild(e,t){const r=this.get(e);r.reset({children:r.children.filter(i=>i!==t)}),this.setChanged("removeChild",e,{childId:t})}get components(){return this.context.components}searchItem(e){return this.get(e)}searchLayers(e,t){const r=this.get(e);return this.get(r.children.find(i=>i===t))}searchItemsById(e){return e.map(t=>this.get(t))}findGroupItem(e){const t=this.get(e);return t.hasChildren()||t.parent&&(t.parent.is("project")||t.parent.is("artboard")||t.isBooleanItem)?t:t.parent&&this.findGroupItem(t.parentId)}convertGroupItems(e){const t={};return e.forEach(r=>{if(r.parent&&r.isNot("project")&&r.parent.hasLayout()){const i=r.parent;t[i.id]=i}else{const i=this.findGroupItem(r.id)||r;t[i.id]=i}}),Object.values(t).filter(r=>r.isNot("project"))}searchLiveItemsById(e){return e.map(t=>this.get(t)).filter(t=>!t.removed)}markRemove(e=[]){e.forEach(t=>{this.remove(t)}),this.setChanged("markRemove",e,{isLayer:!0})}markRemoveProject(e){const t=this.projects.findIndex(r=>r===e);return this.projects.splice(t,1),this.get(e).removed=!0,this.setChanged("markRemoveProject",[e],{isProject:!0}),t}unmarkRemove(e=[]){e.forEach(t=>{this.recover(t)}),this.setChanged("unmarkRemove",e,{isLayer:!0})}unmarkRemoveProject(e,t){this.projects.splice(t,0,e),this.get(e).removed=!1,this.setChanged("unmarkRemoveProject",[e],{removed:!0,isProject:!0})}createModel(e,t=!0,r={origin:"*"}){const i=e.layers;delete e.layers;let a;this.get(e.id)?(a=this.get(e.id),a.reset(e)):(a=this.components.createComponent(e.itemType,b({},e)),a.setModelManager(this)),t&&(this.set(a.id,a),a.is("project")&&(this.projects=[...new Set([...this.projects,a.id])]));const n=(i||[]).map(o=>this.createModel(se(b({},o),{parentId:a.id}),!0,r));return n.length&&a.reset({children:n.map(o=>o.id)},r),a}getAllLayers(e,t=a4){var r=[];const i=this.get(e);let a=i.children.length;for(let n=a;n--;){let o=i.children[n];r.push(...this.getAllLayers(o,t))}return de(t)&&t(i)&&r.push(i),r}getLayers(e){var r;const t=this.get(e);return((r=t==null?void 0:t.children)==null?void 0:r.map(i=>this.get(i)))||[]}eachLayers(e,t){const r=this.get(e);let i=r.children.length;for(let a=i;a--;){let n=r.children[a];t(this.get(n))}}mapLayers(e,t){return this.get(e).children.map(i=>t(this.get(i)))}getParent(e){var t;return this.get((t=this.get(e))==null?void 0:t.parentId)}getDepth(e){const t=this.getParent(e);return t?this.getDepth(t.id)+1:1}getPath(e,t=null){const r=this.get(e)||t,i=this.getParent(e);if(!i)return[r];const a=this.getPath(i.id);return a.push(r),a}clone(e,t=!0){const r=this.get(e),i=r.toCloneObject(t),a=this.createModel(i);return a.setParentId(r.parentId),a}}var ip={exports:{}},o4={},l4=Object.freeze(Object.defineProperty({__proto__:null,default:o4},Symbol.toStringTag,{value:"Module"})),Lc=eC(l4);(function(s,e){var t=function(){var r=typeof document!="undefined"&&document.currentScript?document.currentScript.src:void 0;return typeof __filename!="undefined"&&(r=r||__filename),function(i){i=i||{};var a;a||(a=typeof i!="undefined"?i:{});var n;a.ready=new Promise(function(f){n=f}),function(f){var m={};f.loadCmdsTypedArray=function(N){for(var q=0,J=0;J=k);)++_;if(16<_-m&&f.subarray&&ce)return ce.decode(f.subarray(m,_));for(k="";m<_;){var j=f[m++];if(j&128){var D=f[m++]&63;if((j&224)==192)k+=String.fromCharCode((j&31)<<6|D);else{var ee=f[m++]&63;j=(j&240)==224?(j&15)<<12|D<<6|ee:(j&7)<<18|D<<12|ee<<6|f[m++]&63,65536>j?k+=String.fromCharCode(j):(j-=65536,k+=String.fromCharCode(55296|j>>10,56320|j&1023))}}else k+=String.fromCharCode(j)}return k}function ye(f,m,_){var k=tt;if(0<_){_=m+_-1;for(var j=0;j=D){var ee=f.charCodeAt(++j);D=65536+((D&1023)<<10)|ee&1023}if(127>=D){if(m>=_)break;k[m++]=D}else{if(2047>=D){if(m+1>=_)break;k[m++]=192|D>>6}else{if(65535>=D){if(m+2>=_)break;k[m++]=224|D>>12}else{if(m+3>=_)break;k[m++]=240|D>>18,k[m++]=128|D>>12&63}k[m++]=128|D>>6&63}k[m++]=128|D&63}}k[m]=0}}var ve=typeof TextDecoder!="undefined"?new TextDecoder("utf-16le"):void 0;function Re(f,m){for(var _=f>>1,k=_+m/2;!(_>=k)&&ut[_];)++_;if(_<<=1,32<_-f&&ve)return ve.decode(tt.subarray(f,_));for(_=0,k="";;){var j=ie[f+2*_>>1];if(j==0||_==m/2)return k;++_,k+=String.fromCharCode(j)}}function Q(f,m,_){if(_===void 0&&(_=2147483647),2>_)return 0;_-=2;var k=m;_=_<2*f.length?_/2:f.length;for(var j=0;j<_;++j)ie[m>>1]=f.charCodeAt(j),m+=2;return ie[m>>1]=0,m-k}function He(f){return 2*f.length}function Ye(f,m){for(var _=0,k="";!(_>=m/4);){var j=_t[f+4*_>>2];if(j==0)break;++_,65536<=j?(j-=65536,k+=String.fromCharCode(55296|j>>10,56320|j&1023)):k+=String.fromCharCode(j)}return k}function De(f,m,_){if(_===void 0&&(_=2147483647),4>_)return 0;var k=m;_=k+_-4;for(var j=0;j=D){var ee=f.charCodeAt(++j);D=65536+((D&1023)<<10)|ee&1023}if(_t[m>>2]=D,m+=4,m+4>_)break}return _t[m>>2]=0,m-k}function yt(f){for(var m=0,_=0;_=k&&++_,m+=4}return m}var je,ze,tt,ie,ut,_t,hr,Ii,Ei,xr=a.INITIAL_MEMORY||16777216;a.wasmMemory?O=a.wasmMemory:O=new WebAssembly.Memory({initial:xr/65536,maximum:xr/65536}),O&&(je=O.buffer),xr=je.byteLength;var $r=je;je=$r,a.HEAP8=ze=new Int8Array($r),a.HEAP16=ie=new Int16Array($r),a.HEAP32=_t=new Int32Array($r),a.HEAPU8=tt=new Uint8Array($r),a.HEAPU16=ut=new Uint16Array($r),a.HEAPU32=hr=new Uint32Array($r),a.HEAPF32=Ii=new Float32Array($r),a.HEAPF64=Ei=new Float64Array($r),_t[3e3]=5255040;function x(f){for(;0>2])}var Ma={},Qs={},nl={};function ol(f){if(f===void 0)return"_unknown";f=f.replace(/[^a-zA-Z0-9_]/g,"$");var m=f.charCodeAt(0);return 48<=m&&57>=m?"_"+f:f}function ll(f,m){return f=ol(f),new Function("body","return function "+f+`() { "use strict"; return body.apply(this, arguments); }; -`)($)}function K(M){var $=Error,I=Fe(M,function(H){this.name=M,this.message=H,H=Error(H).stack,H!==void 0&&(this.stack=this.toString()+` -`+H.replace(/^Error(:[^\n]*)?\n/,""))});return I.prototype=Object.create($.prototype),I.prototype.constructor=I,I.prototype.toString=function(){return this.message===void 0?this.name:this.name+": "+this.message},I}var De=void 0;function ze(M){throw new De(M)}function bt(M,$,I){function H(me){me=I(me),me.length!==M.length&&ze("Mismatched type converter count");for(var Ce=0;Ce>2)+H]);return I}function gn(M){var $=Function;if(!($ instanceof Function))throw new TypeError("new_ called with constructor type "+typeof $+" which is not a function");var I=Fe($.name||"unknownFunctionName",function(){});return I.prototype=$.prototype,I=new I,M=$.apply(I,M),M instanceof Object?M:I}function cs(M,$,I,H,ie){var le=$.length;2>le&&tt("argTypes array size mismatch! Must at least get return value and 'this' types!");var ke=$[1]!==null&&I!==null,me=!1;for(I=1;I<$.length;++I)if($[I]!==null&&$[I].fb===void 0){me=!0;break}var Ce=$[0].name!=="void",Ie="",Oe="";for(I=0;I>2)+k]);return _}function Dg(f){var m=Function;if(!(m instanceof Function))throw new TypeError("new_ called with constructor type "+typeof m+" which is not a function");var _=ll(m.name||"unknownFunctionName",function(){});return _.prototype=m.prototype,_=new _,f=m.apply(_,f),f instanceof Object?f:_}function Fg(f,m,_,k,j){var D=m.length;2>D&&nt("argTypes array size mismatch! Must at least get return value and 'this' types!");var ee=m[1]!==null&&_!==null,N=!1;for(_=1;_>1])};case 2:return function(H){return this.fromWireType((I?et:nt)[H>>2])};default:throw new TypeError("Unknown integer type: "+M)}}function Gr(M,$){var I=F[M];return I===void 0&&tt($+" has unknown type "+oi(M)),I}function Mc(M){if(M===null)return"null";var $=typeof M;return $==="object"||$==="array"||$==="function"?M.toString():""+M}function Pte(M,$){switch($){case 2:return function(I){return this.fromWireType(be[I>>2])};case 3:return function(I){return this.fromWireType(Dt[I>>3])};default:throw new TypeError("Unknown float type: "+M)}}function Tte(M,$,I){switch($){case 0:return I?function(H){return ce[H]}:function(H){return ye[H]};case 1:return I?function(H){return J[H>>1]}:function(H){return Re[H>>1]};case 2:return I?function(H){return et[H>>2]}:function(H){return nt[H>>2]};default:throw new TypeError("Unknown integer type: "+M)}}var Cte={};function Dv(M){var $=Cte[M];return $===void 0?st(M):$}var Fv=[];function v2(M){return M||tt("Cannot use deleted val. handle = "+M),jr[M].value}function y2(){return typeof globalThis=="object"?globalThis:Function("return this")()}function Ete(M){var $=Fv.length;return Fv.push(M),$}function Ite(M,$){for(var I=Array(M),H=0;H>2)+H],"parameter "+H);return I}var b2={},Lte=[null,[],[]];De=s.InternalError=K("InternalError");for(var x2=Array(256),of=0;256>of;++of)x2[of]=String.fromCharCode(of);Be=x2,ci=s.BindingError=K("BindingError"),N.prototype.isAliasOf=function(M){if(!(this instanceof N&&M instanceof N))return!1;var $=this.$a.cb.ab,I=this.$a.bb,H=M.$a.cb.ab;for(M=M.$a.bb;$.jb;)I=$.pb(I),$=$.jb;for(;H.jb;)M=H.pb(M),H=H.jb;return $===H&&I===M},N.prototype.clone=function(){if(this.$a.bb||$d(this),this.$a.nb)return this.$a.count.value+=1,this;var M=ro(Object.create(Object.getPrototypeOf(this),{$a:{value:zn(this.$a)}}));return M.$a.count.value+=1,M.$a.lb=!1,M},N.prototype.delete=function(){this.$a.bb||$d(this),this.$a.lb&&!this.$a.nb&&tt("Object already scheduled for deletion"),af(this),wc(this.$a),this.$a.nb||(this.$a.gb=void 0,this.$a.bb=void 0)},N.prototype.isDeleted=function(){return!this.$a.bb},N.prototype.deleteLater=function(){return this.$a.bb||$d(this),this.$a.lb&&!this.$a.nb&&tt("Object already scheduled for deletion"),nl.push(this),nl.length===1&&rl&&rl(Pd),this.$a.lb=!0,this},kr.prototype.Lb=function(M){return this.Eb&&(M=this.Eb(M)),M},kr.prototype.Cb=function(M){this.hb&&this.hb(M)},kr.prototype.argPackAdvance=8,kr.prototype.readValueFromPointer=Ke,kr.prototype.deleteObject=function(M){M!==null&&M.delete()},kr.prototype.fromWireType=function(M){function $(){return this.sb?Mi(this.ab.mb,{cb:this.Ob,bb:I,ib:this,gb:M}):Mi(this.ab.mb,{cb:this,bb:M})}var I=this.Lb(M);if(!I)return this.Cb(M),null;var H=ii(this.ab,I);if(H!==void 0)return H.$a.count.value===0?(H.$a.bb=I,H.$a.gb=M,H.clone()):(H=H.clone(),this.Cb(M),H);if(H=this.ab.Kb(I),H=he[H],!H)return $.call(this);H=this.rb?H.Gb:H.pointerType;var ie=hi(I,this.ab,H.ab);return ie===null?$.call(this):this.sb?Mi(H.ab.mb,{cb:H,bb:ie,ib:this,gb:M}):Mi(H.ab.mb,{cb:H,bb:ie})},s.getInheritedInstanceCount=function(){return Object.keys(Wt).length},s.getLiveInheritedInstances=function(){var M=[],$;for($ in Wt)Wt.hasOwnProperty($)&&M.push(Wt[$]);return M},s.flushPendingDeletes=Pd,s.setDelayFunction=function(M){rl=M,nl.length&&rl&&rl(Pd)},fn=s.UnboundTypeError=K("UnboundTypeError"),s.count_emval_handles=function(){for(var M=0,$=5;$>le])},fb:null})},k:function(M,$,I,H,ie,le,ke,me,Ce,Ie,Oe,Et,ri){Oe=st(Oe),le=Ui(ie,le),me&&(me=Ui(ke,me)),Ie&&(Ie=Ui(Ce,Ie)),ri=Ui(Et,ri);var Wi=ot(Oe);de(Wi,function(){ls("Cannot construct "+Oe+" due to unbound types",[H])}),bt([M,$,I],H?[H]:[],function(Xi){if(Xi=Xi[0],H)var no=Xi.ab,mn=no.mb;else mn=N.prototype;Xi=Fe(Wi,function(){if(Object.getPrototypeOf(this)!==sl)throw new ci("Use 'new' to construct "+Oe);if(Vn.kb===void 0)throw new ci(Oe+" has no accessible constructor");var $2=Vn.kb[arguments.length];if($2===void 0)throw new ci("Tried to invoke ctor of "+Oe+" with invalid number of parameters ("+arguments.length+") - expected ("+Object.keys(Vn.kb).toString()+") parameters instead!");return $2.apply(this,arguments)});var sl=Object.create(mn,{constructor:{value:Xi}});Xi.prototype=sl;var Vn=new we(Oe,Xi,sl,ri,no,le,me,Ie);no=new kr(Oe,Vn,!0,!1),mn=new kr(Oe+"*",Vn,!1,!1);var M2=new kr(Oe+" const*",Vn,!1,!0);return he[M]={pointerType:mn,Gb:M2},Zs(Wi,Xi),[no,mn,M2]})},h:function(M,$,I,H,ie,le){z(0<$);var ke=Oi($,I);ie=Ui(H,ie);var me=[le],Ce=[];bt([],[M],function(Ie){Ie=Ie[0];var Oe="constructor "+Ie.name;if(Ie.ab.kb===void 0&&(Ie.ab.kb=[]),Ie.ab.kb[$-1]!==void 0)throw new ci("Cannot register multiple constructors with identical number of parameters ("+($-1)+") for class '"+Ie.name+"'! Overload resolution is currently only performed using the parameter count, not actual type info!");return Ie.ab.kb[$-1]=function(){ls("Cannot construct "+Ie.name+" due to unbound types",ke)},bt([],ke,function(Et){return Ie.ab.kb[$-1]=function(){arguments.length!==$-1&&tt(Oe+" called with "+arguments.length+" arguments, expected "+($-1)),Ce.length=0,me.length=$;for(var ri=1;ri<$;++ri)me[ri]=Et[ri].toWireType(Ce,arguments[ri-1]);return ri=ie.apply(null,me),je(Ce),Et[0].fromWireType(ri)},[]}),[]})},a:function(M,$,I,H,ie,le,ke,me){var Ce=Oi(I,H);$=st($),le=Ui(ie,le),bt([],[M],function(Ie){function Oe(){ls("Cannot call "+Et+" due to unbound types",Ce)}Ie=Ie[0];var Et=Ie.name+"."+$;me&&Ie.ab.Pb.push($);var ri=Ie.ab.mb,Wi=ri[$];return Wi===void 0||Wi.eb===void 0&&Wi.className!==Ie.name&&Wi.qb===I-2?(Oe.qb=I-2,Oe.className=Ie.name,ri[$]=Oe):(pe(ri,$,Et),ri[$].eb[I-2]=Oe),bt([],Ce,function(Xi){return Xi=cs(Et,Xi,Ie,le,ke),ri[$].eb===void 0?(Xi.qb=I-2,ri[$]=Xi):ri[$].eb[I-2]=Xi,[]}),[]})},M:function(M,$,I){M=st(M),bt([],[$],function(H){return H=H[0],s[M]=H.fromWireType(I),[]})},E:function(M,$){$=st($),tr(M,{name:$,fromWireType:function(I){var H=jr[I].value;return mr(I),H},toWireType:function(I,H){return sn(H)},argPackAdvance:8,readValueFromPointer:Ke,fb:null})},g:function(M,$,I,H){function ie(){}I=ht(I),$=st($),ie.values={},tr(M,{name:$,constructor:ie,fromWireType:function(le){return this.constructor.values[le]},toWireType:function(le,ke){return ke.value},argPackAdvance:8,readValueFromPointer:Td($,I,H),fb:null}),de($,ie)},j:function(M,$,I){var H=Gr(M,"enum");$=st($),M=H.constructor,H=Object.create(H.constructor.prototype,{value:{value:I},constructor:{value:Fe(H.name+"_"+$,function(){})}}),M.values[I]=H,M[$]=H},p:function(M,$,I){I=ht(I),$=st($),tr(M,{name:$,fromWireType:function(H){return H},toWireType:function(H,ie){if(typeof ie!="number"&&typeof ie!="boolean")throw new TypeError('Cannot convert "'+Mc(ie)+'" to '+this.name);return ie},argPackAdvance:8,readValueFromPointer:Pte($,I),fb:null})},f:function(M,$,I,H,ie,le){var ke=Oi($,I);M=st(M),ie=Ui(H,ie),de(M,function(){ls("Cannot call "+M+" due to unbound types",ke)},$-1),bt([],ke,function(me){return me=[me[0],null].concat(me.slice(1)),Zs(M,cs(M,me,null,ie,le),$-1),[]})},e:function(M,$,I,H,ie){function le(Ie){return Ie}$=st($),ie===-1&&(ie=4294967295);var ke=ht(I);if(H===0){var me=32-8*I;le=function(Ie){return Ie<>>me}}var Ce=$.indexOf("unsigned")!=-1;tr(M,{name:$,fromWireType:le,toWireType:function(Ie,Oe){if(typeof Oe!="number"&&typeof Oe!="boolean")throw new TypeError('Cannot convert "'+Mc(Oe)+'" to '+this.name);if(Oeie)throw new TypeError('Passing a number "'+Mc(Oe)+'" from JS side to C/C++ side to an argument of type "'+$+'", which is outside the valid range ['+H+", "+ie+"]!");return Ce?Oe>>>0:Oe|0},argPackAdvance:8,readValueFromPointer:Tte($,ke,H!==0),fb:null})},b:function(M,$,I){function H(le){return le>>=2,new ie(ne,nt[le+1],nt[le])}var ie=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array][$];I=st(I),tr(M,{name:I,fromWireType:H,argPackAdvance:8,readValueFromPointer:H},{Mb:!0})},q:function(M,$){$=st($);var I=$==="std::string";tr(M,{name:$,fromWireType:function(H){var ie=nt[H>>2];if(I)for(var le=H+4,ke=0;ke<=ie;++ke){var me=H+4+ke;if(ye[me]==0||ke==ie){if(le=le?Y(ye,le,me-le):"",Ce===void 0)var Ce=le;else Ce+=String.fromCharCode(0),Ce+=le;le=me+1}}else{for(Ce=Array(ie),ke=0;ke=Et&&(Et=65536+((Et&1023)<<10)|ie.charCodeAt(++Oe)&1023),127>=Et?++Ie:Ie=2047>=Et?Ie+2:65535>=Et?Ie+3:Ie+4}return Ie}:function(){return ie.length})(),me=Nv(4+ke+1);if(nt[me>>2]=ke,I&&le)T(ie,me+4,ke+1);else if(le)for(le=0;le>2],Oe=ke(),Et,ri=Ce+4,Wi=0;Wi<=Ie;++Wi){var Xi=Ce+4+Wi*$;(Oe[Xi>>me]==0||Wi==Ie)&&(ri=H(ri,Xi-ri),Et===void 0?Et=ri:(Et+=String.fromCharCode(0),Et+=ri),ri=Xi+$)}return Qs(Ce),Et},toWireType:function(Ce,Ie){typeof Ie!="string"&&tt("Cannot pass non-string to C++ string type "+I);var Oe=le(Ie),Et=Nv(4+Oe+$);return nt[Et>>2]=Oe>>me,ie(Ie,Et+4,Oe+$),Ce!==null&&Ce.push(Qs,Et),Et},argPackAdvance:8,readValueFromPointer:Ke,fb:function(Ce){Qs(Ce)}})},u:function(M,$,I,H,ie,le){Te[M]={name:st($),ob:Ui(I,H),hb:Ui(ie,le),elements:[]}},t:function(M,$,I,H,ie,le,ke,me,Ce){Te[M].elements.push({wb:$,ub:Ui(I,H),vb:ie,Ab:le,zb:Ui(ke,me),Bb:Ce})},w:function(M,$,I,H,ie,le){He[M]={name:st($),ob:Ui(I,H),hb:Ui(ie,le),Db:[]}},i:function(M,$,I,H,ie,le,ke,me,Ce,Ie){He[M].Db.push({Ib:st($),wb:I,ub:Ui(H,ie),vb:le,Ab:ke,zb:Ui(me,Ce),Bb:Ie})},H:function(M,$){$=st($),tr(M,{Nb:!0,name:$,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},d:function(M,$,I,H){M=Fv[M],$=v2($),I=Dv(I),M($,I,null,H)},N:mr,z:function(M){return M===0?sn(y2()):(M=Dv(M),sn(y2()[M]))},c:function(M,$){$=Ite(M,$);for(var I=$[0],H=I.name+"_$"+$.slice(1).map(function(Ie){return Ie.name}).join("_")+"$",ie=["retType"],le=[I],ke="",me=0;me>> 2) + "+le+'], "parameter '+le+`"); -var arg`+le+" = argType"+le+`.readValueFromPointer(args); -args += argType`+le+`['argPackAdvance']; -`;ie=new Function("requireRegisteredType","Module","__emval_register",ke+("var obj = new constructor("+ie+`); +`),J.push(f+`} +`),Dg(J).apply(null,k)}var _h=[],Nr=[{},{value:void 0},{value:null},{value:!0},{value:!1}];function Bg(f){4>1])};case 2:return function(k){return this.fromWireType((_?_t:hr)[k>>2])};default:throw new TypeError("Unknown integer type: "+f)}}function gl(f,m){var _=Qs[f];return _===void 0&&nt(m+" has unknown type "+Ag(f)),_}function Ea(f){if(f===null)return"null";var m=typeof f;return m==="object"||m==="array"||m==="function"?f.toString():""+f}function x7(f,m){switch(m){case 2:return function(_){return this.fromWireType(Ii[_>>2])};case 3:return function(_){return this.fromWireType(Ei[_>>3])};default:throw new TypeError("Unknown float type: "+f)}}function $7(f,m,_){switch(m){case 0:return _?function(k){return ze[k]}:function(k){return tt[k]};case 1:return _?function(k){return ie[k>>1]}:function(k){return ut[k>>1]};case 2:return _?function(k){return _t[k>>2]}:function(k){return hr[k>>2]};default:throw new TypeError("Unknown integer type: "+f)}}var _7={};function Sh(f){var m=_7[f];return m===void 0?Nt(f):m}var Ph=[];function Ng(f){return f||nt("Cannot use deleted val. handle = "+f),Nr[f].value}function Gg(){return typeof globalThis=="object"?globalThis:Function("return this")()}function S7(f){var m=Ph.length;return Ph.push(f),m}function P7(f,m){for(var _=Array(f),k=0;k>2)+k],"parameter "+k);return _}var Hg={},w7=[null,[],[]];Mg=a.InternalError=fh("InternalError");for(var Ug=Array(256),fl=0;256>fl;++fl)Ug[fl]=String.fromCharCode(fl);Ig=Ug,Ia=a.BindingError=fh("BindingError"),bs.prototype.isAliasOf=function(f){if(!(this instanceof bs&&f instanceof bs))return!1;var m=this.$a.cb.ab,_=this.$a.bb,k=f.$a.cb.ab;for(f=f.$a.bb;m.jb;)_=m.pb(_),m=m.jb;for(;k.jb;)f=k.pb(f),k=k.jb;return m===k&&_===f},bs.prototype.clone=function(){if(this.$a.bb||mh(this),this.$a.nb)return this.$a.count.value+=1,this;var f=Un(Object.create(Object.getPrototypeOf(this),{$a:{value:p7(this.$a)}}));return f.$a.count.value+=1,f.$a.lb=!1,f},bs.prototype.delete=function(){this.$a.bb||mh(this),this.$a.lb&&!this.$a.nb&&nt("Object already scheduled for deletion"),Eg(this),Lg(this.$a),this.$a.nb||(this.$a.gb=void 0,this.$a.bb=void 0)},bs.prototype.isDeleted=function(){return!this.$a.bb},bs.prototype.deleteLater=function(){return this.$a.bb||mh(this),this.$a.lb&&!this.$a.nb&&nt("Object already scheduled for deletion"),Xn.push(this),Xn.length===1&&Wn&&Wn(yh),this.$a.lb=!0,this},Vi.prototype.Lb=function(f){return this.Eb&&(f=this.Eb(f)),f},Vi.prototype.Cb=function(f){this.hb&&this.hb(f)},Vi.prototype.argPackAdvance=8,Vi.prototype.readValueFromPointer=ka,Vi.prototype.deleteObject=function(f){f!==null&&f.delete()},Vi.prototype.fromWireType=function(f){function m(){return this.sb?ul(this.ab.mb,{cb:this.Ob,bb:_,ib:this,gb:f}):ul(this.ab.mb,{cb:this,bb:f})}var _=this.Lb(f);if(!_)return this.Cb(f),null;var k=y7(this.ab,_);if(k!==void 0)return k.$a.count.value===0?(k.$a.bb=_,k.$a.gb=f,k.clone()):(k=k.clone(),this.Cb(f),k);if(k=this.ab.Kb(_),k=Vg[k],!k)return m.call(this);k=this.rb?k.Gb:k.pointerType;var j=Rg(_,this.ab,k.ab);return j===null?m.call(this):this.sb?ul(k.ab.mb,{cb:k,bb:j,ib:this,gb:f}):ul(k.ab.mb,{cb:k,bb:j})},a.getInheritedInstanceCount=function(){return Object.keys(Yn).length},a.getLiveInheritedInstances=function(){var f=[],m;for(m in Yn)Yn.hasOwnProperty(m)&&f.push(Yn[m]);return f},a.flushPendingDeletes=yh,a.setDelayFunction=function(f){Wn=f,Xn.length&&Wn&&Wn(yh)},zg=a.UnboundTypeError=fh("UnboundTypeError"),a.count_emval_handles=function(){for(var f=0,m=5;m>D])},fb:null})},k:function(f,m,_,k,j,D,ee,N,q,J,re,Le,rt){re=Nt(re),D=ur(j,D),N&&(N=ur(ee,N)),J&&(J=ur(q,J)),rt=ur(Le,rt);var It=ol(re);bh(It,function(){pl("Cannot construct "+re+" due to unbound types",[k])}),Li([f,m,_],k?[k]:[],function(Et){if(Et=Et[0],k)var $s=Et.ab,Tr=$s.mb;else Tr=bs.prototype;Et=ll(It,function(){if(Object.getPrototypeOf(this)!==Js)throw new Ia("Use 'new' to construct "+re);if(Gr.kb===void 0)throw new Ia(re+" has no accessible constructor");var Zg=Gr.kb[arguments.length];if(Zg===void 0)throw new Ia("Tried to invoke ctor of "+re+" with invalid number of parameters ("+arguments.length+") - expected ("+Object.keys(Gr.kb).toString()+") parameters instead!");return Zg.apply(this,arguments)});var Js=Object.create(Tr,{constructor:{value:Et}});Et.prototype=Js;var Gr=new g7(re,Et,Js,rt,$s,D,N,J);$s=new Vi(re,Gr,!0,!1),Tr=new Vi(re+"*",Gr,!1,!1);var Kg=new Vi(re+" const*",Gr,!1,!0);return Vg[f]={pointerType:Tr,Gb:Kg},jg(It,Et),[$s,Tr,Kg]})},h:function(f,m,_,k,j,D){X(0>>N}}var q=m.indexOf("unsigned")!=-1;pi(f,{name:m,fromWireType:D,toWireType:function(J,re){if(typeof re!="number"&&typeof re!="boolean")throw new TypeError('Cannot convert "'+Ea(re)+'" to '+this.name);if(rej)throw new TypeError('Passing a number "'+Ea(re)+'" from JS side to C/C++ side to an argument of type "'+m+'", which is outside the valid range ['+k+", "+j+"]!");return q?re>>>0:re|0},argPackAdvance:8,readValueFromPointer:$7(m,ee,k!==0),fb:null})},b:function(f,m,_){function k(D){return D>>=2,new j(je,hr[D+1],hr[D])}var j=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array][m];_=Nt(_),pi(f,{name:_,fromWireType:k,argPackAdvance:8,readValueFromPointer:k},{Mb:!0})},q:function(f,m){m=Nt(m);var _=m==="std::string";pi(f,{name:m,fromWireType:function(k){var j=hr[k>>2];if(_)for(var D=k+4,ee=0;ee<=j;++ee){var N=k+4+ee;if(tt[N]==0||ee==j){if(D=D?he(tt,D,N-D):"",q===void 0)var q=D;else q+=String.fromCharCode(0),q+=D;D=N+1}}else{for(q=Array(j),ee=0;ee=Le&&(Le=65536+((Le&1023)<<10)|j.charCodeAt(++re)&1023),127>=Le?++J:J=2047>=Le?J+2:65535>=Le?J+3:J+4}return J}:function(){return j.length})(),N=wh(4+ee+1);if(hr[N>>2]=ee,_&&D)ye(j,N+4,ee+1);else if(D)for(D=0;D>2],re=ee(),Le,rt=q+4,It=0;It<=J;++It){var Et=q+4+It*m;(re[Et>>N]==0||It==J)&&(rt=k(rt,Et-rt),Le===void 0?Le=rt:(Le+=String.fromCharCode(0),Le+=rt),rt=Et+m)}return Oi(q),Le},toWireType:function(q,J){typeof J!="string"&&nt("Cannot pass non-string to C++ string type "+_);var re=D(J),Le=wh(4+re+m);return hr[Le>>2]=re>>N,j(J,Le+4,re+m),q!==null&&q.push(Oi,Le),Le},argPackAdvance:8,readValueFromPointer:ka,fb:function(q){Oi(q)}})},u:function(f,m,_,k,j,D){sl[f]={name:Nt(m),ob:ur(_,k),hb:ur(j,D),elements:[]}},t:function(f,m,_,k,j,D,ee,N,q){sl[f].elements.push({wb:m,ub:ur(_,k),vb:j,Ab:D,zb:ur(ee,N),Bb:q})},w:function(f,m,_,k,j,D){hl[f]={name:Nt(m),ob:ur(_,k),hb:ur(j,D),Db:[]}},i:function(f,m,_,k,j,D,ee,N,q,J){hl[f].Db.push({Ib:Nt(m),wb:_,ub:ur(k,j),vb:D,Ab:ee,zb:ur(N,q),Bb:J})},H:function(f,m){m=Nt(m),pi(f,{Nb:!0,name:m,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},d:function(f,m,_,k){f=Ph[f],m=Ng(m),_=Sh(_),f(m,_,null,k)},N:Bg,z:function(f){return f===0?xs(Gg()):(f=Sh(f),xs(Gg()[f]))},c:function(f,m){m=P7(f,m);for(var _=m[0],k=_.name+"_$"+m.slice(1).map(function(J){return J.name}).join("_")+"$",j=["retType"],D=[_],ee="",N=0;N>> 2) + "+D+'], "parameter '+D+`"); +var arg`+D+" = argType"+D+`.readValueFromPointer(args); +args += argType`+D+`['argPackAdvance']; +`;j=new Function("requireRegisteredType","Module","__emval_register",ee+("var obj = new constructor("+j+`); return __emval_register(obj); } -`))(Gr,s,sn),b2[$]=ie}return ie(M,I,H)},O:function(){return sn([])},F:function(M){return sn(Dv(M))},L:function(M,$){return M=Gr(M,"_emval_take_value"),M=M.readValueFromPointer($),sn(M)},m:function(){ct()},B:function(M,$,I){ye.copyWithin(M,$,$+I)},C:function(){ct("OOM")},D:function(){return 0},y:function(){},o:function(M,$,I,H){for(var ie=0,le=0;le>2],me=et[$+(8*le+4)>>2],Ce=0;Ce>2]=ie,0},memory:S,K:function(){},r:function(){},J:function(){},I:function(){},A:function(){},table:E},_2=function(){function M(ie){s.asm=ie.exports,Ee--,s.monitorRunDependencies&&s.monitorRunDependencies(Ee),Ee==0&&yt&&(ie=yt,yt=null,ie())}function $(ie){M(ie.instance)}function I(ie){return fe().then(function(le){return WebAssembly.instantiate(le,H)}).then(ie,function(le){_("failed to asynchronously prepare wasm: "+le),ct(le)})}var H={a:kte};if(Ee++,s.monitorRunDependencies&&s.monitorRunDependencies(Ee),s.instantiateWasm)try{return s.instantiateWasm(H,M)}catch(ie){return _("Module.instantiateWasm callback failed with error: "+ie),!1}return function(){if(x||typeof WebAssembly.instantiateStreaming!="function"||yi()||ut("file://")||typeof fetch!="function")return I($);fetch(Xt,{credentials:"same-origin"}).then(function(ie){return WebAssembly.instantiateStreaming(ie,H).then($,function(le){_("wasm streaming compile failed: "+le),_("falling back to ArrayBuffer instantiation"),I($)})})}(),{}}();s.asm=_2;var S2=s.___wasm_call_ctors=function(){return(S2=s.___wasm_call_ctors=s.asm.P).apply(null,arguments)};s.__Z6ToCmdsRK6SkPath=function(){return(s.__Z6ToCmdsRK6SkPath=s.asm.Q).apply(null,arguments)},s.__Z8FromCmdsmi=function(){return(s.__Z8FromCmdsmi=s.asm.R).apply(null,arguments)},s.__Z7NewPathv=function(){return(s.__Z7NewPathv=s.asm.S).apply(null,arguments)},s.__Z8CopyPathRK6SkPath=function(){return(s.__Z8CopyPathRK6SkPath=s.asm.T).apply(null,arguments)},s.__Z6EqualsRK6SkPathS1_=function(){return(s.__Z6EqualsRK6SkPathS1_=s.asm.U).apply(null,arguments)},s.__Z11ToSVGStringRK6SkPath=function(){return(s.__Z11ToSVGStringRK6SkPath=s.asm.V).apply(null,arguments)},s.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=function(){return(s.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=s.asm.W).apply(null,arguments)},s.__Z13ApplySimplifyR6SkPath=function(){return(s.__Z13ApplySimplifyR6SkPath=s.asm.X).apply(null,arguments)},s.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=function(){return(s.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=s.asm.Y).apply(null,arguments)},s.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=function(){return(s.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=s.asm.Z).apply(null,arguments)},s.__Z14ResolveBuilderR11SkOpBuilder=function(){return(s.__Z14ResolveBuilderR11SkOpBuilder=s.asm._).apply(null,arguments)},s.__Z8ToCanvasRK6SkPathN10emscripten3valE=function(){return(s.__Z8ToCanvasRK6SkPathN10emscripten3valE=s.asm.$).apply(null,arguments)},s.__Z8ToPath2DRK6SkPath=function(){return(s.__Z8ToPath2DRK6SkPath=s.asm.aa).apply(null,arguments)};var Qs=s._free=function(){return(Qs=s._free=s.asm.ba).apply(null,arguments)},Nv=s._malloc=function(){return(Nv=s._malloc=s.asm.ca).apply(null,arguments)},w2=s.___getTypeName=function(){return(w2=s.___getTypeName=s.asm.da).apply(null,arguments)};s.___embind_register_native_and_builtin_types=function(){return(s.___embind_register_native_and_builtin_types=s.asm.ea).apply(null,arguments)},s.dynCall_vi=function(){return(s.dynCall_vi=s.asm.fa).apply(null,arguments)},s.dynCall_iiiii=function(){return(s.dynCall_iiiii=s.asm.ga).apply(null,arguments)},s.dynCall_ii=function(){return(s.dynCall_ii=s.asm.ha).apply(null,arguments)},s.dynCall_i=function(){return(s.dynCall_i=s.asm.ia).apply(null,arguments)},s.dynCall_viifffffffff=function(){return(s.dynCall_viifffffffff=s.asm.ja).apply(null,arguments)},s.dynCall_vifffffi=function(){return(s.dynCall_vifffffi=s.asm.ka).apply(null,arguments)},s.dynCall_vifffff=function(){return(s.dynCall_vifffff=s.asm.la).apply(null,arguments)},s.dynCall_viffffff=function(){return(s.dynCall_viffffff=s.asm.ma).apply(null,arguments)},s.dynCall_vifffffffi=function(){return(s.dynCall_vifffffffi=s.asm.na).apply(null,arguments)},s.dynCall_viff=function(){return(s.dynCall_viff=s.asm.oa).apply(null,arguments)},s.dynCall_viffff=function(){return(s.dynCall_viffff=s.asm.pa).apply(null,arguments)},s.dynCall_vii=function(){return(s.dynCall_vii=s.asm.qa).apply(null,arguments)},s.dynCall_iii=function(){return(s.dynCall_iii=s.asm.ra).apply(null,arguments)},s.dynCall_iifff=function(){return(s.dynCall_iifff=s.asm.sa).apply(null,arguments)},s.dynCall_iiffi=function(){return(s.dynCall_iiffi=s.asm.ta).apply(null,arguments)},s.dynCall_vifffffffff=function(){return(s.dynCall_vifffffffff=s.asm.ua).apply(null,arguments)},s.dynCall_iiii=function(){return(s.dynCall_iiii=s.asm.va).apply(null,arguments)},s.dynCall_viii=function(){return(s.dynCall_viii=s.asm.wa).apply(null,arguments)},s.dynCall_viiii=function(){return(s.dynCall_viiii=s.asm.xa).apply(null,arguments)},s.dynCall_fif=function(){return(s.dynCall_fif=s.asm.ya).apply(null,arguments)},s.dynCall_viif=function(){return(s.dynCall_viif=s.asm.za).apply(null,arguments)},s.dynCall_fi=function(){return(s.dynCall_fi=s.asm.Aa).apply(null,arguments)},s.dynCall_viiifffffffff=function(){return(s.dynCall_viiifffffffff=s.asm.Ba).apply(null,arguments)},s.dynCall_viifffffi=function(){return(s.dynCall_viifffffi=s.asm.Ca).apply(null,arguments)},s.dynCall_viifffff=function(){return(s.dynCall_viifffff=s.asm.Da).apply(null,arguments)},s.dynCall_viiffffff=function(){return(s.dynCall_viiffffff=s.asm.Ea).apply(null,arguments)},s.dynCall_viifffffffi=function(){return(s.dynCall_viifffffffi=s.asm.Fa).apply(null,arguments)},s.dynCall_viiff=function(){return(s.dynCall_viiff=s.asm.Ga).apply(null,arguments)},s.dynCall_viiffff=function(){return(s.dynCall_viiffff=s.asm.Ha).apply(null,arguments)},s.dynCall_iiifff=function(){return(s.dynCall_iiifff=s.asm.Ia).apply(null,arguments)},s.dynCall_iiiffi=function(){return(s.dynCall_iiiffi=s.asm.Ja).apply(null,arguments)},s.dynCall_fii=function(){return(s.dynCall_fii=s.asm.Ka).apply(null,arguments)},s.dynCall_iiffff=function(){return(s.dynCall_iiffff=s.asm.La).apply(null,arguments)},s.dynCall_fiif=function(){return(s.dynCall_fiif=s.asm.Ma).apply(null,arguments)},s.dynCall_iiif=function(){return(s.dynCall_iiif=s.asm.Na).apply(null,arguments)},s.dynCall_vifii=function(){return(s.dynCall_vifii=s.asm.Oa).apply(null,arguments)},s.dynCall_viifd=function(){return(s.dynCall_viifd=s.asm.Pa).apply(null,arguments)},s.dynCall_viid=function(){return(s.dynCall_viid=s.asm.Qa).apply(null,arguments)},s.dynCall_viddi=function(){return(s.dynCall_viddi=s.asm.Ra).apply(null,arguments)},s.dynCall_iidi=function(){return(s.dynCall_iidi=s.asm.Sa).apply(null,arguments)},s.dynCall_viffi=function(){return(s.dynCall_viffi=s.asm.Ta).apply(null,arguments)},s.dynCall_fffff=function(){return(s.dynCall_fffff=s.asm.Ua).apply(null,arguments)},s.dynCall_viiiii=function(){return(s.dynCall_viiiii=s.asm.Va).apply(null,arguments)},s.dynCall_viiiiiffii=function(){return(s.dynCall_viiiiiffii=s.asm.Wa).apply(null,arguments)},s.dynCall_iiiiii=function(){return(s.dynCall_iiiiii=s.asm.Xa).apply(null,arguments)},s.dynCall_iiiiiii=function(){return(s.dynCall_iiiiiii=s.asm.Ya).apply(null,arguments)},s.dynCall_iidiiii=function(){return(s.dynCall_iidiiii=s.asm.Za).apply(null,arguments)},s.dynCall_jiji=function(){return(s.dynCall_jiji=s.asm._a).apply(null,arguments)},s.asm=_2;var lf;yt=function M(){lf||Bv(),lf||(yt=M)};function Bv(){function M(){if(!lf&&(lf=!0,s.calledRun=!0,!A)){if(w(L),w(X),a(s),s.onRuntimeInitialized&&s.onRuntimeInitialized(),s.postRun)for(typeof s.postRun=="function"&&(s.postRun=[s.postRun]);s.postRun.length;){var $=s.postRun.shift();ae.unshift($)}w(ae)}}if(!(0i%2===0)}isValidPath(e){return this.pathkit.FromSVGString(e).isValid()}simplify(e){return this.pathkit.FromSVGString(e).simplify().toSVGString()}convertLineJoin(e){const t=this.pathkit;switch(e){case"miter":return t.StrokeJoin.MITER;case"round":return t.StrokeJoin.ROUND;case"bevel":return t.StrokeJoin.BEVEL}}convertLineCap(e){const t=this.pathkit;switch(e){case"butt":return t.StrokeCap.BUTT;case"round":return t.StrokeCap.ROUND;case"square":return t.StrokeCap.SQUARE}}stroke(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e);if(Fi(t["stroke-dasharray"])){const a=t["stroke-dasharray"];a.length>=2&&r.dash(a[0],a[1],+(t["stroke-dashoffset"]||0))}let s=r.stroke({width:+t["stroke-width"],join:this.convertLineJoin(t["stroke-linejoin"]),cap:this.convertLineCap(t["stroke-linecap"])});return s.setFillType(i.FillType.WINDING),s.simplify().toSVGString()}round(e,t={width:1,miter_limit:4}){return this.stroke(e,Ve(P({},t),{"stroke-linejoin":"round"}))}grow(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e);return r.copy().stroke(t).op(r,i.PathOp.DIFFERENCE).toSVGString()}shrink(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e),s=r.copy().simplify();return r.copy().stroke(t).op(s,i.PathOp.DIFFERENCE).toSVGString()}dash(e,t,i,r=1){return this.pathkit.FromSVGString(e).dash(t,i,r).toSVGString()}trim(e,t,i,r=!1){return this.pathkit.FromSVGString(e).trim(t,i,r).toSVGString()}}class b1{constructor(e){this.$editor=e,this.selectedPointKeys={},this.selectedPointList=[]}get length(){return this.selectedPointList.length}initialize(){this.selectedPointKeys={},this.selectedPointList=[]}makeSegmentKey(e,t){return`${e}_${t}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({key:t,index:i})=>({key:t,index:+i||0})),e.forEach(t=>{var i=this.makeSegmentKey(t.index,t.key);this.selectedPointKeys[i]=t})}toggleSegment(e,t){this.isSelectedSegment(t,e)?this.select(...this.selectedPointList.filter(i=>i.key!==t||i.index!==e)):this.select(...this.selectedPointList,{key:t,index:e})}toggleSelect(...e){e=e.map(s=>Ve(P({},s),{included:this.isSelectedSegment(s.index,s.key)}));const t=e.filter(s=>s.included),i=e.filter(s=>!s.included);let r=[...this.selectedPointList];t.length&&(r=this.selectedPointList.filter(s=>{const a=this.makeSegmentKey(s);return Boolean(t.find(o=>a===this.makeSegmentKey(o)))===!1})),this.select(...r,...i)}selectKeyIndex(e,t){this.isSelectedSegment(e,t)||this.select({key:t,index:e})}isSelectedSegment(e,i){var i=this.makeSegmentKey(e,i);return!!this.selectedPointKeys[i]}}class x1{constructor(e){this.$editor=e,this.$context=this.$editor.context,this.project=null,this.itemKeys={},this.hoverId="",this.hoverItems=[],this.ids=[],this.colorsteps=[],this.ghosts=[],this.cachedItemMatrices=[],this.cachedArtBoardVerties=[],this.cachedVerties=Ei(0,0,0,0,"50% 50% 0px"),this.gridInformation={},this.dragTargetItem=null,this.$editor.on("config:bodyEvent",()=>{this.refreshMousePosition()})}refreshMousePosition(){const e=this.$context.config.get("area.width"),t=this.$context.viewport.getWorldPosition();this.pos=t;const[i,r]=Uf(t[0],t[1],e);this.row=i,this.column=r}get modelManager(){return this.$context.modelManager}get lockManager(){return this.$context.lockManager}get items(){return this.modelManager.searchLiveItemsById(this.ids)}get current(){return this.modelManager.searchItem(this.ids[0])}get currentProject(){return this.project||(this.project=this.modelManager.getProjectByIndex()),this.project}get isEmpty(){return!this.length}get isOne(){return this.length===1&&this.current.is("artboard")?!0:this.length===1}get isMany(){return this.length>1}get length(){return this.ids.length}get isLayoutItem(){var e;return(e=this.current)==null?void 0:e.isLayoutItem()}get allLayers(){return this.currentProject.allLayers||[]}get filteredLayers(){var t;const e=this.$editor.context.config.get("area.width");return((t=this.currentProject)==null?void 0:t.filteredAllLayers(i=>{if(i.is("project"))return!1;const r=i.getAreaPosition(e);if(!r)return!1;const{column:s,row:a}=r;return s[0]<=this.column&&this.column<=s[1]&&a[0]<=this.row&&this.row<=a[1]}).filter(i=>i.isPointInRect(this.pos[0],this.pos[1])))||[]}get notSelectedLayers(){return this.filteredLayers.filter(e=>this.check(e)===!1)}get selectedArtboards(){return[...new Set(this.items.map(e=>e.artboard))]}hasChangedField(...e){return this.current?this.current.hasChangedField(...e):!1}getRootItem(e){var t=e;return e&&e.parentId&&(t=e.parent),t}selectColorStep(...e){this.colorsteps=e}isSelectedColorStep(e){return this.colorsteps.includes(e)}selectProject(e){ni(e)&&(e=this.modelManager.get(e)),this.project=e,this.select()}isSameIds(e){return this.ids.length!=e.length?!1:this.ids.filter(t=>e.includes(t)).length===this.ids.length}filterIds(e=[]){return e.map(t=>t.id||t).filter(Boolean)}selectByGroup(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(r=>!this.lockManager.get(r.id));const i=this.modelManager.convertGroupItems(t);return this.select(...i)}select(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(s=>!s.lock&&s.isAbsolute);const i=t.filter(s=>s.path.filter(a=>t.includes(a)).length<2),r=i.map(s=>s.id);return this.isSameIds(r)?!1:(this.itemKeys={},i.forEach(s=>{this.itemKeys[s.id]=s}),this.ids=r,this.setRectCache(),this.$editor.emit(kt),!0)}reload(){return this.select(...this.ids)}reselect(){this.setRectCache()}check(e){return!!this.itemKeys[e.id]}hasPathOf(e){return e.hasPathOf(this.items.filter(t=>t.isNot("artboard")))}hasParent(e){return this.items.some(t=>t.hasParent(e))}get(e){return this.itemKeys[e]}empty(){this.select()}itemsByIds(e=null){let t=[];return Array.isArray(e)?t=e:(ni(e)||Fn(e))&&(t=[e]),this.modelManager.searchItemsById(t)}selectById(e){this.select(e)}selectAfterCopy(){this.select(...this.items.map(e=>e.copy()))}addById(e){this.itemKeys[e]||this.select(...this.ids,e)}removeById(e){let t=e;ni(e)&&(t=[e]);const i=this.ids.filter(r=>t.includes(r)===!1);this.select(...i)}toggleById(e){this.itemKeys[e]?this.removeById(e):this.addById(e)}getArtboardByPoint(e){return this.currentProject.artboards.find(t=>po(t.originVerties,...e))}changeInLayoutArea(){let e=!1;return this.each(t=>{if(t.is("artboard")===!1){if(t.artboard){const r=t.artboard.originVerties;if(po(r,this.pos[0],this.pos[1]))return!1}const i=this.cachedArtBoardVerties.find(r=>po(r.matrix.originVerties,this.pos[0],this.pos[1]));i?i.item!==t.artboard&&i.item.hasLayout()===!1&&(i.item.appendChild(t),e=!0):t.artboard&&(this.currentProject.appendChild(t),e=!0)}}),e}setRectCache(){if(this.isEmpty){this.cachedVerties=[],this.cachedRectVerties=[],this.cachedItemMatrices=[],this.ghosts=[],this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}));return}this.cachedVerties=this.verties,this.cachedRectVerties=wn(this.verties),this.cachedItemMatrices=[],this.cachedChildren=[],this.ghosts=[],this.items.forEach(e=>{if(e.is("artboard"))this.cachedItemMatrices.push(e.matrix);else if(e.hasChildren()){const t=this.modelManager.getAllLayers(e.id).map(i=>i.matrix);this.cachedChildren.push(...t.map(i=>i.id)),this.cachedItemMatrices.push(...t)}else this.cachedItemMatrices.push(e.matrix);this.ghosts.push(e.absoluteMatrix)}),this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}))}startToCacheChildren(){this.items.forEach(e=>{e.startToCacheChildren()})}recoverChildren(){this.items.forEach(e=>{e.recoverChildren()})}get verties(){return this.isOne?this.current.verties:this.rectVerties}get targetVerties(){return this.isOne?this.current.originVerties:wA(this.items)}get originVerties(){return this.rectVerties.filter((e,t)=>t<4)}get rectVerties(){return this.isEmpty?[]:Xc(this.items)}get itemRect(){const e=this.verties;return{x:e[0][0],y:e[0][1],width:yr(e[0],e[1]),height:yr(e[0],e[3])}}toCloneObject(){let e={};return this.each(t=>{e[t.id]=t.toCloneObject(!1)}),e}pack(...e){let t={};return this.each(i=>{t[i.id]={},e.forEach(r=>{t[i.id][r]=i[r]})}),t}packByIds(e,...t){let i={},r=[];e===null?r=this.items:(ni(e)||Array.isArray(e))&&(r=this.itemsByIds(e));const s={};return t.forEach(a=>{s[a]=!0}),r.forEach(a=>{i[a.id]=a.attrs(...t)}),i}packByValue(e,t=null){let i={},r=[];return t===null?r=this.items:(ni(t)||Array.isArray(t))&&(r=this.itemsByIds(t)),r.forEach(s=>{i[s.id]={},Object.keys(e).forEach(a=>{i[s.id][a]=Ue(e[a])?e[a].call(e,s):e[a]})}),i}each(e){Ue(e)&&this.items.forEach(t=>{e(t)})}map(e){return Ue(e)?this.items.map((t,i)=>e(t,i)):this.items}reset(e){Object.entries(e).forEach(([t,i])=>{var r;(r=this.get(t))==null||r.reset(i)})}resetCallback(e){this.each(t=>t.reset(e(t)))}resize(){this.each(e=>e.resize())}remove(){this.each(e=>e.remove()),this.empty()}copy(){console.warn("copy is deprecated"),this.copyItems=this.items.map(e=>e)}paste(){console.warn("paste is deprecated. use copy and paste"),this.select(...this.copyItems.map(e=>e.copy(10))),this.copy()}hasPoint(e){var t;return this.isMany?po(this.originVerties,e[0],e[1]):(t=this.current)==null?void 0:t.hasPoint(e[0],e[1])}hasChildrenPoint(e){return this.cachedChildren.some(t=>{var i;return(i=this.modelManager.get(t))==null?void 0:i.hasPoint(e[0],e[1])})}checkChildren(e){return this.cachedChildren.includes(e)}checkHover(e){return ni(e)?this.hoverId===e:this.hoverItems.findIndex(t=>t.id===e.id)>-1}hasHoverItem(){return this.hoverId!==""}selectHoverItem(){this.select(this.hoverId)}setHoverId(e){let t=!1;return!e||this.itemKeys[e]?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):this.cachedArtBoardVerties.find(i=>i.item.id===e)?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):(this.hoverId!=e&&(t=!0),this.hoverId=e,this.hoverItems=this.itemsByIds([e]).filter(i=>i.isNot("artboard")),this.hoverItems.length===0&&(this.hoverId="",t=!0)),t&&this.$editor.emit("changeHoverItem"),t}is(...e){var t;return e.includes((t=this.current)==null?void 0:t.itemType)}isAll(...e){return this.items.every(t=>e.includes(t.itemType))}updateGridInformation(e={}){this.gridInformation=e}updateDragTargetItem(e){this.dragTargetItem=e}}const VD=3,DD={dist:Ct(0,0,0)},FD="x",ND="y";function BD(n,e,t=1){return Math.abs(n[0]-e[0])e.is("project")||this.context.selection.check(e)?!1:this.context.viewport.checkInViewportArea(e.originVerties)):[]}clear(){this.snapTargetLayers=this.makeSnapTargetLayers()}convertMatrix(e){const t=this.convertGuideAndPathMatrix(e),i=t.map(s=>s[0]),r=t.map(s=>s[1]);return{id:e.id,xList:i,yList:r,verties:t,rectVerties:My(e.originVerties)}}convertGuideAndPathMatrix(e){return[...e.guideVerties]}get snapTargetLayersWithSelection(){return this.context.selection.currentProject?this.context.selection.currentProject.allLayers.filter(e=>e.is("project")?!1:e.verties.some(i=>this.context.viewport.checkInViewport(i))):[]}getSnapPoints(){const e=[];return this.snapTargetLayersWithSelection.forEach(t=>{e.push.apply(e,this.convertGuideAndPathMatrix(t))}),e}checkX(e,t,i=0){const r=[];return e.forEach((s,a)=>{t.forEach((o,l)=>{Math.abs(s-o)<=i&&r.push({targetX:s,sourceX:o,sourceIndex:l,targetIndex:a,dx:s-o})})}),r}checkY(e,t,i=0){const r=[];return e.forEach((s,a)=>{t.forEach((o,l)=>{const c=s-o;Math.abs(c)<=i&&r.push({targetY:s,sourceY:o,sourceIndex:l,targetIndex:a,dy:c})})}),r}check(e,t=0){const i=[],r=e.map(l=>l[0]),s=e.map(l=>l[1]),a=this.context.config.get("horizontal.line"),o=this.context.config.get("vertical.line");if(a&&o){const l=this.checkX(a,r,t)[0],c=this.checkY(o,s,t)[0],h=Ct(l?l.dx:0,c?c.dy:0,0);(so(h[0])||so(h[1]))&&i.push({target:null,dist:h})}return this.snapTargetLayers.forEach(l=>{const c=this.checkX(l.xList,r,t)[0],h=this.checkY(l.yList,s,t)[0],d=Ct(c?c.dx:0,h?h.dy:0,0);(so(d[0])||so(d[1]))&&i.push({target:l,dist:d})}),i.find(l=>so(l[0])||so(l[1]))||DD}checkPoint(e){const t=this.check([e]);return _t([],e,t.dist)}getGuidesByPointPoint(e,t,i=0){const r=[],s={};let a,o;for(let l=0,c=e.length;l{if(s[l]&&s[l].length){const c=s[l].sort((h,d)=>h[3]-d[3]);r.push(...c)}}),r}findGuide(e,t=0){const i=[];return this.snapTargetLayers.forEach(r=>{const s=this.getGuidesByPointPoint(e,r.guideVerties,t);i.push.apply(i,s)}),i.sort((r,s)=>r[3]-s[3]),i.filter((r,s)=>s<10)}findGuideOne(e){return[this.findGuide(e)[0]]}getWorldPosition(){const e=la([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return _t([],t.dist,e)}getSnapTarget(){const e=la([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return{vertex:_t([],t.dist,e),snap:t}}}class GD{constructor(e){this.$editor=e,this.items=[],this.itemKeys={}}initialize(){this.items=[],this.itemKeys={}}currentProject(e){var t=this.$editor.context.selection.currentProject;t&&e&&e(t)}empty(){this.select()}each(e){this.items.forEach((t,i)=>{e&&e(t,i)})}refreshCache(e){this.items=e,this.itemKeys={},this.items.forEach(t=>{this.itemKeys[t.id]=t})}cachedList(){return this.items.map(e=>P({},e))}checked(e){return!!this.itemKeys[e]}selectLayer(e){this.currentProject(t=>{var i=t.getKeyframeListReturnArray().filter(r=>r.layerId===e);this.refreshCache(i)})}toggleLayerContainer(e){this.currentProject(t=>{t.getSelectedTimeline().animations.filter(i=>i.id===e).forEach(i=>{i.collapsed=!i.collapsed})})}selectProperty(e,t){this.currentProject(i=>{var r=i.getKeyframeListReturnArray().filter(s=>s.layerId===e&&s.property===t);this.refreshCache(r)})}select(...e){this.refreshCache(e)}selectBySearch(e,t,i){this.currentProject(r=>{var s=[];e.forEach(o=>{var l=[];if(o.property){var c=r.getTimelineProperty(o.layerId,o.property);l=c.keyframes.filter(h=>t<=h.time&&h.time<=i)}else{var c=r.getTimelineObject(o.layerId);c.properties.filter(d=>d.property===o.property).forEach(d=>{l.push.apply(l,d.keyframes.filter(u=>t<=u.time&&u.time<=i))})}s.push.apply(s,l)});var a={};s.forEach(o=>{a[o.id]=o}),this.select(...Object.values(a))})}checkLayer(e){return Object.keys(this.itemKeys).some(t=>this.itemKeys[t].layerId===e)}checkProperty(e,t){return Object.keys(this.itemKeys).some(i=>this.itemKeys[i].layerId===e&&this.itemKeys[i].property===t)}}class S1{constructor(e){this.editor=e,this.hiddenList={}}get list(){return Object.keys(this.hiddenList)}get(e){return!this.hiddenList[e]}set(e,t){t?delete this.hiddenList[e]:this.hiddenList[e]=!0}toggle(e){this.get(e)?this.set(e,!1):this.set(e,!0)}}var Die="";class HD extends Nd{template(){return` +`))(gl,a,xs),Hg[m]=j}return j(f,_,k)},O:function(){return xs([])},F:function(f){return xs(Sh(f))},L:function(f,m){return f=gl(f,"_emval_take_value"),f=f.readValueFromPointer(m),xs(f)},m:function(){ui()},B:function(f,m,_){tt.copyWithin(f,m,m+_)},C:function(){ui("OOM")},D:function(){return 0},y:function(){},o:function(f,m,_,k){for(var j=0,D=0;D<_;D++){for(var ee=_t[m+8*D>>2],N=_t[m+(8*D+4)>>2],q=0;q>2]=j,0},memory:O,K:function(){},r:function(){},J:function(){},I:function(){},A:function(){},table:B},Wg=function(){function f(j){a.asm=j.exports,At--,a.monitorRunDependencies&&a.monitorRunDependencies(At),At==0&&Cr&&(j=Cr,Cr=null,j())}function m(j){f(j.instance)}function _(j){return u7().then(function(D){return WebAssembly.instantiate(D,k)}).then(j,function(D){E("failed to asynchronously prepare wasm: "+D),ui(D)})}var k={a:C7};if(At++,a.monitorRunDependencies&&a.monitorRunDependencies(At),a.instantiateWasm)try{return a.instantiateWasm(k,f)}catch(j){return E("Module.instantiateWasm callback failed with error: "+j),!1}return function(){if(I||typeof WebAssembly.instantiateStreaming!="function"||Cg()||Ta("file://")||typeof fetch!="function")return _(m);fetch(qs,{credentials:"same-origin"}).then(function(j){return WebAssembly.instantiateStreaming(j,k).then(m,function(D){E("wasm streaming compile failed: "+D),E("falling back to ArrayBuffer instantiation"),_(m)})})}(),{}}();a.asm=Wg;var Xg=a.___wasm_call_ctors=function(){return(Xg=a.___wasm_call_ctors=a.asm.P).apply(null,arguments)};a.__Z6ToCmdsRK6SkPath=function(){return(a.__Z6ToCmdsRK6SkPath=a.asm.Q).apply(null,arguments)},a.__Z8FromCmdsmi=function(){return(a.__Z8FromCmdsmi=a.asm.R).apply(null,arguments)},a.__Z7NewPathv=function(){return(a.__Z7NewPathv=a.asm.S).apply(null,arguments)},a.__Z8CopyPathRK6SkPath=function(){return(a.__Z8CopyPathRK6SkPath=a.asm.T).apply(null,arguments)},a.__Z6EqualsRK6SkPathS1_=function(){return(a.__Z6EqualsRK6SkPathS1_=a.asm.U).apply(null,arguments)},a.__Z11ToSVGStringRK6SkPath=function(){return(a.__Z11ToSVGStringRK6SkPath=a.asm.V).apply(null,arguments)},a.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=function(){return(a.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=a.asm.W).apply(null,arguments)},a.__Z13ApplySimplifyR6SkPath=function(){return(a.__Z13ApplySimplifyR6SkPath=a.asm.X).apply(null,arguments)},a.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=function(){return(a.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=a.asm.Y).apply(null,arguments)},a.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=function(){return(a.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=a.asm.Z).apply(null,arguments)},a.__Z14ResolveBuilderR11SkOpBuilder=function(){return(a.__Z14ResolveBuilderR11SkOpBuilder=a.asm._).apply(null,arguments)},a.__Z8ToCanvasRK6SkPathN10emscripten3valE=function(){return(a.__Z8ToCanvasRK6SkPathN10emscripten3valE=a.asm.$).apply(null,arguments)},a.__Z8ToPath2DRK6SkPath=function(){return(a.__Z8ToPath2DRK6SkPath=a.asm.aa).apply(null,arguments)};var Oi=a._free=function(){return(Oi=a._free=a.asm.ba).apply(null,arguments)},wh=a._malloc=function(){return(wh=a._malloc=a.asm.ca).apply(null,arguments)},Yg=a.___getTypeName=function(){return(Yg=a.___getTypeName=a.asm.da).apply(null,arguments)};a.___embind_register_native_and_builtin_types=function(){return(a.___embind_register_native_and_builtin_types=a.asm.ea).apply(null,arguments)},a.dynCall_vi=function(){return(a.dynCall_vi=a.asm.fa).apply(null,arguments)},a.dynCall_iiiii=function(){return(a.dynCall_iiiii=a.asm.ga).apply(null,arguments)},a.dynCall_ii=function(){return(a.dynCall_ii=a.asm.ha).apply(null,arguments)},a.dynCall_i=function(){return(a.dynCall_i=a.asm.ia).apply(null,arguments)},a.dynCall_viifffffffff=function(){return(a.dynCall_viifffffffff=a.asm.ja).apply(null,arguments)},a.dynCall_vifffffi=function(){return(a.dynCall_vifffffi=a.asm.ka).apply(null,arguments)},a.dynCall_vifffff=function(){return(a.dynCall_vifffff=a.asm.la).apply(null,arguments)},a.dynCall_viffffff=function(){return(a.dynCall_viffffff=a.asm.ma).apply(null,arguments)},a.dynCall_vifffffffi=function(){return(a.dynCall_vifffffffi=a.asm.na).apply(null,arguments)},a.dynCall_viff=function(){return(a.dynCall_viff=a.asm.oa).apply(null,arguments)},a.dynCall_viffff=function(){return(a.dynCall_viffff=a.asm.pa).apply(null,arguments)},a.dynCall_vii=function(){return(a.dynCall_vii=a.asm.qa).apply(null,arguments)},a.dynCall_iii=function(){return(a.dynCall_iii=a.asm.ra).apply(null,arguments)},a.dynCall_iifff=function(){return(a.dynCall_iifff=a.asm.sa).apply(null,arguments)},a.dynCall_iiffi=function(){return(a.dynCall_iiffi=a.asm.ta).apply(null,arguments)},a.dynCall_vifffffffff=function(){return(a.dynCall_vifffffffff=a.asm.ua).apply(null,arguments)},a.dynCall_iiii=function(){return(a.dynCall_iiii=a.asm.va).apply(null,arguments)},a.dynCall_viii=function(){return(a.dynCall_viii=a.asm.wa).apply(null,arguments)},a.dynCall_viiii=function(){return(a.dynCall_viiii=a.asm.xa).apply(null,arguments)},a.dynCall_fif=function(){return(a.dynCall_fif=a.asm.ya).apply(null,arguments)},a.dynCall_viif=function(){return(a.dynCall_viif=a.asm.za).apply(null,arguments)},a.dynCall_fi=function(){return(a.dynCall_fi=a.asm.Aa).apply(null,arguments)},a.dynCall_viiifffffffff=function(){return(a.dynCall_viiifffffffff=a.asm.Ba).apply(null,arguments)},a.dynCall_viifffffi=function(){return(a.dynCall_viifffffi=a.asm.Ca).apply(null,arguments)},a.dynCall_viifffff=function(){return(a.dynCall_viifffff=a.asm.Da).apply(null,arguments)},a.dynCall_viiffffff=function(){return(a.dynCall_viiffffff=a.asm.Ea).apply(null,arguments)},a.dynCall_viifffffffi=function(){return(a.dynCall_viifffffffi=a.asm.Fa).apply(null,arguments)},a.dynCall_viiff=function(){return(a.dynCall_viiff=a.asm.Ga).apply(null,arguments)},a.dynCall_viiffff=function(){return(a.dynCall_viiffff=a.asm.Ha).apply(null,arguments)},a.dynCall_iiifff=function(){return(a.dynCall_iiifff=a.asm.Ia).apply(null,arguments)},a.dynCall_iiiffi=function(){return(a.dynCall_iiiffi=a.asm.Ja).apply(null,arguments)},a.dynCall_fii=function(){return(a.dynCall_fii=a.asm.Ka).apply(null,arguments)},a.dynCall_iiffff=function(){return(a.dynCall_iiffff=a.asm.La).apply(null,arguments)},a.dynCall_fiif=function(){return(a.dynCall_fiif=a.asm.Ma).apply(null,arguments)},a.dynCall_iiif=function(){return(a.dynCall_iiif=a.asm.Na).apply(null,arguments)},a.dynCall_vifii=function(){return(a.dynCall_vifii=a.asm.Oa).apply(null,arguments)},a.dynCall_viifd=function(){return(a.dynCall_viifd=a.asm.Pa).apply(null,arguments)},a.dynCall_viid=function(){return(a.dynCall_viid=a.asm.Qa).apply(null,arguments)},a.dynCall_viddi=function(){return(a.dynCall_viddi=a.asm.Ra).apply(null,arguments)},a.dynCall_iidi=function(){return(a.dynCall_iidi=a.asm.Sa).apply(null,arguments)},a.dynCall_viffi=function(){return(a.dynCall_viffi=a.asm.Ta).apply(null,arguments)},a.dynCall_fffff=function(){return(a.dynCall_fffff=a.asm.Ua).apply(null,arguments)},a.dynCall_viiiii=function(){return(a.dynCall_viiiii=a.asm.Va).apply(null,arguments)},a.dynCall_viiiiiffii=function(){return(a.dynCall_viiiiiffii=a.asm.Wa).apply(null,arguments)},a.dynCall_iiiiii=function(){return(a.dynCall_iiiiii=a.asm.Xa).apply(null,arguments)},a.dynCall_iiiiiii=function(){return(a.dynCall_iiiiiii=a.asm.Ya).apply(null,arguments)},a.dynCall_iidiiii=function(){return(a.dynCall_iidiiii=a.asm.Za).apply(null,arguments)},a.dynCall_jiji=function(){return(a.dynCall_jiji=a.asm._a).apply(null,arguments)},a.asm=Wg;var ml;Cr=function f(){ml||Ch(),ml||(Cr=f)};function Ch(){function f(){if(!ml&&(ml=!0,a.calledRun=!0,!U)){if(x(L),x(H),n(a),a.onRuntimeInitialized&&a.onRuntimeInitialized(),a.postRun)for(typeof a.postRun=="function"&&(a.postRun=[a.postRun]);a.postRun.length;){var m=a.postRun.shift();pe.unshift(m)}x(pe)}}if(!(0r%2===0)}isValidPath(e){return this.pathkit.FromSVGString(e).isValid()}simplify(e){return this.pathkit.FromSVGString(e).simplify().toSVGString()}convertLineJoin(e){const t=this.pathkit;switch(e){case"miter":return t.StrokeJoin.MITER;case"round":return t.StrokeJoin.ROUND;case"bevel":return t.StrokeJoin.BEVEL}}convertLineCap(e){const t=this.pathkit;switch(e){case"butt":return t.StrokeCap.BUTT;case"round":return t.StrokeCap.ROUND;case"square":return t.StrokeCap.SQUARE}}stroke(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e);if(Gt(t["stroke-dasharray"])){const n=t["stroke-dasharray"];n.length>=2&&i.dash(n[0],n[1],+(t["stroke-dashoffset"]||0))}let a=i.stroke({width:+t["stroke-width"],join:this.convertLineJoin(t["stroke-linejoin"]),cap:this.convertLineCap(t["stroke-linecap"])});return a.setFillType(r.FillType.WINDING),a.simplify().toSVGString()}round(e,t={width:1,miter_limit:4}){return this.stroke(e,se(b({},t),{"stroke-linejoin":"round"}))}grow(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e);return i.copy().stroke(t).op(i,r.PathOp.DIFFERENCE).toSVGString()}shrink(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e),a=i.copy().simplify();return i.copy().stroke(t).op(a,r.PathOp.DIFFERENCE).toSVGString()}dash(e,t,r,i=1){return this.pathkit.FromSVGString(e).dash(t,r,i).toSVGString()}trim(e,t,r,i=!1){return this.pathkit.FromSVGString(e).trim(t,r,i).toSVGString()}}class d4{constructor(e){this.$editor=e,this.selectedPointKeys={},this.selectedPointList=[]}get length(){return this.selectedPointList.length}initialize(){this.selectedPointKeys={},this.selectedPointList=[]}makeSegmentKey(e,t){return`${e}_${t}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({key:t,index:r})=>({key:t,index:+r||0})),e.forEach(t=>{var r=this.makeSegmentKey(t.index,t.key);this.selectedPointKeys[r]=t})}toggleSegment(e,t){this.isSelectedSegment(t,e)?this.select(...this.selectedPointList.filter(r=>r.key!==t||r.index!==e)):this.select(...this.selectedPointList,{key:t,index:e})}toggleSelect(...e){e=e.map(a=>se(b({},a),{included:this.isSelectedSegment(a.index,a.key)}));const t=e.filter(a=>a.included),r=e.filter(a=>!a.included);let i=[...this.selectedPointList];t.length&&(i=this.selectedPointList.filter(a=>{const n=this.makeSegmentKey(a);return Boolean(t.find(o=>n===this.makeSegmentKey(o)))===!1})),this.select(...i,...r)}selectKeyIndex(e,t){this.isSelectedSegment(e,t)||this.select({key:t,index:e})}isSelectedSegment(e,r){var r=this.makeSegmentKey(e,r);return!!this.selectedPointKeys[r]}}class u4{constructor(e){this.$editor=e,this.$context=this.$editor.context,this.project=null,this.itemKeys={},this.hoverId="",this.hoverItems=[],this.ids=[],this.colorsteps=[],this.ghosts=[],this.cachedItemMatrices=[],this.cachedArtBoardVerties=[],this.cachedVerties=xt(0,0,0,0,"50% 50% 0px"),this.gridInformation={},this.dragTargetItem=null,this.$editor.on("config:bodyEvent",()=>{this.refreshMousePosition()})}refreshMousePosition(){const e=this.$context.config.get("area.width"),t=this.$context.viewport.getWorldPosition();this.pos=t;const[r,i]=ec(t[0],t[1],e);this.row=r,this.column=i}get modelManager(){return this.$context.modelManager}get lockManager(){return this.$context.lockManager}get items(){return this.modelManager.searchLiveItemsById(this.ids)}get current(){return this.modelManager.searchItem(this.ids[0])}get currentProject(){return this.project||(this.project=this.modelManager.getProjectByIndex()),this.project}get isEmpty(){return!this.length}get isOne(){return this.length===1&&this.current.is("artboard")?!0:this.length===1}get isMany(){return this.length>1}get length(){return this.ids.length}get isLayoutItem(){var e;return(e=this.current)==null?void 0:e.isLayoutItem()}get allLayers(){return this.currentProject.allLayers||[]}get filteredLayers(){var t;const e=this.$editor.context.config.get("area.width");return((t=this.currentProject)==null?void 0:t.filteredAllLayers(r=>{if(r.is("project"))return!1;const i=r.getAreaPosition(e);if(!i)return!1;const{column:a,row:n}=i;return a[0]<=this.column&&this.column<=a[1]&&n[0]<=this.row&&this.row<=n[1]}).filter(r=>r.isPointInRect(this.pos[0],this.pos[1])))||[]}get notSelectedLayers(){return this.filteredLayers.filter(e=>this.check(e)===!1)}get selectedArtboards(){return[...new Set(this.items.map(e=>e.artboard))]}hasChangedField(...e){return this.current?this.current.hasChangedField(...e):!1}getRootItem(e){var t=e;return e&&e.parentId&&(t=e.parent),t}selectColorStep(...e){this.colorsteps=e}isSelectedColorStep(e){return this.colorsteps.includes(e)}selectProject(e){it(e)&&(e=this.modelManager.get(e)),this.project=e,this.select()}isSameIds(e){return this.ids.length!=e.length?!1:this.ids.filter(t=>e.includes(t)).length===this.ids.length}filterIds(e=[]){return e.map(t=>t.id||t).filter(Boolean)}selectByGroup(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(i=>!this.lockManager.get(i.id));const r=this.modelManager.convertGroupItems(t);return this.select(...r)}select(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(a=>!a.lock&&a.isAbsolute);const r=t.filter(a=>a.path.filter(n=>t.includes(n)).length<2),i=r.map(a=>a.id);return this.isSameIds(i)?!1:(this.itemKeys={},r.forEach(a=>{this.itemKeys[a.id]=a}),this.ids=i,this.setRectCache(),this.$editor.emit(Oe),!0)}reload(){return this.select(...this.ids)}reselect(){this.setRectCache()}check(e){return!!this.itemKeys[e.id]}hasPathOf(e){return e.hasPathOf(this.items.filter(t=>t.isNot("artboard")))}hasParent(e){return this.items.some(t=>t.hasParent(e))}get(e){return this.itemKeys[e]}empty(){this.select()}itemsByIds(e=null){let t=[];return Array.isArray(e)?t=e:(it(e)||Hr(e))&&(t=[e]),this.modelManager.searchItemsById(t)}selectById(e){this.select(e)}selectAfterCopy(){this.select(...this.items.map(e=>e.copy()))}addById(e){this.itemKeys[e]||this.select(...this.ids,e)}removeById(e){let t=e;it(e)&&(t=[e]);const r=this.ids.filter(i=>t.includes(i)===!1);this.select(...r)}toggleById(e){this.itemKeys[e]?this.removeById(e):this.addById(e)}getArtboardByPoint(e){return this.currentProject.artboards.find(t=>Ts(t.originVerties,...e))}changeInLayoutArea(){let e=!1;return this.each(t=>{if(t.is("artboard")===!1){if(t.artboard){const i=t.artboard.originVerties;if(Ts(i,this.pos[0],this.pos[1]))return!1}const r=this.cachedArtBoardVerties.find(i=>Ts(i.matrix.originVerties,this.pos[0],this.pos[1]));r?r.item!==t.artboard&&r.item.hasLayout()===!1&&(r.item.appendChild(t),e=!0):t.artboard&&(this.currentProject.appendChild(t),e=!0)}}),e}setRectCache(){if(this.isEmpty){this.cachedVerties=[],this.cachedRectVerties=[],this.cachedItemMatrices=[],this.ghosts=[],this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}));return}this.cachedVerties=this.verties,this.cachedRectVerties=Or(this.verties),this.cachedItemMatrices=[],this.cachedChildren=[],this.ghosts=[],this.items.forEach(e=>{if(e.is("artboard"))this.cachedItemMatrices.push(e.matrix);else if(e.hasChildren()){const t=this.modelManager.getAllLayers(e.id).map(r=>r.matrix);this.cachedChildren.push(...t.map(r=>r.id)),this.cachedItemMatrices.push(...t)}else this.cachedItemMatrices.push(e.matrix);this.ghosts.push(e.absoluteMatrix)}),this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}))}startToCacheChildren(){this.items.forEach(e=>{e.startToCacheChildren()})}recoverChildren(){this.items.forEach(e=>{e.recoverChildren()})}get verties(){return this.isOne?this.current.verties:this.rectVerties}get targetVerties(){return this.isOne?this.current.originVerties:JP(this.items)}get originVerties(){return this.rectVerties.filter((e,t)=>t<4)}get rectVerties(){return this.isEmpty?[]:qa(this.items)}get itemRect(){const e=this.verties;return{x:e[0][0],y:e[0][1],width:Kt(e[0],e[1]),height:Kt(e[0],e[3])}}toCloneObject(){let e={};return this.each(t=>{e[t.id]=t.toCloneObject(!1)}),e}pack(...e){let t={};return this.each(r=>{t[r.id]={},e.forEach(i=>{t[r.id][i]=r[i]})}),t}packByIds(e,...t){let r={},i=[];e===null?i=this.items:(it(e)||Array.isArray(e))&&(i=this.itemsByIds(e));const a={};return t.forEach(n=>{a[n]=!0}),i.forEach(n=>{r[n.id]=n.attrs(...t)}),r}packByValue(e,t=null){let r={},i=[];return t===null?i=this.items:(it(t)||Array.isArray(t))&&(i=this.itemsByIds(t)),i.forEach(a=>{r[a.id]={},Object.keys(e).forEach(n=>{r[a.id][n]=de(e[n])?e[n].call(e,a):e[n]})}),r}each(e){de(e)&&this.items.forEach(t=>{e(t)})}map(e){return de(e)?this.items.map((t,r)=>e(t,r)):this.items}reset(e){Object.entries(e).forEach(([t,r])=>{var i;(i=this.get(t))==null||i.reset(r)})}resetCallback(e){this.each(t=>t.reset(e(t)))}resize(){this.each(e=>e.resize())}remove(){this.each(e=>e.remove()),this.empty()}copy(){console.warn("copy is deprecated"),this.copyItems=this.items.map(e=>e)}paste(){console.warn("paste is deprecated. use copy and paste"),this.select(...this.copyItems.map(e=>e.copy(10))),this.copy()}hasPoint(e){var t;return this.isMany?Ts(this.originVerties,e[0],e[1]):(t=this.current)==null?void 0:t.hasPoint(e[0],e[1])}hasChildrenPoint(e){return this.cachedChildren.some(t=>{var r;return(r=this.modelManager.get(t))==null?void 0:r.hasPoint(e[0],e[1])})}checkChildren(e){return this.cachedChildren.includes(e)}checkHover(e){return it(e)?this.hoverId===e:this.hoverItems.findIndex(t=>t.id===e.id)>-1}hasHoverItem(){return this.hoverId!==""}selectHoverItem(){this.select(this.hoverId)}setHoverId(e){let t=!1;return!e||this.itemKeys[e]?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):this.cachedArtBoardVerties.find(r=>r.item.id===e)?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):(this.hoverId!=e&&(t=!0),this.hoverId=e,this.hoverItems=this.itemsByIds([e]).filter(r=>r.isNot("artboard")),this.hoverItems.length===0&&(this.hoverId="",t=!0)),t&&this.$editor.emit("changeHoverItem"),t}is(...e){var t;return e.includes((t=this.current)==null?void 0:t.itemType)}isAll(...e){return this.items.every(t=>e.includes(t.itemType))}updateGridInformation(e={}){this.gridInformation=e}updateDragTargetItem(e){this.dragTargetItem=e}}const p4=3,g4={dist:Ie(0,0,0)},f4="x",m4="y";function v4(s,e,t=1){return Math.abs(s[0]-e[0])e.is("project")||this.context.selection.check(e)?!1:this.context.viewport.checkInViewportArea(e.originVerties)):[]}clear(){this.snapTargetLayers=this.makeSnapTargetLayers()}convertMatrix(e){const t=this.convertGuideAndPathMatrix(e),r=t.map(a=>a[0]),i=t.map(a=>a[1]);return{id:e.id,xList:r,yList:i,verties:t,rectVerties:uu(e.originVerties)}}convertGuideAndPathMatrix(e){return[...e.guideVerties]}get snapTargetLayersWithSelection(){return this.context.selection.currentProject?this.context.selection.currentProject.allLayers.filter(e=>e.is("project")?!1:e.verties.some(r=>this.context.viewport.checkInViewport(r))):[]}getSnapPoints(){const e=[];return this.snapTargetLayersWithSelection.forEach(t=>{e.push.apply(e,this.convertGuideAndPathMatrix(t))}),e}checkX(e,t,r=0){const i=[];return e.forEach((a,n)=>{t.forEach((o,l)=>{Math.abs(a-o)<=r&&i.push({targetX:a,sourceX:o,sourceIndex:l,targetIndex:n,dx:a-o})})}),i}checkY(e,t,r=0){const i=[];return e.forEach((a,n)=>{t.forEach((o,l)=>{const c=a-o;Math.abs(c)<=r&&i.push({targetY:a,sourceY:o,sourceIndex:l,targetIndex:n,dy:c})})}),i}check(e,t=0){const r=[],i=e.map(l=>l[0]),a=e.map(l=>l[1]),n=this.context.config.get("horizontal.line"),o=this.context.config.get("vertical.line");if(n&&o){const l=this.checkX(n,i,t)[0],c=this.checkY(o,a,t)[0],h=Ie(l?l.dx:0,c?c.dy:0,0);(_s(h[0])||_s(h[1]))&&r.push({target:null,dist:h})}return this.snapTargetLayers.forEach(l=>{const c=this.checkX(l.xList,i,t)[0],h=this.checkY(l.yList,a,t)[0],u=Ie(c?c.dx:0,h?h.dy:0,0);(_s(u[0])||_s(u[1]))&&r.push({target:l,dist:u})}),r.find(l=>_s(l[0])||_s(l[1]))||g4}checkPoint(e){const t=this.check([e]);return we([],e,t.dist)}getGuidesByPointPoint(e,t,r=0){const i=[],a={};let n,o;for(let l=0,c=e.length;l{if(a[l]&&a[l].length){const c=a[l].sort((h,u)=>h[3]-u[3]);i.push(...c)}}),i}findGuide(e,t=0){const r=[];return this.snapTargetLayers.forEach(i=>{const a=this.getGuidesByPointPoint(e,i.guideVerties,t);r.push.apply(r,a)}),r.sort((i,a)=>i[3]-a[3]),r.filter((i,a)=>a<10)}findGuideOne(e){return[this.findGuide(e)[0]]}getWorldPosition(){const e=Hi([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return we([],t.dist,e)}getSnapTarget(){const e=Hi([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return{vertex:we([],t.dist,e),snap:t}}}class x4{constructor(e){this.$editor=e,this.items=[],this.itemKeys={}}initialize(){this.items=[],this.itemKeys={}}currentProject(e){var t=this.$editor.context.selection.currentProject;t&&e&&e(t)}empty(){this.select()}each(e){this.items.forEach((t,r)=>{e&&e(t,r)})}refreshCache(e){this.items=e,this.itemKeys={},this.items.forEach(t=>{this.itemKeys[t.id]=t})}cachedList(){return this.items.map(e=>b({},e))}checked(e){return!!this.itemKeys[e]}selectLayer(e){this.currentProject(t=>{var r=t.getKeyframeListReturnArray().filter(i=>i.layerId===e);this.refreshCache(r)})}toggleLayerContainer(e){this.currentProject(t=>{t.getSelectedTimeline().animations.filter(r=>r.id===e).forEach(r=>{r.collapsed=!r.collapsed})})}selectProperty(e,t){this.currentProject(r=>{var i=r.getKeyframeListReturnArray().filter(a=>a.layerId===e&&a.property===t);this.refreshCache(i)})}select(...e){this.refreshCache(e)}selectBySearch(e,t,r){this.currentProject(i=>{var a=[];e.forEach(o=>{var l=[];if(o.property){var c=i.getTimelineProperty(o.layerId,o.property);l=c.keyframes.filter(h=>t<=h.time&&h.time<=r)}else{var c=i.getTimelineObject(o.layerId);c.properties.filter(u=>u.property===o.property).forEach(u=>{l.push.apply(l,u.keyframes.filter(d=>t<=d.time&&d.time<=r))})}a.push.apply(a,l)});var n={};a.forEach(o=>{n[o.id]=o}),this.select(...Object.values(n))})}checkLayer(e){return Object.keys(this.itemKeys).some(t=>this.itemKeys[t].layerId===e)}checkProperty(e,t){return Object.keys(this.itemKeys).some(r=>this.itemKeys[r].layerId===e&&this.itemKeys[r].property===t)}}class $4{constructor(e){this.editor=e,this.hiddenList={}}get list(){return Object.keys(this.hiddenList)}get(e){return!this.hiddenList[e]}set(e,t){t?delete this.hiddenList[e]:this.hiddenList[e]=!0}toggle(e){this.get(e)?this.set(e,!1):this.set(e,!0)}}var ID="";class _4 extends lo{template(){return`
        - ${this.props.items.map((e,t)=>Hf(e,`${this.groupId}-${t}`)).join("")} + ${this.props.items.map((e,t)=>Jl(e,`${this.groupId}-${t}`)).join("")}
      - `}}class UD extends ge{checkProps(e={}){return e}components(){return{ContextDropdownMenu:HD,ToolbarButtonMenuItem:X0}}template(){return'
      '}[ve("$el")](){var e;return(e=this.props.items)==null?void 0:e.map((t,i)=>this.renderMenuItem(t,i))}renderMenuItem(e,t){switch(e.type){case $s.LINK:return this.renderLink(e,t);case $s.SUBMENU:return this.renderMenu(e,t);case $s.BUTTON:return this.renderButton(e,t);case $s.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return W("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,checked:e.checked,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return W("ContextDropdownMenu",Ve(P({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,events:e.events||[]}))}}var Fie="";class WD extends ge{template(){return D("div",{class:"elf--context-menu-view"})}[$e("$el")](){const e=this.$context.config.get("context.menu.open");if(!!e)return{style:{left:y.px(e.x),top:y.px(e.y+10)}}}[ve("$el")](){const e=this.$context.config.get("context.menu.open");if(!e)return;const t=this.$menu.getTargetMenu(e.target)||[];return D(UD,{items:[{type:"dropdown",items:[...t,...e.items||[]]}]})}[Qt("context.menu.open")](){this.refresh(),this.$context.config.get("context.menu.open")?this.$el.show():this.$el.hide()}close(){this.$el.hide(),this.$context.config.set("context.menu.open",null)}[qe("document")](e){const i=Ze.create(e.target).closest("elf--context-menu-view");i?i.el!==this.$el.el&&this.close():this.close()}}var Nie="";class w1 extends Cr{getIconString(){return"align_vertical_bottom"}getTitle(){return"Bottom"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.bottom")}}class M1 extends Cr{getIconString(){return"align_horizontal_center"}getTitle(){return"Center"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.center")}}class $1 extends Cr{getIconString(){return"align_horizontal_left"}getTitle(){return"Left"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.left")}}class P1 extends Cr{getIconString(){return"align_vertical_center"}getTitle(){return"middle"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.middle")}}class T1 extends Cr{getIconString(){return"align_horizontal_right"}getTitle(){return"Right"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.right")}}class C1 extends Cr{getIconString(){return"vertical_distribute"}getTitle(){return"height"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.height")}}class E1 extends Cr{getIconString(){return"horizontal_distribute"}getTitle(){return"width"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.width")}}class I1 extends Cr{getIconString(){return"align_vertical_top"}getTitle(){return"Top"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.top")}}var Bie="";class jt extends ge{onToggleShow(){}template(){return` + `}}class S4 extends Y{checkProps(e={}){return e}components(){return{ContextDropdownMenu:_4,ToolbarButtonMenuItem:Vd}}template(){return'
      '}[G("$el")](){var e;return(e=this.props.items)==null?void 0:e.map((t,r)=>this.renderMenuItem(t,r))}renderMenuItem(e,t){switch(e.type){case mi.LINK:return this.renderLink(e,t);case mi.SUBMENU:return this.renderMenu(e,t);case mi.BUTTON:return this.renderButton(e,t);case mi.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return R("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,checked:e.checked,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return R("ContextDropdownMenu",se(b({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,events:e.events||[]}))}}var ED="";class P4 extends Y{template(){return C("div",{class:"elf--context-menu-view"})}[ne("$el")](){const e=this.$context.config.get("context.menu.open");if(!!e)return{style:{left:p.px(e.x),top:p.px(e.y+10)}}}[G("$el")](){const e=this.$context.config.get("context.menu.open");if(!e)return;const t=this.$menu.getTargetMenu(e.target)||[];return C(S4,{items:[{type:"dropdown",items:[...t,...e.items||[]]}]})}[Tt("context.menu.open")](){this.refresh(),this.$context.config.get("context.menu.open")?this.$el.show():this.$el.hide()}close(){this.$el.hide(),this.$context.config.set("context.menu.open",null)}[me("document")](e){const r=ge.create(e.target).closest("elf--context-menu-view");r?r.el!==this.$el.el&&this.close():this.close()}}var LD="";class sp extends Mr{getIconString(){return"align_vertical_bottom"}getTitle(){return"Bottom"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.bottom")}}class ap extends Mr{getIconString(){return"align_horizontal_center"}getTitle(){return"Center"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.center")}}class np extends Mr{getIconString(){return"align_horizontal_left"}getTitle(){return"Left"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.left")}}class op extends Mr{getIconString(){return"align_vertical_center"}getTitle(){return"middle"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.middle")}}class lp extends Mr{getIconString(){return"align_horizontal_right"}getTitle(){return"Right"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.right")}}class cp extends Mr{getIconString(){return"vertical_distribute"}getTitle(){return"height"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.height")}}class hp extends Mr{getIconString(){return"horizontal_distribute"}getTitle(){return"width"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.width")}}class dp extends Mr{getIconString(){return"align_vertical_top"}getTitle(){return"Top"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.top")}}var VD="";class Ge extends Y{onToggleShow(){}template(){return`
      ${this.isHideHeader()?"":`
      @@ -1282,25 +1164,25 @@ return __emval_register(obj);
      ${this.getBody()}
      ${this.getFooter()?`
      ${this.getFooter()}
      `:""}
      - `}[$e("$el")](){return{style:{"--property-order":this.order}}}setTitle(e){this.refs.$propertyTitle.html(e)}hasKeyframe(){return!1}isHideHeader(){return!1}isFirstShow(){return!0}getClassName(){return""}getTitleClassName(){return""}getBodyClassName(){return""}getKeyframeProperty(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}getFooter(){return""}isPropertyShow(){return this.$el.hasClass("show")}toggle(e){this.$el.toggle(e)}hide(){this.$el.hide()}show(){this.$el.show()}onShowTitle(){}refreshShowIsNot(e="",t=!0){var i=this.$context.selection.current;i&&(e.includes(i.itemType)?this.hide():(this.show(),t&&this.refresh()))}refreshShow(e,t=!0){var i=this.$context.selection.current;i?Ue(e)&&e()?(this.show(),t&&this.refresh()):!Ue(e)&&e.includes(i.itemType)?(this.show(),t&&this.refresh()):this.hide():this.hide()}startInputEditing(e){!e||(e.attr("contenteditable",!0),e.css({"background-color":"white",outline:"1px auto black",color:"black"}),e.focus())}endInputEditing(e,t){if(!!e){e.attr("contenteditable",!1),e.css({"background-color":null,outline:null,color:null});var i=e.attr("data-index");t&&t(i,e.text().trim()),e.blur()}}get editableProperty(){return""}get order(){return 1e3}checkShow(){return this.$context.selection.current?this.$context.selection.current.editable(this.editableProperty)?(this.show(),!0):(this.hide(),!1):(this.hide(),!1)}}class XD extends jt{components(){return{LeftAlign:$1,CenterAlign:M1,RightAlign:T1,TopAlign:I1,MiddleAlign:P1,BottomAlign:w1,SameWidth:E1,SameHeight:C1}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` + `}[ne("$el")](){return{style:{"--property-order":this.order}}}setTitle(e){this.refs.$propertyTitle.html(e)}hasKeyframe(){return!1}isHideHeader(){return!1}isFirstShow(){return!0}getClassName(){return""}getTitleClassName(){return""}getBodyClassName(){return""}getKeyframeProperty(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}getFooter(){return""}isPropertyShow(){return this.$el.hasClass("show")}toggle(e){this.$el.toggle(e)}hide(){this.$el.hide()}show(){this.$el.show()}onShowTitle(){}refreshShowIsNot(e="",t=!0){var r=this.$context.selection.current;r&&(e.includes(r.itemType)?this.hide():(this.show(),t&&this.refresh()))}refreshShow(e,t=!0){var r=this.$context.selection.current;r?de(e)&&e()?(this.show(),t&&this.refresh()):!de(e)&&e.includes(r.itemType)?(this.show(),t&&this.refresh()):this.hide():this.hide()}startInputEditing(e){!e||(e.attr("contenteditable",!0),e.css({"background-color":"white",outline:"1px auto black",color:"black"}),e.focus())}endInputEditing(e,t){if(!!e){e.attr("contenteditable",!1),e.css({"background-color":null,outline:null,color:null});var r=e.attr("data-index");t&&t(r,e.text().trim()),e.blur()}}get editableProperty(){return""}get order(){return 1e3}checkShow(){return this.$context.selection.current?this.$context.selection.current.editable(this.editableProperty)?(this.show(),!0):(this.hide(),!1):(this.hide(),!1)}}class w4 extends Ge{components(){return{LeftAlign:np,CenterAlign:ap,RightAlign:lp,TopAlign:dp,MiddleAlign:op,BottomAlign:sp,SameWidth:hp,SameHeight:cp}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return`
      - ${Rc("LeftAlign","CenterAlign","RightAlign","TopAlign","MiddleAlign","BottomAlign",["SameWidth",{direction:"bottom"}],"SameHeight")} + ${Ba("LeftAlign","CenterAlign","RightAlign","TopAlign","MiddleAlign","BottomAlign",["SameWidth",{direction:"bottom"}],"SameHeight")}
      - `}}function YD(n){n.registerUI("inspector.tab.style",{AlignmentProperty:XD})}var jie="";function L1(n,e="@"){return`${e}${n.startIndex}`.padEnd(10,"0")}function KD(n,e){const t=n.match(e);let i=[];if(!t)return i;for(var r=0,s=t.length;r{const l=n.indexOf(o.parsedString,a.next);o.startIndex=l,o.endIndex=l+o.parsedString.length,a.next=o.endIndex}),i}function k1(n,e){const t=KD(n,e);return t.forEach(i=>{n=n.replace(i.parsedString,L1(i))}),{str:n,matches:t}}function Pg(n,e){return e.forEach(t=>{n=n.replace(L1(t),t.parsedString)}),n}const qD=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Qi extends Vr{static parse(e){return new Qi(e)}getDefaultObject(){return{itemType:"animation",checked:!0,name:"none",direction:"normal",duration:y.second(0),timingFunction:"linear",delay:y.second(0),iterationCount:y.string("infinite"),playState:"running",fillMode:"none"}}convert(e){return e=super.convert(e),e.duration=y.parse(e.duration),e.iterationCount=y.parse(e.iterationCount),e}toCloneObject(){return P({},this.attrs("name","direction","duration","timingFunction","delay","iterationCount","playState","fillMode"))}togglePlayState(e){e?this.reset({playState:e==="running"?"running":"paused"}):this.json.playState==="paused"?this.reset({playState:"running"}):this.reset({playState:"paused"})}toCSS(){return this.json.name?{animation:this.toString()}:{}}toString(){var e=this.json;return[e.duration,e.timingFunction,e.delay,e.iterationCount,e.direction,e.fillMode,e.playState,e.name].join(" ")}static join(e){return e.map(t=>new Qi(t).toString()).join(",")}static add(e,t={}){const i=Qi.parseStyle(e);return i.push(Qi.parse(t)),Qi.join(i)}static remove(e,t){return Qi.filter(e,(i,r)=>t!=r)}static filter(e,t){return Qi.join(Qi.parseStyle(e).filter(i=>t(i)))}static replace(e,t,i){var r=Qi.parseStyle(e);return r[t]?r[t]=i:r.push(i),Qi.join(r)}static get(e,t){var i=Qi.parseStyle(e);return i[t]}static parseStyle(e){var t=[];if(!e)return t;const i=k1(e,qD);return t=i.str.split(",").map(r=>{const s=r.split(" ").filter(Boolean);return s.length>=7?{duration:y.parse(s[0]),timingFunction:Pg(s[1],i.matches),delay:y.parse(s[2]),iterationCount:s[3]==="infinite"?y.string("infinite"):y.parse(s[3]),direction:s[4],fillMode:s[5],playState:s[6],name:s[7]}:s.length>=3?{duration:y.parse(s[0]),timingFunction:Pg(s[1],i.matches),delay:y.parse(s[2]),name:s[3]}:s.length>=1?{duration:y.parse(s[0]),name:s[1]}:{}}),t.map(r=>Qi.parse(r))}}class ZD extends jt{getTitle(){return this.$i18n("animation.property.title")}getBody(){return"
      "}getTools(){return` - - `}isFirstShow(){return!0}[ve("$animationList")+It](){var e=this.$context.selection.current;return e?Qi.parseStyle(e.animation).map((t,i)=>{const r=this.state.selectedIndex===i?"selected":"",s=go(t.timingFunction,30,30);return` + `}}function C4(s){s.registerUI("inspector.tab.style",{AlignmentProperty:w4})}var OD="";function up(s,e="@"){return`${e}${s.startIndex}`.padEnd(10,"0")}function T4(s,e){const t=s.match(e);let r=[];if(!t)return r;for(var i=0,a=t.length;i{const l=s.indexOf(o.parsedString,n.next);o.startIndex=l,o.endIndex=l+o.parsedString.length,n.next=o.endIndex}),r}function pp(s,e){const t=T4(s,e);return t.forEach(r=>{s=s.replace(r.parsedString,up(r))}),{str:s,matches:t}}function Vc(s,e){return e.forEach(t=>{s=s.replace(up(t),t.parsedString)}),s}const k4=/((cubic-bezier|steps)\(([^)]*)\))/gi;class zt extends or{static parse(e){return new zt(e)}getDefaultObject(){return{itemType:"animation",checked:!0,name:"none",direction:"normal",duration:p.second(0),timingFunction:"linear",delay:p.second(0),iterationCount:p.string("infinite"),playState:"running",fillMode:"none"}}convert(e){return e=super.convert(e),e.duration=p.parse(e.duration),e.iterationCount=p.parse(e.iterationCount),e}toCloneObject(){return b({},this.attrs("name","direction","duration","timingFunction","delay","iterationCount","playState","fillMode"))}togglePlayState(e){e?this.reset({playState:e==="running"?"running":"paused"}):this.json.playState==="paused"?this.reset({playState:"running"}):this.reset({playState:"paused"})}toCSS(){return this.json.name?{animation:this.toString()}:{}}toString(){var e=this.json;return[e.duration,e.timingFunction,e.delay,e.iterationCount,e.direction,e.fillMode,e.playState,e.name].join(" ")}static join(e){return e.map(t=>new zt(t).toString()).join(",")}static add(e,t={}){const r=zt.parseStyle(e);return r.push(zt.parse(t)),zt.join(r)}static remove(e,t){return zt.filter(e,(r,i)=>t!=i)}static filter(e,t){return zt.join(zt.parseStyle(e).filter(r=>t(r)))}static replace(e,t,r){var i=zt.parseStyle(e);return i[t]?i[t]=r:i.push(r),zt.join(i)}static get(e,t){var r=zt.parseStyle(e);return r[t]}static parseStyle(e){var t=[];if(!e)return t;const r=pp(e,k4);return t=r.str.split(",").map(i=>{const a=i.split(" ").filter(Boolean);return a.length>=7?{duration:p.parse(a[0]),timingFunction:Vc(a[1],r.matches),delay:p.parse(a[2]),iterationCount:a[3]==="infinite"?p.string("infinite"):p.parse(a[3]),direction:a[4],fillMode:a[5],playState:a[6],name:a[7]}:a.length>=3?{duration:p.parse(a[0]),timingFunction:Vc(a[1],r.matches),delay:p.parse(a[2]),name:a[3]}:a.length>=1?{duration:p.parse(a[0]),name:a[1]}:{}}),t.map(i=>zt.parse(i))}}class M4 extends Ge{getTitle(){return this.$i18n("animation.property.title")}getBody(){return"
      "}getTools(){return` + + `}isFirstShow(){return!0}[G("$animationList")+Ee](){var e=this.$context.selection.current;return e?zt.parseStyle(e.animation).map((t,r)=>{const i=this.state.selectedIndex===r?"selected":"",a=Ms(t.timingFunction,30,30);return`
      -
      -
      +
      - +
      -
      +
      ${t.name?t.name:`< ${this.$i18n("animation.property.select a keyframe")} >`}
      @@ -1309,20 +1191,32 @@ return __emval_register(obj); -
      -
      - `}):""}[U(kt)+Ft(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("animation")&&this.refresh(),this.emit("hideAnimationPropertyPopup")}[se("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add animation property",this.$context.selection.packByValue({animation:t=>Qi.add(t.animation,{name:null})})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}[se("$animationList .tools .del")](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.reset({animation:Qi.remove(i.animation,t)}),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Qi.remove(i.animation,t)})),this.refresh())}[se("$animationList .play-state")](e){var t=+e.$dt.attr("data-index"),i=this.$context.selection.current;if(!i)return;const r=Qi.parseStyle(i.animation);var s=r[t];s&&(s.togglePlayState(),e.$dt.attr("data-play-state-selected-value",s.playState),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Qi.join(r)})))}selectItem(e,t=!0){t?this.refs[`animationIndex${e}`].addClass("selected"):this.refs[`animationIndex${e}`].removeClass("selected")}viewAnimationPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentAnimation=Qi.get(this.current.animation,this.selectedIndex),this.viewAnimationPropertyPopup())}viewAnimationPropertyPopup(){if(!this.currentAnimation)return;const e=this.currentAnimation;this.emit("showAnimationPropertyPopup",{changeEvent:"changeAnimationPropertyPopup",data:e.toCloneObject(),instance:this})}[se("$animationList .preview")](e){this.viewAnimationPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[U("changeAnimationPropertyPopup")](e){this.currentAnimation&&(this.currentAnimation.reset(P({},e)),this.current&&(this.$commands.executeCommand("setAttribute","change animation property",this.$context.selection.packByValue({animation:t=>Qi.replace(t.animation,this.selectedIndex,this.currentAnimation)})),this.refresh()))}}var Gie="";class JD extends Tn{getTitle(){return this.$i18n("animation.property.popup.title")}initState(){return{changeEvent:"",instance:{},data:{}}}updateData(e){this.state.data=P(P({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
      "}[ve("$popup")](){return` + `}):""}[M(Oe)+Ne(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("animation")&&this.refresh(),this.emit("hideAnimationPropertyPopup")}[A("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add animation property",this.$context.selection.packByValue({animation:t=>zt.add(t.animation,{name:null})})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}[A("$animationList .tools .del")](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.reset({animation:zt.remove(r.animation,t)}),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:zt.remove(r.animation,t)})),this.refresh())}[A("$animationList .play-state")](e){var t=+e.$dt.attr("data-index"),r=this.$context.selection.current;if(!r)return;const i=zt.parseStyle(r.animation);var a=i[t];a&&(a.togglePlayState(),e.$dt.attr("data-play-state-selected-value",a.playState),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:zt.join(i)})))}selectItem(e,t=!0){t?this.refs[`animationIndex${e}`].addClass("selected"):this.refs[`animationIndex${e}`].removeClass("selected")}viewAnimationPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentAnimation=zt.get(this.current.animation,this.selectedIndex),this.viewAnimationPropertyPopup())}viewAnimationPropertyPopup(){if(!this.currentAnimation)return;const e=this.currentAnimation;this.emit("showAnimationPropertyPopup",{changeEvent:"changeAnimationPropertyPopup",data:e.toCloneObject(),instance:this})}[A("$animationList .preview")](e){this.viewAnimationPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[M("changeAnimationPropertyPopup")](e){this.currentAnimation&&(this.currentAnimation.reset(b({},e)),this.current&&(this.$commands.executeCommand("setAttribute","change animation property",this.$context.selection.packByValue({animation:t=>zt.replace(t.animation,this.selectedIndex,this.currentAnimation)})),this.refresh()))}}var RD="",jD="";class Ar extends Y{template(){return` +
      +
      + + + ${this.getTools()} + + +
      +
      ${this.getBody()}
      + +
      + `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}onClose(){}[A("$close")](){this.$el.hide(),this.onClose()}setTitle(e){this.refs.$title.$("label").text(e)}[me("$title")+xe("movePopupTitle")+Se("endPopupTitle")](){this.x=p.parse(this.$el.css("left")),this.y=p.parse(this.$el.css("top"))}movePopupTitle(e,t){var r=p.px(this.x.value+e),i=p.px(this.y.value+t);this.$el.css({left:r,top:i,right:"auto",bottom:"auto"})}show(e=200){var t=28,r=320,i=this.$el.css("top"),a=this.$el.css("left"),n=i!=="auto"?p.parse(i):110,o=a!=="auto"?p.parse(a):document.body.clientWidth-r-t-e;this.$el.css({top:p.px(n),left:p.px(o),"z-index":this.$editor.zIndex}).show("inline-block")}makeRect(e,t,r){const a=this.$config.get("editor.layout.elements").$bodyPanel.rect();let n=a.left+a.width-e-10,o=r.top+t>a.top+a.height?a.top+a.height-t-10:r.top;return o<10&&(o=10),{top:o,left:n,width:e,height:t}}showByRect(e){this.$el.css({top:p.px(e.top),left:p.px(e.left),width:p.px(e.width),height:p.px(e.height),"z-index":this.$editor.zIndex}).show("inline-block")}hide(){this.$el.hide()}[M("hidePropertyPopup")](){this.hide()}[me("$resizer")+xe("moveResizer")](){this.width=p.parse(this.$el.css("width")),this.height=p.parse(this.$el.css("height"))}moveResizer(e,t){this.$el.css({width:Math.min(this.width+e,1e3),height:Math.min(this.height+t,700)})}}class I4 extends Ar{getTitle(){return this.$i18n("animation.property.popup.title")}initState(){return{changeEvent:"",instance:{},data:{}}}updateData(e){this.state.data=b(b({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
      "}[G("$popup")](){return`
      ${this.templateForKeyframe()} ${this.templateForTimingFunction()} @@ -1336,7 +1230,7 @@ return __emval_register(obj); `}templateForTimingFunction(){return`
      - ${W("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} + ${R("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})}
      `}templateForKeyframe(){return`
      @@ -1345,38 +1239,38 @@ return __emval_register(obj);
      - `}[ve("$name")](){var e=this.$context.selection.currentProject,t=[];return e&&e.keyframes&&(t=e.keyframes.map(i=>({key:i.name,value:i.name}))),t.unshift({key:"Select a keyframe",value:""}),t.map(i=>{var r=i.value===this.name?"selected":"",s=this.$i18n(i.key);return``})}[yn("$name")](){this.updateData({name:this.refs.$name.value})}templateForDirection(){var e="normal,reverse,alternate,alternate-reverse".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return` + `}[G("$name")](){var e=this.$context.selection.currentProject,t=[];return e&&e.keyframes&&(t=e.keyframes.map(r=>({key:r.name,value:r.name}))),t.unshift({key:"Select a keyframe",value:""}),t.map(r=>{var i=r.value===this.name?"selected":"",a=this.$i18n(r.key);return``})}[Sr("$name")](){this.updateData({name:this.refs.$name.value})}templateForDirection(){var e="normal,reverse,alternate,alternate-reverse".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return`
      - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.direction"),ref:"$direction",key:"direction",value:this.state.data.direction,options:e,onChange:"changeSelect"})} + ${R("SelectEditor",{label:this.$i18n("animation.property.popup.direction"),ref:"$direction",key:"direction",value:this.state.data.direction,options:e,onChange:"changeSelect"})}
      - `}[Me("changeSelect")](e,t){this.updateData({[e]:t})}templateForPlayState(){return` + `}[Z("changeSelect")](e,t){this.updateData({[e]:t})}templateForPlayState(){return`
      - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.play.state"),ref:"$playState",key:"playState",value:this.state.data.playState,options:["paused","running"],onChange:"changeSelect"})} + ${R("SelectEditor",{label:this.$i18n("animation.property.popup.play.state"),ref:"$playState",key:"playState",value:this.state.data.playState,options:["paused","running"],onChange:"changeSelect"})}
      `}templateForFillMode(){var e="none,forwards,backwards,both".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return`
      - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.fill.mode"),ref:"$fillMode",key:"fillMode",value:this.state.data.fillMode,options:e,onChange:"changeSelect"})} + ${R("SelectEditor",{label:this.$i18n("animation.property.popup.fill.mode"),ref:"$fillMode",key:"fillMode",value:this.state.data.fillMode,options:e,onChange:"changeSelect"})}
      `}templateForDelay(){return`
      - ${W("RangeEditor",{ref:"$delay",label:this.$i18n("animation.property.popup.delay"),key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} + ${R("RangeEditor",{ref:"$delay",label:this.$i18n("animation.property.popup.delay"),key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})}
      `}templateForDuration(){return`
      - ${W("RangeEditor",{ref:"$duration",label:this.$i18n("animation.property.popup.duration"),key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} + ${R("RangeEditor",{ref:"$duration",label:this.$i18n("animation.property.popup.duration"),key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})}
      `}templateForIterationCount(){return`
      - ${W("IterationCountEditor",{ref:"$iterationCount",label:this.$i18n("animation.property.popup.iteration"),key:"iterationCount",value:this.state.iterationCount||0,units:["normal","infinite"],onChange:"changeRangeEditor"})} + ${R("IterationCountEditor",{ref:"$iterationCount",label:this.$i18n("animation.property.popup.iteration"),key:"iterationCount",value:this.state.iterationCount||0,units:["normal","infinite"],onChange:"changeRangeEditor"})}
      - `}[Me("changeRangeEditor")](e,t){e==="iterationCount"&&(t.unit==="normal"?t=y.number(t.value):t=y.string(t.unit)),this.updateData({[e]:t})}[Me("changeCubicBezier")](e,t){this.updateData({[e]:t})}[U("showAnimationPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[U("hideAnimationPropertyPopup")](){this.$el.hide()}}function QD(n){n.registerUI("inspector.tab.transition",{AnimationProperty:ZD}),n.registerUI("popup",{AnimationPropertyPopup:JD})}class mh{static create(e){return class extends jt{getTitle(){return e.title}getClassName(){return e.className||"item"}get editableProperty(){return e.editableProperty}get order(){return Di(e.order)?1e3:e.order}afterComponentRendering(t,i,r){var s;if(i=="$comp"){const a=((s=this.$context.selection)==null?void 0:s.current)||{},o=Ue(e.inspector)?e.inspector(a):this.$context.components.createInspector(a,e.editableProperty);r.setInspector(o)}}refresh(){const t=this.$context.selection.current||{};(t||e.visible)&&(this.setTitle(e.title||t.getDefaultTitle()||t.itemType||t.name),this.load())}[U(kt)+Qe("checkShow")](){e.preventUpdate?this.$stateManager.isPointerUp&&this.refresh():this.refresh()}[ve("$body")](){var r;var t=(r=this.$context.selection)==null?void 0:r.current;if(!t&&!e.visible)return"";const i=Ue(e.inspector)?e.inspector(t||{}):this.$context.components.createInspector(t||{},e.editableProperty);return W("ComponentEditor",{ref:"$comp",inspector:i,onchange:"changeComponentProperty"})}getBody(){return"
      "}[Me("changeComponentProperty")](t,i){e.action?this.$commands.executeCommand(e.action,`change attribute : ${t}`,t,i):this.$commands.executeCommand("setAttribute",`change attribute : ${t}`,this.$context.selection.packByValue({[t]:i}))}}}}function e6(n){n.registerUI("inspector.tab.style",{AppearanceProperty:mh.create({title:n.$i18n("background.color.property.title"),editableProperty:"appearance",preventUpdate:!0,inspector:e=>[{type:"column",size:[1,1],columns:[{key:"backgroundColor",editor:"color-view",editorOptions:{compact:!0,format:!0},defaultValue:e.backgroundColor},{key:"mixBlendMode",editor:"blend-select",editorOptions:{label:"tonality",compact:!0},defaultValue:e.mixBlendMode||hr.NORMAL}]},{key:"overflow",editor:"select",editorOptions:{label:n.$i18n("background.color.property.overflow"),options:[ml.VISIBLE,ml.HIDDEN,ml.SCROLL,ml.AUTO].map(t=>({value:t,text:n.$i18n(`background.color.property.overflow.${t}`)}))},defaultValue:e.overflow}]})})}var Hie="",Tg=[{category:"Web",groups:[{group:"Landscape",devices:[{device:"Web Small",size:"1024x600"},{device:"Web Medium",size:"1280x800"},{device:"Web Large",size:"1440x900"},{device:"Web X Large",size:"1920x1200"}]},{group:"Portrait",devices:[{device:"Web Small",size:"600x1024"},{device:"Web Medium",size:"800x1280"},{device:"Web Large",size:"900x1440"},{device:"Web X Large",size:"1200x1920"}]}]},{category:"Apple Devices",groups:[{group:"iphone",devices:[{device:"iPhone 8",size:"375x667"},{device:"iPhone 8 Plus",size:"414x736"},{device:"iPhone SE",size:"320x568"},{device:"iPhone XS",size:"375x812"},{device:"iPhone XR",size:"414x896"},{device:"iPhone XS Max",size:"414x896"}]},{group:"ipad",devices:[{device:"iPad",size:"768x1024"},{device:"iPad Pro",size:"1024x1366"}]},{group:"apple watch",devices:[{device:"Apple Watch 38nm",size:"272x340"},{device:"Apple Watch 40nm",size:"326x394"},{device:"Apple Watch 42nm",size:"313x390"},{device:"Apple Watch 44nm",size:"368x448"}]},{group:"apple tv",devices:[{device:"Apple TV",size:"1920x1080"}]},{group:"MAC",devices:[{device:"Touch Bar",size:"1085x30"}]}]},{category:"Android Devices",groups:[{group:"android mobile",devices:[{device:"Android Mobile",size:"360x640"}]},{group:"android tablet",devices:[{device:"Android Tablet",size:"768x1024"}]}]}];class t6 extends jt{getClassName(){return"elf--artboard-size-list"}get editableProperty(){return"artboardSize"}[U(kt)+Qe("checkShow")](){this.refresh()}initState(){return{selectedIndex:0}}getTitle(){return"ArtBoard Preset"}getTools(){var e=Tg.map((t,i)=>({category:t.category,index:i}));return W("SelectEditor",{ref:"$select",value:e[0].category,options:e.map(t=>t.category),onchange:"changeSizeIndex"})}[Me("changeSizeIndex")](e,t){var i=this.state.selectedIndex;Tg.forEach((r,s)=>{r.category===t&&(i=s)}),this.state.selectedIndex=i,this.refresh()}getBody(){return` + `}[Z("changeRangeEditor")](e,t){e==="iterationCount"&&(t.unit==="normal"?t=p.number(t.value):t=p.string(t.unit)),this.updateData({[e]:t})}[Z("changeCubicBezier")](e,t){this.updateData({[e]:t})}[M("showAnimationPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[M("hideAnimationPropertyPopup")](){this.$el.hide()}}function E4(s){s.registerUI("inspector.tab.transition",{AnimationProperty:M4}),s.registerUI("popup",{AnimationPropertyPopup:I4})}class mn{static create(e){return class extends Ge{getTitle(){return e.title}getClassName(){return e.className||"item"}get editableProperty(){return e.editableProperty}get order(){return Ct(e.order)?1e3:e.order}afterComponentRendering(t,r,i){var a;if(r=="$comp"){const n=((a=this.$context.selection)==null?void 0:a.current)||{},o=de(e.inspector)?e.inspector(n):this.$context.components.createInspector(n,e.editableProperty);i.setInspector(o)}}refresh(){const t=this.$context.selection.current||{};(t||e.visible)&&(this.setTitle(e.title||t.getDefaultTitle()||t.itemType||t.name),this.load())}[M(Oe)+fe("checkShow")](){e.preventUpdate?this.$stateManager.isPointerUp&&this.refresh():this.refresh()}[G("$body")](){var i;var t=(i=this.$context.selection)==null?void 0:i.current;if(!t&&!e.visible)return"";const r=de(e.inspector)?e.inspector(t||{}):this.$context.components.createInspector(t||{},e.editableProperty);return R("ComponentEditor",{ref:"$comp",inspector:r,onchange:"changeComponentProperty"})}getBody(){return"
      "}[Z("changeComponentProperty")](t,r){e.action?this.$commands.executeCommand(e.action,`change attribute : ${t}`,t,r):this.$commands.executeCommand("setAttribute",`change attribute : ${t}`,this.$context.selection.packByValue({[t]:r}))}}}}function L4(s){s.registerUI("inspector.tab.style",{AppearanceProperty:mn.create({title:s.$i18n("background.color.property.title"),editableProperty:"appearance",preventUpdate:!0,inspector:e=>[{type:"column",size:[1,1],columns:[{key:"backgroundColor",editor:"color-view",editorOptions:{compact:!0,format:!0},defaultValue:e.backgroundColor},{key:"mixBlendMode",editor:"blend-select",editorOptions:{label:"tonality",compact:!0},defaultValue:e.mixBlendMode||Wt.NORMAL}]},{key:"overflow",editor:"select",editorOptions:{label:s.$i18n("background.color.property.overflow"),options:[ca.VISIBLE,ca.HIDDEN,ca.SCROLL,ca.AUTO].map(t=>({value:t,text:s.$i18n(`background.color.property.overflow.${t}`)}))},defaultValue:e.overflow}]})})}var zD="",Oc=[{category:"Web",groups:[{group:"Landscape",devices:[{device:"Web Small",size:"1024x600"},{device:"Web Medium",size:"1280x800"},{device:"Web Large",size:"1440x900"},{device:"Web X Large",size:"1920x1200"}]},{group:"Portrait",devices:[{device:"Web Small",size:"600x1024"},{device:"Web Medium",size:"800x1280"},{device:"Web Large",size:"900x1440"},{device:"Web X Large",size:"1200x1920"}]}]},{category:"Apple Devices",groups:[{group:"iphone",devices:[{device:"iPhone 8",size:"375x667"},{device:"iPhone 8 Plus",size:"414x736"},{device:"iPhone SE",size:"320x568"},{device:"iPhone XS",size:"375x812"},{device:"iPhone XR",size:"414x896"},{device:"iPhone XS Max",size:"414x896"}]},{group:"ipad",devices:[{device:"iPad",size:"768x1024"},{device:"iPad Pro",size:"1024x1366"}]},{group:"apple watch",devices:[{device:"Apple Watch 38nm",size:"272x340"},{device:"Apple Watch 40nm",size:"326x394"},{device:"Apple Watch 42nm",size:"313x390"},{device:"Apple Watch 44nm",size:"368x448"}]},{group:"apple tv",devices:[{device:"Apple TV",size:"1920x1080"}]},{group:"MAC",devices:[{device:"Touch Bar",size:"1085x30"}]}]},{category:"Android Devices",groups:[{group:"android mobile",devices:[{device:"Android Mobile",size:"360x640"}]},{group:"android tablet",devices:[{device:"Android Tablet",size:"768x1024"}]}]}];class V4 extends Ge{getClassName(){return"elf--artboard-size-list"}get editableProperty(){return"artboardSize"}[M(Oe)+fe("checkShow")](){this.refresh()}initState(){return{selectedIndex:0}}getTitle(){return"ArtBoard Preset"}getTools(){var e=Oc.map((t,r)=>({category:t.category,index:r}));return R("SelectEditor",{ref:"$select",value:e[0].category,options:e.map(t=>t.category),onchange:"changeSizeIndex"})}[Z("changeSizeIndex")](e,t){var r=this.state.selectedIndex;Oc.forEach((i,a)=>{i.category===t&&(r=a)}),this.state.selectedIndex=r,this.refresh()}getBody(){return`
      `}makeDevice(e){return`
      ${e.device}
      ${e.size}
      - `}[se("$list .device-item")](e){var t=e.$dt.attr("data-size");this.$commands.emit("resizeArtBoard",t)}makeGroup(e){return` + `}[A("$list .device-item")](e){var t=e.$dt.attr("data-size");this.$commands.emit("resizeArtBoard",t)}makeGroup(e){return`
      ${e.group}
      @@ -1390,39 +1284,39 @@ return __emval_register(obj);
      ${e.groups.map(t=>this.makeGroup(t)).join("")}
      - `}[ve("$list")+It](){var e=Tg[this.state.selectedIndex];return e.groups.map(t=>this.makeGroup(t))}}function i6(n){n.registerUI("inspector.tab.style",{ArtBoardSizeProperty:t6})}var Uie="";const r6=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class n6 extends jt{getTitle(){return this.$i18n("backdrop.filter.property.title")}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
      "}getTools(){return` + `}[G("$list")+Ee](){var e=Oc[this.state.selectedIndex];return e.groups.map(t=>this.makeGroup(t))}}function O4(s){s.registerUI("inspector.tab.style",{ArtBoardSizeProperty:V4})}var AD="";const R4=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class j4 extends Ge{getTitle(){return this.$i18n("backdrop.filter.property.title")}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
      "}getTools(){return` - - `}[se("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[ve("$filterSelect")](){var e=r6.map(r=>({title:this.$i18n(`filter.property.${r}`),value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(i=>({title:`svg - #${i.id}`,value:i.id}))),t}[ve("$body")](){var e=this.$context.selection.current||{},t=e.backdropFilter;return` + + `}[A("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[G("$filterSelect")](){var e=R4.map(i=>({title:this.$i18n(`filter.property.${i}`),value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(r=>({title:`svg - #${r.id}`,value:r.id}))),t}[G("$body")](){var e=this.$context.selection.current||{},t=e.backdropFilter;return`
      - ${W("FilterEditor",{ref:"$filterEditor",key:"backdropFilter",value:t,hideLabel:!0,onchange:"changeFilterEditor"})} + ${R("FilterEditor",{ref:"$filterEditor",key:"backdropFilter",value:t,hideLabel:!0,onchange:"changeFilterEditor"})}
      - `}[Me("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change backdrop filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"backdropFilter"}[U(kt)+Qe("checkShow")+Ft(1e3)](){this.refresh()}}function s6(n){n.registerUI("inspector.tab.style",{BackdropFilterProperty:n6})}class a6 extends jt{getTitle(){return"Background Clip"}isFirstShow(){return!1}getTools(){return"
      "}[ve("$backgroundClip")](){var e=this.$context.selection.current||{},t=e.backgroundClip||"";return W("SelectEditor",{ref:"$1",key:"backgroundClip",icon:!0,value:t,options:["","paddinb-box","border-box","content-box","text"],onchange:"changeSelect"})}[Me("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change background clip",this.$context.selection.packByValue({[e]:t}))}[U(kt)+Ft(100)](){this.refreshShow(["rect","circle","text"])}}function o6(n){n.registerElement({BackgroundClipProperty:a6})}var Wie="";const A1={image:"image","image-resource":"image",url:"image","static-gradient":"gradient","linear-gradient":"gradient","repeating-linear-gradient":"gradient","radial-gradient":"gradient","repeating-radial-gradient":"gradient","conic-gradient":"gradient","repeating-conic-gradient":"gradient"};class l6 extends ge{initState(){return{hideLabel:this.props.hideLabel||!1,value:this.props.value,images:this.parseBackgroundImage(this.props.value)}}parseBackgroundImage(e){return e===""?[]:Ot.parseStyle(hn(e))}setValue(e){this.setState({value:e,images:this.parseBackgroundImage(e)})}template(){return` + `}[Z("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change backdrop filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"backdropFilter"}[M(Oe)+fe("checkShow")+Ne(1e3)](){this.refresh()}}function z4(s){s.registerUI("inspector.tab.style",{BackdropFilterProperty:j4})}class A4 extends Ge{getTitle(){return"Background Clip"}isFirstShow(){return!1}getTools(){return"
      "}[G("$backgroundClip")](){var e=this.$context.selection.current||{},t=e.backgroundClip||"";return R("SelectEditor",{ref:"$1",key:"backgroundClip",icon:!0,value:t,options:["","paddinb-box","border-box","content-box","text"],onchange:"changeSelect"})}[Z("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change background clip",this.$context.selection.packByValue({[e]:t}))}[M(Oe)+Ne(100)](){this.refreshShow(["rect","circle","text"])}}function D4(s){s.registerElement({BackgroundClipProperty:A4})}var DD="";const gp={image:"image","image-resource":"image",url:"image","static-gradient":"gradient","linear-gradient":"gradient","repeating-linear-gradient":"gradient","radial-gradient":"gradient","repeating-radial-gradient":"gradient","conic-gradient":"gradient","repeating-conic-gradient":"gradient"};class F4 extends Y{initState(){return{hideLabel:this.props.hideLabel||!1,value:this.props.value,images:this.parseBackgroundImage(this.props.value)}}parseBackgroundImage(e){return e===""?[]:Be.parseStyle(wr(e))}setValue(e){this.setState({value:e,images:this.parseBackgroundImage(e)})}template(){return`
      - `}[ve("$fillList")+It](){const e=this.$context.selection.current||{color:"black"};return this.state.images.map((t,i)=>{var r=t.image,s=A1[r.type];const a=t.selected?"selected":"";return t.selected&&(this.selectedIndex=i),` -
      - - ${Rc(["BackgroundPositionEditor",{key:"background-position",index:i,ref:`$bp${i}`,x:t.x,y:t.y,width:t.width,height:t.height,repeat:t.repeat,size:t.size,blendMode:t.blendMode,onchange:"changePattern"}],["GradientSingleEditor",{index:i,ref:`$gse${i}`,image:t.image,color:e.color,key:"background-image",onchange:"changePattern"}])} + `}[G("$fillList")+Ee](){const e=this.$context.selection.current||{color:"black"};return this.state.images.map((t,r)=>{var i=t.image,a=gp[i.type];const n=t.selected?"selected":"";return t.selected&&(this.selectedIndex=r),` +
      + + ${Ba(["BackgroundPositionEditor",{key:"background-position",index:r,ref:`$bp${r}`,x:t.x,y:t.y,width:t.width,height:t.height,repeat:t.repeat,size:t.size,blendMode:t.blendMode,onchange:"changePattern"}],["GradientSingleEditor",{index:r,ref:`$gse${r}`,image:t.image,color:e.color,key:"background-image",onchange:"changePattern"}])}
      - ${W("BlendSelectEditor",{ref:`$blend_${i}`,key:"blendMode",value:t.blendMode,params:i,compact:!0,onchange:"changeRangeEditor"})} + ${R("BlendSelectEditor",{ref:`$blend_${r}`,key:"blendMode",value:t.blendMode,params:r,compact:!0,onchange:"changeRangeEditor"})}
      - +
      - +
      - +
      - `})}modifyBackgroundImage(){var e=ei(Ot.toProperty(this.state.images));this.parent.trigger(this.props.onchange,this.props.key,e)}makeGradient(e){switch(e){case"static-gradient":return"static-gradient(black)";case"linear-gradient":return"linear-gradient(90deg, white 0%, black 100%)";case"repeating-linear-gradient":return"repeating-linear-gradient(90deg, white 2%, black 4%)";case"radial-gradient":return"radial-gradient(circle, white 0%, black 100%)";case"repeating-radial-gradient":return"repeating-radial-gradient(circle, white 2%, black 4%)";case"conic-gradient":return"conic-gradient(white 0%, black 100%)";case"repeating-conic-gradient":return"repeating-conic-gradient(white 50%, black 100%)"}}[U("add")](e){this.state.images.unshift(new Ot({image:Ot.parseImage(this.makeGradient(e))})),this.refresh(),this.modifyBackgroundImage()}[se("$add")](){this.trigger("add")}[on("$fillList .fill-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$fillList .fill-item")+St](){}sortItem(e,t,i){e.splice(i+(t{i.selected=r===e})}[U("selectFillPopupTab")](e){var t=A1[e],i=this.refs[`fillIndex${this.selectedIndex}`];i.attr("data-fill-type",t)}[Me("changeRangeEditor")](e,t,i){this.trigger("changePattern",e,{[e]:t},i)}[Me("changePattern")](e,t,i){var r=+i,s=this.state.images[r];s.reset(t),this.modifyBackgroundImage(),this.refresh()}}var Xie="";class c6 extends Tn{get localeKey(){return"background.image.position.popup"}getTitle(){return this.$i18n("title")}initState(){return{size:this.props.size||"auto",repeat:this.props.repeat||"repeat",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e,this.state.params)}templateForSize(){return W("SelectEditor",{label:this.$i18n("size"),ref:"$size",key:"size",value:this.state.size,options:["contain","cover","auto"],onchange:"changeRangeEditor"})}[Me("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){return W("InputRangeEditor",{label:"X",compact:!0,ref:"$x",key:"x",value:this.state.x,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForY(){return W("InputRangeEditor",{label:"Y",compact:!0,ref:"$y",key:"y",value:this.state.y,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForWidth(){return W("InputRangeEditor",{label:"W",compact:!0,ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return W("InputRangeEditor",{label:"H",compact:!0,ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForRepeat(){return` + `})}modifyBackgroundImage(){var e=Je(Be.toProperty(this.state.images));this.parent.trigger(this.props.onchange,this.props.key,e)}makeGradient(e){switch(e){case"static-gradient":return"static-gradient(black)";case"linear-gradient":return"linear-gradient(90deg, white 0%, black 100%)";case"repeating-linear-gradient":return"repeating-linear-gradient(90deg, white 2%, black 4%)";case"radial-gradient":return"radial-gradient(circle, white 0%, black 100%)";case"repeating-radial-gradient":return"repeating-radial-gradient(circle, white 2%, black 4%)";case"conic-gradient":return"conic-gradient(white 0%, black 100%)";case"repeating-conic-gradient":return"repeating-conic-gradient(white 50%, black 100%)"}}[M("add")](e){this.state.images.unshift(new Be({image:Be.parseImage(this.makeGradient(e))})),this.refresh(),this.modifyBackgroundImage()}[A("$add")](){this.trigger("add")}[pr("$fillList .fill-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$fillList .fill-item")+Ve](){}sortItem(e,t,r){e.splice(r+(t{r.selected=i===e})}[M("selectFillPopupTab")](e){var t=gp[e],r=this.refs[`fillIndex${this.selectedIndex}`];r.attr("data-fill-type",t)}[Z("changeRangeEditor")](e,t,r){this.trigger("changePattern",e,{[e]:t},r)}[Z("changePattern")](e,t,r){var i=+r,a=this.state.images[i];a.reset(t),this.modifyBackgroundImage(),this.refresh()}}var FD="";class B4 extends Ar{get localeKey(){return"background.image.position.popup"}getTitle(){return this.$i18n("title")}initState(){return{size:this.props.size||"auto",repeat:this.props.repeat||"repeat",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e,this.state.params)}templateForSize(){return R("SelectEditor",{label:this.$i18n("size"),ref:"$size",key:"size",value:this.state.size,options:["contain","cover","auto"],onchange:"changeRangeEditor"})}[Z("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){return R("InputRangeEditor",{label:"X",compact:!0,ref:"$x",key:"x",value:this.state.x,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForY(){return R("InputRangeEditor",{label:"Y",compact:!0,ref:"$y",key:"y",value:this.state.y,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForWidth(){return R("InputRangeEditor",{label:"W",compact:!0,ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return R("InputRangeEditor",{label:"H",compact:!0,ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForRepeat(){return`
      @@ -1434,9 +1328,9 @@ return __emval_register(obj);
      - `}[se("$repeat button")]({$dt:e}){this.refs.$repeat.attr("data-value",e.value),this.updateData({repeat:e.value})}getBody(){return` + `}[A("$repeat button")]({$dt:e}){this.refs.$repeat.attr("data-value",e.value),this.updateData({repeat:e.value})}getBody(){return`
      - `}[ve("$picker")+It](){return` + `}[G("$picker")+Ee](){return`
      @@ -1449,7 +1343,7 @@ return __emval_register(obj); ${this.templateForRepeat()}
      - `}[U("showBackgroundImagePositionPopup")](e,t,i){this.state.changeEvent=e.changeEvent||"changeFillPopup",this.state.params=t,this.setState(e.data),this.showByRect(this.makeRect(180,310,i))}}var Yie="";class h6 extends jt{getTitle(){return this.$i18n("background.image.property.title")}afterRender(){this.show()}getClassName(){return"background-image"}getBodyClassName(){return"no-padding"}getBody(){return D("div",{class:"full",ref:"$property"})}getTools(){return D("div",{class:"fill-sample-list",ref:"$add"},D("button",{type:"button",class:"fill","data-value":"static-gradient"},re("add")))}[se("$add [data-value]")](e){this.children.$backgroundImageEditor.trigger("add",e.$dt.data("value"))}[ve("$property")](){var e=this.$context.selection.current||{},t=e.backgroundImage||"";return W("BackgroundImageEditor",{ref:"$backgroundImageEditor",key:"backgroundImage",value:t,onchange:"changeBackgroundImage"})}get editableProperty(){return"backgroundImage"}[U(kt)+Qe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[U(Gi)+Qe("checkCurrentItem")+Ft(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("backgroundImage")&&this.refresh()}[Me("changeBackgroundImage")](e,t){this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[e]:t}))}}var Kie="";class d6 extends ge{initState(){return{index:this.props.index,x:this.props.x,y:this.props.y,width:this.props.width,height:this.props.height,repeat:this.props.repeat,size:this.props.size,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[$e("$miniView")](){return{style:{"background-image":"linear-gradient(to top right, black, white)","background-repeat":this.state.repeat,"background-size":"10px 10px"}}}template(){return` + `}[M("showBackgroundImagePositionPopup")](e,t,r){this.state.changeEvent=e.changeEvent||"changeFillPopup",this.state.params=t,this.setState(e.data),this.showByRect(this.makeRect(180,310,r))}}var BD="";class N4 extends Ge{getTitle(){return this.$i18n("background.image.property.title")}afterRender(){this.show()}getClassName(){return"background-image"}getBodyClassName(){return"no-padding"}getBody(){return C("div",{class:"full",ref:"$property"})}getTools(){return C("div",{class:"fill-sample-list",ref:"$add"},C("button",{type:"button",class:"fill","data-value":"static-gradient"},z("add")))}[A("$add [data-value]")](e){this.children.$backgroundImageEditor.trigger("add",e.$dt.data("value"))}[G("$property")](){var e=this.$context.selection.current||{},t=e.backgroundImage||"";return R("BackgroundImageEditor",{ref:"$backgroundImageEditor",key:"backgroundImage",value:t,onchange:"changeBackgroundImage"})}get editableProperty(){return"backgroundImage"}[M(Oe)+fe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[M(Mt)+fe("checkCurrentItem")+Ne(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("backgroundImage")&&this.refresh()}[Z("changeBackgroundImage")](e,t){this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[e]:t}))}}var ND="";class G4 extends Y{initState(){return{index:this.props.index,x:this.props.x,y:this.props.y,width:this.props.width,height:this.props.height,repeat:this.props.repeat,size:this.props.size,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ne("$miniView")](){return{style:{"background-image":"linear-gradient(to top right, black, white)","background-repeat":this.state.repeat,"background-size":"10px 10px"}}}template(){return`
      @@ -1457,9 +1351,9 @@ return __emval_register(obj);
      - `}[se("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){this.emit("showBackgroundImagePositionPopup",{changeEvent:"changeBackgroundPositionPattern",data:this.state},{id:this.id},this.$el.rect())}[U("changeBackgroundPositionPattern")](e,t){t.id===this.id&&this.updateData(P({},e))}}function u6(n){n.registerElement({BackgroundImageEditor:l6,BackgroundPositionEditor:d6}),n.registerUI("inspector.tab.style",{BackgroundImageProperty:h6}),n.registerUI("popup",{BackgroundImagePositionPopup:c6})}var qie="",p6={none:!0,hidden:!0,dotted:!0,dashed:!0,solid:!0,double:!0,groove:!0,ridge:!0,inset:!0,outset:!0};class Sa{static parseStyle(e){return hn(e)}static parseValue(e=""){var t="",i="",r="";return e.split(" ").filter(s=>s.trim()).forEach(s=>{p6[s]?t=s:xy(s)?r=s:i=y.parse(s).value}),{style:t,color:r,width:i}}static joinValue(e){return`${e.width}px ${e.style||"solid"} ${e.color}`}static join(e){var t=[e.border?`border: ${e.border}`:"",e["border-top"]?`border-top: ${e["border-top"]}`:"",e["border-left"]?`border-left: ${e["border-left"]}`:"",e["border-right"]?`border-right: ${e["border-right"]}`:"",e["border-bottom"]?`border-bottom: ${e["border-bottom"]}`:""].filter(i=>i);return t.join(";")}}const f6=["border"],g6={border:"all","border-top":"top","border-right":"right","border-bottom":"bottom","border-left":"left"};class m6 extends ge{initState(){var e=Sa.parseStyle(this.props.value),t=Object.keys(e)[0]||"border";return{direction:t,borders:e}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return Sa.join(this.state.borders)}setValue(e){this.state.borders=Sa.parseStyle(e),this.refresh()}[ve("$editorArea")](){return f6.map(e=>{var t=g6[e]||e;return t=this.$i18n("border.editor."+t),` + `}[A("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){this.emit("showBackgroundImagePositionPopup",{changeEvent:"changeBackgroundPositionPattern",data:this.state},{id:this.id},this.$el.rect())}[M("changeBackgroundPositionPattern")](e,t){t.id===this.id&&this.updateData(b({},e))}}function H4(s){s.registerElement({BackgroundImageEditor:F4,BackgroundPositionEditor:G4}),s.registerUI("inspector.tab.style",{BackgroundImageProperty:N4}),s.registerUI("popup",{BackgroundImagePositionPopup:B4})}var GD="",U4={none:!0,hidden:!0,dotted:!0,dashed:!0,solid:!0,double:!0,groove:!0,ridge:!0,inset:!0,outset:!0};class is{static parseStyle(e){return wr(e)}static parseValue(e=""){var t="",r="",i="";return e.split(" ").filter(a=>a.trim()).forEach(a=>{U4[a]?t=a:lu(a)?i=a:r=p.parse(a).value}),{style:t,color:i,width:r}}static joinValue(e){return`${e.width}px ${e.style||"solid"} ${e.color}`}static join(e){var t=[e.border?`border: ${e.border}`:"",e["border-top"]?`border-top: ${e["border-top"]}`:"",e["border-left"]?`border-left: ${e["border-left"]}`:"",e["border-right"]?`border-right: ${e["border-right"]}`:"",e["border-bottom"]?`border-bottom: ${e["border-bottom"]}`:""].filter(r=>r);return t.join(";")}}const W4=["border"],X4={border:"all","border-top":"top","border-right":"right","border-bottom":"bottom","border-left":"left"};class Y4 extends Y{initState(){var e=is.parseStyle(this.props.value),t=Object.keys(e)[0]||"border";return{direction:t,borders:e}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return is.join(this.state.borders)}setValue(e){this.state.borders=is.parseStyle(e),this.refresh()}[G("$editorArea")](){return W4.map(e=>{var t=X4[e]||e;return t=this.$i18n("border.editor."+t),`
      - ${W("BorderValueEditor",{ref:`$${e}`,label:t,key:e,value:this.state.borders[e],onchange:"changeKeyValue"})} + ${R("BorderValueEditor",{ref:`$${e}`,label:t,key:e,value:this.state.borders[e],onchange:"changeKeyValue"})}
      `})}template(){return`
      @@ -1467,17 +1361,17 @@ return __emval_register(obj);
      - `}[Me("changeKeyValue")](e,t){var i=this.state.borders;i[e]=t,this.updateData({borders:i})}}var Zie="";class v6 extends jt{getTitle(){return this.$i18n("border.property.title")}getBody(){return`
      `}[ve("$body")](){var e=this.$context.selection.current||{},t=e.border||"";return W("BorderEditor",{ref:"$1",key:"border",value:t,onchange:"changeKeyValue"})}get editableProperty(){return"border"}[U(kt)+Ft(100)+Qe("checkShow")](){this.refresh()}[Me("changeKeyValue")](e,t){this.$commands.executeCommand("setAttribute","change border",this.$context.selection.packByValue({[e]:t}))}}var Jie="";const y6=[Xn.NONE,Xn.HIDDEN,Xn.SOLID,Xn.DASHED,Xn.DOTTED,Xn.DOUBLE,Xn.GROOVE,Xn.RIDGE,Xn.INSET,Xn.OUTSET].join(",");class b6 extends ge{initState(){return{value:Sa.parseValue(this.props.value)}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return Sa.joinValue(this.state.value)}setValue(e){this.state.value=Sa.parseValue(e),this.refresh()}refresh(){const e=y.parse(this.state.value.width==="undefined"?0:this.state.value.width);this.children.$width.setValue(e.value||0),this.children.$style.setValue(this.state.value.style||"solid"),this.children.$color.setValue(this.state.value.color||"rgba(0, 0, 0, 1)")}template(){var{width:e,style:t,color:i}=this.state.value;return` + `}[Z("changeKeyValue")](e,t){var r=this.state.borders;r[e]=t,this.updateData({borders:r})}}var HD="";class K4 extends Ge{getTitle(){return this.$i18n("border.property.title")}getBody(){return`
      `}[G("$body")](){var e=this.$context.selection.current||{},t=e.border||"";return R("BorderEditor",{ref:"$1",key:"border",value:t,onchange:"changeKeyValue"})}get editableProperty(){return"border"}[M(Oe)+Ne(100)+fe("checkShow")](){this.refresh()}[Z("changeKeyValue")](e,t){this.$commands.executeCommand("setAttribute","change border",this.$context.selection.packByValue({[e]:t}))}}var UD="";const Z4=[Jr.NONE,Jr.HIDDEN,Jr.SOLID,Jr.DASHED,Jr.DOTTED,Jr.DOUBLE,Jr.GROOVE,Jr.RIDGE,Jr.INSET,Jr.OUTSET].join(",");class q4 extends Y{initState(){return{value:is.parseValue(this.props.value)}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return is.joinValue(this.state.value)}setValue(e){this.state.value=is.parseValue(e),this.refresh()}refresh(){const e=p.parse(this.state.value.width==="undefined"?0:this.state.value.width);this.children.$width.setValue(e.value||0),this.children.$style.setValue(this.state.value.style||"solid"),this.children.$color.setValue(this.state.value.color||"rgba(0, 0, 0, 1)")}template(){var{width:e,style:t,color:r}=this.state.value;return`
      - ${W("NumberInputEditor",{label:re("line_weight"),compact:!0,ref:"$width",min:0,max:100,step:1,key:"width",value:e,onchange:"changeKeyValue"})} - ${W("SelectEditor",{ref:"$style",key:"style",label:re("line_style"),title:"Style",compact:!0,options:y6,value:t||"solid",onchange:"changeKeyValue"})} - ${W("ColorViewEditor",{ref:"$color",key:"color",mini:!0,value:i||"rgba(0, 0, 0, 1)",onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{label:z("line_weight"),compact:!0,ref:"$width",min:0,max:100,step:1,key:"width",value:e,onchange:"changeKeyValue"})} + ${R("SelectEditor",{ref:"$style",key:"style",label:z("line_style"),title:"Style",compact:!0,options:Z4,value:t||"solid",onchange:"changeKeyValue"})} + ${R("ColorViewEditor",{ref:"$color",key:"color",mini:!0,value:r||"rgba(0, 0, 0, 1)",onchange:"changeKeyValue"})}
      - `}[Me("changeKeyValue")](e,t){var i=this.state.value;i[e]=t,this.updateData({value:i})}}function x6(n){n.registerElement({BorderEditor:m6,BorderValueEditor:b6}),n.registerUI("inspector.tab.style",{BorderProperty:v6})}const R1=[{key:"top",title:"Top"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"},{key:"right",title:"Right"}],O1=R1.map(n=>n.key),Cg={image:"Image","static-gradient":"Static","linear-gradient":"Linear","repeating-linear-gradient":`${We.repeat} Linear`,"radial-gradient":"Radial","repeating-radial-gradient":`${We.repeat} Radial`,"conic-gradient":"Conic","repeating-conic-gradient":`${We.repeat} Conic`};class _6 extends jt{getTitle(){return"Border Image"}[U(kt)](){this.refresh()}getTools(){var e=this.$context.selection.current||{},t=e.appliedBorderImage||!1;return` + `}[Z("changeKeyValue")](e,t){var r=this.state.value;r[e]=t,this.updateData({value:r})}}function Q4(s){s.registerElement({BorderEditor:Y4,BorderValueEditor:q4}),s.registerUI("inspector.tab.style",{BorderProperty:K4})}const fp=[{key:"top",title:"Top"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"},{key:"right",title:"Right"}],mp=fp.map(s=>s.key),Rc={image:"Image","static-gradient":"Static","linear-gradient":"Linear","repeating-linear-gradient":`${oe.repeat} Linear`,"radial-gradient":"Radial","repeating-radial-gradient":`${oe.repeat} Radial`,"conic-gradient":"Conic","repeating-conic-gradient":`${oe.repeat} Conic`};class J4 extends Ge{getTitle(){return"Border Image"}[M(Oe)](){this.refresh()}getTools(){var e=this.$context.selection.current||{},t=e.appliedBorderImage||!1;return` - `}[se("$apply")](){var e=this.$context.selection.current;if(!!e){var t=this.refs.$apply.checked();this.$commands.executeCommand("setAttribute",this.$context.selection.packByValue({applyBorderImage:t}))}}getColorStepList(e){switch(e.type){case"static-gradient":case"linear-gradient":case"repeating-linear-gradient":case"radial-gradient":case"repeating-radial-gradient":case"conic-gradient":case"repeating-conic-gradient":return this.getColorStepString(e.colorsteps)}return""}getColorStepString(e){return e.map(t=>`
      `).join("")}[ve("$borderImageView")](){var e=this.$context.selection.current||{borderImage:{image:{}}},t=e.borderImage,i=t.type?Cg[t.type]:"";return` + `}[A("$apply")](){var e=this.$context.selection.current;if(!!e){var t=this.refs.$apply.checked();this.$commands.executeCommand("setAttribute",this.$context.selection.packByValue({applyBorderImage:t}))}}getColorStepList(e){switch(e.type){case"static-gradient":case"linear-gradient":case"repeating-linear-gradient":case"radial-gradient":case"repeating-radial-gradient":case"conic-gradient":case"repeating-conic-gradient":return this.getColorStepString(e.colorsteps)}return""}getColorStepString(e){return e.map(t=>`
      `).join("")}[G("$borderImageView")](){var e=this.$context.selection.current||{borderImage:{image:{}}},t=e.borderImage,r=t.type?Rc[t.type]:"";return`
      @@ -1485,23 +1379,23 @@ return __emval_register(obj);
      -
      ${i}
      +
      ${r}
      ${this.getColorStepList(t.image)}
      - `}[Me("changeBorderImage")](e,t){e==="border-image-slice"&&O1.forEach(i=>{this.children[`$${i}Slice`].setValue(t)}),this.setBorderImageProperty()}getBody(){return` + `}[Z("changeBorderImage")](e,t){e==="border-image-slice"&&mp.forEach(r=>{this.children[`$${r}Slice`].setValue(t)}),this.setBorderImageProperty()}getBody(){return`
      - +
      - ${W("RangeEditor",{ref:"$allSlice",key:"border-image-slice",onchange:"changeBorderImage"})} + ${R("RangeEditor",{ref:"$allSlice",key:"border-image-slice",onchange:"changeBorderImage"})}
      - ${R1.map(e=>` + ${fp.map(e=>`
      - ${W("RangeEditor",{ref:`$${e.key}Slice`,label:"Slice",key:`border-image-slice-${e.key}`,onchange:"changeBorderImage"})} + ${R("RangeEditor",{ref:`$${e.key}Slice`,label:"Slice",key:`border-image-slice-${e.key}`,onchange:"changeBorderImage"})}
      - ${W("RangeEditor",{ref:`$${e.key}Width`,label:"Width",key:`border-image-width-${e.key}`,onchange:"changeBorderImage"})} + ${R("RangeEditor",{ref:`$${e.key}Width`,label:"Width",key:`border-image-width-${e.key}`,onchange:"changeBorderImage"})}
      `).join("")}
      - `}[yn("$sliceSettingBox select")](){this.setBorderImageProperty()}[se("$borderImageView .preview")](){this.viewFillPopup(this.refs.$preview,"")}[se("$borderImageView .colorsteps .step")](e){this.refs.$colorsteps.$('[data-selected="true"]').removeAttr("data-selected");var t=e.$dt.attr("data-colorstep-id");e.$dt.attr("data-selected",!0);var i=e.$dt.closest("border-image-item").$(".preview");this.viewFillPopup(i,t)}getFillData(e){let t={type:e.type};switch(t.type){case"image":t.url=e.image?e.image.url:"";break;default:if(e.image){const i=e.image;t.type=i.type,t.colorsteps=[...i.colorsteps],t.angle=i.angle,t.radialType=i.radialType||"ellipse",t.radialPosition=i.radialPosition||zr.CENTER}else t.colorsteps=[],t.angle=0,t.radialType="ellipse",t.radialPosition=zr.CENTER;break}return t}viewFillPopup(e,t){var i=this.$context.selection.current;!i||this.emit("showFillPopup",Ve(P({changeEvent:"changeBorderImageFillPopup"},this.getFillData(i.borderImage)),{selectColorStepId:t,refresh:!0}))}viewChangeImage(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage;if(!!t){var i=this.getRef("$miniView");i&&t.image&&i.css({"background-image":t.image.toString(),"background-size":"cover"});var i=this.getRef("$fillTitle");i&&i.html(Cg.image);var i=this.getRef("$colorsteps",this.selectedIndex);i&&i.empty()}}}setImage(e){var t=this.$context.selection.current;!t||(t.borderImage.setImageUrl(e),this.viewChangeImage(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}viewChangeGradient(e){var t=this.$context.selection.current;if(!!t){var i=t.borderImage;if(!!i){var r=this.getRef("$miniView");r&&r.css({"background-image":i.image.toString(),"background-size":"cover"});var r=this.getRef("$fillTitle");r&&r.html(Cg[e.type]);var r=this.getRef("$colorsteps",this.selectedIndex);r&&r.html(this.getColorStepString(e.colorsteps))}}}setGradient(e){var t=this.$context.selection.current;!t||(t.borderImage.setGradient(e),this.viewChangeGradient(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}[U("changeBorderImageFillPopup")](e){switch(e.type){case"image":this.setImage(e);break;default:this.setGradient(e);break}}setBorderImageProperty(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage,i=this.refs.$selector.attr("data-selected-value");if(i==="all"){var r=this.children.$allSlice.getValue();t.reset({slice:{top:r.clone(),right:r.clone(),bottom:r.clone(),left:r.clone()}})}else O1.forEach(s=>{t.slice[s]=this.children[`$${s}Slice`].getValue(),t.width[s]=this.children[`$${s}Width`].getValue()});this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage"))}}[se("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.setBorderImageProperty()}}function S6(n){n.registerElement({BorderImageProperty:_6})}var Qie="";class Eg{static parseStyle(e=""){var t={isAll:!0,"border-radius":0,"border-top-left-radius":0,"border-top-right-radius":0,"border-bottom-right-radius":0,"border-bottom-left-radius":0},i=e.split(" ").map(r=>y.parse(r));return i.length===1?(t.isAll=!0,t["border-radius"]=i[0]):(t.isAll=!1,t["border-top-left-radius"]=i[0],t["border-top-right-radius"]=i[1],t["border-bottom-right-radius"]=i[2],t["border-bottom-left-radius"]=i[3],i[0].equals(i[1])&&i[0].equals(i[2])&&i[0].equals(i[3])&&(t.isAll=!0,t["border-radius"]=i[0])),t}}const z1=[{key:"border-top-left-radius",title:"topLeft",label:"TL"},{key:"border-top-right-radius",title:"topRight",label:"TR"},{key:"border-bottom-left-radius",title:"bottomLeft",label:"BL"},{key:"border-bottom-right-radius",title:"bottomRight",label:"BR"}],Ig=z1.map(n=>n.key),ks={ALL:"all",PARTITIAL:"partial"};class w6 extends ge{initState(){return P({},Eg.parseStyle(this.props.value))}template(){return"
      "}[Me("changeBorderRadius")](e,t){e==="border-radius"&&Ig.forEach(i=>{this.children[`$${i}`].setValue(t.clone())}),this.setBorderRadius()}[ve("$body")+It](){var e=this.state["border-radius"];return` + `}[Sr("$sliceSettingBox select")](){this.setBorderImageProperty()}[A("$borderImageView .preview")](){this.viewFillPopup(this.refs.$preview,"")}[A("$borderImageView .colorsteps .step")](e){this.refs.$colorsteps.$('[data-selected="true"]').removeAttr("data-selected");var t=e.$dt.attr("data-colorstep-id");e.$dt.attr("data-selected",!0);var r=e.$dt.closest("border-image-item").$(".preview");this.viewFillPopup(r,t)}getFillData(e){let t={type:e.type};switch(t.type){case"image":t.url=e.image?e.image.url:"";break;default:if(e.image){const r=e.image;t.type=r.type,t.colorsteps=[...r.colorsteps],t.angle=r.angle,t.radialType=r.radialType||"ellipse",t.radialPosition=r.radialPosition||nr.CENTER}else t.colorsteps=[],t.angle=0,t.radialType="ellipse",t.radialPosition=nr.CENTER;break}return t}viewFillPopup(e,t){var r=this.$context.selection.current;!r||this.emit("showFillPopup",se(b({changeEvent:"changeBorderImageFillPopup"},this.getFillData(r.borderImage)),{selectColorStepId:t,refresh:!0}))}viewChangeImage(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage;if(!!t){var r=this.getRef("$miniView");r&&t.image&&r.css({"background-image":t.image.toString(),"background-size":"cover"});var r=this.getRef("$fillTitle");r&&r.html(Rc.image);var r=this.getRef("$colorsteps",this.selectedIndex);r&&r.empty()}}}setImage(e){var t=this.$context.selection.current;!t||(t.borderImage.setImageUrl(e),this.viewChangeImage(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}viewChangeGradient(e){var t=this.$context.selection.current;if(!!t){var r=t.borderImage;if(!!r){var i=this.getRef("$miniView");i&&i.css({"background-image":r.image.toString(),"background-size":"cover"});var i=this.getRef("$fillTitle");i&&i.html(Rc[e.type]);var i=this.getRef("$colorsteps",this.selectedIndex);i&&i.html(this.getColorStepString(e.colorsteps))}}}setGradient(e){var t=this.$context.selection.current;!t||(t.borderImage.setGradient(e),this.viewChangeGradient(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}[M("changeBorderImageFillPopup")](e){switch(e.type){case"image":this.setImage(e);break;default:this.setGradient(e);break}}setBorderImageProperty(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage,r=this.refs.$selector.attr("data-selected-value");if(r==="all"){var i=this.children.$allSlice.getValue();t.reset({slice:{top:i.clone(),right:i.clone(),bottom:i.clone(),left:i.clone()}})}else mp.forEach(a=>{t.slice[a]=this.children[`$${a}Slice`].getValue(),t.width[a]=this.children[`$${a}Width`].getValue()});this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage"))}}[A("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.setBorderImageProperty()}}function eM(s){s.registerElement({BorderImageProperty:J4})}var WD="";class jc{static parseStyle(e=""){var t={isAll:!0,"border-radius":0,"border-top-left-radius":0,"border-top-right-radius":0,"border-bottom-right-radius":0,"border-bottom-left-radius":0},r=e.split(" ").map(i=>p.parse(i));return r.length===1?(t.isAll=!0,t["border-radius"]=r[0]):(t.isAll=!1,t["border-top-left-radius"]=r[0],t["border-top-right-radius"]=r[1],t["border-bottom-right-radius"]=r[2],t["border-bottom-left-radius"]=r[3],r[0].equals(r[1])&&r[0].equals(r[2])&&r[0].equals(r[3])&&(t.isAll=!0,t["border-radius"]=r[0])),t}}const vp=[{key:"border-top-left-radius",title:"topLeft",label:"TL"},{key:"border-top-right-radius",title:"topRight",label:"TR"},{key:"border-bottom-left-radius",title:"bottomLeft",label:"BL"},{key:"border-bottom-right-radius",title:"bottomRight",label:"BR"}],zc=vp.map(s=>s.key),Si={ALL:"all",PARTITIAL:"partial"};class tM extends Y{initState(){return b({},jc.parseStyle(this.props.value))}template(){return"
      "}[Z("changeBorderRadius")](e,t){e==="border-radius"&&zc.forEach(r=>{this.children[`$${r}`].setValue(t.clone())}),this.setBorderRadius()}[G("$body")+Ee](){var e=this.state["border-radius"];return`
      - ${W("InputRangeEditor",{label:re("outline_rect"),ref:"$all",compact:"true",key:"border-radius",value:e,min:0,onchange:"changeBorderRadius"})} + ${R("InputRangeEditor",{label:z("outline_rect"),ref:"$all",compact:"true",key:"border-radius",value:e,min:0,onchange:"changeBorderRadius"})}
      - - ${W("ToggleButton",{compact:!0,ref:"$toggle",key:"border-all",checkedValue:ks.PARTITIAL,value:ks.ALL,toggleLabels:[re("border_inner"),re("border_inner")],toggleValues:[ks.ALL,ks.PARTITIAL],onchange:"changeKeyValue"})} + ${R("ToggleButton",{compact:!0,ref:"$toggle",key:"border-all",checkedValue:Si.PARTITIAL,value:Si.ALL,toggleLabels:[z("border_inner"),z("border_inner")],toggleValues:[Si.ALL,Si.PARTITIAL],onchange:"changeKeyValue"})}
      - ${z1.map(t=>{var i=this.state[t.key],r=this.$i18n("border.radius.editor."+t.title),s=t.label;return` + ${vp.map(t=>{var r=this.state[t.key],i=this.$i18n("border.radius.editor."+t.title),a=t.label;return`
      - ${W("InputRangeEditor",{compact:!0,ref:`$${t.key}`,label:s,title:r,key:t.key,value:i,min:0,step:1,onchange:"changeBorderRadius"})} + ${R("InputRangeEditor",{compact:!0,ref:`$${t.key}`,label:a,title:i,key:t.key,value:r,min:0,step:1,onchange:"changeBorderRadius"})}
      `}).join("")}
      - `}[fi("$radiusSettingBox input")](){this.setBorderRadius()}[yn("$radiusSettingBox select")](){this.setBorderRadius()}setBorderRadius(){var e=this.selectedValue;e===ks.ALL?this.state["border-radius"]=this.children.$all.getValue():Ig.forEach(t=>{this.state[t]=this.children[`$${t}`].getValue()}),this.modifyBorderRadius()}modifyBorderRadius(){var e="";this.selectedValue===ks.ALL?e=this.state["border-radius"]+"":e=Ig.map(t=>`${this.state[t]}`).join(" "),this.parent.trigger(this.props.onchange,e)}[Me("changeKeyValue")](e,t){t===ks.PARTITIAL?(this.selectedValue=ks.PARTITIAL,this.refs.$partitialSetting.show()):(this.selectedValue=ks.ALL,this.refs.$partitialSetting.hide()),this.setBorderRadius()}}class M6 extends jt{getTitle(){return this.$i18n("border.radius.property.title")}getBody(){return`
      `}[ve("$body")](){var e=this.$context.selection.current||{},t=e.borderRadius||"0px";return W("BorderRadiusEditor",{ref:"$1",value:t,onchange:"changeBorderRadius"})}get editableProperty(){return"borderRadius"}[U(kt)+Ft(100)+Qe("checkShow")](){this.$context.selection.hasChangedField("borderRadius")&&this.refresh()}[Me("changeBorderRadius")](e){this.$commands.executeCommand("setAttribute","change border radius",this.$context.selection.packByValue({borderRadius:e}))}}function $6(n){n.registerElement({BorderRadiusEditor:w6}),n.registerUI("inspector.tab.style",{BorderRadiusProperty:M6})}var ere="";const P6=["margin","padding"];let Lg=[];P6.forEach(n=>{Lg.push.apply(Lg,["-top","-bottom","-left","-right"].map(e=>n+e))});class T6 extends jt{getTitle(){return this.$i18n("box.model.property.title")}get editableProperty(){return"boxModel"}[U(kt)+Ft(100)+Qe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[U(Gi)+Qe("checkCurrentItem")+Ft(100)](){const e=this.$context.selection.current;e!=null&&e.hasChangedField("padding-left","padding-right","padding-top","padding-bottom")&&this.refresh()}getBody(){return'
      '}templateInput(e,t){var i=y.parse(t[e]||0);return``}[ve("$boxModelItem")+It](){var e=this.$context.selection.current;return e?` + `}[dt("$radiusSettingBox input")](){this.setBorderRadius()}[Sr("$radiusSettingBox select")](){this.setBorderRadius()}setBorderRadius(){var e=this.selectedValue;e===Si.ALL?this.state["border-radius"]=this.children.$all.getValue():zc.forEach(t=>{this.state[t]=this.children[`$${t}`].getValue()}),this.modifyBorderRadius()}modifyBorderRadius(){var e="";this.selectedValue===Si.ALL?e=this.state["border-radius"]+"":e=zc.map(t=>`${this.state[t]}`).join(" "),this.parent.trigger(this.props.onchange,e)}[Z("changeKeyValue")](e,t){t===Si.PARTITIAL?(this.selectedValue=Si.PARTITIAL,this.refs.$partitialSetting.show()):(this.selectedValue=Si.ALL,this.refs.$partitialSetting.hide()),this.setBorderRadius()}}class rM extends Ge{getTitle(){return this.$i18n("border.radius.property.title")}getBody(){return`
      `}[G("$body")](){var e=this.$context.selection.current||{},t=e.borderRadius||"0px";return R("BorderRadiusEditor",{ref:"$1",value:t,onchange:"changeBorderRadius"})}get editableProperty(){return"borderRadius"}[M(Oe)+Ne(100)+fe("checkShow")](){this.$context.selection.hasChangedField("borderRadius")&&this.refresh()}[Z("changeBorderRadius")](e){this.$commands.executeCommand("setAttribute","change border radius",this.$context.selection.packByValue({borderRadius:e}))}}function iM(s){s.registerElement({BorderRadiusEditor:tM}),s.registerUI("inspector.tab.style",{BorderRadiusProperty:rM})}var XD="";const sM=["margin","padding"];let Ac=[];sM.forEach(s=>{Ac.push.apply(Ac,["-top","-bottom","-left","-right"].map(e=>s+e))});class aM extends Ge{getTitle(){return this.$i18n("box.model.property.title")}get editableProperty(){return"boxModel"}[M(Oe)+Ne(100)+fe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[M(Mt)+fe("checkCurrentItem")+Ne(100)](){const e=this.$context.selection.current;e!=null&&e.hasChangedField("padding-left","padding-right","padding-top","padding-bottom")&&this.refresh()}getBody(){return'
      '}templateInput(e,t){var r=p.parse(t[e]||0);return``}[G("$boxModelItem")+Ee](){var e=this.$context.selection.current;return e?`
      @@ -1581,7 +1474,7 @@ return __emval_register(obj);
      - `:""}[fi("$boxModelItem input")](){this.resetBoxModel()}resetBoxModel(){var e={};Lg.forEach(t=>{e[t]=this.refs["$"+t].value}),this.$commands.executeCommand("setAttribute","change padding or margin",this.$context.selection.packByValue(e))}}function C6(n){n.registerUI("inspector.tab.style",{BoxModelProperty:T6})}var V1=[{name:"Box",shadow:"0px 3px 3px 0px rgba(0,0,0,0.2)"},{name:"Shadow-4",shadow:` + `:""}[dt("$boxModelItem input")](){this.resetBoxModel()}resetBoxModel(){var e={};Ac.forEach(t=>{e[t]=this.refs["$"+t].value}),this.$commands.executeCommand("setAttribute","change padding or margin",this.$context.selection.packByValue(e))}}function nM(s){s.registerUI("inspector.tab.style",{BoxModelProperty:aM})}var yp=[{name:"Box",shadow:"0px 3px 3px 0px rgba(0,0,0,0.2)"},{name:"Shadow-4",shadow:` 0px 1px 1px 0px rgba(0,0,0,0.15), 0px 2px 2px 0px rgba(0,0,0,0.15), 0px 4px 4px 0px rgba(0,0,0,0.15), @@ -1610,226 +1503,226 @@ return __emval_register(obj); 0px 2px 2px 0px rgba(0,0,0,0.12), 0px 4px 4px 0px rgba(0,0,0,0.16), 0px 8px 8px 0px rgba(0,0,0,0.20) - `}],tre="";class E6 extends jt{getTitle(){return this.$i18n("boxshadow.property.title")}getBody(){return` + `}],YD="";class oM extends Ge{getTitle(){return this.$i18n("boxshadow.property.title")}getBody(){return`
      `}getTools(){return` - - `}[se("$add")](){const e=+this.refs.$select.value;this.children.$boxshadow.trigger("add",V1[e].shadow)}[ve("$shadowList")](){var e=this.$context.selection.current||{};return W("BoxShadowEditor",{ref:"$boxshadow",key:"boxShadow",value:e.boxShadow,onchange:(t,i)=>{this.$commands.executeCommand("setAttribute","change box shadow",this.$context.selection.packByValue({[t]:i}))}})}get editableProperty(){return"boxShadow"}[U(kt)+Ft(100)+Qe("checkShow")](){this.refresh()}}function I6(n){n.registerUI("inspector.tab.style",{BoxShadowProperty:E6})}var L6={key:"polygon",title:"Polygon",execute:function(){return[{name:"Triangle",polygon:"50% 0%, 0% 100%, 100% 100%"},{name:"Trapezoid",polygon:"20% 0%, 80% 0%, 100% 100%, 0% 100%"},{name:"Parallelogram",polygon:"25% 0%, 100% 0%, 75% 100%, 0% 100%"},{name:"Rhombus",polygon:"50% 0%, 100% 50%, 50% 100%, 0% 50%"},{name:"Pentagon",polygon:"50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%"},{name:"Hexagon",polygon:"50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%"},{name:"Heptagon",polygon:"50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%"},{name:"Octagon",polygon:"30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%"}]}},ire="";const k6=/(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi;class gt extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"clip-path",type:"none",value:""},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}toString(){var e=this.json.type,t=this.json.value,i=this.json.box,r="";switch(e){case"circle":case"inset":case"ellipse":case"polygon":case"path":r=`${e}(${t})`;break;case"svg":r=`url(#${t})`;break;default:r="none";break}return i?`${i} ${r}`:r}toCSS(){return{"clip-path":this.toString()}}static toCSS(e){return new gt(e).toCSS()}static toString(e){return gt.toCSS(e)["clip-path"]}static parse(e){return new gt(e)}static parseStyle(e){var t={};if(!e)return{};var i=e.match(k6)||[];return i.forEach(r=>{if(r.includes("-box"))t.box=r;else{var[s,a]=r.split("(");a=a||"",s==="none"?a="":a=a.split(")")[0],t.type=s,t.value=a}}),t}static parseStyleForCircle(e="50% at 50% 50%"){var t=new y("","closest-side"),i="";e=e||"50% at 50% 50%",e.includes("at")?[t,i]=e.split("at").map(a=>a.trim()):i=e.trim();var[r,s]=i.split(" ");return Di(s)&&(s=r),t=y.parse(t),r=y.parse(r),s=y.parse(s),{radius:t,x:r,y:s}}static parseStyleForEllipse(e="50% 50%"){var t="50% 50%",i="";e=e||"50%",e.includes("at")?[t,i]=e.split("at").map(l=>l.trim()):i=e.trim();var[r,s]=i.split(" ");Di(s)&&(s=r),r=y.parse(r),s=y.parse(s);var[a,o]=t.split(" ");return Di(o)&&(o=a),a=y.parse(a),o=y.parse(o),{radiusX:a,radiusY:o,x:r,y:s}}static parseStyleForInset(e=""){var[t,i]=e.split("round"),[r,s,a,o,l]=pg.parse(t);if(i)var[c,h,d,u,p]=pg.parse(i);return{isAll:r===1,top:s,right:a,bottom:o,left:l,round:i,isAllRadius:c===1,topRadius:h,rightRadius:d,bottomRadius:u,leftRadius:p}}static parseStyleForPolygon(e=""){return e.split(",").filter(t=>t.trim()).map(t=>{var[i,r]=t.trim().split(" ");return{x:y.parse(i),y:y.parse(r)}})}}const A6={[xr.CIRCLE]:"circle(50% at 50% 50%)",[xr.ELLIPSE]:"ellipse(50% 50% at 50% 50%)",[xr.INSET]:"inset(0% 0% 0% 0%)",[xr.POLYGON]:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",[xr.PATH]:"path()"};class R6 extends jt{getTitle(){return this.$i18n("clippath.property.title")}getClassName(){return"clip-path-property"}getBody(){return"
      "}getTools(){return` + + `}[A("$add")](){const e=+this.refs.$select.value;this.children.$boxshadow.trigger("add",yp[e].shadow)}[G("$shadowList")](){var e=this.$context.selection.current||{};return R("BoxShadowEditor",{ref:"$boxshadow",key:"boxShadow",value:e.boxShadow,onchange:(t,r)=>{this.$commands.executeCommand("setAttribute","change box shadow",this.$context.selection.packByValue({[t]:r}))}})}get editableProperty(){return"boxShadow"}[M(Oe)+Ne(100)+fe("checkShow")](){this.refresh()}}function lM(s){s.registerUI("inspector.tab.style",{BoxShadowProperty:oM})}var cM={key:"polygon",title:"Polygon",execute:function(){return[{name:"Triangle",polygon:"50% 0%, 0% 100%, 100% 100%"},{name:"Trapezoid",polygon:"20% 0%, 80% 0%, 100% 100%, 0% 100%"},{name:"Parallelogram",polygon:"25% 0%, 100% 0%, 75% 100%, 0% 100%"},{name:"Rhombus",polygon:"50% 0%, 100% 50%, 50% 100%, 0% 50%"},{name:"Pentagon",polygon:"50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%"},{name:"Hexagon",polygon:"50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%"},{name:"Heptagon",polygon:"50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%"},{name:"Octagon",polygon:"30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%"}]}},KD="";const hM=/(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi;class Pe extends or{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"clip-path",type:"none",value:""},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}toString(){var e=this.json.type,t=this.json.value,r=this.json.box,i="";switch(e){case"circle":case"inset":case"ellipse":case"polygon":case"path":i=`${e}(${t})`;break;case"svg":i=`url(#${t})`;break;default:i="none";break}return r?`${r} ${i}`:i}toCSS(){return{"clip-path":this.toString()}}static toCSS(e){return new Pe(e).toCSS()}static toString(e){return Pe.toCSS(e)["clip-path"]}static parse(e){return new Pe(e)}static parseStyle(e){var t={};if(!e)return{};var r=e.match(hM)||[];return r.forEach(i=>{if(i.includes("-box"))t.box=i;else{var[a,n]=i.split("(");n=n||"",a==="none"?n="":n=n.split(")")[0],t.type=a,t.value=n}}),t}static parseStyleForCircle(e="50% at 50% 50%"){var t=new p("","closest-side"),r="";e=e||"50% at 50% 50%",e.includes("at")?[t,r]=e.split("at").map(n=>n.trim()):r=e.trim();var[i,a]=r.split(" ");return Ct(a)&&(a=i),t=p.parse(t),i=p.parse(i),a=p.parse(a),{radius:t,x:i,y:a}}static parseStyleForEllipse(e="50% 50%"){var t="50% 50%",r="";e=e||"50%",e.includes("at")?[t,r]=e.split("at").map(l=>l.trim()):r=e.trim();var[i,a]=r.split(" ");Ct(a)&&(a=i),i=p.parse(i),a=p.parse(a);var[n,o]=t.split(" ");return Ct(o)&&(o=n),n=p.parse(n),o=p.parse(o),{radiusX:n,radiusY:o,x:i,y:a}}static parseStyleForInset(e=""){var[t,r]=e.split("round"),[i,a,n,o,l]=$c.parse(t);if(r)var[c,h,u,d,v]=$c.parse(r);return{isAll:i===1,top:a,right:n,bottom:o,left:l,round:r,isAllRadius:c===1,topRadius:h,rightRadius:u,bottomRadius:d,leftRadius:v}}static parseStyleForPolygon(e=""){return e.split(",").filter(t=>t.trim()).map(t=>{var[r,i]=t.trim().split(" ");return{x:p.parse(r),y:p.parse(i)}})}}const dM={[qt.CIRCLE]:"circle(50% at 50% 50%)",[qt.ELLIPSE]:"ellipse(50% 50% at 50% 50%)",[qt.INSET]:"inset(0% 0% 0% 0%)",[qt.POLYGON]:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",[qt.PATH]:"path()"};class uM extends Ge{getTitle(){return this.$i18n("clippath.property.title")}getClassName(){return"clip-path-property"}getBody(){return"
      "}getTools(){return`
      - - - - - - -
      - `}makeClipPathTemplate(e,t){const i=e==="path",r=e==="polygon";let s="";if(i){const o=t.split("(")[1].split(")")[0];let l=_e.fromSVGString(o);const c=l.getBBox(),h=Zi(c),d=260/h.width,u=150/h.height,p=Math.min(d,u);l=l.translate(-c[0][0],-c[0][1]).scale(p,p);const f=l.getBBox(),g=Zi(f);s=l.translate(260/2-g.width/2,0).d}let a="";if(r){const o=L6.execute();a=W("SelectEditor",{ref:"$polygonSelect",options:["",...o.map(l=>l.name)],onchange:(l,c)=>{const h=o.find(d=>d.name===c);h&&this.updatePathInfo({"clip-path":`polygon(${h.polygon})`})}})}return` + + + + + + +
      + `}makeClipPathTemplate(e,t){const r=e==="path",i=e==="polygon";let a="";if(r){const o=t.split("(")[1].split(")")[0];let l=K.fromSVGString(o);const c=l.getBBox(),h=Rt(c),u=260/h.width,d=150/h.height,v=Math.min(u,d);l=l.translate(-c[0][0],-c[0][1]).scale(v,v);const g=l.getBBox(),y=Rt(g);a=l.translate(260/2-y.width/2,0).d}let n="";if(i){const o=cM.execute();n=R("SelectEditor",{ref:"$polygonSelect",options:["",...o.map(l=>l.name)],onchange:(l,c)=>{const h=o.find(u=>u.name===c);h&&this.updatePathInfo({"clip-path":`polygon(${h.polygon})`})}})}return`
      - +
      ${e}
      - ${r?a:""} + ${i?n:""}
      - +
      - ${i?``:""} + ${r?``:""}
      - `}[se("$clippathList .clippath-item .title .name")](){var e=this.$context.selection.current;!e||this.viewClipPathPicker()}[se("$clippathList .del")+St](){var e=this.$context.selection.current;!e||(this.$commands.executeCommand("setAttribute","delete clip-path",this.$context.selection.packByValue({clipPath:""})),this.emit("hideClipPathPopup"),window.setTimeout(()=>{this.refresh()},100))}get editableProperty(){return"clipPath"}[U(kt)+Qe("checkShow")](){this.refresh()}[ve("$clippathList")](){var e=this.$context.selection.current;return!e||!e.clipPath?"":this.makeClipPathTemplate(e.clipPath.split("(")[0],e.clipPath)}[se("$tools [data-value]")](e){var t=this.$context.selection.current;if(!!t){if(t.clipPath){window.alert("clip-path is already exists.");return}t&&(t.reset({clipPath:A6[e.$dt.data("value")]}),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.pack("clipPath"))),this.refresh()}}viewClipPathPicker(){var e=this.$context.selection.current;if(!!e){var t=gt.parseStyle(e.clipPath);switch(t.type){case"path":var i=e.absolutePath(e.clipPathString).d,r=i?"modify":"path";this.emit("showPathEditor",r,{changeEvent:s=>{s.d=e.invertPath(s.d).d,this.updatePathInfo({clipPath:`path(${s.d})`})},current:e,d:i});break}}}updatePathInfo(e){if(!!e){var t=this.$context.selection.current;!t||(t.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.packByValue(e)))}}}function O6(n){n.registerUI("inspector.tab.style",{ClipPathProperty:R6})}var rre="";class z6 extends ge{initializePolygon(){const e=this.$context.selection.current;this.state.current=e,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.clippath.value=gt.parseStyleForPolygon(this.state.clippath.value),this.screenPoints=this.$viewport.applyVerties(Xe(this.state.clippath.value.map(t=>{const{x:i,y:r}=t,s=i.toPx(this.state.width),a=r.toPx(this.state.height);return Ct(s,a,0)}),e.absoluteMatrix)),this.clonedScreenPoints=rt(this.screenPoints)}[qe("$el .polygon .polygon-pointer")+at("movePolygonPointer")+lt("moveEndPolygonPointer")](e){this.initializePolygon(),this.polygonTargetIndex=+e.$dt.data("index")}movePolygonPointer(e,t){this.clonedScreenPoints[this.polygonTargetIndex]=_t([],this.screenPoints[this.polygonTargetIndex],[e,t,0]),this.updatePolygon(this.clonedScreenPoints)}moveEndPolygonPointer(){const e=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[qe("$el .polygon .polygon-line")](e){this.initializePolygon();const t=+e.$dt.data("index");this.polygonTargetIndex=t;const i=this.screenPoints[this.polygonTargetIndex],r=this.screenPoints[(this.polygonTargetIndex+1)%this.screenPoints.length],s=Ae([],i,r,.5);this.screenPoints.splice(this.polygonTargetIndex+1,0,s),this.updatePolygon(this.screenPoints)}updatePolygon(e){const t=this.$viewport.applyVertiesInverse(e),i=this.$context.selection.current.absoluteMatrixInverse,r=Xe(t,i);this.state.clippath.value=r.map(a=>[y.makePercent(a[0],this.state.width),y.makePercent(a[1],this.state.height)].join(" ")).join(",");const s=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(s))}[qe("$el .polygon .polygon-center")+at("movePolygonCenter")+lt("moveEndPolygonCenter")](){this.initializePolygon()}movePolygonCenter(e,t){const i=this.screenPoints.map(r=>_t([],r,[e,t,0]));this.updatePolygon(i)}moveEndPolygonCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case xr.POLYGON:const r=gt.toCSS({type:xr.CIRCLE,value:"50% at 50% 50%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templatePolygon(e){const t=this.$context.selection.current,i=gt.parseStyleForPolygon(e.value).map(o=>[o.x.toPx(t.screenWidth).value,o.y.toPx(t.screenHeight).value,0]),r=wn(i)[4],s=this.$viewport.applyVerties(Xe(i,t.absoluteMatrix)),a=this.$viewport.applyVerties(Xe([r],t.absoluteMatrix))[0];return D("div",{class:"polygon"},D("div",{class:"polygon-back"},D("svg",{style:"position:absolute;width:100%;height:100%;"},D("polygon",{points:`${s.map(o=>[o[0],o[1]].join(",")).join(" ")}`}),s.map((o,l)=>{const c=(l+1)%s.length,h=s[c];return D("line",{x1:o[0],y1:o[1],x2:h[0],y2:h[1],class:"polygon-line","data-index":l})}),s.map((o,l)=>D("circle",{cx:o[0],cy:o[1],r:3,class:"polygon-pointer","data-index":l})))),D("div",{class:"polygon-center",style:{left:y.px(a[0]),top:y.px(a[1])}}))}}class V6 extends z6{initializeInset(){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.clippath.value=gt.parseStyleForInset(this.state.clippath.value),this.state.inset=this.state.clippath.value;const t=this.state.inset,i=t.top.toPx(e.screenHeight),r=t.left.toPx(e.screenWidth),s=y.px(e.screenWidth-t.right.toPx(e.screenWidth)),a=y.px(e.screenHeight-t.bottom.toPx(e.screenHeight)),o=this.$viewport.applyVerties(Xe([[r,i,0],[s,i,0],[s,a,0],[r,a,0]],e.absoluteMatrix)),l=Ae([],o[0],o[3],.5),c=Ae([],o[0],o[1],.5),h=Ae([],o[1],o[2],.5),d=Ae([],o[2],o[3],.5),u=Ae([],o[0],o[2],.5);this.screenPoints=[l,c,h,d,u]}[qe("$el .inset .inset-direction")+an+at("moveInsetRadius")+lt("moveEndInsetRadius")](e){this.initializeInset(),this.insetTarget=e.$dt.data("direction")}moveInsetRadius(e,t){const{left:i,top:r,right:s,bottom:a}=this.state.inset;let[o,l,c,h]=this.screenPoints;this.insetTarget=="left"?o=_t([],o,[e,t,0]):this.insetTarget=="top"?l=_t([],l,[e,t,0]):this.insetTarget=="right"?c=_t([],c,[e,t,0]):this.insetTarget=="bottom"&&(h=_t([],h,[e,t,0]));const d=this.$viewport.applyVertexInverse(o),u=this.$viewport.applyVertexInverse(l),p=this.$viewport.applyVertexInverse(c),f=this.$viewport.applyVertexInverse(h),g=this.$context.selection.current.absoluteMatrixInverse,[m,v,b,_]=Xe([d,u,p,f],g);this.state.clippath.value=[r.isPercent()?y.makePercent(v[1],this.state.height):y.px(v[1]),s.isPercent()?y.makePercent(this.state.width-b[0],this.state.width):y.px(this.state.width-b[0]),a.isPercent()?y.makePercent(this.state.height-_[1],this.state.height):y.px(this.state.height-_[1]),i.isPercent()?y.makePercent(m[0],this.state.width):y.px(m[0])].join(" ");const x=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(x))}moveEndInsetRadius(){const e=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[qe("$el .inset .inset-center")+an+at("moveInsetCenter")+lt("moveEndInsetCenter")](){this.initializeInset()}moveInsetCenter(e,t){const{left:i,top:r,right:s,bottom:a}=this.state.inset;let[o,l,c,h]=this.screenPoints;o=_t([],o,[e,t,0]),l=_t([],l,[e,t,0]),c=_t([],c,[e,t,0]),h=_t([],h,[e,t,0]);const d=this.$viewport.applyVertexInverse(o),u=this.$viewport.applyVertexInverse(l),p=this.$viewport.applyVertexInverse(c),f=this.$viewport.applyVertexInverse(h),g=this.$context.selection.current.absoluteMatrixInverse,[m,v,b,_]=Xe([d,u,p,f],g);this.state.clippath.value=[r.isPercent()?y.makePercent(v[1],this.state.height):y.px(v[1]),s.isPercent()?y.makePercent(this.state.width-b[0],this.state.width):y.px(this.state.width-b[0]),a.isPercent()?y.makePercent(this.state.height-_[1],this.state.height):y.px(this.state.height-_[1]),i.isPercent()?y.makePercent(m[0],this.state.width):y.px(m[0])].join(" ");const x=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(x))}moveEndInsetCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case xr.INSET:const r=gt.toCSS({type:xr.POLYGON,value:"0% 0%, 100% 0%, 100% 100%, 0% 100%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateInset(e){const t=this.$context.selection.current;e.value=gt.parseStyleForInset(e.value);const i=e.value.top.toPx(t.screenHeight),r=e.value.left.toPx(t.screenWidth),s=y.px(t.screenWidth-e.value.right.toPx(t.screenWidth)),a=y.px(t.screenHeight-e.value.bottom.toPx(t.screenHeight)),o=this.$viewport.applyVerties(Xe([[r,i,0],[s,i,0],[s,a,0],[r,a,0]],t.absoluteMatrix)),l=Ae([],o[0],o[3],.5),c=Ae([],o[0],o[1],.5),h=Ae([],o[1],o[2],.5),d=Ae([],o[2],o[3],.5),u=Ae([],o[0],o[2],.5);return D("div",{class:"inset"},D("div",{class:"inset-back"},D("svg",{style:"position:absolute;width:100%;height:100%;"},D("path",{d:` + `}[A("$clippathList .clippath-item .title .name")](){var e=this.$context.selection.current;!e||this.viewClipPathPicker()}[A("$clippathList .del")+Ve](){var e=this.$context.selection.current;!e||(this.$commands.executeCommand("setAttribute","delete clip-path",this.$context.selection.packByValue({clipPath:""})),this.emit("hideClipPathPopup"),window.setTimeout(()=>{this.refresh()},100))}get editableProperty(){return"clipPath"}[M(Oe)+fe("checkShow")](){this.refresh()}[G("$clippathList")](){var e=this.$context.selection.current;return!e||!e.clipPath?"":this.makeClipPathTemplate(e.clipPath.split("(")[0],e.clipPath)}[A("$tools [data-value]")](e){var t=this.$context.selection.current;if(!!t){if(t.clipPath){window.alert("clip-path is already exists.");return}t&&(t.reset({clipPath:dM[e.$dt.data("value")]}),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.pack("clipPath"))),this.refresh()}}viewClipPathPicker(){var e=this.$context.selection.current;if(!!e){var t=Pe.parseStyle(e.clipPath);switch(t.type){case"path":var r=e.absolutePath(e.clipPathString).d,i=r?"modify":"path";this.emit("showPathEditor",i,{changeEvent:a=>{a.d=e.invertPath(a.d).d,this.updatePathInfo({clipPath:`path(${a.d})`})},current:e,d:r});break}}}updatePathInfo(e){if(!!e){var t=this.$context.selection.current;!t||(t.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.packByValue(e)))}}}function pM(s){s.registerUI("inspector.tab.style",{ClipPathProperty:uM})}var ZD="";class gM extends Y{initializePolygon(){const e=this.$context.selection.current;this.state.current=e,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.clippath.value=Pe.parseStyleForPolygon(this.state.clippath.value),this.screenPoints=this.$viewport.applyVerties(le(this.state.clippath.value.map(t=>{const{x:r,y:i}=t,a=r.toPx(this.state.width),n=i.toPx(this.state.height);return Ie(a,n,0)}),e.absoluteMatrix)),this.clonedScreenPoints=be(this.screenPoints)}[me("$el .polygon .polygon-pointer")+xe("movePolygonPointer")+Se("moveEndPolygonPointer")](e){this.initializePolygon(),this.polygonTargetIndex=+e.$dt.data("index")}movePolygonPointer(e,t){this.clonedScreenPoints[this.polygonTargetIndex]=we([],this.screenPoints[this.polygonTargetIndex],[e,t,0]),this.updatePolygon(this.clonedScreenPoints)}moveEndPolygonPointer(){const e=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[me("$el .polygon .polygon-line")](e){this.initializePolygon();const t=+e.$dt.data("index");this.polygonTargetIndex=t;const r=this.screenPoints[this.polygonTargetIndex],i=this.screenPoints[(this.polygonTargetIndex+1)%this.screenPoints.length],a=te([],r,i,.5);this.screenPoints.splice(this.polygonTargetIndex+1,0,a),this.updatePolygon(this.screenPoints)}updatePolygon(e){const t=this.$viewport.applyVertiesInverse(e),r=this.$context.selection.current.absoluteMatrixInverse,i=le(t,r);this.state.clippath.value=i.map(n=>[p.makePercent(n[0],this.state.width),p.makePercent(n[1],this.state.height)].join(" ")).join(",");const a=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(a))}[me("$el .polygon .polygon-center")+xe("movePolygonCenter")+Se("moveEndPolygonCenter")](){this.initializePolygon()}movePolygonCenter(e,t){const r=this.screenPoints.map(i=>we([],i,[e,t,0]));this.updatePolygon(r)}moveEndPolygonCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case qt.POLYGON:const i=Pe.toCSS({type:qt.CIRCLE,value:"50% at 50% 50%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templatePolygon(e){const t=this.$context.selection.current,r=Pe.parseStyleForPolygon(e.value).map(o=>[o.x.toPx(t.screenWidth).value,o.y.toPx(t.screenHeight).value,0]),i=Or(r)[4],a=this.$viewport.applyVerties(le(r,t.absoluteMatrix)),n=this.$viewport.applyVerties(le([i],t.absoluteMatrix))[0];return C("div",{class:"polygon"},C("div",{class:"polygon-back"},C("svg",{style:"position:absolute;width:100%;height:100%;"},C("polygon",{points:`${a.map(o=>[o[0],o[1]].join(",")).join(" ")}`}),a.map((o,l)=>{const c=(l+1)%a.length,h=a[c];return C("line",{x1:o[0],y1:o[1],x2:h[0],y2:h[1],class:"polygon-line","data-index":l})}),a.map((o,l)=>C("circle",{cx:o[0],cy:o[1],r:3,class:"polygon-pointer","data-index":l})))),C("div",{class:"polygon-center",style:{left:p.px(n[0]),top:p.px(n[1])}}))}}class fM extends gM{initializeInset(){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.clippath.value=Pe.parseStyleForInset(this.state.clippath.value),this.state.inset=this.state.clippath.value;const t=this.state.inset,r=t.top.toPx(e.screenHeight),i=t.left.toPx(e.screenWidth),a=p.px(e.screenWidth-t.right.toPx(e.screenWidth)),n=p.px(e.screenHeight-t.bottom.toPx(e.screenHeight)),o=this.$viewport.applyVerties(le([[i,r,0],[a,r,0],[a,n,0],[i,n,0]],e.absoluteMatrix)),l=te([],o[0],o[3],.5),c=te([],o[0],o[1],.5),h=te([],o[1],o[2],.5),u=te([],o[2],o[3],.5),d=te([],o[0],o[2],.5);this.screenPoints=[l,c,h,u,d]}[me("$el .inset .inset-direction")+_r+xe("moveInsetRadius")+Se("moveEndInsetRadius")](e){this.initializeInset(),this.insetTarget=e.$dt.data("direction")}moveInsetRadius(e,t){const{left:r,top:i,right:a,bottom:n}=this.state.inset;let[o,l,c,h]=this.screenPoints;this.insetTarget=="left"?o=we([],o,[e,t,0]):this.insetTarget=="top"?l=we([],l,[e,t,0]):this.insetTarget=="right"?c=we([],c,[e,t,0]):this.insetTarget=="bottom"&&(h=we([],h,[e,t,0]));const u=this.$viewport.applyVertexInverse(o),d=this.$viewport.applyVertexInverse(l),v=this.$viewport.applyVertexInverse(c),g=this.$viewport.applyVertexInverse(h),y=this.$context.selection.current.absoluteMatrixInverse,[P,S,V,E]=le([u,d,v,g],y);this.state.clippath.value=[i.isPercent()?p.makePercent(S[1],this.state.height):p.px(S[1]),a.isPercent()?p.makePercent(this.state.width-V[0],this.state.width):p.px(this.state.width-V[0]),n.isPercent()?p.makePercent(this.state.height-E[1],this.state.height):p.px(this.state.height-E[1]),r.isPercent()?p.makePercent(P[0],this.state.width):p.px(P[0])].join(" ");const I=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(I))}moveEndInsetRadius(){const e=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[me("$el .inset .inset-center")+_r+xe("moveInsetCenter")+Se("moveEndInsetCenter")](){this.initializeInset()}moveInsetCenter(e,t){const{left:r,top:i,right:a,bottom:n}=this.state.inset;let[o,l,c,h]=this.screenPoints;o=we([],o,[e,t,0]),l=we([],l,[e,t,0]),c=we([],c,[e,t,0]),h=we([],h,[e,t,0]);const u=this.$viewport.applyVertexInverse(o),d=this.$viewport.applyVertexInverse(l),v=this.$viewport.applyVertexInverse(c),g=this.$viewport.applyVertexInverse(h),y=this.$context.selection.current.absoluteMatrixInverse,[P,S,V,E]=le([u,d,v,g],y);this.state.clippath.value=[i.isPercent()?p.makePercent(S[1],this.state.height):p.px(S[1]),a.isPercent()?p.makePercent(this.state.width-V[0],this.state.width):p.px(this.state.width-V[0]),n.isPercent()?p.makePercent(this.state.height-E[1],this.state.height):p.px(this.state.height-E[1]),r.isPercent()?p.makePercent(P[0],this.state.width):p.px(P[0])].join(" ");const I=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(I))}moveEndInsetCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case qt.INSET:const i=Pe.toCSS({type:qt.POLYGON,value:"0% 0%, 100% 0%, 100% 100%, 0% 100%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateInset(e){const t=this.$context.selection.current;e.value=Pe.parseStyleForInset(e.value);const r=e.value.top.toPx(t.screenHeight),i=e.value.left.toPx(t.screenWidth),a=p.px(t.screenWidth-e.value.right.toPx(t.screenWidth)),n=p.px(t.screenHeight-e.value.bottom.toPx(t.screenHeight)),o=this.$viewport.applyVerties(le([[i,r,0],[a,r,0],[a,n,0],[i,n,0]],t.absoluteMatrix)),l=te([],o[0],o[3],.5),c=te([],o[0],o[1],.5),h=te([],o[1],o[2],.5),u=te([],o[2],o[3],.5),d=te([],o[0],o[2],.5);return C("div",{class:"inset"},C("div",{class:"inset-back"},C("svg",{style:"position:absolute;width:100%;height:100%;"},C("path",{d:` M ${o[0][0]} ${o[0][1]} L ${o[1][0]} ${o[1][1]} L ${o[2][0]} ${o[2][1]} L ${o[3][0]} ${o[3][1]} Z - `}))),D("div",{class:"inset-direction","data-direction":"left",style:{left:y.px(l[0]),top:y.px(l[1])}}),D("div",{class:"inset-direction","data-direction":"top",style:{left:y.px(c[0]),top:y.px(c[1])}}),D("div",{class:"inset-direction","data-direction":"right",style:{left:y.px(h[0]),top:y.px(h[1])}}),D("div",{class:"inset-direction","data-direction":"bottom",style:{left:y.px(d[0]),top:y.px(d[1])}}),D("div",{class:"inset-center",style:{left:y.px(u[0]),top:y.px(u[1])}}))}}class D6 extends V6{[qe("$el .circle .circle-radius")+an+at("moveCircleRadius")+lt("moveEndCircleRadius")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.circle=gt.parseStyleForCircle(this.state.clippath.value)}moveCircleRadius(e,t){const i=this.$context.selection.current,{radius:r,x:s,y:a}=this.state.circle,o=s.toPx(i.screenWidth),l=a.toPx(i.screenHeight),c=Math.sqrt(Math.pow(i.screenWidth,2)+Math.pow(i.screenHeight,2))/Math.sqrt(2),h=r.toPx(i.screenWidth),u=this.$viewport.applyVerties(Xe([[o.value+h.value,l,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=Xe([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[0]-o),b=[r.isPercent()?y.makePercent(v,c):y.px(v),s,a];this.state.clippath.value=`${b[0]} at ${b[1]} ${b[2]}`;const _=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}moveEndCircleRadius(){const e=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[qe("$el .circle .circle-center")+an+at("moveCircleCenter")+lt("moveEndCircleCenter")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.circle=gt.parseStyleForCircle(this.state.clippath.value)}moveCircleCenter(e,t){const i=this.$context.selection.current,{radius:r,x:s,y:a}=this.state.circle,o=s.toPx(i.screenWidth),l=a.toPx(i.screenHeight),h=this.$viewport.applyVerties(Xe([[o,l,0]],i.absoluteMatrix))[0],d=h[0]+e,u=h[1]+t,p=this.$viewport.applyVertexInverse([d,u,0]),f=Xe([p],this.$context.selection.current.absoluteMatrixInverse)[0],g=[r,s.isPercent()?y.makePercent(f[0],this.state.width):y.px(f[0]),a.isPercent()?y.makePercent(f[1],this.state.height):y.px(f[1])];this.state.clippath.value=`${r} at ${g[1]} ${g[2]}`;const m=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(m))}moveEndCircleCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case xr.CIRCLE:const r=gt.toCSS({type:xr.ELLIPSE,value:`${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}`});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateCircle(e){const t=this.$context.selection.current,i=Math.sqrt(Math.pow(t.screenWidth,2)+Math.pow(t.screenHeight,2))/Math.sqrt(2),r=e.value.radius.toPx(i),s=e.value.x.toPx(t.screenWidth),a=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(Xe([[s,a,0],[s.value+r.value,a,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=Ne(l,c);return D("div",{class:"circle"},D("div",{class:"circle-back",style:{left:y.px(l[0]),top:y.px(l[1]),width:y.px(h*2),height:y.px(h*2)}}),D("div",{class:"circle-center",style:{left:l[0]+"px",top:l[1]+"px"}}),D("div",{class:"circle-radius",style:{left:c[0]+"px",top:c[1]+"px"}}))}}class F6 extends D6{[qe("$el .ellipse .ellipse-radius-x")+an+at("moveEllipseRadiusX")+lt("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.ellipse=gt.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusX(e,t){const i=this.$context.selection.current,{radiusX:r,radiusY:s,x:a,y:o}=this.state.ellipse,l=a.toPx(i.screenWidth),c=o.toPx(i.screenHeight),h=r.toPx(i.screenWidth),u=this.$viewport.applyVerties(Xe([[l.value+h.value,c,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=Xe([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[0]-l),b=[r.isPercent()?y.makePercent(v,this.state.width):y.px(v),a,o];this.state.clippath.value=`${b[0]} ${s} at ${b[1]} ${b[2]}`;const _=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}[qe("$el .ellipse .ellipse-radius-y")+an+at("moveEllipseRadiusY")+lt("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=gt.parseStyle(e["clip-path"]),this.state.ellipse=gt.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusY(e,t){const i=this.$context.selection.current,{radiusX:r,radiusY:s,x:a,y:o}=this.state.ellipse,l=a.toPx(i.screenWidth),c=o.toPx(i.screenHeight),h=s.toPx(i.screenHeight),u=this.$viewport.applyVerties(Xe([[l.value,c.value+h.value,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=Xe([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[1]-c),b=[s.isPercent()?y.makePercent(v,this.state.height):y.px(v),a,o];this.state.clippath.value=`${r} ${b[0]} at ${a} ${o}`;const _=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}moveEndEllipseRadiusX(){const e=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[qe("$el .ellipse .ellipse-center")+an+at("moveEllipseCenter")+lt("moveEndEllipseCenter")](e){const t=this.$context.selection.current;this.state.current,this.state.width=t.screenWidth,this.state.height=t.screenHeight,this.state.clippath=gt.parseStyle(t["clip-path"]),this.state.ellipse=gt.parseStyleForEllipse(this.state.clippath.value),this.state.left=y.parse(e.$dt.css("left")).value,this.state.top=y.parse(e.$dt.css("top")).value}moveEllipseCenter(e,t){const{radiusX:i,radiusY:r,x:s,y:a}=this.state.ellipse,o=this.state.left+e,l=this.state.top+t,c=this.$viewport.applyVertexInverse([o,l,0]),h=Xe([c],this.$context.selection.current.absoluteMatrixInverse)[0],d=[i,r,s.isPercent()?y.makePercent(h[0],this.state.width):y.px(h[0]),a.isPercent()?y.makePercent(h[1],this.state.height):y.px(h[1])];this.state.clippath.value=`${i} ${r} at ${d[2]} ${d[3]}`;const u=gt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(u))}moveEndEllipseCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case xr.ELLIPSE:const r=gt.toCSS({type:xr.INSET,value:""});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=gt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateEllipse(e){const t=this.$context.selection.current,i=e.value.radiusX.toPx(t.screenWidth),r=e.value.radiusY.toPx(t.screenHeight),s=e.value.x.toPx(t.screenWidth),a=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(Xe([[s,a,0],[s.value+i.value,a,0],[s.value,a.value+r.value,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=o[2],d=Ne(l,c),u=Ne(l,h),p=ft([],c,l),f=fl(p[0],p[1]);return D("div",{class:"ellipse"},D("div",{class:"ellipse-back"},D("svg",{style:"position:absolute;width:100%;height:100%;"},D("ellipse",{cx:l[0],cy:l[1],rx:d,ry:u,transform:`rotate(${f} ${l[0]} ${l[1]})`}))),D("div",{class:"ellipse-center",style:{left:l[0]+"px",top:l[1]+"px"}}),D("div",{class:"ellipse-radius ellipse-radius-x",style:{left:c[0]+"px",top:c[1]+"px"}}),D("div",{class:"ellipse-radius ellipse-radius-y",style:{left:h[0]+"px",top:h[1]+"px"}}))}}class N6 extends F6{template(){return D("div",{class:"elf--clippath-editor-view "})}[ve("$el")+It](){const e=this.$context.selection.current;if(!e)return"";const t=gt.parseStyle(e["clip-path"]);switch(t.type){case xr.CIRCLE:return t.value=gt.parseStyleForCircle(t.value),this.templateCircle(t);case xr.ELLIPSE:return t.value=gt.parseStyleForEllipse(t.value),this.templateEllipse(t);case xr.POLYGON:return this.templatePolygon(t);case xr.INSET:return this.templateInset(t)}return D("div",null)}[U(kt)+Ft(100)](){this.refresh()}[U(si)](){this.refresh()}checkClipPath(){return this.$el.isShow()===!1||!this.$context.selection.current?!1:this.$context.selection.current.hasChangedField("clip-path","angle","x","y","width","height")}[U(Gi)+Qe("checkClipPath")+Ft(10)](){this.refresh()}[se("$el")](e){(Ze.create(e.target).isTag("svg")||Ze.create(e.target).hasClass("elf--clippath-editor-view"))&&this.trigger("hideClippathEditorView")}[U("hideClippathEditorView")](){this.$el.hide()}[U("showClippathEditorView")](){this.$el.show(),this.refresh()}}function B6(n){n.registerUI("canvas.view",{ClippathEditorView:N6})}var nre="";class j6 extends jt{getTitle(){return this.$i18n("code.view.property.title")}checkConfig(){return this.$config.is("inspector.selectedValue","code")}[Qt("inspector.selectedValue")](){this.refresh()}[U(Gi,kt)+Qe("checkConfig")+Ft(100)](){this.refresh()}getBody(){return` + `}))),C("div",{class:"inset-direction","data-direction":"left",style:{left:p.px(l[0]),top:p.px(l[1])}}),C("div",{class:"inset-direction","data-direction":"top",style:{left:p.px(c[0]),top:p.px(c[1])}}),C("div",{class:"inset-direction","data-direction":"right",style:{left:p.px(h[0]),top:p.px(h[1])}}),C("div",{class:"inset-direction","data-direction":"bottom",style:{left:p.px(u[0]),top:p.px(u[1])}}),C("div",{class:"inset-center",style:{left:p.px(d[0]),top:p.px(d[1])}}))}}class mM extends fM{[me("$el .circle .circle-radius")+_r+xe("moveCircleRadius")+Se("moveEndCircleRadius")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.circle=Pe.parseStyleForCircle(this.state.clippath.value)}moveCircleRadius(e,t){const r=this.$context.selection.current,{radius:i,x:a,y:n}=this.state.circle,o=a.toPx(r.screenWidth),l=n.toPx(r.screenHeight),c=Math.sqrt(Math.pow(r.screenWidth,2)+Math.pow(r.screenHeight,2))/Math.sqrt(2),h=i.toPx(r.screenWidth),d=this.$viewport.applyVerties(le([[o.value+h.value,l,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),P=le([y],this.$context.selection.current.absoluteMatrixInverse)[0],S=Math.abs(P[0]-o),V=[i.isPercent()?p.makePercent(S,c):p.px(S),a,n];this.state.clippath.value=`${V[0]} at ${V[1]} ${V[2]}`;const E=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(E))}moveEndCircleRadius(){const e=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[me("$el .circle .circle-center")+_r+xe("moveCircleCenter")+Se("moveEndCircleCenter")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.circle=Pe.parseStyleForCircle(this.state.clippath.value)}moveCircleCenter(e,t){const r=this.$context.selection.current,{radius:i,x:a,y:n}=this.state.circle,o=a.toPx(r.screenWidth),l=n.toPx(r.screenHeight),h=this.$viewport.applyVerties(le([[o,l,0]],r.absoluteMatrix))[0],u=h[0]+e,d=h[1]+t,v=this.$viewport.applyVertexInverse([u,d,0]),g=le([v],this.$context.selection.current.absoluteMatrixInverse)[0],y=[i,a.isPercent()?p.makePercent(g[0],this.state.width):p.px(g[0]),n.isPercent()?p.makePercent(g[1],this.state.height):p.px(g[1])];this.state.clippath.value=`${i} at ${y[1]} ${y[2]}`;const P=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(P))}moveEndCircleCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case qt.CIRCLE:const i=Pe.toCSS({type:qt.ELLIPSE,value:`${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}`});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateCircle(e){const t=this.$context.selection.current,r=Math.sqrt(Math.pow(t.screenWidth,2)+Math.pow(t.screenHeight,2))/Math.sqrt(2),i=e.value.radius.toPx(r),a=e.value.x.toPx(t.screenWidth),n=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(le([[a,n,0],[a.value+i.value,n,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=ae(l,c);return C("div",{class:"circle"},C("div",{class:"circle-back",style:{left:p.px(l[0]),top:p.px(l[1]),width:p.px(h*2),height:p.px(h*2)}}),C("div",{class:"circle-center",style:{left:l[0]+"px",top:l[1]+"px"}}),C("div",{class:"circle-radius",style:{left:c[0]+"px",top:c[1]+"px"}}))}}class vM extends mM{[me("$el .ellipse .ellipse-radius-x")+_r+xe("moveEllipseRadiusX")+Se("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.ellipse=Pe.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusX(e,t){const r=this.$context.selection.current,{radiusX:i,radiusY:a,x:n,y:o}=this.state.ellipse,l=n.toPx(r.screenWidth),c=o.toPx(r.screenHeight),h=i.toPx(r.screenWidth),d=this.$viewport.applyVerties(le([[l.value+h.value,c,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),P=le([y],this.$context.selection.current.absoluteMatrixInverse)[0],S=Math.abs(P[0]-l),V=[i.isPercent()?p.makePercent(S,this.state.width):p.px(S),n,o];this.state.clippath.value=`${V[0]} ${a} at ${V[1]} ${V[2]}`;const E=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(E))}[me("$el .ellipse .ellipse-radius-y")+_r+xe("moveEllipseRadiusY")+Se("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=Pe.parseStyle(e["clip-path"]),this.state.ellipse=Pe.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusY(e,t){const r=this.$context.selection.current,{radiusX:i,radiusY:a,x:n,y:o}=this.state.ellipse,l=n.toPx(r.screenWidth),c=o.toPx(r.screenHeight),h=a.toPx(r.screenHeight),d=this.$viewport.applyVerties(le([[l.value,c.value+h.value,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),P=le([y],this.$context.selection.current.absoluteMatrixInverse)[0],S=Math.abs(P[1]-c),V=[a.isPercent()?p.makePercent(S,this.state.height):p.px(S),n,o];this.state.clippath.value=`${i} ${V[0]} at ${n} ${o}`;const E=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(E))}moveEndEllipseRadiusX(){const e=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[me("$el .ellipse .ellipse-center")+_r+xe("moveEllipseCenter")+Se("moveEndEllipseCenter")](e){const t=this.$context.selection.current;this.state.current,this.state.width=t.screenWidth,this.state.height=t.screenHeight,this.state.clippath=Pe.parseStyle(t["clip-path"]),this.state.ellipse=Pe.parseStyleForEllipse(this.state.clippath.value),this.state.left=p.parse(e.$dt.css("left")).value,this.state.top=p.parse(e.$dt.css("top")).value}moveEllipseCenter(e,t){const{radiusX:r,radiusY:i,x:a,y:n}=this.state.ellipse,o=this.state.left+e,l=this.state.top+t,c=this.$viewport.applyVertexInverse([o,l,0]),h=le([c],this.$context.selection.current.absoluteMatrixInverse)[0],u=[r,i,a.isPercent()?p.makePercent(h[0],this.state.width):p.px(h[0]),n.isPercent()?p.makePercent(h[1],this.state.height):p.px(h[1])];this.state.clippath.value=`${r} ${i} at ${u[2]} ${u[3]}`;const d=Pe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(d))}moveEndEllipseCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case qt.ELLIPSE:const i=Pe.toCSS({type:qt.INSET,value:""});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=Pe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateEllipse(e){const t=this.$context.selection.current,r=e.value.radiusX.toPx(t.screenWidth),i=e.value.radiusY.toPx(t.screenHeight),a=e.value.x.toPx(t.screenWidth),n=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(le([[a,n,0],[a.value+r.value,n,0],[a.value,n.value+i.value,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=o[2],u=ae(l,c),d=ae(l,h),v=_e([],c,l),g=oa(v[0],v[1]);return C("div",{class:"ellipse"},C("div",{class:"ellipse-back"},C("svg",{style:"position:absolute;width:100%;height:100%;"},C("ellipse",{cx:l[0],cy:l[1],rx:u,ry:d,transform:`rotate(${g} ${l[0]} ${l[1]})`}))),C("div",{class:"ellipse-center",style:{left:l[0]+"px",top:l[1]+"px"}}),C("div",{class:"ellipse-radius ellipse-radius-x",style:{left:c[0]+"px",top:c[1]+"px"}}),C("div",{class:"ellipse-radius ellipse-radius-y",style:{left:h[0]+"px",top:h[1]+"px"}}))}}class yM extends vM{template(){return C("div",{class:"elf--clippath-editor-view "})}[G("$el")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=Pe.parseStyle(e["clip-path"]);switch(t.type){case qt.CIRCLE:return t.value=Pe.parseStyleForCircle(t.value),this.templateCircle(t);case qt.ELLIPSE:return t.value=Pe.parseStyleForEllipse(t.value),this.templateEllipse(t);case qt.POLYGON:return this.templatePolygon(t);case qt.INSET:return this.templateInset(t)}return C("div",null)}[M(Oe)+Ne(100)](){this.refresh()}[M(st)](){this.refresh()}checkClipPath(){return this.$el.isShow()===!1||!this.$context.selection.current?!1:this.$context.selection.current.hasChangedField("clip-path","angle","x","y","width","height")}[M(Mt)+fe("checkClipPath")+Ne(10)](){this.refresh()}[A("$el")](e){(ge.create(e.target).isTag("svg")||ge.create(e.target).hasClass("elf--clippath-editor-view"))&&this.trigger("hideClippathEditorView")}[M("hideClippathEditorView")](){this.$el.hide()}[M("showClippathEditorView")](){this.$el.show(),this.refresh()}}function bM(s){s.registerUI("canvas.view",{ClippathEditorView:yM})}var qD="";class xM extends Ge{getTitle(){return this.$i18n("code.view.property.title")}checkConfig(){return this.$config.is("inspector.selectedValue","code")}[Tt("inspector.selectedValue")](){this.refresh()}[M(Mt,Oe)+fe("checkConfig")+Ne(100)](){this.refresh()}getBody(){return`
      - `}[ve("$code")+It](){return[this.$editor.renderer("html").codeview(this.$context.selection.current)]}[ve("$svg")+It](){return[this.$editor.renderer("svg").codeview(this.$context.selection.current)]}}function G6(n){n.registerUI("inspector.tab.code",{CodeViewProperty:j6})}function Cn(n,e){var t=n.context.selection.currentProject;if(t){var i=t.getSelectedTimeline();e&&e(t,i)}}var H6=Object.freeze(Object.defineProperty({__proto__:null,default:Cn},Symbol.toStringTag,{value:"Module"}));function En(n){n.emit("refreshAll")}var U6=Object.freeze(Object.defineProperty({__proto__:null,default:En},Symbol.toStringTag,{value:"Module"})),W6={command:"addArtBoard",execute:(n,e={},t=null)=>{var i=n.context.selection.currentProject;i||(i=n.add(n.createModel({itemType:"project"})),n.context.selection.selectProject(i));var r=i.appendChild(n.createModel(P({itemType:"artboard",x:300,y:200,width:375,height:667},e)));t&&(r.reset({x:0,y:0}),r.moveByCenter(t)),n.context.selection.select(r),En(n)}},X6=Object.freeze(Object.defineProperty({__proto__:null,default:W6},Symbol.toStringTag,{value:"Module"})),Y6={command:"addBackgroundColor",execute:function(n,e,t=null){n.context.commands.executeCommand("setAttribute","add background color",n.context.selection.packByValue({backgroundColor:e},t))}},K6=Object.freeze(Object.defineProperty({__proto__:null,default:Y6},Symbol.toStringTag,{value:"Module"})),q6={command:"addBackgroundImageAsset",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{let a=Ot.parseStyle(hn(s.backgroundImage));a.unshift(new Ot({image:new xo({url:e})})),r[s.id]={"background-image":Ot.join(a)}}),n.context.commands.emit("history.setAttribute","add background image",r)}},Z6=Object.freeze(Object.defineProperty({__proto__:null,default:q6},Symbol.toStringTag,{value:"Module"})),J6={command:"addBackgroundImageGradient",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{let a=Ot.parseStyle(hn(s.backgroundImage));a.unshift(new Ot({image:Ot.parseImage(e)})),r[s.id]={"background-image":Ot.join(a)}}),n.context.commands.emit("history.setAttribute","add gradient",r)}},Q6=Object.freeze(Object.defineProperty({__proto__:null,default:J6},Symbol.toStringTag,{value:"Module"}));const e8=1e3,vh=new Map;class kg{static has(e){return vh.has(e)}static get(e){return vh.get(e)}static set(e,t){vh.size>e8&&vh.clear(),vh.set(e,t)}}const t8={check:Hr("check"),grid:Hr("grid"),dot:Hr("dot"),"cross-dot":Hr("cross-dot"),"diagonal-line":Hr("diagonal-line"),"vertical-line":Hr("vertical-line"),"horizontal-line":Hr("horizontal-line")};class tn extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"pattern"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=c8[e.type];if(t)return new t(e)}static parseStyle(e){var t=[];return!e||e==="undefined"?t:(e=e.trim(),kg.has(e)?kg.get(e):(_l(e,{customFuncMap:t8}).forEach((r,s)=>{const[a,o,l,c,h=[{matchedString:"normal"}],d=[{parsed:y.parse("1px")},{parsed:y.parse("1px")}]]=r.parameters;t[s]=tn.parse({type:r.type,x:o[0].parsed,y:o[1].parsed,width:a[0].parsed,height:a[1].parsed,foreColor:l[0].matchedString,backColor:c[0].matchedString,blendMode:h[0].matchedString,lineWidth:d[0].parsed,lineHeight:d[1].parsed})}),kg.set(e,t),t))}static join(e){return e.map(t=>tn.parse(t)).join(" ")}static toCSS(e){let t=[];return tn.parseStyle(e).forEach(i=>{t.push.apply(t,Ot.parseStyle(hn(i.toCSS())))}),Ot.joinCSS(t)}}class _o extends tn{getDefaultObject(){return super.getDefaultObject({type:"base",x:0,y:0,width:20,height:20,lineWidth:1,lineHeight:1,foreColor:"black",backColor:"white",blendMode:"normal"})}convert(e){return e=super.convert(e),e.width=y.parse(e.width),e.height=y.parse(e.height),e.lineWidth=y.parse(e.lineWidth),e.lineHeight=y.parse(e.lineHeight),e.x=y.parse(e.x),e.y=y.parse(e.y),e}toString(){var{type:e,width:t,height:i,x:r,y:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.json;return`${e}(${t} ${i}, ${r} ${s}, ${a}, ${o}, ${l}, ${c} ${h})`}}class i8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"check"})}toCSS(){let{width:e,height:t,x:i,y:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: repeating-linear-gradient(45deg, ${a} 25%, ${s} 25%, ${s} 75%, ${a} 75%, ${a} 100%),repeating-linear-gradient(45deg, ${a} 25%, ${s} 25%, ${s} 75%, ${a} 75%, ${a} 100%); - background-position: 0px 0px, ${i} ${r}; + `}[G("$code")+Ee](){return[this.$editor.renderer("html").codeview(this.$context.selection.current)]}[G("$svg")+Ee](){return[this.$editor.renderer("svg").codeview(this.$context.selection.current)]}}function $M(s){s.registerUI("inspector.tab.code",{CodeViewProperty:xM})}function Dr(s,e){var t=s.context.selection.currentProject;if(t){var r=t.getSelectedTimeline();e&&e(t,r)}}var _M=Object.freeze(Object.defineProperty({__proto__:null,default:Dr},Symbol.toStringTag,{value:"Module"}));function Fr(s){s.emit("refreshAll")}var SM=Object.freeze(Object.defineProperty({__proto__:null,default:Fr},Symbol.toStringTag,{value:"Module"})),PM={command:"addArtBoard",execute:(s,e={},t=null)=>{var r=s.context.selection.currentProject;r||(r=s.add(s.createModel({itemType:"project"})),s.context.selection.selectProject(r));var i=r.appendChild(s.createModel(b({itemType:"artboard",x:300,y:200,width:375,height:667},e)));t&&(i.reset({x:0,y:0}),i.moveByCenter(t)),s.context.selection.select(i),Fr(s)}},wM=Object.freeze(Object.defineProperty({__proto__:null,default:PM},Symbol.toStringTag,{value:"Module"})),CM={command:"addBackgroundColor",execute:function(s,e,t=null){s.context.commands.executeCommand("setAttribute","add background color",s.context.selection.packByValue({backgroundColor:e},t))}},TM=Object.freeze(Object.defineProperty({__proto__:null,default:CM},Symbol.toStringTag,{value:"Module"})),kM={command:"addBackgroundImageAsset",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{let n=Be.parseStyle(wr(a.backgroundImage));n.unshift(new Be({image:new Os({url:e})})),i[a.id]={"background-image":Be.join(n)}}),s.context.commands.emit("history.setAttribute","add background image",i)}},MM=Object.freeze(Object.defineProperty({__proto__:null,default:kM},Symbol.toStringTag,{value:"Module"})),IM={command:"addBackgroundImageGradient",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{let n=Be.parseStyle(wr(a.backgroundImage));n.unshift(new Be({image:Be.parseImage(e)})),i[a.id]={backgroundImage:Be.join(n)}}),s.context.commands.emit("history.setAttribute","add gradient",i)}},EM=Object.freeze(Object.defineProperty({__proto__:null,default:IM},Symbol.toStringTag,{value:"Module"}));const LM=1e3,vn=new Map;class Dc{static has(e){return vn.has(e)}static get(e){return vn.get(e)}static set(e,t){vn.size>LM&&vn.clear(),vn.set(e,t)}}const VM={check:dr("check"),grid:dr("grid"),dot:dr("dot"),"cross-dot":dr("cross-dot"),"diagonal-line":dr("diagonal-line"),"vertical-line":dr("vertical-line"),"horizontal-line":dr("horizontal-line")};class br extends or{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"pattern"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=BM[e.type];if(t)return new t(e)}static parseStyle(e){var t=[];return!e||e==="undefined"?t:(e=e.trim(),Dc.has(e)?Dc.get(e):(ga(e,{customFuncMap:VM}).forEach((i,a)=>{const[n,o,l,c,h=[{matchedString:"normal"}],u=[{parsed:p.parse("1px")},{parsed:p.parse("1px")}]]=i.parameters;t[a]=br.parse({type:i.type,x:o[0].parsed,y:o[1].parsed,width:n[0].parsed,height:n[1].parsed,foreColor:l[0].matchedString,backColor:c[0].matchedString,blendMode:h[0].matchedString,lineWidth:u[0].parsed,lineHeight:u[1].parsed})}),Dc.set(e,t),t))}static join(e){return e.map(t=>br.parse(t)).join(" ")}static toCSS(e){let t=[];return br.parseStyle(e).forEach(r=>{t.push.apply(t,Be.parseStyle(wr(r.toCSS())))}),Be.joinCSS(t)}}class zs extends br{getDefaultObject(){return super.getDefaultObject({type:"base",x:0,y:0,width:20,height:20,lineWidth:1,lineHeight:1,foreColor:"black",backColor:"white",blendMode:"normal"})}convert(e){return e=super.convert(e),e.width=p.parse(e.width),e.height=p.parse(e.height),e.lineWidth=p.parse(e.lineWidth),e.lineHeight=p.parse(e.lineHeight),e.x=p.parse(e.x),e.y=p.parse(e.y),e}toString(){var{type:e,width:t,height:r,x:i,y:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.json;return`${e}(${t} ${r}, ${i} ${a}, ${n}, ${o}, ${l}, ${c} ${h})`}}class OM extends zs{getDefaultObject(){return super.getDefaultObject({type:"check"})}toCSS(){let{width:e,height:t,x:r,y:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: repeating-linear-gradient(45deg, ${n} 25%, ${a} 25%, ${a} 75%, ${n} 75%, ${n} 100%),repeating-linear-gradient(45deg, ${n} 25%, ${a} 25%, ${a} 75%, ${n} 75%, ${n} 100%); + background-position: 0px 0px, ${r} ${i}; background-size: ${e} ${t}, ${e} ${t}; background-blend-mode: ${o}, ${o}; - `}}class r8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"grid"})}toCSS(){let{width:e,height:t,lineWidth:i,lineHeight:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: linear-gradient(to bottom,${a} ${r}, ${s} ${r}),linear-gradient(to right, ${a} ${i}, ${s} ${i}); + `}}class RM extends zs{getDefaultObject(){return super.getDefaultObject({type:"grid"})}toCSS(){let{width:e,height:t,lineWidth:r,lineHeight:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: linear-gradient(to bottom,${n} ${i}, ${a} ${i}),linear-gradient(to right, ${n} ${r}, ${a} ${r}); background-size: ${e/2}px ${t/2}px, ${e/2}px ${t/2}px; background-blend-mode: ${o}, ${o}; - `}}class n8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"dot"})}toCSS(){let{width:e,height:t,lineWidth:i,backColor:r,foreColor:s,blendMode:a}=this.json;return r=r||"transparent",s=s||"black",` - background-image: radial-gradient(${s} ${i}, ${r} ${i}); + `}}class jM extends zs{getDefaultObject(){return super.getDefaultObject({type:"dot"})}toCSS(){let{width:e,height:t,lineWidth:r,backColor:i,foreColor:a,blendMode:n}=this.json;return i=i||"transparent",a=a||"black",` + background-image: radial-gradient(${a} ${r}, ${i} ${r}); background-size: ${e/2}px ${t/2}px; - background-blend-mode: ${a}; - `}}class s8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"cross-dot"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: radial-gradient(${o} ${s}, ${a} ${s}),radial-gradient(${o} ${s}, ${a} ${s}); + background-blend-mode: ${n}; + `}}class zM extends zs{getDefaultObject(){return super.getDefaultObject({type:"cross-dot"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: radial-gradient(${o} ${a}, ${n} ${a}),radial-gradient(${o} ${a}, ${n} ${a}); background-size: ${e} ${t},${e} ${t}; - background-position: 0px 0px, ${i} ${r}; + background-position: 0px 0px, ${r} ${i}; background-blend-mode: multiply, ${l}; - `}}class a8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"diagonal-line"})}toCSS(){let{width:e,height:t,x:i,lineWidth:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: repeating-linear-gradient(${i}, ${a} 0px, ${a} ${r}, ${s} 0px, ${s} 50%); + `}}class AM extends zs{getDefaultObject(){return super.getDefaultObject({type:"diagonal-line"})}toCSS(){let{width:e,height:t,x:r,lineWidth:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: repeating-linear-gradient(${r}, ${n} 0px, ${n} ${i}, ${a} 0px, ${a} 50%); background-size: ${e} ${t}; background-blend-mode: ${o}; - `}}class o8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"vertical-line"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: repeating-linear-gradient(to right, ${o} 0px, ${o} ${s}, ${a} ${s}, ${a} 100%); + `}}class DM extends zs{getDefaultObject(){return super.getDefaultObject({type:"vertical-line"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: repeating-linear-gradient(to right, ${o} 0px, ${o} ${a}, ${n} ${a}, ${n} 100%); background-size: ${e} ${t}; - background-position: ${i} ${r}; + background-position: ${r} ${i}; background-blend-mode: ${l}; - `}}class l8 extends _o{getDefaultObject(){return super.getDefaultObject({type:"horizontal-line"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: repeating-linear-gradient( to bottom, ${o} 0px, ${o} ${s}, ${a} ${s}, ${a} 100%); - background-position: ${i} ${r}; + `}}class FM extends zs{getDefaultObject(){return super.getDefaultObject({type:"horizontal-line"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: repeating-linear-gradient( to bottom, ${o} 0px, ${o} ${a}, ${n} ${a}, ${n} 100%); + background-position: ${r} ${i}; background-size: ${e} ${t}; background-blend-mode: ${l}; - `}}const c8={check:i8,grid:r8,dot:n8,"cross-dot":s8,"diagonal-line":a8,"vertical-line":o8,"horizontal-line":l8};var h8={command:"addBackgroundImagePattern",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{r[s.id]={pattern:tn.join([...tn.parseStyle(e),...tn.parseStyle(s.pattern)])}}),n.context.commands.emit("history.setAttribute","add pattern",r)}},d8=Object.freeze(Object.defineProperty({__proto__:null,default:h8},Symbol.toStringTag,{value:"Module"}));function u8(n,e={},t=null){var i=n.context.selection.currentProject,r=i.appendChild(n.createModel(P({x:300,y:200,width:375,height:667},e)));t&&(r.reset({x:0,y:0}),r.moveByCenter(t)),n.context.selection.select(r),En(n)}var p8=Object.freeze(Object.defineProperty({__proto__:null,default:u8},Symbol.toStringTag,{value:"Module"}));function f8(n,e={},t=void 0){n.context.commands.emit("newComponent","image",e,!0,t)}var g8=Object.freeze(Object.defineProperty({__proto__:null,default:f8},Symbol.toStringTag,{value:"Module"}));function vu(n,e){var t=new window.Image;t.onload=()=>{var i={id:n.id,local:n.local,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight};e&&e(i,t)},t.onerror=i=>{console.log(i,i.message)},t.src=n.local}var m8={command:"addImageAssetItem",execute:function(n,e,t={},i=void 0){var r=n.context.selection.currentProject;r&&(r.createImage(e),n.context.commands.emit("addImageAsset"),vu(e,s=>{const a=t.width/s.width,o=t.width,l=s.height*a;n.context.commands.emit("addImage",Ve(P(P({src:e.id},s),t),{width:o,height:l}),i)}))}},v8=Object.freeze(Object.defineProperty({__proto__:null,default:m8},Symbol.toStringTag,{value:"Module"}));function y8(n,e,t=!0,i){i||(i=n.context.selection.current||n.context.selection.currentProject),i&&(i.isNot("project")&&!i.enableHasChildren()&&(i=i.parent),i.appendChild(e),t&&n.context.selection.select(e),En(n))}var b8=Object.freeze(Object.defineProperty({__proto__:null,default:y8},Symbol.toStringTag,{value:"Module"})),x8={command:"addLayerView",execute:async function(n,e,t={}){n.context.selection.empty(),await n.emit("hideAddViewLayer"),await n.emit("removeGuideLine"),n.context.config.set("editing.mode.itemType",e),e==="select"?(n.context.selection.empty(),n.context.config.set("editing.mode",Ti.SELECT)):e==="brush"?(n.context.config.set("editing.mode",Ti.DRAW),await n.emit("showPathDrawEditor")):e==="path"?(n.context.config.set("editing.mode",Ti.PATH),await n.emit("showPathEditor","path")):(n.context.config.set("editing.mode",Ti.APPEND),await n.emit("showLayerAppendView",e,t))}},_8=Object.freeze(Object.defineProperty({__proto__:null,default:x8},Symbol.toStringTag,{value:"Module"}));function S8(n,e={}){var t=n.createModel(P({itemType:"project"},e));n.context.selection.selectProject(t),En(n)}var w8=Object.freeze(Object.defineProperty({__proto__:null,default:S8},Symbol.toStringTag,{value:"Module"})),M8={command:"addSVGFilterAssetItem",execute:function(n,e){var t=n.context.selection.currentProject;if(t){var i=Zr(),r=t.createSVGFilter({id:i,filters:[]});e&&e(r,i)}}},$8=Object.freeze(Object.defineProperty({__proto__:null,default:M8},Symbol.toStringTag,{value:"Module"}));function P8(n,e={}){n.context.commands.emit("newComponent","text",P({content:"Insert a text",width:300,height:50,"font-size":30},e),e)}var T8=Object.freeze(Object.defineProperty({__proto__:null,default:P8},Symbol.toStringTag,{value:"Module"})),C8={command:"addTimelineCurrentProperty",execute:function(n,e={timing:"linear"}){Cn(n,t=>{var i=[];n.context.selection.each(r=>{var s={layerId:r.id,property:e.property,value:r[e.property]+"",timing:e.timing,editor:e.editor},a=t.addTimelineKeyframe(s);a&&i.push(a)}),n.context.timeline.select(...i),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},E8=Object.freeze(Object.defineProperty({__proto__:null,default:C8},Symbol.toStringTag,{value:"Module"})),I8={command:"addTimelineItem",execute:function(n,e){Cn(n,t=>{e?t.addTimelineLayer(e):t.addTimeline(),n.emit("refreshTimeline"),n.emit("addTimeline")})}},L8=Object.freeze(Object.defineProperty({__proto__:null,default:I8},Symbol.toStringTag,{value:"Module"})),k8={command:"addTimelineKeyframe",execute:function(n,e={timing:"linear"}){Cn(n,t=>{var i=n.context.modelManager.get(e.layerId),r={layerId:e.layerId,property:e.property,time:e.time,value:i[e.property]+"",timing:e.timing,editor:e.editor},s=t.addTimelineKeyframe(r);n.timeline.select(s),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},A8=Object.freeze(Object.defineProperty({__proto__:null,default:k8},Symbol.toStringTag,{value:"Module"})),R8={command:"addTimelineProperty",execute:function(n,e,t={timing:"linear"}){Cn(n,i=>{Array.isArray(e)===!1&&(e=[e]);var r=[];e.forEach(s=>{var a={layerId:s,property:t.property,value:t.value+"",timing:t.timing,editor:t.editor},o=i.addTimelineKeyframe(a);o&&r.push(o)}),n.timeline.select(...r),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},O8=Object.freeze(Object.defineProperty({__proto__:null,default:R8},Symbol.toStringTag,{value:"Module"}));function z8(n,e={},t=void 0){n.context.commands.emit("newComponent","video",e,!0,t)}var V8=Object.freeze(Object.defineProperty({__proto__:null,default:z8},Symbol.toStringTag,{value:"Module"}));function D8(n,e){var t=document.createElement("video");t.onloadeddata=()=>{var i={local:n.local,naturalWidth:t.videoWidth,naturalHeight:t.videoHeight,width:t.videoWidth,height:t.videoHeight,duration:t.duration,playTime:`0:1:${t.duration}`,volume:t.volume,muted:t.muted,placebackRate:t.playbackRate};e&&e(i,t)},t.src=n.local}var F8={command:"addVideoAssetItem",execute:function(n,e,t={},i=void 0){var r=n.context.selection.currentProject;r&&(r.createVideo(e),n.emit("addVideoAsset"),D8(e,s=>{n.context.commands.emit("addVideo",P(P({src:e.id},s),t),i)}))}},N8=Object.freeze(Object.defineProperty({__proto__:null,default:F8},Symbol.toStringTag,{value:"Module"})),B8={command:"clipboard.copy",title:"Copy",description:"Copy",execute:function(n){n.context.clipboard.push({type:Dd.COPY,data:n.context.selection.ids})}},j8=Object.freeze(Object.defineProperty({__proto__:null,default:B8},Symbol.toStringTag,{value:"Module"})),G8={command:"clipboard.paste",execute:async function(n){if(!n.context.clipboard.isEmpty)n.context.commands.emit("history.clipboard.paste","paste");else{var e=await window.navigator.clipboard.readText();e&&n.context.commands.emit("convertPasteText",e)}}},H8=Object.freeze(Object.defineProperty({__proto__:null,default:G8},Symbol.toStringTag,{value:"Module"})),U8={command:"convert.flatten.path",description:"flatten selected multi path",execute:n=>{const e=n.context.selection.current;if(!e)return;let t;if(e.is("boolean-path")||e.isBooleanItem){let i=e;e.isBooleanItem&&(i=e.parent),t=i.absolutePath(i["boolean-path"]),t=i.invertPath(t.d);const r=i.layers[0].toCloneObject();delete r.id,delete r.parentId,delete r.transform,delete r["boolean-path"],delete r["boolean-operation"];const s=i.parent,a=i.updatePath(t.d);n.context.commands.executeCommand("removeLayer","remove selected layers",[i.id]),n.nextTick(()=>{n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},r),a)),!0,s)})}else{t=_e.fromSVGString(),n.context.selection.each(a=>{t.addPath(a.absolutePath())}),t=e.invertPath(t.d);const i=e.parent,r=e.updatePath(t.d),s=e.toCloneObject();delete s.id,n.context.commands.executeCommand("removeLayer","remove selected layers"),n.nextTick(()=>{n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},s),r)),!0,i)})}}},W8=Object.freeze(Object.defineProperty({__proto__:null,default:U8},Symbol.toStringTag,{value:"Module"})),X8={command:"convert.no.transform.path",description:"remove transform(rotate, translate, scale) inforation in path layer",execute:n=>{const e=n.context.selection.current;if(!e)return;const t=e.parent,i=e.absolutePath();if(t.is("project")){const r=i.getBBox(),s=Zi(r);n.context.commands.executeCommand("setAttribute","remove transform for path",n.context.selection.packByValue(Ve(P({},s),{rotate:0,d:i.d})))}else{i.transformMat4(t.absoluteMatrixInverse);const r=t.updatePath(i.d);n.context.commands.executeCommand("setAttribute","remove transform for path",n.context.selection.packByValue(Ve(P({},r),{rotate:0,d:i.d})))}}},Y8=Object.freeze(Object.defineProperty({__proto__:null,default:X8},Symbol.toStringTag,{value:"Module"})),K8={command:"convert.normalize.path",description:"convert segments to bezier curve",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","normalize path string",n.context.selection.packByValue(e.updatePath(_e.fromSVGString(e.d).normalize().d)))}},q8=Object.freeze(Object.defineProperty({__proto__:null,default:K8},Symbol.toStringTag,{value:"Module"})),Z8={command:"convert.path.operation",description:"apply path boolean operation",execute:(n,e)=>{var s;const t=n.context.selection.current;if(!t)return;const i=a=>{n.context.commands.executeCommand("setAttribute","change boolean operation",n.context.selection.packByValue({booleanOperation:a})),r()},r=()=>{n.nextTick(()=>{n.context.commands.emit("recoverBooleanPath"),n.nextTick(()=>{n.emit(kt)})})};if(t.is("boolean-path")||t.isBooleanItem){let a=t;t.isBooleanItem&&(a=t.parent),n.context.selection.select(a),i(e)}else(s=n.context.selection.current)!=null&&s.isNot("boolean-path")&&n.context.commands.emit("group.item",{itemType:"boolean-path",title:"Intersection"}),n.nextTick(()=>{var a;(a=n.context.selection.current)!=null&&a.is("boolean-path")&&i(e)},10)}},J8=Object.freeze(Object.defineProperty({__proto__:null,default:Z8},Symbol.toStringTag,{value:"Module"})),Q8={command:"convert.polygonal.path",description:"convert path to polygonal path",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","polygonal path string",n.context.selection.packByValue(e.updatePath(_e.fromSVGString(e.d).polygonal().d)))}},e9=Object.freeze(Object.defineProperty({__proto__:null,default:Q8},Symbol.toStringTag,{value:"Module"})),t9={command:"convert.simplify.path",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","change path string",n.context.selection.packByValue(e.updatePath(n.pathKitManager.simplify(e.d))))}},i9=Object.freeze(Object.defineProperty({__proto__:null,default:t9},Symbol.toStringTag,{value:"Module"})),r9={command:"convert.smooth.path",description:"convert path to smooth",execute:(n,e=5,t=.1,i=.5)=>{const r=n.context.selection.current;if(!r)return;const s=_e.fromSVGString(r.d).divideSegmentByCount(e).simplify(t).cardinalSplines(i).d;n.context.commands.executeCommand("setAttribute","smooth path string",n.context.selection.packByValue(r.updatePath(s)))}},n9=Object.freeze(Object.defineProperty({__proto__:null,default:r9},Symbol.toStringTag,{value:"Module"})),s9={command:"convert.stroke.to.path",execute:async n=>{const e=n.context.selection.current;if(!e)return;const t=e.attrs("d","stroke-width","stroke-dasharray","stroke-dashoffset","stroke-linejoin","stroke-linecap"),i=e.convertStrokeToPath();let r=n.pathKitManager.stroke(e.d||t.d,{"stroke-width":y.parse(t["stroke-width"]).value,"stroke-linejoin":t["stroke-linejoin"],"stroke-linecap":t["stroke-linecap"],"stroke-dasharray":t["stroke-dasharray"],"stroke-dashoffset":t["stroke-dashoffset"],"fill-rule":"nonezero"});i["fill-rule"]="nonzero",r=_e.fromSVGString(r).reversePathStringByFunc((s,a)=>a%2===0),n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},i),e.updatePath(r))),!0,e.parent)}},a9=Object.freeze(Object.defineProperty({__proto__:null,default:s9},Symbol.toStringTag,{value:"Module"})),D1={exports:{}};(function(n,e){(function(t,i){n.exports=i()})(Wy,function(){function t(w){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?t=function(k){return typeof k}:t=function(k){return k&&typeof Symbol=="function"&&k.constructor===Symbol&&k!==Symbol.prototype?"symbol":typeof k},t(w)}var i=function(k){if(typeof k!="string")return{};k=k.split("+").join(" ");var L={},X=k.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/),ae;if(X===null)return{};ae=X[0].substr(1).split(/[&#=]/);for(var Pe=0;Pe{const t=F1.create({videoInfo:F1.parse(e),format:"embed",mediaType:"clip"});if(t){const i=n.context.viewport.center,r=300,s=200;n.context.commands.emit("newComponent","iframe",{x:i[0]-r/2,y:i[1]-s/2,width:r,height:s,backgroundColor:"transparent",url:t})}}},l9=Object.freeze(Object.defineProperty({__proto__:null,default:o9},Symbol.toStringTag,{value:"Module"}));function c9(n,e,t=null){var i=n.context.selection.current;if(i){if(i.is("svg-path","svg-brush","svg-textpath")){var r=e;if(t){var s=new _e(e);s.scale(i.width/t.width,i.height/t.height),r=s.d}n.context.commands.executeCommand("setAttribute","set attribute -d",n.context.selection.packByValue({d:r},i.id))}else if(i.clipPath.includes("path")){var r=e;if(t){var s=new _e(e);s.scale(i.width/t.width,i.height/t.height),r=s.d}n.context.commands.executeCommand("setAttribute","change clip path",n.context.selection.packByValue({clipPath:`path(${r})`},i.id))}}}var h9=Object.freeze(Object.defineProperty({__proto__:null,default:c9},Symbol.toStringTag,{value:"Module"})),d9={command:"copy.path",description:"copy as path for item with path string(d attribute)",execute:function(n){const e=n.context.selection.current;if(e){let t=_e.fromSVGString(e.d);try{const i=e.toSVGPath();n.context.commands.executeCommand("addLayer","copy path",n.createModel(P(P({itemType:"svg-path"},i),e.updatePath(t.d))),!0,e.parent)}catch(i){console.error(i)}}}},u9=Object.freeze(Object.defineProperty({__proto__:null,default:d9},Symbol.toStringTag,{value:"Module"})),p9={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(n,e=[]){let t=e.map(l=>n.get(l)).filter(Boolean).map(l=>l.id);if(t.length||(t=n.context.selection.ids),!t.length)return;const i=await n.json.renderAll(t.map(l=>n.get(l))),r=[],s={},a={};let o={};i.forEach(l=>{const c=l.referenceId,h=n.get(c);a[h.parentId]=h.parent;const d=n.createModel(l);d.renameWithCount(),h.insertAfter(d),r.push(d.id),s[d.id]=l,o[d.id]=d.toCloneObject()}),Object.values(a).forEach(l=>{o=P(P({},o),l.attrsWithId("children"))}),n.context.commands.emit("setAttribute",o),n.nextTick(()=>{n.context.selection.select(...r)})}},f9=Object.freeze(Object.defineProperty({__proto__:null,default:p9},Symbol.toStringTag,{value:"Module"})),g9={command:"copyTimelineProperty",execute:function(n,e,t,i=null){Cn(n,r=>{r.copyTimelineKeyframe(e,t,i),n.emit("refreshTimeline")})}},m9=Object.freeze(Object.defineProperty({__proto__:null,default:g9},Symbol.toStringTag,{value:"Module"})),v9={command:"deleteTimelineKeyframe",execute:function(n){Cn(n,e=>{n.timeline.each(t=>{e.deleteTimelineKeyframe(t.layerId,t.property,t.id)}),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},y9=Object.freeze(Object.defineProperty({__proto__:null,default:v9},Symbol.toStringTag,{value:"Module"})),b9={command:"doubleclick.item",execute:function(n,e,t){const i=n.get(t);n.context.selection.isOne&&i?n.context.selection.checkChildren(i.id)?n.context.selection.select(i):n.context.selection.check(i)?(n.context.commands.emit("open.editor"),n.emit("removeGuideLine")):this.selectInWorldPosition(n,e,i):this.selectInWorldPosition(n,e,i)},selectInWorldPosition:function(n,e,t){const i=n.context.viewport.getWorldPosition(e);(n.context.selection.hasPoint(i)||n.context.selection.hasChildrenPoint(i))&&(n.context.selection.select(t),n.snapManager.clear())}},x9=Object.freeze(Object.defineProperty({__proto__:null,default:b9},Symbol.toStringTag,{value:"Module"}));function Ag(n,e="elf.json"){var t=document.createElement("a");t.href=n,t.download=e,t.click()}var _9={command:"downloadJSON",execute:function(n,e){var t=JSON.stringify(n.context.modelManager.toJSON()),i="data:application/json;base64,"+window.btoa(unescape(encodeURIComponent(t)));Ag(i,e||"elf.json")}},S9=Object.freeze(Object.defineProperty({__proto__:null,default:_9},Symbol.toStringTag,{value:"Module"})),Rg={makeProjectStyle(n){const e=n.toKeyframeString(),t=n.toRootVariableCSS();return` + `}}const BM={check:OM,grid:RM,dot:jM,"cross-dot":zM,"diagonal-line":AM,"vertical-line":DM,"horizontal-line":FM};var NM={command:"addBackgroundImagePattern",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{i[a.id]={pattern:br.join([...br.parseStyle(e),...br.parseStyle(a.pattern)])}}),s.context.commands.emit("history.setAttribute","add pattern",i)}},GM=Object.freeze(Object.defineProperty({__proto__:null,default:NM},Symbol.toStringTag,{value:"Module"}));function HM(s,e={},t=null){var r=s.context.selection.currentProject,i=r.appendChild(s.createModel(b({x:300,y:200,width:375,height:667},e)));t&&(i.reset({x:0,y:0}),i.moveByCenter(t)),s.context.selection.select(i),Fr(s)}var UM=Object.freeze(Object.defineProperty({__proto__:null,default:HM},Symbol.toStringTag,{value:"Module"}));function WM(s,e={},t=void 0){s.context.commands.emit("newComponent","image",e,!0,t)}var XM=Object.freeze(Object.defineProperty({__proto__:null,default:WM},Symbol.toStringTag,{value:"Module"}));function Fo(s,e){var t=new window.Image;t.onload=()=>{var r={id:s.id,local:s.local,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight};e&&e(r,t)},t.onerror=r=>{console.log(r,r.message)},t.src=s.local}var YM={command:"addImageAssetItem",execute:function(s,e,t={},r=void 0){var i=s.context.selection.currentProject;i&&(i.createImage(e),s.context.commands.emit("addImageAsset"),Fo(e,a=>{const n=t.width/a.width,o=t.width,l=a.height*n;s.context.commands.emit("addImage",se(b(b({src:e.id},a),t),{width:o,height:l}),r)}))}},KM=Object.freeze(Object.defineProperty({__proto__:null,default:YM},Symbol.toStringTag,{value:"Module"}));function ZM(s,e,t=!0,r){r||(r=s.context.selection.current||s.context.selection.currentProject),r&&(r.isNot("project")&&!r.enableHasChildren()&&(r=r.parent),r.appendChild(e),t&&s.context.selection.select(e),Fr(s))}var qM=Object.freeze(Object.defineProperty({__proto__:null,default:ZM},Symbol.toStringTag,{value:"Module"})),QM={command:"addLayerView",execute:async function(s,e,t={}){s.context.selection.empty(),await s.emit("hideAddViewLayer"),await s.emit("removeGuideLine"),s.context.config.set("editing.mode.itemType",e),e==="select"?(s.context.selection.empty(),s.context.config.set("editing.mode",St.SELECT)):e==="brush"?(s.context.config.set("editing.mode",St.DRAW),await s.emit("showPathDrawEditor")):e==="path"?(s.context.config.set("editing.mode",St.PATH),await s.emit("showPathEditor","path")):(s.context.config.set("editing.mode",St.APPEND),await s.emit("showLayerAppendView",e,t))}},JM=Object.freeze(Object.defineProperty({__proto__:null,default:QM},Symbol.toStringTag,{value:"Module"}));function eI(s,e={}){var t=s.createModel(b({itemType:"project"},e));s.context.selection.selectProject(t),Fr(s)}var tI=Object.freeze(Object.defineProperty({__proto__:null,default:eI},Symbol.toStringTag,{value:"Module"})),rI={command:"addSVGFilterAssetItem",execute:function(s,e){var t=s.context.selection.currentProject;if(t){var r=fr(),i=t.createSVGFilter({id:r,filters:[]});e&&e(i,r)}}},iI=Object.freeze(Object.defineProperty({__proto__:null,default:rI},Symbol.toStringTag,{value:"Module"}));function sI(s,e={}){s.context.commands.emit("newComponent","text",b({content:"Insert a text",width:300,height:50,"font-size":30},e),e)}var aI=Object.freeze(Object.defineProperty({__proto__:null,default:sI},Symbol.toStringTag,{value:"Module"})),nI={command:"addTimelineCurrentProperty",execute:function(s,e={timing:"linear"}){Dr(s,t=>{var r=[];s.context.selection.each(i=>{var a={layerId:i.id,property:e.property,value:i[e.property]+"",timing:e.timing,editor:e.editor},n=t.addTimelineKeyframe(a);n&&r.push(n)}),s.context.timeline.select(...r),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},oI=Object.freeze(Object.defineProperty({__proto__:null,default:nI},Symbol.toStringTag,{value:"Module"})),lI={command:"addTimelineItem",execute:function(s,e){Dr(s,t=>{e?t.addTimelineLayer(e):t.addTimeline(),s.emit("refreshTimeline"),s.emit("addTimeline")})}},cI=Object.freeze(Object.defineProperty({__proto__:null,default:lI},Symbol.toStringTag,{value:"Module"})),hI={command:"addTimelineKeyframe",execute:function(s,e={timing:"linear"}){Dr(s,t=>{var r=s.context.modelManager.get(e.layerId),i={layerId:e.layerId,property:e.property,time:e.time,value:r[e.property]+"",timing:e.timing,editor:e.editor},a=t.addTimelineKeyframe(i);s.timeline.select(a),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},dI=Object.freeze(Object.defineProperty({__proto__:null,default:hI},Symbol.toStringTag,{value:"Module"})),uI={command:"addTimelineProperty",execute:function(s,e,t={timing:"linear"}){Dr(s,r=>{Array.isArray(e)===!1&&(e=[e]);var i=[];e.forEach(a=>{var n={layerId:a,property:t.property,value:t.value+"",timing:t.timing,editor:t.editor},o=r.addTimelineKeyframe(n);o&&i.push(o)}),s.timeline.select(...i),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},pI=Object.freeze(Object.defineProperty({__proto__:null,default:uI},Symbol.toStringTag,{value:"Module"}));function gI(s,e={},t=void 0){s.context.commands.emit("newComponent","video",e,!0,t)}var fI=Object.freeze(Object.defineProperty({__proto__:null,default:gI},Symbol.toStringTag,{value:"Module"}));function mI(s,e){var t=document.createElement("video");t.onloadeddata=()=>{var r={local:s.local,naturalWidth:t.videoWidth,naturalHeight:t.videoHeight,width:t.videoWidth,height:t.videoHeight,duration:t.duration,playTime:`0:1:${t.duration}`,volume:t.volume,muted:t.muted,placebackRate:t.playbackRate};e&&e(r,t)},t.src=s.local}var vI={command:"addVideoAssetItem",execute:function(s,e,t={},r=void 0){var i=s.context.selection.currentProject;i&&(i.createVideo(e),s.emit("addVideoAsset"),mI(e,a=>{s.context.commands.emit("addVideo",b(b({src:e.id},a),t),r)}))}},yI=Object.freeze(Object.defineProperty({__proto__:null,default:vI},Symbol.toStringTag,{value:"Module"})),bI={command:"clipboard.copy",title:"Copy",description:"Copy",execute:function(s){s.context.clipboard.push({type:no.COPY,data:s.context.selection.ids})}},xI=Object.freeze(Object.defineProperty({__proto__:null,default:bI},Symbol.toStringTag,{value:"Module"})),$I={command:"clipboard.paste",execute:async function(s){if(!s.context.clipboard.isEmpty)s.context.commands.emit("history.clipboard.paste","paste");else{var e=await window.navigator.clipboard.readText();e&&s.context.commands.emit("convertPasteText",e)}}},_I=Object.freeze(Object.defineProperty({__proto__:null,default:$I},Symbol.toStringTag,{value:"Module"})),SI={command:"convert.flatten.path",description:"flatten selected multi path",execute:s=>{const e=s.context.selection.current;if(!e)return;let t;if(e.is("boolean-path")||e.isBooleanItem){let r=e;e.isBooleanItem&&(r=e.parent),t=r.absolutePath(r["boolean-path"]),t=r.invertPath(t.d);const i=r.layers[0].toCloneObject();delete i.id,delete i.parentId,delete i.transform,delete i["boolean-path"],delete i["boolean-operation"];const a=r.parent,n=r.updatePath(t.d);s.context.commands.executeCommand("removeLayer","remove selected layers",[r.id]),s.nextTick(()=>{s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},i),n)),!0,a)})}else{t=K.fromSVGString(),s.context.selection.each(n=>{t.addPath(n.absolutePath())}),t=e.invertPath(t.d);const r=e.parent,i=e.updatePath(t.d),a=e.toCloneObject();delete a.id,s.context.commands.executeCommand("removeLayer","remove selected layers"),s.nextTick(()=>{s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},a),i)),!0,r)})}}},PI=Object.freeze(Object.defineProperty({__proto__:null,default:SI},Symbol.toStringTag,{value:"Module"})),wI={command:"convert.no.transform.path",description:"remove transform(rotate, translate, scale) inforation in path layer",execute:s=>{const e=s.context.selection.current;if(!e)return;const t=e.parent,r=e.absolutePath();if(t.is("project")){const i=r.getBBox(),a=Rt(i);s.context.commands.executeCommand("setAttribute","remove transform for path",s.context.selection.packByValue(se(b({},a),{rotate:0,d:r.d})))}else{r.transformMat4(t.absoluteMatrixInverse);const i=t.updatePath(r.d);s.context.commands.executeCommand("setAttribute","remove transform for path",s.context.selection.packByValue(se(b({},i),{rotate:0,d:r.d})))}}},CI=Object.freeze(Object.defineProperty({__proto__:null,default:wI},Symbol.toStringTag,{value:"Module"})),TI={command:"convert.normalize.path",description:"convert segments to bezier curve",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","normalize path string",s.context.selection.packByValue(e.updatePath(K.fromSVGString(e.d).normalize().d)))}},kI=Object.freeze(Object.defineProperty({__proto__:null,default:TI},Symbol.toStringTag,{value:"Module"})),MI={command:"convert.path.operation",description:"apply path boolean operation",execute:(s,e)=>{var a;const t=s.context.selection.current;if(!t)return;const r=n=>{s.context.commands.executeCommand("setAttribute","change boolean operation",s.context.selection.packByValue({booleanOperation:n})),i()},i=()=>{s.nextTick(()=>{s.context.commands.emit("recoverBooleanPath"),s.nextTick(()=>{s.emit(Oe)})})};if(t.is("boolean-path")||t.isBooleanItem){let n=t;t.isBooleanItem&&(n=t.parent),s.context.selection.select(n),r(e)}else(a=s.context.selection.current)!=null&&a.isNot("boolean-path")&&s.context.commands.emit("group.item",{itemType:"boolean-path",title:"Intersection"}),s.nextTick(()=>{var n;(n=s.context.selection.current)!=null&&n.is("boolean-path")&&r(e)},10)}},II=Object.freeze(Object.defineProperty({__proto__:null,default:MI},Symbol.toStringTag,{value:"Module"})),EI={command:"convert.polygonal.path",description:"convert path to polygonal path",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","polygonal path string",s.context.selection.packByValue(e.updatePath(K.fromSVGString(e.d).polygonal().d)))}},LI=Object.freeze(Object.defineProperty({__proto__:null,default:EI},Symbol.toStringTag,{value:"Module"})),VI={command:"convert.simplify.path",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","change path string",s.context.selection.packByValue(e.updatePath(s.pathKitManager.simplify(e.d))))}},OI=Object.freeze(Object.defineProperty({__proto__:null,default:VI},Symbol.toStringTag,{value:"Module"})),RI={command:"convert.smooth.path",description:"convert path to smooth",execute:(s,e=5,t=.1,r=.5)=>{const i=s.context.selection.current;if(!i)return;const a=K.fromSVGString(i.d).divideSegmentByCount(e).simplify(t).cardinalSplines(r).d;s.context.commands.executeCommand("setAttribute","smooth path string",s.context.selection.packByValue(i.updatePath(a)))}},jI=Object.freeze(Object.defineProperty({__proto__:null,default:RI},Symbol.toStringTag,{value:"Module"})),zI={command:"convert.stroke.to.path",execute:async s=>{const e=s.context.selection.current;if(!e)return;const t=e.attrs("d","stroke-width","stroke-dasharray","stroke-dashoffset","stroke-linejoin","stroke-linecap"),r=e.convertStrokeToPath();let i=s.pathKitManager.stroke(e.d||t.d,{"stroke-width":p.parse(t["stroke-width"]).value,"stroke-linejoin":t["stroke-linejoin"],"stroke-linecap":t["stroke-linecap"],"stroke-dasharray":t["stroke-dasharray"],"stroke-dashoffset":t["stroke-dashoffset"],"fill-rule":"nonezero"});r["fill-rule"]="nonzero",i=K.fromSVGString(i).reversePathStringByFunc((a,n)=>n%2===0),s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},r),e.updatePath(i))),!0,e.parent)}},AI=Object.freeze(Object.defineProperty({__proto__:null,default:zI},Symbol.toStringTag,{value:"Module"})),bp={exports:{}};(function(s,e){(function(t,r){s.exports=r()})(Ou,function(){function t(x){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?t=function(w){return typeof w}:t=function(w){return w&&typeof Symbol=="function"&&w.constructor===Symbol&&w!==Symbol.prototype?"symbol":typeof w},t(x)}var r=function(w){if(typeof w!="string")return{};w=w.split("+").join(" ");var L={},H=w.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/),pe;if(H===null)return{};pe=H[0].substr(1).split(/[&#=]/);for(var Qe=0;Qe{const t=xp.create({videoInfo:xp.parse(e),format:"embed",mediaType:"clip"});if(t){const r=s.context.viewport.center,i=300,a=200;s.context.commands.emit("newComponent","iframe",{x:r[0]-i/2,y:r[1]-a/2,width:i,height:a,backgroundColor:"transparent",url:t})}}},FI=Object.freeze(Object.defineProperty({__proto__:null,default:DI},Symbol.toStringTag,{value:"Module"}));function BI(s,e,t=null){var r=s.context.selection.current;if(r){if(r.is("svg-path","svg-brush","svg-textpath")){var i=e;if(t){var a=new K(e);a.scale(r.width/t.width,r.height/t.height),i=a.d}s.context.commands.executeCommand("setAttribute","set attribute -d",s.context.selection.packByValue({d:i},r.id))}else if(r.clipPath.includes("path")){var i=e;if(t){var a=new K(e);a.scale(r.width/t.width,r.height/t.height),i=a.d}s.context.commands.executeCommand("setAttribute","change clip path",s.context.selection.packByValue({clipPath:`path(${i})`},r.id))}}}var NI=Object.freeze(Object.defineProperty({__proto__:null,default:BI},Symbol.toStringTag,{value:"Module"})),GI={command:"copy.path",description:"copy as path for item with path string(d attribute)",execute:function(s){const e=s.context.selection.current;if(e){let t=K.fromSVGString(e.d);try{const r=e.toSVGPath();s.context.commands.executeCommand("addLayer","copy path",s.createModel(b(b({itemType:"svg-path"},r),e.updatePath(t.d))),!0,e.parent)}catch(r){console.error(r)}}}},HI=Object.freeze(Object.defineProperty({__proto__:null,default:GI},Symbol.toStringTag,{value:"Module"})),UI={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(s,e=[]){let t=e.map(l=>s.get(l)).filter(Boolean).map(l=>l.id);if(t.length||(t=s.context.selection.ids),!t.length)return;const r=await s.json.renderAll(t.map(l=>s.get(l))),i=[],a={},n={};let o={};r.forEach(l=>{const c=l.referenceId,h=s.get(c);n[h.parentId]=h.parent;const u=s.createModel(l);u.renameWithCount(),h.insertAfter(u),i.push(u.id),a[u.id]=l,o[u.id]=u.toCloneObject()}),Object.values(n).forEach(l=>{o=b(b({},o),l.attrsWithId("children"))}),s.context.commands.emit("setAttribute",o),s.nextTick(()=>{s.context.selection.select(...i)})}},WI=Object.freeze(Object.defineProperty({__proto__:null,default:UI},Symbol.toStringTag,{value:"Module"})),XI={command:"copyTimelineProperty",execute:function(s,e,t,r=null){Dr(s,i=>{i.copyTimelineKeyframe(e,t,r),s.emit("refreshTimeline")})}},YI=Object.freeze(Object.defineProperty({__proto__:null,default:XI},Symbol.toStringTag,{value:"Module"})),KI={command:"deleteTimelineKeyframe",execute:function(s){Dr(s,e=>{s.timeline.each(t=>{e.deleteTimelineKeyframe(t.layerId,t.property,t.id)}),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},ZI=Object.freeze(Object.defineProperty({__proto__:null,default:KI},Symbol.toStringTag,{value:"Module"})),qI={command:"doubleclick.item",execute:function(s,e,t){const r=s.get(t);s.context.selection.isOne&&r?s.context.selection.checkChildren(r.id)?s.context.selection.select(r):s.context.selection.check(r)?(s.context.commands.emit("open.editor"),s.emit("removeGuideLine")):this.selectInWorldPosition(s,e,r):this.selectInWorldPosition(s,e,r)},selectInWorldPosition:function(s,e,t){const r=s.context.viewport.getWorldPosition(e);(s.context.selection.hasPoint(r)||s.context.selection.hasChildrenPoint(r))&&(s.context.selection.select(t),s.snapManager.clear())}},QI=Object.freeze(Object.defineProperty({__proto__:null,default:qI},Symbol.toStringTag,{value:"Module"}));function Fc(s,e="elf.json"){var t=document.createElement("a");t.href=s,t.download=e,t.click()}var JI={command:"downloadJSON",execute:function(s,e){var t=JSON.stringify(s.context.modelManager.toJSON()),r="data:application/json;base64,"+window.btoa(unescape(encodeURIComponent(t)));Fc(r,e||"elf.json")}},eE=Object.freeze(Object.defineProperty({__proto__:null,default:JI},Symbol.toStringTag,{value:"Module"})),Bc={makeProjectStyle(s){const e=s.toKeyframeString(),t=s.toRootVariableCSS();return` :root { - ${ei(t)} + ${Je(t)} } /* keyframe */ ${e} - `},makeStyle(n,e=""){return n.is("project")?this.makeProjectStyle(n):` - ${n.generateView(`[data-id='${n.id}']`,e)} - `+n.layers.map(i=>this.makeStyle(i)).join("")},makeSvg(n){const e=n.toSVGString?n.toSVGString():"";return` + `},makeStyle(s,e=""){return s.is("project")?this.makeProjectStyle(s):` + ${s.generateView(`[data-id='${s.id}']`,e)} + `+s.layers.map(r=>this.makeStyle(r)).join("")},makeSvg(s){const e=s.toSVGString?s.toSVGString():"";return` ${e?`${e}`:""} - `},generateSVG(n,e){return n.replaceLocalUrltoRealUrl(n.svg.render(e))}};function N1(n,e,t="image/png"){var i=Ze.create("canvas"),{width:r,height:s}=n;i.resize({width:r,height:s}),i.drawImage(n),e&&e(i.toDataURL(t))}var w9={command:"downloadPNG",execute:function(n){const e=n.context.selection.current;if(e){const t=Rg.generateSVG(n,e).trim(),i="data:image/svg+xml;base64,"+window.btoa(t),r=e.id;vu({local:i},(s,a)=>{N1(a,o=>{Ag(o,r)})})}}},M9=Object.freeze(Object.defineProperty({__proto__:null,default:w9},Symbol.toStringTag,{value:"Module"})),$9={command:"downloadSVG",execute:function(n){const e=n.context.selection.current;if(e){var t=Rg.generateSVG(n,e).trim(),i="data:image/svg+xml;base64,"+window.btoa(t),r=e.id;Ag(i,r)}}},P9=Object.freeze(Object.defineProperty({__proto__:null,default:$9},Symbol.toStringTag,{value:"Module"})),T9={command:"drop.asset",execute:async function(n,e,t=null){if(e.color)n.context.commands.emit("addBackgroundColor",e.color,t);else if(e.gradient)n.context.commands.emit("addBackgroundImageGradient",e.gradient,t);else if(e.pattern)n.context.commands.emit("addBackgroundImagePattern",e.pattern,t);else if(e.imageUrl)n.context.commands.emit("addBackgroundImageAsset",e.imageUrl,t);else if(e.asset){const i=await n.storageManager.getCustomAsset(e.asset.id);i&&n.context.commands.emit("addArtBoard",i,e.asset.center)}En(n)}},C9=Object.freeze(Object.defineProperty({__proto__:null,default:T9},Symbol.toStringTag,{value:"Module"})),E9={command:"dropImageUrl",execute:function(n,e){vu({local:e},t=>{n.context.commands.emit("addImage",P({src:t.local},t))})}},I9=Object.freeze(Object.defineProperty({__proto__:null,default:E9},Symbol.toStringTag,{value:"Module"})),L9={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(n){const e=Ze.create(n.context.config.get("bodyEvent").target);n.context.config.init("onMouseMovepageContainer",e)}},k9=Object.freeze(Object.defineProperty({__proto__:null,default:L9},Symbol.toStringTag,{value:"Module"})),A9={command:"fileDropItems",execute:function(n,e=[]){n.context.commands.emit("updateResource",e)}},R9=Object.freeze(Object.defineProperty({__proto__:null,default:A9},Symbol.toStringTag,{value:"Module"}));function So(n,e){if(ni(e)){var[t,i,r,s]=e.split(":");return t=parseInt(t,10),i=parseInt(i,10),r=parseInt(r,10),s=parseInt(s,10),t*3600+i*60+r+s*(1/n)}else if(_i(e))return e/n;return 0}function Fr(n,e){var t=Math.floor(e/3600),i=Math.floor(e/60%60),r=Math.floor(e%60),s=Math.round((e-Math.floor(e))*n);return s===n&&(s=0,r+=1,r===60&&(i+=1,i===60&&(t+=1))),[t,i,r,s].map(a=>(a+"").padStart(2,"0")).join(":")}function B1(n,e,t=null){return Fr(n,So(n,e)-So(n,t))}function O9(n){var e={id:0,start:0,speed:n.speed||1,elapsed:n.elapsed||0,duration:n.duration||0,iterationStartCount:1,iterationCount:n.iterationCount||Number.MAX_SAFE_INTEGER,direction:n.direction||"normal",log:[],logIndex:0,tick:n.tick||(()=>{}),startCallback:n.start||(()=>{}),endCallback:n.end||(()=>{}),firstCallback:n.first||(()=>{}),lastCallback:n.last||(()=>{})};const t=()=>{if(e.direction==="normal")return!0;if(e.direction==="reverse")return!1;if(e.direction==="alternate")return e.iterationStartCount%2===1;if(e.direction==="alternate-reverse")return e.iterationStartCount%2===0},i=u=>t()?u:1-u,r=u=>{var p=!1;e.start===null&&(e.start=u,p=!0);const f=u-e.start;e.elapsed+=f*e.speed,e.start=u,e.elapsed>e.duration&&(e.elapsed=e.duration);var g=i(e.elapsed/e.duration)*e.duration;p&&e.startCallback(g,e),e.log[e.logIndex++]={elapsed:g,dt:e.lastTime-g},e.lastTime=g,e.tick(g,e),e.elapsed===e.duration?a():s()},s=()=>{e.id=window.requestAnimationFrame(r)},a=()=>{e.endCallback(e.elapsed,e),e.iterationStartCount++,e.iterationStartCount>e.iterationCount?(e.lastCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)):(e.start=null,e.elapsed=0,s())},o=(u={})=>{e.start=null,e.iterationStartCount=1,e.log=[],e.lastTime=0,e.logIndex=0,_i(u.elapsed)&&(e.elapsed=u.elapsed),_i(u.speed)&&(e.speed=u.speed),_i(u.duration)&&(e.duration=u.duration),_i(u.iterationCount)&&(e.iterationCount=u.iterationCount||Number.MAX_SAFE_INTEGER),ni(u.direction)&&(e.direction=u.direction),Ue(u.tick)&&(e.tick=u.tick),Ue(u.start)&&(e.startCallback=u.start),Ue(u.end)&&(e.endCallback=u.end),Ue(u.first)&&(e.firstCallback=u.first),Ue(u.last)&&(e.lastCallback=u.last),Ue(u.stop)&&(e.stopCallback=u.stop),e.firstCallback(e.elapsed,e),s()},l=()=>{e.stopCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)},c=u=>{e.elapsed=u,e.tick(e.elapsed,e)};return{play:o,stop:l,tick:r,first:()=>{c(0)},last:()=>{c(e.duration)},seek:c,timer:e}}var z9={command:"firstTimelineItem",execute:function(n){Cn(n,(e,t)=>{var i=e.getSelectedTimelineFirstTime();e.setTimelineCurrentTime(Fr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},V9=Object.freeze(Object.defineProperty({__proto__:null,default:z9},Symbol.toStringTag,{value:"Module"})),D9={command:"group.item",execute:function(n,e={}){if(n.context.selection.length===0)return;const t=n.context.selection.currentProject;if(t){t.generateListNumber();const i=n.context.selection.map(s=>({depth:s.depth,item:s}));i.sort((s,a)=>s.depth===a.depth?s.no>a.no?-1:1:s.depth>a.depth?1:-1);const r=n.createModel(P(P({itemType:"rect"},n.context.selection.itemRect),e));i[0].item.insertAfter(r),i.forEach(({item:s})=>{r.appendChild(s)}),n.context.selection.select(r),n.emit("refreshAll")}}},F9=Object.freeze(Object.defineProperty({__proto__:null,default:D9},Symbol.toStringTag,{value:"Module"})),N9={command:"history.addLayer",description:"add layer in history ",execute:function(n,e,t,i=!0,r){n.context.commands.emit("addLayer",t,i,r),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[t,i,r],undoValues:[t.id]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:e}){n.context.commands.emit("addLayer",...e),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:e}){const t=e;n.context.selection.itemsByIds(t).forEach(r=>{r&&r.remove()}),n.nextTick(()=>{n.context.selection.empty(),n.emit("refreshAll")})}},B9=Object.freeze(Object.defineProperty({__proto__:null,default:N9},Symbol.toStringTag,{value:"Module"})),j9={command:"history.bring.forward",description:"bring forward",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={},o=null;if(i.isLast){if(o=s.next,!o)return;o.enableHasChildren()?(o.appendChild(i),a=i.hierarchy):(o.insertAfter(i),a=i.hierarchy)}else i.parent.bringForward(i.id),a=i.hierarchy;n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle")),i.parent.attrsWithId("children"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e],undoValues:[t]}){const i=n.get(e.id),r=n.get(e.parentId),s=n.get(t.parentId);r.insertChild(i,e.index),i.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle")),r.attrsWithId("children")))},undo:function(n,{currentValues:[e],undoValues:[t]}){const i=t,r=n.get(i.id),s=n.get(i.parentId),a=n.get(e.parentId),o=i.index;s.insertChild(r,o),r.reset(t.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},G9=Object.freeze(Object.defineProperty({__proto__:null,default:j9},Symbol.toStringTag,{value:"Module"})),H9={command:"history.bring.front",description:"bring front",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierachy,s=i.parent;let a={};i.isLast||(i.parent.bringFront(i.id),a=i.hierarchy,n.context.commands.emit("setAttribute",P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()}))},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e]}){const t=e,i=n.get(t.id),r=n.get(t.parentId),s=t.index;r.insertChild(i,s),n.context.commands.emit("setAttribute",P(P({},i.attrsWithId("x","y","angle")),r.attrsWithId("children")))}},U9=Object.freeze(Object.defineProperty({__proto__:null,default:H9},Symbol.toStringTag,{value:"Module"})),W9={command:"history.clipboard.paste",description:"paste in clipboard ",description_ko:["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "],execute:async function(n,e,t=void 0,i=!0){const r=t||n.context.clipboard.last;if(r.type==Dd.COPY){const s=r.data,a=await n.json.renderAll(s.map(d=>n.get(d))),o=[],l={},c={};let h={};a.forEach(d=>{const u=d.referenceId,p=n.get(u);c[p.parentId]=p.parent;const f=n.createModel(d);f.renameWithCount(),p.insertAfter(f),o.push(f.id),l[f.id]=d,h[f.id]=f.toCloneObject()}),Object.values(c).forEach(d=>{h=P(P({},h),d.attrsWithId("children"))}),n.context.commands.emit("setAttribute",h),n.nextTick(()=>{n.context.selection.select(...o),i&&n.context.history.add(e,this,{currentValues:[r],undoValues:[o,n.context.selection.ids]}),n.context.history.saveSelection()})}},redo:function(n,{currentValues:[e]}){n.context.commands.emit("history.clipboard.paste","paste",e,!1)},undo:function(n,{currentValues:[e],undoValues:[t,i]}){if(e.type===Dd.COPY){const r={};t.forEach(a=>{const o=n.get(a);r[o.parentId]=o.parent,o&&o.remove()});let s={};Object.values(r).forEach(a=>{s=P(P({},s),a.attrsWithId("children"))}),n.context.selection.select(...i),n.context.commands.emit("setAttribute",s)}}},X9=Object.freeze(Object.defineProperty({__proto__:null,default:W9},Symbol.toStringTag,{value:"Module"})),Y9={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(n,e,t=[]){let i=t.map(c=>n.get(c)).filter(Boolean).map(c=>c.id);if(i.length||(i=n.context.selection.ids),!i.length)return;const r=await n.json.renderAll(i.map(c=>n.get(c))),s=[],a={},o={};let l={};r.forEach(c=>{const h=c.referenceId,d=n.get(h);o[d.parentId]=d.parent;const u=n.createModel(c);u.renameWithCount(),d.insertAfter(u),s.push(u.id),a[u.id]=c,l[u.id]=u.toCloneObject()}),Object.values(o).forEach(c=>{l=P(P({},l),c.attrsWithId("children"))}),n.context.commands.emit("setAttribute",l),n.nextTick(()=>{n.context.selection.select(...s),n.context.history.add(e,this,{currentValues:[i],undoValues:[s,n.context.selection.ids]}),n.context.history.saveSelection()})},redo:function(n,{currentValues:[e]}){n.context.commands.emit("copyLayer",e)},undo:function(n,{undoValues:[e,t]}){const i={};e.forEach(s=>{const a=n.get(s);i[a.parentId]=a.parent,a&&a.remove()});let r={};Object.values(i).forEach(s=>{r=P(P({},r),s.attrsWithId("children"))}),n.context.selection.select(...t),n.context.commands.emit("setAttribute",r)}},K9=Object.freeze(Object.defineProperty({__proto__:null,default:Y9},Symbol.toStringTag,{value:"Module"})),q9={command:"history.group.item",description:"History Group Item",execute:function(n,e="selection"){var s;const t=n.context.selection.ids,i=(s=n.context.selection.currentProject)==null?void 0:s.id,r=n.context.history.selectedIds;hg(t,r)||n.context.history.add(e,this,{currentValues:{ids:t,projectId:i},undoValues:{ids:r,projectId:i}})},redo:function(n,{currentValues:[e,t]}){},undo:function(n,{undoValues:[e,t]}){}},Z9=Object.freeze(Object.defineProperty({__proto__:null,default:q9},Symbol.toStringTag,{value:"Module"})),J9={command:"history.moveLayer",description:"move layer in world ",execute:function(n,e,t=[],i=[0,0,0]){Fi(t)===!1&&(t=[t]);const r=n.context.selection.itemsByIds(t),s={},a={};r.forEach(o=>{const l=o.absoluteMove(i),c=o.attrs("x","y");s[o.id]=l,a[o.id]=c}),n.context.commands.emit("setAttribute",a),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[t,i],undoValues:[s]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e,t]}){const i=n.context.selection.itemsByIds(e),r={};i.forEach(s=>{s.absoluteMove(t);const a=s.attrs("x","y");r[s.id]=a}),n.context.commands.emit("setAttribute",r)},undo:function(n,{undoValues:[e]}){n.context.commands.emit("setAttribute",e)}},Q9=Object.freeze(Object.defineProperty({__proto__:null,default:J9},Symbol.toStringTag,{value:"Module"})),eF={command:"history.moveLayerToTarget",description:"move layer to target in world ",execute:function(n,e,t,i,r=[0,0,0],s=_n.APPEND_CHILD){const a=n.get(t)||t,o=a.parent,l=n.get(i)||n.context.selection.currentProject,c=a.hierachy;r&&a.absoluteMove(r);let h={};s===_n.APPEND_CHILD?(l.appendChild(a),h=l.attrsWithId("children")):s===_n.INSERT_BEFORE?(l.insertBefore(a),h=l.parent.attrsWithId("children")):s===_n.INSERT_AFTER&&(l.insertAfter(a),h=l.parent.attrsWithId("children")),n.context.commands.emit("setAttribute",P(P(P({},a.attrsWithId("x","y","angle","parentId")),h),o&&o.isNot("project")?o.attrsWithId("children"):{})),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a.hierachy],undoValues:[c,a.parentId]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e,t]}){const i=e,r=n.get(i.id),s=n.get(i.parentId),a=n.get(t),o=i.index;s.insertChild(r,o),r.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},tF=Object.freeze(Object.defineProperty({__proto__:null,default:eF},Symbol.toStringTag,{value:"Module"})),iF={command:"history.refreshSelection",description:"save selection in history ",description_ko:"Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(n,e="selection"){var s;const t=n.context.selection.ids,i=(s=n.context.selection.currentProject)==null?void 0:s.id,r=n.context.history.selectedIds;hg(t,r)||(n.context.history.add(e,this,{currentValues:[t,i],undoValues:[r,i]}),this.nextAction(n))},nextAction(n){n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e,t]}){n.context.selection.selectProject(t),n.context.selection.select(...e),this.nextAction(n)},undo:function(n,{undoValues:[e,t]}){n.context.selection.selectProject(t),n.context.selection.select(...e),this.nextAction(n)}},rF=Object.freeze(Object.defineProperty({__proto__:null,default:iF},Symbol.toStringTag,{value:"Module"})),nF={command:"history.refreshSelectionPorject",description:"save project selection in history ",description_ko:"Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(n,e="selection",t){var s;const i=[t],r=[(s=n.context.selection.currentProject)==null?void 0:s.id];hg(i,r)||(n.context.selection.selectProject(t),n.context.history.add(e,this,{currentValues:i,undoValues:r}),this.nextAction(n))},nextAction(n){n.nextTick(()=>{n.emit("refreshAll"),n.emit("refreshProjectList")})},redo:function(n,{currentValues:[e]}){n.context.selection.selectProject(e),this.nextAction(n)},undo:function(n,{undoValues:[e]}){n.context.selection.selectProject(e),this.nextAction(n)}},sF=Object.freeze(Object.defineProperty({__proto__:null,default:nF},Symbol.toStringTag,{value:"Module"}));function j1(n=[]){return n.filter(e=>{let t=0;return e.path.forEach(i=>{t+=n.filter(r=>r.id===i.id).length?1:0}),t===1})}var aF={command:"history.removeLayer",description:"remove layer",execute:function(n,e,t=void 0){let i=n.context.selection.itemsByIds(t||n.context.selection.ids);i=j1(i);const r=i.map(a=>a.id);n.context.modelManager.markRemove(r);const s=i.map(a=>a.parentId);i.forEach(a=>{a.remove(),n.context.selection.removeById(a.id)}),n.context.history.add(e,this,{currentValues:[r,s],undoValues:r}),n.nextTick(()=>{n.context.selection.removeById(r),s.forEach(a=>{n.context.commands.emit("update",a,{changedChildren:!0})}),n.emit("refreshAll"),n.emit("removeGuideLine"),n.nextTick(()=>{n.context.history.saveSelection()})})},redo:function(n,{currentValues:e}){const t=e[0];let i=n.context.selection.itemsByIds(t||n.context.selection.ids);i=j1(i),n.context.modelManager.markRemove(i.map(r=>r.id)),i.forEach(r=>r.remove()),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:e}){n.context.modelManager.unmarkRemove(e),n.nextTick(()=>{n.emit("refreshAll")})}},oF=Object.freeze(Object.defineProperty({__proto__:null,default:aF},Symbol.toStringTag,{value:"Module"})),lF={command:"history.removeProject",description:"remove project",execute:function(n,e,t){const i=n.context.modelManager.markRemoveProject(t);n.context.history.add(e,this,{currentValues:[t],undoValues:[t,i]}),n.nextTick(()=>{n.context.selection.selectProject(n.context.modelManager.projects[0]),n.emit("refreshAll"),n.emit("removeGuideLine"),n.nextTick(()=>{n.context.history.saveSelection()})})},redo:function(n,{currentValues:[e]}){n.context.modelManager.markRemoveProject(e),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:[e,t]}){n.context.modelManager.unmarkRemoveProject(e,t),n.nextTick(()=>{n.context.selection.selectProject(e),n.emit("refreshAll")})}},cF=Object.freeze(Object.defineProperty({__proto__:null,default:lF},Symbol.toStringTag,{value:"Module"})),hF={command:"history.send.back",description:"send back",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={};i.isFirst()||(i.parent.sendBack(i.id),a=i.hierarchy,n.context.commands.emit("setAttribute",P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()}))},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e]}){const t=e,i=n.get(t.id),r=n.get(t.parentId),s=t.index;r.insertChild(i,s),n.context.commands.emit("setAttribute",P(P({},i.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))}},dF=Object.freeze(Object.defineProperty({__proto__:null,default:hF},Symbol.toStringTag,{value:"Module"})),uF={command:"history.send.backward",description:"send backward",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={},o=null;if(i.isFirst){if(o=s.prev,!o)return;o.insertBefore(i),a=i.hierarchy}else i.parent.sendBackward(i.id),a=i.hierarchy;n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId")),i.parent.attrsWithId("children"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e],undoValues:[t]}){const i=n.get(e.id),r=n.get(e.parentId),s=n.get(t.parentId);r.insertChild(i,e.index),i.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(n,{currentValues:[e],undoValues:[t]}){const i=t,r=n.get(i.id),s=n.get(i.parentId),a=n.get(e.parentId),o=i.index;s.insertChild(r,o),r.reset(t.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},pF=Object.freeze(Object.defineProperty({__proto__:null,default:uF},Symbol.toStringTag,{value:"Module"})),fF={command:"history.setAttribute",execute:function(n,e,t={},i={origin:"*"}){n.context.commands.emit("setAttribute",t,i),n.context.history.add(e,this,{currentValues:[t],undoValues:n.context.history.getUndoValues(t)}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:e}){n.context.commands.emit("setAttribute",...e),n.nextTick(()=>{n.context.selection.reselect(),n.emit("refreshAll")})},undo:function(n,{undoValues:e}){const t=Object.keys(e);n.context.selection.itemsByIds(t).forEach(r=>{r.reset(e[r.id])}),n.context.selection.reselect(),n.nextTick(()=>{n.emit("refreshAll")})}},gF=Object.freeze(Object.defineProperty({__proto__:null,default:fF},Symbol.toStringTag,{value:"Module"})),mF={command:"item.move.depth.down",execute:function(n){const e=n.context.selection.current;e&&e.orderPrev(),En(n)}},vF=Object.freeze(Object.defineProperty({__proto__:null,default:mF},Symbol.toStringTag,{value:"Module"})),yF={command:"item.move.depth.first",execute:function(n){const e=n.context.selection.current;e&&e.orderFirst(),En(n)}},bF=Object.freeze(Object.defineProperty({__proto__:null,default:yF},Symbol.toStringTag,{value:"Module"})),xF={command:"item.move.depth.last",execute:function(n){const e=n.context.selection.current;e&&e.orderLast(),En(n)}},_F=Object.freeze(Object.defineProperty({__proto__:null,default:xF},Symbol.toStringTag,{value:"Module"})),SF={command:"item.move.depth.up",execute:function(n){const e=n.context.selection.current;e&&e.orderNext(),En(n)}},wF=Object.freeze(Object.defineProperty({__proto__:null,default:SF},Symbol.toStringTag,{value:"Module"})),MF={command:"keymap.keydown",execute:function(n,e){n.context.keyboardManager.add(e.code,e.keyCode,e),n.context.shortcuts&&n.context.shortcuts.execute(e,"keydown")}},$F=Object.freeze(Object.defineProperty({__proto__:null,default:MF},Symbol.toStringTag,{value:"Module"})),PF={command:"lastTimelineItem",execute:function(n){Cn(n,(e,t)=>{var i=e.getSelectedTimelineLastTime();e.setTimelineCurrentTime(Fr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},TF=Object.freeze(Object.defineProperty({__proto__:null,default:PF},Symbol.toStringTag,{value:"Module"})),CF={command:"load.json",execute:function(n,e,t={origin:"*"}){n.context.modelManager.load(e,t),En(n)}},EF=Object.freeze(Object.defineProperty({__proto__:null,default:CF},Symbol.toStringTag,{value:"Module"})),IF={command:"moveLayer",description:"move layer by keydown with matrix ",execute:function(n,e=0,t=0){const i=[e,t,0];n.context.selection.items.forEach(r=>{r.absoluteMove(i)}),n.context.commands.executeCommand("setAttribute","item move down",n.context.selection.pack("x","y")),n.nextTick(()=>{n.context.selection.reselect()})}},LF=Object.freeze(Object.defineProperty({__proto__:null,default:IF},Symbol.toStringTag,{value:"Module"})),kF={command:"moveLayerForItems",description:"mova layer by multi items ",execute:function(n,e=[]){const t={};e.forEach(i=>{i.item.absoluteMove(i.dist),t[i.item.id]=i.item.attrs("x","y")}),n.context.commands.emit("history.setAttribute","item move",t),n.nextTick(()=>{n.context.selection.reselect()})}},AF=Object.freeze(Object.defineProperty({__proto__:null,default:kF},Symbol.toStringTag,{value:"Module"})),RF={command:"moveSelectionToCenter",description:"Move selection project or artboards to center on Viewport",execute:function(n,e=!0){var i,r,s,a,o;let t=[];(i=n.context.selection)!=null&&i.isEmpty?((s=(r=n.context.selection)==null?void 0:r.currentProject)==null?void 0:s.layers.length)>0?t=Xc((a=n.context.selection)==null?void 0:a.currentProject.layers):t=Ei(0,0,100,100):t=Xc((o=n.context.selection)==null?void 0:o.items),n.context.commands.emit("moveToCenter",t,e)}},OF=Object.freeze(Object.defineProperty({__proto__:null,default:RF},Symbol.toStringTag,{value:"Module"}));function zF(n,e,t,i=!0,r=void 0){e==="svg-textpath"?t=Ve(P({},t),{fontSize:t.height,textLength:"100%",d:_e.makeLine(0,t.height,t.width,t.height).d}):e==="svg-circle"?(e="svg-path",t=Ve(P({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:_e.makeCircle(0,0,t.width,t.height).d})):e==="svg-rect"?(e="svg-path",t=Ve(P({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:_e.makeRect(0,0,t.width,t.height).d})):e==="text"?t=P({width:300,height:50},t):e==="artboard"&&(t=Ve(P({},t),{backgroundColor:"white"}));const s=P({itemType:e},t),a=n.createModel(s);n.context.commands.executeCommand("moveLayerToTarget",`add layer - ${e}`,a,r),n.nextTick(()=>{n.emit("appendLayer",a),i&&n.context.selection.select(a)})}var VF=Object.freeze(Object.defineProperty({__proto__:null,default:zF},Symbol.toStringTag,{value:"Module"})),DF={command:"nextTimelineItem",execute:function(n){Cn(n,(e,t)=>{var i=e.getSelectedTimelineNextTime();e.setTimelineCurrentTime(Fr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},FF=Object.freeze(Object.defineProperty({__proto__:null,default:DF},Symbol.toStringTag,{value:"Module"})),NF={command:"open.editor",description:"Open custom editor for item when doubleclick is fired",execute:function(n,e){if(!(!e&&n.context.selection.isOne===!1)&&(e=e||n.context.selection.current,e)){if(e.editablePath)n.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,isControl:!0,disableCurve:!0,d:e.editablePath,changeEvent:s=>{n.context.commands.executeCommand("setAttribute","change editable path",n.context.selection.packByValue(P({},e.recoverEditablePath(s.d)),[e.id])),n.nextTick(()=>{n.context.stateManager.isPointerUp&&n.context.commands.emit("recoverBooleanPath")})}}),n.emit("hideSelectionToolView");else if(e.d)n.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,d:e.absolutePath().d,changeEvent:s=>{const a=n.context.selection.current;if(a.isSVG()&&a.isNot("svg-path")){const o=a.toSVGPath(),l=n.createModel(P({itemType:"svg-path"},o));n.context.selection.select(l),a.insertAfter(l),n.nextTick(()=>{n.context.commands.emit("removeLayer",[a.id]),n.context.commands.emit("updatePathItem",s)})}else n.context.commands.emit("updatePathItem",s),n.nextTick(()=>{n.context.stateManager.isPointerUp&&n.context.commands.emit("recoverBooleanPath")})}}),n.emit("hideSelectionToolView");else if(e.clipPath){var t=gt.parseStyle(e.clipPath);if(t.type==="path"){var i=e.absolutePath(e.clipPathString).d,r=i?"modify":"path";n.emit("showPathEditor",r,{changeEvent:s=>{const a=e.invertPath(s.d).d;n.context.commands.executeCommand("setAttribute","change clip-path",n.context.selection.packByValue({clipPath:`path(${a})`}))},current:e,d:i}),n.emit("hideSelectionToolView")}else t.type==="svg"||n.emit("showClippathEditorView")}}}},BF=Object.freeze(Object.defineProperty({__proto__:null,default:NF},Symbol.toStringTag,{value:"Module"})),jF={command:"pauseTimelineItem",execute:function(n){n.timer&&n.timer.stop()}},GF=Object.freeze(Object.defineProperty({__proto__:null,default:jF},Symbol.toStringTag,{value:"Module"})),HF={command:"playTimelineItem",description:"Play button action",execute:function(n,e=1,t=1,i="normal"){n.context.selection.empty(),Cn(n,(r,s)=>{var a=r.getSelectedTimelineLastTime();n.timer?n.timer.stop():n.timer=O9({elapsed:s.currentTime*1e3,speed:e,duration:a*1e3,iterationCount:t,direction:i}),n.timer.play({duration:a*1e3,elapsed:s.currentTime*1e3,speed:e,iterationCount:t,direction:i,tick:o=>{r.seek(Fr(s.fps,o/1e3)),n.emit("playTimeline")},last:o=>{r.seek(Fr(s.fps,o/1e3)),n.emit("playTimeline"),n.nextTick(()=>{n.emit("stopTimeline")})},stop:o=>{r.stop(Fr(s.fps,o/1e3)),n.emit("stopTimeline")}})})}},UF=Object.freeze(Object.defineProperty({__proto__:null,default:HF},Symbol.toStringTag,{value:"Module"})),WF={command:"prevTimelineItem",execute:function(n){Cn(n,(e,t)=>{var i=e.getSelectedTimelinePrevTime();e.setTimelineCurrentTime(Fr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},XF=Object.freeze(Object.defineProperty({__proto__:null,default:WF},Symbol.toStringTag,{value:"Module"})),YF={command:"recoverBooleanPath",description:"recover box rectangle for boolean path result",execute:function(n){const e=n.context.selection.current;let t;if(e&&e.isBooleanItem?t=e.parent:e&&e.is("boolean-path")&&(t=e),t){const i=typeof e.isBooleanItem=="boolean"&&e.isBooleanItem,r=t.d;if(!r)return;const s=t.layers.map(c=>({item:c,matrix:c.matrix})),a=t.updatePath(r);delete a.d,t.reset(a),s.forEach(c=>{t.resetMatrix(c.item)});const o=[...s.map(c=>c.item.id),t.id],l=n.context.selection.packByIds(o,"x","y","width","height");n.context.commands.executeCommand("setAttribute","fit boolean path",l,{origin:"*",doNotChildrenScale:i})}}},KF=Object.freeze(Object.defineProperty({__proto__:null,default:YF},Symbol.toStringTag,{value:"Module"})),qF={command:"refreshArtboard",execute:function(n){const e=n.createCommandMaker();e.emit("refreshLayerTreeView"),e.emit("refreshAllCanvas"),e.emit(Gi),e.emit("refreshAllElementBoundSize"),e.emit(kt),e.run()}},ZF=Object.freeze(Object.defineProperty({__proto__:null,default:qF},Symbol.toStringTag,{value:"Module"}));function G1(n,e){var t;e.hasLayout()?n.emit("refreshElementBoundSize",e):e&&(e.isLayoutItem()||((t=e.parent)==null?void 0:t.is("boolean-path")))?n.emit("refreshElementBoundSize",e.parent):n.emit("refreshElementBoundSize",e)}var JF={command:"refreshElement",execute:function(n,e,t=!0){const i=n.createCommandMaker();Fi(e)?(t&&i.emit("refreshAllCanvas"),i.emit(Gi,e),e.forEach(r=>{G1(i,r)})):(t&&e&&e.hasChangedField("children","changedChildren","parentId")&&i.emit("refreshAllCanvas"),i.emit(Gi,e),G1(i,e)),i.run()}},QF=Object.freeze(Object.defineProperty({__proto__:null,default:JF},Symbol.toStringTag,{value:"Module"}));function eN(n){n.context.commands.emit("saveJSON")}var tN=Object.freeze(Object.defineProperty({__proto__:null,default:eN},Symbol.toStringTag,{value:"Module"})),iN={command:"refreshSelectedOffset",execute:function(n){var e=n.timeline.items[0];e&&n.emit("refreshOffsetValue",e)}},rN=Object.freeze(Object.defineProperty({__proto__:null,default:iN},Symbol.toStringTag,{value:"Module"})),nN={command:"removeAnimationItem",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.removeAnimationItem(e),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("removeAnimation"))}},sN=Object.freeze(Object.defineProperty({__proto__:null,default:nN},Symbol.toStringTag,{value:"Module"})),aN={command:"removeLayer",execute:function(n,e=void 0){const t=e||n.context.selection.ids,i=[];n.context.selection.itemsByIds(t).forEach(r=>{i.push(r.id),r.remove()}),n.context.selection.removeById(i),n.nextTick(()=>{n.emit("refreshAll")})}},oN=Object.freeze(Object.defineProperty({__proto__:null,default:aN},Symbol.toStringTag,{value:"Module"})),lN={command:"removeTimeline",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.removeTimeline(e),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset"))}},cN=Object.freeze(Object.defineProperty({__proto__:null,default:lN},Symbol.toStringTag,{value:"Module"})),hN={command:"removeTimelineProperty",execute:function(n,e,t){const i=n.context.selection.currentProject;i&&(i.removeTimelineProperty(e,t),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset"))}},dN=Object.freeze(Object.defineProperty({__proto__:null,default:hN},Symbol.toStringTag,{value:"Module"}));function uN(n,e=""){var t=n.context.selection.current;if(t&&t.is("artboard")){if(!e.trim())return;var[i,r]=e.split("x");i=+i,r=+r,t.resize(i,r),n.context.selection.select(t),En(n)}}var pN=Object.freeze(Object.defineProperty({__proto__:null,default:uN},Symbol.toStringTag,{value:"Module"})),fN={command:"rotateLayer",description:"rotate layer by keydown with matrix ",execute:function(n,e=0){n.context.commands.executeCommand("setAttribute","change rotate",n.context.selection.packByValue({angle:n.context.selection.current.angle+e}))}},gN=Object.freeze(Object.defineProperty({__proto__:null,default:fN},Symbol.toStringTag,{value:"Module"})),mN={command:"same.height",description:"fit at the same height",execute:function(n){var e=n.context.selection.length;if(e!=1){if(e>1){const t=Zi(n.context.selection.verties);n.context.commands.executeCommand("setAttribute","fit at the same height",n.context.selection.packByValue({y:t.y,height:t.height}))}}}},vN=Object.freeze(Object.defineProperty({__proto__:null,default:mN},Symbol.toStringTag,{value:"Module"})),yN={command:"same.width",description:"fit at the same width",execute:function(n){if(n.context.selection.isMany){const e=Zi(n.context.selection.verties);n.context.commands.executeCommand("setAttribute","fit at the same width",n.context.selection.packByValue({x:e.x,width:e.width}))}}},bN=Object.freeze(Object.defineProperty({__proto__:null,default:yN},Symbol.toStringTag,{value:"Module"})),xN={command:"saveJSON",execute:function(n){n.saveItem("model",n.context.modelManager.toJSON())}},_N=Object.freeze(Object.defineProperty({__proto__:null,default:xN},Symbol.toStringTag,{value:"Module"})),SN={command:"savePNG",execute:function(n,e=""){const t=n.context.selection.current;if(t){const i=Rg.generateSVG(n,t).trim(),r="data:image/svg+xml;base64,"+window.btoa(i);vu({local:r},(s,a)=>{N1(a,o=>{e&&n.emit(e,o)})})}}},wN=Object.freeze(Object.defineProperty({__proto__:null,default:SN},Symbol.toStringTag,{value:"Module"})),MN={command:"segment.delete",execute:function(n){n.emit("deleteSegment")}},$N=Object.freeze(Object.defineProperty({__proto__:null,default:MN},Symbol.toStringTag,{value:"Module"})),PN={command:"segment.move.down",execute:function(n,e={dy:1}){const t=+e.dy;n.emit("moveSegment",0,t)}},TN=Object.freeze(Object.defineProperty({__proto__:null,default:PN},Symbol.toStringTag,{value:"Module"})),CN={command:"segment.move.left",execute:function(n,e={dx:1}){const t=+e.dx;n.emit("moveSegment",-1*t,0)}},EN=Object.freeze(Object.defineProperty({__proto__:null,default:CN},Symbol.toStringTag,{value:"Module"})),IN={command:"segment.move.right",execute:function(n,e={dx:1}){const t=+e.dx;n.emit("moveSegment",t,0)}},LN=Object.freeze(Object.defineProperty({__proto__:null,default:IN},Symbol.toStringTag,{value:"Module"})),kN={command:"segment.move.up",execute:function(n,e={dy:1}){const t=+e.dy;n.emit("moveSegment",0,-1*t)}},AN=Object.freeze(Object.defineProperty({__proto__:null,default:kN},Symbol.toStringTag,{value:"Module"})),RN={command:"select.all",execute:function(n){var e=n.context.selection.currentProject;e&&(n.context.selection.select(...e.layers),n.context.commands.emit("history.refreshSelection"))}},ON=Object.freeze(Object.defineProperty({__proto__:null,default:RN},Symbol.toStringTag,{value:"Module"})),zN={command:"select.none",execute:function(n){n.context.selection.empty(),n.context.commands.emit("history.refreshSelection")}},VN=Object.freeze(Object.defineProperty({__proto__:null,default:zN},Symbol.toStringTag,{value:"Module"})),DN={command:"selectTimelineItem",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.selectTimeline(e),n.emit("refreshTimeline"),n.emit("selectTimeline"))}},FN=Object.freeze(Object.defineProperty({__proto__:null,default:DN},Symbol.toStringTag,{value:"Module"})),NN={command:"setAttribute",execute:function(n,e={},t={origin:"*"}){const i=[];if(Object.entries(e).forEach(([a,o])=>{const l=n.get(a),c={};Object.entries(o).forEach(([h,d])=>{c[h]=Ue(d)?d(l):d}),i.push({id:l.id,parentId:l.parentId,attrs:c})}),i.length==0)return;let r=!1;const s=[];i.forEach(a=>{const o=n.get(a.id);if(o&&(o.reset(a.attrs,t),o.hasChangedField("layout")&&o.layers.forEach(l=>{l.isLayout(At.DEFAULT)||l.isLayout(At.FLEX)||l.isLayout(At.GRID),n.context.commands.emit("refreshElement",l)}),s.push(o),o.hasChangedHirachy&&(r=!0)),!o.is("project")&&!(o.parent&&o.parent.is("project"))&&(o.isLayoutItem()||o.isBooleanItem)){const l=n.get(a.parentId);a.parentId&&(l==null?void 0:l.isNot("project"))&&(l.reset({changedChildren:!0},t),r=!0)}}),s.length&&n.context.commands.emit("refreshElement",s,!1),r&&n.emit("refreshAllCanvas")}},BN=Object.freeze(Object.defineProperty({__proto__:null,default:NN},Symbol.toStringTag,{value:"Module"})),jN={command:"setTimelineOffset",debounce:100,execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.setTimelineKeyframeOffsetValue(e.layerId,e.property,e.id,e.value,e.timing,e.time),n.emit("refreshTimeline"))}},GN=Object.freeze(Object.defineProperty({__proto__:null,default:jN},Symbol.toStringTag,{value:"Module"})),HN={command:"showExportView",execute:function(n){n.emit("showExportWindow")}},UN=Object.freeze(Object.defineProperty({__proto__:null,default:HN},Symbol.toStringTag,{value:"Module"})),WN={command:"sort.bottom",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=Hd(t.verties)-Hd(n.context.selection.verties);n.context.commands.emit("moveLayer",0,i)}}else if(n.context.selection.isMany){let e=Hd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Hd(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},XN=Object.freeze(Object.defineProperty({__proto__:null,default:WN},Symbol.toStringTag,{value:"Module"})),YN={command:"sort.center",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=Wd(e.artboard.verties)-Wd(n.context.selection.verties);n.context.commands.emit("moveLayer",t,0)}}}else if(n.context.selection.isMany){let e=Wd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Wd(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},KN=Object.freeze(Object.defineProperty({__proto__:null,default:YN},Symbol.toStringTag,{value:"Module"})),qN={command:"sort.left",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=Ud(t.verties)-Ud(n.context.selection.verties);n.context.commands.emit("moveLayer",i,0)}}else if(n.context.selection.isMany){let e=Ud(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Ud(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},ZN=Object.freeze(Object.defineProperty({__proto__:null,default:qN},Symbol.toStringTag,{value:"Module"})),JN={command:"sort.middle",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=Yd(e.artboard.verties)-Yd(n.context.selection.verties);n.context.commands.emit("moveLayer",0,t)}}}else if(n.context.selection.isMany){let e=Yd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Yd(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},QN=Object.freeze(Object.defineProperty({__proto__:null,default:JN},Symbol.toStringTag,{value:"Module"})),eB={command:"sort.right",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=Gd(t.verties)-Gd(n.context.selection.verties);n.context.commands.emit("moveLayer",i,0)}}else if(n.context.selection.isMany){let e=Gd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Gd(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},tB=Object.freeze(Object.defineProperty({__proto__:null,default:eB},Symbol.toStringTag,{value:"Module"})),iB={command:"sort.top",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=Xd(t.verties)-Xd(n.context.selection.verties);n.context.commands.emit("moveLayer",0,i)}}else if(n.context.selection.isMany){let e=Xd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=Xd(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},rB=Object.freeze(Object.defineProperty({__proto__:null,default:iB},Symbol.toStringTag,{value:"Module"})),nB={command:"switch.path",execute:async n=>{const e=n.context.selection.current;if(!!e&&(e.is("boolean-path")||e.isBooleanItem)){let t=e;e.isBooleanItem&&(t=e.parent),n.context.selection.select(t),n.context.commands.executeCommand("setAttribute","change boolean operation",n.context.selection.packByValue({booleanOperation:t["boolean-operation"],children:t.children.reverse()})),n.nextTick(()=>{n.context.commands.emit("recoverBooleanPath"),n.context.selection.select(e)})}}},sB=Object.freeze(Object.defineProperty({__proto__:null,default:nB},Symbol.toStringTag,{value:"Module"})),aB={command:"ungroup.item",execute:function(n){if(n.context.selection.length===0)return;const e=n.context.selection.current;if(e){let t=e,i=[...t.layers];i.reverse(),i.forEach(r=>{t.insertBefore(r)}),n.context.selection.select(...i),n.emit("refreshAll")}}},oB=Object.freeze(Object.defineProperty({__proto__:null,default:aB},Symbol.toStringTag,{value:"Module"})),lB={command:"updateClipPath",description:"update clip-path property ",execute:function(n,e){n.context.commands.executeCommand("setAttribute","change clip-path",n.context.selection.packByValue({clipPath:`path(${e.d})`}))}},cB=Object.freeze(Object.defineProperty({__proto__:null,default:lB},Symbol.toStringTag,{value:"Module"})),hB={command:"updateImage",execute:function(n,e,t,i){var r=new window.FileReader;r.onload=s=>{var a=s.target.result,o=window.URL.createObjectURL(e);n.context.commands.emit("addImageAssetItem",{id:Zr(),type:e.type,name:e.name,original:a,local:o},t,i)},r.readAsDataURL(e)}},dB=Object.freeze(Object.defineProperty({__proto__:null,default:hB},Symbol.toStringTag,{value:"Module"})),uB={command:"updateImageAssetItem",execute:function(n,e,t){var i=new window.FileReader;i.onload=r=>{var s=r.target.result,a=window.URL.createObjectURL(e),o=n.context.selection.currentProject;if(o){const l=o.createImage({id:Zr(),type:e.type,name:e.name,original:s,local:a});n.context.commands.emit("addImageAsset"),Ue(t)&&t(l.id)}},i.readAsDataURL(e)}},pB=Object.freeze(Object.defineProperty({__proto__:null,default:uB},Symbol.toStringTag,{value:"Module"}));const fB=1e3,yh=new Map;class wo{static has(e){return yh.has(e)}static get(e){return yh.get(e)}static set(e,t){yh.size>fB&&yh.clear(),yh.set(e,t)}}const gB=/((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi;class ui extends Vr{getDefaultObject(){return{itemType:"transform",value:[]}}toCloneObject(){return P({},this.attrs("itemType","type","value"))}toString(){return`${this.json.type}(${this.json.value.join(", ")||""})`}static join(e){var t="perspective",i="matrix3d",r=e.filter(o=>o.type===t),s=e.filter(o=>o.type===i),a=e.filter(o=>o.type!==t&&o.type!==i);return[...r,...a,...s].map(o=>new ui(o).toString()).join(" ")}hasNumberValue(){var e=this.json.type;return e.includes("matrix")||e.includes("scale")}static parse(e){return new ui(e)}static remove(e,t=[]){return typeof t=="string"&&(t=[t]),ui.filter(e,i=>t.includes(i.type)===!1)}static filter(e,t){return ui.join(ui.parseStyle(e,!1).filter(i=>t(i)))}static replace(e,t){var i=ui.parseStyle(e,!1),r=i.find(s=>s.type===t.type);return r?r.value=t.value:i.push(t),ui.join(i)}static replaceAll(e,t){for(var i=ui.parseStyle(e,!1),r=ui.parseStyle(t),s=0,a=r.length;sc.type===o.type);l?l.value=o.value:i.push(o)}return ui.join(i)}static addTransform(e,t){for(var i=ui.parseStyle(e,!1),r=ui.parseStyle(t),s=0,a=r.length;sc.type===o.type);l?o.value.forEach((c,h)=>{l.value[h].value+=c.value}):i.push(o)}return ui.join(i)}static get(e,t){var i=ui.parseStyle(e,!0);if(typeof t=="function"?i=i.find(t):i=i.find(r=>r.type===t),i)return i.value}static createRotateKey(e,t,i){return`${e}:::${i}(${t})`}static rotate(e,t,i="rotate"){const r=ui.createRotateKey(e,t,i);return wo.has(r)||wo.set(r,ui.replace(e,{type:i,value:[t]})),wo.get(r)}static rotateZ(e,t){return ui.rotate(e,t,"rotateZ")}static rotateX(e,t){return ui.rotate(e,t,"rotateX")}static rotateY(e,t){return ui.rotate(e,t,"rotateY")}static parseStyle(e,t=!0){var i=[];if(!e)return i;if(t&&wo.has(e))return wo.get(e);var r=e.match(gB)||[];return r.forEach((s,a)=>{var[o,l]=s.split("(");l=l.split(")")[0];var c=l.split(",");l.includes("matrix")||l.includes("scale")?c=c.map(h=>y.number(h.trim())):c=c.map(h=>y.parse(h.trim())),i[a]=ui.parse({type:o,value:c})}),t&&wo.set(e,i),i}static createTransformMatrix(e,t,i){const r=Ki();for(let o=0,l=e.length;o1?c.value[1].toDeg().toRad():h;qi(r,r,sa(1,Math.tan(d.value),0,0,Math.tan(h.value),1,0,0,0,0,1,0,0,0,0,1));break;case"matrix":var a=c.value;a=[a[0].value,a[1].value,0,0,a[2].value,a[3].value,0,0,0,0,1,0,a[4].value,a[5].value,0,1],qi(r,r,a);break;case"matrix3d":var a=c.value.map(u=>u.value);qi(r,r,a);break;case"perspective":var a=c.value;SM(r,Math.PI*.5,t/i,1,a[0].value);break}}return r}static fromScale(e){if(e[0]===1&&e[1]===1)return"";const t=[];return e[0]!=1&&t.push(`scaleX(${e[0]})`),e[1]!=1&&t.push(`scaleY(${e[1]})`),e[2]!=1&&t.push(`scaleZ(${e[2]})`),t.join(" ")}}var mB={command:"updatePathItem",description:"Update path string for selected svg path item",execute:function(n,e){const t=n.context.selection.current;if(t)if(e.box==="box"){const i=t.invertPath(e.d);n.context.commands.executeCommand("setAttribute","change local path",n.context.selection.packByValue({d:i.d}))}else{const i=new _e(e.d);i.transformMat4(e.matrix.absoluteMatrixInverse);let r=i.getBBox();const s=yr(r[1],r[0]),a=yr(r[3],r[0]);let o=Xe(Ei(r[0][0],r[0][1],s,a),e.matrix.absoluteMatrix),l=Xe(o,fa(Si([],o[4]),ui.createTransformMatrix(ui.parseStyle(e.matrix.transform),s,a),Si([],Tr([],o[4]))));const c=Or(Si([],l[0]),t.getLocalTransformMatrix(s,a)),h=aa([],Or(e.matrix.parentMatrixInverse,c,ir([],t.getLocalTransformMatrix(s,a))));n.context.commands.executeCommand("setAttribute","change path",n.context.selection.packByValue({d:i.translate(-r[0][0],-r[0][1]).d,x:h[0],y:h[1],width:s,height:a}))}}},vB=Object.freeze(Object.defineProperty({__proto__:null,default:mB},Symbol.toStringTag,{value:"Module"})),yB={command:"updateResource",execute:function(n,e){e.forEach(t=>{switch(t.type){case"image/svg+xml":case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":n.context.commands.emit("updateImage",t);break;case"text/plain":case"text/html":n.context.commands.emit("addText",{content:t.data});break;case"text/uri-list":n.context.commands.emit("updateUriList",t);break}})}},bB=Object.freeze(Object.defineProperty({__proto__:null,default:yB},Symbol.toStringTag,{value:"Module"})),xB={command:"updateUriList",execute:function(n,e){var t=e.data;if(t.indexOf("data:")>-1){var i=uh.parse(t,!0);switch(i.mimeType){case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":n.context.commands.emit("addImageAssetItem",{id:Zr(),type:i.mimeType,name:"",original:t,local:i.local});break}}else{var r=e.data.split(".").pop(),s=e.data.split("/").pop();switch(r){case"png":case"jpg":case"gif":case"svg":n.context.commands.emit("addImageAssetItem",{id:Zr(),type:"image/"+r,name:s,original:e.data,local:e.data});break}}}},_B=Object.freeze(Object.defineProperty({__proto__:null,default:xB},Symbol.toStringTag,{value:"Module"})),SB={command:"updateVideo",execute:function(n,e,t,i=void 0){var r=new window.FileReader;r.onload=s=>{var a=s.target.result,o=window.URL.createObjectURL(e);n.context.commands.emit("addVideoAssetItem",{id:Zr(),type:e.type,name:e.name,original:a,local:o},t,i)},r.readAsDataURL(e)}},wB=Object.freeze(Object.defineProperty({__proto__:null,default:SB},Symbol.toStringTag,{value:"Module"})),MB={command:"updateVideoAssetItem",execute:function(n,e,t){var i=new window.FileReader;i.onload=r=>{var s=r.target.result,a=window.URL.createObjectURL(e),o=n.context.selection.currentProject;o&&(o.createVideo({id:Zr(),type:e.type,name:e.name,original:s,local:a}),n.emit("addVideoAsset"),Ue(t)&&t(a))},i.readAsDataURL(e)}},$B=Object.freeze(Object.defineProperty({__proto__:null,default:MB},Symbol.toStringTag,{value:"Module"})),PB={command:"update",description:"Update the model",execute:function(n,e=null,t={},i={origin:"*"}){const r=n.get(e);r&&r.reset(t,i)&&n.context.commands.emit("refreshElement",r)}},TB=Object.freeze(Object.defineProperty({__proto__:null,default:PB},Symbol.toStringTag,{value:"Module"}));const CB={"./command_list/_currentProject.js":H6,"./command_list/_doForceRefreshSelection.js":U6,"./command_list/addArtBoard.js":X6,"./command_list/addBackgroundColor.js":K6,"./command_list/addBackgroundImageAsset.js":Z6,"./command_list/addBackgroundImageGradient.js":Q6,"./command_list/addBackgroundImagePattern.js":d8,"./command_list/addCustomComponent.js":p8,"./command_list/addImage.js":g8,"./command_list/addImageAssetItem.js":v8,"./command_list/addLayer.js":b8,"./command_list/addLayerView.js":_8,"./command_list/addProject.js":w8,"./command_list/addSVGFilterAssetItem.js":$8,"./command_list/addText.js":T8,"./command_list/addTimelineCurrentProperty.js":E8,"./command_list/addTimelineItem.js":L8,"./command_list/addTimelineKeyframe.js":A8,"./command_list/addTimelineProperty.js":O8,"./command_list/addVideo.js":V8,"./command_list/addVideoAssetItem.js":N8,"./command_list/clipboard.copy.js":j8,"./command_list/clipboard.paste.js":H8,"./command_list/convert.flatten.path.js":W8,"./command_list/convert.no.transform.path.js":Y8,"./command_list/convert.normalize.path.js":q8,"./command_list/convert.path.operation.js":J8,"./command_list/convert.polygonal.path.js":e9,"./command_list/convert.simplify.path.js":i9,"./command_list/convert.smooth.path.js":n9,"./command_list/convert.stroke.to.path.js":a9,"./command_list/convertPasteText.js":l9,"./command_list/convertPath.js":h9,"./command_list/copy.path.js":u9,"./command_list/copyLayer.js":f9,"./command_list/copyTimelineProperty.js":m9,"./command_list/deleteTimelineKeyframe.js":y9,"./command_list/doubleclick.item.js":x9,"./command_list/downloadJSON.js":S9,"./command_list/downloadPNG.js":M9,"./command_list/downloadSVG.js":P9,"./command_list/drop.asset.js":C9,"./command_list/dropImageUrl.js":I9,"./command_list/editor.config.body.event.js":k9,"./command_list/fileDropItems.js":R9,"./command_list/firstTimelineItem.js":V9,"./command_list/group.item.js":F9,"./command_list/history.addLayer.js":B9,"./command_list/history.bring.forward.js":G9,"./command_list/history.bring.front.js":U9,"./command_list/history.clipboard.paste.js":X9,"./command_list/history.copyLayer.js":K9,"./command_list/history.group.item.js":Z9,"./command_list/history.moveLayer.js":Q9,"./command_list/history.moveLayerToTarget.js":tF,"./command_list/history.refreshSelection.js":rF,"./command_list/history.refreshSelectionProject.js":sF,"./command_list/history.removeLayer.js":oF,"./command_list/history.removeProject.js":cF,"./command_list/history.send.back.js":dF,"./command_list/history.send.backward.js":pF,"./command_list/history.setAttribute.js":gF,"./command_list/item.move.depth.down.js":vF,"./command_list/item.move.depth.first.js":bF,"./command_list/item.move.depth.last.js":_F,"./command_list/item.move.depth.up.js":wF,"./command_list/keymap.keydown.js":$F,"./command_list/lastTimelineItem.js":TF,"./command_list/load.json.js":EF,"./command_list/moveLayer.js":LF,"./command_list/moveLayerForItems.js":AF,"./command_list/moveSelectionToCenter.js":OF,"./command_list/newComponent.js":VF,"./command_list/nextTimelineItem.js":FF,"./command_list/open.editor.js":BF,"./command_list/pauseTimelineItem.js":GF,"./command_list/playTimelineItem.js":UF,"./command_list/prevTimelineItem.js":XF,"./command_list/recoverBooleanPath.js":KF,"./command_list/refreshArtboard.js":ZF,"./command_list/refreshElement.js":QF,"./command_list/refreshHistory.js":tN,"./command_list/refreshSelectedOffset.js":rN,"./command_list/removeAnimationItem.js":sN,"./command_list/removeLayer.js":oN,"./command_list/removeTimeline.js":cN,"./command_list/removeTimelineProperty.js":dN,"./command_list/resizeArtBoard.js":pN,"./command_list/rotateLayer.js":gN,"./command_list/same.height.js":vN,"./command_list/same.width.js":bN,"./command_list/saveJSON.js":_N,"./command_list/savePNG.js":wN,"./command_list/segment.delete.js":$N,"./command_list/segment.move.down.js":TN,"./command_list/segment.move.left.js":EN,"./command_list/segment.move.right.js":LN,"./command_list/segment.move.up.js":AN,"./command_list/select.all.js":ON,"./command_list/select.none.js":VN,"./command_list/selectTimelineItem.js":FN,"./command_list/setAttribute.js":BN,"./command_list/setTimelineOffset.js":GN,"./command_list/showExportView.js":UN,"./command_list/sort.bottom.js":XN,"./command_list/sort.center.js":KN,"./command_list/sort.left.js":ZN,"./command_list/sort.middle.js":QN,"./command_list/sort.right.js":tB,"./command_list/sort.top.js":rB,"./command_list/switch.path.js":sB,"./command_list/ungroup.item.js":oB,"./command_list/updateClipPath.js":cB,"./command_list/updateImage.js":dB,"./command_list/updateImageAssetItem.js":pB,"./command_list/updatePathItem.js":vB,"./command_list/updateResource.js":bB,"./command_list/updateUriList.js":_B,"./command_list/updateVideo.js":wB,"./command_list/updateVideoAssetItem.js":$B,"./command_list/model/update.js":TB},H1={};Object.entries(CB).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),H1[n]=e.default});function U1(n){n.loadCommands(H1)}var EB={key:"area.width",defaultValue:100,title:"Area Width to find layers fastly",description:"Set area width/height",type:"number"},IB=Object.freeze(Object.defineProperty({__proto__:null,default:EB},Symbol.toStringTag,{value:"Module"})),LB={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},kB=Object.freeze(Object.defineProperty({__proto__:null,default:LB},Symbol.toStringTag,{value:"Module"})),AB={key:"editing.css.itemType",defaultValue:"rect",title:"set item type for editing css",description:"set item type for editing css",type:"string"},RB=Object.freeze(Object.defineProperty({__proto__:null,default:AB},Symbol.toStringTag,{value:"Module"})),OB={key:"editing.draw.itemType",defaultValue:"path",title:"set item type for editing draw",description:"set item type for editing draw",type:"string"},zB=Object.freeze(Object.defineProperty({__proto__:null,default:OB},Symbol.toStringTag,{value:"Module"})),VB={key:"editing.mode.itemType",defaultValue:"select",title:"set item type for editing mode",description:"set item type for editing mode",type:"string"},DB=Object.freeze(Object.defineProperty({__proto__:null,default:VB},Symbol.toStringTag,{value:"Module"})),FB={key:"editing.mode",defaultValue:Ti.SELECT,title:"set editing mode for Editor",description:"set editing mode (select, append, draw, path)",type:"string"},NB=Object.freeze(Object.defineProperty({__proto__:null,default:FB},Symbol.toStringTag,{value:"Module"})),BB={key:"editing.svg.itemType",defaultValue:"svg-rect",title:"set item type for editing svg",description:"set item type for editing svg",type:"string"},jB=Object.freeze(Object.defineProperty({__proto__:null,default:BB},Symbol.toStringTag,{value:"Module"})),GB={key:"editor.design.mode",defaultValue:"design",title:"Editor Design Mode ",description:"Set editor's design mode",options:["design","item"],type:"select"},HB=Object.freeze(Object.defineProperty({__proto__:null,default:GB},Symbol.toStringTag,{value:"Module"})),UB={key:"editor.layout.mode",defaultValue:"all",title:"Editor Layout Mode ",description:"Set editor's layout mode",type:"string"},WB=Object.freeze(Object.defineProperty({__proto__:null,default:UB},Symbol.toStringTag,{value:"Module"})),XB={key:"fixed.angle",defaultValue:15,title:"fixed angle count",description:"Set fixed angle",type:"number"},YB=Object.freeze(Object.defineProperty({__proto__:null,default:XB},Symbol.toStringTag,{value:"Module"})),KB={key:"fixed.gradient.angle",defaultValue:1,title:"fixed gradient angle count",description:"Set fixed gradient angle",type:"number"},qB=Object.freeze(Object.defineProperty({__proto__:null,default:KB},Symbol.toStringTag,{value:"Module"})),ZB={key:"history.delay.ms",defaultValue:500,title:"history delay milliseconds",description:"Set history delay time",type:"number"},JB=Object.freeze(Object.defineProperty({__proto__:null,default:ZB},Symbol.toStringTag,{value:"Module"})),QB={key:"horizontal.line",defaultValue:[],title:"horizontal guide line for snap ",description:"horizontal guide line for snap",type:"array"},ej=Object.freeze(Object.defineProperty({__proto__:null,default:QB},Symbol.toStringTag,{value:"Module"})),tj={key:"horizontal.line.selected.index",defaultValue:-1,title:"selected horizontal guide line index",description:"selected horizontal guide line index",type:"number"},ij=Object.freeze(Object.defineProperty({__proto__:null,default:tj},Symbol.toStringTag,{value:"Module"})),rj={key:"set.drag.path.area",defaultValue:!1,title:"Drag path area",description:"Drag path area",type:"boolean",storage:"none"},nj=Object.freeze(Object.defineProperty({__proto__:null,default:rj},Symbol.toStringTag,{value:"Module"})),sj={key:"set.move.control.point",defaultValue:!1,title:"Moving Control Point",description:"Moving Control Point",type:"boolean",storage:"none"},aj=Object.freeze(Object.defineProperty({__proto__:null,default:sj},Symbol.toStringTag,{value:"Module"})),oj={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},lj=Object.freeze(Object.defineProperty({__proto__:null,default:oj},Symbol.toStringTag,{value:"Module"})),cj={key:"show.outline",defaultValue:!1,title:"Show outline",description:"Set outline visibility to on",type:"boolean"},hj=Object.freeze(Object.defineProperty({__proto__:null,default:cj},Symbol.toStringTag,{value:"Module"})),dj={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},uj=Object.freeze(Object.defineProperty({__proto__:null,default:dj},Symbol.toStringTag,{value:"Module"})),pj={key:"show.ruler",defaultValue:!0,title:"Show ruler",description:"Set ruler visibility to on",type:"boolean"},fj=Object.freeze(Object.defineProperty({__proto__:null,default:pj},Symbol.toStringTag,{value:"Module"})),gj={key:"snap.distance",defaultValue:3,title:"Snap distance between objects",description:"Set snap distance",type:"number"},mj=Object.freeze(Object.defineProperty({__proto__:null,default:gj},Symbol.toStringTag,{value:"Module"})),vj={key:"snap.grid",defaultValue:50,title:"Snap grid size between objects",description:"Set snap grid size",type:"number"},yj=Object.freeze(Object.defineProperty({__proto__:null,default:vj},Symbol.toStringTag,{value:"Module"})),bj={key:"vertical.line",defaultValue:[],title:"vertical guide line for snap ",description:"vertical guide line for snap",type:"array"},xj=Object.freeze(Object.defineProperty({__proto__:null,default:bj},Symbol.toStringTag,{value:"Module"})),_j={key:"vertical.line.selected.index",defaultValue:-1,title:"selected vertical guide line index",description:"selected vertical guide line index",type:"number"},Sj=Object.freeze(Object.defineProperty({__proto__:null,default:_j},Symbol.toStringTag,{value:"Module"})),wj=Object.values({"./config_list/area.width.js":IB,"./config_list/debug.mode.js":kB,"./config_list/editing.css.itemType.js":RB,"./config_list/editing.draw.itemType.js":zB,"./config_list/editing.mode.itemType.js":DB,"./config_list/editing.mode.js":NB,"./config_list/editing.svg.itemType.js":jB,"./config_list/editor.design.mode.js":HB,"./config_list/editor.layout.mode.js":WB,"./config_list/fixed.angle.js":YB,"./config_list/fixed.gradient.angle.js":qB,"./config_list/history.delay.ms.js":JB,"./config_list/horizontal.line.js":ej,"./config_list/horizontal.line.selected.index.js":ij,"./config_list/set.drag.path.area.js":nj,"./config_list/set.move.control.point.js":aj,"./config_list/show.left.panel.js":lj,"./config_list/show.outline.js":hj,"./config_list/show.right.panel.js":uj,"./config_list/show.ruler.js":fj,"./config_list/snap.distance.js":mj,"./config_list/snap.grid.js":yj,"./config_list/vertical.line.js":xj,"./config_list/vertical.line.selected.index.js":Sj}).map(n=>n.default);function Mj(n){wj.forEach(e=>{n.registerConfig(e)})}class yu extends Vr{static parse(e){return new yu(e)}getDefaultObject(e){return super.getDefaultObject(P({itemType:"selector",selector:"",properties:[]},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("selector","properties"))}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";"}return e.value.toString()+" !important;"}toPropertyString(){return this.json.properties.map(e=>{if(this.isMultiStyle(e.key))return this.getMultiStyleString(e);var t=e.value.toString();if(t){var i=e.key;return i==="x"?i="left":i==="y"&&(i="top"),`${i}: ${t} !important;`}else return""}).join(` + `},generateSVG(s,e){return s.replaceLocalUrltoRealUrl(s.svg.render(e))}};function $p(s,e,t="image/png"){var r=ge.create("canvas"),{width:i,height:a}=s;r.resize({width:i,height:a}),r.drawImage(s),e&&e(r.toDataURL(t))}var tE={command:"downloadPNG",execute:function(s){const e=s.context.selection.current;if(e){const t=Bc.generateSVG(s,e).trim(),r="data:image/svg+xml;base64,"+window.btoa(t),i=e.id;Fo({local:r},(a,n)=>{$p(n,o=>{Fc(o,i)})})}}},rE=Object.freeze(Object.defineProperty({__proto__:null,default:tE},Symbol.toStringTag,{value:"Module"})),iE={command:"downloadSVG",execute:function(s){const e=s.context.selection.current;if(e){var t=Bc.generateSVG(s,e).trim(),r="data:image/svg+xml;base64,"+window.btoa(t),i=e.id;Fc(r,i)}}},sE=Object.freeze(Object.defineProperty({__proto__:null,default:iE},Symbol.toStringTag,{value:"Module"})),aE={command:"drop.asset",execute:async function(s,e,t=null){if(e.color)s.context.commands.emit("addBackgroundColor",e.color,t);else if(e.gradient)s.context.commands.emit("addBackgroundImageGradient",e.gradient,t);else if(e.pattern)s.context.commands.emit("addBackgroundImagePattern",e.pattern,t);else if(e.imageUrl)s.context.commands.emit("addBackgroundImageAsset",e.imageUrl,t);else if(e.asset){const r=await s.storageManager.getCustomAsset(e.asset.id);r&&s.context.commands.emit("addArtBoard",r,e.asset.center)}Fr(s)}},nE=Object.freeze(Object.defineProperty({__proto__:null,default:aE},Symbol.toStringTag,{value:"Module"})),oE={command:"dropImageUrl",execute:function(s,e){Fo({local:e},t=>{s.context.commands.emit("addImage",b({src:t.local},t))})}},lE=Object.freeze(Object.defineProperty({__proto__:null,default:oE},Symbol.toStringTag,{value:"Module"})),cE={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(s){const e=ge.create(s.context.config.get("bodyEvent").target);s.context.config.init("onMouseMovepageContainer",e)}},hE=Object.freeze(Object.defineProperty({__proto__:null,default:cE},Symbol.toStringTag,{value:"Module"})),dE={command:"fileDropItems",execute:function(s,e=[]){s.context.commands.emit("updateResource",e)}},uE=Object.freeze(Object.defineProperty({__proto__:null,default:dE},Symbol.toStringTag,{value:"Module"}));function As(s,e){if(it(e)){var[t,r,i,a]=e.split(":");return t=parseInt(t,10),r=parseInt(r,10),i=parseInt(i,10),a=parseInt(a,10),t*3600+r*60+i+a*(1/s)}else if(ft(e))return e/s;return 0}function cr(s,e){var t=Math.floor(e/3600),r=Math.floor(e/60%60),i=Math.floor(e%60),a=Math.round((e-Math.floor(e))*s);return a===s&&(a=0,i+=1,i===60&&(r+=1,r===60&&(t+=1))),[t,r,i,a].map(n=>(n+"").padStart(2,"0")).join(":")}function _p(s,e,t=null){return cr(s,As(s,e)-As(s,t))}function pE(s){var e={id:0,start:0,speed:s.speed||1,elapsed:s.elapsed||0,duration:s.duration||0,iterationStartCount:1,iterationCount:s.iterationCount||Number.MAX_SAFE_INTEGER,direction:s.direction||"normal",log:[],logIndex:0,tick:s.tick||(()=>{}),startCallback:s.start||(()=>{}),endCallback:s.end||(()=>{}),firstCallback:s.first||(()=>{}),lastCallback:s.last||(()=>{})};const t=()=>{if(e.direction==="normal")return!0;if(e.direction==="reverse")return!1;if(e.direction==="alternate")return e.iterationStartCount%2===1;if(e.direction==="alternate-reverse")return e.iterationStartCount%2===0},r=d=>t()?d:1-d,i=d=>{var v=!1;e.start===null&&(e.start=d,v=!0);const g=d-e.start;e.elapsed+=g*e.speed,e.start=d,e.elapsed>e.duration&&(e.elapsed=e.duration);var y=r(e.elapsed/e.duration)*e.duration;v&&e.startCallback(y,e),e.log[e.logIndex++]={elapsed:y,dt:e.lastTime-y},e.lastTime=y,e.tick(y,e),e.elapsed===e.duration?n():a()},a=()=>{e.id=window.requestAnimationFrame(i)},n=()=>{e.endCallback(e.elapsed,e),e.iterationStartCount++,e.iterationStartCount>e.iterationCount?(e.lastCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)):(e.start=null,e.elapsed=0,a())},o=(d={})=>{e.start=null,e.iterationStartCount=1,e.log=[],e.lastTime=0,e.logIndex=0,ft(d.elapsed)&&(e.elapsed=d.elapsed),ft(d.speed)&&(e.speed=d.speed),ft(d.duration)&&(e.duration=d.duration),ft(d.iterationCount)&&(e.iterationCount=d.iterationCount||Number.MAX_SAFE_INTEGER),it(d.direction)&&(e.direction=d.direction),de(d.tick)&&(e.tick=d.tick),de(d.start)&&(e.startCallback=d.start),de(d.end)&&(e.endCallback=d.end),de(d.first)&&(e.firstCallback=d.first),de(d.last)&&(e.lastCallback=d.last),de(d.stop)&&(e.stopCallback=d.stop),e.firstCallback(e.elapsed,e),a()},l=()=>{e.stopCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)},c=d=>{e.elapsed=d,e.tick(e.elapsed,e)};return{play:o,stop:l,tick:i,first:()=>{c(0)},last:()=>{c(e.duration)},seek:c,timer:e}}var gE={command:"firstTimelineItem",execute:function(s){Dr(s,(e,t)=>{var r=e.getSelectedTimelineFirstTime();e.setTimelineCurrentTime(cr(t.fps,r)),e.seek(),s.emit("playTimeline")})}},fE=Object.freeze(Object.defineProperty({__proto__:null,default:gE},Symbol.toStringTag,{value:"Module"})),mE={command:"group.item",execute:function(s,e={}){if(s.context.selection.length===0)return;const t=s.context.selection.currentProject;if(t){t.generateListNumber();const r=s.context.selection.map(a=>({depth:a.depth,item:a}));r.sort((a,n)=>a.depth===n.depth?a.no>n.no?-1:1:a.depth>n.depth?1:-1);const i=s.createModel(b(b({itemType:"rect"},s.context.selection.itemRect),e));r[0].item.insertAfter(i),r.forEach(({item:a})=>{i.appendChild(a)}),s.context.selection.select(i),s.emit("refreshAll")}}},vE=Object.freeze(Object.defineProperty({__proto__:null,default:mE},Symbol.toStringTag,{value:"Module"})),yE={command:"history.addLayer",description:"add layer in history ",execute:function(s,e,t,r=!0,i){s.context.commands.emit("addLayer",t,r,i),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[t,r,i],undoValues:[t.id]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:e}){s.context.commands.emit("addLayer",...e),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:e}){const t=e;s.context.selection.itemsByIds(t).forEach(i=>{i&&i.remove()}),s.nextTick(()=>{s.context.selection.empty(),s.emit("refreshAll")})}},bE=Object.freeze(Object.defineProperty({__proto__:null,default:yE},Symbol.toStringTag,{value:"Module"})),xE={command:"history.bring.forward",description:"bring forward",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={},o=null;if(r.isLast){if(o=a.next,!o)return;o.enableHasChildren()?(o.appendChild(r),n=r.hierarchy):(o.insertAfter(r),n=r.hierarchy)}else r.parent.bringForward(r.id),n=r.hierarchy;s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle")),r.parent.attrsWithId("children"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e],undoValues:[t]}){const r=s.get(e.id),i=s.get(e.parentId),a=s.get(t.parentId);i.insertChild(r,e.index),r.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle")),i.attrsWithId("children")))},undo:function(s,{currentValues:[e],undoValues:[t]}){const r=t,i=s.get(r.id),a=s.get(r.parentId),n=s.get(e.parentId),o=r.index;a.insertChild(i,o),i.reset(t.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},$E=Object.freeze(Object.defineProperty({__proto__:null,default:xE},Symbol.toStringTag,{value:"Module"})),_E={command:"history.bring.front",description:"bring front",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierachy,a=r.parent;let n={};r.isLast||(r.parent.bringFront(r.id),n=r.hierarchy,s.context.commands.emit("setAttribute",b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()}))},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e]}){const t=e,r=s.get(t.id),i=s.get(t.parentId),a=t.index;i.insertChild(r,a),s.context.commands.emit("setAttribute",b(b({},r.attrsWithId("x","y","angle")),i.attrsWithId("children")))}},SE=Object.freeze(Object.defineProperty({__proto__:null,default:_E},Symbol.toStringTag,{value:"Module"})),PE={command:"history.clipboard.paste",description:"paste in clipboard ",description_ko:["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "],execute:async function(s,e,t=void 0,r=!0){const i=t||s.context.clipboard.last;if(i.type==no.COPY){const a=i.data,n=await s.json.renderAll(a.map(u=>s.get(u))),o=[],l={},c={};let h={};n.forEach(u=>{const d=u.referenceId,v=s.get(d);c[v.parentId]=v.parent;const g=s.createModel(u);g.renameWithCount(),v.insertAfter(g),o.push(g.id),l[g.id]=u,h[g.id]=g.toCloneObject()}),Object.values(c).forEach(u=>{h=b(b({},h),u.attrsWithId("children"))}),s.context.commands.emit("setAttribute",h),s.nextTick(()=>{s.context.selection.select(...o),r&&s.context.history.add(e,this,{currentValues:[i],undoValues:[o,s.context.selection.ids]}),s.context.history.saveSelection()})}},redo:function(s,{currentValues:[e]}){s.context.commands.emit("history.clipboard.paste","paste",e,!1)},undo:function(s,{currentValues:[e],undoValues:[t,r]}){if(e.type===no.COPY){const i={};t.forEach(n=>{const o=s.get(n);i[o.parentId]=o.parent,o&&o.remove()});let a={};Object.values(i).forEach(n=>{a=b(b({},a),n.attrsWithId("children"))}),s.context.selection.select(...r),s.context.commands.emit("setAttribute",a)}}},wE=Object.freeze(Object.defineProperty({__proto__:null,default:PE},Symbol.toStringTag,{value:"Module"})),CE={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(s,e,t=[]){let r=t.map(c=>s.get(c)).filter(Boolean).map(c=>c.id);if(r.length||(r=s.context.selection.ids),!r.length)return;const i=await s.json.renderAll(r.map(c=>s.get(c))),a=[],n={},o={};let l={};i.forEach(c=>{const h=c.referenceId,u=s.get(h);o[u.parentId]=u.parent;const d=s.createModel(c);d.renameWithCount(),u.insertAfter(d),a.push(d.id),n[d.id]=c,l[d.id]=d.toCloneObject()}),Object.values(o).forEach(c=>{l=b(b({},l),c.attrsWithId("children"))}),s.context.commands.emit("setAttribute",l),s.nextTick(()=>{s.context.selection.select(...a),s.context.history.add(e,this,{currentValues:[r],undoValues:[a,s.context.selection.ids]}),s.context.history.saveSelection()})},redo:function(s,{currentValues:[e]}){s.context.commands.emit("copyLayer",e)},undo:function(s,{undoValues:[e,t]}){const r={};e.forEach(a=>{const n=s.get(a);r[n.parentId]=n.parent,n&&n.remove()});let i={};Object.values(r).forEach(a=>{i=b(b({},i),a.attrsWithId("children"))}),s.context.selection.select(...t),s.context.commands.emit("setAttribute",i)}},TE=Object.freeze(Object.defineProperty({__proto__:null,default:CE},Symbol.toStringTag,{value:"Module"})),kE={command:"history.group.item",description:"History Group Item",execute:function(s,e="selection"){var a;const t=s.context.selection.ids,r=(a=s.context.selection.currentProject)==null?void 0:a.id,i=s.context.history.selectedIds;yc(t,i)||s.context.history.add(e,this,{currentValues:{ids:t,projectId:r},undoValues:{ids:i,projectId:r}})},redo:function(s,{currentValues:[e,t]}){},undo:function(s,{undoValues:[e,t]}){}},ME=Object.freeze(Object.defineProperty({__proto__:null,default:kE},Symbol.toStringTag,{value:"Module"})),IE={command:"history.moveLayer",description:"move layer in world ",execute:function(s,e,t=[],r=[0,0,0]){Gt(t)===!1&&(t=[t]);const i=s.context.selection.itemsByIds(t),a={},n={};i.forEach(o=>{const l=o.absoluteMove(r),c=o.attrs("x","y");a[o.id]=l,n[o.id]=c}),s.context.commands.emit("setAttribute",n),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[t,r],undoValues:[a]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e,t]}){const r=s.context.selection.itemsByIds(e),i={};r.forEach(a=>{a.absoluteMove(t);const n=a.attrs("x","y");i[a.id]=n}),s.context.commands.emit("setAttribute",i)},undo:function(s,{undoValues:[e]}){s.context.commands.emit("setAttribute",e)}},EE=Object.freeze(Object.defineProperty({__proto__:null,default:IE},Symbol.toStringTag,{value:"Module"})),LE={command:"history.moveLayerToTarget",description:"move layer to target in world ",execute:function(s,e,t,r,i=[0,0,0],a=Lr.APPEND_CHILD){const n=s.get(t)||t,o=n.parent,l=s.get(r)||s.context.selection.currentProject,c=n.hierachy;i&&n.absoluteMove(i);let h={};a===Lr.APPEND_CHILD?(l.appendChild(n),h=l.attrsWithId("children")):a===Lr.INSERT_BEFORE?(l.insertBefore(n),h=l.parent.attrsWithId("children")):a===Lr.INSERT_AFTER&&(l.insertAfter(n),h=l.parent.attrsWithId("children")),s.context.commands.emit("setAttribute",b(b(b({},n.attrsWithId("x","y","angle","parentId")),h),o&&o.isNot("project")?o.attrsWithId("children"):{})),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n.hierachy],undoValues:[c,n.parentId]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e,t]}){const r=e,i=s.get(r.id),a=s.get(r.parentId),n=s.get(t),o=r.index;a.insertChild(i,o),i.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},VE=Object.freeze(Object.defineProperty({__proto__:null,default:LE},Symbol.toStringTag,{value:"Module"})),OE={command:"history.refreshSelection",description:"save selection in history ",description_ko:"Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(s,e="selection"){var a;const t=s.context.selection.ids,r=(a=s.context.selection.currentProject)==null?void 0:a.id,i=s.context.history.selectedIds;yc(t,i)||(s.context.history.add(e,this,{currentValues:[t,r],undoValues:[i,r]}),this.nextAction(s))},nextAction(s){s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e,t]}){s.context.selection.selectProject(t),s.context.selection.select(...e),this.nextAction(s)},undo:function(s,{undoValues:[e,t]}){s.context.selection.selectProject(t),s.context.selection.select(...e),this.nextAction(s)}},RE=Object.freeze(Object.defineProperty({__proto__:null,default:OE},Symbol.toStringTag,{value:"Module"})),jE={command:"history.refreshSelectionPorject",description:"save project selection in history ",description_ko:"Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(s,e="selection",t){var a;const r=[t],i=[(a=s.context.selection.currentProject)==null?void 0:a.id];yc(r,i)||(s.context.selection.selectProject(t),s.context.history.add(e,this,{currentValues:r,undoValues:i}),this.nextAction(s))},nextAction(s){s.nextTick(()=>{s.emit("refreshAll"),s.emit("refreshProjectList")})},redo:function(s,{currentValues:[e]}){s.context.selection.selectProject(e),this.nextAction(s)},undo:function(s,{undoValues:[e]}){s.context.selection.selectProject(e),this.nextAction(s)}},zE=Object.freeze(Object.defineProperty({__proto__:null,default:jE},Symbol.toStringTag,{value:"Module"}));function Sp(s=[]){return s.filter(e=>{let t=0;return e.path.forEach(r=>{t+=s.filter(i=>i.id===r.id).length?1:0}),t===1})}var AE={command:"history.removeLayer",description:"remove layer",execute:function(s,e,t=void 0){let r=s.context.selection.itemsByIds(t||s.context.selection.ids);r=Sp(r);const i=r.map(n=>n.id);s.context.modelManager.markRemove(i);const a=r.map(n=>n.parentId);r.forEach(n=>{n.remove(),s.context.selection.removeById(n.id)}),s.context.history.add(e,this,{currentValues:[i,a],undoValues:i}),s.nextTick(()=>{s.context.selection.removeById(i),a.forEach(n=>{s.context.commands.emit("update",n,{changedChildren:!0})}),s.emit("refreshAll"),s.emit("removeGuideLine"),s.nextTick(()=>{s.context.history.saveSelection()})})},redo:function(s,{currentValues:e}){const t=e[0];let r=s.context.selection.itemsByIds(t||s.context.selection.ids);r=Sp(r),s.context.modelManager.markRemove(r.map(i=>i.id)),r.forEach(i=>i.remove()),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:e}){s.context.modelManager.unmarkRemove(e),s.nextTick(()=>{s.emit("refreshAll")})}},DE=Object.freeze(Object.defineProperty({__proto__:null,default:AE},Symbol.toStringTag,{value:"Module"})),FE={command:"history.removeProject",description:"remove project",execute:function(s,e,t){const r=s.context.modelManager.markRemoveProject(t);s.context.history.add(e,this,{currentValues:[t],undoValues:[t,r]}),s.nextTick(()=>{s.context.selection.selectProject(s.context.modelManager.projects[0]),s.emit("refreshAll"),s.emit("removeGuideLine"),s.nextTick(()=>{s.context.history.saveSelection()})})},redo:function(s,{currentValues:[e]}){s.context.modelManager.markRemoveProject(e),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:[e,t]}){s.context.modelManager.unmarkRemoveProject(e,t),s.nextTick(()=>{s.context.selection.selectProject(e),s.emit("refreshAll")})}},BE=Object.freeze(Object.defineProperty({__proto__:null,default:FE},Symbol.toStringTag,{value:"Module"})),NE={command:"history.send.back",description:"send back",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={};r.isFirst()||(r.parent.sendBack(r.id),n=r.hierarchy,s.context.commands.emit("setAttribute",b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()}))},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e]}){const t=e,r=s.get(t.id),i=s.get(t.parentId),a=t.index;i.insertChild(r,a),s.context.commands.emit("setAttribute",b(b({},r.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))}},GE=Object.freeze(Object.defineProperty({__proto__:null,default:NE},Symbol.toStringTag,{value:"Module"})),HE={command:"history.send.backward",description:"send backward",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={},o=null;if(r.isFirst){if(o=a.prev,!o)return;o.insertBefore(r),n=r.hierarchy}else r.parent.sendBackward(r.id),n=r.hierarchy;s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId")),r.parent.attrsWithId("children"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e],undoValues:[t]}){const r=s.get(e.id),i=s.get(e.parentId),a=s.get(t.parentId);i.insertChild(r,e.index),r.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(s,{currentValues:[e],undoValues:[t]}){const r=t,i=s.get(r.id),a=s.get(r.parentId),n=s.get(e.parentId),o=r.index;a.insertChild(i,o),i.reset(t.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},UE=Object.freeze(Object.defineProperty({__proto__:null,default:HE},Symbol.toStringTag,{value:"Module"})),WE={command:"history.setAttribute",execute:function(s,e,t={},r={origin:"*"}){s.context.commands.emit("setAttribute",t,r),s.context.history.add(e,this,{currentValues:[t],undoValues:s.context.history.getUndoValues(t)}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:e}){s.context.commands.emit("setAttribute",...e),s.nextTick(()=>{s.context.selection.reselect(),s.emit("refreshAll")})},undo:function(s,{undoValues:e}){const t=Object.keys(e);s.context.selection.itemsByIds(t).forEach(i=>{i.reset(e[i.id])}),s.context.selection.reselect(),s.nextTick(()=>{s.emit("refreshAll")})}},XE=Object.freeze(Object.defineProperty({__proto__:null,default:WE},Symbol.toStringTag,{value:"Module"})),YE={command:"item.move.depth.down",execute:function(s){const e=s.context.selection.current;e&&e.orderPrev(),Fr(s)}},KE=Object.freeze(Object.defineProperty({__proto__:null,default:YE},Symbol.toStringTag,{value:"Module"})),ZE={command:"item.move.depth.first",execute:function(s){const e=s.context.selection.current;e&&e.orderFirst(),Fr(s)}},qE=Object.freeze(Object.defineProperty({__proto__:null,default:ZE},Symbol.toStringTag,{value:"Module"})),QE={command:"item.move.depth.last",execute:function(s){const e=s.context.selection.current;e&&e.orderLast(),Fr(s)}},JE=Object.freeze(Object.defineProperty({__proto__:null,default:QE},Symbol.toStringTag,{value:"Module"})),eL={command:"item.move.depth.up",execute:function(s){const e=s.context.selection.current;e&&e.orderNext(),Fr(s)}},tL=Object.freeze(Object.defineProperty({__proto__:null,default:eL},Symbol.toStringTag,{value:"Module"})),rL={command:"keymap.keydown",execute:function(s,e){s.context.keyboardManager.add(e.code,e.keyCode,e),s.context.shortcuts&&s.context.shortcuts.execute(e,"keydown")}},iL=Object.freeze(Object.defineProperty({__proto__:null,default:rL},Symbol.toStringTag,{value:"Module"})),sL={command:"lastTimelineItem",execute:function(s){Dr(s,(e,t)=>{var r=e.getSelectedTimelineLastTime();e.setTimelineCurrentTime(cr(t.fps,r)),e.seek(),s.emit("playTimeline")})}},aL=Object.freeze(Object.defineProperty({__proto__:null,default:sL},Symbol.toStringTag,{value:"Module"})),nL={command:"load.json",execute:function(s,e,t={origin:"*"}){s.context.modelManager.load(e,t),Fr(s)}},oL=Object.freeze(Object.defineProperty({__proto__:null,default:nL},Symbol.toStringTag,{value:"Module"})),lL={command:"moveLayer",description:"move layer by keydown with matrix ",execute:function(s,e=0,t=0){const r=[e,t,0];s.context.selection.items.forEach(i=>{i.absoluteMove(r)}),s.context.commands.executeCommand("setAttribute","item move down",s.context.selection.pack("x","y")),s.nextTick(()=>{s.context.selection.reselect()})}},cL=Object.freeze(Object.defineProperty({__proto__:null,default:lL},Symbol.toStringTag,{value:"Module"})),hL={command:"moveLayerForItems",description:"mova layer by multi items ",execute:function(s,e=[]){const t={};e.forEach(r=>{r.item.absoluteMove(r.dist),t[r.item.id]=r.item.attrs("x","y")}),s.context.commands.emit("history.setAttribute","item move",t),s.nextTick(()=>{s.context.selection.reselect()})}},dL=Object.freeze(Object.defineProperty({__proto__:null,default:hL},Symbol.toStringTag,{value:"Module"})),uL={command:"moveSelectionToCenter",description:"Move selection project or artboards to center on Viewport",execute:function(s,e=!0){var r,i,a,n,o;let t=[];(r=s.context.selection)!=null&&r.isEmpty?((a=(i=s.context.selection)==null?void 0:i.currentProject)==null?void 0:a.layers.length)>0?t=qa((n=s.context.selection)==null?void 0:n.currentProject.layers):t=xt(0,0,100,100):t=qa((o=s.context.selection)==null?void 0:o.items),s.context.commands.emit("moveToCenter",t,e)}},pL=Object.freeze(Object.defineProperty({__proto__:null,default:uL},Symbol.toStringTag,{value:"Module"}));function gL(s,e,t,r=!0,i=void 0){e==="svg-textpath"?t=se(b({},t),{fontSize:t.height,textLength:"100%",d:K.makeLine(0,t.height,t.width,t.height).d}):e==="svg-circle"?(e="svg-path",t=se(b({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:K.makeCircle(0,0,t.width,t.height).d})):e==="svg-rect"?(e="svg-path",t=se(b({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:K.makeRect(0,0,t.width,t.height).d})):e==="text"?t=b({width:300,height:50},t):e==="artboard"&&(t=se(b({},t),{backgroundColor:"white"}));const a=b({itemType:e},t),n=s.createModel(a);s.context.commands.executeCommand("moveLayerToTarget",`add layer - ${e}`,n,i),s.nextTick(()=>{s.emit("appendLayer",n),r&&s.context.selection.select(n)})}var fL=Object.freeze(Object.defineProperty({__proto__:null,default:gL},Symbol.toStringTag,{value:"Module"})),mL={command:"nextTimelineItem",execute:function(s){Dr(s,(e,t)=>{var r=e.getSelectedTimelineNextTime();e.setTimelineCurrentTime(cr(t.fps,r)),e.seek(),s.emit("playTimeline")})}},vL=Object.freeze(Object.defineProperty({__proto__:null,default:mL},Symbol.toStringTag,{value:"Module"})),yL={command:"open.editor",description:"Open custom editor for item when doubleclick is fired",execute:function(s,e){if(!(!e&&s.context.selection.isOne===!1)&&(e=e||s.context.selection.current,e)){if(e.editablePath)s.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,isControl:!0,disableCurve:!0,d:e.editablePath,changeEvent:a=>{s.context.commands.executeCommand("setAttribute","change editable path",s.context.selection.packByValue(b({},e.recoverEditablePath(a.d)),[e.id])),s.nextTick(()=>{s.context.stateManager.isPointerUp&&s.context.commands.emit("recoverBooleanPath")})}}),s.emit("hideSelectionToolView");else if(e.d)s.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,d:e.absolutePath().d,changeEvent:a=>{const n=s.context.selection.current;if(n.isSVG()&&n.isNot("svg-path")){const o=n.toSVGPath(),l=s.createModel(b({itemType:"svg-path"},o));s.context.selection.select(l),n.insertAfter(l),s.nextTick(()=>{s.context.commands.emit("removeLayer",[n.id]),s.context.commands.emit("updatePathItem",a)})}else s.context.commands.emit("updatePathItem",a),s.nextTick(()=>{s.context.stateManager.isPointerUp&&s.context.commands.emit("recoverBooleanPath")})}}),s.emit("hideSelectionToolView");else if(e.clipPath){var t=Pe.parseStyle(e.clipPath);if(t.type==="path"){var r=e.absolutePath(e.clipPathString).d,i=r?"modify":"path";s.emit("showPathEditor",i,{changeEvent:a=>{const n=e.invertPath(a.d).d;s.context.commands.executeCommand("setAttribute","change clip-path",s.context.selection.packByValue({clipPath:`path(${n})`}))},current:e,d:r}),s.emit("hideSelectionToolView")}else t.type==="svg"||s.emit("showClippathEditorView")}}}},bL=Object.freeze(Object.defineProperty({__proto__:null,default:yL},Symbol.toStringTag,{value:"Module"})),xL={command:"pauseTimelineItem",execute:function(s){s.timer&&s.timer.stop()}},$L=Object.freeze(Object.defineProperty({__proto__:null,default:xL},Symbol.toStringTag,{value:"Module"})),_L={command:"playTimelineItem",description:"Play button action",execute:function(s,e=1,t=1,r="normal"){s.context.selection.empty(),Dr(s,(i,a)=>{var n=i.getSelectedTimelineLastTime();s.timer?s.timer.stop():s.timer=pE({elapsed:a.currentTime*1e3,speed:e,duration:n*1e3,iterationCount:t,direction:r}),s.timer.play({duration:n*1e3,elapsed:a.currentTime*1e3,speed:e,iterationCount:t,direction:r,tick:o=>{i.seek(cr(a.fps,o/1e3)),s.emit("playTimeline")},last:o=>{i.seek(cr(a.fps,o/1e3)),s.emit("playTimeline"),s.nextTick(()=>{s.emit("stopTimeline")})},stop:o=>{i.stop(cr(a.fps,o/1e3)),s.emit("stopTimeline")}})})}},SL=Object.freeze(Object.defineProperty({__proto__:null,default:_L},Symbol.toStringTag,{value:"Module"})),PL={command:"prevTimelineItem",execute:function(s){Dr(s,(e,t)=>{var r=e.getSelectedTimelinePrevTime();e.setTimelineCurrentTime(cr(t.fps,r)),e.seek(),s.emit("playTimeline")})}},wL=Object.freeze(Object.defineProperty({__proto__:null,default:PL},Symbol.toStringTag,{value:"Module"})),CL={command:"recoverBooleanPath",description:"recover box rectangle for boolean path result",execute:function(s){const e=s.context.selection.current;let t;if(e&&e.isBooleanItem?t=e.parent:e&&e.is("boolean-path")&&(t=e),t){const r=typeof e.isBooleanItem=="boolean"&&e.isBooleanItem,i=t.d;if(!i)return;const a=t.layers.map(c=>({item:c,matrix:c.matrix})),n=t.updatePath(i);delete n.d,t.reset(n),a.forEach(c=>{t.resetMatrix(c.item)});const o=[...a.map(c=>c.item.id),t.id],l=s.context.selection.packByIds(o,"x","y","width","height");s.context.commands.executeCommand("setAttribute","fit boolean path",l,{origin:"*",doNotChildrenScale:r})}}},TL=Object.freeze(Object.defineProperty({__proto__:null,default:CL},Symbol.toStringTag,{value:"Module"})),kL={command:"refreshArtboard",execute:function(s){const e=s.createCommandMaker();e.emit("refreshLayerTreeView"),e.emit("refreshAllCanvas"),e.emit(Mt),e.emit("refreshAllElementBoundSize"),e.emit(Oe),e.run()}},ML=Object.freeze(Object.defineProperty({__proto__:null,default:kL},Symbol.toStringTag,{value:"Module"}));function Pp(s,e){var t;e.hasLayout()?s.emit("refreshElementBoundSize",e):e&&(e.isLayoutItem()||((t=e.parent)==null?void 0:t.is("boolean-path")))?s.emit("refreshElementBoundSize",e.parent):s.emit("refreshElementBoundSize",e)}var IL={command:"refreshElement",execute:function(s,e,t=!0){const r=s.createCommandMaker();Gt(e)?(t&&r.emit("refreshAllCanvas"),r.emit(Mt,e),e.forEach(i=>{Pp(r,i)})):(t&&e&&e.hasChangedField("children","changedChildren","parentId")&&r.emit("refreshAllCanvas"),r.emit(Mt,e),Pp(r,e)),r.run()}},EL=Object.freeze(Object.defineProperty({__proto__:null,default:IL},Symbol.toStringTag,{value:"Module"}));function LL(s){s.context.commands.emit("saveJSON")}var VL=Object.freeze(Object.defineProperty({__proto__:null,default:LL},Symbol.toStringTag,{value:"Module"})),OL={command:"refreshSelectedOffset",execute:function(s){var e=s.timeline.items[0];e&&s.emit("refreshOffsetValue",e)}},RL=Object.freeze(Object.defineProperty({__proto__:null,default:OL},Symbol.toStringTag,{value:"Module"})),jL={command:"removeAnimationItem",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.removeAnimationItem(e),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("removeAnimation"))}},zL=Object.freeze(Object.defineProperty({__proto__:null,default:jL},Symbol.toStringTag,{value:"Module"})),AL={command:"removeLayer",execute:function(s,e=void 0){const t=e||s.context.selection.ids,r=[];s.context.selection.itemsByIds(t).forEach(i=>{r.push(i.id),i.remove()}),s.context.selection.removeById(r),s.nextTick(()=>{s.emit("refreshAll")})}},DL=Object.freeze(Object.defineProperty({__proto__:null,default:AL},Symbol.toStringTag,{value:"Module"})),FL={command:"removeTimeline",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.removeTimeline(e),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset"))}},BL=Object.freeze(Object.defineProperty({__proto__:null,default:FL},Symbol.toStringTag,{value:"Module"})),NL={command:"removeTimelineProperty",execute:function(s,e,t){const r=s.context.selection.currentProject;r&&(r.removeTimelineProperty(e,t),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset"))}},GL=Object.freeze(Object.defineProperty({__proto__:null,default:NL},Symbol.toStringTag,{value:"Module"}));function HL(s,e=""){var t=s.context.selection.current;if(t&&t.is("artboard")){if(!e.trim())return;var[r,i]=e.split("x");r=+r,i=+i,t.resize(r,i),s.context.selection.select(t),Fr(s)}}var UL=Object.freeze(Object.defineProperty({__proto__:null,default:HL},Symbol.toStringTag,{value:"Module"})),WL={command:"rotateLayer",description:"rotate layer by keydown with matrix ",execute:function(s,e=0){s.context.commands.executeCommand("setAttribute","change rotate",s.context.selection.packByValue({angle:s.context.selection.current.angle+e}))}},XL=Object.freeze(Object.defineProperty({__proto__:null,default:WL},Symbol.toStringTag,{value:"Module"})),YL={command:"same.height",description:"fit at the same height",execute:function(s){var e=s.context.selection.length;if(e!=1){if(e>1){const t=Rt(s.context.selection.verties);s.context.commands.executeCommand("setAttribute","fit at the same height",s.context.selection.packByValue({y:t.y,height:t.height}))}}}},KL=Object.freeze(Object.defineProperty({__proto__:null,default:YL},Symbol.toStringTag,{value:"Module"})),ZL={command:"same.width",description:"fit at the same width",execute:function(s){if(s.context.selection.isMany){const e=Rt(s.context.selection.verties);s.context.commands.executeCommand("setAttribute","fit at the same width",s.context.selection.packByValue({x:e.x,width:e.width}))}}},qL=Object.freeze(Object.defineProperty({__proto__:null,default:ZL},Symbol.toStringTag,{value:"Module"})),QL={command:"saveJSON",execute:function(s){s.saveItem("model",s.context.modelManager.toJSON())}},JL=Object.freeze(Object.defineProperty({__proto__:null,default:QL},Symbol.toStringTag,{value:"Module"})),eV={command:"savePNG",execute:function(s,e=""){const t=s.context.selection.current;if(t){const r=Bc.generateSVG(s,t).trim(),i="data:image/svg+xml;base64,"+window.btoa(r);Fo({local:i},(a,n)=>{$p(n,o=>{e&&s.emit(e,o)})})}}},tV=Object.freeze(Object.defineProperty({__proto__:null,default:eV},Symbol.toStringTag,{value:"Module"})),rV={command:"segment.delete",execute:function(s){s.emit("deleteSegment")}},iV=Object.freeze(Object.defineProperty({__proto__:null,default:rV},Symbol.toStringTag,{value:"Module"})),sV={command:"segment.move.down",execute:function(s,e={dy:1}){const t=+e.dy;s.emit("moveSegment",0,t)}},aV=Object.freeze(Object.defineProperty({__proto__:null,default:sV},Symbol.toStringTag,{value:"Module"})),nV={command:"segment.move.left",execute:function(s,e={dx:1}){const t=+e.dx;s.emit("moveSegment",-1*t,0)}},oV=Object.freeze(Object.defineProperty({__proto__:null,default:nV},Symbol.toStringTag,{value:"Module"})),lV={command:"segment.move.right",execute:function(s,e={dx:1}){const t=+e.dx;s.emit("moveSegment",t,0)}},cV=Object.freeze(Object.defineProperty({__proto__:null,default:lV},Symbol.toStringTag,{value:"Module"})),hV={command:"segment.move.up",execute:function(s,e={dy:1}){const t=+e.dy;s.emit("moveSegment",0,-1*t)}},dV=Object.freeze(Object.defineProperty({__proto__:null,default:hV},Symbol.toStringTag,{value:"Module"})),uV={command:"select.all",execute:function(s){var e=s.context.selection.currentProject;e&&(s.context.selection.select(...e.layers),s.context.commands.emit("history.refreshSelection"))}},pV=Object.freeze(Object.defineProperty({__proto__:null,default:uV},Symbol.toStringTag,{value:"Module"})),gV={command:"select.none",execute:function(s){s.context.selection.empty(),s.context.commands.emit("history.refreshSelection")}},fV=Object.freeze(Object.defineProperty({__proto__:null,default:gV},Symbol.toStringTag,{value:"Module"})),mV={command:"selectTimelineItem",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.selectTimeline(e),s.emit("refreshTimeline"),s.emit("selectTimeline"))}},vV=Object.freeze(Object.defineProperty({__proto__:null,default:mV},Symbol.toStringTag,{value:"Module"})),yV={command:"setAttribute",execute:function(s,e={},t={origin:"*"}){const r=[];if(Object.entries(e).forEach(([n,o])=>{const l=s.get(n),c={};Object.entries(o).forEach(([h,u])=>{c[h]=de(u)?u(l):u}),r.push({id:l.id,parentId:l.parentId,attrs:c})}),r.length==0)return;let i=!1;const a=[];r.forEach(n=>{const o=s.get(n.id);if(o&&(o.reset(n.attrs,t),o.hasChangedField("layout")&&o.layers.forEach(l=>{l.isLayout(Ae.DEFAULT)||l.isLayout(Ae.FLEX)||l.isLayout(Ae.GRID),s.context.commands.emit("refreshElement",l)}),a.push(o),o.hasChangedHirachy&&(i=!0)),!o.is("project")&&!(o.parent&&o.parent.is("project"))&&(o.isLayoutItem()||o.isBooleanItem)){const l=s.get(n.parentId);n.parentId&&(l==null?void 0:l.isNot("project"))&&(l.reset({changedChildren:!0},t),i=!0)}}),a.length&&s.context.commands.emit("refreshElement",a,!1),i&&s.emit("refreshAllCanvas")}},bV=Object.freeze(Object.defineProperty({__proto__:null,default:yV},Symbol.toStringTag,{value:"Module"})),xV={command:"setTimelineOffset",debounce:100,execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.setTimelineKeyframeOffsetValue(e.layerId,e.property,e.id,e.value,e.timing,e.time),s.emit("refreshTimeline"))}},$V=Object.freeze(Object.defineProperty({__proto__:null,default:xV},Symbol.toStringTag,{value:"Module"})),_V={command:"showExportView",execute:function(s){s.emit("showExportWindow")}},SV=Object.freeze(Object.defineProperty({__proto__:null,default:_V},Symbol.toStringTag,{value:"Module"})),PV={command:"sort.bottom",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=po(t.verties)-po(s.context.selection.verties);s.context.commands.emit("moveLayer",0,r)}}else if(s.context.selection.isMany){let e=po(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=po(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},wV=Object.freeze(Object.defineProperty({__proto__:null,default:PV},Symbol.toStringTag,{value:"Module"})),CV={command:"sort.center",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=fo(e.artboard.verties)-fo(s.context.selection.verties);s.context.commands.emit("moveLayer",t,0)}}}else if(s.context.selection.isMany){let e=fo(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=fo(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},TV=Object.freeze(Object.defineProperty({__proto__:null,default:CV},Symbol.toStringTag,{value:"Module"})),kV={command:"sort.left",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=go(t.verties)-go(s.context.selection.verties);s.context.commands.emit("moveLayer",r,0)}}else if(s.context.selection.isMany){let e=go(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=go(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},MV=Object.freeze(Object.defineProperty({__proto__:null,default:kV},Symbol.toStringTag,{value:"Module"})),IV={command:"sort.middle",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=vo(e.artboard.verties)-vo(s.context.selection.verties);s.context.commands.emit("moveLayer",0,t)}}}else if(s.context.selection.isMany){let e=vo(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=vo(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},EV=Object.freeze(Object.defineProperty({__proto__:null,default:IV},Symbol.toStringTag,{value:"Module"})),LV={command:"sort.right",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=uo(t.verties)-uo(s.context.selection.verties);s.context.commands.emit("moveLayer",r,0)}}else if(s.context.selection.isMany){let e=uo(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=uo(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},VV=Object.freeze(Object.defineProperty({__proto__:null,default:LV},Symbol.toStringTag,{value:"Module"})),OV={command:"sort.top",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=mo(t.verties)-mo(s.context.selection.verties);s.context.commands.emit("moveLayer",0,r)}}else if(s.context.selection.isMany){let e=mo(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=mo(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},RV=Object.freeze(Object.defineProperty({__proto__:null,default:OV},Symbol.toStringTag,{value:"Module"})),jV={command:"switch.path",execute:async s=>{const e=s.context.selection.current;if(!!e&&(e.is("boolean-path")||e.isBooleanItem)){let t=e;e.isBooleanItem&&(t=e.parent),s.context.selection.select(t),s.context.commands.executeCommand("setAttribute","change boolean operation",s.context.selection.packByValue({booleanOperation:t["boolean-operation"],children:t.children.reverse()})),s.nextTick(()=>{s.context.commands.emit("recoverBooleanPath"),s.context.selection.select(e)})}}},zV=Object.freeze(Object.defineProperty({__proto__:null,default:jV},Symbol.toStringTag,{value:"Module"})),AV={command:"ungroup.item",execute:function(s){if(s.context.selection.length===0)return;const e=s.context.selection.current;if(e){let t=e,r=[...t.layers];r.reverse(),r.forEach(i=>{t.insertBefore(i)}),s.context.selection.select(...r),s.emit("refreshAll")}}},DV=Object.freeze(Object.defineProperty({__proto__:null,default:AV},Symbol.toStringTag,{value:"Module"})),FV={command:"updateClipPath",description:"update clip-path property ",execute:function(s,e){s.context.commands.executeCommand("setAttribute","change clip-path",s.context.selection.packByValue({clipPath:`path(${e.d})`}))}},BV=Object.freeze(Object.defineProperty({__proto__:null,default:FV},Symbol.toStringTag,{value:"Module"})),NV={command:"updateImage",execute:function(s,e,t,r){var i=new window.FileReader;i.onload=a=>{var n=a.target.result,o=window.URL.createObjectURL(e);s.context.commands.emit("addImageAssetItem",{id:fr(),type:e.type,name:e.name,original:n,local:o},t,r)},i.readAsDataURL(e)}},GV=Object.freeze(Object.defineProperty({__proto__:null,default:NV},Symbol.toStringTag,{value:"Module"})),HV={command:"updateImageAssetItem",execute:function(s,e,t){var r=new window.FileReader;r.onload=i=>{var a=i.target.result,n=window.URL.createObjectURL(e),o=s.context.selection.currentProject;if(o){const l=o.createImage({id:fr(),type:e.type,name:e.name,original:a,local:n});s.context.commands.emit("addImageAsset"),de(t)&&t(l.id)}},r.readAsDataURL(e)}},UV=Object.freeze(Object.defineProperty({__proto__:null,default:HV},Symbol.toStringTag,{value:"Module"}));const WV=1e3,yn=new Map;class Ds{static has(e){return yn.has(e)}static get(e){return yn.get(e)}static set(e,t){yn.size>WV&&yn.clear(),yn.set(e,t)}}const XV=/((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi;class ct extends or{getDefaultObject(){return{itemType:"transform",value:[]}}toCloneObject(){return b({},this.attrs("itemType","type","value"))}toString(){return`${this.json.type}(${this.json.value.join(", ")||""})`}static join(e){var t="perspective",r="matrix3d",i=e.filter(o=>o.type===t),a=e.filter(o=>o.type===r),n=e.filter(o=>o.type!==t&&o.type!==r);return[...i,...n,...a].map(o=>new ct(o).toString()).join(" ")}hasNumberValue(){var e=this.json.type;return e.includes("matrix")||e.includes("scale")}static parse(e){return new ct(e)}static remove(e,t=[]){return typeof t=="string"&&(t=[t]),ct.filter(e,r=>t.includes(r.type)===!1)}static filter(e,t){return ct.join(ct.parseStyle(e,!1).filter(r=>t(r)))}static replace(e,t){var r=ct.parseStyle(e,!1),i=r.find(a=>a.type===t.type);return i?i.value=t.value:r.push(t),ct.join(r)}static replaceAll(e,t){for(var r=ct.parseStyle(e,!1),i=ct.parseStyle(t),a=0,n=i.length;ac.type===o.type);l?l.value=o.value:r.push(o)}return ct.join(r)}static addTransform(e,t){for(var r=ct.parseStyle(e,!1),i=ct.parseStyle(t),a=0,n=i.length;ac.type===o.type);l?o.value.forEach((c,h)=>{l.value[h].value+=c.value}):r.push(o)}return ct.join(r)}static get(e,t){var r=ct.parseStyle(e,!0);if(typeof t=="function"?r=r.find(t):r=r.find(i=>i.type===t),r)return r.value}static createRotateKey(e,t,r){return`${e}:::${r}(${t})`}static rotate(e,t,r="rotate"){const i=ct.createRotateKey(e,t,r);return Ds.has(i)||Ds.set(i,ct.replace(e,{type:r,value:[t]})),Ds.get(i)}static rotateZ(e,t){return ct.rotate(e,t,"rotateZ")}static rotateX(e,t){return ct.rotate(e,t,"rotateX")}static rotateY(e,t){return ct.rotate(e,t,"rotateY")}static parseStyle(e,t=!0){var r=[];if(!e)return r;if(t&&Ds.has(e))return Ds.get(e);var i=e.match(XV)||[];return i.forEach((a,n)=>{var[o,l]=a.split("(");l=l.split(")")[0];var c=l.split(",");l.includes("matrix")||l.includes("scale")?c=c.map(h=>p.number(h.trim())):c=c.map(h=>p.parse(h.trim())),r[n]=ct.parse({type:o,value:c})}),t&&Ds.set(e,r),r}static createTransformMatrix(e,t,r){const i=Vt();for(let o=0,l=e.length;o1?c.value[1].toDeg().toRad():h;Ot(i,i,Bi(1,Math.tan(u.value),0,0,Math.tan(h.value),1,0,0,0,0,1,0,0,0,0,1));break;case"matrix":var n=c.value;n=[n[0].value,n[1].value,0,0,n[2].value,n[3].value,0,0,0,0,1,0,n[4].value,n[5].value,0,1],Ot(i,i,n);break;case"matrix3d":var n=c.value.map(d=>d.value);Ot(i,i,n);break;case"perspective":var n=c.value;Ym(i,Math.PI*.5,t/r,1,n[0].value);break}}return i}static fromScale(e){if(e[0]===1&&e[1]===1)return"";const t=[];return e[0]!=1&&t.push(`scaleX(${e[0]})`),e[1]!=1&&t.push(`scaleY(${e[1]})`),e[2]!=1&&t.push(`scaleZ(${e[2]})`),t.join(" ")}}var YV={command:"updatePathItem",description:"Update path string for selected svg path item",execute:function(s,e){const t=s.context.selection.current;if(t)if(e.box==="box"){const r=t.invertPath(e.d);s.context.commands.executeCommand("setAttribute","change local path",s.context.selection.packByValue({d:r.d}))}else{const r=new K(e.d);r.transformMat4(e.matrix.absoluteMatrixInverse);let i=r.getBBox();const a=Kt(i[1],i[0]),n=Kt(i[3],i[0]);let o=le(xt(i[0][0],i[0][1],a,n),e.matrix.absoluteMatrix),l=le(o,Ki(mt([],o[4]),ct.createTransformMatrix(ct.parseStyle(e.matrix.transform),a,n),mt([],tr([],o[4]))));const c=ar(mt([],l[0]),t.getLocalTransformMatrix(a,n)),h=Ni([],ar(e.matrix.parentMatrixInverse,c,Dt([],t.getLocalTransformMatrix(a,n))));s.context.commands.executeCommand("setAttribute","change path",s.context.selection.packByValue({d:r.translate(-i[0][0],-i[0][1]).d,x:h[0],y:h[1],width:a,height:n}))}}},KV=Object.freeze(Object.defineProperty({__proto__:null,default:YV},Symbol.toStringTag,{value:"Module"})),ZV={command:"updateResource",execute:function(s,e){e.forEach(t=>{switch(t.type){case"image/svg+xml":case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":s.context.commands.emit("updateImage",t);break;case"text/plain":case"text/html":s.context.commands.emit("addText",{content:t.data});break;case"text/uri-list":s.context.commands.emit("updateUriList",t);break}})}},qV=Object.freeze(Object.defineProperty({__proto__:null,default:ZV},Symbol.toStringTag,{value:"Module"})),QV={command:"updateUriList",execute:function(s,e){var t=e.data;if(t.indexOf("data:")>-1){var r=gn.parse(t,!0);switch(r.mimeType){case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":s.context.commands.emit("addImageAssetItem",{id:fr(),type:r.mimeType,name:"",original:t,local:r.local});break}}else{var i=e.data.split(".").pop(),a=e.data.split("/").pop();switch(i){case"png":case"jpg":case"gif":case"svg":s.context.commands.emit("addImageAssetItem",{id:fr(),type:"image/"+i,name:a,original:e.data,local:e.data});break}}}},JV=Object.freeze(Object.defineProperty({__proto__:null,default:QV},Symbol.toStringTag,{value:"Module"})),eO={command:"updateVideo",execute:function(s,e,t,r=void 0){var i=new window.FileReader;i.onload=a=>{var n=a.target.result,o=window.URL.createObjectURL(e);s.context.commands.emit("addVideoAssetItem",{id:fr(),type:e.type,name:e.name,original:n,local:o},t,r)},i.readAsDataURL(e)}},tO=Object.freeze(Object.defineProperty({__proto__:null,default:eO},Symbol.toStringTag,{value:"Module"})),rO={command:"updateVideoAssetItem",execute:function(s,e,t){var r=new window.FileReader;r.onload=i=>{var a=i.target.result,n=window.URL.createObjectURL(e),o=s.context.selection.currentProject;o&&(o.createVideo({id:fr(),type:e.type,name:e.name,original:a,local:n}),s.emit("addVideoAsset"),de(t)&&t(n))},r.readAsDataURL(e)}},iO=Object.freeze(Object.defineProperty({__proto__:null,default:rO},Symbol.toStringTag,{value:"Module"})),sO={command:"update",description:"Update the model",execute:function(s,e=null,t={},r={origin:"*"}){const i=s.get(e);i&&i.reset(t,r)&&s.context.commands.emit("refreshElement",i)}},aO=Object.freeze(Object.defineProperty({__proto__:null,default:sO},Symbol.toStringTag,{value:"Module"}));const nO={"./command_list/_currentProject.js":_M,"./command_list/_doForceRefreshSelection.js":SM,"./command_list/addArtBoard.js":wM,"./command_list/addBackgroundColor.js":TM,"./command_list/addBackgroundImageAsset.js":MM,"./command_list/addBackgroundImageGradient.js":EM,"./command_list/addBackgroundImagePattern.js":GM,"./command_list/addCustomComponent.js":UM,"./command_list/addImage.js":XM,"./command_list/addImageAssetItem.js":KM,"./command_list/addLayer.js":qM,"./command_list/addLayerView.js":JM,"./command_list/addProject.js":tI,"./command_list/addSVGFilterAssetItem.js":iI,"./command_list/addText.js":aI,"./command_list/addTimelineCurrentProperty.js":oI,"./command_list/addTimelineItem.js":cI,"./command_list/addTimelineKeyframe.js":dI,"./command_list/addTimelineProperty.js":pI,"./command_list/addVideo.js":fI,"./command_list/addVideoAssetItem.js":yI,"./command_list/clipboard.copy.js":xI,"./command_list/clipboard.paste.js":_I,"./command_list/convert.flatten.path.js":PI,"./command_list/convert.no.transform.path.js":CI,"./command_list/convert.normalize.path.js":kI,"./command_list/convert.path.operation.js":II,"./command_list/convert.polygonal.path.js":LI,"./command_list/convert.simplify.path.js":OI,"./command_list/convert.smooth.path.js":jI,"./command_list/convert.stroke.to.path.js":AI,"./command_list/convertPasteText.js":FI,"./command_list/convertPath.js":NI,"./command_list/copy.path.js":HI,"./command_list/copyLayer.js":WI,"./command_list/copyTimelineProperty.js":YI,"./command_list/deleteTimelineKeyframe.js":ZI,"./command_list/doubleclick.item.js":QI,"./command_list/downloadJSON.js":eE,"./command_list/downloadPNG.js":rE,"./command_list/downloadSVG.js":sE,"./command_list/drop.asset.js":nE,"./command_list/dropImageUrl.js":lE,"./command_list/editor.config.body.event.js":hE,"./command_list/fileDropItems.js":uE,"./command_list/firstTimelineItem.js":fE,"./command_list/group.item.js":vE,"./command_list/history.addLayer.js":bE,"./command_list/history.bring.forward.js":$E,"./command_list/history.bring.front.js":SE,"./command_list/history.clipboard.paste.js":wE,"./command_list/history.copyLayer.js":TE,"./command_list/history.group.item.js":ME,"./command_list/history.moveLayer.js":EE,"./command_list/history.moveLayerToTarget.js":VE,"./command_list/history.refreshSelection.js":RE,"./command_list/history.refreshSelectionProject.js":zE,"./command_list/history.removeLayer.js":DE,"./command_list/history.removeProject.js":BE,"./command_list/history.send.back.js":GE,"./command_list/history.send.backward.js":UE,"./command_list/history.setAttribute.js":XE,"./command_list/item.move.depth.down.js":KE,"./command_list/item.move.depth.first.js":qE,"./command_list/item.move.depth.last.js":JE,"./command_list/item.move.depth.up.js":tL,"./command_list/keymap.keydown.js":iL,"./command_list/lastTimelineItem.js":aL,"./command_list/load.json.js":oL,"./command_list/moveLayer.js":cL,"./command_list/moveLayerForItems.js":dL,"./command_list/moveSelectionToCenter.js":pL,"./command_list/newComponent.js":fL,"./command_list/nextTimelineItem.js":vL,"./command_list/open.editor.js":bL,"./command_list/pauseTimelineItem.js":$L,"./command_list/playTimelineItem.js":SL,"./command_list/prevTimelineItem.js":wL,"./command_list/recoverBooleanPath.js":TL,"./command_list/refreshArtboard.js":ML,"./command_list/refreshElement.js":EL,"./command_list/refreshHistory.js":VL,"./command_list/refreshSelectedOffset.js":RL,"./command_list/removeAnimationItem.js":zL,"./command_list/removeLayer.js":DL,"./command_list/removeTimeline.js":BL,"./command_list/removeTimelineProperty.js":GL,"./command_list/resizeArtBoard.js":UL,"./command_list/rotateLayer.js":XL,"./command_list/same.height.js":KL,"./command_list/same.width.js":qL,"./command_list/saveJSON.js":JL,"./command_list/savePNG.js":tV,"./command_list/segment.delete.js":iV,"./command_list/segment.move.down.js":aV,"./command_list/segment.move.left.js":oV,"./command_list/segment.move.right.js":cV,"./command_list/segment.move.up.js":dV,"./command_list/select.all.js":pV,"./command_list/select.none.js":fV,"./command_list/selectTimelineItem.js":vV,"./command_list/setAttribute.js":bV,"./command_list/setTimelineOffset.js":$V,"./command_list/showExportView.js":SV,"./command_list/sort.bottom.js":wV,"./command_list/sort.center.js":TV,"./command_list/sort.left.js":MV,"./command_list/sort.middle.js":EV,"./command_list/sort.right.js":VV,"./command_list/sort.top.js":RV,"./command_list/switch.path.js":zV,"./command_list/ungroup.item.js":DV,"./command_list/updateClipPath.js":BV,"./command_list/updateImage.js":GV,"./command_list/updateImageAssetItem.js":UV,"./command_list/updatePathItem.js":KV,"./command_list/updateResource.js":qV,"./command_list/updateUriList.js":JV,"./command_list/updateVideo.js":tO,"./command_list/updateVideoAssetItem.js":iO,"./command_list/model/update.js":aO},wp={};Object.entries(nO).forEach(([s,e])=>{s=s.replace("./command_list/","").replace(".js",""),wp[s]=e.default});function oO(s){s.loadCommands(wp)}var lO={key:"area.width",defaultValue:100,title:"Area Width to find layers fastly",description:"Set area width/height",type:"number"},cO=Object.freeze(Object.defineProperty({__proto__:null,default:lO},Symbol.toStringTag,{value:"Module"})),hO={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},dO=Object.freeze(Object.defineProperty({__proto__:null,default:hO},Symbol.toStringTag,{value:"Module"})),uO={key:"editing.css.itemType",defaultValue:"rect",title:"set item type for editing css",description:"set item type for editing css",type:"string"},pO=Object.freeze(Object.defineProperty({__proto__:null,default:uO},Symbol.toStringTag,{value:"Module"})),gO={key:"editing.draw.itemType",defaultValue:"path",title:"set item type for editing draw",description:"set item type for editing draw",type:"string"},fO=Object.freeze(Object.defineProperty({__proto__:null,default:gO},Symbol.toStringTag,{value:"Module"})),mO={key:"editing.mode.itemType",defaultValue:"select",title:"set item type for editing mode",description:"set item type for editing mode",type:"string"},vO=Object.freeze(Object.defineProperty({__proto__:null,default:mO},Symbol.toStringTag,{value:"Module"})),yO={key:"editing.mode",defaultValue:St.SELECT,title:"set editing mode for Editor",description:"set editing mode (select, append, draw, path)",type:"string"},bO=Object.freeze(Object.defineProperty({__proto__:null,default:yO},Symbol.toStringTag,{value:"Module"})),xO={key:"editing.svg.itemType",defaultValue:"svg-rect",title:"set item type for editing svg",description:"set item type for editing svg",type:"string"},$O=Object.freeze(Object.defineProperty({__proto__:null,default:xO},Symbol.toStringTag,{value:"Module"})),_O={key:"editor.design.mode",defaultValue:"design",title:"Editor Design Mode ",description:"Set editor's design mode",options:["design","item"],type:"select"},SO=Object.freeze(Object.defineProperty({__proto__:null,default:_O},Symbol.toStringTag,{value:"Module"})),PO={key:"editor.layout.mode",defaultValue:"all",title:"Editor Layout Mode ",description:"Set editor's layout mode",type:"string"},wO=Object.freeze(Object.defineProperty({__proto__:null,default:PO},Symbol.toStringTag,{value:"Module"})),CO={key:"fixed.angle",defaultValue:15,title:"fixed angle count",description:"Set fixed angle",type:"number"},TO=Object.freeze(Object.defineProperty({__proto__:null,default:CO},Symbol.toStringTag,{value:"Module"})),kO={key:"fixed.gradient.angle",defaultValue:1,title:"fixed gradient angle count",description:"Set fixed gradient angle",type:"number"},MO=Object.freeze(Object.defineProperty({__proto__:null,default:kO},Symbol.toStringTag,{value:"Module"})),IO={key:"history.delay.ms",defaultValue:500,title:"history delay milliseconds",description:"Set history delay time",type:"number"},EO=Object.freeze(Object.defineProperty({__proto__:null,default:IO},Symbol.toStringTag,{value:"Module"})),LO={key:"horizontal.line",defaultValue:[],title:"horizontal guide line for snap ",description:"horizontal guide line for snap",type:"array"},VO=Object.freeze(Object.defineProperty({__proto__:null,default:LO},Symbol.toStringTag,{value:"Module"})),OO={key:"horizontal.line.selected.index",defaultValue:-1,title:"selected horizontal guide line index",description:"selected horizontal guide line index",type:"number"},RO=Object.freeze(Object.defineProperty({__proto__:null,default:OO},Symbol.toStringTag,{value:"Module"})),jO={key:"set.drag.path.area",defaultValue:!1,title:"Drag path area",description:"Drag path area",type:"boolean",storage:"none"},zO=Object.freeze(Object.defineProperty({__proto__:null,default:jO},Symbol.toStringTag,{value:"Module"})),AO={key:"set.move.control.point",defaultValue:!1,title:"Moving Control Point",description:"Moving Control Point",type:"boolean",storage:"none"},DO=Object.freeze(Object.defineProperty({__proto__:null,default:AO},Symbol.toStringTag,{value:"Module"})),FO={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},BO=Object.freeze(Object.defineProperty({__proto__:null,default:FO},Symbol.toStringTag,{value:"Module"})),NO={key:"show.outline",defaultValue:!1,title:"Show outline",description:"Set outline visibility to on",type:"boolean"},GO=Object.freeze(Object.defineProperty({__proto__:null,default:NO},Symbol.toStringTag,{value:"Module"})),HO={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},UO=Object.freeze(Object.defineProperty({__proto__:null,default:HO},Symbol.toStringTag,{value:"Module"})),WO={key:"show.ruler",defaultValue:!0,title:"Show ruler",description:"Set ruler visibility to on",type:"boolean"},XO=Object.freeze(Object.defineProperty({__proto__:null,default:WO},Symbol.toStringTag,{value:"Module"})),YO={key:"snap.distance",defaultValue:3,title:"Snap distance between objects",description:"Set snap distance",type:"number"},KO=Object.freeze(Object.defineProperty({__proto__:null,default:YO},Symbol.toStringTag,{value:"Module"})),ZO={key:"snap.grid",defaultValue:50,title:"Snap grid size between objects",description:"Set snap grid size",type:"number"},qO=Object.freeze(Object.defineProperty({__proto__:null,default:ZO},Symbol.toStringTag,{value:"Module"})),QO={key:"vertical.line",defaultValue:[],title:"vertical guide line for snap ",description:"vertical guide line for snap",type:"array"},JO=Object.freeze(Object.defineProperty({__proto__:null,default:QO},Symbol.toStringTag,{value:"Module"})),e6={key:"vertical.line.selected.index",defaultValue:-1,title:"selected vertical guide line index",description:"selected vertical guide line index",type:"number"},t6=Object.freeze(Object.defineProperty({__proto__:null,default:e6},Symbol.toStringTag,{value:"Module"})),r6=Object.values({"./config_list/area.width.js":cO,"./config_list/debug.mode.js":dO,"./config_list/editing.css.itemType.js":pO,"./config_list/editing.draw.itemType.js":fO,"./config_list/editing.mode.itemType.js":vO,"./config_list/editing.mode.js":bO,"./config_list/editing.svg.itemType.js":$O,"./config_list/editor.design.mode.js":SO,"./config_list/editor.layout.mode.js":wO,"./config_list/fixed.angle.js":TO,"./config_list/fixed.gradient.angle.js":MO,"./config_list/history.delay.ms.js":EO,"./config_list/horizontal.line.js":VO,"./config_list/horizontal.line.selected.index.js":RO,"./config_list/set.drag.path.area.js":zO,"./config_list/set.move.control.point.js":DO,"./config_list/show.left.panel.js":BO,"./config_list/show.outline.js":GO,"./config_list/show.right.panel.js":UO,"./config_list/show.ruler.js":XO,"./config_list/snap.distance.js":KO,"./config_list/snap.grid.js":qO,"./config_list/vertical.line.js":JO,"./config_list/vertical.line.selected.index.js":t6}).map(s=>s.default);function i6(s){r6.forEach(e=>{s.registerConfig(e)})}class Bo extends or{static parse(e){return new Bo(e)}getDefaultObject(e){return super.getDefaultObject(b({itemType:"selector",selector:"",properties:[]},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("selector","properties"))}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";"}return e.value.toString()+" !important;"}toPropertyString(){return this.json.properties.map(e=>{if(this.isMultiStyle(e.key))return this.getMultiStyleString(e);var t=e.value.toString();if(t){var r=e.key;return r==="x"?r="left":r==="y"&&(r="top"),`${r}: ${t} !important;`}else return""}).join(` `)}toCSSText(e=""){return`${e}${this.json.selector} { ${this.toPropertyString()} -}`}toCSS(){return{}}toString(e=""){return this.toCSSText(e)}}var $j={startCache(n){n.addCache("cachedSize",{width:n.width,height:n.height}),n.addCache("cachedLayerMatrix",n.layers.map(e=>{e.startToCacheChildren();const{x:t,y:i,width:r,height:s}=e.attrs("x","y","width","height");return{id:e.id,matrix:{x:t,y:i,width:r,height:s},constraints:{horizontal:e[Un.HORIZONTAL],vertical:e[Un.VERTICAL]}}}))},recover(n){const e={width:n.width,height:n.height},t=e.width,i=e.height,r=n.getCache("cachedSize"),s=r.width,a=r.height,o=t/s,l=i/a;n.getCache("cachedLayerMatrix").forEach(({id:h,matrix:d,constraints:u})=>{const p=n.find(h),{x:f,y:g,width:m,height:v}=d,b=f,_=s-f-m,x=g,S=a-g-v,E={};switch(u.horizontal){case Tt.MIN:E.x=b;break;case Tt.MAX:E.x=t-_-m;break;case Tt.STRETCH:E.x=b,E.width=t-b-_;break;case Tt.SCALE:E.x=b*o,E.width=m*o;break;case Tt.CENTER:const A=m/2,z=(f+A)/s;E.x=z*t-A;break}switch(u.vertical){case Tt.MIN:E.y=x;break;case Tt.MAX:E.y=i-S-v;break;case Tt.STRETCH:E.y=x,E.height=i-x-S;break;case Tt.SCALE:E.y=x*l,E.height=v*l;break;case Tt.CENTER:const A=v/2,z=(g+A)/a;E.y=z*i-A;break}p.reset(E),p.recoverChildren()})}},W1={startCache(){},recover(){},updateGridArea(n,e,t=1){if(n.isInGrid()===!1)return;const i=n.originVerties,r=Zi(i),{items:s}=e,a=Rf.RECT/t,o=s.filter(g=>ig(i,g.originVerties)).filter(g=>{const m=tg(g.originRect,r);return Math.floor(m.width)>a&&Math.floor(m.height)>a});if(o.length===0)return;const l=o.map(g=>g.row);l.sort((g,m)=>g-m);const c=o.map(g=>g.column);c.sort((g,m)=>g-m);const h=c[0],d=c[c.length-1],u=l[0],p=l[l.length-1],f={"grid-column-start":h,"grid-column-end":d+1,"grid-row-start":u,"grid-row-end":p+1};return n.reset(f),f}};class bh extends Vr{static parse(e){return new bh(e)}getDefaultObject(){return super.getDefaultObject({itemType:"offset",offset:y.percent(0),color:"rgba(255, 255, 255, 1)",properties:[]})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("offset","color","properties"))}convert(e){return e=super.convert(e),e.offset=y.parse(e.offset),e}toCSSText(){return`${this.json.offset} ${ei(this.toCSS())}`}createProperty(e={}){return this.addProperty(P({checked:!0,value:0},e))}addProperty(e){this.json.properties.push(e)}removeProperty(e){this.json.properties.splice(e,1)}sortItem(e,t,i){e.splice(i+(t{e=P(P({},e),t.toCSS())}),e}toString(){return this.toCSSText()}}class xh extends Vr{static parse(e){return new xh(e)}static parseStyle(e){var t=[],i={};if(e.keyframe){var r=ga(e.keyframe);r.str.split("|").map(s=>s.trim()).forEach((s,a)=>{var[o,l,c,...h]=s.split(" "),d=h.join(" ");i[o]||(i[o]=new xh({name:o}),t[a]=o);var u=i[o].offsets.filter(f=>f.offset.equals(y.parse(l))),p=null;u.length?p=u[0]:(p=new bh({offset:y.parse(l)}),i[o].offsets.push(p)),p.addProperty({key:c,value:vl(d,r.matches)})})}return t.map(s=>(i[s].offsets.forEach(a=>{var o=[],l=[];a.properties.forEach(h=>{h.key.includes("--")?o.push(h):l.push(h)});let c=o.map(h=>`${h.key}:${h.value}`).join(";");o.length&&l.push({key:"var",value:c}),a.properties=l}),i[s]))}getDefaultObject(){return super.getDefaultObject({itemType:"keyframe",name:"sample",selectedType:"list",offsets:[]})}toCloneObject(){var{offsets:e}=this.json;return Ve(P(P({},super.toCloneObject()),this.attrs("name","selectedType")),{offsets:e.map(t=>t.clone())})}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";";case"var":var t=(e.value+"").split(";").map(i=>"--"+i).join(";");return t+";"}return e.value.toString()+";"}toOffsetString(e){var t=" ";return`${e.offset.toString()} { -${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyleString(i);var r=(i.value||"").toString();if(r){var s=i.key;return s==="x"?s="left":s==="y"&&(s="top"),`${s}: ${r};`}else return""}).join("").replace(/;/g,`; +}`}toCSS(){return{}}toString(e=""){return this.toCSSText(e)}}var s6={startCache(s){s.addCache("cachedSize",{width:s.width,height:s.height}),s.addCache("cachedLayerMatrix",s.layers.map(e=>{e.startToCacheChildren();const{x:t,y:r,width:i,height:a}=e.attrs("x","y","width","height");return{id:e.id,matrix:{x:t,y:r,width:i,height:a},constraints:{horizontal:e[qr.HORIZONTAL],vertical:e[qr.VERTICAL]}}}))},recover(s){const e={width:s.width,height:s.height},t=e.width,r=e.height,i=s.getCache("cachedSize"),a=i.width,n=i.height,o=t/a,l=r/n;s.getCache("cachedLayerMatrix").forEach(({id:h,matrix:u,constraints:d})=>{const v=s.find(h),{x:g,y,width:P,height:S}=u,V=g,E=a-g-P,I=y,O=n-y-S,B={};switch(d.horizontal){case Me.MIN:B.x=V;break;case Me.MAX:B.x=t-E-P;break;case Me.STRETCH:B.x=V,B.width=t-V-E;break;case Me.SCALE:B.x=V*o,B.width=P*o;break;case Me.CENTER:const U=P/2,X=(g+U)/a;B.x=X*t-U;break}switch(d.vertical){case Me.MIN:B.y=I;break;case Me.MAX:B.y=r-O-S;break;case Me.STRETCH:B.y=I,B.height=r-I-O;break;case Me.SCALE:B.y=I*l,B.height=S*l;break;case Me.CENTER:const U=S/2,X=(y+U)/n;B.y=X*r-U;break}v.reset(B),v.recoverChildren()})}},Cp={startCache(){},recover(){},updateGridArea(s,e,t=1){if(s.isInGrid()===!1)return;const r=s.originVerties,i=Rt(r),{items:a}=e,n=Gl.RECT/t,o=a.filter(y=>hc(r,y.originVerties)).filter(y=>{const P=cc(y.originRect,i);return Math.floor(P.width)>n&&Math.floor(P.height)>n});if(o.length===0)return;const l=o.map(y=>y.row);l.sort((y,P)=>y-P);const c=o.map(y=>y.column);c.sort((y,P)=>y-P);const h=c[0],u=c[c.length-1],d=l[0],v=l[l.length-1],g={"grid-column-start":h,"grid-column-end":u+1,"grid-row-start":d,"grid-row-end":v+1};return s.reset(g),g}};class bn extends or{static parse(e){return new bn(e)}getDefaultObject(){return super.getDefaultObject({itemType:"offset",offset:p.percent(0),color:"rgba(255, 255, 255, 1)",properties:[]})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("offset","color","properties"))}convert(e){return e=super.convert(e),e.offset=p.parse(e.offset),e}toCSSText(){return`${this.json.offset} ${Je(this.toCSS())}`}createProperty(e={}){return this.addProperty(b({checked:!0,value:0},e))}addProperty(e){this.json.properties.push(e)}removeProperty(e){this.json.properties.splice(e,1)}sortItem(e,t,r){e.splice(r+(t{e=b(b({},e),t.toCSS())}),e}toString(){return this.toCSSText()}}class xn extends or{static parse(e){return new xn(e)}static parseStyle(e){var t=[],r={};if(e.keyframe){var i=Zi(e.keyframe);i.str.split("|").map(a=>a.trim()).forEach((a,n)=>{var[o,l,c,...h]=a.split(" "),u=h.join(" ");r[o]||(r[o]=new xn({name:o}),t[n]=o);var d=r[o].offsets.filter(g=>g.offset.equals(p.parse(l))),v=null;d.length?v=d[0]:(v=new bn({offset:p.parse(l)}),r[o].offsets.push(v)),v.addProperty({key:c,value:ha(u,i.matches)})})}return t.map(a=>(r[a].offsets.forEach(n=>{var o=[],l=[];n.properties.forEach(h=>{h.key.includes("--")?o.push(h):l.push(h)});let c=o.map(h=>`${h.key}:${h.value}`).join(";");o.length&&l.push({key:"var",value:c}),n.properties=l}),r[a]))}getDefaultObject(){return super.getDefaultObject({itemType:"keyframe",name:"sample",selectedType:"list",offsets:[]})}toCloneObject(){var{offsets:e}=this.json;return se(b(b({},super.toCloneObject()),this.attrs("name","selectedType")),{offsets:e.map(t=>t.clone())})}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";";case"var":var t=(e.value+"").split(";").map(r=>"--"+r).join(";");return t+";"}return e.value.toString()+";"}toOffsetString(e){var t=" ";return`${e.offset.toString()} { +${t}${e.properties.map(r=>{if(this.isMultiStyle(r.key))return this.getMultiStyleString(r);var i=(r.value||"").toString();if(i){var a=r.key;return a==="x"?a="left":a==="y"&&(a="top"),`${a}: ${i};`}else return""}).join("").replace(/;/g,`; `+t).trim()} - }`}toOffsetText(){var e=this.json.offsets.map(t=>t);return e.sort((t,i)=>t.offset.value>i.offset.value?1:-1),e.map(t=>t.properties.length===0?"":this.toOffsetString(t)).join(` -`)}toCSSText(){var e=this.json.offsets.map(t=>t);return e.sort((t,i)=>t.offset.value>i.offset.value?1:-1),` + }`}toOffsetText(){var e=this.json.offsets.map(t=>t);return e.sort((t,r)=>t.offset.value>r.offset.value?1:-1),e.map(t=>t.properties.length===0?"":this.toOffsetString(t)).join(` +`)}toCSSText(){var e=this.json.offsets.map(t=>t);return e.sort((t,r)=>t.offset.value>r.offset.value?1:-1),` @keyframes ${this.json.name} { ${this.toOffsetText()} } -`}createOffset(e={}){return this.addOffset(new bh(P({checked:!0},e)))}addOffset(e){this.json.offsets.push(e)}removeOffset(e){this.json.offsets.splice(e,1)}sortItem(e,t,i){e.splice(i+(te.isNot("project")).shift()}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){const e=[this];let t;for(;t=e[0].parent;)e.unshift(t);return e}get pathIds(){return this.path.map(e=>e.id)}setParentId(e){this.reset({parentId:e}),this.manager.setChanged("setParentId",this.id,{parentId:e})}get childrenLength(){return Pt(this,Lr).children.length}get index(){var e;return(e=this.parent)==null?void 0:e.findIndex(this)}get isFirst(){return this.index===0}get isLast(){return this.index===this.parent.childrenLength-1}get first(){return this.parent.layers[0]}get last(){const e=this.parent;return e.layers[e.childrenLength-1]}get prev(){var t;const e=this.index;return this.isFirst?this:(t=this.parent)==null?void 0:t.layers[e-1]}get next(){var t;const e=this.index;return this.isLast?this:(t=this.parent)==null?void 0:t.layers[e+1]}get hierarchy(){return this.getInformationForHierarchy("x","y","angle")}getInformationForHierarchy(...e){const t=this.parent,i=this.index;return{id:this.id,index:i,parentId:this.parentId,prev:i===0?void 0:t.children[i-1],next:i===t.childrenLength-1?void 0:t.children[i+1],attrs:this.attrs(...e)}}getInnerId(e=""){return Pt(this,Lr).id+e}is(e){return Pt(this,Lr).itemType===e}isNot(e){return this.is(e)===!1}get(e){return Pt(this,Lr)[e]}removeField(e){delete Pt(this,Lr)[e]}set(e,t){this.reset({[e]:t})}isSVG(){return!1}addCache(e,t){Pt(this,_c)[e]=t}getCache(e){return Pt(this,_c)[e]}hasCache(e){return Boolean(Pt(this,_c)[e])}computed(e,t,i=!1){const r=`__cachedKey_${e}`,s=`${r}__parseValue`,a=Pt(this,Lr)[e];if(!i){if(this.getCache(r)===a&&this.getCache(s))return this.getCache(s)}return this.addCache(r,a),this.addCache(s,t(a,this)),this.getCache(s)}computedValue(e){const i=`${`__cachedKey_${e}`}__parseValue`;return this.getCache(i)}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e={}){return e}setCache(){}toCloneObject(e=!0){const t={};return Object.keys(Pt(this,Lr)).forEach(i=>{$t(this.get(i))&&(t[i]=rt(this.get(i)))}),e&&(t.layers=this.layers.map(i=>i.clone(e))),t}clone(e=!0){return Pt(this,os).clone(this.id,e)}reset(e,t={origin:"*"}){var i;return Vi(this,Lr,this.convert(Object.assign(Pt(this,Lr),e))),Vi(this,Sd,e),t.origin==="*"&&((i=Pt(this,os))==null||i.setChanged("reset",this.id,e)),this.changed(),!0}hasChangedField(...e){return e.some(t=>Pt(this,Sd)[t]!==void 0)}get hasChangedHirachy(){return this.hasChangedField("children","parentId")}getDefaultObject(e={}){var t=e.id||ho();return P({id:t,name:"",itemType:"base",children:[],parentId:""},e)}attrs(...e){const t={};return e.forEach(i=>{$t(this.get(i))&&(t[i]=rt(this.get(i)))}),t}attrsWithId(...e){return{[this.id]:this.attrs(...e)}}hasChildren(){return this.children.length>0}appendChild(e){if(e.parentId===this.id){const t=this.children.find(i=>i===e.id);return Boolean(t)===!1&&(this.children.push(e.id),Pt(this,os).setChanged("appendChild",this.id,{child:e.id,oldParentId:e.parentId})),e}return this.resetMatrix(e),e.parent&&e.remove(),e.setParentId(this.id),this.children.push(e.id),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){var a;this.resetMatrix(e),e.parent&&((a=e.parent)==null?void 0:a.id)!==this.id&&e.remove(),e.setParentId(this.id);let i=this.children.map((o,l)=>({id:o,index:l}));const r=i.find(o=>o.id===e.id),s=t-.5;return r?r.index=s:i.push({id:e.id,index:s}),i.sort((o,l)=>o.index-l.index),this.reset({children:i.map(o=>o.id)}),Pt(this,os).setChanged("insertChild",this.id,{childId:e.id,index:0}),e}insertAfter(e){return this.parent.insertChild(e,this.index+1),e}insertBefore(e){return this.parent.insertChild(e,this.index),e}toggle(e,t){Di(t)?this.reset({[e]:!this.get(e)}):this.reset({[e]:!!t})}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!Di(this.get(e))}toJSON(){const e=Pt(this,Lr);let t={};return Object.keys(e).filter(i=>this.expectJSON(i)).forEach(i=>{t[i]=e[i]}),this.hasChildren()&&(t.layers=this.layers.map(i=>i.toJSON())),t}resize(){}copy(e=0){return this.parent.copyItem(this.id,e)}findIndex(e){return this.children.indexOf(e.id)}find(e){return Pt(this,os).get(e)}copyItem(e,t=10){const i=this.find(e);var r=i.clone();r.renameWithCount(),r.absoluteMove([t,t,0]);var s=this.findIndex(i);return s>-1&&this.children.push(r.id),r}remove(){this.parent.removeChild(this.id)}removeChild(e){return Pt(this,os).removeChild(this.id,e)}hasParent(e){return this.parentId===e}hasPathOf(e=[]){const t=this.path;return e.filter(i=>i.id!==this.id).some(i=>t.find(r=>r.id===i.id))}hasChild(e){return this.children.includes(e)}to(){}sendBackward(e){const t=this.children,i={};let r=-1;t.forEach((a,o)=>{i[a]={id:a,index:o},a===e&&(r=o)}),i[e].index=r-1.5;const s=Object.values(i).sort((a,o)=>a.index-o.index).map(a=>a.id);this.reset({children:s})}sendBack(e){const t=this.children,i={};t.forEach((s,a)=>{i[s]={id:s,index:a}}),i[e].index=-1;const r=Object.values(i).sort((s,a)=>s.index-a.index).map(s=>s.id);this.reset({children:r})}bringForward(e){const t=this.children,i={};let r=-1;t.forEach((a,o)=>{i[a]={id:a,index:o},a===e&&(r=o)}),i[e].index=r+1.5;const s=Object.values(i).sort((a,o)=>a.index-o.index).map(a=>a.id);this.reset({children:s})}bringFront(e){const t=this.children,i={};t.forEach((s,a)=>{i[s]={id:s,index:a}}),i[e].index=Number.MAX_SAFE_INTEGER;const r=Object.values(i).sort((s,a)=>s.index-a.index).map(s=>s.id);this.reset({children:r})}}os=new WeakMap,Lr=new WeakMap,_c=new WeakMap,_d=new WeakMap,Sd=new WeakMap,wd=new WeakMap;class Pj extends X1{getDefaultObject(e={}){return super.getDefaultObject(P({svgfilters:[],keyframes:[]},e))}get keyframes(){return this.get("keyframes")}get svgfilters(){return this.get("svgfilters")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new xh(P({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,i){e.splice(i+(tt.toString(e)).join(` +`}createOffset(e={}){return this.addOffset(new bn(b({checked:!0},e)))}addOffset(e){this.json.offsets.push(e)}removeOffset(e){this.json.offsets.splice(e,1)}sortItem(e,t,r){e.splice(r+(te.isNot("project")).shift()}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){const e=[this];let t;for(;t=e[0].parent;)e.unshift(t);return e}get pathIds(){return this.path.map(e=>e.id)}setParentId(e){this.reset({parentId:e}),this.manager.setChanged("setParentId",this.id,{parentId:e})}get childrenLength(){return Te(this,rr).children.length}get index(){var e;return(e=this.parent)==null?void 0:e.findIndex(this)}get isFirst(){return this.index===0}get isLast(){return this.index===this.parent.childrenLength-1}get first(){return this.parent.layers[0]}get last(){const e=this.parent;return e.layers[e.childrenLength-1]}get prev(){var t;const e=this.index;return this.isFirst?this:(t=this.parent)==null?void 0:t.layers[e-1]}get next(){var t;const e=this.index;return this.isLast?this:(t=this.parent)==null?void 0:t.layers[e+1]}get hierarchy(){return this.getInformationForHierarchy("x","y","angle")}getInformationForHierarchy(...e){const t=this.parent,r=this.index;return{id:this.id,index:r,parentId:this.parentId,prev:r===0?void 0:t.children[r-1],next:r===t.childrenLength-1?void 0:t.children[r+1],attrs:this.attrs(...e)}}getInnerId(e=""){return Te(this,rr).id+e}is(e){return Te(this,rr).itemType===e}isNot(e){return this.is(e)===!1}get(e){return Te(this,rr)[e]}removeField(e){delete Te(this,rr)[e]}set(e,t){this.reset({[e]:t})}isSVG(){return!1}addCache(e,t){Te(this,wa)[e]=t}getCache(e){return Te(this,wa)[e]}hasCache(e){return Boolean(Te(this,wa)[e])}computed(e,t,r=!1){const i=`__cachedKey_${e}`,a=`${i}__parseValue`,n=Te(this,rr)[e];if(!r){if(this.getCache(i)===n&&this.getCache(a))return this.getCache(a)}return this.addCache(i,n),this.addCache(a,t(n,this)),this.getCache(a)}computedValue(e){const r=`${`__cachedKey_${e}`}__parseValue`;return this.getCache(r)}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e={}){return e}setCache(){}toCloneObject(e=!0){const t={};return Object.keys(Te(this,rr)).forEach(r=>{ke(this.get(r))&&(t[r]=be(this.get(r)))}),e&&(t.layers=this.layers.map(r=>r.clone(e))),t}clone(e=!0){return Te(this,si).clone(this.id,e)}reset(e,t={origin:"*"}){var r;return wt(this,rr,this.convert(Object.assign(Te(this,rr),e))),wt(this,Nn,e),t.origin==="*"&&((r=Te(this,si))==null||r.setChanged("reset",this.id,e)),this.changed(),!0}hasChangedField(...e){return e.some(t=>Te(this,Nn)[t]!==void 0)}get hasChangedHirachy(){return this.hasChangedField("children","parentId")}getDefaultObject(e={}){var t=e.id||ws();return b({id:t,name:"",itemType:"base",children:[],parentId:"",visibility:"visible"},e)}attrs(...e){const t={};return e.forEach(r=>{ke(this.get(r))&&(t[r]=be(this.get(r)))}),t}attrsWithId(...e){return{[this.id]:this.attrs(...e)}}hasChildren(){return this.children.length>0}appendChild(e){if(e.parentId===this.id){const t=this.children.find(r=>r===e.id);return Boolean(t)===!1&&(this.children.push(e.id),Te(this,si).setChanged("appendChild",this.id,{child:e.id,oldParentId:e.parentId})),e}return this.resetMatrix(e),e.parent&&e.remove(),e.setParentId(this.id),this.children.push(e.id),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){var n;this.resetMatrix(e),e.parent&&((n=e.parent)==null?void 0:n.id)!==this.id&&e.remove(),e.setParentId(this.id);let r=this.children.map((o,l)=>({id:o,index:l}));const i=r.find(o=>o.id===e.id),a=t-.5;return i?i.index=a:r.push({id:e.id,index:a}),r.sort((o,l)=>o.index-l.index),this.reset({children:r.map(o=>o.id)}),Te(this,si).setChanged("insertChild",this.id,{childId:e.id,index:0}),e}insertAfter(e){return this.parent.insertChild(e,this.index+1),e}insertBefore(e){return this.parent.insertChild(e,this.index),e}toggle(e,t){Ct(t)?this.reset({[e]:!this.get(e)}):this.reset({[e]:!!t})}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!Ct(this.get(e))}toJSON(){const e=Te(this,rr);let t={};return Object.keys(e).filter(r=>this.expectJSON(r)).forEach(r=>{t[r]=e[r]}),this.hasChildren()&&(t.layers=this.layers.map(r=>r.toJSON())),t}resize(){}copy(e=0){return this.parent.copyItem(this.id,e)}findIndex(e){return this.children.indexOf(e.id)}find(e){return Te(this,si).get(e)}copyItem(e,t=10){const r=this.find(e);var i=r.clone();i.renameWithCount(),i.absoluteMove([t,t,0]);var a=this.findIndex(r);return a>-1&&this.children.push(i.id),i}remove(){this.parent.removeChild(this.id)}removeChild(e){return Te(this,si).removeChild(this.id,e)}hasParent(e){return this.parentId===e}hasPathOf(e=[]){const t=this.path;return e.filter(r=>r.id!==this.id).some(r=>t.find(i=>i.id===r.id))}hasChild(e){return this.children.includes(e)}to(){}sendBackward(e){const t=this.children,r={};let i=-1;t.forEach((n,o)=>{r[n]={id:n,index:o},n===e&&(i=o)}),r[e].index=i-1.5;const a=Object.values(r).sort((n,o)=>n.index-o.index).map(n=>n.id);this.reset({children:a})}sendBack(e){const t=this.children,r={};t.forEach((a,n)=>{r[a]={id:a,index:n}}),r[e].index=-1;const i=Object.values(r).sort((a,n)=>a.index-n.index).map(a=>a.id);this.reset({children:i})}bringForward(e){const t=this.children,r={};let i=-1;t.forEach((n,o)=>{r[n]={id:n,index:o},n===e&&(i=o)}),r[e].index=i+1.5;const a=Object.values(r).sort((n,o)=>n.index-o.index).map(n=>n.id);this.reset({children:a})}bringFront(e){const t=this.children,r={};t.forEach((a,n)=>{r[a]={id:a,index:n}}),r[e].index=Number.MAX_SAFE_INTEGER;const i=Object.values(r).sort((a,n)=>a.index-n.index).map(a=>a.id);this.reset({children:i})}}si=new WeakMap,rr=new WeakMap,wa=new WeakMap,Bn=new WeakMap,Nn=new WeakMap,Gn=new WeakMap;class a6 extends Tp{getDefaultObject(e={}){return super.getDefaultObject(b({svgfilters:[],keyframes:[]},e))}get keyframes(){return this.get("keyframes")}get svgfilters(){return this.get("svgfilters")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new xn(b({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,r){e.splice(r+(tt.toString(e)).join(` -`)}copyPropertyList(e,t){var i=P({},e[t]);e.splice(t,0,i)}removePropertyList(e,t){e.splice(t,1)}getSVGFilterIndex(e){var i;var t=this.svgfilters.map((r,s)=>({id:r.id,index:s})).filter(r=>r.id===e);return t.length?(i=t==null?void 0:t[0])==null?void 0:i.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=P(P({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(P({id:Zr()},e))}}class Tj extends Pj{getDefaultObject(e={}){return super.getDefaultObject(P({angle:0,x:0,y:0,width:300,height:300,position:"absolute",perspective:"",perspectiveOrigin:"",transformOrigin:"50% 50% 0px"},e))}get isAbsolute(){return this.position==="absolute"}get isDragSelectable(){return!0}get isBooleanItem(){}get resizableWitChildren(){return!1}get perspective(){return this.get("perspective")}get perspectiveOrigin(){return this.get("perspectiveOrigin")}get transform(){return`rotateZ(${y.deg(this.angle)})`}get localMatrix(){return this.hasCache("localTransform")||this.addCache("localTransform",this.getLocalTransformMatrix()),this.getCache("localTransform")||this.getLocalTransformMatrix()}get localMatrixInverse(){return this.hasCache("localTransformInverse")||this.addCache("localTransformInverse",this.getLocalTransformMatrixInverse()),this.getCache("localTransformInverse")||this.getLocalTransformMatrixInverse()}get transformWithTranslate(){return this.hasCache("transformWithTranslate")||this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslate")||this.getTransformWithTranslate(this)}get transformWithTranslateToTranspose(){return this.hasCache("transformWithTranslateTranspose")||this.addCache("transformWithTranslateTranspose",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateTranspose")||z0([],this.getTransformWithTranslate(this))}get transformWithTranslateInverse(){return this.hasCache("transformWithTranslateInverse")||this.addCache("transformWithTranslateInverse",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateInverse")||ir([],this.getTransformWithTranslate(this))}get itemMatrix(){return this.hasCache("itemTransform")||this.addCache("itemTransform",this.getItemTransformMatrix()),this.getCache("itemTransform")||this.getItemTransformMatrix()}get itemMatrixInverse(){return this.hasCache("itemTransformInverse")||this.addCache("itemTransformInverse",this.getItemTransformMatrixInverse()),this.getCache("itemTransformInverse")||this.getItemTransformMatrixInverse()}get absoluteMatrix(){return this.hasCache("absoluteMatrix")||this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.getCache("absoluteMatrix")||this.getAbsoluteMatrix()}get absoluteMatrixInverse(){return this.hasCache("absoluteMatrixInverse")||this.addCache("absoluteMatrixInverse",this.getAbsoluteMatrixInverse()),this.getCache("absoluteMatrixInverse")||this.getAbsoluteMatrixInverse()}get relativeMatrix(){return this.hasCache("relativeMatrix")||this.addCache("relativeMatrix",this.getRelativeMatrix()),this.getCache("relativeMatrix")||this.getRelativeMatrix()}get relativeMatrixInverse(){return this.hasCache("relativeMatrixInverse")||this.addCache("relativeMatrixInverse",this.getRelativeMatrixInverse()),this.getCache("relativeMatrixInverse")||this.getRelativeMatrixInverse()}get verties(){return this.hasCache("verties")||this.addCache("verties",this.getVerties()),this.getCache("verties")||this.getVerties()}get contentVerties(){return this.hasCache("contentVerties")||this.addCache("contentVerties",this.getContentVerties()),this.getCache("contentVerties")||this.getContentVerties()}get originVerties(){return this.hasCache("vertiesWithoutTransformOrigin")||this.addCache("vertiesWithoutTransformOrigin",this.rectVerties()),this.getCache("vertiesWithoutTransformOrigin")||this.rectVerties()}get localVerties(){return this.hasCache("localVerties")||this.addCache("localVerties",this.getLocalVerties()),this.getCache("localVerties")||this.getLocalVerties()}get guideVerties(){return this.hasCache("guideVerties")||this.addCache("guideVerties",this.getGuideVerties()),this.getCache("guideVerties")||this.getGuideVerties()}get xList(){return this.hasCache("xList")||this.addCache("xList",this.getXList()),this.getCache("xList")||this.getXList()}get yList(){return this.hasCache("yList")||this.addCache("yList",this.getYList()),this.getCache("yList")||this.getYList()}get areaPosition(){return this.hasCache("areaPosition")||this.addCache("areaPosition",this.getAreaPosition(100)),this.getCache("areaPosition")||this.getAreaPosition(100)}get offsetX(){return this.x}get offsetY(){return this.y}get screenWidth(){return this.width}get screenHeight(){return this.height}get y(){return this.get("y")}set y(e){this.set("y",e)}get x(){return this.get("x")}set x(e){this.set("x",e)}get width(){return this.get("width")}set width(e){this.set("width",e)}get height(){return this.get("height")}set height(e){this.set("height",e)}get angle(){return this.get("angle")}set angle(e){this.set("angle",e)}get position(){return this.get("position")}set position(e){this.set("position",e)}get transformOrigin(){return this.get("transformOrigin")}set transformOrigin(e){this.reset({transformOrigin:e})}get translate(){return[0,0,0]}get scale(){return[1,1,1]}get rotate(){return[0,0,lr(this.angle)]}get origin(){return Sn.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight)}get absoluteOrigin(){return Xe([this.origin],this.absoluteMatrix)[0]}get quat(){return kM(Lf(),0,0,this.angle)}getAreaPosition(e=100){const t=this.getVerties(),i=wn(t),[r,s]=Uf(i[0][0],i[0][1],e),[a,o]=Uf(i[2][0],i[2][1],e);return{column:[s,o],row:[r,a]}}reset(e,t={origin:"*"}){const i=super.reset(e,t);return(this.hasChangedField("children","x","y","width","height","boxModel","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshMatrixCache(),i}changed(){super.changed(),this.changedRect=this.hasChangedField("children","x","y","width","height","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")}setParentId(e){super.setParentId(e),this.refreshMatrixCache()}refreshMatrixCache(){this.setCacheItemTransformMatrix(),this.setCacheLocalTransformMatrix(),this.setCacheAbsoluteMatrix(),this.setCacheLocalVerties(),this.setCacheVerties(),this.setCacheGuideVerties(),this.setCacheAreaPosition(),this.layers.forEach(e=>{e.refreshMatrixCache()})}setCacheItemTransformMatrix(){this.addCache("itemTransform",this.getItemTransformMatrix()),this.addCache("itemTransformInverse",ir([],this.getCache("itemTransform")))}setCacheLocalTransformMatrix(){this.addCache("localTransform",this.getLocalTransformMatrix()),this.addCache("localTransformInverse",ir([],this.getCache("localTransform"))),this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.addCache("transformWithTranslateInverse",ir([],this.getCache("transformWithTranslate"))),this.addCache("transformWithTranslateTranspose",z0([],this.getCache("transformWithTranslate")))}setCacheAbsoluteMatrix(){this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.addCache("absoluteMatrixInverse",ir([],this.getCache("absoluteMatrix"))),this.addCache("relativeMatrix",this.getRelativeMatrix()),this.addCache("relativeMatrixInverse",ir([],this.getCache("relativeMatrix")))}setCacheVerties(){this.addCache("verties",this.getVerties()),this.addCache("contentVerties",this.getContentVerties()),this.addCache("vertiesWithoutTransformOrigin",this.rectVerties())}setCacheLocalVerties(){this.addCache("localVerties",this.getLocalVerties())}setCacheGuideVerties(){this.addCache("guideVerties",this.getGuideVerties()),this.addCache("xList",this.getXList()),this.addCache("yList",this.getYList())}setCacheAreaPosition(){this.addCache("areaPosition",this.getAreaPosition(100))}move(e=[0,0,0]){this.reset({x:Bt(this.offsetX+e[0]),y:Bt(this.offsetY+e[1])})}moveByCenter(e=[0,0,0]){this.reset({x:e[0]-this.screenWidth/2,y:e[1]-this.screenHeight/2})}absoluteMove(e=[0,0,0]){var o;const t=this.verties[4],i=_t([],t,e),r=Xe([t,i],((o=this.parent)==null?void 0:o.absoluteMatrixInverse)||mM([])),s=ft([],r[1],r[0]),a=this.attrs("x","y");return this.move(s),a}startToCacheChildren(){}recoverChildren(){}resize(e,t){this.startToCacheChildren(),this.reset({width:e,height:t}),this.recoverChildren()}setAngle(e=0){this.reset({angle:e})}addAngle(e=0){this.setAngle(this.angle+e)}checkInArea(e){return ig(e,this.originVerties)}hasPoint(e,t){return this.isPointInRect(e,t)}isPointInRect(e,t){return po(this.originVerties,e,t)}isIncludeByArea(e){return this.originVerties.map(t=>po(e,...t)).filter(Boolean).length===4}getPerspectiveMatrix(){if(!this.perspective)return;let[t=y.percent(50),i=y.percent(50)]=Sn.parseStyle(this.perspectiveOrigin);const r=this.screenWidth,s=this.screenHeight;t=t.toPx(r).value,i=i.toPx(s).value;const a=Ki();if(Ni(a,a,[t,i,0]),this.perspective&&this.perspective!="none")qi(a,a,sa(1,0,0,0,0,1,0,0,0,0,1,0,0,0,-1/y.parse(this.perspective).value,1));else return;return Ni(a,a,[-t,-i,0]),a}getItemTransformMatrix(){const e=ui.parseStyle(this.transform),t=this.screenWidth,i=this.screenHeight;return ui.createTransformMatrix(e,t,i)}getItemTransformMatrixInverse(){return ir([],this.getItemTransformMatrix())}getLocalTransformMatrix(e,t){const i=Sn.scale(this.transformOrigin||"50% 50% 0px",Di(e)?this.screenWidth:e,Di(t)?this.screenHeight:t),r=Ki();return Ni(r,r,i),qi(r,r,this.itemMatrix),Ni(r,r,Tr([],i)),r}getLocalTransformMatrixInverse(e,t){return ir([],this.getLocalTransformMatrix(e,t))}getDirectionTransformMatrix(e,t,i){const r=this.offsetX,s=this.offsetY,a=_t([],Sn.scale(this.transformOrigin||"50% 50% 0px",t,i),Tr([],e)),o=Ki();return Ni(o,o,[r,s,0]),Ni(o,o,e),Ni(o,o,a),qi(o,o,this.itemMatrix),Ni(o,o,Tr([],a)),o}getDirectionTopLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,0,0],e,t)}getDirectionLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t/2,0],e,t)}getDirectionTopMatrix(e,t){return this.getDirectionTransformMatrix([e/2,0,0],e,t)}getDirectionBottomLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t,0],e,t)}getDirectionTopRightMatrix(e,t){return this.getDirectionTransformMatrix([e,0,0],e,t)}getDirectionRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t/2,0],e,t)}getDirectionBottomRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t,0],e,t)}getDirectionBottomMatrix(e,t){return this.getDirectionTransformMatrix([e/2,t,0],e,t)}getAbsoluteMatrix(){let e=Ki();if(this.parent&&(qi(e,e,this.parent.absoluteMatrix),Ue(this.parent.getPerspectiveMatrix))){const t=this.parent.getPerspectiveMatrix();t&&qi(e,e,t)}return qi(e,e,this.getRelativeMatrix()),e.filter(t=>!isNaN(t)).length===0?Ki():e}getRelativeMatrix(){let e=Ki();const t=this.offsetX,i=this.offsetY;return Ni(e,e,[t,i,0]),qi(e,e,this.localMatrix),e}getRelativeMatrixInverse(){return ir([],this.getRelativeMatrix())}getTransformWithTranslate(e){e=e||this;let t=Ki();const i=e.offsetX,r=e.offsetY;return Ni(t,t,[i,r,0]),qi(t,t,e.localMatrix),t}getAbsoluteMatrixInverse(){return ir([],this.getAbsoluteMatrix())}getLocalVerties(e,t){return e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight,Ei(0,0,e,t,this.transformOrigin)}getVerties(e,t){e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight;let i=0,r=0;if(this.parent&&this.parent.is("project")===!1){const a=this.parent.contentBox;i=a.x,r=a.y}let s=Ei(i,r,e,t,this.transformOrigin);return Xe(s,this.absoluteMatrix)}getContentVerties(e,t){e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight;const i=Sn.scale(this.transformOrigin,e,t),r=this.get("padding-top")||0,s=this.get("padding-right")||0,a=this.get("padding-bottom")||0,o=this.get("padding-left")||0,l=Ei(0+o,0+r,e-o-s,t-r-a,this.transformOrigin);return l[4]=i,Xe(l,this.absoluteMatrix)}rectVerties(){return this.verties.filter((e,t)=>t<4)}getGuideVerties(){const e=this.originVerties;return[...e,Ae([],e[0],e[1],.5),Ae([],e[1],e[2],.5),Ae([],e[2],e[3],.5),Ae([],e[3],e[0],.5)]}getXList(){return[...new Set(this.guideVerties.map(e=>e[0]))]}getYList(){return[...new Set(this.guideVerties.map(e=>e[1]))]}get nestedAngle(){return this.parent?this.parent.nestedAngle+this.angle:this.angle||0}get toRectVerties(){return Xc([this])}get matrix(){const e=this.id,t=this.offsetX,i=this.offsetY,r=this.screenWidth,s=this.screenHeight,a=this.transform,o=this.transformOrigin||"50% 50% 0px",l=this.getTransformOriginMatrix(),c=this.getTransformOriginMatrixInverse(),h=this.parent.absoluteMatrix,d=this.parent.absoluteMatrixInverse,u=this.localMatrix,p=this.localMatrixInverse,f=this.itemMatrix,g=this.itemMatrixInverse,m=this.absoluteMatrix,v=this.absoluteMatrixInverse,b=this.relativeMatrix,_=this.relativeMatrixInverse,x={"to top left":this.getDirectionTopLeftMatrix(r,s),"to top":this.getDirectionTopMatrix(r,s),"to top right":this.getDirectionTopRightMatrix(r,s),"to right":this.getDirectionRightMatrix(r,s),"to bottom left":this.getDirectionBottomLeftMatrix(r,s),"to bottom":this.getDirectionBottomMatrix(r,s),"to bottom right":this.getDirectionBottomRightMatrix(r,s),"to left":this.getDirectionLeftMatrix(r,s)},S=this.verties,E=S.map(z=>z[0]),A=S.map(z=>z[1]);return{id:e,x:t,y:i,width:r,height:s,transform:a,originalTransformOrigin:o,verties:S,originVerties:this.originVerties,xList:E,yList:A,directionMatrix:x,parentMatrix:h,parentMatrixInverse:d,localMatrix:u,localMatrixInverse:p,itemMatrix:f,itemMatrixInverse:g,absoluteMatrix:m,absoluteMatrixInverse:v,relativeMatrix:b,relativeMatrixInverse:_,transformOriginMatrix:l,transformOriginMatrixInverse:c}}absolutePath(e=""){const t=e||this.d,i=new _e(t);return i.transformMat4(this.absoluteMatrix),i}invertPath(e=""){const t=new _e(e);return t.transformMat4(this.absoluteMatrixInverse),t}invertPoint(e){return Kt([],e,this.absoluteMatrixInverse)}invertPathString(e=""){return this.invertPath(e).d}updatePath(e){const t=this.matrix,i=new _e(e);let r=i.getBBox();const s=yr(r[1],r[0]),a=yr(r[3],r[0]);let o=Xe(Ei(r[0][0],r[0][1],s,a),t.absoluteMatrix),l=Xe(o,fa(Si([],o[4]),ui.createTransformMatrix(ui.parseStyle(t.transform),s,a),Si([],Tr([],o[4]))));const c=Or(Si([],l[0]),this.getLocalTransformMatrix(s,a)),h=aa([],Or(t.parentMatrixInverse,c,ir([],this.getLocalTransformMatrix(s,a))));return{d:i.translate(-r[0][0],-r[0][1]).d,x:h[0],y:h[1],width:s,height:a}}checkInAreaForAll(e){const t=[...this.checkInAreaForLayers(e)];return this.is("artboard")||this.is("project")||this.checkInArea(e)&&t.push(this),t}checkInAreaForLayers(e){var t=[];return this.layers.forEach(i=>{t.push.apply(t,i.checkInAreaForLayers(e)),i.checkInArea(e)&&t.push(i)}),t}getTransformOriginMatrix(){return Si([],Sn.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight))}getTransformOriginMatrixInverse(){return ir([],this.getTransformOriginMatrix())}recoverMatrix(e){const t=Or(this.absoluteMatrixInverse,e.absoluteMatrix),i=N0([],t),r=[],s=j0(r,i),a=r[2]?Bd(s*r[2]):0,o=Ki();D0(o,s,r);const[l,c]=aa([],Or(t,fa(e.transformOriginMatrix,o,e.transformOriginMatrixInverse)));return{x:l,y:c,angle:a}}resetMatrix(e){const t=Or(this.absoluteMatrixInverse,e.absoluteMatrix),i=N0([],t),r=[],s=j0(r,i),a=r[2]?Bd(s*r[2]):0,o=Ki();D0(o,s,r);const[l,c]=aa([],Or(t,fa(e.getTransformOriginMatrix(),o,e.getTransformOriginMatrixInverse())));e.reset({x:l,y:c,angle:a}),this.manager.setChanged("resetMatrix",this.id,{end:!0,childItemId:e==null?void 0:e.id})}setOrder(e){var t=this.parent,i=this.index;i>-1&&(t.children[i]=t.children[e],t.children[e]=this.id,this.manager.setChanged("setOrder",this.id,{targetIndex:e,startIndex:i,parentId:t.id}))}orderNext(){if(this.isLast){if(this.parent.next){let t=this.parent.next;t.enableHasChildren()?t.appendChild(this):t.insertAfter(this)}return}var e=this.index;e>-1&&this.setOrder(e+1)}orderPrev(){if(this.isFirst){const t=this.parent.prev;t&&t.insertBefore(this);return}var e=this.index;e>0&&this.setOrder(e-1)}orderFirst(){this.setOrder(0)}orderLast(){this.setOrder(this.parent.childrenLength-1)}orderTop(){}orderBottom(){}}const Y1={[At.DEFAULT]:$j,[At.GRID]:W1};class Cj extends Tj{getDefaultObject(e={}){return super.getDefaultObject(P({layout:At.DEFAULT,constraintsHorizontal:Tt.NONE,constraintsVertical:Tt.NONE,flexDirection:br.ROW,flexWrap:Bc.NOWRAP,justifyContent:uo.FLEX_START,alignItems:Ps.FLEX_START,alignContent:hy.FLEX_START,order:0,flexGrow:0,flexShrink:0,flexBasis:"auto",gap:0,resizingHorizontal:wt.FIXED,resizingVertical:wt.FIXED,gridTemplateRows:"auto",gridColumnGap:"0px",gridTemplateColumns:"auto",gridRowGap:"0px",gridTemplateAreas:"",gridAutoRows:"auto",gridAutoColumns:"auto",gridAutoFlow:"row"},e))}reset(e,t={origin:"*"}){const i=super.reset(e,t);return(this.hasChangedField("resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshResizableCache(),i}refreshResizableCache(){this.addCache("resizable",this.getAutoResizable())}get autoResizable(){return this.getCache("resizable")}getAutoResizable(){return!(this.parent.is("project")||this.resizingHorizontal===wt.FIXED&&this.resizingVertical===wt.FIXED&&this.constraintsHorizontal===Tt.NONE&&this.constraintsVertical===Tt.NONE)}get layout(){return this.get("layout")}get constraintsHorizontal(){return this.get("constraintsHorizontal")}set constraintsHorizontal(e){this.reset({constraintsHorizontal:e})}get constraintsVertical(){return this.get("constraintsVertical")}set constraintsVertical(e){this.reset({constraintsVertical:e})}get flexDirection(){return this.get("flexDirection")}set flexDirection(e){this.reset({flexDirection:e})}get flexWrap(){return this.get("flexWrap")}set flexWrap(e){this.reset({flexWrap:e})}get justifyContent(){return this.get("justifyContent")}set justifyContent(e){this.reset({justifyContent:e})}get alignItems(){return this.get("alignItems")}set alignItems(e){this.reset({alignItems:e})}get alignContent(){return this.get("alignContent")}set alignContent(e){this.reset({alignContent:e})}get order(){return this.get("order")}set order(e){this.reset({order:e})}get flexGrow(){return this.get("flexGrow")}set flexGrow(e){this.reset({flexGrow:e})}get flexShrink(){return this.get("flexShrink")}set flexShrink(e){this.reset({flexShrink:e})}get flexBasis(){return this.get("flexBasis")}set flexBasis(e){this.reset({flexBasis:e})}get gap(){return this.get("gap")}set gap(e){this.reset({gap:e})}get resizingHorizontal(){return this.get("resizingHorizontal")}set resizingHorizontal(e){this.reset({resizingHorizontal:e})}get resizingVertical(){return this.get("resizingVertical")}set resizingVertical(e){this.reset({resizingVertical:e})}get gridTemplateRows(){return this.get("gridTemplateRows")}set gridTemplateRows(e){this.reset({gridTemplateRows:e})}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.reset({gridColumnGap:e})}get gridTemplateColumns(){return this.get("gridTemplateColumns")}set gridTemplateColumns(e){this.reset({gridTemplateColumns:e})}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.reset({gridRowGap:e})}get gridTemplateAreas(){return this.get("gridTemplateAreas")}set gridTemplateAreas(e){this.reset({gridTemplateAreas:e})}get gridAutoRows(){return this.get("gridAutoRows")}set gridAutoRows(e){this.reset({gridAutoRows:e})}get gridAutoColumns(){return this.get("gridAutoColumns")}set gridAutoColumns(e){this.reset({gridAutoColumns:e})}get gridAutoFlow(){return this.get("gridAutoFlow")}set gridAutoFlow(e){this.reset({gridAutoFlow:e})}isLayoutItem(){var e;return!!((e=this.parent)!=null&&e.hasLayout())}hasConstraints(){return this.isLayout(At.DEFAULT)}hasLayout(){return!this.hasConstraints()||Boolean(this.layout)===!1}isLayout(e){return this.layout===e}isInDefault(){var t;const e=((t=this.parent)==null?void 0:t.layout)||"default";return At.DEFAULT===e}isInGrid(){return this.isInLayout(At.GRID)}isInFlex(){return this.isInLayout(At.FLEX)}isInLayout(e){var t;return((t=this.parent)==null?void 0:t.layout)===e}changeConstraints(e,t,i=!1){const r=this.get(e);let s=t;r===Tt.MAX?(t===Tt.MAX&&(s=Tt.SCALE),i&&t===Tt.MIN&&(s=Tt.STRETCH)):r===Tt.MIN?t===Tt.MIN?s=Tt.SCALE:i&&t===Tt.MAX&&(s=Tt.STRETCH):r===Tt.STRETCH&&(t===Tt.MIN?s=Tt.MAX:t===Tt.MAX&&(s=Tt.MIN)),this.reset({[e]:s})}startToCacheChildren(){var e;(e=Y1[this.layout])==null||e.startCache(this)}recoverChildren(){var e;(e=Y1[this.layout])==null||e.recover(this)}}const Ej=["appearance","position","right","bottom","rootVariable","variable","transform","filter","backdropFilter","backgroundColor","backgroundImage","borderRadius","border","boxShadow","clipPath","color","perspectiveOrigin","transformOrigin","transformStyle","perspective","mixBlendMode","overflow","opacity","box-model","layout","flex-layout","grid-layout","animation","transition","pattern","boolean-operation"],K1={};Ej.forEach(function(n){K1[n]=!0});class Ij extends Cj{getDefaultObject(e={}){return super.getDefaultObject(P({rootVariable:"",variable:"",color:"black",overflow:"visible",opacity:1,pattern:"",selectors:[],svg:[],gridColumnStart:"",gridColumnEnd:"",gridRowStart:"",gridRowEnd:"",gridColumnGap:"",gridRowGap:""},e))}get gridColumnStart(){return this.get("gridColumnStart")}set gridColumnStart(e){this.set("gridColumnStart",e)}get gridColumnEnd(){return this.get("gridColumnEnd")}set gridColumnEnd(e){this.set("gridColumnEnd",e)}get gridRowStart(){return this.get("gridRowStart")}set gridRowStart(e){this.set("gridRowStart",e)}get gridRowEnd(){return this.get("gridRowEnd")}set gridRowEnd(e){this.set("gridRowEnd",e)}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.set("gridColumnGap",e)}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.set("gridRowGap",e)}get pattern(){return this.get("pattern")}set pattern(e){this.reset({pattern:e})}get selectors(){return this.get("selectors")}set selectors(e){this.reset({selectors:e})}get svg(){return this.get("svg")}set svg(e){this.reset({svg:e})}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.reset({rootVariable:e})}get variable(){return this.get("variable")}set variable(e){this.reset({variable:e})}get filter(){return this.get("filter")}set filter(e){this.reset({filter:e})}get backdropFilter(){return this.get("backdropFilter")}set backdropFilter(e){this.reset({backdropFilter:e})}get backgroundColor(){return this.get("backgroundColor")}set backgroundColor(e){this.reset({backgroundColor:e})}get backgroundImage(){return this.get("backgroundImage")}set backgroundImage(e){this.reset({backgroundImage:e})}get textClip(){return this.get("textClip")}set textClip(e){this.reset({textClip:e})}get borderRadius(){return this.get("borderRadius")}set borderRadius(e){this.reset({borderRadius:e})}get border(){return this.get("border")}set border(e){this.reset({border:e})}get boxShadow(){return this.get("boxShadow")}set boxShadow(e){this.reset({boxShadow:e})}get textShadow(){return this.get("textShadow")}set textShadow(e){this.reset({textShadow:e})}get clipPath(){return this.get("clipPath")}set clipPath(e){this.reset({clipPath:e})}get color(){return this.get("color")}set color(e){this.reset({color:e})}get opacity(){return this.get("opacity")}set opacity(e){this.reset({opacity:e})}get transformStyle(){return this.get("transformStyle")}set transformStyle(e){this.reset({transformStyle:e})}get fontSize(){return this.get("fontSize")}set fontSize(e){this.reset({fontSize:e})}get fontFamily(){return this.get("fontFamily")}set fontFamily(e){this.reset({fontFamily:e})}get fontWeight(){return this.get("fontWeight")}set fontWeight(e){this.reset({fontWeight:e})}get fontStyle(){return this.get("fontStyle")}set fontStyle(e){this.reset({fontStyle:e})}get fontVariant(){return this.get("fontVariant")}set fontVariant(e){this.reset({fontVariant:e})}get fontStretch(){return this.get("fontStretch")}set fontStretch(e){this.reset({fontStretch:e})}get lineHeight(){return this.get("lineHeight")}set lineHeight(e){this.reset({lineHeight:e})}get letterSpacing(){return this.get("letterSpacing")}set letterSpacing(e){this.reset({letterSpacing:e})}get wordSpacing(){return this.get("wordSpacing")}set wordSpacing(e){this.reset({wordSpacing:e})}get textDecoration(){return this.get("textDecoration")}set textDecoration(e){this.reset({textDecoration:e})}get textAlign(){return this.get("textAlign")}set textAlign(e){this.reset({textAlign:e})}get textTransform(){return this.get("textTransform")}set textTransform(e){this.reset({textTransform:e})}get textOverflow(){return this.get("text-overflow")}set textOverflow(e){this.reset({"text-overflow":e})}get textIndent(){return this.get("textIndent")}set textIndent(e){this.reset({textIndent:e})}get mixBlendMode(){return this.get("mixBlendMode")}set mixBlendMode(e){this.reset({mixBlendMode:e})}get visibility(){return this.get("visibility")}set visibility(e){this.reset({visibility:e})}get zIndex(){return this.get("z-index")}set zIndex(e){this.reset({"z-index":e})}get overflow(){return this.get("overflow")}set overflow(e){this.reset({overflow:e})}get animation(){return this.get("animation")}set animation(e){this.reset({animation:e})}get transition(){return this.get("transition")}set transition(e){this.reset({transition:e})}get marginTop(){return this.get("marginTop")}set marginTop(e){this.reset({marginTop:e})}get marginRight(){return this.get("marginRight")}set marginRight(e){this.reset({marginRight:e})}get marginBottom(){return this.get("marginBottom")}set marginBottom(e){this.reset({marginBottom:e})}get marginLeft(){return this.get("marginLeft")}set marginLeft(e){this.reset({marginLeft:e})}get paddingTop(){return this.get("paddingTop")}set paddingTop(e){this.reset({paddingTop:e})}get paddingRight(){return this.get("paddingRight")}set paddingRight(e){this.reset({paddingRight:e})}get paddingBottom(){return this.get("paddingBottom")}set paddingBottom(e){this.reset({paddingBottom:e})}get paddingLeft(){return this.get("paddingLeft")}set paddingLeft(e){this.reset({paddingLeft:e})}editable(e){switch(e){case"svg-item":case"transformOrigin":case"perspective":case"perspectiveOrigin":return!1}return Boolean(K1[e])}get changedBoxModel(){return this.hasChangedField("marginTop","marginLeft","marginBottom","marginRight","paddingTop","paddingLeft","paddingRight","paddingBottom")}get changedFlexLayout(){return this.hasChangedField("flexDirection","flexWrap","justifyContent","alignItems","alignContent","order","flexBasis","flexGrow","flexShrink","flexFlow")}get changedGridLayout(){return this.hasChangedField("gridTemplateRows","gridTemplateColumns","gridTemplateAreas","gridAutoRows","gridAutoColumns","gridAutoFlow","gridRowGap","gridColumnGap","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea")}get changedLayoutItem(){return this.hasChangedField("resizingHorizontal","resizingVertical")}get changedLayout(){return this.hasChangedField("layout")||this.changedBoxModel||this.changedFlexLayout||this.changedGridLayout||this.changedLayoutItem}addSelector(e){return this.selectors.push(e),e}createSelector(e={}){return this.addSelector(new yu(P({checked:!0},e)))}removePropertyList(e,t){e.splice(t,1)}removeSelector(e){this.removePropertyList(this.selectors,e)}enableHasChildren(){return!0}sortItem(e,t,i){e.splice(i+(t{this.traverse(r,t)}))}tree(e){var t=[];return this.children.forEach(i=>{this.traverse(i,t,e)}),t}convert(e){return e=super.convert(e),e.padding&&(e.paddingTop=y.parse(e.padding),e.paddingRight=y.parse(e.padding),e.paddingBottom=y.parse(e.padding),e.paddingLeft=y.parse(e.padding),delete e.padding),e}reset(e,t={origin:"*"}){const i=super.reset(e,t);if(this.hasChangedField("clipPath")&&this.setClipPathCache(),this.hasChangedField("width","height")&&this.cacheClipPath){const r=this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d;this.clipPath=`path(${r})`,this.modelManager.setChanged("reset",this.id,{clipPath:this.clipPath})}return this.hasChangedField("backgroundImage","pattern")&&this.setBackgroundImageCache(),i}setBackgroundImageCache(){let e=[];if(this.pattern){const r=this.computed("pattern",s=>tn.parseStyle(s).map(a=>Ot.parseStyle(hn(a.toCSS()))));for(var t=0,i=r.length;tOt.parseStyle(hn(s)));e.push.apply(e,r.filter(s=>s.visibility!==xn.HIDDEN))}if(e.length){const r=this.top;this.cacheBackgroundImage=Ot.joinCSS(e);const s=e.filter(o=>o.type===ue.URL).map(o=>o.image.url);let a=this.cacheBackgroundImage["background-image"];s.forEach(o=>{const l=r.getImageValueById(o);a=a.replace(o,`"${l}"`)}),this.cacheBackgroundImage["background-image"]=a}else this.cacheBackgroundImage={},this.cacheBackgroundImageOriginal=[]}setClipPathCache(){var e=gt.parseStyle(this.clipPath);this.cacheClipPathObject=e,e.type==="path"&&(this.cacheClipPath=new _e(e.value.trim()),this.cacheClipPathWidth=this.width,this.cacheClipPathHeight=this.height)}setCache(){super.setCache(),this.setClipPathCache()}get clipPathString(){if(this.cacheClipPath||this.setClipPathCache(),this.cacheClipPath)return this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d}getBackgroundImage(e){return Ot.parseStyle(hn(this.backgroundImage))[e||0]}get borderWidth(){const e=Sa.parseStyle(this.border),t=Sa.parseValue(e.border);return t!=null&&t.width?{borderLeftWidth:t==null?void 0:t.width,borderRightWidth:t==null?void 0:t.width,borderTopWidth:t==null?void 0:t.width,borderBottomWidth:t==null?void 0:t.width}:{borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}}get contentBox(){const i=this.screenWidth,r=this.screenHeight;{const s=this.borderWidth;return{x:0+s.borderLeftWidth,y:0+s.borderTopWidth,width:i-s.borderLeftWidth-s.borderRightWidth,height:r-s.borderTopWidth-s.borderBottomWidth}}}getGradientLineLength(e,t,i){return Math.abs(e*Math.sin(lr(i)))+Math.abs(t*Math.cos(lr(i)))}createBackgroundImageMatrix(e){const t=this.contentBox,i=this.getBackgroundImage(e),{image:r}=i,s=i.getOffset(t),a=Xe(Ei(s.x,s.y,s.width,s.height),this.absoluteMatrix),o={backRect:s,backVerties:a,absoluteMatrix:this.absoluteMatrix,backgroundImage:i};switch(r.type){case ue.RADIAL:case ue.REPEATING_RADIAL:case ue.CONIC:case ue.REPEATING_CONIC:let[l,c]=r.radialPosition;l=="center"&&(l=y.percent(50)),c=="center"&&(c=y.percent(50));const h=l.toPx(s.width),d=c.toPx(s.height),u=Xe([[h.value+s.x,d.value+s.y,0],[h.value+s.x,d.value+s.y-1,0]],this.absoluteMatrix);if(o.radialCenterPosition=u[0],o.radialCenterStick=u[1],o.radialCenterPoint=[h.value,d.value,0],r.type===ue.RADIAL||r.type===ue.REPEATING_RADIAL){const{startPoint:S,endPoint:E,shapePoint:A}=r.getStartEndPoint(o),[z,Z,Y]=Xe([S,E,A],this.absoluteMatrix);o.radialCenterPosition=z,o.startPoint=z,o.endPoint=Z,o.shapePoint=Y,o.colorsteps=r.colorsteps.map(T=>{const V=T.toLength();return{id:T.id,cut:T.cut,color:T.color,timing:T.timing,timingCount:T.timingCount,pos:Ae([],o.startPoint,o.endPoint,V.value/100)}})}else if(r.type===ue.CONIC||r.type===ue.REPEATING_CONIC){const{startPoint:S,endPoint:E,shapePoint:A}=r.getStartEndPoint(o),[z,Z,Y]=Xe([S,E,A],this.absoluteMatrix);o.radialCenterPosition=z,o.startPoint=z,o.endPoint=Z,o.shapePoint=Y,[o.startPoint,o.endPoint,o.shapePoint]=Xe([o.startPoint,o.endPoint,o.shapePoint],cr(r.angle,o.radialCenterPosition));const T=o.shapePoint;o.colorsteps=r.colorsteps.map(V=>{const oe=V.percent*3.6,[B]=Xe([T],cr(oe,o.radialCenterPosition));return{id:V.id,cut:V.cut,color:V.color,timing:V.timing,timingCount:V.timingCount,pos:B}})}break;case ue.LINEAR:case ue.REPEATING_LINEAR:o.gradientLineLength=this.getGradientLineLength(s.width,s.height,r.angle),o.centerPosition=Ae([],a[0],a[2],.5);const p=_t([],o.centerPosition,[0,o.gradientLineLength/2,0]),f=ft([],o.centerPosition,[0,o.gradientLineLength/2,0]),g=vr(p),m=vr(f),[v,b,_,x]=Xe([p,f,g,m],cr(r.angle,o.centerPosition));o.endPoint=b,o.startPoint=v,o.areaStartPoint=_,o.areaEndPoint=x,o.colorsteps=r.colorsteps.map(S=>{const E=S.toLength();return{id:S.id,cut:S.cut,color:S.color,timing:S.timing,timingCount:S.timingCount,pos:Ae([],o.startPoint,o.endPoint,E.value/100)}});break}return o}}class wa extends Ij{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"layer",name:"New Layer",tagName:"div"},e))}getDefaultTitle(){return"Layer"}}class Lj extends wa{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"artboard",name:"New ArtBoard",width:1e3,height:1e3,backgroundColor:"white",transformStyle:"flat"},e))}getDefaultTitle(){return"ArtBoard"}getIcon(){return We.artboard}editable(e){switch(e){case"border":case"borderRadius":return!1;case"artboardSize":case"layout":return!0}return super.editable(e)}}const kj=["jpg","jpeg","png","gif","svg"];class _h extends gg{getDefaultObject(e={}){return super.getDefaultObject(P({type:"url",url:"",datauri:"",patternUnits:"userSpaceOnUse",patternWidth:"100%",patternHeight:"100%",imageX:"0%",imageY:"0%",imageWidth:"100%",imageHeight:"100%"},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("url","datauri","patternUnits","patternWidth","patternHeight","imageX","imageY","imageWidth","imageHeight"))}static parse(e){var t=e.split("(")[1].split(")")[0],[i,r]=t.trim().split("#");if(!r)return new _h({url:i});var[s,a,o,l,c,h,d]=r.split(",");return new _h({patternUnits:s,patternWidth:a,patternHeight:o,imageX:l,imageY:c,imageWidth:h,imageHeight:d,url:i})}isUrl(){return!0}static isImageFile(e){return kj.includes(e)}toString(){var e=this.json,{patternUnits:t,patternWidth:i,patternHeight:r,imageX:s,imageY:a,imageWidth:o,imageHeight:l,url:c}=e,h=[t,i,r,s,a,o,l].join(",").trim();return`url(${c}#${h})`}toSVGString(e,t={}){var{patternUnits:i,patternWidth:r,patternHeight:s,imageX:a,imageY:o,imageWidth:l,imageHeight:c}=this.json;const h=y.parse(r),d=y.parse(s),u=y.parse(a),p=y.parse(o),f=y.parse(l),g=y.parse(c),m=t.width?h.toPx(t.width).value:h,v=t.height?d.toPx(t.height).value:d;return` - - +`)}copyPropertyList(e,t){var r=b({},e[t]);e.splice(t,0,r)}removePropertyList(e,t){e.splice(t,1)}getSVGFilterIndex(e){var r;var t=this.svgfilters.map((i,a)=>({id:i.id,index:a})).filter(i=>i.id===e);return t.length?(r=t==null?void 0:t[0])==null?void 0:r.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=b(b({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(b({id:fr()},e))}}class n6 extends a6{getDefaultObject(e={}){return super.getDefaultObject(b({angle:0,x:0,y:0,width:300,height:300,position:"absolute",perspective:"",perspectiveOrigin:"",transformOrigin:"50% 50% 0px"},e))}get isAbsolute(){return this.position==="absolute"}get isDragSelectable(){return!0}get isBooleanItem(){}get resizableWitChildren(){return!1}get perspective(){return this.get("perspective")}get perspectiveOrigin(){return this.get("perspectiveOrigin")}get transform(){return`rotateZ(${p.deg(this.angle)})`}get localMatrix(){return this.hasCache("localTransform")||this.addCache("localTransform",this.getLocalTransformMatrix()),this.getCache("localTransform")||this.getLocalTransformMatrix()}get localMatrixInverse(){return this.hasCache("localTransformInverse")||this.addCache("localTransformInverse",this.getLocalTransformMatrixInverse()),this.getCache("localTransformInverse")||this.getLocalTransformMatrixInverse()}get transformWithTranslate(){return this.hasCache("transformWithTranslate")||this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslate")||this.getTransformWithTranslate(this)}get transformWithTranslateToTranspose(){return this.hasCache("transformWithTranslateTranspose")||this.addCache("transformWithTranslateTranspose",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateTranspose")||$d([],this.getTransformWithTranslate(this))}get transformWithTranslateInverse(){return this.hasCache("transformWithTranslateInverse")||this.addCache("transformWithTranslateInverse",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateInverse")||Dt([],this.getTransformWithTranslate(this))}get itemMatrix(){return this.hasCache("itemTransform")||this.addCache("itemTransform",this.getItemTransformMatrix()),this.getCache("itemTransform")||this.getItemTransformMatrix()}get itemMatrixInverse(){return this.hasCache("itemTransformInverse")||this.addCache("itemTransformInverse",this.getItemTransformMatrixInverse()),this.getCache("itemTransformInverse")||this.getItemTransformMatrixInverse()}get absoluteMatrix(){return this.hasCache("absoluteMatrix")||this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.getCache("absoluteMatrix")||this.getAbsoluteMatrix()}get absoluteMatrixInverse(){return this.hasCache("absoluteMatrixInverse")||this.addCache("absoluteMatrixInverse",this.getAbsoluteMatrixInverse()),this.getCache("absoluteMatrixInverse")||this.getAbsoluteMatrixInverse()}get relativeMatrix(){return this.hasCache("relativeMatrix")||this.addCache("relativeMatrix",this.getRelativeMatrix()),this.getCache("relativeMatrix")||this.getRelativeMatrix()}get relativeMatrixInverse(){return this.hasCache("relativeMatrixInverse")||this.addCache("relativeMatrixInverse",this.getRelativeMatrixInverse()),this.getCache("relativeMatrixInverse")||this.getRelativeMatrixInverse()}get verties(){return this.hasCache("verties")||this.addCache("verties",this.getVerties()),this.getCache("verties")||this.getVerties()}get contentVerties(){return this.hasCache("contentVerties")||this.addCache("contentVerties",this.getContentVerties()),this.getCache("contentVerties")||this.getContentVerties()}get originVerties(){return this.hasCache("vertiesWithoutTransformOrigin")||this.addCache("vertiesWithoutTransformOrigin",this.rectVerties()),this.getCache("vertiesWithoutTransformOrigin")||this.rectVerties()}get localVerties(){return this.hasCache("localVerties")||this.addCache("localVerties",this.getLocalVerties()),this.getCache("localVerties")||this.getLocalVerties()}get guideVerties(){return this.hasCache("guideVerties")||this.addCache("guideVerties",this.getGuideVerties()),this.getCache("guideVerties")||this.getGuideVerties()}get xList(){return this.hasCache("xList")||this.addCache("xList",this.getXList()),this.getCache("xList")||this.getXList()}get yList(){return this.hasCache("yList")||this.addCache("yList",this.getYList()),this.getCache("yList")||this.getYList()}get areaPosition(){return this.hasCache("areaPosition")||this.addCache("areaPosition",this.getAreaPosition(100)),this.getCache("areaPosition")||this.getAreaPosition(100)}get offsetX(){return this.x}get offsetY(){return this.y}get screenWidth(){return this.width}get screenHeight(){return this.height}get y(){return this.get("y")}set y(e){this.set("y",e)}get x(){return this.get("x")}set x(e){this.set("x",e)}get width(){return this.get("width")}set width(e){this.set("width",e)}get height(){return this.get("height")}set height(e){this.set("height",e)}get angle(){return this.get("angle")}set angle(e){this.set("angle",e)}get position(){return this.get("position")}set position(e){this.set("position",e)}get transformOrigin(){return this.get("transformOrigin")}set transformOrigin(e){this.reset({transformOrigin:e})}get translate(){return[0,0,0]}get scale(){return[1,1,1]}get rotate(){return[0,0,Ht(this.angle)]}get origin(){return Vr.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight)}get absoluteOrigin(){return le([this.origin],this.absoluteMatrix)[0]}get quat(){return sv(Fl(),0,0,this.angle)}getAreaPosition(e=100){const t=this.getVerties(),r=Or(t),[i,a]=ec(r[0][0],r[0][1],e),[n,o]=ec(r[2][0],r[2][1],e);return{column:[a,o],row:[i,n]}}reset(e,t={origin:"*"}){const r=super.reset(e,t);return(this.hasChangedField("children","x","y","width","height","boxModel","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshMatrixCache(),r}changed(){super.changed(),this.changedRect=this.hasChangedField("children","x","y","width","height","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")}setParentId(e){super.setParentId(e),this.refreshMatrixCache()}refreshMatrixCache(){this.setCacheItemTransformMatrix(),this.setCacheLocalTransformMatrix(),this.setCacheAbsoluteMatrix(),this.setCacheLocalVerties(),this.setCacheVerties(),this.setCacheGuideVerties(),this.setCacheAreaPosition(),this.layers.forEach(e=>{e.refreshMatrixCache()})}setCacheItemTransformMatrix(){this.addCache("itemTransform",this.getItemTransformMatrix()),this.addCache("itemTransformInverse",Dt([],this.getCache("itemTransform")))}setCacheLocalTransformMatrix(){this.addCache("localTransform",this.getLocalTransformMatrix()),this.addCache("localTransformInverse",Dt([],this.getCache("localTransform"))),this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.addCache("transformWithTranslateInverse",Dt([],this.getCache("transformWithTranslate"))),this.addCache("transformWithTranslateTranspose",$d([],this.getCache("transformWithTranslate")))}setCacheAbsoluteMatrix(){this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.addCache("absoluteMatrixInverse",Dt([],this.getCache("absoluteMatrix"))),this.addCache("relativeMatrix",this.getRelativeMatrix()),this.addCache("relativeMatrixInverse",Dt([],this.getCache("relativeMatrix")))}setCacheVerties(){this.addCache("verties",this.getVerties()),this.addCache("contentVerties",this.getContentVerties()),this.addCache("vertiesWithoutTransformOrigin",this.rectVerties())}setCacheLocalVerties(){this.addCache("localVerties",this.getLocalVerties())}setCacheGuideVerties(){this.addCache("guideVerties",this.getGuideVerties()),this.addCache("xList",this.getXList()),this.addCache("yList",this.getYList())}setCacheAreaPosition(){this.addCache("areaPosition",this.getAreaPosition(100))}move(e=[0,0,0]){this.reset({x:Ue(this.offsetX+e[0]),y:Ue(this.offsetY+e[1])})}moveByCenter(e=[0,0,0]){this.reset({x:e[0]-this.screenWidth/2,y:e[1]-this.screenHeight/2})}absoluteMove(e=[0,0,0]){var o;const t=this.verties[4],r=we([],t,e),i=le([t,r],((o=this.parent)==null?void 0:o.absoluteMatrixInverse)||Nm([])),a=_e([],i[1],i[0]),n=this.attrs("x","y");return this.move(a),n}startToCacheChildren(){}recoverChildren(){}resize(e,t){this.startToCacheChildren(),this.reset({width:e,height:t}),this.recoverChildren()}setAngle(e=0){this.reset({angle:e})}addAngle(e=0){this.setAngle(this.angle+e)}checkInArea(e){return hc(e,this.originVerties)}hasPoint(e,t){return this.isPointInRect(e,t)}isPointInRect(e,t){return Ts(this.originVerties,e,t)}isIncludeByArea(e){return this.originVerties.map(t=>Ts(e,...t)).filter(Boolean).length===4}getPerspectiveMatrix(){if(!this.perspective)return;let[t=p.percent(50),r=p.percent(50)]=Vr.parseStyle(this.perspectiveOrigin);const i=this.screenWidth,a=this.screenHeight;t=t.toPx(i).value,r=r.toPx(a).value;const n=Vt();if(kt(n,n,[t,r,0]),this.perspective&&this.perspective!="none")Ot(n,n,Bi(1,0,0,0,0,1,0,0,0,0,1,0,0,0,-1/p.parse(this.perspective).value,1));else return;return kt(n,n,[-t,-r,0]),n}getItemTransformMatrix(){const e=ct.parseStyle(this.transform),t=this.screenWidth,r=this.screenHeight;return ct.createTransformMatrix(e,t,r)}getItemTransformMatrixInverse(){return Dt([],this.getItemTransformMatrix())}getLocalTransformMatrix(e,t){const r=Vr.scale(this.transformOrigin||"50% 50% 0px",Ct(e)?this.screenWidth:e,Ct(t)?this.screenHeight:t),i=Vt();return kt(i,i,r),Ot(i,i,this.itemMatrix),kt(i,i,tr([],r)),i}getLocalTransformMatrixInverse(e,t){return Dt([],this.getLocalTransformMatrix(e,t))}getDirectionTransformMatrix(e,t,r){const i=this.offsetX,a=this.offsetY,n=we([],Vr.scale(this.transformOrigin||"50% 50% 0px",t,r),tr([],e)),o=Vt();return kt(o,o,[i,a,0]),kt(o,o,e),kt(o,o,n),Ot(o,o,this.itemMatrix),kt(o,o,tr([],n)),o}getDirectionTopLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,0,0],e,t)}getDirectionLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t/2,0],e,t)}getDirectionTopMatrix(e,t){return this.getDirectionTransformMatrix([e/2,0,0],e,t)}getDirectionBottomLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t,0],e,t)}getDirectionTopRightMatrix(e,t){return this.getDirectionTransformMatrix([e,0,0],e,t)}getDirectionRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t/2,0],e,t)}getDirectionBottomRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t,0],e,t)}getDirectionBottomMatrix(e,t){return this.getDirectionTransformMatrix([e/2,t,0],e,t)}getAbsoluteMatrix(){let e=Vt();if(this.parent&&(Ot(e,e,this.parent.absoluteMatrix),de(this.parent.getPerspectiveMatrix))){const t=this.parent.getPerspectiveMatrix();t&&Ot(e,e,t)}return Ot(e,e,this.getRelativeMatrix()),e.filter(t=>!isNaN(t)).length===0?Vt():e}getRelativeMatrix(){let e=Vt();const t=this.offsetX,r=this.offsetY;return kt(e,e,[t,r,0]),Ot(e,e,this.localMatrix),e}getRelativeMatrixInverse(){return Dt([],this.getRelativeMatrix())}getTransformWithTranslate(e){e=e||this;let t=Vt();const r=e.offsetX,i=e.offsetY;return kt(t,t,[r,i,0]),Ot(t,t,e.localMatrix),t}getAbsoluteMatrixInverse(){return Dt([],this.getAbsoluteMatrix())}getLocalVerties(e,t){return e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight,xt(0,0,e,t,this.transformOrigin)}getVerties(e,t){e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight;let r=0,i=0;if(this.parent&&this.parent.is("project")===!1){const n=this.parent.contentBox;r=n.x,i=n.y}let a=xt(r,i,e,t,this.transformOrigin);return le(a,this.absoluteMatrix)}getContentVerties(e,t){e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight;const r=Vr.scale(this.transformOrigin,e,t),i=this.get("padding-top")||0,a=this.get("padding-right")||0,n=this.get("padding-bottom")||0,o=this.get("padding-left")||0,l=xt(0+o,0+i,e-o-a,t-i-n,this.transformOrigin);return l[4]=r,le(l,this.absoluteMatrix)}rectVerties(){return this.verties.filter((e,t)=>t<4)}getGuideVerties(){const e=this.originVerties;return[...e,te([],e[0],e[1],.5),te([],e[1],e[2],.5),te([],e[2],e[3],.5),te([],e[3],e[0],.5)]}getXList(){return[...new Set(this.guideVerties.map(e=>e[0]))]}getYList(){return[...new Set(this.guideVerties.map(e=>e[1]))]}get nestedAngle(){return this.parent?this.parent.nestedAngle+this.angle:this.angle||0}get toRectVerties(){return qa([this])}get matrix(){const e=this.id,t=this.offsetX,r=this.offsetY,i=this.screenWidth,a=this.screenHeight,n=this.transform,o=this.transformOrigin||"50% 50% 0px",l=this.getTransformOriginMatrix(),c=this.getTransformOriginMatrixInverse(),h=this.parent.absoluteMatrix,u=this.parent.absoluteMatrixInverse,d=this.localMatrix,v=this.localMatrixInverse,g=this.itemMatrix,y=this.itemMatrixInverse,P=this.absoluteMatrix,S=this.absoluteMatrixInverse,V=this.relativeMatrix,E=this.relativeMatrixInverse,I={"to top left":this.getDirectionTopLeftMatrix(i,a),"to top":this.getDirectionTopMatrix(i,a),"to top right":this.getDirectionTopRightMatrix(i,a),"to right":this.getDirectionRightMatrix(i,a),"to bottom left":this.getDirectionBottomLeftMatrix(i,a),"to bottom":this.getDirectionBottomMatrix(i,a),"to bottom right":this.getDirectionBottomRightMatrix(i,a),"to left":this.getDirectionLeftMatrix(i,a)},O=this.verties,B=O.map(X=>X[0]),U=O.map(X=>X[1]);return{id:e,x:t,y:r,width:i,height:a,transform:n,originalTransformOrigin:o,verties:O,originVerties:this.originVerties,xList:B,yList:U,directionMatrix:I,parentMatrix:h,parentMatrixInverse:u,localMatrix:d,localMatrixInverse:v,itemMatrix:g,itemMatrixInverse:y,absoluteMatrix:P,absoluteMatrixInverse:S,relativeMatrix:V,relativeMatrixInverse:E,transformOriginMatrix:l,transformOriginMatrixInverse:c}}absolutePath(e=""){const t=e||this.d,r=new K(t);return r.transformMat4(this.absoluteMatrix),r}invertPath(e=""){const t=new K(e);return t.transformMat4(this.absoluteMatrixInverse),t}invertPoint(e){return Ze([],e,this.absoluteMatrixInverse)}invertPathString(e=""){return this.invertPath(e).d}updatePath(e){const t=this.matrix,r=new K(e);let i=r.getBBox();const a=Kt(i[1],i[0]),n=Kt(i[3],i[0]);let o=le(xt(i[0][0],i[0][1],a,n),t.absoluteMatrix),l=le(o,Ki(mt([],o[4]),ct.createTransformMatrix(ct.parseStyle(t.transform),a,n),mt([],tr([],o[4]))));const c=ar(mt([],l[0]),this.getLocalTransformMatrix(a,n)),h=Ni([],ar(t.parentMatrixInverse,c,Dt([],this.getLocalTransformMatrix(a,n))));return{d:r.translate(-i[0][0],-i[0][1]).d,x:h[0],y:h[1],width:a,height:n}}checkInAreaForAll(e){const t=[...this.checkInAreaForLayers(e)];return this.is("artboard")||this.is("project")||this.checkInArea(e)&&t.push(this),t}checkInAreaForLayers(e){var t=[];return this.layers.forEach(r=>{t.push.apply(t,r.checkInAreaForLayers(e)),r.checkInArea(e)&&t.push(r)}),t}getTransformOriginMatrix(){return mt([],Vr.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight))}getTransformOriginMatrixInverse(){return Dt([],this.getTransformOriginMatrix())}recoverMatrix(e){const t=ar(this.absoluteMatrixInverse,e.absoluteMatrix),r=wd([],t),i=[],a=Td(i,r),n=i[2]?co(a*i[2]):0,o=Vt();Sd(o,a,i);const[l,c]=Ni([],ar(t,Ki(e.transformOriginMatrix,o,e.transformOriginMatrixInverse)));return{x:l,y:c,angle:n}}resetMatrix(e){const t=ar(this.absoluteMatrixInverse,e.absoluteMatrix),r=wd([],t),i=[],a=Td(i,r),n=i[2]?co(a*i[2]):0,o=Vt();Sd(o,a,i);const[l,c]=Ni([],ar(t,Ki(e.getTransformOriginMatrix(),o,e.getTransformOriginMatrixInverse())));e.reset({x:l,y:c,angle:n}),this.manager.setChanged("resetMatrix",this.id,{end:!0,childItemId:e==null?void 0:e.id})}setOrder(e){var t=this.parent,r=this.index;r>-1&&(t.children[r]=t.children[e],t.children[e]=this.id,this.manager.setChanged("setOrder",this.id,{targetIndex:e,startIndex:r,parentId:t.id}))}orderNext(){if(this.isLast){if(this.parent.next){let t=this.parent.next;t.enableHasChildren()?t.appendChild(this):t.insertAfter(this)}return}var e=this.index;e>-1&&this.setOrder(e+1)}orderPrev(){if(this.isFirst){const t=this.parent.prev;t&&t.insertBefore(this);return}var e=this.index;e>0&&this.setOrder(e-1)}orderFirst(){this.setOrder(0)}orderLast(){this.setOrder(this.parent.childrenLength-1)}orderTop(){}orderBottom(){}}const kp={[Ae.DEFAULT]:s6,[Ae.GRID]:Cp};class o6 extends n6{getDefaultObject(e={}){return super.getDefaultObject(b({layout:Ae.DEFAULT,constraintsHorizontal:Me.NONE,constraintsVertical:Me.NONE,flexDirection:Zt.ROW,flexWrap:Ua.NOWRAP,justifyContent:Cs.FLEX_START,alignItems:vi.FLEX_START,alignContent:Qd.FLEX_START,order:0,flexGrow:0,flexShrink:0,flexBasis:"auto",gap:0,resizingHorizontal:Ce.FIXED,resizingVertical:Ce.FIXED,gridTemplateRows:"auto",gridColumnGap:"0px",gridTemplateColumns:"auto",gridRowGap:"0px",gridTemplateAreas:"",gridAutoRows:"auto",gridAutoColumns:"auto",gridAutoFlow:"row"},e))}reset(e,t={origin:"*"}){const r=super.reset(e,t);return(this.hasChangedField("resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshResizableCache(),r}refreshResizableCache(){this.addCache("resizable",this.getAutoResizable())}get autoResizable(){return this.getCache("resizable")}getAutoResizable(){return!(this.parent.is("project")||this.resizingHorizontal===Ce.FIXED&&this.resizingVertical===Ce.FIXED&&this.constraintsHorizontal===Me.NONE&&this.constraintsVertical===Me.NONE)}get layout(){return this.get("layout")}get constraintsHorizontal(){return this.get("constraintsHorizontal")}set constraintsHorizontal(e){this.reset({constraintsHorizontal:e})}get constraintsVertical(){return this.get("constraintsVertical")}set constraintsVertical(e){this.reset({constraintsVertical:e})}get flexDirection(){return this.get("flexDirection")}set flexDirection(e){this.reset({flexDirection:e})}get flexWrap(){return this.get("flexWrap")}set flexWrap(e){this.reset({flexWrap:e})}get justifyContent(){return this.get("justifyContent")}set justifyContent(e){this.reset({justifyContent:e})}get alignItems(){return this.get("alignItems")}set alignItems(e){this.reset({alignItems:e})}get alignContent(){return this.get("alignContent")}set alignContent(e){this.reset({alignContent:e})}get order(){return this.get("order")}set order(e){this.reset({order:e})}get flexGrow(){return this.get("flexGrow")}set flexGrow(e){this.reset({flexGrow:e})}get flexShrink(){return this.get("flexShrink")}set flexShrink(e){this.reset({flexShrink:e})}get flexBasis(){return this.get("flexBasis")}set flexBasis(e){this.reset({flexBasis:e})}get gap(){return this.get("gap")}set gap(e){this.reset({gap:e})}get resizingHorizontal(){return this.get("resizingHorizontal")}set resizingHorizontal(e){this.reset({resizingHorizontal:e})}get resizingVertical(){return this.get("resizingVertical")}set resizingVertical(e){this.reset({resizingVertical:e})}get gridTemplateRows(){return this.get("gridTemplateRows")}set gridTemplateRows(e){this.reset({gridTemplateRows:e})}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.reset({gridColumnGap:e})}get gridTemplateColumns(){return this.get("gridTemplateColumns")}set gridTemplateColumns(e){this.reset({gridTemplateColumns:e})}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.reset({gridRowGap:e})}get gridTemplateAreas(){return this.get("gridTemplateAreas")}set gridTemplateAreas(e){this.reset({gridTemplateAreas:e})}get gridAutoRows(){return this.get("gridAutoRows")}set gridAutoRows(e){this.reset({gridAutoRows:e})}get gridAutoColumns(){return this.get("gridAutoColumns")}set gridAutoColumns(e){this.reset({gridAutoColumns:e})}get gridAutoFlow(){return this.get("gridAutoFlow")}set gridAutoFlow(e){this.reset({gridAutoFlow:e})}isLayoutItem(){var e;return!!((e=this.parent)!=null&&e.hasLayout())}hasConstraints(){return this.isLayout(Ae.DEFAULT)}hasLayout(){return!this.hasConstraints()||Boolean(this.layout)===!1}isLayout(e){return this.layout===e}isInDefault(){var t;const e=((t=this.parent)==null?void 0:t.layout)||"default";return Ae.DEFAULT===e}isInGrid(){return this.isInLayout(Ae.GRID)}isInFlex(){return this.isInLayout(Ae.FLEX)}isInLayout(e){var t;return((t=this.parent)==null?void 0:t.layout)===e}changeConstraints(e,t,r=!1){const i=this.get(e);let a=t;i===Me.MAX?(t===Me.MAX&&(a=Me.SCALE),r&&t===Me.MIN&&(a=Me.STRETCH)):i===Me.MIN?t===Me.MIN?a=Me.SCALE:r&&t===Me.MAX&&(a=Me.STRETCH):i===Me.STRETCH&&(t===Me.MIN?a=Me.MAX:t===Me.MAX&&(a=Me.MIN)),this.reset({[e]:a})}startToCacheChildren(){var e;(e=kp[this.layout])==null||e.startCache(this)}recoverChildren(){var e;(e=kp[this.layout])==null||e.recover(this)}}const l6=["appearance","position","right","bottom","rootVariable","variable","transform","filter","backdropFilter","backgroundColor","backgroundImage","borderRadius","border","boxShadow","clipPath","color","perspectiveOrigin","transformOrigin","transformStyle","perspective","mixBlendMode","overflow","opacity","box-model","layout","flex-layout","grid-layout","animation","transition","pattern","boolean-operation"],Mp={};l6.forEach(function(s){Mp[s]=!0});class c6 extends o6{getDefaultObject(e={}){return super.getDefaultObject(b({rootVariable:"",variable:"",color:"black",overflow:"visible",opacity:1,pattern:"",selectors:[],svg:[],gridColumnStart:"",gridColumnEnd:"",gridRowStart:"",gridRowEnd:"",gridColumnGap:"",gridRowGap:""},e))}get gridColumnStart(){return this.get("gridColumnStart")}set gridColumnStart(e){this.set("gridColumnStart",e)}get gridColumnEnd(){return this.get("gridColumnEnd")}set gridColumnEnd(e){this.set("gridColumnEnd",e)}get gridRowStart(){return this.get("gridRowStart")}set gridRowStart(e){this.set("gridRowStart",e)}get gridRowEnd(){return this.get("gridRowEnd")}set gridRowEnd(e){this.set("gridRowEnd",e)}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.set("gridColumnGap",e)}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.set("gridRowGap",e)}get pattern(){return this.get("pattern")}set pattern(e){this.reset({pattern:e})}get selectors(){return this.get("selectors")}set selectors(e){this.reset({selectors:e})}get svg(){return this.get("svg")}set svg(e){this.reset({svg:e})}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.reset({rootVariable:e})}get variable(){return this.get("variable")}set variable(e){this.reset({variable:e})}get filter(){return this.get("filter")}set filter(e){this.reset({filter:e})}get backdropFilter(){return this.get("backdropFilter")}set backdropFilter(e){this.reset({backdropFilter:e})}get backgroundColor(){return this.get("backgroundColor")}set backgroundColor(e){this.reset({backgroundColor:e})}get backgroundImage(){return this.get("backgroundImage")}set backgroundImage(e){this.reset({backgroundImage:e})}get textClip(){return this.get("textClip")}set textClip(e){this.reset({textClip:e})}get borderRadius(){return this.get("borderRadius")}set borderRadius(e){this.reset({borderRadius:e})}get border(){return this.get("border")}set border(e){this.reset({border:e})}get boxShadow(){return this.get("boxShadow")}set boxShadow(e){this.reset({boxShadow:e})}get textShadow(){return this.get("textShadow")}set textShadow(e){this.reset({textShadow:e})}get clipPath(){return this.get("clipPath")}set clipPath(e){this.reset({clipPath:e})}get color(){return this.get("color")}set color(e){this.reset({color:e})}get opacity(){return this.get("opacity")}set opacity(e){this.reset({opacity:e})}get transformStyle(){return this.get("transformStyle")}set transformStyle(e){this.reset({transformStyle:e})}get fontSize(){return this.get("fontSize")}set fontSize(e){this.reset({fontSize:e})}get fontFamily(){return this.get("fontFamily")}set fontFamily(e){this.reset({fontFamily:e})}get fontWeight(){return this.get("fontWeight")}set fontWeight(e){this.reset({fontWeight:e})}get fontStyle(){return this.get("fontStyle")}set fontStyle(e){this.reset({fontStyle:e})}get fontVariant(){return this.get("fontVariant")}set fontVariant(e){this.reset({fontVariant:e})}get fontStretch(){return this.get("fontStretch")}set fontStretch(e){this.reset({fontStretch:e})}get lineHeight(){return this.get("lineHeight")}set lineHeight(e){this.reset({lineHeight:e})}get letterSpacing(){return this.get("letterSpacing")}set letterSpacing(e){this.reset({letterSpacing:e})}get wordSpacing(){return this.get("wordSpacing")}set wordSpacing(e){this.reset({wordSpacing:e})}get textDecoration(){return this.get("textDecoration")}set textDecoration(e){this.reset({textDecoration:e})}get textAlign(){return this.get("textAlign")}set textAlign(e){this.reset({textAlign:e})}get textTransform(){return this.get("textTransform")}set textTransform(e){this.reset({textTransform:e})}get textOverflow(){return this.get("text-overflow")}set textOverflow(e){this.reset({"text-overflow":e})}get textIndent(){return this.get("textIndent")}set textIndent(e){this.reset({textIndent:e})}get mixBlendMode(){return this.get("mixBlendMode")}set mixBlendMode(e){this.reset({mixBlendMode:e})}get visibility(){return this.get("visibility")}set visibility(e){this.reset({visibility:e})}get zIndex(){return this.get("z-index")}set zIndex(e){this.reset({"z-index":e})}get overflow(){return this.get("overflow")}set overflow(e){this.reset({overflow:e})}get animation(){return this.get("animation")}set animation(e){this.reset({animation:e})}get transition(){return this.get("transition")}set transition(e){this.reset({transition:e})}get marginTop(){return this.get("marginTop")}set marginTop(e){this.reset({marginTop:e})}get marginRight(){return this.get("marginRight")}set marginRight(e){this.reset({marginRight:e})}get marginBottom(){return this.get("marginBottom")}set marginBottom(e){this.reset({marginBottom:e})}get marginLeft(){return this.get("marginLeft")}set marginLeft(e){this.reset({marginLeft:e})}get paddingTop(){return this.get("paddingTop")}set paddingTop(e){this.reset({paddingTop:e})}get paddingRight(){return this.get("paddingRight")}set paddingRight(e){this.reset({paddingRight:e})}get paddingBottom(){return this.get("paddingBottom")}set paddingBottom(e){this.reset({paddingBottom:e})}get paddingLeft(){return this.get("paddingLeft")}set paddingLeft(e){this.reset({paddingLeft:e})}editable(e){switch(e){case"svg-item":case"transformOrigin":case"perspective":case"perspectiveOrigin":return!1}return Boolean(Mp[e])}get changedBoxModel(){return this.hasChangedField("marginTop","marginLeft","marginBottom","marginRight","paddingTop","paddingLeft","paddingRight","paddingBottom")}get changedFlexLayout(){return this.hasChangedField("flexDirection","flexWrap","justifyContent","alignItems","alignContent","order","flexBasis","flexGrow","flexShrink","flexFlow")}get changedGridLayout(){return this.hasChangedField("gridTemplateRows","gridTemplateColumns","gridTemplateAreas","gridAutoRows","gridAutoColumns","gridAutoFlow","gridRowGap","gridColumnGap","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea")}get changedLayoutItem(){return this.hasChangedField("resizingHorizontal","resizingVertical")}get changedLayout(){return this.hasChangedField("layout")||this.changedBoxModel||this.changedFlexLayout||this.changedGridLayout||this.changedLayoutItem}addSelector(e){return this.selectors.push(e),e}createSelector(e={}){return this.addSelector(new Bo(b({checked:!0},e)))}removePropertyList(e,t){e.splice(t,1)}removeSelector(e){this.removePropertyList(this.selectors,e)}enableHasChildren(){return!0}sortItem(e,t,r){e.splice(r+(t{this.traverse(i,t)}))}tree(e){var t=[];return this.children.forEach(r=>{this.traverse(r,t,e)}),t}convert(e){return e=super.convert(e),e.padding&&(e.paddingTop=p.parse(e.padding),e.paddingRight=p.parse(e.padding),e.paddingBottom=p.parse(e.padding),e.paddingLeft=p.parse(e.padding),delete e.padding),e}reset(e,t={origin:"*"}){const r=super.reset(e,t);if(this.hasChangedField("clipPath")&&this.setClipPathCache(),this.hasChangedField("width","height")&&this.cacheClipPath){const i=this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d;this.clipPath=`path(${i})`,this.modelManager.setChanged("reset",this.id,{clipPath:this.clipPath})}return this.hasChangedField("backgroundImage","pattern")&&this.setBackgroundImageCache(),r}setBackgroundImageCache(){let e=[];if(this.pattern){const i=this.computed("pattern",a=>br.parseStyle(a).map(n=>Be.parseStyle(wr(n.toCSS()))));for(var t=0,r=i.length;tBe.parseStyle(wr(a)));e.push.apply(e,i.filter(a=>a.visibility!==Er.HIDDEN))}if(e.length){const i=this.top;this.cacheBackgroundImage=Be.joinCSS(e);const a=e.filter(o=>o.type===F.URL).map(o=>o.image.url);let n=this.cacheBackgroundImage["background-image"];a.forEach(o=>{const l=i.getImageValueById(o);n=n.replace(o,`"${l}"`)}),this.cacheBackgroundImage["background-image"]=n}else this.cacheBackgroundImage={},this.cacheBackgroundImageOriginal=[]}setClipPathCache(){var e=Pe.parseStyle(this.clipPath);this.cacheClipPathObject=e,e.type==="path"&&(this.cacheClipPath=new K(e.value.trim()),this.cacheClipPathWidth=this.width,this.cacheClipPathHeight=this.height)}setCache(){super.setCache(),this.setClipPathCache()}get clipPathString(){if(this.cacheClipPath||this.setClipPathCache(),this.cacheClipPath)return this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d}getBackgroundImage(e){return Be.parseStyle(wr(this.backgroundImage))[e||0]}get borderWidth(){const e=is.parseStyle(this.border),t=is.parseValue(e.border);return t!=null&&t.width?{borderLeftWidth:t==null?void 0:t.width,borderRightWidth:t==null?void 0:t.width,borderTopWidth:t==null?void 0:t.width,borderBottomWidth:t==null?void 0:t.width}:{borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}}get contentBox(){const r=this.screenWidth,i=this.screenHeight;{const a=this.borderWidth;return{x:0+a.borderLeftWidth,y:0+a.borderTopWidth,width:r-a.borderLeftWidth-a.borderRightWidth,height:i-a.borderTopWidth-a.borderBottomWidth}}}getGradientLineLength(e,t,r){return Math.abs(e*Math.sin(Ht(r)))+Math.abs(t*Math.cos(Ht(r)))}createBackgroundImageMatrix(e){const t=this.contentBox,r=this.getBackgroundImage(e),{image:i}=r,a=r.getOffset(t),n=le(xt(a.x,a.y,a.width,a.height),this.absoluteMatrix),o={backRect:a,backVerties:n,absoluteMatrix:this.absoluteMatrix,backgroundImage:r};switch(i.type){case F.RADIAL:case F.REPEATING_RADIAL:case F.CONIC:case F.REPEATING_CONIC:let[l,c]=i.radialPosition;l=="center"&&(l=p.percent(50)),c=="center"&&(c=p.percent(50));const h=l.toPx(a.width),u=c.toPx(a.height),d=le([[h.value+a.x,u.value+a.y,0],[h.value+a.x,u.value+a.y-1,0]],this.absoluteMatrix);if(o.radialCenterPosition=d[0],o.radialCenterStick=d[1],o.radialCenterPoint=[h.value,u.value,0],i.type===F.RADIAL||i.type===F.REPEATING_RADIAL){const{startPoint:O,endPoint:B,shapePoint:U}=i.getStartEndPoint(o),[X,ce,he]=le([O,B,U],this.absoluteMatrix);o.radialCenterPosition=X,o.startPoint=X,o.endPoint=ce,o.shapePoint=he,o.colorsteps=i.colorsteps.map(ye=>{const ve=ye.toLength();return{id:ye.id,cut:ye.cut,color:ye.color,timing:ye.timing,timingCount:ye.timingCount,pos:te([],o.startPoint,o.endPoint,ve.value/100)}})}else if(i.type===F.CONIC||i.type===F.REPEATING_CONIC){const{startPoint:O,endPoint:B,shapePoint:U}=i.getStartEndPoint(o),[X,ce,he]=le([O,B,U],this.absoluteMatrix);o.radialCenterPosition=X,o.startPoint=X,o.endPoint=ce,o.shapePoint=he,[o.startPoint,o.endPoint,o.shapePoint]=le([o.startPoint,o.endPoint,o.shapePoint],Ut(i.angle,o.radialCenterPosition));const ye=o.shapePoint;o.colorsteps=i.colorsteps.map(ve=>{const Re=ve.percent*3.6,[Q]=le([ye],Ut(Re,o.radialCenterPosition));return{id:ve.id,cut:ve.cut,color:ve.color,timing:ve.timing,timingCount:ve.timingCount,pos:Q}})}break;case F.LINEAR:case F.REPEATING_LINEAR:o.gradientLineLength=this.getGradientLineLength(a.width,a.height,i.angle),o.centerPosition=te([],n[0],n[2],.5);const v=we([],o.centerPosition,[0,o.gradientLineLength/2,0]),g=_e([],o.centerPosition,[0,o.gradientLineLength/2,0]),y=Yt(v),P=Yt(g),[S,V,E,I]=le([v,g,y,P],Ut(i.angle,o.centerPosition));o.endPoint=V,o.startPoint=S,o.areaStartPoint=E,o.areaEndPoint=I,o.colorsteps=i.colorsteps.map(O=>{const B=O.toLength();return{id:O.id,cut:O.cut,color:O.color,timing:O.timing,timingCount:O.timingCount,pos:te([],o.startPoint,o.endPoint,B.value/100)}});break}return o}}class ss extends c6{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"layer",name:"New Layer",tagName:"div"},e))}getDefaultTitle(){return"Layer"}}class h6 extends ss{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"artboard",name:"New ArtBoard",width:1e3,height:1e3,backgroundColor:"white",transformStyle:"flat"},e))}getDefaultTitle(){return"ArtBoard"}getIcon(){return oe.artboard}editable(e){switch(e){case"border":case"borderRadius":return!1;case"artboardSize":case"layout":return!0}return super.editable(e)}}const d6=["jpg","jpeg","png","gif","svg"];class $n extends Sc{getDefaultObject(e={}){return super.getDefaultObject(b({type:"url",url:"",datauri:"",patternUnits:"userSpaceOnUse",patternWidth:"100%",patternHeight:"100%",imageX:"0%",imageY:"0%",imageWidth:"100%",imageHeight:"100%"},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("url","datauri","patternUnits","patternWidth","patternHeight","imageX","imageY","imageWidth","imageHeight"))}static parse(e){var t=e.split("(")[1].split(")")[0],[r,i]=t.trim().split("#");if(!i)return new $n({url:r});var[a,n,o,l,c,h,u]=i.split(",");return new $n({patternUnits:a,patternWidth:n,patternHeight:o,imageX:l,imageY:c,imageWidth:h,imageHeight:u,url:r})}isUrl(){return!0}static isImageFile(e){return d6.includes(e)}toString(){var e=this.json,{patternUnits:t,patternWidth:r,patternHeight:i,imageX:a,imageY:n,imageWidth:o,imageHeight:l,url:c}=e,h=[t,r,i,a,n,o,l].join(",").trim();return`url(${c}#${h})`}toSVGString(e,t={}){var{patternUnits:r,patternWidth:i,patternHeight:a,imageX:n,imageY:o,imageWidth:l,imageHeight:c}=this.json;const h=p.parse(i),u=p.parse(a),d=p.parse(n),v=p.parse(o),g=p.parse(l),y=p.parse(c),P=t.width?h.toPx(t.width).value:h,S=t.height?u.toPx(t.height).value:u;return` + + - `}toFillValue(e){return`url(#${e})`}}class Og extends en{toString(){return""}toSVGString(){return""}toFillValue(){return""}}const q1=[Jr.PAD,Jr.REFLECT,Jr.REPEAT];class Mo extends Og{convert(e){return e.spreadMethod=q1.includes(e.spreadMethod)?e.spreadMethod:Jr.PAD,e}getDefaultObject(e){return super.getDefaultObject(P({type:ue.LINEAR,x1:y.parse("0%"),y1:y.parse("50%"),x2:y.parse("100%"),y2:y.parse("50%"),spreadMethod:Jr.PAD},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("x1","y1","x2","y2","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{x1:t,y1:i,x2:r,y2:s,spreadMethod:a}=this.json,o=[t,i,r,s,a].join(" "),l=`${this.json.type}(${o}, ${e})`;return l}toSVGString(e){var{x1:t,y1:i,x2:r,y2:s,spreadMethod:a}=this.json;return` + `}toFillValue(e){return`url(#${e})`}}class Nc extends yr{toString(){return""}toSVGString(){return""}toFillValue(){return""}}const Ip=[mr.PAD,mr.REFLECT,mr.REPEAT];class Fs extends Nc{convert(e){return e.spreadMethod=Ip.includes(e.spreadMethod)?e.spreadMethod:mr.PAD,e}getDefaultObject(e){return super.getDefaultObject(b({type:F.LINEAR,x1:p.parse("0%"),y1:p.parse("50%"),x2:p.parse("100%"),y2:p.parse("50%"),spreadMethod:mr.PAD},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("x1","y1","x2","y2","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{x1:t,y1:r,x2:i,y2:a,spreadMethod:n}=this.json,o=[t,r,i,a,n].join(" "),l=`${this.json.type}(${o}, ${e})`;return l}toSVGString(e){var{x1:t,y1:r,x2:i,y2:a,spreadMethod:n}=this.json;return` - ${Mo.makeColorStepList(this.colorsteps).map(o=>` + ${Fs.makeColorStepList(this.colorsteps).map(o=>` `).join("")} - `}toFillValue(e){return`url(#${e})`}static parse(e){const t=dr(e);var i={};const[r,...s]=t.parameters,a=[];r.forEach(u=>{u.func===Ut.KEYWORD?q1.includes(u.matchedString)&&(i.spreadMethod=u.matchedString):a.push(u)});var[o=y.percent(0),l=y.percent(50),c=y.percent(100),h=y.percent(50)]=a.map(u=>u.parsed);i=Ve(P({},i),{x1:o,y1:l,x2:c,y2:h});const d=Mo.parseColorSteps(s);return new Mo(Ve(P({},i),{colorsteps:d}))}}const Aj=[Ci.CIRCLE,Ci.ELLIPSE],Z1=[Jr.PAD,Jr.REFLECT,Jr.REPEAT];class $o extends Og{convert(e){return e.spreadMethod=Z1.includes(e.spreadMethod)?e.spreadMethod:Jr.PAD,e}getDefaultObject(e={}){return super.getDefaultObject(P({type:ue.RADIAL,radialType:Ci.CIRCLE,x1:y.parse("50%"),y1:y.parse("50%"),x2:y.parse("100%"),y2:y.parse("50%"),x3:y.parse("50%"),y3:y.parse("100%"),spreadMethod:Jr.PAD},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("radialType","x1","y1","x2","y2","x3","y3","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{radialType:t,x1:i,y1:r,x2:s,y2:a,x3:o,y3:l,spreadMethod:c}=this.json,h=[t,i,r,s,a,o,l,c].join(" ").trim(),d=`${this.json.type}(${h}, ${e})`;return d}getGradientAngle(e={}){var{x1:t,y1:i,x2:r,y2:s}=this.json;const a=t.toPx(e.width),o=i.toPx(e.height),l=r.toPx(e.width),c=s.toPx(e.height);return(li(l.value-a.value,c.value-o.value)+180)%360}toSVGString(e,t={}){var{x1:i,y1:r,x2:s,y2:a,x3:o,y3:l,spreadMethod:c,radialType:h}=this.json;const d=i.toPx(t.width),u=r.toPx(t.height),p=s.toPx(t.width),f=a.toPx(t.height);var g=Ne([d.value,u.value,0],[p.value,f.value,0]),m=this.getGradientAngle(t);const v=O0();if(Cf(v,v,pM([],[d.value,u.value])),Cf(v,v,fM([],lr(m))),h===Ci.ELLIPSE){const x=o.toPx(t.width),S=l.toPx(t.height);var b=Ne([d.value,u.value,0],[x.value,S.value,0]);Cf(v,v,gM([],[1,b/g]))}const _=`matrix(${v[0]}, ${v[1]}, ${v[3]}, ${v[4]}, ${v[6]}, ${v[7]})`;return` - - ${$o.makeColorStepList(this.colorsteps).map(x=>` - + `}toFillValue(e){return`url(#${e})`}static parse(e){const t=Xt(e);var r={};const[i,...a]=t.parameters,n=[];i.forEach(d=>{d.func===Xe.KEYWORD?Ip.includes(d.matchedString)&&(r.spreadMethod=d.matchedString):n.push(d)});var[o=p.percent(0),l=p.percent(50),c=p.percent(100),h=p.percent(50)]=n.map(d=>d.parsed);r=se(b({},r),{x1:o,y1:l,x2:c,y2:h});const u=Fs.parseColorSteps(a);return new Fs(se(b({},r),{colorsteps:u}))}}const u6=[bt.CIRCLE,bt.ELLIPSE],Ep=[mr.PAD,mr.REFLECT,mr.REPEAT];class Bs extends Nc{convert(e){return e.spreadMethod=Ep.includes(e.spreadMethod)?e.spreadMethod:mr.PAD,e}getDefaultObject(e={}){return super.getDefaultObject(b({type:F.RADIAL,radialType:bt.CIRCLE,x1:p.parse("50%"),y1:p.parse("50%"),x2:p.parse("100%"),y2:p.parse("50%"),x3:p.parse("50%"),y3:p.parse("100%"),spreadMethod:mr.PAD},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("radialType","x1","y1","x2","y2","x3","y3","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{radialType:t,x1:r,y1:i,x2:a,y2:n,x3:o,y3:l,spreadMethod:c}=this.json,h=[t,r,i,a,n,o,l,c].join(" ").trim(),u=`${this.json.type}(${h}, ${e})`;return u}getGradientAngle(e={}){var{x1:t,y1:r,x2:i,y2:a}=this.json;const n=t.toPx(e.width),o=r.toPx(e.height),l=i.toPx(e.width),c=a.toPx(e.height);return(ot(l.value-n.value,c.value-o.value)+180)%360}toSVGString(e,t={}){var{x1:r,y1:i,x2:a,y2:n,x3:o,y3:l,spreadMethod:c,radialType:h}=this.json;const u=r.toPx(t.width),d=i.toPx(t.height),v=a.toPx(t.width),g=n.toPx(t.height);var y=ae([u.value,d.value,0],[v.value,g.value,0]),P=this.getGradientAngle(t);const S=xd();if(zl(S,S,Dm([],[u.value,d.value])),zl(S,S,Fm([],Ht(P))),h===bt.ELLIPSE){const I=o.toPx(t.width),O=l.toPx(t.height);var V=ae([u.value,d.value,0],[I.value,O.value,0]);zl(S,S,Bm([],[1,V/y]))}const E=`matrix(${S[0]}, ${S[1]}, ${S[3]}, ${S[4]}, ${S[6]}, ${S[7]})`;return` + + ${Bs.makeColorStepList(this.colorsteps).map(I=>` + `).join("")} -`}toFillValue(e){return`url(#${e})`}static parse(e){const t=dr(e);var i={};const[r,...s]=t.parameters,a=[];r.forEach(f=>{f.func===Ut.KEYWORD?Aj.includes(f.matchedString)?i.radialType=f.matchedString:Z1.includes(f.matchedString)&&(i.spreadMethod=f.matchedString):a.push(f)});var[o=y.percent(50),l=y.percent(50),c=y.percent(100),h=y.percent(50),d=y.percent(50),u=y.percent(100)]=a.map(f=>f.parsed);i=Ve(P({},i),{x1:o,y1:l,x2:c,y2:h,x3:d,y3:u});const p=$o.parseColorSteps(s);return new $o(Ve(P({},i),{colorsteps:p}))}}class Ma extends Og{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",colorsteps:[new ti({color:"red",percent:0,index:0}),new ti({color:"red",percent:100,index:1})]})}toCloneObject(){return Ve(P({},super.toCloneObject()),{static:!0})}static create(e="transparent"){return new Ma({colorsteps:[new ti({color:e,percent:0,index:0}),new ti({color:e,percent:100,index:0})]})}setColor(e){this.colorsteps.forEach(t=>{t.color=e})}toString(){var e=this.json.colorsteps[0].color;return e}toSVGString(){return""}toFillValue(){return this.toString()}}class ai extends Vr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:ai.createImage(e.images[0])})}static createImage(e){return new SVGLImageResource({url:e})}setGradient(e){this.reset({type:e.type,image:ai.createGradient(e,this.json.image)})}static createGradient(e,t){const i=e.colorsteps||t.colorsteps;let r=t.toJSON();switch(delete r.itemType,delete r.type,e.type){case ue.LINEAR:return new Mo(Ve(P({},r),{colorsteps:i}));case ue.RADIAL:return new $o(Ve(P({},r),{colorsteps:i}));default:return new Ma(Ve(P({},r),{colorsteps:i}))}}get image(){return this.json.image}set image(e){this.json.image=e}static parse(e){return new ai(e)}static parseImage(e=""){const t=dr(e);let i=null;if(!t)return Ma.create(e||"transparent");switch(t.func){case ue.LINEAR:i=Mo.parse(t.matchedString);break;case ue.RADIAL:i=$o.parse(t.matchedString);break;case ue.URL:i=_h.parse(t.matchedString);break;default:i=Ma.create(t.matchedString);break}return i}static changeImageType(e){switch(e.type){case ue.LINEAR:return new Mo(e);case ue.RADIAL:return new $o(e);case"image-resource":case ue.URL:return new _h(e);default:return new Ma(e)}}}const Rj=["appearance","border","borderRadius","backgroundImage","backdropFilter","clipPath","pattern","boxShadow","layout","transform","transformOrigin","perspective","perspectiveOrigin","backdropFilter","boxModel"],J1={};Rj.forEach(n=>{J1[n]=!0});class Ml extends wa{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svg",name:"New SVG",elementType:"svg",overflow:"visible",stroke:"black",strokeWidth:1,fill:"transparent",fillOpacity:1,fillRule:"nonzero",textAnchor:"start",strokeLinecap:"",strokeLinejoin:"",strokeDasharray:[],strokeDashoffset:0},e))}get stroke(){return this.get("stroke")}set stroke(e){this.set("stroke",e)}get strokeWidth(){return this.get("strokeWidth")}set strokeWidth(e){this.set("strokeWidth",e)}get fill(){return this.get("fill")}set fill(e){this.set("fill",e)}get fillOpacity(){return this.get("fillOpacity")}set fillOpacity(e){this.set("fillOpacity",e)}get fillRule(){return this.get("fillRule")}set fillRule(e){this.set("fillRule",e)}get textAnchor(){return this.get("textAnchor")}set textAnchor(e){this.set("textAnchor",e)}get strokeDasharray(){return this.get("strokeDasharray")}set strokeDasharray(e){this.set("strokeDasharray",e)}get strokeDashoffset(){return this.get("strokeDashoffset")}set strokeDashoffset(e){this.set("strokeDashoffset",e)}get strokeLinejoin(){return this.get("strokeLinejoin")}set strokeLinejoin(e){this.set("strokeLinejoin",e)}get strokeLinecap(){return this.get("strokeLinecap")}set strokeLinecap(e){this.set("strokeLinecap",e)}get isDragSelectable(){return this.isBooleanItem===!1}get isBooleanItem(){return Boolean(this.parent.is("boolean-path"))}editable(e){if(J1[e])return!1;switch(e){case"svg-item":return!0}return super.editable(e)}getDefaultTitle(){return"SVG"}isSVG(){return!0}hasPoint(e,t){const i=this.fill,r=this.fillOpacity,s=this.strokeWidth,a=i==="transparent"||r===0||bi(i).a===0,o=s===0;return a?this.isPointInStroke(e,t):!a&&!o?this.isPointInStroke(e,t)||this.isPointInFill(e,t):!a&&o?this.isPointInFill(e,t):!1}isPointInFill(e,t){const i=this.getCache("svgElement"),r=this.getCache("pathElement");if(r){const[s,a]=this.invertPoint([e,t,0]),o=i.createSVGPoint();return Object.assign(o,{x:s,y:a}),r.isPointInFill(o)}return!1}isPointInStroke(e,t){const i=this.getCache("svgElement"),r=this.getCache("pathElement");if(r){const[s,a]=this.invertPoint([e,t,0]),o=i.createSVGPoint();return Object.assign(o,{x:s,y:a}),r.isPointInStroke(o)}return!1}convertStrokeToPath(e=10,t=10){const i=this.attrs("name","width","parentId","height","x","y","transform","stroke");return i.fill=i.stroke,delete i.stroke,Ve(P({itemType:"svg-path","fill-rule":"evenodd"},i),{x:y.parse(i.x).add(e),y:y.parse(i.y).add(t)})}toSVGPath(){const e=this.toCloneObject();return delete e.id,delete e.itemType,Ve(P({},e),{d:this.d})}createFragmentMatrix(e){const t=this.get(e),i=ai.parseImage(t),r={x:0,y:0,width:this.screenWidth,height:this.screenHeight},s=Xe(Ei(r.x,r.y,r.width,r.height),this.absoluteMatrix),a={backRect:r,backVerties:s,absoluteMatrix:this.absoluteMatrix,image:i};let o,l,c,h,d,u;switch(i.type){case ue.RADIAL:o=i.x1.toPx(r.width),l=i.y1.toPx(r.height),c=i.x2.toPx(r.width),h=i.y2.toPx(r.height),d=i.x3.toPx(r.width),u=i.y3.toPx(r.height);const m=[o.value,l.value,0],v=[c.value,h.value,0],b=[d.value,u.value,0];var[f,g,p]=Xe([m,v,b],this.absoluteMatrix);a.endPoint=g,a.startPoint=f,a.shapePoint=p,a.colorsteps=i.colorsteps.map(_=>{const x=_.toLength();return{id:_.id,cut:_.cut,color:_.color,timing:_.timing,timingCount:_.timingCount,pos:Ae([],a.startPoint,a.endPoint,x.value/100)}});break;case ue.LINEAR:o=i.x1.toPx(r.width),l=i.y1.toPx(r.height),c=i.x2.toPx(r.width),h=i.y2.toPx(r.height);var[f,g]=Xe([[o.value,l.value,0],[c.value,h.value,0]],this.absoluteMatrix);a.endPoint=g,a.startPoint=f,a.areaStartPoint=vr(f),a.areaEndPoint=vr(g),a.colorsteps=i.colorsteps.map(_=>{const x=_.toLength();return{id:_.id,cut:_.cut,color:_.color,timing:_.timing,timingCount:_.timingCount,pos:Ae([],a.startPoint,a.endPoint,x.value/100)}});break}return a}}class Q1 extends Ml{getIcon(){return We.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svg-path",name:"New Path",strokeWidth:1,d:"",totalLength:0},e))}enableHasChildren(){return!1}reset(e,t={origin:"*"}){const i=super.reset(e,t);return this.hasChangedField("d")&&(this.cachePath=new _e(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height),i}refreshMatrixCache(){super.refreshMatrixCache(),this.hasChangedField("d")?(this.addCache("pathString",new _e(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)):this.hasChangedField("width","height")&&(this.d=this.getCache("pathString").clone().scale(this.width/this.cacheWidth,this.height/this.cacheHeight).d,this.manager.setChanged("reset",this.id,{d:this.d}))}setCache(){super.setCache(),this.addCache("pathString",new _e(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)}get d(){return this.get("d")?(this.hasCache("pathString")||(this.addCache("pathString",new _e(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)),this.getCache("pathString").clone().scale(this.width/this.getCache("pathWidth"),this.height/this.getCache("pathHeight")).d):null}set d(e){this.set("d",e)}getDefaultTitle(){return"Path"}}class Oj extends Q1{getIcon(){return We.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"boolean-path",name:"New Boolean Path",strokeWidth:1,d:"",booleanOperation:"none"},e))}get booleanOperation(){return this.get("booleanOperation")}set booleanOperation(e){this.set("booleanOperation",e)}enableHasChildren(){return!0}reset(e,t={origin:"*"}){var r;const i=super.reset(e,t);if(this.cachePath||this.setCache(),this.hasChangedField("changedChildren","booleanOperation")){if(this.children.length===1){const s=this.layers[0].absolutePath().d;this.d=this.invertPath(s).d,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:s})}else if(this.booleanOperation!=="none"&&((r=this.children)==null?void 0:r.length)>=2&&this.modelManager.editor.pathKitManager.has())if(this.layers.filter(a=>a.d).length>=2){const a=this.doBooleanOperation();this.d=a,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:a})}else this.d=void 0,this.removeCache(),this.modelManager.setChanged("reset",this.id,{d:void 0})}return i}get resizableWitChildren(){return!0}startToCacheChildren(){this.cachedSize={width:this.width,height:this.height},this.cachedLayerMatrix=this.layers.map(e=>(e.startToCacheChildren(),{item:e,matrix:e.matrix}))}recoverChildren(){const e={width:this.width,height:this.height},t=e.width/this.cachedSize.width,i=e.height/this.cachedSize.height;this.cachedLayerMatrix.forEach(({item:r,matrix:s})=>{r.reset({x:r.x.changeUnitValue(s.x*t,e.width),y:r.y.changeUnitValue(s.y*i,e.height),width:r.width.changeUnitValue(s.width*t,e.width),height:r.height.changeUnitValue(s.height*i,e.height)}),r.recoverChildren()})}getFieldValueByBooleanOperation(e){const t=this.layers;if(t.length===0)return;if(t.length===1)return t[0][e];switch(this.booleanOperation){case Wn.DIFFERENCE:return t[1][e]}return t[0][e]}get fill(){return this.getFieldValueByBooleanOperation("fill")}get stroke(){return this.getFieldValueByBooleanOperation("stroke")}setCache(){super.setCache(),this.cachePath=new _e(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height}removeCache(){super.removeCache(),this.cachePath=void 0,this.cacheWidth=void 0,this.cacheHeight=void 0}getDefaultTitle(){return"Path"}doBooleanOperation(){switch(this.booleanOperation){case Wn.INTERSECTION:return this.intersection();case Wn.UNION:return this.union();case Wn.DIFFERENCE:return this.difference();case Wn.REVERSE_DIFFERENCE:return this.reverseDifference();case Wn.XOR:return this.xor()}return""}getPathList(){return this.layers.map(e=>e.absolutePath().d)}intersection(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.intersection(r,s),e);return this.invertPath(i).d}union(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.union(r,s),e);return this.invertPath(i).d}difference(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.difference(r,s),e);return this.invertPath(i).d}reverseDifference(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.reverseDifference(r,s),e);return this.invertPath(i).d}xor(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.xor(r,s),e);return this.invertPath(i).d}}class zj extends wa{getIcon(){return We.lens}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"circle",name:"New Circle",borderRadius:"100%"},e))}getDefaultTitle(){return"Circle"}}class Vj extends wa{getIcon(){return We.image}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"image",name:"New Image",elementType:"image",src:""},e))}get src(){return this.get("src")}set src(e){this.set("src",e)}get naturalWidth(){return this.get("naturalWidth")}set naturalWidth(e){this.set("naturalWidth",e)}get naturalHeight(){return this.get("naturalHeight")}set naturalHeight(e){this.set("naturalHeight",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Image"}resize(){this.reset({width:this.naturalWidth.clone(),height:this.naturalHeight.clone()})}}class Dj extends Ml{getIcon(){return We.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"polygon",name:"New Polygon",strokeWidth:1,count:3},e))}get count(){return this.get("count")}set count(e){this.set("count",e)}convert(e){return e=super.convert(e),e.count&&(e.count=+e.count),e}enableHasChildren(){return!1}get editablePath(){return!1}get d(){const{width:e,height:t,count:i}=this;return _e.makePolygon(e,t,i).d}getDefaultTitle(){return"Polygon"}isPointInPath(e){const t=Kt([],e,this.absoluteMatrixInverse);return this.cachePath.isPointInPath({x:t[0],y:t[1]},this.strokeWidth||0)}}function xi(n,e,t){return()=>t}function pi(n,e,t,i,r=void 0){return(s,a)=>{var o=0;return a===0?o=t:a===1?o=i:o=t+(i-t)*s,r?o+r:o}}function eb(n,e,t,i="width",r="parent"){var s=null;return r==="parent"?s=n[r][i]:r==="self"&&(s=n[i]),s?t.toPx(s.value):t}function Fj(n,e,t,i,r="width",s="parent"){var a=null;return s==="parent"?a=n[s][r]:s==="self"&&(a=n[r]),a?t.to(i,a.value):t}function qt(n,e,t,i,r="width",s="parent"){var a=y.parse(t),o=y.parse(i);return a.unit===o.unit?pi(n,e,a.value,o.value,a.unit):a.equals(o)?xi(n,e,a):(l,c)=>{var h=eb(n,e,a,r,s),d=eb(n,e,o,r,s);return c===0?h:c===1?d:Fj(n,e,h.value+(d.value-h.value)*l,a.unit,r,s)}}function _r(n,e,t,i){return(r,s)=>s===1?i:t}function Sh(n,e,t,i){var r=bi(t||"rgba(0, 0, 0, 1)"),s=bi(i||"rgba(0, 0, 0, 1)");return(a,o)=>o===0?t:o===1?i:dg(r,s,a,"rgb")}function Po(n,e,t,i){return _r(n,e,t,i)}function Nj(n,e,t,i){var r={cut:_r(n,e,t.cut,i.cut),percent:pi(n,e,t.percent,i.percent),px:pi(n,e,t.px,i.px),em:pi(n,e,t.em,i.em),unit:Po(n,e,t.unit,i.unit),color:Sh(n,e,t.color,i.color)};return(s,a)=>new ti({cut:r.cut(s,a),percent:r.percent(s,a),px:r.px(s,a),em:r.em(s,a),unit:r.unit(s,a),color:r.color(s,a)})}function zg(n,e,t=[],i=[]){for(var r=Math.max(t.length,i.length),s=[],a=0;as.map(d=>d(c,h))}function tb(n,e,t,i){var r={angle:pi(n,e,t.angle,i.angle),radialPositionX:qt(n,e,t.radialPosition[0],i.radialPosition[0],"width","self"),radialPositionY:qt(n,e,t.radialPosition[1],i.radialPosition[1],"height","self"),colorsteps:zg(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>new Yn({angle:r.angle(s,a),radialPosition:[r.radialPositionX(s,a),r.radialPositionY(s,a)],colorsteps:r.colorsteps(s,a)})}function ib(n,e,t,i){var r={angle:pi(n,e,t.angle,i.angle),colorsteps:zg(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>{var o=r.colorsteps(s,a);return new Kn({angle:r.angle(s,a),colorsteps:o})}}function bu(n,e){switch(e){case"width":if(n==="center")return"50%";if(n==="left")return"0%";if(n==="right")return"100%";break;case"height":if(n==="center")return"50%";if(n==="top")return"0%";if(n==="bottom")return"100%";break}return n}function rb(n,e,t,i){t.radialPosition[0]=bu(t.radialPosition[0],"width"),t.radialPosition[1]=bu(t.radialPosition[1],"height"),i.radialPosition[0]=bu(i.radialPosition[0],"width"),i.radialPosition[1]=bu(i.radialPosition[1],"height");var r={radialType:Po(n,e,t.radialType,i.radialType),radialPositionX:qt(n,e,t.radialPosition[0],i.radialPosition[0],"width","self"),radialPositionY:qt(n,e,t.radialPosition[1],i.radialPosition[1],"height","self"),colorsteps:zg(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>{var o=new qn({radialType:r.radialType(s,a),radialPosition:[r.radialPositionX(s,a),r.radialPositionY(s,a)],colorsteps:r.colorsteps(s,a)});return o}}function Bj(n,e,t,i){var r=tb(n,e,t,i);return(s,a)=>{var o=r(s,a);return new vo({angle:o.angle,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function jj(n,e,t,i){var r=ib(n,e,t,i);return(s,a)=>{var o=r(s,a),l=new yo({angle:o.angle,colorsteps:o.colorsteps});return l}}function Gj(n,e,t,i){var r=rb(n,e,t,i);return(s,a)=>{var o=r(s,a);return new bo({radialType:o.radialType,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function Hj(n,e,t,i){var r={image:(s,a)=>a};if(t.type==="url"||i.type==="url")r.image=_r(n,e,t,i);else if(t.type!=i.type)r.image=_r(n,e,t,i);else switch(t.type){case"linear-gradient":r.image=ib(n,e,t,i);break;case"repeating-linear-gradient":r.image=jj(n,e,t,i);break;case"radial-gradient":r.image=rb(n,e,t,i);break;case"repeating-radial-gradient":r.image=Gj(n,e,t,i);break;case"conic-gradient":r.image=tb(n,e,t,i);break;case"repeating-conic-gradient":r.image=Bj(n,e,t,i);break}return(s,a)=>r.image(s,a)}function Uj(n,e,t,i){for(var r=Ot.parseStyle(hn(t)),s=Ot.parseStyle(hn(i)),a=Math.max(r.length,s.length),o=[],l=0,c=a;lOt.join(o.map(f=>{var g={image:f.image(u,p),size:f.size(u,p),x:f.x(u,p),y:f.y(u,p),width:f.width(u,p),height:f.height(u,p),blendMode:f.blendMode(u,p),repeat:f.repeat(u,p)};return g}))}const nb=n=>{var e=[];return n.isAll?e=[n["border-radius"]||"0px",n["border-radius"]||"0px",n["border-radius"]||"0px",n["border-radius"]||"0px"]:e=[n["border-top-left-radius"]||"0px",n["border-top-right-radius"]||"0px",n["border-bottom-right-radius"]||"0px",n["border-bottom-left-radius"]||"0px"],e};function Wj(n,e,t,i){for(var r=nb(Eg.parseStyle(t)),s=nb(Eg.parseStyle(i)),a=Math.max(r.length,s.length),o=[],l=0;lo.map(d=>d(c,h)).join(" ")}function Xj(n,e,t,i){for(var r=$n.parseStyle(t),s=$n.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;l$n.join(o.map(f=>({inset:f.inset(u,p),offsetX:f.offsetX(u,p),offsetY:f.offsetY(u,p),blurRadius:f.blurRadius(u,p),spreadRadius:f.spreadRadius(u,p),color:f.color(u,p)})))}function Yj(n,e,t,i){var r={};return t.radius==="closest-side"||t.radius==="farthest-side"||i.radius==="closest-side"||i.radius==="farthest-side"?r.radius=_r(n,e,t.radius,i.radius):t.radius.unit===i.radius.unit?r.radius=pi(n,e,t.radius.value,i.radius.value,t.radius.unit):r.radius=qt(n,e,t.radius,i.radius,"width","self"),r.x=qt(n,e,t.x,i.x,"width","self"),r.y=qt(n,e,t.y,i.y,"height","self"),(s,a)=>{var o=r.radius(s,a),l=r.x(s,a),c=r.y(s,a),h=`${l} ${c}`,d=o+"";return d.includes("closest-side")?d="closest-side":d.includes("farthest-side")&&(d="farthest-side"),o?`${d} at ${h}`:`${h}`}}function Kj(n,e,t,i){var r={radiusX:qt(n,e,t.radiusX,i.radiusX,"width","self"),radiusY:qt(n,e,t.radiusY,i.radiusY,"height","self"),x:qt(n,e,t.x,i.x,"width","self"),y:qt(n,e,t.y,i.y,"height","self")};return(s,a)=>{var o=r.radiusX(s,a),l=r.radiusY(s,a),c=r.x(s,a),h=r.y(s,a);return`${o} ${l} at ${c} ${h}`}}function qj(n,e,t,i){var r={top:pi(n,e,t.top.value,i.top.value,t.top.unit),left:pi(n,e,t.left.value,i.left.value,t.left.unit),right:pi(n,e,t.right.value,i.right.value,t.right.unit),bottom:pi(n,e,t.bottom.value,i.bottom.value,t.bottom.unit),round:_r(n,e,t.round,i.round),topRadius:pi(n,e,t.topRadius.value,i.topRadius.value,t.topRadius.unit),leftRadius:pi(n,e,t.leftRadius.value,i.leftRadius.value,t.leftRadius.unit),rightRadius:pi(n,e,t.rightRadius.value,i.rightRadius.value,t.rightRadius.unit),bottomRadius:pi(n,e,t.bottomRadius.value,i.bottomRadius.value,t.bottomRadius.unit)};return(s,a)=>{var o=r.top(s,a),l=r.right(s,a),c=r.bottom(s,a),h=r.left(s,a),d=r.round(s,a),u=r.topRadius(s,a),p=r.leftRadius(s,a),f=r.bottomRadius(s,a),g=r.rightRadius(s,a),m=[o,l,c,h].join(" "),v=[u,g,f,p].join(" "),b=`${m} ${d&&v.trim()?`round ${v}`:""}`;return b}}function Zj(n,e,t,i){for(var r=Math.max(t.length,i.length),s=[],a=0;as.map(d=>`${d.x(c,h)} ${d.y(c,h)}`).join(",")}function Jj(n,e,t,i){var r=gt.parseStyle(t),s=gt.parseStyle(i),a={type:_r(n,e,r.type,r.type),value:_r(n,e,t,i)};if(r.type==s.type&&r!="none")switch(r.type){case"circle":r.value=gt.parseStyleForCircle(r.value),s.value=gt.parseStyleForCircle(s.value),a.value=Yj(n,e,r.value,s.value);break;case"ellipse":r.value=gt.parseStyleForEllipse(r.value),s.value=gt.parseStyleForEllipse(s.value),a.value=Kj(n,e,r.value,s.value);break;case"inset":r.value=gt.parseStyleForInset(r.value),s.value=gt.parseStyleForInset(s.value),a.value=qj(n,e,r.value,s.value);break;case"polygon":r.value=gt.parseStyleForPolygon(r.value),s.value=gt.parseStyleForPolygon(s.value),a.value=Zj(n,e,r.value,s.value);break;case"path":r.value=gt.parseStyleForPath(r.value),s.value=gt.parseStyleForPath(s.value);break}return(o,l)=>{var c=a.type(o,l),h=a.value(o,l);return c==="none"?c:`${c}(${h})`}}function Qj(n,e,t,i){var r={type:Po(n,e,t.type,i.type),value:_r(n,e,t.value,i.value)};switch(t.type){case"blur":r.value=qt(n,e,t.value,i.value);break;case"grayscale":case"invert":case"brightness":case"contrast":case"opacity":case"saturate":case"sepia":case"hue-rotate":r.value=pi(n,e,t.value.value,i.value.value,t.value.unit);break;case"drop-shadow":r.offsetX=qt(n,e,t.offsetX,i.offsetX,"width","self"),r.offsetY=qt(n,e,t.offsetY,i.offsetY,"height","self"),r.blurRadius=qt(n,e,t.blurRadius,i.blurRadius,"width","self"),r.spreadRadius=qt(n,e,t.spreadRadius,i.spreadRadius,"width","self"),r.color=Sh(n,e,t.color,i.color);break}return(s,a)=>{var o=r.type(s,a);return o==="drop-shadow"?{type:r.type(s,a),offsetX:r.offsetX(s,a),offsetY:r.offsetY(s,a),blurRadius:r.blurRadius(s,a),spreadRadius:r.spreadRadius(s,a),color:r.color(s,a)}:{type:r.type(s,a),value:r.value(s,a)}}}function e7(n,e,t,i){for(var r=nr.parseStyle(t),s=nr.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;lnr.join(o.map(f=>f(u,p)))}function xu(n,e,t,i,r,s,a,o){var l=[{x:n,y:e},{x:t,y:i},{x:r,y:s},{x:a,y:o}];return(c,h)=>lu(l,h)}function sb(n,e,t,i){var r={x:pi("","",n,t),y:pi("","",e,i)};return(s,a)=>{var o={x:r.x(s,a),y:r.y(s,a)};return o}}function _u(n,e,t,i,r,s){var a=[{x:n,y:e},{x:t,y:i},{x:r,y:s}];return(o,l)=>Iy(a,l)}function t7(n){var e=[],t=[];n.forEach(s=>{switch(s.command){case"M":var[m,v]=s.values;t=[m,v];break;case"m":var[f,g]=t,[m,v]=s.values;m+=f,v+=g,t=[m,v];break;case"L":var[f,g]=t,[m,v]=s.values;e.push({command:s.command,values:[f,g,m,v],length:Rr(f,g,m,v),interpolate:sb(f,g,m,v)}),t=[m,v];break;case"l":var[f,g]=t,[m,v]=s.values;m+=f,v+=g,e.push({command:s.command,values:[f,g,m,v],length:Rr(f,g,m,v),interpolate:sb(f,g,m,v)}),t=[m,v];break;case"C":var[f,g]=t,[a,o,u,p,m,v]=s.values;e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:Yc(f,g,a,o,u,p,m,v),interpolate:xu(f,g,a,o,u,p,m,v)}),t=[m,v];break;case"c":var[f,g]=t,[a,o,u,p,m,v]=s.values;a+=f,u+=f,m+=f,o+=g,p+=g,v+=g,e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:Yc(f,g,a,o,u,p,m,v),interpolate:xu(f,g,a,o,u,p,m,v)}),t=[m,v];break;case"Q":var[f,g]=t,[a,o,m,v]=s.values;e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:_u(f,g,a,o,m,v)}),t=[m,v];break;case"q":var[f,g]=t,[a,o,m,v]=s.values;a+=f,m+=f,o+=g,v+=g,e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:_u(f,g,a,o,m,v)}),t=[m,v];break;case"S":var[f,g]=t,[u,p,m,v]=s.values,b=e[e.length-1];if(["C","c","S","s"].includes(b.command)){var[,,,,l,c,h,d]=b.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:getCubicDist(f,g,a,o,u,p,m,v),interpolate:xu(f,g,a,o,u,p,m,v)}),t=[m,v];break}case"s":var[f,g]=t,[u,p,m,v]=s.values;u+=f,m+=f,p+=g,v+=g;var b=e[e.length-1];if(["C","c","S","s"].includes(b.command)){var[,,,,l,c,h,d]=b.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:getCubicDist(f,g,a,o,u,p,m,v),interpolate:xu(f,g,a,o,u,p,m,v)}),t=[m,v];break}case"T":var[f,g]=t,[m,v]=s.values,b=e[e.length-1];if(["Q","q","T","t"].includes(b.command)){var[,,l,c,h,d]=b.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:_u(f,g,a,o,m,v)}),t=[m,v]}break;case"t":var[f,g]=t,[m,v]=s.values;m+=f,v+=g;var b=e[e.length-1];if(["Q","q","T","t"].includes(b.command)){var[,,l,c,h,d]=b.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:_u(f,g,a,o,m,v)}),t=[m,v]}break}});var i=0;e.forEach(s=>{i+=s.length});var r=0;return e.forEach(s=>{s.startT=r/i,s.endT=(r+s.length)/i,s.totalLength=i,r+=s.length}),{totalLength:i,interpolateList:e}}function i7(n,e,t,i,r){var[s,a,o,l]=t.split(",").map(g=>g.trim()),c={id:s,distance:y.parse(a||"0%"),rotateStatus:o||"auto",rotate:y.parse(l||"0deg")},h=()=>({}),d=(g,m)=>{var v=0;switch(g){case"angle":v=c.rotate.value;break;case"auto angle":v=m+c.rotate.value;break;case"reverse":v=m+180;break;case"auto":v=m;break}return v},u=0,p=0;if(r){var f=r.searchById(c.id);f&&(u=f.screenX.value,p=f.screenY.value),h=(g,m,v)=>{var b=new _e(f.d||""),{totalLength:_,interpolateList:x}=t7(b.segments),S=c.distance.toPx(_),E=S/_;m=m+E,m>1&&(m-=1);var A=x[0];m===0?A=x[0]:m===1&&(A=x[x.length-1]);var z=x.find(T=>T.startT<=m&&m{var b=(n.transformOrigin||"50% 50% 0px").split(" ").map(V=>y.parse(V)),_=b[0].toPx(n.width),x=b[1].toPx(n.height),S=h(g,m,v),E={x:S.x+u-_.value,y:S.y+p-x.value};if(n.setScreenX(E.x),n.setScreenY(E.y),c.rotateStatus!=="element"){var A=S,z=0;m<1&&(z=1/S.totalLength);var Z=h(g+z,m+z,v),Y=fl(Z.x-A.x,Z.y-A.y),T=y.deg(d(c.rotateStatus,Y));n.reset({transform:ui.rotate(n.transform,T)})}return E}}function r7(n,e,t,i){for(var r=t.split(" ").map(d=>y.parse(d)),s=i.split(" ").map(d=>y.parse(d)),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function n7(n,e,t,i,r,s){const a=s.$("video").el;let[o,,l]=t.split(":");const c=+(l||1),h=+(o||0)*c;return(d,u)=>{u===0?(a.currentTime=h,a.paused&&a.play()):u===1?(n.reset({currentTime:a.currentTime}),a.pause()):a.paused&&a.play()}}function Vg(n,e,t,i){var r=y.parse(t),s=y.parse(i);return(a,o)=>{var l=r.value,c=s.value;return o===0?y.deg(l):o===1?y.deg(c):y.deg(l+(c-l)*a).to(r.unit)}}function s7(n,e,t,i){for(var r=t.split(" ").map(d=>+d),s=i.split(" ").map(d=>+d),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function a7(n,e,t,i){var r=i.length-1,s=0;return(a,o)=>{var l=0;return o===0?l="":o===1?l=i:l=i.substring(s,Math.floor((r-s)*o)),l}}function o7(n,e,t,i){for(var r=Pn.parseStyle(t),s=Pn.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;lPn.join(o.map(f=>({offsetX:f.offsetX(u,p),offsetY:f.offsetY(u,p),blurRadius:f.blurRadius(u,p),color:f.color(u,p)})))}function l7(n,e,t,i){for(var r={type:_r(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o({type:r.type(h,d),value:r.value.map(u=>u(h,d))})}function c7(n,e,t,i){for(var r={type:_r(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o{var f=r.value.map(m=>m(u,p)),g=r.type(u,p);return(g.includes("matrix")||g.includes("scale"))&&(f=f.map(m=>y.number(m))),{type:g,value:f}}}function h7(n,e,t,i){for(var r={type:_r(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o{var u={type:r.type(h,d),value:r.value.map(p=>p(h,d))};return u}}function d7(n,e,t,i){for(var r=ui.parseStyle(t.trim()),s=ui.parseStyle(i.trim()),a=Math.max(r.length,s.length),o=[],l=0;l{var p=ui.join(o.map(f=>f(d,u)));return p}}function u7(n,e,t,i){for(var r=t.split(" ").map(d=>y.parse(d)),s=i.split(" ").map(d=>y.parse(d)),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function p7(n,e,t,i){for(var r=Math.max(t.length,i.length),s=[],a=t[t.length-1],o=i[i.length-1],l=0;ls.map(p=>p(d,u))}function f7(n,e,t,i){for(var r=new _e,s=new _e(t),a=new _e(i),o=Math.max(s.segments.length,a.segments.length),l=[],c=0;c{var f=l.map(m=>({command:m.command(u,p),values:m.values(u,p)})),g=r.joinPath(f);return g}}function g7(n,e,t,i){for(var r=new _a,s=new _a(t),a=new _a(i),o=Math.max(s.segments.length,a.segments.length),l=[],c=s.segments[s.segments.length-1].x,h=s.segments[s.segments.length-1].y,d=a.segments[a.segments.length-1].x,u=a.segments[a.segments.length-1].y,p=0;p{var b=r.joinPoints(l.map(_=>({x:_.x(m,v),y:_.y(m,v)})));return b}}const m7=()=>()=>{};function v7(n){switch(n){case"border-radius":return Wj;case"box-shadow":return Xj;case"text-shadow":return o7;case"background-image":case"BackgroundImageEditor":return Uj;case"filter":case"backdrop-filter":return e7;case"clip-path":return Jj;case"transform":return d7;case"transform-origin":return u7;case"perspective-origin":return r7;case"stroke-dasharray":return s7;case"d":return f7;case"points":return g7;case"offset-path":return i7;case"text":return a7;case"playTime":return n7}}function y7(n,e,t,i,r,s,a){var o=r||e;switch(o){case"width":case"x":return qt(n,e,t,i,"width");case"height":case"y":return qt(n,e,t,i,"height");case"perspective":case"font-size":case"font-weight":case"text-stroke-width":case"RangeEditor":case"textLength":case"startOffset":return qt(n,e,t,i,e);case"fill-opacity":case"opacity":case"stroke-dashoffset":case"currentTime":case"NumberRangeEditor":return pi(n,e,+t,+i);case"background-color":case"color":case"text-fill-color":case"text-stroke-color":case"fill":case"stroke":case"ColorViewEditor":return Sh(n,e,t,i);case"mix-blend-mode":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"SelectEditor":case"lengthAdjust":return Po(n,e,t,i);case"rotate":return Vg(n,e,t,i)}var l=v7(o);return l?l(n,e,t,i,s,a):m7}function b7(n,e,t,i,r,s,a){return y7(n,e,t,i,r,s,a)}class x7 extends X1{getDefaultObject(e={}){return super.getDefaultObject(P({comments:[],colors:[],gradients:[],svgfilters:[],svgimages:[],keyframes:[],images:[],imageKeys:[],videos:[],videoKeys:[],audios:[]},e))}get comments(){return this.get("comments")}get colors(){return this.get("colors")}get gradients(){return this.get("gradients")}get svgfilters(){return this.get("svgfilters")}get svgimages(){return this.get("svgimages")}get keyframes(){return this.get("keyframes")}get videos(){return this.get("videos")}get images(){return this.get("images")}set images(e){this.set("images",e)}get imageKeys(){return this.get("imageKeys")}get videoKeys(){return this.get("videoKeys")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new xh(P({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,i){e.splice(i+(tt.toString(e)).join(` - -`)}copyPropertyList(e,t){var i=P({},e[t]);e.splice(t,0,i)}removePropertyList(e,t){e.splice(t,1)}removeColor(e){this.removePropertyList(this.colors,e)}copyColor(e){this.copyPropertyList(this.colors,e)}sortColor(e,t){this.sortItem(this.colors,e,t)}setColorValue(e,t={}){this.colors[e]=P(P({},this.colors[e]),t)}getColorIndex(e){return this.colors[e]}getColor(e){return this.colors.filter(t=>t.name===e)[0]}addColor(e){return this.colors.push(e),e}createColor(e={}){return this.addColor(e)}removeImage(e){this.removePropertyList(this.images,e),this.refreshImageKeys()}copyImage(e){this.copyPropertyList(this.images,e),this.refreshImageKeys()}sortImage(e,t){this.sortItem(this.images,e,t)}setImageValue(e,t={}){this.images[e]=P(P({},this.images[e]),t),this.refreshImageKeys()}getImageValueById(e,t=""){const i=this.imageKeys[e];return i?i.local:e||t}getImageDataURIById(e){const t=this.imageKeys[e];if(!!t)return t.original}refreshImageKeys(){let e={};this.images.forEach(t=>{e[t.id]=t}),this.reset({imageKeys:e})}addImage(e){return this.images.push(e),this.refreshImageKeys(),e}createImage(e={}){return this.addImage(e)}removeVideo(e){this.removePropertyList(this.videos,e),this.refreshVideoKeys()}copyVideo(e){this.copyPropertyList(this.videos,e),this.refreshVideoKeys()}sortVideo(e,t){this.sortItem(this.videos,e,t)}setVideoValue(e,t={}){this.videos[e]=P(P({},this.videos[e]),t)}getVideoValueById(e){const t=this.videoKeys[e];if(!!t)return t.local}refreshVideoKeys(){let e={};this.videos.forEach(t=>{e[t.id]=t}),this.reset({videoKeys:e})}addVideo(e){return this.videos.push(e),this.refreshVideoKeys(),e}createVideo(e={}){return this.addVideo(e)}removeGradient(e){this.removePropertyList(this.gradients,e)}copyGradient(e){this.copyPropertyList(this.gradients,e)}sortGradient(e,t){this.sortItem(this.gradients,e,t)}setGradientValue(e,t){this.gradients[e]=P(P({},this.gradients[e]),t)}getGradientIndex(e){return this.gradients[e]}getGradient(e){return this.gradients.filter(t=>t.name===e)[0]}addGradient(e={}){return this.gradients.push(e),e}createGradient(e={}){return this.addGradient(e)}getSVGFilterIndex(e){var i;var t=this.svgfilters.map((r,s)=>({id:r.id,index:s})).filter(r=>r.id===e);return t.length?(i=t==null?void 0:t[0])==null?void 0:i.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=P(P({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(e)}getSVGImageIndex(e){var t=this.svgimages.map((i,r)=>({id:i.id,index:r})).filter(i=>i.id===e)[0];return t?t.index:-1}removeSVGImage(e){this.removePropertyList(this.svgimages,e)}copySVGImage(e){this.copyPropertyList(this.svgimages,e)}sortSVGImage(e,t){this.sortItem(this.svgimages,e,t)}setSVGImageValue(e,t){this.svgimages[e]=P(P({},this.svgimages[e]),t)}addSVGImage(e={}){this.svgimages.push(e);var t=this.svgimages.length-1;return t}createSVGImage(e={}){return this.addSVGImage(e)}}class _7 extends x7{constructor(){super(...arguments);zi(this,il,[])}getDefaultObject(t={}){return super.getDefaultObject(P({timeline:[],compiledTimeline:{}},t))}get timeline(){return this.get("timeline")}set timeline(t){this.set("timeline",t)}expectJSON(t){return t==="compiledTimeline"?!1:super.expectJSON(t)}setTimelineInfo(t){var i=this.getSelectedTimeline();!i||["speed","iterationCount","direction"].forEach(r=>{$t(t[r])&&(i[r]=t[r])})}compileAll(){var t=this.getSelectedTimeline();Vi(this,il,{}),t&&t.animations.forEach(i=>{i.properties.forEach(r=>{this.compiledTimingFunction(i.id,r.property)})})}searchTimelineOffset(t){var i=this.getSelectedTimeline(),r=[];return i&&i.animations.forEach(s=>{s.properties.forEach(a=>{var o=this.getCompiledTimingFunction(s.id,a.property);r.push(o.find(l=>l.isOnlyTime&&l.startTime<=t?!0:l.startTime<=t&&ts)}getCompiledTimingFunction(t,i){return Pt(this,il)[`${t}.${i}`]}compiledTimingFunction(t,i){var r=this,s=this.getTimelineProperty(t,i),a=this.modelManager.get(t),o=`${t}.${i}`;if(s.keyframes.length===1){Pt(this,il)[o]=[];return}let l=Ze.body().$(`[data-id="${t}"]`),c=s.keyframes.map(h=>h.editor)[0];Pt(this,il)[o]=s.keyframes.map((h,d)=>{var u=h,p=s.keyframes[d+1];h.editor=c,p||(p={time:h.time,value:h.value});var f={layer:a,layerElement:l,property:s.property,isOnlyTime:u.time===p.time,startTime:h.time,endTime:p.time,startValue:h.value,endValue:p.value,timing:h.timing,interpolateFunction:b7(a,s.property,h.value,p.value,h.editor,r,l),timingFunction:bg(h.timing)};return f.func=this.makeTimingFunction(f),f}).filter(h=>h)}makeTimingFunction(t){return i=>{var r=t.endTime-t.startTime,s=1;return r!==0&&(s=(i-t.startTime)/r),t.interpolateFunction(t.timingFunction(s),s,r,t.timingFunction)}}stop(){var t=this.getSelectedTimeline();if(t){var i=t.currentTime;this.searchTimelineOffset(i).forEach(r=>{if(r.property==="playTime"){const s=r.layerElement.$("video");s&&s.el.pause()}})}}seek(t,i=r=>r){var r=this.getSelectedTimeline();if(r){$t(t)&&this.setTimelineCurrentTime(t);var s=r.currentTime;this.searchTimelineOffset(s).filter(i).forEach(a=>{a.property==="offset-path"||a.property==="playTime"?a.func(s):a.layer&&a.layer.reset({[a.property]:a.func(s)})})}}getSelectedTimeline(){var t=this.timeline,i=t.filter(s=>s.selected),r=i.length?i[0]:t[0];return r||null}getKeyframeListReturnArray(){var t=this.getSelectedTimeline(),i=[];return t&&t.animations.forEach(r=>{r.properties.forEach(s=>{i.push.apply(i,s.keyframes)})}),i}getKeyframeList(t){var i=this.getSelectedTimeline();i&&i.animations.forEach(r=>{r.properties.forEach(s=>{s.keyframes.forEach(a=>{t&&t(i,a)})})})}getSelectedTimelineLastTime(){var t=0;return this.getKeyframeList((i,r)=>{t=Math.max(r.time,t)}),t}getSelectedTimelineFirstTime(){var t=Number.MAX_SAFE_INTEGER;return this.getKeyframeList((i,r)=>{t=Math.min(r.time,t)}),t}getSelectedTimelinePrevTime(){var t=this.getSelectedTimelineFirstTime();return this.getKeyframeList((i,r)=>{Fr(i.fps,r.time){Fr(i.fps,r.time)>i.currentTimecode&&(t=Math.min(r.time,t))}),t}setTimelineTitle(t,i){var r=this.timeline.find(s=>s.id===t);r&&(r.title=i)}selectTimeline(t){if(t)this.timeline.forEach(r=>{r.selected=r.id===t});else{var i=this.timeline.filter(r=>r.selected);i.length||this.timeline.length&&(this.timeline.selected=!0)}this.compileAll()}removeAnimation(t){this.timeline=this.timeline.filter(i=>i.id!==t),this.timeline.length&&(this.timeline[0].selected=!0),this.compileAll()}addTimeline(t=60,i="00:00:10:00"){var r=Zr(),s=Ve(P({id:r,title:"sample"},this.getTimelineLayerInfo(t,i)),{animations:[]});return this.timeline.push(s),this.selectTimeline(r),s}addTimelineLayer(t,i=60,r="00:00:10:00"){var s=this.getSelectedTimeline();if(s||(s=this.addTimeline(i,r)),s.selected=!0,t){var a=s.animations.filter(o=>o.id===t);a[0]||s.animations.push({id:t,properties:[]})}}getTimelineLayerInfo(t=60,i="00:00:10:00"){var r=So(t,i);return{fps:t,speed:1,direction:"normal",iterationCount:1,currentTimecode:Fr(t,0),totalTimecode:Fr(t,r),currentTime:0,totalTime:r,displayStartTime:0,displayEndTime:r}}setTimelineCurrentTime(t){var i=this.getSelectedTimeline(),{fps:r,totalTimecode:s}=i;if(i){var a=t,o=t;+a+""===a&&(a=+a,o=B1(r,a)),o>s&&(o=s);var l=So(r,o);i.currentTime=l,i.currentTimecode=Fr(r,l)}}setDisplayTimeDxRate(t,i,r){var s=this.getSelectedTimeline();if(s){var a=t*s.totalTime,o=i+a,l=r+a;o=Math.max(o,0),o=Math.min(o,l),o===0&&(l=r-i),l=Math.max(l,o),l=Math.min(l,s.totalTime),l===s.totalTime&&(o=s.totalTime-(r-i)),s.displayStartTime=o,s.displayEndTime=l}}setDisplayStartTimeRate(t){var i=this.getSelectedTimeline();i&&(i.displayStartTime=t*i.totalTime)}setDisplayEndTimeRate(t){var i=this.getSelectedTimeline();i&&(i.displayEndTime=t*i.totalTime)}setTimelineCurrentTimeRate(t){var i=this.getSelectedTimeline();if(i){var{displayStartTime:r,displayEndTime:s,fps:a}=i,o=r+(s-r)*t;this.setTimelineCurrentTime(Fr(a,o))}}setTimelineTotalTime(t){var i=this.getSelectedTimeline();if(i){var r=t,s=t;+r+""===r&&(r=+r,s=B1(i.fps,r)),So(i.fps,s)r.id===t)}addTimelineProperty(t,i){this.addTimelineLayer(t);var r=this.getTimelineObject(t);if(r){var s=r.properties.filter(a=>a.property===i);s.length||(r.properties.push({property:i,keyframes:[]}),this.compiledTimingFunction(t,i))}}getTimelineProperty(t,i){var r=this.getSelectedTimeline();if(r){t=t||r.selectedLayerId,i=i||r.selectedProperty;var s=this.getTimelineObject(t);if(s)return s.properties.find(a=>a.property===i)}}setSelectedOffset(t,i,r){var s=this.getSelectedTimeline();if(s){s.selectedLayerId=t,s.selectedProperty=i,s.selectedOffsetTime=r;var a=this.getTimelineProperty();a.keyframes.forEach(o=>{o.selected=o.time===r})}}deleteTimelineKeyframe(t,i,r){var s=this.getTimelineProperty(t,i);s&&(s.keyframes=s.keyframes.filter(a=>a.id!=r))}removeTimelineProperty(t,i){var r=this.getTimelineObject(t);r&&(r.properties=r.properties.filter(s=>s.property!=i))}removeTimeline(t){var i=this.getSelectedTimeline();i&&(i.animations=i.animations.filter(r=>r.id!=t))}setTimelineKeyframeOffsetTime(t,i,r,s){var a=this.getTimelineKeyframeById(t,i,r);a&&(a.time=s,this.compiledTimingFunction(t,i))}setTimelineKeyframeOffsetValue(t,i,r,s=void 0,a=void 0,o=void 0){var l=this.getTimelineKeyframeById(t,i,r);l&&($t(o)&&(l.time=o),$t(s)&&(l.value=s),$t(a)&&(l.timing=a),this.compiledTimingFunction(t,i))}addTimelineKeyframe({layerId:t,property:i,value:r,timing:s,time:a,editor:o}){this.addTimelineProperty(t,i);var l=this.getSelectedTimeline(),c=this.getTimelineProperty(t,i);if(c){var h=a||l.currentTime,d=c.keyframes.filter(p=>p.time===h);if(!d.length){r=Di(r)||r===""?this.getDefaultPropertyValue(i):r;var u={id:Zr(),layerId:t,property:i,time:h,value:r,timing:s||"linear",editor:o};return c.keyframes.push(u),c.keyframes.sort((p,f)=>p.time>f.time?1:-1),this.compiledTimingFunction(t,i),u}}}getDefaultPropertyValue(t){switch(t){case"mix-blend-mode":return"normal";case"rotate":return"0deg";case"box-shadow":return"0px 0px 0px 0px rgba(0, 0, 0, 1)";case"text-shadow":return"0px 0px 0px rgba(0, 0, 0, 1)";case"opacity":return 1;default:return""}}copyTimelineKeyframe(t,i,r=null){var s=this.getTimelineProperty(t,i);if(s){var a=this.getSelectedTimeline(),o=r||a.currentTime,l=s.keyframes.filter(u=>u.timeu.time>p.time?-1:1),c=l[0].value+"",h=l[0].timing+"",d=l[0].editor),this.addTimelineKeyframe({layerId:t,property:i,value:c,timing:h,editor:d})}}getTimelineKeyframe(t,i,r){var s=this.getTimelineProperty(t,i);if(s)return s.keyframes.find(a=>a.time===r)}getTimelineKeyframeById(t,i,r){var s=this.getTimelineProperty(t,i);if(s)return s.keyframes.find(a=>a.id===r)}sortTimelineKeyframe(t,i){var r=this.getTimelineProperty(t,i);r&&(r.keyframes.sort((s,a)=>s.time>a.time?1:-1),this.compiledTimingFunction(t,i))}setFps(t){var i=this.getSelectedTimeline();i&&(i.fps=t,i.currentTimecode=Fr(t,i.currentTime),i.totalTimecode=Fr(t,i.totalTime))}}il=new WeakMap;const ab=Ki();class S7 extends _7{getDefaultTitle(){return"New Project"}get isAbsolute(){return!1}get parent(){return null}get nestedAngle(){return 0}toRootVariableCSS(){var e={};return this.rootVariable.split(";").filter(t=>t.trim()).forEach(t=>{var[i,r]=t.split(":");e[`--${i}`]=r}),e}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"project",name:"new Project",description:"",rootVariable:""},e))}get description(){return this.get("description")}set description(e){this.set("description",e)}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.set("rootVariable",e)}get artboards(){return(this.layers||[]).filter(e=>e.is("artboard"))}get offsetX(){return 0}get offsetY(){return 0}get screenWidth(){return 0}get screenHeight(){return 0}isLayoutItem(){return!1}hasLayout(){return!1}getAbsoluteMatrix(){return Ki()}getTransformMatrix(){return Ki()}resetMatrix(e){const[t,i]=aa([],Or(e.absoluteMatrix,e.localMatrixInverse));e.reset({x:t,y:i})}get rectVerties(){var e;return(e=this.layers)!=null&&e.length?Xc(this.layers):null}get absoluteMatrix(){return ab}get absoluteMatrixInverse(){return ab}get contentBox(){return{left:0,top:0,width:0,height:0}}}class w7 extends wa{getIcon(){return We.rect}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"rect",name:"New Rect"},e))}getDefaultTitle(){return"Rect"}}var ob=function(n){if(!n||!n.dtype)return!1;var e=new RegExp("function View[0-9]+d(:?"+n.dtype+")+");return e.test(String(n.constructor))},Dg=function(n){return n?n.data!==void 0&&Array.isArray(n.shape)&&n.offset!==void 0&&n.stride!==void 0:!1},wh=function(e){return Array.isArray(e)||ArrayBuffer.isView(e)},M7=ob,$7=Dg,P7=wh;function $a(n){if(!!n){if(M7(n)||$7(n))return n.dtype==="generic"?$a.GENERIC_NDARRAY:$a.NDARRAY;if(P7(n))return $a.ARRAY_OF_ARRAYS;throw new Error("Unhandled data type. Got type: "+typeof n)}}$a.ARRAY_OF_ARRAYS="Arr",$a.NDARRAY="Nd",$a.GENERIC_NDARRAY="GenNd",$a.PACKED="PackArr";var Mh=$a,lb=wh;function T7(n){return n[0].toUpperCase()+n.slice(1)}var C7=function(n,e,t,i,r,s){var a,o=[],l=!1;for(a=0;a=0;r--)if(s[r]===(Array.isArray(e[r])?e[r][1]:e[r])-1)s[r]=Array.isArray(e[r])?e[r][0]:0;else{s[r]++;break}},Bg=Mh,jg=function(n,e,t,i){var r,s=[];switch(Bg(i)){case Bg.NDARRAY:for(s.push(" var "+e+" = "+t+".data;"),s.push(" var "+e+"Offset = "+t+".offset;"),r=0;r1)throw new Error("Analytical derivative not implemented for rational b-splines with order n = "+S+".")}s&&(n="Basis"+n),a&&(n="Der"+a.join("_")+"_"+n);var E=ub[n];if(i)var A=typeof i=="function"?i:console.log;if(E)return i&&A(pb[n]),E.bind(e);var z=[],Z="evaluate"+n,Y=t.point;s&&(Y=function(k,L){for(var X=[],ae=0;ae "+q+"[i][1] || a === undefined || isNaN(a)) {"),J(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+q+"[i][0]+', '+"+q+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),J(" }"),J("}")),u=0;u "+ce(u)+" + 1) {"),J(" m = 0.5 * (h + "+ce(u)+") | 0;"),J(" if ("+V([u,"m"])+" > "+te(u)+") h = m;"),J(" else "+ce(u)+" = m;"),J("}"),Re(` - // Fetch knots for dimension `+u+` -`),l=-g[u]+1;l<=g[u];l++)x[u]==="closed"?l<0?J("var "+oe([u,l+g[u]-1])+" = "+be(ce(u)+" < "+-l,V([u,0])+" + "+V([u,[ne(u),ce(u),l]])+" - "+V([u,[ne(u)]]),V([u,[ce(u),l]]))+";"):l>0?J("var "+oe([u,l+g[u]-1])+" = "+be(ce(u)+" + "+l+" > "+ne(u),V([u,ne(u)])+" + "+V([u,l+" + "+ce(u)+" - "+ne(u)])+" - "+V([u,0]),V([u,[ce(u),l]]))+";"):J("var "+oe([u,l+g[u]-1])+" = "+V([u,[ce(u),l]])+";"):J("var "+oe([u,l+g[u]-1])+" = "+V([u,[ce(u),l]])+";");else{for(Re(` - // Directly compute knot interval for dimension `+u+` -`),x[u]==="closed"?J(ce(u)+" = ("+te(u)+" | 0) % "+ne(u)+";"):(J(ce(u)+" = ("+te(u)+" | 0);"),J("if ("+ce(u)+" < "+g[u]+") "+ce(u)+" = "+g[u]+";"),J("if ("+ce(u)+" > "+ne(u)+" - 1) "+ce(u)+" = "+ne(u)+" - 1;")),Re(` - // Compute and clamp knots for dimension `+u+` -`),l=-g[u]+1;l<=g[u];l++)p=oe([u,l+g[u]-1]),J("var "+p+" = "+ce(u)+" + "+l+";");if(x[u]==="clamped")for(l=-g[u]+1;l<=g[u];l++)p=oe([u,l+g[u]-1]),l<0&&J("if ("+p+" < "+g[u]+") "+p+" = "+g[u]+";"),l>0&&J("if ("+p+" > "+ne(u)+") "+p+" = "+ne(u)+";");x[u]==="closed"&&(Re(` - // Wrap the B-Spline parameter for closed boundary`),J(te(u)+" %= "+ne(u)+";"))}for(u=0,h=[];u{g.func===Xe.KEYWORD?u6.includes(g.matchedString)?r.radialType=g.matchedString:Ep.includes(g.matchedString)&&(r.spreadMethod=g.matchedString):n.push(g)});var[o=p.percent(50),l=p.percent(50),c=p.percent(100),h=p.percent(50),u=p.percent(50),d=p.percent(100)]=n.map(g=>g.parsed);r=se(b({},r),{x1:o,y1:l,x2:c,y2:h,x3:u,y3:d});const v=Bs.parseColorSteps(a);return new Bs(se(b({},r),{colorsteps:v}))}}class as extends Nc{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",colorsteps:[new et({color:"red",percent:0,index:0}),new et({color:"red",percent:100,index:1})]})}toCloneObject(){return se(b({},super.toCloneObject()),{static:!0})}static create(e="transparent"){return new as({colorsteps:[new et({color:e,percent:0,index:0}),new et({color:e,percent:100,index:0})]})}setColor(e){this.colorsteps.forEach(t=>{t.color=e})}toString(){var e=this.json.colorsteps[0].color;return e}toSVGString(){return""}toFillValue(){return this.toString()}}class at extends or{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:at.createImage(e.images[0])})}static createImage(e){return new SVGLImageResource({url:e})}setGradient(e){this.reset({type:e.type,image:at.createGradient(e,this.json.image)})}static createGradient(e,t){const r=e.colorsteps||t.colorsteps;let i=t.toJSON();switch(delete i.itemType,delete i.type,e.type){case F.LINEAR:return new Fs(se(b({},i),{colorsteps:r}));case F.RADIAL:return new Bs(se(b({},i),{colorsteps:r}));default:return new as(se(b({},i),{colorsteps:r}))}}get image(){return this.json.image}set image(e){this.json.image=e}static parse(e){return new at(e)}static parseImage(e=""){const t=Xt(e);let r=null;if(!t)return as.create(e||"transparent");switch(t.func){case F.LINEAR:r=Fs.parse(t.matchedString);break;case F.RADIAL:r=Bs.parse(t.matchedString);break;case F.URL:r=$n.parse(t.matchedString);break;default:r=as.create(t.matchedString);break}return r}static changeImageType(e){switch(e.type){case F.LINEAR:return new Fs(e);case F.RADIAL:return new Bs(e);case"image-resource":case F.URL:return new $n(e);default:return new as(e)}}}const p6=["appearance","border","borderRadius","backgroundImage","backdropFilter","clipPath","pattern","boxShadow","layout","transform","transformOrigin","perspective","perspectiveOrigin","backdropFilter","boxModel"],Lp={};p6.forEach(s=>{Lp[s]=!0});class fa extends ss{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svg",name:"New SVG",elementType:"svg",overflow:"visible",stroke:"black",strokeWidth:1,fill:"transparent",fillOpacity:1,fillRule:"nonzero",textAnchor:"start",strokeLinecap:"",strokeLinejoin:"",strokeDasharray:[],strokeDashoffset:0},e))}get stroke(){return this.get("stroke")}set stroke(e){this.set("stroke",e)}get strokeWidth(){return this.get("strokeWidth")}set strokeWidth(e){this.set("strokeWidth",e)}get fill(){return this.get("fill")}set fill(e){this.set("fill",e)}get fillOpacity(){return this.get("fillOpacity")}set fillOpacity(e){this.set("fillOpacity",e)}get fillRule(){return this.get("fillRule")}set fillRule(e){this.set("fillRule",e)}get textAnchor(){return this.get("textAnchor")}set textAnchor(e){this.set("textAnchor",e)}get strokeDasharray(){return this.get("strokeDasharray")}set strokeDasharray(e){this.set("strokeDasharray",e)}get strokeDashoffset(){return this.get("strokeDashoffset")}set strokeDashoffset(e){this.set("strokeDashoffset",e)}get strokeLinejoin(){return this.get("strokeLinejoin")}set strokeLinejoin(e){this.set("strokeLinejoin",e)}get strokeLinecap(){return this.get("strokeLinecap")}set strokeLinecap(e){this.set("strokeLinecap",e)}get isDragSelectable(){return this.isBooleanItem===!1}get isBooleanItem(){return Boolean(this.parent.is("boolean-path"))}editable(e){if(Lp[e])return!1;switch(e){case"svg-item":return!0}return super.editable(e)}getDefaultTitle(){return"SVG"}isSVG(){return!0}hasPoint(e,t){const r=this.fill,i=this.fillOpacity,a=this.strokeWidth,n=r==="transparent"||i===0||pt(r).a===0,o=a===0;return n?this.isPointInStroke(e,t):!n&&!o?this.isPointInStroke(e,t)||this.isPointInFill(e,t):!n&&o?this.isPointInFill(e,t):!1}isPointInFill(e,t){const r=this.getCache("svgElement"),i=this.getCache("pathElement");if(i){const[a,n]=this.invertPoint([e,t,0]),o=r.createSVGPoint();return Object.assign(o,{x:a,y:n}),i.isPointInFill(o)}return!1}isPointInStroke(e,t){const r=this.getCache("svgElement"),i=this.getCache("pathElement");if(i){const[a,n]=this.invertPoint([e,t,0]),o=r.createSVGPoint();return Object.assign(o,{x:a,y:n}),i.isPointInStroke(o)}return!1}convertStrokeToPath(e=10,t=10){const r=this.attrs("name","width","parentId","height","x","y","transform","stroke");return r.fill=r.stroke,delete r.stroke,se(b({itemType:"svg-path","fill-rule":"evenodd"},r),{x:p.parse(r.x).add(e),y:p.parse(r.y).add(t)})}toSVGPath(){const e=this.toCloneObject();return delete e.id,delete e.itemType,se(b({},e),{d:this.d})}createFragmentMatrix(e){const t=this.get(e),r=at.parseImage(t),i={x:0,y:0,width:this.screenWidth,height:this.screenHeight},a=le(xt(i.x,i.y,i.width,i.height),this.absoluteMatrix),n={backRect:i,backVerties:a,absoluteMatrix:this.absoluteMatrix,image:r};let o,l,c,h,u,d;switch(r.type){case F.RADIAL:o=r.x1.toPx(i.width),l=r.y1.toPx(i.height),c=r.x2.toPx(i.width),h=r.y2.toPx(i.height),u=r.x3.toPx(i.width),d=r.y3.toPx(i.height);const P=[o.value,l.value,0],S=[c.value,h.value,0],V=[u.value,d.value,0];var[g,y,v]=le([P,S,V],this.absoluteMatrix);n.endPoint=y,n.startPoint=g,n.shapePoint=v,n.colorsteps=r.colorsteps.map(E=>{const I=E.toLength();return{id:E.id,cut:E.cut,color:E.color,timing:E.timing,timingCount:E.timingCount,pos:te([],n.startPoint,n.endPoint,I.value/100)}});break;case F.LINEAR:o=r.x1.toPx(i.width),l=r.y1.toPx(i.height),c=r.x2.toPx(i.width),h=r.y2.toPx(i.height);var[g,y]=le([[o.value,l.value,0],[c.value,h.value,0]],this.absoluteMatrix);n.endPoint=y,n.startPoint=g,n.areaStartPoint=Yt(g),n.areaEndPoint=Yt(y),n.colorsteps=r.colorsteps.map(E=>{const I=E.toLength();return{id:E.id,cut:E.cut,color:E.color,timing:E.timing,timingCount:E.timingCount,pos:te([],n.startPoint,n.endPoint,I.value/100)}});break}return n}}class Vp extends fa{getIcon(){return oe.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svg-path",name:"New Path",strokeWidth:1,d:"",totalLength:0},e))}enableHasChildren(){return!1}reset(e,t={origin:"*"}){const r=super.reset(e,t);return this.hasChangedField("d")&&(this.cachePath=new K(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height),r}refreshMatrixCache(){super.refreshMatrixCache(),this.hasChangedField("d")?(this.addCache("pathString",new K(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)):this.hasChangedField("width","height")&&(this.d=this.getCache("pathString").clone().scale(this.width/this.cacheWidth,this.height/this.cacheHeight).d,this.manager.setChanged("reset",this.id,{d:this.d}))}setCache(){super.setCache(),this.addCache("pathString",new K(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)}get d(){return this.get("d")?(this.hasCache("pathString")||(this.addCache("pathString",new K(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)),this.getCache("pathString").clone().scale(this.width/this.getCache("pathWidth"),this.height/this.getCache("pathHeight")).d):null}set d(e){this.set("d",e)}getDefaultTitle(){return"Path"}}class g6 extends Vp{getIcon(){return oe.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"boolean-path",name:"New Boolean Path",strokeWidth:1,d:"",booleanOperation:"none"},e))}get booleanOperation(){return this.get("booleanOperation")}set booleanOperation(e){this.set("booleanOperation",e)}enableHasChildren(){return!0}reset(e,t={origin:"*"}){var i;const r=super.reset(e,t);if(this.cachePath||this.setCache(),this.hasChangedField("changedChildren","booleanOperation")){if(this.children.length===1){const a=this.layers[0].absolutePath().d;this.d=this.invertPath(a).d,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:a})}else if(this.booleanOperation!=="none"&&((i=this.children)==null?void 0:i.length)>=2&&this.modelManager.editor.pathKitManager.has())if(this.layers.filter(n=>n.d).length>=2){const n=this.doBooleanOperation();this.d=n,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:n})}else this.d=void 0,this.removeCache(),this.modelManager.setChanged("reset",this.id,{d:void 0})}return r}get resizableWitChildren(){return!0}startToCacheChildren(){this.cachedSize={width:this.width,height:this.height},this.cachedLayerMatrix=this.layers.map(e=>(e.startToCacheChildren(),{item:e,matrix:e.matrix}))}recoverChildren(){const e={width:this.width,height:this.height},t=e.width/this.cachedSize.width,r=e.height/this.cachedSize.height;this.cachedLayerMatrix.forEach(({item:i,matrix:a})=>{i.reset({x:i.x.changeUnitValue(a.x*t,e.width),y:i.y.changeUnitValue(a.y*r,e.height),width:i.width.changeUnitValue(a.width*t,e.width),height:i.height.changeUnitValue(a.height*r,e.height)}),i.recoverChildren()})}getFieldValueByBooleanOperation(e){const t=this.layers;if(t.length===0)return;if(t.length===1)return t[0][e];switch(this.booleanOperation){case Qr.DIFFERENCE:return t[1][e]}return t[0][e]}get fill(){return this.getFieldValueByBooleanOperation("fill")}get stroke(){return this.getFieldValueByBooleanOperation("stroke")}setCache(){super.setCache(),this.cachePath=new K(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height}removeCache(){super.removeCache(),this.cachePath=void 0,this.cacheWidth=void 0,this.cacheHeight=void 0}getDefaultTitle(){return"Path"}doBooleanOperation(){switch(this.booleanOperation){case Qr.INTERSECTION:return this.intersection();case Qr.UNION:return this.union();case Qr.DIFFERENCE:return this.difference();case Qr.REVERSE_DIFFERENCE:return this.reverseDifference();case Qr.XOR:return this.xor()}return""}getPathList(){return this.layers.map(e=>e.absolutePath().d)}intersection(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.intersection(i,a),e);return this.invertPath(r).d}union(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.union(i,a),e);return this.invertPath(r).d}difference(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.difference(i,a),e);return this.invertPath(r).d}reverseDifference(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.reverseDifference(i,a),e);return this.invertPath(r).d}xor(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.xor(i,a),e);return this.invertPath(r).d}}class f6 extends ss{getIcon(){return oe.lens}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"circle",name:"New Circle",borderRadius:"100%"},e))}getDefaultTitle(){return"Circle"}}class m6 extends ss{getIcon(){return oe.image}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"image",name:"New Image",elementType:"image",src:""},e))}get src(){return this.get("src")}set src(e){this.set("src",e)}get naturalWidth(){return this.get("naturalWidth")}set naturalWidth(e){this.set("naturalWidth",e)}get naturalHeight(){return this.get("naturalHeight")}set naturalHeight(e){this.set("naturalHeight",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Image"}resize(){this.reset({width:this.naturalWidth.clone(),height:this.naturalHeight.clone()})}}class v6 extends fa{getIcon(){return oe.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"polygon",name:"New Polygon",strokeWidth:1,count:3},e))}get count(){return this.get("count")}set count(e){this.set("count",e)}convert(e){return e=super.convert(e),e.count&&(e.count=+e.count),e}enableHasChildren(){return!1}get editablePath(){return!1}get d(){const{width:e,height:t,count:r}=this;return K.makePolygon(e,t,r).d}getDefaultTitle(){return"Polygon"}isPointInPath(e){const t=Ze([],e,this.absoluteMatrixInverse);return this.cachePath.isPointInPath({x:t[0],y:t[1]},this.strokeWidth||0)}}function gt(s,e,t){return()=>t}function ht(s,e,t,r,i=void 0){return(a,n)=>{var o=0;return n===0?o=t:n===1?o=r:o=t+(r-t)*a,i?o+i:o}}function Op(s,e,t,r="width",i="parent"){var a=null;return i==="parent"?a=s[i][r]:i==="self"&&(a=s[r]),a?t.toPx(a.value):t}function y6(s,e,t,r,i="width",a="parent"){var n=null;return a==="parent"?n=s[a][i]:a==="self"&&(n=s[i]),n?t.to(r,n.value):t}function qe(s,e,t,r,i="width",a="parent"){var n=p.parse(t),o=p.parse(r);return n.unit===o.unit?ht(s,e,n.value,o.value,n.unit):n.equals(o)?gt(s,e,n):(l,c)=>{var h=Op(s,e,n,i,a),u=Op(s,e,o,i,a);return c===0?h:c===1?u:y6(s,e,h.value+(u.value-h.value)*l,n.unit,i,a)}}function Qt(s,e,t,r){return(i,a)=>a===1?r:t}function _n(s,e,t,r){var i=pt(t||"rgba(0, 0, 0, 1)"),a=pt(r||"rgba(0, 0, 0, 1)");return(n,o)=>o===0?t:o===1?r:bc(i,a,n,"rgb")}function Ns(s,e,t,r){return Qt(s,e,t,r)}function b6(s,e,t,r){var i={cut:Qt(s,e,t.cut,r.cut),percent:ht(s,e,t.percent,r.percent),px:ht(s,e,t.px,r.px),em:ht(s,e,t.em,r.em),unit:Ns(s,e,t.unit,r.unit),color:_n(s,e,t.color,r.color)};return(a,n)=>new et({cut:i.cut(a,n),percent:i.percent(a,n),px:i.px(a,n),em:i.em(a,n),unit:i.unit(a,n),color:i.color(a,n)})}function Gc(s,e,t=[],r=[]){for(var i=Math.max(t.length,r.length),a=[],n=0;na.map(u=>u(c,h))}function Rp(s,e,t,r){var i={angle:ht(s,e,t.angle,r.angle),radialPositionX:qe(s,e,t.radialPosition[0],r.radialPosition[0],"width","self"),radialPositionY:qe(s,e,t.radialPosition[1],r.radialPosition[1],"height","self"),colorsteps:Gc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>new ei({angle:i.angle(a,n),radialPosition:[i.radialPositionX(a,n),i.radialPositionY(a,n)],colorsteps:i.colorsteps(a,n)})}function jp(s,e,t,r){var i={angle:ht(s,e,t.angle,r.angle),colorsteps:Gc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>{var o=i.colorsteps(a,n);return new ti({angle:i.angle(a,n),colorsteps:o})}}function No(s,e){switch(e){case"width":if(s==="center")return"50%";if(s==="left")return"0%";if(s==="right")return"100%";break;case"height":if(s==="center")return"50%";if(s==="top")return"0%";if(s==="bottom")return"100%";break}return s}function zp(s,e,t,r){t.radialPosition[0]=No(t.radialPosition[0],"width"),t.radialPosition[1]=No(t.radialPosition[1],"height"),r.radialPosition[0]=No(r.radialPosition[0],"width"),r.radialPosition[1]=No(r.radialPosition[1],"height");var i={radialType:Ns(s,e,t.radialType,r.radialType),radialPositionX:qe(s,e,t.radialPosition[0],r.radialPosition[0],"width","self"),radialPositionY:qe(s,e,t.radialPosition[1],r.radialPosition[1],"height","self"),colorsteps:Gc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>{var o=new ri({radialType:i.radialType(a,n),radialPosition:[i.radialPositionX(a,n),i.radialPositionY(a,n)],colorsteps:i.colorsteps(a,n)});return o}}function x6(s,e,t,r){var i=Rp(s,e,t,r);return(a,n)=>{var o=i(a,n);return new Es({angle:o.angle,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function $6(s,e,t,r){var i=jp(s,e,t,r);return(a,n)=>{var o=i(a,n),l=new Ls({angle:o.angle,colorsteps:o.colorsteps});return l}}function _6(s,e,t,r){var i=zp(s,e,t,r);return(a,n)=>{var o=i(a,n);return new Vs({radialType:o.radialType,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function S6(s,e,t,r){var i={image:(a,n)=>n};if(t.type==="url"||r.type==="url")i.image=Qt(s,e,t,r);else if(t.type!=r.type)i.image=Qt(s,e,t,r);else switch(t.type){case"linear-gradient":i.image=jp(s,e,t,r);break;case"repeating-linear-gradient":i.image=$6(s,e,t,r);break;case"radial-gradient":i.image=zp(s,e,t,r);break;case"repeating-radial-gradient":i.image=_6(s,e,t,r);break;case"conic-gradient":i.image=Rp(s,e,t,r);break;case"repeating-conic-gradient":i.image=x6(s,e,t,r);break}return(a,n)=>i.image(a,n)}function P6(s,e,t,r){for(var i=Be.parseStyle(wr(t)),a=Be.parseStyle(wr(r)),n=Math.max(i.length,a.length),o=[],l=0,c=n;lBe.join(o.map(g=>{var y={image:g.image(d,v),size:g.size(d,v),x:g.x(d,v),y:g.y(d,v),width:g.width(d,v),height:g.height(d,v),blendMode:g.blendMode(d,v),repeat:g.repeat(d,v)};return y}))}const Ap=s=>{var e=[];return s.isAll?e=[s["border-radius"]||"0px",s["border-radius"]||"0px",s["border-radius"]||"0px",s["border-radius"]||"0px"]:e=[s["border-top-left-radius"]||"0px",s["border-top-right-radius"]||"0px",s["border-bottom-right-radius"]||"0px",s["border-bottom-left-radius"]||"0px"],e};function w6(s,e,t,r){for(var i=Ap(jc.parseStyle(t)),a=Ap(jc.parseStyle(r)),n=Math.max(i.length,a.length),o=[],l=0;lo.map(u=>u(c,h)).join(" ")}function C6(s,e,t,r){for(var i=jr.parseStyle(t),a=jr.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;ljr.join(o.map(g=>({inset:g.inset(d,v),offsetX:g.offsetX(d,v),offsetY:g.offsetY(d,v),blurRadius:g.blurRadius(d,v),spreadRadius:g.spreadRadius(d,v),color:g.color(d,v)})))}function T6(s,e,t,r){var i={};return t.radius==="closest-side"||t.radius==="farthest-side"||r.radius==="closest-side"||r.radius==="farthest-side"?i.radius=Qt(s,e,t.radius,r.radius):t.radius.unit===r.radius.unit?i.radius=ht(s,e,t.radius.value,r.radius.value,t.radius.unit):i.radius=qe(s,e,t.radius,r.radius,"width","self"),i.x=qe(s,e,t.x,r.x,"width","self"),i.y=qe(s,e,t.y,r.y,"height","self"),(a,n)=>{var o=i.radius(a,n),l=i.x(a,n),c=i.y(a,n),h=`${l} ${c}`,u=o+"";return u.includes("closest-side")?u="closest-side":u.includes("farthest-side")&&(u="farthest-side"),o?`${u} at ${h}`:`${h}`}}function k6(s,e,t,r){var i={radiusX:qe(s,e,t.radiusX,r.radiusX,"width","self"),radiusY:qe(s,e,t.radiusY,r.radiusY,"height","self"),x:qe(s,e,t.x,r.x,"width","self"),y:qe(s,e,t.y,r.y,"height","self")};return(a,n)=>{var o=i.radiusX(a,n),l=i.radiusY(a,n),c=i.x(a,n),h=i.y(a,n);return`${o} ${l} at ${c} ${h}`}}function M6(s,e,t,r){var i={top:ht(s,e,t.top.value,r.top.value,t.top.unit),left:ht(s,e,t.left.value,r.left.value,t.left.unit),right:ht(s,e,t.right.value,r.right.value,t.right.unit),bottom:ht(s,e,t.bottom.value,r.bottom.value,t.bottom.unit),round:Qt(s,e,t.round,r.round),topRadius:ht(s,e,t.topRadius.value,r.topRadius.value,t.topRadius.unit),leftRadius:ht(s,e,t.leftRadius.value,r.leftRadius.value,t.leftRadius.unit),rightRadius:ht(s,e,t.rightRadius.value,r.rightRadius.value,t.rightRadius.unit),bottomRadius:ht(s,e,t.bottomRadius.value,r.bottomRadius.value,t.bottomRadius.unit)};return(a,n)=>{var o=i.top(a,n),l=i.right(a,n),c=i.bottom(a,n),h=i.left(a,n),u=i.round(a,n),d=i.topRadius(a,n),v=i.leftRadius(a,n),g=i.bottomRadius(a,n),y=i.rightRadius(a,n),P=[o,l,c,h].join(" "),S=[d,y,g,v].join(" "),V=`${P} ${u&&S.trim()?`round ${S}`:""}`;return V}}function I6(s,e,t,r){for(var i=Math.max(t.length,r.length),a=[],n=0;na.map(u=>`${u.x(c,h)} ${u.y(c,h)}`).join(",")}function E6(s,e,t,r){var i=Pe.parseStyle(t),a=Pe.parseStyle(r),n={type:Qt(s,e,i.type,i.type),value:Qt(s,e,t,r)};if(i.type==a.type&&i!="none")switch(i.type){case"circle":i.value=Pe.parseStyleForCircle(i.value),a.value=Pe.parseStyleForCircle(a.value),n.value=T6(s,e,i.value,a.value);break;case"ellipse":i.value=Pe.parseStyleForEllipse(i.value),a.value=Pe.parseStyleForEllipse(a.value),n.value=k6(s,e,i.value,a.value);break;case"inset":i.value=Pe.parseStyleForInset(i.value),a.value=Pe.parseStyleForInset(a.value),n.value=M6(s,e,i.value,a.value);break;case"polygon":i.value=Pe.parseStyleForPolygon(i.value),a.value=Pe.parseStyleForPolygon(a.value),n.value=I6(s,e,i.value,a.value);break;case"path":i.value=Pe.parseStyleForPath(i.value),a.value=Pe.parseStyleForPath(a.value);break}return(o,l)=>{var c=n.type(o,l),h=n.value(o,l);return c==="none"?c:`${c}(${h})`}}function L6(s,e,t,r){var i={type:Ns(s,e,t.type,r.type),value:Qt(s,e,t.value,r.value)};switch(t.type){case"blur":i.value=qe(s,e,t.value,r.value);break;case"grayscale":case"invert":case"brightness":case"contrast":case"opacity":case"saturate":case"sepia":case"hue-rotate":i.value=ht(s,e,t.value.value,r.value.value,t.value.unit);break;case"drop-shadow":i.offsetX=qe(s,e,t.offsetX,r.offsetX,"width","self"),i.offsetY=qe(s,e,t.offsetY,r.offsetY,"height","self"),i.blurRadius=qe(s,e,t.blurRadius,r.blurRadius,"width","self"),i.spreadRadius=qe(s,e,t.spreadRadius,r.spreadRadius,"width","self"),i.color=_n(s,e,t.color,r.color);break}return(a,n)=>{var o=i.type(a,n);return o==="drop-shadow"?{type:i.type(a,n),offsetX:i.offsetX(a,n),offsetY:i.offsetY(a,n),blurRadius:i.blurRadius(a,n),spreadRadius:i.spreadRadius(a,n),color:i.color(a,n)}:{type:i.type(a,n),value:i.value(a,n)}}}function V6(s,e,t,r){for(var i=Bt.parseStyle(t),a=Bt.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;lBt.join(o.map(g=>g(d,v)))}function Go(s,e,t,r,i,a,n,o){var l=[{x:s,y:e},{x:t,y:r},{x:i,y:a},{x:n,y:o}];return(c,h)=>Eo(l,h)}function Dp(s,e,t,r){var i={x:ht("","",s,t),y:ht("","",e,r)};return(a,n)=>{var o={x:i.x(a,n),y:i.y(a,n)};return o}}function Ho(s,e,t,r,i,a){var n=[{x:s,y:e},{x:t,y:r},{x:i,y:a}];return(o,l)=>yu(n,l)}function O6(s){var e=[],t=[];s.forEach(a=>{switch(a.command){case"M":var[P,S]=a.values;t=[P,S];break;case"m":var[g,y]=t,[P,S]=a.values;P+=g,S+=y,t=[P,S];break;case"L":var[g,y]=t,[P,S]=a.values;e.push({command:a.command,values:[g,y,P,S],length:sr(g,y,P,S),interpolate:Dp(g,y,P,S)}),t=[P,S];break;case"l":var[g,y]=t,[P,S]=a.values;P+=g,S+=y,e.push({command:a.command,values:[g,y,P,S],length:sr(g,y,P,S),interpolate:Dp(g,y,P,S)}),t=[P,S];break;case"C":var[g,y]=t,[n,o,d,v,P,S]=a.values;e.push({command:a.command,values:[g,y,n,o,d,v,P,S],length:Qa(g,y,n,o,d,v,P,S),interpolate:Go(g,y,n,o,d,v,P,S)}),t=[P,S];break;case"c":var[g,y]=t,[n,o,d,v,P,S]=a.values;n+=g,d+=g,P+=g,o+=y,v+=y,S+=y,e.push({command:a.command,values:[g,y,n,o,d,v,P,S],length:Qa(g,y,n,o,d,v,P,S),interpolate:Go(g,y,n,o,d,v,P,S)}),t=[P,S];break;case"Q":var[g,y]=t,[n,o,P,S]=a.values;e.push({command:a.command,values:[g,y,n,o,P,S],length:da(g,y,n,o,P,S),interpolate:Ho(g,y,n,o,P,S)}),t=[P,S];break;case"q":var[g,y]=t,[n,o,P,S]=a.values;n+=g,P+=g,o+=y,S+=y,e.push({command:a.command,values:[g,y,n,o,P,S],length:da(g,y,n,o,P,S),interpolate:Ho(g,y,n,o,P,S)}),t=[P,S];break;case"S":var[g,y]=t,[d,v,P,S]=a.values,V=e[e.length-1];if(["C","c","S","s"].includes(V.command)){var[,,,,l,c,h,u]=V.values,{x:n,y:o}=W.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,d,v,P,S],length:getCubicDist(g,y,n,o,d,v,P,S),interpolate:Go(g,y,n,o,d,v,P,S)}),t=[P,S];break}case"s":var[g,y]=t,[d,v,P,S]=a.values;d+=g,P+=g,v+=y,S+=y;var V=e[e.length-1];if(["C","c","S","s"].includes(V.command)){var[,,,,l,c,h,u]=V.values,{x:n,y:o}=W.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,d,v,P,S],length:getCubicDist(g,y,n,o,d,v,P,S),interpolate:Go(g,y,n,o,d,v,P,S)}),t=[P,S];break}case"T":var[g,y]=t,[P,S]=a.values,V=e[e.length-1];if(["Q","q","T","t"].includes(V.command)){var[,,l,c,h,u]=V.values,{x:n,y:o}=W.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,P,S],length:da(g,y,n,o,P,S),interpolate:Ho(g,y,n,o,P,S)}),t=[P,S]}break;case"t":var[g,y]=t,[P,S]=a.values;P+=g,S+=y;var V=e[e.length-1];if(["Q","q","T","t"].includes(V.command)){var[,,l,c,h,u]=V.values,{x:n,y:o}=W.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,P,S],length:da(g,y,n,o,P,S),interpolate:Ho(g,y,n,o,P,S)}),t=[P,S]}break}});var r=0;e.forEach(a=>{r+=a.length});var i=0;return e.forEach(a=>{a.startT=i/r,a.endT=(i+a.length)/r,a.totalLength=r,i+=a.length}),{totalLength:r,interpolateList:e}}function R6(s,e,t,r,i){var[a,n,o,l]=t.split(",").map(y=>y.trim()),c={id:a,distance:p.parse(n||"0%"),rotateStatus:o||"auto",rotate:p.parse(l||"0deg")},h=()=>({}),u=(y,P)=>{var S=0;switch(y){case"angle":S=c.rotate.value;break;case"auto angle":S=P+c.rotate.value;break;case"reverse":S=P+180;break;case"auto":S=P;break}return S},d=0,v=0;if(i){var g=i.searchById(c.id);g&&(d=g.screenX.value,v=g.screenY.value),h=(y,P,S)=>{var V=new K(g.d||""),{totalLength:E,interpolateList:I}=O6(V.segments),O=c.distance.toPx(E),B=O/E;P=P+B,P>1&&(P-=1);var U=I[0];P===0?U=I[0]:P===1&&(U=I[I.length-1]);var X=I.find(ye=>ye.startT<=P&&P{var V=(s.transformOrigin||"50% 50% 0px").split(" ").map(ve=>p.parse(ve)),E=V[0].toPx(s.width),I=V[1].toPx(s.height),O=h(y,P,S),B={x:O.x+d-E.value,y:O.y+v-I.value};if(s.setScreenX(B.x),s.setScreenY(B.y),c.rotateStatus!=="element"){var U=O,X=0;P<1&&(X=1/O.totalLength);var ce=h(y+X,P+X,S),he=oa(ce.x-U.x,ce.y-U.y),ye=p.deg(u(c.rotateStatus,he));s.reset({transform:ct.rotate(s.transform,ye)})}return B}}function j6(s,e,t,r){for(var i=t.split(" ").map(u=>p.parse(u)),a=r.split(" ").map(u=>p.parse(u)),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function z6(s,e,t,r,i,a){const n=a.$("video").el;let[o,,l]=t.split(":");const c=+(l||1),h=+(o||0)*c;return(u,d)=>{d===0?(n.currentTime=h,n.paused&&n.play()):d===1?(s.reset({currentTime:n.currentTime}),n.pause()):n.paused&&n.play()}}function Hc(s,e,t,r){var i=p.parse(t),a=p.parse(r);return(n,o)=>{var l=i.value,c=a.value;return o===0?p.deg(l):o===1?p.deg(c):p.deg(l+(c-l)*n).to(i.unit)}}function A6(s,e,t,r){for(var i=t.split(" ").map(u=>+u),a=r.split(" ").map(u=>+u),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function D6(s,e,t,r){var i=r.length-1,a=0;return(n,o)=>{var l=0;return o===0?l="":o===1?l=r:l=r.substring(a,Math.floor((i-a)*o)),l}}function F6(s,e,t,r){for(var i=zr.parseStyle(t),a=zr.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;lzr.join(o.map(g=>({offsetX:g.offsetX(d,v),offsetY:g.offsetY(d,v),blurRadius:g.blurRadius(d,v),color:g.color(d,v)})))}function B6(s,e,t,r){for(var i={type:Qt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o({type:i.type(h,u),value:i.value.map(d=>d(h,u))})}function N6(s,e,t,r){for(var i={type:Qt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o{var g=i.value.map(P=>P(d,v)),y=i.type(d,v);return(y.includes("matrix")||y.includes("scale"))&&(g=g.map(P=>p.number(P))),{type:y,value:g}}}function G6(s,e,t,r){for(var i={type:Qt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o{var d={type:i.type(h,u),value:i.value.map(v=>v(h,u))};return d}}function H6(s,e,t,r){for(var i=ct.parseStyle(t.trim()),a=ct.parseStyle(r.trim()),n=Math.max(i.length,a.length),o=[],l=0;l{var v=ct.join(o.map(g=>g(u,d)));return v}}function U6(s,e,t,r){for(var i=t.split(" ").map(u=>p.parse(u)),a=r.split(" ").map(u=>p.parse(u)),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function W6(s,e,t,r){for(var i=Math.max(t.length,r.length),a=[],n=t[t.length-1],o=r[r.length-1],l=0;la.map(v=>v(u,d))}function X6(s,e,t,r){for(var i=new K,a=new K(t),n=new K(r),o=Math.max(a.segments.length,n.segments.length),l=[],c=0;c{var g=l.map(P=>({command:P.command(d,v),values:P.values(d,v)})),y=i.joinPath(g);return y}}function Y6(s,e,t,r){for(var i=new rs,a=new rs(t),n=new rs(r),o=Math.max(a.segments.length,n.segments.length),l=[],c=a.segments[a.segments.length-1].x,h=a.segments[a.segments.length-1].y,u=n.segments[n.segments.length-1].x,d=n.segments[n.segments.length-1].y,v=0;v{var V=i.joinPoints(l.map(E=>({x:E.x(P,S),y:E.y(P,S)})));return V}}const K6=()=>()=>{};function Z6(s){switch(s){case"border-radius":return w6;case"box-shadow":return C6;case"text-shadow":return F6;case"background-image":case"BackgroundImageEditor":return P6;case"filter":case"backdrop-filter":return V6;case"clip-path":return E6;case"transform":return H6;case"transform-origin":return U6;case"perspective-origin":return j6;case"stroke-dasharray":return A6;case"d":return X6;case"points":return Y6;case"offset-path":return R6;case"text":return D6;case"playTime":return z6}}function q6(s,e,t,r,i,a,n){var o=i||e;switch(o){case"width":case"x":return qe(s,e,t,r,"width");case"height":case"y":return qe(s,e,t,r,"height");case"perspective":case"font-size":case"font-weight":case"text-stroke-width":case"RangeEditor":case"textLength":case"startOffset":return qe(s,e,t,r,e);case"fill-opacity":case"opacity":case"stroke-dashoffset":case"currentTime":case"NumberRangeEditor":return ht(s,e,+t,+r);case"background-color":case"color":case"text-fill-color":case"text-stroke-color":case"fill":case"stroke":case"ColorViewEditor":return _n(s,e,t,r);case"mix-blend-mode":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"SelectEditor":case"lengthAdjust":return Ns(s,e,t,r);case"rotate":return Hc(s,e,t,r)}var l=Z6(o);return l?l(s,e,t,r,a,n):K6}function Q6(s,e,t,r,i,a,n){return q6(s,e,t,r,i,a,n)}class J6 extends Tp{getDefaultObject(e={}){return super.getDefaultObject(b({comments:[],colors:[],gradients:[],svgfilters:[],svgimages:[],keyframes:[],images:[],imageKeys:[],videos:[],videoKeys:[],audios:[]},e))}get comments(){return this.get("comments")}get colors(){return this.get("colors")}get gradients(){return this.get("gradients")}get svgfilters(){return this.get("svgfilters")}get svgimages(){return this.get("svgimages")}get keyframes(){return this.get("keyframes")}get videos(){return this.get("videos")}get images(){return this.get("images")}set images(e){this.set("images",e)}get imageKeys(){return this.get("imageKeys")}get videoKeys(){return this.get("videoKeys")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new xn(b({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,r){e.splice(r+(tt.toString(e)).join(` + +`)}copyPropertyList(e,t){var r=b({},e[t]);e.splice(t,0,r)}removePropertyList(e,t){e.splice(t,1)}removeColor(e){this.removePropertyList(this.colors,e)}copyColor(e){this.copyPropertyList(this.colors,e)}sortColor(e,t){this.sortItem(this.colors,e,t)}setColorValue(e,t={}){this.colors[e]=b(b({},this.colors[e]),t)}getColorIndex(e){return this.colors[e]}getColor(e){return this.colors.filter(t=>t.name===e)[0]}addColor(e){return this.colors.push(e),e}createColor(e={}){return this.addColor(e)}removeImage(e){this.removePropertyList(this.images,e),this.refreshImageKeys()}copyImage(e){this.copyPropertyList(this.images,e),this.refreshImageKeys()}sortImage(e,t){this.sortItem(this.images,e,t)}setImageValue(e,t={}){this.images[e]=b(b({},this.images[e]),t),this.refreshImageKeys()}getImageValueById(e,t=""){const r=this.imageKeys[e];return r?r.local:e||t}getImageDataURIById(e){const t=this.imageKeys[e];if(!!t)return t.original}refreshImageKeys(){let e={};this.images.forEach(t=>{e[t.id]=t}),this.reset({imageKeys:e})}addImage(e){return this.images.push(e),this.refreshImageKeys(),e}createImage(e={}){return this.addImage(e)}removeVideo(e){this.removePropertyList(this.videos,e),this.refreshVideoKeys()}copyVideo(e){this.copyPropertyList(this.videos,e),this.refreshVideoKeys()}sortVideo(e,t){this.sortItem(this.videos,e,t)}setVideoValue(e,t={}){this.videos[e]=b(b({},this.videos[e]),t)}getVideoValueById(e){const t=this.videoKeys[e];if(!!t)return t.local}refreshVideoKeys(){let e={};this.videos.forEach(t=>{e[t.id]=t}),this.reset({videoKeys:e})}addVideo(e){return this.videos.push(e),this.refreshVideoKeys(),e}createVideo(e={}){return this.addVideo(e)}removeGradient(e){this.removePropertyList(this.gradients,e)}copyGradient(e){this.copyPropertyList(this.gradients,e)}sortGradient(e,t){this.sortItem(this.gradients,e,t)}setGradientValue(e,t){this.gradients[e]=b(b({},this.gradients[e]),t)}getGradientIndex(e){return this.gradients[e]}getGradient(e){return this.gradients.filter(t=>t.name===e)[0]}addGradient(e={}){return this.gradients.push(e),e}createGradient(e={}){return this.addGradient(e)}getSVGFilterIndex(e){var r;var t=this.svgfilters.map((i,a)=>({id:i.id,index:a})).filter(i=>i.id===e);return t.length?(r=t==null?void 0:t[0])==null?void 0:r.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=b(b({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(e)}getSVGImageIndex(e){var t=this.svgimages.map((r,i)=>({id:r.id,index:i})).filter(r=>r.id===e)[0];return t?t.index:-1}removeSVGImage(e){this.removePropertyList(this.svgimages,e)}copySVGImage(e){this.copyPropertyList(this.svgimages,e)}sortSVGImage(e,t){this.sortItem(this.svgimages,e,t)}setSVGImageValue(e,t){this.svgimages[e]=b(b({},this.svgimages[e]),t)}addSVGImage(e={}){this.svgimages.push(e);var t=this.svgimages.length-1;return t}createSVGImage(e={}){return this.addSVGImage(e)}}class e8 extends J6{constructor(){super(...arguments);Pt(this,Zs,[])}getDefaultObject(t={}){return super.getDefaultObject(b({timeline:[],compiledTimeline:{}},t))}get timeline(){return this.get("timeline")}set timeline(t){this.set("timeline",t)}expectJSON(t){return t==="compiledTimeline"?!1:super.expectJSON(t)}setTimelineInfo(t){var r=this.getSelectedTimeline();!r||["speed","iterationCount","direction"].forEach(i=>{ke(t[i])&&(r[i]=t[i])})}compileAll(){var t=this.getSelectedTimeline();wt(this,Zs,{}),t&&t.animations.forEach(r=>{r.properties.forEach(i=>{this.compiledTimingFunction(r.id,i.property)})})}searchTimelineOffset(t){var r=this.getSelectedTimeline(),i=[];return r&&r.animations.forEach(a=>{a.properties.forEach(n=>{var o=this.getCompiledTimingFunction(a.id,n.property);i.push(o.find(l=>l.isOnlyTime&&l.startTime<=t?!0:l.startTime<=t&&ta)}getCompiledTimingFunction(t,r){return Te(this,Zs)[`${t}.${r}`]}compiledTimingFunction(t,r){var i=this,a=this.getTimelineProperty(t,r),n=this.modelManager.get(t),o=`${t}.${r}`;if(a.keyframes.length===1){Te(this,Zs)[o]=[];return}let l=ge.body().$(`[data-id="${t}"]`),c=a.keyframes.map(h=>h.editor)[0];Te(this,Zs)[o]=a.keyframes.map((h,u)=>{var d=h,v=a.keyframes[u+1];h.editor=c,v||(v={time:h.time,value:h.value});var g={layer:n,layerElement:l,property:a.property,isOnlyTime:d.time===v.time,startTime:h.time,endTime:v.time,startValue:h.value,endValue:v.value,timing:h.timing,interpolateFunction:Q6(n,a.property,h.value,v.value,h.editor,i,l),timingFunction:Tc(h.timing)};return g.func=this.makeTimingFunction(g),g}).filter(h=>h)}makeTimingFunction(t){return r=>{var i=t.endTime-t.startTime,a=1;return i!==0&&(a=(r-t.startTime)/i),t.interpolateFunction(t.timingFunction(a),a,i,t.timingFunction)}}stop(){var t=this.getSelectedTimeline();if(t){var r=t.currentTime;this.searchTimelineOffset(r).forEach(i=>{if(i.property==="playTime"){const a=i.layerElement.$("video");a&&a.el.pause()}})}}seek(t,r=i=>i){var i=this.getSelectedTimeline();if(i){ke(t)&&this.setTimelineCurrentTime(t);var a=i.currentTime;this.searchTimelineOffset(a).filter(r).forEach(n=>{n.property==="offset-path"||n.property==="playTime"?n.func(a):n.layer&&n.layer.reset({[n.property]:n.func(a)})})}}getSelectedTimeline(){var t=this.timeline,r=t.filter(a=>a.selected),i=r.length?r[0]:t[0];return i||null}getKeyframeListReturnArray(){var t=this.getSelectedTimeline(),r=[];return t&&t.animations.forEach(i=>{i.properties.forEach(a=>{r.push.apply(r,a.keyframes)})}),r}getKeyframeList(t){var r=this.getSelectedTimeline();r&&r.animations.forEach(i=>{i.properties.forEach(a=>{a.keyframes.forEach(n=>{t&&t(r,n)})})})}getSelectedTimelineLastTime(){var t=0;return this.getKeyframeList((r,i)=>{t=Math.max(i.time,t)}),t}getSelectedTimelineFirstTime(){var t=Number.MAX_SAFE_INTEGER;return this.getKeyframeList((r,i)=>{t=Math.min(i.time,t)}),t}getSelectedTimelinePrevTime(){var t=this.getSelectedTimelineFirstTime();return this.getKeyframeList((r,i)=>{cr(r.fps,i.time){cr(r.fps,i.time)>r.currentTimecode&&(t=Math.min(i.time,t))}),t}setTimelineTitle(t,r){var i=this.timeline.find(a=>a.id===t);i&&(i.title=r)}selectTimeline(t){if(t)this.timeline.forEach(i=>{i.selected=i.id===t});else{var r=this.timeline.filter(i=>i.selected);r.length||this.timeline.length&&(this.timeline.selected=!0)}this.compileAll()}removeAnimation(t){this.timeline=this.timeline.filter(r=>r.id!==t),this.timeline.length&&(this.timeline[0].selected=!0),this.compileAll()}addTimeline(t=60,r="00:00:10:00"){var i=fr(),a=se(b({id:i,title:"sample"},this.getTimelineLayerInfo(t,r)),{animations:[]});return this.timeline.push(a),this.selectTimeline(i),a}addTimelineLayer(t,r=60,i="00:00:10:00"){var a=this.getSelectedTimeline();if(a||(a=this.addTimeline(r,i)),a.selected=!0,t){var n=a.animations.filter(o=>o.id===t);n[0]||a.animations.push({id:t,properties:[]})}}getTimelineLayerInfo(t=60,r="00:00:10:00"){var i=As(t,r);return{fps:t,speed:1,direction:"normal",iterationCount:1,currentTimecode:cr(t,0),totalTimecode:cr(t,i),currentTime:0,totalTime:i,displayStartTime:0,displayEndTime:i}}setTimelineCurrentTime(t){var r=this.getSelectedTimeline(),{fps:i,totalTimecode:a}=r;if(r){var n=t,o=t;+n+""===n&&(n=+n,o=_p(i,n)),o>a&&(o=a);var l=As(i,o);r.currentTime=l,r.currentTimecode=cr(i,l)}}setDisplayTimeDxRate(t,r,i){var a=this.getSelectedTimeline();if(a){var n=t*a.totalTime,o=r+n,l=i+n;o=Math.max(o,0),o=Math.min(o,l),o===0&&(l=i-r),l=Math.max(l,o),l=Math.min(l,a.totalTime),l===a.totalTime&&(o=a.totalTime-(i-r)),a.displayStartTime=o,a.displayEndTime=l}}setDisplayStartTimeRate(t){var r=this.getSelectedTimeline();r&&(r.displayStartTime=t*r.totalTime)}setDisplayEndTimeRate(t){var r=this.getSelectedTimeline();r&&(r.displayEndTime=t*r.totalTime)}setTimelineCurrentTimeRate(t){var r=this.getSelectedTimeline();if(r){var{displayStartTime:i,displayEndTime:a,fps:n}=r,o=i+(a-i)*t;this.setTimelineCurrentTime(cr(n,o))}}setTimelineTotalTime(t){var r=this.getSelectedTimeline();if(r){var i=t,a=t;+i+""===i&&(i=+i,a=_p(r.fps,i)),As(r.fps,a)i.id===t)}addTimelineProperty(t,r){this.addTimelineLayer(t);var i=this.getTimelineObject(t);if(i){var a=i.properties.filter(n=>n.property===r);a.length||(i.properties.push({property:r,keyframes:[]}),this.compiledTimingFunction(t,r))}}getTimelineProperty(t,r){var i=this.getSelectedTimeline();if(i){t=t||i.selectedLayerId,r=r||i.selectedProperty;var a=this.getTimelineObject(t);if(a)return a.properties.find(n=>n.property===r)}}setSelectedOffset(t,r,i){var a=this.getSelectedTimeline();if(a){a.selectedLayerId=t,a.selectedProperty=r,a.selectedOffsetTime=i;var n=this.getTimelineProperty();n.keyframes.forEach(o=>{o.selected=o.time===i})}}deleteTimelineKeyframe(t,r,i){var a=this.getTimelineProperty(t,r);a&&(a.keyframes=a.keyframes.filter(n=>n.id!=i))}removeTimelineProperty(t,r){var i=this.getTimelineObject(t);i&&(i.properties=i.properties.filter(a=>a.property!=r))}removeTimeline(t){var r=this.getSelectedTimeline();r&&(r.animations=r.animations.filter(i=>i.id!=t))}setTimelineKeyframeOffsetTime(t,r,i,a){var n=this.getTimelineKeyframeById(t,r,i);n&&(n.time=a,this.compiledTimingFunction(t,r))}setTimelineKeyframeOffsetValue(t,r,i,a=void 0,n=void 0,o=void 0){var l=this.getTimelineKeyframeById(t,r,i);l&&(ke(o)&&(l.time=o),ke(a)&&(l.value=a),ke(n)&&(l.timing=n),this.compiledTimingFunction(t,r))}addTimelineKeyframe({layerId:t,property:r,value:i,timing:a,time:n,editor:o}){this.addTimelineProperty(t,r);var l=this.getSelectedTimeline(),c=this.getTimelineProperty(t,r);if(c){var h=n||l.currentTime,u=c.keyframes.filter(v=>v.time===h);if(!u.length){i=Ct(i)||i===""?this.getDefaultPropertyValue(r):i;var d={id:fr(),layerId:t,property:r,time:h,value:i,timing:a||"linear",editor:o};return c.keyframes.push(d),c.keyframes.sort((v,g)=>v.time>g.time?1:-1),this.compiledTimingFunction(t,r),d}}}getDefaultPropertyValue(t){switch(t){case"mix-blend-mode":return"normal";case"rotate":return"0deg";case"box-shadow":return"0px 0px 0px 0px rgba(0, 0, 0, 1)";case"text-shadow":return"0px 0px 0px rgba(0, 0, 0, 1)";case"opacity":return 1;default:return""}}copyTimelineKeyframe(t,r,i=null){var a=this.getTimelineProperty(t,r);if(a){var n=this.getSelectedTimeline(),o=i||n.currentTime,l=a.keyframes.filter(d=>d.timed.time>v.time?-1:1),c=l[0].value+"",h=l[0].timing+"",u=l[0].editor),this.addTimelineKeyframe({layerId:t,property:r,value:c,timing:h,editor:u})}}getTimelineKeyframe(t,r,i){var a=this.getTimelineProperty(t,r);if(a)return a.keyframes.find(n=>n.time===i)}getTimelineKeyframeById(t,r,i){var a=this.getTimelineProperty(t,r);if(a)return a.keyframes.find(n=>n.id===i)}sortTimelineKeyframe(t,r){var i=this.getTimelineProperty(t,r);i&&(i.keyframes.sort((a,n)=>a.time>n.time?1:-1),this.compiledTimingFunction(t,r))}setFps(t){var r=this.getSelectedTimeline();r&&(r.fps=t,r.currentTimecode=cr(t,r.currentTime),r.totalTimecode=cr(t,r.totalTime))}}Zs=new WeakMap;const Fp=Vt();class t8 extends e8{getDefaultTitle(){return"New Project"}get isAbsolute(){return!1}get parent(){return null}get nestedAngle(){return 0}toRootVariableCSS(){var e={};return this.rootVariable.split(";").filter(t=>t.trim()).forEach(t=>{var[r,i]=t.split(":");e[`--${r}`]=i}),e}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"project",name:"new Project",description:"",rootVariable:""},e))}get description(){return this.get("description")}set description(e){this.set("description",e)}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.set("rootVariable",e)}get artboards(){return(this.layers||[]).filter(e=>e.is("artboard"))}get offsetX(){return 0}get offsetY(){return 0}get screenWidth(){return 0}get screenHeight(){return 0}isLayoutItem(){return!1}hasLayout(){return!1}getAbsoluteMatrix(){return Vt()}getTransformMatrix(){return Vt()}resetMatrix(e){const[t,r]=Ni([],ar(e.absoluteMatrix,e.localMatrixInverse));e.reset({x:t,y:r})}get rectVerties(){var e;return(e=this.layers)!=null&&e.length?qa(this.layers):null}get absoluteMatrix(){return Fp}get absoluteMatrixInverse(){return Fp}get contentBox(){return{left:0,top:0,width:0,height:0}}}class r8 extends ss{getIcon(){return oe.rect}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"rect",name:"New Rect"},e))}getDefaultTitle(){return"Rect"}}var Bp=function(s){if(!s||!s.dtype)return!1;var e=new RegExp("function View[0-9]+d(:?"+s.dtype+")+");return e.test(String(s.constructor))},Uc=function(s){return s?s.data!==void 0&&Array.isArray(s.shape)&&s.offset!==void 0&&s.stride!==void 0:!1},Sn=function(e){return Array.isArray(e)||ArrayBuffer.isView(e)},i8=Bp,s8=Uc,a8=Sn;function ns(s){if(!!s){if(i8(s)||s8(s))return s.dtype==="generic"?ns.GENERIC_NDARRAY:ns.NDARRAY;if(a8(s))return ns.ARRAY_OF_ARRAYS;throw new Error("Unhandled data type. Got type: "+typeof s)}}ns.ARRAY_OF_ARRAYS="Arr",ns.NDARRAY="Nd",ns.GENERIC_NDARRAY="GenNd",ns.PACKED="PackArr";var Pn=ns,Np=Sn;function n8(s){return s[0].toUpperCase()+s.slice(1)}var o8=function(s,e,t,r,i,a){var n,o=[],l=!1;for(n=0;n=0;i--)if(a[i]===(Array.isArray(e[i])?e[i][1]:e[i])-1)a[i]=Array.isArray(e[i])?e[i][0]:0;else{a[i]++;break}},Yc=Pn,Kc=function(s,e,t,r){var i,a=[];switch(Yc(r)){case Yc.NDARRAY:for(a.push(" var "+e+" = "+t+".data;"),a.push(" var "+e+"Offset = "+t+".offset;"),i=0;i1)throw new Error("Analytical derivative not implemented for rational b-splines with order n = "+O+".")}a&&(s="Basis"+s),n&&(s="Der"+n.join("_")+"_"+s);var B=Wp[s];if(r)var U=typeof r=="function"?r:console.log;if(B)return r&&U(Xp[s]),B.bind(e);var X=[],ce="evaluate"+s,he=t.point;a&&(he=function(w,L){for(var H=[],pe=0;pe "+yt+"[i][1] || a === undefined || isNaN(a)) {"),ie(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+yt+"[i][0]+', '+"+yt+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),ie(" }"),ie("}")),d=0;d "+ze(d)+" + 1) {"),ie(" m = 0.5 * (h + "+ze(d)+") | 0;"),ie(" if ("+ve([d,"m"])+" > "+De(d)+") h = m;"),ie(" else "+ze(d)+" = m;"),ie("}"),ut(` + // Fetch knots for dimension `+d+` +`),l=-y[d]+1;l<=y[d];l++)I[d]==="closed"?l<0?ie("var "+Re([d,l+y[d]-1])+" = "+Ii(ze(d)+" < "+-l,ve([d,0])+" + "+ve([d,[je(d),ze(d),l]])+" - "+ve([d,[je(d)]]),ve([d,[ze(d),l]]))+";"):l>0?ie("var "+Re([d,l+y[d]-1])+" = "+Ii(ze(d)+" + "+l+" > "+je(d),ve([d,je(d)])+" + "+ve([d,l+" + "+ze(d)+" - "+je(d)])+" - "+ve([d,0]),ve([d,[ze(d),l]]))+";"):ie("var "+Re([d,l+y[d]-1])+" = "+ve([d,[ze(d),l]])+";"):ie("var "+Re([d,l+y[d]-1])+" = "+ve([d,[ze(d),l]])+";");else{for(ut(` + // Directly compute knot interval for dimension `+d+` +`),I[d]==="closed"?ie(ze(d)+" = ("+De(d)+" | 0) % "+je(d)+";"):(ie(ze(d)+" = ("+De(d)+" | 0);"),ie("if ("+ze(d)+" < "+y[d]+") "+ze(d)+" = "+y[d]+";"),ie("if ("+ze(d)+" > "+je(d)+" - 1) "+ze(d)+" = "+je(d)+" - 1;")),ut(` + // Compute and clamp knots for dimension `+d+` +`),l=-y[d]+1;l<=y[d];l++)v=Re([d,l+y[d]-1]),ie("var "+v+" = "+ze(d)+" + "+l+";");if(I[d]==="clamped")for(l=-y[d]+1;l<=y[d];l++)v=Re([d,l+y[d]-1]),l<0&&ie("if ("+v+" < "+y[d]+") "+v+" = "+y[d]+";"),l>0&&ie("if ("+v+" > "+je(d)+") "+v+" = "+je(d)+";");I[d]==="closed"&&(ut(` + // Wrap the B-Spline parameter for closed boundary`),ie(De(d)+" %= "+je(d)+";"))}for(d=0,h=[];d=0;u--)for(h[u]=[g[u],g[u]+1],l=0;ll;c--){var xt=a&&g[u]-l-a[u]<=0;xt?(J("m = 1 / ("+oe([u,c-l+g[u]-1])+" - "+oe([u,c-1])+");"),v&&(J("a = ("+te(u)+" - "+oe([u,c-1])+") * m;"),J("b = 1 - a;"))):(J("a = ("+te(u)+" - "+oe([u,c-1])+") / ("+oe([u,c-l+g[u]-1])+" - "+oe([u,c-1])+");"),J("b = 1 - a;")),v&&wu(h,function(k){var L=k.slice(),X=k.slice();L[u]=c,X[u]=c-1,xt&&v&&J("h = "+Q(L)+";"),J(Q(L)+" = b * "+Q(X)+" + a * "+Q(L)+";")}),wu(h,function(k){var L,X,ae,Pe=k.slice(),Ee=k.slice();if(Pe[u]=c,Ee[u]=c-1,xt){var yt=l+1;if(s)L=v?"h * "+Q(Ee)+" / "+Q(Pe)+" * ":"",X=B(Pe)+(v?" / h":""),ae=B(Ee)+(v?" / "+Q(Ee):""),J(B(Pe)+" = "+yt+" * "+L+"("+X+" - "+ae+") * m;");else{var ct=Pe.slice(),ut=Ee.slice();for(d=0;d<_;d++)ct[o]=ut[o]=d,L=v?"h * "+Q(Ee)+" / "+Q(Pe)+" * ":"",X=B(ct)+(v?" / h":""),ae=B(ut)+(v?" / "+Q(Ee):""),J(B(ct)+" = "+yt+" * "+L+"("+X+" - "+ae+") * m;")}}else if(s)J(B(Pe)+" = b * "+B(Ee)+" + a * "+B(Pe)+";");else for(d=0;d<_;d++)Pe[o]=Ee[o]=d,J(B(Pe)+" = b * "+B(Ee)+" + a * "+B(Pe)+";")}),Re(` -`)}if(i&&J(v?` +`),Wo(h,function(w){for(var L=[],H=[],pe=0;pe=0;d--)for(h[d]=[y[d],y[d]+1],l=0;ll;c--){var xr=n&&y[d]-l-n[d]<=0;xr?(ie("m = 1 / ("+Re([d,c-l+y[d]-1])+" - "+Re([d,c-1])+");"),S&&(ie("a = ("+De(d)+" - "+Re([d,c-1])+") * m;"),ie("b = 1 - a;"))):(ie("a = ("+De(d)+" - "+Re([d,c-1])+") / ("+Re([d,c-l+y[d]-1])+" - "+Re([d,c-1])+");"),ie("b = 1 - a;")),S&&Wo(h,function(w){var L=w.slice(),H=w.slice();L[d]=c,H[d]=c-1,xr&&S&&ie("h = "+He(L)+";"),ie(He(L)+" = b * "+He(H)+" + a * "+He(L)+";")}),Wo(h,function(w){var L,H,pe,Qe=w.slice(),At=w.slice();if(Qe[d]=c,At[d]=c-1,xr){var Cr=l+1;if(a)L=S?"h * "+He(At)+" / "+He(Qe)+" * ":"",H=Q(Qe)+(S?" / h":""),pe=Q(At)+(S?" / "+He(At):""),ie(Q(Qe)+" = "+Cr+" * "+L+"("+H+" - "+pe+") * m;");else{var ui=Qe.slice(),Ta=At.slice();for(u=0;u= 0; "+o+"--) {");for(s=0;s=0;s--)f.push("}");f.push("return this;"),f.push("}");var v=new Function([f.join(` -`),"; return ",g].join(""))();return r&&console.log(f.join(` -`)),fb[e]=v,v.bind(t)},F7=db,Xg=Su,N7=jg,Yg=Mh,Kg=wh,B7=Gg,gb={},j7=function(n,e,t,i,r){var s=gb[n];if(s)return s.bind(e);var a=e.degree,o=e.knots,l=e.splineDimension,c=e.boundary,h,d,u,p=[],f="support"+n,g=t.knot,m=Xg("t"),v=i?"domain":"d",b=Xg(i?"size":"s"),_=Xg(i?"knotIndex":"i"),x=!0;for(u=0;u "+v+"[i][1] || a === undefined || isNaN(a)) {"),S(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+v+"[i][0]+', '+"+v+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),S(" }"),S("}")),u=0;u "+_(u)+" + 1) {"),S(" m = 0.5 * (h + "+_(u)+") | 0;"),S(" if ("+g([u,"m"])+" > "+m(u)+") h = m;"),S(" else "+_(u)+" = m;"),S("}")):c[u]==="closed"?S(_(u)+" = ("+m(u)+" | 0) % "+b(u)+";"):(S(_(u)+" = ("+m(u)+" | 0);"),S("if ("+_(u)+" < "+a[u]+") "+_(u)+" = "+a[u]+";"),S("if ("+_(u)+" > "+b(u)+" - 1) "+_(u)+" = "+b(u)+" - 1;"));for(u=0,d=[];u0&&!Ta(this.knots[0])&&(this.knots=[this.knots]),a=0;a= 0; "+o+"--) {");for(a=0;a=0;a--)g.push("}");g.push("return this;"),g.push("}");var S=new Function([g.join(` +`),"; return ",y].join(""))();return i&&console.log(g.join(` +`)),Yp[e]=S,S.bind(t)},y8=Up,eh=Uo,b8=Kc,th=Pn,rh=Sn,x8=Zc,Kp={},$8=function(s,e,t,r,i){var a=Kp[s];if(a)return a.bind(e);var n=e.degree,o=e.knots,l=e.splineDimension,c=e.boundary,h,u,d,v=[],g="support"+s,y=t.knot,P=eh("t"),S=r?"domain":"d",V=eh(r?"size":"s"),E=eh(r?"knotIndex":"i"),I=!0;for(d=0;d "+S+"[i][1] || a === undefined || isNaN(a)) {"),O(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+S+"[i][0]+', '+"+S+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),O(" }"),O("}")),d=0;d "+E(d)+" + 1) {"),O(" m = 0.5 * (h + "+E(d)+") | 0;"),O(" if ("+y([d,"m"])+" > "+P(d)+") h = m;"),O(" else "+E(d)+" = m;"),O("}")):c[d]==="closed"?O(E(d)+" = ("+P(d)+" | 0) % "+V(d)+";"):(O(E(d)+" = ("+P(d)+" | 0);"),O("if ("+E(d)+" < "+n[d]+") "+E(d)+" = "+n[d]+";"),O("if ("+E(d)+" > "+V(d)+" - 1) "+E(d)+" = "+V(d)+" - 1;"));for(d=0,u=[];d0&&!ls(this.knots[0])&&(this.knots=[this.knots]),n=0;n -`;class sG extends Pu{getIcon(){return We.auto_awesome}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"template",name:"New Template",engine:"dom",template:nG,params:[]},e))}get template(){return this.get("template")}set template(e){this.set("template",e)}get params(){return this.get("params")}set params(e){this.set("params",e)}get engine(){return this.get("engine")}set engine(e){this.set("engine",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Template"}editable(e){switch(e){case"font":return!0}return super.editable(e)}}class aG extends wa{getIcon(){return We.title}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"text",name:"New Text",elementType:"p",content:""},e))}get content(){return this.get("content")}set content(e){this.set("content",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Text"}editable(e){switch(e){case"svg-item":case"transform":case"transformOrigin":case"perspective":case"perspectiveOrigin":case"layout":return!1;case"font":case"fontSpacing":case"textStyle":case"textShadow":case"textFill":case"textClip":case"backgroundImage":case"box-model":case"border":case"borderRadius":case"backdropFilter":case"pattern":return!0}return super.editable(e)}}function vb(n){n.registerItem("project",S7),n.registerItem("artboard",Lj),n.registerItem("rect",w7),n.registerItem("circle",zj),n.registerItem("image",Vj),n.registerItem("text",aG),n.registerItem("boolean-path",Oj),n.registerItem("svg-path",Q1),n.registerItem("svg-text",iG),n.registerItem("svg-textpath",rG),n.registerItem("template",sG),n.registerItem("polygon",Dj),n.registerItem("star",tG),n.registerItem("spline",eG)}var oG=` +`;class A8 extends Ko{getIcon(){return oe.auto_awesome}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"template",name:"New Template",engine:"dom",template:z8,params:[]},e))}get template(){return this.get("template")}set template(e){this.set("template",e)}get params(){return this.get("params")}set params(e){this.set("params",e)}get engine(){return this.get("engine")}set engine(e){this.set("engine",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Template"}editable(e){switch(e){case"font":return!0}return super.editable(e)}}class D8 extends ss{getIcon(){return oe.title}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"text",name:"New Text",elementType:"p",content:""},e))}get content(){return this.get("content")}set content(e){this.set("content",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Text"}editable(e){switch(e){case"svg-item":case"transform":case"transformOrigin":case"perspective":case"perspectiveOrigin":case"layout":return!1;case"font":case"fontSpacing":case"textStyle":case"textShadow":case"textFill":case"textClip":case"backgroundImage":case"box-model":case"border":case"borderRadius":case"backdropFilter":case"pattern":return!0}return super.editable(e)}}function F8(s){s.registerItem("project",t8),s.registerItem("artboard",h6),s.registerItem("rect",r8),s.registerItem("circle",f6),s.registerItem("image",m6),s.registerItem("text",D8),s.registerItem("boolean-path",g6),s.registerItem("svg-path",Vp),s.registerItem("svg-text",R8),s.registerItem("svg-textpath",j8),s.registerItem("template",A8),s.registerItem("polygon",v6),s.registerItem("star",O8),s.registerItem("spline",V8)}var B8=` -`,are="";const yb=[{itemType:"circle",name:"base",attrs:{backgroundColor:"#ececec"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"black"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"red"}},{itemType:"circle",name:"base",attrs:{backgroundImage:` +`,JD="";const qp=[{itemType:"circle",name:"base",attrs:{backgroundColor:"#ececec"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"black"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"red"}},{itemType:"circle",name:"base",attrs:{backgroundImage:` background-image: linear-gradient(to right, #ececec, black 100%); `}},{itemType:"circle",name:"base",attrs:{backgroundImage:` background-image: linear-gradient(to right, #ececec, black 100%); `,border:` border:10px solid black; - `}}];class lG extends ge{template(){return` + `}}];class N8 extends Y{template(){return`
      - `}[ve("$css-list")](){return yb.map((e,t)=>{const i=this.$editor.renderer("svg").render(this.$model.createModel(P({itemType:e.itemType,width:70,height:70},e.attrs),!1));return`
      ${i}
      `})}[se("$css-list .pattern-item")](e){const t=+e.$dt.data("index"),i=yb[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",i.itemType,i.attrs)}}const bb=[{itemType:"svg-path",name:"path",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:_e.makeRect(0,0,80,80).d}},{itemType:"svg-path",name:"line",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:_e.makeLine(0,0,80,80).d}},{itemType:"svg-path",name:"line 2",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",d:_e.makeLine(0,80,80,0).d}},{itemType:"svg-path",name:"circle",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,d:_e.makeCircle(0,0,80,80).d}},{itemType:"polygon",name:"polygon - 3",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:3,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,3).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:4,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,4).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:5,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,5).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:6,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,6).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:7,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,7).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:12,originWidth:80,originHeight:80,d:_e.makePolygon(80,80,12).d}},{itemType:"star",name:"star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:_e.makeStar(80,80,5,.5).d}},{itemType:"star",name:"curved star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:_e.makeCurvedStar(80,80,5,.5).d}}];class cG extends ge{template(){return` + `}[G("$css-list")](){return qp.map((e,t)=>{const r=this.$editor.renderer("svg").render(this.$model.createModel(b({itemType:e.itemType,width:70,height:70},e.attrs),!1));return`
      ${r}
      `})}[A("$css-list .pattern-item")](e){const t=+e.$dt.data("index"),r=qp[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",r.itemType,r.attrs)}}const Qp=[{itemType:"svg-path",name:"path",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:K.makeRect(0,0,80,80).d}},{itemType:"svg-path",name:"line",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:K.makeLine(0,0,80,80).d}},{itemType:"svg-path",name:"line 2",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",d:K.makeLine(0,80,80,0).d}},{itemType:"svg-path",name:"circle",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,d:K.makeCircle(0,0,80,80).d}},{itemType:"polygon",name:"polygon - 3",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:3,originWidth:80,originHeight:80,d:K.makePolygon(80,80,3).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:4,originWidth:80,originHeight:80,d:K.makePolygon(80,80,4).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:5,originWidth:80,originHeight:80,d:K.makePolygon(80,80,5).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:6,originWidth:80,originHeight:80,d:K.makePolygon(80,80,6).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:7,originWidth:80,originHeight:80,d:K.makePolygon(80,80,7).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:12,originWidth:80,originHeight:80,d:K.makePolygon(80,80,12).d}},{itemType:"star",name:"star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:K.makeStar(80,80,5,.5).d}},{itemType:"star",name:"curved star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:K.makeCurvedStar(80,80,5,.5).d}}];class G8 extends Y{template(){return`
      - `}[ve("$svg-list")](){return bb.map((e,t)=>{let i=e.attrs.d;if(i){const s=_e.fromSVGString(i);if(e.attrs.originWidth)s.scale(60/e.attrs.originWidth,60/e.attrs.originHeight);else{const a=s.rect();s.scale(70/a.width,70/a.height)}i=s.d}const r=this.$editor.renderer("svg").render(this.$model.createModel(Ve(P({itemType:e.itemType,width:80,height:80},e.attrs),{d:i}),!1));return`
      ${r}
      `})}[se("$svg-list .pattern-item")](e){const t=+e.$dt.data("index"),i=bb[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",i.itemType,i.attrs)}}class xb extends ge{template(){const e=this.$config.get("editor.design.mode")==="item";return D("div",{class:"elf--texture"},D(zc,{ref:"$tab",selectedValue:e?"svg":"css",onchange:t=>{this.$config.set("inspector.selectedValue",t)}},e?"":D(Hn,{value:"css",title:"CSS"},D("object",{refClass:"CSSTextureView",ref:"$css"})),D(Hn,{value:"svg",title:"SVG"},D("object",{refClass:"SVGTextureView",ref:"$svg"}))))}}function hG(n){n.registerElement({TextureView:xb,CSSTextureView:lG,SVGTextureView:cG}),n.registerUI("leftbar.tab",{TextureView:{value:"texture",title:"Texture",icon:oG,designMode:["design","item"]}}),n.registerUI("leftbar.tab.texture",{TextureView:xb})}var ore="";class dG extends jt{getTitle(){return this.$i18n("export.property.title")}isFirstShow(){return!0}getClassName(){return"elf--export-property"}getBody(){return` + `}[G("$svg-list")](){return Qp.map((e,t)=>{let r=e.attrs.d;if(r){const a=K.fromSVGString(r);if(e.attrs.originWidth)a.scale(60/e.attrs.originWidth,60/e.attrs.originHeight);else{const n=a.rect();a.scale(70/n.width,70/n.height)}r=a.d}const i=this.$editor.renderer("svg").render(this.$model.createModel(se(b({itemType:e.itemType,width:80,height:80},e.attrs),{d:r}),!1));return`
      ${i}
      `})}[A("$svg-list .pattern-item")](e){const t=+e.$dt.data("index"),r=Qp[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",r.itemType,r.attrs)}}class Jp extends Y{template(){const e=this.$config.get("editor.design.mode")==="item";return C("div",{class:"elf--texture"},C(Ql,{ref:"$tab",selectedValue:e?"svg":"css",onchange:t=>{this.$config.set("inspector.selectedValue",t)}},e?"":C(Ha,{value:"css",title:"CSS"},C("object",{refClass:"CSSTextureView",ref:"$css"})),C(Ha,{value:"svg",title:"SVG"},C("object",{refClass:"SVGTextureView",ref:"$svg"}))))}}function H8(s){s.registerElement({TextureView:Jp,CSSTextureView:N8,SVGTextureView:G8}),s.registerUI("leftbar.tab",{TextureView:{value:"texture",title:"Texture",icon:B8,designMode:["design","item"]}}),s.registerUI("leftbar.tab.texture",{TextureView:Jp})}var eF="";class U8 extends Ge{getTitle(){return this.$i18n("export.property.title")}isFirstShow(){return!0}getClassName(){return"elf--export-property"}getBody(){return`
      - +
      - +
      - `}[se("$svg")](){this.$commands.emit("downloadSVG")}[se("$png")](){this.$commands.emit("downloadPNG")}}function uG(n){n.registerUI("inspector.tab.style",{ExportProperty:dG})}var lre="";const qg=[Jr.PAD,Jr.REFLECT,Jr.REPEAT],Zg=20;class pG extends ge{initializeData(){const e=this.$context.selection.current;this.state.currentMatrix=e.matrix,this.state.imageResult=e.createFragmentMatrix(this.state.key),this.state.originalResult=e.createFragmentMatrix(this.state.key)}}class fG extends pG{[qe("$el .step-point")+at("moveStepPoint")+lt("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.imageResult.image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const i=(e<0?-1:1)*Math.ceil(Ne([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case Je.LINEAR:break;case Je.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+i,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+i,1);break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}makeTimingString(e){switch(e.name){case Je.LINEAR:return"";case Je.EASE:case Je.EASE_IN:case Je.EASE_OUT:case Je.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:i}=this.localColorStep;switch(i.name){case Je.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start",this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}));break;case Je.LINEAR:break;case Je.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:i.d}],changeEvent:(r,s)=>{this.localColorStep.timing=dr(`path(${s})`).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(i)}],changeEvent:(r,s)=>{this.localColorStep.timing=dr(s).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}}),this.$el.toggleClass("dragging",!1);return}}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`})),this.$el.toggleClass("dragging",!1)}}class gG extends fG{[Pr("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.imageResult.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.imageResult.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.imageResult.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,i=this.state.imageResult.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&(a=i.insertColorStep(r.percent+(100-r.percent)/2)),this.updateColorStepStatus(i,a)}prependColorStep(e){const t=e-1,i=this.state.imageResult.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&(a=i.insertColorStep(r.percent)),this.updateColorStepStatus(i,a)}[qe("$el .point")+at("movePoint")+lt("moveEndPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=this.state.imageResult;this.pointTarget=e.$dt.data("type"),this.startPoint=this.$viewport.applyVertex(t.startPoint),this.endPoint=this.$viewport.applyVertex(t.endPoint),this.dist=Ne(this.startPoint,this.endPoint),t.shapePoint&&(this.shapePoint=this.$viewport.applyVertex(t.shapePoint),this.shapeDist=Ne(this.startPoint,this.shapePoint))}calculateNextPoint(e){if(this.$config.get("bodyEvent").shiftKey){let t,i;this.pointTarget==="start"?(t=this.endPoint,i=e):(t=this.startPoint,i=e);const r=ft([],i,t);let s=li(r[0],r[1])-90;s=(s+360)%360,s-=s%this.$config.get("fixed.gradient.angle"),e=Xe([_t([],t,[0,-this.dist,0])],cr(s,t))[0]}return e}moveShapePoint(e,t){const i=this.shapePoint,r=this.calculateNextPoint(_t([],i,[e,t,0])),s=this.state.currentMatrix.width,a=this.state.currentMatrix.height,o=this.state.imageResult.image;let l,c;switch(o.type){case ue.RADIAL:const h=Ne(this.startPoint,r),d=Ae([],this.startPoint,this.shapePoint,h/this.shapeDist),[u]=Xe([this.$viewport.applyVertexInverse(d)],this.state.currentMatrix.absoluteMatrixInverse);l=y.makePercent(u[0],s),c=y.makePercent(u[1],a),o.reset({x3:l,y3:c});break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}movePoint(e,t){if(this.pointTarget==="shape")return this.moveShapePoint(e,t);const i=this.pointTarget==="start"?this.startPoint:this.endPoint;let r=this.calculateNextPoint(_t([],i,[e,t,0]));var[s]=Xe([this.$viewport.applyVertexInverse(r)],this.state.currentMatrix.absoluteMatrixInverse);const a=this.state.currentMatrix.width,o=this.state.currentMatrix.height,l=this.state.imageResult.image;switch(l.type){case ue.RADIAL:var p,f,c,h,d,u;if(this.pointTarget==="start"){p=l.x1.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y1.isPercent()?y.makePercent(s[1],o):y.px(s[1]);const g=this.calculateNextPoint(_t([],this.endPoint,[e,t,0])),[m]=Xe([this.$viewport.applyVertexInverse(g)],this.state.currentMatrix.absoluteMatrixInverse);c=l.x2.isPercent()?y.makePercent(m[0],a):y.px(m[0]),h=l.y2.isPercent()?y.makePercent(m[1],o):y.px(m[1]);const v=this.calculateNextPoint(_t([],this.shapePoint,[e,t,0])),[b]=Xe([this.$viewport.applyVertexInverse(v)],this.state.currentMatrix.absoluteMatrixInverse);d=l.x3.isPercent()?y.makePercent(b[0],a):y.px(b[0]),u=l.y3.isPercent()?y.makePercent(b[1],o):y.px(b[1]),l.reset({x1:p,y1:f,x2:c,y2:h,x3:d,y3:u})}else if(this.pointTarget==="end"){if(this.$config.get("bodyEvent").altKey){const _=Ne(this.startPoint,r);r=Ae([],this.startPoint,this.endPoint,_/this.dist);var[s]=Xe([this.$viewport.applyVertexInverse(r)],this.state.currentMatrix.absoluteMatrixInverse)}p=y.makePercent(s[0],a),f=y.makePercent(s[1],o),l.reset({x2:p,y2:f});const g=Ne(this.startPoint,r),m=Ae([],this.startPoint,r,1/g),v=Ae([],this.startPoint,Xe([m],cr(90,this.startPoint))[0],l.radialType===Ci.CIRCLE?g:this.shapeDist),[b]=Xe([this.$viewport.applyVertexInverse(v)],this.state.currentMatrix.absoluteMatrixInverse);d=y.makePercent(b[0],a),u=y.makePercent(b[1],o),l.reset({x3:d,y3:u})}break;case ue.LINEAR:var p,f;this.pointTarget==="start"?(p=l.x1.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y1.isPercent()?y.makePercent(s[1],o):y.px(s[1]),l.reset({x1:p,y1:f})):this.pointTarget==="end"&&(p=l.x2.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y2.isPercent()?y.makePercent(s[1],o):y.px(s[1]),l.reset({x2:p,y2:f}));break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}moveEndPoint(e,t){const i=this.state.imageResult.image,r=this.state.currentMatrix.width,s=this.state.currentMatrix.height;if(e===0&&t===0)switch(i.type){case ue.RADIAL:if(this.pointTarget==="start"){switch(i.radialType){case Ci.CIRCLE:i.reset({radialType:Ci.ELLIPSE});break;case Ci.ELLIPSE:const l=Ne(this.startPoint,this.endPoint),c=Ae([],this.startPoint,this.endPoint,1/l),h=Ae([],this.startPoint,Xe([c],cr(90,this.startPoint))[0],l),[d]=Xe([this.$viewport.applyVertexInverse(h)],this.state.currentMatrix.absoluteMatrixInverse),u=y.makePercent(d[0],r),p=y.makePercent(d[1],s);i.reset({radialType:Ci.CIRCLE,x3:u,y3:p});break}break}default:const o=(qg.findIndex(l=>i.spreadMethod===l)+1)%qg.length;i.reset({spreadMethod:qg[o]});break}this.emit("updateFillEditor",i),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${i}`}))}[qe("$el .colorstep")+at("moveColorStep")+lt("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const i=this.state.imageResult;switch(i.image.type){case ue.RADIAL:case ue.LINEAR:this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint);const r=+t.data("x"),s=+t.data("y");this.screenXY=[r,s,0];const a=ft([],this.endPoint,this.startPoint),o=li(a[0],a[1])-180;this.rotateInverse=cr(-o,this.startPoint);break}}moveColorStep(e,t){if(this.state.altKey)return;const i=_t([],this.screenXY,[e,t,0]),[r,s,a]=Xe([this.startPoint,this.endPoint,i],this.rotateInverse),o=this.state.imageResult;let l=0,c=0;switch(o.image.type){case ue.RADIAL:case ue.LINEAR:var[h,d,u]=[r[0],s[0],a[0]],p=Math.abs(h-d);ud?l=Math.abs(u-h)/p*100:l=(u-h)/p*100,l=Math.max(0,Math.min(100,l)),c=p;break}const f=this.state.imageResult.image;f.colorsteps[this.$targetIndex].setValue(l,c);const g={color:f.colorsteps[this.$targetIndex].color,percent:f.colorsteps[this.$targetIndex].percent},m=this.state.originalResult.image;m.colorsteps=f.colorsteps.map(v=>v),m.sortColorStep(),this.emit("updateFillEditor",m,g),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${m}`}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const i=this.state.imageResult.image;i.colorsteps[this.$targetIndex].toggleTiming();const r={color:i.colorsteps[this.$targetIndex].color,percent:i.colorsteps[this.$targetIndex].percent};this.emit("updateFillEditor",i,r),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${i}`}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:i,percent:r}=e.colorsteps[t]||{};this.emit("updateFillEditor",e,{color:i,percent:r}),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${e}`})),this.state.hoverColorStep=null}[qe("$el .area-line")](){const e=this.state.originalResult.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Lc("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[lo("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),i=this.state.originalResult.image;let r,s,a;switch(i.type){case ue.LINEAR:case ue.RADIAL:[r,s,a]=Xe([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var[o,l,c]=[r[0],s[0],a[0]],h=Math.abs(o-l),d;cl?d=Math.abs(c-o)/h*100:d=(c-o)/h*100,this.state.hoverColorStep=i.pickColorStep(d);break}this.refresh()}}class mG extends gG{initState(){return{key:"",value:"",isShow:!1}}template(){return D("div",{class:"elf--fill-editor-view"})}updateData(){this.trigger(this.state.onchange,this.state.key,this.state.value)}refresh(){this.state.isShow&&this.load()}[U(si)](){this.refresh()}[U(Gi)+Ft(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("x","y","width","height","angle","fill","stroke")&&this.refresh()}[U("showFillEditorView")](e={}){this.setState({key:e.key,isShow:!0,onchange:e.onchange}),this.$el.show(),this.$context.commands.emit("push.mode.view","FillEditorView")}[U("hideFillEditorView")](){this.setState({key:"",isShow:!1,onchange:null}),this.$el.hide(),this.$commands.emit("pop.mode.view","FillEditorView")}makeTimingLine(e,t=10,i=0,r=0){switch(e.name){case Je.LINEAR:return"";case Je.STEPS:return D("path",{class:"timing",d:` - M${i+0} ${r+t} - L${i+t*1/3} ${r+t} - L${i+t*1/3} ${r+t*2/3} - L${i+t*2/3} ${r+t*2/3} - L${i+t*2/3} ${r+t*1/3} - L${i+t} ${r+t*1/3} - L${i+t} ${r+0} - `});case Je.PATH:return D("path",{class:"timing",d:_e.fromSVGString(e.d).scale(t,t).flipX().translate(0,t).translate(i,r).d});default:return D("path",{class:"timing",d:` - M${i+0} ${r+t} + `}[A("$svg")](){this.$commands.emit("downloadSVG")}[A("$png")](){this.$commands.emit("downloadPNG")}}function W8(s){s.registerUI("inspector.tab.style",{ExportProperty:U8})}var tF="";const ih=[mr.PAD,mr.REFLECT,mr.REPEAT],sh=20;class X8 extends Y{initializeData(){const e=this.$context.selection.current;this.state.currentMatrix=e.matrix,this.state.imageResult=e.createFragmentMatrix(this.state.key),this.state.originalResult=e.createFragmentMatrix(this.state.key)}}class Y8 extends X8{[me("$el .step-point")+xe("moveStepPoint")+Se("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.imageResult.image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const r=(e<0?-1:1)*Math.ceil(ae([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case ue.LINEAR:break;case ue.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+r,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+r,1);break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}makeTimingString(e){switch(e.name){case ue.LINEAR:return"";case ue.EASE:case ue.EASE_IN:case ue.EASE_OUT:case ue.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:r}=this.localColorStep;switch(r.name){case ue.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start",this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}));break;case ue.LINEAR:break;case ue.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:r.d}],changeEvent:(i,a)=>{this.localColorStep.timing=Xt(`path(${a})`).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(r)}],changeEvent:(i,a)=>{this.localColorStep.timing=Xt(a).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}}),this.$el.toggleClass("dragging",!1);return}}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`})),this.$el.toggleClass("dragging",!1)}}class K8 extends Y8{[er("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.imageResult.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.imageResult.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.imageResult.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,r=this.state.imageResult.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&(n=r.insertColorStep(i.percent+(100-i.percent)/2)),this.updateColorStepStatus(r,n)}prependColorStep(e){const t=e-1,r=this.state.imageResult.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&(n=r.insertColorStep(i.percent)),this.updateColorStepStatus(r,n)}[me("$el .point")+xe("movePoint")+Se("moveEndPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=this.state.imageResult;this.pointTarget=e.$dt.data("type"),this.startPoint=this.$viewport.applyVertex(t.startPoint),this.endPoint=this.$viewport.applyVertex(t.endPoint),this.dist=ae(this.startPoint,this.endPoint),t.shapePoint&&(this.shapePoint=this.$viewport.applyVertex(t.shapePoint),this.shapeDist=ae(this.startPoint,this.shapePoint))}calculateNextPoint(e){if(this.$config.get("bodyEvent").shiftKey){let t,r;this.pointTarget==="start"?(t=this.endPoint,r=e):(t=this.startPoint,r=e);const i=_e([],r,t);let a=ot(i[0],i[1])-90;a=(a+360)%360,a-=a%this.$config.get("fixed.gradient.angle"),e=le([we([],t,[0,-this.dist,0])],Ut(a,t))[0]}return e}moveShapePoint(e,t){const r=this.shapePoint,i=this.calculateNextPoint(we([],r,[e,t,0])),a=this.state.currentMatrix.width,n=this.state.currentMatrix.height,o=this.state.imageResult.image;let l,c;switch(o.type){case F.RADIAL:const h=ae(this.startPoint,i),u=te([],this.startPoint,this.shapePoint,h/this.shapeDist),[d]=le([this.$viewport.applyVertexInverse(u)],this.state.currentMatrix.absoluteMatrixInverse);l=p.makePercent(d[0],a),c=p.makePercent(d[1],n),o.reset({x3:l,y3:c});break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}movePoint(e,t){if(this.pointTarget==="shape")return this.moveShapePoint(e,t);const r=this.pointTarget==="start"?this.startPoint:this.endPoint;let i=this.calculateNextPoint(we([],r,[e,t,0]));var[a]=le([this.$viewport.applyVertexInverse(i)],this.state.currentMatrix.absoluteMatrixInverse);const n=this.state.currentMatrix.width,o=this.state.currentMatrix.height,l=this.state.imageResult.image;switch(l.type){case F.RADIAL:var v,g,c,h,u,d;if(this.pointTarget==="start"){v=l.x1.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y1.isPercent()?p.makePercent(a[1],o):p.px(a[1]);const y=this.calculateNextPoint(we([],this.endPoint,[e,t,0])),[P]=le([this.$viewport.applyVertexInverse(y)],this.state.currentMatrix.absoluteMatrixInverse);c=l.x2.isPercent()?p.makePercent(P[0],n):p.px(P[0]),h=l.y2.isPercent()?p.makePercent(P[1],o):p.px(P[1]);const S=this.calculateNextPoint(we([],this.shapePoint,[e,t,0])),[V]=le([this.$viewport.applyVertexInverse(S)],this.state.currentMatrix.absoluteMatrixInverse);u=l.x3.isPercent()?p.makePercent(V[0],n):p.px(V[0]),d=l.y3.isPercent()?p.makePercent(V[1],o):p.px(V[1]),l.reset({x1:v,y1:g,x2:c,y2:h,x3:u,y3:d})}else if(this.pointTarget==="end"){if(this.$config.get("bodyEvent").altKey){const E=ae(this.startPoint,i);i=te([],this.startPoint,this.endPoint,E/this.dist);var[a]=le([this.$viewport.applyVertexInverse(i)],this.state.currentMatrix.absoluteMatrixInverse)}v=p.makePercent(a[0],n),g=p.makePercent(a[1],o),l.reset({x2:v,y2:g});const y=ae(this.startPoint,i),P=te([],this.startPoint,i,1/y),S=te([],this.startPoint,le([P],Ut(90,this.startPoint))[0],l.radialType===bt.CIRCLE?y:this.shapeDist),[V]=le([this.$viewport.applyVertexInverse(S)],this.state.currentMatrix.absoluteMatrixInverse);u=p.makePercent(V[0],n),d=p.makePercent(V[1],o),l.reset({x3:u,y3:d})}break;case F.LINEAR:var v,g;this.pointTarget==="start"?(v=l.x1.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y1.isPercent()?p.makePercent(a[1],o):p.px(a[1]),l.reset({x1:v,y1:g})):this.pointTarget==="end"&&(v=l.x2.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y2.isPercent()?p.makePercent(a[1],o):p.px(a[1]),l.reset({x2:v,y2:g}));break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}moveEndPoint(e,t){const r=this.state.imageResult.image,i=this.state.currentMatrix.width,a=this.state.currentMatrix.height;if(e===0&&t===0)switch(r.type){case F.RADIAL:if(this.pointTarget==="start"){switch(r.radialType){case bt.CIRCLE:r.reset({radialType:bt.ELLIPSE});break;case bt.ELLIPSE:const l=ae(this.startPoint,this.endPoint),c=te([],this.startPoint,this.endPoint,1/l),h=te([],this.startPoint,le([c],Ut(90,this.startPoint))[0],l),[u]=le([this.$viewport.applyVertexInverse(h)],this.state.currentMatrix.absoluteMatrixInverse),d=p.makePercent(u[0],i),v=p.makePercent(u[1],a);r.reset({radialType:bt.CIRCLE,x3:d,y3:v});break}break}default:const o=(ih.findIndex(l=>r.spreadMethod===l)+1)%ih.length;r.reset({spreadMethod:ih[o]});break}this.emit("updateFillEditor",r),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${r}`}))}[me("$el .colorstep")+xe("moveColorStep")+Se("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const r=this.state.imageResult;switch(r.image.type){case F.RADIAL:case F.LINEAR:this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint);const i=+t.data("x"),a=+t.data("y");this.screenXY=[i,a,0];const n=_e([],this.endPoint,this.startPoint),o=ot(n[0],n[1])-180;this.rotateInverse=Ut(-o,this.startPoint);break}}moveColorStep(e,t){if(this.state.altKey)return;const r=we([],this.screenXY,[e,t,0]),[i,a,n]=le([this.startPoint,this.endPoint,r],this.rotateInverse),o=this.state.imageResult;let l=0,c=0;switch(o.image.type){case F.RADIAL:case F.LINEAR:var[h,u,d]=[i[0],a[0],n[0]],v=Math.abs(h-u);du?l=Math.abs(d-h)/v*100:l=(d-h)/v*100,l=Math.max(0,Math.min(100,l)),c=v;break}const g=this.state.imageResult.image;g.colorsteps[this.$targetIndex].setValue(l,c);const y={color:g.colorsteps[this.$targetIndex].color,percent:g.colorsteps[this.$targetIndex].percent},P=this.state.originalResult.image;P.colorsteps=g.colorsteps.map(S=>S),P.sortColorStep(),this.emit("updateFillEditor",P,y),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${P}`}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const r=this.state.imageResult.image;r.colorsteps[this.$targetIndex].toggleTiming();const i={color:r.colorsteps[this.$targetIndex].color,percent:r.colorsteps[this.$targetIndex].percent};this.emit("updateFillEditor",r,i),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${r}`}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:r,percent:i}=e.colorsteps[t]||{};this.emit("updateFillEditor",e,{color:r,percent:i}),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${e}`})),this.state.hoverColorStep=null}[me("$el .area-line")](){const e=this.state.originalResult.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Aa("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[Ps("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),r=this.state.originalResult.image;let i,a,n;switch(r.type){case F.LINEAR:case F.RADIAL:[i,a,n]=le([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var[o,l,c]=[i[0],a[0],n[0]],h=Math.abs(o-l),u;cl?u=Math.abs(c-o)/h*100:u=(c-o)/h*100,this.state.hoverColorStep=r.pickColorStep(u);break}this.refresh()}}class Z8 extends K8{initState(){return{key:"",value:"",isShow:!1}}template(){return C("div",{class:"elf--fill-editor-view"})}updateData(){this.trigger(this.state.onchange,this.state.key,this.state.value)}refresh(){this.state.isShow&&this.load()}[M(st)](){this.refresh()}[M(Mt)+Ne(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("x","y","width","height","angle","fill","stroke")&&this.refresh()}[M("showFillEditorView")](e={}){this.setState({key:e.key,isShow:!0,onchange:e.onchange}),this.$el.show(),this.$context.commands.emit("push.mode.view","FillEditorView")}[M("hideFillEditorView")](){this.setState({key:"",isShow:!1,onchange:null}),this.$el.hide(),this.$commands.emit("pop.mode.view","FillEditorView")}makeTimingLine(e,t=10,r=0,i=0){switch(e.name){case ue.LINEAR:return"";case ue.STEPS:return C("path",{class:"timing",d:` + M${r+0} ${i+t} + L${r+t*1/3} ${i+t} + L${r+t*1/3} ${i+t*2/3} + L${r+t*2/3} ${i+t*2/3} + L${r+t*2/3} ${i+t*1/3} + L${r+t} ${i+t*1/3} + L${r+t} ${i+0} + `});case ue.PATH:return C("path",{class:"timing",d:K.fromSVGString(e.d).scale(t,t).flipX().translate(0,t).translate(r,i).d});default:return C("path",{class:"timing",d:` + M${r+0} ${i+t} C - ${i+e.x1*t} ${r+t-e.y1*t} - ${i+e.x2*t} ${r+t-e.y2*t} - ${i+t} ${r+0} - `})}}makeTimingCircle(e,t,i){const r=i.stickScreenXYInEnd,s=t.stickScreenXYInStart,{timing:a,timingCount:o}=t;let l;switch(a.name){case Je.LINEAR:return"";case Je.STEPS:return l=Ae([],r,s,.5),D(Yi,null,D("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),D("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},a.count));default:return l=Ae([],r,s,.5),D(Yi,null,D("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),D("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},o))}}makeTimingArea(e,t,i,r){const s=i.stickScreenXYInEnd,a=t.stickScreenXYInStart;return D("g",{class:"timing-area"},t.timing.name===Je.LINEAR?"":D("path",{class:"timing-path",d:` - M ${s[0]} ${s[1]} - L ${a[0]} ${a[1]} - `}),this.makeTimingCircle(e,t,i,r))}makeGradientPoint(e,t,i,r,s){const a=Zg,o=ft([],i,t),l=li(o[0],o[1])-180;return D(Yi,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],Zg)),e.map((c,h)=>D("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},D("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:a,height:a,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,a,c.stickScreenXY[0],c.stickScreenXY[1]))),D("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),D("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&D("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&D("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeStickPoint(e,t,i){const r=Zg,s=ft([],i,t),a=li(s[0],s[1])-180,o=cr(-a,t),l=ir([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=Xe([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=Xe([[h[0]-r/2,h[1]-r*1.5,0],[h[0]-r/2,h[1]-r*1.5+r/2,0],[h[0]+r/2,h[1]-r*1.5+r/2,0]],l),c})}makeRadialCenterPoint(e){let t,i,r,s;t=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),r=this.$viewport.applyVertex(e.shapePoint),s=this.makeStickPoint(e.colorsteps,t,i);let a=null;return this.state.hoverColorStep&&(a=Ae([],t,i,this.state.hoverColorStep.percent/100)),D("svg",{class:"gradient-editor-area"},D("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"area-line"}),D("path",{d:` + ${r+e.x1*t} ${i+t-e.y1*t} + ${r+e.x2*t} ${i+t-e.y2*t} + ${r+t} ${i+0} + `})}}makeTimingCircle(e,t,r){const i=r.stickScreenXYInEnd,a=t.stickScreenXYInStart,{timing:n,timingCount:o}=t;let l;switch(n.name){case ue.LINEAR:return"";case ue.STEPS:return l=te([],i,a,.5),C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),C("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},n.count));default:return l=te([],i,a,.5),C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),C("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},o))}}makeTimingArea(e,t,r,i){const a=r.stickScreenXYInEnd,n=t.stickScreenXYInStart;return C("g",{class:"timing-area"},t.timing.name===ue.LINEAR?"":C("path",{class:"timing-path",d:` + M ${a[0]} ${a[1]} + L ${n[0]} ${n[1]} + `}),this.makeTimingCircle(e,t,r,i))}makeGradientPoint(e,t,r,i,a){const n=sh,o=_e([],r,t),l=ot(o[0],o[1])-180;return C(Lt,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],sh)),e.map((c,h)=>C("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},C("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:n,height:n,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,n,c.stickScreenXY[0],c.stickScreenXY[1]))),C("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),C("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&C("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&C("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeStickPoint(e,t,r){const i=sh,a=_e([],r,t),n=ot(a[0],a[1])-180,o=Ut(-n,t),l=Dt([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=le([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=le([[h[0]-i/2,h[1]-i*1.5,0],[h[0]-i/2,h[1]-i*1.5+i/2,0],[h[0]+i/2,h[1]-i*1.5+i/2,0]],l),c})}makeRadialCenterPoint(e){let t,r,i,a;t=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),i=this.$viewport.applyVertex(e.shapePoint),a=this.makeStickPoint(e.colorsteps,t,r);let n=null;return this.state.hoverColorStep&&(n=te([],t,r,this.state.hoverColorStep.percent/100)),C("svg",{class:"gradient-editor-area"},C("path",{d:` M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"start-end-line"}),D("path",{d:` + L ${r[0]} ${r[1]} + `,class:"area-line"}),C("path",{d:` M ${t[0]} ${t[1]} L ${r[0]} ${r[1]} - `,class:"normal-line"}),this.makeGradientPoint(s,t,i,r,a))}makeLinearCenterPoint(e){let t,i,r;t=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),r=this.makeStickPoint(e.colorsteps,t,i);let s=null;return this.state.hoverColorStep&&(s=Ae([],t,i,this.state.hoverColorStep.percent/100)),D("svg",{class:"gradient-editor-area"},D("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"area-line"}),D("path",{d:` + `,class:"start-end-line"}),C("path",{d:` M ${t[0]} ${t[1]} L ${i[0]} ${i[1]} - `,class:"start-end-line"}),this.makeGradientPoint(r,t,i,null,s))}makeCenterPoint(e){const{image:t}=e;switch(t.type){case ue.LINEAR:return this.makeLinearCenterPoint(e);case ue.RADIAL:return this.makeRadialCenterPoint(e)}return""}[ve("$el")+It](){if(!this.state.isShow)return"";const e=this.$context.selection.current;if(!e)return"";const t=e.createFragmentMatrix(this.state.key);this.state.result=t,this.state.originalResult=e.createFragmentMatrix(this.state.key);const i=t.image;let r,s;switch(i.type){case ue.LINEAR:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),s=ft([],this.state.endPoint,this.state.startPoint),r=li(s[0],s[1])-180,this.state.rotateInverse=cr(-r,this.state.startPoint);break;case ue.RADIAL:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.shapePoint=this.$viewport.applyVertex(t.shapePoint),s=ft([],this.state.endPoint,this.state.startPoint),r=li(s[0],s[1])-180,this.state.rotateInverse=cr(-r,this.state.startPoint);break}return D("div",null,this.makeCenterPoint(t))}}function _b(n){n.registerUI("canvas.view",{FillEditorView:mG})}var cre="";const vG=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class yG extends jt{getTitle(){return this.$i18n("filter.property.title")}hasKeyframe(){return!0}isFirstShow(){return!0}afterRender(){this.show()}getKeyframeProperty(){return"filter"}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
      "}getTools(){return` + `,class:"normal-line"}),this.makeGradientPoint(a,t,r,i,n))}makeLinearCenterPoint(e){let t,r,i;t=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),i=this.makeStickPoint(e.colorsteps,t,r);let a=null;return this.state.hoverColorStep&&(a=te([],t,r,this.state.hoverColorStep.percent/100)),C("svg",{class:"gradient-editor-area"},C("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"area-line"}),C("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"start-end-line"}),this.makeGradientPoint(i,t,r,null,a))}makeCenterPoint(e){const{image:t}=e;switch(t.type){case F.LINEAR:return this.makeLinearCenterPoint(e);case F.RADIAL:return this.makeRadialCenterPoint(e)}return""}[G("$el")+Ee](){if(!this.state.isShow)return"";const e=this.$context.selection.current;if(!e)return"";const t=e.createFragmentMatrix(this.state.key);this.state.result=t,this.state.originalResult=e.createFragmentMatrix(this.state.key);const r=t.image;let i,a;switch(r.type){case F.LINEAR:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),a=_e([],this.state.endPoint,this.state.startPoint),i=ot(a[0],a[1])-180,this.state.rotateInverse=Ut(-i,this.state.startPoint);break;case F.RADIAL:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.shapePoint=this.$viewport.applyVertex(t.shapePoint),a=_e([],this.state.endPoint,this.state.startPoint),i=ot(a[0],a[1])-180,this.state.rotateInverse=Ut(-i,this.state.startPoint);break}return C("div",null,this.makeCenterPoint(t))}}function q8(s){s.registerUI("canvas.view",{FillEditorView:Z8})}var rF="";const Q8=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class J8 extends Ge{getTitle(){return this.$i18n("filter.property.title")}hasKeyframe(){return!0}isFirstShow(){return!0}afterRender(){this.show()}getKeyframeProperty(){return"filter"}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
      "}getTools(){return` - - `}[se("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[ve("$filterSelect")](){var e=vG.map(r=>({title:this.$i18n(`filter.property.${r}`),value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(i=>{var r=i.id;return{title:`svg - #${r}`,value:r}})),t}[ve("$body")+It](){var e=this.$context.selection.current||{},t=e.filter;return W("FilterEditor",{ref:"$filterEditor",key:"filter",value:t,onchange:"changeFilterEditor"})}[Me("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"filter"}[U(kt)+Qe("checkShow")+Ft(100)](){this.refresh()}[U("refreshSVGArea")+Ft(100)](){this.load("$filterSelect")}}function bG(n){n.registerUI("inspector.tab.style",{FilterProperty:yG})}function xG(n){n.registerUI("inspector.tab.style",{FontProperty:mh.create({title:n.$i18n("font.property.title"),editableProperty:"font",preventUpdate:!0})}),n.registerInspector("font",e=>[{key:"font-family",editor:"SelectEditor",editorOptions:{compact:!0,label:"font_download",options:["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"]},defaultValue:e.fontFamily||""},{type:"column",size:[1,1],gap:10,columns:[{key:"font-size",editor:"NumberInputEditor",editorOptions:{label:"format_size",compact:!0,min:8,max:1e3,step:1},defaultValue:y.parse(e.fontSize).value,convert:(t,i)=>y.px(i)},{key:"padding",editor:"NumberInputEditor",editorOptions:{label:"padding",compact:!0,min:8,max:1e3,step:1},defaultValue:y.parse(e.paddingTop).value,convert:(t,i)=>y.px(i)}]},{type:"column",size:[1,1],columns:[{key:"color",editor:"ColorViewEditor",editorOptions:{compact:!0},defaultValue:e.color||"#000"},{key:"font-weight",editor:"NumberInputEditor",editorOptions:{label:"format_bold",compact:!0,min:100,max:900,step:100},defaultValue:e.fontWeight||400}]},{type:"column",size:[1,1,1],gap:10,columns:[{key:"text-indent",editor:"NumberInputEditor",editorOptions:{label:"format_indent",min:-100,max:100,step:1,compact:!0},defaultValue:y.parse(e.textIndent).value,convert:(t,i)=>y.px(i)},{key:"line-height",editor:"NumberInputEditor",editorOptions:{label:"format_line_spacing",min:0,max:10,step:.01,compact:!0},defaultValue:e.lineHeight||1.2},{key:"letter-spacing",editor:"NumberInputEditor",editorOptions:{label:"space",min:-100,max:100,step:1,compact:!0},defaultValue:y.parse(e.letterSpacing).value,convert:(t,i)=>y.px(i)}]}])}var hre="";class _G extends ge{initState(){var i;const e=ai.parseImage(this.props.value||"transparent")||Ma.create(),t=(i=e.colorsteps[this.props.index])==null?void 0:i.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(r=>this.$context.selection.isSelectedColorStep(r.id))),{cachedRect:null,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({cachedRect:null,image:ai.parseImage(e)},!1),this.refresh()}template(){return` + + `}[A("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[G("$filterSelect")](){var e=Q8.map(i=>({title:this.$i18n(`filter.property.${i}`),value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(r=>{var i=r.id;return{title:`svg - #${i}`,value:i}})),t}[G("$body")+Ee](){var e=this.$context.selection.current||{},t=e.filter;return R("FilterEditor",{ref:"$filterEditor",key:"filter",value:t,onchange:"changeFilterEditor"})}[Z("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"filter"}[M(Oe)+fe("checkShow")+Ne(100)](){this.refresh()}[M("refreshSVGArea")+Ne(100)](){this.load("$filterSelect")}}function e9(s){s.registerUI("inspector.tab.style",{FilterProperty:J8})}function t9(s){s.registerUI("inspector.tab.style",{FontProperty:mn.create({title:s.$i18n("font.property.title"),editableProperty:"font",preventUpdate:!0})}),s.registerInspector("font",e=>[{key:"font-family",editor:"SelectEditor",editorOptions:{compact:!0,label:"font_download",options:["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"]},defaultValue:e.fontFamily||""},{type:"column",size:[1,1],gap:10,columns:[{key:"font-size",editor:"NumberInputEditor",editorOptions:{label:"format_size",compact:!0,min:8,max:1e3,step:1},defaultValue:p.parse(e.fontSize).value,convert:(t,r)=>p.px(r)},{key:"padding",editor:"NumberInputEditor",editorOptions:{label:"padding",compact:!0,min:8,max:1e3,step:1},defaultValue:p.parse(e.paddingTop).value,convert:(t,r)=>p.px(r)}]},{type:"column",size:[1,1],columns:[{key:"color",editor:"ColorViewEditor",editorOptions:{compact:!0},defaultValue:e.color||"#000"},{key:"font-weight",editor:"NumberInputEditor",editorOptions:{label:"format_bold",compact:!0,min:100,max:900,step:100},defaultValue:e.fontWeight||400}]},{type:"column",size:[1,1,1],gap:10,columns:[{key:"text-indent",editor:"NumberInputEditor",editorOptions:{label:"format_indent",min:-100,max:100,step:1,compact:!0},defaultValue:p.parse(e.textIndent).value,convert:(t,r)=>p.px(r)},{key:"line-height",editor:"NumberInputEditor",editorOptions:{label:"format_line_spacing",min:0,max:10,step:.01,compact:!0},defaultValue:e.lineHeight||1.2},{key:"letter-spacing",editor:"NumberInputEditor",editorOptions:{label:"space",min:-100,max:100,step:1,compact:!0},defaultValue:p.parse(e.letterSpacing).value,convert:(t,r)=>p.px(r)}]}])}var iF="";class r9 extends Y{initState(){var r;const e=at.parseImage(this.props.value||"transparent")||as.create(),t=(r=e.colorsteps[this.props.index])==null?void 0:r.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(i=>this.$context.selection.isSelectedColorStep(i.id))),{cachedRect:null,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({cachedRect:null,image:at.parseImage(e)},!1),this.refresh()}template(){return`
      @@ -1839,51 +1732,51 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - ${W("SelectEditor",{label:"Pattern",ref:"$patternUnits",options:["userSpaceOnUse"],key:"patternUnits",onchange:"changeKeyValue"})} + ${R("SelectEditor",{label:"Pattern",ref:"$patternUnits",options:["userSpaceOnUse"],key:"patternUnits",onchange:"changeKeyValue"})}
      - `}getImageFieldValue(e,t){var i=e[t];if(Di(i))switch(t){case"cx":case"cy":case"r":case"fx":case"fy":return"50%";case"x1":case"y1":case"y2":case"fr":case"imageX":case"imageY":return"0%";case"x2":case"patternWidth":case"patternHeight":case"imageWidth":case"imageHeight":return"100%"}return i}[yn("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(i=>{this.$commands.emit("updateImageAssetItem",i,r=>{this.trigger("setImageUrl",r)})})}refreshFieldValue(){this.children.$cx.setValue(this.state.image.cx),this.children.$cy.setValue(this.state.image.cy),this.children.$r.setValue(this.state.image.r),this.children.$fx.setValue(this.state.image.fx),this.children.$fy.setValue(this.state.image.fy),this.children.$fr.setValue(this.state.image.fr),this.children.$patternUnits.setValue(this.state.image.patternUnits),this.children.$patternWidth.setValue(this.state.image.patternWidth),this.children.$patternHeight.setValue(this.state.image.patternHeight),this.children.$imageX.setValue(this.state.image.imageX),this.children.$imageY.setValue(this.state.image.imageY),this.children.$imageWidth.setValue(this.state.image.imageWidth),this.children.$imagenHeight.setValue(this.state.image.imageHeight)}getFieldValue(e){return y.parse(this.getImageFieldValue(this.state.image,e))}getRectRate(e,t,i){var{width:r,height:s,x:a,y:o}=e;a>t?t=a:a+ri?i=o:o+sr&&(s=r);var a=(s-i)/t.width*100;this.state.image.insertColorStep(a),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[$e("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[$e("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[ve("$stepList")](){var e=this.state.image.colorsteps||[];return e.map(t=>{var i=this.$context.selection.isSelectedColorStep(t.id)?"selected":"";return` -
      + `}getImageFieldValue(e,t){var r=e[t];if(Ct(r))switch(t){case"cx":case"cy":case"r":case"fx":case"fy":return"50%";case"x1":case"y1":case"y2":case"fr":case"imageX":case"imageY":return"0%";case"x2":case"patternWidth":case"patternHeight":case"imageWidth":case"imageHeight":return"100%"}return r}[Sr("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(r=>{this.$commands.emit("updateImageAssetItem",r,i=>{this.trigger("setImageUrl",i)})})}refreshFieldValue(){this.children.$cx.setValue(this.state.image.cx),this.children.$cy.setValue(this.state.image.cy),this.children.$r.setValue(this.state.image.r),this.children.$fx.setValue(this.state.image.fx),this.children.$fy.setValue(this.state.image.fy),this.children.$fr.setValue(this.state.image.fr),this.children.$patternUnits.setValue(this.state.image.patternUnits),this.children.$patternWidth.setValue(this.state.image.patternWidth),this.children.$patternHeight.setValue(this.state.image.patternHeight),this.children.$imageX.setValue(this.state.image.imageX),this.children.$imageY.setValue(this.state.image.imageY),this.children.$imageWidth.setValue(this.state.image.imageWidth),this.children.$imagenHeight.setValue(this.state.image.imageHeight)}getFieldValue(e){return p.parse(this.getImageFieldValue(this.state.image,e))}getRectRate(e,t,r){var{width:i,height:a,x:n,y:o}=e;n>t?t=n:n+ir?r=o:o+ai&&(a=i);var n=(a-r)/t.width*100;this.state.image.insertColorStep(n),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[ne("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[ne("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[G("$stepList")](){var e=this.state.image.colorsteps||[];return e.map(t=>{var r=this.$context.selection.isSelectedColorStep(t.id)?"selected":"";return` +
      ${Math.floor(t.percent*10)/10}
      -
      `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[Pr("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t+1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&this.state.image.insertColorStep(r.percent+(100-r.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t-1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&this.state.image.insertColorStep(r.percent),this.refresh(),this.updateData(),this.doFocus(e)}[qe("$stepList .step")+at()+lt()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),i=t.x,r=t.right,s=this.startXY.x+e;sr&&(s=r);var a=(s-i)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(a=Math.floor(a)),this.currentStep.percent=a,this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${en.toCSSColorString(e.colorsteps)})`}[Me("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.setColor(e),this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[U("setImageUrl")](e,t){this.state.image&&(this.state.url=e,this.state.image.reset({url:e,datauri:t}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}var dre="";class SG extends Tn{getTitle(){var e;return W("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||ue.STATIC,onchange:"changeTabType",options:[{value:ue.STATIC,text:"Static"},{value:ue.LINEAR,text:"Linear Gradient"},{value:ue.RADIAL,text:"Radial Gradient"},{value:ue.CONIC,text:"Conic Gradient"},{value:ue.REPEATING_LINEAR,text:"Repeating Linear Gradient"},{value:ue.REPEATING_RADIAL,text:"Repeating Radial Gradient"},{value:ue.REPEATING_CONIC,text:"Repeating Conic Gradient"},{value:ue.URL,text:"Image"}]})}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` +
      `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[er("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t+1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&this.state.image.insertColorStep(i.percent+(100-i.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t-1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&this.state.image.insertColorStep(i.percent),this.refresh(),this.updateData(),this.doFocus(e)}[me("$stepList .step")+xe()+Se()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),r=t.x,i=t.right,a=this.startXY.x+e;ai&&(a=i);var n=(a-r)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(n=Math.floor(n)),this.currentStep.percent=n,this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${yr.toCSSColorString(e.colorsteps)})`}[Z("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.setColor(e),this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[M("setImageUrl")](e,t){this.state.image&&(this.state.url=e,this.state.image.reset({url:e,datauri:t}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}var sF="";class i9 extends Ar{getTitle(){var e;return R("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||F.STATIC,onchange:"changeTabType",options:[{value:F.STATIC,text:"Static"},{value:F.LINEAR,text:"Linear Gradient"},{value:F.RADIAL,text:"Radial Gradient"},{value:F.CONIC,text:"Conic Gradient"},{value:F.REPEATING_LINEAR,text:"Repeating Linear Gradient"},{value:F.REPEATING_RADIAL,text:"Repeating Radial Gradient"},{value:F.REPEATING_CONIC,text:"Repeating Conic Gradient"},{value:F.URL,text:"Image"}]})}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return`
      - ${W("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} + ${R("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})}
      - ${W("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} - ${W("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} + ${R("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} + ${R("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})}
      - `}getColorString(){var e="";return this.state.image instanceof en&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[$e("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}[ve("$gradientEditor")+It](){var e;return((e=this.state.image)==null?void 0:e.type)===ue.URL?"":W("GradientEditor",{ref:"$g",value:`${this.state.image?this.state.image.toString():""}`,index:this.state.selectColorStepIndex,onchange:"changeGradientEditor"})}[U("updateGradientEditor")](e,t){this.state.image=ni(e)?Ot.parseImage(e):e,this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(i=>i.color===t.color&&i.percent===t.percent),this.children.$color.setValue(t.color),this.refresh()}[Me("changeGradientEditor")](e){this.state.image=ni(e)?Ot.parseImage(e):e,this.updateTitle(),this.updateData()}[Me("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[Me("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[Me("changeImageUrl")](e,t){this.state.image&&(this.state.image.reset({url:t}),this.trigger("changeGradientEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[U("showGradientPickerPopup")](e,t,i){e.changeEvent=e.changeEvent||"changeFillPopup",e.image=e.gradient,e.params=t,this.showByRect(this.makeRect(248,560,i)),this.setState(e),this.updateTitle(),this.emit("showGradientEditorView",{index:e.index})}[U("hideGradientickerPopup")](){this.hide(),this.emit("hideGradientEditorView")}onClose(){this.emit("hideGradientEditorView")}[U("selectColorStep")](e){this.children.$color.setValue(e)}[U("changeColorStep")](e={}){this.state.image.reset(P({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class wG extends Tn{getTitle(){var e;return W("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||ue.STATIC,onchange:"changeTabType",options:[{value:ue.STATIC,text:"Static"},{value:ue.LINEAR,text:"Linear Gradient"},{value:ue.RADIAL,text:"Radial Gradient"},{value:ue.URL,text:"Image"}]})}initState(){return{image:Ma.create()}}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` + `}getColorString(){var e="";return this.state.image instanceof yr&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[ne("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}[G("$gradientEditor")+Ee](){var e;return((e=this.state.image)==null?void 0:e.type)===F.URL?"":R("GradientEditor",{ref:"$g",value:`${this.state.image?this.state.image.toString():""}`,index:this.state.selectColorStepIndex,onchange:"changeGradientEditor"})}[M("updateGradientEditor")](e,t){this.state.image=it(e)?Be.parseImage(e):e,this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(r=>r.color===t.color&&r.percent===t.percent),this.children.$color.setValue(t.color),this.refresh()}[Z("changeGradientEditor")](e){this.state.image=it(e)?Be.parseImage(e):e,this.updateTitle(),this.updateData()}[Z("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[Z("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[Z("changeImageUrl")](e,t){this.state.image&&(this.state.image.reset({url:t}),this.trigger("changeGradientEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[M("showGradientPickerPopup")](e,t,r){e.changeEvent=e.changeEvent||"changeFillPopup",e.image=e.gradient,e.params=t,this.showByRect(this.makeRect(248,560,r)),this.setState(e),this.updateTitle(),this.emit("showGradientEditorView",{index:e.index})}[M("hideGradientickerPopup")](){this.hide(),this.emit("hideGradientEditorView")}onClose(){this.emit("hideGradientEditorView")}[M("selectColorStep")](e){this.children.$color.setValue(e)}[M("changeColorStep")](e={}){this.state.image.reset(b({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class s9 extends Ar{getTitle(){var e;return R("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||F.STATIC,onchange:"changeTabType",options:[{value:F.STATIC,text:"Static"},{value:F.LINEAR,text:"Linear Gradient"},{value:F.RADIAL,text:"Radial Gradient"},{value:F.URL,text:"Image"}]})}initState(){return{image:as.create()}}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return`
      - ${W("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} + ${R("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})}
      - ${W("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} - ${W("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} + ${R("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} + ${R("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})}
      - `}[$e("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}getColorString(){var e="";return this.state.image instanceof en&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[ve("$gradientEditor")](){var e;return((e=this.state.image)==null?void 0:e.type)===ue.URL?"":W("FillEditor",{ref:"$g",value:`${this.state.image}`,index:this.state.selectColorStepIndex,onchange:"changeFillEditor"})}[U("updateFillEditor")](e,t=void 0){this.state.image=ni(e)?ai.parseImage(e):e,t&&(this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(i=>i.color===t.color&&i.percent===t.percent),this.children.$color.setValue(t.color)),this.refresh()}[Me("changeFillEditor")](e){this.state.image=ni(e)?ai.parseImage(e):e,this.updateTitle(),this.updateData()}[Me("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[Me("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[Me("changeImageUrl")](e){this.state.image&&(this.state.image.reset({url:e}),this.trigger("changeFillEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[U("showFillPickerPopup")](e,t,i){e.changeEvent=e.changeEvent||"changeFillPopup",e.params=t,this.showByRect(this.makeRect(248,560,i)),this.setState(e),this.updateTitle(),e.image.isGradient()&&this.trigger("selectColorStep",e.image.colorsteps[0].color),this.emit("showFillEditorView",{key:e.key})}[U("hideFillPickerPopup")](){this.hide(),this.emit("hideFillEditorView")}onClose(){this.emit("hideFillEditorView")}[U("selectColorStep")](e){this.children.$color.setValue(e)}[U("changeColorStep")](e={}){this.state.image.reset(P({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}var ure="";class MG extends ge{initState(){return{index:this.props.index,label:this.props.label,simple:this.props.simple==="true",image:ai.parseImage(this.props.value||this.props.image||"transparent")}}get fillId(){return this.id+"fill"}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.state.index)}getValue(){return this.state.image.toString()}setValue(e){this.setState({image:ai.parseImage(e)})}[$e("$fillView")](){var e=this.state.image;return e?{innerHTML:e.toSVGString(this.fillId,{width:20,height:20,sizeType:"percent"})}:{innerHTML:""}}[$e("$fillColor")](){var e=this.state.image;return e?{fill:e.toFillValue(this.fillId)}:{fill:"transparent"}}[$e("$colors")](){var e=this.state.image;if(!e)return{fill:"transparent"};var t=e.type!="url"?`${e.colorsteps[0].color}`:"transparent";return[ue.LINEAR,ue.RADIAL].includes(e.type)&&(t=e.colorsteps.map(i=>``).join("")),{innerHTML:`
      ${t}
      `}}template(){var{label:e,simple:t}=this.state,i=e?"has-label":"";return` -
      + `}[ne("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}getColorString(){var e="";return this.state.image instanceof yr&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[G("$gradientEditor")](){var e;return((e=this.state.image)==null?void 0:e.type)===F.URL?"":R("FillEditor",{ref:"$g",value:`${this.state.image}`,index:this.state.selectColorStepIndex,onchange:"changeFillEditor"})}[M("updateFillEditor")](e,t=void 0){this.state.image=it(e)?at.parseImage(e):e,t&&(this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(r=>r.color===t.color&&r.percent===t.percent),this.children.$color.setValue(t.color)),this.refresh()}[Z("changeFillEditor")](e){this.state.image=it(e)?at.parseImage(e):e,this.updateTitle(),this.updateData()}[Z("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[Z("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[Z("changeImageUrl")](e){this.state.image&&(this.state.image.reset({url:e}),this.trigger("changeFillEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[M("showFillPickerPopup")](e,t,r){e.changeEvent=e.changeEvent||"changeFillPopup",e.params=t,this.showByRect(this.makeRect(248,560,r)),this.setState(e),this.updateTitle(),e.image.isGradient()&&this.trigger("selectColorStep",e.image.colorsteps[0].color),this.emit("showFillEditorView",{key:e.key})}[M("hideFillPickerPopup")](){this.hide(),this.emit("hideFillEditorView")}onClose(){this.emit("hideFillEditorView")}[M("selectColorStep")](e){this.children.$color.setValue(e)}[M("changeColorStep")](e={}){this.state.image.reset(b({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}var aF="";class a9 extends Y{initState(){return{index:this.props.index,label:this.props.label,simple:this.props.simple==="true",image:at.parseImage(this.props.value||this.props.image||"transparent")}}get fillId(){return this.id+"fill"}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.state.index)}getValue(){return this.state.image.toString()}setValue(e){this.setState({image:at.parseImage(e)})}[ne("$fillView")](){var e=this.state.image;return e?{innerHTML:e.toSVGString(this.fillId,{width:20,height:20,sizeType:"percent"})}:{innerHTML:""}}[ne("$fillColor")](){var e=this.state.image;return e?{fill:e.toFillValue(this.fillId)}:{fill:"transparent"}}[ne("$colors")](){var e=this.state.image;if(!e)return{fill:"transparent"};var t=e.type!="url"?`${e.colorsteps[0].color}`:"transparent";return[F.LINEAR,F.RADIAL].includes(e.type)&&(t=e.colorsteps.map(r=>``).join("")),{innerHTML:`
      ${t}
      `}}template(){var{label:e,simple:t}=this.state,r=e?"has-label":"";return` +
      ${e?``:""}
      @@ -1898,7 +1791,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}[se()](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showFillPickerPopup",{instance:this,key:this.props.key,changeEvent:"changeFillSingle",image:this.state.image},null,this.$el.rect())}[U("changeFillSingle")](e){this.updateData({image:ai.parseImage(e)}),this.refresh()}}var pre="";class $G extends ge{initState(){return{index:this.props.index,image:this.props.image,color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[$e("$miniView")](){const e=this.$context.selection.currentProject;let t;if(this.state.image.type===ue.URL){const i=e.getImageValueById(this.state.image.url);t=this.state.image.toString(i)}else t=this.state.image.toCSSString();return{style:{"background-image":t}}}template(){return` + `}[A()](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showFillPickerPopup",{instance:this,key:this.props.key,changeEvent:"changeFillSingle",image:this.state.image},null,this.$el.rect())}[M("changeFillSingle")](e){this.updateData({image:at.parseImage(e)}),this.refresh()}}var nF="";class n9 extends Y{initState(){return{index:this.props.index,image:this.props.image,color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ne("$miniView")](){const e=this.$context.selection.currentProject;let t;if(this.state.image.type===F.URL){const r=e.getImageValueById(this.state.image.url);t=this.state.image.toString(r)}else t=this.state.image.toCSSString();return{style:{"background-image":t}}}template(){return`
      @@ -1906,83 +1799,75 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}[se("$preview")](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showGradientPickerPopup",{instance:this,changeEvent:"changeGradientSingle",index:this.state.index,gradient:this.state.image},null,this.$el.rect())}[U("changeGradientSingle")](e){var i;e=Ot.parseImage(e);const t=(i=this.$context.selection.current.getBackgroundImage(this.state.index))==null?void 0:i.image;switch(t.type){case ue.RADIAL:case ue.REPEATING_RADIAL:e.reset({radialPosition:t.radialPosition||["50%","50%"],radialType:t.radialType||Ci.CIRCLE});break;case ue.CONIC:case ue.REPEATING_CONIC:e.reset({angle:t.angle||0,radialPosition:t.radialPosition||["50%","50%"]});break;case ue.LINEAR:case ue.REPEATING_LINEAR:case ue.STATIC:e.reset({angle:t.angle||0});break}this.updateData({image:e}),this.refresh()}}function Sb(n){n.registerElement({FillSingleEditor:MG,FillEditor:_G,GradientSingleEditor:$G}),n.registerAlias({"fill-single":"FillSingleEditor",fill:"FillEditor","gradient-single":"GradientSingleEditor"}),n.registerUI("popup",{FillPickerPopup:wG,GradientPickerPopup:SG})}var PG={title:"Conic",key:"conic",execute:function(n=42){return Mn(n).map(()=>{var e=Qr(45,55),t=Qr(45,55),i=Qr(0,360);return{gradient:`conic-gradient(from ${i}deg at ${e}% ${t}%, ${ti.createColorStep(2,360,"deg")})`}})}};const TG=["0deg","45deg","90deg"];var CG={title:"Linear",key:"linear",execute:function(n=42){return Mn(n).map(()=>({gradient:`linear-gradient(${cg(...TG)}, ${ti.createColorStep(2)})`}))}},EG={title:"Radial",key:"radial",execute:function(n=42){return Mn(n).map(()=>{var e="circle";return{gradient:`radial-gradient(${e}, ${ti.createColorStep(2)})`}})}},IG={title:"Random Conic",key:"random-conic",execute:function(n=42){return Mn(n).map(()=>({gradient:`conic-gradient(from 0deg at 50% 50%, ${ti.createColorStep(10,360,"deg")})`}))}};const LG=["0deg","45deg","90deg"];var kG={title:"Random Linear",key:"random-linear",execute:function(n=42){return Mn(n).map(()=>({gradient:`linear-gradient(${cg(...LG)}, ${ti.createColorStep(10)})`}))}},AG={title:"Random Radial",key:"random-radial",execute:function(n=42){return Mn(n).map(()=>({gradient:`radial-gradient(circle, ${ti.createColorStep(10)})`}))}},RG={title:"Repeat Conic",key:"repeat-conic",execute:function(n=42){return Mn(n).map(()=>({gradient:`repeating-conic-gradient(from 0deg at 0% 50%, ${ti.createRepeatColorStep(10,"10deg")})`}))}};const OG=["0deg","45deg","90deg"];var zG={title:"Repeat Linear",key:"repeat-linear",execute:function(n=42){return Mn(n).map(()=>({gradient:`repeating-linear-gradient(${cg(...OG)}, ${ti.createRepeatColorStep(2,"10px")})`}))}},VG={title:"Repeat Radial",key:"repeat-radial",execute:function(n=42){return Mn(n).map(()=>{var e="circle";return{gradient:`repeating-radial-gradient(${e}, ${ti.createRepeatColorStep(3,"6px")})`}})}},wb=[CG,kG,zG,EG,AG,VG,PG,IG,RG],fre="";const DG=wb.map(n=>({value:n.key,text:n.title}));class FG extends jt{getTitle(){return this.$i18n("gradient.asset.property.title")}initState(){return{mode:"grid",preset:"linear"}}getTools(){return'
      '}[ve("$tools")](){return W("SelectEditor",{ref:"$preset",key:"preset",value:this.state.preset,options:DG,onchange:"changePreset"})}[Me("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--gradient-assets-property"}[U(kt)+Ft(100)](){this.show()}getBody(){return` -
      -
      -
      - `}[on("$gradientList .gradient-item")](e){const t=e.$dt.attr("data-gradient");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/gradient",t)}[ve("$gradientList")](){var e=wb.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>`
      -
      -
      -
      -
      `);return e.edit&&t.push(`
      ${re("add")}
      `),t}executeGradient(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshGradientAssets")):window.alert("Please select a project.")}[se("$gradientList .add-gradient-item")](){this.executeGradient(e=>{e.createGradient({gradient:en.random(),name:"",variable:""})})}[se("$gradientList .preview")](e){var t=e.$dt.closest("gradient-item"),i=t.attr("data-gradient");this.$commands.emit("drop.asset",{gradient:i})}}function NG(n){n.registerElement({GradientAssetsProperty:FG})}var gre="",Jg=["circle","circle farthest-corner","circle closest-side","circle closest-corner","circle farthest-side","ellipse","ellipse farthest-corner","ellipse closest-side","ellipse closest-corner","ellipse farthest-side"],Qg=["no-repeat","repeat","repeat-x","repeat-y","space","round"];const Ph=20;class BG extends ge{initializeData(){const e=this.$context.selection.current.backgroundImage,t=hn(e);this.state.backgroundImages=Ot.parseStyle(t),this.state.backImages=Ot.parseStyle(t);const i=this.$context.selection.current;this.state.gradient=this.state.backImages[this.state.index],this.state.contentBox=i.contentBox,this.state.backgroundImageMatrix=i.createBackgroundImageMatrix(this.state.index)}updateData(){var e=ei(Ot.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:e}))}}class jG extends BG{[qe("$el .step-point")+at("moveStepPoint")+lt("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.backgroundImages[this.state.index].image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const i=(e<0?-1:1)*Math.ceil(Ne([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case Je.LINEAR:break;case Je.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+i,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+i,1);break}this.updateData()}makeTimingString(e){switch(e.name){case Je.LINEAR:return"";case Je.EASE:case Je.EASE_IN:case Je.EASE_OUT:case Je.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:i}=this.localColorStep;switch(i.name){case Je.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start";break;case Je.LINEAR:break;case Je.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:i.d}],changeEvent:(r,s)=>{this.localColorStep.timing=dr(`path(${s})`).parsed,this.updateData()}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(i)}],changeEvent:(r,s)=>{this.localColorStep.timing=dr(s).parsed,this.updateData()}}),this.$el.toggleClass("dragging",!1);return}}this.updateData(),this.$el.toggleClass("dragging",!1)}}class GG extends jG{[qe("$el .resizer")+an+at("calculateMovedResizer")+lt("calculateMovedEndResizer")+St](e){this.state.$target=e.$dt,this.$el.toggleClass("dragging",!0),this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e),this.isShiftKey=e.shiftKey}calculateMovedResizer(){const e=this.$viewport.getWorldPosition(),t=vr(this.initMousePoint),i=e,r=this.$context.selection.current.absoluteMatrixInverse,[s,a]=Xe([t,i],r),o=ft([],a,s),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x,l.y,this.state.contentBox,o[0],o[1],{shiftKey:this.$config.get("bodyEvent").shiftKey});this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y,width:h.width,height:h.height}),this.updateData()}calculateMovedEndResizer(){this.updateData(),this.$el.toggleClass("dragging",!1)}[qe("$el .back-rect")+an+at("calculateMovedRect")+lt("calculateMovedEndRect")+St](e){this.state.$target=e.$dt,this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e)}calculateMovedRect(){const e=this.$viewport.getWorldPosition(),t=vr(this.initMousePoint),i=e,r=this.$context.selection.current.absoluteMatrixInverse,[s,a]=Xe([t,i],r),o=ft([],a,s),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x+o[0],l.y+o[1],this.state.contentBox);this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y}),this.updateData()}calculateMovedEndRect(e,t){if(e==0&&t===0){const i=Qg.indexOf(this.state.gradient.repeat);this.state.backgroundImages[this.state.index].repeat=Qg[(i+1)%Qg.length]}this.updateData()}}class HG extends GG{[qe("$el .gradient-angle .rotate")+an+at("calculateMovedAngle")+lt("calculatedMovedEndAngle")+St](e){this.state.$target=e.$dt,this.initializeData(),this.$el.toggleClass("dragging",!0),this.state.centerX=+this.state.$target.data("center-x"),this.state.centerY=+this.state.$target.data("center-y"),this.state.startX=+this.state.$target.attr("cx"),this.state.startY=+this.state.$target.attr("cy"),this.state.$target.toggleClass("moved")}calculateMovedAngle(e,t){const i=[this.state.centerX,this.state.centerY,0],r=[this.state.startX,this.state.startY,0],a=Xf(r,i,[e,t,0]);let o=Math.floor(this.state.gradient.image.angle+a);this.$config.get("bodyEvent").shiftKey&&(o-=o%this.$config.get("fixed.gradient.angle")),this.state.backgroundImages[this.state.index].image.angle=o,this.updateData()}calculatedMovedEndAngle(){this.state.$target.toggleClass("moved"),this.$el.toggleClass("dragging",!1),this.updateData()}}class UG extends HG{[Pr("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.lastBackgroundMatrix.backgroundImage.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,i=this.state.lastBackgroundMatrix.backgroundImage.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&(a=i.insertColorStep(r.percent+(100-r.percent)/2)),this.updateColorStepStatus(i,a)}prependColorStep(e){const t=e-1,i=this.state.lastBackgroundMatrix.backgroundImage.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&(a=i.insertColorStep(r.percent)),this.updateColorStepStatus(i,a)}[qe("$el .colorstep")+at("moveColorStep")+lt("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const i=this.state.backgroundImageMatrix;switch(i.backgroundImage.image.type){case ue.LINEAR:case ue.REPEATING_LINEAR:this.centerPosition=this.$viewport.applyVertex(i.centerPosition),this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint),this.screenXY=this.$viewport.applyVertex(i.colorsteps[this.$targetIndex].pos),this.rotateInverse=cr(-this.state.gradient.image.angle,this.centerPosition);break;case ue.RADIAL:case ue.REPEATING_RADIAL:this.centerPosition=this.$viewport.applyVertex(i.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint),this.screenXY=this.$viewport.applyVertex(i.colorsteps[this.$targetIndex].pos);const r=ft([],this.endPoint,this.startPoint),s=li(r[0],r[1])-180;this.rotateInverse=cr(-s,this.centerPosition);break;case ue.CONIC:case ue.REPEATING_CONIC:this.centerPosition=this.$viewport.applyVertex(i.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(i.shapePoint),this.newStartPoint=ft([],this.startPoint,this.centerPosition),this.newStartAngle=li(this.newStartPoint[0],this.newStartPoint[1]);const a=+t.data("x"),o=+t.data("y");this.screenXY=[a,o,0],this.endPoint=this.$viewport.applyVertex(i.endPoint),this.rotateInverse=Ki();break}}moveColorStep(e,t){if(this.state.altKey)return;const i=_t([],this.screenXY,[e,t,0]),[r,s,a]=Xe([this.startPoint,this.endPoint,i],this.rotateInverse),o=this.state.backgroundImageMatrix;let l=0,c=0;switch(o.backgroundImage.image.type){case ue.LINEAR:case ue.REPEATING_LINEAR:var[u,p,f]=[r[1],s[1],a[1]],g=Math.abs(u-p);if(uf)l=Math.abs(f-u)/g*100;else{var h=Math.abs(u-f),d=Math.abs(p-f);l=h/(d+h)*100}l=Math.max(0,Math.min(100,l)),c=Ne(this.startPoint,this.endPoint);break;case ue.RADIAL:case ue.REPEATING_RADIAL:var[u,p,f]=[r[0],s[0],a[0]],g=Math.abs(u-p);fp?l=Math.abs(f-u)/g*100:l=(f-u)/g*100,l=Math.max(0,Math.min(100,l)),c=Ne(this.startPoint,this.endPoint);break;case ue.CONIC:case ue.REPEATING_CONIC:const x=ft([],i,this.centerPosition);let S=li(x[0],x[1]);this.$config.get("bodyEvent").shiftKey&&(S-=S%this.$config.get("fixed.gradient.angle")),l=(S-this.newStartAngle)/360*100,l=(l+100)%100,c=100;break}const m=this.state.gradient.image;m.colorsteps[this.$targetIndex].setValue(l,c);const v={color:m.colorsteps[this.$targetIndex].color,percent:m.colorsteps[this.$targetIndex].percent},b=this.state.backgroundImages[this.state.index].image;b.colorsteps=m.colorsteps.map(x=>x),b.sortColorStep(),this.emit("updateGradientEditor",b,v);var _=ei(Ot.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:_}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const r=this.state.backgroundImages[this.state.index].image;r.colorsteps[this.$targetIndex].toggleTiming();const s={color:r.colorsteps[this.$targetIndex].color,percent:r.colorsteps[this.$targetIndex].percent};this.emit("updateGradientEditor",r,s);var i=ei(Ot.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:i}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:i,percent:r}=e.colorsteps[t]||{};this.emit("updateGradientEditor",e,{color:i,percent:r}),this.state.backgroundImages[this.state.index].image=e;var s=ei(Ot.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:s})),this.state.hoverColorStep=null}[qe("$el .area-line")](){const e=this.state.lastBackgroundMatrix.backgroundImage.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Lc("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[lo("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),i=this.state.lastBackgroundMatrix.backgroundImage.image;let r,s,a;switch(i.type){case ue.LINEAR:case ue.REPEATING_LINEAR:[r,s,a]=Xe([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var d=0,[o,l,c]=[r[1],s[1],a[1]],h=Math.abs(o-l);if(oc)d=Math.abs(c-o)/h*100;else{const m=Math.abs(o-c),v=Math.abs(l-c);d=m/(v+m)*100}this.state.hoverColorStep=this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(d);break;case ue.RADIAL:case ue.REPEATING_RADIAL:[r,s,a]=[this.state.startPoint,this.state.endPoint,t];var d=0,[o,l,c]=[r[0],s[0],a[0]],h=Math.abs(o-l);c{this.localColorStep.timing=Xt(`path(${a})`).parsed,this.updateData()}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(r)}],changeEvent:(i,a)=>{this.localColorStep.timing=Xt(a).parsed,this.updateData()}}),this.$el.toggleClass("dragging",!1);return}}this.updateData(),this.$el.toggleClass("dragging",!1)}}class h9 extends c9{[me("$el .resizer")+_r+xe("calculateMovedResizer")+Se("calculateMovedEndResizer")+Ve](e){this.state.$target=e.$dt,this.$el.toggleClass("dragging",!0),this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e),this.isShiftKey=e.shiftKey}calculateMovedResizer(){const e=this.$viewport.getWorldPosition(),t=Yt(this.initMousePoint),r=e,i=this.$context.selection.current.absoluteMatrixInverse,[a,n]=le([t,r],i),o=_e([],n,a),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x,l.y,this.state.contentBox,o[0],o[1],{shiftKey:this.$config.get("bodyEvent").shiftKey});this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y,width:h.width,height:h.height}),this.updateData()}calculateMovedEndResizer(){this.updateData(),this.$el.toggleClass("dragging",!1)}[me("$el .back-rect")+_r+xe("calculateMovedRect")+Se("calculateMovedEndRect")+Ve](e){this.state.$target=e.$dt,this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e)}calculateMovedRect(){const e=this.$viewport.getWorldPosition(),t=Yt(this.initMousePoint),r=e,i=this.$context.selection.current.absoluteMatrixInverse,[a,n]=le([t,r],i),o=_e([],n,a),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x+o[0],l.y+o[1],this.state.contentBox);this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y}),this.updateData()}calculateMovedEndRect(e,t){if(e==0&&t===0){const r=nh.indexOf(this.state.gradient.repeat);this.state.backgroundImages[this.state.index].repeat=nh[(r+1)%nh.length]}this.updateData()}}class d9 extends h9{[me("$el .gradient-angle .rotate")+_r+xe("calculateMovedAngle")+Se("calculatedMovedEndAngle")+Ve](e){this.state.$target=e.$dt,this.initializeData(),this.$el.toggleClass("dragging",!0),this.state.centerX=+this.state.$target.data("center-x"),this.state.centerY=+this.state.$target.data("center-y"),this.state.startX=+this.state.$target.attr("cx"),this.state.startY=+this.state.$target.attr("cy"),this.state.$target.toggleClass("moved")}calculateMovedAngle(e,t){const r=[this.state.centerX,this.state.centerY,0],i=[this.state.startX,this.state.startY,0],n=rc(i,r,[e,t,0]);let o=Math.floor(this.state.gradient.image.angle+n);this.$config.get("bodyEvent").shiftKey&&(o-=o%this.$config.get("fixed.gradient.angle")),this.state.backgroundImages[this.state.index].image.angle=o,this.updateData()}calculatedMovedEndAngle(){this.state.$target.toggleClass("moved"),this.$el.toggleClass("dragging",!1),this.updateData()}}class u9 extends d9{[er("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.lastBackgroundMatrix.backgroundImage.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,r=this.state.lastBackgroundMatrix.backgroundImage.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&(n=r.insertColorStep(i.percent+(100-i.percent)/2)),this.updateColorStepStatus(r,n)}prependColorStep(e){const t=e-1,r=this.state.lastBackgroundMatrix.backgroundImage.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&(n=r.insertColorStep(i.percent)),this.updateColorStepStatus(r,n)}[me("$el .colorstep")+xe("moveColorStep")+Se("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const r=this.state.backgroundImageMatrix;switch(r.backgroundImage.image.type){case F.LINEAR:case F.REPEATING_LINEAR:this.centerPosition=this.$viewport.applyVertex(r.centerPosition),this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint),this.screenXY=this.$viewport.applyVertex(r.colorsteps[this.$targetIndex].pos),this.rotateInverse=Ut(-this.state.gradient.image.angle,this.centerPosition);break;case F.RADIAL:case F.REPEATING_RADIAL:this.centerPosition=this.$viewport.applyVertex(r.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint),this.screenXY=this.$viewport.applyVertex(r.colorsteps[this.$targetIndex].pos);const i=_e([],this.endPoint,this.startPoint),a=ot(i[0],i[1])-180;this.rotateInverse=Ut(-a,this.centerPosition);break;case F.CONIC:case F.REPEATING_CONIC:this.centerPosition=this.$viewport.applyVertex(r.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(r.shapePoint),this.newStartPoint=_e([],this.startPoint,this.centerPosition),this.newStartAngle=ot(this.newStartPoint[0],this.newStartPoint[1]);const n=+t.data("x"),o=+t.data("y");this.screenXY=[n,o,0],this.endPoint=this.$viewport.applyVertex(r.endPoint),this.rotateInverse=Vt();break}}moveColorStep(e,t){if(this.state.altKey)return;const r=we([],this.screenXY,[e,t,0]),[i,a,n]=le([this.startPoint,this.endPoint,r],this.rotateInverse),o=this.state.backgroundImageMatrix;let l=0,c=0;switch(o.backgroundImage.image.type){case F.LINEAR:case F.REPEATING_LINEAR:var[d,v,g]=[i[1],a[1],n[1]],y=Math.abs(d-v);if(dg)l=Math.abs(g-d)/y*100;else{var h=Math.abs(d-g),u=Math.abs(v-g);l=h/(u+h)*100}l=Math.max(0,Math.min(100,l)),c=ae(this.startPoint,this.endPoint);break;case F.RADIAL:case F.REPEATING_RADIAL:var[d,v,g]=[i[0],a[0],n[0]],y=Math.abs(d-v);gv?l=Math.abs(g-d)/y*100:l=(g-d)/y*100,l=Math.max(0,Math.min(100,l)),c=ae(this.startPoint,this.endPoint);break;case F.CONIC:case F.REPEATING_CONIC:const I=_e([],r,this.centerPosition);let O=ot(I[0],I[1]);this.$config.get("bodyEvent").shiftKey&&(O-=O%this.$config.get("fixed.gradient.angle")),l=(O-this.newStartAngle)/360*100,l=(l+100)%100,c=100;break}const P=this.state.gradient.image;P.colorsteps[this.$targetIndex].setValue(l,c);const S={color:P.colorsteps[this.$targetIndex].color,percent:P.colorsteps[this.$targetIndex].percent},V=this.state.backgroundImages[this.state.index].image;V.colorsteps=P.colorsteps.map(I=>I),V.sortColorStep(),this.emit("updateGradientEditor",V,S);var E=Je(Be.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:E}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const i=this.state.backgroundImages[this.state.index].image;i.colorsteps[this.$targetIndex].toggleTiming();const a={color:i.colorsteps[this.$targetIndex].color,percent:i.colorsteps[this.$targetIndex].percent};this.emit("updateGradientEditor",i,a);var r=Je(Be.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:r}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:r,percent:i}=e.colorsteps[t]||{};this.emit("updateGradientEditor",e,{color:r,percent:i}),this.state.backgroundImages[this.state.index].image=e;var a=Je(Be.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:a})),this.state.hoverColorStep=null}[me("$el .area-line")](){const e=this.state.lastBackgroundMatrix.backgroundImage.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Aa("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[Ps("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),r=this.state.lastBackgroundMatrix.backgroundImage.image;let i,a,n;switch(r.type){case F.LINEAR:case F.REPEATING_LINEAR:[i,a,n]=le([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var u=0,[o,l,c]=[i[1],a[1],n[1]],h=Math.abs(o-l);if(oc)u=Math.abs(c-o)/h*100;else{const P=Math.abs(o-c),S=Math.abs(l-c);u=P/(S+P)*100}this.state.hoverColorStep=this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(u);break;case F.RADIAL:case F.REPEATING_RADIAL:[i,a,n]=[this.state.startPoint,this.state.endPoint,t];var u=0,[o,l,c]=[i[0],a[0],n[0]],h=Math.abs(o-l);c=180?1:0)&&(u-=180);var[f]=Xe([Ae([],e,_t([],e,[-1,0,0]),c)],cr(u,e));switch(o.name){case Je.LINEAR:return"";case Je.STEPS:return D(Yi,null,D("circle",{class:"step-point","data-colorstep-index":t,cx:f[0],cy:f[1],r:7}),D("text",{x:f[0],y:f[1],dy:4,"text-anchor":"middle"},o.count));default:return D(Yi,null,D("circle",{class:"step-point","data-colorstep-index":t,cx:f[0],cy:f[1],r:7}),D("text",{x:f[0],y:f[1],dy:4,"text-anchor":"middle"},l))}}makeTimingArea(e,t,i,r){const s=i.stickScreenXYInEnd,a=t.stickScreenXYInStart;return D("g",{class:"timing-area"},t.timing.name===Je.LINEAR?"":D("path",{class:"timing-path",d:` - M ${s[0]} ${s[1]} - L ${a[0]} ${a[1]} - `}),this.makeTimingCircle(e,t,i,r))}getRealAngle(e){return e<0?360+e:e}makeConicTimingArea(e,t,i,r,s,a,o){const l=r.stickScreenXY,c=i.stickScreenXY,h=li(...ft([],l,e))+o,d=li(...ft([],c,e))+o,u=360-h,f=Math.abs(u+d)%360>=180?1:0;return D("g",{class:"timing-area"},i.timing.name===Je.LINEAR?"":D(Yi,null,D("path",{class:"timing-path",d:` + ${r+e.x1*t-a} ${i+t-e.y1*t-a} + ${r+e.x2*t-a} ${i+t-e.y2*t-a} + ${r+t-a} ${i+0-a} + `})}}makeTimingCircle(e,t,r){const i=r.stickScreenXYInEnd,a=t.stickScreenXYInStart,{timing:n,timingCount:o}=t;let l;switch(n.name){case ue.LINEAR:return"";case ue.STEPS:return l=te([],i,a,.5),C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),C("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},n.count));default:return l=te([],i,a,.5),C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),C("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},o))}}makeConicTimingCircle(e,t,r,i){const a=i.stickScreenXY,n=r.stickScreenXY,{timing:o,timingCount:l}=r,c=ae(a,e),h=ot(..._e([],a,e)),u=ot(..._e([],n,e));let d=this.getRealAngle(h+(u-h)/2);(Math.abs(u-h)%360>=180?1:0)&&(d-=180);var[g]=le([te([],e,we([],e,[-1,0,0]),c)],Ut(d,e));switch(o.name){case ue.LINEAR:return"";case ue.STEPS:return C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":t,cx:g[0],cy:g[1],r:7}),C("text",{x:g[0],y:g[1],dy:4,"text-anchor":"middle"},o.count));default:return C(Lt,null,C("circle",{class:"step-point","data-colorstep-index":t,cx:g[0],cy:g[1],r:7}),C("text",{x:g[0],y:g[1],dy:4,"text-anchor":"middle"},l))}}makeTimingArea(e,t,r,i){const a=r.stickScreenXYInEnd,n=t.stickScreenXYInStart;return C("g",{class:"timing-area"},t.timing.name===ue.LINEAR?"":C("path",{class:"timing-path",d:` + M ${a[0]} ${a[1]} + L ${n[0]} ${n[1]} + `}),this.makeTimingCircle(e,t,r,i))}getRealAngle(e){return e<0?360+e:e}makeConicTimingArea(e,t,r,i,a,n,o){const l=i.stickScreenXY,c=r.stickScreenXY,h=ot(..._e([],l,e))+o,u=ot(..._e([],c,e))+o,d=360-h,g=Math.abs(d+u)%360>=180?1:0;return C("g",{class:"timing-area"},r.timing.name===ue.LINEAR?"":C(Lt,null,C("path",{class:"timing-path",d:` M ${l[0]} ${l[1]} - A ${a} ${a} 0 ${f} 1 ${c[0]} ${c[1]} - `})),this.makeConicTimingCircle(e,t,i,r,a))}makeGradientPoint(e,t,i,r,s){const a=Ph,o=ft([],i,t),l=li(o[0],o[1])-180;return D(Yi,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],Ph)),e.map((c,h)=>D("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},D("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:a,height:a,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,a,c.stickScreenXY[0],c.stickScreenXY[1]))),D("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),D("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&D("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&D("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeConicGradientPoint(e,t,i,r,s,a,o){const l=Ph;return D(Yi,null,e.map((c,h)=>h===0?"":this.makeConicTimingArea(t,h,c,e[h-1],Ph,a,o)),e.map((c,h)=>{const d=li(...ft([],c.screenXY,t))-180;return D("g",{transform:`rotate(${d} ${c.screenXY[0]} ${c.screenXY[1]})`},D("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.screenXY[0]-l/2,y:c.screenXY[1]-l/2,width:l,height:l,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeConicTimingLine(c.timing,l,c.screenXY[0],c.screenXY[1],o))}),D("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),D("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&D("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&D("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeGradientRect(e){const t=this.$viewport.applyVerties(e.backVerties);return D(Yi,null,D("div",{class:"gradient-rect"},D("svg",null,D("path",{class:"back-rect",d:` + A ${n} ${n} 0 ${g} 1 ${c[0]} ${c[1]} + `})),this.makeConicTimingCircle(e,t,r,i,n))}makeGradientPoint(e,t,r,i,a){const n=Cn,o=_e([],r,t),l=ot(o[0],o[1])-180;return C(Lt,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],Cn)),e.map((c,h)=>C("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},C("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:n,height:n,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,n,c.stickScreenXY[0],c.stickScreenXY[1]))),C("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),C("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&C("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&C("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeConicGradientPoint(e,t,r,i,a,n,o){const l=Cn;return C(Lt,null,e.map((c,h)=>h===0?"":this.makeConicTimingArea(t,h,c,e[h-1],Cn,n,o)),e.map((c,h)=>{const u=ot(..._e([],c.screenXY,t))-180;return C("g",{transform:`rotate(${u} ${c.screenXY[0]} ${c.screenXY[1]})`},C("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.screenXY[0]-l/2,y:c.screenXY[1]-l/2,width:l,height:l,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeConicTimingLine(c.timing,l,c.screenXY[0],c.screenXY[1],o))}),C("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),C("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&C("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&C("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeGradientRect(e){const t=this.$viewport.applyVerties(e.backVerties);return C(Lt,null,C("div",{class:"gradient-rect"},C("svg",null,C("path",{class:"back-rect",d:` M ${t[0][0]} ${t[0][1]} L ${t[1][0]} ${t[1][1]} L ${t[2][0]} ${t[2][1]} L ${t[3][0]} ${t[3][1]} Z - `}))),D("div",{class:"resizer","data-direction":"bottom-right",style:{left:y.px(t[2][0]),top:y.px(t[2][1])}}))}makeCenterPoint(e){const{image:t}=e.backgroundImage;switch(t.type){case ue.LINEAR:case ue.REPEATING_LINEAR:return this.makeLinearCenterPoint(e);case ue.RADIAL:case ue.REPEATING_RADIAL:return this.makeRadialCenterPoint(e);case ue.CONIC:case ue.REPEATING_CONIC:return this.makeConicCenterPoint(e)}return""}makeConicCenterPoint(e){const{image:t}=e.backgroundImage;let i,r,s,a,o,l;i=this.$viewport.applyVertex(e.radialCenterPosition),s=this.$viewport.applyVertex(e.startPoint),a=this.$viewport.applyVertex(e.endPoint),o=this.$viewport.applyVertex(e.shapePoint);let c=Ne(s,a)/2;c<50&&(c=50),l=e.colorsteps.map(p=>{p.screenXY=this.$viewport.applyVertex(p.pos);const f=Ne(p.screenXY,s);fc&&(p.screenXY=Ae([],s,p.screenXY,(c+20)/f)),p.stickScreenXY=vr(p.screenXY);const g=ft([],p.screenXY,s);return p.angle=li(g[0],g[1]),p}),i=this.$viewport.applyVertex(e.radialCenterPosition);const h=this.$viewport.applyVertex(e.shapePoint);r=Ae([],i,Ae([],i,h,1/Ne(i,h)),c+50);const d=Ae([],r,i,1);let u=null;if(this.state.hoverColorStep){const p=this.state.hoverColorStep.percent*3.6,f=Ne(i,o);[u]=Xe([Ae([],i,o,(c+20)/f)],cr(p,i))}return D(Yi,null,D("div",{class:"gradient-position center","data-radial-type":t.radialType,style:{left:y.px(i[0]),top:y.px(i[1])}}),D("svg",{class:"gradient-angle"},D("circle",{class:"size",cx:s[0],cy:s[1],r:c}),D("circle",{class:"area-line",cx:s[0],cy:s[1],r:c}),D("path",{class:"stick",d:` - M ${d[0]} ${d[1]} - L ${r[0]} ${r[1]} - `}),D("circle",{class:"rotate",cx:r[0],cy:r[1],r:"7","data-center-x":i[0],"data-center-y":i[1]}),this.makeConicGradientPoint(l,s,a,o,u,c+20,t.angle)))}makeRadialCenterPoint(e){let t,i,r,s;i=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),s=this.$viewport.applyVertex(e.shapePoint),t=this.makeStickPoint(e.colorsteps,i,r);let a=null;return this.state.hoverColorStep&&(a=Ae([],i,r,this.state.hoverColorStep.percent/100)),D(Yi,null,D("svg",{class:"gradient-radial-line"},D("path",{d:` - M ${i[0]} ${i[1]} - L ${r[0]} ${r[1]} - `,class:"area-line"}),D("path",{d:` - M ${i[0]} ${i[1]} - L ${r[0]} ${r[1]} - `,class:"start-end-line"}),D("path",{d:` - M ${i[0]} ${i[1]} - L ${s[0]} ${s[1]} - `,class:"shape-line"}),this.makeGradientPoint(t,i,r,s,a)))}makeStickPoint(e,t,i){const r=Ph,s=ft([],i,t),a=li(s[0],s[1])-180,o=cr(-a,t),l=ir([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=Xe([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=Xe([[h[0]-r/2,h[1]-r*1.5,0],[h[0]-r/2,h[1]-r*1.5+r/2,0],[h[0]+r/2,h[1]-r*1.5+r/2,0]],l),c})}makeLinearCenterPoint(e){let t,i,r,s,a,o,l;r=this.$viewport.applyVertex(e.startPoint),s=this.$viewport.applyVertex(e.endPoint),a=this.$viewport.applyVertex(e.areaStartPoint),o=this.$viewport.applyVertex(e.areaEndPoint),t=this.$viewport.applyVertex(e.centerPosition),l=this.makeStickPoint(e.colorsteps,r,s);const c=Ne(t,s),[h]=Xe([s],cr(90,Ae([],r,s,.5)));i=Ae([],t,Ae([],t,h,1/Ne(t,h)),c+20);const d=Ae([],i,t,20/(c+20));let u=null;return this.state.hoverColorStep&&(u=Ae([],r,s,this.state.hoverColorStep.percent/100)),D("svg",{class:"gradient-angle"},D("path",{class:"stick",d:` - M ${d[0]} ${d[1]} + `}))),C("div",{class:"resizer","data-direction":"bottom-right",style:{left:p.px(t[2][0]),top:p.px(t[2][1])}}))}makeCenterPoint(e){const{image:t}=e.backgroundImage;switch(t.type){case F.LINEAR:case F.REPEATING_LINEAR:return this.makeLinearCenterPoint(e);case F.RADIAL:case F.REPEATING_RADIAL:return this.makeRadialCenterPoint(e);case F.CONIC:case F.REPEATING_CONIC:return this.makeConicCenterPoint(e)}return""}makeConicCenterPoint(e){const{image:t}=e.backgroundImage;let r,i,a,n,o,l;r=this.$viewport.applyVertex(e.radialCenterPosition),a=this.$viewport.applyVertex(e.startPoint),n=this.$viewport.applyVertex(e.endPoint),o=this.$viewport.applyVertex(e.shapePoint);let c=ae(a,n)/2;c<50&&(c=50),l=e.colorsteps.map(v=>{v.screenXY=this.$viewport.applyVertex(v.pos);const g=ae(v.screenXY,a);gc&&(v.screenXY=te([],a,v.screenXY,(c+20)/g)),v.stickScreenXY=Yt(v.screenXY);const y=_e([],v.screenXY,a);return v.angle=ot(y[0],y[1]),v}),r=this.$viewport.applyVertex(e.radialCenterPosition);const h=this.$viewport.applyVertex(e.shapePoint);i=te([],r,te([],r,h,1/ae(r,h)),c+50);const u=te([],i,r,1);let d=null;if(this.state.hoverColorStep){const v=this.state.hoverColorStep.percent*3.6,g=ae(r,o);[d]=le([te([],r,o,(c+20)/g)],Ut(v,r))}return C(Lt,null,C("div",{class:"gradient-position center","data-radial-type":t.radialType,style:{left:p.px(r[0]),top:p.px(r[1])}}),C("svg",{class:"gradient-angle"},C("circle",{class:"size",cx:a[0],cy:a[1],r:c}),C("circle",{class:"area-line",cx:a[0],cy:a[1],r:c}),C("path",{class:"stick",d:` + M ${u[0]} ${u[1]} + L ${i[0]} ${i[1]} + `}),C("circle",{class:"rotate",cx:i[0],cy:i[1],r:"7","data-center-x":r[0],"data-center-y":r[1]}),this.makeConicGradientPoint(l,a,n,o,d,c+20,t.angle)))}makeRadialCenterPoint(e){let t,r,i,a;r=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),a=this.$viewport.applyVertex(e.shapePoint),t=this.makeStickPoint(e.colorsteps,r,i);let n=null;return this.state.hoverColorStep&&(n=te([],r,i,this.state.hoverColorStep.percent/100)),C(Lt,null,C("svg",{class:"gradient-radial-line"},C("path",{d:` + M ${r[0]} ${r[1]} L ${i[0]} ${i[1]} - `}),D("circle",{class:"size",cx:t[0],cy:t[1],r:Ne(t,r)}),D("circle",{class:"rotate",cx:i[0],cy:i[1],r:"7","data-center-x":t[0],"data-center-y":t[1]}),D("path",{d:` - M ${a[0]} ${a[1]} - L ${o[0]} ${o[1]} - `,class:"area-line"}),D("path",{d:` + `,class:"area-line"}),C("path",{d:` M ${r[0]} ${r[1]} - L ${s[0]} ${s[1]} - `,class:"start-end-line"}),this.makeGradientPoint(l,r,s,null,u))}[ve("$el")+It](){const e=this.$context.selection.current;if(!e)return"";const t=e.createBackgroundImageMatrix(this.state.index);this.state.lastBackgroundMatrix=t;const i=t.backgroundImage.image;switch(i.type){case ue.LINEAR:case ue.REPEATING_LINEAR:this.state.centerPosition=this.$viewport.applyVertex(t.centerPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.rotateInverse=cr(-1*t.backgroundImage.image.angle,this.state.centerPosition);break;case ue.RADIAL:case ue.REPEATING_RADIAL:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint);break;case ue.CONIC:case ue.REPEATING_CONIC:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.shapePoint);break}return D("div",null,this.makeGradientRect(t),i.type===ue.STATIC||i.type===ue.IMAGE?null:this.makeCenterPoint(t))}}function Mb(n){n.registerUI("canvas.view",{GradientEditorView:WG})}var mre="";const $l=(n,e,t="base-line")=>``,XG=(n,e)=>$l(n,e),YG=(n,e)=>$l(n,e),$b=n=>``,Pb=(n,e=3,t="left")=>t==="left"?``:t==="right"?``:t==="up"?``:t==="down"?``:``;class KG extends ge{template(){return``}initState(){return{list:[]}}[$e("$guide")](){return{svgDiff:`${this.createGuideLine(this.state.list)}`}}createLayerLine(){return""}filterGuideLine(e){return e=e.filter(Boolean),e}createGuideLine(e){var t=[],i=[];e=this.filterGuideLine(e);for(var r=0,s=e.length;r0&&t.push($l(f,g,"dash-line")),m&&t.push($l(g,m,"dash-line"))),l==="y"&&(p>0&&t.push($l(f,g,"dash-line")),m&&t.push($l(g,m,"dash-line"))),l==="x"&&t.push(XG(g,f)),l==="y"&&t.push(YG(g,f)),this.state.hasVerties&&(t.push(Pb(f,3,"vertex")),t.push(Pb(g,3,"vertex"))),d&&(this.$context.selection.isOne&&this.$editor.isPointerDown||this.$context.selection.isMany&&!this.$editor.isPointerMove)&&t.push($b(this.$viewport.applyVerties(d))),u&&t.push($b(this.$viewport.applyVerties(u)))}return[...t,...i].join("")}removeGuideLine(){this.setState({list:[]})}setGuideLine(e,t=!1){this.setState({list:e,hasVerties:t})}refreshSmartGuides(e){if(this.$context.selection.isEmpty)return;const t=wn(this.$context.selection.verties);let i;if(e)i=e.map(a=>wn(a));else{const a=this.$context.snapManager.snapTargetLayers.map(o=>{const l=wn(o.verties);return{targetVerties:l,dist:Ne(l[4],t[4])}});a.sort((o,l)=>o.dist-l.dist),i=a.map(o=>o.targetVerties)}const r=i.map(a=>Mk(t,a));r.sort((a,o)=>a[3]-o[3]);const s=[r[0],r[1]].filter(Boolean);this.setGuideLine(s)}refreshSmartGuidesForVerties(e=0){let t=this.$context.selection.verties;t.length&&(t=[...t,Ae([],t[0],t[1],.5),Ae([],t[1],t[2],.5),Ae([],t[2],t[3],.5),Ae([],t[3],t[0],.5)]);const i=this.$context.snapManager.findGuide(t,e);this.setGuideLine(i,!0)}[U("removeGuideLine",kt)](){this.removeGuideLine()}[U("refreshGuideLineByTarget")](e=[]){return this.refreshSmartGuides(e)}get currentDistWithScale(){return 1/this.$viewport.scale}[U(si,da)](){this.refreshSmartGuidesForVerties(this.currentDistWithScale)}[U(Gi)](){this.$context.selection.hasChangedField("d","clip-path")||this.refreshSmartGuidesForVerties(this.currentDistWithScale)}}function Tb(n){n.registerUI("canvas.view",{GuideLineView:KG})}var vre="";class qG extends jt{afterRender(){this.show()}getTitle(){return"History"}getBody(){return` + L ${i[0]} ${i[1]} + `,class:"start-end-line"}),C("path",{d:` + M ${r[0]} ${r[1]} + L ${a[0]} ${a[1]} + `,class:"shape-line"}),this.makeGradientPoint(t,r,i,a,n)))}makeStickPoint(e,t,r){const i=Cn,a=_e([],r,t),n=ot(a[0],a[1])-180,o=Ut(-n,t),l=Dt([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=le([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=le([[h[0]-i/2,h[1]-i*1.5,0],[h[0]-i/2,h[1]-i*1.5+i/2,0],[h[0]+i/2,h[1]-i*1.5+i/2,0]],l),c})}makeLinearCenterPoint(e){let t,r,i,a,n,o,l;i=this.$viewport.applyVertex(e.startPoint),a=this.$viewport.applyVertex(e.endPoint),n=this.$viewport.applyVertex(e.areaStartPoint),o=this.$viewport.applyVertex(e.areaEndPoint),t=this.$viewport.applyVertex(e.centerPosition),l=this.makeStickPoint(e.colorsteps,i,a);const c=ae(t,a),[h]=le([a],Ut(90,te([],i,a,.5)));r=te([],t,te([],t,h,1/ae(t,h)),c+20);const u=te([],r,t,20/(c+20));let d=null;return this.state.hoverColorStep&&(d=te([],i,a,this.state.hoverColorStep.percent/100)),C("svg",{class:"gradient-angle"},C("path",{class:"stick",d:` + M ${u[0]} ${u[1]} + L ${r[0]} ${r[1]} + `}),C("circle",{class:"size",cx:t[0],cy:t[1],r:ae(t,i)}),C("circle",{class:"rotate",cx:r[0],cy:r[1],r:"7","data-center-x":t[0],"data-center-y":t[1]}),C("path",{d:` + M ${n[0]} ${n[1]} + L ${o[0]} ${o[1]} + `,class:"area-line"}),C("path",{d:` + M ${i[0]} ${i[1]} + L ${a[0]} ${a[1]} + `,class:"start-end-line"}),this.makeGradientPoint(l,i,a,null,d))}[G("$el")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=e.createBackgroundImageMatrix(this.state.index);this.state.lastBackgroundMatrix=t;const r=t.backgroundImage.image;switch(r.type){case F.LINEAR:case F.REPEATING_LINEAR:this.state.centerPosition=this.$viewport.applyVertex(t.centerPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.rotateInverse=Ut(-1*t.backgroundImage.image.angle,this.state.centerPosition);break;case F.RADIAL:case F.REPEATING_RADIAL:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint);break;case F.CONIC:case F.REPEATING_CONIC:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.shapePoint);break}return C("div",null,this.makeGradientRect(t),r.type===F.STATIC||r.type===F.IMAGE?null:this.makeCenterPoint(t))}}function g9(s){s.registerUI("canvas.view",{GradientEditorView:p9})}var lF="";const ma=(s,e,t="base-line")=>``,f9=(s,e)=>ma(s,e),m9=(s,e)=>ma(s,e),eg=s=>``,tg=(s,e=3,t="left")=>t==="left"?``:t==="right"?``:t==="up"?``:t==="down"?``:``;class v9 extends Y{template(){return``}initState(){return{list:[]}}[ne("$guide")](){return{svgDiff:`${this.createGuideLine(this.state.list)}`}}createLayerLine(){return""}filterGuideLine(e){return e=e.filter(Boolean),e}createGuideLine(e){var t=[],r=[];e=this.filterGuideLine(e);for(var i=0,a=e.length;i0&&t.push(ma(g,y,"dash-line")),P&&t.push(ma(y,P,"dash-line"))),l==="y"&&(v>0&&t.push(ma(g,y,"dash-line")),P&&t.push(ma(y,P,"dash-line"))),l==="x"&&t.push(f9(y,g)),l==="y"&&t.push(m9(y,g)),this.state.hasVerties&&(t.push(tg(g,3,"vertex")),t.push(tg(y,3,"vertex"))),u&&(this.$context.selection.isOne&&this.$editor.isPointerDown||this.$context.selection.isMany&&!this.$editor.isPointerMove)&&t.push(eg(this.$viewport.applyVerties(u))),d&&t.push(eg(this.$viewport.applyVerties(d)))}return[...t,...r].join("")}removeGuideLine(){this.setState({list:[]})}setGuideLine(e,t=!1){this.setState({list:e,hasVerties:t})}refreshSmartGuides(e){if(this.$context.selection.isEmpty)return;const t=Or(this.$context.selection.verties);let r;if(e)r=e.map(n=>Or(n));else{const n=this.$context.snapManager.snapTargetLayers.map(o=>{const l=Or(o.verties);return{targetVerties:l,dist:ae(l[4],t[4])}});n.sort((o,l)=>o.dist-l.dist),r=n.map(o=>o.targetVerties)}const i=r.map(n=>qS(t,n));i.sort((n,o)=>n[3]-o[3]);const a=[i[0],i[1]].filter(Boolean);this.setGuideLine(a)}refreshSmartGuidesForVerties(e=0){let t=this.$context.selection.verties;t.length&&(t=[...t,te([],t[0],t[1],.5),te([],t[1],t[2],.5),te([],t[2],t[3],.5),te([],t[3],t[0],.5)]);const r=this.$context.snapManager.findGuide(t,e);this.setGuideLine(r,!0)}[M("removeGuideLine",Oe)](){this.removeGuideLine()}[M("refreshGuideLineByTarget")](e=[]){return this.refreshSmartGuides(e)}get currentDistWithScale(){return 1/this.$viewport.scale}[M(st,Xi)](){this.refreshSmartGuidesForVerties(this.currentDistWithScale)}[M(Mt)](){this.$context.selection.hasChangedField("d","clip-path")||this.refreshSmartGuidesForVerties(this.currentDistWithScale)}}function y9(s){s.registerUI("canvas.view",{GuideLineView:v9})}var cF="";class b9 extends Ge{afterRender(){this.show()}getTitle(){return"History"}getBody(){return`
      - `}[ve("$body")+It](){return this.$editor.context.history.map((e,t)=>e==="-"?"
      -
      ":` + `}[G("$body")+Ee](){return this.$editor.context.history.map((e,t)=>e==="-"?"
      -
      ":`
      - ${t===this.$editor.context.history.currentIndex?We.arrowRight:""} + ${t===this.$editor.context.history.currentIndex?oe.arrowRight:""} ${e.message}
      - `)}[U("refreshHistoryList")](){this.refresh()}}function Cb(n){n.registerUI("inspector.tab.history",{HistoryProperty:qG})}var yre="";class ZG extends ge{template(){return D("div",{class:"elf--hover-view sepia(0.2)"},D("div",{class:"elf--hover-rect",ref:"$hoverRect"}))}checkModeView(){const e=this.$config.get("bodyEvent");return!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))||!Ze.create(e.target).closest("elf--page-container")?!1:this.$modeView.isCurrentMode(ha.CanvasView)&&this.$stateManager.isPointerUp}[Qt("bodyEvent")+Qe("checkModeView")](){var a,o,l;if(this.$config.true("set.move.control.point")){this.$context.selection.setHoverId(""),this.renderHoverLayer();return}const e=this.$context.selection.filteredLayers,t=this.$viewport.getWorldPosition(this.$config.get("bodyEvent"));let r=e.filter(c=>c.hasPoint(t[0],t[1])).filter(c=>c.isNot("artboard")),s=(a=r[0])==null?void 0:a.id;if(this.$context.selection.isEmpty)s=(o=r[0])==null?void 0:o.id;else if(this.$context.selection.isOne){const c=this.$context.selection.current.pathIds;r=r.filter(h=>c.includes(h.id)===!1||h.id===this.$context.selection.current.id),s=(l=r[0])==null?void 0:l.id}s?this.$context.selection.setHoverId(s)&&this.renderHoverLayer():(this.$context.selection.setHoverId(""),this.renderHoverLayer())}[Qt("set.move.control.point")](){this.renderHoverLayer()}[U("refreshHoverView")](e){this.$context.selection.setHoverId(e)&&this.renderHoverLayer()}[U(si,Gi)](){this.$context.selection.setHoverId(""),this.renderHoverLayer()}createVisiblePath(e){if(!e.is("boolean-path"))return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` + `)}[M("refreshHistoryList")](){this.refresh()}}function x9(s){s.registerUI("inspector.tab.history",{HistoryProperty:b9})}var hF="";class $9 extends Y{template(){return C("div",{class:"elf--hover-view sepia(0.2)"},C("div",{class:"elf--hover-rect",ref:"$hoverRect"}))}checkModeView(){const e=this.$config.get("bodyEvent");return!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))||!ge.create(e.target).closest("elf--page-container")?!1:this.$modeView.isCurrentMode(Wi.CanvasView)&&this.$stateManager.isPointerUp}[Tt("bodyEvent")+fe("checkModeView")](){var n,o,l;if(this.$config.true("set.move.control.point")){this.$context.selection.setHoverId(""),this.renderHoverLayer();return}const e=this.$context.selection.filteredLayers,t=this.$viewport.getWorldPosition(this.$config.get("bodyEvent"));let i=e.filter(c=>c.hasPoint(t[0],t[1])).filter(c=>c.isNot("artboard")),a=(n=i[0])==null?void 0:n.id;if(this.$context.selection.isEmpty)a=(o=i[0])==null?void 0:o.id;else if(this.$context.selection.isOne){const c=this.$context.selection.current.pathIds;i=i.filter(h=>c.includes(h.id)===!1||h.id===this.$context.selection.current.id),a=(l=i[0])==null?void 0:l.id}a?this.$context.selection.setHoverId(a)&&this.renderHoverLayer():(this.$context.selection.setHoverId(""),this.renderHoverLayer())}[Tt("set.move.control.point")](){this.renderHoverLayer()}[M("refreshHoverView")](e){this.$context.selection.setHoverId(e)&&this.renderHoverLayer()}[M(st,Mt)](){this.$context.selection.setHoverId(""),this.renderHoverLayer()}createVisiblePath(e){if(!e.is("boolean-path"))return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` {if(this.isMultiStyle(i.key))return this.getMultiStyle fill="none" /> - `}renderHoverLayer(){const e=this.$context.selection.hoverItems;if(e.length===0)this.refs.$hoverRect.updateDiff("");else{const t=e[0].verties,i=this.createPointerLine(this.$viewport.applyVerties(t)),r=this.createOffsetLine();this.refs.$hoverRect.updateDiff(i+r)}}getOffsetVerties(e,t){const i=e.verties,r=t.verties,s={},a=this.$viewport.applyVerties([[i[0][0],Ae([],i[0],i[3],.5)[1],0],[r[0][0],Ae([],i[0],i[3],.5)[1],0]]);var l=Ne(...a);l>0&&(s.left=a);const o=this.$viewport.applyVerties([[Ae([],i[0],i[1],.5)[0],i[1][1],0],[Ae([],i[0],i[1],.5)[0],r[1][1],0]]);var l=Ne(...o);return l>0&&(s.top=o),s}createOffsetLine(){const e=this.$context.selection.hoverItems[0]||this.$context.selection.current;if(!e||!e.parent||e.parent&&e.parent.is("project"))return"";if(this.$context.selection.isEmpty){const t=this.getOffsetVerties(e,e.parent);return` + `}renderHoverLayer(){const e=this.$context.selection.hoverItems;if(e.length===0)this.refs.$hoverRect.updateDiff("");else{const t=e[0].verties,r=this.createPointerLine(this.$viewport.applyVerties(t)),i=this.createOffsetLine();this.refs.$hoverRect.updateDiff(r+i)}}getOffsetVerties(e,t){const r=e.verties,i=t.verties,a={},n=this.$viewport.applyVerties([[r[0][0],te([],r[0],r[3],.5)[1],0],[i[0][0],te([],r[0],r[3],.5)[1],0]]);var l=ae(...n);l>0&&(a.left=n);const o=this.$viewport.applyVerties([[te([],r[0],r[1],.5)[0],r[1][1],0],[te([],r[0],r[1],.5)[0],i[1][1],0]]);var l=ae(...o);return l>0&&(a.top=o),a}createOffsetLine(){const e=this.$context.selection.hoverItems[0]||this.$context.selection.current;if(!e||!e.parent||e.parent&&e.parent.is("project"))return"";if(this.$context.selection.isEmpty){const t=this.getOffsetVerties(e,e.parent);return` @@ -2007,8 +1892,8 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle {if(this.isMultiStyle(i.key))return this.getMultiStyle fill="none" /> - `}}createPointerLine(e){return e.length===0?"":(e=e.filter((t,i)=>i<4),``)}}function Eb(n){n.registerUI("canvas.view",{HoverView:ZG})}const JG=["","100x100","200x200","300x300","400x300","900x600","1024x762"];class QG extends jt{getClassName(){return"item"}getTitle(){return this.$i18n("image.property.title")}getBody(){return"
      "}getFooter(){return` + `}}createPointerLine(e){return e.length===0?"":(e=e.filter((t,r)=>r<4),``)}}function _9(s){s.registerUI("canvas.view",{HoverView:$9})}const S9=["","100x100","200x200","300x300","400x300","900x600","1024x762"];class P9 extends Ge{getClassName(){return"item"}getTitle(){return this.$i18n("image.property.title")}getBody(){return"
      "}getFooter(){return`
      - +
      - ${W("SelectEditor",{ref:"$select",label:this.$i18n("image.property.size"),key:"size",value:"",options:JG,onchange:"changeImageSize"})} + ${R("SelectEditor",{ref:"$select",label:this.$i18n("image.property.size"),key:"size",value:"",options:S9,onchange:"changeImageSize"})}
      - `}[Me("changeImageSize")](e,t){var[i,r]=t.split("x").map(s=>s);this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:i,height:r}))}[se("$resize")](){var e=this.$context.selection.current;e&&this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:t=>t.naturalWidth,height:t=>t.naturalHeight}))}[$e("$sizeInfo")](){var e=this.$context.selection.current||{};return{innerHTML:`${this.$i18n("image.property.width")}: ${e.naturalWidth}, ${this.$i18n("image.property.height")}: ${e.naturalHeight}`}}[ve("$body")](){var e=this.$context.selection.current||{},t=e.src||"";return W("ImageSelectEditor",{ref:"$1",key:"src",value:t,onchange:"changeSelect"})}[Me("changeSelect")](e,t,i){var r=this.$context.selection.current;r&&(r.reset(P({src:t},i)),this.bindData("$sizeInfo"),this.$commands.executeCommand("setAttribute","change image",this.$context.selection.packByValue(P({src:t},i))))}[U(kt)+Ft(100)](){this.refreshShow(["image"])}}var bre="";class eH extends ge{initState(){return{key:this.props.key,value:this.props.value}}template(){return D("div",{class:"elf--image-select-editor",ref:"$body"})}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[ve("$body")](){const e=this.$context.selection.currentProject;if(!e)return;const t=e.getImageValueById(this.state.value);return D(Yi,null,D("div",{class:"preview-container"},t?D("img",{src:t}):null,D("input",{type:"file",ref:"$file",accept:"image/*"})),D("div",{class:"select-container"},D("button",{type:"button",ref:"$select"},this.$i18n("image.select.editor.button"))))}[yn("$file")](e){var t=[...e.target.files];t.length&&this.$commands.emit("updateImageAssetItem",t[0],i=>{this.trigger("changeImageSelectEditor",i)})}[se("$select")](){this.emit("showImageSelectPopup",{context:this,changeEvent:"changeImageSelectEditor",value:this.state.value})}[U("changeImageSelectEditor")](e){this.updateData({value:e}),this.refresh()}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}var xre="";class tH extends Tn{getTitle(){return"Select a image"}getClassName(){return"compact"}initState(){return{value:""}}updateData(e={}){this.setState(e,!1),this.state.context.trigger(this.state.changeEvent,this.state.value,{width:this.state.width,height:this.state.height,naturalWidth:this.state.naturalWidth,naturalHeight:this.state.naturalHeight})}getBody(){return`
      `}[ve("$imageBox")+It](){return""}[se("$imageBox .image-item")](e){var t=e.$dt.$("img");this.updateData({value:t.attr("data-id"),naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight}),this.trigger("hideImageSelectPopup")}[U("showImageSelectPopup")](e,t){this.setState({context:e.context,changeEvent:e.changeEvent,value:e.value,params:t},!1),this.refresh(),this.show(500)}[U("hideImageSelectPopup")](){this.hide()}}function iH(n){n.registerElement({ImageSelectEditor:eH}),n.registerUI("inspector.tab.style",{ImageProperty:QG}),n.registerUI("popup",{ImageSelectPopup:tH})}class rH extends ge{initState(){return{mode:"grid"}}template(){return` + `}[Z("changeImageSize")](e,t){var[r,i]=t.split("x").map(a=>a);this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:r,height:i}))}[A("$resize")](){var e=this.$context.selection.current;e&&this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:t=>t.naturalWidth,height:t=>t.naturalHeight}))}[ne("$sizeInfo")](){var e=this.$context.selection.current||{};return{innerHTML:`${this.$i18n("image.property.width")}: ${e.naturalWidth}, ${this.$i18n("image.property.height")}: ${e.naturalHeight}`}}[G("$body")](){var e=this.$context.selection.current||{},t=e.src||"";return R("ImageSelectEditor",{ref:"$1",key:"src",value:t,onchange:"changeSelect"})}[Z("changeSelect")](e,t,r){var i=this.$context.selection.current;i&&(i.reset(b({src:t},r)),this.bindData("$sizeInfo"),this.$commands.executeCommand("setAttribute","change image",this.$context.selection.packByValue(b({src:t},r))))}[M(Oe)+Ne(100)](){this.refreshShow(["image"])}}var dF="";class w9 extends Y{initState(){return{key:this.props.key,value:this.props.value}}template(){return C("div",{class:"elf--image-select-editor",ref:"$body"})}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[G("$body")](){const e=this.$context.selection.currentProject;if(!e)return;const t=e.getImageValueById(this.state.value);return C(Lt,null,C("div",{class:"preview-container"},t?C("img",{src:t}):null,C("input",{type:"file",ref:"$file",accept:"image/*"})),C("div",{class:"select-container"},C("button",{type:"button",ref:"$select"},this.$i18n("image.select.editor.button"))))}[Sr("$file")](e){var t=[...e.target.files];t.length&&this.$commands.emit("updateImageAssetItem",t[0],r=>{this.trigger("changeImageSelectEditor",r)})}[A("$select")](){this.emit("showImageSelectPopup",{context:this,changeEvent:"changeImageSelectEditor",value:this.state.value})}[M("changeImageSelectEditor")](e){this.updateData({value:e}),this.refresh()}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}var uF="";class C9 extends Ar{getTitle(){return"Select a image"}getClassName(){return"compact"}initState(){return{value:""}}updateData(e={}){this.setState(e,!1),this.state.context.trigger(this.state.changeEvent,this.state.value,{width:this.state.width,height:this.state.height,naturalWidth:this.state.naturalWidth,naturalHeight:this.state.naturalHeight})}getBody(){return`
      `}[G("$imageBox")+Ee](){return""}[A("$imageBox .image-item")](e){var t=e.$dt.$("img");this.updateData({value:t.attr("data-id"),naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight}),this.trigger("hideImageSelectPopup")}[M("showImageSelectPopup")](e,t){this.setState({context:e.context,changeEvent:e.changeEvent,value:e.value,params:t},!1),this.refresh(),this.show(500)}[M("hideImageSelectPopup")](){this.hide()}}function T9(s){s.registerElement({ImageSelectEditor:w9}),s.registerUI("inspector.tab.style",{ImageProperty:P9}),s.registerUI("popup",{ImageSelectPopup:C9})}class k9 extends Y{initState(){return{mode:"grid"}}template(){return`
      - `}[ve("$imageList")+It](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,i=t.map(r=>` + `}[G("$imageList")+Ee](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,r=t.map(i=>`
      - -
      -
      - `);return i}[se("$imageList .image-item")](e){var t=e.$dt.$("img");this.updateData(t.attr("src"))}updateData(e){this.parent.trigger(this.props.onchange,e)}[U("addImageAsset")](){this.refresh()}}var _re="";function nH(n){window.URL.revokeObjectURL(n)}class sH extends jt{getTitle(){return this.$i18n("image.asset.property.title")}initState(){return{mode:"grid"}}getClassNamef(){return"elf--image-assets-property"}afterRender(){this.show()}getBody(){return` -
      -
      -
      - `}[ve("$imageList")+It](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,i=t.map((r,s)=>` -
      -
      - -
      -
      - - +
      - `);return` -
      - ${i.join("")} -
      - - -
      -
      - - `}executeImage(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshImageAssets")):window.alert("Please select a project.")}[on("$imageList .preview img")](e){var t=+e.$dt.closest("image-item").attr("data-index"),i=this.$context.selection.currentProject;if(i){var r=i.images[t];e.dataTransfer.setData("image/info",r.local)}}[yn("$imageList .add-image-item input[type=file]")](e){this.executeImage(()=>{[...e.target.files].forEach(t=>{this.$commands.emit("updateImageAssetItem",t)})})}[se("$imageList .remove")](e){var t=e.$dt.closest("image-item"),i=+t.attr("data-index");this.executeImage(r=>{r.removeImage(i),nH(t.$(".preview img").attr("src"))})}[se("$imageList .copy")](e){var t=e.$dt.closest("image-item"),i=+t.attr("data-index");this.executeImage(r=>{r.copyImage(i)})}[U("addImageAsset")](){this.refresh()}}function aH(n){n.registerElement({ImageAssetPicker:rH,ImageAssetsProperty:sH})}var Sre="";class oH extends Tn{getTitle(){return this.$i18n("keyframe.popup.title")}initState(){return{name:"none",offsets:[]}}updateData(e){this.setState(e,!1),this.emit("changeKeyframePopup",this.state)}getBody(){return` + `);return r}[A("$imageList .image-item")](e){var t=e.$dt.$("img");this.updateData(t.attr("src"))}updateData(e){this.parent.trigger(this.props.onchange,e)}[M("addImageAsset")](){this.refresh()}}function M9(s){s.registerElement({ImageAssetPicker:k9})}function I9(s){s.context.config.set("inspector.selectedValue","style"),s.registerUI("inspector.tab",{Style:{title:s.$i18n("inspector.tab.title.design"),value:"style"},Transition:{title:s.$i18n("inspector.tab.title.transition"),value:"transition"},Code:{title:s.$i18n("inspector.tab.title.code"),value:"code"}})}var pF="";class E9 extends Ar{getTitle(){return this.$i18n("keyframe.popup.title")}initState(){return{name:"none",offsets:[]}}updateData(e){this.setState(e,!1),this.emit("changeKeyframePopup",this.state)}getBody(){return`
      ${this.templateForName()} @@ -2067,7 +1929,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      `}templateForOffset(){return`
      - ${W("OffsetEditor",{ref:"$offsetEditor"})} + ${R("OffsetEditor",{ref:"$offsetEditor"})}
      `}templateForName(){return`
      @@ -2076,8 +1938,8 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}[fi("$name")](e){if(this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/))this.updateData({name:this.refs.$name.value});else return e.preventDefault(),e.stopPropagation(),!1}getOffsetData(){var e=this.state.offsets.map(t=>t);return{offsets:e}}refresh(){this.refs.$name.val(this.state.name),this.emit("showOffsetEditor",this.getOffsetData())}[U("changeOffsetEditor")](e){this.updateData(e)}[U("showKeyframePopup")](e){this.setState(e),this.refresh(),this.show(240)}[U("hideKeyframePopup")](){this.$el.hide()}}var wre="";class lH extends jt{getTitle(){return this.$i18n("keyframe.property.title")}getBody(){return"
      "}getTools(){return` - + `}[dt("$name")](e){if(this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/))this.updateData({name:this.refs.$name.value});else return e.preventDefault(),e.stopPropagation(),!1}getOffsetData(){var e=this.state.offsets.map(t=>t);return{offsets:e}}refresh(){this.refs.$name.val(this.state.name),this.emit("showOffsetEditor",this.getOffsetData())}[M("changeOffsetEditor")](e){this.updateData(e)}[M("showKeyframePopup")](e){this.setState(e),this.refresh(),this.show(240)}[M("hideKeyframePopup")](){this.$el.hide()}}var gF="";class L9 extends Ge{getTitle(){return this.$i18n("keyframe.property.title")}getBody(){return"
      "}getTools(){return` + `}makeProperty(e){var t=e.key;return t==="x"?t="left":t==="y"&&(t="top"),`
      @@ -2096,27 +1958,27 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      ${e.name}
      - - + +
      - +
      - ${e.offsets.map(i=>` -
      + ${e.offsets.map(r=>` +
      `).join("")}
      - ${e.offsets.map(i=>this.makeOffset(i)).join("")} + ${e.offsets.map(r=>this.makeOffset(r)).join("")} 
      ${e.toString().trim()}
      - `}[se("$keyframeList .keyframe-item .title .group button[data-type]")](e){var t=e.$dt.closest("keyframe-item"),i=+t.attr("data-index"),r=e.$dt.attr("data-type"),s=this.$context.selection.currentProject;if(!!s){var a=s.keyframes[i];a&&a.reset({selectedType:r}),t.attr("data-selected-value",r)}}[se("$keyframeList .keyframe-item .offset-list")](e){var t=+e.$dt.closest("keyframe-item").attr("data-index"),i=this.$context.selection.currentProject;!i||this.viewKeyframePicker(t)}[se("$keyframeList .del")+St](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.currentProject;!i||(i.removeKeyframe(t),this.$commands.emit("refreshProject",i),this.refresh())}[U(kt)+Ft(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("keyframes")&&this.refresh()}[ve("$keyframeList")](){var e=this.$context.selection.currentProject;if(!e)return"";var t=e.keyframes||[];return t.map((i,r)=>this.makeKeyframeTemplate(i,r))}[se("$add")](){var e=this.$context.selection.currentProject;e?(e.createKeyframe(),this.refresh(),this.$commands.emit("refreshProject",e)):window.alert("Please select a project.")}viewKeyframePicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.currentProject,this.current&&(this.currentKeyframe=this.current.keyframes[this.selectedIndex],this.viewKeyframePropertyPopup())}selectItem(e,t=!0){t?this.getRef("$keyframeIndex",e).addClass("selected"):this.getRef("$keyframeIndex",e).removeClass("selected"),this.current&&this.current.keyframes.forEach((i,r)=>{i.selected=r===e})}viewKeyframePropertyPopup(e){if(this.current=this.$context.selection.currentProject,!this.current)return;this.currentKeyframe=this.current.keyframes[this.selectedIndex];const t=this.currentKeyframe,i=t.name,r=t.offsets;this.emit("showKeyframePopup",{position:e,name:i,offsets:r})}[U("changeKeyframePopup")](e){var t=this.$context.selection.currentProject;!t||(this.currentKeyframe=t.keyframes[this.selectedIndex],this.currentKeyframe&&this.currentKeyframe.reset(e),this.refresh(),this.$commands.emit("refreshProject",t))}}class cH extends ge{initState(){return{offsets:[]}}updateData(e){this.setState(e,!1),this.modifyOffset()}modifyOffset(){this.emit("changeOffsetEditor",this.state)}template(){return` + `}[A("$keyframeList .keyframe-item .title .group button[data-type]")](e){var t=e.$dt.closest("keyframe-item"),r=+t.attr("data-index"),i=e.$dt.attr("data-type"),a=this.$context.selection.currentProject;if(!!a){var n=a.keyframes[r];n&&n.reset({selectedType:i}),t.attr("data-selected-value",i)}}[A("$keyframeList .keyframe-item .offset-list")](e){var t=+e.$dt.closest("keyframe-item").attr("data-index"),r=this.$context.selection.currentProject;!r||this.viewKeyframePicker(t)}[A("$keyframeList .del")+Ve](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.currentProject;!r||(r.removeKeyframe(t),this.$commands.emit("refreshProject",r),this.refresh())}[M(Oe)+Ne(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("keyframes")&&this.refresh()}[G("$keyframeList")](){var e=this.$context.selection.currentProject;if(!e)return"";var t=e.keyframes||[];return t.map((r,i)=>this.makeKeyframeTemplate(r,i))}[A("$add")](){var e=this.$context.selection.currentProject;e?(e.createKeyframe(),this.refresh(),this.$commands.emit("refreshProject",e)):window.alert("Please select a project.")}viewKeyframePicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.currentProject,this.current&&(this.currentKeyframe=this.current.keyframes[this.selectedIndex],this.viewKeyframePropertyPopup())}selectItem(e,t=!0){t?this.getRef("$keyframeIndex",e).addClass("selected"):this.getRef("$keyframeIndex",e).removeClass("selected"),this.current&&this.current.keyframes.forEach((r,i)=>{r.selected=i===e})}viewKeyframePropertyPopup(e){if(this.current=this.$context.selection.currentProject,!this.current)return;this.currentKeyframe=this.current.keyframes[this.selectedIndex];const t=this.currentKeyframe,r=t.name,i=t.offsets;this.emit("showKeyframePopup",{position:e,name:r,offsets:i})}[M("changeKeyframePopup")](e){var t=this.$context.selection.currentProject;!t||(this.currentKeyframe=t.keyframes[this.selectedIndex],this.currentKeyframe&&this.currentKeyframe.reset(e),this.refresh(),this.$commands.emit("refreshProject",t))}}class V9 extends Y{initState(){return{offsets:[]}}updateData(e){this.setState(e,!1),this.modifyOffset()}modifyOffset(){this.emit("changeOffsetEditor",this.state)}template(){return`
      ${this.templateForOffset()} ${this.templateForOffsetInput()} @@ -2126,11 +1988,11 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - ${W("InputRangeEditor",{key:"offset",min:0,max:100,step:.01,value:y.percent(0),ref:"$offsetInput",units:"%",onchange:"changeRangeEditor"})} + ${R("InputRangeEditor",{key:"offset",min:0,max:100,step:.01,value:p.percent(0),ref:"$offsetInput",units:"%",onchange:"changeRangeEditor"})}
      - `}[U("changeRangeEditor")](e,t){var i=this.state.offsets[this.selectedIndex];i&&(i.offset=t.clone(),this.refresh(),this.modifyOffset())}templateForProperty(){return W("CSSPropertyEditor",{ref:"$offsetPropertyEditor","hide-refresh":!0,onchange:"changeCSSPropertyEditor"})}templateForOffset(){return`
      `}makeOffset(e,t){return`
      `}selectItem(e){if(Di(e)){e=-1;for(var t=0,i=this.state.offsets.length;t{s.selected=a===e});var r=this.state.offsets.filter(s=>s.selected);this.selectedOffsetItem=r.length?r[0]:{},this.refreshOffsetInput()}refreshOffsetInput(){var e=this.state.offsets[this.selectedIndex];e&&this.children.$offsetInput.setValue(e.offset)}[ve("$offset")](){return this.state.offsets.map((e,t)=>this.makeOffset(e,t))}isNotOffsetItem(e){return!Ze.create(e.target).hasClass("offset-item")&&!this.currentOffset}[se("$offset")+Qe("isNotOffsetItem")+St](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset();var t=e.xy.x,i=y.percent((t-this.baseOffsetArea.left)/this.baseOffsetWidth*100).round(100);this.state.offsets.push(new bh({offset:i})),this.selectItem(this.state.offsets.length-1,!0),this.refresh(),this.modifyOffset()}refreshOffsetProperty(){this.emit("showCSSPropertyEditor",this.selectedOffsetItem.properties)}[qe("$offset .offset-item")+at("moveOffset")+lt("endOffset")](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset(),this.currentOffsetleft=y.parse(e.$dt.css("left")),this.currentOffset=e.$dt,this.currentOffsetIndex=+e.$dt.attr("data-offset-index"),this.currentOffsetXY=e.xy,this.baseOffsetMin=this.baseOffsetArea.left,this.baseOffsetMax=this.baseOffsetArea.left+this.baseOffsetWidth,this.isRemoveOffset=!1,e.altKey?this.isRemoveOffset=!0:(this.selectItem(this.currentOffsetIndex,!0),this.refreshOffsetInput())}moveOffset(e){if(!this.isRemoveOffset){var t=this.currentOffsetXY.x+e;tthis.baseOffsetMax&&(t=this.baseOffsetMax);var i=y.percent((t-this.baseOffsetMin)/this.baseOffsetWidth*100).round(100);this.state.offsets[this.currentOffsetIndex].offset.set(i.value),this.currentOffset.css("left",i),this.refreshOffsetInput(),this.modifyOffset()}}removeOffset(e){this.state.offsets.splice(e,1),this.selectItem(0),this.refresh(),this.modifyOffset()}endOffset(){this.isRemoveOffset?window.setTimeout(()=>{this.currentOffset=null,this.removeOffset(this.currentOffsetIndex)},10):window.setTimeout(()=>{this.currentOffset=null,this.refreshOffsetInput(),this.refreshOffsetProperty(),this.modifyOffset()},10)}refresh(){this.load(),this.refreshOffsetProperty()}[U("showOffsetEditor")](e){this.setState(e),this.selectItem(),this.refresh()}[U("changeCSSPropertyEditor")](e=[]){var t=this.state.offsets[this.selectedIndex];t&&(t.properties=[...e]),this.modifyOffset()}}function hH(n){n.registerElement({OffsetEditor:cH}),n.registerUI("inspector.tab.transition",{KeyframeProperty:lH}),n.registerUI("popup",{KeyframePopup:oH})}var Mre="";class dH extends ge{template(){return` + `}[M("changeRangeEditor")](e,t){var r=this.state.offsets[this.selectedIndex];r&&(r.offset=t.clone(),this.refresh(),this.modifyOffset())}templateForProperty(){return R("CSSPropertyEditor",{ref:"$offsetPropertyEditor","hide-refresh":!0,onchange:"changeCSSPropertyEditor"})}templateForOffset(){return`
      `}makeOffset(e,t){return`
      `}selectItem(e){if(Ct(e)){e=-1;for(var t=0,r=this.state.offsets.length;t{a.selected=n===e});var i=this.state.offsets.filter(a=>a.selected);this.selectedOffsetItem=i.length?i[0]:{},this.refreshOffsetInput()}refreshOffsetInput(){var e=this.state.offsets[this.selectedIndex];e&&this.children.$offsetInput.setValue(e.offset)}[G("$offset")](){return this.state.offsets.map((e,t)=>this.makeOffset(e,t))}isNotOffsetItem(e){return!ge.create(e.target).hasClass("offset-item")&&!this.currentOffset}[A("$offset")+fe("isNotOffsetItem")+Ve](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset();var t=e.xy.x,r=p.percent((t-this.baseOffsetArea.left)/this.baseOffsetWidth*100).round(100);this.state.offsets.push(new bn({offset:r})),this.selectItem(this.state.offsets.length-1,!0),this.refresh(),this.modifyOffset()}refreshOffsetProperty(){this.emit("showCSSPropertyEditor",this.selectedOffsetItem.properties)}[me("$offset .offset-item")+xe("moveOffset")+Se("endOffset")](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset(),this.currentOffsetleft=p.parse(e.$dt.css("left")),this.currentOffset=e.$dt,this.currentOffsetIndex=+e.$dt.attr("data-offset-index"),this.currentOffsetXY=e.xy,this.baseOffsetMin=this.baseOffsetArea.left,this.baseOffsetMax=this.baseOffsetArea.left+this.baseOffsetWidth,this.isRemoveOffset=!1,e.altKey?this.isRemoveOffset=!0:(this.selectItem(this.currentOffsetIndex,!0),this.refreshOffsetInput())}moveOffset(e){if(!this.isRemoveOffset){var t=this.currentOffsetXY.x+e;tthis.baseOffsetMax&&(t=this.baseOffsetMax);var r=p.percent((t-this.baseOffsetMin)/this.baseOffsetWidth*100).round(100);this.state.offsets[this.currentOffsetIndex].offset.set(r.value),this.currentOffset.css("left",r),this.refreshOffsetInput(),this.modifyOffset()}}removeOffset(e){this.state.offsets.splice(e,1),this.selectItem(0),this.refresh(),this.modifyOffset()}endOffset(){this.isRemoveOffset?window.setTimeout(()=>{this.currentOffset=null,this.removeOffset(this.currentOffsetIndex)},10):window.setTimeout(()=>{this.currentOffset=null,this.refreshOffsetInput(),this.refreshOffsetProperty(),this.modifyOffset()},10)}refresh(){this.load(),this.refreshOffsetProperty()}[M("showOffsetEditor")](e){this.setState(e),this.selectItem(),this.refresh()}[M("changeCSSPropertyEditor")](e=[]){var t=this.state.offsets[this.selectedIndex];t&&(t.properties=[...e]),this.modifyOffset()}}function O9(s){s.registerElement({OffsetEditor:V9}),s.registerUI("inspector.tab.transition",{KeyframeProperty:L9}),s.registerUI("popup",{KeyframePopup:E9})}var fF="";class R9 extends Y{template(){return`
      @@ -2139,7 +2001,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}initState(){return{dragStart:!1,width:0,height:0,color:"black",fontSize:30,showRectInfo:!1,areaVerties:Ei(0,0,0,0),content:"Insert a text",pathManager:new Ji,rect:{},options:{},containerItem:void 0,patternInfo:{}}}get scale(){return this.$viewport.scale}checkNotDragStart(){return Boolean(this.state.dragStart)===!1}[lo("$el")+Qe("checkNotDragStart")](e){const t=this.$viewport.getWorldPosition(e),i=this.$context.snapManager.checkPoint(t);If(i,t)===!1?(this.state.target=i,this.state.targetVertex=this.$viewport.applyVertex(this.state.target),this.state.targetPositionVertex=vr(this.state.target),this.state.targetGuides=this.$context.snapManager.findGuideOne([this.state.target])):(this.state.target=Gn([],t),this.state.targetVertex=Gn([],this.$viewport.applyVertex(this.state.target)),this.state.targetGuides=[],this.state.targetPositionVertex=null),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}[qe("$el")+at()+lt()+St+Bn](e){this.initMousePoint=this.state.targetPositionVertex?this.state.targetPositionVertex:this.$viewport.getWorldPosition(e),this.state.dragStart=!0,this.state.color="#C4C4C4",this.state.text="";const t=this.initMousePoint[0],i=this.initMousePoint[1],r=Ei(t,i,0,0);this.state.areaVerties=this.$viewport.applyVerties(r),this.bindData("$area"),this.bindData("$areaRect")}createLayerTemplate(e,t){const{type:i,text:r,color:s,inlineStyle:a}=this.state;switch(i){case"artboard":return`
      `;case"rect":return`
      `;case"circle":return`
      `;case"text":case"svg-text":return` + `}initState(){return{dragStart:!1,width:0,height:0,color:"black",fontSize:30,showRectInfo:!1,areaVerties:xt(0,0,0,0),content:"Insert a text",pathManager:new jt,rect:{},options:{},containerItem:void 0,patternInfo:{}}}get scale(){return this.$viewport.scale}checkNotDragStart(){return Boolean(this.state.dragStart)===!1}[Ps("$el")+fe("checkNotDragStart")](e){const t=this.$viewport.getWorldPosition(e),r=this.$context.snapManager.checkPoint(t);Dl(r,t)===!1?(this.state.target=r,this.state.targetVertex=this.$viewport.applyVertex(this.state.target),this.state.targetPositionVertex=Yt(this.state.target),this.state.targetGuides=this.$context.snapManager.findGuideOne([this.state.target])):(this.state.target=Zr([],t),this.state.targetVertex=Zr([],this.$viewport.applyVertex(this.state.target)),this.state.targetGuides=[],this.state.targetPositionVertex=null),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}[me("$el")+xe()+Se()+Ve+Wr](e){this.initMousePoint=this.state.targetPositionVertex?this.state.targetPositionVertex:this.$viewport.getWorldPosition(e),this.state.dragStart=!0,this.state.color="#C4C4C4",this.state.text="";const t=this.initMousePoint[0],r=this.initMousePoint[1],i=xt(t,r,0,0);this.state.areaVerties=this.$viewport.applyVerties(i),this.bindData("$area"),this.bindData("$areaRect")}createLayerTemplate(e,t){const{type:r,text:i,color:a,inlineStyle:n}=this.state;switch(r){case"artboard":return`
      `;case"rect":return`
      `;case"circle":return`
      `;case"text":case"svg-text":return`
      {if(this.isMultiStyle(i.key))return this.getMultiStyle
      `;case"svg-rect":return`
      - +
      `;case"svg-circle":return`
      - +
      `;case"svg-path":const o=this.state.d.clone().scale(e/this.state.bboxRect.width,t/this.state.bboxRect.height).d,l=this.state.options;return` @@ -2171,7 +2033,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle `;case"polygon":const c=this.state.options;return`
      - {if(this.isMultiStyle(i.key))return this.getMultiStyle `;case"star":const h=this.state.options;return`
      - {if(this.isMultiStyle(i.key))return this.getMultiStyle
      - + {if(this.isMultiStyle(i.key))return this.getMultiStyle textLength="100%" lengthAdjust="spacingAndGlyphs" startOffset="0em" - >${r} + >${i}
      - `;default:return`
      `}}[$e("$area")](){const{areaVerties:e}=this.state,{left:t,top:i,width:r,height:s}=Zi(e);return{style:{left:t,top:i,width:r,height:s},innerHTML:this.createLayerTemplate(r,s)}}[$e("$areaRect")](){const{areaVerties:e,showRectInfo:t}=this.state,i=this.$viewport.applyVertiesInverse(e),{width:r,height:s}=Zi(i);return{style:{display:t?"inline-block":"none",left:e[2][0],top:e[2][1]},innerHTML:`x: ${Math.round(i[0][0])}, y: ${Math.round(i[0][1])}, ${Math.round(r)} x ${Math.round(s)}`}}[$e("$mousePointerView")](){const{showRectInfo:e}=this.state,{target:t=ps(),targetVertex:i=ps()}=this.state;return{style:{display:e?"none":"inline-block",left:i[0]||-1e4,top:i[1]||-1e4},innerHTML:`x: ${Math.round(t[0])}, y: ${Math.round(t[1])}`}}makeMousePointer(){if(this.state.dragStart)return"";const{target:e}=this.state;return e?` + `;default:return`
      `}}[ne("$area")](){const{areaVerties:e}=this.state,{left:t,top:r,width:i,height:a}=Rt(e);return{style:{left:t,top:r,width:i,height:a},innerHTML:this.createLayerTemplate(i,a)}}[ne("$areaRect")](){const{areaVerties:e,showRectInfo:t}=this.state,r=this.$viewport.applyVertiesInverse(e),{width:i,height:a}=Rt(r);return{style:{display:t?"inline-block":"none",left:e[2][0],top:e[2][1]},innerHTML:`x: ${Math.round(r[0][0])}, y: ${Math.round(r[0][1])}, ${Math.round(i)} x ${Math.round(a)}`}}[ne("$mousePointerView")](){const{showRectInfo:e}=this.state,{target:t=ci(),targetVertex:r=ci()}=this.state;return{style:{display:e?"none":"inline-block",left:r[0]||-1e4,top:r[1]||-1e4},innerHTML:`x: ${Math.round(t[0])}, y: ${Math.round(t[1])}`}}makeMousePointer(){if(this.state.dragStart)return"";const{target:e}=this.state;return e?` - ${(this.state.targetGuides||[]).filter(Boolean).map(i=>(this.state.pathManager.reset(),i=this.$viewport.applyVerties([i[0],i[1]]),this.state.pathManager.M({x:i[0][0],y:i[0][1]}).L({x:i[1][0],y:i[1][1]}).X({x:i[0][0],y:i[0][1]}).X({x:i[1][0],y:i[1][1]}).toString("layer-add-snap-pointer"))).join(` + ${(this.state.targetGuides||[]).filter(Boolean).map(r=>(this.state.pathManager.reset(),r=this.$viewport.applyVerties([r[0],r[1]]),this.state.pathManager.M({x:r[0][0],y:r[0][1]}).L({x:r[1][0],y:r[1][1]}).X({x:r[0][0],y:r[0][1]}).X({x:r[1][0],y:r[1][1]}).toString("layer-add-snap-pointer"))).join(` `)} - `:""}[$e("$mousePointer")](){return{innerHTML:this.makeMousePointer()}}move(){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),i=this.$context.snapManager.checkPoint(t);If(i,t)===!1?(this.state.target=i,this.state.targetVertex=this.$viewport.applyVertex(i),this.state.targetGuides=this.$context.snapManager.findGuideOne([i]).filter(Boolean)):(this.state.target=void 0,this.state.targetGuides=[]);const r=e.shiftKey,s=Math.min(i[0],this.initMousePoint[0]),a=Math.min(i[1],this.initMousePoint[1]),o=Math.max(i[0],this.initMousePoint[0]),l=Math.max(i[1],this.initMousePoint[1]);let c=o-s,h=l-a;r&&(h=c);const d=Ei(s,a,c,h);this.state.areaVerties=this.$viewport.applyVerties(d),this.state.showRectInfo=!0,this.bindData("$area"),this.bindData("$areaRect"),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}end(){const e=this.$config.get("bodyEvent").altKey;let{color:t,content:i,fontSize:r,areaVerties:s,patternInfo:a}=this.state;const o=this.$viewport.applyVertiesInverse(s),l=this.$context.selection.getArtboardByPoint(o[0]);let{x:c,y:h,width:d,height:u}=Zi(o),p=!0;if(d===0&&u===0)switch(this.state.type){case"text":i="",u.set(this.state.fontSize),p=!1;break;default:d=100,u=100;break}var f=P(P({x:Math.floor(c),y:Math.floor(h),width:Math.floor(d),height:Math.floor(u),backgroundColor:t,content:i,fontSize:r},a.attrs),this.state.options);switch(this.state.type){case"text":case"svg-text":case"svg-textpath":delete f.backgroundColor;break;case"svg-path":f.d=this.state.d.clone().scale(d/this.state.bboxRect.width,u/this.state.bboxRect.height).d;break;default:delete f.content;break}switch(this.state.type){case"image":this.trigger("openImage",f,l);break;case"video":this.trigger("openVideo",f,l);break;case"audio":this.trigger("openAudio",f,l);break;case"text":if(p)f.fontSize=y.px(this.state.fontSize).floor();else{const g=this.state.fontSize/this.$viewport.scale,m=this.refs.$area.$(".draw-item > p");m.parent().css("height",`${g}px`),m.parent().css("font-size",`${g}px`),m.select(),m.focus();return}this.$commands.emit("newComponent",this.state.type,f,!0,l||this.$context.selection.currentProject);break;default:this.$commands.emit("newComponent",this.state.type,f,!0,l||this.$context.selection.currentProject),this.$config.set("editing.mode.itemType","select");break}e||this.trigger("hideLayerAppendView"),this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=void 0,this.bindData("$areaRect")}[U("showLayerAppendView")](e,t={}){this.state.type=e,this.state.options=t,this.state.isShow=!0,this.refs.$area.empty(),this.$el.show(),this.$el.focus(),this.$context.snapManager.clear();const i=this.$model.createModel(P({itemType:e},t),!1);this.state.inlineStyle=ei(this.$editor.renderer("html").toCSS(i,{top:!0,left:!0,width:!0,height:!0,transform:!0,transformOrigin:!0})),t.d&&(this.state.d=new _e(t.d),this.state.bboxRect=this.state.d.rect()),this.$context.commands.emit("push.mode.view","LayerAppendView")}[U("hideLayerAppendView")](){this.$el.isShow()&&(this.state.isShow=!1,this.$el.hide(),this.$commands.emit("pop.mode.view","LayerAppendView"))}[U("hideAddViewLayer")](){this.state.isShow=!1,this.$el.hide()}isShow(){return this.state.isShow}[Cc("document")+Qe("isShow")+ll+ra](){}[Pr("document")+Qe("isShow")+ll+ra](e){switch(this.state.type){case"text":const t=Ze.create(e.target);let{fontSize:i,areaVerties:r}=this.state;const s=this.$viewport.applyVertiesInverse(r),{x:a,y:o}=Zi(s),{width:l,height:c}=t.rect(),h=t.text();if(h.length===0)break;const[[d,u,p]]=this.$viewport.applyScaleVertiesInverse([[l,c,i]]),f={x:a,y:o,width:d,height:u,content:h.trim(),"font-size":p},g=this.$context.selection.getArtboardByPoint(s[0]);this.$commands.emit("newComponent",this.state.type,f,!0,g||this.$context.selection.currentProject);break}this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=null,this.bindData("$areaRect"),this.trigger("hideLayerAppendView")}[yn("$file")](){this.refs.$file.files.forEach(e=>{this.$commands.emit("updateImage",e,this.state.rect,this.state.containerItem)})}[yn("$video")](){this.refs.$video.files.forEach(e=>{this.$commands.emit("updateVideo",e,this.state.rect,this.state.containerItem)})}[U("openImage")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$file.click()}[U("openVideo")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$video.click()}[U("setPatternInfo")](e){this.state.patternInfo=e}[U(si)](){this.$context.snapManager.clear(),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}}function Ib(n){n.registerUI("canvas.view",{LayerAppendView:dH})}var $re="";const Th="drag-start";class uH extends jt{getTitle(){return this.$i18n("layer.tree.property.title")}getClassName(){return"full"}initState(){return{hideDragPointer:!0,lastDragOverPosition:0,lastDragOverOffset:0,rootRect:{top:0},itemRect:{height:0}}}getBody(){return` + `:""}[ne("$mousePointer")](){return{innerHTML:this.makeMousePointer()}}move(){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),r=this.$context.snapManager.checkPoint(t);Dl(r,t)===!1?(this.state.target=r,this.state.targetVertex=this.$viewport.applyVertex(r),this.state.targetGuides=this.$context.snapManager.findGuideOne([r]).filter(Boolean)):(this.state.target=void 0,this.state.targetGuides=[]);const i=e.shiftKey,a=Math.min(r[0],this.initMousePoint[0]),n=Math.min(r[1],this.initMousePoint[1]),o=Math.max(r[0],this.initMousePoint[0]),l=Math.max(r[1],this.initMousePoint[1]);let c=o-a,h=l-n;i&&(h=c);const u=xt(a,n,c,h);this.state.areaVerties=this.$viewport.applyVerties(u),this.state.showRectInfo=!0,this.bindData("$area"),this.bindData("$areaRect"),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}end(){const e=this.$config.get("bodyEvent").altKey;let{color:t,content:r,fontSize:i,areaVerties:a,patternInfo:n}=this.state;const o=this.$viewport.applyVertiesInverse(a),l=this.$context.selection.getArtboardByPoint(o[0]);let{x:c,y:h,width:u,height:d}=Rt(o),v=!0;if(u===0&&d===0)switch(this.state.type){case"text":r="",d.set(this.state.fontSize),v=!1;break;default:u=100,d=100;break}var g=b(b({x:Math.floor(c),y:Math.floor(h),width:Math.floor(u),height:Math.floor(d),backgroundColor:t,content:r,fontSize:i},n.attrs),this.state.options);switch(this.state.type){case"text":case"svg-text":case"svg-textpath":delete g.backgroundColor;break;case"svg-path":g.d=this.state.d.clone().scale(u/this.state.bboxRect.width,d/this.state.bboxRect.height).d;break;default:delete g.content;break}switch(this.state.type){case"image":this.trigger("openImage",g,l);break;case"video":this.trigger("openVideo",g,l);break;case"audio":this.trigger("openAudio",g,l);break;case"text":if(v)g.fontSize=p.px(this.state.fontSize).floor();else{const y=this.state.fontSize/this.$viewport.scale,P=this.refs.$area.$(".draw-item > p");P.parent().css("height",`${y}px`),P.parent().css("font-size",`${y}px`),P.select(),P.focus();return}this.$commands.emit("newComponent",this.state.type,g,!0,l||this.$context.selection.currentProject);break;default:this.$commands.emit("newComponent",this.state.type,g,!0,l||this.$context.selection.currentProject),this.$config.set("editing.mode.itemType","select");break}e||this.trigger("hideLayerAppendView"),this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=void 0,this.bindData("$areaRect")}[M("showLayerAppendView")](e,t={}){this.state.type=e,this.state.options=t,this.state.isShow=!0,this.refs.$area.empty(),this.$el.show(),this.$el.focus(),this.$context.snapManager.clear();const r=this.$model.createModel(b({itemType:e},t),!1);this.state.inlineStyle=Je(this.$editor.renderer("html").toCSS(r,{top:!0,left:!0,width:!0,height:!0,transform:!0,transformOrigin:!0})),t.d&&(this.state.d=new K(t.d),this.state.bboxRect=this.state.d.rect()),this.$context.commands.emit("push.mode.view","LayerAppendView")}[M("hideLayerAppendView")](){this.$el.isShow()&&(this.state.isShow=!1,this.$el.hide(),this.$commands.emit("pop.mode.view","LayerAppendView"))}[M("hideAddViewLayer")](){this.state.isShow=!1,this.$el.hide()}isShow(){return this.state.isShow}[Ra("document")+fe("isShow")+ra+Di](){}[er("document")+fe("isShow")+ra+Di](e){switch(this.state.type){case"text":const t=ge.create(e.target);let{fontSize:r,areaVerties:i}=this.state;const a=this.$viewport.applyVertiesInverse(i),{x:n,y:o}=Rt(a),{width:l,height:c}=t.rect(),h=t.text();if(h.length===0)break;const[[u,d,v]]=this.$viewport.applyScaleVertiesInverse([[l,c,r]]),g={x:n,y:o,width:u,height:d,content:h.trim(),"font-size":v},y=this.$context.selection.getArtboardByPoint(a[0]);this.$commands.emit("newComponent",this.state.type,g,!0,y||this.$context.selection.currentProject);break}this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=null,this.bindData("$areaRect"),this.trigger("hideLayerAppendView")}[Sr("$file")](){this.refs.$file.files.forEach(e=>{this.$commands.emit("updateImage",e,this.state.rect,this.state.containerItem)})}[Sr("$video")](){this.refs.$video.files.forEach(e=>{this.$commands.emit("updateVideo",e,this.state.rect,this.state.containerItem)})}[M("openImage")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$file.click()}[M("openVideo")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$video.click()}[M("setPatternInfo")](e){this.state.patternInfo=e}[M(st)](){this.$context.snapManager.clear(),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}}function j9(s){s.registerUI("canvas.view",{LayerAppendView:R9})}var mF="";const Tn="drag-start";class z9 extends Ge{getTitle(){return this.$i18n("layer.tree.property.title")}getClassName(){return"full"}initState(){return{hideDragPointer:!0,lastDragOverPosition:0,lastDragOverOffset:0,rootRect:{top:0},itemRect:{height:0}}}getBody(){return`
      - `}[$e("$dragPointer")](){var e=this.state.lastDragOverOffset,t=this.state.itemRect.height/3,i={};if(this.state.lastDragOverOffsetthis.state.itemRect.height-t){e=this.state.itemRect.height;var r=this.state.lastDragOverPosition+e-this.state.rootRect.top;i={top:r,height:"1px",width:"100%",left:"0px"},this.state.lastDragOverItemDirection="after"}else{const s=this.$model.get(this.state.lastDragOverItemId);if(s!=null&&s.enableHasChildren()){e=0;var r=this.state.lastDragOverPosition+e-this.state.rootRect.top;i={top:r,height:this.state.itemRect.height,width:"100%",left:"0px"},this.state.lastDragOverItemDirection="self"}}return i.display=this.state.hideDragPointer?"none":"block",{style:i}}getIcon(e){return e.d?vk(e.d,{width:e.screenWidth,height:e.screenHeight,fill:"currentColor",stroke:"currentColor"}):e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?re("layout_flex"):e.isLayout("grid")?re("layout_grid"):re("layout_default"):this.$icon.get(e.itemType,e)}makeLayerList(e,t=0){if(!e.layers)return"";const i=e.layers,r=[];for(var s=i.length-1;s>-1;s--){var a=i[s],o=this.$context.selection.hasPathOf(a)?"selected-path":"",l=this.$context.selection.check(a)?"selected":"",c=this.$context.selection.checkHover(a)?"hovered":"",h=a.is("boolean-path")?a["boolean-operation"]:a.name;a.is("text")&&(h=a.text||a.name);var d="";a.hasLayout()&&(d=this.$i18n("layer.tree.property.layout.title."+a.layout));const u=a.isTreeItemHide(),p=t*20,f=a.hasChildren(),g=this.$lockManager.get(a.id),m=this.$visibleManager.get(a.id);r[r.length]=`
      ${this.makeLayerList(a,t+1)}`}return r.join("")}[U("refreshContent")](){this.refresh()}[ve("$layerList")+It](){var e=this.$context.selection.currentProject;return e?[this.makeLayerList(e,0),` + `}[ne("$dragPointer")](){var e=this.state.lastDragOverOffset,t=this.state.itemRect.height/3,r={};if(this.state.lastDragOverOffsetthis.state.itemRect.height-t){e=this.state.itemRect.height;var i=this.state.lastDragOverPosition+e-this.state.rootRect.top;r={top:i,height:"1px",width:"100%",left:"0px"},this.state.lastDragOverItemDirection="after"}else{const a=this.$model.get(this.state.lastDragOverItemId);if(a!=null&&a.enableHasChildren()){e=0;var i=this.state.lastDragOverPosition+e-this.state.rootRect.top;r={top:i,height:this.state.itemRect.height,width:"100%",left:"0px"},this.state.lastDragOverItemDirection="self"}}return r.display=this.state.hideDragPointer?"none":"block",{style:r}}getIcon(e){return e.d?HS(e.d,{width:e.screenWidth,height:e.screenHeight,fill:"currentColor",stroke:"currentColor"}):e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?z("layout_flex"):e.isLayout("grid")?z("layout_grid"):z("layout_default"):this.$icon.get(e.itemType,e)}makeLayerList(e,t=0){if(!e.layers)return"";const r=e.layers,i=[];for(var a=r.length-1;a>-1;a--){var n=r[a],o=this.$context.selection.hasPathOf(n)?"selected-path":"",l=this.$context.selection.check(n)?"selected":"",c=this.$context.selection.checkHover(n)?"hovered":"",h=n.is("boolean-path")?n["boolean-operation"]:n.name;n.is("text")&&(h=n.text||n.name);var u="";n.hasLayout()&&(u=this.$i18n("layer.tree.property.layout.title."+n.layout));const d=n.isTreeItemHide(),v=t*20,g=n.hasChildren(),y=this.$lockManager.get(n.id),P=this.$visibleManager.get(n.id);i[i.length]=`
      ${this.makeLayerList(n,t+1)}`}return i.join("")}[M("refreshContent")](){this.refresh()}[G("$layerList")+Ee](){var e=this.$context.selection.currentProject;return e?[this.makeLayerList(e,0),`
      - `]:""}[on("$layerList .layer-item")](e){var t=e.$dt.attr("data-layer-id");e.$dt.addClass(Th),e.dataTransfer.setData("layer/id",t),this.state.rootRect=this.refs.$layerList.rect(),this.state.itemRect=e.$dt.rect(),this.setState({hideDragPointer:!1},!1),this.bindData("$dragPointer")}[S0("$layerList .layer-item")](){this.setState({hideDragPointer:!0},!1),this.bindData("$dragPointer"),this.refs.$layerList.$$(`.${Th}`).forEach(e=>{e.removeClass(Th)})}[Kr(`$layerList .layer-item:not(.${Th})`)+St](e){var t=e.$dt.attr("data-layer-id");this.state.lastDragOverItemId=t,this.state.lastDragOverPosition=e.$dt.rect().top,this.state.lastDragOverOffset=e.offsetY,this.bindData("$dragPointer")}[Yr(`$layerList .layer-item:not(.${Th})`)](e){var t=e.$dt.attr("data-layer-id"),i=e.dataTransfer.getData("layer/id");if(t!==i){var r=this.$model.get(t),s=this.$model.get(i);if((r==null?void 0:r.enableHasChildren())!==!1&&!(r&&r.hasParent(s.id))){switch(this.state.lastDragOverItemDirection){case"self":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,_n.APPEND_CHILD);break;case"before":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,_n.INSERT_BEFORE);break;case"after":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,_n.INSERT_AFTER);break}this.nextTick(()=>{this.$commands.emit("recoverBooleanPath"),this.$context.selection.select(s),this.setState({hideDragPointer:!0})},10)}}}[cl("$layerList .layer-item")](e){this.startInputEditing(e.$dt.$(".name"))}modifyDoneInputEditing(e,t){if(pa.enter===t.keyCode)this.endInputEditing(e,()=>{var s=e.closest("layer-item").attr("data-layer-id"),a=e.text();this.$commands.executeCommand("setAttribute","change name",{[s]:{name:a}})});else{var i=e.closest("layer-item").attr("data-layer-id"),r=e.text();this.$commands.executeCommand("setAttribute","change name",{[i]:{name:r}})}}[Cc("$layerList .layer-item .name")+Bn](e){this.modifyDoneInputEditing(e.$dt,e)}[na("$layerList .layer-item .name")+St+Bn](e){this.modifyDoneInputEditing(e.$dt,{keyCode:pa.enter})}selectLayer(e){e&&this.$context.selection.select(e),this.refresh()}addLayer(e){e&&(this.$context.selection.select(e),this.$commands.emit("refreshArtboard"))}[se("$add")](){this.$commands.emit("newComponent","rect",{backgroundColor:"#ececec",width:200,height:100})}[se("$layerList .layer-item label .name")](e){var t=e.$dt.closest("layer-item");t.onlyOneClass("selected");var i=t.attr("data-layer-id");this.$context.selection.select(i),this.$commands.emit("history.refreshSelection")}[se("$layerList .layer-item label .folder")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id"),r=this.$model.get(i);r.reset({collapsed:!r.collapsed}),this.refresh()}[se("$layerList .layer-item .visible")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$visibleManager.toggle(i);var r=this.$visibleManager.get(i);e.$dt.attr("data-visible",r),this.emit("refreshVisibleView")}[se("$layerList .layer-item .remove")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$commands.executeCommand("removeLayer","remove a layer",[i]),this.nextTick(()=>{this.refresh()},1e3)}[se("$layerList .layer-item .lock")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$lockManager.toggle(i);var r=this.$lockManager.get(i);e.$dt.attr("data-lock",r),r&&this.$context.selection.removeById(i)}[U("changeHoverItem")](){if(this.refs.$layerList.$$(".hovered").forEach(t=>{t.removeClass("hovered")}),this.$context.selection.hoverItems.length){var e=this.$context.selection.hoverItems.map(t=>`[data-layer-id="${t.id}"]`).join(",");this.refs.$layerList.$$(e).forEach(t=>{t.addClass("hovered")})}}[Me("changeSelection")](e=!1){if(e&&this.refs.$layerList){this.refs.$layerList.$$(".selected").forEach(i=>{i.removeClass("selected")}),this.refs.$layerList.$$(".selected-path").forEach(i=>{i.removeClass("selected-path")});var t=this.$context.selection.items.map(i=>`[data-layer-id="${i.id}"]`).join(",");t&&this.refs.$layerList.$$(t).forEach(i=>{i.addClass("selected");var r=this.$context.selection.itemKeys[i.attr("data-layer-id")];r.is("svg-path","svg-polygon")&&i.$(".icon").html(this.getIcon(r))})}}[U(kt,"refreshAllCanvas")](){this.refresh()}[U("refreshLayerTreeView")+oo(100)](){this.refresh()}[U("changeItemLayout")](){this.refresh()}[Qt("bodyEvent")](){const t=Ze.create(this.$config.get("bodyEvent").target).closest("layer-item");t&&this.emit("refreshHoverView",t.data("layer-id"))}}function pH(n){n.registerElement({LayerTreeProperty:uH})}function fH(n){n.registerUI("layertab.tab",{Sample:{title:"Sample",icon:re("add"),value:"sample"}})}var Pre="";class gH extends jt{getTitle(){return this.$i18n("default.layout.item.property.title.constraints")}getClassName(){return"elf--default-layout-item-property"}getBody(){return` + `]:""}[pr("$layerList .layer-item")](e){var t=e.$dt.attr("data-layer-id");e.$dt.addClass(Tn),e.dataTransfer.setData("layer/id",t),this.state.rootRect=this.refs.$layerList.rect(),this.state.itemRect=e.$dt.rect(),this.setState({hideDragPointer:!1},!1),this.bindData("$dragPointer")}[od("$layerList .layer-item")](){this.setState({hideDragPointer:!0},!1),this.bindData("$dragPointer"),this.refs.$layerList.$$(`.${Tn}`).forEach(e=>{e.removeClass(Tn)})}[Yr(`$layerList .layer-item:not(.${Tn})`)+Ve](e){var t=e.$dt.attr("data-layer-id");this.state.lastDragOverItemId=t,this.state.lastDragOverPosition=e.$dt.rect().top,this.state.lastDragOverOffset=e.offsetY,this.bindData("$dragPointer")}[Xr(`$layerList .layer-item:not(.${Tn})`)](e){var t=e.$dt.attr("data-layer-id"),r=e.dataTransfer.getData("layer/id");if(t!==r){var i=this.$model.get(t),a=this.$model.get(r);if((i==null?void 0:i.enableHasChildren())!==!1&&!(i&&i.hasParent(a.id))){switch(this.state.lastDragOverItemDirection){case"self":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Lr.APPEND_CHILD);break;case"before":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Lr.INSERT_BEFORE);break;case"after":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Lr.INSERT_AFTER);break}this.nextTick(()=>{this.$commands.emit("recoverBooleanPath"),this.$context.selection.select(a),this.setState({hideDragPointer:!0})},10)}}}[ia("$layerList .layer-item")](e){this.startInputEditing(e.$dt.$(".name"))}modifyDoneInputEditing(e,t){if(Yi.enter===t.keyCode)this.endInputEditing(e,()=>{var a=e.closest("layer-item").attr("data-layer-id"),n=e.text();this.$commands.executeCommand("setAttribute","change name",{[a]:{name:n}})});else{var r=e.closest("layer-item").attr("data-layer-id"),i=e.text();this.$commands.executeCommand("setAttribute","change name",{[r]:{name:i}})}}[Ra("$layerList .layer-item .name")+Wr](e){this.modifyDoneInputEditing(e.$dt,e)}[Fi("$layerList .layer-item .name")+Ve+Wr](e){this.modifyDoneInputEditing(e.$dt,{keyCode:Yi.enter})}selectLayer(e){e&&this.$context.selection.select(e),this.refresh()}addLayer(e){e&&(this.$context.selection.select(e),this.$commands.emit("refreshArtboard"))}[A("$add")](){this.$commands.emit("newComponent","rect",{backgroundColor:"#ececec",width:200,height:100})}[A("$layerList .layer-item label .name")](e){var t=e.$dt.closest("layer-item");t.onlyOneClass("selected");var r=t.attr("data-layer-id");this.$context.selection.select(r),this.$commands.emit("history.refreshSelection")}[A("$layerList .layer-item label .folder")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id"),i=this.$model.get(r);i.reset({collapsed:!i.collapsed}),this.refresh()}[A("$layerList .layer-item .visible")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$visibleManager.toggle(r);var i=this.$visibleManager.get(r);e.$dt.attr("data-visible",i),this.emit("refreshVisibleView")}[A("$layerList .layer-item .remove")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$commands.executeCommand("removeLayer","remove a layer",[r]),this.nextTick(()=>{this.refresh()},1e3)}[A("$layerList .layer-item .lock")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$lockManager.toggle(r);var i=this.$lockManager.get(r);e.$dt.attr("data-lock",i),i&&this.$context.selection.removeById(r)}[M("changeHoverItem")](){if(this.refs.$layerList.$$(".hovered").forEach(t=>{t.removeClass("hovered")}),this.$context.selection.hoverItems.length){var e=this.$context.selection.hoverItems.map(t=>`[data-layer-id="${t.id}"]`).join(",");this.refs.$layerList.$$(e).forEach(t=>{t.addClass("hovered")})}}[Z("changeSelection")](e=!1){if(e&&this.refs.$layerList){this.refs.$layerList.$$(".selected").forEach(r=>{r.removeClass("selected")}),this.refs.$layerList.$$(".selected-path").forEach(r=>{r.removeClass("selected-path")});var t=this.$context.selection.items.map(r=>`[data-layer-id="${r.id}"]`).join(",");t&&this.refs.$layerList.$$(t).forEach(r=>{r.addClass("selected");var i=this.$context.selection.itemKeys[r.attr("data-layer-id")];i.is("svg-path","svg-polygon")&&r.$(".icon").html(this.getIcon(i))})}}[M(Oe,"refreshAllCanvas")](){this.refresh()}[M("refreshLayerTreeView")+Ss(100)](){this.refresh()}[M("changeItemLayout")](){this.refresh()}[Tt("bodyEvent")](){const t=ge.create(this.$config.get("bodyEvent").target).closest("layer-item");t&&this.emit("refreshHoverView",t.data("layer-id"))}}function A9(s){s.registerElement({LayerTreeProperty:z9})}var D9={title:"Conic",key:"conic",execute:function(s=42){return Rr(s).map(()=>{var e=vr(45,55),t=vr(45,55),r=vr(0,360);return{gradient:`conic-gradient(from ${r}deg at ${e}% ${t}%, ${et.createColorStep(2,360,"deg")})`}})}};const F9=["0deg","45deg","90deg"];var B9={title:"Linear",key:"linear",execute:function(s=42){return Rr(s).map(()=>({gradient:`linear-gradient(${vc(...F9)}, ${et.createColorStep(2)})`}))}},N9={title:"Radial",key:"radial",execute:function(s=42){return Rr(s).map(()=>{var e="circle";return{gradient:`radial-gradient(${e}, ${et.createColorStep(2)})`}})}},G9={title:"Random Conic",key:"random-conic",execute:function(s=42){return Rr(s).map(()=>({gradient:`conic-gradient(from 0deg at 50% 50%, ${et.createColorStep(10,360,"deg")})`}))}};const H9=["0deg","45deg","90deg"];var U9={title:"Random Linear",key:"random-linear",execute:function(s=42){return Rr(s).map(()=>({gradient:`linear-gradient(${vc(...H9)}, ${et.createColorStep(10)})`}))}},W9={title:"Random Radial",key:"random-radial",execute:function(s=42){return Rr(s).map(()=>({gradient:`radial-gradient(circle, ${et.createColorStep(10)})`}))}},X9={title:"Repeat Conic",key:"repeat-conic",execute:function(s=42){return Rr(s).map(()=>({gradient:`repeating-conic-gradient(from 0deg at 0% 50%, ${et.createRepeatColorStep(10,"10deg")})`}))}};const Y9=["0deg","45deg","90deg"];var K9={title:"Repeat Linear",key:"repeat-linear",execute:function(s=42){return Rr(s).map(()=>({gradient:`repeating-linear-gradient(${vc(...Y9)}, ${et.createRepeatColorStep(2,"10px")})`}))}},Z9={title:"Repeat Radial",key:"repeat-radial",execute:function(s=42){return Rr(s).map(()=>{var e="circle";return{gradient:`repeating-radial-gradient(${e}, ${et.createRepeatColorStep(3,"6px")})`}})}},rg=[B9,U9,K9,N9,W9,Z9,D9,G9,X9],vF="";const q9=rg.map(s=>({value:s.key,text:s.title}));class Q9 extends Ge{getTitle(){return this.$i18n("gradient.asset.property.title")}initState(){return{mode:"grid",preset:"linear"}}getTools(){return'
      '}[G("$tools")](){return R("SelectEditor",{ref:"$preset",key:"preset",value:this.state.preset,options:q9,onchange:"changePreset"})}[Z("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--gradient-assets-property"}[M(Oe)+Ne(100)](){this.show()}getBody(){return` +
      +
      +
      + `}[pr("$gradientList .gradient-item")](e){const t=e.$dt.attr("data-gradient");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/gradient",t)}[G("$gradientList")](){var e=rg.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>`
      +
      +
      +
      +
      `);return e.edit&&t.push(`
      ${z("add")}
      `),t}executeGradient(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshGradientAssets")):window.alert("Please select a project.")}[A("$gradientList .add-gradient-item")](){this.executeGradient(e=>{e.createGradient({gradient:yr.random(),name:"",variable:""})})}[A("$gradientList .preview")](e){var t=e.$dt.closest("gradient-item"),r=t.attr("data-gradient");this.$commands.emit("drop.asset",{gradient:r})}}var yF="";function ig(s){window.URL.revokeObjectURL(s)}class J9 extends Ge{getTitle(){return this.$i18n("image.asset.property.title")}initState(){return{mode:"grid"}}getClassNamef(){return"elf--image-assets-property"}afterRender(){this.show()}getBody(){return` +
      +
      +
      + `}[G("$imageList")+Ee](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,r=t.map((i,a)=>` +
      +
      + +
      +
      + + +
      +
      + `);return` +
      + ${r.join("")} +
      + + +
      +
      + + `}executeImage(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshImageAssets")):window.alert("Please select a project.")}[pr("$imageList .preview img")](e){var t=+e.$dt.closest("image-item").attr("data-index"),r=this.$context.selection.currentProject;if(r){var i=r.images[t];e.dataTransfer.setData("image/info",i.local)}}[Sr("$imageList .add-image-item input[type=file]")](e){this.executeImage(()=>{[...e.target.files].forEach(t=>{this.$commands.emit("updateImageAssetItem",t)})})}[A("$imageList .remove")](e){var t=e.$dt.closest("image-item"),r=+t.attr("data-index");this.executeImage(i=>{i.removeImage(r),ig(t.$(".preview img").attr("src"))})}[A("$imageList .copy")](e){var t=e.$dt.closest("image-item"),r=+t.attr("data-index");this.executeImage(i=>{i.copyImage(r)})}[M("addImageAsset")](){this.refresh()}}var eR={key:"check",title:"Check",execute:function(){return[{pattern:"check(20px 20px, 10px 10px, black, transparent)"},{pattern:"check(40px 40px, 20px 20px, black, transparent)"},{pattern:"check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"check(200px 200px, 100px 100px, #102C45, transparent)"}]}},tR={key:"cross-dot",title:"Cross Dot",execute:function(){return[{pattern:"cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)"},{pattern:"cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)"}]}},rR={key:"diagonal-line",title:"Diagonal Line",execute:function(){return[{pattern:"diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)"},{pattern:"diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)"}]}},iR={key:"dot",title:"Dot",execute:function(){return[{pattern:"dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)"},{pattern:"dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)"},{pattern:"dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)"}]}},sR={key:"grid",title:"Grid",execute:function(){return[{pattern:"grid(20px 20px, 10px 10px, black, transparent)"},{pattern:"grid(40px 40px, 20px 20px, black, transparent)"},{pattern:"grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"grid(200px 200px, 100px 100px, #102C45, transparent)"}]}},aR={key:"horizontal-line",title:"Horizontal Line",execute:function(){return[{pattern:"horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)"},{pattern:"horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)"}]}},nR={key:"vertical-line",title:"Vertical Line",execute:function(){return[{pattern:"vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)"},{pattern:"vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)"}]}},oh=[eR,sR,iR,tR,rR,nR,aR],bF="";class sg extends Ge{getTitle(){return this.$i18n("pattern.asset.property.title")}initState(){return{mode:"grid",preset:"check"}}getTools(){const e=ji(oh.map(t=>({value:t.key,text:t.title})));return R("SelectEditor",{ref:"$assets",key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[Z("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--pattern-assets-property"}get editableProperty(){return"pattern"}[M(Oe)+Ne(100)+fe("checkShow")](){}getBody(){return` +
      +
      +
      + `}[pr("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/pattern",t)}[G("$patternList")](){var e=oh.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>{const a=Je(br.toCSS(r.pattern));return`
      +
      +
      +
      +
      `});return t}[A("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");this.$modeView.isCurrentMode(Wi.CanvasView)?this.$commands.emit("addBackgroundImagePattern",t):this.emit("setPatternAsset",t)}}var xF="";class ag extends Ge{getTitle(){return this.$i18n("video.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--video-assets-property"}afterRender(){this.show()}getBody(){return` +
      +
      +
      + `}[G("$videoList")+Ee](){var e=this.$context.selection.currentProject||{videos:[]},t=e.videos,r=t.map((i,a)=>` +
      +
      + +
      +
      + + +
      +
      + `);return` +
      + ${r.join("")} +
      + + +
      +
      + + `}executeVideo(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshVideoAssets")):window.alert("Please select a project.")}[pr("$videoList .preview img")](e){var t=+e.$dt.closest("video-item").attr("data-index"),r=this.$context.selection.currentProject;if(r){var i=r.videos[t];e.dataTransfer.setData("video/info",i.local)}}[Sr("$videoList .add-video-item input[type=file]")](e){this.executeVideo(()=>{[...e.target.files].forEach(t=>{this.emit("updateVideoAssetItem",t)})})}[A("$videoList .remove")](e){var t=e.$dt.closest("video-item"),r=+t.attr("data-index");this.executeVideo(i=>{i.removeVideo(r),ig(t.$(".preview img").attr("src"))})}[A("$videoList .copy")](e){var t=e.$dt.closest("video-item"),r=+t.attr("data-index");this.executeVideo(i=>{i.copyVideo(r)})}[M("addVideoAsset")](){this.refresh()}}zi({VideoAssetsProperty:ag});class oR extends Y{template(){return` +
      + ${this.$injectManager.generate("asset")} +
      + `}}var $F="";class lR extends Y{template(){return` +
      +
      +
      +
      + +
      +
      +
      +
      + `}async[G("$list")](){return(await this.$storageManager.getCustomAssetList()).map(t=>` +
      +
      +
      +
      ${t.component.name}
      +
      + +
      +
      +
      + `)}async[A("$list .remove-asset-preview")](e){if(window.confirm(this.$i18n("app.confirm.message.artboard.items.removeCustomAsset"))){const t=e.$dt.data("preview-id");await this.$storageManager.removeCustomAsset(t),this.refresh()}}[pr("$list .asset-preview")](e){const t=e.$dt.data("preview-id");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/asset",t)}[A("$addCustomAsset")](){this.$commands.emit("savePNG",async e=>{await this.$storageManager.saveCustomAsset(e),this.refresh()})}}var _F="";class cR extends Y{template(){return` +
      +
      + ${R("TextEditor",{label:"Search",key:"search",onchange:this.subscribe((e,t)=>{this.broadcast("search",t)},300)})} +
      + ${this.$injectManager.generate("library")} +
      + `}}var SF="";class hR extends Y{template(){return` +
      +
      + ${R("ProjectProperty")} +
      +
      + ${R("LayerTreeProperty")} +
      +
      + `}}function dR(s){s.context.config.set("layertab.selectedValue","layer"),s.registerUI("layertab.tab",{Layer:{title:s.$i18n("app.tab.title.layers"),icon:z("layers"),value:"layer"},Library:{title:s.$i18n("app.tab.title.libraries"),icon:z("auto_awesome"),value:"library"},Asset:{title:s.$i18n("app.tab.title.assets"),icon:z("apps"),value:"asset"},Component:{title:s.$i18n("app.tab.title.components"),icon:z("plugin"),value:"component"}}),s.registerUI("layertab.tab.layer",{ObjectItems:hR}),s.registerUI("layertab.tab.library",{LibraryItems:cR}),s.registerUI("layertab.tab.asset",{AssetItems:oR}),s.registerUI("layertab.tab.component",{CustomAssets:lR}),s.registerUI("asset",{GradientAssetsProperty:Q9,PatternAssetsProperty:sg,ImageAssetsProperty:J9,VideoAssetsProperty:ag})}var PF="";class uR extends Ge{getTitle(){return this.$i18n("default.layout.item.property.title.constraints")}getClassName(){return"elf--default-layout-item-property"}getBody(){return`
      - `}[ve("$constraintsInfo")+It](){var e=this.$context.selection.current;const t=(e==null?void 0:e["constraints-horizontal"])||Tt.MIN,i=(e==null?void 0:e["constraints-vertical"])||Tt.MIN;return` + `}[G("$constraintsInfo")+Ee](){var e=this.$context.selection.current;const t=(e==null?void 0:e["constraints-horizontal"])||Me.MIN,r=(e==null?void 0:e["constraints-vertical"])||Me.MIN;return`
      -
      -
      -
      +
      +
      +
      -
      -
      -
      +
      +
      +
      - `}[ve("$constraintsInfoInput")](){var e=this.$context.selection.current;const t=e==null?void 0:e.hasLayout();return` + `}[G("$constraintsInfoInput")](){var e=this.$context.selection.current;const t=e==null?void 0:e.hasLayout();return`
      - ${W("SelectEditor",{ref:"$constraintsHorizontal",key:"constraints-horizontal",value:(e==null?void 0:e["constraints-horizontal"])||"min",label:re("width"),compact:!0,options:[{value:"min",text:"Left"},{value:"max",text:"Right"},{value:"stretch",text:"Left and Right",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} + ${R("SelectEditor",{ref:"$constraintsHorizontal",key:"constraints-horizontal",value:(e==null?void 0:e["constraints-horizontal"])||"min",label:z("width"),compact:!0,options:[{value:"min",text:"Left"},{value:"max",text:"Right"},{value:"stretch",text:"Left and Right",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})}
      - ${W("SelectEditor",{ref:"$constraintsVertical",key:"constraints-vertical",value:(e==null?void 0:e["constraints-vertical"])||"min",label:re("height"),compact:!0,options:[{value:"min",text:"Top"},{value:"max",text:"Bottom"},{value:"stretch",text:"Top and Bottom",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} + ${R("SelectEditor",{ref:"$constraintsVertical",key:"constraints-vertical",value:(e==null?void 0:e["constraints-vertical"])||"min",label:z("height"),compact:!0,options:[{value:"min",text:"Top"},{value:"max",text:"Bottom"},{value:"stretch",text:"Top and Bottom",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})}
      - `}[se("$constraintsInfo .item")](e){const[t,i]=e.$dt.attrs("data-value","data-key"),r=this.$context.selection.current;!r||(r.changeConstraints(i,t,e.shiftKey),this.trigger("changeConstraints",i,r[i]))}[Me("changeConstraints")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[U(kt)+Ft(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.isInDefault()&&e.parent.isNot("project")})}}var Tre="";class mH extends ge{template(){return D("div",{class:"elf--flex-grow-tool-view"})}[ve("$el")+It](){return this.$context.selection.map(e=>{const t=e.parent;if(!!t&&!t.is("project")&&t.isLayout(At.FLEX)!==!1)return t.layers.map(i=>{const s=this.$viewport.applyVerties(i.verties)[4];let a=0,o=i.screenWidth||0;const l=t==null?void 0:t.flexDirection;return l===br.ROW?(i.resizingHorizontal===wt.FILL_CONTAINER&&(a=i.flexGrow||1),o=i.screenWidth):l===br.COLUMN&&(i.resizingVertical===wt.FILL_CONTAINER&&(a=i.flexGrow||1),o=i.screenHeight),D("div",{class:"flex-grow-item",style:{left:y.px(s[0]),top:y.px(s[1])},"data-flex-item-id":i.id,"data-parent-direction":l,"data-flex-grow":a},D("span",{class:"size"},Math.floor(o))," ",D("span",{class:"grow"},a||"x"))}).join("")})}[qe("$el .flex-grow-item")+at()+lt()](e){const[t,i]=e.$dt.attrs("data-flex-item-id","data-flex-grow");this.setState({id:t,grow:+i},!1)}getFlexGrow(e,t,i,r,s){let a=i;return e===br.ROW&&t.resizingHorizontal===wt.FILL_CONTAINER?a=i+Math.floor(r/10):e===br.COLUMN&&t.resizingVertical===wt.FILL_CONTAINER&&(a=i+Math.floor(s/10)),a=Math.max(1,a),a}move(e,t){const{id:i,grow:r}=this.state,s=this.$editor.get(i);if(!s)return;const a=s.parent;if(!a)return;const o=a.flexDirection;let l=this.getFlexGrow(o,s,r,e,t);this.$commands.emit("setAttribute",{[i]:{flexGrow:l}})}end(e,t){const{id:i,grow:r}=this.state,s=this.$editor.get(i);if(!s)return;const a=s.parent;if(!a)return;const o=a.flexDirection;let l=this.getFlexGrow(o,s,r,e,t);e===0&&t===0?o===br.ROW&&s.resizingHorizontal!==wt.FILL_CONTAINER?this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:1,resizingHorizontal:wt.FILL_CONTAINER}}):o===br.COLUMN&&s.resizingVertical!==wt.FILL_CONTAINER&&this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:1,resizingVertical:wt.FILL_CONTAINER}}):this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:l}}),this.nextTick(()=>{this.refresh()},10)}[U(si)](){this.refresh()}[U(kt)+oo(100)](){this.refresh()}[U(Gi)+oo(1)](){this.refresh()}[Qt("set.move.control.point")](){this.refresh()}}var Cre="";class vH extends ge{initialize(){super.initialize(),this.directionOptions=this.getDirectionOptions(),this.wrapOptions=this.getWrapOptions(),this.justifyContentOptions=this.getJustifyContentOptions(),this.alignItemsOptions=this.getAlignItemsOptions()}getDirectionOptions(){return this.makeOptionsFunction("row,column")}getWrapOptions(){return this.makeOptionsFunction("nowrap,wrap")}getJustifyContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around")}getAlignItemsOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch")}getAlignContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch")}makeOptionsFunction(e){return e.split(",").map(t=>({value:t,text:this.$i18n("flex.layout.editor."+t)}))}initState(){return P({},this.props.value)}setValue(e){this.setState(P({},e))}getValue(){return this.state}modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}[ve("$body")+It](){const e=this.$context.selection.current;if(!e)return"";const t=Math.min(e.paddingTop||0,50),i=Math.min(e.paddingLeft||0,50),r=Math.min(e.paddingRight||0,50),s=Math.min(e.paddingBottom||0,50),a=`padding-top:${t}px;padding-left: ${i}px;padding-right:${r}px;padding-bottom: ${s}px;`;return`
      ${W("SelectIconEditor",{key:"flexDirection",ref:"$flexDirection",value:this.state.flexDirection||br.ROW,options:this.directionOptions,icons:["east","south"],onchange:"changeKeyValue"})}
      ${W("NumberInputEditor",{compact:!0,ref:"$flex-gap",label:re("space"),key:"gap",value:this.state.gap,min:0,max:100,step:1,onchange:"changeKeyValue"})}
      ${W("NumberInputEditor",{compact:!0,label:re("padding"),key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:100,step:1,onchange:"changePadding"})}
      ${W("ToggleButton",{compact:!0,key:"flexWrap",ref:"$wrap",checkedValue:"wrap",value:this.state.flexWrap||Bc.NOWRAP,toggleLabels:[re("wrap"),re("wrap")],toggleValues:[Bc.NOWRAP,Bc.WRAP],onchange:"changeKeyValue"})}
      + `}[A("$constraintsInfo .item")](e){const[t,r]=e.$dt.attrs("data-value","data-key"),i=this.$context.selection.current;!i||(i.changeConstraints(r,t,e.shiftKey),this.trigger("changeConstraints",r,i[r]))}[Z("changeConstraints")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+Ne(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.isInDefault()&&e.parent.isNot("project")})}}var wF="";class pR extends Y{template(){return C("div",{class:"elf--flex-grow-tool-view"})}[G("$el")+Ee](){return this.$context.selection.map(e=>{const t=e.parent;if(!!t&&!t.is("project")&&t.isLayout(Ae.FLEX)!==!1)return t.layers.map(r=>{const a=this.$viewport.applyVerties(r.verties)[4];let n=0,o=r.screenWidth||0;const l=t==null?void 0:t.flexDirection;return l===Zt.ROW?(r.resizingHorizontal===Ce.FILL_CONTAINER&&(n=r.flexGrow||1),o=r.screenWidth):l===Zt.COLUMN&&(r.resizingVertical===Ce.FILL_CONTAINER&&(n=r.flexGrow||1),o=r.screenHeight),C("div",{class:"flex-grow-item",style:{left:p.px(a[0]),top:p.px(a[1])},"data-flex-item-id":r.id,"data-parent-direction":l,"data-flex-grow":n},C("span",{class:"size"},Math.floor(o))," ",C("span",{class:"grow"},n||"x"))}).join("")})}[me("$el .flex-grow-item")+xe()+Se()](e){const[t,r]=e.$dt.attrs("data-flex-item-id","data-flex-grow");this.setState({id:t,grow:+r},!1)}getFlexGrow(e,t,r,i,a){let n=r;return e===Zt.ROW&&t.resizingHorizontal===Ce.FILL_CONTAINER?n=r+Math.floor(i/10):e===Zt.COLUMN&&t.resizingVertical===Ce.FILL_CONTAINER&&(n=r+Math.floor(a/10)),n=Math.max(1,n),n}move(e,t){const{id:r,grow:i}=this.state,a=this.$editor.get(r);if(!a)return;const n=a.parent;if(!n)return;const o=n.flexDirection;let l=this.getFlexGrow(o,a,i,e,t);this.$commands.emit("setAttribute",{[r]:{flexGrow:l}})}end(e,t){const{id:r,grow:i}=this.state,a=this.$editor.get(r);if(!a)return;const n=a.parent;if(!n)return;const o=n.flexDirection;let l=this.getFlexGrow(o,a,i,e,t);e===0&&t===0?o===Zt.ROW&&a.resizingHorizontal!==Ce.FILL_CONTAINER?this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:1,resizingHorizontal:Ce.FILL_CONTAINER}}):o===Zt.COLUMN&&a.resizingVertical!==Ce.FILL_CONTAINER&&this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:1,resizingVertical:Ce.FILL_CONTAINER}}):this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:l}}),this.nextTick(()=>{this.refresh()},10)}[M(st)](){this.refresh()}[M(Oe)+Ss(100)](){this.refresh()}[M(Mt)+Ss(1)](){this.refresh()}[Tt("set.move.control.point")](){this.refresh()}}var CF="";class gR extends Y{initialize(){super.initialize(),this.directionOptions=this.getDirectionOptions(),this.wrapOptions=this.getWrapOptions(),this.justifyContentOptions=this.getJustifyContentOptions(),this.alignItemsOptions=this.getAlignItemsOptions()}getDirectionOptions(){return this.makeOptionsFunction("row,column")}getWrapOptions(){return this.makeOptionsFunction("nowrap,wrap")}getJustifyContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around")}getAlignItemsOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch")}getAlignContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch")}makeOptionsFunction(e){return e.split(",").map(t=>({value:t,text:this.$i18n("flex.layout.editor."+t)}))}initState(){return b({},this.props.value)}setValue(e){this.setState(b({},e))}getValue(){return this.state}modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}[G("$body")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=Math.min(e.paddingTop||0,50),r=Math.min(e.paddingLeft||0,50),i=Math.min(e.paddingRight||0,50),a=Math.min(e.paddingBottom||0,50),n=`padding-top:${t}px;padding-left: ${r}px;padding-right:${i}px;padding-bottom: ${a}px;`;return`
      ${R("SelectIconEditor",{key:"flexDirection",ref:"$flexDirection",value:this.state.flexDirection||Zt.ROW,options:this.directionOptions,icons:["east","south"],onchange:"changeKeyValue"})}
      ${R("NumberInputEditor",{compact:!0,ref:"$flex-gap",label:z("space"),key:"gap",value:this.state.gap,min:0,max:100,step:1,onchange:"changeKeyValue"})}
      ${R("NumberInputEditor",{compact:!0,label:z("padding"),key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:100,step:1,onchange:"changePadding"})}
      ${R("ToggleButton",{compact:!0,key:"flexWrap",ref:"$wrap",size:30,checkedValue:"wrap",value:this.state.flexWrap||Ua.NOWRAP,toggleLabels:[z("wrap"),z("wrap")],toggleValues:[Ua.NOWRAP,Ua.WRAP],onchange:"changeKeyValue"})}
      @@ -2256,7 +2220,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      +
      {if(this.isMultiStyle(i.key))return this.getMultiStyle
      ${this.$i18n("flex.layout.editor.justify-content")}
      - ${W("SelectIconEditor",{key:"justifyContent",ref:"$justify",value:this.state.justifyContent||uo.FLEX_START,options:this.justifyContentOptions,icons:["start","end","horizontal_align_center","horizontal_distribute","justify_content_space_around"],onchange:"changeKeyValue"})} + ${R("SelectIconEditor",{key:"justifyContent",ref:"$justify",value:this.state.justifyContent||Cs.FLEX_START,options:this.justifyContentOptions,icons:["start","end","horizontal_align_center","horizontal_distribute","justify_content_space_around"],onchange:"changeKeyValue"})}
      ${this.$i18n("flex.layout.editor.align-items")}
      - ${W("SelectIconEditor",{key:"alignItems",ref:"$alignItems",value:this.state.alignItems||Ps.FLEX_START,options:this.alignItemsOptions,icons:["vertical_align_top","vertical_align_bottom","vertical_align_center","vertical_align_baseline","vertical_align_stretch"],onchange:"changeKeyValue"})} + ${R("SelectIconEditor",{key:"alignItems",ref:"$alignItems",value:this.state.alignItems||vi.FLEX_START,options:this.alignItemsOptions,icons:["vertical_align_top","vertical_align_bottom","vertical_align_center","vertical_align_baseline","vertical_align_stretch"],onchange:"changeKeyValue"})}
      `}template(){return`
      - `}[Me("changeKeyValue")](e,t){this.setState({[e]:t},!1),this.modifyData(e,t),this.refresh()}[Me("changePadding")](e,t){this.setState({[e]:t},!1),this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t}),this.refresh()}[se("$body .tool-area-item")](e){const t=e.$dt,[i,r]=t.attrs("data-justify-content","data-align-items","data-align-content");this.state.justifyContent===uo.SPACE_BETWEEN?(this.setState({alignItems:r},!1),this.modifyData("alignItems",r)):this.state.justifyContent===uo.SPACE_AROUND?(this.setState({alignItems:r},!1),this.modifyData("align-item",r)):(this.setState({justifyContent:i,alignItems:r},!1),this.modifyData("justifyContent",i),this.modifyData("alignItems",r)),this.refresh()}}var Ere="";const yH=/(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi;class bH extends ge{getLayoutItemOptions(){return"none,auto,repeat,length".split(",").map(e=>({value:e,text:this.$i18n(`grid.box.editor.${e}`)}))}initState(){return{label:this.props.label,list:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){let t=null;for(var i=[];(t=yH.exec(e))!==null;){var r=t[0];if(r==="auto")i.push({type:"auto",count:0,value:"0px"});else if(r.includes("repeat")){var s=r.split("repeat(")[1].split(")");s.pop();let[a,...o]=s.join("").split(",");i.push({type:"repeat",count:a,value:o.join(", ")})}else i.push({type:"length",count:1,value:r})}return i}getValue(){return this.state.list.map(e=>e.type==="repeat"?`repeat(${e.count}, ${e.value})`:e.type==="auto"||e.type==="none"?e.type:e.value).join(" ")}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(e,t){return` + `}[Z("changeKeyValue")](e,t){this.setState({[e]:t},!1),this.modifyData(e,t),this.refresh()}[Z("changePadding")](e,t){this.setState({[e]:t},!1),this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t}),this.refresh()}[A("$body .tool-area-item")](e){const t=e.$dt,[r,i]=t.attrs("data-justify-content","data-align-items","data-align-content");this.state.justifyContent===Cs.SPACE_BETWEEN?(this.setState({alignItems:i},!1),this.modifyData("alignItems",i)):this.state.justifyContent===Cs.SPACE_AROUND?(this.setState({alignItems:i},!1),this.modifyData("align-item",i)):(this.setState({justifyContent:r,alignItems:i},!1),this.modifyData("justifyContent",r),this.modifyData("alignItems",i)),this.refresh()}}var TF="";const fR=/(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi;class mR extends Y{getLayoutItemOptions(){return"none,auto,repeat,length".split(",").map(e=>({value:e,text:this.$i18n(`grid.box.editor.${e}`)}))}initState(){return{label:this.props.label,list:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){let t=null;for(var r=[];(t=fR.exec(e))!==null;){var i=t[0];if(i==="auto")r.push({type:"auto",count:0,value:"0px"});else if(i.includes("repeat")){var a=i.split("repeat(")[1].split(")");a.pop();let[n,...o]=a.join("").split(",");r.push({type:"repeat",count:n,value:o.join(", ")})}else r.push({type:"length",count:1,value:i})}return r}getValue(){return this.state.list.map(e=>e.type==="repeat"?`repeat(${e.count}, ${e.value})`:e.type==="auto"||e.type==="none"?e.type:e.value).join(" ")}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(e,t){return`
      - ${W("SelectEditor",{ref:`$${t}-type`,compact:!0,options:this.getLayoutItemOptions(),key:"type",value:e.type||"auto",params:t,onchange:"changeKeyValue"})} + ${R("SelectEditor",{ref:`$${t}-type`,compact:!0,options:this.getLayoutItemOptions(),key:"type",value:e.type||"auto",params:t,onchange:"changeKeyValue"})}
      - ${W("NumberInputEditor",{compact:!0,ref:`$${t}-count`,key:"count",value:e.count,params:t,max:1e3,onchange:"changeKeyValue"})} + ${R("NumberInputEditor",{compact:!0,ref:`$${t}-count`,key:"count",value:e.count,params:t,max:1e3,onchange:"changeKeyValue"})}
      - ${W("InputRangeEditor",{ref:`$${t}-value`,compact:!0,key:"value",value:e.value,params:t,units:["auto","fr","px","em","%"],onchange:"changeKeyValue"})} + ${R("InputRangeEditor",{ref:`$${t}-value`,compact:!0,key:"value",value:e.value,params:t,units:["auto","fr","px","em","%"],onchange:"changeKeyValue"})}
      - - + +
      - `}[ve("$list")](){return this.state.list.map((e,t)=>this.makeItem(e,t))}template(){return` + `}[G("$list")](){return this.state.list.map((e,t)=>this.makeItem(e,t))}template(){return`
      - +
      ${this.$i18n("grid.box.editor.count")}
      ${this.$i18n("grid.box.editor.value")}
      @@ -2338,112 +2302,112 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}[se("$list .remove")](e){var t=+e.$dt.closest("item").attr("data-index");this.state.list.splice(t,1),this.refresh(),this.modifyData()}[se("$list .copy")](e){var t=+e.$dt.closest("item").attr("data-index"),i=rt(this.state.list[t]);this.state.list.splice(t,0,i),this.refresh(),this.modifyData()}[se("$add")](){this.trigger("add")}[U("add")](){this.state.list.push({type:"auto",count:0,value:"0px"}),this.refresh(),this.modifyData()}[Me("changeKeyValue")](e,t,i){var r=+i,s=this.state.list[r];s&&(e==="type"&&this.refs.$list.$(`[data-index="${r}"]`).attr("data-repeat-type",t),s[e]=t),this.modifyData()}}class xH extends ge{initState(){return{label:this.props.label,value:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){return y.parse(e)}getValue(){return this.state.value}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(){return` + `}[A("$list .remove")](e){var t=+e.$dt.closest("item").attr("data-index");this.state.list.splice(t,1),this.refresh(),this.modifyData()}[A("$list .copy")](e){var t=+e.$dt.closest("item").attr("data-index"),r=be(this.state.list[t]);this.state.list.splice(t,0,r),this.refresh(),this.modifyData()}[A("$add")](){this.trigger("add")}[M("add")](){this.state.list.push({type:"auto",count:0,value:"0px"}),this.refresh(),this.modifyData()}[Z("changeKeyValue")](e,t,r){var i=+r,a=this.state.list[i];a&&(e==="type"&&this.refs.$list.$(`[data-index="${i}"]`).attr("data-repeat-type",t),a[e]=t),this.modifyData()}}class vR extends Y{initState(){return{label:this.props.label,value:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){return p.parse(e)}getValue(){return this.state.value}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(){return`
      - ${W("InputRangeEditor",{label:this.state.label,wide:!0,ref:"$value",key:"value",value:this.state.value,max:500,units:["px","em","%"],onchange:"changeKeyValue"})} + ${R("InputRangeEditor",{label:this.state.label,wide:!0,ref:"$value",key:"value",value:this.state.value,max:500,units:["px","em","%"],onchange:"changeKeyValue"})}
      - `}[ve("$list")](){return this.makeItem()}template(){return` + `}[G("$list")](){return this.makeItem()}template(){return`
      - `}[Me("changeKeyValue")](e,t){this.state.value=t,this.modifyData()}}var Ire="";class Ca{static parseStyle(e){const t=[];return _l(e).forEach(i=>{switch(i.func){case Ut.REPEAT:for(var r=0,s=i.parsed.count;r{i[r.id]={gridRowStart:Math.max(1,Math.min(t.length,r.gridRowStart)),gridRowEnd:Math.min(t.length+1,r.gridRowEnd)}}),this.$commands.executeCommand("setAttribute","change grid rows",Ve(P({},i),{[e.id]:{gridTemplateRows:Ca.join(t)}}))}updateColumns(e,t){const i={};e.layers.forEach(r=>{i[r.id]={gridColumnStart:Math.max(1,Math.min(t.length,r.gridColumnStart)),gridColumnEnd:Math.min(t.length+1,r.gridColumnEnd)}}),this.$commands.executeCommand("setAttribute","change grid columns",Ve(P({},i),{[e.id]:{gridTemplateColumns:Ca.join(t)}}))}updateColumnGap(e,t){this.$commands.executeCommand("setAttribute","change grid column gap",{[e.id]:{gridColumnGap:`${t}`}})}updateRowGap(e,t){this.$commands.executeCommand("setAttribute","change grid row gap",{[e.id]:{gridRowGap:`${t}`}})}createNewGridItems(e){let t=[];return e.length===0?t=[y.fr(1)]:t=[...e,e[e.length-1]],t}copyNewGridItems(e,t){return[...e.slice(0,t+1),...e.slice(t)]}getScaleDist(e){return e/this.$viewport.scale}}class SH extends _H{checkTargetLayer(){const e=this.getGridTargetLayer();return!(!e||e.isLayout(At.GRID)===!1)}[se("$grid .column-plus")+Qe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateColumns(e.current,this.createNewGridItems(e.columns))}[se("$grid .row-plus")+Qe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateRows(e.current,this.createNewGridItems(e.rows))}[se("$grid .column-delete")+Qe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.columns.length<2){this.alert("Alert","Columns can not be less than one.",2e3);return}const i=+e.$dt.data("index"),r=[...t.columns.slice(0,i),...t.columns.slice(i+1)];this.updateColumns(t.current,r)}[se("$grid .column-add")+Qe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),i=+e.$dt.data("index");this.updateColumns(t.current,this.copyNewGridItems(t.columns,i),i+1)}[se("$grid .row-add")+Qe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),i=+e.$dt.data("index");this.updateRows(t.current,this.copyNewGridItems(t.rows,i))}[se("$grid .row-delete")+Qe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.rows.length<2){this.alert("Alert","Rows can not be less than one.",2e3);return}const i=+e.$dt.data("index"),r=[...t.rows.slice(0,i),...t.rows.slice(i+1)];this.updateRows(t.current,r)}}class wH extends SH{[qe("$gridGap .gap-tool.column-gap")+Qe("checkTargetLayer")+Oc("moveFirstColumnGap")+at("moveColumnGap")+lt("moveEndColumnGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.columnGap=t.columnGap,this.lastColumnGap=t.columnGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}updateGapPointer(e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition());this.refs.$pointer.text(`${e}`),this.refs.$pointer.css({left:y.px(t[0]),top:y.px(t[1]+20)})}moveFirstColumnGap(){this.refs.$pointer.show(),this.updateGapPointer(this.columnGap)}moveColumnGap(){const e=this.$viewport.getWorldPosition(),i=ft([],e,this.initMousePosition)[0]/this.getScaleDist(100),r=this.columnGap;let s=r;r instanceof y&&(r.isPercent()?s=y.percent(Math.max(r.value+i*this.getScaleDist(5),0)).round(1e3):(r.isPx()||r.isEm())&&(s=y.px(Math.max(r.value+i*this.getScaleDist(100),0)).floor())),this.lastColumnGap=s,this.updateColumnGap(this.current,s),this.updateGapPointer(this.lastColumnGap)}moveEndColumnGap(){const e=this.$viewport.getWorldPosition();Ne(e,this.initMousePosition)<1&&(this.lastColumnGap.isPx()||this.lastColumnGap.isEm()?this.lastColumnGap=y.makePercent(this.lastColumnGap.value,this.current.screenWidth):this.lastColumnGap=this.lastColumnGap.toPx(this.current.screenWidth)),this.updateColumnGap(this.current,this.lastColumnGap),this.refs.$pointer.hide()}[qe("$gridGap .gap-tool.row-gap")+Qe("checkTargetLayer")+Oc("moveFirstColumnGap")+at("moveRowGap")+lt("moveEndRowGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.rowGap=t.rowGap,this.lastColumnGap=t.rowGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRowGap(){const e=this.$viewport.getWorldPosition(),i=ft([],e,this.initMousePosition)[1]/this.getScaleDist(100),r=this.rowGap;let s=r;console.log(r),r instanceof y&&(r.isPercent()?s=y.percent(Math.max(r.value+i*this.getScaleDist(5),0)).round(1e3):(r.isPx()||r.isNumber())&&(s=y.px(Math.max(r.value+i*this.getScaleDist(100),0)).floor())),this.lastRowGap=s,this.updateRowGap(this.current,s),this.updateGapPointer(this.lastRowGap)}moveEndRowGap(){const e=this.$viewport.getWorldPosition();Ne(e,this.initMousePosition)<1&&(this.lastRowGap||(this.lastRowGap=y.px(0)),this.lastRowGap.isPx()||this.lastRowGap.isNumber()?this.lastRowGap=y.makePercent(this.lastRowGap.value,this.current.screenHeight):this.lastRowGap=this.lastRowGap.toPx(this.current.screenHeight)),this.updateRowGap(this.current,this.lastRowGap),this.refs.$pointer.hide()}[qe("$grid .grid-item-tool.column .item")+at("moveColumn")+lt("moveEndColumn")](e){const t=+e.$dt.data("index"),i=this.getGridLayoutInformation();this.current=i.current,this.columns=i.columns,this.selectedColumnIndex=t,this.selectedColumnWidth=i.columns[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveColumn(){const e=this.$viewport.getWorldPosition(),t=ft([],e,this.initMousePosition),i=t[0]/this.getScaleDist(100),r=this.selectedColumnWidth;if(r instanceof y){if(r.isPercent()){var s=Math.max(r.value+i*this.getScaleDist(5),1);this.columns[this.selectedColumnIndex]=y.percent(s).round(1e3)}else if(r.isPx()||r.isNumber()){var s=Math.max(10,r.value+i*this.getScaleDist(100));this.columns[this.selectedColumnIndex]=y.px(s).floor()}else if(r.isFr()){var s=Math.max(r.value+Math.floor(t[0]/this.getScaleDist(20))*.25,.25);this.columns[this.selectedColumnIndex]=y.fr(s)}else{var s=Math.max(r.value+i*1,10);this.columns[this.selectedColumnIndex]=new y(s,r.unit)}this.updateColumns(this.current,this.columns)}}changedColumnSize(){const e=this.getGridLayoutInformation(),t=this.selectedColumnIndex,i=this.selectedColumnWidth;if(i instanceof y)i.isPercent()?this.columns[t]=y.fr(1):i.isPx()||i.isNumber()?this.columns[t]=y.makePercent(i.value,e.current.screenWidth).round(1e3):i.isFr()&&(this.columns[t]="auto");else if(i==="auto"){const{items:r}=this.state.lastGridInfo,s=r.find(a=>a.column===t+1);this.columns[t]=y.px(s.rect.width).floor()}}moveEndColumn(){const e=this.$viewport.getWorldPosition();Ne(e,this.initMousePosition)<1&&this.changedColumnSize(),this.updateColumns(this.current,this.columns)}[qe("$grid .grid-item-tool.row .item")+at("moveRow")+lt("moveEndRow")](e){const t=+e.$dt.data("index"),i=this.getGridLayoutInformation();this.current=i.current,this.rows=i.rows,this.selectedRowIndex=t,this.selectedRowHeight=i.rows[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRow(){const e=this.$viewport.getWorldPosition(),t=ft([],e,this.initMousePosition),i=t[1]/this.getScaleDist(30),r=this.selectedRowHeight;if(r instanceof y){if(r.isPercent()){var s=Math.max(r.value-i*this.getScaleDist(5),1);this.rows[this.selectedRowIndex]=y.percent(s).round(1e3)}else if(r.isPx()||r.isNumber()){var s=Math.max(10,r.value-i*this.getScaleDist(100));this.rows[this.selectedRowIndex]=y.px(s).floor()}else if(r.isFr()){var s=Math.max(r.value+Math.floor(t[1]/this.getScaleDist(20))*.25,.25);this.rows[this.selectedRowIndex]=y.fr(s)}else{var s=Math.max(r.value-i*1,10);this.rows[this.selectedRowIndex]=new y(s,r.unit)}this.updateRows(this.current,this.rows)}}changedRowSize(){const e=this.getGridLayoutInformation(),t=this.selectedRowIndex,i=this.selectedRowHeight;if(i instanceof y)i.isPercent()?this.rows[t]=y.fr(1):i.isPx()||i.isNumber()?this.rows[t]=y.makePercent(i.value,e.current.screenHeight).round(1e3):i.isFr()&&(this.rows[t]="auto");else if(i==="auto"){const{items:r}=this.state.lastGridInfo,s=r.find(a=>a.row===t+1);this.rows[t]=y.px(s.rect.height).floor()}}moveEndRow(){const e=this.$viewport.getWorldPosition();Ne(e,this.initMousePosition)<1&&this.changedRowSize(),this.updateRows(this.current,this.rows)}}class MH extends wH{template(){return D("div",{class:"elf--grid-grow-tool-view"},D("div",{class:"layout-rect",ref:"$grid"}),D("div",{class:"layout-rect blank-tool",ref:"$gridGap"}),D("div",{class:"layout-pointer",ref:"$pointer"}))}[$e("$el")](){var t;const e=this.getGridTargetLayer();return{"data-drag-target-item":Boolean(this.$context.selection.dragTargetItem),"data-grid-layout-own":((t=this.$context.selection.current)==null?void 0:t.id)===(e==null?void 0:e.id),style:{display:e?"block":"none"}}}[$e("$grid")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(At.GRID)===!1)return"";const t=Zi(this.$viewport.applyVerties(e.verties)),i=this.getGridLayoutInformation(),[r,s,a,o]=this.getScaledInformation([y.px(i.current.paddingTop),y.px(i.current.paddingRight),y.px(i.current.paddingBottom),y.px(i.current.paddingLeft)]),l=this.getScaledInformation(i.columns),c=this.getScaledInformation(i.rows),h=this.getScaledLength(i.columnGap),d=this.getScaledLength(i.rowGap),u=ft([],e.verties[1],e.verties[0]),p=li(u[0],u[1])-180;return{style:{display:"grid","grid-template-columns":Ca.join(l),"grid-template-rows":Ca.join(c),"grid-column-gap":h,"grid-row-gap":d,left:y.px(t.left),top:y.px(t.top),width:y.px(t.width),height:y.px(t.height),"padding-top":r,"padding-right":s,"padding-bottom":a,"padding-left":o,"transform-origin":"left top",transform:`rotate(${p}deg)`}}}[$e("$gridGap")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(At.GRID)===!1)return"";const t=Zi(this.$viewport.applyVerties(e.verties)),i=ft([],e.verties[1],e.verties[0]),r=li(i[0],i[1])-180;return{style:{left:y.px(t.left),top:y.px(t.top),width:y.px(t.width),height:y.px(t.height),"transform-origin":"left top",transform:`rotate(${r}deg)`}}}getScaledInformation(e){return e.map(t=>this.getScaledLength(t))}getScaledLength(e){return ni(e)?e:e instanceof y&&(e.isPx()||e.isNumber())?e.clone().mul(this.$viewport.scale):e}getGridTargetLayer(){if(this.$context.selection.dragTargetItem)return this.$context.selection.dragTargetItem;const e=this.$context.selection.current;if(!e)return null;if(e.isLayout(At.GRID))return e;const t=e.parent;return t&&t.is("project")?null:t&&t.isLayout(At.GRID)?t:null}getParsedValue(e){return e==="auto"?e:y.parse(e)}getGridLayoutInformation(){const e=this.getGridTargetLayer(),t=Ca.parseStyle(e.gridTemplateColumns),i=Ca.parseStyle(e.gridTemplateRows);return{current:e,columns:t,columnGap:this.getParsedValue(e.gridColumnGap),rows:i,rowGap:this.getParsedValue(e.gridRowGap)}}afterLoadRendering(e,t){this.trigger("refreshGridInformation",e,t)}[Me("refreshGridInformation")+Ft(10)](e,t){const i=this.getGridTargetLayer();if(!i||i.isLayout(At.GRID)===!1||t!=="$grid")return;const r=this.getGridLayoutInformation(),s=this.$viewport.scale,a=e.$$(".grid-item").map(o=>{const[l,c]=o.attrs("data-row","data-column").map(v=>+v),{x:h,y:d,width:u,height:p}=o.offsetRect(),f={x:h/s,y:d/s,width:u/s,height:p/s},g=Xe(Ei(f.x,f.y,f.width,f.height),r.current.absoluteMatrix),m=g.filter((v,b)=>b<4);return{row:l,column:c,rect:f,info:r,verties:g,originVerties:m,originRect:Zi(m)}});this.state.lastGridInfo={info:r,items:a},this.load("$gridGap"),this.$context.selection.updateGridInformation({info:r,items:a})}[ve("$gridGap")+It](){if(!this.getGridTargetLayer()||this.$config.true("set.move.control.point")||!this.$context.selection.current)return"";const t=this.state.lastGridInfo,i=this.$viewport.scale;if(!t)return"";const{info:r,items:s}=t,{columns:a,rows:o}=r,l=[],c=s.filter(x=>x.column===1),h=s.filter(x=>x.row===1),d=Math.min(...c.map(x=>x.verties[0][1])),p=Math.max(...c.map(x=>x.verties[2][1]))-d;for(var f=1,g=a.length;fx.verties[0][0])),b=Math.max(...h.map(x=>x.verties[2][0]))-m;for(var _=1,g=o.length;_x.type==="column-gap"?D("div",{class:"gap-tool column-gap",style:{left:y.px(x.x*i),top:y.px(x.y*i),width:y.px(Math.max(x.width*i,5)),height:y.px(x.height*i)}}):x.type==="row-gap"?D("div",{class:"gap-tool row-gap",style:{left:y.px(x.x*i),top:y.px(x.y*i),height:y.px(Math.max(x.height*i,5)),width:y.px(x.width*i)}}):"")}isSelectedColumn(e){const t=this.$context.selection.current;return t.gridColumnStart<=e&&e{const o=r&&this.isSelectedColumn(a+1)?"selected":"";return D("div",{class:`grid-item-tool column ${o}`,"data-index":a,style:{"grid-column":`${a+1} / span 1`,"grid-row":"1 / span 1"}},D("div",{class:"grid-item-tool-inner"},D("div",{class:"item","data-index":a},D("span",null,t.columns[a])),D("div",{class:"drag-handle right"},D("div",{class:"column-delete","data-index":a,title:`Delete ${t.columns[a]}`},re("close")),D("div",{class:"column-add","data-index":a,title:`Add ${t.columns[a]}`},re("add")))))}),D("div",{class:"grid-item-tool append column-plus",style:{"grid-column":`${t.columns.length} / span 1`,"grid-row":"1 / span 1"}},re("add")),Array.from(Array(t.rows.length).keys()).map(a=>{const o=r&&this.isSelectedRow(a+1)?"selected":"";return D(Yi,null,D("div",{class:`grid-item-tool row ${o}`,style:{"grid-row":`${a+1} / span 1`,"grid-column":"1 / span 1"}},D("div",{class:"grid-item-tool-inner"},D("div",{class:"item","data-index":a},D("span",null,t.rows[a])),D("div",{class:"drag-handle bottom"},D("div",{class:"row-delete","data-index":a,title:`Delete ${t.rows[a]}`},re("close")),D("div",{class:"row-add","data-index":a,title:`Add ${t.rows[a]}`},re("add"))))))}),D("div",{class:"grid-item-tool append row-plus",style:{"grid-row":`${t.rows.length} / span 1`,"grid-column":"1 / span 1"}},re("add")),Array.from(Array(i).keys()).map(a=>{const o=a%t.columns.length,l=Math.floor(a/t.columns.length);return D(Yi,null,D("div",{class:"grid-item","data-row":l+1,"data-column":o+1,style:{"grid-column":`${o+1} / span 1`,"grid-row":`${l+1} / span 1`}}))}))}[U("refreshGridToolInfo")](){this.refresh()}[U(si)](){this.refresh()}[U(kt)+Ft(100)](){this.refresh()}[U(Gi)](){this.refresh()}}var Lre="";class $H extends ge{modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}template(){return` + `}[Z("changeKeyValue")](e,t){this.state.value=t,this.modifyData()}}var kF="";class cs{static parseStyle(e){const t=[];return ga(e).forEach(r=>{switch(r.func){case Xe.REPEAT:for(var i=0,a=r.parsed.count;i{r[i.id]={gridRowStart:Math.max(1,Math.min(t.length,i.gridRowStart)),gridRowEnd:Math.min(t.length+1,i.gridRowEnd)}}),this.$commands.executeCommand("setAttribute","change grid rows",se(b({},r),{[e.id]:{gridTemplateRows:cs.join(t)}}))}updateColumns(e,t){const r={};e.layers.forEach(i=>{r[i.id]={gridColumnStart:Math.max(1,Math.min(t.length,i.gridColumnStart)),gridColumnEnd:Math.min(t.length+1,i.gridColumnEnd)}}),this.$commands.executeCommand("setAttribute","change grid columns",se(b({},r),{[e.id]:{gridTemplateColumns:cs.join(t)}}))}updateColumnGap(e,t){this.$commands.executeCommand("setAttribute","change grid column gap",{[e.id]:{gridColumnGap:`${t}`}})}updateRowGap(e,t){this.$commands.executeCommand("setAttribute","change grid row gap",{[e.id]:{gridRowGap:`${t}`}})}createNewGridItems(e){let t=[];return e.length===0?t=[p.fr(1)]:t=[...e,e[e.length-1]],t}copyNewGridItems(e,t){return[...e.slice(0,t+1),...e.slice(t)]}getScaleDist(e){return e/this.$viewport.scale}}class bR extends yR{checkTargetLayer(){const e=this.getGridTargetLayer();return!(!e||e.isLayout(Ae.GRID)===!1)}[A("$grid .column-plus")+fe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateColumns(e.current,this.createNewGridItems(e.columns))}[A("$grid .row-plus")+fe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateRows(e.current,this.createNewGridItems(e.rows))}[A("$grid .column-delete")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.columns.length<2){this.alert("Alert","Columns can not be less than one.",2e3);return}const r=+e.$dt.data("index"),i=[...t.columns.slice(0,r),...t.columns.slice(r+1)];this.updateColumns(t.current,i)}[A("$grid .column-add")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),r=+e.$dt.data("index");this.updateColumns(t.current,this.copyNewGridItems(t.columns,r),r+1)}[A("$grid .row-add")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),r=+e.$dt.data("index");this.updateRows(t.current,this.copyNewGridItems(t.rows,r))}[A("$grid .row-delete")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.rows.length<2){this.alert("Alert","Rows can not be less than one.",2e3);return}const r=+e.$dt.data("index"),i=[...t.rows.slice(0,r),...t.rows.slice(r+1)];this.updateRows(t.current,i)}}class xR extends bR{[me("$gridGap .gap-tool.column-gap")+fe("checkTargetLayer")+Na("moveFirstColumnGap")+xe("moveColumnGap")+Se("moveEndColumnGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.columnGap=t.columnGap,this.lastColumnGap=t.columnGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}updateGapPointer(e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition());this.refs.$pointer.text(`${e}`),this.refs.$pointer.css({left:p.px(t[0]),top:p.px(t[1]+20)})}moveFirstColumnGap(){this.refs.$pointer.show(),this.updateGapPointer(this.columnGap)}moveColumnGap(){const e=this.$viewport.getWorldPosition(),r=_e([],e,this.initMousePosition)[0]/this.getScaleDist(100),i=this.columnGap;let a=i;i instanceof p&&(i.isPercent()?a=p.percent(Math.max(i.value+r*this.getScaleDist(5),0)).round(1e3):(i.isPx()||i.isEm())&&(a=p.px(Math.max(i.value+r*this.getScaleDist(100),0)).floor())),this.lastColumnGap=a,this.updateColumnGap(this.current,a),this.updateGapPointer(this.lastColumnGap)}moveEndColumnGap(){const e=this.$viewport.getWorldPosition();ae(e,this.initMousePosition)<1&&(this.lastColumnGap.isPx()||this.lastColumnGap.isEm()?this.lastColumnGap=p.makePercent(this.lastColumnGap.value,this.current.screenWidth):this.lastColumnGap=this.lastColumnGap.toPx(this.current.screenWidth)),this.updateColumnGap(this.current,this.lastColumnGap),this.refs.$pointer.hide()}[me("$gridGap .gap-tool.row-gap")+fe("checkTargetLayer")+Na("moveFirstColumnGap")+xe("moveRowGap")+Se("moveEndRowGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.rowGap=t.rowGap,this.lastColumnGap=t.rowGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRowGap(){const e=this.$viewport.getWorldPosition(),r=_e([],e,this.initMousePosition)[1]/this.getScaleDist(100),i=this.rowGap;let a=i;console.log(i),i instanceof p&&(i.isPercent()?a=p.percent(Math.max(i.value+r*this.getScaleDist(5),0)).round(1e3):(i.isPx()||i.isNumber())&&(a=p.px(Math.max(i.value+r*this.getScaleDist(100),0)).floor())),this.lastRowGap=a,this.updateRowGap(this.current,a),this.updateGapPointer(this.lastRowGap)}moveEndRowGap(){const e=this.$viewport.getWorldPosition();ae(e,this.initMousePosition)<1&&(this.lastRowGap||(this.lastRowGap=p.px(0)),this.lastRowGap.isPx()||this.lastRowGap.isNumber()?this.lastRowGap=p.makePercent(this.lastRowGap.value,this.current.screenHeight):this.lastRowGap=this.lastRowGap.toPx(this.current.screenHeight)),this.updateRowGap(this.current,this.lastRowGap),this.refs.$pointer.hide()}[me("$grid .grid-item-tool.column .item")+xe("moveColumn")+Se("moveEndColumn")](e){const t=+e.$dt.data("index"),r=this.getGridLayoutInformation();this.current=r.current,this.columns=r.columns,this.selectedColumnIndex=t,this.selectedColumnWidth=r.columns[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveColumn(){const e=this.$viewport.getWorldPosition(),t=_e([],e,this.initMousePosition),r=t[0]/this.getScaleDist(100),i=this.selectedColumnWidth;if(i instanceof p){if(i.isPercent()){var a=Math.max(i.value+r*this.getScaleDist(5),1);this.columns[this.selectedColumnIndex]=p.percent(a).round(1e3)}else if(i.isPx()||i.isNumber()){var a=Math.max(10,i.value+r*this.getScaleDist(100));this.columns[this.selectedColumnIndex]=p.px(a).floor()}else if(i.isFr()){var a=Math.max(i.value+Math.floor(t[0]/this.getScaleDist(20))*.25,.25);this.columns[this.selectedColumnIndex]=p.fr(a)}else{var a=Math.max(i.value+r*1,10);this.columns[this.selectedColumnIndex]=new p(a,i.unit)}this.updateColumns(this.current,this.columns)}}changedColumnSize(){const e=this.getGridLayoutInformation(),t=this.selectedColumnIndex,r=this.selectedColumnWidth;if(r instanceof p)r.isPercent()?this.columns[t]=p.fr(1):r.isPx()||r.isNumber()?this.columns[t]=p.makePercent(r.value,e.current.screenWidth).round(1e3):r.isFr()&&(this.columns[t]="auto");else if(r==="auto"){const{items:i}=this.state.lastGridInfo,a=i.find(n=>n.column===t+1);this.columns[t]=p.px(a.rect.width).floor()}}moveEndColumn(){const e=this.$viewport.getWorldPosition();ae(e,this.initMousePosition)<1&&this.changedColumnSize(),this.updateColumns(this.current,this.columns)}[me("$grid .grid-item-tool.row .item")+xe("moveRow")+Se("moveEndRow")](e){const t=+e.$dt.data("index"),r=this.getGridLayoutInformation();this.current=r.current,this.rows=r.rows,this.selectedRowIndex=t,this.selectedRowHeight=r.rows[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRow(){const e=this.$viewport.getWorldPosition(),t=_e([],e,this.initMousePosition),r=t[1]/this.getScaleDist(30),i=this.selectedRowHeight;if(i instanceof p){if(i.isPercent()){var a=Math.max(i.value-r*this.getScaleDist(5),1);this.rows[this.selectedRowIndex]=p.percent(a).round(1e3)}else if(i.isPx()||i.isNumber()){var a=Math.max(10,i.value-r*this.getScaleDist(100));this.rows[this.selectedRowIndex]=p.px(a).floor()}else if(i.isFr()){var a=Math.max(i.value+Math.floor(t[1]/this.getScaleDist(20))*.25,.25);this.rows[this.selectedRowIndex]=p.fr(a)}else{var a=Math.max(i.value-r*1,10);this.rows[this.selectedRowIndex]=new p(a,i.unit)}this.updateRows(this.current,this.rows)}}changedRowSize(){const e=this.getGridLayoutInformation(),t=this.selectedRowIndex,r=this.selectedRowHeight;if(r instanceof p)r.isPercent()?this.rows[t]=p.fr(1):r.isPx()||r.isNumber()?this.rows[t]=p.makePercent(r.value,e.current.screenHeight).round(1e3):r.isFr()&&(this.rows[t]="auto");else if(r==="auto"){const{items:i}=this.state.lastGridInfo,a=i.find(n=>n.row===t+1);this.rows[t]=p.px(a.rect.height).floor()}}moveEndRow(){const e=this.$viewport.getWorldPosition();ae(e,this.initMousePosition)<1&&this.changedRowSize(),this.updateRows(this.current,this.rows)}}class $R extends xR{template(){return C("div",{class:"elf--grid-grow-tool-view"},C("div",{class:"layout-rect",ref:"$grid"}),C("div",{class:"layout-rect blank-tool",ref:"$gridGap"}),C("div",{class:"layout-pointer",ref:"$pointer"}))}[ne("$el")](){var t;const e=this.getGridTargetLayer();return{"data-drag-target-item":Boolean(this.$context.selection.dragTargetItem),"data-grid-layout-own":((t=this.$context.selection.current)==null?void 0:t.id)===(e==null?void 0:e.id),style:{display:e?"block":"none"}}}[ne("$grid")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(Ae.GRID)===!1)return"";const t=Rt(this.$viewport.applyVerties(e.verties)),r=this.getGridLayoutInformation(),[i,a,n,o]=this.getScaledInformation([p.px(r.current.paddingTop),p.px(r.current.paddingRight),p.px(r.current.paddingBottom),p.px(r.current.paddingLeft)]),l=this.getScaledInformation(r.columns),c=this.getScaledInformation(r.rows),h=this.getScaledLength(r.columnGap),u=this.getScaledLength(r.rowGap),d=_e([],e.verties[1],e.verties[0]),v=ot(d[0],d[1])-180;return{style:{display:"grid","grid-template-columns":cs.join(l),"grid-template-rows":cs.join(c),"grid-column-gap":h,"grid-row-gap":u,left:p.px(t.left),top:p.px(t.top),width:p.px(t.width),height:p.px(t.height),"padding-top":i,"padding-right":a,"padding-bottom":n,"padding-left":o,"transform-origin":"left top",transform:`rotate(${v}deg)`}}}[ne("$gridGap")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(Ae.GRID)===!1)return"";const t=Rt(this.$viewport.applyVerties(e.verties)),r=_e([],e.verties[1],e.verties[0]),i=ot(r[0],r[1])-180;return{style:{left:p.px(t.left),top:p.px(t.top),width:p.px(t.width),height:p.px(t.height),"transform-origin":"left top",transform:`rotate(${i}deg)`}}}getScaledInformation(e){return e.map(t=>this.getScaledLength(t))}getScaledLength(e){return it(e)?e:e instanceof p&&(e.isPx()||e.isNumber())?e.clone().mul(this.$viewport.scale):e}getGridTargetLayer(){if(this.$context.selection.dragTargetItem)return this.$context.selection.dragTargetItem;const e=this.$context.selection.current;if(!e)return null;if(e.isLayout(Ae.GRID))return e;const t=e.parent;return t&&t.is("project")?null:t&&t.isLayout(Ae.GRID)?t:null}getParsedValue(e){return e==="auto"?e:p.parse(e)}getGridLayoutInformation(){const e=this.getGridTargetLayer(),t=cs.parseStyle(e.gridTemplateColumns),r=cs.parseStyle(e.gridTemplateRows);return{current:e,columns:t,columnGap:this.getParsedValue(e.gridColumnGap),rows:r,rowGap:this.getParsedValue(e.gridRowGap)}}afterLoadRendering(e,t){this.trigger("refreshGridInformation",e,t)}[Z("refreshGridInformation")+Ne(10)](e,t){const r=this.getGridTargetLayer();if(!r||r.isLayout(Ae.GRID)===!1||t!=="$grid")return;const i=this.getGridLayoutInformation(),a=this.$viewport.scale,n=e.$$(".grid-item").map(o=>{const[l,c]=o.attrs("data-row","data-column").map(S=>+S),{x:h,y:u,width:d,height:v}=o.offsetRect(),g={x:h/a,y:u/a,width:d/a,height:v/a},y=le(xt(g.x,g.y,g.width,g.height),i.current.absoluteMatrix),P=y.filter((S,V)=>V<4);return{row:l,column:c,rect:g,info:i,verties:y,originVerties:P,originRect:Rt(P)}});this.state.lastGridInfo={info:i,items:n},this.load("$gridGap"),this.$context.selection.updateGridInformation({info:i,items:n})}[G("$gridGap")+Ee](){if(!this.getGridTargetLayer()||this.$config.true("set.move.control.point")||!this.$context.selection.current)return"";const t=this.state.lastGridInfo,r=this.$viewport.scale;if(!t)return"";const{info:i,items:a}=t,{columns:n,rows:o}=i,l=[],c=a.filter(I=>I.column===1),h=a.filter(I=>I.row===1),u=Math.min(...c.map(I=>I.verties[0][1])),v=Math.max(...c.map(I=>I.verties[2][1]))-u;for(var g=1,y=n.length;gI.verties[0][0])),V=Math.max(...h.map(I=>I.verties[2][0]))-P;for(var E=1,y=o.length;EI.type==="column-gap"?C("div",{class:"gap-tool column-gap",style:{left:p.px(I.x*r),top:p.px(I.y*r),width:p.px(Math.max(I.width*r,5)),height:p.px(I.height*r)}}):I.type==="row-gap"?C("div",{class:"gap-tool row-gap",style:{left:p.px(I.x*r),top:p.px(I.y*r),height:p.px(Math.max(I.height*r,5)),width:p.px(I.width*r)}}):"")}isSelectedColumn(e){const t=this.$context.selection.current;return t.gridColumnStart<=e&&e{const o=i&&this.isSelectedColumn(n+1)?"selected":"";return C("div",{class:`grid-item-tool column ${o}`,"data-index":n,style:{"grid-column":`${n+1} / span 1`,"grid-row":"1 / span 1"}},C("div",{class:"grid-item-tool-inner"},C("div",{class:"item","data-index":n},C("span",null,t.columns[n])),C("div",{class:"drag-handle right"},C("div",{class:"column-delete","data-index":n,title:`Delete ${t.columns[n]}`},z("close")),C("div",{class:"column-add","data-index":n,title:`Add ${t.columns[n]}`},z("add")))))}),C("div",{class:"grid-item-tool append column-plus",style:{"grid-column":`${t.columns.length} / span 1`,"grid-row":"1 / span 1"}},z("add")),Array.from(Array(t.rows.length).keys()).map(n=>{const o=i&&this.isSelectedRow(n+1)?"selected":"";return C(Lt,null,C("div",{class:`grid-item-tool row ${o}`,style:{"grid-row":`${n+1} / span 1`,"grid-column":"1 / span 1"}},C("div",{class:"grid-item-tool-inner"},C("div",{class:"item","data-index":n},C("span",null,t.rows[n])),C("div",{class:"drag-handle bottom"},C("div",{class:"row-delete","data-index":n,title:`Delete ${t.rows[n]}`},z("close")),C("div",{class:"row-add","data-index":n,title:`Add ${t.rows[n]}`},z("add"))))))}),C("div",{class:"grid-item-tool append row-plus",style:{"grid-row":`${t.rows.length} / span 1`,"grid-column":"1 / span 1"}},z("add")),Array.from(Array(r).keys()).map(n=>{const o=n%t.columns.length,l=Math.floor(n/t.columns.length);return C(Lt,null,C("div",{class:"grid-item","data-row":l+1,"data-column":o+1,style:{"grid-column":`${o+1} / span 1`,"grid-row":`${l+1} / span 1`}}))}))}[M("refreshGridToolInfo")](){this.refresh()}[M(st)](){this.refresh()}[M(Oe)+Ne(100)](){this.refresh()}[M(Mt)](){this.refresh()}}var MF="";class _R extends Y{modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}template(){return`
      - `}[ve("$body")+It](){const e=this.$context.selection.current;return!e||e.isLayout(At.GRID)===!1?"":` + `}[G("$body")+Ee](){const e=this.$context.selection.current;return!e||e.isLayout(Ae.GRID)===!1?"":`
      - ${W("NumberInputEditor",{wide:!0,label:"grid padding",key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:300,step:1,onchange:"changePadding"})} + ${R("NumberInputEditor",{wide:!0,label:"grid padding",key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:300,step:1,onchange:"changePadding"})}
      - ${W("GridGapEditor",{label:this.$i18n("grid.layout.editor.column.gap"),ref:"$columnGap",key:"gridColumnGap",value:e.gridColumnGap||"",onchange:"changeKeyValue"})} + ${R("GridGapEditor",{label:this.$i18n("grid.layout.editor.column.gap"),ref:"$columnGap",key:"gridColumnGap",value:e.gridColumnGap||"",onchange:"changeKeyValue"})}
      - ${W("GridGapEditor",{label:this.$i18n("grid.layout.editor.row.gap"),ref:"$rowGap",key:"gridRowGap",value:e.gridRowGap||"",onchange:"changeKeyValue"})} + ${R("GridGapEditor",{label:this.$i18n("grid.layout.editor.row.gap"),ref:"$rowGap",key:"gridRowGap",value:e.gridRowGap||"",onchange:"changeKeyValue"})}
      - `}[Me("changePadding")](e,t){this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t})}[Me("changeKeyValue")](e,t,i){this.modifyData(e,t,i)}}var kre="";class PH extends jt{getTitle(){return this.$i18n("layout.property.title")}getClassName(){return"elf--layout-property"}getBody(){return` + `}[Z("changePadding")](e,t){this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t})}[Z("changeKeyValue")](e,t,r){this.modifyData(e,t,r)}}var IF="";class SR extends Ge{getTitle(){return this.$i18n("layout.property.title")}getClassName(){return"elf--layout-property"}getBody(){return`
      `}getTools(){return`
      - `}[ve("$layoutType")](){const e=this.$context.selection.current;return e?W("SelectIconEditor",{ref:"$layout",key:"layout",height:24,value:e.layout,options:[At.DEFAULT,At.FLEX,At.GRID],icons:["layout_default","layout_flex","layout_grid"],onchange:"changeLayoutType"}):""}[ve("$layoutProperty")+It](){var e=this.$context.selection.current||{layout:"default"};return` + `}[G("$layoutType")](){const e=this.$context.selection.current;return e?R("SelectIconEditor",{ref:"$layout",key:"layout",height:24,value:e.layout,options:[Ae.DEFAULT,Ae.FLEX,Ae.GRID],icons:["layout_default","layout_flex","layout_grid"],onchange:"changeLayoutType"}):""}[G("$layoutProperty")+Ee](){var e=this.$context.selection.current||{layout:"default"};return`
      - ${W("FlexLayoutEditor",{ref:"$flex",key:"flex-layout",value:{flexDirection:e.flexDirection,flexWrap:e.flexWrap,justifyContent:e.justifyContent,alignItems:e.alignItems,alignContent:e.alignContent,gap:e.gap},onchange:"changeLayoutInfo"})} + ${R("FlexLayoutEditor",{ref:"$flex",key:"flex-layout",value:{flexDirection:e.flexDirection,flexWrap:e.flexWrap,justifyContent:e.justifyContent,alignItems:e.alignItems,alignContent:e.alignContent,gap:e.gap},onchange:"changeLayoutInfo"})}
      - ${W("GridLayoutEditor",{ref:"$grid",key:"grid-layout",value:e["grid-layout"]||"",onchange:"changeLayoutInfo"})} + ${R("GridLayoutEditor",{ref:"$grid",key:"grid-layout",value:e["grid-layout"]||"",onchange:"changeLayoutInfo"})}
      - `}[Me("changeLayoutInfo")](e,t){e==="padding"?this.$commands.executeCommand("setAttribute","change padding",this.$context.selection.packByValue(t)):this.$commands.executeCommand("setAttribute","change layout info",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.emit("refreshAllElementBoundSize")})}[Me("changeLayoutType")](e,t){this.$context.selection.reset(this.$context.selection.packByValue({[e]:t})),this.updateTitle(),this.$commands.executeCommand("setAttribute","change layout type",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()})}get editableProperty(){return"layout"}enableHasChildren(){return this.$context.selection.current.enableHasChildren()}updateTitle(){this.setTitle(this.$context.selection.current.layout+" Layout")}[U(kt)+Qe("checkShow")+Qe("enableHasChildren")](){this.updateTitle(),this.refresh()}}var Are="";class TH extends jt{getTitle(){return this.$i18n("layout.property.resizing.self.title")}getClassName(){return"elf--resizing-item-property"}getBody(){return` + `}[Z("changeLayoutInfo")](e,t){e==="padding"?this.$commands.executeCommand("setAttribute","change padding",this.$context.selection.packByValue(t)):this.$commands.executeCommand("setAttribute","change layout info",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.emit("refreshAllElementBoundSize")})}[Z("changeLayoutType")](e,t){this.$context.selection.reset(this.$context.selection.packByValue({[e]:t})),this.updateTitle(),this.$commands.executeCommand("setAttribute","change layout type",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()})}get editableProperty(){return"layout"}enableHasChildren(){return this.$context.selection.current.enableHasChildren()}updateTitle(){this.setTitle(this.$context.selection.current.layout+" Layout")}[M(Oe)+fe("checkShow")+fe("enableHasChildren")](){this.updateTitle(),this.refresh()}}var EF="";class PR extends Ge{getTitle(){return this.$i18n("layout.property.resizing.self.title")}getClassName(){return"elf--resizing-item-property"}getBody(){return`
      - `}[ve("$resizingModeInfo")+It](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||wt.FIXED,i=e.resizingVertical||wt.FIXED;return` -
      + `}[G("$resizingModeInfo")+Ee](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||Ce.FIXED,r=e.resizingVertical||Ce.FIXED;return` +
      -
      ${re("keyboard_arrow_up")}
      -
      ${re("keyboard_arrow_down")}
      +
      ${z("keyboard_arrow_up")}
      +
      ${z("keyboard_arrow_down")}
      -
      ${re("keyboard_arrow_left")}
      -
      ${re("keyboard_arrow_right")}
      +
      ${z("keyboard_arrow_left")}
      +
      ${z("keyboard_arrow_right")}
      - `}makeOptionsForHorizontal(){return[{value:wt.FIXED,text:"Fixed Width"},{value:wt.FILL_CONTAINER,text:"Fill Container"}]}makeOptionsForVertical(){return[{value:wt.FIXED,text:"Fixed Height"},{value:wt.FILL_CONTAINER,text:"Fill Container"}]}[ve("$resizingModeInfoInput")+It](){var e=this.$context.selection.current||{};return this.setState({resizingHorizontal:(e==null?void 0:e.resizingHorizontal)||wt.FIXED,resizingVertical:(e==null?void 0:e.resizingVertical)||wt.FIXED},!1),` + `}makeOptionsForHorizontal(){return[{value:Ce.FIXED,text:"Fixed Width"},{value:Ce.FILL_CONTAINER,text:"Fill Container"}]}makeOptionsForVertical(){return[{value:Ce.FIXED,text:"Fixed Height"},{value:Ce.FILL_CONTAINER,text:"Fill Container"}]}[G("$resizingModeInfoInput")+Ee](){var e=this.$context.selection.current||{};return this.setState({resizingHorizontal:(e==null?void 0:e.resizingHorizontal)||Ce.FIXED,resizingVertical:(e==null?void 0:e.resizingVertical)||Ce.FIXED},!1),`
      - ${W("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:this.state.resizingHorizontal,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} + ${R("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:this.state.resizingHorizontal,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})}
      - ${W("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:this.state.resizingVertical,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} + ${R("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:this.state.resizingVertical,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})}
      - `}[se("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===wt.FIXED?this.trigger("changeResizingMode",t,wt.FILL_CONTAINER):this.trigger("changeResizingMode",t,wt.FIXED)}[Me("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply self resizing",this.$context.selection.packByValue({[e]:t,flexGrow:1})),this.nextTick(()=>{this.refresh()},100)}[U(kt)+Ft(100)](){this.refreshShow(()=>{var t,i;var e=this.$context.selection.current;return((t=e==null?void 0:e.parent)==null?void 0:t.hasLayout())&&((i=e==null?void 0:e.parent)==null?void 0:i.isLayout(At.GRID))===!1})}[U(Gi)](){const e=this.$context.selection.current;e&&e.changedLayoutItem&&(e.resizingHorizontal!==this.state.resizingHorizontal||e.resizingVertical!==this.state.resizingVertical)&&this.refresh()}}var Rre="";class CH extends jt{getTitle(){return this.$i18n("layout.property.resizing.title")}getClassName(){return"elf--resizing-property"}getBody(){return` + `}[A("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===Ce.FIXED?this.trigger("changeResizingMode",t,Ce.FILL_CONTAINER):this.trigger("changeResizingMode",t,Ce.FIXED)}[Z("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply self resizing",this.$context.selection.packByValue({[e]:t,flexGrow:1})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+Ne(100)](){this.refreshShow(()=>{var t,r;var e=this.$context.selection.current;return((t=e==null?void 0:e.parent)==null?void 0:t.hasLayout())&&((r=e==null?void 0:e.parent)==null?void 0:r.isLayout(Ae.GRID))===!1})}[M(Mt)](){const e=this.$context.selection.current;e&&e.changedLayoutItem&&(e.resizingHorizontal!==this.state.resizingHorizontal||e.resizingVertical!==this.state.resizingVertical)&&this.refresh()}}var LF="";class wR extends Ge{getTitle(){return this.$i18n("layout.property.resizing.title")}getClassName(){return"elf--resizing-property"}getBody(){return`
      - `}[ve("$resizingModeInfo")+It](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||wt.FIXED,i=e.resizingVertical||wt.FIXED;return` -
      + `}[G("$resizingModeInfo")+Ee](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||Ce.FIXED,r=e.resizingVertical||Ce.FIXED;return` +
      -
      ${re("keyboard_arrow_down")}
      -
      ${re("keyboard_arrow_up")}
      +
      ${z("keyboard_arrow_down")}
      +
      ${z("keyboard_arrow_up")}
      -
      ${re("keyboard_arrow_right")}
      -
      ${re("keyboard_arrow_left")}
      +
      ${z("keyboard_arrow_right")}
      +
      ${z("keyboard_arrow_left")}
      - `}makeOptionsForHorizontal(){return[{value:wt.FIXED,text:"Fixed Width"},{value:wt.HUG_CONTENT,text:"Hug Content"}]}makeOptionsForVertical(){return[{value:wt.FIXED,text:"Fixed Height"},{value:wt.HUG_CONTENT,text:"Hug Content"}]}[ve("$resizingModeInfoInput")](){var e=this.$context.selection.current||{};return` + `}makeOptionsForHorizontal(){return[{value:Ce.FIXED,text:"Fixed Width"},{value:Ce.HUG_CONTENT,text:"Hug Content"}]}makeOptionsForVertical(){return[{value:Ce.FIXED,text:"Fixed Height"},{value:Ce.HUG_CONTENT,text:"Hug Content"}]}[G("$resizingModeInfoInput")](){var e=this.$context.selection.current||{};return`
      - ${W("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:(e==null?void 0:e.resizingHorizontal)||wt.FIXED,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} + ${R("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:(e==null?void 0:e.resizingHorizontal)||Ce.FIXED,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})}
      - ${W("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:(e==null?void 0:e.resizingVertical)||wt.FIXED,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} + ${R("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:(e==null?void 0:e.resizingVertical)||Ce.FIXED,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})}
      - `}[se("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===wt.FIXED?this.trigger("changeResizingMode",t,wt.HUG_CONTENT):this.trigger("changeResizingMode",t,wt.FIXED)}[Me("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[U(kt)+Ft(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.hasLayout()})}}function EH(n){n.registerElement({FlexLayoutEditor:vH,GridLayoutEditor:$H,GridBoxEditor:bH,GridGapEditor:xH}),n.registerUI("inspector.tab.style",{LayoutProperty:PH,ResizingProperty:CH,ResizingItemProperty:TH,DefaultLayoutItemProperty:gH}),n.registerUI("canvas.view",{FlexGrowToolView:mH,GridGrowToolView:MH},Af.LAYOUT_TOOL)}var Ore="";class IH extends ge{template(){return D("div",{class:"elf--line-view sepia(0.2)"})}[Qt("vertical.line")](){this.refresh()}[Qt("horizontal.line")](){this.refresh()}[U(si,Gi)](){this.refresh()}[ve("$el")+It](){return[...this.$config.get("vertical.line").map((e,t)=>{const i=this.$viewport.applyVertex([0,e,0]);return D("div",{class:"vertical-line","data-index":t,style:`transform: translate3d(0px, ${i[1]}px, 0px);`})}),...this.$config.get("horizontal.line").map((e,t)=>{const i=this.$viewport.applyVertex([e,0,0]);return D("div",{class:"horizontal-line","data-index":t,style:`transform: translate3d(${i[0]}px, 0px, 0px);`})})]}[qe("$el .horizontal-line")+at("moveHorizontalLine")+lt("moveEndHorizontalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveHorizontalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("horizontal.line",this.startIndex,e[0])}moveEndHorizontalLine(){this.$commands.emit("recoverCursor")}[qe("$el .vertical-line")+at("moveVerticalLine")+lt("moveEndVerticalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveVerticalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("vertical.line",this.startIndex,e[1])}moveEndVerticalLine(){this.$commands.emit("recoverCursor")}}function LH(n){n.registerUI("canvas.view",{LineView:IH})}var kH=[{type:"button",icon:"navigation",events:["config:editing.mode"],selected:n=>n.context.config.is("editing.mode",Ti.SELECT),action:n=>{n.context.commands.emit("addLayerView","select"),n.context.config.is("editing.mode.itemType",Ti.SELECT)}},{type:"button",icon:"artboard",events:["config:editing.mode","config:editing.mode.itemType"],selected:n=>n.context.config.is("editing.mode",Ti.APPEND)&&n.context.config.is("editing.mode.itemType","artboard"),action:n=>{n.context.commands.emit("addLayerView","artboard")}},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.css.itemType")))==null?void 0:t.icon)||re("rect")},items:[{icon:re("rect"),title:"Rect Layer",key:"rect",command:"addLayerView",args:["rect",{backgroundColor:"#ececec"}],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","rect")},shortcut:qr({key:"R"})},{icon:re("lens"),title:"Circle Layer",key:"circle",command:"addLayerView",args:["circle"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","circle")},shortcut:qr({key:"O"})},{icon:re("image"),title:"Image",key:"image",command:"addLayerView",args:["image"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","image")},shortcut:qr({key:"I"})},"-",{icon:re("video"),title:"Video",key:"video",command:"addLayerView",args:["video"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","video")},shortcut:qr({key:"V"})},{icon:re("iframe"),title:"IFrame",key:"iframe",command:"addLayerView",args:["iframe"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","iframe")},shortcut:qr({key:"F"})},{icon:re("rect"),title:"SampleLayer",key:"sample",command:"addLayerView",args:["sample"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","sample")}}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.css.itemType"],selected:n=>n.context.config.is("editing.mode",Ti.APPEND)&&(n.context.config.is("editing.mode.itemType","rect")||n.context.config.is("editing.mode.itemType","circle")||n.context.config.is("editing.mode.itemType","image")||n.context.config.is("editing.mode.itemType","video")||n.context.config.is("editing.mode.itemType","iframe")),selectedKey:n=>n.context.config.get("editing.css.itemType")},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.draw.itemType")))==null?void 0:t.icon)||re("pentool")},items:[{icon:re("pentool"),title:"Pen",key:"path",command:"addLayerView",args:["path"],closable:!0,nextTick:n=>{n.context.config.set("editing.draw.itemType","path")},shortcut:qr({key:"P"})},{icon:re("brush"),title:"Pencil",key:"brush",command:"addLayerView",args:["brush"],closable:!0,nextTick:n=>{n.context.config.set("editing.draw.itemType","brush")},shortcut:qr({key:"B"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.draw.itemType"],selected:n=>n.context.config.is("editing.mode.itemType","path")||n.context.config.is("editing.mode.itemType","draw"),selectedKey:n=>n.context.config.get("editing.draw.itemType")},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.svg.itemType")))==null?void 0:t.icon)||re("outline_rect")},items:[{icon:re("outline_rect"),title:"Rectangle",key:"svg-rect",command:"addLayerView",args:["svg-rect"],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-rect")},shortcut:qr({key:"Shift+R"})},{icon:re("outline_circle"),title:"Circle",key:"svg-circle",command:"addLayerView",args:["svg-circle"],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-circle")},shortcut:qr({key:"Shift+O"})},{icon:re("polygon"),title:"Polygon",key:"svg-polygon",command:"addLayerView",args:["polygon",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","polygon")},shortcut:qr({key:"Shift+P"})},{icon:re("star"),title:"Star",key:"star",command:"addLayerView",args:["star",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","star")},shortcut:qr({key:"Shift+S"})},"-",{icon:re("smooth"),title:"Spline",key:"spline",command:"addLayerView",args:["spline",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","spline")},shortcut:qr({key:"Shift+L"})},{icon:re("text_rotate"),title:"TextPath",key:"svg-texpath",command:"addLayerView",args:["svg-textpath",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-textpath")},shortcut:qr({key:"Shift+T"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.svg.itemType"],selected:n=>n.context.config.is("editing.mode",Ti.APPEND)&&(n.context.config.is("editing.mode.itemType","svg-rect")||n.context.config.is("editing.mode.itemType","svg-circle")||n.context.config.is("editing.mode.itemType","polygon")||n.context.config.is("editing.mode.itemType","star")||n.context.config.is("editing.mode.itemType","spline")||n.context.config.is("editing.mode.itemType","svg-textpath")),selectedKey:n=>n.context.config.get("editing.svg.itemType")},{type:"button",icon:"title",events:["config:editing.mode","config:editing.mode.itemType"],selected:n=>n.context.config.is("editing.mode",Ti.APPEND)&&n.context.config.is("editing.mode.itemType","text"),action:n=>{n.context.commands.emit("addLayerView","text")}},{type:"button",tooltip:"Handle",icon:"pantool",events:["config:editing.mode"],selected:n=>n.context.config.is("editing.mode",Ti.HAND),action:n=>{n.context.config.set("editing.mode",Ti.HAND)}}];function AH(n){n.registerMenu("toolbar.left",kH)}var zre="";class RH extends ge{initState(){return{tolerance:1,stroke:"black","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",msg:this.$i18n("path.manager.msg")}}[U(kt)](){var t,i;var e=this.$context.selection.current;e&&((t=this.children.$stroke)==null||t.setValue(e.stroke||"rgba(0, 0, 0, 1)"),(i=this.children.$strokeWidth)==null||i.setValue(e.strokeWidth||y.number(1)))}[U("setColorAsset")]({color:e}){this.$el.isShow()&&(this.setState({stroke:e},!1),this.children.$stroke.setValue(e),this.updateData({stroke:e}))}template(){return` + `}[A("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===Ce.FIXED?this.trigger("changeResizingMode",t,Ce.HUG_CONTENT):this.trigger("changeResizingMode",t,Ce.FIXED)}[Z("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+Ne(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.hasLayout()})}}function CR(s){s.registerElement({FlexLayoutEditor:gR,GridLayoutEditor:_R,GridBoxEditor:mR,GridGapEditor:vR}),s.registerUI("inspector.tab.style",{LayoutProperty:SR,ResizingProperty:wR,ResizingItemProperty:PR,DefaultLayoutItemProperty:uR}),s.registerUI("canvas.view",{FlexGrowToolView:pR,GridGrowToolView:$R},Nl.LAYOUT_TOOL)}var VF="";class TR extends Y{template(){return C("div",{class:"elf--line-view sepia(0.2)"})}[Tt("vertical.line")](){this.refresh()}[Tt("horizontal.line")](){this.refresh()}[M(st,Mt)](){this.refresh()}[G("$el")+Ee](){return[...this.$config.get("vertical.line").map((e,t)=>{const r=this.$viewport.applyVertex([0,e,0]);return C("div",{class:"vertical-line","data-index":t,style:`transform: translate3d(0px, ${r[1]}px, 0px);`})}),...this.$config.get("horizontal.line").map((e,t)=>{const r=this.$viewport.applyVertex([e,0,0]);return C("div",{class:"horizontal-line","data-index":t,style:`transform: translate3d(${r[0]}px, 0px, 0px);`})})]}[me("$el .horizontal-line")+xe("moveHorizontalLine")+Se("moveEndHorizontalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveHorizontalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("horizontal.line",this.startIndex,e[0])}moveEndHorizontalLine(){this.$commands.emit("recoverCursor")}[me("$el .vertical-line")+xe("moveVerticalLine")+Se("moveEndVerticalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveVerticalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("vertical.line",this.startIndex,e[1])}moveEndVerticalLine(){this.$commands.emit("recoverCursor")}}function kR(s){s.registerUI("canvas.view",{LineView:TR})}var MR=[{type:"button",icon:"navigation",events:["config:editing.mode"],selected:s=>s.context.config.is("editing.mode",St.SELECT),action:s=>{s.context.commands.emit("addLayerView","select"),s.context.config.is("editing.mode.itemType",St.SELECT)}},{type:"button",icon:"artboard",events:["config:editing.mode","config:editing.mode.itemType"],selected:s=>s.context.config.is("editing.mode",St.APPEND)&&s.context.config.is("editing.mode.itemType","artboard"),action:s=>{s.context.commands.emit("addLayerView","artboard")}},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.css.itemType")))==null?void 0:t.icon)||z("rect")},items:[{icon:z("rect"),title:"Rect Layer",key:"rect",command:"addLayerView",args:["rect",{backgroundColor:"#ececec"}],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","rect")},shortcut:gr({key:"R"})},{icon:z("lens"),title:"Circle Layer",key:"circle",command:"addLayerView",args:["circle"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","circle")},shortcut:gr({key:"O"})},{icon:z("image"),title:"Image",key:"image",command:"addLayerView",args:["image"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","image")},shortcut:gr({key:"I"})},"-",{icon:z("video"),title:"Video",key:"video",command:"addLayerView",args:["video"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","video")},shortcut:gr({key:"V"})},{icon:z("iframe"),title:"IFrame",key:"iframe",command:"addLayerView",args:["iframe"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","iframe")},shortcut:gr({key:"F"})},{icon:z("rect"),title:"SampleLayer",key:"sample",command:"addLayerView",args:["sample"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","sample")}}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.css.itemType"],selected:s=>s.context.config.is("editing.mode",St.APPEND)&&(s.context.config.is("editing.mode.itemType","rect")||s.context.config.is("editing.mode.itemType","circle")||s.context.config.is("editing.mode.itemType","image")||s.context.config.is("editing.mode.itemType","video")||s.context.config.is("editing.mode.itemType","iframe")),selectedKey:s=>s.context.config.get("editing.css.itemType")},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.draw.itemType")))==null?void 0:t.icon)||z("pentool")},items:[{icon:z("pentool"),title:"Pen",key:"path",command:"addLayerView",args:["path"],closable:!0,nextTick:s=>{s.context.config.set("editing.draw.itemType","path")},shortcut:gr({key:"P"})},{icon:z("brush"),title:"Pencil",key:"brush",command:"addLayerView",args:["brush"],closable:!0,nextTick:s=>{s.context.config.set("editing.draw.itemType","brush")},shortcut:gr({key:"B"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.draw.itemType"],selected:s=>s.context.config.is("editing.mode.itemType","path")||s.context.config.is("editing.mode.itemType","draw"),selectedKey:s=>s.context.config.get("editing.draw.itemType")},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.svg.itemType")))==null?void 0:t.icon)||z("outline_rect")},items:[{icon:z("outline_rect"),title:"Rectangle",key:"svg-rect",command:"addLayerView",args:["svg-rect"],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-rect")},shortcut:gr({key:"Shift+R"})},{icon:z("outline_circle"),title:"Circle",key:"svg-circle",command:"addLayerView",args:["svg-circle"],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-circle")},shortcut:gr({key:"Shift+O"})},{icon:z("polygon"),title:"Polygon",key:"svg-polygon",command:"addLayerView",args:["polygon",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","polygon")},shortcut:gr({key:"Shift+P"})},{icon:z("star"),title:"Star",key:"star",command:"addLayerView",args:["star",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","star")},shortcut:gr({key:"Shift+S"})},"-",{icon:z("smooth"),title:"Spline",key:"spline",command:"addLayerView",args:["spline",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","spline")},shortcut:gr({key:"Shift+L"})},{icon:z("text_rotate"),title:"TextPath",key:"svg-texpath",command:"addLayerView",args:["svg-textpath",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-textpath")},shortcut:gr({key:"Shift+T"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.svg.itemType"],selected:s=>s.context.config.is("editing.mode",St.APPEND)&&(s.context.config.is("editing.mode.itemType","svg-rect")||s.context.config.is("editing.mode.itemType","svg-circle")||s.context.config.is("editing.mode.itemType","polygon")||s.context.config.is("editing.mode.itemType","star")||s.context.config.is("editing.mode.itemType","spline")||s.context.config.is("editing.mode.itemType","svg-textpath")),selectedKey:s=>s.context.config.get("editing.svg.itemType")},{type:"button",icon:"title",events:["config:editing.mode","config:editing.mode.itemType"],selected:s=>s.context.config.is("editing.mode",St.APPEND)&&s.context.config.is("editing.mode.itemType","text"),action:s=>{s.context.commands.emit("addLayerView","text")}},{type:"button",tooltip:"Handle",icon:"pantool",events:["config:editing.mode"],selected:s=>s.context.config.is("editing.mode",St.HAND),action:s=>{s.context.commands.emit("toggleHandTool")}}];function IR(s){s.registerMenu("toolbar.logo",[{type:"dropdown",style:{padding:"12px 0px 12px 12px"},icon:`
      `,items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"},{title:"menu.item.shortcuts.title",command:"showShortcutWindow"},"-",{title:"menu.item.export.title",command:"showExportView"},{title:"menu.item.export.title",command:"showEmbedEditorWindow"},{title:"menu.item.download.title",command:"downloadJSON"},{title:"menu.item.save.title",command:"saveJSON",nextTick:()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)}},{title:"menu.item.language.title",items:[{title:"English",command:"setLocale",args:[Ui.EN],checked:e=>e.locale===Ui.EN},{title:"Fran\xE7ais",command:"setLocale",args:[Ui.FR],checked:e=>e.locale===Ui.FR},{title:"Korean",command:"setLocale",args:[Ui.KO],checked:e=>e.locale===Ui.KO}]},"-",{title:"elf document",items:[{type:"link",title:"Github",href:"https://github.com/easylogic/editor"},{type:"link",title:"Learn",href:"https://www.easylogic.studio"}]}]}]),s.registerMenu("toolbar.left",MR)}var OF="";class ER extends Y{initState(){return{tolerance:1,stroke:"black","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",msg:this.$i18n("path.manager.msg")}}[M(Oe)](){var t,r;var e=this.$context.selection.current;e&&((t=this.children.$stroke)==null||t.setValue(e.stroke||"rgba(0, 0, 0, 1)"),(r=this.children.$strokeWidth)==null||r.setValue(e.strokeWidth||p.number(1)))}[M("setColorAsset")]({color:e}){this.$el.isShow()&&(this.setState({stroke:e},!1),this.children.$stroke.setValue(e),this.updateData({stroke:e}))}template(){return`
      @@ -2451,40 +2415,40 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - ${W("NumberInputEditor",{ref:"$tolerance",key:"tolerance",value:1,min:0,max:100,step:.01,unit:"number",onchange:"changeValue"})} + ${R("NumberInputEditor",{ref:"$tolerance",key:"tolerance",value:1,min:0,max:100,step:.01,unit:"number",onchange:"changeValue"})}
      - ${W("FillSingleEditor",{ref:"$stroke",simple:!0,value:this.state.stroke,key:"stroke",onchange:"changeValue"})} + ${R("FillSingleEditor",{ref:"$stroke",simple:!0,value:this.state.stroke,key:"stroke",onchange:"changeValue"})}
      - ${W("NumberInputEditor",{ref:"$strokeWidth",key:"strokeWidth",value:this.state.strokeWidth,onchange:"changeValue"})} + ${R("NumberInputEditor",{ref:"$strokeWidth",key:"strokeWidth",value:this.state.strokeWidth,onchange:"changeValue"})}
      - ${W("SelectEditor",{ref:"$strokeLineCap",key:"strokeLinecap",value:this.state.strokeLinecap,options:["butt","round","square"],onchange:"changeValue"})} + ${R("SelectEditor",{ref:"$strokeLineCap",key:"strokeLinecap",value:this.state.strokeLinecap,options:["butt","round","square"],onchange:"changeValue"})}
      - ${W("SelectEditor",{ref:"$strokeLineJoin",key:"strokeLinejoin",value:this.state.strokeLinejoin,options:["miter","bevel","round"],onchange:"changeValue"})} + ${R("SelectEditor",{ref:"$strokeLineJoin",key:"strokeLinejoin",value:this.state.strokeLinejoin,options:["miter","bevel","round"],onchange:"changeValue"})}
      - `}[Me("changeValue")](e,t){this.updateData({[e]:t})}updateData(e={}){this.setState(e,!1),this.state.instance.trigger(this.state.changeEvent,e)}[U("changePathManager")](e){this.setState({mode:e})}[U("showDrawManager")](e={}){e.changeEvent=e.changeEvent||"changeDrawManager",this.setState(e),this.$el.show(),this.emit("hidePathManager")}[U("hideDrawManager")](){this.$el.hide()}[se("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}}var Vre="";const OH=["fill","fill-opacity","stroke","stroke-width","stroke-linecap","stroke-linejoin"];class zH extends ge{initialize(){super.initialize(),this.pathParser=new _e}initState(){return{points:[],$target:null,fill:"transparent",stroke:"black","fill-opacity":null,"stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",tolerance:1}}[U("changeDrawManager")](e){this.setState(P({},e),!1)}get scale(){return this.$viewport.scale}template(){return` + `}[Z("changeValue")](e,t){this.updateData({[e]:t})}updateData(e={}){this.setState(e,!1),this.state.instance.trigger(this.state.changeEvent,e)}[M("changePathManager")](e){this.setState({mode:e})}[M("showDrawManager")](e={}){e.changeEvent=e.changeEvent||"changeDrawManager",this.setState(e),this.$el.show(),this.emit("hidePathManager")}[M("hideDrawManager")](){this.$el.hide()}[A("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}}var RF="";const LR=["fill","fill-opacity","stroke","stroke-width","stroke-linecap","stroke-linejoin"];class VR extends Y{initialize(){super.initialize(),this.pathParser=new K}initState(){return{points:[],$target:null,fill:"transparent",stroke:"black","fill-opacity":null,"stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",tolerance:1}}[M("changeDrawManager")](e){this.setState(b({},e),!1)}get scale(){return this.$viewport.scale}template(){return`
      -
      `}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[Pr("document")+Qe("isShow")+ll+ra](){this.trigger("hidePathDrawEditor")}[U("DrawEditorDone")](){this.trigger("hidePathDrawEditor")}get totalPathLength(){if(!this.refs.$view)return 0;var e=this.refs.$view.$("path.object");return e?e.totalLength:0}makePathLayer(){var e;const t=_e.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30);t.transformMat4(this.$viewport.matrixInverse);const i=t.getBBox(),r=yr(i[1],i[0]),s=yr(i[3],i[0]);t.translate(-i[0][0],-i[0][1]);const a={itemType:"svg-path",x:i[0][0],y:i[0][1],width:r,height:s,d:t.d,totalLength:this.totalPathLength};return OH.forEach(l=>{this.state[l]&&Object.assign(a,{[l]:this.state[l]})}),e=this.$context.selection.currentProject.appendChild(this.$editor.createModel(a)),e}addPathLayer(){var e=this.getPathRect();if(e.width!==0&&e.height!==0){var t=this.makePathLayer(e);t&&this.emit("refreshAll")}}changeMode(e){this.setState(P(P({},this.initState()),e),!1)}getCurrentObject(){var e=this.state.current;return e?{current:e,d:e.d}:null}[U("showPathDrawEditor")](e={}){this.changeMode(e),this.$el.show(),this.$el.focus(),this.emit("showDrawManager",{instance:this,fill:this.state.fill,stroke:this.state.stroke,"fill-opacity":this.state["fill-opacity"],"stroke-width":this.state["stroke-width"],"stroke-linecap":this.state["stroke-linecap"],"stroke-linejoin":this.state["stroke-linejoin"]}),this.emit("hidePathEditor"),this.$context.commands.emit("push.mode.view","PathDrawView")}[U("initPathDrawEditor")](){this.pathParser.reset(""),this.refs.$view.empty()}[U("hidePathDrawEditor")](){this.$el.isShow()&&(this.trigger("initPathDrawEditor"),this.$el.hide(),this.emit("hideDrawManager"),this.$commands.emit("pop.mode.view","PathDrawView"))}[U("hideAddViewLayer")](){this.$el.hide(),this.emit("hideDrawManager")}getInnerId(e=""){return"draw-manager-"+e}get toFillSVG(){return ai.parseImage(this.state.fill||"transparent").toSVGString(this.fillId)}get toStrokeSVG(){return ai.parseImage(this.state.stroke||"black").toSVGString(this.strokeId)}get toDefInnerString(){return` +
      `}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[er("document")+fe("isShow")+ra+Di](){this.trigger("hidePathDrawEditor")}[M("DrawEditorDone")](){this.trigger("hidePathDrawEditor")}get totalPathLength(){if(!this.refs.$view)return 0;var e=this.refs.$view.$("path.object");return e?e.totalLength:0}makePathLayer(){var e;const t=K.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30);t.transformMat4(this.$viewport.matrixInverse);const r=t.getBBox(),i=Kt(r[1],r[0]),a=Kt(r[3],r[0]);t.translate(-r[0][0],-r[0][1]);const n={itemType:"svg-path",x:r[0][0],y:r[0][1],width:i,height:a,d:t.d,totalLength:this.totalPathLength};return LR.forEach(l=>{this.state[l]&&Object.assign(n,{[l]:this.state[l]})}),e=this.$context.selection.currentProject.appendChild(this.$editor.createModel(n)),e}addPathLayer(){var e=this.getPathRect();if(e.width!==0&&e.height!==0){var t=this.makePathLayer(e);t&&this.emit("refreshAll")}}changeMode(e){this.setState(b(b({},this.initState()),e),!1)}getCurrentObject(){var e=this.state.current;return e?{current:e,d:e.d}:null}[M("showPathDrawEditor")](e={}){this.changeMode(e),this.$el.show(),this.$el.focus(),this.emit("showDrawManager",{instance:this,fill:this.state.fill,stroke:this.state.stroke,"fill-opacity":this.state["fill-opacity"],"stroke-width":this.state["stroke-width"],"stroke-linecap":this.state["stroke-linecap"],"stroke-linejoin":this.state["stroke-linejoin"]}),this.emit("hidePathEditor"),this.$context.commands.emit("push.mode.view","PathDrawView")}[M("initPathDrawEditor")](){this.pathParser.reset(""),this.refs.$view.empty()}[M("hidePathDrawEditor")](){this.$el.isShow()&&(this.trigger("initPathDrawEditor"),this.$el.hide(),this.emit("hideDrawManager"),this.$commands.emit("pop.mode.view","PathDrawView"))}[M("hideAddViewLayer")](){this.$el.hide(),this.emit("hideDrawManager")}getInnerId(e=""){return"draw-manager-"+e}get toFillSVG(){return at.parseImage(this.state.fill||"transparent").toSVGString(this.fillId)}get toStrokeSVG(){return at.parseImage(this.state.stroke||"black").toSVGString(this.strokeId)}get toDefInnerString(){return` ${this.toFillSVG} ${this.toStrokeSVG} `}get toDefString(){var e=this.toDefInnerString.trim();return` ${e} - `}get fillId(){return this.getInnerId("fill")}get strokeId(){return this.getInnerId("stroke")}get toFillValue(){return ai.parseImage(this.state.fill||"transparent").toFillValue(this.fillId)}get toStrokeValue(){return ai.parseImage(this.state.stroke||"black").toFillValue(this.strokeId)}[$e("$view")](){const e=_e.makePathByPoints(this.state.points).simplify(this.state.tolerance);return{innerHTML:` + `}get fillId(){return this.getInnerId("fill")}get strokeId(){return this.getInnerId("stroke")}get toFillValue(){return at.parseImage(this.state.fill||"transparent").toFillValue(this.fillId)}get toStrokeValue(){return at.parseImage(this.state.stroke||"black").toFillValue(this.strokeId)}[ne("$view")](){const e=K.makePathByPoints(this.state.points).simplify(this.state.tolerance);return{innerHTML:` ${this.toDefString} {if(this.isMultiStyle(i.key))return this.getMultiStyle d="${e.d}" /> - `}}renderPath(){this.bindData("$view")}[U("resizeEditor")](){this.initRect(!0)}getPathRect(){this.initRect(!0);var e=this.refs.$view.$("path.object"),t={x:0,y:0,width:0,height:0};return e&&(t=e.rect(),t.x-=this.state.rect.x,t.y-=this.state.rect.y),t}[qe("$view")+at()+lt()](e){this.initRect(),this.state.altKey=!1,this.state.startXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.points=[this.state.startXY]}move(e,t,i,r){this.state.points.push({x:this.state.startXY.x+e,y:this.state.startXY.y+t,pressure:r}),this.renderPath()}end(){this.addPathLayer(),this.trigger("initPathDrawEditor")}}function Lb(n){n.registerUI("canvas.view",{PathDrawView:zH}),n.registerUI("page.subeditor.view",{DrawManager:RH})}var Dre="";const em=["startPoint","endPoint","reversePoint"];function kb(n,e,t,i,r){var s=n.filter(o=>o?Math.abs(o[e]-t)<=r:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));s.sort((o,l)=>o.dista).forEach(a=>{s.filter(o=>a[o]).forEach(o=>{var l=a[o],c=Math.abs(l[e]-t);c<=i&&r.push({dist:c,point:l})})}),r.sort((a,o)=>a.dist>o.dist?1:-1),r.length?r[0].point:null}function Rb(n,e,t,i=1){for(var r=[],s=0,a=n.length;sDH(e,t,d,i)).join(" ");return{d:h}}function DH(n,e,t,i=1){var{command:r,values:s}=t;switch(r){case"Z":return"Z";default:var a=s.map(o=>{var l=o.x-n===0?0:(o.x-n)/i,c=o.y-e===0?0:(o.y-e)/i;return`${l} ${c}`}).join(" ");return`${r} ${a}`}}function FH(n,e){return!(n.x2.valuee.x||n.y.value>e.y)}class Tu{static generatorPathString(e,t=0,i=0,r=1){return Rb(e,t,i,r).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Ji,this.guideLineManager=new Ji,this.segmentManager=new xg(this.pathEditor.$viewport),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const i=this.points[t.index][t.key];if(!!i)return{x:i.x,y:i.y,key:t.key,index:i.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var i=[];if(this.points.forEach((r,s)=>{em.forEach(a=>{const o=r[a];FH(e,o)&&i.push({x:o.x,y:o.y,key:a,index:s})})}),t){i=i.map(o=>{const l=this.makeSegmentKey(o);return Ve(P({},o),{included:Boolean(this.selectedPointKeys[l])})});const r=i.filter(o=>o.included),s=i.filter(o=>!o.included);let a=[...this.selectedPointList];r.length&&(a=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(r.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...a,...s)}else this.select(...i)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:i,key:r,index:s})=>({x:t,y:i,key:r,index:+s})),e.forEach(t=>{var i=this.makeSegmentKey(t);this.selectedPointKeys[i]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(i=>{em.forEach(r=>{const{x:s,y:a}=i[r];t.push({x:s,y:a,key:r,index:i.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:i.x,y:i.y,key:e,index:t}):this.select(...this.selectedPointList.filter(r=>r.key!==e||r.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)&&this.select({x:i.x,y:i.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var i;var t=(i=this.points[e.index])==null?void 0:i[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var i=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[i]}commitTransformMatrix(e,t){var i=Kt([],[e.x,e.y,0],t);return{x:i[0],y:i[1]}}transformMat4(e){this.transformPoints.forEach((t,i)=>{var r=this.points[i];Object.assign(r.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(r.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(r.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:i,width:r,height:s}=this.transformRect,a=Ki();switch(Ni(a,a,[t,i,0]),e){case"flipX":us(a,a,[-1,1,1]),Ni(a,a,[-r,0,0]);break;case"flipY":us(a,a,[1,-1,1]),Ni(a,a,[0,-s,0]);break;case"flip":us(a,a,[-1,-1,1]),Ni(a,a,[-r,-s,0]);break}Ni(a,a,[-t,-i,0]),this.transformMat4(a)}initTransform(e){this.transformRect=rt(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:rt(t.startPoint),endPoint:rt(t.endPoint),reversePoint:rt(t.reversePoint)}))}setConnectedPoint(e,t){var i=this.state,r=i.dragXY.x+e,s=i.dragXY.y+t,a={x:r,y:s},o={x:r,y:s};i.dragPoints&&(i.reversePoint=xe.getReversePoint(i.startPoint,a));var l={startPoint:i.startPoint,endPoint:a,curve:!!i.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=rt(e),i=rt(e),r={startPoint:e,endPoint:t,curve:!1,reversePoint:i,connected:!1,close:!1};this.points.push(r)}getPrevPoint(e){return xe.getPrevPoint(this.points,e)}getIndexPoint(e){return xe.getIndexPoint(this.points,e)}getNextPoint(e){return xe.getNextPoint(this.points,e)}getConnectedPointList(e){return xe.getConnectedPointList(this.points,e)}isFirst(e){return xe.isFirst(e)}getLastPoint(e){return xe.getLastPoint(this.points,e)}setCachePoint(e,t){var i=this.state;this.snapPointList=[],this.selectedIndex=e,i.connectedPoint=this.getPrevPoint(e),i.connectedPointList=rt(xe.getConnectedPointList(this.points,this.selectedIndex)),i.connectedPoint&&!i.connectedPoint.connected&&(i.connectedPoint=null),i.segment=this.getIndexPoint(e),i.segment.connected&&(i.connectedPoint=this.getNextPoint(e));var r=this.isFirst(i.segment);if(r){var s=this.getLastPoint(e);s.connected&&(i.connectedPoint=s)}i.segmentKey=t,i.isCurveSegment=i.segment.curve&&i.segmentKey!="startPoint",i.originalSegment=rt(i.segment),i.connectedPoint&&(i.originalConnectedPoint=rt(i.connectedPoint)),i.cachedPoints=[],this.points.filter(a=>a&&a!=i.segment).forEach(a=>{i.cachedPoints.push(a.startPoint,a.reversePoint,a.endPoint)})}moveSegment(e,t,i,r=void 0){if(r){const l=this.points[r.index][e];l.x=r[e].x+t,l.y=r[e].y+i}else{var s=this.state,a=s.originalSegment[e],o=s.segment[e];a&&(o.x=a.x+t,o.y=a.y+i)}}calculateToCurve(e,t,i){var r=(t.startPoint.x+i.startPoint.x)/2,s=(t.startPoint.y+i.startPoint.y)/2,a=(t.startPoint.x-r)/2,o=(t.startPoint.y-s)/2;return e.endPoint={x:e.startPoint.x+a,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-a,y:e.startPoint.y-o},{dx:a,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=rt(t.startPoint),t.endPoint=rt(t.startPoint),t.command==="M"){var i=xe.getPrevPoint(this.points,t.index);i.connected&&(i.curve=!1,i.reversePoint=rt(i.startPoint),i.endPoint=rt(i.startPoint))}else{var r=this.getNextPoint(e);if(r&&r.command==="M"){var s=r;s.curve=!1,s.reversePoint=rt(s.startPoint),s.endPoint=rt(s.startPoint)}}else{t.curve=!0;var a=this.getPrevPoint(e),r=this.getNextPoint(e);if(r&&r.indexe&&r.command!=="M")this.calculateToCurve(t,r,a);else if(!r&&a){var o=(t.startPoint.x-a.startPoint.x)/3,l=(t.startPoint.y-a.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=xe.getReversePoint(t.startPoint,t.endPoint)}else if(!a&&r){var o=(t.startPoint.x-r.startPoint.x)/3,l=(t.startPoint.y-r.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=xe.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,i){var r=this.state;this.moveSegment(e,t,i);var s=e==="endPoint"?"reversePoint":"endPoint";r.segment[s]=xe.getReversePoint(r.segment.startPoint,r.segment[e])}rotateSegmentTarget(e,t){var i=this.state;if(i.originalSegment&&i.segment){var{x:r,y:s}=i.originalSegment.startPoint,{x:a,y:o}=i.segment[e],{x:l,y:c}=i.originalSegment[t],{x:h,y:d}=pl(li(a-r,o-s),Rr(l,c,r,s),r,s);i.segment[t]={x:h,y:d}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,d,p,r=1){var s=this.state,a=s.cachedPoints,o=s.originalSegment[e];if(!e)return{dx:d,dy:p,snapPointList:[]};var l=o.x+d,c=o.y+p,{point:h,distanceValue:d}=kb(a,"x",l,d,r),{point:u,distanceValue:p}=kb(a,"y",c,p,r),f={x:o.x+d,y:o.y+p},g=[];return h&&g.push({startPoint:h,endPoint:f}),u&&g.push({startPoint:u,endPoint:f}),{dx:d,dy:p,snapPointList:g}}copySegment(e,t){t.startPoint=rt(e.startPoint),t.endPoint=rt(e.endPoint),t.reversePoint=rt(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.x=i.x+e,r.y=i.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t){this.selectedGroup.points.forEach(i=>{const r=this.points[i.index];r.startPoint.x=i.startPoint.x+e,r.startPoint.y=i.startPoint.y+t,r.endPoint.x=i.endPoint.x+e,r.endPoint.y=i.endPoint.y+t,r.reversePoint.x=i.reversePoint.x+e,r.reversePoint.y=i.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return xe.getSplitedGroupList(this.points)}get groupList(){return xe.getGroupList(this.points)}getGroup(e,t){return xe.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(r=>r.groupIndex):(this.selectedPointList.forEach(r=>{const s=this.getGroup(t,r.index);s&&e.add(s.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.removed=!0});const e=xe.splitPoints(this.points),t=xe.recoverPoints(e.map(i=>i.filter(r=>!r.startPoint.removed).map(r=>(r.endPoint.removed&&(r.endPoint=rt(r.startPoint)),r.reversePoint.removed&&(r.reversePoint=rt(r.startPoint)),xe.isEqual(r.endPoint,r.startPoint,r.reversePoint)&&(r.command="L",r.curve=!1),r))));this.points=t,this.select()}move(e,t,i){var r=this.state,{isCurveSegment:s,segmentKey:a,connectedPoint:o}=r;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:l}=this.calculateSnap(a,e,t,3);if(this.snapPointList=l||[],s)if(i.shiftKey){this.moveSegment(a,e,t);var c=a==="endPoint"?"reversePoint":"endPoint";r.segment[c]=xe.getReversePoint(r.segment.startPoint,r.segment[a])}else i.altKey?(this.moveSegment(a,e,t),this.rotateSegment(a)):this.moveSegment(a,e,t);else this.moveSegment("startPoint",e,t),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),i.altKey||r.connectedPointList.forEach(u=>{this.moveSegment("startPoint",e,t,u),this.moveSegment("endPoint",e,t,u),this.moveSegment("reversePoint",e,t,u)});o&&this.copySegment(r.segment,r.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t)}moveEnd(e,t){var i=this.state,r=this.points,s=i.dragXY.x+e,a=i.dragXY.y+t,o={x:s,y:a},l={x:s,y:a};i.dragPoints&&(l=xe.getReversePoint(i.startPoint,o)),r.push({command:i.clickCount===0?"M":"",startPoint:i.startPoint,endPoint:o,curve:!!i.dragPoints,reversePoint:l}),i.startPoint=null,i.dragPoints=!1,i.moveXY=null}setPoint(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i),o=[Ve(P({},s),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},Ve(P({},a),{reversePoint:e.second[2]})],l=xe.getIndex(r,t);return r.splice(l,2,...o),this.points=r,l+1}setPointQuard(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i);if(s.curve&&a.curve===!1){var o=[Ve(P({},s),{endPoint:s.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=xe.getIndex(r,t);r.splice(l,1,...o)}else{var o=[P({},s),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},Ve(P({},a),{reversePoint:e.second[1],curve:!0})],l=xe.getIndex(r,t);r.splice(l,2,...o)}return this.points=r,l+1}setPointLine(e){var t=e.first[0],i=this.clonePoints,r=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],s=xe.getIndex(i,t);return i.splice(s+1,0,...r),this.points=i,s+1}toPath(e=0,t=0,i=1){return Rb(this.clonePoints,e,t,i)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var i=Math.min(e.startPoint.x,t.startPoint.x),r=Math.max(e.startPoint.x,t.startPoint.x),s=Math.min(e.startPoint.y,t.startPoint.y),a=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:a},{x:r,y:a}).addDistanceLine({x:r,y:s},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:s},{x:i,y:a}).addDistanceLine({x:i,y:a},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(i.startPoint).L(i.endPoint).X(i.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:i,points:r},s)=>{const a=Tu.generatorPathString(r),o=wn(_e.fromSVGString(a).getBBox());return{points:r,startPointIndex:i,groupIndex:s,center:o[4],d:a}}),t=e.length;return` + `}}renderPath(){this.bindData("$view")}[M("resizeEditor")](){this.initRect(!0)}getPathRect(){this.initRect(!0);var e=this.refs.$view.$("path.object"),t={x:0,y:0,width:0,height:0};return e&&(t=e.rect(),t.x-=this.state.rect.x,t.y-=this.state.rect.y),t}[me("$view")+xe()+Se()](e){this.initRect(),this.state.altKey=!1,this.state.startXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.points=[this.state.startXY]}move(e,t,r,i){this.state.points.push({x:this.state.startXY.x+e,y:this.state.startXY.y+t,pressure:i}),this.renderPath()}end(){this.addPathLayer(),this.trigger("initPathDrawEditor")}}function OR(s){s.registerUI("canvas.view",{PathDrawView:VR}),s.registerUI("page.subeditor.view",{DrawManager:ER})}var jF="";const lh=["startPoint","endPoint","reversePoint"];function ng(s,e,t,r,i){var a=s.filter(o=>o?Math.abs(o[e]-t)<=i:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));a.sort((o,l)=>o.distn).forEach(n=>{a.filter(o=>n[o]).forEach(o=>{var l=n[o],c=Math.abs(l[e]-t);c<=r&&i.push({dist:c,point:l})})}),i.sort((n,o)=>n.dist>o.dist?1:-1),i.length?i[0].point:null}function lg(s,e,t,r=1){for(var i=[],a=0,n=s.length;ajR(e,t,u,r)).join(" ");return{d:h}}function jR(s,e,t,r=1){var{command:i,values:a}=t;switch(i){case"Z":return"Z";default:var n=a.map(o=>{var l=o.x-s===0?0:(o.x-s)/r,c=o.y-e===0?0:(o.y-e)/r;return`${l} ${c}`}).join(" ");return`${i} ${n}`}}function zR(s,e){return!(s.x2.valuee.x||s.y.value>e.y)}class Zo{static generatorPathString(e,t=0,r=0,i=1){return lg(e,t,r,i).d}constructor(e){this.pathEditor=e,this.pathStringManager=new jt,this.guideLineManager=new jt,this.segmentManager=new kc(this.pathEditor.$viewport),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const r=this.points[t.index][t.key];if(!!r)return{x:r.x,y:r.y,key:t.key,index:r.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var r=[];if(this.points.forEach((i,a)=>{lh.forEach(n=>{const o=i[n];zR(e,o)&&r.push({x:o.x,y:o.y,key:n,index:a})})}),t){r=r.map(o=>{const l=this.makeSegmentKey(o);return se(b({},o),{included:Boolean(this.selectedPointKeys[l])})});const i=r.filter(o=>o.included),a=r.filter(o=>!o.included);let n=[...this.selectedPointList];i.length&&(n=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(i.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...n,...a)}else this.select(...r)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:r,key:i,index:a})=>({x:t,y:r,key:i,index:+a})),e.forEach(t=>{var r=this.makeSegmentKey(t);this.selectedPointKeys[r]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(r=>{lh.forEach(i=>{const{x:a,y:n}=r[i];t.push({x:a,y:n,key:i,index:r.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:r.x,y:r.y,key:e,index:t}):this.select(...this.selectedPointList.filter(i=>i.key!==e||i.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)&&this.select({x:r.x,y:r.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var r;var t=(r=this.points[e.index])==null?void 0:r[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var r=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[r]}commitTransformMatrix(e,t){var r=Ze([],[e.x,e.y,0],t);return{x:r[0],y:r[1]}}transformMat4(e){this.transformPoints.forEach((t,r)=>{var i=this.points[r];Object.assign(i.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(i.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(i.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:r,width:i,height:a}=this.transformRect,n=Vt();switch(kt(n,n,[t,r,0]),e){case"flipX":li(n,n,[-1,1,1]),kt(n,n,[-i,0,0]);break;case"flipY":li(n,n,[1,-1,1]),kt(n,n,[0,-a,0]);break;case"flip":li(n,n,[-1,-1,1]),kt(n,n,[-i,-a,0]);break}kt(n,n,[-t,-r,0]),this.transformMat4(n)}initTransform(e){this.transformRect=be(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:be(t.startPoint),endPoint:be(t.endPoint),reversePoint:be(t.reversePoint)}))}setConnectedPoint(e,t){var r=this.state,i=r.dragXY.x+e,a=r.dragXY.y+t,n={x:i,y:a},o={x:i,y:a};r.dragPoints&&(r.reversePoint=W.getReversePoint(r.startPoint,n));var l={startPoint:r.startPoint,endPoint:n,curve:!!r.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=be(e),r=be(e),i={startPoint:e,endPoint:t,curve:!1,reversePoint:r,connected:!1,close:!1};this.points.push(i)}getPrevPoint(e){return W.getPrevPoint(this.points,e)}getIndexPoint(e){return W.getIndexPoint(this.points,e)}getNextPoint(e){return W.getNextPoint(this.points,e)}getConnectedPointList(e){return W.getConnectedPointList(this.points,e)}isFirst(e){return W.isFirst(e)}getLastPoint(e){return W.getLastPoint(this.points,e)}setCachePoint(e,t){var r=this.state;this.snapPointList=[],this.selectedIndex=e,r.connectedPoint=this.getPrevPoint(e),r.connectedPointList=be(W.getConnectedPointList(this.points,this.selectedIndex)),r.connectedPoint&&!r.connectedPoint.connected&&(r.connectedPoint=null),r.segment=this.getIndexPoint(e),r.segment.connected&&(r.connectedPoint=this.getNextPoint(e));var i=this.isFirst(r.segment);if(i){var a=this.getLastPoint(e);a.connected&&(r.connectedPoint=a)}r.segmentKey=t,r.isCurveSegment=r.segment.curve&&r.segmentKey!="startPoint",r.originalSegment=be(r.segment),r.connectedPoint&&(r.originalConnectedPoint=be(r.connectedPoint)),r.cachedPoints=[],this.points.filter(n=>n&&n!=r.segment).forEach(n=>{r.cachedPoints.push(n.startPoint,n.reversePoint,n.endPoint)})}moveSegment(e,t,r,i=void 0){if(i){const l=this.points[i.index][e];l.x=i[e].x+t,l.y=i[e].y+r}else{var a=this.state,n=a.originalSegment[e],o=a.segment[e];n&&(o.x=n.x+t,o.y=n.y+r)}}calculateToCurve(e,t,r){var i=(t.startPoint.x+r.startPoint.x)/2,a=(t.startPoint.y+r.startPoint.y)/2,n=(t.startPoint.x-i)/2,o=(t.startPoint.y-a)/2;return e.endPoint={x:e.startPoint.x+n,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-n,y:e.startPoint.y-o},{dx:n,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=be(t.startPoint),t.endPoint=be(t.startPoint),t.command==="M"){var r=W.getPrevPoint(this.points,t.index);r.connected&&(r.curve=!1,r.reversePoint=be(r.startPoint),r.endPoint=be(r.startPoint))}else{var i=this.getNextPoint(e);if(i&&i.command==="M"){var a=i;a.curve=!1,a.reversePoint=be(a.startPoint),a.endPoint=be(a.startPoint)}}else{t.curve=!0;var n=this.getPrevPoint(e),i=this.getNextPoint(e);if(i&&i.indexe&&i.command!=="M")this.calculateToCurve(t,i,n);else if(!i&&n){var o=(t.startPoint.x-n.startPoint.x)/3,l=(t.startPoint.y-n.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=W.getReversePoint(t.startPoint,t.endPoint)}else if(!n&&i){var o=(t.startPoint.x-i.startPoint.x)/3,l=(t.startPoint.y-i.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=W.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,r){var i=this.state;this.moveSegment(e,t,r);var a=e==="endPoint"?"reversePoint":"endPoint";i.segment[a]=W.getReversePoint(i.segment.startPoint,i.segment[e])}rotateSegmentTarget(e,t){var r=this.state;if(r.originalSegment&&r.segment){var{x:i,y:a}=r.originalSegment.startPoint,{x:n,y:o}=r.segment[e],{x:l,y:c}=r.originalSegment[t],{x:h,y:u}=na(ot(n-i,o-a),sr(l,c,i,a),i,a);r.segment[t]={x:h,y:u}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,u,v,i=1){var a=this.state,n=a.cachedPoints,o=a.originalSegment[e];if(!e)return{dx:u,dy:v,snapPointList:[]};var l=o.x+u,c=o.y+v,{point:h,distanceValue:u}=ng(n,"x",l,u,i),{point:d,distanceValue:v}=ng(n,"y",c,v,i),g={x:o.x+u,y:o.y+v},y=[];return h&&y.push({startPoint:h,endPoint:g}),d&&y.push({startPoint:d,endPoint:g}),{dx:u,dy:v,snapPointList:y}}copySegment(e,t){t.startPoint=be(e.startPoint),t.endPoint=be(e.endPoint),t.reversePoint=be(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.x=r.x+e,i.y=r.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t){this.selectedGroup.points.forEach(r=>{const i=this.points[r.index];i.startPoint.x=r.startPoint.x+e,i.startPoint.y=r.startPoint.y+t,i.endPoint.x=r.endPoint.x+e,i.endPoint.y=r.endPoint.y+t,i.reversePoint.x=r.reversePoint.x+e,i.reversePoint.y=r.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return W.getSplitedGroupList(this.points)}get groupList(){return W.getGroupList(this.points)}getGroup(e,t){return W.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(i=>i.groupIndex):(this.selectedPointList.forEach(i=>{const a=this.getGroup(t,i.index);a&&e.add(a.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.removed=!0});const e=W.splitPoints(this.points),t=W.recoverPoints(e.map(r=>r.filter(i=>!i.startPoint.removed).map(i=>(i.endPoint.removed&&(i.endPoint=be(i.startPoint)),i.reversePoint.removed&&(i.reversePoint=be(i.startPoint)),W.isEqual(i.endPoint,i.startPoint,i.reversePoint)&&(i.command="L",i.curve=!1),i))));this.points=t,this.select()}move(e,t,r){var i=this.state,{isCurveSegment:a,segmentKey:n,connectedPoint:o}=i;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:l}=this.calculateSnap(n,e,t,3);if(this.snapPointList=l||[],a)if(r.shiftKey){this.moveSegment(n,e,t);var c=n==="endPoint"?"reversePoint":"endPoint";i.segment[c]=W.getReversePoint(i.segment.startPoint,i.segment[n])}else r.altKey?(this.moveSegment(n,e,t),this.rotateSegment(n)):this.moveSegment(n,e,t);else this.moveSegment("startPoint",e,t),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),r.altKey||i.connectedPointList.forEach(d=>{this.moveSegment("startPoint",e,t,d),this.moveSegment("endPoint",e,t,d),this.moveSegment("reversePoint",e,t,d)});o&&this.copySegment(i.segment,i.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t)}moveEnd(e,t){var r=this.state,i=this.points,a=r.dragXY.x+e,n=r.dragXY.y+t,o={x:a,y:n},l={x:a,y:n};r.dragPoints&&(l=W.getReversePoint(r.startPoint,o)),i.push({command:r.clickCount===0?"M":"",startPoint:r.startPoint,endPoint:o,curve:!!r.dragPoints,reversePoint:l}),r.startPoint=null,r.dragPoints=!1,r.moveXY=null}setPoint(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=W.getPoint(i,t),n=W.getPoint(i,r),o=[se(b({},a),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},se(b({},n),{reversePoint:e.second[2]})],l=W.getIndex(i,t);return i.splice(l,2,...o),this.points=i,l+1}setPointQuard(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=W.getPoint(i,t),n=W.getPoint(i,r);if(a.curve&&n.curve===!1){var o=[se(b({},a),{endPoint:a.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=W.getIndex(i,t);i.splice(l,1,...o)}else{var o=[b({},a),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},se(b({},n),{reversePoint:e.second[1],curve:!0})],l=W.getIndex(i,t);i.splice(l,2,...o)}return this.points=i,l+1}setPointLine(e){var t=e.first[0],r=this.clonePoints,i=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],a=W.getIndex(r,t);return r.splice(a+1,0,...i),this.points=r,a+1}toPath(e=0,t=0,r=1){return lg(this.clonePoints,e,t,r)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var r=Math.min(e.startPoint.x,t.startPoint.x),i=Math.max(e.startPoint.x,t.startPoint.x),a=Math.min(e.startPoint.y,t.startPoint.y),n=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:n},{x:i,y:n}).addDistanceLine({x:i,y:a},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:a},{x:r,y:n}).addDistanceLine({x:r,y:n},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(r.startPoint).L(r.endPoint).X(r.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:r,points:i},a)=>{const n=Zo.generatorPathString(i),o=Or(K.fromSVGString(n).getBBox());return{points:i,startPointIndex:r,groupIndex:a,center:o[4],d:n}}),t=e.length;return` - ${e.map(i=>{const{center:r}=i,[s,a]=r;return` - {const{center:i}=r,[a,n]=i;return` + ${t>1&&` - ${i.groupIndex+1} + ${r.groupIndex+1} `} `}).join("")} @@ -2520,7 +2484,7 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle ${this.makePathArea()} ${this.segmentManager.toString()} - `}}function Rs([n,e]){return{x:n,y:e}}const NH=class extends ge{convertToCurve(n){this.pathGenerator.convertToCurve(n),this.renderPath(),this.refreshPathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[cl("$view [data-segment]")+Qe("isEditableSegment")+St](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}[Sf("$view [data-segment]")+St+vf(300)](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}},BH=class extends NH{calculatePointOnLine(n,e){var t=new _e(n);return t.getClosedPoint(e)}[qe("$view .split-path")+at()+lt()](n){this.initRect();var e=new _e(n.$dt.attr("d")),t={x:n.xy.x-this.state.rect.x,y:n.xy.y-this.state.rect.y},i=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"));return}else{if(e.segments[1].command==="C"){var r=[Rs(e.segments[0].values),Rs(e.segments[1].values.slice(0,2)),Rs(e.segments[1].values.slice(2,4)),Rs(e.segments[1].values.slice(4,6))],s=sg(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPoint(Kc(r,a))}else if(e.segments[1].command==="Q"){var r=[Rs(e.segments[0].values),Rs(e.segments[1].values.slice(0,2)),Rs(e.segments[1].values.slice(2,4))],s=ag(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointQuard(qc(r,a))}else if(e.segments[1].command==="L"){var r=[Rs(e.segments[0].values),Rs(e.segments[1].values.slice(0,2))],s=og(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointLine(Zc(r,a)),n.altKey&&this.pathGenerator.convertToCurve(i)}this.renderPath(),this.refreshPathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(i,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",i)}}},jH=class extends BH{[U("changePathTransform")](n){this.resetTransformZone();var{width:e,height:t}=this.state.transformZoneRect;switch(this.pathGenerator.initTransform(this.state.transformZoneRect),n){case"flipX":this.pathGenerator.transform("flipX",e,0);break;case"flipY":this.pathGenerator.transform("flipY",0,t);break;case"flip":this.pathGenerator.transform("flip",e,t)}this.renderPath(),this.refreshPathLayer()}[U("changePathUtil")](n){if(n==="reverse"){const{d:e}=this.pathGenerator.toPath(),t=new _e(e);t.reverse(...this.pathGenerator.selectedGroupIndexList),t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d}),this.updatePathLayer()}}[U("divideSegmentsByCount")](n){const{d:e}=this.pathGenerator.toPath(),i=new _e(e).divideSegmentByCount(n);i.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:i.d})}},GH=["fill","fill-opacity","stroke","stroke-width"];class HH extends jH{initialize(){super.initialize(),this.pathParser=new _e,this.pathGenerator=new Tu(this)}initState(){return{changeEvent:"updatePathItem",isShow:!1,isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}get scale(){return this.$viewport.scale}template(){return` + `}}function wi([s,e]){return{x:s,y:e}}const AR=class extends Y{convertToCurve(s){this.pathGenerator.convertToCurve(s),this.renderPath(),this.refreshPathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[ia("$view [data-segment]")+fe("isEditableSegment")+Ve](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}[Il("$view [data-segment]")+Ve+wl(300)](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}},DR=class extends AR{calculatePointOnLine(s,e){var t=new K(s);return t.getClosedPoint(e)}[me("$view .split-path")+xe()+Se()](s){this.initRect();var e=new K(s.$dt.attr("d")),t={x:s.xy.x-this.state.rect.x,y:s.xy.y-this.state.rect.y},r=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"));return}else{if(e.segments[1].command==="C"){var i=[wi(e.segments[0].values),wi(e.segments[1].values.slice(0,2)),wi(e.segments[1].values.slice(2,4)),wi(e.segments[1].values.slice(4,6))],a=pc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPoint(Ja(i,n))}else if(e.segments[1].command==="Q"){var i=[wi(e.segments[0].values),wi(e.segments[1].values.slice(0,2)),wi(e.segments[1].values.slice(2,4))],a=gc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointQuard(en(i,n))}else if(e.segments[1].command==="L"){var i=[wi(e.segments[0].values),wi(e.segments[1].values.slice(0,2))],a=fc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointLine(tn(i,n)),s.altKey&&this.pathGenerator.convertToCurve(r)}this.renderPath(),this.refreshPathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(r,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",r)}}},FR=class extends DR{[M("changePathTransform")](s){this.resetTransformZone();var{width:e,height:t}=this.state.transformZoneRect;switch(this.pathGenerator.initTransform(this.state.transformZoneRect),s){case"flipX":this.pathGenerator.transform("flipX",e,0);break;case"flipY":this.pathGenerator.transform("flipY",0,t);break;case"flip":this.pathGenerator.transform("flip",e,t)}this.renderPath(),this.refreshPathLayer()}[M("changePathUtil")](s){if(s==="reverse"){const{d:e}=this.pathGenerator.toPath(),t=new K(e);t.reverse(...this.pathGenerator.selectedGroupIndexList),t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d}),this.updatePathLayer()}}[M("divideSegmentsByCount")](s){const{d:e}=this.pathGenerator.toPath(),r=new K(e).divideSegmentByCount(s);r.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:r.d})}},BR=["fill","fill-opacity","stroke","stroke-width"];class NR extends FR{initialize(){super.initialize(),this.pathParser=new K,this.pathGenerator=new Zo(this)}initState(){return{changeEvent:"updatePathItem",isShow:!1,isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}get scale(){return this.$viewport.scale}template(){return`
      @@ -2540,86 +2504,78 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      -
      `}isShow(){return this.state.isShow}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[U("PathEditorDone")](){this.state.current?(this.refreshPathLayer(),this.trigger("hidePathEditor")):this.addPathLayer(),!this.state.current&&this.pathGenerator.length?this.trigger("initPathEditorView"):this.trigger("hidePathEditor")}[Pr("document")+Qe("isShow")+ra](){this.trigger("PathEditorDone")}[Pr("document")+Qe("isShow")+ll](){this.state.current?this.refreshPathLayer():this.addPathLayer(),this.trigger("hidePathEditor")}makePathLayer(){const e=this.pathGenerator.toPath().d;if(!e)return;var t;const i=new _e(e);i.transformMat4(this.$viewport.matrixInverse);const r=i.getBBox(),s=yr(r[1],r[0]),a=yr(r[3],r[0]);i.translate(-r[0][0],-r[0][1]);const o={itemType:"svg-path",x:r[0][0],y:r[0][1],width:s,height:a,d:i.d,fill:i.closed?"#C4C4C4":"transparent"};return GH.forEach(c=>{this.state[c]&&(o[c]=this.state[c])}),t=this.$context.selection.currentProject.appendChild(this.$editor.createModel(o)),this.$commands.executeCommand("moveLayerToTarget","add path",t,this.$context.selection.currentProject),t}updatePathLayer(){var{d:e}=this.pathGenerator.toPath(),t=new _e(e);t.transformMat4(this.$viewport.matrixInverse),this.emit(this.state.changeEvent,{d:t.d,matrix:this.state.matrix,box:this.state.box})}addPathLayer(){this.changeMode("modify");var e=this.makePathLayer();e&&(this.$config.set("editing.mode.itemType","select"),this.$context.selection.select(e),this.trigger("hidePathEditor"))}changeMode(e,t){this.setState(P({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[]),this.emit("changePathManager",this.state.mode)}[U("changePathManager")](e){this.setState(Ve(P({},e),{clickCount:0}),!1),this.renderPath()}isMode(e){return this.state.mode===e}afterRender(){this.$el.hide()}[U(si)](){if(this.$el.isShow()){const{d:e}=this.pathGenerator.toPath(),t=new _e(e);t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d})}}refreshEditorView(e){e&&e.d&&(this.pathParser.reset(e.d),this.pathParser.transformMat4(this.$viewport.matrix),this.state.cachedMatrixInverse=this.$viewport.matrixInverse,this.pathGenerator.setPoints(this.pathParser.convertGenerator())),this.renderPath()}[U("showPathEditor")](e="path",t={}){this.state.isShow=!0,this.transformMode=e,e==="move"&&(t.current=null,t.points=[]),t.box=t.box||"canvas",this.changeMode(e,t),this.refreshEditorView(t,!0),this.$el.show(),this.$el.focus(),this.emit("showPathManager",{mode:this.state.mode}),this.emit("hidePathDrawEditor"),this.$context.commands.emit("push.mode.view","PathEditorView")}[U("hidePathEditor")](){this.$el.isShow()&&(this.pathParser.reset(""),this.pathGenerator.setPoints([]),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager"),this.$context.commands.emit("pop.mode.view","PathEditorView"),this.emit(kt))}[U("hideAddViewLayer")](){this.state.isShow=!1,this.state.isControl=!1,this.pathParser.reset(""),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager")}[$e("$view")](){var i;const e=this.state.isShow?this.pathGenerator.makeSVGPath():"",t=y.parse((i=this.state.current)==null?void 0:i["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform",box:this.state.box==="box",canvas:this.state.box==="canvas","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[$e("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}refreshPathLayer(){this.updatePathLayer()}renderPath(){this.bindData("$view")}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Zi(_e.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[lo("$view")+St](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=Ze.create(e.target),i=t.hasClass("split-path");i?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[qe("$view :not(.split-path)")+St+Bn+at()+lt()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.$config.set("set.drag.path.area",!1);var i=Ze.create(e.target);if(i.hasClass("svg-editor-canvas")&&!t?(this.$config.set("set.drag.path.area",!0),this.state.isGroupSegment=!1,this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1):(this.pathGenerator.reselect(),this.state.isSegment=i.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&i.attr("data-is-first")==="true",this.state.isGroupSegment=i.hasClass("path-area"),this.state.isGroupSegment?(this.state.selectedGroupIndex=+i.data("group-index"),this.state.selectedPointIndex=+i.data("point-index")):(this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1)),t){if(this.state.isFirstSegment){var r=+i.attr("data-index");this.state.startPoint=this.pathGenerator.points[r].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[r,s]=i.attrs("data-index","data-segment-point");const o=+r;e.shiftKey?this.pathGenerator.toggleSelect(s,o):(this.pathGenerator.setCachePoint(o,s),this.pathGenerator.selectKeyIndex(s,o)),this.renderPath()}else this.state.isGroupSegment&&(this.changeMode("segment-move"),this.pathGenerator.selectGroup(this.state.selectedGroupIndex),this.renderPath())}move(e,t){var i=this.$config.get("bodyEvent");this.$config.true("set.drag.path.area")?this.renderSelectBox(this.state.dragXY,e,t):this.isMode("segment-move")?(this.pathGenerator.move(e,t,i),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&Rr(e,t,0,0)>=2&&(this.state.dragPoints=!i.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),Ue(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){var i=this.$config.get("bodyEvent");this.$config.set("set.move.control.point",!1),this.state.isGroupSegment&&this.pathGenerator.select(),this.$config.true("set.drag.path.area")?e===0&&t===0?(this.changeMode("modify"),this.trigger("hidePathEditor")):(this.changeMode("segment-move"),this.pathGenerator.selectInBox(this.getSelectBox(),i.shiftKey),this.renderPath(),this.hideSelectBox()):this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"))):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}hideSelectBox(){this.refs.$segmentBox.css({left:-1e5})}renderSelectBox(e=null,t=0,i=0){var r={left:e.x+(t<0?t:0),top:e.y+(i<0?i:0),width:Math.abs(t),height:Math.abs(i)};this.refs.$segmentBox.css(r)}getSelectBox(){var[e,t,i,r]=this.refs.$segmentBox.styles("left","top","width","height").map(a=>y.parse(a)),s={x:e,y:t,width:i,height:r};return s.x2=s.x.value+s.width,s.y2=s.y.value+s.height,s}[U("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[U("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}[U("initPathEditorView")](){this.pathParser.reset(""),this.setState(this.initState(),!1),this.state.isShow=!0,this.refs.$view.empty(),this.$el.focus()}}var Fre="";const UH={"segment-move":"modify",modify:"modify",path:"path",transform:"transform",warp:"warp"};class WH extends ge{initState(){return{mode:"move",fill:null,stroke:null,"fill-opacity":null,"stroke-width":null,msg:this.$i18n("path.manager.msg")}}template(){return` +
      `}isShow(){return this.state.isShow}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[M("PathEditorDone")](){this.state.current?(this.refreshPathLayer(),this.trigger("hidePathEditor")):this.addPathLayer(),!this.state.current&&this.pathGenerator.length?this.trigger("initPathEditorView"):this.trigger("hidePathEditor")}[er("document")+fe("isShow")+Di](){this.trigger("PathEditorDone")}[er("document")+fe("isShow")+ra](){this.state.current?this.refreshPathLayer():this.addPathLayer(),this.trigger("hidePathEditor")}makePathLayer(){const e=this.pathGenerator.toPath().d;if(!e)return;var t;const r=new K(e);r.transformMat4(this.$viewport.matrixInverse);const i=r.getBBox(),a=Kt(i[1],i[0]),n=Kt(i[3],i[0]);r.translate(-i[0][0],-i[0][1]);const o={itemType:"svg-path",x:i[0][0],y:i[0][1],width:a,height:n,d:r.d,fill:r.closed?"#C4C4C4":"transparent"};return BR.forEach(c=>{this.state[c]&&(o[c]=this.state[c])}),t=this.$context.selection.currentProject.appendChild(this.$editor.createModel(o)),this.$commands.executeCommand("moveLayerToTarget","add path",t,this.$context.selection.currentProject),t}updatePathLayer(){var{d:e}=this.pathGenerator.toPath(),t=new K(e);t.transformMat4(this.$viewport.matrixInverse),this.emit(this.state.changeEvent,{d:t.d,matrix:this.state.matrix,box:this.state.box})}addPathLayer(){this.changeMode("modify");var e=this.makePathLayer();e&&(this.$config.set("editing.mode.itemType","select"),this.$context.selection.select(e),this.trigger("hidePathEditor"))}changeMode(e,t){this.setState(b({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[]),this.emit("changePathManager",this.state.mode)}[M("changePathManager")](e){this.setState(se(b({},e),{clickCount:0}),!1),this.renderPath()}isMode(e){return this.state.mode===e}afterRender(){this.$el.hide()}[M(st)](){if(this.$el.isShow()){const{d:e}=this.pathGenerator.toPath(),t=new K(e);t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d})}}refreshEditorView(e){e&&e.d&&(this.pathParser.reset(e.d),this.pathParser.transformMat4(this.$viewport.matrix),this.state.cachedMatrixInverse=this.$viewport.matrixInverse,this.pathGenerator.setPoints(this.pathParser.convertGenerator())),this.renderPath()}[M("showPathEditor")](e="path",t={}){this.state.isShow=!0,this.transformMode=e,e==="move"&&(t.current=null,t.points=[]),t.box=t.box||"canvas",this.changeMode(e,t),this.refreshEditorView(t,!0),this.$el.show(),this.$el.focus(),this.emit("showPathManager",{mode:this.state.mode}),this.emit("hidePathDrawEditor"),this.$context.commands.emit("push.mode.view","PathEditorView")}[M("hidePathEditor")](){this.$el.isShow()&&(this.pathParser.reset(""),this.pathGenerator.setPoints([]),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager"),this.$context.commands.emit("pop.mode.view","PathEditorView"),this.emit(Oe))}[M("hideAddViewLayer")](){this.state.isShow=!1,this.state.isControl=!1,this.pathParser.reset(""),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager")}[ne("$view")](){var r;const e=this.state.isShow?this.pathGenerator.makeSVGPath():"",t=p.parse((r=this.state.current)==null?void 0:r["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform",box:this.state.box==="box",canvas:this.state.box==="canvas","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[ne("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}refreshPathLayer(){this.updatePathLayer()}renderPath(){this.bindData("$view")}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Rt(K.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[Ps("$view")+Ve](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=ge.create(e.target),r=t.hasClass("split-path");r?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[me("$view :not(.split-path)")+Ve+Wr+xe()+Se()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.$config.set("set.drag.path.area",!1);var r=ge.create(e.target);if(r.hasClass("svg-editor-canvas")&&!t?(this.$config.set("set.drag.path.area",!0),this.state.isGroupSegment=!1,this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1):(this.pathGenerator.reselect(),this.state.isSegment=r.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&r.attr("data-is-first")==="true",this.state.isGroupSegment=r.hasClass("path-area"),this.state.isGroupSegment?(this.state.selectedGroupIndex=+r.data("group-index"),this.state.selectedPointIndex=+r.data("point-index")):(this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1)),t){if(this.state.isFirstSegment){var i=+r.attr("data-index");this.state.startPoint=this.pathGenerator.points[i].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[i,a]=r.attrs("data-index","data-segment-point");const o=+i;e.shiftKey?this.pathGenerator.toggleSelect(a,o):(this.pathGenerator.setCachePoint(o,a),this.pathGenerator.selectKeyIndex(a,o)),this.renderPath()}else this.state.isGroupSegment&&(this.changeMode("segment-move"),this.pathGenerator.selectGroup(this.state.selectedGroupIndex),this.renderPath())}move(e,t){var r=this.$config.get("bodyEvent");this.$config.true("set.drag.path.area")?this.renderSelectBox(this.state.dragXY,e,t):this.isMode("segment-move")?(this.pathGenerator.move(e,t,r),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&sr(e,t,0,0)>=2&&(this.state.dragPoints=!r.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),de(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){var r=this.$config.get("bodyEvent");this.$config.set("set.move.control.point",!1),this.state.isGroupSegment&&this.pathGenerator.select(),this.$config.true("set.drag.path.area")?e===0&&t===0?(this.changeMode("modify"),this.trigger("hidePathEditor")):(this.changeMode("segment-move"),this.pathGenerator.selectInBox(this.getSelectBox(),r.shiftKey),this.renderPath(),this.hideSelectBox()):this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"))):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}hideSelectBox(){this.refs.$segmentBox.css({left:-1e5})}renderSelectBox(e=null,t=0,r=0){var i={left:e.x+(t<0?t:0),top:e.y+(r<0?r:0),width:Math.abs(t),height:Math.abs(r)};this.refs.$segmentBox.css(i)}getSelectBox(){var[e,t,r,i]=this.refs.$segmentBox.styles("left","top","width","height").map(n=>p.parse(n)),a={x:e,y:t,width:r,height:i};return a.x2=a.x.value+a.width,a.y2=a.y.value+a.height,a}[M("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[M("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}[M("initPathEditorView")](){this.pathParser.reset(""),this.setState(this.initState(),!1),this.state.isShow=!0,this.refs.$view.empty(),this.$el.focus()}}var zF="";const GR={"segment-move":"modify",modify:"modify",path:"path",transform:"transform",warp:"warp"};class HR extends Y{initState(){return{mode:"move",fill:null,stroke:null,"fill-opacity":null,"stroke-width":null,msg:this.$i18n("path.manager.msg")}}template(){return`
      - - - + + +
      - +
      - - - + + +
      - `}[$e("$mode")](){return{"data-selected-value":UH[this.state.mode]}}refresh(){this.bindData("$mode")}[se("$flip button")](e){var t=e.$dt.attr("data-value");t==="2x"?this.emit("divideSegmentsByCount",2):t==="3x"?this.emit("divideSegmentsByCount",3):this.emit("changePathTransform",t)}[se("$util button")](e){var t=e.$dt.attr("data-value");this.emit("changePathUtil",t)}[se("$mode button")](e){var t=e.$dt.attr("data-value");this.updateData({mode:t}),this.refresh()}[se("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e)}[U("changePathManager")](e){this.setState({mode:e})}[U("showPathManager")](e={}){e.changeEvent=e.changeEvent||"changePathManager",this.setState(e),this.$el.show()}[U("hidePathManager")](){this.$el.hide()}}function Ob(n){n.registerUI("canvas.view",{PathEditorView:HH}),n.registerUI("page.subeditor.view",{PathManager:WH})}var Nre="";class XH extends jt{components(){return{LeftAlign:$1,CenterAlign:M1,RightAlign:T1,TopAlign:I1,MiddleAlign:P1,BottomAlign:w1,SameWidth:E1,SameHeight:C1}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` + `}[ne("$mode")](){return{"data-selected-value":GR[this.state.mode]}}refresh(){this.bindData("$mode")}[A("$flip button")](e){var t=e.$dt.attr("data-value");t==="2x"?this.emit("divideSegmentsByCount",2):t==="3x"?this.emit("divideSegmentsByCount",3):this.emit("changePathTransform",t)}[A("$util button")](e){var t=e.$dt.attr("data-value");this.emit("changePathUtil",t)}[A("$mode button")](e){var t=e.$dt.attr("data-value");this.updateData({mode:t}),this.refresh()}[A("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e)}[M("changePathManager")](e){this.setState({mode:e})}[M("showPathManager")](e={}){e.changeEvent=e.changeEvent||"changePathManager",this.setState(e),this.$el.show()}[M("hidePathManager")](){this.$el.hide()}}function UR(s){s.registerUI("canvas.view",{PathEditorView:NR}),s.registerUI("page.subeditor.view",{PathManager:HR})}var AF="";class WR extends Ge{components(){return{LeftAlign:np,CenterAlign:ap,RightAlign:lp,TopAlign:dp,MiddleAlign:op,BottomAlign:sp,SameWidth:hp,SameHeight:cp}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return`
      - - + +
      - - + +
      - - + +
      - - - + + +
      - `}[se("$buttons button")](e){const t=e.$dt.data("command"),i=e.$dt.data("args");t==="convert.smooth.path"?this.$commands.emit(t):this.$commands.emit(t,i)}[U(kt)](){this.refreshShow(()=>this.$context.selection.length===1&&this.$context.selection.is("boolean-path")?!0:this.$context.selection.is("svg-path","polygon","star"))}}function YH(n){n.registerUI("inspector.tab.style",{PathToolProperty:XH})}var KH={key:"check",title:"Check",execute:function(){return[{pattern:"check(20px 20px, 10px 10px, black, transparent)"},{pattern:"check(40px 40px, 20px 20px, black, transparent)"},{pattern:"check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"check(200px 200px, 100px 100px, #102C45, transparent)"}]}},qH={key:"cross-dot",title:"Cross Dot",execute:function(){return[{pattern:"cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)"},{pattern:"cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)"}]}},ZH={key:"diagonal-line",title:"Diagonal Line",execute:function(){return[{pattern:"diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)"},{pattern:"diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)"}]}},JH={key:"dot",title:"Dot",execute:function(){return[{pattern:"dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)"},{pattern:"dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)"},{pattern:"dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)"}]}},QH={key:"grid",title:"Grid",execute:function(){return[{pattern:"grid(20px 20px, 10px 10px, black, transparent)"},{pattern:"grid(40px 40px, 20px 20px, black, transparent)"},{pattern:"grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"grid(200px 200px, 100px 100px, #102C45, transparent)"}]}},eU={key:"horizontal-line",title:"Horizontal Line",execute:function(){return[{pattern:"horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)"},{pattern:"horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)"}]}},tU={key:"vertical-line",title:"Vertical Line",execute:function(){return[{pattern:"vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)"},{pattern:"vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)"}]}},tm=[KH,QH,JH,qH,ZH,tU,eU],Bre="";class iU extends jt{getTitle(){return this.$i18n("pattern.asset.property.title")}initState(){return{mode:"grid",preset:"check"}}getTools(){const e=ta(tm.map(t=>({value:t.key,text:t.title})));return W("SelectEditor",{ref:"$assets",key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[Me("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--pattern-assets-property"}get editableProperty(){return"pattern"}[U(kt)+Ft(100)+Qe("checkShow")](){}getBody(){return` -
      -
      -
      - `}[on("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/pattern",t)}[ve("$patternList")](){var e=tm.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>{const s=ei(tn.toCSS(i.pattern));return`
      -
      -
      -
      -
      `});return t}[se("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");this.$modeView.isCurrentMode(ha.CanvasView)?this.$commands.emit("addBackgroundImagePattern",t):this.emit("setPatternAsset",t)}}var jre="";class rU extends ge{initState(){return{hideLabel:this.props.hideLabel,value:this.props.value,patterns:this.parsePattern(this.props.value)}}parsePattern(e){return e==="undefined"?[]:tn.parseStyle(e)}setValue(e){this.setState({value:e,patterns:this.parsePattern(e)})}template(){return` + `}[A("$buttons button")](e){const t=e.$dt.data("command"),r=e.$dt.data("args");t==="convert.smooth.path"?this.$commands.emit(t):this.$commands.emit(t,r)}[M(Oe)](){this.refreshShow(()=>this.$context.selection.length===1&&this.$context.selection.is("boolean-path")?!0:this.$context.selection.is("svg-path","polygon","star"))}}function XR(s){s.registerUI("inspector.tab.style",{PathToolProperty:WR})}var DF="";class YR extends Y{initState(){return{hideLabel:this.props.hideLabel,value:this.props.value,patterns:this.parsePattern(this.props.value)}}parsePattern(e){return e==="undefined"?[]:br.parseStyle(e)}setValue(e){this.setState({value:e,patterns:this.parsePattern(e)})}template(){return`
      - `}[ve("$patternList")](){return this.state.patterns.map((e,t)=>{const i=e.selected?"selected":"";return e.selected&&(this.selectedIndex=t),` -
      - ${W("PatternSizeEditor",{key:"pattern-size",ref:`$bp${t}`,type:e.type,x:e.x,y:e.y,width:e.width,height:e.height,index:t,foreColor:e.foreColor,backColor:e.backColor,blendMode:e.blendMode,lineWidth:e.lineWidth,lineHeight:e.lineHeight,onchange:"changePatternSizeInfo"})} + `}[G("$patternList")](){return this.state.patterns.map((e,t)=>{const r=e.selected?"selected":"";return e.selected&&(this.selectedIndex=t),` +
      + ${R("PatternSizeEditor",{key:"pattern-size",ref:`$bp${t}`,type:e.type,x:e.x,y:e.y,width:e.width,height:e.height,index:t,foreColor:e.foreColor,backColor:e.backColor,blendMode:e.blendMode,lineWidth:e.lineWidth,lineHeight:e.lineHeight,onchange:"changePatternSizeInfo"})}
      - +
      - `})}modifyPattern(){var e=tn.join(this.state.patterns);this.parent.trigger(this.props.onchange,this.props.key,e)}[U("add")](e="check"){var t=tm.find(i=>i.key===e);if(t){const i=tn.parseStyle(t.execute()[0].pattern);this.state.patterns.push.apply(this.state.patterns,i),this.refresh(),this.modifyPattern()}}[se("$add")](){this.trigger("add")}[on("$patternList .pattern-item")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$patternList .pattern-item")+St](){}sortItem(e,t,i){e.splice(i+(t{i.selected=r===e})}[U("changePatternSizeInfo")+Ft(10)](e,t,i){var r=this.state.patterns[i];r.reset(t),this.modifyPattern(),this.refresh()}}var Gre="";class nU extends Tn{getClassName(){return"pattern-info-popup"}getTitle(){return this.$i18n("pattern.info.popup.title")}initState(){return{type:this.props.type||"grid",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,lineWidth:this.props.lineWidth||1,lineHeight:this.props.lineHeight||1,foreColor:this.props.foreColor||"black",backColor:this.props.backColor||"transparent",blendMode:this.props.blendMode||"normal"}}updateData(e={}){this.setState(e,!1);const{x:t,y:i,width:r,height:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.state;this.state.instance.trigger(this.state.changeEvent,{x:t,y:i,width:r,height:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h})}[Me("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){if(this.hasNotX())return"";let e="X",t="";return this.state.type==="diagonal-line"&&(e=this.$i18n("pattern.info.popup.rotate"),t=["deg"]),W("InputRangeEditor",{label:e,ref:"$x",key:"x",value:this.state.x,min:0,max:1e3,step:1,units:t,onchange:"changeRangeEditor"})}templateForY(){return this.hasNotY()?"
      ":W("InputRangeEditor",{label:"Y",ref:"$y",key:"y",value:this.state.y,min:0,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForLabel(){return``}templateForWidth(){return W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.width"),ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.height"),ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}hasNotLineWidth(){return["check"].includes(this.state.type)}hasNotLineHeight(){return["cross-dot","dot","check","diagonal-line","horizontal-line"].includes(this.state.type)}hasNotX(){return["grid","dot","horizontal-line"].includes(this.state.type)}hasNotY(){return["grid","dot","diagonal-line","vertical-line"].includes(this.state.type)}templateForLineWidth(){return this.hasNotLineWidth()?"
      ":W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineWidth"),ref:"$lineWidth",key:"lineWidth",value:this.state.lineWidth,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForLineHeight(){return this.hasNotLineHeight()?"
      ":W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineHeight"),ref:"$lineHeight",key:"lineHeight",value:this.state.lineHeight,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForForeColor(){return W("ColorViewEditor",{ref:"$foreColor",label:this.$i18n("pattern.info.popup.foreColor"),key:"foreColor",value:this.state.foreColor,onchange:"changeRangeEditor"})}templateForBackColor(){return W("ColorViewEditor",{ref:"$backColor",label:this.$i18n("pattern.info.popup.backColor"),key:"backColor",value:this.state.backColor,onchange:"changeRangeEditor"})}templateForBlendMode(){return` + `})}modifyPattern(){var e=br.join(this.state.patterns);this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e="check"){var t=oh.find(r=>r.key===e);if(t){const r=br.parseStyle(t.execute()[0].pattern);this.state.patterns.push.apply(this.state.patterns,r),this.refresh(),this.modifyPattern()}}[A("$add")](){this.trigger("add")}[pr("$patternList .pattern-item")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$patternList .pattern-item")+Ve](){}sortItem(e,t,r){e.splice(r+(t{r.selected=i===e})}[M("changePatternSizeInfo")+Ne(10)](e,t,r){var i=this.state.patterns[r];i.reset(t),this.modifyPattern(),this.refresh()}}var FF="";class KR extends Ar{getClassName(){return"pattern-info-popup"}getTitle(){return this.$i18n("pattern.info.popup.title")}initState(){return{type:this.props.type||"grid",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,lineWidth:this.props.lineWidth||1,lineHeight:this.props.lineHeight||1,foreColor:this.props.foreColor||"black",backColor:this.props.backColor||"transparent",blendMode:this.props.blendMode||"normal"}}updateData(e={}){this.setState(e,!1);const{x:t,y:r,width:i,height:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.state;this.state.instance.trigger(this.state.changeEvent,{x:t,y:r,width:i,height:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h})}[Z("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){if(this.hasNotX())return"";let e="X",t="";return this.state.type==="diagonal-line"&&(e=this.$i18n("pattern.info.popup.rotate"),t=["deg"]),R("InputRangeEditor",{label:e,ref:"$x",key:"x",value:this.state.x,min:0,max:1e3,step:1,units:t,onchange:"changeRangeEditor"})}templateForY(){return this.hasNotY()?"
      ":R("InputRangeEditor",{label:"Y",ref:"$y",key:"y",value:this.state.y,min:0,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForLabel(){return``}templateForWidth(){return R("InputRangeEditor",{label:this.$i18n("pattern.info.popup.width"),ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return R("InputRangeEditor",{label:this.$i18n("pattern.info.popup.height"),ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}hasNotLineWidth(){return["check"].includes(this.state.type)}hasNotLineHeight(){return["cross-dot","dot","check","diagonal-line","horizontal-line"].includes(this.state.type)}hasNotX(){return["grid","dot","horizontal-line"].includes(this.state.type)}hasNotY(){return["grid","dot","diagonal-line","vertical-line"].includes(this.state.type)}templateForLineWidth(){return this.hasNotLineWidth()?"
      ":R("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineWidth"),ref:"$lineWidth",key:"lineWidth",value:this.state.lineWidth,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForLineHeight(){return this.hasNotLineHeight()?"
      ":R("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineHeight"),ref:"$lineHeight",key:"lineHeight",value:this.state.lineHeight,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForForeColor(){return R("ColorViewEditor",{ref:"$foreColor",label:this.$i18n("pattern.info.popup.foreColor"),key:"foreColor",value:this.state.foreColor,onchange:"changeRangeEditor"})}templateForBackColor(){return R("ColorViewEditor",{ref:"$backColor",label:this.$i18n("pattern.info.popup.backColor"),key:"backColor",value:this.state.backColor,onchange:"changeRangeEditor"})}templateForBlendMode(){return`
      - ${W("BlendSelectEditor",{ref:"$blend",key:"blendMode",label:this.$i18n("pattern.info.popup.blend"),value:this.state.blendMode,onchange:"changeRangeEditor"})} + ${R("BlendSelectEditor",{ref:"$blend",key:"blendMode",label:this.$i18n("pattern.info.popup.blend"),value:this.state.blendMode,onchange:"changeRangeEditor"})}
      `}getBody(){return`
      - `}[ve("$picker")](){return` + `}[G("$picker")](){return`
      @@ -2645,17 +2601,17 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle ${this.templateForBlendMode()}
      - `}[U("showPatternInfoPopup")](e,t){this.state.changeEvent=e.changeEvent||"changePatternInfoPopup",this.state.instance=e.instance,this.setState(e.data),this.showByRect(t)}}var Hre="";class sU extends jt{getTitle(){return this.$i18n("pattern.property.title")}getClassName(){return"el--pattern-property"}getTitleClassName(){return"pattern"}getBody(){return"
      "}getTools(){return` + `}[M("showPatternInfoPopup")](e,t){this.state.changeEvent=e.changeEvent||"changePatternInfoPopup",this.state.instance=e.instance,this.setState(e.data),this.showByRect(t)}}var BF="";class ZR extends Ge{getTitle(){return this.$i18n("pattern.property.title")}getClassName(){return"el--pattern-property"}getTitleClassName(){return"pattern"}getBody(){return"
      "}getTools(){return`
      - - - - - - - -
      - `}[se("$tools button")](e){var t=e.$dt.data("pattern");this.children.$patternEditor.trigger("add",t)}[ve("$body")](){var e=this.$context.selection.current||{},t=e.pattern;return W("PatternEditor",{ref:"$patternEditor",value:t,"hide-label":!0,onchange:"changePatternEditor"})}[Me("changePatternEditor")](e,t){this.$commands.executeCommand("setAttribute","change pattern",this.$context.selection.packByValue({pattern:t}))}get editableProperty(){return"pattern"}[U(kt)+Qe("checkShow")](){this.refresh()}[U("refreshSVGArea")+Ft(1e3)](){this.load("$patternSelect")}}var Ure="";class aU extends ge{initState(){return{index:this.props.index,x:y.parse(this.props.x),y:y.parse(this.props.y),width:y.parse(this.props.width),height:y.parse(this.props.height),lineWidth:y.parse(this.props.lineWidth),lineHeight:y.parse(this.props.lineHeight),backColor:this.props.backColor,foreColor:this.props.foreColor,blendMode:this.props.blendMode,type:this.props.type}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[$e("$miniView")](){const{type:e,x:t,y:i,width:r,height:s,lineWidth:a,lineHeight:o,backColor:l,foreColor:c,blendMode:h}=this.state;let d={type:e,x:t,y:i,width:r,height:s,lineWidth:a,lineHeight:o,backColor:l,foreColor:c,blendMode:h};return this.state.width>80&&(d.width=80,d.x=d.x.value/this.state.width/80),this.state.height>80&&(d.height=80,d.y=this.state.y.value/this.state.height/80),{cssText:tn.parse(d).toCSS()}}template(){return` + + + + + + + +
      + `}[A("$tools button")](e){var t=e.$dt.data("pattern");this.children.$patternEditor.trigger("add",t)}[G("$body")](){var e=this.$context.selection.current||{},t=e.pattern;return R("PatternEditor",{ref:"$patternEditor",value:t,"hide-label":!0,onchange:"changePatternEditor"})}[Z("changePatternEditor")](e,t){this.$commands.executeCommand("setAttribute","change pattern",this.$context.selection.packByValue({pattern:t}))}get editableProperty(){return"pattern"}[M(Oe)+fe("checkShow")](){this.refresh()}[M("refreshSVGArea")+Ne(1e3)](){this.load("$patternSelect")}}var NF="";class qR extends Y{initState(){return{index:this.props.index,x:p.parse(this.props.x),y:p.parse(this.props.y),width:p.parse(this.props.width),height:p.parse(this.props.height),lineWidth:p.parse(this.props.lineWidth),lineHeight:p.parse(this.props.lineHeight),backColor:this.props.backColor,foreColor:this.props.foreColor,blendMode:this.props.blendMode,type:this.props.type}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ne("$miniView")](){const{type:e,x:t,y:r,width:i,height:a,lineWidth:n,lineHeight:o,backColor:l,foreColor:c,blendMode:h}=this.state;let u={type:e,x:t,y:r,width:i,height:a,lineWidth:n,lineHeight:o,backColor:l,foreColor:c,blendMode:h};return this.state.width>80&&(u.width=80,u.x=u.x.value/this.state.width/80),this.state.height>80&&(u.height=80,u.y=this.state.y.value/this.state.height/80),{cssText:br.parse(u).toCSS()}}template(){return`
      @@ -2663,121 +2619,121 @@ ${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyle
      - `}[se("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){const t=this.$config.get("editor.layout.elements").$bodyPanel.rect(),i=this.$el.rect(),r={left:t.left+t.width-240,top:i.top,width:240,height:300};this.emit("showPatternInfoPopup",{changeEvent:s=>{this.updateData(P({},s))},data:this.state,instance:this},r)}}function oU(n){n.registerElement({PatternEditor:rU,PatternSizeEditor:aU,PatternAssetsProperty:iU}),n.registerUI("inspector.tab.style",{PatternProperty:sU}),n.registerUI("popup",{PatternInfoPopup:nU})}var Wre="";const Ea=0;class lU extends jt{getTitle(){return this.$i18n("position.property.title")}afterRender(){this.show()}[U(kt)](){this.refreshShowIsNot(["project"])}checkChangedValue(){var e=this.$context.selection.current;return e?e.hasChangedField("x","y","right","bottom","width","height","angle","transform","opacity","resizingVertical","resizingHorizontal","constraints-horizontal","constriants-vertical"):!1}[U(Gi)+Qe("checkChangedValue")+oo(10)](){var e=this.$context.selection.current;if(!e)return"";this.children.$x.setValue(Bt(e.offsetX||Ea,100)),this.children.$y.setValue(Bt(e.offsetY||Ea,100)),this.children.$width.setValue(Bt(e.width||Ea,100)),this.children.$height.setValue(Bt(e.height||Ea,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(y.deg(e.angle).round(100))}isHideHeader(){return!0}getBodyClassName(){return"no-padding"}getBody(){return` -
      + `}[A("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){const t=this.$config.get("editor.layout.elements").$bodyPanel.rect(),r=this.$el.rect(),i={left:t.left+t.width-240,top:r.top,width:240,height:300};this.emit("showPatternInfoPopup",{changeEvent:a=>{this.updateData(b({},a))},data:this.state,instance:this},i)}}function QR(s){s.registerElement({PatternEditor:YR,PatternSizeEditor:qR,PatternAssetsProperty:sg}),s.registerUI("inspector.tab.style",{PatternProperty:ZR}),s.registerUI("popup",{PatternInfoPopup:KR})}var GF="";const hs=0;class JR extends Ge{getTitle(){return this.$i18n("position.property.title")}afterRender(){this.show()}[M(Oe)](){this.refreshShowIsNot(["project"])}checkChangedValue(){var e=this.$context.selection.current;return e?e.hasChangedField("x","y","right","bottom","width","height","angle","transform","opacity","resizingVertical","resizingHorizontal","constraints-horizontal","constriants-vertical"):!1}[M(Mt)+fe("checkChangedValue")+Ss(10)](){var e=this.$context.selection.current;if(!e)return"";this.children.$x.setValue(Ue(e.offsetX||hs,100)),this.children.$y.setValue(Ue(e.offsetY||hs,100)),this.children.$width.setValue(Ue(e.width||hs,100)),this.children.$height.setValue(Ue(e.height||hs,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(p.deg(e.angle).round(100))}isHideHeader(){return!0}getBodyClassName(){return"no-padding"}getBody(){return` +
      - ${W("NumberInputEditor",{ref:"$x",compact:!0,label:"X",key:"x",min:-1e5,max:1e5,trigger:"enter",onchange:"changRangeEditor"})} - ${W("NumberInputEditor",{ref:"$y",compact:!0,trigger:"enter",label:"Y",key:"y",min:-1e4,max:1e4,onchange:"changRangeEditor"})} + ${R("NumberInputEditor",{ref:"$x",compact:!0,label:"X",key:"x",min:-1e5,max:1e5,trigger:"enter",onchange:"changRangeEditor"})} + ${R("NumberInputEditor",{ref:"$y",compact:!0,trigger:"enter",label:"Y",key:"y",min:-1e4,max:1e4,onchange:"changRangeEditor"})}
      - ${W("NumberInputEditor",{ref:"$width",compact:!0,trigger:"enter",label:"W",key:"width",min:0,max:3e3,onchange:"changRangeEditor"})} - ${W("NumberInputEditor",{ref:"$height",compact:!0,trigger:"enter",label:"H",key:"height",min:0,max:3e3,onchange:"changRangeEditor"})} + ${R("NumberInputEditor",{ref:"$width",compact:!0,trigger:"enter",label:"W",key:"width",min:0,max:3e3,onchange:"changRangeEditor"})} + ${R("NumberInputEditor",{ref:"$height",compact:!0,trigger:"enter",label:"H",key:"height",min:0,max:3e3,onchange:"changRangeEditor"})}
      - ${W("InputRangeEditor",{ref:"$rotate",key:"rotateZ",compact:!0,label:"rotate_left",min:-360,max:360,step:1,units:["deg"],onchange:"changeRotate"})} - ${W("NumberInputEditor",{ref:"$opacity",key:"opacity",compact:!0,label:"opacity",min:0,max:1,step:.01,onchange:"changeSelect"})} + ${R("InputRangeEditor",{ref:"$rotate",key:"rotateZ",compact:!0,label:"rotate_left",min:-360,max:360,step:1,units:["deg"],onchange:"changeRotate"})} + ${R("NumberInputEditor",{ref:"$opacity",key:"opacity",compact:!0,label:"opacity",min:0,max:1,step:.01,onchange:"changeSelect"})}
      - `}refresh(){const e=this.$context.selection.current;e&&(this.children.$x.setValue(Bt(e.offsetX||Ea,100)),this.children.$y.setValue(Bt(e.offsetY||Ea,100)),this.children.$width.setValue(Bt(e.width||Ea,100)),this.children.$height.setValue(Bt(e.height||Ea,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(y.deg(e.angle)))}[se("$positionItem button[data-command]")](e){const t=e.$dt.data("command");console.log(t)}[Me("changRangeEditor")](e,t){this.$commands.executeCommand("setAttribute","change position or size",this.$context.selection.packByValue({[e]:t}))}[Me("changeRotate")](e,t){this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.packByValue({angle:t.value}))}[Me("changeSelect")](e,t){this.$commands.executeCommand("setAttribute",`change ${e}`,this.$context.selection.packByValue({[e]:t}))}}function cU(n){n.registerUI("inspector.tab.style",{PositionProperty:lU})}var Xre="";class hU extends jt{getTitle(){return this.$i18n("project.property.title")}getClassName(){return"full"}getTools(){return` - - `}[se("$add")](){this.$commands.emit("addProject")}getBody(){return` + `}refresh(){const e=this.$context.selection.current;e&&(this.children.$x.setValue(Ue(e.offsetX||hs,100)),this.children.$y.setValue(Ue(e.offsetY||hs,100)),this.children.$width.setValue(Ue(e.width||hs,100)),this.children.$height.setValue(Ue(e.height||hs,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(p.deg(e.angle)))}[A("$positionItem button[data-command]")](e){const t=e.$dt.data("command");console.log(t)}[Z("changRangeEditor")](e,t){this.$commands.executeCommand("setAttribute","change position or size",this.$context.selection.packByValue({[e]:t}))}[Z("changeRotate")](e,t){this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.packByValue({angle:t.value}))}[Z("changeSelect")](e,t){this.$commands.executeCommand("setAttribute",`change ${e}`,this.$context.selection.packByValue({[e]:t}))}}function ej(s){s.registerUI("inspector.tab.style",{PositionProperty:JR})}var HF="";class tj extends Ge{getTitle(){return this.$i18n("project.property.title")}getClassName(){return"full"}getTools(){return` + + `}[A("$add")](){this.$commands.emit("addProject")}getBody(){return`
      - `}[ve("$projectList")+It](){var t;var e=((t=this.$model)==null?void 0:t.projects)||[];return e.map(i=>{var r=i===this.$context.selection.currentProject.id?"selected":"";const s=this.$model.get(i);return` -
      + `}[G("$projectList")+Ee](){var t;var e=((t=this.$model)==null?void 0:t.projects)||[];return e.map(r=>{var i=r===this.$context.selection.currentProject.id?"selected":"";const a=this.$model.get(r);return` +
      - +
      - +
      - `})}[cl("$projectList .project-item")](e){this.startInputEditing(e.$dt.$("label"))}modifyDoneInputEditing(e){this.endInputEditing(e,(t,i)=>{var r=this.$editor.projects[t];r&&r.reset({name:i})})}[Cc("$projectList .project-item label")+ra+St+Bn](e){return this.modifyDoneInputEditing(e.$dt),!1}[na("$projectList .project-item label")+St+Bn](e){this.modifyDoneInputEditing(e.$dt)}[se("$projectList .project-item label")](e){var t=e.$dt.attr("data-id");this.commands.executeCommand("refreshSelectionPorject","change project",t),this.nextTick(()=>{this.refresh()})}[se("$projectList .project-item .remove")](e){var t=e.$dt.attr("data-id");this.$commands.executeCommand("removeProject","remove project",t),this.nextTick(()=>{this.refresh()})}[U("refreshProjectList","refreshAll")](){this.refresh()}}function zb(n){n.registerElement({ProjectProperty:hU})}class dU{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("json","rect")}getRendererInstance(e){return this.editor.getRendererInstance("json",e.itemType)||this.getDefaultRendererInstance()||e}async render(e,t){if(!e)return;const i=this.getRendererInstance(e);if(i)return await i.render(e,t||this)}async renderAll(e,t){return await Promise.all(e.map(async i=>await this.render(i,t)))}async getResourceDataURI(){}}class Vb{async render(e,t){return await this.toCloneObject(e,t)}async toCloneObject(e,t){var i=e.attrs("itemType","name","elementType","type","visible","lock","selected");e.parent&&e.parent.isNot("project")&&(i.parentId=e.parentId),i.referenceId=e.id,i.newTargetId=ho();let r=[];for(var s=0,a=e.layers.length;si.clone()),svg:e.svg.map(i=>i.clone())})}}class gU extends Db{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("name"))}}class Ia extends Db{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("tagName"))}}class Co extends Ia{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("overflow","stroke","stroke-width","svgfilter","fill","fill-rule","fill-opacity","stroke-linecap","stroke-linejoin","stroke-dashoffset","stroke-dasharray","text-anchor"))}}class mU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("d","booleanOperation"))}}class vU extends Ia{}class yU extends Ia{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("src"))}}class bU extends Ia{async toCloneObject(e,t){const s=e.project.imageKeys[e.src].original;return Ve(P({},await super.toCloneObject(e,t)),{src:s})}}class xU extends Vb{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("colors","gradients","svgfilters","svgimages","images","keyframes"))}}class _U extends xU{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("timeline"))}}class SU extends _U{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("name","description","rootVariable"))}}class wU extends Ia{}class MU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("points","boundary"))}}class $U extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("d"))}}class PU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("count"))}}class TU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("count","radius"))}}class CU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("totalLength","d","text","textLength","lengthAdjust","startOffset"))}}class EU extends Co{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("totalLength","text","textLength","lengthAdjust","shape-inside"))}}class IU extends Ia{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("engine","template","params"))}}class LU extends Ia{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("content"))}}class kU extends Ia{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("src"))}}function Fb(n){n.registerRendererType("json",new dU(n)),n.registerRenderer("json","project",new SU),n.registerRenderer("json","artboard",new gU),n.registerRenderer("json","rect",new wU),n.registerRenderer("json","circle",new vU),n.registerRenderer("json","image",new bU),n.registerRenderer("json","template",new IU),n.registerRenderer("json","iframe",new yU),n.registerRenderer("json","text",new LU),n.registerRenderer("json","video",new kU),n.registerRenderer("json","svg-path",new $U),n.registerRenderer("json","boolean-path",new mU),n.registerRenderer("json","polygon",new PU),n.registerRenderer("json","star",new TU),n.registerRenderer("json","spline",new MU),n.registerRenderer("json","svg-text",new EU),n.registerRenderer("json","svg-textpath",new CU)}class AU extends wa{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"sample",name:"New Sample Layer",sampleText:"Sample Text 1",sampleNumber:1},e))}get sampleText(){return this.get("sampleText")}set sampleText(e){this.set("sampleText",e)}get sampleNumber(){return this.get("sampleNumber")}set sampleNumber(e){this.set("sampleNumber",e)}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("sampleText","sampleNumber"))}editable(e){switch(e){case"sample":return!0}return super.editable(e)}getDefaultTitle(){return"Sample Layer"}}class RU{constructor(e){this.renderer=e}setRenderer(e){this.renderer=e}getInnerId(e,t=""){return e.id+t}uniqueId(e){return this.renderer.id+"-"+e.id}}const OU="SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","),zU={xChannelSelector:!0,yChannelSelector:!0};class Ii extends Vr{static parse(e){var t=Nb[e.type];return new t(e)}hasLight(){return!1}isLight(){return!1}isSource(){return!1}getDefaultObject(e={}){var t=Zr();return super.getDefaultObject(P({itemType:"svgfilter",id:t,in:[],bound:{x:100,y:100,targetX:0,targetY:0},connected:[]},e))}getInCount(){return 0}setIn(e,t){this.json.in[e]={id:t.id,type:t.type}}setConnected(e){var t=this.json.connected.filter(i=>i.id===e.id);t.length===0&&this.json.connected.push({id:e.id})}convert(e){return typeof e.in=="string"&&(e.in=JSON.parse(e.in)),typeof e.bound=="string"&&(e.bound=JSON.parse(e.bound)),typeof e.connected=="string"&&(e.connected=JSON.parse(e.connected)),e}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("id","in","bound","connected"))}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),Object.keys(zU).filter(t=>!!this.json[t]).forEach(t=>{e.push(`${t}="${this.json[t]}"`)}),e.join(" ")+" "+this.getSourceInAttribute()}hasInIndex(){return!1}getSourceInAttribute(e){return(e||this.json.in).map((t,i)=>{if(!t)return"";var r=i===0?"":i+1+"";return this.hasInIndex()||(r=""),OU.includes(t.type)?`in${r}="${t.type}"`:`in${r}="${t.id}result"`}).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}class Pl extends Ii{getDefaultObject(e={}){return super.getDefaultObject(P({type:"Source"},e))}isSource(){return!0}toString(){return""}}class VU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"BackgroundAlpha"})}}class DU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"BackgroundImage"})}}class Ch extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Blend",mode:Ch.spec.mode.defaultValue})}getInCount(){return 2}toString(){var{mode:e}=this.json;return``}hasInIndex(){return!0}}Ch.spec={mode:{title:"mode",inputType:"blend",defaultValue:"normal"}};class Eh extends Ii{getDefaultObject(){return super.getDefaultObject({type:"ColorMatrix",values:Eh.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json,t=e.join(" ");return``}}Eh.spec={values:{title:"values",inputType:"color-matrix",column:5,defaultValue:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}};class La extends Ii{getDefaultObject(){return super.getDefaultObject({type:"ComponentTransfer",r:La.spec.r.defaultValue,g:La.spec.g.defaultValue,b:La.spec.b.defaultValue,a:La.spec.a.defaultValue})}getInCount(){return 1}parse(e){var[t,...i]=e.split(" ");if(t==="table"||t==="discrete")return{type:t,tableValues:i.join(" ")};if(t==="linear"){var[r,s]=i;return{type:t,slop:r,intercept:s}}else if(t==="gamma"){var[a,o,l]=i;return{type:t,amplitude:a,exponent:o,offset:l}}return{type:t}}toString(){var{r:e,g:t,b:i,a:r}=this.json;return e=this.parse(e),t=this.parse(t),i=this.parse(i),r=this.parse(r),` - ${e&&``} - ${t&&``} - ${i&&``} - ${r&&``} - `}}La.spec={r:{title:"R",inputType:"FuncFilter",defaultValue:"identity"},g:{title:"G",inputType:"FuncFilter",defaultValue:"identity"},b:{title:"B",inputType:"FuncFilter",defaultValue:"identity"},a:{title:"A",inputType:"FuncFilter",defaultValue:"identity"}};class Os extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Composite",operator:Os.spec.operator.defaultValue,k1:Os.spec.k1.defaultValue,k2:Os.spec.k2.defaultValue,k3:Os.spec.k3.defaultValue,k4:Os.spec.k4.defaultValue})}getInCount(){return 2}toString(){var{operator:e,k1:t,k2:i,k3:r,k4:s}=this.json,a="";return e==="arithmetic"&&(a=` k1="${t}" k2="${i}" k3="${r}" k4="${s}" `),``}hasInIndex(){return!0}}Os.spec={operator:{title:"operator",inputType:"select",options:"over,in,out,atop,xor,arithmetic",defaultValue:"over"},k1:{title:"k1",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k2:{title:"k2",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k3:{title:"k3",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k4:{title:"k4",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)}};class Ih extends Ii{getDefaultObject(){return super.getDefaultObject({type:"ConvolveMatrix",kernelMatrix:Ih.spec.kernelMatrix.defaultValue})}getInCount(){return 1}toString(){var{kernelMatrix:e}=this.json,t=e.join(" ");return``}}Ih.spec={kernelMatrix:{title:"kernelMatrix",inputType:"input-array",column:3,defaultValue:[1,0,0,0,1,0,0,0,1]}};class Eo extends Ii{getDefaultObject(){return super.getDefaultObject({type:"DiffuseLighting",surfaceScale:Eo.spec.surfaceScale.defaultValue,lightingColor:Eo.spec.lightingColor.defaultValue,diffuseConstant:Eo.spec.diffuseConstant.defaultValue,lightInfo:""})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","diffuseConstant","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,diffuseConstant:t,lightingColor:i}=this.json;return` + `})}[ia("$projectList .project-item")](e){this.startInputEditing(e.$dt.$("label"))}modifyDoneInputEditing(e){this.endInputEditing(e,(t,r)=>{var i=this.$editor.projects[t];i&&i.reset({name:r})})}[Ra("$projectList .project-item label")+Di+Ve+Wr](e){return this.modifyDoneInputEditing(e.$dt),!1}[Fi("$projectList .project-item label")+Ve+Wr](e){this.modifyDoneInputEditing(e.$dt)}[A("$projectList .project-item label")](e){var t=e.$dt.attr("data-id");this.commands.executeCommand("refreshSelectionPorject","change project",t),this.nextTick(()=>{this.refresh()})}[A("$projectList .project-item .remove")](e){var t=e.$dt.attr("data-id");this.$commands.executeCommand("removeProject","remove project",t),this.nextTick(()=>{this.refresh()})}[M("refreshProjectList","refreshAll")](){this.refresh()}}function rj(s){s.registerElement({ProjectProperty:tj})}class ij{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("json","rect")}getRendererInstance(e){return this.editor.getRendererInstance("json",e.itemType)||this.getDefaultRendererInstance()||e}async render(e,t){if(!e)return;const r=this.getRendererInstance(e);if(r)return await r.render(e,t||this)}async renderAll(e,t){return await Promise.all(e.map(async r=>await this.render(r,t)))}async getResourceDataURI(){}}class cg{async render(e,t){return await this.toCloneObject(e,t)}async toCloneObject(e,t){var r=e.attrs("itemType","name","elementType","type","visible","lock","selected");e.parent&&e.parent.isNot("project")&&(r.parentId=e.parentId),r.referenceId=e.id,r.newTargetId=ws();let i=[];for(var a=0,n=e.layers.length;ar.clone()),svg:e.svg.map(r=>r.clone())})}}class oj extends hg{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("name"))}}class ds extends hg{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("tagName"))}}class Hs extends ds{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("overflow","stroke","stroke-width","svgfilter","fill","fill-rule","fill-opacity","stroke-linecap","stroke-linejoin","stroke-dashoffset","stroke-dasharray","text-anchor"))}}class lj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("d","booleanOperation"))}}class cj extends ds{}class hj extends ds{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("src"))}}class dj extends ds{async toCloneObject(e,t){const a=e.project.imageKeys[e.src].original;return se(b({},await super.toCloneObject(e,t)),{src:a})}}class uj extends cg{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("colors","gradients","svgfilters","svgimages","images","keyframes"))}}class pj extends uj{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("timeline"))}}class gj extends pj{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("name","description","rootVariable"))}}class fj extends ds{}class mj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("points","boundary"))}}class vj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("d"))}}class yj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("count"))}}class bj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("count","radius"))}}class xj extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("totalLength","d","text","textLength","lengthAdjust","startOffset"))}}class $j extends Hs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("totalLength","text","textLength","lengthAdjust","shape-inside"))}}class _j extends ds{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("engine","template","params"))}}class Sj extends ds{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("content"))}}class Pj extends ds{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("src"))}}function wj(s){s.registerRendererType("json",new ij(s)),s.registerRenderer("json","project",new gj),s.registerRenderer("json","artboard",new oj),s.registerRenderer("json","rect",new fj),s.registerRenderer("json","circle",new cj),s.registerRenderer("json","image",new dj),s.registerRenderer("json","template",new _j),s.registerRenderer("json","iframe",new hj),s.registerRenderer("json","text",new Sj),s.registerRenderer("json","video",new Pj),s.registerRenderer("json","svg-path",new vj),s.registerRenderer("json","boolean-path",new lj),s.registerRenderer("json","polygon",new yj),s.registerRenderer("json","star",new bj),s.registerRenderer("json","spline",new mj),s.registerRenderer("json","svg-text",new $j),s.registerRenderer("json","svg-textpath",new xj)}class Cj extends ss{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"sample",name:"New Sample Layer",sampleText:"Sample Text 1",sampleNumber:1},e))}get sampleText(){return this.get("sampleText")}set sampleText(e){this.set("sampleText",e)}get sampleNumber(){return this.get("sampleNumber")}set sampleNumber(e){this.set("sampleNumber",e)}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("sampleText","sampleNumber"))}editable(e){switch(e){case"sample":return!0}return super.editable(e)}getDefaultTitle(){return"Sample Layer"}}class Tj{constructor(e){this.renderer=e}setRenderer(e){this.renderer=e}getInnerId(e,t=""){return e.id+t}uniqueId(e){return this.renderer.id+"-"+e.id}}const kj="SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","),Mj={xChannelSelector:!0,yChannelSelector:!0};class $t extends or{static parse(e){var t=dg[e.type];return new t(e)}hasLight(){return!1}isLight(){return!1}isSource(){return!1}getDefaultObject(e={}){var t=fr();return super.getDefaultObject(b({itemType:"svgfilter",id:t,in:[],bound:{x:100,y:100,targetX:0,targetY:0},connected:[]},e))}getInCount(){return 0}setIn(e,t){this.json.in[e]={id:t.id,type:t.type}}setConnected(e){var t=this.json.connected.filter(r=>r.id===e.id);t.length===0&&this.json.connected.push({id:e.id})}convert(e){return typeof e.in=="string"&&(e.in=JSON.parse(e.in)),typeof e.bound=="string"&&(e.bound=JSON.parse(e.bound)),typeof e.connected=="string"&&(e.connected=JSON.parse(e.connected)),e}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("id","in","bound","connected"))}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),Object.keys(Mj).filter(t=>!!this.json[t]).forEach(t=>{e.push(`${t}="${this.json[t]}"`)}),e.join(" ")+" "+this.getSourceInAttribute()}hasInIndex(){return!1}getSourceInAttribute(e){return(e||this.json.in).map((t,r)=>{if(!t)return"";var i=r===0?"":r+1+"";return this.hasInIndex()||(i=""),kj.includes(t.type)?`in${i}="${t.type}"`:`in${i}="${t.id}result"`}).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}class va extends $t{getDefaultObject(e={}){return super.getDefaultObject(b({type:"Source"},e))}isSource(){return!0}toString(){return""}}class Ij extends va{getDefaultObject(){return super.getDefaultObject({type:"BackgroundAlpha"})}}class Ej extends va{getDefaultObject(){return super.getDefaultObject({type:"BackgroundImage"})}}class kn extends $t{getDefaultObject(){return super.getDefaultObject({type:"Blend",mode:kn.spec.mode.defaultValue})}getInCount(){return 2}toString(){var{mode:e}=this.json;return``}hasInIndex(){return!0}}kn.spec={mode:{title:"mode",inputType:"blend",defaultValue:"normal"}};class Mn extends $t{getDefaultObject(){return super.getDefaultObject({type:"ColorMatrix",values:Mn.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json,t=e.join(" ");return``}}Mn.spec={values:{title:"values",inputType:"color-matrix",column:5,defaultValue:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}};class us extends $t{getDefaultObject(){return super.getDefaultObject({type:"ComponentTransfer",r:us.spec.r.defaultValue,g:us.spec.g.defaultValue,b:us.spec.b.defaultValue,a:us.spec.a.defaultValue})}getInCount(){return 1}parse(e){var[t,...r]=e.split(" ");if(t==="table"||t==="discrete")return{type:t,tableValues:r.join(" ")};if(t==="linear"){var[i,a]=r;return{type:t,slop:i,intercept:a}}else if(t==="gamma"){var[n,o,l]=r;return{type:t,amplitude:n,exponent:o,offset:l}}return{type:t}}toString(){var{r:e,g:t,b:r,a:i}=this.json;return e=this.parse(e),t=this.parse(t),r=this.parse(r),i=this.parse(i),` + ${e&&``} + ${t&&``} + ${r&&``} + ${i&&``} + `}}us.spec={r:{title:"R",inputType:"FuncFilter",defaultValue:"identity"},g:{title:"G",inputType:"FuncFilter",defaultValue:"identity"},b:{title:"B",inputType:"FuncFilter",defaultValue:"identity"},a:{title:"A",inputType:"FuncFilter",defaultValue:"identity"}};class Ci extends $t{getDefaultObject(){return super.getDefaultObject({type:"Composite",operator:Ci.spec.operator.defaultValue,k1:Ci.spec.k1.defaultValue,k2:Ci.spec.k2.defaultValue,k3:Ci.spec.k3.defaultValue,k4:Ci.spec.k4.defaultValue})}getInCount(){return 2}toString(){var{operator:e,k1:t,k2:r,k3:i,k4:a}=this.json,n="";return e==="arithmetic"&&(n=` k1="${t}" k2="${r}" k3="${i}" k4="${a}" `),``}hasInIndex(){return!0}}Ci.spec={operator:{title:"operator",inputType:"select",options:"over,in,out,atop,xor,arithmetic",defaultValue:"over"},k1:{title:"k1",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k2:{title:"k2",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k3:{title:"k3",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k4:{title:"k4",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)}};class In extends $t{getDefaultObject(){return super.getDefaultObject({type:"ConvolveMatrix",kernelMatrix:In.spec.kernelMatrix.defaultValue})}getInCount(){return 1}toString(){var{kernelMatrix:e}=this.json,t=e.join(" ");return``}}In.spec={kernelMatrix:{title:"kernelMatrix",inputType:"input-array",column:3,defaultValue:[1,0,0,0,1,0,0,0,1]}};class Us extends $t{getDefaultObject(){return super.getDefaultObject({type:"DiffuseLighting",surfaceScale:Us.spec.surfaceScale.defaultValue,lightingColor:Us.spec.lightingColor.defaultValue,diffuseConstant:Us.spec.diffuseConstant.defaultValue,lightInfo:""})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","diffuseConstant","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,diffuseConstant:t,lightingColor:r}=this.json;return` ${this.json.lightInfo} - `}}Eo.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},diffuseConstant:{title:"diffuseConstant",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Lh extends Ii{getDefaultObject(){return super.getDefaultObject({type:"DisplacementMap",scale:Lh.spec.scale.defaultValue})}getInCount(){return 2}convert(e){return e.scale=y.parse(e.scale),e}toString(){var{scale:e}=this.json,t=e.value?`scale="${e}"`:"";return``}hasInIndex(){return!0}}Lh.spec={scale:{title:"scale",inputType:"number-range",min:0,max:5e3,step:1,defaultValue:y.number(0)}};class Tl extends Ii{getDefaultObject(){return super.getDefaultObject({type:"DistantLight",azimuth:Tl.spec.azimuth.defaultValue,elevation:Tl.spec.elevation.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{azimuth:e,elevation:t}=this.json;return``}}Tl.spec={azimuth:{title:"azimuth",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},elevation:{title:"elevation",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class zs extends Ii{getDefaultObject(){return super.getDefaultObject({type:"DropShadow",dx:zs.spec.dx.defaultValue,dy:zs.spec.dy.defaultValue,stdDeviation:zs.spec.stdDeviation.defaultValue,color:zs.spec.color.defaultValue,opacity:zs.spec.opacity.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t,stdDeviation:i,color:r,opacity:s}=this.json;return``}}zs.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},stdDeviation:{title:"stdDeviation",inputType:"number-range",min:0,max:1e3,step:.1,defaultValue:y.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(1)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class FU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"FillPaint"})}}class fs extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Flood",x:fs.spec.x.defaultValue,y:fs.spec.y.defaultValue,width:fs.spec.width.defaultValue,height:fs.spec.height.defaultValue,color:fs.spec.color.defaultValue,opacity:fs.spec.opacity.defaultValue})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{opacity:e,color:t,x:i,y:r,width:s,height:a}=this.json;return``}}fs.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Io extends Ii{getDefaultObject(){return super.getDefaultObject({type:"GaussianBlur",stdDeviationX:Io.spec.stdDeviationX.defaultValue,stdDeviationY:Io.spec.stdDeviationY.defaultValue,edgeMode:Io.spec.edgeMode.defaultValue})}getInCount(){return 1}convert(e){return e.stdDeviationX=y.parse(e.stdDeviationX),e.stdDeviationY=y.parse(e.stdDeviationY),e}toString(){var{stdDeviationX:e,stdDeviationY:t,edgeMode:i}=this.json,r=`${e} ${t}`;return e===t&&(r=e),``}}Io.spec={stdDeviationX:{title:"X",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)},stdDeviationY:{title:"Y",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)},edgeMode:{title:"edge",inputType:"select",options:"none,duplicate,wrap",defaultValue:"none"}};class kh extends Ii{getDefaultObject(){return super.getDefaultObject({type:"HueRotate",values:kh.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}kh.spec={values:{title:"values",inputType:"number-range",min:0,max:360,step:.1,defaultValue:y.number(0)}};class Zn extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Image",x:Zn.spec.x.defaultValue,y:Zn.spec.y.defaultValue,width:Zn.spec.width.defaultValue,height:Zn.spec.height.defaultValue,src:Zn.spec.src.defaultValue,alignment:Zn.spec.alignment.defaultValue,scaleing:Zn.spec.scaleing.defaultValue})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{src:e,x:t,y:i,width:r,height:s,alignment:a,scaleing:o}=this.json;return``}}Zn.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},alignment:{title:"alignment",inputType:"select",options:"xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax",defaultValue:"xMidYMid"},scaleing:{title:"scaleing",inputType:"select",options:"meet,slice",defaultValue:"meet"},src:{title:"Image",inputType:"ImageSelectEditor",defaultValue:""}};class im extends Ii{getDefaultObject(){return super.getDefaultObject({type:"LuminanceAlpha"})}getInCount(){return 1}toString(){return``}}im.spec={};class rm extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Merge"})}getInCount(){return 3}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),e.join(" ")}toString(){var{in:e}=this.json;return` + `}}Us.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},diffuseConstant:{title:"diffuseConstant",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class En extends $t{getDefaultObject(){return super.getDefaultObject({type:"DisplacementMap",scale:En.spec.scale.defaultValue})}getInCount(){return 2}convert(e){return e.scale=p.parse(e.scale),e}toString(){var{scale:e}=this.json,t=e.value?`scale="${e}"`:"";return``}hasInIndex(){return!0}}En.spec={scale:{title:"scale",inputType:"number-range",min:0,max:5e3,step:1,defaultValue:p.number(0)}};class ya extends $t{getDefaultObject(){return super.getDefaultObject({type:"DistantLight",azimuth:ya.spec.azimuth.defaultValue,elevation:ya.spec.elevation.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{azimuth:e,elevation:t}=this.json;return``}}ya.spec={azimuth:{title:"azimuth",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},elevation:{title:"elevation",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class Ti extends $t{getDefaultObject(){return super.getDefaultObject({type:"DropShadow",dx:Ti.spec.dx.defaultValue,dy:Ti.spec.dy.defaultValue,stdDeviation:Ti.spec.stdDeviation.defaultValue,color:Ti.spec.color.defaultValue,opacity:Ti.spec.opacity.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t,stdDeviation:r,color:i,opacity:a}=this.json;return``}}Ti.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},stdDeviation:{title:"stdDeviation",inputType:"number-range",min:0,max:1e3,step:.1,defaultValue:p.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(1)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Lj extends va{getDefaultObject(){return super.getDefaultObject({type:"FillPaint"})}}class hi extends $t{getDefaultObject(){return super.getDefaultObject({type:"Flood",x:hi.spec.x.defaultValue,y:hi.spec.y.defaultValue,width:hi.spec.width.defaultValue,height:hi.spec.height.defaultValue,color:hi.spec.color.defaultValue,opacity:hi.spec.opacity.defaultValue})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{opacity:e,color:t,x:r,y:i,width:a,height:n}=this.json;return``}}hi.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Ws extends $t{getDefaultObject(){return super.getDefaultObject({type:"GaussianBlur",stdDeviationX:Ws.spec.stdDeviationX.defaultValue,stdDeviationY:Ws.spec.stdDeviationY.defaultValue,edgeMode:Ws.spec.edgeMode.defaultValue})}getInCount(){return 1}convert(e){return e.stdDeviationX=p.parse(e.stdDeviationX),e.stdDeviationY=p.parse(e.stdDeviationY),e}toString(){var{stdDeviationX:e,stdDeviationY:t,edgeMode:r}=this.json,i=`${e} ${t}`;return e===t&&(i=e),``}}Ws.spec={stdDeviationX:{title:"X",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)},stdDeviationY:{title:"Y",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)},edgeMode:{title:"edge",inputType:"select",options:"none,duplicate,wrap",defaultValue:"none"}};class Ln extends $t{getDefaultObject(){return super.getDefaultObject({type:"HueRotate",values:Ln.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}Ln.spec={values:{title:"values",inputType:"number-range",min:0,max:360,step:.1,defaultValue:p.number(0)}};class ii extends $t{getDefaultObject(){return super.getDefaultObject({type:"Image",x:ii.spec.x.defaultValue,y:ii.spec.y.defaultValue,width:ii.spec.width.defaultValue,height:ii.spec.height.defaultValue,src:ii.spec.src.defaultValue,alignment:ii.spec.alignment.defaultValue,scaleing:ii.spec.scaleing.defaultValue})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{src:e,x:t,y:r,width:i,height:a,alignment:n,scaleing:o}=this.json;return``}}ii.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},alignment:{title:"alignment",inputType:"select",options:"xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax",defaultValue:"xMidYMid"},scaleing:{title:"scaleing",inputType:"select",options:"meet,slice",defaultValue:"meet"},src:{title:"Image",inputType:"ImageSelectEditor",defaultValue:""}};class ch extends $t{getDefaultObject(){return super.getDefaultObject({type:"LuminanceAlpha"})}getInCount(){return 1}toString(){return``}}ch.spec={};class hh extends $t{getDefaultObject(){return super.getDefaultObject({type:"Merge"})}getInCount(){return 3}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),e.join(" ")}toString(){var{in:e}=this.json;return` ${e.map(t=>``).join("")} - `}}rm.spec={};class Cl extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Morphology",operator:Cl.spec.operator.defaultValue,radius:Cl.spec.radius.defaultValue})}getInCount(){return 1}toString(){var{operator:e,radius:t}=this.json;return``}}Cl.spec={operator:{title:"Operator",inputType:"select",options:"erode,dilate",defaultValue:"erode"},radius:{title:"Radius",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)}};class El extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Offset",dx:El.spec.dx.defaultValue,dy:El.spec.dy.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t}=this.json;return``}}El.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class Lo extends Ii{getDefaultObject(){return super.getDefaultObject({type:"PointLight",x:Lo.spec.x.defaultValue,y:Lo.spec.y.defaultValue,z:Lo.spec.z.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{x:e,y:t,z:i}=this.json;return``}}Lo.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class Ah extends Ii{getDefaultObject(){return super.getDefaultObject({type:"RotaMatrix",hueRotate:Ah.spec.hueRotate.defaultValue})}convert(e){return e.hueRotate=y.parse(e.hueRotate),e}toString(){var{id:e,hueRotate:t}=this.json;return` + `}}hh.spec={};class ba extends $t{getDefaultObject(){return super.getDefaultObject({type:"Morphology",operator:ba.spec.operator.defaultValue,radius:ba.spec.radius.defaultValue})}getInCount(){return 1}toString(){var{operator:e,radius:t}=this.json;return``}}ba.spec={operator:{title:"Operator",inputType:"select",options:"erode,dilate",defaultValue:"erode"},radius:{title:"Radius",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)}};class xa extends $t{getDefaultObject(){return super.getDefaultObject({type:"Offset",dx:xa.spec.dx.defaultValue,dy:xa.spec.dy.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t}=this.json;return``}}xa.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class Xs extends $t{getDefaultObject(){return super.getDefaultObject({type:"PointLight",x:Xs.spec.x.defaultValue,y:Xs.spec.y.defaultValue,z:Xs.spec.z.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{x:e,y:t,z:r}=this.json;return``}}Xs.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class Vn extends $t{getDefaultObject(){return super.getDefaultObject({type:"RotaMatrix",hueRotate:Vn.spec.hueRotate.defaultValue})}convert(e){return e.hueRotate=p.parse(e.hueRotate),e}toString(){var{id:e,hueRotate:t}=this.json;return` - `}}Ah.spec={hueRotate:{title:"hue-rotate",inputType:"number-range",min:0,max:360,step:1,defaultValue:y.number(0)}};class Rh extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Saturate",values:Rh.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}Rh.spec={values:{title:"values",inputType:"number-range",min:-1,max:1,step:.01,defaultValue:y.number(0)}};class NU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"SourceAlpha"})}}class BU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"SourceGraphic"})}}class ka extends Ii{getDefaultObject(){return super.getDefaultObject({type:"SpecularLighting",surfaceScale:ka.spec.surfaceScale.defaultValue,lightingColor:ka.spec.lightingColor.defaultValue,specularConstant:ka.spec.specularConstant.defaultValue,specularExponent:ka.spec.specularExponent.defaultValue,lightInfo:""})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","specularConstant","specularExponent","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,specularConstant:t,specularExponent:i,lightingColor:r}=this.json;return` + `}}Vn.spec={hueRotate:{title:"hue-rotate",inputType:"number-range",min:0,max:360,step:1,defaultValue:p.number(0)}};class On extends $t{getDefaultObject(){return super.getDefaultObject({type:"Saturate",values:On.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}On.spec={values:{title:"values",inputType:"number-range",min:-1,max:1,step:.01,defaultValue:p.number(0)}};class Vj extends va{getDefaultObject(){return super.getDefaultObject({type:"SourceAlpha"})}}class Oj extends va{getDefaultObject(){return super.getDefaultObject({type:"SourceGraphic"})}}class ps extends $t{getDefaultObject(){return super.getDefaultObject({type:"SpecularLighting",surfaceScale:ps.spec.surfaceScale.defaultValue,lightingColor:ps.spec.lightingColor.defaultValue,specularConstant:ps.spec.specularConstant.defaultValue,specularExponent:ps.spec.specularExponent.defaultValue,lightInfo:""})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","specularConstant","specularExponent","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,specularConstant:t,specularExponent:r,lightingColor:i}=this.json;return` ${this.json.lightInfo} - `}getSourceInAttribute(){return""}}ka.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},specularConstant:{title:"Constant",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},specularExponent:{title:"Exponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class In extends Ii{getDefaultObject(){return super.getDefaultObject({type:"SpotLight",x:In.spec.x.defaultValue,y:In.spec.x.defaultValue,z:In.spec.x.defaultValue,pointsAtX:In.spec.pointsAtX.defaultValue,pointsAtY:In.spec.pointsAtY.defaultValue,pointsAtZ:In.spec.pointsAtZ.defaultValue,specularExponent:In.spec.specularExponent.defaultValue,limitingConeAngle:In.spec.limitingConeAngle.defaultValue})}isLight(){return!0}toString(){}toLightString(){var{x:e,y:t,z:i,pointsAtX:r,pointsAtY:s,pointsAtZ:a,specularExponent:o,limitingConeAngle:l}=this.json;return``}}In.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtX:{title:"pointsAtX",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtY:{title:"pointsAtY",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtZ:{title:"pointsAtZ",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},specularExponent:{title:"specularExponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},limitingConeAngle:{title:"limitingConeAngle",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)}};class jU extends Pl{getDefaultObject(){return super.getDefaultObject({type:"StrokePaint"})}}class Aa extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Tile",x:Aa.spec.x.defaultValue,y:Aa.spec.y.defaultValue,width:Aa.spec.width.defaultValue,height:Aa.spec.height.defaultValue})}getInCount(){return 1}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{x:e,y:t,width:i,height:r}=this.json;return``}}Aa.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class Ra extends Ii{getDefaultObject(){return super.getDefaultObject({type:"Turbulence",filterType:Ra.spec.filterType.defaultValue,baseFrequency:Ra.spec.baseFrequency.defaultValue,numOctaves:Ra.spec.numOctaves.defaultValue,seed:Ra.spec.seed.defaultValue})}convert(e){return e.baseFrequency=y.parse(e.baseFrequency),e.numOctaves=y.parse(e.numOctaves),e.seed=y.parse(e.seed),e}toString(){var{filterType:e,baseFrequency:t,numOctaves:i,seed:r}=this.json;return``}}Ra.spec={filterType:{title:"Type",inputType:"select",options:"fractalNoise,turbulence",defaultValue:"turbulence"},baseFrequency:{title:"Frequency",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},numOctaves:{title:"Octaves",inputType:"number-range",min:1,max:10,step:1,defaultValue:y.number(1)},seed:{title:"Seed",inputType:"number-range",min:0,max:1e4,step:1,defaultValue:y.number(0)}};const GU=["result"];class Oh extends Vr{static parse(e){var t=Nb[e.type];return new t(e)}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svgfilter",result:""},e))}getDefaultAttribute(){return GU.map(e=>`${e}="${this.json[e]}"`).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}const Nb={Image:Zn,Tile:Aa,Saturate:Rh,HueRotate:kh,LuminanceAlpha:im,DropShadow:zs,SourceGraphic:BU,SourceAlpha:NU,BackgroundImage:DU,BackgroundAlpha:VU,FillPaint:FU,StrokePaint:jU,ComponentTransfer:La,DistantLight:Tl,PointLight:Lo,SpotLight:In,DiffuseLighting:Eo,SpecularLighting:ka,Blend:Ch,Offset:El,RotaMatrix:Ah,GaussianBlur:Io,Flood:fs,Merge:rm,Composite:Os,Morphology:Cl,Turbulence:Ra,DisplacementMap:Lh,ColorMatrix:Eh,ConvolveMatrix:Ih},HU={Image:Zn.spec,Tile:Aa.spec,DropShadow:zs.spec,Saturate:Rh.spec,HueRotate:kh.spec,LuminanceAlpha:im.spec,Offset:El.spec,ComponentTransfer:La.spec,SpecularLighting:ka.spec,SpotLight:In.spec,PointLight:Lo.spec,DistantLight:Tl.spec,DiffuseLighting:Eo.spec,Blend:Ch.spec,RotaMatrix:Ah.spec,Merge:rm.spec,GaussianBlur:Io.spec,Flood:fs.spec,Morphology:Cl.spec,Composite:Os.spec,Turbulence:Ra.spec,DisplacementMap:Lh.spec,ColorMatrix:Eh.spec,ConvolveMatrix:Ih.spec},UU=["text-fill-color","text-stroke-color","text-stroke-width","background-clip"];function WU(n){const e={};return Object.keys(n).forEach(t=>{$t(n[t])&&(e[t]=n[t])}),e}const XU={};class Cu extends RU{toStringPropertyCSS(e,t){return hn(e.get(t))}toBackgroundImageCSS(e){const t=e.cacheBackgroundImage;return t||e.setBackgroundImageCache(),t||XU}toLayoutCSS(e){if(e.hasLayout()){if(e.isLayout(At.FLEX))return this.toFlexLayoutCSS(e);if(e.isLayout(At.GRID))return this.toGridLayoutCSS(e)}return{}}toLayoutItemCSS(e){var r,s;var t=(r=e.parent)==null?void 0:r.layout,i={};if(t===At.FLEX?i={position:"relative",left:"auto !important",top:"auto !important"}:t===At.GRID?i={position:"relative",left:"auto",top:"auto"}:t===At.DEFAULT&&(i=this.toDefaultLayoutItemCSS(e)),t===At.FLEX){i=Ve(P({},i),{"flex-basis":e.flexBasis,"flex-shrink":e.flexShrink});const a=(s=e==null?void 0:e.parent)==null?void 0:s.flexDirection;a===br.ROW&&e.resizingHorizontal===wt.FILL_CONTAINER?(i.width="auto",i["flex-grow"]=e.flexGrow||1):a===br.COLUMN&&e.resizingVertical===wt.FILL_CONTAINER&&(i.height="auto",i["flex-grow"]=e.flexGrow||1)}else if(t===At.GRID){i=Ve(P({},i),{"grid-column-start":e.gridColumnStart,"grid-column-end":e.gridColumnEnd,"grid-row-start":e.gridRowStart,"grid-row-end":e.gridRowEnd});const a=Ca.parseStyle(e.parent.gridTemplateColumns),o=Ca.parseStyle(e.parent.gridTemplateRows);i["grid-column-start"]=Math.max(1,Math.min(a.length,i["grid-column-start"]||1)),i["grid-column-end"]=Math.min(a.length+1,i["grid-column-end"]||2),i["grid-row-start"]=Math.max(1,Math.min(o.length,i["grid-row-start"]||1)),i["grid-row-end"]=Math.min(o.length+1,i["grid-row-end"]||2)}return i}toDefaultLayoutItemCSS(e){var s;const t={};if((s=e.parent)!=null&&s.is("project"))return t;const i=e.parent.screenWidth;switch(e[Un.HORIZONTAL]){case Tt.MIN:t.left=y.px(e.x),t.right="auto !important";break;case Tt.MAX:t.right=y.px(i-e.offsetX-e.screenWidth),t.left="auto !important";break;case Tt.STRETCH:t.left=y.px(e.x),t.right=y.px(i-e.offsetX-e.screenWidth),t.width="auto !important";break;case Tt.CENTER:t.left=y.px(e.x);break;case Tt.SCALE:t.left=y.px(e.x).toPercent(i),t.right=y.px(i-e.offsetX-e.screenWidth).toPercent(i),t.width="auto !important";break}const r=e.parent.screenHeight;switch(e[Un.VERTICAL]){case Tt.MIN:t.top=y.px(e.y),t.bottom="auto !important";break;case Tt.MAX:t.top="auto !important",t.bottom=y.px(r-e.offsetY-e.screenHeight);break;case Tt.STRETCH:t.top=y.px(e.y),t.bottom=y.px(r-e.offsetY-e.screenHeight),t.height="auto !important";break;case Tt.CENTER:t.top=y.px(e.y);break;case Tt.SCALE:t.top=y.px(e.y).toPercent(r),t.bottom=y.px(r-e.offsetY-e.screenHeight).toPercent(r),t.height="auto !important";break}return t}toFlexLayoutCSS(e){return e.parent.isNot("project"),{display:"flex",gap:y.px(e.gap),"flex-direction":e.flexDirection,"flex-wrap":e.flexWrap,"justify-content":e.justifyContent,"align-items":e.alignItems,"align-content":e.alignContent}}toGridLayoutCSS(e){return{display:"grid","grid-template-columns":e.gridTemplateColumns,"grid-template-rows":e.gridTemplateRows,"grid-template-areas":e.gridTemplateAreas,"grid-auto-columns":e.gridAutoColumns,"grid-auto-rows":e.gridAutoRows,"grid-auto-flow":e.gridAutoFlow,"grid-column-gap":e.gridColumnGap,"grid-row-gap":e.gridRowGap}}toBorderCSS(e){return e.computed("border",i=>P({},hn(i)))}toBoxModelCSS(e){let t={};return e.marginTop&&(t["margin-top"]=y.px(e.marginTop)),e.marginBottom&&(t["margin-bottom"]=y.px(e.marginBottom)),e.marginLeft&&(t["margin-left"]=y.px(e.marginLeft)),e.marginRight&&(t["margin-right"]=y.px(e.marginRight)),e.paddingTop&&(t["padding-top"]=y.px(e.paddingTop)),e.paddingBottom&&(t["padding-bottom"]=y.px(e.paddingBottom)),e.paddingLeft&&(t["padding-left"]=y.px(e.paddingLeft)),e.paddingRight&&(t["padding-right"]=y.px(e.paddingRight)),t}toSizeCSS(e){const t={};if(e.isLayout(At.FLEX)){switch(e.resizingHorizontal){case wt.FIXED:t.width=y.px(e.screenWidth);break;case wt.HUG_CONTENT:t["min-width"]=y.px(e.screenWidth);break}switch(e.resizingVertical){case wt.FIXED:t.height=y.px(e.screenHeight);break;case wt.HUG_CONTENT:t["min-height"]=y.px(e.screenHeight);break}}if(e.isInDefault()&&(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight)),e.isInFlex()){const i=e.parent.flexDirection;i===br.ROW||i===br.ROW_REVERSE?(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight),e.parent["align-items"]===Ps.STRETCH&&(t.height="auto"),e.resizingVertical===wt.FILL_CONTAINER&&(t.height="auto",t["align-self"]=Ps.STRETCH)):(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight),e.parent["align-items"]===Ps.STRETCH&&(t.width="auto"),e.resizingHorizontal===wt.FILL_CONTAINER&&(t.width="auto",t["align-self"]=Ps.STRETCH))}return e.isInGrid()&&(t.width="auto",t.height="auto"),t}toDefaultCSS(e){e.hasCache("toDefaultCSS")||e.addCache("toDefaultCSS",{"box-sizing":"border-box"});let t=e.getCache("toDefaultCSS");return e.isAbsolute&&(t.left=y.px(e.x),t.top=y.px(e.y)),t["background-color"]=e.backgroundColor,t.color=e.color,t["font-size"]=e.fontSize,t["font-weight"]=e.fontWeight,t["font-style"]=e.fontStyle,t["font-family"]=e.fontFamily,t["text-align"]=e.textAlign,t["text-decoration"]=e.textDecoration,t["text-transform"]=e.textTransform,t["letter-spacing"]=e.letterSpacing,t["word-spacing"]=e.wordSpacing,t["line-height"]=e.lineHeight,t["text-indent"]=e.textIndent,t["text-shadow"]=e.textShadow,t["text-overflow"]=e.textOverflow,t["text-wrap"]=e.textWrap,t.position=e.position,t.overflow=e.overflow,t["z-index"]=e.zIndex,t.opacity=e.opacity,t["mix-blend-mode"]=e.mixBlendMode,t["transform-origin"]=e.transformOrigin,t["border-radius"]=e.borderRadius,t.filter=e.filter,t["backdrop-filter"]=e.backdropFilter,t["box-shadow"]=e.boxShadow,t.animation=e.animation,t.transition=e.transition,t}toVariableCSS(e){return e.computed("variable",i=>{let r={};return i.split(";").filter(s=>s.trim()).forEach(s=>{const[a,o]=s.split(":");r[`--${a}`]=o}),r})}toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(i=>i.trim()).forEach(i=>{const[r,s]=i.split(":");t[`--${r}`]=s}),t}toRootVariableString(e){return ei(this.toRootVariableCSS(e))}toWebkitCSS(e){var t={};return UU.forEach(i=>{t[`-webkit-${i}`]=e.get(i)}),t}toTextClipCSS(e){let t={};return e.textClip==="text"&&(t["-webkit-background-clip"]="text",t["-webkit-text-fill-color"]="transparent",t.color="transparent"),t}toTransformCSS(e){return e.computed("angle",i=>({transform:i===0?"":`rotateZ(${i}deg)`}))}toDefInnerString(e){return` + `}getSourceInAttribute(){return""}}ps.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},specularConstant:{title:"Constant",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},specularExponent:{title:"Exponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Br extends $t{getDefaultObject(){return super.getDefaultObject({type:"SpotLight",x:Br.spec.x.defaultValue,y:Br.spec.x.defaultValue,z:Br.spec.x.defaultValue,pointsAtX:Br.spec.pointsAtX.defaultValue,pointsAtY:Br.spec.pointsAtY.defaultValue,pointsAtZ:Br.spec.pointsAtZ.defaultValue,specularExponent:Br.spec.specularExponent.defaultValue,limitingConeAngle:Br.spec.limitingConeAngle.defaultValue})}isLight(){return!0}toString(){}toLightString(){var{x:e,y:t,z:r,pointsAtX:i,pointsAtY:a,pointsAtZ:n,specularExponent:o,limitingConeAngle:l}=this.json;return``}}Br.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtX:{title:"pointsAtX",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtY:{title:"pointsAtY",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtZ:{title:"pointsAtZ",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},specularExponent:{title:"specularExponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},limitingConeAngle:{title:"limitingConeAngle",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)}};class Rj extends va{getDefaultObject(){return super.getDefaultObject({type:"StrokePaint"})}}class gs extends $t{getDefaultObject(){return super.getDefaultObject({type:"Tile",x:gs.spec.x.defaultValue,y:gs.spec.y.defaultValue,width:gs.spec.width.defaultValue,height:gs.spec.height.defaultValue})}getInCount(){return 1}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{x:e,y:t,width:r,height:i}=this.json;return``}}gs.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class fs extends $t{getDefaultObject(){return super.getDefaultObject({type:"Turbulence",filterType:fs.spec.filterType.defaultValue,baseFrequency:fs.spec.baseFrequency.defaultValue,numOctaves:fs.spec.numOctaves.defaultValue,seed:fs.spec.seed.defaultValue})}convert(e){return e.baseFrequency=p.parse(e.baseFrequency),e.numOctaves=p.parse(e.numOctaves),e.seed=p.parse(e.seed),e}toString(){var{filterType:e,baseFrequency:t,numOctaves:r,seed:i}=this.json;return``}}fs.spec={filterType:{title:"Type",inputType:"select",options:"fractalNoise,turbulence",defaultValue:"turbulence"},baseFrequency:{title:"Frequency",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},numOctaves:{title:"Octaves",inputType:"number-range",min:1,max:10,step:1,defaultValue:p.number(1)},seed:{title:"Seed",inputType:"number-range",min:0,max:1e4,step:1,defaultValue:p.number(0)}};const jj=["result"];class Rn extends or{static parse(e){var t=dg[e.type];return new t(e)}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svgfilter",result:""},e))}getDefaultAttribute(){return jj.map(e=>`${e}="${this.json[e]}"`).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}const dg={Image:ii,Tile:gs,Saturate:On,HueRotate:Ln,LuminanceAlpha:ch,DropShadow:Ti,SourceGraphic:Oj,SourceAlpha:Vj,BackgroundImage:Ej,BackgroundAlpha:Ij,FillPaint:Lj,StrokePaint:Rj,ComponentTransfer:us,DistantLight:ya,PointLight:Xs,SpotLight:Br,DiffuseLighting:Us,SpecularLighting:ps,Blend:kn,Offset:xa,RotaMatrix:Vn,GaussianBlur:Ws,Flood:hi,Merge:hh,Composite:Ci,Morphology:ba,Turbulence:fs,DisplacementMap:En,ColorMatrix:Mn,ConvolveMatrix:In},zj={Image:ii.spec,Tile:gs.spec,DropShadow:Ti.spec,Saturate:On.spec,HueRotate:Ln.spec,LuminanceAlpha:ch.spec,Offset:xa.spec,ComponentTransfer:us.spec,SpecularLighting:ps.spec,SpotLight:Br.spec,PointLight:Xs.spec,DistantLight:ya.spec,DiffuseLighting:Us.spec,Blend:kn.spec,RotaMatrix:Vn.spec,Merge:hh.spec,GaussianBlur:Ws.spec,Flood:hi.spec,Morphology:ba.spec,Composite:Ci.spec,Turbulence:fs.spec,DisplacementMap:En.spec,ColorMatrix:Mn.spec,ConvolveMatrix:In.spec},Aj=["text-fill-color","text-stroke-color","text-stroke-width","background-clip"];function Dj(s){const e={};return Object.keys(s).forEach(t=>{ke(s[t])&&(e[t]=s[t])}),e}class qo extends Tj{toStringPropertyCSS(e,t){return wr(e.get(t))}toBackgroundImageCSS(e){return e.cacheBackgroundImage||e.setBackgroundImageCache(),e.cacheBackgroundImage}toLayoutCSS(e){if(e.hasLayout()){if(e.isLayout(Ae.FLEX))return this.toFlexLayoutCSS(e);if(e.isLayout(Ae.GRID))return this.toGridLayoutCSS(e)}return{}}toLayoutItemCSS(e){var i,a;var t=(i=e.parent)==null?void 0:i.layout,r={};if(t===Ae.FLEX?r={position:"relative",left:"auto !important",top:"auto !important"}:t===Ae.GRID?r={position:"relative",left:"auto",top:"auto"}:t===Ae.DEFAULT&&(r=this.toDefaultLayoutItemCSS(e)),t===Ae.FLEX){r=se(b({},r),{"flex-basis":e.flexBasis,"flex-shrink":e.flexShrink});const n=(a=e==null?void 0:e.parent)==null?void 0:a.flexDirection;n===Zt.ROW&&e.resizingHorizontal===Ce.FILL_CONTAINER?(r.width="auto",r["flex-grow"]=e.flexGrow||1):n===Zt.COLUMN&&e.resizingVertical===Ce.FILL_CONTAINER&&(r.height="auto",r["flex-grow"]=e.flexGrow||1)}else if(t===Ae.GRID){r=se(b({},r),{"grid-column-start":e.gridColumnStart,"grid-column-end":e.gridColumnEnd,"grid-row-start":e.gridRowStart,"grid-row-end":e.gridRowEnd});const n=cs.parseStyle(e.parent.gridTemplateColumns),o=cs.parseStyle(e.parent.gridTemplateRows);r["grid-column-start"]=Math.max(1,Math.min(n.length,r["grid-column-start"]||1)),r["grid-column-end"]=Math.min(n.length+1,r["grid-column-end"]||2),r["grid-row-start"]=Math.max(1,Math.min(o.length,r["grid-row-start"]||1)),r["grid-row-end"]=Math.min(o.length+1,r["grid-row-end"]||2)}return r}toDefaultLayoutItemCSS(e){var a;const t={};if((a=e.parent)!=null&&a.is("project"))return t;const r=e.parent.screenWidth;switch(e[qr.HORIZONTAL]){case Me.MIN:t.left=p.px(e.x),t.right="auto !important";break;case Me.MAX:t.right=p.px(r-e.offsetX-e.screenWidth),t.left="auto !important";break;case Me.STRETCH:t.left=p.px(e.x),t.right=p.px(r-e.offsetX-e.screenWidth),t.width="auto !important";break;case Me.CENTER:t.left=p.px(e.x);break;case Me.SCALE:t.left=p.px(e.x).toPercent(r),t.right=p.px(r-e.offsetX-e.screenWidth).toPercent(r),t.width="auto !important";break}const i=e.parent.screenHeight;switch(e[qr.VERTICAL]){case Me.MIN:t.top=p.px(e.y),t.bottom="auto !important";break;case Me.MAX:t.top="auto !important",t.bottom=p.px(i-e.offsetY-e.screenHeight);break;case Me.STRETCH:t.top=p.px(e.y),t.bottom=p.px(i-e.offsetY-e.screenHeight),t.height="auto !important";break;case Me.CENTER:t.top=p.px(e.y);break;case Me.SCALE:t.top=p.px(e.y).toPercent(i),t.bottom=p.px(i-e.offsetY-e.screenHeight).toPercent(i),t.height="auto !important";break}return t}toFlexLayoutCSS(e){return e.parent.isNot("project"),{display:"flex",gap:p.px(e.gap),"flex-direction":e.flexDirection,"flex-wrap":e.flexWrap,"justify-content":e.justifyContent,"align-items":e.alignItems,"align-content":e.alignContent}}toGridLayoutCSS(e){return{display:"grid","grid-template-columns":e.gridTemplateColumns,"grid-template-rows":e.gridTemplateRows,"grid-template-areas":e.gridTemplateAreas,"grid-auto-columns":e.gridAutoColumns,"grid-auto-rows":e.gridAutoRows,"grid-auto-flow":e.gridAutoFlow,"grid-column-gap":e.gridColumnGap,"grid-row-gap":e.gridRowGap}}toBorderCSS(e){return e.computed("border",r=>b({},wr(r)))}toBoxModelCSS(e){let t={};return e.marginTop&&(t["margin-top"]=p.px(e.marginTop)),e.marginBottom&&(t["margin-bottom"]=p.px(e.marginBottom)),e.marginLeft&&(t["margin-left"]=p.px(e.marginLeft)),e.marginRight&&(t["margin-right"]=p.px(e.marginRight)),e.paddingTop&&(t["padding-top"]=p.px(e.paddingTop)),e.paddingBottom&&(t["padding-bottom"]=p.px(e.paddingBottom)),e.paddingLeft&&(t["padding-left"]=p.px(e.paddingLeft)),e.paddingRight&&(t["padding-right"]=p.px(e.paddingRight)),t}toSizeCSS(e){const t={};if(e.isLayout(Ae.FLEX)){switch(e.resizingHorizontal){case Ce.FIXED:t.width=p.px(e.screenWidth);break;case Ce.HUG_CONTENT:t["min-width"]=p.px(e.screenWidth);break}switch(e.resizingVertical){case Ce.FIXED:t.height=p.px(e.screenHeight);break;case Ce.HUG_CONTENT:t["min-height"]=p.px(e.screenHeight);break}}if(e.isInDefault()&&(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight)),e.isInFlex()){const r=e.parent.flexDirection;r===Zt.ROW||r===Zt.ROW_REVERSE?(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight),e.parent["align-items"]===vi.STRETCH&&(t.height="auto"),e.resizingVertical===Ce.FILL_CONTAINER&&(t.height="auto",t["align-self"]=vi.STRETCH)):(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight),e.parent["align-items"]===vi.STRETCH&&(t.width="auto"),e.resizingHorizontal===Ce.FILL_CONTAINER&&(t.width="auto",t["align-self"]=vi.STRETCH))}return e.isInGrid()&&(t.width="auto",t.height="auto"),t}toDefaultCSS(e){e.hasCache("toDefaultCSS")||e.addCache("toDefaultCSS",{"box-sizing":"border-box"});let t=e.getCache("toDefaultCSS");return e.isAbsolute&&(t.left=p.px(e.x),t.top=p.px(e.y)),t["background-color"]=e.backgroundColor,t.color=e.color,t["font-size"]=e.fontSize,t["font-weight"]=e.fontWeight,t["font-style"]=e.fontStyle,t["font-family"]=e.fontFamily,t["text-align"]=e.textAlign,t["text-decoration"]=e.textDecoration,t["text-transform"]=e.textTransform,t["letter-spacing"]=e.letterSpacing,t["word-spacing"]=e.wordSpacing,t["line-height"]=e.lineHeight,t["text-indent"]=e.textIndent,t["text-shadow"]=e.textShadow,t["text-overflow"]=e.textOverflow,t["text-wrap"]=e.textWrap,t.position=e.position,t.overflow=e.overflow,t["z-index"]=e.zIndex,t.opacity=e.opacity,t["mix-blend-mode"]=e.mixBlendMode,t["transform-origin"]=e.transformOrigin,t["border-radius"]=e.borderRadius,t.filter=e.filter,t["backdrop-filter"]=e.backdropFilter,t["box-shadow"]=e.boxShadow,t.animation=e.animation,t.transition=e.transition,t}toVariableCSS(e){return e.computed("variable",r=>{let i={};return r.split(";").filter(a=>a.trim()).forEach(a=>{const[n,o]=a.split(":");i[`--${n}`]=o}),i})}toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(r=>r.trim()).forEach(r=>{const[i,a]=r.split(":");t[`--${i}`]=a}),t}toRootVariableString(e){return Je(this.toRootVariableCSS(e))}toWebkitCSS(e){var t={};return Aj.forEach(r=>{t[`-webkit-${r}`]=e.get(r)}),t}toTextClipCSS(e){let t={};return e.textClip==="text"&&(t["-webkit-background-clip"]="text",t["-webkit-text-fill-color"]="transparent",t.color="transparent"),t}toTransformCSS(e){return e.computed("angle",r=>({transform:r===0?"":`rotateZ(${r}deg)`}))}toDefInnerString(e){return` ${this.toClipPath(e)} ${this.toSVGFilter(e)} - `.trim()}toClipPath(e){if(e.clipPath==="")return"";e.cacheClipPathObject||e.setClipPathCache();var t=e.cacheClipPathObject,i=t.value;switch(t.type){case"path":return``;case"svg":return`${i}`}return""}toClipPathCSS(e){let t=e.clipPath;if(Boolean(t)===!1)return null;e.cacheClipPathObject||e.setClipPathCache();var i=e.cacheClipPathObject;switch(i.type){case"path":i.value&&(t=`url(#${this.clipPathId(e)})`);break;case"svg":t=`url(#${this.clipPathId(e)})`;break}return{"clip-path":t}}innerSVGId(e){return e.id+"inner-svg"}booleanId(e){return e.id+"boolean"}clipPathId(e){return e.id+"clip-path"}toDefString(e){var t=this.toDefInnerString(e).trim();return t?` + `.trim()}toClipPath(e){if(e.clipPath==="")return"";e.cacheClipPathObject||e.setClipPathCache();var t=e.cacheClipPathObject,r=t.value;switch(t.type){case"path":return``;case"svg":return`${r}`}return""}toClipPathCSS(e){let t=e.clipPath;if(Boolean(t)===!1)return null;e.cacheClipPathObject||e.setClipPathCache();var r=e.cacheClipPathObject;switch(r.type){case"path":r.value&&(t=`url(#${this.clipPathId(e)})`);break;case"svg":t=`url(#${this.clipPathId(e)})`;break}return{"clip-path":t}}innerSVGId(e){return e.id+"inner-svg"}booleanId(e){return e.id+"boolean"}clipPathId(e){return e.id+"clip-path"}toDefString(e){var t=this.toDefInnerString(e).trim();return t?` ${t} - `:""}toSelectorString(e,t=""){var i;return(i=e.selectors)==null?void 0:i.map(r=>r.toString(t)).join(` + `:""}toSelectorString(e,t=""){var r;return(r=e.selectors)==null?void 0:r.map(i=>i.toString(t)).join(` -`)}generateView(e,t="",i=""){var r=` +`)}generateView(e,t="",r=""){var i=` ${t} { /* ${e.itemType} */ - ${ei(this.toCSS(e),` + ${Je(this.toCSS(e),` `)}; - ${i} + ${r} } - ${this.toNestedCSS(e).map(s=>`${t} ${s.selector} { - ${s.cssText?s.cssText:ei(s.css||{},` + ${this.toNestedCSS(e).map(a=>`${t} ${a.selector} { + ${a.cssText?a.cssText:Je(a.css||{},` `)}; }`).join(` `)} ${this.toSelectorString(e,t)} - `;return r}toCSS(e){return WU(Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBoxModelCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e),this.toSizeCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e)))}toStyleCode(e){return this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`)}toStyle(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return` + `;return i}toCSS(e){return Dj(Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBoxModelCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e),this.toSizeCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e)))}toStyleCode(e){return this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`)}toStyle(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return` - `+e.layers.map(i=>this.renderer.toStyle(i)).join("")}toStyleData(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return{styleTag:``,cssString:t}}toExportStyle(e){const t=this.generateView(e,`.element-item[data-id='${e.id}']`);return` + `+e.layers.map(r=>this.renderer.toStyle(r)).join("")}toStyleData(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return{styleTag:``,cssString:t}}toExportStyle(e){const t=this.generateView(e,`.element-item[data-id='${e.id}']`);return` - `+e.layers.map(i=>this.renderer.toExportStyle(i)).join("")}render(e){var{elementType:t,id:i,name:r,itemType:s,isBooleanItem:a}=e;const o=t||"div";return`<${o} id="${this.uniqueId(e)}" class="element-item ${s}" data-is-boolean-item="${a}" data-id="${i}" data-title="${r}">${this.toDefString(e)}${e.layers.map(l=>this.renderer.render(l)).join("")}`}toSVGFilter(e){if(e.svgfilters.length===0)return"";var t=e.computedValue("svgfilters");return(e.hasChangedField("svgfilters")||!t)&&(t=e.computed("svgfilters",i=>{var r=i.map(s=>` - - ${s.filters.map(a=>Oh.parse(a)).join(` + `+e.layers.map(r=>this.renderer.toExportStyle(r)).join("")}render(e){var{elementType:t,id:r,name:i,itemType:a,isBooleanItem:n}=e;const o=t||"div";return`<${o} id="${this.uniqueId(e)}" class="element-item ${a}" data-is-boolean-item="${n}" data-id="${r}" data-title="${i}">${this.toDefString(e)}${e.layers.map(l=>this.renderer.render(l)).join("")}`}toSVGFilter(e){if(e.svgfilters.length===0)return"";var t=e.computedValue("svgfilters");return(e.hasChangedField("svgfilters")||!t)&&(t=e.computed("svgfilters",r=>{var i=r.map(a=>` + + ${a.filters.map(n=>Rn.parse(n)).join(` `)} - `).join("");return r},!0)),t}renderSVG(){}toNestedCSS(){return[]}updateStyle(e){if(e.hasCache("style")){const t=this.toStyleData(e).cssString;if(e.hasCache("styleText")&&e.getCache("styleText")===t)return;e.addCache("styleText",t),e.getCache("style").text(t)}else{const t=this.toStyleData(e),i=Ze.createByHTML(t.styleTag);e.addCache("style",i),e.addCache("styleText",t.cssString),document.head.appendChild(i.el)}}update(e,t){if(!t)return;this.updateStyle(e);let i=t.el.$svg;if(i||(t.el.$svg=t.$(`[data-id="${this.innerSVGId(e)}"]`),i=t.el.$svg,t.el.$booleanSvg=t.$(`[data-id="${this.booleanId(e)}"]`)),t.data("is-boolean-item")!==`${e.isBooleanItem}`&&t.attr("data-is-boolean-item",e.isBooleanItem),i){const a=this.toDefInnerString(e);if(a){var r=i.$("defs");r.updateSVGDiff(`${a}`)}}else{const a=this.toDefString(e);if(a){var s=Ze.createByHTML(a);s&&t.prepend(s)}}}}class Oa extends Cu{}class YU extends Oa{update(e,t){const i=t.$(".sample-text");i&&i.text(e.sampleText);const r=t.$(".sample-number");r&&r.text(e.sampleNumber);const s=t.$(".sample-items");if(s){const a=[...Array(e.sampleNumber)].map((o,l)=>` + `).join("");return i},!0)),t}renderSVG(){}toNestedCSS(){return[]}updateStyle(e){if(e.hasCache("style")){const t=this.toStyleData(e).cssString;if(e.hasCache("styleText")&&e.getCache("styleText")===t)return;e.addCache("styleText",t),e.getCache("style").text(t)}else{const t=this.toStyleData(e),r=ge.createByHTML(t.styleTag);e.addCache("style",r),e.addCache("styleText",t.cssString),document.head.appendChild(r.el)}}update(e,t){if(!t)return;this.updateStyle(e);let r=t.el.$svg;if(r||(t.el.$svg=t.$(`[data-id="${this.innerSVGId(e)}"]`),r=t.el.$svg,t.el.$booleanSvg=t.$(`[data-id="${this.booleanId(e)}"]`)),t.data("is-boolean-item")!==`${e.isBooleanItem}`&&t.attr("data-is-boolean-item",e.isBooleanItem),r){const n=this.toDefInnerString(e);if(n){var i=r.$("defs");i.updateSVGDiff(`${n}`)}}else{const n=this.toDefString(e);if(n){var a=ge.createByHTML(n);a&&t.prepend(a)}}}}class ms extends qo{}class Fj extends ms{update(e,t){const r=t.$(".sample-text");r&&r.text(e.sampleText);const i=t.$(".sample-number");i&&i.text(e.sampleNumber);const a=t.$(".sample-items");if(a){const n=[...Array(e.sampleNumber)].map((o,l)=>`
      ${l}
      `).join(` -`);s.html(a)}super.update(e,t)}render(e){var{id:t,sampleText:i,sampleNumber:r}=e;return` +`);a.html(n)}super.update(e,t)}render(e){var{id:t,sampleText:r,sampleNumber:i}=e;return`
      ${this.toDefString(e)}
      -
      ${i}
      -
      ${r}
      +
      ${r}
      +
      ${i}
      -
      `}}function Bb(n){n.registerComponent("sample",AU),n.registerRenderer("html","sample",new YU),n.registerInspector("sample",e=>["Sample Text \uD3B8\uC9D1",{key:"sampleText",editor:"TextEditor",defaultValue:e.sampleText},"Sample Number \uD3B8\uC9D1",{key:"sampleNumber",editor:"NumberInputEditor",editorOptions:{min:0,max:10,step:1,label:"SN"},defaultValue:e.sampleNumber},"\uC2A4\uD0C0\uC77C \uCE74\uD53C",{type:"column",size:[1,1],gap:10,columns:[{key:"copyCssJSON",editor:"Button",editorOptions:{text:"Copy CSS JSON",onClick:()=>{console.log(JSON.stringify(n.html.toCSS(e),null,4))}}},{key:"copyCssString",editor:"Button",editorOptions:{text:"Copy CSS String",onClick:()=>{console.log(ei(n.html.toCSS(e)))}}},{key:"changeColor",editor:"Button",editorOptions:{text:"Change Text Random Color",onClick:()=>{const t=bl(),i=bl();n.context.commands.emit("setAttribute",{[e.id]:{color:t,"background-color":i}})}}}]}])}var Yre="";class KU extends ge{template(){return D("div",{class:"elf--selection-info-view"})}[qe("$el [data-artboard-title-id]")+Oc("calculateFirstMovedElement")+at("calculateMovedElement")+lt("calculateEndedElement")](e){this.startXY=e.xy,this.initMousePoint=this.$viewport.getWorldPosition(e);const t=e.$dt.attr("data-artboard-title-id");this.$context.selection.select(t),e.altKey&&this.$commands.emit("history.copyLayer","copy"),this.initializeDragSelection()}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(s=>_t([],s,e)),3/this.$viewport.scale),i=_t([],t.dist,e),r={};this.$context.selection.cachedItemMatrices.forEach(s=>{const a=s.verties.map(l=>_t([],l,i)),o=ft([],Kt([],a[0],s.parentMatrixInverse),Kt([],s.verties[0],s.parentMatrixInverse));r[s.id]={x:Math.floor(s.x+o[0]),y:Math.floor(s.y+o[1])}}),this.$context.selection.reset(r)}calculateFirstMovedElement(){this.$config.set("set.move.control.point",!0),this.emit(da)}calculateMovedElement(){const e=this.$viewport.getWorldPosition(),t=Gn([],ft([],e,this.initMousePoint));this.moveTo(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y")),this.refresh()}[U("refreshItemName")](e,t){var i;this.$commands.emit("setAttribute",{[e]:{name:t}}),(i=this.$el.$(`[data-artboard-title-id='${e}']`))==null||i.text(t)}calculateEndedElement(){this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.$config.set("set.move.control.point",!1),this.emit(da),this.$commands.emit("history.refreshSelection")}[U(si)](){this.refresh()}[U(Gi)](){this.$context.selection.current&&this.$context.selection.current.is("artboard")&&this.$context.selection.hasChangedField("x","y","width","height","angle","transform","transform-origin")&&this.refresh()}[ve("$el")+It](){var e;return(e=this.$context.selection.currentProject)==null?void 0:e.artboards.map(t=>({item:t,title:t.name,id:t.id,layout:t.layout,pointers:this.$viewport.applyVerties(t.verties)})).map(t=>this.makeArtboardTitleArea(t))}getIcon(e){return e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?re("layout_flex",e.flexDirection==="column"?"rotate(90 12 12)":""):e.isLayout("grid")?re("layout_grid"):"":this.$icon.get(e.itemType,e)}createSize(e,t){const i=e[0],r=ft([],e[0],e[3]),s=li(r[0],r[1])-90;return D("div",{class:"artboard-title is-not-drag-area","data-artboard-title-id":t.id,"data-layout":t.layout,style:{"transform-origin":"0% 0%",transform:`translate3d( calc(${i[0]}px), calc(${i[1]}px), 0px) rotateZ(${s}deg)`}},D("div",{style:"transform: translateY(-100%);"},this.getIcon(t.item),t.title))}makeArtboardTitleArea(e){return this.createSize(e.pointers,e)}[U("refreshAll")](){this.refresh()}[U("appendLayer")](){this.refresh()}}function jb(n){n.registerUI("canvas.view",{SelectionInfoView:KU})}var Kre="";const Eu=.5;class qU extends ge{template(){return D("div",{class:"elf--ghost-tool-view"},D("div",{ref:"$containerView"}),D("div",{ref:"$view"}))}[U("startGhostToolView")](){const e=this.$context.selection.verties;this.isLayoutItem=this.$context.selection.isLayoutItem,this.verties=rt(e),this.ghostVerties=rt(e),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties),this.initMousePoint=this.$viewport.getWorldPosition(),this.filteredLayers=this.$context.selection.notSelectedLayers,this.containerList=this.filteredLayers.filter(t=>t.hasLayout()||t.is("artboard")).map(t=>t.originVerties),this.$config.set("set.move.control.point",!0)}collectInformation(){var r,s;const e=this.$viewport.getWorldPosition(),t=this.getDist();this.ghostVerties=this.verties.map(a=>_t([],a,t)),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties);const i=this.$context.selection.filteredLayers.filter(a=>this.$context.selection.check(a)===!1);if(this.targetItem=i[0],this.targetItem){const a=(r=this.$context.selection.current)==null?void 0:r.parent;a.isNot("project")&&(a==null?void 0:a.isLayout(At.GRID))?this.targetItem=this.$context.selection.current.parent:this.targetItem.hasLayout()&&((s=this.targetItem)==null?void 0:s.hasChildren())&&(this.targetItem.isLayout(At.FLEX)?this.targetItem=this.targetItem.layers[this.targetItem.layers.length-1]:this.targetItem.isLayout(At.GRID)),this.$context.selection.updateDragTargetItem(this.targetItem),this.targetOriginPosition=this.$viewport.applyVerties(wn(this.targetItem.contentVerties)),this.targetPoint=this.$viewport.applyVertex(e),this.targetRelativeMousePoint={x:(this.targetPoint[0]-this.targetOriginPosition[0][0])/(this.targetOriginPosition[1][0]-this.targetOriginPosition[0][0]),y:(this.targetPoint[1]-this.targetOriginPosition[0][1])/(this.targetOriginPosition[3][1]-this.targetOriginPosition[0][1])},this.targetItem.isLayoutItem()?(this.targetParent=this.targetItem.parent,this.targetParent&&(this.targetParentPosition=this.$viewport.applyVerties(this.targetParent.contentVerties))):(this.targetParent=null,this.targetParentPosition=null)}else this.targetPoint=null,this.targetRelativeMousePoint=null,this.targetParent=null,this.targetParentPosition=null}[U("moveFirstGhostToolView")](){this.collectInformation(),this.load("$containerView"),this.load("$view")}[U("moveGhostToolView")](){this.collectInformation(),this.load("$view")}[ve("$containerView")](){var e;return this.ghostVerties?D("svg",null,(e=this.containerList)==null?void 0:e.map(t=>(t=this.$viewport.applyVerties(t),D("path",{class:"container",d:` +
      `}}function Bj(s){s.registerComponent("sample",Cj),s.registerRenderer("html","sample",new Fj),s.registerInspector("sample",e=>["Sample Text \uD3B8\uC9D1",{key:"sampleText",editor:"TextEditor",defaultValue:e.sampleText},"Sample Number \uD3B8\uC9D1",{key:"sampleNumber",editor:"NumberInputEditor",editorOptions:{min:0,max:10,step:1,label:"SN"},defaultValue:e.sampleNumber},"\uC2A4\uD0C0\uC77C \uCE74\uD53C",{type:"column",size:[1,1],gap:10,columns:[{key:"copyCssJSON",editor:"Button",editorOptions:{text:"Copy CSS JSON",onClick:()=>{console.log(JSON.stringify(s.html.toCSS(e),null,4))}}},{key:"copyCssString",editor:"Button",editorOptions:{text:"Copy CSS String",onClick:()=>{console.log(Je(s.html.toCSS(e)))}}},{key:"changeColor",editor:"Button",editorOptions:{text:"Change Text Random Color",onClick:()=>{const t=ua(),r=ua();s.context.commands.emit("setAttribute",{[e.id]:{color:t,"background-color":r}})}}}]}])}var UF="";class Nj extends Y{template(){return C("div",{class:"elf--selection-info-view"})}[me("$el [data-artboard-title-id]")+Na("calculateFirstMovedElement")+xe("calculateMovedElement")+Se("calculateEndedElement")](e){this.startXY=e.xy,this.initMousePoint=this.$viewport.getWorldPosition(e);const t=e.$dt.attr("data-artboard-title-id");this.$context.selection.select(t),e.altKey&&this.$commands.emit("history.copyLayer","copy"),this.initializeDragSelection()}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(a=>we([],a,e)),3/this.$viewport.scale),r=we([],t.dist,e),i={};this.$context.selection.cachedItemMatrices.forEach(a=>{const n=a.verties.map(l=>we([],l,r)),o=_e([],Ze([],n[0],a.parentMatrixInverse),Ze([],a.verties[0],a.parentMatrixInverse));i[a.id]={x:Math.floor(a.x+o[0]),y:Math.floor(a.y+o[1])}}),this.$context.selection.reset(i)}calculateFirstMovedElement(){this.$config.set("set.move.control.point",!0),this.emit(Xi)}calculateMovedElement(){const e=this.$viewport.getWorldPosition(),t=Zr([],_e([],e,this.initMousePoint));this.moveTo(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y")),this.refresh()}[M("refreshItemName")](e,t){var r;this.$commands.emit("setAttribute",{[e]:{name:t}}),(r=this.$el.$(`[data-artboard-title-id='${e}']`))==null||r.text(t)}calculateEndedElement(){this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.$config.set("set.move.control.point",!1),this.emit(Xi),this.$commands.emit("history.refreshSelection")}[M(st)](){this.refresh()}[M(Mt)](){this.$context.selection.current&&this.$context.selection.current.is("artboard")&&this.$context.selection.hasChangedField("x","y","width","height","angle","transform","transform-origin")&&this.refresh()}[G("$el")+Ee](){var e;return(e=this.$context.selection.currentProject)==null?void 0:e.artboards.map(t=>({item:t,title:t.name,id:t.id,layout:t.layout,pointers:this.$viewport.applyVerties(t.verties)})).map(t=>this.makeArtboardTitleArea(t))}getIcon(e){return e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?z("layout_flex",e.flexDirection==="column"?"rotate(90 12 12)":""):e.isLayout("grid")?z("layout_grid"):"":this.$icon.get(e.itemType,e)}createSize(e,t){const r=e[0],i=_e([],e[0],e[3]),a=ot(i[0],i[1])-90;return C("div",{class:"artboard-title is-not-drag-area","data-artboard-title-id":t.id,"data-layout":t.layout,style:{"transform-origin":"0% 0%",transform:`translate3d( calc(${r[0]}px), calc(${r[1]}px), 0px) rotateZ(${a}deg)`}},C("div",{style:"transform: translateY(-100%);"},this.getIcon(t.item),t.title))}makeArtboardTitleArea(e){return this.createSize(e.pointers,e)}[M("refreshAll")](){this.refresh()}[M("appendLayer")](){this.refresh()}}function Gj(s){s.registerUI("canvas.view",{SelectionInfoView:Nj})}var WF="";const Qo=.5;class Hj extends Y{template(){return C("div",{class:"elf--ghost-tool-view"},C("div",{ref:"$containerView"}),C("div",{ref:"$view"}))}[M("startGhostToolView")](){const e=this.$context.selection.verties;this.isLayoutItem=this.$context.selection.isLayoutItem,this.verties=be(e),this.ghostVerties=be(e),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties),this.initMousePoint=this.$viewport.getWorldPosition(),this.filteredLayers=this.$context.selection.notSelectedLayers,this.containerList=this.filteredLayers.filter(t=>t.hasLayout()||t.is("artboard")).map(t=>t.originVerties),this.$config.set("set.move.control.point",!0)}collectInformation(){var i,a;const e=this.$viewport.getWorldPosition(),t=this.getDist();this.ghostVerties=this.verties.map(n=>we([],n,t)),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties);const r=this.$context.selection.filteredLayers.filter(n=>this.$context.selection.check(n)===!1);if(this.targetItem=r[0],this.targetItem){const n=(i=this.$context.selection.current)==null?void 0:i.parent;n.isNot("project")&&(n==null?void 0:n.isLayout(Ae.GRID))?this.targetItem=this.$context.selection.current.parent:this.targetItem.hasLayout()&&((a=this.targetItem)==null?void 0:a.hasChildren())&&(this.targetItem.isLayout(Ae.FLEX)?this.targetItem=this.targetItem.layers[this.targetItem.layers.length-1]:this.targetItem.isLayout(Ae.GRID)),this.$context.selection.updateDragTargetItem(this.targetItem),this.targetOriginPosition=this.$viewport.applyVerties(Or(this.targetItem.contentVerties)),this.targetPoint=this.$viewport.applyVertex(e),this.targetRelativeMousePoint={x:(this.targetPoint[0]-this.targetOriginPosition[0][0])/(this.targetOriginPosition[1][0]-this.targetOriginPosition[0][0]),y:(this.targetPoint[1]-this.targetOriginPosition[0][1])/(this.targetOriginPosition[3][1]-this.targetOriginPosition[0][1])},this.targetItem.isLayoutItem()?(this.targetParent=this.targetItem.parent,this.targetParent&&(this.targetParentPosition=this.$viewport.applyVerties(this.targetParent.contentVerties))):(this.targetParent=null,this.targetParentPosition=null)}else this.targetPoint=null,this.targetRelativeMousePoint=null,this.targetParent=null,this.targetParentPosition=null}[M("moveFirstGhostToolView")](){this.collectInformation(),this.load("$containerView"),this.load("$view")}[M("moveGhostToolView")](){this.collectInformation(),this.load("$view")}[G("$containerView")](){var e;return this.ghostVerties?C("svg",null,(e=this.containerList)==null?void 0:e.map(t=>(t=this.$viewport.applyVerties(t),C("path",{class:"container",d:` M ${t[0][0]} ${t[0][1]} L ${t[1][0]} ${t[1][1]} L ${t[2][0]} ${t[2][1]} L ${t[3][0]} ${t[3][1]} Z - `})))):D("svg",null)}renderPathForVerties(e,t){if(!e)return D("g",null);const i=ma(e);return D("g",null,D("path",{class:t,d:i}))}renderPath(e,t,i=t){if(!e)return"";e=i==="ghost"?e:wn(e);const r=e[0][0],s=t==="flex-item"?e[2][1]+10:e[0][1]-10;return D("g",null,D("text",{x:r,y:s,"font-size":8},i),this.renderPathForVerties(e,t))}renderLayoutFlexRowArea(){return this.targetRelativeMousePoint.x_t([],g,p)).filter((g,m)=>m<4);return this.renderPathForVerties(f,"flex-item","ghost")}renderLayoutFlexColumnArea(){return this.targetRelativeMousePoint.y<0?"":this.targetRelativeMousePoint.ys<4),"ghost"))}initializeGhostView(){this.isLayoutItem=!1,this.ghostVerties=void 0,this.ghostScreenVerties=void 0,this.targetOriginPosition=void 0,this.targetOriginPosition=void 0,this.targetRelativeMousePoint=void 0,this.targetItem=void 0,this.targetParent=void 0,this.targetParentPosition=void 0,this.$context.selection.updateDragTargetItem(this.targetItem)}getDist(){const e=this.$viewport.getWorldPosition();return Gn([],ft([],e,this.initMousePoint))}insertToBackground(){const e=this.$context.selection.current,t=this.getDist();e.isLayoutItem()!==!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.$context.selection.currentProject,t)}getTargetAction(){let e="";if(this.targetParent.hasLayout()&&this.targetParent.isLayout(At.FLEX))switch(this.targetParent.flexDirection){case br.ROW:this.targetRelativeMousePoint.xc<4),s=Zi(r),a=Rf.RECT/this.$context.viewport.scale,o=i==null?void 0:i.filter(l=>ig(l.originVerties,r)).filter(l=>{const c=tg(l.originRect,s);return Math.floor(c.width)>a&&Math.floor(c.height)>a});if(o!=null&&o.length){const l=o.map(f=>f.column),c=o.map(f=>f.row),h=Math.min(...l),d=Math.min(...c),u=Math.max(...l)+1,p=Math.max(...c)+1;this.$commands.executeCommand("setAttribute","change grid item",this.$context.selection.packByValue({"grid-column-start":h,"grid-column-end":u,"grid-row-start":d,"grid-row-end":p})),t.current.hasChild(e.id)===!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,t.current,void 0);return}else this.targetItem&&(this.emit("refreshGridToolInfo",this.targetItem),this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,void 0))}updateLayer(){var i;const e=this.$context.selection.current;if(!e)return;const t=this.getDist();if(!(t[0]===0&&t[1]===0)&&!(this.targetItem&&this.targetItem.id===(e==null?void 0:e.id))){if(!this.targetItem){this.insertToBackground();return}if(this.targetItem.hasLayout()){const r=this.$context.keyboardManager.isCtrl();if(((i=this.targetItem)==null?void 0:i.hasChildren())===!1&&this.targetItem.isLayout(At.FLEX)&&r===!1){this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t);return}else if(r){const{info:s}=this.$context.selection.gridInformation||{items:[]};if(s!=null&&s.current){this.insertToGridItem();return}}else if(this.targetItem.isLayout(At.GRID)){this.insertToGridItem();return}}if(this.targetParent){this.insertToLayoutItem();return}e.isLayoutItem()&&e.parent.id!==this.targetItem.id&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t)}}[U("endGhostToolView")](e=!1){e&&this.updateLayer(),this.initializeGhostView(),this.load()}}var qre="",ZU={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const JU=class extends ge{checkViewMode(){return this.$modeView.isCurrentMode(ha.CanvasView)}[U(kt,da)+Qe("checkViewMode")](){this.$context.selection.isMany?this.initSelectionTool():this.hide()}[U(si)+Qe("checkViewMode")](){this.$context.selection.isMany&&this.initSelectionTool()}};class QU extends JU{template(){return` + `})))):C("svg",null)}renderPathForVerties(e,t){if(!e)return C("g",null);const r=qi(e);return C("g",null,C("path",{class:t,d:r}))}renderPath(e,t,r=t){if(!e)return"";e=r==="ghost"?e:Or(e);const i=e[0][0],a=t==="flex-item"?e[2][1]+10:e[0][1]-10;return C("g",null,C("text",{x:i,y:a,"font-size":8},r),this.renderPathForVerties(e,t))}renderLayoutFlexRowArea(){return this.targetRelativeMousePoint.xwe([],y,v)).filter((y,P)=>P<4);return this.renderPathForVerties(g,"flex-item","ghost")}renderLayoutFlexColumnArea(){return this.targetRelativeMousePoint.y<0?"":this.targetRelativeMousePoint.ya<4),"ghost"))}initializeGhostView(){this.isLayoutItem=!1,this.ghostVerties=void 0,this.ghostScreenVerties=void 0,this.targetOriginPosition=void 0,this.targetOriginPosition=void 0,this.targetRelativeMousePoint=void 0,this.targetItem=void 0,this.targetParent=void 0,this.targetParentPosition=void 0,this.$context.selection.updateDragTargetItem(this.targetItem)}getDist(){const e=this.$viewport.getWorldPosition();return Zr([],_e([],e,this.initMousePoint))}insertToBackground(){const e=this.$context.selection.current,t=this.getDist();e.isLayoutItem()!==!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.$context.selection.currentProject,t)}getTargetAction(){let e="";if(this.targetParent.hasLayout()&&this.targetParent.isLayout(Ae.FLEX))switch(this.targetParent.flexDirection){case Zt.ROW:this.targetRelativeMousePoint.xc<4),a=Rt(i),n=Gl.RECT/this.$context.viewport.scale,o=r==null?void 0:r.filter(l=>hc(l.originVerties,i)).filter(l=>{const c=cc(l.originRect,a);return Math.floor(c.width)>n&&Math.floor(c.height)>n});if(o!=null&&o.length){const l=o.map(g=>g.column),c=o.map(g=>g.row),h=Math.min(...l),u=Math.min(...c),d=Math.max(...l)+1,v=Math.max(...c)+1;this.$commands.executeCommand("setAttribute","change grid item",this.$context.selection.packByValue({"grid-column-start":h,"grid-column-end":d,"grid-row-start":u,"grid-row-end":v})),t.current.hasChild(e.id)===!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,t.current,void 0);return}else this.targetItem&&(this.emit("refreshGridToolInfo",this.targetItem),this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,void 0))}updateLayer(){var r;const e=this.$context.selection.current;if(!e)return;const t=this.getDist();if(!(t[0]===0&&t[1]===0)&&!(this.targetItem&&this.targetItem.id===(e==null?void 0:e.id))){if(!this.targetItem){this.insertToBackground();return}if(this.targetItem.hasLayout()){const i=this.$context.keyboardManager.isCtrl();if(((r=this.targetItem)==null?void 0:r.hasChildren())===!1&&this.targetItem.isLayout(Ae.FLEX)&&i===!1){this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t);return}else if(i){const{info:a}=this.$context.selection.gridInformation||{items:[]};if(a!=null&&a.current){this.insertToGridItem();return}}else if(this.targetItem.isLayout(Ae.GRID)){this.insertToGridItem();return}}if(this.targetParent){this.insertToLayoutItem();return}e.isLayoutItem()&&e.parent.id!==this.targetItem.id&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t)}}[M("endGhostToolView")](e=!1){e&&this.updateLayer(),this.initializeGhostView(),this.load()}}var XF="",Uj={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const Wj=class extends Y{checkViewMode(){return this.$modeView.isCurrentMode(Wi.CanvasView)}[M(Oe,Xi)+fe("checkViewMode")](){this.$context.selection.isMany?this.initSelectionTool():this.hide()}[M(st)+fe("checkViewMode")](){this.$context.selection.isMany&&this.initSelectionTool()}};class Xj extends Wj{template(){return` - `}toggleEditingPath(e){this.refs.$selectionView.toggleClass("editing-path",e)}[qe("$pointerRect .rotate-pointer")+at("rotateVertex")+lt("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.verties=this.groupItem.verties,this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!1,this.state.isRotate=!0,this.$config.set("set.move.control.point",!0)}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=ft([],e,this.initMousePoint),i=this.rotateTargetNumber===4?au(this.verties,34):this.verties[this.rotateTargetNumber];var r=Math.floor(Xf(i,this.verties[4],t));this.$config.get("bodyEvent").shiftKey&&(r=r-r%this.$config.get("fixed.angle")),this.localAngle=this.angle+r,this.groupItem.reset({angle:this.localAngle});const s=cr(r,this.verties[4]);let a=this.$context.selection.cachedItemMatrices;this.$context.selection.length===1&&(a=a.filter(o=>o.id===this.$context.selection.current.id)),a.forEach(o=>{const l=Xe(o.verties,qi([],o.parentMatrixInverse,s)),c=au(l,34);var h=fl(c[0]-l[4][0],c[1]-l[4][1])-270;const d=Kt([],l[0],cr(-h,l[4])),u=this.$model.get(o.id);u&&u.reset({x:d[0],y:d[1],angle:h})}),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height","angle")),this.renderPointers()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$commands.executeCommand("setAttribute","rotate selection pointer",this.$context.selection.pack("x","y","width","height","angle"))})}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const i=t.split(",").map(o=>Number(o)),r=ft([],i,this.state.renderPointerList[0][4]),s=li(r[0],r[1]);let a=Math.floor(s);this.$commands.emit("refreshCursor","direction",`rotate(${a} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[Ic("$pointerRect .rotate-pointer")+Qe("checkPointerIsNotMoved")+St](e){this.refreshRotatePointerIcon(e)}[Ic("$pointerRect .pointer")+Qe("checkPointerIsNotMoved")+St](e){this.refreshPointerIcon(e)}[Lc("$pointerRect .pointer,.rotate-pointer")+Qe("checkPointerIsNotMoved")+St](){this.$commands.emit("recoverCursor")}[qe("$pointerRect .pointer")+St+at("moveVertex")+lt("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number");this.state.moveType=ZU[`${t}`],this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.state.dragging=!1,this.initMatrix(!0),this.cachedGroupItem=this.groupItem.matrix,this.$config.set("set.move.control.point",!0),this.$context.selection.startToCacheChildren()}calculateNewOffsetMatrixInverse(e,t,i,r,s){const a=_t([],Sn.scale(r,t,i),Tr([],e));return fa(Si([],e),Si([],a),s,Si([],Tr([],a)))}calculateDistance(e,t,i){const r=vr(e),s=this.$context.snapManager.check([_t([],r,t)],3/this.$viewport.scale),a=_t([],r,_t([],t,s.dist));var o=Kt([],r,i),l=Kt([],a,i);return la([],ft([],l,o))}calculateRealDist(e,t,i){return this.calculateDistance(e.verties[t],i,e.absoluteMatrixInverse)}moveGroupItem(e,t,i){this.groupItem.reset({x:e[0]+(t<0?t:0),y:e[1]+(i<0?i:0),width:Math.abs(t),height:Math.abs(i)})}moveItemForGroup(e,t,i=0,r=0){const s=fa(Si([],t[4]),e.itemMatrix,Si([],Tr([],t[4]))),[a,o]=Kt([],t[0],s),l=yr(t[0],t[1]),c=yr(t[0],t[3]),h=this.$model.get(e.id);h&&h.reset({x:a+i,y:o+r,width:Math.max(Math.abs(l),1),height:Math.max(Math.abs(c),1)})}recoverItemForGroup(e,t,i,r=0,s=0){const a=e.absoluteMatrix,o=e.absoluteMatrixInverse;this.$context.selection.cachedItemMatrices.forEach(l=>{const c=Or(l.parentMatrixInverse,a,Si([],[r,s,0]),jn([],[t,i,1]),o),h=Xe(l.verties,c);this.moveItemForGroup(l,h)})}moveBottomRightVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,2,e);this.$config.get("bodyEvent").shiftKey&&(r=i*t.height/t.width);const s=t.width+i,a=t.height+r;this.moveDirectionVertex(t,0,0,s,a,"to top left",[0,0,0])}moveTopRightVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,1,e);this.$config.get("bodyEvent").shiftKey&&(r=-(i*t.height/t.width));const s=t.width+i,a=t.height-r;this.moveDirectionVertex(t,0,r,s,a,"to bottom left",[0,a,0])}moveDirectionVertex(e,t,i,r,s,a,o){const l=r/e.width,c=s/e.height;if(l>=0&&c>=0){const h=Or(e.directionMatrix[a],this.calculateNewOffsetMatrixInverse(o,r,s,e.originalTransformOrigin,e.itemMatrix)),d=aa([],h);this.moveGroupItem(d,r,s),this.recoverItemForGroup(e,l,c,t,i)}}moveTopVertex(e){const t=this.cachedGroupItem,[,i]=this.calculateRealDist(t,0,e),r=t.width,s=t.height-i;this.moveDirectionVertex(t,0,i,r,s,"to bottom",[r/2,s,0])}moveBottomVertex(e){const t=this.cachedGroupItem,[,i]=this.calculateRealDist(t,2,e),r=t.width,s=t.height+i;this.moveDirectionVertex(t,0,0,r,s,"to top",[r/2,0,0])}moveTopLeftVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,0,e);this.$config.get("bodyEvent").shiftKey&&(r=i*t.height/t.width);const s=t.width-i,a=t.height-r;this.moveDirectionVertex(t,i,r,s,a,"to bottom right",[s,a,0])}moveLeftVertex(e){const t=this.cachedGroupItem,[i]=this.calculateRealDist(t,0,e),r=t.width-i,s=t.height;this.moveDirectionVertex(t,i,0,r,s,"to right",[r,s/2,0])}moveRightVertex(e){const t=this.cachedGroupItem,[i]=this.calculateRealDist(t,2,e),r=t.width+i,s=t.height;this.moveDirectionVertex(t,0,0,r,s,"to left",[0,s/2,0])}moveBottomLeftVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,3,e);this.$config.get("bodyEvent").shiftKey&&(r=-(i*t.height/t.width));const s=t.width-i,a=t.height+r;this.moveDirectionVertex(t,i,0,s,a,"to top right",[s,0,0])}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Gn([],ft([],e,this.initMousePoint));this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to bottom left"?this.moveBottomLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"&&this.moveBottomVertex(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height")),this.renderPointers(),this.state.dragging=!0}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","width","height")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.state.show&&(this.$el.hide(),this.state.show=!1)}initSelectionTool(){this.$el.isHide()&&this.$context.selection.isMany?this.show():this.$el.isShow()&&this.$context.selection.isMany===!1&&this.hide(),this.initMatrix(),this.makeSelectionTool()}get item(){const e=this.verties||Ei(0,0,0,0);return this.state.groupSelectionView||(this.state.groupSelectionView=this.$editor.createModel({itemType:"artboard"},!1)),this.state.groupSelectionView.reset({parentId:this.$context.selection.currentProject.id,x:e[0][0],y:e[0][1],width:Ne(e[0],e[1]),height:Ne(e[0],e[3])}),this.state.groupSelectionView}initMatrix(){this.$context.selection.isMany&&this.state.dragging===!1&&(this.verties=rt(this.$context.selection.verties),this.angle=0,this.localAngle=this.angle,this.groupItem=this.item,this.cachedGroupItem=this.item.matrix)}makeSelectionTool(){this.renderPointers()}renderPointers(){if(this.$context.selection.isEmpty){this.refs.$pointerRect.empty();return}this.state.renderPointerList=[this.$viewport.applyVerties(this.$context.selection.verties)];const{line:e,point:t,size:i,elementLine:r}=this.createRenderPointers(this.state.renderPointerList[0]);this.refs.$pointerRect.updateDiff(e+r+t+i)}createPointer(e,t,i){return` + `}toggleEditingPath(e){this.refs.$selectionView.toggleClass("editing-path",e)}[me("$pointerRect .rotate-pointer")+xe("rotateVertex")+Se("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.verties=this.groupItem.verties,this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!1,this.state.isRotate=!0,this.$config.set("set.move.control.point",!0)}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=_e([],e,this.initMousePoint),r=this.rotateTargetNumber===4?Mo(this.verties,34):this.verties[this.rotateTargetNumber];var i=Math.floor(rc(r,this.verties[4],t));this.$config.get("bodyEvent").shiftKey&&(i=i-i%this.$config.get("fixed.angle")),this.localAngle=this.angle+i,this.groupItem.reset({angle:this.localAngle});const a=Ut(i,this.verties[4]);let n=this.$context.selection.cachedItemMatrices;this.$context.selection.length===1&&(n=n.filter(o=>o.id===this.$context.selection.current.id)),n.forEach(o=>{const l=le(o.verties,Ot([],o.parentMatrixInverse,a)),c=Mo(l,34);var h=oa(c[0]-l[4][0],c[1]-l[4][1])-270;const u=Ze([],l[0],Ut(-h,l[4])),d=this.$model.get(o.id);d&&d.reset({x:u[0],y:u[1],angle:h})}),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height","angle")),this.renderPointers()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$commands.executeCommand("setAttribute","rotate selection pointer",this.$context.selection.pack("x","y","width","height","angle"))})}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const r=t.split(",").map(o=>Number(o)),i=_e([],r,this.state.renderPointerList[0][4]),a=ot(i[0],i[1]);let n=Math.floor(a);this.$commands.emit("refreshCursor","direction",`rotate(${n} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[za("$pointerRect .rotate-pointer")+fe("checkPointerIsNotMoved")+Ve](e){this.refreshRotatePointerIcon(e)}[za("$pointerRect .pointer")+fe("checkPointerIsNotMoved")+Ve](e){this.refreshPointerIcon(e)}[Aa("$pointerRect .pointer,.rotate-pointer")+fe("checkPointerIsNotMoved")+Ve](){this.$commands.emit("recoverCursor")}[me("$pointerRect .pointer")+Ve+xe("moveVertex")+Se("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number");this.state.moveType=Uj[`${t}`],this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.state.dragging=!1,this.initMatrix(!0),this.cachedGroupItem=this.groupItem.matrix,this.$config.set("set.move.control.point",!0),this.$context.selection.startToCacheChildren()}calculateNewOffsetMatrixInverse(e,t,r,i,a){const n=we([],Vr.scale(i,t,r),tr([],e));return Ki(mt([],e),mt([],n),a,mt([],tr([],n)))}calculateDistance(e,t,r){const i=Yt(e),a=this.$context.snapManager.check([we([],i,t)],3/this.$viewport.scale),n=we([],i,we([],t,a.dist));var o=Ze([],i,r),l=Ze([],n,r);return Hi([],_e([],l,o))}calculateRealDist(e,t,r){return this.calculateDistance(e.verties[t],r,e.absoluteMatrixInverse)}moveGroupItem(e,t,r){this.groupItem.reset({x:e[0]+(t<0?t:0),y:e[1]+(r<0?r:0),width:Math.abs(t),height:Math.abs(r)})}moveItemForGroup(e,t,r=0,i=0){const a=Ki(mt([],t[4]),e.itemMatrix,mt([],tr([],t[4]))),[n,o]=Ze([],t[0],a),l=Kt(t[0],t[1]),c=Kt(t[0],t[3]),h=this.$model.get(e.id);h&&h.reset({x:n+r,y:o+i,width:Math.max(Math.abs(l),1),height:Math.max(Math.abs(c),1)})}recoverItemForGroup(e,t,r,i=0,a=0){const n=e.absoluteMatrix,o=e.absoluteMatrixInverse;this.$context.selection.cachedItemMatrices.forEach(l=>{const c=ar(l.parentMatrixInverse,n,mt([],[i,a,0]),Kr([],[t,r,1]),o),h=le(l.verties,c);this.moveItemForGroup(l,h)})}moveBottomRightVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,2,e);this.$config.get("bodyEvent").shiftKey&&(i=r*t.height/t.width);const a=t.width+r,n=t.height+i;this.moveDirectionVertex(t,0,0,a,n,"to top left",[0,0,0])}moveTopRightVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,1,e);this.$config.get("bodyEvent").shiftKey&&(i=-(r*t.height/t.width));const a=t.width+r,n=t.height-i;this.moveDirectionVertex(t,0,i,a,n,"to bottom left",[0,n,0])}moveDirectionVertex(e,t,r,i,a,n,o){const l=i/e.width,c=a/e.height;if(l>=0&&c>=0){const h=ar(e.directionMatrix[n],this.calculateNewOffsetMatrixInverse(o,i,a,e.originalTransformOrigin,e.itemMatrix)),u=Ni([],h);this.moveGroupItem(u,i,a),this.recoverItemForGroup(e,l,c,t,r)}}moveTopVertex(e){const t=this.cachedGroupItem,[,r]=this.calculateRealDist(t,0,e),i=t.width,a=t.height-r;this.moveDirectionVertex(t,0,r,i,a,"to bottom",[i/2,a,0])}moveBottomVertex(e){const t=this.cachedGroupItem,[,r]=this.calculateRealDist(t,2,e),i=t.width,a=t.height+r;this.moveDirectionVertex(t,0,0,i,a,"to top",[i/2,0,0])}moveTopLeftVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,0,e);this.$config.get("bodyEvent").shiftKey&&(i=r*t.height/t.width);const a=t.width-r,n=t.height-i;this.moveDirectionVertex(t,r,i,a,n,"to bottom right",[a,n,0])}moveLeftVertex(e){const t=this.cachedGroupItem,[r]=this.calculateRealDist(t,0,e),i=t.width-r,a=t.height;this.moveDirectionVertex(t,r,0,i,a,"to right",[i,a/2,0])}moveRightVertex(e){const t=this.cachedGroupItem,[r]=this.calculateRealDist(t,2,e),i=t.width+r,a=t.height;this.moveDirectionVertex(t,0,0,i,a,"to left",[0,a/2,0])}moveBottomLeftVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,3,e);this.$config.get("bodyEvent").shiftKey&&(i=-(r*t.height/t.width));const a=t.width-r,n=t.height+i;this.moveDirectionVertex(t,r,0,a,n,"to top right",[a,0,0])}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Zr([],_e([],e,this.initMousePoint));this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to bottom left"?this.moveBottomLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"&&this.moveBottomVertex(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height")),this.renderPointers(),this.state.dragging=!0}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","width","height")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.state.show&&(this.$el.hide(),this.state.show=!1)}initSelectionTool(){this.$el.isHide()&&this.$context.selection.isMany?this.show():this.$el.isShow()&&this.$context.selection.isMany===!1&&this.hide(),this.initMatrix(),this.makeSelectionTool()}get item(){const e=this.verties||xt(0,0,0,0);return this.state.groupSelectionView||(this.state.groupSelectionView=this.$editor.createModel({itemType:"artboard"},!1)),this.state.groupSelectionView.reset({parentId:this.$context.selection.currentProject.id,x:e[0][0],y:e[0][1],width:ae(e[0],e[1]),height:ae(e[0],e[3])}),this.state.groupSelectionView}initMatrix(){this.$context.selection.isMany&&this.state.dragging===!1&&(this.verties=be(this.$context.selection.verties),this.angle=0,this.localAngle=this.angle,this.groupItem=this.item,this.cachedGroupItem=this.item.matrix)}makeSelectionTool(){this.renderPointers()}renderPointers(){if(this.$context.selection.isEmpty){this.refs.$pointerRect.empty();return}this.state.renderPointerList=[this.$viewport.applyVerties(this.$context.selection.verties)];const{line:e,point:t,size:r,elementLine:i}=this.createRenderPointers(this.state.renderPointerList[0]);this.refs.$pointerRect.updateDiff(e+i+t+r)}createPointer(e,t,r){return`
      - `}createPointerSide(e,t,i,r,s){return` -
      + `}createPointerSide(e,t,r,i,a){return` +
      `}createRotatePointer(e,t){return e.length===0?"":t<4?`
      `:`
      - `}createPointerRect(e,t){if(e.length===0)return"";const i=Ae([],e[0],e[1],.5),r=` - M ${i[0]},${i[1]} + `}createPointerRect(e,t){if(e.length===0)return"";const r=te([],e[0],e[1],.5),i=` + M ${r[0]},${r[1]} L ${t[0]}, ${t[1]} `;return` @@ -2788,7 +2744,7 @@ ${t} L ${e[2][0]}, ${e[2][1]} L ${e[3][0]}, ${e[3][1]} L ${e[0][0]}, ${e[0][1]} - ${r} + ${i} Z " /> `}createLine(e){return` @@ -2798,20 +2754,20 @@ ${t} L ${e[3][0]}, ${e[3][1]} L ${e[0][0]}, ${e[0][1]} Z - `}createSize(e){const t=Ae([],e[0],e[1],.5),i=Ae([],e[1],e[2],.5),r=Ae([],e[2],e[3],.5),s=Ae([],e[3],e[0],.5),a=this.$viewport.applyVertiesInverse(e),o=Ne(a[0],a[1]),l=Ne(a[0],a[3]),c=[{start:t,end:r},{start:i,end:s},{start:r,end:t},{start:s,end:i}].map((g,m)=>({index:m,data:g}));c.sort((g,m)=>g.data.start[1]>m.data.start[1]?-1:1);const h=c[0],d=Ae([],h.data.end,h.data.start,1+16/Ne(h.data.start,h.data.end)),u=ft([],h.data.start,h.data.end),p=li(u[0],u[1])+90;let f=`${Bt(o,100)} x ${Bt(l,100)}`;if(this.state.isRotate){const g=this.groupItem.angle;g&&(f=`${g}\xB0`)}return`
      ${f}
      `}createRenderPointers(e){const t=ft([],Ae([],e[0],e[1],.5),Ae([],e[0],e[2],.5)),i=y.deg(li(t[0],t[1])-90).round(1e3),r=au(e,30),s=Ne(e[0],e[2]),a=Ne(e[0],e[1]),o=Ne(e[0],e[3]);return{line:this.createPointerRect(e,r),elementLine:` + `}createSize(e){const t=te([],e[0],e[1],.5),r=te([],e[1],e[2],.5),i=te([],e[2],e[3],.5),a=te([],e[3],e[0],.5),n=this.$viewport.applyVertiesInverse(e),o=ae(n[0],n[1]),l=ae(n[0],n[3]),c=[{start:t,end:i},{start:r,end:a},{start:i,end:t},{start:a,end:r}].map((y,P)=>({index:P,data:y}));c.sort((y,P)=>y.data.start[1]>P.data.start[1]?-1:1);const h=c[0],u=te([],h.data.end,h.data.start,1+16/ae(h.data.start,h.data.end)),d=_e([],h.data.start,h.data.end),v=ot(d[0],d[1])+90;let g=`${Ue(o,100)} x ${Ue(l,100)}`;if(this.state.isRotate){const y=this.groupItem.angle;y&&(g=`${y}\xB0`)}return`
      ${g}
      `}createRenderPointers(e){const t=_e([],te([],e[0],e[1],.5),te([],e[0],e[2],.5)),r=p.deg(ot(t[0],t[1])-90).round(1e3),i=Mo(e,30),a=ae(e[0],e[2]),n=ae(e[0],e[1]),o=ae(e[0],e[3]);return{line:this.createPointerRect(e,i),elementLine:` - `,size:this.createSize(e),point:[this.createRotatePointer(r,4,"center center"),s<20?void 0:this.createPointerSide(Ae([],e[0],e[1],.5),11,i,a,5),s<20?void 0:this.createPointerSide(Ae([],e[1],e[2],.5),12,i,5,o),s<20?void 0:this.createPointerSide(Ae([],e[2],e[3],.5),13,i,a,5),s<20?void 0:this.createPointerSide(Ae([],e[3],e[0],.5),14,i,5,o),this.createPointer(e[0],1,i),this.createPointer(e[1],2,i),this.createPointer(e[2],3,i),this.createPointer(e[3],4,i)].join("")}}checkShow(){return!!(this.state.show&&this.$context.selection.isMany)}[U("hideSelectionToolView")](){this.hide()}}var eW={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const tW=class extends ge{checkViewMode(){return this.$modeView.isCurrentMode(ha.CanvasView)}[U(kt,da)+Qe("checkViewMode")](){this.initSelectionTool()}[U(si)+Qe("checkViewMode")](){this.$context.selection.isOne?this.initSelectionTool():this.hide()}[U("updateModeView")](){this.checkViewMode()?this.initSelectionTool():this.hide()}};class iW extends tW{template(){return` + `,size:this.createSize(e),point:[this.createRotatePointer(i,4,"center center"),a<20?void 0:this.createPointerSide(te([],e[0],e[1],.5),11,r,n,5),a<20?void 0:this.createPointerSide(te([],e[1],e[2],.5),12,r,5,o),a<20?void 0:this.createPointerSide(te([],e[2],e[3],.5),13,r,n,5),a<20?void 0:this.createPointerSide(te([],e[3],e[0],.5),14,r,5,o),this.createPointer(e[0],1,r),this.createPointer(e[1],2,r),this.createPointer(e[2],3,r),this.createPointer(e[3],4,r)].join("")}}checkShow(){return!!(this.state.show&&this.$context.selection.isMany)}[M("hideSelectionToolView")](){this.hide()}}var Yj={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const Kj=class extends Y{checkViewMode(){return this.$modeView.isCurrentMode(Wi.CanvasView)}[M(Oe,Xi)+fe("checkViewMode")](){this.initSelectionTool()}[M(st)+fe("checkViewMode")](){this.$context.selection.isOne?this.initSelectionTool():this.hide()}[M("updateModeView")](){this.checkViewMode()?this.initSelectionTool():this.hide()}};class Zj extends Kj{template(){return` - `}toggleEditingPath(e){this.$el.toggleClass("editing-path",e)}[qe("$pointerRect .rotate-pointer")+at("rotateVertex")+lt("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.verties=rt(this.$context.selection.verties),this.$context.snapManager.clear(),this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!0,this.state.isRotate=!0,this.initAngle=this.$context.selection.current.angle}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=ft([],e,this.initMousePoint),i=this.rotateTargetNumber===4?au(this.verties,34):this.verties[this.rotateTargetNumber];var r=Math.floor(Xf(i,this.verties[4],t));const s=this.$context.selection.current;let a=this.initAngle+r;s&&(this.$config.get("bodyEvent").shiftKey&&(a-=a%this.$config.get("fixed.angle")),s.angle=Bt(a%360,100)),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("angle")),this.makeSelectionTool()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.verties=null,this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.pack("angle"))}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const i=t.split(",").map(o=>Number(o)),r=ft([],i,this.state.renderPointerList[0][4]),s=li(r[0],r[1]);let a=Math.floor(s);this.$commands.emit("refreshCursor","direction",`rotate(${a} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[Ic("$pointerRect .rotate-pointer")+Qe("checkPointerIsNotMoved")](e){this.refreshRotatePointerIcon(e)}[Ic("$pointerRect .pointer")+Qe("checkPointerIsNotMoved")](e){this.refreshPointerIcon(e)}[Lc("$pointerRect .pointer,.rotate-pointer")+Qe("checkPointerIsNotMoved")](){this.$commands.emit("recoverCursor")}[qe("$pointerRect .pointer")+at("moveVertex")+lt("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number"),i=eW[`${t}`];this.initMousePoint=this.$viewport.getWorldPosition(e),this.state.moveType=i,this.state.moveTarget=t,this.$context.snapManager.clear(),this.verties=this.$context.selection.verties,this.hasRotate=this.$context.selection.current.angle!==0,this.cachedCurrentItemMatrix=this.$context.selection.current.matrix,this.$context.selection.startToCacheChildren()}calculateDistance(e,t,i){const r=vr(e),s=_t([],r,t),a=this.$context.snapManager.check([s],5/this.$viewport.scale),o=_t([],s,a.dist),[l,c]=Xe([r,o],i);return ft([],c,l)}calculateRealDist(e,t,i){return this.calculateDistance(e.verties[t],i,e.absoluteMatrixInverse)}moveItem(e,t,i,r,s={}){if(e){let a={x:t[0]+(i<0?i:0),y:t[1]+(r<0?r:0),width:Math.max(Math.abs(i),1),height:Math.max(Math.abs(r),1)};e.isInFlex()?(delete a.x,delete a.y):e.isInGrid(),this.hasRotate||(a=FA(a),a.width=Math.max(a.width,1),a.height=Math.max(a.height,1)),e.reset(P(P({},a),s))}}moveDirectionVertex(e,t,i,r,s,a={}){const o=ft([],Sn.scale(e.originalTransformOrigin,t,i),s),l=fa(Si([],s),Si([],o),e.itemMatrix,Si([],Tr([],o))),c=Or(e.directionMatrix[r],l),h=aa([],c);this.moveItem(this.$model.get(e.id),h,t,i,a)}moveBottomRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,2,e),l=Ct(0,0,0);i&&(a=a*2,o=o*2),t&&(o=a*s.height/s.width);const c=s.width+a,h=r?c:s.height+o;i&&(l=Ct(a/2,o/2,0)),this.moveDirectionVertex(s,c,h,"to top left",l,{resizingVertical:wt.FIXED,resizingHorizontal:wt.FIXED}),this.updateGridArea(s)}}moveTopRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,1,e);i&&(a=a*2,o=o*2),t&&(o=-(a*s.height/s.width));const l=s.width+a,c=r?l:s.height-o;let h=Ct(0,c,0);i&&(h=Ct(a/2,c+o/2,0)),this.moveDirectionVertex(s,l,c,"to bottom left",h,{resizingVertical:wt.FIXED,resizingHorizontal:wt.FIXED}),this.updateGridArea(s)}}moveTopLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,0,e);i&&(a=a*2,o=o*2),t&&(o=a*s.height/s.width);const l=s.width-a,c=r?l:s.height-o;let h=Ct(l,c,0);i&&(h=Ct(l+a/2,c+o/2,0)),this.moveDirectionVertex(s,l,c,"to bottom right",h,{resizingHorizontal:wt.FIXED,resizingVertical:wt.FIXED}),this.updateGridArea(s)}}moveTopVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),i=this.cachedCurrentItemMatrix;if(i){let[,r]=this.calculateRealDist(i,0,e);t&&(r=r*2);const s=i.width,a=i.height-r;let o=Ct(s/2,a,0);t&&(o=Ct(s/2,a+r/2,0)),this.moveDirectionVertex(i,s,a,"to bottom",o,{resizingVertical:wt.FIXED}),this.updateGridArea(i)}}moveBottomVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),i=this.cachedCurrentItemMatrix;if(i){let[,r]=this.calculateRealDist(i,3,e);t&&(r=r*2);const s=i.width,a=i.height+r;let o=Ct(s/2,0,0);t&&(o=Ct(s/2,r/2,0)),this.moveDirectionVertex(i,s,a,"to top",o,{resizingVertical:wt.FIXED}),this.updateGridArea(i)}}moveRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a]=this.calculateRealDist(s,1,e);i&&(a=a*2);const o=s.width+a;let l=s.height;r?l=o:t&&(l=s.height*(1+a/s.width));let c=Ct(0,l/2,0);i&&(c=Ct(a/2,l/2,0)),this.moveDirectionVertex(s,o,l,"to left",c,{resizingHorizontal:wt.FIXED}),this.updateGridArea(s)}}moveLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a]=this.calculateRealDist(s,0,e);i&&(a=a*2);const o=s.width-a;let l=s.height;r?l=o:t&&(l=s.height*(1-a/s.width));let c=Ct(o,l/2,0);i&&(c=Ct(o+a/2,l/2,0)),this.moveDirectionVertex(s,o,l,"to right",c,{resizingHorizontal:wt.FIXED}),this.updateGridArea(s)}}moveBottomLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,3,e);i&&(a=a*2,o=o*2),t&&(o=-(a*s.height/s.width));const l=s.width-a,c=r?l:s.height+o;let h=Ct(l,0,0);i&&(h=Ct(l+a/2,o/2,0)),this.moveDirectionVertex(s,l,c,"to top right",h,{resizingVertical:wt.FIXED,resizingHorizontal:wt.FIXED}),this.updateGridArea(s)}}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Gn([],ft([],e,this.initMousePoint));this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"?this.moveBottomVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to bottom left"&&this.moveBottomLeftVertex(t),this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.state.dragging=!0,this.makeSelectionTool()}updateGridArea(){return W1.updateGridArea(this.$context.selection.current,this.$context.selection.gridInformation,this.$context.viewport.scale)}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$context.selection.reselect(),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.$el.hide(),this.state.show=!1}initSelectionTool(){this.$el.isShow()&&this.$context.selection.isOne===!1?this.hide():this.$el.isHide()&&this.$context.selection.isOne&&this.show(),this.makeSelectionTool()}makeSelectionTool(){this.renderPointers()}getRateDistance(e,t,i=0){return Ae([],e,t,(Ne(e,t)+i)/Ne(e,t))}renderPointers(){if(this.$context.selection.isEmpty||this.$config.true("set.move.control.point")){this.refs.$pointerRect.empty();return}const e=this.$context.selection.verties;if(Ne(e[0],e[1])===0)return;const t=this.$viewport.applyVerties(e).map(r=>la([],r));this.state.renderPointerList=[t,[this.getRateDistance(t[4],t[0],20),this.getRateDistance(t[4],t[1],20),this.getRateDistance(t[4],t[2],20),this.getRateDistance(t[4],t[3],20)]];const i=this.createRenderPointers(...this.state.renderPointerList);if(i){const{line:r,parentRect:s,point:a,size:o,visiblePath:l}=i;this.refs.$pointerRect.updateDiff(r+s+a+o+l)}}createPointer(e,t,i){return`
      `}createPointerSide(e,t,i,r,s){return`
      `}createRotatePointer(e,t){return e.length===0?"":t<4?`
      `:`
      `}createPointerRect(e,t=void 0){if(e.length===0)return"";const i=this.$context.selection.current,r=i&&i.is("artboard");let s="";if(!r&&t){const a=Ae([],e[0],e[1],.5);s+=` - M ${a[0]},${a[1]} + `}toggleEditingPath(e){this.$el.toggleClass("editing-path",e)}[me("$pointerRect .rotate-pointer")+xe("rotateVertex")+Se("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.verties=be(this.$context.selection.verties),this.$context.snapManager.clear(),this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!0,this.state.isRotate=!0,this.initAngle=this.$context.selection.current.angle}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=_e([],e,this.initMousePoint),r=this.rotateTargetNumber===4?Mo(this.verties,34):this.verties[this.rotateTargetNumber];var i=Math.floor(rc(r,this.verties[4],t));const a=this.$context.selection.current;let n=this.initAngle+i;a&&(this.$config.get("bodyEvent").shiftKey&&(n-=n%this.$config.get("fixed.angle")),a.angle=Ue(n%360,100)),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("angle")),this.makeSelectionTool()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.verties=null,this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.pack("angle"))}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const r=t.split(",").map(o=>Number(o)),i=_e([],r,this.state.renderPointerList[0][4]),a=ot(i[0],i[1]);let n=Math.floor(a);this.$commands.emit("refreshCursor","direction",`rotate(${n} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[za("$pointerRect .rotate-pointer")+fe("checkPointerIsNotMoved")](e){this.refreshRotatePointerIcon(e)}[za("$pointerRect .pointer")+fe("checkPointerIsNotMoved")](e){this.refreshPointerIcon(e)}[Aa("$pointerRect .pointer,.rotate-pointer")+fe("checkPointerIsNotMoved")](){this.$commands.emit("recoverCursor")}[me("$pointerRect .pointer")+xe("moveVertex")+Se("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number"),r=Yj[`${t}`];this.initMousePoint=this.$viewport.getWorldPosition(e),this.state.moveType=r,this.state.moveTarget=t,this.$context.snapManager.clear(),this.verties=this.$context.selection.verties,this.hasRotate=this.$context.selection.current.angle!==0,this.cachedCurrentItemMatrix=this.$context.selection.current.matrix,this.$context.selection.startToCacheChildren()}calculateDistance(e,t,r){const i=Yt(e),a=we([],i,t),n=this.$context.snapManager.check([a],5/this.$viewport.scale),o=we([],a,n.dist),[l,c]=le([i,o],r);return _e([],c,l)}calculateRealDist(e,t,r){return this.calculateDistance(e.verties[t],r,e.absoluteMatrixInverse)}moveItem(e,t,r,i,a={}){if(e){let n={x:t[0]+(r<0?r:0),y:t[1]+(i<0?i:0),width:Math.max(Math.abs(r),1),height:Math.max(Math.abs(i),1)};e.isInFlex()?(delete n.x,delete n.y):e.isInGrid(),this.hasRotate||(n=fw(n),n.width=Math.max(n.width,1),n.height=Math.max(n.height,1)),e.reset(b(b({},n),a))}}moveDirectionVertex(e,t,r,i,a,n={}){const o=_e([],Vr.scale(e.originalTransformOrigin,t,r),a),l=Ki(mt([],a),mt([],o),e.itemMatrix,mt([],tr([],o))),c=ar(e.directionMatrix[i],l),h=Ni([],c);this.moveItem(this.$model.get(e.id),h,t,r,n)}moveBottomRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,2,e),l=Ie(0,0,0);r&&(n=n*2,o=o*2),t&&(o=n*a.height/a.width);const c=a.width+n,h=i?c:a.height+o;r&&(l=Ie(n/2,o/2,0)),this.moveDirectionVertex(a,c,h,"to top left",l,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveTopRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,1,e);r&&(n=n*2,o=o*2),t&&(o=-(n*a.height/a.width));const l=a.width+n,c=i?l:a.height-o;let h=Ie(0,c,0);r&&(h=Ie(n/2,c+o/2,0)),this.moveDirectionVertex(a,l,c,"to bottom left",h,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveTopLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,0,e);r&&(n=n*2,o=o*2),t&&(o=n*a.height/a.width);const l=a.width-n,c=i?l:a.height-o;let h=Ie(l,c,0);r&&(h=Ie(l+n/2,c+o/2,0)),this.moveDirectionVertex(a,l,c,"to bottom right",h,{resizingHorizontal:Ce.FIXED,resizingVertical:Ce.FIXED}),this.updateGridArea(a)}}moveTopVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),r=this.cachedCurrentItemMatrix;if(r){let[,i]=this.calculateRealDist(r,0,e);t&&(i=i*2);const a=r.width,n=r.height-i;let o=Ie(a/2,n,0);t&&(o=Ie(a/2,n+i/2,0)),this.moveDirectionVertex(r,a,n,"to bottom",o,{resizingVertical:Ce.FIXED}),this.updateGridArea(r)}}moveBottomVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),r=this.cachedCurrentItemMatrix;if(r){let[,i]=this.calculateRealDist(r,3,e);t&&(i=i*2);const a=r.width,n=r.height+i;let o=Ie(a/2,0,0);t&&(o=Ie(a/2,i/2,0)),this.moveDirectionVertex(r,a,n,"to top",o,{resizingVertical:Ce.FIXED}),this.updateGridArea(r)}}moveRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n]=this.calculateRealDist(a,1,e);r&&(n=n*2);const o=a.width+n;let l=a.height;i?l=o:t&&(l=a.height*(1+n/a.width));let c=Ie(0,l/2,0);r&&(c=Ie(n/2,l/2,0)),this.moveDirectionVertex(a,o,l,"to left",c,{resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n]=this.calculateRealDist(a,0,e);r&&(n=n*2);const o=a.width-n;let l=a.height;i?l=o:t&&(l=a.height*(1-n/a.width));let c=Ie(o,l/2,0);r&&(c=Ie(o+n/2,l/2,0)),this.moveDirectionVertex(a,o,l,"to right",c,{resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveBottomLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,3,e);r&&(n=n*2,o=o*2),t&&(o=-(n*a.height/a.width));const l=a.width-n,c=i?l:a.height+o;let h=Ie(l,0,0);r&&(h=Ie(l+n/2,o/2,0)),this.moveDirectionVertex(a,l,c,"to top right",h,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Zr([],_e([],e,this.initMousePoint));this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"?this.moveBottomVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to bottom left"&&this.moveBottomLeftVertex(t),this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.state.dragging=!0,this.makeSelectionTool()}updateGridArea(){return Cp.updateGridArea(this.$context.selection.current,this.$context.selection.gridInformation,this.$context.viewport.scale)}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$context.selection.reselect(),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.$el.hide(),this.state.show=!1}initSelectionTool(){this.$el.isShow()&&this.$context.selection.isOne===!1?this.hide():this.$el.isHide()&&this.$context.selection.isOne&&this.show(),this.makeSelectionTool()}makeSelectionTool(){this.renderPointers()}getRateDistance(e,t,r=0){return te([],e,t,(ae(e,t)+r)/ae(e,t))}renderPointers(){if(this.$context.selection.isEmpty||this.$config.true("set.move.control.point")){this.refs.$pointerRect.empty();return}const e=this.$context.selection.verties;if(ae(e[0],e[1])===0)return;const t=this.$viewport.applyVerties(e).map(i=>Hi([],i));this.state.renderPointerList=[t,[this.getRateDistance(t[4],t[0],20),this.getRateDistance(t[4],t[1],20),this.getRateDistance(t[4],t[2],20),this.getRateDistance(t[4],t[3],20)]];const r=this.createRenderPointers(...this.state.renderPointerList);if(r){const{line:i,parentRect:a,point:n,size:o,visiblePath:l}=r;this.refs.$pointerRect.updateDiff(i+a+n+o+l)}}createPointer(e,t,r){return`
      `}createPointerSide(e,t,r,i,a){return`
      `}createRotatePointer(e,t){return e.length===0?"":t<4?`
      `:`
      `}createPointerRect(e,t=void 0){if(e.length===0)return"";const r=this.$context.selection.current,i=r&&r.is("artboard");let a="";if(!i&&t){const n=te([],e[0],e[1],.5);a+=` + M ${n[0]},${n[1]} L ${t[0]},${t[1]} - `}return` + `}return` `}createParentRect(e=[]){return e.length===0?"":` - `}createSize(e){const t=Ae([],e[0],e[1],.5),i=Ae([],e[1],e[2],.5),r=Ae([],e[2],e[3],.5),s=Ae([],e[3],e[0],.5),a=[{start:t,end:r},{start:i,end:s},{start:r,end:t},{start:s,end:i}].map((m,v)=>({index:v,data:m}));a.sort((m,v)=>m.data.start[1]>v.data.start[1]?-1:1);const o=a[0],l=Ae([],o.data.end,o.data.start,1+16/Ne(o.data.start,o.data.end)),c=this.$context.selection.current.width,h=this.$context.selection.current.height,d=ft([],o.data.start,o.data.end),u=li(d[0],d[1])+90,p=Bt(c,100),f=Bt(h,100);let g=p===f?`WH: ${p}`:`${Bt(c,100)} x ${Bt(h,100)}`;return this.state.isRotate&&(g=`${Bt(this.$context.selection.current.angle,100)}\xB0`),`
      ${g}
      `}createVisiblePath(){const e=this.$context.selection.current;if(!e||!e.isBooleanItem)return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` + `}createSize(e){const t=te([],e[0],e[1],.5),r=te([],e[1],e[2],.5),i=te([],e[2],e[3],.5),a=te([],e[3],e[0],.5),n=[{start:t,end:i},{start:r,end:a},{start:i,end:t},{start:a,end:r}].map((P,S)=>({index:S,data:P}));n.sort((P,S)=>P.data.start[1]>S.data.start[1]?-1:1);const o=n[0],l=te([],o.data.end,o.data.start,1+16/ae(o.data.start,o.data.end)),c=this.$context.selection.current.width,h=this.$context.selection.current.height,u=_e([],o.data.start,o.data.end),d=ot(u[0],u[1])+90,v=Ue(c,100),g=Ue(h,100);let y=v===g?`WH: ${v}`:`${Ue(c,100)} x ${Ue(h,100)}`;return this.state.isRotate&&(y=`${Ue(this.$context.selection.current.angle,100)}\xB0`),`
      ${y}
      `}createVisiblePath(){const e=this.$context.selection.current;if(!e||!e.isBooleanItem)return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` - `}removeNaN(e){return e.replace(/NaN/g,"0")}createRenderPointers(e,t){const i=this.$context.selection.current;if(i&&i.is("text")&&i.width===0&&i.height===0)return;const r=y.deg(i.nestedAngle).round(1e3),s=Ne(e[0],e[2]),a=Ne(e[0],e[1]),o=Ne(e[0],e[3]);return{line:this.createPointerRect(e),size:this.createSize(e),parentRect:"",visiblePath:this.createVisiblePath(),point:[this.createRotatePointer(t[0],0),this.createRotatePointer(t[1],1),this.createRotatePointer(t[2],2),this.createRotatePointer(t[3],3),s<20?void 0:this.createPointerSide(Ae([],e[0],e[1],.5),11,r,a,5),s<20?void 0:this.createPointerSide(Ae([],e[1],e[2],.5),12,r,5,o),s<20?void 0:this.createPointerSide(Ae([],e[2],e[3],.5),13,r,a,5),s<20?void 0:this.createPointerSide(Ae([],e[3],e[0],.5),14,r,5,o),this.createPointer(e[0],1,r),this.createPointer(e[1],2,r),this.createPointer(e[2],3,r),this.createPointer(e[3],4,r),this.createPointer(e[4],5,r)].join("")}}checkShow(){return this.$modeView.isCurrentMode(ha.CanvasView)===!1?!1:!!(this.state.show&&this.$context.selection.isOne)}[U("hideSelectionToolView")](){this.hide()}}async function Gb(n){n.registerUI("canvas.view",{GhostToolView:qU,SelectionToolView:iW,GroupSelectionToolView:QU},Af.SELECTION_TOOL)}var Zre="";class rW extends Tn{getTitle(){return this.$i18n("selector.popup.title")}initState(){return{selector:"",properties:[]}}updateData(e){this.setState(e,!1),this.emit("changeSelectorPopup",this.state)}getBody(){return` + `}removeNaN(e){return e.replace(/NaN/g,"0")}createRenderPointers(e,t){const r=this.$context.selection.current;if(r&&r.is("text")&&r.width===0&&r.height===0)return;const i=p.deg(r.nestedAngle).round(1e3),a=ae(e[0],e[2]),n=ae(e[0],e[1]),o=ae(e[0],e[3]);return{line:this.createPointerRect(e),size:this.createSize(e),parentRect:"",visiblePath:this.createVisiblePath(),point:[this.createRotatePointer(t[0],0),this.createRotatePointer(t[1],1),this.createRotatePointer(t[2],2),this.createRotatePointer(t[3],3),a<20?void 0:this.createPointerSide(te([],e[0],e[1],.5),11,i,n,5),a<20?void 0:this.createPointerSide(te([],e[1],e[2],.5),12,i,5,o),a<20?void 0:this.createPointerSide(te([],e[2],e[3],.5),13,i,n,5),a<20?void 0:this.createPointerSide(te([],e[3],e[0],.5),14,i,5,o),this.createPointer(e[0],1,i),this.createPointer(e[1],2,i),this.createPointer(e[2],3,i),this.createPointer(e[3],4,i),this.createPointer(e[4],5,i)].join("")}}checkShow(){return this.$modeView.isCurrentMode(Wi.CanvasView)===!1?!1:!!(this.state.show&&this.$context.selection.isOne)}[M("hideSelectionToolView")](){this.hide()}}async function qj(s){s.registerUI("canvas.view",{GhostToolView:Hj,SelectionToolView:Zj,GroupSelectionToolView:Xj},Nl.SELECTION_TOOL)}var YF="";class Qj extends Ar{getTitle(){return this.$i18n("selector.popup.title")}initState(){return{selector:"",properties:[]}}updateData(e){this.setState(e,!1),this.emit("changeSelectorPopup",this.state)}getBody(){return`
      ${this.templateForSelector()} ${this.templateForProperty()}
      -
      `}templateForProperty(){return W("CSSPropertyEditor",{ref:"$propertyEditor",onchange:"changePropertyEditor"})}templateForSelector(){return` +
      `}templateForProperty(){return R("CSSPropertyEditor",{ref:"$propertyEditor",onchange:"changePropertyEditor"})}templateForSelector(){return`
      - `}[fi("$selector")](e){if(this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/))this.updateData({selector:this.refs.$selector.value});else return e.preventDefault(),e.stopPropagation(),!1}refresh(){super.refresh(),this.refs.$selector.val(this.state.selector),this.children.$propertyEditor.trigger("showCSSPropertyEditor",this.state.properties)}[U("changePropertyEditor")](e){this.updateData({properties:e})}[U("showSelectorPopup")](e){this.setState(e),this.refresh(),this.show(250)}}var Jre="";const nW=["",":hover",":active",":before",":after",":first-child",":last-child",":link",":active",":focus"].map(n=>({value:n}));class sW extends jt{getTitle(){return this.$i18n("selector.property.title")}getBody(){return"
      "}getTools(){return` + `}[dt("$selector")](e){if(this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/))this.updateData({selector:this.refs.$selector.value});else return e.preventDefault(),e.stopPropagation(),!1}refresh(){super.refresh(),this.refs.$selector.val(this.state.selector),this.children.$propertyEditor.trigger("showCSSPropertyEditor",this.state.properties)}[M("changePropertyEditor")](e){this.updateData({properties:e})}[M("showSelectorPopup")](e){this.setState(e),this.refresh(),this.show(250)}}var KF="";const Jj=["",":hover",":active",":before",":after",":first-child",":last-child",":link",":active",":focus"].map(s=>({value:s}));class ez extends Ge{getTitle(){return this.$i18n("selector.property.title")}getBody(){return"
      "}getTools(){return`
      - ${W("SelectEditor",{ref:"$select",key:"selector","none-value":"selector",options:nW})} + ${R("SelectEditor",{ref:"$select",key:"selector","none-value":"selector",options:Jj})}
      - + `}makeSelectorTemplate(e,t){return t=t.toString(),`
      @@ -2859,212 +2815,212 @@ ${t} ${e.selector||`<${this.$i18n("selector.property.none")}>`}
      - +
      - `}[se("$selectorList .selector-item .name")](e){var t=+e.$dt.closest("selector-item").attr("data-index"),i=this.$context.selection.current;!i||this.viewSelectorPicker(t)}[se("$selectorList .selector-item .del")+St+Bn](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.removeSelector(t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[U(kt)+Ft(100)](){this.refreshShowIsNot(["project","svg-path","svg-brush","svg-textpath","svg-text"])}[ve("$selectorList")](){var e=this.$context.selection.current;if(!e)return"";var t=e.selector?yu.parseStyle(e):e.selectors;return(t||[]).map((i,r)=>this.makeSelectorTemplate(i,r))}[on("$selectorList .selector-item .title")](e){this.startIndex=+e.$dt.attr("data-index")}[Kr("$selectorList .selector-item")+St](){}[Yr("$selectorList .selector-item")+St](e){var t=+e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.sortSelector(this.startIndex,t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[se("$add")](){var e=this.$context.selection.current;e&&(e.createSelector({selector:this.children.$select.getValue()}),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors"))),this.refresh()}viewSelectorPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.current,this.current&&(this.currentSelector=this.current.selectors[this.selectedIndex],this.viewSelectorPropertyPopup())}selectItem(e,t=!0){t?this.getRef("$selectorIndex",e).addClass("selected"):this.getRef("$selectorIndex",e).removeClass("selected"),this.current&&this.current.selectors.forEach((i,r)=>{i.selected=r===e})}viewSelectorPropertyPopup(e){if(this.current=this.$context.selection.current,!this.current)return;this.currentSelector=this.current.selectors[this.selectedIndex];const t=this.currentSelector,i=t.selector,r=t.properties;this.emit("showSelectorPopup",{position:e,selector:i,properties:r})}[U("changeSelectorPopup")](e){this.current=this.$context.selection.current,this.current&&(this.currentselector=this.current.selectors[this.selectedIndex],this.currentSelector&&this.currentSelector.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")))}}function aW(n){n.registerUI("inspector.tab.transition",{SelectorProperty:sW}),n.registerUI("popup",{SelectorPopup:rW})}var Qre="";class oW extends jt{getTitle(){return this.$i18n("svgfilter.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--svgfilter-assets-property"}[U(kt)+Ft(100)](){this.show()}getBody(){return` + `}[A("$selectorList .selector-item .name")](e){var t=+e.$dt.closest("selector-item").attr("data-index"),r=this.$context.selection.current;!r||this.viewSelectorPicker(t)}[A("$selectorList .selector-item .del")+Ve+Wr](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.removeSelector(t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[M(Oe)+Ne(100)](){this.refreshShowIsNot(["project","svg-path","svg-brush","svg-textpath","svg-text"])}[G("$selectorList")](){var e=this.$context.selection.current;if(!e)return"";var t=e.selector?Bo.parseStyle(e):e.selectors;return(t||[]).map((r,i)=>this.makeSelectorTemplate(r,i))}[pr("$selectorList .selector-item .title")](e){this.startIndex=+e.$dt.attr("data-index")}[Yr("$selectorList .selector-item")+Ve](){}[Xr("$selectorList .selector-item")+Ve](e){var t=+e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.sortSelector(this.startIndex,t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[A("$add")](){var e=this.$context.selection.current;e&&(e.createSelector({selector:this.children.$select.getValue()}),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors"))),this.refresh()}viewSelectorPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.current,this.current&&(this.currentSelector=this.current.selectors[this.selectedIndex],this.viewSelectorPropertyPopup())}selectItem(e,t=!0){t?this.getRef("$selectorIndex",e).addClass("selected"):this.getRef("$selectorIndex",e).removeClass("selected"),this.current&&this.current.selectors.forEach((r,i)=>{r.selected=i===e})}viewSelectorPropertyPopup(e){if(this.current=this.$context.selection.current,!this.current)return;this.currentSelector=this.current.selectors[this.selectedIndex];const t=this.currentSelector,r=t.selector,i=t.properties;this.emit("showSelectorPopup",{position:e,selector:r,properties:i})}[M("changeSelectorPopup")](e){this.current=this.$context.selection.current,this.current&&(this.currentselector=this.current.selectors[this.selectedIndex],this.currentSelector&&this.currentSelector.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")))}}function tz(s){s.registerUI("inspector.tab.transition",{SelectorProperty:ez}),s.registerUI("popup",{SelectorPopup:Qj})}var ZF="";class rz extends Ge{getTitle(){return this.$i18n("svgfilter.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--svgfilter-assets-property"}[M(Oe)+Ne(100)](){this.show()}getBody(){return`
      - `}[ve("$svgfilterList")](){var e=this.$context.selection.currentProject||{svgfilters:[]},t=e.svgfilters,i=t.map((r,s)=>{var a=r.filters.map(o=>Oh.parse(o));return` -
      -
      + `}[G("$svgfilterList")](){var e=this.$context.selection.currentProject||{svgfilters:[]},t=e.svgfilters,r=t.map((i,a)=>{var n=i.filters.map(o=>Rn.parse(o));return` +
      +
      - - ${a.join("")} + + ${n.join("")} -
      +
      - +
      - - + +
      - `});return i.push(`
      `),i}executeSVGFilter(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshSVGFilterAssets")):window.alert("Please select a project.")}[se("$svgfilterList .add-svgfilter-item")](){this.executeSVGFilter(e=>{e.createSVGFilter({id:Zr(),filters:[]})})}[se("$svgfilterList .remove")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.executeSVGFilter(r=>{r.removeSVGFilter(i)})}[se("$svgfilterList .copy")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.executeSVGFilter(r=>{r.copySVGFilter(i)})}[fi("$svgfilterList input")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index"),r=e.$dt.attrKeyValue("data-key");this.executeSVGFilter(s=>{s.setSVGFilterValue(i,r),this.emit("refreshSVGArea")},!1)}[se("$svgfilterList .preview")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.state.$item=t,this.state.$el=e.$dt.$(".svgfilter-view");var r=this.$context.selection.currentProject||{svgfilters:[]},s=r.svgfilters[i];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterAssets",id:this.id,index:i,filters:s.filters})}[U("updateSVGFilterAssets")](e){this.executeSVGFilter(t=>{t.setSVGFilterValue(e.index,{filters:e.filters}),this.state.$item.$("filter").html(e.filters.join(` -`)),this.emit("refreshSVGArea")},!1)}[U("changeSVGFilterAssets")](e){e.id===this.id&&this.trigger("updateSVGFilterAssets",e)}[U("refreshSVGFilterAssets")](){this.refresh()}}function lW(n){n.registerElement({SVGFilterAssetsProperty:oW})}var cW=` + `});return r.push(`
      `),r}executeSVGFilter(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshSVGFilterAssets")):window.alert("Please select a project.")}[A("$svgfilterList .add-svgfilter-item")](){this.executeSVGFilter(e=>{e.createSVGFilter({id:fr(),filters:[]})})}[A("$svgfilterList .remove")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.executeSVGFilter(i=>{i.removeSVGFilter(r)})}[A("$svgfilterList .copy")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.executeSVGFilter(i=>{i.copySVGFilter(r)})}[dt("$svgfilterList input")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index"),i=e.$dt.attrKeyValue("data-key");this.executeSVGFilter(a=>{a.setSVGFilterValue(r,i),this.emit("refreshSVGArea")},!1)}[A("$svgfilterList .preview")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.state.$item=t,this.state.$el=e.$dt.$(".svgfilter-view");var i=this.$context.selection.currentProject||{svgfilters:[]},a=i.svgfilters[r];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterAssets",id:this.id,index:r,filters:a.filters})}[M("updateSVGFilterAssets")](e){this.executeSVGFilter(t=>{t.setSVGFilterValue(e.index,{filters:e.filters}),this.state.$item.$("filter").html(e.filters.join(` +`)),this.emit("refreshSVGArea")},!1)}[M("changeSVGFilterAssets")](e){e.id===this.id&&this.trigger("updateSVGFilterAssets",e)}[M("refreshSVGFilterAssets")](){this.refresh()}}function iz(s){s.registerElement({SVGFilterAssetsProperty:rz})}var sz=` 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .5 0 -`,hW=` +`,az=` 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 -`,dW=` +`,nz=` 1 0 0 0 0 0 0 0 0 0 0 0 1 .5 0 0 0 0 1 0 -`,uW=` +`,oz=` 1 0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 1 0 -`,pW=` +`,lz=` 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 -`,fW=` +`,cz=` .5 0 0 0 0 0 .5 0 0 0 0 0 .5 0 0 0 0 0 1 0 -`,gW=` +`,hz=` 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 -2 1 0 -`,mW=` +`,dz=` 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 0 -`,vW=` +`,uz=` 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0 -`,yW=` +`,pz=` 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 1 0 -`,bW=` +`,gz=` 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 -`,xW=` +`,fz=` 1 0 0 0 0 0 1 0 1 0 0 0 1 0 0 0 0 0 1 0 -`,_W=` +`,mz=` 1 0 0 1 0 0 1 0 1 0 0 0 1 0 0 0 0 0 1 0 -`,SW=` +`,vz=` 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 -`,wW=` +`,yz=` 1.5 0 0 0 0 0 1.5 0 0 0 0 0 1.5 0 0 0 0 0 1 0 -`,MW=` +`,bz=` 1 0 0 0 0 0 2 0 0 0 0 0 0 .5 0 0 0 0 1 0 -`,$W=` +`,xz=` 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 -`,PW=` +`,$z=` 1 1 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 1 0 -`,TW=` +`,_z=` 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 -`,CW=` +`,Sz=` 1 0 0 0 0 0 .5 0 0 0 0 0 0 .5 0 0 0 0 1 0 -`,EW=` +`,Pz=` 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 -`,IW=` +`,wz=` 1 0 0 0 0 0 0 0 0 0 0 0 1 -1 0 0 0 0 1 0 -`,LW=` +`,Cz=` 1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 -`,kW=` +`,Tz=` 1 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0 0 1 0 -`,Hb={red:EW,green:bW,blue:hW,yellow:LW,magenta:$W,cyan:pW,alpha:cW,BlueMagenta2:dW,BlueShadowMagentHightlight:uW,darken:fW,ElimBlue:gW,GrayOnDark:mW,GrayOnLight:vW,GrayOnMid:yW,HardGreen:xW,HardYellow:_W,IdenticalRedOverlay:SW,lighten:wW,lime:MW,NoGreenMagenta:PW,NoGreenRed:TW,peachy:CW,RedOverlay:IW,YesGreenColorizedMagenta:kW},ene="";const nm=6,Ub=Object.keys(Hb).map(n=>({title:n,values:Hb[n]}));class AW extends ge{initState(){return{values:iy(this.props.values)}}template(){return` +`,ug={red:Pz,green:gz,blue:az,yellow:Cz,magenta:xz,cyan:lz,alpha:sz,BlueMagenta2:nz,BlueShadowMagentHightlight:oz,darken:cz,ElimBlue:hz,GrayOnDark:dz,GrayOnLight:uz,GrayOnMid:pz,HardGreen:fz,HardYellow:mz,IdenticalRedOverlay:vz,lighten:yz,lime:bz,NoGreenMagenta:$z,NoGreenRed:_z,peachy:Sz,RedOverlay:wz,YesGreenColorizedMagenta:Tz},qF="";const dh=6,pg=Object.keys(ug).map(s=>({title:s,values:ug[s]}));class kz extends Y{initState(){return{values:Nd(this.props.values)}}template(){return`
      Mix Color Template
      - `}[$e("$body")](){return{cssText:` + `}[ne("$body")](){return{cssText:` display: grid; - grid-template-columns: repeat(${nm}, 1fr); + grid-template-columns: repeat(${dh}, 1fr); grid-column-gap: 2px; grid-row-gap: 2px; text-align: left; - `}}[ve("$sample")](){return Ub.map((e,t)=>`
      ${e.title}
      `)}[se("$sample .sample-item")](e){var t=+e.$dt.attr("data-index"),i=Ub[t];this.updateData({values:iy(i.values)}),this.load("$body")}[ve("$body")](){var{values:e}=this.state,t=["R","G","B","A"],i=e.map((s,a)=>{var o="";a%(nm-1)===0&&(o=`
      ${t[Math.floor(a/(nm-1))]}
      `);var l=` + `}}[G("$sample")](){return pg.map((e,t)=>`
      ${e.title}
      `)}[A("$sample .sample-item")](e){var t=+e.$dt.attr("data-index"),r=pg[t];this.updateData({values:Nd(r.values)}),this.load("$body")}[G("$body")](){var{values:e}=this.state,t=["R","G","B","A"],r=e.map((a,n)=>{var o="";n%(dh-1)===0&&(o=`
      ${t[Math.floor(n/(dh-1))]}
      `);var l=` ${o}
      - +
      - `;return l}),r=` + `;return l}),i=`
      R
      G
      B
      A
      M
      - `;return r+i}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[fi("$body input")](e){var t=e.$dt,i=+t.attr("data-index"),r=+t.value;this.state.values[i]=r,this.updateData()}}var tne="";class RW extends ge{initState(){return P({label:this.props.label||""},this.parse(this.props.value))}parse(e){var[t,...i]=e.split(" ");if(t==="linear")var[r,s]=i;else if(t==="gamma")var[a,o,l]=i;return{type:t,values:i,slop:r,intercept:s,amplitude:a,exponent:o,offset:l}}template(){return"
      "}[ve("$body")](){var{type:e,label:t}=this.state,i=t?"has-label":"";return` - ${W("SelectEditor",{label:t,ref:"$type",key:"type",value:this.state.type,options:["identity","table","discrete","linear","gamma"],onchange:"changeType"})} -
      + `;return i+r}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[dt("$body input")](e){var t=e.$dt,r=+t.attr("data-index"),i=+t.value;this.state.values[r]=i,this.updateData()}}var QF="";class Mz extends Y{initState(){return b({label:this.props.label||""},this.parse(this.props.value))}parse(e){var[t,...r]=e.split(" ");if(t==="linear")var[i,a]=r;else if(t==="gamma")var[n,o,l]=r;return{type:t,values:r,slop:i,intercept:a,amplitude:n,exponent:o,offset:l}}template(){return"
      "}[G("$body")](){var{type:e,label:t}=this.state,r=t?"has-label":"";return` + ${R("SelectEditor",{label:t,ref:"$type",key:"type",value:this.state.type,options:["identity","table","discrete","linear","gamma"],onchange:"changeType"})} +
      ${t?"":""}
      - ${W("TextEditor",{label:"tableValues",ref:"$values",key:"values",value:this.state.values.join(" "),onchange:(r,s)=>{this.updateData({[r]:s.split(" ")})}})} + ${R("TextEditor",{label:"tableValues",ref:"$values",key:"values",value:this.state.values.join(" "),onchange:(i,a)=>{this.updateData({[i]:a.split(" ")})}})}
      - ${["slop","intercept"].map(r=>` + ${["slop","intercept"].map(i=>`
      - ${W("NumberRangeEditor",{label:r,ref:`$${r}`,key:r,value:this.state[r],onchange:(s,a)=>{this.updateData({[s]:a})}})} + ${R("NumberRangeEditor",{label:i,ref:`$${i}`,key:i,value:this.state[i],onchange:(a,n)=>{this.updateData({[a]:n})}})}
      `).join("")}
      - ${["amplitude","exponent","offset"].map(r=>` + ${["amplitude","exponent","offset"].map(i=>`
      - ${W("NumberRangeEditor",{label:r,ref:`$${r}`,key:r,value:this.state[r],onchange:(s,a)=>{this.updateData({[s]:a})}})} + ${R("NumberRangeEditor",{label:i,ref:`$${i}`,key:i,value:this.state[i],onchange:(a,n)=>{this.updateData({[a]:n})}})}
      `).join("")}
      - `}[U("changeType")](e,t){this.updateData({type:t}),this.refresh()}getValue(){switch(this.state.type){case"table":case"discrete":return[this.state.type,...this.state.values].join(" ");case"linear":return[this.state.type,this.state.slop,this.state.intercept].join(" ");case"gamma":return[this.state.type,this.state.amplitude,this.state.exponent,this.state.offset].join(" ")}return"identity"}setValue(e){this.setState(P({},this.parse(e)))}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var OW=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"strokeSourceAlpha2",bound:{x:400,y:200},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:400,y:150},in:[{id:"composite"},{id:"strokeSourceAlpha2"}],operator:"out",connected:[{id:"displacementMap"}]},{type:"Turbulence",id:"turbulence",filterType:"fractalNoise",baseFrequency:"0.01 0.02",numOctaves:1,seed:0,stitchTiles:"stitch",bound:{x:400,y:200},connected:[{id:"displacementMap"}]},{type:"DisplacementMap",id:"displacementMap",scale:17,xChannelSelector:"A",yChannelSelector:"A",bound:{x:400,y:200},in:[{id:"composite2"},{id:"turbulence"}],connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"strokeSourceGraphic"},{id:"displacementMap"}]}],zW=[{type:"Saturate",values:"0"}],VW=[{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:1,connected:[{id:"composite1"}]},{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"composite1"}]},{type:"Composite",id:"composite1",bound:{x:200,y:150},in:[{id:"flood"},{id:"shadowSource"}],operator:"out",connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:300,y:150},dx:4,dy:4,in:[{id:"composite1"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:400,y:150},stdDeviationX:4,stdDeviationY:4,edge:"none",in:[{id:"offset"}],connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:250},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:500,y:150},in:[{id:"blur"},{id:"shadowSource2"}],operator:"out",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"shadowSource3",bound:{x:500,y:250},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:600,y:150},in:[{id:"composite2"},{id:"shadowSource3"}]}],DW=[{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:200,y:100},dx:10,dy:10,in:[{id:"shadowSource"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:300,y:100},stdDeviationX:5,stdDeviationY:5,in:[{id:"offset"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:.7,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"blur"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"shadowSource2"}]}],FW=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"strokeSourceGraphic"}]}],NW={dancingStroke:OW,stroke:FW,grayscale:zW,shadow:DW,innerShadow:VW},ine="";const BW=[{label:"GRAPHIC REFERENCES",items:[{label:"Source Graphic",value:"SourceGraphic"},{label:"Source Alpha",value:"SourceAlpha"},{label:"Background Image",value:"BackgroundImage"},{label:"Background Alpha",value:"BackgroundAlpha"},{label:"Fill Paint",value:"FillPaint"},{label:"Stroke Paint",value:"StrokePaint"}]},{label:"SOURCES",items:[{label:"Flood",value:"Flood"},{label:"Turbulence",value:"Turbulence"},{label:"Image",value:"Image"}]},{label:"MODIFIER",items:[{label:"Color Matrix",value:"ColorMatrix"},{label:"Saturate",value:"Saturate"},{label:"HueRotate",value:"HueRotate"},{label:"LuminanceToAlpha",value:"LuminanceAlpha"},{label:"Drop Shadow",value:"DropShadow"},{label:"Morphology",value:"Morphology"},{label:"Convolve Matrix",value:"ConvolveMatrix"},{label:"Offset",value:"Offset"},{label:"Gaussian Blur",value:"GaussianBlur"},{label:"Tile",value:"Tile"}]},{label:"LIGHTING",items:[{label:"Specular Lighting",value:"SpecularLighting"},{label:"Diffuse Lighting",value:"DiffuseLighting"},{label:"Point Light",value:"PointLight"},{label:"Spot Light",value:"SpotLight"},{label:"Distant Light",value:"DistantLight"}]},{label:"COMBINERS",items:[{label:"Blend",value:"Blend"},{label:"Composite",value:"Composite"},{label:"Merge",value:"Merge"},{label:"DisplacementMap",value:"DisplacementMap"}]}],jW=[{label:"Template",items:[{label:"Grayscale",value:"grayscale"},{label:"Shadow",value:"shadow"},{label:"Inner Shadow",value:"innerShadow"},{label:"Stroke",value:"stroke"},{label:"Dancing Stroke",value:"dancingStroke"}]}];function Wb(n){switch(n){case"SpecularLighting":return re("specular");case"DiffuseLighting":return re("diffuse");case"SourceGraphic":case"SourceAlpha":return re("image");case"BackgroundImage":case"BackgroundAlpha":return re("outline_image");case"Flood":return re("palette");case"Image":return re("landscape");case"GaussianBlur":return re("blur");case"ColorMatrix":return re("blur_linear");case"Turbulence":return re("waves");case"Saturate":return re("vintage");case"HueRotate":return re("looks");case"LuminanceAlpha":return re("opacity");case"DropShadow":return re("shadow");case"Morphology":return re("broken_image");case"ConvolveMatrix":return re("camera_roll");case"Offset":return re("transform");case"Tile":return re("view_comfy");case"Blend":return re("gradient");case"Composite":return re("merge");case"Merge":return re("settings_input_component");case"DisplacementMap":return re("texture")}return""}function Xb(n){switch(n){case"SourceGraphic":case"SourceAlpha":case"BackgroundImage":case"BackgroundAlpha":case"FillPaint":case"StrokePaint":return"graphic";case"Flood":case"Turbulence":case"Image":return"source";case"GaussianBlur":case"ColorMatrix":case"Saturate":case"HueRotate":case"LuminanceAlpha":case"DropShadow":case"Morphology":case"ConvolveMatrix":case"Offset":case"Tile":return"modifier";case"SpecularLighting":case"DiffuseLighting":case"SpotLight":case"PointLight":case"DistantLight":return"lighting";case"Blend":case"Composite":case"Merge":case"DisplacementMap":return"combiner"}return""}const GW=40,Yb=20,HW={1:[GW+5]},UW={1:[Yb]},WW={1:[-7],2:[-7],3:[-7],4:[-7],5:[-7]};let Iu={1:[0],2:[-7,7],3:[-14,0,14],4:[-21,-7,7,21],5:[-28,-14,0,14,28]};Object.keys(Iu).forEach(n=>{Iu[n]=Iu[n].map(e=>e+Yb)});class XW extends ge{makeFilterSelect(){return` + `}[M("changeType")](e,t){this.updateData({type:t}),this.refresh()}getValue(){switch(this.state.type){case"table":case"discrete":return[this.state.type,...this.state.values].join(" ");case"linear":return[this.state.type,this.state.slop,this.state.intercept].join(" ");case"gamma":return[this.state.type,this.state.amplitude,this.state.exponent,this.state.offset].join(" ")}return"identity"}setValue(e){this.setState(b({},this.parse(e)))}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var Iz=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"strokeSourceAlpha2",bound:{x:400,y:200},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:400,y:150},in:[{id:"composite"},{id:"strokeSourceAlpha2"}],operator:"out",connected:[{id:"displacementMap"}]},{type:"Turbulence",id:"turbulence",filterType:"fractalNoise",baseFrequency:"0.01 0.02",numOctaves:1,seed:0,stitchTiles:"stitch",bound:{x:400,y:200},connected:[{id:"displacementMap"}]},{type:"DisplacementMap",id:"displacementMap",scale:17,xChannelSelector:"A",yChannelSelector:"A",bound:{x:400,y:200},in:[{id:"composite2"},{id:"turbulence"}],connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"strokeSourceGraphic"},{id:"displacementMap"}]}],Ez=[{type:"Saturate",values:"0"}],Lz=[{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:1,connected:[{id:"composite1"}]},{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"composite1"}]},{type:"Composite",id:"composite1",bound:{x:200,y:150},in:[{id:"flood"},{id:"shadowSource"}],operator:"out",connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:300,y:150},dx:4,dy:4,in:[{id:"composite1"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:400,y:150},stdDeviationX:4,stdDeviationY:4,edge:"none",in:[{id:"offset"}],connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:250},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:500,y:150},in:[{id:"blur"},{id:"shadowSource2"}],operator:"out",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"shadowSource3",bound:{x:500,y:250},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:600,y:150},in:[{id:"composite2"},{id:"shadowSource3"}]}],Vz=[{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:200,y:100},dx:10,dy:10,in:[{id:"shadowSource"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:300,y:100},stdDeviationX:5,stdDeviationY:5,in:[{id:"offset"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:.7,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"blur"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"shadowSource2"}]}],Oz=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"strokeSourceGraphic"}]}],Rz={dancingStroke:Iz,stroke:Oz,grayscale:Ez,shadow:Vz,innerShadow:Lz},JF="";const jz=[{label:"GRAPHIC REFERENCES",items:[{label:"Source Graphic",value:"SourceGraphic"},{label:"Source Alpha",value:"SourceAlpha"},{label:"Background Image",value:"BackgroundImage"},{label:"Background Alpha",value:"BackgroundAlpha"},{label:"Fill Paint",value:"FillPaint"},{label:"Stroke Paint",value:"StrokePaint"}]},{label:"SOURCES",items:[{label:"Flood",value:"Flood"},{label:"Turbulence",value:"Turbulence"},{label:"Image",value:"Image"}]},{label:"MODIFIER",items:[{label:"Color Matrix",value:"ColorMatrix"},{label:"Saturate",value:"Saturate"},{label:"HueRotate",value:"HueRotate"},{label:"LuminanceToAlpha",value:"LuminanceAlpha"},{label:"Drop Shadow",value:"DropShadow"},{label:"Morphology",value:"Morphology"},{label:"Convolve Matrix",value:"ConvolveMatrix"},{label:"Offset",value:"Offset"},{label:"Gaussian Blur",value:"GaussianBlur"},{label:"Tile",value:"Tile"}]},{label:"LIGHTING",items:[{label:"Specular Lighting",value:"SpecularLighting"},{label:"Diffuse Lighting",value:"DiffuseLighting"},{label:"Point Light",value:"PointLight"},{label:"Spot Light",value:"SpotLight"},{label:"Distant Light",value:"DistantLight"}]},{label:"COMBINERS",items:[{label:"Blend",value:"Blend"},{label:"Composite",value:"Composite"},{label:"Merge",value:"Merge"},{label:"DisplacementMap",value:"DisplacementMap"}]}],zz=[{label:"Template",items:[{label:"Grayscale",value:"grayscale"},{label:"Shadow",value:"shadow"},{label:"Inner Shadow",value:"innerShadow"},{label:"Stroke",value:"stroke"},{label:"Dancing Stroke",value:"dancingStroke"}]}];function gg(s){switch(s){case"SpecularLighting":return z("specular");case"DiffuseLighting":return z("diffuse");case"SourceGraphic":case"SourceAlpha":return z("image");case"BackgroundImage":case"BackgroundAlpha":return z("outline_image");case"Flood":return z("palette");case"Image":return z("landscape");case"GaussianBlur":return z("blur");case"ColorMatrix":return z("blur_linear");case"Turbulence":return z("waves");case"Saturate":return z("vintage");case"HueRotate":return z("looks");case"LuminanceAlpha":return z("opacity");case"DropShadow":return z("shadow");case"Morphology":return z("broken_image");case"ConvolveMatrix":return z("camera_roll");case"Offset":return z("transform");case"Tile":return z("view_comfy");case"Blend":return z("gradient");case"Composite":return z("merge");case"Merge":return z("settings_input_component");case"DisplacementMap":return z("texture")}return""}function fg(s){switch(s){case"SourceGraphic":case"SourceAlpha":case"BackgroundImage":case"BackgroundAlpha":case"FillPaint":case"StrokePaint":return"graphic";case"Flood":case"Turbulence":case"Image":return"source";case"GaussianBlur":case"ColorMatrix":case"Saturate":case"HueRotate":case"LuminanceAlpha":case"DropShadow":case"Morphology":case"ConvolveMatrix":case"Offset":case"Tile":return"modifier";case"SpecularLighting":case"DiffuseLighting":case"SpotLight":case"PointLight":case"DistantLight":return"lighting";case"Blend":case"Composite":case"Merge":case"DisplacementMap":return"combiner"}return""}const Az=40,mg=20,Dz={1:[Az+5]},Fz={1:[mg]},Bz={1:[-7],2:[-7],3:[-7],4:[-7],5:[-7]};let Jo={1:[0],2:[-7,7],3:[-14,0,14],4:[-21,-7,7,21],5:[-28,-14,0,14,28]};Object.keys(Jo).forEach(s=>{Jo[s]=Jo[s].map(e=>e+mg)});class Nz extends Y{makeFilterSelect(){return`
      - ${hu(BW,e=>` + ${Vo(jz,e=>`
      - ${hu(e.items,t=>` + ${Vo(e.items,t=>`
      - ${Wb(t.value)} + ${gg(t.value)} ${this.$i18n(t.label)}
      `)} @@ -3075,9 +3031,9 @@ ${t}
      - ${hu(jW,e=>` + ${Vo(zz,e=>`
      - ${hu(e.items,t=>`
      ${this.$i18n(t.label)}
      `)} + ${Vo(e.items,t=>`
      ${this.$i18n(t.label)}
      `)}
      `)}
      @@ -3117,20 +3073,20 @@ ${t}
      -
      `}[se("$header .tab-item:not(.empty-item)")](e){var t=+e.$dt.attr("data-value");this.state.selectedTabIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedTabIndex:t},!1))}[on("$filterSelect .item")](e){var t=e.$dt.attr("value");e.dataTransfer.setData("filter/type",t)}[Kr("$connectedLinePanel")+St](){}[Yr("$connectedLinePanel")+St](e){var t={x:e.offsetX,y:e.offsetY},i=e.dataTransfer.getData("filter/type");this.makeFilterNode(i,{bound:t})}makeFilterNode(e,t={}){this.state.filters.push(this.makeFilter(e,t)),this.state.selectedIndex=this.state.filters.length-1,this.state.selectedFilter=this.state.filters[this.state.selectedIndex],this.refresh(),this.modifyFilter()}applyTemplate(e){var t=NW[e];t&&(this.setState({selectedIndex:-1,selectedFilter:null,filters:this.parseFilter(t)},!1),this.refresh(),this.modifyFilter())}getSpec(e){return HU[e]}makeFilterEditorTemplate(e,t,i){var r=`${t.type}${i}${this.state.selectedIndex}${Date.now()}`;if(e.inputType==="color-matrix")return W("ColorMatrixEditor",{ref:`$colorMatrix${r}`,label:e.title,key:i,column:e.column,values:t[i].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="input-array")return W("InputArrayEditor",{ref:`$inputArray${r}`,label:e.title,key:i,"column-label":"R,G,B,A,M","row-label":"R,G,B,A",column:e.column,values:t[i].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="blend")return W("BlendSelectEditor",{ref:`$blend${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="select"){var s=e.options;return Ue(e.options)&&(s=e.options(this.state.filters)),W("SelectEditor",{ref:`$select${r}`,label:e.title,options:s,key:i,value:t[i].toString(),onchange:"changeRangeEditor"})}else{if(e.inputType==="text")return W("TextEditor",{ref:`$text${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeTextEditor"});if(e.inputType==="number-range")return W("NumberRangeEditor",{ref:`$numberrange${r}`,label:e.title,layout:"block",min:e.min,max:e.max,step:e.step,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="color")return W("ColorViewEditor",{ref:`$colorview${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="FuncFilter")return W("FuncFilterEditor",{ref:`$funcFilter${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeFuncFilterEditor"});if(e.inputType==="ImageSelectEditor")return W("ImageSelectEditor",{ref:`$imageSelect${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"})}return W("RangeEditor",{ref:`$range${r}`,layout:"block",label:e.title,min:e.min,max:e.max,step:e.step,key:i,value:t[i].toString(),units:e.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t){return` +
      `}[A("$header .tab-item:not(.empty-item)")](e){var t=+e.$dt.attr("data-value");this.state.selectedTabIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach(r=>r.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(r=>r.addClass("selected")),this.setState({selectedTabIndex:t},!1))}[pr("$filterSelect .item")](e){var t=e.$dt.attr("value");e.dataTransfer.setData("filter/type",t)}[Yr("$connectedLinePanel")+Ve](){}[Xr("$connectedLinePanel")+Ve](e){var t={x:e.offsetX,y:e.offsetY},r=e.dataTransfer.getData("filter/type");this.makeFilterNode(r,{bound:t})}makeFilterNode(e,t={}){this.state.filters.push(this.makeFilter(e,t)),this.state.selectedIndex=this.state.filters.length-1,this.state.selectedFilter=this.state.filters[this.state.selectedIndex],this.refresh(),this.modifyFilter()}applyTemplate(e){var t=Rz[e];t&&(this.setState({selectedIndex:-1,selectedFilter:null,filters:this.parseFilter(t)},!1),this.refresh(),this.modifyFilter())}getSpec(e){return zj[e]}makeFilterEditorTemplate(e,t,r){var i=`${t.type}${r}${this.state.selectedIndex}${Date.now()}`;if(e.inputType==="color-matrix")return R("ColorMatrixEditor",{ref:`$colorMatrix${i}`,label:e.title,key:r,column:e.column,values:t[r].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="input-array")return R("InputArrayEditor",{ref:`$inputArray${i}`,label:e.title,key:r,"column-label":"R,G,B,A,M","row-label":"R,G,B,A",column:e.column,values:t[r].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="blend")return R("BlendSelectEditor",{ref:`$blend${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="select"){var a=e.options;return de(e.options)&&(a=e.options(this.state.filters)),R("SelectEditor",{ref:`$select${i}`,label:e.title,options:a,key:r,value:t[r].toString(),onchange:"changeRangeEditor"})}else{if(e.inputType==="text")return R("TextEditor",{ref:`$text${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeTextEditor"});if(e.inputType==="number-range")return R("NumberRangeEditor",{ref:`$numberrange${i}`,label:e.title,layout:"block",min:e.min,max:e.max,step:e.step,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="color")return R("ColorViewEditor",{ref:`$colorview${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="FuncFilter")return R("FuncFilterEditor",{ref:`$funcFilter${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeFuncFilterEditor"});if(e.inputType==="ImageSelectEditor")return R("ImageSelectEditor",{ref:`$imageSelect${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"})}return R("RangeEditor",{ref:`$range${i}`,layout:"block",label:e.title,min:e.min,max:e.max,step:e.step,key:r,value:t[r].toString(),units:e.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t){return`
      - +
      - ${Uv(e,(i,r)=>this.makeFilterEditorTemplate(r,t,i))} + ${Ih(e,(r,i)=>this.makeFilterEditorTemplate(i,t,r))}
      - `}makeFilterTemplate(e){return this.makeOneFilterTemplate(this.getSpec(e.type),e)}[ve("$filterList")](){return this.state.selectedFilter&&this.state.selectedFilter.isSource()===!1?this.makeFilterTemplate(this.state.selectedFilter):""}modifyFilter(){this.state.filters.forEach(e=>{e.isLight()&&e.connected.length&&e.connected.forEach(t=>{this.state.filters.filter(i=>i.id===t.id).forEach(i=>{i.reset({lightInfo:e.toLightString()})})})}),this.parent.trigger(this.props.onchange,this.props.key,this.state.filters)}parseFilter(e=[]){return e.map(t=>Oh.parse(t))}makeFilter(e,t={}){return Oh.parse(Ve(P({},t),{type:e}))}[se("$filterSelect .item[value]")](e){var t=e.$dt.attr("value");this.makeFilterNode(t)}[se("$filterTemplateSelect .item[value]")](e){var t=e.$dt.attr("value");this.applyTemplate(t)}[se("$filterList .filter-menu .del")](){this.removeFilter(this.state.selectedFilter.id)}[ve("$graphPanel")](){return this.makeGraphPanel()}selectFilter(e){this.setState({selectedIndex:e,selectedFilter:this.state.filters[e]},!1),this.load("$filterList")}[qe("$graphPanel .filter-node")+at()+lt()](e){this.$target=e.$dt,this.$point=null,this.pointType="object",this.pointIndex=0;var t=this.refs.$graphPanel.rect();this.rect=t;var i=+this.$target.attr("data-index");this.selectFilter(i),this.$target.onlyOneClass("selected");var r=Ze.create(e.target);if(r.hasClass("out"))this.$point=r,this.pointType="out",this.pointIndex=0;else if(r.hasClass("in"))this.$point=r,this.pointType="in",this.pointIndex=+r.attr("data-index");else{var s=this.state.selectedFilter;this.startXY=rt(s.bound)}if(this.pointType==="in"||this.pointType==="out"){var a=r.rect(),o=a.x-t.x,l=a.y-t.y,c=o+a.width/2,h=l+a.height/2;this.startXY={x:c,y:h}}this.startXY.dx=0,this.startXY.dy=0,this.load("$dragLinePanel")}[ve("$dragLinePanel")](){if(this.pointType==="in"||this.pointType==="out"){var{x:e,y:t,dx:i,dy:r}=this.startXY;return` + `}makeFilterTemplate(e){return this.makeOneFilterTemplate(this.getSpec(e.type),e)}[G("$filterList")](){return this.state.selectedFilter&&this.state.selectedFilter.isSource()===!1?this.makeFilterTemplate(this.state.selectedFilter):""}modifyFilter(){this.state.filters.forEach(e=>{e.isLight()&&e.connected.length&&e.connected.forEach(t=>{this.state.filters.filter(r=>r.id===t.id).forEach(r=>{r.reset({lightInfo:e.toLightString()})})})}),this.parent.trigger(this.props.onchange,this.props.key,this.state.filters)}parseFilter(e=[]){return e.map(t=>Rn.parse(t))}makeFilter(e,t={}){return Rn.parse(se(b({},t),{type:e}))}[A("$filterSelect .item[value]")](e){var t=e.$dt.attr("value");this.makeFilterNode(t)}[A("$filterTemplateSelect .item[value]")](e){var t=e.$dt.attr("value");this.applyTemplate(t)}[A("$filterList .filter-menu .del")](){this.removeFilter(this.state.selectedFilter.id)}[G("$graphPanel")](){return this.makeGraphPanel()}selectFilter(e){this.setState({selectedIndex:e,selectedFilter:this.state.filters[e]},!1),this.load("$filterList")}[me("$graphPanel .filter-node")+xe()+Se()](e){this.$target=e.$dt,this.$point=null,this.pointType="object",this.pointIndex=0;var t=this.refs.$graphPanel.rect();this.rect=t;var r=+this.$target.attr("data-index");this.selectFilter(r),this.$target.onlyOneClass("selected");var i=ge.create(e.target);if(i.hasClass("out"))this.$point=i,this.pointType="out",this.pointIndex=0;else if(i.hasClass("in"))this.$point=i,this.pointType="in",this.pointIndex=+i.attr("data-index");else{var a=this.state.selectedFilter;this.startXY=be(a.bound)}if(this.pointType==="in"||this.pointType==="out"){var n=i.rect(),o=n.x-t.x,l=n.y-t.y,c=o+n.width/2,h=l+n.height/2;this.startXY={x:c,y:h}}this.startXY.dx=0,this.startXY.dy=0,this.load("$dragLinePanel")}[G("$dragLinePanel")](){if(this.pointType==="in"||this.pointType==="out"){var{x:e,y:t,dx:r,dy:i}=this.startXY;return` - `}else return""}makeConnectedPath(e){var t=new Ji,i=e[0],r=e[e.length-1];if(!i||!r)return"";var s=Math.abs(i.x-r.x)/2;return t.M(i).C({x:i.x+s,y:i.y},{x:r.x-s,y:r.y},r),t.d}createPath(e,t){if(t.path)return t.path;var i=e.bound.x+HW["1"][0],r=e.bound.y+UW["1"][0],s=this.state.filters.map((d,u)=>({it:d,index:u})).find(d=>!d||!d.it?!1:d&&d.it.id===t.id),a=`${s.it.getInCount()}`,o=s.it.in.map((d,u)=>({it:d,index:u})).find(d=>!d||!d.it?!1:d.it.id===e.id);if(!o)return[];var l=o.index,c=s.it.bound.x+WW[a][0],h=s.it.bound.y+Iu[a][l];return[{x:i,y:r},{x:c,y:h}]}[ve("$connectedLinePanel")](){return` + `}else return""}makeConnectedPath(e){var t=new jt,r=e[0],i=e[e.length-1];if(!r||!i)return"";var a=Math.abs(r.x-i.x)/2;return t.M(r).C({x:r.x+a,y:r.y},{x:i.x-a,y:i.y},i),t.d}createPath(e,t){if(t.path)return t.path;var r=e.bound.x+Dz["1"][0],i=e.bound.y+Fz["1"][0],a=this.state.filters.map((u,d)=>({it:u,index:d})).find(u=>!u||!u.it?!1:u&&u.it.id===t.id),n=`${a.it.getInCount()}`,o=a.it.in.map((u,d)=>({it:u,index:d})).find(u=>!u||!u.it?!1:u.it.id===e.id);if(!o)return[];var l=o.index,c=a.it.bound.x+Bz[n][0],h=a.it.bound.y+Jo[n][l];return[{x:r,y:i},{x:c,y:h}]}[G("$connectedLinePanel")](){return` - ${this.state.filters.map(e=>e.connected.map(t=>{var i=this.createPath(e,t),r=Xb(e.type);return` + ${this.state.filters.map(e=>e.connected.map(t=>{var r=this.createPath(e,t),i=fg(e.type);return` - ${i.length&&` + ${r.length&&` `} `}).join("")).join("")} - `}[se("$connectedLinePanel .connected-remove-circle")](e){var[t,i]=e.$dt.attrs("data-target-id","data-source-id"),r=this.state.filters;r.filter(s=>s.id===i).forEach(s=>{s.connected=s.connected.filter(a=>a.id!=t)}),r.filter(s=>s.id===t).forEach(s=>{s.in=s.in.map(a=>a&&a.id==i?null:a)}),this.refresh(),this.modifyFilter()}getCenterXY(e){var t=e.rect(),i=t.x-this.rect.x,r=t.y-this.rect.y,s=i+t.width/2,a=r+t.height/2;return{x:s,y:a}}end(e,t){if(this.pointType==="in"||this.pointType==="out"){this.startXY.dx=e,this.startXY.dy=t;var i=this.state.selectedFilter,r=this.$config.get("bodyEvent"),s=Ze.create(r.target),a=s.closest("filter-node");if(this.pointType==="out"){if(s.hasClass("in")){var o=this.state.filters[+a.attr("data-index")];if(o&&!(!o.hasLight()&&i.isLight())){var l=+s.attr("data-index");o.in[l]||(o.setIn(l,i),i.setConnected(o))}}}else if(this.pointType==="in"&&s.hasClass("out")){var o=this.state.filters[+a.attr("data-index")];o&&(i.hasLight()&&!o.isLight()||i.in[this.pointIndex]||(i.setIn(this.pointIndex,o),o.setConnected(i)))}this.pointType=""}this.load("$dragLinePanel"),this.load("$connectedLinePanel"),this.modifyFilter()}move(e,t){var i=this.state.selectedFilter;i&&(this.startXY.dx=e,this.startXY.dy=t,this.pointType==="in"?this.load("$dragLinePanel"):this.pointType==="out"?this.load("$dragLinePanel"):(i.reset({bound:{x:this.startXY.x+e,y:this.startXY.y+t}}),this.$target.css({left:i.bound.x,top:i.bound.y}),this.load("$connectedLinePanel")))}makeGraphPanel(){return this.state.filters.map((e,t)=>` + `}[A("$connectedLinePanel .connected-remove-circle")](e){var[t,r]=e.$dt.attrs("data-target-id","data-source-id"),i=this.state.filters;i.filter(a=>a.id===r).forEach(a=>{a.connected=a.connected.filter(n=>n.id!=t)}),i.filter(a=>a.id===t).forEach(a=>{a.in=a.in.map(n=>n&&n.id==r?null:n)}),this.refresh(),this.modifyFilter()}getCenterXY(e){var t=e.rect(),r=t.x-this.rect.x,i=t.y-this.rect.y,a=r+t.width/2,n=i+t.height/2;return{x:a,y:n}}end(e,t){if(this.pointType==="in"||this.pointType==="out"){this.startXY.dx=e,this.startXY.dy=t;var r=this.state.selectedFilter,i=this.$config.get("bodyEvent"),a=ge.create(i.target),n=a.closest("filter-node");if(this.pointType==="out"){if(a.hasClass("in")){var o=this.state.filters[+n.attr("data-index")];if(o&&!(!o.hasLight()&&r.isLight())){var l=+a.attr("data-index");o.in[l]||(o.setIn(l,r),r.setConnected(o))}}}else if(this.pointType==="in"&&a.hasClass("out")){var o=this.state.filters[+n.attr("data-index")];o&&(r.hasLight()&&!o.isLight()||r.in[this.pointIndex]||(r.setIn(this.pointIndex,o),o.setConnected(r)))}this.pointType=""}this.load("$dragLinePanel"),this.load("$connectedLinePanel"),this.modifyFilter()}move(e,t){var r=this.state.selectedFilter;r&&(this.startXY.dx=e,this.startXY.dy=t,this.pointType==="in"?this.load("$dragLinePanel"):this.pointType==="out"?this.load("$dragLinePanel"):(r.reset({bound:{x:this.startXY.x+e,y:this.startXY.y+t}}),this.$target.css({left:r.bound.x,top:r.bound.y}),this.load("$connectedLinePanel")))}makeGraphPanel(){return this.state.filters.map((e,t)=>`
      ${this.$i18n(e.type)}
      -
      ${re("close")}
      -
      ${Wb(e.type)}
      +
      ${z("close")}
      +
      ${gg(e.type)}
      - ${Mn(e.getInCount()).map((r,s)=>`
      `).join("")} + ${Rr(e.getInCount()).map((i,a)=>`
      `).join("")}
      -
      ${re("chevron_right")}
      +
      ${z("chevron_right")}
      ${e.hasLight()?`
      `:""}
      - `)}[Me("changeFuncFilterEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}[Me("changeRangeEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}[Me("changeTextEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}removeFilter(e){var t=this.state.filters.filter(i=>i.id!=e);t.forEach(i=>{i.connected=i.connected.filter(r=>r.id!=e),i.in=i.in.filter(r=>r.id!=e)}),this.state.selectedFilter.id===e&&(this.state.selectedFilter=null,this.state.selectedIndex=-1),this.setState({filters:t}),this.modifyFilter()}[se("$graphPanel .filter-node .remove")](e){var t=e.$dt.closest("filter-node"),i=+t.attr("data-index"),r=this.state.filters[i];this.removeFilter(r.id)}}var rne="";class YW extends Tn{getTitle(){return this.$i18n("svgfilter.popup.title")}getClassName(){return"transparent"}initState(){return{changeEvent:"changeSVGFilterPopup",id:"",preview:!0,filters:[]}}updateData(e){this.setState(e,!1),this.emit(this.state.changeEvent,this.state)}getBody(){return` + `)}[Z("changeFuncFilterEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}[Z("changeRangeEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}[Z("changeTextEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}removeFilter(e){var t=this.state.filters.filter(r=>r.id!=e);t.forEach(r=>{r.connected=r.connected.filter(i=>i.id!=e),r.in=r.in.filter(i=>i.id!=e)}),this.state.selectedFilter.id===e&&(this.state.selectedFilter=null,this.state.selectedIndex=-1),this.setState({filters:t}),this.modifyFilter()}[A("$graphPanel .filter-node .remove")](e){var t=e.$dt.closest("filter-node"),r=+t.attr("data-index"),i=this.state.filters[r];this.removeFilter(i.id)}}var eB="";class Gz extends Ar{getTitle(){return this.$i18n("svgfilter.popup.title")}getClassName(){return"transparent"}initState(){return{changeEvent:"changeSVGFilterPopup",id:"",preview:!0,filters:[]}}updateData(e){this.setState(e,!1),this.emit(this.state.changeEvent,this.state)}getBody(){return`
      -
      `}[ve("$editor")](){return W("SVGFilterEditor",{ref:"$filter",title:"Filter Type",key:"filter",value:this.state.filters,onchange:(e,t)=>{this.updateData({filters:t})}})}[U("showSVGFilterPopup")](e){e.filters=e.filters.map(t=>Oh.parse(t)),e.preview=$t(e.preview)?e.preview:!0,this.setState(e),this.show(1e3)}[U("hideSVGFilterPopup")](){this.$el.hide()}}var nne="";class KW extends ge{initState(){var e=this.props.value;return{options:[],label:this.props.label||"",value:e}}template(){var{label:e}=this.state,t=e?"has-label":"";return` +
      `}[G("$editor")](){return R("SVGFilterEditor",{ref:"$filter",title:"Filter Type",key:"filter",value:this.state.filters,onchange:(e,t)=>{this.updateData({filters:t})}})}[M("showSVGFilterPopup")](e){e.filters=e.filters.map(t=>Rn.parse(t)),e.preview=ke(e.preview)?e.preview:!0,this.setState(e),this.show(1e3)}[M("hideSVGFilterPopup")](){this.$el.hide()}}var tB="";class Hz extends Y{initState(){var e=this.props.value;return{options:[],label:this.props.label||"",value:e}}template(){var{label:e}=this.state,t=e?"has-label":"";return`
      ${e?``:""} - - + +
      - `}[se("$remove")](){this.updateData({value:""})}[se("$open")](){var e=this.state.value;if(e.includes("id")){var t=this.$context.selection.currentProject,i=t.getSVGFilterIndex(e);i>-1&&this.trigger("openSVGFilterPopup",i)}}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[$e("$options")](){return{"data-count":this.state.options.length.toString()}}[ve("$options")](){var e=this.$context.selection.currentProject,t="";e&&(t=e.svgfilters.map(r=>r.id),t=t.length?","+t.join(","):""),t+=",-,new",t=t.split(",");var i=t.map(r=>{var s=r,a=r;if(s.includes(":"))var[s,a]=s.split(":");a===""?a=this.props["none-value"]?this.props["none-value"]:"":a==="-"&&(a="----------",s="");var o=s===this.state.value?"selected":"";return``});return i}setOptions(e=""){this.setState({options:e.split(this.state.splitChar).map(t=>t.trim())})}[yn("$options")](){var e=this.refs.$options.value;e=="new"?this.$commands.emit("addSVGFilterAssetItem",(t,i)=>{this.updateData({value:i}),this.refresh(),this.trigger("openSVGFilterPopup",t)}):e==="-"||this.updateData({value:e})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[U("refreshSVGArea")+Ft(1e3)](){this.load("$options")}[U("openSVGFilterPopup")](e){this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea");var t=this.$context.selection.currentProject||{svgfilters:[]},i=t.svgfilters[e];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterEditorRealUpdate",preview:!1,index:e,filters:i.filters})}[U("changeSVGFilterEditorRealUpdate")](e){var t=this.$context.selection.currentProject;t&&(t.setSVGFilterValue(e.index,{filters:e.filters}),this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea"))}}function qW(n){n.registerElement({ColorMatrixEditor:AW,FuncFilterEditor:RW,SVGFilterSelectEditor:KW,SVGFilterEditor:XW}),n.registerUI("inspector.tab.style",{SVGItemProperty:mh.create({title:n.$i18n("svg.item.property.title"),editableProperty:"svg-item",preventUpdate:!0})}),n.registerUI("popup",{SVGFilterPopup:YW}),n.registerInspector("svg-item",e=>[{key:"edit",editor:"Button",editorOptions:{text:"Edit",action:["open.editor",e]}},{type:"column",size:[2,1],columns:[{type:"label",label:n.$i18n("svg.item.property.fill")},{key:"fillRule",editor:"ToggleCheckBox",editorOptions:{toggleLabels:[re("join_full"),re("join_right")],toggleValues:["nonzero","evenodd"]},defaultValue:e.fillRule||"nonzero"}]},{type:"column",size:[2,1],columns:[{key:"fill",editor:"FillSingleEditor",editorOptions:{wide:!0},defaultValue:e.fill},{key:"fillOpacity",editor:"number-input",editorOptions:{compact:!0,label:"opacity",min:0,max:1,step:.01},defaultValue:e.fillOpacity}]},{type:"column",size:[2,1],columns:[{type:"label",label:n.$i18n("svg.item.property.stroke")}]},{type:"column",size:[2,1],columns:[{key:"stroke",editor:"fill-single",editorOptions:{wide:!0},defaultValue:e.stroke},{key:"strokeWidth",editor:"number-input",editorOptions:{compact:!0,label:"line_weight"},defaultValue:e.strokeWidth}]},{type:"column",size:[2,1],columns:[{key:"strokeDasharray",editor:"StrokeDashArrayEditor",editorOptions:{label:n.$i18n("svg.item.property.dashArray")},defaultValue:e.strokeDasharray||""},{key:"strokeDashoffset",editor:"number-input",editorOptions:{compact:!0,label:"power_input",min:-1e3,max:1e3,step:1},defaultValue:e.strokeDashoffset}]},{key:"strokeLinecap",editor:"ToggleCheckBox",editorOptions:{label:n.$i18n("svg.item.property.lineCap"),toggleLabels:[re("line_cap_butt"),re("line_cap_round"),re("line_cap_square")],toggleValues:[Kd.BUTT,gl.ROUND,Kd.SQUARE]},defaultValue:e.strokeLinecap||Kd.BUTT},{key:"strokeLinejoin",editor:"ToggleCheckBox",editorOptions:{label:n.$i18n("svg.item.property.lineJoin"),toggleLabels:[re("line_join_miter"),re("line_join_round"),re("line_join_bevel")],toggleValues:[gl.MITER,gl.ROUND,gl.BEVEL]},defaultValue:e.strokeLinejoin||gl.MITER},{key:"mixBlendMode",editor:"BlendSelectEditor",editorOptions:{label:n.$i18n("svg.item.property.blend")},defaultValue:e.mixBlendMode}]),n.registerInspector("polygon",e=>[{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1},defaultValue:e.count},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",command:"copy.path"}},{key:"button2",editor:"Button",editorOptions:{label:"Test Popup",action:["showComponentPopup",{title:"Sample Test Popup",width:400,inspector:[{key:"test",editor:"Button",editorOptions:{label:"Test",text:"text",onClick:()=>{window.alert("yellow")}}}]}]}}]),n.registerInspector("spline",()=>[{key:"boundary",editor:"SelectIconEditor",editorOptions:{label:"Boundary",options:["clamped","open","closed"]}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}]),n.registerInspector("star",e=>[{key:"isCurve",editor:"ToggleCheckBox",editorOptions:{label:"Curve",defaultValue:e.isCurve}},{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1,wide:"true"}},{key:"radius",editor:"NumberInputEditor",editorOptions:{label:"Inner Radius",min:-1,max:1,step:.01,wide:"true"}},{key:"tension",editor:"NumberInputEditor",editorOptions:{label:"Tension",min:0,max:1,step:.01,wide:"true"}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}])}class ZW extends jt{getTitle(){return this.$i18n("svg.text.property.title")}[U(kt)](){this.refreshShow(["svg-textpath","svg-text","svg-tspan"])}refresh(){var e=this.$context.selection.current;e&&this.setAllValue(["lengthAdjust","textLength","startOffset","text-anchor","text"])}setAllValue(e=[]){var t=this.$context.selection.current;!t||e.forEach(i=>{this.children[`$${i}`].setValue(t[i])})}getBody(){return` + `}[A("$remove")](){this.updateData({value:""})}[A("$open")](){var e=this.state.value;if(e.includes("id")){var t=this.$context.selection.currentProject,r=t.getSVGFilterIndex(e);r>-1&&this.trigger("openSVGFilterPopup",r)}}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[ne("$options")](){return{"data-count":this.state.options.length.toString()}}[G("$options")](){var e=this.$context.selection.currentProject,t="";e&&(t=e.svgfilters.map(i=>i.id),t=t.length?","+t.join(","):""),t+=",-,new",t=t.split(",");var r=t.map(i=>{var a=i,n=i;if(a.includes(":"))var[a,n]=a.split(":");n===""?n=this.props["none-value"]?this.props["none-value"]:"":n==="-"&&(n="----------",a="");var o=a===this.state.value?"selected":"";return``});return r}setOptions(e=""){this.setState({options:e.split(this.state.splitChar).map(t=>t.trim())})}[Sr("$options")](){var e=this.refs.$options.value;e=="new"?this.$commands.emit("addSVGFilterAssetItem",(t,r)=>{this.updateData({value:r}),this.refresh(),this.trigger("openSVGFilterPopup",t)}):e==="-"||this.updateData({value:e})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[M("refreshSVGArea")+Ne(1e3)](){this.load("$options")}[M("openSVGFilterPopup")](e){this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea");var t=this.$context.selection.currentProject||{svgfilters:[]},r=t.svgfilters[e];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterEditorRealUpdate",preview:!1,index:e,filters:r.filters})}[M("changeSVGFilterEditorRealUpdate")](e){var t=this.$context.selection.currentProject;t&&(t.setSVGFilterValue(e.index,{filters:e.filters}),this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea"))}}function Uz(s){s.registerElement({ColorMatrixEditor:kz,FuncFilterEditor:Mz,SVGFilterSelectEditor:Hz,SVGFilterEditor:Nz}),s.registerUI("inspector.tab.style",{SVGItemProperty:mn.create({title:s.$i18n("svg.item.property.title"),editableProperty:"svg-item",preventUpdate:!0})}),s.registerUI("popup",{SVGFilterPopup:Gz}),s.registerInspector("svg-item",e=>[{key:"edit",editor:"Button",editorOptions:{text:"Edit",action:["open.editor",e]}},{type:"column",size:[2,1],columns:[{type:"label",label:s.$i18n("svg.item.property.fill")},{key:"fillRule",editor:"ToggleCheckBox",editorOptions:{toggleLabels:[z("join_full"),z("join_right")],toggleValues:["nonzero","evenodd"]},defaultValue:e.fillRule||"nonzero"}]},{type:"column",size:[2,1],columns:[{key:"fill",editor:"FillSingleEditor",editorOptions:{wide:!0},defaultValue:e.fill},{key:"fillOpacity",editor:"number-input",editorOptions:{compact:!0,label:"opacity",min:0,max:1,step:.01},defaultValue:e.fillOpacity}]},{type:"column",size:[2,1],columns:[{type:"label",label:s.$i18n("svg.item.property.stroke")}]},{type:"column",size:[2,1],columns:[{key:"stroke",editor:"fill-single",editorOptions:{wide:!0},defaultValue:e.stroke},{key:"strokeWidth",editor:"number-input",editorOptions:{compact:!0,label:"line_weight"},defaultValue:e.strokeWidth}]},{type:"column",size:[2,1],columns:[{key:"strokeDasharray",editor:"StrokeDashArrayEditor",editorOptions:{label:s.$i18n("svg.item.property.dashArray")},defaultValue:e.strokeDasharray||""},{key:"strokeDashoffset",editor:"number-input",editorOptions:{compact:!0,label:"power_input",min:-1e3,max:1e3,step:1},defaultValue:e.strokeDashoffset}]},{key:"strokeLinecap",editor:"ToggleCheckBox",editorOptions:{label:s.$i18n("svg.item.property.lineCap"),toggleLabels:[z("line_cap_butt"),z("line_cap_round"),z("line_cap_square")],toggleValues:[yo.BUTT,la.ROUND,yo.SQUARE]},defaultValue:e.strokeLinecap||yo.BUTT},{key:"strokeLinejoin",editor:"ToggleCheckBox",editorOptions:{label:s.$i18n("svg.item.property.lineJoin"),toggleLabels:[z("line_join_miter"),z("line_join_round"),z("line_join_bevel")],toggleValues:[la.MITER,la.ROUND,la.BEVEL]},defaultValue:e.strokeLinejoin||la.MITER},{key:"mixBlendMode",editor:"BlendSelectEditor",editorOptions:{label:s.$i18n("svg.item.property.blend")},defaultValue:e.mixBlendMode}]),s.registerInspector("polygon",e=>[{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1},defaultValue:e.count},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",command:"copy.path"}},{key:"button2",editor:"Button",editorOptions:{label:"Test Popup",action:["showComponentPopup",{title:"Sample Test Popup",width:400,inspector:[{key:"test",editor:"Button",editorOptions:{label:"Test",text:"text",onClick:()=>{window.alert("yellow")}}}]}]}}]),s.registerInspector("spline",()=>[{key:"boundary",editor:"SelectIconEditor",editorOptions:{label:"Boundary",options:["clamped","open","closed"]}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}]),s.registerInspector("star",e=>[{key:"isCurve",editor:"ToggleCheckBox",editorOptions:{label:"Curve",defaultValue:e.isCurve}},{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1,wide:"true"}},{key:"radius",editor:"NumberInputEditor",editorOptions:{label:"Inner Radius",min:-1,max:1,step:.01,wide:"true"}},{key:"tension",editor:"NumberInputEditor",editorOptions:{label:"Tension",min:0,max:1,step:.01,wide:"true"}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}])}class Wz extends Ge{getTitle(){return this.$i18n("svg.text.property.title")}[M(Oe)](){this.refreshShow(["svg-textpath","svg-text","svg-tspan"])}refresh(){var e=this.$context.selection.current;e&&this.setAllValue(["lengthAdjust","textLength","startOffset","text-anchor","text"])}setAllValue(e=[]){var t=this.$context.selection.current;!t||e.forEach(r=>{this.children[`$${r}`].setValue(t[r])})}getBody(){return`
      - ${W("TextAreaEditor",{ref:"$text",label:this.$i18n("svg.text.property.textarea"),key:"text",onchange:"changeTextValue"})} + ${R("TextAreaEditor",{ref:"$text",label:this.$i18n("svg.text.property.textarea"),key:"text",onchange:"changeTextValue"})}
      - ${W("SelectIconEditor",{ref:"$text-anchor",label:this.$i18n("svg.text.property.anchor"),key:"textAnchor",options:["start","middle","end"],onchange:"changeTextValue"})} + ${R("SelectIconEditor",{ref:"$text-anchor",label:this.$i18n("svg.text.property.anchor"),key:"textAnchor",options:["start","middle","end"],onchange:"changeTextValue"})}
      - ${W("SelectEditor",{ref:"$lengthAdjust",label:this.$i18n("svg.text.property.length.adjust"),key:"lengthAdjust",value:"spacing",options:["spacing","spacingAndGlyphs"],onchange:"changeTextValue"})} + ${R("SelectEditor",{ref:"$lengthAdjust",label:this.$i18n("svg.text.property.length.adjust"),key:"lengthAdjust",value:"spacing",options:["spacing","spacingAndGlyphs"],onchange:"changeTextValue"})}
      - ${W("RangeEditor",{ref:"$textLength",label:this.$i18n("svg.text.property.text.length"),key:"textLength",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} + ${R("RangeEditor",{ref:"$textLength",label:this.$i18n("svg.text.property.text.length"),key:"textLength",min:0,max:1e3,step:.1,onchange:"changeTextValue"})}
      - ${W("RangeEditor",{ref:"$startOffset",label:this.$i18n("svg.text.property.start.offset"),key:"startOffset",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} + ${R("RangeEditor",{ref:"$startOffset",label:this.$i18n("svg.text.property.start.offset"),key:"startOffset",min:0,max:1e3,step:.1,onchange:"changeTextValue"})}
      - `}[Me("changeTextValue")](e,t){this.$commands.executeCommand("setAttribute",`change svg text property: ${e}`,this.$context.selection.packByValue({[e]:t}))}}function JW(n){n.registerUI("inspector.tab.style",{SVGTextProperty:ZW})}function QW(n){n.registerUI("inspector.tab.style",{TextProperty:mh.create({title:n.$i18n("text.property.title"),editableProperty:"text-style",preventUpdate:!0})}),n.registerInspector("text-style",e=>[{type:"column",size:[2,1,1],columns:[{key:"textAlign",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["left","center","right","justify"],icons:["align_left","align_center","align_right","align_justify"]},defaultValue:e.textAlign||cy.LEFT},"-",{key:"textTransform",editor:"SelectIconEditor",editorOptions:{options:[{value:Zd.CAPITALIZE,text:"Ag"},{value:Zd.UPPERCASE,text:"AG"},{value:Zd.LOWERCASE,text:"ag"}],compact:!0,icons:["horizontal_rule"]},defaultValue:e.textTransform}]},{type:"column",size:[3,2,1],gap:20,columns:[{key:"textDecoration",editor:"SelectIconEditor",editorOptions:{options:[{value:qd.NONE,text:"None"},{value:qd.UNDERLINE,text:"Underline"},{value:qd.LINE_THROUGH,text:"LineThrough"}],icons:["horizontal_rule","underline","strikethrough"],onchange:"changeTextValue"},defaultValue:e.textDecoration},{key:"fontStyle",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["normal","italic"],icons:["title","italic"]},defaultValue:e.fontStyle},{key:"textClip",editor:"ToggleButton",editorOptions:{checkedValue:jc.TEXT,toggleLabels:[re("vignette"),re("vignette")],toggleTitles:["","Text Clip"],toggleValues:[jc.NONE,jc.TEXT]},defaultValue:e.textClip||jc.NONE}]}])}var Kb=[{name:"Mystic",shadow:"20px 0px 10px rgb(0, 0, 0)"},{name:"Monoton",shadow:"0px -78px rgb(255, 196, 0)"},{name:"Radioactive",shadow:"-18px -18px 20px rgb(87, 255, 9);"},{name:"Bungee",shadow:"-18px 18px 0 rgb(66, 45, 45)"},{name:"Sprint",shadow:"-20px -108px 0px rgba(255, 255, 255, 0.445)"},{name:"Prickly",shadow:"-18px -18px 2px #777"},{name:"Codystar",shadow:"1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)"},{name:"Elegant",shadow:"-18px 8px 18px #b4bbbb"},{name:"Playful",shadow:` + `}[Z("changeTextValue")](e,t){this.$commands.executeCommand("setAttribute",`change svg text property: ${e}`,this.$context.selection.packByValue({[e]:t}))}}function Xz(s){s.registerUI("inspector.tab.style",{SVGTextProperty:Wz})}function Yz(s){s.registerUI("inspector.tab.style",{TextProperty:mn.create({title:s.$i18n("text.property.title"),editableProperty:"text-style",preventUpdate:!0})}),s.registerInspector("text-style",e=>[{type:"column",size:[2,1,1],columns:[{key:"textAlign",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["left","center","right","justify"],icons:["align_left","align_center","align_right","align_justify"]},defaultValue:e.textAlign||qd.LEFT},"-",{key:"textTransform",editor:"SelectIconEditor",editorOptions:{options:[{value:xo.CAPITALIZE,text:"Ag"},{value:xo.UPPERCASE,text:"AG"},{value:xo.LOWERCASE,text:"ag"}],compact:!0,icons:["horizontal_rule"]},defaultValue:e.textTransform}]},{type:"column",size:[3,2,1],gap:20,columns:[{key:"textDecoration",editor:"SelectIconEditor",editorOptions:{options:[{value:bo.NONE,text:"None"},{value:bo.UNDERLINE,text:"Underline"},{value:bo.LINE_THROUGH,text:"LineThrough"}],icons:["horizontal_rule","underline","strikethrough"],onchange:"changeTextValue"},defaultValue:e.textDecoration},{key:"fontStyle",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["normal","italic"],icons:["title","italic"]},defaultValue:e.fontStyle},{key:"textClip",editor:"ToggleButton",editorOptions:{checkedValue:Wa.TEXT,toggleLabels:[z("vignette"),z("vignette")],toggleTitles:["","Text Clip"],toggleValues:[Wa.NONE,Wa.TEXT]},defaultValue:e.textClip||Wa.NONE}]}])}var vg=[{name:"Mystic",shadow:"20px 0px 10px rgb(0, 0, 0)"},{name:"Monoton",shadow:"0px -78px rgb(255, 196, 0)"},{name:"Radioactive",shadow:"-18px -18px 20px rgb(87, 255, 9);"},{name:"Bungee",shadow:"-18px 18px 0 rgb(66, 45, 45)"},{name:"Sprint",shadow:"-20px -108px 0px rgba(255, 255, 255, 0.445)"},{name:"Prickly",shadow:"-18px -18px 2px #777"},{name:"Codystar",shadow:"1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)"},{name:"Elegant",shadow:"-18px 8px 18px #b4bbbb"},{name:"Playful",shadow:` -2px -2px 0px #888, 4px 4px 0px #888, 7px 7px 0px #888 - `}],sne="";class eX extends jt{getTitle(){return this.$i18n("text.shadow.property.title")}getBody(){return` + `}],rB="";class Kz extends Ge{getTitle(){return this.$i18n("text.shadow.property.title")}getBody(){return`
      `}getTools(){return` - - `}[se("$add")](){const e=+this.refs.$select.value;this.children.$textshadow.trigger("add",Kb[e].shadow)}[ve("$shadowList")](){var e=this.$context.selection.current||{};return W("TextShadowEditor",{ref:"$textshadow",key:"textShadow",value:e.textShadow,onchange:(t,i)=>{this.$commands.executeCommand("setAttribute","change text shadow",this.$context.selection.packByValue({[t]:i}))}})}get editableProperty(){return"textShadow"}[U(kt)+Qe("checkShow")+Ft(100)](){this.refresh()}}function tX(n){n.registerUI("inspector.tab.style",{TextShadowProperty:eX})}var ane="";const iX=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Sr extends Vr{static parse(e){return new Sr(e)}getDefaultObject(){return{name:"all",duration:y.second(0),timingFunction:"linear",delay:y.second(0)}}toCloneObject(){return{name:this.json.name,duration:this.json.duration+"",timingFunction:this.json.timingFunction,delay:this.json.delay+""}}toCSS(){return{transition:this.toString()}}toString(){var e=this.json;return[e.name,e.duration,e.timingFunction,e.delay].join(" ")}static join(e){return e.map(t=>new Sr(t).toString()).join(",")}static add(e,t={}){const i=Sr.parseStyle(e);return i.push(Sr.parse(t)),Sr.join(i)}static remove(e,t){return Sr.filter(e,(i,r)=>t!=r)}static filter(e,t){return Sr.join(Sr.parseStyle(e).filter(i=>t(i)))}static replace(e,t,i){var r=Sr.parseStyle(e);return r[t]?r[t]=i:r.push(i),Sr.join(r)}static get(e,t){var i=Sr.parseStyle(e);return i[t]}static parseStyle(e){var t=[];if(!e)return t;const i=k1(e,iX);return t=i.str.split(",").map(r=>{const s=r.split(" ").filter(Boolean);return s.length>=4?{name:s[0],duration:y.parse(s[1]),timingFunction:Pg(s[2],i.matches),delay:y.parse(s[3])}:s.length>=3?{name:s[0],duration:y.parse(s[1]),delay:y.parse(s[2])}:s.length>=1?{name:s[0],duration:y.parse(s[1])}:{}}),t.map(r=>Sr.parse(r))}}class rX extends jt{getTitle(){return this.$i18n("transition.property.title")}getBody(){return"
      "}getTools(){return` - - `}isFirstShow(){return!0}[ve("$transitionList")+It](){var e=this.$context.selection.current;return e?Sr.parseStyle(e.transition).map((t,i)=>{const r=this.state.selectedIndex===i?"selected":"",s=go(t.timingFunction,30,30);return` + + `}[A("$add")](){const e=+this.refs.$select.value;this.children.$textshadow.trigger("add",vg[e].shadow)}[G("$shadowList")](){var e=this.$context.selection.current||{};return R("TextShadowEditor",{ref:"$textshadow",key:"textShadow",value:e.textShadow,onchange:(t,r)=>{this.$commands.executeCommand("setAttribute","change text shadow",this.$context.selection.packByValue({[t]:r}))}})}get editableProperty(){return"textShadow"}[M(Oe)+fe("checkShow")+Ne(100)](){this.refresh()}}function Zz(s){s.registerUI("inspector.tab.style",{TextShadowProperty:Kz})}var iB="";const qz=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Jt extends or{static parse(e){return new Jt(e)}getDefaultObject(){return{name:"all",duration:p.second(0),timingFunction:"linear",delay:p.second(0)}}toCloneObject(){return{name:this.json.name,duration:this.json.duration+"",timingFunction:this.json.timingFunction,delay:this.json.delay+""}}toCSS(){return{transition:this.toString()}}toString(){var e=this.json;return[e.name,e.duration,e.timingFunction,e.delay].join(" ")}static join(e){return e.map(t=>new Jt(t).toString()).join(",")}static add(e,t={}){const r=Jt.parseStyle(e);return r.push(Jt.parse(t)),Jt.join(r)}static remove(e,t){return Jt.filter(e,(r,i)=>t!=i)}static filter(e,t){return Jt.join(Jt.parseStyle(e).filter(r=>t(r)))}static replace(e,t,r){var i=Jt.parseStyle(e);return i[t]?i[t]=r:i.push(r),Jt.join(i)}static get(e,t){var r=Jt.parseStyle(e);return r[t]}static parseStyle(e){var t=[];if(!e)return t;const r=pp(e,qz);return t=r.str.split(",").map(i=>{const a=i.split(" ").filter(Boolean);return a.length>=4?{name:a[0],duration:p.parse(a[1]),timingFunction:Vc(a[2],r.matches),delay:p.parse(a[3])}:a.length>=3?{name:a[0],duration:p.parse(a[1]),delay:p.parse(a[2])}:a.length>=1?{name:a[0],duration:p.parse(a[1])}:{}}),t.map(i=>Jt.parse(i))}}class Qz extends Ge{getTitle(){return this.$i18n("transition.property.title")}getBody(){return"
      "}getTools(){return` + + `}isFirstShow(){return!0}[G("$transitionList")+Ee](){var e=this.$context.selection.current;return e?Jt.parseStyle(e.transition).map((t,r)=>{const i=this.state.selectedIndex===r?"selected":"",a=Ms(t.timingFunction,30,30);return`
      -
      -
      +
      +
      - +
      @@ -3240,13 +3196,13 @@ ${t}
      -
      - `}):""}[U(kt)](){this.refreshShowIsNot([])}[se("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add transition",this.$context.selection.packByValue({transition:t=>Sr.add(t.transition)})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}getCurrentTransition(){return this.current.transitions[this.selectedIndex]}[se("$transitionList .tools .del")](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.reset({transition:Sr.remove(i.transition,t)}),this.emit("refreshElement",i),this.refresh())}selectItem(e,t=!0){t?this.refs[`transitionIndex${e}`].addClass("selected"):this.refs[`transitionIndex${e}`].removeClass("selected")}viewTransitionPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentTransition=Sr.get(this.current.transition,this.selectedIndex),this.viewTransitionPropertyPopup())}viewTransitionPropertyPopup(){if(!this.currentTransition)return;const e=this.currentTransition;this.emit("showTransitionPropertyPopup",{changeEvent:"changeTransitionPropertyPopup",data:e.toCloneObject(),instance:this})}[se("$transitionList .preview")](e){this.viewTransitionPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[U("changeTransitionPropertyPopup")](e){this.currentTransition&&(this.currentTransition.reset(P({},e)),this.current&&(this.current.reset({transition:Sr.replace(this.current.transition,this.selectedIndex,this.currentTransition)}),this.emit("refreshElement",this.current),this.refresh()))}}var one="";const nX=["none","all","background-color","background-position","background-size","border","border-color","border-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-spacing","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","bottom","box-shadow","color","filter","font-size","font-size-adjust","font-weight","height","left","letter-spacing","line-height","margin","margin-bottom","margin-left","margin-right","margin-top","max-height","max-width","min-height","min-width","opacity","padding","padding-bottom","padding-left","padding-right","padding-top","perspective","perspective-origin","right","text-decoration","text-decoration-color","text-indent","text-shadow","top","transform","vertical-align","visibility","width","word-spacing","z-index"].map(n=>({value:n,text:n}));class sX extends Tn{getTitle(){return"Transition"}initState(){return{changeEvent:"",instance:{},data:{timingFunction:"linear",duration:"0s",delay:"0s",name:"all"}}}updateData(e){this.state.data=P(P({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
      "}[ve("$popup")](){return` + `}):""}[M(Oe)](){this.refreshShowIsNot([])}[A("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add transition",this.$context.selection.packByValue({transition:t=>Jt.add(t.transition)})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}getCurrentTransition(){return this.current.transitions[this.selectedIndex]}[A("$transitionList .tools .del")](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.reset({transition:Jt.remove(r.transition,t)}),this.emit("refreshElement",r),this.refresh())}selectItem(e,t=!0){t?this.refs[`transitionIndex${e}`].addClass("selected"):this.refs[`transitionIndex${e}`].removeClass("selected")}viewTransitionPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentTransition=Jt.get(this.current.transition,this.selectedIndex),this.viewTransitionPropertyPopup())}viewTransitionPropertyPopup(){if(!this.currentTransition)return;const e=this.currentTransition;this.emit("showTransitionPropertyPopup",{changeEvent:"changeTransitionPropertyPopup",data:e.toCloneObject(),instance:this})}[A("$transitionList .preview")](e){this.viewTransitionPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[M("changeTransitionPropertyPopup")](e){this.currentTransition&&(this.currentTransition.reset(b({},e)),this.current&&(this.current.reset({transition:Jt.replace(this.current.transition,this.selectedIndex,this.currentTransition)}),this.emit("refreshElement",this.current),this.refresh()))}}var sB="";const Jz=["none","all","background-color","background-position","background-size","border","border-color","border-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-spacing","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","bottom","box-shadow","color","filter","font-size","font-size-adjust","font-weight","height","left","letter-spacing","line-height","margin","margin-bottom","margin-left","margin-right","margin-top","max-height","max-width","min-height","min-width","opacity","padding","padding-bottom","padding-left","padding-right","padding-top","perspective","perspective-origin","right","text-decoration","text-decoration-color","text-indent","text-shadow","top","transform","vertical-align","visibility","width","word-spacing","z-index"].map(s=>({value:s,text:s}));class eA extends Ar{getTitle(){return"Transition"}initState(){return{changeEvent:"",instance:{},data:{timingFunction:"linear",duration:"0s",delay:"0s",name:"all"}}}updateData(e){this.state.data=b(b({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
      "}[G("$popup")](){return`
      ${this.templateForProperty()} ${this.templateForTimingFunction()} @@ -3256,26 +3212,26 @@ ${t} `}templateForTimingFunction(){return`
      - ${W("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} + ${R("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})}
      - `}[Me("changeTransition")](e,t){this.updateData({[e]:t})}templateForProperty(){return` + `}[Z("changeTransition")](e,t){this.updateData({[e]:t})}templateForProperty(){return`
      - ${W("SelectEditor",{ref:"$property",icon:!0,label:"Property",key:"name",value:this.state.data.name,options:nX,onChange:"changeTransition"})} + ${R("SelectEditor",{ref:"$property",icon:!0,label:"Property",key:"name",value:this.state.data.name,options:Jz,onChange:"changeTransition"})}
      `}templateForDelay(){return`
      - ${W("RangeEditor",{ref:"$delay",label:"Delay",key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} + ${R("RangeEditor",{ref:"$delay",label:"Delay",key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})}
      `}templateForDuration(){return`
      - ${W("RangeEditor",{ref:"$duration",label:"Duration",key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} + ${R("RangeEditor",{ref:"$duration",label:"Duration",key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})}
      - `}[Me("changeRangeEditor")](e,t){this.updateData({[e]:t})}[Me("changeCubicBezier")](e,t){this.updateData({[e]:t})}[U("showTransitionPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[U("hideTransitionPropertyPopup")](){this.$el.hide()}}function aX(n){n.registerUI("inspector.tab.transition",{TransitionProperty:rX}),n.registerUI("popup",{TransitionPropertyPopup:sX})}var lne="";class oX extends jt{getClassName(){return"item elf--video-property"}getTitle(){return this.$i18n("video.property.title")}initState(){return{$video:{el:{}},status:"play",volume:1}}getBody(){return"
      "}get video(){return this.state.$video.el}get volumeStatus(){return this.state.volume===0?"muted":this.state.volume>.5?"up":"down"}play(){this.video&&this.video.play()}pause(){this.video&&this.video.pause()}[ve("$body")](){var e=this.$context.selection.current||{playTime:"0:1:1"},t=e.currentTime||0,i=(e.playTime||"0:1:1").split(":").pop();return` + `}[Z("changeRangeEditor")](e,t){this.updateData({[e]:t})}[Z("changeCubicBezier")](e,t){this.updateData({[e]:t})}[M("showTransitionPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[M("hideTransitionPropertyPopup")](){this.$el.hide()}}function tA(s){s.registerUI("inspector.tab.transition",{TransitionProperty:Qz}),s.registerUI("popup",{TransitionPropertyPopup:eA})}var aB="";class rA extends Ge{getClassName(){return"item elf--video-property"}getTitle(){return this.$i18n("video.property.title")}initState(){return{$video:{el:{}},status:"play",volume:1}}getBody(){return"
      "}get video(){return this.state.$video.el}get volumeStatus(){return this.state.volume===0?"muted":this.state.volume>.5?"up":"down"}play(){this.video&&this.video.play()}pause(){this.video&&this.video.pause()}[G("$body")](){var e=this.$context.selection.current||{playTime:"0:1:1"},t=e.currentTime||0,r=(e.playTime||"0:1:1").split(":").pop();return`
      - - + +
      - ${W("NumberRangeEditor",{ref:"$currentTime",min:0,max:i,value:t,step:.001,onchange:"changeCurrentTime"})} + ${R("NumberRangeEditor",{ref:"$currentTime",min:0,max:r,value:t,step:.001,onchange:"changeCurrentTime"})}
      @@ -3284,9 +3240,9 @@ ${t} ${this.$i18n("video.property.volume")}
      - ${We.volume_off} - ${We.volume_down} - ${We.volume_up} + ${oe.volume_off} + ${oe.volume_down} + ${oe.volume_up}
      @@ -3296,7 +3252,7 @@ ${t} ${this.$i18n("video.property.playbackRate")}
      - ${W("NumberRangeEditor",{ref:"$playbackRate",min:.1,max:10,clamp:!0,value:this.state.playbackRate,step:.001,onchange:"changePlaybackRate"})} + ${R("NumberRangeEditor",{ref:"$playbackRate",min:.1,max:10,clamp:!0,value:this.state.playbackRate,step:.001,onchange:"changePlaybackRate"})}
      @@ -3304,175 +3260,143 @@ ${t} ${this.$i18n("video.property.playTime")}
      - ${W("MediaProgressEditor",{ref:"$progress",key:"playTime",value:e.playTime,onchange:"changeSelect"})} -
      - `}[U("changeCurrentTime")](e,t){this.setState({currentTime:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({currentTime:t}))}[U("changePlaybackRate")](e,t){this.setState({playbackRate:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({playbackRate:t}))}[T0("$volume")](){const e=Number(this.refs.$volume.value);this.setState({volume:e},!1),this.bindData("$volume_control"),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({volume:e}))}[$e("$volume_control")](){return{"data-selected-value":this.volumeStatus}}[$e("$tools")](){return{"data-selected-value":this.state.status}}[se("$tools button")](e){var t=e.$dt.attr("data-value");switch(t){case"play":this.setState({status:"pause"},!1),this.play();break;case"pause":this.setState({status:"play"},!1),this.pause();break}this.bindData("$tools")}[Me("changeValue")+Ft(100)](e,t){!this.state.$video||this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[Me("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[Me("updateVideoEvent")](){this.video.paused&&(this.setState({status:"play",currentTime:this.video.currentTime},!1),this.bindData("$tools")),this.children.$currentTime.setValue(this.video.currentTime)}[U(kt)+Ft(100)](){const e=this.$context.selection.current;this.refreshShow(["video"]),e&&e.is("video")&&this.emit("refElement",e.id,t=>{const i=t.$("video");this.state.$video=i,this.setState({volume:e.volume,currentTime:e.currentTime,playbackRate:e.playbackRate},!1),this.video.ontimeupdate=r=>{this.trigger("updateVideoEvent",r)},this.video.onprogress=r=>{this.trigger("updateVideoEvent",r)},this.load("$body")})}}function lX(n){n.registerUI("inspector.tab.style",{VideoProperty:oX})}var cne="";class cX extends Tn{getClassName(){return"component-property w(800)"}getTitle(){return"Component"}initState(){return{title:"",inspector:[]}}refresh(){this.setTitle(this.state.title||this.getTitle()),this.load()}getBody(){return` -
      - `}[$e("$body")](){return{style:{width:this.state.width||250}}}[ve("$body")](){const e=this.state.inspector;return W("ComponentEditor",{inspector:e,onchange:"changeComponent"})}[Me("changeComponent")](e,t){Ue(this.state.changeEvent)&&this.emit(this.state.changeEvent,e,t)}[U(W0)](e){this.setState(e,!1),this.refresh(),this.show(e.width)}}var hne="";class hX extends jt{getClassName(){return"component-property"}getTitle(){return"Component"}isShow(){var i;var e=(i=this.$context.selection)==null?void 0:i.current;const t=this.$context.components.createInspector(e);return!!(e&&(e.is("component")||t.length>0))}[U(kt)+Ft(100)](){this.refreshShow(()=>{const e=this.$context.selection.current;return this.$context.components.createInspector(e).length>0})}refresh(){var e=this.$context.selection.current;e&&(this.setTitle(e.getDefaultTitle()||e.itemType||e.name),this.load())}getBody(){return` -
      - `}[ve("$body")](){var i;var e=(i=this.$context.selection)==null?void 0:i.current;if(!e)return"";const t=this.$context.components.createInspector(e);return t.forEach(r=>{if(ni(r))return;let s=e[r.key]||r.defaultValue;Ue(r.convertDefaultValue)&&(s=r.convertDefaultValue(e,r.key)),r.defaultValue=s}),W("ComponentEditor",{ref:"$comp",inspector:t,onchange:"changeComponentProperty"})}[Me("changeComponentProperty")](e,t){this.$commands.executeCommand("setAttribute","change component : "+e,this.$context.selection.packByValue({[e]:t}))}}function qb(n){n.registerUI("inspector.tab.style",{ComponentProperty:hX}),n.registerUI("popup",{ComponentPopup:cX})}var dne="";class dX extends jt{getTitle(){return"Content"}[U(kt,U0)+Ft(100)](){this.refreshShow(["text"])}getBody(){return` -
      - -
      - `}[$e("$contentItem")](){var e=this.$context.selection.current;return e?{value:e.content||""}:""}[fi("$contentItem")](){this.setContent()}setContent(){var e=this.$context.selection.current;if(e){var t={content:this.refs.$contentItem.value};e.reset(t),this.emit(Gi,e)}}}function uX(n){n.registerElement({ContentProperty:dX})}var pX=[Mj,U1,AH,fH,Dc,Fc,Nc,vb,hG,Fb,Vc,ch,Mg,Sb,YD,cU,EH,C6,YH,i6,JW,xG,QW,tX,uX,e6,qb,u6,oU,x6,$6,lX,iH,lW,qW,pH,o6,S6,bG,s6,I6,O6,NG,uG,aX,hH,QD,aW,G6,Cb,zb,jb,Gb,Tb,Ib,LH,Eb,Lb,Ob,Mb,_b,B6,aH,Bb,function(n){n.registerMenu("context.menu.layer2",[{type:"button",title:"Layer"}]),n.registerMenu("context.menu.layer",[{type:"button",title:"Sample"},{type:"button",title:"Sample"},{type:"button",title:"Sample",action:e=>{console.log(e)}},{type:"button",title:"Sample"},{type:"dropdown",title:"dropdown",items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/",closable:!0}]}]),n.registerUI("context.menu",{ContextMenuView:WD})}];class fX extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",co.DESIGN))}[$e("$el")](){return{style:{display:this.$config.is("editor.design.mode",co.DESIGN)?"block":"none"}}}template(){return D("div",{class:"feature-control inspector"},D("div",null,D(zc,{ref:"$tab",selectedValue:"style",onchange:e=>{this.$config.set("inspector.selectedValue",e)}},D(Hn,{value:"style",title:this.$i18n("inspector.tab.title.design")},D("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.style",!0),D("div",{class:"empty",style:"order: 1000000;"}))),D(Hn,{value:"transition",title:this.$i18n("inspector.tab.title.transition")},D("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.transition",!0),D("div",{class:"empty",style:"order: 1000000;"}))),D(Hn,{value:"code",title:this.$i18n("inspector.tab.title.code")},D("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.code",!0),D("div",{class:"empty",style:"order: 1000000;"}))),this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,loadElements:r}=e.class;return D(Hn,{value:t,title:i,icon:e.icon},D("div",{style:"display: flex: flex-direction: column;"},r.map(s=>dl(s)),this.$injectManager.generate("inspector.tab."+e.value,!0),D("div",{class:"empty",style:"order: 1000000;"})))}))))}}class gX extends ge{template(){return` -
      - ${this.$injectManager.generate("asset")} -
      - `}}var une="";class mX extends ge{template(){return` -
      -
      -
      -
      - -
      + ${R("MediaProgressEditor",{ref:"$progress",key:"playTime",value:e.playTime,onchange:"changeSelect"})}
      -
      -
      - `}async[ve("$list")](){return(await this.$storageManager.getCustomAssetList()).map(t=>` -
      -
      -
      -
      ${t.component.name}
      -
      - + `}[M("changeCurrentTime")](e,t){this.setState({currentTime:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({currentTime:t}))}[M("changePlaybackRate")](e,t){this.setState({playbackRate:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({playbackRate:t}))}[ud("$volume")](){const e=Number(this.refs.$volume.value);this.setState({volume:e},!1),this.bindData("$volume_control"),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({volume:e}))}[ne("$volume_control")](){return{"data-selected-value":this.volumeStatus}}[ne("$tools")](){return{"data-selected-value":this.state.status}}[A("$tools button")](e){var t=e.$dt.attr("data-value");switch(t){case"play":this.setState({status:"pause"},!1),this.play();break;case"pause":this.setState({status:"play"},!1),this.pause();break}this.bindData("$tools")}[Z("changeValue")+Ne(100)](e,t){!this.state.$video||this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[Z("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[Z("updateVideoEvent")](){this.video.paused&&(this.setState({status:"play",currentTime:this.video.currentTime},!1),this.bindData("$tools")),this.children.$currentTime.setValue(this.video.currentTime)}[M(Oe)+Ne(100)](){const e=this.$context.selection.current;this.refreshShow(["video"]),e&&e.is("video")&&this.emit("refElement",e.id,t=>{const r=t.$("video");this.state.$video=r,this.setState({volume:e.volume,currentTime:e.currentTime,playbackRate:e.playbackRate},!1),this.video.ontimeupdate=i=>{this.trigger("updateVideoEvent",i)},this.video.onprogress=i=>{this.trigger("updateVideoEvent",i)},this.load("$body")})}}function iA(s){s.registerUI("inspector.tab.style",{VideoProperty:rA})}class sA extends Y{template(){return` +
      +
      +
      -
      -
      - `)}async[se("$list .remove-asset-preview")](e){if(window.confirm(this.$i18n("app.confirm.message.artboard.items.removeCustomAsset"))){const t=e.$dt.data("preview-id");await this.$storageManager.removeCustomAsset(t),this.refresh()}}[on("$list .asset-preview")](e){const t=e.$dt.data("preview-id");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/asset",t)}[se("$addCustomAsset")](){this.$commands.emit("savePNG",async e=>{await this.$storageManager.saveCustomAsset(e),this.refresh()})}}var pne="";class vX extends ge{template(){return` -
      -
      - ${W("TextEditor",{label:"Search",key:"search",onchange:this.subscribe((e,t)=>{this.broadcast("search",t)},300)})} -
      - ${this.$injectManager.generate("library")} -
      - `}}var fne="";class yX extends ge{template(){return` -
      -
      - ${W("ProjectProperty")} -
      -
      - ${W("LayerTreeProperty")} -
      -
      - `}}class Zb extends ge{components(){return{AssetItems:gX,LibraryItems:vX,CustomAssets:mX,ObjectItems:yX}}initState(){return{selectedIndexValue:2}}template(){return` -
      -
      -
      -
      - -
      -
      - -
      -
      - -
      -
      - -
      - - ${this.$injectManager.getTargetUI("leftbar.tab").map(e=>{const{value:t,title:i}=e.class;let r=e.class.icon;return We[e.class.icon]&&(r=re(e.class.icon)),` -
      - +
      +
      + +
      HEX
      - `})} - -
      -
      -
      - ${W("ObjectItems")} -
      -
      - ${W("LibraryItems")} -
      -
      - ${W("AssetItems")} -
      - ${W("GradientAssetsProperty")} - ${W("PatternAssetsProperty")} - ${W("ImageAssetsProperty")} - ${W("VideoAssetsProperty")} - -
      -
      - ${W("CustomAssets")} -
      - ${this.$injectManager.getTargetUI("leftbar.tab").map(e=>{const{value:t}=e.class;return` -
      - ${this.$injectManager.generate(`leftbar.tab.${t}`)} +
      +
      + +
      R
      - `})} -
      -
      -
      - `}[se("$header .tab-item:not(.extra-item)")](e){var t=e.$dt.attr("data-value");this.state.selectedIndexValue!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndexValue}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedIndexValue:t},!1))}}var gne="";class bX extends ge{template(){return` - - `}[se()](){this.$config.toggle("show.left.panel")}}var mne="";class xX extends ge{template(){return` - - `}[se()](){this.$config.toggle("show.right.panel")}}class _X extends ge{get locales(){return Object.keys(this.$editor.i18n.locales)}template(){var e=this.locales.map(t=>{var i=this.$i18n(`app.lang.${t}`);return{text:i,value:t}});return` -
      -
      - ${W("SelectEditor",{ref:"$locale",options:e,value:this.$editor.locale,onchange:"changeLocale"})} - /> +
      + +
      G
      +
      + +
      B
      +
      +
      + +
      A
      +
      - `}[Me("changeLocale")](e,t){this.$command.emit("setLocale",t)}}class SX extends ge{template(){var e=["all","css","svg"].map(t=>{var i=this.$i18n(`app.layout.${t}`);return{value:t,text:i}});return` -
      -
      - ${W("SelectEditor",{ref:"$locale",options:e,value:this.$editor.layout,onchange:"changeEditorLayoutValue"})} - - /> +
      +
      + +
      H
      +
      +
      + +
      %
      +
      S
      +
      +
      + +
      %
      +
      L
      +
      +
      + +
      A
      - `}[Me("changeEditorLayoutValue")](e,t){this.$config.set("editor.layout.mode",t)}}var vne="";class wX extends Cr{getIconString(){return"source"}getTitle(){return this.$i18n("menu.item.download.title")}clickButton(){this.$commands.emit("downloadJSON")}}class MX extends Cr{getIconString(){return"outline"}getTitle(){return"Outline"}isHideTitle(){return!0}clickButton(){this.$config.toggle("show.outline"),this.$commands.emit("addLayerView","select")}[Qt("show.outline")](e){this.setSelected(e)}}class $X extends Cr{getIconString(){return"redo"}getTitle(){return"Redo"}isHideTitle(){return!0}clickButton(){this.$commands.emit("history.redo")}}class PX extends Cr{getIconString(){return"storage"}getTitle(){return this.$i18n("menu.item.save.title")}clickButton(){this.$commands.emit("saveJSON"),this.nextTick(()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)})}}class TX extends Cr{getIconString(){return"undo"}getTitle(){return"Undo"}isHideTitle(){return!0}clickButton(){this.$commands.emit("history.undo")}}class Jb extends ge{initState(){return{items:[{type:"dropdown",style:{padding:"12px 0px 12px 12px"},icon:`
      `,items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"},{title:"menu.item.shortcuts.title",command:"showShortcutWindow"},"-",{title:"menu.item.export.title",command:"showExportView"},{title:"menu.item.export.title",command:"showEmbedEditorWindow"},{title:"menu.item.download.title",command:"downloadJSON"},{title:"menu.item.save.title",command:"saveJSON",nextTick:()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)}},{title:"menu.item.language.title",items:[{title:"English",command:"setLocale",args:[ca.EN],checked:e=>e.locale===ca.EN},{title:"Fran\xE7ais",command:"setLocale",args:[ca.FR],checked:e=>e.locale===ca.FR},{title:"Korean",command:"setLocale",args:[ca.KO],checked:e=>e.locale===ca.KO}]},"-",{title:"EasyLogic Studio",items:[{type:"link",title:"Github",href:"https://github.com/easylogic/editor"},{type:"link",title:"Learn",href:"https://www.easylogic.studio"}]}]}]}}components(){return{ToolBarRenderer:ny,LayoutSelector:SX,LanguageSelector:_X,ThemeChanger:oy,Outline:MX,ExportView:ay,Download:wX,Save:PX,Undo:TX,Redo:$X,DropdownMenu:Yf}}template(){return` -
      -
      - ${W("ToolBarRenderer",{items:this.state.items})} +
      + `}get manager(){return this.parent.manager}setCurrentFormat(e){this.format=e,this.initFormat()}initFormat(){var e=this.format||"hex";["hex","rgb","hsl"].filter(t=>t!==e).forEach(t=>{this.$el.removeClass(t)}),this.$el.addClass(e)}nextFormat(){var e=this.format||"hex",t="hex";e=="hex"?t="rgb":e=="rgb"?t="hsl":e=="hsl"&&(this.parent.alpha==1?t="hex":t="rgb"),this.format=t,this.initFormat(),this.parent.changeFormat(this.format)}goToFormat(e){this.format=e,(e==="rgb"||e==="hsl")&&this.initFormat(),this.parent.changeFormat(this.format)}getFormat(){return this.format||"hex"}changeRgbColor(){this.parent.lastUpdateColor({type:"rgb",r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()})}changeHslColor(){this.parent.lastUpdateColor({type:"hsl",h:this.refs.$hsl_h.int(),s:this.refs.$hsl_s.int(),l:this.refs.$hsl_l.int(),a:this.refs.$hsl_a.float()})}hasValue(e){return e.target.value!==""}[dt("$rgb_r")+fe("hasValue")](){this.changeRgbColor()}[dt("$rgb_g")+fe("hasValue")](){this.changeRgbColor()}[dt("$rgb_b")+fe("hasValue")](){this.changeRgbColor()}[dt("$rgb_a")+fe("hasValue")](){this.changeRgbColor()}[dt("$hsl_h")+fe("hasValue")](){this.changeHslColor()}[dt("$hsl_s")+fe("hasValue")](){this.changeHslColor()}[dt("$hsl_l")+fe("hasValue")](){this.changeHslColor()}[dt("$hsl_a")+fe("hasValue")](){this.changeHslColor()}[er("$hexCode")+fe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[cd("$hexCode")+fe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[A("$formatChangeButton")](){this.nextFormat()}[A("$el .information-item.hex .input-field .title")](){this.goToFormat("hex")}[A("$el .information-item.rgb .input-field .title")](){this.goToFormat("hsl")}[A("$el .information-item.hsl .input-field .title")](){this.goToFormat("rgb")}setRGBInput(){this.refs.$rgb_r.val(this.manager.rgb.r),this.refs.$rgb_g.val(this.manager.rgb.g),this.refs.$rgb_b.val(this.manager.rgb.b),this.refs.$rgb_a.val(this.manager.alpha)}setHSLInput(){this.refs.$hsl_h.val(this.manager.hsl.h),this.refs.$hsl_s.val(this.manager.hsl.s),this.refs.$hsl_l.val(this.manager.hsl.l),this.refs.$hsl_a.val(this.manager.alpha)}setHexInput(){this.refs.$hexCode.val(this.manager.toString("hex"))}setValue(){this.refresh()}refresh(){this.setCurrentFormat(this.manager.format),this.setRGBInput(),this.setHSLInput(),this.setHexInput()}}class aA extends Y{initState(){return{hueColor:"rgba(0, 0, 0, 1)",s:0,v:0}}template(){return` +
      +
      +
      +
      -
      -
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} - ${this.$injectManager.generate("toolbar.left")} -
      -
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} - ${this.$injectManager.generate("toolbar.center")} -
      -
      - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} - ${this.$injectManager.generate("toolbar.right")} - ${W("ThemeChanger")} -
      +
      +
      + `}afterRender(){this.rect=this.$el.rect()}[ne("$el")](){return{style:{"background-color":this.state.hueColor}}}[ne("$drag_pointer")](){(!this.rect||this.rect.width===0)&&(this.rect=this.$el.rect());const e=this.rect.width*this.state.s,t=this.rect.height*(1-this.state.v);return{style:{left:e,top:t}}}[me("$el")+xe("movePointer")+Se("moveEndPointer")](){this.rect=this.$el.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}moveEndPointer(){this.parent.changeEndColor()}refreshColorUI(){const e=this.$config.get("bodyEvent"),t=this.rect.left,r=this.rect.right,i=this.rect.top,a=this.rect.bottom,n=Math.min(r,Math.max(t,e.clientX)),o=Math.min(a,Math.max(i,e.clientY)),l=r-t,c=a-i;var h=(n-t)/l,u=(c-(o-i))/c;this.parent.changeColor({type:"hsv",s:h,v:u})}setValue(e,t,r){this.setState({s:e,v:t,hueColor:r})}}class nA extends Y{initState(){return{value:"rgba(0, 0, 0, 1)"}}template(){return"
      "}[ne("$el")](){return{style:{"background-color":this.state.value}}}setValue(e){this.setState({value:e})}}class oA extends Y{initState(){return{hue:0,minValue:0,maxValue:360}}template(){return` +
      +
      +
      - `}[Qt("language.locale")](){this.refresh()}}var yne="",bne="";class Qb extends ge{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` + `}[ne("$bar")](){const e=this.state.hue;return{style:{left:p.makePercent(e,360)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[me("$container")+xe("movePointer")+Se("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,i=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({h:i*this.state.maxValue,type:"hsv"})}setValue(e){this.setState({hue:e})}}class lA extends Y{initState(){return{colorbar:pt("rgba(0, 0, 0, 1)"),opacity:0,minValue:0,maxValue:100}}template(){return` +
      +
      +
      +
      +
      +
      + `}[ne("$colorbar")](){const e=be(this.state.colorbar);e.a=0;const t=$i(e,"rgb");e.a=1;const r=$i(e,"rgb");return{style:{background:`linear-gradient(to right, ${t}, ${r})`}}}[ne("$bar")](){const e=this.state.opacity*100;return{style:{left:p.percent(e)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[me("$container")+xe("movePointer")+Se("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,i=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({a:i.toFixed(2)})}setValue(e,t){this.setState({opacity:t,colorbar:e})}}class cA{constructor(){this.initialize()}initialize(){this.state={rgb:{},hsl:{},hsv:{},alpha:1,format:"hex"}}get hsv(){return this.state.hsv}get rgb(){return this.state.rgb}get hsl(){return this.state.hsl}get hex(){return this.state.hex}get alpha(){return typeof this.state.alpha=="undefined"?1:this.state.alpha}get format(){return this.state.format}changeFormat(e){this.state.format=e}initColor(e){this.changeColor(e)}changeColor(e){e=e||"#FF0000",typeof e=="string"&&(e=pt(e)),this.state.alpha=typeof e.a!="undefined"?e.a:this.state.alpha,this.state.format=e.type!="hsv"?e.type||this.state.format:this.state.format,e.type=="hsl"?(this.state.hsl=b(b({},this.state.hsl),e),this.state.rgb=Ya(this.state.hsl),this.state.hsv=ou(e)):e.type=="hex"?(this.state.rgb=b(b({},this.state.rgb),e),this.state.hsl=bi(this.state.rgb),this.state.hsv=Xa(e)):e.type=="rgb"?(this.state.rgb=b(b({},this.state.rgb),e),this.state.hsl=bi(this.state.rgb),this.state.hsv=Xa(e)):e.type=="hsv"&&(this.state.hsv=b(b({},this.state.hsv),e),this.state.rgb=Oo(this.state.hsv),this.state.hsl=Cu(this.state.hsv))}getHueColor(){return Mu(this.state.hsv.h/360)}toString(e){e=e||this.state.format;var t=this.state[e]||this.state.rgb;return $i(se(b({},t),{a:this.state.alpha}),e)}toColor(e){return e=(e||this.state.format).toLowerCase(),this.toString(e)}}class hA extends Y{created(){this.manager=new cA}initState(){const e=this.props.value||"rgba(0, 0, 0, 1)";return this.manager.initColor(e),{key:this.props.key,value:this.manager.toString()}}updateData(e={}){this.setState(e,!1),this.modifyColorPicker()}modifyColorPicker(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initColor(e,t){this.manager.changeColor(e,t),this.refresh()}changeColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.updateData({value:this.manager.toColor()})}[Z("selectColorAssets")](e,t){this.lastUpdateColor(t)}changeFormat(e){this.manager.changeFormat(e),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}lastUpdateColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}changeEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}refresh(){const e=this.manager.toColor();this.children.$palette.setValue(this.manager.hsv.s,this.manager.hsv.v,this.manager.getHueColor()),this.children.$opacity.setValue(this.manager.rgb,this.manager.alpha),this.children.$hue.setValue(this.manager.hsv.h),this.children.$colorview.setValue(e),this.children.$information.setValue()}components(){return{Hue:oA,Opacity:lA,ColorView:nA,Palette:aA,ColorInformation:sA}}template(){return` +
      +
      + ${R("Palette",{ref:"$palette"})} +
      + ${R("Hue",{ref:"$hue"})} + ${R("Opacity",{ref:"$opacity"})} +
      + ${R("ColorView",{ref:"$colorview"})} +
      + ${R("ColorInformation",{ref:"$information"})} + ${this.$context.injectManager.generate("colorpicker")} + ${R("ColorAssetsEditor",{ref:"$colorAsset",key:"colorAssets",onchange:"selectColorAssets"})} +
      +
      + `}}var nB="";class dA extends Ar{getTitle(){return this.$i18n("colorpicker.popup.title")}getClassName(){return"compact elf--colorpicker-popup"}initState(){return{color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEvent,this.state.color,this.params)}updateEndData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEndEvent,this.state.color,this.params)}getBody(){return` +
      +
      + ${R("EmbedColorPicker",{ref:"$color",value:this.state.color,onchange:e=>this.updateData({color:e}),onchangeend:e=>this.updateEndData({color:e})})} +
      + `}[G("$projectColors")](){var e=this.$context.selection.currentProject||{colors:[]},t=e.colors;return t.map(r=>` +
      +
      +
      `)}[A("$projectColors .color-view")](e){this.updateData({color:e.$dt.attr("data-color")}),this.children.$color.setValue(this.state.color)}[M("showColorPickerPopup")](e,t,r){if(e.changeEvent=e.changeEvent||"changeFillPopup",!(e.target instanceof oi))throw new Error("ColorPicker needs data.target");this.params=t,this.setState(e,!1),this.children.$color.setValue(this.state.color),this.showByRect(this.makeRect(245,500,r))}[M("hideColorPickerPopup")](){this.hide()}}class uA extends Y{initState(){return{value:this.props.value||"rgba(0, 0, 0, 1)"}}template(){return` +
      + ${R("ColorPickerEditor",{ref:"$colorpicker",key:"colorpicker",value:this.state.value,onchange:"localChangeColor",onchangeend:"localLastUpdate"})} +
      + `}[Z("localChangeColor")](e,t){this.parent.trigger(this.props.onchange,t)}[Z("localLastUpdate")](e,t){this.parent.trigger(this.props.onchangeend,t)}setValue(e){this.state.value=e,this.children.$colorpicker.initColor(e)}refresh(){this.children.$colorpicker.initColor(this.props.value)}}function pA(s){s.registerElement({ColorPickerEditor:hA,EmbedColorPicker:uA}),s.registerUI("popup",{ColorPickerPopup:dA})}var oB="";class gA extends Ar{getClassName(){return"component-property w(800)"}getTitle(){return"Component"}initState(){return{title:"",inspector:[]}}refresh(){this.setTitle(this.state.title||this.getTitle()),this.load()}getBody(){return` +
      + `}[ne("$body")](){return{style:{width:this.state.width||250}}}[G("$body")](){const e=this.state.inspector;return R("ComponentEditor",{inspector:e,onchange:"changeComponent"})}[Z("changeComponent")](e,t){de(this.state.changeEvent)&&this.emit(this.state.changeEvent,e,t)}[M(Ed)](e){this.setState(e,!1),this.refresh(),this.show(e.width)}}var lB="";class fA extends Ge{getClassName(){return"component-property"}getTitle(){return"Component"}isShow(){var r;var e=(r=this.$context.selection)==null?void 0:r.current;const t=this.$context.components.createInspector(e);return!!(e&&(e.is("component")||t.length>0))}[M(Oe)+Ne(100)](){this.refreshShow(()=>{const e=this.$context.selection.current;return this.$context.components.createInspector(e).length>0})}refresh(){var e=this.$context.selection.current;e&&(this.setTitle(e.getDefaultTitle()||e.itemType||e.name),this.load())}getBody(){return` +
      + `}[G("$body")](){var r;var e=(r=this.$context.selection)==null?void 0:r.current;if(!e)return"";const t=this.$context.components.createInspector(e);return t.forEach(i=>{if(it(i))return;let a=e[i.key]||i.defaultValue;de(i.convertDefaultValue)&&(a=i.convertDefaultValue(e,i.key)),i.defaultValue=a}),R("ComponentEditor",{ref:"$comp",inspector:t,onchange:"changeComponentProperty"})}[Z("changeComponentProperty")](e,t){this.$commands.executeCommand("setAttribute","change component : "+e,this.$context.selection.packByValue({[e]:t}))}}function mA(s){s.registerUI("inspector.tab.style",{ComponentProperty:fA}),s.registerUI("popup",{ComponentPopup:gA})}var cB="";class vA extends Ge{getTitle(){return"Content"}[M(Oe,Id)+Ne(100)](){this.refreshShow(["text"])}getBody(){return` +
      + +
      + `}[ne("$contentItem")](){var e=this.$context.selection.current;return e?{value:e.content||""}:""}[dt("$contentItem")](){this.setContent()}setContent(){var e=this.$context.selection.current;if(e){var t={content:this.refs.$contentItem.value};e.reset(t),this.emit(Mt,e)}}}function yA(s){s.registerElement({ContentProperty:vA})}var bA=[i6,oO,IR,Xd,Yd,Zd,F8,H8,wj,Wd,Zu,pA,o9,dR,I9,C4,ej,CR,nM,XR,O4,Xz,t9,Yz,Zz,yA,L4,mA,H4,QR,Q4,iM,iA,T9,iz,Uz,A9,D4,eM,e9,z4,lM,pM,W8,tA,O9,E4,tz,$M,x9,rj,Gj,qj,y9,j9,kR,_9,OR,UR,g9,q8,bM,M9,Bj,function(s){s.registerMenu("context.menu.layer2",[{type:"button",title:"Layer"}]),s.registerMenu("context.menu.layer",[{type:"button",title:"Sample"},{type:"button",title:"Sample"},{type:"button",title:"Sample",action:e=>{console.log(e)}},{type:"button",title:"Sample"},{type:"dropdown",title:"dropdown",items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/",closable:!0}]}]),s.registerUI("context.menu",{ContextMenuView:P4})}],hB="",dB="";class yg extends Y{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return`
      - `}[U("drawAreaView")](e){this.refs.$dragAreaRect.css(e)}[U("initDrawAreaView")](){this.trigger("drawAreaView",{left:y.px(-1e4),top:y.px(0),width:y.px(0),height:y.px(0)})}[U("startDragAreaView")](){this.initMousePoint=this.$viewport.getWorldPosition(),this.dragRect={left:y.px(this.initMousePoint[0]),top:y.px(this.initMousePoint[1]),width:y.px(0),height:y.px(0)},this.trigger("drawAreaView",this.dragRect)}getSelectedItems(e,t){var i=this.$context.selection.currentProject;let r=[],s=[];return i&&(e.width===0&&e.height===0?r=[]:(i.layers.forEach(o=>{o.is("artboard")&&o.isIncludeByArea(t)?s.push(o):o.is("artboard")&&o.checkInArea(t)&&o.hasChildren()===!1?r.push(o):r.push.apply(r,o.checkInAreaForAll(t))}),r=r.filter(o=>o.isDragSelectable),r.length>1&&(r=r.filter(o=>o.is("artboard")===!1)))),s.length?s:r}[U("moveDragAreaView")](){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),i=Gn([],ft([],t,this.initMousePoint));e.shiftKey&&(i[1]=i[0]);const r=Gn([],this.initMousePoint),s=Gn([],_t([],this.initMousePoint,i)),a=this.$viewport.applyVertex(r),o=this.$viewport.applyVertex(s),l=wn([a,o]);this.dragRect={left:l[0][0],top:l[0][1],width:Math.abs(l[1][0]-l[0][0]),height:Math.abs(l[3][1]-l[0][1])},this.trigger("drawAreaView",{left:y.px(this.dragRect.left),top:y.px(this.dragRect.top),width:y.px(this.dragRect.width),height:y.px(this.dragRect.height)});var{left:c,top:h,width:d,height:u}=this.dragRect,p={x:c,y:h,width:d,height:u};const f=this.getSelectedItems(p,My([r,s]));this.$context.selection.selectByGroup(...f)}[U("endDragAreaView")](){const e=this.$viewport.getWorldPosition(),t=Gn([],ft([],e,this.initMousePoint));this.$config.init("set.move.control.point",!1),t[0]===0&&t[1]===0&&this.$context.selection.empty(),this.trigger("initDrawAreaView"),this.$context.selection.reselect(),this.$commands.emit("history.refreshSelection")}}class ex extends ge{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` + `}[M("drawAreaView")](e){this.refs.$dragAreaRect.css(e)}[M("initDrawAreaView")](){this.trigger("drawAreaView",{left:p.px(-1e4),top:p.px(0),width:p.px(0),height:p.px(0)})}[M("startDragAreaView")](){this.initMousePoint=this.$viewport.getWorldPosition(),this.dragRect={left:p.px(this.initMousePoint[0]),top:p.px(this.initMousePoint[1]),width:p.px(0),height:p.px(0)},this.trigger("drawAreaView",this.dragRect)}getSelectedItems(e,t){var r=this.$context.selection.currentProject;let i=[],a=[];return r&&(e.width===0&&e.height===0?i=[]:(r.layers.forEach(o=>{o.is("artboard")&&o.isIncludeByArea(t)?a.push(o):o.is("artboard")&&o.checkInArea(t)&&o.hasChildren()===!1?i.push(o):i.push.apply(i,o.checkInAreaForAll(t))}),i=i.filter(o=>o.isDragSelectable),i.length>1&&(i=i.filter(o=>o.is("artboard")===!1)))),a.length?a:i}[M("moveDragAreaView")](){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),r=Zr([],_e([],t,this.initMousePoint));e.shiftKey&&(r[1]=r[0]);const i=Zr([],this.initMousePoint),a=Zr([],we([],this.initMousePoint,r)),n=this.$viewport.applyVertex(i),o=this.$viewport.applyVertex(a),l=Or([n,o]);this.dragRect={left:l[0][0],top:l[0][1],width:Math.abs(l[1][0]-l[0][0]),height:Math.abs(l[3][1]-l[0][1])},this.trigger("drawAreaView",{left:p.px(this.dragRect.left),top:p.px(this.dragRect.top),width:p.px(this.dragRect.width),height:p.px(this.dragRect.height)});var{left:c,top:h,width:u,height:d}=this.dragRect,v={x:c,y:h,width:u,height:d};const g=this.getSelectedItems(v,uu([i,a]));this.$context.selection.selectByGroup(...g)}[M("endDragAreaView")](){const e=this.$viewport.getWorldPosition(),t=Zr([],_e([],e,this.initMousePoint));this.$config.init("set.move.control.point",!1),t[0]===0&&t[1]===0&&this.$context.selection.empty(),this.trigger("initDrawAreaView"),this.$context.selection.reselect(),this.$commands.emit("history.refreshSelection")}}class bg extends Y{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return`
      - `}checkSelectionArea(e){const t=this.$viewport.getWorldPosition(e);if(this.$context.selection.hasPoint(t))return!0}checkEditMode(e){if(this.$config.is("editing.mode",Ti.HAND))return!1;const t=this.$context.shortcuts.getGeneratedKeyCode(pa.space);if(this.$context.keyboardManager.check(t))return!1;const i=this.$viewport.getWorldPosition(e);return this.inSelection=!1,this.$context.selection.hasPoint(i)?(this.inSelection=!0,this.$context.selection.current.is("artboard")?this.$context.selection.current.hasChildren()?(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0)):(this.mouseOverItem=this.$context.selection.filteredLayers[0],this.mouseOverItem?(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0)):(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1)),!0)}[qe("$dragAreaView")+Qe("checkEditMode")+at("movePointer")+lt("moveEndPointer")](){this.$config.get("set.dragarea.mode")&&this.emit("startDragAreaView"),this.$config.set("editing.mode.itemType","select")}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}movePointer(){this.$config.get("set.dragarea.mode")&&this.emit("moveDragAreaView")}moveEndPointer(){this.$config.get("set.dragarea.mode")&&this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!1)}}var xne="";class CX extends ge{template(){return` + `}checkSelectionArea(e){const t=this.$viewport.getWorldPosition(e);if(this.$context.selection.hasPoint(t))return!0}checkEditMode(e){if(this.$config.is("editing.mode",St.HAND))return!1;const t=this.$context.shortcuts.getGeneratedKeyCode(Yi.space);if(this.$context.keyboardManager.check(t))return!1;const r=this.$viewport.getWorldPosition(e);return this.inSelection=!1,this.$context.selection.hasPoint(r)?(this.inSelection=!0,this.$context.selection.current.is("artboard")?this.$context.selection.current.hasChildren()?(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0)):(this.mouseOverItem=this.$context.selection.filteredLayers[0],this.mouseOverItem?(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0)):(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1)),!0)}[me("$dragAreaView")+fe("checkEditMode")+xe("movePointer")+Se("moveEndPointer")](){this.$config.get("set.dragarea.mode")&&this.emit("startDragAreaView"),this.$config.set("editing.mode.itemType","select")}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}movePointer(){this.$config.get("set.dragarea.mode")&&this.emit("moveDragAreaView")}moveEndPointer(){this.$config.get("set.dragarea.mode")&&this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!1)}}var uB="";class xA extends Y{template(){return`
      - +
      - ${W("NumberInputEditor",{ref:"$scaleInput",min:10,max:240,step:1,key:"scale",value:this.$viewport.scale*100,onchange:this.subscribe((e,t)=>{this.$viewport.setScale(t/100),this.emit(si),this.trigger(si)},1e3)})} + ${R("NumberInputEditor",{ref:"$scaleInput",min:10,max:240,step:1,key:"scale",value:this.$viewport.scale*100,onchange:this.subscribe((e,t)=>{this.$viewport.setScale(t/100),this.emit(st),this.trigger(st)},1e3)})}
      - - - - + + + + ${this.$injectManager.generate("page.tools")}
      - `}[U(si)](){const e=Math.floor(this.$viewport.scale*100);this.children.$scaleInput&&this.children.$scaleInput.setValue(e)}[se("$plus")](){const e=this.$viewport.scale;this.$viewport.setScale(e+.01),this.emit(si),this.trigger(si)}[se("$minus")](){const e=this.$viewport.scale;this.$viewport.setScale(e-.01),this.emit(si),this.trigger(si)}[se("$center")](){this.$commands.emit("moveSelectionToCenter")}[se("$ruler")](){this.$config.toggle("show.ruler")}[se("$fullscreen")](){this.emit("bodypanel.toggle.fullscreen")}[se("$buttons button")](e){const t=e.$dt.data("item-id"),i=e.$dt.data("path-index"),r=this.$editor.get(t);if(r.editablePath)this.$commands.emit("open.editor",r);else{const s=_e.fromSVGString(r.absolutePath().d).toPathList();this.emit("showPathEditor","modify",{box:"canvas",current:r,matrix:r.matrix,d:s[i].d,changeEvent:a=>{s[i].reset(a.d);const o=r.invertPath(_e.joinPathList(s).d).d;this.$commands.executeCommand("setAttribute","modify sub path",{[t]:r.updatePath(o)})}})}this.emit("hideSelectionToolView")}}const EX=[/\(/gi,/\)/gi],IX="grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map(n=>new RegExp(n,"gi")),LX="butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map(n=>new RegExp(n,"gi"));function kX(n){return LX.forEach(e=>{n=n.replace(e,t=>`${t}`)}),IX.forEach(e=>{n=n.replace(e,t=>`${t}`)}),EX.forEach(e=>{n=n.replace(e,t=>`${t}`)}),n}function sm(n){return n.split(";").filter(e=>e.trim()).map(e=>{e=e.trim();var[t,i]=e.split(":").map(r=>r.trim());return i===""?"":`
      ${t}: ${kX(i)};
      `}).join("").trim()}function AX(n){return n.replace(/;/gi,`; -`).trim()}class RX{constructor(e){zi(this,Md,void 0);zi(this,Sc,{});this.editor=e,Vi(this,Md,ho())}setRendererType(e,t){t.setRenderer(this),Pt(this,Sc)[e]=t}get id(){return Pt(this,Md)}getDefaultRendererInstance(){return Pt(this,Sc).rect}getRendererInstance(e){const t=Pt(this,Sc)[e.itemType]||this.editor.getRendererInstance("html",e.itemType)||this.getDefaultRendererInstance()||e;return t.setRenderer(this),t}render(e){if(!e)return;const t=this.getRendererInstance(e);if(t)return t.render(e)}renderSVG(e){const t=this.getRendererInstance(e);return Ue(t.renderSVG)?t.renderSVG(e):this.getDefaultRendererInstance().renderSVG(e)}to(e,t){const i=this.getRendererInstance(t);if(Ue(i[e]))return i[e].call(i,t);const r=this.getDefaultRendererInstance();if(Ue(r[e]))return r[e].call(r,t)}toCSS(e,t={}){const i=this.to("toCSS",e);return Object.keys(t).forEach(r=>{delete i[r]}),i}toNestedCSS(e){return this.to("toNestedCSS",e)}toTransformCSS(e){return this.to("toTransformCSS",e)}toGridLayoutCSS(e){return this.to("toGridLayoutCSS",e)}toLayoutItemCSS(e){return this.to("toLayoutItemCSS",e)}toLayoutBaseModelCSS(e){return this.to("toLayoutBaseModelCSS",e)}toStyle(e){const t=this.getRendererInstance(e);return Ue(t.toStyle)?t.toStyle(e):this.getDefaultRendererInstance().toStyle(e)}toStyleData(e){const t=this.getRendererInstance(e);return Ue(t.toStyleData)?t.toStyleData(e):this.getDefaultRendererInstance().toStyleData(e)}toExportStyle(e){const t=this.getRendererInstance(e);return Ue(t.toExportStyle)?t.toExportStyle(e):this.getDefaultRendererInstance().toExportStyle(e)}update(e,t,i){const r=this.getRendererInstance(e);return Ue(r.update)?r.update(e,t,i):this.getDefaultRendererInstance().update(e,t,i)}codeview(e){if(!e)return"";const t=e.project;let i=AX(sm(t?t.toKeyframeString():"")),r=t?ei(t.toRootVariableCSS()):"";const s=e,a=sm(s?Vy(ei(this.toCSS(s))):""),o=s?this.toNestedCSS(s).map(c=>{var h=c.cssText?c.cssText:ei(c.css);return`${c.selector} { - ${sm(Vy(h))} - }`}):[],l=s?s.selectors:[];return` + `}[M(st)](){const e=Math.floor(this.$viewport.scale*100);this.children.$scaleInput&&this.children.$scaleInput.setValue(e)}[A("$plus")](){const e=this.$viewport.scale;this.$viewport.setScale(e+.01),this.emit(st),this.trigger(st)}[A("$minus")](){const e=this.$viewport.scale;this.$viewport.setScale(e-.01),this.emit(st),this.trigger(st)}[A("$center")](){this.$commands.emit("moveSelectionToCenter")}[A("$ruler")](){this.$config.toggle("show.ruler")}[A("$fullscreen")](){this.emit("bodypanel.toggle.fullscreen")}[A("$buttons button")](e){const t=e.$dt.data("item-id"),r=e.$dt.data("path-index"),i=this.$editor.get(t);if(i.editablePath)this.$commands.emit("open.editor",i);else{const a=K.fromSVGString(i.absolutePath().d).toPathList();this.emit("showPathEditor","modify",{box:"canvas",current:i,matrix:i.matrix,d:a[r].d,changeEvent:n=>{a[r].reset(n.d);const o=i.invertPath(K.joinPathList(a).d).d;this.$commands.executeCommand("setAttribute","modify sub path",{[t]:i.updatePath(o)})}})}this.emit("hideSelectionToolView")}}const $A=[/\(/gi,/\)/gi],_A="grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map(s=>new RegExp(s,"gi")),SA="butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map(s=>new RegExp(s,"gi"));function PA(s){return SA.forEach(e=>{s=s.replace(e,t=>`${t}`)}),_A.forEach(e=>{s=s.replace(e,t=>`${t}`)}),$A.forEach(e=>{s=s.replace(e,t=>`${t}`)}),s}function uh(s){return s.split(";").filter(e=>e.trim()).map(e=>{e=e.trim();var[t,r]=e.split(":").map(i=>i.trim());return r===""?"":`
      ${t}: ${PA(r)};
      `}).join("").trim()}function wA(s){return s.replace(/;/gi,`; +`).trim()}class CA{constructor(e){Pt(this,Hn,void 0);Pt(this,Ca,{});this.editor=e,wt(this,Hn,ws())}setRendererType(e,t){t.setRenderer(this),Te(this,Ca)[e]=t}get id(){return Te(this,Hn)}getDefaultRendererInstance(){return Te(this,Ca).rect}getRendererInstance(e){const t=Te(this,Ca)[e.itemType]||this.editor.getRendererInstance("html",e.itemType)||this.getDefaultRendererInstance()||e;return t.setRenderer(this),t}render(e){if(!e)return;const t=this.getRendererInstance(e);if(t)return t.render(e)}renderSVG(e){const t=this.getRendererInstance(e);return de(t.renderSVG)?t.renderSVG(e):this.getDefaultRendererInstance().renderSVG(e)}to(e,t){const r=this.getRendererInstance(t);if(de(r[e]))return r[e].call(r,t);const i=this.getDefaultRendererInstance();if(de(i[e]))return i[e].call(i,t)}toCSS(e,t={}){const r=this.to("toCSS",e);return Object.keys(t).forEach(i=>{delete r[i]}),r}toNestedCSS(e){return this.to("toNestedCSS",e)}toTransformCSS(e){return this.to("toTransformCSS",e)}toGridLayoutCSS(e){return this.to("toGridLayoutCSS",e)}toLayoutItemCSS(e){return this.to("toLayoutItemCSS",e)}toLayoutBaseModelCSS(e){return this.to("toLayoutBaseModelCSS",e)}toStyle(e){const t=this.getRendererInstance(e);return de(t.toStyle)?t.toStyle(e):this.getDefaultRendererInstance().toStyle(e)}toStyleData(e){const t=this.getRendererInstance(e);return de(t.toStyleData)?t.toStyleData(e):this.getDefaultRendererInstance().toStyleData(e)}toExportStyle(e){const t=this.getRendererInstance(e);return de(t.toExportStyle)?t.toExportStyle(e):this.getDefaultRendererInstance().toExportStyle(e)}update(e,t,r){const i=this.getRendererInstance(e);return de(i.update)?i.update(e,t,r):this.getDefaultRendererInstance().update(e,t,r)}codeview(e){if(!e)return"";const t=e.project;let r=wA(uh(t?t.toKeyframeString():"")),i=t?Je(t.toRootVariableCSS()):"";const a=e,n=uh(a?wu(Je(this.toCSS(a))):""),o=a?this.toNestedCSS(a).map(c=>{var h=c.cssText?c.cssText:Je(c.css);return`${c.selector} { + ${uh(wu(h))} + }`}):[],l=a?a.selectors:[];return`
      -${a&&`
      ${a}
      `} +${n&&`
      ${n}
      `} ${o.map(c=>`
      ${c}
      `).join("")} @@ -3481,21 +3405,21 @@ ${(l||[]).length?`
      `:""} -${i&&`
      ${i}
      `} +${r&&`
      ${r}
      `} -${r?`
      +${i?`
      - 
      ${r}
      + 
      ${i}
      `:""}
      - `}}Md=new WeakMap,Sc=new WeakMap;class OX extends Cu{render(e){var{id:t}=e;return`
      ${this.toDefString(e)}${e.layers.map(i=>this.renderer.render(i)).join("")}
      `}toBorderCSS(){return{}}}class Il extends Oa{update(e,t){this.updateElementCache(e,t),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const i=t.$("path");e.addCache("svgElement",i.parent().el),e.addCache("pathElement",i.el)}}updateDefString(e,t){var i=t.$("defs");if(i)i.updateSVGDiff(`${this.toDefInnerString(e)}`);else{var r=this.toDefString(e).trim();t.prepend(Ze.createByHTML(r))}}toDefInnerString(e){return` + `}}Hn=new WeakMap,Ca=new WeakMap;class TA extends qo{render(e){var{id:t}=e;return`
      ${this.toDefString(e)}${e.layers.map(r=>this.renderer.render(r)).join("")}
      `}toBorderCSS(){return{}}}class $a extends ms{update(e,t){this.updateElementCache(e,t),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const r=t.$("path");e.addCache("svgElement",r.parent().el),e.addCache("pathElement",r.el)}}updateDefString(e,t){var r=t.$("defs");if(r)r.updateSVGDiff(`${this.toDefInnerString(e)}`);else{var i=this.toDefString(e).trim();t.prepend(ge.createByHTML(i))}}toDefInnerString(e){return` ${this.toFillSVG(e)} ${this.toStrokeSVG(e)} - `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}cachedStroke(e){return e.computed("stroke",t=>e.isBooleanItem?ai.parseImage("transparent"):ai.parseImage(t||"black"))}cachedFill(e){return e.computed("fill",t=>e.isBooleanItem?ai.parseImage("transparent"):ai.parseImage(t||"black"))}toFillSVG(e){var i;const t=this.cachedFill(e);return(i=t==null?void 0:t.toSVGString)==null?void 0:i.call(t,this.fillId(e),e.contentBox)}toStrokeSVG(e){var i;const t=this.cachedStroke(e);return(i=t==null?void 0:t.toSVGString)==null?void 0:i.call(t,this.strokeId(e),e.contentBox)}toFillValue(e){var i;const t=this.cachedFill(e);return(i=t==null?void 0:t.toFillValue)==null?void 0:i.call(t,this.fillId(e))}toFillOpacityValue(e){return bi(e.fill||"transparent").a}toStrokeValue(e){var i;const t=this.cachedStroke(e);return(i=t==null?void 0:t.toFillValue)==null?void 0:i.call(t,this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}toDefaultCSS(e){var t;return Object.assign({},super.toDefaultCSS(e),{"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"stroke-dashoffset":e.strokeDashoffset,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}toSVGAttribute(e){return this.toDefaultCSS(e)}}class zX extends Il{toFillSVG(e){const t=e.layers;switch(e.booleanOperation){case Wn.DIFFERENCE:return ai.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return ai.parseImage(t[0].fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){const t=e.layers;switch(e.booleanOperation){case Wn.DIFFERENCE:return ai.parseImage(t[1].stroke||"transparent").toSVGString(this.strokeId(e))}return ai.parseImage(t[0].stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){var r,s;const t=e.layers;switch(e.booleanOperation){case Wn.DIFFERENCE:return ai.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return(s=(r=ai.parseImage(t[0].fill||"transparent")).toFillValue)==null?void 0:s.call(r,this.fillId(e))}toFillOpacityValue(e){return bi(e.fill||"transparent").a}toStrokeValue(e){var r,s,a,o;const t=e.layers;switch(e.booleanOperation){case Wn.DIFFERENCE:return(s=(r=ai.parseImage(t[1].stroke||"transparent")).toFillValue)==null?void 0:s.call(r,this.strokeId(e))}return(o=(a=ai.parseImage(t[0].stroke||"black")).toFillValue)==null?void 0:o.call(a,this.strokeId(e))}update(e,t){if(!t)return;const i=t.$(`[data-boolean-path-id="${e.id}"]`);i&&(e.hasChangedField("changedChildren","d","boolean-operation","width","height")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const i=t.$(`[data-boolean-path-id="${e.id}"]`);e.addCache("svgElement",i.parent().el),e.addCache("pathElement",i.el)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
      + `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}cachedStroke(e){return e.computed("stroke",t=>e.isBooleanItem?at.parseImage("transparent"):at.parseImage(t||"black"))}cachedFill(e){return e.computed("fill",t=>e.isBooleanItem?at.parseImage("transparent"):at.parseImage(t||"black"))}toFillSVG(e){var r;const t=this.cachedFill(e);return(r=t==null?void 0:t.toSVGString)==null?void 0:r.call(t,this.fillId(e),e.contentBox)}toStrokeSVG(e){var r;const t=this.cachedStroke(e);return(r=t==null?void 0:t.toSVGString)==null?void 0:r.call(t,this.strokeId(e),e.contentBox)}toFillValue(e){var r;const t=this.cachedFill(e);return(r=t==null?void 0:t.toFillValue)==null?void 0:r.call(t,this.fillId(e))}toFillOpacityValue(e){return pt(e.fill||"transparent").a}toStrokeValue(e){var r;const t=this.cachedStroke(e);return(r=t==null?void 0:t.toFillValue)==null?void 0:r.call(t,this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}toDefaultCSS(e){var t;return Object.assign({},super.toDefaultCSS(e),{"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"stroke-dashoffset":e.strokeDashoffset,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}toSVGAttribute(e){return this.toDefaultCSS(e)}}class kA extends $a{toFillSVG(e){const t=e.layers;switch(e.booleanOperation){case Qr.DIFFERENCE:return at.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return at.parseImage(t[0].fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){const t=e.layers;switch(e.booleanOperation){case Qr.DIFFERENCE:return at.parseImage(t[1].stroke||"transparent").toSVGString(this.strokeId(e))}return at.parseImage(t[0].stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){var i,a;const t=e.layers;switch(e.booleanOperation){case Qr.DIFFERENCE:return at.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return(a=(i=at.parseImage(t[0].fill||"transparent")).toFillValue)==null?void 0:a.call(i,this.fillId(e))}toFillOpacityValue(e){return pt(e.fill||"transparent").a}toStrokeValue(e){var i,a,n,o;const t=e.layers;switch(e.booleanOperation){case Qr.DIFFERENCE:return(a=(i=at.parseImage(t[1].stroke||"transparent")).toFillValue)==null?void 0:a.call(i,this.strokeId(e))}return(o=(n=at.parseImage(t[0].stroke||"black")).toFillValue)==null?void 0:o.call(n,this.strokeId(e))}update(e,t){if(!t)return;const r=t.$(`[data-boolean-path-id="${e.id}"]`);r&&(e.hasChangedField("changedChildren","d","boolean-operation","width","height")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const r=t.$(`[data-boolean-path-id="${e.id}"]`);e.addCache("svgElement",r.parent().el),e.addCache("pathElement",r.el)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
      ${this.toDefString(e)} - ${e.layers.map(s=>this.renderer.render(s)).join("")} + ${e.layers.map(a=>this.renderer.render(a)).join("")} />
      - `}}class VX extends Oa{}class DX extends Oa{toNestedCSS(){return[{selector:"img",cssText:` + `}}class MA extends ms{}class IA extends ms{toNestedCSS(){return[{selector:"img",cssText:` width: 100%; height: 100%; pointer-events: none; - `.trim()}]}getUrl(e){var{src:t}=e,i=e.project;return i.getImageValueById(t)||t}render(e){var{id:t}=e;return` + `.trim()}]}getUrl(e){var{src:t}=e,r=e.project;return r.getImageValueById(t)||t}render(e){var{id:t}=e;return`
      ${this.toDefString(e)} -
      `}update(e,t){const i=t==null?void 0:t.$("img");i&&i.attr("src",this.getUrl(e)),super.update(e,t)}}class FX extends Cu{toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(i=>i.trim()).forEach(i=>{var[r,s]=i.split(":");t[`--${r}`]=s}),t}toCSS(e){return Object.assign({},this.toRootVariableCSS(e))}toStyle(e){const t=e.toKeyframeString(),i=this.toRootVariableCSS(e);return` +
      `}update(e,t){const r=t==null?void 0:t.$("img");r&&r.attr("src",this.getUrl(e)),super.update(e,t)}}class EA extends qo{toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(r=>r.trim()).forEach(r=>{var[i,a]=r.split(":");t[`--${i}`]=a}),t}toCSS(e){return Object.assign({},this.toRootVariableCSS(e))}toStyle(e){const t=e.toKeyframeString(),r=this.toRootVariableCSS(e);return` - `}toExportStyle(e){const t=e.toKeyframeString(),i=this.toRootVariableCSS(e);return` + `}toExportStyle(e){const t=e.toKeyframeString(),r=this.toRootVariableCSS(e);return` - `}render(e){return e.layers.map(t=>this.renderer.render(t)).join("")}renderSVG(){return""}}class NX extends Oa{}class tx extends Il{update(e,t){if(!t)return;const i=t.$("path");i&&(e.hasChangedField("width","height","d")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap}),e.hasChangedField("stroke-dasharray")&&i.setAttrNS({"stroke-dasharray":e.strokeDasharray.join(" ")})),super.update(e,t)}render(e){var{id:t,name:i,itemType:r}=e;return` -
      + `}render(e){return e.layers.map(t=>this.renderer.render(t)).join("")}renderSVG(){return""}}class LA extends ms{}class xg extends $a{update(e,t){if(!t)return;const r=t.$("path");r&&(e.hasChangedField("width","height","d")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap}),e.hasChangedField("stroke-dasharray")&&r.setAttrNS({"stroke-dasharray":e.strokeDasharray.join(" ")})),super.update(e,t)}render(e){var{id:t,name:r,itemType:i}=e;return` +
      ${this.toDefString(e)} />
      - `}}class BX extends tx{update(e,t){if(!!t){var i=t.$("path");i&&e.hasChangedField("points","boundary")&&i.setAttrNS({d:e.d}),super.update(e,t)}}}class jX extends Il{update(e,t){if(!!t){var i=t.$("path");i&&(e.hasChangedField("width","height","count")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
      + `}}class VA extends xg{update(e,t){if(!!t){var r=t.$("path");r&&e.hasChangedField("points","boundary")&&r.setAttrNS({d:e.d}),super.update(e,t)}}}class OA extends $a{update(e,t){if(!!t){var r=t.$("path");r&&(e.hasChangedField("width","height","count")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
      ${this.toDefString(e)} />
      - `}}class GX extends Il{update(e,t){if(!!t){var i=t.$("path");i&&(e.hasChangedField("width","height","count","radius","isCurve","tension")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
      + `}}class RA extends $a{update(e,t){if(!!t){var r=t.$("path");r&&(e.hasChangedField("width","height","count","radius","isCurve","tension")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
      ${this.toDefString(e)} />
      - `}}class HX extends Il{update(e,t){var i=t.$("path.svg-path-item");i&&e.hasChangedField("width","height","d")&&i.attr("d",e.d);var r=t.$("path.guide");r&&e.hasChangedField("width","height","d")&&r.attr("d",e.d);var s=t.$("textPath");s&&(e.hasChangedField("text")&&s.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&s.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&s.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&s.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&s.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t),e.totalLength=i.totalLength}toDefInnerString(e){return` + `}}class jA extends $a{update(e,t){var r=t.$("path.svg-path-item");r&&e.hasChangedField("width","height","d")&&r.attr("d",e.d);var i=t.$("path.guide");i&&e.hasChangedField("width","height","d")&&i.attr("d",e.d);var a=t.$("textPath");a&&(e.hasChangedField("text")&&a.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&a.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&a.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&a.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&a.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t),e.totalLength=r.totalLength}toDefInnerString(e){return` ${this.toPathSVG(e)} ${this.toFillSVG(e)} ${this.toStrokeSVG(e)} `}toPathId(e){return this.getInnerId(e,"path")}toPathSVG(e){return` - `}render(e){var{id:t,textLength:i,lengthAdjust:r,startOffset:s}=e;const a=`#${this.toPathId(e)}`;return` + `}render(e){var{id:t,textLength:r,lengthAdjust:i,startOffset:a}=e;const n=`#${this.toPathId(e)}`;return` ${this.toDefString(e)} ${e.text} - + - `}}class UX extends Il{update(e,t){var i=t.$("text");i&&(e.hasChangedField("text")&&i.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&i.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{id:t,textLength:i,lengthAdjust:r}=e;return` + `}}class zA extends $a{update(e,t){var r=t.$("text");r&&(e.hasChangedField("text")&&r.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&r.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{id:t,textLength:r,lengthAdjust:i}=e;return` ${this.toDefString(e)} - ${e.text} - `}}class WX{static compile(e,t=[]){return e}}const ix={dom:WX};class rx{static compile(e,t,i=[]){return(ix[e]||ix.dom).compile(t,i)}}class XX extends Oa{update(e,t){if(e.hasChangedField("x","y","width","height")===!1){const i=this.compile(e);let r=t.$(".inner-html");r&&r.updateDiff(i)}super.update(e,t)}compile(e){return rx.compile("dom",e.template,e.params)}render(e){var{id:t}=e;const i=this.compile(e);return` + ${e.text} + `}}class AA{static compile(e,t=[]){return e}}const $g={dom:AA};class _g{static compile(e,t,r=[]){return($g[e]||$g.dom).compile(t,r)}}class DA extends ms{update(e,t){if(e.hasChangedField("x","y","width","height")===!1){const r=this.compile(e);let i=t.$(".inner-html");i&&i.updateDiff(r)}super.update(e,t)}compile(e){return _g.compile("dom",e.template,e.params)}render(e){var{id:t}=e;const r=this.compile(e);return`
      ${this.toDefString(e)}
      - ${i} + ${r}
      -
      `}}class YX extends Oa{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",e.overflow!==ml.SCROLL&&e.content.length>0&&(t.height="auto"),t}update(e,t){const i=t==null?void 0:t.$(".text-content");if(i){var{content:r}=e;i.updateDiff(r)}super.update(e,t)}render(e){var{id:t,content:i}=e;return` +
      `}}class FA extends ms{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",e.overflow!==ca.SCROLL&&e.content.length>0&&(t.height="auto"),t}update(e,t){const r=t==null?void 0:t.$(".text-content");if(r){var{content:i}=e;r.updateDiff(i)}super.update(e,t)}render(e){var{id:t,content:r}=e;return`
      ${this.toDefString(e)} -
      ${i}
      +
      ${r}
      - `}}class KX extends Oa{toNestedCSS(){return[{selector:"video",cssText:` + `}}class BA extends ms{toNestedCSS(){return[{selector:"video",cssText:` width: 100%; height: 100%; pointer-events: none; - `.trim()}]}getUrl(e){var{src:t}=e,i=e.project;return i.getVideoValueById(t)}render(e){var{id:t,controls:i,muted:r,poster:s,loop:a,crossorigin:o,autoplay:l}=e;return` + `.trim()}]}getUrl(e){var{src:t}=e,r=e.project;return r.getVideoValueById(t)}render(e){var{id:t,controls:r,muted:i,poster:a,loop:n,crossorigin:o,autoplay:l}=e;return`
      ${this.toDefString(e)} -
      `}update(e,t){const{currentTime:i,playbackRate:r,volume:s}=e,a=t.$("video");a&&a.setProp({currentTime:i,playbackRate:r,volume:s}),super.update(e,t)}}function qX(n){const e=new RX(n);e.setRendererType("project",new FX),e.setRendererType("artboard",new OX),e.setRendererType("rect",new NX),e.setRendererType("circle",new VX),e.setRendererType("image",new DX),e.setRendererType("text",new YX),e.setRendererType("video",new KX),e.setRendererType("boolean-path",new zX),e.setRendererType("svg-path",new tx),e.setRendererType("polygon",new jX),e.setRendererType("star",new GX),e.setRendererType("spline",new BX),e.setRendererType("svg-text",new UX),e.setRendererType("svg-textpath",new HX),e.setRendererType("template",new XX),n.registerRendererType("html",e)}class ZX{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("svg","rect")}getRendererInstance(e){return this.editor.getRendererInstance("svg",e.itemType)||this.getDefaultRendererInstance()||e}render(e,t){if(!e)return"";const i=this.getRendererInstance(e);if(i)return i.render(e,t||this)}toCSS(e){const t=this.getRendererInstance(e);if(t)return t.toCSS(e)}toTransformCSS(e){const t=this.getRendererInstance(e);if(t)return t.toTransformCSS(e)}toStyle(e,t){const i=this.getRendererInstance(e);if(i)return i.toStyle(e,t||this)}update(e,t){const i=this.getRendererInstance(e);if(i)return i.update(e,t)}codeview(e){if(!e)return"";let t=this.render(e);return t=t.replace(//g,">"),` +
      `}update(e,t){const{currentTime:r,playbackRate:i,volume:a}=e,n=t.$("video");n&&n.setProp({currentTime:r,playbackRate:i,volume:a}),super.update(e,t)}}function NA(s){const e=new CA(s);e.setRendererType("project",new EA),e.setRendererType("artboard",new TA),e.setRendererType("rect",new LA),e.setRendererType("circle",new MA),e.setRendererType("image",new IA),e.setRendererType("text",new FA),e.setRendererType("video",new BA),e.setRendererType("boolean-path",new kA),e.setRendererType("svg-path",new xg),e.setRendererType("polygon",new OA),e.setRendererType("star",new RA),e.setRendererType("spline",new VA),e.setRendererType("svg-text",new zA),e.setRendererType("svg-textpath",new jA),e.setRendererType("template",new DA),s.registerRendererType("html",e)}class GA{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("svg","rect")}getRendererInstance(e){return this.editor.getRendererInstance("svg",e.itemType)||this.getDefaultRendererInstance()||e}render(e,t){if(!e)return"";const r=this.getRendererInstance(e);if(r)return r.render(e,t||this)}toCSS(e){const t=this.getRendererInstance(e);if(t)return t.toCSS(e)}toTransformCSS(e){const t=this.getRendererInstance(e);if(t)return t.toTransformCSS(e)}toStyle(e,t){const r=this.getRendererInstance(e);if(r)return r.toStyle(e,t||this)}update(e,t){const r=this.getRendererInstance(e);if(r)return r.update(e,t)}codeview(e){if(!e)return"";let t=this.render(e);return t=t.replace(//g,">"),`
      ${t&&`
      ${t}
      `}
      - `}}class am extends Cu{toDefaultCSS(e){return{overflow:"visible","background-color":e.backgroundColor,color:e.color,"font-size":e.fontSize,"font-weight":e.fontWeight,"font-style":e.fontStyle,"font-family":e.fontFamily,"text-align":e.textAlign,"text-decoration":e.textDecoration,"text-transform":e.textTransform,"letter-spacing":e.letterSpacing,"word-spacing":e.wordSpacing,"line-height":e.lineHeight,"text-indent":e.textIndent,"text-shadow":e.textShadow,"text-overflow":e.textOverflow,"text-wrap":e.textWrap,"z-index":e.zIndex,opacity:e.opacity,"mix-blend-mode":e.mixBlendMode,"transform-origin":e.transformOrigin,"border-radius":e.borderRadius,filter:e.filter,"backdrop-filter":e.backdropFilter,"box-shadow":e.boxShadow,animation:e.animation,transition:e.transition}}toCSS(e){const t=Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}toSVGAttribute(e){var t;return Ve(P({},this.toDefaultCSS(e)),{strokeWidth:e.strokeWidth,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}wrappedRender(e,t){const{id:i,x:r,y:s,width:a,height:o,itemType:l}=e;return` + `}}class ph extends qo{toDefaultCSS(e){return{overflow:"visible","background-color":e.backgroundColor,color:e.color,"font-size":e.fontSize,"font-weight":e.fontWeight,"font-style":e.fontStyle,"font-family":e.fontFamily,"text-align":e.textAlign,"text-decoration":e.textDecoration,"text-transform":e.textTransform,"letter-spacing":e.letterSpacing,"word-spacing":e.wordSpacing,"line-height":e.lineHeight,"text-indent":e.textIndent,"text-shadow":e.textShadow,"text-overflow":e.textOverflow,"text-wrap":e.textWrap,"z-index":e.zIndex,opacity:e.opacity,"mix-blend-mode":e.mixBlendMode,"transform-origin":e.transformOrigin,"border-radius":e.borderRadius,filter:e.filter,"backdrop-filter":e.backdropFilter,"box-shadow":e.boxShadow,animation:e.animation,transition:e.transition}}toCSS(e){const t=Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}toSVGAttribute(e){var t;return se(b({},this.toDefaultCSS(e)),{strokeWidth:e.strokeWidth,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}wrappedRender(e,t){const{id:r,x:i,y:a,width:n,height:o,itemType:l}=e;return` ${this.toDefString(e)} - ${Ue(t)&&t()} + ${de(t)&&t()} - `}render(e,t){const{width:i,height:r,elementType:s}=e,a=s||"div";let o=this.toCSS(e);return this.wrappedRender(e,()=>` + `}render(e,t){const{width:r,height:i,elementType:a}=e,n=a||"div";let o=this.toCSS(e);return this.wrappedRender(e,()=>` - <${a} xmlns="http://www.w3.org/1999/xhtml" style="${ei(o)};width:100%;height:100%;"> + <${n} xmlns="http://www.w3.org/1999/xhtml" style="${Je(o)};width:100%;height:100%;"> ${e.layers.map(l=>t.render(l,t)).join("")} - `)}}class JX extends am{toCSS(e){const t=Object.assign({},this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBackgroundImageCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}render(e,t,i=!0){const{width:r,height:s}=e;let a=this.toCSS(e);return` -${i?'':""} + `)}}class HA extends ph{toCSS(e){const t=Object.assign({},this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBackgroundImageCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}render(e,t,r=!0){const{width:i,height:a}=e;let n=this.toCSS(e);return` +${r?'':""} ${this.toDefString(e)} ${e.layers.map(o=>t.render(o,t)).join("")} - `}}class za extends am{}class ko extends za{updateDefString(e,t){var i=t.$("defs");if(i)i.html(this.toDefInnerString(e));else{var r=this.toDefString(e).trim();t.prepend(Ze.createByHTML(r))}}toDefInnerString(e){return` + `}}class vs extends ph{}class Ys extends vs{updateDefString(e,t){var r=t.$("defs");if(r)r.html(this.toDefInnerString(e));else{var i=this.toDefString(e).trim();t.prepend(ge.createByHTML(i))}}toDefInnerString(e){return` ${this.toFillSVG(e)} ${this.toStrokeSVG(e)} `}toDefString(e){return` ${this.toDefInnerString(e).trim()} - `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}toFillSVG(e){return ai.parseImage(e.fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){return ai.parseImage(e.stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){return ai.parseImage(e.fill||"transparent").toFillValue(this.fillId(e))}toFillOpacityValue(e){return bi(e.fill||"transparent").a}toStrokeValue(e){return ai.parseImage(e.stroke||"black").toFillValue(this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}}class QX extends ko{update(e,t){if(!t)return;const i=t.$(`[data-boolean-path-id="${e.id}"]`);i&&(i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=i.totalLength),this.updateDefString(e,t)}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class eY extends za{}class tY extends za{update(e,t){let i=t.$("iframe");i&&i.attr("src",e.url||"about:blank"),super.update(e,t)}render(e){const{width:t,height:i,url:r="about:blank"}=e;let s=this.toCSS(e);return this.wrappedRender(e,()=>` + `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}toFillSVG(e){return at.parseImage(e.fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){return at.parseImage(e.stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){return at.parseImage(e.fill||"transparent").toFillValue(this.fillId(e))}toFillOpacityValue(e){return pt(e.fill||"transparent").a}toStrokeValue(e){return at.parseImage(e.stroke||"black").toFillValue(this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}}class UA extends Ys{update(e,t){if(!t)return;const r=t.$(`[data-boolean-path-id="${e.id}"]`);r&&(r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=r.totalLength),this.updateDefString(e,t)}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class WA extends vs{}class XA extends vs{update(e,t){let r=t.$("iframe");r&&r.attr("src",e.url||"about:blank"),super.update(e,t)}render(e){const{width:t,height:r,url:i="about:blank"}=e;let a=this.toCSS(e);return this.wrappedRender(e,()=>` - `)}}class iY extends za{getUrl(e){var{src:t}=e,i=e.project;return i.getImageValueById(t)}render(e){const{width:t,height:i}=e;let r=this.toCSS(e);return this.wrappedRender(e,()=>` + `)}}class YA extends vs{getUrl(e){var{src:t}=e,r=e.project;return r.getImageValueById(t)}render(e){const{width:t,height:r}=e;let i=this.toCSS(e);return this.wrappedRender(e,()=>`
      - +
      - `)}update(e,t){const i=t.$("img");i&&i.attr("src",this.getUrl(e)),super.update(e,t)}}class rY extends am{render(e,t){return e.artboards.map(i=>t.render(i,t))}}class nY extends za{}class sY extends ko{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class aY extends ko{update(e,t){if(!!t){var i=t.$("path");i&&(i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=i.totalLength),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class oY extends ko{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class lY extends ko{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class cY extends ko{update(e,t){var i=t.$("path");i&&i.attr("d",e.d);var r=t.$("textPath");r&&(r.text(e.text),r.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset})),this.updateDefString(e,t),e.totalLength=i.totalLength}toDefInnerString(e){return` + `)}update(e,t){const r=t.$("img");r&&r.attr("src",this.getUrl(e)),super.update(e,t)}}class KA extends ph{render(e,t){return e.artboards.map(r=>t.render(r,t))}}class ZA extends vs{}class qA extends Ys{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class QA extends Ys{update(e,t){if(!!t){var r=t.$("path");r&&(r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=r.totalLength),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class JA extends Ys{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class e7 extends Ys{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class t7 extends Ys{update(e,t){var r=t.$("path");r&&r.attr("d",e.d);var i=t.$("textPath");i&&(i.text(e.text),i.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset})),this.updateDefString(e,t),e.totalLength=r.totalLength}toDefInnerString(e){return` ${this.toPathSVG(e)} ${this.toFillSVG(e)} ${this.toStrokeSVG(e)} @@ -3740,14 +3664,14 @@ ${i?'':""} d="${e.d}" fill="none" /> - `}render(e){return this.wrappedRender(e,()=>{const{textLength:t,lengthAdjust:i,startOffset:r}=e;return` - ${e.text} - `})}}class hY extends ko{update(e,t){var i=t.$("text");i&&(i.text(e.text),i.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust})),this.updateDefString(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{textLength:t,lengthAdjust:i}=e;return this.wrappedRender(e,()=>` - ${e.text} - `)}}class dY extends za{update(e,t){const i=this.compile(e);let r=t.$(".inner-html");r&&r.updateDiff(i),super.update(e,t)}compile(e){return rx.compile("dom",e.template,e.params)}render(e){const{id:t,width:i,height:r}=e,s=this.compile(e);return this.wrappedRender(e,()=>` + `}render(e){return this.wrappedRender(e,()=>{const{textLength:t,lengthAdjust:r,startOffset:i}=e;return` + ${e.text} + `})}}class r7 extends Ys{update(e,t){var r=t.$("text");r&&(r.text(e.text),r.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust})),this.updateDefString(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{textLength:t,lengthAdjust:r}=e;return this.wrappedRender(e,()=>` + ${e.text} + `)}}class i7 extends vs{update(e,t){const r=this.compile(e);let i=t.$(".inner-html");i&&i.updateDiff(r),super.update(e,t)}compile(e){return _g.compile("dom",e.template,e.params)}render(e){const{id:t,width:r,height:i}=e,a=this.compile(e);return this.wrappedRender(e,()=>`
      - ${s} + ${a}
      - `)}}class uY extends za{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",t.height="auto",t}render(e){const{content:t,width:i,height:r}=e;let s=this.toCSS(e);return this.wrappedRender(e,()=>` - -

      ${t}

      + `)}}class s7 extends vs{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",t.height="auto",t}render(e){const{content:t,width:r,height:i}=e;let a=this.toCSS(e);return this.wrappedRender(e,()=>` + +

      ${t}

       - `)}update(e,t){var{content:i}=e;t.updateDiff(i)}}class pY extends za{getUrl(e){var{src:t}=e,i=e.project;return i.getVideoValueById(t)}render(e){var{width:t,height:i,controls:r,muted:s,poster:a,loop:o,crossorigin:l,autoplay:c}=e;let h=this.toCSS(e);return this.wrappedRender(e,()=>` + `)}update(e,t){var{content:r}=e;t.updateDiff(r)}}class a7 extends vs{getUrl(e){var{src:t}=e,r=e.project;return r.getVideoValueById(t)}render(e){var{width:t,height:r,controls:i,muted:a,poster:n,loop:o,crossorigin:l,autoplay:c}=e;let h=this.toCSS(e);return this.wrappedRender(e,()=>` + style="${Je(h)};width:100%;height:100%;"> - `)}}function fY(n){n.registerRendererType("svg",new ZX(n)),n.registerRenderer("svg","project",new rY),n.registerRenderer("svg","artboard",new JX),n.registerRenderer("svg","rect",new nY),n.registerRenderer("svg","circle",new eY),n.registerRenderer("svg","image",new iY),n.registerRenderer("svg","template",new dY),n.registerRenderer("svg","iframe",new tY),n.registerRenderer("svg","video",new pY),n.registerRenderer("svg","text",new uY),n.registerRenderer("svg","boolean-path",new QX),n.registerRenderer("svg","svg-path",new aY),n.registerRenderer("svg","polygon",new oY),n.registerRenderer("svg","star",new lY),n.registerRenderer("svg","spline",new sY),n.registerRenderer("svg","svg-text",new hY),n.registerRenderer("svg","svg-textpath",new cY)}var _ne="";class nx extends ge{initialize(){super.initialize(),qX(this.$editor),fY(this.$editor),this.renderer=this.$editor.renderer("html")}initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},doubleClickTime:0}}template(){return`
      + `)}}function n7(s){s.registerRendererType("svg",new GA(s)),s.registerRenderer("svg","project",new KA),s.registerRenderer("svg","artboard",new HA),s.registerRenderer("svg","rect",new ZA),s.registerRenderer("svg","circle",new WA),s.registerRenderer("svg","image",new YA),s.registerRenderer("svg","template",new i7),s.registerRenderer("svg","iframe",new XA),s.registerRenderer("svg","video",new a7),s.registerRenderer("svg","text",new s7),s.registerRenderer("svg","boolean-path",new UA),s.registerRenderer("svg","svg-path",new QA),s.registerRenderer("svg","polygon",new JA),s.registerRenderer("svg","star",new e7),s.registerRenderer("svg","spline",new qA),s.registerRenderer("svg","svg-text",new r7),s.registerRenderer("svg","svg-textpath",new t7)}var pB="";class Sg extends Y{initialize(){super.initialize(),NA(this.$editor),n7(this.$editor),this.renderer=this.$editor.renderer("html")}initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},doubleClickTime:0}}template(){return`
      ${this.$injectManager.generate("render.view")} -
      `}[$e("$view")](){const{translate:e,transformOrigin:t,scale:i}=this.$viewport,r=`translate(${e[0]}px, ${e[1]}px) scale(${i||1})`;return{style:{"transform-origin":`${t[0]}px ${t[1]}px`,transform:r}}}[Qt("show.outline")](){this.refs.$view.attr("data-outline",this.$config.get("show.outline"))}[Qt("bodyEvent")](){const e=this.$config.get("bodyEvent");e.buttons===0&&Ze.create(e.target).hasClass("elf--drag-area-view")&&this.$commands.emit("recoverCursor")}[U("refElement")](e,t){Ue(t)&&t(this.getElement(e))}[U(Gi)](e){this.refreshSelectionStyleView(e)}[U(si)](){this.bindData("$view")}[U("refreshAllElementBoundSize")](){this.refreshAllElementBoundSize()}[U("refreshElementBoundSize")](e){this.refreshElementBoundSize(e)}[U("updateAllCanvas")](e){this.updateAllCanvas(e)}[U("refreshAllCanvas")](){this.refreshAllCanvas()}[U("playTimeline","moveTimeline")](){var t=this.$context.selection.currentProject.getSelectedTimeline();t&&t.animations.map(i=>this.$model.get(i.id)).forEach(i=>{this.updateTimelineElement(i,!0,!1)})}clearElementAll(){this.state.cachedCurrentElement={}}clearElement(e){this.state.cachedCurrentElement[e]=void 0}getElement(e){return this.state.cachedCurrentElement[e]||(this.state.cachedCurrentElement[e]=this.refs.$view.$(`[data-id="${e}"]`)),this.state.cachedCurrentElement[e]}[na("$view .element-item.text .text-content")](e){e.$dt.removeAttr("contenteditable"),e.$dt.removeClass("focused"),this.$context.commands.emit("pop.mode.view","TextEditorView"),this.$context.commands.emit("recoverCursor")}[Pr("$view .element-item.text .text-content")](e){var t=e.$dt.html(),i=e.$dt.text().trim(),r=e.$dt.parent().attr("data-id"),s=[];this.$context.selection.items.filter(a=>a.id===r).forEach(a=>{a.reset({content:t,text:i}),s.push({id:a.id,content:t,text:i}),this.$commands.emit("setAttribute",{[a.id]:{content:t,text:i}})}),this.emit("refreshContent",s)}checkEditMode(e){if(this.state.hasDoubleClick=!1,window.performance.now()-this.state.doubleClickTime{console.log("console.log","yellow")}}],x:e.clientX,y:e.clientY,id:r})}[qe("$view")+Qe("checkEditMode")+at("calculateMovedElement")+Oc("calculateFirstMovedElement")+lt("calculateEndedElement")](e){if(this.initMousePoint=this.$viewport.getWorldPosition(e),this.$config.init("set.move.control.point",!0),this.$config.set("editing.mode.itemType","select"),this.$config.get("set.dragarea.mode")){this.emit("startDragAreaView");return}let t=this.$context.selection.hasPoint(this.initMousePoint);const i=Ze.create(e.target);if(i.hasClass("canvas-view"))return this.$context.selection.select(),this.initializeDragSelection(),!1;const r=i.closest("element-item");var s=r&&r.attr("data-id");if(e.altKey)t||this.$context.selection.check({id:s})===!1&&this.$context.selection.selectByGroup(s),this.$context.selection.isEmpty===!1&&(this.$commands.emit("history.copyLayer","copy"),this.emit("refreshLayerTreeView"),this.initializeDragSelection());else{if(!t){if(e.shiftKey)this.$context.selection.toggleById(s);else if(this.$context.selection.check({id:s})===!1){const a=this.$model.get(s);a&&a.is("artboard")&&a.hasChildren()||(a.hasChildren()?this.$context.selection.selectByGroup(s):this.$context.selection.selectByGroup(s))}}this.initializeDragSelection()}}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear(),this.emit("startGhostToolView")}calculateFirstMovedElement(){this.emit("hideSelectionToolView"),this.emit("moveFirstGhostToolView")}calculateMovedElement(){if(this.$config.get("set.dragarea.mode")){this.emit("moveDragAreaView");return}const e=this.$viewport.getWorldPosition();if(this.emit("moveGhostToolView"),this.$context.selection.isLayoutItem)return;const t=Gn([],ft([],e,this.initMousePoint));this.moveTo(t),this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(e))&&(this.initMousePoint=e,this.$context.selection.reselect(),this.$context.snapManager.clear(),this.refreshAllCanvas(),this.emit("refreshLayerTreeView")),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y"))}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(s=>_t([],s,e)),3/this.$viewport.scale),i=_t([],t.dist,e),r={};this.$context.selection.cachedItemMatrices.forEach(s=>{const a=s.verties[4],o=_t([],a,i),l=ft([],Kt([],o,s.parentMatrixInverse),Kt([],a,s.parentMatrixInverse));this.$context.selection.isOne?r[s.id]={x:Math.round(s.x+l[0]),y:Math.round(s.y+l[1])}:r[s.id]={x:s.x+l[0],y:s.y+l[1]}}),this.$context.selection.reset(r)}calculateEndedElement(e,t){if(this.state.hasDoubleClick){this.state.doubleClickTime=window.performance.now();return}const i=this.$viewport.getWorldPosition(),r=Ne(i,this.initMousePoint);this.$config.init("set.move.control.point",!1);const s=Math.abs(e)>.5||Math.abs(t)>.5;if(this.emit("endGhostToolView",s),this.$config.get("set.dragarea.mode")){this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1);return}r<1||(this.$context.selection.reselect(),this.$context.snapManager.clear(),this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.nextTick(()=>{this.$commands.emit("recoverBooleanPath")})),this.$config.set("editing.mode.itemType","select"),this.$commands.emit("history.refreshSelection"),this.emit(da)}refreshSelectionStyleView(e){let t=[];e?Fi(e)?t=e:t=[e]:t=this.$context.selection.items,t.forEach(i=>{this.updateElement(i)})}updateElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}updateTimelineElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}refreshAllCanvas(){this.clearElementAll();const e=this.$context.selection.currentProject,t=this.renderer.render(e,null,this.$editor)||"";this.refs.$view.updateDiff(t,void 0,{checkPassed:(i,r)=>i.getAttribute("data-id")===r.getAttribute("data-id")}),this.updateAllCanvas(e)}updateAllCanvas(e){e==null||e.layers.forEach(t=>{this.updateElement(t,this.getElement(t.id)),this.updateAllCanvas(t)})}refreshAllElementBoundSize(){var e=this.$context.selection.items.map(i=>i.is("artboard")?i:i.parent),t=[...new Set(e)];t.length?t.forEach(i=>{this.refreshElementBoundSize(i)}):this.$context.selection.currentProject.artboards.forEach(i=>{this.refreshElementBoundSize(i)})}refreshElementRect(e){var t=this.getElement(e.id);if(!t)return;let i=t.offsetRect();i.width===0||i.height===0||(e.reset(i),this.refreshSelectionStyleView(e),this.$context.selection.check(e)&&this.emit(da))}refreshElementBoundSize(e){e&&(this.refreshElementRect(e),e.layers.forEach(t=>{this.refreshElementBoundSize(t)}))}}class sx extends ge{components(){return{PageTools:CX,DragAreaRectView:Qb,HTMLRenderView:nx,DragAreaView:ex}}initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.$commands.emit("moveSelectionToCenter",!0),this.refreshCursor()})}template(){return D("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},D("div",{class:"page-view",ref:"$pageView"},D("div",{class:"page-lock scrollbar",ref:"$lock"},D(ex,{ref:"$dragArea"}),D(nx,{ref:"$htmlRenderView"}),D(Qb,{ref:"$dragAreaRectView"}),this.$injectManager.generate("canvas.view",!0))),"$",W("PageTools",{ref:"pageTools"}))}[$e("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$config.is("editing.mode",Ti.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(pa.space))}[qe("$lock")+Qe("checkSpace")+at("movePan")+lt("moveEndPan")](){this.startMovePan()}[Qt("editing.mode")](){this.$config.is("editing.mode",Ti.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ps()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const i=Ct(e,t,0);this.$viewport.pan(...Kt([],ft([],this.lastDist,i),this.$viewport.scaleMatrixInverse)),this.lastDist=i}refreshCursor(){this.$config.is("editing.mode",Ti.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}[Kr("$lock")+St](){}[Yr("$lock")+St](e){const t=this.$viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$commands.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const i=Ze.create(e.target).attr("data-id");if(i)this.$commands.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},i);else{const r=e.dataTransfer.getData("image/info");this.$commands.emit("dropImageUrl",r)}}}[_f("$lock")+St](e){const[t,i]=wf(e);if(!this.state.gesture)e.ctrlKey&&this.$viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const r=1-2.5*i/100;this.$viewport.zoom(r)}else{const r=-2.5*t,s=-2.5*i;this.$viewport.pan(-r/this.$viewport.scale,-s/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$viewport.refreshCanvasSize(this.refs.$lock.rect())}[U(ua,ln)](){this.refreshCanvasSize()}[U(si)](){this.$commands.emit("refreshCursor","auto")}}var Sne="";let Vs=[];class ax extends ge{template(){return` +
      `}[ne("$view")](){const{translate:e,transformOrigin:t,scale:r}=this.$viewport,i=`translate(${e[0]}px, ${e[1]}px) scale(${r||1})`;return{style:{"transform-origin":`${t[0]}px ${t[1]}px`,transform:i}}}[Tt("show.outline")](){this.refs.$view.attr("data-outline",this.$config.get("show.outline"))}[Tt("bodyEvent")](){const e=this.$config.get("bodyEvent");e.buttons===0&&ge.create(e.target).hasClass("elf--drag-area-view")&&this.$commands.emit("recoverCursor")}[M("refElement")](e,t){de(t)&&t(this.getElement(e))}[M(Mt)](e){this.refreshSelectionStyleView(e)}[M(st)](){this.bindData("$view")}[M("refreshAllElementBoundSize")](){this.refreshAllElementBoundSize()}[M("refreshElementBoundSize")](e){this.refreshElementBoundSize(e)}[M("updateAllCanvas")](e){this.updateAllCanvas(e)}[M("refreshAllCanvas")](){this.refreshAllCanvas()}[M("playTimeline","moveTimeline")](){var t=this.$context.selection.currentProject.getSelectedTimeline();t&&t.animations.map(r=>this.$model.get(r.id)).forEach(r=>{this.updateTimelineElement(r,!0,!1)})}clearElementAll(){this.state.cachedCurrentElement={}}clearElement(e){this.state.cachedCurrentElement[e]=void 0}getElement(e){return this.state.cachedCurrentElement[e]||(this.state.cachedCurrentElement[e]=this.refs.$view.$(`[data-id="${e}"]`)),this.state.cachedCurrentElement[e]}[Fi("$view .element-item.text .text-content")](e){e.$dt.removeAttr("contenteditable"),e.$dt.removeClass("focused"),this.$context.commands.emit("pop.mode.view","TextEditorView"),this.$context.commands.emit("recoverCursor")}[er("$view .element-item.text .text-content")](e){var t=e.$dt.html(),r=e.$dt.text().trim(),i=e.$dt.parent().attr("data-id"),a=[];this.$context.selection.items.filter(n=>n.id===i).forEach(n=>{n.reset({content:t,text:r}),a.push({id:n.id,content:t,text:r}),this.$commands.emit("setAttribute",{[n.id]:{content:t,text:r}})}),this.emit("refreshContent",a)}checkEditMode(e){if(this.state.hasDoubleClick=!1,window.performance.now()-this.state.doubleClickTime{console.log("console.log","yellow")}}],x:e.clientX,y:e.clientY,id:i})}[me("$view")+fe("checkEditMode")+xe("calculateMovedElement")+Na("calculateFirstMovedElement")+Se("calculateEndedElement")](e){if(this.initMousePoint=this.$viewport.getWorldPosition(e),this.$config.init("set.move.control.point",!0),this.$config.set("editing.mode.itemType","select"),this.$config.get("set.dragarea.mode")){this.emit("startDragAreaView");return}let t=this.$context.selection.hasPoint(this.initMousePoint);const r=ge.create(e.target);if(r.hasClass("canvas-view"))return this.$context.selection.select(),this.initializeDragSelection(),!1;const i=r.closest("element-item");var a=i&&i.attr("data-id");if(e.altKey)t||this.$context.selection.check({id:a})===!1&&this.$context.selection.selectByGroup(a),this.$context.selection.isEmpty===!1&&(this.$commands.emit("history.copyLayer","copy"),this.emit("refreshLayerTreeView"),this.initializeDragSelection());else{if(!t){if(e.shiftKey)this.$context.selection.toggleById(a);else if(this.$context.selection.check({id:a})===!1){const n=this.$model.get(a);n&&n.is("artboard")&&n.hasChildren()||(n.hasChildren()?this.$context.selection.selectByGroup(a):this.$context.selection.selectByGroup(a))}}this.initializeDragSelection()}}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear(),this.emit("startGhostToolView")}calculateFirstMovedElement(){this.emit("hideSelectionToolView"),this.emit("moveFirstGhostToolView")}calculateMovedElement(){if(this.$config.get("set.dragarea.mode")){this.emit("moveDragAreaView");return}const e=this.$viewport.getWorldPosition();if(this.emit("moveGhostToolView"),this.$context.selection.isLayoutItem)return;const t=Zr([],_e([],e,this.initMousePoint));this.moveTo(t),this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(e))&&(this.initMousePoint=e,this.$context.selection.reselect(),this.$context.snapManager.clear(),this.refreshAllCanvas(),this.emit("refreshLayerTreeView")),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y"))}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(a=>we([],a,e)),3/this.$viewport.scale),r=we([],t.dist,e),i={};this.$context.selection.cachedItemMatrices.forEach(a=>{const n=a.verties[4],o=we([],n,r),l=_e([],Ze([],o,a.parentMatrixInverse),Ze([],n,a.parentMatrixInverse));this.$context.selection.isOne?i[a.id]={x:Math.round(a.x+l[0]),y:Math.round(a.y+l[1])}:i[a.id]={x:a.x+l[0],y:a.y+l[1]}}),this.$context.selection.reset(i)}calculateEndedElement(e,t){if(this.state.hasDoubleClick){this.state.doubleClickTime=window.performance.now();return}const r=this.$viewport.getWorldPosition(),i=ae(r,this.initMousePoint);this.$config.init("set.move.control.point",!1);const a=Math.abs(e)>.5||Math.abs(t)>.5;if(this.emit("endGhostToolView",a),this.$config.get("set.dragarea.mode")){this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1);return}i<1||(this.$context.selection.reselect(),this.$context.snapManager.clear(),this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.nextTick(()=>{this.$commands.emit("recoverBooleanPath")})),this.$config.set("editing.mode.itemType","select"),this.$commands.emit("history.refreshSelection"),this.emit(Xi)}refreshSelectionStyleView(e){let t=[];e?Gt(e)?t=e:t=[e]:t=this.$context.selection.items,t.forEach(r=>{this.updateElement(r)})}updateElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}updateTimelineElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}refreshAllCanvas(){this.clearElementAll();const e=this.$context.selection.currentProject,t=this.renderer.render(e,null,this.$editor)||"";this.refs.$view.updateDiff(t,void 0,{checkPassed:(r,i)=>r.getAttribute("data-id")===i.getAttribute("data-id")}),this.updateAllCanvas(e)}updateAllCanvas(e){e==null||e.layers.forEach(t=>{this.updateElement(t,this.getElement(t.id)),this.updateAllCanvas(t)})}refreshAllElementBoundSize(){var e=this.$context.selection.items.map(r=>r.is("artboard")?r:r.parent),t=[...new Set(e)];t.length?t.forEach(r=>{this.refreshElementBoundSize(r)}):this.$context.selection.currentProject.artboards.forEach(r=>{this.refreshElementBoundSize(r)})}refreshElementRect(e){var t=this.getElement(e.id);if(!t)return;let r=t.offsetRect();r.width===0||r.height===0||(e.reset(r),this.refreshSelectionStyleView(e),this.$context.selection.check(e)&&this.emit(Xi))}refreshElementBoundSize(e){e&&(this.refreshElementRect(e),e.layers.forEach(t=>{this.refreshElementBoundSize(t)}))}}class o7 extends Y{components(){return{PageTools:xA,DragAreaRectView:yg,HTMLRenderView:Sg,DragAreaView:bg}}initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.$commands.emit("moveSelectionToCenter",!0),this.refreshCursor()})}template(){return C("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},C("div",{class:"page-view",ref:"$pageView"},C("div",{class:"page-lock scrollbar",ref:"$lock"},C(bg,{ref:"$dragArea"}),C(Sg,{ref:"$htmlRenderView"}),C(yg,{ref:"$dragAreaRectView"}),this.$injectManager.generate("canvas.view",!0))),"$",R("PageTools",{ref:"pageTools"}))}[ne("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$config.is("editing.mode",St.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(Yi.space))}[me("$lock")+fe("checkSpace")+xe("movePan")+Se("moveEndPan")](){this.startMovePan()}[Tt("editing.mode")](){this.$config.is("editing.mode",St.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ci()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const r=Ie(e,t,0);this.$viewport.pan(...Ze([],_e([],this.lastDist,r),this.$viewport.scaleMatrixInverse)),this.lastDist=r}refreshCursor(){this.$config.is("editing.mode",St.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}[Yr("$lock")+Ve](){}[Xr("$lock")+Ve](e){const t=this.$viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$commands.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const r=ge.create(e.target).attr("data-id");if(r)this.$commands.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},r);else{const i=e.dataTransfer.getData("image/info");this.$commands.emit("dropImageUrl",i)}}}[Ml("$lock")+Ve](e){const[t,r]=El(e);if(!this.state.gesture)e.ctrlKey&&this.$viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const i=1-2.5*r/100;this.$viewport.zoom(i)}else{const i=-2.5*t,a=-2.5*r;this.$viewport.pan(-i/this.$viewport.scale,-a/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$viewport.refreshCanvasSize(this.refs.$lock.rect())}[M(sa,Ga)](){this.refreshCanvasSize()}[M(st)](){this.$commands.emit("refreshCursor","auto")}}var gB="";let ki=[];class l7 extends Y{template(){return`
      @@ -3810,21 +3734,21 @@ ${i?'':""}
      - `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}makeLine(e,t,i,r,s,a,o=3,l=30,c=10){let h=i-i%t,d=r+r%t;const u=(h-i)/s*a,p=(h+t-i)/s*a;if(!(Math.abs(p-u)${u}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const i=t.verties,{minX:r,width:s}=this.$viewport,a=this.state.rect.width,o=(i[0][0]-r)/s*a,l=(i[2][0]-r)/s*a;return` + `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}makeLine(e,t,r,i,a,n,o=3,l=30,c=10){let h=r-r%t,u=i+i%t;const d=(h-r)/a*n,v=(h+t-r)/a*n;if(!(Math.abs(v-d)${d}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const r=t.verties,{minX:i,width:a}=this.$viewport,n=this.state.rect.width,o=(r[0][0]-i)/a*n,l=(r[2][0]-i)/a*n;return` M ${o} 20 L ${o} 30 L ${l} 30 L ${l} 20 Z - `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const i=this.$context.selection.verties.map(d=>d[0]),r=Math.min.apply(Math,i),s=Math.max.apply(Math,i),{minX:a,width:o}=this.$viewport,l=this.state.rect.width,c=(r-a)/o*l,h=(s-a)/o*l;return` + `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const r=this.$context.selection.verties.map(u=>u[0]),i=Math.min.apply(Math,r),a=Math.max.apply(Math,r),{minX:n,width:o}=this.$viewport,l=this.state.rect.width,c=(i-n)/o*l,h=(a-n)/o*l;return` M ${c} 0 L ${c} 20 L ${h} 20 L ${h} 0 Z - `}makeRuler(){const{minX:e,maxX:t,width:i}=this.$viewport,r=this.state.rect.width;return Vs=[],this.makeLine(Vs,1e3,e,t,i,r,10,24,1e4),this.makeLine(Vs,200,e,t,i,r,10,20,5e3),this.makeLine(Vs,100,e,t,i,r,10,20,200),this.makeLine(Vs,50,e,t,i,r,10,20,100),this.makeLine(Vs,10,e,t,i,r,10,18,50),this.makeLine(Vs,5,e,t,i,r,10,15,10),this.makeLine(Vs,1,e,t,i,r,10,13,10),Vs.join("")}makeRulerText(){const{minX:e,maxX:t,width:i}=this.$viewport,r=this.state.rect.width,s=Math.abs(t-e);return[s>3e3?this.makeLineText(3e3,e,t,i,r,24):"",2e3${this.makeRulerText()}`}[ve("$lines")+It](){return this.initializeRect(),`${this.$config.get("horizontal.line").map(t=>{const i=this.$viewport.applyVertex([t,0,0]);return``}).join("")}`}[$e("$rulerLines")](){return{d:this.makeRulerForCurrent()}}makeRulerCursor(){const e=this.$viewport.getWorldPosition(),{minX:t,width:i}=this.$viewport;this.initializeRect();const r=this.state.rect.width,s=e[0]-t,a=s===0?0:s/i*r;return`M ${a-.5} 0 L ${a-.5} 20`}[$e("$cursor")](){const e=this.$viewport.getWorldPosition(),{minX:t,width:i}=this.$viewport;this.initializeRect();const r=this.state.rect.width,s=e[0]-t;return{cssText:` - --elf--horizontal-cursor-position: ${s===0?0:s/i*r}px; - `}}[yf()](){this.$commands.emit("refreshCursor","ns-resize")}[qe()+at()+lt()](){const e=la([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("vertical.line",e[1]),this.$config.init("vertical.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minY3e3?this.makeLineText(3e3,e,t,r,i,24):"",2e3${this.makeRulerText()}`}[G("$lines")+Ee](){return this.initializeRect(),`${this.$config.get("horizontal.line").map(t=>{const r=this.$viewport.applyVertex([t,0,0]);return``}).join("")}`}[ne("$rulerLines")](){return{d:this.makeRulerForCurrent()}}makeRulerCursor(){const e=this.$viewport.getWorldPosition(),{minX:t,width:r}=this.$viewport;this.initializeRect();const i=this.state.rect.width,a=e[0]-t,n=a===0?0:a/r*i;return`M ${n-.5} 0 L ${n-.5} 20`}[ne("$cursor")](){const e=this.$viewport.getWorldPosition(),{minX:t,width:r}=this.$viewport;this.initializeRect();const i=this.state.rect.width,a=e[0]-t;return{cssText:` + --elf--horizontal-cursor-position: ${a===0?0:a/r*i}px; + `}}[Cl()](){this.$commands.emit("refreshCursor","ns-resize")}[me()+xe()+Se()](){const e=Hi([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("vertical.line",e[1]),this.$config.init("vertical.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minY
      @@ -3837,3115 +3761,34 @@ ${i?'':""}
      - `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}[yf()](){this.$commands.emit("refreshCursor","ew-resize")}[_0()](){this.$commands.emit("recoverCursor")}[qe()+at()+lt()](){const e=la([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("horizontal.line",e[0]),this.$config.init("horizontal.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minX${u}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const i=t.verties,{minY:r,height:s}=this.$viewport,a=this.state.rect.height,o=(i[0][1]-r)/s*a,l=(i[2][1]-r)/s*a;return` + `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}[Cl()](){this.$commands.emit("refreshCursor","ew-resize")}[nd()](){this.$commands.emit("recoverCursor")}[me()+xe()+Se()](){const e=Hi([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("horizontal.line",e[0]),this.$config.init("horizontal.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minX${d}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const r=t.verties,{minY:i,height:a}=this.$viewport,n=this.state.rect.height,o=(r[0][1]-i)/a*n,l=(r[2][1]-i)/a*n;return` M 20 ${o} L 30 ${o} L 30 ${l} L 20 ${l} Z - `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const{minY:t,height:i}=this.$viewport,r=this.state.rect.height,a=this.$context.selection.verties.map(d=>d[1]),o=Math.min.apply(Math,a),l=Math.max.apply(Math,a),c=(o-t)/i*r,h=(l-t)/i*r;return` + `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const{minY:t,height:r}=this.$viewport,i=this.state.rect.height,n=this.$context.selection.verties.map(u=>u[1]),o=Math.min.apply(Math,n),l=Math.max.apply(Math,n),c=(o-t)/r*i,h=(l-t)/r*i;return` M 0 ${c} L 20 ${c} L 20 ${h} L 0 ${h} Z - `}makeRuler(){const{minY:e,maxY:t,height:i}=this.$viewport,r=this.state.rect.height;return Ds=[],this.makeLine(Ds,1e3,e,t,i,r,10,20,1e4),this.makeLine(Ds,200,e,t,i,r,10,16,5e3),this.makeLine(Ds,100,e,t,i,r,10,18,200),this.makeLine(Ds,50,e,t,i,r,10,18,100),this.makeLine(Ds,10,e,t,i,r,10,18,50),this.makeLine(Ds,5,e,t,i,r,10,15,10),this.makeLine(Ds,1,e,t,i,r,10,14,5),Ds.join("")}makeRulerText(){const{minY:e,maxY:t,height:i}=this.$viewport,r=this.state.rect.height,s=Math.abs(t-e);return[s>3e3?this.makeLineText(3e3,e,t,i,r,24):"",2e3${this.makeRulerText()}`}[ve("$lines")+It](){return this.initializeRect(),` - ${this.$config.get("vertical.line").map(t=>{const i=this.$viewport.applyVertex([0,t,0]);return``}).join("")} - `}[$e("$rulerLines")](){return{d:this.makeRulerForCurrent()}}[$e("$cursor")](){const e=this.$viewport.getWorldPosition(),{minY:t,height:i}=this.$viewport;this.initializeRect();const r=this.state.rect.height,s=e[1]-t;return{cssText:` - --elf--vertical-cursor-position: ${s===0?0:s/i*r}px; - `}}refresh(){this.$config.get("show.ruler")&&this.load()}[U(Gi)+oo(10)](){const e=this.$context.selection.current;e&&e.changedRect&&this.refresh()}[U(si,kt)](){this.refresh()}[U(ua,ln)](){this.refreshCanvasSize()}[Qt("onMouseMovepageContainer")](){this.bindData("$cursor"),this.bindData("$rulerLines")}[Qt("vertical.line")](){this.load("$lines")}}var Mne="";class gY extends ge{components(){return{CanvasView:sx,VerticalRuler:ox,HorizontalRuler:ax,PageSubEditor:jf}}template(){return` + `}makeRuler(){const{minY:e,maxY:t,height:r}=this.$viewport,i=this.state.rect.height;return Mi=[],this.makeLine(Mi,1e3,e,t,r,i,10,20,1e4),this.makeLine(Mi,200,e,t,r,i,10,16,5e3),this.makeLine(Mi,100,e,t,r,i,10,18,200),this.makeLine(Mi,50,e,t,r,i,10,18,100),this.makeLine(Mi,10,e,t,r,i,10,18,50),this.makeLine(Mi,5,e,t,r,i,10,15,10),this.makeLine(Mi,1,e,t,r,i,10,14,5),Mi.join("")}makeRulerText(){const{minY:e,maxY:t,height:r}=this.$viewport,i=this.state.rect.height,a=Math.abs(t-e);return[a>3e3?this.makeLineText(3e3,e,t,r,i,24):"",2e3${this.makeRulerText()}`}[G("$lines")+Ee](){return this.initializeRect(),` + ${this.$config.get("vertical.line").map(t=>{const r=this.$viewport.applyVertex([0,t,0]);return``}).join("")} + `}[ne("$rulerLines")](){return{d:this.makeRulerForCurrent()}}[ne("$cursor")](){const e=this.$viewport.getWorldPosition(),{minY:t,height:r}=this.$viewport;this.initializeRect();const i=this.state.rect.height,a=e[1]-t;return{cssText:` + --elf--vertical-cursor-position: ${a===0?0:a/r*i}px; + `}}refresh(){this.$config.get("show.ruler")&&this.load()}[M(Mt)+Ss(10)](){const e=this.$context.selection.current;e&&e.changedRect&&this.refresh()}[M(st,Oe)](){this.refresh()}[M(sa,Ga)](){this.refreshCanvasSize()}[Tt("onMouseMovepageContainer")](){this.bindData("$cursor"),this.bindData("$rulerLines")}[Tt("vertical.line")](){this.load("$lines")}}var mB="";class h7 extends Y{components(){return{CanvasView:o7,VerticalRuler:c7,HorizontalRuler:l7,PageSubEditor:Ld}}template(){return`
      - ${W("PageSubEditor",{ref:"subeditor"})} + ${R("PageSubEditor",{ref:"subeditor"})}
      - ${W("HorizontalRuler",{ref:"hruler"})} - ${W("VerticalRuler",{ref:"vruler"})} + ${R("HorizontalRuler",{ref:"hruler"})} + ${R("VerticalRuler",{ref:"vruler"})}
      - ${W("CanvasView",{ref:"canvas"})} -
      - -
      -
      - `}[$e("$el")](){return{class:`elf--body-panel ${this.$config.get("show.ruler")?"ruler":""}`}}[Qt("show.ruler")](){this.refresh()}[U("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[Qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[$e("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}var $ne="";class mY extends ge{template(){return D("div",{class:"elf--context-menu-manger"},this.$injectManager.generate("context.menu"))}[U(Nf)](e){this.$context.config.set("context.menu.open",e)}}class vY extends ph{initialize(){super.initialize(),this.$context.pathkit.load()}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.$commands.emit("load.json",this.opt.data)}getManagers(){return{snapManager:_1,selection:x1,segmentSelection:b1,timeline:GD,history:f1,modelManager:m1,lockManager:g1,visibleManager:S1,clipboard:p1,pathkit:y1}}components(){return{LayerTab:Zb,ToolBar:Jb,Inspector:fX,BodyPanel:gY,PopupManager:gh,KeyboardManager:dh,IconManager:hh,SwitchLeftPanel:bX,SwitchRightPanel:xX,ContextMenuManager:mY}}getPlugins(){return pX}initState(){return{leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
      -
      -
      - ${W("ToolBar")} + ${R("CanvasView",{ref:"canvas"})}
      -
      -
      - ${W("BodyPanel",{ref:"$bodyPanelView"})} -
      -
      - ${W("LayerTab")} -
      -
      - ${W("Inspector")} -
      -
      -
      - ${W("KeyboardManager")} -
      - ${W("PopupManager")} - ${W("IconManager")} - ${W("ContextMenuManager")} -
      - `}[$e("$el")](){return{"data-design-mode":this.$config.get("editor.design.mode")}}[$e("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[$e("$leftArrow")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[$e("$leftPanel")](){let e="0px",t=this.state.leftSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=`-${this.state.leftSize}px`),{style:{left:e,width:t,bottom:i}}}[$e("$rightPanel")](){let e=0,t=this.state.bottomSize;return this.$config.false("show.right.panel")&&(e=-this.state.rightSize),{style:{right:e,bottom:t}}}[$e("$rightArrow")](){let e=6,t=this.state.bottomSize;return this.$config.true("show.right.panel")&&(e=this.state.rightSize+6),{style:{right:e,bottom:t}}}[$e("$bodyPanel")](){let e=this.state.leftSize,t=this.state.rightSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=0),this.$config.false("show.right.panel")&&(t=0),{style:{left:e,right:t,bottom:i}}}[qe("$splitter")+at("moveSplitter")+lt("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$el"),this.bindData("$splitter"),this.bindData("$headerPanel"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.bindData("$toggleRightButton"),this.bindData("$toggleLeftButton"),this.bindData("$bodyPanel"),this.bindData("$footerPanel"),this.emit("resizeEditor")}[Qt("show.left.panel")](){this.refresh(),this.nextTick(()=>{this.emit(ln),this.$config.init("editor.layout.elements",this.refs)})}[Qt("show.right.panel")](){this.refresh(),this.nextTick(()=>{this.emit(ln),this.$config.init("editor.layout.elements",this.refs)})}[Qt("editor.design.mode")](){this.bindData("$el")}[Kr("$middle")+St](){}[Yr("$middle")+St](){}[U("toggle.fullscreen")](){this.$el.toggleFullscreen()}[U("getLayoutElement")](e){Ue(e)&&e(this.refs)}[U(ua,ln)](){this.$config.init("editor.layout.elements",this.refs)}}var Pne="";/** - * @license - * Copyright 2010-2022 Three.js Authors - * SPDX-License-Identifier: MIT - */const om="139",Ll={LEFT:0,MIDDLE:1,RIGHT:2,ROTATE:0,DOLLY:1,PAN:2},kl={ROTATE:0,PAN:1,DOLLY_PAN:2,DOLLY_ROTATE:3},yY=0,lx=1,bY=2,cx=1,xY=2,zh=3,Vh=0,Jn=1,Ao=2,hx=1,Va=0,Al=1,dx=2,ux=3,px=4,_Y=5,Rl=100,SY=101,wY=102,fx=103,gx=104,MY=200,$Y=201,PY=202,TY=203,mx=204,vx=205,CY=206,EY=207,IY=208,LY=209,kY=210,AY=0,yx=1,RY=2,lm=3,OY=4,zY=5,VY=6,DY=7,Lu=0,FY=1,NY=2,Fs=0,BY=1,jY=2,GY=3,HY=4,UY=5,cm=300,Ro=301,Oo=302,ku=303,Au=304,Dh=306,Ru=1e3,Ln=1001,Ou=1002,ur=1003,hm=1004,dm=1005,Ur=1006,bx=1007,Fh=1008,zo=1009,WY=1010,XY=1011,Nh=1012,YY=1013,zu=1014,Da=1015,Ol=1016,KY=1017,qY=1018,zl=1020,ZY=1021,JY=1022,kn=1023,QY=1024,eK=1025,Vo=1026,Vl=1027,tK=1028,iK=1029,rK=1030,nK=1031,sK=1033,um=33776,pm=33777,fm=33778,gm=33779,xx=35840,_x=35841,Sx=35842,wx=35843,aK=36196,Mx=37492,$x=37496,Px=37808,Tx=37809,Cx=37810,Ex=37811,Ix=37812,Lx=37813,kx=37814,Ax=37815,Rx=37816,Ox=37817,zx=37818,Vx=37819,Dx=37820,Fx=37821,Nx=36492,oK=2200,lK=2201,cK=2202,Vu=2300,Du=2301,mm=2302,Dl=2400,Fl=2401,Fu=2402,vm=2500,Bx=2501,hK=0,Ns=3e3,Li=3001,dK=3200,uK=3201,Nl=0,pK=1,Bs="srgb",Do="srgb-linear",ym=7680,fK=519,Bh=35044,Nu=35048,jx="300 es",bm=1035;class Fa{addEventListener(e,t){this._listeners===void 0&&(this._listeners={});const i=this._listeners;i[e]===void 0&&(i[e]=[]),i[e].indexOf(t)===-1&&i[e].push(t)}hasEventListener(e,t){if(this._listeners===void 0)return!1;const i=this._listeners;return i[e]!==void 0&&i[e].indexOf(t)!==-1}removeEventListener(e,t){if(this._listeners===void 0)return;const r=this._listeners[e];if(r!==void 0){const s=r.indexOf(t);s!==-1&&r.splice(s,1)}}dispatchEvent(e){if(this._listeners===void 0)return;const i=this._listeners[e.type];if(i!==void 0){e.target=this;const r=i.slice(0);for(let s=0,a=r.length;s>8&255]+Er[n>>16&255]+Er[n>>24&255]+"-"+Er[e&255]+Er[e>>8&255]+"-"+Er[e>>16&15|64]+Er[e>>24&255]+"-"+Er[t&63|128]+Er[t>>8&255]+"-"+Er[t>>16&255]+Er[t>>24&255]+Er[i&255]+Er[i>>8&255]+Er[i>>16&255]+Er[i>>24&255]).toLowerCase()}function wr(n,e,t){return Math.max(e,Math.min(t,n))}function gK(n,e){return(n%e+e)%e}function _m(n,e,t){return(1-t)*n+t*e}function Gx(n){return(n&n-1)===0&&n!==0}function mK(n){return Math.pow(2,Math.ceil(Math.log(n)/Math.LN2))}function Sm(n){return Math.pow(2,Math.floor(Math.log(n)/Math.LN2))}class Se{constructor(e=0,t=0){this.x=e,this.y=t}get width(){return this.x}set width(e){this.x=e}get height(){return this.y}set height(e){this.y=e}set(e,t){return this.x=e,this.y=t,this}setScalar(e){return this.x=e,this.y=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y)}copy(e){return this.x=e.x,this.y=e.y,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector2: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this)}addScalar(e){return this.x+=e,this.y+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector2: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this)}subScalar(e){return this.x-=e,this.y-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}multiply(e){return this.x*=e.x,this.y*=e.y,this}multiplyScalar(e){return this.x*=e,this.y*=e,this}divide(e){return this.x/=e.x,this.y/=e.y,this}divideScalar(e){return this.multiplyScalar(1/e)}applyMatrix3(e){const t=this.x,i=this.y,r=e.elements;return this.x=r[0]*t+r[3]*i+r[6],this.y=r[1]*t+r[4]*i+r[7],this}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this}negate(){return this.x=-this.x,this.y=-this.y,this}dot(e){return this.x*e.x+this.y*e.y}cross(e){return this.x*e.y-this.y*e.x}lengthSq(){return this.x*this.x+this.y*this.y}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)}normalize(){return this.divideScalar(this.length()||1)}angle(){return Math.atan2(-this.y,-this.x)+Math.PI}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,i=this.y-e.y;return t*t+i*i}manhattanDistanceTo(e){return Math.abs(this.x-e.x)+Math.abs(this.y-e.y)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this}equals(e){return e.x===this.x&&e.y===this.y}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector2: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this}rotateAround(e,t){const i=Math.cos(t),r=Math.sin(t),s=this.x-e.x,a=this.y-e.y;return this.x=s*i-a*r+e.x,this.y=s*r+a*i+e.y,this}random(){return this.x=Math.random(),this.y=Math.random(),this}*[Symbol.iterator](){yield this.x,yield this.y}}Se.prototype.isVector2=!0;class Mr{constructor(){this.elements=[1,0,0,0,1,0,0,0,1],arguments.length>0&&console.error("THREE.Matrix3: the constructor no longer reads arguments. use .set() instead.")}set(e,t,i,r,s,a,o,l,c){const h=this.elements;return h[0]=e,h[1]=r,h[2]=o,h[3]=t,h[4]=s,h[5]=l,h[6]=i,h[7]=a,h[8]=c,this}identity(){return this.set(1,0,0,0,1,0,0,0,1),this}copy(e){const t=this.elements,i=e.elements;return t[0]=i[0],t[1]=i[1],t[2]=i[2],t[3]=i[3],t[4]=i[4],t[5]=i[5],t[6]=i[6],t[7]=i[7],t[8]=i[8],this}extractBasis(e,t,i){return e.setFromMatrix3Column(this,0),t.setFromMatrix3Column(this,1),i.setFromMatrix3Column(this,2),this}setFromMatrix4(e){const t=e.elements;return this.set(t[0],t[4],t[8],t[1],t[5],t[9],t[2],t[6],t[10]),this}multiply(e){return this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const i=e.elements,r=t.elements,s=this.elements,a=i[0],o=i[3],l=i[6],c=i[1],h=i[4],d=i[7],u=i[2],p=i[5],f=i[8],g=r[0],m=r[3],v=r[6],b=r[1],_=r[4],x=r[7],S=r[2],E=r[5],A=r[8];return s[0]=a*g+o*b+l*S,s[3]=a*m+o*_+l*E,s[6]=a*v+o*x+l*A,s[1]=c*g+h*b+d*S,s[4]=c*m+h*_+d*E,s[7]=c*v+h*x+d*A,s[2]=u*g+p*b+f*S,s[5]=u*m+p*_+f*E,s[8]=u*v+p*x+f*A,this}multiplyScalar(e){const t=this.elements;return t[0]*=e,t[3]*=e,t[6]*=e,t[1]*=e,t[4]*=e,t[7]*=e,t[2]*=e,t[5]*=e,t[8]*=e,this}determinant(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8];return t*a*h-t*o*c-i*s*h+i*o*l+r*s*c-r*a*l}invert(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=h*a-o*c,u=o*l-h*s,p=c*s-a*l,f=t*d+i*u+r*p;if(f===0)return this.set(0,0,0,0,0,0,0,0,0);const g=1/f;return e[0]=d*g,e[1]=(r*c-h*i)*g,e[2]=(o*i-r*a)*g,e[3]=u*g,e[4]=(h*t-r*l)*g,e[5]=(r*s-o*t)*g,e[6]=p*g,e[7]=(i*l-c*t)*g,e[8]=(a*t-i*s)*g,this}transpose(){let e;const t=this.elements;return e=t[1],t[1]=t[3],t[3]=e,e=t[2],t[2]=t[6],t[6]=e,e=t[5],t[5]=t[7],t[7]=e,this}getNormalMatrix(e){return this.setFromMatrix4(e).invert().transpose()}transposeIntoArray(e){const t=this.elements;return e[0]=t[0],e[1]=t[3],e[2]=t[6],e[3]=t[1],e[4]=t[4],e[5]=t[7],e[6]=t[2],e[7]=t[5],e[8]=t[8],this}setUvTransform(e,t,i,r,s,a,o){const l=Math.cos(s),c=Math.sin(s);return this.set(i*l,i*c,-i*(l*a+c*o)+a+e,-r*c,r*l,-r*(-c*a+l*o)+o+t,0,0,1),this}scale(e,t){const i=this.elements;return i[0]*=e,i[3]*=e,i[6]*=e,i[1]*=t,i[4]*=t,i[7]*=t,this}rotate(e){const t=Math.cos(e),i=Math.sin(e),r=this.elements,s=r[0],a=r[3],o=r[6],l=r[1],c=r[4],h=r[7];return r[0]=t*s+i*l,r[3]=t*a+i*c,r[6]=t*o+i*h,r[1]=-i*s+t*l,r[4]=-i*a+t*c,r[7]=-i*o+t*h,this}translate(e,t){const i=this.elements;return i[0]+=e*i[2],i[3]+=e*i[5],i[6]+=e*i[8],i[1]+=t*i[2],i[4]+=t*i[5],i[7]+=t*i[8],this}equals(e){const t=this.elements,i=e.elements;for(let r=0;r<9;r++)if(t[r]!==i[r])return!1;return!0}fromArray(e,t=0){for(let i=0;i<9;i++)this.elements[i]=e[i+t];return this}toArray(e=[],t=0){const i=this.elements;return e[t]=i[0],e[t+1]=i[1],e[t+2]=i[2],e[t+3]=i[3],e[t+4]=i[4],e[t+5]=i[5],e[t+6]=i[6],e[t+7]=i[7],e[t+8]=i[8],e}clone(){return new this.constructor().fromArray(this.elements)}}Mr.prototype.isMatrix3=!0;function Hx(n){for(let e=n.length-1;e>=0;--e)if(n[e]>65535)return!0;return!1}const vK={Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array};function Bl(n,e){return new vK[n](e)}function jh(n){return document.createElementNS("http://www.w3.org/1999/xhtml",n)}function Fo(n){return n<.04045?n*.0773993808:Math.pow(n*.9478672986+.0521327014,2.4)}function ju(n){return n<.0031308?n*12.92:1.055*Math.pow(n,.41666)-.055}const wm={[Bs]:{[Do]:Fo},[Do]:{[Bs]:ju}},es={legacyMode:!0,get workingColorSpace(){return Do},set workingColorSpace(n){console.warn("THREE.ColorManagement: .workingColorSpace is readonly.")},convert:function(n,e,t){if(this.legacyMode||e===t||!e||!t)return n;if(wm[e]&&wm[e][t]!==void 0){const i=wm[e][t];return n.r=i(n.r),n.g=i(n.g),n.b=i(n.b),n}throw new Error("Unsupported color space conversion.")},fromWorkingColorSpace:function(n,e){return this.convert(n,this.workingColorSpace,e)},toWorkingColorSpace:function(n,e){return this.convert(n,e,this.workingColorSpace)}},Ux={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074},pr={r:0,g:0,b:0},ts={h:0,s:0,l:0},Gu={h:0,s:0,l:0};function Mm(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+(e-n)*6*t:t<1/2?e:t<2/3?n+(e-n)*6*(2/3-t):n}function Hu(n,e){return e.r=n.r,e.g=n.g,e.b=n.b,e}class it{constructor(e,t,i){return t===void 0&&i===void 0?this.set(e):this.setRGB(e,t,i)}set(e){return e&&e.isColor?this.copy(e):typeof e=="number"?this.setHex(e):typeof e=="string"&&this.setStyle(e),this}setScalar(e){return this.r=e,this.g=e,this.b=e,this}setHex(e,t=Bs){return e=Math.floor(e),this.r=(e>>16&255)/255,this.g=(e>>8&255)/255,this.b=(e&255)/255,es.toWorkingColorSpace(this,t),this}setRGB(e,t,i,r=Do){return this.r=e,this.g=t,this.b=i,es.toWorkingColorSpace(this,r),this}setHSL(e,t,i,r=Do){if(e=gK(e,1),t=wr(t,0,1),i=wr(i,0,1),t===0)this.r=this.g=this.b=i;else{const s=i<=.5?i*(1+t):i+t-i*t,a=2*i-s;this.r=Mm(a,s,e+1/3),this.g=Mm(a,s,e),this.b=Mm(a,s,e-1/3)}return es.toWorkingColorSpace(this,r),this}setStyle(e,t=Bs){function i(s){s!==void 0&&parseFloat(s)<1&&console.warn("THREE.Color: Alpha component of "+e+" will be ignored.")}let r;if(r=/^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(e)){let s;const a=r[1],o=r[2];switch(a){case"rgb":case"rgba":if(s=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o))return this.r=Math.min(255,parseInt(s[1],10))/255,this.g=Math.min(255,parseInt(s[2],10))/255,this.b=Math.min(255,parseInt(s[3],10))/255,es.toWorkingColorSpace(this,t),i(s[4]),this;if(s=/^\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o))return this.r=Math.min(100,parseInt(s[1],10))/100,this.g=Math.min(100,parseInt(s[2],10))/100,this.b=Math.min(100,parseInt(s[3],10))/100,es.toWorkingColorSpace(this,t),i(s[4]),this;break;case"hsl":case"hsla":if(s=/^\s*(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o)){const l=parseFloat(s[1])/360,c=parseInt(s[2],10)/100,h=parseInt(s[3],10)/100;return i(s[4]),this.setHSL(l,c,h,t)}break}}else if(r=/^\#([A-Fa-f\d]+)$/.exec(e)){const s=r[1],a=s.length;if(a===3)return this.r=parseInt(s.charAt(0)+s.charAt(0),16)/255,this.g=parseInt(s.charAt(1)+s.charAt(1),16)/255,this.b=parseInt(s.charAt(2)+s.charAt(2),16)/255,es.toWorkingColorSpace(this,t),this;if(a===6)return this.r=parseInt(s.charAt(0)+s.charAt(1),16)/255,this.g=parseInt(s.charAt(2)+s.charAt(3),16)/255,this.b=parseInt(s.charAt(4)+s.charAt(5),16)/255,es.toWorkingColorSpace(this,t),this}return e&&e.length>0?this.setColorName(e,t):this}setColorName(e,t=Bs){const i=Ux[e.toLowerCase()];return i!==void 0?this.setHex(i,t):console.warn("THREE.Color: Unknown color "+e),this}clone(){return new this.constructor(this.r,this.g,this.b)}copy(e){return this.r=e.r,this.g=e.g,this.b=e.b,this}copySRGBToLinear(e){return this.r=Fo(e.r),this.g=Fo(e.g),this.b=Fo(e.b),this}copyLinearToSRGB(e){return this.r=ju(e.r),this.g=ju(e.g),this.b=ju(e.b),this}convertSRGBToLinear(){return this.copySRGBToLinear(this),this}convertLinearToSRGB(){return this.copyLinearToSRGB(this),this}getHex(e=Bs){return es.fromWorkingColorSpace(Hu(this,pr),e),wr(pr.r*255,0,255)<<16^wr(pr.g*255,0,255)<<8^wr(pr.b*255,0,255)<<0}getHexString(e=Bs){return("000000"+this.getHex(e).toString(16)).slice(-6)}getHSL(e,t=Do){es.fromWorkingColorSpace(Hu(this,pr),t);const i=pr.r,r=pr.g,s=pr.b,a=Math.max(i,r,s),o=Math.min(i,r,s);let l,c;const h=(o+a)/2;if(o===a)l=0,c=0;else{const d=a-o;switch(c=h<=.5?d/(a+o):d/(2-a-o),a){case i:l=(r-s)/d+(r2048||t.height>2048?(console.warn("THREE.ImageUtils.getDataURL: Image converted to jpg for performance reasons",e),t.toDataURL("image/jpeg",.6)):t.toDataURL("image/png")}static sRGBToLinear(e){if(typeof HTMLImageElement!="undefined"&&e instanceof HTMLImageElement||typeof HTMLCanvasElement!="undefined"&&e instanceof HTMLCanvasElement||typeof ImageBitmap!="undefined"&&e instanceof ImageBitmap){const t=jh("canvas");t.width=e.width,t.height=e.height;const i=t.getContext("2d");i.drawImage(e,0,0,e.width,e.height);const r=i.getImageData(0,0,e.width,e.height),s=r.data;for(let a=0;a1)switch(this.wrapS){case Ru:e.x=e.x-Math.floor(e.x);break;case Ln:e.x=e.x<0?0:1;break;case Ou:Math.abs(Math.floor(e.x)%2)===1?e.x=Math.ceil(e.x)-e.x:e.x=e.x-Math.floor(e.x);break}if(e.y<0||e.y>1)switch(this.wrapT){case Ru:e.y=e.y-Math.floor(e.y);break;case Ln:e.y=e.y<0?0:1;break;case Ou:Math.abs(Math.floor(e.y)%2)===1?e.y=Math.ceil(e.y)-e.y:e.y=e.y-Math.floor(e.y);break}return this.flipY&&(e.y=1-e.y),e}set needsUpdate(e){e===!0&&(this.version++,this.source.needsUpdate=!0)}}fr.DEFAULT_IMAGE=null,fr.DEFAULT_MAPPING=cm,fr.prototype.isTexture=!0;class gi{constructor(e=0,t=0,i=0,r=1){this.x=e,this.y=t,this.z=i,this.w=r}get width(){return this.z}set width(e){this.z=e}get height(){return this.w}set height(e){this.w=e}set(e,t,i,r){return this.x=e,this.y=t,this.z=i,this.w=r,this}setScalar(e){return this.x=e,this.y=e,this.z=e,this.w=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setZ(e){return this.z=e,this}setW(e){return this.w=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;case 2:this.z=t;break;case 3:this.w=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;case 2:return this.z;case 3:return this.w;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y,this.z,this.w)}copy(e){return this.x=e.x,this.y=e.y,this.z=e.z,this.w=e.w!==void 0?e.w:1,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector4: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this.z+=e.z,this.w+=e.w,this)}addScalar(e){return this.x+=e,this.y+=e,this.z+=e,this.w+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this.z=e.z+t.z,this.w=e.w+t.w,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this.z+=e.z*t,this.w+=e.w*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector4: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this.z-=e.z,this.w-=e.w,this)}subScalar(e){return this.x-=e,this.y-=e,this.z-=e,this.w-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this.z=e.z-t.z,this.w=e.w-t.w,this}multiply(e){return this.x*=e.x,this.y*=e.y,this.z*=e.z,this.w*=e.w,this}multiplyScalar(e){return this.x*=e,this.y*=e,this.z*=e,this.w*=e,this}applyMatrix4(e){const t=this.x,i=this.y,r=this.z,s=this.w,a=e.elements;return this.x=a[0]*t+a[4]*i+a[8]*r+a[12]*s,this.y=a[1]*t+a[5]*i+a[9]*r+a[13]*s,this.z=a[2]*t+a[6]*i+a[10]*r+a[14]*s,this.w=a[3]*t+a[7]*i+a[11]*r+a[15]*s,this}divideScalar(e){return this.multiplyScalar(1/e)}setAxisAngleFromQuaternion(e){this.w=2*Math.acos(e.w);const t=Math.sqrt(1-e.w*e.w);return t<1e-4?(this.x=1,this.y=0,this.z=0):(this.x=e.x/t,this.y=e.y/t,this.z=e.z/t),this}setAxisAngleFromRotationMatrix(e){let t,i,r,s;const l=e.elements,c=l[0],h=l[4],d=l[8],u=l[1],p=l[5],f=l[9],g=l[2],m=l[6],v=l[10];if(Math.abs(h-u)<.01&&Math.abs(d-g)<.01&&Math.abs(f-m)<.01){if(Math.abs(h+u)<.1&&Math.abs(d+g)<.1&&Math.abs(f+m)<.1&&Math.abs(c+p+v-3)<.1)return this.set(1,0,0,0),this;t=Math.PI;const _=(c+1)/2,x=(p+1)/2,S=(v+1)/2,E=(h+u)/4,A=(d+g)/4,z=(f+m)/4;return _>x&&_>S?_<.01?(i=0,r=.707106781,s=.707106781):(i=Math.sqrt(_),r=E/i,s=A/i):x>S?x<.01?(i=.707106781,r=0,s=.707106781):(r=Math.sqrt(x),i=E/r,s=z/r):S<.01?(i=.707106781,r=.707106781,s=0):(s=Math.sqrt(S),i=A/s,r=z/s),this.set(i,r,s,t),this}let b=Math.sqrt((m-f)*(m-f)+(d-g)*(d-g)+(u-h)*(u-h));return Math.abs(b)<.001&&(b=1),this.x=(m-f)/b,this.y=(d-g)/b,this.z=(u-h)/b,this.w=Math.acos((c+p+v-1)/2),this}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this.z=Math.min(this.z,e.z),this.w=Math.min(this.w,e.w),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this.z=Math.max(this.z,e.z),this.w=Math.max(this.w,e.w),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this.z=Math.max(e.z,Math.min(t.z,this.z)),this.w=Math.max(e.w,Math.min(t.w,this.w)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this.z=Math.max(e,Math.min(t,this.z)),this.w=Math.max(e,Math.min(t,this.w)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this.z=Math.floor(this.z),this.w=Math.floor(this.w),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this.z=Math.ceil(this.z),this.w=Math.ceil(this.w),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this.z=Math.round(this.z),this.w=Math.round(this.w),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this.z=this.z<0?Math.ceil(this.z):Math.floor(this.z),this.w=this.w<0?Math.ceil(this.w):Math.floor(this.w),this}negate(){return this.x=-this.x,this.y=-this.y,this.z=-this.z,this.w=-this.w,this}dot(e){return this.x*e.x+this.y*e.y+this.z*e.z+this.w*e.w}lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w}length(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)+Math.abs(this.z)+Math.abs(this.w)}normalize(){return this.divideScalar(this.length()||1)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this.z+=(e.z-this.z)*t,this.w+=(e.w-this.w)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this.z=e.z+(t.z-e.z)*i,this.w=e.w+(t.w-e.w)*i,this}equals(e){return e.x===this.x&&e.y===this.y&&e.z===this.z&&e.w===this.w}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this.z=e[t+2],this.w=e[t+3],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e[t+2]=this.z,e[t+3]=this.w,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector4: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this.z=e.getZ(t),this.w=e.getW(t),this}random(){return this.x=Math.random(),this.y=Math.random(),this.z=Math.random(),this.w=Math.random(),this}*[Symbol.iterator](){yield this.x,yield this.y,yield this.z,yield this.w}}gi.prototype.isVector4=!0;class dn extends Fa{constructor(e,t,i={}){super(),this.width=e,this.height=t,this.depth=1,this.scissor=new gi(0,0,e,t),this.scissorTest=!1,this.viewport=new gi(0,0,e,t);const r={width:e,height:t,depth:1};this.texture=new fr(r,i.mapping,i.wrapS,i.wrapT,i.magFilter,i.minFilter,i.format,i.type,i.anisotropy,i.encoding),this.texture.isRenderTargetTexture=!0,this.texture.flipY=!1,this.texture.generateMipmaps=i.generateMipmaps!==void 0?i.generateMipmaps:!1,this.texture.internalFormat=i.internalFormat!==void 0?i.internalFormat:null,this.texture.minFilter=i.minFilter!==void 0?i.minFilter:Ur,this.depthBuffer=i.depthBuffer!==void 0?i.depthBuffer:!0,this.stencilBuffer=i.stencilBuffer!==void 0?i.stencilBuffer:!1,this.depthTexture=i.depthTexture!==void 0?i.depthTexture:null,this.samples=i.samples!==void 0?i.samples:0}setSize(e,t,i=1){(this.width!==e||this.height!==t||this.depth!==i)&&(this.width=e,this.height=t,this.depth=i,this.texture.image.width=e,this.texture.image.height=t,this.texture.image.depth=i,this.dispose()),this.viewport.set(0,0,e,t),this.scissor.set(0,0,e,t)}clone(){return new this.constructor().copy(this)}copy(e){return this.width=e.width,this.height=e.height,this.depth=e.depth,this.viewport.copy(e.viewport),this.texture=e.texture.clone(),this.texture.isRenderTargetTexture=!0,this.texture.image=Object.assign({},e.texture.image),this.depthBuffer=e.depthBuffer,this.stencilBuffer=e.stencilBuffer,e.depthTexture!==null&&(this.depthTexture=e.depthTexture.clone()),this.samples=e.samples,this}dispose(){this.dispatchEvent({type:"dispose"})}}dn.prototype.isWebGLRenderTarget=!0;class Uu extends fr{constructor(e=null,t=1,i=1,r=1){super(null),this.image={data:e,width:t,height:i,depth:r},this.magFilter=ur,this.minFilter=ur,this.wrapR=Ln,this.generateMipmaps=!1,this.flipY=!1,this.unpackAlignment=1}}Uu.prototype.isDataArrayTexture=!0;class bK extends dn{constructor(e,t,i){super(e,t),this.depth=i,this.texture=new Uu(null,e,t,i),this.texture.isRenderTargetTexture=!0}}bK.prototype.isWebGLArrayRenderTarget=!0;class Pm extends fr{constructor(e=null,t=1,i=1,r=1){super(null),this.image={data:e,width:t,height:i,depth:r},this.magFilter=ur,this.minFilter=ur,this.wrapR=Ln,this.generateMipmaps=!1,this.flipY=!1,this.unpackAlignment=1}}Pm.prototype.isData3DTexture=!0;class xK extends dn{constructor(e,t,i){super(e,t),this.depth=i,this.texture=new Pm(null,e,t,i),this.texture.isRenderTargetTexture=!0}}xK.prototype.isWebGL3DRenderTarget=!0;class _K extends dn{constructor(e,t,i,r={}){super(e,t,r);const s=this.texture;this.texture=[];for(let a=0;a=0?1:-1,_=1-v*v;if(_>Number.EPSILON){const S=Math.sqrt(_),E=Math.atan2(S,v*b);m=Math.sin(m*E)/S,o=Math.sin(o*E)/S}const x=o*b;if(l=l*m+u*x,c=c*m+p*x,h=h*m+f*x,d=d*m+g*x,m===1-o){const S=1/Math.sqrt(l*l+c*c+h*h+d*d);l*=S,c*=S,h*=S,d*=S}}e[t]=l,e[t+1]=c,e[t+2]=h,e[t+3]=d}static multiplyQuaternionsFlat(e,t,i,r,s,a){const o=i[r],l=i[r+1],c=i[r+2],h=i[r+3],d=s[a],u=s[a+1],p=s[a+2],f=s[a+3];return e[t]=o*f+h*d+l*p-c*u,e[t+1]=l*f+h*u+c*d-o*p,e[t+2]=c*f+h*p+o*u-l*d,e[t+3]=h*f-o*d-l*u-c*p,e}get x(){return this._x}set x(e){this._x=e,this._onChangeCallback()}get y(){return this._y}set y(e){this._y=e,this._onChangeCallback()}get z(){return this._z}set z(e){this._z=e,this._onChangeCallback()}get w(){return this._w}set w(e){this._w=e,this._onChangeCallback()}set(e,t,i,r){return this._x=e,this._y=t,this._z=i,this._w=r,this._onChangeCallback(),this}clone(){return new this.constructor(this._x,this._y,this._z,this._w)}copy(e){return this._x=e.x,this._y=e.y,this._z=e.z,this._w=e.w,this._onChangeCallback(),this}setFromEuler(e,t){if(!(e&&e.isEuler))throw new Error("THREE.Quaternion: .setFromEuler() now expects an Euler rotation rather than a Vector3 and order.");const i=e._x,r=e._y,s=e._z,a=e._order,o=Math.cos,l=Math.sin,c=o(i/2),h=o(r/2),d=o(s/2),u=l(i/2),p=l(r/2),f=l(s/2);switch(a){case"XYZ":this._x=u*h*d+c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d-u*p*f;break;case"YXZ":this._x=u*h*d+c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d+u*p*f;break;case"ZXY":this._x=u*h*d-c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d-u*p*f;break;case"ZYX":this._x=u*h*d-c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d+u*p*f;break;case"YZX":this._x=u*h*d+c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d-u*p*f;break;case"XZY":this._x=u*h*d-c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d+u*p*f;break;default:console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: "+a)}return t!==!1&&this._onChangeCallback(),this}setFromAxisAngle(e,t){const i=t/2,r=Math.sin(i);return this._x=e.x*r,this._y=e.y*r,this._z=e.z*r,this._w=Math.cos(i),this._onChangeCallback(),this}setFromRotationMatrix(e){const t=e.elements,i=t[0],r=t[4],s=t[8],a=t[1],o=t[5],l=t[9],c=t[2],h=t[6],d=t[10],u=i+o+d;if(u>0){const p=.5/Math.sqrt(u+1);this._w=.25/p,this._x=(h-l)*p,this._y=(s-c)*p,this._z=(a-r)*p}else if(i>o&&i>d){const p=2*Math.sqrt(1+i-o-d);this._w=(h-l)/p,this._x=.25*p,this._y=(r+a)/p,this._z=(s+c)/p}else if(o>d){const p=2*Math.sqrt(1+o-i-d);this._w=(s-c)/p,this._x=(r+a)/p,this._y=.25*p,this._z=(l+h)/p}else{const p=2*Math.sqrt(1+d-i-o);this._w=(a-r)/p,this._x=(s+c)/p,this._y=(l+h)/p,this._z=.25*p}return this._onChangeCallback(),this}setFromUnitVectors(e,t){let i=e.dot(t)+1;return iMath.abs(e.z)?(this._x=-e.y,this._y=e.x,this._z=0,this._w=i):(this._x=0,this._y=-e.z,this._z=e.y,this._w=i)):(this._x=e.y*t.z-e.z*t.y,this._y=e.z*t.x-e.x*t.z,this._z=e.x*t.y-e.y*t.x,this._w=i),this.normalize()}angleTo(e){return 2*Math.acos(Math.abs(wr(this.dot(e),-1,1)))}rotateTowards(e,t){const i=this.angleTo(e);if(i===0)return this;const r=Math.min(1,t/i);return this.slerp(e,r),this}identity(){return this.set(0,0,0,1)}invert(){return this.conjugate()}conjugate(){return this._x*=-1,this._y*=-1,this._z*=-1,this._onChangeCallback(),this}dot(e){return this._x*e._x+this._y*e._y+this._z*e._z+this._w*e._w}lengthSq(){return this._x*this._x+this._y*this._y+this._z*this._z+this._w*this._w}length(){return Math.sqrt(this._x*this._x+this._y*this._y+this._z*this._z+this._w*this._w)}normalize(){let e=this.length();return e===0?(this._x=0,this._y=0,this._z=0,this._w=1):(e=1/e,this._x=this._x*e,this._y=this._y*e,this._z=this._z*e,this._w=this._w*e),this._onChangeCallback(),this}multiply(e,t){return t!==void 0?(console.warn("THREE.Quaternion: .multiply() now only accepts one argument. Use .multiplyQuaternions( a, b ) instead."),this.multiplyQuaternions(e,t)):this.multiplyQuaternions(this,e)}premultiply(e){return this.multiplyQuaternions(e,this)}multiplyQuaternions(e,t){const i=e._x,r=e._y,s=e._z,a=e._w,o=t._x,l=t._y,c=t._z,h=t._w;return this._x=i*h+a*o+r*c-s*l,this._y=r*h+a*l+s*o-i*c,this._z=s*h+a*c+i*l-r*o,this._w=a*h-i*o-r*l-s*c,this._onChangeCallback(),this}slerp(e,t){if(t===0)return this;if(t===1)return this.copy(e);const i=this._x,r=this._y,s=this._z,a=this._w;let o=a*e._w+i*e._x+r*e._y+s*e._z;if(o<0?(this._w=-e._w,this._x=-e._x,this._y=-e._y,this._z=-e._z,o=-o):this.copy(e),o>=1)return this._w=a,this._x=i,this._y=r,this._z=s,this;const l=1-o*o;if(l<=Number.EPSILON){const p=1-t;return this._w=p*a+t*this._w,this._x=p*i+t*this._x,this._y=p*r+t*this._y,this._z=p*s+t*this._z,this.normalize(),this._onChangeCallback(),this}const c=Math.sqrt(l),h=Math.atan2(c,o),d=Math.sin((1-t)*h)/c,u=Math.sin(t*h)/c;return this._w=a*d+this._w*u,this._x=i*d+this._x*u,this._y=r*d+this._y*u,this._z=s*d+this._z*u,this._onChangeCallback(),this}slerpQuaternions(e,t,i){return this.copy(e).slerp(t,i)}random(){const e=Math.random(),t=Math.sqrt(1-e),i=Math.sqrt(e),r=2*Math.PI*Math.random(),s=2*Math.PI*Math.random();return this.set(t*Math.cos(r),i*Math.sin(s),i*Math.cos(s),t*Math.sin(r))}equals(e){return e._x===this._x&&e._y===this._y&&e._z===this._z&&e._w===this._w}fromArray(e,t=0){return this._x=e[t],this._y=e[t+1],this._z=e[t+2],this._w=e[t+3],this._onChangeCallback(),this}toArray(e=[],t=0){return e[t]=this._x,e[t+1]=this._y,e[t+2]=this._z,e[t+3]=this._w,e}fromBufferAttribute(e,t){return this._x=e.getX(t),this._y=e.getY(t),this._z=e.getZ(t),this._w=e.getW(t),this}_onChange(e){return this._onChangeCallback=e,this}_onChangeCallback(){}}Pi.prototype.isQuaternion=!0;class R{constructor(e=0,t=0,i=0){this.x=e,this.y=t,this.z=i}set(e,t,i){return i===void 0&&(i=this.z),this.x=e,this.y=t,this.z=i,this}setScalar(e){return this.x=e,this.y=e,this.z=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setZ(e){return this.z=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;case 2:this.z=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;case 2:return this.z;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y,this.z)}copy(e){return this.x=e.x,this.y=e.y,this.z=e.z,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector3: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this.z+=e.z,this)}addScalar(e){return this.x+=e,this.y+=e,this.z+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this.z=e.z+t.z,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this.z+=e.z*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector3: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this.z-=e.z,this)}subScalar(e){return this.x-=e,this.y-=e,this.z-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this.z=e.z-t.z,this}multiply(e,t){return t!==void 0?(console.warn("THREE.Vector3: .multiply() now only accepts one argument. Use .multiplyVectors( a, b ) instead."),this.multiplyVectors(e,t)):(this.x*=e.x,this.y*=e.y,this.z*=e.z,this)}multiplyScalar(e){return this.x*=e,this.y*=e,this.z*=e,this}multiplyVectors(e,t){return this.x=e.x*t.x,this.y=e.y*t.y,this.z=e.z*t.z,this}applyEuler(e){return e&&e.isEuler||console.error("THREE.Vector3: .applyEuler() now expects an Euler rotation rather than a Vector3 and order."),this.applyQuaternion(Wx.setFromEuler(e))}applyAxisAngle(e,t){return this.applyQuaternion(Wx.setFromAxisAngle(e,t))}applyMatrix3(e){const t=this.x,i=this.y,r=this.z,s=e.elements;return this.x=s[0]*t+s[3]*i+s[6]*r,this.y=s[1]*t+s[4]*i+s[7]*r,this.z=s[2]*t+s[5]*i+s[8]*r,this}applyNormalMatrix(e){return this.applyMatrix3(e).normalize()}applyMatrix4(e){const t=this.x,i=this.y,r=this.z,s=e.elements,a=1/(s[3]*t+s[7]*i+s[11]*r+s[15]);return this.x=(s[0]*t+s[4]*i+s[8]*r+s[12])*a,this.y=(s[1]*t+s[5]*i+s[9]*r+s[13])*a,this.z=(s[2]*t+s[6]*i+s[10]*r+s[14])*a,this}applyQuaternion(e){const t=this.x,i=this.y,r=this.z,s=e.x,a=e.y,o=e.z,l=e.w,c=l*t+a*r-o*i,h=l*i+o*t-s*r,d=l*r+s*i-a*t,u=-s*t-a*i-o*r;return this.x=c*l+u*-s+h*-o-d*-a,this.y=h*l+u*-a+d*-s-c*-o,this.z=d*l+u*-o+c*-a-h*-s,this}project(e){return this.applyMatrix4(e.matrixWorldInverse).applyMatrix4(e.projectionMatrix)}unproject(e){return this.applyMatrix4(e.projectionMatrixInverse).applyMatrix4(e.matrixWorld)}transformDirection(e){const t=this.x,i=this.y,r=this.z,s=e.elements;return this.x=s[0]*t+s[4]*i+s[8]*r,this.y=s[1]*t+s[5]*i+s[9]*r,this.z=s[2]*t+s[6]*i+s[10]*r,this.normalize()}divide(e){return this.x/=e.x,this.y/=e.y,this.z/=e.z,this}divideScalar(e){return this.multiplyScalar(1/e)}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this.z=Math.min(this.z,e.z),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this.z=Math.max(this.z,e.z),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this.z=Math.max(e.z,Math.min(t.z,this.z)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this.z=Math.max(e,Math.min(t,this.z)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this.z=Math.floor(this.z),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this.z=Math.ceil(this.z),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this.z=Math.round(this.z),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this.z=this.z<0?Math.ceil(this.z):Math.floor(this.z),this}negate(){return this.x=-this.x,this.y=-this.y,this.z=-this.z,this}dot(e){return this.x*e.x+this.y*e.y+this.z*e.z}lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z}length(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)+Math.abs(this.z)}normalize(){return this.divideScalar(this.length()||1)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this.z+=(e.z-this.z)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this.z=e.z+(t.z-e.z)*i,this}cross(e,t){return t!==void 0?(console.warn("THREE.Vector3: .cross() now only accepts one argument. Use .crossVectors( a, b ) instead."),this.crossVectors(e,t)):this.crossVectors(this,e)}crossVectors(e,t){const i=e.x,r=e.y,s=e.z,a=t.x,o=t.y,l=t.z;return this.x=r*l-s*o,this.y=s*a-i*l,this.z=i*o-r*a,this}projectOnVector(e){const t=e.lengthSq();if(t===0)return this.set(0,0,0);const i=e.dot(this)/t;return this.copy(e).multiplyScalar(i)}projectOnPlane(e){return Tm.copy(this).projectOnVector(e),this.sub(Tm)}reflect(e){return this.sub(Tm.copy(e).multiplyScalar(2*this.dot(e)))}angleTo(e){const t=Math.sqrt(this.lengthSq()*e.lengthSq());if(t===0)return Math.PI/2;const i=this.dot(e)/t;return Math.acos(wr(i,-1,1))}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,i=this.y-e.y,r=this.z-e.z;return t*t+i*i+r*r}manhattanDistanceTo(e){return Math.abs(this.x-e.x)+Math.abs(this.y-e.y)+Math.abs(this.z-e.z)}setFromSpherical(e){return this.setFromSphericalCoords(e.radius,e.phi,e.theta)}setFromSphericalCoords(e,t,i){const r=Math.sin(t)*e;return this.x=r*Math.sin(i),this.y=Math.cos(t)*e,this.z=r*Math.cos(i),this}setFromCylindrical(e){return this.setFromCylindricalCoords(e.radius,e.theta,e.y)}setFromCylindricalCoords(e,t,i){return this.x=e*Math.sin(t),this.y=i,this.z=e*Math.cos(t),this}setFromMatrixPosition(e){const t=e.elements;return this.x=t[12],this.y=t[13],this.z=t[14],this}setFromMatrixScale(e){const t=this.setFromMatrixColumn(e,0).length(),i=this.setFromMatrixColumn(e,1).length(),r=this.setFromMatrixColumn(e,2).length();return this.x=t,this.y=i,this.z=r,this}setFromMatrixColumn(e,t){return this.fromArray(e.elements,t*4)}setFromMatrix3Column(e,t){return this.fromArray(e.elements,t*3)}setFromEuler(e){return this.x=e._x,this.y=e._y,this.z=e._z,this}equals(e){return e.x===this.x&&e.y===this.y&&e.z===this.z}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this.z=e[t+2],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e[t+2]=this.z,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector3: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this.z=e.getZ(t),this}random(){return this.x=Math.random(),this.y=Math.random(),this.z=Math.random(),this}randomDirection(){const e=(Math.random()-.5)*2,t=Math.random()*Math.PI*2,i=Math.sqrt(1-e**2);return this.x=i*Math.cos(t),this.y=i*Math.sin(t),this.z=e,this}*[Symbol.iterator](){yield this.x,yield this.y,yield this.z}}R.prototype.isVector3=!0;const Tm=new R,Wx=new Pi;class An{constructor(e=new R(1/0,1/0,1/0),t=new R(-1/0,-1/0,-1/0)){this.min=e,this.max=t}set(e,t){return this.min.copy(e),this.max.copy(t),this}setFromArray(e){let t=1/0,i=1/0,r=1/0,s=-1/0,a=-1/0,o=-1/0;for(let l=0,c=e.length;ls&&(s=h),d>a&&(a=d),u>o&&(o=u)}return this.min.set(t,i,r),this.max.set(s,a,o),this}setFromBufferAttribute(e){let t=1/0,i=1/0,r=1/0,s=-1/0,a=-1/0,o=-1/0;for(let l=0,c=e.count;ls&&(s=h),d>a&&(a=d),u>o&&(o=u)}return this.min.set(t,i,r),this.max.set(s,a,o),this}setFromPoints(e){this.makeEmpty();for(let t=0,i=e.length;tthis.max.x||e.ythis.max.y||e.zthis.max.z)}containsBox(e){return this.min.x<=e.min.x&&e.max.x<=this.max.x&&this.min.y<=e.min.y&&e.max.y<=this.max.y&&this.min.z<=e.min.z&&e.max.z<=this.max.z}getParameter(e,t){return t.set((e.x-this.min.x)/(this.max.x-this.min.x),(e.y-this.min.y)/(this.max.y-this.min.y),(e.z-this.min.z)/(this.max.z-this.min.z))}intersectsBox(e){return!(e.max.xthis.max.x||e.max.ythis.max.y||e.max.zthis.max.z)}intersectsSphere(e){return this.clampPoint(e.center,Bo),Bo.distanceToSquared(e.center)<=e.radius*e.radius}intersectsPlane(e){let t,i;return e.normal.x>0?(t=e.normal.x*this.min.x,i=e.normal.x*this.max.x):(t=e.normal.x*this.max.x,i=e.normal.x*this.min.x),e.normal.y>0?(t+=e.normal.y*this.min.y,i+=e.normal.y*this.max.y):(t+=e.normal.y*this.max.y,i+=e.normal.y*this.min.y),e.normal.z>0?(t+=e.normal.z*this.min.z,i+=e.normal.z*this.max.z):(t+=e.normal.z*this.max.z,i+=e.normal.z*this.min.z),t<=-e.constant&&i>=-e.constant}intersectsTriangle(e){if(this.isEmpty())return!1;this.getCenter(Gh),Wu.subVectors(this.max,Gh),Hl.subVectors(e.a,Gh),Ul.subVectors(e.b,Gh),Wl.subVectors(e.c,Gh),Na.subVectors(Ul,Hl),Ba.subVectors(Wl,Ul),jo.subVectors(Hl,Wl);let t=[0,-Na.z,Na.y,0,-Ba.z,Ba.y,0,-jo.z,jo.y,Na.z,0,-Na.x,Ba.z,0,-Ba.x,jo.z,0,-jo.x,-Na.y,Na.x,0,-Ba.y,Ba.x,0,-jo.y,jo.x,0];return!Em(t,Hl,Ul,Wl,Wu)||(t=[1,0,0,0,1,0,0,0,1],!Em(t,Hl,Ul,Wl,Wu))?!1:(Xu.crossVectors(Na,Ba),t=[Xu.x,Xu.y,Xu.z],Em(t,Hl,Ul,Wl,Wu))}clampPoint(e,t){return t.copy(e).clamp(this.min,this.max)}distanceToPoint(e){return Bo.copy(e).clamp(this.min,this.max).sub(e).length()}getBoundingSphere(e){return this.getCenter(e.center),e.radius=this.getSize(Bo).length()*.5,e}intersect(e){return this.min.max(e.min),this.max.min(e.max),this.isEmpty()&&this.makeEmpty(),this}union(e){return this.min.min(e.min),this.max.max(e.max),this}applyMatrix4(e){return this.isEmpty()?this:(js[0].set(this.min.x,this.min.y,this.min.z).applyMatrix4(e),js[1].set(this.min.x,this.min.y,this.max.z).applyMatrix4(e),js[2].set(this.min.x,this.max.y,this.min.z).applyMatrix4(e),js[3].set(this.min.x,this.max.y,this.max.z).applyMatrix4(e),js[4].set(this.max.x,this.min.y,this.min.z).applyMatrix4(e),js[5].set(this.max.x,this.min.y,this.max.z).applyMatrix4(e),js[6].set(this.max.x,this.max.y,this.min.z).applyMatrix4(e),js[7].set(this.max.x,this.max.y,this.max.z).applyMatrix4(e),this.setFromPoints(js),this)}translate(e){return this.min.add(e),this.max.add(e),this}equals(e){return e.min.equals(this.min)&&e.max.equals(this.max)}}An.prototype.isBox3=!0;const js=[new R,new R,new R,new R,new R,new R,new R,new R],Bo=new R,Cm=new An,Hl=new R,Ul=new R,Wl=new R,Na=new R,Ba=new R,jo=new R,Gh=new R,Wu=new R,Xu=new R,Go=new R;function Em(n,e,t,i,r){for(let s=0,a=n.length-3;s<=a;s+=3){Go.fromArray(n,s);const o=r.x*Math.abs(Go.x)+r.y*Math.abs(Go.y)+r.z*Math.abs(Go.z),l=e.dot(Go),c=t.dot(Go),h=i.dot(Go);if(Math.max(-Math.max(l,c,h),Math.min(l,c,h))>o)return!1}return!0}const SK=new An,Xx=new R,Yu=new R,Im=new R;class Ho{constructor(e=new R,t=-1){this.center=e,this.radius=t}set(e,t){return this.center.copy(e),this.radius=t,this}setFromPoints(e,t){const i=this.center;t!==void 0?i.copy(t):SK.setFromPoints(e).getCenter(i);let r=0;for(let s=0,a=e.length;sthis.radius*this.radius&&(t.sub(this.center).normalize(),t.multiplyScalar(this.radius).add(this.center)),t}getBoundingBox(e){return this.isEmpty()?(e.makeEmpty(),e):(e.set(this.center,this.center),e.expandByScalar(this.radius),e)}applyMatrix4(e){return this.center.applyMatrix4(e),this.radius=this.radius*e.getMaxScaleOnAxis(),this}translate(e){return this.center.add(e),this}expandByPoint(e){Im.subVectors(e,this.center);const t=Im.lengthSq();if(t>this.radius*this.radius){const i=Math.sqrt(t),r=(i-this.radius)*.5;this.center.add(Im.multiplyScalar(r/i)),this.radius+=r}return this}union(e){return this.center.equals(e.center)===!0?Yu.set(0,0,1).multiplyScalar(e.radius):Yu.subVectors(e.center,this.center).normalize().multiplyScalar(e.radius),this.expandByPoint(Xx.copy(e.center).add(Yu)),this.expandByPoint(Xx.copy(e.center).sub(Yu)),this}equals(e){return e.center.equals(this.center)&&e.radius===this.radius}clone(){return new this.constructor().copy(this)}}const Gs=new R,Lm=new R,Ku=new R,ja=new R,km=new R,qu=new R,Am=new R;class Uo{constructor(e=new R,t=new R(0,0,-1)){this.origin=e,this.direction=t}set(e,t){return this.origin.copy(e),this.direction.copy(t),this}copy(e){return this.origin.copy(e.origin),this.direction.copy(e.direction),this}at(e,t){return t.copy(this.direction).multiplyScalar(e).add(this.origin)}lookAt(e){return this.direction.copy(e).sub(this.origin).normalize(),this}recast(e){return this.origin.copy(this.at(e,Gs)),this}closestPointToPoint(e,t){t.subVectors(e,this.origin);const i=t.dot(this.direction);return i<0?t.copy(this.origin):t.copy(this.direction).multiplyScalar(i).add(this.origin)}distanceToPoint(e){return Math.sqrt(this.distanceSqToPoint(e))}distanceSqToPoint(e){const t=Gs.subVectors(e,this.origin).dot(this.direction);return t<0?this.origin.distanceToSquared(e):(Gs.copy(this.direction).multiplyScalar(t).add(this.origin),Gs.distanceToSquared(e))}distanceSqToSegment(e,t,i,r){Lm.copy(e).add(t).multiplyScalar(.5),Ku.copy(t).sub(e).normalize(),ja.copy(this.origin).sub(Lm);const s=e.distanceTo(t)*.5,a=-this.direction.dot(Ku),o=ja.dot(this.direction),l=-ja.dot(Ku),c=ja.lengthSq(),h=Math.abs(1-a*a);let d,u,p,f;if(h>0)if(d=a*l-o,u=a*o-l,f=s*h,d>=0)if(u>=-f)if(u<=f){const g=1/h;d*=g,u*=g,p=d*(d+a*u+2*o)+u*(a*d+u+2*l)+c}else u=s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;else u=-s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;else u<=-f?(d=Math.max(0,-(-a*s+o)),u=d>0?-s:Math.min(Math.max(-s,-l),s),p=-d*d+u*(u+2*l)+c):u<=f?(d=0,u=Math.min(Math.max(-s,-l),s),p=u*(u+2*l)+c):(d=Math.max(0,-(a*s+o)),u=d>0?s:Math.min(Math.max(-s,-l),s),p=-d*d+u*(u+2*l)+c);else u=a>0?-s:s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;return i&&i.copy(this.direction).multiplyScalar(d).add(this.origin),r&&r.copy(Ku).multiplyScalar(u).add(Lm),p}intersectSphere(e,t){Gs.subVectors(e.center,this.origin);const i=Gs.dot(this.direction),r=Gs.dot(Gs)-i*i,s=e.radius*e.radius;if(r>s)return null;const a=Math.sqrt(s-r),o=i-a,l=i+a;return o<0&&l<0?null:o<0?this.at(l,t):this.at(o,t)}intersectsSphere(e){return this.distanceSqToPoint(e.center)<=e.radius*e.radius}distanceToPlane(e){const t=e.normal.dot(this.direction);if(t===0)return e.distanceToPoint(this.origin)===0?0:null;const i=-(this.origin.dot(e.normal)+e.constant)/t;return i>=0?i:null}intersectPlane(e,t){const i=this.distanceToPlane(e);return i===null?null:this.at(i,t)}intersectsPlane(e){const t=e.distanceToPoint(this.origin);return t===0||e.normal.dot(this.direction)*t<0}intersectBox(e,t){let i,r,s,a,o,l;const c=1/this.direction.x,h=1/this.direction.y,d=1/this.direction.z,u=this.origin;return c>=0?(i=(e.min.x-u.x)*c,r=(e.max.x-u.x)*c):(i=(e.max.x-u.x)*c,r=(e.min.x-u.x)*c),h>=0?(s=(e.min.y-u.y)*h,a=(e.max.y-u.y)*h):(s=(e.max.y-u.y)*h,a=(e.min.y-u.y)*h),i>a||s>r||((s>i||i!==i)&&(i=s),(a=0?(o=(e.min.z-u.z)*d,l=(e.max.z-u.z)*d):(o=(e.max.z-u.z)*d,l=(e.min.z-u.z)*d),i>l||o>r)||((o>i||i!==i)&&(i=o),(l=0?i:r,t)}intersectsBox(e){return this.intersectBox(e,Gs)!==null}intersectTriangle(e,t,i,r,s){km.subVectors(t,e),qu.subVectors(i,e),Am.crossVectors(km,qu);let a=this.direction.dot(Am),o;if(a>0){if(r)return null;o=1}else if(a<0)o=-1,a=-a;else return null;ja.subVectors(this.origin,e);const l=o*this.direction.dot(qu.crossVectors(ja,qu));if(l<0)return null;const c=o*this.direction.dot(km.cross(ja));if(c<0||l+c>a)return null;const h=-o*ja.dot(Am);return h<0?null:this.at(h/a,s)}applyMatrix4(e){return this.origin.applyMatrix4(e),this.direction.transformDirection(e),this}equals(e){return e.origin.equals(this.origin)&&e.direction.equals(this.direction)}clone(){return new this.constructor().copy(this)}}class mt{constructor(){this.elements=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],arguments.length>0&&console.error("THREE.Matrix4: the constructor no longer reads arguments. use .set() instead.")}set(e,t,i,r,s,a,o,l,c,h,d,u,p,f,g,m){const v=this.elements;return v[0]=e,v[4]=t,v[8]=i,v[12]=r,v[1]=s,v[5]=a,v[9]=o,v[13]=l,v[2]=c,v[6]=h,v[10]=d,v[14]=u,v[3]=p,v[7]=f,v[11]=g,v[15]=m,this}identity(){return this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1),this}clone(){return new mt().fromArray(this.elements)}copy(e){const t=this.elements,i=e.elements;return t[0]=i[0],t[1]=i[1],t[2]=i[2],t[3]=i[3],t[4]=i[4],t[5]=i[5],t[6]=i[6],t[7]=i[7],t[8]=i[8],t[9]=i[9],t[10]=i[10],t[11]=i[11],t[12]=i[12],t[13]=i[13],t[14]=i[14],t[15]=i[15],this}copyPosition(e){const t=this.elements,i=e.elements;return t[12]=i[12],t[13]=i[13],t[14]=i[14],this}setFromMatrix3(e){const t=e.elements;return this.set(t[0],t[3],t[6],0,t[1],t[4],t[7],0,t[2],t[5],t[8],0,0,0,0,1),this}extractBasis(e,t,i){return e.setFromMatrixColumn(this,0),t.setFromMatrixColumn(this,1),i.setFromMatrixColumn(this,2),this}makeBasis(e,t,i){return this.set(e.x,t.x,i.x,0,e.y,t.y,i.y,0,e.z,t.z,i.z,0,0,0,0,1),this}extractRotation(e){const t=this.elements,i=e.elements,r=1/Xl.setFromMatrixColumn(e,0).length(),s=1/Xl.setFromMatrixColumn(e,1).length(),a=1/Xl.setFromMatrixColumn(e,2).length();return t[0]=i[0]*r,t[1]=i[1]*r,t[2]=i[2]*r,t[3]=0,t[4]=i[4]*s,t[5]=i[5]*s,t[6]=i[6]*s,t[7]=0,t[8]=i[8]*a,t[9]=i[9]*a,t[10]=i[10]*a,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,this}makeRotationFromEuler(e){e&&e.isEuler||console.error("THREE.Matrix4: .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order.");const t=this.elements,i=e.x,r=e.y,s=e.z,a=Math.cos(i),o=Math.sin(i),l=Math.cos(r),c=Math.sin(r),h=Math.cos(s),d=Math.sin(s);if(e.order==="XYZ"){const u=a*h,p=a*d,f=o*h,g=o*d;t[0]=l*h,t[4]=-l*d,t[8]=c,t[1]=p+f*c,t[5]=u-g*c,t[9]=-o*l,t[2]=g-u*c,t[6]=f+p*c,t[10]=a*l}else if(e.order==="YXZ"){const u=l*h,p=l*d,f=c*h,g=c*d;t[0]=u+g*o,t[4]=f*o-p,t[8]=a*c,t[1]=a*d,t[5]=a*h,t[9]=-o,t[2]=p*o-f,t[6]=g+u*o,t[10]=a*l}else if(e.order==="ZXY"){const u=l*h,p=l*d,f=c*h,g=c*d;t[0]=u-g*o,t[4]=-a*d,t[8]=f+p*o,t[1]=p+f*o,t[5]=a*h,t[9]=g-u*o,t[2]=-a*c,t[6]=o,t[10]=a*l}else if(e.order==="ZYX"){const u=a*h,p=a*d,f=o*h,g=o*d;t[0]=l*h,t[4]=f*c-p,t[8]=u*c+g,t[1]=l*d,t[5]=g*c+u,t[9]=p*c-f,t[2]=-c,t[6]=o*l,t[10]=a*l}else if(e.order==="YZX"){const u=a*l,p=a*c,f=o*l,g=o*c;t[0]=l*h,t[4]=g-u*d,t[8]=f*d+p,t[1]=d,t[5]=a*h,t[9]=-o*h,t[2]=-c*h,t[6]=p*d+f,t[10]=u-g*d}else if(e.order==="XZY"){const u=a*l,p=a*c,f=o*l,g=o*c;t[0]=l*h,t[4]=-d,t[8]=c*h,t[1]=u*d+g,t[5]=a*h,t[9]=p*d-f,t[2]=f*d-p,t[6]=o*h,t[10]=g*d+u}return t[3]=0,t[7]=0,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,this}makeRotationFromQuaternion(e){return this.compose(wK,e,MK)}lookAt(e,t,i){const r=this.elements;return un.subVectors(e,t),un.lengthSq()===0&&(un.z=1),un.normalize(),Ga.crossVectors(i,un),Ga.lengthSq()===0&&(Math.abs(i.z)===1?un.x+=1e-4:un.z+=1e-4,un.normalize(),Ga.crossVectors(i,un)),Ga.normalize(),Zu.crossVectors(un,Ga),r[0]=Ga.x,r[4]=Zu.x,r[8]=un.x,r[1]=Ga.y,r[5]=Zu.y,r[9]=un.y,r[2]=Ga.z,r[6]=Zu.z,r[10]=un.z,this}multiply(e,t){return t!==void 0?(console.warn("THREE.Matrix4: .multiply() now only accepts one argument. Use .multiplyMatrices( a, b ) instead."),this.multiplyMatrices(e,t)):this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const i=e.elements,r=t.elements,s=this.elements,a=i[0],o=i[4],l=i[8],c=i[12],h=i[1],d=i[5],u=i[9],p=i[13],f=i[2],g=i[6],m=i[10],v=i[14],b=i[3],_=i[7],x=i[11],S=i[15],E=r[0],A=r[4],z=r[8],Z=r[12],Y=r[1],T=r[5],V=r[9],oe=r[13],B=r[2],Q=r[6],ee=r[10],te=r[14],q=r[3],ne=r[7],ce=r[11],ye=r[15];return s[0]=a*E+o*Y+l*B+c*q,s[4]=a*A+o*T+l*Q+c*ne,s[8]=a*z+o*V+l*ee+c*ce,s[12]=a*Z+o*oe+l*te+c*ye,s[1]=h*E+d*Y+u*B+p*q,s[5]=h*A+d*T+u*Q+p*ne,s[9]=h*z+d*V+u*ee+p*ce,s[13]=h*Z+d*oe+u*te+p*ye,s[2]=f*E+g*Y+m*B+v*q,s[6]=f*A+g*T+m*Q+v*ne,s[10]=f*z+g*V+m*ee+v*ce,s[14]=f*Z+g*oe+m*te+v*ye,s[3]=b*E+_*Y+x*B+S*q,s[7]=b*A+_*T+x*Q+S*ne,s[11]=b*z+_*V+x*ee+S*ce,s[15]=b*Z+_*oe+x*te+S*ye,this}multiplyScalar(e){const t=this.elements;return t[0]*=e,t[4]*=e,t[8]*=e,t[12]*=e,t[1]*=e,t[5]*=e,t[9]*=e,t[13]*=e,t[2]*=e,t[6]*=e,t[10]*=e,t[14]*=e,t[3]*=e,t[7]*=e,t[11]*=e,t[15]*=e,this}determinant(){const e=this.elements,t=e[0],i=e[4],r=e[8],s=e[12],a=e[1],o=e[5],l=e[9],c=e[13],h=e[2],d=e[6],u=e[10],p=e[14],f=e[3],g=e[7],m=e[11],v=e[15];return f*(+s*l*d-r*c*d-s*o*u+i*c*u+r*o*p-i*l*p)+g*(+t*l*p-t*c*u+s*a*u-r*a*p+r*c*h-s*l*h)+m*(+t*c*d-t*o*p-s*a*d+i*a*p+s*o*h-i*c*h)+v*(-r*o*h-t*l*d+t*o*u+r*a*d-i*a*u+i*l*h)}transpose(){const e=this.elements;let t;return t=e[1],e[1]=e[4],e[4]=t,t=e[2],e[2]=e[8],e[8]=t,t=e[6],e[6]=e[9],e[9]=t,t=e[3],e[3]=e[12],e[12]=t,t=e[7],e[7]=e[13],e[13]=t,t=e[11],e[11]=e[14],e[14]=t,this}setPosition(e,t,i){const r=this.elements;return e.isVector3?(r[12]=e.x,r[13]=e.y,r[14]=e.z):(r[12]=e,r[13]=t,r[14]=i),this}invert(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=e[9],u=e[10],p=e[11],f=e[12],g=e[13],m=e[14],v=e[15],b=d*m*c-g*u*c+g*l*p-o*m*p-d*l*v+o*u*v,_=f*u*c-h*m*c-f*l*p+a*m*p+h*l*v-a*u*v,x=h*g*c-f*d*c+f*o*p-a*g*p-h*o*v+a*d*v,S=f*d*l-h*g*l-f*o*u+a*g*u+h*o*m-a*d*m,E=t*b+i*_+r*x+s*S;if(E===0)return this.set(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);const A=1/E;return e[0]=b*A,e[1]=(g*u*s-d*m*s-g*r*p+i*m*p+d*r*v-i*u*v)*A,e[2]=(o*m*s-g*l*s+g*r*c-i*m*c-o*r*v+i*l*v)*A,e[3]=(d*l*s-o*u*s-d*r*c+i*u*c+o*r*p-i*l*p)*A,e[4]=_*A,e[5]=(h*m*s-f*u*s+f*r*p-t*m*p-h*r*v+t*u*v)*A,e[6]=(f*l*s-a*m*s-f*r*c+t*m*c+a*r*v-t*l*v)*A,e[7]=(a*u*s-h*l*s+h*r*c-t*u*c-a*r*p+t*l*p)*A,e[8]=x*A,e[9]=(f*d*s-h*g*s-f*i*p+t*g*p+h*i*v-t*d*v)*A,e[10]=(a*g*s-f*o*s+f*i*c-t*g*c-a*i*v+t*o*v)*A,e[11]=(h*o*s-a*d*s-h*i*c+t*d*c+a*i*p-t*o*p)*A,e[12]=S*A,e[13]=(h*g*r-f*d*r+f*i*u-t*g*u-h*i*m+t*d*m)*A,e[14]=(f*o*r-a*g*r-f*i*l+t*g*l+a*i*m-t*o*m)*A,e[15]=(a*d*r-h*o*r+h*i*l-t*d*l-a*i*u+t*o*u)*A,this}scale(e){const t=this.elements,i=e.x,r=e.y,s=e.z;return t[0]*=i,t[4]*=r,t[8]*=s,t[1]*=i,t[5]*=r,t[9]*=s,t[2]*=i,t[6]*=r,t[10]*=s,t[3]*=i,t[7]*=r,t[11]*=s,this}getMaxScaleOnAxis(){const e=this.elements,t=e[0]*e[0]+e[1]*e[1]+e[2]*e[2],i=e[4]*e[4]+e[5]*e[5]+e[6]*e[6],r=e[8]*e[8]+e[9]*e[9]+e[10]*e[10];return Math.sqrt(Math.max(t,i,r))}makeTranslation(e,t,i){return this.set(1,0,0,e,0,1,0,t,0,0,1,i,0,0,0,1),this}makeRotationX(e){const t=Math.cos(e),i=Math.sin(e);return this.set(1,0,0,0,0,t,-i,0,0,i,t,0,0,0,0,1),this}makeRotationY(e){const t=Math.cos(e),i=Math.sin(e);return this.set(t,0,i,0,0,1,0,0,-i,0,t,0,0,0,0,1),this}makeRotationZ(e){const t=Math.cos(e),i=Math.sin(e);return this.set(t,-i,0,0,i,t,0,0,0,0,1,0,0,0,0,1),this}makeRotationAxis(e,t){const i=Math.cos(t),r=Math.sin(t),s=1-i,a=e.x,o=e.y,l=e.z,c=s*a,h=s*o;return this.set(c*a+i,c*o-r*l,c*l+r*o,0,c*o+r*l,h*o+i,h*l-r*a,0,c*l-r*o,h*l+r*a,s*l*l+i,0,0,0,0,1),this}makeScale(e,t,i){return this.set(e,0,0,0,0,t,0,0,0,0,i,0,0,0,0,1),this}makeShear(e,t,i,r,s,a){return this.set(1,i,s,0,e,1,a,0,t,r,1,0,0,0,0,1),this}compose(e,t,i){const r=this.elements,s=t._x,a=t._y,o=t._z,l=t._w,c=s+s,h=a+a,d=o+o,u=s*c,p=s*h,f=s*d,g=a*h,m=a*d,v=o*d,b=l*c,_=l*h,x=l*d,S=i.x,E=i.y,A=i.z;return r[0]=(1-(g+v))*S,r[1]=(p+x)*S,r[2]=(f-_)*S,r[3]=0,r[4]=(p-x)*E,r[5]=(1-(u+v))*E,r[6]=(m+b)*E,r[7]=0,r[8]=(f+_)*A,r[9]=(m-b)*A,r[10]=(1-(u+g))*A,r[11]=0,r[12]=e.x,r[13]=e.y,r[14]=e.z,r[15]=1,this}decompose(e,t,i){const r=this.elements;let s=Xl.set(r[0],r[1],r[2]).length();const a=Xl.set(r[4],r[5],r[6]).length(),o=Xl.set(r[8],r[9],r[10]).length();this.determinant()<0&&(s=-s),e.x=r[12],e.y=r[13],e.z=r[14],is.copy(this);const c=1/s,h=1/a,d=1/o;return is.elements[0]*=c,is.elements[1]*=c,is.elements[2]*=c,is.elements[4]*=h,is.elements[5]*=h,is.elements[6]*=h,is.elements[8]*=d,is.elements[9]*=d,is.elements[10]*=d,t.setFromRotationMatrix(is),i.x=s,i.y=a,i.z=o,this}makePerspective(e,t,i,r,s,a){a===void 0&&console.warn("THREE.Matrix4: .makePerspective() has been redefined and has a new signature. Please check the docs.");const o=this.elements,l=2*s/(t-e),c=2*s/(i-r),h=(t+e)/(t-e),d=(i+r)/(i-r),u=-(a+s)/(a-s),p=-2*a*s/(a-s);return o[0]=l,o[4]=0,o[8]=h,o[12]=0,o[1]=0,o[5]=c,o[9]=d,o[13]=0,o[2]=0,o[6]=0,o[10]=u,o[14]=p,o[3]=0,o[7]=0,o[11]=-1,o[15]=0,this}makeOrthographic(e,t,i,r,s,a){const o=this.elements,l=1/(t-e),c=1/(i-r),h=1/(a-s),d=(t+e)*l,u=(i+r)*c,p=(a+s)*h;return o[0]=2*l,o[4]=0,o[8]=0,o[12]=-d,o[1]=0,o[5]=2*c,o[9]=0,o[13]=-u,o[2]=0,o[6]=0,o[10]=-2*h,o[14]=-p,o[3]=0,o[7]=0,o[11]=0,o[15]=1,this}equals(e){const t=this.elements,i=e.elements;for(let r=0;r<16;r++)if(t[r]!==i[r])return!1;return!0}fromArray(e,t=0){for(let i=0;i<16;i++)this.elements[i]=e[i+t];return this}toArray(e=[],t=0){const i=this.elements;return e[t]=i[0],e[t+1]=i[1],e[t+2]=i[2],e[t+3]=i[3],e[t+4]=i[4],e[t+5]=i[5],e[t+6]=i[6],e[t+7]=i[7],e[t+8]=i[8],e[t+9]=i[9],e[t+10]=i[10],e[t+11]=i[11],e[t+12]=i[12],e[t+13]=i[13],e[t+14]=i[14],e[t+15]=i[15],e}}mt.prototype.isMatrix4=!0;const Xl=new R,is=new mt,wK=new R(0,0,0),MK=new R(1,1,1),Ga=new R,Zu=new R,un=new R,Yx=new mt,Kx=new Pi;class Ha{constructor(e=0,t=0,i=0,r=Ha.DefaultOrder){this._x=e,this._y=t,this._z=i,this._order=r}get x(){return this._x}set x(e){this._x=e,this._onChangeCallback()}get y(){return this._y}set y(e){this._y=e,this._onChangeCallback()}get z(){return this._z}set z(e){this._z=e,this._onChangeCallback()}get order(){return this._order}set order(e){this._order=e,this._onChangeCallback()}set(e,t,i,r=this._order){return this._x=e,this._y=t,this._z=i,this._order=r,this._onChangeCallback(),this}clone(){return new this.constructor(this._x,this._y,this._z,this._order)}copy(e){return this._x=e._x,this._y=e._y,this._z=e._z,this._order=e._order,this._onChangeCallback(),this}setFromRotationMatrix(e,t=this._order,i=!0){const r=e.elements,s=r[0],a=r[4],o=r[8],l=r[1],c=r[5],h=r[9],d=r[2],u=r[6],p=r[10];switch(t){case"XYZ":this._y=Math.asin(wr(o,-1,1)),Math.abs(o)<.9999999?(this._x=Math.atan2(-h,p),this._z=Math.atan2(-a,s)):(this._x=Math.atan2(u,c),this._z=0);break;case"YXZ":this._x=Math.asin(-wr(h,-1,1)),Math.abs(h)<.9999999?(this._y=Math.atan2(o,p),this._z=Math.atan2(l,c)):(this._y=Math.atan2(-d,s),this._z=0);break;case"ZXY":this._x=Math.asin(wr(u,-1,1)),Math.abs(u)<.9999999?(this._y=Math.atan2(-d,p),this._z=Math.atan2(-a,c)):(this._y=0,this._z=Math.atan2(l,s));break;case"ZYX":this._y=Math.asin(-wr(d,-1,1)),Math.abs(d)<.9999999?(this._x=Math.atan2(u,p),this._z=Math.atan2(l,s)):(this._x=0,this._z=Math.atan2(-a,c));break;case"YZX":this._z=Math.asin(wr(l,-1,1)),Math.abs(l)<.9999999?(this._x=Math.atan2(-h,c),this._y=Math.atan2(-d,s)):(this._x=0,this._y=Math.atan2(o,p));break;case"XZY":this._z=Math.asin(-wr(a,-1,1)),Math.abs(a)<.9999999?(this._x=Math.atan2(u,c),this._y=Math.atan2(o,s)):(this._x=Math.atan2(-h,p),this._y=0);break;default:console.warn("THREE.Euler: .setFromRotationMatrix() encountered an unknown order: "+t)}return this._order=t,i===!0&&this._onChangeCallback(),this}setFromQuaternion(e,t,i){return Yx.makeRotationFromQuaternion(e),this.setFromRotationMatrix(Yx,t,i)}setFromVector3(e,t=this._order){return this.set(e.x,e.y,e.z,t)}reorder(e){return Kx.setFromEuler(this),this.setFromQuaternion(Kx,e)}equals(e){return e._x===this._x&&e._y===this._y&&e._z===this._z&&e._order===this._order}fromArray(e){return this._x=e[0],this._y=e[1],this._z=e[2],e[3]!==void 0&&(this._order=e[3]),this._onChangeCallback(),this}toArray(e=[],t=0){return e[t]=this._x,e[t+1]=this._y,e[t+2]=this._z,e[t+3]=this._order,e}_onChange(e){return this._onChangeCallback=e,this}_onChangeCallback(){}}Ha.prototype.isEuler=!0,Ha.DefaultOrder="XYZ",Ha.RotationOrders=["XYZ","YZX","ZXY","XZY","YXZ","ZYX"];class Rm{constructor(){this.mask=1}set(e){this.mask=(1<>>0}enable(e){this.mask|=1<1){for(let t=0;t1){for(let i=0;i0){r.children=[];for(let o=0;o0){r.animations=[];for(let o=0;o0&&(i.geometries=o),l.length>0&&(i.materials=l),c.length>0&&(i.textures=c),h.length>0&&(i.images=h),d.length>0&&(i.shapes=d),u.length>0&&(i.skeletons=u),p.length>0&&(i.animations=p),f.length>0&&(i.nodes=f)}return i.object=r,i;function a(o){const l=[];for(const c in o){const h=o[c];delete h.metadata,l.push(h)}return l}}clone(e){return new this.constructor().copy(this,e)}copy(e,t=!0){if(this.name=e.name,this.up.copy(e.up),this.position.copy(e.position),this.rotation.order=e.rotation.order,this.quaternion.copy(e.quaternion),this.scale.copy(e.scale),this.matrix.copy(e.matrix),this.matrixWorld.copy(e.matrixWorld),this.matrixAutoUpdate=e.matrixAutoUpdate,this.matrixWorldNeedsUpdate=e.matrixWorldNeedsUpdate,this.layers.mask=e.layers.mask,this.visible=e.visible,this.castShadow=e.castShadow,this.receiveShadow=e.receiveShadow,this.frustumCulled=e.frustumCulled,this.renderOrder=e.renderOrder,this.userData=JSON.parse(JSON.stringify(e.userData)),t===!0)for(let i=0;i0?r.multiplyScalar(1/Math.sqrt(s)):r.set(0,0,0)}static getBarycoord(e,t,i,r,s){rs.subVectors(r,t),Us.subVectors(i,t),Om.subVectors(e,t);const a=rs.dot(rs),o=rs.dot(Us),l=rs.dot(Om),c=Us.dot(Us),h=Us.dot(Om),d=a*c-o*o;if(d===0)return s.set(-2,-1,-1);const u=1/d,p=(c*l-o*h)*u,f=(a*h-o*l)*u;return s.set(1-p-f,f,p)}static containsPoint(e,t,i,r){return this.getBarycoord(e,t,i,r,Ws),Ws.x>=0&&Ws.y>=0&&Ws.x+Ws.y<=1}static getUV(e,t,i,r,s,a,o,l){return this.getBarycoord(e,t,i,r,Ws),l.set(0,0),l.addScaledVector(s,Ws.x),l.addScaledVector(a,Ws.y),l.addScaledVector(o,Ws.z),l}static isFrontFacing(e,t,i,r){return rs.subVectors(i,t),Us.subVectors(e,t),rs.cross(Us).dot(r)<0}set(e,t,i){return this.a.copy(e),this.b.copy(t),this.c.copy(i),this}setFromPointsAndIndices(e,t,i,r){return this.a.copy(e[t]),this.b.copy(e[i]),this.c.copy(e[r]),this}setFromAttributeAndIndices(e,t,i,r){return this.a.fromBufferAttribute(e,t),this.b.fromBufferAttribute(e,i),this.c.fromBufferAttribute(e,r),this}clone(){return new this.constructor().copy(this)}copy(e){return this.a.copy(e.a),this.b.copy(e.b),this.c.copy(e.c),this}getArea(){return rs.subVectors(this.c,this.b),Us.subVectors(this.a,this.b),rs.cross(Us).length()*.5}getMidpoint(e){return e.addVectors(this.a,this.b).add(this.c).multiplyScalar(1/3)}getNormal(e){return sr.getNormal(this.a,this.b,this.c,e)}getPlane(e){return e.setFromCoplanarPoints(this.a,this.b,this.c)}getBarycoord(e,t){return sr.getBarycoord(e,this.a,this.b,this.c,t)}getUV(e,t,i,r,s){return sr.getUV(e,this.a,this.b,this.c,t,i,r,s)}containsPoint(e){return sr.containsPoint(e,this.a,this.b,this.c)}isFrontFacing(e){return sr.isFrontFacing(this.a,this.b,this.c,e)}intersectsBox(e){return e.intersectsTriangle(this)}closestPointToPoint(e,t){const i=this.a,r=this.b,s=this.c;let a,o;Kl.subVectors(r,i),ql.subVectors(s,i),zm.subVectors(e,i);const l=Kl.dot(zm),c=ql.dot(zm);if(l<=0&&c<=0)return t.copy(i);Vm.subVectors(e,r);const h=Kl.dot(Vm),d=ql.dot(Vm);if(h>=0&&d<=h)return t.copy(r);const u=l*d-h*c;if(u<=0&&l>=0&&h<=0)return a=l/(l-h),t.copy(i).addScaledVector(Kl,a);Dm.subVectors(e,s);const p=Kl.dot(Dm),f=ql.dot(Dm);if(f>=0&&p<=f)return t.copy(s);const g=p*c-l*f;if(g<=0&&c>=0&&f<=0)return o=c/(c-f),t.copy(i).addScaledVector(ql,o);const m=h*f-p*d;if(m<=0&&d-h>=0&&p-f>=0)return t_.subVectors(s,r),o=(d-h)/(d-h+(p-f)),t.copy(r).addScaledVector(t_,o);const v=1/(m+g+u);return a=g*v,o=u*v,t.copy(i).addScaledVector(Kl,a).addScaledVector(ql,o)}equals(e){return e.a.equals(this.a)&&e.b.equals(this.b)&&e.c.equals(this.c)}}let EK=0;class ar extends Fa{constructor(){super(),Object.defineProperty(this,"id",{value:EK++}),this.uuid=Qn(),this.name="",this.type="Material",this.fog=!0,this.blending=Al,this.side=Vh,this.vertexColors=!1,this.opacity=1,this.transparent=!1,this.blendSrc=mx,this.blendDst=vx,this.blendEquation=Rl,this.blendSrcAlpha=null,this.blendDstAlpha=null,this.blendEquationAlpha=null,this.depthFunc=lm,this.depthTest=!0,this.depthWrite=!0,this.stencilWriteMask=255,this.stencilFunc=fK,this.stencilRef=0,this.stencilFuncMask=255,this.stencilFail=ym,this.stencilZFail=ym,this.stencilZPass=ym,this.stencilWrite=!1,this.clippingPlanes=null,this.clipIntersection=!1,this.clipShadows=!1,this.shadowSide=null,this.colorWrite=!0,this.precision=null,this.polygonOffset=!1,this.polygonOffsetFactor=0,this.polygonOffsetUnits=0,this.dithering=!1,this.alphaToCoverage=!1,this.premultipliedAlpha=!1,this.visible=!0,this.toneMapped=!0,this.userData={},this.version=0,this._alphaTest=0}get alphaTest(){return this._alphaTest}set alphaTest(e){this._alphaTest>0!=e>0&&this.version++,this._alphaTest=e}onBuild(){}onBeforeRender(){}onBeforeCompile(){}customProgramCacheKey(){return this.onBeforeCompile.toString()}setValues(e){if(e!==void 0)for(const t in e){const i=e[t];if(i===void 0){console.warn("THREE.Material: '"+t+"' parameter is undefined.");continue}if(t==="shading"){console.warn("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead."),this.flatShading=i===hx;continue}const r=this[t];if(r===void 0){console.warn("THREE."+this.type+": '"+t+"' is not a property of this material.");continue}r&&r.isColor?r.set(i):r&&r.isVector3&&i&&i.isVector3?r.copy(i):this[t]=i}}toJSON(e){const t=e===void 0||typeof e=="string";t&&(e={textures:{},images:{}});const i={metadata:{version:4.5,type:"Material",generator:"Material.toJSON"}};i.uuid=this.uuid,i.type=this.type,this.name!==""&&(i.name=this.name),this.color&&this.color.isColor&&(i.color=this.color.getHex()),this.roughness!==void 0&&(i.roughness=this.roughness),this.metalness!==void 0&&(i.metalness=this.metalness),this.sheen!==void 0&&(i.sheen=this.sheen),this.sheenColor&&this.sheenColor.isColor&&(i.sheenColor=this.sheenColor.getHex()),this.sheenRoughness!==void 0&&(i.sheenRoughness=this.sheenRoughness),this.emissive&&this.emissive.isColor&&(i.emissive=this.emissive.getHex()),this.emissiveIntensity&&this.emissiveIntensity!==1&&(i.emissiveIntensity=this.emissiveIntensity),this.specular&&this.specular.isColor&&(i.specular=this.specular.getHex()),this.specularIntensity!==void 0&&(i.specularIntensity=this.specularIntensity),this.specularColor&&this.specularColor.isColor&&(i.specularColor=this.specularColor.getHex()),this.shininess!==void 0&&(i.shininess=this.shininess),this.clearcoat!==void 0&&(i.clearcoat=this.clearcoat),this.clearcoatRoughness!==void 0&&(i.clearcoatRoughness=this.clearcoatRoughness),this.clearcoatMap&&this.clearcoatMap.isTexture&&(i.clearcoatMap=this.clearcoatMap.toJSON(e).uuid),this.clearcoatRoughnessMap&&this.clearcoatRoughnessMap.isTexture&&(i.clearcoatRoughnessMap=this.clearcoatRoughnessMap.toJSON(e).uuid),this.clearcoatNormalMap&&this.clearcoatNormalMap.isTexture&&(i.clearcoatNormalMap=this.clearcoatNormalMap.toJSON(e).uuid,i.clearcoatNormalScale=this.clearcoatNormalScale.toArray()),this.map&&this.map.isTexture&&(i.map=this.map.toJSON(e).uuid),this.matcap&&this.matcap.isTexture&&(i.matcap=this.matcap.toJSON(e).uuid),this.alphaMap&&this.alphaMap.isTexture&&(i.alphaMap=this.alphaMap.toJSON(e).uuid),this.lightMap&&this.lightMap.isTexture&&(i.lightMap=this.lightMap.toJSON(e).uuid,i.lightMapIntensity=this.lightMapIntensity),this.aoMap&&this.aoMap.isTexture&&(i.aoMap=this.aoMap.toJSON(e).uuid,i.aoMapIntensity=this.aoMapIntensity),this.bumpMap&&this.bumpMap.isTexture&&(i.bumpMap=this.bumpMap.toJSON(e).uuid,i.bumpScale=this.bumpScale),this.normalMap&&this.normalMap.isTexture&&(i.normalMap=this.normalMap.toJSON(e).uuid,i.normalMapType=this.normalMapType,i.normalScale=this.normalScale.toArray()),this.displacementMap&&this.displacementMap.isTexture&&(i.displacementMap=this.displacementMap.toJSON(e).uuid,i.displacementScale=this.displacementScale,i.displacementBias=this.displacementBias),this.roughnessMap&&this.roughnessMap.isTexture&&(i.roughnessMap=this.roughnessMap.toJSON(e).uuid),this.metalnessMap&&this.metalnessMap.isTexture&&(i.metalnessMap=this.metalnessMap.toJSON(e).uuid),this.emissiveMap&&this.emissiveMap.isTexture&&(i.emissiveMap=this.emissiveMap.toJSON(e).uuid),this.specularMap&&this.specularMap.isTexture&&(i.specularMap=this.specularMap.toJSON(e).uuid),this.specularIntensityMap&&this.specularIntensityMap.isTexture&&(i.specularIntensityMap=this.specularIntensityMap.toJSON(e).uuid),this.specularColorMap&&this.specularColorMap.isTexture&&(i.specularColorMap=this.specularColorMap.toJSON(e).uuid),this.envMap&&this.envMap.isTexture&&(i.envMap=this.envMap.toJSON(e).uuid,this.combine!==void 0&&(i.combine=this.combine)),this.envMapIntensity!==void 0&&(i.envMapIntensity=this.envMapIntensity),this.reflectivity!==void 0&&(i.reflectivity=this.reflectivity),this.refractionRatio!==void 0&&(i.refractionRatio=this.refractionRatio),this.gradientMap&&this.gradientMap.isTexture&&(i.gradientMap=this.gradientMap.toJSON(e).uuid),this.transmission!==void 0&&(i.transmission=this.transmission),this.transmissionMap&&this.transmissionMap.isTexture&&(i.transmissionMap=this.transmissionMap.toJSON(e).uuid),this.thickness!==void 0&&(i.thickness=this.thickness),this.thicknessMap&&this.thicknessMap.isTexture&&(i.thicknessMap=this.thicknessMap.toJSON(e).uuid),this.attenuationDistance!==void 0&&(i.attenuationDistance=this.attenuationDistance),this.attenuationColor!==void 0&&(i.attenuationColor=this.attenuationColor.getHex()),this.size!==void 0&&(i.size=this.size),this.shadowSide!==null&&(i.shadowSide=this.shadowSide),this.sizeAttenuation!==void 0&&(i.sizeAttenuation=this.sizeAttenuation),this.blending!==Al&&(i.blending=this.blending),this.side!==Vh&&(i.side=this.side),this.vertexColors&&(i.vertexColors=!0),this.opacity<1&&(i.opacity=this.opacity),this.transparent===!0&&(i.transparent=this.transparent),i.depthFunc=this.depthFunc,i.depthTest=this.depthTest,i.depthWrite=this.depthWrite,i.colorWrite=this.colorWrite,i.stencilWrite=this.stencilWrite,i.stencilWriteMask=this.stencilWriteMask,i.stencilFunc=this.stencilFunc,i.stencilRef=this.stencilRef,i.stencilFuncMask=this.stencilFuncMask,i.stencilFail=this.stencilFail,i.stencilZFail=this.stencilZFail,i.stencilZPass=this.stencilZPass,this.rotation!==void 0&&this.rotation!==0&&(i.rotation=this.rotation),this.polygonOffset===!0&&(i.polygonOffset=!0),this.polygonOffsetFactor!==0&&(i.polygonOffsetFactor=this.polygonOffsetFactor),this.polygonOffsetUnits!==0&&(i.polygonOffsetUnits=this.polygonOffsetUnits),this.linewidth!==void 0&&this.linewidth!==1&&(i.linewidth=this.linewidth),this.dashSize!==void 0&&(i.dashSize=this.dashSize),this.gapSize!==void 0&&(i.gapSize=this.gapSize),this.scale!==void 0&&(i.scale=this.scale),this.dithering===!0&&(i.dithering=!0),this.alphaTest>0&&(i.alphaTest=this.alphaTest),this.alphaToCoverage===!0&&(i.alphaToCoverage=this.alphaToCoverage),this.premultipliedAlpha===!0&&(i.premultipliedAlpha=this.premultipliedAlpha),this.wireframe===!0&&(i.wireframe=this.wireframe),this.wireframeLinewidth>1&&(i.wireframeLinewidth=this.wireframeLinewidth),this.wireframeLinecap!=="round"&&(i.wireframeLinecap=this.wireframeLinecap),this.wireframeLinejoin!=="round"&&(i.wireframeLinejoin=this.wireframeLinejoin),this.flatShading===!0&&(i.flatShading=this.flatShading),this.visible===!1&&(i.visible=!1),this.toneMapped===!1&&(i.toneMapped=!1),JSON.stringify(this.userData)!=="{}"&&(i.userData=this.userData);function r(s){const a=[];for(const o in s){const l=s[o];delete l.metadata,a.push(l)}return a}if(t){const s=r(e.textures),a=r(e.images);s.length>0&&(i.textures=s),a.length>0&&(i.images=a)}return i}clone(){return new this.constructor().copy(this)}copy(e){this.name=e.name,this.fog=e.fog,this.blending=e.blending,this.side=e.side,this.vertexColors=e.vertexColors,this.opacity=e.opacity,this.transparent=e.transparent,this.blendSrc=e.blendSrc,this.blendDst=e.blendDst,this.blendEquation=e.blendEquation,this.blendSrcAlpha=e.blendSrcAlpha,this.blendDstAlpha=e.blendDstAlpha,this.blendEquationAlpha=e.blendEquationAlpha,this.depthFunc=e.depthFunc,this.depthTest=e.depthTest,this.depthWrite=e.depthWrite,this.stencilWriteMask=e.stencilWriteMask,this.stencilFunc=e.stencilFunc,this.stencilRef=e.stencilRef,this.stencilFuncMask=e.stencilFuncMask,this.stencilFail=e.stencilFail,this.stencilZFail=e.stencilZFail,this.stencilZPass=e.stencilZPass,this.stencilWrite=e.stencilWrite;const t=e.clippingPlanes;let i=null;if(t!==null){const r=t.length;i=new Array(r);for(let s=0;s!==r;++s)i[s]=t[s].clone()}return this.clippingPlanes=i,this.clipIntersection=e.clipIntersection,this.clipShadows=e.clipShadows,this.shadowSide=e.shadowSide,this.colorWrite=e.colorWrite,this.precision=e.precision,this.polygonOffset=e.polygonOffset,this.polygonOffsetFactor=e.polygonOffsetFactor,this.polygonOffsetUnits=e.polygonOffsetUnits,this.dithering=e.dithering,this.alphaTest=e.alphaTest,this.alphaToCoverage=e.alphaToCoverage,this.premultipliedAlpha=e.premultipliedAlpha,this.visible=e.visible,this.toneMapped=e.toneMapped,this.userData=JSON.parse(JSON.stringify(e.userData)),this}dispose(){this.dispatchEvent({type:"dispose"})}set needsUpdate(e){e===!0&&this.version++}}ar.prototype.isMaterial=!0,ar.fromType=function(){return null};class gs extends ar{constructor(e){super(),this.type="MeshBasicMaterial",this.color=new it(16777215),this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=Lu,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}gs.prototype.isMeshBasicMaterial=!0;const or=new R,Qu=new Se;class ki{constructor(e,t,i){if(Array.isArray(e))throw new TypeError("THREE.BufferAttribute: array should be a Typed Array.");this.name="",this.array=e,this.itemSize=t,this.count=e!==void 0?e.length/t:0,this.normalized=i===!0,this.usage=Bh,this.updateRange={offset:0,count:-1},this.version=0}onUploadCallback(){}set needsUpdate(e){e===!0&&this.version++}setUsage(e){return this.usage=e,this}copy(e){return this.name=e.name,this.array=new e.array.constructor(e.array),this.itemSize=e.itemSize,this.count=e.count,this.normalized=e.normalized,this.usage=e.usage,this}copyAt(e,t,i){e*=this.itemSize,i*=t.itemSize;for(let r=0,s=this.itemSize;r0&&(e.userData=this.userData),this.parameters!==void 0){const l=this.parameters;for(const c in l)l[c]!==void 0&&(e[c]=l[c]);return e}e.data={attributes:{}};const t=this.index;t!==null&&(e.data.index={type:t.array.constructor.name,array:Array.prototype.slice.call(t.array)});const i=this.attributes;for(const l in i){const c=i[l];e.data.attributes[l]=c.toJSON(e.data)}const r={};let s=!1;for(const l in this.morphAttributes){const c=this.morphAttributes[l],h=[];for(let d=0,u=c.length;d0&&(r[l]=h,s=!0)}s&&(e.data.morphAttributes=r,e.data.morphTargetsRelative=this.morphTargetsRelative);const a=this.groups;a.length>0&&(e.data.groups=JSON.parse(JSON.stringify(a)));const o=this.boundingSphere;return o!==null&&(e.data.boundingSphere={center:o.center.toArray(),radius:o.radius}),e}clone(){return new this.constructor().copy(this)}copy(e){this.index=null,this.attributes={},this.morphAttributes={},this.groups=[],this.boundingBox=null,this.boundingSphere=null;const t={};this.name=e.name;const i=e.index;i!==null&&this.setIndex(i.clone(t));const r=e.attributes;for(const c in r){const h=r[c];this.setAttribute(c,h.clone(t))}const s=e.morphAttributes;for(const c in s){const h=[],d=s[c];for(let u=0,p=d.length;u0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Mesh.updateMorphTargets() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.")}}raycast(e,t){const i=this.geometry,r=this.material,s=this.matrixWorld;if(r===void 0||(i.boundingSphere===null&&i.computeBoundingSphere(),Nm.copy(i.boundingSphere),Nm.applyMatrix4(s),e.ray.intersectsSphere(Nm)===!1)||(n_.copy(s).invert(),Jl.copy(e.ray).applyMatrix4(n_),i.boundingBox!==null&&Jl.intersectsBox(i.boundingBox)===!1))return;let a;if(i.isBufferGeometry){const o=i.index,l=i.attributes.position,c=i.morphAttributes.position,h=i.morphTargetsRelative,d=i.attributes.uv,u=i.attributes.uv2,p=i.groups,f=i.drawRange;if(o!==null)if(Array.isArray(r))for(let g=0,m=p.length;gt.far?null:{distance:c,point:ap.clone(),object:n}}function op(n,e,t,i,r,s,a,o,l,c,h,d){Ua.fromBufferAttribute(r,c),Wa.fromBufferAttribute(r,h),Xa.fromBufferAttribute(r,d);const u=n.morphTargetInfluences;if(s&&u){ep.set(0,0,0),tp.set(0,0,0),ip.set(0,0,0);for(let f=0,g=s.length;f0?1:-1,h.push(ne.x,ne.y,ne.z),d.push(J/A),d.push(1-ce/z),te+=1}}for(let ce=0;ce0&&(t.defines=this.defines),t.vertexShader=this.vertexShader,t.fragmentShader=this.fragmentShader;const i={};for(const r in this.extensions)this.extensions[r]===!0&&(i[r]=!0);return Object.keys(i).length>0&&(t.extensions=i),t}}ns.prototype.isShaderMaterial=!0;class lp extends Zt{constructor(){super(),this.type="Camera",this.matrixWorldInverse=new mt,this.projectionMatrix=new mt,this.projectionMatrixInverse=new mt}copy(e,t){return super.copy(e,t),this.matrixWorldInverse.copy(e.matrixWorldInverse),this.projectionMatrix.copy(e.projectionMatrix),this.projectionMatrixInverse.copy(e.projectionMatrixInverse),this}getWorldDirection(e){this.updateWorldMatrix(!0,!1);const t=this.matrixWorld.elements;return e.set(-t[8],-t[9],-t[10]).normalize()}updateMatrixWorld(e){super.updateMatrixWorld(e),this.matrixWorldInverse.copy(this.matrixWorld).invert()}updateWorldMatrix(e,t){super.updateWorldMatrix(e,t),this.matrixWorldInverse.copy(this.matrixWorld).invert()}clone(){return new this.constructor().copy(this)}}lp.prototype.isCamera=!0;class Ir extends lp{constructor(e=50,t=1,i=.1,r=2e3){super(),this.type="PerspectiveCamera",this.fov=e,this.zoom=1,this.near=i,this.far=r,this.focus=10,this.aspect=t,this.view=null,this.filmGauge=35,this.filmOffset=0,this.updateProjectionMatrix()}copy(e,t){return super.copy(e,t),this.fov=e.fov,this.zoom=e.zoom,this.near=e.near,this.far=e.far,this.focus=e.focus,this.aspect=e.aspect,this.view=e.view===null?null:Object.assign({},e.view),this.filmGauge=e.filmGauge,this.filmOffset=e.filmOffset,this}setFocalLength(e){const t=.5*this.getFilmHeight()/e;this.fov=xm*2*Math.atan(t),this.updateProjectionMatrix()}getFocalLength(){const e=Math.tan(Bu*.5*this.fov);return .5*this.getFilmHeight()/e}getEffectiveFOV(){return xm*2*Math.atan(Math.tan(Bu*.5*this.fov)/this.zoom)}getFilmWidth(){return this.filmGauge*Math.min(this.aspect,1)}getFilmHeight(){return this.filmGauge/Math.max(this.aspect,1)}setViewOffset(e,t,i,r,s,a){this.aspect=e/t,this.view===null&&(this.view={enabled:!0,fullWidth:1,fullHeight:1,offsetX:0,offsetY:0,width:1,height:1}),this.view.enabled=!0,this.view.fullWidth=e,this.view.fullHeight=t,this.view.offsetX=i,this.view.offsetY=r,this.view.width=s,this.view.height=a,this.updateProjectionMatrix()}clearViewOffset(){this.view!==null&&(this.view.enabled=!1),this.updateProjectionMatrix()}updateProjectionMatrix(){const e=this.near;let t=e*Math.tan(Bu*.5*this.fov)/this.zoom,i=2*t,r=this.aspect*i,s=-.5*r;const a=this.view;if(this.view!==null&&this.view.enabled){const l=a.fullWidth,c=a.fullHeight;s+=a.offsetX*r/l,t-=a.offsetY*i/c,r*=a.width/l,i*=a.height/c}const o=this.filmOffset;o!==0&&(s+=e*o/this.getFilmWidth()),this.projectionMatrix.makePerspective(s,s+r,t,t-i,e,this.far),this.projectionMatrixInverse.copy(this.projectionMatrix).invert()}toJSON(e){const t=super.toJSON(e);return t.object.fov=this.fov,t.object.zoom=this.zoom,t.object.near=this.near,t.object.far=this.far,t.object.focus=this.focus,t.object.aspect=this.aspect,this.view!==null&&(t.object.view=Object.assign({},this.view)),t.object.filmGauge=this.filmGauge,t.object.filmOffset=this.filmOffset,t}}Ir.prototype.isPerspectiveCamera=!0;const ec=90,tc=1;class Um extends Zt{constructor(e,t,i){if(super(),this.type="CubeCamera",i.isWebGLCubeRenderTarget!==!0){console.error("THREE.CubeCamera: The constructor now expects an instance of WebGLCubeRenderTarget as third parameter.");return}this.renderTarget=i;const r=new Ir(ec,tc,e,t);r.layers=this.layers,r.up.set(0,-1,0),r.lookAt(new R(1,0,0)),this.add(r);const s=new Ir(ec,tc,e,t);s.layers=this.layers,s.up.set(0,-1,0),s.lookAt(new R(-1,0,0)),this.add(s);const a=new Ir(ec,tc,e,t);a.layers=this.layers,a.up.set(0,0,1),a.lookAt(new R(0,1,0)),this.add(a);const o=new Ir(ec,tc,e,t);o.layers=this.layers,o.up.set(0,0,-1),o.lookAt(new R(0,-1,0)),this.add(o);const l=new Ir(ec,tc,e,t);l.layers=this.layers,l.up.set(0,-1,0),l.lookAt(new R(0,0,1)),this.add(l);const c=new Ir(ec,tc,e,t);c.layers=this.layers,c.up.set(0,-1,0),c.lookAt(new R(0,0,-1)),this.add(c)}update(e,t){this.parent===null&&this.updateMatrixWorld();const i=this.renderTarget,[r,s,a,o,l,c]=this.children,h=e.getRenderTarget(),d=e.outputEncoding,u=e.toneMapping,p=e.xr.enabled;e.outputEncoding=Ns,e.toneMapping=Fs,e.xr.enabled=!1;const f=i.texture.generateMipmaps;i.texture.generateMipmaps=!1,e.setRenderTarget(i,0),e.render(t,r),e.setRenderTarget(i,1),e.render(t,s),e.setRenderTarget(i,2),e.render(t,a),e.setRenderTarget(i,3),e.render(t,o),e.setRenderTarget(i,4),e.render(t,l),i.texture.generateMipmaps=f,e.setRenderTarget(i,5),e.render(t,c),e.setRenderTarget(h),e.outputEncoding=d,e.toneMapping=u,e.xr.enabled=p,i.texture.needsPMREMUpdate=!0}}class Wh extends fr{constructor(e,t,i,r,s,a,o,l,c,h){e=e!==void 0?e:[],t=t!==void 0?t:Ro,super(e,t,i,r,s,a,o,l,c,h),this.flipY=!1}get images(){return this.image}set images(e){this.image=e}}Wh.prototype.isCubeTexture=!0;class s_ extends dn{constructor(e,t={}){super(e,e,t);const i={width:e,height:e,depth:1},r=[i,i,i,i,i,i];this.texture=new Wh(r,t.mapping,t.wrapS,t.wrapT,t.magFilter,t.minFilter,t.format,t.type,t.anisotropy,t.encoding),this.texture.isRenderTargetTexture=!0,this.texture.generateMipmaps=t.generateMipmaps!==void 0?t.generateMipmaps:!1,this.texture.minFilter=t.minFilter!==void 0?t.minFilter:Ur}fromEquirectangularTexture(e,t){this.texture.type=t.type,this.texture.encoding=t.encoding,this.texture.generateMipmaps=t.generateMipmaps,this.texture.minFilter=t.minFilter,this.texture.magFilter=t.magFilter;const i={uniforms:{tEquirect:{value:null}},vertexShader:` - - varying vec3 vWorldDirection; - - vec3 transformDirection( in vec3 dir, in mat4 matrix ) { - - return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz ); - - } - - void main() { - - vWorldDirection = transformDirection( position, modelMatrix ); - - #include - #include - - } - `,fragmentShader:` - - uniform sampler2D tEquirect; - - varying vec3 vWorldDirection; - - #include - - void main() { - - vec3 direction = normalize( vWorldDirection ); - - vec2 sampleUV = equirectUv( direction ); - - gl_FragColor = texture2D( tEquirect, sampleUV ); - - } - `},r=new Bi(5,5,5),s=new ns({name:"CubemapFromEquirect",uniforms:Ql(i.uniforms),vertexShader:i.vertexShader,fragmentShader:i.fragmentShader,side:Jn,blending:Va});s.uniforms.tEquirect.value=t;const a=new Ge(r,s),o=t.minFilter;return t.minFilter===Fh&&(t.minFilter=Ur),new Um(1,10,this).update(e,a),t.minFilter=o,a.geometry.dispose(),a.material.dispose(),this}clear(e,t,i,r){const s=e.getRenderTarget();for(let a=0;a<6;a++)e.setRenderTarget(this,a),e.clear(t,i,r);e.setRenderTarget(s)}}s_.prototype.isWebGLCubeRenderTarget=!0;const Wm=new R,zK=new R,VK=new Mr;class Xs{constructor(e=new R(1,0,0),t=0){this.normal=e,this.constant=t}set(e,t){return this.normal.copy(e),this.constant=t,this}setComponents(e,t,i,r){return this.normal.set(e,t,i),this.constant=r,this}setFromNormalAndCoplanarPoint(e,t){return this.normal.copy(e),this.constant=-t.dot(this.normal),this}setFromCoplanarPoints(e,t,i){const r=Wm.subVectors(i,t).cross(zK.subVectors(e,t)).normalize();return this.setFromNormalAndCoplanarPoint(r,e),this}copy(e){return this.normal.copy(e.normal),this.constant=e.constant,this}normalize(){const e=1/this.normal.length();return this.normal.multiplyScalar(e),this.constant*=e,this}negate(){return this.constant*=-1,this.normal.negate(),this}distanceToPoint(e){return this.normal.dot(e)+this.constant}distanceToSphere(e){return this.distanceToPoint(e.center)-e.radius}projectPoint(e,t){return t.copy(this.normal).multiplyScalar(-this.distanceToPoint(e)).add(e)}intersectLine(e,t){const i=e.delta(Wm),r=this.normal.dot(i);if(r===0)return this.distanceToPoint(e.start)===0?t.copy(e.start):null;const s=-(e.start.dot(this.normal)+this.constant)/r;return s<0||s>1?null:t.copy(i).multiplyScalar(s).add(e.start)}intersectsLine(e){const t=this.distanceToPoint(e.start),i=this.distanceToPoint(e.end);return t<0&&i>0||i<0&&t>0}intersectsBox(e){return e.intersectsPlane(this)}intersectsSphere(e){return e.intersectsPlane(this)}coplanarPoint(e){return e.copy(this.normal).multiplyScalar(-this.constant)}applyMatrix4(e,t){const i=t||VK.getNormalMatrix(e),r=this.coplanarPoint(Wm).applyMatrix4(e),s=this.normal.applyMatrix3(i).normalize();return this.constant=-r.dot(s),this}translate(e){return this.constant-=e.dot(this.normal),this}equals(e){return e.normal.equals(this.normal)&&e.constant===this.constant}clone(){return new this.constructor().copy(this)}}Xs.prototype.isPlane=!0;const ic=new Ho,cp=new R;class hp{constructor(e=new Xs,t=new Xs,i=new Xs,r=new Xs,s=new Xs,a=new Xs){this.planes=[e,t,i,r,s,a]}set(e,t,i,r,s,a){const o=this.planes;return o[0].copy(e),o[1].copy(t),o[2].copy(i),o[3].copy(r),o[4].copy(s),o[5].copy(a),this}copy(e){const t=this.planes;for(let i=0;i<6;i++)t[i].copy(e.planes[i]);return this}setFromProjectionMatrix(e){const t=this.planes,i=e.elements,r=i[0],s=i[1],a=i[2],o=i[3],l=i[4],c=i[5],h=i[6],d=i[7],u=i[8],p=i[9],f=i[10],g=i[11],m=i[12],v=i[13],b=i[14],_=i[15];return t[0].setComponents(o-r,d-l,g-u,_-m).normalize(),t[1].setComponents(o+r,d+l,g+u,_+m).normalize(),t[2].setComponents(o+s,d+c,g+p,_+v).normalize(),t[3].setComponents(o-s,d-c,g-p,_-v).normalize(),t[4].setComponents(o-a,d-h,g-f,_-b).normalize(),t[5].setComponents(o+a,d+h,g+f,_+b).normalize(),this}intersectsObject(e){const t=e.geometry;return t.boundingSphere===null&&t.computeBoundingSphere(),ic.copy(t.boundingSphere).applyMatrix4(e.matrixWorld),this.intersectsSphere(ic)}intersectsSprite(e){return ic.center.set(0,0,0),ic.radius=.7071067811865476,ic.applyMatrix4(e.matrixWorld),this.intersectsSphere(ic)}intersectsSphere(e){const t=this.planes,i=e.center,r=-e.radius;for(let s=0;s<6;s++)if(t[s].distanceToPoint(i)0?e.max.x:e.min.x,cp.y=r.normal.y>0?e.max.y:e.min.y,cp.z=r.normal.z>0?e.max.z:e.min.z,r.distanceToPoint(cp)<0)return!1}return!0}containsPoint(e){const t=this.planes;for(let i=0;i<6;i++)if(t[i].distanceToPoint(e)<0)return!1;return!0}clone(){return new this.constructor().copy(this)}}function a_(){let n=null,e=!1,t=null,i=null;function r(s,a){t(s,a),i=n.requestAnimationFrame(r)}return{start:function(){e!==!0&&t!==null&&(i=n.requestAnimationFrame(r),e=!0)},stop:function(){n.cancelAnimationFrame(i),e=!1},setAnimationLoop:function(s){t=s},setContext:function(s){n=s}}}function DK(n,e){const t=e.isWebGL2,i=new WeakMap;function r(c,h){const d=c.array,u=c.usage,p=n.createBuffer();n.bindBuffer(h,p),n.bufferData(h,d,u),c.onUploadCallback();let f;if(d instanceof Float32Array)f=5126;else if(d instanceof Uint16Array)if(c.isFloat16BufferAttribute)if(t)f=5131;else throw new Error("THREE.WebGLAttributes: Usage of Float16BufferAttribute requires WebGL2.");else f=5123;else if(d instanceof Int16Array)f=5122;else if(d instanceof Uint32Array)f=5125;else if(d instanceof Int32Array)f=5124;else if(d instanceof Int8Array)f=5120;else if(d instanceof Uint8Array)f=5121;else if(d instanceof Uint8ClampedArray)f=5121;else throw new Error("THREE.WebGLAttributes: Unsupported buffer data format: "+d);return{buffer:p,type:f,bytesPerElement:d.BYTES_PER_ELEMENT,version:c.version}}function s(c,h,d){const u=h.array,p=h.updateRange;n.bindBuffer(d,c),p.count===-1?n.bufferSubData(d,0,u):(t?n.bufferSubData(d,p.offset*u.BYTES_PER_ELEMENT,u,p.offset,p.count):n.bufferSubData(d,p.offset*u.BYTES_PER_ELEMENT,u.subarray(p.offset,p.offset+p.count)),p.count=-1)}function a(c){return c.isInterleavedBufferAttribute&&(c=c.data),i.get(c)}function o(c){c.isInterleavedBufferAttribute&&(c=c.data);const h=i.get(c);h&&(n.deleteBuffer(h.buffer),i.delete(c))}function l(c,h){if(c.isGLBufferAttribute){const u=i.get(c);(!u||u.version 0.0 ) ? v : 0.5 * inversesqrt( max( 1.0 - x * x, 1e-7 ) ) - v; - return cross( v1, v2 ) * theta_sintheta; -} -vec3 LTC_Evaluate( const in vec3 N, const in vec3 V, const in vec3 P, const in mat3 mInv, const in vec3 rectCoords[ 4 ] ) { - vec3 v1 = rectCoords[ 1 ] - rectCoords[ 0 ]; - vec3 v2 = rectCoords[ 3 ] - rectCoords[ 0 ]; - vec3 lightNormal = cross( v1, v2 ); - if( dot( lightNormal, P - rectCoords[ 0 ] ) < 0.0 ) return vec3( 0.0 ); - vec3 T1, T2; - T1 = normalize( V - N * dot( V, N ) ); - T2 = - cross( N, T1 ); - mat3 mat = mInv * transposeMat3( mat3( T1, T2, N ) ); - vec3 coords[ 4 ]; - coords[ 0 ] = mat * ( rectCoords[ 0 ] - P ); - coords[ 1 ] = mat * ( rectCoords[ 1 ] - P ); - coords[ 2 ] = mat * ( rectCoords[ 2 ] - P ); - coords[ 3 ] = mat * ( rectCoords[ 3 ] - P ); - coords[ 0 ] = normalize( coords[ 0 ] ); - coords[ 1 ] = normalize( coords[ 1 ] ); - coords[ 2 ] = normalize( coords[ 2 ] ); - coords[ 3 ] = normalize( coords[ 3 ] ); - vec3 vectorFormFactor = vec3( 0.0 ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 0 ], coords[ 1 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 1 ], coords[ 2 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 2 ], coords[ 3 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 3 ], coords[ 0 ] ); - float result = LTC_ClippedSphereFormFactor( vectorFormFactor ); - return vec3( result ); -} -float G_BlinnPhong_Implicit( ) { - return 0.25; -} -float D_BlinnPhong( const in float shininess, const in float dotNH ) { - return RECIPROCAL_PI * ( shininess * 0.5 + 1.0 ) * pow( dotNH, shininess ); -} -vec3 BRDF_BlinnPhong( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, const in vec3 specularColor, const in float shininess ) { - vec3 halfDir = normalize( lightDir + viewDir ); - float dotNH = saturate( dot( normal, halfDir ) ); - float dotVH = saturate( dot( viewDir, halfDir ) ); - vec3 F = F_Schlick( specularColor, 1.0, dotVH ); - float G = G_BlinnPhong_Implicit( ); - float D = D_BlinnPhong( shininess, dotNH ); - return F * ( G * D ); -} -#if defined( USE_SHEEN ) -float D_Charlie( float roughness, float dotNH ) { - float alpha = pow2( roughness ); - float invAlpha = 1.0 / alpha; - float cos2h = dotNH * dotNH; - float sin2h = max( 1.0 - cos2h, 0.0078125 ); - return ( 2.0 + invAlpha ) * pow( sin2h, invAlpha * 0.5 ) / ( 2.0 * PI ); -} -float V_Neubelt( float dotNV, float dotNL ) { - return saturate( 1.0 / ( 4.0 * ( dotNL + dotNV - dotNL * dotNV ) ) ); -} -vec3 BRDF_Sheen( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, vec3 sheenColor, const in float sheenRoughness ) { - vec3 halfDir = normalize( lightDir + viewDir ); - float dotNL = saturate( dot( normal, lightDir ) ); - float dotNV = saturate( dot( normal, viewDir ) ); - float dotNH = saturate( dot( normal, halfDir ) ); - float D = D_Charlie( sheenRoughness, dotNH ); - float V = V_Neubelt( dotNV, dotNL ); - return sheenColor * ( D * V ); -} -#endif`,YK=`#ifdef USE_BUMPMAP - uniform sampler2D bumpMap; - uniform float bumpScale; - vec2 dHdxy_fwd() { - vec2 dSTdx = dFdx( vUv ); - vec2 dSTdy = dFdy( vUv ); - float Hll = bumpScale * texture2D( bumpMap, vUv ).x; - float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll; - float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll; - return vec2( dBx, dBy ); - } - vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) { - vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) ); - vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) ); - vec3 vN = surf_norm; - vec3 R1 = cross( vSigmaY, vN ); - vec3 R2 = cross( vN, vSigmaX ); - float fDet = dot( vSigmaX, R1 ) * faceDirection; - vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 ); - return normalize( abs( fDet ) * surf_norm - vGrad ); - } -#endif`,KK=`#if NUM_CLIPPING_PLANES > 0 - vec4 plane; - #pragma unroll_loop_start - for ( int i = 0; i < UNION_CLIPPING_PLANES; i ++ ) { - plane = clippingPlanes[ i ]; - if ( dot( vClipPosition, plane.xyz ) > plane.w ) discard; - } - #pragma unroll_loop_end - #if UNION_CLIPPING_PLANES < NUM_CLIPPING_PLANES - bool clipped = true; - #pragma unroll_loop_start - for ( int i = UNION_CLIPPING_PLANES; i < NUM_CLIPPING_PLANES; i ++ ) { - plane = clippingPlanes[ i ]; - clipped = ( dot( vClipPosition, plane.xyz ) > plane.w ) && clipped; - } - #pragma unroll_loop_end - if ( clipped ) discard; - #endif -#endif`,qK=`#if NUM_CLIPPING_PLANES > 0 - varying vec3 vClipPosition; - uniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ]; -#endif`,ZK=`#if NUM_CLIPPING_PLANES > 0 - varying vec3 vClipPosition; -#endif`,JK=`#if NUM_CLIPPING_PLANES > 0 - vClipPosition = - mvPosition.xyz; -#endif`,QK=`#if defined( USE_COLOR_ALPHA ) - diffuseColor *= vColor; -#elif defined( USE_COLOR ) - diffuseColor.rgb *= vColor; -#endif`,eq=`#if defined( USE_COLOR_ALPHA ) - varying vec4 vColor; -#elif defined( USE_COLOR ) - varying vec3 vColor; -#endif`,tq=`#if defined( USE_COLOR_ALPHA ) - varying vec4 vColor; -#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) - varying vec3 vColor; -#endif`,iq=`#if defined( USE_COLOR_ALPHA ) - vColor = vec4( 1.0 ); -#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) - vColor = vec3( 1.0 ); -#endif -#ifdef USE_COLOR - vColor *= color; -#endif -#ifdef USE_INSTANCING_COLOR - vColor.xyz *= instanceColor.xyz; -#endif`,rq=`#define PI 3.141592653589793 -#define PI2 6.283185307179586 -#define PI_HALF 1.5707963267948966 -#define RECIPROCAL_PI 0.3183098861837907 -#define RECIPROCAL_PI2 0.15915494309189535 -#define EPSILON 1e-6 -#ifndef saturate -#define saturate( a ) clamp( a, 0.0, 1.0 ) -#endif -#define whiteComplement( a ) ( 1.0 - saturate( a ) ) -float pow2( const in float x ) { return x*x; } -float pow3( const in float x ) { return x*x*x; } -float pow4( const in float x ) { float x2 = x*x; return x2*x2; } -float max3( const in vec3 v ) { return max( max( v.x, v.y ), v.z ); } -float average( const in vec3 color ) { return dot( color, vec3( 0.3333 ) ); } -highp float rand( const in vec2 uv ) { - const highp float a = 12.9898, b = 78.233, c = 43758.5453; - highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI ); - return fract( sin( sn ) * c ); -} -#ifdef HIGH_PRECISION - float precisionSafeLength( vec3 v ) { return length( v ); } -#else - float precisionSafeLength( vec3 v ) { - float maxComponent = max3( abs( v ) ); - return length( v / maxComponent ) * maxComponent; - } -#endif -struct IncidentLight { - vec3 color; - vec3 direction; - bool visible; -}; -struct ReflectedLight { - vec3 directDiffuse; - vec3 directSpecular; - vec3 indirectDiffuse; - vec3 indirectSpecular; -}; -struct GeometricContext { - vec3 position; - vec3 normal; - vec3 viewDir; -#ifdef USE_CLEARCOAT - vec3 clearcoatNormal; -#endif -}; -vec3 transformDirection( in vec3 dir, in mat4 matrix ) { - return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz ); -} -vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) { - return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz ); -} -mat3 transposeMat3( const in mat3 m ) { - mat3 tmp; - tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x ); - tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y ); - tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z ); - return tmp; -} -float linearToRelativeLuminance( const in vec3 color ) { - vec3 weights = vec3( 0.2126, 0.7152, 0.0722 ); - return dot( weights, color.rgb ); -} -bool isPerspectiveMatrix( mat4 m ) { - return m[ 2 ][ 3 ] == - 1.0; -} -vec2 equirectUv( in vec3 dir ) { - float u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5; - float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5; - return vec2( u, v ); -}`,nq=`#ifdef ENVMAP_TYPE_CUBE_UV - #define cubeUV_minMipLevel 4.0 - #define cubeUV_minTileSize 16.0 - float getFace( vec3 direction ) { - vec3 absDirection = abs( direction ); - float face = - 1.0; - if ( absDirection.x > absDirection.z ) { - if ( absDirection.x > absDirection.y ) - face = direction.x > 0.0 ? 0.0 : 3.0; - else - face = direction.y > 0.0 ? 1.0 : 4.0; - } else { - if ( absDirection.z > absDirection.y ) - face = direction.z > 0.0 ? 2.0 : 5.0; - else - face = direction.y > 0.0 ? 1.0 : 4.0; - } - return face; - } - vec2 getUV( vec3 direction, float face ) { - vec2 uv; - if ( face == 0.0 ) { - uv = vec2( direction.z, direction.y ) / abs( direction.x ); - } else if ( face == 1.0 ) { - uv = vec2( - direction.x, - direction.z ) / abs( direction.y ); - } else if ( face == 2.0 ) { - uv = vec2( - direction.x, direction.y ) / abs( direction.z ); - } else if ( face == 3.0 ) { - uv = vec2( - direction.z, direction.y ) / abs( direction.x ); - } else if ( face == 4.0 ) { - uv = vec2( - direction.x, direction.z ) / abs( direction.y ); - } else { - uv = vec2( direction.x, direction.y ) / abs( direction.z ); - } - return 0.5 * ( uv + 1.0 ); - } - vec3 bilinearCubeUV( sampler2D envMap, vec3 direction, float mipInt ) { - float face = getFace( direction ); - float filterInt = max( cubeUV_minMipLevel - mipInt, 0.0 ); - mipInt = max( mipInt, cubeUV_minMipLevel ); - float faceSize = exp2( mipInt ); - vec2 uv = getUV( direction, face ) * ( faceSize - 1.0 ) + 0.5; - if ( face > 2.0 ) { - uv.y += faceSize; - face -= 3.0; - } - uv.x += face * faceSize; - uv.x += filterInt * 3.0 * cubeUV_minTileSize; - uv.y += 4.0 * ( exp2( CUBEUV_MAX_MIP ) - faceSize ); - uv.x *= CUBEUV_TEXEL_WIDTH; - uv.y *= CUBEUV_TEXEL_HEIGHT; - #ifdef texture2DGradEXT - return texture2DGradEXT( envMap, uv, vec2( 0.0 ), vec2( 0.0 ) ).rgb; - #else - return texture2D( envMap, uv ).rgb; - #endif - } - #define r0 1.0 - #define v0 0.339 - #define m0 - 2.0 - #define r1 0.8 - #define v1 0.276 - #define m1 - 1.0 - #define r4 0.4 - #define v4 0.046 - #define m4 2.0 - #define r5 0.305 - #define v5 0.016 - #define m5 3.0 - #define r6 0.21 - #define v6 0.0038 - #define m6 4.0 - float roughnessToMip( float roughness ) { - float mip = 0.0; - if ( roughness >= r1 ) { - mip = ( r0 - roughness ) * ( m1 - m0 ) / ( r0 - r1 ) + m0; - } else if ( roughness >= r4 ) { - mip = ( r1 - roughness ) * ( m4 - m1 ) / ( r1 - r4 ) + m1; - } else if ( roughness >= r5 ) { - mip = ( r4 - roughness ) * ( m5 - m4 ) / ( r4 - r5 ) + m4; - } else if ( roughness >= r6 ) { - mip = ( r5 - roughness ) * ( m6 - m5 ) / ( r5 - r6 ) + m5; - } else { - mip = - 2.0 * log2( 1.16 * roughness ); } - return mip; - } - vec4 textureCubeUV( sampler2D envMap, vec3 sampleDir, float roughness ) { - float mip = clamp( roughnessToMip( roughness ), m0, CUBEUV_MAX_MIP ); - float mipF = fract( mip ); - float mipInt = floor( mip ); - vec3 color0 = bilinearCubeUV( envMap, sampleDir, mipInt ); - if ( mipF == 0.0 ) { - return vec4( color0, 1.0 ); - } else { - vec3 color1 = bilinearCubeUV( envMap, sampleDir, mipInt + 1.0 ); - return vec4( mix( color0, color1, mipF ), 1.0 ); - } - } -#endif`,sq=`vec3 transformedNormal = objectNormal; -#ifdef USE_INSTANCING - mat3 m = mat3( instanceMatrix ); - transformedNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) ); - transformedNormal = m * transformedNormal; -#endif -transformedNormal = normalMatrix * transformedNormal; -#ifdef FLIP_SIDED - transformedNormal = - transformedNormal; -#endif -#ifdef USE_TANGENT - vec3 transformedTangent = ( modelViewMatrix * vec4( objectTangent, 0.0 ) ).xyz; - #ifdef FLIP_SIDED - transformedTangent = - transformedTangent; - #endif -#endif`,aq=`#ifdef USE_DISPLACEMENTMAP - uniform sampler2D displacementMap; - uniform float displacementScale; - uniform float displacementBias; -#endif`,oq=`#ifdef USE_DISPLACEMENTMAP - transformed += normalize( objectNormal ) * ( texture2D( displacementMap, vUv ).x * displacementScale + displacementBias ); -#endif`,lq=`#ifdef USE_EMISSIVEMAP - vec4 emissiveColor = texture2D( emissiveMap, vUv ); - totalEmissiveRadiance *= emissiveColor.rgb; -#endif`,cq=`#ifdef USE_EMISSIVEMAP - uniform sampler2D emissiveMap; -#endif`,hq="gl_FragColor = linearToOutputTexel( gl_FragColor );",dq=`vec4 LinearToLinear( in vec4 value ) { - return value; -} -vec4 LinearTosRGB( in vec4 value ) { - return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); -}`,uq=`#ifdef USE_ENVMAP - #ifdef ENV_WORLDPOS - vec3 cameraToFrag; - if ( isOrthographic ) { - cameraToFrag = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) ); - } else { - cameraToFrag = normalize( vWorldPosition - cameraPosition ); - } - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - #ifdef ENVMAP_MODE_REFLECTION - vec3 reflectVec = reflect( cameraToFrag, worldNormal ); - #else - vec3 reflectVec = refract( cameraToFrag, worldNormal, refractionRatio ); - #endif - #else - vec3 reflectVec = vReflect; - #endif - #ifdef ENVMAP_TYPE_CUBE - vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) ); - #elif defined( ENVMAP_TYPE_CUBE_UV ) - vec4 envColor = textureCubeUV( envMap, reflectVec, 0.0 ); - #else - vec4 envColor = vec4( 0.0 ); - #endif - #ifdef ENVMAP_BLENDING_MULTIPLY - outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity ); - #elif defined( ENVMAP_BLENDING_MIX ) - outgoingLight = mix( outgoingLight, envColor.xyz, specularStrength * reflectivity ); - #elif defined( ENVMAP_BLENDING_ADD ) - outgoingLight += envColor.xyz * specularStrength * reflectivity; - #endif -#endif`,pq=`#ifdef USE_ENVMAP - uniform float envMapIntensity; - uniform float flipEnvMap; - #ifdef ENVMAP_TYPE_CUBE - uniform samplerCube envMap; - #else - uniform sampler2D envMap; - #endif - -#endif`,fq=`#ifdef USE_ENVMAP - uniform float reflectivity; - #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) - #define ENV_WORLDPOS - #endif - #ifdef ENV_WORLDPOS - varying vec3 vWorldPosition; - uniform float refractionRatio; - #else - varying vec3 vReflect; - #endif -#endif`,gq=`#ifdef USE_ENVMAP - #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) ||defined( PHONG ) - #define ENV_WORLDPOS - #endif - #ifdef ENV_WORLDPOS - - varying vec3 vWorldPosition; - #else - varying vec3 vReflect; - uniform float refractionRatio; - #endif -#endif`,mq=`#ifdef USE_ENVMAP - #ifdef ENV_WORLDPOS - vWorldPosition = worldPosition.xyz; - #else - vec3 cameraToVertex; - if ( isOrthographic ) { - cameraToVertex = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) ); - } else { - cameraToVertex = normalize( worldPosition.xyz - cameraPosition ); - } - vec3 worldNormal = inverseTransformDirection( transformedNormal, viewMatrix ); - #ifdef ENVMAP_MODE_REFLECTION - vReflect = reflect( cameraToVertex, worldNormal ); - #else - vReflect = refract( cameraToVertex, worldNormal, refractionRatio ); - #endif - #endif -#endif`,vq=`#ifdef USE_FOG - vFogDepth = - mvPosition.z; -#endif`,yq=`#ifdef USE_FOG - varying float vFogDepth; -#endif`,bq=`#ifdef USE_FOG - #ifdef FOG_EXP2 - float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth ); - #else - float fogFactor = smoothstep( fogNear, fogFar, vFogDepth ); - #endif - gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor ); -#endif`,xq=`#ifdef USE_FOG - uniform vec3 fogColor; - varying float vFogDepth; - #ifdef FOG_EXP2 - uniform float fogDensity; - #else - uniform float fogNear; - uniform float fogFar; - #endif -#endif`,_q=`#ifdef USE_GRADIENTMAP - uniform sampler2D gradientMap; -#endif -vec3 getGradientIrradiance( vec3 normal, vec3 lightDirection ) { - float dotNL = dot( normal, lightDirection ); - vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 ); - #ifdef USE_GRADIENTMAP - return vec3( texture2D( gradientMap, coord ).r ); - #else - return ( coord.x < 0.7 ) ? vec3( 0.7 ) : vec3( 1.0 ); - #endif -}`,Sq=`#ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity; - reflectedLight.indirectDiffuse += lightMapIrradiance; -#endif`,wq=`#ifdef USE_LIGHTMAP - uniform sampler2D lightMap; - uniform float lightMapIntensity; -#endif`,Mq=`vec3 diffuse = vec3( 1.0 ); -GeometricContext geometry; -geometry.position = mvPosition.xyz; -geometry.normal = normalize( transformedNormal ); -geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( -mvPosition.xyz ); -GeometricContext backGeometry; -backGeometry.position = geometry.position; -backGeometry.normal = -geometry.normal; -backGeometry.viewDir = geometry.viewDir; -vLightFront = vec3( 0.0 ); -vIndirectFront = vec3( 0.0 ); -#ifdef DOUBLE_SIDED - vLightBack = vec3( 0.0 ); - vIndirectBack = vec3( 0.0 ); -#endif -IncidentLight directLight; -float dotNL; -vec3 directLightColor_Diffuse; -vIndirectFront += getAmbientLightIrradiance( ambientLightColor ); -vIndirectFront += getLightProbeIrradiance( lightProbe, geometry.normal ); -#ifdef DOUBLE_SIDED - vIndirectBack += getAmbientLightIrradiance( ambientLightColor ); - vIndirectBack += getLightProbeIrradiance( lightProbe, backGeometry.normal ); -#endif -#if NUM_POINT_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) { - getPointLightInfo( pointLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_SPOT_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) { - getSpotLightInfo( spotLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_DIR_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) { - getDirectionalLightInfo( directionalLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_HEMI_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) { - vIndirectFront += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal ); - #ifdef DOUBLE_SIDED - vIndirectBack += getHemisphereLightIrradiance( hemisphereLights[ i ], backGeometry.normal ); - #endif - } - #pragma unroll_loop_end -#endif`,$q=`uniform bool receiveShadow; -uniform vec3 ambientLightColor; -uniform vec3 lightProbe[ 9 ]; -vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) { - float x = normal.x, y = normal.y, z = normal.z; - vec3 result = shCoefficients[ 0 ] * 0.886227; - result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y; - result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z; - result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x; - result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y; - result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z; - result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 ); - result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z; - result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y ); - return result; -} -vec3 getLightProbeIrradiance( const in vec3 lightProbe[ 9 ], const in vec3 normal ) { - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - vec3 irradiance = shGetIrradianceAt( worldNormal, lightProbe ); - return irradiance; -} -vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) { - vec3 irradiance = ambientLightColor; - return irradiance; -} -float getDistanceAttenuation( const in float lightDistance, const in float cutoffDistance, const in float decayExponent ) { - #if defined ( PHYSICALLY_CORRECT_LIGHTS ) - float distanceFalloff = 1.0 / max( pow( lightDistance, decayExponent ), 0.01 ); - if ( cutoffDistance > 0.0 ) { - distanceFalloff *= pow2( saturate( 1.0 - pow4( lightDistance / cutoffDistance ) ) ); - } - return distanceFalloff; - #else - if ( cutoffDistance > 0.0 && decayExponent > 0.0 ) { - return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent ); - } - return 1.0; - #endif -} -float getSpotAttenuation( const in float coneCosine, const in float penumbraCosine, const in float angleCosine ) { - return smoothstep( coneCosine, penumbraCosine, angleCosine ); -} -#if NUM_DIR_LIGHTS > 0 - struct DirectionalLight { - vec3 direction; - vec3 color; - }; - uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ]; - void getDirectionalLightInfo( const in DirectionalLight directionalLight, const in GeometricContext geometry, out IncidentLight light ) { - light.color = directionalLight.color; - light.direction = directionalLight.direction; - light.visible = true; - } -#endif -#if NUM_POINT_LIGHTS > 0 - struct PointLight { - vec3 position; - vec3 color; - float distance; - float decay; - }; - uniform PointLight pointLights[ NUM_POINT_LIGHTS ]; - void getPointLightInfo( const in PointLight pointLight, const in GeometricContext geometry, out IncidentLight light ) { - vec3 lVector = pointLight.position - geometry.position; - light.direction = normalize( lVector ); - float lightDistance = length( lVector ); - light.color = pointLight.color; - light.color *= getDistanceAttenuation( lightDistance, pointLight.distance, pointLight.decay ); - light.visible = ( light.color != vec3( 0.0 ) ); - } -#endif -#if NUM_SPOT_LIGHTS > 0 - struct SpotLight { - vec3 position; - vec3 direction; - vec3 color; - float distance; - float decay; - float coneCos; - float penumbraCos; - }; - uniform SpotLight spotLights[ NUM_SPOT_LIGHTS ]; - void getSpotLightInfo( const in SpotLight spotLight, const in GeometricContext geometry, out IncidentLight light ) { - vec3 lVector = spotLight.position - geometry.position; - light.direction = normalize( lVector ); - float angleCos = dot( light.direction, spotLight.direction ); - float spotAttenuation = getSpotAttenuation( spotLight.coneCos, spotLight.penumbraCos, angleCos ); - if ( spotAttenuation > 0.0 ) { - float lightDistance = length( lVector ); - light.color = spotLight.color * spotAttenuation; - light.color *= getDistanceAttenuation( lightDistance, spotLight.distance, spotLight.decay ); - light.visible = ( light.color != vec3( 0.0 ) ); - } else { - light.color = vec3( 0.0 ); - light.visible = false; - } - } -#endif -#if NUM_RECT_AREA_LIGHTS > 0 - struct RectAreaLight { - vec3 color; - vec3 position; - vec3 halfWidth; - vec3 halfHeight; - }; - uniform sampler2D ltc_1; uniform sampler2D ltc_2; - uniform RectAreaLight rectAreaLights[ NUM_RECT_AREA_LIGHTS ]; -#endif -#if NUM_HEMI_LIGHTS > 0 - struct HemisphereLight { - vec3 direction; - vec3 skyColor; - vec3 groundColor; - }; - uniform HemisphereLight hemisphereLights[ NUM_HEMI_LIGHTS ]; - vec3 getHemisphereLightIrradiance( const in HemisphereLight hemiLight, const in vec3 normal ) { - float dotNL = dot( normal, hemiLight.direction ); - float hemiDiffuseWeight = 0.5 * dotNL + 0.5; - vec3 irradiance = mix( hemiLight.groundColor, hemiLight.skyColor, hemiDiffuseWeight ); - return irradiance; - } -#endif`,Pq=`#if defined( USE_ENVMAP ) - vec3 getIBLIrradiance( const in vec3 normal ) { - #if defined( ENVMAP_TYPE_CUBE_UV ) - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - vec4 envMapColor = textureCubeUV( envMap, worldNormal, 1.0 ); - return PI * envMapColor.rgb * envMapIntensity; - #else - return vec3( 0.0 ); - #endif - } - vec3 getIBLRadiance( const in vec3 viewDir, const in vec3 normal, const in float roughness ) { - #if defined( ENVMAP_TYPE_CUBE_UV ) - vec3 reflectVec = reflect( - viewDir, normal ); - reflectVec = normalize( mix( reflectVec, normal, roughness * roughness) ); - reflectVec = inverseTransformDirection( reflectVec, viewMatrix ); - vec4 envMapColor = textureCubeUV( envMap, reflectVec, roughness ); - return envMapColor.rgb * envMapIntensity; - #else - return vec3( 0.0 ); - #endif - } -#endif`,Tq=`ToonMaterial material; -material.diffuseColor = diffuseColor.rgb;`,Cq=`varying vec3 vViewPosition; -struct ToonMaterial { - vec3 diffuseColor; -}; -void RE_Direct_Toon( const in IncidentLight directLight, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) { - vec3 irradiance = getGradientIrradiance( geometry.normal, directLight.direction ) * directLight.color; - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectDiffuse_Toon( const in vec3 irradiance, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -#define RE_Direct RE_Direct_Toon -#define RE_IndirectDiffuse RE_IndirectDiffuse_Toon -#define Material_LightProbeLOD( material ) (0)`,Eq=`BlinnPhongMaterial material; -material.diffuseColor = diffuseColor.rgb; -material.specularColor = specular; -material.specularShininess = shininess; -material.specularStrength = specularStrength;`,Iq=`varying vec3 vViewPosition; -struct BlinnPhongMaterial { - vec3 diffuseColor; - vec3 specularColor; - float specularShininess; - float specularStrength; -}; -void RE_Direct_BlinnPhong( const in IncidentLight directLight, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) { - float dotNL = saturate( dot( geometry.normal, directLight.direction ) ); - vec3 irradiance = dotNL * directLight.color; - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); - reflectedLight.directSpecular += irradiance * BRDF_BlinnPhong( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularShininess ) * material.specularStrength; -} -void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -#define RE_Direct RE_Direct_BlinnPhong -#define RE_IndirectDiffuse RE_IndirectDiffuse_BlinnPhong -#define Material_LightProbeLOD( material ) (0)`,Lq=`PhysicalMaterial material; -material.diffuseColor = diffuseColor.rgb * ( 1.0 - metalnessFactor ); -vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) ); -float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z ); -material.roughness = max( roughnessFactor, 0.0525 );material.roughness += geometryRoughness; -material.roughness = min( material.roughness, 1.0 ); -#ifdef IOR - #ifdef SPECULAR - float specularIntensityFactor = specularIntensity; - vec3 specularColorFactor = specularColor; - #ifdef USE_SPECULARINTENSITYMAP - specularIntensityFactor *= texture2D( specularIntensityMap, vUv ).a; - #endif - #ifdef USE_SPECULARCOLORMAP - specularColorFactor *= texture2D( specularColorMap, vUv ).rgb; - #endif - material.specularF90 = mix( specularIntensityFactor, 1.0, metalnessFactor ); - #else - float specularIntensityFactor = 1.0; - vec3 specularColorFactor = vec3( 1.0 ); - material.specularF90 = 1.0; - #endif - material.specularColor = mix( min( pow2( ( ior - 1.0 ) / ( ior + 1.0 ) ) * specularColorFactor, vec3( 1.0 ) ) * specularIntensityFactor, diffuseColor.rgb, metalnessFactor ); -#else - material.specularColor = mix( vec3( 0.04 ), diffuseColor.rgb, metalnessFactor ); - material.specularF90 = 1.0; -#endif -#ifdef USE_CLEARCOAT - material.clearcoat = clearcoat; - material.clearcoatRoughness = clearcoatRoughness; - material.clearcoatF0 = vec3( 0.04 ); - material.clearcoatF90 = 1.0; - #ifdef USE_CLEARCOATMAP - material.clearcoat *= texture2D( clearcoatMap, vUv ).x; - #endif - #ifdef USE_CLEARCOAT_ROUGHNESSMAP - material.clearcoatRoughness *= texture2D( clearcoatRoughnessMap, vUv ).y; - #endif - material.clearcoat = saturate( material.clearcoat ); material.clearcoatRoughness = max( material.clearcoatRoughness, 0.0525 ); - material.clearcoatRoughness += geometryRoughness; - material.clearcoatRoughness = min( material.clearcoatRoughness, 1.0 ); -#endif -#ifdef USE_SHEEN - material.sheenColor = sheenColor; - #ifdef USE_SHEENCOLORMAP - material.sheenColor *= texture2D( sheenColorMap, vUv ).rgb; - #endif - material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 ); - #ifdef USE_SHEENROUGHNESSMAP - material.sheenRoughness *= texture2D( sheenRoughnessMap, vUv ).a; - #endif -#endif`,kq=`struct PhysicalMaterial { - vec3 diffuseColor; - float roughness; - vec3 specularColor; - float specularF90; - #ifdef USE_CLEARCOAT - float clearcoat; - float clearcoatRoughness; - vec3 clearcoatF0; - float clearcoatF90; - #endif - #ifdef USE_SHEEN - vec3 sheenColor; - float sheenRoughness; - #endif -}; -vec3 clearcoatSpecular = vec3( 0.0 ); -vec3 sheenSpecular = vec3( 0.0 ); -float IBLSheenBRDF( const in vec3 normal, const in vec3 viewDir, const in float roughness) { - float dotNV = saturate( dot( normal, viewDir ) ); - float r2 = roughness * roughness; - float a = roughness < 0.25 ? -339.2 * r2 + 161.4 * roughness - 25.9 : -8.48 * r2 + 14.3 * roughness - 9.95; - float b = roughness < 0.25 ? 44.0 * r2 - 23.7 * roughness + 3.26 : 1.97 * r2 - 3.27 * roughness + 0.72; - float DG = exp( a * dotNV + b ) + ( roughness < 0.25 ? 0.0 : 0.1 * ( roughness - 0.25 ) ); - return saturate( DG * RECIPROCAL_PI ); -} -vec2 DFGApprox( const in vec3 normal, const in vec3 viewDir, const in float roughness ) { - float dotNV = saturate( dot( normal, viewDir ) ); - const vec4 c0 = vec4( - 1, - 0.0275, - 0.572, 0.022 ); - const vec4 c1 = vec4( 1, 0.0425, 1.04, - 0.04 ); - vec4 r = roughness * c0 + c1; - float a004 = min( r.x * r.x, exp2( - 9.28 * dotNV ) ) * r.x + r.y; - vec2 fab = vec2( - 1.04, 1.04 ) * a004 + r.zw; - return fab; -} -vec3 EnvironmentBRDF( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness ) { - vec2 fab = DFGApprox( normal, viewDir, roughness ); - return specularColor * fab.x + specularF90 * fab.y; -} -void computeMultiscattering( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness, inout vec3 singleScatter, inout vec3 multiScatter ) { - vec2 fab = DFGApprox( normal, viewDir, roughness ); - vec3 FssEss = specularColor * fab.x + specularF90 * fab.y; - float Ess = fab.x + fab.y; - float Ems = 1.0 - Ess; - vec3 Favg = specularColor + ( 1.0 - specularColor ) * 0.047619; vec3 Fms = FssEss * Favg / ( 1.0 - Ems * Favg ); - singleScatter += FssEss; - multiScatter += Fms * Ems; -} -#if NUM_RECT_AREA_LIGHTS > 0 - void RE_Direct_RectArea_Physical( const in RectAreaLight rectAreaLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - vec3 normal = geometry.normal; - vec3 viewDir = geometry.viewDir; - vec3 position = geometry.position; - vec3 lightPos = rectAreaLight.position; - vec3 halfWidth = rectAreaLight.halfWidth; - vec3 halfHeight = rectAreaLight.halfHeight; - vec3 lightColor = rectAreaLight.color; - float roughness = material.roughness; - vec3 rectCoords[ 4 ]; - rectCoords[ 0 ] = lightPos + halfWidth - halfHeight; rectCoords[ 1 ] = lightPos - halfWidth - halfHeight; - rectCoords[ 2 ] = lightPos - halfWidth + halfHeight; - rectCoords[ 3 ] = lightPos + halfWidth + halfHeight; - vec2 uv = LTC_Uv( normal, viewDir, roughness ); - vec4 t1 = texture2D( ltc_1, uv ); - vec4 t2 = texture2D( ltc_2, uv ); - mat3 mInv = mat3( - vec3( t1.x, 0, t1.y ), - vec3( 0, 1, 0 ), - vec3( t1.z, 0, t1.w ) - ); - vec3 fresnel = ( material.specularColor * t2.x + ( vec3( 1.0 ) - material.specularColor ) * t2.y ); - reflectedLight.directSpecular += lightColor * fresnel * LTC_Evaluate( normal, viewDir, position, mInv, rectCoords ); - reflectedLight.directDiffuse += lightColor * material.diffuseColor * LTC_Evaluate( normal, viewDir, position, mat3( 1.0 ), rectCoords ); - } -#endif -void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - float dotNL = saturate( dot( geometry.normal, directLight.direction ) ); - vec3 irradiance = dotNL * directLight.color; - #ifdef USE_CLEARCOAT - float dotNLcc = saturate( dot( geometry.clearcoatNormal, directLight.direction ) ); - vec3 ccIrradiance = dotNLcc * directLight.color; - clearcoatSpecular += ccIrradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.clearcoatNormal, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness ); - #endif - #ifdef USE_SHEEN - sheenSpecular += irradiance * BRDF_Sheen( directLight.direction, geometry.viewDir, geometry.normal, material.sheenColor, material.sheenRoughness ); - #endif - reflectedLight.directSpecular += irradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularF90, material.roughness ); - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradiance, const in vec3 clearcoatRadiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) { - #ifdef USE_CLEARCOAT - clearcoatSpecular += clearcoatRadiance * EnvironmentBRDF( geometry.clearcoatNormal, geometry.viewDir, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness ); - #endif - #ifdef USE_SHEEN - sheenSpecular += irradiance * material.sheenColor * IBLSheenBRDF( geometry.normal, geometry.viewDir, material.sheenRoughness ); - #endif - vec3 singleScattering = vec3( 0.0 ); - vec3 multiScattering = vec3( 0.0 ); - vec3 cosineWeightedIrradiance = irradiance * RECIPROCAL_PI; - computeMultiscattering( geometry.normal, geometry.viewDir, material.specularColor, material.specularF90, material.roughness, singleScattering, multiScattering ); - vec3 diffuse = material.diffuseColor * ( 1.0 - ( singleScattering + multiScattering ) ); - reflectedLight.indirectSpecular += radiance * singleScattering; - reflectedLight.indirectSpecular += multiScattering * cosineWeightedIrradiance; - reflectedLight.indirectDiffuse += diffuse * cosineWeightedIrradiance; -} -#define RE_Direct RE_Direct_Physical -#define RE_Direct_RectArea RE_Direct_RectArea_Physical -#define RE_IndirectDiffuse RE_IndirectDiffuse_Physical -#define RE_IndirectSpecular RE_IndirectSpecular_Physical -float computeSpecularOcclusion( const in float dotNV, const in float ambientOcclusion, const in float roughness ) { - return saturate( pow( dotNV + ambientOcclusion, exp2( - 16.0 * roughness - 1.0 ) ) - 1.0 + ambientOcclusion ); -}`,Aq=` -GeometricContext geometry; -geometry.position = - vViewPosition; -geometry.normal = normal; -geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition ); -#ifdef USE_CLEARCOAT - geometry.clearcoatNormal = clearcoatNormal; -#endif -IncidentLight directLight; -#if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct ) - PointLight pointLight; - #if defined( USE_SHADOWMAP ) && NUM_POINT_LIGHT_SHADOWS > 0 - PointLightShadow pointLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) { - pointLight = pointLights[ i ]; - getPointLightInfo( pointLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_POINT_LIGHT_SHADOWS ) - pointLightShadow = pointLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getPointShadow( pointShadowMap[ i ], pointLightShadow.shadowMapSize, pointLightShadow.shadowBias, pointLightShadow.shadowRadius, vPointShadowCoord[ i ], pointLightShadow.shadowCameraNear, pointLightShadow.shadowCameraFar ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_SPOT_LIGHTS > 0 ) && defined( RE_Direct ) - SpotLight spotLight; - #if defined( USE_SHADOWMAP ) && NUM_SPOT_LIGHT_SHADOWS > 0 - SpotLightShadow spotLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) { - spotLight = spotLights[ i ]; - getSpotLightInfo( spotLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS ) - spotLightShadow = spotLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( spotShadowMap[ i ], spotLightShadow.shadowMapSize, spotLightShadow.shadowBias, spotLightShadow.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct ) - DirectionalLight directionalLight; - #if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0 - DirectionalLightShadow directionalLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) { - directionalLight = directionalLights[ i ]; - getDirectionalLightInfo( directionalLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS ) - directionalLightShadow = directionalLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_RECT_AREA_LIGHTS > 0 ) && defined( RE_Direct_RectArea ) - RectAreaLight rectAreaLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_RECT_AREA_LIGHTS; i ++ ) { - rectAreaLight = rectAreaLights[ i ]; - RE_Direct_RectArea( rectAreaLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if defined( RE_IndirectDiffuse ) - vec3 iblIrradiance = vec3( 0.0 ); - vec3 irradiance = getAmbientLightIrradiance( ambientLightColor ); - irradiance += getLightProbeIrradiance( lightProbe, geometry.normal ); - #if ( NUM_HEMI_LIGHTS > 0 ) - #pragma unroll_loop_start - for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) { - irradiance += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal ); - } - #pragma unroll_loop_end - #endif -#endif -#if defined( RE_IndirectSpecular ) - vec3 radiance = vec3( 0.0 ); - vec3 clearcoatRadiance = vec3( 0.0 ); -#endif`,Rq=`#if defined( RE_IndirectDiffuse ) - #ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity; - irradiance += lightMapIrradiance; - #endif - #if defined( USE_ENVMAP ) && defined( STANDARD ) && defined( ENVMAP_TYPE_CUBE_UV ) - iblIrradiance += getIBLIrradiance( geometry.normal ); - #endif -#endif -#if defined( USE_ENVMAP ) && defined( RE_IndirectSpecular ) - radiance += getIBLRadiance( geometry.viewDir, geometry.normal, material.roughness ); - #ifdef USE_CLEARCOAT - clearcoatRadiance += getIBLRadiance( geometry.viewDir, geometry.clearcoatNormal, material.clearcoatRoughness ); - #endif -#endif`,Oq=`#if defined( RE_IndirectDiffuse ) - RE_IndirectDiffuse( irradiance, geometry, material, reflectedLight ); -#endif -#if defined( RE_IndirectSpecular ) - RE_IndirectSpecular( radiance, iblIrradiance, clearcoatRadiance, geometry, material, reflectedLight ); -#endif`,zq=`#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT ) - gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5; -#endif`,Vq=`#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT ) - uniform float logDepthBufFC; - varying float vFragDepth; - varying float vIsPerspective; -#endif`,Dq=`#ifdef USE_LOGDEPTHBUF - #ifdef USE_LOGDEPTHBUF_EXT - varying float vFragDepth; - varying float vIsPerspective; - #else - uniform float logDepthBufFC; - #endif -#endif`,Fq=`#ifdef USE_LOGDEPTHBUF - #ifdef USE_LOGDEPTHBUF_EXT - vFragDepth = 1.0 + gl_Position.w; - vIsPerspective = float( isPerspectiveMatrix( projectionMatrix ) ); - #else - if ( isPerspectiveMatrix( projectionMatrix ) ) { - gl_Position.z = log2( max( EPSILON, gl_Position.w + 1.0 ) ) * logDepthBufFC - 1.0; - gl_Position.z *= gl_Position.w; - } - #endif -#endif`,Nq=`#ifdef USE_MAP - vec4 sampledDiffuseColor = texture2D( map, vUv ); - #ifdef DECODE_VIDEO_TEXTURE - sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w ); - #endif - diffuseColor *= sampledDiffuseColor; -#endif`,Bq=`#ifdef USE_MAP - uniform sampler2D map; -#endif`,jq=`#if defined( USE_MAP ) || defined( USE_ALPHAMAP ) - vec2 uv = ( uvTransform * vec3( gl_PointCoord.x, 1.0 - gl_PointCoord.y, 1 ) ).xy; -#endif -#ifdef USE_MAP - diffuseColor *= texture2D( map, uv ); -#endif -#ifdef USE_ALPHAMAP - diffuseColor.a *= texture2D( alphaMap, uv ).g; -#endif`,Gq=`#if defined( USE_MAP ) || defined( USE_ALPHAMAP ) - uniform mat3 uvTransform; -#endif -#ifdef USE_MAP - uniform sampler2D map; -#endif -#ifdef USE_ALPHAMAP - uniform sampler2D alphaMap; -#endif`,Hq=`float metalnessFactor = metalness; -#ifdef USE_METALNESSMAP - vec4 texelMetalness = texture2D( metalnessMap, vUv ); - metalnessFactor *= texelMetalness.b; -#endif`,Uq=`#ifdef USE_METALNESSMAP - uniform sampler2D metalnessMap; -#endif`,Wq=`#if defined( USE_MORPHCOLORS ) && defined( MORPHTARGETS_TEXTURE ) - vColor *= morphTargetBaseInfluence; - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - #if defined( USE_COLOR_ALPHA ) - if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ) * morphTargetInfluences[ i ]; - #elif defined( USE_COLOR ) - if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ).rgb * morphTargetInfluences[ i ]; - #endif - } -#endif`,Xq=`#ifdef USE_MORPHNORMALS - objectNormal *= morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - if ( morphTargetInfluences[ i ] != 0.0 ) objectNormal += getMorph( gl_VertexID, i, 1 ).xyz * morphTargetInfluences[ i ]; - } - #else - objectNormal += morphNormal0 * morphTargetInfluences[ 0 ]; - objectNormal += morphNormal1 * morphTargetInfluences[ 1 ]; - objectNormal += morphNormal2 * morphTargetInfluences[ 2 ]; - objectNormal += morphNormal3 * morphTargetInfluences[ 3 ]; - #endif -#endif`,Yq=`#ifdef USE_MORPHTARGETS - uniform float morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - uniform float morphTargetInfluences[ MORPHTARGETS_COUNT ]; - uniform sampler2DArray morphTargetsTexture; - uniform ivec2 morphTargetsTextureSize; - vec4 getMorph( const in int vertexIndex, const in int morphTargetIndex, const in int offset ) { - int texelIndex = vertexIndex * MORPHTARGETS_TEXTURE_STRIDE + offset; - int y = texelIndex / morphTargetsTextureSize.x; - int x = texelIndex - y * morphTargetsTextureSize.x; - ivec3 morphUV = ivec3( x, y, morphTargetIndex ); - return texelFetch( morphTargetsTexture, morphUV, 0 ); - } - #else - #ifndef USE_MORPHNORMALS - uniform float morphTargetInfluences[ 8 ]; - #else - uniform float morphTargetInfluences[ 4 ]; - #endif - #endif -#endif`,Kq=`#ifdef USE_MORPHTARGETS - transformed *= morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - if ( morphTargetInfluences[ i ] != 0.0 ) transformed += getMorph( gl_VertexID, i, 0 ).xyz * morphTargetInfluences[ i ]; - } - #else - transformed += morphTarget0 * morphTargetInfluences[ 0 ]; - transformed += morphTarget1 * morphTargetInfluences[ 1 ]; - transformed += morphTarget2 * morphTargetInfluences[ 2 ]; - transformed += morphTarget3 * morphTargetInfluences[ 3 ]; - #ifndef USE_MORPHNORMALS - transformed += morphTarget4 * morphTargetInfluences[ 4 ]; - transformed += morphTarget5 * morphTargetInfluences[ 5 ]; - transformed += morphTarget6 * morphTargetInfluences[ 6 ]; - transformed += morphTarget7 * morphTargetInfluences[ 7 ]; - #endif - #endif -#endif`,qq=`float faceDirection = gl_FrontFacing ? 1.0 : - 1.0; -#ifdef FLAT_SHADED - vec3 fdx = vec3( dFdx( vViewPosition.x ), dFdx( vViewPosition.y ), dFdx( vViewPosition.z ) ); - vec3 fdy = vec3( dFdy( vViewPosition.x ), dFdy( vViewPosition.y ), dFdy( vViewPosition.z ) ); - vec3 normal = normalize( cross( fdx, fdy ) ); -#else - vec3 normal = normalize( vNormal ); - #ifdef DOUBLE_SIDED - normal = normal * faceDirection; - #endif - #ifdef USE_TANGENT - vec3 tangent = normalize( vTangent ); - vec3 bitangent = normalize( vBitangent ); - #ifdef DOUBLE_SIDED - tangent = tangent * faceDirection; - bitangent = bitangent * faceDirection; - #endif - #if defined( TANGENTSPACE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) - mat3 vTBN = mat3( tangent, bitangent, normal ); - #endif - #endif -#endif -vec3 geometryNormal = normal;`,Zq=`#ifdef OBJECTSPACE_NORMALMAP - normal = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0; - #ifdef FLIP_SIDED - normal = - normal; - #endif - #ifdef DOUBLE_SIDED - normal = normal * faceDirection; - #endif - normal = normalize( normalMatrix * normal ); -#elif defined( TANGENTSPACE_NORMALMAP ) - vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0; - mapN.xy *= normalScale; - #ifdef USE_TANGENT - normal = normalize( vTBN * mapN ); - #else - normal = perturbNormal2Arb( - vViewPosition, normal, mapN, faceDirection ); - #endif -#elif defined( USE_BUMPMAP ) - normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection ); -#endif`,Jq=`#ifndef FLAT_SHADED - varying vec3 vNormal; - #ifdef USE_TANGENT - varying vec3 vTangent; - varying vec3 vBitangent; - #endif -#endif`,Qq=`#ifndef FLAT_SHADED - varying vec3 vNormal; - #ifdef USE_TANGENT - varying vec3 vTangent; - varying vec3 vBitangent; - #endif -#endif`,eZ=`#ifndef FLAT_SHADED - vNormal = normalize( transformedNormal ); - #ifdef USE_TANGENT - vTangent = normalize( transformedTangent ); - vBitangent = normalize( cross( vNormal, vTangent ) * tangent.w ); - #endif -#endif`,tZ=`#ifdef USE_NORMALMAP - uniform sampler2D normalMap; - uniform vec2 normalScale; -#endif -#ifdef OBJECTSPACE_NORMALMAP - uniform mat3 normalMatrix; -#endif -#if ! defined ( USE_TANGENT ) && ( defined ( TANGENTSPACE_NORMALMAP ) || defined ( USE_CLEARCOAT_NORMALMAP ) ) - vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec3 mapN, float faceDirection ) { - vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) ); - vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) ); - vec2 st0 = dFdx( vUv.st ); - vec2 st1 = dFdy( vUv.st ); - vec3 N = surf_norm; - vec3 q1perp = cross( q1, N ); - vec3 q0perp = cross( N, q0 ); - vec3 T = q1perp * st0.x + q0perp * st1.x; - vec3 B = q1perp * st0.y + q0perp * st1.y; - float det = max( dot( T, T ), dot( B, B ) ); - float scale = ( det == 0.0 ) ? 0.0 : faceDirection * inversesqrt( det ); - return normalize( T * ( mapN.x * scale ) + B * ( mapN.y * scale ) + N * mapN.z ); - } -#endif`,iZ=`#ifdef USE_CLEARCOAT - vec3 clearcoatNormal = geometryNormal; -#endif`,rZ=`#ifdef USE_CLEARCOAT_NORMALMAP - vec3 clearcoatMapN = texture2D( clearcoatNormalMap, vUv ).xyz * 2.0 - 1.0; - clearcoatMapN.xy *= clearcoatNormalScale; - #ifdef USE_TANGENT - clearcoatNormal = normalize( vTBN * clearcoatMapN ); - #else - clearcoatNormal = perturbNormal2Arb( - vViewPosition, clearcoatNormal, clearcoatMapN, faceDirection ); - #endif -#endif`,nZ=`#ifdef USE_CLEARCOATMAP - uniform sampler2D clearcoatMap; -#endif -#ifdef USE_CLEARCOAT_ROUGHNESSMAP - uniform sampler2D clearcoatRoughnessMap; -#endif -#ifdef USE_CLEARCOAT_NORMALMAP - uniform sampler2D clearcoatNormalMap; - uniform vec2 clearcoatNormalScale; -#endif`,sZ=`#ifdef OPAQUE -diffuseColor.a = 1.0; -#endif -#ifdef USE_TRANSMISSION -diffuseColor.a *= transmissionAlpha + 0.1; -#endif -gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,aZ=`vec3 packNormalToRGB( const in vec3 normal ) { - return normalize( normal ) * 0.5 + 0.5; -} -vec3 unpackRGBToNormal( const in vec3 rgb ) { - return 2.0 * rgb.xyz - 1.0; -} -const float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.; -const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256., 256. ); -const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. ); -const float ShiftRight8 = 1. / 256.; -vec4 packDepthToRGBA( const in float v ) { - vec4 r = vec4( fract( v * PackFactors ), v ); - r.yzw -= r.xyz * ShiftRight8; return r * PackUpscale; -} -float unpackRGBAToDepth( const in vec4 v ) { - return dot( v, UnpackFactors ); -} -vec4 pack2HalfToRGBA( vec2 v ) { - vec4 r = vec4( v.x, fract( v.x * 255.0 ), v.y, fract( v.y * 255.0 ) ); - return vec4( r.x - r.y / 255.0, r.y, r.z - r.w / 255.0, r.w ); -} -vec2 unpackRGBATo2Half( vec4 v ) { - return vec2( v.x + ( v.y / 255.0 ), v.z + ( v.w / 255.0 ) ); -} -float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) { - return ( viewZ + near ) / ( near - far ); -} -float orthographicDepthToViewZ( const in float linearClipZ, const in float near, const in float far ) { - return linearClipZ * ( near - far ) - near; -} -float viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) { - return ( ( near + viewZ ) * far ) / ( ( far - near ) * viewZ ); -} -float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) { - return ( near * far ) / ( ( far - near ) * invClipZ - far ); -}`,oZ=`#ifdef PREMULTIPLIED_ALPHA - gl_FragColor.rgb *= gl_FragColor.a; -#endif`,lZ=`vec4 mvPosition = vec4( transformed, 1.0 ); -#ifdef USE_INSTANCING - mvPosition = instanceMatrix * mvPosition; -#endif -mvPosition = modelViewMatrix * mvPosition; -gl_Position = projectionMatrix * mvPosition;`,cZ=`#ifdef DITHERING - gl_FragColor.rgb = dithering( gl_FragColor.rgb ); -#endif`,hZ=`#ifdef DITHERING - vec3 dithering( vec3 color ) { - float grid_position = rand( gl_FragCoord.xy ); - vec3 dither_shift_RGB = vec3( 0.25 / 255.0, -0.25 / 255.0, 0.25 / 255.0 ); - dither_shift_RGB = mix( 2.0 * dither_shift_RGB, -2.0 * dither_shift_RGB, grid_position ); - return color + dither_shift_RGB; - } -#endif`,dZ=`float roughnessFactor = roughness; -#ifdef USE_ROUGHNESSMAP - vec4 texelRoughness = texture2D( roughnessMap, vUv ); - roughnessFactor *= texelRoughness.g; -#endif`,uZ=`#ifdef USE_ROUGHNESSMAP - uniform sampler2D roughnessMap; -#endif`,pZ=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - uniform sampler2D directionalShadowMap[ NUM_DIR_LIGHT_SHADOWS ]; - varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ]; - struct DirectionalLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ]; - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - uniform sampler2D spotShadowMap[ NUM_SPOT_LIGHT_SHADOWS ]; - varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ]; - struct SpotLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ]; - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - uniform sampler2D pointShadowMap[ NUM_POINT_LIGHT_SHADOWS ]; - varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ]; - struct PointLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - float shadowCameraNear; - float shadowCameraFar; - }; - uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ]; - #endif - float texture2DCompare( sampler2D depths, vec2 uv, float compare ) { - return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) ); - } - vec2 texture2DDistribution( sampler2D shadow, vec2 uv ) { - return unpackRGBATo2Half( texture2D( shadow, uv ) ); - } - float VSMShadow (sampler2D shadow, vec2 uv, float compare ){ - float occlusion = 1.0; - vec2 distribution = texture2DDistribution( shadow, uv ); - float hard_shadow = step( compare , distribution.x ); - if (hard_shadow != 1.0 ) { - float distance = compare - distribution.x ; - float variance = max( 0.00000, distribution.y * distribution.y ); - float softness_probability = variance / (variance + distance * distance ); softness_probability = clamp( ( softness_probability - 0.3 ) / ( 0.95 - 0.3 ), 0.0, 1.0 ); occlusion = clamp( max( hard_shadow, softness_probability ), 0.0, 1.0 ); - } - return occlusion; - } - float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) { - float shadow = 1.0; - shadowCoord.xyz /= shadowCoord.w; - shadowCoord.z += shadowBias; - bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 ); - bool inFrustum = all( inFrustumVec ); - bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 ); - bool frustumTest = all( frustumTestVec ); - if ( frustumTest ) { - #if defined( SHADOWMAP_TYPE_PCF ) - vec2 texelSize = vec2( 1.0 ) / shadowMapSize; - float dx0 = - texelSize.x * shadowRadius; - float dy0 = - texelSize.y * shadowRadius; - float dx1 = + texelSize.x * shadowRadius; - float dy1 = + texelSize.y * shadowRadius; - float dx2 = dx0 / 2.0; - float dy2 = dy0 / 2.0; - float dx3 = dx1 / 2.0; - float dy3 = dy1 / 2.0; - shadow = ( - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z ) - ) * ( 1.0 / 17.0 ); - #elif defined( SHADOWMAP_TYPE_PCF_SOFT ) - vec2 texelSize = vec2( 1.0 ) / shadowMapSize; - float dx = texelSize.x; - float dy = texelSize.y; - vec2 uv = shadowCoord.xy; - vec2 f = fract( uv * shadowMapSize + 0.5 ); - uv -= f * texelSize; - shadow = ( - texture2DCompare( shadowMap, uv, shadowCoord.z ) + - texture2DCompare( shadowMap, uv + vec2( dx, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, uv + vec2( 0.0, dy ), shadowCoord.z ) + - texture2DCompare( shadowMap, uv + texelSize, shadowCoord.z ) + - mix( texture2DCompare( shadowMap, uv + vec2( -dx, 0.0 ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 0.0 ), shadowCoord.z ), - f.x ) + - mix( texture2DCompare( shadowMap, uv + vec2( -dx, dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, dy ), shadowCoord.z ), - f.x ) + - mix( texture2DCompare( shadowMap, uv + vec2( 0.0, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 0.0, 2.0 * dy ), shadowCoord.z ), - f.y ) + - mix( texture2DCompare( shadowMap, uv + vec2( dx, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( dx, 2.0 * dy ), shadowCoord.z ), - f.y ) + - mix( mix( texture2DCompare( shadowMap, uv + vec2( -dx, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, -dy ), shadowCoord.z ), - f.x ), - mix( texture2DCompare( shadowMap, uv + vec2( -dx, 2.0 * dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 2.0 * dy ), shadowCoord.z ), - f.x ), - f.y ) - ) * ( 1.0 / 9.0 ); - #elif defined( SHADOWMAP_TYPE_VSM ) - shadow = VSMShadow( shadowMap, shadowCoord.xy, shadowCoord.z ); - #else - shadow = texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ); - #endif - } - return shadow; - } - vec2 cubeToUV( vec3 v, float texelSizeY ) { - vec3 absV = abs( v ); - float scaleToCube = 1.0 / max( absV.x, max( absV.y, absV.z ) ); - absV *= scaleToCube; - v *= scaleToCube * ( 1.0 - 2.0 * texelSizeY ); - vec2 planar = v.xy; - float almostATexel = 1.5 * texelSizeY; - float almostOne = 1.0 - almostATexel; - if ( absV.z >= almostOne ) { - if ( v.z > 0.0 ) - planar.x = 4.0 - v.x; - } else if ( absV.x >= almostOne ) { - float signX = sign( v.x ); - planar.x = v.z * signX + 2.0 * signX; - } else if ( absV.y >= almostOne ) { - float signY = sign( v.y ); - planar.x = v.x + 2.0 * signY + 2.0; - planar.y = v.z * signY - 2.0; - } - return vec2( 0.125, 0.25 ) * planar + vec2( 0.375, 0.75 ); - } - float getPointShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord, float shadowCameraNear, float shadowCameraFar ) { - vec2 texelSize = vec2( 1.0 ) / ( shadowMapSize * vec2( 4.0, 2.0 ) ); - vec3 lightToPosition = shadowCoord.xyz; - float dp = ( length( lightToPosition ) - shadowCameraNear ) / ( shadowCameraFar - shadowCameraNear ); dp += shadowBias; - vec3 bd3D = normalize( lightToPosition ); - #if defined( SHADOWMAP_TYPE_PCF ) || defined( SHADOWMAP_TYPE_PCF_SOFT ) || defined( SHADOWMAP_TYPE_VSM ) - vec2 offset = vec2( - 1, 1 ) * shadowRadius * texelSize.y; - return ( - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxx, texelSize.y ), dp ) - ) * ( 1.0 / 9.0 ); - #else - return texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp ); - #endif - } -#endif`,fZ=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - uniform mat4 directionalShadowMatrix[ NUM_DIR_LIGHT_SHADOWS ]; - varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ]; - struct DirectionalLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ]; - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - uniform mat4 spotShadowMatrix[ NUM_SPOT_LIGHT_SHADOWS ]; - varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ]; - struct SpotLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ]; - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - uniform mat4 pointShadowMatrix[ NUM_POINT_LIGHT_SHADOWS ]; - varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ]; - struct PointLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - float shadowCameraNear; - float shadowCameraFar; - }; - uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ]; - #endif -#endif`,gZ=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 || NUM_SPOT_LIGHT_SHADOWS > 0 || NUM_POINT_LIGHT_SHADOWS > 0 - vec3 shadowWorldNormal = inverseTransformDirection( transformedNormal, viewMatrix ); - vec4 shadowWorldPosition; - #endif - #if NUM_DIR_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * directionalLightShadows[ i ].shadowNormalBias, 0 ); - vDirectionalShadowCoord[ i ] = directionalShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * spotLightShadows[ i ].shadowNormalBias, 0 ); - vSpotShadowCoord[ i ] = spotShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * pointLightShadows[ i ].shadowNormalBias, 0 ); - vPointShadowCoord[ i ] = pointShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif -#endif`,mZ=`float getShadowMask() { - float shadow = 1.0; - #ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - DirectionalLightShadow directionalLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) { - directionalLight = directionalLightShadows[ i ]; - shadow *= receiveShadow ? getShadow( directionalShadowMap[ i ], directionalLight.shadowMapSize, directionalLight.shadowBias, directionalLight.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0; - } - #pragma unroll_loop_end - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - SpotLightShadow spotLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) { - spotLight = spotLightShadows[ i ]; - shadow *= receiveShadow ? getShadow( spotShadowMap[ i ], spotLight.shadowMapSize, spotLight.shadowBias, spotLight.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0; - } - #pragma unroll_loop_end - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - PointLightShadow pointLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) { - pointLight = pointLightShadows[ i ]; - shadow *= receiveShadow ? getPointShadow( pointShadowMap[ i ], pointLight.shadowMapSize, pointLight.shadowBias, pointLight.shadowRadius, vPointShadowCoord[ i ], pointLight.shadowCameraNear, pointLight.shadowCameraFar ) : 1.0; - } - #pragma unroll_loop_end - #endif - #endif - return shadow; -}`,vZ=`#ifdef USE_SKINNING - mat4 boneMatX = getBoneMatrix( skinIndex.x ); - mat4 boneMatY = getBoneMatrix( skinIndex.y ); - mat4 boneMatZ = getBoneMatrix( skinIndex.z ); - mat4 boneMatW = getBoneMatrix( skinIndex.w ); -#endif`,yZ=`#ifdef USE_SKINNING - uniform mat4 bindMatrix; - uniform mat4 bindMatrixInverse; - #ifdef BONE_TEXTURE - uniform highp sampler2D boneTexture; - uniform int boneTextureSize; - mat4 getBoneMatrix( const in float i ) { - float j = i * 4.0; - float x = mod( j, float( boneTextureSize ) ); - float y = floor( j / float( boneTextureSize ) ); - float dx = 1.0 / float( boneTextureSize ); - float dy = 1.0 / float( boneTextureSize ); - y = dy * ( y + 0.5 ); - vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) ); - vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) ); - vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) ); - vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) ); - mat4 bone = mat4( v1, v2, v3, v4 ); - return bone; - } - #else - uniform mat4 boneMatrices[ MAX_BONES ]; - mat4 getBoneMatrix( const in float i ) { - mat4 bone = boneMatrices[ int(i) ]; - return bone; - } - #endif -#endif`,bZ=`#ifdef USE_SKINNING - vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 ); - vec4 skinned = vec4( 0.0 ); - skinned += boneMatX * skinVertex * skinWeight.x; - skinned += boneMatY * skinVertex * skinWeight.y; - skinned += boneMatZ * skinVertex * skinWeight.z; - skinned += boneMatW * skinVertex * skinWeight.w; - transformed = ( bindMatrixInverse * skinned ).xyz; -#endif`,xZ=`#ifdef USE_SKINNING - mat4 skinMatrix = mat4( 0.0 ); - skinMatrix += skinWeight.x * boneMatX; - skinMatrix += skinWeight.y * boneMatY; - skinMatrix += skinWeight.z * boneMatZ; - skinMatrix += skinWeight.w * boneMatW; - skinMatrix = bindMatrixInverse * skinMatrix * bindMatrix; - objectNormal = vec4( skinMatrix * vec4( objectNormal, 0.0 ) ).xyz; - #ifdef USE_TANGENT - objectTangent = vec4( skinMatrix * vec4( objectTangent, 0.0 ) ).xyz; - #endif -#endif`,_Z=`float specularStrength; -#ifdef USE_SPECULARMAP - vec4 texelSpecular = texture2D( specularMap, vUv ); - specularStrength = texelSpecular.r; -#else - specularStrength = 1.0; -#endif`,SZ=`#ifdef USE_SPECULARMAP - uniform sampler2D specularMap; -#endif`,wZ=`#if defined( TONE_MAPPING ) - gl_FragColor.rgb = toneMapping( gl_FragColor.rgb ); -#endif`,MZ=`#ifndef saturate -#define saturate( a ) clamp( a, 0.0, 1.0 ) -#endif -uniform float toneMappingExposure; -vec3 LinearToneMapping( vec3 color ) { - return toneMappingExposure * color; -} -vec3 ReinhardToneMapping( vec3 color ) { - color *= toneMappingExposure; - return saturate( color / ( vec3( 1.0 ) + color ) ); -} -vec3 OptimizedCineonToneMapping( vec3 color ) { - color *= toneMappingExposure; - color = max( vec3( 0.0 ), color - 0.004 ); - return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) ); -} -vec3 RRTAndODTFit( vec3 v ) { - vec3 a = v * ( v + 0.0245786 ) - 0.000090537; - vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081; - return a / b; -} -vec3 ACESFilmicToneMapping( vec3 color ) { - const mat3 ACESInputMat = mat3( - vec3( 0.59719, 0.07600, 0.02840 ), vec3( 0.35458, 0.90834, 0.13383 ), - vec3( 0.04823, 0.01566, 0.83777 ) - ); - const mat3 ACESOutputMat = mat3( - vec3( 1.60475, -0.10208, -0.00327 ), vec3( -0.53108, 1.10813, -0.07276 ), - vec3( -0.07367, -0.00605, 1.07602 ) - ); - color *= toneMappingExposure / 0.6; - color = ACESInputMat * color; - color = RRTAndODTFit( color ); - color = ACESOutputMat * color; - return saturate( color ); -} -vec3 CustomToneMapping( vec3 color ) { return color; }`,$Z=`#ifdef USE_TRANSMISSION - float transmissionAlpha = 1.0; - float transmissionFactor = transmission; - float thicknessFactor = thickness; - #ifdef USE_TRANSMISSIONMAP - transmissionFactor *= texture2D( transmissionMap, vUv ).r; - #endif - #ifdef USE_THICKNESSMAP - thicknessFactor *= texture2D( thicknessMap, vUv ).g; - #endif - vec3 pos = vWorldPosition; - vec3 v = normalize( cameraPosition - pos ); - vec3 n = inverseTransformDirection( normal, viewMatrix ); - vec4 transmission = getIBLVolumeRefraction( - n, v, roughnessFactor, material.diffuseColor, material.specularColor, material.specularF90, - pos, modelMatrix, viewMatrix, projectionMatrix, ior, thicknessFactor, - attenuationColor, attenuationDistance ); - totalDiffuse = mix( totalDiffuse, transmission.rgb, transmissionFactor ); - transmissionAlpha = mix( transmissionAlpha, transmission.a, transmissionFactor ); -#endif`,PZ=`#ifdef USE_TRANSMISSION - uniform float transmission; - uniform float thickness; - uniform float attenuationDistance; - uniform vec3 attenuationColor; - #ifdef USE_TRANSMISSIONMAP - uniform sampler2D transmissionMap; - #endif - #ifdef USE_THICKNESSMAP - uniform sampler2D thicknessMap; - #endif - uniform vec2 transmissionSamplerSize; - uniform sampler2D transmissionSamplerMap; - uniform mat4 modelMatrix; - uniform mat4 projectionMatrix; - varying vec3 vWorldPosition; - vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) { - vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior ); - vec3 modelScale; - modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) ); - modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) ); - modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) ); - return normalize( refractionVector ) * thickness * modelScale; - } - float applyIorToRoughness( const in float roughness, const in float ior ) { - return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 ); - } - vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) { - float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior ); - #ifdef texture2DLodEXT - return texture2DLodEXT( transmissionSamplerMap, fragCoord.xy, framebufferLod ); - #else - return texture2D( transmissionSamplerMap, fragCoord.xy, framebufferLod ); - #endif - } - vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) { - if ( attenuationDistance == 0.0 ) { - return radiance; - } else { - vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance; - vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); return transmittance * radiance; - } - } - vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor, - const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix, - const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness, - const in vec3 attenuationColor, const in float attenuationDistance ) { - vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix ); - vec3 refractedRayExit = position + transmissionRay; - vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 ); - vec2 refractionCoords = ndcPos.xy / ndcPos.w; - refractionCoords += 1.0; - refractionCoords /= 2.0; - vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior ); - vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance ); - vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness ); - return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a ); - } -#endif`,TZ=`#if ( defined( USE_UV ) && ! defined( UVS_VERTEX_ONLY ) ) - varying vec2 vUv; -#endif`,CZ=`#ifdef USE_UV - #ifdef UVS_VERTEX_ONLY - vec2 vUv; - #else - varying vec2 vUv; - #endif - uniform mat3 uvTransform; -#endif`,EZ=`#ifdef USE_UV - vUv = ( uvTransform * vec3( uv, 1 ) ).xy; -#endif`,IZ=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - varying vec2 vUv2; -#endif`,LZ=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - attribute vec2 uv2; - varying vec2 vUv2; - uniform mat3 uv2Transform; -#endif`,kZ=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - vUv2 = ( uv2Transform * vec3( uv2, 1 ) ).xy; -#endif`,AZ=`#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP ) || defined ( USE_TRANSMISSION ) - vec4 worldPosition = vec4( transformed, 1.0 ); - #ifdef USE_INSTANCING - worldPosition = instanceMatrix * worldPosition; - #endif - worldPosition = modelMatrix * worldPosition; -#endif`;const Jt={alphamap_fragment:FK,alphamap_pars_fragment:NK,alphatest_fragment:BK,alphatest_pars_fragment:jK,aomap_fragment:GK,aomap_pars_fragment:HK,begin_vertex:UK,beginnormal_vertex:WK,bsdfs:XK,bumpmap_pars_fragment:YK,clipping_planes_fragment:KK,clipping_planes_pars_fragment:qK,clipping_planes_pars_vertex:ZK,clipping_planes_vertex:JK,color_fragment:QK,color_pars_fragment:eq,color_pars_vertex:tq,color_vertex:iq,common:rq,cube_uv_reflection_fragment:nq,defaultnormal_vertex:sq,displacementmap_pars_vertex:aq,displacementmap_vertex:oq,emissivemap_fragment:lq,emissivemap_pars_fragment:cq,encodings_fragment:hq,encodings_pars_fragment:dq,envmap_fragment:uq,envmap_common_pars_fragment:pq,envmap_pars_fragment:fq,envmap_pars_vertex:gq,envmap_physical_pars_fragment:Pq,envmap_vertex:mq,fog_vertex:vq,fog_pars_vertex:yq,fog_fragment:bq,fog_pars_fragment:xq,gradientmap_pars_fragment:_q,lightmap_fragment:Sq,lightmap_pars_fragment:wq,lights_lambert_vertex:Mq,lights_pars_begin:$q,lights_toon_fragment:Tq,lights_toon_pars_fragment:Cq,lights_phong_fragment:Eq,lights_phong_pars_fragment:Iq,lights_physical_fragment:Lq,lights_physical_pars_fragment:kq,lights_fragment_begin:Aq,lights_fragment_maps:Rq,lights_fragment_end:Oq,logdepthbuf_fragment:zq,logdepthbuf_pars_fragment:Vq,logdepthbuf_pars_vertex:Dq,logdepthbuf_vertex:Fq,map_fragment:Nq,map_pars_fragment:Bq,map_particle_fragment:jq,map_particle_pars_fragment:Gq,metalnessmap_fragment:Hq,metalnessmap_pars_fragment:Uq,morphcolor_vertex:Wq,morphnormal_vertex:Xq,morphtarget_pars_vertex:Yq,morphtarget_vertex:Kq,normal_fragment_begin:qq,normal_fragment_maps:Zq,normal_pars_fragment:Jq,normal_pars_vertex:Qq,normal_vertex:eZ,normalmap_pars_fragment:tZ,clearcoat_normal_fragment_begin:iZ,clearcoat_normal_fragment_maps:rZ,clearcoat_pars_fragment:nZ,output_fragment:sZ,packing:aZ,premultiplied_alpha_fragment:oZ,project_vertex:lZ,dithering_fragment:cZ,dithering_pars_fragment:hZ,roughnessmap_fragment:dZ,roughnessmap_pars_fragment:uZ,shadowmap_pars_fragment:pZ,shadowmap_pars_vertex:fZ,shadowmap_vertex:gZ,shadowmask_pars_fragment:mZ,skinbase_vertex:vZ,skinning_pars_vertex:yZ,skinning_vertex:bZ,skinnormal_vertex:xZ,specularmap_fragment:_Z,specularmap_pars_fragment:SZ,tonemapping_fragment:wZ,tonemapping_pars_fragment:MZ,transmission_fragment:$Z,transmission_pars_fragment:PZ,uv_pars_fragment:TZ,uv_pars_vertex:CZ,uv_vertex:EZ,uv2_pars_fragment:IZ,uv2_pars_vertex:LZ,uv2_vertex:kZ,worldpos_vertex:AZ,background_vert:`varying vec2 vUv; -uniform mat3 uvTransform; -void main() { - vUv = ( uvTransform * vec3( uv, 1 ) ).xy; - gl_Position = vec4( position.xy, 1.0, 1.0 ); -}`,background_frag:`uniform sampler2D t2D; -varying vec2 vUv; -void main() { - gl_FragColor = texture2D( t2D, vUv ); - #ifdef DECODE_VIDEO_TEXTURE - gl_FragColor = vec4( mix( pow( gl_FragColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), gl_FragColor.rgb * 0.0773993808, vec3( lessThanEqual( gl_FragColor.rgb, vec3( 0.04045 ) ) ) ), gl_FragColor.w ); - #endif - #include - #include -}`,cube_vert:`varying vec3 vWorldDirection; -#include -void main() { - vWorldDirection = transformDirection( position, modelMatrix ); - #include - #include - gl_Position.z = gl_Position.w; -}`,cube_frag:`#include -uniform float opacity; -varying vec3 vWorldDirection; -#include -void main() { - vec3 vReflect = vWorldDirection; - #include - gl_FragColor = envColor; - gl_FragColor.a *= opacity; - #include - #include -}`,depth_vert:`#include -#include -#include -#include -#include -#include -#include -varying vec2 vHighPrecisionZW; -void main() { - #include - #include - #ifdef USE_DISPLACEMENTMAP - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - vHighPrecisionZW = gl_Position.zw; -}`,depth_frag:`#if DEPTH_PACKING == 3200 - uniform float opacity; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -varying vec2 vHighPrecisionZW; -void main() { - #include - vec4 diffuseColor = vec4( 1.0 ); - #if DEPTH_PACKING == 3200 - diffuseColor.a = opacity; - #endif - #include - #include - #include - #include - float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5; - #if DEPTH_PACKING == 3200 - gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity ); - #elif DEPTH_PACKING == 3201 - gl_FragColor = packDepthToRGBA( fragCoordZ ); - #endif -}`,distanceRGBA_vert:`#define DISTANCE -varying vec3 vWorldPosition; -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #ifdef USE_DISPLACEMENTMAP - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - vWorldPosition = worldPosition.xyz; -}`,distanceRGBA_frag:`#define DISTANCE -uniform vec3 referencePosition; -uniform float nearDistance; -uniform float farDistance; -varying vec3 vWorldPosition; -#include -#include -#include -#include -#include -#include -#include -void main () { - #include - vec4 diffuseColor = vec4( 1.0 ); - #include - #include - #include - float dist = length( vWorldPosition - referencePosition ); - dist = ( dist - nearDistance ) / ( farDistance - nearDistance ); - dist = saturate( dist ); - gl_FragColor = packDepthToRGBA( dist ); -}`,equirect_vert:`varying vec3 vWorldDirection; -#include -void main() { - vWorldDirection = transformDirection( position, modelMatrix ); - #include - #include -}`,equirect_frag:`uniform sampler2D tEquirect; -varying vec3 vWorldDirection; -#include -void main() { - vec3 direction = normalize( vWorldDirection ); - vec2 sampleUV = equirectUv( direction ); - gl_FragColor = texture2D( tEquirect, sampleUV ); - #include - #include -}`,linedashed_vert:`uniform float scale; -attribute float lineDistance; -varying float vLineDistance; -#include -#include -#include -#include -#include -#include -void main() { - vLineDistance = scale * lineDistance; - #include - #include - #include - #include - #include - #include - #include - #include -}`,linedashed_frag:`uniform vec3 diffuse; -uniform float opacity; -uniform float dashSize; -uniform float totalSize; -varying float vLineDistance; -#include -#include -#include -#include -#include -void main() { - #include - if ( mod( vLineDistance, totalSize ) > dashSize ) { - discard; - } - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include - #include -}`,meshbasic_vert:`#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #if defined ( USE_ENVMAP ) || defined ( USE_SKINNING ) - #include - #include - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,meshbasic_frag:`uniform vec3 diffuse; -uniform float opacity; -#ifndef FLAT_SHADED - varying vec3 vNormal; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - #include - #include - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - #ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI; - #else - reflectedLight.indirectDiffuse += vec3( 1.0 ); - #endif - #include - reflectedLight.indirectDiffuse *= diffuseColor.rgb; - vec3 outgoingLight = reflectedLight.indirectDiffuse; - #include - #include - #include - #include - #include - #include - #include -}`,meshlambert_vert:`#define LAMBERT -varying vec3 vLightFront; -varying vec3 vIndirectFront; -#ifdef DOUBLE_SIDED - varying vec3 vLightBack; - varying vec3 vIndirectBack; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,meshlambert_frag:`uniform vec3 diffuse; -uniform vec3 emissive; -uniform float opacity; -varying vec3 vLightFront; -varying vec3 vIndirectFront; -#ifdef DOUBLE_SIDED - varying vec3 vLightBack; - varying vec3 vIndirectBack; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #ifdef DOUBLE_SIDED - reflectedLight.indirectDiffuse += ( gl_FrontFacing ) ? vIndirectFront : vIndirectBack; - #else - reflectedLight.indirectDiffuse += vIndirectFront; - #endif - #include - reflectedLight.indirectDiffuse *= BRDF_Lambert( diffuseColor.rgb ); - #ifdef DOUBLE_SIDED - reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack; - #else - reflectedLight.directDiffuse = vLightFront; - #endif - reflectedLight.directDiffuse *= BRDF_Lambert( diffuseColor.rgb ) * getShadowMask(); - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include - #include -}`,meshmatcap_vert:`#define MATCAP -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; -}`,meshmatcap_frag:`#define MATCAP -uniform vec3 diffuse; -uniform float opacity; -uniform sampler2D matcap; -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - #include - #include - #include - vec3 viewDir = normalize( vViewPosition ); - vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) ); - vec3 y = cross( viewDir, x ); - vec2 uv = vec2( dot( x, normal ), dot( y, normal ) ) * 0.495 + 0.5; - #ifdef USE_MATCAP - vec4 matcapColor = texture2D( matcap, uv ); - #else - vec4 matcapColor = vec4( vec3( mix( 0.2, 0.8, uv.y ) ), 1.0 ); - #endif - vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb; - #include - #include - #include - #include - #include - #include -}`,meshnormal_vert:`#define NORMAL -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - varying vec3 vViewPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - vViewPosition = - mvPosition.xyz; -#endif -}`,meshnormal_frag:`#define NORMAL -uniform float opacity; -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - varying vec3 vViewPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - gl_FragColor = vec4( packNormalToRGB( normal ), opacity ); - #ifdef OPAQUE - gl_FragColor.a = 1.0; - #endif -}`,meshphong_vert:`#define PHONG -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include - #include -}`,meshphong_frag:`#define PHONG -uniform vec3 diffuse; -uniform vec3 emissive; -uniform vec3 specular; -uniform float shininess; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include - #include -}`,meshphysical_vert:`#define STANDARD -varying vec3 vViewPosition; -#ifdef USE_TRANSMISSION - varying vec3 vWorldPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include -#ifdef USE_TRANSMISSION - vWorldPosition = worldPosition.xyz; -#endif -}`,meshphysical_frag:`#define STANDARD -#ifdef PHYSICAL - #define IOR - #define SPECULAR -#endif -uniform vec3 diffuse; -uniform vec3 emissive; -uniform float roughness; -uniform float metalness; -uniform float opacity; -#ifdef IOR - uniform float ior; -#endif -#ifdef SPECULAR - uniform float specularIntensity; - uniform vec3 specularColor; - #ifdef USE_SPECULARINTENSITYMAP - uniform sampler2D specularIntensityMap; - #endif - #ifdef USE_SPECULARCOLORMAP - uniform sampler2D specularColorMap; - #endif -#endif -#ifdef USE_CLEARCOAT - uniform float clearcoat; - uniform float clearcoatRoughness; -#endif -#ifdef USE_SHEEN - uniform vec3 sheenColor; - uniform float sheenRoughness; - #ifdef USE_SHEENCOLORMAP - uniform sampler2D sheenColorMap; - #endif - #ifdef USE_SHEENROUGHNESSMAP - uniform sampler2D sheenRoughnessMap; - #endif -#endif -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 totalDiffuse = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse; - vec3 totalSpecular = reflectedLight.directSpecular + reflectedLight.indirectSpecular; - #include - vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance; - #ifdef USE_SHEEN - float sheenEnergyComp = 1.0 - 0.157 * max3( material.sheenColor ); - outgoingLight = outgoingLight * sheenEnergyComp + sheenSpecular; - #endif - #ifdef USE_CLEARCOAT - float dotNVcc = saturate( dot( geometry.clearcoatNormal, geometry.viewDir ) ); - vec3 Fcc = F_Schlick( material.clearcoatF0, material.clearcoatF90, dotNVcc ); - outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + clearcoatSpecular * material.clearcoat; - #endif - #include - #include - #include - #include - #include - #include -}`,meshtoon_vert:`#define TOON -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include -}`,meshtoon_frag:`#define TOON -uniform vec3 diffuse; -uniform vec3 emissive; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include -}`,points_vert:`uniform float size; -uniform float scale; -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - gl_PointSize = size; - #ifdef USE_SIZEATTENUATION - bool isPerspective = isPerspectiveMatrix( projectionMatrix ); - if ( isPerspective ) gl_PointSize *= ( scale / - mvPosition.z ); - #endif - #include - #include - #include - #include -}`,points_frag:`uniform vec3 diffuse; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include - #include -}`,shadow_vert:`#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,shadow_frag:`uniform vec3 color; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -void main() { - gl_FragColor = vec4( color, opacity * ( 1.0 - getShadowMask() ) ); - #include - #include - #include -}`,sprite_vert:`uniform float rotation; -uniform vec2 center; -#include -#include -#include -#include -#include -void main() { - #include - vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 ); - vec2 scale; - scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) ); - scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) ); - #ifndef USE_SIZEATTENUATION - bool isPerspective = isPerspectiveMatrix( projectionMatrix ); - if ( isPerspective ) scale *= - mvPosition.z; - #endif - vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale; - vec2 rotatedPosition; - rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y; - rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y; - mvPosition.xy += rotatedPosition; - gl_Position = projectionMatrix * mvPosition; - #include - #include - #include -}`,sprite_frag:`uniform vec3 diffuse; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include -}`},Ye={common:{diffuse:{value:new it(16777215)},opacity:{value:1},map:{value:null},uvTransform:{value:new Mr},uv2Transform:{value:new Mr},alphaMap:{value:null},alphaTest:{value:0}},specularmap:{specularMap:{value:null}},envmap:{envMap:{value:null},flipEnvMap:{value:-1},reflectivity:{value:1},ior:{value:1.5},refractionRatio:{value:.98}},aomap:{aoMap:{value:null},aoMapIntensity:{value:1}},lightmap:{lightMap:{value:null},lightMapIntensity:{value:1}},emissivemap:{emissiveMap:{value:null}},bumpmap:{bumpMap:{value:null},bumpScale:{value:1}},normalmap:{normalMap:{value:null},normalScale:{value:new Se(1,1)}},displacementmap:{displacementMap:{value:null},displacementScale:{value:1},displacementBias:{value:0}},roughnessmap:{roughnessMap:{value:null}},metalnessmap:{metalnessMap:{value:null}},gradientmap:{gradientMap:{value:null}},fog:{fogDensity:{value:25e-5},fogNear:{value:1},fogFar:{value:2e3},fogColor:{value:new it(16777215)}},lights:{ambientLightColor:{value:[]},lightProbe:{value:[]},directionalLights:{value:[],properties:{direction:{},color:{}}},directionalLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{}}},directionalShadowMap:{value:[]},directionalShadowMatrix:{value:[]},spotLights:{value:[],properties:{color:{},position:{},direction:{},distance:{},coneCos:{},penumbraCos:{},decay:{}}},spotLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{}}},spotShadowMap:{value:[]},spotShadowMatrix:{value:[]},pointLights:{value:[],properties:{color:{},position:{},decay:{},distance:{}}},pointLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{},shadowCameraNear:{},shadowCameraFar:{}}},pointShadowMap:{value:[]},pointShadowMatrix:{value:[]},hemisphereLights:{value:[],properties:{direction:{},skyColor:{},groundColor:{}}},rectAreaLights:{value:[],properties:{color:{},position:{},width:{},height:{}}},ltc_1:{value:null},ltc_2:{value:null}},points:{diffuse:{value:new it(16777215)},opacity:{value:1},size:{value:1},scale:{value:1},map:{value:null},alphaMap:{value:null},alphaTest:{value:0},uvTransform:{value:new Mr}},sprite:{diffuse:{value:new it(16777215)},opacity:{value:1},center:{value:new Se(.5,.5)},rotation:{value:0},map:{value:null},alphaMap:{value:null},alphaTest:{value:0},uvTransform:{value:new Mr}}},ms={basic:{uniforms:Nr([Ye.common,Ye.specularmap,Ye.envmap,Ye.aomap,Ye.lightmap,Ye.fog]),vertexShader:Jt.meshbasic_vert,fragmentShader:Jt.meshbasic_frag},lambert:{uniforms:Nr([Ye.common,Ye.specularmap,Ye.envmap,Ye.aomap,Ye.lightmap,Ye.emissivemap,Ye.fog,Ye.lights,{emissive:{value:new it(0)}}]),vertexShader:Jt.meshlambert_vert,fragmentShader:Jt.meshlambert_frag},phong:{uniforms:Nr([Ye.common,Ye.specularmap,Ye.envmap,Ye.aomap,Ye.lightmap,Ye.emissivemap,Ye.bumpmap,Ye.normalmap,Ye.displacementmap,Ye.fog,Ye.lights,{emissive:{value:new it(0)},specular:{value:new it(1118481)},shininess:{value:30}}]),vertexShader:Jt.meshphong_vert,fragmentShader:Jt.meshphong_frag},standard:{uniforms:Nr([Ye.common,Ye.envmap,Ye.aomap,Ye.lightmap,Ye.emissivemap,Ye.bumpmap,Ye.normalmap,Ye.displacementmap,Ye.roughnessmap,Ye.metalnessmap,Ye.fog,Ye.lights,{emissive:{value:new it(0)},roughness:{value:1},metalness:{value:0},envMapIntensity:{value:1}}]),vertexShader:Jt.meshphysical_vert,fragmentShader:Jt.meshphysical_frag},toon:{uniforms:Nr([Ye.common,Ye.aomap,Ye.lightmap,Ye.emissivemap,Ye.bumpmap,Ye.normalmap,Ye.displacementmap,Ye.gradientmap,Ye.fog,Ye.lights,{emissive:{value:new it(0)}}]),vertexShader:Jt.meshtoon_vert,fragmentShader:Jt.meshtoon_frag},matcap:{uniforms:Nr([Ye.common,Ye.bumpmap,Ye.normalmap,Ye.displacementmap,Ye.fog,{matcap:{value:null}}]),vertexShader:Jt.meshmatcap_vert,fragmentShader:Jt.meshmatcap_frag},points:{uniforms:Nr([Ye.points,Ye.fog]),vertexShader:Jt.points_vert,fragmentShader:Jt.points_frag},dashed:{uniforms:Nr([Ye.common,Ye.fog,{scale:{value:1},dashSize:{value:1},totalSize:{value:2}}]),vertexShader:Jt.linedashed_vert,fragmentShader:Jt.linedashed_frag},depth:{uniforms:Nr([Ye.common,Ye.displacementmap]),vertexShader:Jt.depth_vert,fragmentShader:Jt.depth_frag},normal:{uniforms:Nr([Ye.common,Ye.bumpmap,Ye.normalmap,Ye.displacementmap,{opacity:{value:1}}]),vertexShader:Jt.meshnormal_vert,fragmentShader:Jt.meshnormal_frag},sprite:{uniforms:Nr([Ye.sprite,Ye.fog]),vertexShader:Jt.sprite_vert,fragmentShader:Jt.sprite_frag},background:{uniforms:{uvTransform:{value:new Mr},t2D:{value:null}},vertexShader:Jt.background_vert,fragmentShader:Jt.background_frag},cube:{uniforms:Nr([Ye.envmap,{opacity:{value:1}}]),vertexShader:Jt.cube_vert,fragmentShader:Jt.cube_frag},equirect:{uniforms:{tEquirect:{value:null}},vertexShader:Jt.equirect_vert,fragmentShader:Jt.equirect_frag},distanceRGBA:{uniforms:Nr([Ye.common,Ye.displacementmap,{referencePosition:{value:new R},nearDistance:{value:1},farDistance:{value:1e3}}]),vertexShader:Jt.distanceRGBA_vert,fragmentShader:Jt.distanceRGBA_frag},shadow:{uniforms:Nr([Ye.lights,Ye.fog,{color:{value:new it(0)},opacity:{value:1}}]),vertexShader:Jt.shadow_vert,fragmentShader:Jt.shadow_frag}};ms.physical={uniforms:Nr([ms.standard.uniforms,{clearcoat:{value:0},clearcoatMap:{value:null},clearcoatRoughness:{value:0},clearcoatRoughnessMap:{value:null},clearcoatNormalScale:{value:new Se(1,1)},clearcoatNormalMap:{value:null},sheen:{value:0},sheenColor:{value:new it(0)},sheenColorMap:{value:null},sheenRoughness:{value:1},sheenRoughnessMap:{value:null},transmission:{value:0},transmissionMap:{value:null},transmissionSamplerSize:{value:new Se},transmissionSamplerMap:{value:null},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:0},attenuationColor:{value:new it(0)},specularIntensity:{value:1},specularIntensityMap:{value:null},specularColor:{value:new it(1,1,1)},specularColorMap:{value:null}}]),vertexShader:Jt.meshphysical_vert,fragmentShader:Jt.meshphysical_frag};function RZ(n,e,t,i,r,s){const a=new it(0);let o=r===!0?0:1,l,c,h=null,d=0,u=null;function p(g,m){let v=!1,b=m.isScene===!0?m.background:null;b&&b.isTexture&&(b=e.get(b));const _=n.xr,x=_.getSession&&_.getSession();x&&x.environmentBlendMode==="additive"&&(b=null),b===null?f(a,o):b&&b.isColor&&(f(b,1),v=!0),(n.autoClear||v)&&n.clear(n.autoClearColor,n.autoClearDepth,n.autoClearStencil),b&&(b.isCubeTexture||b.mapping===Dh)?(c===void 0&&(c=new Ge(new Bi(1,1,1),new ns({name:"BackgroundCubeMaterial",uniforms:Ql(ms.cube.uniforms),vertexShader:ms.cube.vertexShader,fragmentShader:ms.cube.fragmentShader,side:Jn,depthTest:!1,depthWrite:!1,fog:!1})),c.geometry.deleteAttribute("normal"),c.geometry.deleteAttribute("uv"),c.onBeforeRender=function(S,E,A){this.matrixWorld.copyPosition(A.matrixWorld)},Object.defineProperty(c.material,"envMap",{get:function(){return this.uniforms.envMap.value}}),i.update(c)),c.material.uniforms.envMap.value=b,c.material.uniforms.flipEnvMap.value=b.isCubeTexture&&b.isRenderTargetTexture===!1?-1:1,(h!==b||d!==b.version||u!==n.toneMapping)&&(c.material.needsUpdate=!0,h=b,d=b.version,u=n.toneMapping),g.unshift(c,c.geometry,c.material,0,0,null)):b&&b.isTexture&&(l===void 0&&(l=new Ge(new rc(2,2),new ns({name:"BackgroundMaterial",uniforms:Ql(ms.background.uniforms),vertexShader:ms.background.vertexShader,fragmentShader:ms.background.fragmentShader,side:Vh,depthTest:!1,depthWrite:!1,fog:!1})),l.geometry.deleteAttribute("normal"),Object.defineProperty(l.material,"map",{get:function(){return this.uniforms.t2D.value}}),i.update(l)),l.material.uniforms.t2D.value=b,b.matrixAutoUpdate===!0&&b.updateMatrix(),l.material.uniforms.uvTransform.value.copy(b.matrix),(h!==b||d!==b.version||u!==n.toneMapping)&&(l.material.needsUpdate=!0,h=b,d=b.version,u=n.toneMapping),g.unshift(l,l.geometry,l.material,0,0,null))}function f(g,m){t.buffers.color.setClear(g.r,g.g,g.b,m,s)}return{getClearColor:function(){return a},setClearColor:function(g,m=1){a.set(g),o=m,f(a,o)},getClearAlpha:function(){return o},setClearAlpha:function(g){o=g,f(a,o)},render:p}}function OZ(n,e,t,i){const r=n.getParameter(34921),s=i.isWebGL2?null:e.get("OES_vertex_array_object"),a=i.isWebGL2||s!==null,o={},l=m(null);let c=l,h=!1;function d(B,Q,ee,te,q){let ne=!1;if(a){const ce=g(te,ee,Q);c!==ce&&(c=ce,p(c.object)),ne=v(te,q),ne&&b(te,q)}else{const ce=Q.wireframe===!0;(c.geometry!==te.id||c.program!==ee.id||c.wireframe!==ce)&&(c.geometry=te.id,c.program=ee.id,c.wireframe=ce,ne=!0)}B.isInstancedMesh===!0&&(ne=!0),q!==null&&t.update(q,34963),(ne||h)&&(h=!1,z(B,Q,ee,te),q!==null&&n.bindBuffer(34963,t.get(q).buffer))}function u(){return i.isWebGL2?n.createVertexArray():s.createVertexArrayOES()}function p(B){return i.isWebGL2?n.bindVertexArray(B):s.bindVertexArrayOES(B)}function f(B){return i.isWebGL2?n.deleteVertexArray(B):s.deleteVertexArrayOES(B)}function g(B,Q,ee){const te=ee.wireframe===!0;let q=o[B.id];q===void 0&&(q={},o[B.id]=q);let ne=q[Q.id];ne===void 0&&(ne={},q[Q.id]=ne);let ce=ne[te];return ce===void 0&&(ce=m(u()),ne[te]=ce),ce}function m(B){const Q=[],ee=[],te=[];for(let q=0;q=0){let Re=q[ye];if(Re===void 0&&(ye==="instanceMatrix"&&B.instanceMatrix&&(Re=B.instanceMatrix),ye==="instanceColor"&&B.instanceColor&&(Re=B.instanceColor)),Re!==void 0){const et=Re.normalized,nt=Re.itemSize,be=t.get(Re);if(be===void 0)continue;const Dt=be.buffer,xt=be.type,vt=be.bytesPerElement;if(Re.isInterleavedBufferAttribute){const w=Re.data,k=w.stride,L=Re.offset;if(w.isInstancedInterleavedBuffer){for(let X=0;X0&&n.getShaderPrecisionFormat(35632,36338).precision>0)return"highp";A="mediump"}return A==="mediump"&&n.getShaderPrecisionFormat(35633,36337).precision>0&&n.getShaderPrecisionFormat(35632,36337).precision>0?"mediump":"lowp"}const a=typeof WebGL2RenderingContext!="undefined"&&n instanceof WebGL2RenderingContext||typeof WebGL2ComputeRenderingContext!="undefined"&&n instanceof WebGL2ComputeRenderingContext;let o=t.precision!==void 0?t.precision:"highp";const l=s(o);l!==o&&(console.warn("THREE.WebGLRenderer:",o,"not supported, using",l,"instead."),o=l);const c=a||e.has("WEBGL_draw_buffers"),h=t.logarithmicDepthBuffer===!0,d=n.getParameter(34930),u=n.getParameter(35660),p=n.getParameter(3379),f=n.getParameter(34076),g=n.getParameter(34921),m=n.getParameter(36347),v=n.getParameter(36348),b=n.getParameter(36349),_=u>0,x=a||e.has("OES_texture_float"),S=_&&x,E=a?n.getParameter(36183):0;return{isWebGL2:a,drawBuffers:c,getMaxAnisotropy:r,getMaxPrecision:s,precision:o,logarithmicDepthBuffer:h,maxTextures:d,maxVertexTextures:u,maxTextureSize:p,maxCubemapSize:f,maxAttributes:g,maxVertexUniforms:m,maxVaryings:v,maxFragmentUniforms:b,vertexTextures:_,floatFragmentTextures:x,floatVertexTextures:S,maxSamples:E}}function DZ(n){const e=this;let t=null,i=0,r=!1,s=!1;const a=new Xs,o=new Mr,l={value:null,needsUpdate:!1};this.uniform=l,this.numPlanes=0,this.numIntersection=0,this.init=function(d,u,p){const f=d.length!==0||u||i!==0||r;return r=u,t=h(d,p,0),i=d.length,f},this.beginShadows=function(){s=!0,h(null)},this.endShadows=function(){s=!1,c()},this.setState=function(d,u,p){const f=d.clippingPlanes,g=d.clipIntersection,m=d.clipShadows,v=n.get(d);if(!r||f===null||f.length===0||s&&!m)s?h(null):c();else{const b=s?0:i,_=b*4;let x=v.clippingState||null;l.value=x,x=h(f,u,_,p);for(let S=0;S!==_;++S)x[S]=t[S];v.clippingState=x,this.numIntersection=g?this.numPlanes:0,this.numPlanes+=b}};function c(){l.value!==t&&(l.value=t,l.needsUpdate=i>0),e.numPlanes=i,e.numIntersection=0}function h(d,u,p,f){const g=d!==null?d.length:0;let m=null;if(g!==0){if(m=l.value,f!==!0||m===null){const v=p+g*4,b=u.matrixWorldInverse;o.getNormalMatrix(b),(m===null||m.length0){const c=new s_(l.height/2);return c.fromEquirectangularTexture(n,a),e.set(a,c),a.addEventListener("dispose",r),t(c.texture,a.mapping)}else return null}}return a}function r(a){const o=a.target;o.removeEventListener("dispose",r);const l=e.get(o);l!==void 0&&(e.delete(o),l.dispose())}function s(){e=new WeakMap}return{get:i,dispose:s}}class dp extends lp{constructor(e=-1,t=1,i=1,r=-1,s=.1,a=2e3){super(),this.type="OrthographicCamera",this.zoom=1,this.view=null,this.left=e,this.right=t,this.top=i,this.bottom=r,this.near=s,this.far=a,this.updateProjectionMatrix()}copy(e,t){return super.copy(e,t),this.left=e.left,this.right=e.right,this.top=e.top,this.bottom=e.bottom,this.near=e.near,this.far=e.far,this.zoom=e.zoom,this.view=e.view===null?null:Object.assign({},e.view),this}setViewOffset(e,t,i,r,s,a){this.view===null&&(this.view={enabled:!0,fullWidth:1,fullHeight:1,offsetX:0,offsetY:0,width:1,height:1}),this.view.enabled=!0,this.view.fullWidth=e,this.view.fullHeight=t,this.view.offsetX=i,this.view.offsetY=r,this.view.width=s,this.view.height=a,this.updateProjectionMatrix()}clearViewOffset(){this.view!==null&&(this.view.enabled=!1),this.updateProjectionMatrix()}updateProjectionMatrix(){const e=(this.right-this.left)/(2*this.zoom),t=(this.top-this.bottom)/(2*this.zoom),i=(this.right+this.left)/2,r=(this.top+this.bottom)/2;let s=i-e,a=i+e,o=r+t,l=r-t;if(this.view!==null&&this.view.enabled){const c=(this.right-this.left)/this.view.fullWidth/this.zoom,h=(this.top-this.bottom)/this.view.fullHeight/this.zoom;s+=c*this.view.offsetX,a=s+c*this.view.width,o-=h*this.view.offsetY,l=o-h*this.view.height}this.projectionMatrix.makeOrthographic(s,a,o,l,this.near,this.far),this.projectionMatrixInverse.copy(this.projectionMatrix).invert()}toJSON(e){const t=super.toJSON(e);return t.object.zoom=this.zoom,t.object.left=this.left,t.object.right=this.right,t.object.top=this.top,t.object.bottom=this.bottom,t.object.near=this.near,t.object.far=this.far,this.view!==null&&(t.object.view=Object.assign({},this.view)),t}}dp.prototype.isOrthographicCamera=!0;const nc=4,o_=[.125,.215,.35,.446,.526,.582],Wo=20,Xm=new dp,l_=new it;let Ym=null;const Xo=(1+Math.sqrt(5))/2,sc=1/Xo,c_=[new R(1,1,1),new R(-1,1,1),new R(1,1,-1),new R(-1,1,-1),new R(0,Xo,sc),new R(0,Xo,-sc),new R(sc,0,Xo),new R(-sc,0,Xo),new R(Xo,sc,0),new R(-Xo,sc,0)];class h_{constructor(e){this._renderer=e,this._pingPongRenderTarget=null,this._lodMax=0,this._cubeSize=0,this._lodPlanes=[],this._sizeLods=[],this._sigmas=[],this._blurMaterial=null,this._cubemapMaterial=null,this._equirectMaterial=null,this._compileMaterial(this._blurMaterial)}fromScene(e,t=0,i=.1,r=100){Ym=this._renderer.getRenderTarget(),this._setSize(256);const s=this._allocateTargets();return s.depthBuffer=!0,this._sceneToCubeUV(e,i,r,s),t>0&&this._blur(s,0,0,t),this._applyPMREM(s),this._cleanup(s),s}fromEquirectangular(e,t=null){return this._fromTexture(e,t)}fromCubemap(e,t=null){return this._fromTexture(e,t)}compileCubemapShader(){this._cubemapMaterial===null&&(this._cubemapMaterial=p_(),this._compileMaterial(this._cubemapMaterial))}compileEquirectangularShader(){this._equirectMaterial===null&&(this._equirectMaterial=u_(),this._compileMaterial(this._equirectMaterial))}dispose(){this._dispose(),this._cubemapMaterial!==null&&this._cubemapMaterial.dispose(),this._equirectMaterial!==null&&this._equirectMaterial.dispose()}_setSize(e){this._lodMax=Math.floor(Math.log2(e)),this._cubeSize=Math.pow(2,this._lodMax)}_dispose(){this._blurMaterial!==null&&this._blurMaterial.dispose(),this._pingPongRenderTarget!==null&&this._pingPongRenderTarget.dispose();for(let e=0;e2?_:0,_,_),h.setRenderTarget(r),g&&h.render(f,o),h.render(e,o)}f.geometry.dispose(),f.material.dispose(),h.toneMapping=u,h.autoClear=d,e.background=m}_textureToCubeUV(e,t){const i=this._renderer,r=e.mapping===Ro||e.mapping===Oo;r?(this._cubemapMaterial===null&&(this._cubemapMaterial=p_()),this._cubemapMaterial.uniforms.flipEnvMap.value=e.isRenderTargetTexture===!1?-1:1):this._equirectMaterial===null&&(this._equirectMaterial=u_());const s=r?this._cubemapMaterial:this._equirectMaterial,a=new Ge(this._lodPlanes[0],s),o=s.uniforms;o.envMap.value=e;const l=this._cubeSize;up(t,0,0,3*l,2*l),i.setRenderTarget(t),i.render(a,Xm)}_applyPMREM(e){const t=this._renderer,i=t.autoClear;t.autoClear=!1;for(let r=1;rWo&&console.warn(`sigmaRadians, ${s}, is too large and will clip, as it requested ${m} samples when the maximum is set to ${Wo}`);const v=[];let b=0;for(let A=0;A_-nc?r-_+nc:0),E=4*(this._cubeSize-x);up(t,S,E,3*x,2*x),l.setRenderTarget(t),l.render(d,Xm)}}function NZ(n){const e=[],t=[],i=[];let r=n;const s=n-nc+1+o_.length;for(let a=0;an-nc?l=o_[a-n+nc-1]:a===0&&(l=0),i.push(l);const c=1/(o-1),h=-c/2,d=1+c/2,u=[h,h,d,h,d,d,h,h,d,d,h,d],p=6,f=6,g=3,m=2,v=1,b=new Float32Array(g*f*p),_=new Float32Array(m*f*p),x=new Float32Array(v*f*p);for(let E=0;E2?0:-1,Z=[A,z,0,A+2/3,z,0,A+2/3,z+1,0,A,z,0,A+2/3,z+1,0,A,z+1,0];b.set(Z,g*f*E),_.set(u,m*f*E);const Y=[E,E,E,E,E,E];x.set(Y,v*f*E)}const S=new zt;S.setAttribute("position",new ki(b,g)),S.setAttribute("uv",new ki(_,m)),S.setAttribute("faceIndex",new ki(x,v)),e.push(S),r>nc&&r--}return{lodPlanes:e,sizeLods:t,sigmas:i}}function d_(n,e,t){const i=new dn(n,e,t);return i.texture.mapping=Dh,i.texture.name="PMREM.cubeUv",i.scissorTest=!0,i}function up(n,e,t,i,r){n.viewport.set(e,t,i,r),n.scissor.set(e,t,i,r)}function BZ(n,e,t){const i=new Float32Array(Wo),r=new R(0,1,0);return new ns({name:"SphericalGaussianBlur",defines:{n:Wo,CUBEUV_TEXEL_WIDTH:1/e,CUBEUV_TEXEL_HEIGHT:1/t,CUBEUV_MAX_MIP:`${n}.0`},uniforms:{envMap:{value:null},samples:{value:1},weights:{value:i},latitudinal:{value:!1},dTheta:{value:0},mipInt:{value:0},poleAxis:{value:r}},vertexShader:Km(),fragmentShader:` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - uniform int samples; - uniform float weights[ n ]; - uniform bool latitudinal; - uniform float dTheta; - uniform float mipInt; - uniform vec3 poleAxis; - - #define ENVMAP_TYPE_CUBE_UV - #include - - vec3 getSample( float theta, vec3 axis ) { - - float cosTheta = cos( theta ); - // Rodrigues' axis-angle rotation - vec3 sampleDirection = vOutputDirection * cosTheta - + cross( axis, vOutputDirection ) * sin( theta ) - + axis * dot( axis, vOutputDirection ) * ( 1.0 - cosTheta ); - - return bilinearCubeUV( envMap, sampleDirection, mipInt ); - - } - - void main() { - - vec3 axis = latitudinal ? poleAxis : cross( poleAxis, vOutputDirection ); - - if ( all( equal( axis, vec3( 0.0 ) ) ) ) { - - axis = vec3( vOutputDirection.z, 0.0, - vOutputDirection.x ); - - } - - axis = normalize( axis ); - - gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 ); - gl_FragColor.rgb += weights[ 0 ] * getSample( 0.0, axis ); - - for ( int i = 1; i < n; i++ ) { - - if ( i >= samples ) { - break; - - } - - float theta = dTheta * float( i ); - gl_FragColor.rgb += weights[ i ] * getSample( -1.0 * theta, axis ); - gl_FragColor.rgb += weights[ i ] * getSample( theta, axis ); - - } - - } - `,blending:Va,depthTest:!1,depthWrite:!1})}function u_(){return new ns({name:"EquirectangularToCubeUV",uniforms:{envMap:{value:null}},vertexShader:Km(),fragmentShader:` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - - #include - - void main() { - - vec3 outputDirection = normalize( vOutputDirection ); - vec2 uv = equirectUv( outputDirection ); - - gl_FragColor = vec4( texture2D ( envMap, uv ).rgb, 1.0 ); - - } - `,blending:Va,depthTest:!1,depthWrite:!1})}function p_(){return new ns({name:"CubemapToCubeUV",uniforms:{envMap:{value:null},flipEnvMap:{value:-1}},vertexShader:Km(),fragmentShader:` - - precision mediump float; - precision mediump int; - - uniform float flipEnvMap; - - varying vec3 vOutputDirection; - - uniform samplerCube envMap; - - void main() { - - gl_FragColor = textureCube( envMap, vec3( flipEnvMap * vOutputDirection.x, vOutputDirection.yz ) ); - - } - `,blending:Va,depthTest:!1,depthWrite:!1})}function Km(){return` - - precision mediump float; - precision mediump int; - - attribute float faceIndex; - - varying vec3 vOutputDirection; - - // RH coordinate system; PMREM face-indexing convention - vec3 getDirection( vec2 uv, float face ) { - - uv = 2.0 * uv - 1.0; - - vec3 direction = vec3( uv, 1.0 ); - - if ( face == 0.0 ) { - - direction = direction.zyx; // ( 1, v, u ) pos x - - } else if ( face == 1.0 ) { - - direction = direction.xzy; - direction.xz *= -1.0; // ( -u, 1, -v ) pos y - - } else if ( face == 2.0 ) { - - direction.x *= -1.0; // ( -u, v, 1 ) pos z - - } else if ( face == 3.0 ) { - - direction = direction.zyx; - direction.xz *= -1.0; // ( -1, v, -u ) neg x - - } else if ( face == 4.0 ) { - - direction = direction.xzy; - direction.xy *= -1.0; // ( -u, -1, v ) neg y - - } else if ( face == 5.0 ) { - - direction.z *= -1.0; // ( u, v, -1 ) neg z - - } - - return direction; - - } - - void main() { - - vOutputDirection = getDirection( uv, faceIndex ); - gl_Position = vec4( position, 1.0 ); - - } - `}function jZ(n){let e=new WeakMap,t=null;function i(o){if(o&&o.isTexture){const l=o.mapping,c=l===ku||l===Au,h=l===Ro||l===Oo;if(c||h)if(o.isRenderTargetTexture&&o.needsPMREMUpdate===!0){o.needsPMREMUpdate=!1;let d=e.get(o);return t===null&&(t=new h_(n)),d=c?t.fromEquirectangular(o,d):t.fromCubemap(o,d),e.set(o,d),d.texture}else{if(e.has(o))return e.get(o).texture;{const d=o.image;if(c&&d&&d.height>0||h&&d&&r(d)){t===null&&(t=new h_(n));const u=c?t.fromEquirectangular(o):t.fromCubemap(o);return e.set(o,u),o.addEventListener("dispose",s),u.texture}else return null}}}return o}function r(o){let l=0;const c=6;for(let h=0;he.maxTextureSize&&(T=Math.ceil(Y/e.maxTextureSize),Y=e.maxTextureSize);const V=new Float32Array(Y*T*4*g),oe=new Uu(V,Y,T,g);oe.type=Da,oe.needsUpdate=!0;const B=Z*4;for(let ee=0;ee0)return n;const r=e*t;let s=y_[r];if(s===void 0&&(s=new Float32Array(r),y_[r]=s),e!==0){i.toArray(s,0);for(let a=1,o=0;a!==e;++a)o+=t,n[a].toArray(s,o)}return s}function Wr(n,e){if(n.length!==e.length)return!1;for(let t=0,i=n.length;t/gm;function Jm(n){return n.replace(XJ,YJ)}function YJ(n,e){const t=Jt[e];if(t===void 0)throw new Error("Can not resolve #include <"+e+">");return Jm(t)}const KJ=/#pragma unroll_loop[\s]+?for \( int i \= (\d+)\; i < (\d+)\; i \+\+ \) \{([\s\S]+?)(?=\})\}/g,qJ=/#pragma unroll_loop_start\s+for\s*\(\s*int\s+i\s*=\s*(\d+)\s*;\s*i\s*<\s*(\d+)\s*;\s*i\s*\+\+\s*\)\s*{([\s\S]+?)}\s+#pragma unroll_loop_end/g;function I_(n){return n.replace(qJ,L_).replace(KJ,ZJ)}function ZJ(n,e,t,i){return console.warn("WebGLProgram: #pragma unroll_loop shader syntax is deprecated. Please use #pragma unroll_loop_start syntax instead."),L_(n,e,t,i)}function L_(n,e,t,i){let r="";for(let s=parseInt(e);s0&&(m+=` -`),v=[p,f].filter(Xh).join(` -`),v.length>0&&(v+=` -`)):(m=[k_(t),"#define SHADER_NAME "+t.shaderName,f,t.instancing?"#define USE_INSTANCING":"",t.instancingColor?"#define USE_INSTANCING_COLOR":"",t.supportsVertexTextures?"#define VERTEX_TEXTURES":"","#define MAX_BONES "+t.maxBones,t.useFog&&t.fog?"#define USE_FOG":"",t.useFog&&t.fogExp2?"#define FOG_EXP2":"",t.map?"#define USE_MAP":"",t.envMap?"#define USE_ENVMAP":"",t.envMap?"#define "+h:"",t.lightMap?"#define USE_LIGHTMAP":"",t.aoMap?"#define USE_AOMAP":"",t.emissiveMap?"#define USE_EMISSIVEMAP":"",t.bumpMap?"#define USE_BUMPMAP":"",t.normalMap?"#define USE_NORMALMAP":"",t.normalMap&&t.objectSpaceNormalMap?"#define OBJECTSPACE_NORMALMAP":"",t.normalMap&&t.tangentSpaceNormalMap?"#define TANGENTSPACE_NORMALMAP":"",t.clearcoatMap?"#define USE_CLEARCOATMAP":"",t.clearcoatRoughnessMap?"#define USE_CLEARCOAT_ROUGHNESSMAP":"",t.clearcoatNormalMap?"#define USE_CLEARCOAT_NORMALMAP":"",t.displacementMap&&t.supportsVertexTextures?"#define USE_DISPLACEMENTMAP":"",t.specularMap?"#define USE_SPECULARMAP":"",t.specularIntensityMap?"#define USE_SPECULARINTENSITYMAP":"",t.specularColorMap?"#define USE_SPECULARCOLORMAP":"",t.roughnessMap?"#define USE_ROUGHNESSMAP":"",t.metalnessMap?"#define USE_METALNESSMAP":"",t.alphaMap?"#define USE_ALPHAMAP":"",t.transmission?"#define USE_TRANSMISSION":"",t.transmissionMap?"#define USE_TRANSMISSIONMAP":"",t.thicknessMap?"#define USE_THICKNESSMAP":"",t.sheenColorMap?"#define USE_SHEENCOLORMAP":"",t.sheenRoughnessMap?"#define USE_SHEENROUGHNESSMAP":"",t.vertexTangents?"#define USE_TANGENT":"",t.vertexColors?"#define USE_COLOR":"",t.vertexAlphas?"#define USE_COLOR_ALPHA":"",t.vertexUvs?"#define USE_UV":"",t.uvsVertexOnly?"#define UVS_VERTEX_ONLY":"",t.flatShading?"#define FLAT_SHADED":"",t.skinning?"#define USE_SKINNING":"",t.useVertexTexture?"#define BONE_TEXTURE":"",t.morphTargets?"#define USE_MORPHTARGETS":"",t.morphNormals&&t.flatShading===!1?"#define USE_MORPHNORMALS":"",t.morphColors&&t.isWebGL2?"#define USE_MORPHCOLORS":"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_TEXTURE":"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_TEXTURE_STRIDE "+t.morphTextureStride:"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_COUNT "+t.morphTargetsCount:"",t.doubleSided?"#define DOUBLE_SIDED":"",t.flipSided?"#define FLIP_SIDED":"",t.shadowMapEnabled?"#define USE_SHADOWMAP":"",t.shadowMapEnabled?"#define "+l:"",t.sizeAttenuation?"#define USE_SIZEATTENUATION":"",t.logarithmicDepthBuffer?"#define USE_LOGDEPTHBUF":"",t.logarithmicDepthBuffer&&t.rendererExtensionFragDepth?"#define USE_LOGDEPTHBUF_EXT":"","uniform mat4 modelMatrix;","uniform mat4 modelViewMatrix;","uniform mat4 projectionMatrix;","uniform mat4 viewMatrix;","uniform mat3 normalMatrix;","uniform vec3 cameraPosition;","uniform bool isOrthographic;","#ifdef USE_INSTANCING"," attribute mat4 instanceMatrix;","#endif","#ifdef USE_INSTANCING_COLOR"," attribute vec3 instanceColor;","#endif","attribute vec3 position;","attribute vec3 normal;","attribute vec2 uv;","#ifdef USE_TANGENT"," attribute vec4 tangent;","#endif","#if defined( USE_COLOR_ALPHA )"," attribute vec4 color;","#elif defined( USE_COLOR )"," attribute vec3 color;","#endif","#if ( defined( USE_MORPHTARGETS ) && ! defined( MORPHTARGETS_TEXTURE ) )"," attribute vec3 morphTarget0;"," attribute vec3 morphTarget1;"," attribute vec3 morphTarget2;"," attribute vec3 morphTarget3;"," #ifdef USE_MORPHNORMALS"," attribute vec3 morphNormal0;"," attribute vec3 morphNormal1;"," attribute vec3 morphNormal2;"," attribute vec3 morphNormal3;"," #else"," attribute vec3 morphTarget4;"," attribute vec3 morphTarget5;"," attribute vec3 morphTarget6;"," attribute vec3 morphTarget7;"," #endif","#endif","#ifdef USE_SKINNING"," attribute vec4 skinIndex;"," attribute vec4 skinWeight;","#endif",` -`].filter(Xh).join(` -`),v=[p,k_(t),"#define SHADER_NAME "+t.shaderName,f,t.useFog&&t.fog?"#define USE_FOG":"",t.useFog&&t.fogExp2?"#define FOG_EXP2":"",t.map?"#define USE_MAP":"",t.matcap?"#define USE_MATCAP":"",t.envMap?"#define USE_ENVMAP":"",t.envMap?"#define "+c:"",t.envMap?"#define "+h:"",t.envMap?"#define "+d:"",u?"#define CUBEUV_TEXEL_WIDTH "+u.texelWidth:"",u?"#define CUBEUV_TEXEL_HEIGHT "+u.texelHeight:"",u?"#define CUBEUV_MAX_MIP "+u.maxMip+".0":"",t.lightMap?"#define USE_LIGHTMAP":"",t.aoMap?"#define USE_AOMAP":"",t.emissiveMap?"#define USE_EMISSIVEMAP":"",t.bumpMap?"#define USE_BUMPMAP":"",t.normalMap?"#define USE_NORMALMAP":"",t.normalMap&&t.objectSpaceNormalMap?"#define OBJECTSPACE_NORMALMAP":"",t.normalMap&&t.tangentSpaceNormalMap?"#define TANGENTSPACE_NORMALMAP":"",t.clearcoat?"#define USE_CLEARCOAT":"",t.clearcoatMap?"#define USE_CLEARCOATMAP":"",t.clearcoatRoughnessMap?"#define USE_CLEARCOAT_ROUGHNESSMAP":"",t.clearcoatNormalMap?"#define USE_CLEARCOAT_NORMALMAP":"",t.specularMap?"#define USE_SPECULARMAP":"",t.specularIntensityMap?"#define USE_SPECULARINTENSITYMAP":"",t.specularColorMap?"#define USE_SPECULARCOLORMAP":"",t.roughnessMap?"#define USE_ROUGHNESSMAP":"",t.metalnessMap?"#define USE_METALNESSMAP":"",t.alphaMap?"#define USE_ALPHAMAP":"",t.alphaTest?"#define USE_ALPHATEST":"",t.sheen?"#define USE_SHEEN":"",t.sheenColorMap?"#define USE_SHEENCOLORMAP":"",t.sheenRoughnessMap?"#define USE_SHEENROUGHNESSMAP":"",t.transmission?"#define USE_TRANSMISSION":"",t.transmissionMap?"#define USE_TRANSMISSIONMAP":"",t.thicknessMap?"#define USE_THICKNESSMAP":"",t.decodeVideoTexture?"#define DECODE_VIDEO_TEXTURE":"",t.vertexTangents?"#define USE_TANGENT":"",t.vertexColors||t.instancingColor?"#define USE_COLOR":"",t.vertexAlphas?"#define USE_COLOR_ALPHA":"",t.vertexUvs?"#define USE_UV":"",t.uvsVertexOnly?"#define UVS_VERTEX_ONLY":"",t.gradientMap?"#define USE_GRADIENTMAP":"",t.flatShading?"#define FLAT_SHADED":"",t.doubleSided?"#define DOUBLE_SIDED":"",t.flipSided?"#define FLIP_SIDED":"",t.shadowMapEnabled?"#define USE_SHADOWMAP":"",t.shadowMapEnabled?"#define "+l:"",t.premultipliedAlpha?"#define PREMULTIPLIED_ALPHA":"",t.physicallyCorrectLights?"#define PHYSICALLY_CORRECT_LIGHTS":"",t.logarithmicDepthBuffer?"#define USE_LOGDEPTHBUF":"",t.logarithmicDepthBuffer&&t.rendererExtensionFragDepth?"#define USE_LOGDEPTHBUF_EXT":"","uniform mat4 viewMatrix;","uniform vec3 cameraPosition;","uniform bool isOrthographic;",t.toneMapping!==Fs?"#define TONE_MAPPING":"",t.toneMapping!==Fs?Jt.tonemapping_pars_fragment:"",t.toneMapping!==Fs?GJ("toneMapping",t.toneMapping):"",t.dithering?"#define DITHERING":"",t.opaque?"#define OPAQUE":"",Jt.encodings_pars_fragment,jJ("linearToOutputTexel",t.outputEncoding),t.depthPacking?"#define DEPTH_PACKING "+t.depthPacking:"",` -`].filter(Xh).join(` -`)),a=Jm(a),a=C_(a,t),a=E_(a,t),o=Jm(o),o=C_(o,t),o=E_(o,t),a=I_(a),o=I_(o),t.isWebGL2&&t.isRawShaderMaterial!==!0&&(b=`#version 300 es -`,m=["precision mediump sampler2DArray;","#define attribute in","#define varying out","#define texture2D texture"].join(` -`)+` -`+m,v=["#define varying in",t.glslVersion===jx?"":"layout(location = 0) out highp vec4 pc_fragColor;",t.glslVersion===jx?"":"#define gl_FragColor pc_fragColor","#define gl_FragDepthEXT gl_FragDepth","#define texture2D texture","#define textureCube texture","#define texture2DProj textureProj","#define texture2DLodEXT textureLod","#define texture2DProjLodEXT textureProjLod","#define textureCubeLodEXT textureLod","#define texture2DGradEXT textureGrad","#define texture2DProjGradEXT textureProjGrad","#define textureCubeGradEXT textureGrad"].join(` -`)+` -`+v);const _=b+m+a,x=b+v+o,S=P_(r,35633,_),E=P_(r,35632,x);if(r.attachShader(g,S),r.attachShader(g,E),t.index0AttributeName!==void 0?r.bindAttribLocation(g,0,t.index0AttributeName):t.morphTargets===!0&&r.bindAttribLocation(g,0,"position"),r.linkProgram(g),n.debug.checkShaderErrors){const Z=r.getProgramInfoLog(g).trim(),Y=r.getShaderInfoLog(S).trim(),T=r.getShaderInfoLog(E).trim();let V=!0,oe=!0;if(r.getProgramParameter(g,35714)===!1){V=!1;const B=T_(r,S,"vertex"),Q=T_(r,E,"fragment");console.error("THREE.WebGLProgram: Shader Error "+r.getError()+" - VALIDATE_STATUS "+r.getProgramParameter(g,35715)+` - -Program Info Log: `+Z+` -`+B+` -`+Q)}else Z!==""?console.warn("THREE.WebGLProgram: Program Info Log:",Z):(Y===""||T==="")&&(oe=!1);oe&&(this.diagnostics={runnable:V,programLog:Z,vertexShader:{log:Y,prefix:m},fragmentShader:{log:T,prefix:v}})}r.deleteShader(S),r.deleteShader(E);let A;this.getUniforms=function(){return A===void 0&&(A=new Ya(r,g)),A};let z;return this.getAttributes=function(){return z===void 0&&(z=WJ(r,g)),z},this.destroy=function(){i.releaseStatesOfProgram(this),r.deleteProgram(g),this.program=void 0},this.name=t.shaderName,this.id=FJ++,this.cacheKey=e,this.usedTimes=1,this.program=g,this.vertexShader=S,this.fragmentShader=E,this}let nQ=0;class sQ{constructor(){this.shaderCache=new Map,this.materialCache=new Map}update(e){const t=e.vertexShader,i=e.fragmentShader,r=this._getShaderStage(t),s=this._getShaderStage(i),a=this._getShaderCacheForMaterial(e);return a.has(r)===!1&&(a.add(r),r.usedTimes++),a.has(s)===!1&&(a.add(s),s.usedTimes++),this}remove(e){const t=this.materialCache.get(e);for(const i of t)i.usedTimes--,i.usedTimes===0&&this.shaderCache.delete(i.code);return this.materialCache.delete(e),this}getVertexShaderID(e){return this._getShaderStage(e.vertexShader).id}getFragmentShaderID(e){return this._getShaderStage(e.fragmentShader).id}dispose(){this.shaderCache.clear(),this.materialCache.clear()}_getShaderCacheForMaterial(e){const t=this.materialCache;return t.has(e)===!1&&t.set(e,new Set),t.get(e)}_getShaderStage(e){const t=this.shaderCache;if(t.has(e)===!1){const i=new aQ(e);t.set(e,i)}return t.get(e)}}class aQ{constructor(e){this.id=nQ++,this.code=e,this.usedTimes=0}}function oQ(n,e,t,i,r,s,a){const o=new Rm,l=new sQ,c=[],h=r.isWebGL2,d=r.logarithmicDepthBuffer,u=r.floatVertexTextures,p=r.maxVertexUniforms,f=r.vertexTextures;let g=r.precision;const m={MeshDepthMaterial:"depth",MeshDistanceMaterial:"distanceRGBA",MeshNormalMaterial:"normal",MeshBasicMaterial:"basic",MeshLambertMaterial:"lambert",MeshPhongMaterial:"phong",MeshToonMaterial:"toon",MeshStandardMaterial:"physical",MeshPhysicalMaterial:"physical",MeshMatcapMaterial:"matcap",LineBasicMaterial:"basic",LineDashedMaterial:"dashed",PointsMaterial:"points",ShadowMaterial:"shadow",SpriteMaterial:"sprite"};function v(T){const oe=T.skeleton.bones;if(u)return 1024;{const Q=Math.floor((p-20)/4),ee=Math.min(Q,oe.length);return ee0,L=T.clearcoat>0;return{isWebGL2:h,shaderID:ye,shaderName:T.type,vertexShader:be,fragmentShader:Dt,defines:T.defines,customVertexShaderID:xt,customFragmentShaderID:vt,isRawShaderMaterial:T.isRawShaderMaterial===!0,glslVersion:T.glslVersion,precision:g,instancing:Q.isInstancedMesh===!0,instancingColor:Q.isInstancedMesh===!0&&Q.instanceColor!==null,supportsVertexTextures:f,outputEncoding:w===null?n.outputEncoding:w.isXRRenderTarget===!0?w.texture.encoding:Ns,map:!!T.map,matcap:!!T.matcap,envMap:!!ne,envMapMode:ne&&ne.mapping,envMapCubeUVHeight:ce,lightMap:!!T.lightMap,aoMap:!!T.aoMap,emissiveMap:!!T.emissiveMap,bumpMap:!!T.bumpMap,normalMap:!!T.normalMap,objectSpaceNormalMap:T.normalMapType===pK,tangentSpaceNormalMap:T.normalMapType===Nl,decodeVideoTexture:!!T.map&&T.map.isVideoTexture===!0&&T.map.encoding===Li,clearcoat:L,clearcoatMap:L&&!!T.clearcoatMap,clearcoatRoughnessMap:L&&!!T.clearcoatRoughnessMap,clearcoatNormalMap:L&&!!T.clearcoatNormalMap,displacementMap:!!T.displacementMap,roughnessMap:!!T.roughnessMap,metalnessMap:!!T.metalnessMap,specularMap:!!T.specularMap,specularIntensityMap:!!T.specularIntensityMap,specularColorMap:!!T.specularColorMap,opaque:T.transparent===!1&&T.blending===Al,alphaMap:!!T.alphaMap,alphaTest:k,gradientMap:!!T.gradientMap,sheen:T.sheen>0,sheenColorMap:!!T.sheenColorMap,sheenRoughnessMap:!!T.sheenRoughnessMap,transmission:T.transmission>0,transmissionMap:!!T.transmissionMap,thicknessMap:!!T.thicknessMap,combine:T.combine,vertexTangents:!!T.normalMap&&!!te.attributes.tangent,vertexColors:T.vertexColors,vertexAlphas:T.vertexColors===!0&&!!te.attributes.color&&te.attributes.color.itemSize===4,vertexUvs:!!T.map||!!T.bumpMap||!!T.normalMap||!!T.specularMap||!!T.alphaMap||!!T.emissiveMap||!!T.roughnessMap||!!T.metalnessMap||!!T.clearcoatMap||!!T.clearcoatRoughnessMap||!!T.clearcoatNormalMap||!!T.displacementMap||!!T.transmissionMap||!!T.thicknessMap||!!T.specularIntensityMap||!!T.specularColorMap||!!T.sheenColorMap||!!T.sheenRoughnessMap,uvsVertexOnly:!(!!T.map||!!T.bumpMap||!!T.normalMap||!!T.specularMap||!!T.alphaMap||!!T.emissiveMap||!!T.roughnessMap||!!T.metalnessMap||!!T.clearcoatNormalMap||T.transmission>0||!!T.transmissionMap||!!T.thicknessMap||!!T.specularIntensityMap||!!T.specularColorMap||T.sheen>0||!!T.sheenColorMap||!!T.sheenRoughnessMap)&&!!T.displacementMap,fog:!!ee,useFog:T.fog,fogExp2:ee&&ee.isFogExp2,flatShading:!!T.flatShading,sizeAttenuation:T.sizeAttenuation,logarithmicDepthBuffer:d,skinning:Q.isSkinnedMesh===!0&&J>0,maxBones:J,useVertexTexture:u,morphTargets:te.morphAttributes.position!==void 0,morphNormals:te.morphAttributes.normal!==void 0,morphColors:te.morphAttributes.color!==void 0,morphTargetsCount:et,morphTextureStride:nt,numDirLights:V.directional.length,numPointLights:V.point.length,numSpotLights:V.spot.length,numRectAreaLights:V.rectArea.length,numHemiLights:V.hemi.length,numDirLightShadows:V.directionalShadowMap.length,numPointLightShadows:V.pointShadowMap.length,numSpotLightShadows:V.spotShadowMap.length,numClippingPlanes:a.numPlanes,numClipIntersection:a.numIntersection,dithering:T.dithering,shadowMapEnabled:n.shadowMap.enabled&&oe.length>0,shadowMapType:n.shadowMap.type,toneMapping:T.toneMapped?n.toneMapping:Fs,physicallyCorrectLights:n.physicallyCorrectLights,premultipliedAlpha:T.premultipliedAlpha,doubleSided:T.side===Ao,flipSided:T.side===Jn,depthPacking:T.depthPacking!==void 0?T.depthPacking:!1,index0AttributeName:T.index0AttributeName,extensionDerivatives:T.extensions&&T.extensions.derivatives,extensionFragDepth:T.extensions&&T.extensions.fragDepth,extensionDrawBuffers:T.extensions&&T.extensions.drawBuffers,extensionShaderTextureLOD:T.extensions&&T.extensions.shaderTextureLOD,rendererExtensionFragDepth:h||i.has("EXT_frag_depth"),rendererExtensionDrawBuffers:h||i.has("WEBGL_draw_buffers"),rendererExtensionShaderTextureLod:h||i.has("EXT_shader_texture_lod"),customProgramCacheKey:T.customProgramCacheKey()}}function _(T){const V=[];if(T.shaderID?V.push(T.shaderID):(V.push(T.customVertexShaderID),V.push(T.customFragmentShaderID)),T.defines!==void 0)for(const oe in T.defines)V.push(oe),V.push(T.defines[oe]);return T.isRawShaderMaterial===!1&&(x(V,T),S(V,T),V.push(n.outputEncoding)),V.push(T.customProgramCacheKey),V.join()}function x(T,V){T.push(V.precision),T.push(V.outputEncoding),T.push(V.envMapMode),T.push(V.envMapCubeUVHeight),T.push(V.combine),T.push(V.vertexUvs),T.push(V.fogExp2),T.push(V.sizeAttenuation),T.push(V.maxBones),T.push(V.morphTargetsCount),T.push(V.morphAttributeCount),T.push(V.numDirLights),T.push(V.numPointLights),T.push(V.numSpotLights),T.push(V.numHemiLights),T.push(V.numRectAreaLights),T.push(V.numDirLightShadows),T.push(V.numPointLightShadows),T.push(V.numSpotLightShadows),T.push(V.shadowMapType),T.push(V.toneMapping),T.push(V.numClippingPlanes),T.push(V.numClipIntersection)}function S(T,V){o.disableAll(),V.isWebGL2&&o.enable(0),V.supportsVertexTextures&&o.enable(1),V.instancing&&o.enable(2),V.instancingColor&&o.enable(3),V.map&&o.enable(4),V.matcap&&o.enable(5),V.envMap&&o.enable(6),V.lightMap&&o.enable(7),V.aoMap&&o.enable(8),V.emissiveMap&&o.enable(9),V.bumpMap&&o.enable(10),V.normalMap&&o.enable(11),V.objectSpaceNormalMap&&o.enable(12),V.tangentSpaceNormalMap&&o.enable(13),V.clearcoat&&o.enable(14),V.clearcoatMap&&o.enable(15),V.clearcoatRoughnessMap&&o.enable(16),V.clearcoatNormalMap&&o.enable(17),V.displacementMap&&o.enable(18),V.specularMap&&o.enable(19),V.roughnessMap&&o.enable(20),V.metalnessMap&&o.enable(21),V.gradientMap&&o.enable(22),V.alphaMap&&o.enable(23),V.alphaTest&&o.enable(24),V.vertexColors&&o.enable(25),V.vertexAlphas&&o.enable(26),V.vertexUvs&&o.enable(27),V.vertexTangents&&o.enable(28),V.uvsVertexOnly&&o.enable(29),V.fog&&o.enable(30),T.push(o.mask),o.disableAll(),V.useFog&&o.enable(0),V.flatShading&&o.enable(1),V.logarithmicDepthBuffer&&o.enable(2),V.skinning&&o.enable(3),V.useVertexTexture&&o.enable(4),V.morphTargets&&o.enable(5),V.morphNormals&&o.enable(6),V.morphColors&&o.enable(7),V.premultipliedAlpha&&o.enable(8),V.shadowMapEnabled&&o.enable(9),V.physicallyCorrectLights&&o.enable(10),V.doubleSided&&o.enable(11),V.flipSided&&o.enable(12),V.depthPacking&&o.enable(13),V.dithering&&o.enable(14),V.specularIntensityMap&&o.enable(15),V.specularColorMap&&o.enable(16),V.transmission&&o.enable(17),V.transmissionMap&&o.enable(18),V.thicknessMap&&o.enable(19),V.sheen&&o.enable(20),V.sheenColorMap&&o.enable(21),V.sheenRoughnessMap&&o.enable(22),V.decodeVideoTexture&&o.enable(23),V.opaque&&o.enable(24),T.push(o.mask)}function E(T){const V=m[T.type];let oe;if(V){const B=ms[V];oe=AK.clone(B.uniforms)}else oe=T.uniforms;return oe}function A(T,V){let oe;for(let B=0,Q=c.length;B0?i.push(v):p.transparent===!0?r.push(v):t.push(v)}function l(d,u,p,f,g,m){const v=a(d,u,p,f,g,m);p.transmission>0?i.unshift(v):p.transparent===!0?r.unshift(v):t.unshift(v)}function c(d,u){t.length>1&&t.sort(d||cQ),i.length>1&&i.sort(u||A_),r.length>1&&r.sort(u||A_)}function h(){for(let d=e,u=n.length;d=n.get(i).length?(s=new R_,n.get(i).push(s)):s=n.get(i)[r],s}function t(){n=new WeakMap}return{get:e,dispose:t}}function dQ(){const n={};return{get:function(e){if(n[e.id]!==void 0)return n[e.id];let t;switch(e.type){case"DirectionalLight":t={direction:new R,color:new it};break;case"SpotLight":t={position:new R,direction:new R,color:new it,distance:0,coneCos:0,penumbraCos:0,decay:0};break;case"PointLight":t={position:new R,color:new it,distance:0,decay:0};break;case"HemisphereLight":t={direction:new R,skyColor:new it,groundColor:new it};break;case"RectAreaLight":t={color:new it,position:new R,halfWidth:new R,halfHeight:new R};break}return n[e.id]=t,t}}}function uQ(){const n={};return{get:function(e){if(n[e.id]!==void 0)return n[e.id];let t;switch(e.type){case"DirectionalLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new Se};break;case"SpotLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new Se};break;case"PointLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new Se,shadowCameraNear:1,shadowCameraFar:1e3};break}return n[e.id]=t,t}}}let pQ=0;function fQ(n,e){return(e.castShadow?1:0)-(n.castShadow?1:0)}function gQ(n,e){const t=new dQ,i=uQ(),r={version:0,hash:{directionalLength:-1,pointLength:-1,spotLength:-1,rectAreaLength:-1,hemiLength:-1,numDirectionalShadows:-1,numPointShadows:-1,numSpotShadows:-1},ambient:[0,0,0],probe:[],directional:[],directionalShadow:[],directionalShadowMap:[],directionalShadowMatrix:[],spot:[],spotShadow:[],spotShadowMap:[],spotShadowMatrix:[],rectArea:[],rectAreaLTC1:null,rectAreaLTC2:null,point:[],pointShadow:[],pointShadowMap:[],pointShadowMatrix:[],hemi:[]};for(let h=0;h<9;h++)r.probe.push(new R);const s=new R,a=new mt,o=new mt;function l(h,d){let u=0,p=0,f=0;for(let Z=0;Z<9;Z++)r.probe[Z].set(0,0,0);let g=0,m=0,v=0,b=0,_=0,x=0,S=0,E=0;h.sort(fQ);const A=d!==!0?Math.PI:1;for(let Z=0,Y=h.length;Z0&&(e.isWebGL2||n.has("OES_texture_float_linear")===!0?(r.rectAreaLTC1=Ye.LTC_FLOAT_1,r.rectAreaLTC2=Ye.LTC_FLOAT_2):n.has("OES_texture_half_float_linear")===!0?(r.rectAreaLTC1=Ye.LTC_HALF_1,r.rectAreaLTC2=Ye.LTC_HALF_2):console.error("THREE.WebGLRenderer: Unable to use RectAreaLight. Missing WebGL extensions.")),r.ambient[0]=u,r.ambient[1]=p,r.ambient[2]=f;const z=r.hash;(z.directionalLength!==g||z.pointLength!==m||z.spotLength!==v||z.rectAreaLength!==b||z.hemiLength!==_||z.numDirectionalShadows!==x||z.numPointShadows!==S||z.numSpotShadows!==E)&&(r.directional.length=g,r.spot.length=v,r.rectArea.length=b,r.point.length=m,r.hemi.length=_,r.directionalShadow.length=x,r.directionalShadowMap.length=x,r.pointShadow.length=S,r.pointShadowMap.length=S,r.spotShadow.length=E,r.spotShadowMap.length=E,r.directionalShadowMatrix.length=x,r.pointShadowMatrix.length=S,r.spotShadowMatrix.length=E,z.directionalLength=g,z.pointLength=m,z.spotLength=v,z.rectAreaLength=b,z.hemiLength=_,z.numDirectionalShadows=x,z.numPointShadows=S,z.numSpotShadows=E,r.version=pQ++)}function c(h,d){let u=0,p=0,f=0,g=0,m=0;const v=d.matrixWorldInverse;for(let b=0,_=h.length;b<_;b++){const x=h[b];if(x.isDirectionalLight){const S=r.directional[u];S.direction.setFromMatrixPosition(x.matrixWorld),s.setFromMatrixPosition(x.target.matrixWorld),S.direction.sub(s),S.direction.transformDirection(v),u++}else if(x.isSpotLight){const S=r.spot[f];S.position.setFromMatrixPosition(x.matrixWorld),S.position.applyMatrix4(v),S.direction.setFromMatrixPosition(x.matrixWorld),s.setFromMatrixPosition(x.target.matrixWorld),S.direction.sub(s),S.direction.transformDirection(v),f++}else if(x.isRectAreaLight){const S=r.rectArea[g];S.position.setFromMatrixPosition(x.matrixWorld),S.position.applyMatrix4(v),o.identity(),a.copy(x.matrixWorld),a.premultiply(v),o.extractRotation(a),S.halfWidth.set(x.width*.5,0,0),S.halfHeight.set(0,x.height*.5,0),S.halfWidth.applyMatrix4(o),S.halfHeight.applyMatrix4(o),g++}else if(x.isPointLight){const S=r.point[p];S.position.setFromMatrixPosition(x.matrixWorld),S.position.applyMatrix4(v),p++}else if(x.isHemisphereLight){const S=r.hemi[m];S.direction.setFromMatrixPosition(x.matrixWorld),S.direction.transformDirection(v),S.direction.normalize(),m++}}}return{setup:l,setupView:c,state:r}}function O_(n,e){const t=new gQ(n,e),i=[],r=[];function s(){i.length=0,r.length=0}function a(d){i.push(d)}function o(d){r.push(d)}function l(d){t.setup(i,d)}function c(d){t.setupView(i,d)}return{init:s,state:{lightsArray:i,shadowsArray:r,lights:t},setupLights:l,setupLightsView:c,pushLight:a,pushShadow:o}}function mQ(n,e){let t=new WeakMap;function i(s,a=0){let o;return t.has(s)===!1?(o=new O_(n,e),t.set(s,[o])):a>=t.get(s).length?(o=new O_(n,e),t.get(s).push(o)):o=t.get(s)[a],o}function r(){t=new WeakMap}return{get:i,dispose:r}}class Qm extends ar{constructor(e){super(),this.type="MeshDepthMaterial",this.depthPacking=dK,this.map=null,this.alphaMap=null,this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.wireframe=!1,this.wireframeLinewidth=1,this.fog=!1,this.setValues(e)}copy(e){return super.copy(e),this.depthPacking=e.depthPacking,this.map=e.map,this.alphaMap=e.alphaMap,this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this}}Qm.prototype.isMeshDepthMaterial=!0;class ev extends ar{constructor(e){super(),this.type="MeshDistanceMaterial",this.referencePosition=new R,this.nearDistance=1,this.farDistance=1e3,this.map=null,this.alphaMap=null,this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.fog=!1,this.setValues(e)}copy(e){return super.copy(e),this.referencePosition.copy(e.referencePosition),this.nearDistance=e.nearDistance,this.farDistance=e.farDistance,this.map=e.map,this.alphaMap=e.alphaMap,this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this}}ev.prototype.isMeshDistanceMaterial=!0;const vQ=`void main() { - gl_Position = vec4( position, 1.0 ); -}`,yQ=`uniform sampler2D shadow_pass; -uniform vec2 resolution; -uniform float radius; -#include -void main() { - const float samples = float( VSM_SAMPLES ); - float mean = 0.0; - float squared_mean = 0.0; - float uvStride = samples <= 1.0 ? 0.0 : 2.0 / ( samples - 1.0 ); - float uvStart = samples <= 1.0 ? 0.0 : - 1.0; - for ( float i = 0.0; i < samples; i ++ ) { - float uvOffset = uvStart + i * uvStride; - #ifdef HORIZONTAL_PASS - vec2 distribution = unpackRGBATo2Half( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( uvOffset, 0.0 ) * radius ) / resolution ) ); - mean += distribution.x; - squared_mean += distribution.y * distribution.y + distribution.x * distribution.x; - #else - float depth = unpackRGBAToDepth( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( 0.0, uvOffset ) * radius ) / resolution ) ); - mean += depth; - squared_mean += depth * depth; - #endif - } - mean = mean / samples; - squared_mean = squared_mean / samples; - float std_dev = sqrt( squared_mean - mean * mean ); - gl_FragColor = pack2HalfToRGBA( vec2( mean, std_dev ) ); -}`;function z_(n,e,t){let i=new hp;const r=new Se,s=new Se,a=new gi,o=new Qm({depthPacking:uK}),l=new ev,c={},h=t.maxTextureSize,d={0:Jn,1:Vh,2:Ao},u=new ns({defines:{VSM_SAMPLES:8},uniforms:{shadow_pass:{value:null},resolution:{value:new Se},radius:{value:4}},vertexShader:vQ,fragmentShader:yQ}),p=u.clone();p.defines.HORIZONTAL_PASS=1;const f=new zt;f.setAttribute("position",new ki(new Float32Array([-1,-1,.5,3,-1,.5,-1,3,.5]),3));const g=new Ge(f,u),m=this;this.enabled=!1,this.autoUpdate=!0,this.needsUpdate=!1,this.type=cx,this.render=function(x,S,E){if(m.enabled===!1||m.autoUpdate===!1&&m.needsUpdate===!1||x.length===0)return;const A=n.getRenderTarget(),z=n.getActiveCubeFace(),Z=n.getActiveMipmapLevel(),Y=n.state;Y.setBlending(Va),Y.buffers.color.setClear(1,1,1,1),Y.buffers.depth.setTest(!0),Y.setScissorTest(!1);for(let T=0,V=x.length;Th||r.y>h)&&(r.x>h&&(s.x=Math.floor(h/Q.x),r.x=s.x*Q.x,B.mapSize.x=s.x),r.y>h&&(s.y=Math.floor(h/Q.y),r.y=s.y*Q.y,B.mapSize.y=s.y)),B.map===null&&!B.isPointLightShadow&&this.type===zh&&(B.map=new dn(r.x,r.y),B.map.texture.name=oe.name+".shadowMap",B.mapPass=new dn(r.x,r.y),B.camera.updateProjectionMatrix()),B.map===null){const te={minFilter:ur,magFilter:ur,format:kn};B.map=new dn(r.x,r.y,te),B.map.texture.name=oe.name+".shadowMap",B.camera.updateProjectionMatrix()}n.setRenderTarget(B.map),n.clear();const ee=B.getViewportCount();for(let te=0;te0){const V=Y.uuid,oe=S.uuid;let B=c[V];B===void 0&&(B={},c[V]=B);let Q=B[oe];Q===void 0&&(Q=Y.clone(),B[oe]=Q),Y=Q}return Y.visible=S.visible,Y.wireframe=S.wireframe,Z===zh?Y.side=S.shadowSide!==null?S.shadowSide:S.side:Y.side=S.shadowSide!==null?S.shadowSide:d[S.side],Y.alphaMap=S.alphaMap,Y.alphaTest=S.alphaTest,Y.clipShadows=S.clipShadows,Y.clippingPlanes=S.clippingPlanes,Y.clipIntersection=S.clipIntersection,Y.displacementMap=S.displacementMap,Y.displacementScale=S.displacementScale,Y.displacementBias=S.displacementBias,Y.wireframeLinewidth=S.wireframeLinewidth,Y.linewidth=S.linewidth,E.isPointLight===!0&&Y.isMeshDistanceMaterial===!0&&(Y.referencePosition.setFromMatrixPosition(E.matrixWorld),Y.nearDistance=A,Y.farDistance=z),Y}function _(x,S,E,A,z){if(x.visible===!1)return;if(x.layers.test(S.layers)&&(x.isMesh||x.isLine||x.isPoints)&&(x.castShadow||x.receiveShadow&&z===zh)&&(!x.frustumCulled||i.intersectsObject(x))){x.modelViewMatrix.multiplyMatrices(E.matrixWorldInverse,x.matrixWorld);const T=e.update(x),V=x.material;if(Array.isArray(V)){const oe=T.groups;for(let B=0,Q=oe.length;B=1):ee.indexOf("OpenGL ES")!==-1&&(Q=parseFloat(/^OpenGL ES (\d)/.exec(ee)[1]),B=Q>=2);let te=null,q={};const ne=n.getParameter(3088),ce=n.getParameter(2978),ye=new gi().fromArray(ne),J=new gi().fromArray(ce);function Re(K,De,ze){const bt=new Uint8Array(4),He=n.createTexture();n.bindTexture(K,He),n.texParameteri(K,10241,9728),n.texParameteri(K,10240,9728);for(let ht=0;htTe||G.height>Te)&&(je=Te/Math.max(G.width,G.height)),je<1||O===!0)if(typeof HTMLImageElement!="undefined"&&G instanceof HTMLImageElement||typeof HTMLCanvasElement!="undefined"&&G instanceof HTMLCanvasElement||typeof ImageBitmap!="undefined"&&G instanceof ImageBitmap){const Ke=O?Sm:Math.floor,pt=Ke(je*G.width),F=Ke(je*G.height);g===void 0&&(g=b(pt,F));const Le=fe?b(pt,F):g;return Le.width=pt,Le.height=F,Le.getContext("2d").drawImage(G,0,0,pt,F),console.warn("THREE.WebGLRenderer: Texture has been resized from ("+G.width+"x"+G.height+") to ("+pt+"x"+F+")."),Le}else return"data"in G&&console.warn("THREE.WebGLRenderer: Image in DataTexture is too big ("+G.width+"x"+G.height+")."),G;return G}function x(G){return Gx(G.width)&&Gx(G.height)}function S(G){return o?!1:G.wrapS!==Ln||G.wrapT!==Ln||G.minFilter!==ur&&G.minFilter!==Ur}function E(G,O){return G.generateMipmaps&&O&&G.minFilter!==ur&&G.minFilter!==Ur}function A(G){n.generateMipmap(G)}function z(G,O,fe,Te,je=!1){if(o===!1)return O;if(G!==null){if(n[G]!==void 0)return n[G];console.warn("THREE.WebGLRenderer: Attempt to use non-existing WebGL internal format '"+G+"'")}let Ke=O;return O===6403&&(fe===5126&&(Ke=33326),fe===5131&&(Ke=33325),fe===5121&&(Ke=33321)),O===33319&&(fe===5126&&(Ke=33328),fe===5131&&(Ke=33327),fe===5121&&(Ke=33323)),O===6408&&(fe===5126&&(Ke=34836),fe===5131&&(Ke=34842),fe===5121&&(Ke=Te===Li&&je===!1?35907:32856),fe===32819&&(Ke=32854),fe===32820&&(Ke=32855)),(Ke===33325||Ke===33326||Ke===33327||Ke===33328||Ke===34842||Ke===34836)&&e.get("EXT_color_buffer_float"),Ke}function Z(G,O,fe){return E(G,fe)===!0||G.isFramebufferTexture&&G.minFilter!==ur&&G.minFilter!==Ur?Math.log2(Math.max(O.width,O.height))+1:G.mipmaps!==void 0&&G.mipmaps.length>0?G.mipmaps.length:G.isCompressedTexture&&Array.isArray(G.image)?O.mipmaps.length:1}function Y(G){return G===ur||G===hm||G===dm?9728:9729}function T(G){const O=G.target;O.removeEventListener("dispose",T),oe(O),O.isVideoTexture&&f.delete(O)}function V(G){const O=G.target;O.removeEventListener("dispose",V),Q(O)}function oe(G){const O=i.get(G);if(O.__webglInit===void 0)return;const fe=G.source,Te=m.get(fe);if(Te){const je=Te[O.__cacheKey];je.usedTimes--,je.usedTimes===0&&B(G),Object.keys(Te).length===0&&m.delete(fe)}i.remove(G)}function B(G){const O=i.get(G);n.deleteTexture(O.__webglTexture);const fe=G.source,Te=m.get(fe);delete Te[O.__cacheKey],a.memory.textures--}function Q(G){const O=G.texture,fe=i.get(G),Te=i.get(O);if(Te.__webglTexture!==void 0&&(n.deleteTexture(Te.__webglTexture),a.memory.textures--),G.depthTexture&&G.depthTexture.dispose(),G.isWebGLCubeRenderTarget)for(let je=0;je<6;je++)n.deleteFramebuffer(fe.__webglFramebuffer[je]),fe.__webglDepthbuffer&&n.deleteRenderbuffer(fe.__webglDepthbuffer[je]);else n.deleteFramebuffer(fe.__webglFramebuffer),fe.__webglDepthbuffer&&n.deleteRenderbuffer(fe.__webglDepthbuffer),fe.__webglMultisampledFramebuffer&&n.deleteFramebuffer(fe.__webglMultisampledFramebuffer),fe.__webglColorRenderbuffer&&n.deleteRenderbuffer(fe.__webglColorRenderbuffer),fe.__webglDepthRenderbuffer&&n.deleteRenderbuffer(fe.__webglDepthRenderbuffer);if(G.isWebGLMultipleRenderTargets)for(let je=0,Ke=O.length;je=l&&console.warn("THREE.WebGLTextures: Trying to use "+G+" texture units while this GPU supports only "+l),ee+=1,G}function ne(G){const O=[];return O.push(G.wrapS),O.push(G.wrapT),O.push(G.magFilter),O.push(G.minFilter),O.push(G.anisotropy),O.push(G.internalFormat),O.push(G.format),O.push(G.type),O.push(G.generateMipmaps),O.push(G.premultiplyAlpha),O.push(G.flipY),O.push(G.unpackAlignment),O.push(G.encoding),O.join()}function ce(G,O){const fe=i.get(G);if(G.isVideoTexture&&yi(G),G.isRenderTargetTexture===!1&&G.version>0&&fe.__version!==G.version){const Te=G.image;if(Te===null)console.warn("THREE.WebGLRenderer: Texture marked for update but no image data found.");else if(Te.complete===!1)console.warn("THREE.WebGLRenderer: Texture marked for update but image is incomplete");else{xt(fe,G,O);return}}t.activeTexture(33984+O),t.bindTexture(3553,fe.__webglTexture)}function ye(G,O){const fe=i.get(G);if(G.version>0&&fe.__version!==G.version){xt(fe,G,O);return}t.activeTexture(33984+O),t.bindTexture(35866,fe.__webglTexture)}function J(G,O){const fe=i.get(G);if(G.version>0&&fe.__version!==G.version){xt(fe,G,O);return}t.activeTexture(33984+O),t.bindTexture(32879,fe.__webglTexture)}function Re(G,O){const fe=i.get(G);if(G.version>0&&fe.__version!==G.version){vt(fe,G,O);return}t.activeTexture(33984+O),t.bindTexture(34067,fe.__webglTexture)}const et={[Ru]:10497,[Ln]:33071,[Ou]:33648},nt={[ur]:9728,[hm]:9984,[dm]:9986,[Ur]:9729,[bx]:9985,[Fh]:9987};function be(G,O,fe){if(fe?(n.texParameteri(G,10242,et[O.wrapS]),n.texParameteri(G,10243,et[O.wrapT]),(G===32879||G===35866)&&n.texParameteri(G,32882,et[O.wrapR]),n.texParameteri(G,10240,nt[O.magFilter]),n.texParameteri(G,10241,nt[O.minFilter])):(n.texParameteri(G,10242,33071),n.texParameteri(G,10243,33071),(G===32879||G===35866)&&n.texParameteri(G,32882,33071),(O.wrapS!==Ln||O.wrapT!==Ln)&&console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.wrapS and Texture.wrapT should be set to THREE.ClampToEdgeWrapping."),n.texParameteri(G,10240,Y(O.magFilter)),n.texParameteri(G,10241,Y(O.minFilter)),O.minFilter!==ur&&O.minFilter!==Ur&&console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.")),e.has("EXT_texture_filter_anisotropic")===!0){const Te=e.get("EXT_texture_filter_anisotropic");if(O.type===Da&&e.has("OES_texture_float_linear")===!1||o===!1&&O.type===Ol&&e.has("OES_texture_half_float_linear")===!1)return;(O.anisotropy>1||i.get(O).__currentAnisotropy)&&(n.texParameterf(G,Te.TEXTURE_MAX_ANISOTROPY_EXT,Math.min(O.anisotropy,r.getMaxAnisotropy())),i.get(O).__currentAnisotropy=O.anisotropy)}}function Dt(G,O){let fe=!1;G.__webglInit===void 0&&(G.__webglInit=!0,O.addEventListener("dispose",T));const Te=O.source;let je=m.get(Te);je===void 0&&(je={},m.set(Te,je));const Ke=ne(O);if(Ke!==G.__cacheKey){je[Ke]===void 0&&(je[Ke]={texture:n.createTexture(),usedTimes:0},a.memory.textures++,fe=!0),je[Ke].usedTimes++;const pt=je[G.__cacheKey];pt!==void 0&&(je[G.__cacheKey].usedTimes--,pt.usedTimes===0&&B(O)),G.__cacheKey=Ke,G.__webglTexture=je[Ke].texture}return fe}function xt(G,O,fe){let Te=3553;O.isDataArrayTexture&&(Te=35866),O.isData3DTexture&&(Te=32879);const je=Dt(G,O),Ke=O.source;if(t.activeTexture(33984+fe),t.bindTexture(Te,G.__webglTexture),Ke.version!==Ke.__currentVersion||je===!0){n.pixelStorei(37440,O.flipY),n.pixelStorei(37441,O.premultiplyAlpha),n.pixelStorei(3317,O.unpackAlignment),n.pixelStorei(37443,0);const pt=S(O)&&x(O.image)===!1;let F=_(O.image,pt,!1,h);F=Xt(O,F);const Le=x(F)||o,ot=s.convert(O.format,O.encoding);let Fe=s.convert(O.type),K=z(O.internalFormat,ot,Fe,O.encoding,O.isVideoTexture);be(Te,O,Le);let De;const ze=O.mipmaps,bt=o&&O.isVideoTexture!==!0,He=G.__version===void 0,ht=Z(O,F,Le);if(O.isDepthTexture)K=6402,o?O.type===Da?K=36012:O.type===zu?K=33190:O.type===zl?K=35056:K=33189:O.type===Da&&console.error("WebGLRenderer: Floating point depth texture requires WebGL2."),O.format===Vo&&K===6402&&O.type!==Nh&&O.type!==zu&&(console.warn("THREE.WebGLRenderer: Use UnsignedShortType or UnsignedIntType for DepthFormat DepthTexture."),O.type=Nh,Fe=s.convert(O.type)),O.format===Vl&&K===6402&&(K=34041,O.type!==zl&&(console.warn("THREE.WebGLRenderer: Use UnsignedInt248Type for DepthStencilFormat DepthTexture."),O.type=zl,Fe=s.convert(O.type))),bt&&He?t.texStorage2D(3553,1,K,F.width,F.height):t.texImage2D(3553,0,K,F.width,F.height,0,ot,Fe,null);else if(O.isDataTexture)if(ze.length>0&&Le){bt&&He&&t.texStorage2D(3553,ht,K,ze[0].width,ze[0].height);for(let Be=0,st=ze.length;Be0&&Le){bt&&He&&t.texStorage2D(3553,ht,K,ze[0].width,ze[0].height);for(let Be=0,st=ze.length;Be0&&He++,t.texStorage2D(34067,He,De,F[0].width,F[0].height));for(let Be=0;Be<6;Be++)if(pt){ze?t.texSubImage2D(34069+Be,0,0,0,F[Be].width,F[Be].height,Fe,K,F[Be].data):t.texImage2D(34069+Be,0,De,F[Be].width,F[Be].height,0,Fe,K,F[Be].data);for(let st=0;st0&&ut(G)===!1){fe.__webglMultisampledFramebuffer=n.createFramebuffer(),fe.__webglColorRenderbuffer=n.createRenderbuffer(),n.bindRenderbuffer(36161,fe.__webglColorRenderbuffer);const F=s.convert(O.format,O.encoding),Le=s.convert(O.type),ot=z(O.internalFormat,F,Le,O.encoding),Fe=ct(G);n.renderbufferStorageMultisample(36161,Fe,ot,G.width,G.height),t.bindFramebuffer(36160,fe.__webglMultisampledFramebuffer),n.framebufferRenderbuffer(36160,36064,36161,fe.__webglColorRenderbuffer),n.bindRenderbuffer(36161,null),G.depthBuffer&&(fe.__webglDepthRenderbuffer=n.createRenderbuffer(),k(fe.__webglDepthRenderbuffer,G,!0)),t.bindFramebuffer(36160,null)}if(je){t.bindTexture(34067,Te.__webglTexture),be(34067,O,pt);for(let F=0;F<6;F++)w(fe.__webglFramebuffer[F],G,O,36064,34069+F);E(O,pt)&&A(34067),t.unbindTexture()}else if(Ke){const F=G.texture;for(let Le=0,ot=F.length;Le0&&ut(G)===!1){const O=G.width,fe=G.height;let Te=16384;const je=[36064],Ke=G.stencilBuffer?33306:36096;G.depthBuffer&&je.push(Ke);const pt=i.get(G),F=pt.__ignoreDepthValues!==void 0?pt.__ignoreDepthValues:!1;F===!1&&(G.depthBuffer&&(Te|=256),G.stencilBuffer&&(Te|=1024)),t.bindFramebuffer(36008,pt.__webglMultisampledFramebuffer),t.bindFramebuffer(36009,pt.__webglFramebuffer),F===!0&&(n.invalidateFramebuffer(36008,[Ke]),n.invalidateFramebuffer(36009,[Ke])),n.blitFramebuffer(0,0,O,fe,0,0,O,fe,Te,9728),p&&n.invalidateFramebuffer(36008,je),t.bindFramebuffer(36008,null),t.bindFramebuffer(36009,pt.__webglMultisampledFramebuffer)}}function ct(G){return Math.min(d,G.samples)}function ut(G){const O=i.get(G);return o&&G.samples>0&&e.has("WEBGL_multisampled_render_to_texture")===!0&&O.__useRenderToTexture!==!1}function yi(G){const O=a.render.frame;f.get(G)!==O&&(f.set(G,O),G.update())}function Xt(G,O){const fe=G.encoding,Te=G.format,je=G.type;return G.isCompressedTexture===!0||G.isVideoTexture===!0||G.format===bm||fe!==Ns&&(fe===Li?o===!1?e.has("EXT_sRGB")===!0&&Te===kn?(G.format=bm,G.minFilter=Ur,G.generateMipmaps=!1):O=No.sRGBToLinear(O):(Te!==kn||je!==zo)&&console.warn("THREE.WebGLTextures: sRGB encoded textures have to use RGBAFormat and UnsignedByteType."):console.error("THREE.WebGLTextures: Unsupported texture encoding:",fe)),O}this.allocateTextureUnit=q,this.resetTextureUnits=te,this.setTexture2D=ce,this.setTexture2DArray=ye,this.setTexture3D=J,this.setTextureCube=Re,this.rebindTextures=ae,this.setupRenderTarget=Pe,this.updateRenderTargetMipmap=Ee,this.updateMultisampleRenderTarget=yt,this.setupDepthRenderbuffer=X,this.setupFrameBufferTexture=w,this.useMultisampledRTT=ut}function _Q(n,e,t){const i=t.isWebGL2;function r(s,a=null){let o;if(s===zo)return 5121;if(s===KY)return 32819;if(s===qY)return 32820;if(s===WY)return 5120;if(s===XY)return 5122;if(s===Nh)return 5123;if(s===YY)return 5124;if(s===zu)return 5125;if(s===Da)return 5126;if(s===Ol)return i?5131:(o=e.get("OES_texture_half_float"),o!==null?o.HALF_FLOAT_OES:null);if(s===ZY)return 6406;if(s===kn)return 6408;if(s===QY)return 6409;if(s===eK)return 6410;if(s===Vo)return 6402;if(s===Vl)return 34041;if(s===tK)return 6403;if(s===JY)return console.warn("THREE.WebGLRenderer: THREE.RGBFormat has been removed. Use THREE.RGBAFormat instead. https://github.com/mrdoob/three.js/pull/23228"),6408;if(s===bm)return o=e.get("EXT_sRGB"),o!==null?o.SRGB_ALPHA_EXT:null;if(s===iK)return 36244;if(s===rK)return 33319;if(s===nK)return 33320;if(s===sK)return 36249;if(s===um||s===pm||s===fm||s===gm)if(a===Li)if(o=e.get("WEBGL_compressed_texture_s3tc_srgb"),o!==null){if(s===um)return o.COMPRESSED_SRGB_S3TC_DXT1_EXT;if(s===pm)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT;if(s===fm)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT;if(s===gm)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT}else return null;else if(o=e.get("WEBGL_compressed_texture_s3tc"),o!==null){if(s===um)return o.COMPRESSED_RGB_S3TC_DXT1_EXT;if(s===pm)return o.COMPRESSED_RGBA_S3TC_DXT1_EXT;if(s===fm)return o.COMPRESSED_RGBA_S3TC_DXT3_EXT;if(s===gm)return o.COMPRESSED_RGBA_S3TC_DXT5_EXT}else return null;if(s===xx||s===_x||s===Sx||s===wx)if(o=e.get("WEBGL_compressed_texture_pvrtc"),o!==null){if(s===xx)return o.COMPRESSED_RGB_PVRTC_4BPPV1_IMG;if(s===_x)return o.COMPRESSED_RGB_PVRTC_2BPPV1_IMG;if(s===Sx)return o.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG;if(s===wx)return o.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG}else return null;if(s===aK)return o=e.get("WEBGL_compressed_texture_etc1"),o!==null?o.COMPRESSED_RGB_ETC1_WEBGL:null;if(s===Mx||s===$x)if(o=e.get("WEBGL_compressed_texture_etc"),o!==null){if(s===Mx)return a===Li?o.COMPRESSED_SRGB8_ETC2:o.COMPRESSED_RGB8_ETC2;if(s===$x)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC:o.COMPRESSED_RGBA8_ETC2_EAC}else return null;if(s===Px||s===Tx||s===Cx||s===Ex||s===Ix||s===Lx||s===kx||s===Ax||s===Rx||s===Ox||s===zx||s===Vx||s===Dx||s===Fx)if(o=e.get("WEBGL_compressed_texture_astc"),o!==null){if(s===Px)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR:o.COMPRESSED_RGBA_ASTC_4x4_KHR;if(s===Tx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR:o.COMPRESSED_RGBA_ASTC_5x4_KHR;if(s===Cx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR:o.COMPRESSED_RGBA_ASTC_5x5_KHR;if(s===Ex)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR:o.COMPRESSED_RGBA_ASTC_6x5_KHR;if(s===Ix)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR:o.COMPRESSED_RGBA_ASTC_6x6_KHR;if(s===Lx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR:o.COMPRESSED_RGBA_ASTC_8x5_KHR;if(s===kx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR:o.COMPRESSED_RGBA_ASTC_8x6_KHR;if(s===Ax)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR:o.COMPRESSED_RGBA_ASTC_8x8_KHR;if(s===Rx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR:o.COMPRESSED_RGBA_ASTC_10x5_KHR;if(s===Ox)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR:o.COMPRESSED_RGBA_ASTC_10x6_KHR;if(s===zx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR:o.COMPRESSED_RGBA_ASTC_10x8_KHR;if(s===Vx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR:o.COMPRESSED_RGBA_ASTC_10x10_KHR;if(s===Dx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR:o.COMPRESSED_RGBA_ASTC_12x10_KHR;if(s===Fx)return a===Li?o.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR:o.COMPRESSED_RGBA_ASTC_12x12_KHR}else return null;if(s===Nx)if(o=e.get("EXT_texture_compression_bptc"),o!==null){if(s===Nx)return a===Li?o.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT:o.COMPRESSED_RGBA_BPTC_UNORM_EXT}else return null;if(s===zl)return i?34042:(o=e.get("WEBGL_depth_texture"),o!==null?o.UNSIGNED_INT_24_8_WEBGL:null)}return{convert:r}}class V_ extends Ir{constructor(e=[]){super(),this.cameras=e}}V_.prototype.isArrayCamera=!0;class Yo extends Zt{constructor(){super(),this.type="Group"}}Yo.prototype.isGroup=!0;const SQ={type:"move"};class tv{constructor(){this._targetRay=null,this._grip=null,this._hand=null}getHandSpace(){return this._hand===null&&(this._hand=new Yo,this._hand.matrixAutoUpdate=!1,this._hand.visible=!1,this._hand.joints={},this._hand.inputState={pinching:!1}),this._hand}getTargetRaySpace(){return this._targetRay===null&&(this._targetRay=new Yo,this._targetRay.matrixAutoUpdate=!1,this._targetRay.visible=!1,this._targetRay.hasLinearVelocity=!1,this._targetRay.linearVelocity=new R,this._targetRay.hasAngularVelocity=!1,this._targetRay.angularVelocity=new R),this._targetRay}getGripSpace(){return this._grip===null&&(this._grip=new Yo,this._grip.matrixAutoUpdate=!1,this._grip.visible=!1,this._grip.hasLinearVelocity=!1,this._grip.linearVelocity=new R,this._grip.hasAngularVelocity=!1,this._grip.angularVelocity=new R),this._grip}dispatchEvent(e){return this._targetRay!==null&&this._targetRay.dispatchEvent(e),this._grip!==null&&this._grip.dispatchEvent(e),this._hand!==null&&this._hand.dispatchEvent(e),this}disconnect(e){return this.dispatchEvent({type:"disconnected",data:e}),this._targetRay!==null&&(this._targetRay.visible=!1),this._grip!==null&&(this._grip.visible=!1),this._hand!==null&&(this._hand.visible=!1),this}update(e,t,i){let r=null,s=null,a=null;const o=this._targetRay,l=this._grip,c=this._hand;if(e&&t.session.visibilityState!=="visible-blurred")if(o!==null&&(r=t.getPose(e.targetRaySpace,i),r!==null&&(o.matrix.fromArray(r.transform.matrix),o.matrix.decompose(o.position,o.rotation,o.scale),r.linearVelocity?(o.hasLinearVelocity=!0,o.linearVelocity.copy(r.linearVelocity)):o.hasLinearVelocity=!1,r.angularVelocity?(o.hasAngularVelocity=!0,o.angularVelocity.copy(r.angularVelocity)):o.hasAngularVelocity=!1,this.dispatchEvent(SQ))),c&&e.hand){a=!0;for(const g of e.hand.values()){const m=t.getJointPose(g,i);if(c.joints[g.jointName]===void 0){const b=new Yo;b.matrixAutoUpdate=!1,b.visible=!1,c.joints[g.jointName]=b,c.add(b)}const v=c.joints[g.jointName];m!==null&&(v.matrix.fromArray(m.transform.matrix),v.matrix.decompose(v.position,v.rotation,v.scale),v.jointRadius=m.radius),v.visible=m!==null}const h=c.joints["index-finger-tip"],d=c.joints["thumb-tip"],u=h.position.distanceTo(d.position),p=.02,f=.005;c.inputState.pinching&&u>p+f?(c.inputState.pinching=!1,this.dispatchEvent({type:"pinchend",handedness:e.handedness,target:this})):!c.inputState.pinching&&u<=p-f&&(c.inputState.pinching=!0,this.dispatchEvent({type:"pinchstart",handedness:e.handedness,target:this}))}else l!==null&&e.gripSpace&&(s=t.getPose(e.gripSpace,i),s!==null&&(l.matrix.fromArray(s.transform.matrix),l.matrix.decompose(l.position,l.rotation,l.scale),s.linearVelocity?(l.hasLinearVelocity=!0,l.linearVelocity.copy(s.linearVelocity)):l.hasLinearVelocity=!1,s.angularVelocity?(l.hasAngularVelocity=!0,l.angularVelocity.copy(s.angularVelocity)):l.hasAngularVelocity=!1));return o!==null&&(o.visible=r!==null),l!==null&&(l.visible=s!==null),c!==null&&(c.visible=a!==null),this}}class D_ extends fr{constructor(e,t,i,r,s,a,o,l,c,h){if(h=h!==void 0?h:Vo,h!==Vo&&h!==Vl)throw new Error("DepthTexture format must be either THREE.DepthFormat or THREE.DepthStencilFormat");i===void 0&&h===Vo&&(i=Nh),i===void 0&&h===Vl&&(i=zl),super(null,r,s,a,o,l,h,i,c),this.image={width:e,height:t},this.magFilter=o!==void 0?o:ur,this.minFilter=l!==void 0?l:ur,this.flipY=!1,this.generateMipmaps=!1}}D_.prototype.isDepthTexture=!0;class wQ extends Fa{constructor(e,t){super();const i=this;let r=null,s=1,a=null,o="local-floor",l=null,c=null,h=null,d=null,u=null;const p=t.getContextAttributes();let f=null,g=null;const m=[],v=new Map,b=new Ir;b.layers.enable(1),b.viewport=new gi;const _=new Ir;_.layers.enable(2),_.viewport=new gi;const x=[b,_],S=new V_;S.layers.enable(1),S.layers.enable(2);let E=null,A=null;this.cameraAutoUpdate=!0,this.enabled=!1,this.isPresenting=!1,this.getController=function(q){let ne=m[q];return ne===void 0&&(ne=new tv,m[q]=ne),ne.getTargetRaySpace()},this.getControllerGrip=function(q){let ne=m[q];return ne===void 0&&(ne=new tv,m[q]=ne),ne.getGripSpace()},this.getHand=function(q){let ne=m[q];return ne===void 0&&(ne=new tv,m[q]=ne),ne.getHandSpace()};function z(q){const ne=v.get(q.inputSource);ne&&ne.dispatchEvent({type:q.type,data:q.inputSource})}function Z(){v.forEach(function(q,ne){q.disconnect(ne)}),v.clear(),E=null,A=null,e.setRenderTarget(f),d=null,h=null,c=null,r=null,g=null,te.stop(),i.isPresenting=!1,i.dispatchEvent({type:"sessionend"})}this.setFramebufferScaleFactor=function(q){s=q,i.isPresenting===!0&&console.warn("THREE.WebXRManager: Cannot change framebuffer scale while presenting.")},this.setReferenceSpaceType=function(q){o=q,i.isPresenting===!0&&console.warn("THREE.WebXRManager: Cannot change reference space type while presenting.")},this.getReferenceSpace=function(){return a},this.getBaseLayer=function(){return h!==null?h:d},this.getBinding=function(){return c},this.getFrame=function(){return u},this.getSession=function(){return r},this.setSession=async function(q){if(r=q,r!==null){if(f=e.getRenderTarget(),r.addEventListener("select",z),r.addEventListener("selectstart",z),r.addEventListener("selectend",z),r.addEventListener("squeeze",z),r.addEventListener("squeezestart",z),r.addEventListener("squeezeend",z),r.addEventListener("end",Z),r.addEventListener("inputsourceschange",Y),p.xrCompatible!==!0&&await t.makeXRCompatible(),r.renderState.layers===void 0||e.capabilities.isWebGL2===!1){const ne={antialias:r.renderState.layers===void 0?p.antialias:!0,alpha:p.alpha,depth:p.depth,stencil:p.stencil,framebufferScaleFactor:s};d=new XRWebGLLayer(r,t,ne),r.updateRenderState({baseLayer:d}),g=new dn(d.framebufferWidth,d.framebufferHeight,{format:kn,type:zo,encoding:e.outputEncoding})}else{let ne=null,ce=null,ye=null;p.depth&&(ye=p.stencil?35056:33190,ne=p.stencil?Vl:Vo,ce=p.stencil?zl:Nh);const J={colorFormat:e.outputEncoding===Li?35907:32856,depthFormat:ye,scaleFactor:s};c=new XRWebGLBinding(r,t),h=c.createProjectionLayer(J),r.updateRenderState({layers:[h]}),g=new dn(h.textureWidth,h.textureHeight,{format:kn,type:zo,depthTexture:new D_(h.textureWidth,h.textureHeight,ce,void 0,void 0,void 0,void 0,void 0,void 0,ne),stencilBuffer:p.stencil,encoding:e.outputEncoding,samples:p.antialias?4:0});const Re=e.properties.get(g);Re.__ignoreDepthValues=h.ignoreDepthValues}g.isXRRenderTarget=!0,this.setFoveation(1),a=await r.requestReferenceSpace(o),te.setContext(r),te.start(),i.isPresenting=!0,i.dispatchEvent({type:"sessionstart"})}};function Y(q){const ne=r.inputSources;for(let ce=0;ce0&&(g.alphaTest.value=m.alphaTest);const v=e.get(m).envMap;if(v&&(g.envMap.value=v,g.flipEnvMap.value=v.isCubeTexture&&v.isRenderTargetTexture===!1?-1:1,g.reflectivity.value=m.reflectivity,g.ior.value=m.ior,g.refractionRatio.value=m.refractionRatio),m.lightMap){g.lightMap.value=m.lightMap;const x=n.physicallyCorrectLights!==!0?Math.PI:1;g.lightMapIntensity.value=m.lightMapIntensity*x}m.aoMap&&(g.aoMap.value=m.aoMap,g.aoMapIntensity.value=m.aoMapIntensity);let b;m.map?b=m.map:m.specularMap?b=m.specularMap:m.displacementMap?b=m.displacementMap:m.normalMap?b=m.normalMap:m.bumpMap?b=m.bumpMap:m.roughnessMap?b=m.roughnessMap:m.metalnessMap?b=m.metalnessMap:m.alphaMap?b=m.alphaMap:m.emissiveMap?b=m.emissiveMap:m.clearcoatMap?b=m.clearcoatMap:m.clearcoatNormalMap?b=m.clearcoatNormalMap:m.clearcoatRoughnessMap?b=m.clearcoatRoughnessMap:m.specularIntensityMap?b=m.specularIntensityMap:m.specularColorMap?b=m.specularColorMap:m.transmissionMap?b=m.transmissionMap:m.thicknessMap?b=m.thicknessMap:m.sheenColorMap?b=m.sheenColorMap:m.sheenRoughnessMap&&(b=m.sheenRoughnessMap),b!==void 0&&(b.isWebGLRenderTarget&&(b=b.texture),b.matrixAutoUpdate===!0&&b.updateMatrix(),g.uvTransform.value.copy(b.matrix));let _;m.aoMap?_=m.aoMap:m.lightMap&&(_=m.lightMap),_!==void 0&&(_.isWebGLRenderTarget&&(_=_.texture),_.matrixAutoUpdate===!0&&_.updateMatrix(),g.uv2Transform.value.copy(_.matrix))}function s(g,m){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity}function a(g,m){g.dashSize.value=m.dashSize,g.totalSize.value=m.dashSize+m.gapSize,g.scale.value=m.scale}function o(g,m,v,b){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity,g.size.value=m.size*v,g.scale.value=b*.5,m.map&&(g.map.value=m.map),m.alphaMap&&(g.alphaMap.value=m.alphaMap),m.alphaTest>0&&(g.alphaTest.value=m.alphaTest);let _;m.map?_=m.map:m.alphaMap&&(_=m.alphaMap),_!==void 0&&(_.matrixAutoUpdate===!0&&_.updateMatrix(),g.uvTransform.value.copy(_.matrix))}function l(g,m){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity,g.rotation.value=m.rotation,m.map&&(g.map.value=m.map),m.alphaMap&&(g.alphaMap.value=m.alphaMap),m.alphaTest>0&&(g.alphaTest.value=m.alphaTest);let v;m.map?v=m.map:m.alphaMap&&(v=m.alphaMap),v!==void 0&&(v.matrixAutoUpdate===!0&&v.updateMatrix(),g.uvTransform.value.copy(v.matrix))}function c(g,m){g.specular.value.copy(m.specular),g.shininess.value=Math.max(m.shininess,1e-4)}function h(g,m){m.gradientMap&&(g.gradientMap.value=m.gradientMap)}function d(g,m){g.roughness.value=m.roughness,g.metalness.value=m.metalness,m.roughnessMap&&(g.roughnessMap.value=m.roughnessMap),m.metalnessMap&&(g.metalnessMap.value=m.metalnessMap),e.get(m).envMap&&(g.envMapIntensity.value=m.envMapIntensity)}function u(g,m,v){g.ior.value=m.ior,m.sheen>0&&(g.sheenColor.value.copy(m.sheenColor).multiplyScalar(m.sheen),g.sheenRoughness.value=m.sheenRoughness,m.sheenColorMap&&(g.sheenColorMap.value=m.sheenColorMap),m.sheenRoughnessMap&&(g.sheenRoughnessMap.value=m.sheenRoughnessMap)),m.clearcoat>0&&(g.clearcoat.value=m.clearcoat,g.clearcoatRoughness.value=m.clearcoatRoughness,m.clearcoatMap&&(g.clearcoatMap.value=m.clearcoatMap),m.clearcoatRoughnessMap&&(g.clearcoatRoughnessMap.value=m.clearcoatRoughnessMap),m.clearcoatNormalMap&&(g.clearcoatNormalScale.value.copy(m.clearcoatNormalScale),g.clearcoatNormalMap.value=m.clearcoatNormalMap,m.side===Jn&&g.clearcoatNormalScale.value.negate())),m.transmission>0&&(g.transmission.value=m.transmission,g.transmissionSamplerMap.value=v.texture,g.transmissionSamplerSize.value.set(v.width,v.height),m.transmissionMap&&(g.transmissionMap.value=m.transmissionMap),g.thickness.value=m.thickness,m.thicknessMap&&(g.thicknessMap.value=m.thicknessMap),g.attenuationDistance.value=m.attenuationDistance,g.attenuationColor.value.copy(m.attenuationColor)),g.specularIntensity.value=m.specularIntensity,g.specularColor.value.copy(m.specularColor),m.specularIntensityMap&&(g.specularIntensityMap.value=m.specularIntensityMap),m.specularColorMap&&(g.specularColorMap.value=m.specularColorMap)}function p(g,m){m.matcap&&(g.matcap.value=m.matcap)}function f(g,m){g.referencePosition.value.copy(m.referencePosition),g.nearDistance.value=m.nearDistance,g.farDistance.value=m.farDistance}return{refreshFogUniforms:t,refreshMaterialUniforms:i}}function $Q(){const n=jh("canvas");return n.style.display="block",n}function mi(n={}){const e=n.canvas!==void 0?n.canvas:$Q(),t=n.context!==void 0?n.context:null,i=n.depth!==void 0?n.depth:!0,r=n.stencil!==void 0?n.stencil:!0,s=n.antialias!==void 0?n.antialias:!1,a=n.premultipliedAlpha!==void 0?n.premultipliedAlpha:!0,o=n.preserveDrawingBuffer!==void 0?n.preserveDrawingBuffer:!1,l=n.powerPreference!==void 0?n.powerPreference:"default",c=n.failIfMajorPerformanceCaveat!==void 0?n.failIfMajorPerformanceCaveat:!1;let h;n.context!==void 0?h=t.getContextAttributes().alpha:h=n.alpha!==void 0?n.alpha:!1;let d=null,u=null;const p=[],f=[];this.domElement=e,this.debug={checkShaderErrors:!0},this.autoClear=!0,this.autoClearColor=!0,this.autoClearDepth=!0,this.autoClearStencil=!0,this.sortObjects=!0,this.clippingPlanes=[],this.localClippingEnabled=!1,this.outputEncoding=Ns,this.physicallyCorrectLights=!1,this.toneMapping=Fs,this.toneMappingExposure=1;const g=this;let m=!1,v=0,b=0,_=null,x=-1,S=null;const E=new gi,A=new gi;let z=null,Z=e.width,Y=e.height,T=1,V=null,oe=null;const B=new gi(0,0,Z,Y),Q=new gi(0,0,Z,Y);let ee=!1;const te=new hp;let q=!1,ne=!1,ce=null;const ye=new mt,J=new Se,Re=new R,et={background:null,fog:null,environment:null,overrideMaterial:null,isScene:!0};function nt(){return _===null?T:1}let be=t;function Dt(N,he){for(let pe=0;pe0?u=f[f.length-1]:u=null,p.pop(),p.length>0?d=p[p.length-1]:d=null};function tr(N,he,pe,de){if(N.visible===!1)return;if(N.layers.test(he.layers)){if(N.isGroup)pe=N.renderOrder;else if(N.isLOD)N.autoUpdate===!0&&N.update(he);else if(N.isLight)u.pushLight(N),N.castShadow&&u.pushShadow(N);else if(N.isSprite){if(!N.frustumCulled||te.intersectsSprite(N)){de&&Re.setFromMatrixPosition(N.matrixWorld).applyMatrix4(ye);const Vt=ct.update(N),Gt=N.material;Gt.visible&&d.push(N,Vt,Gt,pe,Re.z,null)}}else if((N.isMesh||N.isLine||N.isPoints)&&(N.isSkinnedMesh&&N.skeleton.frame!==k.render.frame&&(N.skeleton.update(),N.skeleton.frame=k.render.frame),!N.frustumCulled||te.intersectsObject(N))){de&&Re.setFromMatrixPosition(N.matrixWorld).applyMatrix4(ye);const Vt=ct.update(N),Gt=N.material;if(Array.isArray(Gt)){const Nt=Vt.groups;for(let hi=0,Wt=Nt.length;hi0&&$d(we,he,pe),de&&w.viewport(E.copy(de)),we.length>0&&io(we,he,pe),Lt.length>0&&io(Lt,he,pe),Vt.length>0&&io(Vt,he,pe),w.buffers.depth.setTest(!0),w.buffers.depth.setMask(!0),w.buffers.color.setMask(!0),w.setPolygonOffset(!1)}function $d(N,he,pe){const de=vt.isWebGL2;ce===null&&(ce=new dn(1,1,{generateMipmaps:!0,type:F.convert(Ol)!==null?Ol:zo,minFilter:Fh,samples:de&&s===!0?4:0})),g.getDrawingBufferSize(J),de?ce.setSize(J.x,J.y):ce.setSize(Sm(J.x),Sm(J.y));const we=g.getRenderTarget();g.setRenderTarget(ce),g.clear();const Lt=g.toneMapping;g.toneMapping=Fs,io(N,he,pe),g.toneMapping=Lt,X.updateMultisampleRenderTarget(ce),X.updateRenderTargetMipmap(ce),g.setRenderTarget(we)}function io(N,he,pe){const de=he.isScene===!0?he.overrideMaterial:null;for(let we=0,Lt=N.length;we0&&X.useMultisampledRTT(N)===!1?we=L.get(N).__webglMultisampledFramebuffer:we=hi,E.copy(N.viewport),A.copy(N.scissor),z=N.scissorTest}else E.copy(B).multiplyScalar(T).floor(),A.copy(Q).multiplyScalar(T).floor(),z=ee;if(w.bindFramebuffer(36160,we)&&vt.drawBuffers&&de&&w.drawBuffers(N,we),w.viewport(E),w.scissor(A),w.setScissorTest(z),Lt){const Nt=L.get(N.texture);be.framebufferTexture2D(36160,36064,34069+he,Nt.__webglTexture,pe)}else if(Vt){const Nt=L.get(N.texture),hi=he||0;be.framebufferTextureLayer(36160,36064,Nt.__webglTexture,pe||0,hi)}x=-1},this.readRenderTargetPixels=function(N,he,pe,de,we,Lt,Vt){if(!(N&&N.isWebGLRenderTarget)){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not THREE.WebGLRenderTarget.");return}let Gt=L.get(N).__webglFramebuffer;if(N.isWebGLCubeRenderTarget&&Vt!==void 0&&(Gt=Gt[Vt]),Gt){w.bindFramebuffer(36160,Gt);try{const Nt=N.texture,hi=Nt.format,Wt=Nt.type;if(hi!==kn&&F.convert(hi)!==be.getParameter(35739)){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in RGBA or implementation defined format.");return}const ii=Wt===Ol&&(xt.has("EXT_color_buffer_half_float")||vt.isWebGL2&&xt.has("EXT_color_buffer_float"));if(Wt!==zo&&F.convert(Wt)!==be.getParameter(35738)&&!(Wt===Da&&(vt.isWebGL2||xt.has("OES_texture_float")||xt.has("WEBGL_color_buffer_float")))&&!ii){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in UnsignedByteType or implementation defined type.");return}he>=0&&he<=N.width-de&&pe>=0&&pe<=N.height-we&&be.readPixels(he,pe,de,we,F.convert(hi),F.convert(Wt),Lt)}finally{const Nt=_!==null?L.get(_).__webglFramebuffer:null;w.bindFramebuffer(36160,Nt)}}},this.copyFramebufferToTexture=function(N,he,pe=0){if(he.isFramebufferTexture!==!0){console.error("THREE.WebGLRenderer: copyFramebufferToTexture() can only be used with FramebufferTexture.");return}const de=Math.pow(2,-pe),we=Math.floor(he.image.width*de),Lt=Math.floor(he.image.height*de);X.setTexture2D(he,0),be.copyTexSubImage2D(3553,pe,0,0,N.x,N.y,we,Lt),w.unbindTexture()},this.copyTextureToTexture=function(N,he,pe,de=0){const we=he.image.width,Lt=he.image.height,Vt=F.convert(pe.format),Gt=F.convert(pe.type);X.setTexture2D(pe,0),be.pixelStorei(37440,pe.flipY),be.pixelStorei(37441,pe.premultiplyAlpha),be.pixelStorei(3317,pe.unpackAlignment),he.isDataTexture?be.texSubImage2D(3553,de,N.x,N.y,we,Lt,Vt,Gt,he.image.data):he.isCompressedTexture?be.compressedTexSubImage2D(3553,de,N.x,N.y,he.mipmaps[0].width,he.mipmaps[0].height,Vt,he.mipmaps[0].data):be.texSubImage2D(3553,de,N.x,N.y,Vt,Gt,he.image),de===0&&pe.generateMipmaps&&be.generateMipmap(3553),w.unbindTexture()},this.copyTextureToTexture3D=function(N,he,pe,de,we=0){if(g.isWebGL1Renderer){console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2.");return}const Lt=N.max.x-N.min.x+1,Vt=N.max.y-N.min.y+1,Gt=N.max.z-N.min.z+1,Nt=F.convert(de.format),hi=F.convert(de.type);let Wt;if(de.isData3DTexture)X.setTexture3D(de,0),Wt=32879;else if(de.isDataArrayTexture)X.setTexture2DArray(de,0),Wt=35866;else{console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: only supports THREE.DataTexture3D and THREE.DataTexture2DArray.");return}be.pixelStorei(37440,de.flipY),be.pixelStorei(37441,de.premultiplyAlpha),be.pixelStorei(3317,de.unpackAlignment);const ii=be.getParameter(3314),Mi=be.getParameter(32878),kr=be.getParameter(3316),Zs=be.getParameter(3315),Ui=be.getParameter(32877),fn=pe.isCompressedTexture?pe.mipmaps[0]:pe.image;be.pixelStorei(3314,fn.width),be.pixelStorei(32878,fn.height),be.pixelStorei(3316,N.min.x),be.pixelStorei(3315,N.min.y),be.pixelStorei(32877,N.min.z),pe.isDataTexture||pe.isData3DTexture?be.texSubImage3D(Wt,we,he.x,he.y,he.z,Lt,Vt,Gt,Nt,hi,fn.data):pe.isCompressedTexture?(console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: untested support for compressed srcTexture."),be.compressedTexSubImage3D(Wt,we,he.x,he.y,he.z,Lt,Vt,Gt,Nt,fn.data)):be.texSubImage3D(Wt,we,he.x,he.y,he.z,Lt,Vt,Gt,Nt,hi,fn),be.pixelStorei(3314,ii),be.pixelStorei(32878,Mi),be.pixelStorei(3316,kr),be.pixelStorei(3315,Zs),be.pixelStorei(32877,Ui),we===0&&de.generateMipmaps&&be.generateMipmap(Wt),w.unbindTexture()},this.initTexture=function(N){X.setTexture2D(N,0),w.unbindTexture()},this.resetState=function(){v=0,b=0,_=null,w.reset(),Le.reset()},typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe",{detail:this}))}mi.prototype.isWebGLRenderer=!0;class PQ extends mi{}PQ.prototype.isWebGL1Renderer=!0;class fp{constructor(e,t=25e-5){this.name="",this.color=new it(e),this.density=t}clone(){return new fp(this.color,this.density)}toJSON(){return{type:"FogExp2",color:this.color.getHex(),density:this.density}}}fp.prototype.isFogExp2=!0;class gp{constructor(e,t=1,i=1e3){this.name="",this.color=new it(e),this.near=t,this.far=i}clone(){return new gp(this.color,this.near,this.far)}toJSON(){return{type:"Fog",color:this.color.getHex(),near:this.near,far:this.far}}}gp.prototype.isFog=!0;class Yh extends Zt{constructor(){super(),this.type="Scene",this.background=null,this.environment=null,this.fog=null,this.overrideMaterial=null,this.autoUpdate=!0,typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe",{detail:this}))}copy(e,t){return super.copy(e,t),e.background!==null&&(this.background=e.background.clone()),e.environment!==null&&(this.environment=e.environment.clone()),e.fog!==null&&(this.fog=e.fog.clone()),e.overrideMaterial!==null&&(this.overrideMaterial=e.overrideMaterial.clone()),this.autoUpdate=e.autoUpdate,this.matrixAutoUpdate=e.matrixAutoUpdate,this}toJSON(e){const t=super.toJSON(e);return this.fog!==null&&(t.object.fog=this.fog.toJSON()),t}}Yh.prototype.isScene=!0;class oc{constructor(e,t){this.array=e,this.stride=t,this.count=e!==void 0?e.length/t:0,this.usage=Bh,this.updateRange={offset:0,count:-1},this.version=0,this.uuid=Qn()}onUploadCallback(){}set needsUpdate(e){e===!0&&this.version++}setUsage(e){return this.usage=e,this}copy(e){return this.array=new e.array.constructor(e.array),this.count=e.count,this.stride=e.stride,this.usage=e.usage,this}copyAt(e,t,i){e*=this.stride,i*=t.stride;for(let r=0,s=this.stride;re.far||t.push({distance:l,point:Kh.clone(),uv:sr.getUV(Kh,mp,Zh,vp,N_,rv,B_,new Se),face:null,object:this})}copy(e){return super.copy(e),e.center!==void 0&&this.center.copy(e.center),this.material=e.material,this}}j_.prototype.isSprite=!0;function yp(n,e,t,i,r,s){dc.subVectors(n,t).addScalar(.5).multiply(i),r!==void 0?(qh.x=s*dc.x-r*dc.y,qh.y=r*dc.x+s*dc.y):qh.copy(dc),n.copy(e),n.x+=qh.x,n.y+=qh.y,n.applyMatrix4(F_)}const bp=new R,G_=new R;class TQ extends Zt{constructor(){super(),this._currentLevel=0,this.type="LOD",Object.defineProperties(this,{levels:{enumerable:!0,value:[]},isLOD:{value:!0}}),this.autoUpdate=!0}copy(e){super.copy(e,!1);const t=e.levels;for(let i=0,r=t.length;i0){let i,r;for(i=1,r=t.length;i0){bp.setFromMatrixPosition(this.matrixWorld);const r=e.ray.origin.distanceTo(bp);this.getObjectForDistance(r).raycast(e,t)}}update(e){const t=this.levels;if(t.length>1){bp.setFromMatrixPosition(e.matrixWorld),G_.setFromMatrixPosition(this.matrixWorld);const i=bp.distanceTo(G_)/e.zoom;t[0].object.visible=!0;let r,s;for(r=1,s=t.length;r=t[r].distance;r++)t[r-1].object.visible=!1,t[r].object.visible=!0;for(this._currentLevel=r-1;rl)continue;u.applyMatrix4(this.matrixWorld);const z=e.ray.origin.distanceTo(u);ze.far||t.push({distance:z,point:d.clone().applyMatrix4(this.matrixWorld),index:_,face:null,faceIndex:null,object:this})}}else{const v=Math.max(0,a.start),b=Math.min(m.count,a.start+a.count);for(let _=v,x=b-1;_l)continue;u.applyMatrix4(this.matrixWorld);const E=e.ray.origin.distanceTo(u);Ee.far||t.push({distance:E,point:d.clone().applyMatrix4(this.matrixWorld),index:_,face:null,faceIndex:null,object:this})}}}else i.isGeometry&&console.error("THREE.Line.raycast() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.")}updateMorphTargets(){const e=this.geometry;if(e.isBufferGeometry){const t=e.morphAttributes,i=Object.keys(t);if(i.length>0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Line.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead.")}}}rn.prototype.isLine=!0;const tS=new R,iS=new R;class qo extends rn{constructor(e,t){super(e,t),this.type="LineSegments"}computeLineDistances(){const e=this.geometry;if(e.isBufferGeometry)if(e.index===null){const t=e.attributes.position,i=[];for(let r=0,s=t.count;r0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Points.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead.")}}}sS.prototype.isPoints=!0;function aS(n,e,t,i,r,s,a){const o=cv.distanceSqToPoint(n);if(or.far)return;s.push({distance:c,distanceToRay:Math.sqrt(o),point:l,index:e,face:null,object:a})}}class IQ extends fr{constructor(e,t,i,r,s,a,o,l,c){super(e,t,i,r,s,a,o,l,c),this.minFilter=a!==void 0?a:Ur,this.magFilter=s!==void 0?s:Ur,this.generateMipmaps=!1;const h=this;function d(){h.needsUpdate=!0,e.requestVideoFrameCallback(d)}"requestVideoFrameCallback"in e&&e.requestVideoFrameCallback(d)}clone(){return new this.constructor(this.image).copy(this)}update(){const e=this.image;"requestVideoFrameCallback"in e===!1&&e.readyState>=e.HAVE_CURRENT_DATA&&(this.needsUpdate=!0)}}IQ.prototype.isVideoTexture=!0;class LQ extends fr{constructor(e,t,i){super({width:e,height:t}),this.format=i,this.magFilter=ur,this.minFilter=ur,this.generateMipmaps=!1,this.needsUpdate=!0}}LQ.prototype.isFramebufferTexture=!0;class kQ extends fr{constructor(e,t,i,r,s,a,o,l,c,h,d,u){super(null,a,o,l,c,h,r,s,d,u),this.image={width:t,height:i},this.mipmaps=e,this.flipY=!1,this.generateMipmaps=!1}}kQ.prototype.isCompressedTexture=!0;class AQ extends fr{constructor(e,t,i,r,s,a,o,l,c){super(e,t,i,r,s,a,o,l,c),this.needsUpdate=!0}}AQ.prototype.isCanvasTexture=!0;class On{constructor(){this.type="Curve",this.arcLengthDivisions=200}getPoint(){return console.warn("THREE.Curve: .getPoint() not implemented."),null}getPointAt(e,t){const i=this.getUtoTmapping(e);return this.getPoint(i,t)}getPoints(e=5){const t=[];for(let i=0;i<=e;i++)t.push(this.getPoint(i/e));return t}getSpacedPoints(e=5){const t=[];for(let i=0;i<=e;i++)t.push(this.getPointAt(i/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this.cacheArcLengths&&this.cacheArcLengths.length===e+1&&!this.needsUpdate)return this.cacheArcLengths;this.needsUpdate=!1;const t=[];let i,r=this.getPoint(0),s=0;t.push(0);for(let a=1;a<=e;a++)i=this.getPoint(a/e),s+=i.distanceTo(r),t.push(s),r=i;return this.cacheArcLengths=t,t}updateArcLengths(){this.needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const i=this.getLengths();let r=0;const s=i.length;let a;t?a=t:a=e*i[s-1];let o=0,l=s-1,c;for(;o<=l;)if(r=Math.floor(o+(l-o)/2),c=i[r]-a,c<0)o=r+1;else if(c>0)l=r-1;else{l=r;break}if(r=l,i[r]===a)return r/(s-1);const h=i[r],u=i[r+1]-h,p=(a-h)/u;return(r+p)/(s-1)}getTangent(e,t){let r=e-1e-4,s=e+1e-4;r<0&&(r=0),s>1&&(s=1);const a=this.getPoint(r),o=this.getPoint(s),l=t||(a.isVector2?new Se:new R);return l.copy(o).sub(a).normalize(),l}getTangentAt(e,t){const i=this.getUtoTmapping(e);return this.getTangent(i,t)}computeFrenetFrames(e,t){const i=new R,r=[],s=[],a=[],o=new R,l=new mt;for(let p=0;p<=e;p++){const f=p/e;r[p]=this.getTangentAt(f,new R)}s[0]=new R,a[0]=new R;let c=Number.MAX_VALUE;const h=Math.abs(r[0].x),d=Math.abs(r[0].y),u=Math.abs(r[0].z);h<=c&&(c=h,i.set(1,0,0)),d<=c&&(c=d,i.set(0,1,0)),u<=c&&i.set(0,0,1),o.crossVectors(r[0],i).normalize(),s[0].crossVectors(r[0],o),a[0].crossVectors(r[0],s[0]);for(let p=1;p<=e;p++){if(s[p]=s[p-1].clone(),a[p]=a[p-1].clone(),o.crossVectors(r[p-1],r[p]),o.length()>Number.EPSILON){o.normalize();const f=Math.acos(wr(r[p-1].dot(r[p]),-1,1));s[p].applyMatrix4(l.makeRotationAxis(o,f))}a[p].crossVectors(r[p],s[p])}if(t===!0){let p=Math.acos(wr(s[0].dot(s[e]),-1,1));p/=e,r[0].dot(o.crossVectors(s[0],s[e]))>0&&(p=-p);for(let f=1;f<=e;f++)s[f].applyMatrix4(l.makeRotationAxis(r[f],p*f)),a[f].crossVectors(r[f],s[f])}return{tangents:r,normals:s,binormals:a}}clone(){return new this.constructor().copy(this)}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}toJSON(){const e={metadata:{version:4.5,type:"Curve",generator:"Curve.toJSON"}};return e.arcLengthDivisions=this.arcLengthDivisions,e.type=this.type,e}fromJSON(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}}class Mp extends On{constructor(e=0,t=0,i=1,r=1,s=0,a=Math.PI*2,o=!1,l=0){super(),this.type="EllipseCurve",this.aX=e,this.aY=t,this.xRadius=i,this.yRadius=r,this.aStartAngle=s,this.aEndAngle=a,this.aClockwise=o,this.aRotation=l}getPoint(e,t){const i=t||new Se,r=Math.PI*2;let s=this.aEndAngle-this.aStartAngle;const a=Math.abs(s)r;)s-=r;s0?0:(Math.floor(Math.abs(o)/s)+1)*s:l===0&&o===s-1&&(o=s-2,l=1);let c,h;this.closed||o>0?c=r[(o-1)%s]:($p.subVectors(r[0],r[1]).add(r[0]),c=$p);const d=r[o%s],u=r[(o+1)%s];if(this.closed||o+2r.length-2?r.length-1:a+1],d=r[a>r.length-3?r.length-1:a+2];return i.set(cS(o,l.x,c.x,h.x,d.x),cS(o,l.y,c.y,h.y,d.y)),i}copy(e){super.copy(e),this.points=[];for(let t=0,i=e.points.length;t=i){const a=r[s]-i,o=this.curves[s],l=o.getLength(),c=l===0?0:1-a/l;return o.getPointAt(c,t)}s++}return null}getLength(){const e=this.getCurveLengths();return e[e.length-1]}updateArcLengths(){this.needsUpdate=!0,this.cacheLengths=null,this.getCurveLengths()}getCurveLengths(){if(this.cacheLengths&&this.cacheLengths.length===this.curves.length)return this.cacheLengths;const e=[];let t=0;for(let i=0,r=this.curves.length;i1&&!t[t.length-1].equals(t[0])&&t.push(t[0]),t}copy(e){super.copy(e),this.curves=[];for(let t=0,i=e.curves.length;t0){const d=c.getPoint(0);d.equals(this.currentPoint)||this.lineTo(d.x,d.y)}this.curves.push(c);const h=c.getPoint(1);return this.currentPoint.copy(h),this}copy(e){return super.copy(e),this.currentPoint.copy(e.currentPoint),this}toJSON(){const e=super.toJSON();return e.currentPoint=this.currentPoint.toArray(),e}fromJSON(e){return super.fromJSON(e),this.currentPoint.fromArray(e.currentPoint),this}}class id extends zt{constructor(e=[new Se(0,.5),new Se(.5,0),new Se(0,-.5)],t=12,i=0,r=Math.PI*2){super(),this.type="LatheGeometry",this.parameters={points:e,segments:t,phiStart:i,phiLength:r},t=Math.floor(t),r=wr(r,0,Math.PI*2);const s=[],a=[],o=[],l=[],c=[],h=1/t,d=new R,u=new Se,p=new R,f=new R,g=new R;let m=0,v=0;for(let b=0;b<=e.length-1;b++)switch(b){case 0:m=e[b+1].x-e[b].x,v=e[b+1].y-e[b].y,p.x=v*1,p.y=-m,p.z=v*0,g.copy(p),p.normalize(),l.push(p.x,p.y,p.z);break;case e.length-1:l.push(g.x,g.y,g.z);break;default:m=e[b+1].x-e[b].x,v=e[b+1].y-e[b].y,p.x=v*1,p.y=-m,p.z=v*0,f.copy(p),p.x+=g.x,p.y+=g.y,p.z+=g.z,p.normalize(),l.push(p.x,p.y,p.z),g.copy(f)}for(let b=0;b<=t;b++){const _=i+b*h*r,x=Math.sin(_),S=Math.cos(_);for(let E=0;E<=e.length-1;E++){d.x=e[E].x*x,d.y=e[E].y,d.z=e[E].x*S,a.push(d.x,d.y,d.z),u.x=b/t,u.y=E/(e.length-1),o.push(u.x,u.y);const A=l[3*E+0]*x,z=l[3*E+1],Z=l[3*E+0]*S;c.push(A,z,Z)}}for(let b=0;b0&&_(!0),t>0&&_(!1)),this.setIndex(h),this.setAttribute("position",new Mt(d,3)),this.setAttribute("normal",new Mt(u,3)),this.setAttribute("uv",new Mt(p,2));function b(){const x=new R,S=new R;let E=0;const A=(t-e)/i;for(let z=0;z<=s;z++){const Z=[],Y=z/s,T=Y*(t-e)+e;for(let V=0;V<=r;V++){const oe=V/r,B=oe*l+o,Q=Math.sin(B),ee=Math.cos(B);S.x=T*Q,S.y=-Y*i+m,S.z=T*ee,d.push(S.x,S.y,S.z),x.set(Q,A,ee).normalize(),u.push(x.x,x.y,x.z),p.push(oe,1-Y),Z.push(f++)}g.push(Z)}for(let z=0;z.9&&A<.1&&(_<.2&&(a[b+0]+=1),x<.2&&(a[b+2]+=1),S<.2&&(a[b+4]+=1))}}function u(b){s.push(b.x,b.y,b.z)}function p(b,_){const x=b*3;_.x=e[x+0],_.y=e[x+1],_.z=e[x+2]}function f(){const b=new R,_=new R,x=new R,S=new R,E=new Se,A=new Se,z=new Se;for(let Z=0,Y=0;Z80*t){o=c=n[0],l=h=n[1];for(let f=t;fc&&(c=d),u>h&&(h=u);p=Math.max(c-o,h-l),p=p!==0?1/p:0}return rd(s,a,t,o,l,p),a}};function dS(n,e,t,i,r){let s,a;if(r===aee(n,e,t,i)>0)for(s=e;s=e;s-=i)a=fS(s,n[s],n[s+1],a);return a&&Op(a,a.next)&&(sd(a),a=a.next),a}function qa(n,e){if(!n)return n;e||(e=n);let t=n,i;do if(i=!1,!t.steiner&&(Op(t,t.next)||ji(t.prev,t,t.next)===0)){if(sd(t),t=e=t.prev,t===t.next)break;i=!0}else t=t.next;while(i||t!==e);return e}function rd(n,e,t,i,r,s,a){if(!n)return;!a&&s&&eee(n,i,r,s);let o=n,l,c;for(;n.prev!==n.next;){if(l=n.prev,c=n.next,s?WQ(n,i,r,s):UQ(n)){e.push(l.i/t),e.push(n.i/t),e.push(c.i/t),sd(n),n=c.next,o=c.next;continue}if(n=c,n===o){a?a===1?(n=XQ(qa(n),e,t),rd(n,e,t,i,r,s,2)):a===2&&YQ(n,e,t,i,r,s):rd(qa(n),e,t,i,r,s,1);break}}}function UQ(n){const e=n.prev,t=n,i=n.next;if(ji(e,t,i)>=0)return!1;let r=n.next.next;for(;r!==n.prev;){if(fc(e.x,e.y,t.x,t.y,i.x,i.y,r.x,r.y)&&ji(r.prev,r,r.next)>=0)return!1;r=r.next}return!0}function WQ(n,e,t,i){const r=n.prev,s=n,a=n.next;if(ji(r,s,a)>=0)return!1;const o=r.xs.x?r.x>a.x?r.x:a.x:s.x>a.x?s.x:a.x,h=r.y>s.y?r.y>a.y?r.y:a.y:s.y>a.y?s.y:a.y,d=xv(o,l,e,t,i),u=xv(c,h,e,t,i);let p=n.prevZ,f=n.nextZ;for(;p&&p.z>=d&&f&&f.z<=u;){if(p!==n.prev&&p!==n.next&&fc(r.x,r.y,s.x,s.y,a.x,a.y,p.x,p.y)&&ji(p.prev,p,p.next)>=0||(p=p.prevZ,f!==n.prev&&f!==n.next&&fc(r.x,r.y,s.x,s.y,a.x,a.y,f.x,f.y)&&ji(f.prev,f,f.next)>=0))return!1;f=f.nextZ}for(;p&&p.z>=d;){if(p!==n.prev&&p!==n.next&&fc(r.x,r.y,s.x,s.y,a.x,a.y,p.x,p.y)&&ji(p.prev,p,p.next)>=0)return!1;p=p.prevZ}for(;f&&f.z<=u;){if(f!==n.prev&&f!==n.next&&fc(r.x,r.y,s.x,s.y,a.x,a.y,f.x,f.y)&&ji(f.prev,f,f.next)>=0)return!1;f=f.nextZ}return!0}function XQ(n,e,t){let i=n;do{const r=i.prev,s=i.next.next;!Op(r,s)&&uS(r,i,i.next,s)&&nd(r,s)&&nd(s,r)&&(e.push(r.i/t),e.push(i.i/t),e.push(s.i/t),sd(i),sd(i.next),i=n=s),i=i.next}while(i!==n);return qa(i)}function YQ(n,e,t,i,r,s){let a=n;do{let o=a.next.next;for(;o!==a.prev;){if(a.i!==o.i&&ree(a,o)){let l=pS(a,o);a=qa(a,a.next),l=qa(l,l.next),rd(a,e,t,i,r,s),rd(l,e,t,i,r,s);return}o=o.next}a=a.next}while(a!==n)}function KQ(n,e,t,i){const r=[];let s,a,o,l,c;for(s=0,a=e.length;s=t.next.y&&t.next.y!==t.y){const u=t.x+(r-t.y)*(t.next.x-t.x)/(t.next.y-t.y);if(u<=i&&u>s){if(s=u,u===i){if(r===t.y)return t;if(r===t.next.y)return t.next}a=t.x=t.x&&t.x>=l&&i!==t.x&&fc(ra.x||t.x===a.x&&QQ(a,t)))&&(a=t,h=d)),t=t.next;while(t!==o);return a}function QQ(n,e){return ji(n.prev,n,e.prev)<0&&ji(e.next,n,n.next)<0}function eee(n,e,t,i){let r=n;do r.z===null&&(r.z=xv(r.x,r.y,e,t,i)),r.prevZ=r.prev,r.nextZ=r.next,r=r.next;while(r!==n);r.prevZ.nextZ=null,r.prevZ=null,tee(r)}function tee(n){let e,t,i,r,s,a,o,l,c=1;do{for(t=n,n=null,s=null,a=0;t;){for(a++,i=t,o=0,e=0;e0||l>0&&i;)o!==0&&(l===0||!i||t.z<=i.z)?(r=t,t=t.nextZ,o--):(r=i,i=i.nextZ,l--),s?s.nextZ=r:n=r,r.prevZ=s,s=r;t=i}s.nextZ=null,c*=2}while(a>1);return n}function xv(n,e,t,i,r){return n=32767*(n-t)*r,e=32767*(e-i)*r,n=(n|n<<8)&16711935,n=(n|n<<4)&252645135,n=(n|n<<2)&858993459,n=(n|n<<1)&1431655765,e=(e|e<<8)&16711935,e=(e|e<<4)&252645135,e=(e|e<<2)&858993459,e=(e|e<<1)&1431655765,n|e<<1}function iee(n){let e=n,t=n;do(e.x=0&&(n-a)*(i-o)-(t-a)*(e-o)>=0&&(t-a)*(s-o)-(r-a)*(i-o)>=0}function ree(n,e){return n.next.i!==e.i&&n.prev.i!==e.i&&!nee(n,e)&&(nd(n,e)&&nd(e,n)&&see(n,e)&&(ji(n.prev,n,e.prev)||ji(n,e.prev,e))||Op(n,e)&&ji(n.prev,n,n.next)>0&&ji(e.prev,e,e.next)>0)}function ji(n,e,t){return(e.y-n.y)*(t.x-e.x)-(e.x-n.x)*(t.y-e.y)}function Op(n,e){return n.x===e.x&&n.y===e.y}function uS(n,e,t,i){const r=Vp(ji(n,e,t)),s=Vp(ji(n,e,i)),a=Vp(ji(t,i,n)),o=Vp(ji(t,i,e));return!!(r!==s&&a!==o||r===0&&zp(n,t,e)||s===0&&zp(n,i,e)||a===0&&zp(t,n,i)||o===0&&zp(t,e,i))}function zp(n,e,t){return e.x<=Math.max(n.x,t.x)&&e.x>=Math.min(n.x,t.x)&&e.y<=Math.max(n.y,t.y)&&e.y>=Math.min(n.y,t.y)}function Vp(n){return n>0?1:n<0?-1:0}function nee(n,e){let t=n;do{if(t.i!==n.i&&t.next.i!==n.i&&t.i!==e.i&&t.next.i!==e.i&&uS(t,t.next,n,e))return!0;t=t.next}while(t!==n);return!1}function nd(n,e){return ji(n.prev,n,n.next)<0?ji(n,e,n.next)>=0&&ji(n,n.prev,e)>=0:ji(n,e,n.prev)<0||ji(n,n.next,e)<0}function see(n,e){let t=n,i=!1;const r=(n.x+e.x)/2,s=(n.y+e.y)/2;do t.y>s!=t.next.y>s&&t.next.y!==t.y&&r<(t.next.x-t.x)*(s-t.y)/(t.next.y-t.y)+t.x&&(i=!i),t=t.next;while(t!==n);return i}function pS(n,e){const t=new _v(n.i,n.x,n.y),i=new _v(e.i,e.x,e.y),r=n.next,s=e.prev;return n.next=e,e.prev=n,t.next=r,r.prev=t,i.next=t,t.prev=i,s.next=i,i.prev=s,i}function fS(n,e,t,i){const r=new _v(n,e,t);return i?(r.next=i.next,r.prev=i,i.next.prev=r,i.next=r):(r.prev=r,r.next=r),r}function sd(n){n.next.prev=n.prev,n.prev.next=n.next,n.prevZ&&(n.prevZ.nextZ=n.nextZ),n.nextZ&&(n.nextZ.prevZ=n.prevZ)}function _v(n,e,t){this.i=n,this.x=e,this.y=t,this.prev=null,this.next=null,this.z=null,this.prevZ=null,this.nextZ=null,this.steiner=!1}function aee(n,e,t,i){let r=0;for(let s=e,a=t-i;s2&&n[e-1].equals(n[0])&&n.pop()}function mS(n,e){for(let t=0;tNumber.EPSILON){const fe=Math.sqrt(G),Te=Math.sqrt(yi*yi+Xt*Xt),je=X.x-ut/fe,Ke=X.y+ct/fe,pt=ae.x-Xt/Te,F=ae.y+yi/Te,Le=((pt-je)*Xt-(F-Ke)*yi)/(ct*Xt-ut*yi);Pe=je+ct*Le-L.x,Ee=Ke+ut*Le-L.y;const ot=Pe*Pe+Ee*Ee;if(ot<=2)return new Se(Pe,Ee);yt=Math.sqrt(ot/2)}else{let fe=!1;ct>Number.EPSILON?yi>Number.EPSILON&&(fe=!0):ct<-Number.EPSILON?yi<-Number.EPSILON&&(fe=!0):Math.sign(ut)===Math.sign(Xt)&&(fe=!0),fe?(Pe=-ut,Ee=ct,yt=Math.sqrt(G)):(Pe=ct,Ee=ut,yt=Math.sqrt(G/2))}return new Se(Pe/yt,Ee/yt)}const ne=[];for(let L=0,X=B.length,ae=X-1,Pe=L+1;L=0;L--){const X=L/m,ae=p*Math.cos(X*Math.PI/2),Pe=f*Math.sin(X*Math.PI/2)+g;for(let Ee=0,yt=B.length;Ee=0;){const Pe=ae;let Ee=ae-1;Ee<0&&(Ee=L.length-1);for(let yt=0,ct=h+m*2;yt0)&&p.push(_,x,E),(v!==i-1||l0!=e>0&&this.version++,this._sheen=e}get clearcoat(){return this._clearcoat}set clearcoat(e){this._clearcoat>0!=e>0&&this.version++,this._clearcoat=e}get transmission(){return this._transmission}set transmission(e){this._transmission>0!=e>0&&this.version++,this._transmission=e}copy(e){return super.copy(e),this.defines={STANDARD:"",PHYSICAL:""},this.clearcoat=e.clearcoat,this.clearcoatMap=e.clearcoatMap,this.clearcoatRoughness=e.clearcoatRoughness,this.clearcoatRoughnessMap=e.clearcoatRoughnessMap,this.clearcoatNormalMap=e.clearcoatNormalMap,this.clearcoatNormalScale.copy(e.clearcoatNormalScale),this.ior=e.ior,this.sheen=e.sheen,this.sheenColor.copy(e.sheenColor),this.sheenColorMap=e.sheenColorMap,this.sheenRoughness=e.sheenRoughness,this.sheenRoughnessMap=e.sheenRoughnessMap,this.transmission=e.transmission,this.transmissionMap=e.transmissionMap,this.thickness=e.thickness,this.thicknessMap=e.thicknessMap,this.attenuationDistance=e.attenuationDistance,this.attenuationColor.copy(e.attenuationColor),this.specularIntensity=e.specularIntensity,this.specularIntensityMap=e.specularIntensityMap,this.specularColor.copy(e.specularColor),this.specularColorMap=e.specularColorMap,this}}_S.prototype.isMeshPhysicalMaterial=!0;class SS extends ar{constructor(e){super(),this.type="MeshPhongMaterial",this.color=new it(16777215),this.specular=new it(1118481),this.shininess=30,this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new it(0),this.emissiveIntensity=1,this.emissiveMap=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=Nl,this.normalScale=new Se(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=Lu,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.specular.copy(e.specular),this.shininess=e.shininess,this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this.flatShading=e.flatShading,this}}SS.prototype.isMeshPhongMaterial=!0;class wS extends ar{constructor(e){super(),this.defines={TOON:""},this.type="MeshToonMaterial",this.color=new it(16777215),this.map=null,this.gradientMap=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new it(0),this.emissiveIntensity=1,this.emissiveMap=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=Nl,this.normalScale=new Se(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.alphaMap=null,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.gradientMap=e.gradientMap,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.alphaMap=e.alphaMap,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}wS.prototype.isMeshToonMaterial=!0;class MS extends ar{constructor(e){super(),this.type="MeshNormalMaterial",this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=Nl,this.normalScale=new Se(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.wireframe=!1,this.wireframeLinewidth=1,this.fog=!1,this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.flatShading=e.flatShading,this}}MS.prototype.isMeshNormalMaterial=!0;class $S extends ar{constructor(e){super(),this.type="MeshLambertMaterial",this.color=new it(16777215),this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new it(0),this.emissiveIntensity=1,this.emissiveMap=null,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=Lu,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}$S.prototype.isMeshLambertMaterial=!0;class PS extends ar{constructor(e){super(),this.defines={MATCAP:""},this.type="MeshMatcapMaterial",this.color=new it(16777215),this.matcap=null,this.map=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=Nl,this.normalScale=new Se(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.alphaMap=null,this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.defines={MATCAP:""},this.color.copy(e.color),this.matcap=e.matcap,this.map=e.map,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.alphaMap=e.alphaMap,this.flatShading=e.flatShading,this}}PS.prototype.isMeshMatcapMaterial=!0;class TS extends ss{constructor(e){super(),this.type="LineDashedMaterial",this.scale=1,this.dashSize=3,this.gapSize=1,this.setValues(e)}copy(e){return super.copy(e),this.scale=e.scale,this.dashSize=e.dashSize,this.gapSize=e.gapSize,this}}TS.prototype.isLineDashedMaterial=!0;const dee={ShadowMaterial:bS,SpriteMaterial:iv,RawShaderMaterial:xS,ShaderMaterial:ns,PointsMaterial:lv,MeshPhysicalMaterial:_S,MeshStandardMaterial:Sv,MeshPhongMaterial:SS,MeshToonMaterial:wS,MeshNormalMaterial:MS,MeshLambertMaterial:$S,MeshDepthMaterial:Qm,MeshDistanceMaterial:ev,MeshBasicMaterial:gs,MeshMatcapMaterial:PS,LineDashedMaterial:TS,LineBasicMaterial:ss,Material:ar};ar.fromType=function(n){return new dee[n]};const Ai={arraySlice:function(n,e,t){return Ai.isTypedArray(n)?new n.constructor(n.subarray(e,t!==void 0?t:n.length)):n.slice(e,t)},convertArray:function(n,e,t){return!n||!t&&n.constructor===e?n:typeof e.BYTES_PER_ELEMENT=="number"?new e(n):Array.prototype.slice.call(n)},isTypedArray:function(n){return ArrayBuffer.isView(n)&&!(n instanceof DataView)},getKeyframeOrder:function(n){function e(r,s){return n[r]-n[s]}const t=n.length,i=new Array(t);for(let r=0;r!==t;++r)i[r]=r;return i.sort(e),i},sortedArray:function(n,e,t){const i=n.length,r=new n.constructor(i);for(let s=0,a=0;a!==i;++s){const o=t[s]*e;for(let l=0;l!==e;++l)r[a++]=n[o+l]}return r},flattenJSON:function(n,e,t,i){let r=1,s=n[0];for(;s!==void 0&&s[i]===void 0;)s=n[r++];if(s===void 0)return;let a=s[i];if(a!==void 0)if(Array.isArray(a))do a=s[i],a!==void 0&&(e.push(s.time),t.push.apply(t,a)),s=n[r++];while(s!==void 0);else if(a.toArray!==void 0)do a=s[i],a!==void 0&&(e.push(s.time),a.toArray(t,t.length)),s=n[r++];while(s!==void 0);else do a=s[i],a!==void 0&&(e.push(s.time),t.push(a)),s=n[r++];while(s!==void 0)},subclip:function(n,e,t,i,r=30){const s=n.clone();s.name=e;const a=[];for(let l=0;l=i)){d.push(c.times[p]);for(let g=0;gs.tracks[l].times[0]&&(o=s.tracks[l].times[0]);for(let l=0;l=o.times[f]){const v=f*d+h,b=v+d-h;g=Ai.arraySlice(o.values,v,b)}else{const v=o.createInterpolant(),b=h,_=d-h;v.evaluate(s),g=Ai.arraySlice(v.resultBuffer,b,_)}l==="quaternion"&&new Pi().fromArray(g).normalize().conjugate().toArray(g);const m=c.times.length;for(let v=0;v=s)){const o=t[1];e=s)break t}a=i,i=0;break i}break e}for(;i>>1;et;)--a;if(++a,s!==0||a!==r){s>=a&&(a=Math.max(a,1),s=a-1);const o=this.getValueSize();this.times=Ai.arraySlice(i,s,a),this.values=Ai.arraySlice(this.values,s*o,a*o)}return this}validate(){let e=!0;const t=this.getValueSize();t-Math.floor(t)!==0&&(console.error("THREE.KeyframeTrack: Invalid value size in track.",this),e=!1);const i=this.times,r=this.values,s=i.length;s===0&&(console.error("THREE.KeyframeTrack: Track is empty.",this),e=!1);let a=null;for(let o=0;o!==s;o++){const l=i[o];if(typeof l=="number"&&isNaN(l)){console.error("THREE.KeyframeTrack: Time is not a valid number.",this,o,l),e=!1;break}if(a!==null&&a>l){console.error("THREE.KeyframeTrack: Out of order keys.",this,o,l,a),e=!1;break}a=l}if(r!==void 0&&Ai.isTypedArray(r))for(let o=0,l=r.length;o!==l;++o){const c=r[o];if(isNaN(c)){console.error("THREE.KeyframeTrack: Value is not a valid number.",this,o,c),e=!1;break}}return e}optimize(){const e=Ai.arraySlice(this.times),t=Ai.arraySlice(this.values),i=this.getValueSize(),r=this.getInterpolation()===mm,s=e.length-1;let a=1;for(let o=1;o0){e[a]=e[s];for(let o=s*i,l=a*i,c=0;c!==i;++c)t[l+c]=t[o+c];++a}return a!==e.length?(this.times=Ai.arraySlice(e,0,a),this.values=Ai.arraySlice(t,0,a*i)):(this.times=e,this.values=t),this}clone(){const e=Ai.arraySlice(this.times,0),t=Ai.arraySlice(this.values,0),i=this.constructor,r=new i(this.name,e,t);return r.createInterpolant=this.createInterpolant,r}}vs.prototype.TimeBufferType=Float32Array,vs.prototype.ValueBufferType=Float32Array,vs.prototype.DefaultInterpolation=Du;class gc extends vs{}gc.prototype.ValueTypeName="bool",gc.prototype.ValueBufferType=Array,gc.prototype.DefaultInterpolation=Vu,gc.prototype.InterpolantFactoryMethodLinear=void 0,gc.prototype.InterpolantFactoryMethodSmooth=void 0;class ES extends vs{}ES.prototype.ValueTypeName="color";class Gp extends vs{}Gp.prototype.ValueTypeName="number";class fee extends Qa{constructor(e,t,i,r){super(e,t,i,r)}interpolate_(e,t,i,r){const s=this.resultBuffer,a=this.sampleValues,o=this.valueSize,l=(i-t)/(r-t);let c=e*o;for(let h=c+o;c!==h;c+=4)Pi.slerpFlat(s,0,a,c-o,a,c,l);return s}}class od extends vs{InterpolantFactoryMethodLinear(e){return new fee(this.times,this.values,this.getValueSize(),e)}}od.prototype.ValueTypeName="quaternion",od.prototype.DefaultInterpolation=Du,od.prototype.InterpolantFactoryMethodSmooth=void 0;class mc extends vs{}mc.prototype.ValueTypeName="string",mc.prototype.ValueBufferType=Array,mc.prototype.DefaultInterpolation=Vu,mc.prototype.InterpolantFactoryMethodLinear=void 0,mc.prototype.InterpolantFactoryMethodSmooth=void 0;class Hp extends vs{}Hp.prototype.ValueTypeName="vector";class wv{constructor(e,t=-1,i,r=vm){this.name=e,this.tracks=i,this.duration=t,this.blendMode=r,this.uuid=Qn(),this.duration<0&&this.resetDuration()}static parse(e){const t=[],i=e.tracks,r=1/(e.fps||1);for(let a=0,o=i.length;a!==o;++a)t.push(mee(i[a]).scale(r));const s=new this(e.name,e.duration,t,e.blendMode);return s.uuid=e.uuid,s}static toJSON(e){const t=[],i=e.tracks,r={name:e.name,duration:e.duration,tracks:t,uuid:e.uuid,blendMode:e.blendMode};for(let s=0,a=i.length;s!==a;++s)t.push(vs.toJSON(i[s]));return r}static CreateFromMorphTargetSequence(e,t,i,r){const s=t.length,a=[];for(let o=0;o1){const d=h[1];let u=r[d];u||(r[d]=u=[]),u.push(c)}}const a=[];for(const o in r)a.push(this.CreateFromMorphTargetSequence(o,r[o],t,i));return a}static parseAnimation(e,t){if(!e)return console.error("THREE.AnimationClip: No animation in JSONLoader data."),null;const i=function(d,u,p,f,g){if(p.length!==0){const m=[],v=[];Ai.flattenJSON(p,m,v,f),m.length!==0&&g.push(new d(u,m,v))}},r=[],s=e.name||"default",a=e.fps||30,o=e.blendMode;let l=e.length||-1;const c=e.hierarchy||[];for(let d=0;d{t&&t(s),this.manager.itemEnd(e)},0),s;if(qs[e]!==void 0){qs[e].push({onLoad:t,onProgress:i,onError:r});return}qs[e]=[],qs[e].push({onLoad:t,onProgress:i,onError:r});const a=new Request(e,{headers:new Headers(this.requestHeader),credentials:this.withCredentials?"include":"same-origin"}),o=this.mimeType,l=this.responseType;fetch(a).then(c=>{if(c.status===200||c.status===0){if(c.status===0&&console.warn("THREE.FileLoader: HTTP Status 0 received."),typeof ReadableStream=="undefined"||c.body===void 0||c.body.getReader===void 0)return c;const h=qs[e],d=c.body.getReader(),u=c.headers.get("Content-Length"),p=u?parseInt(u):0,f=p!==0;let g=0;const m=new ReadableStream({start(v){b();function b(){d.read().then(({done:_,value:x})=>{if(_)v.close();else{g+=x.byteLength;const S=new ProgressEvent("progress",{lengthComputable:f,loaded:g,total:p});for(let E=0,A=h.length;E{switch(l){case"arraybuffer":return c.arrayBuffer();case"blob":return c.blob();case"document":return c.text().then(h=>new DOMParser().parseFromString(h,o));case"json":return c.json();default:if(o===void 0)return c.text();{const d=/charset="?([^;"\s]*)"?/i.exec(o),u=d&&d[1]?d[1].toLowerCase():void 0,p=new TextDecoder(u);return c.arrayBuffer().then(f=>p.decode(f))}}}).then(c=>{vc.add(e,c);const h=qs[e];delete qs[e];for(let d=0,u=h.length;d{const h=qs[e];if(h===void 0)throw this.manager.itemError(e),c;delete qs[e];for(let d=0,u=h.length;d{this.manager.itemEnd(e)}),this.manager.itemStart(e)}setResponseType(e){return this.responseType=e,this}setMimeType(e){return this.mimeType=e,this}}class Up extends as{constructor(e){super(e)}load(e,t,i,r){this.path!==void 0&&(e=this.path+e),e=this.manager.resolveURL(e);const s=this,a=vc.get(e);if(a!==void 0)return s.manager.itemStart(e),setTimeout(function(){t&&t(a),s.manager.itemEnd(e)},0),a;const o=jh("img");function l(){h(),vc.add(e,this),t&&t(this),s.manager.itemEnd(e)}function c(d){h(),r&&r(d),s.manager.itemError(e),s.manager.itemEnd(e)}function h(){o.removeEventListener("load",l,!1),o.removeEventListener("error",c,!1)}return o.addEventListener("load",l,!1),o.addEventListener("error",c,!1),e.slice(0,5)!=="data:"&&this.crossOrigin!==void 0&&(o.crossOrigin=this.crossOrigin),s.manager.itemStart(e),o.src=e,o}}class yee extends as{constructor(e){super(e)}load(e,t,i,r){const s=new Wh,a=new Up(this.manager);a.setCrossOrigin(this.crossOrigin),a.setPath(this.path);let o=0;function l(c){a.load(e[c],function(h){s.images[c]=h,o++,o===6&&(s.needsUpdate=!0,t&&t(s))},void 0,r)}for(let c=0;c0:r.vertexColors=e.vertexColors),e.uniforms!==void 0)for(const s in e.uniforms){const a=e.uniforms[s];switch(r.uniforms[s]={},a.type){case"t":r.uniforms[s].value=i(a.value);break;case"c":r.uniforms[s].value=new it().setHex(a.value);break;case"v2":r.uniforms[s].value=new Se().fromArray(a.value);break;case"v3":r.uniforms[s].value=new R().fromArray(a.value);break;case"v4":r.uniforms[s].value=new gi().fromArray(a.value);break;case"m3":r.uniforms[s].value=new Mr().fromArray(a.value);break;case"m4":r.uniforms[s].value=new mt().fromArray(a.value);break;default:r.uniforms[s].value=a.value}}if(e.defines!==void 0&&(r.defines=e.defines),e.vertexShader!==void 0&&(r.vertexShader=e.vertexShader),e.fragmentShader!==void 0&&(r.fragmentShader=e.fragmentShader),e.extensions!==void 0)for(const s in e.extensions)r.extensions[s]=e.extensions[s];if(e.shading!==void 0&&(r.flatShading=e.shading===1),e.size!==void 0&&(r.size=e.size),e.sizeAttenuation!==void 0&&(r.sizeAttenuation=e.sizeAttenuation),e.map!==void 0&&(r.map=i(e.map)),e.matcap!==void 0&&(r.matcap=i(e.matcap)),e.alphaMap!==void 0&&(r.alphaMap=i(e.alphaMap)),e.bumpMap!==void 0&&(r.bumpMap=i(e.bumpMap)),e.bumpScale!==void 0&&(r.bumpScale=e.bumpScale),e.normalMap!==void 0&&(r.normalMap=i(e.normalMap)),e.normalMapType!==void 0&&(r.normalMapType=e.normalMapType),e.normalScale!==void 0){let s=e.normalScale;Array.isArray(s)===!1&&(s=[s,s]),r.normalScale=new Se().fromArray(s)}return e.displacementMap!==void 0&&(r.displacementMap=i(e.displacementMap)),e.displacementScale!==void 0&&(r.displacementScale=e.displacementScale),e.displacementBias!==void 0&&(r.displacementBias=e.displacementBias),e.roughnessMap!==void 0&&(r.roughnessMap=i(e.roughnessMap)),e.metalnessMap!==void 0&&(r.metalnessMap=i(e.metalnessMap)),e.emissiveMap!==void 0&&(r.emissiveMap=i(e.emissiveMap)),e.emissiveIntensity!==void 0&&(r.emissiveIntensity=e.emissiveIntensity),e.specularMap!==void 0&&(r.specularMap=i(e.specularMap)),e.specularIntensityMap!==void 0&&(r.specularIntensityMap=i(e.specularIntensityMap)),e.specularColorMap!==void 0&&(r.specularColorMap=i(e.specularColorMap)),e.envMap!==void 0&&(r.envMap=i(e.envMap)),e.envMapIntensity!==void 0&&(r.envMapIntensity=e.envMapIntensity),e.reflectivity!==void 0&&(r.reflectivity=e.reflectivity),e.refractionRatio!==void 0&&(r.refractionRatio=e.refractionRatio),e.lightMap!==void 0&&(r.lightMap=i(e.lightMap)),e.lightMapIntensity!==void 0&&(r.lightMapIntensity=e.lightMapIntensity),e.aoMap!==void 0&&(r.aoMap=i(e.aoMap)),e.aoMapIntensity!==void 0&&(r.aoMapIntensity=e.aoMapIntensity),e.gradientMap!==void 0&&(r.gradientMap=i(e.gradientMap)),e.clearcoatMap!==void 0&&(r.clearcoatMap=i(e.clearcoatMap)),e.clearcoatRoughnessMap!==void 0&&(r.clearcoatRoughnessMap=i(e.clearcoatRoughnessMap)),e.clearcoatNormalMap!==void 0&&(r.clearcoatNormalMap=i(e.clearcoatNormalMap)),e.clearcoatNormalScale!==void 0&&(r.clearcoatNormalScale=new Se().fromArray(e.clearcoatNormalScale)),e.transmissionMap!==void 0&&(r.transmissionMap=i(e.transmissionMap)),e.thicknessMap!==void 0&&(r.thicknessMap=i(e.thicknessMap)),e.sheenColorMap!==void 0&&(r.sheenColorMap=i(e.sheenColorMap)),e.sheenRoughnessMap!==void 0&&(r.sheenRoughnessMap=i(e.sheenRoughnessMap)),r}setTextures(e){return this.textures=e,this}}class Tv{static decodeText(e){if(typeof TextDecoder!="undefined")return new TextDecoder().decode(e);let t="";for(let i=0,r=e.length;i0){const l=new IS(t);s=new Up(l),s.setCrossOrigin(this.crossOrigin);for(let c=0,h=e.length;c0){r=new Up(this.manager),r.setCrossOrigin(this.crossOrigin);for(let a=0,o=e.length;a0){this.source.connect(this.filters[0]);for(let e=1,t=this.filters.length;e0){this.source.disconnect(this.filters[0]);for(let e=1,t=this.filters.length;e0&&this._mixBufferRegionAdditive(i,r,this._addIndex*t,1,t);for(let l=t,c=t+t;l!==c;++l)if(i[l]!==i[l+t]){o.setValue(i,r);break}}saveOriginalState(){const e=this.binding,t=this.buffer,i=this.valueSize,r=i*this._origIndex;e.getValue(t,r);for(let s=i,a=r;s!==a;++s)t[s]=t[r+s%i];this._setIdentity(),this.cumulativeWeight=0,this.cumulativeWeightAdditive=0}restoreOriginalState(){const e=this.valueSize*3;this.binding.setValue(this.buffer,e)}_setAdditiveIdentityNumeric(){const e=this._addIndex*this.valueSize,t=e+this.valueSize;for(let i=e;i=.5)for(let a=0;a!==s;++a)e[t+a]=e[i+a]}_slerp(e,t,i,r){Pi.slerpFlat(e,t,e,t,e,i,r)}_slerpAdditive(e,t,i,r,s){const a=this._workIndex*s;Pi.multiplyQuaternionsFlat(e,a,e,t,e,i),Pi.slerpFlat(e,t,e,t,e,a,r)}_lerp(e,t,i,r,s){const a=1-r;for(let o=0;o!==s;++o){const l=t+o;e[l]=e[l]*a+e[i+o]*r}}_lerpAdditive(e,t,i,r,s){for(let a=0;a!==s;++a){const o=t+a;e[o]=e[o]+e[i+a]*r}}}const Cv="\\[\\]\\.:\\/",Lee=new RegExp("["+Cv+"]","g"),Ev="[^"+Cv+"]",kee="[^"+Cv.replace("\\.","")+"]",Aee=/((?:WC+[\/:])*)/.source.replace("WC",Ev),Ree=/(WCOD+)?/.source.replace("WCOD",kee),Oee=/(?:\.(WC+)(?:\[(.+)\])?)?/.source.replace("WC",Ev),zee=/\.(WC+)(?:\[(.+)\])?/.source.replace("WC",Ev),Vee=new RegExp("^"+Aee+Ree+Oee+zee+"$"),Dee=["material","materials","bones"];class Fee{constructor(e,t,i){const r=i||vi.parseTrackName(t);this._targetGroup=e,this._bindings=e.subscribe_(t,r)}getValue(e,t){this.bind();const i=this._targetGroup.nCachedObjects_,r=this._bindings[i];r!==void 0&&r.getValue(e,t)}setValue(e,t){const i=this._bindings;for(let r=this._targetGroup.nCachedObjects_,s=i.length;r!==s;++r)i[r].setValue(e,t)}bind(){const e=this._bindings;for(let t=this._targetGroup.nCachedObjects_,i=e.length;t!==i;++t)e[t].bind()}unbind(){const e=this._bindings;for(let t=this._targetGroup.nCachedObjects_,i=e.length;t!==i;++t)e[t].unbind()}}class vi{constructor(e,t,i){this.path=t,this.parsedPath=i||vi.parseTrackName(t),this.node=vi.findNode(e,this.parsedPath.nodeName)||e,this.rootNode=e,this.getValue=this._getValue_unbound,this.setValue=this._setValue_unbound}static create(e,t,i){return e&&e.isAnimationObjectGroup?new vi.Composite(e,t,i):new vi(e,t,i)}static sanitizeNodeName(e){return e.replace(/\s/g,"_").replace(Lee,"")}static parseTrackName(e){const t=Vee.exec(e);if(t===null)throw new Error("PropertyBinding: Cannot parse trackName: "+e);const i={nodeName:t[2],objectName:t[3],objectIndex:t[4],propertyName:t[5],propertyIndex:t[6]},r=i.nodeName&&i.nodeName.lastIndexOf(".");if(r!==void 0&&r!==-1){const s=i.nodeName.substring(r+1);Dee.indexOf(s)!==-1&&(i.nodeName=i.nodeName.substring(0,r),i.objectName=s)}if(i.propertyName===null||i.propertyName.length===0)throw new Error("PropertyBinding: can not parse propertyName from trackName: "+e);return i}static findNode(e,t){if(t===void 0||t===""||t==="."||t===-1||t===e.name||t===e.uuid)return e;if(e.skeleton){const i=e.skeleton.getBoneByName(t);if(i!==void 0)return i}if(e.children){const i=function(s){for(let a=0;a0){const l=this._interpolants,c=this._propertyBindings;switch(this.blendMode){case Bx:for(let h=0,d=l.length;h!==d;++h)l[h].evaluate(a),c[h].accumulateAdditive(o);break;case vm:default:for(let h=0,d=l.length;h!==d;++h)l[h].evaluate(a),c[h].accumulate(r,o)}}}_updateWeight(e){let t=0;if(this.enabled){t=this.weight;const i=this._weightInterpolant;if(i!==null){const r=i.evaluate(e)[0];t*=r,e>i.parameterPositions[1]&&(this.stopFading(),r===0&&(this.enabled=!1))}}return this._effectiveWeight=t,t}_updateTimeScale(e){let t=0;if(!this.paused){t=this.timeScale;const i=this._timeScaleInterpolant;i!==null&&(t*=i.evaluate(e)[0],e>i.parameterPositions[1]&&(this.stopWarping(),t===0?this.paused=!0:this.timeScale=t))}return this._effectiveTimeScale=t,t}_updateTime(e){const t=this._clip.duration,i=this.loop;let r=this.time+e,s=this._loopCount;const a=i===cK;if(e===0)return s===-1?r:a&&(s&1)===1?t-r:r;if(i===oK){s===-1&&(this._loopCount=0,this._setEndings(!0,!0,!1));e:{if(r>=t)r=t;else if(r<0)r=0;else{this.time=r;break e}this.clampWhenFinished?this.paused=!0:this.enabled=!1,this.time=r,this._mixer.dispatchEvent({type:"finished",action:this,direction:e<0?-1:1})}}else{if(s===-1&&(e>=0?(s=0,this._setEndings(!0,this.repetitions===0,a)):this._setEndings(this.repetitions===0,!0,a)),r>=t||r<0){const o=Math.floor(r/t);r-=t*o,s+=Math.abs(o);const l=this.repetitions-s;if(l<=0)this.clampWhenFinished?this.paused=!0:this.enabled=!1,r=e>0?t:0,this.time=r,this._mixer.dispatchEvent({type:"finished",action:this,direction:e>0?1:-1});else{if(l===1){const c=e<0;this._setEndings(c,!c,a)}else this._setEndings(!1,!1,a);this._loopCount=s,this.time=r,this._mixer.dispatchEvent({type:"loop",action:this,loopDelta:o})}}else this.time=r;if(a&&(s&1)===1)return t-r}return r}_setEndings(e,t,i){const r=this._interpolantSettings;i?(r.endingStart=Fl,r.endingEnd=Fl):(e?r.endingStart=this.zeroSlopeAtStart?Fl:Dl:r.endingStart=Fu,t?r.endingEnd=this.zeroSlopeAtEnd?Fl:Dl:r.endingEnd=Fu)}_scheduleFading(e,t,i){const r=this._mixer,s=r.time;let a=this._weightInterpolant;a===null&&(a=r._lendControlInterpolant(),this._weightInterpolant=a);const o=a.parameterPositions,l=a.sampleValues;return o[0]=s,l[0]=t,o[1]=s+e,l[1]=i,this}}class XS extends Fa{constructor(e){super(),this._root=e,this._initMemoryManager(),this._accuIndex=0,this.time=0,this.timeScale=1}_bindAction(e,t){const i=e._localRoot||this._root,r=e._clip.tracks,s=r.length,a=e._propertyBindings,o=e._interpolants,l=i.uuid,c=this._bindingsByRootAndName;let h=c[l];h===void 0&&(h={},c[l]=h);for(let d=0;d!==s;++d){const u=r[d],p=u.name;let f=h[p];if(f!==void 0)++f.referenceCount,a[d]=f;else{if(f=a[d],f!==void 0){f._cacheIndex===null&&(++f.referenceCount,this._addInactiveBinding(f,l,p));continue}const g=t&&t._propertyBindings[d].binding.parsedPath;f=new Iee(vi.create(i,p,g),u.ValueTypeName,u.getValueSize()),++f.referenceCount,this._addInactiveBinding(f,l,p),a[d]=f}o[d].resultBuffer=f.buffer}}_activateAction(e){if(!this._isActiveAction(e)){if(e._cacheIndex===null){const i=(e._localRoot||this._root).uuid,r=e._clip.uuid,s=this._actionsByClip[r];this._bindAction(e,s&&s.knownActions[0]),this._addInactiveAction(e,r,i)}const t=e._propertyBindings;for(let i=0,r=t.length;i!==r;++i){const s=t[i];s.useCount++===0&&(this._lendBinding(s),s.saveOriginalState())}this._lendAction(e)}}_deactivateAction(e){if(this._isActiveAction(e)){const t=e._propertyBindings;for(let i=0,r=t.length;i!==r;++i){const s=t[i];--s.useCount===0&&(s.restoreOriginalState(),this._takeBackBinding(s))}this._takeBackAction(e)}}_initMemoryManager(){this._actions=[],this._nActiveActions=0,this._actionsByClip={},this._bindings=[],this._nActiveBindings=0,this._bindingsByRootAndName={},this._controlInterpolants=[],this._nActiveControlInterpolants=0;const e=this;this.stats={actions:{get total(){return e._actions.length},get inUse(){return e._nActiveActions}},bindings:{get total(){return e._bindings.length},get inUse(){return e._nActiveBindings}},controlInterpolants:{get total(){return e._controlInterpolants.length},get inUse(){return e._nActiveControlInterpolants}}}}_isActiveAction(e){const t=e._cacheIndex;return t!==null&&t=0;--i)e[i].stop();return this}update(e){e*=this.timeScale;const t=this._actions,i=this._nActiveActions,r=this.time+=e,s=Math.sign(e),a=this._accuIndex^=1;for(let c=0;c!==i;++c)t[c]._update(r,e,s,a);const o=this._bindings,l=this._nActiveBindings;for(let c=0;c!==l;++c)o[c].apply(a);return this}setTime(e){this.time=0;for(let t=0;t>-e-14,bs[n|256]=1024>>-e-14|32768,xs[n]=-e-1,xs[n|256]=-e-1):e<=15?(bs[n]=e+15<<10,bs[n|256]=e+15<<10|32768,xs[n]=13,xs[n|256]=13):e<128?(bs[n]=31744,bs[n|256]=64512,xs[n]=24,xs[n|256]=24):(bs[n]=31744,bs[n|256]=64512,xs[n]=13,xs[n|256]=13)}const i2=new Uint32Array(2048),hd=new Uint32Array(64),qee=new Uint32Array(64);for(let n=1;n<1024;++n){let e=n<<13,t=0;for(;(e&8388608)===0;)e<<=1,t-=8388608;e&=-8388609,t+=947912704,i2[n]=e|t}for(let n=1024;n<2048;++n)i2[n]=939524096+(n-1024<<13);for(let n=1;n<31;++n)hd[n]=n<<23;hd[31]=1199570944,hd[32]=2147483648;for(let n=33;n<63;++n)hd[n]=2147483648+(n-32<<23);hd[63]=3347054592;for(let n=1;n<64;++n)n!==32&&(qee[n]=1024);On.create=function(n,e){return console.log("THREE.Curve.create() has been deprecated"),n.prototype=Object.create(On.prototype),n.prototype.constructor=n,n.prototype.getPoint=e,n},Tp.prototype.fromPoints=function(n){return console.warn("THREE.Path: .fromPoints() has been renamed to .setFromPoints()."),this.setFromPoints(n)},Av.prototype.setColors=function(){console.error("THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead.")},kv.prototype.update=function(){console.error("THREE.SkeletonHelper: update() no longer needs to be called.")},as.prototype.extractUrlBase=function(n){return console.warn("THREE.Loader: .extractUrlBase() has been deprecated. Use THREE.LoaderUtils.extractUrlBase() instead."),Tv.extractUrlBase(n)},as.Handlers={add:function(){console.error("THREE.Loader: Handlers.add() has been removed. Use LoadingManager.addHandler() instead.")},get:function(){console.error("THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead.")}},An.prototype.center=function(n){return console.warn("THREE.Box3: .center() has been renamed to .getCenter()."),this.getCenter(n)},An.prototype.empty=function(){return console.warn("THREE.Box3: .empty() has been renamed to .isEmpty()."),this.isEmpty()},An.prototype.isIntersectionBox=function(n){return console.warn("THREE.Box3: .isIntersectionBox() has been renamed to .intersectsBox()."),this.intersectsBox(n)},An.prototype.isIntersectionSphere=function(n){return console.warn("THREE.Box3: .isIntersectionSphere() has been renamed to .intersectsSphere()."),this.intersectsSphere(n)},An.prototype.size=function(n){return console.warn("THREE.Box3: .size() has been renamed to .getSize()."),this.getSize(n)},Ha.prototype.toVector3=function(){console.error("THREE.Euler: .toVector3() has been removed. Use Vector3.setFromEuler() instead")},Ho.prototype.empty=function(){return console.warn("THREE.Sphere: .empty() has been renamed to .isEmpty()."),this.isEmpty()},hp.prototype.setFromMatrix=function(n){return console.warn("THREE.Frustum: .setFromMatrix() has been renamed to .setFromProjectionMatrix()."),this.setFromProjectionMatrix(n)},Mr.prototype.flattenToArrayOffset=function(n,e){return console.warn("THREE.Matrix3: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."),this.toArray(n,e)},Mr.prototype.multiplyVector3=function(n){return console.warn("THREE.Matrix3: .multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead."),n.applyMatrix3(this)},Mr.prototype.multiplyVector3Array=function(){console.error("THREE.Matrix3: .multiplyVector3Array() has been removed.")},Mr.prototype.applyToBufferAttribute=function(n){return console.warn("THREE.Matrix3: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix3( matrix ) instead."),n.applyMatrix3(this)},Mr.prototype.applyToVector3Array=function(){console.error("THREE.Matrix3: .applyToVector3Array() has been removed.")},Mr.prototype.getInverse=function(n){return console.warn("THREE.Matrix3: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."),this.copy(n).invert()},mt.prototype.extractPosition=function(n){return console.warn("THREE.Matrix4: .extractPosition() has been renamed to .copyPosition()."),this.copyPosition(n)},mt.prototype.flattenToArrayOffset=function(n,e){return console.warn("THREE.Matrix4: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."),this.toArray(n,e)},mt.prototype.getPosition=function(){return console.warn("THREE.Matrix4: .getPosition() has been removed. Use Vector3.setFromMatrixPosition( matrix ) instead."),new R().setFromMatrixColumn(this,3)},mt.prototype.setRotationFromQuaternion=function(n){return console.warn("THREE.Matrix4: .setRotationFromQuaternion() has been renamed to .makeRotationFromQuaternion()."),this.makeRotationFromQuaternion(n)},mt.prototype.multiplyToArray=function(){console.warn("THREE.Matrix4: .multiplyToArray() has been removed.")},mt.prototype.multiplyVector3=function(n){return console.warn("THREE.Matrix4: .multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)},mt.prototype.multiplyVector4=function(n){return console.warn("THREE.Matrix4: .multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)},mt.prototype.multiplyVector3Array=function(){console.error("THREE.Matrix4: .multiplyVector3Array() has been removed.")},mt.prototype.rotateAxis=function(n){console.warn("THREE.Matrix4: .rotateAxis() has been removed. Use Vector3.transformDirection( matrix ) instead."),n.transformDirection(this)},mt.prototype.crossVector=function(n){return console.warn("THREE.Matrix4: .crossVector() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)},mt.prototype.translate=function(){console.error("THREE.Matrix4: .translate() has been removed.")},mt.prototype.rotateX=function(){console.error("THREE.Matrix4: .rotateX() has been removed.")},mt.prototype.rotateY=function(){console.error("THREE.Matrix4: .rotateY() has been removed.")},mt.prototype.rotateZ=function(){console.error("THREE.Matrix4: .rotateZ() has been removed.")},mt.prototype.rotateByAxis=function(){console.error("THREE.Matrix4: .rotateByAxis() has been removed.")},mt.prototype.applyToBufferAttribute=function(n){return console.warn("THREE.Matrix4: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)},mt.prototype.applyToVector3Array=function(){console.error("THREE.Matrix4: .applyToVector3Array() has been removed.")},mt.prototype.makeFrustum=function(n,e,t,i,r,s){return console.warn("THREE.Matrix4: .makeFrustum() has been removed. Use .makePerspective( left, right, top, bottom, near, far ) instead."),this.makePerspective(n,e,i,t,r,s)},mt.prototype.getInverse=function(n){return console.warn("THREE.Matrix4: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."),this.copy(n).invert()},Xs.prototype.isIntersectionLine=function(n){return console.warn("THREE.Plane: .isIntersectionLine() has been renamed to .intersectsLine()."),this.intersectsLine(n)},Pi.prototype.multiplyVector3=function(n){return console.warn("THREE.Quaternion: .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead."),n.applyQuaternion(this)},Pi.prototype.inverse=function(){return console.warn("THREE.Quaternion: .inverse() has been renamed to invert()."),this.invert()},Uo.prototype.isIntersectionBox=function(n){return console.warn("THREE.Ray: .isIntersectionBox() has been renamed to .intersectsBox()."),this.intersectsBox(n)},Uo.prototype.isIntersectionPlane=function(n){return console.warn("THREE.Ray: .isIntersectionPlane() has been renamed to .intersectsPlane()."),this.intersectsPlane(n)},Uo.prototype.isIntersectionSphere=function(n){return console.warn("THREE.Ray: .isIntersectionSphere() has been renamed to .intersectsSphere()."),this.intersectsSphere(n)},sr.prototype.area=function(){return console.warn("THREE.Triangle: .area() has been renamed to .getArea()."),this.getArea()},sr.prototype.barycoordFromPoint=function(n,e){return console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."),this.getBarycoord(n,e)},sr.prototype.midpoint=function(n){return console.warn("THREE.Triangle: .midpoint() has been renamed to .getMidpoint()."),this.getMidpoint(n)},sr.prototypenormal=function(n){return console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."),this.getNormal(n)},sr.prototype.plane=function(n){return console.warn("THREE.Triangle: .plane() has been renamed to .getPlane()."),this.getPlane(n)},sr.barycoordFromPoint=function(n,e,t,i,r){return console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."),sr.getBarycoord(n,e,t,i,r)},sr.normal=function(n,e,t,i){return console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."),sr.getNormal(n,e,t,i)},pc.prototype.extractAllPoints=function(n){return console.warn("THREE.Shape: .extractAllPoints() has been removed. Use .extractPoints() instead."),this.extractPoints(n)},pc.prototype.extrude=function(n){return console.warn("THREE.Shape: .extrude() has been removed. Use ExtrudeGeometry() instead."),new Ja(this,n)},pc.prototype.makeGeometry=function(n){return console.warn("THREE.Shape: .makeGeometry() has been removed. Use ShapeGeometry() instead."),new ad(this,n)},Se.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector2: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)},Se.prototype.distanceToManhattan=function(n){return console.warn("THREE.Vector2: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."),this.manhattanDistanceTo(n)},Se.prototype.lengthManhattan=function(){return console.warn("THREE.Vector2: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()},R.prototype.setEulerFromRotationMatrix=function(){console.error("THREE.Vector3: .setEulerFromRotationMatrix() has been removed. Use Euler.setFromRotationMatrix() instead.")},R.prototype.setEulerFromQuaternion=function(){console.error("THREE.Vector3: .setEulerFromQuaternion() has been removed. Use Euler.setFromQuaternion() instead.")},R.prototype.getPositionFromMatrix=function(n){return console.warn("THREE.Vector3: .getPositionFromMatrix() has been renamed to .setFromMatrixPosition()."),this.setFromMatrixPosition(n)},R.prototype.getScaleFromMatrix=function(n){return console.warn("THREE.Vector3: .getScaleFromMatrix() has been renamed to .setFromMatrixScale()."),this.setFromMatrixScale(n)},R.prototype.getColumnFromMatrix=function(n,e){return console.warn("THREE.Vector3: .getColumnFromMatrix() has been renamed to .setFromMatrixColumn()."),this.setFromMatrixColumn(e,n)},R.prototype.applyProjection=function(n){return console.warn("THREE.Vector3: .applyProjection() has been removed. Use .applyMatrix4( m ) instead."),this.applyMatrix4(n)},R.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector3: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)},R.prototype.distanceToManhattan=function(n){return console.warn("THREE.Vector3: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."),this.manhattanDistanceTo(n)},R.prototype.lengthManhattan=function(){return console.warn("THREE.Vector3: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()},gi.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector4: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)},gi.prototype.lengthManhattan=function(){return console.warn("THREE.Vector4: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()},Zt.prototype.getChildByName=function(n){return console.warn("THREE.Object3D: .getChildByName() has been renamed to .getObjectByName()."),this.getObjectByName(n)},Zt.prototype.renderDepth=function(){console.warn("THREE.Object3D: .renderDepth has been removed. Use .renderOrder, instead.")},Zt.prototype.translate=function(n,e){return console.warn("THREE.Object3D: .translate() has been removed. Use .translateOnAxis( axis, distance ) instead."),this.translateOnAxis(e,n)},Zt.prototype.getWorldRotation=function(){console.error("THREE.Object3D: .getWorldRotation() has been removed. Use THREE.Object3D.getWorldQuaternion( target ) instead.")},Zt.prototype.applyMatrix=function(n){return console.warn("THREE.Object3D: .applyMatrix() has been renamed to .applyMatrix4()."),this.applyMatrix4(n)},Object.defineProperties(Zt.prototype,{eulerOrder:{get:function(){return console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."),this.rotation.order},set:function(n){console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."),this.rotation.order=n}},useQuaternion:{get:function(){console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.")},set:function(){console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.")}}}),Ge.prototype.setDrawMode=function(){console.error("THREE.Mesh: .setDrawMode() has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.")},Object.defineProperties(Ge.prototype,{drawMode:{get:function(){return console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode."),hK},set:function(){console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.")}}}),nv.prototype.initBones=function(){console.error("THREE.SkinnedMesh: initBones() has been removed.")},Ir.prototype.setLens=function(n,e){console.warn("THREE.PerspectiveCamera.setLens is deprecated. Use .setFocalLength and .filmGauge for a photographic setup."),e!==void 0&&(this.filmGauge=e),this.setFocalLength(n)},Object.defineProperties(ys.prototype,{onlyShadow:{set:function(){console.warn("THREE.Light: .onlyShadow has been removed.")}},shadowCameraFov:{set:function(n){console.warn("THREE.Light: .shadowCameraFov is now .shadow.camera.fov."),this.shadow.camera.fov=n}},shadowCameraLeft:{set:function(n){console.warn("THREE.Light: .shadowCameraLeft is now .shadow.camera.left."),this.shadow.camera.left=n}},shadowCameraRight:{set:function(n){console.warn("THREE.Light: .shadowCameraRight is now .shadow.camera.right."),this.shadow.camera.right=n}},shadowCameraTop:{set:function(n){console.warn("THREE.Light: .shadowCameraTop is now .shadow.camera.top."),this.shadow.camera.top=n}},shadowCameraBottom:{set:function(n){console.warn("THREE.Light: .shadowCameraBottom is now .shadow.camera.bottom."),this.shadow.camera.bottom=n}},shadowCameraNear:{set:function(n){console.warn("THREE.Light: .shadowCameraNear is now .shadow.camera.near."),this.shadow.camera.near=n}},shadowCameraFar:{set:function(n){console.warn("THREE.Light: .shadowCameraFar is now .shadow.camera.far."),this.shadow.camera.far=n}},shadowCameraVisible:{set:function(){console.warn("THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( light.shadow.camera ) instead.")}},shadowBias:{set:function(n){console.warn("THREE.Light: .shadowBias is now .shadow.bias."),this.shadow.bias=n}},shadowDarkness:{set:function(){console.warn("THREE.Light: .shadowDarkness has been removed.")}},shadowMapWidth:{set:function(n){console.warn("THREE.Light: .shadowMapWidth is now .shadow.mapSize.width."),this.shadow.mapSize.width=n}},shadowMapHeight:{set:function(n){console.warn("THREE.Light: .shadowMapHeight is now .shadow.mapSize.height."),this.shadow.mapSize.height=n}}}),Object.defineProperties(ki.prototype,{length:{get:function(){return console.warn("THREE.BufferAttribute: .length has been deprecated. Use .count instead."),this.array.length}},dynamic:{get:function(){return console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."),this.usage===Nu},set:function(){console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."),this.setUsage(Nu)}}}),ki.prototype.setDynamic=function(n){return console.warn("THREE.BufferAttribute: .setDynamic() has been deprecated. Use .setUsage() instead."),this.setUsage(n===!0?Nu:Bh),this},ki.prototype.copyIndicesArray=function(){console.error("THREE.BufferAttribute: .copyIndicesArray() has been removed.")},ki.prototype.setArray=function(){console.error("THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers")},zt.prototype.addIndex=function(n){console.warn("THREE.BufferGeometry: .addIndex() has been renamed to .setIndex()."),this.setIndex(n)},zt.prototype.addAttribute=function(n,e){return console.warn("THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute()."),!(e&&e.isBufferAttribute)&&!(e&&e.isInterleavedBufferAttribute)?(console.warn("THREE.BufferGeometry: .addAttribute() now expects ( name, attribute )."),this.setAttribute(n,new ki(arguments[1],arguments[2]))):n==="index"?(console.warn("THREE.BufferGeometry.addAttribute: Use .setIndex() for index attribute."),this.setIndex(e),this):this.setAttribute(n,e)},zt.prototype.addDrawCall=function(n,e,t){t!==void 0&&console.warn("THREE.BufferGeometry: .addDrawCall() no longer supports indexOffset."),console.warn("THREE.BufferGeometry: .addDrawCall() is now .addGroup()."),this.addGroup(n,e)},zt.prototype.clearDrawCalls=function(){console.warn("THREE.BufferGeometry: .clearDrawCalls() is now .clearGroups()."),this.clearGroups()},zt.prototype.computeOffsets=function(){console.warn("THREE.BufferGeometry: .computeOffsets() has been removed.")},zt.prototype.removeAttribute=function(n){return console.warn("THREE.BufferGeometry: .removeAttribute() has been renamed to .deleteAttribute()."),this.deleteAttribute(n)},zt.prototype.applyMatrix=function(n){return console.warn("THREE.BufferGeometry: .applyMatrix() has been renamed to .applyMatrix4()."),this.applyMatrix4(n)},Object.defineProperties(zt.prototype,{drawcalls:{get:function(){return console.error("THREE.BufferGeometry: .drawcalls has been renamed to .groups."),this.groups}},offsets:{get:function(){return console.warn("THREE.BufferGeometry: .offsets has been renamed to .groups."),this.groups}}}),oc.prototype.setDynamic=function(n){return console.warn("THREE.InterleavedBuffer: .setDynamic() has been deprecated. Use .setUsage() instead."),this.setUsage(n===!0?Nu:Bh),this},oc.prototype.setArray=function(){console.error("THREE.InterleavedBuffer: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers")},Ja.prototype.getArrays=function(){console.error("THREE.ExtrudeGeometry: .getArrays() has been removed.")},Ja.prototype.addShapeList=function(){console.error("THREE.ExtrudeGeometry: .addShapeList() has been removed.")},Ja.prototype.addShape=function(){console.error("THREE.ExtrudeGeometry: .addShape() has been removed.")},Yh.prototype.dispose=function(){console.error("THREE.Scene: .dispose() has been removed.")},Object.defineProperties(ar.prototype,{wrapAround:{get:function(){console.warn("THREE.Material: .wrapAround has been removed.")},set:function(){console.warn("THREE.Material: .wrapAround has been removed.")}},overdraw:{get:function(){console.warn("THREE.Material: .overdraw has been removed.")},set:function(){console.warn("THREE.Material: .overdraw has been removed.")}},wrapRGB:{get:function(){return console.warn("THREE.Material: .wrapRGB has been removed."),new it}},shading:{get:function(){console.error("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead.")},set:function(n){console.warn("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead."),this.flatShading=n===hx}},stencilMask:{get:function(){return console.warn("THREE."+this.type+": .stencilMask has been removed. Use .stencilFuncMask instead."),this.stencilFuncMask},set:function(n){console.warn("THREE."+this.type+": .stencilMask has been removed. Use .stencilFuncMask instead."),this.stencilFuncMask=n}},vertexTangents:{get:function(){console.warn("THREE."+this.type+": .vertexTangents has been removed.")},set:function(){console.warn("THREE."+this.type+": .vertexTangents has been removed.")}}}),Object.defineProperties(ns.prototype,{derivatives:{get:function(){return console.warn("THREE.ShaderMaterial: .derivatives has been moved to .extensions.derivatives."),this.extensions.derivatives},set:function(n){console.warn("THREE. ShaderMaterial: .derivatives has been moved to .extensions.derivatives."),this.extensions.derivatives=n}}}),mi.prototype.clearTarget=function(n,e,t,i){console.warn("THREE.WebGLRenderer: .clearTarget() has been deprecated. Use .setRenderTarget() and .clear() instead."),this.setRenderTarget(n),this.clear(e,t,i)},mi.prototype.animate=function(n){console.warn("THREE.WebGLRenderer: .animate() is now .setAnimationLoop()."),this.setAnimationLoop(n)},mi.prototype.getCurrentRenderTarget=function(){return console.warn("THREE.WebGLRenderer: .getCurrentRenderTarget() is now .getRenderTarget()."),this.getRenderTarget()},mi.prototype.getMaxAnisotropy=function(){return console.warn("THREE.WebGLRenderer: .getMaxAnisotropy() is now .capabilities.getMaxAnisotropy()."),this.capabilities.getMaxAnisotropy()},mi.prototype.getPrecision=function(){return console.warn("THREE.WebGLRenderer: .getPrecision() is now .capabilities.precision."),this.capabilities.precision},mi.prototype.resetGLState=function(){return console.warn("THREE.WebGLRenderer: .resetGLState() is now .state.reset()."),this.state.reset()},mi.prototype.supportsFloatTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsFloatTextures() is now .extensions.get( 'OES_texture_float' )."),this.extensions.get("OES_texture_float")},mi.prototype.supportsHalfFloatTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsHalfFloatTextures() is now .extensions.get( 'OES_texture_half_float' )."),this.extensions.get("OES_texture_half_float")},mi.prototype.supportsStandardDerivatives=function(){return console.warn("THREE.WebGLRenderer: .supportsStandardDerivatives() is now .extensions.get( 'OES_standard_derivatives' )."),this.extensions.get("OES_standard_derivatives")},mi.prototype.supportsCompressedTextureS3TC=function(){return console.warn("THREE.WebGLRenderer: .supportsCompressedTextureS3TC() is now .extensions.get( 'WEBGL_compressed_texture_s3tc' )."),this.extensions.get("WEBGL_compressed_texture_s3tc")},mi.prototype.supportsCompressedTexturePVRTC=function(){return console.warn("THREE.WebGLRenderer: .supportsCompressedTexturePVRTC() is now .extensions.get( 'WEBGL_compressed_texture_pvrtc' )."),this.extensions.get("WEBGL_compressed_texture_pvrtc")},mi.prototype.supportsBlendMinMax=function(){return console.warn("THREE.WebGLRenderer: .supportsBlendMinMax() is now .extensions.get( 'EXT_blend_minmax' )."),this.extensions.get("EXT_blend_minmax")},mi.prototype.supportsVertexTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsVertexTextures() is now .capabilities.vertexTextures."),this.capabilities.vertexTextures},mi.prototype.supportsInstancedArrays=function(){return console.warn("THREE.WebGLRenderer: .supportsInstancedArrays() is now .extensions.get( 'ANGLE_instanced_arrays' )."),this.extensions.get("ANGLE_instanced_arrays")},mi.prototype.enableScissorTest=function(n){console.warn("THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest()."),this.setScissorTest(n)},mi.prototype.initMaterial=function(){console.warn("THREE.WebGLRenderer: .initMaterial() has been removed.")},mi.prototype.addPrePlugin=function(){console.warn("THREE.WebGLRenderer: .addPrePlugin() has been removed.")},mi.prototype.addPostPlugin=function(){console.warn("THREE.WebGLRenderer: .addPostPlugin() has been removed.")},mi.prototype.updateShadowMap=function(){console.warn("THREE.WebGLRenderer: .updateShadowMap() has been removed.")},mi.prototype.setFaceCulling=function(){console.warn("THREE.WebGLRenderer: .setFaceCulling() has been removed.")},mi.prototype.allocTextureUnit=function(){console.warn("THREE.WebGLRenderer: .allocTextureUnit() has been removed.")},mi.prototype.setTexture=function(){console.warn("THREE.WebGLRenderer: .setTexture() has been removed.")},mi.prototype.setTexture2D=function(){console.warn("THREE.WebGLRenderer: .setTexture2D() has been removed.")},mi.prototype.setTextureCube=function(){console.warn("THREE.WebGLRenderer: .setTextureCube() has been removed.")},mi.prototype.getActiveMipMapLevel=function(){return console.warn("THREE.WebGLRenderer: .getActiveMipMapLevel() is now .getActiveMipmapLevel()."),this.getActiveMipmapLevel()},Object.defineProperties(mi.prototype,{shadowMapEnabled:{get:function(){return this.shadowMap.enabled},set:function(n){console.warn("THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled."),this.shadowMap.enabled=n}},shadowMapType:{get:function(){return this.shadowMap.type},set:function(n){console.warn("THREE.WebGLRenderer: .shadowMapType is now .shadowMap.type."),this.shadowMap.type=n}},shadowMapCullFace:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.")}},context:{get:function(){return console.warn("THREE.WebGLRenderer: .context has been removed. Use .getContext() instead."),this.getContext()}},vr:{get:function(){return console.warn("THREE.WebGLRenderer: .vr has been renamed to .xr"),this.xr}},gammaInput:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead."),!1},set:function(){console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead.")}},gammaOutput:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."),!1},set:function(n){console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."),this.outputEncoding=n===!0?Li:Ns}},toneMappingWhitePoint:{get:function(){return console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed."),1},set:function(){console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed.")}},gammaFactor:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaFactor has been removed."),2},set:function(){console.warn("THREE.WebGLRenderer: .gammaFactor has been removed.")}}}),Object.defineProperties(z_.prototype,{cullFace:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.")}},renderReverseSided:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.")}},renderSingleSided:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.")}}}),Object.defineProperties(dn.prototype,{wrapS:{get:function(){return console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."),this.texture.wrapS},set:function(n){console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."),this.texture.wrapS=n}},wrapT:{get:function(){return console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."),this.texture.wrapT},set:function(n){console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."),this.texture.wrapT=n}},magFilter:{get:function(){return console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."),this.texture.magFilter},set:function(n){console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."),this.texture.magFilter=n}},minFilter:{get:function(){return console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."),this.texture.minFilter},set:function(n){console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."),this.texture.minFilter=n}},anisotropy:{get:function(){return console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."),this.texture.anisotropy},set:function(n){console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."),this.texture.anisotropy=n}},offset:{get:function(){return console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."),this.texture.offset},set:function(n){console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."),this.texture.offset=n}},repeat:{get:function(){return console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."),this.texture.repeat},set:function(n){console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."),this.texture.repeat=n}},format:{get:function(){return console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."),this.texture.format},set:function(n){console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."),this.texture.format=n}},type:{get:function(){return console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."),this.texture.type},set:function(n){console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."),this.texture.type=n}},generateMipmaps:{get:function(){return console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."),this.texture.generateMipmaps},set:function(n){console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."),this.texture.generateMipmaps=n}}}),Eee.prototype.load=function(n){console.warn("THREE.Audio: .load has been deprecated. Use THREE.AudioLoader instead.");const e=this;return new Pee().load(n,function(i){e.setBuffer(i)}),this},Um.prototype.updateCubeMap=function(n,e){return console.warn("THREE.CubeCamera: .updateCubeMap() is now .update()."),this.update(n,e)},Um.prototype.clear=function(n,e,t,i){return console.warn("THREE.CubeCamera: .clear() is now .renderTarget.clear()."),this.renderTarget.clear(n,e,t,i)},No.crossOrigin=void 0,No.loadTexture=function(n,e,t,i){console.warn("THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.");const r=new bee;r.setCrossOrigin(this.crossOrigin);const s=r.load(n,t,void 0,i);return e&&(s.mapping=e),s},No.loadTextureCube=function(n,e,t,i){console.warn("THREE.ImageUtils.loadTextureCube has been deprecated. Use THREE.CubeTextureLoader() instead.");const r=new yee;r.setCrossOrigin(this.crossOrigin);const s=r.load(n,t,void 0,i);return e&&(s.mapping=e),s},No.loadCompressedTexture=function(){console.error("THREE.ImageUtils.loadCompressedTexture has been removed. Use THREE.DDSLoader instead.")},No.loadCompressedTextureCube=function(){console.error("THREE.ImageUtils.loadCompressedTextureCube has been removed. Use THREE.DDSLoader instead.")},typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register",{detail:{revision:om}})),typeof window!="undefined"&&(window.__THREE__?console.warn("WARNING: Multiple instances of Three.js being imported."):window.__THREE__=om);const r2={type:"change"},Rv={type:"start"},n2={type:"end"};class Zee extends Fa{constructor(e,t){super(),t===void 0&&console.warn('THREE.OrbitControls: The second parameter "domElement" is now mandatory.'),t===document&&console.error('THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.'),this.object=e,this.domElement=t,this.domElement.style.touchAction="none",this.enabled=!0,this.target=new R,this.minDistance=0,this.maxDistance=1/0,this.minZoom=0,this.maxZoom=1/0,this.minPolarAngle=0,this.maxPolarAngle=Math.PI,this.minAzimuthAngle=-1/0,this.maxAzimuthAngle=1/0,this.enableDamping=!1,this.dampingFactor=.05,this.enableZoom=!0,this.zoomSpeed=1,this.enableRotate=!0,this.rotateSpeed=1,this.enablePan=!0,this.panSpeed=1,this.screenSpacePanning=!0,this.keyPanSpeed=7,this.autoRotate=!1,this.autoRotateSpeed=2,this.keys={LEFT:"ArrowLeft",UP:"ArrowUp",RIGHT:"ArrowRight",BOTTOM:"ArrowDown"},this.mouseButtons={LEFT:Ll.ROTATE,MIDDLE:Ll.DOLLY,RIGHT:Ll.PAN},this.touches={ONE:kl.ROTATE,TWO:kl.DOLLY_PAN},this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.zoom0=this.object.zoom,this._domElementKeyEvents=null,this.getPolarAngle=function(){return o.phi},this.getAzimuthalAngle=function(){return o.theta},this.getDistance=function(){return this.object.position.distanceTo(this.target)},this.listenToKeyEvents=function(F){F.addEventListener("keydown",Xt),this._domElementKeyEvents=F},this.saveState=function(){i.target0.copy(i.target),i.position0.copy(i.object.position),i.zoom0=i.object.zoom},this.reset=function(){i.target.copy(i.target0),i.object.position.copy(i.position0),i.object.zoom=i.zoom0,i.object.updateProjectionMatrix(),i.dispatchEvent(r2),i.update(),s=r.NONE},this.update=function(){const F=new R,Le=new Pi().setFromUnitVectors(e.up,new R(0,1,0)),ot=Le.clone().invert(),Fe=new R,K=new Pi,De=2*Math.PI;return function(){const bt=i.object.position;F.copy(bt).sub(i.target),F.applyQuaternion(Le),o.setFromVector3(F),i.autoRotate&&s===r.NONE&&Z(A()),i.enableDamping?(o.theta+=l.theta*i.dampingFactor,o.phi+=l.phi*i.dampingFactor):(o.theta+=l.theta,o.phi+=l.phi);let He=i.minAzimuthAngle,ht=i.maxAzimuthAngle;return isFinite(He)&&isFinite(ht)&&(He<-Math.PI?He+=De:He>Math.PI&&(He-=De),ht<-Math.PI?ht+=De:ht>Math.PI&&(ht-=De),He<=ht?o.theta=Math.max(He,Math.min(ht,o.theta)):o.theta=o.theta>(He+ht)/2?Math.max(He,o.theta):Math.min(ht,o.theta)),o.phi=Math.max(i.minPolarAngle,Math.min(i.maxPolarAngle,o.phi)),o.makeSafe(),o.radius*=c,o.radius=Math.max(i.minDistance,Math.min(i.maxDistance,o.radius)),i.enableDamping===!0?i.target.addScaledVector(h,i.dampingFactor):i.target.add(h),F.setFromSpherical(o),F.applyQuaternion(ot),bt.copy(i.target).add(F),i.object.lookAt(i.target),i.enableDamping===!0?(l.theta*=1-i.dampingFactor,l.phi*=1-i.dampingFactor,h.multiplyScalar(1-i.dampingFactor)):(l.set(0,0,0),h.set(0,0,0)),c=1,d||Fe.distanceToSquared(i.object.position)>a||8*(1-K.dot(i.object.quaternion))>a?(i.dispatchEvent(r2),Fe.copy(i.object.position),K.copy(i.object.quaternion),d=!1,!0):!1}}(),this.dispose=function(){i.domElement.removeEventListener("contextmenu",fe),i.domElement.removeEventListener("pointerdown",ae),i.domElement.removeEventListener("pointercancel",yt),i.domElement.removeEventListener("wheel",yi),i.domElement.removeEventListener("pointermove",Pe),i.domElement.removeEventListener("pointerup",Ee),i._domElementKeyEvents!==null&&i._domElementKeyEvents.removeEventListener("keydown",Xt)};const i=this,r={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_PAN:4,TOUCH_DOLLY_PAN:5,TOUCH_DOLLY_ROTATE:6};let s=r.NONE;const a=1e-6,o=new KS,l=new KS;let c=1;const h=new R;let d=!1;const u=new Se,p=new Se,f=new Se,g=new Se,m=new Se,v=new Se,b=new Se,_=new Se,x=new Se,S=[],E={};function A(){return 2*Math.PI/60/60*i.autoRotateSpeed}function z(){return Math.pow(.95,i.zoomSpeed)}function Z(F){l.theta-=F}function Y(F){l.phi-=F}const T=function(){const F=new R;return function(ot,Fe){F.setFromMatrixColumn(Fe,0),F.multiplyScalar(-ot),h.add(F)}}(),V=function(){const F=new R;return function(ot,Fe){i.screenSpacePanning===!0?F.setFromMatrixColumn(Fe,1):(F.setFromMatrixColumn(Fe,0),F.crossVectors(i.object.up,F)),F.multiplyScalar(ot),h.add(F)}}(),oe=function(){const F=new R;return function(ot,Fe){const K=i.domElement;if(i.object.isPerspectiveCamera){const De=i.object.position;F.copy(De).sub(i.target);let ze=F.length();ze*=Math.tan(i.object.fov/2*Math.PI/180),T(2*ot*ze/K.clientHeight,i.object.matrix),V(2*Fe*ze/K.clientHeight,i.object.matrix)}else i.object.isOrthographicCamera?(T(ot*(i.object.right-i.object.left)/i.object.zoom/K.clientWidth,i.object.matrix),V(Fe*(i.object.top-i.object.bottom)/i.object.zoom/K.clientHeight,i.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),i.enablePan=!1)}}();function B(F){i.object.isPerspectiveCamera?c/=F:i.object.isOrthographicCamera?(i.object.zoom=Math.max(i.minZoom,Math.min(i.maxZoom,i.object.zoom*F)),i.object.updateProjectionMatrix(),d=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),i.enableZoom=!1)}function Q(F){i.object.isPerspectiveCamera?c*=F:i.object.isOrthographicCamera?(i.object.zoom=Math.max(i.minZoom,Math.min(i.maxZoom,i.object.zoom/F)),i.object.updateProjectionMatrix(),d=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),i.enableZoom=!1)}function ee(F){u.set(F.clientX,F.clientY)}function te(F){b.set(F.clientX,F.clientY)}function q(F){g.set(F.clientX,F.clientY)}function ne(F){p.set(F.clientX,F.clientY),f.subVectors(p,u).multiplyScalar(i.rotateSpeed);const Le=i.domElement;Z(2*Math.PI*f.x/Le.clientHeight),Y(2*Math.PI*f.y/Le.clientHeight),u.copy(p),i.update()}function ce(F){_.set(F.clientX,F.clientY),x.subVectors(_,b),x.y>0?B(z()):x.y<0&&Q(z()),b.copy(_),i.update()}function ye(F){m.set(F.clientX,F.clientY),v.subVectors(m,g).multiplyScalar(i.panSpeed),oe(v.x,v.y),g.copy(m),i.update()}function J(F){F.deltaY<0?Q(z()):F.deltaY>0&&B(z()),i.update()}function Re(F){let Le=!1;switch(F.code){case i.keys.UP:oe(0,i.keyPanSpeed),Le=!0;break;case i.keys.BOTTOM:oe(0,-i.keyPanSpeed),Le=!0;break;case i.keys.LEFT:oe(i.keyPanSpeed,0),Le=!0;break;case i.keys.RIGHT:oe(-i.keyPanSpeed,0),Le=!0;break}Le&&(F.preventDefault(),i.update())}function et(){if(S.length===1)u.set(S[0].pageX,S[0].pageY);else{const F=.5*(S[0].pageX+S[1].pageX),Le=.5*(S[0].pageY+S[1].pageY);u.set(F,Le)}}function nt(){if(S.length===1)g.set(S[0].pageX,S[0].pageY);else{const F=.5*(S[0].pageX+S[1].pageX),Le=.5*(S[0].pageY+S[1].pageY);g.set(F,Le)}}function be(){const F=S[0].pageX-S[1].pageX,Le=S[0].pageY-S[1].pageY,ot=Math.sqrt(F*F+Le*Le);b.set(0,ot)}function Dt(){i.enableZoom&&be(),i.enablePan&&nt()}function xt(){i.enableZoom&&be(),i.enableRotate&&et()}function vt(F){if(S.length==1)p.set(F.pageX,F.pageY);else{const ot=pt(F),Fe=.5*(F.pageX+ot.x),K=.5*(F.pageY+ot.y);p.set(Fe,K)}f.subVectors(p,u).multiplyScalar(i.rotateSpeed);const Le=i.domElement;Z(2*Math.PI*f.x/Le.clientHeight),Y(2*Math.PI*f.y/Le.clientHeight),u.copy(p)}function w(F){if(S.length===1)m.set(F.pageX,F.pageY);else{const Le=pt(F),ot=.5*(F.pageX+Le.x),Fe=.5*(F.pageY+Le.y);m.set(ot,Fe)}v.subVectors(m,g).multiplyScalar(i.panSpeed),oe(v.x,v.y),g.copy(m)}function k(F){const Le=pt(F),ot=F.pageX-Le.x,Fe=F.pageY-Le.y,K=Math.sqrt(ot*ot+Fe*Fe);_.set(0,K),x.set(0,Math.pow(_.y/b.y,i.zoomSpeed)),B(x.y),b.copy(_)}function L(F){i.enableZoom&&k(F),i.enablePan&&w(F)}function X(F){i.enableZoom&&k(F),i.enableRotate&&vt(F)}function ae(F){i.enabled!==!1&&(S.length===0&&(i.domElement.setPointerCapture(F.pointerId),i.domElement.addEventListener("pointermove",Pe),i.domElement.addEventListener("pointerup",Ee)),Te(F),F.pointerType==="touch"?G(F):ct(F))}function Pe(F){i.enabled!==!1&&(F.pointerType==="touch"?O(F):ut(F))}function Ee(F){je(F),S.length===0&&(i.domElement.releasePointerCapture(F.pointerId),i.domElement.removeEventListener("pointermove",Pe),i.domElement.removeEventListener("pointerup",Ee)),i.dispatchEvent(n2),s=r.NONE}function yt(F){je(F)}function ct(F){let Le;switch(F.button){case 0:Le=i.mouseButtons.LEFT;break;case 1:Le=i.mouseButtons.MIDDLE;break;case 2:Le=i.mouseButtons.RIGHT;break;default:Le=-1}switch(Le){case Ll.DOLLY:if(i.enableZoom===!1)return;te(F),s=r.DOLLY;break;case Ll.ROTATE:if(F.ctrlKey||F.metaKey||F.shiftKey){if(i.enablePan===!1)return;q(F),s=r.PAN}else{if(i.enableRotate===!1)return;ee(F),s=r.ROTATE}break;case Ll.PAN:if(F.ctrlKey||F.metaKey||F.shiftKey){if(i.enableRotate===!1)return;ee(F),s=r.ROTATE}else{if(i.enablePan===!1)return;q(F),s=r.PAN}break;default:s=r.NONE}s!==r.NONE&&i.dispatchEvent(Rv)}function ut(F){if(i.enabled!==!1)switch(s){case r.ROTATE:if(i.enableRotate===!1)return;ne(F);break;case r.DOLLY:if(i.enableZoom===!1)return;ce(F);break;case r.PAN:if(i.enablePan===!1)return;ye(F);break}}function yi(F){i.enabled===!1||i.enableZoom===!1||s!==r.NONE||(F.preventDefault(),i.dispatchEvent(Rv),J(F),i.dispatchEvent(n2))}function Xt(F){i.enabled===!1||i.enablePan===!1||Re(F)}function G(F){switch(Ke(F),S.length){case 1:switch(i.touches.ONE){case kl.ROTATE:if(i.enableRotate===!1)return;et(),s=r.TOUCH_ROTATE;break;case kl.PAN:if(i.enablePan===!1)return;nt(),s=r.TOUCH_PAN;break;default:s=r.NONE}break;case 2:switch(i.touches.TWO){case kl.DOLLY_PAN:if(i.enableZoom===!1&&i.enablePan===!1)return;Dt(),s=r.TOUCH_DOLLY_PAN;break;case kl.DOLLY_ROTATE:if(i.enableZoom===!1&&i.enableRotate===!1)return;xt(),s=r.TOUCH_DOLLY_ROTATE;break;default:s=r.NONE}break;default:s=r.NONE}s!==r.NONE&&i.dispatchEvent(Rv)}function O(F){switch(Ke(F),s){case r.TOUCH_ROTATE:if(i.enableRotate===!1)return;vt(F),i.update();break;case r.TOUCH_PAN:if(i.enablePan===!1)return;w(F),i.update();break;case r.TOUCH_DOLLY_PAN:if(i.enableZoom===!1&&i.enablePan===!1)return;L(F),i.update();break;case r.TOUCH_DOLLY_ROTATE:if(i.enableZoom===!1&&i.enableRotate===!1)return;X(F),i.update();break;default:s=r.NONE}}function fe(F){i.enabled!==!1&&F.preventDefault()}function Te(F){S.push(F)}function je(F){delete E[F.pointerId];for(let Le=0;Le.9&&(a.visible=!1)),this.axis==="Y"&&(Ri.setFromEuler(Zp.set(0,0,Math.PI/2)),a.quaternion.copy(i).multiply(Ri),Math.abs(wi.copy(Qo).applyQuaternion(i).dot(this.eye))>.9&&(a.visible=!1)),this.axis==="Z"&&(Ri.setFromEuler(Zp.set(0,Math.PI/2,0)),a.quaternion.copy(i).multiply(Ri),Math.abs(wi.copy(ud).applyQuaternion(i).dot(this.eye))>.9&&(a.visible=!1)),this.axis==="XYZE"&&(Ri.setFromEuler(Zp.set(0,Math.PI/2,0)),wi.copy(this.rotationAxis),a.quaternion.setFromRotationMatrix(d2.lookAt(h2,wi,Qo)),a.quaternion.multiply(Ri),a.visible=this.dragging),this.axis==="E"&&(a.visible=!1)):a.name==="START"?(a.position.copy(this.worldPositionStart),a.visible=this.dragging):a.name==="END"?(a.position.copy(this.worldPosition),a.visible=this.dragging):a.name==="DELTA"?(a.position.copy(this.worldPositionStart),a.quaternion.copy(this.worldQuaternionStart),nn.set(1e-10,1e-10,1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1),nn.applyQuaternion(this.worldQuaternionStart.clone().invert()),a.scale.copy(nn),a.visible=this.dragging):(a.quaternion.copy(i),this.dragging?a.position.copy(this.worldPositionStart):a.position.copy(this.worldPosition),this.axis&&(a.visible=this.axis.search(a.name)!==-1));continue}a.quaternion.copy(i),this.mode==="translate"||this.mode==="scale"?(a.name==="X"&&Math.abs(wi.copy(dd).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="Y"&&Math.abs(wi.copy(Qo).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="Z"&&Math.abs(wi.copy(ud).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="XY"&&Math.abs(wi.copy(ud).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="YZ"&&Math.abs(wi.copy(dd).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="XZ"&&Math.abs(wi.copy(Qo).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1)):this.mode==="rotate"&&(Jp.copy(i),wi.copy(this.eye).applyQuaternion(Ri.copy(i).invert()),a.name.search("E")!==-1&&a.quaternion.setFromRotationMatrix(d2.lookAt(this.eye,h2,Qo)),a.name==="X"&&(Ri.setFromAxisAngle(dd,Math.atan2(-wi.y,wi.z)),Ri.multiplyQuaternions(Jp,Ri),a.quaternion.copy(Ri)),a.name==="Y"&&(Ri.setFromAxisAngle(Qo,Math.atan2(wi.x,wi.z)),Ri.multiplyQuaternions(Jp,Ri),a.quaternion.copy(Ri)),a.name==="Z"&&(Ri.setFromAxisAngle(ud,Math.atan2(wi.y,wi.x)),Ri.multiplyQuaternions(Jp,Ri),a.quaternion.copy(Ri))),a.visible=a.visible&&(a.name.indexOf("X")===-1||this.showX),a.visible=a.visible&&(a.name.indexOf("Y")===-1||this.showY),a.visible=a.visible&&(a.name.indexOf("Z")===-1||this.showZ),a.visible=a.visible&&(a.name.indexOf("E")===-1||this.showX&&this.showY&&this.showZ),a.material._color=a.material._color||a.material.color.clone(),a.material._opacity=a.material._opacity||a.material.opacity,a.material.color.copy(a.material._color),a.material.opacity=a.material._opacity,this.enabled&&this.axis&&(a.name===this.axis||this.axis.split("").some(function(l){return a.name===l}))&&(a.material.color.setHex(16776960),a.material.opacity=1)}super.updateMatrixWorld(e)}}p2.prototype.isTransformControlsGizmo=!0;class f2 extends Ge{constructor(){super(new rc(1e5,1e5,2,2),new gs({visible:!1,wireframe:!0,side:Ao,transparent:!0,opacity:.1,toneMapped:!1})),this.type="TransformControlsPlane"}updateMatrixWorld(e){let t=this.space;switch(this.position.copy(this.worldPosition),this.mode==="scale"&&(t="local"),ef.copy(dd).applyQuaternion(t==="local"?this.worldQuaternion:Qp),pd.copy(Qo).applyQuaternion(t==="local"?this.worldQuaternion:Qp),fd.copy(ud).applyQuaternion(t==="local"?this.worldQuaternion:Qp),wi.copy(pd),this.mode){case"translate":case"scale":switch(this.axis){case"X":wi.copy(this.eye).cross(ef),_s.copy(ef).cross(wi);break;case"Y":wi.copy(this.eye).cross(pd),_s.copy(pd).cross(wi);break;case"Z":wi.copy(this.eye).cross(fd),_s.copy(fd).cross(wi);break;case"XY":_s.copy(fd);break;case"YZ":_s.copy(ef);break;case"XZ":wi.copy(fd),_s.copy(pd);break;case"XYZ":case"E":_s.set(0,0,0);break}break;case"rotate":default:_s.set(0,0,0)}_s.length()===0?this.quaternion.copy(this.cameraQuaternion):(u2.lookAt(nn.set(0,0,0),_s,wi),this.quaternion.setFromRotationMatrix(u2)),super.updateMatrixWorld(e)}}f2.prototype.isTransformControlsPlane=!0;var sse="";class rte extends ge{afterRender(){window.setTimeout(()=>{this.refresh()},100)}renderCanvas(){this.renderer.render(this.$context.sceneManager.scene,this.$context.sceneManager.viewportCamera)}initializeCamera(e){const t=new Ir(75,e.width/e.height,.1,1e3);t.position.x=1,t.position.y=3,t.position.z=1,t.lookAt(0,0,0),this.$context.sceneManager.camera=t,this.$context.sceneManager.addCamera(t),this.$context.sceneManager.setViewportCamera(t.uuid)}initializeRenderer(){const e=this.refs.$view.offsetRect();this.state.rect=e,this.initializeCamera(e),console.log(this.$context.sceneManager.viewportCamera);const t=new mi({canvas:this.refs.$view.el,antialias:!0});t.setPixelRatio(window.devicePixelRatio),t.setSize(e.width,e.height);const i=new Zee(this.$context.sceneManager.viewportCamera,this.refs.$body.el);i.addEventListener("change",()=>{this.renderCanvas()});const r=new Yo,s=new Av(30,30,8947848,"yellow");s.material.color.setHex(8947848),s.material.vertexColors=!1,r.add(s);const a=new Av(30,6,2236962,"white");a.material.color.setHex(2236962),a.material.depthFunc=yx,a.material.vertexColors=!1,r.add(a),this.grid=r,this.$context.sceneManager.addObject(this.grid,void 0,void 0,!1);const o=new Pv(16777215,2);o.position.set(1,1,1),this.$context.sceneManager.scene.add(o);const l=new An,c=new Kee(l);c.material.depthTest=!1,c.material.transparent=!0,c.visible=!1,this.$context.sceneManager.sceneHelpers.add(c);let h=null,d=null,u=null;const p=new c2(this.$context.sceneManager.viewportCamera,this.refs.$view.el);return this.transformControls=p,p.addEventListener("change",()=>{this.renderCanvas()}),p.addEventListener("mouseDown",()=>{const f=p.object;h=f.position.clone(),d=f.rotation.clone(),u=f.scale.clone(),i.enabled=!1}),p.addEventListener("mouseUp",()=>{const f=p.object;if(f!==void 0)switch(p.getMode()){case"translate":h.equals(f.position)||this.emit("SetPosition",f,f.position,h);break;case"rotate":d.equals(f.rotation)||this.emit("SetRotation",f,f.rotation,d);break;case"scale":u.equals(f.scale)||this.emit("SetScale",f,f.scale,u);break}i.enabled=!0}),this.$context.sceneManager.scene.add(p),t}refresh(){if(!this.renderer){const i=this.initializeRenderer();console.log(i),this.renderer=i}const e=this;function t(i){e.renderCanvas(i)}t(0)}refreshCanvasSize(){const e=this.refs.$view.offsetRect();this.state.rect=e,this.$context.sceneManager.viewportCamera.aspect=e.width/e.height,this.$context.sceneManager.viewportCamera.updateProjectionMatrix(),this.renderer.setSize(e.width,e.height),this.renderCanvas(0)}[U("objectSelected")](){this.transformControls.attach(this.$context.sceneManager.selected)}[U("objectAdded")](){this.renderCanvas(0)}[U(ua,ln)](){console.log("resize"),this.refreshCanvasSize()}template(){return` -
      - - ${this.$injectManager.generate("render.view")} -
      - `}}class nte extends ge{template(){return D("div",{class:"elf--page-three-container",tabIndex:"-1",ref:"$container"},D("div",{class:"page-view",ref:"$pageView"},D("div",{class:"page-lock scrollbar",ref:"$lock"},D(rte,{ref:"$threeRenderView"}),this.$injectManager.generate("canvas.view"))))}}var ase="";class ste extends ge{components(){return{Canvas3DView:nte}}template(){return` -
      -
      -
      - ${W("Canvas3DView")} -
      -
      -
      - `}[U("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}}class ate extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",co.DESIGN))}[$e("$el")](){return{style:{display:this.$config.is("editor.design.mode",co.DESIGN)?"block":"none"}}}template(){return D("div",{class:"feature-control inspector"},D("div",null,D(zc,{ref:"$tab",selectedValue:"style",onchange:e=>{this.$config.set("inspector.selectedValue",e)}},D(Hn,{value:"style",title:this.$i18n("inspector.tab.title.design")},D("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.style"),D("div",{class:"empty",style:"order: 1000000;"}))),this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,loadElements:r}=e.class;return D(Hn,{value:t,title:i,icon:e.icon},D("div",{style:"display: flex: flex-direction: column;"},r.map(s=>dl(s)),this.$injectManager.generate("inspector.tab."+e.value),D("div",{class:"empty",style:"order: 1000000;"})))}))))}}var ose="",gd=new Ir(3,1,.01,1e3);gd.name="Camera",gd.position.set(0,5,10),gd.lookAt(new R);class ote{constructor(e){this.editor=e,this.camera=gd.clone(),this.scene=new Yh,this.scene.name="Scene",this.sceneHelpers=new Yh,this.object={},this.geometries={},this.materials={},this.textures={},this.scripts={},this.materialsRefCounter=new Map,this.mixer=new XS(this.scene),this.selected=null,this.helpers={},this.cameras={},this.viewportCamera=this.camera,this.addCamera(this.camera)}emit(e,...t){this.editor.emit(e,...t)}setScene(e){for(this.scene.uuid=e.uuid,this.scene.name=e.name,this.scene.background=e.background,this.scene.environment=e.environment,this.scene.fog=e.fog,this.scene.userData=JSON.parse(JSON.stringify(e.userData));e.children.length>0;)this.addObject(e.children[0],void 0,void 0,!1);this.emit("sceneChanged",this.scene)}addObject(e,t,i,r=!0){e.traverse(s=>{s.geometry!==void 0&&this.addGeometry(s.geometry),s.material!==void 0&&this.addMaterial(s.material),this.addCamera(s),this.addHelper(s)}),t===void 0?this.scene.add(e):(t.children.splice(i,0,e),e.parent=t),this.emit("objectAdded",e),this.emit("sceneGraphChanged")}moveObject(e,t,i){if(t===void 0&&(t=this.scene),t.add(e),i!==void 0){var r=t.children.indexOf(i);t.children.splice(r,0,e),t.children.pop()}this.emit("sceneGraphChanged")}nameObject(e,t){e.name=t,this.emit("sceneGraphChanged")}removeObject(e){e.parent!==null&&(e.traverse(t=>{this.removeCamera(t),this.removeHelper(t),t.material!==void 0&&this.removeMaterial(t.material)}),e.parent.remove(e),this.emit("objectRemoved",e),this.emit("sceneGraphChanged"))}addGeometry(e){this.geometries[e.uuid]=e}setGeometryName(e,t){e.name=t,this.emit("sceneGraphChanged")}addMaterial(e){if(Fi(e))for(var t=0,i=e.length;tt.id===e)}setMaterialName(e,t){e.name=t,this.emit("sceneGraphChanged")}addTexture(e){this.textures[e.uuid]=e}addCamera(e){e.isCamera&&(this.cameras[e.uuid]=e,this.emit("cameraAdded",e))}removeCamera(e){this.cameras[e.uuid]!==void 0&&(delete this.cameras[e.uuid],this.emit("cameraRemoved",e))}addHelper(e,t){var s;var i=new Zo(2,4,2),r=new gs({color:16711680,visible:!1});if(t===void 0){if(e.isCamera)t=new Yee(e);else if(e.isPointLight)t=new Hee(e,1);else if(e.isDirectionalLight)t=new Xee(e,1);else if(e.isSpotLight)t=new Gee(e);else if(e.isHemisphereLight)t=new Wee(e,1);else if(e.isSkinnedMesh)t=new kv(e.skeleton.bones[0]);else if(e.isBone===!0&&((s=e.parent)==null?void 0:s.isBone)!==!0)t=new kv(e);else return;const a=new Ge(i,r);a.name="picker",a.userData.object=e,t.add(a)}this.sceneHelpers.add(t),this.helpers[e.id]=t,this.emit("helperAdded",t)}removeHelper(e){if(this.helpers[e.id]!==void 0){var t=this.helpers[e.id];t.parent.remove(t),delete this.helpers[e.id],this.emit("helperRemoved",t)}}addScript(e,t){this.scripts[e.uuid]===void 0&&(this.scripts[e.uuid]=[]),this.scripts[e.uuid].push(t),this.emit("scriptAdded",t)}removeScript(e,t){if(this.scripts[e.uuid]!==void 0){var i=this.scripts[e.uuid].indexOf(t);i!==-1&&this.scripts[e.uuid].splice(i,1),this.emit("scriptRemoved",t)}}getObjectMaterial(e,t){var i=e.material;return Fi(i)&&t!==void 0&&(i=i[t]),i}setObjectMaterial(e,t,i){Fi(e.material)&&t!==void 0?e.material[t]=i:e.material=i}setViewportCamera(e){this.viewportCamera=this.cameras[e],this.emit("viewportCameraChanged")}select(e){if(this.selected!==e){var t=null;e!==null&&(t=e.uuid),this.selected=e,this.editor.context.config.set("selected",t),this.emit("objectSelected",e)}}selectById(e){if(e===this.camera.id){this.select(this.camera);return}this.select(this.scene.getObjectById(e))}selectByUuid(e){this.scene.traverse(t=>{t.uuid===e&&this.select(t)})}deselect(){this.select(null)}focus(e){e!==void 0&&this.emit("objectFocused",e)}focusById(e){this.focus(this.scene.getObjectById(e))}clear(){this.camera.copy(gd),this.emit("cameraChanged"),this.scene.name="Scene",this.scene.userData={},this.scene.background=null,this.scene.environment=null,this.scene.fog=null;for(var e=this.scene.children;e.length>0;)this.removeObject(e[0]);this.geometries={},this.materials={},this.textures={},this.scripts={},this.materialsRefCounter.clear(),this.animations={},this.mixer.stopAllAction(),this.deselect(),this.emit("editorCleared")}async fromJSON(e){var t=new See,i=await t.parseAsync(e.camera);this.camera.copy(i),this.emit("cameraResetted"),this.scripts=e.scripts,this.setScene(await t.parseAsync(e.scene))}toJSON(){var e=this.scene,t=this.scripts;for(var i in t){var r=t[i];(r.length===0||e.getObjectByProperty("uuid",i)===void 0)&&delete t[i]}return{metadata:{},project:{shadows:this.editor.context.config.get("project/renderer/shadows"),shadowType:this.editor.context.config.get("project/renderer/shadowType"),vr:this.editor.context.config.get("project/vr"),physicallyCorrectLights:this.editor.context.config.get("project/renderer/physicallyCorrectLights"),toneMapping:this.editor.context.config.get("project/renderer/toneMapping"),toneMappingExposure:this.editor.context.config.get("project/renderer/toneMappingExposure")},camera:this.camera.toJSON(),scene:this.scene.toJSON(),scripts:this.scripts}}objectByUuid(e){return this.scene.getObjectByProperty("uuid",e,!0)}}var lte={command:"addCubeBox",execute:n=>{const e=new Bi(1,1,1,1,1,1),t=new gs({color:15794160}),i=new Ge(e,t);i.name="Box",i.position.y=.5,n.context.sceneManager.addObject(i),n.context.sceneManager.select(i)}},cte=Object.freeze(Object.defineProperty({__proto__:null,default:lte},Symbol.toStringTag,{value:"Module"})),hte={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(n){const e=Ze.create(n.context.config.get("bodyEvent").target);n.context.config.init("onMouseMovepageContainer",e)}},dte=Object.freeze(Object.defineProperty({__proto__:null,default:hte},Symbol.toStringTag,{value:"Module"}));const ute={"./command_list/addCubeBox.js":cte,"./command_list/editor.config.body.event.js":dte},g2={};Object.entries(ute).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),g2[n]=e.default});function pte(n){n.loadCommands(g2)}var fte=[{type:"button",icon:"cube",action:n=>{n.context.commands.emit("addCubeBox")}}];function gte(n){n.registerMenu("toolbar.left",fte)}function mte(n){n.registerUI("render.view",{})}var vte=[Dc,Fc,Nc,Vc,pte,ch,qb,zb,mte,gte];class yte extends ph{getManagers(){return{sceneManager:ote}}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.opt.data&&this.$editor.sceneManager.fromJSON(this.opt.data)}components(){return{LayerTab:Zb,ToolBar:Jb,ThreeInspector:ate,Body3DPanel:ste,PopupManager:gh,KeyboardManager:dh,IconManager:hh}}getPlugins(){return vte}initState(){return{leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
      -
      -
      - ${W("ToolBar")} -
      -
      -
      - ${W("Body3DPanel")} -
      -
      - ${W("LayerTab")} -
      -
      - ${W("ThreeInspector")} -
      -
      -
      - ${W("KeyboardManager")} -
      - ${W("PopupManager")} - ${W("IconManager")} -
      - `}[$e("$el")](){return{"data-design-mode":this.$config.get("editor.design.mode")}}[$e("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[$e("$leftArrow")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[$e("$leftPanel")](){let e="0px",t=this.state.leftSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=`-${this.state.leftSize}px`),{style:{left:e,width:t,bottom:i}}}[$e("$rightPanel")](){let e=0,t=this.state.bottomSize;return this.$config.false("show.right.panel")&&(e=-this.state.rightSize),{style:{right:e,bottom:t}}}[$e("$rightArrow")](){let e=6,t=this.state.bottomSize;return this.$config.true("show.right.panel")&&(e=this.state.rightSize+6),{style:{right:e,bottom:t}}}[$e("$bodyPanel")](){let e=this.state.leftSize,t=this.state.rightSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=0),this.$config.false("show.right.panel")&&(t=0),{style:{left:e,right:t,bottom:i}}}[qe("$splitter")+at("moveSplitter")+lt("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$el"),this.bindData("$splitter"),this.bindData("$headerPanel"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.bindData("$toggleRightButton"),this.bindData("$toggleLeftButton"),this.bindData("$bodyPanel"),this.bindData("$footerPanel"),this.emit("resizeEditor")}[Qt("show.left.panel")](){this.refresh(),this.nextTick(()=>{this.emit(ln)})}[Qt("show.right.panel")](){this.refresh(),this.nextTick(()=>{this.emit(ln)})}[Qt("editor.design.mode")](){this.bindData("$el")}[Kr("$middle")+St](){}[Yr("$middle")+St](){}[U("toggle.fullscreen")](){this.$el.toggleFullscreen()}[U("getLayoutElement")](e){Ue(e)&&e(this.refs)}}var lse="",bte=[U1,Dc,Fc,Nc,vb,Fb,Vc,ch,Mg,Sb,Bb,Cb,jb,Gb,Tb,Ib,Eb,Lb,Ob,Mb,_b],cse="";class xte extends ge{components(){return{CanvasView:sx,VerticalRuler:ox,HorizontalRuler:ax,PageSubEditor:jf}}template(){return` -
      -
      - ${W("PageSubEditor",{ref:"subeditor"})} -
      -
      -
      - ${W("CanvasView",{ref:"canvas"})} -
      -
      -
      - `}[$e("$el")](){return{class:"elf--body-panel"}}[Qt("show.ruler")](){this.refresh()}[U("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[Qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[$e("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}class _te extends ph{initialize(){super.initialize(),this.$context.pathkit.load()}getManagers(){return{snapManager:_1,selection:x1,segmentSelection:b1,history:f1,modelManager:m1,lockManager:g1,visibleManager:S1,clipboard:p1,pathkit:y1}}components(){return{PreviewBodyPanel:xte,PopupManager:gh,KeyboardManager:dh,IconManager:hh}}getPlugins(){return bte}template(){return` -
      -
      -
      -
      - ${W("PreviewBodyPanel")} -
      -
      - ${W("KeyboardManager")}
      - ${W("PopupManager")} - ${W("IconManager")}
      - `}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.$commands.emit("load.json",this.opt.data)}[Kr("$middle")+St](){}[Yr("$middle")+St](){}[U("toggle.fullscreen")](){this.$el.toggleFullscreen()}[U("getLayoutElement")](e){Ue(e)&&e(this.refs)}}function m2(n){return hl(vY,n)}function Ste(n){return hl(yte,n)}function wte(n){return hl(_D,n)}function Mte(n){return hl(kD,n)}function $te(n){return hl(_te,n)}C.ADD_BODY_FIRST_MOUSEMOVE=Of,C.ADD_BODY_MOUSEMOVE=zf,C.ADD_BODY_MOUSEUP=Vf,C.AFTER=ol,C.ALL_TRIGGER=y0,C.ALT=dw,C.ANIMATIONEND=Ww,C.ANIMATIONITERATION=Xw,C.ANIMATIONSTART=Uw,C.ARROW_DOWN=iw,C.ARROW_LEFT=rw,C.ARROW_RIGHT=nw,C.ARROW_UP=tw,C.AlignContent=hy,C.AlignItems=Ps,C.AssetParser=uh,C.BACKSPACE=aw,C.BEFORE=Q2,C.BIND=$e,C.BIND_CHECK_DEFAULT_FUNCTION=I0,C.BIND_CHECK_FUNCTION=E0,C.BLUR=xf,C.BRACKET_LEFT=hw,C.BRACKET_RIGHT=cw,C.BaseProperty=jt,C.BaseStore=uf,C.BlendMode=hr,C.BooleanOperation=Wn,C.BorderStyle=Xn,C.BoxShadowStyle=bn,C.CALLBACK=x0,C.CAPTURE=$w,C.CHANGE=yn,C.CHANGEINPUT=T0,C.CHECKER=Ht,C.CLICK=se,C.CMYKtoRGB=X4,C.COMMAND=Y2,C.CONFIG=Qt,C.CONTEXTMENU=w0,C.CONTROL=fw,C.CUSTOM=hs,C.CanvasViewToolLevel=Af,C.ClipPathType=xr,C.ClipboardActionType=Dd,C.ClipboardType=zM,C.Component=Pu,C.Constraints=Tt,C.ConstraintsDirection=Un,C.D1000=Sw,C.DEBOUNCE=Ft,C.DELAY=vf,C.DELETE=v0,C.DOMDIFF=It,C.DOUBLECLICK=cl,C.DOUBLETAB=Sf,C.DRAG=Vw,C.DRAGEND=S0,C.DRAGENTER=Dw,C.DRAGEXIT=Nw,C.DRAGLEAVE=Fw,C.DRAGOUT=Bw,C.DRAGOVER=Kr,C.DRAGSTART=on,C.DROP=Yr,C.DesignMode=co,C.DirectionNumberType=nA,C.DirectionType=Ts,C.Dom=Ze,C.DomDiff=Ld,C.END=lt,C.END_GUESTURE=DM,C.ENTER=ra,C.EQUAL=ow,C.ESCAPE=ll,C.EVENT=mf,C.EditingMode=Ti,C.Editor=wg,C.EditorElement=ge,C.FIRSTMOVE=Oc,C.FIT=xw,C.FOCUS=bf,C.FOCUSIN=Ec,C.FOCUSOUT=na,C.FRAME=ww,C.FUNC_END_CHARACTER=p0,C.FUNC_REGEXP=u0,C.FUNC_START_CHARACTER=gf,C.FlexDirection=br,C.FlexWrap=Bc,C.FragmentInstance=Yi,C.FuncType=Ut,C.GradientType=ue,C.HSLtoHSV=by,C.HSLtoRGB=Hc,C.HSVtoHSL=Dy,C.HSVtoRGB=du,C.HUEtoRGB=nu,C.IF=Qe,C.INPUT=fi,C.IntersectEpsilonNumberType=Rf,C.JustifyContent=uo,C.KEY=ew,C.KEYDOWN=Cc,C.KEYMAP_KEYDOWN=FM,C.KEYMAP_KEYUP=NM,C.KEYPRESS=zw,C.KEYUP=Pr,C.KEY_CODE=pa,C.KeyStringMaker=qr,C.LABtoRGB=cA,C.LABtoXYZ=fy,C.LEFT_BUTTON=an,C.LOAD=ve,C.Language=ca,C.Layout=At,C.Length=y,C.MAGIC_METHOD=ff,C.MAGIC_METHOD_REG=pf,C.META=pw,C.MINUS=lw,C.MOUSE=gw,C.MOUSEDOWN=Cw,C.MOUSEENTER=kw,C.MOUSELEAVE=_0,C.MOUSEMOVE=Iw,C.MOUSEOUT=Lw,C.MOUSEOVER=yf,C.MOUSEUP=Ew,C.MOVE=at,C.MagicMethod=Nn,C.MenuItemType=$s,C.NAME_SAPARATOR=Od,C.NotifyType=H0,C.OBSERVER=Tw,C.ON=K2,C.OPEN_CONTEXT_MENU=Nf,C.ObjectProperty=mh,C.Overflow=ml,C.PARAMS=Mw,C.PASSIVE=_w,C.PASTE=M0,C.PEN=vw,C.PIPE=g0,C.POINTEREND=P0,C.POINTERENTER=Hw,C.POINTERMOVE=lo,C.POINTEROUT=Lc,C.POINTEROVER=Ic,C.POINTERSTART=qe,C.POP_MODE_VIEW=GM,C.PREVENT=St,C.PUSH_MODE_VIEW=jM,C.PathGenerator=Tu,C.PathParser=_e,C.PathSegmentType=dy,C.PathStringManager=Ji,C.PivotRGB=ru,C.PivotXyz=tu,C.Point=xe,C.PolygonParser=_a,C.Position=zr,C.RAF=Pw,C.REFRESH_CONTENT=U0,C.REFRESH_SELECTION=kt,C.REFRESH_SELECTION_TOOL=da,C.RESIZE=$0,C.RESIZE_CANVAS=ln,C.RESIZE_WINDOW=ua,C.RGBtoCMYK=hA,C.RGBtoGray=pA,C.RGBtoHSL=Cs,C.RGBtoHSV=Gc,C.RGBtoLAB=fA,C.RGBtoSimpleGray=uA,C.RGBtoXYZ=yy,C.RGBtoYCrCb=vy,C.RIGHT_BUTTON=bw,C.RadialGradientSizeType=cn,C.RadialGradientType=Ci,C.ResizingMode=wt,C.ReverseRGB=eu,C.ReverseXyz=Qd,C.SAPARATOR=m0,C.SCROLL=jw,C.SELF=yw,C.SELF_TRIGGER=b0,C.SET_LOCALE=BM,C.SHIFT=uw,C.SHOW_COMPONENT_POPUP=W0,C.SHOW_NOTIFY=Ff,C.SPACE=sw,C.SPLITTER=ia,C.START_GUESTURE=VM,C.STOP=Bn,C.SUBMIT=Gw,C.SUBSCRIBE=U,C.SUBSCRIBE_ALL=Vd,C.SUBSCRIBE_SELF=Me,C.SegmentManager=xg,C.SpreadMethodType=Jr,C.StrokeLineCap=Kd,C.StrokeLineJoin=gl,C.THROTTLE=oo,C.TOGGLE_FULLSCREEN=Df,C.TOUCH=mw,C.TOUCHEND=Ow,C.TOUCHMOVE=Rw,C.TOUCHSTART=Aw,C.TRANSITIONCANCEL=qw,C.TRANSITIONEND=C0,C.TRANSITIONRUN=Kw,C.TRANSITIONSTART=Yw,C.TargetActionType=_n,C.TextAlign=cy,C.TextClip=jc,C.TextDecoration=qd,C.TextTransform=Zd,C.TimingFunction=Je,C.TransformValue=rA,C.UIElement=ds,C.UPDATE_CANVAS=Gi,C.UPDATE_VIEWPORT=si,C.VARIABLE_SAPARATOR=e0,C.ViewModeType=ha,C.VisibilityType=xn,C.WHEEL=_f,C.XYZtoLAB=gy,C.XYZtoRGB=py,C.YCrCbtoRGB=Y4,C.blend=ug,C.brightness=my,C.c=dA,C.checkHueColor=By,C.classnames=vn,C.clone=rt,C.collectProps=Yt,C.combineKeyArray=hf,C.contrast=Ny,C.contrastColor=K4,C.convertMatches=ga,C.convertMatchesArray=Zf,C.createBlankEditor=wte,C.createComponent=W,C.createComponentList=Rc,C.createDataEditor=Mte,C.createDesignEditor=m2,C.createElement=dl,C.createElementJsx=D,C.createHandlerInstance=d0,C.createThreeEditor=Ste,C.createWhiteBoard=$te,C.debounce=di,C.defaultValue=Wv,C.format=Is,C.formatWithoutAlpha=Ay,C.get=L2,C.getColorIndexString=su,C.getRef=Zw,C.getRootElementInstanceList=c0,C.getVariable=Tc,C.gradient=q4,C.gray=iu,C.hasVariable=i0,C.hex=Ry,C.hsl=Oy,C.hue_color=ya,C.ifCheck=Ed,C.initializeGroupVariables=H2,C.interpolateRGB=dg,C.interpolateRGBObject=Fy,C.isArray=Fi,C.isBoolean=Dn,C.isColor=xy,C.isFunction=Ue,C.isNotString=k2,C.isNotUndefined=$t,C.isNotZero=so,C.isNumber=_i,C.isObject=Fn,C.isString=ni,C.isUndefined=Di,C.isZero=Xv,C.keyEach=$c,C.keyMap=cf,C.keyMapJoin=Uv,C.makeEventChecker=f0,C.makeRequestAnimationFrame=Hv,C.matches=qf,C.mix=mo,C.normalizeWheelEvent=wf,C.parse=bi,C.parseGradient=_y,C.random=bl,C.randomByCount=zy,C.randomNumber=Qr,C.randomRGBA=zA,C.recoverVariable=t0,C.registAlias=s0,C.registElement=ao,C.registHandler=h0,C.registRootElementInstance=l0,C.renderRootElementInstance=U2,C.renderToString=hM,C.replaceElement=n0,C.retriveAlias=a0,C.retriveElement=o0,C.retriveHandler=W2,C.reverseMatches=vl,C.rgb=cu,C.scale=Dr,C.scaleH=Z4,C.scaleHSV=uu,C.scaleS=J4,C.scaleV=Q4,C.spreadVariable=r0,C.start=hl,C.throttle=ws,C.trim=Es,C.uuid=df,C.uuidShort=kd,C.variable=ta,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); + `}[ne("$el")](){return{class:`elf--body-panel ${this.$config.get("show.ruler")?"ruler":""}`}}[Tt("show.ruler")](){this.refresh()}[M("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[Tt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Tt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[ne("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}class Pg extends Ec{initialize(){super.initialize(),this.$context.pathkit.load()}afterRender(){super.afterRender(),this.$commands.emit("load.json",this.opt.data),this.$config.init("editor.layout.elements",this.children.$layout.getLayoutElements())}getManagers(){return{snapManager:b4,selection:u4,segmentSelection:d4,timeline:x4,history:i4,modelManager:n4,lockManager:s4,visibleManager:$4,clipboard:r4,pathkit:h4}}getPlugins(){return bA}getBodyPanel(){return C(js,{type:"body"},C(h7,{ref:"$bodyPanelView"}))}}function wg(s){return jl(Pg,s)}function d7(s){return jl(Ec,s)}$.ADD_BODY_FIRST_MOUSEMOVE=Hl,$.ADD_BODY_MOUSEMOVE=Ul,$.ADD_BODY_MOUSEUP=Wl,$.AFTER=ta,$.ALL_TRIGGER=id,$.ALT=zf,$.ANIMATIONEND=ym,$.ANIMATIONITERATION=bm,$.ANIMATIONSTART=vm,$.ARROW_DOWN=kf,$.ARROW_LEFT=Mf,$.ARROW_RIGHT=If,$.ARROW_UP=Tf,$.AlignContent=Qd,$.AlignItems=vi,$.AssetParser=gn,$.BACKSPACE=Lf,$.BEFORE=wf,$.BIND=ne,$.BIND_CHECK_DEFAULT_FUNCTION=fd,$.BIND_CHECK_FUNCTION=gd,$.BLUR=kl,$.BRACKET_LEFT=jf,$.BRACKET_RIGHT=Rf,$.BaseProperty=Ge,$.BaseStore=xl,$.BlankEditor=Ec,$.BlendMode=Wt,$.BooleanOperation=Qr,$.BorderStyle=Jr,$.BoxShadowStyle=Ir,$.CALLBACK=ad,$.CAPTURE=qf,$.CHANGE=Sr,$.CHANGEINPUT=ud,$.CHECKER=We,$.CLICK=A,$.CMYKtoRGB=S5,$.COMMAND=xf,$.CONFIG=Tt,$.CONTEXTMENU=ld,$.CONTROL=Ff,$.CUSTOM=ni,$.CanvasViewToolLevel=Nl,$.ClipPathType=qt,$.ClipboardActionType=no,$.ClipboardType=cv,$.Component=Ko,$.Constraints=Me,$.ConstraintsDirection=qr,$.D1000=Yf,$.DEBOUNCE=Ne,$.DELAY=wl,$.DELETE=rd,$.DOMDIFF=Ee,$.DOUBLECLICK=ia,$.DOUBLETAB=Il,$.DRAG=cm,$.DRAGEND=od,$.DRAGENTER=hm,$.DRAGEXIT=um,$.DRAGLEAVE=dm,$.DRAGOUT=pm,$.DRAGOVER=Yr,$.DRAGSTART=pr,$.DROP=Xr,$.DesignEditor=Pg,$.DesignMode=lv,$.DirectionNumberType=OP,$.DirectionType=yi,$.Dom=ge,$.DomDiff=Qn,$.END=Se,$.END_GUESTURE=dv,$.ENTER=Di,$.EQUAL=Vf,$.ESCAPE=ra,$.EVENT=Pl,$.EditingMode=St,$.Editor=Ju,$.EditorElement=Y,$.FIRSTMOVE=Na,$.FIT=Wf,$.FOCUS=Tl,$.FOCUSIN=ja,$.FOCUSOUT=Fi,$.FRAME=Kf,$.FUNC_END_CHARACTER=Qh,$.FUNC_REGEXP=qh,$.FUNC_START_CHARACTER=Sl,$.FlexDirection=Zt,$.FlexWrap=Ua,$.FragmentInstance=Lt,$.FuncType=Xe,$.GradientType=F,$.HSLtoHSV=ou,$.HSLtoRGB=Ya,$.HSVtoHSL=Cu,$.HSVtoRGB=Oo,$.HUEtoRGB=To,$.IF=fe,$.INPUT=dt,$.IntersectEpsilonNumberType=Gl,$.JustifyContent=Cs,$.KEY=Cf,$.KEYDOWN=Ra,$.KEYMAP_KEYDOWN=uv,$.KEYMAP_KEYUP=pv,$.KEYPRESS=lm,$.KEYUP=er,$.KEY_CODE=Yi,$.KeyStringMaker=gr,$.LABtoRGB=DP,$.LABtoXYZ=ru,$.LEFT_BUTTON=_r,$.LOAD=G,$.Language=Ui,$.Layout=Ae,$.Length=p,$.MAGIC_METHOD=_l,$.MAGIC_METHOD_REG=$l,$.META=Df,$.MINUS=Of,$.MOUSE=Bf,$.MOUSEDOWN=em,$.MOUSEENTER=sm,$.MOUSELEAVE=nd,$.MOUSEMOVE=rm,$.MOUSEOUT=im,$.MOUSEOVER=Cl,$.MOUSEUP=tm,$.MOVE=xe,$.MagicMethod=Ur,$.MenuItemType=mi,$.NAME_SAPARATOR=ro,$.NotifyType=Md,$.OBSERVER=Jf,$.ON=$f,$.OPEN_CONTEXT_MENU=Kl,$.ObjectProperty=mn,$.Overflow=ca,$.PARAMS=Zf,$.PASSIVE=Xf,$.PASTE=cd,$.PEN=Gf,$.PIPE=ed,$.POINTEREND=dd,$.POINTERENTER=mm,$.POINTERMOVE=Ps,$.POINTEROUT=Aa,$.POINTEROVER=za,$.POINTERSTART=me,$.POP_MODE_VIEW=mv,$.PREVENT=Ve,$.PUSH_MODE_VIEW=fv,$.PathGenerator=Zo,$.PathParser=K,$.PathSegmentType=Jd,$.PathStringManager=jt,$.PivotRGB=Co,$.PivotXyz=Po,$.Point=W,$.PolygonParser=rs,$.Position=nr,$.RAF=Qf,$.REFRESH_CONTENT=Id,$.REFRESH_SELECTION=Oe,$.REFRESH_SELECTION_TOOL=Xi,$.RESIZE=hd,$.RESIZE_CANVAS=Ga,$.RESIZE_WINDOW=sa,$.RGBtoCMYK=FP,$.RGBtoGray=GP,$.RGBtoHSL=bi,$.RGBtoHSV=Xa,$.RGBtoLAB=HP,$.RGBtoSimpleGray=NP,$.RGBtoXYZ=nu,$.RGBtoYCrCb=au,$.RIGHT_BUTTON=Uf,$.RadialGradientSizeType=Pr,$.RadialGradientType=bt,$.ResizingMode=Ce,$.ReverseRGB=So,$.ReverseXyz=_o,$.SAPARATOR=td,$.SCROLL=gm,$.SELF=Hf,$.SELF_TRIGGER=sd,$.SET_LOCALE=gv,$.SHIFT=Af,$.SHOW_COMPONENT_POPUP=Ed,$.SHOW_NOTIFY=Yl,$.SPACE=Ef,$.SPLITTER=Ai,$.START_GUESTURE=hv,$.STOP=Wr,$.SUBMIT=fm,$.SUBSCRIBE=M,$.SUBSCRIBE_ALL=so,$.SUBSCRIBE_SELF=Z,$.SegmentManager=kc,$.SpreadMethodType=mr,$.StrokeLineCap=yo,$.StrokeLineJoin=la,$.THROTTLE=Ss,$.TOGGLE_FULLSCREEN=Xl,$.TOUCH=Nf,$.TOUCHEND=om,$.TOUCHMOVE=nm,$.TOUCHSTART=am,$.TRANSITIONCANCEL=_m,$.TRANSITIONEND=pd,$.TRANSITIONRUN=$m,$.TRANSITIONSTART=xm,$.TargetActionType=Lr,$.TextAlign=qd,$.TextClip=Wa,$.TextDecoration=bo,$.TextTransform=xo,$.TimingFunction=ue,$.TransformValue=VP,$.UIElement=oi,$.UPDATE_CANVAS=Mt,$.UPDATE_VIEWPORT=st,$.VARIABLE_SAPARATOR=Dh,$.ViewModeType=Wi,$.VisibilityType=Er,$.WHEEL=Ml,$.XYZtoLAB=iu,$.XYZtoRGB=tu,$.YCrCbtoRGB=P5,$.blend=xc,$.brightness=su,$.c=BP,$.checkHueColor=Mu,$.classnames=kr,$.clone=be,$.collectProps=Ke,$.combineKeyArray=yl,$.contrast=ku,$.contrastColor=w5,$.convertMatches=Zi,$.convertMatchesArray=ac,$.createBlankEditor=d7,$.createComponent=R,$.createComponentList=Ba,$.createDesignEditor=wg,$.createElement=ao,$.createElementJsx=C,$.createHandlerInstance=Zh,$.debounce=lt,$.defaultValue=Eh,$.format=$i,$.formatWithoutAlpha=$u,$.get=rf,$.getColorIndexString=ko,$.getRef=Sm,$.getRootElementInstanceList=Yh,$.getVariable=Oa,$.gradient=C5,$.gray=wo,$.hasVariable=Bh,$.hex=_u,$.hsl=Su,$.hue_color=Ji,$.ifCheck=Zn,$.initializeGroupVariables=mf,$.interpolateRGB=bc,$.interpolateRGBObject=Tu,$.isArray=Gt,$.isBoolean=ai,$.isColor=lu,$.isFunction=de,$.isNotString=sf,$.isNotUndefined=ke,$.isNotZero=_s,$.isNumber=ft,$.isObject=Hr,$.isString=it,$.isUndefined=Ct,$.isZero=Lh,$.keyEach=La,$.keyMap=vl,$.keyMapJoin=Ih,$.makeEventChecker=Jh,$.makeRequestAnimationFrame=Mh,$.matches=sc,$.mix=Is,$.normalizeWheelEvent=El,$.parse=pt,$.parseGradient=cu,$.random=ua,$.randomByCount=Pu,$.randomNumber=vr,$.randomRGBA=uw,$.recoverVariable=Fh,$.registAlias=Hh,$.registElement=zi,$.registHandler=Kh,$.registRootElementInstance=Xh,$.renderRootElementInstance=vf,$.renderToString=jm,$.replaceElement=Gh,$.retriveAlias=Uh,$.retriveElement=Wh,$.retriveHandler=yf,$.reverseMatches=ha,$.rgb=Lo,$.scale=lr,$.scaleH=T5,$.scaleHSV=Ro,$.scaleS=k5,$.scaleV=M5,$.spreadVariable=Nh,$.start=jl,$.throttle=gi,$.trim=xi,$.uuid=bl,$.uuidShort=Jn,$.variable=ji,Object.defineProperties($,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/dist/style.css b/dist/style.css index d0aef37f2..0609068c3 100644 --- a/dist/style.css +++ b/dist/style.css @@ -1 +1 @@ -.colorpicker{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-shadow:0 0 10px 2px #0000001f;display:inline-block;position:relative;width:224px;z-index:1000}.colorpicker>.arrow{border-bottom:10px solid rgba(0,0,0,.2);border-left:10px solid transparent;border-right:10px solid transparent;display:none;height:0;left:7px;pointer-events:none;position:absolute;top:-10px;width:0}.colorpicker>.arrow:after{border-bottom:9px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:-9px;position:absolute;top:1px;width:0}.colorpicker .colorpicker-body .color-tab{border:1px solid #ececec;box-sizing:border-box;display:flex;flex-direction:column;height:350px}.colorpicker .colorpicker-body .color-tab.xd{height:200px}.colorpicker .colorpicker-body .color-tab .color-tab-header{display:flex;flex:none;flex-direction:row;height:20px}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item{background-color:#ececec;box-sizing:border-box;cursor:pointer;flex:1 1 auto;height:100%;padding:4px 10px;text-align:center}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item.active{background-color:#fff;border-bottom-color:#fff}.colorpicker .colorpicker-body .color-tab .color-tab-body{flex:1 1 auto;position:relative}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content.active{display:block}.colorpicker .colorpicker-body .color-panel{cursor:pointer;height:120px;overflow:hidden;position:relative}.colorpicker .colorpicker-body .color-panel>.saturation,.colorpicker .colorpicker-body .color-panel>.saturation>.value{height:100%;position:relative;width:100%}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border-radius:50%;height:10px;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.colorpicker .colorpicker-body .color-panel>.saturation{background-color:#cb998000;background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0));background-repeat:repeat-x}.colorpicker .colorpicker-body .color-panel>.saturation>.value{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border:1px solid #fff;box-shadow:0 0 2px #0000000d}.colorpicker .colorpicker-body .control{padding:10px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker .colorpicker-body .control>.color,.colorpicker .colorpicker-body .control>.empty{background-color:#fff;border-radius:50%;box-sizing:border-box;height:30px;left:12px;position:absolute;top:14px;width:30px}.colorpicker .colorpicker-body .control>.color{border:1px solid rgba(0,0,0,.1)}.colorpicker .colorpicker-body .control>.hue{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:6px 16px;position:relative}.colorpicker .colorpicker-body .control>.hue>.hue-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control>.opacity{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:3px 16px;position:relative}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{border-radius:50%;cursor:pointer;height:12px;left:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker .colorpicker-body .control>.hue>.hue-container{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control>.opacity>.opacity-container>.color-bar{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .control>.empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{background-color:#fefefe;border:1px solid rgba(0,0,0,.05);box-shadow:2px 2px 2px #0003}.colorpicker .colorpicker-body .information{box-sizing:border-box;position:relative}.colorpicker .colorpicker-body .information>input{bottom:20px;box-sizing:border-box;height:20px;padding:0 0 0 2px;position:absolute;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.colorpicker .colorpicker-body .information>input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information.hex>.information-item.hex,.colorpicker .colorpicker-body .information.hsl>.information-item.hsl,.colorpicker .colorpicker-body .information.rgb>.information-item.rgb{display:flex}.colorpicker .colorpicker-body .information>.information-item{box-sizing:border-box;display:none;margin-right:40px;padding:0 5px 0 9px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field{box-sizing:border-box;display:block;flex:1;padding:3px 1px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field>.title{color:#a9a9a9;padding-top:2px;text-align:center}.colorpicker .colorpicker-body .information>.information-item>.input-field input{border:1px solid #cbcbcb;border-radius:2px;box-sizing:border-box;color:#333;height:21px;padding:3px;text-align:center;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-l input[type=number],.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-s input[type=number]{padding-left:1px;padding-right:10px}.colorpicker .colorpicker-body .information>.information-item>.input-field .postfix{box-sizing:border-box;display:inline-block;height:21px;line-height:2;padding:2px;position:absolute;right:1px;text-align:center;top:2px}.colorpicker .colorpicker-body .information>.information-change{bottom:0;box-sizing:border-box;display:block;padding-top:5px;position:absolute;right:0;text-align:center;top:0;width:40px}.colorpicker .colorpicker-body .information>.information-change>.format-change-button{background:transparent;border:0;box-sizing:border-box;cursor:pointer;outline:none}.colorpicker .colorpicker-body .information>.title{color:#a3a3a3}.colorpicker .colorpicker-body .information>.input{color:#333}.colorpicker .colorpicker-body .colorsets{border-top:1px solid #e2e2e2}.colorpicker .colorpicker-body .colorsets>.menu{float:right;padding:10px 15px 10px 5px}.colorpicker .colorpicker-body .colorsets>.menu button{border:0;cursor:pointer;font-family:serif,sans-serif;font-weight:300;outline:none}.colorpicker .colorpicker-body .colorsets>.color-list{box-sizing:border-box;display:block;line-height:0;margin-right:30px;padding:10px 0 0 10px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item{background-size:contain;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-bottom:12px;margin-right:12px;overflow:hidden;position:relative;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item:hover{transform:scale(1.2)}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .color-view{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .add-color-item{color:#8e8e8e;cursor:pointer;display:inline-block;font-family:serif,sans-serif;font-weight:400;height:13px;line-height:1;margin-bottom:12px;margin-right:12px;text-align:center;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser{background-color:#00000080;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .05s ease-out}.colorpicker .colorpicker-body .color-chooser.open{opacity:1;pointer-events:all}.colorpicker .colorpicker-body .color-chooser .color-chooser-container{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:120px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header{border-bottom:1px solid rgba(0,0,0,.2);box-sizing:border-box;display:flex;height:34px;left:0;padding:3px 0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title{box-sizing:border-box;color:#000;flex:2;font-weight:700;margin:0;overflow:hidden;padding:5px 5px 5px 14px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items{cursor:pointer;display:block;flex:1;height:100%;line-height:2;padding-right:10px;text-align:right}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list{bottom:0;left:0;overflow:auto;position:absolute;right:0;top:34px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item{border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;padding:3px 0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover{background-color:#0000000d}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title{box-sizing:border-box;color:#000;flex:2;font-weight:400;margin:0;overflow:hidden;padding:5px 5px 5px 14px;pointer-events:none;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items{cursor:pointer;display:block;flex:3;height:100%;line-height:1.6;pointer-events:none}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;background-size:contain;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-right:10px;overflow:hidden;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view{height:100%;margin:0;padding:0;pointer-events:none;width:100%}.colorpicker.sketch{border-radius:5px}.colorpicker.sketch>.colorpicker-body .color-panel{box-sizing:border-box;height:150px}.colorpicker.sketch>.colorpicker-body>.control{margin-top:5px;padding:0}.colorpicker.sketch>.colorpicker-body>.control>.color,.colorpicker.sketch>.colorpicker-body>.control>.empty{background-color:#fff;border-radius:100%;box-sizing:border-box;height:26px;left:auto;position:absolute;right:0;top:1px;width:26px}.colorpicker.sketch>.colorpicker-body>.control>.color{box-shadow:inset 0 0 1px #00000080}.colorpicker.sketch>.colorpicker-body>.control>.hue{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.hue>.hue-container{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control>.opacity{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container,.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container .color-bar{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control .drag-bar,.colorpicker.sketch>.colorpicker-body>.control .drag-bar2{background-color:#fff;border:1px solid #fff;border-radius:50%;bottom:1px!important;box-shadow:0 0 1px #00000080;height:12px;left:0;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker.sketch>.colorpicker-body>.information{margin-top:5px}.colorpicker.sketch>.colorpicker-body>.information .information-change{display:none}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.rgb{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.hsl{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hex{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hsl,.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.rgb{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.hsl{display:inherit}.colorpicker.sketch>.colorpicker-body>.information .information-item{display:inline-flex!important;margin-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title{color:#000;cursor:pointer}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title:hover{font-weight:700}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field:last-child:not(:first-child){padding-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item.hex{padding-left:0;padding-right:0;width:70px}.colorpicker.sketch>.colorpicker-body>.information .information-item.rgb{padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.information .information-item.hsl{display:none;padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.colorsets>.menu{display:none}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list{margin-right:0;padding-right:12px}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list .color-item{border-radius:3px;height:16px;margin-bottom:10px;margin-right:9px;width:16px}.colorsets-contextmenu{background-color:#ececec;border:1px solid #ccc;border-radius:6px;display:none;list-style:none;padding:4px 0;position:fixed}.colorsets-contextmenu.show{display:inline-block}.colorsets-contextmenu .elf--menu-item{cursor:default;padding:2px 20px}.colorsets-contextmenu .elf--menu-item:hover{background-color:#5ea3fb;color:#fff}.colorsets-contextmenu.small .elf--menu-item.small-hide{display:none}.elf-studio{--elf--editor-ruler-size:20px;bottom:0;box-sizing:border-box;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;font-size:11px;margin:0;padding:0;right:0}.elf-studio *,.elf-studio :after,.elf-studio :before{-webkit-overflow-scrolling:touch;box-sizing:border-box}.elf-studio.ua-window .scrollbar::-webkit-scrollbar{background-color:#aaa;height:8px;width:5px}.elf-studio.ua-window .scrollbar::-webkit-scrollbar-thumb{background:#000}.elf-studio[data-theme=dark]{--elf--range-thumb-color:#228be6;--elf--range-track-color:#616161;--elf--range-thumb-border-color:rgba(0,0,0,.8);--elf--input-background-color:#343a40;--elf--input-inactive-color:#495057;--elf--input-border-color:#adb5bd;--elf--input-font-color:#f8f9fa;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#495057;--elf--selection-tool-border-color:#3a89f0;--elf--selected-color:#228be6;--elf--selected-color-2:#1864ab;--elf--selected-hover-color:#74c0fc;--elf--selected-border-color:#1c7ed6;--elf--layout-border-color:#212529;--elf--background-color:#343a40;--elf--header-background-color:#212529;--elf--selected-background-color:#535353;--elf--font-color:#f8f9fa;--elf--disabled-font-color:#e9ecef;--elf--menu-item-title-font-color:#e9ecef;--elf--selected-font-color:#f8f9fa;--elf--divider-color:#616161;--elf--property-border-color:#0b0b0b;--elf--property-title-background-color:#161616;--elf--property-background-color:#22282c;--elf--list-item-font-color:#fff;--elf--list-item-selected-color:#03a9f4;--elf--list-item-disable-font-color:#828282;--elf--popup-background-color:#343a40;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(61,61,61,.5);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#000;--elf--path-segment-stroke-color:#0bf;--elf--timeline-gauge-background-color:#ee4b66;--elf--timeline-gauge-handle-color:#fffaaf;--elf--timeline-row-selected-color:rgba(67,92,181,.4);--elf--timeline-property-add-background-color:#666;--elf--guide-line-color:#ca7976;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#435cb5;--elf--canvas-background-color:#d3d3d3;--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.214);--elf--rotate-x-border-color:#6868f7;--elf--rotate-y-border-color:#70c570;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#f8f9fa;--elf--tab-header-background-color:#212529;--elf--tab-font-color:#949494}.elf-studio[data-theme=light]{--elf--range-thumb-color:#609de2;--elf--range-track-color:#cfcfcf;--elf--range-thumb-border-color:#609de2;--elf--input-background-color:#fff;--elf--input-inactive-color:#f1f3f5;--elf--input-border-color:#ced4da;--elf--input-font-color:#333;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#868e96;--elf--selection-tool-border-color:#3a89f0;--elf--layout-border-color:#dee2e6;--elf--selected-color:#66baff;--elf--selected-color-2:#339af0;--elf--selected-hover-color:#d0ebff;--elf--selected-border-color:#609de2;--elf--background-color:#fff;--elf--header-background-color:#212529;--elf--selected-background-color:#d8d8d8;--elf--font-color:#333;--elf--disabled-font-color:#c1c1c1;--elf--menu-item-title-font-color:#f8f9fa;--elf--selected-font-color:#fff;--elf--divider-color:#cfcfcf;--elf--property-border-color:#e5e5e5;--elf--property-title-background-color:#fff;--elf--property-background-color:#fff;--elf--list-item-font-color:#000;--elf--list-item-selected-color:#609de2;--elf--list-item-disable-font-color:#a3a3a3;--elf--popup-background-color:#fff;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(42,42,42,.478);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#5c5c5c;--elf--path-segment-stroke-color:#b7b7b7;--elf--timeline-gauge-background-color:#435cb5;--elf--timeline-gauge-handle-color:#748ff1;--elf--timeline-row-selected-color:#609de2;--elf--timeline-property-add-background-color:#747474;--elf--guide-line-color:#66baff;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#36457a;--elf--canvas-background-color:hsla(0,0%,7%,.1);--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.5);--elf--rotate-x-border-color:#643ac7;--elf--rotate-y-border-color:#8bdf8b;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#fff;--elf--tab-header-background-color:#f6fafc;--elf--tab-font-color:#adadad}.elf-studio{height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.elf-studio [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf-studio input[type=email],.elf-studio input[type=number],.elf-studio input[type=text],.elf-studio textarea{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);color:var(--elf--input-font-color);outline:none}.elf-studio select{background-color:var(--elf--input-background-color);border-radius:3px;color:var(--elf--font-color);line-height:1.6;padding:0 4px}.elf-studio button,.elf-studio select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;vertical-align:middle}.elf-studio button{background-color:transparent;border-width:0;color:var(--elf--button-front-color);display:inline-block;padding:0}.elf-studio button svg{height:100%;width:100%}.elf-studio input[type=file].embed-file-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--elf--background-color);display:inline-block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .add-image-button{display:none}.elf-studio .icon svg,.elf-studio button svg,.elf-studio label svg{height:16px;width:16px}.elf-studio .icon svg circle,.elf-studio .icon svg ellipse,.elf-studio .icon svg line,.elf-studio .icon svg path,.elf-studio .icon svg polygon,.elf-studio .icon svg polyline,.elf-studio .icon svg rect,.elf-studio .icon svg text,.elf-studio .icon svg tspan,.elf-studio .icon svg use,.elf-studio button svg circle,.elf-studio button svg ellipse,.elf-studio button svg line,.elf-studio button svg path,.elf-studio button svg polygon,.elf-studio button svg polyline,.elf-studio button svg rect,.elf-studio button svg text,.elf-studio button svg tspan,.elf-studio button svg use,.elf-studio label svg circle,.elf-studio label svg ellipse,.elf-studio label svg line,.elf-studio label svg path,.elf-studio label svg polygon,.elf-studio label svg polyline,.elf-studio label svg rect,.elf-studio label svg text,.elf-studio label svg tspan,.elf-studio label svg use{fill:currentColor;stroke-width:0}.elf-studio .primary{background-color:var(--elf--selected-color);color:var(--elf--selected-text-color)}.elf-studio input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:3px 0;width:100%}.elf-studio input[type=range]:focus{outline:none}.elf-studio input[type=range]::-moz-focus-outer{border:0}.elf-studio input[type=range]::-webkit-slider-runnable-track{background:var(--elf--range-track-color);border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--elf--range-thumb-color);border:1px solid var(--elf--range-thumb-border-color);border-radius:100%;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-webkit-slider-runnable-track{background:var(--elf--range-track-color)}.elf-studio input[type=range]::-moz-range-track{background:var(--elf--range-track-color);border-radius:10px;box-shadow:inset 0 1px 3px #0000001f,inset 0 1px 2px #0000001f;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-moz-range-thumb{background:var(--elf--range-thumb-color);border:1px solid #000;border-radius:20px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]::-ms-track{background:var(--elf--range-track-color);border:1px solid #000;border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-ms-fill-lower{box-shadow:0 0 #000,0 0 #0d0d0d}.elf-studio input[type=range]::-ms-fill-lower,.elf-studio input[type=range]::-ms-fill-upper{background:var(--elf--range-thumb-color);border:0 solid #010101;border-radius:0}.elf-studio input[type=range]::-ms-thumb{background:var(--elf--range-thumb-color);border-radius:9px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-ms-fill-lower,.elf-studio input[type=range]:focus::-ms-fill-upper{background:var(--elf--range-thumb-color)}.elf-studio .colorpicker-layer .colorpicker{background-color:transparent;border:0;box-shadow:none;width:100%}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body{width:240px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .color-item{height:20px;margin:2px!important;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .add-color-item{height:20px;margin:0!important;padding:3px;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .wheel{background-color:transparent;border:0}.elf-studio .icons-group{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(6,40px);max-height:200px;overflow:auto}.elf-studio .icons-group .icon-item{display:inline-block;margin-bottom:2px;margin-right:2px;width:40px}.elf-studio .icons-group .icon-item .title{word-wrap:break-word;color:var(--elf--list-item-font-color);display:block;line-height:1;margin-top:5px;text-align:left;word-break:break-all}.elf-studio .icons-group .icon-item .icon-svg{background-color:var(--elf--input-background-color);border-radius:4px;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding:8px;width:40px}.elf-studio .icons-group .icon-item .icon-svg>svg{height:100%;width:100%}.elf-studio .icons-group .icon-item .icon-svg:hover{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf-studio [data-tooltip]{position:relative}.elf-studio [data-tooltip]:hover:after{opacity:1}.elf-studio [data-tooltip][data-tooltip-dy]:after{top:170%}.elf-studio [data-tooltip]:after{background-color:var(--elf--tooltip-background-color);border:1px solid var(--elf--border-color);border-radius:2px;box-sizing:border-box;color:var(--elf--tooltip-font-color);content:attr(data-tooltip);display:inline-block;font-size:11px;font-weight:400;left:50%;line-height:1.6;opacity:0;padding:4px 5px;pointer-events:none;position:absolute;right:auto;text-align:center;top:110%;transform:translate(-50%);transition:all .1s linear;white-space:nowrap;z-index:10000000}.elf-studio [data-tooltip][data-direction=right]:after{left:120%;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=left]:after{position:absolute;right:120%;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=bottom]:after{left:50%;position:absolute;right:auto;top:var(--elf--toggle-checkbox-tooltip-bottom-top,100%);transform:translate(-50%)}.elf-studio [data-tooltip][data-direction=top]:after{left:50%;position:absolute;right:auto;top:var(----elf--toggle-checkbox-tooltip-top,0);transform:translate(-50%) translateY(-150%)}.elf-studio [data-tooltip][data-direction="top left"]:after{left:0;position:absolute;right:auto;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="top right"]:after{left:auto;position:absolute;right:0;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="bottom right"]:after{left:auto;position:absolute;right:0;top:110%;transform:translate(0)}.elf-studio .animation-selector{grid-column-gap:5px;display:grid;grid-template-columns:100px 1fr 30px;width:100%}.elf-studio .animation-selector .timeline-object{display:inline-block}.elf-studio .animation-selector .timeline-object.selected{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-value-area{background-color:var(--elf--background-color);border-left:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;position:absolute;right:0;top:0;width:260px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding:0 20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content.padding-zero{padding-top:0}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input{padding-top:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area{display:inline-block;height:24px;position:relative;vertical-align:middle;width:120px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area>input{box-sizing:border-box;height:100%;padding:2px;width:100%}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area:after{bottom:100%;box-sizing:border-box;color:var(--elf--input-sub-font-color);content:"Hour:Minute:Second:Frame";left:0;padding-left:2px;position:absolute}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title,.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title>.tools{display:none}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2{display:block;text-align:right}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2 label{cursor:pointer}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2:hover{color:var(--elf--selected-color)}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button{text-align:right;width:100px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button svg{vertical-align:middle;width:16px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .title{color:var(--elf--font-color)}.elf-studio .timeline-value-area .timeline-value-editor .value{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;margin:0 auto;padding:5px;width:228px}.elf-studio .timeline-value-area .timeline-value-editor .value label{overflow:hidden;text-overflow:ellipsis}.elf-studio .timeline-value-area .timeline-value-editor .value .editor-area{min-height:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding-top:10px}.elf-studio .timeline-animation-area{background-color:var(--elf--background-color);border-right:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:200px}.elf-studio .timeline-animation-area .property{padding:0}.elf-studio .timeline-animation-area .property-title{height:39px!important;padding-bottom:0;padding-top:0}.elf-studio .timeline-animation-area .property-title label{padding-left:10px}.elf-studio .timeline-animation-area .property-body{padding:0!important}.elf-studio .timeline-area{bottom:0;left:200px;position:absolute;right:260px;top:0}.elf-studio .timeline-area .timeline-header{border-top:1px solid var(--elf--border-color);height:40px;left:0;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar{border-bottom:1px solid var(--elf--border-color);border-right:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar{padding:10px 5px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row{grid-column-gap:5px;display:grid;grid-template-columns:50px 1fr;margin-bottom:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row label{padding:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row .input input{min-width:50px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons{display:flex}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="0.5"] [data-value="0.5"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="1"] [data-value="1"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="2"] [data-value="2"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="3"] [data-value="3"]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons button{border:1px solid var(--elf--border-color);height:auto;min-width:50px;padding:2px 10px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar{bottom:0;left:270px;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration{height:5px;left:0;position:absolute;right:0;top:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-left{background-color:var(--elf--border-color);height:100%;left:15px;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-right{background-color:var(--elf--border-color);height:100%;position:absolute;right:15px;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider{background-color:var(--elf--border-color);height:100%;left:10px;position:absolute;right:10px;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .start{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;transform:translate(-100%);width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .end{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:100%;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .gauge{background-color:var(--elf--timeline-gauge-background-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view canvas{height:25px;left:0;position:absolute;top:15px;width:100%}.elf-studio .timeline-area .timeline-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf-studio .timeline-area .timeline-body .timeline-object-area{border-right:1px solid var(--elf--border-color);bottom:0;left:0;overflow:auto;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer .icon svg{transform:rotate(0)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);color:var(--elf--font-color);display:grid;grid-template-columns:20px 1fr 50px;height:24px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row[data-selected=true]{background-color:var(--elf--timeline-row-selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value{padding:5px 0;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value input{vertical-align:middle;width:100%}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon{padding-top:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon svg{height:16px;transform:rotate(90deg);transition:transform .2s ease;width:16px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .title{color:var(--elf--font-color);cursor:pointer;padding-top:5px;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools{padding-top:3px;text-align:right}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools>*{margin-right:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools .empty{margin-right:0}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property{grid-template-columns:20px 1fr .8fr 50px;overflow:hidden}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .title{padding-left:10px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add{background-color:var(--elf--border-color);box-shadow:0 0 0 1px var(--elf--border-color);cursor:pointer;display:inline-block;height:7px;transform:translate(-4px) translateY(0) rotate(45deg);vertical-align:middle;width:7px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 2px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view{bottom:0;left:270px;pointer-events:none;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view canvas{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area{bottom:0;left:270px;overflow:auto;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container{min-height:100%;outline:none;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container .drag-area{background-color:#3585bdb3;border:1px solid #7db4db;height:0;left:-10000px;pointer-events:none;position:absolute;right:-10000px;width:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe.collapsed .timeline-keyframe-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row{border-bottom:1px solid var(--elf--border-color);height:24px;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe{background-color:rgba(var(--elf--border-color),.5);display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow{display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back{display:inline-block;height:100%;position:absolute}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .offset-line{background-color:var(--elf--selected-color);display:inline-block;height:1px;position:absolute;top:50%;transform:translateY(-52%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .sub-offset{background-color:#0bc4e4;display:inline-block;height:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px}.elf-studio .timeline-play-control{grid-column-gap:5px;display:grid;grid-template-columns:188px 120px 120px 1fr;text-align:left}.elf-studio .timeline-play-control .speed-number{position:relative}.elf-studio .timeline-play-control .speed-number:after{content:"X";display:inline-block;position:absolute;right:14px;top:1px}.elf-studio .timeline-play-control .speed-number input{width:100%}.elf-studio .timeline-play-control label{color:var(--elf--font-color);padding-right:10px;vertical-align:middle}.elf-studio .timeline-play-control label svg{height:16px;vertical-align:middle;width:16px}.elf-studio .timeline-play-control .input{vertical-align:middle}.elf-studio .timeline-play-control .input input{height:20px;vertical-align:middle;width:100%}.elf-studio .timeline-play-control .row{display:flex}.elf-studio .timeline-play-control .row:first-child{text-align:center}.elf-studio .timeline-play-control button{display:inline-block;height:24px;vertical-align:middle;width:24px}.elf-studio .timeline-play-control button.play{color:var(--elf--selected-color)}.elf-studio .timeline-play-control button.pause{color:#6677d8;display:none}.elf-studio .timeline-play-control .play-buttons[data-status=play] .pause{display:inline-block}.elf-studio .timeline-play-control .play-buttons[data-status=play] .play{display:none}.elf-studio .timeline-play-control .play-buttons[data-status=pause] .play{display:inline-block}.elf-studio .timeline-play-control .direction-buttons{display:flex;padding-top:2px}.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate-reverse] [data-value=alternate-reverse],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate] [data-value=alternate],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=normal] [data-value=normal],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=reverse] [data-value=reverse]{background-color:var(--elf--selected-background-color);color:var(--elf--selected-color)}.elf-studio .timeline-play-control .direction-buttons button{border-radius:3px;height:20px;margin-right:5px;width:20px}.elf-studio .keyframe-time-control .time-manager{grid-column-gap:0;display:grid;grid-template-columns:20px 90px 70px 84px 10px}.elf-studio .keyframe-time-control .time-manager button{color:var(--elf--font-color)}.elf-studio .keyframe-time-control .time-manager button svg path{fill:currentColor}.elf-studio .keyframe-time-control .time-manager label{color:var(--elf--font-color);padding-right:0}.elf-studio .keyframe-time-control .time-manager label svg{height:16px;width:16px}.elf-studio .keyframe-time-control input[type=text]{width:80px}.elf-studio .logo-item{align-items:center;display:flex;flex-direction:row;justify-content:center}.elf-studio .logo-item label.logo{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAMS2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdUU8kanltSSWiBCEgJvYlSpEsJoUUQkCrYCEkgocSYEETsyrIKrl1EQF3RVREXXQsga0Vd66JgX8uLsqisrIsFGypvUkDXPe+98+acufe7//z/95c7d+4MAHq1PKk0H9UHoEBSKEuMCmNNSs9gkboACggAAFtgw+PLpeyEhFj4BIbuf2+vbwBEdb/qpuL65/h/bQYCoZwPAJIAcZZAzi+A+CAAeClfKisEgOinimJWoVSFp0BsJIMBQixV4RwNLlXhLA2uUuskJ3Ig3gMAmcbjyXIA0G2BclYRPwfy6N6C2F0iEEsA0CNDHMwX8QQQR0M8qqBghgpDPeCU9QVPzt84s4Y5ebycYazJRd3I4WK5NJ83+/8sx/9uBfmKIR8OsNNEsuhEVc6wbrfyZsSoMA3iXklWXDzEhhC/FQvU+hCjVJEiOkWjj5rz5RxYM8CE2F3AC4+B2BziSEl+XKxWnpUtjuRCDGcIWiwu5CZrbZcK5RFJWs5a2YzE+CGcLeOwtbaNPJnar0r/tCIvha3lvyUScof4X5WIktM0MWPUInFqHMS6EDPleUkxGh3MrkTEiRvSkSkSVfHbQRwglESFafixadmyyEStvqxAPpQvtlQk5sZpcXWhKDlay7OHz1PHbwJxi1DCThniEconxQ7lIhCGR2hyx64IJSnafDGltDAsUWv7QpqfoNXHqcL8KJXcBmJzeVGS1hYPLoQTUsOPx0kLE5I1ceJZubzxCZp48GIQCzggHLCAAvYsMAPkAnF7b3MvfNKMRAIekIEcIARuWsmQRZp6RAKvSaAE/AmREMiH7cLUo0JQBOUfh6WaqxvIVo8WqS3ywCOIC0AMyIfPCrWVZNhbKvgdSsT/8M6HsebDrhr7p4wNJbFaiWKIl6U3pEmMIIYTo4mRRGfcDA/GA/FYeA2F3RP3w/2Hov2sT3hE6CA8JFwnKAm3p4sXy77KhwUmACX0EKnNOevLnHEHyOqNh+FBkB9y40zcDLjhY6EnNh4CfXtDKUcbuSr7r7n/lsMXVdfqUdwpKGUEJZTi9LWlrouu9zCLqqZfVkgTa9ZwXTnDI1/753xRaQG8x3ytiS3FDmBnsZPYeewI1gxY2HGsBbuEHVXh4Vn0u3oWDXlLVMeTB3nE//DH0/pUVVLu3uDe4/5BM1YoLFatj4AzQzpbJs4RFbLYcOUXsrgS/uhRLE93D38AVP8RzTL1kqn+PyDMC59lS6gABEkGBwePfJbFvAfgoDUAVOVnmWMnXA7gWn9uNV8hK9LIcNWFAKhAD35RpsAS/qWcYD6ewAcEglAQAcaDeJAM0sE0WGURnM8yMAvMBYtAGagAq8B6UA22gG1gF/gR7AfN4Ag4CX4BF8EVcB3cgbOnGzwFfeA1GEAQhITQEQZiilgh9ogr4on4IcFIBBKLJCLpSCaSg0gQBTIXWYJUIGuQamQrUo/8hBxGTiLnkQ7kNvIA6UFeIO9RDKWhRqgF6oCOQf1QNhqDJqNT0Rx0JlqClqIr0Cq0Dt2DNqEn0YvodVSJPkX7MYDpYEzMGnPD/DAOFo9lYNmYDJuPlWOVWB3WiLXC93wVU2K92DuciDNwFu4GZ3A0noLz8Zn4fHw5Xo3vwpvw0/hV/AHeh38i0AnmBFdCAIFLmETIIcwilBEqCTsIhwhn4NfUTXhNJBKZREeiL/wa04m5xDnE5cRNxL3EE8QOYhexn0QimZJcSUGkeBKPVEgqI20k7SEdJ3WSuklvyTpkK7InOZKcQZaQF5MrybvJx8id5MfkAYo+xZ4SQImnCCizKSsp2ymtlMuUbsoA1YDqSA2iJlNzqYuoVdRG6hnqXepLHR0dGx1/nYk6Yp2FOlU6+3TO6TzQeUczpLnQOLQpNAVtBW0n7QTtNu0lnU53oIfSM+iF9BX0evop+n36W12G7mhdrq5Ad4FujW6TbqfuMz2Knr0eW2+aXolepd4Bvct6vfoUfQd9jj5Pf75+jf5h/Zv6/QYMAw+DeIMCg+UGuw3OGzwxJBk6GEYYCgxLDbcZnjLsYmAMWwaHwWcsYWxnnGF0GxGNHI24RrlGFUY/GrUb9RkbGo81TjUuNq4xPmqsZGJMByaXmc9cydzPvMF8P8JiBHuEcMSyEY0jOke8MRlpEmoiNCk32Wty3eS9Kcs0wjTPdLVps+k9M9zMxWyi2SyzzWZnzHpHGo0MHMkfWT5y/8jfzFFzF/NE8znm28wvmfdbWFpEWUgtNlqcsui1ZFqGWuZarrM8ZtljxbAKthJbrbM6bvUHy5jFZuWzqlinWX3W5tbR1grrrdbt1gM2jjYpNott9trcs6Xa+tlm266zbbPts7Oym2A3167B7jd7ir2fvch+g/1Z+zcOjg5pDt86NDs8cTRx5DqWODY43nWiO4U4zXSqc7rmTHT2c85z3uR8xQV18XYRudS4XHZFXX1cxa6bXDtGEUb5j5KMqht1043mxnYrcmtwezCaOTp29OLRzaOfjbEbkzFm9ZizYz65e7vnu293v+Nh6DHeY7FHq8cLTxdPvmeN5zUvulek1wKvFq/nY13HCsduHnvLm+E9wftb7zbvjz6+PjKfRp8eXzvfTN9a35t+Rn4Jfsv9zvkT/MP8F/gf8X8X4BNQGLA/4K9At8C8wN2BT8Y5jhOO2z6uK8gmiBe0NUgZzArODP4+WBliHcILqQt5GGobKgjdEfqY7czOZe9hPwtzD5OFHQp7wwngzOOcCMfCo8LLw9sjDCNSIqoj7kfaROZENkT2RXlHzYk6EU2IjoleHX2Ta8Hlc+u5feN9x88bfzqGFpMUUx3zMNYlVhbbOgGdMH7C2gl34+zjJHHN8SCeG782/l6CY8LMhJ8nEicmTKyZ+CjRI3Fu4tkkRtL0pN1Jr5PDklcm30lxSlGktKXqpU5JrU99kxaetiZNOWnMpHmTLqabpYvTWzJIGakZOzL6J0dMXj+5e4r3lLIpN6Y6Ti2een6a2bT8aUen603nTT+QSchMy9yd+YEXz6vj9Wdxs2qz+vgc/gb+U0GoYJ2gRxgkXCN8nB2UvSb7SU5QztqcHlGIqFLUK+aIq8XPc6Nzt+S+yYvP25k3mJ+Wv7eAXJBZcFhiKMmTnJ5hOaN4RofUVVomVc4MmLl+Zp8sRrZDjsinylsKjeCG/ZLCSfGN4kFRcFFN0dtZqbMOFBsUS4ovzXaZvWz245LIkh/m4HP4c9rmWs9dNPfBPPa8rfOR+Vnz2xbYLihd0L0wauGuRdRFeYt+Xey+eM3iV0vSlrSWWpQuLO36JuqbhjLdMlnZzW8Dv92yFF8qXtq+zGvZxmWfygXlFyrcKyorPiznL7/wncd3Vd8Nrshe0b7SZ+XmVcRVklU3Voes3rXGYE3Jmq61E9Y2rWOtK1/3av309ecrx1Zu2UDdoNigrIqtatlot3HVxg/VourrNWE1e2vNa5fVvtkk2NS5OXRz4xaLLRVb3n8v/v7W1qitTXUOdZXbiNuKtj3anrr97A9+P9TvMNtRsePjTslO5a7EXafrfevrd5vvXtmANigaevZM2XPlx/AfWxrdGrfuZe6t2Af2Kfb98VPmTzf2x+xvO+B3oPGg/cHaQ4xD5U1I0+ymvmZRs7IlvaXj8PjDba2BrYd+Hv3zziPWR2qOGh9deYx6rPTY4PGS4/0npCd6T+ac7Gqb3nbn1KRT105PPN1+JubMuV8ifzl1ln32+Lmgc0fOB5w/fMHvQvNFn4tNl7wvHfrV+9dD7T7tTZd9L7dc8b/S2jGu41hnSOfJq+FXf7nGvXbxetz1jhspN27dnHJTeUtw68nt/NvPfyv6beDOwruEu+X39O9V3je/X/cv53/tVfoojz4If3DpYdLDO138rqe/y3//0F36iP6o8rHV4/onnk+O9ET2XPlj8h/dT6VPB3rL/jT4s/aZ07ODf4X+dalvUl/3c9nzwRfLX5q+3Plq7Ku2/oT++68LXg+8KX9r+nbXO793Z9+nvX88MOsD6UPVR+ePrZ9iPt0dLBgclPJkPPVWAIMdzc4G4MVOAOjpADCuwP3DZM05T90QzdlUjcB/wpqzoLr5ANAIb6rtOucEAPtgd1gIuWFXbdWTQwHq5TXctU2e7eWp4aLBEw/h7eDgSwsASK0AfJQNDg5sGhz8uB0GexuAEzM150tVI8KzwffuKtRp1VAMvmr/Bh1jf9vM+xg/AAAACXBIWXMAABYlAAAWJQFJUiTwAAACBmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTY3ODwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4yNDE2PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CuU+ZkwAAAQXSURBVHgB7ZxPS1RhGMXf0cygkhYtXLRpEW6SFrnqW/RZa1ffIAnKhVSS/ccy+2NkRDN3wha98jBCMNPznrnnNyC8z6D3POecH3rB4Q4+3l4fl4uXy2BltfDySmB8uFcWvCzjNiYAADERsxkAzAqPdgEgJmI2A4BZ4dEuAMREzGYAMCs82gWAmIjZDABmhUe7ABATMZsBwKzwaBcAYiJmMwCYFR7tAkBMxGwGALPCo10AiImYzWda+l1cWy+Lq1dariClPXrxrIxe7qTu1BSApfWb5dzGrVTDymJH9+54ATBYXi4L5y8od5K622DpbKresRj3AOmRawkCgFYf6dsAQHrkWoIAoNVH+jYAkB65liAAaPWRvg0ApEeuJQgAWn2kbwMA6ZFrCQKAVh/p2wBAeuRaggCg1Uf6NgCQHrmWYNN/B88yitHBfumOvs/ykunX6g4/p2v2BoCfjzbLcGc7PcBZCnZ7b2d5uX+6Vm8AGL15UYZbm/9kmm+qCXAPULOwPAGAZe3VNADULCxPAGBZezUNADULyxMAWNZeTQNAzcLyBACWtVfTAFCzsDwBgGXt1TQA1CwsTwBgWXs1DQA1C8sTAFjWXk0DQM3C8gQAlrVX0wBQs7A89eYTQWeuXitlPJ6rEkevd0v3Pv9jYCdD6g0Ayzc2ytLa9ZPe5M8/7t8FgFm1tLByqSyszOpqOdcZCDwfiXuAnK5lVQBAtpqcxQAgJ2dZFQCQrSZnMQDIyVlWBQBkq8lZDABycpZVAQDZanIWA4CcnGVVAEC2mpzFACAnZ1kVAJCtJmcxAMjJWValN/8OHr57XUaHX2SDnrRYd/Bh0tup7/UGgD/PCNp+lBretGLdp/1pLzH1z/cGgG5/r4x2n04diNsFuAdwazz4BYAQiNsIAG6NB78AEAJxGwHArfHgFwBCIG4jALg1HvwCQAjEbQQAt8aDXwAIgbiNAODWePALACEQtxEA3BoPfgEgBOI2AoBb48EvAIRA3EYAcGs8+AWAEIjbCABujQe/ABACcRsBwK3x4Lc3nwqex+cEhi7+jt23r2X0ZOvv/D8PvQFgHp8TeFqxw1fPyxEAnBbP5Pfn8TmBk52UcvwbIOvFPUBW0qI6ACBaTNZaAJCVtKgOAIgWk7UWAGQlLaoDAKLFZK0FAFlJi+oAgGgxWWsBQFbSojoAIFpM1loAkJW0qA4AiBaTtRYAZCUtqgMAosVkrdX08wC/th6W7svnLK9zo9Md5D0/sCkAw8cPyvEXr3YJ8CegXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JX4DM7xriSDTbF0AAAAASUVORK5CYII=);background-size:contain;border-radius:2px;display:inline-block;height:30px;width:30px}.elf-studio .feature-control.inspector{color:var(--elf--font-color);height:100%;position:relative}.elf-studio .feature-control.inspector>div{height:100%;position:relative}.elf-studio .feature-control.inspector>div .empty{height:100px}.elf-studio .feature-control.object-list{border-right:1px solid var(--elf--border-color);box-sizing:border-box;height:100%;position:relative}.elf-studio .feature-control.object-list .property{border:0;height:100%;margin:0;padding:0}.elf-studio .feature-control.object-list .property .property-body{padding:0}.elf-studio .feature-control .layer-tab{bottom:0;left:0;position:absolute;right:0;top:0}.elf-studio .feature-control .layer-tab .project-content>div{left:5px;position:absolute;right:5px}.elf-studio .feature-control .layer-tab .project-content>div:first-child{height:150px;top:0}.elf-studio .feature-control .layer-tab .project-content>div:not(:first-child){border-top:1px solid var(--elf--border-color)}.elf-studio .feature-control .layer-tab .project-content>div:last-child{bottom:0;height:auto!important;top:150px}.elf-studio .feature-control .layer-tab .object-items{height:100%;width:100%}.elf-studio .feature-control .layer-tab .object-items>div{height:100%;position:relative}.elf-studio .feature-control .layer-tab .assets{padding:3px}.elf-studio .feature-control .layer-tab .assets .property{height:auto}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--page-subeditor{display:inline-block;position:relative}.elf--button{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--button.has-label{grid-column-gap:2px;grid-template-columns:64px 1fr}.elf--button.has-label label{font-size:var(--elf--input-font-size);overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--button .area{display:block;height:100%}.elf--button .area button{background-color:var(--elf--input-inactive-color);border:0;border-radius:4px;color:var(--elf--input-font-color);display:inline-block;height:100%;width:100%}.elf--button .area button:hover{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button{height:var(--elf--input-height);width:var(--elf--input-height)}.elf--toggle-button.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-button.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-button .area{background-color:var(--elf--input-inactive-color);display:block;height:100%;position:relative}.elf--toggle-button .area>div{display:none;height:100%;position:relative;width:100%}.elf--toggle-button .area>div.visible{display:inline-block}.elf--toggle-button .area>div.checked{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button .area button{box-sizing:border-box;color:var(--elf--input-font-color);height:100%;padding:2px 4px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-button .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.elf--toggle-button .area button svg{height:20px;width:20px}.elf--toggle-checkbox{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);overflow:hidden}.elf--toggle-checkbox:hover,.elf--toggle-checkbox:hover .area,.elf--toggle-checkbox:hover .area>*{border-color:var(--elf--input-border-color)}.elf--toggle-checkbox.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-checkbox.has-label label{overflow:hidden;padding:7px 0 2px 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-checkbox .area{--selected-button-size:50%;--selected-button-position:0%;--unit-count:2;display:block;display:grid;grid-template-columns:repeat(var(--unit-count),1fr);height:100%;position:relative}.elf--toggle-checkbox .area>div{border-right:1px solid transparent;display:inline-block;position:relative;width:100%}.elf--toggle-checkbox .area>div:last-child{border-right:0}.elf--toggle-checkbox .area:before{background-color:var(--elf--selected-color-2);box-shadow:0 0 #0000001a;content:"";display:block;height:100%;left:var(--selected-button-position);pointer-events:none;position:absolute;top:0;transition:all .2s ease-in-out;width:var(--selected-button-size);z-index:0}.elf--toggle-checkbox .area>*{z-index:1}.elf--toggle-checkbox .area button{box-sizing:border-box;color:var(--elf--font-color);display:inline-block;font-size:var(--elf--input-font-size);height:100%;padding:4px 8px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-checkbox .area button:hover:not(.checked){background-color:var(--elf--input-background-color)}.elf--toggle-checkbox .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.tab{bottom:0;color:var(--elf--font-color);left:0;position:absolute;right:0;top:0}.tab.number-tab.padding-5 .tab-content{padding:5px}.tab.number-tab.padding-10 .tab-content{padding:10px}.tab.number-tab.side-tab.side-tab-left>.tab-header{background-color:var(--elf--header-background-color);bottom:0;box-sizing:border-box;display:flex;flex-direction:column;height:auto;left:0;overflow:visible;padding:0;position:absolute;text-align:center;top:0;width:60px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item{align-items:center;background-color:var(--elf--header-background-color)!important;border-bottom:0!important;border:0;display:flex;flex:none;height:50px;justify-content:center;margin:0 auto;position:relative;width:60px;width:100%}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:before{border-radius:4px;content:"";display:inline-block;height:32px;left:50%;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:32px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:hover label{color:var(--elf--selected-font-color)!important}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected{color:var(--elf--selected-font-color);margin-left:0}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected:before{background-color:var(--elf--selected-color-2)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected label svg{color:var(--elf--selected-font-color)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.extra-item{flex:1 1 auto;overflow:auto}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label{display:inline-block;height:24px;left:50%;padding:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:24px;z-index:1}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg{height:24px;width:24px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg path,.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg use{fill:currentColor}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item .title{color:var(--elf--selected-font-color);overflow:hidden;padding-bottom:5px;text-overflow:ellipsis;white-space:wrap;word-break:break-all}.tab.number-tab.side-tab.side-tab-left>.tab-body{bottom:0;left:60px;right:0;top:0}.tab.number-tab>.tab-content{display:none}.tab.number-tab>.tab-content.selected{display:block}.tab.number-tab>.tab-body{top:34px}.tab>.tab-header{box-sizing:border-box;display:flex;height:40px;left:0;padding:0 10px;position:absolute;right:0;z-index:1}.tab>.tab-header.no-border>.tab-item{border:0!important}.tab>.tab-header>.tab-item{cursor:pointer;gap:10px;height:100%;margin-right:10px;padding:0;position:relative;text-align:center}.tab>.tab-header>.tab-item.selected label,.tab>.tab-header>.tab-item:hover label{color:var(--elf--font-color)}.tab>.tab-header>.tab-item.selected label{font-weight:600}.tab>.tab-header>.tab-item label{box-sizing:border-box;color:var(--elf--tab-font-color);display:inline-block;height:100%;line-height:24px;padding:12px 0;pointer-events:none;vertical-align:middle}.tab>.tab-header>.tab-item:first-child:hover label{left:10px}.tab>.tab-header>.tab-item:last-child:hover label{left:auto;right:10px}.tab>.tab-header>.tab-item:hover label{opacity:1}.tab>.tab-body{bottom:0;left:0;position:absolute;right:0;top:40px}.tab>.tab-body.no-border{border:0}.tab>.tab-body>.tab-content{bottom:0;display:none;left:0;overflow:auto;position:absolute;right:0;top:0}.tab>.tab-body>.tab-content.selected{display:block}.tab>.tab-body>.tab-content.selected.flex{display:flex;flex-direction:column}.tab>.tab-body>.tab-content .fixed{flex:none}.tab>.tab-body>.tab-content .scroll{flex:1 1 auto;overflow:auto;position:relative}.elf--blank-tool-bar{background-color:var(--elf--header-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%;justify-content:space-between}.elf--blank-tool-bar>*{display:flex}.elf--blank-tool-bar>*>*{align-items:center;display:inline-flex;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--blank-tool-bar>*>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--blank-tool-bar>*>.dropdown-menu>button,.elf--blank-tool-bar>*>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--blank-tool-bar>*>.dropdown-menu>button .icon svg,.elf--blank-tool-bar>*>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--blank-tool-bar>*>.dropdown-menu>button.elf--menu-item.selected,.elf--blank-tool-bar>*>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--blank-tool-bar>*>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--blank-tool-bar>*>.elf--logo-area:hover,.elf--blank-tool-bar>*>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--toolbar-menu-item{align-items:center;display:flex;height:100%;justify-content:center;padding:10px!important;text-align:left;width:auto}.elf--toolbar-menu-item>.icon{display:inline-block;height:24px;width:24px}.elf--toolbar-menu-item>.icon svg{stroke:var(--elf--selected-font-color);height:24px;width:24px}.elf--toolbar-menu-item:hover{background-color:#000}.elf--toolbar-menu-item[data-selected=true]{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toolbar-renderer{display:flex;height:100%}.elf--toolbar-renderer>*{align-items:center;height:100%;justify-content:center;text-align:center;width:auto}.dropdown-menu{--elf--dropdown-menu-width:240px;--elf--dropdown-menu-dy:0px;align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:0 4px;position:relative}.dropdown-menu .dropdown-menu-item-list{border:1px solid var(--elf--border-color)}.dropdown-menu>.label{font-size:13px}.dropdown-menu>.icon{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 4px 0 8px;width:34px}.dropdown-menu>.icon:empty{display:none}.dropdown-menu>.icon svg{height:24px;pointer-events:none;width:24px}.dropdown-menu>.icon svg path{stroke-width:2;stroke:transparent;fill:none}.dropdown-menu .dropdown-arrow{fill:var(--elf--selected-font-color)}.dropdown-menu .dropdown-arrow:hover svg{transform:translateY(2px)}.dropdown-menu .dropdown-arrow svg{transition:all .1s ease-in-out;width:14px}.dropdown-menu[data-selected=true]{background-color:var(--elf--selected-color-2)}.dropdown-menu.opened:not([data-selected=true]),.dropdown-menu:hover:not([data-selected=true]){background-color:#000}.dropdown-menu.opened:not([data-selected=true]) .dropdown-arrow svg,.dropdown-menu:hover:not([data-selected=true]) .dropdown-arrow svg{transform:translateY(2px)}.dropdown-menu.opened>.dropdown-menu-arrow,.dropdown-menu.opened>ul{display:block}.dropdown-menu li{align-items:center;color:var(--elf--font-color);-moz-column-gap:4px;column-gap:4px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;position:relative}.dropdown-menu li .icon{flex:none}.dropdown-menu li .menu-item-text{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;vertical-align:middle}.dropdown-menu li .menu-item-text>*{line-height:1.6;vertical-align:middle}.dropdown-menu li .menu-item-text .shortcut{border:1px solid var(--elf--border-color);border-radius:2px;font-size:13px;padding:0 4px}.dropdown-menu li .menu-item-text .shortcut:empty{display:none}.dropdown-menu li>*{color:var(--elf--font-color);text-decoration:none}.dropdown-menu li[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu li[disabled]>*{color:var(--elf--disabled-font-color);pointer-events:none}.dropdown-menu li svg{color:var(--elf--border-color);height:20px;vertical-align:middle;width:20px}.dropdown-menu li svg path,.dropdown-menu li svg use{fill:currentColor}.dropdown-menu li.dropdown-divider{background-color:var(--elf--layout-border-color);box-sizing:border-box;display:block;height:1px;line-height:0px;margin-bottom:4px;margin-top:4px;padding:0}.dropdown-menu li.dropdown-divider>*{pointer-events:all}.dropdown-menu li.checkbox{align-items:center;display:flex}.dropdown-menu li.checkbox *{vertical-align:middle}.dropdown-menu li.custom{display:block}.dropdown-menu[data-direction=right]>ul{left:auto;right:0}.dropdown-menu[data-direction=right]>.dropdown-menu-arrow{left:auto;right:50%;transform:translate(50%) scale(1.5)}.dropdown-menu[data-direction=right] .dropdown-menu-list>ul{left:calc(-100% - 2px)}.dropdown-menu[data-direction=center]>ul{left:50%;transform:translate(-50%)}.dropdown-menu[data-direction=center]>.dropdown-menu-arrow{left:50%;transform:translate(-50%) scale(1.5)}.dropdown-menu.flat{padding:0}.dropdown-menu.flat>ul{position:relative;width:100%}.dropdown-menu ul{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);display:none;left:0;list-style-type:none;margin:0;padding:4px 0;position:absolute;top:calc(100% + 5px);width:var(--elf--dropdown-menu-width)}.dropdown-menu .dropdown-menu-list>ul{top:-11px}.dropdown-menu .dropdown-menu-arrow{box-sizing:border-box;display:none;height:6px;left:50%;position:absolute;top:calc(100% - 6px);transform:translate(-50%) scale(1.5);width:12px}.dropdown-menu .dropdown-menu-arrow svg{height:6px;width:8px}.dropdown-menu .dropdown-menu-arrow svg path,.dropdown-menu .dropdown-menu-arrow svg use{fill:var(--elf--background-color);stroke:var(--elf--border-color)}.dropdown-menu ul ul{left:100%;position:absolute;top:0}.dropdown-menu li:hover{color:var(--elf--font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider){background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>* svg{color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>.menu-item-text .shortcut{border-color:var(--elf--selected-font-color)}.dropdown-menu li:hover>ul{display:block}.blank-editor[data-design-mode=item] .layout-middle{bottom:0!important}.blank-editor[data-design-mode=item] .elf--status-bar{display:none!important}.blank-editor .layout-main{background-color:var(--elf--header-background-color);bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.blank-editor .layout-main .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.blank-editor .layout-main .layout-middle{background-color:var(--elf--background-color);box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.blank-editor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px;z-index:1}.blank-editor .layout-main .layout-middle>.splitter.selected,.blank-editor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.blank-editor .layout-main .layout-middle>.toggleLeft{left:340px}.blank-editor .layout-main .layout-middle>.toggleRight{right:280px}.blank-editor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:block;display:flex;flex:none;flex-direction:column;order:1;position:relative;width:340px}.blank-editor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:block;display:flex;flex:none;flex-direction:column;order:3;overflow:auto;position:relative;width:280px;z-index:100}.blank-editor .layout-main .layout-middle .layout-body{display:block;flex:1 1 auto;height:100%;order:2;position:relative}.elf--select-editor{grid-column-gap:4px;border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);position:relative}.elf--select-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--select-editor:hover:not(.focused):not(.drag) .selected-value{display:grid;grid-template-columns:1fr 20px}.elf--select-editor.compact select{opacity:1}.elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:var(--elf--input-font-color);height:24px;opacity:0;vertical-align:middle;width:100%}.elf--select-editor .selected-value{background-color:var(--elf--input-background-color);box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;left:0;line-height:2;padding:0 2px;pointer-events:none;position:absolute;right:0;top:0}.elf--select-editor .selected-value svg{fill:currentColor;height:16px;width:16px}.elf--select-editor .selected-value .expand{align-items:center;box-sizing:border-box;display:flex;justify-content:flex-start;vertical-align:middle}.elf--select-editor .selected-value .value{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap}.elf--select-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--select-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--select-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 4px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-editor.has-label label svg{height:20px;width:20px}.elf--select-editor.has-label .editor-view{position:relative}.elf--select-editor.has-label .selected-value{height:100%;position:absolute;text-align:left}.elf--select-editor.has-label .selected-value select{height:24px;width:100%}.elf--box-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--box-shadow-editor .label{height:20px;margin-top:2px}.elf--box-shadow-editor .label.hide{display:none}.elf--box-shadow-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--box-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--box-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--box-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr 30px;text-align:center}.elf--box-shadow-editor .shadow-item .shadow-content{display:grid;grid-template-columns:60px 1fr 1fr;grid-template-rows:auto}.elf--box-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--box-shadow-editor .shadow-item.desc{color:var(--elf--font-color)}.elf--box-shadow-editor .shadow-item.desc .color{visibility:hidden}.elf--box-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--box-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--color-assets-editor{margin-top:10px;padding:4px 0}.elf--color-assets-editor .color-assets-head{grid-column-gap:5px;display:grid;grid-template-columns:1fr}.elf--color-assets-editor .color-assets-head label{display:inline-block;line-height:1.5;padding:4px 0;vertical-align:middle}.elf--color-assets-editor .color-list{grid-column-gap:10px;grid-row-gap:10px;display:grid;grid-template-columns:repeat(8,1fr);margin-top:10px}.elf--color-assets-editor .color-list .color-item{border-radius:4px;box-shadow:0 0 0 1px #ffffff1a;cursor:pointer;display:inline-block;height:16px;overflow:hidden;width:16px}.elf--color-assets-editor .color-list .color-item:hover{transform:scale(1.2)}.elf--color-assets-editor .color-list .color-item .preview,.elf--color-assets-editor .color-list .color-item .preview .color-view{height:100%;width:100%}.elf--color-single-editor{height:30px;text-align:center;width:100%}.elf--color-single-editor .preview{height:100%}.elf--color-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:1px solid var(--elf--input-border-color);height:100%}.elf--color-single-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.elf--color-view-editor{border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);text-align:center}.elf--color-view-editor input{outline:none}.elf--color-view-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--color-view-editor.focused .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor.has-label{grid-template-columns:70px 1fr}.elf--color-view-editor.has-label.compact{grid-template-columns:40px 1fr}.elf--color-view-editor.has-label.compact .color-code{grid-template-columns:26px 1fr 40px}.elf--color-view-editor.has-label label{line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--color-view-editor.mini .color-input{display:none}.elf--color-view-editor.mini .color-code{grid-template-columns:26px 50px}.elf--color-view-editor .color-code{grid-column-gap:2px;border:1px solid transparent;border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr 50px;overflow:hidden;text-transform:uppercase;vertical-align:middle}.elf--color-view-editor .color-code .preview{align-items:center;background-color:transparent;border-radius:2px;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--color-view-editor .color-code .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--input-border-color);box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;height:20px;overflow:hidden;position:relative;vertical-align:middle;width:20px}.elf--color-view-editor .color-code .preview .mini-view .color-view{box-shadow:0 0 0 .1px var(--elf--input-border-color)}.elf--color-view-editor .color-code input{background-color:transparent;border:0;border-radius:3px;font-size:11px;height:100%;padding:0 3px;text-transform:uppercase;width:100%}.component-editor{--column-gap:2px;--row-gap:2px;padding-bottom:5px}.component-editor .component-folder.close>label>svg{transform:rotate(0)}.component-editor .component-folder.close>ul{display:none}.component-editor .component-folder>label{cursor:pointer}.component-editor .component-folder>label>svg{fill:var(--elf--font-color);height:16px;transform:rotate(90deg);transition:all .1s ease-in-out;vertical-align:middle;width:16px}.component-editor .component-folder>ul{list-style:none;margin:0;padding:0}.component-editor .column{grid-column-gap:var(--column-gap);grid-row-gap:2px;display:grid;grid-template-columns:1fr}.component-editor .column .column-item{align-items:stretch;display:flex;justify-content:stretch}.component-editor .column .column-item>*{width:100%}.component-editor .column .column-item>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .column-1-1{grid-template-columns:1fr 1fr}.component-editor .column-1-1-1{grid-template-columns:1fr 1fr 1fr}.component-editor .column-1-2{grid-template-columns:1fr 2fr}.component-editor .column-1-2-3{grid-template-columns:1fr 3fr}.component-editor .column-1-1-1-1{grid-template-columns:1fr 1fr 1fr 1fr}.component-editor .column-2{grid-template-columns:1fr 1fr}.component-editor .column-2-1{grid-template-columns:2fr 1fr}.component-editor .column-2-1-1{grid-template-columns:2fr 1fr 1fr}.component-editor .column-3-1{grid-template-columns:3fr 1fr}.component-editor .column-3-1-1{grid-template-columns:3fr 1fr 1fr}.component-editor .column-3-2-1{grid-template-columns:3fr 2fr 1fr}.component-editor>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .component-item{margin-bottom:5px}.elf--css-property-editor{display:grid;grid-template-columns:1fr!important;margin-bottom:5px;margin-top:10px}.elf--css-property-editor.hide-refresh .css-property-item .title-2,.elf--css-property-editor.hide-title .css-property-item>.title label,.elf--css-property-editor.hide-title>.title{display:none}.elf--css-property-editor .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--css-property-editor .title .tools{text-align:right}.elf--css-property-editor .title .tools select{display:inline-block;width:130px!important}.elf--css-property-editor>.title-2{display:none;text-align:right}.elf--css-property-editor .css-property-item{border:1px solid var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;margin-top:5px;padding:2px}.elf--css-property-editor .css-property-item>.title{background-color:transparent;border-radius:3px;color:var(--elf--selected-color);font-weight:900;grid-template-columns:1fr 30px;margin-bottom:2px;padding:3px 0}.elf--css-property-editor .css-property-item .value-editor{padding:2px}.elf--css-property-editor .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--css-property-editor .input.grid-1{grid-template-columns:1fr}.elf--css-property-editor .input.grid-2{grid-template-columns:3fr 1fr}.elf--cubic-bezier-editor{height:200px;margin:0 auto;position:relative;width:220px}.elf--cubic-bezier-editor .bezier{background-color:var(--elf--background-color);box-shadow:0 0 0 1px var(--elf--border-color);height:150px;left:60px;position:absolute;top:30px;width:150px}.elf--cubic-bezier-editor .bezier .bezier-canvas{pointer-events:none}.elf--cubic-bezier-editor .bezier .control{bottom:0;left:0;position:absolute;right:0;top:0}.elf--cubic-bezier-editor .bezier .control .pointer1,.elf--cubic-bezier-editor .bezier .control .pointer2{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);border-radius:100%;cursor:pointer;height:9px;position:absolute;transform:translate(-50%) translateY(-50%);width:9px}.elf--cubic-bezier-editor .animation{height:20px;left:0;position:absolute;right:0;text-align:center;top:0}.elf--cubic-bezier-editor .animation .animation-canvas{cursor:pointer;height:100%;position:relative;width:100%}.elf--cubic-bezier-editor .item-list{bottom:20px;left:0;padding-right:0;position:absolute;top:30px;width:50px}.elf--cubic-bezier-editor .item-list[data-selected-value=ease-in] .item[data-bezier=ease-in],.elf--cubic-bezier-editor .item-list[data-selected-value=ease-out] .item[data-bezier=ease-out],.elf--cubic-bezier-editor .item-list[data-selected-value=ease] .item[data-bezier=ease]{background-color:var(--elf--selected-color)}.elf--cubic-bezier-editor .item-list .item{border-radius:2px;cursor:pointer;height:40px;margin-bottom:5px;overflow:hidden;position:relative;width:40px}.elf--cubic-bezier-editor .item-list .item:not(:first-child){border-top:0}.elf--cubic-bezier-editor .item-list .item.selected{background-color:#0ab}.elf--cubic-bezier-editor .item-list .item .item-canvas{background-color:#000;border-radius:2px;height:38px;left:1px;position:absolute;top:1px;width:38px}.elf--cubic-bezier-editor .predefined{bottom:0;display:grid;grid-template-columns:30px 1fr 30px;height:20px;left:0;position:absolute;right:0;text-align:center}.elf--cubic-bezier-editor .predefined .left,.elf--cubic-bezier-editor .predefined .right{color:var(--elf--font-color);cursor:pointer;font-weight:700;vertical-align:middle}.elf--cubic-bezier-editor .predefined .left svg path,.elf--cubic-bezier-editor .predefined .right svg path{fill:currentColor}.elf--cubic-bezier-editor .predefined .predefined-text{color:var(--elf--font-color);padding:4px;vertical-align:middle}.elf--direction-editor .direction-item{display:grid;grid-template-columns:62px 1fr}.elf--direction-editor .direction-item.full{grid-template-columns:1fr}.elf--direction-editor .radius-selector{display:grid;grid-template-columns:1fr 1fr}.elf--direction-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--direction-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--direction-editor .radius-selector button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;color:#ccc;cursor:pointer;display:inline-block;flex:none;height:20px;margin-right:2px;outline:none;padding:0;vertical-align:middle;width:20px}.elf--direction-editor .radius-selector button svg{height:100%;width:100%}.elf--filter-editor{padding:2px 0}.elf--filter-editor .label{height:20px;margin-top:2px}.elf--filter-editor .label.hide{display:none}.elf--filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--filter-editor .tools select{display:inline-block;width:100px!important}.elf--filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;padding:0 10px;width:100%}.elf--filter-editor .filter-list .filter-item{display:block;margin-top:5px}.elf--filter-editor .filter-list .filter-item:last-child{margin-bottom:5px}.elf--filter-editor .filter-list .filter-item>.title{display:grid;grid-template-columns:20px 1fr 30px}.elf--filter-editor .filter-list .filter-item>.title>.sub-title{align-items:center;display:flex;justify-content:flex-start}.elf--filter-editor .filter-list .filter-item>.title>label{align-items:center;cursor:move;display:flex;justify-content:center;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--filter-editor .filter-list .filter-item>.title .svg-filter-edit{cursor:pointer}.elf--filter-editor .filter-list .filter-item>.title .filter-menu{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:4px 0;text-align:right}.elf--filter-editor .filter-list .filter-item>.title .filter-menu:hover{background-color:var(--elf--input-inactive-color)}.elf--filter-editor .filter-list .filter-item .filter-ui-list{padding-left:20px;pointer-events:all}.elf--filter-editor .filter-list .filter-item .filter-ui{vertical-align:middle}.elf--filter-editor .filter-list .filter-item .filter-ui label{color:var(--elf--font-color)}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--gradient-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--gradient-editor .tools{padding:4px 0}.elf--gradient-editor [data-editor],.elf--gradient-editor[data-selected-editor=static-gradient]{display:none}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--gradient-editor[data-selected-editor=image-resource] .drag-pointer,.elf--gradient-editor[data-selected-editor=image-resource] .preset-position,.elf--gradient-editor[data-selected-editor=image-resource] .sub-editor,.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--gradient-editor .sub-editor{padding:0}.elf--gradient-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--gradient-editor .hue,.elf--gradient-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--gradient-editor .hue{pointer-events:none}.elf--gradient-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--gradient-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--gradient-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--gradient-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--gradient-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--gradient-editor .hue .step-list .step.selected .color-view span{display:block}.elf--gradient-editor .hue .step-list .step[data-cut=true] .arrow{top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--gradient-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--gradient-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--gradient-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step .arrow,.elf--gradient-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--gradient-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--list-view-editor{display:grid;grid-template-columns:repeat(1,1fr);margin-top:10px;max-height:500px;position:relative}.elf--list-view-editor[data-column="0"]{grid-template-columns:repeat(0,1fr)}.elf--list-view-editor[data-column="1"]{grid-template-columns:repeat(1,1fr)}.elf--list-view-editor[data-column="2"]{grid-template-columns:repeat(2,1fr)}.elf--list-view-editor[data-column="3"]{grid-template-columns:repeat(3,1fr)}.elf--list-view-editor[data-column="4"]{grid-template-columns:repeat(4,1fr)}.elf--list-view-editor[data-column="5"]{grid-template-columns:repeat(5,1fr)}.elf--list-view-editor[data-column="6"]{grid-template-columns:repeat(6,1fr)}.elf--list-view-editor[data-column="7"]{grid-template-columns:repeat(7,1fr)}.elf--list-view-editor[data-column="8"]{grid-template-columns:repeat(8,1fr)}.elf--list-view-editor[data-column="9"]{grid-template-columns:repeat(9,1fr)}.elf--list-view-editor .list-view-item.selected{background-color:var(--elf--selected-color)}.elf--list-view-editor .list-view-item.selected svg circle,.elf--list-view-editor .list-view-item.selected svg path,.elf--list-view-editor .list-view-item.selected svg rect{fill:var(--elf--selected-font-color)}.elf--list-view-editor .list-view-item svg{width:100%}.elf--list-view-editor .list-view-item svg circle,.elf--list-view-editor .list-view-item svg path,.elf--list-view-editor .list-view-item svg rect{fill:var(--elf--font-color)}.elf--input-range-editor{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--input-range-editor.disabled label{color:var(--elf--selected-color)}.elf--input-range-editor.disabled>*{pointer-events:none}.elf--input-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--input-range-editor.focused{box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--input-range-editor.drag,.elf--input-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--input-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--input-range-editor.has-label{grid-template-columns:70px 1fr}.elf--input-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--input-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--input-range-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr 40px}.elf--input-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--input-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 4px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--input-range-editor.has-label label svg{height:24px;vertical-align:middle;width:24px}.elf--input-range-editor.has-label.block{display:block}.elf--input-range-editor.has-label.block label{color:#000000b3;display:block}.elf--input-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--input-range-editor.is-removable .remove{display:inline-block}.elf--input-range-editor .remove,.elf--input-range-editor .type-button{display:none}.elf--input-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--input-range-editor .range--editor-type .area{border-radius:3px;display:grid;grid-template-columns:1fr 40px;height:100%}.elf--input-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--input-range-editor .range--editor-type .area input,.elf--input-range-editor .range--editor-type .area select{font-size:11px;width:100%}.elf--input-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;padding-left:2px;vertical-align:middle;width:100%}.elf--input-range-editor .range--editor-type .area .elf--select-editor{border-left:1px solid var(--elf--input-range-border-color);height:calc(var(--elf--input-height) - 2px)}.elf--input-range-editor .range--editor-type .area .elf--select-editor:hover{border:0!important;box-shadow:none!important}.elf--input-range-editor .range--editor-type .area .elf--select-editor select{background-color:transparent;border:0;color:var(--elf--input-sub-font-color);height:24px}.elf--input-range-editor .range--editor-type .area .unit{display:inline-block;line-height:2;vertical-align:middle}.elf--range--editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--range--editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--range--editor.has-label.compact{grid-template-columns:30px 1fr}.elf--range--editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--range--editor.has-label.block{height:auto}.elf--range--editor.has-label.block>label{display:block}.elf--range--editor.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--range--editor.has-label.block{display:block}.elf--range--editor.has-label.block label{color:var(--elf--font-color);display:block}.elf--range--editor.is-removable{grid-template-columns:1fr 12px}.elf--range--editor.is-removable .remove{display:inline-block;margin-top:3px}.elf--range--editor .remove{display:none}.elf--range--editor .range--editor-type{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;height:100%;vertical-align:middle}.elf--range--editor .range--editor-type .area{border:1px solid transparent;border-radius:3px;display:grid;grid-template-columns:1fr 24px}.elf--range--editor .range--editor-type .area.focused{border:1px solid var(--elf--selected-color);border-radius:3px}.elf--range--editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--range--editor .range--editor-type .area input,.elf--range--editor .range--editor-type .area select{background-color:transparent;border:0;width:100%}.elf--range--editor .range--editor-type .area input[type=range]{width:95%}.elf--range--editor .range--editor-type .area input[type=number]{background-color:var(--elf--input-background-color);border:1px solid var(--elf--input-border-color);border-bottom-left-radius:3px;border-right:0;border-top-left-radius:3px;height:100%;padding:2px;text-align:left}.elf--range--editor .range--editor-type .area .elf--select-editor{background-color:var(--elf--input-background-color);border:0!important;border-radius:0 3px 3px 0;box-sizing:border-box;position:relative;text-align:right}.elf--range--editor .range--editor-type .area .elf--select-editor .selected-value{display:none}.elf--range--editor .range--editor-type .area .elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--elf--input-border-color);border-radius:0 3px 3px 0;border-left:0;color:var(--elf--input-sub-font-color);display:inline-block;height:24px;padding:0;position:absolute;right:0;text-align:center;width:24px}.elf--media-progress-editor>*{margin-bottom:2px}.elf--media-progress-editor .drag-area{background-image:linear-gradient(90deg,#2b2b2b 1px,transparent 1px 100%);background-position:0 1px;background-repeat:repeat-x;background-size:10px 8px;height:10px;margin:10px;padding:0 10px;position:relative}.elf--media-progress-editor .progress-bar{background-color:#2b2b2b;display:block;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--media-progress-editor .bar{height:2px;left:10%;transform:translateY(-50%);width:50%}.elf--media-progress-editor .bar,.elf--media-progress-editor .drag-item{background-color:var(--elf--selected-color);display:inline-block;position:absolute;top:50%}.elf--media-progress-editor .drag-item{border-radius:100%;cursor:pointer;height:8px;transform:translate(-50%,-50%);width:8px}.elf--media-progress-editor .drag-item.end{background-color:#ff0;box-shadow:0 0 3px #0000004d}.elf--number-input-editor{border:1px solid transparent;border-radius:1px;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);padding:4px}.elf--number-input-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--number-input-editor.drag{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--number-input-editor:hover:not(.focused):not(.drag){box-shadow:0 0 0 1px var(--elf--input-border-color)}.elf--number-input-editor.has-label{grid-template-columns:60px 1fr}.elf--number-input-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-input-editor.has-label.mini{grid-template-columns:10px 1fr}.elf--number-input-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-input-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr}.elf--number-input-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-input-editor.has-label label svg{height:20px;width:20px}.elf--number-input-editor.has-label.block,.elf--number-input-editor.has-label.block label{display:block}.elf--number-input-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-input-editor .range--editor-type .area{grid-column-gap:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-input-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-input-editor .range--editor-type .area input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;background-color:transparent;border:0;padding-left:2px;width:100%}.elf--number-input-editor .range--editor-type .area input::-webkit-inner-spin-button,.elf--number-input-editor .range--editor-type .area input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.elf--number-range-editor{grid-column-gap:4px;border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--number-range-editor.disabled label{color:var(--elf--selected-color)}.elf--number-range-editor.disabled>*{pointer-events:none}.elf--number-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--number-range-editor.drag,.elf--number-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--number-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--number-range-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--number-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--number-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-range-editor.has-label label svg{height:20px;vertical-align:middle;width:20px}.elf--number-range-editor.has-label.block{display:block;height:auto}.elf--number-range-editor.has-label.block label{display:block}.elf--number-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--number-range-editor.is-removable .remove{display:inline-block}.elf--number-range-editor .remove{display:none}.elf--number-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-range-editor .range--editor-type .area{grid-column-gap:4px;border-radius:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-range-editor .range--editor-type .area input{height:100%;width:100%}.elf--number-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;vertical-align:middle}.elf--path-editor{--line-color:var(--elf--border-color);background-color:transparent;background-image:linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent);background-position:0 0,0 0,100% 0,0 100%;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:10% 100%,100% 10%,1px 100%,100% 1px;cursor:crosshair;margin:10px;min-height:100px;min-width:100px;position:relative}.elf--path-editor .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor .path-container:not(.modify) path.object,.elf--path-editor .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor .path-container.split-panel{pointer-events:none}.elf--path-editor .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor .path-container.path{cursor:crosshair}.elf--path-editor .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor .path-container.alt svg circle,.elf--path-editor .path-container.segment-move{cursor:move}.elf--path-editor .path-container.transform svg .snap-path,.elf--path-editor .path-container.transform svg circle,.elf--path-editor .path-container.transform svg line,.elf--path-editor .path-container.transform svg rect,.elf--path-editor .path-container.transform svg text{display:none}.elf--path-editor .path-container.modify,.elf--path-editor .path-container.segment-move{cursor:default}.elf--path-editor .path-container.modify svg path.object,.elf--path-editor .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor .path-container.is-control svg path.path-area{display:none}.elf--path-editor .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor svg{height:100%;overflow:visible;width:100%}.elf--path-editor svg line{stroke-width:1;content-visibility:auto}.elf--path-editor svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);r:5;stroke-width:2}.elf--path-editor svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor svg path{fill:transparent;content-visibility:auto}.elf--path-editor svg path.path-area{stroke-width:0}.elf--path-editor svg path.path-area.selected,.elf--path-editor svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color)}.elf--path-editor svg path.guide,.elf--path-editor svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg path.segment{pointer-events:all}.elf--path-editor svg path.object{fill:transparent;stroke-width:1}.elf--path-editor svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-data-editor .segment-empty{grid-column-gap:2px;display:grid;grid-template-columns:30px 1fr}.elf--path-data-editor .segment-empty .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:center}.elf--path-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:50px 1fr;margin-bottom:4px}.elf--path-data-editor .segment.m{padding-top:10px}.elf--path-data-editor .segment .command{color:var(--elf--selected-color);cursor:pointer}.elf--path-data-editor .segment .command[data-toggle=false]{font-weight:700;opacity:.3}.elf--path-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--path-data-editor .segment .values span{text-align:center}.elf--path-data-editor .segment .values input{width:100%}.elf--polygon-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:1fr;margin-bottom:4px}.elf--polygon-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:right}.elf--polygon-data-editor .segment .values label{color:var(--elf--selected-color)}.elf--polygon-data-editor .segment .values input{color:var(--elf--font-color);width:80px}.elf--select-icon-editor{border:1px solid transparent;display:grid;height:var(--elf--input-height)}.elf--select-icon-editor:hover,.elf--select-icon-editor:hover .items>div{border-color:var(--elf--input-border-color)}.elf--select-icon-editor.has-label{grid-template-columns:70px 1fr}.elf--select-icon-editor.has-label label{overflow:hidden;padding:6px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-icon-editor .items{background-color:transparent;border-radius:3px;box-sizing:border-box;cursor:pointer;display:flex;height:var(--elf--input-height);line-height:1;outline:none}.elf--select-icon-editor .items>.select-icon-item{align-items:center;border-right:1px solid transparent;box-sizing:border-box;color:var(--elf--font-color);display:flex;flex:1 1 10%;height:calc(100% - 2px);justify-content:center;line-height:1.4;min-width:var(--elf--input-height);padding:6px 2px;position:relative;text-align:center;text-transform:uppercase;vertical-align:middle;white-space:pre-wrap;word-break:break-all}.elf--select-icon-editor .items>.select-icon-item:last-child{border-right:0}.elf--select-icon-editor .items>.select-icon-item:hover{background-color:var(--elf--input-inactive-color)}.elf--select-icon-editor .items>.select-icon-item svg{height:20px;vertical-align:middle;width:20px}.elf--select-icon-editor .items>.select-icon-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--select-icon-editor .items>.select-icon-item.icon{padding:3px 2px}.elf--select-icon-editor .items>.select-icon-item[data-value=""]{max-width:20px}.elf--select-icon-editor .items>.select-icon-item[data-value=none]{text-transform:none;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=uppercase]{text-transform:uppercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=lowercase]{text-transform:lowercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=capitalize]{text-transform:capitalize;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=full-width]{text-transform:full-width;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=underline]{text-decoration:underline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=overline]{text-decoration:overline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=line-through]{text-decoration:line-through;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=normal]{font-style:normal;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=italic]{font-style:italic;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=oblique]{font-style:oblique;vertical-align:middle}.elf--select-icon-editor .tools{padding:4px 0;text-align:right;vertical-align:middle}.elf--stroke-dasharray-editor{padding:4px 0;position:relative}.elf--stroke-dasharray-editor .dasharray-item{border-bottom:1px solid var(--elf--border-color);-moz-column-gap:2px;column-gap:2px;display:flex;margin-right:4px;position:relative}.elf--stroke-dasharray-editor .dasharray-item>*{align-items:center;display:flex;height:100%;justify-content:flex-start}.elf--stroke-dasharray-editor .dasharray-item>* input{width:20px!important}.elf--stroke-dasharray-editor .dasharray-item>button svg{height:10px;width:10px}.elf--stroke-dasharray-editor .dash-list{display:flex;flex-direction:row;flex-wrap:wrap}.elf--stroke-dasharray-editor .dash-sample-list{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);display:none;height:100px;overflow:auto;position:absolute;top:30px;width:100px;z-index:10}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample{cursor:pointer;height:20px}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample:hover{background-color:var(--elf--input-inactive-color)}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample svg line{stroke:var(--elf--font-color)}.elf--stroke-dasharray-editor>.tools.has-label{display:grid;grid-template-columns:70px 1fr}.elf--stroke-dasharray-editor>.tools.has-label .buttons{align-items:center;display:flex;justify-content:flex-start;padding-left:4px;text-align:left}.elf--stroke-dasharray-editor>.tools label{align-items:center;cursor:pointer;display:flex;justify-content:flex-start;text-align:left;vertical-align:middle}.elf--stroke-dasharray-editor>.tools label:hover{font-weight:700}.elf--text-area-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-area-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-area-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-area-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--text-shadow-editor .label{height:20px}.elf--text-shadow-editor .label.hide{display:none}.elf--text-shadow-editor .label label{padding:2px 6px 2px 0;vertical-align:middle}.elf--text-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--text-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--text-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:18px 1.5fr 1fr 1fr 1fr 30px;text-align:center}.elf--text-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--text-shadow-editor .shadow-item.desc{color:var(--elf--input-font-color)}.elf--text-shadow-editor .shadow-item.desc>*{text-align:left}.elf--text-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--text-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--var-editor{grid-template-columns:1fr!important}.elf--var-editor .label{height:20px;margin-top:2px}.elf--var-editor .label.hide{display:none}.elf--var-editor .label label{padding-left:5px;vertical-align:middle}.elf--var-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--var-editor .var-item{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr 30px;height:24px;margin-bottom:5px;margin-top:5px;text-align:center}.elf--var-editor .var-item>div input{height:100%;width:100%}.elf--var-editor .var-item>div input::-moz-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input:-ms-input-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input::placeholder{color:#9e9e9e}.elf--var-editor .var-item .tools{text-align:right}.elf--default-layout,.elf--default-layout-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--default-layout{display:flex;flex-direction:column}.elf--default-layout .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.elf--default-layout .layout-middle{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.elf--default-layout .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px;z-index:1}.elf--default-layout .layout-middle>.splitter.selected,.elf--default-layout .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.elf--default-layout .layout-middle>.toggleLeft{left:340px}.elf--default-layout .layout-middle>.toggleRight{right:280px}.elf--default-layout .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:flex;flex:none;flex-direction:column;position:relative;transition:width .05s linear;width:340px}.elf--default-layout .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:flex;flex:none;flex-direction:column;overflow:auto;position:relative;transition:width .05s linear;width:280px;z-index:100}.elf--default-layout .layout-middle .layout-right.closed{width:10px!important}.elf--default-layout .layout-middle .layout-body{flex:1 1 auto;position:relative}.elf--popup-manager{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:99999}.elf--popup-manager>*{pointer-events:all}.elf--notification-view{display:inline-block;position:absolute;right:10px;top:10px;z-index:10000}.elf--notification-view .item{border-radius:4px;color:#fff;margin-bottom:10px;min-width:300px;opacity:1;padding:10px 20px;position:relative;transition:opacity 10s linear}.elf--notification-view .item .description{padding-top:10px}.elf--notification-view .item .icon{display:inline-block;position:absolute;right:10px;top:10px}.elf--notification-view .item .icon svg path{fill:currentColor}.elf--notification-view .item.alert{background-color:#e45050de}.elf--notification-view .item.alert .title{color:#fff;font-weight:700}.elf--notification-view .item.alert .description{color:#fff}.elf--window-background{background-color:var(--elf--window-background-color);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:10000}.elf--window-background .window{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);box-shadow:0 0 1px 0 var(--elf--border-color);color:var(--elf--font-color);height:200px;left:50%;padding:14px;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px;z-index:1000}.elf--window-background .window .window-title{border-bottom:1px solid var(--elf--border-color);display:flex;font-size:15px;font-weight:700;height:40px;left:0;margin-bottom:10px;padding:10px;pointer-events:all;position:absolute;right:0;top:0}.elf--window-background .window .window-title>*{flex:1 1 auto}.elf--window-background .window .window-title .tools{text-align:right}.elf--window-background .window .window-title label{cursor:move}.elf--window-background .window .window-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf--export-window{height:80%!important;width:80%!important}.elf--export-window pre{border:1px solid var(--elf--border-color);height:100%;margin:0 10px;overflow:auto;padding:10px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf--project-window{background-color:var(--elf--background-color);height:100%!important;width:100%!important}.elf--project-window .project-container{grid-column-gap:2px;display:grid;grid-template-columns:300px 1fr;height:100%;position:relative;width:100%}.elf--project-window .project-container .project-menu{box-sizing:border-box;height:100%;overflow:auto;padding:20px;position:relative}.elf--project-window .project-container .project-list{background-color:var(--elf--window-background-color);box-sizing:border-box;height:100%;overflow:auto}.elf--shortcut-window{height:80%!important;width:600px!important}.elf--shortcut-window .window-body{overflow:auto}.elf--shortcut-window .list{padding:10px 20px}.elf--shortcut-window .list .item h2{padding-left:10px}.elf--shortcut-window .list .item .shortcut-view-item{display:grid;grid-template-columns:1fr 200px;margin-bottom:2px}.elf--shortcut-window .list .item .shortcut-view-item>*{border-bottom:1px solid var(--elf--border-color);border-right:0;padding:5px 10px;position:relative}.elf--shortcut-window .list .item .shortcut-view-item .title{padding:10px}.elf--shortcut-window .list .item .shortcut-view-item .title .description{color:var(--elf--font-color);opacity:.5}.elf--shortcut-window .list .item .shortcut-view-item .os-item{text-align:right}.elf--shortcut-window .list .item .shortcut-view-item .os-item span{border:1px solid var(--elf--font-color);box-sizing:border-box;display:inline-block;margin:0 2px;padding:4px 6px}.dataeditor{bottom:auto;display:inline-block;height:auto;left:auto;overflow:visible;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:300px}.dataeditor .layout-main{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);color:var(--elf--font-color);display:flex;flex-direction:column;height:100%;min-height:10px;position:relative;width:100%}.dataeditor .layout-main[data-open-status=true] .control-view{display:block}.dataeditor .layout-main .control-view{border-bottom:1px solid var(--elf--border-color);display:none;margin-top:5px;padding:0 5px}.dataeditor .layout-main>.close{color:var(--elf--font-color);cursor:pointer;padding:5px 0;text-align:center}.elf--colorpicker-popup{padding:0 10px;width:244px}.elf--colorpicker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--colorpicker-popup .colorpicker input{border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--colorpicker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--colorpicker-popup .colorpicker .colorsets{border-top:1px solid var(--elf--border-color)!important}.elf--colorpicker-popup .assets{padding:0 10px}.elf--colorpicker-popup .assets .project-color-list{padding:5px 0}.elf--colorpicker-popup .assets .project-color-list .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border-radius:3px;display:inline-block;height:16px;margin-bottom:9px;margin-right:9px;overflow:hidden;position:relative;width:16px}.elf--colorpicker-popup .assets .project-color-list .color-item .color-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--colorpicker-popup .assets .project-color-list .color-item:hover{transform:scale(1.2)}.elf--popup{background-color:var(--elf--popup-background-color);border-radius:2px;box-shadow:0 1px 5px #00000080;color:var(--elf--font-color);display:none;position:absolute;z-index:1000}.elf--popup.compact .popup-body{padding:0 0 5px}.elf--popup .popup-title{display:flex;font-size:12px;font-weight:700;padding:10px 0 10px 10px;pointer-events:all}.elf--popup .popup-title>*{flex:1 1 auto}.elf--popup .popup-title .tools{align-items:center;display:flex;justify-content:flex-end;padding-right:10px}.elf--popup .popup-title .tools button{background-color:transparent;border:0;cursor:pointer;padding:0}.elf--popup .popup-title .tools button svg{fill:var(--elf--font-color);height:16px;width:16px}.elf--popup .popup-title label{cursor:move}.elf--popup .popup-body{padding:8px 12px}.elf--popup .popup-body .popup-item{margin-bottom:5px;padding:2px 0}.elf--popup .popup-resizer{background-color:gray;bottom:0;cursor:se-resize;height:10px;position:absolute;right:0;width:10px}.designeditor[data-design-mode=item] .layout-middle{bottom:0!important}.designeditor[data-design-mode=item] .elf--status-bar{display:none!important}.designeditor .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.designeditor .layout-main .layout-top{height:48px;top:0;z-index:10000}.designeditor .layout-main .layout-middle,.designeditor .layout-main .layout-top{background-color:var(--elf--background-color);box-sizing:border-box;left:0;position:absolute;right:0}.designeditor .layout-main .layout-middle{bottom:0;overflow:hidden;top:48px}.designeditor .layout-main .layout-middle .layout-header{background-color:var(--elf--header-background-color);box-sizing:border-box;color:var(--elf--selected-font-color);display:none;height:0;left:340px;position:absolute;right:280px;top:0}.designeditor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px}.designeditor .layout-main .layout-middle>.splitter.selected,.designeditor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.designeditor .layout-main .layout-middle>.left-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;left:340px;pointer-events:none;position:absolute;top:0;transition:background-color .05s linear;width:8px}.designeditor .layout-main .layout-middle>.left-arrow button{color:var(--elf--font-color);pointer-events:all}.designeditor .layout-main .layout-middle>.right-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;pointer-events:none;position:absolute;right:280px;top:0;transition:background-color .05s linear;width:8px}.designeditor .layout-main .layout-middle>.right-arrow button{color:var(--elf--font-color);pointer-events:all}.designeditor .layout-main .layout-middle>button{color:var(--elf--font-color);cursor:pointer;height:12px;position:absolute;top:50%;transform:translateY(-50%) translate(-25%);width:12px;z-index:1000}.designeditor .layout-main .layout-middle>button svg{transform:scale(1.5)}.designeditor .layout-main .layout-middle>.toggleLeft{left:340px}.designeditor .layout-main .layout-middle>.toggleRight{right:280px}.designeditor .layout-main .layout-middle .layout-footer{background-color:var(--elf--background-color);bottom:0;height:0;left:0;overflow:hidden;position:absolute;right:0;z-index:10000}.designeditor .layout-main .layout-middle .layout-footer .footer-splitter{display:none}.designeditor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);bottom:0;box-sizing:border-box;display:inline-block;display:flex;flex-direction:column;left:0;position:absolute;top:0;width:340px}.designeditor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);bottom:0;display:inline-block;display:flex;flex-direction:column;overflow:auto;position:absolute;right:0;top:0;width:280px;z-index:100}.designeditor .layout-main .layout-middle .layout-body{bottom:0;left:340px;position:absolute;right:280px;top:0}.elf--context-menu-renderer>*{display:block!important;width:100%}.elf--context-menu-renderer .dropdown-menu{height:100%}.elf--context-menu-renderer .elf--toolbar-menu-item:hover{background-color:var(--elf--selected-color);color:#fff!important}.elf--context-menu-view{border-radius:4px;display:none;left:0;min-width:240px;position:absolute;top:0;z-index:1000}.elf--alignment-item{grid-column-gap:2px;display:grid;grid-template-columns:repeat(8,1fr);height:24px;margin-bottom:10px;padding-top:8px}.elf--alignment-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;height:10px;width:20px}.elf--alignment-item button[data-no-title=true] .title{display:none}.elf--alignment-item .title{color:#999}.elf--alignment-item .icon{color:var(--elf--selected-color)!important;height:16px;margin:0 auto;width:16px}.elf--alignment-item .icon svg{height:100%;width:100%}.elf--property{--property-order:1000;border-bottom:1px solid var(--elf--property-border-color);box-shadow:0 0 2px #fff0;display:none;margin-bottom:4px;order:var(--property-order)}.elf--property:first-child{border-top:0}.elf--property.full{display:flex;flex-direction:column;height:100%}.elf--property.full.show{height:100%}.elf--property.full .property-title{flex:none}.elf--property.full .property-body{flex:1 1 auto;overflow:auto;padding-left:0;padding-right:0;position:relative}.elf--property.show{display:block}.elf--property.show>.property-title>label .icon{display:inline-block;transform:rotate(90deg)}.elf--property.show>.property-body{display:block}.elf--property>.property-title{align-items:center;color:var(--elf--font-color);cursor:pointer;display:flex;height:30px;justify-content:space-between;padding:0 10px;position:relative}.elf--property>.property-title.filter{grid-template-columns:1fr 110px}.elf--property>.property-title svg{height:16px;width:16px}.elf--property>.property-title label{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:1px;line-height:2;overflow:hidden;padding-left:2px;text-overflow:ellipsis;text-transform:uppercase;vertical-align:middle;white-space:nowrap}.elf--property>.property-title label .icon{display:inline-block;transition:all .1s linear}.elf--property>.property-title label.has-keyframe{padding-left:0}.elf--property>.property-title>.tools{flex:none;text-align:right;vertical-align:middle;white-space:nowrap}.elf--property>.property-title>.tools>*{flex:none}.elf--property>.property-body{display:none;padding:0 10px;position:relative}.elf--property>.property-body.no-padding{padding:0!important}.elf--property>.property-body .property-item{padding:4px 0}.elf--property>.property-body .property-item:first-child{padding-top:0}.elf--property>.property-body .property-item:not(.has-label){background-color:#fff0}.elf--property>.property-body .property-item.animation-property-item{display:grid;grid-template-columns:1fr}.elf--property>.property-body .property-item.animation-property-item.has-label{grid-template-columns:80px 1fr}.elf--property>.property-body .property-item.animation-property-item.has-label .group{padding-left:12px;padding-top:5px;vertical-align:middle}.elf--property>.property-body .property-item.animation-property-item.full{display:block}.elf--property>.property-body .property-item.animation-property-item.full .group{padding-left:14px;vertical-align:middle}.elf--property>.property-body .property-item>label.label{background-color:var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;color:var(--elf--selected-font-color);display:block;padding:5px}.elf--property>.property-footer{padding:0 6px}.elf--property>.property-footer>div{margin-bottom:5px}.elf--property>.property-footer label{cursor:pointer;display:inline-block;padding-left:2px;padding-right:5px;vertical-align:middle;width:60px}.elf--animation-list{grid-template-columns:1fr!important}.elf--animation-list .animation-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0;text-align:center}.elf--animation-list .animation-item.selected{background-color:var(--elf--border-color)}.elf--animation-list .animation-item .name{padding:2px 0;text-align:left;vertical-align:middle}.elf--animation-list .animation-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;margin-top:3px;vertical-align:middle;width:100%}.elf--animation-list .animation-item .timing canvas{border-radius:3px}.elf--animation-list .animation-item .labels label{background-color:var(--elf--border-color);border-radius:2px;color:var(--elf--border-color);font-weight:700;padding:1px 2px;text-transform:uppercase}.elf--animation-list .animation-item .labels label small{color:var(--elf--font-color);text-transform:lowercase}.elf--animation-list .animation-item .labels label.play-state{background-color:transparent;cursor:pointer}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value]{color:var(--elf--font-color);display:none;vertical-align:middle}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value] svg{height:16px;width:16px}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value=pause]{color:red}.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=paused] [data-play-state-value=paused],.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=running] [data-play-state-value=running]{display:inline-block}.elf--animation-list .animation-item .tools{text-align:right;vertical-align:middle}.elf--animation-property-popup{width:220px}.elf--animation-property-popup .box>div{margin-bottom:5px}.elf--animation-property-popup .box label{text-align:left;vertical-align:middle}.elf--animation-property-popup .box .name{display:grid;grid-template-columns:60px 1fr}.elf--animation-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--animation-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--animation-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--artboard-size-list .property-body{padding:0!important}.elf--artboard-size-list .artboard-size-item{border-top:1px solid var(--elf--border-color)}.elf--artboard-size-list .category{border-bottom:1px solid var(--elf--border-color);height:26px;line-height:2}.elf--artboard-size-list .category .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none}.elf--artboard-size-list .group-item{background-color:#ececec;border-bottom:1px solid var(--elf--border-color);height:24px;line-height:1.8}.elf--artboard-size-list .group-item .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none;text-transform:uppercase}.elf--artboard-size-list .device-item{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);cursor:pointer;display:grid;font-size:12px;grid-template-columns:1fr 1fr;height:26px;line-height:2.3}.elf--artboard-size-list .device-item .title{color:var(--elf--font-color);padding-left:20px;pointer-events:none}.elf--artboard-size-list .device-item .size{color:#bdbdbd;letter-spacing:2px;padding-right:10px;pointer-events:none;text-align:right}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--background-image-editor{padding:0 10px 5px 5px}.elf--background-image-editor .label{height:20px;margin-top:2px}.elf--background-image-editor .label.hide{display:none}.elf--background-image-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--background-image-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--background-image-editor .fill-list{display:grid;font-size:12px;grid-template-columns:1fr}.elf--background-image-editor .fill-list .fill-item{-moz-column-gap:2px;column-gap:2px;display:grid;grid-template-columns:18px 26px 26px 1fr;margin-bottom:4px}.elf--background-image-editor .fill-list .fill-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item>div{align-items:center;display:flex;height:26px;justify-content:center}.elf--background-image-editor .fill-list .fill-item .gradient-info{color:var(--elf--font-color);display:grid;grid-template-columns:1fr 30px 30px 30px;width:100%}.elf--background-image-editor .fill-list .fill-item .gradient-info svg path{fill:currentColor}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools{align-items:center;display:flex;justify-content:center;text-align:right}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorcode,.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .opacity{display:none}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorsteps{display:block}.elf--background-image-editor .fill-list .fill-item .pattern{background-color:var(--elf--border-color)}.elf--background-image-editor .fill-list .fill-item .preview{align-items:center;box-shadow:0 0 0 1px #0000001a;cursor:pointer;display:flex;height:auto;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;display:block;height:26px;pointer-events:none;position:relative;width:26px}.elf--background-image-editor .fill-list .fill-item .preview .mini-view .color-view{border-radius:0;bottom:0;left:0;position:absolute;right:0;top:0}.elf--background-image-editor .fill-list .fill-item .fill-title{align-items:center;display:flex;justify-content:flex-start;padding-left:2px;pointer-events:none;position:relative;text-align:left}.elf--background-image-editor .fill-list .fill-item .fill-title svg{height:16px;vertical-align:middle;width:16px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]{color:var(--elf--font-color);padding-left:10px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]:after{border-right:4px double var(--elf--font-color);bottom:0;content:"";height:50%;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:4px}.elf--background-image-editor .fill-list .fill-item .colorcode input{width:100%}.elf--background-image-position-picker{width:180!important}.elf--background-image-position-picker .background-property>div{margin-bottom:10px}.elf--background-image-position-picker .popup-item{margin-bottom:5px}.elf--background-image-position-picker .grid{display:grid;grid-template-columns:60px 1fr}.elf--background-image-position-picker .grid-2{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr}.elf--background-image-position-picker .grid-2 label{padding-right:2px;text-align:left}.elf--background-image-position-picker .repeat-list{display:flex;gap:5px}.elf--background-image-position-picker .repeat-list button{background-color:#434b50;flex:1 1 auto;height:24px;width:24px}.elf--background-image-position-picker .repeat-list button[value=no-repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:50%;background-repeat:no-repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-x]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 8px;background-repeat:repeat-x;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-y]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:8px 10px;background-repeat:repeat-y;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=space]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:space;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=round]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:0 0;background-repeat:round;background-size:8px 8px}.elf--background-image-position-picker .repeat-list[data-value=no-repeat] button[value=no-repeat],.elf--background-image-position-picker .repeat-list[data-value=repeat-x] button[value=repeat-x],.elf--background-image-position-picker .repeat-list[data-value=repeat-y] button[value=repeat-y],.elf--background-image-position-picker .repeat-list[data-value=repeat] button[value=repeat],.elf--background-image-position-picker .repeat-list[data-value=round] button[value=round],.elf--background-image-position-picker .repeat-list[data-value=space] button[value=space]{background-color:var(--elf--selected-color);box-shadow:0 0 2px 2px var(--elf--selected-color)}.fill{display:inline-block;height:30px!important;vertical-align:middle;width:30px!important}.fill:hover{background-color:var(--elf--input-inactive-color)}.elf--background-position-editor{height:19px;text-align:center;width:26px}.elf--background-position-editor .preview{height:26px}.elf--background-position-editor .preview .mini-view{height:100%}.elf--background-position-editor .preview .mini-view .color-view{border-radius:3px;cursor:pointer;height:100%}.elf--border-editor .header{grid-column-gap:4px;display:grid;grid-template-columns:repeat(3,1fr) 24px;text-align:center;text-transform:uppercase}.elf--border-editor>.editor-area{padding:5px 0}.elf--border-editor>.editor-area>div{margin-top:5px}.elf--border-editor>.editor-area>div:first-child{margin-top:0}.elf--border-editor>.editor-area>div>label{font-weight:700;padding:2px 0;text-shadow:0 0 2px var(--elf--border-color);text-transform:uppercase}.elf--border-editor .input-group{display:grid;grid-template-rows:repeat(3,1fr)}.elf--border-editor .input-field{grid-column-gap:4px;display:grid;grid-template-columns:1fr 3fr;vertical-align:middle}.elf--border-editor .input-field input{vertical-align:middle;width:100%}.elf--border-editor .input-field .input-ui{vertical-align:middle}.elf--border-value-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--border-value-editor label{padding:6px 4px 2px 0;text-align:left;vertical-align:middle}.elf--border-value-editor .editor-area{-moz-column-gap:10px;column-gap:10px;display:flex;flex-direction:row}.elf--border-radius-editor .border-radius-item{display:grid;grid-template-columns:1fr 1fr 30px}.elf--border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--border-radius-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color-2);color:var(--elf--font-color)}.elf--border-radius-editor .radius-selector button{border-radius:3px;height:20px;margin:2px;width:20px}.elf--border-radius-editor .radius-setting-box{display:grid;grid-template-columns:1fr 30px;margin-bottom:5px}.elf--border-radius-editor .radius-setting-box>div{display:grid;grid-template-columns:1fr 1fr}.elf--box-model-item{grid-template-columns:1fr!important}.elf--box-model-item>div{height:150px;position:relative;width:100%}.elf--box-model-item>div .margin{border:1px dashed #aaa;bottom:5px;left:5px;padding:10px;position:absolute;right:5px;top:5px}.elf--box-model-item>div .margin:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .margin input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .margin [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .margin [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding{border:1px dashed #aaa;bottom:30px;left:55px;padding:20px 45px;position:absolute;right:55px;top:30px}.elf--box-model-item>div .padding:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .padding input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .padding [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .content{border:1px dashed #aaa;bottom:54px;left:105px;padding:10px 0;position:absolute;right:105px;top:54px}.elf--box-model-item>div .content:before{display:block;padding:5px 0;text-align:center}.box-shadow-samples{border:0;font-size:11px}.elf--clip-path-list{grid-template-columns:1fr!important}.elf--clip-path-list .clippath-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:20px 1fr 30px;height:30px;margin-bottom:5px}.elf--clip-path-list .clippath-item>label{align-items:center;cursor:move;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title{align-items:center;-moz-column-gap:10px;column-gap:10px;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title .name{padding:2px 0}.elf--clip-path-list .clippath-item .tools{align-items:center;display:flex;justify-content:center;text-align:right;vertical-align:middle}.elf--clip-path-list .clippath-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--clip-path-list .clippath-item .offset-list{height:30px;padding:0 10px}.elf--clip-path-list .clippath-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--clip-path-list .clippath-item .offset-list .container .offset{background-color:#000;border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--clip-path-list .clippath-item .offset-list .container .offset:hover:before{background-color:#4e3b3b;border-radius:3px;bottom:100%;color:#fff;content:attr(data-title);display:inline-block;left:50%;padding:1px 3px;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.elf--clippath-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back svg polygon{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .polygon .polygon-pointer{fill:#fff;r:5;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute}.elf--clippath-editor-view .polygon .polygon-line{cursor:copy;pointer-events:all}.elf--clippath-editor-view .polygon .polygon-line:hover{stroke-width:2;stroke:red}.elf--clippath-editor-view .polygon .polygon-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:20px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:20px}.elf--clippath-editor-view .inset .inset-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .inset .inset-back svg path{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .inset .inset-direction{background-color:#fff;height:14px;width:14px}.elf--clippath-editor-view .inset .inset-center,.elf--clippath-editor-view .inset .inset-direction{border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .inset .inset-center{border:2px solid #fff;height:20px;width:20px}.elf--clippath-editor-view .circle .circle-back{left:0;pointer-events:none;top:0}.elf--clippath-editor-view .circle .circle-back,.elf--clippath-editor-view .circle .circle-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .circle .circle-center{height:20px;pointer-events:all;width:20px}.elf--clippath-editor-view .circle .circle-radius{background-color:#fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:14px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:14px}.elf--clippath-editor-view .ellipse .ellipse-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--clippath-editor-view .ellipse .ellipse-back svg ellipse{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all}.elf--clippath-editor-view .ellipse .ellipse-center{border:2px solid #fff;border-radius:50%;height:20px;width:20px}.elf--clippath-editor-view .ellipse .ellipse-center,.elf--clippath-editor-view .ellipse .ellipse-radius{cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .ellipse .ellipse-radius{background-color:#fff;border-radius:50%;height:14px;width:14px}.elf--code-view-item{grid-template-columns:1fr!important;width:100%}.elf--code-view-item>div{max-width:100%;width:100%}.elf--code-view-item>div label{padding-left:10px}.elf--code-view-item>div pre{line-height:1.7;margin-top:0;padding:40px 0 20px 20px;position:relative;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-all}.elf--code-view-item>div pre:not(:last-child){border-bottom:1px solid var(--elf--border-color)}.elf--code-view-item>div pre:before{border:1px solid var(--elf--border-color);color:var(--elf--font-color);content:attr(title);display:inline-block;font-weight:700;left:0;margin-bottom:10px;padding:2px 4px;position:absolute;right:0;top:0}.elf--code-view-item>div pre .block{padding-left:20px;text-indent:-20px}.elf--code-view-item>div pre strong{color:var(--elf--font-color);font-weight:400;text-indent:-20px}.elf--code-view-item>div pre .value{color:#f16b16;text-indent:-20px}.elf--code-view-item>div pre .keyword{color:#20a471}.elf--code-view-item>div pre .char{color:#444}.elf--code-view-item>div pre .function{color:#725ee1}.elf--texture .pattern-list{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;padding:10px;row-gap:10px}.elf--texture .pattern-list .pattern-item{cursor:pointer;text-align:center}.elf--texture .pattern-list .pattern-item.selected .preview{background-color:var(--elf--selected-background-color)}.elf--texture .pattern-list .pattern-item:hover .preview{background-color:var(--elf--selected-color)}.elf--texture .pattern-list .pattern-item .preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;pointer-events:none;width:80px}.elf--texture .pattern-list .pattern-item .preview svg{height:100%;width:100%}.elf--export-property .export-item{grid-column-gap:2px;display:grid;grid-template-columns:60px 1fr;padding:10px 6px}.elf--export-property .export-item label{vertical-align:middle}.elf--export-property .export-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;text-align:left;vertical-align:middle;width:100%}.elf--export-property .export-item button svg{vertical-align:middle;width:16px}.elf--fill-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--fill-editor-view.dragging .area-line{pointer-events:none!important}.elf--fill-editor-view .gradient-editor-area{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--fill-editor-view .gradient-editor-area path{fill:transparent;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.start-end-line{stroke:#fff;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area rect{pointer-events:all}.elf--fill-editor-view .gradient-editor-area rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area circle{stroke-width:2;pointer-events:all}.elf--fill-editor-view .gradient-editor-area circle:hover{cursor:-webkit-grab;cursor:grab}.elf--fill-editor-view .gradient-editor-area circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--fill-editor-view .gradient-editor-area circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--fill-editor-view .gradient-editor-area circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--fill-editor-view .gradient-editor-area circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;filter:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area circle.point{fill:#fff;r:5}.elf--fill-editor-view .gradient-editor-area circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--fill-editor-view .gradient-editor-area circle.hover-colorstep{r:8;stroke:#fff;stroke-width:1;pointer-events:none}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--fill-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--fill-editor .tools{padding:4px 0}.elf--fill-editor [data-editor]{display:none}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--fill-editor[data-selected-editor=static-gradient]{display:none}.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageWidth],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageX],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageY],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternUnits],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternWidth]{display:block}.elf--fill-editor[data-selected-editor=image-resource] .preset-position,.elf--fill-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--fill-editor .sub-editor{padding:0}.elf--fill-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--fill-editor .hue,.elf--fill-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--fill-editor .hue{pointer-events:none}.elf--fill-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--fill-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--fill-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--fill-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--fill-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--fill-editor .hue .step-list .step.selected .color-view span{display:block}.elf--fill-editor .hue .step-list .step[data-cut=true] .arrow{top:100%}.elf--fill-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--fill-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--fill-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--fill-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--fill-editor .hue .step-list .step .arrow,.elf--fill-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--fill-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--gradient-picker-popup{grid-column-gap:10px;display:grid;grid-template-columns:1fr;margin-bottom:5px;width:224px}.elf--gradient-picker-popup>.box:first-child{margin-bottom:4px}.elf--gradient-picker-popup>.box>.colorpicker{display:block}.elf--gradient-picker-popup>.box>.assetpicker{display:none;min-height:310px}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.colorpicker{display:none}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.assetpicker{display:block}.elf--gradient-picker-popup .popup-item{margin-bottom:5px}.elf--gradient-picker-popup .grid-2{display:grid;grid-template-columns:60px 1fr}.elf--gradient-picker-popup .grid-2 label{padding-right:2px;text-align:left}.elf--gradient-picker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--gradient-picker-popup .colorpicker .color-panel{height:100px;margin-top:0}.elf--gradient-picker-popup .colorpicker input{border:0!important;border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--gradient-picker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--gradient-picker-popup .colorpicker .colorsets{border-top:0 solid var(--elf--border-color)!important}.elf--gradient-picker-popup .color-assets-editor{padding:4px 0!important}.elf--gradient-picker-popup .assetpicker{background-color:#e6e6e61a;position:relative}.elf--gradient-picker-popup .assetpicker .image-asset-picker{display:block;height:200px;overflow:auto;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list{grid-column-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item{background-color:rgba(var(--elf--font-color),.5);margin-bottom:2px}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview{border:1px solid var(--elf--border-color);border-radius:2px;cursor:pointer;height:80px;-o-object-fit:contain;object-fit:contain;position:relative;text-align:center;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview img{border:0;max-height:100%;max-width:100%;vertical-align:middle}.elf--fill-single-editor{border:1px solid transparent;box-sizing:border-box;cursor:pointer;height:var(--elf--input-height)}.elf--fill-single-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--fill-single-editor.focused .opacity-input{border-left:1px solid var(--elf--border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--fill-single-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--fill-single-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--fill-single-editor .area{grid-column-gap:2px;border-radius:4px;display:grid;grid-template-columns:24px 1fr;height:100%}.elf--fill-single-editor .preview{align-items:center;background-color:transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--fill-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--border-color);border-radius:2px;display:inline-block;height:20px;overflow:hidden;position:relative;width:20px}.elf--fill-single-editor .preview .mini-view .color-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf--fill-single-editor .colors{align-items:center;display:flex;justify-content:flex-start;line-height:2.2;margin-left:2px}.elf--fill-single-editor .colors.simple{display:none}.elf--fill-single-editor .colors .color{border:1px solid var(--elf--font-color);border-radius:100%;display:inline-block;height:14px;pointer-events:all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;vertical-align:middle;width:14px}.elf--fill-single-editor .colors .color:not(:first-child){margin-left:-2px}.elf--gradient-single-editor{height:26px!important;text-align:center;width:100%}.elf--gradient-single-editor .preview{height:26px!important;width:26px!important}.elf--gradient-single-editor .preview .mini-view{height:100%!important;width:100%!important}.elf--gradient-single-editor .preview .mini-view .color-view{background-size:cover;border-radius:3px;cursor:pointer;height:100%}.elf--gradient-assets-property .gradient-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--gradient-assets-property .gradient-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--gradient-assets-property .gradient-list-tools[data-view-mode=grid] button[data-value=grid],.elf--gradient-assets-property .gradient-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--gradient-assets-property .gradient-list .gradient-view{pointer-events:none}.elf--gradient-assets-property .gradient-list[data-view-mode=grid]{display:block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .add-gradient-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item{display:inline-block;margin-bottom:1px;margin-right:1px;position:relative;vertical-align:middle;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item:hover[data-custom=true] .tools{display:inline-block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;cursor:pointer;height:40px;position:relative;width:100%}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview .gradient-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools{display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools button{color:var(--elf--selected-font-color);height:10px;width:10px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools svg{height:100%;width:100%}.elf--gradient-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--gradient-editor-view.dragging .area-line{pointer-events:none!important}.elf--gradient-editor-view .gradient-rect{bottom:0;left:0;right:0;top:0}.elf--gradient-editor-view .center{background-color:var(--elf--selected-color-2);border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 2px rgb(43,43,43));height:10px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.elf--gradient-editor-view .gradient-rect{box-sizing:border-box;cursor:move;filter:drop-shadow(0 0 2px rgb(43,43,43));pointer-events:none;position:absolute}.elf--gradient-editor-view .gradient-rect svg{height:100%;width:100%}.elf--gradient-editor-view .gradient-rect svg path{fill:transparent;stroke:#fff;stroke-width:1;pointer-events:all}.elf--gradient-editor-view .resizer{background-color:#fff;border:1px solid var(--elf--selected-color);border-radius:100%;box-sizing:border-box;filter:drop-shadow(0 0 2px rgb(43,43,43));height:14px;position:absolute;transform:translate(-50%,-50%);width:14px}.elf--gradient-editor-view .resizer[data-direction=bottom-right]{cursor:nwse-resize;left:100%;top:100%}.elf--gradient-editor-view .gradient-angle{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-angle path{fill:transparent;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle path.stick{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.color-stick{pointer-events:none}.elf--gradient-editor-view .gradient-angle path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-angle path.start-end-line{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--gradient-editor-view .gradient-angle path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle rect{pointer-events:all}.elf--gradient-editor-view .gradient-angle rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle circle{stroke-width:2;pointer-events:all}.elf--gradient-editor-view .gradient-angle circle:hover{cursor:-webkit-grab;cursor:grab}.elf--gradient-editor-view .gradient-angle circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--gradient-editor-view .gradient-angle circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--gradient-editor-view .gradient-angle circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--gradient-editor-view .gradient-angle circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;pointer-events:none}.elf--gradient-editor-view .gradient-angle circle.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle circle.point{fill:#fff;r:5}.elf--gradient-editor-view .gradient-angle circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-angle circle.hover-colorstep{r:8;filter:drop-shadow(0 0 1px rgb(255,255,255));pointer-events:none}.elf--gradient-editor-view .gradient-radial-line{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-radial-line path{fill:transparent;stroke:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-radial-line path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-radial-line path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line circle.step-point,.elf--gradient-editor-view .gradient-radial-line ellipse.step-point{fill:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point,.elf--gradient-editor-view .gradient-radial-line ellipse.point{fill:#fff;r:5;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point[data-type=start],.elf--gradient-editor-view .gradient-radial-line ellipse.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-radial-line circle.size,.elf--gradient-editor-view .gradient-radial-line ellipse.size{fill:transparent;stroke:#fff}.elf--gradient-editor-view .gradient-radial-line rect{pointer-events:all}.elf--gradient-editor-view .gradient-radial-line rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--guide-line-view{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translate(.5px,.5px);width:100%}.elf--guide-line-view path{stroke:var(--elf--selected-color)}.elf--guide-line-view path.arrow{stroke-width:1;fill:none}.elf--guide-line-view path.layer-line{stroke:var(--elf--font-color)}.elf--guide-line-view path.snap-line{stroke:var(--elf--selected-color)}.elf--guide-line-view line{stroke-width:1}.elf--guide-line-view line.base-line{stroke:var(--elf--guide-line-color)}.elf--guide-line-view line.dash-line{stroke:var(--elf--guide-line-color);stroke-dasharray:2 2}.elf--guide-line-view line.base-rect{stroke:var(--elf--guide-line-rect-color)}.elf--guide-line-view text{fill:var(--elf--guide-font-color);font-weight:400}.elf--guide-line-view text.text-center{text-anchor:middle}.elf--history-list-view .history-item{grid-column-gap:5px;display:grid;grid-template-columns:20px 1fr}.elf--history-list-view .history-item>span{color:var(--elf--font-color);vertical-align:middle}.elf--history-list-view .history-item>span svg{height:16px;width:16px}.elf--history-list-view .history-item>span svg path{fill:currentColor}.elf--hover-rect,.elf--hover-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--hover-rect{box-sizing:border-box}.elf--hover-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:2;left:0;position:absolute;top:0}.elf--hover-rect svg{bottom:0;left:0;position:absolute;right:0;top:0}.elf--hover-rect svg .offset-line{stroke:var(--elf--selected-color-2);stroke-dasharray:2 4;fill:transparent;stroke-width:1}.elf--hover-rect svg text{fill:var(--elf--selected-font-color)}.elf--hover-rect svg rect{fill:var(--elf--selection-tool-border-color)}.elf--image-select-editor{background-color:#0000004d;margin-bottom:10px;margin-top:10px;text-align:center}.elf--image-select-editor .preview-container{height:150px;position:relative;width:100%}.elf--image-select-editor .preview-container img{max-height:100%;max-width:100%}.elf--image-select-editor .preview-container input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;top:0;width:100%}.elf--image-select-editor .select-container{display:grid;grid-template-columns:1fr;padding:4px 0}.elf--image-select-editor .select-container button{width:100%}.elf--image-select-popup{display:grid;grid-template-columns:1fr;min-height:450px;padding:10px;width:500px}.elf--image-select-popup>.box{grid-column-gap:4px;grid-row-gap:4px;display:grid;grid-auto-rows:110px;grid-template-columns:repeat(4,1fr);margin-bottom:10px}.elf--image-select-popup>.box .image-item{border:1px solid hsla(0,0%,100%,.5);box-sizing:border-box;display:grid;position:relative;text-align:center}.elf--image-select-popup>.box .image-item:hover{background-color:#baffb1}.elf--image-select-popup>.box .image-item img{align-self:center;cursor:pointer;justify-self:center;max-height:100%;max-width:100%;pointer-events:all;vertical-align:middle}.elf--image-assets-property .image-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--image-assets-property .image-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--image-assets-property .image-list-tools[data-view-mode=grid] button[data-value=grid],.elf--image-assets-property .image-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--image-assets-property .image-list{padding:5px}.elf--image-assets-property .image-list .image-view{pointer-events:none}.elf--image-assets-property .image-list[data-view-mode=grid]{display:block}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item:hover .tools{display:inline-block}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title input{width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.image-assets-property{padding-left:0!important;padding-right:0!important}.elf--keyframe-popup{width:250px}.elf--keyframe-popup .box .name{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;height:20px;margin-bottom:5px}.elf--keyframe-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--keyframe-popup .box .property .title .tools{text-align:right}.elf--keyframe-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--keyframe-popup .box .offset-editor .offset{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:20px;position:relative}.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="0"] [data-offset-index="0"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="1"] [data-offset-index="1"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="10"] [data-offset-index="10"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="11"] [data-offset-index="11"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="12"] [data-offset-index="12"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="13"] [data-offset-index="13"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="14"] [data-offset-index="14"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="15"] [data-offset-index="15"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="16"] [data-offset-index="16"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="17"] [data-offset-index="17"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="18"] [data-offset-index="18"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="19"] [data-offset-index="19"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="2"] [data-offset-index="2"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="3"] [data-offset-index="3"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="4"] [data-offset-index="4"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="5"] [data-offset-index="5"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="6"] [data-offset-index="6"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="7"] [data-offset-index="7"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="8"] [data-offset-index="8"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="9"] [data-offset-index="9"]{background-color:var(--elf--selected-color)}.elf--keyframe-popup .box .offset-editor .offset .offset-item{background-color:var(--elf--font-color);border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--keyframe-popup .box .offset-input{padding:5px 0}.elf--keyframe-popup .box .offset-input .title{grid-column-gap:2px;display:grid;grid-template-columns:100px 1fr}.elf--keyframe-popup .box .keyframe-property-list{max-height:300px;overflow:auto}.elf--keyframe-popup .box .keyframe-property-item{margin-top:2px;padding:4px 0}.elf--keyframe-popup .box .keyframe-property-item .title{grid-template-columns:1fr 30px}.elf--keyframe-popup .box .keyframe-property-item .value-editor{border:1px solid rgba(0,0,0,.3);padding:2px}.elf--keyframe-popup .box label{text-align:left;vertical-align:middle}.elf--keyframe-popup .box input,.elf--keyframe-popup .box select{vertical-align:middle;width:100%}.elf--keyframe-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--keyframe-popup .box .input.grid-1{grid-template-columns:1fr}.elf--keyframe-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--keyframe-list{display:block}.elf--keyframe-list .keyframe-item{border:1px solid var(--elf--border-color);cursor:pointer;margin-bottom:5px;padding:5px}.elf--keyframe-list .keyframe-item:first-child{margin-top:5px}.elf--keyframe-list .keyframe-item.selected{background-color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] button[data-type=list]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] .keyframe-code[data-type=list]{display:block}.elf--keyframe-list .keyframe-item[data-selected-value=code] button[data-type=code]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=code] .keyframe-code[data-type=code]{display:block}.elf--keyframe-list .keyframe-item .title{display:grid;grid-template-columns:1fr 60px;height:20px}.elf--keyframe-list .keyframe-item .title .name{padding:2px 0}.elf--keyframe-list .keyframe-item .title .tools{text-align:right;vertical-align:middle}.elf--keyframe-list .keyframe-item .title .tools .group{display:inline-block}.elf--keyframe-list .keyframe-item pre{margin:0;white-space:pre-wrap}.elf--keyframe-list .keyframe-item .keyframe-code{display:none}.elf--keyframe-list .keyframe-item .keyframe-code>.offset{display:grid;grid-template-columns:30px 1fr;margin-top:2px}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item{display:grid;grid-template-columns:1fr 1fr;text-align:left}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item label{color:var(--elf--font-color);font-weight:700;padding-left:10px}.elf--keyframe-list .keyframe-item .offset-list{height:20px;padding:0 10px}.elf--keyframe-list .keyframe-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--keyframe-list .keyframe-item .offset-list .container .offset{background-color:#fff;border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--layer-append-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;pointer-events:all;position:absolute;right:0;top:0}.elf--layer-append-view .area{display:inline-block;pointer-events:none;position:absolute}.elf--layer-append-view .area .draw-item{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--layer-append-view .area-pointer-view,.elf--layer-append-view .area-rect{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;padding:2px 4px;position:absolute;transform:translate(5px,5px)}.elf--layer-append-view .area-pointer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--layer-append-view .area-pointer .layer-add-snap-pointer{stroke:var(--elf--selected-color);stroke-width:1}.elf--layer-append-view input[type=file]{display:none}.elf--layer-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--layer-list .layer-item{content-visibility:auto;color:var(--elf--list-item-font-color);contain:size;height:30px;margin-bottom:0!important;padding:5px!important}.elf--layer-list .layer-item[data-is-hide=true]{display:none}.elf--layer-list .layer-item[data-is-group=true] .detail .folder{display:inline-block;transform:rotate(90deg);transition:transform .1s linear;vertical-align:middle}.elf--layer-list .layer-item[data-is-group=true] .detail .folder.collapsed{transform:rotate(0)}.elf--layer-list .layer-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--layer-list .layer-item .detail label{cursor:pointer;display:grid;grid-template-columns:20px 20px 1fr;overflow:hidden;padding:2px 0;pointer-events:all;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--layer-list .layer-item .detail label svg path,.elf--layer-list .layer-item .detail label svg use{fill:currentColor}.elf--layer-list .layer-item .detail .tools{display:none;text-align:right}.elf--layer-list .layer-item .detail .tools .visible{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .visible[data-visible=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item .detail .tools .lock{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .lock[data-lock=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--layer-list .layer-item.selected-path{background-color:var(--elf--selected-color-3)}.elf--layer-list .layer-item:hover,.elf--layer-list .layer-item:not(.selected).hovered{box-shadow:inset 0 0 0 1px var(--elf--list-item-selected-color)}.elf--layer-list .layer-item:hover .tools,.elf--layer-list .layer-item:not(.selected).hovered .tools{display:block}.elf--layer-list .drag-start{opacity:.3}.elf--layer-list+.drag-point{border:1px solid var(--elf--selected-color);pointer-events:none;position:absolute}.elf--default-layout-item-property .constraints{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--default-layout-item-property .constraints-box{border:1px solid var(--elf--input-border-color);height:70px;margin-left:10px;position:relative;width:70px}.elf--default-layout-item-property .constraints-box>.item{box-sizing:border-box;position:absolute}.elf--default-layout-item-property .constraints-box>.item:hover{background-color:var(--elf--selected-hover-color)}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]{border-color:var(--elf--selected-color)!important;z-index:1}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]:before{background-color:var(--elf--selected-color-2)!important}.elf--default-layout-item-property .constraints-box>.item[disabled]{display:none}.elf--default-layout-item-property .constraints-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;height:calc(50% - 2px);left:calc(25% + 1px);pointer-events:none;position:absolute;top:calc(25% + 1px);width:calc(50% - 2px)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal]:before{background-color:var(--elf--input-border-color);content:"";height:2px;left:3px;pointer-events:none;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]{border-left:2px solid var(--elf--font-color);border-right:2px solid var(--elf--font-color);bottom:-12px;box-sizing:border-box;height:8px;left:0;right:-1px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]:before{background-color:var(--elf--font-color);height:3px;left:0;pointer-events:none;right:0;top:50%;width:auto}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=min]{height:12px;left:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]{height:12px;right:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]:before{left:5px;right:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]{height:12px;left:50%;left:calc(25% + 8px);right:calc(25% + 8px);top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]:before{left:0;right:0}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical]:before{background-color:var(--elf--input-border-color);bottom:4px;content:"";left:50%;pointer-events:none;position:absolute;top:4px;transform:translate(-50%);width:2px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]{border-bottom:1px solid var(--elf--font-color);border-top:1px solid var(--elf--font-color);bottom:-1px;box-sizing:border-box;right:-12px;top:0;width:8px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]:before{background-color:var(--elf--font-color);bottom:0;height:auto;left:50%;pointer-events:none;top:0;transform:translate(-50%);width:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=min]{height:20px;left:50%;top:0;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=max]{bottom:0;height:20px;left:50%;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]{bottom:calc(25% + 8px);left:50%;top:calc(25% + 8px);transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]:before{bottom:0;top:0}.elf--flex-grow-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--flex-grow-tool-view .flex-grow-item{background-color:#fffc;border:1px solid var(--elf--font-color);border-radius:4px;display:flex;height:20px;left:0;line-height:1;overflow:hidden;pointer-events:all;position:absolute;text-align:center;top:0;transform:translate(-50%,-120%)}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=row]{cursor:ew-resize}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]{cursor:ns-resize;flex-direction:column;height:auto;overflow:hidden}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]>*{padding-bottom:1px!important;padding-top:1px!important}.elf--flex-grow-tool-view .flex-grow-item .size{align-items:center;display:flex;flex:1 1 auto;justify-content:center;padding:4px}.elf--flex-grow-tool-view .flex-grow-item .grow{align-items:center;background-color:var(--elf--selected-color);color:var(--elf--selected-font-color);display:flex;flex:none;justify-content:center;padding:4px}.flex-layout-item{margin:10px auto}.flex-layout-item .grid-2{display:flex;gap:10px;justify-content:space-between}.flex-layout-item .grid-2 *{vertical-align:middle}.flex-layout-item .title{font-family:Courier New,Courier,monospace;font-weight:700;margin-bottom:3px;padding-left:2px;text-transform:uppercase}.flex-layout-editor{padding:0 10px 10px}.select-flex-direction{align-items:center;display:flex;flex-direction:row;justify-content:center;position:relative}.select-flex-direction>div{height:200px;position:relative;width:200px}.select-flex-direction .padding-top{right:0}.select-flex-direction .padding-left,.select-flex-direction .padding-top{background-color:var(--elf--border-color);display:block;left:0;position:absolute;top:0}.select-flex-direction .padding-left{bottom:0}.select-flex-direction .padding-right{top:0}.select-flex-direction .padding-bottom,.select-flex-direction .padding-right{background-color:var(--elf--border-color);bottom:0;display:block;position:absolute;right:0}.select-flex-direction .padding-bottom{left:0}.select-flex-direction .flex-group{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group:before{border:1px solid var(--elf--selected-color-2);content:"";display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group-tool .tool-area{border:1px solid var(--elf--selected-color-2);display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=center] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-end] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-start] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=center] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-end] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-start] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-start] .tool-area-item[data-index="2"]{display:none}.select-flex-direction .flex-group-tool .tool-area .tool-area-item{background-color:transparent;background-color:#4b4bff0d;box-sizing:border-box;cursor:pointer;height:30px;left:0;position:absolute;top:0;transition:all .2s linear;transition:all .1s linear;width:30px}.select-flex-direction .flex-group-tool .tool-area .tool-area-item:hover{background-color:#4b4bff80}.select-flex-direction .flex-group-padding{border:1px solid var(--elf--selected-color-2);display:block;height:100%;position:absolute;width:100%}.select-flex-direction .flex-direction{display:flex;gap:2px;height:30px;width:24px}.select-flex-direction .flex-direction[data-value=column]{height:24px;width:30px}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item{height:6px!important;width:30px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:first-child{width:15px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:nth-child(3){width:20px!important}.select-flex-direction .flex-direction .flex-direction-item{background-color:var(--elf--selected-color-2);border-radius:2px;display:inline-block;height:30px;width:6px}.select-flex-direction .flex-direction .flex-direction-item:first-child{background-color:var(--elf--selected-color);height:15px}.select-flex-direction .flex-direction .flex-direction-item:nth-child(3){background-color:var(--elf--selected-color);height:20px}.elf--grid-box-editor{border:1px solid var(--elf--border-color);padding:0 1px}.elf--grid-box-editor .grid-box-editor-item .item{grid-column-gap:4px;display:grid;grid-template-columns:1fr .5fr 1fr 40px;margin-bottom:4px;text-align:center}.elf--grid-box-editor .grid-box-editor-item .item.header{height:24px}.elf--grid-box-editor .grid-box-editor-item .item.header>*{border:1px solid hsla(0,0%,93%,.18);box-sizing:border-box;padding:4px 0}.elf--grid-box-editor .grid-box-editor-item .item .repeat button{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);height:16px;width:16px}.elf--grid-box-editor .grid-box-editor-item .item .repeat button svg{fill:currentColor}.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.value,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=length]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.value{visibility:hidden}.elf--grid-box-editor .grid-box-editor-item .item .tools{padding:4px 0}.elf--grid-grow-tool-view{--cell-size:20px;--cell-padding-size:6px;--cell-color:#ff424d;--cell-grid-item-color:gray;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view[data-drag-target-item=true] .grid-item-tool{visibility:hidden}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool{opacity:0;transition:opacity .2s linear}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool.selected,.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool:hover{opacity:1}.elf--grid-grow-tool-view .layout-pointer{background-color:#000;border-radius:4px;color:#fff;display:inline-block;left:0;padding:2px 4px;position:absolute;top:0;transform:translate(-50%)}.elf--grid-grow-tool-view .layout-rect{position:absolute}.elf--grid-grow-tool-view .layout-rect .grid-item{align-items:center;border:1px dashed var(--cell-grid-item-color);box-sizing:border-box;display:flex;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column{align-items:center;box-sizing:border-box;display:flex;height:var(--cell-size);justify-content:center;left:1px;overflow:hidden;position:relative;top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item{overflow:hidden;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item>span{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle{height:100%;width:14px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.left{left:2px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right{cursor:pointer;display:grid;grid-template-columns:1fr 1fr;right:2px;width:40px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>*{height:var(--cell-size);pointer-events:all;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row{align-items:center;box-sizing:border-box;cursor:ns-resize;display:flex;justify-content:center;left:calc(var(--cell-size)*-1 - var(--cell-padding-size));overflow:hidden;padding-bottom:1px;padding-top:1px;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .item{transform:rotate(-90deg)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle{height:40px;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.top{top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{bottom:2px;cursor:pointer}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{height:20px;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool{color:var(--elf--selected-font-color);cursor:ew-resize;pointer-events:all}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg{height:16px!important;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px!important}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg path,.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg use{fill:currentColor}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append{background-color:var(--cell-color);border-radius:2px;cursor:pointer;height:var(--cell-size);position:absolute;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.column-plus{right:calc(var(--cell-size)*-1 - var(--cell-padding-size));top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.row-plus{bottom:calc(var(--cell-size)*-1 - var(--cell-padding-size));left:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner{flex-direction:column}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{display:inline-block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{display:block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner{background-color:var(--cell-color);border-radius:2px;box-sizing:border-box;display:flex;height:100%;margin-left:1px;margin-right:1px;pointer-events:all;position:relative;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item:hover{background-color:var(--elf--selected-color)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .drag-handle{align-items:center;display:flex;justify-content:center}.elf--grid-grow-tool-view .gap-tool{background-image:repeating-linear-gradient(135deg,rgba(96,108,188,0),rgba(96,108,188,0) 6px,var(--cell-color) 6px,var(--cell-color) 7px);cursor:ew-resize;opacity:0;pointer-events:all;position:absolute}.elf--grid-grow-tool-view .gap-tool.row-gap{cursor:ns-resize}.elf--grid-grow-tool-view .gap-tool:hover{opacity:1}.elf--grid-layout-editor{padding:0 10px 10px}.elf--grid-layout-editor .grid-layout-item{margin-bottom:5px;margin-top:5px}.elf--grid-layout-editor .grid-layout-item>.label{margin-bottom:5px;padding:4px}.elf--layout-property .property-body{padding:0}.elf--layout-property .layout-list>[data-value]{display:none}.elf--layout-property .layout-list>[data-value].selected,.elf--layout-property .layout-list[data-selected-value=default] [data-value=default],.elf--layout-property .layout-list[data-selected-value=flex] [data-value=flex],.elf--layout-property .layout-list[data-selected-value=grid] [data-value=grid]{display:block}.elf--layout-property .layout-list .label{padding:10px 0}.elf--resizing-item-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-item-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-item-property .resizing-mode-box .rect{height:100%;position:relative;width:100%}.elf--resizing-item-property .resizing-mode-box .rect .inner-rect{border:1px solid var(--elf--font-color);height:30px;pointer-events:none;position:absolute;width:30px}.elf--resizing-item-property .resizing-mode-box .tool{cursor:pointer;height:100%;pointer-events:all;position:absolute;width:100%}.elf--resizing-item-property .resizing-mode-box .vertical{height:100%;left:50%;position:absolute;top:0;transform:translate(-50%);width:50%}.elf--resizing-item-property .resizing-mode-box .horizontal{height:50%;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-top{display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;top:0;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-bottom{bottom:0;display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .horizontal-left{display:flex;height:100%;justify-content:center;left:1px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box .horizontal-right{display:flex;height:100%;justify-content:center;opacity:0;position:absolute;right:1px;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top{background-color:var(--elf--selected-hover-color);opacity:1}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed] .inner-rect{left:50%;top:50%;transform:translate(-50%,-50%)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .inner-rect{height:100%;left:50%;top:50%;transform:translate(-50%,-50%);width:50%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .inner-rect{height:50%;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .inner-rect{bottom:0;height:100%;left:0;right:0;top:0;transform:translate(0);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-item-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-item-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-item-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-item-property .has-label-grid>label:after,.elf--resizing-item-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-item-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--resizing-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content] .rect .inner-rect{border-color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-horizontal-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-horizontal-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-vertical-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;display:flex;flex-direction:column;font-size:10px;height:42px;left:10px;position:absolute;top:10px;width:42px}.elf--resizing-property .resizing-mode-box>.rect svg{height:12px;width:12px}.elf--resizing-property .resizing-mode-box>.rect svg use{fill:currentColor}.elf--resizing-property .resizing-mode-box>.rect>.vertical{bottom:0;left:calc(50% - 9px);position:absolute;top:0;width:18px}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-top{display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;top:0;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-bottom{bottom:0;display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.horizontal{align-items:center;display:flex;height:16px;justify-content:center;left:0;position:absolute;right:0;top:calc(50% - 8px)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-left{align-items:center;display:flex;height:20px;justify-content:center;left:0;position:absolute;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-right{align-items:center;display:flex;height:20px;justify-content:center;position:absolute;right:0;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect .inner-rect{background-color:var(--elf--background-color);border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;height:18px;left:11px;pointer-events:none;position:absolute;top:11px;width:18px}.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{height:17px;left:0;right:0;top:11px}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{background-color:transparent;border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;pointer-events:none;position:absolute}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect{height:100%;left:calc(50% - 9px);top:0;width:18px}.elf--resizing-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-property .has-label-grid>label:after,.elf--resizing-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--line-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--line-view .horizontal-line{bottom:0;cursor:ew-resize;left:-1px;pointer-events:all;position:absolute;top:0;width:3px}.elf--line-view .horizontal-line:before{background-color:var(--elf--selected-color);bottom:0;content:"";left:50%;pointer-events:none;position:absolute;top:0;transform:translate(-50%);width:1px}.elf--line-view .vertical-line{cursor:ns-resize;height:3px;left:0;pointer-events:all;position:absolute;right:0;top:-1px}.elf--line-view .vertical-line:before{background-color:var(--elf--selected-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.elf--draw-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap;width:550px}.elf--draw-manager .text{display:inline-block}.elf--draw-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--draw-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--draw-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--draw-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--draw-manager .tools>div{display:inline-block;margin-left:10px;vertical-align:middle;white-space:inherit}.elf--draw-manager .tools>div>*{display:inline-block;vertical-align:middle;width:auto}.elf--draw-manager .tools>div label{line-height:1.6;padding:3px 2px;text-align:right;vertical-align:middle}.elf--draw-manager .tools>div .number-input-editor,.elf--draw-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--draw-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--draw-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:20px;overflow:hidden;width:20px}.elf--draw-manager>*{vertical-align:middle}.elf--path-draw-view{background-color:transparent;cursor:crosshair;display:none}.elf--path-draw-view,.elf--path-draw-view .path-draw-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor-view .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .path-container:not(.modify) path.object,.elf--path-editor-view .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor-view .path-container.split-panel{pointer-events:none}.elf--path-editor-view .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor-view .path-container.path{cursor:crosshair}.elf--path-editor-view .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.alt svg circle,.elf--path-editor-view .path-container.segment-move{cursor:move}.elf--path-editor-view .path-container.transform svg .snap-path,.elf--path-editor-view .path-container.transform svg circle,.elf--path-editor-view .path-container.transform svg line,.elf--path-editor-view .path-container.transform svg rect,.elf--path-editor-view .path-container.transform svg text{display:none}.elf--path-editor-view .path-container.modify,.elf--path-editor-view .path-container.segment-move{cursor:default}.elf--path-editor-view .path-container.modify svg path.object,.elf--path-editor-view .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor-view .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor-view .path-container.is-control svg path.path-area{display:none}.elf--path-editor-view .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor-view .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor-view .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor-view svg{height:100%;width:100%}.elf--path-editor-view svg line{stroke-width:1;content-visibility:auto}.elf--path-editor-view svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor-view svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor-view svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor-view svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor-view svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor-view svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor-view svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor-view svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff;r:5;stroke-width:2}.elf--path-editor-view svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor-view svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor-view svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor-view svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor-view svg path{fill:transparent;content-visibility:auto}.elf--path-editor-view svg path.path-area{stroke-width:0}.elf--path-editor-view svg path.path-area.selected,.elf--path-editor-view svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor-view svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor-view svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff}.elf--path-editor-view svg path.guide,.elf--path-editor-view svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor-view svg path.object{fill:transparent;stroke-width:1}.elf--path-editor-view svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor-view svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor-view svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;filter:drop-shadow(2px 4px 6px white)}.elf--path-editor-view svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap}.elf--path-manager button{box-sizing:border-box;display:inline-block;height:auto;height:34px;margin:0 2px;text-decoration:underline;vertical-align:middle;white-space:nowrap;width:auto;width:34px}.elf--path-manager button svg{height:20px;vertical-align:middle;width:20px}.elf--path-manager .text{display:inline-block}.elf--path-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--path-manager .subpath{background-color:var(--elf--background-color);border-radius:4px;display:inline-block;left:0;padding:4px 2px;position:absolute;right:0;text-align:left;top:calc(100% + 2px)}.elf--path-manager .subpath button{box-sizing:border-box;display:inline-block;margin:0 2px;text-decoration:underline;white-space:nowrap}.elf--path-manager .subpath button,.elf--path-manager .subpath button svg{height:24px;vertical-align:middle;width:24px}.elf--path-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--path-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--path-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;color:var(--elf--selected-font-color);height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--path-manager .tools[data-selected-value=modify] button[data-value=modify],.elf--path-manager .tools[data-selected-value=path] button[data-value=path],.elf--path-manager .tools[data-selected-value=transform] button[data-value=transform],.elf--path-manager .tools[data-selected-value=warp] button[data-value=warp]{color:var(--elf--selected-color)}.elf--path-manager .tools>div{display:inline-block;height:100%;padding:5px 0;vertical-align:middle}.elf--path-manager .tools>div label{line-height:20px;padding:3px 2px;text-align:right;width:auto}.elf--path-manager .tools>div .number-input-editor,.elf--path-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--path-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--path-manager .tools>div .fill-single-editor{display:inline-block;vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor label{vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:18px;overflow:hidden;width:18px}.elf--path-manager>*{vertical-align:middle}.elf--boolean-item{padding:8px 5px 10px}.elf--boolean-item>div{grid-column-gap:10px;display:grid;grid-template-columns:1fr 1fr;height:30px;padding:4px 0;text-align:left}.elf--boolean-item>div.divider{background-color:var(--elf--property-border-color);font-size:0;height:1px;margin:10px 0;padding:0}.elf--boolean-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;flex:1 1 auto;font-size:11px;height:24px;text-align:left;vertical-align:middle;width:auto}.elf--boolean-item button[data-no-title=true] .title{display:none}.elf--boolean-item button svg{height:20px;vertical-align:middle;width:20px}.elf--boolean-item .title{color:#999}.elf--pattern-assets-property .pattern-list{max-height:240px;overflow:auto;padding:5px}.elf--pattern-assets-property .pattern-list .pattern-view{pointer-events:none}.elf--pattern-assets-property .pattern-list[data-view-mode=grid]{display:block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .add-pattern-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:54px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item{border:1px solid var(--elf--border-color);box-sizing:border-box;display:inline-block;margin-bottom:3px;margin-right:3px;position:relative}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item:hover[data-custom=true] .tools{display:inline-block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview{cursor:pointer;height:54px;position:relative;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview .pattern-view{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:0}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .tools{color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.pattern-assets-property{padding-left:0!important;padding-right:0!important}.elf--pattern-editor .label{height:20px;margin-top:2px}.elf--pattern-editor .label.hide{display:none}.elf--pattern-editor .label label{padding-left:5px;vertical-align:middle}.elf--pattern-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--pattern-editor .pattern-list{-moz-column-gap:4px;column-gap:4px;display:flex;flex-wrap:wrap;padding-bottom:10px;row-gap:4px}.elf--pattern-editor .pattern-list .pattern-item{box-shadow:0 0 0 1px var(--elf--border-color);display:inline-block;position:relative;text-align:center}.elf--pattern-editor .pattern-list .pattern-item.selected{background-color:var(--elf--border-color)}.elf--pattern-editor .pattern-list .pattern-item:hover .tools{display:inline-block}.elf--pattern-editor .pattern-list .pattern-item .tools{background-color:#ffffffe6;color:var(--elf--selected-color);display:none;position:absolute;right:0;top:0}.pattern-info-popup{width:240px}.pattern-info-popup .box>div{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr}.pattern-info-popup .box>div.grid-2{grid-template-columns:1fr 1fr}.el--pattern-property .pattern-property{display:flex}.el--pattern-property .add-tools{opacity:.3;transition:opacity .2s}.el--pattern-property .add-tools:hover{opacity:1}.el--pattern-property .add-tools svg{height:20px;width:20px}.elf--pattern-size-editor{height:60px;text-align:center;width:60px}.elf--pattern-size-editor .preview{height:100%}.elf--pattern-size-editor .preview .mini-view{background-color:#fff;height:100%}.elf--pattern-size-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.grid-layout{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 20px;margin-bottom:4px}.elf--project-list{margin:0!important}.elf--project-list .project-item{cursor:pointer;padding:5px 10px!important}.elf--project-list .project-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--project-list .project-item .detail label{cursor:pointer;padding:2px 0}.elf--project-list .project-item .detail .tools{text-align:right}.elf--project-list .project-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--selection-info-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-info-view .artboard-title{display:inline-block;pointer-events:all;position:absolute;transform:translateY(-100%);vertical-align:middle}.elf--selection-info-view .artboard-title svg{height:16px;vertical-align:middle;width:16px}.elf--selection-info-view .artboard-title svg path,.elf--selection-info-view .artboard-title svg use{fill:currentColor}.elf--selection-info-view .artboard-title>div{padding:2px 5px}.elf--ghost-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--ghost-tool-view svg{height:100%;left:0;position:absolute;top:0;width:100%}.elf--ghost-tool-view svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:2;stroke-dasharray:2 2}.elf--ghost-tool-view svg path.container,.elf--ghost-tool-view svg path.target,.elf--ghost-tool-view svg path.target-parent,.elf--ghost-tool-view svg path.target-rect{stroke-width:0}.elf--ghost-tool-view svg path.flex-item{stroke:transparent;fill:#3232321a;z-index:-1000}.elf--ghost-tool-view svg path.flex-target{stroke-width:5;stroke:var(--elf--selected-color)}.elf--selection-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-view.editing-path,.elf--selection-view.editing-polygon{display:none!important}.elf--selection-view.empty>*{display:none}.elf--selection-view[data-has-shift=true] .pointer-rect .pointer{background-color:transparent}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-left-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-right-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-left-width:0;border-top-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-right-width:0;border-top-width:0}.pointer-rect{bottom:0;pointer-events:none;right:0}.pointer-rect,.pointer-rect .pointer{box-sizing:border-box;left:0;position:absolute;top:0}.pointer-rect .pointer{background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:10px;pointer-events:all;width:10px}.pointer-rect .pointer[data-number="5"]{background-color:var(--elf--selected-color);border-radius:100%;height:7px;pointer-events:none;width:7px}.pointer-rect .pointer[data-number="11"],.pointer-rect .pointer[data-number="12"],.pointer-rect .pointer[data-number="13"],.pointer-rect .pointer[data-number="14"]{background-color:transparent;border:0}.pointer-rect .size-pointer{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;left:0;padding:2px 4px;position:absolute;top:0}.pointer-rect .size-pointer[data-layout=grid]{background-color:red}.pointer-rect .size-pointer[data-layout=flex]{background-color:green}.pointer-rect .rotate-pointer{background-color:#fff;border:1px solid orange;border-radius:100%;box-sizing:border-box;display:inline-block;height:14px;left:0;overflow:hidden;pointer-events:all;position:absolute;top:0;width:14px}.pointer-rect .rotate-pointer:before{background-color:orange;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.pointer-rect .rotate-pointer.no-fill{background-color:transparent;border:none;height:14px;width:14px}.pointer-rect .rotate-pointer.no-fill:before{display:none}.pointer-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:1;height:100%;left:0;position:absolute;top:0;width:100%}.pointer-rect .line path{stroke-width:2;transform:translate(.5px,.5px)}.selection-tool{border:.5px solid var(--elf--selection-tool-border-color);position:absolute}.selection-tool.path .selection-tool-item[data-position=path],.selection-tool.polygon .selection-tool-item[data-position=path],.selection-tool.textpath .selection-tool-item[data-position=path]{background-color:#fffc;border:1px solid var(--elf--border-color);bottom:auto;left:50%;opacity:1;right:auto;top:-30px;transform:translate(-50%,-50%)}.selection-tool[data-is-layout-container=true][data-layout-container=flex]{border:2px solid #4fdc4f}.selection-tool[data-is-layout-container=true][data-layout-container=grid]{border:2px solid #e46363}.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position=move]{display:none}.selection-tool .selection-tool-item{background-color:var(--elf--selection-tool-border-color);border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:8px;pointer-events:all;position:absolute;transform:translate(-50%,-50%);width:8px}.selection-tool .selection-tool-item:not([data-position=move]){background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);box-sizing:border-box}.selection-tool .selection-tool-item:before{background-color:#333c;border:var(--elf--border-color);border-radius:3px;color:#fff;content:attr(data-position-text);opacity:0;padding:4px 10px;pointer-events:none;position:absolute;text-align:center;transition:opacity .3s linear;white-space:nowrap}.selection-tool .selection-tool-item[data-position=move]{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);box-sizing:border-box;color:var(--elf--selected-font-color);cursor:move;display:inline-block;height:20px;left:0;overflow:hidden;padding-right:5px;top:-2px;transform:translateY(-100%);vertical-align:middle;width:auto}.selection-tool .selection-tool-item[data-position=move]:before{left:0;top:0;transform:translate(-100%,calc(-100% - 5px))}.selection-tool .selection-tool-item[data-position=move] svg{height:15px;width:15px}.selection-tool .selection-tool-item[data-position=move] span{color:var(--elf--selected-font-color);vertical-align:middle}.selection-tool .selection-tool-item[data-position=path]{background-color:transparent;border:0;border-radius:0;cursor:move;height:20px;left:0;opacity:0;top:0;transform:none;width:20px}.selection-tool .selection-tool-item[data-position=path]:before{left:50%;top:50%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position=path] svg{height:100%;width:100%}.selection-tool .selection-tool-item[data-position="to top"]{background-color:transparent;border:0;cursor:ns-resize;height:2px;left:0;right:0;top:-2px;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to bottom"]{background-color:transparent;border:0;bottom:-2px;cursor:ns-resize;height:2px;left:0;right:0;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to right"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;right:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to left"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;left:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%;transform:translate(-50%,-50%)}.elf--selector-popup{height:auto;padding:7px;width:250px}.elf--selector-popup .box .name{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--selector-popup .box .name input{width:100%}.elf--selector-list{grid-template-columns:1fr!important}.elf--selector-list .selector-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:1fr;height:30px;margin-bottom:5px;padding:5px}.elf--selector-list .selector-item:first-child{margin-top:5px}.elf--selector-list .selector-item.selected{background-color:var(--elf--border-color)}.elf--selector-list .selector-item .title{display:grid;grid-template-columns:1fr 20px;height:20px}.elf--selector-list .selector-item .title .name{padding:2px 0}.elf--selector-list .selector-item .title .name span{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);font-weight:700;padding:2px 4px}.elf--selector-list .selector-item .title .tools{text-align:right;vertical-align:middle}.elf--svgfilter-assets-property .svgfilter-assets{padding:5px}.elf--svgfilter-assets-property .svgfilter-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--svgfilter-assets-property .svgfilter-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=grid] button[data-value=grid],.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--svgfilter-assets-property .svgfilter-list{padding:5px}.elf--svgfilter-assets-property .svgfilter-list .svgfilter-view{background-image:radial-gradient(#ff0 0,red 100%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid]{display:block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item button svg{height:20px;width:20px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item{display:inline-block;margin-bottom:4px;margin-right:2px;position:relative;vertical-align:middle;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item:hover .tools{display:inline-block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title{grid-row-gap:4px;display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title input{width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--color-matrix-editor .title{color:var(--elf--selected-color);padding:5px 0}.elf--color-matrix-editor .color-matrix-template{border:1px solid var(--elf--border-color);box-sizing:border-box;max-height:383px;overflow:auto;padding:5px 10px}.elf--color-matrix-editor .color-matrix-template input,.elf--color-matrix-editor .color-matrix-template select{width:100%}.elf--color-matrix-editor .color-matrix-template .sample-item{cursor:pointer;padding:2px 5px}.elf--color-matrix-editor .color-matrix-template .sample-item:hover{background-color:#fff3;color:var(--elf--selected-color)}.elf--func-filter-editor{display:grid;grid-template-columns:1fr}.elf--func-filter-editor.focused{border-radius:3px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--func-filter-editor.has-label{grid-template-columns:60px 1fr}.elf--func-filter-editor.has-label label{padding:2px 0;padding-left:0!important;text-align:left;vertical-align:middle}.elf--func-filter-editor>[data-type]{display:none;padding:4px 0}.elf--func-filter-editor[data-selected-type=discrete]>[data-type=table],.elf--func-filter-editor[data-selected-type=gamma]>[data-type=gamma],.elf--func-filter-editor[data-selected-type=identity]>[data-type=identity],.elf--func-filter-editor[data-selected-type=linear]>[data-type=linear],.elf--func-filter-editor[data-selected-type=table]>[data-type=table]{display:block}.elf--svg-filter-editor{grid-column-gap:10px;color:var(--elf--font-color);display:grid;grid-template-columns:150px 1fr 200px;height:100%;position:relative}.elf--svg-filter-editor .tab>.tab-header{height:30px}.elf--svg-filter-editor .label{height:20px;margin-top:2px}.elf--svg-filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--svg-filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--svg-filter-editor .tools select{display:inline-block;width:100px!important}.elf--svg-filter-editor .left{height:100%;position:relative}.elf--svg-filter-editor .left .filter-item-list{height:100%;overflow:auto;padding:10px 5px}.elf--svg-filter-editor .left .filter-item-list .group{margin-bottom:6px}.elf--svg-filter-editor .left .filter-item-list .group:before{color:var(--elf--selected-color);content:attr(label);display:block}.elf--svg-filter-editor .left .filter-item-list .group .item{color:var(--elf--font-color);cursor:pointer;padding:2px 10px;vertical-align:middle}.elf--svg-filter-editor .left .filter-item-list .group .item svg{height:20px;width:20px}.elf--svg-filter-editor .left .filter-item-list .group .item[value=BackgroundImage],.elf--svg-filter-editor .left .filter-item-list .group .item[value=FillPaint],.elf--svg-filter-editor .left .filter-item-list .group .item[value=SourceGraphic]{color:var(--elf--selected-color)}.elf--svg-filter-editor .left .filter-item-list .group .item:hover{background-color:#ffffff4d}.elf--svg-filter-editor .center{overflow:auto;position:relative}.elf--svg-filter-editor .center .graph{border:1px solid var(--elf--selected-color);box-sizing:border-box;height:100%;overflow:auto;position:relative}.elf--svg-filter-editor .center .graph .connected-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .connected-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .connected-line-panel svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;pointer-events:none}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=graphic]{stroke:#a6a6ff}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=source]{stroke:#9acd32}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=modifier]{stroke:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=lighting]{stroke:#e6ff00}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=combiner]{stroke:#ff9bff}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle{fill:var(--elf--selected-color);r:4;stroke:rgba(var(--elf--selected-color),.5);stroke-width:0;cursor:pointer;pointer-events:all}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=graphic]{fill:#a6a6ff;stroke:#a6a6ff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=source]{fill:#9acd32;stroke:#9acd3280}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=modifier]{fill:var(--elf--selected-color);stroke:rgba(var(--elf--selected-color),.5)}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=lighting]{fill:#e6ff00;stroke:#e6ff0080}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=combiner]{fill:#ff9bff;stroke:#ff9bff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle:hover{stroke-width:4}.elf--svg-filter-editor .center .graph .drag-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .drag-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .drag-line-panel svg path{stroke:var(--elf--selected-color);stroke-width:1}.elf--svg-filter-editor .center .graph .graph-panel{height:1000px;pointer-events:none;position:relative;width:1000px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node{background-color:var(--elf--background-color);border-radius:10px;box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px #777;cursor:pointer;display:inline-block;height:40px;left:10px;pointer-events:all;position:absolute;top:10px;width:40px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundImage],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=FillPaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Flood],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Image],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceGraphic],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=StrokePaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Turbulence]{border-radius:0}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out{background-color:#f8e579}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out svg{display:none}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.label{bottom:100%;color:var(--elf--font-color);display:inline-block;left:50%;position:absolute;transform:translate(-50%)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove{background-color:var(--elf--selected-color);border-radius:100%;color:var(--elf--font-color);display:inline-block;height:12px;left:50%;position:absolute;top:-6px;transform:translate(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg circle,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg rect,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview{height:100%;pointer-events:none;position:relative;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Composite] svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Merge] svg{transform:translate(-50%,-50%) rotate(90deg)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=graphic]{color:#a6a6ff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=source]{color:#9acd32}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=modifier]{color:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting]{color:#e6ff00}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=combiner]{color:#ff9bff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting] svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg{display:block;height:30px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in-list{display:inline-block;left:-14px;position:absolute;top:50%;transform:translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in{background-color:#09f;border-bottom-left-radius:50%;border-top-left-radius:50%;display:block;height:12px;margin:2px 0;position:relative;width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in:before{background-color:#fffc;border-radius:100%;content:"";display:block;height:8px;left:3px;position:absolute;top:50%;transform:translateY(-50%);width:8px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{background-color:#09f;border-bottom-right-radius:50%;border-top-right-radius:50%;height:12px;position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .light{background-color:#f8e579;border-bottom-left-radius:100%;border-bottom-right-radius:100%;bottom:-15px;height:15px;left:50%;position:absolute;transform:translate(-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{color:#fff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{height:24px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg{left:6px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{left:7px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node.selected{box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px var(--elf--selected-color)}.elf--svg-filter-editor .right{box-sizing:border-box;height:100%;overflow:auto}.elf--svg-filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;width:100%}.elf--svg-filter-editor .filter-list .filter-item{display:block}.elf--svg-filter-editor .filter-list .filter-item .title{border-radius:3px;color:var(--elf--selected-color);display:grid;grid-template-columns:1fr 30px;margin:5px 0}.elf--svg-filter-editor .filter-list .filter-item .title label{padding:2px 0}.elf--svg-filter-editor .filter-list .filter-item .title .filter-menu{color:var(--elf--selected-font-color);text-align:right}.elf--svg-filter-editor .filter-list .filter-item .filter-ui{display:grid;grid-template-columns:1fr;margin-bottom:2px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div{margin-bottom:5px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--number-range-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--select-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--text-editor.has-label{grid-template-columns:100px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--color-view-editor.has-label{grid-template-columns:100px 24px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui input[type=range]{width:90%}.elf--svg-filter-popup{max-height:800px;min-height:500px;min-width:900px;position:relative}.elf--svg-filter-popup .box{bottom:0;left:0;position:absolute;right:0;top:0}.elf--svg-filter-popup .box>.editor{height:100%;position:relative}.elf--svg-filter-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--svg-filter-popup .box .property .title .tools{text-align:right}.elf--svg-filter-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--svg-filter-popup .box label{text-align:left;vertical-align:middle}.elf--svg-filter-popup .box input[type=number],.elf--svg-filter-popup .box input[type=range],.elf--svg-filter-popup .box input[type=text],.elf--svg-filter-popup .box select{vertical-align:middle;width:100%}.elf--svg-filter-select-editor{grid-column-gap:2px;display:grid;grid-template-columns:1fr 16px 16px;height:24px;position:relative}.elf--svg-filter-select-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr 16px 16px}.elf--svg-filter-select-editor.has-label label{line-height:1.6;padding:4px 0 2px;text-align:left;vertical-align:middle}.elf--svg-filter-select-editor select{height:100%;width:100%}.elf--svg-filter-select-editor button{margin-top:4px}.text-shadow-samples{border:0;font-size:11px}.elf--transition-list{grid-template-columns:1fr!important}.elf--transition-list .transition-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0}.elf--transition-list .transition-item.selected{background-color:var(--elf--border-color)}.elf--transition-list .transition-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;vertical-align:middle;width:100%}.elf--transition-list .transition-item .timing canvas{border-radius:3px}.elf--transition-list .transition-item .labels{margin-top:4px;padding:5px;text-align:left;vertical-align:middle}.elf--transition-list .transition-item .labels label{background-color:var(--elf--border-color);border-radius:2px;font-weight:700;padding:1px 3px}.elf--transition-list .transition-item .labels label small{color:var(--elf--font-color)}.elf--transition-list .transition-item .labels label.property{border-bottom:0;font-weight:400}.elf--transition-list .transition-item .tools{padding-top:8px;text-align:right;vertical-align:middle}.elf--transition-property-popup{width:220px}.elf--transition-property-popup .box>div{margin-bottom:5px}.elf--transition-property-popup .box label{text-align:left;vertical-align:middle}.elf--transition-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--transition-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--transition-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--video-property .divider{background-color:var(--elf--divider-color);height:1px;margin:10px auto;width:30px}.elf--video-property .play-control{grid-column-gap:5px;display:grid;grid-template-columns:70px 1fr}.elf--video-property .play-control button[data-value]{display:none;text-align:left;vertical-align:middle;width:auto}.elf--video-property .play-control[data-selected-value=pause] button[data-value=pause],.elf--video-property .play-control[data-selected-value=play] button[data-value=play]{display:inline-block}.elf--video-property .volume-control{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr}.elf--video-property .volume-control span[data-value]{color:var(--elf--font-color);display:none;height:16px;vertical-align:middle;width:16px}.elf--video-property .volume-control span[data-value] svg{height:100%;width:100%}.elf--video-property .volume-control span[data-value] svg path{fill:currentColor}.elf--video-property .volume-control[data-selected-value=down] span[data-value=down],.elf--video-property .volume-control[data-selected-value=muted] span[data-value=muted],.elf--video-property .volume-control[data-selected-value=up] span[data-value=up]{display:inline-block}.elf--content-item{grid-template-columns:1fr!important;padding:0 4px!important}.elf--content-item textarea{border:1px solid var(--elf--border-color);border-radius:3px;height:100px;width:100%}.elf--custom-assets{bottom:0;left:0;position:absolute;right:0;top:0}.elf--custom-assets .custom-assets-tools{grid-column-gap:10px;box-sizing:border-box;display:grid;grid-template-columns:1fr 40px;height:20px;left:0;padding:0 10px;position:absolute;right:0;top:10px}.elf--custom-assets .custom-assets-tools .tools{text-align:right}.elf--custom-assets .elf--asset-list{bottom:0;box-sizing:border-box;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;overflow:auto;padding:10px;position:absolute;right:0;row-gap:10px;top:30px}.elf--custom-assets .elf--asset-list .asset-preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;position:relative;width:80px}.elf--custom-assets .elf--asset-list .asset-preview .tools{background-color:transparent;bottom:0;box-sizing:border-box;left:0;opacity:1;padding:2px;position:absolute;right:0;transition:opacity .2s}.elf--custom-assets .elf--asset-list .asset-preview .tools .title{color:var(--elf--selected-font-color);display:inline-block;text-align:left;vertical-align:middle}.elf--custom-assets .elf--asset-list .asset-preview .tools .buttons{display:inline-block}.elf--custom-assets .elf--asset-list .asset-preview:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--custom-assets .elf--asset-list .asset-preview:hover .tools{opacity:1}.elf--custom-assets .elf--asset-list .asset-preview img{-o-object-fit:contain;object-fit:contain;width:100%}.elf--asset-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--asset-list .asset-item{grid-column-gap:4px;border-radius:4px;color:var(--elf--list-item-font-color);display:grid;grid-template-columns:20px 1fr;margin-bottom:0!important;padding:5px 7px!important}.elf--asset-list .asset-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--asset-list .asset-item .detail label{padding:2px 0;vertical-align:middle}.elf--asset-list .asset-item .detail .tools{text-align:right}.elf--asset-list .asset-item.selected{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf--asset-list .asset-item.selected .tools button{color:var(--elf--selected-font-color)}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after,.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{border-radius:3px;content:"";display:inline-block;height:10px;margin-left:5px;vertical-align:middle;width:10px}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after{background-color:#44a344}.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{background-color:var(--elf--selected-color)}.elf--library-items{padding:10px}.elf--library-items .property{margin-bottom:10px!important;margin-top:10px!important}.elf--library-items .property-title{background-color:var(--elf--selected-color-2)!important;border-radius:4px;color:var(--elf--selected-font-color);margin-bottom:10px}.elf--library-items .property-title label{line-height:1.5}.object-items{bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.object-items>:first-child{flex:0 0 140px}.object-items>:last-child{flex:1 1 0;margin-top:auto}.elf--switch-left-panel,.elf--switch-right-panel{display:inline-block;position:relative}.elf--tool-bar{background-color:var(--elf--header-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%}.elf--tool-bar>.logo-area{flex:none;height:100%;width:60px}.elf--tool-bar>.logo-area>*{height:100%}.elf--tool-bar>.toolbar-area{display:flex;flex:1 1 auto;flex-direction:row}.elf--tool-bar>.toolbar-area>*{align-items:center;display:inline-flex;flex:1 1 auto;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--tool-bar>.toolbar-area>.left{flex-direction:row;justify-content:flex-start}.elf--tool-bar>.toolbar-area>.right{flex-direction:row;justify-content:flex-end;padding-right:20px}.elf--tool-bar>.toolbar-area>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--tool-bar>.toolbar-area>.dropdown-menu>button,.elf--tool-bar>.toolbar-area>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--tool-bar>.toolbar-area>.dropdown-menu>button .icon svg,.elf--tool-bar>.toolbar-area>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item.selected,.elf--tool-bar>.toolbar-area>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--tool-bar>.toolbar-area>.elf--logo-area:hover,.elf--tool-bar>.toolbar-area>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--drag-area-view{height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%}.elf--drag-area-view .drag-area-rect{background-color:var(--elf--drag-area-rect-background-color);border:.5px solid var(--elf--drag-area-rect-border-color);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--page-tools{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);border-radius:3px;bottom:10px;box-sizing:border-box;color:var(--elf--font-color);display:inline-block;left:20px;padding:5px 10px;position:absolute}.elf--page-tools>*{display:inline-block;position:relative}.elf--page-tools>label{display:inline-block;height:100%;padding-top:5px;vertical-align:middle}.elf--page-tools button{border:0;border-radius:3px;display:inline-block;height:24px;padding:4px;position:relative;vertical-align:middle;width:24px}.elf--page-tools button.on{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--page-tools button svg{pointer-events:none}.elf--page-tools button[data-path-index="0"]:after{background-color:var(--elf--selected-color);border-radius:100%;content:"";height:4px;left:10px;position:absolute;top:100%;width:4px}.elf--page-tools>.select{border:1px solid rgba(var(--elf--selected-color),.5);border-radius:5px;display:inline-block;width:50px}.player .page-container{left:0;top:0}.elf--element-view{outline:none}.canvas-view,.elf--element-view{left:0;pointer-events:none;position:absolute;top:0}.canvas-view{height:100%;transform-origin:left top;width:100%;will-change:auto}.canvas-view[data-outline=true] .element-item{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view[data-outline=true] .element-item.svg-path{border:0!important}.canvas-view[data-outline=true] .element-item.artboard{border:2px dashed #595959!important}.canvas-view[data-outline=true] .element-item svg circle,.canvas-view[data-outline=true] .element-item svg ellipse,.canvas-view[data-outline=true] .element-item svg line,.canvas-view[data-outline=true] .element-item svg path,.canvas-view[data-outline=true] .element-item svg polygon,.canvas-view[data-outline=true] .element-item svg polyline,.canvas-view[data-outline=true] .element-item svg rect,.canvas-view[data-outline=true] .element-item svg text{fill:none!important;stroke:#595959!important;stroke-width:1px!important}.canvas-view .element-item.svg-path{pointer-events:none}.canvas-view .element-item.svg-path>*,.canvas-view .element-item.svg-path>svg>path{pointer-events:stroke}.canvas-view .element-item.svg-path>svg>:not([fill=transparent]){pointer-events:visible}.canvas-view .element-item{pointer-events:all;will-change:auto}.canvas-view .element-item [contenteditable=true],.canvas-view .element-item[contenteditable=true],.canvas-view .element-item[tabIndex]{outline:none}.canvas-view .element-item[data-is-boolean-item=true]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view .element-item[data-is-boolean-item=true].svg-path{border:0!important}.canvas-view .element-item[data-is-boolean-item=true] svg circle,.canvas-view .element-item[data-is-boolean-item=true] svg ellipse,.canvas-view .element-item[data-is-boolean-item=true] svg line,.canvas-view .element-item[data-is-boolean-item=true] svg path,.canvas-view .element-item[data-is-boolean-item=true] svg polygon,.canvas-view .element-item[data-is-boolean-item=true] svg polyline,.canvas-view .element-item[data-is-boolean-item=true] svg rect,.canvas-view .element-item[data-is-boolean-item=true] svg text{fill:none!important;stroke:transparent!important;stroke-width:1px!important}.canvas-view .element-item.artboard{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.canvas-view .element-item>svg circle:hover,.canvas-view .element-item>svg ellipse:hover,.canvas-view .element-item>svg line:hover,.canvas-view .element-item>svg path:hover,.canvas-view .element-item>svg polygon:hover,.canvas-view .element-item>svg polyline:hover,.canvas-view .element-item>svg rect:hover{stroke:#4040fc}.canvas-view .element-item>svg:hover>text{fill:#4040fc}.elf--horizontal-ruler{background-color:var(--elf--background-color);height:var(--elf--editor-ruler-size);left:var(--elf--editor-ruler-size);position:absolute;right:0;top:0;z-index:0}.elf--horizontal-ruler .horizontal-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--horizontal-ruler .horizontal-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--horizontal-ruler .horizontal-ruler-container svg.horizontal-line path{stroke:var(--elf--selected-color)}.elf--horizontal-ruler .horizontal-ruler-container .cursor{--elf--horizontal-cursor-position:0px;background-color:var(--elf--selected-color-2);height:100%;transform:translate(var(--elf--horizontal-cursor-position)) translateZ(0) translateY(-1px);width:2px}.elf--horizontal-ruler svg{transform:translateY(2px)}.elf--horizontal-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--horizontal-ruler svg path{stroke:var(--elf--font-color)}.elf--horizontal-ruler svg path[data-selected=true]{stroke:transparent}.elf--horizontal-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--vertical-ruler{background-color:var(--elf--background-color);bottom:0;box-sizing:border-box;left:0;position:absolute;top:var(--elf--editor-ruler-size);width:var(--elf--editor-ruler-size);z-index:0}.elf--vertical-ruler .vertical-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--vertical-ruler .vertical-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--vertical-ruler .vertical-ruler-container svg.vertical-line path{stroke:var(--elf--selected-color)}.elf--vertical-ruler .vertical-ruler-container .cursor{--elf--vertical-cursor-position:0px;background-color:var(--elf--selected-color-2);height:2px;transform:translateY(var(--elf--vertical-cursor-position)) translateZ(0);width:100%}.elf--vertical-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--vertical-ruler svg path{stroke:var(--elf--font-color)}.elf--vertical-ruler svg path[data-selected=true]{stroke:transparent}.elf--vertical-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--context-menu-manger{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--context-menu-manger>*{pointer-events:auto}.elf--page-three-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-three-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--element-three-view{outline:none}.elf--element-three-view,.elf--element-three-view .canvas-view{height:100%;left:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--element-three-view .canvas-view{transform-origin:left top}.elf--body-three-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-three-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-three-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-three-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-three-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0}.three-editor[data-design-mode=item] .layout-middle{bottom:0!important}.three-editor[data-design-mode=item] .elf--status-bar{display:none!important}.three-editor .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.three-editor .layout-main .layout-top{height:48px;top:0;z-index:10000}.three-editor .layout-main .layout-middle,.three-editor .layout-main .layout-top{background-color:var(--elf--background-color);box-sizing:border-box;left:0;position:absolute;right:0}.three-editor .layout-main .layout-middle{bottom:0;overflow:hidden;top:48px}.three-editor .layout-main .layout-middle .layout-header{background-color:var(--elf--header-background-color);box-sizing:border-box;color:var(--elf--selected-font-color);display:none;height:0;left:340px;position:absolute;right:280px;top:0}.three-editor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px}.three-editor .layout-main .layout-middle>.splitter.selected,.three-editor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.three-editor .layout-main .layout-middle>.left-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;left:340px;pointer-events:none;position:absolute;top:0;transition:background-color .05s linear;width:8px}.three-editor .layout-main .layout-middle>.left-arrow button{color:var(--elf--font-color);pointer-events:all}.three-editor .layout-main .layout-middle>.right-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;pointer-events:none;position:absolute;right:280px;top:0;transition:background-color .05s linear;width:8px}.three-editor .layout-main .layout-middle>.right-arrow button{color:var(--elf--font-color);pointer-events:all}.three-editor .layout-main .layout-middle>button{color:var(--elf--font-color);cursor:pointer;height:12px;position:absolute;top:50%;transform:translateY(-50%) translate(-25%);width:12px;z-index:1000}.three-editor .layout-main .layout-middle>button svg{transform:scale(1.5)}.three-editor .layout-main .layout-middle>.toggleLeft{left:340px}.three-editor .layout-main .layout-middle>.toggleRight{right:280px}.three-editor .layout-main .layout-middle .layout-footer{background-color:var(--elf--background-color);bottom:0;height:0;left:0;overflow:hidden;position:absolute;right:0;z-index:10000}.three-editor .layout-main .layout-middle .layout-footer .footer-splitter{display:none}.three-editor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);bottom:0;box-sizing:border-box;display:inline-block;display:flex;flex-direction:column;left:0;position:absolute;top:0;width:340px}.three-editor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);bottom:0;display:inline-block;display:flex;flex-direction:column;overflow:auto;position:absolute;right:0;top:0;width:280px;z-index:100}.three-editor .layout-main .layout-middle .layout-body{bottom:0;left:340px;position:absolute;right:280px;top:0}.whiteboard .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.whiteboard .layout-main .layout-middle{background-color:var(--elf--background-color);box-sizing:border-box;overflow:hidden}.whiteboard .layout-main .layout-middle,.whiteboard .layout-main .layout-middle .layout-body,.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0} +.colorpicker{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-shadow:0 0 10px 2px #0000001f;display:inline-block;position:relative;width:224px;z-index:1000}.colorpicker>.arrow{border-bottom:10px solid rgba(0,0,0,.2);border-left:10px solid transparent;border-right:10px solid transparent;display:none;height:0;left:7px;pointer-events:none;position:absolute;top:-10px;width:0}.colorpicker>.arrow:after{border-bottom:9px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:-9px;position:absolute;top:1px;width:0}.colorpicker .colorpicker-body .color-tab{border:1px solid #ececec;box-sizing:border-box;display:flex;flex-direction:column;height:350px}.colorpicker .colorpicker-body .color-tab.xd{height:200px}.colorpicker .colorpicker-body .color-tab .color-tab-header{display:flex;flex:none;flex-direction:row;height:20px}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item{background-color:#ececec;box-sizing:border-box;cursor:pointer;flex:1 1 auto;height:100%;padding:4px 10px;text-align:center}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item.active{background-color:#fff;border-bottom-color:#fff}.colorpicker .colorpicker-body .color-tab .color-tab-body{flex:1 1 auto;position:relative}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content.active{display:block}.colorpicker .colorpicker-body .color-panel{cursor:pointer;height:120px;overflow:hidden;position:relative}.colorpicker .colorpicker-body .color-panel>.saturation,.colorpicker .colorpicker-body .color-panel>.saturation>.value{height:100%;position:relative;width:100%}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border-radius:50%;height:10px;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.colorpicker .colorpicker-body .color-panel>.saturation{background-color:#cb998000;background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0));background-repeat:repeat-x}.colorpicker .colorpicker-body .color-panel>.saturation>.value{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border:1px solid #fff;box-shadow:0 0 2px #0000000d}.colorpicker .colorpicker-body .control{padding:10px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker .colorpicker-body .control>.color,.colorpicker .colorpicker-body .control>.empty{background-color:#fff;border-radius:50%;box-sizing:border-box;height:30px;left:12px;position:absolute;top:14px;width:30px}.colorpicker .colorpicker-body .control>.color{border:1px solid rgba(0,0,0,.1)}.colorpicker .colorpicker-body .control>.hue{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:6px 16px;position:relative}.colorpicker .colorpicker-body .control>.hue>.hue-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control>.opacity{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:3px 16px;position:relative}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{border-radius:50%;cursor:pointer;height:12px;left:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker .colorpicker-body .control>.hue>.hue-container{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control>.opacity>.opacity-container>.color-bar{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .control>.empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{background-color:#fefefe;border:1px solid rgba(0,0,0,.05);box-shadow:2px 2px 2px #0003}.colorpicker .colorpicker-body .information{box-sizing:border-box;position:relative}.colorpicker .colorpicker-body .information>input{bottom:20px;box-sizing:border-box;height:20px;padding:0 0 0 2px;position:absolute;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.colorpicker .colorpicker-body .information>input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information.hex>.information-item.hex,.colorpicker .colorpicker-body .information.hsl>.information-item.hsl,.colorpicker .colorpicker-body .information.rgb>.information-item.rgb{display:flex}.colorpicker .colorpicker-body .information>.information-item{box-sizing:border-box;display:none;margin-right:40px;padding:0 5px 0 9px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field{box-sizing:border-box;display:block;flex:1;padding:3px 1px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field>.title{color:#a9a9a9;padding-top:2px;text-align:center}.colorpicker .colorpicker-body .information>.information-item>.input-field input{border:1px solid #cbcbcb;border-radius:2px;box-sizing:border-box;color:#333;height:21px;padding:3px;text-align:center;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-l input[type=number],.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-s input[type=number]{padding-left:1px;padding-right:10px}.colorpicker .colorpicker-body .information>.information-item>.input-field .postfix{box-sizing:border-box;display:inline-block;height:21px;line-height:2;padding:2px;position:absolute;right:1px;text-align:center;top:2px}.colorpicker .colorpicker-body .information>.information-change{bottom:0;box-sizing:border-box;display:block;padding-top:5px;position:absolute;right:0;text-align:center;top:0;width:40px}.colorpicker .colorpicker-body .information>.information-change>.format-change-button{background:transparent;border:0;box-sizing:border-box;cursor:pointer;outline:none}.colorpicker .colorpicker-body .information>.title{color:#a3a3a3}.colorpicker .colorpicker-body .information>.input{color:#333}.colorpicker .colorpicker-body .colorsets{border-top:1px solid #e2e2e2}.colorpicker .colorpicker-body .colorsets>.menu{float:right;padding:10px 15px 10px 5px}.colorpicker .colorpicker-body .colorsets>.menu button{border:0;cursor:pointer;font-family:serif,sans-serif;font-weight:300;outline:none}.colorpicker .colorpicker-body .colorsets>.color-list{box-sizing:border-box;display:block;line-height:0;margin-right:30px;padding:10px 0 0 10px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item{background-size:contain;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-bottom:12px;margin-right:12px;overflow:hidden;position:relative;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item:hover{transform:scale(1.2)}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .color-view{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .add-color-item{color:#8e8e8e;cursor:pointer;display:inline-block;font-family:serif,sans-serif;font-weight:400;height:13px;line-height:1;margin-bottom:12px;margin-right:12px;text-align:center;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser{background-color:#00000080;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .05s ease-out}.colorpicker .colorpicker-body .color-chooser.open{opacity:1;pointer-events:all}.colorpicker .colorpicker-body .color-chooser .color-chooser-container{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:120px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header{border-bottom:1px solid rgba(0,0,0,.2);box-sizing:border-box;display:flex;height:34px;left:0;padding:3px 0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title{box-sizing:border-box;color:#000;flex:2;font-weight:700;margin:0;overflow:hidden;padding:5px 5px 5px 14px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items{cursor:pointer;display:block;flex:1;height:100%;line-height:2;padding-right:10px;text-align:right}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list{bottom:0;left:0;overflow:auto;position:absolute;right:0;top:34px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item{border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;padding:3px 0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover{background-color:#0000000d}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title{box-sizing:border-box;color:#000;flex:2;font-weight:400;margin:0;overflow:hidden;padding:5px 5px 5px 14px;pointer-events:none;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items{cursor:pointer;display:block;flex:3;height:100%;line-height:1.6;pointer-events:none}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;background-size:contain;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-right:10px;overflow:hidden;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view{height:100%;margin:0;padding:0;pointer-events:none;width:100%}.colorpicker.sketch{border-radius:5px}.colorpicker.sketch>.colorpicker-body .color-panel{box-sizing:border-box;height:150px}.colorpicker.sketch>.colorpicker-body>.control{margin-top:5px;padding:0}.colorpicker.sketch>.colorpicker-body>.control>.color,.colorpicker.sketch>.colorpicker-body>.control>.empty{background-color:#fff;border-radius:100%;box-sizing:border-box;height:26px;left:auto;position:absolute;right:0;top:1px;width:26px}.colorpicker.sketch>.colorpicker-body>.control>.color{box-shadow:inset 0 0 1px #00000080}.colorpicker.sketch>.colorpicker-body>.control>.hue{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.hue>.hue-container{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control>.opacity{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container,.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container .color-bar{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control .drag-bar,.colorpicker.sketch>.colorpicker-body>.control .drag-bar2{background-color:#fff;border:1px solid #fff;border-radius:50%;bottom:1px!important;box-shadow:0 0 1px #00000080;height:12px;left:0;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker.sketch>.colorpicker-body>.information{margin-top:5px}.colorpicker.sketch>.colorpicker-body>.information .information-change{display:none}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.rgb{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.hsl{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hex{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hsl,.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.rgb{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.hsl{display:inherit}.colorpicker.sketch>.colorpicker-body>.information .information-item{display:inline-flex!important;margin-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title{color:#000;cursor:pointer}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title:hover{font-weight:700}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field:last-child:not(:first-child){padding-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item.hex{padding-left:0;padding-right:0;width:70px}.colorpicker.sketch>.colorpicker-body>.information .information-item.rgb{padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.information .information-item.hsl{display:none;padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.colorsets>.menu{display:none}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list{margin-right:0;padding-right:12px}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list .color-item{border-radius:3px;height:16px;margin-bottom:10px;margin-right:9px;width:16px}.colorsets-contextmenu{background-color:#ececec;border:1px solid #ccc;border-radius:6px;display:none;list-style:none;padding:4px 0;position:fixed}.colorsets-contextmenu.show{display:inline-block}.colorsets-contextmenu .elf--menu-item{cursor:default;padding:2px 20px}.colorsets-contextmenu .elf--menu-item:hover{background-color:#5ea3fb;color:#fff}.colorsets-contextmenu.small .elf--menu-item.small-hide{display:none}.elf-studio{--elf--editor-ruler-size:20px;bottom:0;box-sizing:border-box;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;font-size:11px;margin:0;padding:0;right:0}.elf-studio *,.elf-studio :after,.elf-studio :before{-webkit-overflow-scrolling:touch;box-sizing:border-box}.elf-studio.ua-window .scrollbar::-webkit-scrollbar{background-color:#aaa;height:8px;width:5px}.elf-studio.ua-window .scrollbar::-webkit-scrollbar-thumb{background:#000}.elf-studio[data-theme=dark]{--elf--range-thumb-color:#228be6;--elf--range-track-color:#616161;--elf--range-thumb-border-color:rgba(0,0,0,.8);--elf--input-background-color:#343a40;--elf--input-inactive-color:#495057;--elf--input-border-color:#adb5bd;--elf--input-font-color:#f8f9fa;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#495057;--elf--selection-tool-border-color:#3a89f0;--elf--selected-color:#228be6;--elf--selected-color-2:#1864ab;--elf--selected-hover-color:#74c0fc;--elf--selected-border-color:#1c7ed6;--elf--layout-border-color:#212529;--elf--background-color:#343a40;--elf--toolbar-background-color:#212529;--elf--selected-background-color:#535353;--elf--font-color:#f8f9fa;--elf--disabled-font-color:#e9ecef;--elf--menu-item-title-font-color:#e9ecef;--elf--selected-font-color:#f8f9fa;--elf--divider-color:#616161;--elf--property-border-color:#0b0b0b;--elf--property-title-background-color:#161616;--elf--property-background-color:#22282c;--elf--list-item-font-color:#fff;--elf--list-item-selected-color:#03a9f4;--elf--list-item-disable-font-color:#828282;--elf--popup-background-color:#343a40;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(61,61,61,.5);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#000;--elf--path-segment-stroke-color:#0bf;--elf--timeline-gauge-background-color:#ee4b66;--elf--timeline-gauge-handle-color:#fffaaf;--elf--timeline-row-selected-color:rgba(67,92,181,.4);--elf--timeline-property-add-background-color:#666;--elf--guide-line-color:#ca7976;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#435cb5;--elf--canvas-background-color:#d3d3d3;--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.214);--elf--rotate-x-border-color:#6868f7;--elf--rotate-y-border-color:#70c570;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#f8f9fa;--elf--tab-toolbar-background-color:#212529;--elf--tab-font-color:#949494}.elf-studio[data-theme=light]{--elf--range-thumb-color:#609de2;--elf--range-track-color:#cfcfcf;--elf--range-thumb-border-color:#609de2;--elf--input-background-color:#fff;--elf--input-inactive-color:#f1f3f5;--elf--input-border-color:#ced4da;--elf--input-font-color:#333;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#868e96;--elf--selection-tool-border-color:#3a89f0;--elf--layout-border-color:#dee2e6;--elf--selected-color:#66baff;--elf--selected-color-2:#339af0;--elf--selected-hover-color:#d0ebff;--elf--selected-border-color:#609de2;--elf--background-color:#fff;--elf--toolbar-background-color:#2c2c2c;--elf--selected-background-color:#d8d8d8;--elf--font-color:#333;--elf--disabled-font-color:#c1c1c1;--elf--menu-item-title-font-color:#f8f9fa;--elf--selected-font-color:#fff;--elf--divider-color:#cfcfcf;--elf--property-border-color:#e5e5e5;--elf--property-title-background-color:#fff;--elf--property-background-color:#fff;--elf--list-item-font-color:#000;--elf--list-item-selected-color:#609de2;--elf--list-item-disable-font-color:#a3a3a3;--elf--popup-background-color:#fff;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(42,42,42,.478);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#5c5c5c;--elf--path-segment-stroke-color:#b7b7b7;--elf--timeline-gauge-background-color:#435cb5;--elf--timeline-gauge-handle-color:#748ff1;--elf--timeline-row-selected-color:#609de2;--elf--timeline-property-add-background-color:#747474;--elf--guide-line-color:#66baff;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#36457a;--elf--canvas-background-color:hsla(0,0%,7%,.1);--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.5);--elf--rotate-x-border-color:#643ac7;--elf--rotate-y-border-color:#8bdf8b;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#fff;--elf--tab-toolbar-background-color:#f6fafc;--elf--tab-font-color:#adadad}.elf-studio{height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.elf-studio [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf-studio input[type=email],.elf-studio input[type=number],.elf-studio input[type=text],.elf-studio textarea{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);color:var(--elf--input-font-color);outline:none}.elf-studio select{background-color:var(--elf--input-background-color);border-radius:3px;color:var(--elf--font-color);line-height:1.6;padding:0 4px}.elf-studio button,.elf-studio select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;vertical-align:middle}.elf-studio button{background-color:transparent;border-width:0;color:var(--elf--button-front-color);display:inline-block;padding:0}.elf-studio button svg{height:100%;width:100%}.elf-studio input[type=file].embed-file-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--elf--background-color);display:inline-block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .add-image-button{display:none}.elf-studio .icon svg,.elf-studio button svg,.elf-studio label svg{height:16px;width:16px}.elf-studio .icon svg circle,.elf-studio .icon svg ellipse,.elf-studio .icon svg line,.elf-studio .icon svg path,.elf-studio .icon svg polygon,.elf-studio .icon svg polyline,.elf-studio .icon svg rect,.elf-studio .icon svg text,.elf-studio .icon svg tspan,.elf-studio .icon svg use,.elf-studio button svg circle,.elf-studio button svg ellipse,.elf-studio button svg line,.elf-studio button svg path,.elf-studio button svg polygon,.elf-studio button svg polyline,.elf-studio button svg rect,.elf-studio button svg text,.elf-studio button svg tspan,.elf-studio button svg use,.elf-studio label svg circle,.elf-studio label svg ellipse,.elf-studio label svg line,.elf-studio label svg path,.elf-studio label svg polygon,.elf-studio label svg polyline,.elf-studio label svg rect,.elf-studio label svg text,.elf-studio label svg tspan,.elf-studio label svg use{fill:currentColor;stroke-width:0}.elf-studio .primary{background-color:var(--elf--selected-color);color:var(--elf--selected-text-color)}.elf-studio input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:3px 0;width:100%}.elf-studio input[type=range]:focus{outline:none}.elf-studio input[type=range]::-moz-focus-outer{border:0}.elf-studio input[type=range]::-webkit-slider-runnable-track{background:var(--elf--range-track-color);border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--elf--range-thumb-color);border:1px solid var(--elf--range-thumb-border-color);border-radius:100%;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-webkit-slider-runnable-track{background:var(--elf--range-track-color)}.elf-studio input[type=range]::-moz-range-track{background:var(--elf--range-track-color);border-radius:10px;box-shadow:inset 0 1px 3px #0000001f,inset 0 1px 2px #0000001f;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-moz-range-thumb{background:var(--elf--range-thumb-color);border:1px solid #000;border-radius:20px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]::-ms-track{background:var(--elf--range-track-color);border:1px solid #000;border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-ms-fill-lower{box-shadow:0 0 #000,0 0 #0d0d0d}.elf-studio input[type=range]::-ms-fill-lower,.elf-studio input[type=range]::-ms-fill-upper{background:var(--elf--range-thumb-color);border:0 solid #010101;border-radius:0}.elf-studio input[type=range]::-ms-thumb{background:var(--elf--range-thumb-color);border-radius:9px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-ms-fill-lower,.elf-studio input[type=range]:focus::-ms-fill-upper{background:var(--elf--range-thumb-color)}.elf-studio .colorpicker-layer .colorpicker{background-color:transparent;border:0;box-shadow:none;width:100%}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body{width:240px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .color-item{height:20px;margin:2px!important;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .add-color-item{height:20px;margin:0!important;padding:3px;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .wheel{background-color:transparent;border:0}.elf-studio .icons-group{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(6,40px);max-height:200px;overflow:auto}.elf-studio .icons-group .icon-item{display:inline-block;margin-bottom:2px;margin-right:2px;width:40px}.elf-studio .icons-group .icon-item .title{word-wrap:break-word;color:var(--elf--list-item-font-color);display:block;line-height:1;margin-top:5px;text-align:left;word-break:break-all}.elf-studio .icons-group .icon-item .icon-svg{background-color:var(--elf--input-background-color);border-radius:4px;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding:8px;width:40px}.elf-studio .icons-group .icon-item .icon-svg>svg{height:100%;width:100%}.elf-studio .icons-group .icon-item .icon-svg:hover{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf-studio [data-tooltip]{position:relative}.elf-studio [data-tooltip]:hover:after{opacity:1}.elf-studio [data-tooltip][data-tooltip-dy]:after{top:170%}.elf-studio [data-tooltip]:after{background-color:var(--elf--tooltip-background-color);border:1px solid var(--elf--border-color);border-radius:2px;box-sizing:border-box;color:var(--elf--tooltip-font-color);content:attr(data-tooltip);display:inline-block;font-size:11px;font-weight:400;left:50%;line-height:1.6;opacity:0;padding:4px 5px;pointer-events:none;position:absolute;right:auto;text-align:center;top:110%;transform:translate(-50%);transition:all .1s linear;white-space:nowrap;z-index:10000000}.elf-studio [data-tooltip][data-direction=right]:after{left:120%;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=left]:after{position:absolute;right:120%;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=bottom]:after{left:50%;position:absolute;right:auto;top:var(--elf--toggle-checkbox-tooltip-bottom-top,100%);transform:translate(-50%)}.elf-studio [data-tooltip][data-direction=top]:after{left:50%;position:absolute;right:auto;top:var(----elf--toggle-checkbox-tooltip-top,0);transform:translate(-50%) translateY(-150%)}.elf-studio [data-tooltip][data-direction="top left"]:after{left:0;position:absolute;right:auto;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="top right"]:after{left:auto;position:absolute;right:0;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="bottom right"]:after{left:auto;position:absolute;right:0;top:110%;transform:translate(0)}.elf-studio .animation-selector{grid-column-gap:5px;display:grid;grid-template-columns:100px 1fr 30px;width:100%}.elf-studio .animation-selector .timeline-object{display:inline-block}.elf-studio .animation-selector .timeline-object.selected{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-value-area{background-color:var(--elf--background-color);border-left:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;position:absolute;right:0;top:0;width:260px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding:0 20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content.padding-zero{padding-top:0}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input{padding-top:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area{display:inline-block;height:24px;position:relative;vertical-align:middle;width:120px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area>input{box-sizing:border-box;height:100%;padding:2px;width:100%}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area:after{bottom:100%;box-sizing:border-box;color:var(--elf--input-sub-font-color);content:"Hour:Minute:Second:Frame";left:0;padding-left:2px;position:absolute}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title,.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title>.tools{display:none}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2{display:block;text-align:right}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2 label{cursor:pointer}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2:hover{color:var(--elf--selected-color)}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button{text-align:right;width:100px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button svg{vertical-align:middle;width:16px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .title{color:var(--elf--font-color)}.elf-studio .timeline-value-area .timeline-value-editor .value{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;margin:0 auto;padding:5px;width:228px}.elf-studio .timeline-value-area .timeline-value-editor .value label{overflow:hidden;text-overflow:ellipsis}.elf-studio .timeline-value-area .timeline-value-editor .value .editor-area{min-height:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding-top:10px}.elf-studio .timeline-animation-area{background-color:var(--elf--background-color);border-right:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:200px}.elf-studio .timeline-animation-area .property{padding:0}.elf-studio .timeline-animation-area .property-title{height:39px!important;padding-bottom:0;padding-top:0}.elf-studio .timeline-animation-area .property-title label{padding-left:10px}.elf-studio .timeline-animation-area .property-body{padding:0!important}.elf-studio .timeline-area{bottom:0;left:200px;position:absolute;right:260px;top:0}.elf-studio .timeline-area .timeline-header{border-top:1px solid var(--elf--border-color);height:40px;left:0;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar{border-bottom:1px solid var(--elf--border-color);border-right:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar{padding:10px 5px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row{grid-column-gap:5px;display:grid;grid-template-columns:50px 1fr;margin-bottom:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row label{padding:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row .input input{min-width:50px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons{display:flex}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="0.5"] [data-value="0.5"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="1"] [data-value="1"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="2"] [data-value="2"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="3"] [data-value="3"]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons button{border:1px solid var(--elf--border-color);height:auto;min-width:50px;padding:2px 10px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar{bottom:0;left:270px;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration{height:5px;left:0;position:absolute;right:0;top:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-left{background-color:var(--elf--border-color);height:100%;left:15px;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-right{background-color:var(--elf--border-color);height:100%;position:absolute;right:15px;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider{background-color:var(--elf--border-color);height:100%;left:10px;position:absolute;right:10px;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .start{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;transform:translate(-100%);width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .end{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:100%;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .gauge{background-color:var(--elf--timeline-gauge-background-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view canvas{height:25px;left:0;position:absolute;top:15px;width:100%}.elf-studio .timeline-area .timeline-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf-studio .timeline-area .timeline-body .timeline-object-area{border-right:1px solid var(--elf--border-color);bottom:0;left:0;overflow:auto;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer .icon svg{transform:rotate(0)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);color:var(--elf--font-color);display:grid;grid-template-columns:20px 1fr 50px;height:24px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row[data-selected=true]{background-color:var(--elf--timeline-row-selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value{padding:5px 0;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value input{vertical-align:middle;width:100%}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon{padding-top:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon svg{height:16px;transform:rotate(90deg);transition:transform .2s ease;width:16px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .title{color:var(--elf--font-color);cursor:pointer;padding-top:5px;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools{padding-top:3px;text-align:right}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools>*{margin-right:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools .empty{margin-right:0}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property{grid-template-columns:20px 1fr .8fr 50px;overflow:hidden}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .title{padding-left:10px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add{background-color:var(--elf--border-color);box-shadow:0 0 0 1px var(--elf--border-color);cursor:pointer;display:inline-block;height:7px;transform:translate(-4px) translateY(0) rotate(45deg);vertical-align:middle;width:7px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 2px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view{bottom:0;left:270px;pointer-events:none;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view canvas{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area{bottom:0;left:270px;overflow:auto;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container{min-height:100%;outline:none;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container .drag-area{background-color:#3585bdb3;border:1px solid #7db4db;height:0;left:-10000px;pointer-events:none;position:absolute;right:-10000px;width:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe.collapsed .timeline-keyframe-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row{border-bottom:1px solid var(--elf--border-color);height:24px;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe{background-color:rgba(var(--elf--border-color),.5);display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow{display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back{display:inline-block;height:100%;position:absolute}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .offset-line{background-color:var(--elf--selected-color);display:inline-block;height:1px;position:absolute;top:50%;transform:translateY(-52%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .sub-offset{background-color:#0bc4e4;display:inline-block;height:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px}.elf-studio .timeline-play-control{grid-column-gap:5px;display:grid;grid-template-columns:188px 120px 120px 1fr;text-align:left}.elf-studio .timeline-play-control .speed-number{position:relative}.elf-studio .timeline-play-control .speed-number:after{content:"X";display:inline-block;position:absolute;right:14px;top:1px}.elf-studio .timeline-play-control .speed-number input{width:100%}.elf-studio .timeline-play-control label{color:var(--elf--font-color);padding-right:10px;vertical-align:middle}.elf-studio .timeline-play-control label svg{height:16px;vertical-align:middle;width:16px}.elf-studio .timeline-play-control .input{vertical-align:middle}.elf-studio .timeline-play-control .input input{height:20px;vertical-align:middle;width:100%}.elf-studio .timeline-play-control .row{display:flex}.elf-studio .timeline-play-control .row:first-child{text-align:center}.elf-studio .timeline-play-control button{display:inline-block;height:24px;vertical-align:middle;width:24px}.elf-studio .timeline-play-control button.play{color:var(--elf--selected-color)}.elf-studio .timeline-play-control button.pause{color:#6677d8;display:none}.elf-studio .timeline-play-control .play-buttons[data-status=play] .pause{display:inline-block}.elf-studio .timeline-play-control .play-buttons[data-status=play] .play{display:none}.elf-studio .timeline-play-control .play-buttons[data-status=pause] .play{display:inline-block}.elf-studio .timeline-play-control .direction-buttons{display:flex;padding-top:2px}.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate-reverse] [data-value=alternate-reverse],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate] [data-value=alternate],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=normal] [data-value=normal],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=reverse] [data-value=reverse]{background-color:var(--elf--selected-background-color);color:var(--elf--selected-color)}.elf-studio .timeline-play-control .direction-buttons button{border-radius:3px;height:20px;margin-right:5px;width:20px}.elf-studio .keyframe-time-control .time-manager{grid-column-gap:0;display:grid;grid-template-columns:20px 90px 70px 84px 10px}.elf-studio .keyframe-time-control .time-manager button{color:var(--elf--font-color)}.elf-studio .keyframe-time-control .time-manager button svg path{fill:currentColor}.elf-studio .keyframe-time-control .time-manager label{color:var(--elf--font-color);padding-right:0}.elf-studio .keyframe-time-control .time-manager label svg{height:16px;width:16px}.elf-studio .keyframe-time-control input[type=text]{width:80px}.elf-studio .logo-item{align-items:center;display:flex;flex-direction:row;justify-content:center}.elf-studio .logo-item label.logo{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAMS2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdUU8kanltSSWiBCEgJvYlSpEsJoUUQkCrYCEkgocSYEETsyrIKrl1EQF3RVREXXQsga0Vd66JgX8uLsqisrIsFGypvUkDXPe+98+acufe7//z/95c7d+4MAHq1PKk0H9UHoEBSKEuMCmNNSs9gkboACggAAFtgw+PLpeyEhFj4BIbuf2+vbwBEdb/qpuL65/h/bQYCoZwPAJIAcZZAzi+A+CAAeClfKisEgOinimJWoVSFp0BsJIMBQixV4RwNLlXhLA2uUuskJ3Ig3gMAmcbjyXIA0G2BclYRPwfy6N6C2F0iEEsA0CNDHMwX8QQQR0M8qqBghgpDPeCU9QVPzt84s4Y5ebycYazJRd3I4WK5NJ83+/8sx/9uBfmKIR8OsNNEsuhEVc6wbrfyZsSoMA3iXklWXDzEhhC/FQvU+hCjVJEiOkWjj5rz5RxYM8CE2F3AC4+B2BziSEl+XKxWnpUtjuRCDGcIWiwu5CZrbZcK5RFJWs5a2YzE+CGcLeOwtbaNPJnar0r/tCIvha3lvyUScof4X5WIktM0MWPUInFqHMS6EDPleUkxGh3MrkTEiRvSkSkSVfHbQRwglESFafixadmyyEStvqxAPpQvtlQk5sZpcXWhKDlay7OHz1PHbwJxi1DCThniEconxQ7lIhCGR2hyx64IJSnafDGltDAsUWv7QpqfoNXHqcL8KJXcBmJzeVGS1hYPLoQTUsOPx0kLE5I1ceJZubzxCZp48GIQCzggHLCAAvYsMAPkAnF7b3MvfNKMRAIekIEcIARuWsmQRZp6RAKvSaAE/AmREMiH7cLUo0JQBOUfh6WaqxvIVo8WqS3ywCOIC0AMyIfPCrWVZNhbKvgdSsT/8M6HsebDrhr7p4wNJbFaiWKIl6U3pEmMIIYTo4mRRGfcDA/GA/FYeA2F3RP3w/2Hov2sT3hE6CA8JFwnKAm3p4sXy77KhwUmACX0EKnNOevLnHEHyOqNh+FBkB9y40zcDLjhY6EnNh4CfXtDKUcbuSr7r7n/lsMXVdfqUdwpKGUEJZTi9LWlrouu9zCLqqZfVkgTa9ZwXTnDI1/753xRaQG8x3ytiS3FDmBnsZPYeewI1gxY2HGsBbuEHVXh4Vn0u3oWDXlLVMeTB3nE//DH0/pUVVLu3uDe4/5BM1YoLFatj4AzQzpbJs4RFbLYcOUXsrgS/uhRLE93D38AVP8RzTL1kqn+PyDMC59lS6gABEkGBwePfJbFvAfgoDUAVOVnmWMnXA7gWn9uNV8hK9LIcNWFAKhAD35RpsAS/qWcYD6ewAcEglAQAcaDeJAM0sE0WGURnM8yMAvMBYtAGagAq8B6UA22gG1gF/gR7AfN4Ag4CX4BF8EVcB3cgbOnGzwFfeA1GEAQhITQEQZiilgh9ogr4on4IcFIBBKLJCLpSCaSg0gQBTIXWYJUIGuQamQrUo/8hBxGTiLnkQ7kNvIA6UFeIO9RDKWhRqgF6oCOQf1QNhqDJqNT0Rx0JlqClqIr0Cq0Dt2DNqEn0YvodVSJPkX7MYDpYEzMGnPD/DAOFo9lYNmYDJuPlWOVWB3WiLXC93wVU2K92DuciDNwFu4GZ3A0noLz8Zn4fHw5Xo3vwpvw0/hV/AHeh38i0AnmBFdCAIFLmETIIcwilBEqCTsIhwhn4NfUTXhNJBKZREeiL/wa04m5xDnE5cRNxL3EE8QOYhexn0QimZJcSUGkeBKPVEgqI20k7SEdJ3WSuklvyTpkK7InOZKcQZaQF5MrybvJx8id5MfkAYo+xZ4SQImnCCizKSsp2ymtlMuUbsoA1YDqSA2iJlNzqYuoVdRG6hnqXepLHR0dGx1/nYk6Yp2FOlU6+3TO6TzQeUczpLnQOLQpNAVtBW0n7QTtNu0lnU53oIfSM+iF9BX0evop+n36W12G7mhdrq5Ad4FujW6TbqfuMz2Knr0eW2+aXolepd4Bvct6vfoUfQd9jj5Pf75+jf5h/Zv6/QYMAw+DeIMCg+UGuw3OGzwxJBk6GEYYCgxLDbcZnjLsYmAMWwaHwWcsYWxnnGF0GxGNHI24RrlGFUY/GrUb9RkbGo81TjUuNq4xPmqsZGJMByaXmc9cydzPvMF8P8JiBHuEcMSyEY0jOke8MRlpEmoiNCk32Wty3eS9Kcs0wjTPdLVps+k9M9zMxWyi2SyzzWZnzHpHGo0MHMkfWT5y/8jfzFFzF/NE8znm28wvmfdbWFpEWUgtNlqcsui1ZFqGWuZarrM8ZtljxbAKthJbrbM6bvUHy5jFZuWzqlinWX3W5tbR1grrrdbt1gM2jjYpNott9trcs6Xa+tlm266zbbPts7Oym2A3167B7jd7ir2fvch+g/1Z+zcOjg5pDt86NDs8cTRx5DqWODY43nWiO4U4zXSqc7rmTHT2c85z3uR8xQV18XYRudS4XHZFXX1cxa6bXDtGEUb5j5KMqht1043mxnYrcmtwezCaOTp29OLRzaOfjbEbkzFm9ZizYz65e7vnu293v+Nh6DHeY7FHq8cLTxdPvmeN5zUvulek1wKvFq/nY13HCsduHnvLm+E9wftb7zbvjz6+PjKfRp8eXzvfTN9a35t+Rn4Jfsv9zvkT/MP8F/gf8X8X4BNQGLA/4K9At8C8wN2BT8Y5jhOO2z6uK8gmiBe0NUgZzArODP4+WBliHcILqQt5GGobKgjdEfqY7czOZe9hPwtzD5OFHQp7wwngzOOcCMfCo8LLw9sjDCNSIqoj7kfaROZENkT2RXlHzYk6EU2IjoleHX2Ta8Hlc+u5feN9x88bfzqGFpMUUx3zMNYlVhbbOgGdMH7C2gl34+zjJHHN8SCeG782/l6CY8LMhJ8nEicmTKyZ+CjRI3Fu4tkkRtL0pN1Jr5PDklcm30lxSlGktKXqpU5JrU99kxaetiZNOWnMpHmTLqabpYvTWzJIGakZOzL6J0dMXj+5e4r3lLIpN6Y6Ti2een6a2bT8aUen603nTT+QSchMy9yd+YEXz6vj9Wdxs2qz+vgc/gb+U0GoYJ2gRxgkXCN8nB2UvSb7SU5QztqcHlGIqFLUK+aIq8XPc6Nzt+S+yYvP25k3mJ+Wv7eAXJBZcFhiKMmTnJ5hOaN4RofUVVomVc4MmLl+Zp8sRrZDjsinylsKjeCG/ZLCSfGN4kFRcFFN0dtZqbMOFBsUS4ovzXaZvWz245LIkh/m4HP4c9rmWs9dNPfBPPa8rfOR+Vnz2xbYLihd0L0wauGuRdRFeYt+Xey+eM3iV0vSlrSWWpQuLO36JuqbhjLdMlnZzW8Dv92yFF8qXtq+zGvZxmWfygXlFyrcKyorPiznL7/wncd3Vd8Nrshe0b7SZ+XmVcRVklU3Voes3rXGYE3Jmq61E9Y2rWOtK1/3av309ecrx1Zu2UDdoNigrIqtatlot3HVxg/VourrNWE1e2vNa5fVvtkk2NS5OXRz4xaLLRVb3n8v/v7W1qitTXUOdZXbiNuKtj3anrr97A9+P9TvMNtRsePjTslO5a7EXafrfevrd5vvXtmANigaevZM2XPlx/AfWxrdGrfuZe6t2Af2Kfb98VPmTzf2x+xvO+B3oPGg/cHaQ4xD5U1I0+ymvmZRs7IlvaXj8PjDba2BrYd+Hv3zziPWR2qOGh9deYx6rPTY4PGS4/0npCd6T+ac7Gqb3nbn1KRT105PPN1+JubMuV8ifzl1ln32+Lmgc0fOB5w/fMHvQvNFn4tNl7wvHfrV+9dD7T7tTZd9L7dc8b/S2jGu41hnSOfJq+FXf7nGvXbxetz1jhspN27dnHJTeUtw68nt/NvPfyv6beDOwruEu+X39O9V3je/X/cv53/tVfoojz4If3DpYdLDO138rqe/y3//0F36iP6o8rHV4/onnk+O9ET2XPlj8h/dT6VPB3rL/jT4s/aZ07ODf4X+dalvUl/3c9nzwRfLX5q+3Plq7Ku2/oT++68LXg+8KX9r+nbXO793Z9+nvX88MOsD6UPVR+ePrZ9iPt0dLBgclPJkPPVWAIMdzc4G4MVOAOjpADCuwP3DZM05T90QzdlUjcB/wpqzoLr5ANAIb6rtOucEAPtgd1gIuWFXbdWTQwHq5TXctU2e7eWp4aLBEw/h7eDgSwsASK0AfJQNDg5sGhz8uB0GexuAEzM150tVI8KzwffuKtRp1VAMvmr/Bh1jf9vM+xg/AAAACXBIWXMAABYlAAAWJQFJUiTwAAACBmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTY3ODwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4yNDE2PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CuU+ZkwAAAQXSURBVHgB7ZxPS1RhGMXf0cygkhYtXLRpEW6SFrnqW/RZa1ffIAnKhVSS/ccy+2NkRDN3wha98jBCMNPznrnnNyC8z6D3POecH3rB4Q4+3l4fl4uXy2BltfDySmB8uFcWvCzjNiYAADERsxkAzAqPdgEgJmI2A4BZ4dEuAMREzGYAMCs82gWAmIjZDABmhUe7ABATMZsBwKzwaBcAYiJmMwCYFR7tAkBMxGwGALPCo10AiImYzWda+l1cWy+Lq1dariClPXrxrIxe7qTu1BSApfWb5dzGrVTDymJH9+54ATBYXi4L5y8od5K622DpbKresRj3AOmRawkCgFYf6dsAQHrkWoIAoNVH+jYAkB65liAAaPWRvg0ApEeuJQgAWn2kbwMA6ZFrCQKAVh/p2wBAeuRaggCg1Uf6NgCQHrmWYNN/B88yitHBfumOvs/ykunX6g4/p2v2BoCfjzbLcGc7PcBZCnZ7b2d5uX+6Vm8AGL15UYZbm/9kmm+qCXAPULOwPAGAZe3VNADULCxPAGBZezUNADULyxMAWNZeTQNAzcLyBACWtVfTAFCzsDwBgGXt1TQA1CwsTwBgWXs1DQA1C8sTAFjWXk0DQM3C8gQAlrVX0wBQs7A89eYTQWeuXitlPJ6rEkevd0v3Pv9jYCdD6g0Ayzc2ytLa9ZPe5M8/7t8FgFm1tLByqSyszOpqOdcZCDwfiXuAnK5lVQBAtpqcxQAgJ2dZFQCQrSZnMQDIyVlWBQBkq8lZDABycpZVAQDZanIWA4CcnGVVAEC2mpzFACAnZ1kVAJCtJmcxAMjJWValN/8OHr57XUaHX2SDnrRYd/Bh0tup7/UGgD/PCNp+lBretGLdp/1pLzH1z/cGgG5/r4x2n04diNsFuAdwazz4BYAQiNsIAG6NB78AEAJxGwHArfHgFwBCIG4jALg1HvwCQAjEbQQAt8aDXwAIgbiNAODWePALACEQtxEA3BoPfgEgBOI2AoBb48EvAIRA3EYAcGs8+AWAEIjbCABujQe/ABACcRsBwK3x4Lc3nwqex+cEhi7+jt23r2X0ZOvv/D8PvQFgHp8TeFqxw1fPyxEAnBbP5Pfn8TmBk52UcvwbIOvFPUBW0qI6ACBaTNZaAJCVtKgOAIgWk7UWAGQlLaoDAKLFZK0FAFlJi+oAgGgxWWsBQFbSojoAIFpM1loAkJW0qA4AiBaTtRYAZCUtqgMAosVkrdX08wC/th6W7svnLK9zo9Md5D0/sCkAw8cPyvEXr3YJ8CegXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JQCgXfYSygAgUUO7JX4DM7xriSDTbF0AAAAASUVORK5CYII=);background-size:contain;border-radius:2px;display:inline-block;height:30px;width:30px}.elf-studio .feature-control.inspector{color:var(--elf--font-color);height:100%;position:relative}.elf-studio .feature-control.inspector>div{height:100%;position:relative}.elf-studio .feature-control.inspector>div .empty{height:100px}.elf-studio .feature-control.object-list{border-right:1px solid var(--elf--border-color);box-sizing:border-box;height:100%;position:relative}.elf-studio .feature-control.object-list .property{border:0;height:100%;margin:0;padding:0}.elf-studio .feature-control.object-list .property .property-body{padding:0}.elf-studio .feature-control .layer-tab{bottom:0;left:0;position:absolute;right:0;top:0}.elf-studio .feature-control .layer-tab .project-content>div{left:5px;position:absolute;right:5px}.elf-studio .feature-control .layer-tab .project-content>div:first-child{height:150px;top:0}.elf-studio .feature-control .layer-tab .project-content>div:not(:first-child){border-top:1px solid var(--elf--border-color)}.elf-studio .feature-control .layer-tab .project-content>div:last-child{bottom:0;height:auto!important;top:150px}.elf-studio .feature-control .layer-tab .object-items{height:100%;width:100%}.elf-studio .feature-control .layer-tab .object-items>div{height:100%;position:relative}.elf-studio .feature-control .layer-tab .assets{padding:3px}.elf-studio .feature-control .layer-tab .assets .property{height:auto}.elf--page-subeditor{display:inline-block;position:relative}.elf--button{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--button.has-label{grid-column-gap:2px;grid-template-columns:64px 1fr}.elf--button.has-label label{font-size:var(--elf--input-font-size);overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--button .area{display:block;height:100%}.elf--button .area button{background-color:var(--elf--input-inactive-color);border:0;border-radius:4px;color:var(--elf--input-font-color);display:inline-block;height:100%;width:100%}.elf--button .area button:hover{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button{height:24px;width:24px}.elf--toggle-button.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-button.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-button .area{background-color:var(--elf--input-inactive-color);display:block;height:100%;position:relative}.elf--toggle-button .area>div{display:none;height:100%;position:relative;width:100%}.elf--toggle-button .area>div.visible{display:inline-block}.elf--toggle-button .area>div.checked{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button .area button{align-items:center;box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;justify-content:center;width:100%;z-index:1}.elf--toggle-button .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.elf--toggle-button .area button svg{height:20px;width:20px}.elf--toggle-checkbox{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);overflow:hidden}.elf--toggle-checkbox:hover,.elf--toggle-checkbox:hover .area,.elf--toggle-checkbox:hover .area>*{border-color:var(--elf--input-border-color)}.elf--toggle-checkbox.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-checkbox.has-label label{overflow:hidden;padding:7px 0 2px 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-checkbox .area{--selected-button-size:50%;--selected-button-position:0%;--unit-count:2;display:block;display:grid;grid-template-columns:repeat(var(--unit-count),1fr);height:100%;position:relative}.elf--toggle-checkbox .area>div{border-right:1px solid transparent;display:inline-block;position:relative;width:100%}.elf--toggle-checkbox .area>div:last-child{border-right:0}.elf--toggle-checkbox .area:before{background-color:var(--elf--selected-color-2);box-shadow:0 0 #0000001a;content:"";display:block;height:100%;left:var(--selected-button-position);pointer-events:none;position:absolute;top:0;transition:all .2s ease-in-out;width:var(--selected-button-size);z-index:0}.elf--toggle-checkbox .area>*{z-index:1}.elf--toggle-checkbox .area button{box-sizing:border-box;color:var(--elf--font-color);display:inline-block;font-size:var(--elf--input-font-size);height:100%;padding:4px 8px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-checkbox .area button:hover:not(.checked){background-color:var(--elf--input-background-color)}.elf--toggle-checkbox .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.tab{bottom:0;color:var(--elf--font-color);left:0;position:absolute;right:0;top:0}.tab.number-tab.padding-5 .tab-content{padding:5px}.tab.number-tab.padding-10 .tab-content{padding:10px}.tab.number-tab.side-tab.side-tab-left>.tab-header{background-color:var(--elf--toolbar-background-color);bottom:0;box-sizing:border-box;display:flex;flex-direction:column;height:auto;left:0;overflow:visible;padding:0;position:absolute;text-align:center;top:0;width:60px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item{align-items:center;background-color:var(--elf--toolbar-background-color)!important;border-bottom:0!important;border:0;display:flex;flex:none;height:50px;justify-content:center;margin:0 auto;position:relative;width:60px;width:100%}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:before{border-radius:4px;content:"";display:inline-block;height:32px;left:50%;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:32px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:hover label{color:var(--elf--selected-font-color)!important}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected{color:var(--elf--selected-font-color);margin-left:0}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected:before{background-color:var(--elf--selected-color-2)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected label svg{color:var(--elf--selected-font-color)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.extra-item{flex:1 1 auto;overflow:auto}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label{display:inline-block;height:24px;left:50%;padding:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:24px;z-index:1}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg{height:24px;width:24px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg path,.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg use{fill:currentColor}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item .title{color:var(--elf--selected-font-color);overflow:hidden;padding-bottom:5px;text-overflow:ellipsis;white-space:wrap;word-break:break-all}.tab.number-tab.side-tab.side-tab-left>.tab-body{bottom:0;left:60px;right:0;top:0}.tab.number-tab>.tab-content{display:none}.tab.number-tab>.tab-content.selected{display:block}.tab.number-tab>.tab-body{top:34px}.tab>.tab-header{box-sizing:border-box;display:flex;height:40px;left:0;padding:0 10px;position:absolute;right:0;z-index:1}.tab>.tab-header.no-border>.tab-item{border:0!important}.tab>.tab-header>.tab-item{cursor:pointer;gap:10px;height:100%;margin-right:10px;padding:0;position:relative;text-align:center}.tab>.tab-header>.tab-item.selected label,.tab>.tab-header>.tab-item:hover label{color:var(--elf--font-color)}.tab>.tab-header>.tab-item.selected label{font-weight:600}.tab>.tab-header>.tab-item label{box-sizing:border-box;color:var(--elf--tab-font-color);display:inline-block;height:100%;line-height:24px;padding:12px 0;pointer-events:none;vertical-align:middle}.tab>.tab-header>.tab-item:first-child:hover label{left:10px}.tab>.tab-header>.tab-item:last-child:hover label{left:auto;right:10px}.tab>.tab-header>.tab-item:hover label{opacity:1}.tab>.tab-body{bottom:0;left:0;position:absolute;right:0;top:40px}.tab>.tab-body.no-border{border:0}.tab>.tab-body>.tab-content{bottom:0;display:none;left:0;overflow:auto;position:absolute;right:0;top:0}.tab>.tab-body>.tab-content.selected{display:block}.tab>.tab-body>.tab-content.selected.flex{display:flex;flex-direction:column}.tab>.tab-body>.tab-content .fixed{flex:none}.tab>.tab-body>.tab-content .scroll{flex:1 1 auto;overflow:auto;position:relative}.elf--blank-tool-bar{background-color:var(--elf--toolbar-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%;justify-content:space-between}.elf--blank-tool-bar>.logo-area{flex:none;height:100%;width:60px}.elf--blank-tool-bar>.logo-area>*{height:100%}.elf--blank-tool-bar>.toolbar-area{display:flex;flex:1 1 auto;flex-direction:row;justify-content:space-between}.elf--blank-tool-bar>.toolbar-area>*{align-items:center;display:inline-flex;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button,.elf--blank-tool-bar>.toolbar-area>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button .icon svg,.elf--blank-tool-bar>.toolbar-area>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item.selected,.elf--blank-tool-bar>.toolbar-area>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--blank-tool-bar>.toolbar-area>.elf--logo-area:hover,.elf--blank-tool-bar>.toolbar-area>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--toolbar-menu-item{align-items:center;display:flex;height:100%;justify-content:center;padding:0 10px!important;text-align:left;width:auto}.elf--toolbar-menu-item>.icon{display:inline-block;height:24px;width:24px}.elf--toolbar-menu-item>.icon svg{stroke:var(--elf--selected-font-color);height:100%;width:100%}.elf--toolbar-menu-item:hover{background-color:#000}.elf--toolbar-menu-item[data-selected=true]{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toolbar-renderer{display:flex;height:100%}.elf--toolbar-renderer>*{align-items:center;height:100%;justify-content:center;text-align:center;width:auto}.dropdown-menu{--elf--dropdown-menu-width:240px;--elf--dropdown-menu-dy:0px;align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:0 4px;position:relative}.dropdown-menu .dropdown-menu-item-list{border:1px solid var(--elf--border-color)}.dropdown-menu>.label{font-size:13px}.dropdown-menu>.icon{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 4px 0 8px;width:34px}.dropdown-menu>.icon:empty{display:none}.dropdown-menu>.icon svg{height:24px;pointer-events:none;width:24px}.dropdown-menu>.icon svg path{stroke-width:2;stroke:transparent;fill:none}.dropdown-menu .dropdown-arrow{fill:var(--elf--selected-font-color)}.dropdown-menu .dropdown-arrow:hover svg{transform:translateY(2px)}.dropdown-menu .dropdown-arrow svg{transition:all .1s ease-in-out;width:14px}.dropdown-menu[data-selected=true]{background-color:var(--elf--selected-color-2)}.dropdown-menu.opened:not([data-selected=true]),.dropdown-menu:hover:not([data-selected=true]){background-color:#000}.dropdown-menu.opened:not([data-selected=true]) .dropdown-arrow svg,.dropdown-menu:hover:not([data-selected=true]) .dropdown-arrow svg{transform:translateY(2px)}.dropdown-menu.opened>.dropdown-menu-arrow,.dropdown-menu.opened>ul{display:block}.dropdown-menu li{align-items:center;color:var(--elf--font-color);-moz-column-gap:4px;column-gap:4px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;position:relative}.dropdown-menu li .icon{flex:none}.dropdown-menu li .menu-item-text{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;vertical-align:middle}.dropdown-menu li .menu-item-text>*{line-height:1.6;vertical-align:middle}.dropdown-menu li .menu-item-text .shortcut{border:1px solid var(--elf--border-color);border-radius:2px;font-size:13px;padding:0 4px}.dropdown-menu li .menu-item-text .shortcut:empty{display:none}.dropdown-menu li>*{color:var(--elf--font-color);text-decoration:none}.dropdown-menu li[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu li[disabled]>*{color:var(--elf--disabled-font-color);pointer-events:none}.dropdown-menu li svg{color:var(--elf--border-color);height:20px;vertical-align:middle;width:20px}.dropdown-menu li svg path,.dropdown-menu li svg use{fill:currentColor}.dropdown-menu li.dropdown-divider{background-color:var(--elf--layout-border-color);box-sizing:border-box;display:block;height:1px;line-height:0px;margin-bottom:4px;margin-top:4px;padding:0}.dropdown-menu li.dropdown-divider>*{pointer-events:all}.dropdown-menu li.checkbox{align-items:center;display:flex}.dropdown-menu li.checkbox *{vertical-align:middle}.dropdown-menu li.custom{display:block}.dropdown-menu[data-direction=right]>ul{left:auto;right:0}.dropdown-menu[data-direction=right]>.dropdown-menu-arrow{left:auto;right:50%;transform:translate(50%) scale(1.5)}.dropdown-menu[data-direction=right] .dropdown-menu-list>ul{left:calc(-100% - 2px)}.dropdown-menu[data-direction=center]>ul{left:50%;transform:translate(-50%)}.dropdown-menu[data-direction=center]>.dropdown-menu-arrow{left:50%;transform:translate(-50%) scale(1.5)}.dropdown-menu.flat{padding:0}.dropdown-menu.flat>ul{position:relative;width:100%}.dropdown-menu ul{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);display:none;left:0;list-style-type:none;margin:0;padding:4px 0;position:absolute;top:calc(100% + 5px);width:var(--elf--dropdown-menu-width)}.dropdown-menu .dropdown-menu-list>ul{top:-11px}.dropdown-menu .dropdown-menu-arrow{box-sizing:border-box;display:none;height:6px;left:50%;position:absolute;top:calc(100% - 6px);transform:translate(-50%) scale(1.5);width:12px}.dropdown-menu .dropdown-menu-arrow svg{height:6px;width:8px}.dropdown-menu .dropdown-menu-arrow svg path,.dropdown-menu .dropdown-menu-arrow svg use{fill:var(--elf--background-color);stroke:var(--elf--border-color)}.dropdown-menu ul ul{left:100%;position:absolute;top:0}.dropdown-menu li:hover{color:var(--elf--font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider){background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>* svg{color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>.menu-item-text .shortcut{border-color:var(--elf--selected-font-color)}.dropdown-menu li:hover>ul{display:block}.blank-editor{background-color:var(--elf--background-color);height:100%;overflow:hidden;position:absolute;width:100%}.elf--select-editor{grid-column-gap:4px;border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);position:relative}.elf--select-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--select-editor:hover:not(.focused):not(.drag) .selected-value{display:grid;grid-template-columns:1fr 20px}.elf--select-editor.compact select{opacity:1}.elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:var(--elf--input-font-color);height:24px;opacity:0;vertical-align:middle;width:100%}.elf--select-editor .selected-value{background-color:var(--elf--input-background-color);box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;left:0;line-height:2;padding:0 2px;pointer-events:none;position:absolute;right:0;top:0}.elf--select-editor .selected-value svg{fill:currentColor;height:16px;width:16px}.elf--select-editor .selected-value .expand{align-items:center;box-sizing:border-box;display:flex;justify-content:flex-start;vertical-align:middle}.elf--select-editor .selected-value .value{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap}.elf--select-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--select-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--select-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 4px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-editor.has-label label svg{height:20px;width:20px}.elf--select-editor.has-label .editor-view{position:relative}.elf--select-editor.has-label .selected-value{height:100%;position:absolute;text-align:left}.elf--select-editor.has-label .selected-value select{height:24px;width:100%}.elf--box-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--box-shadow-editor .label{height:20px;margin-top:2px}.elf--box-shadow-editor .label.hide{display:none}.elf--box-shadow-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--box-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--box-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--box-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr 30px;text-align:center}.elf--box-shadow-editor .shadow-item .shadow-content{display:grid;grid-template-columns:60px 1fr 1fr;grid-template-rows:auto}.elf--box-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--box-shadow-editor .shadow-item.desc{color:var(--elf--font-color)}.elf--box-shadow-editor .shadow-item.desc .color{visibility:hidden}.elf--box-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--box-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--color-assets-editor{margin-top:10px;padding:4px 0}.elf--color-assets-editor .color-assets-head{grid-column-gap:5px;display:grid;grid-template-columns:1fr}.elf--color-assets-editor .color-assets-head label{display:inline-block;line-height:1.5;padding:4px 0;vertical-align:middle}.elf--color-assets-editor .color-list{grid-column-gap:10px;grid-row-gap:10px;display:grid;grid-template-columns:repeat(8,1fr);margin-top:10px}.elf--color-assets-editor .color-list .color-item{border-radius:4px;box-shadow:0 0 0 1px #ffffff1a;cursor:pointer;display:inline-block;height:16px;overflow:hidden;width:16px}.elf--color-assets-editor .color-list .color-item:hover{transform:scale(1.2)}.elf--color-assets-editor .color-list .color-item .preview,.elf--color-assets-editor .color-list .color-item .preview .color-view{height:100%;width:100%}.elf--color-single-editor{height:30px;text-align:center;width:100%}.elf--color-single-editor .preview{height:100%}.elf--color-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:1px solid var(--elf--input-border-color);height:100%}.elf--color-single-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.elf--color-view-editor{border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);text-align:center}.elf--color-view-editor input{outline:none}.elf--color-view-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--color-view-editor.focused .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor.has-label{grid-template-columns:70px 1fr}.elf--color-view-editor.has-label.compact{grid-template-columns:40px 1fr}.elf--color-view-editor.has-label.compact .color-code{grid-template-columns:26px 1fr 40px}.elf--color-view-editor.has-label label{line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--color-view-editor.mini .color-input{display:none}.elf--color-view-editor.mini .color-code{grid-template-columns:26px 50px}.elf--color-view-editor .color-code{grid-column-gap:2px;border:1px solid transparent;border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr 50px;overflow:hidden;text-transform:uppercase;vertical-align:middle}.elf--color-view-editor .color-code .preview{align-items:center;background-color:transparent;border-radius:2px;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--color-view-editor .color-code .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--input-border-color);box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;height:20px;overflow:hidden;position:relative;vertical-align:middle;width:20px}.elf--color-view-editor .color-code .preview .mini-view .color-view{box-shadow:0 0 0 .1px var(--elf--input-border-color)}.elf--color-view-editor .color-code input{background-color:transparent;border:0;border-radius:3px;font-size:11px;height:100%;padding:0 3px;text-transform:uppercase;width:100%}.component-editor{--column-gap:2px;--row-gap:2px;padding-bottom:5px}.component-editor .component-folder.close>label>svg{transform:rotate(0)}.component-editor .component-folder.close>ul{display:none}.component-editor .component-folder>label{cursor:pointer}.component-editor .component-folder>label>svg{fill:var(--elf--font-color);height:16px;transform:rotate(90deg);transition:all .1s ease-in-out;vertical-align:middle;width:16px}.component-editor .component-folder>ul{list-style:none;margin:0;padding:0}.component-editor .column{grid-column-gap:var(--column-gap);grid-row-gap:2px;display:grid;grid-template-columns:1fr}.component-editor .column .column-item{align-items:stretch;display:flex;justify-content:stretch}.component-editor .column .column-item>*{width:100%}.component-editor .column .column-item>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .column-1-1{grid-template-columns:1fr 1fr}.component-editor .column-1-1-1{grid-template-columns:1fr 1fr 1fr}.component-editor .column-1-2{grid-template-columns:1fr 2fr}.component-editor .column-1-2-3{grid-template-columns:1fr 3fr}.component-editor .column-1-1-1-1{grid-template-columns:1fr 1fr 1fr 1fr}.component-editor .column-2{grid-template-columns:1fr 1fr}.component-editor .column-2-1{grid-template-columns:2fr 1fr}.component-editor .column-2-1-1{grid-template-columns:2fr 1fr 1fr}.component-editor .column-3-1{grid-template-columns:3fr 1fr}.component-editor .column-3-1-1{grid-template-columns:3fr 1fr 1fr}.component-editor .column-3-2-1{grid-template-columns:3fr 2fr 1fr}.component-editor>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .component-item{margin-bottom:5px}.elf--css-property-editor{display:grid;grid-template-columns:1fr!important;margin-bottom:5px;margin-top:10px}.elf--css-property-editor.hide-refresh .css-property-item .title-2,.elf--css-property-editor.hide-title .css-property-item>.title label,.elf--css-property-editor.hide-title>.title{display:none}.elf--css-property-editor .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--css-property-editor .title .tools{text-align:right}.elf--css-property-editor .title .tools select{display:inline-block;width:130px!important}.elf--css-property-editor>.title-2{display:none;text-align:right}.elf--css-property-editor .css-property-item{border:1px solid var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;margin-top:5px;padding:2px}.elf--css-property-editor .css-property-item>.title{background-color:transparent;border-radius:3px;color:var(--elf--selected-color);font-weight:900;grid-template-columns:1fr 30px;margin-bottom:2px;padding:3px 0}.elf--css-property-editor .css-property-item .value-editor{padding:2px}.elf--css-property-editor .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--css-property-editor .input.grid-1{grid-template-columns:1fr}.elf--css-property-editor .input.grid-2{grid-template-columns:3fr 1fr}.elf--cubic-bezier-editor{height:200px;margin:0 auto;position:relative;width:220px}.elf--cubic-bezier-editor .bezier{background-color:var(--elf--background-color);box-shadow:0 0 0 1px var(--elf--border-color);height:150px;left:60px;position:absolute;top:30px;width:150px}.elf--cubic-bezier-editor .bezier .bezier-canvas{pointer-events:none}.elf--cubic-bezier-editor .bezier .control{bottom:0;left:0;position:absolute;right:0;top:0}.elf--cubic-bezier-editor .bezier .control .pointer1,.elf--cubic-bezier-editor .bezier .control .pointer2{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);border-radius:100%;cursor:pointer;height:9px;position:absolute;transform:translate(-50%) translateY(-50%);width:9px}.elf--cubic-bezier-editor .animation{height:20px;left:0;position:absolute;right:0;text-align:center;top:0}.elf--cubic-bezier-editor .animation .animation-canvas{cursor:pointer;height:100%;position:relative;width:100%}.elf--cubic-bezier-editor .item-list{bottom:20px;left:0;padding-right:0;position:absolute;top:30px;width:50px}.elf--cubic-bezier-editor .item-list[data-selected-value=ease-in] .item[data-bezier=ease-in],.elf--cubic-bezier-editor .item-list[data-selected-value=ease-out] .item[data-bezier=ease-out],.elf--cubic-bezier-editor .item-list[data-selected-value=ease] .item[data-bezier=ease]{background-color:var(--elf--selected-color)}.elf--cubic-bezier-editor .item-list .item{border-radius:2px;cursor:pointer;height:40px;margin-bottom:5px;overflow:hidden;position:relative;width:40px}.elf--cubic-bezier-editor .item-list .item:not(:first-child){border-top:0}.elf--cubic-bezier-editor .item-list .item.selected{background-color:#0ab}.elf--cubic-bezier-editor .item-list .item .item-canvas{background-color:#000;border-radius:2px;height:38px;left:1px;position:absolute;top:1px;width:38px}.elf--cubic-bezier-editor .predefined{bottom:0;display:grid;grid-template-columns:30px 1fr 30px;height:20px;left:0;position:absolute;right:0;text-align:center}.elf--cubic-bezier-editor .predefined .left,.elf--cubic-bezier-editor .predefined .right{color:var(--elf--font-color);cursor:pointer;font-weight:700;vertical-align:middle}.elf--cubic-bezier-editor .predefined .left svg path,.elf--cubic-bezier-editor .predefined .right svg path{fill:currentColor}.elf--cubic-bezier-editor .predefined .predefined-text{color:var(--elf--font-color);padding:4px;vertical-align:middle}.elf--direction-editor .direction-item{display:grid;grid-template-columns:62px 1fr}.elf--direction-editor .direction-item.full{grid-template-columns:1fr}.elf--direction-editor .radius-selector{display:grid;grid-template-columns:1fr 1fr}.elf--direction-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--direction-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--direction-editor .radius-selector button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;color:#ccc;cursor:pointer;display:inline-block;flex:none;height:20px;margin-right:2px;outline:none;padding:0;vertical-align:middle;width:20px}.elf--direction-editor .radius-selector button svg{height:100%;width:100%}.elf--filter-editor .label{height:20px;margin-top:2px}.elf--filter-editor .label.hide{display:none}.elf--filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--filter-editor .tools select{display:inline-block;width:100px!important}.elf--filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;padding:0 10px;width:100%}.elf--filter-editor .filter-list .filter-item{display:block;margin-top:5px}.elf--filter-editor .filter-list .filter-item:last-child{margin-bottom:5px}.elf--filter-editor .filter-list .filter-item>.title{display:grid;grid-template-columns:20px 1fr 30px}.elf--filter-editor .filter-list .filter-item>.title>.sub-title{align-items:center;display:flex;justify-content:flex-start}.elf--filter-editor .filter-list .filter-item>.title>label{align-items:center;cursor:move;display:flex;justify-content:center;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--filter-editor .filter-list .filter-item>.title .svg-filter-edit{cursor:pointer}.elf--filter-editor .filter-list .filter-item>.title .filter-menu{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:4px 0;text-align:right}.elf--filter-editor .filter-list .filter-item>.title .filter-menu:hover{background-color:var(--elf--input-inactive-color)}.elf--filter-editor .filter-list .filter-item .filter-ui-list{padding-left:20px;pointer-events:all}.elf--filter-editor .filter-list .filter-item .filter-ui{vertical-align:middle}.elf--filter-editor .filter-list .filter-item .filter-ui label{color:var(--elf--font-color)}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--gradient-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--gradient-editor .tools{padding:4px 0}.elf--gradient-editor [data-editor],.elf--gradient-editor[data-selected-editor=static-gradient]{display:none}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--gradient-editor[data-selected-editor=image-resource] .drag-pointer,.elf--gradient-editor[data-selected-editor=image-resource] .preset-position,.elf--gradient-editor[data-selected-editor=image-resource] .sub-editor,.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--gradient-editor .sub-editor{padding:0}.elf--gradient-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--gradient-editor .hue,.elf--gradient-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--gradient-editor .hue{pointer-events:none}.elf--gradient-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--gradient-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--gradient-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--gradient-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--gradient-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--gradient-editor .hue .step-list .step.selected .color-view span{display:block}.elf--gradient-editor .hue .step-list .step[data-cut=true] .arrow{top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--gradient-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--gradient-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--gradient-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step .arrow,.elf--gradient-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--gradient-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--list-view-editor{display:grid;grid-template-columns:repeat(1,1fr);margin-top:10px;max-height:500px;position:relative}.elf--list-view-editor[data-column="0"]{grid-template-columns:repeat(0,1fr)}.elf--list-view-editor[data-column="1"]{grid-template-columns:repeat(1,1fr)}.elf--list-view-editor[data-column="2"]{grid-template-columns:repeat(2,1fr)}.elf--list-view-editor[data-column="3"]{grid-template-columns:repeat(3,1fr)}.elf--list-view-editor[data-column="4"]{grid-template-columns:repeat(4,1fr)}.elf--list-view-editor[data-column="5"]{grid-template-columns:repeat(5,1fr)}.elf--list-view-editor[data-column="6"]{grid-template-columns:repeat(6,1fr)}.elf--list-view-editor[data-column="7"]{grid-template-columns:repeat(7,1fr)}.elf--list-view-editor[data-column="8"]{grid-template-columns:repeat(8,1fr)}.elf--list-view-editor[data-column="9"]{grid-template-columns:repeat(9,1fr)}.elf--list-view-editor .list-view-item.selected{background-color:var(--elf--selected-color)}.elf--list-view-editor .list-view-item.selected svg circle,.elf--list-view-editor .list-view-item.selected svg path,.elf--list-view-editor .list-view-item.selected svg rect{fill:var(--elf--selected-font-color)}.elf--list-view-editor .list-view-item svg{width:100%}.elf--list-view-editor .list-view-item svg circle,.elf--list-view-editor .list-view-item svg path,.elf--list-view-editor .list-view-item svg rect{fill:var(--elf--font-color)}.elf--input-range-editor{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--input-range-editor.disabled label{color:var(--elf--selected-color)}.elf--input-range-editor.disabled>*{pointer-events:none}.elf--input-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--input-range-editor.focused{box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--input-range-editor.drag,.elf--input-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--input-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--input-range-editor.has-label{grid-template-columns:70px 1fr}.elf--input-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--input-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--input-range-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr 40px}.elf--input-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--input-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 4px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--input-range-editor.has-label label svg{height:24px;vertical-align:middle;width:24px}.elf--input-range-editor.has-label.block{display:block}.elf--input-range-editor.has-label.block label{color:#000000b3;display:block}.elf--input-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--input-range-editor.is-removable .remove{display:inline-block}.elf--input-range-editor .remove,.elf--input-range-editor .type-button{display:none}.elf--input-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--input-range-editor .range--editor-type .area{border-radius:3px;display:grid;grid-template-columns:1fr 40px;height:100%}.elf--input-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--input-range-editor .range--editor-type .area input,.elf--input-range-editor .range--editor-type .area select{font-size:11px;width:100%}.elf--input-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;padding-left:2px;vertical-align:middle;width:100%}.elf--input-range-editor .range--editor-type .area .elf--select-editor{border-left:1px solid var(--elf--input-range-border-color);height:calc(var(--elf--input-height) - 2px)}.elf--input-range-editor .range--editor-type .area .elf--select-editor:hover{border:0!important;box-shadow:none!important}.elf--input-range-editor .range--editor-type .area .elf--select-editor select{background-color:transparent;border:0;color:var(--elf--input-sub-font-color);height:24px}.elf--input-range-editor .range--editor-type .area .unit{display:inline-block;line-height:2;vertical-align:middle}.elf--range--editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--range--editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--range--editor.has-label.compact{grid-template-columns:30px 1fr}.elf--range--editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--range--editor.has-label.block{height:auto}.elf--range--editor.has-label.block>label{display:block}.elf--range--editor.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--range--editor.has-label.block{display:block}.elf--range--editor.has-label.block label{color:var(--elf--font-color);display:block}.elf--range--editor.is-removable{grid-template-columns:1fr 12px}.elf--range--editor.is-removable .remove{display:inline-block;margin-top:3px}.elf--range--editor .remove{display:none}.elf--range--editor .range--editor-type{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;height:100%;vertical-align:middle}.elf--range--editor .range--editor-type .area{border:1px solid transparent;border-radius:3px;display:grid;grid-template-columns:1fr 24px}.elf--range--editor .range--editor-type .area.focused{border:1px solid var(--elf--selected-color);border-radius:3px}.elf--range--editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--range--editor .range--editor-type .area input,.elf--range--editor .range--editor-type .area select{background-color:transparent;border:0;width:100%}.elf--range--editor .range--editor-type .area input[type=range]{width:95%}.elf--range--editor .range--editor-type .area input[type=number]{background-color:var(--elf--input-background-color);border:1px solid var(--elf--input-border-color);border-bottom-left-radius:3px;border-right:0;border-top-left-radius:3px;height:100%;padding:2px;text-align:left}.elf--range--editor .range--editor-type .area .elf--select-editor{background-color:var(--elf--input-background-color);border:0!important;border-radius:0 3px 3px 0;box-sizing:border-box;position:relative;text-align:right}.elf--range--editor .range--editor-type .area .elf--select-editor .selected-value{display:none}.elf--range--editor .range--editor-type .area .elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--elf--input-border-color);border-radius:0 3px 3px 0;border-left:0;color:var(--elf--input-sub-font-color);display:inline-block;height:24px;padding:0;position:absolute;right:0;text-align:center;width:24px}.elf--media-progress-editor>*{margin-bottom:2px}.elf--media-progress-editor .drag-area{background-image:linear-gradient(90deg,#2b2b2b 1px,transparent 1px 100%);background-position:0 1px;background-repeat:repeat-x;background-size:10px 8px;height:10px;margin:10px;padding:0 10px;position:relative}.elf--media-progress-editor .progress-bar{background-color:#2b2b2b;display:block;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--media-progress-editor .bar{height:2px;left:10%;transform:translateY(-50%);width:50%}.elf--media-progress-editor .bar,.elf--media-progress-editor .drag-item{background-color:var(--elf--selected-color);display:inline-block;position:absolute;top:50%}.elf--media-progress-editor .drag-item{border-radius:100%;cursor:pointer;height:8px;transform:translate(-50%,-50%);width:8px}.elf--media-progress-editor .drag-item.end{background-color:#ff0;box-shadow:0 0 3px #0000004d}.elf--number-input-editor{border:1px solid transparent;border-radius:1px;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);padding:4px}.elf--number-input-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--number-input-editor.drag{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--number-input-editor:hover:not(.focused):not(.drag){box-shadow:0 0 0 1px var(--elf--input-border-color)}.elf--number-input-editor.has-label{grid-template-columns:60px 1fr}.elf--number-input-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-input-editor.has-label.mini{grid-template-columns:10px 1fr}.elf--number-input-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-input-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr}.elf--number-input-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-input-editor.has-label label svg{height:20px;width:20px}.elf--number-input-editor.has-label.block,.elf--number-input-editor.has-label.block label{display:block}.elf--number-input-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-input-editor .range--editor-type .area{grid-column-gap:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-input-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-input-editor .range--editor-type .area input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;background-color:transparent;border:0;padding-left:2px;width:100%}.elf--number-input-editor .range--editor-type .area input::-webkit-inner-spin-button,.elf--number-input-editor .range--editor-type .area input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.elf--number-range-editor{grid-column-gap:4px;border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--number-range-editor.disabled label{color:var(--elf--selected-color)}.elf--number-range-editor.disabled>*{pointer-events:none}.elf--number-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--number-range-editor.drag,.elf--number-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--number-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--number-range-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--number-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--number-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-range-editor.has-label label svg{height:20px;vertical-align:middle;width:20px}.elf--number-range-editor.has-label.block{display:block;height:auto}.elf--number-range-editor.has-label.block label{display:block}.elf--number-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--number-range-editor.is-removable .remove{display:inline-block}.elf--number-range-editor .remove{display:none}.elf--number-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-range-editor .range--editor-type .area{grid-column-gap:4px;border-radius:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-range-editor .range--editor-type .area input{height:100%;width:100%}.elf--number-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;vertical-align:middle}.elf--path-editor{--line-color:var(--elf--border-color);background-color:transparent;background-image:linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent);background-position:0 0,0 0,100% 0,0 100%;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:10% 100%,100% 10%,1px 100%,100% 1px;cursor:crosshair;margin:10px;min-height:100px;min-width:100px;position:relative}.elf--path-editor .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor .path-container:not(.modify) path.object,.elf--path-editor .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor .path-container.split-panel{pointer-events:none}.elf--path-editor .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor .path-container.path{cursor:crosshair}.elf--path-editor .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor .path-container.alt svg circle,.elf--path-editor .path-container.segment-move{cursor:move}.elf--path-editor .path-container.transform svg .snap-path,.elf--path-editor .path-container.transform svg circle,.elf--path-editor .path-container.transform svg line,.elf--path-editor .path-container.transform svg rect,.elf--path-editor .path-container.transform svg text{display:none}.elf--path-editor .path-container.modify,.elf--path-editor .path-container.segment-move{cursor:default}.elf--path-editor .path-container.modify svg path.object,.elf--path-editor .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor .path-container.is-control svg path.path-area{display:none}.elf--path-editor .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor svg{height:100%;overflow:visible;width:100%}.elf--path-editor svg line{stroke-width:1;content-visibility:auto}.elf--path-editor svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);r:5;stroke-width:2}.elf--path-editor svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor svg path{fill:transparent;content-visibility:auto}.elf--path-editor svg path.path-area{stroke-width:0}.elf--path-editor svg path.path-area.selected,.elf--path-editor svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color)}.elf--path-editor svg path.guide,.elf--path-editor svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg path.segment{pointer-events:all}.elf--path-editor svg path.object{fill:transparent;stroke-width:1}.elf--path-editor svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-data-editor .segment-empty{grid-column-gap:2px;display:grid;grid-template-columns:30px 1fr}.elf--path-data-editor .segment-empty .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:center}.elf--path-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:50px 1fr;margin-bottom:4px}.elf--path-data-editor .segment.m{padding-top:10px}.elf--path-data-editor .segment .command{color:var(--elf--selected-color);cursor:pointer}.elf--path-data-editor .segment .command[data-toggle=false]{font-weight:700;opacity:.3}.elf--path-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--path-data-editor .segment .values span{text-align:center}.elf--path-data-editor .segment .values input{width:100%}.elf--polygon-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:1fr;margin-bottom:4px}.elf--polygon-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:right}.elf--polygon-data-editor .segment .values label{color:var(--elf--selected-color)}.elf--polygon-data-editor .segment .values input{color:var(--elf--font-color);width:80px}.elf--select-icon-editor{border:1px solid transparent;display:grid;height:24px}.elf--select-icon-editor:hover,.elf--select-icon-editor:hover .items>div{border-color:var(--elf--input-border-color)}.elf--select-icon-editor.has-label{grid-template-columns:70px 1fr}.elf--select-icon-editor.has-label label{overflow:hidden;padding:6px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-icon-editor .items{background-color:transparent;border-radius:3px;box-sizing:border-box;cursor:pointer;display:flex;height:100%;line-height:1;outline:none}.elf--select-icon-editor .items>.select-icon-item{align-items:center;border-right:1px solid transparent;box-sizing:border-box;color:var(--elf--font-color);display:flex;flex:none;height:24px;justify-content:center;line-height:1.4;position:relative;text-transform:uppercase;white-space:pre-wrap;width:24px;word-break:break-all}.elf--select-icon-editor .items>.select-icon-item:last-child{border-right:0}.elf--select-icon-editor .items>.select-icon-item:hover{background-color:var(--elf--input-inactive-color)}.elf--select-icon-editor .items>.select-icon-item svg{height:24px;width:24px}.elf--select-icon-editor .items>.select-icon-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--select-icon-editor .items>.select-icon-item.icon{padding:3px 2px}.elf--select-icon-editor .items>.select-icon-item[data-value=""]{max-width:20px}.elf--select-icon-editor .items>.select-icon-item[data-value=none]{text-transform:none;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=uppercase]{text-transform:uppercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=lowercase]{text-transform:lowercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=capitalize]{text-transform:capitalize;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=full-width]{text-transform:full-width;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=underline]{text-decoration:underline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=overline]{text-decoration:overline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=line-through]{text-decoration:line-through;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=normal]{font-style:normal;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=italic]{font-style:italic;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=oblique]{font-style:oblique;vertical-align:middle}.elf--select-icon-editor .tools{padding:4px 0;text-align:right;vertical-align:middle}.elf--stroke-dasharray-editor{padding:4px 0;position:relative}.elf--stroke-dasharray-editor .dasharray-item{border-bottom:1px solid var(--elf--border-color);-moz-column-gap:2px;column-gap:2px;display:flex;margin-right:4px;position:relative}.elf--stroke-dasharray-editor .dasharray-item>*{align-items:center;display:flex;height:100%;justify-content:flex-start}.elf--stroke-dasharray-editor .dasharray-item>* input{width:20px!important}.elf--stroke-dasharray-editor .dasharray-item>button svg{height:10px;width:10px}.elf--stroke-dasharray-editor .dash-list{display:flex;flex-direction:row;flex-wrap:wrap}.elf--stroke-dasharray-editor .dash-sample-list{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);display:none;height:100px;overflow:auto;position:absolute;top:30px;width:100px;z-index:10}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample{cursor:pointer;height:20px}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample:hover{background-color:var(--elf--input-inactive-color)}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample svg line{stroke:var(--elf--font-color)}.elf--stroke-dasharray-editor>.tools.has-label{display:grid;grid-template-columns:70px 1fr}.elf--stroke-dasharray-editor>.tools.has-label .buttons{align-items:center;display:flex;justify-content:flex-start;padding-left:4px;text-align:left}.elf--stroke-dasharray-editor>.tools label{align-items:center;cursor:pointer;display:flex;justify-content:flex-start;text-align:left;vertical-align:middle}.elf--stroke-dasharray-editor>.tools label:hover{font-weight:700}.elf--text-area-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-area-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-area-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-area-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--text-shadow-editor .label{height:20px}.elf--text-shadow-editor .label.hide{display:none}.elf--text-shadow-editor .label label{padding:2px 6px 2px 0;vertical-align:middle}.elf--text-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--text-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--text-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:18px 1.5fr 1fr 1fr 1fr 30px;text-align:center}.elf--text-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--text-shadow-editor .shadow-item.desc{color:var(--elf--input-font-color)}.elf--text-shadow-editor .shadow-item.desc>*{text-align:left}.elf--text-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--text-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--var-editor{grid-template-columns:1fr!important}.elf--var-editor .label{height:20px;margin-top:2px}.elf--var-editor .label.hide{display:none}.elf--var-editor .label label{padding-left:5px;vertical-align:middle}.elf--var-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--var-editor .var-item{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr 30px;height:24px;margin-bottom:5px;margin-top:5px;text-align:center}.elf--var-editor .var-item>div input{height:100%;width:100%}.elf--var-editor .var-item>div input::-moz-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input:-ms-input-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input::placeholder{color:#9e9e9e}.elf--var-editor .var-item .tools{text-align:right}.elf--context-menu-manger{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--context-menu-manger>*{pointer-events:auto}.elf--default-layout,.elf--default-layout-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--default-layout{display:flex;flex-direction:column}.elf--default-layout .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.elf--default-layout .layout-bottom{box-sizing:border-box;display:flex;flex:none;height:20px;position:relative;z-index:10000}.elf--default-layout .layout-middle{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.elf--default-layout .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:all .05s linear;width:4px;z-index:1}.elf--default-layout .layout-middle>.splitter.selected,.elf--default-layout .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.elf--default-layout .layout-middle>.toggleLeft{left:340px}.elf--default-layout .layout-middle>.toggleRight{right:280px}.elf--default-layout .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:flex;flex:none;flex-direction:column;position:relative;transition:width .05s linear;width:340px}.elf--default-layout .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:flex;flex:none;flex-direction:column;overflow:auto;position:relative;transition:width .05s linear;width:280px;z-index:100}.elf--default-layout .layout-middle .layout-right.closed{width:10px!important}.elf--default-layout .layout-middle .layout-body{flex:1 1 auto;position:relative}.elf--popup-manager{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:99999}.elf--popup-manager>*{pointer-events:all}.elf--notification-view{display:inline-block;position:absolute;right:10px;top:10px;z-index:10000}.elf--notification-view .item{border-radius:4px;color:#fff;margin-bottom:10px;min-width:300px;opacity:1;padding:10px 20px;position:relative;transition:opacity 10s linear}.elf--notification-view .item .description{padding-top:10px}.elf--notification-view .item .icon{display:inline-block;position:absolute;right:10px;top:10px}.elf--notification-view .item .icon svg path{fill:currentColor}.elf--notification-view .item.alert{background-color:#e45050de}.elf--notification-view .item.alert .title{color:#fff;font-weight:700}.elf--notification-view .item.alert .description{color:#fff}.elf--window-background{background-color:var(--elf--window-background-color);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:10000}.elf--window-background .window{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);box-shadow:0 0 1px 0 var(--elf--border-color);color:var(--elf--font-color);height:200px;left:50%;padding:14px;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px;z-index:1000}.elf--window-background .window .window-title{border-bottom:1px solid var(--elf--border-color);display:flex;font-size:15px;font-weight:700;height:40px;left:0;margin-bottom:10px;padding:10px;pointer-events:all;position:absolute;right:0;top:0}.elf--window-background .window .window-title>*{flex:1 1 auto}.elf--window-background .window .window-title .tools{text-align:right}.elf--window-background .window .window-title label{cursor:move}.elf--window-background .window .window-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf--export-window{height:80%!important;width:80%!important}.elf--export-window pre{border:1px solid var(--elf--border-color);height:100%;margin:0 10px;overflow:auto;padding:10px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf--project-window{background-color:var(--elf--background-color);height:100%!important;width:100%!important}.elf--project-window .project-container{grid-column-gap:2px;display:grid;grid-template-columns:300px 1fr;height:100%;position:relative;width:100%}.elf--project-window .project-container .project-menu{box-sizing:border-box;height:100%;overflow:auto;padding:20px;position:relative}.elf--project-window .project-container .project-list{background-color:var(--elf--window-background-color);box-sizing:border-box;height:100%;overflow:auto}.elf--shortcut-window{height:80%!important;width:600px!important}.elf--shortcut-window .window-body{overflow:auto}.elf--shortcut-window .list{padding:10px 20px}.elf--shortcut-window .list .item h2{padding-left:10px}.elf--shortcut-window .list .item .shortcut-view-item{display:grid;grid-template-columns:1fr 200px;margin-bottom:2px}.elf--shortcut-window .list .item .shortcut-view-item>*{border-bottom:1px solid var(--elf--border-color);border-right:0;padding:5px 10px;position:relative}.elf--shortcut-window .list .item .shortcut-view-item .title{padding:10px}.elf--shortcut-window .list .item .shortcut-view-item .title .description{color:var(--elf--font-color);opacity:.5}.elf--shortcut-window .list .item .shortcut-view-item .os-item{text-align:right}.elf--shortcut-window .list .item .shortcut-view-item .os-item span{border:1px solid var(--elf--font-color);box-sizing:border-box;display:inline-block;margin:0 2px;padding:4px 6px}.design-editor{background-color:var(--elf--background-color);height:100%;overflow:hidden;position:absolute;width:100%}.elf--context-menu-renderer>*{display:block!important;width:100%}.elf--context-menu-renderer .dropdown-menu{height:100%}.elf--context-menu-renderer .elf--toolbar-menu-item:hover{background-color:var(--elf--selected-color);color:#fff!important}.elf--context-menu-view{border-radius:4px;display:none;left:0;min-width:240px;position:absolute;top:0;z-index:1000}.elf--alignment-item{grid-column-gap:2px;display:grid;grid-template-columns:repeat(8,1fr);height:24px;margin-bottom:10px;padding-top:8px}.elf--alignment-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;height:10px;width:20px}.elf--alignment-item button[data-no-title=true] .title{display:none}.elf--alignment-item .title{color:#999}.elf--alignment-item .icon{color:var(--elf--selected-color)!important;height:16px;margin:0 auto;width:16px}.elf--alignment-item .icon svg{height:100%;width:100%}.elf--property{--property-order:1000;border-bottom:1px solid var(--elf--property-border-color);box-shadow:0 0 2px #fff0;display:none;margin-bottom:4px;order:var(--property-order)}.elf--property:first-child{border-top:0}.elf--property.full{display:flex;flex-direction:column;height:100%}.elf--property.full.show{height:100%}.elf--property.full .property-title{flex:none}.elf--property.full .property-body{flex:1 1 auto;overflow:auto;padding-left:0;padding-right:0;position:relative}.elf--property.show{display:block}.elf--property.show>.property-title>label .icon{display:inline-block;transform:rotate(90deg)}.elf--property.show>.property-body{display:block}.elf--property>.property-title{align-items:center;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:flex;height:32px;justify-content:space-between;margin:8px;padding:8px;position:relative}.elf--property>.property-title.filter{grid-template-columns:1fr 110px}.elf--property>.property-title svg{height:16px;width:16px}.elf--property>.property-title label{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:1px;line-height:2;overflow:hidden;padding-left:2px;text-overflow:ellipsis;text-transform:uppercase;vertical-align:middle;white-space:nowrap}.elf--property>.property-title label .icon{display:inline-block;transition:all .1s linear}.elf--property>.property-title label.has-keyframe{padding-left:0}.elf--property>.property-title>.tools{flex:none;text-align:right;vertical-align:middle;white-space:nowrap}.elf--property>.property-title>.tools>*{flex:none}.elf--property>.property-body{box-sizing:border-box;display:none;margin:0 8px;padding:0 8px 8px;position:relative}.elf--property>.property-body:empty{display:none}.elf--property>.property-body .property-item:first-child{padding-top:0}.elf--property>.property-body .property-item:not(.has-label){background-color:#fff0}.elf--property>.property-body .property-item.animation-property-item{display:grid;grid-template-columns:1fr}.elf--property>.property-body .property-item.animation-property-item.has-label{grid-template-columns:80px 1fr}.elf--property>.property-body .property-item.animation-property-item.has-label .group{padding-left:12px;padding-top:5px;vertical-align:middle}.elf--property>.property-body .property-item.animation-property-item.full{display:block}.elf--property>.property-body .property-item.animation-property-item.full .group{padding-left:14px;vertical-align:middle}.elf--property>.property-body .property-item>label.label{background-color:var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;color:var(--elf--selected-font-color);display:block;padding:5px}.elf--property>.property-footer{padding:0 6px}.elf--property>.property-footer>div{margin-bottom:5px}.elf--property>.property-footer label{cursor:pointer;display:inline-block;padding-left:2px;padding-right:5px;vertical-align:middle;width:60px}.elf--animation-list{grid-template-columns:1fr!important}.elf--animation-list .animation-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0;text-align:center}.elf--animation-list .animation-item.selected{background-color:var(--elf--border-color)}.elf--animation-list .animation-item .name{padding:2px 0;text-align:left;vertical-align:middle}.elf--animation-list .animation-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;margin-top:3px;vertical-align:middle;width:100%}.elf--animation-list .animation-item .timing canvas{border-radius:3px}.elf--animation-list .animation-item .labels label{background-color:var(--elf--border-color);border-radius:2px;color:var(--elf--border-color);font-weight:700;padding:1px 2px;text-transform:uppercase}.elf--animation-list .animation-item .labels label small{color:var(--elf--font-color);text-transform:lowercase}.elf--animation-list .animation-item .labels label.play-state{background-color:transparent;cursor:pointer}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value]{color:var(--elf--font-color);display:none;vertical-align:middle}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value] svg{height:16px;width:16px}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value=pause]{color:red}.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=paused] [data-play-state-value=paused],.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=running] [data-play-state-value=running]{display:inline-block}.elf--animation-list .animation-item .tools{text-align:right;vertical-align:middle}.elf--animation-property-popup{width:220px}.elf--animation-property-popup .box>div{margin-bottom:5px}.elf--animation-property-popup .box label{text-align:left;vertical-align:middle}.elf--animation-property-popup .box .name{display:grid;grid-template-columns:60px 1fr}.elf--animation-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--animation-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--animation-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--popup{background-color:var(--elf--popup-background-color);border-radius:2px;box-shadow:0 1px 5px #00000080;color:var(--elf--font-color);display:none;position:absolute;z-index:1000}.elf--popup.compact .popup-body{padding:0 0 5px}.elf--popup .popup-title{display:flex;font-size:12px;font-weight:700;height:32px;margin-left:8px;margin-right:8px;margin-top:8px;padding:8px;pointer-events:all}.elf--popup .popup-title>*{flex:1 1 auto}.elf--popup .popup-title .tools{align-items:center;display:flex;justify-content:flex-end;padding-right:10px}.elf--popup .popup-title .tools button{background-color:transparent;border:0;cursor:pointer;padding:0}.elf--popup .popup-title .tools button svg{fill:var(--elf--font-color);height:16px;width:16px}.elf--popup .popup-title label{cursor:move}.elf--popup .popup-body{padding:8px 12px}.elf--popup .popup-body .popup-item{margin-bottom:5px;padding:2px 0}.elf--popup .popup-resizer{background-color:gray;bottom:0;cursor:se-resize;height:10px;position:absolute;right:0;width:10px}.elf--artboard-size-list .property-body{padding:0!important}.elf--artboard-size-list .artboard-size-item{border-top:1px solid var(--elf--border-color)}.elf--artboard-size-list .category{border-bottom:1px solid var(--elf--border-color);height:26px;line-height:2}.elf--artboard-size-list .category .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none}.elf--artboard-size-list .group-item{background-color:#ececec;border-bottom:1px solid var(--elf--border-color);height:24px;line-height:1.8}.elf--artboard-size-list .group-item .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none;text-transform:uppercase}.elf--artboard-size-list .device-item{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);cursor:pointer;display:grid;font-size:12px;grid-template-columns:1fr 1fr;height:26px;line-height:2.3}.elf--artboard-size-list .device-item .title{color:var(--elf--font-color);padding-left:20px;pointer-events:none}.elf--artboard-size-list .device-item .size{color:#bdbdbd;letter-spacing:2px;padding-right:10px;pointer-events:none;text-align:right}.elf--background-image-editor .label{height:20px;margin-top:2px}.elf--background-image-editor .label.hide{display:none}.elf--background-image-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--background-image-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--background-image-editor .fill-list{display:grid;font-size:12px;grid-template-columns:1fr}.elf--background-image-editor .fill-list .fill-item{-moz-column-gap:2px;column-gap:2px;display:grid;grid-template-columns:18px 26px 26px 1fr;margin-bottom:4px}.elf--background-image-editor .fill-list .fill-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item>div{align-items:center;display:flex;height:26px;justify-content:center}.elf--background-image-editor .fill-list .fill-item .gradient-info{color:var(--elf--font-color);display:grid;grid-template-columns:1fr 30px 30px 30px;width:100%}.elf--background-image-editor .fill-list .fill-item .gradient-info svg path{fill:currentColor}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools{align-items:center;display:flex;justify-content:center;text-align:right}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorcode,.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .opacity{display:none}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorsteps{display:block}.elf--background-image-editor .fill-list .fill-item .pattern{background-color:var(--elf--border-color)}.elf--background-image-editor .fill-list .fill-item .preview{align-items:center;box-shadow:0 0 0 1px #0000001a;cursor:pointer;display:flex;height:auto;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;display:block;height:26px;pointer-events:none;position:relative;width:26px}.elf--background-image-editor .fill-list .fill-item .preview .mini-view .color-view{border-radius:0;bottom:0;left:0;position:absolute;right:0;top:0}.elf--background-image-editor .fill-list .fill-item .fill-title{align-items:center;display:flex;justify-content:flex-start;padding-left:2px;pointer-events:none;position:relative;text-align:left}.elf--background-image-editor .fill-list .fill-item .fill-title svg{height:16px;vertical-align:middle;width:16px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]{color:var(--elf--font-color);padding-left:10px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]:after{border-right:4px double var(--elf--font-color);bottom:0;content:"";height:50%;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:4px}.elf--background-image-editor .fill-list .fill-item .colorcode input{width:100%}.elf--background-image-position-picker{width:180!important}.elf--background-image-position-picker .background-property>div{margin-bottom:10px}.elf--background-image-position-picker .popup-item{margin-bottom:5px}.elf--background-image-position-picker .grid{display:grid;grid-template-columns:60px 1fr}.elf--background-image-position-picker .grid-2{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr}.elf--background-image-position-picker .grid-2 label{padding-right:2px;text-align:left}.elf--background-image-position-picker .repeat-list{display:flex;gap:5px}.elf--background-image-position-picker .repeat-list button{background-color:#434b50;flex:1 1 auto;height:24px;width:24px}.elf--background-image-position-picker .repeat-list button[value=no-repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:50%;background-repeat:no-repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-x]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 8px;background-repeat:repeat-x;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-y]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:8px 10px;background-repeat:repeat-y;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=space]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:space;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=round]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:0 0;background-repeat:round;background-size:8px 8px}.elf--background-image-position-picker .repeat-list[data-value=no-repeat] button[value=no-repeat],.elf--background-image-position-picker .repeat-list[data-value=repeat-x] button[value=repeat-x],.elf--background-image-position-picker .repeat-list[data-value=repeat-y] button[value=repeat-y],.elf--background-image-position-picker .repeat-list[data-value=repeat] button[value=repeat],.elf--background-image-position-picker .repeat-list[data-value=round] button[value=round],.elf--background-image-position-picker .repeat-list[data-value=space] button[value=space]{background-color:var(--elf--selected-color);box-shadow:0 0 2px 2px var(--elf--selected-color)}.fill{align-items:center;display:flex;height:24px!important;justify-content:center;width:24px!important}.fill:hover{background-color:var(--elf--input-inactive-color)}.elf--background-position-editor{height:19px;text-align:center;width:26px}.elf--background-position-editor .preview{height:26px}.elf--background-position-editor .preview .mini-view{height:100%}.elf--background-position-editor .preview .mini-view .color-view{border-radius:3px;cursor:pointer;height:100%}.elf--border-editor .header{grid-column-gap:4px;display:grid;grid-template-columns:repeat(3,1fr) 24px;text-align:center;text-transform:uppercase}.elf--border-editor>.editor-area>div{margin-top:5px}.elf--border-editor>.editor-area>div:first-child{margin-top:0}.elf--border-editor>.editor-area>div>label{font-weight:700;padding:2px 0;text-shadow:0 0 2px var(--elf--border-color);text-transform:uppercase}.elf--border-editor .input-group{display:grid;grid-template-rows:repeat(3,1fr)}.elf--border-editor .input-field{grid-column-gap:4px;display:grid;grid-template-columns:1fr 3fr;vertical-align:middle}.elf--border-editor .input-field input{vertical-align:middle;width:100%}.elf--border-editor .input-field .input-ui{vertical-align:middle}.elf--border-value-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--border-value-editor label{padding:6px 4px 2px 0;text-align:left;vertical-align:middle}.elf--border-value-editor .editor-area{-moz-column-gap:10px;column-gap:10px;display:flex;flex-direction:row}.elf--border-radius-editor .border-radius-item{align-items:center;display:flex}.elf--border-radius-editor .border-radius-item>*{flex:1 1 auto}.elf--border-radius-editor .border-radius-item>.button{flex:none;height:24px;width:24px}.elf--border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--border-radius-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color-2);color:var(--elf--font-color)}.elf--border-radius-editor .radius-selector button{border-radius:3px;height:20px;margin:2px;width:20px}.elf--border-radius-editor .radius-setting-box{display:grid;grid-template-columns:1fr 30px;margin-bottom:5px}.elf--border-radius-editor .radius-setting-box>div{display:grid;grid-template-columns:1fr 1fr}.elf--box-model-item{grid-template-columns:1fr!important}.elf--box-model-item>div{height:150px;position:relative;width:100%}.elf--box-model-item>div .margin{border:1px dashed #aaa;bottom:5px;left:5px;padding:10px;position:absolute;right:5px;top:5px}.elf--box-model-item>div .margin:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .margin input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .margin [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .margin [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding{border:1px dashed #aaa;bottom:30px;left:55px;padding:20px 45px;position:absolute;right:55px;top:30px}.elf--box-model-item>div .padding:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .padding input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .padding [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .content{border:1px dashed #aaa;bottom:54px;left:105px;padding:10px 0;position:absolute;right:105px;top:54px}.elf--box-model-item>div .content:before{display:block;padding:5px 0;text-align:center}.box-shadow-samples{border:0;font-size:11px}.elf--clip-path-list{grid-template-columns:1fr!important}.elf--clip-path-list .clippath-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:20px 1fr 30px;height:30px;margin-bottom:5px}.elf--clip-path-list .clippath-item>label{align-items:center;cursor:move;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title{align-items:center;-moz-column-gap:10px;column-gap:10px;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title .name{padding:2px 0}.elf--clip-path-list .clippath-item .tools{align-items:center;display:flex;justify-content:center;text-align:right;vertical-align:middle}.elf--clip-path-list .clippath-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--clip-path-list .clippath-item .offset-list{height:30px;padding:0 10px}.elf--clip-path-list .clippath-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--clip-path-list .clippath-item .offset-list .container .offset{background-color:#000;border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--clip-path-list .clippath-item .offset-list .container .offset:hover:before{background-color:#4e3b3b;border-radius:3px;bottom:100%;color:#fff;content:attr(data-title);display:inline-block;left:50%;padding:1px 3px;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.elf--clippath-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back svg polygon{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .polygon .polygon-pointer{fill:#fff;r:5;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute}.elf--clippath-editor-view .polygon .polygon-line{cursor:copy;pointer-events:all}.elf--clippath-editor-view .polygon .polygon-line:hover{stroke-width:2;stroke:red}.elf--clippath-editor-view .polygon .polygon-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:20px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:20px}.elf--clippath-editor-view .inset .inset-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .inset .inset-back svg path{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .inset .inset-direction{background-color:#fff;height:14px;width:14px}.elf--clippath-editor-view .inset .inset-center,.elf--clippath-editor-view .inset .inset-direction{border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .inset .inset-center{border:2px solid #fff;height:20px;width:20px}.elf--clippath-editor-view .circle .circle-back{left:0;pointer-events:none;top:0}.elf--clippath-editor-view .circle .circle-back,.elf--clippath-editor-view .circle .circle-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .circle .circle-center{height:20px;pointer-events:all;width:20px}.elf--clippath-editor-view .circle .circle-radius{background-color:#fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:14px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:14px}.elf--clippath-editor-view .ellipse .ellipse-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--clippath-editor-view .ellipse .ellipse-back svg ellipse{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all}.elf--clippath-editor-view .ellipse .ellipse-center{border:2px solid #fff;border-radius:50%;height:20px;width:20px}.elf--clippath-editor-view .ellipse .ellipse-center,.elf--clippath-editor-view .ellipse .ellipse-radius{cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .ellipse .ellipse-radius{background-color:#fff;border-radius:50%;height:14px;width:14px}.elf--code-view-item{grid-template-columns:1fr!important;width:100%}.elf--code-view-item>div{max-width:100%;width:100%}.elf--code-view-item>div label{padding-left:10px}.elf--code-view-item>div pre{line-height:1.7;margin-top:0;padding:40px 0 20px 20px;position:relative;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-all}.elf--code-view-item>div pre:not(:last-child){border-bottom:1px solid var(--elf--border-color)}.elf--code-view-item>div pre:before{border:1px solid var(--elf--border-color);color:var(--elf--font-color);content:attr(title);display:inline-block;font-weight:700;left:0;margin-bottom:10px;padding:2px 4px;position:absolute;right:0;top:0}.elf--code-view-item>div pre .block{padding-left:20px;text-indent:-20px}.elf--code-view-item>div pre strong{color:var(--elf--font-color);font-weight:400;text-indent:-20px}.elf--code-view-item>div pre .value{color:#f16b16;text-indent:-20px}.elf--code-view-item>div pre .keyword{color:#20a471}.elf--code-view-item>div pre .char{color:#444}.elf--code-view-item>div pre .function{color:#725ee1}.elf--texture .pattern-list{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;padding:10px;row-gap:10px}.elf--texture .pattern-list .pattern-item{cursor:pointer;text-align:center}.elf--texture .pattern-list .pattern-item.selected .preview{background-color:var(--elf--selected-background-color)}.elf--texture .pattern-list .pattern-item:hover .preview{background-color:var(--elf--selected-color)}.elf--texture .pattern-list .pattern-item .preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;pointer-events:none;width:80px}.elf--texture .pattern-list .pattern-item .preview svg{height:100%;width:100%}.elf--export-property .export-item{grid-column-gap:2px;display:grid;grid-template-columns:60px 1fr;padding:10px 6px}.elf--export-property .export-item label{vertical-align:middle}.elf--export-property .export-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;text-align:left;vertical-align:middle;width:100%}.elf--export-property .export-item button svg{vertical-align:middle;width:16px}.elf--fill-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--fill-editor-view.dragging .area-line{pointer-events:none!important}.elf--fill-editor-view .gradient-editor-area{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--fill-editor-view .gradient-editor-area path{fill:transparent;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.start-end-line{stroke:#fff;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area rect{pointer-events:all}.elf--fill-editor-view .gradient-editor-area rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area circle{stroke-width:2;pointer-events:all}.elf--fill-editor-view .gradient-editor-area circle:hover{cursor:-webkit-grab;cursor:grab}.elf--fill-editor-view .gradient-editor-area circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--fill-editor-view .gradient-editor-area circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--fill-editor-view .gradient-editor-area circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--fill-editor-view .gradient-editor-area circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;filter:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area circle.point{fill:#fff;r:5}.elf--fill-editor-view .gradient-editor-area circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--fill-editor-view .gradient-editor-area circle.hover-colorstep{r:8;stroke:#fff;stroke-width:1;pointer-events:none}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--fill-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--fill-editor .tools{padding:4px 0}.elf--fill-editor [data-editor]{display:none}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--fill-editor[data-selected-editor=static-gradient]{display:none}.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageWidth],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageX],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageY],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternUnits],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternWidth]{display:block}.elf--fill-editor[data-selected-editor=image-resource] .preset-position,.elf--fill-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--fill-editor .sub-editor{padding:0}.elf--fill-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--fill-editor .hue,.elf--fill-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--fill-editor .hue{pointer-events:none}.elf--fill-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--fill-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--fill-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--fill-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--fill-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--fill-editor .hue .step-list .step.selected .color-view span{display:block}.elf--fill-editor .hue .step-list .step[data-cut=true] .arrow{top:100%}.elf--fill-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--fill-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--fill-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--fill-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--fill-editor .hue .step-list .step .arrow,.elf--fill-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--fill-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--gradient-picker-popup{grid-column-gap:10px;display:grid;grid-template-columns:1fr;margin-bottom:5px;width:224px}.elf--gradient-picker-popup>.box:first-child{margin-bottom:4px}.elf--gradient-picker-popup>.box>.colorpicker{display:block}.elf--gradient-picker-popup>.box>.assetpicker{display:none;min-height:310px}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.colorpicker{display:none}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.assetpicker{display:block}.elf--gradient-picker-popup .popup-item{margin-bottom:5px}.elf--gradient-picker-popup .grid-2{display:grid;grid-template-columns:60px 1fr}.elf--gradient-picker-popup .grid-2 label{padding-right:2px;text-align:left}.elf--gradient-picker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--gradient-picker-popup .colorpicker .color-panel{height:100px;margin-top:0}.elf--gradient-picker-popup .colorpicker input{border:0!important;border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--gradient-picker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--gradient-picker-popup .colorpicker .colorsets{border-top:0 solid var(--elf--border-color)!important}.elf--gradient-picker-popup .color-assets-editor{padding:4px 0!important}.elf--gradient-picker-popup .assetpicker{background-color:#e6e6e61a;position:relative}.elf--gradient-picker-popup .assetpicker .image-asset-picker{display:block;height:200px;overflow:auto;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list{grid-column-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item{background-color:rgba(var(--elf--font-color),.5);margin-bottom:2px}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview{border:1px solid var(--elf--border-color);border-radius:2px;cursor:pointer;height:80px;-o-object-fit:contain;object-fit:contain;position:relative;text-align:center;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview img{border:0;max-height:100%;max-width:100%;vertical-align:middle}.elf--fill-single-editor{border:1px solid transparent;box-sizing:border-box;cursor:pointer;height:var(--elf--input-height)}.elf--fill-single-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--fill-single-editor.focused .opacity-input{border-left:1px solid var(--elf--border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--fill-single-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--fill-single-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--fill-single-editor .area{grid-column-gap:2px;border-radius:4px;display:grid;grid-template-columns:24px 1fr;height:100%}.elf--fill-single-editor .preview{align-items:center;background-color:transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--fill-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--border-color);border-radius:2px;display:inline-block;height:20px;overflow:hidden;position:relative;width:20px}.elf--fill-single-editor .preview .mini-view .color-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf--fill-single-editor .colors{align-items:center;display:flex;justify-content:flex-start;line-height:2.2;margin-left:2px}.elf--fill-single-editor .colors.simple{display:none}.elf--fill-single-editor .colors .color{border:1px solid var(--elf--font-color);border-radius:100%;display:inline-block;height:14px;pointer-events:all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;vertical-align:middle;width:14px}.elf--fill-single-editor .colors .color:not(:first-child){margin-left:-2px}.elf--gradient-single-editor{height:26px!important;text-align:center;width:100%}.elf--gradient-single-editor .preview{height:26px!important;width:26px!important}.elf--gradient-single-editor .preview .mini-view{height:100%!important;width:100%!important}.elf--gradient-single-editor .preview .mini-view .color-view{background-size:cover;border-radius:3px;cursor:pointer;height:100%}.elf--gradient-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--gradient-editor-view.dragging .area-line{pointer-events:none!important}.elf--gradient-editor-view .gradient-rect{bottom:0;left:0;right:0;top:0}.elf--gradient-editor-view .center{background-color:var(--elf--selected-color-2);border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 2px rgb(43,43,43));height:10px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.elf--gradient-editor-view .gradient-rect{box-sizing:border-box;cursor:move;filter:drop-shadow(0 0 2px rgb(43,43,43));pointer-events:none;position:absolute}.elf--gradient-editor-view .gradient-rect svg{height:100%;width:100%}.elf--gradient-editor-view .gradient-rect svg path{fill:transparent;stroke:#fff;stroke-width:1;pointer-events:all}.elf--gradient-editor-view .resizer{background-color:#fff;border:1px solid var(--elf--selected-color);border-radius:100%;box-sizing:border-box;filter:drop-shadow(0 0 2px rgb(43,43,43));height:14px;position:absolute;transform:translate(-50%,-50%);width:14px}.elf--gradient-editor-view .resizer[data-direction=bottom-right]{cursor:nwse-resize;left:100%;top:100%}.elf--gradient-editor-view .gradient-angle{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-angle path{fill:transparent;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle path.stick{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.color-stick{pointer-events:none}.elf--gradient-editor-view .gradient-angle path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-angle path.start-end-line{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--gradient-editor-view .gradient-angle path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle rect{pointer-events:all}.elf--gradient-editor-view .gradient-angle rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle circle{stroke-width:2;pointer-events:all}.elf--gradient-editor-view .gradient-angle circle:hover{cursor:-webkit-grab;cursor:grab}.elf--gradient-editor-view .gradient-angle circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--gradient-editor-view .gradient-angle circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--gradient-editor-view .gradient-angle circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--gradient-editor-view .gradient-angle circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;pointer-events:none}.elf--gradient-editor-view .gradient-angle circle.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle circle.point{fill:#fff;r:5}.elf--gradient-editor-view .gradient-angle circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-angle circle.hover-colorstep{r:8;filter:drop-shadow(0 0 1px rgb(255,255,255));pointer-events:none}.elf--gradient-editor-view .gradient-radial-line{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-radial-line path{fill:transparent;stroke:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-radial-line path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-radial-line path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line circle.step-point,.elf--gradient-editor-view .gradient-radial-line ellipse.step-point{fill:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point,.elf--gradient-editor-view .gradient-radial-line ellipse.point{fill:#fff;r:5;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point[data-type=start],.elf--gradient-editor-view .gradient-radial-line ellipse.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-radial-line circle.size,.elf--gradient-editor-view .gradient-radial-line ellipse.size{fill:transparent;stroke:#fff}.elf--gradient-editor-view .gradient-radial-line rect{pointer-events:all}.elf--gradient-editor-view .gradient-radial-line rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--guide-line-view{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translate(.5px,.5px);width:100%}.elf--guide-line-view path{stroke:var(--elf--selected-color)}.elf--guide-line-view path.arrow{stroke-width:1;fill:none}.elf--guide-line-view path.layer-line{stroke:var(--elf--font-color)}.elf--guide-line-view path.snap-line{stroke:var(--elf--selected-color)}.elf--guide-line-view line{stroke-width:1}.elf--guide-line-view line.base-line{stroke:var(--elf--guide-line-color)}.elf--guide-line-view line.dash-line{stroke:var(--elf--guide-line-color);stroke-dasharray:2 2}.elf--guide-line-view line.base-rect{stroke:var(--elf--guide-line-rect-color)}.elf--guide-line-view text{fill:var(--elf--guide-font-color);font-weight:400}.elf--guide-line-view text.text-center{text-anchor:middle}.elf--history-list-view .history-item{grid-column-gap:5px;display:grid;grid-template-columns:20px 1fr}.elf--history-list-view .history-item>span{color:var(--elf--font-color);vertical-align:middle}.elf--history-list-view .history-item>span svg{height:16px;width:16px}.elf--history-list-view .history-item>span svg path{fill:currentColor}.elf--hover-rect,.elf--hover-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--hover-rect{box-sizing:border-box}.elf--hover-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:2;left:0;position:absolute;top:0}.elf--hover-rect svg{bottom:0;left:0;position:absolute;right:0;top:0}.elf--hover-rect svg .offset-line{stroke:var(--elf--selected-color-2);stroke-dasharray:2 4;fill:transparent;stroke-width:1}.elf--hover-rect svg text{fill:var(--elf--selected-font-color)}.elf--hover-rect svg rect{fill:var(--elf--selection-tool-border-color)}.elf--image-select-editor{background-color:#0000004d;margin-bottom:10px;margin-top:10px;text-align:center}.elf--image-select-editor .preview-container{height:150px;position:relative;width:100%}.elf--image-select-editor .preview-container img{max-height:100%;max-width:100%}.elf--image-select-editor .preview-container input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;top:0;width:100%}.elf--image-select-editor .select-container{display:grid;grid-template-columns:1fr;padding:4px 0}.elf--image-select-editor .select-container button{width:100%}.elf--image-select-popup{display:grid;grid-template-columns:1fr;min-height:450px;padding:10px;width:500px}.elf--image-select-popup>.box{grid-column-gap:4px;grid-row-gap:4px;display:grid;grid-auto-rows:110px;grid-template-columns:repeat(4,1fr);margin-bottom:10px}.elf--image-select-popup>.box .image-item{border:1px solid hsla(0,0%,100%,.5);box-sizing:border-box;display:grid;position:relative;text-align:center}.elf--image-select-popup>.box .image-item:hover{background-color:#baffb1}.elf--image-select-popup>.box .image-item img{align-self:center;cursor:pointer;justify-self:center;max-height:100%;max-width:100%;pointer-events:all;vertical-align:middle}.elf--keyframe-popup{width:250px}.elf--keyframe-popup .box .name{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;height:20px;margin-bottom:5px}.elf--keyframe-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--keyframe-popup .box .property .title .tools{text-align:right}.elf--keyframe-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--keyframe-popup .box .offset-editor .offset{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:20px;position:relative}.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="0"] [data-offset-index="0"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="1"] [data-offset-index="1"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="10"] [data-offset-index="10"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="11"] [data-offset-index="11"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="12"] [data-offset-index="12"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="13"] [data-offset-index="13"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="14"] [data-offset-index="14"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="15"] [data-offset-index="15"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="16"] [data-offset-index="16"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="17"] [data-offset-index="17"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="18"] [data-offset-index="18"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="19"] [data-offset-index="19"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="2"] [data-offset-index="2"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="3"] [data-offset-index="3"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="4"] [data-offset-index="4"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="5"] [data-offset-index="5"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="6"] [data-offset-index="6"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="7"] [data-offset-index="7"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="8"] [data-offset-index="8"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="9"] [data-offset-index="9"]{background-color:var(--elf--selected-color)}.elf--keyframe-popup .box .offset-editor .offset .offset-item{background-color:var(--elf--font-color);border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--keyframe-popup .box .offset-input{padding:5px 0}.elf--keyframe-popup .box .offset-input .title{grid-column-gap:2px;display:grid;grid-template-columns:100px 1fr}.elf--keyframe-popup .box .keyframe-property-list{max-height:300px;overflow:auto}.elf--keyframe-popup .box .keyframe-property-item{margin-top:2px;padding:4px 0}.elf--keyframe-popup .box .keyframe-property-item .title{grid-template-columns:1fr 30px}.elf--keyframe-popup .box .keyframe-property-item .value-editor{border:1px solid rgba(0,0,0,.3);padding:2px}.elf--keyframe-popup .box label{text-align:left;vertical-align:middle}.elf--keyframe-popup .box input,.elf--keyframe-popup .box select{vertical-align:middle;width:100%}.elf--keyframe-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--keyframe-popup .box .input.grid-1{grid-template-columns:1fr}.elf--keyframe-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--keyframe-list{display:block}.elf--keyframe-list .keyframe-item{border:1px solid var(--elf--border-color);cursor:pointer;margin-bottom:5px;padding:5px}.elf--keyframe-list .keyframe-item:first-child{margin-top:5px}.elf--keyframe-list .keyframe-item.selected{background-color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] button[data-type=list]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] .keyframe-code[data-type=list]{display:block}.elf--keyframe-list .keyframe-item[data-selected-value=code] button[data-type=code]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=code] .keyframe-code[data-type=code]{display:block}.elf--keyframe-list .keyframe-item .title{display:grid;grid-template-columns:1fr 60px;height:20px}.elf--keyframe-list .keyframe-item .title .name{padding:2px 0}.elf--keyframe-list .keyframe-item .title .tools{text-align:right;vertical-align:middle}.elf--keyframe-list .keyframe-item .title .tools .group{display:inline-block}.elf--keyframe-list .keyframe-item pre{margin:0;white-space:pre-wrap}.elf--keyframe-list .keyframe-item .keyframe-code{display:none}.elf--keyframe-list .keyframe-item .keyframe-code>.offset{display:grid;grid-template-columns:30px 1fr;margin-top:2px}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item{display:grid;grid-template-columns:1fr 1fr;text-align:left}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item label{color:var(--elf--font-color);font-weight:700;padding-left:10px}.elf--keyframe-list .keyframe-item .offset-list{height:20px;padding:0 10px}.elf--keyframe-list .keyframe-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--keyframe-list .keyframe-item .offset-list .container .offset{background-color:#fff;border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--layer-append-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;pointer-events:all;position:absolute;right:0;top:0}.elf--layer-append-view .area{display:inline-block;pointer-events:none;position:absolute}.elf--layer-append-view .area .draw-item{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--layer-append-view .area-pointer-view,.elf--layer-append-view .area-rect{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;padding:2px 4px;position:absolute;transform:translate(5px,5px)}.elf--layer-append-view .area-pointer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--layer-append-view .area-pointer .layer-add-snap-pointer{stroke:var(--elf--selected-color);stroke-width:1}.elf--layer-append-view input[type=file]{display:none}.elf--layer-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--layer-list .layer-item{content-visibility:auto;color:var(--elf--list-item-font-color);contain:size;height:30px;margin-bottom:0!important;padding:5px!important}.elf--layer-list .layer-item[data-is-hide=true]{display:none}.elf--layer-list .layer-item[data-is-group=true] .detail .folder{display:inline-block;transform:rotate(90deg);transition:transform .1s linear;vertical-align:middle}.elf--layer-list .layer-item[data-is-group=true] .detail .folder.collapsed{transform:rotate(0)}.elf--layer-list .layer-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--layer-list .layer-item .detail label{cursor:pointer;display:grid;grid-template-columns:20px 20px 1fr;overflow:hidden;padding:2px 0;pointer-events:all;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--layer-list .layer-item .detail label svg path,.elf--layer-list .layer-item .detail label svg use{fill:currentColor}.elf--layer-list .layer-item .detail .tools{display:none;text-align:right}.elf--layer-list .layer-item .detail .tools .visible{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .visible[data-visible=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item .detail .tools .lock{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .lock[data-lock=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--layer-list .layer-item.selected-path{background-color:var(--elf--selected-color-3)}.elf--layer-list .layer-item:hover,.elf--layer-list .layer-item:not(.selected).hovered{box-shadow:inset 0 0 0 1px var(--elf--list-item-selected-color)}.elf--layer-list .layer-item:hover .tools,.elf--layer-list .layer-item:not(.selected).hovered .tools{display:block}.elf--layer-list .drag-start{opacity:.3}.elf--layer-list+.drag-point{border:1px solid var(--elf--selected-color);pointer-events:none;position:absolute}.elf--gradient-assets-property .gradient-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--gradient-assets-property .gradient-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--gradient-assets-property .gradient-list-tools[data-view-mode=grid] button[data-value=grid],.elf--gradient-assets-property .gradient-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--gradient-assets-property .gradient-list .gradient-view{pointer-events:none}.elf--gradient-assets-property .gradient-list[data-view-mode=grid]{display:block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .add-gradient-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item{display:inline-block;margin-bottom:1px;margin-right:1px;position:relative;vertical-align:middle;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item:hover[data-custom=true] .tools{display:inline-block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;cursor:pointer;height:40px;position:relative;width:100%}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview .gradient-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools{display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools button{color:var(--elf--selected-font-color);height:10px;width:10px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools svg{height:100%;width:100%}.elf--image-assets-property .image-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--image-assets-property .image-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--image-assets-property .image-list-tools[data-view-mode=grid] button[data-value=grid],.elf--image-assets-property .image-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--image-assets-property .image-list{padding:5px}.elf--image-assets-property .image-list .image-view{pointer-events:none}.elf--image-assets-property .image-list[data-view-mode=grid]{display:block}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item:hover .tools{display:inline-block}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title input{width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.image-assets-property{padding-left:0!important;padding-right:0!important}.elf--pattern-assets-property .pattern-list{max-height:240px;overflow:auto;padding:5px}.elf--pattern-assets-property .pattern-list .pattern-view{pointer-events:none}.elf--pattern-assets-property .pattern-list[data-view-mode=grid]{display:block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .add-pattern-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:54px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item{border:1px solid var(--elf--border-color);box-sizing:border-box;display:inline-block;margin-bottom:3px;margin-right:3px;position:relative}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item:hover[data-custom=true] .tools{display:inline-block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview{cursor:pointer;height:54px;position:relative;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview .pattern-view{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:0}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .tools{color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.pattern-assets-property{padding-left:0!important;padding-right:0!important}.elf--video-assets-property .video-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--video-assets-property .video-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--video-assets-property .video-list-tools[data-view-mode=grid] button[data-value=grid],.elf--video-assets-property .video-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--video-assets-property .video-list{padding:5px}.elf--video-assets-property .video-list .video-view{pointer-events:none}.elf--video-assets-property .video-list[data-view-mode=grid]{display:block}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item:hover .tools{display:inline-block}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;line-height:80px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .title input{width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.video-assets-property{padding-left:0!important;padding-right:0!important}.elf--custom-assets{bottom:0;left:0;position:absolute;right:0;top:0}.elf--custom-assets .custom-assets-tools{grid-column-gap:10px;box-sizing:border-box;display:grid;grid-template-columns:1fr 40px;height:20px;left:0;padding:0 10px;position:absolute;right:0;top:10px}.elf--custom-assets .custom-assets-tools .tools{text-align:right}.elf--custom-assets .elf--asset-list{bottom:0;box-sizing:border-box;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;overflow:auto;padding:10px;position:absolute;right:0;row-gap:10px;top:30px}.elf--custom-assets .elf--asset-list .asset-preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;position:relative;width:80px}.elf--custom-assets .elf--asset-list .asset-preview .tools{background-color:transparent;bottom:0;box-sizing:border-box;left:0;opacity:1;padding:2px;position:absolute;right:0;transition:opacity .2s}.elf--custom-assets .elf--asset-list .asset-preview .tools .title{color:var(--elf--selected-font-color);display:inline-block;text-align:left;vertical-align:middle}.elf--custom-assets .elf--asset-list .asset-preview .tools .buttons{display:inline-block}.elf--custom-assets .elf--asset-list .asset-preview:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--custom-assets .elf--asset-list .asset-preview:hover .tools{opacity:1}.elf--custom-assets .elf--asset-list .asset-preview img{-o-object-fit:contain;object-fit:contain;width:100%}.elf--asset-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--asset-list .asset-item{grid-column-gap:4px;border-radius:4px;color:var(--elf--list-item-font-color);display:grid;grid-template-columns:20px 1fr;margin-bottom:0!important;padding:5px 7px!important}.elf--asset-list .asset-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--asset-list .asset-item .detail label{padding:2px 0;vertical-align:middle}.elf--asset-list .asset-item .detail .tools{text-align:right}.elf--asset-list .asset-item.selected{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf--asset-list .asset-item.selected .tools button{color:var(--elf--selected-font-color)}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after,.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{border-radius:3px;content:"";display:inline-block;height:10px;margin-left:5px;vertical-align:middle;width:10px}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after{background-color:#44a344}.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{background-color:var(--elf--selected-color)}.elf--library-items{padding:10px}.elf--library-items .property{margin-bottom:10px!important;margin-top:10px!important}.elf--library-items .property-title{background-color:var(--elf--selected-color-2)!important;border-radius:4px;color:var(--elf--selected-font-color);margin-bottom:10px}.elf--library-items .property-title label{line-height:1.5}.object-items{bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.object-items>:first-child{flex:0 0 140px}.object-items>:last-child{flex:1 1 0;margin-top:auto}.elf--default-layout-item-property .constraints{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--default-layout-item-property .constraints-box{border:1px solid var(--elf--input-border-color);height:70px;margin-left:10px;position:relative;width:70px}.elf--default-layout-item-property .constraints-box>.item{box-sizing:border-box;position:absolute}.elf--default-layout-item-property .constraints-box>.item:hover{background-color:var(--elf--selected-hover-color)}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]{border-color:var(--elf--selected-color)!important;z-index:1}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]:before{background-color:var(--elf--selected-color-2)!important}.elf--default-layout-item-property .constraints-box>.item[disabled]{display:none}.elf--default-layout-item-property .constraints-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;height:calc(50% - 2px);left:calc(25% + 1px);pointer-events:none;position:absolute;top:calc(25% + 1px);width:calc(50% - 2px)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal]:before{background-color:var(--elf--input-border-color);content:"";height:2px;left:3px;pointer-events:none;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]{border-left:2px solid var(--elf--font-color);border-right:2px solid var(--elf--font-color);bottom:-12px;box-sizing:border-box;height:8px;left:0;right:-1px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]:before{background-color:var(--elf--font-color);height:3px;left:0;pointer-events:none;right:0;top:50%;width:auto}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=min]{height:12px;left:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]{height:12px;right:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]:before{left:5px;right:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]{height:12px;left:50%;left:calc(25% + 8px);right:calc(25% + 8px);top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]:before{left:0;right:0}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical]:before{background-color:var(--elf--input-border-color);bottom:4px;content:"";left:50%;pointer-events:none;position:absolute;top:4px;transform:translate(-50%);width:2px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]{border-bottom:1px solid var(--elf--font-color);border-top:1px solid var(--elf--font-color);bottom:-1px;box-sizing:border-box;right:-12px;top:0;width:8px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]:before{background-color:var(--elf--font-color);bottom:0;height:auto;left:50%;pointer-events:none;top:0;transform:translate(-50%);width:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=min]{height:20px;left:50%;top:0;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=max]{bottom:0;height:20px;left:50%;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]{bottom:calc(25% + 8px);left:50%;top:calc(25% + 8px);transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]:before{bottom:0;top:0}.elf--flex-grow-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--flex-grow-tool-view .flex-grow-item{background-color:#fffc;border:1px solid var(--elf--font-color);border-radius:4px;display:flex;height:20px;left:0;line-height:1;overflow:hidden;pointer-events:all;position:absolute;text-align:center;top:0;transform:translate(-50%,-120%)}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=row]{cursor:ew-resize}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]{cursor:ns-resize;flex-direction:column;height:auto;overflow:hidden}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]>*{padding-bottom:1px!important;padding-top:1px!important}.elf--flex-grow-tool-view .flex-grow-item .size{align-items:center;display:flex;flex:1 1 auto;justify-content:center;padding:4px}.elf--flex-grow-tool-view .flex-grow-item .grow{align-items:center;background-color:var(--elf--selected-color);color:var(--elf--selected-font-color);display:flex;flex:none;justify-content:center;padding:4px}.flex-layout-item{margin:10px auto}.flex-layout-item .grid-2{display:flex;gap:10px;justify-content:space-between}.flex-layout-item .grid-2 *{vertical-align:middle}.flex-layout-item .title{font-family:Courier New,Courier,monospace;font-weight:700;margin-bottom:3px;padding-left:2px;text-transform:uppercase}.flex-layout-editor{padding:0 10px 10px}.select-flex-direction{align-items:center;display:flex;flex-direction:row;justify-content:center;position:relative}.select-flex-direction>div{height:200px;position:relative;width:200px}.select-flex-direction .padding-top{right:0}.select-flex-direction .padding-left,.select-flex-direction .padding-top{background-color:var(--elf--border-color);display:block;left:0;position:absolute;top:0}.select-flex-direction .padding-left{bottom:0}.select-flex-direction .padding-right{top:0}.select-flex-direction .padding-bottom,.select-flex-direction .padding-right{background-color:var(--elf--border-color);bottom:0;display:block;position:absolute;right:0}.select-flex-direction .padding-bottom{left:0}.select-flex-direction .flex-group{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group:before{border:1px solid var(--elf--selected-color-2);content:"";display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group-tool .tool-area{border:1px solid var(--elf--selected-color-2);display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=center] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-end] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-start] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=center] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-end] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-start] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-start] .tool-area-item[data-index="2"]{display:none}.select-flex-direction .flex-group-tool .tool-area .tool-area-item{background-color:transparent;background-color:#4b4bff0d;box-sizing:border-box;cursor:pointer;height:30px;left:0;position:absolute;top:0;transition:all .2s linear;transition:all .1s linear;width:30px}.select-flex-direction .flex-group-tool .tool-area .tool-area-item:hover{background-color:#4b4bff80}.select-flex-direction .flex-group-padding{border:1px solid var(--elf--selected-color-2);display:block;height:100%;position:absolute;width:100%}.select-flex-direction .flex-direction{display:flex;gap:2px;height:30px;width:24px}.select-flex-direction .flex-direction[data-value=column]{height:24px;width:30px}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item{height:6px!important;width:30px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:first-child{width:15px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:nth-child(3){width:20px!important}.select-flex-direction .flex-direction .flex-direction-item{background-color:var(--elf--selected-color-2);border-radius:2px;display:inline-block;height:30px;width:6px}.select-flex-direction .flex-direction .flex-direction-item:first-child{background-color:var(--elf--selected-color);height:15px}.select-flex-direction .flex-direction .flex-direction-item:nth-child(3){background-color:var(--elf--selected-color);height:20px}.elf--grid-box-editor{border:1px solid var(--elf--border-color);padding:0 1px}.elf--grid-box-editor .grid-box-editor-item .item{grid-column-gap:4px;display:grid;grid-template-columns:1fr .5fr 1fr 40px;margin-bottom:4px;text-align:center}.elf--grid-box-editor .grid-box-editor-item .item.header{height:24px}.elf--grid-box-editor .grid-box-editor-item .item.header>*{border:1px solid hsla(0,0%,93%,.18);box-sizing:border-box;padding:4px 0}.elf--grid-box-editor .grid-box-editor-item .item .repeat button{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);height:16px;width:16px}.elf--grid-box-editor .grid-box-editor-item .item .repeat button svg{fill:currentColor}.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.value,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=length]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.value{visibility:hidden}.elf--grid-box-editor .grid-box-editor-item .item .tools{padding:4px 0}.elf--grid-grow-tool-view{--cell-size:20px;--cell-padding-size:6px;--cell-color:#ff424d;--cell-grid-item-color:gray;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view[data-drag-target-item=true] .grid-item-tool{visibility:hidden}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool{opacity:0;transition:opacity .2s linear}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool.selected,.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool:hover{opacity:1}.elf--grid-grow-tool-view .layout-pointer{background-color:#000;border-radius:4px;color:#fff;display:inline-block;left:0;padding:2px 4px;position:absolute;top:0;transform:translate(-50%)}.elf--grid-grow-tool-view .layout-rect{position:absolute}.elf--grid-grow-tool-view .layout-rect .grid-item{align-items:center;border:1px dashed var(--cell-grid-item-color);box-sizing:border-box;display:flex;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column{align-items:center;box-sizing:border-box;display:flex;height:var(--cell-size);justify-content:center;left:1px;overflow:hidden;position:relative;top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item{overflow:hidden;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item>span{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle{height:100%;width:14px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.left{left:2px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right{cursor:pointer;display:grid;grid-template-columns:1fr 1fr;right:2px;width:40px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>*{height:var(--cell-size);pointer-events:all;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row{align-items:center;box-sizing:border-box;cursor:ns-resize;display:flex;justify-content:center;left:calc(var(--cell-size)*-1 - var(--cell-padding-size));overflow:hidden;padding-bottom:1px;padding-top:1px;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .item{transform:rotate(-90deg)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle{height:40px;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.top{top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{bottom:2px;cursor:pointer}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{height:20px;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool{color:var(--elf--selected-font-color);cursor:ew-resize;pointer-events:all}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg{height:16px!important;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px!important}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg path,.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg use{fill:currentColor}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append{background-color:var(--cell-color);border-radius:2px;cursor:pointer;height:var(--cell-size);position:absolute;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.column-plus{right:calc(var(--cell-size)*-1 - var(--cell-padding-size));top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.row-plus{bottom:calc(var(--cell-size)*-1 - var(--cell-padding-size));left:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner{flex-direction:column}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{display:inline-block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{display:block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner{background-color:var(--cell-color);border-radius:2px;box-sizing:border-box;display:flex;height:100%;margin-left:1px;margin-right:1px;pointer-events:all;position:relative;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item:hover{background-color:var(--elf--selected-color)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .drag-handle{align-items:center;display:flex;justify-content:center}.elf--grid-grow-tool-view .gap-tool{background-image:repeating-linear-gradient(135deg,rgba(96,108,188,0),rgba(96,108,188,0) 6px,var(--cell-color) 6px,var(--cell-color) 7px);cursor:ew-resize;opacity:0;pointer-events:all;position:absolute}.elf--grid-grow-tool-view .gap-tool.row-gap{cursor:ns-resize}.elf--grid-grow-tool-view .gap-tool:hover{opacity:1}.elf--grid-layout-editor{padding:0 10px 10px}.elf--grid-layout-editor .grid-layout-item{margin-bottom:5px;margin-top:5px}.elf--grid-layout-editor .grid-layout-item>.label{margin-bottom:5px;padding:4px}.elf--layout-property .property-body{padding:0}.elf--layout-property .layout-list>[data-value]{display:none}.elf--layout-property .layout-list>[data-value].selected,.elf--layout-property .layout-list[data-selected-value=default] [data-value=default],.elf--layout-property .layout-list[data-selected-value=flex] [data-value=flex],.elf--layout-property .layout-list[data-selected-value=grid] [data-value=grid]{display:block}.elf--layout-property .layout-list .label{padding:10px 0}.elf--resizing-item-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-item-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-item-property .resizing-mode-box .rect{height:100%;position:relative;width:100%}.elf--resizing-item-property .resizing-mode-box .rect .inner-rect{border:1px solid var(--elf--font-color);height:30px;pointer-events:none;position:absolute;width:30px}.elf--resizing-item-property .resizing-mode-box .tool{cursor:pointer;height:100%;pointer-events:all;position:absolute;width:100%}.elf--resizing-item-property .resizing-mode-box .vertical{height:100%;left:50%;position:absolute;top:0;transform:translate(-50%);width:50%}.elf--resizing-item-property .resizing-mode-box .horizontal{height:50%;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-top{display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;top:0;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-bottom{bottom:0;display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .horizontal-left{display:flex;height:100%;justify-content:center;left:1px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box .horizontal-right{display:flex;height:100%;justify-content:center;opacity:0;position:absolute;right:1px;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top{background-color:var(--elf--selected-hover-color);opacity:1}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed] .inner-rect{left:50%;top:50%;transform:translate(-50%,-50%)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .inner-rect{height:100%;left:50%;top:50%;transform:translate(-50%,-50%);width:50%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .inner-rect{height:50%;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .inner-rect{bottom:0;height:100%;left:0;right:0;top:0;transform:translate(0);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-item-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-item-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-item-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-item-property .has-label-grid>label:after,.elf--resizing-item-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-item-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--resizing-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:70px 1fr}.elf--resizing-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;position:relative;width:63px}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content] .rect .inner-rect{border-color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-horizontal-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-horizontal-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-vertical-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;display:flex;flex-direction:column;font-size:10px;height:42px;left:10px;position:absolute;top:10px;width:42px}.elf--resizing-property .resizing-mode-box>.rect svg{height:12px;width:12px}.elf--resizing-property .resizing-mode-box>.rect svg use{fill:currentColor}.elf--resizing-property .resizing-mode-box>.rect>.vertical{bottom:0;left:calc(50% - 9px);position:absolute;top:0;width:18px}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-top{display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;top:0;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-bottom{bottom:0;display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.horizontal{align-items:center;display:flex;height:16px;justify-content:center;left:0;position:absolute;right:0;top:calc(50% - 8px)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-left{align-items:center;display:flex;height:20px;justify-content:center;left:0;position:absolute;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-right{align-items:center;display:flex;height:20px;justify-content:center;position:absolute;right:0;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect .inner-rect{background-color:var(--elf--background-color);border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;height:18px;left:11px;pointer-events:none;position:absolute;top:11px;width:18px}.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{height:17px;left:0;right:0;top:11px}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{background-color:transparent;border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;pointer-events:none;position:absolute}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect{height:100%;left:calc(50% - 9px);top:0;width:18px}.elf--resizing-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-property .has-label-grid>label:after,.elf--resizing-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--line-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--line-view .horizontal-line{bottom:0;cursor:ew-resize;left:-1px;pointer-events:all;position:absolute;top:0;width:3px}.elf--line-view .horizontal-line:before{background-color:var(--elf--selected-color);bottom:0;content:"";left:50%;pointer-events:none;position:absolute;top:0;transform:translate(-50%);width:1px}.elf--line-view .vertical-line{cursor:ns-resize;height:3px;left:0;pointer-events:all;position:absolute;right:0;top:-1px}.elf--line-view .vertical-line:before{background-color:var(--elf--selected-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.elf--draw-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap;width:550px}.elf--draw-manager .text{display:inline-block}.elf--draw-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--draw-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--draw-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--draw-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--draw-manager .tools>div{display:inline-block;margin-left:10px;vertical-align:middle;white-space:inherit}.elf--draw-manager .tools>div>*{display:inline-block;vertical-align:middle;width:auto}.elf--draw-manager .tools>div label{line-height:1.6;padding:3px 2px;text-align:right;vertical-align:middle}.elf--draw-manager .tools>div .number-input-editor,.elf--draw-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--draw-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--draw-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:20px;overflow:hidden;width:20px}.elf--draw-manager>*{vertical-align:middle}.elf--path-draw-view{background-color:transparent;cursor:crosshair;display:none}.elf--path-draw-view,.elf--path-draw-view .path-draw-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor-view .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .path-container:not(.modify) path.object,.elf--path-editor-view .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor-view .path-container.split-panel{pointer-events:none}.elf--path-editor-view .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor-view .path-container.path{cursor:crosshair}.elf--path-editor-view .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.alt svg circle,.elf--path-editor-view .path-container.segment-move{cursor:move}.elf--path-editor-view .path-container.transform svg .snap-path,.elf--path-editor-view .path-container.transform svg circle,.elf--path-editor-view .path-container.transform svg line,.elf--path-editor-view .path-container.transform svg rect,.elf--path-editor-view .path-container.transform svg text{display:none}.elf--path-editor-view .path-container.modify,.elf--path-editor-view .path-container.segment-move{cursor:default}.elf--path-editor-view .path-container.modify svg path.object,.elf--path-editor-view .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor-view .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor-view .path-container.is-control svg path.path-area{display:none}.elf--path-editor-view .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor-view .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor-view .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor-view svg{height:100%;width:100%}.elf--path-editor-view svg line{stroke-width:1;content-visibility:auto}.elf--path-editor-view svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor-view svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor-view svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor-view svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor-view svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor-view svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor-view svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor-view svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff;r:5;stroke-width:2}.elf--path-editor-view svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor-view svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor-view svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor-view svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor-view svg path{fill:transparent;content-visibility:auto}.elf--path-editor-view svg path.path-area{stroke-width:0}.elf--path-editor-view svg path.path-area.selected,.elf--path-editor-view svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor-view svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor-view svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff}.elf--path-editor-view svg path.guide,.elf--path-editor-view svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor-view svg path.object{fill:transparent;stroke-width:1}.elf--path-editor-view svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor-view svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor-view svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;filter:drop-shadow(2px 4px 6px white)}.elf--path-editor-view svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap}.elf--path-manager button{box-sizing:border-box;display:inline-block;height:auto;height:34px;margin:0 2px;text-decoration:underline;vertical-align:middle;white-space:nowrap;width:auto;width:34px}.elf--path-manager button svg{height:20px;vertical-align:middle;width:20px}.elf--path-manager .text{display:inline-block}.elf--path-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--path-manager .subpath{background-color:var(--elf--background-color);border-radius:4px;display:inline-block;left:0;padding:4px 2px;position:absolute;right:0;text-align:left;top:calc(100% + 2px)}.elf--path-manager .subpath button{box-sizing:border-box;display:inline-block;margin:0 2px;text-decoration:underline;white-space:nowrap}.elf--path-manager .subpath button,.elf--path-manager .subpath button svg{height:24px;vertical-align:middle;width:24px}.elf--path-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--path-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--path-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;color:var(--elf--selected-font-color);height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--path-manager .tools[data-selected-value=modify] button[data-value=modify],.elf--path-manager .tools[data-selected-value=path] button[data-value=path],.elf--path-manager .tools[data-selected-value=transform] button[data-value=transform],.elf--path-manager .tools[data-selected-value=warp] button[data-value=warp]{color:var(--elf--selected-color)}.elf--path-manager .tools>div{display:inline-block;height:100%;padding:5px 0;vertical-align:middle}.elf--path-manager .tools>div label{line-height:20px;padding:3px 2px;text-align:right;width:auto}.elf--path-manager .tools>div .number-input-editor,.elf--path-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--path-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--path-manager .tools>div .fill-single-editor{display:inline-block;vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor label{vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:18px;overflow:hidden;width:18px}.elf--path-manager>*{vertical-align:middle}.elf--boolean-item{padding:8px 5px 10px}.elf--boolean-item>div{grid-column-gap:10px;display:grid;grid-template-columns:1fr 1fr;height:30px;padding:4px 0;text-align:left}.elf--boolean-item>div.divider{background-color:var(--elf--property-border-color);font-size:0;height:1px;margin:10px 0;padding:0}.elf--boolean-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;flex:1 1 auto;font-size:11px;height:24px;text-align:left;vertical-align:middle;width:auto}.elf--boolean-item button[data-no-title=true] .title{display:none}.elf--boolean-item button svg{height:20px;vertical-align:middle;width:20px}.elf--boolean-item .title{color:#999}.elf--pattern-editor .label{height:20px;margin-top:2px}.elf--pattern-editor .label.hide{display:none}.elf--pattern-editor .label label{padding-left:5px;vertical-align:middle}.elf--pattern-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--pattern-editor .pattern-list{-moz-column-gap:4px;column-gap:4px;display:flex;flex-wrap:wrap;padding-bottom:10px;row-gap:4px}.elf--pattern-editor .pattern-list:empty{display:none}.elf--pattern-editor .pattern-list .pattern-item{box-shadow:0 0 0 1px var(--elf--border-color);display:inline-block;position:relative;text-align:center}.elf--pattern-editor .pattern-list .pattern-item.selected{background-color:var(--elf--border-color)}.elf--pattern-editor .pattern-list .pattern-item:hover .tools{display:inline-block}.elf--pattern-editor .pattern-list .pattern-item .tools{background-color:#ffffffe6;color:var(--elf--selected-color);display:none;position:absolute;right:0;top:0}.pattern-info-popup{width:240px}.pattern-info-popup .box>div{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr}.pattern-info-popup .box>div.grid-2{grid-template-columns:1fr 1fr}.el--pattern-property .pattern-property{display:flex}.el--pattern-property .add-tools{opacity:.3;transition:opacity .2s}.el--pattern-property .add-tools:hover{opacity:1}.el--pattern-property .add-tools svg{height:20px;width:20px}.elf--pattern-size-editor{height:60px;text-align:center;width:60px}.elf--pattern-size-editor .preview{height:100%}.elf--pattern-size-editor .preview .mini-view{background-color:#fff;height:100%}.elf--pattern-size-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.grid-layout{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 20px;margin-bottom:4px}.elf--project-list{margin:0!important}.elf--project-list .project-item{cursor:pointer;padding:5px 10px!important}.elf--project-list .project-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--project-list .project-item .detail label{cursor:pointer;padding:2px 0}.elf--project-list .project-item .detail .tools{text-align:right}.elf--project-list .project-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--selection-info-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-info-view .artboard-title{display:inline-block;pointer-events:all;position:absolute;transform:translateY(-100%);vertical-align:middle}.elf--selection-info-view .artboard-title svg{height:16px;vertical-align:middle;width:16px}.elf--selection-info-view .artboard-title svg path,.elf--selection-info-view .artboard-title svg use{fill:currentColor}.elf--selection-info-view .artboard-title>div{padding:2px 5px}.elf--ghost-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--ghost-tool-view svg{height:100%;left:0;position:absolute;top:0;width:100%}.elf--ghost-tool-view svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:2;stroke-dasharray:2 2}.elf--ghost-tool-view svg path.container,.elf--ghost-tool-view svg path.target,.elf--ghost-tool-view svg path.target-parent,.elf--ghost-tool-view svg path.target-rect{stroke-width:0}.elf--ghost-tool-view svg path.flex-item{stroke:transparent;fill:#3232321a;z-index:-1000}.elf--ghost-tool-view svg path.flex-target{stroke-width:5;stroke:var(--elf--selected-color)}.elf--selection-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-view.editing-path,.elf--selection-view.editing-polygon{display:none!important}.elf--selection-view.empty>*{display:none}.elf--selection-view[data-has-shift=true] .pointer-rect .pointer{background-color:transparent}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-left-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-right-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-left-width:0;border-top-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-right-width:0;border-top-width:0}.pointer-rect{bottom:0;pointer-events:none;right:0}.pointer-rect,.pointer-rect .pointer{box-sizing:border-box;left:0;position:absolute;top:0}.pointer-rect .pointer{background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:10px;pointer-events:all;width:10px}.pointer-rect .pointer[data-number="5"]{background-color:var(--elf--selected-color);border-radius:100%;height:7px;pointer-events:none;width:7px}.pointer-rect .pointer[data-number="11"],.pointer-rect .pointer[data-number="12"],.pointer-rect .pointer[data-number="13"],.pointer-rect .pointer[data-number="14"]{background-color:transparent;border:0}.pointer-rect .size-pointer{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;left:0;padding:2px 4px;position:absolute;top:0}.pointer-rect .size-pointer[data-layout=grid]{background-color:red}.pointer-rect .size-pointer[data-layout=flex]{background-color:green}.pointer-rect .rotate-pointer{background-color:#fff;border:1px solid orange;border-radius:100%;box-sizing:border-box;display:inline-block;height:14px;left:0;overflow:hidden;pointer-events:all;position:absolute;top:0;width:14px}.pointer-rect .rotate-pointer:before{background-color:orange;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.pointer-rect .rotate-pointer.no-fill{background-color:transparent;border:none;height:14px;width:14px}.pointer-rect .rotate-pointer.no-fill:before{display:none}.pointer-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:1;height:100%;left:0;position:absolute;top:0;width:100%}.pointer-rect .line path{stroke-width:2;transform:translate(.5px,.5px)}.selection-tool{border:.5px solid var(--elf--selection-tool-border-color);position:absolute}.selection-tool.path .selection-tool-item[data-position=path],.selection-tool.polygon .selection-tool-item[data-position=path],.selection-tool.textpath .selection-tool-item[data-position=path]{background-color:#fffc;border:1px solid var(--elf--border-color);bottom:auto;left:50%;opacity:1;right:auto;top:-30px;transform:translate(-50%,-50%)}.selection-tool[data-is-layout-container=true][data-layout-container=flex]{border:2px solid #4fdc4f}.selection-tool[data-is-layout-container=true][data-layout-container=grid]{border:2px solid #e46363}.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position=move]{display:none}.selection-tool .selection-tool-item{background-color:var(--elf--selection-tool-border-color);border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:8px;pointer-events:all;position:absolute;transform:translate(-50%,-50%);width:8px}.selection-tool .selection-tool-item:not([data-position=move]){background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);box-sizing:border-box}.selection-tool .selection-tool-item:before{background-color:#333c;border:var(--elf--border-color);border-radius:3px;color:#fff;content:attr(data-position-text);opacity:0;padding:4px 10px;pointer-events:none;position:absolute;text-align:center;transition:opacity .3s linear;white-space:nowrap}.selection-tool .selection-tool-item[data-position=move]{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);box-sizing:border-box;color:var(--elf--selected-font-color);cursor:move;display:inline-block;height:20px;left:0;overflow:hidden;padding-right:5px;top:-2px;transform:translateY(-100%);vertical-align:middle;width:auto}.selection-tool .selection-tool-item[data-position=move]:before{left:0;top:0;transform:translate(-100%,calc(-100% - 5px))}.selection-tool .selection-tool-item[data-position=move] svg{height:15px;width:15px}.selection-tool .selection-tool-item[data-position=move] span{color:var(--elf--selected-font-color);vertical-align:middle}.selection-tool .selection-tool-item[data-position=path]{background-color:transparent;border:0;border-radius:0;cursor:move;height:20px;left:0;opacity:0;top:0;transform:none;width:20px}.selection-tool .selection-tool-item[data-position=path]:before{left:50%;top:50%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position=path] svg{height:100%;width:100%}.selection-tool .selection-tool-item[data-position="to top"]{background-color:transparent;border:0;cursor:ns-resize;height:2px;left:0;right:0;top:-2px;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to bottom"]{background-color:transparent;border:0;bottom:-2px;cursor:ns-resize;height:2px;left:0;right:0;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to right"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;right:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to left"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;left:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%;transform:translate(-50%,-50%)}.elf--selector-popup{height:auto;padding:7px;width:250px}.elf--selector-popup .box .name{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--selector-popup .box .name input{width:100%}.elf--selector-list{grid-template-columns:1fr!important}.elf--selector-list .selector-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:1fr;height:30px;margin-bottom:5px;padding:5px}.elf--selector-list .selector-item:first-child{margin-top:5px}.elf--selector-list .selector-item.selected{background-color:var(--elf--border-color)}.elf--selector-list .selector-item .title{display:grid;grid-template-columns:1fr 20px;height:20px}.elf--selector-list .selector-item .title .name{padding:2px 0}.elf--selector-list .selector-item .title .name span{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);font-weight:700;padding:2px 4px}.elf--selector-list .selector-item .title .tools{text-align:right;vertical-align:middle}.elf--svgfilter-assets-property .svgfilter-assets{padding:5px}.elf--svgfilter-assets-property .svgfilter-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--svgfilter-assets-property .svgfilter-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=grid] button[data-value=grid],.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--svgfilter-assets-property .svgfilter-list{padding:5px}.elf--svgfilter-assets-property .svgfilter-list .svgfilter-view{background-image:radial-gradient(#ff0 0,red 100%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid]{display:block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item button svg{height:20px;width:20px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item{display:inline-block;margin-bottom:4px;margin-right:2px;position:relative;vertical-align:middle;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item:hover .tools{display:inline-block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title{grid-row-gap:4px;display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title input{width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--color-matrix-editor .title{color:var(--elf--selected-color);padding:5px 0}.elf--color-matrix-editor .color-matrix-template{border:1px solid var(--elf--border-color);box-sizing:border-box;max-height:383px;overflow:auto;padding:5px 10px}.elf--color-matrix-editor .color-matrix-template input,.elf--color-matrix-editor .color-matrix-template select{width:100%}.elf--color-matrix-editor .color-matrix-template .sample-item{cursor:pointer;padding:2px 5px}.elf--color-matrix-editor .color-matrix-template .sample-item:hover{background-color:#fff3;color:var(--elf--selected-color)}.elf--func-filter-editor{display:grid;grid-template-columns:1fr}.elf--func-filter-editor.focused{border-radius:3px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--func-filter-editor.has-label{grid-template-columns:60px 1fr}.elf--func-filter-editor.has-label label{padding:2px 0;padding-left:0!important;text-align:left;vertical-align:middle}.elf--func-filter-editor>[data-type]{display:none;padding:4px 0}.elf--func-filter-editor[data-selected-type=discrete]>[data-type=table],.elf--func-filter-editor[data-selected-type=gamma]>[data-type=gamma],.elf--func-filter-editor[data-selected-type=identity]>[data-type=identity],.elf--func-filter-editor[data-selected-type=linear]>[data-type=linear],.elf--func-filter-editor[data-selected-type=table]>[data-type=table]{display:block}.elf--svg-filter-editor{grid-column-gap:10px;color:var(--elf--font-color);display:grid;grid-template-columns:150px 1fr 200px;height:100%;position:relative}.elf--svg-filter-editor .tab>.tab-header{height:30px}.elf--svg-filter-editor .label{height:20px;margin-top:2px}.elf--svg-filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--svg-filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--svg-filter-editor .tools select{display:inline-block;width:100px!important}.elf--svg-filter-editor .left{height:100%;position:relative}.elf--svg-filter-editor .left .filter-item-list{height:100%;overflow:auto;padding:10px 5px}.elf--svg-filter-editor .left .filter-item-list .group{margin-bottom:6px}.elf--svg-filter-editor .left .filter-item-list .group:before{color:var(--elf--selected-color);content:attr(label);display:block}.elf--svg-filter-editor .left .filter-item-list .group .item{color:var(--elf--font-color);cursor:pointer;padding:2px 10px;vertical-align:middle}.elf--svg-filter-editor .left .filter-item-list .group .item svg{height:20px;width:20px}.elf--svg-filter-editor .left .filter-item-list .group .item[value=BackgroundImage],.elf--svg-filter-editor .left .filter-item-list .group .item[value=FillPaint],.elf--svg-filter-editor .left .filter-item-list .group .item[value=SourceGraphic]{color:var(--elf--selected-color)}.elf--svg-filter-editor .left .filter-item-list .group .item:hover{background-color:#ffffff4d}.elf--svg-filter-editor .center{overflow:auto;position:relative}.elf--svg-filter-editor .center .graph{border:1px solid var(--elf--selected-color);box-sizing:border-box;height:100%;overflow:auto;position:relative}.elf--svg-filter-editor .center .graph .connected-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .connected-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .connected-line-panel svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;pointer-events:none}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=graphic]{stroke:#a6a6ff}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=source]{stroke:#9acd32}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=modifier]{stroke:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=lighting]{stroke:#e6ff00}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=combiner]{stroke:#ff9bff}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle{fill:var(--elf--selected-color);r:4;stroke:rgba(var(--elf--selected-color),.5);stroke-width:0;cursor:pointer;pointer-events:all}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=graphic]{fill:#a6a6ff;stroke:#a6a6ff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=source]{fill:#9acd32;stroke:#9acd3280}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=modifier]{fill:var(--elf--selected-color);stroke:rgba(var(--elf--selected-color),.5)}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=lighting]{fill:#e6ff00;stroke:#e6ff0080}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=combiner]{fill:#ff9bff;stroke:#ff9bff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle:hover{stroke-width:4}.elf--svg-filter-editor .center .graph .drag-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .drag-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .drag-line-panel svg path{stroke:var(--elf--selected-color);stroke-width:1}.elf--svg-filter-editor .center .graph .graph-panel{height:1000px;pointer-events:none;position:relative;width:1000px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node{background-color:var(--elf--background-color);border-radius:10px;box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px #777;cursor:pointer;display:inline-block;height:40px;left:10px;pointer-events:all;position:absolute;top:10px;width:40px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundImage],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=FillPaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Flood],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Image],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceGraphic],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=StrokePaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Turbulence]{border-radius:0}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out{background-color:#f8e579}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out svg{display:none}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.label{bottom:100%;color:var(--elf--font-color);display:inline-block;left:50%;position:absolute;transform:translate(-50%)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove{background-color:var(--elf--selected-color);border-radius:100%;color:var(--elf--font-color);display:inline-block;height:12px;left:50%;position:absolute;top:-6px;transform:translate(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg circle,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg rect,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview{height:100%;pointer-events:none;position:relative;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Composite] svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Merge] svg{transform:translate(-50%,-50%) rotate(90deg)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=graphic]{color:#a6a6ff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=source]{color:#9acd32}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=modifier]{color:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting]{color:#e6ff00}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=combiner]{color:#ff9bff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting] svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg{display:block;height:30px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in-list{display:inline-block;left:-14px;position:absolute;top:50%;transform:translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in{background-color:#09f;border-bottom-left-radius:50%;border-top-left-radius:50%;display:block;height:12px;margin:2px 0;position:relative;width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in:before{background-color:#fffc;border-radius:100%;content:"";display:block;height:8px;left:3px;position:absolute;top:50%;transform:translateY(-50%);width:8px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{background-color:#09f;border-bottom-right-radius:50%;border-top-right-radius:50%;height:12px;position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .light{background-color:#f8e579;border-bottom-left-radius:100%;border-bottom-right-radius:100%;bottom:-15px;height:15px;left:50%;position:absolute;transform:translate(-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{color:#fff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{height:24px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg{left:6px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{left:7px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node.selected{box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px var(--elf--selected-color)}.elf--svg-filter-editor .right{box-sizing:border-box;height:100%;overflow:auto}.elf--svg-filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;width:100%}.elf--svg-filter-editor .filter-list .filter-item{display:block}.elf--svg-filter-editor .filter-list .filter-item .title{border-radius:3px;color:var(--elf--selected-color);display:grid;grid-template-columns:1fr 30px;margin:5px 0}.elf--svg-filter-editor .filter-list .filter-item .title label{padding:2px 0}.elf--svg-filter-editor .filter-list .filter-item .title .filter-menu{color:var(--elf--selected-font-color);text-align:right}.elf--svg-filter-editor .filter-list .filter-item .filter-ui{display:grid;grid-template-columns:1fr;margin-bottom:2px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div{margin-bottom:5px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--number-range-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--select-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--text-editor.has-label{grid-template-columns:100px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--color-view-editor.has-label{grid-template-columns:100px 24px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui input[type=range]{width:90%}.elf--svg-filter-popup{max-height:800px;min-height:500px;min-width:900px;position:relative}.elf--svg-filter-popup .box{bottom:0;left:0;position:absolute;right:0;top:0}.elf--svg-filter-popup .box>.editor{height:100%;position:relative}.elf--svg-filter-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--svg-filter-popup .box .property .title .tools{text-align:right}.elf--svg-filter-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--svg-filter-popup .box label{text-align:left;vertical-align:middle}.elf--svg-filter-popup .box input[type=number],.elf--svg-filter-popup .box input[type=range],.elf--svg-filter-popup .box input[type=text],.elf--svg-filter-popup .box select{vertical-align:middle;width:100%}.elf--svg-filter-select-editor{grid-column-gap:2px;display:grid;grid-template-columns:1fr 16px 16px;height:24px;position:relative}.elf--svg-filter-select-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr 16px 16px}.elf--svg-filter-select-editor.has-label label{line-height:1.6;padding:4px 0 2px;text-align:left;vertical-align:middle}.elf--svg-filter-select-editor select{height:100%;width:100%}.elf--svg-filter-select-editor button{margin-top:4px}.text-shadow-samples{border:0;font-size:11px}.elf--transition-list{grid-template-columns:1fr!important}.elf--transition-list .transition-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0}.elf--transition-list .transition-item.selected{background-color:var(--elf--border-color)}.elf--transition-list .transition-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;vertical-align:middle;width:100%}.elf--transition-list .transition-item .timing canvas{border-radius:3px}.elf--transition-list .transition-item .labels{margin-top:4px;padding:5px;text-align:left;vertical-align:middle}.elf--transition-list .transition-item .labels label{background-color:var(--elf--border-color);border-radius:2px;font-weight:700;padding:1px 3px}.elf--transition-list .transition-item .labels label small{color:var(--elf--font-color)}.elf--transition-list .transition-item .labels label.property{border-bottom:0;font-weight:400}.elf--transition-list .transition-item .tools{padding-top:8px;text-align:right;vertical-align:middle}.elf--transition-property-popup{width:220px}.elf--transition-property-popup .box>div{margin-bottom:5px}.elf--transition-property-popup .box label{text-align:left;vertical-align:middle}.elf--transition-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--transition-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--transition-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--video-property .divider{background-color:var(--elf--divider-color);height:1px;margin:10px auto;width:30px}.elf--video-property .play-control{grid-column-gap:5px;display:grid;grid-template-columns:70px 1fr}.elf--video-property .play-control button[data-value]{display:none;text-align:left;vertical-align:middle;width:auto}.elf--video-property .play-control[data-selected-value=pause] button[data-value=pause],.elf--video-property .play-control[data-selected-value=play] button[data-value=play]{display:inline-block}.elf--video-property .volume-control{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr}.elf--video-property .volume-control span[data-value]{color:var(--elf--font-color);display:none;height:16px;vertical-align:middle;width:16px}.elf--video-property .volume-control span[data-value] svg{height:100%;width:100%}.elf--video-property .volume-control span[data-value] svg path{fill:currentColor}.elf--video-property .volume-control[data-selected-value=down] span[data-value=down],.elf--video-property .volume-control[data-selected-value=muted] span[data-value=muted],.elf--video-property .volume-control[data-selected-value=up] span[data-value=up]{display:inline-block}.elf--colorpicker-popup{padding:0 10px;width:244px}.elf--colorpicker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--colorpicker-popup .colorpicker input{border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--colorpicker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--colorpicker-popup .colorpicker .colorsets{border-top:1px solid var(--elf--border-color)!important}.elf--colorpicker-popup .assets{padding:0 10px}.elf--colorpicker-popup .assets .project-color-list{padding:5px 0}.elf--colorpicker-popup .assets .project-color-list .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border-radius:3px;display:inline-block;height:16px;margin-bottom:9px;margin-right:9px;overflow:hidden;position:relative;width:16px}.elf--colorpicker-popup .assets .project-color-list .color-item .color-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--colorpicker-popup .assets .project-color-list .color-item:hover{transform:scale(1.2)}.elf--content-item{grid-template-columns:1fr!important;padding:0 4px!important}.elf--content-item textarea{border:1px solid var(--elf--border-color);border-radius:3px;height:100px;width:100%}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--drag-area-view{height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%}.elf--drag-area-view .drag-area-rect{background-color:var(--elf--drag-area-rect-background-color);border:.5px solid var(--elf--drag-area-rect-border-color);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--page-tools{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);border-radius:3px;bottom:10px;box-sizing:border-box;color:var(--elf--font-color);display:inline-block;left:20px;padding:5px 10px;position:absolute}.elf--page-tools>*{display:inline-block;position:relative}.elf--page-tools>label{display:inline-block;height:100%;padding-top:5px;vertical-align:middle}.elf--page-tools button{border:0;border-radius:3px;display:inline-block;height:24px;padding:4px;position:relative;vertical-align:middle;width:24px}.elf--page-tools button.on{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--page-tools button svg{pointer-events:none}.elf--page-tools button[data-path-index="0"]:after{background-color:var(--elf--selected-color);border-radius:100%;content:"";height:4px;left:10px;position:absolute;top:100%;width:4px}.elf--page-tools>.select{border:1px solid rgba(var(--elf--selected-color),.5);border-radius:5px;display:inline-block;width:50px}.player .page-container{left:0;top:0}.elf--element-view{outline:none}.canvas-view,.elf--element-view{left:0;pointer-events:none;position:absolute;top:0}.canvas-view{height:100%;transform-origin:left top;width:100%;will-change:auto}.canvas-view[data-outline=true] .element-item{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view[data-outline=true] .element-item.svg-path{border:0!important}.canvas-view[data-outline=true] .element-item.artboard{border:2px dashed #595959!important}.canvas-view[data-outline=true] .element-item svg circle,.canvas-view[data-outline=true] .element-item svg ellipse,.canvas-view[data-outline=true] .element-item svg line,.canvas-view[data-outline=true] .element-item svg path,.canvas-view[data-outline=true] .element-item svg polygon,.canvas-view[data-outline=true] .element-item svg polyline,.canvas-view[data-outline=true] .element-item svg rect,.canvas-view[data-outline=true] .element-item svg text{fill:none!important;stroke:#595959!important;stroke-width:1px!important}.canvas-view .element-item.svg-path{pointer-events:none}.canvas-view .element-item.svg-path>*,.canvas-view .element-item.svg-path>svg>path{pointer-events:stroke}.canvas-view .element-item.svg-path>svg>:not([fill=transparent]){pointer-events:visible}.canvas-view .element-item{pointer-events:all;will-change:auto}.canvas-view .element-item [contenteditable=true],.canvas-view .element-item[contenteditable=true],.canvas-view .element-item[tabIndex]{outline:none}.canvas-view .element-item[data-is-boolean-item=true]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view .element-item[data-is-boolean-item=true].svg-path{border:0!important}.canvas-view .element-item[data-is-boolean-item=true] svg circle,.canvas-view .element-item[data-is-boolean-item=true] svg ellipse,.canvas-view .element-item[data-is-boolean-item=true] svg line,.canvas-view .element-item[data-is-boolean-item=true] svg path,.canvas-view .element-item[data-is-boolean-item=true] svg polygon,.canvas-view .element-item[data-is-boolean-item=true] svg polyline,.canvas-view .element-item[data-is-boolean-item=true] svg rect,.canvas-view .element-item[data-is-boolean-item=true] svg text{fill:none!important;stroke:transparent!important;stroke-width:1px!important}.canvas-view .element-item.artboard{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.canvas-view .element-item>svg circle:hover,.canvas-view .element-item>svg ellipse:hover,.canvas-view .element-item>svg line:hover,.canvas-view .element-item>svg path:hover,.canvas-view .element-item>svg polygon:hover,.canvas-view .element-item>svg polyline:hover,.canvas-view .element-item>svg rect:hover{stroke:#4040fc}.canvas-view .element-item>svg:hover>text{fill:#4040fc}.elf--horizontal-ruler{background-color:var(--elf--background-color);height:var(--elf--editor-ruler-size);left:var(--elf--editor-ruler-size);position:absolute;right:0;top:0;z-index:0}.elf--horizontal-ruler .horizontal-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--horizontal-ruler .horizontal-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--horizontal-ruler .horizontal-ruler-container svg.horizontal-line path{stroke:var(--elf--selected-color)}.elf--horizontal-ruler .horizontal-ruler-container .cursor{--elf--horizontal-cursor-position:0px;background-color:var(--elf--selected-color-2);height:100%;transform:translate(var(--elf--horizontal-cursor-position)) translateZ(0) translateY(-1px);width:2px}.elf--horizontal-ruler svg{transform:translateY(2px)}.elf--horizontal-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--horizontal-ruler svg path{stroke:var(--elf--font-color)}.elf--horizontal-ruler svg path[data-selected=true]{stroke:transparent}.elf--horizontal-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--vertical-ruler{background-color:var(--elf--background-color);bottom:0;box-sizing:border-box;left:0;position:absolute;top:var(--elf--editor-ruler-size);width:var(--elf--editor-ruler-size);z-index:0}.elf--vertical-ruler .vertical-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--vertical-ruler .vertical-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--vertical-ruler .vertical-ruler-container svg.vertical-line path{stroke:var(--elf--selected-color)}.elf--vertical-ruler .vertical-ruler-container .cursor{--elf--vertical-cursor-position:0px;background-color:var(--elf--selected-color-2);height:2px;transform:translateY(var(--elf--vertical-cursor-position)) translateZ(0);width:100%}.elf--vertical-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--vertical-ruler svg path{stroke:var(--elf--font-color)}.elf--vertical-ruler svg path[data-selected=true]{stroke:transparent}.elf--vertical-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0} diff --git a/docs/3d.html b/docs/3d.html deleted file mode 100644 index ab6c9df88..000000000 --- a/docs/3d.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - - - - - - -
      - - - diff --git a/docs/assets/blankeditor.2ece4c0d.js b/docs/assets/blankeditor.2ece4c0d.js deleted file mode 100644 index dc9f5fe99..000000000 --- a/docs/assets/blankeditor.2ece4c0d.js +++ /dev/null @@ -1 +0,0 @@ -import{E as l,e as r,f as c,C as d,L as g,D as b,g as f,i as h,O as o,B as v,S as y,U as w}from"./index.e23f8a81.js";class p{constructor(){}async getRoot(){return[]}async getChildren(e){return await e}async getParent(e){return await e.parent}async getTreeItem(e){return{label:e.label,icon:e.icon,element:e,collapased:e.collapsed,command:{title:"",command:"tree.select",args:[e]}}}async traverse(){return await[...await this.getRoot()]}}class i extends l{components(){return{TreeItem:i}}initState(){return{item:this.props.item}}template(){var e;return console.log(this.state.item),r("div",{class:"tree-item"},r("div",{class:"tree-item-label",ref:"$label"},r("span",{class:"tree-item-icon"},r("span",{class:"tree-item-icon-image"})),r("span",{class:"tree-item-label-text"},this.state.item.title)),r("div",{class:"tree-item-children"},(e=this.state.item.children||[])==null?void 0:e.map((t,a)=>c("TreeItem",{ref:`${this.id}-${a}`,item:t})).join("")))}[d("$label")](){console.log(this.state.item)}}class S extends l{components(){return{TreeItem:i}}initState(){return{provider:this.props.provider||new p}}template(){return r("div",{class:"tree-view"})}async[g("$el")+b](){return(await this.state.provider.traverse()).map((e,t)=>c("TreeItem",{ref:`${this.id}-${t}`,item:e}))}}function I(){return["app"].map(e=>f({container:document.getElementById(e),config:{"editor.theme":"light","show.left.panel":!0,"show.right.panel":!0},plugins:[function(t){t.registerUI("layertab.tab",{Sample:{title:"Sample",icon:h("add"),value:"sample"}}),t.context.config.set("layertab.selectedValue","sample"),t.registerUI("layertab.tab.sample",{TreeView:[S,{provider:new class extends p{async getRoot(){return[{title:"Root",value:"root",children:[{title:"Child",value:"child"}]}]}}}]}),t.registerUI("inspector.tab",{Sample:{title:"Sample",value:"sample"}}),t.context.config.set("inspector.selectedValue","sample"),t.registerUI("layertab.tab.sample",{SampleProperty:o.create({title:"Sample",visible:!0,inspector:()=>["SampleProperty"]})}),t.registerUI("inspector.tab.sample",{SampleProperty:o.create({visible:!0,title:"Sample",inspector:()=>["SampleProperty"]})}),t.registerUI("canvas.view",{Sample:class extends l{template(){return"
      fdsajfkdlsajfkdlsadfjksl
      "}[v("$el")](){const{translate:a,transformOrigin:s,scale:m}=this.$viewport,u=`translate(${a[0]}px, ${a[1]}px) scale(${m||1})`;return{style:{"transform-origin":`${s[0]}px ${s[1]}px`,transform:u}}}[y(w)](){this.bindData("$el")}}}),t.registerMenu("toolbar.center",[{type:"button",title:"Sample"}]),t.registerMenu("toolbar.right",[{type:"button",title:"Sample"}]),t.registerMenu("toolbar.left",[{type:"dropdown",icon:`
      `,items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"}]},{type:"button",title:"test button",action:(a,s)=>{console.log("test button",s)},style:{}},{type:"dropdown",title:"file",items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"},"-","a",{type:"divider"},{title:"menu.item.fullscreen.title",action:()=>{window.alert("tool")},shortcut:"ALT+/"}]}])}]}))}window.elfEditor=I(); diff --git a/docs/assets/dataeditor.f8c67166.js b/docs/assets/dataeditor.f8c67166.js deleted file mode 100644 index fef6d70d2..000000000 --- a/docs/assets/dataeditor.f8c67166.js +++ /dev/null @@ -1 +0,0 @@ -import{b as l}from"./index.e23f8a81.js";function n(){return["app"].map(o=>l({container:document.getElementById(o),onChange:(e,t,i)=>{console.log(e.getValue(),t,i)},inspector:[{editor:"Button",editorOptions:{text:"Edit",onClick:()=>{console.log("a")}}},{type:"column",size:[1,1],columns:[{key:"column1",editor:"color-view",editorOptions:{label:"Color"}}]},{type:"folder",label:"folder test",children:[{key:"column1",editor:"color-view",editorOptions:{label:"Color"}},{type:"column",size:[1,1],columns:[{key:"column1",editor:"color-view",editorOptions:{label:"Color"}}]}]}],config:{"editor.theme":"light"},plugins:[]}))}window.EasylogicEditor=n(); diff --git a/docs/assets/editor.57e24637.js b/docs/assets/editor.57e24637.js deleted file mode 100644 index 0a3ddc4cc..000000000 --- a/docs/assets/editor.57e24637.js +++ /dev/null @@ -1 +0,0 @@ -import{c as n}from"./index.e23f8a81.js";function e(){return["app"].map(t=>n({container:document.getElementById(t),config:{"editor.theme":"light"},plugins:[function(i){i.on("changed",()=>{})}]}))}window.elfEditor=e(); diff --git a/docs/assets/editor.58120e25.css b/docs/assets/editor.58120e25.css new file mode 100644 index 000000000..8198b194e --- /dev/null +++ b/docs/assets/editor.58120e25.css @@ -0,0 +1 @@ +.colorpicker{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-shadow:0 0 10px 2px #0000001f;display:inline-block;position:relative;width:224px;z-index:1000}.colorpicker>.arrow{border-bottom:10px solid rgba(0,0,0,.2);border-left:10px solid transparent;border-right:10px solid transparent;display:none;height:0;left:7px;pointer-events:none;position:absolute;top:-10px;width:0}.colorpicker>.arrow:after{border-bottom:9px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:-9px;position:absolute;top:1px;width:0}.colorpicker .colorpicker-body .color-tab{border:1px solid #ececec;box-sizing:border-box;display:flex;flex-direction:column;height:350px}.colorpicker .colorpicker-body .color-tab.xd{height:200px}.colorpicker .colorpicker-body .color-tab .color-tab-header{display:flex;flex:none;flex-direction:row;height:20px}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item{background-color:#ececec;box-sizing:border-box;cursor:pointer;flex:1 1 auto;height:100%;padding:4px 10px;text-align:center}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item.active{background-color:#fff;border-bottom-color:#fff}.colorpicker .colorpicker-body .color-tab .color-tab-body{flex:1 1 auto;position:relative}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content.active{display:block}.colorpicker .colorpicker-body .color-panel{cursor:pointer;height:120px;overflow:hidden;position:relative}.colorpicker .colorpicker-body .color-panel>.saturation,.colorpicker .colorpicker-body .color-panel>.saturation>.value{height:100%;position:relative;width:100%}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border-radius:50%;height:10px;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.colorpicker .colorpicker-body .color-panel>.saturation{background-color:#cb998000;background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0));background-repeat:repeat-x}.colorpicker .colorpicker-body .color-panel>.saturation>.value{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border:1px solid #fff;box-shadow:0 0 2px #0000000d}.colorpicker .colorpicker-body .control{padding:10px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker .colorpicker-body .control>.color,.colorpicker .colorpicker-body .control>.empty{background-color:#fff;border-radius:50%;box-sizing:border-box;height:30px;left:12px;position:absolute;top:14px;width:30px}.colorpicker .colorpicker-body .control>.color{border:1px solid rgba(0,0,0,.1)}.colorpicker .colorpicker-body .control>.hue{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:6px 16px;position:relative}.colorpicker .colorpicker-body .control>.hue>.hue-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control>.opacity{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:3px 16px;position:relative}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{border-radius:50%;cursor:pointer;height:12px;left:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker .colorpicker-body .control>.hue>.hue-container{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control>.opacity>.opacity-container>.color-bar{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .control>.empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{background-color:#fefefe;border:1px solid rgba(0,0,0,.05);box-shadow:2px 2px 2px #0003}.colorpicker .colorpicker-body .information{box-sizing:border-box;position:relative}.colorpicker .colorpicker-body .information>input{bottom:20px;box-sizing:border-box;height:20px;padding:0 0 0 2px;position:absolute;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.colorpicker .colorpicker-body .information>input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information.hex>.information-item.hex,.colorpicker .colorpicker-body .information.hsl>.information-item.hsl,.colorpicker .colorpicker-body .information.rgb>.information-item.rgb{display:flex}.colorpicker .colorpicker-body .information>.information-item{box-sizing:border-box;display:none;margin-right:40px;padding:0 5px 0 9px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field{box-sizing:border-box;display:block;flex:1;padding:3px 1px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field>.title{color:#a9a9a9;padding-top:2px;text-align:center}.colorpicker .colorpicker-body .information>.information-item>.input-field input{border:1px solid #cbcbcb;border-radius:2px;box-sizing:border-box;color:#333;height:21px;padding:3px;text-align:center;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-l input[type=number],.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-s input[type=number]{padding-left:1px;padding-right:10px}.colorpicker .colorpicker-body .information>.information-item>.input-field .postfix{box-sizing:border-box;display:inline-block;height:21px;line-height:2;padding:2px;position:absolute;right:1px;text-align:center;top:2px}.colorpicker .colorpicker-body .information>.information-change{bottom:0;box-sizing:border-box;display:block;padding-top:5px;position:absolute;right:0;text-align:center;top:0;width:40px}.colorpicker .colorpicker-body .information>.information-change>.format-change-button{background:transparent;border:0;box-sizing:border-box;cursor:pointer;outline:none}.colorpicker .colorpicker-body .information>.title{color:#a3a3a3}.colorpicker .colorpicker-body .information>.input{color:#333}.colorpicker .colorpicker-body .colorsets{border-top:1px solid #e2e2e2}.colorpicker .colorpicker-body .colorsets>.menu{float:right;padding:10px 15px 10px 5px}.colorpicker .colorpicker-body .colorsets>.menu button{border:0;cursor:pointer;font-family:serif,sans-serif;font-weight:300;outline:none}.colorpicker .colorpicker-body .colorsets>.color-list{box-sizing:border-box;display:block;line-height:0;margin-right:30px;padding:10px 0 0 10px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item{background-size:contain;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-bottom:12px;margin-right:12px;overflow:hidden;position:relative;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item:hover{transform:scale(1.2)}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .color-view{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .add-color-item{color:#8e8e8e;cursor:pointer;display:inline-block;font-family:serif,sans-serif;font-weight:400;height:13px;line-height:1;margin-bottom:12px;margin-right:12px;text-align:center;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser{background-color:#00000080;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .05s ease-out}.colorpicker .colorpicker-body .color-chooser.open{opacity:1;pointer-events:all}.colorpicker .colorpicker-body .color-chooser .color-chooser-container{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:120px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header{border-bottom:1px solid rgba(0,0,0,.2);box-sizing:border-box;display:flex;height:34px;left:0;padding:3px 0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title{box-sizing:border-box;color:#000;flex:2;font-weight:700;margin:0;overflow:hidden;padding:5px 5px 5px 14px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items{cursor:pointer;display:block;flex:1;height:100%;line-height:2;padding-right:10px;text-align:right}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list{bottom:0;left:0;overflow:auto;position:absolute;right:0;top:34px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item{border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;padding:3px 0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover{background-color:#0000000d}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title{box-sizing:border-box;color:#000;flex:2;font-weight:400;margin:0;overflow:hidden;padding:5px 5px 5px 14px;pointer-events:none;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items{cursor:pointer;display:block;flex:3;height:100%;line-height:1.6;pointer-events:none}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;background-size:contain;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-right:10px;overflow:hidden;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view{height:100%;margin:0;padding:0;pointer-events:none;width:100%}.colorpicker.sketch{border-radius:5px}.colorpicker.sketch>.colorpicker-body .color-panel{box-sizing:border-box;height:150px}.colorpicker.sketch>.colorpicker-body>.control{margin-top:5px;padding:0}.colorpicker.sketch>.colorpicker-body>.control>.color,.colorpicker.sketch>.colorpicker-body>.control>.empty{background-color:#fff;border-radius:100%;box-sizing:border-box;height:26px;left:auto;position:absolute;right:0;top:1px;width:26px}.colorpicker.sketch>.colorpicker-body>.control>.color{box-shadow:inset 0 0 1px #00000080}.colorpicker.sketch>.colorpicker-body>.control>.hue{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.hue>.hue-container{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control>.opacity{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container,.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container .color-bar{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control .drag-bar,.colorpicker.sketch>.colorpicker-body>.control .drag-bar2{background-color:#fff;border:1px solid #fff;border-radius:50%;bottom:1px!important;box-shadow:0 0 1px #00000080;height:12px;left:0;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker.sketch>.colorpicker-body>.information{margin-top:5px}.colorpicker.sketch>.colorpicker-body>.information .information-change{display:none}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.rgb{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.hsl{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hex{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hsl,.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.rgb{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.hsl{display:inherit}.colorpicker.sketch>.colorpicker-body>.information .information-item{display:inline-flex!important;margin-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title{color:#000;cursor:pointer}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title:hover{font-weight:700}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field:last-child:not(:first-child){padding-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item.hex{padding-left:0;padding-right:0;width:70px}.colorpicker.sketch>.colorpicker-body>.information .information-item.rgb{padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.information .information-item.hsl{display:none;padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.colorsets>.menu{display:none}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list{margin-right:0;padding-right:12px}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list .color-item{border-radius:3px;height:16px;margin-bottom:10px;margin-right:9px;width:16px}.colorsets-contextmenu{background-color:#ececec;border:1px solid #ccc;border-radius:6px;display:none;list-style:none;padding:4px 0;position:fixed}.colorsets-contextmenu.show{display:inline-block}.colorsets-contextmenu .elf--menu-item{cursor:default;padding:2px 20px}.colorsets-contextmenu .elf--menu-item:hover{background-color:#5ea3fb;color:#fff}.colorsets-contextmenu.small .elf--menu-item.small-hide{display:none}.elf-studio{--elf--editor-ruler-size:20px;bottom:0;box-sizing:border-box;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;font-size:11px;margin:0;padding:0;right:0}.elf-studio *,.elf-studio :after,.elf-studio :before{-webkit-overflow-scrolling:touch;box-sizing:border-box}.elf-studio.ua-window .scrollbar::-webkit-scrollbar{background-color:#aaa;height:8px;width:5px}.elf-studio.ua-window .scrollbar::-webkit-scrollbar-thumb{background:#000}.elf-studio[data-theme=dark]{--elf--range-thumb-color:#228be6;--elf--range-track-color:#616161;--elf--range-thumb-border-color:rgba(0,0,0,.8);--elf--input-background-color:#343a40;--elf--input-inactive-color:#495057;--elf--input-border-color:#adb5bd;--elf--input-font-color:#f8f9fa;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#495057;--elf--selection-tool-border-color:#3a89f0;--elf--selected-color:#228be6;--elf--selected-color-2:#1864ab;--elf--selected-hover-color:#74c0fc;--elf--selected-border-color:#1c7ed6;--elf--layout-border-color:#212529;--elf--background-color:#343a40;--elf--toolbar-background-color:#212529;--elf--selected-background-color:#535353;--elf--font-color:#f8f9fa;--elf--disabled-font-color:#e9ecef;--elf--menu-item-title-font-color:#e9ecef;--elf--selected-font-color:#f8f9fa;--elf--divider-color:#616161;--elf--property-border-color:#0b0b0b;--elf--property-title-background-color:#161616;--elf--property-background-color:#22282c;--elf--list-item-font-color:#fff;--elf--list-item-selected-color:#03a9f4;--elf--list-item-disable-font-color:#828282;--elf--popup-background-color:#343a40;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(61,61,61,.5);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#000;--elf--path-segment-stroke-color:#0bf;--elf--timeline-gauge-background-color:#ee4b66;--elf--timeline-gauge-handle-color:#fffaaf;--elf--timeline-row-selected-color:rgba(67,92,181,.4);--elf--timeline-property-add-background-color:#666;--elf--guide-line-color:#ca7976;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#435cb5;--elf--canvas-background-color:#d3d3d3;--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.214);--elf--rotate-x-border-color:#6868f7;--elf--rotate-y-border-color:#70c570;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#f8f9fa;--elf--tab-toolbar-background-color:#212529;--elf--tab-font-color:#949494}.elf-studio[data-theme=light]{--elf--range-thumb-color:#609de2;--elf--range-track-color:#cfcfcf;--elf--range-thumb-border-color:#609de2;--elf--input-background-color:#fff;--elf--input-inactive-color:#f1f3f5;--elf--input-border-color:#ced4da;--elf--input-font-color:#333;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#868e96;--elf--selection-tool-border-color:#3a89f0;--elf--layout-border-color:#dee2e6;--elf--selected-color:#66baff;--elf--selected-color-2:#339af0;--elf--selected-hover-color:#d0ebff;--elf--selected-border-color:#609de2;--elf--background-color:#fff;--elf--toolbar-background-color:#2c2c2c;--elf--selected-background-color:#d8d8d8;--elf--font-color:#333;--elf--disabled-font-color:#c1c1c1;--elf--menu-item-title-font-color:#f8f9fa;--elf--selected-font-color:#fff;--elf--divider-color:#cfcfcf;--elf--property-border-color:#e5e5e5;--elf--property-title-background-color:#fff;--elf--property-background-color:#fff;--elf--list-item-font-color:#000;--elf--list-item-selected-color:#609de2;--elf--list-item-disable-font-color:#a3a3a3;--elf--popup-background-color:#fff;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(42,42,42,.478);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#5c5c5c;--elf--path-segment-stroke-color:#b7b7b7;--elf--timeline-gauge-background-color:#435cb5;--elf--timeline-gauge-handle-color:#748ff1;--elf--timeline-row-selected-color:#609de2;--elf--timeline-property-add-background-color:#747474;--elf--guide-line-color:#66baff;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#36457a;--elf--canvas-background-color:hsla(0,0%,7%,.1);--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.5);--elf--rotate-x-border-color:#643ac7;--elf--rotate-y-border-color:#8bdf8b;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#fff;--elf--tab-toolbar-background-color:#f6fafc;--elf--tab-font-color:#adadad}.elf-studio{height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.elf-studio [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf-studio input[type=email],.elf-studio input[type=number],.elf-studio input[type=text],.elf-studio textarea{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);color:var(--elf--input-font-color);outline:none}.elf-studio select{background-color:var(--elf--input-background-color);border-radius:3px;color:var(--elf--font-color);line-height:1.6;padding:0 4px}.elf-studio button,.elf-studio select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;vertical-align:middle}.elf-studio button{background-color:transparent;border-width:0;color:var(--elf--button-front-color);display:inline-block;padding:0}.elf-studio button svg{height:100%;width:100%}.elf-studio input[type=file].embed-file-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--elf--background-color);display:inline-block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .add-image-button{display:none}.elf-studio .icon svg,.elf-studio button svg,.elf-studio label svg{height:16px;width:16px}.elf-studio .icon svg circle,.elf-studio .icon svg ellipse,.elf-studio .icon svg line,.elf-studio .icon svg path,.elf-studio .icon svg polygon,.elf-studio .icon svg polyline,.elf-studio .icon svg rect,.elf-studio .icon svg text,.elf-studio .icon svg tspan,.elf-studio .icon svg use,.elf-studio button svg circle,.elf-studio button svg ellipse,.elf-studio button svg line,.elf-studio button svg path,.elf-studio button svg polygon,.elf-studio button svg polyline,.elf-studio button svg rect,.elf-studio button svg text,.elf-studio button svg tspan,.elf-studio button svg use,.elf-studio label svg circle,.elf-studio label svg ellipse,.elf-studio label svg line,.elf-studio label svg path,.elf-studio label svg polygon,.elf-studio label svg polyline,.elf-studio label svg rect,.elf-studio label svg text,.elf-studio label svg tspan,.elf-studio label svg use{fill:currentColor;stroke-width:0}.elf-studio .primary{background-color:var(--elf--selected-color);color:var(--elf--selected-text-color)}.elf-studio input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:3px 0;width:100%}.elf-studio input[type=range]:focus{outline:none}.elf-studio input[type=range]::-moz-focus-outer{border:0}.elf-studio input[type=range]::-webkit-slider-runnable-track{background:var(--elf--range-track-color);border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--elf--range-thumb-color);border:1px solid var(--elf--range-thumb-border-color);border-radius:100%;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-webkit-slider-runnable-track{background:var(--elf--range-track-color)}.elf-studio input[type=range]::-moz-range-track{background:var(--elf--range-track-color);border-radius:10px;box-shadow:inset 0 1px 3px #0000001f,inset 0 1px 2px #0000001f;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-moz-range-thumb{background:var(--elf--range-thumb-color);border:1px solid #000;border-radius:20px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]::-ms-track{background:var(--elf--range-track-color);border:1px solid #000;border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-ms-fill-lower{box-shadow:0 0 #000,0 0 #0d0d0d}.elf-studio input[type=range]::-ms-fill-lower,.elf-studio input[type=range]::-ms-fill-upper{background:var(--elf--range-thumb-color);border:0 solid #010101;border-radius:0}.elf-studio input[type=range]::-ms-thumb{background:var(--elf--range-thumb-color);border-radius:9px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-ms-fill-lower,.elf-studio input[type=range]:focus::-ms-fill-upper{background:var(--elf--range-thumb-color)}.elf-studio .colorpicker-layer .colorpicker{background-color:transparent;border:0;box-shadow:none;width:100%}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body{width:240px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .color-item{height:20px;margin:2px!important;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .add-color-item{height:20px;margin:0!important;padding:3px;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .wheel{background-color:transparent;border:0}.elf-studio .icons-group{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(6,40px);max-height:200px;overflow:auto}.elf-studio .icons-group .icon-item{display:inline-block;margin-bottom:2px;margin-right:2px;width:40px}.elf-studio .icons-group .icon-item .title{word-wrap:break-word;color:var(--elf--list-item-font-color);display:block;line-height:1;margin-top:5px;text-align:left;word-break:break-all}.elf-studio .icons-group .icon-item .icon-svg{background-color:var(--elf--input-background-color);border-radius:4px;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding:8px;width:40px}.elf-studio .icons-group .icon-item .icon-svg>svg{height:100%;width:100%}.elf-studio .icons-group .icon-item .icon-svg:hover{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf-studio [data-tooltip]{position:relative}.elf-studio [data-tooltip]:hover:after{opacity:1}.elf-studio [data-tooltip][data-tooltip-dy]:after{top:170%}.elf-studio [data-tooltip]:after{background-color:var(--elf--tooltip-background-color);border:1px solid var(--elf--border-color);border-radius:2px;box-sizing:border-box;color:var(--elf--tooltip-font-color);content:attr(data-tooltip);display:inline-block;font-size:11px;font-weight:400;left:50%;line-height:1.6;opacity:0;padding:4px 5px;pointer-events:none;position:absolute;right:auto;text-align:center;top:110%;transform:translate(-50%);transition:all .1s linear;white-space:nowrap;z-index:10000000}.elf-studio [data-tooltip][data-direction=right]:after{left:120%;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=left]:after{position:absolute;right:120%;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=bottom]:after{left:50%;position:absolute;right:auto;top:var(--elf--toggle-checkbox-tooltip-bottom-top,100%);transform:translate(-50%)}.elf-studio [data-tooltip][data-direction=top]:after{left:50%;position:absolute;right:auto;top:var(----elf--toggle-checkbox-tooltip-top,0);transform:translate(-50%) translateY(-150%)}.elf-studio [data-tooltip][data-direction="top left"]:after{left:0;position:absolute;right:auto;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="top right"]:after{left:auto;position:absolute;right:0;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="bottom right"]:after{left:auto;position:absolute;right:0;top:110%;transform:translate(0)}.elf-studio .animation-selector{grid-column-gap:5px;display:grid;grid-template-columns:100px 1fr 30px;width:100%}.elf-studio .animation-selector .timeline-object{display:inline-block}.elf-studio .animation-selector .timeline-object.selected{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-value-area{background-color:var(--elf--background-color);border-left:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;position:absolute;right:0;top:0;width:260px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding:0 20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content.padding-zero{padding-top:0}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input{padding-top:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area{display:inline-block;height:24px;position:relative;vertical-align:middle;width:120px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area>input{box-sizing:border-box;height:100%;padding:2px;width:100%}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area:after{bottom:100%;box-sizing:border-box;color:var(--elf--input-sub-font-color);content:"Hour:Minute:Second:Frame";left:0;padding-left:2px;position:absolute}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title,.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title>.tools{display:none}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2{display:block;text-align:right}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2 label{cursor:pointer}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2:hover{color:var(--elf--selected-color)}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button{text-align:right;width:100px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button svg{vertical-align:middle;width:16px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .title{color:var(--elf--font-color)}.elf-studio .timeline-value-area .timeline-value-editor .value{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;margin:0 auto;padding:5px;width:228px}.elf-studio .timeline-value-area .timeline-value-editor .value label{overflow:hidden;text-overflow:ellipsis}.elf-studio .timeline-value-area .timeline-value-editor .value .editor-area{min-height:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding-top:10px}.elf-studio .timeline-animation-area{background-color:var(--elf--background-color);border-right:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:200px}.elf-studio .timeline-animation-area .property{padding:0}.elf-studio .timeline-animation-area .property-title{height:39px!important;padding-bottom:0;padding-top:0}.elf-studio .timeline-animation-area .property-title label{padding-left:10px}.elf-studio .timeline-animation-area .property-body{padding:0!important}.elf-studio .timeline-area{bottom:0;left:200px;position:absolute;right:260px;top:0}.elf-studio .timeline-area .timeline-header{border-top:1px solid var(--elf--border-color);height:40px;left:0;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar{border-bottom:1px solid var(--elf--border-color);border-right:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar{padding:10px 5px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row{grid-column-gap:5px;display:grid;grid-template-columns:50px 1fr;margin-bottom:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row label{padding:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row .input input{min-width:50px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons{display:flex}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="0.5"] [data-value="0.5"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="1"] [data-value="1"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="2"] [data-value="2"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="3"] [data-value="3"]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons button{border:1px solid var(--elf--border-color);height:auto;min-width:50px;padding:2px 10px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar{bottom:0;left:270px;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration{height:5px;left:0;position:absolute;right:0;top:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-left{background-color:var(--elf--border-color);height:100%;left:15px;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-right{background-color:var(--elf--border-color);height:100%;position:absolute;right:15px;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider{background-color:var(--elf--border-color);height:100%;left:10px;position:absolute;right:10px;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .start{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;transform:translate(-100%);width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .end{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:100%;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .gauge{background-color:var(--elf--timeline-gauge-background-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view canvas{height:25px;left:0;position:absolute;top:15px;width:100%}.elf-studio .timeline-area .timeline-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf-studio .timeline-area .timeline-body .timeline-object-area{border-right:1px solid var(--elf--border-color);bottom:0;left:0;overflow:auto;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer .icon svg{transform:rotate(0)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);color:var(--elf--font-color);display:grid;grid-template-columns:20px 1fr 50px;height:24px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row[data-selected=true]{background-color:var(--elf--timeline-row-selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value{padding:5px 0;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value input{vertical-align:middle;width:100%}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon{padding-top:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon svg{height:16px;transform:rotate(90deg);transition:transform .2s ease;width:16px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .title{color:var(--elf--font-color);cursor:pointer;padding-top:5px;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools{padding-top:3px;text-align:right}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools>*{margin-right:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools .empty{margin-right:0}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property{grid-template-columns:20px 1fr .8fr 50px;overflow:hidden}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .title{padding-left:10px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add{background-color:var(--elf--border-color);box-shadow:0 0 0 1px var(--elf--border-color);cursor:pointer;display:inline-block;height:7px;transform:translate(-4px) translateY(0) rotate(45deg);vertical-align:middle;width:7px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 2px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view{bottom:0;left:270px;pointer-events:none;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view canvas{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area{bottom:0;left:270px;overflow:auto;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container{min-height:100%;outline:none;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container .drag-area{background-color:#3585bdb3;border:1px solid #7db4db;height:0;left:-10000px;pointer-events:none;position:absolute;right:-10000px;width:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe.collapsed .timeline-keyframe-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row{border-bottom:1px solid var(--elf--border-color);height:24px;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe{background-color:rgba(var(--elf--border-color),.5);display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow{display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back{display:inline-block;height:100%;position:absolute}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .offset-line{background-color:var(--elf--selected-color);display:inline-block;height:1px;position:absolute;top:50%;transform:translateY(-52%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .sub-offset{background-color:#0bc4e4;display:inline-block;height:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px}.elf-studio .timeline-play-control{grid-column-gap:5px;display:grid;grid-template-columns:188px 120px 120px 1fr;text-align:left}.elf-studio .timeline-play-control .speed-number{position:relative}.elf-studio .timeline-play-control .speed-number:after{content:"X";display:inline-block;position:absolute;right:14px;top:1px}.elf-studio .timeline-play-control .speed-number input{width:100%}.elf-studio .timeline-play-control label{color:var(--elf--font-color);padding-right:10px;vertical-align:middle}.elf-studio .timeline-play-control label svg{height:16px;vertical-align:middle;width:16px}.elf-studio .timeline-play-control .input{vertical-align:middle}.elf-studio .timeline-play-control .input input{height:20px;vertical-align:middle;width:100%}.elf-studio .timeline-play-control .row{display:flex}.elf-studio .timeline-play-control .row:first-child{text-align:center}.elf-studio .timeline-play-control button{display:inline-block;height:24px;vertical-align:middle;width:24px}.elf-studio .timeline-play-control button.play{color:var(--elf--selected-color)}.elf-studio .timeline-play-control button.pause{color:#6677d8;display:none}.elf-studio .timeline-play-control .play-buttons[data-status=play] .pause{display:inline-block}.elf-studio .timeline-play-control .play-buttons[data-status=play] .play{display:none}.elf-studio .timeline-play-control .play-buttons[data-status=pause] .play{display:inline-block}.elf-studio .timeline-play-control .direction-buttons{display:flex;padding-top:2px}.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate-reverse] [data-value=alternate-reverse],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate] [data-value=alternate],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=normal] [data-value=normal],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=reverse] [data-value=reverse]{background-color:var(--elf--selected-background-color);color:var(--elf--selected-color)}.elf-studio .timeline-play-control .direction-buttons button{border-radius:3px;height:20px;margin-right:5px;width:20px}.elf-studio .keyframe-time-control .time-manager{grid-column-gap:0;display:grid;grid-template-columns:20px 90px 70px 84px 10px}.elf-studio .keyframe-time-control .time-manager button{color:var(--elf--font-color)}.elf-studio .keyframe-time-control .time-manager button svg path{fill:currentColor}.elf-studio .keyframe-time-control .time-manager label{color:var(--elf--font-color);padding-right:0}.elf-studio .keyframe-time-control .time-manager label svg{height:16px;width:16px}.elf-studio .keyframe-time-control input[type=text]{width:80px}.elf-studio .logo-item{align-items:center;display:flex;flex-direction:row;justify-content:center}.elf-studio .logo-item label.logo{background-image:url(/assets/icon128.5ba89d6d.png);background-size:contain;border-radius:2px;display:inline-block;height:30px;width:30px}.elf-studio .feature-control.inspector{color:var(--elf--font-color);height:100%;position:relative}.elf-studio .feature-control.inspector>div{height:100%;position:relative}.elf-studio .feature-control.inspector>div .empty{height:100px}.elf-studio .feature-control.object-list{border-right:1px solid var(--elf--border-color);box-sizing:border-box;height:100%;position:relative}.elf-studio .feature-control.object-list .property{border:0;height:100%;margin:0;padding:0}.elf-studio .feature-control.object-list .property .property-body{padding:0}.elf-studio .feature-control .layer-tab{bottom:0;left:0;position:absolute;right:0;top:0}.elf-studio .feature-control .layer-tab .project-content>div{left:5px;position:absolute;right:5px}.elf-studio .feature-control .layer-tab .project-content>div:first-child{height:150px;top:0}.elf-studio .feature-control .layer-tab .project-content>div:not(:first-child){border-top:1px solid var(--elf--border-color)}.elf-studio .feature-control .layer-tab .project-content>div:last-child{bottom:0;height:auto!important;top:150px}.elf-studio .feature-control .layer-tab .object-items{height:100%;width:100%}.elf-studio .feature-control .layer-tab .object-items>div{height:100%;position:relative}.elf-studio .feature-control .layer-tab .assets{padding:3px}.elf-studio .feature-control .layer-tab .assets .property{height:auto}.elf--page-subeditor{display:inline-block;position:relative}.elf--button{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--button.has-label{grid-column-gap:2px;grid-template-columns:64px 1fr}.elf--button.has-label label{font-size:var(--elf--input-font-size);overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--button .area{display:block;height:100%}.elf--button .area button{background-color:var(--elf--input-inactive-color);border:0;border-radius:4px;color:var(--elf--input-font-color);display:inline-block;height:100%;width:100%}.elf--button .area button:hover{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button{height:24px;width:24px}.elf--toggle-button.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-button.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-button .area{background-color:var(--elf--input-inactive-color);display:block;height:100%;position:relative}.elf--toggle-button .area>div{display:none;height:100%;position:relative;width:100%}.elf--toggle-button .area>div.visible{display:inline-block}.elf--toggle-button .area>div.checked{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button .area button{align-items:center;box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;justify-content:center;width:100%;z-index:1}.elf--toggle-button .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.elf--toggle-button .area button svg{height:20px;width:20px}.elf--toggle-checkbox{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);overflow:hidden}.elf--toggle-checkbox:hover,.elf--toggle-checkbox:hover .area,.elf--toggle-checkbox:hover .area>*{border-color:var(--elf--input-border-color)}.elf--toggle-checkbox.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-checkbox.has-label label{overflow:hidden;padding:7px 0 2px 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-checkbox .area{--selected-button-size:50%;--selected-button-position:0%;--unit-count:2;display:block;display:grid;grid-template-columns:repeat(var(--unit-count),1fr);height:100%;position:relative}.elf--toggle-checkbox .area>div{border-right:1px solid transparent;display:inline-block;position:relative;width:100%}.elf--toggle-checkbox .area>div:last-child{border-right:0}.elf--toggle-checkbox .area:before{background-color:var(--elf--selected-color-2);box-shadow:0 0 #0000001a;content:"";display:block;height:100%;left:var(--selected-button-position);pointer-events:none;position:absolute;top:0;transition:all .2s ease-in-out;width:var(--selected-button-size);z-index:0}.elf--toggle-checkbox .area>*{z-index:1}.elf--toggle-checkbox .area button{box-sizing:border-box;color:var(--elf--font-color);display:inline-block;font-size:var(--elf--input-font-size);height:100%;padding:4px 8px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-checkbox .area button:hover:not(.checked){background-color:var(--elf--input-background-color)}.elf--toggle-checkbox .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.tab{bottom:0;color:var(--elf--font-color);left:0;position:absolute;right:0;top:0}.tab.number-tab.padding-5 .tab-content{padding:5px}.tab.number-tab.padding-10 .tab-content{padding:10px}.tab.number-tab.side-tab.side-tab-left>.tab-header{background-color:var(--elf--toolbar-background-color);bottom:0;box-sizing:border-box;display:flex;flex-direction:column;height:auto;left:0;overflow:visible;padding:0;position:absolute;text-align:center;top:0;width:60px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item{align-items:center;background-color:var(--elf--toolbar-background-color)!important;border-bottom:0!important;border:0;display:flex;flex:none;height:50px;justify-content:center;margin:0 auto;position:relative;width:60px;width:100%}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:before{border-radius:4px;content:"";display:inline-block;height:32px;left:50%;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:32px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:hover label{color:var(--elf--selected-font-color)!important}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected{color:var(--elf--selected-font-color);margin-left:0}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected:before{background-color:var(--elf--selected-color-2)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected label svg{color:var(--elf--selected-font-color)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.extra-item{flex:1 1 auto;overflow:auto}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label{display:inline-block;height:24px;left:50%;padding:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:24px;z-index:1}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg{height:24px;width:24px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg path,.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg use{fill:currentColor}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item .title{color:var(--elf--selected-font-color);overflow:hidden;padding-bottom:5px;text-overflow:ellipsis;white-space:wrap;word-break:break-all}.tab.number-tab.side-tab.side-tab-left>.tab-body{bottom:0;left:60px;right:0;top:0}.tab.number-tab>.tab-content{display:none}.tab.number-tab>.tab-content.selected{display:block}.tab.number-tab>.tab-body{top:34px}.tab>.tab-header{box-sizing:border-box;display:flex;height:40px;left:0;padding:0 10px;position:absolute;right:0;z-index:1}.tab>.tab-header.no-border>.tab-item{border:0!important}.tab>.tab-header>.tab-item{cursor:pointer;gap:10px;height:100%;margin-right:10px;padding:0;position:relative;text-align:center}.tab>.tab-header>.tab-item.selected label,.tab>.tab-header>.tab-item:hover label{color:var(--elf--font-color)}.tab>.tab-header>.tab-item.selected label{font-weight:600}.tab>.tab-header>.tab-item label{box-sizing:border-box;color:var(--elf--tab-font-color);display:inline-block;height:100%;line-height:24px;padding:12px 0;pointer-events:none;vertical-align:middle}.tab>.tab-header>.tab-item:first-child:hover label{left:10px}.tab>.tab-header>.tab-item:last-child:hover label{left:auto;right:10px}.tab>.tab-header>.tab-item:hover label{opacity:1}.tab>.tab-body{bottom:0;left:0;position:absolute;right:0;top:40px}.tab>.tab-body.no-border{border:0}.tab>.tab-body>.tab-content{bottom:0;display:none;left:0;overflow:auto;position:absolute;right:0;top:0}.tab>.tab-body>.tab-content.selected{display:block}.tab>.tab-body>.tab-content.selected.flex{display:flex;flex-direction:column}.tab>.tab-body>.tab-content .fixed{flex:none}.tab>.tab-body>.tab-content .scroll{flex:1 1 auto;overflow:auto;position:relative}.elf--blank-tool-bar{background-color:var(--elf--toolbar-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%;justify-content:space-between}.elf--blank-tool-bar>.logo-area{flex:none;height:100%;width:60px}.elf--blank-tool-bar>.logo-area>*{height:100%}.elf--blank-tool-bar>.toolbar-area{display:flex;flex:1 1 auto;flex-direction:row;justify-content:space-between}.elf--blank-tool-bar>.toolbar-area>*{align-items:center;display:inline-flex;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button,.elf--blank-tool-bar>.toolbar-area>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button .icon svg,.elf--blank-tool-bar>.toolbar-area>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item.selected,.elf--blank-tool-bar>.toolbar-area>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--blank-tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--blank-tool-bar>.toolbar-area>.elf--logo-area:hover,.elf--blank-tool-bar>.toolbar-area>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--toolbar-menu-item{align-items:center;display:flex;height:100%;justify-content:center;padding:0 10px!important;text-align:left;width:auto}.elf--toolbar-menu-item>.icon{display:inline-block;height:24px;width:24px}.elf--toolbar-menu-item>.icon svg{stroke:var(--elf--selected-font-color);height:100%;width:100%}.elf--toolbar-menu-item:hover{background-color:#000}.elf--toolbar-menu-item[data-selected=true]{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toolbar-renderer{display:flex;height:100%}.elf--toolbar-renderer>*{align-items:center;height:100%;justify-content:center;text-align:center;width:auto}.dropdown-menu{--elf--dropdown-menu-width:240px;--elf--dropdown-menu-dy:0px;align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:0 4px;position:relative}.dropdown-menu .dropdown-menu-item-list{border:1px solid var(--elf--border-color)}.dropdown-menu>.label{font-size:13px}.dropdown-menu>.icon{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 4px 0 8px;width:34px}.dropdown-menu>.icon:empty{display:none}.dropdown-menu>.icon svg{height:24px;pointer-events:none;width:24px}.dropdown-menu>.icon svg path{stroke-width:2;stroke:transparent;fill:none}.dropdown-menu .dropdown-arrow{fill:var(--elf--selected-font-color)}.dropdown-menu .dropdown-arrow:hover svg{transform:translateY(2px)}.dropdown-menu .dropdown-arrow svg{transition:all .1s ease-in-out;width:14px}.dropdown-menu[data-selected=true]{background-color:var(--elf--selected-color-2)}.dropdown-menu.opened:not([data-selected=true]),.dropdown-menu:hover:not([data-selected=true]){background-color:#000}.dropdown-menu.opened:not([data-selected=true]) .dropdown-arrow svg,.dropdown-menu:hover:not([data-selected=true]) .dropdown-arrow svg{transform:translateY(2px)}.dropdown-menu.opened>.dropdown-menu-arrow,.dropdown-menu.opened>ul{display:block}.dropdown-menu li{align-items:center;color:var(--elf--font-color);-moz-column-gap:4px;column-gap:4px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;position:relative}.dropdown-menu li .icon{flex:none}.dropdown-menu li .menu-item-text{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;vertical-align:middle}.dropdown-menu li .menu-item-text>*{line-height:1.6;vertical-align:middle}.dropdown-menu li .menu-item-text .shortcut{border:1px solid var(--elf--border-color);border-radius:2px;font-size:13px;padding:0 4px}.dropdown-menu li .menu-item-text .shortcut:empty{display:none}.dropdown-menu li>*{color:var(--elf--font-color);text-decoration:none}.dropdown-menu li[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu li[disabled]>*{color:var(--elf--disabled-font-color);pointer-events:none}.dropdown-menu li svg{color:var(--elf--border-color);height:20px;vertical-align:middle;width:20px}.dropdown-menu li svg path,.dropdown-menu li svg use{fill:currentColor}.dropdown-menu li.dropdown-divider{background-color:var(--elf--layout-border-color);box-sizing:border-box;display:block;height:1px;line-height:0px;margin-bottom:4px;margin-top:4px;padding:0}.dropdown-menu li.dropdown-divider>*{pointer-events:all}.dropdown-menu li.checkbox{align-items:center;display:flex}.dropdown-menu li.checkbox *{vertical-align:middle}.dropdown-menu li.custom{display:block}.dropdown-menu[data-direction=right]>ul{left:auto;right:0}.dropdown-menu[data-direction=right]>.dropdown-menu-arrow{left:auto;right:50%;transform:translate(50%) scale(1.5)}.dropdown-menu[data-direction=right] .dropdown-menu-list>ul{left:calc(-100% - 2px)}.dropdown-menu[data-direction=center]>ul{left:50%;transform:translate(-50%)}.dropdown-menu[data-direction=center]>.dropdown-menu-arrow{left:50%;transform:translate(-50%) scale(1.5)}.dropdown-menu.flat{padding:0}.dropdown-menu.flat>ul{position:relative;width:100%}.dropdown-menu ul{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);display:none;left:0;list-style-type:none;margin:0;padding:4px 0;position:absolute;top:calc(100% + 5px);width:var(--elf--dropdown-menu-width)}.dropdown-menu .dropdown-menu-list>ul{top:-11px}.dropdown-menu .dropdown-menu-arrow{box-sizing:border-box;display:none;height:6px;left:50%;position:absolute;top:calc(100% - 6px);transform:translate(-50%) scale(1.5);width:12px}.dropdown-menu .dropdown-menu-arrow svg{height:6px;width:8px}.dropdown-menu .dropdown-menu-arrow svg path,.dropdown-menu .dropdown-menu-arrow svg use{fill:var(--elf--background-color);stroke:var(--elf--border-color)}.dropdown-menu ul ul{left:100%;position:absolute;top:0}.dropdown-menu li:hover{color:var(--elf--font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider){background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>* svg{color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>.menu-item-text .shortcut{border-color:var(--elf--selected-font-color)}.dropdown-menu li:hover>ul{display:block}.blank-editor{background-color:var(--elf--background-color);height:100%;overflow:hidden;position:absolute;width:100%}.elf--select-editor{grid-column-gap:4px;border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);position:relative}.elf--select-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--select-editor:hover:not(.focused):not(.drag) .selected-value{display:grid;grid-template-columns:1fr 20px}.elf--select-editor.compact select{opacity:1}.elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:var(--elf--input-font-color);height:24px;opacity:0;vertical-align:middle;width:100%}.elf--select-editor .selected-value{background-color:var(--elf--input-background-color);box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;left:0;line-height:2;padding:0 2px;pointer-events:none;position:absolute;right:0;top:0}.elf--select-editor .selected-value svg{fill:currentColor;height:16px;width:16px}.elf--select-editor .selected-value .expand{align-items:center;box-sizing:border-box;display:flex;justify-content:flex-start;vertical-align:middle}.elf--select-editor .selected-value .value{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap}.elf--select-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--select-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--select-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 4px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-editor.has-label label svg{height:20px;width:20px}.elf--select-editor.has-label .editor-view{position:relative}.elf--select-editor.has-label .selected-value{height:100%;position:absolute;text-align:left}.elf--select-editor.has-label .selected-value select{height:24px;width:100%}.elf--box-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--box-shadow-editor .label{height:20px;margin-top:2px}.elf--box-shadow-editor .label.hide{display:none}.elf--box-shadow-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--box-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--box-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--box-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr 30px;text-align:center}.elf--box-shadow-editor .shadow-item .shadow-content{display:grid;grid-template-columns:60px 1fr 1fr;grid-template-rows:auto}.elf--box-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--box-shadow-editor .shadow-item.desc{color:var(--elf--font-color)}.elf--box-shadow-editor .shadow-item.desc .color{visibility:hidden}.elf--box-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--box-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--color-assets-editor{margin-top:10px;padding:4px 0}.elf--color-assets-editor .color-assets-head{grid-column-gap:5px;display:grid;grid-template-columns:1fr}.elf--color-assets-editor .color-assets-head label{display:inline-block;line-height:1.5;padding:4px 0;vertical-align:middle}.elf--color-assets-editor .color-list{grid-column-gap:10px;grid-row-gap:10px;display:grid;grid-template-columns:repeat(8,1fr);margin-top:10px}.elf--color-assets-editor .color-list .color-item{border-radius:4px;box-shadow:0 0 0 1px #ffffff1a;cursor:pointer;display:inline-block;height:16px;overflow:hidden;width:16px}.elf--color-assets-editor .color-list .color-item:hover{transform:scale(1.2)}.elf--color-assets-editor .color-list .color-item .preview,.elf--color-assets-editor .color-list .color-item .preview .color-view{height:100%;width:100%}.elf--color-single-editor{height:30px;text-align:center;width:100%}.elf--color-single-editor .preview{height:100%}.elf--color-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:1px solid var(--elf--input-border-color);height:100%}.elf--color-single-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.elf--color-view-editor{border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);text-align:center}.elf--color-view-editor input{outline:none}.elf--color-view-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--color-view-editor.focused .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor.has-label{grid-template-columns:70px 1fr}.elf--color-view-editor.has-label.compact{grid-template-columns:40px 1fr}.elf--color-view-editor.has-label.compact .color-code{grid-template-columns:26px 1fr 40px}.elf--color-view-editor.has-label label{line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--color-view-editor.mini .color-input{display:none}.elf--color-view-editor.mini .color-code{grid-template-columns:26px 50px}.elf--color-view-editor .color-code{grid-column-gap:2px;border:1px solid transparent;border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr 50px;overflow:hidden;text-transform:uppercase;vertical-align:middle}.elf--color-view-editor .color-code .preview{align-items:center;background-color:transparent;border-radius:2px;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--color-view-editor .color-code .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--input-border-color);box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;height:20px;overflow:hidden;position:relative;vertical-align:middle;width:20px}.elf--color-view-editor .color-code .preview .mini-view .color-view{box-shadow:0 0 0 .1px var(--elf--input-border-color)}.elf--color-view-editor .color-code input{background-color:transparent;border:0;border-radius:3px;font-size:11px;height:100%;padding:0 3px;text-transform:uppercase;width:100%}.component-editor{--column-gap:2px;--row-gap:2px;padding-bottom:5px}.component-editor .component-folder.close>label>svg{transform:rotate(0)}.component-editor .component-folder.close>ul{display:none}.component-editor .component-folder>label{cursor:pointer}.component-editor .component-folder>label>svg{fill:var(--elf--font-color);height:16px;transform:rotate(90deg);transition:all .1s ease-in-out;vertical-align:middle;width:16px}.component-editor .component-folder>ul{list-style:none;margin:0;padding:0}.component-editor .column{grid-column-gap:var(--column-gap);grid-row-gap:2px;display:grid;grid-template-columns:1fr}.component-editor .column .column-item{align-items:stretch;display:flex;justify-content:stretch}.component-editor .column .column-item>*{width:100%}.component-editor .column .column-item>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .column-1-1{grid-template-columns:1fr 1fr}.component-editor .column-1-1-1{grid-template-columns:1fr 1fr 1fr}.component-editor .column-1-2{grid-template-columns:1fr 2fr}.component-editor .column-1-2-3{grid-template-columns:1fr 3fr}.component-editor .column-1-1-1-1{grid-template-columns:1fr 1fr 1fr 1fr}.component-editor .column-2{grid-template-columns:1fr 1fr}.component-editor .column-2-1{grid-template-columns:2fr 1fr}.component-editor .column-2-1-1{grid-template-columns:2fr 1fr 1fr}.component-editor .column-3-1{grid-template-columns:3fr 1fr}.component-editor .column-3-1-1{grid-template-columns:3fr 1fr 1fr}.component-editor .column-3-2-1{grid-template-columns:3fr 2fr 1fr}.component-editor>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .component-item{margin-bottom:5px}.elf--css-property-editor{display:grid;grid-template-columns:1fr!important;margin-bottom:5px;margin-top:10px}.elf--css-property-editor.hide-refresh .css-property-item .title-2,.elf--css-property-editor.hide-title .css-property-item>.title label,.elf--css-property-editor.hide-title>.title{display:none}.elf--css-property-editor .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--css-property-editor .title .tools{text-align:right}.elf--css-property-editor .title .tools select{display:inline-block;width:130px!important}.elf--css-property-editor>.title-2{display:none;text-align:right}.elf--css-property-editor .css-property-item{border:1px solid var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;margin-top:5px;padding:2px}.elf--css-property-editor .css-property-item>.title{background-color:transparent;border-radius:3px;color:var(--elf--selected-color);font-weight:900;grid-template-columns:1fr 30px;margin-bottom:2px;padding:3px 0}.elf--css-property-editor .css-property-item .value-editor{padding:2px}.elf--css-property-editor .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--css-property-editor .input.grid-1{grid-template-columns:1fr}.elf--css-property-editor .input.grid-2{grid-template-columns:3fr 1fr}.elf--cubic-bezier-editor{height:200px;margin:0 auto;position:relative;width:220px}.elf--cubic-bezier-editor .bezier{background-color:var(--elf--background-color);box-shadow:0 0 0 1px var(--elf--border-color);height:150px;left:60px;position:absolute;top:30px;width:150px}.elf--cubic-bezier-editor .bezier .bezier-canvas{pointer-events:none}.elf--cubic-bezier-editor .bezier .control{bottom:0;left:0;position:absolute;right:0;top:0}.elf--cubic-bezier-editor .bezier .control .pointer1,.elf--cubic-bezier-editor .bezier .control .pointer2{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);border-radius:100%;cursor:pointer;height:9px;position:absolute;transform:translate(-50%) translateY(-50%);width:9px}.elf--cubic-bezier-editor .animation{height:20px;left:0;position:absolute;right:0;text-align:center;top:0}.elf--cubic-bezier-editor .animation .animation-canvas{cursor:pointer;height:100%;position:relative;width:100%}.elf--cubic-bezier-editor .item-list{bottom:20px;left:0;padding-right:0;position:absolute;top:30px;width:50px}.elf--cubic-bezier-editor .item-list[data-selected-value=ease-in] .item[data-bezier=ease-in],.elf--cubic-bezier-editor .item-list[data-selected-value=ease-out] .item[data-bezier=ease-out],.elf--cubic-bezier-editor .item-list[data-selected-value=ease] .item[data-bezier=ease]{background-color:var(--elf--selected-color)}.elf--cubic-bezier-editor .item-list .item{border-radius:2px;cursor:pointer;height:40px;margin-bottom:5px;overflow:hidden;position:relative;width:40px}.elf--cubic-bezier-editor .item-list .item:not(:first-child){border-top:0}.elf--cubic-bezier-editor .item-list .item.selected{background-color:#0ab}.elf--cubic-bezier-editor .item-list .item .item-canvas{background-color:#000;border-radius:2px;height:38px;left:1px;position:absolute;top:1px;width:38px}.elf--cubic-bezier-editor .predefined{bottom:0;display:grid;grid-template-columns:30px 1fr 30px;height:20px;left:0;position:absolute;right:0;text-align:center}.elf--cubic-bezier-editor .predefined .left,.elf--cubic-bezier-editor .predefined .right{color:var(--elf--font-color);cursor:pointer;font-weight:700;vertical-align:middle}.elf--cubic-bezier-editor .predefined .left svg path,.elf--cubic-bezier-editor .predefined .right svg path{fill:currentColor}.elf--cubic-bezier-editor .predefined .predefined-text{color:var(--elf--font-color);padding:4px;vertical-align:middle}.elf--direction-editor .direction-item{display:grid;grid-template-columns:62px 1fr}.elf--direction-editor .direction-item.full{grid-template-columns:1fr}.elf--direction-editor .radius-selector{display:grid;grid-template-columns:1fr 1fr}.elf--direction-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--direction-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--direction-editor .radius-selector button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;color:#ccc;cursor:pointer;display:inline-block;flex:none;height:20px;margin-right:2px;outline:none;padding:0;vertical-align:middle;width:20px}.elf--direction-editor .radius-selector button svg{height:100%;width:100%}.elf--filter-editor .label{height:20px;margin-top:2px}.elf--filter-editor .label.hide{display:none}.elf--filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--filter-editor .tools select{display:inline-block;width:100px!important}.elf--filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;padding:0 10px;width:100%}.elf--filter-editor .filter-list .filter-item{display:block;margin-top:5px}.elf--filter-editor .filter-list .filter-item:last-child{margin-bottom:5px}.elf--filter-editor .filter-list .filter-item>.title{display:grid;grid-template-columns:20px 1fr 30px}.elf--filter-editor .filter-list .filter-item>.title>.sub-title{align-items:center;display:flex;justify-content:flex-start}.elf--filter-editor .filter-list .filter-item>.title>label{align-items:center;cursor:move;display:flex;justify-content:center;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--filter-editor .filter-list .filter-item>.title .svg-filter-edit{cursor:pointer}.elf--filter-editor .filter-list .filter-item>.title .filter-menu{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:4px 0;text-align:right}.elf--filter-editor .filter-list .filter-item>.title .filter-menu:hover{background-color:var(--elf--input-inactive-color)}.elf--filter-editor .filter-list .filter-item .filter-ui-list{padding-left:20px;pointer-events:all}.elf--filter-editor .filter-list .filter-item .filter-ui{vertical-align:middle}.elf--filter-editor .filter-list .filter-item .filter-ui label{color:var(--elf--font-color)}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--gradient-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--gradient-editor .tools{padding:4px 0}.elf--gradient-editor [data-editor],.elf--gradient-editor[data-selected-editor=static-gradient]{display:none}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--gradient-editor[data-selected-editor=image-resource] .drag-pointer,.elf--gradient-editor[data-selected-editor=image-resource] .preset-position,.elf--gradient-editor[data-selected-editor=image-resource] .sub-editor,.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--gradient-editor .sub-editor{padding:0}.elf--gradient-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--gradient-editor .hue,.elf--gradient-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--gradient-editor .hue{pointer-events:none}.elf--gradient-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--gradient-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--gradient-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--gradient-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--gradient-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--gradient-editor .hue .step-list .step.selected .color-view span{display:block}.elf--gradient-editor .hue .step-list .step[data-cut=true] .arrow{top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--gradient-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--gradient-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--gradient-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step .arrow,.elf--gradient-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--gradient-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--list-view-editor{display:grid;grid-template-columns:repeat(1,1fr);margin-top:10px;max-height:500px;position:relative}.elf--list-view-editor[data-column="0"]{grid-template-columns:repeat(0,1fr)}.elf--list-view-editor[data-column="1"]{grid-template-columns:repeat(1,1fr)}.elf--list-view-editor[data-column="2"]{grid-template-columns:repeat(2,1fr)}.elf--list-view-editor[data-column="3"]{grid-template-columns:repeat(3,1fr)}.elf--list-view-editor[data-column="4"]{grid-template-columns:repeat(4,1fr)}.elf--list-view-editor[data-column="5"]{grid-template-columns:repeat(5,1fr)}.elf--list-view-editor[data-column="6"]{grid-template-columns:repeat(6,1fr)}.elf--list-view-editor[data-column="7"]{grid-template-columns:repeat(7,1fr)}.elf--list-view-editor[data-column="8"]{grid-template-columns:repeat(8,1fr)}.elf--list-view-editor[data-column="9"]{grid-template-columns:repeat(9,1fr)}.elf--list-view-editor .list-view-item.selected{background-color:var(--elf--selected-color)}.elf--list-view-editor .list-view-item.selected svg circle,.elf--list-view-editor .list-view-item.selected svg path,.elf--list-view-editor .list-view-item.selected svg rect{fill:var(--elf--selected-font-color)}.elf--list-view-editor .list-view-item svg{width:100%}.elf--list-view-editor .list-view-item svg circle,.elf--list-view-editor .list-view-item svg path,.elf--list-view-editor .list-view-item svg rect{fill:var(--elf--font-color)}.elf--input-range-editor{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--input-range-editor.disabled label{color:var(--elf--selected-color)}.elf--input-range-editor.disabled>*{pointer-events:none}.elf--input-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--input-range-editor.focused{box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--input-range-editor.drag,.elf--input-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--input-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--input-range-editor.has-label{grid-template-columns:70px 1fr}.elf--input-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--input-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--input-range-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr 40px}.elf--input-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--input-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 4px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--input-range-editor.has-label label svg{height:24px;vertical-align:middle;width:24px}.elf--input-range-editor.has-label.block{display:block}.elf--input-range-editor.has-label.block label{color:#000000b3;display:block}.elf--input-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--input-range-editor.is-removable .remove{display:inline-block}.elf--input-range-editor .remove,.elf--input-range-editor .type-button{display:none}.elf--input-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--input-range-editor .range--editor-type .area{border-radius:3px;display:grid;grid-template-columns:1fr 40px;height:100%}.elf--input-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--input-range-editor .range--editor-type .area input,.elf--input-range-editor .range--editor-type .area select{font-size:11px;width:100%}.elf--input-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;padding-left:2px;vertical-align:middle;width:100%}.elf--input-range-editor .range--editor-type .area .elf--select-editor{border-left:1px solid var(--elf--input-range-border-color);height:calc(var(--elf--input-height) - 2px)}.elf--input-range-editor .range--editor-type .area .elf--select-editor:hover{border:0!important;box-shadow:none!important}.elf--input-range-editor .range--editor-type .area .elf--select-editor select{background-color:transparent;border:0;color:var(--elf--input-sub-font-color);height:24px}.elf--input-range-editor .range--editor-type .area .unit{display:inline-block;line-height:2;vertical-align:middle}.elf--range--editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--range--editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--range--editor.has-label.compact{grid-template-columns:30px 1fr}.elf--range--editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--range--editor.has-label.block{height:auto}.elf--range--editor.has-label.block>label{display:block}.elf--range--editor.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--range--editor.has-label.block{display:block}.elf--range--editor.has-label.block label{color:var(--elf--font-color);display:block}.elf--range--editor.is-removable{grid-template-columns:1fr 12px}.elf--range--editor.is-removable .remove{display:inline-block;margin-top:3px}.elf--range--editor .remove{display:none}.elf--range--editor .range--editor-type{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;height:100%;vertical-align:middle}.elf--range--editor .range--editor-type .area{border:1px solid transparent;border-radius:3px;display:grid;grid-template-columns:1fr 24px}.elf--range--editor .range--editor-type .area.focused{border:1px solid var(--elf--selected-color);border-radius:3px}.elf--range--editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--range--editor .range--editor-type .area input,.elf--range--editor .range--editor-type .area select{background-color:transparent;border:0;width:100%}.elf--range--editor .range--editor-type .area input[type=range]{width:95%}.elf--range--editor .range--editor-type .area input[type=number]{background-color:var(--elf--input-background-color);border:1px solid var(--elf--input-border-color);border-bottom-left-radius:3px;border-right:0;border-top-left-radius:3px;height:100%;padding:2px;text-align:left}.elf--range--editor .range--editor-type .area .elf--select-editor{background-color:var(--elf--input-background-color);border:0!important;border-radius:0 3px 3px 0;box-sizing:border-box;position:relative;text-align:right}.elf--range--editor .range--editor-type .area .elf--select-editor .selected-value{display:none}.elf--range--editor .range--editor-type .area .elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--elf--input-border-color);border-radius:0 3px 3px 0;border-left:0;color:var(--elf--input-sub-font-color);display:inline-block;height:24px;padding:0;position:absolute;right:0;text-align:center;width:24px}.elf--media-progress-editor>*{margin-bottom:2px}.elf--media-progress-editor .drag-area{background-image:linear-gradient(90deg,#2b2b2b 1px,transparent 1px 100%);background-position:0 1px;background-repeat:repeat-x;background-size:10px 8px;height:10px;margin:10px;padding:0 10px;position:relative}.elf--media-progress-editor .progress-bar{background-color:#2b2b2b;display:block;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--media-progress-editor .bar{height:2px;left:10%;transform:translateY(-50%);width:50%}.elf--media-progress-editor .bar,.elf--media-progress-editor .drag-item{background-color:var(--elf--selected-color);display:inline-block;position:absolute;top:50%}.elf--media-progress-editor .drag-item{border-radius:100%;cursor:pointer;height:8px;transform:translate(-50%,-50%);width:8px}.elf--media-progress-editor .drag-item.end{background-color:#ff0;box-shadow:0 0 3px #0000004d}.elf--number-input-editor{border:1px solid transparent;border-radius:1px;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);padding:4px}.elf--number-input-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--number-input-editor.drag{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--number-input-editor:hover:not(.focused):not(.drag){box-shadow:0 0 0 1px var(--elf--input-border-color)}.elf--number-input-editor.has-label{grid-template-columns:60px 1fr}.elf--number-input-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-input-editor.has-label.mini{grid-template-columns:10px 1fr}.elf--number-input-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-input-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr}.elf--number-input-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-input-editor.has-label label svg{height:20px;width:20px}.elf--number-input-editor.has-label.block,.elf--number-input-editor.has-label.block label{display:block}.elf--number-input-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-input-editor .range--editor-type .area{grid-column-gap:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-input-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-input-editor .range--editor-type .area input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;background-color:transparent;border:0;padding-left:2px;width:100%}.elf--number-input-editor .range--editor-type .area input::-webkit-inner-spin-button,.elf--number-input-editor .range--editor-type .area input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.elf--number-range-editor{grid-column-gap:4px;border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--number-range-editor.disabled label{color:var(--elf--selected-color)}.elf--number-range-editor.disabled>*{pointer-events:none}.elf--number-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--number-range-editor.drag,.elf--number-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--number-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--number-range-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--number-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--number-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-range-editor.has-label label svg{height:20px;vertical-align:middle;width:20px}.elf--number-range-editor.has-label.block{display:block;height:auto}.elf--number-range-editor.has-label.block label{display:block}.elf--number-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--number-range-editor.is-removable .remove{display:inline-block}.elf--number-range-editor .remove{display:none}.elf--number-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-range-editor .range--editor-type .area{grid-column-gap:4px;border-radius:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-range-editor .range--editor-type .area input{height:100%;width:100%}.elf--number-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;vertical-align:middle}.elf--path-editor{--line-color:var(--elf--border-color);background-color:transparent;background-image:linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent);background-position:0 0,0 0,100% 0,0 100%;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:10% 100%,100% 10%,1px 100%,100% 1px;cursor:crosshair;margin:10px;min-height:100px;min-width:100px;position:relative}.elf--path-editor .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor .path-container:not(.modify) path.object,.elf--path-editor .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor .path-container.split-panel{pointer-events:none}.elf--path-editor .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor .path-container.path{cursor:crosshair}.elf--path-editor .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor .path-container.alt svg circle,.elf--path-editor .path-container.segment-move{cursor:move}.elf--path-editor .path-container.transform svg .snap-path,.elf--path-editor .path-container.transform svg circle,.elf--path-editor .path-container.transform svg line,.elf--path-editor .path-container.transform svg rect,.elf--path-editor .path-container.transform svg text{display:none}.elf--path-editor .path-container.modify,.elf--path-editor .path-container.segment-move{cursor:default}.elf--path-editor .path-container.modify svg path.object,.elf--path-editor .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor .path-container.is-control svg path.path-area{display:none}.elf--path-editor .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor svg{height:100%;overflow:visible;width:100%}.elf--path-editor svg line{stroke-width:1;content-visibility:auto}.elf--path-editor svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);r:5;stroke-width:2}.elf--path-editor svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor svg path{fill:transparent;content-visibility:auto}.elf--path-editor svg path.path-area{stroke-width:0}.elf--path-editor svg path.path-area.selected,.elf--path-editor svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color)}.elf--path-editor svg path.guide,.elf--path-editor svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg path.segment{pointer-events:all}.elf--path-editor svg path.object{fill:transparent;stroke-width:1}.elf--path-editor svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-data-editor .segment-empty{grid-column-gap:2px;display:grid;grid-template-columns:30px 1fr}.elf--path-data-editor .segment-empty .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:center}.elf--path-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:50px 1fr;margin-bottom:4px}.elf--path-data-editor .segment.m{padding-top:10px}.elf--path-data-editor .segment .command{color:var(--elf--selected-color);cursor:pointer}.elf--path-data-editor .segment .command[data-toggle=false]{font-weight:700;opacity:.3}.elf--path-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--path-data-editor .segment .values span{text-align:center}.elf--path-data-editor .segment .values input{width:100%}.elf--polygon-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:1fr;margin-bottom:4px}.elf--polygon-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:right}.elf--polygon-data-editor .segment .values label{color:var(--elf--selected-color)}.elf--polygon-data-editor .segment .values input{color:var(--elf--font-color);width:80px}.elf--select-icon-editor{border:1px solid transparent;display:grid;height:24px}.elf--select-icon-editor:hover,.elf--select-icon-editor:hover .items>div{border-color:var(--elf--input-border-color)}.elf--select-icon-editor.has-label{grid-template-columns:70px 1fr}.elf--select-icon-editor.has-label label{overflow:hidden;padding:6px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-icon-editor .items{background-color:transparent;border-radius:3px;box-sizing:border-box;cursor:pointer;display:flex;height:100%;line-height:1;outline:none}.elf--select-icon-editor .items>.select-icon-item{align-items:center;border-right:1px solid transparent;box-sizing:border-box;color:var(--elf--font-color);display:flex;flex:none;height:24px;justify-content:center;line-height:1.4;position:relative;text-transform:uppercase;white-space:pre-wrap;width:24px;word-break:break-all}.elf--select-icon-editor .items>.select-icon-item:last-child{border-right:0}.elf--select-icon-editor .items>.select-icon-item:hover{background-color:var(--elf--input-inactive-color)}.elf--select-icon-editor .items>.select-icon-item svg{height:24px;width:24px}.elf--select-icon-editor .items>.select-icon-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--select-icon-editor .items>.select-icon-item.icon{padding:3px 2px}.elf--select-icon-editor .items>.select-icon-item[data-value=""]{max-width:20px}.elf--select-icon-editor .items>.select-icon-item[data-value=none]{text-transform:none;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=uppercase]{text-transform:uppercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=lowercase]{text-transform:lowercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=capitalize]{text-transform:capitalize;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=full-width]{text-transform:full-width;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=underline]{text-decoration:underline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=overline]{text-decoration:overline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=line-through]{text-decoration:line-through;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=normal]{font-style:normal;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=italic]{font-style:italic;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=oblique]{font-style:oblique;vertical-align:middle}.elf--select-icon-editor .tools{padding:4px 0;text-align:right;vertical-align:middle}.elf--stroke-dasharray-editor{padding:4px 0;position:relative}.elf--stroke-dasharray-editor .dasharray-item{border-bottom:1px solid var(--elf--border-color);-moz-column-gap:2px;column-gap:2px;display:flex;margin-right:4px;position:relative}.elf--stroke-dasharray-editor .dasharray-item>*{align-items:center;display:flex;height:100%;justify-content:flex-start}.elf--stroke-dasharray-editor .dasharray-item>* input{width:20px!important}.elf--stroke-dasharray-editor .dasharray-item>button svg{height:10px;width:10px}.elf--stroke-dasharray-editor .dash-list{display:flex;flex-direction:row;flex-wrap:wrap}.elf--stroke-dasharray-editor .dash-sample-list{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);display:none;height:100px;overflow:auto;position:absolute;top:30px;width:100px;z-index:10}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample{cursor:pointer;height:20px}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample:hover{background-color:var(--elf--input-inactive-color)}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample svg line{stroke:var(--elf--font-color)}.elf--stroke-dasharray-editor>.tools.has-label{display:grid;grid-template-columns:70px 1fr}.elf--stroke-dasharray-editor>.tools.has-label .buttons{align-items:center;display:flex;justify-content:flex-start;padding-left:4px;text-align:left}.elf--stroke-dasharray-editor>.tools label{align-items:center;cursor:pointer;display:flex;justify-content:flex-start;text-align:left;vertical-align:middle}.elf--stroke-dasharray-editor>.tools label:hover{font-weight:700}.elf--text-area-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-area-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-area-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-area-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--text-shadow-editor .label{height:20px}.elf--text-shadow-editor .label.hide{display:none}.elf--text-shadow-editor .label label{padding:2px 6px 2px 0;vertical-align:middle}.elf--text-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--text-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--text-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:18px 1.5fr 1fr 1fr 1fr 30px;text-align:center}.elf--text-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--text-shadow-editor .shadow-item.desc{color:var(--elf--input-font-color)}.elf--text-shadow-editor .shadow-item.desc>*{text-align:left}.elf--text-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--text-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--var-editor{grid-template-columns:1fr!important}.elf--var-editor .label{height:20px;margin-top:2px}.elf--var-editor .label.hide{display:none}.elf--var-editor .label label{padding-left:5px;vertical-align:middle}.elf--var-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--var-editor .var-item{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr 30px;height:24px;margin-bottom:5px;margin-top:5px;text-align:center}.elf--var-editor .var-item>div input{height:100%;width:100%}.elf--var-editor .var-item>div input::-moz-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input:-ms-input-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input::placeholder{color:#9e9e9e}.elf--var-editor .var-item .tools{text-align:right}.elf--context-menu-manger{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--context-menu-manger>*{pointer-events:auto}.elf--default-layout,.elf--default-layout-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--default-layout{display:flex;flex-direction:column}.elf--default-layout .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.elf--default-layout .layout-bottom{box-sizing:border-box;display:flex;flex:none;height:20px;position:relative;z-index:10000}.elf--default-layout .layout-middle{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.elf--default-layout .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:all .05s linear;width:4px;z-index:1}.elf--default-layout .layout-middle>.splitter.selected,.elf--default-layout .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.elf--default-layout .layout-middle>.toggleLeft{left:340px}.elf--default-layout .layout-middle>.toggleRight{right:280px}.elf--default-layout .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:flex;flex:none;flex-direction:column;position:relative;transition:width .05s linear;width:340px}.elf--default-layout .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:flex;flex:none;flex-direction:column;overflow:auto;position:relative;transition:width .05s linear;width:280px;z-index:100}.elf--default-layout .layout-middle .layout-right.closed{width:10px!important}.elf--default-layout .layout-middle .layout-body{flex:1 1 auto;position:relative}.elf--popup-manager{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:99999}.elf--popup-manager>*{pointer-events:all}.elf--notification-view{display:inline-block;position:absolute;right:10px;top:10px;z-index:10000}.elf--notification-view .item{border-radius:4px;color:#fff;margin-bottom:10px;min-width:300px;opacity:1;padding:10px 20px;position:relative;transition:opacity 10s linear}.elf--notification-view .item .description{padding-top:10px}.elf--notification-view .item .icon{display:inline-block;position:absolute;right:10px;top:10px}.elf--notification-view .item .icon svg path{fill:currentColor}.elf--notification-view .item.alert{background-color:#e45050de}.elf--notification-view .item.alert .title{color:#fff;font-weight:700}.elf--notification-view .item.alert .description{color:#fff}.elf--window-background{background-color:var(--elf--window-background-color);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:10000}.elf--window-background .window{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);box-shadow:0 0 1px 0 var(--elf--border-color);color:var(--elf--font-color);height:200px;left:50%;padding:14px;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px;z-index:1000}.elf--window-background .window .window-title{border-bottom:1px solid var(--elf--border-color);display:flex;font-size:15px;font-weight:700;height:40px;left:0;margin-bottom:10px;padding:10px;pointer-events:all;position:absolute;right:0;top:0}.elf--window-background .window .window-title>*{flex:1 1 auto}.elf--window-background .window .window-title .tools{text-align:right}.elf--window-background .window .window-title label{cursor:move}.elf--window-background .window .window-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf--export-window{height:80%!important;width:80%!important}.elf--export-window pre{border:1px solid var(--elf--border-color);height:100%;margin:0 10px;overflow:auto;padding:10px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf--project-window{background-color:var(--elf--background-color);height:100%!important;width:100%!important}.elf--project-window .project-container{grid-column-gap:2px;display:grid;grid-template-columns:300px 1fr;height:100%;position:relative;width:100%}.elf--project-window .project-container .project-menu{box-sizing:border-box;height:100%;overflow:auto;padding:20px;position:relative}.elf--project-window .project-container .project-list{background-color:var(--elf--window-background-color);box-sizing:border-box;height:100%;overflow:auto}.elf--shortcut-window{height:80%!important;width:600px!important}.elf--shortcut-window .window-body{overflow:auto}.elf--shortcut-window .list{padding:10px 20px}.elf--shortcut-window .list .item h2{padding-left:10px}.elf--shortcut-window .list .item .shortcut-view-item{display:grid;grid-template-columns:1fr 200px;margin-bottom:2px}.elf--shortcut-window .list .item .shortcut-view-item>*{border-bottom:1px solid var(--elf--border-color);border-right:0;padding:5px 10px;position:relative}.elf--shortcut-window .list .item .shortcut-view-item .title{padding:10px}.elf--shortcut-window .list .item .shortcut-view-item .title .description{color:var(--elf--font-color);opacity:.5}.elf--shortcut-window .list .item .shortcut-view-item .os-item{text-align:right}.elf--shortcut-window .list .item .shortcut-view-item .os-item span{border:1px solid var(--elf--font-color);box-sizing:border-box;display:inline-block;margin:0 2px;padding:4px 6px}.design-editor{background-color:var(--elf--background-color);height:100%;overflow:hidden;position:absolute;width:100%}.elf--context-menu-renderer>*{display:block!important;width:100%}.elf--context-menu-renderer .dropdown-menu{height:100%}.elf--context-menu-renderer .elf--toolbar-menu-item:hover{background-color:var(--elf--selected-color);color:#fff!important}.elf--context-menu-view{border-radius:4px;display:none;left:0;min-width:240px;position:absolute;top:0;z-index:1000}.elf--alignment-item{grid-column-gap:2px;display:grid;grid-template-columns:repeat(8,1fr);height:24px;margin-bottom:10px;padding-top:8px}.elf--alignment-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;height:10px;width:20px}.elf--alignment-item button[data-no-title=true] .title{display:none}.elf--alignment-item .title{color:#999}.elf--alignment-item .icon{color:var(--elf--selected-color)!important;height:16px;margin:0 auto;width:16px}.elf--alignment-item .icon svg{height:100%;width:100%}.elf--property{--property-order:1000;border-bottom:1px solid var(--elf--property-border-color);box-shadow:0 0 2px #fff0;display:none;margin-bottom:4px;order:var(--property-order)}.elf--property:first-child{border-top:0}.elf--property.full{display:flex;flex-direction:column;height:100%}.elf--property.full.show{height:100%}.elf--property.full .property-title{flex:none}.elf--property.full .property-body{flex:1 1 auto;overflow:auto;padding-left:0;padding-right:0;position:relative}.elf--property.show{display:block}.elf--property.show>.property-title>label .icon{display:inline-block;transform:rotate(90deg)}.elf--property.show>.property-body{display:block}.elf--property>.property-title{align-items:center;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:flex;height:32px;justify-content:space-between;margin:8px;padding:8px;position:relative}.elf--property>.property-title.filter{grid-template-columns:1fr 110px}.elf--property>.property-title svg{height:16px;width:16px}.elf--property>.property-title label{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:1px;line-height:2;overflow:hidden;padding-left:2px;text-overflow:ellipsis;text-transform:uppercase;vertical-align:middle;white-space:nowrap}.elf--property>.property-title label .icon{display:inline-block;transition:all .1s linear}.elf--property>.property-title label.has-keyframe{padding-left:0}.elf--property>.property-title>.tools{flex:none;text-align:right;vertical-align:middle;white-space:nowrap}.elf--property>.property-title>.tools>*{flex:none}.elf--property>.property-body{box-sizing:border-box;display:none;margin:0 8px;padding:0 8px 8px;position:relative}.elf--property>.property-body:empty{display:none}.elf--property>.property-body .property-item:first-child{padding-top:0}.elf--property>.property-body .property-item:not(.has-label){background-color:#fff0}.elf--property>.property-body .property-item.animation-property-item{display:grid;grid-template-columns:1fr}.elf--property>.property-body .property-item.animation-property-item.has-label{grid-template-columns:80px 1fr}.elf--property>.property-body .property-item.animation-property-item.has-label .group{padding-left:12px;padding-top:5px;vertical-align:middle}.elf--property>.property-body .property-item.animation-property-item.full{display:block}.elf--property>.property-body .property-item.animation-property-item.full .group{padding-left:14px;vertical-align:middle}.elf--property>.property-body .property-item>label.label{background-color:var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;color:var(--elf--selected-font-color);display:block;padding:5px}.elf--property>.property-footer{padding:0 6px}.elf--property>.property-footer>div{margin-bottom:5px}.elf--property>.property-footer label{cursor:pointer;display:inline-block;padding-left:2px;padding-right:5px;vertical-align:middle;width:60px}.elf--animation-list{grid-template-columns:1fr!important}.elf--animation-list .animation-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0;text-align:center}.elf--animation-list .animation-item.selected{background-color:var(--elf--border-color)}.elf--animation-list .animation-item .name{padding:2px 0;text-align:left;vertical-align:middle}.elf--animation-list .animation-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;margin-top:3px;vertical-align:middle;width:100%}.elf--animation-list .animation-item .timing canvas{border-radius:3px}.elf--animation-list .animation-item .labels label{background-color:var(--elf--border-color);border-radius:2px;color:var(--elf--border-color);font-weight:700;padding:1px 2px;text-transform:uppercase}.elf--animation-list .animation-item .labels label small{color:var(--elf--font-color);text-transform:lowercase}.elf--animation-list .animation-item .labels label.play-state{background-color:transparent;cursor:pointer}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value]{color:var(--elf--font-color);display:none;vertical-align:middle}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value] svg{height:16px;width:16px}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value=pause]{color:red}.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=paused] [data-play-state-value=paused],.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=running] [data-play-state-value=running]{display:inline-block}.elf--animation-list .animation-item .tools{text-align:right;vertical-align:middle}.elf--animation-property-popup{width:220px}.elf--animation-property-popup .box>div{margin-bottom:5px}.elf--animation-property-popup .box label{text-align:left;vertical-align:middle}.elf--animation-property-popup .box .name{display:grid;grid-template-columns:60px 1fr}.elf--animation-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--animation-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--animation-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--popup{background-color:var(--elf--popup-background-color);border-radius:2px;box-shadow:0 1px 5px #00000080;color:var(--elf--font-color);display:none;position:absolute;z-index:1000}.elf--popup.compact .popup-body{padding:0 0 5px}.elf--popup .popup-title{display:flex;font-size:12px;font-weight:700;height:32px;margin-left:8px;margin-right:8px;margin-top:8px;padding:8px;pointer-events:all}.elf--popup .popup-title>*{flex:1 1 auto}.elf--popup .popup-title .tools{align-items:center;display:flex;justify-content:flex-end;padding-right:10px}.elf--popup .popup-title .tools button{background-color:transparent;border:0;cursor:pointer;padding:0}.elf--popup .popup-title .tools button svg{fill:var(--elf--font-color);height:16px;width:16px}.elf--popup .popup-title label{cursor:move}.elf--popup .popup-body{padding:8px 12px}.elf--popup .popup-body .popup-item{margin-bottom:5px;padding:2px 0}.elf--popup .popup-resizer{background-color:gray;bottom:0;cursor:se-resize;height:10px;position:absolute;right:0;width:10px}.elf--artboard-size-list .property-body{padding:0!important}.elf--artboard-size-list .artboard-size-item{border-top:1px solid var(--elf--border-color)}.elf--artboard-size-list .category{border-bottom:1px solid var(--elf--border-color);height:26px;line-height:2}.elf--artboard-size-list .category .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none}.elf--artboard-size-list .group-item{background-color:#ececec;border-bottom:1px solid var(--elf--border-color);height:24px;line-height:1.8}.elf--artboard-size-list .group-item .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none;text-transform:uppercase}.elf--artboard-size-list .device-item{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);cursor:pointer;display:grid;font-size:12px;grid-template-columns:1fr 1fr;height:26px;line-height:2.3}.elf--artboard-size-list .device-item .title{color:var(--elf--font-color);padding-left:20px;pointer-events:none}.elf--artboard-size-list .device-item .size{color:#bdbdbd;letter-spacing:2px;padding-right:10px;pointer-events:none;text-align:right}.elf--background-image-editor .label{height:20px;margin-top:2px}.elf--background-image-editor .label.hide{display:none}.elf--background-image-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--background-image-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--background-image-editor .fill-list{display:grid;font-size:12px;grid-template-columns:1fr}.elf--background-image-editor .fill-list .fill-item{-moz-column-gap:2px;column-gap:2px;display:grid;grid-template-columns:18px 26px 26px 1fr;margin-bottom:4px}.elf--background-image-editor .fill-list .fill-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item>div{align-items:center;display:flex;height:26px;justify-content:center}.elf--background-image-editor .fill-list .fill-item .gradient-info{color:var(--elf--font-color);display:grid;grid-template-columns:1fr 30px 30px 30px;width:100%}.elf--background-image-editor .fill-list .fill-item .gradient-info svg path{fill:currentColor}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools{align-items:center;display:flex;justify-content:center;text-align:right}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorcode,.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .opacity{display:none}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorsteps{display:block}.elf--background-image-editor .fill-list .fill-item .pattern{background-color:var(--elf--border-color)}.elf--background-image-editor .fill-list .fill-item .preview{align-items:center;box-shadow:0 0 0 1px #0000001a;cursor:pointer;display:flex;height:auto;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;display:block;height:26px;pointer-events:none;position:relative;width:26px}.elf--background-image-editor .fill-list .fill-item .preview .mini-view .color-view{border-radius:0;bottom:0;left:0;position:absolute;right:0;top:0}.elf--background-image-editor .fill-list .fill-item .fill-title{align-items:center;display:flex;justify-content:flex-start;padding-left:2px;pointer-events:none;position:relative;text-align:left}.elf--background-image-editor .fill-list .fill-item .fill-title svg{height:16px;vertical-align:middle;width:16px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]{color:var(--elf--font-color);padding-left:10px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]:after{border-right:4px double var(--elf--font-color);bottom:0;content:"";height:50%;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:4px}.elf--background-image-editor .fill-list .fill-item .colorcode input{width:100%}.elf--background-image-position-picker{width:180!important}.elf--background-image-position-picker .background-property>div{margin-bottom:10px}.elf--background-image-position-picker .popup-item{margin-bottom:5px}.elf--background-image-position-picker .grid{display:grid;grid-template-columns:60px 1fr}.elf--background-image-position-picker .grid-2{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr}.elf--background-image-position-picker .grid-2 label{padding-right:2px;text-align:left}.elf--background-image-position-picker .repeat-list{display:flex;gap:5px}.elf--background-image-position-picker .repeat-list button{background-color:#434b50;flex:1 1 auto;height:24px;width:24px}.elf--background-image-position-picker .repeat-list button[value=no-repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:50%;background-repeat:no-repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-x]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 8px;background-repeat:repeat-x;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-y]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:8px 10px;background-repeat:repeat-y;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=space]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:space;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=round]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:0 0;background-repeat:round;background-size:8px 8px}.elf--background-image-position-picker .repeat-list[data-value=no-repeat] button[value=no-repeat],.elf--background-image-position-picker .repeat-list[data-value=repeat-x] button[value=repeat-x],.elf--background-image-position-picker .repeat-list[data-value=repeat-y] button[value=repeat-y],.elf--background-image-position-picker .repeat-list[data-value=repeat] button[value=repeat],.elf--background-image-position-picker .repeat-list[data-value=round] button[value=round],.elf--background-image-position-picker .repeat-list[data-value=space] button[value=space]{background-color:var(--elf--selected-color);box-shadow:0 0 2px 2px var(--elf--selected-color)}.fill{align-items:center;display:flex;height:24px!important;justify-content:center;width:24px!important}.fill:hover{background-color:var(--elf--input-inactive-color)}.elf--background-position-editor{height:19px;text-align:center;width:26px}.elf--background-position-editor .preview{height:26px}.elf--background-position-editor .preview .mini-view{height:100%}.elf--background-position-editor .preview .mini-view .color-view{border-radius:3px;cursor:pointer;height:100%}.elf--border-editor .header{grid-column-gap:4px;display:grid;grid-template-columns:repeat(3,1fr) 24px;text-align:center;text-transform:uppercase}.elf--border-editor>.editor-area>div{margin-top:5px}.elf--border-editor>.editor-area>div:first-child{margin-top:0}.elf--border-editor>.editor-area>div>label{font-weight:700;padding:2px 0;text-shadow:0 0 2px var(--elf--border-color);text-transform:uppercase}.elf--border-editor .input-group{display:grid;grid-template-rows:repeat(3,1fr)}.elf--border-editor .input-field{grid-column-gap:4px;display:grid;grid-template-columns:1fr 3fr;vertical-align:middle}.elf--border-editor .input-field input{vertical-align:middle;width:100%}.elf--border-editor .input-field .input-ui{vertical-align:middle}.elf--border-value-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--border-value-editor label{padding:6px 4px 2px 0;text-align:left;vertical-align:middle}.elf--border-value-editor .editor-area{-moz-column-gap:10px;column-gap:10px;display:flex;flex-direction:row}.elf--border-radius-editor .border-radius-item{align-items:center;display:flex}.elf--border-radius-editor .border-radius-item>*{flex:1 1 auto}.elf--border-radius-editor .border-radius-item>.button{flex:none;height:24px;width:24px}.elf--border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--border-radius-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color-2);color:var(--elf--font-color)}.elf--border-radius-editor .radius-selector button{border-radius:3px;height:20px;margin:2px;width:20px}.elf--border-radius-editor .radius-setting-box{display:grid;grid-template-columns:1fr 30px;margin-bottom:5px}.elf--border-radius-editor .radius-setting-box>div{display:grid;grid-template-columns:1fr 1fr}.elf--box-model-item{grid-template-columns:1fr!important}.elf--box-model-item>div{height:150px;position:relative;width:100%}.elf--box-model-item>div .margin{border:1px dashed #aaa;bottom:5px;left:5px;padding:10px;position:absolute;right:5px;top:5px}.elf--box-model-item>div .margin:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .margin input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .margin [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .margin [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding{border:1px dashed #aaa;bottom:30px;left:55px;padding:20px 45px;position:absolute;right:55px;top:30px}.elf--box-model-item>div .padding:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .padding input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .padding [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .content{border:1px dashed #aaa;bottom:54px;left:105px;padding:10px 0;position:absolute;right:105px;top:54px}.elf--box-model-item>div .content:before{display:block;padding:5px 0;text-align:center}.box-shadow-samples{border:0;font-size:11px}.elf--clip-path-list{grid-template-columns:1fr!important}.elf--clip-path-list .clippath-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:20px 1fr 30px;height:30px;margin-bottom:5px}.elf--clip-path-list .clippath-item>label{align-items:center;cursor:move;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title{align-items:center;-moz-column-gap:10px;column-gap:10px;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title .name{padding:2px 0}.elf--clip-path-list .clippath-item .tools{align-items:center;display:flex;justify-content:center;text-align:right;vertical-align:middle}.elf--clip-path-list .clippath-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--clip-path-list .clippath-item .offset-list{height:30px;padding:0 10px}.elf--clip-path-list .clippath-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--clip-path-list .clippath-item .offset-list .container .offset{background-color:#000;border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--clip-path-list .clippath-item .offset-list .container .offset:hover:before{background-color:#4e3b3b;border-radius:3px;bottom:100%;color:#fff;content:attr(data-title);display:inline-block;left:50%;padding:1px 3px;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.elf--clippath-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back svg polygon{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .polygon .polygon-pointer{fill:#fff;r:5;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute}.elf--clippath-editor-view .polygon .polygon-line{cursor:copy;pointer-events:all}.elf--clippath-editor-view .polygon .polygon-line:hover{stroke-width:2;stroke:red}.elf--clippath-editor-view .polygon .polygon-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:20px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:20px}.elf--clippath-editor-view .inset .inset-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .inset .inset-back svg path{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .inset .inset-direction{background-color:#fff;height:14px;width:14px}.elf--clippath-editor-view .inset .inset-center,.elf--clippath-editor-view .inset .inset-direction{border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .inset .inset-center{border:2px solid #fff;height:20px;width:20px}.elf--clippath-editor-view .circle .circle-back{left:0;pointer-events:none;top:0}.elf--clippath-editor-view .circle .circle-back,.elf--clippath-editor-view .circle .circle-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .circle .circle-center{height:20px;pointer-events:all;width:20px}.elf--clippath-editor-view .circle .circle-radius{background-color:#fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:14px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:14px}.elf--clippath-editor-view .ellipse .ellipse-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--clippath-editor-view .ellipse .ellipse-back svg ellipse{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all}.elf--clippath-editor-view .ellipse .ellipse-center{border:2px solid #fff;border-radius:50%;height:20px;width:20px}.elf--clippath-editor-view .ellipse .ellipse-center,.elf--clippath-editor-view .ellipse .ellipse-radius{cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .ellipse .ellipse-radius{background-color:#fff;border-radius:50%;height:14px;width:14px}.elf--code-view-item{grid-template-columns:1fr!important;width:100%}.elf--code-view-item>div{max-width:100%;width:100%}.elf--code-view-item>div label{padding-left:10px}.elf--code-view-item>div pre{line-height:1.7;margin-top:0;padding:40px 0 20px 20px;position:relative;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-all}.elf--code-view-item>div pre:not(:last-child){border-bottom:1px solid var(--elf--border-color)}.elf--code-view-item>div pre:before{border:1px solid var(--elf--border-color);color:var(--elf--font-color);content:attr(title);display:inline-block;font-weight:700;left:0;margin-bottom:10px;padding:2px 4px;position:absolute;right:0;top:0}.elf--code-view-item>div pre .block{padding-left:20px;text-indent:-20px}.elf--code-view-item>div pre strong{color:var(--elf--font-color);font-weight:400;text-indent:-20px}.elf--code-view-item>div pre .value{color:#f16b16;text-indent:-20px}.elf--code-view-item>div pre .keyword{color:#20a471}.elf--code-view-item>div pre .char{color:#444}.elf--code-view-item>div pre .function{color:#725ee1}.elf--texture .pattern-list{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;padding:10px;row-gap:10px}.elf--texture .pattern-list .pattern-item{cursor:pointer;text-align:center}.elf--texture .pattern-list .pattern-item.selected .preview{background-color:var(--elf--selected-background-color)}.elf--texture .pattern-list .pattern-item:hover .preview{background-color:var(--elf--selected-color)}.elf--texture .pattern-list .pattern-item .preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;pointer-events:none;width:80px}.elf--texture .pattern-list .pattern-item .preview svg{height:100%;width:100%}.elf--export-property .export-item{grid-column-gap:2px;display:grid;grid-template-columns:60px 1fr;padding:10px 6px}.elf--export-property .export-item label{vertical-align:middle}.elf--export-property .export-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;text-align:left;vertical-align:middle;width:100%}.elf--export-property .export-item button svg{vertical-align:middle;width:16px}.elf--fill-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--fill-editor-view.dragging .area-line{pointer-events:none!important}.elf--fill-editor-view .gradient-editor-area{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--fill-editor-view .gradient-editor-area path{fill:transparent;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.start-end-line{stroke:#fff;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area rect{pointer-events:all}.elf--fill-editor-view .gradient-editor-area rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area circle{stroke-width:2;pointer-events:all}.elf--fill-editor-view .gradient-editor-area circle:hover{cursor:-webkit-grab;cursor:grab}.elf--fill-editor-view .gradient-editor-area circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--fill-editor-view .gradient-editor-area circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--fill-editor-view .gradient-editor-area circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--fill-editor-view .gradient-editor-area circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;filter:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area circle.point{fill:#fff;r:5}.elf--fill-editor-view .gradient-editor-area circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--fill-editor-view .gradient-editor-area circle.hover-colorstep{r:8;stroke:#fff;stroke-width:1;pointer-events:none}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--fill-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--fill-editor .tools{padding:4px 0}.elf--fill-editor [data-editor]{display:none}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--fill-editor[data-selected-editor=static-gradient]{display:none}.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageWidth],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageX],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageY],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternUnits],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternWidth]{display:block}.elf--fill-editor[data-selected-editor=image-resource] .preset-position,.elf--fill-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--fill-editor .sub-editor{padding:0}.elf--fill-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--fill-editor .hue,.elf--fill-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--fill-editor .hue{pointer-events:none}.elf--fill-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--fill-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--fill-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--fill-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--fill-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--fill-editor .hue .step-list .step.selected .color-view span{display:block}.elf--fill-editor .hue .step-list .step[data-cut=true] .arrow{top:100%}.elf--fill-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--fill-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--fill-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--fill-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--fill-editor .hue .step-list .step .arrow,.elf--fill-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--fill-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--gradient-picker-popup{grid-column-gap:10px;display:grid;grid-template-columns:1fr;margin-bottom:5px;width:224px}.elf--gradient-picker-popup>.box:first-child{margin-bottom:4px}.elf--gradient-picker-popup>.box>.colorpicker{display:block}.elf--gradient-picker-popup>.box>.assetpicker{display:none;min-height:310px}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.colorpicker{display:none}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.assetpicker{display:block}.elf--gradient-picker-popup .popup-item{margin-bottom:5px}.elf--gradient-picker-popup .grid-2{display:grid;grid-template-columns:60px 1fr}.elf--gradient-picker-popup .grid-2 label{padding-right:2px;text-align:left}.elf--gradient-picker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--gradient-picker-popup .colorpicker .color-panel{height:100px;margin-top:0}.elf--gradient-picker-popup .colorpicker input{border:0!important;border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--gradient-picker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--gradient-picker-popup .colorpicker .colorsets{border-top:0 solid var(--elf--border-color)!important}.elf--gradient-picker-popup .color-assets-editor{padding:4px 0!important}.elf--gradient-picker-popup .assetpicker{background-color:#e6e6e61a;position:relative}.elf--gradient-picker-popup .assetpicker .image-asset-picker{display:block;height:200px;overflow:auto;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list{grid-column-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item{background-color:rgba(var(--elf--font-color),.5);margin-bottom:2px}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview{border:1px solid var(--elf--border-color);border-radius:2px;cursor:pointer;height:80px;-o-object-fit:contain;object-fit:contain;position:relative;text-align:center;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview img{border:0;max-height:100%;max-width:100%;vertical-align:middle}.elf--fill-single-editor{border:1px solid transparent;box-sizing:border-box;cursor:pointer;height:var(--elf--input-height)}.elf--fill-single-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--fill-single-editor.focused .opacity-input{border-left:1px solid var(--elf--border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--fill-single-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--fill-single-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--fill-single-editor .area{grid-column-gap:2px;border-radius:4px;display:grid;grid-template-columns:24px 1fr;height:100%}.elf--fill-single-editor .preview{align-items:center;background-color:transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--fill-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--border-color);border-radius:2px;display:inline-block;height:20px;overflow:hidden;position:relative;width:20px}.elf--fill-single-editor .preview .mini-view .color-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf--fill-single-editor .colors{align-items:center;display:flex;justify-content:flex-start;line-height:2.2;margin-left:2px}.elf--fill-single-editor .colors.simple{display:none}.elf--fill-single-editor .colors .color{border:1px solid var(--elf--font-color);border-radius:100%;display:inline-block;height:14px;pointer-events:all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;vertical-align:middle;width:14px}.elf--fill-single-editor .colors .color:not(:first-child){margin-left:-2px}.elf--gradient-single-editor{height:26px!important;text-align:center;width:100%}.elf--gradient-single-editor .preview{height:26px!important;width:26px!important}.elf--gradient-single-editor .preview .mini-view{height:100%!important;width:100%!important}.elf--gradient-single-editor .preview .mini-view .color-view{background-size:cover;border-radius:3px;cursor:pointer;height:100%}.elf--gradient-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--gradient-editor-view.dragging .area-line{pointer-events:none!important}.elf--gradient-editor-view .gradient-rect{bottom:0;left:0;right:0;top:0}.elf--gradient-editor-view .center{background-color:var(--elf--selected-color-2);border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 2px rgb(43,43,43));height:10px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.elf--gradient-editor-view .gradient-rect{box-sizing:border-box;cursor:move;filter:drop-shadow(0 0 2px rgb(43,43,43));pointer-events:none;position:absolute}.elf--gradient-editor-view .gradient-rect svg{height:100%;width:100%}.elf--gradient-editor-view .gradient-rect svg path{fill:transparent;stroke:#fff;stroke-width:1;pointer-events:all}.elf--gradient-editor-view .resizer{background-color:#fff;border:1px solid var(--elf--selected-color);border-radius:100%;box-sizing:border-box;filter:drop-shadow(0 0 2px rgb(43,43,43));height:14px;position:absolute;transform:translate(-50%,-50%);width:14px}.elf--gradient-editor-view .resizer[data-direction=bottom-right]{cursor:nwse-resize;left:100%;top:100%}.elf--gradient-editor-view .gradient-angle{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-angle path{fill:transparent;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle path.stick{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.color-stick{pointer-events:none}.elf--gradient-editor-view .gradient-angle path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-angle path.start-end-line{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--gradient-editor-view .gradient-angle path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle rect{pointer-events:all}.elf--gradient-editor-view .gradient-angle rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle circle{stroke-width:2;pointer-events:all}.elf--gradient-editor-view .gradient-angle circle:hover{cursor:-webkit-grab;cursor:grab}.elf--gradient-editor-view .gradient-angle circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--gradient-editor-view .gradient-angle circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--gradient-editor-view .gradient-angle circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--gradient-editor-view .gradient-angle circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;pointer-events:none}.elf--gradient-editor-view .gradient-angle circle.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle circle.point{fill:#fff;r:5}.elf--gradient-editor-view .gradient-angle circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-angle circle.hover-colorstep{r:8;filter:drop-shadow(0 0 1px rgb(255,255,255));pointer-events:none}.elf--gradient-editor-view .gradient-radial-line{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-radial-line path{fill:transparent;stroke:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-radial-line path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-radial-line path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line circle.step-point,.elf--gradient-editor-view .gradient-radial-line ellipse.step-point{fill:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point,.elf--gradient-editor-view .gradient-radial-line ellipse.point{fill:#fff;r:5;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point[data-type=start],.elf--gradient-editor-view .gradient-radial-line ellipse.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-radial-line circle.size,.elf--gradient-editor-view .gradient-radial-line ellipse.size{fill:transparent;stroke:#fff}.elf--gradient-editor-view .gradient-radial-line rect{pointer-events:all}.elf--gradient-editor-view .gradient-radial-line rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--guide-line-view{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translate(.5px,.5px);width:100%}.elf--guide-line-view path{stroke:var(--elf--selected-color)}.elf--guide-line-view path.arrow{stroke-width:1;fill:none}.elf--guide-line-view path.layer-line{stroke:var(--elf--font-color)}.elf--guide-line-view path.snap-line{stroke:var(--elf--selected-color)}.elf--guide-line-view line{stroke-width:1}.elf--guide-line-view line.base-line{stroke:var(--elf--guide-line-color)}.elf--guide-line-view line.dash-line{stroke:var(--elf--guide-line-color);stroke-dasharray:2 2}.elf--guide-line-view line.base-rect{stroke:var(--elf--guide-line-rect-color)}.elf--guide-line-view text{fill:var(--elf--guide-font-color);font-weight:400}.elf--guide-line-view text.text-center{text-anchor:middle}.elf--history-list-view .history-item{grid-column-gap:5px;display:grid;grid-template-columns:20px 1fr}.elf--history-list-view .history-item>span{color:var(--elf--font-color);vertical-align:middle}.elf--history-list-view .history-item>span svg{height:16px;width:16px}.elf--history-list-view .history-item>span svg path{fill:currentColor}.elf--hover-rect,.elf--hover-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--hover-rect{box-sizing:border-box}.elf--hover-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:2;left:0;position:absolute;top:0}.elf--hover-rect svg{bottom:0;left:0;position:absolute;right:0;top:0}.elf--hover-rect svg .offset-line{stroke:var(--elf--selected-color-2);stroke-dasharray:2 4;fill:transparent;stroke-width:1}.elf--hover-rect svg text{fill:var(--elf--selected-font-color)}.elf--hover-rect svg rect{fill:var(--elf--selection-tool-border-color)}.elf--image-select-editor{background-color:#0000004d;margin-bottom:10px;margin-top:10px;text-align:center}.elf--image-select-editor .preview-container{height:150px;position:relative;width:100%}.elf--image-select-editor .preview-container img{max-height:100%;max-width:100%}.elf--image-select-editor .preview-container input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;top:0;width:100%}.elf--image-select-editor .select-container{display:grid;grid-template-columns:1fr;padding:4px 0}.elf--image-select-editor .select-container button{width:100%}.elf--image-select-popup{display:grid;grid-template-columns:1fr;min-height:450px;padding:10px;width:500px}.elf--image-select-popup>.box{grid-column-gap:4px;grid-row-gap:4px;display:grid;grid-auto-rows:110px;grid-template-columns:repeat(4,1fr);margin-bottom:10px}.elf--image-select-popup>.box .image-item{border:1px solid hsla(0,0%,100%,.5);box-sizing:border-box;display:grid;position:relative;text-align:center}.elf--image-select-popup>.box .image-item:hover{background-color:#baffb1}.elf--image-select-popup>.box .image-item img{align-self:center;cursor:pointer;justify-self:center;max-height:100%;max-width:100%;pointer-events:all;vertical-align:middle}.elf--keyframe-popup{width:250px}.elf--keyframe-popup .box .name{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;height:20px;margin-bottom:5px}.elf--keyframe-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--keyframe-popup .box .property .title .tools{text-align:right}.elf--keyframe-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--keyframe-popup .box .offset-editor .offset{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:20px;position:relative}.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="0"] [data-offset-index="0"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="1"] [data-offset-index="1"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="10"] [data-offset-index="10"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="11"] [data-offset-index="11"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="12"] [data-offset-index="12"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="13"] [data-offset-index="13"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="14"] [data-offset-index="14"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="15"] [data-offset-index="15"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="16"] [data-offset-index="16"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="17"] [data-offset-index="17"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="18"] [data-offset-index="18"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="19"] [data-offset-index="19"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="2"] [data-offset-index="2"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="3"] [data-offset-index="3"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="4"] [data-offset-index="4"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="5"] [data-offset-index="5"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="6"] [data-offset-index="6"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="7"] [data-offset-index="7"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="8"] [data-offset-index="8"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="9"] [data-offset-index="9"]{background-color:var(--elf--selected-color)}.elf--keyframe-popup .box .offset-editor .offset .offset-item{background-color:var(--elf--font-color);border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--keyframe-popup .box .offset-input{padding:5px 0}.elf--keyframe-popup .box .offset-input .title{grid-column-gap:2px;display:grid;grid-template-columns:100px 1fr}.elf--keyframe-popup .box .keyframe-property-list{max-height:300px;overflow:auto}.elf--keyframe-popup .box .keyframe-property-item{margin-top:2px;padding:4px 0}.elf--keyframe-popup .box .keyframe-property-item .title{grid-template-columns:1fr 30px}.elf--keyframe-popup .box .keyframe-property-item .value-editor{border:1px solid rgba(0,0,0,.3);padding:2px}.elf--keyframe-popup .box label{text-align:left;vertical-align:middle}.elf--keyframe-popup .box input,.elf--keyframe-popup .box select{vertical-align:middle;width:100%}.elf--keyframe-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--keyframe-popup .box .input.grid-1{grid-template-columns:1fr}.elf--keyframe-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--keyframe-list{display:block}.elf--keyframe-list .keyframe-item{border:1px solid var(--elf--border-color);cursor:pointer;margin-bottom:5px;padding:5px}.elf--keyframe-list .keyframe-item:first-child{margin-top:5px}.elf--keyframe-list .keyframe-item.selected{background-color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] button[data-type=list]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] .keyframe-code[data-type=list]{display:block}.elf--keyframe-list .keyframe-item[data-selected-value=code] button[data-type=code]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=code] .keyframe-code[data-type=code]{display:block}.elf--keyframe-list .keyframe-item .title{display:grid;grid-template-columns:1fr 60px;height:20px}.elf--keyframe-list .keyframe-item .title .name{padding:2px 0}.elf--keyframe-list .keyframe-item .title .tools{text-align:right;vertical-align:middle}.elf--keyframe-list .keyframe-item .title .tools .group{display:inline-block}.elf--keyframe-list .keyframe-item pre{margin:0;white-space:pre-wrap}.elf--keyframe-list .keyframe-item .keyframe-code{display:none}.elf--keyframe-list .keyframe-item .keyframe-code>.offset{display:grid;grid-template-columns:30px 1fr;margin-top:2px}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item{display:grid;grid-template-columns:1fr 1fr;text-align:left}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item label{color:var(--elf--font-color);font-weight:700;padding-left:10px}.elf--keyframe-list .keyframe-item .offset-list{height:20px;padding:0 10px}.elf--keyframe-list .keyframe-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--keyframe-list .keyframe-item .offset-list .container .offset{background-color:#fff;border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--layer-append-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;pointer-events:all;position:absolute;right:0;top:0}.elf--layer-append-view .area{display:inline-block;pointer-events:none;position:absolute}.elf--layer-append-view .area .draw-item{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--layer-append-view .area-pointer-view,.elf--layer-append-view .area-rect{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;padding:2px 4px;position:absolute;transform:translate(5px,5px)}.elf--layer-append-view .area-pointer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--layer-append-view .area-pointer .layer-add-snap-pointer{stroke:var(--elf--selected-color);stroke-width:1}.elf--layer-append-view input[type=file]{display:none}.elf--layer-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--layer-list .layer-item{content-visibility:auto;color:var(--elf--list-item-font-color);contain:size;height:30px;margin-bottom:0!important;padding:5px!important}.elf--layer-list .layer-item[data-is-hide=true]{display:none}.elf--layer-list .layer-item[data-is-group=true] .detail .folder{display:inline-block;transform:rotate(90deg);transition:transform .1s linear;vertical-align:middle}.elf--layer-list .layer-item[data-is-group=true] .detail .folder.collapsed{transform:rotate(0)}.elf--layer-list .layer-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--layer-list .layer-item .detail label{cursor:pointer;display:grid;grid-template-columns:20px 20px 1fr;overflow:hidden;padding:2px 0;pointer-events:all;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--layer-list .layer-item .detail label svg path,.elf--layer-list .layer-item .detail label svg use{fill:currentColor}.elf--layer-list .layer-item .detail .tools{display:none;text-align:right}.elf--layer-list .layer-item .detail .tools .visible{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .visible[data-visible=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item .detail .tools .lock{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .lock[data-lock=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--layer-list .layer-item.selected-path{background-color:var(--elf--selected-color-3)}.elf--layer-list .layer-item:hover,.elf--layer-list .layer-item:not(.selected).hovered{box-shadow:inset 0 0 0 1px var(--elf--list-item-selected-color)}.elf--layer-list .layer-item:hover .tools,.elf--layer-list .layer-item:not(.selected).hovered .tools{display:block}.elf--layer-list .drag-start{opacity:.3}.elf--layer-list+.drag-point{border:1px solid var(--elf--selected-color);pointer-events:none;position:absolute}.elf--gradient-assets-property .gradient-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--gradient-assets-property .gradient-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--gradient-assets-property .gradient-list-tools[data-view-mode=grid] button[data-value=grid],.elf--gradient-assets-property .gradient-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--gradient-assets-property .gradient-list .gradient-view{pointer-events:none}.elf--gradient-assets-property .gradient-list[data-view-mode=grid]{display:block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .add-gradient-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item{display:inline-block;margin-bottom:1px;margin-right:1px;position:relative;vertical-align:middle;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item:hover[data-custom=true] .tools{display:inline-block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;cursor:pointer;height:40px;position:relative;width:100%}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview .gradient-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools{display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools button{color:var(--elf--selected-font-color);height:10px;width:10px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools svg{height:100%;width:100%}.elf--image-assets-property .image-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--image-assets-property .image-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--image-assets-property .image-list-tools[data-view-mode=grid] button[data-value=grid],.elf--image-assets-property .image-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--image-assets-property .image-list{padding:5px}.elf--image-assets-property .image-list .image-view{pointer-events:none}.elf--image-assets-property .image-list[data-view-mode=grid]{display:block}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item:hover .tools{display:inline-block}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title input{width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.image-assets-property{padding-left:0!important;padding-right:0!important}.elf--pattern-assets-property .pattern-list{max-height:240px;overflow:auto;padding:5px}.elf--pattern-assets-property .pattern-list .pattern-view{pointer-events:none}.elf--pattern-assets-property .pattern-list[data-view-mode=grid]{display:block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .add-pattern-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:54px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item{border:1px solid var(--elf--border-color);box-sizing:border-box;display:inline-block;margin-bottom:3px;margin-right:3px;position:relative}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item:hover[data-custom=true] .tools{display:inline-block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview{cursor:pointer;height:54px;position:relative;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview .pattern-view{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:0}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .tools{color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.pattern-assets-property{padding-left:0!important;padding-right:0!important}.elf--video-assets-property .video-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--video-assets-property .video-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--video-assets-property .video-list-tools[data-view-mode=grid] button[data-value=grid],.elf--video-assets-property .video-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--video-assets-property .video-list{padding:5px}.elf--video-assets-property .video-list .video-view{pointer-events:none}.elf--video-assets-property .video-list[data-view-mode=grid]{display:block}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .add-video-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item:hover .tools{display:inline-block}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;line-height:80px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .title input{width:100%}.elf--video-assets-property .video-list[data-view-mode=grid] .video-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.video-assets-property{padding-left:0!important;padding-right:0!important}.elf--custom-assets{bottom:0;left:0;position:absolute;right:0;top:0}.elf--custom-assets .custom-assets-tools{grid-column-gap:10px;box-sizing:border-box;display:grid;grid-template-columns:1fr 40px;height:20px;left:0;padding:0 10px;position:absolute;right:0;top:10px}.elf--custom-assets .custom-assets-tools .tools{text-align:right}.elf--custom-assets .elf--asset-list{bottom:0;box-sizing:border-box;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;overflow:auto;padding:10px;position:absolute;right:0;row-gap:10px;top:30px}.elf--custom-assets .elf--asset-list .asset-preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;position:relative;width:80px}.elf--custom-assets .elf--asset-list .asset-preview .tools{background-color:transparent;bottom:0;box-sizing:border-box;left:0;opacity:1;padding:2px;position:absolute;right:0;transition:opacity .2s}.elf--custom-assets .elf--asset-list .asset-preview .tools .title{color:var(--elf--selected-font-color);display:inline-block;text-align:left;vertical-align:middle}.elf--custom-assets .elf--asset-list .asset-preview .tools .buttons{display:inline-block}.elf--custom-assets .elf--asset-list .asset-preview:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--custom-assets .elf--asset-list .asset-preview:hover .tools{opacity:1}.elf--custom-assets .elf--asset-list .asset-preview img{-o-object-fit:contain;object-fit:contain;width:100%}.elf--asset-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--asset-list .asset-item{grid-column-gap:4px;border-radius:4px;color:var(--elf--list-item-font-color);display:grid;grid-template-columns:20px 1fr;margin-bottom:0!important;padding:5px 7px!important}.elf--asset-list .asset-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--asset-list .asset-item .detail label{padding:2px 0;vertical-align:middle}.elf--asset-list .asset-item .detail .tools{text-align:right}.elf--asset-list .asset-item.selected{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf--asset-list .asset-item.selected .tools button{color:var(--elf--selected-font-color)}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after,.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{border-radius:3px;content:"";display:inline-block;height:10px;margin-left:5px;vertical-align:middle;width:10px}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after{background-color:#44a344}.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{background-color:var(--elf--selected-color)}.elf--library-items{padding:10px}.elf--library-items .property{margin-bottom:10px!important;margin-top:10px!important}.elf--library-items .property-title{background-color:var(--elf--selected-color-2)!important;border-radius:4px;color:var(--elf--selected-font-color);margin-bottom:10px}.elf--library-items .property-title label{line-height:1.5}.object-items{bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.object-items>:first-child{flex:0 0 140px}.object-items>:last-child{flex:1 1 0;margin-top:auto}.elf--default-layout-item-property .constraints{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--default-layout-item-property .constraints-box{border:1px solid var(--elf--input-border-color);height:70px;margin-left:10px;position:relative;width:70px}.elf--default-layout-item-property .constraints-box>.item{box-sizing:border-box;position:absolute}.elf--default-layout-item-property .constraints-box>.item:hover{background-color:var(--elf--selected-hover-color)}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]{border-color:var(--elf--selected-color)!important;z-index:1}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]:before{background-color:var(--elf--selected-color-2)!important}.elf--default-layout-item-property .constraints-box>.item[disabled]{display:none}.elf--default-layout-item-property .constraints-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;height:calc(50% - 2px);left:calc(25% + 1px);pointer-events:none;position:absolute;top:calc(25% + 1px);width:calc(50% - 2px)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal]:before{background-color:var(--elf--input-border-color);content:"";height:2px;left:3px;pointer-events:none;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]{border-left:2px solid var(--elf--font-color);border-right:2px solid var(--elf--font-color);bottom:-12px;box-sizing:border-box;height:8px;left:0;right:-1px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]:before{background-color:var(--elf--font-color);height:3px;left:0;pointer-events:none;right:0;top:50%;width:auto}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=min]{height:12px;left:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]{height:12px;right:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]:before{left:5px;right:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]{height:12px;left:50%;left:calc(25% + 8px);right:calc(25% + 8px);top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]:before{left:0;right:0}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical]:before{background-color:var(--elf--input-border-color);bottom:4px;content:"";left:50%;pointer-events:none;position:absolute;top:4px;transform:translate(-50%);width:2px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]{border-bottom:1px solid var(--elf--font-color);border-top:1px solid var(--elf--font-color);bottom:-1px;box-sizing:border-box;right:-12px;top:0;width:8px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]:before{background-color:var(--elf--font-color);bottom:0;height:auto;left:50%;pointer-events:none;top:0;transform:translate(-50%);width:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=min]{height:20px;left:50%;top:0;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=max]{bottom:0;height:20px;left:50%;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]{bottom:calc(25% + 8px);left:50%;top:calc(25% + 8px);transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]:before{bottom:0;top:0}.elf--flex-grow-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--flex-grow-tool-view .flex-grow-item{background-color:#fffc;border:1px solid var(--elf--font-color);border-radius:4px;display:flex;height:20px;left:0;line-height:1;overflow:hidden;pointer-events:all;position:absolute;text-align:center;top:0;transform:translate(-50%,-120%)}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=row]{cursor:ew-resize}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]{cursor:ns-resize;flex-direction:column;height:auto;overflow:hidden}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]>*{padding-bottom:1px!important;padding-top:1px!important}.elf--flex-grow-tool-view .flex-grow-item .size{align-items:center;display:flex;flex:1 1 auto;justify-content:center;padding:4px}.elf--flex-grow-tool-view .flex-grow-item .grow{align-items:center;background-color:var(--elf--selected-color);color:var(--elf--selected-font-color);display:flex;flex:none;justify-content:center;padding:4px}.flex-layout-item{margin:10px auto}.flex-layout-item .grid-2{display:flex;gap:10px;justify-content:space-between}.flex-layout-item .grid-2 *{vertical-align:middle}.flex-layout-item .title{font-family:Courier New,Courier,monospace;font-weight:700;margin-bottom:3px;padding-left:2px;text-transform:uppercase}.flex-layout-editor{padding:0 10px 10px}.select-flex-direction{align-items:center;display:flex;flex-direction:row;justify-content:center;position:relative}.select-flex-direction>div{height:200px;position:relative;width:200px}.select-flex-direction .padding-top{right:0}.select-flex-direction .padding-left,.select-flex-direction .padding-top{background-color:var(--elf--border-color);display:block;left:0;position:absolute;top:0}.select-flex-direction .padding-left{bottom:0}.select-flex-direction .padding-right{top:0}.select-flex-direction .padding-bottom,.select-flex-direction .padding-right{background-color:var(--elf--border-color);bottom:0;display:block;position:absolute;right:0}.select-flex-direction .padding-bottom{left:0}.select-flex-direction .flex-group{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group:before{border:1px solid var(--elf--selected-color-2);content:"";display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group-tool .tool-area{border:1px solid var(--elf--selected-color-2);display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=center] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-end] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-start] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=center] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-end] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-start] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-start] .tool-area-item[data-index="2"]{display:none}.select-flex-direction .flex-group-tool .tool-area .tool-area-item{background-color:transparent;background-color:#4b4bff0d;box-sizing:border-box;cursor:pointer;height:30px;left:0;position:absolute;top:0;transition:all .2s linear;transition:all .1s linear;width:30px}.select-flex-direction .flex-group-tool .tool-area .tool-area-item:hover{background-color:#4b4bff80}.select-flex-direction .flex-group-padding{border:1px solid var(--elf--selected-color-2);display:block;height:100%;position:absolute;width:100%}.select-flex-direction .flex-direction{display:flex;gap:2px;height:30px;width:24px}.select-flex-direction .flex-direction[data-value=column]{height:24px;width:30px}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item{height:6px!important;width:30px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:first-child{width:15px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:nth-child(3){width:20px!important}.select-flex-direction .flex-direction .flex-direction-item{background-color:var(--elf--selected-color-2);border-radius:2px;display:inline-block;height:30px;width:6px}.select-flex-direction .flex-direction .flex-direction-item:first-child{background-color:var(--elf--selected-color);height:15px}.select-flex-direction .flex-direction .flex-direction-item:nth-child(3){background-color:var(--elf--selected-color);height:20px}.elf--grid-box-editor{border:1px solid var(--elf--border-color);padding:0 1px}.elf--grid-box-editor .grid-box-editor-item .item{grid-column-gap:4px;display:grid;grid-template-columns:1fr .5fr 1fr 40px;margin-bottom:4px;text-align:center}.elf--grid-box-editor .grid-box-editor-item .item.header{height:24px}.elf--grid-box-editor .grid-box-editor-item .item.header>*{border:1px solid hsla(0,0%,93%,.18);box-sizing:border-box;padding:4px 0}.elf--grid-box-editor .grid-box-editor-item .item .repeat button{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);height:16px;width:16px}.elf--grid-box-editor .grid-box-editor-item .item .repeat button svg{fill:currentColor}.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.value,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=length]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.value{visibility:hidden}.elf--grid-box-editor .grid-box-editor-item .item .tools{padding:4px 0}.elf--grid-grow-tool-view{--cell-size:20px;--cell-padding-size:6px;--cell-color:#ff424d;--cell-grid-item-color:gray;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view[data-drag-target-item=true] .grid-item-tool{visibility:hidden}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool{opacity:0;transition:opacity .2s linear}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool.selected,.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool:hover{opacity:1}.elf--grid-grow-tool-view .layout-pointer{background-color:#000;border-radius:4px;color:#fff;display:inline-block;left:0;padding:2px 4px;position:absolute;top:0;transform:translate(-50%)}.elf--grid-grow-tool-view .layout-rect{position:absolute}.elf--grid-grow-tool-view .layout-rect .grid-item{align-items:center;border:1px dashed var(--cell-grid-item-color);box-sizing:border-box;display:flex;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column{align-items:center;box-sizing:border-box;display:flex;height:var(--cell-size);justify-content:center;left:1px;overflow:hidden;position:relative;top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item{overflow:hidden;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item>span{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle{height:100%;width:14px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.left{left:2px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right{cursor:pointer;display:grid;grid-template-columns:1fr 1fr;right:2px;width:40px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>*{height:var(--cell-size);pointer-events:all;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row{align-items:center;box-sizing:border-box;cursor:ns-resize;display:flex;justify-content:center;left:calc(var(--cell-size)*-1 - var(--cell-padding-size));overflow:hidden;padding-bottom:1px;padding-top:1px;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .item{transform:rotate(-90deg)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle{height:40px;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.top{top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{bottom:2px;cursor:pointer}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{height:20px;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool{color:var(--elf--selected-font-color);cursor:ew-resize;pointer-events:all}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg{height:16px!important;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px!important}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg path,.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg use{fill:currentColor}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append{background-color:var(--cell-color);border-radius:2px;cursor:pointer;height:var(--cell-size);position:absolute;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.column-plus{right:calc(var(--cell-size)*-1 - var(--cell-padding-size));top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.row-plus{bottom:calc(var(--cell-size)*-1 - var(--cell-padding-size));left:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner{flex-direction:column}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{display:inline-block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{display:block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner{background-color:var(--cell-color);border-radius:2px;box-sizing:border-box;display:flex;height:100%;margin-left:1px;margin-right:1px;pointer-events:all;position:relative;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item:hover{background-color:var(--elf--selected-color)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .drag-handle{align-items:center;display:flex;justify-content:center}.elf--grid-grow-tool-view .gap-tool{background-image:repeating-linear-gradient(135deg,rgba(96,108,188,0),rgba(96,108,188,0) 6px,var(--cell-color) 6px,var(--cell-color) 7px);cursor:ew-resize;opacity:0;pointer-events:all;position:absolute}.elf--grid-grow-tool-view .gap-tool.row-gap{cursor:ns-resize}.elf--grid-grow-tool-view .gap-tool:hover{opacity:1}.elf--grid-layout-editor{padding:0 10px 10px}.elf--grid-layout-editor .grid-layout-item{margin-bottom:5px;margin-top:5px}.elf--grid-layout-editor .grid-layout-item>.label{margin-bottom:5px;padding:4px}.elf--layout-property .property-body{padding:0}.elf--layout-property .layout-list>[data-value]{display:none}.elf--layout-property .layout-list>[data-value].selected,.elf--layout-property .layout-list[data-selected-value=default] [data-value=default],.elf--layout-property .layout-list[data-selected-value=flex] [data-value=flex],.elf--layout-property .layout-list[data-selected-value=grid] [data-value=grid]{display:block}.elf--layout-property .layout-list .label{padding:10px 0}.elf--resizing-item-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-item-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-item-property .resizing-mode-box .rect{height:100%;position:relative;width:100%}.elf--resizing-item-property .resizing-mode-box .rect .inner-rect{border:1px solid var(--elf--font-color);height:30px;pointer-events:none;position:absolute;width:30px}.elf--resizing-item-property .resizing-mode-box .tool{cursor:pointer;height:100%;pointer-events:all;position:absolute;width:100%}.elf--resizing-item-property .resizing-mode-box .vertical{height:100%;left:50%;position:absolute;top:0;transform:translate(-50%);width:50%}.elf--resizing-item-property .resizing-mode-box .horizontal{height:50%;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-top{display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;top:0;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-bottom{bottom:0;display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .horizontal-left{display:flex;height:100%;justify-content:center;left:1px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box .horizontal-right{display:flex;height:100%;justify-content:center;opacity:0;position:absolute;right:1px;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top{background-color:var(--elf--selected-hover-color);opacity:1}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed] .inner-rect{left:50%;top:50%;transform:translate(-50%,-50%)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .inner-rect{height:100%;left:50%;top:50%;transform:translate(-50%,-50%);width:50%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .inner-rect{height:50%;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .inner-rect{bottom:0;height:100%;left:0;right:0;top:0;transform:translate(0);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-item-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-item-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-item-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-item-property .has-label-grid>label:after,.elf--resizing-item-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-item-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--resizing-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:70px 1fr}.elf--resizing-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;position:relative;width:63px}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content] .rect .inner-rect{border-color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-horizontal-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-horizontal-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-vertical-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;display:flex;flex-direction:column;font-size:10px;height:42px;left:10px;position:absolute;top:10px;width:42px}.elf--resizing-property .resizing-mode-box>.rect svg{height:12px;width:12px}.elf--resizing-property .resizing-mode-box>.rect svg use{fill:currentColor}.elf--resizing-property .resizing-mode-box>.rect>.vertical{bottom:0;left:calc(50% - 9px);position:absolute;top:0;width:18px}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-top{display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;top:0;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-bottom{bottom:0;display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.horizontal{align-items:center;display:flex;height:16px;justify-content:center;left:0;position:absolute;right:0;top:calc(50% - 8px)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-left{align-items:center;display:flex;height:20px;justify-content:center;left:0;position:absolute;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-right{align-items:center;display:flex;height:20px;justify-content:center;position:absolute;right:0;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect .inner-rect{background-color:var(--elf--background-color);border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;height:18px;left:11px;pointer-events:none;position:absolute;top:11px;width:18px}.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{height:17px;left:0;right:0;top:11px}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{background-color:transparent;border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;pointer-events:none;position:absolute}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect{height:100%;left:calc(50% - 9px);top:0;width:18px}.elf--resizing-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-property .has-label-grid>label:after,.elf--resizing-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--line-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--line-view .horizontal-line{bottom:0;cursor:ew-resize;left:-1px;pointer-events:all;position:absolute;top:0;width:3px}.elf--line-view .horizontal-line:before{background-color:var(--elf--selected-color);bottom:0;content:"";left:50%;pointer-events:none;position:absolute;top:0;transform:translate(-50%);width:1px}.elf--line-view .vertical-line{cursor:ns-resize;height:3px;left:0;pointer-events:all;position:absolute;right:0;top:-1px}.elf--line-view .vertical-line:before{background-color:var(--elf--selected-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.elf--draw-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap;width:550px}.elf--draw-manager .text{display:inline-block}.elf--draw-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--draw-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--draw-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--draw-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--draw-manager .tools>div{display:inline-block;margin-left:10px;vertical-align:middle;white-space:inherit}.elf--draw-manager .tools>div>*{display:inline-block;vertical-align:middle;width:auto}.elf--draw-manager .tools>div label{line-height:1.6;padding:3px 2px;text-align:right;vertical-align:middle}.elf--draw-manager .tools>div .number-input-editor,.elf--draw-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--draw-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--draw-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:20px;overflow:hidden;width:20px}.elf--draw-manager>*{vertical-align:middle}.elf--path-draw-view{background-color:transparent;cursor:crosshair;display:none}.elf--path-draw-view,.elf--path-draw-view .path-draw-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor-view .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .path-container:not(.modify) path.object,.elf--path-editor-view .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor-view .path-container.split-panel{pointer-events:none}.elf--path-editor-view .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor-view .path-container.path{cursor:crosshair}.elf--path-editor-view .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.alt svg circle,.elf--path-editor-view .path-container.segment-move{cursor:move}.elf--path-editor-view .path-container.transform svg .snap-path,.elf--path-editor-view .path-container.transform svg circle,.elf--path-editor-view .path-container.transform svg line,.elf--path-editor-view .path-container.transform svg rect,.elf--path-editor-view .path-container.transform svg text{display:none}.elf--path-editor-view .path-container.modify,.elf--path-editor-view .path-container.segment-move{cursor:default}.elf--path-editor-view .path-container.modify svg path.object,.elf--path-editor-view .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor-view .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor-view .path-container.is-control svg path.path-area{display:none}.elf--path-editor-view .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor-view .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor-view .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor-view svg{height:100%;width:100%}.elf--path-editor-view svg line{stroke-width:1;content-visibility:auto}.elf--path-editor-view svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor-view svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor-view svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor-view svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor-view svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor-view svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor-view svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor-view svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff;r:5;stroke-width:2}.elf--path-editor-view svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor-view svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor-view svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor-view svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor-view svg path{fill:transparent;content-visibility:auto}.elf--path-editor-view svg path.path-area{stroke-width:0}.elf--path-editor-view svg path.path-area.selected,.elf--path-editor-view svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor-view svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor-view svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff}.elf--path-editor-view svg path.guide,.elf--path-editor-view svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor-view svg path.object{fill:transparent;stroke-width:1}.elf--path-editor-view svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor-view svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor-view svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;filter:drop-shadow(2px 4px 6px white)}.elf--path-editor-view svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap}.elf--path-manager button{box-sizing:border-box;display:inline-block;height:auto;height:34px;margin:0 2px;text-decoration:underline;vertical-align:middle;white-space:nowrap;width:auto;width:34px}.elf--path-manager button svg{height:20px;vertical-align:middle;width:20px}.elf--path-manager .text{display:inline-block}.elf--path-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--path-manager .subpath{background-color:var(--elf--background-color);border-radius:4px;display:inline-block;left:0;padding:4px 2px;position:absolute;right:0;text-align:left;top:calc(100% + 2px)}.elf--path-manager .subpath button{box-sizing:border-box;display:inline-block;margin:0 2px;text-decoration:underline;white-space:nowrap}.elf--path-manager .subpath button,.elf--path-manager .subpath button svg{height:24px;vertical-align:middle;width:24px}.elf--path-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--path-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--path-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;color:var(--elf--selected-font-color);height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--path-manager .tools[data-selected-value=modify] button[data-value=modify],.elf--path-manager .tools[data-selected-value=path] button[data-value=path],.elf--path-manager .tools[data-selected-value=transform] button[data-value=transform],.elf--path-manager .tools[data-selected-value=warp] button[data-value=warp]{color:var(--elf--selected-color)}.elf--path-manager .tools>div{display:inline-block;height:100%;padding:5px 0;vertical-align:middle}.elf--path-manager .tools>div label{line-height:20px;padding:3px 2px;text-align:right;width:auto}.elf--path-manager .tools>div .number-input-editor,.elf--path-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--path-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--path-manager .tools>div .fill-single-editor{display:inline-block;vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor label{vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:18px;overflow:hidden;width:18px}.elf--path-manager>*{vertical-align:middle}.elf--boolean-item{padding:8px 5px 10px}.elf--boolean-item>div{grid-column-gap:10px;display:grid;grid-template-columns:1fr 1fr;height:30px;padding:4px 0;text-align:left}.elf--boolean-item>div.divider{background-color:var(--elf--property-border-color);font-size:0;height:1px;margin:10px 0;padding:0}.elf--boolean-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;flex:1 1 auto;font-size:11px;height:24px;text-align:left;vertical-align:middle;width:auto}.elf--boolean-item button[data-no-title=true] .title{display:none}.elf--boolean-item button svg{height:20px;vertical-align:middle;width:20px}.elf--boolean-item .title{color:#999}.elf--pattern-editor .label{height:20px;margin-top:2px}.elf--pattern-editor .label.hide{display:none}.elf--pattern-editor .label label{padding-left:5px;vertical-align:middle}.elf--pattern-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--pattern-editor .pattern-list{-moz-column-gap:4px;column-gap:4px;display:flex;flex-wrap:wrap;padding-bottom:10px;row-gap:4px}.elf--pattern-editor .pattern-list:empty{display:none}.elf--pattern-editor .pattern-list .pattern-item{box-shadow:0 0 0 1px var(--elf--border-color);display:inline-block;position:relative;text-align:center}.elf--pattern-editor .pattern-list .pattern-item.selected{background-color:var(--elf--border-color)}.elf--pattern-editor .pattern-list .pattern-item:hover .tools{display:inline-block}.elf--pattern-editor .pattern-list .pattern-item .tools{background-color:#ffffffe6;color:var(--elf--selected-color);display:none;position:absolute;right:0;top:0}.pattern-info-popup{width:240px}.pattern-info-popup .box>div{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr}.pattern-info-popup .box>div.grid-2{grid-template-columns:1fr 1fr}.el--pattern-property .pattern-property{display:flex}.el--pattern-property .add-tools{opacity:.3;transition:opacity .2s}.el--pattern-property .add-tools:hover{opacity:1}.el--pattern-property .add-tools svg{height:20px;width:20px}.elf--pattern-size-editor{height:60px;text-align:center;width:60px}.elf--pattern-size-editor .preview{height:100%}.elf--pattern-size-editor .preview .mini-view{background-color:#fff;height:100%}.elf--pattern-size-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.grid-layout{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 20px;margin-bottom:4px}.elf--project-list{margin:0!important}.elf--project-list .project-item{cursor:pointer;padding:5px 10px!important}.elf--project-list .project-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--project-list .project-item .detail label{cursor:pointer;padding:2px 0}.elf--project-list .project-item .detail .tools{text-align:right}.elf--project-list .project-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--selection-info-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-info-view .artboard-title{display:inline-block;pointer-events:all;position:absolute;transform:translateY(-100%);vertical-align:middle}.elf--selection-info-view .artboard-title svg{height:16px;vertical-align:middle;width:16px}.elf--selection-info-view .artboard-title svg path,.elf--selection-info-view .artboard-title svg use{fill:currentColor}.elf--selection-info-view .artboard-title>div{padding:2px 5px}.elf--ghost-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--ghost-tool-view svg{height:100%;left:0;position:absolute;top:0;width:100%}.elf--ghost-tool-view svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:2;stroke-dasharray:2 2}.elf--ghost-tool-view svg path.container,.elf--ghost-tool-view svg path.target,.elf--ghost-tool-view svg path.target-parent,.elf--ghost-tool-view svg path.target-rect{stroke-width:0}.elf--ghost-tool-view svg path.flex-item{stroke:transparent;fill:#3232321a;z-index:-1000}.elf--ghost-tool-view svg path.flex-target{stroke-width:5;stroke:var(--elf--selected-color)}.elf--selection-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-view.editing-path,.elf--selection-view.editing-polygon{display:none!important}.elf--selection-view.empty>*{display:none}.elf--selection-view[data-has-shift=true] .pointer-rect .pointer{background-color:transparent}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-left-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-right-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-left-width:0;border-top-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-right-width:0;border-top-width:0}.pointer-rect{bottom:0;pointer-events:none;right:0}.pointer-rect,.pointer-rect .pointer{box-sizing:border-box;left:0;position:absolute;top:0}.pointer-rect .pointer{background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:10px;pointer-events:all;width:10px}.pointer-rect .pointer[data-number="5"]{background-color:var(--elf--selected-color);border-radius:100%;height:7px;pointer-events:none;width:7px}.pointer-rect .pointer[data-number="11"],.pointer-rect .pointer[data-number="12"],.pointer-rect .pointer[data-number="13"],.pointer-rect .pointer[data-number="14"]{background-color:transparent;border:0}.pointer-rect .size-pointer{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;left:0;padding:2px 4px;position:absolute;top:0}.pointer-rect .size-pointer[data-layout=grid]{background-color:red}.pointer-rect .size-pointer[data-layout=flex]{background-color:green}.pointer-rect .rotate-pointer{background-color:#fff;border:1px solid orange;border-radius:100%;box-sizing:border-box;display:inline-block;height:14px;left:0;overflow:hidden;pointer-events:all;position:absolute;top:0;width:14px}.pointer-rect .rotate-pointer:before{background-color:orange;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.pointer-rect .rotate-pointer.no-fill{background-color:transparent;border:none;height:14px;width:14px}.pointer-rect .rotate-pointer.no-fill:before{display:none}.pointer-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:1;height:100%;left:0;position:absolute;top:0;width:100%}.pointer-rect .line path{stroke-width:2;transform:translate(.5px,.5px)}.selection-tool{border:.5px solid var(--elf--selection-tool-border-color);position:absolute}.selection-tool.path .selection-tool-item[data-position=path],.selection-tool.polygon .selection-tool-item[data-position=path],.selection-tool.textpath .selection-tool-item[data-position=path]{background-color:#fffc;border:1px solid var(--elf--border-color);bottom:auto;left:50%;opacity:1;right:auto;top:-30px;transform:translate(-50%,-50%)}.selection-tool[data-is-layout-container=true][data-layout-container=flex]{border:2px solid #4fdc4f}.selection-tool[data-is-layout-container=true][data-layout-container=grid]{border:2px solid #e46363}.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position=move]{display:none}.selection-tool .selection-tool-item{background-color:var(--elf--selection-tool-border-color);border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:8px;pointer-events:all;position:absolute;transform:translate(-50%,-50%);width:8px}.selection-tool .selection-tool-item:not([data-position=move]){background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);box-sizing:border-box}.selection-tool .selection-tool-item:before{background-color:#333c;border:var(--elf--border-color);border-radius:3px;color:#fff;content:attr(data-position-text);opacity:0;padding:4px 10px;pointer-events:none;position:absolute;text-align:center;transition:opacity .3s linear;white-space:nowrap}.selection-tool .selection-tool-item[data-position=move]{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);box-sizing:border-box;color:var(--elf--selected-font-color);cursor:move;display:inline-block;height:20px;left:0;overflow:hidden;padding-right:5px;top:-2px;transform:translateY(-100%);vertical-align:middle;width:auto}.selection-tool .selection-tool-item[data-position=move]:before{left:0;top:0;transform:translate(-100%,calc(-100% - 5px))}.selection-tool .selection-tool-item[data-position=move] svg{height:15px;width:15px}.selection-tool .selection-tool-item[data-position=move] span{color:var(--elf--selected-font-color);vertical-align:middle}.selection-tool .selection-tool-item[data-position=path]{background-color:transparent;border:0;border-radius:0;cursor:move;height:20px;left:0;opacity:0;top:0;transform:none;width:20px}.selection-tool .selection-tool-item[data-position=path]:before{left:50%;top:50%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position=path] svg{height:100%;width:100%}.selection-tool .selection-tool-item[data-position="to top"]{background-color:transparent;border:0;cursor:ns-resize;height:2px;left:0;right:0;top:-2px;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to bottom"]{background-color:transparent;border:0;bottom:-2px;cursor:ns-resize;height:2px;left:0;right:0;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to right"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;right:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to left"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;left:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%;transform:translate(-50%,-50%)}.elf--selector-popup{height:auto;padding:7px;width:250px}.elf--selector-popup .box .name{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--selector-popup .box .name input{width:100%}.elf--selector-list{grid-template-columns:1fr!important}.elf--selector-list .selector-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:1fr;height:30px;margin-bottom:5px;padding:5px}.elf--selector-list .selector-item:first-child{margin-top:5px}.elf--selector-list .selector-item.selected{background-color:var(--elf--border-color)}.elf--selector-list .selector-item .title{display:grid;grid-template-columns:1fr 20px;height:20px}.elf--selector-list .selector-item .title .name{padding:2px 0}.elf--selector-list .selector-item .title .name span{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);font-weight:700;padding:2px 4px}.elf--selector-list .selector-item .title .tools{text-align:right;vertical-align:middle}.elf--svgfilter-assets-property .svgfilter-assets{padding:5px}.elf--svgfilter-assets-property .svgfilter-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--svgfilter-assets-property .svgfilter-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=grid] button[data-value=grid],.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--svgfilter-assets-property .svgfilter-list{padding:5px}.elf--svgfilter-assets-property .svgfilter-list .svgfilter-view{background-image:radial-gradient(#ff0 0,red 100%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid]{display:block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item button svg{height:20px;width:20px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item{display:inline-block;margin-bottom:4px;margin-right:2px;position:relative;vertical-align:middle;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item:hover .tools{display:inline-block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title{grid-row-gap:4px;display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title input{width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--color-matrix-editor .title{color:var(--elf--selected-color);padding:5px 0}.elf--color-matrix-editor .color-matrix-template{border:1px solid var(--elf--border-color);box-sizing:border-box;max-height:383px;overflow:auto;padding:5px 10px}.elf--color-matrix-editor .color-matrix-template input,.elf--color-matrix-editor .color-matrix-template select{width:100%}.elf--color-matrix-editor .color-matrix-template .sample-item{cursor:pointer;padding:2px 5px}.elf--color-matrix-editor .color-matrix-template .sample-item:hover{background-color:#fff3;color:var(--elf--selected-color)}.elf--func-filter-editor{display:grid;grid-template-columns:1fr}.elf--func-filter-editor.focused{border-radius:3px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--func-filter-editor.has-label{grid-template-columns:60px 1fr}.elf--func-filter-editor.has-label label{padding:2px 0;padding-left:0!important;text-align:left;vertical-align:middle}.elf--func-filter-editor>[data-type]{display:none;padding:4px 0}.elf--func-filter-editor[data-selected-type=discrete]>[data-type=table],.elf--func-filter-editor[data-selected-type=gamma]>[data-type=gamma],.elf--func-filter-editor[data-selected-type=identity]>[data-type=identity],.elf--func-filter-editor[data-selected-type=linear]>[data-type=linear],.elf--func-filter-editor[data-selected-type=table]>[data-type=table]{display:block}.elf--svg-filter-editor{grid-column-gap:10px;color:var(--elf--font-color);display:grid;grid-template-columns:150px 1fr 200px;height:100%;position:relative}.elf--svg-filter-editor .tab>.tab-header{height:30px}.elf--svg-filter-editor .label{height:20px;margin-top:2px}.elf--svg-filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--svg-filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--svg-filter-editor .tools select{display:inline-block;width:100px!important}.elf--svg-filter-editor .left{height:100%;position:relative}.elf--svg-filter-editor .left .filter-item-list{height:100%;overflow:auto;padding:10px 5px}.elf--svg-filter-editor .left .filter-item-list .group{margin-bottom:6px}.elf--svg-filter-editor .left .filter-item-list .group:before{color:var(--elf--selected-color);content:attr(label);display:block}.elf--svg-filter-editor .left .filter-item-list .group .item{color:var(--elf--font-color);cursor:pointer;padding:2px 10px;vertical-align:middle}.elf--svg-filter-editor .left .filter-item-list .group .item svg{height:20px;width:20px}.elf--svg-filter-editor .left .filter-item-list .group .item[value=BackgroundImage],.elf--svg-filter-editor .left .filter-item-list .group .item[value=FillPaint],.elf--svg-filter-editor .left .filter-item-list .group .item[value=SourceGraphic]{color:var(--elf--selected-color)}.elf--svg-filter-editor .left .filter-item-list .group .item:hover{background-color:#ffffff4d}.elf--svg-filter-editor .center{overflow:auto;position:relative}.elf--svg-filter-editor .center .graph{border:1px solid var(--elf--selected-color);box-sizing:border-box;height:100%;overflow:auto;position:relative}.elf--svg-filter-editor .center .graph .connected-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .connected-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .connected-line-panel svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;pointer-events:none}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=graphic]{stroke:#a6a6ff}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=source]{stroke:#9acd32}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=modifier]{stroke:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=lighting]{stroke:#e6ff00}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=combiner]{stroke:#ff9bff}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle{fill:var(--elf--selected-color);r:4;stroke:rgba(var(--elf--selected-color),.5);stroke-width:0;cursor:pointer;pointer-events:all}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=graphic]{fill:#a6a6ff;stroke:#a6a6ff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=source]{fill:#9acd32;stroke:#9acd3280}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=modifier]{fill:var(--elf--selected-color);stroke:rgba(var(--elf--selected-color),.5)}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=lighting]{fill:#e6ff00;stroke:#e6ff0080}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=combiner]{fill:#ff9bff;stroke:#ff9bff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle:hover{stroke-width:4}.elf--svg-filter-editor .center .graph .drag-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .drag-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .drag-line-panel svg path{stroke:var(--elf--selected-color);stroke-width:1}.elf--svg-filter-editor .center .graph .graph-panel{height:1000px;pointer-events:none;position:relative;width:1000px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node{background-color:var(--elf--background-color);border-radius:10px;box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px #777;cursor:pointer;display:inline-block;height:40px;left:10px;pointer-events:all;position:absolute;top:10px;width:40px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundImage],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=FillPaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Flood],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Image],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceGraphic],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=StrokePaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Turbulence]{border-radius:0}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out{background-color:#f8e579}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out svg{display:none}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.label{bottom:100%;color:var(--elf--font-color);display:inline-block;left:50%;position:absolute;transform:translate(-50%)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove{background-color:var(--elf--selected-color);border-radius:100%;color:var(--elf--font-color);display:inline-block;height:12px;left:50%;position:absolute;top:-6px;transform:translate(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg circle,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg rect,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview{height:100%;pointer-events:none;position:relative;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Composite] svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Merge] svg{transform:translate(-50%,-50%) rotate(90deg)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=graphic]{color:#a6a6ff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=source]{color:#9acd32}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=modifier]{color:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting]{color:#e6ff00}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=combiner]{color:#ff9bff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting] svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg{display:block;height:30px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in-list{display:inline-block;left:-14px;position:absolute;top:50%;transform:translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in{background-color:#09f;border-bottom-left-radius:50%;border-top-left-radius:50%;display:block;height:12px;margin:2px 0;position:relative;width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in:before{background-color:#fffc;border-radius:100%;content:"";display:block;height:8px;left:3px;position:absolute;top:50%;transform:translateY(-50%);width:8px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{background-color:#09f;border-bottom-right-radius:50%;border-top-right-radius:50%;height:12px;position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .light{background-color:#f8e579;border-bottom-left-radius:100%;border-bottom-right-radius:100%;bottom:-15px;height:15px;left:50%;position:absolute;transform:translate(-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{color:#fff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{height:24px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg{left:6px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{left:7px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node.selected{box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px var(--elf--selected-color)}.elf--svg-filter-editor .right{box-sizing:border-box;height:100%;overflow:auto}.elf--svg-filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;width:100%}.elf--svg-filter-editor .filter-list .filter-item{display:block}.elf--svg-filter-editor .filter-list .filter-item .title{border-radius:3px;color:var(--elf--selected-color);display:grid;grid-template-columns:1fr 30px;margin:5px 0}.elf--svg-filter-editor .filter-list .filter-item .title label{padding:2px 0}.elf--svg-filter-editor .filter-list .filter-item .title .filter-menu{color:var(--elf--selected-font-color);text-align:right}.elf--svg-filter-editor .filter-list .filter-item .filter-ui{display:grid;grid-template-columns:1fr;margin-bottom:2px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div{margin-bottom:5px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--number-range-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--select-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--text-editor.has-label{grid-template-columns:100px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--color-view-editor.has-label{grid-template-columns:100px 24px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui input[type=range]{width:90%}.elf--svg-filter-popup{max-height:800px;min-height:500px;min-width:900px;position:relative}.elf--svg-filter-popup .box{bottom:0;left:0;position:absolute;right:0;top:0}.elf--svg-filter-popup .box>.editor{height:100%;position:relative}.elf--svg-filter-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--svg-filter-popup .box .property .title .tools{text-align:right}.elf--svg-filter-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--svg-filter-popup .box label{text-align:left;vertical-align:middle}.elf--svg-filter-popup .box input[type=number],.elf--svg-filter-popup .box input[type=range],.elf--svg-filter-popup .box input[type=text],.elf--svg-filter-popup .box select{vertical-align:middle;width:100%}.elf--svg-filter-select-editor{grid-column-gap:2px;display:grid;grid-template-columns:1fr 16px 16px;height:24px;position:relative}.elf--svg-filter-select-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr 16px 16px}.elf--svg-filter-select-editor.has-label label{line-height:1.6;padding:4px 0 2px;text-align:left;vertical-align:middle}.elf--svg-filter-select-editor select{height:100%;width:100%}.elf--svg-filter-select-editor button{margin-top:4px}.text-shadow-samples{border:0;font-size:11px}.elf--transition-list{grid-template-columns:1fr!important}.elf--transition-list .transition-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0}.elf--transition-list .transition-item.selected{background-color:var(--elf--border-color)}.elf--transition-list .transition-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;vertical-align:middle;width:100%}.elf--transition-list .transition-item .timing canvas{border-radius:3px}.elf--transition-list .transition-item .labels{margin-top:4px;padding:5px;text-align:left;vertical-align:middle}.elf--transition-list .transition-item .labels label{background-color:var(--elf--border-color);border-radius:2px;font-weight:700;padding:1px 3px}.elf--transition-list .transition-item .labels label small{color:var(--elf--font-color)}.elf--transition-list .transition-item .labels label.property{border-bottom:0;font-weight:400}.elf--transition-list .transition-item .tools{padding-top:8px;text-align:right;vertical-align:middle}.elf--transition-property-popup{width:220px}.elf--transition-property-popup .box>div{margin-bottom:5px}.elf--transition-property-popup .box label{text-align:left;vertical-align:middle}.elf--transition-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--transition-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--transition-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--video-property .divider{background-color:var(--elf--divider-color);height:1px;margin:10px auto;width:30px}.elf--video-property .play-control{grid-column-gap:5px;display:grid;grid-template-columns:70px 1fr}.elf--video-property .play-control button[data-value]{display:none;text-align:left;vertical-align:middle;width:auto}.elf--video-property .play-control[data-selected-value=pause] button[data-value=pause],.elf--video-property .play-control[data-selected-value=play] button[data-value=play]{display:inline-block}.elf--video-property .volume-control{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr}.elf--video-property .volume-control span[data-value]{color:var(--elf--font-color);display:none;height:16px;vertical-align:middle;width:16px}.elf--video-property .volume-control span[data-value] svg{height:100%;width:100%}.elf--video-property .volume-control span[data-value] svg path{fill:currentColor}.elf--video-property .volume-control[data-selected-value=down] span[data-value=down],.elf--video-property .volume-control[data-selected-value=muted] span[data-value=muted],.elf--video-property .volume-control[data-selected-value=up] span[data-value=up]{display:inline-block}.elf--colorpicker-popup{padding:0 10px;width:244px}.elf--colorpicker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--colorpicker-popup .colorpicker input{border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--colorpicker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--colorpicker-popup .colorpicker .colorsets{border-top:1px solid var(--elf--border-color)!important}.elf--colorpicker-popup .assets{padding:0 10px}.elf--colorpicker-popup .assets .project-color-list{padding:5px 0}.elf--colorpicker-popup .assets .project-color-list .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border-radius:3px;display:inline-block;height:16px;margin-bottom:9px;margin-right:9px;overflow:hidden;position:relative;width:16px}.elf--colorpicker-popup .assets .project-color-list .color-item .color-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--colorpicker-popup .assets .project-color-list .color-item:hover{transform:scale(1.2)}.elf--content-item{grid-template-columns:1fr!important;padding:0 4px!important}.elf--content-item textarea{border:1px solid var(--elf--border-color);border-radius:3px;height:100px;width:100%}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--drag-area-view{height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%}.elf--drag-area-view .drag-area-rect{background-color:var(--elf--drag-area-rect-background-color);border:.5px solid var(--elf--drag-area-rect-border-color);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--page-tools{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);border-radius:3px;bottom:10px;box-sizing:border-box;color:var(--elf--font-color);display:inline-block;left:20px;padding:5px 10px;position:absolute}.elf--page-tools>*{display:inline-block;position:relative}.elf--page-tools>label{display:inline-block;height:100%;padding-top:5px;vertical-align:middle}.elf--page-tools button{border:0;border-radius:3px;display:inline-block;height:24px;padding:4px;position:relative;vertical-align:middle;width:24px}.elf--page-tools button.on{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--page-tools button svg{pointer-events:none}.elf--page-tools button[data-path-index="0"]:after{background-color:var(--elf--selected-color);border-radius:100%;content:"";height:4px;left:10px;position:absolute;top:100%;width:4px}.elf--page-tools>.select{border:1px solid rgba(var(--elf--selected-color),.5);border-radius:5px;display:inline-block;width:50px}.player .page-container{left:0;top:0}.elf--element-view{outline:none}.canvas-view,.elf--element-view{left:0;pointer-events:none;position:absolute;top:0}.canvas-view{height:100%;transform-origin:left top;width:100%;will-change:auto}.canvas-view[data-outline=true] .element-item{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view[data-outline=true] .element-item.svg-path{border:0!important}.canvas-view[data-outline=true] .element-item.artboard{border:2px dashed #595959!important}.canvas-view[data-outline=true] .element-item svg circle,.canvas-view[data-outline=true] .element-item svg ellipse,.canvas-view[data-outline=true] .element-item svg line,.canvas-view[data-outline=true] .element-item svg path,.canvas-view[data-outline=true] .element-item svg polygon,.canvas-view[data-outline=true] .element-item svg polyline,.canvas-view[data-outline=true] .element-item svg rect,.canvas-view[data-outline=true] .element-item svg text{fill:none!important;stroke:#595959!important;stroke-width:1px!important}.canvas-view .element-item.svg-path{pointer-events:none}.canvas-view .element-item.svg-path>*,.canvas-view .element-item.svg-path>svg>path{pointer-events:stroke}.canvas-view .element-item.svg-path>svg>:not([fill=transparent]){pointer-events:visible}.canvas-view .element-item{pointer-events:all;will-change:auto}.canvas-view .element-item [contenteditable=true],.canvas-view .element-item[contenteditable=true],.canvas-view .element-item[tabIndex]{outline:none}.canvas-view .element-item[data-is-boolean-item=true]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view .element-item[data-is-boolean-item=true].svg-path{border:0!important}.canvas-view .element-item[data-is-boolean-item=true] svg circle,.canvas-view .element-item[data-is-boolean-item=true] svg ellipse,.canvas-view .element-item[data-is-boolean-item=true] svg line,.canvas-view .element-item[data-is-boolean-item=true] svg path,.canvas-view .element-item[data-is-boolean-item=true] svg polygon,.canvas-view .element-item[data-is-boolean-item=true] svg polyline,.canvas-view .element-item[data-is-boolean-item=true] svg rect,.canvas-view .element-item[data-is-boolean-item=true] svg text{fill:none!important;stroke:transparent!important;stroke-width:1px!important}.canvas-view .element-item.artboard{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.canvas-view .element-item>svg circle:hover,.canvas-view .element-item>svg ellipse:hover,.canvas-view .element-item>svg line:hover,.canvas-view .element-item>svg path:hover,.canvas-view .element-item>svg polygon:hover,.canvas-view .element-item>svg polyline:hover,.canvas-view .element-item>svg rect:hover{stroke:#4040fc}.canvas-view .element-item>svg:hover>text{fill:#4040fc}.elf--horizontal-ruler{background-color:var(--elf--background-color);height:var(--elf--editor-ruler-size);left:var(--elf--editor-ruler-size);position:absolute;right:0;top:0;z-index:0}.elf--horizontal-ruler .horizontal-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--horizontal-ruler .horizontal-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--horizontal-ruler .horizontal-ruler-container svg.horizontal-line path{stroke:var(--elf--selected-color)}.elf--horizontal-ruler .horizontal-ruler-container .cursor{--elf--horizontal-cursor-position:0px;background-color:var(--elf--selected-color-2);height:100%;transform:translate(var(--elf--horizontal-cursor-position)) translateZ(0) translateY(-1px);width:2px}.elf--horizontal-ruler svg{transform:translateY(2px)}.elf--horizontal-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--horizontal-ruler svg path{stroke:var(--elf--font-color)}.elf--horizontal-ruler svg path[data-selected=true]{stroke:transparent}.elf--horizontal-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--vertical-ruler{background-color:var(--elf--background-color);bottom:0;box-sizing:border-box;left:0;position:absolute;top:var(--elf--editor-ruler-size);width:var(--elf--editor-ruler-size);z-index:0}.elf--vertical-ruler .vertical-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--vertical-ruler .vertical-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--vertical-ruler .vertical-ruler-container svg.vertical-line path{stroke:var(--elf--selected-color)}.elf--vertical-ruler .vertical-ruler-container .cursor{--elf--vertical-cursor-position:0px;background-color:var(--elf--selected-color-2);height:2px;transform:translateY(var(--elf--vertical-cursor-position)) translateZ(0);width:100%}.elf--vertical-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--vertical-ruler svg path{stroke:var(--elf--font-color)}.elf--vertical-ruler svg path[data-selected=true]{stroke:transparent}.elf--vertical-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0} diff --git a/docs/assets/editor.5891116e.js b/docs/assets/editor.5891116e.js new file mode 100644 index 000000000..c881032fd --- /dev/null +++ b/docs/assets/editor.5891116e.js @@ -0,0 +1,3794 @@ +var Yp=Object.defineProperty,Kp=Object.defineProperties;var Zp=Object.getOwnPropertyDescriptors;var ch=Object.getOwnPropertySymbols;var qp=Object.prototype.hasOwnProperty,Qp=Object.prototype.propertyIsEnumerable;var hh=(s,e,t)=>e in s?Yp(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,b=(s,e)=>{for(var t in e||(e={}))qp.call(e,t)&&hh(s,t,e[t]);if(ch)for(var t of ch(e))Qp.call(e,t)&&hh(s,t,e[t]);return s},ie=(s,e)=>Kp(s,Zp(e));var Jo=(s,e,t)=>{if(!e.has(s))throw TypeError("Cannot "+t)};var we=(s,e,t)=>(Jo(s,e,"read from private field"),t?t.call(s):e.get(s)),yt=(s,e,t)=>{if(e.has(s))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(s):e.set(s,t)},bt=(s,e,t,r)=>(Jo(s,e,"write to private field"),r?r.call(s,t):e.set(s,t),t),dh=(s,e,t,r)=>({set _(i){bt(s,e,i,t)},get _(){return we(s,e,r)}}),ba=(s,e,t)=>(Jo(s,e,"access private method"),t);const Jp=function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const a of i)if(a.type==="childList")for(const n of a.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&r(n)}).observe(document,{childList:!0,subtree:!0});function t(i){const a={};return i.integrity&&(a.integrity=i.integrity),i.referrerpolicy&&(a.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?a.credentials="include":i.crossorigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function r(i){if(i.ep)return;i.ep=!0;const a=t(i);fetch(i.href,a)}};Jp();function eg(s,e=()=>!0){let t=s,r=[];do{if(t instanceof Object===!1)break;const a=Object.getOwnPropertyNames(t).filter(e);r.push.apply(r,a)}while(t=Object.getPrototypeOf(t));return r}function So(s,e=0){if(e===0)return s;var t=void 0;return function(r,i,a,n,o){t&&window.clearTimeout(t),t=window.setTimeout(function(){s(r,i,a,n,o)},e||300)}}function sc(s,e){var t=void 0;return function(r,i,a,n,o){t||(t=window.setTimeout(function(){s(r,i,a,n,o),t=null},e||300))}}function tg(s,e,t){return(...r)=>{t.every(a=>e[a].apply(e,r))&&s.apply(e,r)}}function rg(s,e){return(...t)=>{window.requestAnimationFrame(()=>{s.apply(e,t)})}}function ho(s,e){Object.keys(s).forEach((t,r)=>{e(t,s[t],r)})}function Fd(s,e){return Object.keys(s).map((t,r)=>e(t,s[t],r))}function ig(s,e,t=""){return Fd(s,e).join(t)}function wt(s){return typeof s=="undefined"}function ke(s){return!wt(s)}function yi(s){return typeof s=="boolean"}function ct(s){return typeof s=="string"}function Ut(s){return Array.isArray(s)}function ti(s){return typeof s=="object"&&!Array.isArray(s)&&!ut(s)&&!ct(s)&&s!==null}function de(s){return typeof s=="function"}function ut(s){return typeof s=="number"}function sg(s){return s===0}function Hs(s){return!sg(s)}const ag=s=>JSON.parse(JSON.stringify(s));function ye(s){if(!wt(s))return ag(s)}function uh(s){return Object.keys(s).forEach(e=>{Array.isArray(s[e])&&(s[e]=s[e].join(", "))}),s}function Ur(...s){const e=[];return s.filter(Boolean).forEach(t=>{Ut(t)?e.push(Ur(...t)):ti(t)?Object.keys(t).filter(r=>Boolean(t[r])).forEach(r=>{e.push(r)}):ct(t)&&e.push(t)}),e.join(" ")}const ng=(s,e,t)=>{t?(s.setAttribute(e,e),s[e]=t):(s.removeAttribute(e),s[e]=t)},og=(s,e,t)=>{typeof t=="boolean"?ng(s,e,t):s.setAttribute(e,t)},lg=(s,e)=>{s.removeAttribute(e),s[e]=!1},cg=(s,e)=>{s.removeAttribute(e)},hg=(s,e,t)=>{typeof t=="boolean"?lg(s,e):e&&cg(s,e)},dg=(s,e,t,r)=>{t?(!r||t!==r)&&og(s,e,t):hg(s,e,r)},ug=(s,e={},t={})=>{const r=[];r.push.apply(r,Object.keys(e)),r.push.apply(r,Object.keys(t)),new Set(r).forEach(a=>{dg(s,a,e[a],t[a])})};function pg(s,e){return s.nodeType===window.Node.TEXT_NODE&&s.textContent!==e.textContent||s.nodeName!==e.nodeName}function ph(s){return(s==null?void 0:s.nodeType)===8?!0:s.nodeType!==window.Node.TEXT_NODE&&s.getAttribute("data-domdiff-pass")==="true"}function gg(s){return s.nodeType!==window.Node.TEXT_NODE&&s.getAttribute("refClass")}function gh(s){var e={};const t=s.length;for(let r=0;r{var e=s.firstChild;if(!e)return[];var t=[];do t.push(e),e=e.nextSibling;while(e);return t};function el(s,e,t={}){t.checkPassed=de(t.checkPassed)?t.checkPassed:void 0,t.removedElements=[],s=s.el||s,e=e.el||e;var r=uo(s),i=uo(e),a=Math.max(r.length,i.length);if(a!==0)if(r.length===0&&i.length>0)s.append(...i);else if(r.length>0&&i.length===0)s.textContent="";else for(var n=0;n`${e}=${Zs(t)}`).join(" ")}function Os(s={}){Object.keys(s).forEach(e=>{Gd[e]=s[e]})}function $g(s,e){Hd[s]=e}function _g(s){return Hd[s]}function Sg(s){return Gd[_g(s)||s]}function Pg(s){mg.add(s)}function wg(s){Object.keys(s).forEach(e=>{ao[e]=s[e]})}function Cg(s){return Object.keys(ao).filter(e=>Boolean(ao[e])).map(e=>{const t=ao[e];return new t(s)})}class ge{constructor(e,t,r){if(typeof e!="string")e instanceof ge?this.el=e.el:this.el=e;else{var i=document.createElement(e);t&&(i.className=t),r=r||{},Object.assign(i,r),this.el=i}}static create(e,t,r){return new ge(e,t,r)}static createByHTML(e){var t=ge.create("div");return t.html(e).firstChild}static makeElementList(e){const t=ge.create("div");let r=[];Ut(e)||(e=[e]),e=e.filter(Boolean);for(let i=0,a=e.length;i{this.attr(t,e[t])}),this}setAttrNS(e,t="http://www.w3.org/2000/svg"){return Object.keys(e).forEach(r=>{this.attr(r,e[r],t)}),this}setProp(e){return Object.keys(e).forEach(t=>{this.el[t]!=e[t]&&(this.el[t]=e[t])}),this}data(e,t){if(arguments.length===1){const r=this.attr("data-"+e);return yg(r,!1)}else if(arguments.length===2)return this.attr("data-"+e,t);return this}attr(...e){return e.length==1?de(this.el.getAttribute)&&this.el.getAttribute(e[0]):(this.el.getAttribute(e[0])!=e[1]&&this.el.setAttribute(e[0],e[1]),this)}attrNS(e,t,r="http://www.w3.org/2000/svg"){return arguments.length==1?this.el.getAttributeNS(r,e):(this.el.getAttributeNS(r,e)!=t&&this.el.setAttributeNS(r,e,t),this)}attrKeyValue(e){return{[this.el.getAttribute(e)]:this.val()}}get attributes(){try{return[...this.el.attributes],this.el.attributes}catch{const r=this.el.attributes.length,i=[];for(var e=0;ethis.el.getAttribute(t))}styles(...e){return e.map(t=>this.el.style[t])}removeAttr(e){return this.el.removeAttribute(e),this}removeStyle(e){return this.el.style.removeProperty(e),this}is(e){return e instanceof ge?this.el===e.el:this.el===e}isTag(e){return this.el.tagName.toLowerCase()===e.toLowerCase()}closest(e){for(var t=this,r=!1;!(r=t.hasClass(e));)if(t.el.parentNode)t=ge.create(t.el.parentNode);else return null;return r?t:null}path(){if(!this.el)return[];let e=[this],t=this.parent();if(!t.el)return e;for(;t&&(e.unshift(t),t=t.parent(),!!t.el););return e}get $parent(){return this.parent()}parent(){return ge.create(this.el.parentNode)}hasParent(){return!!this.el.parentNode}removeClass(...e){return this.el.classList.remove(...e),this}updateClass(e){return this.el.className=e,this}replaceClass(e,t){return this.el.classList.replace(e,t),this}hasClass(e){return this.el.classList?this.el.classList.contains(e):!1}addClass(...e){return this.el.classList.add(...e),this}onlyOneClass(e){var t=this.parent();t.children().forEach(r=>{r.removeClass(e)}),this.addClass(e)}toggleClass(e,t){return this.el.classList.toggle(e,t),this}outerHTML(){return this.isTextNode?this.text():this.el.outerHTML}html(e){try{return typeof e=="undefined"?this.el.innerHTML:(typeof e=="string"?Object.assign(this.el,{innerHTML:e}):this.empty().append(e),this)}catch(t){return console.log(t,e),this}}htmlDiff(e){el(this,e)}updateDiff(e,t="div",r={}){el(this,ge.create(t).html(e),r)}updateSVGDiff(e,t="div"){el(this,ge.create(t).html(`${e}`).firstChild.firstChild)}getById(e){return this.el.getElementById(e)}find(e){if(!this.isTextNode)return this.el.querySelector(e)}$(e){var t=this.find(e);return t?ge.create(t):null}findAll(e){return this.isTextNode?[]:Array.from(this.el.querySelectorAll(e))}$$(e){var t=this.findAll(e);return t.map(r=>ge.create(r))}empty(){for(;this.el.firstChild;)this.el.removeChild(this.el.firstChild);return this}append(e){return e?(Ut(e)?this.el.append(...e.map(t=>t.el||t)):typeof e=="string"?this.el.appendChild(document.createTextNode(e)):this.el.appendChild(e.el||e),this):this}prepend(e){return typeof e=="string"?this.el.prepend(document.createTextNode(e)):this.el.prepend(e.el||e),this}prependHTML(e){var t=ge.create("div").html(e);return this.prepend(t.createChildrenFragment()),t}appendHTML(e){var t=ge.create("div").html(e);return this.append(t.createChildrenFragment()),t}createChildrenFragment(){const e=this.childNodes;var t=document.createDocumentFragment();return e.forEach(r=>t.appendChild(r.el)),t}appendTo(e){var t=e.el?e.el:e;return t.appendChild(this.el),this}remove(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}removeChild(e){return this.el.removeChild(e.el||e),this}text(e){if(typeof e=="undefined")return this.el.textContent;var t=e;return e instanceof ge&&(t=e.text()),this.el.textContent!==t&&(this.el.textContent=t),this}css(e,t){if(typeof e!="undefined"&&typeof t!="undefined")e.indexOf("--")===0&&typeof t!="undefined"?this.el.style.setProperty(e,t):this.el.style[e]=t;else if(typeof e!="undefined"){if(typeof e=="string")return window.getComputedStyle(this.el)[e];Object.entries(e).forEach(([r,i])=>{r.indexOf("--")===0&&typeof i!="undefined"?this.el.style.setProperty(r,i):this.el.style[r]=i})}return this}getComputedStyle(...e){var t=window.getComputedStyle(this.el),r={};return e.forEach(i=>{r[i]=t[i]}),r}getStyleList(...e){for(var t={},r=this.el.style.length,i=0;i{t[n]=this.css(n)}),t}cssText(e){return typeof e=="undefined"?this.el.style.cssText:(e!=this.el.tempCssText&&(this.el.style.cssText=e,this.el.tempCssText=e),this)}cssArray(e){return e[0]&&(this.el.style[e[0]]=e[1]),e[2]&&(this.el.style[e[2]]=e[3]),e[4]&&(this.el.style[e[4]]=e[5]),e[6]&&(this.el.style[e[6]]=e[7]),e[8]&&(this.el.style[e[8]]=e[9]),this}cssFloat(e){return parseFloat(this.css(e))}cssInt(e){return parseInt(this.css(e))}px(e,t){return this.css(e,`${t}px`)}rect(){return this.el.getBoundingClientRect()}bbox(){return this.el.getBBox()}isSVG(){return this.el._cachedIsSVG||(this.el._cachedIsSVG={value:this.el.tagName.toLowerCase()==="svg"}),this.el._cachedIsSVG.value}offsetRect(){if(this.isSVG()){const t=this.parent().rect(),r=this.rect();return{x:r.x-t.x,y:r.y-t.y,width:r.width,height:r.height}}const e=this.el;return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}offsetClientRect(){if(this.isSVG()){const r=this.parent().rect(),i=this.rect();return{x:i.x-r.x,y:i.y-r.y,width:i.width,height:i.height}}const e=this.parent().rect(),t=this.rect();return{x:t.x-e.x,y:t.y-e.y,width:t.width,height:t.height}}offset(){var e=this.rect(),t=ge.getScrollTop(),r=ge.getScrollLeft();return{top:e.top+t,left:e.left+r}}offsetLeft(){return this.offset().left}offsetTop(){return this.offset().top}position(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.rect()}size(){return[this.width(),this.height()]}width(){return this.el.offsetWidth||this.rect().width}contentWidth(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}height(){return this.el.offsetHeight||this.rect().height}contentHeight(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}val(e){if(typeof e=="undefined")return this.el.value;if(typeof e!="undefined"){var t=e;e instanceof ge&&(t=e.val()),this.el.value=t}return this}matches(e){return this.el&&this.el.matches?this.el.matches(e)?this:this.parent().matches(e):null}get value(){return this.el.value}get naturalWidth(){return this.el.naturalWidth}get naturalHeight(){return this.el.naturalHeight}get files(){return this.el.files?[...this.el.files]:[]}get isTextNode(){return this.el.nodeType===3}realVal(){switch(this.el.nodeType){case"INPUT":var e=this.attr("type");return e=="checkbox"||e=="radio"?this.checked():this.el.value;case"SELECT":case"TEXTAREA":return this.el.value}return""}int(){return parseInt(this.val(),10)}float(){return parseFloat(this.val())}show(e="block"){return this.el.style.display=e!="none"?e:"block",this}hide(){return this.el.style.display="none",this}isHide(){return this.el.style.display==="none"}isShow(){return!this.isHide()}toggle(e){var t=this.isHide();return arguments.length==1?e?this.show():this.hide():t?this.show():this.hide()}get totalLength(){return this.el.getTotalLength()}scrollIntoView(){this.el.scrollIntoView()}addScrollLeft(e){return this.el.scrollLeft+=e,this}addScrollTop(e){return this.el.scrollTop+=e,this}setScrollTop(e){return this.el.scrollTop=e,this}setScrollLeft(e){return this.el.scrollLeft=e,this}scrollTop(){return this.el===document.body?ge.getScrollTop():this.el.scrollTop}scrollLeft(){return this.el===document.body?ge.getScrollLeft():this.el.scrollLeft}scrollHeight(){return this.el.scrollHeight}scrollWidth(){return this.el.scrollWidth}on(e,t,r,i){return this.el.addEventListener(e,t,r,i),this}off(e,t){return this.el.removeEventListener(e,t),this}getElement(){return this.el}createChild(e,t="",r={},i={}){let a=ge.create(e,t,r);return a.css(i),this.append(a),a}get firstChild(){return ge.create(this.el.firstElementChild)}get first(){return ge.create(this.el.firstChild)}children(){var e=this.el.firstElementChild;if(!e)return[];var t=[];do t.push(ge.create(e)),e=e.nextElementSibling;while(e);return t}get childNodes(){const e=[];if(this.el.hasChildNodes()){const t=this.el.childNodes;for(let r=0;r{i==0?t.moveTo(r[0],r[1]):t.lineTo(r[0],r[1])}),t.stroke(),t.fill(),t.closePath()}drawCircle(e,t,r){var i=this.context();i.beginPath(),i.arc(e,t,r,0,2*Math.PI),i.stroke(),i.fill()}drawText(e,t,r){this.context().fillText(r,e,t)}fullscreen(){var e=this.el;e.requestFullscreen?e.requestFullscreen():e.wekitRequestFullscreen&&e.wekitRequestFullscreen()}toggleFullscreen(){this.el===document.fullscreenElement?document.exitFullscreen():this.fullscreen()}}class Ud{constructor(e){this.id=ac(),this.cachedCallback={},this.callbacks={},this.editor=e}getCallbacks(e){return this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e]}setCallbacks(e,t=[]){this.callbacks[e]=t}debug(...e){this.editor&&this.editor.context.config.get("debug.mode")&&console.debug(...e)}on(e,t,r,i=0,a=0,n=!1,o=!1,l=[],c=!1){var h=t;return i>0?h=So(t,i):a>0&&(h=sc(t,a)),l.length&&(h=tg(h,r,l)),c&&(h=rg(h,r)),this.getCallbacks(e).push({event:e,callback:h,context:r,originalCallback:t,enableAllTrigger:n,enableSelfTrigger:o}),()=>{this.off(e,t)}}off(e,t){this.debug("off message event",e),arguments.length==1?this.setCallbacks(e):arguments.length==2&&this.setCallbacks(e,this.getCallbacks(e).filter(r=>r.originalCallback!==t))}offAll(e){Object.keys(this.callbacks).forEach(t=>{this.setCallbacks(t,this.getCallbacks(t).filter(r=>r.context!==e))}),this.debug("off all message",e.sourceName)}getCachedCallbacks(e){return this.getCallbacks(e)}sendMessage(e,t,...r){this.sendMessageList(e,[[t,...r]])}runMessage(e,t){const r=e.callback.apply(e.context,t);if(ke(r)){if(r===!1)return;if(de(r)){r();return}}}sendMessageList(e,t=[]){window.Promise.resolve().then(()=>{t.forEach(([r,...i])=>{var a=this.getCachedCallbacks(r);if(a&&a.length){const n=a.filter(l=>!l.enableSelfTrigger).filter(l=>l.enableAllTrigger||l.originalCallback.source!==e);let o=n.length;for(;o--;){const l=n[o];this.runMessage(l,i)}}else this.debug(`message event ${r} is not exist.`)})})}nextSendMessage(e,t,...r){window.Promise.resolve().then(()=>{t(...r)})}triggerMessage(e,t,...r){window.Promise.resolve().then(()=>{var i=this.getCachedCallbacks(t);i?i.filter(n=>n.originalCallback.source===e).forEach(n=>{n.callback.apply(n.context,r)}):this.debug(t," is not valid event")})}emit(e,...t){de(e)?e(...t):Ut(e)?this.sendMessageList(this.source,e):this.sendMessage(this.source,e,...t)}nextTick(e){this.nextSendMessage(this.source,e)}trigger(e,...t){de(e)?e(...t):this.triggerMessage(this.source,e,...t)}}const mh=/^@magic:([a-zA-Z][a-zA-Z0-9]*)[\W]{1}(.*)*$/g,vh="@magic:",Va="|",kg=/(([\$a-z_\-]+)\([^\(\)]*\)|([a-z_\-]+))/gi,yh="(",Tg=")",Dn={KEYWORD:"keyword",FUNCTION:"function",VALUE:"value"};class $i{constructor(e){this.context=e.context,this.originalMethod=e.originalMethod,this.method=e.method,this.args=e.args,this.pipes=e.pipes,this.keys=e.keys,this.__cache=new Map}setCache(e,t){this.__cache.set(e,t)}hasCache(e){return this.__cache.has(e)}getCache(e){return this.__cache.get(e)}hasKeyword(e){if(this.hasCache(e))return this.getCache(e);let t=!1;return this.pipes.forEach(r=>{switch(r.type){case Dn.KEYWORD:r.value===e&&(t=!0);break}}),this.setCache(e,t),t}hasFunction(e){if(this.hasCache(e))return this.getCache(e);let t=!!this.getFunction(e);return this.setCache(e,t),t}getFunction(e){return this.functions.find(t=>t.func===e)}getFunctionList(e){return this.functions.filter(t=>t.func===e)}get originalCallback(){return this.context[this.originalMethod]}get keywords(){return this.keys[Dn.KEYWORD].map(e=>e.value)}get functions(){return this.keys[Dn.FUNCTION]}get values(){return this.keys[Dn.VALUE].map(e=>e.value)}execute(...e){return this.originalCallback.call(this.context,...e)}executeWithContext(e,...t){return this.originalCallback.call(e,...t)}static make(e,...t){return`${vh}${e} ${t.join(Va)}`}static check(e){return e.match(mh)!==null}static parse(e,t={}){const r=e.match(mh);if(!r)return;const i=r[0].split(vh)[1].split(Va).map(u=>u.trim());let[a,...n]=i;const[o,...l]=a.split(" "),c=n.map(u=>this.parsePipe(u)).filter(u=>u.value),h={function:[],keyword:[],value:[]};return c.forEach(u=>{u.type==="function"?h.function.push(u):u.type==="keyword"?h.keyword.push(u):h.value.push(u)}),new $i({context:t,originalMethod:e,method:o,args:l,pipes:c,keys:h})}static parsePipe(e){const t=e.match(kg);if(!t)return{type:"value",value:e};const[r]=t;if(r.includes(yh)){const[i,a]=r.split(yh),[n]=a.split(Tg);return{type:"function",value:r,func:i,args:n.split(",").map(o=>o.trim()).filter(Boolean)}}return{type:"keyword",value:t[0]}}}const Mg=(s,e=Va)=>` ${e} ${s}`,Al=":",Ig=" ",Fe=(...s)=>{var e=s.join(Al);return(...t)=>{const[r,...i]=t;return $i.make("domevent",[e,r].join(" "),...i)}},Po=(...s)=>$i.make("subscribe",...s),Eg=(...s)=>$i.make("callback",...s),Ir=(s,e=Va)=>Mg(s,e),tn=(s,e=Va)=>Ir(`after(${s})`,e),fe=Ir,Ts=Ir("Enter"),Oa=Ir("Escape"),Lg=Ir("Delete"),Cr=Ir("isMouseLeftButton"),Ee=Ir("domdiff"),He=(s=100)=>Ir(`debounce(${s})`),Wd=(s=300)=>Ir(`delay(${s})`),sa=(s=100)=>Ir(`throttle(${s})`),Vg=Ir("allTrigger()"),Og=Ir("selfTrigger()"),Le=tn("preventDefault"),ri=tn("stopPropagation"),M=Po,rl=(...s)=>Po(...s,Vg),K=(...s)=>Po(...s,Og),Ct=(s,...e)=>Po(`config:${s}`,...e),jg=Eg;jg("requestAnimationFrame");const _i=Fe,z=Fe("click"),rn=Fe("dblclick");Fe("mousedown");Fe("mouseup");Fe("mousemove");const Xd=Fe("mouseover");Fe("mouseout");Fe("mouseenter");const Rg=Fe("mouseleave");Fe("touchstart");Fe("touchmove");Fe("touchend");const wo=Fe("keydown"),tr=Fe("keyup");Fe("keypress");Fe("drag");const yr=Fe("dragstart"),ii=Fe("drop"),si=Fe("dragover");Fe("dragenter");Fe("dragleave");Fe("dragexit");Fe("dragout");const zg=Fe("dragend"),Ag=Fe("contextmenu"),Tr=Fe("change"),ot=Fe("input"),Yd=Fe("focus"),po=Fe("focusin"),Ms=Fe("focusout"),Kd=Fe("blur"),Dg=Fe("paste"),Fg=Fe("resize");Fe("scroll");Fe("submit");const ve=(...s)=>_i("pointerdown")(...s)+Cr,go=_i("pointerover");_i("pointerenter");const Co=_i("pointerout"),ca=_i("pointermove"),Bg=_i("pointerup"),Ng=_i("change","input"),Zd=_i("wheel","mousewheel","DOMMouseScroll");Fe("animationstart");Fe("animationend");Fe("animationiteration");Fe("transitionstart");const Gg=Fe("transitionend");Fe("transitionrun");Fe("transitioncancel");const qd=_i("doubletab"),G=(s="$el")=>$i.make("load",s),Hg=s=>function(){return this.prevState[s]!=this.state[s]},Ug=()=>!0,ae=(s="$el")=>$i.make("bind",s);function Qd(s){let e=s.deltaX,t=s.deltaY;return e===0&&s.shiftKey&&([t,e]=[e,t]),s.deltaMode===window.WheelEvent.DOM_DELTA_LINE?t*=8:s.deltaMode===window.WheelEvent.DOM_DELTA_PAGE&&(t*=24),[bh(e,24),bh(t,24),0]}function bh(s,e){return Math.sign(s)*Math.min(e,Math.abs(s))}var il={addDomEvent(s,e,t,r=!1){s&&s.addEventListener(e,t,r)},removeDomEvent(s,e,t){s&&s.removeEventListener(e,t)},pos(s){return s.touches&&s.touches[0]?s.touches[0]:s},posXY(s){var e=this.pos(s);return{x:e.pageX,y:e.pageY}}};class sn{constructor(e,t={}){this.context=e,this.options=t}initialize(){}load(){}refresh(){}render(){}getRef(e){return this.context.getRef(e)}run(){}destroy(){}}const Wg=(s,e)=>{if(ut(e))switch(s){case"width":case"height":case"top":case"left":case"right":case"bottom":return e+"px"}return e},Xg=(s,e,t,r=!1)=>{if(e==="cssText"){s.cssText(t);return}else if(e==="style"){if(typeof t!="string"){const i={};if(Object.entries(t).forEach(([a,n])=>{i[a]=Wg(a,n)}),r){const a=Object.keys(i).map(n=>`${n}:${i[n]};`).join("");s.attr("style",a)}else s.css(i)}return}else if(e==="class"){Array.isArray(t)?s.updateClass(Ur(...t)):s.updateClass(Ur(t));return}else if(e==="callback"&&typeof t=="function"){t();return}typeof t=="undefined"?s.removeAttr(e):s.el.nodeName==="TEXTAREA"&&e==="value"||e==="text"||e==="textContent"?s.text(t):e==="innerHTML"||e==="html"?s.html(t):e==="htmlDiff"?s.updateDiff(t):e==="svgDiff"?s.updateSVGDiff(t):e==="value"?s.val(t):s.attr(e,t)},sl={};class Yg extends sn{async initialize(){sl[this.context.sourceName]||(sl[this.context.sourceName]=this.context.filterMethodes("bind"))}getBindMethods(){return sl[this.context.sourceName]||[]}async bindData(...e){const t=this.getBindMethods();if(!(t!=null&&t.length))return;const r=t==null?void 0:t.filter(i=>e.length?e.indexOf(i.args[0])>-1:!0);await Promise.all(r==null?void 0:r.map(async i=>{let a=this.getRef(`${i.keywords[0]}`),n=Ug;typeof a=="string"&&a!==""?n=Hg(a):typeof a=="function"&&(n=a);const o=i.args[0];let l=this.context.refs[o];const c=typeof n=="function"&&n.call(this.context);if(l&&c){const d=await i.executeWithContext(this.context,...e);if(!d)return;const v=Object.keys(d);for(var h=0,u=v.length;hthis.parseCallback(r))}destroy(){this.context.notEventRedefine||this.removeCallbackAll()}getCallback(e){return this.context[e]}removeCallbackAll(){this.getBindings().forEach(e=>{this.removeCallback(e)}),this.initBindings()}removeCallback({requestId:e}){window.cancelAnimationFrame(e)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}makeCallback(e){const t=e.callback,r=i=>{t(i),e.requestId=window.requestAnimationFrame(r)};return()=>{e.requestId=window.requestAnimationFrame(r)}}addCallback(e,t){const r=this.makeCallback(e,t);this.addBinding(e),r()}bindingCallback(e,t){var l,c;const r={eventName:e.args[0],callback:t};r.codes=[],r.checkMethodList=[];const i=e.getFunction("debounce"),a=e.getFunction("throttle");if(i){var n=+(((l=i.args)==null?void 0:l[0])||0);r.callback=So(t,n)}else if(a){var o=+(((c=a.args)==null?void 0:c[0])||0);r.callback=sc(t,o)}e.keywords.forEach(h=>{const u=h;this.getCallback(u)?r.checkMethodList.push(u):r.codes.push(u.toLowerCase())}),this.addCallback(r,e)}parseCallback(e){const t=this.context;var r=e.args;if(r){var i=t[e.originalMethod].bind(t);this.bindingCallback(e,i)}}}const Zg={touchstart:!0,touchmove:!0,mousedown:!0,mouseup:!0,mousemove:!0},qg={doubletab:"touchend"},Qg={doubletab:!0},Jg={self(s){return s&&s.$dt&&s.$dt.is(s.target)},isAltKey(s){return s.altKey},isCtrlKey(s){return s.ctrlKey},isShiftKey(s){return s.shiftKey},isMetaKey(s){return s.metaKey||s.key=="Meta"||s.code.indexOf("Meta")>-1},isMouseLeftButton(s){return s.buttons===1},isMouseRightButton(s){return s.buttons===2},hasMouse(s){return s.pointerType==="mouse"},hasTouch(s){return s.pointerType==="touch"},hasPen(s){return s.pointerType==="pen"},preventDefault(s){return s.preventDefault(),!0},stopPropagation(s){return s.stopPropagation(),!0}};class ef extends sn{initialize(){var e,t;this.destroy(),!(this._domEvents&&this.context.notEventRedefine)&&((!this._domEvents||this._domEvents.length===0||this._bindings.length===0)&&(this._domEvents=this.context.filterMethodes("domevent")),!((e=this._bindings)!=null&&e.length)&&((t=this._domEvents)==null?void 0:t.length)&&this._domEvents.forEach(r=>this.parseDomEvent(r)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}getCallback(e){return this.context[e]||Jg[e]}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}removeDomEvent({eventName:e,dom:t,callback:r}){il.removeDomEvent(t,e,r)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}matchPath(e,t){return e?e.matches(t)?e:this.matchPath(e.parentElement,t):null}hasDelegate(e,t){return this.matchPath(e.target||e.srcElement,t.delegate)}makeCallback(e,t,r){return e.delegate?this.makeDelegateCallback(e,t,r):this.makeDefaultCallback(e,t,r)}makeDefaultCallback(e,t,r){return i=>{var a=this.runEventCallback(i,e,t,r);if(ke(a))return a}}makeDelegateCallback(e,t,r){return i=>{const a=this.hasDelegate(i,e);if(a){i.$dt=ge.create(a);var n=this.runEventCallback(i,e,t,r);if(ke(n))return n}}}runEventCallback(e,t,r,i){const a=this.context;if(e.xy=il.posXY(e),t.beforeMethods.length&&t.beforeMethods.every(o=>this.getCallback(o.target).call(a,e,o.param)),this.checkEventType(e,t)){var n=i(e,e.$dt,e.xy);return n!==!1&&t.afterMethods.length&&t.afterMethods.forEach(o=>this.getCallback(o.target).call(a,e,o.param)),n}}checkEventType(e,t){const r=this.context;var i=!0;t.codes.length&&(i=(e.code?t.codes.indexOf(e.code.toLowerCase())>-1:!1)||(e.key?t.codes.indexOf(e.key.toLowerCase())>-1:!1));var a=!0;return t.checkMethodList.length&&(a=t.checkMethodList.every(n=>{var o=this.getCallback(n);return de(o)&&o?o.call(r,e):ke(o)?!!o:!0})),i&&a}getDefaultDomElement(e){const t=this.context;let r;return e?r=t.refs[e]||t[e]||window[e]:r=t.el||t.$el||t.$root,r instanceof ge?r.getElement():r}getRealEventName(e){return qg[e]||e}getCustomEventName(e){return Qg[e]?e:""}getDefaultEventObject(e,t,r,i,a){var g,y;const n={eventName:this.getRealEventName(e),customEventName:this.getCustomEventName(e),callback:a},[,,...o]=i.args;n.dom=this.getDefaultDomElement(t),n.delegate=o.join(Ig),n.beforeMethods=[],n.afterMethods=[],n.codes=[],n.checkMethodList=[];const l=i.getFunction("debounce"),c=i.getFunction("throttle");if(l){var h=+(((g=l.args)==null?void 0:g[0])||0);n.callback=So(a,h)}else if(c){var u=+(((y=c.args)==null?void 0:y[0])||0);n.callback=sc(a,u)}const d=i.getFunctionList("after"),v=i.getFunctionList("before");return d.length&&d.forEach(S=>{var _=S.args[0].split(" "),[L,I]=_;n.afterMethods.push({target:L,param:I})}),v.length&&v.forEach(S=>{var _=S.args[0].split(" "),[L,I]=_;n.beforeMethods.push({target:L,param:I})}),i.keywords.forEach(S=>{const _=S;this.getCallback(_)?n.checkMethodList.push(_):n.codes.push(_.toLowerCase())}),n}addDomEvent(e,t,r){e.callback=this.makeCallback(e,t,r),this.addBinding(e);var i=!1;t.hasKeyword("capture")&&(i=!0),Zg[e.eventName]&&(i={passive:!0,capture:i}),e.dom&&il.addDomEvent(e.dom,e.eventName,e.callback,i)}makeCustomEventCallback(e,t,r){var n;if(e.customEventName==="doubletab"){var i=300,a=t.getFunction("delay");return a&&(i=+(((n=a.args)==null?void 0:n[0])||0)),(...o)=>{this.doubleTab?(window.performance.now()-this.doubleTab.time{var i=r.split(Al);t.push.apply(t,i)}),t}parseDomEvent(e){const t=this.context;var r=e.args;if(r){var i=this.getEventNames(r[0]),a=t[e.originalMethod].bind(t);for(let n=0,o=i.length;nthis.parseObserver(r)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}disconnectObserver(e){e==null||e.disconnect()}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}addObserver(e){this.addBinding(e)}getDefaultDomElement(e){const t=this.context;let r;return e?r=t.refs[e]||t[e]||window[e]:r=t.el||t.$el||t.$root,r instanceof ge?r.getElement():r}createObserver(e,t){var c;const[r,i]=e.args||["intersection"],a=this.getDefaultDomElement(i),n=e.getFunction("params"),o=no((c=n==null?void 0:n.args)==null?void 0:c[0]);let l;switch(r){case"intersection":o.root&&(o.root=this.getDefaultDomElement(o.root)),l=new window.IntersectionObserver(t,o||{}),l.observe(a);break;case"mutation":l=new window.MutationObserver(t),l.observe(a,o||{attributes:!0,characterData:!0,childList:!0});break;case"performance":l=new window.PerformanceObserver(t),l.observe(o||{entryTypes:["paint"]});break}return l}bindingObserver(e,t){this.addObserver(this.createObserver(e,t))}parseObserver(e){const t=this.context;var r=t[e.originalMethod].bind(t);this.bindingObserver(e,r)}}class rf extends sn{initialize(){var e,t;this.destroy(),this._callbacks||(this._callbacks=this.context.filterMethodes("subscribe")),!((e=this._bindings)!=null&&e.length)&&((t=this._callbacks)==null?void 0:t.length)&&this._callbacks.forEach(r=>this.parseSubscribe(r))}destroy(){this.context.notEventRedefine||this.context.$store.offAll(this.context)}getCallback(e){return this.context[e]}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}createLocalCallback(e,t){var r=t.bind(this.context);return r.displayName=`${this.context.sourceName}.${e}`,r.source=this.context.source,r}parseSubscribe(e){var S,_;const t=e.args.join(" "),r=[],i=[];let a=0,n=0,o=!1,l=!1,c=!1;const h=e.getFunction("debounce"),u=e.getFunction("throttle"),d=e.getFunction("allTrigger"),v=e.getFunction("selfTrigger"),g=e.getFunction("frame");h&&(a=+(((S=h.args)==null?void 0:S[0])||0)),u&&(n=+(((_=u.args)==null?void 0:_[0])||0)),d&&(o=!0),v&&(l=!0),g&&(c=!0),e.keywords.forEach(L=>{const I=L;this.context[I]?r.push(I):i.push(I)});const y=this.context[e.originalMethod];[...i,t].filter(Boolean).forEach(L=>{var I=this.createLocalCallback(L,y);this.context.$store.on(L,I,this.context,a,n,o,l,r,c)}),this.addBinding(e)}}wg({BindHandler:Yg,CallbackHandler:Kg,DomEventHandler:ef,ObserverHandler:tf,StoreHandler:rf});const Ta="ref",xh=ge.create("div"),$h=`[${Ta}]`,Dl="refclass",sf=`[${Dl}]`,_h=[];var Kr,bo,Wa,Js,Xa,ea,ta,Vi,Ya,Ka,xo,Jd,Za,Bl,$o,eu;const zc=class{constructor(e,t){yt(this,xo);yt(this,Za);yt(this,$o);yt(this,Kr,{});yt(this,bo,{});yt(this,Wa,0);yt(this,Js,void 0);yt(this,Xa,void 0);yt(this,ea,void 0);yt(this,ta,{});yt(this,Vi,{});yt(this,Ya,!1);yt(this,Ka,[]);this.refs={},this.children={},this.id=fh(),this.initializeProperty(e,t),this.handlers=this.initializeHandler(),this.initComponents()}get __timestamp(){return we(this,Wa)}get timestamp(){return we(this,Xa)}set timestamp(e){bt(this,Xa,e)}get target(){return this.$el.el}checkProps(e={}){return e}initializeProperty(e,t={}){this.opt=e||{},this.parent=this.opt,this.source=fh(),this.sourceName=this.constructor.name,this.props=new Proxy(we(this,ta),{get:(r,i)=>ba(this,$o,eu).call(this,i),set:(r,i)=>{throw new Error(`${i} is readonly`)}}),ba(this,Za,Bl).call(this,t)}hasProp(e){return we(this,Ka).includes(e==null?void 0:e.toUpperCase())}setServer(e=!0){bt(this,Ya,e)}get isServer(){var e;return((e=this.parent)==null?void 0:e.isServer)||we(this,Ya)}initComponents(){this.childComponents=this.components()}initializeHandler(){return Cg(this)}initState(){return{}}setState(e={},t=!0){bt(this,bo,we(this,Kr)),bt(this,Kr,Object.assign({},we(this,Kr),e)),t&&this.load()}toggleState(e,t=!0){this.setState({[e]:!we(this,Kr)[e]},t)}apply(e){return xg(e)}_reload(e,t=null){t&&this.render(t),ba(this,Za,Bl).call(this,e),bt(this,Kr,{}),this.setState(this.initState(),!1),this.refresh(!0)}checkLoad(e){window.requestAnimationFrame(()=>{this.render(e)})}get state(){return we(this,Kr)}get propKeys(){return we(this,Vi)}get isPreLoaded(){return!0}async render(e){if(!this.isPreLoaded){this.checkLoad(e);return}const t=this.template(),r=this.parseTemplate(t);return this.$el?this.$el.htmlDiff(r):(this.$el=r,this.refs.$el=this.$el,e&&e.append(this.$el)),await this.load(),this.afterRender(),this}get html(){return this.$el.outerHTML()}initialize(){bt(this,Kr,this.initState())}afterRender(){}components(){return b({},this.parent.childComponents)}getRef(...e){const t=e.join("");return this.refs[t]}refreshElementReference(e,t){for(var r=e.$$($h),i=0,a=r.length;ithis._getComponentInfo(r)).filter(r=>t.length===0?!0:t.includes(r.refClass))}_getComponentInfo(e){const t=e.attr(Dl),r=this.getEventMachineComponent(t);if(r){let i=this.parsePropertyInfo(e),a=e.attr(Ta);return{$dom:e,refClass:t,props:i,refName:a||i.ref,component:r}}else return{refClass:t,notUsed:!0,$dom:e}}getComponentInfoList(e){if(!e)return _h;let t=e.$$(sf).filter(r=>r.path().filter(i=>i.attr(Dl)).length===1);return t.length?t.map(r=>this._getComponentInfo(r)):_h}async parseComponent(){const e=this.$el,t=this.getComponentInfoList(e);!t.length||(await Promise.all(t.map(async r=>{r.notUsed?(r.$dom.remove(),console.warn(`${r.refClass} is not used.`)):await this.renderComponent(r)})),ho(this.children,(r,i)=>{i.timestamp!==this.__timestamp&&i.clean()}))}clean(){if(this.$el&&!this.$el.hasParent())return ho(this.children,(e,t)=>{de(t==null?void 0:t.clean)&&t.clean()}),this.destroy(),!0}refresh(){this.load()}async _afterLoad(){ba(this,xo,Jd).call(this),this.runHandlers("initialize"),await this.bindData(),await this.parseComponent()}async makeLoadAction(e){const[t,...r]=e.args;let i=e.hasKeyword("domdiff");const a=this.refs[t];if(a){const n=await e.execute(...r),o=this.parseTemplate(n,!0);i?a.htmlDiff(o):a.html(o),this.refreshElementReference(a,t)}}async load(...e){we(this,Js)||bt(this,Js,this.filterMethodes("load"));const t=we(this,Js).filter(r=>e.length===0?!0:r.args[0]===e[0]);await Promise.all(t.map(async r=>{await this.makeLoadAction(r)})),await this._afterLoad()}async runHandlers(e="run",...t){await Promise.all(this.handlers.filter(r=>r[e]).map(async r=>{await r[e](...t)}))}async bindData(...e){await this.runHandlers("bindData",...e)}template(){return null}eachChildren(e){!de(e)||Object.keys(this.children).forEach(t=>{e(this.children[t])})}hmr(){this.created(),this.initialize(),this.rerender(),this.eachChildren(e=>{e.hmr()})}rerender(){var e=this.$el.parent();this.destroy(),this.render(e)}destroy(){this.eachChildren(e=>{e.destroy()}),this.runHandlers("destroy"),this.$el&&this.$el.remove(),this.$el=null,this.refs={},this.children={}}collectMethodes(e=!1){return(!we(this,ea)||e)&&bt(this,ea,eg(this,t=>$i.check(t)).map(t=>$i.parse(t,this))),we(this,ea)}filterMethodes(e,t=!1){return this.collectMethodes(t).filter(r=>r.method===e)}findChildren(e){return this.props.contentChildren.filter(t=>t.component===e)}getChildContent(e,t=""){var r;return((r=this.getChild(e))==null?void 0:r.props.content)||t}getChild(e){return this.props.contentChildren.find(e)}};let Fl=zc;Kr=new WeakMap,bo=new WeakMap,Wa=new WeakMap,Js=new WeakMap,Xa=new WeakMap,ea=new WeakMap,ta=new WeakMap,Vi=new WeakMap,Ya=new WeakMap,Ka=new WeakMap,xo=new WeakSet,Jd=function(){dh(this,Wa)._++},Za=new WeakSet,Bl=function(e){bt(this,ta,this.checkProps(e)),bt(this,Vi,{}),Object.keys(e).forEach(t=>{we(this,Vi)[t.toUpperCase()]=t}),bt(this,Ka,Object.keys(we(this,Vi)))},$o=new WeakSet,eu=function(e){return we(this,ta)[we(this,Vi)[e.toUpperCase()]]};var ys;const _o=class extends Fl{constructor(t,r={}){super(t,r);yt(this,ys,void 0);r.store?bt(this,ys,r.store):bt(this,ys,new Ud),this.created(),this.initialize()}currentContext(){return this.contexts[this.contexts.length-1]}setStore(t){bt(this,ys,t)}get $store(){return we(this,ys)||this.parent.$store}async created(){}createLocalCallback(t,r){var i=r.bind(this);return i.displayName=`${this.sourceName}.${t}`,i.source=this.source,i}emit(t,...r){this.$store.source=this.source,this.$store.sourceContext=this,this.$store.emit(t,...r)}nextTick(t,r=0){window.setTimeout(()=>{this.$store.nextTick(t)},r)}trigger(t,...r){this.$store.source=this.source,this.$store.trigger(t,...r)}broadcast(t,...r){Object.keys(this.children).forEach(i=>{this.children[i].trigger(t,...r),this.children[i].broadcast(t,...r)})}on(t,r,i=0,a=0,n=!1,o=!1,l=!1){this.$store.on(t,r,this.source,i,a,n,o,[],l)}off(t,r){this.$store.off(t,r,this.source)}subscribe(t,r=0,i=0){const a=`subscribe.${ac()}`,n=this.createLocalCallback(a,t);return this.$store.on(a,n,this,r,i,!1,!0),a}createFunctionComponent(t,r,i=_o){return super.createFunctionComponent(t,r,i)}static createElementInstance(t,r){if(t.__proto__.name===""){class i extends _o{template(){return t.call(this,this.props)}}return new i(r,r)}else return new t(r,r)}};let Ki=_o;ys=new WeakMap;const af=(s,e)=>{const t=ge.create(e.container||document.body),r=Ki.createElementInstance(s,e);return r.render(t),Pg(r),r};function nf(s,e=""){var t=s||{};return Object.keys(t).filter(r=>ke(t[r])).map(r=>`${r}: ${t[r]}`).join(";"+e)}function of(s){return Object.keys(s||{}).map(t=>t==="class"&&ti(s[t])?`${t}="${Ur(s[t])}"`:t==="style"&&ti(s[t])?`${t}="${nf(s[t])}"`:yi(s[t])||wt(s[t])||s[t]==="undefined"?s[t]?t:"":`${t}="${s[t]}"`).join(" ")}function O(s,e={},t=[]){t=t.flat(1/0).join("");let r;r=Object.keys(e).length?Zs(e):"";const i=e.ref?`ref="${e.ref}"`:"";return`${t}`}function ko(...s){return s.map(e=>{let t,r={},i=[];return ct(e)?t=e:Ut(e)&&([t,r={},i=[]]=e),i.length?O(t,r,ko(i)):O(t,r)}).join(` +`)}function nc(s,e,t=[]){return t=t.flat(1/0),`<${s} ${of(e)}>${t.join(" ")}`}function w(s,e={},...t){if(t=t.flat(1/0),s===jt)return t;if(e=e||{},typeof s!="string"){const r=s.name;return Os({[r]:s}),O(r,e,t)}else return nc(s,e,t)}const jt=new Object;var bi=1e-6,ir=typeof Float32Array!="undefined"?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var s=0,e=arguments.length;e--;)s+=arguments[e]*arguments[e];return Math.sqrt(s)});function tu(){var s=new ir(9);return ir!=Float32Array&&(s[1]=0,s[2]=0,s[3]=0,s[5]=0,s[6]=0,s[7]=0),s[0]=1,s[4]=1,s[8]=1,s}function al(s,e,t){var r=e[0],i=e[1],a=e[2],n=e[3],o=e[4],l=e[5],c=e[6],h=e[7],u=e[8],d=t[0],v=t[1],g=t[2],y=t[3],S=t[4],_=t[5],L=t[6],I=t[7],T=t[8];return s[0]=d*r+v*n+g*c,s[1]=d*i+v*o+g*h,s[2]=d*a+v*l+g*u,s[3]=y*r+S*n+_*c,s[4]=y*i+S*o+_*h,s[5]=y*a+S*l+_*u,s[6]=L*r+I*n+T*c,s[7]=L*i+I*o+T*h,s[8]=L*a+I*l+T*u,s}function lf(s,e){return s[0]=1,s[1]=0,s[2]=0,s[3]=0,s[4]=1,s[5]=0,s[6]=e[0],s[7]=e[1],s[8]=1,s}function cf(s,e){var t=Math.sin(e),r=Math.cos(e);return s[0]=r,s[1]=t,s[2]=0,s[3]=-t,s[4]=r,s[5]=0,s[6]=0,s[7]=0,s[8]=1,s}function hf(s,e){return s[0]=e[0],s[1]=0,s[2]=0,s[3]=0,s[4]=e[1],s[5]=0,s[6]=0,s[7]=0,s[8]=1,s}function Mt(){var s=new ir(16);return ir!=Float32Array&&(s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[11]=0,s[12]=0,s[13]=0,s[14]=0),s[0]=1,s[5]=1,s[10]=1,s[15]=1,s}function Oi(s,e,t,r,i,a,n,o,l,c,h,u,d,v,g,y){var S=new ir(16);return S[0]=s,S[1]=e,S[2]=t,S[3]=r,S[4]=i,S[5]=a,S[6]=n,S[7]=o,S[8]=l,S[9]=c,S[10]=h,S[11]=u,S[12]=d,S[13]=v,S[14]=g,S[15]=y,S}function df(s){return s[0]=1,s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[5]=1,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[10]=1,s[11]=0,s[12]=0,s[13]=0,s[14]=0,s[15]=1,s}function Sh(s,e){if(s===e){var t=e[1],r=e[2],i=e[3],a=e[6],n=e[7],o=e[11];s[1]=e[4],s[2]=e[8],s[3]=e[12],s[4]=t,s[6]=e[9],s[7]=e[13],s[8]=r,s[9]=a,s[11]=e[14],s[12]=i,s[13]=n,s[14]=o}else s[0]=e[0],s[1]=e[4],s[2]=e[8],s[3]=e[12],s[4]=e[1],s[5]=e[5],s[6]=e[9],s[7]=e[13],s[8]=e[2],s[9]=e[6],s[10]=e[10],s[11]=e[14],s[12]=e[3],s[13]=e[7],s[14]=e[11],s[15]=e[15];return s}function Ot(s,e){var t=e[0],r=e[1],i=e[2],a=e[3],n=e[4],o=e[5],l=e[6],c=e[7],h=e[8],u=e[9],d=e[10],v=e[11],g=e[12],y=e[13],S=e[14],_=e[15],L=t*o-r*n,I=t*l-i*n,T=t*c-a*n,V=r*l-i*o,F=r*c-a*o,H=i*c-a*l,W=h*y-u*g,le=h*S-d*g,ce=h*_-v*g,me=u*S-d*y,pe=u*_-v*y,Ve=d*_-v*S,q=L*Ve-I*pe+T*me+V*ce-F*le+H*W;return q?(q=1/q,s[0]=(o*Ve-l*pe+c*me)*q,s[1]=(i*pe-r*Ve-a*me)*q,s[2]=(y*H-S*F+_*V)*q,s[3]=(d*F-u*H-v*V)*q,s[4]=(l*ce-n*Ve-c*le)*q,s[5]=(t*Ve-i*ce+a*le)*q,s[6]=(S*T-g*H-_*I)*q,s[7]=(h*H-d*T+v*I)*q,s[8]=(n*pe-o*ce+c*W)*q,s[9]=(r*ce-t*pe-a*W)*q,s[10]=(g*F-y*T+_*L)*q,s[11]=(u*T-h*F-v*L)*q,s[12]=(o*le-n*me-l*W)*q,s[13]=(t*me-r*le+i*W)*q,s[14]=(y*I-g*V-S*L)*q,s[15]=(h*V-u*I+d*L)*q,s):null}function It(s,e,t){var r=e[0],i=e[1],a=e[2],n=e[3],o=e[4],l=e[5],c=e[6],h=e[7],u=e[8],d=e[9],v=e[10],g=e[11],y=e[12],S=e[13],_=e[14],L=e[15],I=t[0],T=t[1],V=t[2],F=t[3];return s[0]=I*r+T*o+V*u+F*y,s[1]=I*i+T*l+V*d+F*S,s[2]=I*a+T*c+V*v+F*_,s[3]=I*n+T*h+V*g+F*L,I=t[4],T=t[5],V=t[6],F=t[7],s[4]=I*r+T*o+V*u+F*y,s[5]=I*i+T*l+V*d+F*S,s[6]=I*a+T*c+V*v+F*_,s[7]=I*n+T*h+V*g+F*L,I=t[8],T=t[9],V=t[10],F=t[11],s[8]=I*r+T*o+V*u+F*y,s[9]=I*i+T*l+V*d+F*S,s[10]=I*a+T*c+V*v+F*_,s[11]=I*n+T*h+V*g+F*L,I=t[12],T=t[13],V=t[14],F=t[15],s[12]=I*r+T*o+V*u+F*y,s[13]=I*i+T*l+V*d+F*S,s[14]=I*a+T*c+V*v+F*_,s[15]=I*n+T*h+V*g+F*L,s}function $t(s,e,t){var r=t[0],i=t[1],a=t[2],n,o,l,c,h,u,d,v,g,y,S,_;return e===s?(s[12]=e[0]*r+e[4]*i+e[8]*a+e[12],s[13]=e[1]*r+e[5]*i+e[9]*a+e[13],s[14]=e[2]*r+e[6]*i+e[10]*a+e[14],s[15]=e[3]*r+e[7]*i+e[11]*a+e[15]):(n=e[0],o=e[1],l=e[2],c=e[3],h=e[4],u=e[5],d=e[6],v=e[7],g=e[8],y=e[9],S=e[10],_=e[11],s[0]=n,s[1]=o,s[2]=l,s[3]=c,s[4]=h,s[5]=u,s[6]=d,s[7]=v,s[8]=g,s[9]=y,s[10]=S,s[11]=_,s[12]=n*r+h*i+g*a+e[12],s[13]=o*r+u*i+y*a+e[13],s[14]=l*r+d*i+S*a+e[14],s[15]=c*r+v*i+_*a+e[15]),s}function Jr(s,e,t){var r=t[0],i=t[1],a=t[2];return s[0]=e[0]*r,s[1]=e[1]*r,s[2]=e[2]*r,s[3]=e[3]*r,s[4]=e[4]*i,s[5]=e[5]*i,s[6]=e[6]*i,s[7]=e[7]*i,s[8]=e[8]*a,s[9]=e[9]*a,s[10]=e[10]*a,s[11]=e[11]*a,s[12]=e[12],s[13]=e[13],s[14]=e[14],s[15]=e[15],s}function uf(s,e,t,r){var i=r[0],a=r[1],n=r[2],o=Math.hypot(i,a,n),l,c,h,u,d,v,g,y,S,_,L,I,T,V,F,H,W,le,ce,me,pe,Ve,q,Be;return o0?(S=Math.sqrt(y+1)*2,s[3]=.25*S,s[0]=(u-v)/S,s[1]=(d-l)/S,s[2]=(o-c)/S):n>h&&n>g?(S=Math.sqrt(1+n-h-g)*2,s[3]=(u-v)/S,s[0]=.25*S,s[1]=(o+c)/S,s[2]=(d+l)/S):h>g?(S=Math.sqrt(1+h-n-g)*2,s[3]=(d-l)/S,s[0]=(o+c)/S,s[1]=.25*S,s[2]=(u+v)/S):(S=Math.sqrt(1+g-n-h)*2,s[3]=(o-c)/S,s[0]=(d+l)/S,s[1]=(u+v)/S,s[2]=.25*S),s}function mf(s,e,t,r,i){var a=1/Math.tan(e/2),n;return s[0]=a/t,s[1]=0,s[2]=0,s[3]=0,s[4]=0,s[5]=a,s[6]=0,s[7]=0,s[8]=0,s[9]=0,s[11]=-1,s[12]=0,s[13]=0,s[15]=0,i!=null&&i!==1/0?(n=1/(r-i),s[10]=(i+r)*n,s[14]=2*i*r*n):(s[10]=-1,s[14]=-2*r),s}var vf=mf;function ei(){var s=new ir(3);return ir!=Float32Array&&(s[0]=0,s[1]=0,s[2]=0),s}function Wt(s){var e=new ir(3);return e[0]=s[0],e[1]=s[1],e[2]=s[2],e}function yf(s){var e=s[0],t=s[1],r=s[2];return Math.hypot(e,t,r)}function Te(s,e,t){var r=new ir(3);return r[0]=s,r[1]=e,r[2]=t,r}function Pe(s,e,t){return s[0]=e[0]+t[0],s[1]=e[1]+t[1],s[2]=e[2]+t[2],s}function $e(s,e,t){return s[0]=e[0]-t[0],s[1]=e[1]-t[1],s[2]=e[2]-t[2],s}function Ui(s,e,t){return s[0]=e[0]*t[0],s[1]=e[1]*t[1],s[2]=e[2]*t[2],s}function bf(s,e,t){return s[0]=e[0]/t[0],s[1]=e[1]/t[1],s[2]=e[2]/t[2],s}function Fr(s,e){return s[0]=Math.floor(e[0]),s[1]=Math.floor(e[1]),s[2]=Math.floor(e[2]),s}function Zi(s,e){return s[0]=Math.round(e[0]),s[1]=Math.round(e[1]),s[2]=Math.round(e[2]),s}function Ht(s,e){var t=e[0]-s[0],r=e[1]-s[1],i=e[2]-s[2];return Math.hypot(t,r,i)}function qt(s,e){return s[0]=-e[0],s[1]=-e[1],s[2]=-e[2],s}function xf(s,e){var t=e[0],r=e[1],i=e[2],a=t*t+r*r+i*i;return a>0&&(a=1/Math.sqrt(a)),s[0]=e[0]*a,s[1]=e[1]*a,s[2]=e[2]*a,s}function $f(s,e){return s[0]*e[0]+s[1]*e[1]+s[2]*e[2]}function nl(s,e,t){var r=e[0],i=e[1],a=e[2],n=t[0],o=t[1],l=t[2];return s[0]=i*l-a*o,s[1]=a*n-r*l,s[2]=r*o-i*n,s}function te(s,e,t,r){var i=e[0],a=e[1],n=e[2];return s[0]=i+r*(t[0]-i),s[1]=a+r*(t[1]-a),s[2]=n+r*(t[2]-n),s}function Xe(s,e,t){var r=e[0],i=e[1],a=e[2],n=t[3]*r+t[7]*i+t[11]*a+t[15];return n=n||1,s[0]=(t[0]*r+t[4]*i+t[8]*a+t[12])/n,s[1]=(t[1]*r+t[5]*i+t[9]*a+t[13])/n,s[2]=(t[2]*r+t[6]*i+t[10]*a+t[14])/n,s}function Nl(s,e){var t=s[0],r=s[1],i=s[2],a=e[0],n=e[1],o=e[2];return Math.abs(t-a)<=bi*Math.max(1,Math.abs(t),Math.abs(a))&&Math.abs(r-n)<=bi*Math.max(1,Math.abs(r),Math.abs(n))&&Math.abs(i-o)<=bi*Math.max(1,Math.abs(i),Math.abs(o))}var kh=bf,se=Ht,_f=yf;(function(){var s=ei();return function(e,t,r,i,a,n){var o,l;for(t||(t=3),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;o0&&(n=1/Math.sqrt(n)),s[0]=t*n,s[1]=r*n,s[2]=i*n,s[3]=a*n,s}(function(){var s=Sf();return function(e,t,r,i,a,n){var o,l;for(t||(t=4),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;obi?(s[0]=e[0]/r,s[1]=e[1]/r,s[2]=e[2]/r):(s[0]=1,s[1]=0,s[2]=0),t}function ol(s,e,t,r){var i=e[0],a=e[1],n=e[2],o=e[3],l=t[0],c=t[1],h=t[2],u=t[3],d,v,g,y,S;return v=i*l+a*c+n*h+o*u,v<0&&(v=-v,l=-l,c=-c,h=-h,u=-u),1-v>bi?(d=Math.acos(v),g=Math.sin(d),y=Math.sin((1-r)*d)/g,S=Math.sin(r*d)/g):(y=1-r,S=r),s[0]=y*i+S*l,s[1]=y*a+S*c,s[2]=y*n+S*h,s[3]=y*o+S*u,s}function Cf(s,e){var t=e[0]+e[4]+e[8],r;if(t>0)r=Math.sqrt(t+1),s[3]=.5*r,r=.5/r,s[0]=(e[5]-e[7])*r,s[1]=(e[6]-e[2])*r,s[2]=(e[1]-e[3])*r;else{var i=0;e[4]>e[0]&&(i=1),e[8]>e[i*3+i]&&(i=2);var a=(i+1)%3,n=(i+2)%3;r=Math.sqrt(e[i*3+i]-e[a*3+a]-e[n*3+n]+1),s[i]=.5*r,r=.5/r,s[3]=(e[a*3+n]-e[n*3+a])*r,s[a]=(e[a*3+i]+e[i*3+a])*r,s[n]=(e[n*3+i]+e[i*3+n])*r}return s}function kf(s,e,t,r){var i=.5*Math.PI/180;e*=i,t*=i,r*=i;var a=Math.sin(e),n=Math.cos(e),o=Math.sin(t),l=Math.cos(t),c=Math.sin(r),h=Math.cos(r);return s[0]=a*l*h-n*o*c,s[1]=n*o*h+a*l*c,s[2]=n*l*c-a*o*h,s[3]=n*l*h+a*o*c,s}var iu=Pf;(function(){var s=ei(),e=Te(1,0,0),t=Te(0,1,0);return function(r,i,a){var n=$f(i,a);return n<-.999999?(nl(s,e,i),_f(s)<1e-6&&nl(s,t,i),xf(s,s),wf(r,s,Math.PI),r):n>.999999?(r[0]=0,r[1]=0,r[2]=0,r[3]=1,r):(nl(s,i,a),r[0]=s[0],r[1]=s[1],r[2]=s[2],r[3]=1+n,iu(r,r))}})();(function(){var s=Gl(),e=Gl();return function(t,r,i,a,n,o){return ol(s,r,n,o),ol(e,i,a,o),ol(t,s,e,2*o*(1-o)),t}})();(function(){var s=tu();return function(e,t,r,i){return s[0]=r[0],s[3]=r[1],s[6]=r[2],s[1]=i[0],s[4]=i[1],s[7]=i[2],s[2]=-t[0],s[5]=-t[1],s[8]=-t[2],iu(e,Cf(e,s))}})();function Tf(){var s=new ir(2);return ir!=Float32Array&&(s[0]=0,s[1]=0),s}function Mf(s,e){var t=e[0]-s[0],r=e[1]-s[1];return Math.hypot(t,r)}function If(s,e){var t=s[0],r=s[1],i=e[0],a=e[1];return Math.abs(t-i)<=bi*Math.max(1,Math.abs(t),Math.abs(i))&&Math.abs(r-a)<=bi*Math.max(1,Math.abs(r),Math.abs(a))}(function(){var s=Tf();return function(e,t,r,i,a,n){var o,l;for(t||(t=2),r||(r=0),i?l=Math.min(i*t+r,e.length):l=e.length,o=r;otn(`bodyMouseFirstMove ${s}`),_e=(s="move")=>tn(`bodyMouseMove ${s}`),Se=(s="end")=>tn(`bodyMouseUp ${s}`),it="updateViewport",cu="toggle.fullscreen",Oe="refreshSelection",Is="refreshSelectionTool",Lf="refreshContent",Vf="showComponentPopup",hu="showNotify",an="resize.window",To="resizeCanvas",Lt="updateCanvas",du="openContextMenu";let Us={name:void 0};function oc(){return Us.name===void 0&&(window.navigator.appVersion.indexOf("Win")!=-1?Us.name="win":window.navigator.appVersion.indexOf("Mac")!=-1?Us.name="mac":window.navigator.appVersion.indexOf("X11")!=-1?Us.name="linux":Us.name=""),Us.name}const Es={backspace:8,tab:9,enter:13,escape:27,space:32,pageup:33,pagedown:34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,semicolon:59,equals:61,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,multiply:106,add:107,subtract:109,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,f16:127,f17:128,f18:129,f19:130,comma:188,",":188,period:190,".":190,slash:191,"/":191,backquote:192,"`":192,openbracket:219,"[":219,backslash:220,"\\":220,closebracket:221,"]":221,quote:222,"'":222,altgr:225},Of={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318",SHIFT:"\u21E7",CTRL:"\u2303",ALT:"\u2325",ENTER:"\u21B5",ESC:"\u238B",TAB:"\u21E5",SPACE:"\u2423",CAPSLOCK:"\u21EA",DELETE:"\u2326",INSERT:"\u2324",HOME:"\u21F1",END:"\u21F2",PAGEUP:"\u21DE",PAGEDOWN:"\u21DF",PRINTSCREEN:"\u2399",SCROLLLOCK:"\u21DE",PAUSE:"\u23CF",NUMLOCK:"\u21EA",META:"\u2318",WINDOWS:"\u2318",CONTEXTMENU:"\u2325",COMMAND:"\u2318"},jf=oc(),fr=(s,e=jf)=>(s[e]||s.key).split("+").map(t=>t.trim()).map(t=>{const r=t.toUpperCase();return Of[r]||r}).join(" ");class X extends Ki{get notEventRedefine(){return!0}get $editor(){if(!this.__cacheParentEditor){let e=this.parent;for(;e;){if(e.$editor){this.__cacheParentEditor=e.$editor;break}e=e.parent}}return this.__cacheParentEditor}get $context(){return this.$editor.context}get $store(){return this.$context.store||this.parent.$store}get localeKey(){return""}getMessageKey(e){return this.localeKey?`${this.localeKey}.${e}`:e}$i18n(e,t={},r){return this.$editor.getI18nMessage(this.getMessageKey(e),t,r)}$initI18n(e){return this.$editor.initI18nMessage(this.getMessageKey(e))}get $config(){return this.$context.config}get $selection(){return this.$context.selection}get $segmentSelection(){return this.$context.segmentSelection}get $commands(){return this.$context.commands}get $viewport(){return this.$context.viewport}get $snapManager(){return this.$context.snapManager}get $timeline(){return this.$context.timeline}get $history(){return this.$context.history}get $shortcuts(){return this.$context.shortcuts}get $keyboardManager(){return this.$context.keyboardManager}get $storageManager(){return this.$context.storageManager}get $injectManager(){return this.$context.injectManager}get $model(){return this.$context.modelManager}get $lockManager(){return this.$context.lockManager}get $visibleManager(){return this.$context.visibleManager}get $modeView(){return this.$context.modeViewManager}get $icon(){return this.$context.icon}get $stateManager(){return this.$context.stateManager}get $menu(){return this.$context.menuManager}notify(e,t,r,i=1e3){this.emit(hu,e,t,r,i)}alert(e,t,r=1e3){this.notify(Ef.ALERT,e,t,r)}$theme(e){return this.$editor.themeValue(e)}bodyMouseFirstMove(e,t){this[t]&&this.emit(nu,this[t],this,e.xy)}bodyMouseMove(e,t){this[t]&&this.emit(ou,this[t],this,e.xy)}bodyMouseUp(e,t){this[t]&&this.emit(lu,this[t],this,e.xy)}createFunctionComponent(e,t,r=X){return super.createFunctionComponent(e,t,r)}}class Rf extends X{initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.refreshCursor()})}template(){return w("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},w("div",{class:"page-view",ref:"$pageView"},w("div",{class:"page-lock scrollbar",ref:"$lock"},this.$injectManager.generate("canvas.view"))))}[ae("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$context.config.is("editing.mode",_t.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(Es.space))}[ve("$lock")+fe("checkSpace")+_e("movePan")+Se("moveEndPan")](){this.startMovePan()}[Ct("editing.mode")](){this.$config.is("editing.mode",_t.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ei()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const r=Te(e,t,0);this.$context.viewport.pan(...Xe([],$e([],this.lastDist,r),this.$context.viewport.scaleMatrixInverse)),this.lastDist=r}refreshCursor(){this.$context.config.is("editing.mode",_t.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}async[ae("$container")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}[si("$lock")+Le](){}[ii("$lock")+Le](e){const t=this.$context.viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$command.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const r=ge.create(e.target).attr("data-id");if(r)this.$command.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},r);else{const i=e.dataTransfer.getData("image/info");this.$command.emit("dropImageUrl",i)}}}[Zd("$lock")+Le](e){const[t,r]=Qd(e);if(!this.state.gesture)e.ctrlKey&&this.$context.viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const i=1-2.5*r/100;this.$context.viewport.zoom(i)}else{const i=-2.5*t,a=-2.5*r;this.$context.viewport.pan(-i/this.$viewport.scale,-a/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$context.viewport.refreshCanvasSize(this.refs.$lock.rect())}[M(an,To)](){this.refreshCanvasSize()}[Ct("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Ct("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[M(it)](){this.$commands.emit("refreshCursor","auto")}}class uu extends X{template(){return` +
      + ${this.$injectManager.generate("page.subeditor.view")} +
      + `}}class zf extends X{components(){return{BlankCanvasView:Rf,PageSubEditor:uu}}template(){return` +
      +
      + ${O("PageSubEditor")} +
      +
      +
      + ${O("BlankCanvasView")} +
      + +
      +
      + `}[M(cu)](){this.refs.$el.toggleFullscreen()}}class lc extends Ki{get notEventRedefine(){return!0}getValue(){return this.props.defaultValue}sendEvent(){const e=this.props.key,t=this.getValue(),r=this.props.params;de(this.props.onClick)?this.props.onClick(e,t,r):this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):ct(this.props.action)||de(this.props.action)?this.emit(this.props.action,e,t,r):Ut(this.props.action)?this.emit(this.props.action.map(i=>[i,e,t,r])):this.props.onChange&&this.parent.trigger(this.props.onChange,e,t,r)}}class Af extends lc{initState(){return{label:this.props.label||"",text:this.props.text||"",params:this.props.params||""}}template(){return"
      "}[G("$body")+Ee](){var{label:e,text:t}=this.state,r=e?"has-label":"";return` +
      + ${e?``:""} +
      + +
      +
      + `}getValue(){return this.props.defaultValue}[z("$el button")](){this.sendEvent()}}const Df=["True","False"];class Ff extends lc{initState(){return{checkedValue:this.props.checkedValue||this.props.value,checked:this.props.value||"false",size:this.props.size,toggleLabels:this.props.toggleLabels||Df,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||["true","false"]}}template(){return w("div",{class:"small-editor button",ref:"$body"})}[G("$body")+Ee](){var{checked:e,checkedValue:t}=this.state;return` +
      +
      + ${this.state.toggleValues.map((r,i)=>{let a=this.state.toggleLabels[i],n=this.state.toggleTitles[i];return w("div",{class:`${r===e?"visible":""} ${r===t?"checked":""}`},w("button",{type:"button","data-index":i,class:r===t?"checked":"",value:r,title:n,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},a))}).join("")} +
      +
      + `}[ae("$area")](){return{"data-selected-index":this.state.toggleValues.findIndex(t=>t===this.state.checked)}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[z("$el button")+Le+ri](e){const t=e.$dt.value,r=this.state.toggleValues.findIndex(a=>a===t),i=this.state.toggleValues[(r+1)%this.state.toggleValues.length];this.setValue(i),this.trigger("change")}[K("change")](){this.sendEvent()}}const Bf=["True","False"];class Nf extends lc{initState(){return{label:this.props.label||"",checked:this.props.value||!1,toggleLabels:this.props.toggleLabels||Bf,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||[!0,!1]}}template(){return w("div",{class:"small-editor button",ref:"$body"})}[G("$body")](){var{label:e,checked:t}=this.state,r=e?"has-label":"";return` +
      + ${e?``:""} +
      + ${this.state.toggleValues.map((i,a)=>{let n=this.state.toggleLabels[a],o=this.state.toggleTitles[a];return w("div",null,w("button",{type:"button",class:`${i===t?"checked":""}`,"data-index":a,title:o,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},n))}).join("")} +
      +
      + `}[ae("$area")](){const e=this.state.toggleValues.findIndex(r=>r===this.state.checked),t=100/this.state.toggleValues.length;return{"data-selected-index":e,cssText:` + --unit-count: ${this.state.toggleValues.length}; + --button-font-size: ${13-this.state.toggleValues.length}px ; + --selected-button-size: ${1/this.state.toggleValues.length*100}%; + --selected-button-position: ${e*t}%; + `}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[z("$el button")](e){const t=+e.$dt.data("index");this.setValue(this.state.toggleValues[t]),this.trigger("change")}[K("change")](){this.sendEvent()}}class ja extends Ki{initState(){return{value:this.props.value||""}}template(){const{content:e}=this.props,{value:t}=this.state;return w("div",{class:"tab-content scrollbar","data-value":t},e)}}class cc extends Ki{afterRender(){window.setTimeout(()=>{this.setValue(this.state.selectedValue)},0)}initState(){return{type:this.props.type||"number",direction:this.props.direction||"",selectedValue:this.props.selectedValue||""}}template(){return` +
      + `}[G("$tab")](){const{content:e,contentChildren:t=[]}=this.props,r=t.filter(i=>i.component===ja);return[w("div",{class:"tab-header",ref:"$header"},r.map(i=>w("div",{class:"tab-item","data-value":i.props.value,title:i.props.title},w("label",{class:"title"},i.props.icon||i.props.title)))),w("div",{class:"tab-body",ref:"$body"},e)]}[z("$header .tab-item:not(.empty-item)")](e){var t=e.$dt.attr("data-value");this.setValue(t)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.getValue())}getValue(){return this.state.selectedValue}setValue(e){var t,r;(t=this.$el.$(`* > .tab-item[data-value="${e}"]`))==null||t.onlyOneClass("selected"),(r=this.$el.$(`* > .tab-content[data-value="${e}"]`))==null||r.onlyOneClass("selected"),this.updateData({selectedValue:e})}}class Gf extends X{template(){return w("div",{class:"feature-control inspector"},w("div",null,w(cc,{ref:"$tab",selectedValue:this.$config.get("inspector.selectedValue"),onchange:e=>{this.$config.set("inspector.selectedValue",e)}},this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:r,icon:i,loadElements:a=[]}=e.class;return w(ja,{value:t,title:r,icon:i},w("div",{style:"display: flex: flex-direction: column;"},a==null?void 0:a.map(n=>nc(n)),this.$injectManager.generate("inspector.tab."+t),w("div",{class:"empty",style:"order: 1000000;"})))}))))}}class Hf extends X{template(){return w("div",{class:"layer-tab"},w(cc,{ref:"$tab",type:"side",direction:"left",selectedValue:this.$config.get("layertab.selectedValue"),onchange:e=>{this.$config.set("layertab.selectedValue",e)}},this.$injectManager.getTargetUI("layertab.tab").map(e=>{const{value:t,title:r,icon:i,loadElements:a=[]}=e.class;return w(ja,{value:t,title:r,icon:i},w("div",{style:"display: flex: flex-direction: column;"},a==null?void 0:a.map(n=>nc(n)),this.$injectManager.generate("layertab.tab."+t),w("div",{class:"empty",style:"order: 1000000;"})))})))}}function C(s,e){const t=Object.assign({width:24,height:24},e);return` + ${s}`}var Uf=Object.freeze(Object.defineProperty({__proto__:null,default:C},Symbol.toStringTag,{value:"Module"})),Wf=C(''),Xf=Object.freeze(Object.defineProperty({__proto__:null,default:Wf},Symbol.toStringTag,{value:"Module"})),Yf=C(''),Kf=Object.freeze(Object.defineProperty({__proto__:null,default:Yf},Symbol.toStringTag,{value:"Module"})),Zf=C(''),qf=Object.freeze(Object.defineProperty({__proto__:null,default:Zf},Symbol.toStringTag,{value:"Module"})),Qf=C(''),Jf=Object.freeze(Object.defineProperty({__proto__:null,default:Qf},Symbol.toStringTag,{value:"Module"})),em=C(''),tm=Object.freeze(Object.defineProperty({__proto__:null,default:em},Symbol.toStringTag,{value:"Module"})),rm=C(''),im=Object.freeze(Object.defineProperty({__proto__:null,default:rm},Symbol.toStringTag,{value:"Module"})),sm=C(''),am=Object.freeze(Object.defineProperty({__proto__:null,default:sm},Symbol.toStringTag,{value:"Module"})),nm=C(''),om=Object.freeze(Object.defineProperty({__proto__:null,default:nm},Symbol.toStringTag,{value:"Module"})),lm=C(''),cm=Object.freeze(Object.defineProperty({__proto__:null,default:lm},Symbol.toStringTag,{value:"Module"})),hm=C(''),dm=Object.freeze(Object.defineProperty({__proto__:null,default:hm},Symbol.toStringTag,{value:"Module"})),um=C(''),pm=Object.freeze(Object.defineProperty({__proto__:null,default:um},Symbol.toStringTag,{value:"Module"})),gm=C(''),fm=Object.freeze(Object.defineProperty({__proto__:null,default:gm},Symbol.toStringTag,{value:"Module"})),mm=C(''),vm=Object.freeze(Object.defineProperty({__proto__:null,default:mm},Symbol.toStringTag,{value:"Module"})),ym=C(''),bm=Object.freeze(Object.defineProperty({__proto__:null,default:ym},Symbol.toStringTag,{value:"Module"})),xm=C(''),$m=Object.freeze(Object.defineProperty({__proto__:null,default:xm},Symbol.toStringTag,{value:"Module"})),_m=C(''),Sm=Object.freeze(Object.defineProperty({__proto__:null,default:_m},Symbol.toStringTag,{value:"Module"})),Pm=C(''),wm=Object.freeze(Object.defineProperty({__proto__:null,default:Pm},Symbol.toStringTag,{value:"Module"})),Cm=C(''),km=Object.freeze(Object.defineProperty({__proto__:null,default:Cm},Symbol.toStringTag,{value:"Module"})),Tm=C(''),Mm=Object.freeze(Object.defineProperty({__proto__:null,default:Tm},Symbol.toStringTag,{value:"Module"})),Im=C(''),Em=Object.freeze(Object.defineProperty({__proto__:null,default:Im},Symbol.toStringTag,{value:"Module"})),Lm=C(''),Vm=Object.freeze(Object.defineProperty({__proto__:null,default:Lm},Symbol.toStringTag,{value:"Module"})),Om=C(''),jm=Object.freeze(Object.defineProperty({__proto__:null,default:Om},Symbol.toStringTag,{value:"Module"})),Rm=C('',{width:48,height:48}),zm=Object.freeze(Object.defineProperty({__proto__:null,default:Rm},Symbol.toStringTag,{value:"Module"})),Am=C(''),Dm=Object.freeze(Object.defineProperty({__proto__:null,default:Am},Symbol.toStringTag,{value:"Module"})),Fm=C(''),Bm=Object.freeze(Object.defineProperty({__proto__:null,default:Fm},Symbol.toStringTag,{value:"Module"})),Nm=C(''),Gm=Object.freeze(Object.defineProperty({__proto__:null,default:Nm},Symbol.toStringTag,{value:"Module"})),Hm=C(''),Um=Object.freeze(Object.defineProperty({__proto__:null,default:Hm},Symbol.toStringTag,{value:"Module"})),Wm=C(''),Xm=Object.freeze(Object.defineProperty({__proto__:null,default:Wm},Symbol.toStringTag,{value:"Module"})),Ym=C(''),Km=Object.freeze(Object.defineProperty({__proto__:null,default:Ym},Symbol.toStringTag,{value:"Module"})),Zm=C('',{width:30,height:30}),qm=Object.freeze(Object.defineProperty({__proto__:null,default:Zm},Symbol.toStringTag,{value:"Module"})),Qm=C(``,{width:30,height:30}),Jm=Object.freeze(Object.defineProperty({__proto__:null,default:Qm},Symbol.toStringTag,{value:"Module"})),ev=C('',{width:30,height:30}),tv=Object.freeze(Object.defineProperty({__proto__:null,default:ev},Symbol.toStringTag,{value:"Module"})),rv=C(``,{width:30,height:30}),iv=Object.freeze(Object.defineProperty({__proto__:null,default:rv},Symbol.toStringTag,{value:"Module"})),sv=C(''),av=Object.freeze(Object.defineProperty({__proto__:null,default:sv},Symbol.toStringTag,{value:"Module"})),nv=C(''),ov=Object.freeze(Object.defineProperty({__proto__:null,default:nv},Symbol.toStringTag,{value:"Module"})),lv=C(''),cv=Object.freeze(Object.defineProperty({__proto__:null,default:lv},Symbol.toStringTag,{value:"Module"})),hv=C(''),dv=Object.freeze(Object.defineProperty({__proto__:null,default:hv},Symbol.toStringTag,{value:"Module"})),uv=C(''),pv=Object.freeze(Object.defineProperty({__proto__:null,default:uv},Symbol.toStringTag,{value:"Module"})),gv=C(''),fv=Object.freeze(Object.defineProperty({__proto__:null,default:gv},Symbol.toStringTag,{value:"Module"})),mv=C(''),vv=Object.freeze(Object.defineProperty({__proto__:null,default:mv},Symbol.toStringTag,{value:"Module"})),yv=C(''),bv=Object.freeze(Object.defineProperty({__proto__:null,default:yv},Symbol.toStringTag,{value:"Module"})),xv=C(` + +`),$v=Object.freeze(Object.defineProperty({__proto__:null,default:xv},Symbol.toStringTag,{value:"Module"})),_v=C(` + +`),Sv=Object.freeze(Object.defineProperty({__proto__:null,default:_v},Symbol.toStringTag,{value:"Module"})),Pv=C(''),wv=Object.freeze(Object.defineProperty({__proto__:null,default:Pv},Symbol.toStringTag,{value:"Module"})),Cv=C(''),kv=Object.freeze(Object.defineProperty({__proto__:null,default:Cv},Symbol.toStringTag,{value:"Module"})),Tv=C(''),Mv=Object.freeze(Object.defineProperty({__proto__:null,default:Tv},Symbol.toStringTag,{value:"Module"})),Iv=C(` + +`),Ev=Object.freeze(Object.defineProperty({__proto__:null,default:Iv},Symbol.toStringTag,{value:"Module"})),Lv=C(''),Vv=Object.freeze(Object.defineProperty({__proto__:null,default:Lv},Symbol.toStringTag,{value:"Module"})),Ov=C(''),jv=Object.freeze(Object.defineProperty({__proto__:null,default:Ov},Symbol.toStringTag,{value:"Module"})),Rv=C(''),zv=Object.freeze(Object.defineProperty({__proto__:null,default:Rv},Symbol.toStringTag,{value:"Module"})),Av=C(''),Dv=Object.freeze(Object.defineProperty({__proto__:null,default:Av},Symbol.toStringTag,{value:"Module"})),Fv=C(''),Bv=Object.freeze(Object.defineProperty({__proto__:null,default:Fv},Symbol.toStringTag,{value:"Module"})),Nv=C(''),Gv=Object.freeze(Object.defineProperty({__proto__:null,default:Nv},Symbol.toStringTag,{value:"Module"})),Hv=C(''),Uv=Object.freeze(Object.defineProperty({__proto__:null,default:Hv},Symbol.toStringTag,{value:"Module"})),Wv=C(` + +`),Xv=Object.freeze(Object.defineProperty({__proto__:null,default:Wv},Symbol.toStringTag,{value:"Module"})),Yv=C(''),Kv=Object.freeze(Object.defineProperty({__proto__:null,default:Yv},Symbol.toStringTag,{value:"Module"})),Zv=C(` + + + +`),qv=Object.freeze(Object.defineProperty({__proto__:null,default:Zv},Symbol.toStringTag,{value:"Module"})),Qv=C(''),Jv=Object.freeze(Object.defineProperty({__proto__:null,default:Qv},Symbol.toStringTag,{value:"Module"})),e1=C(''),t1=Object.freeze(Object.defineProperty({__proto__:null,default:e1},Symbol.toStringTag,{value:"Module"})),r1=C(''),i1=Object.freeze(Object.defineProperty({__proto__:null,default:r1},Symbol.toStringTag,{value:"Module"})),s1=C(''),a1=Object.freeze(Object.defineProperty({__proto__:null,default:s1},Symbol.toStringTag,{value:"Module"})),n1=C(''),o1=Object.freeze(Object.defineProperty({__proto__:null,default:n1},Symbol.toStringTag,{value:"Module"}));function l1(s=""){return C(` + + `,{width:24,height:24,viewBoxWidth:16,viewBoxHeight:16})}var c1=Object.freeze(Object.defineProperty({__proto__:null,default:l1},Symbol.toStringTag,{value:"Module"})),h1=C(''),d1=Object.freeze(Object.defineProperty({__proto__:null,default:h1},Symbol.toStringTag,{value:"Module"})),u1=C(''),p1=Object.freeze(Object.defineProperty({__proto__:null,default:u1},Symbol.toStringTag,{value:"Module"})),g1=C(''),f1=Object.freeze(Object.defineProperty({__proto__:null,default:g1},Symbol.toStringTag,{value:"Module"})),m1=C(''),v1=Object.freeze(Object.defineProperty({__proto__:null,default:m1},Symbol.toStringTag,{value:"Module"})),y1=C(''),b1=Object.freeze(Object.defineProperty({__proto__:null,default:y1},Symbol.toStringTag,{value:"Module"})),x1=C(''),$1=Object.freeze(Object.defineProperty({__proto__:null,default:x1},Symbol.toStringTag,{value:"Module"})),_1=C(''),S1=Object.freeze(Object.defineProperty({__proto__:null,default:_1},Symbol.toStringTag,{value:"Module"})),P1=C(''),w1=Object.freeze(Object.defineProperty({__proto__:null,default:P1},Symbol.toStringTag,{value:"Module"})),C1=C(''),k1=Object.freeze(Object.defineProperty({__proto__:null,default:C1},Symbol.toStringTag,{value:"Module"})),T1=C(''),M1=Object.freeze(Object.defineProperty({__proto__:null,default:T1},Symbol.toStringTag,{value:"Module"})),I1=C(''),E1=Object.freeze(Object.defineProperty({__proto__:null,default:I1},Symbol.toStringTag,{value:"Module"})),L1=C(''),V1=Object.freeze(Object.defineProperty({__proto__:null,default:L1},Symbol.toStringTag,{value:"Module"})),O1=C(''),j1=Object.freeze(Object.defineProperty({__proto__:null,default:O1},Symbol.toStringTag,{value:"Module"})),R1=C(''),z1=Object.freeze(Object.defineProperty({__proto__:null,default:R1},Symbol.toStringTag,{value:"Module"})),A1=C(''),D1=Object.freeze(Object.defineProperty({__proto__:null,default:A1},Symbol.toStringTag,{value:"Module"})),F1=C(''),B1=Object.freeze(Object.defineProperty({__proto__:null,default:F1},Symbol.toStringTag,{value:"Module"})),N1=C(''),G1=Object.freeze(Object.defineProperty({__proto__:null,default:N1},Symbol.toStringTag,{value:"Module"})),H1=C(''),U1=Object.freeze(Object.defineProperty({__proto__:null,default:H1},Symbol.toStringTag,{value:"Module"})),W1=C(''),X1=Object.freeze(Object.defineProperty({__proto__:null,default:W1},Symbol.toStringTag,{value:"Module"})),Y1=C(''),K1=Object.freeze(Object.defineProperty({__proto__:null,default:Y1},Symbol.toStringTag,{value:"Module"})),Z1=C(''),q1=Object.freeze(Object.defineProperty({__proto__:null,default:Z1},Symbol.toStringTag,{value:"Module"})),Q1=C(''),J1=Object.freeze(Object.defineProperty({__proto__:null,default:Q1},Symbol.toStringTag,{value:"Module"})),e0=C(` + + + +`),t0=Object.freeze(Object.defineProperty({__proto__:null,default:e0},Symbol.toStringTag,{value:"Module"})),r0=C(''),i0=Object.freeze(Object.defineProperty({__proto__:null,default:r0},Symbol.toStringTag,{value:"Module"})),s0=C(''),a0=Object.freeze(Object.defineProperty({__proto__:null,default:s0},Symbol.toStringTag,{value:"Module"})),n0=C(''),o0=Object.freeze(Object.defineProperty({__proto__:null,default:n0},Symbol.toStringTag,{value:"Module"})),l0=C(''),c0=Object.freeze(Object.defineProperty({__proto__:null,default:l0},Symbol.toStringTag,{value:"Module"})),h0=C(''),d0=Object.freeze(Object.defineProperty({__proto__:null,default:h0},Symbol.toStringTag,{value:"Module"})),u0=C(''),p0=Object.freeze(Object.defineProperty({__proto__:null,default:u0},Symbol.toStringTag,{value:"Module"})),g0=C(''),f0=Object.freeze(Object.defineProperty({__proto__:null,default:g0},Symbol.toStringTag,{value:"Module"})),m0=C(''),v0=Object.freeze(Object.defineProperty({__proto__:null,default:m0},Symbol.toStringTag,{value:"Module"})),y0=C(''),b0=Object.freeze(Object.defineProperty({__proto__:null,default:y0},Symbol.toStringTag,{value:"Module"})),x0=C(''),$0=Object.freeze(Object.defineProperty({__proto__:null,default:x0},Symbol.toStringTag,{value:"Module"})),_0=C(''),S0=Object.freeze(Object.defineProperty({__proto__:null,default:_0},Symbol.toStringTag,{value:"Module"})),P0=C(''),w0=Object.freeze(Object.defineProperty({__proto__:null,default:P0},Symbol.toStringTag,{value:"Module"})),C0=C(` + + `),k0=Object.freeze(Object.defineProperty({__proto__:null,default:C0},Symbol.toStringTag,{value:"Module"})),T0=C(''),M0=Object.freeze(Object.defineProperty({__proto__:null,default:T0},Symbol.toStringTag,{value:"Module"})),I0=C(''),E0=Object.freeze(Object.defineProperty({__proto__:null,default:I0},Symbol.toStringTag,{value:"Module"})),L0=C(''),V0=Object.freeze(Object.defineProperty({__proto__:null,default:L0},Symbol.toStringTag,{value:"Module"})),O0=C(''),j0=Object.freeze(Object.defineProperty({__proto__:null,default:O0},Symbol.toStringTag,{value:"Module"})),R0=C(''),z0=Object.freeze(Object.defineProperty({__proto__:null,default:R0},Symbol.toStringTag,{value:"Module"})),A0=C(''),D0=Object.freeze(Object.defineProperty({__proto__:null,default:A0},Symbol.toStringTag,{value:"Module"})),F0=C(''),B0=Object.freeze(Object.defineProperty({__proto__:null,default:F0},Symbol.toStringTag,{value:"Module"})),N0=C(''),G0=Object.freeze(Object.defineProperty({__proto__:null,default:N0},Symbol.toStringTag,{value:"Module"})),H0=C(` + + + + + + +`),U0=Object.freeze(Object.defineProperty({__proto__:null,default:H0},Symbol.toStringTag,{value:"Module"})),W0=C(` + + +`),X0=Object.freeze(Object.defineProperty({__proto__:null,default:W0},Symbol.toStringTag,{value:"Module"})),Y0=C(''),K0=Object.freeze(Object.defineProperty({__proto__:null,default:Y0},Symbol.toStringTag,{value:"Module"})),Z0=C(''),q0=Object.freeze(Object.defineProperty({__proto__:null,default:Z0},Symbol.toStringTag,{value:"Module"})),Q0=C(''),J0=Object.freeze(Object.defineProperty({__proto__:null,default:Q0},Symbol.toStringTag,{value:"Module"})),ey=C(''),ty=Object.freeze(Object.defineProperty({__proto__:null,default:ey},Symbol.toStringTag,{value:"Module"})),ry=C(''),iy=Object.freeze(Object.defineProperty({__proto__:null,default:ry},Symbol.toStringTag,{value:"Module"})),sy=C(''),ay=Object.freeze(Object.defineProperty({__proto__:null,default:sy},Symbol.toStringTag,{value:"Module"})),ny=C(''),oy=Object.freeze(Object.defineProperty({__proto__:null,default:ny},Symbol.toStringTag,{value:"Module"})),ly=C(` + + `),cy=Object.freeze(Object.defineProperty({__proto__:null,default:ly},Symbol.toStringTag,{value:"Module"})),hy=C(''),dy=Object.freeze(Object.defineProperty({__proto__:null,default:hy},Symbol.toStringTag,{value:"Module"})),uy=C(''),py=Object.freeze(Object.defineProperty({__proto__:null,default:uy},Symbol.toStringTag,{value:"Module"})),gy=C(''),fy=Object.freeze(Object.defineProperty({__proto__:null,default:gy},Symbol.toStringTag,{value:"Module"})),my=C(''),vy=Object.freeze(Object.defineProperty({__proto__:null,default:my},Symbol.toStringTag,{value:"Module"})),yy=C(''),by=Object.freeze(Object.defineProperty({__proto__:null,default:yy},Symbol.toStringTag,{value:"Module"})),xy=C(''),$y=Object.freeze(Object.defineProperty({__proto__:null,default:xy},Symbol.toStringTag,{value:"Module"})),_y=C(''),Sy=Object.freeze(Object.defineProperty({__proto__:null,default:_y},Symbol.toStringTag,{value:"Module"})),Py=C(''),wy=Object.freeze(Object.defineProperty({__proto__:null,default:Py},Symbol.toStringTag,{value:"Module"})),Cy=C(` + + + `,{width:18,height:16}),ky=Object.freeze(Object.defineProperty({__proto__:null,default:Cy},Symbol.toStringTag,{value:"Module"})),Ty=C(` + + + `,{width:18,height:16}),My=Object.freeze(Object.defineProperty({__proto__:null,default:Ty},Symbol.toStringTag,{value:"Module"})),Iy=C(` + + + `,{width:18,height:16}),Ey=Object.freeze(Object.defineProperty({__proto__:null,default:Iy},Symbol.toStringTag,{value:"Module"})),Ly=C(''),Vy=Object.freeze(Object.defineProperty({__proto__:null,default:Ly},Symbol.toStringTag,{value:"Module"})),Oy=C('',{width:18,height:16}),jy=Object.freeze(Object.defineProperty({__proto__:null,default:Oy},Symbol.toStringTag,{value:"Module"})),Ry=C('',{width:18,height:16}),zy=Object.freeze(Object.defineProperty({__proto__:null,default:Ry},Symbol.toStringTag,{value:"Module"})),Ay=C('',{width:18,height:16}),Dy=Object.freeze(Object.defineProperty({__proto__:null,default:Ay},Symbol.toStringTag,{value:"Module"})),Fy=C(''),By=Object.freeze(Object.defineProperty({__proto__:null,default:Fy},Symbol.toStringTag,{value:"Module"})),Ny=C(''),Gy=Object.freeze(Object.defineProperty({__proto__:null,default:Ny},Symbol.toStringTag,{value:"Module"})),Hy=C(''),Uy=Object.freeze(Object.defineProperty({__proto__:null,default:Hy},Symbol.toStringTag,{value:"Module"})),Wy=C(''),Xy=Object.freeze(Object.defineProperty({__proto__:null,default:Wy},Symbol.toStringTag,{value:"Module"})),Yy=C(''),Ky=Object.freeze(Object.defineProperty({__proto__:null,default:Yy},Symbol.toStringTag,{value:"Module"})),Zy=C(''),qy=Object.freeze(Object.defineProperty({__proto__:null,default:Zy},Symbol.toStringTag,{value:"Module"})),Qy=C(''),Jy=Object.freeze(Object.defineProperty({__proto__:null,default:Qy},Symbol.toStringTag,{value:"Module"})),eb=C(''),tb=Object.freeze(Object.defineProperty({__proto__:null,default:eb},Symbol.toStringTag,{value:"Module"})),rb=C(''),ib=Object.freeze(Object.defineProperty({__proto__:null,default:rb},Symbol.toStringTag,{value:"Module"})),sb=C(''),ab=Object.freeze(Object.defineProperty({__proto__:null,default:sb},Symbol.toStringTag,{value:"Module"})),nb=C(''),ob=Object.freeze(Object.defineProperty({__proto__:null,default:nb},Symbol.toStringTag,{value:"Module"})),lb=C(''),cb=Object.freeze(Object.defineProperty({__proto__:null,default:lb},Symbol.toStringTag,{value:"Module"})),hb=C(''),db=Object.freeze(Object.defineProperty({__proto__:null,default:hb},Symbol.toStringTag,{value:"Module"})),ub=C(''),pb=Object.freeze(Object.defineProperty({__proto__:null,default:ub},Symbol.toStringTag,{value:"Module"})),gb=C(''),fb=Object.freeze(Object.defineProperty({__proto__:null,default:gb},Symbol.toStringTag,{value:"Module"})),mb=C(''),vb=Object.freeze(Object.defineProperty({__proto__:null,default:mb},Symbol.toStringTag,{value:"Module"})),yb=C(''),bb=Object.freeze(Object.defineProperty({__proto__:null,default:yb},Symbol.toStringTag,{value:"Module"})),xb=C(` + +`),$b=Object.freeze(Object.defineProperty({__proto__:null,default:xb},Symbol.toStringTag,{value:"Module"})),_b=C(''),Sb=Object.freeze(Object.defineProperty({__proto__:null,default:_b},Symbol.toStringTag,{value:"Module"})),Pb=C(''),wb=Object.freeze(Object.defineProperty({__proto__:null,default:Pb},Symbol.toStringTag,{value:"Module"})),Cb=C(''),kb=Object.freeze(Object.defineProperty({__proto__:null,default:Cb},Symbol.toStringTag,{value:"Module"})),Tb=C(''),Mb=Object.freeze(Object.defineProperty({__proto__:null,default:Tb},Symbol.toStringTag,{value:"Module"})),Ib=C(''),Eb=Object.freeze(Object.defineProperty({__proto__:null,default:Ib},Symbol.toStringTag,{value:"Module"})),Lb=C(''),Vb=Object.freeze(Object.defineProperty({__proto__:null,default:Lb},Symbol.toStringTag,{value:"Module"})),Ob=C(''),jb=Object.freeze(Object.defineProperty({__proto__:null,default:Ob},Symbol.toStringTag,{value:"Module"})),Rb=C(''),zb=Object.freeze(Object.defineProperty({__proto__:null,default:Rb},Symbol.toStringTag,{value:"Module"})),Ab=C(''),Db=Object.freeze(Object.defineProperty({__proto__:null,default:Ab},Symbol.toStringTag,{value:"Module"})),Fb=C(''),Bb=Object.freeze(Object.defineProperty({__proto__:null,default:Fb},Symbol.toStringTag,{value:"Module"})),Nb=C(''),Gb=Object.freeze(Object.defineProperty({__proto__:null,default:Nb},Symbol.toStringTag,{value:"Module"})),Hb=C(''),Ub=Object.freeze(Object.defineProperty({__proto__:null,default:Hb},Symbol.toStringTag,{value:"Module"})),Wb=C(''),Xb=Object.freeze(Object.defineProperty({__proto__:null,default:Wb},Symbol.toStringTag,{value:"Module"})),Yb=C(''),Kb=Object.freeze(Object.defineProperty({__proto__:null,default:Yb},Symbol.toStringTag,{value:"Module"})),Zb=C(` + + + +`),qb=Object.freeze(Object.defineProperty({__proto__:null,default:Zb},Symbol.toStringTag,{value:"Module"})),Qb=C(''),Jb=Object.freeze(Object.defineProperty({__proto__:null,default:Qb},Symbol.toStringTag,{value:"Module"})),ex=C(''),tx=Object.freeze(Object.defineProperty({__proto__:null,default:ex},Symbol.toStringTag,{value:"Module"})),rx=C(''),ix=Object.freeze(Object.defineProperty({__proto__:null,default:rx},Symbol.toStringTag,{value:"Module"})),sx=C(''),ax=Object.freeze(Object.defineProperty({__proto__:null,default:sx},Symbol.toStringTag,{value:"Module"})),nx=C(''),ox=Object.freeze(Object.defineProperty({__proto__:null,default:nx},Symbol.toStringTag,{value:"Module"})),lx=C(''),cx=Object.freeze(Object.defineProperty({__proto__:null,default:lx},Symbol.toStringTag,{value:"Module"})),hx=C(''),dx=Object.freeze(Object.defineProperty({__proto__:null,default:hx},Symbol.toStringTag,{value:"Module"})),ux=C(''),px=Object.freeze(Object.defineProperty({__proto__:null,default:ux},Symbol.toStringTag,{value:"Module"})),gx=C(''),fx=Object.freeze(Object.defineProperty({__proto__:null,default:gx},Symbol.toStringTag,{value:"Module"})),mx=C(''),vx=Object.freeze(Object.defineProperty({__proto__:null,default:mx},Symbol.toStringTag,{value:"Module"})),yx=C(''),bx=Object.freeze(Object.defineProperty({__proto__:null,default:yx},Symbol.toStringTag,{value:"Module"})),xx=C(''),$x=Object.freeze(Object.defineProperty({__proto__:null,default:xx},Symbol.toStringTag,{value:"Module"})),_x=C(''),Sx=Object.freeze(Object.defineProperty({__proto__:null,default:_x},Symbol.toStringTag,{value:"Module"})),Px=C(''),wx=Object.freeze(Object.defineProperty({__proto__:null,default:Px},Symbol.toStringTag,{value:"Module"})),Cx=C(''),kx=Object.freeze(Object.defineProperty({__proto__:null,default:Cx},Symbol.toStringTag,{value:"Module"})),Tx=C(` + + `),Mx=Object.freeze(Object.defineProperty({__proto__:null,default:Tx},Symbol.toStringTag,{value:"Module"})),Ix=C(''),Ex=Object.freeze(Object.defineProperty({__proto__:null,default:Ix},Symbol.toStringTag,{value:"Module"})),Lx=C(''),Vx=Object.freeze(Object.defineProperty({__proto__:null,default:Lx},Symbol.toStringTag,{value:"Module"})),Ox=C(` + +`),jx=Object.freeze(Object.defineProperty({__proto__:null,default:Ox},Symbol.toStringTag,{value:"Module"})),Rx=C(` + +`),zx=Object.freeze(Object.defineProperty({__proto__:null,default:Rx},Symbol.toStringTag,{value:"Module"})),Ax=C(''),Dx=Object.freeze(Object.defineProperty({__proto__:null,default:Ax},Symbol.toStringTag,{value:"Module"})),Fx=C(''),Bx=Object.freeze(Object.defineProperty({__proto__:null,default:Fx},Symbol.toStringTag,{value:"Module"})),Nx=C(''),Gx=Object.freeze(Object.defineProperty({__proto__:null,default:Nx},Symbol.toStringTag,{value:"Module"})),Hx=C(''),Ux=Object.freeze(Object.defineProperty({__proto__:null,default:Hx},Symbol.toStringTag,{value:"Module"})),Wx=C(''),Xx=Object.freeze(Object.defineProperty({__proto__:null,default:Wx},Symbol.toStringTag,{value:"Module"})),Yx=C(''),Kx=Object.freeze(Object.defineProperty({__proto__:null,default:Yx},Symbol.toStringTag,{value:"Module"})),Zx=C(''),qx=Object.freeze(Object.defineProperty({__proto__:null,default:Zx},Symbol.toStringTag,{value:"Module"})),Qx=C(''),Jx=Object.freeze(Object.defineProperty({__proto__:null,default:Qx},Symbol.toStringTag,{value:"Module"})),e$=C(''),t$=Object.freeze(Object.defineProperty({__proto__:null,default:e$},Symbol.toStringTag,{value:"Module"})),r$=C(''),i$=Object.freeze(Object.defineProperty({__proto__:null,default:r$},Symbol.toStringTag,{value:"Module"})),s$=C(''),a$=Object.freeze(Object.defineProperty({__proto__:null,default:s$},Symbol.toStringTag,{value:"Module"})),n$=C(''),o$=Object.freeze(Object.defineProperty({__proto__:null,default:n$},Symbol.toStringTag,{value:"Module"})),l$=C(''),c$=Object.freeze(Object.defineProperty({__proto__:null,default:l$},Symbol.toStringTag,{value:"Module"})),h$=C(''),d$=Object.freeze(Object.defineProperty({__proto__:null,default:h$},Symbol.toStringTag,{value:"Module"})),u$=C(''),p$=Object.freeze(Object.defineProperty({__proto__:null,default:u$},Symbol.toStringTag,{value:"Module"})),g$=C(''),f$=Object.freeze(Object.defineProperty({__proto__:null,default:g$},Symbol.toStringTag,{value:"Module"})),m$=C(''),v$=Object.freeze(Object.defineProperty({__proto__:null,default:m$},Symbol.toStringTag,{value:"Module"})),y$=C(''),b$=Object.freeze(Object.defineProperty({__proto__:null,default:y$},Symbol.toStringTag,{value:"Module"})),x$=C(''),$$=Object.freeze(Object.defineProperty({__proto__:null,default:x$},Symbol.toStringTag,{value:"Module"})),_$=C(''),S$=Object.freeze(Object.defineProperty({__proto__:null,default:_$},Symbol.toStringTag,{value:"Module"})),P$=C(''),w$=Object.freeze(Object.defineProperty({__proto__:null,default:P$},Symbol.toStringTag,{value:"Module"})),C$=C(''),k$=Object.freeze(Object.defineProperty({__proto__:null,default:C$},Symbol.toStringTag,{value:"Module"})),T$=C(''),M$=Object.freeze(Object.defineProperty({__proto__:null,default:T$},Symbol.toStringTag,{value:"Module"})),I$=C(''),E$=Object.freeze(Object.defineProperty({__proto__:null,default:I$},Symbol.toStringTag,{value:"Module"})),L$=C(''),V$=Object.freeze(Object.defineProperty({__proto__:null,default:L$},Symbol.toStringTag,{value:"Module"})),O$=C(''),j$=Object.freeze(Object.defineProperty({__proto__:null,default:O$},Symbol.toStringTag,{value:"Module"})),R$=C(''),z$=Object.freeze(Object.defineProperty({__proto__:null,default:R$},Symbol.toStringTag,{value:"Module"})),A$=C(''),D$=Object.freeze(Object.defineProperty({__proto__:null,default:A$},Symbol.toStringTag,{value:"Module"})),F$=C(''),B$=Object.freeze(Object.defineProperty({__proto__:null,default:F$},Symbol.toStringTag,{value:"Module"})),N$=C(''),G$=Object.freeze(Object.defineProperty({__proto__:null,default:N$},Symbol.toStringTag,{value:"Module"})),H$=C(''),U$=Object.freeze(Object.defineProperty({__proto__:null,default:H$},Symbol.toStringTag,{value:"Module"})),W$=C('',{width:48,height:48}),X$=Object.freeze(Object.defineProperty({__proto__:null,default:W$},Symbol.toStringTag,{value:"Module"})),Y$=C('',{width:30,height:30}),K$=Object.freeze(Object.defineProperty({__proto__:null,default:Y$},Symbol.toStringTag,{value:"Module"})),Z$=C('',{width:30,height:30}),q$=Object.freeze(Object.defineProperty({__proto__:null,default:Z$},Symbol.toStringTag,{value:"Module"})),Q$=C(''),J$=Object.freeze(Object.defineProperty({__proto__:null,default:Q$},Symbol.toStringTag,{value:"Module"})),e2=C(''),t2=Object.freeze(Object.defineProperty({__proto__:null,default:e2},Symbol.toStringTag,{value:"Module"})),r2=C(''),i2=Object.freeze(Object.defineProperty({__proto__:null,default:r2},Symbol.toStringTag,{value:"Module"})),s2=C(''),a2=Object.freeze(Object.defineProperty({__proto__:null,default:s2},Symbol.toStringTag,{value:"Module"})),n2=C(''),o2=Object.freeze(Object.defineProperty({__proto__:null,default:n2},Symbol.toStringTag,{value:"Module"})),l2=C(''),c2=Object.freeze(Object.defineProperty({__proto__:null,default:l2},Symbol.toStringTag,{value:"Module"})),h2=C(''),d2=Object.freeze(Object.defineProperty({__proto__:null,default:h2},Symbol.toStringTag,{value:"Module"})),u2=C(''),p2=Object.freeze(Object.defineProperty({__proto__:null,default:u2},Symbol.toStringTag,{value:"Module"})),g2=C(''),f2=Object.freeze(Object.defineProperty({__proto__:null,default:g2},Symbol.toStringTag,{value:"Module"})),m2=C(` + + +`),v2=Object.freeze(Object.defineProperty({__proto__:null,default:m2},Symbol.toStringTag,{value:"Module"})),y2=C(''),b2=Object.freeze(Object.defineProperty({__proto__:null,default:y2},Symbol.toStringTag,{value:"Module"})),x2=C(''),$2=Object.freeze(Object.defineProperty({__proto__:null,default:x2},Symbol.toStringTag,{value:"Module"})),_2=C(` + + `),S2=Object.freeze(Object.defineProperty({__proto__:null,default:_2},Symbol.toStringTag,{value:"Module"})),P2=C(''),w2=Object.freeze(Object.defineProperty({__proto__:null,default:P2},Symbol.toStringTag,{value:"Module"})),C2=C(''),k2=Object.freeze(Object.defineProperty({__proto__:null,default:C2},Symbol.toStringTag,{value:"Module"})),T2=C(''),M2=Object.freeze(Object.defineProperty({__proto__:null,default:T2},Symbol.toStringTag,{value:"Module"})),I2=C(''),E2=Object.freeze(Object.defineProperty({__proto__:null,default:I2},Symbol.toStringTag,{value:"Module"})),L2=C(''),V2=Object.freeze(Object.defineProperty({__proto__:null,default:L2},Symbol.toStringTag,{value:"Module"})),O2=C(''),j2=Object.freeze(Object.defineProperty({__proto__:null,default:O2},Symbol.toStringTag,{value:"Module"})),R2=C(''),z2=Object.freeze(Object.defineProperty({__proto__:null,default:R2},Symbol.toStringTag,{value:"Module"})),A2=C(''),D2=Object.freeze(Object.defineProperty({__proto__:null,default:A2},Symbol.toStringTag,{value:"Module"})),F2=C(` + + `),B2=Object.freeze(Object.defineProperty({__proto__:null,default:F2},Symbol.toStringTag,{value:"Module"})),N2=C(` + +`),G2=Object.freeze(Object.defineProperty({__proto__:null,default:N2},Symbol.toStringTag,{value:"Module"})),H2=C(` + +`),U2=Object.freeze(Object.defineProperty({__proto__:null,default:H2},Symbol.toStringTag,{value:"Module"})),W2=C(''),X2=Object.freeze(Object.defineProperty({__proto__:null,default:W2},Symbol.toStringTag,{value:"Module"})),Y2=C(''),K2=Object.freeze(Object.defineProperty({__proto__:null,default:Y2},Symbol.toStringTag,{value:"Module"})),Z2=C(''),q2=Object.freeze(Object.defineProperty({__proto__:null,default:Z2},Symbol.toStringTag,{value:"Module"})),Q2=C(''),J2=Object.freeze(Object.defineProperty({__proto__:null,default:Q2},Symbol.toStringTag,{value:"Module"})),e_=C(''),t_=Object.freeze(Object.defineProperty({__proto__:null,default:e_},Symbol.toStringTag,{value:"Module"})),r_=C(''),i_=Object.freeze(Object.defineProperty({__proto__:null,default:r_},Symbol.toStringTag,{value:"Module"})),s_=C(''),a_=Object.freeze(Object.defineProperty({__proto__:null,default:s_},Symbol.toStringTag,{value:"Module"}));const n_={"./icon_list/_icon_template.js":Uf,"./icon_list/account_tree.js":Xf,"./icon_list/add.js":Kf,"./icon_list/add_box.js":qf,"./icon_list/add_circle.js":Jf,"./icon_list/add_note.js":tm,"./icon_list/align_center.js":im,"./icon_list/align_horizontal_center.js":am,"./icon_list/align_horizontal_left.js":om,"./icon_list/align_horizontal_right.js":cm,"./icon_list/align_justify.js":dm,"./icon_list/align_left.js":pm,"./icon_list/align_right.js":fm,"./icon_list/align_vertical_bottom.js":vm,"./icon_list/align_vertical_center.js":bm,"./icon_list/align_vertical_top.js":$m,"./icon_list/alternate.js":Sm,"./icon_list/alternate_reverse.js":wm,"./icon_list/apps.js":km,"./icon_list/archive.js":Mm,"./icon_list/arrowLeft.js":Em,"./icon_list/arrowRight.js":Vm,"./icon_list/arrow_right.js":jm,"./icon_list/artboard.js":zm,"./icon_list/auto_awesome.js":Dm,"./icon_list/autorenew.js":Bm,"./icon_list/ballot.js":Gm,"./icon_list/bar_chart.js":Um,"./icon_list/blur.js":Xm,"./icon_list/blur_linear.js":Km,"./icon_list/boolean_difference.js":qm,"./icon_list/boolean_intersection.js":Jm,"./icon_list/boolean_union.js":tv,"./icon_list/boolean_xor.js":iv,"./icon_list/border_all.js":av,"./icon_list/border_inner.js":ov,"./icon_list/border_style.js":cv,"./icon_list/bottom.js":dv,"./icon_list/broken_image.js":pv,"./icon_list/brush.js":fv,"./icon_list/build.js":vv,"./icon_list/camera_roll.js":bv,"./icon_list/cat.js":$v,"./icon_list/center.js":Sv,"./icon_list/chart.js":wv,"./icon_list/check.js":kv,"./icon_list/chevron_left.js":Mv,"./icon_list/chevron_right.js":Ev,"./icon_list/circle.js":Vv,"./icon_list/close.js":jv,"./icon_list/code.js":zv,"./icon_list/color.js":Dv,"./icon_list/color_lens.js":Bv,"./icon_list/control_point.js":Gv,"./icon_list/copy.js":Uv,"./icon_list/create_folder.js":Xv,"./icon_list/cube.js":Kv,"./icon_list/cylinder.js":qv,"./icon_list/dahaze.js":Jv,"./icon_list/dark.js":t1,"./icon_list/delete_forever.js":i1,"./icon_list/device_hub.js":a1,"./icon_list/diffuse.js":o1,"./icon_list/direction.js":c1,"./icon_list/doc.js":d1,"./icon_list/drag_handle.js":p1,"./icon_list/drag_indicator.js":f1,"./icon_list/draw.js":v1,"./icon_list/east.js":b1,"./icon_list/edit.js":$1,"./icon_list/end.js":S1,"./icon_list/exit_to_app.js":w1,"./icon_list/expand.js":k1,"./icon_list/expand_more.js":M1,"./icon_list/export.js":E1,"./icon_list/face.js":V1,"./icon_list/fast_forward.js":j1,"./icon_list/fast_rewind.js":z1,"./icon_list/file_copy.js":D1,"./icon_list/filter.js":B1,"./icon_list/flag.js":G1,"./icon_list/flash_on.js":U1,"./icon_list/flatten.js":X1,"./icon_list/flex.js":K1,"./icon_list/flip.js":q1,"./icon_list/flipY.js":J1,"./icon_list/flip_camera.js":t0,"./icon_list/folder.js":i0,"./icon_list/font_download.js":a0,"./icon_list/format_bold.js":o0,"./icon_list/format_indent.js":c0,"./icon_list/format_line_spacing.js":d0,"./icon_list/format_shapes.js":p0,"./icon_list/format_size.js":f0,"./icon_list/fullscreen.js":v0,"./icon_list/gps_fixed.js":b0,"./icon_list/gradient.js":$0,"./icon_list/grid.js":S0,"./icon_list/grid3x3.js":w0,"./icon_list/group.js":k0,"./icon_list/height.js":M0,"./icon_list/highlight_at.js":E0,"./icon_list/horizontal_align_center.js":V0,"./icon_list/horizontal_distribute.js":j0,"./icon_list/horizontal_rule.js":z0,"./icon_list/image.js":D0,"./icon_list/input.js":B0,"./icon_list/italic.js":G0,"./icon_list/join_full.js":U0,"./icon_list/join_right.js":X0,"./icon_list/justify_content_space_around.js":K0,"./icon_list/keyboard.js":q0,"./icon_list/keyboard_arrow_down.js":J0,"./icon_list/keyboard_arrow_left.js":ty,"./icon_list/keyboard_arrow_right.js":iy,"./icon_list/keyboard_arrow_up.js":ay,"./icon_list/landscape.js":oy,"./icon_list/launch.js":cy,"./icon_list/layers.js":dy,"./icon_list/layout_default.js":py,"./icon_list/layout_flex.js":fy,"./icon_list/layout_grid.js":vy,"./icon_list/left.js":by,"./icon_list/left_hide.js":$y,"./icon_list/lens.js":Sy,"./icon_list/light.js":wy,"./icon_list/line_cap_butt.js":ky,"./icon_list/line_cap_round.js":My,"./icon_list/line_cap_square.js":Ey,"./icon_list/line_chart.js":Vy,"./icon_list/line_join_bevel.js":jy,"./icon_list/line_join_miter.js":zy,"./icon_list/line_join_round.js":Dy,"./icon_list/line_style.js":By,"./icon_list/line_weight.js":Gy,"./icon_list/list.js":Uy,"./icon_list/local_library.js":Xy,"./icon_list/local_movie.js":Ky,"./icon_list/lock.js":qy,"./icon_list/lock_open.js":Jy,"./icon_list/looks.js":tb,"./icon_list/margin.js":ib,"./icon_list/merge.js":ab,"./icon_list/middle.js":ob,"./icon_list/navigation.js":cb,"./icon_list/near_me.js":db,"./icon_list/north.js":pb,"./icon_list/note.js":fb,"./icon_list/nowrap.js":vb,"./icon_list/opacity.js":bb,"./icon_list/outline.js":$b,"./icon_list/outline_circle.js":Sb,"./icon_list/outline_image.js":wb,"./icon_list/outline_rect.js":kb,"./icon_list/outline_shape.js":Mb,"./icon_list/padding.js":Eb,"./icon_list/paint.js":Vb,"./icon_list/palette.js":jb,"./icon_list/pantool.js":zb,"./icon_list/pattern_check.js":Db,"./icon_list/pattern_cross_dot.js":Bb,"./icon_list/pattern_dot.js":Gb,"./icon_list/pattern_grid.js":Ub,"./icon_list/pattern_horizontal_line.js":Xb,"./icon_list/pause.js":Kb,"./icon_list/pentool.js":qb,"./icon_list/photo.js":Jb,"./icon_list/play.js":tx,"./icon_list/plugin.js":ix,"./icon_list/polygon.js":ax,"./icon_list/power_input.js":ox,"./icon_list/publish.js":cx,"./icon_list/rect.js":dx,"./icon_list/redo.js":px,"./icon_list/refresh.js":fx,"./icon_list/remove.js":vx,"./icon_list/remove2.js":bx,"./icon_list/repeat.js":$x,"./icon_list/replay.js":Sx,"./icon_list/right.js":wx,"./icon_list/right_hide.js":kx,"./icon_list/rotate.js":Mx,"./icon_list/rotate_left.js":Ex,"./icon_list/round.js":Vx,"./icon_list/same_height.js":jx,"./icon_list/same_width.js":zx,"./icon_list/save.js":Dx,"./icon_list/scatter.js":Bx,"./icon_list/screen.js":Gx,"./icon_list/setting.js":Ux,"./icon_list/settings_input_component.js":Xx,"./icon_list/shadow.js":Kx,"./icon_list/shape.js":qx,"./icon_list/shuffle.js":Jx,"./icon_list/size.js":t$,"./icon_list/skip_next.js":i$,"./icon_list/skip_prev.js":a$,"./icon_list/smooth.js":o$,"./icon_list/source.js":c$,"./icon_list/south.js":d$,"./icon_list/space.js":p$,"./icon_list/specular.js":f$,"./icon_list/speed.js":v$,"./icon_list/star.js":b$,"./icon_list/start.js":$$,"./icon_list/storage.js":S$,"./icon_list/straighten.js":w$,"./icon_list/strikethrough.js":k$,"./icon_list/stroke_to_path.js":M$,"./icon_list/swap_horiz.js":E$,"./icon_list/switch_left.js":V$,"./icon_list/switch_right.js":j$,"./icon_list/sync.js":z$,"./icon_list/table_rows.js":D$,"./icon_list/text_rotate.js":B$,"./icon_list/texture.js":G$,"./icon_list/timer.js":U$,"./icon_list/title.js":X$,"./icon_list/to_back.js":K$,"./icon_list/to_front.js":q$,"./icon_list/tonality.js":J$,"./icon_list/top.js":t2,"./icon_list/transform.js":i2,"./icon_list/underline.js":a2,"./icon_list/undo.js":o2,"./icon_list/unfold.js":c2,"./icon_list/vertical_align_baseline.js":d2,"./icon_list/vertical_align_bottom.js":p2,"./icon_list/vertical_align_center.js":f2,"./icon_list/vertical_align_stretch.js":v2,"./icon_list/vertical_align_top.js":b2,"./icon_list/vertical_distribute.js":$2,"./icon_list/video.js":S2,"./icon_list/view_comfy.js":w2,"./icon_list/view_list.js":k2,"./icon_list/view_week.js":M2,"./icon_list/view_week_reverse.js":E2,"./icon_list/vignette.js":V2,"./icon_list/vintage.js":j2,"./icon_list/visible.js":z2,"./icon_list/visible_off.js":D2,"./icon_list/volume_down.js":B2,"./icon_list/volume_off.js":G2,"./icon_list/volume_up.js":U2,"./icon_list/wave.js":X2,"./icon_list/waves.js":K2,"./icon_list/web.js":q2,"./icon_list/west.js":J2,"./icon_list/width.js":t_,"./icon_list/wrap.js":i_,"./icon_list/wrap_text.js":a_},ne={};Object.entries(n_).forEach(([s,e])=>{s=s.replace("./icon_list/","").replace(".js",""),ne[s]=e.default});function R(s,e="",t={width:24,height:24}){return s?` + +`:""}function o_(s,e={width:24,height:24}){return` + + + + `}function l_(s,e={width:24,height:24}){return` + + ${s} + + `}function c_(){return l_('')}class pu extends X{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){return``}[z("$el")](){this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):de(this.props.action)?this.props.action(this.$editor,this):de(this.props.onClick)&&this.props.onClick(this.$editor,this),de(this.props.nextTick)&&this.props.nextTick(this.$editor)}[G("$el")+Ee](){let e="";return this.props.icon&&(e+=`${R(this.props.icon)}`),this.props.title&&(e+=`${this.props.title}`),e}[ae("$el")](){const e=de(this.props.selected)?this.props.selected(this.$editor):!1;return{style:b({},this.props.style),"data-selected":e}}}function gu(){return ge.createByHTML('
    • ')}class Mo extends X{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){var r;const e=this.props,t=de(e.checked)?e.checked(this.$editor):e.checked;return` +
    • + ${t?R("check"):e.icon||""} +
      + + ${e.shortcut||""} +
      +
      • + `}[z("$el")+Le+ri](){console.log("click",this.props.command,this.props.args),this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):de(this.props.action)?this.props.action(this.$editor,this):de(this.props.onClick)&&this.props.action(this.$editor,this),de(this.props.nextTick)&&this.nextTick(()=>{this.props.nextTick(this.$editor,this)}),this.props.closable&&this.parent.close()}}class fu extends Mo{template(){return"
    • "}get checked(){return de(this.props.checked)?this.props.checked(this.$editor,this):this.props.checked}[G("$el")+Ee](){return` + + `}}class mu extends Mo{template(){return"
    • "}getTemplateString(){return de(this.props.template)?this.props.template(this.$editor,this):this.$i18n(this.props.template)}[G("$el")+Ee](){return this.getTemplateString()}}function vu(){return'
    • '}function yu(){return`
    • + ${this.$i18n(this.props.title)} +
      • `}function bu(){return`
      • `}function hc(s,e){return s==="-"?O("Divider",{ref:`${e}-divider`}):s==="-"||s.type==="divider"?O("DropdownDividerMenuItem",{ref:`${e}-divider`}):ct(s)?O("DropdownTextMenuItem",{text:s,ref:`${e}-text`}):s.type==="link"?O("DropdownLinkMenuItem",{href:s.href,target:s.target,title:s.title,closable:s.closable,ref:`${e}-link`}):s.type==="custom"?O("DropdownCustomMenuItem",{action:s.action,command:s.command,args:s.args,icon:s.icon,text:s.text,events:s.events,template:s.template,closable:s.closable,ref:`${e}-custom`}):s.type==="checkbox"?O("DropdownCheckboxMenuItem",{checked:s.checked,command:s.command,args:s.args||[],disabled:s.disabled,direction:s.direction,icon:s.icon,nextTick:s.nextTick,onClick:s.onClick,action:s.action,shortcut:s.shortcut,title:s.title,key:s.key,events:s.events,closable:s.closable,items:s.items||[],ref:`${e}-checkbox`}):Ut(s.items)?O("DropdownMenuList",{title:s.title,items:s.items,ref:`${e}-list`}):O("DropdownMenuItem",{checked:s.checked,command:s.command,args:s.args||[],disabled:s.disabled,direction:s.direction,icon:s.icon,nextTick:s.nextTick,onClick:s.onClick,action:s.action,shortcut:s.shortcut,title:s.title,key:s.key,events:s.events,closable:s.closable,items:s.items||[],ref:`${e}-menu-item`})}class Io extends X{components(){return{Divider:gu,DropdownDividerMenuItem:vu,DropdownLinkMenuItem:yu,DropdownTextMenuItem:bu,DropdownCustomMenuItem:mu,DropdownCheckboxMenuItem:fu,DropdownMenuList:Io,DropdownMenuItem:Mo}}get groupId(){return`${this.props.id}-groupId`}template(){return` +
    • + + ${R("arrowRight")} +
        + ${this.props.items.map((e,t)=>hc(e,`${this.groupId}-${t}`)).join("")} +
      +
      • + `}}function Ye(s,e){return e=typeof e=="undefined"?1:e,Math.round(s*e)/e}function Ul(s,e,t=100){const r=s<0?Math.floor(s/t):Math.ceil(s/t);return[e<0?Math.floor(e/t):Math.ceil(e/t),r]}function Dt(s){return s*(Math.PI/180)}function Mh(s,e=1){return s===0?0:s/e}function mo(s){var e=s*(180/Math.PI);return e<0&&(e=360+e),e}function h_(s,e,t=0){return t+e*Math.cos(Dt(s))}function d_(s,e,t=0){return t+e*Math.sin(Dt(s))}function qs(s,e,t=0,r=0){return{x:h_(s,e,t),y:d_(s,e,r)}}function rr(s,e,t=0,r=0){return Mf([s,e],[t,r])}function u_(s,e,t=0){return te([],s,e,1+t/se(s,e))}function oe(s,e){return s.length===1?[Xe([],s[0],e)]:s.length===2?[Xe([],s[0],e),Xe([],s[1],e)]:s.length===3?[Xe([],s[0],e),Xe([],s[1],e),Xe([],s[2],e)]:s.length===4?[Xe([],s[0],e),Xe([],s[1],e),Xe([],s[2],e),Xe([],s[3],e)]:s.length===5?[Xe([],s[0],e),Xe([],s[1],e),Xe([],s[2],e),Xe([],s[3],e),Xe([],s[4],e)]:s.map(t=>Xe([],t,e))}function ll(s,e,t,r){return[s,[e[0],s[1],e[2]],t,Math.abs(s[0]-e[0]),r]}function Fn(s,e,t,r){return[[e[0],s[1],s[2]],e,t,Math.abs(s[1]-e[1]),r]}function p_(s,e=!1){if(e===!1)return s;const[t,r,i,a,n,o,l]=s;return n?[[r[0],n[1],r[2]],[t[0],n[1],t[2]],i,a,[t[0],t[1],n[2]],o,l,e]:[r,t,i,a,n,o,l,e]}function g_(s,e){let t=s,r=e,i=!1;s[4][0]-e[4][0]>0&&(t=e,r=s,i=!0);const a=te([],t[1],t[2],.5),n=te([],r[0],r[3],.5);let o=[];return r[0][1]<=a[1]&&a[1]<=r[3][1]?o.push(ll(a,n,"x",null)):r[0][1]<=t[1][1]?r[3][0]<=t[1][0]&&t[1][0]<=r[2][0]?o.push(Fn(r[3],[r[3][0],t[1][1],t[1][2]],"y",null)):o.push(ll(t[1],n,"x",r[3])):t[3][0]<=r[0][0]&&r[0][0]<=t[2][0]?o.push(Fn(t[3],r[0],"y")):r[3][0]<=t[0][0]&&t[0][0]<=r[2][0]?o.push(Fn([r[0][0],t[3][1],t[3][2]],r[0],"y")):r[3][0]<=t[1][0]&&t[1][0]<=r[2][0]?o.push(Fn(r[3],[r[3][0],t[1][1],t[1][2]],"y")):o.push(ll(t[2],n,"x",r[0])),o.sort((l,c)=>l[3]-c[3]),p_([...o[0],s,e],i)}function Bn(s){let e=Number.MIN_SAFE_INTEGER;return s.forEach(t=>{e=Math.max(t[0],e)}),e}function Nn(s){let e=Number.MIN_SAFE_INTEGER;return s.forEach(t=>{e=Math.max(t[1],e)}),e}function Gn(s){let e=Number.MAX_SAFE_INTEGER;return s.forEach(t=>{e=Math.min(t[0],e)}),e}function Hn(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return s.forEach(r=>{e=Math.min(r[0],e),t=Math.max(r[0],t)}),Math.round((e+t)/2)}function Un(s){let e=Number.MAX_SAFE_INTEGER;return s.forEach(t=>{e=Math.min(t[1],e)}),e}function Wn(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return s.forEach(r=>{e=Math.min(r[1],e),t=Math.max(r[1],t)}),Math.round((e+t)/2)}function aa(s,e){return mo(Math.atan2(e,s))}function dc(s,e,t){return f_({x:s[0],y:s[1]},{x:e[0],y:e[1]},{dx:t[0],dy:t[1]})}function Ft(s,e){const t=Mt();return $t(t,t,e),ru(t,t,Dt(s)),$t(t,t,qt([],e)),t}function er(...s){const e=Mt();return s.forEach(t=>{It(e,e,t)}),e}function Wi(...s){return Ot([],er(...s))}function f_(s,e,t){var r=s.x-e.x,i=s.y-e.y,a=aa(r,i),n=s.x+t.dx-e.x,o=s.y+t.dy-e.y,l=aa(n,o)-a;return l}function rt(s,e){return(aa(s,e)+180)%360}const xu=/[xy]/g;function Ls(){var s=new Date().getTime(),e="xxx12-xx-34xx".replace(xu,function(t){var r=(s+Math.random()*16)%16|0;return s=Math.floor(s/16),(t=="x"?r:r&3|8).toString(16)});return e}function dr(){var s=new Date().getTime(),e="idxxxxxxx".replace(xu,function(t){var r=(s+Math.random()*16)%16|0;return s=Math.floor(s/16),(t=="x"?r:r&3|8).toString(16)});return e}const m_=/[\b\t ,\n]/g;function Ih(s){return s.trim().split(m_).filter(e=>e).map(e=>+e)}const Eh={center:50,top:0,left:0,right:100,bottom:100};class or{}or.CENTER="center";or.TOP="top";or.RIGHT="right";or.LEFT="left";or.BOTTOM="bottom";const v_=/([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)/gi;class p{constructor(e="",t=""){this.value=e,ut(this.value)&&isNaN(this.value)&&(this.value=0),this.unit=t}[Symbol.toPrimitive](e){return e=="number"?this.value:this.toString()}static min(...e){for(var t=e.shift(),r=0,i=e.length;re[r].value&&(t=e[r]);return t}static max(...e){for(var t=e.shift(),r=0,i=e.length;r{this.on(t,()=>this.refresh())})}initState(){return{direction:this.props.direction||"left",opened:this.props.opened||!1,items:this.props.items||[],dy:this.props.dy||0}}findItem(e){return this.state.items.find(t=>t.key&&t.key===e)}template(){const{direction:e}=this.state;return` +
      + + + ${R("keyboard_arrow_down")} +
        +
        + + + +
        +
        + `}[G("$icon")](){return de(this.props.icon)?this.props.icon(this.$editor,this):this.props.icon}[ae("$label")](){return{innerHTML:this.props.title}}[ae("$el")](){return{"data-selected":!!(de(this.props.selected)?this.props.selected(this.$editor,this):!1),style:ie(b({},this.props.style||{}),{"--elf--dropdown-menu-width":this.props.width,"--elf--dropdown-menu-dy":ke(this.props.dy)?p.px(this.props.dy):0})}}close(){this.setState({opened:!1},!1),this.$el.removeClass("opened")}toggle(){this.setState({opened:!this.state.opened},!1),this.$el.toggleClass("opened",this.state.opened),this.state.opened&&this.emit("hideDropdownMenu")}get groupId(){return this.id+"$list"}[G("$list")+Ee](){return this.state.items.map((e,t)=>hc(e,`${this.groupId}-${t}`))}checkDropdownOpen(e){return!ge.create(e.target).closest("dropdown-menu-item-list")}[z("$arrow")+fe("checkDropdownOpen")](){this.toggle()}[z("$label")+fe("checkDropdownOpen")](){this.toggle()}[z("$icon")](){const e=de(this.props.selectedKey)?this.props.selectedKey(this.$editor,this):this.props.selectedKey,t=this.findItem(e);if(!t){de(this.props.action)&&this.props.action(this.$editor,this);return}const r=t.command,i=t.args,a=t.action,n=t.nextTick;r?this.$commands.emit(r,...i):a&&de(a)&&this.emit(a),n&&de(n)&&this.nextTick(()=>{n(this.$editor)}),this.close()}[K("updateMenuItems")](e){this.setState({items:e})}[M("hideDropdownMenu")](){this.close()}[ve("document")](e){const r=ge.create(e.target).closest("dropdown-menu");r?r.el!==this.$el.el&&this.close():this.close()}}class y_ extends X{checkProps(e={}){return e}components(){return{DropdownMenu:$u,ToolbarButtonMenuItem:pu}}template(){return'
        '}[G("$el")](){return this.props.items.map((e,t)=>this.renderMenuItem(e,t))}renderMenuItem(e,t){switch(e.type){case ji.LINK:return this.renderLink(e,t);case ji.SUBMENU:return this.renderMenu(e,t);case ji.BUTTON:return this.renderButton(e,t);case ji.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return O("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,tooltip:e.tooltip,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return O("DropdownMenu",ie(b({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,tooltip:e.tooltip,direction:e.direction,events:e.events||[],selected:e.selected,selectedKey:e.selectedKey,action:e.action,style:e.style,dy:6}),[e.content])}}const b_="",Lh="",x_=!1;class Er extends X{template(){return` + + `}getClassName(){return""}clickButton(){}getChecked(){return x_}isDisabled(){return!1}setSelected(e){this.$el.toggleClass("selected",e)}getTitle(){return b_}getIcon(){return Lh}setIcon(e){this.refs.$icon.html(ne[e]||e||"")}getIconString(){return Lh}isHideTitle(){return!1}isHideTooltip(){return!0}[z()](e){this.clickButton(e)}getDirection(){return this.props.direction||""}static createMenuItem(e={}){return class extends Er{getIconString(){return e.iconString||"add_box"}getTitle(){return e.title||"New Item"}isHideTitle(){return e.isHideTitle||!0}clickButton(t){e.clickButton(t)}getDirection(){return e.direction}}}}class $_ extends Er{getIconString(){return"launch"}getTitle(){return this.$i18n("menu.item.export.title")}clickButton(){this.emit("showExportView")}}class __ extends Er{getIconString(){return this.$config.is("editor.theme","dark")?"dark":"light"}getTitle(){return"Theme"}isHideTitle(){return!0}clickButton(){this.$config.get("editor.theme")==="dark"?(this.$config.set("editor.theme","light"),this.setIcon("light")):(this.$config.set("editor.theme","dark"),this.setIcon("dark"))}}class S_ extends X{components(){return{ToolBarRenderer:y_,ThemeChanger:__,ExportView:$_,DropdownMenu:$u}}template(){return` +
        +
        + ${O("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.logo")})} +
        +
        +
        + ${O("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} + ${this.$injectManager.generate("toolbar.left")} +
        +
        + ${O("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} + ${this.$injectManager.generate("toolbar.center")} +
        +
        + ${O("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} + ${this.$injectManager.generate("toolbar.right")} + ${O("ThemeChanger")} +
        +
        +
        + `}[M("updateMenu")](e){(e==="toolbar.left"||e==="toolbar.center"||e==="toolbar.right")&&this.refresh()}}var P_={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},w_=Object.freeze(Object.defineProperty({__proto__:null,default:P_},Symbol.toStringTag,{value:"Module"})),C_={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},k_=Object.freeze(Object.defineProperty({__proto__:null,default:C_},Symbol.toStringTag,{value:"Module"}));const T_={"./config_list/show.left.panel.js":w_,"./config_list/show.right.panel.js":k_};var M_=Object.values(T_).map(s=>s.default);function I_(s){M_.forEach(e=>{s.registerConfig(e)})}function _u(s){s.registerElement({Button:Af,ToggleButton:Ff,ToggleCheckBox:Nf}),s.registerAlias({"toggle-checkbox":"ToggleCheckBox","toggle-button":"ToggleButton",button:"Button"})}var E_={key:"body.move.ms",defaultValue:30,title:"pointer move delay millisecond",description:"Set delay millisecond to moving pointer in body ",type:"number"},L_=Object.freeze(Object.defineProperty({__proto__:null,default:E_},Symbol.toStringTag,{value:"Module"})),V_={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},O_=Object.freeze(Object.defineProperty({__proto__:null,default:V_},Symbol.toStringTag,{value:"Module"})),j_={key:"editor.cursor",defaultValue:"auto",title:"Editor Cursor ",description:"Set editor's cursor",type:"string"},R_=Object.freeze(Object.defineProperty({__proto__:null,default:j_},Symbol.toStringTag,{value:"Module"})),z_={key:"editor.theme",defaultValue:"light",title:"Editor Theme ",description:"Set editor's theme",type:"string"},A_=Object.freeze(Object.defineProperty({__proto__:null,default:z_},Symbol.toStringTag,{value:"Module"})),D_={key:"event.doubleclick.timing",defaultValue:500,title:"doubleclick timing",description:"whether doubleclick timing is in some seconds",type:"number"},F_=Object.freeze(Object.defineProperty({__proto__:null,default:D_},Symbol.toStringTag,{value:"Module"})),B_={key:"language.locale",defaultValue:os.EN,title:"set locale for editor",description:"set locale for editor",type:"string"},N_=Object.freeze(Object.defineProperty({__proto__:null,default:B_},Symbol.toStringTag,{value:"Module"})),G_={key:"store.key",defaultValue:"easylogic.studio",title:"Store Key",description:"Set localStorage key",type:"string"},H_=Object.freeze(Object.defineProperty({__proto__:null,default:G_},Symbol.toStringTag,{value:"Module"})),U_={key:"style.canvas.background.color",defaultValue:"#ececec",title:"Canvas Background Color",description:"Set canvas background color",type:"color"},W_=Object.freeze(Object.defineProperty({__proto__:null,default:U_},Symbol.toStringTag,{value:"Module"}));const X_={"./config_list/body.move.ms.js":L_,"./config_list/debug.mode.js":O_,"./config_list/editor.cursor.js":R_,"./config_list/editor.theme.js":A_,"./config_list/event.doubleclick.timing.js":F_,"./config_list/language.locale.js":N_,"./config_list/store.key.js":H_,"./config_list/style.canvas.background.color.js":W_};var Y_=Object.values(X_).map(s=>s.default);function Su(s){Y_.forEach(e=>{s.registerConfig(e)})}function Pu(s){s.registerIcon("artboard","artboard"),s.registerIcon("circle","lens"),s.registerIcon("image","image"),s.registerIcon("text","title"),s.registerIcon("svg-text","title"),s.registerIcon("boolean-path","pentool"),s.registerIcon("svg-path","pentool"),s.registerIcon("polygon","polygon"),s.registerIcon("star","star"),s.registerIcon("spline","smooth"),s.registerIcon("rect","rect")}var K_={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Language","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Dark","app.theme.light":"Light","app.theme.toon":"Toon","app.theme.gray":"Gray","app.label.theme":"Theme","app.tab.title.projects":"Projects","app.tab.title.layers":"Layers","app.tab.title.libraries":"Library","app.tab.title.components":"Component","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Assets","app.tab.title.keyMap":"KeyMap","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"Source","menu.item.save.title":"Save","menu.item.export.title":"Export","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Full Screen","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Learn","menu.item.projects.title":"Projects","menu.item.language.title":"Language","project.property.title":"Project","project.information.property.title":"Project information","project.information.property.name":"Name","project.information.property.description":"Description","artboard.property.title":"ArtBoards","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grid","layer.tree.property.title":"Layers","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grid","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Size","position.property.width":"W","position.property.height":"H","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Appearance","background.color.property.color":"Color","background.color.property.zindex":"z-index","background.color.property.blend":"Blend","background.color.property.overflow":"Overflow","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Hidden","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiply","blend.screen":"screen","blend.overlay":"overlay","blend.darken":"darken","blend.lighten":"lighten","blend.color-dodge":"color-dodge","blend.color-burn":"color-burn","blend.hard-light":"hard-light","blend.soft-light":"soft-light","blend.difference":"difference","blend.exclusion":"exclusion","blend.hue":"hue","blend.saturation":"saturation","blend.color":"color","blend.luminosity":"luminosity","background.image.property.title":"Fill","border.property.title":"Border","border.radius.property.title":"Border Radius","boxshadow.property.title":"Box Shadows","filter.property.title":"Filter","filter.property.blur":"Blur","filter.property.grayscale":"GrayScale","filter.property.hue-rotate":"Hue Rotate","filter.property.invert":"Invert","filter.property.brightness":"Brightness","filter.property.contrast":"Contrast","filter.property.drop-shadow":"Drop Shadow","filter.property.drop-shadow.color":"Color","filter.property.drop-shadow.offsetX":"Offset X","filter.property.drop-shadow.offsetY":"Offset Y","filter.property.drop-shadow.blurRadius":"Blur","filter.property.opacity":"Opacity","filter.property.saturate":"Saturate","filter.property.sepia":"Sepia","filter.property.svg":"SVG","font.property.title":"Font","font.property.color":"Color","font.property.size":"Size","font.property.stretch":"Stretch","font.property.weight":"Weight","font.property.style":"Style","font.property.family":"Family","font.spacing.property.title":"Font spacing","font.spacing.property.lineHeight":"Line height","font.spacing.property.letterSpacing":"Letter spacing","font.spacing.property.wordSpacing":"Word spacing","font.spacing.property.indent":"Indent","backdrop.filter.property.title":"Backdrop Filter","clippath.property.title":"Clip Path","export.property.title":"Export","export.property.download":"Download","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origin","image.property.size":"Size","image.property.width":"Width","image.property.height":"height","video.property.title":"Video","video.property.play":"Play","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Playback Rate","video.property.currentTime":"Current Time","video.property.playTime":"Play Time Distance","motion.property.title":"Motion","text.property.title":"Text Style","text.property.align":"Align","text.property.transform":"Transform","text.property.decoration":"Decoration","text.clip.property.title":"Text Clip","text.shadow.property.title":"Text Shadows","text.fill.property.title":"Text Fill","text.fill.property.fill":"Fill","text.fill.property.stroke":"Stroke","text.fill.property.strokeWidth":"Width","transform.property.title":"Transform","transform.origin.property.title":"Transform Origin","transition.property.title":"CSS Transition","keyframe.property.title":"CSS Keyframe","selector.property.title":"Selector","selector.property.none":"None selector","path.data.property.title":"Path Information","polygon.data.property.title":"Polygon Information","perspective.property.title":"Perspective","perspective.origin.property.title":"Perspective Origin","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Motion Path","svg.item.property.fill":"Fill","svg.item.property.fillOpacity":"Opacity","svg.item.property.path":"Path","svg.item.property.polygon":"Polygon","svg.item.property.totalLength":"Total Length","svg.item.property.fillRule":"Fill Rule","svg.item.property.stroke":"Stroke","svg.item.property.strokeWidth":"Width","svg.item.property.dashArray":"Dash Array","svg.item.property.dashOffset":"Dash Offset","svg.item.property.lineCap":"Line Cap","svg.item.property.lineJoin":"Line Join","svg.item.property.filter":"Filter","svg.item.property.blend":"Blend Mode","border.editor.all":"All","border.editor.width":"Width","border.editor.style":"Style","border.editor.color":"C","border.editor.top":"Top","border.editor.left":"Left","border.editor.right":"Right","border.editor.bottom":"Bottom","border.radius.editor.topLeft":"Top Left","border.radius.editor.topRight":"Top Right","border.radius.editor.bottomLeft":"Bottom Left","border.radius.editor.bottomRight":"Bottom Right","boxshadow.editor.blur":"Blur","boxshadow.editor.spread":"Spread","css.property.editor.properties":"Properties","offset.path.list.editor.path":"Path","offset.path.list.editor.totalLength":"Total Length","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotate","svgfilter.select.editor.message.create":"Create new svg filter","svgfilter.select.editor.message.select":"Select a filter","fill.editor.message.click.image":"Click the preview area if you want to select a image","fill.editor.message.drag.position":"Drag if you want to move center position","fill.editor.x1":"Start X","fill.editor.x2":"End X","fill.editor.y1":"Start Y","fill.editor.y2":"End Y","fill.editor.spread":"Spread","fill.editor.offset":"Offset","fill.editor.cx":"Center X","fill.editor.cy":"Center Y","fill.editor.r":"End radius","fill.editor.fx":"Start X","fill.editor.fy":"Start Y","fill.editor.fr":"Start radius","perspective.origin.editor.originX":"Origin X","perspective.origin.editor.originY":"Origin Y","path.manager.msg":"Keydown ESC or Enter key to close editing","path.manager.mode.done":"Done","path.manager.mode.modify":"Modify","path.manager.mode.path":"Path","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transform","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Flip X","path.manager.mode.flipY":"Flip Y","path.manager.mode.flipOrigin":"Flip Origin","colorpicker.popup.title":"ColorPicker","selector.popup.title":"Selector Property","selector.popup.selector":"Selector","background.image.position.popup.title":"Background Pattern","background.image.position.popup.size":"Size","background.image.position.popup.width":"Width","background.image.position.popup.height":"Height","background.image.position.popup.repeat":"Repeat","background.image.position.popup.blend":"Blend","background.image.position.popup.type.repeat":"repeat","background.image.position.popup.type.no-repeat":"no repeat","background.image.position.popup.type.repeat-x":"repeat-x","background.image.position.popup.type.repeat-y":"repeat-y","background.image.position.popup.type.space":"space","background.image.position.popup.type.round":"round","gradient.picker.popup.title":"Gradient & Image Picker","gradient.picker.popup.static-gradient":"Static","gradient.picker.popup.linear-gradient":"Linear","gradient.picker.popup.repeating-linear-gradient":"Repeating Linear","gradient.picker.popup.radial-gradient":"Radial","gradient.picker.popup.repeating-radial-gradient":"Repeating Radial","gradient.picker.popup.conic-gradient":"Linear","gradient.picker.popup.repeating-conic-gradient":"Repeating Conic","image.asset.property.title":"Image","video.asset.property.title":"Video","color.asset.property.title":"Color","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Pattern","svgfilter.asset.property.title":"SVG Filter","inspector.tab.title.design":"Design","inspector.tab.title.component":"Component","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"Assets","inspector.tab.title.text":"Text","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Timeline","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Play","timeline.play.control.pause":"Pause","timeline.play.control.first":"First","timeline.play.control.prev":"Previous","timeline.play.control.next":"Next","timeline.play.control.last":"Last","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Speed","timeline.play.control.repeat":"Repeat","timeline.play.control.infinite":"Infinite","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"Value","timeline.value.editor.time":"Time","timeline.value.editor.timing":"Timing","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"SVG Filter","css.item.rotate":"Rotate","css.item.rotateX":"Rotate X","css.item.rotateY":"Rotate Y","css.item.rotateZ":"Rotate Z","css.item.rotate3d":"3D Rotate","css.item.skewX":"Skew X","css.item.skewY":"Skew Y","css.item.translate":"Translate","css.item.translateX":"Translate X","css.item.translateY":"Translate Y","css.item.translateZ":"Translate Z","css.item.translate3d":"3D Translate","css.item.perspective":"Perspective","css.item.scale":"Scale","css.item.scaleX":"Scale X","css.item.scaleY":"Scale Y","css.item.scaleZ":"Scale Z","css.item.scale3d":"3D Scale","css.item.matrix":"Matrix","css.item.matrix3d":"3D Matrix","animation.property.title":"CSS Animation","animation.property.direction":"Direction","animation.property.play.state":"Play State","animation.property.fill.mode":"Fill Mode","animation.property.delay":"Delay","animation.property.duration":"Duration","animation.property.iteration.count":"Iteration Count","animation.property.Select a keyframe":"Select a keyframe","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Timing Function","animation.property.popup.keyframe":"Keyframe","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Play State","animation.property.popup.fill.mode":"Fill Mode","animation.property.popup.delay":"Delay","animation.property.popup.duration":"Duration","animation.property.popup.iteration":"Iteration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"reverse","animation.property.popup.alternate":"alternate","animation.property.popup.alternate-reverse":"alternate-reverse","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"Select a keyframe","keyframe.popup.title":"Keyframe","code.view.property.title":"CodeView","svg.filter.editor.tab.filter":"Filter","svg.filter.editor.tab.preset":"Preset","svg.filter.editor.tab.asset":"Assets","svg.filter.editor.GRAPHIC REFERENCES":"GRAPHIC REFERENCES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"LIGHTING","svg.filter.editor.COMBINERS":"COMBINERS","svg.filter.editor.Template":"Template","layout.property.title":"Layout","layout.property.flex":"Flex Box","layout.property.grid":"Grid","layout.property.default":"Default","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Row","flex.layout.editor.column":"column","flex.layout.editor.row-reverse":"Row Reverse","flex.layout.editor.column-reverse":"Column Reverse","flex.layout.editor.nowrap":"Nowrap","flex.layout.editor.wrap":"Wrap","flex.layout.editor.wrap-reverse":"Wrap Reverse","flex.layout.editor.flex-start":"Start","flex.layout.editor.flex-end":"End","flex.layout.editor.center":"Center","flex.layout.editor.space-between":"Between","flex.layout.editor.space-around":"Around","flex.layout.editor.baseline":"BaseLine","flex.layout.editor.stretch":"Stretch","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justify Content","flex.layout.editor.align-items":"Align Items","flex.layout.editor.align-content":"Align Content","flex.layout.item.property.title":"Flex Item Detail","flex.layout.item.property.grow":"Flex Grow","flex.layout.item.property.shrink":"Flex Shrink","flex.layout.item.property.basis":"Flex Basis","flex.layout.item.property.none":"none","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"value","grid.layout.editor.template.columns":"Columns","grid.layout.editor.column.gap":"Column Gap","grid.layout.editor.template.rows":"Rows","grid.layout.editor.row.gap":"Row Gap","grid.box.editor.box.title":"Box","grid.box.editor.type":"Type","grid.box.editor.repeat":"Repeat","grid.box.editor.length":"Length","grid.box.editor.none":"None","grid.box.editor.auto":"Auto","grid.box.editor.count":"Count","grid.box.editor.value":"Size","grid.layout.item.property.title":"Layout Item Detail","grid.layout.item.property.column":"Column","grid.layout.item.property.row":"Row","grid.layout.item.property.start":"Start","grid.layout.item.property.end":"End","grid.layout.item.property.none":"none","grid.layout.item.property.value":"value","box.model.property.title":"Box Model","box.model.property.margin":"Margin","box.model.property.padding":"Padding","component.items.canvas":"Canvas","component.items.layer":"Layer","component.items.3dlayer":"3D Layer","component.items.drawing":"Drawing","component.items.custom":"Custom Component","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"SVG Text Style","svg.text.property.textarea":"Text Area","svg.text.property.size":"Font Size","svg.text.property.weight":"Font Weight","svg.text.property.style":"Font Style","svg.text.property.anchor":"Text Anchor","svg.text.property.family":"Font Family","svg.text.property.length.adjust":"Length Adjust","svg.text.property.text.length":"Text Length","svg.text.property.start.offset":"Start Offset","fill.picker.popup.title":"SVG Fragment picker","gradient.editor.drag.message":"Drag if you want to move center pointer.","draw.manager.tolerance":"Tolerance","pattern.property.title":"Pattern","pattern.info.popup.title":"Pattern Info","pattern.info.popup.width":"Width","pattern.info.popup.height":"Height","pattern.info.popup.lineWidth":"Line Width","pattern.info.popup.lineHeight":"Line Height","pattern.info.popup.rotate":"Rotate","pattern.info.popup.blend":"Blend Mode","pattern.info.popup.foreColor":"Fore","pattern.info.popup.backColor":"Back","stroke.dasharray.editor.add":"Add Dash","viewport.panning.enable":"You can move the area by holding down space key and dragging the screen.","image.select.editor.button":"Select Image"},Z_={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Langue","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Sombre","app.theme.light":"Clair","app.theme.gray":"Gris","app.label.theme":"Th\xE8me","app.tab.title.projects":"Projets","app.tab.title.layers":"Objets","app.tab.title.libraries":"Librarie","app.tab.title.components":"Objet","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Elements","app.tab.title.keyMap":"Clavier","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"T\xE9l\xE9charger","menu.item.save.title":"Enregistrer","menu.item.export.title":"Exporter","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Ecran","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Docs","menu.item.projects.title":"Projects","project.property.title":"Projet","project.information.property.title":"Information","project.information.property.name":"Nom","project.information.property.description":"Description","artboard.property.title":"Planche","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grille","layer.tree.property.title":"Objets","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grille","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Taille","position.property.width":"Largeur","position.property.height":"Hauteur","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Apparance","background.color.property.color":"Couleur","background.color.property.zindex":"z-index","background.color.property.opacity":"Opacit\xE9","background.color.property.blend":"M\xE9lange","background.color.property.overflow":"D\xE9bordement","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Cach\xE9","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiplie","blend.screen":"\xE9cran","blend.overlay":"couche","blend.darken":"sombre","blend.lighten":"clair","blend.color-dodge":"dodge","blend.color-burn":"brul\xE9","blend.hard-light":"dur","blend.soft-light":"doux","blend.difference":'diff"rence',"blend.exclusion":"exclusion","blend.hue":"teinte","blend.saturation":"saturation","blend.color":"couleur","blend.luminosity":"luminosit\xE9","background.image.property.title":"Remplissage","border.property.title":"Bordure","border.radius.property.title":"Rayon de bordure","boxshadow.property.title":"Ombres","filter.property.title":"Filtre","filter.property.blur":"Flou","filter.property.grayscale":"Echelle de gris","filter.property.hue-rotate":"Rotation teinte","filter.property.invert":"Invertir","filter.property.brightness":"Luminosit\xE9","filter.property.contrast":"Contraste","filter.property.drop-shadow":"Ombre port\xE9e","filter.property.drop-shadow.color":"Couleur","filter.property.drop-shadow.offsetX":"D\xE9calage X","filter.property.drop-shadow.offsetY":"D\xE9calage Y","filter.property.drop-shadow.blurRadius":"Flou","filter.property.opacity":"Opacit\xE9","filter.property.saturate":"Saturation","filter.property.sepia":"S\xE9pia","filter.property.svg":"SVG","font.property.title":"Police","font.property.color":"Couleur","font.property.size":"Taille","font.property.stretch":"Etirement","font.property.weight":"Poids","font.property.style":"Style","font.property.family":"Famille","font.spacing.property.title":"Espaces du texte","font.spacing.property.lineHeight":"Hauteur de ligne","font.spacing.property.letterSpacing":"Espace inter-caract\xE8res","font.spacing.property.wordSpacing":"Espace inter-mots","font.spacing.property.indent":"Identation","backdrop.filter.property.title":"Filtre Backdrop","clippath.property.title":"Chemin du Clip","export.property.title":"Exporter","export.property.download":"T\xE9l\xE9charger","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origine","image.property.size":"Taille","image.property.width":"Largeur","image.property.height":"Hauteur","video.property.title":"Video","video.property.play":"Jouer","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Vitesse de lecture","video.property.currentTime":"Temps actuel","video.property.playTime":"Temps de lecture","motion.property.title":"Mouvement","text.property.title":"Style Texte","text.property.align":"Alignement","text.property.transform":"Transformation","text.property.decoration":"D\xE9coration","text.clip.property.title":"Clip Texte","text.shadow.property.title":"Ombres Texte","text.fill.property.title":"Remplissage Texte","text.fill.property.fill":"Remplissage","text.fill.property.stroke":"Trait","text.fill.property.strokeWidth":"Largeur","transform.property.title":"Transformation","transform.origin.property.title":"Origine Transformation","transition.property.title":"Transition CSS","keyframe.property.title":"Image cl\xE9 CSS","selector.property.title":"S\xE9l\xE9cteur","selector.property.none":"Aucun s\xE9l\xE9cteur","path.data.property.title":"Information Chemin","polygon.data.property.title":"Information Polygone","perspective.property.title":"Perspective","perspective.origin.property.title":"Origine Perspective","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Chemin de mouvement","svg.item.property.fill":"Remplissage","svg.item.property.fillOpacity":"Opacit\xE9","svg.item.property.path":"Chemin","svg.item.property.polygon":"Polygone","svg.item.property.totalLength":"Longueur totale","svg.item.property.fillRule":"R\xE8gle remplissage","svg.item.property.stroke":"Trait","svg.item.property.strokeWidth":"Largeur de trait","svg.item.property.dashArray":"Suite tiret","svg.item.property.dashOffset":"D\xE9calage tiret","svg.item.property.lineCap":"Chapeau Ligne","svg.item.property.lineJoin":"Jonction ligne","svg.item.property.filter":"Filtre","svg.item.property.blend":"Blend Mode","border.editor.all":"Tout","border.editor.width":"Largeur","border.editor.style":"Style","border.editor.color":"Couleur","border.editor.top":"Haut","border.editor.left":"Gauche","border.editor.right":"Droite","border.editor.bottom":"Bas","border.radius.editor.topLeft":"Haut gauche","border.radius.editor.topRight":"Haut droite","border.radius.editor.bottomLeft":"Bas gauche","border.radius.editor.bottomRight":"Bas droite","boxshadow.editor.blur":"Flou","boxshadow.editor.spread":"Etalement","css.property.editor.properties":"Propri\xE9t\xE9s","offset.path.list.editor.path":"Chemin","offset.path.list.editor.totalLength":"Longueur totale","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotation","svgfilter.select.editor.message.create":"Cr\xE9er un filtre svg","svgfilter.select.editor.message.select":"S\xE9lection filtre","fill.editor.message.click.image":"Cliquez sur aper\xE7u si vous souhaitez s\xE9lectionner une image","fill.editor.message.drag.position":"Prendre pour changer la position centrale","fill.editor.x1":"D\xE9but X","fill.editor.x2":"Fin X","fill.editor.y1":"D\xE9but Y","fill.editor.y2":"Fin Y","fill.editor.spread":"Etalement","fill.editor.offset":"D\xE9calage","fill.editor.cx":"Centre X","fill.editor.cy":"Centre Y","fill.editor.r":"Rayon de fin","fill.editor.fx":"D\xE9part X","fill.editor.fy":"D\xE9part Y","fill.editor.fr":"Rayon de d\xE9part","perspective.origin.editor.originX":"Origine X","perspective.origin.editor.originY":"Origine Y","path.manager.msg":"Appuyer ESC ou Entr\xE9z keypour fermer Edition","path.manager.mode.done":"Done","path.manager.mode.modify":"Modifier","path.manager.mode.path":"Chemin","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transformer","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Retouner X","path.manager.mode.flipY":"Retouner Y","path.manager.mode.flipOrigin":"Retouner Origine","colorpicker.popup.title":"Pipette","selector.popup.title":"Propi\xE9t\xE9 de S\xE9lecteur","selector.popup.selector":"S\xE9lecteur","background.image.position.popup.title":"Motif de fond","background.image.position.popup.size":"Taille","background.image.position.popup.width":"Largeur","background.image.position.popup.height":"Hauteur","background.image.position.popup.repeat":"Rep\xE8te","background.image.position.popup.blend":"M\xE9lange","background.image.position.popup.type.repeat":"rep\xE8te","background.image.position.popup.type.no-repeat":"sans rep\xE9tition","background.image.position.popup.type.repeat-x":"rep\xE8te-x","background.image.position.popup.type.repeat-y":"rep\xE8te-y","background.image.position.popup.type.space":"espace","background.image.position.popup.type.round":"rond","gradient.picker.popup.title":"S\xE9lection Gradient & Image","image.asset.property.title":"Image","video.asset.property.title":"Vid\xE9o","color.asset.property.title":"Couleur","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Motif","svgfilter.asset.property.title":"Filtre SVG","inspector.tab.title.design":"Design","inspector.tab.title.component":"Composant","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"El\xE9ments","inspector.tab.title.text":"Texte","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Chronologie","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Jouer","timeline.play.control.pause":"Pause","timeline.play.control.first":"Premier","timeline.play.control.prev":"Pr\xE9c\xE9dent","timeline.play.control.next":"Suivant","timeline.play.control.last":"Dernier","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Vitesse","timeline.play.control.repeat":"R\xE9p\xE9ter","timeline.play.control.infinite":"Infini","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternatif","timeline.play.control.reverse":"inverse","timeline.play.control.alternate.reverse":"inverse alternatif","timeline.value.editor.value":"Valeur","timeline.value.editor.time":"Temps","timeline.value.editor.timing":"Calage temps","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"Filtre SVG","css.item.rotate":"Rotation","css.item.rotateX":"Rotation X","css.item.rotateY":"Rotation Y","css.item.rotateZ":"Rotation Z","css.item.rotate3d":"Rotation 3D","css.item.skewX":"Oblique X","css.item.skewY":"Oblique Y","css.item.translate":"Translation","css.item.translateX":"Translation X","css.item.translateY":"Translation Y","css.item.translateZ":"Translation Z","css.item.translate3d":"Translation 3D","css.item.perspective":"Persp\xE9ctive","css.item.scale":"Echelle","css.item.scaleX":"Echelle X","css.item.scaleY":"Echelle Y","css.item.scaleZ":"Echelle Z","css.item.scale3d":"Echelle 3D","css.item.matrix":"Matrice","css.item.matrix3d":"Matrice 3D","animation.property.title":"Animation CSS","animation.property.direction":"Direction","animation.property.play.state":"Etat lecture","animation.property.fill.mode":"Mode remplissage","animation.property.delay":"D\xE9lais","animation.property.duration":"Dur\xE9e","animation.property.iteration.count":"Nombre It\xE9rations","animation.property.Select a keyframe":"Selectionner une image cl\xE9","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Fonction temps","animation.property.popup.keyframe":"image cl\xE9","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Etat lecture","animation.property.popup.fill.mode":"Mode remplissage","animation.property.popup.delay":"D\xE9lais","animation.property.popup.duration":"Dur\xE9\xE9","animation.property.popup.iteration":"It\xE9ration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"inverse","animation.property.popup.alternate":"alternatif","animation.property.popup.alternate-reverse":"inverse alternatif","animation.property.popup.none":"Aucun","animation.property.popup.forwards":"en avant","animation.property.popup.backwards":"en arri\xE8re","animation.property.popup.both":"les deux","animation.property.popup.Select a keyframe":"Selectionner une image cl\xE9","keyframe.popup.title":"image cl\xE9","code.view.property.title":"Vue code","svg.filter.editor.tab.filter":"Filtrer","svg.filter.editor.tab.preset":"Pre-rempli","svg.filter.editor.tab.asset":"El\xE9ments","svg.filter.editor.GRAPHIC REFERENCES":"REFERENCES GRAPHIQUES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"ECLAIRAGE","svg.filter.editor.COMBINERS":"COMBINER","svg.filter.editor.Template":"Mod\xE8le","layout.property.title":"Disposition","layout.property.flex":"Bo\xEEte Flex","layout.property.grid":"Grille","layout.property.default":"D\xE9faut","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Ligne","flex.layout.editor.column":"Colonne","flex.layout.editor.row-reverse":"Inverse ligne","flex.layout.editor.column-reverse":"Inverse Colonne","flex.layout.editor.nowrap":"Non-emball\xE9","flex.layout.editor.wrap":"Emball\xE9 (wrap)","flex.layout.editor.wrap-reverse":"Inverse emball\xE9","flex.layout.editor.flex-start":"D\xE9but","flex.layout.editor.flex-end":"Fin","flex.layout.editor.center":"Centrer","flex.layout.editor.space-between":"Entre","flex.layout.editor.space-around":"Autour","flex.layout.editor.baseline":"Base","flex.layout.editor.stretch":"Etirement","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justifier","flex.layout.editor.align-items":"Aligner objets","flex.layout.editor.align-content":"Aligner contenu","flex.layout.item.property.title":"D\xE9tail Disposition objet","flex.layout.item.property.grow":"Augmenter Flex","flex.layout.item.property.shrink":"R\xE9duire Flex","flex.layout.item.property.basis":"Base Flex","flex.layout.item.property.none":"Aucun","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"valeur","grid.layout.editor.template.columns":"Colonne","grid.layout.editor.column.gap":"Espace Colonne","grid.layout.editor.template.rows":"Lignes","grid.layout.editor.row.gap":"Espace lignes","grid.box.editor.box.title":"Bo\xEEte","grid.box.editor.type":"Type","grid.box.editor.repeat":"R\xE9p\xE9ter","grid.box.editor.length":"Longueur","grid.box.editor.none":"Aucun","grid.box.editor.auto":"Auto","grid.box.editor.count":"Compte","grid.box.editor.value":"Taille","grid.layout.item.property.title":"D\xE9tail disposition objets","grid.layout.item.property.column":"Colonne","grid.layout.item.property.row":"Ligne","grid.layout.item.property.start":"D\xE9but","grid.layout.item.property.end":"Fin","grid.layout.item.property.none":"Aucun","grid.layout.item.property.value":"valeur","box.model.property.title":"Mod\xE8le","box.model.property.margin":"Marge","box.model.property.padding":"Espace","component.items.canvas":"Toile","component.items.layer":"Objet","component.items.3dlayer":"Objet 3D","component.items.drawing":"Dessin","component.items.custom":"Composant personnalis\xE9","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"Style SVG Texte","svg.text.property.textarea":"Zone Texte","svg.text.property.size":"Taille","svg.text.property.weight":"Poids","svg.text.property.style":"Style","svg.text.property.anchor":"Ancre Texte","svg.text.property.family":"Famille","svg.text.property.length.adjust":"Ajusteement longueur","svg.text.property.text.length":"Ajusteement Texte","svg.text.property.start.offset":"D\xE9callage d\xE9part","fill.picker.popup.title":"S\xE9lection Fragment SVG","gradient.editor.drag.message":"Glisser pour d\xE9placer centre.","draw.manager.tolerance":"Tol\xE9rance","pattern.property.title":"Motif","pattern.info.popup.title":"Info Motif","pattern.info.popup.width":"Largeur","pattern.info.popup.height":"Hauteur","pattern.info.popup.lineWidth":"Largeur ligne","pattern.info.popup.lineHeight":"Hauteur de ligne","pattern.info.popup.rotate":"Rotatation","pattern.info.popup.blend":"M\xE9lange","pattern.info.popup.foreColor":"Avant","pattern.info.popup.backColor":"Arri\xE8re","stroke.dasharray.editor.add":"Ajout tiret","viewport.panning.enable":"You can move the area by holding down space and dragging the screen."},q_={"app.title":"elf","app.sample":(s,e,t)=>`${s}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"\uC5B8\uC5B4","app.layout.all":"\uB808\uC774\uC544\uC6C3","app.layout.css":"CSS \uBAA8\uB4DC","app.layout.svg":"SVG \uBAA8\uB4DC","app.label.layout":"\uBA54\uB274\uAD6C\uC131","app.theme.dark":"\uC5B4\uB450\uC6B4","app.theme.light":"\uBC1D\uC740","app.theme.toon":"\uADF8\uB9AC\uAE30","app.theme.gray":"\uD68C\uC0C9","app.label.theme":"\uD14C\uB9C8","app.tab.title.projects":"\uD504\uB85C\uC81D\uD2B8","app.tab.title.layers":"\uB808\uC774\uC5B4","app.tab.title.libraries":"\uB77C\uC774\uBE0C\uB7EC\uB9AC","app.tab.title.components":"\uCEF4\uD3EC\uB10C\uD2B8","app.tab.title.artboards":"\uC544\uD2B8\uBCF4\uB4DC","app.tab.title.assets":"\uC5D0\uC14B","app.tab.title.keyMap":"\uB2E8\uCD95\uD0A4","app.confirm.message.artboard.items.removeArtboard":"\uC544\uD2B8\uBCF4\uB4DC \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","app.confirm.message.custom-component.items.removeCustomComponent":"\uCEF4\uD3EC\uB10C\uD2B8 \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","menu.item.download.title":"\uB2E4\uC6B4\uB85C\uB4DC","menu.item.save.title":"\uC800\uC7A5","menu.item.export.title":"\uB0B4\uBCF4\uB0B4\uAE30","menu.item.fullscreen.title":"\uC804\uCCB4\uD654\uBA74","menu.item.shortcuts.title":"\uB2E8\uCD95\uD0A4","menu.item.github.title":"Github","menu.item.learn.title":"\uBC30\uC6B0\uAE30","menu.item.projects.title":"\uD504\uB85C\uC81D\uD2B8","project.property.title":"\uD504\uB85C\uC81D\uD2B8","project.information.property.title":"\uD504\uB85C\uC81D\uD2B8 \uC815\uBCF4","project.information.property.name":"\uC774\uB984","project.information.property.description":"\uC124\uBA85","artboard.property.title":"\uC544\uD2B8\uBCF4\uB4DC","artboard.property.layout.title.flex":"\uD50C\uB809\uC2A4","artboard.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","layer.tree.property.title":"\uB808\uC774\uC5B4","layer.tree.property.layout.title.flex":"\uD50C\uB809\uC2A4","layer.tree.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","alignment.property.title":"\uC815\uB82C","position.property.title":"\uC704\uCE58","position.property.X":"X","position.property.Y":"Y","size.property.title":"\uD06C\uAE30","position.property.width":"\uB113\uC774","position.property.height":"\uB192\uC774","position.property.rotate":"\uD68C\uC804","position.property.opacity":"\uD22C\uBA85","background.color.property.title":"\uD45C\uC2DC","background.color.property.color":"\uBC30\uACBD\uC0C9","background.color.property.zindex":"z-index","background.color.property.blend":"\uBE14\uB80C\uB4DC\uBAA8\uB4DC","background.color.property.overflow":"\uC624\uBC84\uD50C\uB85C\uC6B0","background.color.property.overflow.visible":"\uBCF4\uC774\uAE30","background.color.property.overflow.hidden":"\uC228\uAE30\uAE30","background.color.property.overflow.scroll":"\uC2A4\uD06C\uB864","background.color.property.overflow.auto":"\uC790\uB3D9","blend.normal":"Normal(\uD45C\uC900) \uD63C\uD569\uBAA8\uB4DC","blend.multiply":"Multiply(\uACF1\uD558\uAE30) \uBAA8\uB4DC","blend.screen":"Screen(\uC2A4\uD06C\uB9B0) \uBAA8\uB4DC ","blend.overlay":"Overlay(\uC624\uBC84\uB808\uC774) \uBAA8\uB4DC","blend.darken":"Darken(\uC5B4\uB461\uAE30) \uBAA8\uB4DC","blend.lighten":"Lighten(\uBC1D\uAE30) \uBAA8\uB4DC ","blend.color-dodge":"Color Dodge(\uCEEC\uB7EC \uB2F7\uC9C0) \uBAA8\uB4DC ","blend.color-burn":"Color Burn(\uCEEC\uB7EC \uBC88) \uBAA8\uB4DC ","blend.hard-light":"Hard Light(\uD558\uB4DC \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.soft-light":"Soft Light(\uC18C\uD504\uD2B8 \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.difference":"Difference(\uCC28\uC774) \uBAA8\uB4DC","blend.exclusion":"Exclusion(\uC81C\uC678) \uBAA8\uB4DC","blend.hue":"Hue(\uC0C9\uC870) \uBAA8\uB4DC ","blend.saturation":"Saturation(\uCC44\uB3C4) \uBAA8\uB4DC","blend.color":"Color(\uC0C9\uC0C1) \uBAA8\uB4DC","blend.luminosity":"Luminosity(\uAD11\uB3C4) \uBAA8\uB4DC ","background.image.property.title":"\uCC44\uC6B0\uAE30","border.property.title":"\uC678\uACFD\uC120","border.radius.property.title":"\uB465\uADFC \uC678\uACFD\uC120","boxshadow.property.title":"\uADF8\uB9BC\uC790","filter.property.title":"\uD544\uD130","filter.property.blur":"\uD750\uB9BC(Blur)","filter.property.grayscale":"\uD68C\uC0C9(GrayScale)","filter.property.hue-rotate":"\uC0C9\uC870(HueRotate)","filter.property.invert":"\uBC18\uC804(Invert)","filter.property.brightness":"\uBC1D\uAE30(Brightness)","filter.property.contrast":"\uB300\b\uC870(Contrast)","filter.property.drop-shadow":"\uADF8\uB9BC\uC790(Drop Shadow)","filter.property.drop-shadow.color":"\uC0C9","filter.property.drop-shadow.offsetX":"X","filter.property.drop-shadow.offsetY":"Y","filter.property.drop-shadow.blurRadius":"\uD750\uB9BC","filter.property.opacity":"\uD22C\uBA85\uB3C4(Opacity)","filter.property.saturate":"\uCC44\uB3C4(Saturate)","filter.property.sepia":"\uAC08\uC0C9\uD1A4(Sepia)","filter.property.svg":"SVG","font.property.title":"\uD3F0\uD2B8","font.property.color":"\uC0C9","font.property.size":"\uD06C\uAE30","font.property.stretch":"\uBED7\uAE30","font.property.weight":"\uAD75\uAE30","font.property.style":"\uC2A4\uD0C0\uC77C","font.property.family":"\uAE00\uAF34","font.spacing.property.title":"\uD3F0\uD2B8 \uACF5\uAC04","font.spacing.property.lineHeight":"\uC904 \uB192\uC774","font.spacing.property.letterSpacing":"\uAE00\uC790 \uAC04\uACA9","font.spacing.property.wordSpacing":"\uB2E8\uC5B4 \uAC04\uACA9","font.spacing.property.indent":"\uB4E4\uC5EC\uC4F0\uAE30","backdrop.filter.property.title":"\uD6C4\uBA74 \uD544\uD130","clippath.property.title":"\uD074\uB9BD\uD328\uC2A4","export.property.title":"\uB0B4\uBCF4\uB0B4\uAE30","export.property.download":"\uB2E4\uC6B4\uB85C\uB4DC","iframe.property.title":"\uC544\uC774\uD504\uB808\uC784","image.property.title":"\uC774\uBBF8\uC9C0","image.property.origin":"\uC6D0\uBCF8","image.property.size":"\uD06C\uAE30","image.property.width":"\uB113\uC774","image.property.height":"\uB192\uC774","video.property.title":"\uBE44\uB514\uC624","video.property.play":"\uC2DC\uC791","video.property.pause":"\uBA48\uCDA4","video.property.volume":"\uBCFC\uB968","video.property.playbackRate":"\uBE60\uB974\uAE30","video.property.currentTime":"\uD604\uC7AC \uC2DC\uAC04","video.property.playTime":"\uD50C\uB808\uC774 \uC2DC\uAC04 \uAC04\uACA9","motion.property.title":"\uBAA8\uC158","path.data.property.title":"\uD328\uC2A4 \uC815\uBCF4","polygon.data.property.title":"\uD3F4\uB9AC\uACE4 \uC815\uBCF4","text.property.title":"\uD14D\uC2A4\uD2B8 \uC2A4\uD0C0\uC77C","text.property.align":"\uC815\uB82C","text.property.transform":"\uBCC0\uD615","text.property.decoration":"\uC7A5\uC2DD","text.clip.property.title":"\uD14D\uC2A4\uD2B8 \uD074\uB9BD","text.shadow.property.title":"\uD14D\uC2A4\uD2B8 \uADF8\uB9BC\uC790","text.fill.property.title":"\uD14D\uC2A4\uD2B8 \uCC44\uC6B0\uAE30","text.fill.property.fill":"\uCC44\uC6B0\uAE30","text.fill.property.stroke":"\uC724\uACFD\uC120","text.fill.property.strokeWidth":"\uC724\uACFD\uC120 \uAD75\uAE30","transform.property.title":"\uD2B8\uB79C\uC2A4\uD3FC","transform.origin.property.title":"\uD2B8\uB79C\uC2A4\uD3FC Origin","transition.property.title":"CSS \uD2B8\uB79C\uC9C0\uC158","keyframe.property.title":"CSS \uD0A4\uD504\uB808\uC784","selector.property.title":"CSS \uC140\uB809\uD130","selector.property.none":"\uC120\uD0DD\uC790 \uC5C6\uC74C","perspective.property.title":"\uD22C\uC601(perspective)","perspective.origin.property.title":"\uD22C\uC601 \uC911\uC2EC\uC810","svg.item.property.title":"\uBCF4\uC774\uAE30","svg.item.property.isMotionPath":"\uBAA8\uC158 \uD328\uC2A4","svg.item.property.fill":"\uCC44\uC6B0\uAE30","svg.item.property.fillOpacity":"\uD22C\uBA85\uB3C4","svg.item.property.path":"\uD328\uC2A4","svg.item.property.polygon":"\uD3F4\uB9AC\uACE4","svg.item.property.totalLength":"\uC804\uCCB4 \uAE38\uC774","svg.item.property.fillRule":"\uCC44\uC6B0\uAE30 \uADDC\uCE59","svg.item.property.stroke":"\uC120","svg.item.property.strokeWidth":"\uC120 \uAD75\uAE30","svg.item.property.dashArray":"\uC810\uC120 \uAE38\uC774","svg.item.property.dashOffset":"\uC810\uC120 \uC704\uCE58","svg.item.property.lineCap":"\uC120 \uBAA8\uC591","svg.item.property.lineJoin":"\uACB9\uCE5C \uC120","svg.item.property.filter":"\uD544\uD130","svg.item.property.blend":"\uBE14\uB80C\uB4DC","border.editor.all":"\uC804\uCCB4","border.editor.width":"\uD06C\uAE30","border.editor.style":"\uC2A4\uD0C0\uC77C","border.editor.color":"\uC0C9","border.editor.top":"\uC704","border.editor.left":"\uC67C\uCABD","border.editor.right":"\uC624\uB978\uCABD","border.editor.bottom":"\uC544\uB798","border.radius.editor.topLeft":"\uC67C\uCABD \uC704","border.radius.editor.topRight":"\uC624\uB978\uCABD \uC704","border.radius.editor.bottomLeft":"\uC67C\uCABD \uC544\uB798","border.radius.editor.bottomRight":"\uC624\uB978\uCABD \uC544\uB798","boxshadow.editor.blur":"\uD750\uB9BC","boxshadow.editor.spread":"\uAE38\uC774","css.property.editor.properties":"\uC18D\uC131","offset.path.list.editor.path":"\uD328\uC2A4","offset.path.list.editor.totalLength":"\uC804\uCCB4 \uAE38\uC774","offset.path.list.editor.distance":"\uAC70\uB9AC","offset.path.list.editor.direction":"\uBC29\uD5A5","offset.path.list.editor.rotate":"\uD68C\uC804","svgfilter.select.editor.message.create":"\uC0C8\uB85C\uC6B4 SVG Filter \uB97C \uB9CC\uB4DC\uC138\uC694.","svgfilter.select.editor.message.select":"\uD544\uD130\uB97C \uC120\uD0DD\uD558\uC138\uC694.","fill.editor.message.click.image":"\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uACE0 \uC2F6\uC73C\uBA74 \uD504\uB9AC\uBDF0 \uC601\uC5ED\uC744 \uD074\uB9AD\uD558\uC138\uC694.","fill.editor.message.drag.position":"\uAC00\uC6B4\uB370 \uC704\uCE58\uB97C \uB4DC\uB798\uADF8 \uD574\uBCF4\uC138\uC694.","fill.editor.x1":"\uC2DC\uC791 X","fill.editor.x2":"\uB05D X","fill.editor.y1":"\uC2DC\uC791 Y","fill.editor.y2":"\uB05D Y","fill.editor.spread":"\uD655\uC0B0","fill.editor.offset":"\uC704\uCE58","fill.editor.cx":"\uC911\uC2EC\uC810 X","fill.editor.cy":"\uC911\uC2EC\uC810 Y","fill.editor.r":"\uB05D \uBC18\uC9C0\uB984","fill.editor.fx":"\uC2DC\uC791 X","fill.editor.fy":"\uC2DC\uC791 Y","fill.editor.fr":"\uC2DC\uC791 \uBC18\uC9C0\uB984","perspective.origin.editor.originX":"\uC911\uC2EC\uC810 X","perspective.origin.editor.originY":"\uC911\uC2EC\uC810 Y","path.manager.msg":"\uD3B8\uC9D1\uC744 \uC885\uB8CC\uD560 \uB54C\uB294 ESC \uD0A4\uB098 Enter \uD0A4\uB97C \uB204\uB974\uC138\uC694. \uB610\uB294 \uD654\uBA74\uC744 \uD074\uB9AD\uD558\uC2DC\uBA74 \uB429\uB2C8\uB2E4.","path.manager.mode.done":"\uC644\uB8CC","path.manager.mode.modify":"\uC810 \uD3B8\uC9D1","path.manager.mode.path":"\uC810 \uCD94\uAC00","path.manager.mode.warp":"\uC6CC\uD504","path.manager.mode.transform":"\uBCC0\uD615","path.manager.mode.reverse":"\uC21C\uC11C\uBCC0\uACBD","path.manager.mode.flipX":"X\uCD95 \uD68C\uC804","path.manager.mode.flipY":"Y\uCD95 \uD68C\uC804","path.manager.mode.flipOrigin":"\uC804\uCCB4 \uD68C\uC804","colorpicker.popup.title":"\uC0C9\uC0C1 \uC120\uD0DD","selector.popup.title":"\uC120\uD0DD\uC790 \uC18D\uC131","selector.popup.selector":"\uC120\uD0DD\uC790","background.image.position.popup.title":"\uBC30\uACBD \uD328\uD134","background.image.position.popup.size":"\uD06C\uAE30","background.image.position.popup.width":"\uB113\uC774","background.image.position.popup.height":"\uB192\uC774","background.image.position.popup.repeat":"\uBC18\uBCF5","background.image.position.popup.blend":"\uBE14\uB80C\uB4DC","background.image.position.popup.type.repeat":"\uBC18\uBCF5","background.image.position.popup.type.no-repeat":"\uBC18\uBCF5 \uC548\uD568","background.image.position.popup.type.repeat-x":"x\uCD95 \uBC18\uBCF5","background.image.position.popup.type.repeat-y":"y\uCD95 \uBC18\uBCF5","background.image.position.popup.type.space":"\uACF5\uBC31\uC720\uC9C0","background.image.position.popup.type.round":"\uBC18\uC62C\uB9BC","gradient.picker.popup.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8\uC640 \uC774\uBBF8\uC9C0","image.asset.property.title":"\uC774\uBBF8\uC9C0","video.asset.property.title":"\uBE44\uB514\uC624","color.asset.property.title":"\uC0C9","gradient.asset.property.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8","pattern.asset.property.title":"\uD328\uD134","svgfilter.asset.property.title":"SVG \uD544\uD130","inspector.tab.title.design":"\uB514\uC790\uC778","inspector.tab.title.component":"\uCEF4\uD3EC\uB10C\uD2B8 \uC18D\uC131","inspector.tab.title.transition":"\uC560\uB2C8\uBA54\uC774\uC158","inspector.tab.title.asset":"\uC5D0\uC14B \uAD00\uB9AC\uC790","inspector.tab.title.text":"\uD14D\uC2A4\uD2B8","inspector.tab.title.code":"\uCF54\uB4DC","inspector.tab.title.history":"\uAE30\uB85D","timeline.property.title":"\uD0C0\uC784\uB77C\uC778","timeline.property.resize":"\uD0C0\uC784\uB77C\uC778 \uB192\uC774\uB97C \uBCC0\uACBD\uD569\uB2C8\uB2E4. \uB4DC\uB798\uADF8 \uD574\uC8FC\uC138\uC694.","timeline.animation.property.title":"\uC560\uB2C8\uBA54\uC774\uC158","timeline.play.control.play":"\uD50C\uB808\uC774","timeline.play.control.pause":"\uBA48\uCDA4","timeline.play.control.first":"\uCC98\uC74C\uC73C\uB85C","timeline.play.control.prev":"\uC774\uC804\uC73C\uB85C","timeline.play.control.next":"\uB2E4\uC74C\uC73C\uB85C","timeline.play.control.last":"\uB9C8\uC9C0\uB9C9\uC73C\uB85C","timeline.play.control.direction":"\uBC29\uD5A5","timeline.play.control.speed":"\uC18D\uB825","timeline.play.control.repeat":"\uBC18\uBCF5","timeline.play.control.infinite":"\uBB34\uD55C","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"\uAC12","timeline.value.editor.time":"\uC2DC\uAC04","timeline.value.editor.timing":"\uD0C0\uC774\uBC0D \uD568\uC218","timeline.value.editor.offset.message":"Enter\uD0A4\uB97C \uC785\uB825\uD558\uBA74 \uC801\uC6A9\uB429\uB2C8\uB2E4.","svgfilter.popup.title":"SVG \uD544\uD130","css.item.rotate":"\uD68C\uC804","css.item.rotateX":"X\uCD95 \uD68C\uC804","css.item.rotateY":"Y\uCD95 \uD68C\uC804","css.item.rotateZ":"Z\uCD95 \uD68C\uC804","css.item.rotate3d":"3D \uD68C\uC804","css.item.skewX":"X\uCD95 \uB298\uC774\uAE30","css.item.skewY":"Y\uCD95 \uB298\uC774\uAE30","css.item.translate":"\uC774\uB3D9","css.item.translateX":"X\uCD95 \uC774\uB3D9","css.item.translateY":"Y\uCD95 \uC774\uB3D9","css.item.translateZ":"Z\uCD95 \uC774\uB3D9","css.item.translate3d":"3D \uC774\uB3D9","css.item.perspective":"\uC6D0\uADFC","css.item.scale":"\uD06C\uAE30\uBCC0\uACBD","css.item.scaleX":"X\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleY":"Y\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleZ":"Z\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scale3d":"3D \uD06C\uAE30\uBCC0\uACBD","css.item.matrix":"\uBCC0\uD658 \uD589\uB82C","css.item.matrix3d":"3D \uBCC0\uD658 \uD589\uB82C","animation.property.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.direction":"\uBC29\uD5A5","animation.property.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.duration":"\uC2DC\uAC04","animation.property.iteration.count":"\uBC18\uBCF5 \uD69F\uC218","animation.property.select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694","animation.property.popup.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.popup.timing.function":"\uD0C0\uC774\uBC0D \uD568\uC218","animation.property.popup.keyframe":"\uD0A4\uD504\uB808\uC784","animation.property.popup.direction":"\uBC29\uD5A5","animation.property.popup.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.popup.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.popup.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.popup.duration":"\uC2DC\uAC04","animation.property.popup.iteration":"\uBC18\uBCF5 \uD69F\uC218","animation.property.popup.normal":"\uC2DC\uAC04\uC21C","animation.property.popup.reverse":"\uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.alternate":"\uC655\uBCF5 \uC2DC\uAC04\uC21C","animation.property.popup.alternate-reverse":"\uC655\uBCF5 \uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.","keyframe.popup.title":"\uD0A4\uD504\uB808\uC784","code.view.property.title":"\uCF54\uB4DC\uBDF0","svg.filter.editor.tab.filter":"\uD544\uD130","svg.filter.editor.tab.preset":"\uD504\uB9AC\uC14B","svg.filter.editor.tab.asset":"\uC5D0\uC14B","svg.filter.editor.GRAPHIC REFERENCES":"\uCC38\uC870 \uADF8\uB798\uD53D","svg.filter.editor.SOURCES":"\uC6D0\uBCF8","svg.filter.editor.MODIFIER":"\uC218\uC815","svg.filter.editor.LIGHTING":"\uBE5B","svg.filter.editor.COMBINERS":"\uACB0\uD569","svg.filter.editor.Template":"\uD15C\uD50C\uB9BF","layout.property.title":"\uB808\uC774\uC544\uC6C3","layout.property.flex":"\uD50C\uB809\uC2A4 \uBC15\uC2A4","layout.property.grid":"\uADF8\uB9AC\uB4DC","layout.property.default":"\uAE30\uBCF8 \uC88C\uD45C","layout.property.resizing.title":"\uC0AC\uC774\uC988 \uC870\uC808","layout.property.resizing.self.title":"\uC544\uC774\uD15C \uC0AC\uC774\uC988 \uC870\uC808","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"\uD589","flex.layout.editor.column":"\uC5F4","flex.layout.editor.row-reverse":"\uC5ED\uBC29\uD5A5 \uD589","flex.layout.editor.column-reverse":"\uC5ED\uBC29\uD5A5 \uC5F4","flex.layout.editor.nowrap":"\uAC10\uC2F8\uC9C0 \uC54A\uAE30","flex.layout.editor.wrap":"\uAC10\uC2F8\uAE30","flex.layout.editor.wrap-reverse":"\uC5ED\uBC29\uD5A5 \uAC10\uC2F8\uAE30","flex.layout.editor.flex-start":"\uC2DC\uC791","flex.layout.editor.flex-end":"\uB05D","flex.layout.editor.center":"\uC911\uAC04","flex.layout.editor.space-between":"\uACF5\uAC04 \uC911\uAC04 \uCC44\uC6C0","flex.layout.editor.space-around":"\uACF5\uAC04 \uC591\uB05D \uCC44\uC6C0","flex.layout.editor.baseline":"\uAE30\uBCF8\uC120","flex.layout.editor.stretch":"\uD3BC\uCE58\uAE30","flex.layout.editor.direction":"\uBC29\uD5A5","flex.layout.editor.justify-content":"\uCEE8\uD150\uCE20 \uC870\uC815","flex.layout.editor.align-items":"\uC544\uC774\uD15C \uC815\uB82C","flex.layout.editor.align-content":"\uCEE8\uD150\uCE20 \uC815\uB82C","flex.layout.item.property.title":"\uD50C\uB809\uC2A4 \uC544\uC774\uD15C \uC124\uC815","flex.layout.item.property.grow":"\uACF5\uAC04 \uBE44\uC728","flex.layout.item.property.shrink":"\uCD95\uC18C \uBE44\uC728","flex.layout.item.property.basis":"\uCD08\uAE30 \uD06C\uAE30","flex.layout.item.property.none":"\uC5C6\uC74C","flex.layout.item.property.auto":"\uC790\uB3D9","flex.layout.item.property.value":"\uAC12","grid.layout.editor.template.columns":"\uC5F4","grid.layout.editor.column.gap":"\uC5F4 \uAC04\uACA9","grid.layout.editor.template.rows":"\uD589","grid.layout.editor.row.gap":"\uD589 \uAC04\uACA9","grid.box.editor.box.title":"\uC601\uC5ED","grid.box.editor.type":"\uD0C0\uC785","grid.box.editor.repeat":"\uBC18\uBCF5","grid.box.editor.length":"\uAE38\uC774","grid.box.editor.none":"\uC5C6\uC74C","grid.box.editor.auto":"\uC790\uB3D9","grid.box.editor.count":"\uAC1C\uC218","grid.box.editor.value":"\uD06C\uAE30","grid.layout.item.property.title":"\uADF8\uB9AC\uB4DC \uC544\uC774\uD15C \uC124\uC815","grid.layout.item.property.column":"\uC5F4","grid.layout.item.property.row":"\uD589","grid.layout.item.property.start":"\uC2DC\uC791","grid.layout.item.property.End":"\uB05D","grid.layout.item.property.none":"\uC5C6\uC74C","grid.layout.item.property.value":"\uAC12","box.model.property.title":"\uBC15\uC2A4 \uBAA8\uB378","box.model.property.margin":"\uB9C8\uC9C4","box.model.property.padding":"\uD328\uB529","component.items.canvas":"\uCE94\uBC84\uC2A4","component.items.layer":"\uB808\uC774\uC5B4","component.items.3dlayer":"3D \uB808\uC774\uC5B4","component.items.drawing":"\uADF8\uB9AC\uAE30","component.items.custom":"\uC0AC\uC6A9\uC790 \uC815\uC758 \uCEF4\uD3EC\uB10C\uD2B8","component.items.chart":"\uCC28\uD2B8","component.items.plugin":"\uD50C\uB7EC\uADF8\uC778","svg.text.property.title":"SVG Text \uC2A4\uD0C0\uC77C","svg.text.property.textarea":"\uD14D\uC2A4\uD2B8 \uC785\uB825","svg.text.property.size":"\uD3F0\uD2B8 \uD06C\uAE30","svg.text.property.weight":"\uD3F0\uD2B8 \uAD75\uAE30","svg.text.property.style":"\uD3F0\uD2B8 \uC2A4\uD0C0\uC77C","svg.text.property.anchor":"\uD14D\uC2A4\uD2B8 \uC704\uCE58","svg.text.property.family":"\uD3F0\uD2B8 \uAE00\uAF34","svg.text.property.length.adjust":"\uAE38\uC774 \uB300\uC751","svg.text.property.text.length":"\uD14D\uC2A4\uD2B8 \uAE38\uC774","svg.text.property.start.offset":"\uC2DC\uC791 \uC9C0\uC810","fill.picker.popup.title":"\uC0C9 \uCC44\uC6B0\uAE30","gradient.editor.drag.message":"\uB4DC\uB798\uADF8 \uD558\uBA74 \uC911\uC2EC\uC810\uC744 \uC62E\uAE38 \uC218 \uC788\uC2B5\uB2C8\uB2E4.","draw.manager.tolerance":"\uD3EC\uC778\uD2B8 \uD5C8\uC6A9 \uC624\uCC28","pattern.property.title":"\uD328\uD134","pattern.info.popup.title":"\uD328\uD134 \uC815\uBCF4","pattern.info.popup.width":"\uB113\uC774","pattern.info.popup.height":"\uB192\uC774","pattern.info.popup.lineWidth":"\uC120 \uB113\uC774","pattern.info.popup.lineHeight":"\uC120 \uB192\uC774","pattern.info.popup.rotate":"\uD68C\uC804","pattern.info.popup.blend":"\uBE14\uB80C\uB4DC","pattern.info.popup.foreColor":"\uD328\uD134\uC0C9","pattern.info.popup.backColor":"\uBC30\uACBD\uC0C9","stroke.dasharray.editor.add":"\uC810 \uCD94\uAC00","viewport.panning.enable":"space \uB97C \uB204\uB978\uCC44 \uD654\uBA74\uC744 \uB4DC\uB798\uADF8 \uD558\uBA74 \uC601\uC5ED\uC744 \uC6C0\uC9C1\uC77C \uC218 \uC788\uC2B5\uB2C8\uB2E4."},Vh={en_US:K_,fr_FR:Z_,ko_KR:q_};function wu(s){Object.keys(Vh).forEach(function(e){s.registerI18nMessage(e,Vh[e])})}const Zr={HORIZONTAL:"constraints-horizontal",VERTICAL:"constraints-vertical"},Me={NONE:"none",MIN:"min",MAX:"max",STRETCH:"stretch",SCALE:"scale",CENTER:"center"},qr={DIFFERENCE:"difference",INTERSECTION:"intersection",UNION:"union",REVERSE_DIFFERENCE:"reverse-difference",XOR:"xor"},cl={BUTT:"butt",ROUND:"round",SQUARE:"square"},xa={MITER:"miter",ROUND:"round",BEVEL:"bevel"},Nt={NORMAL:"normal",MULTIPLY:"multiply",SCREEN:"screen",OVERLAY:"overlay",DARKEN:"darken",LIGHTEN:"lighten",COLOR_DODGE:"color-dodge",COLOR_BURN:"color-burn",HARD_LIGHT:"hard-light",SOFT_LIGHT:"soft-light",DIFFERENCE:"difference",EXCLUSION:"exclusion",HUE:"hue",SATURATION:"saturation",COLOR:"color",LUMINOSITY:"luminosity"},hl={NONE:"none",UNDERLINE:"underline",OVERLINE:"overline",LINE_THROUGH:"line-through",BLINK:"blink"},dl={NONE:"none",CAPITALIZE:"capitalize",UPPERCASE:"uppercase",LOWERCASE:"lowercase"},Q_={START:"start",END:"end",LEFT:"left",RIGHT:"right",CENTER:"center",JUSTIFY:"justify"},Ma={VISIBLE:"visible",HIDDEN:"hidden",SCROLL:"scroll",AUTO:"auto"},Yr={NONE:"none",HIDDEN:"hidden",DOTTED:"dotted",DASHED:"dashed",SOLID:"solid",DOUBLE:"double",GROOVE:"groove",RIDGE:"ridge",INSET:"inset",OUTSET:"outset"},Ae={DEFAULT:"default",FLEX:"flex",GRID:"grid"},Kt={ROW:"row",ROW_REVERSE:"row-reverse",COLUMN:"column",COLUMN_REVERSE:"column-reverse"},Qs={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},Ri={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",BASELINE:"baseline",STRETCH:"stretch"},J_={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},oo={NOWRAP:"nowrap",WRAP:"wrap",WRAP_REVERSE:"wrap-reverse"},Ce={FIXED:"fixed",HUG_CONTENT:"hug-content",FILL_CONTAINER:"fill-container"},Xn={NONE:"none",TEXT:"text"},Ar={OUTSET:"outset",INSET:"inset"},D={STATIC:"static-gradient",LINEAR:"linear-gradient",RADIAL:"radial-gradient",CONIC:"conic-gradient",REPEATING_LINEAR:"repeating-linear-gradient",REPEATING_RADIAL:"repeating-radial-gradient",REPEATING_CONIC:"repeating-conic-gradient",IMAGE:"image",URL:"url"},$r={CLOSEST_SIDE:"closest-side",CLOSEST_CORNER:"closest-corner",FARTHEST_SIDE:"farthest-side",FARTHEST_CORNER:"farthest-corner"},xt={CIRCLE:"circle",ELLIPSE:"ellipse"},Zt={NONE:"none",CIRCLE:"circle",ELLIPSE:"ellipse",POLYGON:"polygon",INSET:"inset",PATH:"path",SVG:"svg"},Dr={VISIBLE:"visible",HIDDEN:"hidden"},ue={LINEAR:"linear",EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",STEPS:"steps",CUBIC_BEZIER:"cubic-bezier",PATH:"path"},mr={PAD:"pad",REFLECT:"reflect",REPEAT:"repeat"},Ue={COMMA:"comma",COLOR:"color",LENGTH:"length",GRADIENT:"gradient",TIMING:"timing",KEYWORD:"keyword",STRING:"string",NUMBER:"number",BOOLEAN:"boolean",FUNCTION:"function",PATH:"path",URL:"url",REPEAT:"repeat",UNKNOWN:"unknown"},eS={MOVETO:"M",LINETO:"L",CURVETO:"C",QUARDTO:"Q",ARCTO:"A",CLOSEPATH:"Z",UNKNOWN:"unknown"},Br={APPEND_CHILD:"appendChild",INSERT_BEFORE:"insertBefore",INSERT_AFTER:"insertAfter"};class uc extends X{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(n=>typeof n=="string"?{value:n,text:n}:n):(this.props.options||"").split(e).map(n=>n.trim()).map(n=>{const[o,l]=n.split(":");return{value:o,text:l||o}}),r=this.props.value,i=this.props.tabindex,a=this.props.title;return{splitChar:e,label:this.props.label||"",title:a,options:t,value:r,tabIndex:i}}getOptionString(){var e=this.state.options.map(t=>{var r=t.value,i=t.text||t.value;i===""?i=this.props["none-value"]?this.props["none-value"]:"":i==="-"&&(i="----------",r="");var a=r===this.state.value?"selected":"";const n=t.disabled?"disabled":"";return``});return e.join("")}template(){var{label:e,title:t,tabIndex:r,value:i=Nt.NORMAL}=this.state,a=e?"has-label":"",n=r?'tabIndex="1"':"",o=this.props.compact?"compact":"";return ne[e]&&(e=R(e)),` +
        + ${e?``:""} +
        + +
        + ${i} + ${R("expand_more")} +
        +
        +
        + `}getValue(){return this.refs.$options.value}setValue(e){this.refs.$options.val(this.state.value),this.setState({value:e+""})}[ae("$options")](){return{"data-count":this.state.options.length.toString()}}[ae("$selectedValue")](){var e;return{text:(e=this.state.options.find(t=>t.value===this.state.value))==null?void 0:e.text}}[Tr("$options")](){this.updateData({value:this.refs.$options.value}),this.bindData("$selectedValue")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}const tS=[Nt.NORMAL,Nt.MULTIPLY,Nt.SCREEN,Nt.OVERLAY,Nt.DARKEN,Nt.LIGHTEN,Nt.COLOR_DODGE,Nt.COLOR_BURN,Nt.HARD_LIGHT,Nt.SOFT_LIGHT,Nt.DIFFERENCE,Nt.EXCLUSION,Nt.HUE,Nt.SATURATION,Nt.COLOR,Nt.LUMINOSITY];class rS extends uc{getBlendList(){return tS.map(e=>({value:e,text:this.$i18n(`blend.${e}`)}))}initState(){return ie(b({},super.initState()),{options:this.getBlendList()})}}const Cu={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)",currentColor:"currentColor"};function iS(s){return!!Cu[s]}function sS(s){return Cu[s]}var vo={isColorName:iS,getColorByName:sS};function Wl(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];const r=s/255,i=e/255,a=t/255,n=Math.max(r,i,a),o=Math.min(r,i,a),l=n-o;var c=0;l==0?c=0:n==r?c=60*((i-a)/l%6):n==i?c=60*((a-r)/l+2):n==a&&(c=60*((r-i)/l+4)),c<0&&(c=360+c);var h=0;n==0?h=0:h=l/n;var u=n;return{h:c,s:h,v:u}}function Ii(s,e,t){if(arguments.length==1)var{r:s,g:e,b:t}=arguments[0];s/=255,e/=255,t/=255;var r=Math.max(s,e,t),i=Math.min(s,e,t),a,n,o=(r+i)/2;if(r==i)a=n=0;else{var l=r-i;switch(n=o>.5?l/(2-r-i):l/(r+i),r){case s:a=(e-t)/l+(e1&&(t-=1),t<1/6?s+(e-s)*6*t:t<1/2?e:t<2/3?s+(e-s)*(2/3-t)*6:s}function aS(s,e,t){if(arguments.length==1)var{h:s,s:e,l:t}=arguments[0];const r=yo(s,e,t);return Wl(r.r,r.g,r.b)}function yo(s,e,t){if(arguments.length==1)var{h:s,s:e,l:t}=arguments[0];var r,i,a;if(s/=360,e/=100,t/=100,e==0)r=i=a=t;else{var n=t<.5?t*(1+e):t+e-t*e,o=2*t-n;r=ul(o,n,s+1/3),i=ul(o,n,s),a=ul(o,n,s-1/3)}return{r:Ye(r*255),g:Ye(i*255),b:Ye(a*255)}}const nS=/(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_-]+))/gi;function ku(s,e="@"){return`${e}${s.startIndex}`.padEnd(10,"0")}function oS(s){return!!Tu(s).length}function Tu(s){const e=s.match(nS);let t=[];if(!e)return t;for(var r=0,i=e.length;r-1||e[r].indexOf("rgb")>-1||e[r].indexOf("hsl")>-1)t.push({color:e[r]});else{var a=vo.getColorByName(e[r]);a&&t.push({color:e[r],nameColor:a})}var n={next:0};return t.forEach(o=>{const l=s.indexOf(o.color,n.next);o.startIndex=l,o.endIndex=l+o.color.length,n.next=o.endIndex}),t}function nn(s,e="@"){const t=Tu(s);return t.forEach(r=>{s=s.replace(r.color,ku(r,e))}),{str:s,matches:t}}function Eo(s,e){return e.forEach(t=>{s=s.replace(ku(t),t.color)}),s}const lS=/^\s+|\s+$/g;function Ws(s){return s.replace(lS,"")}function ft(s){if(ct(s)){if(vo.isColorName(s)&&(s=vo.getColorByName(s)),s.indexOf("rgb(")>-1){for(var e=s.replace("rgb(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("rgba(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("hsl(","").replace(")","").split(","),t=0,r=e.length;t-1){for(var e=s.replace("hsla(","").replace(")","").split(","),t=0,r=e.length;t>16,l=(s&65280)>>8,c=(s&255)>>0;var i={type:"hex",r:o,g:l,b:c,a:1};return i=b(b({},i),Ii(i)),i}else if(0<=s&&s<=4294967295){const o=(s&4278190080)>>24,l=(s&16711680)>>16,c=(s&65280)>>8,h=(s&255)/255;var i={type:"hex",r:o,g:l,b:c,a:h};return i=b(b({},i),Ii(i)),i}}return s}const cS=()=>!0;function Xl(s,e=cS){var t=[];let r=s.layers.length;for(let i=r;i--;){let a=s.layers[i];t.push(...Xl(a.ref,e))}return e(s)&&t.push(s),t}class pc{constructor(e={}){return this.ref=new Proxy(this,{get:(t,r)=>{var i=t[r];return de(i)?(...a)=>i.apply(t,a):i||t.json[r]},set:(t,r,i)=>(t.json[r]!=i&&(t.json[r]=i,this.changed()),!0)}),e instanceof pc&&(e=e.toJSON()),this.json=this.convert(Object.assign(this.getDefaultObject(),e)),this.lastChangedField={},this.lastChangedFieldKeys=[],this.cachedValue={},this.ref}getDefaultTitle(){return"Item"}getIcon(){return""}isAttribute(){return!1}isChanged(e){return this.json.timestamp!=Number(e)}changed(){this.json.timestamp=this.json._timestamp+window.performance.now()}get title(){return this.json.name||this.getDefaultTitle()}renameWithCount(){let e=this.json.name.split(" ");if(e.length<2)return;let t=e.pop(),r=+t;ut(r)&&isNaN(r)===!1?r++:r=t;const i=[...e,r].join(" ");this.reset({name:i})}get allLayers(){return Xl(this.ref)}filteredAllLayers(e){return Xl(this.ref,e)}get id(){return this.json.id}get layers(){return this.json.layers}get parent(){return this.json.parent}setParent(e){this.json.parent=e}get depth(){return this.parent?this.parent.depth+1:1}get top(){if(!this.parent)return this.ref;let e=this.parent;do{if(!e.parent)return e;e=e.parent}while(e)}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){if(!this.parent)return[this.ref];const e=this.parent.path;return e.push(this.ref),e}getInnerId(e=""){return this.json.id+e}is(e){return this.json?e===this.json.itemType:!1}isNot(e){return this.is(e)===!1}isSVG(){return!1}addCache(e,t){this.cachedValue[e]=t}getCache(e){return this.cachedValue[e]}computed(e,t){const i=`${`__cachedKey_${e}`}__parseValue`,a=this.json[e];return this.getCache(e)===a&&this.getCache(i)?this.getCache(i):(this.addCache(e,a),this.addCache(i,t(a,this.ref)),this.getCache(i))}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e){return e.layers&&e.layers.forEach(t=>{t.parent=this.ref}),e}setCache(){}toCloneObject(e=!0){var t=this.attrs("itemType","name","elementType","type","visible","lock","selected");return e&&(t.layers=this.json.layers.map(r=>r.clone(e))),t}clone(e=!0){var t=this.constructor,r=new t(this.toCloneObject(e));return r.setParent(this.json.parent),r}reset(e){return e.__changedId||(e.__changedId=Ls()),this.lastChangedField.__changedId!==e.__changedId&&(this.json=this.convert(Object.assign(this.json,e)),this.lastChangedField=e,this.lastChangedFieldKeys=Object.keys(e),this.changed()),!0}hasChangedField(...e){return e.some(t=>this.lastChangedFieldKeys.includes(t))}getDefaultObject(e={}){var t=dr();return b({id:t,_timestamp:Date.now(),_time:window.performance.now(),visible:!0,lock:!1,selected:!1,layers:[]},e)}attrs(...e){const t={};return e.forEach(r=>{t[r]=ye(this.json[r])}),t}hasChildren(){return this.layers.length>0}appendChild(e){return e.parent===this.ref||(this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.push(e),this.project.addIndexItem(e)),e}prependChildItem(e){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.unshift(e),this.project.addIndexItem(e),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.splice(t,0,e),this.project.addIndexItem(e),e}insertAfter(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t),this.project.addIndexItem(e),e}insertBefore(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t-1),this.project.addIndexItem(e),e}setPositionInPlace(e,t){this.layers.splice(e,0,t)}toggle(e,t){wt(t)?this.json[e]=!this.json[e]:this.json[e]=!!t}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!(e==="parent"||wt(this.json[e]))}toJSON(){const e=this.json;let t={};return Object.keys(e).filter(r=>this.expectJSON(r)).forEach(r=>{t[r]=e[r]}),t}resize(){}copy(e=0){return this.json.parent.copyItem(this.ref,e)}findIndex(e){return this.json.layers.indexOf(e.ref)}copyItem(e,t=10){var r=e.clone();r.renameWithCount(),r.move([t,t,0]);var i=this.findIndex(e);return i>-1&&(this.json.layers.push(r),this.project.addIndexItem(r)),r}remove(){this.json.parent.removeChild(this.ref),this.project.removeIndexItem(this.ref)}removeChild(e){const t=this.findIndex(e);t>-1&&this.json.layers.splice(t,1)}hasParent(e){var t=this.json.parent.id===e;return!t&&this.json.parent.is("project")===!1?this.json.parent.hasParent(e):t}}const hS=1e3,$a=new Map;class pl{static has(e){return $a.has(e)}static get(e){return $a.get(e)}static set(e,t){$a.size>hS&&$a.clear(),$a.set(e,t)}}class Sr{static parseStyle(e="50% 50% 0px"){if(pl.has(e))return pl.get(e);const t=e.trim().split(" ").filter(i=>i.trim());let r=null;return t.length===1?r=[t[0],t[0]].map(i=>p.parse(i)):r=t.map(i=>p.parse(i)),pl.set(e,r),r}static scale(e,t,r){let i=Sr.parseStyle(e);if(t===0&&r===0)return[0,0,0];const a=i[0].toPx(t).value,n=i[1].toPx(r).value,o=i[2].value;return[a,n,o]}static toPx(e,t,r,i=0){let[a,n,o]=Sr.parseStyle(e);return a=a.toPx(t),n=n.toPx(r),o=o.toPx(i),`${a} ${n} ${o}`}}function dS(s,e,t,r,i,a,n,o){return s+t>=i&&s<=i+n&&e+r>=a&&e<=a+o}class Mu{constructor(e,t,r,i){this.x=e,this.y=t,this.width=r,this.height=i}get left(){return this.x}get right(){return this.x+this.width}get top(){return this.y}get bottom(){return this.y+this.height}get centerX(){return this.x+this.width/2}get centerY(){return this.y+this.height/2}get center(){return[this.centerX,this.centerY]}get topLeft(){return[this.left,this.top]}get topRight(){return[this.right,this.top]}get bottomLeft(){return[this.left,this.bottom]}get bottomRight(){return[this.right,this.bottom]}get vertices(){return[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight]}intersect(e){return gc(this,e)}}function gc(s,e){const t=Math.min(s.x,e.x),r=Math.min(s.y,e.y),i=mt(s.x-t,s.y-r,s.width,s.height),a=mt(e.x-t,e.y-r,e.width,e.height),n=[Math.max(i[0][0],a[0][0]),Math.max(i[0][1],a[0][1]),Math.max(i[0][2],a[0][2])],o=[Math.min(i[2][0],a[2][0]),Math.min(i[2][1],a[2][1]),Math.min(i[2][2],a[2][2])],l=Math.min(n[0],o[0]),c=Math.min(n[1],o[1]),h=Math.max(n[0],o[0]),u=Math.max(n[1],o[1]);return new Mu(l+t,c+r,h-l,u-c)}function Ia(s,e,t,r,i,a,n=.1){const o=Math.hypot(i-s,a-e),l=Math.hypot(i-t,a-r),c=Math.hypot(s-t,e-r),h=o+l;return h>=c-n&&h<=c+n}function Iu(s,e,t,r,i,a,n,o){let l=((n-i)*(e-a)-(o-a)*(s-i))/((o-a)*(t-s)-(n-i)*(r-e)),c=((t-s)*(e-a)-(r-e)*(s-i))/((o-a)*(t-s)-(n-i)*(r-e));return 0<=l&&l<=1&&0<=c&&c<=1}function uS(s,e,t,r,i,a,n,o,l=.1){return Ia(s,e,t,r,i,a)||Ia(s,e,t,r,n,o)?!0:Ia(i,a,n,o,s,e)?[s,e]:Ia(i,a,n,o,t,r)?[t,r]:Iu(s,e,t,r,i,a,n,o)}function ps(s=[],e,t,r=!1){let i=!1;const a=s.length;if(r===!1)for(let n=0;n{const[l,c]=n,[h,u]=s[(o+1)%a];(c>=t&&u=t)&&e<(h-l)*(t-c)/(u-c)+l&&(i=!i)}),i)}function pS(s=[],e,t,r,i,a=!1){const n=s.length;return s.some((o,l)=>{const[c,h]=o,[u,d]=s[(l+1)%n];return a?Iu(e,t,r,i,c,h,u,d):uS(e,t,r,i,c,h,u,d)})}function fc(s=[],e=[],t=!1){const r=s.length;return s.some((i,a)=>{const[n,o]=i,[l,c]=s[(a+1)%r];let h=pS(e,n,o,l,c,t);return!!(h||(h=ps(s,e[0][0],e[0][1],t),h))})}function mt(s,e,t,r,i="50% 50% 0px"){const a=Sr.scale(i,t,r);return[[s,e,0],[s+t,e,0],[s+t,e+r,0],[s,e+r,0],[s+a[0],e+a[1],0]]}function lo(s,e=0){const t=te([],s[0],s[1],.5),r=te([],s[2],s[3],.5);return u_(r,t,e)}function gS(s,e,t,r){return mt(s,e,t,r)}function Ra(s=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{o.originVerties.forEach(l=>{a.push(l[0]),n.push(l[1])})}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),mt(e,t,r-e,i-t)}function fS(s=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{o.targetVerties.forEach(l=>{a.push(l[0]),n.push(l[1])})}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),mt(e,t,r-e,i-t)}function Et(s){const e=s[0][0],t=s[0][1],r=se(s[0],s[1]),i=se(s[0],s[3]);return new Mu(e,t,r,i)}function Mi(s=[]){const e=[];for(var t=0;tt<4)}function kr(s){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;const a=[],n=[];return s.forEach(o=>{a.push(o[0]),n.push(o[1])}),e=Math.min.apply(Math,a),r=Math.max.apply(Math,a),t=Math.min.apply(Math,n),i=Math.max.apply(Math,n),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),r===Number.MIN_SAFE_INTEGER&&(r=0),i===Number.MIN_SAFE_INTEGER&&(i=0),mt(e,t,r-e,i-t)}const mS={linear:!0,ease:!0,"ease-in":!0,"ease-out":!0,"ease-in-out":!0},vS={ease:"cubic-bezier(0.25, 0.1, 0.25, 1)","ease-in":"cubic-bezier(0.42, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.58, 1)"},Ei=[[0,0,1,1,"linear",!0],[.25,.1,.25,1,"ease",!0],[.42,0,1,1,"ease-in",!0],[0,0,.58,1,"ease-out",!0],[.47,0,.745,.715,"ease-in-sine"],[.39,.575,.565,1,"ease-out-sine"],[.445,.05,.55,.95,"ease-in-out-sine"],[.55,.085,.68,.53,"ease-in-quad"],[.25,.46,.45,.94,"ease-out-quad"],[.455,.03,.515,.955,"ease-in-out-quad"],[.55,.055,.675,.19,"ease-in-cubic"],[.215,.61,.355,1,"ease-out-cubic"],[.645,.045,.355,1,"ease-in-out-cubic"],[.895,.03,.685,.22,"ease-in-quart"],[.165,.84,.44,1,"ease-out-quart"],[.77,0,.175,1,"ease-in-out-quart"],[.6,.04,.98,.335,"ease-in-circ"],[.075,.82,.165,1,"ease-out-circ"],[.785,.135,.15,.86,"ease-in-out-circ"],[.95,.05,.795,.035,"ease-in-expo"],[.19,1,.22,1,"ease-out-expo"],[1,0,0,1,"ease-in-out-expo"],[.755,.05,.855,.06,"ease-in-quint"],[.23,1,.32,1,"ease-out-quint"],[.86,0,.07,1,"ease-in-out-quint"],[.6,-.28,.735,.045,"ease-in-back"],[.175,.885,.32,1.275,"ease-out-back"],[.68,-.55,.265,1.55,"ease-in-out-back"]],cs=s=>[...Lu(vS[s]||s)],Oh=s=>{s=s.map(i=>Math.floor(i*100)/100);for(var e=0,t=Ei.length;ea<4).join(",")} )`};function Lu(s){if(typeof s=="string"){if(mS[s])return Ei.filter(t=>t[4]===s)[0];var e=s.replace("cubic-bezier","").replace("(","").replace(")","").split(",");return e=e.map(t=>parseFloat(t.trim())),e}return s}const Lo=(s,e,t,r)=>{var i=[s,e,t,r];return function(a){return Vo(i,a)}},Vu=(s,e,t)=>{var r=[s,e,t];return function(i){return Ru(r,i)}},Ou=(s,e)=>{var t=[s,e];return function(r){return bS(t,r)}},gl=(s,e,t,r,i)=>{var a=e(t),n=rr(r,i,a.x,a.y);n{let e=0;return s.forEach((t,r)=>{var i=s[r+1];if(!!i){var a=se(Te(t.x,t.y,0),Te(i.x,i.y,0));e+=a}}),e},za=(s,e,t,r,i,a,n,o,l=1e3)=>{for(var c=Lo({x:s,y:e},{x:t,y:r},{x:i,y:a},{x:n,y:o}),h=0,u=c(0),d=0;d<=l;d++){var v=d/l,g=c(v);h+=rr(u.x,u.y,g.x,g.y),u=g}return h},Ys=(s,e,t,r,i,a,n=1e3)=>{for(var o=Vu({x:s,y:e},{x:t,y:r},{x:i,y:a}),l=0,c=o(0),h=0;h<=n;h++){var u=h/n,d=o(u);l+=rr(c.x,c.y,d.x,d.y),c=d}return l},mc=(s,e=10)=>{var t={minDist:1/0,minT:0};return function(r,i){for(var a=0;a<=e;a++)gl(t,s,a/e,r,i);for(var n=1/(e*2),o=t.minT,a=0;amc(Lo(s,e,t,r),i),yc=(s,e,t,r=20)=>mc(Vu(s,e,t),r),bc=(s,e,t=20)=>mc(Ou(s,e),t),ju=s=>{if(s==="linear"){var t={x:0,y:0},r={x:1,y:1};return Ou(t,r)}var e=Lu(s),t={x:0,y:0},r={x:e[0],y:e[1]},i={x:e[2],y:e[3]},a={x:1,y:1};return Lo(t,r,i,a)},zt=(s,e,t)=>({x:s.x+(e.x-s.x)*t,y:s.y+(e.y-s.y)*t}),Vo=(s,e)=>{var t=zt(s[0],s[1],e),r=zt(s[1],s[2],e),i=zt(s[2],s[3],e),a=zt(t,r,e),n=zt(r,i,e);return zt(a,n,e)},Ru=(s,e)=>{var t=zt(s[0],s[1],e),r=zt(s[1],s[2],e);return zt(t,r,e)},bS=(s,e)=>zt(s[0],s[1],e),Aa=(s,e)=>{var t=zt(s[0],s[1],e),r=zt(s[1],s[2],e),i=zt(s[2],s[3],e),a=zt(t,r,e),n=zt(r,i,e),o=zt(a,n,e);return{first:[s[0],t,a,o],second:[o,n,i,s[3]]}},Da=(s,e)=>{var t=zt(s[0],s[1],e),r=zt(s[1],s[2],e),i=zt(t,r,e);return{first:[s[0],t,i],second:[i,r,s[2]]}},xS=(s,e=1)=>{for(var t=[];e>0;){const r=Aa(s,1/e);t.push(r.first),s=r.second,e--}return t},$S=(s,e=1)=>{for(var t=[];e>0;){const r=Da(s,1/e);t.push(r.first),s=r.second,e--}return t},_S=(s,e=1)=>{var t=[];const r=1/e;for(;e>0;){const i=Fa(s,r);t.push(i.first),s=i.second,e--}return t},Fa=(s,e)=>{var t=zt(s[0],s[1],e);return{first:[s[0],t],second:[t,s[1]]}},SS=s=>[Wt(s[0]),[s[0][0]+(s[1][0]-s[0][0])*.33,s[0][1]+(s[1][1]-s[0][1])*.33,0],[s[0][0]+(s[1][0]-s[0][0])*.66,s[0][1]+(s[1][1]-s[0][1])*.66,0],Wt(s[1])],fl=s=>{const e=.6666666666666666;return[Wt(s[0]),Te(s[0][0]+e*(s[1][0]-s[0][0]),s[0][1]+e*(s[1][1]-s[0][1]),0),Te(s[2][0]+e*(s[1][0]-s[2][0]),s[2][1]+e*(s[1][1]-s[2][1]),0),Wt(s[2])]},jh=(s,e,t,r,i=1e3)=>{const a=za(s[0],s[1],e[0],e[1],t[0],t[1],r[0],r[1],i);let n=10,o=a/n,l=0,c=[];const h=[s,e,t,r].map(u=>({x:u[0],y:u[1]}));do{c=[];let u=0;for(let d=0;d<=n;d++){const v=Vo(h,u/a);c.push(v),u+=o}l=yS(c),n+=n*(a-l)/a,o=a/n}while(a-l>.25);return c.map(u=>Te(u.x,u.y,0))},PS=s=>{const e=qt([],s[0]),t=Ui([],[3,3,3],s[1]),r=Ui([],[-3,-3,-3],s[2]),i=s[3],a=Pe([],Pe([],e,t),Pe([],r,i));return Ui([],[3,3,3],a)},wS=s=>{const e=s[0],t=Ui([],[-2,-2,-2],s[1]),r=s[2],i=Pe([],Pe([],e,t),r);return Ui([],[6,6,6],i)},CS=s=>{const e=Pe([],s[1],qt([],s[0]));return Ui([],[3,3,3],e)},kS=s=>{const e=PS(s),t=wS(s),r=CS(s),i=[],a=t[0]*t[0]-4*e[0]*r[0];if(!(a<0)){if(a===0){let o=-t[0]/(2*e[0]);isNaN(o)&&(o=0),0<=o&&o<=1&&i.push(o)}else if(a>0){const o=(-t[0]+Math.sqrt(a))/(2*e[0]),l=(-t[0]-Math.sqrt(a))/(2*e[0]);0<=o&&o<=1&&i.push(o),0<=l&&l<=1&&i.push(l)}}const n=t[1]*t[1]-4*e[1]*r[1];if(!(n<0)){if(n===0){let o=-t[1]/(2*e[1]);isNaN(o)&&(o=0),0<=o&&o<=1&&i.push(o)}else if(n>0){const o=(-t[1]+Math.sqrt(n))/(2*e[1]),l=(-t[1]-Math.sqrt(n))/(2*e[1]);0<=o&&o<=1&&i.push(o),0<=l&&l<=1&&i.push(l)}}return i},Rh=s=>{const e=kS(s),t=s.map(r=>({x:r[0],y:r[1]}));return e.push(0,1),e.map(r=>{const{x:i,y:a}=Vo(t,r);return[i,a,0]})};function Vs(s,e,t="rgba(0, 0, 0, 0)"){return Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),e=="hex"?MS(s):e=="rgb"?zu(s,t):e=="hsl"?IS(s):s}function TS(s,e,t="rgba(0, 0, 0, 0)"){const r=ye(s);return r.a=1,Vs(r,e,t)}function MS(s){Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]});var e=s.r.toString(16);s.r<16&&(e="0"+e);var t=s.g.toString(16);s.g<16&&(t="0"+t);var r=s.b.toString(16);if(s.b<16&&(r="0"+r),s.a==1||typeof s.a=="undefined")return`#${e}${t}${r}`;{const a=Math.ceil(s.a*255);var i=a.toString(16);return a<16&&(i="0"+i),`#${e}${t}${r}${i}`}}function zu(s,e="rgba(0, 0, 0, 0)"){if(Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),typeof s!="undefined")return s.a==1||typeof s.a=="undefined"?isNaN(s.r)?e:`rgb(${s.r},${s.g},${s.b})`:`rgba(${s.r},${s.g},${s.b},${s.a})`}function IS(s){return Array.isArray(s)&&(s={r:s[0],g:s[1],b:s[2],a:s[3]}),s.a==1||typeof s.a=="undefined"?`hsl(${s.h},${s.s}%,${s.l}%)`:`hsla(${s.h},${s.s}%,${s.l}%,${s.a})`}function xi(s,e){return Math.floor(Math.random()*(e-s+1))+s}function ES(s=1){let e=[];for(var t=0;tke(t[r])).map(r=>`${r}: ${t[r]}`).join(";"+e)}function vr(s="",e=";",t=":"){s=s+"";var r={};return s===""||s.split(e).forEach(i=>{var[a,...n]=i.split(t).map(o=>o.trim());a!=""&&(r[a]=n.join(t))}),r}function pt(s){return Object.keys(s||{}).map(t=>t==="class"&&ti(s[t])?`${t}="${Ur(s[t])}"`:t==="style"&&ti(s[t])?`${t}="${Ze(s[t])}"`:yi(s[t])||wt(s[t])||s[t]==="undefined"?s[t]?t:"":`${t}="${s[t]}"`).join(" ")}function zh(s){return s.replace(//g,">")}function Yn(s,e,t=""){return s.map(e).join(t)}function $c(s,e){const t=new Set([...s,...e]);return t.size===s.length&&t.size===e.length}const hs=(s,e=30,t=30)=>{const r=cs(s);return` + M0 ${e} + C + ${r[0]*e} ${r[1]==0?t:(1-r[1])*t}, + ${r[2]*e} ${r[3]==1?0:(1-r[3])*t}, + ${e} 0 + `},_a=(s,e=30,t=30)=>{const r=cs(s);return` + M 0 ${e} + L ${r[0]*e} ${r[1]==0?t:(1-r[1])*t} + M ${e} 0 + L ${r[2]*e} ${r[3]==1?0:(1-r[3])*t} + `},LS=s=>s,VS=(s,e=LS)=>{const t=ye(s);return Object.keys(t).forEach(r=>{t[r]=e(t[r])}),t},OS=s=>VS(s,Math.floor);class sr extends pc{getDefaultObject(e={}){return b({selected:!1,layers:[]},e)}isAttribute(){return!0}toCSS(){return{}}toString(){return Ze(this.toCSS())}}class Pr extends sr{static parse(e){return new Pr(e)}static parseStyle(e){var t=[];if(e=e.trim(),!e)return t;var r=nn(e);return t=r.str.split(",").filter(i=>i.trim()).map(i=>{var a=i.trim().split(" "),n=a.filter(c=>c===Ar.INSET),o=a.filter(c=>c.includes("@")).map(c=>Eo(c,r.matches)),l=a.filter(c=>c!==Ar.INSET&&!c.includes("@"));return Pr.parse({inset:n.length?Ar.INSET:Ar.OUTSET,color:o[0]||"rgba(0, 0, 0, 1)",offsetX:p.parse(l[0]||"0px"),offsetY:p.parse(l[1]||"0px"),blurRadius:p.parse(l[2]||"0px"),spreadRadius:p.parse(l[3]||"0px")})}),t}static join(e){return e.map(t=>Pr.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"box-shadow",inset:!1,offsetX:0,offsetY:0,blurRadius:0,spreadRadius:0,color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("inset","offsetX","offsetY","blurRadius","spreadRadius","color"))}convert(e){return e=super.convert(e),ut(e.offsetX)?e.offsetX=p.px(e.offsetX):e.offsetX&&(e.offsetX=p.parse(e.offsetX)),ut(e.offsetY)?e.offsetY=p.px(e.offsetY):e.offsetY&&(e.offsetY=p.parse(e.offsetY)),ut(e.blurRadius)?e.blurRadius=p.px(e.blurRadius):e.blurRadius&&(e.blurRadius=p.parse(e.blurRadius)),ut(e.spreadRadius)?e.spreadRadius=p.px(e.spreadRadius):e.spreadRadius&&(e.spreadRadius=p.parse(e.spreadRadius)),e}toCSS(){return{"box-shadow":this.toString()}}toString(){var e=this.json;return`${e.inset===Ar.INSET?"inset ":""}${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.spreadRadius} ${e.color}`}}class jS extends X{initState(){return{boxShadows:Pr.parseStyle(this.props.value||"")}}template(){return` +
        +
        +
        + `}[G("$shadowList")+Ee](){var e=this.state.boxShadows.map((t,r)=>` +
        + +
        + ${O("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:r,onchange:"changeKeyValue"})} + ${O("ToggleButton",{mini:!0,key:"inset",value:t.inset,params:r,onChange:"changeKeyValue",checkedValue:Ar.INSET,toggleLabels:[R("border_style"),R("border_style")],toggleTitles:[Ar.INSET,Ar.INSET],toggleValues:[Ar.OUTSET,Ar.INSET]})} + + ${O("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,label:"S",key:"spreadRadius",value:t.spreadRadius,params:r,onchange:"changeKeyValue"})} +
        +
        + +
        +
        + `);return e.join("")}modifyBoxShadow(){var e=this.state.boxShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e=""){if(e)this.state.boxShadows=Pr.parseStyle(e);else{const t=new Pr({color:"black",inset:Ar.OUTSET,offsetX:2,offsetY:2,blurRadius:3,spreadRadius:1});this.state.boxShadows.push(t)}this.refresh(),this.modifyBoxShadow()}[z("$add")](){this.trigger("add")}[yr("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$shadowList .shadow-item")+Le](){}sortItem(e,t,r){e.splice(r+(t({color:s}));var zS={title:"material amber",key:"material-amber",execute:function(){return RS}},AS=Object.freeze(Object.defineProperty({__proto__:null,default:zS},Symbol.toStringTag,{value:"Module"}));const DS=["#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#2196f3","#82b1ff","#448aff","#2979ff","#2962ff"].map(s=>({color:s}));var FS={title:"material blue",key:"material-blue",execute:function(){return DS}},BS=Object.freeze(Object.defineProperty({__proto__:null,default:FS},Symbol.toStringTag,{value:"Module"}));const NS=["#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"].map(s=>({color:s}));var GS={title:"material bluegray",key:"material-bluegray",execute:function(){return NS}},HS=Object.freeze(Object.defineProperty({__proto__:null,default:GS},Symbol.toStringTag,{value:"Module"}));const US=["#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"].map(s=>({color:s}));var WS={title:"material brown",key:"material-brown",execute:function(){return US}},XS=Object.freeze(Object.defineProperty({__proto__:null,default:WS},Symbol.toStringTag,{value:"Module"}));const YS=["#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#00bcd4","#84ffff","#18ffff","#00e5ff","#00b8d4"].map(s=>({color:s}));var KS={title:"material cyan",key:"material-cyan",execute:function(){return YS}},ZS=Object.freeze(Object.defineProperty({__proto__:null,default:KS},Symbol.toStringTag,{value:"Module"}));const qS=["#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"].map(s=>({color:s}));var QS={title:"material deep orange",key:"material-deeporange",execute:function(){return qS}},JS=Object.freeze(Object.defineProperty({__proto__:null,default:QS},Symbol.toStringTag,{value:"Module"}));const eP=["#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#673ab7","#b388ff","#7c4dff","#651fff","#6200ea"].map(s=>({color:s}));var tP={title:"material deep purple",key:"material-deeppurple",execute:function(){return eP}},rP=Object.freeze(Object.defineProperty({__proto__:null,default:tP},Symbol.toStringTag,{value:"Module"}));const iP=["#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"].map(s=>({color:s}));var sP={title:"material gray",key:"material-gray",execute:function(){return iP}},aP=Object.freeze(Object.defineProperty({__proto__:null,default:sP},Symbol.toStringTag,{value:"Module"}));const nP=["#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"].map(s=>({color:s}));var oP={title:"material green",key:"material-green",execute:function(){return nP}},lP=Object.freeze(Object.defineProperty({__proto__:null,default:oP},Symbol.toStringTag,{value:"Module"}));const cP=["#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#3f51b5","#8c9eff","#536dfe","#3d5afe","#304ffe"].map(s=>({color:s}));var hP={title:"material indigo",key:"material-indigo",execute:function(){return cP}},dP=Object.freeze(Object.defineProperty({__proto__:null,default:hP},Symbol.toStringTag,{value:"Module"}));const uP=["#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#03a9f4","#80d8ff","#40c4ff","#00b0ff","#0091ea"].map(s=>({color:s}));var pP={title:"material light blue",key:"material-lightblue",execute:function(){return uP}},gP=Object.freeze(Object.defineProperty({__proto__:null,default:pP},Symbol.toStringTag,{value:"Module"}));const fP=["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"].map(s=>({color:s}));var mP={title:"material lightgreen",key:"material-lightgreen",execute:function(){return fP}},vP=Object.freeze(Object.defineProperty({__proto__:null,default:mP},Symbol.toStringTag,{value:"Module"}));const yP=["#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"].map(s=>({color:s}));var bP={title:"material lime",key:"material-lime",execute:function(){return yP}},xP=Object.freeze(Object.defineProperty({__proto__:null,default:bP},Symbol.toStringTag,{value:"Module"}));const $P=["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"].map(s=>({color:s}));var _P={title:"material orange",key:"material-orange",execute:function(){return $P}},SP=Object.freeze(Object.defineProperty({__proto__:null,default:_P},Symbol.toStringTag,{value:"Module"}));const PP=["#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#e91e63","#ff80ab","#ff4081","#f50057","#c51162"].map(s=>({color:s}));var wP={title:"material pink",key:"material-pink",execute:function(){return PP}},CP=Object.freeze(Object.defineProperty({__proto__:null,default:wP},Symbol.toStringTag,{value:"Module"}));const kP=["#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#9c27b0","#ea80fc","#e040fb","#d500f9","#aa00ff"].map(s=>({color:s}));var TP={title:"material purple",key:"material-purple",execute:function(){return kP}},MP=Object.freeze(Object.defineProperty({__proto__:null,default:TP},Symbol.toStringTag,{value:"Module"}));const IP=["#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#f44336","#ff8a80","#ff5252","#ff1744","#d50000"].map(s=>({color:s}));var EP={title:"material red",key:"material-red",execute:function(){return IP}},LP=Object.freeze(Object.defineProperty({__proto__:null,default:EP},Symbol.toStringTag,{value:"Module"}));const VP=["#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#009688","#a7ffeb","#64ffda","#1de9b6","#00bfa5"].map(s=>({color:s}));var OP={title:"material teal",key:"material-teal",execute:function(){return VP}},jP=Object.freeze(Object.defineProperty({__proto__:null,default:OP},Symbol.toStringTag,{value:"Module"}));const RP=["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"].map(s=>({color:s}));var zP={title:"material yellow",key:"material-yellow",execute:function(){return RP}},AP=Object.freeze(Object.defineProperty({__proto__:null,default:zP},Symbol.toStringTag,{value:"Module"}));const DP=["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"].map(s=>({color:s}));var FP={title:"opencolor gray",resource:"https://yeun.github.io/open-color/",key:"opencolor-gray",execute:function(){return DP}},BP=Object.freeze(Object.defineProperty({__proto__:null,default:FP},Symbol.toStringTag,{value:"Module"}));function Au(s,e,t){if(arguments.length==1)var{h:s,s:e,v:t}=arguments[0];var r=s,i=e,a=t;r>=360&&(r=0);const n=i*a,o=n*(1-Math.abs(r/60%2-1)),l=a-n;let c=[];return 0<=r&&r<60?c=[n,o,0]:60<=r&&r<120?c=[o,n,0]:120<=r&&r<180?c=[0,n,o]:180<=r&&r<240?c=[0,o,n]:240<=r&&r<300?c=[o,0,n]:300<=r&&r<360&&(c=[n,0,o]),{r:Ye((c[0]+l)*255),g:Ye((c[1]+l)*255),b:Ye((c[2]+l)*255)}}function NP(s,e,t){if(arguments.length==1)var{h:s,s:e,v:t}=arguments[0];const r=Au(s,e,t);return Ii(r.r,r.g,r.b)}function Du(s,e,t=.5,r="hex"){var i=GP(s,e,t);return Vs(i,r)}function GP(s,e,t=.5){const r=typeof s.a=="undefined"?1:s.a,i=typeof e.a=="undefined"?1:e.a;return{r:Ye(s.r+(e.r-s.r)*t),g:Ye(s.g+(e.g-s.g)*t),b:Ye(s.b+(e.b-s.b)*t),a:Ye(r+(i-r)*t,100)}}function HP(s,e,t=.5,r="hex"){var i=ft(s),a=ft(e);return Du(i,a,t,r)}function Xs(s,e,t=.5,r="hex"){return HP(s,e,t,r)}const ds=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];function UP(s){for(var e,t,r=0;r=s){e=ds[r-1],t=ds[r];break}return e&&t?Xs(e,t,(s-e.start)/(t.start-e.start)):ds[0].rgb}function WP(){for(var s=0,e=ds.length;s({color:t}));return e.sort((t,r)=>{const i=ft(t.color),a=ft(r.color);return i.h>a.h?1:-1}),e}},YP=Object.freeze(Object.defineProperty({__proto__:null,default:XP},Symbol.toStringTag,{value:"Module"}));const KP={"./colors_list/material-amber.js":AS,"./colors_list/material-blue.js":BS,"./colors_list/material-bluegray.js":HS,"./colors_list/material-brown.js":XS,"./colors_list/material-cyan.js":ZS,"./colors_list/material-deeporange.js":JS,"./colors_list/material-deeppurple.js":rP,"./colors_list/material-gray.js":aP,"./colors_list/material-green.js":lP,"./colors_list/material-indigo.js":dP,"./colors_list/material-lightblue.js":gP,"./colors_list/material-lightgreen.js":vP,"./colors_list/material-lime.js":xP,"./colors_list/material-orange.js":SP,"./colors_list/material-pink.js":CP,"./colors_list/material-purple.js":MP,"./colors_list/material-red.js":LP,"./colors_list/material-teal.js":jP,"./colors_list/material-yellow.js":AP,"./colors_list/opencolor-gray.js":BP,"./colors_list/random.js":YP};var ZP=Object.values(KP).map(s=>s.default);class qP extends X{initState(){return{mode:"grid",preset:"random",isLoaded:!1,colors:ZP}}getTools(){return'
        '}[G("$tools")](){const e=this.state.colors.map(t=>({value:t.key,text:t.title}));return O("SelectEditor",{key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[M("changePreset")](e,t){this.setState({[e]:t})}template(){return` +
        +
        +
        ${this.getTools()}
        +
        +
        +
        + `}[z("$title")](){this.$el.toggleClass("is-open")}[G("$colorList")](){var e=this.state.colors.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>`
        `);return t}executeColor(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshColorAssets")):window.alert("Please select a project.")}[z("$colorList .preview")](e){const t=e.$dt.$(".color-view").css("background-color");this.modifyColorPicker(t)}modifyColorPicker(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.props.params)}}class QP extends X{initState(){return{params:this.props.params,color:this.props.color||"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyColor()}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.color,this.state.params)}changeColor(e){this.setState({color:e})}setValue(e){this.changeColor(e)}[ae("$miniView")](){return{style:{"background-color":this.state.color}}}template(){return` +
        +
        +
        +
        +
        +
        +
        + `}[z("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.refs.$miniView.cssText(`background-color: ${e}`),this.updateData({color:e})},color:this.state.color})}}class JP extends X{initState(){const e=this.props.value||"rgba(0, 0, 0, 1)",t=yi(this.props.compact)?this.props.compact:this.props.compact==="true",r=yi(this.props.mini)?this.props.mini:this.props.mini==="true";return{label:this.props.label,value:e,compact:t,mini:r,color:ft(e),colorFocus:!1,opacityFocus:!1}}updateData(e={}){this.setState(e),this.modifyColor()}updateEndData(e={}){this.setState(e),this.modifyEndColor()}getValue(){return this.state.value}setValue(e){this.changeColor(e)}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}modifyEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}changeColor(e){this.setState({value:e,color:ft(e)})}get alpha(){return this.state.color.a*100}get hexColor(){return TS(this.state.color,"hex")}get fullColor(){return Vs(this.state.color,this.state.color.type)}refresh(){this.refreshColorView(),this.refs.$colorCode.val(this.state.value),this.refs.$opacityCode.val(this.alpha)}refreshColorView(){this.bindData("$miniView1"),this.bindData("$miniView2")}template(){var{label:e}=this.state;return` +
        + ${e?``:""} +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        + +
        +
        +
        + `}[ae("$el")](){var{label:e,compact:t,mini:r,colorFocus:i,opacityFocus:a}=this.state;return{class:["elf--color-view-editor",{"has-label":e,compact:t,mini:r},{focused:i||a}]}}[ae("$miniView1")](){return{style:{"background-color":this.hexColor}}}[ae("$miniView2")](){return{style:{"background-color":this.fullColor}}}[ae("$colorCode")](){return{value:this.props.format?this.hexColor:this.state.value}}[ae("$opacityCode")](){return{value:this.alpha}}[po("$colorCode")](){this.setState({colorFocus:!0}),this.refs.$colorCode.select()}[Ms("$colorCode")](){this.setState({colorFocus:!1})}[po("$opacityCode")](){this.setState({opacityFocus:!0}),this.refs.$opacityCode.select()}[Ms("$opacityCode")](){this.setState({opacityFocus:!1})}[z("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.updateData({value:e,color:ft(e)})},changeEndEvent:e=>{this.updateEndData({value:e,color:ft(e)})},color:this.state.value},null,this.$el.rect())}[z("$remove")](){this.updateData({value:""})}[ot("$el .color-input input")](e){var t=e.$dt.value;this.updateData({value:t,color:ft(t)}),this.refreshColorView()}[ot("$el .opacity-input input")](e){var t=+e.$dt.value;t=Math.max(0,Math.min(100,t));const r=ft(this.state.value);r.a=Ye(t/100,1e3);const i=Vs(r,r.type);this.updateData({value:i,color:r}),this.refreshColorView()}}class ew extends X{initState(){return{inspector:this.props.inspector}}template(){return` +
        + `}getPropertyEditor(e,t){return t.type==="folder"?` +
        + +
          + ${t.children.map((r,i)=>`
        • ${this.getPropertyEditor(`${e}${i}`,r)}
          • `).join("")} +
        +
        + `:t.type==="column"?` +
        + ${t.columns.map((i,a)=>i==="-"?'
        ':i.type==="label"?`
        + +
        `:` +
        + ${this.getPropertyEditor(`${e}${a}`,i)} +
        + `).join("")} +
        + `:O(t.editor,ie(b({},t.editorOptions),{onchange:(r,i)=>{const a=de(t.convert)?t.convert(r,i):i;this.trigger("changeComponentValue",r,a)},ref:`${t.key}${e}`,key:t.key,value:t.defaultValue}))}[G("$body")](){var t=this.state.inspector.map((r,i)=>ct(r)||r.type==="label"?` +
        + +
        `:r.type==="folder"?` +
        + ${this.getPropertyEditor(i,r)} +
        + `:` +
        + ${this.getPropertyEditor(i,r)} +
        + `);return t}setInspector(e){this.setState({inspector:e})}setValue(e={}){Object.keys(e).forEach(t=>{const r=e[t];this.eachChildren(i=>{i.setValue&&i.props.key===t&&i.setValue(r)})})}getValue(){const e={};return this.eachChildren(t=>{de(t.getValue)&&t.props.key&&(e[t.props.key]=t.getValue())}),e}[K("changeComponentValue")](e,t){this.parent.trigger(this.props.onchange,e,t)}[z("$el .component-folder > label")](e){e.$dt.closest("component-folder").toggleClass("close")}}class tw extends X{initState(){return{hideTitle:this.props["hide-title"]==="true",hideRefresh:this.props["hide-refresh"]==="true",properties:[]}}updateData(e){this.setState(e,!1),this.modifyProperty()}modifyProperty(){this.parent.trigger(this.props.onchange,this.state.properties)}template(){const e=this.state.hideTitle?"hide-title":"",t=this.state.hideRefresh?"hide-refresh":"";return` +
        +
        + +
        + ${this.makePropertySelect()} + +
        +
        +
        +
        + `}getPropertyDefaultValue(e){switch(e){case"animation-timing-function":case"box-shadow":case"text-shadow":case"color":case"background-image":case"background-color":case"text-fill-color":case"text-stroke-color":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"playTime":return p.string("");case"offset-distance":return p.percent(0);case"rotate":return p.deg(0);case"mix-blend-mode":return"normal";case"clip-path":return"";case"opacity":return 1;default:return 0}}[z("$addProperty")](){var e=this.getRef("$propertySelect").value,t=this.state.properties.find(a=>a.key===e);if(t){window.alert(`${e} is already added.`);return}var r=this.getPropertyDefaultValue(e),i=this.$context.selection.current;i&&(r=i[e]),this.state.properties.push({key:e,value:r}),this.refresh(),this.modifyProperty()}makeIndivisualPropertyColorEditor(e,t){var r=e.key.split("-").join("");return` +
        + + + `}makeCustomePropertyEditor(e,t){return` +
        + ${O(e.editor,{onchange:"changeSelect",ref:`$customProperty${t}`,key:e.key,value:e.value})} +
        + `}makeIndivisualPropertyEditor(e,t){return e.key==="background-image"?` +
        + ${O("BackgroundImageEditor",{ref:`$backgroundImage${t}`,key:e.key,"hide-title":this.state.hideTitle,value:e.value,onchange:"changeKeyValue"})} +
        + `:e.key==="filter"?` +
        + + + `:e.key==="backdrop-filter"?` +
        + + + `:e.key==="box-shadow"?` +
        + + + `:e.key==="text-shadow"?` +
        + + + `:e.key==="var"?` +
        + + + `:e.key==="transform"?` +
        + + + `:e.key==="transform-origin"?` +
        + + + `:e.key==="perspective-origin"?` +
        + + + `:e.key==="fill-rule"?` +
        + + + `:e.key==="stroke-linecap"?` +
        + + + `:e.key==="stroke-linejoin"?` +
        + + + `:e.key==="mix-blend-mode"?` +
        + + + `:e.key==="stroke-dasharray"?` + + `:e.key==="border-radius"?` + + `:e.key==="border"?` + + `:e.key==="clip-path"?` + + `:e.key==="d"?` + + `:e.key==="points"?` + + `:e.key==="playTime"?` + + `:` +
        + ??? + +
        + `}[K("changeKeyValue")](e,t){this.modifyPropertyValue(e,t)}[K("changeBorderRadius")](e){this.modifyPropertyValue("border-radius",e)}[K("changeClipPath")](e){this.modifyPropertyValue("clip-path",e)}[K("changeColorProperty")](e,t){this.modifyPropertyValue(e,t)}[K("changeBackgroundImageProperty")](e,t){this.modifyPropertyValue(e,t)}[K("changeFilterProperty")](e){this.modifyPropertyValue("filter",e)}[K("changeBackdropFilterProperty")](e){this.modifyPropertyValue("backdrop-filter",e)}[K("changeBoxShadowProperty")](e){this.modifyPropertyValue("box-shadow",e)}[K("changeTextShadowProperty")](e){this.modifyPropertyValue("text-shadow",e)}[K("changeVar")](e){this.modifyPropertyValue("var",e)}[K("changeTransform")](e){this.modifyPropertyValue("transform",e)}[K("changeTransformOrigin")](e){this.modifyPropertyValue("transform-origin",e)}[K("changePerspectiveOrigin")](e){this.modifyPropertyValue("perspective-origin",e)}[K("changeSelect")](e,t){this.modifyPropertyValue(e,t)}makePropertyEditor(e,t){if(e.editor)return this.makeCustomePropertyEditor(e,t);switch(e.key){case"animation-timing-function":case"box-shadow":case"text-shadow":case"background-image":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"mix-blend-mode":case"border":case"border-radius":case"clip-path":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"stroke-dasharray":case"d":case"points":case"offset-path":case"playTime":return this.makeIndivisualPropertyEditor(e,t);case"color":case"background-color":case"text-fill-color":case"text-stroke-color":case"stroke":case"fill":return this.makeIndivisualPropertyColorEditor(e,t);case"opacity":case"fill-opacity":case"stroke-dashoffset":case"offset-distance":let r=0,i=1,a=.01;return` +
        + + + `;case"rotate":return` +
        + + + `;case"left":case"margin-top":case"margin-bottom":case"margin-left":case"margin-right":case"padding-top":case"padding-bottom":case"padding-left":case"padding-right":case"width":case"height":case"perspective":case"text-stroke-width":default:return` +
        + + + `}}[K("changeRangeEditor")](e,t){this.modifyPropertyValue(e,t+"")}searchKey(e,t){this.state.properties.filter(r=>r.key===e).forEach(t)}modifyPropertyValue(e,t){this.searchKey(e,r=>{r.value=t}),this.modifyProperty()}makePropertySelect(){return` + + `}[G("$property")](){return this.state.properties.map((e,t)=>` +
        +
        + +
        + +
        +
        +
        +
        + +
        +
        +
        + ${this.makePropertyEditor(e,t)} +
        +
        + `)}[M("showCSSPropertyEditor")](e=[]){this.setState({properties:e}),this.refresh()}[z("$property .remove")](e){var t=+e.$dt.attr("data-index");this.state.properties.splice(t,1),this.refresh(),this.modifyProperty()}[z("$property .refresh")](){this.parent.trigger("refreshPropertyValue")}}class rw extends X{initState(){return{key:this.props.key,currentBezier:cs(this.props.value||"linear"),isAnimating:wt(this.props.isAnimating)?!0:Boolean(this.props.isAnimating),currentBezierIndex:0,selectedColor:"#609de2",animatedColor:"#609de266",curveColor:"#609de2",baseLineColor:"rgba(117, 117, 117, 0.46)"}}afterRender(){window.setTimeout(()=>{this.refresh()},10)}template(){const e=hs(this.state.currentBezier,150,150),t=_a(this.state.currentBezier,150,150),r=hs("ease",30,30),i=_a("ease",30,30),a=hs("ease-in",30,30),n=_a("ease-in",30,30),o=hs("ease-out",30,30),l=_a("ease-out",30,30);return` +
        +
        +
        ${ne.chevron_left}
        +
        +
        ${ne.chevron_right}
        +
        +
        + +
        +
        +
        + + + + +
        +
        + + + + +
        +
        + + + + +
        +
        +
        + + + + +
        +
        +
        +
        +
        +
        + `}[ae("$animationArea")](){return{style:{display:this.state.isAnimating?"block":"none"}}}[ae("$bezierCanvas")](){return{d:hs(this.state.currentBezier,150,150)}}[ae("$bezierCanvasPoint")](){return{d:_a(this.state.currentBezier,150,150)}}updateData(e={}){this.setState(e),this.modifyCubicBezier()}modifyCubicBezier(){this.parent.trigger(this.props.onchange,this.state.key,Oh(this.state.currentBezier))}[z("$left")](){var{currentBezier:t,currentBezierIndex:e}=this.state;e==0?e=Ei.length-1:--e;var t=Ei[e];this.updateData({currentBezierIndex:e,currentBezier:t}),this.refresh()}[z("$right")](){var{currentBezier:e,currentBezierIndex:t}=this.state;t=++t%Ei.length,e=Ei[t],this.updateData({currentBezierIndex:t,currentBezier:e}),this.refresh()}[z("$text")](){var e=[...Ei[this.state.currentBezierIndex]];this.updateData({currentBezier:e}),this.refresh()}[z("$itemList .item")](e){var t=e.$dt.attr("data-bezier");this.refs.$itemList.attr("data-selected-value",t);var r=cs(t);this.updateData({currentBezier:r}),this.refresh()}refresh(){this.refreshEasingText(),this.refreshBezierCanvas()}refreshBezierCanvas(){this.bindData("$bezierCanvas"),this.bindData("$bezierCanvasPoint"),this.refreshPointer(),this.drawPoint()}refreshEasingText(){this.refs.$text.html(this.state.currentBezier[4]||"ease")}refreshPointer(){var e=cs(this.state.currentBezier),t=this.refs.$control.width(),r=this.refs.$control.height(),i=e[0]*t,a=(1-e[1])*r;this.refs.$pointer1.css({left:p.px(i),top:p.px(a)}),i=e[2]*t,a=(1-e[3])*r,this.refs.$pointer2.css({left:p.px(i),top:p.px(a)})}drawPoint(){this.state.isAnimating!==!1&&(this.timer&&window.clearTimeout(this.timer),this.animationTimer&&window.clearTimeout(this.animationTimer),this.timer=window.setTimeout(()=>{this.animationPoint()},100))}start(e){var t=this.animationCanvasData.func(e),r=10+(this.animationCanvasData.width-20)*t.y,i=10,a=this.animationCanvasData.context;a.beginPath(),a.arc(r,i,5,0,2*Math.PI),a.fill(),a.stroke(),a.closePath(),!(e>=1)&&(this.animationTimer=window.setTimeout(()=>{this.start(e+.05)},50))}animationPoint(){const e=cs(this.state.currentBezier);var t=ju(Oh(e));this.refs.$animationCanvas.clear();var r=this.refs.$animationCanvas.width(),i=this.refs.$animationCanvas.height(),a=this.refs.$animationCanvas.context();a.fillStyle=this.state.animatedColor,a.strokeStyle=this.state.selectedColor,a.lineWidth=1,this.animationCanvasData={func:t,width:r,height:i,context:a},this.start(0)}setPosition(e){var t=this.refs.$control.width(),r=this.refs.$control.height(),i=this.refs.$control.offset().left,a=this.refs.$control.offset().top,n=e,o=n.x;0>o?o=0:n.x>document.body.clientWidth&&(o=document.body.clientWidth),o-=i,o<0&&(o=0),to.trim()).map(o=>p.parse(o)),r=p.percent(0),i=p.percent(0),a=p.percent(0),n=p.percent(0);return t.length===1?(r=t[0].clone(),i=t[0].clone(),a=t[0].clone(),n=t[0].clone()):t.length===2?(r=t[0].clone(),i=t[1].clone(),a=t[0].clone(),n=t[1].clone()):t.length===3?(r=t[0].clone(),i=t[1].clone(),a=t[2].clone(),n=t[1].clone()):t.length===4&&(r=t[0].clone(),i=t[1].clone(),a=t[2].clone(),n=t[3].clone()),[t.length,r,i,a,n]}}const Ah=[{key:"top",title:"Top"},{key:"right",title:"Right"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"}];class iw extends X{initState(){var[e,t,r,i,a]=Yl.parse(this.props.value);return{isAll:e===1,all:t.clone(),top:t.clone(),right:r.clone(),bottom:i.clone(),left:a.clone()}}template(){return"
        "}[M("changeBorderRadius")](e,t){e==="all"&&Ah.forEach(r=>{this.state[r.key]=t.clone(),this.children[`$${r.key}`].setValue(t.clone())}),this.updateData({[e]:t})}[G("$body")](){var e=this.state.isAll?"all":"partitial",t=this.state.all,r=e==="all"?"display:none":"display:block";return` +
        +
        + + +
        +
        + ${O("RangeEditor",{ref:"$all",key:"all",value:t,onchange:"changeBorderRadius"})} +
        +
        +
        +
        + ${Ah.map(i=>{var a=this.state[i.key];return` +
        + ${O("RangeEditor",{ref:`$${i.key}`,label:i.title,key:i.key,value:a,onchange:"changeBorderRadius"})} +
        + `}).join("")} +
        +
        + `}updateData(e={}){this.setState(e,!1);var t=[];this.state.isAll?t=[1,this.state.all,this.state.all,this.state.all,this.state.all]:t=[4,this.state.top,this.state.right,this.state.bottom,this.state.left],this.parent.trigger(this.props.onchange,t)}[z("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.updateData({isAll:t==="all"})}}const sw=/((blur|grayscale|drop-shadow|hue-rotate|invert|brightness|contrast|opacity|saturate|sepia|url)\(([^)]*)\))/gi;class At extends sr{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"filter"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=aw[e.type];return t?new t(e):new ha({value:e.value})}static parseStyle(e){var t=[];if(!e)return t;var r=nn(e),i=r.str.match(sw)||[];return i.forEach((a,n)=>{var[o,l]=a.split("(");if(l=l.split(")")[0],o==="drop-shadow"){var c=l.split(" "),h=c.filter(d=>d.includes("@")).map(d=>Eo(d,r.matches)),u=c.filter(d=>!d.includes("@"));t[n]=At.parse({type:o,offsetX:p.parse(u[0]),offsetY:p.parse(u[1]),blurRadius:p.parse(u[2]),color:h[0]||"rgba(0, 0, 0, 1)"})}else t[n]=At.parse({type:o,value:p.parse(l)})}),t}static join(e){return e.map(t=>At.parse(t)).join(" ")}}class on extends At{getDefaultObject(){return super.getDefaultObject({type:"blur",value:on.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}}on.spec={inputType:"range",min:0,max:100,step:1,unit:"px",units:["px","em"],defaultValue:"0px"};class ha extends At{getDefaultObject(){return super.getDefaultObject({type:"svg",value:ha.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}toString(){return`url(#${this.json.value||""})`}}ha.spec={inputType:"select",defaultValue:""};class ln extends At{getDefaultObject(){return super.getDefaultObject({type:"grayscale",value:ln.spec.defaultValue})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}}ln.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class cn extends At{getDefaultObject(){return super.getDefaultObject({type:"hue-rotate",value:cn.spec.defaultValue})}}cn.spec={inputType:"range",min:0,max:360,step:1,unit:"deg",units:["deg"],defaultValue:p.deg(0)};class hn extends At{getDefaultObject(){return super.getDefaultObject({type:"invert",value:hn.spec.defaultValue})}}hn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class dn extends At{getDefaultObject(){return super.getDefaultObject({type:"brightness",value:dn.spec.defaultValue})}}dn.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class un extends At{getDefaultObject(){return super.getDefaultObject({type:"contrast",value:un.spec.defaultValue})}}un.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class pn extends At{getDefaultObject(){return super.getDefaultObject({type:"opacity",value:pn.spec.defaultValue})}}pn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class gn extends At{getDefaultObject(){return super.getDefaultObject({type:"saturate",value:gn.spec.defaultValue})}}gn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(100)};class fn extends At{getDefaultObject(){return super.getDefaultObject({type:"sepia",value:fn.spec.defaultValue})}}fn.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:p.percent(0)};class zi extends At{getDefaultObject(){return super.getDefaultObject({type:"drop-shadow",multi:!0,offsetX:zi.spec.offsetX.defaultValue,offsetY:zi.spec.offsetY.defaultValue,blurRadius:zi.spec.blurRadius.defaultValue,color:zi.spec.color.defaultValue})}toString(){var e=this.json;return`drop-shadow(${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.color})`}}zi.spec={offsetX:{title:"Offset X",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},offsetY:{title:"Offset Y",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},blurRadius:{title:"Blur Radius",inputType:"range",min:0,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em","%"]},color:{title:"Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)",unit:"color"}};const aw={blur:on,grayscale:ln,"hue-rotate":cn,invert:hn,brightness:dn,contrast:un,opacity:pn,saturate:gn,sepia:fn,"drop-shadow":zi,svg:ha},nw=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];var ow={blur:on.spec,grayscale:ln.spec,"hue-rotate":cn.spec,invert:hn.spec,brightness:dn.spec,contrast:un.spec,"drop-shadow":zi.spec,opacity:pn.spec,saturate:gn.spec,sepia:fn.spec,svg:ha.spec};class lw extends X{initState(){return{hideLabel:this.props.hideLabel==="true",filters:At.parseStyle(this.props.value)}}template(){return` +
        +
        +
        `}[G("$filterSelect")](){var e=nw.map(i=>({title:i,value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSpec(e){return ow[e]}makeDropShadowFilterTemplate(e,t,r){return` +
        +
        + + ${this.$i18n("filter.property.drop-shadow")} +
        + +
        +
        +
        + ${ko(["ColorViewEditor",{ref:`$dropShadowColorView${r}`,params:r,compact:!0,value:t.color,onchange:"changeDropShadowColor"}],...["offsetX","offsetY","blurRadius"].map(i=>["InputRangeEditor",{ref:`$${i}${r}`,label:this.$i18n(`filter.property.drop-shadow.${i}`),key:r,min:e[i].min,max:e[i].max,step:e[i].step,params:i,value:t[i].value||e[i].defaultValue,units:e[i].units,onchange:"changeRangeEditor"}]))} +
        + +
        + `}getSVGFilterList(){var e=this.$context.selection.current,t=[];return e&&(t=e.svgfilters.map(r=>({title:`svg - #${r.id}`,value:r.id}))),t}makeOneFilterEditor(e,t,r){if(t.type==="svg"){var i="",a=this.$context.selection.current;return a&&(i=a.svgfilters.map(n=>({value:n.id}))),O("SelectEditor",{ref:`$select${e}`,key:e,label:"SVG Filter",value:t.value,options:["",...i],onchange:"changeRangeEditor"})}return O("InputRangeEditor",{ref:`$range${e}_${t.type}`,label:this.$i18n("filter.property."+t.type),key:e,min:r.min,max:r.max,value:t.value,units:r.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t,r){return` +
        +
        + + ${t.type!="svg"?` +
        + ${this.makeOneFilterEditor(r,t,e)} +
        + `:` +
        + ${t.value} +
        + `} +
        + +
        +
        +
        + `}makeFilterTemplate(e,t){return e.type==="drop-shadow"?this.makeDropShadowFilterTemplate(this.getSpec(e.type),e,t):this.makeOneFilterTemplate(this.getSpec(e.type),e,t)}[G("$filterList")](){return this.state.filters.map((e,t)=>this.makeFilterTemplate(e,t.toString()))}[yr("$filterList .filter-item > .title > label")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$filterList .filter-item > .title > label")+Le](){}sortItem(e,t,r){e.splice(r+(t{var a=this.$context.selection.current;a&&(a.setSVGFilterValue(i.index,{filters:i.filters}),this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.pack("svgfilters","filter")))},index:e,preview:!1,filters:r.filters})}[K("add")](e){if(e==="svg"){const t=this.$context.selection.current.createSVGFilter({filters:[]}),r=this.$context.selection.current.svgfilters[t];this.state.filters.push(this.makeFilter(e,{value:r.id})),this.refresh(),this.modifyFilter(),this.trigger("openSVGFilterPopup",t)}else this.state.filters.push(this.makeFilter(e)),this.refresh(),this.modifyFilter()}[z("$add")](){var e=this.refs.$filterSelect.value;this.trigger("add",e)}[z("$filterList .filter-menu .del")](e){var t=+e.$dt.attr("data-index");this.state.filters.splice(t,1),this.refresh(),this.modifyFilter()}[K("changeDropShadowColor")](e,t,r){var i=+r;this.state.filters[i].reset({color:t}),this.modifyFilter()}[K("changeRangeEditor")](e,t,r){r?this.state.filters[+e].reset({[r]:t}):this.state.filters[+e].reset({value:t}),this.modifyFilter()}}const cw=["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"];class hw extends uc{getFontList(){return cw.map(e=>({value:e}))}initState(){return ie(b({},super.initState()),{options:this.getFontList()})}}const dw=/(([-]?[\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?)|#(?:[\da-f]{8})|(#(?:[\da-f]{3}){1,2}|([a-z_-]+)\([^()]+\)|([a-z_-]+))|(,)/gi,uw=/^[-]?([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?$/gi,pw=/^[a-z_-]+$/gi,Fu=[D.STATIC,D.LINEAR,D.RADIAL,D.CONIC,D.REPEATING_CONIC,D.REPEATING_LINEAR,D.REPEATING_RADIAL],Bu=[ue.LINEAR,ue.EASE,ue.EASE_IN,ue.EASE_OUT,ue.EASE_IN_OUT],gw=s=>{if(s===",")return"comma";if(s.indexOf("#")===0)return"hex";if(vo.isColorName(s))return"color";if(Fu.includes(s)||Bu.includes(s))return s;if(s.match(uw))return"length";if(s.match(pw))return"keyword"},fw=(s,e,t="(",r=")")=>{const i=[];for(var a=e;a0?-1:a+1},Dh=s=>Fu.includes(s)?Ue.GRADIENT:Bu.includes(s)?Ue.TIMING:s==="color"||s==="hex"?Ue.COLOR:s==="length"?Ue.LENGTH:s==="comma"?Ue.COMMA:s,nr=s=>(e,t,r="(",i=")")=>{const a=fw(t,e.startIndex,r,i);if(a===-1)return{convert:!0,funcType:Dh(s),matchedString:t,type:s,startIndex:e.startIndex,endIndex:e.startIndex+t.length};const n=t.substring(e.startIndex,a),o=n.indexOf(r)+r.length,l=t.substring(e.startIndex+o,e.startIndex+n.lastIndexOf(i)),c=e.startIndex,h=e.startIndex+n.length,u=da(l).map(g=>ie(b({},g),{fullTextStartIndex:e.startIndex+o+g.startIndex,fullTextEndIndex:e.startIndex+o+g.endIndex}));let d=[],v=0;return u.forEach(g=>{g.func===Ue.COMMA?v++:(d[v]||(d[v]=[]),d[v].push(g))}),{convert:!0,funcType:Dh(s),type:s,startIndex:c,endIndex:h,matchedString:n,args:l,parameters:d}},ml={length:s=>p.parse(s.matchedString),hex:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),rgb:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),rgba:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),hsl:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),hsla:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),color:s=>b({funcType:Ue.COLOR},ft(s.matchedString)),steps:s=>({funcType:Ue.TIMING,name:ue.STEPS,count:+s.parameters[0],direction:s.parameters[1]}),path:s=>({funcType:Ue.TIMING,name:ue.PATH,d:s.args}),repeat:s=>({funcType:Ue.REPEAT,count:+s.parameters[0],length:p.parse(s.parameters[1])}),"static-gradient":nr("static-gradient"),"linear-gradient":nr("linear-gradient"),"radial-gradient":nr("radial-gradient"),"conic-gradient":nr("conic-gradient"),"repeating-linear-gradient":nr("repeating-linear-gradient"),"repeating-radial-gradient":nr("repeating-radial-gradient"),"repeating-conic-gradient":nr("repeating-conic-gradient"),"cubic-bezier":s=>({funcType:Ue.TIMING,name:ue.CUBIC_BEZIER,matchedString:s.matchedString,x1:+s.parameters[0],y1:+s.parameters[1],x2:+s.parameters[2],y2:+s.parameters[3]}),ease:s=>({funcType:Ue.TIMING,name:ue.EASE,matchedString:s.matchedString,x1:.25,y1:.1,x2:.25,y2:1}),"ease-in":s=>({funcType:Ue.TIMING,name:ue.EASE_IN,matchedString:s.matchedString,x1:.42,y1:0,x2:1,y2:1}),"ease-out":s=>({funcType:Ue.TIMING,name:ue.EASE_OUT,matchedString:s.matchedString,x1:0,y1:0,x2:.58,y2:1}),"ease-in-out":s=>({funcType:Ue.TIMING,name:ue.EASE_IN_OUT,matchedString:s.matchedString,x1:.42,y1:0,x2:.58,y2:1}),linear:s=>({funcType:Ue.TIMING,name:ue.LINEAR,matchedString:s.matchedString,x1:0,y1:0,x2:1,y2:1})};function da(s,{funcStartCharacter:e="(",funcEndCharacter:t=")",parameterSaparator:r=",",customFuncMap:i={}}={}){let a=s.match(dw),n=[];if(!a)return n;function o(u,d,v){return n.some(g=>g.parsed&&Ut(g.parsed)?g.parsed.some(y=>y.startIndex===u&&y.endIndex===d&&v===y.matchedString):g.startIndex===u&&g.endIndex===d&&v===g.matchedString)}var l={next:0};a=a.map(u=>{const d=s.indexOf(u,l.next);return l.next=d+u.length,{index:d,matchedString:u}}),l.next=0;for(var c=0,h=a.length;cV.trim())}),v=L}let _;if(ml[v]?_=ml[v]||ml[g.matchedString]:(i[v]||i[g.matchedString])&&(_=i[v]||i[g.matchedString]),_){const L=_.call(null,g,s,e,t,r);L!=null&&L.convert?(g=b(b({},g),L),delete g.convert):g=ie(b({},g),{parsed:L})}n.push(g),l.next=g.endIndex}return n}function Bt(s){return da(s)[0]}function mw(s,e="temp"){var t;return(t=da(`${e}(${s})`,{customFuncMap:{[e]:nr(e)}})[0])==null?void 0:t.parameters}class Je{constructor(e={}){this.id=e.id||dr(),this.color=e.color||"transparent",this.cut=e.cut||!1,this.percent=e.percent||0,this.unit=e.unit||"%",this.px=e.px||0,this.em=e.em||0,this.prevColorStep=e.prevColorStep||null,this.timing=e.timing||da("linear")[0].parsed,this.timingCount=e.timingCount||1}toCloneObject(){return{id:this.id,color:this.color,cut:this.cut,percent:this.percent,unit:this.unit,px:this.px,em:this.em,prevColorStep:this.prevColorStep,timing:this.timing,timingCount:this.timingCount}}on(){this.cut=!0}off(){this.cut=!1}toggle(){this.cut=!this.cut}toggleTiming(){switch(this.timing.name){case ue.LINEAR:this.timing=Bt("steps(1, start)").parsed;break;case ue.STEPS:this.timing=Bt("ease").parsed,this.timingCount=15;break;case ue.EASE:case ue.EASE_IN:case ue.EASE_IN_OUT:case ue.EASE_OUT:case ue.CUBIC_BEZIER:this.timing=Bt("path(M 0 0 C 0.25 0.25 0.75 0.75 1 1)").parsed,this.timingCount=15;break;default:this.timing=Bt("linear").parsed,this.timingCount=1;break}}getUnit(){return this.unit=="%"?"percent":this.unit}add(e){var t=this.getUnit();return this[t]+=+e,this}sub(e){var t=this.getUnit();return this[t]-=+e,this}mul(e){var t=this.getUnit();return this[t]*=+e,this}div(e){var t=this.getUnit();return this[t]/=+e,this}mod(e){var t=this.getUnit();return this[t]%=+e,this}get isPx(){return this.unit=="px"}get isPercent(){return this.unit=="%"||this.unit==="percent"}get isEm(){return this.unit=="em"}toLength(){if(this.isPx)return p.px(this.px);if(this.isPercent)return p.percent(this.percent);if(this.isEm)return p.em(this.em)}getPrevLength(){return this.prevColorStep?this.prevColorStep.toLength():""}toString(){var e=this.cut?this.getPrevLength():"",t=this.color||"transparent";return`${t} ${e} ${this.toLength()}`}setValue(e,t){this.isPx?this.px=t*e/100:this.isPercent?this.percent=e:this.isEm&&(this.em=t*e/100/16),this.parent&&this.parent.sortColorStep()}static parse(e){let t=[];const r=nn(e);var i=r.str.split(" ").filter(o=>o.trim());const a=+i[0].replace("@",""),n=r.matches[a].color;if(i.length===1)t.push(new Je({color:n,unit:"%",percent:0,hasNotUnit:!0}));else if(i.length===2){const o=p.parse(i[1]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new Je(b({color:n},l)))}else if(i.length===3){const o=p.parse(i[2]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new Je(b({color:n,cut:!0},l)))}return t}static createColorStep(e=2,t=100,r="%"){var i=xi(2,e),a=t/i,n=Mr(i).map((o,l)=>`${Ba()} ${l*a}${r}`).join(",");return n}static createRepeatColorStep(e=2,t=1){var r=xi(2,e),i=Mr(r).map((a,n)=>`${Ba()} ${p.parse(t).mul(n+1)}`).join(",");return i}}class _c extends sr{getDefaultObject(e={}){return b({itemType:"image-resource",type:"image"},e)}isGradient(){return!1}isLinear(){return!1}isImage(){return!1}hasAngle(){return!1}isUrl(){return!1}isFile(){return!1}isAttribute(){return!0}toString(){return"none"}}var Nu=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function vw(s){if(s.__esModule)return s;var e=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(s).forEach(function(t){var r=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:function(){return s[t]}})}),e}var Gu={exports:{}};(function(s,e){(function(t,r){r(s)})(Nu,function(t){function r(_,L){if(!(_ instanceof L))throw new TypeError("Cannot call a class as a function")}/** + * @preserve JavaScript implementation of + * Algorithm for Automatically Fitting Digitized Curves + * by Philip J. Schneider + * "Graphics Gems", Academic Press, 1990 + * + * The MIT License (MIT) + * + * https://github.com/soswow/fit-curves + */function i(_,L,I){if(!Array.isArray(_))throw new TypeError("First argument should be an array");if(_.forEach(function(H){if(!Array.isArray(H)||H.some(function(W){return typeof W!="number"})||H.length!==_[0].length)throw Error("Each point should be an array of numbers. Each point should have the same amount of numbers.")}),_=_.filter(function(H,W){return W===0||!H.every(function(le,ce){return le===_[W-1][ce]})}),_.length<2)return[];var T=_.length,V=g(_[1],_[0]),F=g(_[T-2],_[T-1]);return a(_,V,F,L,I)}function a(_,L,I,T,V){var F=20,H,W,le,ce,me,pe,Ve,q,Be,Ge,ze,dt,je;if(_.length===2)return dt=y.vectorLen(y.subtract(_[0],_[1]))/3,H=[_[0],y.addArrays(_[0],y.mulItems(L,dt)),y.addArrays(_[1],y.mulItems(I,dt)),_[1]],[H];W=h(_);var Re=n(_,W,W,L,I,V);if(H=Re[0],ce=Re[1],pe=Re[2],ce===0||ce.9999&&re<1.0001)break}me=ce,Ve=pe}if(ze=[],q=y.subtract(_[pe-1],_[pe+1]),q.every(function(gt){return gt===0})){q=y.subtract(_[pe-1],_[pe]);var nt=[-q[1],q[0]];q[0]=nt[0],q[1]=nt[1]}return Be=y.normalize(q),Ge=y.mulItems(Be,-1),ze=ze.concat(a(_.slice(0,pe+1),L,Be,T,V)),ze=ze.concat(a(_.slice(pe),Ge,I,T,V)),ze}function n(_,L,I,T,V,F){var H,W,le;H=o(_,I,T,V);var ce=u(_,H,L);return W=ce[0],le=ce[1],F&&F({bez:H,points:_,params:L,maxErr:W,maxPoint:le}),[H,W,le]}function o(_,L,I,T){var V,F,H,W,le,ce,me,pe,Ve,q,Be,Ge,ze,dt,je,Re,qe,re=_[0],nt=_[_.length-1];for(V=[re,null,null,nt],F=y.zeros_Xx2x2(L.length),ze=0,dt=L.length;zeV&&(V=T,F=W);return[V,F]}var d=function(L,I){for(var T,V=[0],F=L[0],H=0,W=1;W<=I;W++)T=S.q(L,W/I),H+=y.vectorLen(y.subtract(T,F)),V.push(H),F=T;return V=V.map(function(le){return le/H}),V};function v(_,L,I,T){if(L<0)return 0;if(L>1)return 1;for(var V,F,H,W,le,ce=1;ce<=T;ce++)if(L<=I[ce]){W=(ce-1)/T,H=ce/T,F=I[ce-1],V=I[ce],le=(L-F)/(V-F)*(H-W)+W;break}return le}function g(_,L){return y.normalize(y.subtract(_,L))}var y=function(){function _(){r(this,_)}return _.zeros_Xx2x2=function(I){for(var T=[];I--;)T.push([0,0]);return T},_.mulItems=function(I,T){return I.map(function(V){return V*T})},_.mulMatrix=function(I,T){return I.reduce(function(V,F,H){return V+F*T[H]},0)},_.subtract=function(I,T){return I.map(function(V,F){return V-T[F]})},_.addArrays=function(I,T){return I.map(function(V,F){return V+T[F]})},_.addItems=function(I,T){return I.map(function(V){return V+T})},_.sum=function(I){return I.reduce(function(T,V){return T+V})},_.dot=function(I,T){return _.mulMatrix(I,T)},_.vectorLen=function(I){return Math.hypot.apply(Math,I)},_.divItems=function(I,T){return I.map(function(V){return V/T})},_.squareItems=function(I){return I.map(function(T){return T*T})},_.normalize=function(I){return this.divItems(I,this.vectorLen(I))},_}(),S=function(){function _(){r(this,_)}return _.q=function(I,T){var V=1-T,F=y.mulItems(I[0],V*V*V),H=y.mulItems(I[1],3*V*V*T),W=y.mulItems(I[2],3*V*T*T),le=y.mulItems(I[3],T*T*T);return y.addArrays(y.addArrays(F,H),y.addArrays(W,le))},_.qprime=function(I,T){var V=1-T,F=y.mulItems(y.subtract(I[1],I[0]),3*V*V),H=y.mulItems(y.subtract(I[2],I[1]),6*V*T),W=y.mulItems(y.subtract(I[3],I[2]),3*T*T);return y.addArrays(y.addArrays(F,H),W)},_.qprimeprime=function(I,T){return y.addArrays(y.mulItems(y.addArrays(y.subtract(I[2],y.mulItems(I[1],2)),I[0]),6*(1-T)),y.mulItems(y.addArrays(y.subtract(I[3],y.mulItems(I[2],2)),I[1]),6*T))},_}();t.exports=i,t.exports.fitCubic=a,t.exports.createTangent=g})})(Gu);var yw=Gu.exports,bw=function(){function s(e,t){var r=[],i=!0,a=!1,n=void 0;try{for(var o=e[Symbol.iterator](),l;!(i=(l=o.next()).done)&&(r.push(l.value),!(t&&r.length===t));i=!0);}catch(c){a=!0,n=c}finally{try{!i&&o.return&&o.return()}finally{if(a)throw n}}return r}return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return s(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),Ea=Math.PI*2,vl=function(e,t,r,i,a,n,o){var l=e.x,c=e.y;l*=t,c*=r;var h=i*l-a*c,u=a*l+i*c;return{x:h+n,y:u+o}},xw=function(e,t){var r=t===1.5707963267948966?.551915024494:t===-1.5707963267948966?-.551915024494:1.3333333333333333*Math.tan(t/4),i=Math.cos(e),a=Math.sin(e),n=Math.cos(e+t),o=Math.sin(e+t);return[{x:i-a*r,y:a+i*r},{x:n+o*r,y:o-n*r},{x:n,y:o}]},Fh=function(e,t,r,i){var a=e*i-t*r<0?-1:1,n=e*r+t*i;return n>1&&(n=1),n<-1&&(n=-1),a*Math.acos(n)},$w=function(e,t,r,i,a,n,o,l,c,h,u,d){var v=Math.pow(a,2),g=Math.pow(n,2),y=Math.pow(u,2),S=Math.pow(d,2),_=v*g-v*S-g*y;_<0&&(_=0),_/=v*S+g*y,_=Math.sqrt(_)*(o===l?-1:1);var L=_*a/n*d,I=_*-n/a*u,T=h*L-c*I+(e+r)/2,V=c*L+h*I+(t+i)/2,F=(u-L)/a,H=(d-I)/n,W=(-u-L)/a,le=(-d-I)/n,ce=Fh(1,0,F,H),me=Fh(F,H,W,le);return l===0&&me>0&&(me-=Ea),l===1&&me<0&&(me+=Ea),[T,V,ce,me]},_w=function(e){var t=e.px,r=e.py,i=e.cx,a=e.cy,n=e.rx,o=e.ry,l=e.xAxisRotation,c=l===void 0?0:l,h=e.largeArcFlag,u=h===void 0?0:h,d=e.sweepFlag,v=d===void 0?0:d,g=[];if(n===0||o===0)return[];var y=Math.sin(c*Ea/360),S=Math.cos(c*Ea/360),_=S*(t-i)/2+y*(r-a)/2,L=-y*(t-i)/2+S*(r-a)/2;if(_===0&&L===0)return[];n=Math.abs(n),o=Math.abs(o);var I=Math.pow(_,2)/Math.pow(n,2)+Math.pow(L,2)/Math.pow(o,2);I>1&&(n*=Math.sqrt(I),o*=Math.sqrt(I));var T=$w(t,r,i,a,n,o,u,v,y,S,_,L),V=bw(T,4),F=V[0],H=V[1],W=V[2],le=V[3],ce=Math.abs(le)/(Ea/4);Math.abs(1-ce)<1e-7&&(ce=1);var me=Math.max(Math.ceil(ce),1);le/=me;for(var pe=0;peo&&(t[n].mark=!0,U.DouglasPeuker(e,t,r,n),U.DouglasPeuker(e,t,n,i))}static simply(e,t=10){return e.length<=2?e:(e=ye(e),e[0].mark=!0,e[e.length-1].mark=!0,U.DouglasPeuker(t,e,0,e.length-1),e.filter(r=>Boolean(r.mark)))}static segmentDistance2(e,t,r,i){let a=i.x-r.x,n=i.y-r.y,o=a*a+n*n,l=e-r.x,c=t-r.y,h=a*l+n*c;if(o===0||h<=0)return l*l+c*c;if(h>=o)return l=e-i.x,c=t-i.y,l*l+c*c;{const u=l*n-c*a;return u*u/o}}static isInLine(e,t,r){return e.x===r.x?t.x===r.x:e.y===r.y?t.y===r.y:(e.x-r.x)*(e.y-r.y)===(r.x-t.x)*(r.y-t.y)}static isLine(e){return U.isInLine(e.endPoint,e.startPoint,e,e.reversePoint)}static getReversePoint(e,t){const[r,i]=te([],[t.x,t.y,0],[e.x,e.y,0],2);return{x:r,y:i}}static getIndexPoint(e,t){return e[t]}static getPoint(e,t){return e.filter(r=>U.isEqual(r.startPoint,t))[0]}static getIndex(e,t){for(var r=-1,i=0,a=e.length;i{i.command==="M"&&t.push({point:i,index:a,groupIndex:r++})}),t}static getSplitedGroupList(e){const t=ye(e),r=[];for(var i=0,a=-1,n=t.length;ii.point.index<=t).pop()}static getGroupIndex(e,t){for(var r=-1,i=0,a=e.length;i0;i--)if(e[i].command==="M"){r=i;break}r===-1&&(r=0);var a=e[r];return a&&(a.index=r),a}static getConnectedPointList(e,t){const r=e[t];return e.filter((i,a)=>a!==t&&U.isEqual(i.startPoint,r.startPoint))}static getPrevPoint(e,t){var r=t-1;if(r<0)return U.getLastPoint(e,t);var i=e[r];return i&&(i.index=r),i}static getNextPoint(e,t){var r=e[t],i=e[t+1];return i&&(i.index=t+1),(r.connected||r.close)&&(i=U.getFirstPoint(e,t)),i}static removePoint(e,t,r){if(r==="startPoint")return e.filter((i,a)=>a!==t)}static splitPoints(e){let t=[],r=[];return e.forEach(i=>{U.isFirst(i)?(r=[i],t.push(r)):r.push(i)}),t}static recoverPoints(e){const t=[];return e.forEach(r=>{r.forEach((i,a)=>{a===0&&(i.command="M",i.originalCommand="M")}),t.push.apply(t,r)}),t.forEach((r,i)=>{r.index=i}),t}}class be{static M(e,t){return{command:"M",values:[e,t]}}static L(e,t){return{command:"L",values:[e,t]}}static Q(e,t,r,i){return{command:"Q",values:[e,t,r,i]}}static C(e,t,r,i,a,n){return{command:"C",values:[e,t,r,i,a,n]}}static A(e,t,r,i,a,n,o){return{command:"A",values:[e,t,r,i,a,n,o]}}static Z(){return{command:"Z",values:[]}}static isMoveTo(e){return e.command==="M"}static isLineTo(e){return e.command==="L"}static isQuadraticBezierCurve(e){return e.command==="Q"}static isCubicBezierCurve(e){return e.command==="C"}static isArc(e){return e.command==="A"}static isClosePath(e){return e.command==="Z"}}const Sw=/([mMlLvVhHcCsSqQtTaAzZ]([^mMlLvVhHcCsSqQtTaAzZ]*))/g;var Pw=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function Kn(s){return{x:s[0],y:s[1]}}class Y{constructor(e=""){this.reset(e)}reset(e=""){return this.segments=[],this.pathString=e.trim(),this.parse(),this}resetSegments(e){return this.segments=e||[],this.pathString=this.joinPath(),this}addSegments(e){return this.resetSegments([...this.segments,...e])}addPath(e,t=Mt()){const r=e.clone();return r.transformMat4(t),this.addSegments(r.segments)}trim(e=""){var t=e.match(Pw)||[];return t.filter(r=>r!="")}parse(){var e=this.pathString.match(Sw)||[];return this.segments=e.map(t=>{var r=t[0],i=this.trim(t.replace(r,"")).map(a=>+a);return{command:r,values:i}}),this.segments=this.segments.map((t,r)=>{switch(t.command){case"m":var n=this.segments[r-1];n&&(n.command=="z"||n.command=="Z")&&(n=this.segments[r-2]);for(var o=(n==null?void 0:n.values[n.values.length-2])||0,l=(n==null?void 0:n.values[n.values.length-1])||0,i=0,a=t.values.length;i{const i=this.segments[r-1];if(t.command=="A"){const a=(i==null?void 0:i.values[i.values.length-2])||0,n=(i==null?void 0:i.values[i.values.length-1])||0,[o,l,c,h,u,d,v]=t.values;Y.arcToCurve(a,n,o,l,c,h,u,d,v).segments.forEach(y=>{y.command!=="M"||y.command})}}),this}convertGenerator(){for(var e=[],t=0,r=this.segments.length;t!!T),e}setSegments(e,t){this.segments[e]=t}getSegments(e){return ke(e)?this.segments[e]:this.segments}joinPath(e,t=""){var r=e||this.segments;return r.map(i=>`${i.command} ${i.values.length?i.values.join(" "):""}`).join(t)}each(e,t=!1){var r=this.segments.map((i,a)=>e.call(this,i,a));return t?r:(this.segments=r,this)}_loop(e,t=!1){return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":var n=e(i,0);r.values=[n[0],n[1]];break;case"V":var n=e([+i[0],0]);r.values=[n[0]];break;case"H":var n=e([0,+i[0]]);r.values=[n[1]];break;case"C":case"S":case"T":case"Q":for(var o=0,l=i.length;o({command:t.command,values:t.values.slice()}))),e}translate(e,t){return this.transformMat4(ht([],[e,t,0])),this}translateTo(e,t){return this.joinPath(this.transformMat4(ht([],[e,t,0]),!0))}scale(e,t){return this.transformMat4(jr([],[e,t,1])),this}scaleTo(e,t){return this.joinPath(this.transformMat4(jr([],[e,t,1]),!0))}scaleWith(e,t){const r=this.clone(),i=Et(r.getBBox());r.translate(-i.x,-i.y);const a=Math.min(e/i.width,t/i.height);return r.scale(a,a).translate(e/2-i.width/2*a,t/2-i.height/2*a)}scaleFunc(e=r=>r,t=r=>r){return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":r.values=[e(i[0]),t(i[1])];break;case"C":case"Q":for(var n=0,o=i.length;n{for(let a=0,n=t.length;a{const i=[];r.segments.forEach(({segment:a},n)=>{var l;const o=(l=r.segments[n-1])==null?void 0:l.segment;if(a.command==="M"){i.push(a);return}else if(a.command==="L"){const c=SS([[o.values[o.values.length-2],o.values[o.values.length-1],0],[a.values[0],a.values[1],0]]);i.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]});return}else if(a.command==="C")i.push(a);else if(a.command==="Q"){const c=fl([[o.values[o.values.length-2],o.values[o.values.length-1],0],[a.values[0],a.values[1],0],[a.values[2],a.values[3],0]]);i.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]})}else a.command==="Z"&&i.push(a)}),e.push(...i)}),Y.fromSegments(e)}polygonal(){const e=this.toPathList();return e.forEach(t=>{const r=[];t.segments.forEach((i,a)=>{const n=t.segments[a-1];i.command==="M"||i.command==="L"?r.push(i):i.command==="C"?r.push(...jh([n.values[n.values.length-2],n.values[n.values.length-1],0],[i.values[0],i.values[1],0],[i.values[2],i.values[3],0],[i.values[4],i.values[5],0]).map(o=>({command:"L",values:[o[0],o[1],0]}))):i.command==="Q"?r.push(...jh(...fl([[n.values[n.values.length-2],n.values[n.values.length-1],0],[i.values[0],i.values[1],0],[i.values[2],i.values[3],0]])).map(o=>({command:"L",values:[o[0],o[1],0]}))):i.command==="Z"&&r.push(i)}),t.resetSegments(r)}),Y.joinPathList(e)}divideSegmentByCount(e=1){let t=[];return this.getGroup().forEach(i=>{const a=[];i.segments.forEach(({segment:n},o)=>{var c;const l=(c=i.segments[o-1])==null?void 0:c.segment;n.command==="M"?a.push(n):n.command==="L"?_S([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]}],e).forEach(([,u])=>{a.push(be.L(u.x,u.y))}):n.command==="Q"?$S([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]},{x:n.values[2],y:n.values[3]}],e).forEach(([,u,d])=>{a.push(be.Q(u.x,u.y,d.x,d.y))}):n.command==="C"?xS([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:n.values[0],y:n.values[1]},{x:n.values[2],y:n.values[3]},{x:n.values[4],y:n.values[5]}],e).forEach(([,u,d,v])=>{a.push(be.C(u.x,u.y,d.x,d.y,v.x,v.y))}):n.command==="Z"&&a.push(n)}),t=t.concat(a)}),Y.fromSegments(t)}getBBox(){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER;return this.each(function(a,n){var o=a.values,l=a.command;const c=this.segments[n-1];switch(l){case"M":case"L":e=Math.min(e,o[0]),r=Math.max(r,o[0]),t=Math.min(t,o[1]),i=Math.max(i,o[1]);break;case"C":Rh([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0],[o[4],o[5],0]]).forEach(h=>{e=Math.min(e,h[0]),r=Math.max(r,h[0]),t=Math.min(t,h[1]),i=Math.max(i,h[1])});break;case"Q":Rh(fl([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0]])).forEach(h=>{e=Math.min(e,h[0]),r=Math.max(r,h[0]),t=Math.min(t,h[1]),i=Math.max(i,h[1])});break}return a}),[[e,t,0],[r,t,0],[r,i,0],[e,i,0]]}rect(){const e=this.getBBox();return{x:e[0][0],y:e[0][1],width:Ht(e[0],e[1]),height:Ht(e[0],e[3]),right:e[0][0]+Ht(e[0],e[1]),bottom:e[0][1]+Ht(e[0],e[3])}}getClosedPointInfo({x:e,y:t},r=20){let i=Number.MAX_SAFE_INTEGER,a={},n={};for(var o=1,l=this.segments.length;o[t,r,i]){const t=Et(this.getBBox());return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":case"C":case"Q":for(var n=0,o=i.length;nYe(r,e)),t}),this}reverseSegments(e){const t=[];let r=e.length-1;for(var i=r;i>0;i--){const a=e[i],n=a.values,o=a.command,l=e[i-1],c=l.values[l.values.length-2],h=l.values[l.values.length-1];switch(o){case"L":i===r&&t.push(be.M(n[0],n[1])),t.push(be.L(c,h));break;case"C":i===r&&t.push(be.M(n[4],n[5])),t.push(be.C(n[2],n[3],n[0],n[1],c,h));break;case"Q":i===r&&t.push(be.M(n[2],n[3])),t.push(be.Q(n[0],n[1],c,h));break;case"Z":t.push(a),r=i-1;break}}return t[0].command==="Z"&&t.push(t.shift()),t}splitSegments(){const e=[];let t=[];return this.segments.forEach(r=>{r.command==="M"?(t=[r],e.push(t)):t.push(r)}),e}reverse(...e){const t=this.splitSegments(),r=[];return e.length===0?t.forEach(i=>{r.push.apply(r,this.reverseSegments(i))}):t.forEach((i,a)=>{e.includes(a)?r.push.apply(r,this.reverseSegments(i)):r.push.apply(r,i)}),this.resetSegments(r)}reversePathStringByFunc(e){const t=this.toPathList().map((r,i)=>e(r,i)?r.reverse():r);return Y.joinPathList(t).toSVGString()}getCenterPointers(){let e=[],t=[];return this.segments.forEach((r,i)=>{var a=r.values,n=r.command;switch(n){case"M":case"L":e.push({index:i,pointer:[...r.values,0]});break;case"V":e.push({index:i,pointer:[a[0],t.pop(),0]});break;case"H":t.pop(),e.push({index:i,pointer:[t.pop(),a[0],0]});break;case"C":case"S":case"T":case"Q":e.push({index:i,pointer:[a[a.length-2],a[a.length-1],0]});break}t=ye(a)}),e}get points(){return this.getCenterPointers()}getSamePointers(e,t=0){return this.getCenterPointers().filter(r=>{if(Ht(r.pointer,e)<=t)return!0})}getGroup(){const e=[];let t=[];return this.segments.forEach((r,i)=>{r.command==="M"?(t=[{index:i,segment:r}],e.push({index:i,groupIndex:e.length,segments:t})):t.push({index:i,segment:r})}),e}createGroupPath(e){var r,i;const t=new Y;return t.resetSegments(((i=(r=this.getGroup()[e])==null?void 0:r.segments)==null?void 0:i.map(a=>a.segment))||[]),t}toPathList(){return this.getGroup().map(e=>Y.fromSegments(e.segments.map(t=>t.segment)))}replaceSegment(e,...t){const r=[...this.segments];r.splice(e,1,...t),this.resetSegments(r)}splitSegmentByPoint(e,t=0){const r=this.getClosedPointInfo(e,t);if(r&&r.t>0&&r.t<1){switch(r.segment.command){case"C":var i=Aa(r.points,r.t),a=i.first,n=be.C(a[1].x,a[1].y,a[2].x,a[2].y,a[3].x,a[3].y),o=i.second,l=be.C(o[1].x,o[1].y,o[2].x,o[2].y,o[3].x,o[3].y);this.replaceSegment(r.index,n,l);break;case"Q":var i=Da(r.points,r.t),a=i.first,n=be.Q(a[1].x,a[1].y,a[2].x,a[2].y),o=i.second,l=be.Q(o[1].x,o[1].y,o[2].x,o[2].y);this.replaceSegment(r.index,n,l);break;case"L":var i=Fa(r.points,r.t),a=i.first,n=be.L(a[1].x,a[1].y),o=i.second,l=be.L(o[1].x,o[1].y);this.replaceSegment(r.index,n,l);break;default:return}return r}}toMultiSegmentPathList(){const e=[];return this.getGroup().forEach(r=>{r.segments.forEach((i,a)=>{var u;const n=r.segments[a-1],o=((u=n==null?void 0:n.segment)==null?void 0:u.values)||[],l=o[o.length-2],c=o[o.length-1],h=i.segment.values;i.segment.command==="M"||(i.segment.command==="L"?e.push(new Y(`M ${l} ${c}L ${h.join(" ")}`)):i.segment.command==="C"?e.push(new Y(`M ${l} ${c}C ${h.join(" ")}`)):i.segment.command==="Q"&&e.push(new Y(`M ${l} ${c}Q ${h.join(" ")}`)))})}),e}simplify(e=.1){const t=[];return this.getGroup().forEach(i=>{const a=[...i.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>({x:l.segment.values[0],y:l.segment.values[1]}))],n=U.simply(a,e),o=[];n.forEach((l,c)=>{c===0?o.push(be.M(l.x,l.y)):o.push(be.L(l.x,l.y))}),t.push(...o)}),Y.fromSegments(t)}smooth(e=50){let t=[];return this.getGroup().forEach(i=>{const a=[...i.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>[...l.segment.values,0])],n=yw(a,e),o=[];n.forEach((l,c)=>{c===0&&o.push(be.M(...l[0])),o.push(be.C(l[1][0],l[1][1],l[2][0],l[2][1],l[3][0],l[3][1]))}),i.segments[i.segments.length-1].segment.command.toLowerCase()==="z"&&o.push(be.Z()),t=t.concat(o)}),Y.fromSegments(t)}cardinalSplines(e=.5){const t=[];this.getGroup().forEach(a=>{const n=[...a.segments.filter(c=>c.segment.command.toLowerCase()!=="z").map(c=>[...c.segment.values,0])],o=[];n.forEach((c,h)=>{const u=n[h-1],d=n[h+1];if(h===0)o.push({point:c});else if(h===n.length-1){const v=n[0];if(Nl(v,c)){const g=u,y=c,S=n[1],_=kh([],$e([],S,g),[2,2,1]),L=Ui([],_,[1-e,1-e,1]),I=qt([],L);o.push({reversePoint:Pe([],y,I),point:y,endPoint:Pe([],y,L)})}else o.push({point:c})}else{const v=u,g=c,S=kh([],$e([],d,v),[2,2,1]),_=Ui([],S,[1-e,1-e,1]),L=qt([],_);o.push({reversePoint:Pe([],g,L),point:g,endPoint:Pe([],g,_)})}});const l=[];o.forEach((c,h)=>{if(h===0)l.push(be.M(c.point[0],c.point[1]));else{const u=o[h-1]||o[o.length-1];if(u.endPoint)c.reversePoint?l.push(be.C(u.endPoint[0],u.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(be.Q(u.endPoint[0],u.endPoint[1],c.point[0],c.point[1]));else if(h===1){const d=o[o.length-1];d.endPoint?l.push(be.C(d.endPoint[0],d.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(be.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}else l.push(be.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}}),t.push(...l)});const i=new Y;return i.resetSegments(t),i}Z(){return this.segments.push(be.Z()),this}M(e,t){return this.segments.push(be.M(e,t)),this}L(e,t){return this.segments.push(be.L(e,t)),this}C(e,t,r,i,a,n){return this.segments.push(be.C(e,t,r,i,a,n)),this}Q(e,t,r,i){return this.segments.push(be.Q(e,t,r,i)),this}drawRect(e,t,r,i){return this.segments.push(be.M(e,t),be.L(e+r,t),be.L(e+r,t+i),be.L(e,t+i),be.L(e,t),be.Z()),this}drawLine(e,t,r,i){return this.segments.push(be.M(e,t),be.L(r,i)),this}drawCircleWithRect(e,t,r,i=r){var a=.552284749831;const n=new Y;return n.resetSegments([be.M(0,-1),be.C(a,-1,1,-a,1,0),be.C(1,a,a,1,0,1),be.C(-a,1,-1,a,-1,0),be.C(-1,-a,-a,-1,0,-1),be.Z()]),n.translate(1,1).scale(r/2,i/2).translate(e,t),this.addPath(n),this}drawCircle(e,t,r){return this.drawCircleWithRect(e-r,t-r,r*2,r*2)}drawArc(e,t,r,i,a,n,o){const[l,c]=this.lastPoint;return this.addPath(Y.arcToCurve(l,c,e,t,r,i,a,n,o))}get verties(){let e=[],t=[];return this.each(function(r){var i=r.values,a=r.command;switch(a){case"M":case"L":e.push([...r.values,0]);break;case"V":e.push([i[0],t.pop(),0]);break;case"H":t.pop(),e.push([t.pop(),i[0],0]);break;case"C":case"S":case"T":case"Q":for(var n=0,o=i.length;n{const i=this.segments[r-1],a=this.segments[r+1];if(t.values.length>0){const l=t.values;for(var n=0,o=l.length;ne.command==="Z")&&If(this.lastPoint,this.firstPoint)}get opened(){return!this.closed}get length(){let e=0;return this.getGroup().forEach(r=>{r.segments.forEach((i,a)=>{var u;const n=r.segments[a-1],o=((u=n==null?void 0:n.segment)==null?void 0:u.values)||[],l=o[o.length-2],c=o[o.length-1],h=i.segment.values;i.segment.command==="M"||(i.segment.command==="L"?e+=rr(l,c,h[0],h[1]):i.segment.command==="C"?e+=za(l,c,h[0],h[1],h[2],h[3],h[4],h[5]):i.segment.command==="Q"&&(e+=Ys(l,c,h[0],h[1],h[2],h[3])))})}),e}get lengthList(){let e=[];return this.getGroup().forEach((r,i)=>{r.segments.forEach((a,n)=>{var d;const o=r.segments[n-1],l=((d=o==null?void 0:o.segment)==null?void 0:d.values)||[],c=l[l.length-2],h=l[l.length-1],u=a.segment.values;a.segment.command==="M"||(a.segment.command==="L"?e.push({groupIndex:i,segmentIndex:n,length:rr(c,h,u[0],u[1])}):a.segment.command==="C"?e.push({groupIndex:i,segmentIndex:n,length:za(c,h,u[0],u[1],u[2],u[3],u[4],u[5])}):a.segment.command==="Q"&&e.push({groupIndex:i,segmentIndex:n,length:Ys(c,h,u[0],u[1],u[2],u[3])}))})}),e}get lastSegment(){const e=this.segments[this.segments.length-1];return e.command!=="Z"?e:this.segments[this.segments.length-2]}get lastPoint(){const e=this.lastSegment.values;return[e[e.length-2],e[e.length-1]]}get firstSegment(){return this.segments[0]}get firstPoint(){const e=this.firstSegment.values;return[e[0],e[1]]}static joinPathList(e=[]){const t=Y.fromSVGString();return e.forEach(r=>{t.addPath(r)}),t}static fromSegments(e){const t=new Y;return t.resetSegments(e),t}static fromStructuredVerties(e){const t=new Y,r=[];return e.forEach(i=>{r[i.segmentIndex]||(r[i.segmentIndex]={command:i.segment.command,values:[]}),r[i.segmentIndex].command!==eS.CLOSEPATH&&(r[i.segmentIndex].values[i.valueIndex]=i.vertex[0],r[i.segmentIndex].values[i.valueIndex+1]=i.vertex[1])}),t.resetSegments(r),t}static fromSVGString(e=""){return new Y(e)}static makeRect(e,t,r,i){return Y.fromSVGString().drawRect(e,t,r,i)}static makeLine(e,t,r,i){return Y.fromSVGString().drawLine(e,t,r,i)}static makeCircle(e,t,r,i){return Y.fromSVGString().drawCircleWithRect(e,t,r,i)}static makePathByPoints(e=[]){const t=e.map((r,i)=>i===0?be.M(r.x,r.y):be.L(r.x,r.y));return t.push(be.Z()),Y.fromSegments(t)}static makePathByVerties(e=[],t=!0){const r=e.map((i,a)=>a===0?be.M(i[0],i[1]):be.L(i[0],i[1]));return t&&r.push(be.Z()),Y.fromSegments(r)}static makePolygon(e,t,r=3){const i=[];for(var o=0;o{u.C(d.x1,d.y1,d.x2,d.y2,d.x,d.y)}),u}toCurveList(){const e=[];return this.segments.forEach((t,r)=>{if(r>0){const i=this.segments[r-1],a=[i.values[i.values.length-2],i.values[i.values.length-1]],n=[Kn(a),Kn([t.values[0],t.values[1]]),Kn([t.values[2],t.values[3]]),Kn([t.values[4],t.values[5]])];e.push({points:n,curveFunction:Lo(...n)})}}),e}toInterpolateFunction(){const e=this.normalize().toCurveList().map(t=>({points:t.points,curveFunction:t.curveFunction,start:t.points[0].x,end:t.points[t.points.length-1].x}));return t=>{const r=e.find(a=>a.start<=t&&t<=a.end);if(r)return r.curveFunction(t).y;if(t===0)return e[0].points[0].y;const i=e[e.length-1].points;return i[i.length-1].y}}}function Bh(){return s=>Math.pow(2,-10*s)*Math.sin((s-.1)*5*Math.PI)+1}const Sc=(s=1,e="end")=>{var t=1/s;return function(r){let i=0;const a=Ye(r/t,1e7);if(e=="start")i=Math.ceil(a);else if(e=="end"){if(r===0)return 0;if(r===1)return 1;i=Math.ceil(a)-1}return Math.min(Math.max(t*i,0),1)}};function Kl(s=1,e="end"){return Sc(s,e)}function Nh(){return Sc(1,"start")}function Gh(){return Sc(1,"end")}var ww={step:Kl,"step-start":Nh,"step-end":Gh,stepStart:Nh,stepEnd:Gh,"ease-out-elastic":Bh,easeOutElastic:Bh};function Zl(s="linear"){var[e]=s.split("(").map(i=>i.trim()),t=ww[e];if(t){var r=s.split("(")[1].split(")")[0].split(",").map(i=>i.trim());return t(...r)}else return Cw(s)}function Cw(s){var e=ju(s);return t=>e(t).y}const Hh={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class ur extends _c{isGradient(){return!0}toString(){return"none"}getDefaultObject(e={}){return b({itemType:"image-resource",type:"gradient",colorsteps:[]},e)}toCloneObject(){return ie(b({},super.toCloneObject()),{colorsteps:this.json.colorsteps.map(e=>e.clone())})}convert(e){return e.colorsteps[0]instanceof Je||(e.colorsteps=e.colorsteps.map(t=>new Je(t))),e}calculateAngle(){var e=this.json.angle;return wt(Hh[e])?e:Hh[e]||0}addColorStep(e,t=!0){return this.json.colorsteps.push(e),t&&this.sortColorStep(),e}pickColorStep(e){var t=this.colorsteps;if(!t.length)return{percent:0,color:"rgba(0,0,0,0)"};if(e{if(t.percent>r.percent)return 1;if(t.percentr.index?1:-1}),e.forEach((t,r)=>{t.index=r*100})}sortToRight(){var e=this.colorsteps;const t=e.length,r=100/t;e.forEach((i,a)=>{i.percent=r*(a+1)}),this.sortColorStep()}sortToLeft(){var e=this.colorsteps;const t=e.length,r=100/t;e.forEach((i,a)=>{i.percent=r*a}),this.sortColorStep()}addColorStepList(e=[]){e.forEach(t=>{this.addColorStep(t,!1)}),this.sortColorStep()}getColorStep(e){return this.json.colorsteps.filter(t=>t.id==e)[0]}clear(...e){e.length?this.json.colorsteps.splice(+e[0],1):this.json.colorsteps=[]}removeColorStepByIndex(e){this.json.colorsteps.splice(e,1)}removeColorStep(e){this.json.colorsteps=this.json.colorsteps.filter(t=>t.id!=e)}get colorsteps(){return this.json.colorsteps}makeTimingString(e,t=1){switch(e.name){case ue.LINEAR:return"";case ue.EASE:case ue.EASE_IN:case ue.EASE_OUT:case ue.EASE_IN_OUT:return`${e.name} ${t}`;case ue.STEPS:return`steps(${e.count}, ${e.direction})`;case ue.PATH:return`path(${e.d}) ${t}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2}) ${t}`}}getColorString(){return this.colorsteps.map(e=>{const{color:t,percent:r,timing:i,timingCount:a}=e;return`${t} ${r}% ${this.makeTimingString(i,a)}`}).join(",")}static makeColorStepList(e){const t=[];return e.forEach((r,i)=>{const{color:a,percent:n,timing:o,timingCount:l}=r;var c=e[i-1];if(i===0)return t.push({color:a,percent:n}),t;switch(o.name){case ue.STEPS:for(var v=Kl(o.count,o.direction),g=[],h=0;h<=o.count;h++){var u=c.percent+(n-c.percent)*(h/o.count),d=Xs(c.color,a,v(h/o.count));g.push({percent:u,color:d})}g.forEach((y,S)=>{if(S===0)t.push({percent:c.percent,color:y.color}),t.push(y);else{const _=g[S-1];t.push({percent:_.percent,color:y.color}),t.push(y)}});break;case ue.PATH:for(var v=Y.fromSVGString(o.d).toInterpolateFunction(),g=[],h=0;h<=l;h++){const S=c.percent+(n-c.percent)*(h/l),_=Xs(c.color,a,v(h/l));g.push({percent:S,color:_})}t.push(...g);break;default:for(var v=Zl(o.matchedString),g=[],h=0;h<=l;h++){const S=c.percent+(n-c.percent)*(h/l),_=Xs(c.color,a,v(h/l));g.push({percent:S,color:_})}t.push(...g);break}}),t}static toCSSColorString(e=[],t="%",r=100){return ur.makeColorStepList(e).map(a=>{const{color:n,percent:o}=a,l=o/100*r;return`${n} ${l}${t}`}).join(",")}static parseColorSteps(e){return e.map((t,r)=>{var i,a,n;if(t.length===1){const o=((i=e[r-1])==null?void 0:i[1])||{parsed:{value:0}},l=((a=e[r+1])==null?void 0:a[1])||{parsed:{value:100}};let c=0;return e[r-1]?e[r+1]?c=o.parsed.value+(l.parsed.value-o.parsed.value)*.5:c=100:c=0,new Je({color:t[0].matchedString,percent:c,unit:"%",timing:Bt("linear").parsed,timingCount:1})}if(t.length===2)return new Je({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:Bt("linear").parsed,timingCount:1});if(t.length===3)return t[2].parsed.funcType===Ue.TIMING?new Je({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:(n=t[3])==null?void 0:n.parsed.value}):new Je({color:t[0].matchedString,percent:t[2].parsed.value,unit:t[2].parsed.unit,timing:Bt("steps(1, start)").parsed});if(t.length===4)return new Je({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:t[3].parsed.value})})}}const Uh={center:!0,top:!0,left:!0,right:!0,bottom:!0},Wh={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Nr extends ur{getDefaultObject(e={}){return super.getDefaultObject(b({type:"conic-gradient",angle:0,radialPosition:[or.CENTER,or.CENTER]},e))}toCloneObject(){return ie(b({},super.toCloneObject()),{angle:this.json.angle,radialPosition:ye(this.json.radialPosition)})}hasAngle(){return!0}pickColorStep(e){return super.pickColorStep((e+100)%100)}getStartEndPoint(e){let t,r,i,[a,n]=this.json.radialPosition;const o=e.backRect,l=mt(o.x,o.y,o.width,o.height);a=="center"&&(a=p.percent(50)),n=="center"&&(n=p.percent(50));const c=a.toPx(o.width),h=n.toPx(o.height),u=[o.x+c.value,o.y+h.value,0];let d=l[0],v=l[1],g=l[3],y=l[2];const S=se(u,d),_=se(u,v),L=se(u,g),I=se(u,y);t=Wt(u);const T=Math.max(S,_,L,I);return r=Te(t[0]+T,t[1],t[2]),i=Te(t[0],t[1]-T,t[2]),{startPoint:t,endPoint:r,shapePoint:i}}toString(){var e=this.getColorString(),t=[],r=this.json,i=r.angle,a=r.radialPosition||or.CENTER;a=Uh[a]?a:a.join(" "),ke(i)&&(i=+(Wh[i]||i),t.push(`from ${i}deg`)),a&&t.push(`at ${a}`);var n=t.length?t.join(" ")+",":"";return`${r.type}(${n} ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=Nr.toCSSColorString(this.colorsteps,"deg",360),t=[],r=this.json,i=r.angle,a=r.radialPosition||or.CENTER;a=Uh[a]?a:a.join(" "),ke(i)&&(i=+(Wh[i]||i),t.push(`from ${i}deg`)),a&&t.push(`at ${a}`);var n=t.length?t.join(" ")+",":"";return`${r.type}(${n} ${e})`}static parse(e){const t=Bt(e);var r={angle:0,radialPosition:["center","center"]};let[i,...a]=t.parameters;if(i[0].func!==Ue.COLOR){let o=!1,l=!1,c=[],h=[];i.forEach(u=>{u.func===Ue.KEYWORD&&u.matchedString==="from"?o=!0:u.func===Ue.KEYWORD&&u.matchedString==="at"?l=!0:l?c.push(u):o&&h.push(u)}),r.radialPosition=c.map(u=>{if(u.func===Ue.KEYWORD)switch(u.matchedString){case"top":return p.percent(0);case"left":return p.percent(0);case"right":return p.percent(100);case"bottom":return p.percent(100);case"center":return p.percent(50)}return u.parsed}),h.length&&(r.angle=h[0].parsed.value)}else a=t.parameters;const n=Nr.parseColorSteps(a);return new Nr(ie(b({},r),{colorsteps:n}))}}const Xh={0:"to top",45:"to top right",90:"to right",135:"to bottom right",180:"to bottom",225:"to bottom left",270:"to left",315:"to top left"},kw={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Gr extends ur{getDefaultObject(e){return super.getDefaultObject(b({type:"linear-gradient",angle:0},e))}toCloneObject(){return ie(b({},super.toCloneObject()),{angle:this.json.angle})}isLinear(){return!0}hasAngle(){return!0}getRealAngle(){return this.json.angle}get angle(){return this.getRealAngle()}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t="",r=this.json.angle||0;t=r,ut(t)&&(t=Xh[`${t}`]||t),ut(t)&&(t=t>360?t%360:t,t=`${t}deg`);var i=`${this.json.type}(${t}, ${e})`;return i}toCSSString(){if(this.colorsteps.length===0)return"";var e=Gr.toCSSColorString(this.colorsteps),t="",r=this.json.angle||0;t=r,ut(t)&&(t=Xh[`${t}`]||t),ut(t)&&(t=t>360?t%360:t,t=`${t}deg`);var i=`${this.json.type}(${t}, ${e})`;return i}static parse(e){const t=Bt(e);var r={};let[i,...a]=t.parameters;const n=[],o=[];i[0].func!==Ue.COLOR?i.forEach(h=>{h.func===Ue.KEYWORD?o.push(h):n.push(h)}):a=t.parameters;let l=o.map(h=>h.matchedString).join(" ");l===""?[l]=n.map(h=>h.parsed.value):l=kw[l],r=ie(b({},r),{angle:l});const c=Gr.parseColorSteps(a);return new Gr(ie(b({},r),{colorsteps:c}))}}const Yh={center:!0,top:!0,left:!0,right:!0,bottom:!0};class Hr extends ur{getDefaultObject(e={}){return super.getDefaultObject(b({type:"radial-gradient",radialType:"ellipse",radialSize:$r.FARTHEST_CORNER,radialPosition:[or.CENTER,or.CENTER]},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("radialType","radialSize","radialPosition"))}getConerDist(e){let t=e.backVerties[0],r=e.backVerties[1],i=e.backVerties[3],a=e.backVerties[2];const n=se(e.radialCenterPosition,t),o=se(e.radialCenterPosition,r),l=se(e.radialCenterPosition,i),c=se(e.radialCenterPosition,a),h=[["top-left",t,n],["top-right",r,o],["bottom-left",i,l],["bottom-right",a,c]];return h.sort((u,d)=>u[2]-d[2]),{cornerList:h,topLeftDist:n,topRightDist:o,bottomLeftDist:l,bottomRightDist:c}}EllipseRadiusToSide(e,t=!0){var r=Math.abs(e.radialCenterPoint[0]),i=Math.abs(e.radialCenterPoint[1]),a=Math.abs(e.radialCenterPoint[0]-e.backRect.width),n=Math.abs(e.radialCenterPoint[1]-e.backRect.height);if(t)var o=ra?r:a,l=i>n?i:n;return{width:o,height:l}}EllipseRadius(e,t,r=!0){const{cornerList:i,topLeftDist:a,topRightDist:n,bottomRightDist:o,bottomLeftDist:l}=this.getConerDist(t),c=[a,n,l,o];var h=r?Math.min(...c):Math.max(...c),u=i.find(S=>S[2]===h)[1],d=e.width/e.height;if(d!==0){var v=$e([],u,t.radialCenterPosition),g=Math.sqrt(Math.pow(v[0],2)+Math.pow(v[1],2)*Math.pow(d,2)),y=g/d;return{width:g,height:y}}}getStartEndPoint(e){let t,r,i;const a=this.json.radialType,n=this.json.radialSize;let[o,l]=this.json.radialPosition;const c=e.backRect,h=mt(c.x,c.y,c.width,c.height);o=="center"&&(o=p.percent(50)),l=="center"&&(l=p.percent(50));const u=o.toPx(c.width),d=l.toPx(c.height),v=[c.x+u.value,c.y+d.value,0];let g=[h[0][0],d.value,0],y=[h[1][0],d.value,0],S=[u.value,h[0][1],0],_=[u.value,h[3][1],0];const L=se(v,g),I=se(v,y),T=se(v,S),V=se(v,_),F=[["top",S,T],["left",g,L],["right",y,I],["bottom",_,V]];F.sort((qe,re)=>qe[2]-re[2]);let H=h[0],W=h[1],le=h[3],ce=h[2];const me=se(v,H),pe=se(v,W),Ve=se(v,le),q=se(v,ce),Be=[["top-left",H,me],["top-right",W,pe],["bottom-left",le,Ve],["bottom-right",ce,q]];switch(Be.sort((qe,re)=>qe[2]-re[2]),t=Wt(v),a){case xt.CIRCLE:switch(n){case $r.CLOSEST_SIDE:var[,,Ge]=F[0];r=Te(t[0]+Ge,t[1],t[2]),i=Te(t[0],t[1]+Ge,t[2]);break;case $r.CLOSEST_CORNER:var[,,Ge]=Be[0];r=Te(t[0]+Ge,t[1],t[2]),i=Te(t[0],t[1]+Ge,t[2]);break;case $r.FARTHEST_SIDE:var[,,Ge]=F[F.length-1];r=Te(t[0]+Ge,t[1],t[2]),i=Te(t[0],t[1]+Ge,t[2]);break;case xt.CIRCLE:case $r.FARTHEST_CORNER:var[,,Ge]=Be[Be.length-1];r=Te(t[0]+Ge,t[1],t[2]),i=Te(t[0],t[1]+Ge,t[2]);break;default:var Ge=(n[0]||n).toPx(se(e.backVerties[1],e.backVerties[0])).value;r=Te(t[0]+Ge,t[1],t[2]),i=Te(t[0],t[1]+Ge,t[2]);break}break;case xt.ELLIPSE:switch(n){case $r.CLOSEST_SIDE:var ze=this.EllipseRadiusToSide(e,!0);r=Te(t[0]+ze.width,t[1],t[2]),i=Te(t[0],t[1]+ze.height,t[2]);break;case $r.CLOSEST_CORNER:var ze=this.EllipseRadiusToSide(e,!0),dt=this.EllipseRadius(ze,e,!0);r=Te(t[0]+dt.width,t[1],t[2]),i=Te(t[0],t[1]+dt.height,t[2]);break;case $r.FARTHEST_SIDE:var ze=this.EllipseRadiusToSide(e,!1);r=Te(t[0]+ze.width,t[1],t[2]),i=Te(t[0],t[1]+ze.height,t[2]);break;case $r.FARTHEST_CORNER:var ze=this.EllipseRadiusToSide(e,!1),dt=this.EllipseRadius(ze,e,!1);r=Te(t[0]+dt.width,t[1],t[2]),i=Te(t[0],t[1]+dt.height,t[2]);break;default:var je=n[0].toPx(se(e.backVerties[1],e.backVerties[0])).value,Re=n[1].toPx(se(e.backVerties[3],e.backVerties[0])).value;r=Te(t[0]+je,t[1],t[2]),i=Te(t[0],t[1]+Re,t[2]);break}break}return{startPoint:t,endPoint:r,shapePoint:i}}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t=this.json,r="",i=t.radialType||xt.ELLIPSE,a=t.radialSize||$r.FARTHEST_CORNER,n=t.radialPosition||["center","center"];return n=Yh[n]?n:n.join(" "),a=Ut(a)?a.join(" "):a,r=n?`${i} ${a} at ${n}`:`${i} ${a}`,`${t.type||"radial-gradient"}(${r}, ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=Hr.toCSSColorString(this.colorsteps),t=this.json,r="",i=t.radialType||xt.ELLIPSE,a=t.radialSize||$r.FARTHEST_CORNER,n=t.radialPosition||["center","center"];return n=Yh[n]?n:n.join(" "),a=Ut(a)?a.join(" "):a,r=n?`${i} ${a} at ${n}`:`${i} ${a}`,`${t.type||"radial-gradient"}(${r}, ${e})`}static parse(e){const t=Bt(e);var r={radialType:xt.ELLIPSE,radialSize:$r.FARTHEST_CORNER,radialPosition:["center","center"]};let[i,...a]=t.parameters;if(i[0].func!==Ue.COLOR){let o=xt.ELLIPSE,l=!1,c=[],h=[];i.forEach(u=>{if(u.func===Ue.KEYWORD&&u.matchedString==="at")l=!0;else if(l)c.push(u);else switch(u.matchedString){case xt.CIRCLE:case xt.ELLIPSE:o=u.matchedString;break;default:h.push(u);break}}),r.radialType=o,r.radialPosition=c.map(u=>{if(u.func===Ue.KEYWORD)switch(u.matchedString){case"top":return p.percent(0);case"left":return p.percent(0);case"right":return p.percent(100);case"bottom":return p.percent(100);case"center":return p.percent(50)}return u.parsed}),r.radialSize=h.map(u=>u.func===Ue.KEYWORD?u.matchedString:u.parsed),r.radialSize.length===1&&(r.radialSize=r.radialSize[0])}else a=t.parameters;const n=Hr.parseColorSteps(a);return new Hr(ie(b({},r),{colorsteps:n}))}}class gs extends Nr{getDefaultObject(){return super.getDefaultObject({type:"repeating-conic-gradient",angle:0,radialPosition:[or.CENTER,or.CENTER]})}static parse(e){var t=Nr.parse(e);return new gs({angle:t.angle,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class fs extends Gr{getDefaultObject(){return super.getDefaultObject({type:"repeating-linear-gradient",angle:0})}static parse(e){var t=Gr.parse(e);return new fs({angle:t.angle,colorsteps:t.colorsteps})}}class ms extends Hr{getDefaultObject(){return super.getDefaultObject({type:"repeating-radial-gradient"})}static parse(e){var t=Hr.parse(e);return new ms({radialType:t.radialType,radialSize:t.radialSize,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class Li extends ur{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",static:!0,colorsteps:[new Je({color:"red",percent:0,index:0}),new Je({color:"red",percent:100,index:0})]})}toCloneObject(){return ie(b({},super.toCloneObject()),{static:!0})}static parse(e){const t=Bt(e);var r=ur.parseColorSteps(t.parameters);return new Li({colorsteps:r})}static create(e="transparent"){return new Li({colorsteps:[new Je({color:e,percent:0,index:0}),new Je({color:e,percent:100,index:1})]})}toString(){var e=this.json.colorsteps[0].color;return`static-gradient(${e})`}toCSSString(){if(this.colorsteps.length===0)return"";const e=this.colorsteps[0].color||"black";return`linear-gradient(${e} 0%, ${e} 100%)`}}const Tw=["jpg","jpeg","png","gif","svg"];class vs extends _c{getDefaultObject(e={}){return super.getDefaultObject(b({type:D.URL,url:"",datauri:""},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("url","datauri"))}static parse(e){var t=e.split("(")[1].split(")")[0];return new vs({url:t})}isUrl(){return!0}toString(e){return`url(${e||this.json.url})`}static isImageFile(e){return Tw.includes(e)}}const Mw=["repeat","no-repeat","repeat-x","repeat-y","round","space"];class De extends sr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:De.createImage(e.images[0])})}static createImage(e){return new vs({url:e})}setGradient(e){this.reset({type:e.type,image:De.createGradient(e,this.json.image)})}static createGradient(e,t){const r=e.colorsteps||t.colorsteps,i=e.angle||t.angle,a=e.radialType||t.radialType,n=e.radialPosition||t.radialPosition;let o=t.toJSON();switch(delete o.itemType,delete o.type,e.type){case"static-gradient":return new Li(ie(b({},o),{colorsteps:r}));case"linear-gradient":return new Gr(ie(b({},o),{colorsteps:r,angle:i}));case"repeating-linear-gradient":return new fs(ie(b({},o),{colorsteps:r,angle:i}));case"radial-gradient":return new Hr(ie(b({},o),{colorsteps:r,radialType:a,radialPosition:n}));case"repeating-radial-gradient":return new ms(ie(b({},o),{colorsteps:r,radialType:a,radialPosition:n}));case"conic-gradient":return new Nr(ie(b({},o),{colorsteps:r,angle:i,radialPosition:n}));case"repeating-conic-gradient":return new gs(ie(b({},o),{colorsteps:r,angle:i,radialPosition:n}))}return new ur}getDefaultObject(){return super.getDefaultObject({itemType:"background-image",checked:!1,blendMode:"normal",size:"auto",repeat:"repeat",width:p.percent(100),height:p.percent(100),x:p.percent(0),y:p.percent(0)})}toCloneObject(){var e=this.json;return ie(b(b({},super.toCloneObject()),this.attrs("checked","blendMode","size","repeat","width","height","x","y")),{image:e.image.toString()})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width&&(e.width=p.parse(e.width)),e.height&&(e.height=p.parse(e.height)),ct(e.image)&&(e.image=De.parseImage(e.image)),e}get image(){return this.json.image}set image(e){this.json.image=e}checkField(e,t){return e==="repeat"?Mw.includes(t):super.checkField(e,t)}recoverOffset(e,t,r,i=0,a=0,n={}){const{x:o,y:l,width:c,height:h}=this.json,u=Math.floor(c.toPx(r.width).value+i),d=n.shiftKey?u:Math.floor(h.toPx(r.height).value+a);e-=r.x,t-=r.y,u<0&&(e+=u),d<0&&(t+=d);let v=p.px(e),g=p.px(t);const y=2;return o.isPercent()&&(Math.abs(e)`${e}: ${t}`).join(";")}toBackgroundCSS(){var e=this.toCSS();return{background:`${e["background-image"]} `}}static parse(e){return new De(e)}static parseImage(e){const t=Bt(e);let r=null;if(!t||e==="undefined")return Li.create(e||"transparent");switch(t.func){case D.LINEAR:r=Gr.parse(t.matchedString);break;case D.REPEATING_LINEAR:r=fs.parse(t.matchedString);break;case D.RADIAL:r=Hr.parse(t.matchedString);break;case D.REPEATING_RADIAL:r=ms.parse(t.matchedString);break;case D.CONIC:r=Nr.parse(t.matchedString);break;case D.REPEATING_CONIC:r=gs.parse(t.matchedString);break;case D.URL:r=vs.parse(t.matchedString);break;default:r=Li.parse(t.matchedString);break}return r}static changeImageType(e){switch(e.type){case D.STATIC:return new Li(e);case D.LINEAR:return new Gr(e);case D.REPEATING_LINEAR:return new fs(e);case D.RADIAL:return new Hr(e);case D.REPEATING_RADIAL:return new ms(e);case D.CONIC:return new Nr(e);case D.REPEATING_CONIC:return new gs(e);case D.URL:return new vs(e)}}static parseStyle(e){var t=[];return e["background-image"]&&mw(e["background-image"],"background-image").forEach((i,a)=>{const n=i[0];let o;switch(n.func){case D.STATIC:o=Li.parse(n.matchedString);break;case D.LINEAR:o=Gr.parse(n.matchedString);break;case D.REPEATING_LINEAR:o=fs.parse(n.matchedString);break;case D.RADIAL:o=Hr.parse(n.matchedString);break;case D.REPEATING_RADIAL:o=ms.parse(n.matchedString);break;case D.CONIC:o=Nr.parse(n.matchedString);break;case D.REPEATING_CONIC:o=gs.parse(n.matchedString);break;case D.URL:o=vs.parse(n.matchedString);break}t[a]=new De({type:o.type,image:o})}),e["background-repeat"]&&e["background-repeat"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].repeat=r)}),e["background-blend-mode"]&&e["background-blend-mode"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].blendMode=r)}),e["background-size"]&&e["background-size"].split(",").map(r=>r.trim()).forEach((r,i)=>{if(t[i])if(r=="cover"||r==="contain"||r==="auto")t[i].size=r;else{t[i].size="auto";let[a,n]=r.split(" ");t[i].width=p.parse(a),t[i].height=p.parse(n)}}),e["background-position"]&&e["background-position"].split(",").map(r=>r.trim()).forEach((r,i)=>{if(t[i]){let[a,n]=r.split(" ");t[i].x=p.parse(a),t[i].y=p.parse(n)}}),e["background-visibility"]&&e["background-visibility"].split(",").map(r=>r.trim()).forEach((r,i)=>{t[i]&&(t[i].visibility=r===Dr.HIDDEN?Dr.HIDDEN:Dr.VISIBLE)}),t}static toCSS(e){var t={};return e.forEach(r=>{ho(r.toCSS(),(i,a)=>{t[i]||(t[i]=[]),t[i].push(a)})}),uh(t)}static toProperty(e){var t={};return e.forEach(r=>{ho(r.toProperty(),(i,a)=>{t[i]||(t[i]=[]),t[i].push(a)})}),uh(t)}static join(e){return Ze(De.toProperty(e.map(t=>De.parse(t))))}static joinCSS(e){return De.toCSS(e.map(t=>De.parse(t)))}static parseList(e=[]){return e.map(t=>De.parse(t))}}class Iw extends X{initState(){var r;const e=De.parseImage(this.props.value||"static-gradient(#ececec)"),t=(r=e.colorsteps[this.props.index])==null?void 0:r.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(i=>this.$context.selection.isSelectedColorStep(i.id))),{id:t,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({image:De.parseImage(e)},!1),this.refresh()}template(){return` +
        +
        +
        +
        +
        +
        +
        +
        + `}[Tr("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(r=>{this.$commands.emit("updateImageAssetItem",r,i=>{this.trigger("setImageUrl",i)})})}[K("changeTabType")](e){var a,n;const t=(a=this.state.image)==null?void 0:a.type,r=((n=this.state.image)==null?void 0:n.colorsteps)||[];t===D.STATIC&&(r.length===0||r.length===1)&&r.push(r[0],r[0]);var i=e==="image-resource"?this.state.image.url:this.state.url;this.state.image=De.changeImageType({type:e,url:i,colorsteps:r,angle:this.state.image.angle||0,radialType:this.state.image.radialType||xt.CIRCLE,radialPosition:this.state.image.radialPosition||["50%","50%"]}),this.refresh(),this.updateData()}[K("changeColorStepOffset")](e,t){this.currentStep&&(this.currentStep.percent=t.value,this.state.image.sortColorStep(),this.refresh(),this.updateData())}[z("$back")](e){var t=this.refs.$stepList.rect(),r=t.x,i=t.right,a=e.xy.x;ai&&(a=i);var n=(a-r)/t.width*100;this.state.image.insertColorStep(n),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[ae("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[ae("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[G("$stepList")+Ee](){var t;var e=((t=this.state.image)==null?void 0:t.colorsteps)||[];return e.map(r=>{var i=this.$context.selection.isSelectedColorStep(r.id)?"selected":"";return` +
        +
        + ${Math.floor(r.percent*10)/10} +
        +
        +
        `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[tr("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t+1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&this.state.image.insertColorStep(i.percent+(100-i.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t-1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&this.state.image.insertColorStep(i.percent),this.refresh(),this.updateData(),this.doFocus(e)}[ve("$stepList .step")+_e()+Se()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),r=t.x,i=t.right,a=this.startXY.x+e;ai&&(a=i);var n=(a-r)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(n=Math.floor(n)),this.currentStep.setValue(n,t.width),this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${ur.toCSSColorString(e.colorsteps)})`}[K("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.colorsteps[0].color=e,this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[M("setImageUrl")](e){this.state.image&&(this.state.url=e,this.state.image.reset({url:e}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}class Ew extends X{initState(){return{value:this.props.value}}template(){return"
        "}[ae("$body")](){return{"data-column":this.props.column||1}}[G("$body")](){return Object.keys(ne).map(e=>{var t=ne[e],r=e===this.state.value?"selected":"";return`
        ${t}
        `})}getValue(){return this.state.value}setValue(e){this.state.value=e,this.refresh()}[z("$body .list-view-item")](e){var t=e.$dt.attr("data-key");e.$dt.onlyOneClass("selected"),this.updateData({value:t})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class Lw extends X{initState(){var e=this.props.values.split(" ").map(t=>+t);return{values:e,column:this.props.column}}template(){return"
        "}[ae("$body")](){return{cssText:` + display: grid; + grid-template-columns: repeat(${this.state.column}, 1fr); + grid-column-gap: 2px; + grid-row-gap: 2px; + `}}[G("$body")](){var{values:e}=this.state;return e.map((t,r)=>` +
        + +
        + `)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[ot("$body input")](e){var t=e.$dt,r=+t.attr("data-index"),i=+t.value;this.state.values[r]=i,this.updateData()}}class Vw extends X{initState(){var e=this.props.units||["px","em","%","auto"],t=p.parse(this.props.value||"0px");let r=this.props.label||"";return ne[r]&&(r=ne[r]),{removable:this.props.removable,label:r,compact:this.props.compact,wide:this.props.wide,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",disabled:this.props.disabled,title:this.props.title||"",units:e,value:t}}template(){return"
        "}[G("$body")+Ee](){var{min:e,max:t,step:r,label:i,title:a,compact:n,wide:o,removable:l,layout:c,disabled:h}=this.state,u=+this.state.value.value.toString();isNaN(u)&&(u=0);var d=c,v=(+u).toString();const g=this.state.units;return` +
        + ${i?``:""} +
        +
        + + + ${g.length===1?`${g[0]}`:O("SelectEditor",{ref:"$unit",key:"unit",compact:!0,value:this.state.selectedUnit||this.state.value.unit,options:this.state.units,onchange:"changeUnit"})} + + +
        +
        + +
        + `}getValue(){return this.state.value.clone()}setValue(e){var t;this.setState({value:p.parse(e)},!1),this.refs.$propertyNumber.val(this.state.value.value),(t=this.children.$unit)==null||t.setValue(this.state.value.unit)}disabled(){this.setState({disabled:!0})}enabled(){this.setState({disabled:!1})}[z("$remove")](){this.updateData({value:""})}getUnit(){var e;return((e=this.children.$unit)==null?void 0:e.getValue())||this.state.value.unit}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new p(0,this.getUnit()))}[ot("$body .property-number")](e){var t=+e.$dt.value;this.initValue(),this.updateData({value:new p(t,this.getUnit())})}[K("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}[po("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[Ms("$body input[type=number]")](){this.refs.$range.removeClass("focused")}[ve("$body .elf--input-range-editor label")+_e("moveDrag")+Se("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initNumberValue=+this.refs.$propertyNumber.value,this.initUnit=this.state.value.unit,this.initUnits=this.state.units,this.refs.$propertyNumber.focus(),this.refs.$propertyNumber.select()}moveDrag(e){let t=Math.floor(Ye(this.initNumberValue+e*this.state.step,100));t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:new p(t,this.getUnit())}),this.refs.$propertyNumber.val(this.state.value.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}class Hu extends X{initState(){var e=this.props.units||["px","em","%"],t=p.parse(this.props.value||0);return{removable:this.props.removable==="true",calc:this.props.calc==="true",compact:this.props.compact==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",units:e,value:t}}template(){return"
        "}[G("$body")](){var{min:e,max:t,step:r,label:i,removable:a,layout:n,compact:o}=this.state,l=+this.state.value.value.toString();isNaN(l)&&(l=0);var c=n,h=(+l).toString();if(this.state.units==="%")throw new Error("%");var u=this.state.units.map(d=>{let v=d;return v==="number"&&(v=""),{value:d,text:v}});return` +
        + ${i?``:""} +
        + +
        + + ${O("SelectEditor",{ref:"$unit",key:"unit",value:this.state.value.unit,options:u,onchange:"changeUnit"})} +
        +
        + +
        + `}getValue(){return this.state.value.clone()}setValue(e){this.setState({value:p.parse(e)})}[Yd('$body input[type="number"]')](){this.refs.$rangeArea.addClass("focused")}[Kd('$body input[type="number"]')](){this.refs.$rangeArea.removeClass("focused")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new p(0,this.children.$unit.getValue()))}[ot('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.initValue(),this.updateData({value:new p(e,this.children.$unit.getValue())})}[ot('$body input[type="range"]')](){this.trigger("changeRangeValue")}[ve('$body input[type="range"]')+Se()](){}end(){this.trigger("changeRangeValue")}[K("changeRangeValue")](){var e=+this.getRef("$property").value;this.refs.$propertyNumber.val(e),this.initValue(),this.updateData({value:new p(e,this.children.$unit.getValue())})}[K("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}}class Ow extends Hu{initState(){var e=this.props.value;e==="infinite"?e=new p(0,"infinite"):e=p.number(e);var t=this.props.units||["px","em","%"];return ie(b({},super.initState()),{key:this.props.key,params:this.props.params||"",units:t,value:e})}}class jw extends X{initState(){const[e,t,r]=(this.props.value||"").split(":");return{start:+(e||0),end:+(t||1),duration:+(r||1)}}refresh(){this.load(),this.children.$s.setValue(this.state.start*this.state.duration),this.children.$e.setValue(this.state.end*this.state.duration),this.children.$s.setMax(this.state.duration),this.children.$e.setMax(this.state.duration)}template(){const{start:e,end:t,duration:r}=this.state;return` +
        +
        +
        +
        +
        +
        +
        +
        + ${O("NumberRangeEditor",{ref:"$s",label:"Start",key:"start",min:0,max:r,step:.001,value:e*r,onchange:"changeValue"})} +
        +
        + ${O("NumberRangeEditor",{ref:"$e",label:"End",key:"end",min:0,max:r,step:.001,value:t*r,onchange:"changeValue"})} +
        +
        + `}[K("changeValue")](e,t){this.updateData({[e]:t/this.state.duration},!0)}[ve("$start")+_e("moveStart")](){this.rect=this.refs.$progress.rect(),this.pos=p.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=p.parse(this.refs.$end.css("left")).toPx(this.rect.width)}moveStart(e){var t=Math.min(this.max.value,Math.max(0,this.pos.value+e));this.state.start=t/this.rect.width,this.children.$s.setValue(this.state.start*this.state.duration),this.refresh(),this.updateData()}[ae("$start")](){return{"data-info":this.state.start,style:{left:p.percent((this.state.start||0)*100)}}}[ve("$end")+_e("moveStartForEnd")](){this.rect=this.refs.$progress.rect(),this.pos=p.parse(this.refs.$end.css("left")).toPx(this.rect.width),this.min=p.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=this.rect.width}moveStartForEnd(e){var t=Math.max(this.min.value,Math.min(this.max.value,this.pos.value+e));this.state.end=t/this.rect.width,this.children.$e.setValue(this.state.end*this.state.duration),this.refresh(),this.updateData()}[ae("$end")](){return{"data-info":this.state.end,style:{left:p.percent((this.state.end||1)*100)}}}[ae("$bar")](){const e=this.state.start||0,t=this.state.end||1;return{style:{left:p.percent(e*100),width:p.percent((t-e)*100)}}}getValue(){const{start:e,end:t,duration:r}=this.state;return`${e}:${t}:${r}`}setValue(e){const[t,r,i]=e.split(":");this.setState({start:Number(t),end:Number(r),duration:Number(i)})}updateData(e={},t=!1){this.setState(e,t),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}class Rw extends X{initState(){var e=+this.props.value;let t=this.props.label||"";ne[t]&&(t=ne[t]);const r=yi(this.props.compact)?this.props.compact:this.props.compact==="true",i=yi(this.props.wide)?this.props.wide:this.props.wide==="true",a=yi(this.props.mini)?this.props.mini:this.props.mini==="true",n=this.props.trigger||"input";return{label:t,compact:r,wide:i,mini:a,trigger:n,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
        "}[G("$body")+Ee](){var{min:e,max:t,step:r,label:i,type:a,layout:n,mini:o,compact:l,wide:c,disabled:h,removable:u}=this.state,d=this.state.value;isNaN(d)&&(d=0);var v=n,g=(+d).toString();return` +
        + ${i?``:""} +
        +
        + +
        +
        +
        + `}getValue(){return this.state.value||0}setValue(e){this.setState({value:e},!1),this.refs.$propertyNumber.val(this.state.value)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[po("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[Ms("$body input[type=number]")](){this.refs.$range.removeClass("focused")}updateValue(e){var t=+e.$dt.value;this.updateData({value:t})}isTriggerInput(){return this.state.trigger==="input"}isTriggerEnter(){return this.state.trigger==="enter"}[ot("$body input[type=number]")+fe("isTriggerInput")+He(500)](e){this.updateValue(e)}[tr("$body input[type=number]")+fe("isTriggerEnter")+Ts](e){this.updateValue(e),e.$dt.select()}[ve("$body label")+_e("moveDrag")+Se("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initValue=+this.refs.$propertyNumber.value}moveDrag(e){let t=Ye(this.initValue+e*this.state.step,1/this.state.step);t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:t}),this.refs.$propertyNumber.val(this.state.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}class zw extends X{initState(){var e=p.parse(this.props.value||p.number(0));return e=e.toUnit("number"),{removable:this.props.removable==="true",compact:this.props.compact==="true",wide:this.props.wide==="true",clamp:this.props.clamp==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
        "}[G("$body")](){var{min:e,max:t,step:r,label:i,removable:a,layout:n,compact:o,wide:l,disabled:c}=this.state,h=+this.state.value.value.toString();isNaN(h)&&(h=0);var u=n,d=(+h).toString();return` +
        + ${i?``:""} +
        +
        +
        + +
        +
        + +
        +
        +
        + +
        + `}setMin(e){this.setState({min:p.parse(e)})}setMax(e){this.setState({max:p.parse(e)})}getValue(){return this.state.clamp?this.state.value.clamp(this.state.min,this.state.max):this.state.value}setValue(e){console.log(e),this.setState({value:p.parse(e)})}[Yd('$body input[type="number"]')](){this.refs.$propertyNumber.addClass("focused")}[Kd('$body input[type="number"]')](){this.refs.$propertyNumber.removeClass("focused")}[z("$remove")](){this.updateData({value:""})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[ot('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.updateData({value:this.state.value.set(e)})}[ot('$body input[type="range"]')](){this.trigger("changeRangeValue")}[ve('$body input[type="range"]')+Se()](){}end(){this.trigger("changeRangeValue")}[K("changeRangeValue")](){var e=+this.getRef("$property").value;this.getRef("$propertyNumber").val(e),this.state.value===""&&(this.state.value=p.number(0)),this.updateData({value:this.state.value.set(e)})}}class Rt{constructor(){this.pathArray=[]}reset(){this.pathArray=[]}getPointString(e){return e.map(t=>`${t.x} ${t.y}`).join(" ")}makeString(e,t=[]){return this.pathArray.push(`${e} ${this.getPointString(t)}`),this}M(...e){return this.makeString("M",e)}L(...e){return this.makeString("L",e)}X(...e){const r=e[0],i={x:r.x-3,y:r.y-3},a={x:r.x+3,y:r.y-3},n={x:r.x-3,y:r.y+3},o={x:r.x+3,y:r.y+3};return this.M(i).L(o).M(a).L(n)}Q(...e){return this.makeString("Q",e)}C(...e){return this.makeString("C",e)}Z(){return this.makeString("Z")}get d(){return this.pathArray.join(" ").trim()}toString(e="object"){return``}}class Uu{constructor(e){this.viewport=e,this.segmentList=[]}get hasViewport(){return Boolean(this.viewport)}reset(){return this.segmentList=[],this}checkInViewport(e){if(!this.hasViewport)return!0;const t=this.viewport.applyVertexInverse([e.x,e.y,0]);return this.viewport.checkInViewport(t)}addLine(e,t){return this.hasViewport&&rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addGuideLine(e,t){return this.hasViewport&&rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,guide:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceLine(e,t){return this.hasViewport&&rr(e.x,e.y,t.x,t.y)<1?this:(this.segmentList.push({line:!0,distance:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceAngle(e,t,r,i,a,n){return this.segmentList.push({angle:!0,rx:t,ry:r,line:n,degree:i,center:e,last:a}),this}addPoint(e,t,r,i,a=!1){return this.checkInViewport(t)&&this.segmentList.push(ie(b({},e),{cx:t.x,cy:t.y,selected:a,index:r,segment:i,isFirst:t.isFirst,isLast:t.isLast,isSecond:t.isSecond})),this}addStartPoint(e,t){return this.checkInViewport(t)&&this.segmentList.push(ie(b({},e),{cx:t.x,cy:t.y,start:!0})),this}addCurvePoint(e,t,r,i=!1){return this.checkInViewport(e)&&this.segmentList.push({curve:!0,cx:e.x,cy:e.y,index:t,selected:i,segment:r,isFirst:e.isFirst,isLast:e.isLast,isSecond:e.isSecond}),this}addText(e,t){return this.segmentList.push({type:"text",cx:e.x,cy:e.y,text:t+""}),this}toString(){return this.segmentList.sort((e,t)=>e.line&&!t.line?-1:!e.line&&t.line?1:0),this.segmentList.map(e=>e.angle?` + `:e.line?` + `:e.text?"":e.curve&&e.segment!=="startPoint"?` + `:e.start?` + `:` + `).join("")}}const ql=["startPoint","endPoint","reversePoint"];function Kh(s,e,t,r,i){var a=s.filter(o=>o?Math.abs(o[e]-t)<=i:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));a.sort((o,l)=>o.distn).forEach(n=>{a.filter(o=>n[o]).forEach(o=>{var l=n[o],c=Math.abs(l[e]-t);c<=r&&i.push({dist:c,point:l})})}),i.sort((n,o)=>n.dist>o.dist?1:-1),i.length?i[0].point:null}function qh(s,e,t,r=1){for(var i=[],a=0,n=s.length;aDw(e,t,u,r)).join(" ");return{d:h}}function Dw(s,e,t,r=1){var{command:i,values:a}=t;switch(i){case"Z":return"Z";default:var n=a.map(o=>{var l=o.x-s===0?0:(o.x-s)/r,c=o.y-e===0?0:(o.y-e)/r;return`${l} ${c}`}).join(" ");return`${i} ${n}`}}function Fw(s,e){return!(s.x2.valuee.x||s.y.value>e.y)}class Bw{generatorPathString(e,t=0,r=0,i=1){return qh(e,t,r,i).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Rt,this.guideLineManager=new Rt,this.segmentManager=new Uu(null),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const r=this.points[t.index][t.key];if(!!r)return{x:r.x,y:r.y,key:t.key,index:r.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var r=[];if(this.points.forEach((i,a)=>{ql.forEach(n=>{const o=i[n];Fw(e,o)&&r.push({x:o.x,y:o.y,key:n,index:a})})}),t){r=r.map(o=>{const l=this.makeSegmentKey(o);return ie(b({},o),{included:Boolean(this.selectedPointKeys[l])})});const i=r.filter(o=>o.included),a=r.filter(o=>!o.included);let n=[...this.selectedPointList];i.length&&(n=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(i.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...n,...a)}else this.select(...r)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:r,key:i,index:a})=>({x:t,y:r,key:i,index:+a})),e.forEach(t=>{var r=this.makeSegmentKey(t);this.selectedPointKeys[r]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(r=>{ql.forEach(i=>{const{x:a,y:n}=r[i];t.push({x:a,y:n,key:i,index:r.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:r.x,y:r.y,key:e,index:t}):this.select(...this.selectedPointList.filter(i=>i.key!==e||i.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)&&this.select({x:r.x,y:r.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var r;var t=(r=this.points[e.index])==null?void 0:r[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var r=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[r]}commitTransformMatrix(e,t){var r=Xe([],[e.x,e.y,0],t);return{x:r[0],y:r[1]}}transformMat4(e){this.transformPoints.forEach((t,r)=>{var i=this.points[r];Object.assign(i.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(i.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(i.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:r,width:i,height:a}=this.transformRect,n=Mt();switch($t(n,n,[t,r,0]),e){case"flipX":Jr(n,n,[-1,1,1]),$t(n,n,[-i,0,0]);break;case"flipY":Jr(n,n,[1,-1,1]),$t(n,n,[0,-a,0]);break;case"flip":Jr(n,n,[-1,-1,1]),$t(n,n,[-i,-a,0]);break}$t(n,n,[-t,-r,0]),this.transformMat4(n)}initTransform(e){this.transformRect=ye(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:ye(t.startPoint),endPoint:ye(t.endPoint),reversePoint:ye(t.reversePoint)}))}setConnectedPoint(e,t){var r=this.state,i=r.dragXY.x+e,a=r.dragXY.y+t,n={x:i,y:a},o={x:i,y:a};r.dragPoints&&(r.reversePoint=U.getReversePoint(r.startPoint,n));var l={startPoint:r.startPoint,endPoint:n,curve:!!r.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=ye(e),r=ye(e),i={startPoint:e,endPoint:t,curve:!1,reversePoint:r,connected:!1,close:!1};this.points.push(i)}getPrevPoint(e){return U.getPrevPoint(this.points,e)}getIndexPoint(e){return U.getIndexPoint(this.points,e)}getNextPoint(e){return U.getNextPoint(this.points,e)}getConnectedPointList(e){return U.getConnectedPointList(this.points,e)}isFirst(e){return U.isFirst(e)}getLastPoint(e){return U.getLastPoint(this.points,e)}setCachePoint(e,t){var r=this.state;this.snapPointList=[],this.selectedIndex=e,r.connectedPoint=this.getPrevPoint(e),r.connectedPointList=ye(U.getConnectedPointList(this.points,this.selectedIndex)),r.connectedPoint&&!r.connectedPoint.connected&&(r.connectedPoint=null),r.segment=this.getIndexPoint(e),r.segment.connected&&(r.connectedPoint=this.getNextPoint(e));var i=this.isFirst(r.segment);if(i){var a=this.getLastPoint(e);a.connected&&(r.connectedPoint=a)}r.segmentKey=t,r.isCurveSegment=r.segment.curve&&r.segmentKey!="startPoint",r.originalSegment=ye(r.segment),r.connectedPoint&&(r.originalConnectedPoint=ye(r.connectedPoint)),r.cachedPoints=[],this.points.filter(n=>n&&n!=r.segment).forEach(n=>{r.cachedPoints.push(n.startPoint,n.reversePoint,n.endPoint)})}clamp(e,t,r){return wt(t)||wt(r)?e:Math.max(t,Math.min(r,e))}moveSegment(e,t,r,i=void 0,a=void 0,n=void 0){if(i){const h=this.points[i.index][e];h.x=this.clamp(i[e].x+t,0,a),h.y=this.clamp(i[e].y+r,0,n)}else{var o=this.state,l=o.originalSegment[e],c=o.segment[e];l&&(c.x=this.clamp(l.x+t,0,a),c.y=this.clamp(l.y+r,0,n))}}calculateToCurve(e,t,r){var i=(t.startPoint.x+r.startPoint.x)/2,a=(t.startPoint.y+r.startPoint.y)/2,n=(t.startPoint.x-i)/2,o=(t.startPoint.y-a)/2;return e.endPoint={x:e.startPoint.x+n,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-n,y:e.startPoint.y-o},{dx:n,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=ye(t.startPoint),t.endPoint=ye(t.startPoint),t.command==="M"){var r=U.getPrevPoint(this.points,t.index);r.connected&&(r.curve=!1,r.reversePoint=ye(r.startPoint),r.endPoint=ye(r.startPoint))}else{var i=this.getNextPoint(e);if(i&&i.command==="M"){var a=i;a.curve=!1,a.reversePoint=ye(a.startPoint),a.endPoint=ye(a.startPoint)}}else{t.curve=!0;var n=this.getPrevPoint(e),i=this.getNextPoint(e);if(i&&i.indexe&&i.command!=="M")this.calculateToCurve(t,i,n);else if(!i&&n){var o=(t.startPoint.x-n.startPoint.x)/3,l=(t.startPoint.y-n.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=U.getReversePoint(t.startPoint,t.endPoint)}else if(!n&&i){var o=(t.startPoint.x-i.startPoint.x)/3,l=(t.startPoint.y-i.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=U.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,r){var i=this.state;this.moveSegment(e,t,r);var a=e==="endPoint"?"reversePoint":"endPoint";i.segment[a]=U.getReversePoint(i.segment.startPoint,i.segment[e])}rotateSegmentTarget(e,t){var r=this.state;if(r.originalSegment&&r.segment){var{x:i,y:a}=r.originalSegment.startPoint,{x:n,y:o}=r.segment[e],{x:l,y:c}=r.originalSegment[t],{x:h,y:u}=qs(rt(n-i,o-a),rr(l,c,i,a),i,a);r.segment[t]={x:h,y:u}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,u,v,i=1){var a=this.state,n=a.cachedPoints,o=a.originalSegment[e];if(!e)return{dx:u,dy:v,snapPointList:[]};var l=o.x+u,c=o.y+v,{point:h,distanceValue:u}=Kh(n,"x",l,u,i),{point:d,distanceValue:v}=Kh(n,"y",c,v,i),g={x:o.x+u,y:o.y+v},y=[];return h&&y.push({startPoint:h,endPoint:g}),d&&y.push({startPoint:d,endPoint:g}),{dx:u,dy:v,snapPointList:y}}copySegment(e,t){t.startPoint=ye(e.startPoint),t.endPoint=ye(e.endPoint),t.reversePoint=ye(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.x=r.x+e,i.y=r.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t,r,i){this.selectedGroup.points.forEach(a=>{const n=this.points[a.index];n.startPoint.x=this.clamp(a.startPoint.x+e,0,r),n.startPoint.y=this.clamp(a.startPoint.y+t,0,i),n.endPoint.x=a.endPoint.x+e,n.endPoint.y=a.endPoint.y+t,n.reversePoint.x=a.reversePoint.x+e,n.reversePoint.y=a.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return U.getSplitedGroupList(this.points)}get groupList(){return U.getGroupList(this.points)}getGroup(e,t){return U.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(i=>i.groupIndex):(this.selectedPointList.forEach(i=>{const a=this.getGroup(t,i.index);a&&e.add(a.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.removed=!0});const e=U.splitPoints(this.points),t=U.recoverPoints(e.map(r=>r.filter(i=>!i.startPoint.removed).map(i=>(i.endPoint.removed&&(i.endPoint=ye(i.startPoint)),i.reversePoint.removed&&(i.reversePoint=ye(i.startPoint)),U.isEqual(i.endPoint,i.startPoint,i.reversePoint)&&(i.command="L",i.curve=!1),i))));this.points=t,this.select()}move(e,t,r,i,a){var n=this.state,{isCurveSegment:o,segmentKey:l,connectedPoint:c}=n;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t,i,a);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:h}=this.calculateSnap(l,e,t,3);if(this.snapPointList=h||[],o)if(r.altKey)this.moveSegment(l,e,t),this.rotateSegment(l);else if(r.shiftKey)this.moveSegment(l,e,t);else{this.moveSegment(l,e,t);var u=l==="endPoint"?"reversePoint":"endPoint";n.segment[u]=U.getReversePoint(n.segment.startPoint,n.segment[l])}else this.moveSegment("startPoint",e,t,null,i,a),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),r.altKey||n.connectedPointList.forEach(g=>{this.moveSegment("startPoint",e,t,g,i,a),this.moveSegment("endPoint",e,t,g),this.moveSegment("reversePoint",e,t,g)});c&&this.copySegment(n.segment,n.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t,i,a)}moveEnd(e,t){var r=this.state,i=this.points,a=r.dragXY.x+e,n=r.dragXY.y+t,o={x:a,y:n},l={x:a,y:n};r.dragPoints&&(l=U.getReversePoint(r.startPoint,o)),i.push({command:r.clickCount===0?"M":"",startPoint:r.startPoint,endPoint:o,curve:!!r.dragPoints,reversePoint:l}),r.startPoint=null,r.dragPoints=!1,r.moveXY=null}setPoint(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=U.getPoint(i,t),n=U.getPoint(i,r),o=[ie(b({},a),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},ie(b({},n),{reversePoint:e.second[2]})],l=U.getIndex(i,t);return i.splice(l,2,...o),this.points=i,l+1}setPointQuard(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=U.getPoint(i,t),n=U.getPoint(i,r);if(a.curve&&n.curve===!1){var o=[ie(b({},a),{endPoint:a.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=U.getIndex(i,t);i.splice(l,1,...o)}else{var o=[b({},a),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},ie(b({},n),{reversePoint:e.second[1],curve:!0})],l=U.getIndex(i,t);i.splice(l,2,...o)}return this.points=i,l+1}setPointLine(e){var t=e.first[0],r=this.clonePoints,i=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],a=U.getIndex(r,t);return r.splice(a+1,0,...i),this.points=r,a+1}toPath(e=0,t=0,r=1){return qh(this.clonePoints,e,t,r)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var r=Math.min(e.startPoint.x,t.startPoint.x),i=Math.max(e.startPoint.x,t.startPoint.x),a=Math.min(e.startPoint.y,t.startPoint.y),n=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:n},{x:i,y:n}).addDistanceLine({x:i,y:a},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:a},{x:r,y:n}).addDistanceLine({x:r,y:n},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(r.startPoint).L(r.endPoint).X(r.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:r,points:i},a)=>{const n=this.generatorPathString(i),o=kr(Y.fromSVGString(n).getBBox());return{points:i,startPointIndex:r,groupIndex:a,center:o[4],d:n}}),t=e.length;return` + + ${e.map(r=>{const{center:i}=r,[a,n]=i;return` + + + ${t>1&&` + ${r.groupIndex+1} + `} + `}).join("")} + + `}toSVGString(){return` + + ${this.guideLineManager.toString("guide")} + ${this.splitLines.join("")} + ${this.makeSnapLines()} + ${this.makePathArea()} + ${this.segmentManager.toString()} + + `}}function hi([s,e]){return{x:s,y:e}}function Zn(s,e){function t(i){if(e[0]e[1])return e[0]-i*(e[0]-e[1])}function r(i,a,n){const o=Math.min(i,a),l=Math.max(i,a);return(n-o)/(l-o)}return i=>{if(s[0]s[1])return t(1-r(s[0],s[1],i))}}const Nw=class extends X{convertToCurve(s){this.pathGenerator.convertToCurve(s),this.renderPath(),this.updatePathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[rn("$view [data-segment]")+fe("isEditableSegment")+Le](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}[qd("$view [data-segment]")+Le+Wd(300)](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}},Gw=class extends Nw{calculatePointOnLine(s,e){var t=new Y(s);return t.getClosedPoint(e)}[ve("$view .split-path")+_e()+Se()](s){this.initRect();var e=new Y(s.$dt.attr("d")),t={x:s.xy.x-this.state.rect.x,y:s.xy.y-this.state.rect.y},r=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current&&this.updatePathLayer();return}else{if(e.segments[1].command==="C"){var i=[hi(e.segments[0].values),hi(e.segments[1].values.slice(0,2)),hi(e.segments[1].values.slice(2,4)),hi(e.segments[1].values.slice(4,6))],a=vc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPoint(Aa(i,n))}else if(e.segments[1].command==="Q"){var i=[hi(e.segments[0].values),hi(e.segments[1].values.slice(0,2)),hi(e.segments[1].values.slice(2,4))],a=yc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointQuard(Da(i,n))}else if(e.segments[1].command==="L"){var i=[hi(e.segments[0].values),hi(e.segments[1].values.slice(0,2))],a=bc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointLine(Fa(i,n)),s.altKey&&this.pathGenerator.convertToCurve(r)}this.renderPath(),this.updatePathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(r,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",r)}}};class Hw extends Gw{initialize(){super.initialize(),this.pathParser=new Y,this.pathGenerator=new Bw(this)}initState(){return{domain:this.props.domain||[0,1],range:this.props.range||[1,0],isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}template(){return` +
        + + + + + + + + + + + +
        +
        + + + +
        +
        +
        `}[ae("$el")](){return{style:{height:p.px(this.props.height)||200}}}initRect(e=!1){(!this.state.rect||e||this.state.rect.width==0||this.state.rect.height==0)&&(this.state.rect=this.refs.$view.rect())}[M("PathEditorDone")](){this.updatePathLayer()}[tr()+Ts](){this.trigger("PathEditorDone")}[tr()+Oa](){this.state.current&&this.updatePathLayer()}[tr()+Lg](){console.log("delete")}[tr("$el .segment")](e){const t=+e.$dt.data("index");switch(console.log(t),e.code){case"Delete":case"Backspace":this.trigger("deleteSegment");break}}[K("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[K("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}recoverAreaToPath(e){this.initRect(!0);var t=new Y(e);return t.scaleFunc(this.state.domainScaleInvert,this.state.rangeScaleInvert),t.d}updatePathLayer(){var{d:e}=this.pathGenerator.toPath();const t=this.recoverAreaToPath(e);this.parent.trigger(this.props.onchange,this.state.key,t)}changeMode(e,t){this.setState(b({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[])}isMode(e){return this.state.mode===e}convertPathToArea(e){this.initRect(!0);const t=this.state.rect.width,r=this.state.rect.height;this.state.domainScale=Zn([0,1],[0,t]),this.state.rangeScale=Zn([1,0],[0,r]),this.state.domainScaleInvert=Zn([0,t],[0,1]),this.state.rangeScaleInvert=Zn([0,r],[1,0]),this.pathParser.reset(e.d).scaleFunc(this.state.domainScale,this.state.rangeScale)}refreshEditorView(e){this.convertPathToArea(e),this.pathGenerator.setPoints(this.pathParser.convertGenerator()),this.renderPath()}afterRender(){const{mode:e,value:t}=this.props,r={d:t};e==="move"&&(r.current=null,r.points=[]),this.changeMode(e,r),window.setTimeout(()=>{this.refreshEditorView(r,!0)},10)}[ae("$view")](){var r;const e=this.pathGenerator.makeSVGPath(),t=p.parse((r=this.state.current)==null?void 0:r["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[ae("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}renderPath(){this.bindData("$view")}get checkDistance(){return!1}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Et(Y.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[ca("$view")+Le](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=ge.create(e.target),r=t.hasClass("split-path");r?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[ve("$view :not(.split-path)")+Le+ri+_e()+Se()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y};var r=ge.create(e.target);if(this.$segmentTarget=r,r.hasClass("svg-editor-canvas")&&!t||(this.pathGenerator.reselect(),this.state.isSegment=r.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&r.attr("data-is-first")==="true",this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1),t){if(this.state.isFirstSegment){var i=+r.attr("data-index");this.state.startPoint=this.pathGenerator.points[i].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[i,a]=r.attrs("data-index","data-segment-point");const o=+i;this.pathGenerator.setCachePoint(o,a),this.pathGenerator.selectKeyIndex(a,o),this.state.segmentKey=a,this.renderPath()}}move(e,t){const r=this.$config.get("bodyEvent");if(this.state.segmentKey==="startPoint"){const i={x:Math.max(0,Math.min(this.state.rect.width,r.xy.x-this.state.rect.x)),y:Math.max(0,Math.min(this.state.rect.height,r.xy.y-this.state.rect.y))};e=i.x-this.state.dragXY.x,t=i.y-this.state.dragXY.y}this.isMode("segment-move")?(this.pathGenerator.move(e,t,r,this.state.rect.width,this.state.rect.height),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&rr(e,t,0,0)>=2&&(this.state.dragPoints=!r.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),de(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){this.$config.set("set.move.control.point",!1),this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current&&this.updatePathLayer()):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}}class Uw extends X{initState(){var e=new Y(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=e.$(".command"),r=t.attr("data-command");if(r==="Z"&&t.attr("data-toggle")==="false")return null;var i=e.$$(".values input[type=number]").map(a=>+a.value);return{command:r,values:i}}).filter(e=>e)}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPathData()}modifyPathData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new Y(e)})}getValue(){return this.state.parser.joinPath()}template(){return` +
        +
        +
        + `}[G("$data")](){var e=[];this.state.parser.segments.forEach((i,a)=>{var n=b({},i);e.push(n);var o=this.state.parser.segments[a+1];o&&o.command==="M"&&(n.command!=="Z"?e.push({command:"Z",toggle:!1,values:[]}):n.toggle=!0)});var t=this.state.parser.segments[this.state.parser.segments.length-1];t&&t.command!=="Z"&&e.push({command:"Z",toggle:!1,values:[]});var r=e.map(i=>{var a=i.command==="M"?"m":"";return` +
        +
        ${i.command}
        +
        + ${i.values.map(n=>``).join("")} + + ${i.command==="Z"?i.toggle===!1?"opened":"closed":""} +
        +
        + `});return r.unshift(` +
        +
        +
        + X + Y +
        +
        + `),r}[ot("$data input[type=number]")+He(300)](){this.updateData()}[z("$data .command[data-toggle]")](e){var[t,r]=e.$dt.attrs("data-command","data-toggle");t==="Z"&&(r!=="false"?r="false":r="true",e.$dt.attr("data-toggle",r),this.updateData())}}const Ww=/[\b\t ,]/g;class $s extends Y{constructor(e=""){super(e)}reset(e=""){this.segments=[],this.points=e,this.parse()}resetSegments(e=[]){this.segments=e,this.points=this.joinPoints()}parse(){var e=this.points;Array.isArray(e)&&(e=e.join(" "));for(var t=e.trim().split(Ww).filter(n=>n),r=[],i=0,a=t.length;i`${r.x},${r.y}`).join(" ")}each(e,t=!1){var r=this.segments.map(i=>e.call(this,i));if(t)return r;this.segments=r}_loop(e,t=!1){return this.each(function(r){var[i,a]=e([r.x,r.y],0);return r.x=i,r.y=a,r},t)}clone(){return new $s(this.joinPoints())}toString(){return this.joinPoints()}}class Xw extends X{initState(){var e=new $s(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=+e.$('[data-key="x"]').value,r=+e.$('[data-key="y"]').value;return{x:t,y:r}})}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPolygonData()}modifyPolygonData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new $s(e||"")})}getValue(){return this.state.parser.joinPoints()}template(){return` +
        +
        +
        + `}[G("$data")](){return this.state.parser.segments.map(e=>` +
        +
        + + +
        +
        + `)}[ot("$data input[type=number]")+He(300)](){this.updateData()}}class Yw extends X{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(n=>ct(n)?{value:n,text:n}:n):(this.props.options||"").split(e).map(n=>n.trim()).map(n=>{const[o,l]=n.split(":");return{value:o,text:l}}),r=this.props.icons||[],i=this.props.colors||[],a=this.props.value||"";return{label:this.props.label||"",compact:yi(this.props.compact)?this.props.compact:this.props.compact==="true",options:t,icons:r,colors:i,value:a,height:this.props.height}}template(){var{label:e,compact:t,height:r}=this.state,i=e?"has-label":"",a=t?"compact":"",n=r?`--elf--input-height: ${r}px;`:"";return` +
        + ${e?``:""} +
        +
        + `}[z("$close")](){this.updateData({value:""}),this.refresh()}getValue(){return this.state.value||""}setValue(e){this.setState({value:e})}[G("$options")+Ee](){return this.state.options.map((e,t)=>{var r=e.value,i=e.text,a=e.text,n="",o=r===this.state.value,l=o?"selected":"";if(e.value===""){var i="";a="close",ke(this.state.icons[t])&&(n="icon",i=c_(),r="__blank__")}else{var c=this.state.icons[t];ne[c]&&(n="icon"),a=i,i=ne[c]||i||c||e.text||e.value}var h=this.state.colors[t],u={};return o&&h&&(u["background-color"]=h),`
        ${i}
        `})}[z("$options .select-icon-item")](e){var t=e.$dt.attr("data-value");!t||t==="__blank__"||(this.updateData({value:t}),this.refresh())}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}const Qh=[[10,5],[5,1],[1,5],[.9],[15,10,5],[15,10,5,10],[15,10,5,10,15],[5,5,1,5]];class Kw extends X{initState(){var e=Ut(this.props.value)?this.props.value:this.generateValue(this.props.value||"");return{label:this.props.label||"",value:e,count:1}}template(){const{label:e}=this.state,t=!!e;return` +
        +
        + ${t?``:""} +
        + +
        +
        +
        +
        +
        + `}[z("$el .tools label")](){this.refs.$list.toggle()}getValue(){return this.state.value}generateValue(e){return e.split(" ").filter(Boolean).map(t=>+t)}setValue(e){Ut(e)||(e=this.generateValue(e)),this.setState({value:e})}[G("$list")](){return Qh.map((e,t)=>` +
        +
        + + + +
        +
        + `)}[G("$body")](){return this.state.count++,this.state.value.map((e,t)=>{var r=t+1;return` +
        + ${O("NumberInputEditor",{ref:`$dash-${this.state.count}-${r}`,compact:!0,key:t,value:e,min:0,max:100,step:1,onchange:"changeRangeEditor"})} + +
        + `})}[K("changeRangeEditor")](e,t){var r=+e;this.state.value[r]=t,this.modifyStrokeDashArray()}[z("$list .dash-sample")](e){const t=Qh[+e.$dt.data("index")];this.setState({value:t},!1),this.refresh(),this.modifyStrokeDashArray(),this.refs.$list.toggle()}[z("$add")](){this.setState({value:[...this.state.value,0]},!1),this.refresh(),this.modifyStrokeDashArray()}[z("$body .delete")](e){const t=+e.$dt.attr("data-index");this.state.value.splice(t,1),this.refresh(),this.modifyStrokeDashArray()}modifyStrokeDashArray(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[ve("document")](e){ge.create(e.target).closest("elf--stroke-dasharray-editor")||this.refs.$list.hide()}}class Zw extends X{initState(){var e=this.props.value;return{label:this.props.label||"",height:100,value:e}}template(){var{label:e,height:t,value:r}=this.state,i=e?"has-label":"";return` +
        + ${e?``:""} + +
        + `}getValue(){return this.refs.$options.value}setValue(e,t){this.setState({value:e},!1),t&&this.setState({height:t},!1),this.refresh()}[ae("$text")](){return{text:this.state.value||"",style:{height:this.state.height}}}[ot("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class qw extends X{initState(){var e=this.props.value;return{label:this.props.label||"",value:e}}template(){var{label:e,value:t}=this.state,r=e?"has-label":"";return` +
        + ${e?``:""} +
        + +
        +
        + `}getValue(){return this.refs.$text.value}setValue(e){this.refs.$text.val(e),this.setState({value:e},!1)}[ae("$text")](){return{value:this.state.value}}[ot("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}class wr extends sr{static parse(e){return new wr(e)}static parseStyle(e=""){var t=nn(e);e=e.trim();var r=t.str.split(",").filter(i=>i.trim()).map(i=>{var a=i.trim().split(" "),n=a.filter(l=>l.includes("@")).map(l=>Eo(l,t.matches)||"black"),o=a.filter(l=>!l.includes("@"));return wr.parse({color:n[0]||"rgba(0, 0, 0, 1)",offsetX:p.parse(o[0]||"0px"),offsetY:p.parse(o[1]||"0px"),blurRadius:p.parse(o[2]||"0px")})});return r}static join(e){return e.map(t=>wr.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"text-shadow",offsetX:"0px",offsetY:"0px",blurRadius:"0px",color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("offsetX","offsetY","blurRadius","color"))}convert(e){return e=super.convert(e),ut(e.offsetX)?e.offsetX=p.px(e.offsetX):e.offsetX&&(e.offsetX=p.parse(e.offsetX)),ut(e.offsetY)?e.offsetY=p.px(e.offsetY):e.offsetY&&(e.offsetY=p.parse(e.offsetY)),ut(e.blurRadius)?e.blurRadius=p.px(e.blurRadius):e.blurRadius&&(e.blurRadius=p.parse(e.blurRadius)),e}toCSS(){return{"text-shadow":this.toString()}}toString(){var{offsetX:e,offsetY:t,blurRadius:r,color:i}=this.json;return ut(e)&&(e=p.px(e)),ut(t)&&(t=p.px(t)),ut(r)&&(r=p.px(r)),`${e} ${t} ${r} ${i}`}}class Qw extends X{initState(){return{textShadows:wr.parseStyle(this.props.value)}}template(){return` +
        +
        +
        + `}[G("$shadowList")](){var e=this.state.textShadows.map((t,r)=>` +
        + + ${O("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:r,onchange:"changeKeyValue"})} + ${O("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:r,onchange:"changeKeyValue"})} +
        + +
        +
        + `);return e.join("")}modifyTextShadow(){var e=this.state.textShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e=""){e?this.state.textShadows=wr.parseStyle(e):this.state.textShadows.push(new wr),this.refresh(),this.modifyTextShadow()}[z("$add")](){this.trigger("add")}[yr("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$shadowList .shadow-item")+Le](){}sortItem(e,t,r){e.splice(r+(tt.trim()).map(t=>{let[r,i]=t.split(":");return r=r.replace("--",""),{key:r,value:i}});return{hideLabel:this.props.hideLabel=="true",params:this.props.params||"",values:e}}template(){var e=this.state.hideLabel?"hide":"";return` +
        +
        + +
        + +
        +
        +
        +
        `}[M("add")](){this.state.values.push({key:"",value:""}),this.refresh(),this.updateData()}[z("$add")](){this.trigger("add")}[G("$varList")](){return this.state.values.map((e,t)=>` +
        +
        + +
        +
        + +
        +
        + +
        +
        + `)}[z("$varList .del")](e){var t=+e.$dt.attr("data-index");this.state.values.splice(t,1),this.refresh(),this.updateData()}[ot("$varList input")](e){var t=+e.$dt.attr("data-index"),r=e.$dt.attr("data-type");this.state.values[t][r]=e.$dt.value,this.updateData()}updateData(){var e=this.state.values.map(t=>`${t.key}:${t.value}`).join(";");this.parent.trigger(this.props.onchange,e,this.props.params)}}var e5={BlendSelectEditor:rS,BoxShadowEditor:jS,ColorAssetsEditor:qP,ColorSingleEditor:QP,ColorViewEditor:JP,ComponentEditor:ew,CSSPropertyEditor:tw,CubicBezierEditor:rw,DirectionEditor:iw,FilterEditor:lw,FontSelectEditor:hw,GradientEditor:Iw,IconListViewEditor:Ew,InputArrayEditor:Lw,InputRangeEditor:Vw,IterationCountEditor:Ow,MediaProgressEditor:jw,NumberInputEditor:Rw,NumberRangeEditor:zw,PathEditor:Hw,PathDataEditor:Uw,PolygonDataEditor:Xw,RangeEditor:Hu,SelectEditor:uc,SelectIconEditor:Yw,StrokeDashArrayEditor:Kw,TextAreaEditor:Zw,TextEditor:qw,TextShadowEditor:Qw,VarEditor:Jw};function Wu(s){s.registerElement(e5),s.registerAlias({"icon-list-view":"IconListViewEditor","box-shadow":"BoxShadowEditor","text-shadow":"TextShadowEditor",component:"ComponentEditor","text-area":"TextAreaEditor",text:"TextEditor","color-single":"ColorSingleEditor","cubic-bezier":"CubicBezierEditor",path:"PathEditor","clip-path":"ClipPathEditor","color-view":"ColorViewEditor",var:"VarEditor","path-data":"PathDataEditor","polygon-data":"PolygonDataEditor","input-array":"InputArrayEditor","stroke-dash-array":"StrokeDashArrayEditor","number-input":"NumberInputEditor","number-range":"NumberRangeEditor","media-progress":"MediaProgressEditor","select-icon":"SelectIconEditor","css-property":"CSSPropertyEditor",direction:"DirectionEditor","iteration-count":"IterationCountEditor",gradient:"GradientEditor",filter:"FilterEditor",select:"SelectEditor","blend-select":"BlendSelectEditor",range:"RangeEditor","input-range":"InputRangeEditor","color-assets":"ColorAssetsEditor","font-select":"FontSelectEditor"})}var t5=[Su,Pu,wu,_u,Wu,I_];class r5 extends X{template(){return w("div",{class:"elf--context-menu-manger"},this.$injectManager.generate("context.menu"))}[M(du)](e){this.$context.config.set("context.menu.open",e)}}class i5 extends X{template(){return` + + + `}[G("$list")](){return Object.entries(ne).map(([e,t])=>ct(t)===!1?"":t.replace(/\{console.log(...e)}},o5=Object.freeze(Object.defineProperty({__proto__:null,default:n5},Symbol.toStringTag,{value:"Module"})),l5={command:"history.redo",execute:function(s){s.context.history.redo()}},c5=Object.freeze(Object.defineProperty({__proto__:null,default:l5},Symbol.toStringTag,{value:"Module"})),h5={command:"history.undo",execute:function(s){s.context.history.undo()}},d5=Object.freeze(Object.defineProperty({__proto__:null,default:h5},Symbol.toStringTag,{value:"Module"})),u5={command:"keymap.keydown",execute:function(s,e){s.context.keyboardManager.add(e.code,e.keyCode,e),s.context.shortcuts&&s.context.shortcuts.execute(e,"keydown")}},p5=Object.freeze(Object.defineProperty({__proto__:null,default:u5},Symbol.toStringTag,{value:"Module"})),g5={command:"keymap.keyup",execute:function(s,e){s.context.keyboardManager.remove(e.key,e.keyCode),s.context.shortcuts&&s.context.shortcuts.execute(e,"keyup")}},f5=Object.freeze(Object.defineProperty({__proto__:null,default:g5},Symbol.toStringTag,{value:"Module"})),m5={command:"moveToCenter",description:"Move Layer to Center on Viewport",execute:function(s,e,t=!1){e&&s.context.viewport.moveToCenter(e,t?-.2:0,t)}},v5=Object.freeze(Object.defineProperty({__proto__:null,default:m5},Symbol.toStringTag,{value:"Module"})),y5={command:"pop.mode.view",execute:function(s,e=void 0){s.context.modeViewManager.popMode(e)}},b5=Object.freeze(Object.defineProperty({__proto__:null,default:y5},Symbol.toStringTag,{value:"Module"})),x5={command:"push.mode.view",execute:function(s,e=js.CanvasView){s.context.modeViewManager.pushMode(e),s.emit("updateModeView")}},$5=Object.freeze(Object.defineProperty({__proto__:null,default:x5},Symbol.toStringTag,{value:"Module"})),_5={command:"recoverCursor",execute:function(s){s.context.config.set("editor.cursor","auto"),s.context.config.set("editor.cursor.args",[])}},S5=Object.freeze(Object.defineProperty({__proto__:null,default:_5},Symbol.toStringTag,{value:"Module"})),P5={command:"refreshCursor",execute:function(s,e,...t){s.context.config.set("editor.cursor",e),s.context.config.set("editor.cursor.args",t)}},w5=Object.freeze(Object.defineProperty({__proto__:null,default:P5},Symbol.toStringTag,{value:"Module"})),C5={command:"setLocale",execute:function(s,e){s.setLocale(e),s.emit("changed.locale")}},k5=Object.freeze(Object.defineProperty({__proto__:null,default:C5},Symbol.toStringTag,{value:"Module"})),T5={command:"toggleHandTool",execute:function(s){s.context.config.is("editing.mode",_t.HAND)?s.context.config.set("editing.mode",_t.SELECT):s.context.config.set("editing.mode",_t.HAND),s.emit("hideLayerAppendView")}},M5=Object.freeze(Object.defineProperty({__proto__:null,default:T5},Symbol.toStringTag,{value:"Module"})),I5={command:"zoom.default",execute:function(s){s.context.viewport.zoomDefault()}},E5=Object.freeze(Object.defineProperty({__proto__:null,default:I5},Symbol.toStringTag,{value:"Module"})),L5={command:"zoom.in",execute:function(s){s.context.viewport.zoomIn(.02)}},V5=Object.freeze(Object.defineProperty({__proto__:null,default:L5},Symbol.toStringTag,{value:"Module"})),O5={command:"zoom.out",execute:function(s){s.context.viewport.zoomOut(.02)}},j5=Object.freeze(Object.defineProperty({__proto__:null,default:O5},Symbol.toStringTag,{value:"Module"}));const R5={"./command_list/Console.js":o5,"./command_list/history.redo.js":c5,"./command_list/history.undo.js":d5,"./command_list/keymap.keydown.js":p5,"./command_list/keymap.keyup.js":f5,"./command_list/moveToCenter.js":v5,"./command_list/pop.mode.view.js":b5,"./command_list/push.mode.view.js":$5,"./command_list/recoverCursor.js":S5,"./command_list/refreshCursor.js":w5,"./command_list/setLocale.js":k5,"./command_list/toggle.tool.hand.js":M5,"./command_list/zoom.default.js":E5,"./command_list/zoom.in.js":V5,"./command_list/zoom.out.js":j5},Xu={};Object.entries(R5).forEach(([s,e])=>{s=s.replace("./command_list/","").replace(".js",""),Xu[s]=e.default});class Oo{static parse(e,t=!1){var[,r]=e.split("data:"),[i,...a]=r.split(","),[n,o]=i.split(";");return a=a.join(","),{mimeType:n,local:t&&Oo.getLink(n,o,a)}}static getLink(e,t,r){if(t==="base64"){for(var i=window.atob(r),a=i.length,n=new window.Uint8Array(a),o=0;o{i.images.forEach(a=>{r[`#${a.id}`]=a})}),Object.keys(r).map(i=>{var a=r[i],n=Oo.parse(a.original,!0);a.local=n.local}),t.forEach(i=>{i.layers=this.applyAsset(i.layers,r)}),t}applyAsset(e,t){return Array.isArray(e)?e=e.map(r=>this.applyAsset(r,t)):ti(e)?Object.keys(e).forEach(r=>{e[r]=this.applyAsset(e[r],t)}):ct(e)&&Object.keys(t).forEach(r=>{var i=t[r];e.indexOf(`#${i.id}`)>-1&&(e=e.replace(new RegExp(`#${i.id}`,"g"),i.local))}),e}}class A5{constructor(e){this.editor=e,this.commands=[]}log(){console.log(this.commands)}emit(...e){this.commands.push(e)}run(){this.editor.emit(this.commands)}add(e){this.commands=this.commands.concat(e.commands)}}class D5{constructor(e){return this.$editor=e,this.promiseProxy=this.localCommands={},this.loadCommands(),new Proxy(this,{get:(t,r)=>{var i=t[r];return de(i)?(...a)=>i.apply(t,a):this.makePromiseEvent(r)}})}loadCommands(e={}){Object.keys(e).forEach(t=>{de(e[t])?this.registerCommand(t,e[t]):this.registerCommand(e[t])})}registerCommand(e,t){if(this.localCommands[e])throw new Error(`command ${e} is already registered`);if(arguments.length===2){const r=(...i)=>{const a=t.call(this,this.$editor,...i);return this.$editor.debug("command execute",this,...i),a};r.source=e,this.localCommands[e]=r}else if(ti(e)){const r=(...i)=>{const a=e.execute.call(e,this.$editor,...i);return this.$editor.debug("command execute",e,...i),a};r.source=e.command,this.localCommands[e.command]=r}}getCallback(e){return this.localCommands[e]}makePromiseEvent(e){const t=this.getCallback(e);if(t)return(...r)=>new Promise(i=>{i(t(...r))})}executeCommand(e,t,...r){return this.$editor.context.stateManager.isPointerUp?(e=`history.${e}`,this.getCallback(e)(t,...r)):this.emit(e,...r)}emit(e,...t){const r=this.getCallback(e);if(r)return r(...t)}}class F5{constructor(e){this.editor=e,this.components={},this.inspectors={}}registerComponent(e,t){this.components[e]=t}registerInspector(e,t){this.inspectors[e]=t}isComponentClass(e){return!!this.getComponentClass(e)}getComponentClass(e){return this.components[e]||this.components.rect}getInspector(e){return this.inspectors[e]}createComponent(e,t={}){var r=this.getComponentClass(e);if(!r){console.warn(`${e} type is not valid.`);return}return new r(t)}createInspector(e,t=""){const r=this.getInspector(t||e.itemType);return de(r)?r(e)||[]:de(e.getProps)?e.getProps()||[]:[]}}class B5{constructor(e){this.editor=e,this.configList=[],this.config=new Map}load(){const e=this.editor.loadItem("config")||{};Object.keys(e).forEach(t=>{this.config.set(t,e[t])})}get(e){var t;return this.config.has(e)===!1&&this.config.set(e,(t=this.configList.find(r=>r.key==e))==null?void 0:t.defaultValue),this.config.get(e)}set(e,t,r=!0){const i=this.config.get(e);i!==t&&(this.config.set(e,t),this.editor.emit("config:"+e,t,i),r&&this.save())}push(e,t){const i=this.get(e).length;return this.setIndexValue(e,i,t),i}setIndexValue(e,t,r){const i=this.get(e);i[t]=r,this.set(e,[...i])}getIndexValue(e,t){return this.get(e)[t]}removeByIndex(e,t){const r=this.get(e);r.splice(t,1),this.set(e,[...r])}init(e,t){this.set(e,t,!1)}save(){const e={};this.configList.filter(t=>t.storage!=="none").forEach(t=>{e[t.key]=this.get(t.key)}),this.editor.saveItem("config",e)}setAll(e){Object.keys(e).forEach(t=>{this.set(t,e[t])})}getType(e){var t;return(t=this.configList.find(r=>r.key==e))==null?void 0:t.type}isType(e,t){return this.getType(e)===t}isBoolean(e){return this.isType(e,"boolean")}toggle(e){this.set(e,!this.get(e))}toggleWith(e,t,r){this.get(e)===t?this.set(e,r):this.set(e,t)}true(e){return this.get(e)===!0}false(e){return this.get(e)===!1}is(e,t){return this.get(e)===t}remove(e){this.config.delete(e),this.editor.emit("config:"+e)}registerConfig(e){this.config.set(e.key,e.defaultValue),this.configList.push(e)}}class N5{async load(e="default",...t){if(ne[e]){const r=de(ne[e])?ne[e].call(ne[e],...t):ne[e],i=new window.Blob([r],{type:"image/svg+xml"});return new Promise(a=>{const n=new window.FileReader;n.onload=o=>{const l=o.target.result;a(`url(${l}) 12 12, auto`)},n.readAsDataURL(i)})}else return e}}class G5{constructor(e){this.editor=e,this.locales={},this.fallbackLang="en_US"}getLang(e=void 0){return e||this.fallbackLang}setFallbackLang(e){this.fallbackLang=e}get(e,t={},r=void 0){var n,o;const i=this.getLang(r),a=((n=this.locales[i])==null?void 0:n[e])||((o=this.locales[this.fallbackLang])==null?void 0:o[e])||e||void 0;if(de(a))return a(t);{let l=a;return e===l?e.split(".").pop():(Object.entries(t).forEach(([c,h])=>{l=l.replace(new RegExp(`{${c}}`,"ig"),h)}),l)}}hasKey(e,t=void 0){const r=this.getLang(t);return!!(this.locales[r][e]||this.locales[this.fallbackLang][e])}registerI18nMessage(e,t){this.locales[e]||(this.locales[e]={}),Object.assign(this.locales[e],t)}}class H5{constructor(e){this.editor=e,this.iconMap={}}get(e,t){const r=this.iconMap[e];return de(r)?r(t):R(r||t.getIcon()||"rect")}set(e,t){this.iconMap[e]=t}registerIcon(e,t){this.set(e,t)}}class U5{constructor(e){this.editor=e,this.ui={}}registerUI(e,t={},r=1){this.ui[e]||(this.ui[e]=[]),Object.keys(t).forEach(i=>{const a=this.ui[e].find(n=>n.refClass===i);a?a.class=t[i]:this.ui[e].push({refClass:i,order:r,class:t[i]})})}getTargetUI(e){return this.ui[e]||[]}generate(e,t=!1){const r=this.getTargetUI(e);return r.sort((i,a)=>i.order===a.order?0:i.order>a.order?1:-1),r.map((i,a)=>{if(Ut(i.class))return w(...i.class);{const n={};return t&&(n.ref=`$${i.refClass}-${a}`),O(i.refClass,n)}}).join(` +`)}}class W5{constructor(e){this.editor=e,this.codeSet=new Set,this.keyCodeSet=new Set,this.event={}}add(e,t,r){this.codeSet.has(e)===!1&&this.codeSet.add(e),this.keyCodeSet.has(t)===!1&&this.keyCodeSet.add(t),this.event=r}remove(e,t){this.codeSet.delete(e),this.keyCodeSet.delete(t)}hasKey(e){return this.codeSet.has(e)||this.keyCodeSet.has(e)}check(...e){return e.some(t=>this.hasKey(t))}isShift(){return Boolean(this.event.shiftKey)}isCtrl(){return Boolean(this.event.ctrlKey)}isAlt(){return Boolean(this.event.altKey)}isMeta(){return Boolean(this.event.metaKey)}}class X5{constructor(e){this.editor=e,this.menus={}}registerMenu(e,t=[],r=1){this.menus[e]||(this.menus[e]=[]),Ut(t)||(t=[t]),t.forEach(i=>{this.menus[e].push(i)}),this.editor.emit("updateMenu",e)}getTargetMenu(e){return this.menus[e]||[]}}class Y5{constructor(e){this.editor=e,this.modes=[js.CanvasView]}pushMode(e){this.isCurrentMode(e)||this.modes.push(e)}popMode(e=void 0){e?this.isCurrentMode(e)&&this.modes.pop():this.modes.pop()}currentMode(){return this.modes[this.modes.length-1]}isCurrentMode(e){return this.currentMode()===e}}class K5{constructor(e){this.editor=e,this.plugins=[]}registerPlugin(e){this.plugins.push(e)}async initializePlugin(e={}){return await Promise.all(this.plugins.map(async t=>await t(this.editor,e)))}}class Z5{constructor(e){this.editor=e,this.renderers={},this.rendererTypes={}}getRenderType(e){return this.renderers[e]||(this.renderers[e]={}),this.renderers[e]}registerRenderer(e,t,r){const i=this.getRenderType(e);i[t]=r}registerRendererType(e,t){this.rendererTypes[e]=t}getRenderer(e){return this.rendererTypes[e]}getRendererInstance(e,t){return this.getRenderType(e)[t]}}var q5={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"CanvasView"},Q5=Object.freeze(Object.defineProperty({__proto__:null,default:q5},Symbol.toStringTag,{value:"Module"})),J5={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"LayerAppendView"},eC=Object.freeze(Object.defineProperty({__proto__:null,default:J5},Symbol.toStringTag,{value:"Module"})),tC={category:"Tool",key:"b",command:"addLayerView",args:["brush"],description:"Draw SVG Path",when:"CanvasView"},rC=Object.freeze(Object.defineProperty({__proto__:null,default:tC},Symbol.toStringTag,{value:"Module"})),iC={category:"Tool",key:"o",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},sC=Object.freeze(Object.defineProperty({__proto__:null,default:iC},Symbol.toStringTag,{value:"Module"})),aC={category:"Tool",key:"l",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},nC=Object.freeze(Object.defineProperty({__proto__:null,default:aC},Symbol.toStringTag,{value:"Module"})),oC={category:"Tool",key:"p",command:"addLayerView",args:["path"],description:"Add SVG Path layer",when:"CanvasView"},lC=Object.freeze(Object.defineProperty({__proto__:null,default:oC},Symbol.toStringTag,{value:"Module"})),cC={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"CanvasView"},hC=Object.freeze(Object.defineProperty({__proto__:null,default:cC},Symbol.toStringTag,{value:"Module"})),dC={category:"Tool",key:"m",command:"addLayerView",args:["rect"],description:"Add rect layer",when:"CanvasView"},uC=Object.freeze(Object.defineProperty({__proto__:null,default:dC},Symbol.toStringTag,{value:"Module"})),pC={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"LayerAppendView"},gC=Object.freeze(Object.defineProperty({__proto__:null,default:pC},Symbol.toStringTag,{value:"Module"})),fC={category:"Tool",key:"t",command:"addLayerView",args:["text"],description:"Add text layer",when:"CanvasView"},mC=Object.freeze(Object.defineProperty({__proto__:null,default:fC},Symbol.toStringTag,{value:"Module"})),vC={category:"Edit",key:"cmd+c",command:"clipboard.copy",description:"Copy objects",when:"CanvasView"},yC=Object.freeze(Object.defineProperty({__proto__:null,default:vC},Symbol.toStringTag,{value:"Module"})),bC={category:"Edit",key:"cmd+v",win:"ctrl+v",command:"clipboard.paste",description:"Paste selected objects",when:"CanvasView"},xC=Object.freeze(Object.defineProperty({__proto__:null,default:bC},Symbol.toStringTag,{value:"Module"})),$C={category:"Tool",key:"escape",command:"select.none",description:"None selection",when:"CanvasView"},_C=Object.freeze(Object.defineProperty({__proto__:null,default:$C},Symbol.toStringTag,{value:"Module"})),SC={category:"Group",key:"cmd+g",win:"ctrl+g",command:"group.item",description:"Grouping selected items",when:"CanvasView"},PC=Object.freeze(Object.defineProperty({__proto__:null,default:SC},Symbol.toStringTag,{value:"Module"})),wC={category:"History",key:"cmd+shift+z",win:"ctrl+shift+z",command:"history.redo",description:"redoing in history",when:"CanvasView"},CC=Object.freeze(Object.defineProperty({__proto__:null,default:wC},Symbol.toStringTag,{value:"Module"})),kC={category:"History",key:"cmd+z",win:"ctrl+z",command:"history.undo",description:"undoing in history",when:"CanvasView"},TC=Object.freeze(Object.defineProperty({__proto__:null,default:kC},Symbol.toStringTag,{value:"Module"})),MC={category:"Layer",key:"Alt+ArrowDown",command:"moveLayer",description:"move 5px to down",args:[0,5],when:"CanvasView"},IC=Object.freeze(Object.defineProperty({__proto__:null,default:MC},Symbol.toStringTag,{value:"Module"})),EC={category:"Layer",key:"Alt+ArrowLeft",command:"moveLayer",description:"move 5px to left",args:[-5,0],when:"CanvasView"},LC=Object.freeze(Object.defineProperty({__proto__:null,default:EC},Symbol.toStringTag,{value:"Module"})),VC={category:"Layer",key:"Alt+ArrowRight",command:"moveLayer",description:"move 5px to right",args:[5,0],when:"CanvasView"},OC=Object.freeze(Object.defineProperty({__proto__:null,default:VC},Symbol.toStringTag,{value:"Module"})),jC={category:"Layer",key:"Alt+ArrowUp",command:"moveLayer",description:"move 5px to up",args:[0,-5],when:"CanvasView"},RC=Object.freeze(Object.defineProperty({__proto__:null,default:jC},Symbol.toStringTag,{value:"Module"})),zC={category:"Layer",key:"[",command:"history.send.backward",description:"move layer to below",args:["send backward"],when:"CanvasView"},AC=Object.freeze(Object.defineProperty({__proto__:null,default:zC},Symbol.toStringTag,{value:"Module"})),DC={category:"Layer",key:"]",command:"history.bring.forward",description:"move layer to above",args:["bring forward"],when:"CanvasView"},FC=Object.freeze(Object.defineProperty({__proto__:null,default:DC},Symbol.toStringTag,{value:"Module"})),BC={category:"Layer",key:"ArrowDown",command:"moveLayer",description:"move 1px to down",args:[0,1],when:"CanvasView"},NC=Object.freeze(Object.defineProperty({__proto__:null,default:BC},Symbol.toStringTag,{value:"Module"})),GC={category:"Layer",key:"ArrowLeft",command:"moveLayer",description:"move 1px to left",args:[-1,0],when:"CanvasView"},HC=Object.freeze(Object.defineProperty({__proto__:null,default:GC},Symbol.toStringTag,{value:"Module"})),UC={category:"Layer",key:"ArrowRight",command:"moveLayer",description:"move 1px to right",args:[1,0],when:"CanvasView"},WC=Object.freeze(Object.defineProperty({__proto__:null,default:UC},Symbol.toStringTag,{value:"Module"})),XC={category:"Layer",key:"ArrowUp",command:"moveLayer",description:"move 1px to up",args:[0,-1],when:"CanvasView"},YC=Object.freeze(Object.defineProperty({__proto__:null,default:XC},Symbol.toStringTag,{value:"Module"})),KC={category:"Layer",key:"Shift+ArrowDown",command:"moveLayer",description:"move 10px to down",args:[0,10],when:"CanvasView"},ZC=Object.freeze(Object.defineProperty({__proto__:null,default:KC},Symbol.toStringTag,{value:"Module"})),qC={category:"Layer",key:"Shift+ArrowLeft",command:"moveLayer",description:"move 10px to left",args:[-10,0],when:"CanvasView"},QC=Object.freeze(Object.defineProperty({__proto__:null,default:qC},Symbol.toStringTag,{value:"Module"})),JC={category:"Layer",key:"Shift+ArrowRight",command:"moveLayer",description:"move 10px to right",args:[10,0],when:"CanvasView"},ek=Object.freeze(Object.defineProperty({__proto__:null,default:JC},Symbol.toStringTag,{value:"Module"})),tk={category:"Layer",key:"Shift+ArrowUp",command:"moveLayer",description:"move 10px to up",args:[0,-10],when:"CanvasView"},rk=Object.freeze(Object.defineProperty({__proto__:null,default:tk},Symbol.toStringTag,{value:"Module"})),ik={category:"Layer",key:"Meta+ArrowLeft",command:"rotateLayer",description:"rotate to left",args:[-5],when:"CanvasView"},sk=Object.freeze(Object.defineProperty({__proto__:null,default:ik},Symbol.toStringTag,{value:"Module"})),ak={category:"Layer",key:"Meta+ArrowRight",command:"rotateLayer",description:"rotate to right",args:[5],when:"CanvasView"},nk=Object.freeze(Object.defineProperty({__proto__:null,default:ak},Symbol.toStringTag,{value:"Module"})),ok={category:"Layer",key:"Backspace",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},lk=Object.freeze(Object.defineProperty({__proto__:null,default:ok},Symbol.toStringTag,{value:"Module"})),ck={category:"Layer",key:"Delete",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},hk=Object.freeze(Object.defineProperty({__proto__:null,default:ck},Symbol.toStringTag,{value:"Module"})),dk={category:"Path",key:"Backspace",command:"segment.delete",description:"Delete selected segment",when:"PathEditorView"},uk=Object.freeze(Object.defineProperty({__proto__:null,default:dk},Symbol.toStringTag,{value:"Module"})),pk={category:"Path",key:"Alt+ArrowDown",command:"segment.move.down",description:"move 5px to down",args:[{dy:5}],when:"PathEditorView"},gk=Object.freeze(Object.defineProperty({__proto__:null,default:pk},Symbol.toStringTag,{value:"Module"})),fk={category:"Path",key:"Alt+ArrowLeft",command:"segment.move.left",description:"move 5px to left",args:[{dx:5}],when:"PathEditorView"},mk=Object.freeze(Object.defineProperty({__proto__:null,default:fk},Symbol.toStringTag,{value:"Module"})),vk={category:"Path",key:"Alt+ArrowRight",command:"segment.move.right",description:"move 5px to right",args:[{dx:5}],when:"PathEditorView"},yk=Object.freeze(Object.defineProperty({__proto__:null,default:vk},Symbol.toStringTag,{value:"Module"})),bk={category:"Path",key:"Alt+ArrowUp",command:"segment.move.up",description:"move 5px to up ",args:[{dy:5}],when:"PathEditorView"},xk=Object.freeze(Object.defineProperty({__proto__:null,default:bk},Symbol.toStringTag,{value:"Module"})),$k={category:"Path",key:"ArrowDown",command:"segment.move.down",description:"move 1px to down",args:[{dy:1}],when:"PathEditorView"},_k=Object.freeze(Object.defineProperty({__proto__:null,default:$k},Symbol.toStringTag,{value:"Module"})),Sk={category:"Path",key:"ArrowLeft",command:"segment.move.left",description:"move 1px to left",args:[{dx:1}],when:"PathEditorView"},Pk=Object.freeze(Object.defineProperty({__proto__:null,default:Sk},Symbol.toStringTag,{value:"Module"})),wk={category:"Path",key:"ArrowRight",command:"segment.move.right",description:"move 1px to right",args:[{dx:1}],when:"PathEditorView"},Ck=Object.freeze(Object.defineProperty({__proto__:null,default:wk},Symbol.toStringTag,{value:"Module"})),kk={category:"Path",key:"ArrowUp",command:"segment.move.up",description:"move 1px to up",args:[{dy:1}],when:"PathEditorView"},Tk=Object.freeze(Object.defineProperty({__proto__:null,default:kk},Symbol.toStringTag,{value:"Module"})),Mk={category:"Path",key:"Shift+ArrowDown",command:"segment.move.down",description:"move 10px to down",args:[{dy:10}],when:"PathEditorView"},Ik=Object.freeze(Object.defineProperty({__proto__:null,default:Mk},Symbol.toStringTag,{value:"Module"})),Ek={category:"Path",key:"Shift+ArrowLeft",command:"segment.move.left",description:"move 10px to left",args:[{dx:10}],when:"PathEditorView"},Lk=Object.freeze(Object.defineProperty({__proto__:null,default:Ek},Symbol.toStringTag,{value:"Module"})),Vk={category:"Path",key:"Shift+ArrowRight",command:"segment.move.right",description:"move 10px to right",args:[{dx:10}],when:"PathEditorView"},Ok=Object.freeze(Object.defineProperty({__proto__:null,default:Vk},Symbol.toStringTag,{value:"Module"})),jk={category:"Path",key:"Shift+ArrowUp",command:"segment.move.up",description:"move 10px to up",args:[{dy:10}],when:"PathEditorView"},Rk=Object.freeze(Object.defineProperty({__proto__:null,default:jk},Symbol.toStringTag,{value:"Module"})),zk={category:"Tool",key:"CMD+A",win:"CTRL+A",command:"select.all",description:"Selection all layers"},Ak=Object.freeze(Object.defineProperty({__proto__:null,default:zk},Symbol.toStringTag,{value:"Module"})),Dk={category:"Tool",key:"v",command:"addLayerView",args:["select"],description:"Selection"},Fk=Object.freeze(Object.defineProperty({__proto__:null,default:Dk},Symbol.toStringTag,{value:"Module"})),Bk={category:"Tools",key:"h",command:"toggleHandTool",description:"set hand tool on",when:"CanvasView"},Nk=Object.freeze(Object.defineProperty({__proto__:null,default:Bk},Symbol.toStringTag,{value:"Module"})),Gk={category:"Tools",key:"h",command:"toggleHandTool",description:"set hand tool on",when:"LayerAppendView"},Hk=Object.freeze(Object.defineProperty({__proto__:null,default:Gk},Symbol.toStringTag,{value:"Module"})),Uk={category:"Tool",key:"space",command:"showPan",description:"Show panning area",when:"CanvasView"},Wk=Object.freeze(Object.defineProperty({__proto__:null,default:Uk},Symbol.toStringTag,{value:"Module"})),Xk={category:"Group",key:"shift+cmd+g",win:"shift+ctrl+g",command:"ungroup.item",description:"Ungrouping selected group layer",when:"CanvasView"},Yk=Object.freeze(Object.defineProperty({__proto__:null,default:Xk},Symbol.toStringTag,{value:"Module"})),Kk={category:"View",key:"0",command:"zoom.default",description:"zoom by scale 1",when:"CanvasView"},Zk=Object.freeze(Object.defineProperty({__proto__:null,default:Kk},Symbol.toStringTag,{value:"Module"})),qk={category:"View",key:"Equal",command:"zoom.in",description:"zoom in",when:"CanvasView"},Qk=Object.freeze(Object.defineProperty({__proto__:null,default:qk},Symbol.toStringTag,{value:"Module"})),Jk={category:"View",key:"minus",command:"zoom.out",description:"zoom Out",when:"CanvasView"},eT=Object.freeze(Object.defineProperty({__proto__:null,default:Jk},Symbol.toStringTag,{value:"Module"}));const tT={"./shortcuts_list/add.artboard.js":Q5,"./shortcuts_list/add.artboard.pan.js":eC,"./shortcuts_list/add.brush.js":rC,"./shortcuts_list/add.circle.js":sC,"./shortcuts_list/add.circle.l.js":nC,"./shortcuts_list/add.path.js":lC,"./shortcuts_list/add.rect.js":hC,"./shortcuts_list/add.rect.m.js":uC,"./shortcuts_list/add.rect.pan.js":gC,"./shortcuts_list/add.text.js":mC,"./shortcuts_list/clipboard.copy.js":yC,"./shortcuts_list/clipboard.paste.js":xC,"./shortcuts_list/escape.js":_C,"./shortcuts_list/group.item.js":PC,"./shortcuts_list/history.redo.js":CC,"./shortcuts_list/history.undo.js":TC,"./shortcuts_list/item.move.alt.down.js":IC,"./shortcuts_list/item.move.alt.left.js":LC,"./shortcuts_list/item.move.alt.right.js":OC,"./shortcuts_list/item.move.alt.up.js":RC,"./shortcuts_list/item.move.depth.down.js":AC,"./shortcuts_list/item.move.depth.up.js":FC,"./shortcuts_list/item.move.key.down.js":NC,"./shortcuts_list/item.move.key.left.js":HC,"./shortcuts_list/item.move.key.right.js":WC,"./shortcuts_list/item.move.key.up.js":YC,"./shortcuts_list/item.move.shift.down.js":ZC,"./shortcuts_list/item.move.shift.left.js":QC,"./shortcuts_list/item.move.shift.right.js":ek,"./shortcuts_list/item.move.shift.up.js":rk,"./shortcuts_list/item.rotate.meta.left.js":sk,"./shortcuts_list/item.rotate.meta.right.js":nk,"./shortcuts_list/removeLayer.js":lk,"./shortcuts_list/removeLayerByDeleteKey.js":hk,"./shortcuts_list/segment.delete.js":uk,"./shortcuts_list/segment.move.alt.down.js":gk,"./shortcuts_list/segment.move.alt.left.js":mk,"./shortcuts_list/segment.move.alt.right.js":yk,"./shortcuts_list/segment.move.alt.up.js":xk,"./shortcuts_list/segment.move.key.down.js":_k,"./shortcuts_list/segment.move.key.left.js":Pk,"./shortcuts_list/segment.move.key.right.js":Ck,"./shortcuts_list/segment.move.key.up.js":Tk,"./shortcuts_list/segment.move.shift.down.js":Ik,"./shortcuts_list/segment.move.shift.left.js":Lk,"./shortcuts_list/segment.move.shift.right.js":Ok,"./shortcuts_list/segment.move.shift.up.js":Rk,"./shortcuts_list/select.all.js":Ak,"./shortcuts_list/select.view.js":Fk,"./shortcuts_list/set.tool.hand.js":Nk,"./shortcuts_list/set.tool.hand.m.js":Hk,"./shortcuts_list/show.pan.js":Wk,"./shortcuts_list/ungroup.item.js":Yk,"./shortcuts_list/zoom.default.js":Zk,"./shortcuts_list/zoom.in.js":Qk,"./shortcuts_list/zoom.out.js":eT};var Pc=Object.values(tT).map(s=>s.default);function qn(...s){return s.filter(Boolean).join("+")}function Jh(s){return Es[`${s}`.toLowerCase()]||s}class rT{constructor(e){this.$editor=e,this.loadShortCuts()}getGeneratedKeyCode(e){return Jh(e)}loadShortCuts(){this.list=[],this.commands={},Pc.forEach(e=>{this.registerShortCut(e)}),this.sort()}registerShortCut(e){const t=oc();this.list.push(ie(b({key:"",command:"",args:[],eventType:"keydown"},e),{checkKeyString:this.splitShortCut(e[t]||e.key),whenFunction:this.makeWhenFunction(e.command,e.when||!0)})),this.sort()}makeWhenFunction(e,t){if(yi(t)&&t)return()=>!0;const r=this.$editor,i=t.split("|").map(a=>a.trim());return()=>i.some(a=>r.context.modeViewManager.isCurrentMode(a))}sort(){this.commands={},this.list.forEach(e=>{Array.isArray(this.commands[e.checkKeyString])===!1&&(this.commands[e.checkKeyString]=[]),this.commands[e.checkKeyString].push(e)})}splitShortCut(e){var t=e.toUpperCase().split("+").map(l=>l.trim()).filter(Boolean);let r=!1,i=!1,a=!1,n=!1,o=[];return t.forEach(l=>{l.includes("ALT")?r=!0:l.includes("CTRL")?i=!0:l.includes("SHIFT")?a=!0:l.includes("CMD")||l.includes("WIN")||l.includes("META")?n=!0:o.push(l)}),qn(r?"ALT":"",i?"CTRL":"",a?"SHIFT":"",n?"META":"",Jh(o.join("")))}makeKeyString(e){return qn(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.key.toUpperCase())}makeCodeString(e){return qn(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.code.toUpperCase())}makeKeyCodeString(e){return qn(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.keyCode)}checkShortCut(e,t,r){return this.commands[e]||this.commands[t]||this.commands[r]}checkWhen(e){return e.whenFunction()}execute(e,t="keydown"){let r=this.checkShortCut(this.makeKeyCodeString(e),this.makeKeyString(e),this.makeCodeString(e));if(r){const i=r.filter(a=>a.eventType===t).filter(a=>this.checkWhen(a));i.length&&i.forEach(a=>{this.$editor.context.commands.emit(a.command,...a.args)})}}}class iT{constructor(e){this.editor=e}get config(){return this.editor.context.config}get zIndex(){return this.popupZIndex++}get isPointerUp(){const e=this.config.get("bodyEvent");return!e||e.type==="pointerup"?!0:e.type==="pointermove"&&e.buttons===0}get isPointerDown(){return!this.isPointerUp}get isPointerMove(){return this.config.get("bodyEvent")?this.config.get("bodyEvent").type==="pointermove":!1}}class sT{constructor(e){this.editor=e,this.customAssetKey="custom-assets"}async getCustomAssetList(){let e=!1;const t=(this.editor.loadItem(this.customAssetKey)||[]).map(r=>(r.id||(r.id=Ls(),e=!0),r));return e&&await this.setCustomAssetList(t),t}async setCustomAssetList(e){this.editor.saveItem(this.customAssetKey,e)}async getCustomAsset(e){const r=(await this.getCustomAssetList()).find(i=>i.id===e);return r&&r.component?r.component:null}async saveCustomAsset(e=""){const t=this.editor.context.selection.current;if(t){const r=await this.getCustomAssetList(),i=await this.editor.json.render(t);i.x=0,i.y=0,await this.setCustomAssetList([...r,{id:Ls(),preview:e,component:i}])}}async removeCustomAsset(e){const t=await this.getCustomAssetList();await this.setCustomAssetList(t.filter(r=>r.id!==e))}}class aT{constructor(e){this.editor=e,this.context=this.editor.context,this.canvasSize=null,this.cachedViewport=mt(0,0,0,0),this.mouse=ei(),this.scaleMax=1e5,this.scale=1,this.translate=ei(),this.transformOrigin=ei(),this.maxScale=25,this.minScale=.02,this.zoomFactor=1,this.resetWorldMatrix()}setTransformOrigin(e){this.transformOrigin=e,this.resetWorldMatrix()}setTransformOriginWithTranslate(e){const t=Wt(this.transformOrigin);this.setTransformOrigin(e),this.setTranslate(Pe([],this.translate,$e([],t,e)))}setScale(e){this.scale=Math.min(Math.max(this.minScale,e),this.maxScale),this.scaleMax=this.scale*1e5,this.resetWorldMatrix()}setTranslate(e){this.translate=e,this.resetWorldMatrix()}resetWorldMatrix(){this.translate=this.translate.map(e=>+e.toFixed(4)),this.transformOrigin=this.transformOrigin.map(e=>+e.toFixed(4)),this.scale=+this.scale.toFixed(4),this.matrix=er(ht([],this.translate),ht([],this.transformOrigin),jr([],[this.scale,this.scale,1]),ht([],qt([],this.transformOrigin))),this.matrixInverse=Ot([],this.matrix),this.scaleMatrix=er(jr([],[this.scale,this.scale,1])),this.scaleMatrixInverse=Ot([],this.scaleMatrix),this.refresh()}refreshCanvasSize(e){if(this.canvasSize){this.canvasSize=e,this.cachedViewport=mt(0,0,this.canvasSize.width,this.canvasSize.height);const t=Xe([],[this.canvasSize.width,this.canvasSize.height,0],this.scaleMatrixInverse),r=Pe([],this.verties[0],[t[0]/2,t[1]/2,0]),i=Hi([],er(this.matrix,Wi(ht([],r),this.scaleMatrix,Ot([],ht([],r)))));this.setTranslate(i),this.setTransformOrigin(r)}else this.canvasSize=e,this.cachedViewport=mt(0,0,this.canvasSize.width,this.canvasSize.height),this.setTransformOrigin([this.canvasSize.width/2,this.canvasSize.height/2,0]);this.editor.emit(it)}refresh(){this.cachedViewport&&(this.verties=oe(this.cachedViewport,this.matrixInverse),this.originVerties=this.verties.filter((e,t)=>t<4),this.originRect=Et(this.originVerties))}getWorldPosition(e){return e=e||this.context.config.get("bodyEvent"),e?this.createWorldPosition(e.clientX,e.clientY):this.createWorldPosition(0,0)}createWorldPosition(e,t){if(!this.canvasSize)return ei();const r={x:e-this.canvasSize.x,y:t-this.canvasSize.y},i=this.verties[0][0]+(this.verties[2][0]-this.verties[0][0])*(r.x/this.canvasSize.width),a=this.verties[0][1]+(this.verties[2][1]-this.verties[0][1])*(r.y/this.canvasSize.height);return[i,a,0]}setMousePoint(e,t){this.mouse=this.createWorldPosition(e,t),this.setTransformOriginWithTranslate(te([],this.verties[0],this.verties[2],.5)),this.editor.emit(it)}zoom(e){const t=this.scale,r=t*e;this.setScale(r);const i=this.scale/t;this.zoomFactor=i,i!==1&&(this.setTransformOriginWithTranslate(te([],this.mouse,this.transformOrigin,1/e)),this.editor.emit(it))}pan(e,t,r=0){this.setTransformOriginWithTranslate(Pe([],this.transformOrigin,[e,t,0])),this.editor.emit(it)}moveToCenter(e,t=-.2,r=!0){if(!this.canvasSize)return;const i=te([],e[0],e[2],.5),a=se(e[0],e[1]),n=se(e[0],e[3]),o=te([],this.verties[0],this.verties[2],.5),l=se(this.verties[0],this.verties[1]),c=se(this.verties[0],this.verties[3]),h=r?Math.min(l/a,c/n)+t:1;this.setTranslate(Pe([],this.translate,$e([],o,i))),this.setTransformOrigin(i),this.setScale(this.scale*h),this.editor.emit(it)}get pos(){const e=(this.mouse[0]-this.verties[0][0])/(this.verties[2][0]-this.verties[0][0])*100,t=(this.mouse[1]-this.verties[0][1])/(this.verties[2][1]-this.verties[0][1])*100;return[e,t,0]}get minX(){return this.verties[0][0]}get maxX(){return this.verties[2][0]}get minY(){return this.verties[0][1]}get maxY(){return this.verties[2][1]}get center(){return this.verties[4]}get height(){return this.maxY-this.minY}get width(){return this.maxX-this.minX}get pixelSize(){return Math.round(this.width/this.canvasSize.width)}checkInViewport(e){const t=this.minX{const r=e[t];Object.defineProperty(this.context,t,{value:new r(this),writable:!1})})}initStorage(){this.locale=this.loadItem("locale")||"en_US",this.layout=this.loadItem("layout")||"all"}createProject(){return this.createModel({itemType:"project"})}getI18nMessage(e,t={},r){return this.context.i18n.get(e,t,r||this.locale)}$i18n(e,t={},r){return this.getI18nMessage(e,t,r)}hasI18nkey(e,t){return this.context.i18n.hasKey(e,t||this.locale)}initI18nMessage(e=""){return(t,r={},i)=>{const a=`${e}.${t}`;return this.hasI18nkey(a,i)?this.context.i18(`${e}.${t}`,r,i):this.context.i18(`${t}`,r,i)}}setLocale(e="en_US"){this.locale=e,this.saveItem("locale",this.locale)}setUser(e){this.user=e}async initPlugins(e={}){await this.context.pluginManager.initializePlugin(e)}themeValue(e,t=""){return lT[this.context.config.get("editor.theme")][e]||t}get zIndex(){return this.popupZIndex++}getFile(e){return this.images[e]||e}setStore(e){this.store=e}emit(...e){this.context.store.source=this.EDITOR_ID,this.context.store.emit(...e)}on(...e){const[t,r,i,...a]=e;return this.context.store.on(t,r,i||this,...a)}off(...e){this.context.store.off(...e)}offAll(...e){this.context.store.offAll(...e)}debug(){}command(e,t,...r){return console.warn("command",e,t,r),this.context.stateManager.isPointerUp?this.context.store.emit(`history.${e}`,t,...r):this.context.store.emit(e,...r)}nextTick(e,t=0){this.context.store&&window.setTimeout(()=>{this.context.store.nextTick(e)},t)}get(e){return this.context.modelManager.get((e==null?void 0:e.id)||e)}replaceLocalUrltoRealUrl(e){var t=this.context.selection.currentProject,r={};return t.images.forEach(i=>{e.indexOf(i.local)>-1&&(r[i.local]=i.original)}),Object.keys(r).forEach(i=>{e.indexOf(i)>-1&&(e=e.replace(new RegExp(i,"g"),r[i]))}),e}createModel(e,t=!0){return this.context.modelManager.createModel(e,t)}searchItem(e){return this.context.modelManager.searchItem(e)}get storeKey(){return`__els__.${this.context.config.get("store.key")}`}saveItem(e,t){window.localStorage.setItem(`${this.storeKey}.${e}`,JSON.stringify(t))}loadItem(e){return JSON.parse(window.localStorage.getItem(`${this.storeKey}.${e}`)||JSON.stringify(""))}createCommandMaker(){return new A5(this)}registerElement(e){Os(e)}registerAlias(e){Object.entries(e).forEach(([t,r])=>{$g(t,r)})}registerUI(e,t={},r=1){this.context.injectManager.registerUI(e,t,r),this.registerElement(t)}isComponentClass(e){return this.context.components.isComponentClass(e)}registerComponent(e,t){this.context.components.registerComponent(e,t)}registerItem(e,t){this.registerComponent(e,t)}registerInspector(e,t){this.context.components.registerInspector(e,t)}registerRenderer(e,t,r){this.context.renderers.registerRenderer(e,t,r)}registerRendererType(e,t){this.context.renderers.registerRendererType(e,t)}getRendererInstance(e,t){return this.context.renderers.getRendererInstance(e,t)}renderer(e){return this.context.renderers.getRenderer(e)}get json(){return this.renderer("json")}loadCommands(e){return this.context.commands.loadCommands(e)}registerCommand(e){return this.context.commands.registerCommand(e)}registerShortCut(e){this.context.shortcuts.registerShortCut(e)}registerPlugin(e){this.context.pluginManager.registerPlugin(e)}registerPluginList(e=[]){e.forEach(t=>this.registerPlugin(t))}registerConfig(e){this.context.config.registerConfig(e)}registerI18nMessage(e,t){this.context.i18n.registerI18nMessage(e,t)}registerI18nMessageWithLocale(e){Object.entries(e).forEach(([t,r])=>{this.registerI18nMessage(t,r)})}registerIcon(e,t){this.context.icon.registerIcon(e,t)}registerMenu(e,t){this.context.menuManager.registerMenu(e,t)}}const ed={x:0,y:0},hT={x:Number.MAX_SAFE_INTEGER,y:Number.MAX_SAFE_INTEGER},td=0;class dT extends X{async created(){this.$editor.registerManager(this.getManagers()),this.$editor.registerPluginList(this.getPlugins()),Array.isArray(this.opt.plugins)&&this.$editor.registerPluginList(this.opt.plugins),await this.$editor.initPlugins(),this.$config.load(),ti(this.opt.config)&&this.$config.setAll(this.opt.config||{}),this._isPluginLoaded=!0}get isPreLoaded(){return Boolean(this._isPluginLoaded)}get $editor(){return this.__editorInstance||(this.__editorInstance=this.createEditorInstance()),this.__editorInstance}createEditorInstance(){return new cT}afterRender(){super.afterRender(),this.$el.attr("data-theme",this.$config.get("editor.theme")),this.$el.addClass(window.navigator.userAgent.includes("Windows")?"ua-window":"ua-default"),this.trigger("initialize")}initialize(){super.initialize(),this.__initBodyMoves()}[Ct("editor.theme")](){this.$el.attr("data-theme",this.$config.get("editor.theme"))}getPlugins(){return[]}getManagers(){return{}}__initBodyMoves(){this.__firstMove=new Set,this.__moves=new Set,this.__ends=new Set,this.__modifyBodyMoveSecond(td)}__modifyBodyMoveSecond(e=td){this.$config.set("body.move.ms",e);const t=e===0?this.__loopBodyMoves.bind(this):So(this.__loopBodyMoves.bind(this),this.$config.get("body.move.ms"));this.__funcBodyMoves=t}__loopBodyMoves(){var e=this.pos,t=this.$config.get("bodyEvent"),r=this.lastPos||hT,i=!(r.x===e.x&&r.y===e.y);if(i&&this.__firstMove.size){let a=0;this.__firstMove.forEach(n=>{const o=rr(e.x,e.y,n.xy.x,n.xy.y);if(Math.abs(o)>0){var l=e.x-n.xy.x,c=e.y-n.xy.y;n.func.call(n.context,l,c,"move",t.pressure),a++}}),a>0&&this.__firstMove.clear()}i&&this.__moves.size&&(this.__moves.forEach(a=>{const n=rr(e.x,e.y,a.xy.x,a.xy.y);if(Math.abs(n)>.5){var o=e.x-a.xy.x,l=e.y-a.xy.y;a.func.call(a.context,o,l,"move",t.pressure)}}),this.lastPos=e),window.requestAnimationFrame(this.__funcBodyMoves)}__removeBodyMoves(){var e=this.lastPos,t=this.$config.get("bodyEvent");e&&this.__ends.forEach(r=>{r.func.call(r.context,e.x-r.xy.x,e.y-r.xy.y,"end",t.pressure)}),this.__firstMove.clear(),this.__moves.clear(),this.__ends.clear()}[rl(nu)](e,t,r){this.__firstMove.add({func:e,context:t,xy:r})}[rl(ou)](e,t,r){this.__moves.add({func:e,context:t,xy:r})}[rl(lu)](e,t,r){this.__ends.add({func:e,context:t,xy:r})}[ve()](e){var t=e.xy||ed;this.$config.init("bodyEvent",e),this.pos=t}[ca()](e){var t=e.xy||ed;this.$config.init("bodyEvent",e),this.$commands.emit("change.bodyEvent"),this.pos=t,this.__requestId||(this.__requestId=window.requestAnimationFrame(this.__funcBodyMoves))}[Bg()](e){this.$config.set("bodyEvent",e),this.__removeBodyMoves(),window.cancelAnimationFrame(this.__requestId),this.__requestId=null}[Fg("window")+He(100)](){this.emit(an)}[M("refreshAll")](){this.emit("refreshProjectList"),this.$commands.emit("refreshArtboard")}[M("changed.locale")](){this.rerender()}}const ss={LEFT:"left",RIGHT:"right",TOP:"top",BOTTOM:"bottom",BODY:"body",INNER:"inner",OUTER:"outer"};class ls extends X{get size(){return this.props.size}}class uT extends X{getLayoutElements(){return this.refs}initState(){return{showLeftPanel:ke(this.props.showLeftPanel)?Boolean(this.props.showLeftPanel):!0,showRightPanel:ke(this.props.showRightPanel)?Boolean(this.props.showRightPanel):!0,topSize:ke(this.props.topSize)?Number(this.props.topSize):48,leftSize:ke(this.props.leftSize)?Number(this.props.leftSize):340,rightSize:ke(this.props.rightSize)?Number(this.props.rightSize):280,bottomSize:this.props.bottomSize||20,lastBottomSize:this.props.lastBottomSize||150,minSize:ke(this.props.minSize)?Boolean(this.props.minSize):240,maxSize:ke(this.props.maxSize)?Boolean(this.props.maxSize):500}}getDirection(e){return this.getChildContent(t=>t.props.type===e)}template(){const e=this.getDirection(ss.TOP),t=this.getDirection(ss.LEFT),r=this.getDirection(ss.RIGHT),i=this.getDirection(ss.BOTTOM),a=this.getDirection(ss.BODY),n=this.getDirection(ss.INNER),o=this.getDirection(ss.OUTER);return w("div",{class:"elf--default-layout-container"},w("div",{class:"elf--default-layout"},e?w("div",{class:"layout-top",ref:"$topPanel"},e):"",w("div",{class:"layout-middle",ref:"$middle"},t?w("div",{class:"layout-left",ref:"$leftPanel"},t):"",w("div",{class:"layout-body",ref:"$bodyPanel"},a),r?w("div",{class:"layout-right",ref:"$rightPanel"},r):"",w("div",{class:"splitter",ref:"$splitter"})),i?w("div",{class:"layout-bottom",ref:"$bottomPanel"},i):"",n),o)}[ae("$splitter")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{left:p.px(e)}}}[ae("$leftPanel")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{width:e}}}[ae("$rightPanel")](){let e=this.state.rightSize;return this.state.showRightPanel||(e=0),{class:Ur("layout-right",{closed:!this.state.showRightPanel}),style:{width:e}}}setOptions(e={}){this.setState(e)}[ve("$splitter")+_e("moveSplitter")+Se("moveEndSplitter")](){this.leftSize=this.state.leftSize,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.state.maxSize),this.state.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}}class pT extends X{template(){return` +
        +
        + `}[Gg("$el")](e){ge.create(e.target).remove()}[z("$el .item > .icon")](e){e.$dt.parent().remove()}getMessageTemplate(e,t,r,i=1e3){return` +
        +
        ${t}
        +
        ${r}
        + ${R("close")} +
        + `}[M(hu)](e,t,r,i=1e3){const a=ge.createByHTML(this.getMessageTemplate(e,t,r,1e3));this.$el.prepend(a),window.setTimeout(n=>{n.css("opacity",0)},i,a)}}class jo extends X{template(){return` +
        +
        +
        + + + ${this.getTools()} + + +
        +
        ${this.getBody()}
        +
        +
        + `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}[z("$close")](){this.$el.hide()}show(){this.$el.show("block")}hide(){this.$el.hide()}}class gT extends jo{getClassName(){return"elf--export-window"}getTitle(){return"Mini Editor"}initState(){return{selectedIndex:1}}refresh(){this.$el.isShow()&&Lp({container:this.refs.$body.el,config:{"editor.design.mode":"item"}})}getBody(){return` +
        + +
        + `}[M("showEmbedEditorWindow")](){this.show(),this.refresh()}}Os({EmbedEditorWindow:gT});class fT extends jo{getClassName(){return"elf--export-window"}getTitle(){return"Export"}initState(){return{selectedIndex:1}}getBody(){return` +
        +
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + `}[M("showExportWindow")](){this.show(),this.refresh()}refresh(){var e=this.$context.selection.currentProject||{layers:[]},t=` +${this.makeStyle(e)} +${e.layers.map(a=>this.makeStyle(a)).join(` +`)} +`,r=` +${this.$editor.renderer("html").renderSVG(e)} +${this.$editor.renderer("html").render(e)} + `,i=e.layers.map(a=>this.$editor.svg.render(a));shiki&&shiki.getHighlighter({theme:"light-plus"}).then(a=>{if(html_beautify){r=html_beautify(r,{indent:2});const n=a.codeToHtml(r,"html");this.refs.$html.html(n),t=html_beautify(t,{indent:2});const o=a.codeToHtml(t,"html");this.refs.$css.html(o),i=html_beautify(i.join(""),{indent:2});const l=a.codeToHtml(i,"html");this.refs.$svgimage.html(l)}})}makeStyle(e){return this.$editor.renderer("html").toExportStyle(e,null)}makeHTML(e){return this.$editor.renderer("html").render(e)}[z("$header .tab-item")](e){var t=+e.$dt.attr("data-value");this.state.selectedIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndex}"]`).forEach(r=>r.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(r=>r.addClass("selected")),this.setState({selectedIndex:t},!1))}}Os({ExportWindow:fT});class mT extends jo{getClassName(){return"elf--project-window"}getTitle(){return"Project Manager"}initState(){return{selectedIndex:1}}getBody(){return` +
        +
        + Project Menu +
        +
        + Project List +
        +
        + `}[M("open.projects")](){this.show(),this.refresh()}refresh(){}}Os({ProjectWindow:mT});const Yu=new Set;Pc.forEach(s=>{Yu.add(s.category)});const La={};Yu.forEach(s=>{Pc.filter(e=>e.category===s).forEach(e=>{La[e.category]||(La[e.category]=[]),La[e.category].push(e)})});const vT={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318"},yT=oc();class bT extends jo{getClassName(){return"elf--shortcut-window"}getTitle(){return"ShortCuts"}getKeyString(e,t){return(t[e]||t.key).split("+").map(r=>r.trim()).map(r=>{const i=r.toUpperCase();return`${vT[i]||i}`}).join(" + ")}getTemplateForShortcutItem(e){return` +
        +
        ${e.description}
        +
        ${this.getKeyString(yT,e)}
        +
        + `}getTemplateForCategory(e,t=[]){return` +
        +

        ${e}

        +
        + ${t.map(r=>this.getTemplateForShortcutItem(r)).join("")} +
        +
        + `}getTemplateForLayer(){return` +
        +

        Layer

        +
        +
        +
        + Add Rect + fdsafdsfdf +
        + +
        CTRL+R
        +
        R
        +
        R
        +
        +
        +
        + `}getBody(){return` +
        + ${Object.keys(La).map(e=>this.getTemplateForCategory(e,La[e])).join("")} +
        + `}[M("showShortcutWindow")](){this.show()}}Os({ShortcutWindow:bT});class xT extends X{components(){return{NotificationView:pT}}template(){return w("div",{class:"elf--popup-manager"},O("ExportWindow"),O("EmbedEditorWindow"),O("ProjectWindow"),O("ShortcutWindow"),O("NotificationView"),this.$injectManager.generate("popup",!0))}}class $T extends dT{afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}getPlugins(){return t5}initState(){return{leftSize:340}}getTopPanel(){return w(ls,{type:"top"},w(S_,null))}getLeftPanel(){return w(ls,{type:"left",resizable:!0},w(Hf,null))}getRightPanel(){return w(ls,{type:"right"},w(Gf,null))}getBodyPanel(){return w(ls,{type:"body"},w(zf,null))}getInnerPanel(){return w(ls,{type:"inner"},w(a5,null))}getOuterPanel(){return w(ls,{type:"outer"},w(i5,null),w(xT,null),w(r5,null))}template(){return w("div",{class:"elf-studio blank-editor"},w(uT,{showLeftPanel:this.$config.get("show.left.panel"),showRightPanel:this.$config.get("show.right.panel"),leftSize:340,rightSize:280,ref:"$layout"},this.getTopPanel(),this.getLeftPanel(),this.getRightPanel(),this.getBodyPanel(),this.getInnerPanel(),this.getOuterPanel()))}refresh(){super.refresh(),this.emit("resizeEditor")}[M(cu)](){this.$el.toggleFullscreen()}}class _T{constructor(e){this.editor=e,this.clipboard=[]}get length(){return this.clipboard.length}clear(){this.clipboard=[]}get isEmpty(){return this.clipboard.length==0}get last(){return this.clipboard[this.clipboard.length-1]}push(e){this.clipboard.push(e)}pop(){return this.clipboard.pop()}}class ST{constructor(e){this.$editor=e,this.$context=e.context,this.currentIndex=-1,this.undoHistories=[],this.redoHistories=[],this.selection={}}get length(){return this.undoHistories.length}get selectedIds(){return Object.keys(this.selection)}createCommand(e){return this.$context.stateManager.isPointerUp?`history.${e}`:e}saveSelection(e={}){this.selection=this.$editor.context.selection.toCloneObject()}getUndoValues(e={}){let t={};return Object.keys(e).forEach(r=>{t[r]={};const i=this.selection[r]||this.$editor.context.selection.itemsByIds(r)[0],a=e[r];Object.keys(a).forEach(n=>{t[r][n]=i[n]})}),t}add(e,t,r){const i=window.performance.now(),a=this.undoHistories[this.undoHistories.length-1],n={message:e,command:t,data:r,time:i};return a&&a.message===e&&i-a.time{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}redo(){if(this.currentIndex>this.length)return;this.currentIndex<0&&this.currentIndex++;const e=this.undoHistories[this.currentIndex];e&&e.command&&(this.currentIndex++,e.command.redo(this.$editor,e.data),this.$editor.debug(e),this.$editor.nextTick(()=>{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}}class PT{constructor(e){this.editor=e,this.lockList={}}get(e){return this.lockList[e]}set(e,t){this.lockList[e]=!0}toggle(e){this.lockList[e]?delete this.lockList[e]:this.lockList[e]=!0}}const wT=()=>!0;class CT{constructor(e){this.editor=e,this.context=this.editor.context,this.version="0.0.0",this.name="",this.description="",this.items=new Map,this.projects=[]}load(e=void 0,t={origin:"*"}){var i;const r=e||this.editor.loadItem("model");this.items.clear(),this.version=r==null?void 0:r.version,this.name=r==null?void 0:r.name,this.description=r==null?void 0:r.description,(i=r==null?void 0:r.projects)==null||i.forEach(a=>{this.createModel(a)}),this.projects.length===0&&this.createProject()}createProject(){this.createModel({itemType:"project",name:"New Project"})}getProjectByIndex(e=0){return this.get(this.projects[e])}get(e){return this.items.get(e)}set(e,t){this.items.set(e,t),this.setChanged("set",e,t)}remove(e){const t=this.items.get(e),r=t.parent.children,i=r.indexOf(e);t.reset({removed:!0,removedIndex:i,removedLeftSibling:i>0?r[i-1]:null,removedRightSibling:it.get("removedRightSibling"))-1,0,e):t.get("removedLeftSibling")&&!t.get("removedRightSibling")?r.children.splice(r.children.findIndex(()=>t.get("removedLeftSibling"))+1,0,e):r.children.splice(t.get("removedIndex"),0,e),t.removeField("removed"),t.removeField("removedLeftSibling"),t.removeField("removedRightSibling"),t.removeField("removedIndex"),this.setChanged("recover",e)}clear(){this.items.clear()}toJSON(){return{version:this.version,name:this.name,description:this.description,projects:this.projects.map(e=>this.get(e).toJSON())}}setChanged(e,t,r){this.editor.emit("changed",e,t,r)}removeChild(e,t){const r=this.get(e);r.reset({children:r.children.filter(i=>i!==t)}),this.setChanged("removeChild",e,{childId:t})}get components(){return this.context.components}searchItem(e){return this.get(e)}searchLayers(e,t){const r=this.get(e);return this.get(r.children.find(i=>i===t))}searchItemsById(e){return e.map(t=>this.get(t))}findGroupItem(e){const t=this.get(e);return t.hasChildren()||t.parent&&(t.parent.is("project")||t.parent.is("artboard")||t.isBooleanItem)?t:t.parent&&this.findGroupItem(t.parentId)}convertGroupItems(e){const t={};return e.forEach(r=>{if(r.parent&&r.isNot("project")&&r.parent.hasLayout()){const i=r.parent;t[i.id]=i}else{const i=this.findGroupItem(r.id)||r;t[i.id]=i}}),Object.values(t).filter(r=>r.isNot("project"))}searchLiveItemsById(e){return e.map(t=>this.get(t)).filter(t=>!t.removed)}markRemove(e=[]){e.forEach(t=>{this.remove(t)}),this.setChanged("markRemove",e,{isLayer:!0})}markRemoveProject(e){const t=this.projects.findIndex(r=>r===e);return this.projects.splice(t,1),this.get(e).removed=!0,this.setChanged("markRemoveProject",[e],{isProject:!0}),t}unmarkRemove(e=[]){e.forEach(t=>{this.recover(t)}),this.setChanged("unmarkRemove",e,{isLayer:!0})}unmarkRemoveProject(e,t){this.projects.splice(t,0,e),this.get(e).removed=!1,this.setChanged("unmarkRemoveProject",[e],{removed:!0,isProject:!0})}createModel(e,t=!0,r={origin:"*"}){const i=e.layers;delete e.layers;let a;this.get(e.id)?(a=this.get(e.id),a.reset(e)):(a=this.components.createComponent(e.itemType,b({},e)),a.setModelManager(this)),t&&(this.set(a.id,a),a.is("project")&&(this.projects=[...new Set([...this.projects,a.id])]));const n=(i||[]).map(o=>this.createModel(ie(b({},o),{parentId:a.id}),!0,r));return n.length&&a.reset({children:n.map(o=>o.id)},r),a}getAllLayers(e,t=wT){var r=[];const i=this.get(e);let a=i.children.length;for(let n=a;n--;){let o=i.children[n];r.push(...this.getAllLayers(o,t))}return de(t)&&t(i)&&r.push(i),r}getLayers(e){var r;const t=this.get(e);return((r=t==null?void 0:t.children)==null?void 0:r.map(i=>this.get(i)))||[]}eachLayers(e,t){const r=this.get(e);let i=r.children.length;for(let a=i;a--;){let n=r.children[a];t(this.get(n))}}mapLayers(e,t){return this.get(e).children.map(i=>t(this.get(i)))}getParent(e){var t;return this.get((t=this.get(e))==null?void 0:t.parentId)}getDepth(e){const t=this.getParent(e);return t?this.getDepth(t.id)+1:1}getPath(e,t=null){const r=this.get(e)||t,i=this.getParent(e);if(!i)return[r];const a=this.getPath(i.id);return a.push(r),a}clone(e,t=!0){const r=this.get(e),i=r.toCloneObject(t),a=this.createModel(i);return a.setParentId(r.parentId),a}}var Ku={exports:{}},kT={},TT=Object.freeze(Object.defineProperty({__proto__:null,default:kT},Symbol.toStringTag,{value:"Module"})),yl=vw(TT);(function(s,e){var t=function(){var r=typeof document!="undefined"&&document.currentScript?document.currentScript.src:void 0;return typeof __filename!="undefined"&&(r=r||__filename),function(i){i=i||{};var a;a||(a=typeof i!="undefined"?i:{});var n;a.ready=new Promise(function(f){n=f}),function(f){var m={};f.loadCmdsTypedArray=function(B){for(var Z=0,Q=0;Q=k);)++$;if(16<$-m&&f.subarray&&le)return le.decode(f.subarray(m,$));for(k="";m<$;){var j=f[m++];if(j&128){var A=f[m++]&63;if((j&224)==192)k+=String.fromCharCode((j&31)<<6|A);else{var J=f[m++]&63;j=(j&240)==224?(j&15)<<12|A<<6|J:(j&7)<<18|A<<12|J<<6|f[m++]&63,65536>j?k+=String.fromCharCode(j):(j-=65536,k+=String.fromCharCode(55296|j>>10,56320|j&1023))}}else k+=String.fromCharCode(j)}return k}function me(f,m,$){var k=qe;if(0<$){$=m+$-1;for(var j=0;j=A){var J=f.charCodeAt(++j);A=65536+((A&1023)<<10)|J&1023}if(127>=A){if(m>=$)break;k[m++]=A}else{if(2047>=A){if(m+1>=$)break;k[m++]=192|A>>6}else{if(65535>=A){if(m+2>=$)break;k[m++]=224|A>>12}else{if(m+3>=$)break;k[m++]=240|A>>18,k[m++]=128|A>>12&63}k[m++]=128|A>>6&63}k[m++]=128|A&63}}k[m]=0}}var pe=typeof TextDecoder!="undefined"?new TextDecoder("utf-16le"):void 0;function Ve(f,m){for(var $=f>>1,k=$+m/2;!($>=k)&&nt[$];)++$;if($<<=1,32<$-f&&pe)return pe.decode(qe.subarray(f,$));for($=0,k="";;){var j=re[f+2*$>>1];if(j==0||$==m/2)return k;++$,k+=String.fromCharCode(j)}}function q(f,m,$){if($===void 0&&($=2147483647),2>$)return 0;$-=2;var k=m;$=$<2*f.length?$/2:f.length;for(var j=0;j<$;++j)re[m>>1]=f.charCodeAt(j),m+=2;return re[m>>1]=0,m-k}function Be(f){return 2*f.length}function Ge(f,m){for(var $=0,k="";!($>=m/4);){var j=gt[f+4*$>>2];if(j==0)break;++$,65536<=j?(j-=65536,k+=String.fromCharCode(55296|j>>10,56320|j&1023)):k+=String.fromCharCode(j)}return k}function ze(f,m,$){if($===void 0&&($=2147483647),4>$)return 0;var k=m;$=k+$-4;for(var j=0;j=A){var J=f.charCodeAt(++j);A=65536+((A&1023)<<10)|J&1023}if(gt[m>>2]=A,m+=4,m+4>$)break}return gt[m>>2]=0,m-k}function dt(f){for(var m=0,$=0;$=k&&++$,m+=4}return m}var je,Re,qe,re,nt,gt,Qt,ai,ni,lr=a.INITIAL_MEMORY||16777216;a.wasmMemory?V=a.wasmMemory:V=new WebAssembly.Memory({initial:lr/65536,maximum:lr/65536}),V&&(je=V.buffer),lr=je.byteLength;var cr=je;je=cr,a.HEAP8=Re=new Int8Array(cr),a.HEAP16=re=new Int16Array(cr),a.HEAP32=gt=new Int32Array(cr),a.HEAPU8=qe=new Uint8Array(cr),a.HEAPU16=nt=new Uint16Array(cr),a.HEAPU32=Qt=new Uint32Array(cr),a.HEAPF32=ai=new Float32Array(cr),a.HEAPF64=ni=new Float64Array(cr),gt[3e3]=5255040;function x(f){for(;0>2])}var Bs={},rs={},Tn={};function Mn(f){if(f===void 0)return"_unknown";f=f.replace(/[^a-zA-Z0-9_]/g,"$");var m=f.charCodeAt(0);return 48<=m&&57>=m?"_"+f:f}function In(f,m){return f=Mn(f),new Function("body","return function "+f+`() { + "use strict"; return body.apply(this, arguments); +}; +`)(m)}function Bo(f){var m=Error,$=In(f,function(k){this.name=f,this.message=k,k=Error(k).stack,k!==void 0&&(this.stack=this.toString()+` +`+k.replace(/^Error(:[^\n]*)?\n/,""))});return $.prototype=Object.create(m.prototype),$.prototype.constructor=$,$.prototype.toString=function(){return this.message===void 0?this.name:this.name+": "+this.message},$}var Bc=void 0;function En(f){throw new Bc(f)}function oi(f,m,$){function k(B){B=$(B),B.length!==f.length&&En("Mismatched type converter count");for(var Z=0;Z>2)+k]);return $}function qc(f){var m=Function;if(!(m instanceof Function))throw new TypeError("new_ called with constructor type "+typeof m+" which is not a function");var $=In(m.name||"unknownFunctionName",function(){});return $.prototype=m.prototype,$=new $,f=m.apply($,f),f instanceof Object?f:$}function Qc(f,m,$,k,j){var A=m.length;2>A&&et("argTypes array size mismatch! Must at least get return value and 'this' types!");var J=m[1]!==null&&$!==null,B=!1;for($=1;$>1])};case 2:return function(k){return this.fromWireType(($?gt:Qt)[k>>2])};default:throw new TypeError("Unknown integer type: "+f)}}function Rn(f,m){var $=rs[f];return $===void 0&&et(m+" has unknown type "+Zc(f)),$}function Gs(f){if(f===null)return"null";var m=typeof f;return m==="object"||m==="array"||m==="function"?f.toString():""+f}function Bp(f,m){switch(m){case 2:return function($){return this.fromWireType(ai[$>>2])};case 3:return function($){return this.fromWireType(ni[$>>3])};default:throw new TypeError("Unknown float type: "+f)}}function Np(f,m,$){switch(m){case 0:return $?function(k){return Re[k]}:function(k){return qe[k]};case 1:return $?function(k){return re[k>>1]}:function(k){return nt[k>>1]};case 2:return $?function(k){return gt[k>>2]}:function(k){return Qt[k>>2]};default:throw new TypeError("Unknown integer type: "+f)}}var Gp={};function Ko(f){var m=Gp[f];return m===void 0?Vt(f):m}var Zo=[];function eh(f){return f||et("Cannot use deleted val. handle = "+f),br[f].value}function th(){return typeof globalThis=="object"?globalThis:Function("return this")()}function Hp(f){var m=Zo.length;return Zo.push(f),m}function Up(f,m){for(var $=Array(f),k=0;k>2)+k],"parameter "+k);return $}var rh={},Wp=[null,[],[]];Bc=a.InternalError=Bo("InternalError");for(var ih=Array(256),zn=0;256>zn;++zn)ih[zn]=String.fromCharCode(zn);Nc=ih,Ns=a.BindingError=Bo("BindingError"),Si.prototype.isAliasOf=function(f){if(!(this instanceof Si&&f instanceof Si))return!1;var m=this.$a.cb.ab,$=this.$a.bb,k=f.$a.cb.ab;for(f=f.$a.bb;m.jb;)$=m.pb($),m=m.jb;for(;k.jb;)f=k.pb(f),k=k.jb;return m===k&&$===f},Si.prototype.clone=function(){if(this.$a.bb||No(this),this.$a.nb)return this.$a.count.value+=1,this;var f=fa(Object.create(Object.getPrototypeOf(this),{$a:{value:Op(this.$a)}}));return f.$a.count.value+=1,f.$a.lb=!1,f},Si.prototype.delete=function(){this.$a.bb||No(this),this.$a.lb&&!this.$a.nb&&et("Object already scheduled for deletion"),Gc(this),Hc(this.$a),this.$a.nb||(this.$a.gb=void 0,this.$a.bb=void 0)},Si.prototype.isDeleted=function(){return!this.$a.bb},Si.prototype.deleteLater=function(){return this.$a.bb||No(this),this.$a.lb&&!this.$a.nb&&et("Object already scheduled for deletion"),va.push(this),va.length===1&&ma&&ma(Ho),this.$a.lb=!0,this},li.prototype.Lb=function(f){return this.Eb&&(f=this.Eb(f)),f},li.prototype.Cb=function(f){this.hb&&this.hb(f)},li.prototype.argPackAdvance=8,li.prototype.readValueFromPointer=Fs,li.prototype.deleteObject=function(f){f!==null&&f.delete()},li.prototype.fromWireType=function(f){function m(){return this.sb?On(this.ab.mb,{cb:this.Ob,bb:$,ib:this,gb:f}):On(this.ab.mb,{cb:this,bb:f})}var $=this.Lb(f);if(!$)return this.Cb(f),null;var k=Dp(this.ab,$);if(k!==void 0)return k.$a.count.value===0?(k.$a.bb=$,k.$a.gb=f,k.clone()):(k=k.clone(),this.Cb(f),k);if(k=this.ab.Kb($),k=Uc[k],!k)return m.call(this);k=this.rb?k.Gb:k.pointerType;var j=Xc($,this.ab,k.ab);return j===null?m.call(this):this.sb?On(k.ab.mb,{cb:k,bb:j,ib:this,gb:f}):On(k.ab.mb,{cb:k,bb:j})},a.getInheritedInstanceCount=function(){return Object.keys(ya).length},a.getLiveInheritedInstances=function(){var f=[],m;for(m in ya)ya.hasOwnProperty(m)&&f.push(ya[m]);return f},a.flushPendingDeletes=Ho,a.setDelayFunction=function(f){ma=f,va.length&&ma&&ma(Ho)},Kc=a.UnboundTypeError=Bo("UnboundTypeError"),a.count_emval_handles=function(){for(var f=0,m=5;m>A])},fb:null})},k:function(f,m,$,k,j,A,J,B,Z,Q,ee,Ie,Qe){ee=Vt(ee),A=ar(j,A),B&&(B=ar(J,B)),Q&&(Q=ar(Z,Q)),Qe=ar(Ie,Qe);var St=Mn(ee);Uo(St,function(){jn("Cannot construct "+ee+" due to unbound types",[k])}),oi([f,m,$],k?[k]:[],function(Pt){if(Pt=Pt[0],k)var wi=Pt.ab,gr=wi.mb;else gr=Si.prototype;Pt=In(St,function(){if(Object.getPrototypeOf(this)!==is)throw new Ns("Use 'new' to construct "+ee);if(xr.kb===void 0)throw new Ns(ee+" has no accessible constructor");var lh=xr.kb[arguments.length];if(lh===void 0)throw new Ns("Tried to invoke ctor of "+ee+" with invalid number of parameters ("+arguments.length+") - expected ("+Object.keys(xr.kb).toString()+") parameters instead!");return lh.apply(this,arguments)});var is=Object.create(gr,{constructor:{value:Pt}});Pt.prototype=is;var xr=new jp(ee,Pt,is,Qe,wi,A,B,Q);wi=new li(ee,xr,!0,!1),gr=new li(ee+"*",xr,!1,!1);var oh=new li(ee+" const*",xr,!1,!0);return Uc[f]={pointerType:gr,Gb:oh},Yc(St,Pt),[wi,gr,oh]})},h:function(f,m,$,k,j,A){W(0>>B}}var Z=m.indexOf("unsigned")!=-1;Xr(f,{name:m,fromWireType:A,toWireType:function(Q,ee){if(typeof ee!="number"&&typeof ee!="boolean")throw new TypeError('Cannot convert "'+Gs(ee)+'" to '+this.name);if(eej)throw new TypeError('Passing a number "'+Gs(ee)+'" from JS side to C/C++ side to an argument of type "'+m+'", which is outside the valid range ['+k+", "+j+"]!");return Z?ee>>>0:ee|0},argPackAdvance:8,readValueFromPointer:Np(m,J,k!==0),fb:null})},b:function(f,m,$){function k(A){return A>>=2,new j(je,Qt[A+1],Qt[A])}var j=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array][m];$=Vt($),Xr(f,{name:$,fromWireType:k,argPackAdvance:8,readValueFromPointer:k},{Mb:!0})},q:function(f,m){m=Vt(m);var $=m==="std::string";Xr(f,{name:m,fromWireType:function(k){var j=Qt[k>>2];if($)for(var A=k+4,J=0;J<=j;++J){var B=k+4+J;if(qe[B]==0||J==j){if(A=A?ce(qe,A,B-A):"",Z===void 0)var Z=A;else Z+=String.fromCharCode(0),Z+=A;A=B+1}}else{for(Z=Array(j),J=0;J=Ie&&(Ie=65536+((Ie&1023)<<10)|j.charCodeAt(++ee)&1023),127>=Ie?++Q:Q=2047>=Ie?Q+2:65535>=Ie?Q+3:Q+4}return Q}:function(){return j.length})(),B=qo(4+J+1);if(Qt[B>>2]=J,$&&A)me(j,B+4,J+1);else if(A)for(A=0;A>2],ee=J(),Ie,Qe=Z+4,St=0;St<=Q;++St){var Pt=Z+4+St*m;(ee[Pt>>B]==0||St==Q)&&(Qe=k(Qe,Pt-Qe),Ie===void 0?Ie=Qe:(Ie+=String.fromCharCode(0),Ie+=Qe),Qe=Pt+m)}return ci(Z),Ie},toWireType:function(Z,Q){typeof Q!="string"&&et("Cannot pass non-string to C++ string type "+$);var ee=A(Q),Ie=qo(4+ee+m);return Qt[Ie>>2]=ee>>B,j(Q,Ie+4,ee+m),Z!==null&&Z.push(ci,Ie),Ie},argPackAdvance:8,readValueFromPointer:Fs,fb:function(Z){ci(Z)}})},u:function(f,m,$,k,j,A){Cn[f]={name:Vt(m),ob:ar($,k),hb:ar(j,A),elements:[]}},t:function(f,m,$,k,j,A,J,B,Z){Cn[f].elements.push({wb:m,ub:ar($,k),vb:j,Ab:A,zb:ar(J,B),Bb:Z})},w:function(f,m,$,k,j,A){Ln[f]={name:Vt(m),ob:ar($,k),hb:ar(j,A),Db:[]}},i:function(f,m,$,k,j,A,J,B,Z,Q){Ln[f].Db.push({Ib:Vt(m),wb:$,ub:ar(k,j),vb:A,Ab:J,zb:ar(B,Z),Bb:Q})},H:function(f,m){m=Vt(m),Xr(f,{Nb:!0,name:m,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},d:function(f,m,$,k){f=Zo[f],m=eh(m),$=Ko($),f(m,$,null,k)},N:Jc,z:function(f){return f===0?Pi(th()):(f=Ko(f),Pi(th()[f]))},c:function(f,m){m=Up(f,m);for(var $=m[0],k=$.name+"_$"+m.slice(1).map(function(Q){return Q.name}).join("_")+"$",j=["retType"],A=[$],J="",B=0;B>> 2) + "+A+'], "parameter '+A+`"); +var arg`+A+" = argType"+A+`.readValueFromPointer(args); +args += argType`+A+`['argPackAdvance']; +`;j=new Function("requireRegisteredType","Module","__emval_register",J+("var obj = new constructor("+j+`); +return __emval_register(obj); +} +`))(Rn,a,Pi),rh[m]=j}return j(f,$,k)},O:function(){return Pi([])},F:function(f){return Pi(Ko(f))},L:function(f,m){return f=Rn(f,"_emval_take_value"),f=f.readValueFromPointer(m),Pi(f)},m:function(){Wr()},B:function(f,m,$){qe.copyWithin(f,m,m+$)},C:function(){Wr("OOM")},D:function(){return 0},y:function(){},o:function(f,m,$,k){for(var j=0,A=0;A<$;A++){for(var J=gt[m+8*A>>2],B=gt[m+(8*A+4)>>2],Z=0;Z>2]=j,0},memory:V,K:function(){},r:function(){},J:function(){},I:function(){},A:function(){},table:F},sh=function(){function f(j){a.asm=j.exports,kt--,a.monitorRunDependencies&&a.monitorRunDependencies(kt),kt==0&&pr&&(j=pr,pr=null,j())}function m(j){f(j.instance)}function $(j){return Vp().then(function(A){return WebAssembly.instantiate(A,k)}).then(j,function(A){I("failed to asynchronously prepare wasm: "+A),Wr(A)})}var k={a:Xp};if(kt++,a.monitorRunDependencies&&a.monitorRunDependencies(kt),a.instantiateWasm)try{return a.instantiateWasm(k,f)}catch(j){return I("Module.instantiateWasm callback failed with error: "+j),!1}return function(){if(T||typeof WebAssembly.instantiateStreaming!="function"||Ac()||Ds("file://")||typeof fetch!="function")return $(m);fetch(ts,{credentials:"same-origin"}).then(function(j){return WebAssembly.instantiateStreaming(j,k).then(m,function(A){I("wasm streaming compile failed: "+A),I("falling back to ArrayBuffer instantiation"),$(m)})})}(),{}}();a.asm=sh;var ah=a.___wasm_call_ctors=function(){return(ah=a.___wasm_call_ctors=a.asm.P).apply(null,arguments)};a.__Z6ToCmdsRK6SkPath=function(){return(a.__Z6ToCmdsRK6SkPath=a.asm.Q).apply(null,arguments)},a.__Z8FromCmdsmi=function(){return(a.__Z8FromCmdsmi=a.asm.R).apply(null,arguments)},a.__Z7NewPathv=function(){return(a.__Z7NewPathv=a.asm.S).apply(null,arguments)},a.__Z8CopyPathRK6SkPath=function(){return(a.__Z8CopyPathRK6SkPath=a.asm.T).apply(null,arguments)},a.__Z6EqualsRK6SkPathS1_=function(){return(a.__Z6EqualsRK6SkPathS1_=a.asm.U).apply(null,arguments)},a.__Z11ToSVGStringRK6SkPath=function(){return(a.__Z11ToSVGStringRK6SkPath=a.asm.V).apply(null,arguments)},a.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=function(){return(a.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=a.asm.W).apply(null,arguments)},a.__Z13ApplySimplifyR6SkPath=function(){return(a.__Z13ApplySimplifyR6SkPath=a.asm.X).apply(null,arguments)},a.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=function(){return(a.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=a.asm.Y).apply(null,arguments)},a.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=function(){return(a.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=a.asm.Z).apply(null,arguments)},a.__Z14ResolveBuilderR11SkOpBuilder=function(){return(a.__Z14ResolveBuilderR11SkOpBuilder=a.asm._).apply(null,arguments)},a.__Z8ToCanvasRK6SkPathN10emscripten3valE=function(){return(a.__Z8ToCanvasRK6SkPathN10emscripten3valE=a.asm.$).apply(null,arguments)},a.__Z8ToPath2DRK6SkPath=function(){return(a.__Z8ToPath2DRK6SkPath=a.asm.aa).apply(null,arguments)};var ci=a._free=function(){return(ci=a._free=a.asm.ba).apply(null,arguments)},qo=a._malloc=function(){return(qo=a._malloc=a.asm.ca).apply(null,arguments)},nh=a.___getTypeName=function(){return(nh=a.___getTypeName=a.asm.da).apply(null,arguments)};a.___embind_register_native_and_builtin_types=function(){return(a.___embind_register_native_and_builtin_types=a.asm.ea).apply(null,arguments)},a.dynCall_vi=function(){return(a.dynCall_vi=a.asm.fa).apply(null,arguments)},a.dynCall_iiiii=function(){return(a.dynCall_iiiii=a.asm.ga).apply(null,arguments)},a.dynCall_ii=function(){return(a.dynCall_ii=a.asm.ha).apply(null,arguments)},a.dynCall_i=function(){return(a.dynCall_i=a.asm.ia).apply(null,arguments)},a.dynCall_viifffffffff=function(){return(a.dynCall_viifffffffff=a.asm.ja).apply(null,arguments)},a.dynCall_vifffffi=function(){return(a.dynCall_vifffffi=a.asm.ka).apply(null,arguments)},a.dynCall_vifffff=function(){return(a.dynCall_vifffff=a.asm.la).apply(null,arguments)},a.dynCall_viffffff=function(){return(a.dynCall_viffffff=a.asm.ma).apply(null,arguments)},a.dynCall_vifffffffi=function(){return(a.dynCall_vifffffffi=a.asm.na).apply(null,arguments)},a.dynCall_viff=function(){return(a.dynCall_viff=a.asm.oa).apply(null,arguments)},a.dynCall_viffff=function(){return(a.dynCall_viffff=a.asm.pa).apply(null,arguments)},a.dynCall_vii=function(){return(a.dynCall_vii=a.asm.qa).apply(null,arguments)},a.dynCall_iii=function(){return(a.dynCall_iii=a.asm.ra).apply(null,arguments)},a.dynCall_iifff=function(){return(a.dynCall_iifff=a.asm.sa).apply(null,arguments)},a.dynCall_iiffi=function(){return(a.dynCall_iiffi=a.asm.ta).apply(null,arguments)},a.dynCall_vifffffffff=function(){return(a.dynCall_vifffffffff=a.asm.ua).apply(null,arguments)},a.dynCall_iiii=function(){return(a.dynCall_iiii=a.asm.va).apply(null,arguments)},a.dynCall_viii=function(){return(a.dynCall_viii=a.asm.wa).apply(null,arguments)},a.dynCall_viiii=function(){return(a.dynCall_viiii=a.asm.xa).apply(null,arguments)},a.dynCall_fif=function(){return(a.dynCall_fif=a.asm.ya).apply(null,arguments)},a.dynCall_viif=function(){return(a.dynCall_viif=a.asm.za).apply(null,arguments)},a.dynCall_fi=function(){return(a.dynCall_fi=a.asm.Aa).apply(null,arguments)},a.dynCall_viiifffffffff=function(){return(a.dynCall_viiifffffffff=a.asm.Ba).apply(null,arguments)},a.dynCall_viifffffi=function(){return(a.dynCall_viifffffi=a.asm.Ca).apply(null,arguments)},a.dynCall_viifffff=function(){return(a.dynCall_viifffff=a.asm.Da).apply(null,arguments)},a.dynCall_viiffffff=function(){return(a.dynCall_viiffffff=a.asm.Ea).apply(null,arguments)},a.dynCall_viifffffffi=function(){return(a.dynCall_viifffffffi=a.asm.Fa).apply(null,arguments)},a.dynCall_viiff=function(){return(a.dynCall_viiff=a.asm.Ga).apply(null,arguments)},a.dynCall_viiffff=function(){return(a.dynCall_viiffff=a.asm.Ha).apply(null,arguments)},a.dynCall_iiifff=function(){return(a.dynCall_iiifff=a.asm.Ia).apply(null,arguments)},a.dynCall_iiiffi=function(){return(a.dynCall_iiiffi=a.asm.Ja).apply(null,arguments)},a.dynCall_fii=function(){return(a.dynCall_fii=a.asm.Ka).apply(null,arguments)},a.dynCall_iiffff=function(){return(a.dynCall_iiffff=a.asm.La).apply(null,arguments)},a.dynCall_fiif=function(){return(a.dynCall_fiif=a.asm.Ma).apply(null,arguments)},a.dynCall_iiif=function(){return(a.dynCall_iiif=a.asm.Na).apply(null,arguments)},a.dynCall_vifii=function(){return(a.dynCall_vifii=a.asm.Oa).apply(null,arguments)},a.dynCall_viifd=function(){return(a.dynCall_viifd=a.asm.Pa).apply(null,arguments)},a.dynCall_viid=function(){return(a.dynCall_viid=a.asm.Qa).apply(null,arguments)},a.dynCall_viddi=function(){return(a.dynCall_viddi=a.asm.Ra).apply(null,arguments)},a.dynCall_iidi=function(){return(a.dynCall_iidi=a.asm.Sa).apply(null,arguments)},a.dynCall_viffi=function(){return(a.dynCall_viffi=a.asm.Ta).apply(null,arguments)},a.dynCall_fffff=function(){return(a.dynCall_fffff=a.asm.Ua).apply(null,arguments)},a.dynCall_viiiii=function(){return(a.dynCall_viiiii=a.asm.Va).apply(null,arguments)},a.dynCall_viiiiiffii=function(){return(a.dynCall_viiiiiffii=a.asm.Wa).apply(null,arguments)},a.dynCall_iiiiii=function(){return(a.dynCall_iiiiii=a.asm.Xa).apply(null,arguments)},a.dynCall_iiiiiii=function(){return(a.dynCall_iiiiiii=a.asm.Ya).apply(null,arguments)},a.dynCall_iidiiii=function(){return(a.dynCall_iidiiii=a.asm.Za).apply(null,arguments)},a.dynCall_jiji=function(){return(a.dynCall_jiji=a.asm._a).apply(null,arguments)},a.asm=sh;var An;pr=function f(){An||Qo(),An||(pr=f)};function Qo(){function f(){if(!An&&(An=!0,a.calledRun=!0,!H)){if(x(E),x(N),n(a),a.onRuntimeInitialized&&a.onRuntimeInitialized(),a.postRun)for(typeof a.postRun=="function"&&(a.postRun=[a.postRun]);a.postRun.length;){var m=a.postRun.shift();he.unshift(m)}x(he)}}if(!(0r%2===0)}isValidPath(e){return this.pathkit.FromSVGString(e).isValid()}simplify(e){return this.pathkit.FromSVGString(e).simplify().toSVGString()}convertLineJoin(e){const t=this.pathkit;switch(e){case"miter":return t.StrokeJoin.MITER;case"round":return t.StrokeJoin.ROUND;case"bevel":return t.StrokeJoin.BEVEL}}convertLineCap(e){const t=this.pathkit;switch(e){case"butt":return t.StrokeCap.BUTT;case"round":return t.StrokeCap.ROUND;case"square":return t.StrokeCap.SQUARE}}stroke(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e);if(Ut(t["stroke-dasharray"])){const n=t["stroke-dasharray"];n.length>=2&&i.dash(n[0],n[1],+(t["stroke-dashoffset"]||0))}let a=i.stroke({width:+t["stroke-width"],join:this.convertLineJoin(t["stroke-linejoin"]),cap:this.convertLineCap(t["stroke-linecap"])});return a.setFillType(r.FillType.WINDING),a.simplify().toSVGString()}round(e,t={width:1,miter_limit:4}){return this.stroke(e,ie(b({},t),{"stroke-linejoin":"round"}))}grow(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e);return i.copy().stroke(t).op(i,r.PathOp.DIFFERENCE).toSVGString()}shrink(e,t={width:1,miter_limit:4}){const r=this.pathkit,i=r.FromSVGString(e),a=i.copy().simplify();return i.copy().stroke(t).op(a,r.PathOp.DIFFERENCE).toSVGString()}dash(e,t,r,i=1){return this.pathkit.FromSVGString(e).dash(t,r,i).toSVGString()}trim(e,t,r,i=!1){return this.pathkit.FromSVGString(e).trim(t,r,i).toSVGString()}}class ET{constructor(e){this.$editor=e,this.selectedPointKeys={},this.selectedPointList=[]}get length(){return this.selectedPointList.length}initialize(){this.selectedPointKeys={},this.selectedPointList=[]}makeSegmentKey(e,t){return`${e}_${t}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({key:t,index:r})=>({key:t,index:+r||0})),e.forEach(t=>{var r=this.makeSegmentKey(t.index,t.key);this.selectedPointKeys[r]=t})}toggleSegment(e,t){this.isSelectedSegment(t,e)?this.select(...this.selectedPointList.filter(r=>r.key!==t||r.index!==e)):this.select(...this.selectedPointList,{key:t,index:e})}toggleSelect(...e){e=e.map(a=>ie(b({},a),{included:this.isSelectedSegment(a.index,a.key)}));const t=e.filter(a=>a.included),r=e.filter(a=>!a.included);let i=[...this.selectedPointList];t.length&&(i=this.selectedPointList.filter(a=>{const n=this.makeSegmentKey(a);return Boolean(t.find(o=>n===this.makeSegmentKey(o)))===!1})),this.select(...i,...r)}selectKeyIndex(e,t){this.isSelectedSegment(e,t)||this.select({key:t,index:e})}isSelectedSegment(e,r){var r=this.makeSegmentKey(e,r);return!!this.selectedPointKeys[r]}}class LT{constructor(e){this.$editor=e,this.$context=this.$editor.context,this.project=null,this.itemKeys={},this.hoverId="",this.hoverItems=[],this.ids=[],this.colorsteps=[],this.ghosts=[],this.cachedItemMatrices=[],this.cachedArtBoardVerties=[],this.cachedVerties=mt(0,0,0,0,"50% 50% 0px"),this.gridInformation={},this.dragTargetItem=null,this.$editor.on("config:bodyEvent",()=>{this.refreshMousePosition()})}refreshMousePosition(){const e=this.$context.config.get("area.width"),t=this.$context.viewport.getWorldPosition();this.pos=t;const[r,i]=Ul(t[0],t[1],e);this.row=r,this.column=i}get modelManager(){return this.$context.modelManager}get lockManager(){return this.$context.lockManager}get items(){return this.modelManager.searchLiveItemsById(this.ids)}get current(){return this.modelManager.searchItem(this.ids[0])}get currentProject(){return this.project||(this.project=this.modelManager.getProjectByIndex()),this.project}get isEmpty(){return!this.length}get isOne(){return this.length===1&&this.current.is("artboard")?!0:this.length===1}get isMany(){return this.length>1}get length(){return this.ids.length}get isLayoutItem(){var e;return(e=this.current)==null?void 0:e.isLayoutItem()}get allLayers(){return this.currentProject.allLayers||[]}get filteredLayers(){var t;const e=this.$editor.context.config.get("area.width");return((t=this.currentProject)==null?void 0:t.filteredAllLayers(r=>{if(r.is("project"))return!1;const i=r.getAreaPosition(e);if(!i)return!1;const{column:a,row:n}=i;return a[0]<=this.column&&this.column<=a[1]&&n[0]<=this.row&&this.row<=n[1]}).filter(r=>r.isPointInRect(this.pos[0],this.pos[1])))||[]}get notSelectedLayers(){return this.filteredLayers.filter(e=>this.check(e)===!1)}get selectedArtboards(){return[...new Set(this.items.map(e=>e.artboard))]}hasChangedField(...e){return this.current?this.current.hasChangedField(...e):!1}getRootItem(e){var t=e;return e&&e.parentId&&(t=e.parent),t}selectColorStep(...e){this.colorsteps=e}isSelectedColorStep(e){return this.colorsteps.includes(e)}selectProject(e){ct(e)&&(e=this.modelManager.get(e)),this.project=e,this.select()}isSameIds(e){return this.ids.length!=e.length?!1:this.ids.filter(t=>e.includes(t)).length===this.ids.length}filterIds(e=[]){return e.map(t=>t.id||t).filter(Boolean)}selectByGroup(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(i=>!this.lockManager.get(i.id));const r=this.modelManager.convertGroupItems(t);return this.select(...r)}select(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(a=>!a.lock&&a.isAbsolute);const r=t.filter(a=>a.path.filter(n=>t.includes(n)).length<2),i=r.map(a=>a.id);return this.isSameIds(i)?!1:(this.itemKeys={},r.forEach(a=>{this.itemKeys[a.id]=a}),this.ids=i,this.setRectCache(),this.$editor.emit(Oe),!0)}reload(){return this.select(...this.ids)}reselect(){this.setRectCache()}check(e){return!!this.itemKeys[e.id]}hasPathOf(e){return e.hasPathOf(this.items.filter(t=>t.isNot("artboard")))}hasParent(e){return this.items.some(t=>t.hasParent(e))}get(e){return this.itemKeys[e]}empty(){this.select()}itemsByIds(e=null){let t=[];return Array.isArray(e)?t=e:(ct(e)||ti(e))&&(t=[e]),this.modelManager.searchItemsById(t)}selectById(e){this.select(e)}selectAfterCopy(){this.select(...this.items.map(e=>e.copy()))}addById(e){this.itemKeys[e]||this.select(...this.ids,e)}removeById(e){let t=e;ct(e)&&(t=[e]);const r=this.ids.filter(i=>t.includes(i)===!1);this.select(...r)}toggleById(e){this.itemKeys[e]?this.removeById(e):this.addById(e)}getArtboardByPoint(e){return this.currentProject.artboards.find(t=>ps(t.originVerties,...e))}changeInLayoutArea(){let e=!1;return this.each(t=>{if(t.is("artboard")===!1){if(t.artboard){const i=t.artboard.originVerties;if(ps(i,this.pos[0],this.pos[1]))return!1}const r=this.cachedArtBoardVerties.find(i=>ps(i.matrix.originVerties,this.pos[0],this.pos[1]));r?r.item!==t.artboard&&r.item.hasLayout()===!1&&(r.item.appendChild(t),e=!0):t.artboard&&(this.currentProject.appendChild(t),e=!0)}}),e}setRectCache(){if(this.isEmpty){this.cachedVerties=[],this.cachedRectVerties=[],this.cachedItemMatrices=[],this.ghosts=[],this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}));return}this.cachedVerties=this.verties,this.cachedRectVerties=kr(this.verties),this.cachedItemMatrices=[],this.cachedChildren=[],this.ghosts=[],this.items.forEach(e=>{if(e.is("artboard"))this.cachedItemMatrices.push(e.matrix);else if(e.hasChildren()){const t=this.modelManager.getAllLayers(e.id).map(r=>r.matrix);this.cachedChildren.push(...t.map(r=>r.id)),this.cachedItemMatrices.push(...t)}else this.cachedItemMatrices.push(e.matrix);this.ghosts.push(e.absoluteMatrix)}),this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}))}startToCacheChildren(){this.items.forEach(e=>{e.startToCacheChildren()})}recoverChildren(){this.items.forEach(e=>{e.recoverChildren()})}get verties(){return this.isOne?this.current.verties:this.rectVerties}get targetVerties(){return this.isOne?this.current.originVerties:fS(this.items)}get originVerties(){return this.rectVerties.filter((e,t)=>t<4)}get rectVerties(){return this.isEmpty?[]:Ra(this.items)}get itemRect(){const e=this.verties;return{x:e[0][0],y:e[0][1],width:Ht(e[0],e[1]),height:Ht(e[0],e[3])}}toCloneObject(){let e={};return this.each(t=>{e[t.id]=t.toCloneObject(!1)}),e}pack(...e){let t={};return this.each(r=>{t[r.id]={},e.forEach(i=>{t[r.id][i]=r[i]})}),t}packByIds(e,...t){let r={},i=[];e===null?i=this.items:(ct(e)||Array.isArray(e))&&(i=this.itemsByIds(e));const a={};return t.forEach(n=>{a[n]=!0}),i.forEach(n=>{r[n.id]=n.attrs(...t)}),r}packByValue(e,t=null){let r={},i=[];return t===null?i=this.items:(ct(t)||Array.isArray(t))&&(i=this.itemsByIds(t)),i.forEach(a=>{r[a.id]={},Object.keys(e).forEach(n=>{r[a.id][n]=de(e[n])?e[n].call(e,a):e[n]})}),r}each(e){de(e)&&this.items.forEach(t=>{e(t)})}map(e){return de(e)?this.items.map((t,r)=>e(t,r)):this.items}reset(e){Object.entries(e).forEach(([t,r])=>{var i;(i=this.get(t))==null||i.reset(r)})}resetCallback(e){this.each(t=>t.reset(e(t)))}resize(){this.each(e=>e.resize())}remove(){this.each(e=>e.remove()),this.empty()}copy(){console.warn("copy is deprecated"),this.copyItems=this.items.map(e=>e)}paste(){console.warn("paste is deprecated. use copy and paste"),this.select(...this.copyItems.map(e=>e.copy(10))),this.copy()}hasPoint(e){var t;return this.isMany?ps(this.originVerties,e[0],e[1]):(t=this.current)==null?void 0:t.hasPoint(e[0],e[1])}hasChildrenPoint(e){return this.cachedChildren.some(t=>{var r;return(r=this.modelManager.get(t))==null?void 0:r.hasPoint(e[0],e[1])})}checkChildren(e){return this.cachedChildren.includes(e)}checkHover(e){return ct(e)?this.hoverId===e:this.hoverItems.findIndex(t=>t.id===e.id)>-1}hasHoverItem(){return this.hoverId!==""}selectHoverItem(){this.select(this.hoverId)}setHoverId(e){let t=!1;return!e||this.itemKeys[e]?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):this.cachedArtBoardVerties.find(r=>r.item.id===e)?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):(this.hoverId!=e&&(t=!0),this.hoverId=e,this.hoverItems=this.itemsByIds([e]).filter(r=>r.isNot("artboard")),this.hoverItems.length===0&&(this.hoverId="",t=!0)),t&&this.$editor.emit("changeHoverItem"),t}is(...e){var t;return e.includes((t=this.current)==null?void 0:t.itemType)}isAll(...e){return this.items.every(t=>e.includes(t.itemType))}updateGridInformation(e={}){this.gridInformation=e}updateDragTargetItem(e){this.dragTargetItem=e}}const VT=3,OT={dist:Te(0,0,0)},jT="x",RT="y";function zT(s,e,t=1){return Math.abs(s[0]-e[0])e.is("project")||this.context.selection.check(e)?!1:this.context.viewport.checkInViewportArea(e.originVerties)):[]}clear(){this.snapTargetLayers=this.makeSnapTargetLayers()}convertMatrix(e){const t=this.convertGuideAndPathMatrix(e),r=t.map(a=>a[0]),i=t.map(a=>a[1]);return{id:e.id,xList:r,yList:i,verties:t,rectVerties:Eu(e.originVerties)}}convertGuideAndPathMatrix(e){return[...e.guideVerties]}get snapTargetLayersWithSelection(){return this.context.selection.currentProject?this.context.selection.currentProject.allLayers.filter(e=>e.is("project")?!1:e.verties.some(r=>this.context.viewport.checkInViewport(r))):[]}getSnapPoints(){const e=[];return this.snapTargetLayersWithSelection.forEach(t=>{e.push.apply(e,this.convertGuideAndPathMatrix(t))}),e}checkX(e,t,r=0){const i=[];return e.forEach((a,n)=>{t.forEach((o,l)=>{Math.abs(a-o)<=r&&i.push({targetX:a,sourceX:o,sourceIndex:l,targetIndex:n,dx:a-o})})}),i}checkY(e,t,r=0){const i=[];return e.forEach((a,n)=>{t.forEach((o,l)=>{const c=a-o;Math.abs(c)<=r&&i.push({targetY:a,sourceY:o,sourceIndex:l,targetIndex:n,dy:c})})}),i}check(e,t=0){const r=[],i=e.map(l=>l[0]),a=e.map(l=>l[1]),n=this.context.config.get("horizontal.line"),o=this.context.config.get("vertical.line");if(n&&o){const l=this.checkX(n,i,t)[0],c=this.checkY(o,a,t)[0],h=Te(l?l.dx:0,c?c.dy:0,0);(Hs(h[0])||Hs(h[1]))&&r.push({target:null,dist:h})}return this.snapTargetLayers.forEach(l=>{const c=this.checkX(l.xList,i,t)[0],h=this.checkY(l.yList,a,t)[0],u=Te(c?c.dx:0,h?h.dy:0,0);(Hs(u[0])||Hs(u[1]))&&r.push({target:l,dist:u})}),r.find(l=>Hs(l[0])||Hs(l[1]))||OT}checkPoint(e){const t=this.check([e]);return Pe([],e,t.dist)}getGuidesByPointPoint(e,t,r=0){const i=[],a={};let n,o;for(let l=0,c=e.length;l{if(a[l]&&a[l].length){const c=a[l].sort((h,u)=>h[3]-u[3]);i.push(...c)}}),i}findGuide(e,t=0){const r=[];return this.snapTargetLayers.forEach(i=>{const a=this.getGuidesByPointPoint(e,i.guideVerties,t);r.push.apply(r,a)}),r.sort((i,a)=>i[3]-a[3]),r.filter((i,a)=>a<10)}findGuideOne(e){return[this.findGuide(e)[0]]}getWorldPosition(){const e=Zi([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return Pe([],t.dist,e)}getSnapTarget(){const e=Zi([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return{vertex:Pe([],t.dist,e),snap:t}}}class FT{constructor(e){this.$editor=e,this.items=[],this.itemKeys={}}initialize(){this.items=[],this.itemKeys={}}currentProject(e){var t=this.$editor.context.selection.currentProject;t&&e&&e(t)}empty(){this.select()}each(e){this.items.forEach((t,r)=>{e&&e(t,r)})}refreshCache(e){this.items=e,this.itemKeys={},this.items.forEach(t=>{this.itemKeys[t.id]=t})}cachedList(){return this.items.map(e=>b({},e))}checked(e){return!!this.itemKeys[e]}selectLayer(e){this.currentProject(t=>{var r=t.getKeyframeListReturnArray().filter(i=>i.layerId===e);this.refreshCache(r)})}toggleLayerContainer(e){this.currentProject(t=>{t.getSelectedTimeline().animations.filter(r=>r.id===e).forEach(r=>{r.collapsed=!r.collapsed})})}selectProperty(e,t){this.currentProject(r=>{var i=r.getKeyframeListReturnArray().filter(a=>a.layerId===e&&a.property===t);this.refreshCache(i)})}select(...e){this.refreshCache(e)}selectBySearch(e,t,r){this.currentProject(i=>{var a=[];e.forEach(o=>{var l=[];if(o.property){var c=i.getTimelineProperty(o.layerId,o.property);l=c.keyframes.filter(h=>t<=h.time&&h.time<=r)}else{var c=i.getTimelineObject(o.layerId);c.properties.filter(u=>u.property===o.property).forEach(u=>{l.push.apply(l,u.keyframes.filter(d=>t<=d.time&&d.time<=r))})}a.push.apply(a,l)});var n={};a.forEach(o=>{n[o.id]=o}),this.select(...Object.values(n))})}checkLayer(e){return Object.keys(this.itemKeys).some(t=>this.itemKeys[t].layerId===e)}checkProperty(e,t){return Object.keys(this.itemKeys).some(r=>this.itemKeys[r].layerId===e&&this.itemKeys[r].property===t)}}class BT{constructor(e){this.editor=e,this.hiddenList={}}get list(){return Object.keys(this.hiddenList)}get(e){return!this.hiddenList[e]}set(e,t){t?delete this.hiddenList[e]:this.hiddenList[e]=!0}toggle(e){this.get(e)?this.set(e,!1):this.set(e,!0)}}class NT extends Io{template(){return` +
        +
          + ${this.props.items.map((e,t)=>hc(e,`${this.groupId}-${t}`)).join("")} +
        +
        + `}}class GT extends X{checkProps(e={}){return e}components(){return{ContextDropdownMenu:NT,ToolbarButtonMenuItem:pu}}template(){return'
        '}[G("$el")](){var e;return(e=this.props.items)==null?void 0:e.map((t,r)=>this.renderMenuItem(t,r))}renderMenuItem(e,t){switch(e.type){case ji.LINK:return this.renderLink(e,t);case ji.SUBMENU:return this.renderMenu(e,t);case ji.BUTTON:return this.renderButton(e,t);case ji.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return O("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,checked:e.checked,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return O("ContextDropdownMenu",ie(b({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,events:e.events||[]}))}}class HT extends X{template(){return w("div",{class:"elf--context-menu-view"})}[ae("$el")](){const e=this.$context.config.get("context.menu.open");if(!!e)return{style:{left:p.px(e.x),top:p.px(e.y+10)}}}[G("$el")](){const e=this.$context.config.get("context.menu.open");if(!e)return;const t=this.$menu.getTargetMenu(e.target)||[];return w(GT,{items:[{type:"dropdown",items:[...t,...e.items||[]]}]})}[Ct("context.menu.open")](){this.refresh(),this.$context.config.get("context.menu.open")?this.$el.show():this.$el.hide()}close(){this.$el.hide(),this.$context.config.set("context.menu.open",null)}[ve("document")](e){const r=ge.create(e.target).closest("elf--context-menu-view");r?r.el!==this.$el.el&&this.close():this.close()}}class Zu extends Er{getIconString(){return"align_vertical_bottom"}getTitle(){return"Bottom"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.bottom")}}class qu extends Er{getIconString(){return"align_horizontal_center"}getTitle(){return"Center"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.center")}}class Qu extends Er{getIconString(){return"align_horizontal_left"}getTitle(){return"Left"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.left")}}class Ju extends Er{getIconString(){return"align_vertical_center"}getTitle(){return"middle"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.middle")}}class ep extends Er{getIconString(){return"align_horizontal_right"}getTitle(){return"Right"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.right")}}class tp extends Er{getIconString(){return"vertical_distribute"}getTitle(){return"height"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.height")}}class rp extends Er{getIconString(){return"horizontal_distribute"}getTitle(){return"width"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.width")}}class ip extends Er{getIconString(){return"align_vertical_top"}getTitle(){return"Top"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.top")}}class Ne extends X{onToggleShow(){}template(){return` +
        + ${this.isHideHeader()?"":` +
        + + ${this.getTools()} +
        `} +
        ${this.getBody()}
        + ${this.getFooter()?`
        ${this.getFooter()}
        `:""} +
        + `}[ae("$el")](){return{style:{"--property-order":this.order}}}setTitle(e){this.refs.$propertyTitle.html(e)}hasKeyframe(){return!1}isHideHeader(){return!1}isFirstShow(){return!0}getClassName(){return""}getTitleClassName(){return""}getBodyClassName(){return""}getKeyframeProperty(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}getFooter(){return""}isPropertyShow(){return this.$el.hasClass("show")}toggle(e){this.$el.toggle(e)}hide(){this.$el.hide()}show(){this.$el.show()}onShowTitle(){}refreshShowIsNot(e="",t=!0){var r=this.$context.selection.current;r&&(e.includes(r.itemType)?this.hide():(this.show(),t&&this.refresh()))}refreshShow(e,t=!0){var r=this.$context.selection.current;r?de(e)&&e()?(this.show(),t&&this.refresh()):!de(e)&&e.includes(r.itemType)?(this.show(),t&&this.refresh()):this.hide():this.hide()}startInputEditing(e){!e||(e.attr("contenteditable",!0),e.css({"background-color":"white",outline:"1px auto black",color:"black"}),e.focus())}endInputEditing(e,t){if(!!e){e.attr("contenteditable",!1),e.css({"background-color":null,outline:null,color:null});var r=e.attr("data-index");t&&t(r,e.text().trim()),e.blur()}}get editableProperty(){return""}get order(){return 1e3}checkShow(){return this.$context.selection.current?this.$context.selection.current.editable(this.editableProperty)?(this.show(),!0):(this.hide(),!1):(this.hide(),!1)}}class UT extends Ne{components(){return{LeftAlign:Qu,CenterAlign:qu,RightAlign:ep,TopAlign:ip,MiddleAlign:Ju,BottomAlign:Zu,SameWidth:rp,SameHeight:tp}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` +
        + ${ko("LeftAlign","CenterAlign","RightAlign","TopAlign","MiddleAlign","BottomAlign",["SameWidth",{direction:"bottom"}],"SameHeight")} +
        + `}}function WT(s){s.registerUI("inspector.tab.style",{AlignmentProperty:UT})}function sp(s,e="@"){return`${e}${s.startIndex}`.padEnd(10,"0")}function XT(s,e){const t=s.match(e);let r=[];if(!t)return r;for(var i=0,a=t.length;i{const l=s.indexOf(o.parsedString,n.next);o.startIndex=l,o.endIndex=l+o.parsedString.length,n.next=o.endIndex}),r}function ap(s,e){const t=XT(s,e);return t.forEach(r=>{s=s.replace(r.parsedString,sp(r))}),{str:s,matches:t}}function Ql(s,e){return e.forEach(t=>{s=s.replace(sp(t),t.parsedString)}),s}const YT=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Tt extends sr{static parse(e){return new Tt(e)}getDefaultObject(){return{itemType:"animation",checked:!0,name:"none",direction:"normal",duration:p.second(0),timingFunction:"linear",delay:p.second(0),iterationCount:p.string("infinite"),playState:"running",fillMode:"none"}}convert(e){return e=super.convert(e),e.duration=p.parse(e.duration),e.iterationCount=p.parse(e.iterationCount),e}toCloneObject(){return b({},this.attrs("name","direction","duration","timingFunction","delay","iterationCount","playState","fillMode"))}togglePlayState(e){e?this.reset({playState:e==="running"?"running":"paused"}):this.json.playState==="paused"?this.reset({playState:"running"}):this.reset({playState:"paused"})}toCSS(){return this.json.name?{animation:this.toString()}:{}}toString(){var e=this.json;return[e.duration,e.timingFunction,e.delay,e.iterationCount,e.direction,e.fillMode,e.playState,e.name].join(" ")}static join(e){return e.map(t=>new Tt(t).toString()).join(",")}static add(e,t={}){const r=Tt.parseStyle(e);return r.push(Tt.parse(t)),Tt.join(r)}static remove(e,t){return Tt.filter(e,(r,i)=>t!=i)}static filter(e,t){return Tt.join(Tt.parseStyle(e).filter(r=>t(r)))}static replace(e,t,r){var i=Tt.parseStyle(e);return i[t]?i[t]=r:i.push(r),Tt.join(i)}static get(e,t){var r=Tt.parseStyle(e);return r[t]}static parseStyle(e){var t=[];if(!e)return t;const r=ap(e,YT);return t=r.str.split(",").map(i=>{const a=i.split(" ").filter(Boolean);return a.length>=7?{duration:p.parse(a[0]),timingFunction:Ql(a[1],r.matches),delay:p.parse(a[2]),iterationCount:a[3]==="infinite"?p.string("infinite"):p.parse(a[3]),direction:a[4],fillMode:a[5],playState:a[6],name:a[7]}:a.length>=3?{duration:p.parse(a[0]),timingFunction:Ql(a[1],r.matches),delay:p.parse(a[2]),name:a[3]}:a.length>=1?{duration:p.parse(a[0]),name:a[1]}:{}}),t.map(i=>Tt.parse(i))}}class KT extends Ne{getTitle(){return this.$i18n("animation.property.title")}getBody(){return"
        "}getTools(){return` + + `}isFirstShow(){return!0}[G("$animationList")+Ee](){var e=this.$context.selection.current;return e?Tt.parseStyle(e.animation).map((t,r)=>{const i=this.state.selectedIndex===r?"selected":"",a=hs(t.timingFunction,30,30);return` +
        +
        +
        + + + +
        +
        +
        + ${t.name?t.name:`< ${this.$i18n("animation.property.select a keyframe")} >`} +
        +
        + + + + + + +
        +
        +
        + +
        +
        +
        + `}):""}[M(Oe)+He(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("animation")&&this.refresh(),this.emit("hideAnimationPropertyPopup")}[z("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add animation property",this.$context.selection.packByValue({animation:t=>Tt.add(t.animation,{name:null})})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}[z("$animationList .tools .del")](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.reset({animation:Tt.remove(r.animation,t)}),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Tt.remove(r.animation,t)})),this.refresh())}[z("$animationList .play-state")](e){var t=+e.$dt.attr("data-index"),r=this.$context.selection.current;if(!r)return;const i=Tt.parseStyle(r.animation);var a=i[t];a&&(a.togglePlayState(),e.$dt.attr("data-play-state-selected-value",a.playState),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Tt.join(i)})))}selectItem(e,t=!0){t?this.refs[`animationIndex${e}`].addClass("selected"):this.refs[`animationIndex${e}`].removeClass("selected")}viewAnimationPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentAnimation=Tt.get(this.current.animation,this.selectedIndex),this.viewAnimationPropertyPopup())}viewAnimationPropertyPopup(){if(!this.currentAnimation)return;const e=this.currentAnimation;this.emit("showAnimationPropertyPopup",{changeEvent:"changeAnimationPropertyPopup",data:e.toCloneObject(),instance:this})}[z("$animationList .preview")](e){this.viewAnimationPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[M("changeAnimationPropertyPopup")](e){this.currentAnimation&&(this.currentAnimation.reset(b({},e)),this.current&&(this.$commands.executeCommand("setAttribute","change animation property",this.$context.selection.packByValue({animation:t=>Tt.replace(t.animation,this.selectedIndex,this.currentAnimation)})),this.refresh()))}}class Lr extends X{template(){return` +
        +
        + + + ${this.getTools()} + + +
        +
        ${this.getBody()}
        + +
        + `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}onClose(){}[z("$close")](){this.$el.hide(),this.onClose()}setTitle(e){this.refs.$title.$("label").text(e)}[ve("$title")+_e("movePopupTitle")+Se("endPopupTitle")](){this.x=p.parse(this.$el.css("left")),this.y=p.parse(this.$el.css("top"))}movePopupTitle(e,t){var r=p.px(this.x.value+e),i=p.px(this.y.value+t);this.$el.css({left:r,top:i,right:"auto",bottom:"auto"})}show(e=200){var t=28,r=320,i=this.$el.css("top"),a=this.$el.css("left"),n=i!=="auto"?p.parse(i):110,o=a!=="auto"?p.parse(a):document.body.clientWidth-r-t-e;this.$el.css({top:p.px(n),left:p.px(o),"z-index":this.$editor.zIndex}).show("inline-block")}makeRect(e,t,r){const a=this.$config.get("editor.layout.elements").$bodyPanel.rect();let n=a.left+a.width-e-10,o=r.top+t>a.top+a.height?a.top+a.height-t-10:r.top;return o<10&&(o=10),{top:o,left:n,width:e,height:t}}showByRect(e){this.$el.css({top:p.px(e.top),left:p.px(e.left),width:p.px(e.width),height:p.px(e.height),"z-index":this.$editor.zIndex}).show("inline-block")}hide(){this.$el.hide()}[M("hidePropertyPopup")](){this.hide()}[ve("$resizer")+_e("moveResizer")](){this.width=p.parse(this.$el.css("width")),this.height=p.parse(this.$el.css("height"))}moveResizer(e,t){this.$el.css({width:Math.min(this.width+e,1e3),height:Math.min(this.height+t,700)})}}class ZT extends Lr{getTitle(){return this.$i18n("animation.property.popup.title")}initState(){return{changeEvent:"",instance:{},data:{}}}updateData(e){this.state.data=b(b({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
        "}[G("$popup")](){return` +
        + ${this.templateForKeyframe()} + ${this.templateForTimingFunction()} + ${this.templateForIterationCount()} + ${this.templateForDelay()} + ${this.templateForDuration()} + ${this.templateForDirection()} + ${this.templateForFillMode()} + ${this.templateForPlayState()} +
        + `}templateForTimingFunction(){return` +
        + + ${O("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} +
        + `}templateForKeyframe(){return` +
        + +
        + +
        +
        + `}[G("$name")](){var e=this.$context.selection.currentProject,t=[];return e&&e.keyframes&&(t=e.keyframes.map(r=>({key:r.name,value:r.name}))),t.unshift({key:"Select a keyframe",value:""}),t.map(r=>{var i=r.value===this.name?"selected":"",a=this.$i18n(r.key);return``})}[Tr("$name")](){this.updateData({name:this.refs.$name.value})}templateForDirection(){var e="normal,reverse,alternate,alternate-reverse".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return` +
        + ${O("SelectEditor",{label:this.$i18n("animation.property.popup.direction"),ref:"$direction",key:"direction",value:this.state.data.direction,options:e,onChange:"changeSelect"})} +
        + `}[K("changeSelect")](e,t){this.updateData({[e]:t})}templateForPlayState(){return` +
        + ${O("SelectEditor",{label:this.$i18n("animation.property.popup.play.state"),ref:"$playState",key:"playState",value:this.state.data.playState,options:["paused","running"],onChange:"changeSelect"})} +
        + `}templateForFillMode(){var e="none,forwards,backwards,both".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return` +
        + ${O("SelectEditor",{label:this.$i18n("animation.property.popup.fill.mode"),ref:"$fillMode",key:"fillMode",value:this.state.data.fillMode,options:e,onChange:"changeSelect"})} +
        + `}templateForDelay(){return` +
        + ${O("RangeEditor",{ref:"$delay",label:this.$i18n("animation.property.popup.delay"),key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} +
        + `}templateForDuration(){return` +
        + ${O("RangeEditor",{ref:"$duration",label:this.$i18n("animation.property.popup.duration"),key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} +
        + `}templateForIterationCount(){return` +
        + ${O("IterationCountEditor",{ref:"$iterationCount",label:this.$i18n("animation.property.popup.iteration"),key:"iterationCount",value:this.state.iterationCount||0,units:["normal","infinite"],onChange:"changeRangeEditor"})} +
        + `}[K("changeRangeEditor")](e,t){e==="iterationCount"&&(t.unit==="normal"?t=p.number(t.value):t=p.string(t.unit)),this.updateData({[e]:t})}[K("changeCubicBezier")](e,t){this.updateData({[e]:t})}[M("showAnimationPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[M("hideAnimationPropertyPopup")](){this.$el.hide()}}function qT(s){s.registerUI("inspector.tab.transition",{AnimationProperty:KT}),s.registerUI("popup",{AnimationPropertyPopup:ZT})}class Ro{static create(e){return class extends Ne{getTitle(){return e.title}getClassName(){return e.className||"item"}get editableProperty(){return e.editableProperty}get order(){return wt(e.order)?1e3:e.order}afterComponentRendering(t,r,i){var a;if(r=="$comp"){const n=((a=this.$context.selection)==null?void 0:a.current)||{},o=de(e.inspector)?e.inspector(n):this.$context.components.createInspector(n,e.editableProperty);i.setInspector(o)}}refresh(){const t=this.$context.selection.current||{};(t||e.visible)&&(this.setTitle(e.title||t.getDefaultTitle()||t.itemType||t.name),this.load())}[M(Oe)+fe("checkShow")](){e.preventUpdate?this.$stateManager.isPointerUp&&this.refresh():this.refresh()}[G("$body")](){var i;var t=(i=this.$context.selection)==null?void 0:i.current;if(!t&&!e.visible)return"";const r=de(e.inspector)?e.inspector(t||{}):this.$context.components.createInspector(t||{},e.editableProperty);return O("ComponentEditor",{ref:"$comp",inspector:r,onchange:"changeComponentProperty"})}getBody(){return"
        "}[K("changeComponentProperty")](t,r){e.action?this.$commands.executeCommand(e.action,`change attribute : ${t}`,t,r):this.$commands.executeCommand("setAttribute",`change attribute : ${t}`,this.$context.selection.packByValue({[t]:r}))}}}}function QT(s){s.registerUI("inspector.tab.style",{AppearanceProperty:Ro.create({title:s.$i18n("background.color.property.title"),editableProperty:"appearance",preventUpdate:!0,inspector:e=>[{type:"column",size:[1,1],columns:[{key:"backgroundColor",editor:"color-view",editorOptions:{compact:!0,format:!0},defaultValue:e.backgroundColor},{key:"mixBlendMode",editor:"blend-select",editorOptions:{label:"tonality",compact:!0},defaultValue:e.mixBlendMode||Nt.NORMAL}]},{key:"overflow",editor:"select",editorOptions:{label:s.$i18n("background.color.property.overflow"),options:[Ma.VISIBLE,Ma.HIDDEN,Ma.SCROLL,Ma.AUTO].map(t=>({value:t,text:s.$i18n(`background.color.property.overflow.${t}`)}))},defaultValue:e.overflow}]})})}var bl=[{category:"Web",groups:[{group:"Landscape",devices:[{device:"Web Small",size:"1024x600"},{device:"Web Medium",size:"1280x800"},{device:"Web Large",size:"1440x900"},{device:"Web X Large",size:"1920x1200"}]},{group:"Portrait",devices:[{device:"Web Small",size:"600x1024"},{device:"Web Medium",size:"800x1280"},{device:"Web Large",size:"900x1440"},{device:"Web X Large",size:"1200x1920"}]}]},{category:"Apple Devices",groups:[{group:"iphone",devices:[{device:"iPhone 8",size:"375x667"},{device:"iPhone 8 Plus",size:"414x736"},{device:"iPhone SE",size:"320x568"},{device:"iPhone XS",size:"375x812"},{device:"iPhone XR",size:"414x896"},{device:"iPhone XS Max",size:"414x896"}]},{group:"ipad",devices:[{device:"iPad",size:"768x1024"},{device:"iPad Pro",size:"1024x1366"}]},{group:"apple watch",devices:[{device:"Apple Watch 38nm",size:"272x340"},{device:"Apple Watch 40nm",size:"326x394"},{device:"Apple Watch 42nm",size:"313x390"},{device:"Apple Watch 44nm",size:"368x448"}]},{group:"apple tv",devices:[{device:"Apple TV",size:"1920x1080"}]},{group:"MAC",devices:[{device:"Touch Bar",size:"1085x30"}]}]},{category:"Android Devices",groups:[{group:"android mobile",devices:[{device:"Android Mobile",size:"360x640"}]},{group:"android tablet",devices:[{device:"Android Tablet",size:"768x1024"}]}]}];class JT extends Ne{getClassName(){return"elf--artboard-size-list"}get editableProperty(){return"artboardSize"}[M(Oe)+fe("checkShow")](){this.refresh()}initState(){return{selectedIndex:0}}getTitle(){return"ArtBoard Preset"}getTools(){var e=bl.map((t,r)=>({category:t.category,index:r}));return O("SelectEditor",{ref:"$select",value:e[0].category,options:e.map(t=>t.category),onchange:"changeSizeIndex"})}[K("changeSizeIndex")](e,t){var r=this.state.selectedIndex;bl.forEach((i,a)=>{i.category===t&&(r=a)}),this.state.selectedIndex=r,this.refresh()}getBody(){return` +
        + `}makeDevice(e){return` +
        +
        ${e.device}
        +
        ${e.size}
        +
        + `}[z("$list .device-item")](e){var t=e.$dt.attr("data-size");this.$commands.emit("resizeArtBoard",t)}makeGroup(e){return` +
        +
        ${e.group}
        +
        +
        + ${e.devices.map(t=>this.makeDevice(t)).join("")} +
        + `}makeCategory(e){return` +
        +
        ${e.category}
        +
        +
        + ${e.groups.map(t=>this.makeGroup(t)).join("")} +
        + `}[G("$list")+Ee](){var e=bl[this.state.selectedIndex];return e.groups.map(t=>this.makeGroup(t))}}function e3(s){s.registerUI("inspector.tab.style",{ArtBoardSizeProperty:JT})}const t3=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class r3 extends Ne{getTitle(){return this.$i18n("backdrop.filter.property.title")}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
        "}getTools(){return` + + + `}[z("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[G("$filterSelect")](){var e=t3.map(i=>({title:this.$i18n(`filter.property.${i}`),value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(r=>({title:`svg - #${r.id}`,value:r.id}))),t}[G("$body")](){var e=this.$context.selection.current||{},t=e.backdropFilter;return` +
        + ${O("FilterEditor",{ref:"$filterEditor",key:"backdropFilter",value:t,hideLabel:!0,onchange:"changeFilterEditor"})} +
        + `}[K("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change backdrop filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"backdropFilter"}[M(Oe)+fe("checkShow")+He(1e3)](){this.refresh()}}function i3(s){s.registerUI("inspector.tab.style",{BackdropFilterProperty:r3})}class s3 extends Ne{getTitle(){return"Background Clip"}isFirstShow(){return!1}getTools(){return"
        "}[G("$backgroundClip")](){var e=this.$context.selection.current||{},t=e.backgroundClip||"";return O("SelectEditor",{ref:"$1",key:"backgroundClip",icon:!0,value:t,options:["","paddinb-box","border-box","content-box","text"],onchange:"changeSelect"})}[K("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change background clip",this.$context.selection.packByValue({[e]:t}))}[M(Oe)+He(100)](){this.refreshShow(["rect","circle","text"])}}function a3(s){s.registerElement({BackgroundClipProperty:s3})}const rd={image:"image","image-resource":"image",url:"image","static-gradient":"gradient","linear-gradient":"gradient","repeating-linear-gradient":"gradient","radial-gradient":"gradient","repeating-radial-gradient":"gradient","conic-gradient":"gradient","repeating-conic-gradient":"gradient"};class n3 extends X{initState(){return{hideLabel:this.props.hideLabel||!1,value:this.props.value,images:this.parseBackgroundImage(this.props.value)}}parseBackgroundImage(e){return e===""?[]:De.parseStyle(vr(e))}setValue(e){this.setState({value:e,images:this.parseBackgroundImage(e)})}template(){return` +
        +
        +
        + `}[G("$fillList")+Ee](){const e=this.$context.selection.current||{color:"black"};return this.state.images.map((t,r)=>{var i=t.image,a=rd[i.type];const n=t.selected?"selected":"";return t.selected&&(this.selectedIndex=r),` +
        + + ${ko(["BackgroundPositionEditor",{key:"background-position",index:r,ref:`$bp${r}`,x:t.x,y:t.y,width:t.width,height:t.height,repeat:t.repeat,size:t.size,blendMode:t.blendMode,onchange:"changePattern"}],["GradientSingleEditor",{index:r,ref:`$gse${r}`,image:t.image,color:e.color,key:"background-image",onchange:"changePattern"}])} +
        +
        +
        + ${O("BlendSelectEditor",{ref:`$blend_${r}`,key:"blendMode",value:t.blendMode,params:r,compact:!0,onchange:"changeRangeEditor"})} +
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        + `})}modifyBackgroundImage(){var e=Ze(De.toProperty(this.state.images));this.parent.trigger(this.props.onchange,this.props.key,e)}makeGradient(e){switch(e){case"static-gradient":return"static-gradient(black)";case"linear-gradient":return"linear-gradient(90deg, white 0%, black 100%)";case"repeating-linear-gradient":return"repeating-linear-gradient(90deg, white 2%, black 4%)";case"radial-gradient":return"radial-gradient(circle, white 0%, black 100%)";case"repeating-radial-gradient":return"repeating-radial-gradient(circle, white 2%, black 4%)";case"conic-gradient":return"conic-gradient(white 0%, black 100%)";case"repeating-conic-gradient":return"repeating-conic-gradient(white 50%, black 100%)"}}[M("add")](e){this.state.images.unshift(new De({image:De.parseImage(this.makeGradient(e))})),this.refresh(),this.modifyBackgroundImage()}[z("$add")](){this.trigger("add")}[yr("$fillList .fill-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$fillList .fill-item")+Le](){}sortItem(e,t,r){e.splice(r+(t{r.selected=i===e})}[M("selectFillPopupTab")](e){var t=rd[e],r=this.refs[`fillIndex${this.selectedIndex}`];r.attr("data-fill-type",t)}[K("changeRangeEditor")](e,t,r){this.trigger("changePattern",e,{[e]:t},r)}[K("changePattern")](e,t,r){var i=+r,a=this.state.images[i];a.reset(t),this.modifyBackgroundImage(),this.refresh()}}class o3 extends Lr{get localeKey(){return"background.image.position.popup"}getTitle(){return this.$i18n("title")}initState(){return{size:this.props.size||"auto",repeat:this.props.repeat||"repeat",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e,this.state.params)}templateForSize(){return O("SelectEditor",{label:this.$i18n("size"),ref:"$size",key:"size",value:this.state.size,options:["contain","cover","auto"],onchange:"changeRangeEditor"})}[K("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){return O("InputRangeEditor",{label:"X",compact:!0,ref:"$x",key:"x",value:this.state.x,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForY(){return O("InputRangeEditor",{label:"Y",compact:!0,ref:"$y",key:"y",value:this.state.y,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForWidth(){return O("InputRangeEditor",{label:"W",compact:!0,ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return O("InputRangeEditor",{label:"H",compact:!0,ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForRepeat(){return` +
        + +
        +
        + + + + + + +
        + `}[z("$repeat button")]({$dt:e}){this.refs.$repeat.attr("data-value",e.value),this.updateData({repeat:e.value})}getBody(){return` +
        + `}[G("$picker")+Ee](){return` + +
        + +
        + ${this.templateForSize()} + ${this.templateForX()} + ${this.templateForY()} + ${this.templateForWidth()} + ${this.templateForHeight()} + ${this.templateForRepeat()} +
        +
        + `}[M("showBackgroundImagePositionPopup")](e,t,r){this.state.changeEvent=e.changeEvent||"changeFillPopup",this.state.params=t,this.setState(e.data),this.showByRect(this.makeRect(180,310,r))}}class l3 extends Ne{getTitle(){return this.$i18n("background.image.property.title")}afterRender(){this.show()}getClassName(){return"background-image"}getBodyClassName(){return"no-padding"}getBody(){return w("div",{class:"full",ref:"$property"})}getTools(){return w("div",{class:"fill-sample-list",ref:"$add"},w("button",{type:"button",class:"fill","data-value":"static-gradient"},R("add")))}[z("$add [data-value]")](e){this.children.$backgroundImageEditor.trigger("add",e.$dt.data("value"))}[G("$property")](){var e=this.$context.selection.current||{},t=e.backgroundImage||"";return O("BackgroundImageEditor",{ref:"$backgroundImageEditor",key:"backgroundImage",value:t,onchange:"changeBackgroundImage"})}get editableProperty(){return"backgroundImage"}[M(Oe)+fe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[M(Lt)+fe("checkCurrentItem")+He(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("backgroundImage")&&this.refresh()}[K("changeBackgroundImage")](e,t){this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[e]:t}))}}class c3 extends X{initState(){return{index:this.props.index,x:this.props.x,y:this.props.y,width:this.props.width,height:this.props.height,repeat:this.props.repeat,size:this.props.size,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ae("$miniView")](){return{style:{"background-image":"linear-gradient(to top right, black, white)","background-repeat":this.state.repeat,"background-size":"10px 10px"}}}template(){return` +
        +
        +
        +
        +
        +
        +
        + `}[z("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){this.emit("showBackgroundImagePositionPopup",{changeEvent:"changeBackgroundPositionPattern",data:this.state},{id:this.id},this.$el.rect())}[M("changeBackgroundPositionPattern")](e,t){t.id===this.id&&this.updateData(b({},e))}}function h3(s){s.registerElement({BackgroundImageEditor:n3,BackgroundPositionEditor:c3}),s.registerUI("inspector.tab.style",{BackgroundImageProperty:l3}),s.registerUI("popup",{BackgroundImagePositionPopup:o3})}var d3={none:!0,hidden:!0,dotted:!0,dashed:!0,solid:!0,double:!0,groove:!0,ridge:!0,inset:!0,outset:!0};class Xi{static parseStyle(e){return vr(e)}static parseValue(e=""){var t="",r="",i="";return e.split(" ").filter(a=>a.trim()).forEach(a=>{d3[a]?t=a:oS(a)?i=a:r=p.parse(a).value}),{style:t,color:i,width:r}}static joinValue(e){return`${e.width}px ${e.style||"solid"} ${e.color}`}static join(e){var t=[e.border?`border: ${e.border}`:"",e["border-top"]?`border-top: ${e["border-top"]}`:"",e["border-left"]?`border-left: ${e["border-left"]}`:"",e["border-right"]?`border-right: ${e["border-right"]}`:"",e["border-bottom"]?`border-bottom: ${e["border-bottom"]}`:""].filter(r=>r);return t.join(";")}}const u3=["border"],p3={border:"all","border-top":"top","border-right":"right","border-bottom":"bottom","border-left":"left"};class g3 extends X{initState(){var e=Xi.parseStyle(this.props.value),t=Object.keys(e)[0]||"border";return{direction:t,borders:e}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return Xi.join(this.state.borders)}setValue(e){this.state.borders=Xi.parseStyle(e),this.refresh()}[G("$editorArea")](){return u3.map(e=>{var t=p3[e]||e;return t=this.$i18n("border.editor."+t),` +
        + ${O("BorderValueEditor",{ref:`$${e}`,label:t,key:e,value:this.state.borders[e],onchange:"changeKeyValue"})} +
        + `})}template(){return` +
        +
        + +
        +
        + `}[K("changeKeyValue")](e,t){var r=this.state.borders;r[e]=t,this.updateData({borders:r})}}class f3 extends Ne{getTitle(){return this.$i18n("border.property.title")}getBody(){return`
        `}[G("$body")](){var e=this.$context.selection.current||{},t=e.border||"";return O("BorderEditor",{ref:"$1",key:"border",value:t,onchange:"changeKeyValue"})}get editableProperty(){return"border"}[M(Oe)+He(100)+fe("checkShow")](){this.refresh()}[K("changeKeyValue")](e,t){this.$commands.executeCommand("setAttribute","change border",this.$context.selection.packByValue({[e]:t}))}}const m3=[Yr.NONE,Yr.HIDDEN,Yr.SOLID,Yr.DASHED,Yr.DOTTED,Yr.DOUBLE,Yr.GROOVE,Yr.RIDGE,Yr.INSET,Yr.OUTSET].join(",");class v3 extends X{initState(){return{value:Xi.parseValue(this.props.value)}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return Xi.joinValue(this.state.value)}setValue(e){this.state.value=Xi.parseValue(e),this.refresh()}refresh(){const e=p.parse(this.state.value.width==="undefined"?0:this.state.value.width);this.children.$width.setValue(e.value||0),this.children.$style.setValue(this.state.value.style||"solid"),this.children.$color.setValue(this.state.value.color||"rgba(0, 0, 0, 1)")}template(){var{width:e,style:t,color:r}=this.state.value;return` +
        +
        + ${O("NumberInputEditor",{label:R("line_weight"),compact:!0,ref:"$width",min:0,max:100,step:1,key:"width",value:e,onchange:"changeKeyValue"})} + ${O("SelectEditor",{ref:"$style",key:"style",label:R("line_style"),title:"Style",compact:!0,options:m3,value:t||"solid",onchange:"changeKeyValue"})} + ${O("ColorViewEditor",{ref:"$color",key:"color",mini:!0,value:r||"rgba(0, 0, 0, 1)",onchange:"changeKeyValue"})} +
        +
        + `}[K("changeKeyValue")](e,t){var r=this.state.value;r[e]=t,this.updateData({value:r})}}function y3(s){s.registerElement({BorderEditor:g3,BorderValueEditor:v3}),s.registerUI("inspector.tab.style",{BorderProperty:f3})}const np=[{key:"top",title:"Top"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"},{key:"right",title:"Right"}],id=np.map(s=>s.key),xl={image:"Image","static-gradient":"Static","linear-gradient":"Linear","repeating-linear-gradient":`${ne.repeat} Linear`,"radial-gradient":"Radial","repeating-radial-gradient":`${ne.repeat} Radial`,"conic-gradient":"Conic","repeating-conic-gradient":`${ne.repeat} Conic`};class b3 extends Ne{getTitle(){return"Border Image"}[M(Oe)](){this.refresh()}getTools(){var e=this.$context.selection.current||{},t=e.appliedBorderImage||!1;return` + + `}[z("$apply")](){var e=this.$context.selection.current;if(!!e){var t=this.refs.$apply.checked();this.$commands.executeCommand("setAttribute",this.$context.selection.packByValue({applyBorderImage:t}))}}getColorStepList(e){switch(e.type){case"static-gradient":case"linear-gradient":case"repeating-linear-gradient":case"radial-gradient":case"repeating-radial-gradient":case"conic-gradient":case"repeating-conic-gradient":return this.getColorStepString(e.colorsteps)}return""}getColorStepString(e){return e.map(t=>`
        `).join("")}[G("$borderImageView")](){var e=this.$context.selection.current||{borderImage:{image:{}}},t=e.borderImage,r=t.type?xl[t.type]:"";return` +
        +
        +
        +
        +
        +
        +
        +
        ${r}
        +
        + ${this.getColorStepList(t.image)} +
        +
        +
        + `}[K("changeBorderImage")](e,t){e==="border-image-slice"&&id.forEach(r=>{this.children[`$${r}Slice`].setValue(t)}),this.setBorderImageProperty()}getBody(){return` +
        +
        +
        + + +
        +
        + ${O("RangeEditor",{ref:"$allSlice",key:"border-image-slice",onchange:"changeBorderImage"})} +
        +
        + + `}[Tr("$sliceSettingBox select")](){this.setBorderImageProperty()}[z("$borderImageView .preview")](){this.viewFillPopup(this.refs.$preview,"")}[z("$borderImageView .colorsteps .step")](e){this.refs.$colorsteps.$('[data-selected="true"]').removeAttr("data-selected");var t=e.$dt.attr("data-colorstep-id");e.$dt.attr("data-selected",!0);var r=e.$dt.closest("border-image-item").$(".preview");this.viewFillPopup(r,t)}getFillData(e){let t={type:e.type};switch(t.type){case"image":t.url=e.image?e.image.url:"";break;default:if(e.image){const r=e.image;t.type=r.type,t.colorsteps=[...r.colorsteps],t.angle=r.angle,t.radialType=r.radialType||"ellipse",t.radialPosition=r.radialPosition||or.CENTER}else t.colorsteps=[],t.angle=0,t.radialType="ellipse",t.radialPosition=or.CENTER;break}return t}viewFillPopup(e,t){var r=this.$context.selection.current;!r||this.emit("showFillPopup",ie(b({changeEvent:"changeBorderImageFillPopup"},this.getFillData(r.borderImage)),{selectColorStepId:t,refresh:!0}))}viewChangeImage(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage;if(!!t){var r=this.getRef("$miniView");r&&t.image&&r.css({"background-image":t.image.toString(),"background-size":"cover"});var r=this.getRef("$fillTitle");r&&r.html(xl.image);var r=this.getRef("$colorsteps",this.selectedIndex);r&&r.empty()}}}setImage(e){var t=this.$context.selection.current;!t||(t.borderImage.setImageUrl(e),this.viewChangeImage(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}viewChangeGradient(e){var t=this.$context.selection.current;if(!!t){var r=t.borderImage;if(!!r){var i=this.getRef("$miniView");i&&i.css({"background-image":r.image.toString(),"background-size":"cover"});var i=this.getRef("$fillTitle");i&&i.html(xl[e.type]);var i=this.getRef("$colorsteps",this.selectedIndex);i&&i.html(this.getColorStepString(e.colorsteps))}}}setGradient(e){var t=this.$context.selection.current;!t||(t.borderImage.setGradient(e),this.viewChangeGradient(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}[M("changeBorderImageFillPopup")](e){switch(e.type){case"image":this.setImage(e);break;default:this.setGradient(e);break}}setBorderImageProperty(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage,r=this.refs.$selector.attr("data-selected-value");if(r==="all"){var i=this.children.$allSlice.getValue();t.reset({slice:{top:i.clone(),right:i.clone(),bottom:i.clone(),left:i.clone()}})}else id.forEach(a=>{t.slice[a]=this.children[`$${a}Slice`].getValue(),t.width[a]=this.children[`$${a}Width`].getValue()});this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage"))}}[z("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.setBorderImageProperty()}}function x3(s){s.registerElement({BorderImageProperty:b3})}class Jl{static parseStyle(e=""){var t={isAll:!0,"border-radius":0,"border-top-left-radius":0,"border-top-right-radius":0,"border-bottom-right-radius":0,"border-bottom-left-radius":0},r=e.split(" ").map(i=>p.parse(i));return r.length===1?(t.isAll=!0,t["border-radius"]=r[0]):(t.isAll=!1,t["border-top-left-radius"]=r[0],t["border-top-right-radius"]=r[1],t["border-bottom-right-radius"]=r[2],t["border-bottom-left-radius"]=r[3],r[0].equals(r[1])&&r[0].equals(r[2])&&r[0].equals(r[3])&&(t.isAll=!0,t["border-radius"]=r[0])),t}}const op=[{key:"border-top-left-radius",title:"topLeft",label:"TL"},{key:"border-top-right-radius",title:"topRight",label:"TR"},{key:"border-bottom-left-radius",title:"bottomLeft",label:"BL"},{key:"border-bottom-right-radius",title:"bottomRight",label:"BR"}],$l=op.map(s=>s.key),di={ALL:"all",PARTITIAL:"partial"};class $3 extends X{initState(){return b({},Jl.parseStyle(this.props.value))}template(){return"
        "}[K("changeBorderRadius")](e,t){e==="border-radius"&&$l.forEach(r=>{this.children[`$${r}`].setValue(t.clone())}),this.setBorderRadius()}[G("$body")+Ee](){var e=this.state["border-radius"];return` +
        +
        + ${O("InputRangeEditor",{label:R("outline_rect"),ref:"$all",compact:"true",key:"border-radius",value:e,min:0,onchange:"changeBorderRadius"})} +
        +
        + ${O("ToggleButton",{compact:!0,ref:"$toggle",key:"border-all",checkedValue:di.PARTITIAL,value:di.ALL,toggleLabels:[R("border_inner"),R("border_inner")],toggleValues:[di.ALL,di.PARTITIAL],onchange:"changeKeyValue"})} +
        + + `}[ot("$radiusSettingBox input")](){this.setBorderRadius()}[Tr("$radiusSettingBox select")](){this.setBorderRadius()}setBorderRadius(){var e=this.selectedValue;e===di.ALL?this.state["border-radius"]=this.children.$all.getValue():$l.forEach(t=>{this.state[t]=this.children[`$${t}`].getValue()}),this.modifyBorderRadius()}modifyBorderRadius(){var e="";this.selectedValue===di.ALL?e=this.state["border-radius"]+"":e=$l.map(t=>`${this.state[t]}`).join(" "),this.parent.trigger(this.props.onchange,e)}[K("changeKeyValue")](e,t){t===di.PARTITIAL?(this.selectedValue=di.PARTITIAL,this.refs.$partitialSetting.show()):(this.selectedValue=di.ALL,this.refs.$partitialSetting.hide()),this.setBorderRadius()}}class _3 extends Ne{getTitle(){return this.$i18n("border.radius.property.title")}getBody(){return`
        `}[G("$body")](){var e=this.$context.selection.current||{},t=e.borderRadius||"0px";return O("BorderRadiusEditor",{ref:"$1",value:t,onchange:"changeBorderRadius"})}get editableProperty(){return"borderRadius"}[M(Oe)+He(100)+fe("checkShow")](){this.$context.selection.hasChangedField("borderRadius")&&this.refresh()}[K("changeBorderRadius")](e){this.$commands.executeCommand("setAttribute","change border radius",this.$context.selection.packByValue({borderRadius:e}))}}function S3(s){s.registerElement({BorderRadiusEditor:$3}),s.registerUI("inspector.tab.style",{BorderRadiusProperty:_3})}const P3=["margin","padding"];let ec=[];P3.forEach(s=>{ec.push.apply(ec,["-top","-bottom","-left","-right"].map(e=>s+e))});class w3 extends Ne{getTitle(){return this.$i18n("box.model.property.title")}get editableProperty(){return"boxModel"}[M(Oe)+He(100)+fe("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[M(Lt)+fe("checkCurrentItem")+He(100)](){const e=this.$context.selection.current;e!=null&&e.hasChangedField("padding-left","padding-right","padding-top","padding-bottom")&&this.refresh()}getBody(){return'
        '}templateInput(e,t){var r=p.parse(t[e]||0);return``}[G("$boxModelItem")+Ee](){var e=this.$context.selection.current;return e?` +
        +
        +
        + ${this.templateInput("margin-top",e)} +
        +
        + ${this.templateInput("margin-bottom",e)} +
        +
        + ${this.templateInput("margin-left",e)} +
        +
        + ${this.templateInput("margin-right",e)} +
        +
        +
        +
        + ${this.templateInput("padding-top",e)} +
        +
        + ${this.templateInput("padding-bottom",e)} +
        +
        + ${this.templateInput("padding-left",e)} +
        +
        + ${this.templateInput("padding-right",e)} +
        +
        +
        + +
        +
        + `:""}[ot("$boxModelItem input")](){this.resetBoxModel()}resetBoxModel(){var e={};ec.forEach(t=>{e[t]=this.refs["$"+t].value}),this.$commands.executeCommand("setAttribute","change padding or margin",this.$context.selection.packByValue(e))}}function C3(s){s.registerUI("inspector.tab.style",{BoxModelProperty:w3})}var sd=[{name:"Box",shadow:"0px 3px 3px 0px rgba(0,0,0,0.2)"},{name:"Shadow-4",shadow:` + 0px 1px 1px 0px rgba(0,0,0,0.15), + 0px 2px 2px 0px rgba(0,0,0,0.15), + 0px 4px 4px 0px rgba(0,0,0,0.15), + 0px 8px 8px 0px rgba(0,0,0,0.15) + `},{name:"Shadow-5",shadow:` + 0px 1px 1px 0px rgba(0,0,0,0.12), + 0px 2px 2px 0px rgba(0,0,0,0.12), + 0px 4px 4px 0px rgba(0,0,0,0.12), + 0px 8px 8px 0px rgba(0,0,0,0.12), + 0px 16px 16px 0px rgba(0,0,0,0.12) + `},{name:"Shadow-6",shadow:` + 0px 1px 1px 0px rgba(0,0,0,0.11), + 0px 2px 2px 0px rgba(0,0,0,0.11), + 0px 4px 4px 0px rgba(0,0,0,0.11), + 0px 8px 8px 0px rgba(0,0,0,0.11), + 0px 16px 16px 0px rgba(0,0,0,0.11), + 0px 32px 32px 0px rgba(0,0,0,0.11) + `},{name:"Sharp",shadow:` + 0px 1px 1px 0px rgba(0,0,0,0.25), + 0px 2px 2px 0px rgba(0,0,0,0.20), + 0px 4px 4px 0px rgba(0,0,0,0.15), + 0px 8px 8px 0px rgba(0,0,0,0.10), + 0px 16px 16px 0px rgba(0,0,0,0.05) + `},{name:"Diffuse",shadow:` + 0px 1px 1px 0px rgba(0,0,0,0.08), + 0px 2px 2px 0px rgba(0,0,0,0.12), + 0px 4px 4px 0px rgba(0,0,0,0.16), + 0px 8px 8px 0px rgba(0,0,0,0.20) + `}];class k3 extends Ne{getTitle(){return this.$i18n("boxshadow.property.title")}getBody(){return` +
        + `}getTools(){return` + + + `}[z("$add")](){const e=+this.refs.$select.value;this.children.$boxshadow.trigger("add",sd[e].shadow)}[G("$shadowList")](){var e=this.$context.selection.current||{};return O("BoxShadowEditor",{ref:"$boxshadow",key:"boxShadow",value:e.boxShadow,onchange:(t,r)=>{this.$commands.executeCommand("setAttribute","change box shadow",this.$context.selection.packByValue({[t]:r}))}})}get editableProperty(){return"boxShadow"}[M(Oe)+He(100)+fe("checkShow")](){this.refresh()}}function T3(s){s.registerUI("inspector.tab.style",{BoxShadowProperty:k3})}var M3={key:"polygon",title:"Polygon",execute:function(){return[{name:"Triangle",polygon:"50% 0%, 0% 100%, 100% 100%"},{name:"Trapezoid",polygon:"20% 0%, 80% 0%, 100% 100%, 0% 100%"},{name:"Parallelogram",polygon:"25% 0%, 100% 0%, 75% 100%, 0% 100%"},{name:"Rhombus",polygon:"50% 0%, 100% 50%, 50% 100%, 0% 50%"},{name:"Pentagon",polygon:"50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%"},{name:"Hexagon",polygon:"50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%"},{name:"Heptagon",polygon:"50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%"},{name:"Octagon",polygon:"30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%"}]}};const I3=/(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi;class xe extends sr{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"clip-path",type:"none",value:""},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("value"))}toString(){var e=this.json.type,t=this.json.value,r=this.json.box,i="";switch(e){case"circle":case"inset":case"ellipse":case"polygon":case"path":i=`${e}(${t})`;break;case"svg":i=`url(#${t})`;break;default:i="none";break}return r?`${r} ${i}`:i}toCSS(){return{"clip-path":this.toString()}}static toCSS(e){return new xe(e).toCSS()}static toString(e){return xe.toCSS(e)["clip-path"]}static parse(e){return new xe(e)}static parseStyle(e){var t={};if(!e)return{};var r=e.match(I3)||[];return r.forEach(i=>{if(i.includes("-box"))t.box=i;else{var[a,n]=i.split("(");n=n||"",a==="none"?n="":n=n.split(")")[0],t.type=a,t.value=n}}),t}static parseStyleForCircle(e="50% at 50% 50%"){var t=new p("","closest-side"),r="";e=e||"50% at 50% 50%",e.includes("at")?[t,r]=e.split("at").map(n=>n.trim()):r=e.trim();var[i,a]=r.split(" ");return wt(a)&&(a=i),t=p.parse(t),i=p.parse(i),a=p.parse(a),{radius:t,x:i,y:a}}static parseStyleForEllipse(e="50% 50%"){var t="50% 50%",r="";e=e||"50%",e.includes("at")?[t,r]=e.split("at").map(l=>l.trim()):r=e.trim();var[i,a]=r.split(" ");wt(a)&&(a=i),i=p.parse(i),a=p.parse(a);var[n,o]=t.split(" ");return wt(o)&&(o=n),n=p.parse(n),o=p.parse(o),{radiusX:n,radiusY:o,x:i,y:a}}static parseStyleForInset(e=""){var[t,r]=e.split("round"),[i,a,n,o,l]=Yl.parse(t);if(r)var[c,h,u,d,v]=Yl.parse(r);return{isAll:i===1,top:a,right:n,bottom:o,left:l,round:r,isAllRadius:c===1,topRadius:h,rightRadius:u,bottomRadius:d,leftRadius:v}}static parseStyleForPolygon(e=""){return e.split(",").filter(t=>t.trim()).map(t=>{var[r,i]=t.trim().split(" ");return{x:p.parse(r),y:p.parse(i)}})}}const E3={[Zt.CIRCLE]:"circle(50% at 50% 50%)",[Zt.ELLIPSE]:"ellipse(50% 50% at 50% 50%)",[Zt.INSET]:"inset(0% 0% 0% 0%)",[Zt.POLYGON]:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",[Zt.PATH]:"path()"};class L3 extends Ne{getTitle(){return this.$i18n("clippath.property.title")}getClassName(){return"clip-path-property"}getBody(){return"
        "}getTools(){return` +
        + + + + + + +
        + `}makeClipPathTemplate(e,t){const r=e==="path",i=e==="polygon";let a="";if(r){const o=t.split("(")[1].split(")")[0];let l=Y.fromSVGString(o);const c=l.getBBox(),h=Et(c),u=260/h.width,d=150/h.height,v=Math.min(u,d);l=l.translate(-c[0][0],-c[0][1]).scale(v,v);const g=l.getBBox(),y=Et(g);a=l.translate(260/2-y.width/2,0).d}let n="";if(i){const o=M3.execute();n=O("SelectEditor",{ref:"$polygonSelect",options:["",...o.map(l=>l.name)],onchange:(l,c)=>{const h=o.find(u=>u.name===c);h&&this.updatePathInfo({"clip-path":`polygon(${h.polygon})`})}})}return` +
        +
        + +
        +
        ${e}
        + ${i?n:""} +
        +
        + +
        +
        + ${r?``:""} +
        + + `}[z("$clippathList .clippath-item .title .name")](){var e=this.$context.selection.current;!e||this.viewClipPathPicker()}[z("$clippathList .del")+Le](){var e=this.$context.selection.current;!e||(this.$commands.executeCommand("setAttribute","delete clip-path",this.$context.selection.packByValue({clipPath:""})),this.emit("hideClipPathPopup"),window.setTimeout(()=>{this.refresh()},100))}get editableProperty(){return"clipPath"}[M(Oe)+fe("checkShow")](){this.refresh()}[G("$clippathList")](){var e=this.$context.selection.current;return!e||!e.clipPath?"":this.makeClipPathTemplate(e.clipPath.split("(")[0],e.clipPath)}[z("$tools [data-value]")](e){var t=this.$context.selection.current;if(!!t){if(t.clipPath){window.alert("clip-path is already exists.");return}t&&(t.reset({clipPath:E3[e.$dt.data("value")]}),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.pack("clipPath"))),this.refresh()}}viewClipPathPicker(){var e=this.$context.selection.current;if(!!e){var t=xe.parseStyle(e.clipPath);switch(t.type){case"path":var r=e.absolutePath(e.clipPathString).d,i=r?"modify":"path";this.emit("showPathEditor",i,{changeEvent:a=>{a.d=e.invertPath(a.d).d,this.updatePathInfo({clipPath:`path(${a.d})`})},current:e,d:r});break}}}updatePathInfo(e){if(!!e){var t=this.$context.selection.current;!t||(t.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.packByValue(e)))}}}function V3(s){s.registerUI("inspector.tab.style",{ClipPathProperty:L3})}class O3 extends X{initializePolygon(){const e=this.$context.selection.current;this.state.current=e,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.clippath.value=xe.parseStyleForPolygon(this.state.clippath.value),this.screenPoints=this.$viewport.applyVerties(oe(this.state.clippath.value.map(t=>{const{x:r,y:i}=t,a=r.toPx(this.state.width),n=i.toPx(this.state.height);return Te(a,n,0)}),e.absoluteMatrix)),this.clonedScreenPoints=ye(this.screenPoints)}[ve("$el .polygon .polygon-pointer")+_e("movePolygonPointer")+Se("moveEndPolygonPointer")](e){this.initializePolygon(),this.polygonTargetIndex=+e.$dt.data("index")}movePolygonPointer(e,t){this.clonedScreenPoints[this.polygonTargetIndex]=Pe([],this.screenPoints[this.polygonTargetIndex],[e,t,0]),this.updatePolygon(this.clonedScreenPoints)}moveEndPolygonPointer(){const e=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[ve("$el .polygon .polygon-line")](e){this.initializePolygon();const t=+e.$dt.data("index");this.polygonTargetIndex=t;const r=this.screenPoints[this.polygonTargetIndex],i=this.screenPoints[(this.polygonTargetIndex+1)%this.screenPoints.length],a=te([],r,i,.5);this.screenPoints.splice(this.polygonTargetIndex+1,0,a),this.updatePolygon(this.screenPoints)}updatePolygon(e){const t=this.$viewport.applyVertiesInverse(e),r=this.$context.selection.current.absoluteMatrixInverse,i=oe(t,r);this.state.clippath.value=i.map(n=>[p.makePercent(n[0],this.state.width),p.makePercent(n[1],this.state.height)].join(" ")).join(",");const a=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(a))}[ve("$el .polygon .polygon-center")+_e("movePolygonCenter")+Se("moveEndPolygonCenter")](){this.initializePolygon()}movePolygonCenter(e,t){const r=this.screenPoints.map(i=>Pe([],i,[e,t,0]));this.updatePolygon(r)}moveEndPolygonCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case Zt.POLYGON:const i=xe.toCSS({type:Zt.CIRCLE,value:"50% at 50% 50%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templatePolygon(e){const t=this.$context.selection.current,r=xe.parseStyleForPolygon(e.value).map(o=>[o.x.toPx(t.screenWidth).value,o.y.toPx(t.screenHeight).value,0]),i=kr(r)[4],a=this.$viewport.applyVerties(oe(r,t.absoluteMatrix)),n=this.$viewport.applyVerties(oe([i],t.absoluteMatrix))[0];return w("div",{class:"polygon"},w("div",{class:"polygon-back"},w("svg",{style:"position:absolute;width:100%;height:100%;"},w("polygon",{points:`${a.map(o=>[o[0],o[1]].join(",")).join(" ")}`}),a.map((o,l)=>{const c=(l+1)%a.length,h=a[c];return w("line",{x1:o[0],y1:o[1],x2:h[0],y2:h[1],class:"polygon-line","data-index":l})}),a.map((o,l)=>w("circle",{cx:o[0],cy:o[1],r:3,class:"polygon-pointer","data-index":l})))),w("div",{class:"polygon-center",style:{left:p.px(n[0]),top:p.px(n[1])}}))}}class j3 extends O3{initializeInset(){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.clippath.value=xe.parseStyleForInset(this.state.clippath.value),this.state.inset=this.state.clippath.value;const t=this.state.inset,r=t.top.toPx(e.screenHeight),i=t.left.toPx(e.screenWidth),a=p.px(e.screenWidth-t.right.toPx(e.screenWidth)),n=p.px(e.screenHeight-t.bottom.toPx(e.screenHeight)),o=this.$viewport.applyVerties(oe([[i,r,0],[a,r,0],[a,n,0],[i,n,0]],e.absoluteMatrix)),l=te([],o[0],o[3],.5),c=te([],o[0],o[1],.5),h=te([],o[1],o[2],.5),u=te([],o[2],o[3],.5),d=te([],o[0],o[2],.5);this.screenPoints=[l,c,h,u,d]}[ve("$el .inset .inset-direction")+Cr+_e("moveInsetRadius")+Se("moveEndInsetRadius")](e){this.initializeInset(),this.insetTarget=e.$dt.data("direction")}moveInsetRadius(e,t){const{left:r,top:i,right:a,bottom:n}=this.state.inset;let[o,l,c,h]=this.screenPoints;this.insetTarget=="left"?o=Pe([],o,[e,t,0]):this.insetTarget=="top"?l=Pe([],l,[e,t,0]):this.insetTarget=="right"?c=Pe([],c,[e,t,0]):this.insetTarget=="bottom"&&(h=Pe([],h,[e,t,0]));const u=this.$viewport.applyVertexInverse(o),d=this.$viewport.applyVertexInverse(l),v=this.$viewport.applyVertexInverse(c),g=this.$viewport.applyVertexInverse(h),y=this.$context.selection.current.absoluteMatrixInverse,[S,_,L,I]=oe([u,d,v,g],y);this.state.clippath.value=[i.isPercent()?p.makePercent(_[1],this.state.height):p.px(_[1]),a.isPercent()?p.makePercent(this.state.width-L[0],this.state.width):p.px(this.state.width-L[0]),n.isPercent()?p.makePercent(this.state.height-I[1],this.state.height):p.px(this.state.height-I[1]),r.isPercent()?p.makePercent(S[0],this.state.width):p.px(S[0])].join(" ");const T=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(T))}moveEndInsetRadius(){const e=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[ve("$el .inset .inset-center")+Cr+_e("moveInsetCenter")+Se("moveEndInsetCenter")](){this.initializeInset()}moveInsetCenter(e,t){const{left:r,top:i,right:a,bottom:n}=this.state.inset;let[o,l,c,h]=this.screenPoints;o=Pe([],o,[e,t,0]),l=Pe([],l,[e,t,0]),c=Pe([],c,[e,t,0]),h=Pe([],h,[e,t,0]);const u=this.$viewport.applyVertexInverse(o),d=this.$viewport.applyVertexInverse(l),v=this.$viewport.applyVertexInverse(c),g=this.$viewport.applyVertexInverse(h),y=this.$context.selection.current.absoluteMatrixInverse,[S,_,L,I]=oe([u,d,v,g],y);this.state.clippath.value=[i.isPercent()?p.makePercent(_[1],this.state.height):p.px(_[1]),a.isPercent()?p.makePercent(this.state.width-L[0],this.state.width):p.px(this.state.width-L[0]),n.isPercent()?p.makePercent(this.state.height-I[1],this.state.height):p.px(this.state.height-I[1]),r.isPercent()?p.makePercent(S[0],this.state.width):p.px(S[0])].join(" ");const T=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(T))}moveEndInsetCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case Zt.INSET:const i=xe.toCSS({type:Zt.POLYGON,value:"0% 0%, 100% 0%, 100% 100%, 0% 100%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateInset(e){const t=this.$context.selection.current;e.value=xe.parseStyleForInset(e.value);const r=e.value.top.toPx(t.screenHeight),i=e.value.left.toPx(t.screenWidth),a=p.px(t.screenWidth-e.value.right.toPx(t.screenWidth)),n=p.px(t.screenHeight-e.value.bottom.toPx(t.screenHeight)),o=this.$viewport.applyVerties(oe([[i,r,0],[a,r,0],[a,n,0],[i,n,0]],t.absoluteMatrix)),l=te([],o[0],o[3],.5),c=te([],o[0],o[1],.5),h=te([],o[1],o[2],.5),u=te([],o[2],o[3],.5),d=te([],o[0],o[2],.5);return w("div",{class:"inset"},w("div",{class:"inset-back"},w("svg",{style:"position:absolute;width:100%;height:100%;"},w("path",{d:` + M ${o[0][0]} ${o[0][1]} + L ${o[1][0]} ${o[1][1]} + L ${o[2][0]} ${o[2][1]} + L ${o[3][0]} ${o[3][1]} + Z + `}))),w("div",{class:"inset-direction","data-direction":"left",style:{left:p.px(l[0]),top:p.px(l[1])}}),w("div",{class:"inset-direction","data-direction":"top",style:{left:p.px(c[0]),top:p.px(c[1])}}),w("div",{class:"inset-direction","data-direction":"right",style:{left:p.px(h[0]),top:p.px(h[1])}}),w("div",{class:"inset-direction","data-direction":"bottom",style:{left:p.px(u[0]),top:p.px(u[1])}}),w("div",{class:"inset-center",style:{left:p.px(d[0]),top:p.px(d[1])}}))}}class R3 extends j3{[ve("$el .circle .circle-radius")+Cr+_e("moveCircleRadius")+Se("moveEndCircleRadius")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.circle=xe.parseStyleForCircle(this.state.clippath.value)}moveCircleRadius(e,t){const r=this.$context.selection.current,{radius:i,x:a,y:n}=this.state.circle,o=a.toPx(r.screenWidth),l=n.toPx(r.screenHeight),c=Math.sqrt(Math.pow(r.screenWidth,2)+Math.pow(r.screenHeight,2))/Math.sqrt(2),h=i.toPx(r.screenWidth),d=this.$viewport.applyVerties(oe([[o.value+h.value,l,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),S=oe([y],this.$context.selection.current.absoluteMatrixInverse)[0],_=Math.abs(S[0]-o),L=[i.isPercent()?p.makePercent(_,c):p.px(_),a,n];this.state.clippath.value=`${L[0]} at ${L[1]} ${L[2]}`;const I=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(I))}moveEndCircleRadius(){const e=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[ve("$el .circle .circle-center")+Cr+_e("moveCircleCenter")+Se("moveEndCircleCenter")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.circle=xe.parseStyleForCircle(this.state.clippath.value)}moveCircleCenter(e,t){const r=this.$context.selection.current,{radius:i,x:a,y:n}=this.state.circle,o=a.toPx(r.screenWidth),l=n.toPx(r.screenHeight),h=this.$viewport.applyVerties(oe([[o,l,0]],r.absoluteMatrix))[0],u=h[0]+e,d=h[1]+t,v=this.$viewport.applyVertexInverse([u,d,0]),g=oe([v],this.$context.selection.current.absoluteMatrixInverse)[0],y=[i,a.isPercent()?p.makePercent(g[0],this.state.width):p.px(g[0]),n.isPercent()?p.makePercent(g[1],this.state.height):p.px(g[1])];this.state.clippath.value=`${i} at ${y[1]} ${y[2]}`;const S=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(S))}moveEndCircleCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case Zt.CIRCLE:const i=xe.toCSS({type:Zt.ELLIPSE,value:`${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}`});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateCircle(e){const t=this.$context.selection.current,r=Math.sqrt(Math.pow(t.screenWidth,2)+Math.pow(t.screenHeight,2))/Math.sqrt(2),i=e.value.radius.toPx(r),a=e.value.x.toPx(t.screenWidth),n=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(oe([[a,n,0],[a.value+i.value,n,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=se(l,c);return w("div",{class:"circle"},w("div",{class:"circle-back",style:{left:p.px(l[0]),top:p.px(l[1]),width:p.px(h*2),height:p.px(h*2)}}),w("div",{class:"circle-center",style:{left:l[0]+"px",top:l[1]+"px"}}),w("div",{class:"circle-radius",style:{left:c[0]+"px",top:c[1]+"px"}}))}}class z3 extends R3{[ve("$el .ellipse .ellipse-radius-x")+Cr+_e("moveEllipseRadiusX")+Se("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.ellipse=xe.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusX(e,t){const r=this.$context.selection.current,{radiusX:i,radiusY:a,x:n,y:o}=this.state.ellipse,l=n.toPx(r.screenWidth),c=o.toPx(r.screenHeight),h=i.toPx(r.screenWidth),d=this.$viewport.applyVerties(oe([[l.value+h.value,c,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),S=oe([y],this.$context.selection.current.absoluteMatrixInverse)[0],_=Math.abs(S[0]-l),L=[i.isPercent()?p.makePercent(_,this.state.width):p.px(_),n,o];this.state.clippath.value=`${L[0]} ${a} at ${L[1]} ${L[2]}`;const I=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(I))}[ve("$el .ellipse .ellipse-radius-y")+Cr+_e("moveEllipseRadiusY")+Se("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=xe.parseStyle(e["clip-path"]),this.state.ellipse=xe.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusY(e,t){const r=this.$context.selection.current,{radiusX:i,radiusY:a,x:n,y:o}=this.state.ellipse,l=n.toPx(r.screenWidth),c=o.toPx(r.screenHeight),h=a.toPx(r.screenHeight),d=this.$viewport.applyVerties(oe([[l.value,c.value+h.value,0]],r.absoluteMatrix))[0],v=d[0]+e,g=d[1]+t,y=this.$viewport.applyVertexInverse([v,g,0]),S=oe([y],this.$context.selection.current.absoluteMatrixInverse)[0],_=Math.abs(S[1]-c),L=[a.isPercent()?p.makePercent(_,this.state.height):p.px(_),n,o];this.state.clippath.value=`${i} ${L[0]} at ${n} ${o}`;const I=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(I))}moveEndEllipseRadiusX(){const e=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[ve("$el .ellipse .ellipse-center")+Cr+_e("moveEllipseCenter")+Se("moveEndEllipseCenter")](e){const t=this.$context.selection.current;this.state.current,this.state.width=t.screenWidth,this.state.height=t.screenHeight,this.state.clippath=xe.parseStyle(t["clip-path"]),this.state.ellipse=xe.parseStyleForEllipse(this.state.clippath.value),this.state.left=p.parse(e.$dt.css("left")).value,this.state.top=p.parse(e.$dt.css("top")).value}moveEllipseCenter(e,t){const{radiusX:r,radiusY:i,x:a,y:n}=this.state.ellipse,o=this.state.left+e,l=this.state.top+t,c=this.$viewport.applyVertexInverse([o,l,0]),h=oe([c],this.$context.selection.current.absoluteMatrixInverse)[0],u=[r,i,a.isPercent()?p.makePercent(h[0],this.state.width):p.px(h[0]),n.isPercent()?p.makePercent(h[1],this.state.height):p.px(h[1])];this.state.clippath.value=`${r} ${i} at ${u[2]} ${u[3]}`;const d=xe.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(d))}moveEndEllipseCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case Zt.ELLIPSE:const i=xe.toCSS({type:Zt.INSET,value:""});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i));break}return}const r=xe.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r))}templateEllipse(e){const t=this.$context.selection.current,r=e.value.radiusX.toPx(t.screenWidth),i=e.value.radiusY.toPx(t.screenHeight),a=e.value.x.toPx(t.screenWidth),n=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(oe([[a,n,0],[a.value+r.value,n,0],[a.value,n.value+i.value,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=o[2],u=se(l,c),d=se(l,h),v=$e([],c,l),g=aa(v[0],v[1]);return w("div",{class:"ellipse"},w("div",{class:"ellipse-back"},w("svg",{style:"position:absolute;width:100%;height:100%;"},w("ellipse",{cx:l[0],cy:l[1],rx:u,ry:d,transform:`rotate(${g} ${l[0]} ${l[1]})`}))),w("div",{class:"ellipse-center",style:{left:l[0]+"px",top:l[1]+"px"}}),w("div",{class:"ellipse-radius ellipse-radius-x",style:{left:c[0]+"px",top:c[1]+"px"}}),w("div",{class:"ellipse-radius ellipse-radius-y",style:{left:h[0]+"px",top:h[1]+"px"}}))}}class A3 extends z3{template(){return w("div",{class:"elf--clippath-editor-view "})}[G("$el")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=xe.parseStyle(e["clip-path"]);switch(t.type){case Zt.CIRCLE:return t.value=xe.parseStyleForCircle(t.value),this.templateCircle(t);case Zt.ELLIPSE:return t.value=xe.parseStyleForEllipse(t.value),this.templateEllipse(t);case Zt.POLYGON:return this.templatePolygon(t);case Zt.INSET:return this.templateInset(t)}return w("div",null)}[M(Oe)+He(100)](){this.refresh()}[M(it)](){this.refresh()}checkClipPath(){return this.$el.isShow()===!1||!this.$context.selection.current?!1:this.$context.selection.current.hasChangedField("clip-path","angle","x","y","width","height")}[M(Lt)+fe("checkClipPath")+He(10)](){this.refresh()}[z("$el")](e){(ge.create(e.target).isTag("svg")||ge.create(e.target).hasClass("elf--clippath-editor-view"))&&this.trigger("hideClippathEditorView")}[M("hideClippathEditorView")](){this.$el.hide()}[M("showClippathEditorView")](){this.$el.show(),this.refresh()}}function D3(s){s.registerUI("canvas.view",{ClippathEditorView:A3})}class F3 extends Ne{getTitle(){return this.$i18n("code.view.property.title")}checkConfig(){return this.$config.is("inspector.selectedValue","code")}[Ct("inspector.selectedValue")](){this.refresh()}[M(Lt,Oe)+fe("checkConfig")+He(100)](){this.refresh()}getBody(){return` +
        +
        +
        +
        + `}[G("$code")+Ee](){return[this.$editor.renderer("html").codeview(this.$context.selection.current)]}[G("$svg")+Ee](){return[this.$editor.renderer("svg").codeview(this.$context.selection.current)]}}function B3(s){s.registerUI("inspector.tab.code",{CodeViewProperty:F3})}function Vr(s,e){var t=s.context.selection.currentProject;if(t){var r=t.getSelectedTimeline();e&&e(t,r)}}var N3=Object.freeze(Object.defineProperty({__proto__:null,default:Vr},Symbol.toStringTag,{value:"Module"}));function Or(s){s.emit("refreshAll")}var G3=Object.freeze(Object.defineProperty({__proto__:null,default:Or},Symbol.toStringTag,{value:"Module"})),H3={command:"addArtBoard",execute:(s,e={},t=null)=>{var r=s.context.selection.currentProject;r||(r=s.add(s.createModel({itemType:"project"})),s.context.selection.selectProject(r));var i=r.appendChild(s.createModel(b({itemType:"artboard",x:300,y:200,width:375,height:667},e)));t&&(i.reset({x:0,y:0}),i.moveByCenter(t)),s.context.selection.select(i),Or(s)}},U3=Object.freeze(Object.defineProperty({__proto__:null,default:H3},Symbol.toStringTag,{value:"Module"})),W3={command:"addBackgroundColor",execute:function(s,e,t=null){s.context.commands.executeCommand("setAttribute","add background color",s.context.selection.packByValue({backgroundColor:e},t))}},X3=Object.freeze(Object.defineProperty({__proto__:null,default:W3},Symbol.toStringTag,{value:"Module"})),Y3={command:"addBackgroundImageAsset",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{let n=De.parseStyle(vr(a.backgroundImage));n.unshift(new De({image:new vs({url:e})})),i[a.id]={"background-image":De.join(n)}}),s.context.commands.emit("history.setAttribute","add background image",i)}},K3=Object.freeze(Object.defineProperty({__proto__:null,default:Y3},Symbol.toStringTag,{value:"Module"})),Z3={command:"addBackgroundImageGradient",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{let n=De.parseStyle(vr(a.backgroundImage));n.unshift(new De({image:De.parseImage(e)})),i[a.id]={backgroundImage:De.join(n)}}),s.context.commands.emit("history.setAttribute","add gradient",i)}},q3=Object.freeze(Object.defineProperty({__proto__:null,default:Z3},Symbol.toStringTag,{value:"Module"}));const Q3=1e3,Sa=new Map;class _l{static has(e){return Sa.has(e)}static get(e){return Sa.get(e)}static set(e,t){Sa.size>Q3&&Sa.clear(),Sa.set(e,t)}}const J3={check:nr("check"),grid:nr("grid"),dot:nr("dot"),"cross-dot":nr("cross-dot"),"diagonal-line":nr("diagonal-line"),"vertical-line":nr("vertical-line"),"horizontal-line":nr("horizontal-line")};class hr extends sr{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"pattern"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=o4[e.type];if(t)return new t(e)}static parseStyle(e){var t=[];return!e||e==="undefined"?t:(e=e.trim(),_l.has(e)?_l.get(e):(da(e,{customFuncMap:J3}).forEach((i,a)=>{const[n,o,l,c,h=[{matchedString:"normal"}],u=[{parsed:p.parse("1px")},{parsed:p.parse("1px")}]]=i.parameters;t[a]=hr.parse({type:i.type,x:o[0].parsed,y:o[1].parsed,width:n[0].parsed,height:n[1].parsed,foreColor:l[0].matchedString,backColor:c[0].matchedString,blendMode:h[0].matchedString,lineWidth:u[0].parsed,lineHeight:u[1].parsed})}),_l.set(e,t),t))}static join(e){return e.map(t=>hr.parse(t)).join(" ")}static toCSS(e){let t=[];return hr.parseStyle(e).forEach(r=>{t.push.apply(t,De.parseStyle(vr(r.toCSS())))}),De.joinCSS(t)}}class Rs extends hr{getDefaultObject(){return super.getDefaultObject({type:"base",x:0,y:0,width:20,height:20,lineWidth:1,lineHeight:1,foreColor:"black",backColor:"white",blendMode:"normal"})}convert(e){return e=super.convert(e),e.width=p.parse(e.width),e.height=p.parse(e.height),e.lineWidth=p.parse(e.lineWidth),e.lineHeight=p.parse(e.lineHeight),e.x=p.parse(e.x),e.y=p.parse(e.y),e}toString(){var{type:e,width:t,height:r,x:i,y:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.json;return`${e}(${t} ${r}, ${i} ${a}, ${n}, ${o}, ${l}, ${c} ${h})`}}class e4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"check"})}toCSS(){let{width:e,height:t,x:r,y:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: repeating-linear-gradient(45deg, ${n} 25%, ${a} 25%, ${a} 75%, ${n} 75%, ${n} 100%),repeating-linear-gradient(45deg, ${n} 25%, ${a} 25%, ${a} 75%, ${n} 75%, ${n} 100%); + background-position: 0px 0px, ${r} ${i}; + background-size: ${e} ${t}, ${e} ${t}; + background-blend-mode: ${o}, ${o}; + `}}class t4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"grid"})}toCSS(){let{width:e,height:t,lineWidth:r,lineHeight:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: linear-gradient(to bottom,${n} ${i}, ${a} ${i}),linear-gradient(to right, ${n} ${r}, ${a} ${r}); + background-size: ${e/2}px ${t/2}px, ${e/2}px ${t/2}px; + background-blend-mode: ${o}, ${o}; + `}}class r4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"dot"})}toCSS(){let{width:e,height:t,lineWidth:r,backColor:i,foreColor:a,blendMode:n}=this.json;return i=i||"transparent",a=a||"black",` + background-image: radial-gradient(${a} ${r}, ${i} ${r}); + background-size: ${e/2}px ${t/2}px; + background-blend-mode: ${n}; + `}}class i4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"cross-dot"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: radial-gradient(${o} ${a}, ${n} ${a}),radial-gradient(${o} ${a}, ${n} ${a}); + background-size: ${e} ${t},${e} ${t}; + background-position: 0px 0px, ${r} ${i}; + background-blend-mode: multiply, ${l}; + `}}class s4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"diagonal-line"})}toCSS(){let{width:e,height:t,x:r,lineWidth:i,backColor:a,foreColor:n,blendMode:o}=this.json;return a=a||"transparent",n=n||"black",` + background-image: repeating-linear-gradient(${r}, ${n} 0px, ${n} ${i}, ${a} 0px, ${a} 50%); + background-size: ${e} ${t}; + background-blend-mode: ${o}; + `}}class a4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"vertical-line"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: repeating-linear-gradient(to right, ${o} 0px, ${o} ${a}, ${n} ${a}, ${n} 100%); + background-size: ${e} ${t}; + background-position: ${r} ${i}; + background-blend-mode: ${l}; + `}}class n4 extends Rs{getDefaultObject(){return super.getDefaultObject({type:"horizontal-line"})}toCSS(){let{width:e,height:t,x:r,y:i,lineWidth:a,backColor:n,foreColor:o,blendMode:l}=this.json;return n=n||"transparent",o=o||"black",` + background-image: repeating-linear-gradient( to bottom, ${o} 0px, ${o} ${a}, ${n} ${a}, ${n} 100%); + background-position: ${r} ${i}; + background-size: ${e} ${t}; + background-blend-mode: ${l}; + `}}const o4={check:e4,grid:t4,dot:r4,"cross-dot":i4,"diagonal-line":s4,"vertical-line":a4,"horizontal-line":n4};var l4={command:"addBackgroundImagePattern",execute:function(s,e,t=null){var r=s.context.selection.itemsByIds(t);let i={};r.forEach(a=>{i[a.id]={pattern:hr.join([...hr.parseStyle(e),...hr.parseStyle(a.pattern)])}}),s.context.commands.emit("history.setAttribute","add pattern",i)}},c4=Object.freeze(Object.defineProperty({__proto__:null,default:l4},Symbol.toStringTag,{value:"Module"}));function h4(s,e={},t=null){var r=s.context.selection.currentProject,i=r.appendChild(s.createModel(b({x:300,y:200,width:375,height:667},e)));t&&(i.reset({x:0,y:0}),i.moveByCenter(t)),s.context.selection.select(i),Or(s)}var d4=Object.freeze(Object.defineProperty({__proto__:null,default:h4},Symbol.toStringTag,{value:"Module"}));function u4(s,e={},t=void 0){s.context.commands.emit("newComponent","image",e,!0,t)}var p4=Object.freeze(Object.defineProperty({__proto__:null,default:u4},Symbol.toStringTag,{value:"Module"}));function zo(s,e){var t=new window.Image;t.onload=()=>{var r={id:s.id,local:s.local,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight};e&&e(r,t)},t.onerror=r=>{console.log(r,r.message)},t.src=s.local}var g4={command:"addImageAssetItem",execute:function(s,e,t={},r=void 0){var i=s.context.selection.currentProject;i&&(i.createImage(e),s.context.commands.emit("addImageAsset"),zo(e,a=>{const n=t.width/a.width,o=t.width,l=a.height*n;s.context.commands.emit("addImage",ie(b(b({src:e.id},a),t),{width:o,height:l}),r)}))}},f4=Object.freeze(Object.defineProperty({__proto__:null,default:g4},Symbol.toStringTag,{value:"Module"}));function m4(s,e,t=!0,r){r||(r=s.context.selection.current||s.context.selection.currentProject),r&&(r.isNot("project")&&!r.enableHasChildren()&&(r=r.parent),r.appendChild(e),t&&s.context.selection.select(e),Or(s))}var v4=Object.freeze(Object.defineProperty({__proto__:null,default:m4},Symbol.toStringTag,{value:"Module"})),y4={command:"addLayerView",execute:async function(s,e,t={}){s.context.selection.empty(),await s.emit("hideAddViewLayer"),await s.emit("removeGuideLine"),s.context.config.set("editing.mode.itemType",e),e==="select"?(s.context.selection.empty(),s.context.config.set("editing.mode",_t.SELECT)):e==="brush"?(s.context.config.set("editing.mode",_t.DRAW),await s.emit("showPathDrawEditor")):e==="path"?(s.context.config.set("editing.mode",_t.PATH),await s.emit("showPathEditor","path")):(s.context.config.set("editing.mode",_t.APPEND),await s.emit("showLayerAppendView",e,t))}},b4=Object.freeze(Object.defineProperty({__proto__:null,default:y4},Symbol.toStringTag,{value:"Module"}));function x4(s,e={}){var t=s.createModel(b({itemType:"project"},e));s.context.selection.selectProject(t),Or(s)}var $4=Object.freeze(Object.defineProperty({__proto__:null,default:x4},Symbol.toStringTag,{value:"Module"})),_4={command:"addSVGFilterAssetItem",execute:function(s,e){var t=s.context.selection.currentProject;if(t){var r=dr(),i=t.createSVGFilter({id:r,filters:[]});e&&e(i,r)}}},S4=Object.freeze(Object.defineProperty({__proto__:null,default:_4},Symbol.toStringTag,{value:"Module"}));function P4(s,e={}){s.context.commands.emit("newComponent","text",b({content:"Insert a text",width:300,height:50,"font-size":30},e),e)}var w4=Object.freeze(Object.defineProperty({__proto__:null,default:P4},Symbol.toStringTag,{value:"Module"})),C4={command:"addTimelineCurrentProperty",execute:function(s,e={timing:"linear"}){Vr(s,t=>{var r=[];s.context.selection.each(i=>{var a={layerId:i.id,property:e.property,value:i[e.property]+"",timing:e.timing,editor:e.editor},n=t.addTimelineKeyframe(a);n&&r.push(n)}),s.context.timeline.select(...r),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},k4=Object.freeze(Object.defineProperty({__proto__:null,default:C4},Symbol.toStringTag,{value:"Module"})),T4={command:"addTimelineItem",execute:function(s,e){Vr(s,t=>{e?t.addTimelineLayer(e):t.addTimeline(),s.emit("refreshTimeline"),s.emit("addTimeline")})}},M4=Object.freeze(Object.defineProperty({__proto__:null,default:T4},Symbol.toStringTag,{value:"Module"})),I4={command:"addTimelineKeyframe",execute:function(s,e={timing:"linear"}){Vr(s,t=>{var r=s.context.modelManager.get(e.layerId),i={layerId:e.layerId,property:e.property,time:e.time,value:r[e.property]+"",timing:e.timing,editor:e.editor},a=t.addTimelineKeyframe(i);s.timeline.select(a),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},E4=Object.freeze(Object.defineProperty({__proto__:null,default:I4},Symbol.toStringTag,{value:"Module"})),L4={command:"addTimelineProperty",execute:function(s,e,t={timing:"linear"}){Vr(s,r=>{Array.isArray(e)===!1&&(e=[e]);var i=[];e.forEach(a=>{var n={layerId:a,property:t.property,value:t.value+"",timing:t.timing,editor:t.editor},o=r.addTimelineKeyframe(n);o&&i.push(o)}),s.timeline.select(...i),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},V4=Object.freeze(Object.defineProperty({__proto__:null,default:L4},Symbol.toStringTag,{value:"Module"}));function O4(s,e={},t=void 0){s.context.commands.emit("newComponent","video",e,!0,t)}var j4=Object.freeze(Object.defineProperty({__proto__:null,default:O4},Symbol.toStringTag,{value:"Module"}));function R4(s,e){var t=document.createElement("video");t.onloadeddata=()=>{var r={local:s.local,naturalWidth:t.videoWidth,naturalHeight:t.videoHeight,width:t.videoWidth,height:t.videoHeight,duration:t.duration,playTime:`0:1:${t.duration}`,volume:t.volume,muted:t.muted,placebackRate:t.playbackRate};e&&e(r,t)},t.src=s.local}var z4={command:"addVideoAssetItem",execute:function(s,e,t={},r=void 0){var i=s.context.selection.currentProject;i&&(i.createVideo(e),s.emit("addVideoAsset"),R4(e,a=>{s.context.commands.emit("addVideo",b(b({src:e.id},a),t),r)}))}},A4=Object.freeze(Object.defineProperty({__proto__:null,default:z4},Symbol.toStringTag,{value:"Module"})),D4={command:"clipboard.copy",title:"Copy",description:"Copy",execute:function(s){s.context.clipboard.push({type:Hl.COPY,data:s.context.selection.ids})}},F4=Object.freeze(Object.defineProperty({__proto__:null,default:D4},Symbol.toStringTag,{value:"Module"})),B4={command:"clipboard.paste",execute:async function(s){if(!s.context.clipboard.isEmpty)s.context.commands.emit("history.clipboard.paste","paste");else{var e=await window.navigator.clipboard.readText();e&&s.context.commands.emit("convertPasteText",e)}}},N4=Object.freeze(Object.defineProperty({__proto__:null,default:B4},Symbol.toStringTag,{value:"Module"})),G4={command:"convert.flatten.path",description:"flatten selected multi path",execute:s=>{const e=s.context.selection.current;if(!e)return;let t;if(e.is("boolean-path")||e.isBooleanItem){let r=e;e.isBooleanItem&&(r=e.parent),t=r.absolutePath(r["boolean-path"]),t=r.invertPath(t.d);const i=r.layers[0].toCloneObject();delete i.id,delete i.parentId,delete i.transform,delete i["boolean-path"],delete i["boolean-operation"];const a=r.parent,n=r.updatePath(t.d);s.context.commands.executeCommand("removeLayer","remove selected layers",[r.id]),s.nextTick(()=>{s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},i),n)),!0,a)})}else{t=Y.fromSVGString(),s.context.selection.each(n=>{t.addPath(n.absolutePath())}),t=e.invertPath(t.d);const r=e.parent,i=e.updatePath(t.d),a=e.toCloneObject();delete a.id,s.context.commands.executeCommand("removeLayer","remove selected layers"),s.nextTick(()=>{s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},a),i)),!0,r)})}}},H4=Object.freeze(Object.defineProperty({__proto__:null,default:G4},Symbol.toStringTag,{value:"Module"})),U4={command:"convert.no.transform.path",description:"remove transform(rotate, translate, scale) inforation in path layer",execute:s=>{const e=s.context.selection.current;if(!e)return;const t=e.parent,r=e.absolutePath();if(t.is("project")){const i=r.getBBox(),a=Et(i);s.context.commands.executeCommand("setAttribute","remove transform for path",s.context.selection.packByValue(ie(b({},a),{rotate:0,d:r.d})))}else{r.transformMat4(t.absoluteMatrixInverse);const i=t.updatePath(r.d);s.context.commands.executeCommand("setAttribute","remove transform for path",s.context.selection.packByValue(ie(b({},i),{rotate:0,d:r.d})))}}},W4=Object.freeze(Object.defineProperty({__proto__:null,default:U4},Symbol.toStringTag,{value:"Module"})),X4={command:"convert.normalize.path",description:"convert segments to bezier curve",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","normalize path string",s.context.selection.packByValue(e.updatePath(Y.fromSVGString(e.d).normalize().d)))}},Y4=Object.freeze(Object.defineProperty({__proto__:null,default:X4},Symbol.toStringTag,{value:"Module"})),K4={command:"convert.path.operation",description:"apply path boolean operation",execute:(s,e)=>{var a;const t=s.context.selection.current;if(!t)return;const r=n=>{s.context.commands.executeCommand("setAttribute","change boolean operation",s.context.selection.packByValue({booleanOperation:n})),i()},i=()=>{s.nextTick(()=>{s.context.commands.emit("recoverBooleanPath"),s.nextTick(()=>{s.emit(Oe)})})};if(t.is("boolean-path")||t.isBooleanItem){let n=t;t.isBooleanItem&&(n=t.parent),s.context.selection.select(n),r(e)}else(a=s.context.selection.current)!=null&&a.isNot("boolean-path")&&s.context.commands.emit("group.item",{itemType:"boolean-path",title:"Intersection"}),s.nextTick(()=>{var n;(n=s.context.selection.current)!=null&&n.is("boolean-path")&&r(e)},10)}},Z4=Object.freeze(Object.defineProperty({__proto__:null,default:K4},Symbol.toStringTag,{value:"Module"})),q4={command:"convert.polygonal.path",description:"convert path to polygonal path",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","polygonal path string",s.context.selection.packByValue(e.updatePath(Y.fromSVGString(e.d).polygonal().d)))}},Q4=Object.freeze(Object.defineProperty({__proto__:null,default:q4},Symbol.toStringTag,{value:"Module"})),J4={command:"convert.simplify.path",execute:s=>{const e=s.context.selection.current;!e||s.context.commands.executeCommand("setAttribute","change path string",s.context.selection.packByValue(e.updatePath(s.pathKitManager.simplify(e.d))))}},eM=Object.freeze(Object.defineProperty({__proto__:null,default:J4},Symbol.toStringTag,{value:"Module"})),tM={command:"convert.smooth.path",description:"convert path to smooth",execute:(s,e=5,t=.1,r=.5)=>{const i=s.context.selection.current;if(!i)return;const a=Y.fromSVGString(i.d).divideSegmentByCount(e).simplify(t).cardinalSplines(r).d;s.context.commands.executeCommand("setAttribute","smooth path string",s.context.selection.packByValue(i.updatePath(a)))}},rM=Object.freeze(Object.defineProperty({__proto__:null,default:tM},Symbol.toStringTag,{value:"Module"})),iM={command:"convert.stroke.to.path",execute:async s=>{const e=s.context.selection.current;if(!e)return;const t=e.attrs("d","stroke-width","stroke-dasharray","stroke-dashoffset","stroke-linejoin","stroke-linecap"),r=e.convertStrokeToPath();let i=s.pathKitManager.stroke(e.d||t.d,{"stroke-width":p.parse(t["stroke-width"]).value,"stroke-linejoin":t["stroke-linejoin"],"stroke-linecap":t["stroke-linecap"],"stroke-dasharray":t["stroke-dasharray"],"stroke-dashoffset":t["stroke-dashoffset"],"fill-rule":"nonezero"});r["fill-rule"]="nonzero",i=Y.fromSVGString(i).reversePathStringByFunc((a,n)=>n%2===0),s.context.commands.executeCommand("addLayer","add layer - path",s.createModel(b(b({},r),e.updatePath(i))),!0,e.parent)}},sM=Object.freeze(Object.defineProperty({__proto__:null,default:iM},Symbol.toStringTag,{value:"Module"})),lp={exports:{}};(function(s,e){(function(t,r){s.exports=r()})(Nu,function(){function t(x){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?t=function(P){return typeof P}:t=function(P){return P&&typeof Symbol=="function"&&P.constructor===Symbol&&P!==Symbol.prototype?"symbol":typeof P},t(x)}var r=function(P){if(typeof P!="string")return{};P=P.split("+").join(" ");var E={},N=P.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/),he;if(N===null)return{};he=N[0].substr(1).split(/[&#=]/);for(var We=0;We{const t=ad.create({videoInfo:ad.parse(e),format:"embed",mediaType:"clip"});if(t){const r=s.context.viewport.center,i=300,a=200;s.context.commands.emit("newComponent","iframe",{x:r[0]-i/2,y:r[1]-a/2,width:i,height:a,backgroundColor:"transparent",url:t})}}},nM=Object.freeze(Object.defineProperty({__proto__:null,default:aM},Symbol.toStringTag,{value:"Module"}));function oM(s,e,t=null){var r=s.context.selection.current;if(r){if(r.is("svg-path","svg-brush","svg-textpath")){var i=e;if(t){var a=new Y(e);a.scale(r.width/t.width,r.height/t.height),i=a.d}s.context.commands.executeCommand("setAttribute","set attribute -d",s.context.selection.packByValue({d:i},r.id))}else if(r.clipPath.includes("path")){var i=e;if(t){var a=new Y(e);a.scale(r.width/t.width,r.height/t.height),i=a.d}s.context.commands.executeCommand("setAttribute","change clip path",s.context.selection.packByValue({clipPath:`path(${i})`},r.id))}}}var lM=Object.freeze(Object.defineProperty({__proto__:null,default:oM},Symbol.toStringTag,{value:"Module"})),cM={command:"copy.path",description:"copy as path for item with path string(d attribute)",execute:function(s){const e=s.context.selection.current;if(e){let t=Y.fromSVGString(e.d);try{const r=e.toSVGPath();s.context.commands.executeCommand("addLayer","copy path",s.createModel(b(b({itemType:"svg-path"},r),e.updatePath(t.d))),!0,e.parent)}catch(r){console.error(r)}}}},hM=Object.freeze(Object.defineProperty({__proto__:null,default:cM},Symbol.toStringTag,{value:"Module"})),dM={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(s,e=[]){let t=e.map(l=>s.get(l)).filter(Boolean).map(l=>l.id);if(t.length||(t=s.context.selection.ids),!t.length)return;const r=await s.json.renderAll(t.map(l=>s.get(l))),i=[],a={},n={};let o={};r.forEach(l=>{const c=l.referenceId,h=s.get(c);n[h.parentId]=h.parent;const u=s.createModel(l);u.renameWithCount(),h.insertAfter(u),i.push(u.id),a[u.id]=l,o[u.id]=u.toCloneObject()}),Object.values(n).forEach(l=>{o=b(b({},o),l.attrsWithId("children"))}),s.context.commands.emit("setAttribute",o),s.nextTick(()=>{s.context.selection.select(...i)})}},uM=Object.freeze(Object.defineProperty({__proto__:null,default:dM},Symbol.toStringTag,{value:"Module"})),pM={command:"copyTimelineProperty",execute:function(s,e,t,r=null){Vr(s,i=>{i.copyTimelineKeyframe(e,t,r),s.emit("refreshTimeline")})}},gM=Object.freeze(Object.defineProperty({__proto__:null,default:pM},Symbol.toStringTag,{value:"Module"})),fM={command:"deleteTimelineKeyframe",execute:function(s){Vr(s,e=>{s.timeline.each(t=>{e.deleteTimelineKeyframe(t.layerId,t.property,t.id)}),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset")})}},mM=Object.freeze(Object.defineProperty({__proto__:null,default:fM},Symbol.toStringTag,{value:"Module"})),vM={command:"doubleclick.item",execute:function(s,e,t){const r=s.get(t);s.context.selection.isOne&&r?s.context.selection.checkChildren(r.id)?s.context.selection.select(r):s.context.selection.check(r)?(s.context.commands.emit("open.editor"),s.emit("removeGuideLine")):this.selectInWorldPosition(s,e,r):this.selectInWorldPosition(s,e,r)},selectInWorldPosition:function(s,e,t){const r=s.context.viewport.getWorldPosition(e);(s.context.selection.hasPoint(r)||s.context.selection.hasChildrenPoint(r))&&(s.context.selection.select(t),s.snapManager.clear())}},yM=Object.freeze(Object.defineProperty({__proto__:null,default:vM},Symbol.toStringTag,{value:"Module"}));function wc(s,e="elf.json"){var t=document.createElement("a");t.href=s,t.download=e,t.click()}var bM={command:"downloadJSON",execute:function(s,e){var t=JSON.stringify(s.context.modelManager.toJSON()),r="data:application/json;base64,"+window.btoa(unescape(encodeURIComponent(t)));wc(r,e||"elf.json")}},xM=Object.freeze(Object.defineProperty({__proto__:null,default:bM},Symbol.toStringTag,{value:"Module"})),Cc={makeProjectStyle(s){const e=s.toKeyframeString(),t=s.toRootVariableCSS();return` + :root { + ${Ze(t)} + } + /* keyframe */ + ${e} + `},makeStyle(s,e=""){return s.is("project")?this.makeProjectStyle(s):` + ${s.generateView(`[data-id='${s.id}']`,e)} + `+s.layers.map(r=>this.makeStyle(r)).join("")},makeSvg(s){const e=s.toSVGString?s.toSVGString():"";return` + ${e?`${e}`:""} + `},generateSVG(s,e){return s.replaceLocalUrltoRealUrl(s.svg.render(e))}};function cp(s,e,t="image/png"){var r=ge.create("canvas"),{width:i,height:a}=s;r.resize({width:i,height:a}),r.drawImage(s),e&&e(r.toDataURL(t))}var $M={command:"downloadPNG",execute:function(s){const e=s.context.selection.current;if(e){const t=Cc.generateSVG(s,e).trim(),r="data:image/svg+xml;base64,"+window.btoa(t),i=e.id;zo({local:r},(a,n)=>{cp(n,o=>{wc(o,i)})})}}},_M=Object.freeze(Object.defineProperty({__proto__:null,default:$M},Symbol.toStringTag,{value:"Module"})),SM={command:"downloadSVG",execute:function(s){const e=s.context.selection.current;if(e){var t=Cc.generateSVG(s,e).trim(),r="data:image/svg+xml;base64,"+window.btoa(t),i=e.id;wc(r,i)}}},PM=Object.freeze(Object.defineProperty({__proto__:null,default:SM},Symbol.toStringTag,{value:"Module"})),wM={command:"drop.asset",execute:async function(s,e,t=null){if(e.color)s.context.commands.emit("addBackgroundColor",e.color,t);else if(e.gradient)s.context.commands.emit("addBackgroundImageGradient",e.gradient,t);else if(e.pattern)s.context.commands.emit("addBackgroundImagePattern",e.pattern,t);else if(e.imageUrl)s.context.commands.emit("addBackgroundImageAsset",e.imageUrl,t);else if(e.asset){const r=await s.storageManager.getCustomAsset(e.asset.id);r&&s.context.commands.emit("addArtBoard",r,e.asset.center)}Or(s)}},CM=Object.freeze(Object.defineProperty({__proto__:null,default:wM},Symbol.toStringTag,{value:"Module"})),kM={command:"dropImageUrl",execute:function(s,e){zo({local:e},t=>{s.context.commands.emit("addImage",b({src:t.local},t))})}},TM=Object.freeze(Object.defineProperty({__proto__:null,default:kM},Symbol.toStringTag,{value:"Module"})),MM={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(s){const e=ge.create(s.context.config.get("bodyEvent").target);s.context.config.init("onMouseMovepageContainer",e)}},IM=Object.freeze(Object.defineProperty({__proto__:null,default:MM},Symbol.toStringTag,{value:"Module"})),EM={command:"fileDropItems",execute:function(s,e=[]){s.context.commands.emit("updateResource",e)}},LM=Object.freeze(Object.defineProperty({__proto__:null,default:EM},Symbol.toStringTag,{value:"Module"}));function us(s,e){if(ct(e)){var[t,r,i,a]=e.split(":");return t=parseInt(t,10),r=parseInt(r,10),i=parseInt(i,10),a=parseInt(a,10),t*3600+r*60+i+a*(1/s)}else if(ut(e))return e/s;return 0}function Jt(s,e){var t=Math.floor(e/3600),r=Math.floor(e/60%60),i=Math.floor(e%60),a=Math.round((e-Math.floor(e))*s);return a===s&&(a=0,i+=1,i===60&&(r+=1,r===60&&(t+=1))),[t,r,i,a].map(n=>(n+"").padStart(2,"0")).join(":")}function nd(s,e,t=null){return Jt(s,us(s,e)-us(s,t))}function VM(s){var e={id:0,start:0,speed:s.speed||1,elapsed:s.elapsed||0,duration:s.duration||0,iterationStartCount:1,iterationCount:s.iterationCount||Number.MAX_SAFE_INTEGER,direction:s.direction||"normal",log:[],logIndex:0,tick:s.tick||(()=>{}),startCallback:s.start||(()=>{}),endCallback:s.end||(()=>{}),firstCallback:s.first||(()=>{}),lastCallback:s.last||(()=>{})};const t=()=>{if(e.direction==="normal")return!0;if(e.direction==="reverse")return!1;if(e.direction==="alternate")return e.iterationStartCount%2===1;if(e.direction==="alternate-reverse")return e.iterationStartCount%2===0},r=d=>t()?d:1-d,i=d=>{var v=!1;e.start===null&&(e.start=d,v=!0);const g=d-e.start;e.elapsed+=g*e.speed,e.start=d,e.elapsed>e.duration&&(e.elapsed=e.duration);var y=r(e.elapsed/e.duration)*e.duration;v&&e.startCallback(y,e),e.log[e.logIndex++]={elapsed:y,dt:e.lastTime-y},e.lastTime=y,e.tick(y,e),e.elapsed===e.duration?n():a()},a=()=>{e.id=window.requestAnimationFrame(i)},n=()=>{e.endCallback(e.elapsed,e),e.iterationStartCount++,e.iterationStartCount>e.iterationCount?(e.lastCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)):(e.start=null,e.elapsed=0,a())},o=(d={})=>{e.start=null,e.iterationStartCount=1,e.log=[],e.lastTime=0,e.logIndex=0,ut(d.elapsed)&&(e.elapsed=d.elapsed),ut(d.speed)&&(e.speed=d.speed),ut(d.duration)&&(e.duration=d.duration),ut(d.iterationCount)&&(e.iterationCount=d.iterationCount||Number.MAX_SAFE_INTEGER),ct(d.direction)&&(e.direction=d.direction),de(d.tick)&&(e.tick=d.tick),de(d.start)&&(e.startCallback=d.start),de(d.end)&&(e.endCallback=d.end),de(d.first)&&(e.firstCallback=d.first),de(d.last)&&(e.lastCallback=d.last),de(d.stop)&&(e.stopCallback=d.stop),e.firstCallback(e.elapsed,e),a()},l=()=>{e.stopCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)},c=d=>{e.elapsed=d,e.tick(e.elapsed,e)};return{play:o,stop:l,tick:i,first:()=>{c(0)},last:()=>{c(e.duration)},seek:c,timer:e}}var OM={command:"firstTimelineItem",execute:function(s){Vr(s,(e,t)=>{var r=e.getSelectedTimelineFirstTime();e.setTimelineCurrentTime(Jt(t.fps,r)),e.seek(),s.emit("playTimeline")})}},jM=Object.freeze(Object.defineProperty({__proto__:null,default:OM},Symbol.toStringTag,{value:"Module"})),RM={command:"group.item",execute:function(s,e={}){if(s.context.selection.length===0)return;const t=s.context.selection.currentProject;if(t){t.generateListNumber();const r=s.context.selection.map(a=>({depth:a.depth,item:a}));r.sort((a,n)=>a.depth===n.depth?a.no>n.no?-1:1:a.depth>n.depth?1:-1);const i=s.createModel(b(b({itemType:"rect"},s.context.selection.itemRect),e));r[0].item.insertAfter(i),r.forEach(({item:a})=>{i.appendChild(a)}),s.context.selection.select(i),s.emit("refreshAll")}}},zM=Object.freeze(Object.defineProperty({__proto__:null,default:RM},Symbol.toStringTag,{value:"Module"})),AM={command:"history.addLayer",description:"add layer in history ",execute:function(s,e,t,r=!0,i){s.context.commands.emit("addLayer",t,r,i),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[t,r,i],undoValues:[t.id]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:e}){s.context.commands.emit("addLayer",...e),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:e}){const t=e;s.context.selection.itemsByIds(t).forEach(i=>{i&&i.remove()}),s.nextTick(()=>{s.context.selection.empty(),s.emit("refreshAll")})}},DM=Object.freeze(Object.defineProperty({__proto__:null,default:AM},Symbol.toStringTag,{value:"Module"})),FM={command:"history.bring.forward",description:"bring forward",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={},o=null;if(r.isLast){if(o=a.next,!o)return;o.enableHasChildren()?(o.appendChild(r),n=r.hierarchy):(o.insertAfter(r),n=r.hierarchy)}else r.parent.bringForward(r.id),n=r.hierarchy;s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle")),r.parent.attrsWithId("children"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e],undoValues:[t]}){const r=s.get(e.id),i=s.get(e.parentId),a=s.get(t.parentId);i.insertChild(r,e.index),r.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle")),i.attrsWithId("children")))},undo:function(s,{currentValues:[e],undoValues:[t]}){const r=t,i=s.get(r.id),a=s.get(r.parentId),n=s.get(e.parentId),o=r.index;a.insertChild(i,o),i.reset(t.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},BM=Object.freeze(Object.defineProperty({__proto__:null,default:FM},Symbol.toStringTag,{value:"Module"})),NM={command:"history.bring.front",description:"bring front",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierachy,a=r.parent;let n={};r.isLast||(r.parent.bringFront(r.id),n=r.hierarchy,s.context.commands.emit("setAttribute",b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()}))},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e]}){const t=e,r=s.get(t.id),i=s.get(t.parentId),a=t.index;i.insertChild(r,a),s.context.commands.emit("setAttribute",b(b({},r.attrsWithId("x","y","angle")),i.attrsWithId("children")))}},GM=Object.freeze(Object.defineProperty({__proto__:null,default:NM},Symbol.toStringTag,{value:"Module"})),HM={command:"history.clipboard.paste",description:"paste in clipboard ",description_ko:["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "],execute:async function(s,e,t=void 0,r=!0){const i=t||s.context.clipboard.last;if(i.type==Hl.COPY){const a=i.data,n=await s.json.renderAll(a.map(u=>s.get(u))),o=[],l={},c={};let h={};n.forEach(u=>{const d=u.referenceId,v=s.get(d);c[v.parentId]=v.parent;const g=s.createModel(u);g.renameWithCount(),v.insertAfter(g),o.push(g.id),l[g.id]=u,h[g.id]=g.toCloneObject()}),Object.values(c).forEach(u=>{h=b(b({},h),u.attrsWithId("children"))}),s.context.commands.emit("setAttribute",h),s.nextTick(()=>{s.context.selection.select(...o),r&&s.context.history.add(e,this,{currentValues:[i],undoValues:[o,s.context.selection.ids]}),s.context.history.saveSelection()})}},redo:function(s,{currentValues:[e]}){s.context.commands.emit("history.clipboard.paste","paste",e,!1)},undo:function(s,{currentValues:[e],undoValues:[t,r]}){if(e.type===Hl.COPY){const i={};t.forEach(n=>{const o=s.get(n);i[o.parentId]=o.parent,o&&o.remove()});let a={};Object.values(i).forEach(n=>{a=b(b({},a),n.attrsWithId("children"))}),s.context.selection.select(...r),s.context.commands.emit("setAttribute",a)}}},UM=Object.freeze(Object.defineProperty({__proto__:null,default:HM},Symbol.toStringTag,{value:"Module"})),WM={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(s,e,t=[]){let r=t.map(c=>s.get(c)).filter(Boolean).map(c=>c.id);if(r.length||(r=s.context.selection.ids),!r.length)return;const i=await s.json.renderAll(r.map(c=>s.get(c))),a=[],n={},o={};let l={};i.forEach(c=>{const h=c.referenceId,u=s.get(h);o[u.parentId]=u.parent;const d=s.createModel(c);d.renameWithCount(),u.insertAfter(d),a.push(d.id),n[d.id]=c,l[d.id]=d.toCloneObject()}),Object.values(o).forEach(c=>{l=b(b({},l),c.attrsWithId("children"))}),s.context.commands.emit("setAttribute",l),s.nextTick(()=>{s.context.selection.select(...a),s.context.history.add(e,this,{currentValues:[r],undoValues:[a,s.context.selection.ids]}),s.context.history.saveSelection()})},redo:function(s,{currentValues:[e]}){s.context.commands.emit("copyLayer",e)},undo:function(s,{undoValues:[e,t]}){const r={};e.forEach(a=>{const n=s.get(a);r[n.parentId]=n.parent,n&&n.remove()});let i={};Object.values(r).forEach(a=>{i=b(b({},i),a.attrsWithId("children"))}),s.context.selection.select(...t),s.context.commands.emit("setAttribute",i)}},XM=Object.freeze(Object.defineProperty({__proto__:null,default:WM},Symbol.toStringTag,{value:"Module"})),YM={command:"history.group.item",description:"History Group Item",execute:function(s,e="selection"){var a;const t=s.context.selection.ids,r=(a=s.context.selection.currentProject)==null?void 0:a.id,i=s.context.history.selectedIds;$c(t,i)||s.context.history.add(e,this,{currentValues:{ids:t,projectId:r},undoValues:{ids:i,projectId:r}})},redo:function(s,{currentValues:[e,t]}){},undo:function(s,{undoValues:[e,t]}){}},KM=Object.freeze(Object.defineProperty({__proto__:null,default:YM},Symbol.toStringTag,{value:"Module"})),ZM={command:"history.moveLayer",description:"move layer in world ",execute:function(s,e,t=[],r=[0,0,0]){Ut(t)===!1&&(t=[t]);const i=s.context.selection.itemsByIds(t),a={},n={};i.forEach(o=>{const l=o.absoluteMove(r),c=o.attrs("x","y");a[o.id]=l,n[o.id]=c}),s.context.commands.emit("setAttribute",n),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[t,r],undoValues:[a]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e,t]}){const r=s.context.selection.itemsByIds(e),i={};r.forEach(a=>{a.absoluteMove(t);const n=a.attrs("x","y");i[a.id]=n}),s.context.commands.emit("setAttribute",i)},undo:function(s,{undoValues:[e]}){s.context.commands.emit("setAttribute",e)}},qM=Object.freeze(Object.defineProperty({__proto__:null,default:ZM},Symbol.toStringTag,{value:"Module"})),QM={command:"history.moveLayerToTarget",description:"move layer to target in world ",execute:function(s,e,t,r,i=[0,0,0],a=Br.APPEND_CHILD){const n=s.get(t)||t,o=n.parent,l=s.get(r)||s.context.selection.currentProject,c=n.hierachy;i&&n.absoluteMove(i);let h={};a===Br.APPEND_CHILD?(l.appendChild(n),h=l.attrsWithId("children")):a===Br.INSERT_BEFORE?(l.insertBefore(n),h=l.parent.attrsWithId("children")):a===Br.INSERT_AFTER&&(l.insertAfter(n),h=l.parent.attrsWithId("children")),s.context.commands.emit("setAttribute",b(b(b({},n.attrsWithId("x","y","angle","parentId")),h),o&&o.isNot("project")?o.attrsWithId("children"):{})),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n.hierachy],undoValues:[c,n.parentId]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e,t]}){const r=e,i=s.get(r.id),a=s.get(r.parentId),n=s.get(t),o=r.index;a.insertChild(i,o),i.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},JM=Object.freeze(Object.defineProperty({__proto__:null,default:QM},Symbol.toStringTag,{value:"Module"})),eI={command:"history.refreshSelection",description:"save selection in history ",description_ko:"Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(s,e="selection"){var a;const t=s.context.selection.ids,r=(a=s.context.selection.currentProject)==null?void 0:a.id,i=s.context.history.selectedIds;$c(t,i)||(s.context.history.add(e,this,{currentValues:[t,r],undoValues:[i,r]}),this.nextAction(s))},nextAction(s){s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e,t]}){s.context.selection.selectProject(t),s.context.selection.select(...e),this.nextAction(s)},undo:function(s,{undoValues:[e,t]}){s.context.selection.selectProject(t),s.context.selection.select(...e),this.nextAction(s)}},tI=Object.freeze(Object.defineProperty({__proto__:null,default:eI},Symbol.toStringTag,{value:"Module"})),rI={command:"history.refreshSelectionPorject",description:"save project selection in history ",description_ko:"Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(s,e="selection",t){var a;const r=[t],i=[(a=s.context.selection.currentProject)==null?void 0:a.id];$c(r,i)||(s.context.selection.selectProject(t),s.context.history.add(e,this,{currentValues:r,undoValues:i}),this.nextAction(s))},nextAction(s){s.nextTick(()=>{s.emit("refreshAll"),s.emit("refreshProjectList")})},redo:function(s,{currentValues:[e]}){s.context.selection.selectProject(e),this.nextAction(s)},undo:function(s,{undoValues:[e]}){s.context.selection.selectProject(e),this.nextAction(s)}},iI=Object.freeze(Object.defineProperty({__proto__:null,default:rI},Symbol.toStringTag,{value:"Module"}));function od(s=[]){return s.filter(e=>{let t=0;return e.path.forEach(r=>{t+=s.filter(i=>i.id===r.id).length?1:0}),t===1})}var sI={command:"history.removeLayer",description:"remove layer",execute:function(s,e,t=void 0){let r=s.context.selection.itemsByIds(t||s.context.selection.ids);r=od(r);const i=r.map(n=>n.id);s.context.modelManager.markRemove(i);const a=r.map(n=>n.parentId);r.forEach(n=>{n.remove(),s.context.selection.removeById(n.id)}),s.context.history.add(e,this,{currentValues:[i,a],undoValues:i}),s.nextTick(()=>{s.context.selection.removeById(i),a.forEach(n=>{s.context.commands.emit("update",n,{changedChildren:!0})}),s.emit("refreshAll"),s.emit("removeGuideLine"),s.nextTick(()=>{s.context.history.saveSelection()})})},redo:function(s,{currentValues:e}){const t=e[0];let r=s.context.selection.itemsByIds(t||s.context.selection.ids);r=od(r),s.context.modelManager.markRemove(r.map(i=>i.id)),r.forEach(i=>i.remove()),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:e}){s.context.modelManager.unmarkRemove(e),s.nextTick(()=>{s.emit("refreshAll")})}},aI=Object.freeze(Object.defineProperty({__proto__:null,default:sI},Symbol.toStringTag,{value:"Module"})),nI={command:"history.removeProject",description:"remove project",execute:function(s,e,t){const r=s.context.modelManager.markRemoveProject(t);s.context.history.add(e,this,{currentValues:[t],undoValues:[t,r]}),s.nextTick(()=>{s.context.selection.selectProject(s.context.modelManager.projects[0]),s.emit("refreshAll"),s.emit("removeGuideLine"),s.nextTick(()=>{s.context.history.saveSelection()})})},redo:function(s,{currentValues:[e]}){s.context.modelManager.markRemoveProject(e),s.nextTick(()=>{s.emit("refreshAll")})},undo:function(s,{undoValues:[e,t]}){s.context.modelManager.unmarkRemoveProject(e,t),s.nextTick(()=>{s.context.selection.selectProject(e),s.emit("refreshAll")})}},oI=Object.freeze(Object.defineProperty({__proto__:null,default:nI},Symbol.toStringTag,{value:"Module"})),lI={command:"history.send.back",description:"send back",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={};r.isFirst()||(r.parent.sendBack(r.id),n=r.hierarchy,s.context.commands.emit("setAttribute",b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()}))},redo:function(s,{currentValues:[e]}){const t=s.get(e.id),r=s.get(e.parentId);r.insertChild(t,e.index),t.reset(e.attrs),s.context.commands.emit("setAttribute",b(b({},t.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(s,{undoValues:[e]}){const t=e,r=s.get(t.id),i=s.get(t.parentId),a=t.index;i.insertChild(r,a),s.context.commands.emit("setAttribute",b(b({},r.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))}},cI=Object.freeze(Object.defineProperty({__proto__:null,default:lI},Symbol.toStringTag,{value:"Module"})),hI={command:"history.send.backward",description:"send backward",execute:function(s,e,t=s.context.selection.current){const r=s.get(t),i=r.hierarchy,a=r.parent;let n={},o=null;if(r.isFirst){if(o=a.prev,!o)return;o.insertBefore(r),n=r.hierarchy}else r.parent.sendBackward(r.id),n=r.hierarchy;s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId")),r.parent.attrsWithId("children"))),s.nextTick(()=>{s.context.history.add(e,this,{currentValues:[n],undoValues:[i]})}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:[e],undoValues:[t]}){const r=s.get(e.id),i=s.get(e.parentId),a=s.get(t.parentId);i.insertChild(r,e.index),r.reset(e.attrs),s.context.commands.emit("setAttribute",b(b(b({},a.attrsWithId("children")),r.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(s,{currentValues:[e],undoValues:[t]}){const r=t,i=s.get(r.id),a=s.get(r.parentId),n=s.get(e.parentId),o=r.index;a.insertChild(i,o),i.reset(t.attrs),s.context.commands.emit("setAttribute",b(b(b({},i.attrsWithId("x","y","angle")),a.attrsWithId("children")),n.attrsWithId("children")))}},dI=Object.freeze(Object.defineProperty({__proto__:null,default:hI},Symbol.toStringTag,{value:"Module"})),uI={command:"history.setAttribute",execute:function(s,e,t={},r={origin:"*"}){s.context.commands.emit("setAttribute",t,r),s.context.history.add(e,this,{currentValues:[t],undoValues:s.context.history.getUndoValues(t)}),s.nextTick(()=>{s.context.history.saveSelection()})},redo:function(s,{currentValues:e}){s.context.commands.emit("setAttribute",...e),s.nextTick(()=>{s.context.selection.reselect(),s.emit("refreshAll")})},undo:function(s,{undoValues:e}){const t=Object.keys(e);s.context.selection.itemsByIds(t).forEach(i=>{i.reset(e[i.id])}),s.context.selection.reselect(),s.nextTick(()=>{s.emit("refreshAll")})}},pI=Object.freeze(Object.defineProperty({__proto__:null,default:uI},Symbol.toStringTag,{value:"Module"})),gI={command:"item.move.depth.down",execute:function(s){const e=s.context.selection.current;e&&e.orderPrev(),Or(s)}},fI=Object.freeze(Object.defineProperty({__proto__:null,default:gI},Symbol.toStringTag,{value:"Module"})),mI={command:"item.move.depth.first",execute:function(s){const e=s.context.selection.current;e&&e.orderFirst(),Or(s)}},vI=Object.freeze(Object.defineProperty({__proto__:null,default:mI},Symbol.toStringTag,{value:"Module"})),yI={command:"item.move.depth.last",execute:function(s){const e=s.context.selection.current;e&&e.orderLast(),Or(s)}},bI=Object.freeze(Object.defineProperty({__proto__:null,default:yI},Symbol.toStringTag,{value:"Module"})),xI={command:"item.move.depth.up",execute:function(s){const e=s.context.selection.current;e&&e.orderNext(),Or(s)}},$I=Object.freeze(Object.defineProperty({__proto__:null,default:xI},Symbol.toStringTag,{value:"Module"})),_I={command:"keymap.keydown",execute:function(s,e){s.context.keyboardManager.add(e.code,e.keyCode,e),s.context.shortcuts&&s.context.shortcuts.execute(e,"keydown")}},SI=Object.freeze(Object.defineProperty({__proto__:null,default:_I},Symbol.toStringTag,{value:"Module"})),PI={command:"lastTimelineItem",execute:function(s){Vr(s,(e,t)=>{var r=e.getSelectedTimelineLastTime();e.setTimelineCurrentTime(Jt(t.fps,r)),e.seek(),s.emit("playTimeline")})}},wI=Object.freeze(Object.defineProperty({__proto__:null,default:PI},Symbol.toStringTag,{value:"Module"})),CI={command:"load.json",execute:function(s,e,t={origin:"*"}){s.context.modelManager.load(e,t),Or(s)}},kI=Object.freeze(Object.defineProperty({__proto__:null,default:CI},Symbol.toStringTag,{value:"Module"})),TI={command:"moveLayer",description:"move layer by keydown with matrix ",execute:function(s,e=0,t=0){const r=[e,t,0];s.context.selection.items.forEach(i=>{i.absoluteMove(r)}),s.context.commands.executeCommand("setAttribute","item move down",s.context.selection.pack("x","y")),s.nextTick(()=>{s.context.selection.reselect()})}},MI=Object.freeze(Object.defineProperty({__proto__:null,default:TI},Symbol.toStringTag,{value:"Module"})),II={command:"moveLayerForItems",description:"mova layer by multi items ",execute:function(s,e=[]){const t={};e.forEach(r=>{r.item.absoluteMove(r.dist),t[r.item.id]=r.item.attrs("x","y")}),s.context.commands.emit("history.setAttribute","item move",t),s.nextTick(()=>{s.context.selection.reselect()})}},EI=Object.freeze(Object.defineProperty({__proto__:null,default:II},Symbol.toStringTag,{value:"Module"})),LI={command:"moveSelectionToCenter",description:"Move selection project or artboards to center on Viewport",execute:function(s,e=!0){var r,i,a,n,o;let t=[];(r=s.context.selection)!=null&&r.isEmpty?((a=(i=s.context.selection)==null?void 0:i.currentProject)==null?void 0:a.layers.length)>0?t=Ra((n=s.context.selection)==null?void 0:n.currentProject.layers):t=mt(0,0,100,100):t=Ra((o=s.context.selection)==null?void 0:o.items),s.context.commands.emit("moveToCenter",t,e)}},VI=Object.freeze(Object.defineProperty({__proto__:null,default:LI},Symbol.toStringTag,{value:"Module"}));function OI(s,e,t,r=!0,i=void 0){e==="svg-textpath"?t=ie(b({},t),{fontSize:t.height,textLength:"100%",d:Y.makeLine(0,t.height,t.width,t.height).d}):e==="svg-circle"?(e="svg-path",t=ie(b({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:Y.makeCircle(0,0,t.width,t.height).d})):e==="svg-rect"?(e="svg-path",t=ie(b({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:Y.makeRect(0,0,t.width,t.height).d})):e==="text"?t=b({width:300,height:50},t):e==="artboard"&&(t=ie(b({},t),{backgroundColor:"white"}));const a=b({itemType:e},t),n=s.createModel(a);s.context.commands.executeCommand("moveLayerToTarget",`add layer - ${e}`,n,i),s.nextTick(()=>{s.emit("appendLayer",n),r&&s.context.selection.select(n)})}var jI=Object.freeze(Object.defineProperty({__proto__:null,default:OI},Symbol.toStringTag,{value:"Module"})),RI={command:"nextTimelineItem",execute:function(s){Vr(s,(e,t)=>{var r=e.getSelectedTimelineNextTime();e.setTimelineCurrentTime(Jt(t.fps,r)),e.seek(),s.emit("playTimeline")})}},zI=Object.freeze(Object.defineProperty({__proto__:null,default:RI},Symbol.toStringTag,{value:"Module"})),AI={command:"open.editor",description:"Open custom editor for item when doubleclick is fired",execute:function(s,e){if(!(!e&&s.context.selection.isOne===!1)&&(e=e||s.context.selection.current,e)){if(e.editablePath)s.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,isControl:!0,disableCurve:!0,d:e.editablePath,changeEvent:a=>{s.context.commands.executeCommand("setAttribute","change editable path",s.context.selection.packByValue(b({},e.recoverEditablePath(a.d)),[e.id])),s.nextTick(()=>{s.context.stateManager.isPointerUp&&s.context.commands.emit("recoverBooleanPath")})}}),s.emit("hideSelectionToolView");else if(e.d)s.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,d:e.absolutePath().d,changeEvent:a=>{const n=s.context.selection.current;if(n.isSVG()&&n.isNot("svg-path")){const o=n.toSVGPath(),l=s.createModel(b({itemType:"svg-path"},o));s.context.selection.select(l),n.insertAfter(l),s.nextTick(()=>{s.context.commands.emit("removeLayer",[n.id]),s.context.commands.emit("updatePathItem",a)})}else s.context.commands.emit("updatePathItem",a),s.nextTick(()=>{s.context.stateManager.isPointerUp&&s.context.commands.emit("recoverBooleanPath")})}}),s.emit("hideSelectionToolView");else if(e.clipPath){var t=xe.parseStyle(e.clipPath);if(t.type==="path"){var r=e.absolutePath(e.clipPathString).d,i=r?"modify":"path";s.emit("showPathEditor",i,{changeEvent:a=>{const n=e.invertPath(a.d).d;s.context.commands.executeCommand("setAttribute","change clip-path",s.context.selection.packByValue({clipPath:`path(${n})`}))},current:e,d:r}),s.emit("hideSelectionToolView")}else t.type==="svg"||s.emit("showClippathEditorView")}}}},DI=Object.freeze(Object.defineProperty({__proto__:null,default:AI},Symbol.toStringTag,{value:"Module"})),FI={command:"pauseTimelineItem",execute:function(s){s.timer&&s.timer.stop()}},BI=Object.freeze(Object.defineProperty({__proto__:null,default:FI},Symbol.toStringTag,{value:"Module"})),NI={command:"playTimelineItem",description:"Play button action",execute:function(s,e=1,t=1,r="normal"){s.context.selection.empty(),Vr(s,(i,a)=>{var n=i.getSelectedTimelineLastTime();s.timer?s.timer.stop():s.timer=VM({elapsed:a.currentTime*1e3,speed:e,duration:n*1e3,iterationCount:t,direction:r}),s.timer.play({duration:n*1e3,elapsed:a.currentTime*1e3,speed:e,iterationCount:t,direction:r,tick:o=>{i.seek(Jt(a.fps,o/1e3)),s.emit("playTimeline")},last:o=>{i.seek(Jt(a.fps,o/1e3)),s.emit("playTimeline"),s.nextTick(()=>{s.emit("stopTimeline")})},stop:o=>{i.stop(Jt(a.fps,o/1e3)),s.emit("stopTimeline")}})})}},GI=Object.freeze(Object.defineProperty({__proto__:null,default:NI},Symbol.toStringTag,{value:"Module"})),HI={command:"prevTimelineItem",execute:function(s){Vr(s,(e,t)=>{var r=e.getSelectedTimelinePrevTime();e.setTimelineCurrentTime(Jt(t.fps,r)),e.seek(),s.emit("playTimeline")})}},UI=Object.freeze(Object.defineProperty({__proto__:null,default:HI},Symbol.toStringTag,{value:"Module"})),WI={command:"recoverBooleanPath",description:"recover box rectangle for boolean path result",execute:function(s){const e=s.context.selection.current;let t;if(e&&e.isBooleanItem?t=e.parent:e&&e.is("boolean-path")&&(t=e),t){const r=typeof e.isBooleanItem=="boolean"&&e.isBooleanItem,i=t.d;if(!i)return;const a=t.layers.map(c=>({item:c,matrix:c.matrix})),n=t.updatePath(i);delete n.d,t.reset(n),a.forEach(c=>{t.resetMatrix(c.item)});const o=[...a.map(c=>c.item.id),t.id],l=s.context.selection.packByIds(o,"x","y","width","height");s.context.commands.executeCommand("setAttribute","fit boolean path",l,{origin:"*",doNotChildrenScale:r})}}},XI=Object.freeze(Object.defineProperty({__proto__:null,default:WI},Symbol.toStringTag,{value:"Module"})),YI={command:"refreshArtboard",execute:function(s){const e=s.createCommandMaker();e.emit("refreshLayerTreeView"),e.emit("refreshAllCanvas"),e.emit(Lt),e.emit("refreshAllElementBoundSize"),e.emit(Oe),e.run()}},KI=Object.freeze(Object.defineProperty({__proto__:null,default:YI},Symbol.toStringTag,{value:"Module"}));function ld(s,e){var t;e.hasLayout()?s.emit("refreshElementBoundSize",e):e&&(e.isLayoutItem()||((t=e.parent)==null?void 0:t.is("boolean-path")))?s.emit("refreshElementBoundSize",e.parent):s.emit("refreshElementBoundSize",e)}var ZI={command:"refreshElement",execute:function(s,e,t=!0){const r=s.createCommandMaker();Ut(e)?(t&&r.emit("refreshAllCanvas"),r.emit(Lt,e),e.forEach(i=>{ld(r,i)})):(t&&e&&e.hasChangedField("children","changedChildren","parentId")&&r.emit("refreshAllCanvas"),r.emit(Lt,e),ld(r,e)),r.run()}},qI=Object.freeze(Object.defineProperty({__proto__:null,default:ZI},Symbol.toStringTag,{value:"Module"}));function QI(s){s.context.commands.emit("saveJSON")}var JI=Object.freeze(Object.defineProperty({__proto__:null,default:QI},Symbol.toStringTag,{value:"Module"})),eE={command:"refreshSelectedOffset",execute:function(s){var e=s.timeline.items[0];e&&s.emit("refreshOffsetValue",e)}},tE=Object.freeze(Object.defineProperty({__proto__:null,default:eE},Symbol.toStringTag,{value:"Module"})),rE={command:"removeAnimationItem",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.removeAnimationItem(e),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("removeAnimation"))}},iE=Object.freeze(Object.defineProperty({__proto__:null,default:rE},Symbol.toStringTag,{value:"Module"})),sE={command:"removeLayer",execute:function(s,e=void 0){const t=e||s.context.selection.ids,r=[];s.context.selection.itemsByIds(t).forEach(i=>{r.push(i.id),i.remove()}),s.context.selection.removeById(r),s.nextTick(()=>{s.emit("refreshAll")})}},aE=Object.freeze(Object.defineProperty({__proto__:null,default:sE},Symbol.toStringTag,{value:"Module"})),nE={command:"removeTimeline",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.removeTimeline(e),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset"))}},oE=Object.freeze(Object.defineProperty({__proto__:null,default:nE},Symbol.toStringTag,{value:"Module"})),lE={command:"removeTimelineProperty",execute:function(s,e,t){const r=s.context.selection.currentProject;r&&(r.removeTimelineProperty(e,t),s.timeline.empty(),s.emit("refreshTimeline"),s.emit("refreshSelectedOffset"))}},cE=Object.freeze(Object.defineProperty({__proto__:null,default:lE},Symbol.toStringTag,{value:"Module"}));function hE(s,e=""){var t=s.context.selection.current;if(t&&t.is("artboard")){if(!e.trim())return;var[r,i]=e.split("x");r=+r,i=+i,t.resize(r,i),s.context.selection.select(t),Or(s)}}var dE=Object.freeze(Object.defineProperty({__proto__:null,default:hE},Symbol.toStringTag,{value:"Module"})),uE={command:"rotateLayer",description:"rotate layer by keydown with matrix ",execute:function(s,e=0){s.context.commands.executeCommand("setAttribute","change rotate",s.context.selection.packByValue({angle:s.context.selection.current.angle+e}))}},pE=Object.freeze(Object.defineProperty({__proto__:null,default:uE},Symbol.toStringTag,{value:"Module"})),gE={command:"same.height",description:"fit at the same height",execute:function(s){var e=s.context.selection.length;if(e!=1){if(e>1){const t=Et(s.context.selection.verties);s.context.commands.executeCommand("setAttribute","fit at the same height",s.context.selection.packByValue({y:t.y,height:t.height}))}}}},fE=Object.freeze(Object.defineProperty({__proto__:null,default:gE},Symbol.toStringTag,{value:"Module"})),mE={command:"same.width",description:"fit at the same width",execute:function(s){if(s.context.selection.isMany){const e=Et(s.context.selection.verties);s.context.commands.executeCommand("setAttribute","fit at the same width",s.context.selection.packByValue({x:e.x,width:e.width}))}}},vE=Object.freeze(Object.defineProperty({__proto__:null,default:mE},Symbol.toStringTag,{value:"Module"})),yE={command:"saveJSON",execute:function(s){s.saveItem("model",s.context.modelManager.toJSON())}},bE=Object.freeze(Object.defineProperty({__proto__:null,default:yE},Symbol.toStringTag,{value:"Module"})),xE={command:"savePNG",execute:function(s,e=""){const t=s.context.selection.current;if(t){const r=Cc.generateSVG(s,t).trim(),i="data:image/svg+xml;base64,"+window.btoa(r);zo({local:i},(a,n)=>{cp(n,o=>{e&&s.emit(e,o)})})}}},$E=Object.freeze(Object.defineProperty({__proto__:null,default:xE},Symbol.toStringTag,{value:"Module"})),_E={command:"segment.delete",execute:function(s){s.emit("deleteSegment")}},SE=Object.freeze(Object.defineProperty({__proto__:null,default:_E},Symbol.toStringTag,{value:"Module"})),PE={command:"segment.move.down",execute:function(s,e={dy:1}){const t=+e.dy;s.emit("moveSegment",0,t)}},wE=Object.freeze(Object.defineProperty({__proto__:null,default:PE},Symbol.toStringTag,{value:"Module"})),CE={command:"segment.move.left",execute:function(s,e={dx:1}){const t=+e.dx;s.emit("moveSegment",-1*t,0)}},kE=Object.freeze(Object.defineProperty({__proto__:null,default:CE},Symbol.toStringTag,{value:"Module"})),TE={command:"segment.move.right",execute:function(s,e={dx:1}){const t=+e.dx;s.emit("moveSegment",t,0)}},ME=Object.freeze(Object.defineProperty({__proto__:null,default:TE},Symbol.toStringTag,{value:"Module"})),IE={command:"segment.move.up",execute:function(s,e={dy:1}){const t=+e.dy;s.emit("moveSegment",0,-1*t)}},EE=Object.freeze(Object.defineProperty({__proto__:null,default:IE},Symbol.toStringTag,{value:"Module"})),LE={command:"select.all",execute:function(s){var e=s.context.selection.currentProject;e&&(s.context.selection.select(...e.layers),s.context.commands.emit("history.refreshSelection"))}},VE=Object.freeze(Object.defineProperty({__proto__:null,default:LE},Symbol.toStringTag,{value:"Module"})),OE={command:"select.none",execute:function(s){s.context.selection.empty(),s.context.commands.emit("history.refreshSelection")}},jE=Object.freeze(Object.defineProperty({__proto__:null,default:OE},Symbol.toStringTag,{value:"Module"})),RE={command:"selectTimelineItem",execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.selectTimeline(e),s.emit("refreshTimeline"),s.emit("selectTimeline"))}},zE=Object.freeze(Object.defineProperty({__proto__:null,default:RE},Symbol.toStringTag,{value:"Module"})),AE={command:"setAttribute",execute:function(s,e={},t={origin:"*"}){const r=[];if(Object.entries(e).forEach(([n,o])=>{const l=s.get(n),c={};Object.entries(o).forEach(([h,u])=>{c[h]=de(u)?u(l):u}),r.push({id:l.id,parentId:l.parentId,attrs:c})}),r.length==0)return;let i=!1;const a=[];r.forEach(n=>{const o=s.get(n.id);if(o&&(o.reset(n.attrs,t),o.hasChangedField("layout")&&o.layers.forEach(l=>{l.isLayout(Ae.DEFAULT)||l.isLayout(Ae.FLEX)||l.isLayout(Ae.GRID),s.context.commands.emit("refreshElement",l)}),a.push(o),o.hasChangedHirachy&&(i=!0)),!o.is("project")&&!(o.parent&&o.parent.is("project"))&&(o.isLayoutItem()||o.isBooleanItem)){const l=s.get(n.parentId);n.parentId&&(l==null?void 0:l.isNot("project"))&&(l.reset({changedChildren:!0},t),i=!0)}}),a.length&&s.context.commands.emit("refreshElement",a,!1),i&&s.emit("refreshAllCanvas")}},DE=Object.freeze(Object.defineProperty({__proto__:null,default:AE},Symbol.toStringTag,{value:"Module"})),FE={command:"setTimelineOffset",debounce:100,execute:function(s,e){const t=s.context.selection.currentProject;t&&(t.setTimelineKeyframeOffsetValue(e.layerId,e.property,e.id,e.value,e.timing,e.time),s.emit("refreshTimeline"))}},BE=Object.freeze(Object.defineProperty({__proto__:null,default:FE},Symbol.toStringTag,{value:"Module"})),NE={command:"showExportView",execute:function(s){s.emit("showExportWindow")}},GE=Object.freeze(Object.defineProperty({__proto__:null,default:NE},Symbol.toStringTag,{value:"Module"})),HE={command:"sort.bottom",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=Nn(t.verties)-Nn(s.context.selection.verties);s.context.commands.emit("moveLayer",0,r)}}else if(s.context.selection.isMany){let e=Nn(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Nn(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},UE=Object.freeze(Object.defineProperty({__proto__:null,default:HE},Symbol.toStringTag,{value:"Module"})),WE={command:"sort.center",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=Hn(e.artboard.verties)-Hn(s.context.selection.verties);s.context.commands.emit("moveLayer",t,0)}}}else if(s.context.selection.isMany){let e=Hn(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Hn(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},XE=Object.freeze(Object.defineProperty({__proto__:null,default:WE},Symbol.toStringTag,{value:"Module"})),YE={command:"sort.left",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=Gn(t.verties)-Gn(s.context.selection.verties);s.context.commands.emit("moveLayer",r,0)}}else if(s.context.selection.isMany){let e=Gn(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Gn(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},KE=Object.freeze(Object.defineProperty({__proto__:null,default:YE},Symbol.toStringTag,{value:"Module"})),ZE={command:"sort.middle",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=Wn(e.artboard.verties)-Wn(s.context.selection.verties);s.context.commands.emit("moveLayer",0,t)}}}else if(s.context.selection.isMany){let e=Wn(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Wn(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},qE=Object.freeze(Object.defineProperty({__proto__:null,default:ZE},Symbol.toStringTag,{value:"Module"})),QE={command:"sort.right",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=Bn(t.verties)-Bn(s.context.selection.verties);s.context.commands.emit("moveLayer",r,0)}}else if(s.context.selection.isMany){let e=Bn(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Bn(t.verties);return{item:t,dist:[e-r,0,0]}}))}}},JE=Object.freeze(Object.defineProperty({__proto__:null,default:QE},Symbol.toStringTag,{value:"Module"})),eL={command:"sort.top",execute:function(s){if(s.context.selection.isOne){const e=s.context.selection.current;if(!e.parent.is("project")){const t=e.parent,r=Un(t.verties)-Un(s.context.selection.verties);s.context.commands.emit("moveLayer",0,r)}}else if(s.context.selection.isMany){let e=Un(s.context.selection.verties);s.context.commands.emit("moveLayerForItems",s.context.selection.map(t=>{let r=Un(t.verties);return{item:t,dist:[0,e-r,0,0]}}))}}},tL=Object.freeze(Object.defineProperty({__proto__:null,default:eL},Symbol.toStringTag,{value:"Module"})),rL={command:"switch.path",execute:async s=>{const e=s.context.selection.current;if(!!e&&(e.is("boolean-path")||e.isBooleanItem)){let t=e;e.isBooleanItem&&(t=e.parent),s.context.selection.select(t),s.context.commands.executeCommand("setAttribute","change boolean operation",s.context.selection.packByValue({booleanOperation:t["boolean-operation"],children:t.children.reverse()})),s.nextTick(()=>{s.context.commands.emit("recoverBooleanPath"),s.context.selection.select(e)})}}},iL=Object.freeze(Object.defineProperty({__proto__:null,default:rL},Symbol.toStringTag,{value:"Module"})),sL={command:"ungroup.item",execute:function(s){if(s.context.selection.length===0)return;const e=s.context.selection.current;if(e){let t=e,r=[...t.layers];r.reverse(),r.forEach(i=>{t.insertBefore(i)}),s.context.selection.select(...r),s.emit("refreshAll")}}},aL=Object.freeze(Object.defineProperty({__proto__:null,default:sL},Symbol.toStringTag,{value:"Module"})),nL={command:"updateClipPath",description:"update clip-path property ",execute:function(s,e){s.context.commands.executeCommand("setAttribute","change clip-path",s.context.selection.packByValue({clipPath:`path(${e.d})`}))}},oL=Object.freeze(Object.defineProperty({__proto__:null,default:nL},Symbol.toStringTag,{value:"Module"})),lL={command:"updateImage",execute:function(s,e,t,r){var i=new window.FileReader;i.onload=a=>{var n=a.target.result,o=window.URL.createObjectURL(e);s.context.commands.emit("addImageAssetItem",{id:dr(),type:e.type,name:e.name,original:n,local:o},t,r)},i.readAsDataURL(e)}},cL=Object.freeze(Object.defineProperty({__proto__:null,default:lL},Symbol.toStringTag,{value:"Module"})),hL={command:"updateImageAssetItem",execute:function(s,e,t){var r=new window.FileReader;r.onload=i=>{var a=i.target.result,n=window.URL.createObjectURL(e),o=s.context.selection.currentProject;if(o){const l=o.createImage({id:dr(),type:e.type,name:e.name,original:a,local:n});s.context.commands.emit("addImageAsset"),de(t)&&t(l.id)}},r.readAsDataURL(e)}},dL=Object.freeze(Object.defineProperty({__proto__:null,default:hL},Symbol.toStringTag,{value:"Module"}));const uL=1e3,Pa=new Map;class as{static has(e){return Pa.has(e)}static get(e){return Pa.get(e)}static set(e,t){Pa.size>uL&&Pa.clear(),Pa.set(e,t)}}const pL=/((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi;class st extends sr{getDefaultObject(){return{itemType:"transform",value:[]}}toCloneObject(){return b({},this.attrs("itemType","type","value"))}toString(){return`${this.json.type}(${this.json.value.join(", ")||""})`}static join(e){var t="perspective",r="matrix3d",i=e.filter(o=>o.type===t),a=e.filter(o=>o.type===r),n=e.filter(o=>o.type!==t&&o.type!==r);return[...i,...n,...a].map(o=>new st(o).toString()).join(" ")}hasNumberValue(){var e=this.json.type;return e.includes("matrix")||e.includes("scale")}static parse(e){return new st(e)}static remove(e,t=[]){return typeof t=="string"&&(t=[t]),st.filter(e,r=>t.includes(r.type)===!1)}static filter(e,t){return st.join(st.parseStyle(e,!1).filter(r=>t(r)))}static replace(e,t){var r=st.parseStyle(e,!1),i=r.find(a=>a.type===t.type);return i?i.value=t.value:r.push(t),st.join(r)}static replaceAll(e,t){for(var r=st.parseStyle(e,!1),i=st.parseStyle(t),a=0,n=i.length;ac.type===o.type);l?l.value=o.value:r.push(o)}return st.join(r)}static addTransform(e,t){for(var r=st.parseStyle(e,!1),i=st.parseStyle(t),a=0,n=i.length;ac.type===o.type);l?o.value.forEach((c,h)=>{l.value[h].value+=c.value}):r.push(o)}return st.join(r)}static get(e,t){var r=st.parseStyle(e,!0);if(typeof t=="function"?r=r.find(t):r=r.find(i=>i.type===t),r)return r.value}static createRotateKey(e,t,r){return`${e}:::${r}(${t})`}static rotate(e,t,r="rotate"){const i=st.createRotateKey(e,t,r);return as.has(i)||as.set(i,st.replace(e,{type:r,value:[t]})),as.get(i)}static rotateZ(e,t){return st.rotate(e,t,"rotateZ")}static rotateX(e,t){return st.rotate(e,t,"rotateX")}static rotateY(e,t){return st.rotate(e,t,"rotateY")}static parseStyle(e,t=!0){var r=[];if(!e)return r;if(t&&as.has(e))return as.get(e);var i=e.match(pL)||[];return i.forEach((a,n)=>{var[o,l]=a.split("(");l=l.split(")")[0];var c=l.split(",");l.includes("matrix")||l.includes("scale")?c=c.map(h=>p.number(h.trim())):c=c.map(h=>p.parse(h.trim())),r[n]=st.parse({type:o,value:c})}),t&&as.set(e,r),r}static createTransformMatrix(e,t,r){const i=Mt();for(let o=0,l=e.length;o1?c.value[1].toDeg().toRad():h;It(i,i,Oi(1,Math.tan(u.value),0,0,Math.tan(h.value),1,0,0,0,0,1,0,0,0,0,1));break;case"matrix":var n=c.value;n=[n[0].value,n[1].value,0,0,n[2].value,n[3].value,0,0,0,0,1,0,n[4].value,n[5].value,0,1],It(i,i,n);break;case"matrix3d":var n=c.value.map(d=>d.value);It(i,i,n);break;case"perspective":var n=c.value;vf(i,Math.PI*.5,t/r,1,n[0].value);break}}return i}static fromScale(e){if(e[0]===1&&e[1]===1)return"";const t=[];return e[0]!=1&&t.push(`scaleX(${e[0]})`),e[1]!=1&&t.push(`scaleY(${e[1]})`),e[2]!=1&&t.push(`scaleZ(${e[2]})`),t.join(" ")}}var gL={command:"updatePathItem",description:"Update path string for selected svg path item",execute:function(s,e){const t=s.context.selection.current;if(t)if(e.box==="box"){const r=t.invertPath(e.d);s.context.commands.executeCommand("setAttribute","change local path",s.context.selection.packByValue({d:r.d}))}else{const r=new Y(e.d);r.transformMat4(e.matrix.absoluteMatrixInverse);let i=r.getBBox();const a=Ht(i[1],i[0]),n=Ht(i[3],i[0]);let o=oe(mt(i[0][0],i[0][1],a,n),e.matrix.absoluteMatrix),l=oe(o,Wi(ht([],o[4]),st.createTransformMatrix(st.parseStyle(e.matrix.transform),a,n),ht([],qt([],o[4]))));const c=er(ht([],l[0]),t.getLocalTransformMatrix(a,n)),h=Hi([],er(e.matrix.parentMatrixInverse,c,Ot([],t.getLocalTransformMatrix(a,n))));s.context.commands.executeCommand("setAttribute","change path",s.context.selection.packByValue({d:r.translate(-i[0][0],-i[0][1]).d,x:h[0],y:h[1],width:a,height:n}))}}},fL=Object.freeze(Object.defineProperty({__proto__:null,default:gL},Symbol.toStringTag,{value:"Module"})),mL={command:"updateResource",execute:function(s,e){e.forEach(t=>{switch(t.type){case"image/svg+xml":case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":s.context.commands.emit("updateImage",t);break;case"text/plain":case"text/html":s.context.commands.emit("addText",{content:t.data});break;case"text/uri-list":s.context.commands.emit("updateUriList",t);break}})}},vL=Object.freeze(Object.defineProperty({__proto__:null,default:mL},Symbol.toStringTag,{value:"Module"})),yL={command:"updateUriList",execute:function(s,e){var t=e.data;if(t.indexOf("data:")>-1){var r=Oo.parse(t,!0);switch(r.mimeType){case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":s.context.commands.emit("addImageAssetItem",{id:dr(),type:r.mimeType,name:"",original:t,local:r.local});break}}else{var i=e.data.split(".").pop(),a=e.data.split("/").pop();switch(i){case"png":case"jpg":case"gif":case"svg":s.context.commands.emit("addImageAssetItem",{id:dr(),type:"image/"+i,name:a,original:e.data,local:e.data});break}}}},bL=Object.freeze(Object.defineProperty({__proto__:null,default:yL},Symbol.toStringTag,{value:"Module"})),xL={command:"updateVideo",execute:function(s,e,t,r=void 0){var i=new window.FileReader;i.onload=a=>{var n=a.target.result,o=window.URL.createObjectURL(e);s.context.commands.emit("addVideoAssetItem",{id:dr(),type:e.type,name:e.name,original:n,local:o},t,r)},i.readAsDataURL(e)}},$L=Object.freeze(Object.defineProperty({__proto__:null,default:xL},Symbol.toStringTag,{value:"Module"})),_L={command:"updateVideoAssetItem",execute:function(s,e,t){var r=new window.FileReader;r.onload=i=>{var a=i.target.result,n=window.URL.createObjectURL(e),o=s.context.selection.currentProject;o&&(o.createVideo({id:dr(),type:e.type,name:e.name,original:a,local:n}),s.emit("addVideoAsset"),de(t)&&t(n))},r.readAsDataURL(e)}},SL=Object.freeze(Object.defineProperty({__proto__:null,default:_L},Symbol.toStringTag,{value:"Module"})),PL={command:"update",description:"Update the model",execute:function(s,e=null,t={},r={origin:"*"}){const i=s.get(e);i&&i.reset(t,r)&&s.context.commands.emit("refreshElement",i)}},wL=Object.freeze(Object.defineProperty({__proto__:null,default:PL},Symbol.toStringTag,{value:"Module"}));const CL={"./command_list/_currentProject.js":N3,"./command_list/_doForceRefreshSelection.js":G3,"./command_list/addArtBoard.js":U3,"./command_list/addBackgroundColor.js":X3,"./command_list/addBackgroundImageAsset.js":K3,"./command_list/addBackgroundImageGradient.js":q3,"./command_list/addBackgroundImagePattern.js":c4,"./command_list/addCustomComponent.js":d4,"./command_list/addImage.js":p4,"./command_list/addImageAssetItem.js":f4,"./command_list/addLayer.js":v4,"./command_list/addLayerView.js":b4,"./command_list/addProject.js":$4,"./command_list/addSVGFilterAssetItem.js":S4,"./command_list/addText.js":w4,"./command_list/addTimelineCurrentProperty.js":k4,"./command_list/addTimelineItem.js":M4,"./command_list/addTimelineKeyframe.js":E4,"./command_list/addTimelineProperty.js":V4,"./command_list/addVideo.js":j4,"./command_list/addVideoAssetItem.js":A4,"./command_list/clipboard.copy.js":F4,"./command_list/clipboard.paste.js":N4,"./command_list/convert.flatten.path.js":H4,"./command_list/convert.no.transform.path.js":W4,"./command_list/convert.normalize.path.js":Y4,"./command_list/convert.path.operation.js":Z4,"./command_list/convert.polygonal.path.js":Q4,"./command_list/convert.simplify.path.js":eM,"./command_list/convert.smooth.path.js":rM,"./command_list/convert.stroke.to.path.js":sM,"./command_list/convertPasteText.js":nM,"./command_list/convertPath.js":lM,"./command_list/copy.path.js":hM,"./command_list/copyLayer.js":uM,"./command_list/copyTimelineProperty.js":gM,"./command_list/deleteTimelineKeyframe.js":mM,"./command_list/doubleclick.item.js":yM,"./command_list/downloadJSON.js":xM,"./command_list/downloadPNG.js":_M,"./command_list/downloadSVG.js":PM,"./command_list/drop.asset.js":CM,"./command_list/dropImageUrl.js":TM,"./command_list/editor.config.body.event.js":IM,"./command_list/fileDropItems.js":LM,"./command_list/firstTimelineItem.js":jM,"./command_list/group.item.js":zM,"./command_list/history.addLayer.js":DM,"./command_list/history.bring.forward.js":BM,"./command_list/history.bring.front.js":GM,"./command_list/history.clipboard.paste.js":UM,"./command_list/history.copyLayer.js":XM,"./command_list/history.group.item.js":KM,"./command_list/history.moveLayer.js":qM,"./command_list/history.moveLayerToTarget.js":JM,"./command_list/history.refreshSelection.js":tI,"./command_list/history.refreshSelectionProject.js":iI,"./command_list/history.removeLayer.js":aI,"./command_list/history.removeProject.js":oI,"./command_list/history.send.back.js":cI,"./command_list/history.send.backward.js":dI,"./command_list/history.setAttribute.js":pI,"./command_list/item.move.depth.down.js":fI,"./command_list/item.move.depth.first.js":vI,"./command_list/item.move.depth.last.js":bI,"./command_list/item.move.depth.up.js":$I,"./command_list/keymap.keydown.js":SI,"./command_list/lastTimelineItem.js":wI,"./command_list/load.json.js":kI,"./command_list/moveLayer.js":MI,"./command_list/moveLayerForItems.js":EI,"./command_list/moveSelectionToCenter.js":VI,"./command_list/newComponent.js":jI,"./command_list/nextTimelineItem.js":zI,"./command_list/open.editor.js":DI,"./command_list/pauseTimelineItem.js":BI,"./command_list/playTimelineItem.js":GI,"./command_list/prevTimelineItem.js":UI,"./command_list/recoverBooleanPath.js":XI,"./command_list/refreshArtboard.js":KI,"./command_list/refreshElement.js":qI,"./command_list/refreshHistory.js":JI,"./command_list/refreshSelectedOffset.js":tE,"./command_list/removeAnimationItem.js":iE,"./command_list/removeLayer.js":aE,"./command_list/removeTimeline.js":oE,"./command_list/removeTimelineProperty.js":cE,"./command_list/resizeArtBoard.js":dE,"./command_list/rotateLayer.js":pE,"./command_list/same.height.js":fE,"./command_list/same.width.js":vE,"./command_list/saveJSON.js":bE,"./command_list/savePNG.js":$E,"./command_list/segment.delete.js":SE,"./command_list/segment.move.down.js":wE,"./command_list/segment.move.left.js":kE,"./command_list/segment.move.right.js":ME,"./command_list/segment.move.up.js":EE,"./command_list/select.all.js":VE,"./command_list/select.none.js":jE,"./command_list/selectTimelineItem.js":zE,"./command_list/setAttribute.js":DE,"./command_list/setTimelineOffset.js":BE,"./command_list/showExportView.js":GE,"./command_list/sort.bottom.js":UE,"./command_list/sort.center.js":XE,"./command_list/sort.left.js":KE,"./command_list/sort.middle.js":qE,"./command_list/sort.right.js":JE,"./command_list/sort.top.js":tL,"./command_list/switch.path.js":iL,"./command_list/ungroup.item.js":aL,"./command_list/updateClipPath.js":oL,"./command_list/updateImage.js":cL,"./command_list/updateImageAssetItem.js":dL,"./command_list/updatePathItem.js":fL,"./command_list/updateResource.js":vL,"./command_list/updateUriList.js":bL,"./command_list/updateVideo.js":$L,"./command_list/updateVideoAssetItem.js":SL,"./command_list/model/update.js":wL},hp={};Object.entries(CL).forEach(([s,e])=>{s=s.replace("./command_list/","").replace(".js",""),hp[s]=e.default});function kL(s){s.loadCommands(hp)}var TL={key:"area.width",defaultValue:100,title:"Area Width to find layers fastly",description:"Set area width/height",type:"number"},ML=Object.freeze(Object.defineProperty({__proto__:null,default:TL},Symbol.toStringTag,{value:"Module"})),IL={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},EL=Object.freeze(Object.defineProperty({__proto__:null,default:IL},Symbol.toStringTag,{value:"Module"})),LL={key:"editing.css.itemType",defaultValue:"rect",title:"set item type for editing css",description:"set item type for editing css",type:"string"},VL=Object.freeze(Object.defineProperty({__proto__:null,default:LL},Symbol.toStringTag,{value:"Module"})),OL={key:"editing.draw.itemType",defaultValue:"path",title:"set item type for editing draw",description:"set item type for editing draw",type:"string"},jL=Object.freeze(Object.defineProperty({__proto__:null,default:OL},Symbol.toStringTag,{value:"Module"})),RL={key:"editing.mode.itemType",defaultValue:"select",title:"set item type for editing mode",description:"set item type for editing mode",type:"string"},zL=Object.freeze(Object.defineProperty({__proto__:null,default:RL},Symbol.toStringTag,{value:"Module"})),AL={key:"editing.mode",defaultValue:_t.SELECT,title:"set editing mode for Editor",description:"set editing mode (select, append, draw, path)",type:"string"},DL=Object.freeze(Object.defineProperty({__proto__:null,default:AL},Symbol.toStringTag,{value:"Module"})),FL={key:"editing.svg.itemType",defaultValue:"svg-rect",title:"set item type for editing svg",description:"set item type for editing svg",type:"string"},BL=Object.freeze(Object.defineProperty({__proto__:null,default:FL},Symbol.toStringTag,{value:"Module"})),NL={key:"editor.design.mode",defaultValue:"design",title:"Editor Design Mode ",description:"Set editor's design mode",options:["design","item"],type:"select"},GL=Object.freeze(Object.defineProperty({__proto__:null,default:NL},Symbol.toStringTag,{value:"Module"})),HL={key:"editor.layout.mode",defaultValue:"all",title:"Editor Layout Mode ",description:"Set editor's layout mode",type:"string"},UL=Object.freeze(Object.defineProperty({__proto__:null,default:HL},Symbol.toStringTag,{value:"Module"})),WL={key:"fixed.angle",defaultValue:15,title:"fixed angle count",description:"Set fixed angle",type:"number"},XL=Object.freeze(Object.defineProperty({__proto__:null,default:WL},Symbol.toStringTag,{value:"Module"})),YL={key:"fixed.gradient.angle",defaultValue:1,title:"fixed gradient angle count",description:"Set fixed gradient angle",type:"number"},KL=Object.freeze(Object.defineProperty({__proto__:null,default:YL},Symbol.toStringTag,{value:"Module"})),ZL={key:"history.delay.ms",defaultValue:500,title:"history delay milliseconds",description:"Set history delay time",type:"number"},qL=Object.freeze(Object.defineProperty({__proto__:null,default:ZL},Symbol.toStringTag,{value:"Module"})),QL={key:"horizontal.line",defaultValue:[],title:"horizontal guide line for snap ",description:"horizontal guide line for snap",type:"array"},JL=Object.freeze(Object.defineProperty({__proto__:null,default:QL},Symbol.toStringTag,{value:"Module"})),eV={key:"horizontal.line.selected.index",defaultValue:-1,title:"selected horizontal guide line index",description:"selected horizontal guide line index",type:"number"},tV=Object.freeze(Object.defineProperty({__proto__:null,default:eV},Symbol.toStringTag,{value:"Module"})),rV={key:"set.drag.path.area",defaultValue:!1,title:"Drag path area",description:"Drag path area",type:"boolean",storage:"none"},iV=Object.freeze(Object.defineProperty({__proto__:null,default:rV},Symbol.toStringTag,{value:"Module"})),sV={key:"set.move.control.point",defaultValue:!1,title:"Moving Control Point",description:"Moving Control Point",type:"boolean",storage:"none"},aV=Object.freeze(Object.defineProperty({__proto__:null,default:sV},Symbol.toStringTag,{value:"Module"})),nV={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},oV=Object.freeze(Object.defineProperty({__proto__:null,default:nV},Symbol.toStringTag,{value:"Module"})),lV={key:"show.outline",defaultValue:!1,title:"Show outline",description:"Set outline visibility to on",type:"boolean"},cV=Object.freeze(Object.defineProperty({__proto__:null,default:lV},Symbol.toStringTag,{value:"Module"})),hV={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},dV=Object.freeze(Object.defineProperty({__proto__:null,default:hV},Symbol.toStringTag,{value:"Module"})),uV={key:"show.ruler",defaultValue:!0,title:"Show ruler",description:"Set ruler visibility to on",type:"boolean"},pV=Object.freeze(Object.defineProperty({__proto__:null,default:uV},Symbol.toStringTag,{value:"Module"})),gV={key:"snap.distance",defaultValue:3,title:"Snap distance between objects",description:"Set snap distance",type:"number"},fV=Object.freeze(Object.defineProperty({__proto__:null,default:gV},Symbol.toStringTag,{value:"Module"})),mV={key:"snap.grid",defaultValue:50,title:"Snap grid size between objects",description:"Set snap grid size",type:"number"},vV=Object.freeze(Object.defineProperty({__proto__:null,default:mV},Symbol.toStringTag,{value:"Module"})),yV={key:"vertical.line",defaultValue:[],title:"vertical guide line for snap ",description:"vertical guide line for snap",type:"array"},bV=Object.freeze(Object.defineProperty({__proto__:null,default:yV},Symbol.toStringTag,{value:"Module"})),xV={key:"vertical.line.selected.index",defaultValue:-1,title:"selected vertical guide line index",description:"selected vertical guide line index",type:"number"},$V=Object.freeze(Object.defineProperty({__proto__:null,default:xV},Symbol.toStringTag,{value:"Module"}));const _V={"./config_list/area.width.js":ML,"./config_list/debug.mode.js":EL,"./config_list/editing.css.itemType.js":VL,"./config_list/editing.draw.itemType.js":jL,"./config_list/editing.mode.itemType.js":zL,"./config_list/editing.mode.js":DL,"./config_list/editing.svg.itemType.js":BL,"./config_list/editor.design.mode.js":GL,"./config_list/editor.layout.mode.js":UL,"./config_list/fixed.angle.js":XL,"./config_list/fixed.gradient.angle.js":KL,"./config_list/history.delay.ms.js":qL,"./config_list/horizontal.line.js":JL,"./config_list/horizontal.line.selected.index.js":tV,"./config_list/set.drag.path.area.js":iV,"./config_list/set.move.control.point.js":aV,"./config_list/show.left.panel.js":oV,"./config_list/show.outline.js":cV,"./config_list/show.right.panel.js":dV,"./config_list/show.ruler.js":pV,"./config_list/snap.distance.js":fV,"./config_list/snap.grid.js":vV,"./config_list/vertical.line.js":bV,"./config_list/vertical.line.selected.index.js":$V};var SV=Object.values(_V).map(s=>s.default);function PV(s){SV.forEach(e=>{s.registerConfig(e)})}class Ao extends sr{static parse(e){return new Ao(e)}getDefaultObject(e){return super.getDefaultObject(b({itemType:"selector",selector:"",properties:[]},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("selector","properties"))}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";"}return e.value.toString()+" !important;"}toPropertyString(){return this.json.properties.map(e=>{if(this.isMultiStyle(e.key))return this.getMultiStyleString(e);var t=e.value.toString();if(t){var r=e.key;return r==="x"?r="left":r==="y"&&(r="top"),`${r}: ${t} !important;`}else return""}).join(` +`)}toCSSText(e=""){return`${e}${this.json.selector} { + ${this.toPropertyString()} +}`}toCSS(){return{}}toString(e=""){return this.toCSSText(e)}}var wV={startCache(s){s.addCache("cachedSize",{width:s.width,height:s.height}),s.addCache("cachedLayerMatrix",s.layers.map(e=>{e.startToCacheChildren();const{x:t,y:r,width:i,height:a}=e.attrs("x","y","width","height");return{id:e.id,matrix:{x:t,y:r,width:i,height:a},constraints:{horizontal:e[Zr.HORIZONTAL],vertical:e[Zr.VERTICAL]}}}))},recover(s){const e={width:s.width,height:s.height},t=e.width,r=e.height,i=s.getCache("cachedSize"),a=i.width,n=i.height,o=t/a,l=r/n;s.getCache("cachedLayerMatrix").forEach(({id:h,matrix:u,constraints:d})=>{const v=s.find(h),{x:g,y,width:S,height:_}=u,L=g,I=a-g-S,T=y,V=n-y-_,F={};switch(d.horizontal){case Me.MIN:F.x=L;break;case Me.MAX:F.x=t-I-S;break;case Me.STRETCH:F.x=L,F.width=t-L-I;break;case Me.SCALE:F.x=L*o,F.width=S*o;break;case Me.CENTER:const H=S/2,W=(g+H)/a;F.x=W*t-H;break}switch(d.vertical){case Me.MIN:F.y=T;break;case Me.MAX:F.y=r-V-_;break;case Me.STRETCH:F.y=T,F.height=r-T-V;break;case Me.SCALE:F.y=T*l,F.height=_*l;break;case Me.CENTER:const H=_/2,W=(y+H)/n;F.y=W*r-H;break}v.reset(F),v.recoverChildren()})}},dp={startCache(){},recover(){},updateGridArea(s,e,t=1){if(s.isInGrid()===!1)return;const r=s.originVerties,i=Et(r),{items:a}=e,n=au.RECT/t,o=a.filter(y=>fc(r,y.originVerties)).filter(y=>{const S=gc(y.originRect,i);return Math.floor(S.width)>n&&Math.floor(S.height)>n});if(o.length===0)return;const l=o.map(y=>y.row);l.sort((y,S)=>y-S);const c=o.map(y=>y.column);c.sort((y,S)=>y-S);const h=c[0],u=c[c.length-1],d=l[0],v=l[l.length-1],g={"grid-column-start":h,"grid-column-end":u+1,"grid-row-start":d,"grid-row-end":v+1};return s.reset(g),g}};class Na extends sr{static parse(e){return new Na(e)}getDefaultObject(){return super.getDefaultObject({itemType:"offset",offset:p.percent(0),color:"rgba(255, 255, 255, 1)",properties:[]})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("offset","color","properties"))}convert(e){return e=super.convert(e),e.offset=p.parse(e.offset),e}toCSSText(){return`${this.json.offset} ${Ze(this.toCSS())}`}createProperty(e={}){return this.addProperty(b({checked:!0,value:0},e))}addProperty(e){this.json.properties.push(e)}removeProperty(e){this.json.properties.splice(e,1)}sortItem(e,t,r){e.splice(r+(t{e=b(b({},e),t.toCSS())}),e}toString(){return this.toCSSText()}}class Ga extends sr{static parse(e){return new Ga(e)}static parseStyle(e){var t=[],r={};if(e.keyframe){var i=nn(e.keyframe);i.str.split("|").map(a=>a.trim()).forEach((a,n)=>{var[o,l,c,...h]=a.split(" "),u=h.join(" ");r[o]||(r[o]=new Ga({name:o}),t[n]=o);var d=r[o].offsets.filter(g=>g.offset.equals(p.parse(l))),v=null;d.length?v=d[0]:(v=new Na({offset:p.parse(l)}),r[o].offsets.push(v)),v.addProperty({key:c,value:Eo(u,i.matches)})})}return t.map(a=>(r[a].offsets.forEach(n=>{var o=[],l=[];n.properties.forEach(h=>{h.key.includes("--")?o.push(h):l.push(h)});let c=o.map(h=>`${h.key}:${h.value}`).join(";");o.length&&l.push({key:"var",value:c}),n.properties=l}),r[a]))}getDefaultObject(){return super.getDefaultObject({itemType:"keyframe",name:"sample",selectedType:"list",offsets:[]})}toCloneObject(){var{offsets:e}=this.json;return ie(b(b({},super.toCloneObject()),this.attrs("name","selectedType")),{offsets:e.map(t=>t.clone())})}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";";case"var":var t=(e.value+"").split(";").map(r=>"--"+r).join(";");return t+";"}return e.value.toString()+";"}toOffsetString(e){var t=" ";return`${e.offset.toString()} { +${t}${e.properties.map(r=>{if(this.isMultiStyle(r.key))return this.getMultiStyleString(r);var i=(r.value||"").toString();if(i){var a=r.key;return a==="x"?a="left":a==="y"&&(a="top"),`${a}: ${i};`}else return""}).join("").replace(/;/g,`; +`+t).trim()} + }`}toOffsetText(){var e=this.json.offsets.map(t=>t);return e.sort((t,r)=>t.offset.value>r.offset.value?1:-1),e.map(t=>t.properties.length===0?"":this.toOffsetString(t)).join(` +`)}toCSSText(){var e=this.json.offsets.map(t=>t);return e.sort((t,r)=>t.offset.value>r.offset.value?1:-1),` +@keyframes ${this.json.name} { + + ${this.toOffsetText()} + +} +`}createOffset(e={}){return this.addOffset(new Na(b({checked:!0},e)))}addOffset(e){this.json.offsets.push(e)}removeOffset(e){this.json.offsets.splice(e,1)}sortItem(e,t,r){e.splice(r+(te.isNot("project")).shift()}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){const e=[this];let t;for(;t=e[0].parent;)e.unshift(t);return e}get pathIds(){return this.path.map(e=>e.id)}setParentId(e){this.reset({parentId:e}),this.manager.setChanged("setParentId",this.id,{parentId:e})}get childrenLength(){return we(this,Yt).children.length}get index(){var e;return(e=this.parent)==null?void 0:e.findIndex(this)}get isFirst(){return this.index===0}get isLast(){return this.index===this.parent.childrenLength-1}get first(){return this.parent.layers[0]}get last(){const e=this.parent;return e.layers[e.childrenLength-1]}get prev(){var t;const e=this.index;return this.isFirst?this:(t=this.parent)==null?void 0:t.layers[e-1]}get next(){var t;const e=this.index;return this.isLast?this:(t=this.parent)==null?void 0:t.layers[e+1]}get hierarchy(){return this.getInformationForHierarchy("x","y","angle")}getInformationForHierarchy(...e){const t=this.parent,r=this.index;return{id:this.id,index:r,parentId:this.parentId,prev:r===0?void 0:t.children[r-1],next:r===t.childrenLength-1?void 0:t.children[r+1],attrs:this.attrs(...e)}}getInnerId(e=""){return we(this,Yt).id+e}is(e){return we(this,Yt).itemType===e}isNot(e){return this.is(e)===!1}get(e){return we(this,Yt)[e]}removeField(e){delete we(this,Yt)[e]}set(e,t){this.reset({[e]:t})}isSVG(){return!1}addCache(e,t){we(this,ra)[e]=t}getCache(e){return we(this,ra)[e]}hasCache(e){return Boolean(we(this,ra)[e])}computed(e,t,r=!1){const i=`__cachedKey_${e}`,a=`${i}__parseValue`,n=we(this,Yt)[e];if(!r){if(this.getCache(i)===n&&this.getCache(a))return this.getCache(a)}return this.addCache(i,n),this.addCache(a,t(n,this)),this.getCache(a)}computedValue(e){const r=`${`__cachedKey_${e}`}__parseValue`;return this.getCache(r)}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e={}){return e}setCache(){}toCloneObject(e=!0){const t={};return Object.keys(we(this,Yt)).forEach(r=>{ke(this.get(r))&&(t[r]=ye(this.get(r)))}),e&&(t.layers=this.layers.map(r=>r.clone(e))),t}clone(e=!0){return we(this,Rr).clone(this.id,e)}reset(e,t={origin:"*"}){var r;return bt(this,Yt,this.convert(Object.assign(we(this,Yt),e))),bt(this,Qa,e),t.origin==="*"&&((r=we(this,Rr))==null||r.setChanged("reset",this.id,e)),this.changed(),!0}hasChangedField(...e){return e.some(t=>we(this,Qa)[t]!==void 0)}get hasChangedHirachy(){return this.hasChangedField("children","parentId")}getDefaultObject(e={}){var t=e.id||Ls();return b({id:t,name:"",itemType:"base",children:[],parentId:"",visibility:"visible"},e)}attrs(...e){const t={};return e.forEach(r=>{ke(this.get(r))&&(t[r]=ye(this.get(r)))}),t}attrsWithId(...e){return{[this.id]:this.attrs(...e)}}hasChildren(){return this.children.length>0}appendChild(e){if(e.parentId===this.id){const t=this.children.find(r=>r===e.id);return Boolean(t)===!1&&(this.children.push(e.id),we(this,Rr).setChanged("appendChild",this.id,{child:e.id,oldParentId:e.parentId})),e}return this.resetMatrix(e),e.parent&&e.remove(),e.setParentId(this.id),this.children.push(e.id),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){var n;this.resetMatrix(e),e.parent&&((n=e.parent)==null?void 0:n.id)!==this.id&&e.remove(),e.setParentId(this.id);let r=this.children.map((o,l)=>({id:o,index:l}));const i=r.find(o=>o.id===e.id),a=t-.5;return i?i.index=a:r.push({id:e.id,index:a}),r.sort((o,l)=>o.index-l.index),this.reset({children:r.map(o=>o.id)}),we(this,Rr).setChanged("insertChild",this.id,{childId:e.id,index:0}),e}insertAfter(e){return this.parent.insertChild(e,this.index+1),e}insertBefore(e){return this.parent.insertChild(e,this.index),e}toggle(e,t){wt(t)?this.reset({[e]:!this.get(e)}):this.reset({[e]:!!t})}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!wt(this.get(e))}toJSON(){const e=we(this,Yt);let t={};return Object.keys(e).filter(r=>this.expectJSON(r)).forEach(r=>{t[r]=e[r]}),this.hasChildren()&&(t.layers=this.layers.map(r=>r.toJSON())),t}resize(){}copy(e=0){return this.parent.copyItem(this.id,e)}findIndex(e){return this.children.indexOf(e.id)}find(e){return we(this,Rr).get(e)}copyItem(e,t=10){const r=this.find(e);var i=r.clone();i.renameWithCount(),i.absoluteMove([t,t,0]);var a=this.findIndex(r);return a>-1&&this.children.push(i.id),i}remove(){this.parent.removeChild(this.id)}removeChild(e){return we(this,Rr).removeChild(this.id,e)}hasParent(e){return this.parentId===e}hasPathOf(e=[]){const t=this.path;return e.filter(r=>r.id!==this.id).some(r=>t.find(i=>i.id===r.id))}hasChild(e){return this.children.includes(e)}to(){}sendBackward(e){const t=this.children,r={};let i=-1;t.forEach((n,o)=>{r[n]={id:n,index:o},n===e&&(i=o)}),r[e].index=i-1.5;const a=Object.values(r).sort((n,o)=>n.index-o.index).map(n=>n.id);this.reset({children:a})}sendBack(e){const t=this.children,r={};t.forEach((a,n)=>{r[a]={id:a,index:n}}),r[e].index=-1;const i=Object.values(r).sort((a,n)=>a.index-n.index).map(a=>a.id);this.reset({children:i})}bringForward(e){const t=this.children,r={};let i=-1;t.forEach((n,o)=>{r[n]={id:n,index:o},n===e&&(i=o)}),r[e].index=i+1.5;const a=Object.values(r).sort((n,o)=>n.index-o.index).map(n=>n.id);this.reset({children:a})}bringFront(e){const t=this.children,r={};t.forEach((a,n)=>{r[a]={id:a,index:n}}),r[e].index=Number.MAX_SAFE_INTEGER;const i=Object.values(r).sort((a,n)=>a.index-n.index).map(a=>a.id);this.reset({children:i})}}Rr=new WeakMap,Yt=new WeakMap,ra=new WeakMap,qa=new WeakMap,Qa=new WeakMap,Ja=new WeakMap;class CV extends up{getDefaultObject(e={}){return super.getDefaultObject(b({svgfilters:[],keyframes:[]},e))}get keyframes(){return this.get("keyframes")}get svgfilters(){return this.get("svgfilters")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new Ga(b({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,r){e.splice(r+(tt.toString(e)).join(` + +`)}copyPropertyList(e,t){var r=b({},e[t]);e.splice(t,0,r)}removePropertyList(e,t){e.splice(t,1)}getSVGFilterIndex(e){var r;var t=this.svgfilters.map((i,a)=>({id:i.id,index:a})).filter(i=>i.id===e);return t.length?(r=t==null?void 0:t[0])==null?void 0:r.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=b(b({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(b({id:dr()},e))}}class kV extends CV{getDefaultObject(e={}){return super.getDefaultObject(b({angle:0,x:0,y:0,width:300,height:300,position:"absolute",perspective:"",perspectiveOrigin:"",transformOrigin:"50% 50% 0px"},e))}get isAbsolute(){return this.position==="absolute"}get isDragSelectable(){return!0}get isBooleanItem(){}get resizableWitChildren(){return!1}get perspective(){return this.get("perspective")}get perspectiveOrigin(){return this.get("perspectiveOrigin")}get transform(){return`rotateZ(${p.deg(this.angle)})`}get localMatrix(){return this.hasCache("localTransform")||this.addCache("localTransform",this.getLocalTransformMatrix()),this.getCache("localTransform")||this.getLocalTransformMatrix()}get localMatrixInverse(){return this.hasCache("localTransformInverse")||this.addCache("localTransformInverse",this.getLocalTransformMatrixInverse()),this.getCache("localTransformInverse")||this.getLocalTransformMatrixInverse()}get transformWithTranslate(){return this.hasCache("transformWithTranslate")||this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslate")||this.getTransformWithTranslate(this)}get transformWithTranslateToTranspose(){return this.hasCache("transformWithTranslateTranspose")||this.addCache("transformWithTranslateTranspose",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateTranspose")||Sh([],this.getTransformWithTranslate(this))}get transformWithTranslateInverse(){return this.hasCache("transformWithTranslateInverse")||this.addCache("transformWithTranslateInverse",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateInverse")||Ot([],this.getTransformWithTranslate(this))}get itemMatrix(){return this.hasCache("itemTransform")||this.addCache("itemTransform",this.getItemTransformMatrix()),this.getCache("itemTransform")||this.getItemTransformMatrix()}get itemMatrixInverse(){return this.hasCache("itemTransformInverse")||this.addCache("itemTransformInverse",this.getItemTransformMatrixInverse()),this.getCache("itemTransformInverse")||this.getItemTransformMatrixInverse()}get absoluteMatrix(){return this.hasCache("absoluteMatrix")||this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.getCache("absoluteMatrix")||this.getAbsoluteMatrix()}get absoluteMatrixInverse(){return this.hasCache("absoluteMatrixInverse")||this.addCache("absoluteMatrixInverse",this.getAbsoluteMatrixInverse()),this.getCache("absoluteMatrixInverse")||this.getAbsoluteMatrixInverse()}get relativeMatrix(){return this.hasCache("relativeMatrix")||this.addCache("relativeMatrix",this.getRelativeMatrix()),this.getCache("relativeMatrix")||this.getRelativeMatrix()}get relativeMatrixInverse(){return this.hasCache("relativeMatrixInverse")||this.addCache("relativeMatrixInverse",this.getRelativeMatrixInverse()),this.getCache("relativeMatrixInverse")||this.getRelativeMatrixInverse()}get verties(){return this.hasCache("verties")||this.addCache("verties",this.getVerties()),this.getCache("verties")||this.getVerties()}get contentVerties(){return this.hasCache("contentVerties")||this.addCache("contentVerties",this.getContentVerties()),this.getCache("contentVerties")||this.getContentVerties()}get originVerties(){return this.hasCache("vertiesWithoutTransformOrigin")||this.addCache("vertiesWithoutTransformOrigin",this.rectVerties()),this.getCache("vertiesWithoutTransformOrigin")||this.rectVerties()}get localVerties(){return this.hasCache("localVerties")||this.addCache("localVerties",this.getLocalVerties()),this.getCache("localVerties")||this.getLocalVerties()}get guideVerties(){return this.hasCache("guideVerties")||this.addCache("guideVerties",this.getGuideVerties()),this.getCache("guideVerties")||this.getGuideVerties()}get xList(){return this.hasCache("xList")||this.addCache("xList",this.getXList()),this.getCache("xList")||this.getXList()}get yList(){return this.hasCache("yList")||this.addCache("yList",this.getYList()),this.getCache("yList")||this.getYList()}get areaPosition(){return this.hasCache("areaPosition")||this.addCache("areaPosition",this.getAreaPosition(100)),this.getCache("areaPosition")||this.getAreaPosition(100)}get offsetX(){return this.x}get offsetY(){return this.y}get screenWidth(){return this.width}get screenHeight(){return this.height}get y(){return this.get("y")}set y(e){this.set("y",e)}get x(){return this.get("x")}set x(e){this.set("x",e)}get width(){return this.get("width")}set width(e){this.set("width",e)}get height(){return this.get("height")}set height(e){this.set("height",e)}get angle(){return this.get("angle")}set angle(e){this.set("angle",e)}get position(){return this.get("position")}set position(e){this.set("position",e)}get transformOrigin(){return this.get("transformOrigin")}set transformOrigin(e){this.reset({transformOrigin:e})}get translate(){return[0,0,0]}get scale(){return[1,1,1]}get rotate(){return[0,0,Dt(this.angle)]}get origin(){return Sr.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight)}get absoluteOrigin(){return oe([this.origin],this.absoluteMatrix)[0]}get quat(){return kf(Gl(),0,0,this.angle)}getAreaPosition(e=100){const t=this.getVerties(),r=kr(t),[i,a]=Ul(r[0][0],r[0][1],e),[n,o]=Ul(r[2][0],r[2][1],e);return{column:[a,o],row:[i,n]}}reset(e,t={origin:"*"}){const r=super.reset(e,t);return(this.hasChangedField("children","x","y","width","height","boxModel","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshMatrixCache(),r}changed(){super.changed(),this.changedRect=this.hasChangedField("children","x","y","width","height","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")}setParentId(e){super.setParentId(e),this.refreshMatrixCache()}refreshMatrixCache(){this.setCacheItemTransformMatrix(),this.setCacheLocalTransformMatrix(),this.setCacheAbsoluteMatrix(),this.setCacheLocalVerties(),this.setCacheVerties(),this.setCacheGuideVerties(),this.setCacheAreaPosition(),this.layers.forEach(e=>{e.refreshMatrixCache()})}setCacheItemTransformMatrix(){this.addCache("itemTransform",this.getItemTransformMatrix()),this.addCache("itemTransformInverse",Ot([],this.getCache("itemTransform")))}setCacheLocalTransformMatrix(){this.addCache("localTransform",this.getLocalTransformMatrix()),this.addCache("localTransformInverse",Ot([],this.getCache("localTransform"))),this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.addCache("transformWithTranslateInverse",Ot([],this.getCache("transformWithTranslate"))),this.addCache("transformWithTranslateTranspose",Sh([],this.getCache("transformWithTranslate")))}setCacheAbsoluteMatrix(){this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.addCache("absoluteMatrixInverse",Ot([],this.getCache("absoluteMatrix"))),this.addCache("relativeMatrix",this.getRelativeMatrix()),this.addCache("relativeMatrixInverse",Ot([],this.getCache("relativeMatrix")))}setCacheVerties(){this.addCache("verties",this.getVerties()),this.addCache("contentVerties",this.getContentVerties()),this.addCache("vertiesWithoutTransformOrigin",this.rectVerties())}setCacheLocalVerties(){this.addCache("localVerties",this.getLocalVerties())}setCacheGuideVerties(){this.addCache("guideVerties",this.getGuideVerties()),this.addCache("xList",this.getXList()),this.addCache("yList",this.getYList())}setCacheAreaPosition(){this.addCache("areaPosition",this.getAreaPosition(100))}move(e=[0,0,0]){this.reset({x:Ye(this.offsetX+e[0]),y:Ye(this.offsetY+e[1])})}moveByCenter(e=[0,0,0]){this.reset({x:e[0]-this.screenWidth/2,y:e[1]-this.screenHeight/2})}absoluteMove(e=[0,0,0]){var o;const t=this.verties[4],r=Pe([],t,e),i=oe([t,r],((o=this.parent)==null?void 0:o.absoluteMatrixInverse)||df([])),a=$e([],i[1],i[0]),n=this.attrs("x","y");return this.move(a),n}startToCacheChildren(){}recoverChildren(){}resize(e,t){this.startToCacheChildren(),this.reset({width:e,height:t}),this.recoverChildren()}setAngle(e=0){this.reset({angle:e})}addAngle(e=0){this.setAngle(this.angle+e)}checkInArea(e){return fc(e,this.originVerties)}hasPoint(e,t){return this.isPointInRect(e,t)}isPointInRect(e,t){return ps(this.originVerties,e,t)}isIncludeByArea(e){return this.originVerties.map(t=>ps(e,...t)).filter(Boolean).length===4}getPerspectiveMatrix(){if(!this.perspective)return;let[t=p.percent(50),r=p.percent(50)]=Sr.parseStyle(this.perspectiveOrigin);const i=this.screenWidth,a=this.screenHeight;t=t.toPx(i).value,r=r.toPx(a).value;const n=Mt();if($t(n,n,[t,r,0]),this.perspective&&this.perspective!="none")It(n,n,Oi(1,0,0,0,0,1,0,0,0,0,1,0,0,0,-1/p.parse(this.perspective).value,1));else return;return $t(n,n,[-t,-r,0]),n}getItemTransformMatrix(){const e=st.parseStyle(this.transform),t=this.screenWidth,r=this.screenHeight;return st.createTransformMatrix(e,t,r)}getItemTransformMatrixInverse(){return Ot([],this.getItemTransformMatrix())}getLocalTransformMatrix(e,t){const r=Sr.scale(this.transformOrigin||"50% 50% 0px",wt(e)?this.screenWidth:e,wt(t)?this.screenHeight:t),i=Mt();return $t(i,i,r),It(i,i,this.itemMatrix),$t(i,i,qt([],r)),i}getLocalTransformMatrixInverse(e,t){return Ot([],this.getLocalTransformMatrix(e,t))}getDirectionTransformMatrix(e,t,r){const i=this.offsetX,a=this.offsetY,n=Pe([],Sr.scale(this.transformOrigin||"50% 50% 0px",t,r),qt([],e)),o=Mt();return $t(o,o,[i,a,0]),$t(o,o,e),$t(o,o,n),It(o,o,this.itemMatrix),$t(o,o,qt([],n)),o}getDirectionTopLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,0,0],e,t)}getDirectionLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t/2,0],e,t)}getDirectionTopMatrix(e,t){return this.getDirectionTransformMatrix([e/2,0,0],e,t)}getDirectionBottomLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t,0],e,t)}getDirectionTopRightMatrix(e,t){return this.getDirectionTransformMatrix([e,0,0],e,t)}getDirectionRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t/2,0],e,t)}getDirectionBottomRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t,0],e,t)}getDirectionBottomMatrix(e,t){return this.getDirectionTransformMatrix([e/2,t,0],e,t)}getAbsoluteMatrix(){let e=Mt();if(this.parent&&(It(e,e,this.parent.absoluteMatrix),de(this.parent.getPerspectiveMatrix))){const t=this.parent.getPerspectiveMatrix();t&&It(e,e,t)}return It(e,e,this.getRelativeMatrix()),e.filter(t=>!isNaN(t)).length===0?Mt():e}getRelativeMatrix(){let e=Mt();const t=this.offsetX,r=this.offsetY;return $t(e,e,[t,r,0]),It(e,e,this.localMatrix),e}getRelativeMatrixInverse(){return Ot([],this.getRelativeMatrix())}getTransformWithTranslate(e){e=e||this;let t=Mt();const r=e.offsetX,i=e.offsetY;return $t(t,t,[r,i,0]),It(t,t,e.localMatrix),t}getAbsoluteMatrixInverse(){return Ot([],this.getAbsoluteMatrix())}getLocalVerties(e,t){return e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight,mt(0,0,e,t,this.transformOrigin)}getVerties(e,t){e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight;let r=0,i=0;if(this.parent&&this.parent.is("project")===!1){const n=this.parent.contentBox;r=n.x,i=n.y}let a=mt(r,i,e,t,this.transformOrigin);return oe(a,this.absoluteMatrix)}getContentVerties(e,t){e=ke(e)?e:this.screenWidth,t=ke(t)?t:this.screenHeight;const r=Sr.scale(this.transformOrigin,e,t),i=this.get("padding-top")||0,a=this.get("padding-right")||0,n=this.get("padding-bottom")||0,o=this.get("padding-left")||0,l=mt(0+o,0+i,e-o-a,t-i-n,this.transformOrigin);return l[4]=r,oe(l,this.absoluteMatrix)}rectVerties(){return this.verties.filter((e,t)=>t<4)}getGuideVerties(){const e=this.originVerties;return[...e,te([],e[0],e[1],.5),te([],e[1],e[2],.5),te([],e[2],e[3],.5),te([],e[3],e[0],.5)]}getXList(){return[...new Set(this.guideVerties.map(e=>e[0]))]}getYList(){return[...new Set(this.guideVerties.map(e=>e[1]))]}get nestedAngle(){return this.parent?this.parent.nestedAngle+this.angle:this.angle||0}get toRectVerties(){return Ra([this])}get matrix(){const e=this.id,t=this.offsetX,r=this.offsetY,i=this.screenWidth,a=this.screenHeight,n=this.transform,o=this.transformOrigin||"50% 50% 0px",l=this.getTransformOriginMatrix(),c=this.getTransformOriginMatrixInverse(),h=this.parent.absoluteMatrix,u=this.parent.absoluteMatrixInverse,d=this.localMatrix,v=this.localMatrixInverse,g=this.itemMatrix,y=this.itemMatrixInverse,S=this.absoluteMatrix,_=this.absoluteMatrixInverse,L=this.relativeMatrix,I=this.relativeMatrixInverse,T={"to top left":this.getDirectionTopLeftMatrix(i,a),"to top":this.getDirectionTopMatrix(i,a),"to top right":this.getDirectionTopRightMatrix(i,a),"to right":this.getDirectionRightMatrix(i,a),"to bottom left":this.getDirectionBottomLeftMatrix(i,a),"to bottom":this.getDirectionBottomMatrix(i,a),"to bottom right":this.getDirectionBottomRightMatrix(i,a),"to left":this.getDirectionLeftMatrix(i,a)},V=this.verties,F=V.map(W=>W[0]),H=V.map(W=>W[1]);return{id:e,x:t,y:r,width:i,height:a,transform:n,originalTransformOrigin:o,verties:V,originVerties:this.originVerties,xList:F,yList:H,directionMatrix:T,parentMatrix:h,parentMatrixInverse:u,localMatrix:d,localMatrixInverse:v,itemMatrix:g,itemMatrixInverse:y,absoluteMatrix:S,absoluteMatrixInverse:_,relativeMatrix:L,relativeMatrixInverse:I,transformOriginMatrix:l,transformOriginMatrixInverse:c}}absolutePath(e=""){const t=e||this.d,r=new Y(t);return r.transformMat4(this.absoluteMatrix),r}invertPath(e=""){const t=new Y(e);return t.transformMat4(this.absoluteMatrixInverse),t}invertPoint(e){return Xe([],e,this.absoluteMatrixInverse)}invertPathString(e=""){return this.invertPath(e).d}updatePath(e){const t=this.matrix,r=new Y(e);let i=r.getBBox();const a=Ht(i[1],i[0]),n=Ht(i[3],i[0]);let o=oe(mt(i[0][0],i[0][1],a,n),t.absoluteMatrix),l=oe(o,Wi(ht([],o[4]),st.createTransformMatrix(st.parseStyle(t.transform),a,n),ht([],qt([],o[4]))));const c=er(ht([],l[0]),this.getLocalTransformMatrix(a,n)),h=Hi([],er(t.parentMatrixInverse,c,Ot([],this.getLocalTransformMatrix(a,n))));return{d:r.translate(-i[0][0],-i[0][1]).d,x:h[0],y:h[1],width:a,height:n}}checkInAreaForAll(e){const t=[...this.checkInAreaForLayers(e)];return this.is("artboard")||this.is("project")||this.checkInArea(e)&&t.push(this),t}checkInAreaForLayers(e){var t=[];return this.layers.forEach(r=>{t.push.apply(t,r.checkInAreaForLayers(e)),r.checkInArea(e)&&t.push(r)}),t}getTransformOriginMatrix(){return ht([],Sr.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight))}getTransformOriginMatrixInverse(){return Ot([],this.getTransformOriginMatrix())}recoverMatrix(e){const t=er(this.absoluteMatrixInverse,e.absoluteMatrix),r=Ch([],t),i=[],a=Th(i,r),n=i[2]?mo(a*i[2]):0,o=Mt();Ph(o,a,i);const[l,c]=Hi([],er(t,Wi(e.transformOriginMatrix,o,e.transformOriginMatrixInverse)));return{x:l,y:c,angle:n}}resetMatrix(e){const t=er(this.absoluteMatrixInverse,e.absoluteMatrix),r=Ch([],t),i=[],a=Th(i,r),n=i[2]?mo(a*i[2]):0,o=Mt();Ph(o,a,i);const[l,c]=Hi([],er(t,Wi(e.getTransformOriginMatrix(),o,e.getTransformOriginMatrixInverse())));e.reset({x:l,y:c,angle:n}),this.manager.setChanged("resetMatrix",this.id,{end:!0,childItemId:e==null?void 0:e.id})}setOrder(e){var t=this.parent,r=this.index;r>-1&&(t.children[r]=t.children[e],t.children[e]=this.id,this.manager.setChanged("setOrder",this.id,{targetIndex:e,startIndex:r,parentId:t.id}))}orderNext(){if(this.isLast){if(this.parent.next){let t=this.parent.next;t.enableHasChildren()?t.appendChild(this):t.insertAfter(this)}return}var e=this.index;e>-1&&this.setOrder(e+1)}orderPrev(){if(this.isFirst){const t=this.parent.prev;t&&t.insertBefore(this);return}var e=this.index;e>0&&this.setOrder(e-1)}orderFirst(){this.setOrder(0)}orderLast(){this.setOrder(this.parent.childrenLength-1)}orderTop(){}orderBottom(){}}const cd={[Ae.DEFAULT]:wV,[Ae.GRID]:dp};class TV extends kV{getDefaultObject(e={}){return super.getDefaultObject(b({layout:Ae.DEFAULT,constraintsHorizontal:Me.NONE,constraintsVertical:Me.NONE,flexDirection:Kt.ROW,flexWrap:oo.NOWRAP,justifyContent:Qs.FLEX_START,alignItems:Ri.FLEX_START,alignContent:J_.FLEX_START,order:0,flexGrow:0,flexShrink:0,flexBasis:"auto",gap:0,resizingHorizontal:Ce.FIXED,resizingVertical:Ce.FIXED,gridTemplateRows:"auto",gridColumnGap:"0px",gridTemplateColumns:"auto",gridRowGap:"0px",gridTemplateAreas:"",gridAutoRows:"auto",gridAutoColumns:"auto",gridAutoFlow:"row"},e))}reset(e,t={origin:"*"}){const r=super.reset(e,t);return(this.hasChangedField("resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshResizableCache(),r}refreshResizableCache(){this.addCache("resizable",this.getAutoResizable())}get autoResizable(){return this.getCache("resizable")}getAutoResizable(){return!(this.parent.is("project")||this.resizingHorizontal===Ce.FIXED&&this.resizingVertical===Ce.FIXED&&this.constraintsHorizontal===Me.NONE&&this.constraintsVertical===Me.NONE)}get layout(){return this.get("layout")}get constraintsHorizontal(){return this.get("constraintsHorizontal")}set constraintsHorizontal(e){this.reset({constraintsHorizontal:e})}get constraintsVertical(){return this.get("constraintsVertical")}set constraintsVertical(e){this.reset({constraintsVertical:e})}get flexDirection(){return this.get("flexDirection")}set flexDirection(e){this.reset({flexDirection:e})}get flexWrap(){return this.get("flexWrap")}set flexWrap(e){this.reset({flexWrap:e})}get justifyContent(){return this.get("justifyContent")}set justifyContent(e){this.reset({justifyContent:e})}get alignItems(){return this.get("alignItems")}set alignItems(e){this.reset({alignItems:e})}get alignContent(){return this.get("alignContent")}set alignContent(e){this.reset({alignContent:e})}get order(){return this.get("order")}set order(e){this.reset({order:e})}get flexGrow(){return this.get("flexGrow")}set flexGrow(e){this.reset({flexGrow:e})}get flexShrink(){return this.get("flexShrink")}set flexShrink(e){this.reset({flexShrink:e})}get flexBasis(){return this.get("flexBasis")}set flexBasis(e){this.reset({flexBasis:e})}get gap(){return this.get("gap")}set gap(e){this.reset({gap:e})}get resizingHorizontal(){return this.get("resizingHorizontal")}set resizingHorizontal(e){this.reset({resizingHorizontal:e})}get resizingVertical(){return this.get("resizingVertical")}set resizingVertical(e){this.reset({resizingVertical:e})}get gridTemplateRows(){return this.get("gridTemplateRows")}set gridTemplateRows(e){this.reset({gridTemplateRows:e})}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.reset({gridColumnGap:e})}get gridTemplateColumns(){return this.get("gridTemplateColumns")}set gridTemplateColumns(e){this.reset({gridTemplateColumns:e})}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.reset({gridRowGap:e})}get gridTemplateAreas(){return this.get("gridTemplateAreas")}set gridTemplateAreas(e){this.reset({gridTemplateAreas:e})}get gridAutoRows(){return this.get("gridAutoRows")}set gridAutoRows(e){this.reset({gridAutoRows:e})}get gridAutoColumns(){return this.get("gridAutoColumns")}set gridAutoColumns(e){this.reset({gridAutoColumns:e})}get gridAutoFlow(){return this.get("gridAutoFlow")}set gridAutoFlow(e){this.reset({gridAutoFlow:e})}isLayoutItem(){var e;return!!((e=this.parent)!=null&&e.hasLayout())}hasConstraints(){return this.isLayout(Ae.DEFAULT)}hasLayout(){return!this.hasConstraints()||Boolean(this.layout)===!1}isLayout(e){return this.layout===e}isInDefault(){var t;const e=((t=this.parent)==null?void 0:t.layout)||"default";return Ae.DEFAULT===e}isInGrid(){return this.isInLayout(Ae.GRID)}isInFlex(){return this.isInLayout(Ae.FLEX)}isInLayout(e){var t;return((t=this.parent)==null?void 0:t.layout)===e}changeConstraints(e,t,r=!1){const i=this.get(e);let a=t;i===Me.MAX?(t===Me.MAX&&(a=Me.SCALE),r&&t===Me.MIN&&(a=Me.STRETCH)):i===Me.MIN?t===Me.MIN?a=Me.SCALE:r&&t===Me.MAX&&(a=Me.STRETCH):i===Me.STRETCH&&(t===Me.MIN?a=Me.MAX:t===Me.MAX&&(a=Me.MIN)),this.reset({[e]:a})}startToCacheChildren(){var e;(e=cd[this.layout])==null||e.startCache(this)}recoverChildren(){var e;(e=cd[this.layout])==null||e.recover(this)}}const MV=["appearance","position","right","bottom","rootVariable","variable","transform","filter","backdropFilter","backgroundColor","backgroundImage","borderRadius","border","boxShadow","clipPath","color","perspectiveOrigin","transformOrigin","transformStyle","perspective","mixBlendMode","overflow","opacity","box-model","layout","flex-layout","grid-layout","animation","transition","pattern","boolean-operation"],pp={};MV.forEach(function(s){pp[s]=!0});class IV extends TV{getDefaultObject(e={}){return super.getDefaultObject(b({rootVariable:"",variable:"",color:"black",overflow:"visible",opacity:1,pattern:"",selectors:[],svg:[],gridColumnStart:"",gridColumnEnd:"",gridRowStart:"",gridRowEnd:"",gridColumnGap:"",gridRowGap:""},e))}get gridColumnStart(){return this.get("gridColumnStart")}set gridColumnStart(e){this.set("gridColumnStart",e)}get gridColumnEnd(){return this.get("gridColumnEnd")}set gridColumnEnd(e){this.set("gridColumnEnd",e)}get gridRowStart(){return this.get("gridRowStart")}set gridRowStart(e){this.set("gridRowStart",e)}get gridRowEnd(){return this.get("gridRowEnd")}set gridRowEnd(e){this.set("gridRowEnd",e)}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.set("gridColumnGap",e)}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.set("gridRowGap",e)}get pattern(){return this.get("pattern")}set pattern(e){this.reset({pattern:e})}get selectors(){return this.get("selectors")}set selectors(e){this.reset({selectors:e})}get svg(){return this.get("svg")}set svg(e){this.reset({svg:e})}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.reset({rootVariable:e})}get variable(){return this.get("variable")}set variable(e){this.reset({variable:e})}get filter(){return this.get("filter")}set filter(e){this.reset({filter:e})}get backdropFilter(){return this.get("backdropFilter")}set backdropFilter(e){this.reset({backdropFilter:e})}get backgroundColor(){return this.get("backgroundColor")}set backgroundColor(e){this.reset({backgroundColor:e})}get backgroundImage(){return this.get("backgroundImage")}set backgroundImage(e){this.reset({backgroundImage:e})}get textClip(){return this.get("textClip")}set textClip(e){this.reset({textClip:e})}get borderRadius(){return this.get("borderRadius")}set borderRadius(e){this.reset({borderRadius:e})}get border(){return this.get("border")}set border(e){this.reset({border:e})}get boxShadow(){return this.get("boxShadow")}set boxShadow(e){this.reset({boxShadow:e})}get textShadow(){return this.get("textShadow")}set textShadow(e){this.reset({textShadow:e})}get clipPath(){return this.get("clipPath")}set clipPath(e){this.reset({clipPath:e})}get color(){return this.get("color")}set color(e){this.reset({color:e})}get opacity(){return this.get("opacity")}set opacity(e){this.reset({opacity:e})}get transformStyle(){return this.get("transformStyle")}set transformStyle(e){this.reset({transformStyle:e})}get fontSize(){return this.get("fontSize")}set fontSize(e){this.reset({fontSize:e})}get fontFamily(){return this.get("fontFamily")}set fontFamily(e){this.reset({fontFamily:e})}get fontWeight(){return this.get("fontWeight")}set fontWeight(e){this.reset({fontWeight:e})}get fontStyle(){return this.get("fontStyle")}set fontStyle(e){this.reset({fontStyle:e})}get fontVariant(){return this.get("fontVariant")}set fontVariant(e){this.reset({fontVariant:e})}get fontStretch(){return this.get("fontStretch")}set fontStretch(e){this.reset({fontStretch:e})}get lineHeight(){return this.get("lineHeight")}set lineHeight(e){this.reset({lineHeight:e})}get letterSpacing(){return this.get("letterSpacing")}set letterSpacing(e){this.reset({letterSpacing:e})}get wordSpacing(){return this.get("wordSpacing")}set wordSpacing(e){this.reset({wordSpacing:e})}get textDecoration(){return this.get("textDecoration")}set textDecoration(e){this.reset({textDecoration:e})}get textAlign(){return this.get("textAlign")}set textAlign(e){this.reset({textAlign:e})}get textTransform(){return this.get("textTransform")}set textTransform(e){this.reset({textTransform:e})}get textOverflow(){return this.get("text-overflow")}set textOverflow(e){this.reset({"text-overflow":e})}get textIndent(){return this.get("textIndent")}set textIndent(e){this.reset({textIndent:e})}get mixBlendMode(){return this.get("mixBlendMode")}set mixBlendMode(e){this.reset({mixBlendMode:e})}get visibility(){return this.get("visibility")}set visibility(e){this.reset({visibility:e})}get zIndex(){return this.get("z-index")}set zIndex(e){this.reset({"z-index":e})}get overflow(){return this.get("overflow")}set overflow(e){this.reset({overflow:e})}get animation(){return this.get("animation")}set animation(e){this.reset({animation:e})}get transition(){return this.get("transition")}set transition(e){this.reset({transition:e})}get marginTop(){return this.get("marginTop")}set marginTop(e){this.reset({marginTop:e})}get marginRight(){return this.get("marginRight")}set marginRight(e){this.reset({marginRight:e})}get marginBottom(){return this.get("marginBottom")}set marginBottom(e){this.reset({marginBottom:e})}get marginLeft(){return this.get("marginLeft")}set marginLeft(e){this.reset({marginLeft:e})}get paddingTop(){return this.get("paddingTop")}set paddingTop(e){this.reset({paddingTop:e})}get paddingRight(){return this.get("paddingRight")}set paddingRight(e){this.reset({paddingRight:e})}get paddingBottom(){return this.get("paddingBottom")}set paddingBottom(e){this.reset({paddingBottom:e})}get paddingLeft(){return this.get("paddingLeft")}set paddingLeft(e){this.reset({paddingLeft:e})}editable(e){switch(e){case"svg-item":case"transformOrigin":case"perspective":case"perspectiveOrigin":return!1}return Boolean(pp[e])}get changedBoxModel(){return this.hasChangedField("marginTop","marginLeft","marginBottom","marginRight","paddingTop","paddingLeft","paddingRight","paddingBottom")}get changedFlexLayout(){return this.hasChangedField("flexDirection","flexWrap","justifyContent","alignItems","alignContent","order","flexBasis","flexGrow","flexShrink","flexFlow")}get changedGridLayout(){return this.hasChangedField("gridTemplateRows","gridTemplateColumns","gridTemplateAreas","gridAutoRows","gridAutoColumns","gridAutoFlow","gridRowGap","gridColumnGap","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea")}get changedLayoutItem(){return this.hasChangedField("resizingHorizontal","resizingVertical")}get changedLayout(){return this.hasChangedField("layout")||this.changedBoxModel||this.changedFlexLayout||this.changedGridLayout||this.changedLayoutItem}addSelector(e){return this.selectors.push(e),e}createSelector(e={}){return this.addSelector(new Ao(b({checked:!0},e)))}removePropertyList(e,t){e.splice(t,1)}removeSelector(e){this.removePropertyList(this.selectors,e)}enableHasChildren(){return!0}sortItem(e,t,r){e.splice(r+(t{this.traverse(i,t)}))}tree(e){var t=[];return this.children.forEach(r=>{this.traverse(r,t,e)}),t}convert(e){return e=super.convert(e),e.padding&&(e.paddingTop=p.parse(e.padding),e.paddingRight=p.parse(e.padding),e.paddingBottom=p.parse(e.padding),e.paddingLeft=p.parse(e.padding),delete e.padding),e}reset(e,t={origin:"*"}){const r=super.reset(e,t);if(this.hasChangedField("clipPath")&&this.setClipPathCache(),this.hasChangedField("width","height")&&this.cacheClipPath){const i=this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d;this.clipPath=`path(${i})`,this.modelManager.setChanged("reset",this.id,{clipPath:this.clipPath})}return this.hasChangedField("backgroundImage","pattern")&&this.setBackgroundImageCache(),r}setBackgroundImageCache(){let e=[];if(this.pattern){const i=this.computed("pattern",a=>hr.parseStyle(a).map(n=>De.parseStyle(vr(n.toCSS()))));for(var t=0,r=i.length;tDe.parseStyle(vr(a)));e.push.apply(e,i.filter(a=>a.visibility!==Dr.HIDDEN))}if(e.length){const i=this.top;this.cacheBackgroundImage=De.joinCSS(e);const a=e.filter(o=>o.type===D.URL).map(o=>o.image.url);let n=this.cacheBackgroundImage["background-image"];a.forEach(o=>{const l=i.getImageValueById(o);n=n.replace(o,`"${l}"`)}),this.cacheBackgroundImage["background-image"]=n}else this.cacheBackgroundImage={},this.cacheBackgroundImageOriginal=[]}setClipPathCache(){var e=xe.parseStyle(this.clipPath);this.cacheClipPathObject=e,e.type==="path"&&(this.cacheClipPath=new Y(e.value.trim()),this.cacheClipPathWidth=this.width,this.cacheClipPathHeight=this.height)}setCache(){super.setCache(),this.setClipPathCache()}get clipPathString(){if(this.cacheClipPath||this.setClipPathCache(),this.cacheClipPath)return this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d}getBackgroundImage(e){return De.parseStyle(vr(this.backgroundImage))[e||0]}get borderWidth(){const e=Xi.parseStyle(this.border),t=Xi.parseValue(e.border);return t!=null&&t.width?{borderLeftWidth:t==null?void 0:t.width,borderRightWidth:t==null?void 0:t.width,borderTopWidth:t==null?void 0:t.width,borderBottomWidth:t==null?void 0:t.width}:{borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}}get contentBox(){const r=this.screenWidth,i=this.screenHeight;{const a=this.borderWidth;return{x:0+a.borderLeftWidth,y:0+a.borderTopWidth,width:r-a.borderLeftWidth-a.borderRightWidth,height:i-a.borderTopWidth-a.borderBottomWidth}}}getGradientLineLength(e,t,r){return Math.abs(e*Math.sin(Dt(r)))+Math.abs(t*Math.cos(Dt(r)))}createBackgroundImageMatrix(e){const t=this.contentBox,r=this.getBackgroundImage(e),{image:i}=r,a=r.getOffset(t),n=oe(mt(a.x,a.y,a.width,a.height),this.absoluteMatrix),o={backRect:a,backVerties:n,absoluteMatrix:this.absoluteMatrix,backgroundImage:r};switch(i.type){case D.RADIAL:case D.REPEATING_RADIAL:case D.CONIC:case D.REPEATING_CONIC:let[l,c]=i.radialPosition;l=="center"&&(l=p.percent(50)),c=="center"&&(c=p.percent(50));const h=l.toPx(a.width),u=c.toPx(a.height),d=oe([[h.value+a.x,u.value+a.y,0],[h.value+a.x,u.value+a.y-1,0]],this.absoluteMatrix);if(o.radialCenterPosition=d[0],o.radialCenterStick=d[1],o.radialCenterPoint=[h.value,u.value,0],i.type===D.RADIAL||i.type===D.REPEATING_RADIAL){const{startPoint:V,endPoint:F,shapePoint:H}=i.getStartEndPoint(o),[W,le,ce]=oe([V,F,H],this.absoluteMatrix);o.radialCenterPosition=W,o.startPoint=W,o.endPoint=le,o.shapePoint=ce,o.colorsteps=i.colorsteps.map(me=>{const pe=me.toLength();return{id:me.id,cut:me.cut,color:me.color,timing:me.timing,timingCount:me.timingCount,pos:te([],o.startPoint,o.endPoint,pe.value/100)}})}else if(i.type===D.CONIC||i.type===D.REPEATING_CONIC){const{startPoint:V,endPoint:F,shapePoint:H}=i.getStartEndPoint(o),[W,le,ce]=oe([V,F,H],this.absoluteMatrix);o.radialCenterPosition=W,o.startPoint=W,o.endPoint=le,o.shapePoint=ce,[o.startPoint,o.endPoint,o.shapePoint]=oe([o.startPoint,o.endPoint,o.shapePoint],Ft(i.angle,o.radialCenterPosition));const me=o.shapePoint;o.colorsteps=i.colorsteps.map(pe=>{const Ve=pe.percent*3.6,[q]=oe([me],Ft(Ve,o.radialCenterPosition));return{id:pe.id,cut:pe.cut,color:pe.color,timing:pe.timing,timingCount:pe.timingCount,pos:q}})}break;case D.LINEAR:case D.REPEATING_LINEAR:o.gradientLineLength=this.getGradientLineLength(a.width,a.height,i.angle),o.centerPosition=te([],n[0],n[2],.5);const v=Pe([],o.centerPosition,[0,o.gradientLineLength/2,0]),g=$e([],o.centerPosition,[0,o.gradientLineLength/2,0]),y=Wt(v),S=Wt(g),[_,L,I,T]=oe([v,g,y,S],Ft(i.angle,o.centerPosition));o.endPoint=L,o.startPoint=_,o.areaStartPoint=I,o.areaEndPoint=T,o.colorsteps=i.colorsteps.map(V=>{const F=V.toLength();return{id:V.id,cut:V.cut,color:V.color,timing:V.timing,timingCount:V.timingCount,pos:te([],o.startPoint,o.endPoint,F.value/100)}});break}return o}}class qi extends IV{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"layer",name:"New Layer",tagName:"div"},e))}getDefaultTitle(){return"Layer"}}class EV extends qi{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"artboard",name:"New ArtBoard",width:1e3,height:1e3,backgroundColor:"white",transformStyle:"flat"},e))}getDefaultTitle(){return"ArtBoard"}getIcon(){return ne.artboard}editable(e){switch(e){case"border":case"borderRadius":return!1;case"artboardSize":case"layout":return!0}return super.editable(e)}}const LV=["jpg","jpeg","png","gif","svg"];class Ha extends _c{getDefaultObject(e={}){return super.getDefaultObject(b({type:"url",url:"",datauri:"",patternUnits:"userSpaceOnUse",patternWidth:"100%",patternHeight:"100%",imageX:"0%",imageY:"0%",imageWidth:"100%",imageHeight:"100%"},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("url","datauri","patternUnits","patternWidth","patternHeight","imageX","imageY","imageWidth","imageHeight"))}static parse(e){var t=e.split("(")[1].split(")")[0],[r,i]=t.trim().split("#");if(!i)return new Ha({url:r});var[a,n,o,l,c,h,u]=i.split(",");return new Ha({patternUnits:a,patternWidth:n,patternHeight:o,imageX:l,imageY:c,imageWidth:h,imageHeight:u,url:r})}isUrl(){return!0}static isImageFile(e){return LV.includes(e)}toString(){var e=this.json,{patternUnits:t,patternWidth:r,patternHeight:i,imageX:a,imageY:n,imageWidth:o,imageHeight:l,url:c}=e,h=[t,r,i,a,n,o,l].join(",").trim();return`url(${c}#${h})`}toSVGString(e,t={}){var{patternUnits:r,patternWidth:i,patternHeight:a,imageX:n,imageY:o,imageWidth:l,imageHeight:c}=this.json;const h=p.parse(i),u=p.parse(a),d=p.parse(n),v=p.parse(o),g=p.parse(l),y=p.parse(c),S=t.width?h.toPx(t.width).value:h,_=t.height?u.toPx(t.height).value:u;return` + + + + `}toFillValue(e){return`url(#${e})`}}class kc extends ur{toString(){return""}toSVGString(){return""}toFillValue(){return""}}const hd=[mr.PAD,mr.REFLECT,mr.REPEAT];class _s extends kc{convert(e){return e.spreadMethod=hd.includes(e.spreadMethod)?e.spreadMethod:mr.PAD,e}getDefaultObject(e){return super.getDefaultObject(b({type:D.LINEAR,x1:p.parse("0%"),y1:p.parse("50%"),x2:p.parse("100%"),y2:p.parse("50%"),spreadMethod:mr.PAD},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("x1","y1","x2","y2","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{x1:t,y1:r,x2:i,y2:a,spreadMethod:n}=this.json,o=[t,r,i,a,n].join(" "),l=`${this.json.type}(${o}, ${e})`;return l}toSVGString(e){var{x1:t,y1:r,x2:i,y2:a,spreadMethod:n}=this.json;return` + + ${_s.makeColorStepList(this.colorsteps).map(o=>` + + `).join("")} + + `}toFillValue(e){return`url(#${e})`}static parse(e){const t=Bt(e);var r={};const[i,...a]=t.parameters,n=[];i.forEach(d=>{d.func===Ue.KEYWORD?hd.includes(d.matchedString)&&(r.spreadMethod=d.matchedString):n.push(d)});var[o=p.percent(0),l=p.percent(50),c=p.percent(100),h=p.percent(50)]=n.map(d=>d.parsed);r=ie(b({},r),{x1:o,y1:l,x2:c,y2:h});const u=_s.parseColorSteps(a);return new _s(ie(b({},r),{colorsteps:u}))}}const VV=[xt.CIRCLE,xt.ELLIPSE],dd=[mr.PAD,mr.REFLECT,mr.REPEAT];class Ss extends kc{convert(e){return e.spreadMethod=dd.includes(e.spreadMethod)?e.spreadMethod:mr.PAD,e}getDefaultObject(e={}){return super.getDefaultObject(b({type:D.RADIAL,radialType:xt.CIRCLE,x1:p.parse("50%"),y1:p.parse("50%"),x2:p.parse("100%"),y2:p.parse("50%"),x3:p.parse("50%"),y3:p.parse("100%"),spreadMethod:mr.PAD},e))}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("radialType","x1","y1","x2","y2","x3","y3","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{radialType:t,x1:r,y1:i,x2:a,y2:n,x3:o,y3:l,spreadMethod:c}=this.json,h=[t,r,i,a,n,o,l,c].join(" ").trim(),u=`${this.json.type}(${h}, ${e})`;return u}getGradientAngle(e={}){var{x1:t,y1:r,x2:i,y2:a}=this.json;const n=t.toPx(e.width),o=r.toPx(e.height),l=i.toPx(e.width),c=a.toPx(e.height);return(rt(l.value-n.value,c.value-o.value)+180)%360}toSVGString(e,t={}){var{x1:r,y1:i,x2:a,y2:n,x3:o,y3:l,spreadMethod:c,radialType:h}=this.json;const u=r.toPx(t.width),d=i.toPx(t.height),v=a.toPx(t.width),g=n.toPx(t.height);var y=se([u.value,d.value,0],[v.value,g.value,0]),S=this.getGradientAngle(t);const _=tu();if(al(_,_,lf([],[u.value,d.value])),al(_,_,cf([],Dt(S))),h===xt.ELLIPSE){const T=o.toPx(t.width),V=l.toPx(t.height);var L=se([u.value,d.value,0],[T.value,V.value,0]);al(_,_,hf([],[1,L/y]))}const I=`matrix(${_[0]}, ${_[1]}, ${_[3]}, ${_[4]}, ${_[6]}, ${_[7]})`;return` + + ${Ss.makeColorStepList(this.colorsteps).map(T=>` + + `).join("")} + +`}toFillValue(e){return`url(#${e})`}static parse(e){const t=Bt(e);var r={};const[i,...a]=t.parameters,n=[];i.forEach(g=>{g.func===Ue.KEYWORD?VV.includes(g.matchedString)?r.radialType=g.matchedString:dd.includes(g.matchedString)&&(r.spreadMethod=g.matchedString):n.push(g)});var[o=p.percent(50),l=p.percent(50),c=p.percent(100),h=p.percent(50),u=p.percent(50),d=p.percent(100)]=n.map(g=>g.parsed);r=ie(b({},r),{x1:o,y1:l,x2:c,y2:h,x3:u,y3:d});const v=Ss.parseColorSteps(a);return new Ss(ie(b({},r),{colorsteps:v}))}}class Ai extends kc{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",colorsteps:[new Je({color:"red",percent:0,index:0}),new Je({color:"red",percent:100,index:1})]})}toCloneObject(){return ie(b({},super.toCloneObject()),{static:!0})}static create(e="transparent"){return new Ai({colorsteps:[new Je({color:e,percent:0,index:0}),new Je({color:e,percent:100,index:0})]})}setColor(e){this.colorsteps.forEach(t=>{t.color=e})}toString(){var e=this.json.colorsteps[0].color;return e}toSVGString(){return""}toFillValue(){return this.toString()}}class tt extends sr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:tt.createImage(e.images[0])})}static createImage(e){return new SVGLImageResource({url:e})}setGradient(e){this.reset({type:e.type,image:tt.createGradient(e,this.json.image)})}static createGradient(e,t){const r=e.colorsteps||t.colorsteps;let i=t.toJSON();switch(delete i.itemType,delete i.type,e.type){case D.LINEAR:return new _s(ie(b({},i),{colorsteps:r}));case D.RADIAL:return new Ss(ie(b({},i),{colorsteps:r}));default:return new Ai(ie(b({},i),{colorsteps:r}))}}get image(){return this.json.image}set image(e){this.json.image=e}static parse(e){return new tt(e)}static parseImage(e=""){const t=Bt(e);let r=null;if(!t)return Ai.create(e||"transparent");switch(t.func){case D.LINEAR:r=_s.parse(t.matchedString);break;case D.RADIAL:r=Ss.parse(t.matchedString);break;case D.URL:r=Ha.parse(t.matchedString);break;default:r=Ai.create(t.matchedString);break}return r}static changeImageType(e){switch(e.type){case D.LINEAR:return new _s(e);case D.RADIAL:return new Ss(e);case"image-resource":case D.URL:return new Ha(e);default:return new Ai(e)}}}const OV=["appearance","border","borderRadius","backgroundImage","backdropFilter","clipPath","pattern","boxShadow","layout","transform","transformOrigin","perspective","perspectiveOrigin","backdropFilter","boxModel"],gp={};OV.forEach(s=>{gp[s]=!0});class ua extends qi{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svg",name:"New SVG",elementType:"svg",overflow:"visible",stroke:"black",strokeWidth:1,fill:"transparent",fillOpacity:1,fillRule:"nonzero",textAnchor:"start",strokeLinecap:"",strokeLinejoin:"",strokeDasharray:[],strokeDashoffset:0},e))}get stroke(){return this.get("stroke")}set stroke(e){this.set("stroke",e)}get strokeWidth(){return this.get("strokeWidth")}set strokeWidth(e){this.set("strokeWidth",e)}get fill(){return this.get("fill")}set fill(e){this.set("fill",e)}get fillOpacity(){return this.get("fillOpacity")}set fillOpacity(e){this.set("fillOpacity",e)}get fillRule(){return this.get("fillRule")}set fillRule(e){this.set("fillRule",e)}get textAnchor(){return this.get("textAnchor")}set textAnchor(e){this.set("textAnchor",e)}get strokeDasharray(){return this.get("strokeDasharray")}set strokeDasharray(e){this.set("strokeDasharray",e)}get strokeDashoffset(){return this.get("strokeDashoffset")}set strokeDashoffset(e){this.set("strokeDashoffset",e)}get strokeLinejoin(){return this.get("strokeLinejoin")}set strokeLinejoin(e){this.set("strokeLinejoin",e)}get strokeLinecap(){return this.get("strokeLinecap")}set strokeLinecap(e){this.set("strokeLinecap",e)}get isDragSelectable(){return this.isBooleanItem===!1}get isBooleanItem(){return Boolean(this.parent.is("boolean-path"))}editable(e){if(gp[e])return!1;switch(e){case"svg-item":return!0}return super.editable(e)}getDefaultTitle(){return"SVG"}isSVG(){return!0}hasPoint(e,t){const r=this.fill,i=this.fillOpacity,a=this.strokeWidth,n=r==="transparent"||i===0||ft(r).a===0,o=a===0;return n?this.isPointInStroke(e,t):!n&&!o?this.isPointInStroke(e,t)||this.isPointInFill(e,t):!n&&o?this.isPointInFill(e,t):!1}isPointInFill(e,t){const r=this.getCache("svgElement"),i=this.getCache("pathElement");if(i){const[a,n]=this.invertPoint([e,t,0]),o=r.createSVGPoint();return Object.assign(o,{x:a,y:n}),i.isPointInFill(o)}return!1}isPointInStroke(e,t){const r=this.getCache("svgElement"),i=this.getCache("pathElement");if(i){const[a,n]=this.invertPoint([e,t,0]),o=r.createSVGPoint();return Object.assign(o,{x:a,y:n}),i.isPointInStroke(o)}return!1}convertStrokeToPath(e=10,t=10){const r=this.attrs("name","width","parentId","height","x","y","transform","stroke");return r.fill=r.stroke,delete r.stroke,ie(b({itemType:"svg-path","fill-rule":"evenodd"},r),{x:p.parse(r.x).add(e),y:p.parse(r.y).add(t)})}toSVGPath(){const e=this.toCloneObject();return delete e.id,delete e.itemType,ie(b({},e),{d:this.d})}createFragmentMatrix(e){const t=this.get(e),r=tt.parseImage(t),i={x:0,y:0,width:this.screenWidth,height:this.screenHeight},a=oe(mt(i.x,i.y,i.width,i.height),this.absoluteMatrix),n={backRect:i,backVerties:a,absoluteMatrix:this.absoluteMatrix,image:r};let o,l,c,h,u,d;switch(r.type){case D.RADIAL:o=r.x1.toPx(i.width),l=r.y1.toPx(i.height),c=r.x2.toPx(i.width),h=r.y2.toPx(i.height),u=r.x3.toPx(i.width),d=r.y3.toPx(i.height);const S=[o.value,l.value,0],_=[c.value,h.value,0],L=[u.value,d.value,0];var[g,y,v]=oe([S,_,L],this.absoluteMatrix);n.endPoint=y,n.startPoint=g,n.shapePoint=v,n.colorsteps=r.colorsteps.map(I=>{const T=I.toLength();return{id:I.id,cut:I.cut,color:I.color,timing:I.timing,timingCount:I.timingCount,pos:te([],n.startPoint,n.endPoint,T.value/100)}});break;case D.LINEAR:o=r.x1.toPx(i.width),l=r.y1.toPx(i.height),c=r.x2.toPx(i.width),h=r.y2.toPx(i.height);var[g,y]=oe([[o.value,l.value,0],[c.value,h.value,0]],this.absoluteMatrix);n.endPoint=y,n.startPoint=g,n.areaStartPoint=Wt(g),n.areaEndPoint=Wt(y),n.colorsteps=r.colorsteps.map(I=>{const T=I.toLength();return{id:I.id,cut:I.cut,color:I.color,timing:I.timing,timingCount:I.timingCount,pos:te([],n.startPoint,n.endPoint,T.value/100)}});break}return n}}class fp extends ua{getIcon(){return ne.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svg-path",name:"New Path",strokeWidth:1,d:"",totalLength:0},e))}enableHasChildren(){return!1}reset(e,t={origin:"*"}){const r=super.reset(e,t);return this.hasChangedField("d")&&(this.cachePath=new Y(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height),r}refreshMatrixCache(){super.refreshMatrixCache(),this.hasChangedField("d")?(this.addCache("pathString",new Y(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)):this.hasChangedField("width","height")&&(this.d=this.getCache("pathString").clone().scale(this.width/this.cacheWidth,this.height/this.cacheHeight).d,this.manager.setChanged("reset",this.id,{d:this.d}))}setCache(){super.setCache(),this.addCache("pathString",new Y(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)}get d(){return this.get("d")?(this.hasCache("pathString")||(this.addCache("pathString",new Y(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)),this.getCache("pathString").clone().scale(this.width/this.getCache("pathWidth"),this.height/this.getCache("pathHeight")).d):null}set d(e){this.set("d",e)}getDefaultTitle(){return"Path"}}class jV extends fp{getIcon(){return ne.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"boolean-path",name:"New Boolean Path",strokeWidth:1,d:"",booleanOperation:"none"},e))}get booleanOperation(){return this.get("booleanOperation")}set booleanOperation(e){this.set("booleanOperation",e)}enableHasChildren(){return!0}reset(e,t={origin:"*"}){var i;const r=super.reset(e,t);if(this.cachePath||this.setCache(),this.hasChangedField("changedChildren","booleanOperation")){if(this.children.length===1){const a=this.layers[0].absolutePath().d;this.d=this.invertPath(a).d,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:a})}else if(this.booleanOperation!=="none"&&((i=this.children)==null?void 0:i.length)>=2&&this.modelManager.editor.pathKitManager.has())if(this.layers.filter(n=>n.d).length>=2){const n=this.doBooleanOperation();this.d=n,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:n})}else this.d=void 0,this.removeCache(),this.modelManager.setChanged("reset",this.id,{d:void 0})}return r}get resizableWitChildren(){return!0}startToCacheChildren(){this.cachedSize={width:this.width,height:this.height},this.cachedLayerMatrix=this.layers.map(e=>(e.startToCacheChildren(),{item:e,matrix:e.matrix}))}recoverChildren(){const e={width:this.width,height:this.height},t=e.width/this.cachedSize.width,r=e.height/this.cachedSize.height;this.cachedLayerMatrix.forEach(({item:i,matrix:a})=>{i.reset({x:i.x.changeUnitValue(a.x*t,e.width),y:i.y.changeUnitValue(a.y*r,e.height),width:i.width.changeUnitValue(a.width*t,e.width),height:i.height.changeUnitValue(a.height*r,e.height)}),i.recoverChildren()})}getFieldValueByBooleanOperation(e){const t=this.layers;if(t.length===0)return;if(t.length===1)return t[0][e];switch(this.booleanOperation){case qr.DIFFERENCE:return t[1][e]}return t[0][e]}get fill(){return this.getFieldValueByBooleanOperation("fill")}get stroke(){return this.getFieldValueByBooleanOperation("stroke")}setCache(){super.setCache(),this.cachePath=new Y(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height}removeCache(){super.removeCache(),this.cachePath=void 0,this.cacheWidth=void 0,this.cacheHeight=void 0}getDefaultTitle(){return"Path"}doBooleanOperation(){switch(this.booleanOperation){case qr.INTERSECTION:return this.intersection();case qr.UNION:return this.union();case qr.DIFFERENCE:return this.difference();case qr.REVERSE_DIFFERENCE:return this.reverseDifference();case qr.XOR:return this.xor()}return""}getPathList(){return this.layers.map(e=>e.absolutePath().d)}intersection(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.intersection(i,a),e);return this.invertPath(r).d}union(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.union(i,a),e);return this.invertPath(r).d}difference(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.difference(i,a),e);return this.invertPath(r).d}reverseDifference(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.reverseDifference(i,a),e);return this.invertPath(r).d}xor(){const[e,...t]=this.getPathList(),r=t.reduce((i,a)=>this.modelManager.editor.pathKitManager.xor(i,a),e);return this.invertPath(r).d}}class RV extends qi{getIcon(){return ne.lens}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"circle",name:"New Circle",borderRadius:"100%"},e))}getDefaultTitle(){return"Circle"}}class zV extends qi{getIcon(){return ne.image}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"image",name:"New Image",elementType:"image",src:""},e))}get src(){return this.get("src")}set src(e){this.set("src",e)}get naturalWidth(){return this.get("naturalWidth")}set naturalWidth(e){this.set("naturalWidth",e)}get naturalHeight(){return this.get("naturalHeight")}set naturalHeight(e){this.set("naturalHeight",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Image"}resize(){this.reset({width:this.naturalWidth.clone(),height:this.naturalHeight.clone()})}}class AV extends ua{getIcon(){return ne.edit}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"polygon",name:"New Polygon",strokeWidth:1,count:3},e))}get count(){return this.get("count")}set count(e){this.set("count",e)}convert(e){return e=super.convert(e),e.count&&(e.count=+e.count),e}enableHasChildren(){return!1}get editablePath(){return!1}get d(){const{width:e,height:t,count:r}=this;return Y.makePolygon(e,t,r).d}getDefaultTitle(){return"Polygon"}isPointInPath(e){const t=Xe([],e,this.absoluteMatrixInverse);return this.cachePath.isPointInPath({x:t[0],y:t[1]},this.strokeWidth||0)}}function lt(s,e,t){return()=>t}function at(s,e,t,r,i=void 0){return(a,n)=>{var o=0;return n===0?o=t:n===1?o=r:o=t+(r-t)*a,i?o+i:o}}function ud(s,e,t,r="width",i="parent"){var a=null;return i==="parent"?a=s[i][r]:i==="self"&&(a=s[r]),a?t.toPx(a.value):t}function DV(s,e,t,r,i="width",a="parent"){var n=null;return a==="parent"?n=s[a][i]:a==="self"&&(n=s[i]),n?t.to(r,n.value):t}function Ke(s,e,t,r,i="width",a="parent"){var n=p.parse(t),o=p.parse(r);return n.unit===o.unit?at(s,e,n.value,o.value,n.unit):n.equals(o)?lt(s,e,n):(l,c)=>{var h=ud(s,e,n,i,a),u=ud(s,e,o,i,a);return c===0?h:c===1?u:DV(s,e,h.value+(u.value-h.value)*l,n.unit,i,a)}}function Xt(s,e,t,r){return(i,a)=>a===1?r:t}function mn(s,e,t,r){var i=ft(t||"rgba(0, 0, 0, 1)"),a=ft(r||"rgba(0, 0, 0, 1)");return(n,o)=>o===0?t:o===1?r:Du(i,a,n,"rgb")}function Ps(s,e,t,r){return Xt(s,e,t,r)}function FV(s,e,t,r){var i={cut:Xt(s,e,t.cut,r.cut),percent:at(s,e,t.percent,r.percent),px:at(s,e,t.px,r.px),em:at(s,e,t.em,r.em),unit:Ps(s,e,t.unit,r.unit),color:mn(s,e,t.color,r.color)};return(a,n)=>new Je({cut:i.cut(a,n),percent:i.percent(a,n),px:i.px(a,n),em:i.em(a,n),unit:i.unit(a,n),color:i.color(a,n)})}function Tc(s,e,t=[],r=[]){for(var i=Math.max(t.length,r.length),a=[],n=0;na.map(u=>u(c,h))}function mp(s,e,t,r){var i={angle:at(s,e,t.angle,r.angle),radialPositionX:Ke(s,e,t.radialPosition[0],r.radialPosition[0],"width","self"),radialPositionY:Ke(s,e,t.radialPosition[1],r.radialPosition[1],"height","self"),colorsteps:Tc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>new Nr({angle:i.angle(a,n),radialPosition:[i.radialPositionX(a,n),i.radialPositionY(a,n)],colorsteps:i.colorsteps(a,n)})}function vp(s,e,t,r){var i={angle:at(s,e,t.angle,r.angle),colorsteps:Tc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>{var o=i.colorsteps(a,n);return new Gr({angle:i.angle(a,n),colorsteps:o})}}function Qn(s,e){switch(e){case"width":if(s==="center")return"50%";if(s==="left")return"0%";if(s==="right")return"100%";break;case"height":if(s==="center")return"50%";if(s==="top")return"0%";if(s==="bottom")return"100%";break}return s}function yp(s,e,t,r){t.radialPosition[0]=Qn(t.radialPosition[0],"width"),t.radialPosition[1]=Qn(t.radialPosition[1],"height"),r.radialPosition[0]=Qn(r.radialPosition[0],"width"),r.radialPosition[1]=Qn(r.radialPosition[1],"height");var i={radialType:Ps(s,e,t.radialType,r.radialType),radialPositionX:Ke(s,e,t.radialPosition[0],r.radialPosition[0],"width","self"),radialPositionY:Ke(s,e,t.radialPosition[1],r.radialPosition[1],"height","self"),colorsteps:Tc(s,e,t.colorsteps,r.colorsteps)};return(a,n)=>{var o=new Hr({radialType:i.radialType(a,n),radialPosition:[i.radialPositionX(a,n),i.radialPositionY(a,n)],colorsteps:i.colorsteps(a,n)});return o}}function BV(s,e,t,r){var i=mp(s,e,t,r);return(a,n)=>{var o=i(a,n);return new gs({angle:o.angle,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function NV(s,e,t,r){var i=vp(s,e,t,r);return(a,n)=>{var o=i(a,n),l=new fs({angle:o.angle,colorsteps:o.colorsteps});return l}}function GV(s,e,t,r){var i=yp(s,e,t,r);return(a,n)=>{var o=i(a,n);return new ms({radialType:o.radialType,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function HV(s,e,t,r){var i={image:(a,n)=>n};if(t.type==="url"||r.type==="url")i.image=Xt(s,e,t,r);else if(t.type!=r.type)i.image=Xt(s,e,t,r);else switch(t.type){case"linear-gradient":i.image=vp(s,e,t,r);break;case"repeating-linear-gradient":i.image=NV(s,e,t,r);break;case"radial-gradient":i.image=yp(s,e,t,r);break;case"repeating-radial-gradient":i.image=GV(s,e,t,r);break;case"conic-gradient":i.image=mp(s,e,t,r);break;case"repeating-conic-gradient":i.image=BV(s,e,t,r);break}return(a,n)=>i.image(a,n)}function UV(s,e,t,r){for(var i=De.parseStyle(vr(t)),a=De.parseStyle(vr(r)),n=Math.max(i.length,a.length),o=[],l=0,c=n;lDe.join(o.map(g=>{var y={image:g.image(d,v),size:g.size(d,v),x:g.x(d,v),y:g.y(d,v),width:g.width(d,v),height:g.height(d,v),blendMode:g.blendMode(d,v),repeat:g.repeat(d,v)};return y}))}const pd=s=>{var e=[];return s.isAll?e=[s["border-radius"]||"0px",s["border-radius"]||"0px",s["border-radius"]||"0px",s["border-radius"]||"0px"]:e=[s["border-top-left-radius"]||"0px",s["border-top-right-radius"]||"0px",s["border-bottom-right-radius"]||"0px",s["border-bottom-left-radius"]||"0px"],e};function WV(s,e,t,r){for(var i=pd(Jl.parseStyle(t)),a=pd(Jl.parseStyle(r)),n=Math.max(i.length,a.length),o=[],l=0;lo.map(u=>u(c,h)).join(" ")}function XV(s,e,t,r){for(var i=Pr.parseStyle(t),a=Pr.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;lPr.join(o.map(g=>({inset:g.inset(d,v),offsetX:g.offsetX(d,v),offsetY:g.offsetY(d,v),blurRadius:g.blurRadius(d,v),spreadRadius:g.spreadRadius(d,v),color:g.color(d,v)})))}function YV(s,e,t,r){var i={};return t.radius==="closest-side"||t.radius==="farthest-side"||r.radius==="closest-side"||r.radius==="farthest-side"?i.radius=Xt(s,e,t.radius,r.radius):t.radius.unit===r.radius.unit?i.radius=at(s,e,t.radius.value,r.radius.value,t.radius.unit):i.radius=Ke(s,e,t.radius,r.radius,"width","self"),i.x=Ke(s,e,t.x,r.x,"width","self"),i.y=Ke(s,e,t.y,r.y,"height","self"),(a,n)=>{var o=i.radius(a,n),l=i.x(a,n),c=i.y(a,n),h=`${l} ${c}`,u=o+"";return u.includes("closest-side")?u="closest-side":u.includes("farthest-side")&&(u="farthest-side"),o?`${u} at ${h}`:`${h}`}}function KV(s,e,t,r){var i={radiusX:Ke(s,e,t.radiusX,r.radiusX,"width","self"),radiusY:Ke(s,e,t.radiusY,r.radiusY,"height","self"),x:Ke(s,e,t.x,r.x,"width","self"),y:Ke(s,e,t.y,r.y,"height","self")};return(a,n)=>{var o=i.radiusX(a,n),l=i.radiusY(a,n),c=i.x(a,n),h=i.y(a,n);return`${o} ${l} at ${c} ${h}`}}function ZV(s,e,t,r){var i={top:at(s,e,t.top.value,r.top.value,t.top.unit),left:at(s,e,t.left.value,r.left.value,t.left.unit),right:at(s,e,t.right.value,r.right.value,t.right.unit),bottom:at(s,e,t.bottom.value,r.bottom.value,t.bottom.unit),round:Xt(s,e,t.round,r.round),topRadius:at(s,e,t.topRadius.value,r.topRadius.value,t.topRadius.unit),leftRadius:at(s,e,t.leftRadius.value,r.leftRadius.value,t.leftRadius.unit),rightRadius:at(s,e,t.rightRadius.value,r.rightRadius.value,t.rightRadius.unit),bottomRadius:at(s,e,t.bottomRadius.value,r.bottomRadius.value,t.bottomRadius.unit)};return(a,n)=>{var o=i.top(a,n),l=i.right(a,n),c=i.bottom(a,n),h=i.left(a,n),u=i.round(a,n),d=i.topRadius(a,n),v=i.leftRadius(a,n),g=i.bottomRadius(a,n),y=i.rightRadius(a,n),S=[o,l,c,h].join(" "),_=[d,y,g,v].join(" "),L=`${S} ${u&&_.trim()?`round ${_}`:""}`;return L}}function qV(s,e,t,r){for(var i=Math.max(t.length,r.length),a=[],n=0;na.map(u=>`${u.x(c,h)} ${u.y(c,h)}`).join(",")}function QV(s,e,t,r){var i=xe.parseStyle(t),a=xe.parseStyle(r),n={type:Xt(s,e,i.type,i.type),value:Xt(s,e,t,r)};if(i.type==a.type&&i!="none")switch(i.type){case"circle":i.value=xe.parseStyleForCircle(i.value),a.value=xe.parseStyleForCircle(a.value),n.value=YV(s,e,i.value,a.value);break;case"ellipse":i.value=xe.parseStyleForEllipse(i.value),a.value=xe.parseStyleForEllipse(a.value),n.value=KV(s,e,i.value,a.value);break;case"inset":i.value=xe.parseStyleForInset(i.value),a.value=xe.parseStyleForInset(a.value),n.value=ZV(s,e,i.value,a.value);break;case"polygon":i.value=xe.parseStyleForPolygon(i.value),a.value=xe.parseStyleForPolygon(a.value),n.value=qV(s,e,i.value,a.value);break;case"path":i.value=xe.parseStyleForPath(i.value),a.value=xe.parseStyleForPath(a.value);break}return(o,l)=>{var c=n.type(o,l),h=n.value(o,l);return c==="none"?c:`${c}(${h})`}}function JV(s,e,t,r){var i={type:Ps(s,e,t.type,r.type),value:Xt(s,e,t.value,r.value)};switch(t.type){case"blur":i.value=Ke(s,e,t.value,r.value);break;case"grayscale":case"invert":case"brightness":case"contrast":case"opacity":case"saturate":case"sepia":case"hue-rotate":i.value=at(s,e,t.value.value,r.value.value,t.value.unit);break;case"drop-shadow":i.offsetX=Ke(s,e,t.offsetX,r.offsetX,"width","self"),i.offsetY=Ke(s,e,t.offsetY,r.offsetY,"height","self"),i.blurRadius=Ke(s,e,t.blurRadius,r.blurRadius,"width","self"),i.spreadRadius=Ke(s,e,t.spreadRadius,r.spreadRadius,"width","self"),i.color=mn(s,e,t.color,r.color);break}return(a,n)=>{var o=i.type(a,n);return o==="drop-shadow"?{type:i.type(a,n),offsetX:i.offsetX(a,n),offsetY:i.offsetY(a,n),blurRadius:i.blurRadius(a,n),spreadRadius:i.spreadRadius(a,n),color:i.color(a,n)}:{type:i.type(a,n),value:i.value(a,n)}}}function e6(s,e,t,r){for(var i=At.parseStyle(t),a=At.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;lAt.join(o.map(g=>g(d,v)))}function Jn(s,e,t,r,i,a,n,o){var l=[{x:s,y:e},{x:t,y:r},{x:i,y:a},{x:n,y:o}];return(c,h)=>Vo(l,h)}function gd(s,e,t,r){var i={x:at("","",s,t),y:at("","",e,r)};return(a,n)=>{var o={x:i.x(a,n),y:i.y(a,n)};return o}}function eo(s,e,t,r,i,a){var n=[{x:s,y:e},{x:t,y:r},{x:i,y:a}];return(o,l)=>Ru(n,l)}function t6(s){var e=[],t=[];s.forEach(a=>{switch(a.command){case"M":var[S,_]=a.values;t=[S,_];break;case"m":var[g,y]=t,[S,_]=a.values;S+=g,_+=y,t=[S,_];break;case"L":var[g,y]=t,[S,_]=a.values;e.push({command:a.command,values:[g,y,S,_],length:rr(g,y,S,_),interpolate:gd(g,y,S,_)}),t=[S,_];break;case"l":var[g,y]=t,[S,_]=a.values;S+=g,_+=y,e.push({command:a.command,values:[g,y,S,_],length:rr(g,y,S,_),interpolate:gd(g,y,S,_)}),t=[S,_];break;case"C":var[g,y]=t,[n,o,d,v,S,_]=a.values;e.push({command:a.command,values:[g,y,n,o,d,v,S,_],length:za(g,y,n,o,d,v,S,_),interpolate:Jn(g,y,n,o,d,v,S,_)}),t=[S,_];break;case"c":var[g,y]=t,[n,o,d,v,S,_]=a.values;n+=g,d+=g,S+=g,o+=y,v+=y,_+=y,e.push({command:a.command,values:[g,y,n,o,d,v,S,_],length:za(g,y,n,o,d,v,S,_),interpolate:Jn(g,y,n,o,d,v,S,_)}),t=[S,_];break;case"Q":var[g,y]=t,[n,o,S,_]=a.values;e.push({command:a.command,values:[g,y,n,o,S,_],length:Ys(g,y,n,o,S,_),interpolate:eo(g,y,n,o,S,_)}),t=[S,_];break;case"q":var[g,y]=t,[n,o,S,_]=a.values;n+=g,S+=g,o+=y,_+=y,e.push({command:a.command,values:[g,y,n,o,S,_],length:Ys(g,y,n,o,S,_),interpolate:eo(g,y,n,o,S,_)}),t=[S,_];break;case"S":var[g,y]=t,[d,v,S,_]=a.values,L=e[e.length-1];if(["C","c","S","s"].includes(L.command)){var[,,,,l,c,h,u]=L.values,{x:n,y:o}=U.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,d,v,S,_],length:getCubicDist(g,y,n,o,d,v,S,_),interpolate:Jn(g,y,n,o,d,v,S,_)}),t=[S,_];break}case"s":var[g,y]=t,[d,v,S,_]=a.values;d+=g,S+=g,v+=y,_+=y;var L=e[e.length-1];if(["C","c","S","s"].includes(L.command)){var[,,,,l,c,h,u]=L.values,{x:n,y:o}=U.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,d,v,S,_],length:getCubicDist(g,y,n,o,d,v,S,_),interpolate:Jn(g,y,n,o,d,v,S,_)}),t=[S,_];break}case"T":var[g,y]=t,[S,_]=a.values,L=e[e.length-1];if(["Q","q","T","t"].includes(L.command)){var[,,l,c,h,u]=L.values,{x:n,y:o}=U.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,S,_],length:Ys(g,y,n,o,S,_),interpolate:eo(g,y,n,o,S,_)}),t=[S,_]}break;case"t":var[g,y]=t,[S,_]=a.values;S+=g,_+=y;var L=e[e.length-1];if(["Q","q","T","t"].includes(L.command)){var[,,l,c,h,u]=L.values,{x:n,y:o}=U.getReversePoint({x:h,y:u},{x:l,preC1y:c});e.push({command:a.command,values:[g,y,n,o,S,_],length:Ys(g,y,n,o,S,_),interpolate:eo(g,y,n,o,S,_)}),t=[S,_]}break}});var r=0;e.forEach(a=>{r+=a.length});var i=0;return e.forEach(a=>{a.startT=i/r,a.endT=(i+a.length)/r,a.totalLength=r,i+=a.length}),{totalLength:r,interpolateList:e}}function r6(s,e,t,r,i){var[a,n,o,l]=t.split(",").map(y=>y.trim()),c={id:a,distance:p.parse(n||"0%"),rotateStatus:o||"auto",rotate:p.parse(l||"0deg")},h=()=>({}),u=(y,S)=>{var _=0;switch(y){case"angle":_=c.rotate.value;break;case"auto angle":_=S+c.rotate.value;break;case"reverse":_=S+180;break;case"auto":_=S;break}return _},d=0,v=0;if(i){var g=i.searchById(c.id);g&&(d=g.screenX.value,v=g.screenY.value),h=(y,S,_)=>{var L=new Y(g.d||""),{totalLength:I,interpolateList:T}=t6(L.segments),V=c.distance.toPx(I),F=V/I;S=S+F,S>1&&(S-=1);var H=T[0];S===0?H=T[0]:S===1&&(H=T[T.length-1]);var W=T.find(me=>me.startT<=S&&S{var L=(s.transformOrigin||"50% 50% 0px").split(" ").map(pe=>p.parse(pe)),I=L[0].toPx(s.width),T=L[1].toPx(s.height),V=h(y,S,_),F={x:V.x+d-I.value,y:V.y+v-T.value};if(s.setScreenX(F.x),s.setScreenY(F.y),c.rotateStatus!=="element"){var H=V,W=0;S<1&&(W=1/V.totalLength);var le=h(y+W,S+W,_),ce=aa(le.x-H.x,le.y-H.y),me=p.deg(u(c.rotateStatus,ce));s.reset({transform:st.rotate(s.transform,me)})}return F}}function i6(s,e,t,r){for(var i=t.split(" ").map(u=>p.parse(u)),a=r.split(" ").map(u=>p.parse(u)),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function s6(s,e,t,r,i,a){const n=a.$("video").el;let[o,,l]=t.split(":");const c=+(l||1),h=+(o||0)*c;return(u,d)=>{d===0?(n.currentTime=h,n.paused&&n.play()):d===1?(s.reset({currentTime:n.currentTime}),n.pause()):n.paused&&n.play()}}function tc(s,e,t,r){var i=p.parse(t),a=p.parse(r);return(n,o)=>{var l=i.value,c=a.value;return o===0?p.deg(l):o===1?p.deg(c):p.deg(l+(c-l)*n).to(i.unit)}}function a6(s,e,t,r){for(var i=t.split(" ").map(u=>+u),a=r.split(" ").map(u=>+u),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function n6(s,e,t,r){var i=r.length-1,a=0;return(n,o)=>{var l=0;return o===0?l="":o===1?l=r:l=r.substring(a,Math.floor((i-a)*o)),l}}function o6(s,e,t,r){for(var i=wr.parseStyle(t),a=wr.parseStyle(r),n=Math.max(i.length,a.length),o=[],l=0,c=n;lwr.join(o.map(g=>({offsetX:g.offsetX(d,v),offsetY:g.offsetY(d,v),blurRadius:g.blurRadius(d,v),color:g.color(d,v)})))}function l6(s,e,t,r){for(var i={type:Xt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o({type:i.type(h,u),value:i.value.map(d=>d(h,u))})}function c6(s,e,t,r){for(var i={type:Xt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o{var g=i.value.map(S=>S(d,v)),y=i.type(d,v);return(y.includes("matrix")||y.includes("scale"))&&(g=g.map(S=>p.number(S))),{type:y,value:g}}}function h6(s,e,t,r){for(var i={type:Xt(s,e,t.type,r.type)},a=[],n=Math.max(t.value.length,r.value.length),o=0;o{var d={type:i.type(h,u),value:i.value.map(v=>v(h,u))};return d}}function d6(s,e,t,r){for(var i=st.parseStyle(t.trim()),a=st.parseStyle(r.trim()),n=Math.max(i.length,a.length),o=[],l=0;l{var v=st.join(o.map(g=>g(u,d)));return v}}function u6(s,e,t,r){for(var i=t.split(" ").map(u=>p.parse(u)),a=r.split(" ").map(u=>p.parse(u)),n=Math.max(i.length,a.length),o=[],l=0;l{var v=o.map(g=>g(u,d)).join(" ");return v}}function p6(s,e,t,r){for(var i=Math.max(t.length,r.length),a=[],n=t[t.length-1],o=r[r.length-1],l=0;la.map(v=>v(u,d))}function g6(s,e,t,r){for(var i=new Y,a=new Y(t),n=new Y(r),o=Math.max(a.segments.length,n.segments.length),l=[],c=0;c{var g=l.map(S=>({command:S.command(d,v),values:S.values(d,v)})),y=i.joinPath(g);return y}}function f6(s,e,t,r){for(var i=new $s,a=new $s(t),n=new $s(r),o=Math.max(a.segments.length,n.segments.length),l=[],c=a.segments[a.segments.length-1].x,h=a.segments[a.segments.length-1].y,u=n.segments[n.segments.length-1].x,d=n.segments[n.segments.length-1].y,v=0;v{var L=i.joinPoints(l.map(I=>({x:I.x(S,_),y:I.y(S,_)})));return L}}const m6=()=>()=>{};function v6(s){switch(s){case"border-radius":return WV;case"box-shadow":return XV;case"text-shadow":return o6;case"background-image":case"BackgroundImageEditor":return UV;case"filter":case"backdrop-filter":return e6;case"clip-path":return QV;case"transform":return d6;case"transform-origin":return u6;case"perspective-origin":return i6;case"stroke-dasharray":return a6;case"d":return g6;case"points":return f6;case"offset-path":return r6;case"text":return n6;case"playTime":return s6}}function y6(s,e,t,r,i,a,n){var o=i||e;switch(o){case"width":case"x":return Ke(s,e,t,r,"width");case"height":case"y":return Ke(s,e,t,r,"height");case"perspective":case"font-size":case"font-weight":case"text-stroke-width":case"RangeEditor":case"textLength":case"startOffset":return Ke(s,e,t,r,e);case"fill-opacity":case"opacity":case"stroke-dashoffset":case"currentTime":case"NumberRangeEditor":return at(s,e,+t,+r);case"background-color":case"color":case"text-fill-color":case"text-stroke-color":case"fill":case"stroke":case"ColorViewEditor":return mn(s,e,t,r);case"mix-blend-mode":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"SelectEditor":case"lengthAdjust":return Ps(s,e,t,r);case"rotate":return tc(s,e,t,r)}var l=v6(o);return l?l(s,e,t,r,a,n):m6}function b6(s,e,t,r,i,a,n){return y6(s,e,t,r,i,a,n)}class x6 extends up{getDefaultObject(e={}){return super.getDefaultObject(b({comments:[],colors:[],gradients:[],svgfilters:[],svgimages:[],keyframes:[],images:[],imageKeys:[],videos:[],videoKeys:[],audios:[]},e))}get comments(){return this.get("comments")}get colors(){return this.get("colors")}get gradients(){return this.get("gradients")}get svgfilters(){return this.get("svgfilters")}get svgimages(){return this.get("svgimages")}get keyframes(){return this.get("keyframes")}get videos(){return this.get("videos")}get images(){return this.get("images")}set images(e){this.set("images",e)}get imageKeys(){return this.get("imageKeys")}get videoKeys(){return this.get("videoKeys")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new Ga(b({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,r){e.splice(r+(tt.toString(e)).join(` + +`)}copyPropertyList(e,t){var r=b({},e[t]);e.splice(t,0,r)}removePropertyList(e,t){e.splice(t,1)}removeColor(e){this.removePropertyList(this.colors,e)}copyColor(e){this.copyPropertyList(this.colors,e)}sortColor(e,t){this.sortItem(this.colors,e,t)}setColorValue(e,t={}){this.colors[e]=b(b({},this.colors[e]),t)}getColorIndex(e){return this.colors[e]}getColor(e){return this.colors.filter(t=>t.name===e)[0]}addColor(e){return this.colors.push(e),e}createColor(e={}){return this.addColor(e)}removeImage(e){this.removePropertyList(this.images,e),this.refreshImageKeys()}copyImage(e){this.copyPropertyList(this.images,e),this.refreshImageKeys()}sortImage(e,t){this.sortItem(this.images,e,t)}setImageValue(e,t={}){this.images[e]=b(b({},this.images[e]),t),this.refreshImageKeys()}getImageValueById(e,t=""){const r=this.imageKeys[e];return r?r.local:e||t}getImageDataURIById(e){const t=this.imageKeys[e];if(!!t)return t.original}refreshImageKeys(){let e={};this.images.forEach(t=>{e[t.id]=t}),this.reset({imageKeys:e})}addImage(e){return this.images.push(e),this.refreshImageKeys(),e}createImage(e={}){return this.addImage(e)}removeVideo(e){this.removePropertyList(this.videos,e),this.refreshVideoKeys()}copyVideo(e){this.copyPropertyList(this.videos,e),this.refreshVideoKeys()}sortVideo(e,t){this.sortItem(this.videos,e,t)}setVideoValue(e,t={}){this.videos[e]=b(b({},this.videos[e]),t)}getVideoValueById(e){const t=this.videoKeys[e];if(!!t)return t.local}refreshVideoKeys(){let e={};this.videos.forEach(t=>{e[t.id]=t}),this.reset({videoKeys:e})}addVideo(e){return this.videos.push(e),this.refreshVideoKeys(),e}createVideo(e={}){return this.addVideo(e)}removeGradient(e){this.removePropertyList(this.gradients,e)}copyGradient(e){this.copyPropertyList(this.gradients,e)}sortGradient(e,t){this.sortItem(this.gradients,e,t)}setGradientValue(e,t){this.gradients[e]=b(b({},this.gradients[e]),t)}getGradientIndex(e){return this.gradients[e]}getGradient(e){return this.gradients.filter(t=>t.name===e)[0]}addGradient(e={}){return this.gradients.push(e),e}createGradient(e={}){return this.addGradient(e)}getSVGFilterIndex(e){var r;var t=this.svgfilters.map((i,a)=>({id:i.id,index:a})).filter(i=>i.id===e);return t.length?(r=t==null?void 0:t[0])==null?void 0:r.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=b(b({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(e)}getSVGImageIndex(e){var t=this.svgimages.map((r,i)=>({id:r.id,index:i})).filter(r=>r.id===e)[0];return t?t.index:-1}removeSVGImage(e){this.removePropertyList(this.svgimages,e)}copySVGImage(e){this.copyPropertyList(this.svgimages,e)}sortSVGImage(e,t){this.sortItem(this.svgimages,e,t)}setSVGImageValue(e,t){this.svgimages[e]=b(b({},this.svgimages[e]),t)}addSVGImage(e={}){this.svgimages.push(e);var t=this.svgimages.length-1;return t}createSVGImage(e={}){return this.addSVGImage(e)}}var bs;class $6 extends x6{constructor(){super(...arguments);yt(this,bs,[])}getDefaultObject(t={}){return super.getDefaultObject(b({timeline:[],compiledTimeline:{}},t))}get timeline(){return this.get("timeline")}set timeline(t){this.set("timeline",t)}expectJSON(t){return t==="compiledTimeline"?!1:super.expectJSON(t)}setTimelineInfo(t){var r=this.getSelectedTimeline();!r||["speed","iterationCount","direction"].forEach(i=>{ke(t[i])&&(r[i]=t[i])})}compileAll(){var t=this.getSelectedTimeline();bt(this,bs,{}),t&&t.animations.forEach(r=>{r.properties.forEach(i=>{this.compiledTimingFunction(r.id,i.property)})})}searchTimelineOffset(t){var r=this.getSelectedTimeline(),i=[];return r&&r.animations.forEach(a=>{a.properties.forEach(n=>{var o=this.getCompiledTimingFunction(a.id,n.property);i.push(o.find(l=>l.isOnlyTime&&l.startTime<=t?!0:l.startTime<=t&&ta)}getCompiledTimingFunction(t,r){return we(this,bs)[`${t}.${r}`]}compiledTimingFunction(t,r){var i=this,a=this.getTimelineProperty(t,r),n=this.modelManager.get(t),o=`${t}.${r}`;if(a.keyframes.length===1){we(this,bs)[o]=[];return}let l=ge.body().$(`[data-id="${t}"]`),c=a.keyframes.map(h=>h.editor)[0];we(this,bs)[o]=a.keyframes.map((h,u)=>{var d=h,v=a.keyframes[u+1];h.editor=c,v||(v={time:h.time,value:h.value});var g={layer:n,layerElement:l,property:a.property,isOnlyTime:d.time===v.time,startTime:h.time,endTime:v.time,startValue:h.value,endValue:v.value,timing:h.timing,interpolateFunction:b6(n,a.property,h.value,v.value,h.editor,i,l),timingFunction:Zl(h.timing)};return g.func=this.makeTimingFunction(g),g}).filter(h=>h)}makeTimingFunction(t){return r=>{var i=t.endTime-t.startTime,a=1;return i!==0&&(a=(r-t.startTime)/i),t.interpolateFunction(t.timingFunction(a),a,i,t.timingFunction)}}stop(){var t=this.getSelectedTimeline();if(t){var r=t.currentTime;this.searchTimelineOffset(r).forEach(i=>{if(i.property==="playTime"){const a=i.layerElement.$("video");a&&a.el.pause()}})}}seek(t,r=i=>i){var i=this.getSelectedTimeline();if(i){ke(t)&&this.setTimelineCurrentTime(t);var a=i.currentTime;this.searchTimelineOffset(a).filter(r).forEach(n=>{n.property==="offset-path"||n.property==="playTime"?n.func(a):n.layer&&n.layer.reset({[n.property]:n.func(a)})})}}getSelectedTimeline(){var t=this.timeline,r=t.filter(a=>a.selected),i=r.length?r[0]:t[0];return i||null}getKeyframeListReturnArray(){var t=this.getSelectedTimeline(),r=[];return t&&t.animations.forEach(i=>{i.properties.forEach(a=>{r.push.apply(r,a.keyframes)})}),r}getKeyframeList(t){var r=this.getSelectedTimeline();r&&r.animations.forEach(i=>{i.properties.forEach(a=>{a.keyframes.forEach(n=>{t&&t(r,n)})})})}getSelectedTimelineLastTime(){var t=0;return this.getKeyframeList((r,i)=>{t=Math.max(i.time,t)}),t}getSelectedTimelineFirstTime(){var t=Number.MAX_SAFE_INTEGER;return this.getKeyframeList((r,i)=>{t=Math.min(i.time,t)}),t}getSelectedTimelinePrevTime(){var t=this.getSelectedTimelineFirstTime();return this.getKeyframeList((r,i)=>{Jt(r.fps,i.time){Jt(r.fps,i.time)>r.currentTimecode&&(t=Math.min(i.time,t))}),t}setTimelineTitle(t,r){var i=this.timeline.find(a=>a.id===t);i&&(i.title=r)}selectTimeline(t){if(t)this.timeline.forEach(i=>{i.selected=i.id===t});else{var r=this.timeline.filter(i=>i.selected);r.length||this.timeline.length&&(this.timeline.selected=!0)}this.compileAll()}removeAnimation(t){this.timeline=this.timeline.filter(r=>r.id!==t),this.timeline.length&&(this.timeline[0].selected=!0),this.compileAll()}addTimeline(t=60,r="00:00:10:00"){var i=dr(),a=ie(b({id:i,title:"sample"},this.getTimelineLayerInfo(t,r)),{animations:[]});return this.timeline.push(a),this.selectTimeline(i),a}addTimelineLayer(t,r=60,i="00:00:10:00"){var a=this.getSelectedTimeline();if(a||(a=this.addTimeline(r,i)),a.selected=!0,t){var n=a.animations.filter(o=>o.id===t);n[0]||a.animations.push({id:t,properties:[]})}}getTimelineLayerInfo(t=60,r="00:00:10:00"){var i=us(t,r);return{fps:t,speed:1,direction:"normal",iterationCount:1,currentTimecode:Jt(t,0),totalTimecode:Jt(t,i),currentTime:0,totalTime:i,displayStartTime:0,displayEndTime:i}}setTimelineCurrentTime(t){var r=this.getSelectedTimeline(),{fps:i,totalTimecode:a}=r;if(r){var n=t,o=t;+n+""===n&&(n=+n,o=nd(i,n)),o>a&&(o=a);var l=us(i,o);r.currentTime=l,r.currentTimecode=Jt(i,l)}}setDisplayTimeDxRate(t,r,i){var a=this.getSelectedTimeline();if(a){var n=t*a.totalTime,o=r+n,l=i+n;o=Math.max(o,0),o=Math.min(o,l),o===0&&(l=i-r),l=Math.max(l,o),l=Math.min(l,a.totalTime),l===a.totalTime&&(o=a.totalTime-(i-r)),a.displayStartTime=o,a.displayEndTime=l}}setDisplayStartTimeRate(t){var r=this.getSelectedTimeline();r&&(r.displayStartTime=t*r.totalTime)}setDisplayEndTimeRate(t){var r=this.getSelectedTimeline();r&&(r.displayEndTime=t*r.totalTime)}setTimelineCurrentTimeRate(t){var r=this.getSelectedTimeline();if(r){var{displayStartTime:i,displayEndTime:a,fps:n}=r,o=i+(a-i)*t;this.setTimelineCurrentTime(Jt(n,o))}}setTimelineTotalTime(t){var r=this.getSelectedTimeline();if(r){var i=t,a=t;+i+""===i&&(i=+i,a=nd(r.fps,i)),us(r.fps,a)i.id===t)}addTimelineProperty(t,r){this.addTimelineLayer(t);var i=this.getTimelineObject(t);if(i){var a=i.properties.filter(n=>n.property===r);a.length||(i.properties.push({property:r,keyframes:[]}),this.compiledTimingFunction(t,r))}}getTimelineProperty(t,r){var i=this.getSelectedTimeline();if(i){t=t||i.selectedLayerId,r=r||i.selectedProperty;var a=this.getTimelineObject(t);if(a)return a.properties.find(n=>n.property===r)}}setSelectedOffset(t,r,i){var a=this.getSelectedTimeline();if(a){a.selectedLayerId=t,a.selectedProperty=r,a.selectedOffsetTime=i;var n=this.getTimelineProperty();n.keyframes.forEach(o=>{o.selected=o.time===i})}}deleteTimelineKeyframe(t,r,i){var a=this.getTimelineProperty(t,r);a&&(a.keyframes=a.keyframes.filter(n=>n.id!=i))}removeTimelineProperty(t,r){var i=this.getTimelineObject(t);i&&(i.properties=i.properties.filter(a=>a.property!=r))}removeTimeline(t){var r=this.getSelectedTimeline();r&&(r.animations=r.animations.filter(i=>i.id!=t))}setTimelineKeyframeOffsetTime(t,r,i,a){var n=this.getTimelineKeyframeById(t,r,i);n&&(n.time=a,this.compiledTimingFunction(t,r))}setTimelineKeyframeOffsetValue(t,r,i,a=void 0,n=void 0,o=void 0){var l=this.getTimelineKeyframeById(t,r,i);l&&(ke(o)&&(l.time=o),ke(a)&&(l.value=a),ke(n)&&(l.timing=n),this.compiledTimingFunction(t,r))}addTimelineKeyframe({layerId:t,property:r,value:i,timing:a,time:n,editor:o}){this.addTimelineProperty(t,r);var l=this.getSelectedTimeline(),c=this.getTimelineProperty(t,r);if(c){var h=n||l.currentTime,u=c.keyframes.filter(v=>v.time===h);if(!u.length){i=wt(i)||i===""?this.getDefaultPropertyValue(r):i;var d={id:dr(),layerId:t,property:r,time:h,value:i,timing:a||"linear",editor:o};return c.keyframes.push(d),c.keyframes.sort((v,g)=>v.time>g.time?1:-1),this.compiledTimingFunction(t,r),d}}}getDefaultPropertyValue(t){switch(t){case"mix-blend-mode":return"normal";case"rotate":return"0deg";case"box-shadow":return"0px 0px 0px 0px rgba(0, 0, 0, 1)";case"text-shadow":return"0px 0px 0px rgba(0, 0, 0, 1)";case"opacity":return 1;default:return""}}copyTimelineKeyframe(t,r,i=null){var a=this.getTimelineProperty(t,r);if(a){var n=this.getSelectedTimeline(),o=i||n.currentTime,l=a.keyframes.filter(d=>d.timed.time>v.time?-1:1),c=l[0].value+"",h=l[0].timing+"",u=l[0].editor),this.addTimelineKeyframe({layerId:t,property:r,value:c,timing:h,editor:u})}}getTimelineKeyframe(t,r,i){var a=this.getTimelineProperty(t,r);if(a)return a.keyframes.find(n=>n.time===i)}getTimelineKeyframeById(t,r,i){var a=this.getTimelineProperty(t,r);if(a)return a.keyframes.find(n=>n.id===i)}sortTimelineKeyframe(t,r){var i=this.getTimelineProperty(t,r);i&&(i.keyframes.sort((a,n)=>a.time>n.time?1:-1),this.compiledTimingFunction(t,r))}setFps(t){var r=this.getSelectedTimeline();r&&(r.fps=t,r.currentTimecode=Jt(t,r.currentTime),r.totalTimecode=Jt(t,r.totalTime))}}bs=new WeakMap;const fd=Mt();class _6 extends $6{getDefaultTitle(){return"New Project"}get isAbsolute(){return!1}get parent(){return null}get nestedAngle(){return 0}toRootVariableCSS(){var e={};return this.rootVariable.split(";").filter(t=>t.trim()).forEach(t=>{var[r,i]=t.split(":");e[`--${r}`]=i}),e}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"project",name:"new Project",description:"",rootVariable:""},e))}get description(){return this.get("description")}set description(e){this.set("description",e)}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.set("rootVariable",e)}get artboards(){return(this.layers||[]).filter(e=>e.is("artboard"))}get offsetX(){return 0}get offsetY(){return 0}get screenWidth(){return 0}get screenHeight(){return 0}isLayoutItem(){return!1}hasLayout(){return!1}getAbsoluteMatrix(){return Mt()}getTransformMatrix(){return Mt()}resetMatrix(e){const[t,r]=Hi([],er(e.absoluteMatrix,e.localMatrixInverse));e.reset({x:t,y:r})}get rectVerties(){var e;return(e=this.layers)!=null&&e.length?Ra(this.layers):null}get absoluteMatrix(){return fd}get absoluteMatrixInverse(){return fd}get contentBox(){return{left:0,top:0,width:0,height:0}}}class S6 extends qi{getIcon(){return ne.rect}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"rect",name:"New Rect"},e))}getDefaultTitle(){return"Rect"}}var bp=function(s){if(!s||!s.dtype)return!1;var e=new RegExp("function View[0-9]+d(:?"+s.dtype+")+");return e.test(String(s.constructor))},Mc=function(s){return s?s.data!==void 0&&Array.isArray(s.shape)&&s.offset!==void 0&&s.stride!==void 0:!1},vn=function(e){return Array.isArray(e)||ArrayBuffer.isView(e)},P6=bp,w6=Mc,C6=vn;function Yi(s){if(!!s){if(P6(s)||w6(s))return s.dtype==="generic"?Yi.GENERIC_NDARRAY:Yi.NDARRAY;if(C6(s))return Yi.ARRAY_OF_ARRAYS;throw new Error("Unhandled data type. Got type: "+typeof s)}}Yi.ARRAY_OF_ARRAYS="Arr";Yi.NDARRAY="Nd";Yi.GENERIC_NDARRAY="GenNd";Yi.PACKED="PackArr";var yn=Yi,md=vn;function k6(s){return s[0].toUpperCase()+s.slice(1)}var T6=function(s,e,t,r,i,a){var n,o=[],l=!1;for(n=0;n=0;i--)if(a[i]===(Array.isArray(e[i])?e[i][1]:e[i])-1)a[i]=Array.isArray(e[i])?e[i][0]:0;else{a[i]++;break}},wl=yn,Ic=function(s,e,t,r){var i,a=[];switch(wl(r)){case wl.NDARRAY:for(a.push(" var "+e+" = "+t+".data;"),a.push(" var "+e+"Offset = "+t+".offset;"),i=0;i1)throw new Error("Analytical derivative not implemented for rational b-splines with order n = "+V+".")}a&&(s="Basis"+s),n&&(s="Der"+n.join("_")+"_"+s);var F=yd[s];if(r)var H=typeof r=="function"?r:console.log;if(F)return r&&H(bd[s]),F.bind(e);var W=[],le="evaluate"+s,ce=t.point;a&&(ce=function(P,E){for(var N=[],he=0;he "+dt+"[i][1] || a === undefined || isNaN(a)) {"),re(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+dt+"[i][0]+', '+"+dt+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),re(" }"),re("}")),d=0;d "+Re(d)+" + 1) {"),re(" m = 0.5 * (h + "+Re(d)+") | 0;"),re(" if ("+pe([d,"m"])+" > "+ze(d)+") h = m;"),re(" else "+Re(d)+" = m;"),re("}"),nt(` + // Fetch knots for dimension `+d+` +`),l=-y[d]+1;l<=y[d];l++)T[d]==="closed"?l<0?re("var "+Ve([d,l+y[d]-1])+" = "+ai(Re(d)+" < "+-l,pe([d,0])+" + "+pe([d,[je(d),Re(d),l]])+" - "+pe([d,[je(d)]]),pe([d,[Re(d),l]]))+";"):l>0?re("var "+Ve([d,l+y[d]-1])+" = "+ai(Re(d)+" + "+l+" > "+je(d),pe([d,je(d)])+" + "+pe([d,l+" + "+Re(d)+" - "+je(d)])+" - "+pe([d,0]),pe([d,[Re(d),l]]))+";"):re("var "+Ve([d,l+y[d]-1])+" = "+pe([d,[Re(d),l]])+";"):re("var "+Ve([d,l+y[d]-1])+" = "+pe([d,[Re(d),l]])+";");else{for(nt(` + // Directly compute knot interval for dimension `+d+` +`),T[d]==="closed"?re(Re(d)+" = ("+ze(d)+" | 0) % "+je(d)+";"):(re(Re(d)+" = ("+ze(d)+" | 0);"),re("if ("+Re(d)+" < "+y[d]+") "+Re(d)+" = "+y[d]+";"),re("if ("+Re(d)+" > "+je(d)+" - 1) "+Re(d)+" = "+je(d)+" - 1;")),nt(` + // Compute and clamp knots for dimension `+d+` +`),l=-y[d]+1;l<=y[d];l++)v=Ve([d,l+y[d]-1]),re("var "+v+" = "+Re(d)+" + "+l+";");if(T[d]==="clamped")for(l=-y[d]+1;l<=y[d];l++)v=Ve([d,l+y[d]-1]),l<0&&re("if ("+v+" < "+y[d]+") "+v+" = "+y[d]+";"),l>0&&re("if ("+v+" > "+je(d)+") "+v+" = "+je(d)+";");T[d]==="closed"&&(nt(` + // Wrap the B-Spline parameter for closed boundary`),re(ze(d)+" %= "+je(d)+";"))}for(d=0,h=[];d=0;d--)for(h[d]=[y[d],y[d]+1],l=0;ll;c--){var lr=n&&y[d]-l-n[d]<=0;lr?(re("m = 1 / ("+Ve([d,c-l+y[d]-1])+" - "+Ve([d,c-1])+");"),_&&(re("a = ("+ze(d)+" - "+Ve([d,c-1])+") * m;"),re("b = 1 - a;"))):(re("a = ("+ze(d)+" - "+Ve([d,c-1])+") / ("+Ve([d,c-l+y[d]-1])+" - "+Ve([d,c-1])+");"),re("b = 1 - a;")),_&&to(h,function(P){var E=P.slice(),N=P.slice();E[d]=c,N[d]=c-1,lr&&_&&re("h = "+Be(E)+";"),re(Be(E)+" = b * "+Be(N)+" + a * "+Be(E)+";")}),to(h,function(P){var E,N,he,We=P.slice(),kt=P.slice();if(We[d]=c,kt[d]=c-1,lr){var pr=l+1;if(a)E=_?"h * "+Be(kt)+" / "+Be(We)+" * ":"",N=q(We)+(_?" / h":""),he=q(kt)+(_?" / "+Be(kt):""),re(q(We)+" = "+pr+" * "+E+"("+N+" - "+he+") * m;");else{var Wr=We.slice(),Ds=kt.slice();for(u=0;u= 0; "+o+"--) {");for(a=0;a=0;a--)g.push("}");g.push("return this;"),g.push("}");var _=new Function([g.join(` +`),"; return ",y].join(""))();return i&&console.log(g.join(` +`)),xd[e]=_,_.bind(t)},D6=$p,Ml=Do,F6=Ic,Il=yn,El=vn,B6=Ec,$d={},N6=function(s,e,t,r,i){var a=$d[s];if(a)return a.bind(e);var n=e.degree,o=e.knots,l=e.splineDimension,c=e.boundary,h,u,d,v=[],g="support"+s,y=t.knot,S=Ml("t"),_=r?"domain":"d",L=Ml(r?"size":"s"),I=Ml(r?"knotIndex":"i"),T=!0;for(d=0;d "+_+"[i][1] || a === undefined || isNaN(a)) {"),V(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+_+"[i][0]+', '+"+_+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),V(" }"),V("}")),d=0;d "+I(d)+" + 1) {"),V(" m = 0.5 * (h + "+I(d)+") | 0;"),V(" if ("+y([d,"m"])+" > "+S(d)+") h = m;"),V(" else "+I(d)+" = m;"),V("}")):c[d]==="closed"?V(I(d)+" = ("+S(d)+" | 0) % "+L(d)+";"):(V(I(d)+" = ("+S(d)+" | 0);"),V("if ("+I(d)+" < "+n[d]+") "+I(d)+" = "+n[d]+";"),V("if ("+I(d)+" > "+L(d)+" - 1) "+I(d)+" = "+L(d)+" - 1;"));for(d=0,u=[];d0&&!ki(this.knots[0])&&(this.knots=[this.knots]),n=0;n + + +`;class a8 extends Lc{getIcon(){return ne.auto_awesome}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"template",name:"New Template",engine:"dom",template:s8,params:[]},e))}get template(){return this.get("template")}set template(e){this.set("template",e)}get params(){return this.get("params")}set params(e){this.set("params",e)}get engine(){return this.get("engine")}set engine(e){this.set("engine",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Template"}editable(e){switch(e){case"font":return!0}return super.editable(e)}}class n8 extends qi{getIcon(){return ne.title}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"text",name:"New Text",elementType:"p",content:""},e))}get content(){return this.get("content")}set content(e){this.set("content",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Text"}editable(e){switch(e){case"svg-item":case"transform":case"transformOrigin":case"perspective":case"perspectiveOrigin":case"layout":return!1;case"font":case"fontSpacing":case"textStyle":case"textShadow":case"textFill":case"textClip":case"backgroundImage":case"box-model":case"border":case"borderRadius":case"backdropFilter":case"pattern":return!0}return super.editable(e)}}function o8(s){s.registerItem("project",_6),s.registerItem("artboard",EV),s.registerItem("rect",S6),s.registerItem("circle",RV),s.registerItem("image",zV),s.registerItem("text",n8),s.registerItem("boolean-path",jV),s.registerItem("svg-path",fp),s.registerItem("svg-text",r8),s.registerItem("svg-textpath",i8),s.registerItem("template",a8),s.registerItem("polygon",AV),s.registerItem("star",t8),s.registerItem("spline",e8)}var l8=` + + + +`;const Sd=[{itemType:"circle",name:"base",attrs:{backgroundColor:"#ececec"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"black"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"red"}},{itemType:"circle",name:"base",attrs:{backgroundImage:` + background-image: linear-gradient(to right, #ececec, black 100%); + `}},{itemType:"circle",name:"base",attrs:{backgroundImage:` + background-image: linear-gradient(to right, #ececec, black 100%); + `,border:` + border:10px solid black; + `}}];class c8 extends X{template(){return` +
        + `}[G("$css-list")](){return Sd.map((e,t)=>{const r=this.$editor.renderer("svg").render(this.$model.createModel(b({itemType:e.itemType,width:70,height:70},e.attrs),!1));return`
        ${r}
        `})}[z("$css-list .pattern-item")](e){const t=+e.$dt.data("index"),r=Sd[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",r.itemType,r.attrs)}}const Pd=[{itemType:"svg-path",name:"path",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:Y.makeRect(0,0,80,80).d}},{itemType:"svg-path",name:"line",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:Y.makeLine(0,0,80,80).d}},{itemType:"svg-path",name:"line 2",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",d:Y.makeLine(0,80,80,0).d}},{itemType:"svg-path",name:"circle",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,d:Y.makeCircle(0,0,80,80).d}},{itemType:"polygon",name:"polygon - 3",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:3,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,3).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:4,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,4).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:5,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,5).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:6,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,6).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:7,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,7).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:12,originWidth:80,originHeight:80,d:Y.makePolygon(80,80,12).d}},{itemType:"star",name:"star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:Y.makeStar(80,80,5,.5).d}},{itemType:"star",name:"curved star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:Y.makeCurvedStar(80,80,5,.5).d}}];class h8 extends X{template(){return` +
        + `}[G("$svg-list")](){return Pd.map((e,t)=>{let r=e.attrs.d;if(r){const a=Y.fromSVGString(r);if(e.attrs.originWidth)a.scale(60/e.attrs.originWidth,60/e.attrs.originHeight);else{const n=a.rect();a.scale(70/n.width,70/n.height)}r=a.d}const i=this.$editor.renderer("svg").render(this.$model.createModel(ie(b({itemType:e.itemType,width:80,height:80},e.attrs),{d:r}),!1));return`
        ${i}
        `})}[z("$svg-list .pattern-item")](e){const t=+e.$dt.data("index"),r=Pd[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",r.itemType,r.attrs)}}class wd extends X{template(){const e=this.$config.get("editor.design.mode")==="item";return w("div",{class:"elf--texture"},w(cc,{ref:"$tab",selectedValue:e?"svg":"css",onchange:t=>{this.$config.set("inspector.selectedValue",t)}},e?"":w(ja,{value:"css",title:"CSS"},w("object",{refClass:"CSSTextureView",ref:"$css"})),w(ja,{value:"svg",title:"SVG"},w("object",{refClass:"SVGTextureView",ref:"$svg"}))))}}function d8(s){s.registerElement({TextureView:wd,CSSTextureView:c8,SVGTextureView:h8}),s.registerUI("leftbar.tab",{TextureView:{value:"texture",title:"Texture",icon:l8,designMode:["design","item"]}}),s.registerUI("leftbar.tab.texture",{TextureView:wd})}class u8 extends Ne{getTitle(){return this.$i18n("export.property.title")}isFirstShow(){return!0}getClassName(){return"elf--export-property"}getBody(){return` +
        + + +
        +
        + + +
        + `}[z("$svg")](){this.$commands.emit("downloadSVG")}[z("$png")](){this.$commands.emit("downloadPNG")}}function p8(s){s.registerUI("inspector.tab.style",{ExportProperty:u8})}const Ll=[mr.PAD,mr.REFLECT,mr.REPEAT],Vl=20;class g8 extends X{initializeData(){const e=this.$context.selection.current;this.state.currentMatrix=e.matrix,this.state.imageResult=e.createFragmentMatrix(this.state.key),this.state.originalResult=e.createFragmentMatrix(this.state.key)}}class f8 extends g8{[ve("$el .step-point")+_e("moveStepPoint")+Se("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.imageResult.image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const r=(e<0?-1:1)*Math.ceil(se([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case ue.LINEAR:break;case ue.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+r,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+r,1);break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}makeTimingString(e){switch(e.name){case ue.LINEAR:return"";case ue.EASE:case ue.EASE_IN:case ue.EASE_OUT:case ue.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:r}=this.localColorStep;switch(r.name){case ue.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start",this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}));break;case ue.LINEAR:break;case ue.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:r.d}],changeEvent:(i,a)=>{this.localColorStep.timing=Bt(`path(${a})`).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(r)}],changeEvent:(i,a)=>{this.localColorStep.timing=Bt(a).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}}),this.$el.toggleClass("dragging",!1);return}}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`})),this.$el.toggleClass("dragging",!1)}}class m8 extends f8{[tr("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.imageResult.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.imageResult.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.imageResult.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,r=this.state.imageResult.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&(n=r.insertColorStep(i.percent+(100-i.percent)/2)),this.updateColorStepStatus(r,n)}prependColorStep(e){const t=e-1,r=this.state.imageResult.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&(n=r.insertColorStep(i.percent)),this.updateColorStepStatus(r,n)}[ve("$el .point")+_e("movePoint")+Se("moveEndPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=this.state.imageResult;this.pointTarget=e.$dt.data("type"),this.startPoint=this.$viewport.applyVertex(t.startPoint),this.endPoint=this.$viewport.applyVertex(t.endPoint),this.dist=se(this.startPoint,this.endPoint),t.shapePoint&&(this.shapePoint=this.$viewport.applyVertex(t.shapePoint),this.shapeDist=se(this.startPoint,this.shapePoint))}calculateNextPoint(e){if(this.$config.get("bodyEvent").shiftKey){let t,r;this.pointTarget==="start"?(t=this.endPoint,r=e):(t=this.startPoint,r=e);const i=$e([],r,t);let a=rt(i[0],i[1])-90;a=(a+360)%360,a-=a%this.$config.get("fixed.gradient.angle"),e=oe([Pe([],t,[0,-this.dist,0])],Ft(a,t))[0]}return e}moveShapePoint(e,t){const r=this.shapePoint,i=this.calculateNextPoint(Pe([],r,[e,t,0])),a=this.state.currentMatrix.width,n=this.state.currentMatrix.height,o=this.state.imageResult.image;let l,c;switch(o.type){case D.RADIAL:const h=se(this.startPoint,i),u=te([],this.startPoint,this.shapePoint,h/this.shapeDist),[d]=oe([this.$viewport.applyVertexInverse(u)],this.state.currentMatrix.absoluteMatrixInverse);l=p.makePercent(d[0],a),c=p.makePercent(d[1],n),o.reset({x3:l,y3:c});break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}movePoint(e,t){if(this.pointTarget==="shape")return this.moveShapePoint(e,t);const r=this.pointTarget==="start"?this.startPoint:this.endPoint;let i=this.calculateNextPoint(Pe([],r,[e,t,0]));var[a]=oe([this.$viewport.applyVertexInverse(i)],this.state.currentMatrix.absoluteMatrixInverse);const n=this.state.currentMatrix.width,o=this.state.currentMatrix.height,l=this.state.imageResult.image;switch(l.type){case D.RADIAL:var v,g,c,h,u,d;if(this.pointTarget==="start"){v=l.x1.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y1.isPercent()?p.makePercent(a[1],o):p.px(a[1]);const y=this.calculateNextPoint(Pe([],this.endPoint,[e,t,0])),[S]=oe([this.$viewport.applyVertexInverse(y)],this.state.currentMatrix.absoluteMatrixInverse);c=l.x2.isPercent()?p.makePercent(S[0],n):p.px(S[0]),h=l.y2.isPercent()?p.makePercent(S[1],o):p.px(S[1]);const _=this.calculateNextPoint(Pe([],this.shapePoint,[e,t,0])),[L]=oe([this.$viewport.applyVertexInverse(_)],this.state.currentMatrix.absoluteMatrixInverse);u=l.x3.isPercent()?p.makePercent(L[0],n):p.px(L[0]),d=l.y3.isPercent()?p.makePercent(L[1],o):p.px(L[1]),l.reset({x1:v,y1:g,x2:c,y2:h,x3:u,y3:d})}else if(this.pointTarget==="end"){if(this.$config.get("bodyEvent").altKey){const I=se(this.startPoint,i);i=te([],this.startPoint,this.endPoint,I/this.dist);var[a]=oe([this.$viewport.applyVertexInverse(i)],this.state.currentMatrix.absoluteMatrixInverse)}v=p.makePercent(a[0],n),g=p.makePercent(a[1],o),l.reset({x2:v,y2:g});const y=se(this.startPoint,i),S=te([],this.startPoint,i,1/y),_=te([],this.startPoint,oe([S],Ft(90,this.startPoint))[0],l.radialType===xt.CIRCLE?y:this.shapeDist),[L]=oe([this.$viewport.applyVertexInverse(_)],this.state.currentMatrix.absoluteMatrixInverse);u=p.makePercent(L[0],n),d=p.makePercent(L[1],o),l.reset({x3:u,y3:d})}break;case D.LINEAR:var v,g;this.pointTarget==="start"?(v=l.x1.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y1.isPercent()?p.makePercent(a[1],o):p.px(a[1]),l.reset({x1:v,y1:g})):this.pointTarget==="end"&&(v=l.x2.isPercent()?p.makePercent(a[0],n):p.px(a[0]),g=l.y2.isPercent()?p.makePercent(a[1],o):p.px(a[1]),l.reset({x2:v,y2:g}));break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}moveEndPoint(e,t){const r=this.state.imageResult.image,i=this.state.currentMatrix.width,a=this.state.currentMatrix.height;if(e===0&&t===0)switch(r.type){case D.RADIAL:if(this.pointTarget==="start"){switch(r.radialType){case xt.CIRCLE:r.reset({radialType:xt.ELLIPSE});break;case xt.ELLIPSE:const l=se(this.startPoint,this.endPoint),c=te([],this.startPoint,this.endPoint,1/l),h=te([],this.startPoint,oe([c],Ft(90,this.startPoint))[0],l),[u]=oe([this.$viewport.applyVertexInverse(h)],this.state.currentMatrix.absoluteMatrixInverse),d=p.makePercent(u[0],i),v=p.makePercent(u[1],a);r.reset({radialType:xt.CIRCLE,x3:d,y3:v});break}break}default:const o=(Ll.findIndex(l=>r.spreadMethod===l)+1)%Ll.length;r.reset({spreadMethod:Ll[o]});break}this.emit("updateFillEditor",r),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${r}`}))}[ve("$el .colorstep")+_e("moveColorStep")+Se("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const r=this.state.imageResult;switch(r.image.type){case D.RADIAL:case D.LINEAR:this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint);const i=+t.data("x"),a=+t.data("y");this.screenXY=[i,a,0];const n=$e([],this.endPoint,this.startPoint),o=rt(n[0],n[1])-180;this.rotateInverse=Ft(-o,this.startPoint);break}}moveColorStep(e,t){if(this.state.altKey)return;const r=Pe([],this.screenXY,[e,t,0]),[i,a,n]=oe([this.startPoint,this.endPoint,r],this.rotateInverse),o=this.state.imageResult;let l=0,c=0;switch(o.image.type){case D.RADIAL:case D.LINEAR:var[h,u,d]=[i[0],a[0],n[0]],v=Math.abs(h-u);du?l=Math.abs(d-h)/v*100:l=(d-h)/v*100,l=Math.max(0,Math.min(100,l)),c=v;break}const g=this.state.imageResult.image;g.colorsteps[this.$targetIndex].setValue(l,c);const y={color:g.colorsteps[this.$targetIndex].color,percent:g.colorsteps[this.$targetIndex].percent},S=this.state.originalResult.image;S.colorsteps=g.colorsteps.map(_=>_),S.sortColorStep(),this.emit("updateFillEditor",S,y),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${S}`}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const r=this.state.imageResult.image;r.colorsteps[this.$targetIndex].toggleTiming();const i={color:r.colorsteps[this.$targetIndex].color,percent:r.colorsteps[this.$targetIndex].percent};this.emit("updateFillEditor",r,i),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${r}`}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:r,percent:i}=e.colorsteps[t]||{};this.emit("updateFillEditor",e,{color:r,percent:i}),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${e}`})),this.state.hoverColorStep=null}[ve("$el .area-line")](){const e=this.state.originalResult.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Co("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[ca("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),r=this.state.originalResult.image;let i,a,n;switch(r.type){case D.LINEAR:case D.RADIAL:[i,a,n]=oe([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var[o,l,c]=[i[0],a[0],n[0]],h=Math.abs(o-l),u;cl?u=Math.abs(c-o)/h*100:u=(c-o)/h*100,this.state.hoverColorStep=r.pickColorStep(u);break}this.refresh()}}class v8 extends m8{initState(){return{key:"",value:"",isShow:!1}}template(){return w("div",{class:"elf--fill-editor-view"})}updateData(){this.trigger(this.state.onchange,this.state.key,this.state.value)}refresh(){this.state.isShow&&this.load()}[M(it)](){this.refresh()}[M(Lt)+He(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("x","y","width","height","angle","fill","stroke")&&this.refresh()}[M("showFillEditorView")](e={}){this.setState({key:e.key,isShow:!0,onchange:e.onchange}),this.$el.show(),this.$context.commands.emit("push.mode.view","FillEditorView")}[M("hideFillEditorView")](){this.setState({key:"",isShow:!1,onchange:null}),this.$el.hide(),this.$commands.emit("pop.mode.view","FillEditorView")}makeTimingLine(e,t=10,r=0,i=0){switch(e.name){case ue.LINEAR:return"";case ue.STEPS:return w("path",{class:"timing",d:` + M${r+0} ${i+t} + L${r+t*1/3} ${i+t} + L${r+t*1/3} ${i+t*2/3} + L${r+t*2/3} ${i+t*2/3} + L${r+t*2/3} ${i+t*1/3} + L${r+t} ${i+t*1/3} + L${r+t} ${i+0} + `});case ue.PATH:return w("path",{class:"timing",d:Y.fromSVGString(e.d).scale(t,t).flipX().translate(0,t).translate(r,i).d});default:return w("path",{class:"timing",d:` + M${r+0} ${i+t} + C + ${r+e.x1*t} ${i+t-e.y1*t} + ${r+e.x2*t} ${i+t-e.y2*t} + ${r+t} ${i+0} + `})}}makeTimingCircle(e,t,r){const i=r.stickScreenXYInEnd,a=t.stickScreenXYInStart,{timing:n,timingCount:o}=t;let l;switch(n.name){case ue.LINEAR:return"";case ue.STEPS:return l=te([],i,a,.5),w(jt,null,w("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),w("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},n.count));default:return l=te([],i,a,.5),w(jt,null,w("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),w("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},o))}}makeTimingArea(e,t,r,i){const a=r.stickScreenXYInEnd,n=t.stickScreenXYInStart;return w("g",{class:"timing-area"},t.timing.name===ue.LINEAR?"":w("path",{class:"timing-path",d:` + M ${a[0]} ${a[1]} + L ${n[0]} ${n[1]} + `}),this.makeTimingCircle(e,t,r,i))}makeGradientPoint(e,t,r,i,a){const n=Vl,o=$e([],r,t),l=rt(o[0],o[1])-180;return w(jt,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],Vl)),e.map((c,h)=>w("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},w("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:n,height:n,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,n,c.stickScreenXY[0],c.stickScreenXY[1]))),w("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),w("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&w("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&w("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeStickPoint(e,t,r){const i=Vl,a=$e([],r,t),n=rt(a[0],a[1])-180,o=Ft(-n,t),l=Ot([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=oe([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=oe([[h[0]-i/2,h[1]-i*1.5,0],[h[0]-i/2,h[1]-i*1.5+i/2,0],[h[0]+i/2,h[1]-i*1.5+i/2,0]],l),c})}makeRadialCenterPoint(e){let t,r,i,a;t=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),i=this.$viewport.applyVertex(e.shapePoint),a=this.makeStickPoint(e.colorsteps,t,r);let n=null;return this.state.hoverColorStep&&(n=te([],t,r,this.state.hoverColorStep.percent/100)),w("svg",{class:"gradient-editor-area"},w("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"area-line"}),w("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"start-end-line"}),w("path",{d:` + M ${t[0]} ${t[1]} + L ${i[0]} ${i[1]} + `,class:"normal-line"}),this.makeGradientPoint(a,t,r,i,n))}makeLinearCenterPoint(e){let t,r,i;t=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),i=this.makeStickPoint(e.colorsteps,t,r);let a=null;return this.state.hoverColorStep&&(a=te([],t,r,this.state.hoverColorStep.percent/100)),w("svg",{class:"gradient-editor-area"},w("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"area-line"}),w("path",{d:` + M ${t[0]} ${t[1]} + L ${r[0]} ${r[1]} + `,class:"start-end-line"}),this.makeGradientPoint(i,t,r,null,a))}makeCenterPoint(e){const{image:t}=e;switch(t.type){case D.LINEAR:return this.makeLinearCenterPoint(e);case D.RADIAL:return this.makeRadialCenterPoint(e)}return""}[G("$el")+Ee](){if(!this.state.isShow)return"";const e=this.$context.selection.current;if(!e)return"";const t=e.createFragmentMatrix(this.state.key);this.state.result=t,this.state.originalResult=e.createFragmentMatrix(this.state.key);const r=t.image;let i,a;switch(r.type){case D.LINEAR:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),a=$e([],this.state.endPoint,this.state.startPoint),i=rt(a[0],a[1])-180,this.state.rotateInverse=Ft(-i,this.state.startPoint);break;case D.RADIAL:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.shapePoint=this.$viewport.applyVertex(t.shapePoint),a=$e([],this.state.endPoint,this.state.startPoint),i=rt(a[0],a[1])-180,this.state.rotateInverse=Ft(-i,this.state.startPoint);break}return w("div",null,this.makeCenterPoint(t))}}function y8(s){s.registerUI("canvas.view",{FillEditorView:v8})}const b8=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class x8 extends Ne{getTitle(){return this.$i18n("filter.property.title")}hasKeyframe(){return!0}isFirstShow(){return!0}afterRender(){this.show()}getKeyframeProperty(){return"filter"}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
        "}getTools(){return` + + + `}[z("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[G("$filterSelect")](){var e=b8.map(i=>({title:this.$i18n(`filter.property.${i}`),value:i})),t=this.getSVGFilterList(),r=[];return t.length?r=[...e,{title:"-------",value:""},...t]:r=[...e],r.map(i=>{var{title:a,value:n}=i;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(r=>{var i=r.id;return{title:`svg - #${i}`,value:i}})),t}[G("$body")+Ee](){var e=this.$context.selection.current||{},t=e.filter;return O("FilterEditor",{ref:"$filterEditor",key:"filter",value:t,onchange:"changeFilterEditor"})}[K("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"filter"}[M(Oe)+fe("checkShow")+He(100)](){this.refresh()}[M("refreshSVGArea")+He(100)](){this.load("$filterSelect")}}function $8(s){s.registerUI("inspector.tab.style",{FilterProperty:x8})}function _8(s){s.registerUI("inspector.tab.style",{FontProperty:Ro.create({title:s.$i18n("font.property.title"),editableProperty:"font",preventUpdate:!0})}),s.registerInspector("font",e=>[{key:"font-family",editor:"SelectEditor",editorOptions:{compact:!0,label:"font_download",options:["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"]},defaultValue:e.fontFamily||""},{type:"column",size:[1,1],gap:10,columns:[{key:"font-size",editor:"NumberInputEditor",editorOptions:{label:"format_size",compact:!0,min:8,max:1e3,step:1},defaultValue:p.parse(e.fontSize).value,convert:(t,r)=>p.px(r)},{key:"padding",editor:"NumberInputEditor",editorOptions:{label:"padding",compact:!0,min:8,max:1e3,step:1},defaultValue:p.parse(e.paddingTop).value,convert:(t,r)=>p.px(r)}]},{type:"column",size:[1,1],columns:[{key:"color",editor:"ColorViewEditor",editorOptions:{compact:!0},defaultValue:e.color||"#000"},{key:"font-weight",editor:"NumberInputEditor",editorOptions:{label:"format_bold",compact:!0,min:100,max:900,step:100},defaultValue:e.fontWeight||400}]},{type:"column",size:[1,1,1],gap:10,columns:[{key:"text-indent",editor:"NumberInputEditor",editorOptions:{label:"format_indent",min:-100,max:100,step:1,compact:!0},defaultValue:p.parse(e.textIndent).value,convert:(t,r)=>p.px(r)},{key:"line-height",editor:"NumberInputEditor",editorOptions:{label:"format_line_spacing",min:0,max:10,step:.01,compact:!0},defaultValue:e.lineHeight||1.2},{key:"letter-spacing",editor:"NumberInputEditor",editorOptions:{label:"space",min:-100,max:100,step:1,compact:!0},defaultValue:p.parse(e.letterSpacing).value,convert:(t,r)=>p.px(r)}]}])}class S8 extends X{initState(){var r;const e=tt.parseImage(this.props.value||"transparent")||Ai.create(),t=(r=e.colorsteps[this.props.index])==null?void 0:r.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(i=>this.$context.selection.isSelectedColorStep(i.id))),{cachedRect:null,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({cachedRect:null,image:tt.parseImage(e)},!1),this.refresh()}template(){return` +
        +
        +
        +
        +
        +
        +
        +
        +
        + ${O("SelectEditor",{label:"Pattern",ref:"$patternUnits",options:["userSpaceOnUse"],key:"patternUnits",onchange:"changeKeyValue"})} +
        + +
        +
        + `}getImageFieldValue(e,t){var r=e[t];if(wt(r))switch(t){case"cx":case"cy":case"r":case"fx":case"fy":return"50%";case"x1":case"y1":case"y2":case"fr":case"imageX":case"imageY":return"0%";case"x2":case"patternWidth":case"patternHeight":case"imageWidth":case"imageHeight":return"100%"}return r}[Tr("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(r=>{this.$commands.emit("updateImageAssetItem",r,i=>{this.trigger("setImageUrl",i)})})}refreshFieldValue(){this.children.$cx.setValue(this.state.image.cx),this.children.$cy.setValue(this.state.image.cy),this.children.$r.setValue(this.state.image.r),this.children.$fx.setValue(this.state.image.fx),this.children.$fy.setValue(this.state.image.fy),this.children.$fr.setValue(this.state.image.fr),this.children.$patternUnits.setValue(this.state.image.patternUnits),this.children.$patternWidth.setValue(this.state.image.patternWidth),this.children.$patternHeight.setValue(this.state.image.patternHeight),this.children.$imageX.setValue(this.state.image.imageX),this.children.$imageY.setValue(this.state.image.imageY),this.children.$imageWidth.setValue(this.state.image.imageWidth),this.children.$imagenHeight.setValue(this.state.image.imageHeight)}getFieldValue(e){return p.parse(this.getImageFieldValue(this.state.image,e))}getRectRate(e,t,r){var{width:i,height:a,x:n,y:o}=e;n>t?t=n:n+ir?r=o:o+ai&&(a=i);var n=(a-r)/t.width*100;this.state.image.insertColorStep(n),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[ae("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[ae("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[G("$stepList")](){var e=this.state.image.colorsteps||[];return e.map(t=>{var r=this.$context.selection.isSelectedColorStep(t.id)?"selected":"";return` +
        +
        + ${Math.floor(t.percent*10)/10} +
        +
        +
        `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[tr("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t+1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&this.state.image.insertColorStep(i.percent+(100-i.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(n=>n.id===e),r=t-1,i=this.state.image.colorsteps[t],a=this.state.image.colorsteps[r];a?this.state.image.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&this.state.image.insertColorStep(i.percent),this.refresh(),this.updateData(),this.doFocus(e)}[ve("$stepList .step")+_e()+Se()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),r=t.x,i=t.right,a=this.startXY.x+e;ai&&(a=i);var n=(a-r)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(n=Math.floor(n)),this.currentStep.percent=n,this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${ur.toCSSColorString(e.colorsteps)})`}[K("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.setColor(e),this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[M("setImageUrl")](e,t){this.state.image&&(this.state.url=e,this.state.image.reset({url:e,datauri:t}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}class P8 extends Lr{getTitle(){var e;return O("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||D.STATIC,onchange:"changeTabType",options:[{value:D.STATIC,text:"Static"},{value:D.LINEAR,text:"Linear Gradient"},{value:D.RADIAL,text:"Radial Gradient"},{value:D.CONIC,text:"Conic Gradient"},{value:D.REPEATING_LINEAR,text:"Repeating Linear Gradient"},{value:D.REPEATING_RADIAL,text:"Repeating Radial Gradient"},{value:D.REPEATING_CONIC,text:"Repeating Conic Gradient"},{value:D.URL,text:"Image"}]})}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` +
        +
        +
        +
        +
        +
        + ${O("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} +
        +
        + ${O("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} + ${O("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} +
        +
        +
        + + `}getColorString(){var e="";return this.state.image instanceof ur&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[ae("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}[G("$gradientEditor")+Ee](){var e;return((e=this.state.image)==null?void 0:e.type)===D.URL?"":O("GradientEditor",{ref:"$g",value:`${this.state.image?this.state.image.toString():""}`,index:this.state.selectColorStepIndex,onchange:"changeGradientEditor"})}[M("updateGradientEditor")](e,t){this.state.image=ct(e)?De.parseImage(e):e,this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(r=>r.color===t.color&&r.percent===t.percent),this.children.$color.setValue(t.color),this.refresh()}[K("changeGradientEditor")](e){this.state.image=ct(e)?De.parseImage(e):e,this.updateTitle(),this.updateData()}[K("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[K("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[K("changeImageUrl")](e,t){this.state.image&&(this.state.image.reset({url:t}),this.trigger("changeGradientEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[M("showGradientPickerPopup")](e,t,r){e.changeEvent=e.changeEvent||"changeFillPopup",e.image=e.gradient,e.params=t,this.showByRect(this.makeRect(248,560,r)),this.setState(e),this.updateTitle(),this.emit("showGradientEditorView",{index:e.index})}[M("hideGradientickerPopup")](){this.hide(),this.emit("hideGradientEditorView")}onClose(){this.emit("hideGradientEditorView")}[M("selectColorStep")](e){this.children.$color.setValue(e)}[M("changeColorStep")](e={}){this.state.image.reset(b({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class w8 extends Lr{getTitle(){var e;return O("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||D.STATIC,onchange:"changeTabType",options:[{value:D.STATIC,text:"Static"},{value:D.LINEAR,text:"Linear Gradient"},{value:D.RADIAL,text:"Radial Gradient"},{value:D.URL,text:"Image"}]})}initState(){return{image:Ai.create()}}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` +
        +
        +
        +
        +
        +
        + ${O("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} +
        +
        + ${O("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} + ${O("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} +
        +
        +
        + + `}[ae("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}getColorString(){var e="";return this.state.image instanceof ur&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[G("$gradientEditor")](){var e;return((e=this.state.image)==null?void 0:e.type)===D.URL?"":O("FillEditor",{ref:"$g",value:`${this.state.image}`,index:this.state.selectColorStepIndex,onchange:"changeFillEditor"})}[M("updateFillEditor")](e,t=void 0){this.state.image=ct(e)?tt.parseImage(e):e,t&&(this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(r=>r.color===t.color&&r.percent===t.percent),this.children.$color.setValue(t.color)),this.refresh()}[K("changeFillEditor")](e){this.state.image=ct(e)?tt.parseImage(e):e,this.updateTitle(),this.updateData()}[K("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[K("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[K("changeImageUrl")](e){this.state.image&&(this.state.image.reset({url:e}),this.trigger("changeFillEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[M("showFillPickerPopup")](e,t,r){e.changeEvent=e.changeEvent||"changeFillPopup",e.params=t,this.showByRect(this.makeRect(248,560,r)),this.setState(e),this.updateTitle(),e.image.isGradient()&&this.trigger("selectColorStep",e.image.colorsteps[0].color),this.emit("showFillEditorView",{key:e.key})}[M("hideFillPickerPopup")](){this.hide(),this.emit("hideFillEditorView")}onClose(){this.emit("hideFillEditorView")}[M("selectColorStep")](e){this.children.$color.setValue(e)}[M("changeColorStep")](e={}){this.state.image.reset(b({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class C8 extends X{initState(){return{index:this.props.index,label:this.props.label,simple:this.props.simple==="true",image:tt.parseImage(this.props.value||this.props.image||"transparent")}}get fillId(){return this.id+"fill"}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.state.index)}getValue(){return this.state.image.toString()}setValue(e){this.setState({image:tt.parseImage(e)})}[ae("$fillView")](){var e=this.state.image;return e?{innerHTML:e.toSVGString(this.fillId,{width:20,height:20,sizeType:"percent"})}:{innerHTML:""}}[ae("$fillColor")](){var e=this.state.image;return e?{fill:e.toFillValue(this.fillId)}:{fill:"transparent"}}[ae("$colors")](){var e=this.state.image;if(!e)return{fill:"transparent"};var t=e.type!="url"?`${e.colorsteps[0].color}`:"transparent";return[D.LINEAR,D.RADIAL].includes(e.type)&&(t=e.colorsteps.map(r=>``).join("")),{innerHTML:`
        ${t}
        `}}template(){var{label:e,simple:t}=this.state,r=e?"has-label":"";return` +
        + ${e?``:""} +
        +
        +
        + + + + + +
        +
        +
        +
        +
        + `}[z()](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showFillPickerPopup",{instance:this,key:this.props.key,changeEvent:"changeFillSingle",image:this.state.image},null,this.$el.rect())}[M("changeFillSingle")](e){this.updateData({image:tt.parseImage(e)}),this.refresh()}}class k8 extends X{initState(){return{index:this.props.index,image:this.props.image,color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ae("$miniView")](){const e=this.$context.selection.currentProject;let t;if(this.state.image.type===D.URL){const r=e.getImageValueById(this.state.image.url);t=this.state.image.toString(r)}else t=this.state.image.toCSSString();return{style:{"background-image":t}}}template(){return` +
        +
        +
        +
        +
        +
        +
        + `}[z("$preview")](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showGradientPickerPopup",{instance:this,changeEvent:"changeGradientSingle",index:this.state.index,gradient:this.state.image},null,this.$el.rect())}[M("changeGradientSingle")](e){var r;e=De.parseImage(e);const t=(r=this.$context.selection.current.getBackgroundImage(this.state.index))==null?void 0:r.image;switch(t.type){case D.RADIAL:case D.REPEATING_RADIAL:e.reset({radialPosition:t.radialPosition||["50%","50%"],radialType:t.radialType||xt.CIRCLE});break;case D.CONIC:case D.REPEATING_CONIC:e.reset({angle:t.angle||0,radialPosition:t.radialPosition||["50%","50%"]});break;case D.LINEAR:case D.REPEATING_LINEAR:case D.STATIC:e.reset({angle:t.angle||0});break}this.updateData({image:e}),this.refresh()}}function T8(s){s.registerElement({FillSingleEditor:C8,FillEditor:S8,GradientSingleEditor:k8}),s.registerAlias({"fill-single":"FillSingleEditor",fill:"FillEditor","gradient-single":"GradientSingleEditor"}),s.registerUI("popup",{FillPickerPopup:w8,GradientPickerPopup:P8})}var Ol=["circle","circle farthest-corner","circle closest-side","circle closest-corner","circle farthest-side","ellipse","ellipse farthest-corner","ellipse closest-side","ellipse closest-corner","ellipse farthest-side"],jl=["no-repeat","repeat","repeat-x","repeat-y","space","round"];const Ca=20;class M8 extends X{initializeData(){const e=this.$context.selection.current.backgroundImage,t=vr(e);this.state.backgroundImages=De.parseStyle(t),this.state.backImages=De.parseStyle(t);const r=this.$context.selection.current;this.state.gradient=this.state.backImages[this.state.index],this.state.contentBox=r.contentBox,this.state.backgroundImageMatrix=r.createBackgroundImageMatrix(this.state.index)}updateData(){var e=Ze(De.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:e}))}}class I8 extends M8{[ve("$el .step-point")+_e("moveStepPoint")+Se("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.backgroundImages[this.state.index].image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const r=(e<0?-1:1)*Math.ceil(se([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case ue.LINEAR:break;case ue.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+r,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+r,1);break}this.updateData()}makeTimingString(e){switch(e.name){case ue.LINEAR:return"";case ue.EASE:case ue.EASE_IN:case ue.EASE_OUT:case ue.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:r}=this.localColorStep;switch(r.name){case ue.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start";break;case ue.LINEAR:break;case ue.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:r.d}],changeEvent:(i,a)=>{this.localColorStep.timing=Bt(`path(${a})`).parsed,this.updateData()}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(r)}],changeEvent:(i,a)=>{this.localColorStep.timing=Bt(a).parsed,this.updateData()}}),this.$el.toggleClass("dragging",!1);return}}this.updateData(),this.$el.toggleClass("dragging",!1)}}class E8 extends I8{[ve("$el .resizer")+Cr+_e("calculateMovedResizer")+Se("calculateMovedEndResizer")+Le](e){this.state.$target=e.$dt,this.$el.toggleClass("dragging",!0),this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e),this.isShiftKey=e.shiftKey}calculateMovedResizer(){const e=this.$viewport.getWorldPosition(),t=Wt(this.initMousePoint),r=e,i=this.$context.selection.current.absoluteMatrixInverse,[a,n]=oe([t,r],i),o=$e([],n,a),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x,l.y,this.state.contentBox,o[0],o[1],{shiftKey:this.$config.get("bodyEvent").shiftKey});this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y,width:h.width,height:h.height}),this.updateData()}calculateMovedEndResizer(){this.updateData(),this.$el.toggleClass("dragging",!1)}[ve("$el .back-rect")+Cr+_e("calculateMovedRect")+Se("calculateMovedEndRect")+Le](e){this.state.$target=e.$dt,this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e)}calculateMovedRect(){const e=this.$viewport.getWorldPosition(),t=Wt(this.initMousePoint),r=e,i=this.$context.selection.current.absoluteMatrixInverse,[a,n]=oe([t,r],i),o=$e([],n,a),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x+o[0],l.y+o[1],this.state.contentBox);this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y}),this.updateData()}calculateMovedEndRect(e,t){if(e==0&&t===0){const r=jl.indexOf(this.state.gradient.repeat);this.state.backgroundImages[this.state.index].repeat=jl[(r+1)%jl.length]}this.updateData()}}class L8 extends E8{[ve("$el .gradient-angle .rotate")+Cr+_e("calculateMovedAngle")+Se("calculatedMovedEndAngle")+Le](e){this.state.$target=e.$dt,this.initializeData(),this.$el.toggleClass("dragging",!0),this.state.centerX=+this.state.$target.data("center-x"),this.state.centerY=+this.state.$target.data("center-y"),this.state.startX=+this.state.$target.attr("cx"),this.state.startY=+this.state.$target.attr("cy"),this.state.$target.toggleClass("moved")}calculateMovedAngle(e,t){const r=[this.state.centerX,this.state.centerY,0],i=[this.state.startX,this.state.startY,0],n=dc(i,r,[e,t,0]);let o=Math.floor(this.state.gradient.image.angle+n);this.$config.get("bodyEvent").shiftKey&&(o-=o%this.$config.get("fixed.gradient.angle")),this.state.backgroundImages[this.state.index].image.angle=o,this.updateData()}calculatedMovedEndAngle(){this.state.$target.toggleClass("moved"),this.$el.toggleClass("dragging",!1),this.updateData()}}class V8 extends L8{[tr("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.lastBackgroundMatrix.backgroundImage.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,r=this.state.lastBackgroundMatrix.backgroundImage.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(i.percent+(a.percent-i.percent)/2):i.percent!==100&&(n=r.insertColorStep(i.percent+(100-i.percent)/2)),this.updateColorStepStatus(r,n)}prependColorStep(e){const t=e-1,r=this.state.lastBackgroundMatrix.backgroundImage.image,i=r.colorsteps[e],a=r.colorsteps[t];let n=-1;a?n=r.insertColorStep(a.percent+(i.percent-a.percent)/2):i.percent!==0&&(n=r.insertColorStep(i.percent)),this.updateColorStepStatus(r,n)}[ve("$el .colorstep")+_e("moveColorStep")+Se("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const r=this.state.backgroundImageMatrix;switch(r.backgroundImage.image.type){case D.LINEAR:case D.REPEATING_LINEAR:this.centerPosition=this.$viewport.applyVertex(r.centerPosition),this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint),this.screenXY=this.$viewport.applyVertex(r.colorsteps[this.$targetIndex].pos),this.rotateInverse=Ft(-this.state.gradient.image.angle,this.centerPosition);break;case D.RADIAL:case D.REPEATING_RADIAL:this.centerPosition=this.$viewport.applyVertex(r.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(r.startPoint),this.endPoint=this.$viewport.applyVertex(r.endPoint),this.screenXY=this.$viewport.applyVertex(r.colorsteps[this.$targetIndex].pos);const i=$e([],this.endPoint,this.startPoint),a=rt(i[0],i[1])-180;this.rotateInverse=Ft(-a,this.centerPosition);break;case D.CONIC:case D.REPEATING_CONIC:this.centerPosition=this.$viewport.applyVertex(r.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(r.shapePoint),this.newStartPoint=$e([],this.startPoint,this.centerPosition),this.newStartAngle=rt(this.newStartPoint[0],this.newStartPoint[1]);const n=+t.data("x"),o=+t.data("y");this.screenXY=[n,o,0],this.endPoint=this.$viewport.applyVertex(r.endPoint),this.rotateInverse=Mt();break}}moveColorStep(e,t){if(this.state.altKey)return;const r=Pe([],this.screenXY,[e,t,0]),[i,a,n]=oe([this.startPoint,this.endPoint,r],this.rotateInverse),o=this.state.backgroundImageMatrix;let l=0,c=0;switch(o.backgroundImage.image.type){case D.LINEAR:case D.REPEATING_LINEAR:var[d,v,g]=[i[1],a[1],n[1]],y=Math.abs(d-v);if(dg)l=Math.abs(g-d)/y*100;else{var h=Math.abs(d-g),u=Math.abs(v-g);l=h/(u+h)*100}l=Math.max(0,Math.min(100,l)),c=se(this.startPoint,this.endPoint);break;case D.RADIAL:case D.REPEATING_RADIAL:var[d,v,g]=[i[0],a[0],n[0]],y=Math.abs(d-v);gv?l=Math.abs(g-d)/y*100:l=(g-d)/y*100,l=Math.max(0,Math.min(100,l)),c=se(this.startPoint,this.endPoint);break;case D.CONIC:case D.REPEATING_CONIC:const T=$e([],r,this.centerPosition);let V=rt(T[0],T[1]);this.$config.get("bodyEvent").shiftKey&&(V-=V%this.$config.get("fixed.gradient.angle")),l=(V-this.newStartAngle)/360*100,l=(l+100)%100,c=100;break}const S=this.state.gradient.image;S.colorsteps[this.$targetIndex].setValue(l,c);const _={color:S.colorsteps[this.$targetIndex].color,percent:S.colorsteps[this.$targetIndex].percent},L=this.state.backgroundImages[this.state.index].image;L.colorsteps=S.colorsteps.map(T=>T),L.sortColorStep(),this.emit("updateGradientEditor",L,_);var I=Ze(De.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:I}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const i=this.state.backgroundImages[this.state.index].image;i.colorsteps[this.$targetIndex].toggleTiming();const a={color:i.colorsteps[this.$targetIndex].color,percent:i.colorsteps[this.$targetIndex].percent};this.emit("updateGradientEditor",i,a);var r=Ze(De.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:r}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:r,percent:i}=e.colorsteps[t]||{};this.emit("updateGradientEditor",e,{color:r,percent:i}),this.state.backgroundImages[this.state.index].image=e;var a=Ze(De.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:a})),this.state.hoverColorStep=null}[ve("$el .area-line")](){const e=this.state.lastBackgroundMatrix.backgroundImage.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[Co("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[ca("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),r=this.state.lastBackgroundMatrix.backgroundImage.image;let i,a,n;switch(r.type){case D.LINEAR:case D.REPEATING_LINEAR:[i,a,n]=oe([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var u=0,[o,l,c]=[i[1],a[1],n[1]],h=Math.abs(o-l);if(oc)u=Math.abs(c-o)/h*100;else{const S=Math.abs(o-c),_=Math.abs(l-c);u=S/(_+S)*100}this.state.hoverColorStep=this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(u);break;case D.RADIAL:case D.REPEATING_RADIAL:[i,a,n]=[this.state.startPoint,this.state.endPoint,t];var u=0,[o,l,c]=[i[0],a[0],n[0]],h=Math.abs(o-l);c=180?1:0)&&(d-=180);var[g]=oe([te([],e,Pe([],e,[-1,0,0]),c)],Ft(d,e));switch(o.name){case ue.LINEAR:return"";case ue.STEPS:return w(jt,null,w("circle",{class:"step-point","data-colorstep-index":t,cx:g[0],cy:g[1],r:7}),w("text",{x:g[0],y:g[1],dy:4,"text-anchor":"middle"},o.count));default:return w(jt,null,w("circle",{class:"step-point","data-colorstep-index":t,cx:g[0],cy:g[1],r:7}),w("text",{x:g[0],y:g[1],dy:4,"text-anchor":"middle"},l))}}makeTimingArea(e,t,r,i){const a=r.stickScreenXYInEnd,n=t.stickScreenXYInStart;return w("g",{class:"timing-area"},t.timing.name===ue.LINEAR?"":w("path",{class:"timing-path",d:` + M ${a[0]} ${a[1]} + L ${n[0]} ${n[1]} + `}),this.makeTimingCircle(e,t,r,i))}getRealAngle(e){return e<0?360+e:e}makeConicTimingArea(e,t,r,i,a,n,o){const l=i.stickScreenXY,c=r.stickScreenXY,h=rt(...$e([],l,e))+o,u=rt(...$e([],c,e))+o,d=360-h,g=Math.abs(d+u)%360>=180?1:0;return w("g",{class:"timing-area"},r.timing.name===ue.LINEAR?"":w(jt,null,w("path",{class:"timing-path",d:` + M ${l[0]} ${l[1]} + A ${n} ${n} 0 ${g} 1 ${c[0]} ${c[1]} + `})),this.makeConicTimingCircle(e,t,r,i,n))}makeGradientPoint(e,t,r,i,a){const n=Ca,o=$e([],r,t),l=rt(o[0],o[1])-180;return w(jt,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],Ca)),e.map((c,h)=>w("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},w("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:n,height:n,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,n,c.stickScreenXY[0],c.stickScreenXY[1]))),w("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),w("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&w("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&w("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeConicGradientPoint(e,t,r,i,a,n,o){const l=Ca;return w(jt,null,e.map((c,h)=>h===0?"":this.makeConicTimingArea(t,h,c,e[h-1],Ca,n,o)),e.map((c,h)=>{const u=rt(...$e([],c.screenXY,t))-180;return w("g",{transform:`rotate(${u} ${c.screenXY[0]} ${c.screenXY[1]})`},w("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.screenXY[0]-l/2,y:c.screenXY[1]-l/2,width:l,height:l,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeConicTimingLine(c.timing,l,c.screenXY[0],c.screenXY[1],o))}),w("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),w("circle",{class:"point","data-type":"end",cx:r[0],cy:r[1]}),i&&w("circle",{class:"point","data-type":"shape",cx:i[0],cy:i[1]}),a&&w("circle",{class:"hover-colorstep",r:"5",cx:a[0],cy:a[1],fill:this.state.hoverColorStep.color}))}makeGradientRect(e){const t=this.$viewport.applyVerties(e.backVerties);return w(jt,null,w("div",{class:"gradient-rect"},w("svg",null,w("path",{class:"back-rect",d:` + M ${t[0][0]} ${t[0][1]} + L ${t[1][0]} ${t[1][1]} + L ${t[2][0]} ${t[2][1]} + L ${t[3][0]} ${t[3][1]} + Z + `}))),w("div",{class:"resizer","data-direction":"bottom-right",style:{left:p.px(t[2][0]),top:p.px(t[2][1])}}))}makeCenterPoint(e){const{image:t}=e.backgroundImage;switch(t.type){case D.LINEAR:case D.REPEATING_LINEAR:return this.makeLinearCenterPoint(e);case D.RADIAL:case D.REPEATING_RADIAL:return this.makeRadialCenterPoint(e);case D.CONIC:case D.REPEATING_CONIC:return this.makeConicCenterPoint(e)}return""}makeConicCenterPoint(e){const{image:t}=e.backgroundImage;let r,i,a,n,o,l;r=this.$viewport.applyVertex(e.radialCenterPosition),a=this.$viewport.applyVertex(e.startPoint),n=this.$viewport.applyVertex(e.endPoint),o=this.$viewport.applyVertex(e.shapePoint);let c=se(a,n)/2;c<50&&(c=50),l=e.colorsteps.map(v=>{v.screenXY=this.$viewport.applyVertex(v.pos);const g=se(v.screenXY,a);gc&&(v.screenXY=te([],a,v.screenXY,(c+20)/g)),v.stickScreenXY=Wt(v.screenXY);const y=$e([],v.screenXY,a);return v.angle=rt(y[0],y[1]),v}),r=this.$viewport.applyVertex(e.radialCenterPosition);const h=this.$viewport.applyVertex(e.shapePoint);i=te([],r,te([],r,h,1/se(r,h)),c+50);const u=te([],i,r,1);let d=null;if(this.state.hoverColorStep){const v=this.state.hoverColorStep.percent*3.6,g=se(r,o);[d]=oe([te([],r,o,(c+20)/g)],Ft(v,r))}return w(jt,null,w("div",{class:"gradient-position center","data-radial-type":t.radialType,style:{left:p.px(r[0]),top:p.px(r[1])}}),w("svg",{class:"gradient-angle"},w("circle",{class:"size",cx:a[0],cy:a[1],r:c}),w("circle",{class:"area-line",cx:a[0],cy:a[1],r:c}),w("path",{class:"stick",d:` + M ${u[0]} ${u[1]} + L ${i[0]} ${i[1]} + `}),w("circle",{class:"rotate",cx:i[0],cy:i[1],r:"7","data-center-x":r[0],"data-center-y":r[1]}),this.makeConicGradientPoint(l,a,n,o,d,c+20,t.angle)))}makeRadialCenterPoint(e){let t,r,i,a;r=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),a=this.$viewport.applyVertex(e.shapePoint),t=this.makeStickPoint(e.colorsteps,r,i);let n=null;return this.state.hoverColorStep&&(n=te([],r,i,this.state.hoverColorStep.percent/100)),w(jt,null,w("svg",{class:"gradient-radial-line"},w("path",{d:` + M ${r[0]} ${r[1]} + L ${i[0]} ${i[1]} + `,class:"area-line"}),w("path",{d:` + M ${r[0]} ${r[1]} + L ${i[0]} ${i[1]} + `,class:"start-end-line"}),w("path",{d:` + M ${r[0]} ${r[1]} + L ${a[0]} ${a[1]} + `,class:"shape-line"}),this.makeGradientPoint(t,r,i,a,n)))}makeStickPoint(e,t,r){const i=Ca,a=$e([],r,t),n=rt(a[0],a[1])-180,o=Ft(-n,t),l=Ot([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=oe([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=oe([[h[0]-i/2,h[1]-i*1.5,0],[h[0]-i/2,h[1]-i*1.5+i/2,0],[h[0]+i/2,h[1]-i*1.5+i/2,0]],l),c})}makeLinearCenterPoint(e){let t,r,i,a,n,o,l;i=this.$viewport.applyVertex(e.startPoint),a=this.$viewport.applyVertex(e.endPoint),n=this.$viewport.applyVertex(e.areaStartPoint),o=this.$viewport.applyVertex(e.areaEndPoint),t=this.$viewport.applyVertex(e.centerPosition),l=this.makeStickPoint(e.colorsteps,i,a);const c=se(t,a),[h]=oe([a],Ft(90,te([],i,a,.5)));r=te([],t,te([],t,h,1/se(t,h)),c+20);const u=te([],r,t,20/(c+20));let d=null;return this.state.hoverColorStep&&(d=te([],i,a,this.state.hoverColorStep.percent/100)),w("svg",{class:"gradient-angle"},w("path",{class:"stick",d:` + M ${u[0]} ${u[1]} + L ${r[0]} ${r[1]} + `}),w("circle",{class:"size",cx:t[0],cy:t[1],r:se(t,i)}),w("circle",{class:"rotate",cx:r[0],cy:r[1],r:"7","data-center-x":t[0],"data-center-y":t[1]}),w("path",{d:` + M ${n[0]} ${n[1]} + L ${o[0]} ${o[1]} + `,class:"area-line"}),w("path",{d:` + M ${i[0]} ${i[1]} + L ${a[0]} ${a[1]} + `,class:"start-end-line"}),this.makeGradientPoint(l,i,a,null,d))}[G("$el")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=e.createBackgroundImageMatrix(this.state.index);this.state.lastBackgroundMatrix=t;const r=t.backgroundImage.image;switch(r.type){case D.LINEAR:case D.REPEATING_LINEAR:this.state.centerPosition=this.$viewport.applyVertex(t.centerPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.rotateInverse=Ft(-1*t.backgroundImage.image.angle,this.state.centerPosition);break;case D.RADIAL:case D.REPEATING_RADIAL:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint);break;case D.CONIC:case D.REPEATING_CONIC:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.shapePoint);break}return w("div",null,this.makeGradientRect(t),r.type===D.STATIC||r.type===D.IMAGE?null:this.makeCenterPoint(t))}}function j8(s){s.registerUI("canvas.view",{GradientEditorView:O8})}const Ks=(s,e,t="base-line")=>``,R8=(s,e)=>Ks(s,e),z8=(s,e)=>Ks(s,e),Cd=s=>``,kd=(s,e=3,t="left")=>t==="left"?``:t==="right"?``:t==="up"?``:t==="down"?``:``;class A8 extends X{template(){return``}initState(){return{list:[]}}[ae("$guide")](){return{svgDiff:`${this.createGuideLine(this.state.list)}`}}createLayerLine(){return""}filterGuideLine(e){return e=e.filter(Boolean),e}createGuideLine(e){var t=[],r=[];e=this.filterGuideLine(e);for(var i=0,a=e.length;i0&&t.push(Ks(g,y,"dash-line")),S&&t.push(Ks(y,S,"dash-line"))),l==="y"&&(v>0&&t.push(Ks(g,y,"dash-line")),S&&t.push(Ks(y,S,"dash-line"))),l==="x"&&t.push(R8(y,g)),l==="y"&&t.push(z8(y,g)),this.state.hasVerties&&(t.push(kd(g,3,"vertex")),t.push(kd(y,3,"vertex"))),u&&(this.$context.selection.isOne&&this.$editor.isPointerDown||this.$context.selection.isMany&&!this.$editor.isPointerMove)&&t.push(Cd(this.$viewport.applyVerties(u))),d&&t.push(Cd(this.$viewport.applyVerties(d)))}return[...t,...r].join("")}removeGuideLine(){this.setState({list:[]})}setGuideLine(e,t=!1){this.setState({list:e,hasVerties:t})}refreshSmartGuides(e){if(this.$context.selection.isEmpty)return;const t=kr(this.$context.selection.verties);let r;if(e)r=e.map(n=>kr(n));else{const n=this.$context.snapManager.snapTargetLayers.map(o=>{const l=kr(o.verties);return{targetVerties:l,dist:se(l[4],t[4])}});n.sort((o,l)=>o.dist-l.dist),r=n.map(o=>o.targetVerties)}const i=r.map(n=>g_(t,n));i.sort((n,o)=>n[3]-o[3]);const a=[i[0],i[1]].filter(Boolean);this.setGuideLine(a)}refreshSmartGuidesForVerties(e=0){let t=this.$context.selection.verties;t.length&&(t=[...t,te([],t[0],t[1],.5),te([],t[1],t[2],.5),te([],t[2],t[3],.5),te([],t[3],t[0],.5)]);const r=this.$context.snapManager.findGuide(t,e);this.setGuideLine(r,!0)}[M("removeGuideLine",Oe)](){this.removeGuideLine()}[M("refreshGuideLineByTarget")](e=[]){return this.refreshSmartGuides(e)}get currentDistWithScale(){return 1/this.$viewport.scale}[M(it,Is)](){this.refreshSmartGuidesForVerties(this.currentDistWithScale)}[M(Lt)](){this.$context.selection.hasChangedField("d","clip-path")||this.refreshSmartGuidesForVerties(this.currentDistWithScale)}}function D8(s){s.registerUI("canvas.view",{GuideLineView:A8})}class F8 extends Ne{afterRender(){this.show()}getTitle(){return"History"}getBody(){return` +
        + `}[G("$body")+Ee](){return this.$editor.context.history.map((e,t)=>e==="-"?"
        -
        ":` +
        + ${t===this.$editor.context.history.currentIndex?ne.arrowRight:""} + ${e.message} +
        + `)}[M("refreshHistoryList")](){this.refresh()}}function B8(s){s.registerUI("inspector.tab.history",{HistoryProperty:F8})}class N8 extends X{template(){return w("div",{class:"elf--hover-view sepia(0.2)"},w("div",{class:"elf--hover-rect",ref:"$hoverRect"}))}checkModeView(){const e=this.$config.get("bodyEvent");return!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))||!ge.create(e.target).closest("elf--page-container")?!1:this.$modeView.isCurrentMode(js.CanvasView)&&this.$stateManager.isPointerUp}[Ct("bodyEvent")+fe("checkModeView")](){var n,o,l;if(this.$config.true("set.move.control.point")){this.$context.selection.setHoverId(""),this.renderHoverLayer();return}const e=this.$context.selection.filteredLayers,t=this.$viewport.getWorldPosition(this.$config.get("bodyEvent"));let i=e.filter(c=>c.hasPoint(t[0],t[1])).filter(c=>c.isNot("artboard")),a=(n=i[0])==null?void 0:n.id;if(this.$context.selection.isEmpty)a=(o=i[0])==null?void 0:o.id;else if(this.$context.selection.isOne){const c=this.$context.selection.current.pathIds;i=i.filter(h=>c.includes(h.id)===!1||h.id===this.$context.selection.current.id),a=(l=i[0])==null?void 0:l.id}a?this.$context.selection.setHoverId(a)&&this.renderHoverLayer():(this.$context.selection.setHoverId(""),this.renderHoverLayer())}[Ct("set.move.control.point")](){this.renderHoverLayer()}[M("refreshHoverView")](e){this.$context.selection.setHoverId(e)&&this.renderHoverLayer()}[M(it,Lt)](){this.$context.selection.setHoverId(""),this.renderHoverLayer()}createVisiblePath(e){if(!e.is("boolean-path"))return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` + + + + `}renderHoverLayer(){const e=this.$context.selection.hoverItems;if(e.length===0)this.refs.$hoverRect.updateDiff("");else{const t=e[0].verties,r=this.createPointerLine(this.$viewport.applyVerties(t)),i=this.createOffsetLine();this.refs.$hoverRect.updateDiff(r+i)}}getOffsetVerties(e,t){const r=e.verties,i=t.verties,a={},n=this.$viewport.applyVerties([[r[0][0],te([],r[0],r[3],.5)[1],0],[i[0][0],te([],r[0],r[3],.5)[1],0]]);var l=se(...n);l>0&&(a.left=n);const o=this.$viewport.applyVerties([[te([],r[0],r[1],.5)[0],r[1][1],0],[te([],r[0],r[1],.5)[0],i[1][1],0]]);var l=se(...o);return l>0&&(a.top=o),a}createOffsetLine(){const e=this.$context.selection.hoverItems[0]||this.$context.selection.current;if(!e||!e.parent||e.parent&&e.parent.is("project"))return"";if(this.$context.selection.isEmpty){const t=this.getOffsetVerties(e,e.parent);return` + + + + `}else{const t=this.getOffsetVerties(e,this.$context.selection.current);return` + + + + `}}createPointerLine(e){return e.length===0?"":(e=e.filter((t,r)=>r<4),``)}}function G8(s){s.registerUI("canvas.view",{HoverView:N8})}const H8=["","100x100","200x200","300x300","400x300","900x600","1024x762"];class U8 extends Ne{getClassName(){return"item"}getTitle(){return this.$i18n("image.property.title")}getBody(){return"
        "}getFooter(){return` +
        + + + +
        +
        + ${O("SelectEditor",{ref:"$select",label:this.$i18n("image.property.size"),key:"size",value:"",options:H8,onchange:"changeImageSize"})} + +
        + `}[K("changeImageSize")](e,t){var[r,i]=t.split("x").map(a=>a);this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:r,height:i}))}[z("$resize")](){var e=this.$context.selection.current;e&&this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:t=>t.naturalWidth,height:t=>t.naturalHeight}))}[ae("$sizeInfo")](){var e=this.$context.selection.current||{};return{innerHTML:`${this.$i18n("image.property.width")}: ${e.naturalWidth}, ${this.$i18n("image.property.height")}: ${e.naturalHeight}`}}[G("$body")](){var e=this.$context.selection.current||{},t=e.src||"";return O("ImageSelectEditor",{ref:"$1",key:"src",value:t,onchange:"changeSelect"})}[K("changeSelect")](e,t,r){var i=this.$context.selection.current;i&&(i.reset(b({src:t},r)),this.bindData("$sizeInfo"),this.$commands.executeCommand("setAttribute","change image",this.$context.selection.packByValue(b({src:t},r))))}[M(Oe)+He(100)](){this.refreshShow(["image"])}}class W8 extends X{initState(){return{key:this.props.key,value:this.props.value}}template(){return w("div",{class:"elf--image-select-editor",ref:"$body"})}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[G("$body")](){const e=this.$context.selection.currentProject;if(!e)return;const t=e.getImageValueById(this.state.value);return w(jt,null,w("div",{class:"preview-container"},t?w("img",{src:t}):null,w("input",{type:"file",ref:"$file",accept:"image/*"})),w("div",{class:"select-container"},w("button",{type:"button",ref:"$select"},this.$i18n("image.select.editor.button"))))}[Tr("$file")](e){var t=[...e.target.files];t.length&&this.$commands.emit("updateImageAssetItem",t[0],r=>{this.trigger("changeImageSelectEditor",r)})}[z("$select")](){this.emit("showImageSelectPopup",{context:this,changeEvent:"changeImageSelectEditor",value:this.state.value})}[M("changeImageSelectEditor")](e){this.updateData({value:e}),this.refresh()}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class X8 extends Lr{getTitle(){return"Select a image"}getClassName(){return"compact"}initState(){return{value:""}}updateData(e={}){this.setState(e,!1),this.state.context.trigger(this.state.changeEvent,this.state.value,{width:this.state.width,height:this.state.height,naturalWidth:this.state.naturalWidth,naturalHeight:this.state.naturalHeight})}getBody(){return`
        `}[G("$imageBox")+Ee](){return""}[z("$imageBox .image-item")](e){var t=e.$dt.$("img");this.updateData({value:t.attr("data-id"),naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight}),this.trigger("hideImageSelectPopup")}[M("showImageSelectPopup")](e,t){this.setState({context:e.context,changeEvent:e.changeEvent,value:e.value,params:t},!1),this.refresh(),this.show(500)}[M("hideImageSelectPopup")](){this.hide()}}function Y8(s){s.registerElement({ImageSelectEditor:W8}),s.registerUI("inspector.tab.style",{ImageProperty:U8}),s.registerUI("popup",{ImageSelectPopup:X8})}class K8 extends X{initState(){return{mode:"grid"}}template(){return` +
        +
        +
        + `}[G("$imageList")+Ee](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,r=t.map(i=>` +
        +
        + +
        +
        + `);return r}[z("$imageList .image-item")](e){var t=e.$dt.$("img");this.updateData(t.attr("src"))}updateData(e){this.parent.trigger(this.props.onchange,e)}[M("addImageAsset")](){this.refresh()}}function Z8(s){s.registerElement({ImageAssetPicker:K8})}function q8(s){s.context.config.set("inspector.selectedValue","style"),s.registerUI("inspector.tab",{Style:{title:s.$i18n("inspector.tab.title.design"),value:"style"},Transition:{title:s.$i18n("inspector.tab.title.transition"),value:"transition"},Code:{title:s.$i18n("inspector.tab.title.code"),value:"code"}})}class Q8 extends Lr{getTitle(){return this.$i18n("keyframe.popup.title")}initState(){return{name:"none",offsets:[]}}updateData(e){this.setState(e,!1),this.emit("changeKeyframePopup",this.state)}getBody(){return` +
        +
        + ${this.templateForName()} + ${this.templateForOffset()} +
        +
        `}templateForOffset(){return` +
        + ${O("OffsetEditor",{ref:"$offsetEditor"})} +
        + `}templateForName(){return` +
        + +
        + +
        +
        + `}[ot("$name")](e){if(this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/))this.updateData({name:this.refs.$name.value});else return e.preventDefault(),e.stopPropagation(),!1}getOffsetData(){var e=this.state.offsets.map(t=>t);return{offsets:e}}refresh(){this.refs.$name.val(this.state.name),this.emit("showOffsetEditor",this.getOffsetData())}[M("changeOffsetEditor")](e){this.updateData(e)}[M("showKeyframePopup")](e){this.setState(e),this.refresh(),this.show(240)}[M("hideKeyframePopup")](){this.$el.hide()}}class J8 extends Ne{getTitle(){return this.$i18n("keyframe.property.title")}getBody(){return"
        "}getTools(){return` + + `}makeProperty(e){var t=e.key;return t==="x"?t="left":t==="y"&&(t="top"),` +
        + +
        ${e.value}
        +
        + `}makeOffset(e){return` +
        + +
        + ${e.properties.map(t=>this.makeProperty(t)).join("")} +
        +
        + `}makeKeyframeTemplate(e,t){return t=t.toString(),` +
        +
        +
        ${e.name}
        +
        +
        + + +
        + +
        +
        +
        +
        + ${e.offsets.map(r=>` +
        + `).join("")} +
        +
        +
        + ${e.offsets.map(r=>this.makeOffset(r)).join("")} +
        +
        + 
        ${e.toString().trim()}
        +
        +
        + `}[z("$keyframeList .keyframe-item .title .group button[data-type]")](e){var t=e.$dt.closest("keyframe-item"),r=+t.attr("data-index"),i=e.$dt.attr("data-type"),a=this.$context.selection.currentProject;if(!!a){var n=a.keyframes[r];n&&n.reset({selectedType:i}),t.attr("data-selected-value",i)}}[z("$keyframeList .keyframe-item .offset-list")](e){var t=+e.$dt.closest("keyframe-item").attr("data-index"),r=this.$context.selection.currentProject;!r||this.viewKeyframePicker(t)}[z("$keyframeList .del")+Le](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.currentProject;!r||(r.removeKeyframe(t),this.$commands.emit("refreshProject",r),this.refresh())}[M(Oe)+He(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("keyframes")&&this.refresh()}[G("$keyframeList")](){var e=this.$context.selection.currentProject;if(!e)return"";var t=e.keyframes||[];return t.map((r,i)=>this.makeKeyframeTemplate(r,i))}[z("$add")](){var e=this.$context.selection.currentProject;e?(e.createKeyframe(),this.refresh(),this.$commands.emit("refreshProject",e)):window.alert("Please select a project.")}viewKeyframePicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.currentProject,this.current&&(this.currentKeyframe=this.current.keyframes[this.selectedIndex],this.viewKeyframePropertyPopup())}selectItem(e,t=!0){t?this.getRef("$keyframeIndex",e).addClass("selected"):this.getRef("$keyframeIndex",e).removeClass("selected"),this.current&&this.current.keyframes.forEach((r,i)=>{r.selected=i===e})}viewKeyframePropertyPopup(e){if(this.current=this.$context.selection.currentProject,!this.current)return;this.currentKeyframe=this.current.keyframes[this.selectedIndex];const t=this.currentKeyframe,r=t.name,i=t.offsets;this.emit("showKeyframePopup",{position:e,name:r,offsets:i})}[M("changeKeyframePopup")](e){var t=this.$context.selection.currentProject;!t||(this.currentKeyframe=t.keyframes[this.selectedIndex],this.currentKeyframe&&this.currentKeyframe.reset(e),this.refresh(),this.$commands.emit("refreshProject",t))}}class e9 extends X{initState(){return{offsets:[]}}updateData(e){this.setState(e,!1),this.modifyOffset()}modifyOffset(){this.emit("changeOffsetEditor",this.state)}template(){return` +
        + ${this.templateForOffset()} + ${this.templateForOffsetInput()} + ${this.templateForProperty()} +
        `}templateForOffsetInput(){return` +
        +
        + +
        + ${O("InputRangeEditor",{key:"offset",min:0,max:100,step:.01,value:p.percent(0),ref:"$offsetInput",units:"%",onchange:"changeRangeEditor"})} +
        +
        +
        + `}[M("changeRangeEditor")](e,t){var r=this.state.offsets[this.selectedIndex];r&&(r.offset=t.clone(),this.refresh(),this.modifyOffset())}templateForProperty(){return O("CSSPropertyEditor",{ref:"$offsetPropertyEditor","hide-refresh":!0,onchange:"changeCSSPropertyEditor"})}templateForOffset(){return`
        `}makeOffset(e,t){return`
        `}selectItem(e){if(wt(e)){e=-1;for(var t=0,r=this.state.offsets.length;t{a.selected=n===e});var i=this.state.offsets.filter(a=>a.selected);this.selectedOffsetItem=i.length?i[0]:{},this.refreshOffsetInput()}refreshOffsetInput(){var e=this.state.offsets[this.selectedIndex];e&&this.children.$offsetInput.setValue(e.offset)}[G("$offset")](){return this.state.offsets.map((e,t)=>this.makeOffset(e,t))}isNotOffsetItem(e){return!ge.create(e.target).hasClass("offset-item")&&!this.currentOffset}[z("$offset")+fe("isNotOffsetItem")+Le](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset();var t=e.xy.x,r=p.percent((t-this.baseOffsetArea.left)/this.baseOffsetWidth*100).round(100);this.state.offsets.push(new Na({offset:r})),this.selectItem(this.state.offsets.length-1,!0),this.refresh(),this.modifyOffset()}refreshOffsetProperty(){this.emit("showCSSPropertyEditor",this.selectedOffsetItem.properties)}[ve("$offset .offset-item")+_e("moveOffset")+Se("endOffset")](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset(),this.currentOffsetleft=p.parse(e.$dt.css("left")),this.currentOffset=e.$dt,this.currentOffsetIndex=+e.$dt.attr("data-offset-index"),this.currentOffsetXY=e.xy,this.baseOffsetMin=this.baseOffsetArea.left,this.baseOffsetMax=this.baseOffsetArea.left+this.baseOffsetWidth,this.isRemoveOffset=!1,e.altKey?this.isRemoveOffset=!0:(this.selectItem(this.currentOffsetIndex,!0),this.refreshOffsetInput())}moveOffset(e){if(!this.isRemoveOffset){var t=this.currentOffsetXY.x+e;tthis.baseOffsetMax&&(t=this.baseOffsetMax);var r=p.percent((t-this.baseOffsetMin)/this.baseOffsetWidth*100).round(100);this.state.offsets[this.currentOffsetIndex].offset.set(r.value),this.currentOffset.css("left",r),this.refreshOffsetInput(),this.modifyOffset()}}removeOffset(e){this.state.offsets.splice(e,1),this.selectItem(0),this.refresh(),this.modifyOffset()}endOffset(){this.isRemoveOffset?window.setTimeout(()=>{this.currentOffset=null,this.removeOffset(this.currentOffsetIndex)},10):window.setTimeout(()=>{this.currentOffset=null,this.refreshOffsetInput(),this.refreshOffsetProperty(),this.modifyOffset()},10)}refresh(){this.load(),this.refreshOffsetProperty()}[M("showOffsetEditor")](e){this.setState(e),this.selectItem(),this.refresh()}[M("changeCSSPropertyEditor")](e=[]){var t=this.state.offsets[this.selectedIndex];t&&(t.properties=[...e]),this.modifyOffset()}}function t9(s){s.registerElement({OffsetEditor:e9}),s.registerUI("inspector.tab.transition",{KeyframeProperty:J8}),s.registerUI("popup",{KeyframePopup:Q8})}class r9 extends X{template(){return` +
        +
        +
        +
        +
        + + +
        + `}initState(){return{dragStart:!1,width:0,height:0,color:"black",fontSize:30,showRectInfo:!1,areaVerties:mt(0,0,0,0),content:"Insert a text",pathManager:new Rt,rect:{},options:{},containerItem:void 0,patternInfo:{}}}get scale(){return this.$viewport.scale}checkNotDragStart(){return Boolean(this.state.dragStart)===!1}[ca("$el")+fe("checkNotDragStart")](e){const t=this.$viewport.getWorldPosition(e),r=this.$context.snapManager.checkPoint(t);Nl(r,t)===!1?(this.state.target=r,this.state.targetVertex=this.$viewport.applyVertex(this.state.target),this.state.targetPositionVertex=Wt(this.state.target),this.state.targetGuides=this.$context.snapManager.findGuideOne([this.state.target])):(this.state.target=Fr([],t),this.state.targetVertex=Fr([],this.$viewport.applyVertex(this.state.target)),this.state.targetGuides=[],this.state.targetPositionVertex=null),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}[ve("$el")+_e()+Se()+Le+ri](e){this.initMousePoint=this.state.targetPositionVertex?this.state.targetPositionVertex:this.$viewport.getWorldPosition(e),this.state.dragStart=!0,this.state.color="#C4C4C4",this.state.text="";const t=this.initMousePoint[0],r=this.initMousePoint[1],i=mt(t,r,0,0);this.state.areaVerties=this.$viewport.applyVerties(i),this.bindData("$area"),this.bindData("$areaRect")}createLayerTemplate(e,t){const{type:r,text:i,color:a,inlineStyle:n}=this.state;switch(r){case"artboard":return`
        `;case"rect":return`
        `;case"circle":return`
        `;case"text":case"svg-text":return` +
        +

        +
        `;case"svg-rect":return` +
        + + + +
        + `;case"svg-circle":return` +
        + + + +
        + `;case"svg-path":const o=this.state.d.clone().scale(e/this.state.bboxRect.width,t/this.state.bboxRect.height).d,l=this.state.options;return` +
        + + + +
        + `;case"polygon":const c=this.state.options;return` +
        + + + +
        + `;case"star":const h=this.state.options;return` +
        + + + +
        + `;case"svg-textpath":return` +
        + + + + + + ${i} + + +
        + `;default:return`
        `}}[ae("$area")](){const{areaVerties:e}=this.state,{left:t,top:r,width:i,height:a}=Et(e);return{style:{left:t,top:r,width:i,height:a},innerHTML:this.createLayerTemplate(i,a)}}[ae("$areaRect")](){const{areaVerties:e,showRectInfo:t}=this.state,r=this.$viewport.applyVertiesInverse(e),{width:i,height:a}=Et(r);return{style:{display:t?"inline-block":"none",left:e[2][0],top:e[2][1]},innerHTML:`x: ${Math.round(r[0][0])}, y: ${Math.round(r[0][1])}, ${Math.round(i)} x ${Math.round(a)}`}}[ae("$mousePointerView")](){const{showRectInfo:e}=this.state,{target:t=ei(),targetVertex:r=ei()}=this.state;return{style:{display:e?"none":"inline-block",left:r[0]||-1e4,top:r[1]||-1e4},innerHTML:`x: ${Math.round(t[0])}, y: ${Math.round(t[1])}`}}makeMousePointer(){if(this.state.dragStart)return"";const{target:e}=this.state;return e?` + + ${(this.state.targetGuides||[]).filter(Boolean).map(r=>(this.state.pathManager.reset(),r=this.$viewport.applyVerties([r[0],r[1]]),this.state.pathManager.M({x:r[0][0],y:r[0][1]}).L({x:r[1][0],y:r[1][1]}).X({x:r[0][0],y:r[0][1]}).X({x:r[1][0],y:r[1][1]}).toString("layer-add-snap-pointer"))).join(` +`)} + + `:""}[ae("$mousePointer")](){return{innerHTML:this.makeMousePointer()}}move(){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),r=this.$context.snapManager.checkPoint(t);Nl(r,t)===!1?(this.state.target=r,this.state.targetVertex=this.$viewport.applyVertex(r),this.state.targetGuides=this.$context.snapManager.findGuideOne([r]).filter(Boolean)):(this.state.target=void 0,this.state.targetGuides=[]);const i=e.shiftKey,a=Math.min(r[0],this.initMousePoint[0]),n=Math.min(r[1],this.initMousePoint[1]),o=Math.max(r[0],this.initMousePoint[0]),l=Math.max(r[1],this.initMousePoint[1]);let c=o-a,h=l-n;i&&(h=c);const u=mt(a,n,c,h);this.state.areaVerties=this.$viewport.applyVerties(u),this.state.showRectInfo=!0,this.bindData("$area"),this.bindData("$areaRect"),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}end(){const e=this.$config.get("bodyEvent").altKey;let{color:t,content:r,fontSize:i,areaVerties:a,patternInfo:n}=this.state;const o=this.$viewport.applyVertiesInverse(a),l=this.$context.selection.getArtboardByPoint(o[0]);let{x:c,y:h,width:u,height:d}=Et(o),v=!0;if(u===0&&d===0)switch(this.state.type){case"text":r="",d.set(this.state.fontSize),v=!1;break;default:u=100,d=100;break}var g=b(b({x:Math.floor(c),y:Math.floor(h),width:Math.floor(u),height:Math.floor(d),backgroundColor:t,content:r,fontSize:i},n.attrs),this.state.options);switch(this.state.type){case"text":case"svg-text":case"svg-textpath":delete g.backgroundColor;break;case"svg-path":g.d=this.state.d.clone().scale(u/this.state.bboxRect.width,d/this.state.bboxRect.height).d;break;default:delete g.content;break}switch(this.state.type){case"image":this.trigger("openImage",g,l);break;case"video":this.trigger("openVideo",g,l);break;case"audio":this.trigger("openAudio",g,l);break;case"text":if(v)g.fontSize=p.px(this.state.fontSize).floor();else{const y=this.state.fontSize/this.$viewport.scale,S=this.refs.$area.$(".draw-item > p");S.parent().css("height",`${y}px`),S.parent().css("font-size",`${y}px`),S.select(),S.focus();return}this.$commands.emit("newComponent",this.state.type,g,!0,l||this.$context.selection.currentProject);break;default:this.$commands.emit("newComponent",this.state.type,g,!0,l||this.$context.selection.currentProject),this.$config.set("editing.mode.itemType","select");break}e||this.trigger("hideLayerAppendView"),this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=void 0,this.bindData("$areaRect")}[M("showLayerAppendView")](e,t={}){this.state.type=e,this.state.options=t,this.state.isShow=!0,this.refs.$area.empty(),this.$el.show(),this.$el.focus(),this.$context.snapManager.clear();const r=this.$model.createModel(b({itemType:e},t),!1);this.state.inlineStyle=Ze(this.$editor.renderer("html").toCSS(r,{top:!0,left:!0,width:!0,height:!0,transform:!0,transformOrigin:!0})),t.d&&(this.state.d=new Y(t.d),this.state.bboxRect=this.state.d.rect()),this.$context.commands.emit("push.mode.view","LayerAppendView")}[M("hideLayerAppendView")](){this.$el.isShow()&&(this.state.isShow=!1,this.$el.hide(),this.$commands.emit("pop.mode.view","LayerAppendView"))}[M("hideAddViewLayer")](){this.state.isShow=!1,this.$el.hide()}isShow(){return this.state.isShow}[wo("document")+fe("isShow")+Oa+Ts](){}[tr("document")+fe("isShow")+Oa+Ts](e){switch(this.state.type){case"text":const t=ge.create(e.target);let{fontSize:r,areaVerties:i}=this.state;const a=this.$viewport.applyVertiesInverse(i),{x:n,y:o}=Et(a),{width:l,height:c}=t.rect(),h=t.text();if(h.length===0)break;const[[u,d,v]]=this.$viewport.applyScaleVertiesInverse([[l,c,r]]),g={x:n,y:o,width:u,height:d,content:h.trim(),"font-size":v},y=this.$context.selection.getArtboardByPoint(a[0]);this.$commands.emit("newComponent",this.state.type,g,!0,y||this.$context.selection.currentProject);break}this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=null,this.bindData("$areaRect"),this.trigger("hideLayerAppendView")}[Tr("$file")](){this.refs.$file.files.forEach(e=>{this.$commands.emit("updateImage",e,this.state.rect,this.state.containerItem)})}[Tr("$video")](){this.refs.$video.files.forEach(e=>{this.$commands.emit("updateVideo",e,this.state.rect,this.state.containerItem)})}[M("openImage")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$file.click()}[M("openVideo")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$video.click()}[M("setPatternInfo")](e){this.state.patternInfo=e}[M(it)](){this.$context.snapManager.clear(),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}}function i9(s){s.registerUI("canvas.view",{LayerAppendView:r9})}const ka="drag-start";class s9 extends Ne{getTitle(){return this.$i18n("layer.tree.property.title")}getClassName(){return"full"}initState(){return{hideDragPointer:!0,lastDragOverPosition:0,lastDragOverOffset:0,rootRect:{top:0},itemRect:{height:0}}}getBody(){return` +
        +
        + `}[ae("$dragPointer")](){var e=this.state.lastDragOverOffset,t=this.state.itemRect.height/3,r={};if(this.state.lastDragOverOffsetthis.state.itemRect.height-t){e=this.state.itemRect.height;var i=this.state.lastDragOverPosition+e-this.state.rootRect.top;r={top:i,height:"1px",width:"100%",left:"0px"},this.state.lastDragOverItemDirection="after"}else{const a=this.$model.get(this.state.lastDragOverItemId);if(a!=null&&a.enableHasChildren()){e=0;var i=this.state.lastDragOverPosition+e-this.state.rootRect.top;r={top:i,height:this.state.itemRect.height,width:"100%",left:"0px"},this.state.lastDragOverItemDirection="self"}}return r.display=this.state.hideDragPointer?"none":"block",{style:r}}getIcon(e){return e.d?o_(e.d,{width:e.screenWidth,height:e.screenHeight,fill:"currentColor",stroke:"currentColor"}):e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?R("layout_flex"):e.isLayout("grid")?R("layout_grid"):R("layout_default"):this.$icon.get(e.itemType,e)}makeLayerList(e,t=0){if(!e.layers)return"";const r=e.layers,i=[];for(var a=r.length-1;a>-1;a--){var n=r[a],o=this.$context.selection.hasPathOf(n)?"selected-path":"",l=this.$context.selection.check(n)?"selected":"",c=this.$context.selection.checkHover(n)?"hovered":"",h=n.is("boolean-path")?n["boolean-operation"]:n.name;n.is("text")&&(h=n.text||n.name);var u="";n.hasLayout()&&(u=this.$i18n("layer.tree.property.layout.title."+n.layout));const d=n.isTreeItemHide(),v=t*20,g=n.hasChildren(),y=this.$lockManager.get(n.id),S=this.$visibleManager.get(n.id);i[i.length]=`
        ${this.makeLayerList(n,t+1)}`}return i.join("")}[M("refreshContent")](){this.refresh()}[G("$layerList")+Ee](){var e=this.$context.selection.currentProject;return e?[this.makeLayerList(e,0),` +
        +
        + `]:""}[yr("$layerList .layer-item")](e){var t=e.$dt.attr("data-layer-id");e.$dt.addClass(ka),e.dataTransfer.setData("layer/id",t),this.state.rootRect=this.refs.$layerList.rect(),this.state.itemRect=e.$dt.rect(),this.setState({hideDragPointer:!1},!1),this.bindData("$dragPointer")}[zg("$layerList .layer-item")](){this.setState({hideDragPointer:!0},!1),this.bindData("$dragPointer"),this.refs.$layerList.$$(`.${ka}`).forEach(e=>{e.removeClass(ka)})}[si(`$layerList .layer-item:not(.${ka})`)+Le](e){var t=e.$dt.attr("data-layer-id");this.state.lastDragOverItemId=t,this.state.lastDragOverPosition=e.$dt.rect().top,this.state.lastDragOverOffset=e.offsetY,this.bindData("$dragPointer")}[ii(`$layerList .layer-item:not(.${ka})`)](e){var t=e.$dt.attr("data-layer-id"),r=e.dataTransfer.getData("layer/id");if(t!==r){var i=this.$model.get(t),a=this.$model.get(r);if((i==null?void 0:i.enableHasChildren())!==!1&&!(i&&i.hasParent(a.id))){switch(this.state.lastDragOverItemDirection){case"self":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Br.APPEND_CHILD);break;case"before":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Br.INSERT_BEFORE);break;case"after":this.$commands.emit("history.moveLayerToTarget","change target with move",a,i,void 0,Br.INSERT_AFTER);break}this.nextTick(()=>{this.$commands.emit("recoverBooleanPath"),this.$context.selection.select(a),this.setState({hideDragPointer:!0})},10)}}}[rn("$layerList .layer-item")](e){this.startInputEditing(e.$dt.$(".name"))}modifyDoneInputEditing(e,t){if(Es.enter===t.keyCode)this.endInputEditing(e,()=>{var a=e.closest("layer-item").attr("data-layer-id"),n=e.text();this.$commands.executeCommand("setAttribute","change name",{[a]:{name:n}})});else{var r=e.closest("layer-item").attr("data-layer-id"),i=e.text();this.$commands.executeCommand("setAttribute","change name",{[r]:{name:i}})}}[wo("$layerList .layer-item .name")+ri](e){this.modifyDoneInputEditing(e.$dt,e)}[Ms("$layerList .layer-item .name")+Le+ri](e){this.modifyDoneInputEditing(e.$dt,{keyCode:Es.enter})}selectLayer(e){e&&this.$context.selection.select(e),this.refresh()}addLayer(e){e&&(this.$context.selection.select(e),this.$commands.emit("refreshArtboard"))}[z("$add")](){this.$commands.emit("newComponent","rect",{backgroundColor:"#ececec",width:200,height:100})}[z("$layerList .layer-item label .name")](e){var t=e.$dt.closest("layer-item");t.onlyOneClass("selected");var r=t.attr("data-layer-id");this.$context.selection.select(r),this.$commands.emit("history.refreshSelection")}[z("$layerList .layer-item label .folder")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id"),i=this.$model.get(r);i.reset({collapsed:!i.collapsed}),this.refresh()}[z("$layerList .layer-item .visible")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$visibleManager.toggle(r);var i=this.$visibleManager.get(r);e.$dt.attr("data-visible",i),this.emit("refreshVisibleView")}[z("$layerList .layer-item .remove")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$commands.executeCommand("removeLayer","remove a layer",[r]),this.nextTick(()=>{this.refresh()},1e3)}[z("$layerList .layer-item .lock")](e){var t=e.$dt.closest("layer-item"),r=t.attr("data-layer-id");this.$lockManager.toggle(r);var i=this.$lockManager.get(r);e.$dt.attr("data-lock",i),i&&this.$context.selection.removeById(r)}[M("changeHoverItem")](){if(this.refs.$layerList.$$(".hovered").forEach(t=>{t.removeClass("hovered")}),this.$context.selection.hoverItems.length){var e=this.$context.selection.hoverItems.map(t=>`[data-layer-id="${t.id}"]`).join(",");this.refs.$layerList.$$(e).forEach(t=>{t.addClass("hovered")})}}[K("changeSelection")](e=!1){if(e&&this.refs.$layerList){this.refs.$layerList.$$(".selected").forEach(r=>{r.removeClass("selected")}),this.refs.$layerList.$$(".selected-path").forEach(r=>{r.removeClass("selected-path")});var t=this.$context.selection.items.map(r=>`[data-layer-id="${r.id}"]`).join(",");t&&this.refs.$layerList.$$(t).forEach(r=>{r.addClass("selected");var i=this.$context.selection.itemKeys[r.attr("data-layer-id")];i.is("svg-path","svg-polygon")&&r.$(".icon").html(this.getIcon(i))})}}[M(Oe,"refreshAllCanvas")](){this.refresh()}[M("refreshLayerTreeView")+sa(100)](){this.refresh()}[M("changeItemLayout")](){this.refresh()}[Ct("bodyEvent")](){const t=ge.create(this.$config.get("bodyEvent").target).closest("layer-item");t&&this.emit("refreshHoverView",t.data("layer-id"))}}function a9(s){s.registerElement({LayerTreeProperty:s9})}var n9={title:"Conic",key:"conic",execute:function(s=42){return Mr(s).map(()=>{var e=xi(45,55),t=xi(45,55),r=xi(0,360);return{gradient:`conic-gradient(from ${r}deg at ${e}% ${t}%, ${Je.createColorStep(2,360,"deg")})`}})}};const o9=["0deg","45deg","90deg"];var l9={title:"Linear",key:"linear",execute:function(s=42){return Mr(s).map(()=>({gradient:`linear-gradient(${xc(...o9)}, ${Je.createColorStep(2)})`}))}},c9={title:"Radial",key:"radial",execute:function(s=42){return Mr(s).map(()=>{var e="circle";return{gradient:`radial-gradient(${e}, ${Je.createColorStep(2)})`}})}},h9={title:"Random Conic",key:"random-conic",execute:function(s=42){return Mr(s).map(()=>({gradient:`conic-gradient(from 0deg at 50% 50%, ${Je.createColorStep(10,360,"deg")})`}))}};const d9=["0deg","45deg","90deg"];var u9={title:"Random Linear",key:"random-linear",execute:function(s=42){return Mr(s).map(()=>({gradient:`linear-gradient(${xc(...d9)}, ${Je.createColorStep(10)})`}))}},p9={title:"Random Radial",key:"random-radial",execute:function(s=42){return Mr(s).map(()=>({gradient:`radial-gradient(circle, ${Je.createColorStep(10)})`}))}},g9={title:"Repeat Conic",key:"repeat-conic",execute:function(s=42){return Mr(s).map(()=>({gradient:`repeating-conic-gradient(from 0deg at 0% 50%, ${Je.createRepeatColorStep(10,"10deg")})`}))}};const f9=["0deg","45deg","90deg"];var m9={title:"Repeat Linear",key:"repeat-linear",execute:function(s=42){return Mr(s).map(()=>({gradient:`repeating-linear-gradient(${xc(...f9)}, ${Je.createRepeatColorStep(2,"10px")})`}))}},v9={title:"Repeat Radial",key:"repeat-radial",execute:function(s=42){return Mr(s).map(()=>{var e="circle";return{gradient:`repeating-radial-gradient(${e}, ${Je.createRepeatColorStep(3,"6px")})`}})}},_p=[l9,u9,m9,c9,p9,v9,n9,h9,g9];const y9=_p.map(s=>({value:s.key,text:s.title}));class b9 extends Ne{getTitle(){return this.$i18n("gradient.asset.property.title")}initState(){return{mode:"grid",preset:"linear"}}getTools(){return'
        '}[G("$tools")](){return O("SelectEditor",{ref:"$preset",key:"preset",value:this.state.preset,options:y9,onchange:"changePreset"})}[K("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--gradient-assets-property"}[M(Oe)+He(100)](){this.show()}getBody(){return` +
        +
        +
        + `}[yr("$gradientList .gradient-item")](e){const t=e.$dt.attr("data-gradient");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/gradient",t)}[G("$gradientList")](){var e=_p.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>`
        +
        +
        +
        +
        `);return e.edit&&t.push(`
        ${R("add")}
        `),t}executeGradient(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshGradientAssets")):window.alert("Please select a project.")}[z("$gradientList .add-gradient-item")](){this.executeGradient(e=>{e.createGradient({gradient:ur.random(),name:"",variable:""})})}[z("$gradientList .preview")](e){var t=e.$dt.closest("gradient-item"),r=t.attr("data-gradient");this.$commands.emit("drop.asset",{gradient:r})}}function Sp(s){window.URL.revokeObjectURL(s)}class x9 extends Ne{getTitle(){return this.$i18n("image.asset.property.title")}initState(){return{mode:"grid"}}getClassNamef(){return"elf--image-assets-property"}afterRender(){this.show()}getBody(){return` +
        +
        +
        + `}[G("$imageList")+Ee](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,r=t.map((i,a)=>` +
        +
        + +
        +
        + + +
        +
        + `);return` +
        + ${r.join("")} +
        + + +
        +
        + + `}executeImage(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshImageAssets")):window.alert("Please select a project.")}[yr("$imageList .preview img")](e){var t=+e.$dt.closest("image-item").attr("data-index"),r=this.$context.selection.currentProject;if(r){var i=r.images[t];e.dataTransfer.setData("image/info",i.local)}}[Tr("$imageList .add-image-item input[type=file]")](e){this.executeImage(()=>{[...e.target.files].forEach(t=>{this.$commands.emit("updateImageAssetItem",t)})})}[z("$imageList .remove")](e){var t=e.$dt.closest("image-item"),r=+t.attr("data-index");this.executeImage(i=>{i.removeImage(r),Sp(t.$(".preview img").attr("src"))})}[z("$imageList .copy")](e){var t=e.$dt.closest("image-item"),r=+t.attr("data-index");this.executeImage(i=>{i.copyImage(r)})}[M("addImageAsset")](){this.refresh()}}var $9={key:"check",title:"Check",execute:function(){return[{pattern:"check(20px 20px, 10px 10px, black, transparent)"},{pattern:"check(40px 40px, 20px 20px, black, transparent)"},{pattern:"check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"check(200px 200px, 100px 100px, #102C45, transparent)"}]}},_9={key:"cross-dot",title:"Cross Dot",execute:function(){return[{pattern:"cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)"},{pattern:"cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)"}]}},S9={key:"diagonal-line",title:"Diagonal Line",execute:function(){return[{pattern:"diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)"},{pattern:"diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)"}]}},P9={key:"dot",title:"Dot",execute:function(){return[{pattern:"dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)"},{pattern:"dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)"},{pattern:"dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)"}]}},w9={key:"grid",title:"Grid",execute:function(){return[{pattern:"grid(20px 20px, 10px 10px, black, transparent)"},{pattern:"grid(40px 40px, 20px 20px, black, transparent)"},{pattern:"grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"grid(200px 200px, 100px 100px, #102C45, transparent)"}]}},C9={key:"horizontal-line",title:"Horizontal Line",execute:function(){return[{pattern:"horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)"},{pattern:"horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)"}]}},k9={key:"vertical-line",title:"Vertical Line",execute:function(){return[{pattern:"vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)"},{pattern:"vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)"}]}},rc=[$9,w9,P9,_9,S9,k9,C9];class Pp extends Ne{getTitle(){return this.$i18n("pattern.asset.property.title")}initState(){return{mode:"grid",preset:"check"}}getTools(){const e=Zs(rc.map(t=>({value:t.key,text:t.title})));return O("SelectEditor",{ref:"$assets",key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[K("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--pattern-assets-property"}get editableProperty(){return"pattern"}[M(Oe)+He(100)+fe("checkShow")](){}getBody(){return` +
        +
        +
        + `}[yr("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/pattern",t)}[G("$patternList")](){var e=rc.find(r=>r.key===this.state.preset);if(!e)return"";var t=e.execute().map((r,i)=>{const a=Ze(hr.toCSS(r.pattern));return`
        +
        +
        +
        +
        `});return t}[z("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");this.$modeView.isCurrentMode(js.CanvasView)?this.$commands.emit("addBackgroundImagePattern",t):this.emit("setPatternAsset",t)}}class wp extends Ne{getTitle(){return this.$i18n("video.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--video-assets-property"}afterRender(){this.show()}getBody(){return` +
        +
        +
        + `}[G("$videoList")+Ee](){var e=this.$context.selection.currentProject||{videos:[]},t=e.videos,r=t.map((i,a)=>` +
        +
        + +
        +
        + + +
        +
        + `);return` +
        + ${r.join("")} +
        + + +
        +
        + + `}executeVideo(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshVideoAssets")):window.alert("Please select a project.")}[yr("$videoList .preview img")](e){var t=+e.$dt.closest("video-item").attr("data-index"),r=this.$context.selection.currentProject;if(r){var i=r.videos[t];e.dataTransfer.setData("video/info",i.local)}}[Tr("$videoList .add-video-item input[type=file]")](e){this.executeVideo(()=>{[...e.target.files].forEach(t=>{this.emit("updateVideoAssetItem",t)})})}[z("$videoList .remove")](e){var t=e.$dt.closest("video-item"),r=+t.attr("data-index");this.executeVideo(i=>{i.removeVideo(r),Sp(t.$(".preview img").attr("src"))})}[z("$videoList .copy")](e){var t=e.$dt.closest("video-item"),r=+t.attr("data-index");this.executeVideo(i=>{i.copyVideo(r)})}[M("addVideoAsset")](){this.refresh()}}Os({VideoAssetsProperty:wp});class T9 extends X{template(){return` +
        + ${this.$injectManager.generate("asset")} +
        + `}}class M9 extends X{template(){return` +
        +
        +
        +
        + +
        +
        +
        +
        + `}async[G("$list")](){return(await this.$storageManager.getCustomAssetList()).map(t=>` +
        +
        +
        +
        ${t.component.name}
        +
        + +
        +
        +
        + `)}async[z("$list .remove-asset-preview")](e){if(window.confirm(this.$i18n("app.confirm.message.artboard.items.removeCustomAsset"))){const t=e.$dt.data("preview-id");await this.$storageManager.removeCustomAsset(t),this.refresh()}}[yr("$list .asset-preview")](e){const t=e.$dt.data("preview-id");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/asset",t)}[z("$addCustomAsset")](){this.$commands.emit("savePNG",async e=>{await this.$storageManager.saveCustomAsset(e),this.refresh()})}}class I9 extends X{template(){return` +
        +
        + ${O("TextEditor",{label:"Search",key:"search",onchange:this.subscribe((e,t)=>{this.broadcast("search",t)},300)})} +
        + ${this.$injectManager.generate("library")} +
        + `}}class E9 extends X{template(){return` +
        +
        + ${O("ProjectProperty")} +
        +
        + ${O("LayerTreeProperty")} +
        +
        + `}}function L9(s){s.context.config.set("layertab.selectedValue","layer"),s.registerUI("layertab.tab",{Layer:{title:s.$i18n("app.tab.title.layers"),icon:R("layers"),value:"layer"},Library:{title:s.$i18n("app.tab.title.libraries"),icon:R("auto_awesome"),value:"library"},Asset:{title:s.$i18n("app.tab.title.assets"),icon:R("apps"),value:"asset"},Component:{title:s.$i18n("app.tab.title.components"),icon:R("plugin"),value:"component"}}),s.registerUI("layertab.tab.layer",{ObjectItems:E9}),s.registerUI("layertab.tab.library",{LibraryItems:I9}),s.registerUI("layertab.tab.asset",{AssetItems:T9}),s.registerUI("layertab.tab.component",{CustomAssets:M9}),s.registerUI("asset",{GradientAssetsProperty:b9,PatternAssetsProperty:Pp,ImageAssetsProperty:x9,VideoAssetsProperty:wp})}class V9 extends Ne{getTitle(){return this.$i18n("default.layout.item.property.title.constraints")}getClassName(){return"elf--default-layout-item-property"}getBody(){return` +
        +
        +
        +
        +
        +
        + `}[G("$constraintsInfo")+Ee](){var e=this.$context.selection.current;const t=(e==null?void 0:e["constraints-horizontal"])||Me.MIN,r=(e==null?void 0:e["constraints-vertical"])||Me.MIN;return` +
        + + +
        +
        +
        + + +
        +
        +
        +
        +
        + `}[G("$constraintsInfoInput")](){var e=this.$context.selection.current;const t=e==null?void 0:e.hasLayout();return` +
        + ${O("SelectEditor",{ref:"$constraintsHorizontal",key:"constraints-horizontal",value:(e==null?void 0:e["constraints-horizontal"])||"min",label:R("width"),compact:!0,options:[{value:"min",text:"Left"},{value:"max",text:"Right"},{value:"stretch",text:"Left and Right",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} +
        + +
        + ${O("SelectEditor",{ref:"$constraintsVertical",key:"constraints-vertical",value:(e==null?void 0:e["constraints-vertical"])||"min",label:R("height"),compact:!0,options:[{value:"min",text:"Top"},{value:"max",text:"Bottom"},{value:"stretch",text:"Top and Bottom",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} +
        + `}[z("$constraintsInfo .item")](e){const[t,r]=e.$dt.attrs("data-value","data-key"),i=this.$context.selection.current;!i||(i.changeConstraints(r,t,e.shiftKey),this.trigger("changeConstraints",r,i[r]))}[K("changeConstraints")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+He(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.isInDefault()&&e.parent.isNot("project")})}}class O9 extends X{template(){return w("div",{class:"elf--flex-grow-tool-view"})}[G("$el")+Ee](){return this.$context.selection.map(e=>{const t=e.parent;if(!!t&&!t.is("project")&&t.isLayout(Ae.FLEX)!==!1)return t.layers.map(r=>{const a=this.$viewport.applyVerties(r.verties)[4];let n=0,o=r.screenWidth||0;const l=t==null?void 0:t.flexDirection;return l===Kt.ROW?(r.resizingHorizontal===Ce.FILL_CONTAINER&&(n=r.flexGrow||1),o=r.screenWidth):l===Kt.COLUMN&&(r.resizingVertical===Ce.FILL_CONTAINER&&(n=r.flexGrow||1),o=r.screenHeight),w("div",{class:"flex-grow-item",style:{left:p.px(a[0]),top:p.px(a[1])},"data-flex-item-id":r.id,"data-parent-direction":l,"data-flex-grow":n},w("span",{class:"size"},Math.floor(o))," ",w("span",{class:"grow"},n||"x"))}).join("")})}[ve("$el .flex-grow-item")+_e()+Se()](e){const[t,r]=e.$dt.attrs("data-flex-item-id","data-flex-grow");this.setState({id:t,grow:+r},!1)}getFlexGrow(e,t,r,i,a){let n=r;return e===Kt.ROW&&t.resizingHorizontal===Ce.FILL_CONTAINER?n=r+Math.floor(i/10):e===Kt.COLUMN&&t.resizingVertical===Ce.FILL_CONTAINER&&(n=r+Math.floor(a/10)),n=Math.max(1,n),n}move(e,t){const{id:r,grow:i}=this.state,a=this.$editor.get(r);if(!a)return;const n=a.parent;if(!n)return;const o=n.flexDirection;let l=this.getFlexGrow(o,a,i,e,t);this.$commands.emit("setAttribute",{[r]:{flexGrow:l}})}end(e,t){const{id:r,grow:i}=this.state,a=this.$editor.get(r);if(!a)return;const n=a.parent;if(!n)return;const o=n.flexDirection;let l=this.getFlexGrow(o,a,i,e,t);e===0&&t===0?o===Kt.ROW&&a.resizingHorizontal!==Ce.FILL_CONTAINER?this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:1,resizingHorizontal:Ce.FILL_CONTAINER}}):o===Kt.COLUMN&&a.resizingVertical!==Ce.FILL_CONTAINER&&this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:1,resizingVertical:Ce.FILL_CONTAINER}}):this.$commands.executeCommand("setAttribute","change self resizing",{[r]:{flexGrow:l}}),this.nextTick(()=>{this.refresh()},10)}[M(it)](){this.refresh()}[M(Oe)+sa(100)](){this.refresh()}[M(Lt)+sa(1)](){this.refresh()}[Ct("set.move.control.point")](){this.refresh()}}class j9 extends X{initialize(){super.initialize(),this.directionOptions=this.getDirectionOptions(),this.wrapOptions=this.getWrapOptions(),this.justifyContentOptions=this.getJustifyContentOptions(),this.alignItemsOptions=this.getAlignItemsOptions()}getDirectionOptions(){return this.makeOptionsFunction("row,column")}getWrapOptions(){return this.makeOptionsFunction("nowrap,wrap")}getJustifyContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around")}getAlignItemsOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch")}getAlignContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch")}makeOptionsFunction(e){return e.split(",").map(t=>({value:t,text:this.$i18n("flex.layout.editor."+t)}))}initState(){return b({},this.props.value)}setValue(e){this.setState(b({},e))}getValue(){return this.state}modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}[G("$body")+Ee](){const e=this.$context.selection.current;if(!e)return"";const t=Math.min(e.paddingTop||0,50),r=Math.min(e.paddingLeft||0,50),i=Math.min(e.paddingRight||0,50),a=Math.min(e.paddingBottom||0,50),n=`padding-top:${t}px;padding-left: ${r}px;padding-right:${i}px;padding-bottom: ${a}px;`;return`
        ${O("SelectIconEditor",{key:"flexDirection",ref:"$flexDirection",value:this.state.flexDirection||Kt.ROW,options:this.directionOptions,icons:["east","south"],onchange:"changeKeyValue"})}
        ${O("NumberInputEditor",{compact:!0,ref:"$flex-gap",label:R("space"),key:"gap",value:this.state.gap,min:0,max:100,step:1,onchange:"changeKeyValue"})}
        ${O("NumberInputEditor",{compact:!0,label:R("padding"),key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:100,step:1,onchange:"changePadding"})}
        ${O("ToggleButton",{compact:!0,key:"flexWrap",ref:"$wrap",size:30,checkedValue:"wrap",value:this.state.flexWrap||oo.NOWRAP,toggleLabels:[R("wrap"),R("wrap")],toggleValues:[oo.NOWRAP,oo.WRAP],onchange:"changeKeyValue"})}
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + ${[1,2,3].map(()=>` +
        +
        +
        +
        +
        + `).join(` +`)} +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        + +
        +
        ${this.$i18n("flex.layout.editor.justify-content")}
        + ${O("SelectIconEditor",{key:"justifyContent",ref:"$justify",value:this.state.justifyContent||Qs.FLEX_START,options:this.justifyContentOptions,icons:["start","end","horizontal_align_center","horizontal_distribute","justify_content_space_around"],onchange:"changeKeyValue"})} +
        +
        +
        ${this.$i18n("flex.layout.editor.align-items")}
        + ${O("SelectIconEditor",{key:"alignItems",ref:"$alignItems",value:this.state.alignItems||Ri.FLEX_START,options:this.alignItemsOptions,icons:["vertical_align_top","vertical_align_bottom","vertical_align_center","vertical_align_baseline","vertical_align_stretch"],onchange:"changeKeyValue"})} +
        + `}template(){return` +
        + `}[K("changeKeyValue")](e,t){this.setState({[e]:t},!1),this.modifyData(e,t),this.refresh()}[K("changePadding")](e,t){this.setState({[e]:t},!1),this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t}),this.refresh()}[z("$body .tool-area-item")](e){const t=e.$dt,[r,i]=t.attrs("data-justify-content","data-align-items","data-align-content");this.state.justifyContent===Qs.SPACE_BETWEEN?(this.setState({alignItems:i},!1),this.modifyData("alignItems",i)):this.state.justifyContent===Qs.SPACE_AROUND?(this.setState({alignItems:i},!1),this.modifyData("align-item",i)):(this.setState({justifyContent:r,alignItems:i},!1),this.modifyData("justifyContent",r),this.modifyData("alignItems",i)),this.refresh()}}const R9=/(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi;class z9 extends X{getLayoutItemOptions(){return"none,auto,repeat,length".split(",").map(e=>({value:e,text:this.$i18n(`grid.box.editor.${e}`)}))}initState(){return{label:this.props.label,list:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){let t=null;for(var r=[];(t=R9.exec(e))!==null;){var i=t[0];if(i==="auto")r.push({type:"auto",count:0,value:"0px"});else if(i.includes("repeat")){var a=i.split("repeat(")[1].split(")");a.pop();let[n,...o]=a.join("").split(",");r.push({type:"repeat",count:n,value:o.join(", ")})}else r.push({type:"length",count:1,value:i})}return r}getValue(){return this.state.list.map(e=>e.type==="repeat"?`repeat(${e.count}, ${e.value})`:e.type==="auto"||e.type==="none"?e.type:e.value).join(" ")}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(e,t){return` +
        +
        + ${O("SelectEditor",{ref:`$${t}-type`,compact:!0,options:this.getLayoutItemOptions(),key:"type",value:e.type||"auto",params:t,onchange:"changeKeyValue"})} +
        +
        + ${O("NumberInputEditor",{compact:!0,ref:`$${t}-count`,key:"count",value:e.count,params:t,max:1e3,onchange:"changeKeyValue"})} +
        +
        + ${O("InputRangeEditor",{ref:`$${t}-value`,compact:!0,key:"value",value:e.value,params:t,units:["auto","fr","px","em","%"],onchange:"changeKeyValue"})} +
        +
        + + +
        +
        + `}[G("$list")](){return this.state.list.map((e,t)=>this.makeItem(e,t))}template(){return` +
        +
        +
        +
        + + +
        +
        ${this.$i18n("grid.box.editor.count")}
        +
        ${this.$i18n("grid.box.editor.value")}
        +
        +
        +
        +
        +
        + `}[z("$list .remove")](e){var t=+e.$dt.closest("item").attr("data-index");this.state.list.splice(t,1),this.refresh(),this.modifyData()}[z("$list .copy")](e){var t=+e.$dt.closest("item").attr("data-index"),r=ye(this.state.list[t]);this.state.list.splice(t,0,r),this.refresh(),this.modifyData()}[z("$add")](){this.trigger("add")}[M("add")](){this.state.list.push({type:"auto",count:0,value:"0px"}),this.refresh(),this.modifyData()}[K("changeKeyValue")](e,t,r){var i=+r,a=this.state.list[i];a&&(e==="type"&&this.refs.$list.$(`[data-index="${i}"]`).attr("data-repeat-type",t),a[e]=t),this.modifyData()}}class A9 extends X{initState(){return{label:this.props.label,value:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){return p.parse(e)}getValue(){return this.state.value}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(){return` +
        +
        + ${O("InputRangeEditor",{label:this.state.label,wide:!0,ref:"$value",key:"value",value:this.state.value,max:500,units:["px","em","%"],onchange:"changeKeyValue"})} +
        +
        + `}[G("$list")](){return this.makeItem()}template(){return` +
        +
        +
        +
        +
        + `}[K("changeKeyValue")](e,t){this.state.value=t,this.modifyData()}}class Di{static parseStyle(e){const t=[];return da(e).forEach(r=>{switch(r.func){case Ue.REPEAT:for(var i=0,a=r.parsed.count;i{r[i.id]={gridRowStart:Math.max(1,Math.min(t.length,i.gridRowStart)),gridRowEnd:Math.min(t.length+1,i.gridRowEnd)}}),this.$commands.executeCommand("setAttribute","change grid rows",ie(b({},r),{[e.id]:{gridTemplateRows:Di.join(t)}}))}updateColumns(e,t){const r={};e.layers.forEach(i=>{r[i.id]={gridColumnStart:Math.max(1,Math.min(t.length,i.gridColumnStart)),gridColumnEnd:Math.min(t.length+1,i.gridColumnEnd)}}),this.$commands.executeCommand("setAttribute","change grid columns",ie(b({},r),{[e.id]:{gridTemplateColumns:Di.join(t)}}))}updateColumnGap(e,t){this.$commands.executeCommand("setAttribute","change grid column gap",{[e.id]:{gridColumnGap:`${t}`}})}updateRowGap(e,t){this.$commands.executeCommand("setAttribute","change grid row gap",{[e.id]:{gridRowGap:`${t}`}})}createNewGridItems(e){let t=[];return e.length===0?t=[p.fr(1)]:t=[...e,e[e.length-1]],t}copyNewGridItems(e,t){return[...e.slice(0,t+1),...e.slice(t)]}getScaleDist(e){return e/this.$viewport.scale}}class F9 extends D9{checkTargetLayer(){const e=this.getGridTargetLayer();return!(!e||e.isLayout(Ae.GRID)===!1)}[z("$grid .column-plus")+fe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateColumns(e.current,this.createNewGridItems(e.columns))}[z("$grid .row-plus")+fe("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateRows(e.current,this.createNewGridItems(e.rows))}[z("$grid .column-delete")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.columns.length<2){this.alert("Alert","Columns can not be less than one.",2e3);return}const r=+e.$dt.data("index"),i=[...t.columns.slice(0,r),...t.columns.slice(r+1)];this.updateColumns(t.current,i)}[z("$grid .column-add")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),r=+e.$dt.data("index");this.updateColumns(t.current,this.copyNewGridItems(t.columns,r),r+1)}[z("$grid .row-add")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),r=+e.$dt.data("index");this.updateRows(t.current,this.copyNewGridItems(t.rows,r))}[z("$grid .row-delete")+fe("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.rows.length<2){this.alert("Alert","Rows can not be less than one.",2e3);return}const r=+e.$dt.data("index"),i=[...t.rows.slice(0,r),...t.rows.slice(r+1)];this.updateRows(t.current,i)}}class B9 extends F9{[ve("$gridGap .gap-tool.column-gap")+fe("checkTargetLayer")+fo("moveFirstColumnGap")+_e("moveColumnGap")+Se("moveEndColumnGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.columnGap=t.columnGap,this.lastColumnGap=t.columnGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}updateGapPointer(e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition());this.refs.$pointer.text(`${e}`),this.refs.$pointer.css({left:p.px(t[0]),top:p.px(t[1]+20)})}moveFirstColumnGap(){this.refs.$pointer.show(),this.updateGapPointer(this.columnGap)}moveColumnGap(){const e=this.$viewport.getWorldPosition(),r=$e([],e,this.initMousePosition)[0]/this.getScaleDist(100),i=this.columnGap;let a=i;i instanceof p&&(i.isPercent()?a=p.percent(Math.max(i.value+r*this.getScaleDist(5),0)).round(1e3):(i.isPx()||i.isEm())&&(a=p.px(Math.max(i.value+r*this.getScaleDist(100),0)).floor())),this.lastColumnGap=a,this.updateColumnGap(this.current,a),this.updateGapPointer(this.lastColumnGap)}moveEndColumnGap(){const e=this.$viewport.getWorldPosition();se(e,this.initMousePosition)<1&&(this.lastColumnGap.isPx()||this.lastColumnGap.isEm()?this.lastColumnGap=p.makePercent(this.lastColumnGap.value,this.current.screenWidth):this.lastColumnGap=this.lastColumnGap.toPx(this.current.screenWidth)),this.updateColumnGap(this.current,this.lastColumnGap),this.refs.$pointer.hide()}[ve("$gridGap .gap-tool.row-gap")+fe("checkTargetLayer")+fo("moveFirstColumnGap")+_e("moveRowGap")+Se("moveEndRowGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.rowGap=t.rowGap,this.lastColumnGap=t.rowGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRowGap(){const e=this.$viewport.getWorldPosition(),r=$e([],e,this.initMousePosition)[1]/this.getScaleDist(100),i=this.rowGap;let a=i;console.log(i),i instanceof p&&(i.isPercent()?a=p.percent(Math.max(i.value+r*this.getScaleDist(5),0)).round(1e3):(i.isPx()||i.isNumber())&&(a=p.px(Math.max(i.value+r*this.getScaleDist(100),0)).floor())),this.lastRowGap=a,this.updateRowGap(this.current,a),this.updateGapPointer(this.lastRowGap)}moveEndRowGap(){const e=this.$viewport.getWorldPosition();se(e,this.initMousePosition)<1&&(this.lastRowGap||(this.lastRowGap=p.px(0)),this.lastRowGap.isPx()||this.lastRowGap.isNumber()?this.lastRowGap=p.makePercent(this.lastRowGap.value,this.current.screenHeight):this.lastRowGap=this.lastRowGap.toPx(this.current.screenHeight)),this.updateRowGap(this.current,this.lastRowGap),this.refs.$pointer.hide()}[ve("$grid .grid-item-tool.column .item")+_e("moveColumn")+Se("moveEndColumn")](e){const t=+e.$dt.data("index"),r=this.getGridLayoutInformation();this.current=r.current,this.columns=r.columns,this.selectedColumnIndex=t,this.selectedColumnWidth=r.columns[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveColumn(){const e=this.$viewport.getWorldPosition(),t=$e([],e,this.initMousePosition),r=t[0]/this.getScaleDist(100),i=this.selectedColumnWidth;if(i instanceof p){if(i.isPercent()){var a=Math.max(i.value+r*this.getScaleDist(5),1);this.columns[this.selectedColumnIndex]=p.percent(a).round(1e3)}else if(i.isPx()||i.isNumber()){var a=Math.max(10,i.value+r*this.getScaleDist(100));this.columns[this.selectedColumnIndex]=p.px(a).floor()}else if(i.isFr()){var a=Math.max(i.value+Math.floor(t[0]/this.getScaleDist(20))*.25,.25);this.columns[this.selectedColumnIndex]=p.fr(a)}else{var a=Math.max(i.value+r*1,10);this.columns[this.selectedColumnIndex]=new p(a,i.unit)}this.updateColumns(this.current,this.columns)}}changedColumnSize(){const e=this.getGridLayoutInformation(),t=this.selectedColumnIndex,r=this.selectedColumnWidth;if(r instanceof p)r.isPercent()?this.columns[t]=p.fr(1):r.isPx()||r.isNumber()?this.columns[t]=p.makePercent(r.value,e.current.screenWidth).round(1e3):r.isFr()&&(this.columns[t]="auto");else if(r==="auto"){const{items:i}=this.state.lastGridInfo,a=i.find(n=>n.column===t+1);this.columns[t]=p.px(a.rect.width).floor()}}moveEndColumn(){const e=this.$viewport.getWorldPosition();se(e,this.initMousePosition)<1&&this.changedColumnSize(),this.updateColumns(this.current,this.columns)}[ve("$grid .grid-item-tool.row .item")+_e("moveRow")+Se("moveEndRow")](e){const t=+e.$dt.data("index"),r=this.getGridLayoutInformation();this.current=r.current,this.rows=r.rows,this.selectedRowIndex=t,this.selectedRowHeight=r.rows[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRow(){const e=this.$viewport.getWorldPosition(),t=$e([],e,this.initMousePosition),r=t[1]/this.getScaleDist(30),i=this.selectedRowHeight;if(i instanceof p){if(i.isPercent()){var a=Math.max(i.value-r*this.getScaleDist(5),1);this.rows[this.selectedRowIndex]=p.percent(a).round(1e3)}else if(i.isPx()||i.isNumber()){var a=Math.max(10,i.value-r*this.getScaleDist(100));this.rows[this.selectedRowIndex]=p.px(a).floor()}else if(i.isFr()){var a=Math.max(i.value+Math.floor(t[1]/this.getScaleDist(20))*.25,.25);this.rows[this.selectedRowIndex]=p.fr(a)}else{var a=Math.max(i.value-r*1,10);this.rows[this.selectedRowIndex]=new p(a,i.unit)}this.updateRows(this.current,this.rows)}}changedRowSize(){const e=this.getGridLayoutInformation(),t=this.selectedRowIndex,r=this.selectedRowHeight;if(r instanceof p)r.isPercent()?this.rows[t]=p.fr(1):r.isPx()||r.isNumber()?this.rows[t]=p.makePercent(r.value,e.current.screenHeight).round(1e3):r.isFr()&&(this.rows[t]="auto");else if(r==="auto"){const{items:i}=this.state.lastGridInfo,a=i.find(n=>n.row===t+1);this.rows[t]=p.px(a.rect.height).floor()}}moveEndRow(){const e=this.$viewport.getWorldPosition();se(e,this.initMousePosition)<1&&this.changedRowSize(),this.updateRows(this.current,this.rows)}}class N9 extends B9{template(){return w("div",{class:"elf--grid-grow-tool-view"},w("div",{class:"layout-rect",ref:"$grid"}),w("div",{class:"layout-rect blank-tool",ref:"$gridGap"}),w("div",{class:"layout-pointer",ref:"$pointer"}))}[ae("$el")](){var t;const e=this.getGridTargetLayer();return{"data-drag-target-item":Boolean(this.$context.selection.dragTargetItem),"data-grid-layout-own":((t=this.$context.selection.current)==null?void 0:t.id)===(e==null?void 0:e.id),style:{display:e?"block":"none"}}}[ae("$grid")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(Ae.GRID)===!1)return"";const t=Et(this.$viewport.applyVerties(e.verties)),r=this.getGridLayoutInformation(),[i,a,n,o]=this.getScaledInformation([p.px(r.current.paddingTop),p.px(r.current.paddingRight),p.px(r.current.paddingBottom),p.px(r.current.paddingLeft)]),l=this.getScaledInformation(r.columns),c=this.getScaledInformation(r.rows),h=this.getScaledLength(r.columnGap),u=this.getScaledLength(r.rowGap),d=$e([],e.verties[1],e.verties[0]),v=rt(d[0],d[1])-180;return{style:{display:"grid","grid-template-columns":Di.join(l),"grid-template-rows":Di.join(c),"grid-column-gap":h,"grid-row-gap":u,left:p.px(t.left),top:p.px(t.top),width:p.px(t.width),height:p.px(t.height),"padding-top":i,"padding-right":a,"padding-bottom":n,"padding-left":o,"transform-origin":"left top",transform:`rotate(${v}deg)`}}}[ae("$gridGap")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(Ae.GRID)===!1)return"";const t=Et(this.$viewport.applyVerties(e.verties)),r=$e([],e.verties[1],e.verties[0]),i=rt(r[0],r[1])-180;return{style:{left:p.px(t.left),top:p.px(t.top),width:p.px(t.width),height:p.px(t.height),"transform-origin":"left top",transform:`rotate(${i}deg)`}}}getScaledInformation(e){return e.map(t=>this.getScaledLength(t))}getScaledLength(e){return ct(e)?e:e instanceof p&&(e.isPx()||e.isNumber())?e.clone().mul(this.$viewport.scale):e}getGridTargetLayer(){if(this.$context.selection.dragTargetItem)return this.$context.selection.dragTargetItem;const e=this.$context.selection.current;if(!e)return null;if(e.isLayout(Ae.GRID))return e;const t=e.parent;return t&&t.is("project")?null:t&&t.isLayout(Ae.GRID)?t:null}getParsedValue(e){return e==="auto"?e:p.parse(e)}getGridLayoutInformation(){const e=this.getGridTargetLayer(),t=Di.parseStyle(e.gridTemplateColumns),r=Di.parseStyle(e.gridTemplateRows);return{current:e,columns:t,columnGap:this.getParsedValue(e.gridColumnGap),rows:r,rowGap:this.getParsedValue(e.gridRowGap)}}afterLoadRendering(e,t){this.trigger("refreshGridInformation",e,t)}[K("refreshGridInformation")+He(10)](e,t){const r=this.getGridTargetLayer();if(!r||r.isLayout(Ae.GRID)===!1||t!=="$grid")return;const i=this.getGridLayoutInformation(),a=this.$viewport.scale,n=e.$$(".grid-item").map(o=>{const[l,c]=o.attrs("data-row","data-column").map(_=>+_),{x:h,y:u,width:d,height:v}=o.offsetRect(),g={x:h/a,y:u/a,width:d/a,height:v/a},y=oe(mt(g.x,g.y,g.width,g.height),i.current.absoluteMatrix),S=y.filter((_,L)=>L<4);return{row:l,column:c,rect:g,info:i,verties:y,originVerties:S,originRect:Et(S)}});this.state.lastGridInfo={info:i,items:n},this.load("$gridGap"),this.$context.selection.updateGridInformation({info:i,items:n})}[G("$gridGap")+Ee](){if(!this.getGridTargetLayer()||this.$config.true("set.move.control.point")||!this.$context.selection.current)return"";const t=this.state.lastGridInfo,r=this.$viewport.scale;if(!t)return"";const{info:i,items:a}=t,{columns:n,rows:o}=i,l=[],c=a.filter(T=>T.column===1),h=a.filter(T=>T.row===1),u=Math.min(...c.map(T=>T.verties[0][1])),v=Math.max(...c.map(T=>T.verties[2][1]))-u;for(var g=1,y=n.length;gT.verties[0][0])),L=Math.max(...h.map(T=>T.verties[2][0]))-S;for(var I=1,y=o.length;IT.type==="column-gap"?w("div",{class:"gap-tool column-gap",style:{left:p.px(T.x*r),top:p.px(T.y*r),width:p.px(Math.max(T.width*r,5)),height:p.px(T.height*r)}}):T.type==="row-gap"?w("div",{class:"gap-tool row-gap",style:{left:p.px(T.x*r),top:p.px(T.y*r),height:p.px(Math.max(T.height*r,5)),width:p.px(T.width*r)}}):"")}isSelectedColumn(e){const t=this.$context.selection.current;return t.gridColumnStart<=e&&e{const o=i&&this.isSelectedColumn(n+1)?"selected":"";return w("div",{class:`grid-item-tool column ${o}`,"data-index":n,style:{"grid-column":`${n+1} / span 1`,"grid-row":"1 / span 1"}},w("div",{class:"grid-item-tool-inner"},w("div",{class:"item","data-index":n},w("span",null,t.columns[n])),w("div",{class:"drag-handle right"},w("div",{class:"column-delete","data-index":n,title:`Delete ${t.columns[n]}`},R("close")),w("div",{class:"column-add","data-index":n,title:`Add ${t.columns[n]}`},R("add")))))}),w("div",{class:"grid-item-tool append column-plus",style:{"grid-column":`${t.columns.length} / span 1`,"grid-row":"1 / span 1"}},R("add")),Array.from(Array(t.rows.length).keys()).map(n=>{const o=i&&this.isSelectedRow(n+1)?"selected":"";return w(jt,null,w("div",{class:`grid-item-tool row ${o}`,style:{"grid-row":`${n+1} / span 1`,"grid-column":"1 / span 1"}},w("div",{class:"grid-item-tool-inner"},w("div",{class:"item","data-index":n},w("span",null,t.rows[n])),w("div",{class:"drag-handle bottom"},w("div",{class:"row-delete","data-index":n,title:`Delete ${t.rows[n]}`},R("close")),w("div",{class:"row-add","data-index":n,title:`Add ${t.rows[n]}`},R("add"))))))}),w("div",{class:"grid-item-tool append row-plus",style:{"grid-row":`${t.rows.length} / span 1`,"grid-column":"1 / span 1"}},R("add")),Array.from(Array(r).keys()).map(n=>{const o=n%t.columns.length,l=Math.floor(n/t.columns.length);return w(jt,null,w("div",{class:"grid-item","data-row":l+1,"data-column":o+1,style:{"grid-column":`${o+1} / span 1`,"grid-row":`${l+1} / span 1`}}))}))}[M("refreshGridToolInfo")](){this.refresh()}[M(it)](){this.refresh()}[M(Oe)+He(100)](){this.refresh()}[M(Lt)](){this.refresh()}}class G9 extends X{modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}template(){return` +
        + `}[G("$body")+Ee](){const e=this.$context.selection.current;return!e||e.isLayout(Ae.GRID)===!1?"":` +
        + ${O("NumberInputEditor",{wide:!0,label:"grid padding",key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:300,step:1,onchange:"changePadding"})} +
        +
        + ${O("GridGapEditor",{label:this.$i18n("grid.layout.editor.column.gap"),ref:"$columnGap",key:"gridColumnGap",value:e.gridColumnGap||"",onchange:"changeKeyValue"})} +
        +
        + ${O("GridGapEditor",{label:this.$i18n("grid.layout.editor.row.gap"),ref:"$rowGap",key:"gridRowGap",value:e.gridRowGap||"",onchange:"changeKeyValue"})} +
        + `}[K("changePadding")](e,t){this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t})}[K("changeKeyValue")](e,t,r){this.modifyData(e,t,r)}}class H9 extends Ne{getTitle(){return this.$i18n("layout.property.title")}getClassName(){return"elf--layout-property"}getBody(){return` +
        + `}getTools(){return` +
        + `}[G("$layoutType")](){const e=this.$context.selection.current;return e?O("SelectIconEditor",{ref:"$layout",key:"layout",height:24,value:e.layout,options:[Ae.DEFAULT,Ae.FLEX,Ae.GRID],icons:["layout_default","layout_flex","layout_grid"],onchange:"changeLayoutType"}):""}[G("$layoutProperty")+Ee](){var e=this.$context.selection.current||{layout:"default"};return` +
        +
        +
        + ${O("FlexLayoutEditor",{ref:"$flex",key:"flex-layout",value:{flexDirection:e.flexDirection,flexWrap:e.flexWrap,justifyContent:e.justifyContent,alignItems:e.alignItems,alignContent:e.alignContent,gap:e.gap},onchange:"changeLayoutInfo"})} +
        +
        + ${O("GridLayoutEditor",{ref:"$grid",key:"grid-layout",value:e["grid-layout"]||"",onchange:"changeLayoutInfo"})} +
        +
        + `}[K("changeLayoutInfo")](e,t){e==="padding"?this.$commands.executeCommand("setAttribute","change padding",this.$context.selection.packByValue(t)):this.$commands.executeCommand("setAttribute","change layout info",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.emit("refreshAllElementBoundSize")})}[K("changeLayoutType")](e,t){this.$context.selection.reset(this.$context.selection.packByValue({[e]:t})),this.updateTitle(),this.$commands.executeCommand("setAttribute","change layout type",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()})}get editableProperty(){return"layout"}enableHasChildren(){return this.$context.selection.current.enableHasChildren()}updateTitle(){this.setTitle(this.$context.selection.current.layout+" Layout")}[M(Oe)+fe("checkShow")+fe("enableHasChildren")](){this.updateTitle(),this.refresh()}}class U9 extends Ne{getTitle(){return this.$i18n("layout.property.resizing.self.title")}getClassName(){return"elf--resizing-item-property"}getBody(){return` +
        +
        +
        +
        +
        +
        + `}[G("$resizingModeInfo")+Ee](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||Ce.FIXED,r=e.resizingVertical||Ce.FIXED;return` +
        +
        +
        +
        +
        ${R("keyboard_arrow_up")}
        +
        ${R("keyboard_arrow_down")}
        +
        +
        +
        ${R("keyboard_arrow_left")}
        +
        ${R("keyboard_arrow_right")}
        +
        +
        +
        +
        + +
        + `}makeOptionsForHorizontal(){return[{value:Ce.FIXED,text:"Fixed Width"},{value:Ce.FILL_CONTAINER,text:"Fill Container"}]}makeOptionsForVertical(){return[{value:Ce.FIXED,text:"Fixed Height"},{value:Ce.FILL_CONTAINER,text:"Fill Container"}]}[G("$resizingModeInfoInput")+Ee](){var e=this.$context.selection.current||{};return this.setState({resizingHorizontal:(e==null?void 0:e.resizingHorizontal)||Ce.FIXED,resizingVertical:(e==null?void 0:e.resizingVertical)||Ce.FIXED},!1),` +
        + + ${O("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:this.state.resizingHorizontal,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} +
        + +
        + + ${O("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:this.state.resizingVertical,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} +
        + `}[z("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===Ce.FIXED?this.trigger("changeResizingMode",t,Ce.FILL_CONTAINER):this.trigger("changeResizingMode",t,Ce.FIXED)}[K("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply self resizing",this.$context.selection.packByValue({[e]:t,flexGrow:1})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+He(100)](){this.refreshShow(()=>{var t,r;var e=this.$context.selection.current;return((t=e==null?void 0:e.parent)==null?void 0:t.hasLayout())&&((r=e==null?void 0:e.parent)==null?void 0:r.isLayout(Ae.GRID))===!1})}[M(Lt)](){const e=this.$context.selection.current;e&&e.changedLayoutItem&&(e.resizingHorizontal!==this.state.resizingHorizontal||e.resizingVertical!==this.state.resizingVertical)&&this.refresh()}}class W9 extends Ne{getTitle(){return this.$i18n("layout.property.resizing.title")}getClassName(){return"elf--resizing-property"}getBody(){return` +
        +
        +
        +
        +
        +
        + `}[G("$resizingModeInfo")+Ee](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||Ce.FIXED,r=e.resizingVertical||Ce.FIXED;return` +
        +
        +
        +
        ${R("keyboard_arrow_down")}
        +
        ${R("keyboard_arrow_up")}
        +
        +
        +
        ${R("keyboard_arrow_right")}
        +
        ${R("keyboard_arrow_left")}
        +
        +
        +
        +
        +
        +
        + `}makeOptionsForHorizontal(){return[{value:Ce.FIXED,text:"Fixed Width"},{value:Ce.HUG_CONTENT,text:"Hug Content"}]}makeOptionsForVertical(){return[{value:Ce.FIXED,text:"Fixed Height"},{value:Ce.HUG_CONTENT,text:"Hug Content"}]}[G("$resizingModeInfoInput")](){var e=this.$context.selection.current||{};return` +
        + + ${O("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:(e==null?void 0:e.resizingHorizontal)||Ce.FIXED,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} +
        + +
        + + ${O("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:(e==null?void 0:e.resizingVertical)||Ce.FIXED,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} +
        + `}[z("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===Ce.FIXED?this.trigger("changeResizingMode",t,Ce.HUG_CONTENT):this.trigger("changeResizingMode",t,Ce.FIXED)}[K("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[M(Oe)+He(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.hasLayout()})}}function X9(s){s.registerElement({FlexLayoutEditor:j9,GridLayoutEditor:G9,GridBoxEditor:z9,GridGapEditor:A9}),s.registerUI("inspector.tab.style",{LayoutProperty:H9,ResizingProperty:W9,ResizingItemProperty:U9,DefaultLayoutItemProperty:V9}),s.registerUI("canvas.view",{FlexGrowToolView:O9,GridGrowToolView:N9},su.LAYOUT_TOOL)}class Y9 extends X{template(){return w("div",{class:"elf--line-view sepia(0.2)"})}[Ct("vertical.line")](){this.refresh()}[Ct("horizontal.line")](){this.refresh()}[M(it,Lt)](){this.refresh()}[G("$el")+Ee](){return[...this.$config.get("vertical.line").map((e,t)=>{const r=this.$viewport.applyVertex([0,e,0]);return w("div",{class:"vertical-line","data-index":t,style:`transform: translate3d(0px, ${r[1]}px, 0px);`})}),...this.$config.get("horizontal.line").map((e,t)=>{const r=this.$viewport.applyVertex([e,0,0]);return w("div",{class:"horizontal-line","data-index":t,style:`transform: translate3d(${r[0]}px, 0px, 0px);`})})]}[ve("$el .horizontal-line")+_e("moveHorizontalLine")+Se("moveEndHorizontalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveHorizontalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("horizontal.line",this.startIndex,e[0])}moveEndHorizontalLine(){this.$commands.emit("recoverCursor")}[ve("$el .vertical-line")+_e("moveVerticalLine")+Se("moveEndVerticalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveVerticalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("vertical.line",this.startIndex,e[1])}moveEndVerticalLine(){this.$commands.emit("recoverCursor")}}function K9(s){s.registerUI("canvas.view",{LineView:Y9})}var Z9=[{type:"button",icon:"navigation",events:["config:editing.mode"],selected:s=>s.context.config.is("editing.mode",_t.SELECT),action:s=>{s.context.commands.emit("addLayerView","select"),s.context.config.is("editing.mode.itemType",_t.SELECT)}},{type:"button",icon:"artboard",events:["config:editing.mode","config:editing.mode.itemType"],selected:s=>s.context.config.is("editing.mode",_t.APPEND)&&s.context.config.is("editing.mode.itemType","artboard"),action:s=>{s.context.commands.emit("addLayerView","artboard")}},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.css.itemType")))==null?void 0:t.icon)||R("rect")},items:[{icon:R("rect"),title:"Rect Layer",key:"rect",command:"addLayerView",args:["rect",{backgroundColor:"#ececec"}],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","rect")},shortcut:fr({key:"R"})},{icon:R("lens"),title:"Circle Layer",key:"circle",command:"addLayerView",args:["circle"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","circle")},shortcut:fr({key:"O"})},{icon:R("image"),title:"Image",key:"image",command:"addLayerView",args:["image"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","image")},shortcut:fr({key:"I"})},"-",{icon:R("video"),title:"Video",key:"video",command:"addLayerView",args:["video"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","video")},shortcut:fr({key:"V"})},{icon:R("iframe"),title:"IFrame",key:"iframe",command:"addLayerView",args:["iframe"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","iframe")},shortcut:fr({key:"F"})},{icon:R("rect"),title:"SampleLayer",key:"sample",command:"addLayerView",args:["sample"],closable:!0,nextTick:s=>{s.context.config.set("editing.css.itemType","sample")}}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.css.itemType"],selected:s=>s.context.config.is("editing.mode",_t.APPEND)&&(s.context.config.is("editing.mode.itemType","rect")||s.context.config.is("editing.mode.itemType","circle")||s.context.config.is("editing.mode.itemType","image")||s.context.config.is("editing.mode.itemType","video")||s.context.config.is("editing.mode.itemType","iframe")),selectedKey:s=>s.context.config.get("editing.css.itemType")},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.draw.itemType")))==null?void 0:t.icon)||R("pentool")},items:[{icon:R("pentool"),title:"Pen",key:"path",command:"addLayerView",args:["path"],closable:!0,nextTick:s=>{s.context.config.set("editing.draw.itemType","path")},shortcut:fr({key:"P"})},{icon:R("brush"),title:"Pencil",key:"brush",command:"addLayerView",args:["brush"],closable:!0,nextTick:s=>{s.context.config.set("editing.draw.itemType","brush")},shortcut:fr({key:"B"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.draw.itemType"],selected:s=>s.context.config.is("editing.mode.itemType","path")||s.context.config.is("editing.mode.itemType","draw"),selectedKey:s=>s.context.config.get("editing.draw.itemType")},{type:"dropdown",icon:(s,e)=>{var t;return((t=e.findItem(s.context.config.get("editing.svg.itemType")))==null?void 0:t.icon)||R("outline_rect")},items:[{icon:R("outline_rect"),title:"Rectangle",key:"svg-rect",command:"addLayerView",args:["svg-rect"],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-rect")},shortcut:fr({key:"Shift+R"})},{icon:R("outline_circle"),title:"Circle",key:"svg-circle",command:"addLayerView",args:["svg-circle"],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-circle")},shortcut:fr({key:"Shift+O"})},{icon:R("polygon"),title:"Polygon",key:"svg-polygon",command:"addLayerView",args:["polygon",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","polygon")},shortcut:fr({key:"Shift+P"})},{icon:R("star"),title:"Star",key:"star",command:"addLayerView",args:["star",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","star")},shortcut:fr({key:"Shift+S"})},"-",{icon:R("smooth"),title:"Spline",key:"spline",command:"addLayerView",args:["spline",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","spline")},shortcut:fr({key:"Shift+L"})},{icon:R("text_rotate"),title:"TextPath",key:"svg-texpath",command:"addLayerView",args:["svg-textpath",{backgroundColor:"transparent"}],closable:!0,nextTick:s=>{s.context.config.set("editing.svg.itemType","svg-textpath")},shortcut:fr({key:"Shift+T"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.svg.itemType"],selected:s=>s.context.config.is("editing.mode",_t.APPEND)&&(s.context.config.is("editing.mode.itemType","svg-rect")||s.context.config.is("editing.mode.itemType","svg-circle")||s.context.config.is("editing.mode.itemType","polygon")||s.context.config.is("editing.mode.itemType","star")||s.context.config.is("editing.mode.itemType","spline")||s.context.config.is("editing.mode.itemType","svg-textpath")),selectedKey:s=>s.context.config.get("editing.svg.itemType")},{type:"button",icon:"title",events:["config:editing.mode","config:editing.mode.itemType"],selected:s=>s.context.config.is("editing.mode",_t.APPEND)&&s.context.config.is("editing.mode.itemType","text"),action:s=>{s.context.commands.emit("addLayerView","text")}},{type:"button",tooltip:"Handle",icon:"pantool",events:["config:editing.mode"],selected:s=>s.context.config.is("editing.mode",_t.HAND),action:s=>{s.context.commands.emit("toggleHandTool")}}];function q9(s){s.registerMenu("toolbar.logo",[{type:"dropdown",style:{padding:"12px 0px 12px 12px"},icon:`
        `,items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"},{title:"menu.item.shortcuts.title",command:"showShortcutWindow"},"-",{title:"menu.item.export.title",command:"showExportView"},{title:"menu.item.export.title",command:"showEmbedEditorWindow"},{title:"menu.item.download.title",command:"downloadJSON"},{title:"menu.item.save.title",command:"saveJSON",nextTick:()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)}},{title:"menu.item.language.title",items:[{title:"English",command:"setLocale",args:[os.EN],checked:e=>e.locale===os.EN},{title:"Fran\xE7ais",command:"setLocale",args:[os.FR],checked:e=>e.locale===os.FR},{title:"Korean",command:"setLocale",args:[os.KO],checked:e=>e.locale===os.KO}]},"-",{title:"elf document",items:[{type:"link",title:"Github",href:"https://github.com/easylogic/editor"},{type:"link",title:"Learn",href:"https://www.easylogic.studio"}]}]}]),s.registerMenu("toolbar.left",Z9)}class Q9 extends X{initState(){return{tolerance:1,stroke:"black","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",msg:this.$i18n("path.manager.msg")}}[M(Oe)](){var t,r;var e=this.$context.selection.current;e&&((t=this.children.$stroke)==null||t.setValue(e.stroke||"rgba(0, 0, 0, 1)"),(r=this.children.$strokeWidth)==null||r.setValue(e.strokeWidth||p.number(1)))}[M("setColorAsset")]({color:e}){this.$el.isShow()&&(this.setState({stroke:e},!1),this.children.$stroke.setValue(e),this.updateData({stroke:e}))}template(){return` +
        +
        + +
        +
        +
        + + ${O("NumberInputEditor",{ref:"$tolerance",key:"tolerance",value:1,min:0,max:100,step:.01,unit:"number",onchange:"changeValue"})} +
        +
        + + ${O("FillSingleEditor",{ref:"$stroke",simple:!0,value:this.state.stroke,key:"stroke",onchange:"changeValue"})} +
        + +
        + + ${O("NumberInputEditor",{ref:"$strokeWidth",key:"strokeWidth",value:this.state.strokeWidth,onchange:"changeValue"})} +
        + + +
        + + ${O("SelectEditor",{ref:"$strokeLineCap",key:"strokeLinecap",value:this.state.strokeLinecap,options:["butt","round","square"],onchange:"changeValue"})} +
        +
        + + ${O("SelectEditor",{ref:"$strokeLineJoin",key:"strokeLinejoin",value:this.state.strokeLinejoin,options:["miter","bevel","round"],onchange:"changeValue"})} +
        +
        +
        + `}[K("changeValue")](e,t){this.updateData({[e]:t})}updateData(e={}){this.setState(e,!1),this.state.instance.trigger(this.state.changeEvent,e)}[M("changePathManager")](e){this.setState({mode:e})}[M("showDrawManager")](e={}){e.changeEvent=e.changeEvent||"changeDrawManager",this.setState(e),this.$el.show(),this.emit("hidePathManager")}[M("hideDrawManager")](){this.$el.hide()}[z("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}}const J9=["fill","fill-opacity","stroke","stroke-width","stroke-linecap","stroke-linejoin"];class eO extends X{initialize(){super.initialize(),this.pathParser=new Y}initState(){return{points:[],$target:null,fill:"transparent",stroke:"black","fill-opacity":null,"stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",tolerance:1}}[M("changeDrawManager")](e){this.setState(b({},e),!1)}get scale(){return this.$viewport.scale}template(){return` +
        +
        +
        `}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[tr("document")+fe("isShow")+Oa+Ts](){this.trigger("hidePathDrawEditor")}[M("DrawEditorDone")](){this.trigger("hidePathDrawEditor")}get totalPathLength(){if(!this.refs.$view)return 0;var e=this.refs.$view.$("path.object");return e?e.totalLength:0}makePathLayer(){var e;const t=Y.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30);t.transformMat4(this.$viewport.matrixInverse);const r=t.getBBox(),i=Ht(r[1],r[0]),a=Ht(r[3],r[0]);t.translate(-r[0][0],-r[0][1]);const n={itemType:"svg-path",x:r[0][0],y:r[0][1],width:i,height:a,d:t.d,totalLength:this.totalPathLength};return J9.forEach(l=>{this.state[l]&&Object.assign(n,{[l]:this.state[l]})}),e=this.$context.selection.currentProject.appendChild(this.$editor.createModel(n)),e}addPathLayer(){var e=this.getPathRect();if(e.width!==0&&e.height!==0){var t=this.makePathLayer(e);t&&this.emit("refreshAll")}}changeMode(e){this.setState(b(b({},this.initState()),e),!1)}getCurrentObject(){var e=this.state.current;return e?{current:e,d:e.d}:null}[M("showPathDrawEditor")](e={}){this.changeMode(e),this.$el.show(),this.$el.focus(),this.emit("showDrawManager",{instance:this,fill:this.state.fill,stroke:this.state.stroke,"fill-opacity":this.state["fill-opacity"],"stroke-width":this.state["stroke-width"],"stroke-linecap":this.state["stroke-linecap"],"stroke-linejoin":this.state["stroke-linejoin"]}),this.emit("hidePathEditor"),this.$context.commands.emit("push.mode.view","PathDrawView")}[M("initPathDrawEditor")](){this.pathParser.reset(""),this.refs.$view.empty()}[M("hidePathDrawEditor")](){this.$el.isShow()&&(this.trigger("initPathDrawEditor"),this.$el.hide(),this.emit("hideDrawManager"),this.$commands.emit("pop.mode.view","PathDrawView"))}[M("hideAddViewLayer")](){this.$el.hide(),this.emit("hideDrawManager")}getInnerId(e=""){return"draw-manager-"+e}get toFillSVG(){return tt.parseImage(this.state.fill||"transparent").toSVGString(this.fillId)}get toStrokeSVG(){return tt.parseImage(this.state.stroke||"black").toSVGString(this.strokeId)}get toDefInnerString(){return` + ${this.toFillSVG} + ${this.toStrokeSVG} + `}get toDefString(){var e=this.toDefInnerString.trim();return` + + ${e} + + `}get fillId(){return this.getInnerId("fill")}get strokeId(){return this.getInnerId("stroke")}get toFillValue(){return tt.parseImage(this.state.fill||"transparent").toFillValue(this.fillId)}get toStrokeValue(){return tt.parseImage(this.state.stroke||"black").toFillValue(this.strokeId)}[ae("$view")](){const e=Y.makePathByPoints(this.state.points).simplify(this.state.tolerance);return{innerHTML:` + + ${this.toDefString} + + + `}}renderPath(){this.bindData("$view")}[M("resizeEditor")](){this.initRect(!0)}getPathRect(){this.initRect(!0);var e=this.refs.$view.$("path.object"),t={x:0,y:0,width:0,height:0};return e&&(t=e.rect(),t.x-=this.state.rect.x,t.y-=this.state.rect.y),t}[ve("$view")+_e()+Se()](e){this.initRect(),this.state.altKey=!1,this.state.startXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.points=[this.state.startXY]}move(e,t,r,i){this.state.points.push({x:this.state.startXY.x+e,y:this.state.startXY.y+t,pressure:i}),this.renderPath()}end(){this.addPathLayer(),this.trigger("initPathDrawEditor")}}function tO(s){s.registerUI("canvas.view",{PathDrawView:eO}),s.registerUI("page.subeditor.view",{DrawManager:Q9})}const ic=["startPoint","endPoint","reversePoint"];function Td(s,e,t,r,i){var a=s.filter(o=>o?Math.abs(o[e]-t)<=i:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));a.sort((o,l)=>o.distn).forEach(n=>{a.filter(o=>n[o]).forEach(o=>{var l=n[o],c=Math.abs(l[e]-t);c<=r&&i.push({dist:c,point:l})})}),i.sort((n,o)=>n.dist>o.dist?1:-1),i.length?i[0].point:null}function Id(s,e,t,r=1){for(var i=[],a=0,n=s.length;aiO(e,t,u,r)).join(" ");return{d:h}}function iO(s,e,t,r=1){var{command:i,values:a}=t;switch(i){case"Z":return"Z";default:var n=a.map(o=>{var l=o.x-s===0?0:(o.x-s)/r,c=o.y-e===0?0:(o.y-e)/r;return`${l} ${c}`}).join(" ");return`${i} ${n}`}}function sO(s,e){return!(s.x2.valuee.x||s.y.value>e.y)}class Vc{static generatorPathString(e,t=0,r=0,i=1){return Id(e,t,r,i).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Rt,this.guideLineManager=new Rt,this.segmentManager=new Uu(this.pathEditor.$viewport),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const r=this.points[t.index][t.key];if(!!r)return{x:r.x,y:r.y,key:t.key,index:r.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var r=[];if(this.points.forEach((i,a)=>{ic.forEach(n=>{const o=i[n];sO(e,o)&&r.push({x:o.x,y:o.y,key:n,index:a})})}),t){r=r.map(o=>{const l=this.makeSegmentKey(o);return ie(b({},o),{included:Boolean(this.selectedPointKeys[l])})});const i=r.filter(o=>o.included),a=r.filter(o=>!o.included);let n=[...this.selectedPointList];i.length&&(n=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(i.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...n,...a)}else this.select(...r)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:r,key:i,index:a})=>({x:t,y:r,key:i,index:+a})),e.forEach(t=>{var r=this.makeSegmentKey(t);this.selectedPointKeys[r]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(r=>{ic.forEach(i=>{const{x:a,y:n}=r[i];t.push({x:a,y:n,key:i,index:r.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:r.x,y:r.y,key:e,index:t}):this.select(...this.selectedPointList.filter(i=>i.key!==e||i.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var r=this.points[t][e];r&&!this.isSelectedSegment(e,t)&&this.select({x:r.x,y:r.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var r;var t=(r=this.points[e.index])==null?void 0:r[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var r=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[r]}commitTransformMatrix(e,t){var r=Xe([],[e.x,e.y,0],t);return{x:r[0],y:r[1]}}transformMat4(e){this.transformPoints.forEach((t,r)=>{var i=this.points[r];Object.assign(i.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(i.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(i.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:r,width:i,height:a}=this.transformRect,n=Mt();switch($t(n,n,[t,r,0]),e){case"flipX":Jr(n,n,[-1,1,1]),$t(n,n,[-i,0,0]);break;case"flipY":Jr(n,n,[1,-1,1]),$t(n,n,[0,-a,0]);break;case"flip":Jr(n,n,[-1,-1,1]),$t(n,n,[-i,-a,0]);break}$t(n,n,[-t,-r,0]),this.transformMat4(n)}initTransform(e){this.transformRect=ye(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:ye(t.startPoint),endPoint:ye(t.endPoint),reversePoint:ye(t.reversePoint)}))}setConnectedPoint(e,t){var r=this.state,i=r.dragXY.x+e,a=r.dragXY.y+t,n={x:i,y:a},o={x:i,y:a};r.dragPoints&&(r.reversePoint=U.getReversePoint(r.startPoint,n));var l={startPoint:r.startPoint,endPoint:n,curve:!!r.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=ye(e),r=ye(e),i={startPoint:e,endPoint:t,curve:!1,reversePoint:r,connected:!1,close:!1};this.points.push(i)}getPrevPoint(e){return U.getPrevPoint(this.points,e)}getIndexPoint(e){return U.getIndexPoint(this.points,e)}getNextPoint(e){return U.getNextPoint(this.points,e)}getConnectedPointList(e){return U.getConnectedPointList(this.points,e)}isFirst(e){return U.isFirst(e)}getLastPoint(e){return U.getLastPoint(this.points,e)}setCachePoint(e,t){var r=this.state;this.snapPointList=[],this.selectedIndex=e,r.connectedPoint=this.getPrevPoint(e),r.connectedPointList=ye(U.getConnectedPointList(this.points,this.selectedIndex)),r.connectedPoint&&!r.connectedPoint.connected&&(r.connectedPoint=null),r.segment=this.getIndexPoint(e),r.segment.connected&&(r.connectedPoint=this.getNextPoint(e));var i=this.isFirst(r.segment);if(i){var a=this.getLastPoint(e);a.connected&&(r.connectedPoint=a)}r.segmentKey=t,r.isCurveSegment=r.segment.curve&&r.segmentKey!="startPoint",r.originalSegment=ye(r.segment),r.connectedPoint&&(r.originalConnectedPoint=ye(r.connectedPoint)),r.cachedPoints=[],this.points.filter(n=>n&&n!=r.segment).forEach(n=>{r.cachedPoints.push(n.startPoint,n.reversePoint,n.endPoint)})}moveSegment(e,t,r,i=void 0){if(i){const l=this.points[i.index][e];l.x=i[e].x+t,l.y=i[e].y+r}else{var a=this.state,n=a.originalSegment[e],o=a.segment[e];n&&(o.x=n.x+t,o.y=n.y+r)}}calculateToCurve(e,t,r){var i=(t.startPoint.x+r.startPoint.x)/2,a=(t.startPoint.y+r.startPoint.y)/2,n=(t.startPoint.x-i)/2,o=(t.startPoint.y-a)/2;return e.endPoint={x:e.startPoint.x+n,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-n,y:e.startPoint.y-o},{dx:n,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=ye(t.startPoint),t.endPoint=ye(t.startPoint),t.command==="M"){var r=U.getPrevPoint(this.points,t.index);r.connected&&(r.curve=!1,r.reversePoint=ye(r.startPoint),r.endPoint=ye(r.startPoint))}else{var i=this.getNextPoint(e);if(i&&i.command==="M"){var a=i;a.curve=!1,a.reversePoint=ye(a.startPoint),a.endPoint=ye(a.startPoint)}}else{t.curve=!0;var n=this.getPrevPoint(e),i=this.getNextPoint(e);if(i&&i.indexe&&i.command!=="M")this.calculateToCurve(t,i,n);else if(!i&&n){var o=(t.startPoint.x-n.startPoint.x)/3,l=(t.startPoint.y-n.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=U.getReversePoint(t.startPoint,t.endPoint)}else if(!n&&i){var o=(t.startPoint.x-i.startPoint.x)/3,l=(t.startPoint.y-i.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=U.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,r){var i=this.state;this.moveSegment(e,t,r);var a=e==="endPoint"?"reversePoint":"endPoint";i.segment[a]=U.getReversePoint(i.segment.startPoint,i.segment[e])}rotateSegmentTarget(e,t){var r=this.state;if(r.originalSegment&&r.segment){var{x:i,y:a}=r.originalSegment.startPoint,{x:n,y:o}=r.segment[e],{x:l,y:c}=r.originalSegment[t],{x:h,y:u}=qs(rt(n-i,o-a),rr(l,c,i,a),i,a);r.segment[t]={x:h,y:u}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,u,v,i=1){var a=this.state,n=a.cachedPoints,o=a.originalSegment[e];if(!e)return{dx:u,dy:v,snapPointList:[]};var l=o.x+u,c=o.y+v,{point:h,distanceValue:u}=Td(n,"x",l,u,i),{point:d,distanceValue:v}=Td(n,"y",c,v,i),g={x:o.x+u,y:o.y+v},y=[];return h&&y.push({startPoint:h,endPoint:g}),d&&y.push({startPoint:d,endPoint:g}),{dx:u,dy:v,snapPointList:y}}copySegment(e,t){t.startPoint=ye(e.startPoint),t.endPoint=ye(e.endPoint),t.reversePoint=ye(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.x=r.x+e,i.y=r.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t){this.selectedGroup.points.forEach(r=>{const i=this.points[r.index];i.startPoint.x=r.startPoint.x+e,i.startPoint.y=r.startPoint.y+t,i.endPoint.x=r.endPoint.x+e,i.endPoint.y=r.endPoint.y+t,i.reversePoint.x=r.reversePoint.x+e,i.reversePoint.y=r.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return U.getSplitedGroupList(this.points)}get groupList(){return U.getGroupList(this.points)}getGroup(e,t){return U.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(i=>i.groupIndex):(this.selectedPointList.forEach(i=>{const a=this.getGroup(t,i.index);a&&e.add(a.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(r=>{var i=this.points[r.index][r.key];i.removed=!0});const e=U.splitPoints(this.points),t=U.recoverPoints(e.map(r=>r.filter(i=>!i.startPoint.removed).map(i=>(i.endPoint.removed&&(i.endPoint=ye(i.startPoint)),i.reversePoint.removed&&(i.reversePoint=ye(i.startPoint)),U.isEqual(i.endPoint,i.startPoint,i.reversePoint)&&(i.command="L",i.curve=!1),i))));this.points=t,this.select()}move(e,t,r){var i=this.state,{isCurveSegment:a,segmentKey:n,connectedPoint:o}=i;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:l}=this.calculateSnap(n,e,t,3);if(this.snapPointList=l||[],a)if(r.shiftKey){this.moveSegment(n,e,t);var c=n==="endPoint"?"reversePoint":"endPoint";i.segment[c]=U.getReversePoint(i.segment.startPoint,i.segment[n])}else r.altKey?(this.moveSegment(n,e,t),this.rotateSegment(n)):this.moveSegment(n,e,t);else this.moveSegment("startPoint",e,t),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),r.altKey||i.connectedPointList.forEach(d=>{this.moveSegment("startPoint",e,t,d),this.moveSegment("endPoint",e,t,d),this.moveSegment("reversePoint",e,t,d)});o&&this.copySegment(i.segment,i.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t)}moveEnd(e,t){var r=this.state,i=this.points,a=r.dragXY.x+e,n=r.dragXY.y+t,o={x:a,y:n},l={x:a,y:n};r.dragPoints&&(l=U.getReversePoint(r.startPoint,o)),i.push({command:r.clickCount===0?"M":"",startPoint:r.startPoint,endPoint:o,curve:!!r.dragPoints,reversePoint:l}),r.startPoint=null,r.dragPoints=!1,r.moveXY=null}setPoint(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=U.getPoint(i,t),n=U.getPoint(i,r),o=[ie(b({},a),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},ie(b({},n),{reversePoint:e.second[2]})],l=U.getIndex(i,t);return i.splice(l,2,...o),this.points=i,l+1}setPointQuard(e){var t=e.first[0],r=e.second[e.second.length-1],i=this.clonePoints,a=U.getPoint(i,t),n=U.getPoint(i,r);if(a.curve&&n.curve===!1){var o=[ie(b({},a),{endPoint:a.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=U.getIndex(i,t);i.splice(l,1,...o)}else{var o=[b({},a),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},ie(b({},n),{reversePoint:e.second[1],curve:!0})],l=U.getIndex(i,t);i.splice(l,2,...o)}return this.points=i,l+1}setPointLine(e){var t=e.first[0],r=this.clonePoints,i=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],a=U.getIndex(r,t);return r.splice(a+1,0,...i),this.points=r,a+1}toPath(e=0,t=0,r=1){return Id(this.clonePoints,e,t,r)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var r=Math.min(e.startPoint.x,t.startPoint.x),i=Math.max(e.startPoint.x,t.startPoint.x),a=Math.min(e.startPoint.y,t.startPoint.y),n=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:n},{x:i,y:n}).addDistanceLine({x:i,y:a},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:r,y:a},{x:r,y:n}).addDistanceLine({x:r,y:n},{x:i,y:n}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(r.startPoint).L(r.endPoint).X(r.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:r,points:i},a)=>{const n=Vc.generatorPathString(i),o=kr(Y.fromSVGString(n).getBBox());return{points:i,startPointIndex:r,groupIndex:a,center:o[4],d:n}}),t=e.length;return` + + ${e.map(r=>{const{center:i}=r,[a,n]=i;return` + + + ${t>1&&` + ${r.groupIndex+1} + `} + `}).join("")} + + `}toSVGString(){return` + + ${this.guideLineManager.toString("guide")} + ${this.splitLines.join("")} + ${this.makeSnapLines()} + ${this.makePathArea()} + ${this.segmentManager.toString()} + + `}}function pi([s,e]){return{x:s,y:e}}const aO=class extends X{convertToCurve(s){this.pathGenerator.convertToCurve(s),this.renderPath(),this.refreshPathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[rn("$view [data-segment]")+fe("isEditableSegment")+Le](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}[qd("$view [data-segment]")+Le+Wd(300)](s){var e=+s.$dt.attr("data-index");this.convertToCurve(e)}},nO=class extends aO{calculatePointOnLine(s,e){var t=new Y(s);return t.getClosedPoint(e)}[ve("$view .split-path")+_e()+Se()](s){this.initRect();var e=new Y(s.$dt.attr("d")),t={x:s.xy.x-this.state.rect.x,y:s.xy.y-this.state.rect.y},r=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"));return}else{if(e.segments[1].command==="C"){var i=[pi(e.segments[0].values),pi(e.segments[1].values.slice(0,2)),pi(e.segments[1].values.slice(2,4)),pi(e.segments[1].values.slice(4,6))],a=vc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPoint(Aa(i,n))}else if(e.segments[1].command==="Q"){var i=[pi(e.segments[0].values),pi(e.segments[1].values.slice(0,2)),pi(e.segments[1].values.slice(2,4))],a=yc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointQuard(Da(i,n))}else if(e.segments[1].command==="L"){var i=[pi(e.segments[0].values),pi(e.segments[1].values.slice(0,2))],a=bc(...i,20),n=a(t.x,t.y);r=this.pathGenerator.setPointLine(Fa(i,n)),s.altKey&&this.pathGenerator.convertToCurve(r)}this.renderPath(),this.refreshPathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(r,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",r)}}},oO=class extends nO{[M("changePathTransform")](s){this.resetTransformZone();var{width:e,height:t}=this.state.transformZoneRect;switch(this.pathGenerator.initTransform(this.state.transformZoneRect),s){case"flipX":this.pathGenerator.transform("flipX",e,0);break;case"flipY":this.pathGenerator.transform("flipY",0,t);break;case"flip":this.pathGenerator.transform("flip",e,t)}this.renderPath(),this.refreshPathLayer()}[M("changePathUtil")](s){if(s==="reverse"){const{d:e}=this.pathGenerator.toPath(),t=new Y(e);t.reverse(...this.pathGenerator.selectedGroupIndexList),t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d}),this.updatePathLayer()}}[M("divideSegmentsByCount")](s){const{d:e}=this.pathGenerator.toPath(),r=new Y(e).divideSegmentByCount(s);r.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:r.d})}},lO=["fill","fill-opacity","stroke","stroke-width"];class cO extends oO{initialize(){super.initialize(),this.pathParser=new Y,this.pathGenerator=new Vc(this)}initState(){return{changeEvent:"updatePathItem",isShow:!1,isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}get scale(){return this.$viewport.scale}template(){return` +
        + + + + + + + + + + + +
        +
        + + + +
        +
        +
        `}isShow(){return this.state.isShow}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[M("PathEditorDone")](){this.state.current?(this.refreshPathLayer(),this.trigger("hidePathEditor")):this.addPathLayer(),!this.state.current&&this.pathGenerator.length?this.trigger("initPathEditorView"):this.trigger("hidePathEditor")}[tr("document")+fe("isShow")+Ts](){this.trigger("PathEditorDone")}[tr("document")+fe("isShow")+Oa](){this.state.current?this.refreshPathLayer():this.addPathLayer(),this.trigger("hidePathEditor")}makePathLayer(){const e=this.pathGenerator.toPath().d;if(!e)return;var t;const r=new Y(e);r.transformMat4(this.$viewport.matrixInverse);const i=r.getBBox(),a=Ht(i[1],i[0]),n=Ht(i[3],i[0]);r.translate(-i[0][0],-i[0][1]);const o={itemType:"svg-path",x:i[0][0],y:i[0][1],width:a,height:n,d:r.d,fill:r.closed?"#C4C4C4":"transparent"};return lO.forEach(c=>{this.state[c]&&(o[c]=this.state[c])}),t=this.$context.selection.currentProject.appendChild(this.$editor.createModel(o)),this.$commands.executeCommand("moveLayerToTarget","add path",t,this.$context.selection.currentProject),t}updatePathLayer(){var{d:e}=this.pathGenerator.toPath(),t=new Y(e);t.transformMat4(this.$viewport.matrixInverse),this.emit(this.state.changeEvent,{d:t.d,matrix:this.state.matrix,box:this.state.box})}addPathLayer(){this.changeMode("modify");var e=this.makePathLayer();e&&(this.$config.set("editing.mode.itemType","select"),this.$context.selection.select(e),this.trigger("hidePathEditor"))}changeMode(e,t){this.setState(b({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[]),this.emit("changePathManager",this.state.mode)}[M("changePathManager")](e){this.setState(ie(b({},e),{clickCount:0}),!1),this.renderPath()}isMode(e){return this.state.mode===e}afterRender(){this.$el.hide()}[M(it)](){if(this.$el.isShow()){const{d:e}=this.pathGenerator.toPath(),t=new Y(e);t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d})}}refreshEditorView(e){e&&e.d&&(this.pathParser.reset(e.d),this.pathParser.transformMat4(this.$viewport.matrix),this.state.cachedMatrixInverse=this.$viewport.matrixInverse,this.pathGenerator.setPoints(this.pathParser.convertGenerator())),this.renderPath()}[M("showPathEditor")](e="path",t={}){this.state.isShow=!0,this.transformMode=e,e==="move"&&(t.current=null,t.points=[]),t.box=t.box||"canvas",this.changeMode(e,t),this.refreshEditorView(t,!0),this.$el.show(),this.$el.focus(),this.emit("showPathManager",{mode:this.state.mode}),this.emit("hidePathDrawEditor"),this.$context.commands.emit("push.mode.view","PathEditorView")}[M("hidePathEditor")](){this.$el.isShow()&&(this.pathParser.reset(""),this.pathGenerator.setPoints([]),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager"),this.$context.commands.emit("pop.mode.view","PathEditorView"),this.emit(Oe))}[M("hideAddViewLayer")](){this.state.isShow=!1,this.state.isControl=!1,this.pathParser.reset(""),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager")}[ae("$view")](){var r;const e=this.state.isShow?this.pathGenerator.makeSVGPath():"",t=p.parse((r=this.state.current)==null?void 0:r["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform",box:this.state.box==="box",canvas:this.state.box==="canvas","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[ae("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}refreshPathLayer(){this.updatePathLayer()}renderPath(){this.bindData("$view")}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Et(Y.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[ca("$view")+Le](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=ge.create(e.target),r=t.hasClass("split-path");r?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[ve("$view :not(.split-path)")+Le+ri+_e()+Se()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.$config.set("set.drag.path.area",!1);var r=ge.create(e.target);if(r.hasClass("svg-editor-canvas")&&!t?(this.$config.set("set.drag.path.area",!0),this.state.isGroupSegment=!1,this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1):(this.pathGenerator.reselect(),this.state.isSegment=r.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&r.attr("data-is-first")==="true",this.state.isGroupSegment=r.hasClass("path-area"),this.state.isGroupSegment?(this.state.selectedGroupIndex=+r.data("group-index"),this.state.selectedPointIndex=+r.data("point-index")):(this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1)),t){if(this.state.isFirstSegment){var i=+r.attr("data-index");this.state.startPoint=this.pathGenerator.points[i].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[i,a]=r.attrs("data-index","data-segment-point");const o=+i;e.shiftKey?this.pathGenerator.toggleSelect(a,o):(this.pathGenerator.setCachePoint(o,a),this.pathGenerator.selectKeyIndex(a,o)),this.renderPath()}else this.state.isGroupSegment&&(this.changeMode("segment-move"),this.pathGenerator.selectGroup(this.state.selectedGroupIndex),this.renderPath())}move(e,t){var r=this.$config.get("bodyEvent");this.$config.true("set.drag.path.area")?this.renderSelectBox(this.state.dragXY,e,t):this.isMode("segment-move")?(this.pathGenerator.move(e,t,r),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&rr(e,t,0,0)>=2&&(this.state.dragPoints=!r.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),de(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){var r=this.$config.get("bodyEvent");this.$config.set("set.move.control.point",!1),this.state.isGroupSegment&&this.pathGenerator.select(),this.$config.true("set.drag.path.area")?e===0&&t===0?(this.changeMode("modify"),this.trigger("hidePathEditor")):(this.changeMode("segment-move"),this.pathGenerator.selectInBox(this.getSelectBox(),r.shiftKey),this.renderPath(),this.hideSelectBox()):this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"))):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}hideSelectBox(){this.refs.$segmentBox.css({left:-1e5})}renderSelectBox(e=null,t=0,r=0){var i={left:e.x+(t<0?t:0),top:e.y+(r<0?r:0),width:Math.abs(t),height:Math.abs(r)};this.refs.$segmentBox.css(i)}getSelectBox(){var[e,t,r,i]=this.refs.$segmentBox.styles("left","top","width","height").map(n=>p.parse(n)),a={x:e,y:t,width:r,height:i};return a.x2=a.x.value+a.width,a.y2=a.y.value+a.height,a}[M("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[M("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}[M("initPathEditorView")](){this.pathParser.reset(""),this.setState(this.initState(),!1),this.state.isShow=!0,this.refs.$view.empty(),this.$el.focus()}}const hO={"segment-move":"modify",modify:"modify",path:"path",transform:"transform",warp:"warp"};class dO extends X{initState(){return{mode:"move",fill:null,stroke:null,"fill-opacity":null,"stroke-width":null,msg:this.$i18n("path.manager.msg")}}template(){return` +
        +
        + +
        +
        + + + +
        +
        +
        + +
        +
        + + + +
        + + +
        + +
        + `}[ae("$mode")](){return{"data-selected-value":hO[this.state.mode]}}refresh(){this.bindData("$mode")}[z("$flip button")](e){var t=e.$dt.attr("data-value");t==="2x"?this.emit("divideSegmentsByCount",2):t==="3x"?this.emit("divideSegmentsByCount",3):this.emit("changePathTransform",t)}[z("$util button")](e){var t=e.$dt.attr("data-value");this.emit("changePathUtil",t)}[z("$mode button")](e){var t=e.$dt.attr("data-value");this.updateData({mode:t}),this.refresh()}[z("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e)}[M("changePathManager")](e){this.setState({mode:e})}[M("showPathManager")](e={}){e.changeEvent=e.changeEvent||"changePathManager",this.setState(e),this.$el.show()}[M("hidePathManager")](){this.$el.hide()}}function uO(s){s.registerUI("canvas.view",{PathEditorView:cO}),s.registerUI("page.subeditor.view",{PathManager:dO})}class pO extends Ne{components(){return{LeftAlign:Qu,CenterAlign:qu,RightAlign:ep,TopAlign:ip,MiddleAlign:Ju,BottomAlign:Zu,SameWidth:rp,SameHeight:tp}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` +
        +
        + + +
        +
        + + +
        +
        + +
        + + +
        +
        + + + +
        + +
        + `}[z("$buttons button")](e){const t=e.$dt.data("command"),r=e.$dt.data("args");t==="convert.smooth.path"?this.$commands.emit(t):this.$commands.emit(t,r)}[M(Oe)](){this.refreshShow(()=>this.$context.selection.length===1&&this.$context.selection.is("boolean-path")?!0:this.$context.selection.is("svg-path","polygon","star"))}}function gO(s){s.registerUI("inspector.tab.style",{PathToolProperty:pO})}class fO extends X{initState(){return{hideLabel:this.props.hideLabel,value:this.props.value,patterns:this.parsePattern(this.props.value)}}parsePattern(e){return e==="undefined"?[]:hr.parseStyle(e)}setValue(e){this.setState({value:e,patterns:this.parsePattern(e)})}template(){return` +
        +
        +
        + `}[G("$patternList")](){return this.state.patterns.map((e,t)=>{const r=e.selected?"selected":"";return e.selected&&(this.selectedIndex=t),` +
        + ${O("PatternSizeEditor",{key:"pattern-size",ref:`$bp${t}`,type:e.type,x:e.x,y:e.y,width:e.width,height:e.height,index:t,foreColor:e.foreColor,backColor:e.backColor,blendMode:e.blendMode,lineWidth:e.lineWidth,lineHeight:e.lineHeight,onchange:"changePatternSizeInfo"})} +
        + +
        +
        + `})}modifyPattern(){var e=hr.join(this.state.patterns);this.parent.trigger(this.props.onchange,this.props.key,e)}[M("add")](e="check"){var t=rc.find(r=>r.key===e);if(t){const r=hr.parseStyle(t.execute()[0].pattern);this.state.patterns.push.apply(this.state.patterns,r),this.refresh(),this.modifyPattern()}}[z("$add")](){this.trigger("add")}[yr("$patternList .pattern-item")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$patternList .pattern-item")+Le](){}sortItem(e,t,r){e.splice(r+(t{r.selected=i===e})}[M("changePatternSizeInfo")+He(10)](e,t,r){var i=this.state.patterns[r];i.reset(t),this.modifyPattern(),this.refresh()}}class mO extends Lr{getClassName(){return"pattern-info-popup"}getTitle(){return this.$i18n("pattern.info.popup.title")}initState(){return{type:this.props.type||"grid",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,lineWidth:this.props.lineWidth||1,lineHeight:this.props.lineHeight||1,foreColor:this.props.foreColor||"black",backColor:this.props.backColor||"transparent",blendMode:this.props.blendMode||"normal"}}updateData(e={}){this.setState(e,!1);const{x:t,y:r,width:i,height:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.state;this.state.instance.trigger(this.state.changeEvent,{x:t,y:r,width:i,height:a,foreColor:n,backColor:o,blendMode:l,lineWidth:c,lineHeight:h})}[K("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){if(this.hasNotX())return"";let e="X",t="";return this.state.type==="diagonal-line"&&(e=this.$i18n("pattern.info.popup.rotate"),t=["deg"]),O("InputRangeEditor",{label:e,ref:"$x",key:"x",value:this.state.x,min:0,max:1e3,step:1,units:t,onchange:"changeRangeEditor"})}templateForY(){return this.hasNotY()?"
        ":O("InputRangeEditor",{label:"Y",ref:"$y",key:"y",value:this.state.y,min:0,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForLabel(){return``}templateForWidth(){return O("InputRangeEditor",{label:this.$i18n("pattern.info.popup.width"),ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return O("InputRangeEditor",{label:this.$i18n("pattern.info.popup.height"),ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}hasNotLineWidth(){return["check"].includes(this.state.type)}hasNotLineHeight(){return["cross-dot","dot","check","diagonal-line","horizontal-line"].includes(this.state.type)}hasNotX(){return["grid","dot","horizontal-line"].includes(this.state.type)}hasNotY(){return["grid","dot","diagonal-line","vertical-line"].includes(this.state.type)}templateForLineWidth(){return this.hasNotLineWidth()?"
        ":O("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineWidth"),ref:"$lineWidth",key:"lineWidth",value:this.state.lineWidth,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForLineHeight(){return this.hasNotLineHeight()?"
        ":O("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineHeight"),ref:"$lineHeight",key:"lineHeight",value:this.state.lineHeight,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForForeColor(){return O("ColorViewEditor",{ref:"$foreColor",label:this.$i18n("pattern.info.popup.foreColor"),key:"foreColor",value:this.state.foreColor,onchange:"changeRangeEditor"})}templateForBackColor(){return O("ColorViewEditor",{ref:"$backColor",label:this.$i18n("pattern.info.popup.backColor"),key:"backColor",value:this.state.backColor,onchange:"changeRangeEditor"})}templateForBlendMode(){return` +
        + ${O("BlendSelectEditor",{ref:"$blend",key:"blendMode",label:this.$i18n("pattern.info.popup.blend"),value:this.state.blendMode,onchange:"changeRangeEditor"})} +
        + `}getBody(){return` +
        + `}[G("$picker")](){return` + +
        +
        + ${this.templateForLabel()} +
        +
        + ${this.templateForWidth()} + ${this.templateForHeight()} +
        +
        + ${this.templateForLineWidth()} + ${this.templateForLineHeight()} +
        +
        + ${this.templateForX()} + ${this.templateForY()} +
        +
        + ${this.templateForForeColor()} + ${this.templateForBackColor()} +
        +
        + ${this.templateForBlendMode()} +
        +
        + `}[M("showPatternInfoPopup")](e,t){this.state.changeEvent=e.changeEvent||"changePatternInfoPopup",this.state.instance=e.instance,this.setState(e.data),this.showByRect(t)}}class vO extends Ne{getTitle(){return this.$i18n("pattern.property.title")}getClassName(){return"el--pattern-property"}getTitleClassName(){return"pattern"}getBody(){return"
        "}getTools(){return` +
        + + + + + + + +
        + `}[z("$tools button")](e){var t=e.$dt.data("pattern");this.children.$patternEditor.trigger("add",t)}[G("$body")](){var e=this.$context.selection.current||{},t=e.pattern;return O("PatternEditor",{ref:"$patternEditor",value:t,"hide-label":!0,onchange:"changePatternEditor"})}[K("changePatternEditor")](e,t){this.$commands.executeCommand("setAttribute","change pattern",this.$context.selection.packByValue({pattern:t}))}get editableProperty(){return"pattern"}[M(Oe)+fe("checkShow")](){this.refresh()}[M("refreshSVGArea")+He(1e3)](){this.load("$patternSelect")}}class yO extends X{initState(){return{index:this.props.index,x:p.parse(this.props.x),y:p.parse(this.props.y),width:p.parse(this.props.width),height:p.parse(this.props.height),lineWidth:p.parse(this.props.lineWidth),lineHeight:p.parse(this.props.lineHeight),backColor:this.props.backColor,foreColor:this.props.foreColor,blendMode:this.props.blendMode,type:this.props.type}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(b({},e))}[ae("$miniView")](){const{type:e,x:t,y:r,width:i,height:a,lineWidth:n,lineHeight:o,backColor:l,foreColor:c,blendMode:h}=this.state;let u={type:e,x:t,y:r,width:i,height:a,lineWidth:n,lineHeight:o,backColor:l,foreColor:c,blendMode:h};return this.state.width>80&&(u.width=80,u.x=u.x.value/this.state.width/80),this.state.height>80&&(u.height=80,u.y=this.state.y.value/this.state.height/80),{cssText:hr.parse(u).toCSS()}}template(){return` +
        +
        +
        +
        +
        +
        +
        + `}[z("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){const t=this.$config.get("editor.layout.elements").$bodyPanel.rect(),r=this.$el.rect(),i={left:t.left+t.width-240,top:r.top,width:240,height:300};this.emit("showPatternInfoPopup",{changeEvent:a=>{this.updateData(b({},a))},data:this.state,instance:this},i)}}function bO(s){s.registerElement({PatternEditor:fO,PatternSizeEditor:yO,PatternAssetsProperty:Pp}),s.registerUI("inspector.tab.style",{PatternProperty:vO}),s.registerUI("popup",{PatternInfoPopup:mO})}const Ti=0;class xO extends Ne{getTitle(){return this.$i18n("position.property.title")}afterRender(){this.show()}[M(Oe)](){this.refreshShowIsNot(["project"])}checkChangedValue(){var e=this.$context.selection.current;return e?e.hasChangedField("x","y","right","bottom","width","height","angle","transform","opacity","resizingVertical","resizingHorizontal","constraints-horizontal","constriants-vertical"):!1}[M(Lt)+fe("checkChangedValue")+sa(10)](){var e=this.$context.selection.current;if(!e)return"";this.children.$x.setValue(Ye(e.offsetX||Ti,100)),this.children.$y.setValue(Ye(e.offsetY||Ti,100)),this.children.$width.setValue(Ye(e.width||Ti,100)),this.children.$height.setValue(Ye(e.height||Ti,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(p.deg(e.angle).round(100))}isHideHeader(){return!0}getBodyClassName(){return"no-padding"}getBody(){return` +
        +
        + ${O("NumberInputEditor",{ref:"$x",compact:!0,label:"X",key:"x",min:-1e5,max:1e5,trigger:"enter",onchange:"changRangeEditor"})} + ${O("NumberInputEditor",{ref:"$y",compact:!0,trigger:"enter",label:"Y",key:"y",min:-1e4,max:1e4,onchange:"changRangeEditor"})} +
        +
        + ${O("NumberInputEditor",{ref:"$width",compact:!0,trigger:"enter",label:"W",key:"width",min:0,max:3e3,onchange:"changRangeEditor"})} + ${O("NumberInputEditor",{ref:"$height",compact:!0,trigger:"enter",label:"H",key:"height",min:0,max:3e3,onchange:"changRangeEditor"})} +
        +
        + ${O("InputRangeEditor",{ref:"$rotate",key:"rotateZ",compact:!0,label:"rotate_left",min:-360,max:360,step:1,units:["deg"],onchange:"changeRotate"})} + ${O("NumberInputEditor",{ref:"$opacity",key:"opacity",compact:!0,label:"opacity",min:0,max:1,step:.01,onchange:"changeSelect"})} +
        +
        + `}refresh(){const e=this.$context.selection.current;e&&(this.children.$x.setValue(Ye(e.offsetX||Ti,100)),this.children.$y.setValue(Ye(e.offsetY||Ti,100)),this.children.$width.setValue(Ye(e.width||Ti,100)),this.children.$height.setValue(Ye(e.height||Ti,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(p.deg(e.angle)))}[z("$positionItem button[data-command]")](e){const t=e.$dt.data("command");console.log(t)}[K("changRangeEditor")](e,t){this.$commands.executeCommand("setAttribute","change position or size",this.$context.selection.packByValue({[e]:t}))}[K("changeRotate")](e,t){this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.packByValue({angle:t.value}))}[K("changeSelect")](e,t){this.$commands.executeCommand("setAttribute",`change ${e}`,this.$context.selection.packByValue({[e]:t}))}}function $O(s){s.registerUI("inspector.tab.style",{PositionProperty:xO})}class _O extends Ne{getTitle(){return this.$i18n("project.property.title")}getClassName(){return"full"}getTools(){return` + + `}[z("$add")](){this.$commands.emit("addProject")}getBody(){return` +
        + `}[G("$projectList")+Ee](){var t;var e=((t=this.$model)==null?void 0:t.projects)||[];return e.map(r=>{var i=r===this.$context.selection.currentProject.id?"selected":"";const a=this.$model.get(r);return` +
        +
        + +
        + +
        +
        +
        + `})}[rn("$projectList .project-item")](e){this.startInputEditing(e.$dt.$("label"))}modifyDoneInputEditing(e){this.endInputEditing(e,(t,r)=>{var i=this.$editor.projects[t];i&&i.reset({name:r})})}[wo("$projectList .project-item label")+Ts+Le+ri](e){return this.modifyDoneInputEditing(e.$dt),!1}[Ms("$projectList .project-item label")+Le+ri](e){this.modifyDoneInputEditing(e.$dt)}[z("$projectList .project-item label")](e){var t=e.$dt.attr("data-id");this.commands.executeCommand("refreshSelectionPorject","change project",t),this.nextTick(()=>{this.refresh()})}[z("$projectList .project-item .remove")](e){var t=e.$dt.attr("data-id");this.$commands.executeCommand("removeProject","remove project",t),this.nextTick(()=>{this.refresh()})}[M("refreshProjectList","refreshAll")](){this.refresh()}}function SO(s){s.registerElement({ProjectProperty:_O})}class PO{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("json","rect")}getRendererInstance(e){return this.editor.getRendererInstance("json",e.itemType)||this.getDefaultRendererInstance()||e}async render(e,t){if(!e)return;const r=this.getRendererInstance(e);if(r)return await r.render(e,t||this)}async renderAll(e,t){return await Promise.all(e.map(async r=>await this.render(r,t)))}async getResourceDataURI(){}}class Cp{async render(e,t){return await this.toCloneObject(e,t)}async toCloneObject(e,t){var r=e.attrs("itemType","name","elementType","type","visible","lock","selected");e.parent&&e.parent.isNot("project")&&(r.parentId=e.parentId),r.referenceId=e.id,r.newTargetId=Ls();let i=[];for(var a=0,n=e.layers.length;ar.clone()),svg:e.svg.map(r=>r.clone())})}}class TO extends kp{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("name"))}}class Qi extends kp{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("tagName"))}}class zs extends Qi{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("overflow","stroke","stroke-width","svgfilter","fill","fill-rule","fill-opacity","stroke-linecap","stroke-linejoin","stroke-dashoffset","stroke-dasharray","text-anchor"))}}class MO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("d","booleanOperation"))}}class IO extends Qi{}class EO extends Qi{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("src"))}}class LO extends Qi{async toCloneObject(e,t){const a=e.project.imageKeys[e.src].original;return ie(b({},await super.toCloneObject(e,t)),{src:a})}}class VO extends Cp{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("colors","gradients","svgfilters","svgimages","images","keyframes"))}}class OO extends VO{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("timeline"))}}class jO extends OO{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("name","description","rootVariable"))}}class RO extends Qi{}class zO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("points","boundary"))}}class AO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("d"))}}class DO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("count"))}}class FO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("count","radius"))}}class BO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("totalLength","d","text","textLength","lengthAdjust","startOffset"))}}class NO extends zs{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("totalLength","text","textLength","lengthAdjust","shape-inside"))}}class GO extends Qi{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("engine","template","params"))}}class HO extends Qi{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("content"))}}class UO extends Qi{async toCloneObject(e,t){return b(b({},await super.toCloneObject(e,t)),e.attrs("src"))}}function WO(s){s.registerRendererType("json",new PO(s)),s.registerRenderer("json","project",new jO),s.registerRenderer("json","artboard",new TO),s.registerRenderer("json","rect",new RO),s.registerRenderer("json","circle",new IO),s.registerRenderer("json","image",new LO),s.registerRenderer("json","template",new GO),s.registerRenderer("json","iframe",new EO),s.registerRenderer("json","text",new HO),s.registerRenderer("json","video",new UO),s.registerRenderer("json","svg-path",new AO),s.registerRenderer("json","boolean-path",new MO),s.registerRenderer("json","polygon",new DO),s.registerRenderer("json","star",new FO),s.registerRenderer("json","spline",new zO),s.registerRenderer("json","svg-text",new NO),s.registerRenderer("json","svg-textpath",new BO)}class XO extends qi{getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"sample",name:"New Sample Layer",sampleText:"Sample Text 1",sampleNumber:1},e))}get sampleText(){return this.get("sampleText")}set sampleText(e){this.set("sampleText",e)}get sampleNumber(){return this.get("sampleNumber")}set sampleNumber(e){this.set("sampleNumber",e)}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("sampleText","sampleNumber"))}editable(e){switch(e){case"sample":return!0}return super.editable(e)}getDefaultTitle(){return"Sample Layer"}}class YO{constructor(e){this.renderer=e}setRenderer(e){this.renderer=e}getInnerId(e,t=""){return e.id+t}uniqueId(e){return this.renderer.id+"-"+e.id}}const KO="SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","),ZO={xChannelSelector:!0,yChannelSelector:!0};class vt extends sr{static parse(e){var t=Tp[e.type];return new t(e)}hasLight(){return!1}isLight(){return!1}isSource(){return!1}getDefaultObject(e={}){var t=dr();return super.getDefaultObject(b({itemType:"svgfilter",id:t,in:[],bound:{x:100,y:100,targetX:0,targetY:0},connected:[]},e))}getInCount(){return 0}setIn(e,t){this.json.in[e]={id:t.id,type:t.type}}setConnected(e){var t=this.json.connected.filter(r=>r.id===e.id);t.length===0&&this.json.connected.push({id:e.id})}convert(e){return typeof e.in=="string"&&(e.in=JSON.parse(e.in)),typeof e.bound=="string"&&(e.bound=JSON.parse(e.bound)),typeof e.connected=="string"&&(e.connected=JSON.parse(e.connected)),e}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("id","in","bound","connected"))}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),Object.keys(ZO).filter(t=>!!this.json[t]).forEach(t=>{e.push(`${t}="${this.json[t]}"`)}),e.join(" ")+" "+this.getSourceInAttribute()}hasInIndex(){return!1}getSourceInAttribute(e){return(e||this.json.in).map((t,r)=>{if(!t)return"";var i=r===0?"":r+1+"";return this.hasInIndex()||(i=""),KO.includes(t.type)?`in${i}="${t.type}"`:`in${i}="${t.id}result"`}).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}class pa extends vt{getDefaultObject(e={}){return super.getDefaultObject(b({type:"Source"},e))}isSource(){return!0}toString(){return""}}class qO extends pa{getDefaultObject(){return super.getDefaultObject({type:"BackgroundAlpha"})}}class QO extends pa{getDefaultObject(){return super.getDefaultObject({type:"BackgroundImage"})}}class bn extends vt{getDefaultObject(){return super.getDefaultObject({type:"Blend",mode:bn.spec.mode.defaultValue})}getInCount(){return 2}toString(){var{mode:e}=this.json;return``}hasInIndex(){return!0}}bn.spec={mode:{title:"mode",inputType:"blend",defaultValue:"normal"}};class xn extends vt{getDefaultObject(){return super.getDefaultObject({type:"ColorMatrix",values:xn.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json,t=e.join(" ");return``}}xn.spec={values:{title:"values",inputType:"color-matrix",column:5,defaultValue:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}};class Fi extends vt{getDefaultObject(){return super.getDefaultObject({type:"ComponentTransfer",r:Fi.spec.r.defaultValue,g:Fi.spec.g.defaultValue,b:Fi.spec.b.defaultValue,a:Fi.spec.a.defaultValue})}getInCount(){return 1}parse(e){var[t,...r]=e.split(" ");if(t==="table"||t==="discrete")return{type:t,tableValues:r.join(" ")};if(t==="linear"){var[i,a]=r;return{type:t,slop:i,intercept:a}}else if(t==="gamma"){var[n,o,l]=r;return{type:t,amplitude:n,exponent:o,offset:l}}return{type:t}}toString(){var{r:e,g:t,b:r,a:i}=this.json;return e=this.parse(e),t=this.parse(t),r=this.parse(r),i=this.parse(i),` + ${e&&``} + ${t&&``} + ${r&&``} + ${i&&``} + `}}Fi.spec={r:{title:"R",inputType:"FuncFilter",defaultValue:"identity"},g:{title:"G",inputType:"FuncFilter",defaultValue:"identity"},b:{title:"B",inputType:"FuncFilter",defaultValue:"identity"},a:{title:"A",inputType:"FuncFilter",defaultValue:"identity"}};class mi extends vt{getDefaultObject(){return super.getDefaultObject({type:"Composite",operator:mi.spec.operator.defaultValue,k1:mi.spec.k1.defaultValue,k2:mi.spec.k2.defaultValue,k3:mi.spec.k3.defaultValue,k4:mi.spec.k4.defaultValue})}getInCount(){return 2}toString(){var{operator:e,k1:t,k2:r,k3:i,k4:a}=this.json,n="";return e==="arithmetic"&&(n=` k1="${t}" k2="${r}" k3="${i}" k4="${a}" `),``}hasInIndex(){return!0}}mi.spec={operator:{title:"operator",inputType:"select",options:"over,in,out,atop,xor,arithmetic",defaultValue:"over"},k1:{title:"k1",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k2:{title:"k2",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k3:{title:"k3",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},k4:{title:"k4",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)}};class $n extends vt{getDefaultObject(){return super.getDefaultObject({type:"ConvolveMatrix",kernelMatrix:$n.spec.kernelMatrix.defaultValue})}getInCount(){return 1}toString(){var{kernelMatrix:e}=this.json,t=e.join(" ");return``}}$n.spec={kernelMatrix:{title:"kernelMatrix",inputType:"input-array",column:3,defaultValue:[1,0,0,0,1,0,0,0,1]}};class ws extends vt{getDefaultObject(){return super.getDefaultObject({type:"DiffuseLighting",surfaceScale:ws.spec.surfaceScale.defaultValue,lightingColor:ws.spec.lightingColor.defaultValue,diffuseConstant:ws.spec.diffuseConstant.defaultValue,lightInfo:""})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","diffuseConstant","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,diffuseConstant:t,lightingColor:r}=this.json;return` + ${this.json.lightInfo} + `}}ws.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},diffuseConstant:{title:"diffuseConstant",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class _n extends vt{getDefaultObject(){return super.getDefaultObject({type:"DisplacementMap",scale:_n.spec.scale.defaultValue})}getInCount(){return 2}convert(e){return e.scale=p.parse(e.scale),e}toString(){var{scale:e}=this.json,t=e.value?`scale="${e}"`:"";return``}hasInIndex(){return!0}}_n.spec={scale:{title:"scale",inputType:"number-range",min:0,max:5e3,step:1,defaultValue:p.number(0)}};class na extends vt{getDefaultObject(){return super.getDefaultObject({type:"DistantLight",azimuth:na.spec.azimuth.defaultValue,elevation:na.spec.elevation.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{azimuth:e,elevation:t}=this.json;return``}}na.spec={azimuth:{title:"azimuth",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},elevation:{title:"elevation",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class vi extends vt{getDefaultObject(){return super.getDefaultObject({type:"DropShadow",dx:vi.spec.dx.defaultValue,dy:vi.spec.dy.defaultValue,stdDeviation:vi.spec.stdDeviation.defaultValue,color:vi.spec.color.defaultValue,opacity:vi.spec.opacity.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t,stdDeviation:r,color:i,opacity:a}=this.json;return``}}vi.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},stdDeviation:{title:"stdDeviation",inputType:"number-range",min:0,max:1e3,step:.1,defaultValue:p.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(1)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class JO extends pa{getDefaultObject(){return super.getDefaultObject({type:"FillPaint"})}}class Qr extends vt{getDefaultObject(){return super.getDefaultObject({type:"Flood",x:Qr.spec.x.defaultValue,y:Qr.spec.y.defaultValue,width:Qr.spec.width.defaultValue,height:Qr.spec.height.defaultValue,color:Qr.spec.color.defaultValue,opacity:Qr.spec.opacity.defaultValue})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{opacity:e,color:t,x:r,y:i,width:a,height:n}=this.json;return``}}Qr.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Cs extends vt{getDefaultObject(){return super.getDefaultObject({type:"GaussianBlur",stdDeviationX:Cs.spec.stdDeviationX.defaultValue,stdDeviationY:Cs.spec.stdDeviationY.defaultValue,edgeMode:Cs.spec.edgeMode.defaultValue})}getInCount(){return 1}convert(e){return e.stdDeviationX=p.parse(e.stdDeviationX),e.stdDeviationY=p.parse(e.stdDeviationY),e}toString(){var{stdDeviationX:e,stdDeviationY:t,edgeMode:r}=this.json,i=`${e} ${t}`;return e===t&&(i=e),``}}Cs.spec={stdDeviationX:{title:"X",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)},stdDeviationY:{title:"Y",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)},edgeMode:{title:"edge",inputType:"select",options:"none,duplicate,wrap",defaultValue:"none"}};class Sn extends vt{getDefaultObject(){return super.getDefaultObject({type:"HueRotate",values:Sn.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}Sn.spec={values:{title:"values",inputType:"number-range",min:0,max:360,step:.1,defaultValue:p.number(0)}};class zr extends vt{getDefaultObject(){return super.getDefaultObject({type:"Image",x:zr.spec.x.defaultValue,y:zr.spec.y.defaultValue,width:zr.spec.width.defaultValue,height:zr.spec.height.defaultValue,src:zr.spec.src.defaultValue,alignment:zr.spec.alignment.defaultValue,scaleing:zr.spec.scaleing.defaultValue})}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{src:e,x:t,y:r,width:i,height:a,alignment:n,scaleing:o}=this.json;return``}}zr.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},alignment:{title:"alignment",inputType:"select",options:"xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax",defaultValue:"xMidYMid"},scaleing:{title:"scaleing",inputType:"select",options:"meet,slice",defaultValue:"meet"},src:{title:"Image",inputType:"ImageSelectEditor",defaultValue:""}};class Oc extends vt{getDefaultObject(){return super.getDefaultObject({type:"LuminanceAlpha"})}getInCount(){return 1}toString(){return``}}Oc.spec={};class jc extends vt{getDefaultObject(){return super.getDefaultObject({type:"Merge"})}getInCount(){return 3}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),e.join(" ")}toString(){var{in:e}=this.json;return` + + ${e.map(t=>``).join("")} + `}}jc.spec={};class oa extends vt{getDefaultObject(){return super.getDefaultObject({type:"Morphology",operator:oa.spec.operator.defaultValue,radius:oa.spec.radius.defaultValue})}getInCount(){return 1}toString(){var{operator:e,radius:t}=this.json;return``}}oa.spec={operator:{title:"Operator",inputType:"select",options:"erode,dilate",defaultValue:"erode"},radius:{title:"Radius",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(0)}};class la extends vt{getDefaultObject(){return super.getDefaultObject({type:"Offset",dx:la.spec.dx.defaultValue,dy:la.spec.dy.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t}=this.json;return``}}la.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class ks extends vt{getDefaultObject(){return super.getDefaultObject({type:"PointLight",x:ks.spec.x.defaultValue,y:ks.spec.y.defaultValue,z:ks.spec.z.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{x:e,y:t,z:r}=this.json;return``}}ks.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class Pn extends vt{getDefaultObject(){return super.getDefaultObject({type:"RotaMatrix",hueRotate:Pn.spec.hueRotate.defaultValue})}convert(e){return e.hueRotate=p.parse(e.hueRotate),e}toString(){var{id:e,hueRotate:t}=this.json;return` + + + `}}Pn.spec={hueRotate:{title:"hue-rotate",inputType:"number-range",min:0,max:360,step:1,defaultValue:p.number(0)}};class wn extends vt{getDefaultObject(){return super.getDefaultObject({type:"Saturate",values:wn.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}wn.spec={values:{title:"values",inputType:"number-range",min:-1,max:1,step:.01,defaultValue:p.number(0)}};class ej extends pa{getDefaultObject(){return super.getDefaultObject({type:"SourceAlpha"})}}class tj extends pa{getDefaultObject(){return super.getDefaultObject({type:"SourceGraphic"})}}class Bi extends vt{getDefaultObject(){return super.getDefaultObject({type:"SpecularLighting",surfaceScale:Bi.spec.surfaceScale.defaultValue,lightingColor:Bi.spec.lightingColor.defaultValue,specularConstant:Bi.spec.specularConstant.defaultValue,specularExponent:Bi.spec.specularExponent.defaultValue,lightInfo:""})}toCloneObject(){return b(b({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","specularConstant","specularExponent","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,specularConstant:t,specularExponent:r,lightingColor:i}=this.json;return` + ${this.json.lightInfo} + `}getSourceInAttribute(){return""}}Bi.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},specularConstant:{title:"Constant",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},specularExponent:{title:"Exponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class _r extends vt{getDefaultObject(){return super.getDefaultObject({type:"SpotLight",x:_r.spec.x.defaultValue,y:_r.spec.x.defaultValue,z:_r.spec.x.defaultValue,pointsAtX:_r.spec.pointsAtX.defaultValue,pointsAtY:_r.spec.pointsAtY.defaultValue,pointsAtZ:_r.spec.pointsAtZ.defaultValue,specularExponent:_r.spec.specularExponent.defaultValue,limitingConeAngle:_r.spec.limitingConeAngle.defaultValue})}isLight(){return!0}toString(){}toLightString(){var{x:e,y:t,z:r,pointsAtX:i,pointsAtY:a,pointsAtZ:n,specularExponent:o,limitingConeAngle:l}=this.json;return``}}_r.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtX:{title:"pointsAtX",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtY:{title:"pointsAtY",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},pointsAtZ:{title:"pointsAtZ",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},specularExponent:{title:"specularExponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)},limitingConeAngle:{title:"limitingConeAngle",inputType:"number-range",min:0,max:100,step:1,defaultValue:p.number(1)}};class rj extends pa{getDefaultObject(){return super.getDefaultObject({type:"StrokePaint"})}}class Ni extends vt{getDefaultObject(){return super.getDefaultObject({type:"Tile",x:Ni.spec.x.defaultValue,y:Ni.spec.y.defaultValue,width:Ni.spec.width.defaultValue,height:Ni.spec.height.defaultValue})}getInCount(){return 1}convert(e){return e.x=p.parse(e.x),e.y=p.parse(e.y),e.width=p.parse(e.width),e.height=p.parse(e.height),e}toString(){const{x:e,y:t,width:r,height:i}=this.json;return``}}Ni.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:p.number(0)}};class Gi extends vt{getDefaultObject(){return super.getDefaultObject({type:"Turbulence",filterType:Gi.spec.filterType.defaultValue,baseFrequency:Gi.spec.baseFrequency.defaultValue,numOctaves:Gi.spec.numOctaves.defaultValue,seed:Gi.spec.seed.defaultValue})}convert(e){return e.baseFrequency=p.parse(e.baseFrequency),e.numOctaves=p.parse(e.numOctaves),e.seed=p.parse(e.seed),e}toString(){var{filterType:e,baseFrequency:t,numOctaves:r,seed:i}=this.json;return``}}Gi.spec={filterType:{title:"Type",inputType:"select",options:"fractalNoise,turbulence",defaultValue:"turbulence"},baseFrequency:{title:"Frequency",inputType:"number-range",min:0,max:1,step:.01,defaultValue:p.number(0)},numOctaves:{title:"Octaves",inputType:"number-range",min:1,max:10,step:1,defaultValue:p.number(1)},seed:{title:"Seed",inputType:"number-range",min:0,max:1e4,step:1,defaultValue:p.number(0)}};const ij=["result"];class Ua extends sr{static parse(e){var t=Tp[e.type];return new t(e)}getDefaultObject(e={}){return super.getDefaultObject(b({itemType:"svgfilter",result:""},e))}getDefaultAttribute(){return ij.map(e=>`${e}="${this.json[e]}"`).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}const Tp={Image:zr,Tile:Ni,Saturate:wn,HueRotate:Sn,LuminanceAlpha:Oc,DropShadow:vi,SourceGraphic:tj,SourceAlpha:ej,BackgroundImage:QO,BackgroundAlpha:qO,FillPaint:JO,StrokePaint:rj,ComponentTransfer:Fi,DistantLight:na,PointLight:ks,SpotLight:_r,DiffuseLighting:ws,SpecularLighting:Bi,Blend:bn,Offset:la,RotaMatrix:Pn,GaussianBlur:Cs,Flood:Qr,Merge:jc,Composite:mi,Morphology:oa,Turbulence:Gi,DisplacementMap:_n,ColorMatrix:xn,ConvolveMatrix:$n},sj={Image:zr.spec,Tile:Ni.spec,DropShadow:vi.spec,Saturate:wn.spec,HueRotate:Sn.spec,LuminanceAlpha:Oc.spec,Offset:la.spec,ComponentTransfer:Fi.spec,SpecularLighting:Bi.spec,SpotLight:_r.spec,PointLight:ks.spec,DistantLight:na.spec,DiffuseLighting:ws.spec,Blend:bn.spec,RotaMatrix:Pn.spec,Merge:jc.spec,GaussianBlur:Cs.spec,Flood:Qr.spec,Morphology:oa.spec,Composite:mi.spec,Turbulence:Gi.spec,DisplacementMap:_n.spec,ColorMatrix:xn.spec,ConvolveMatrix:$n.spec},aj=["text-fill-color","text-stroke-color","text-stroke-width","background-clip"];function nj(s){const e={};return Object.keys(s).forEach(t=>{ke(s[t])&&(e[t]=s[t])}),e}class Fo extends YO{toStringPropertyCSS(e,t){return vr(e.get(t))}toBackgroundImageCSS(e){return e.cacheBackgroundImage||e.setBackgroundImageCache(),e.cacheBackgroundImage}toLayoutCSS(e){if(e.hasLayout()){if(e.isLayout(Ae.FLEX))return this.toFlexLayoutCSS(e);if(e.isLayout(Ae.GRID))return this.toGridLayoutCSS(e)}return{}}toLayoutItemCSS(e){var i,a;var t=(i=e.parent)==null?void 0:i.layout,r={};if(t===Ae.FLEX?r={position:"relative",left:"auto !important",top:"auto !important"}:t===Ae.GRID?r={position:"relative",left:"auto",top:"auto"}:t===Ae.DEFAULT&&(r=this.toDefaultLayoutItemCSS(e)),t===Ae.FLEX){r=ie(b({},r),{"flex-basis":e.flexBasis,"flex-shrink":e.flexShrink});const n=(a=e==null?void 0:e.parent)==null?void 0:a.flexDirection;n===Kt.ROW&&e.resizingHorizontal===Ce.FILL_CONTAINER?(r.width="auto",r["flex-grow"]=e.flexGrow||1):n===Kt.COLUMN&&e.resizingVertical===Ce.FILL_CONTAINER&&(r.height="auto",r["flex-grow"]=e.flexGrow||1)}else if(t===Ae.GRID){r=ie(b({},r),{"grid-column-start":e.gridColumnStart,"grid-column-end":e.gridColumnEnd,"grid-row-start":e.gridRowStart,"grid-row-end":e.gridRowEnd});const n=Di.parseStyle(e.parent.gridTemplateColumns),o=Di.parseStyle(e.parent.gridTemplateRows);r["grid-column-start"]=Math.max(1,Math.min(n.length,r["grid-column-start"]||1)),r["grid-column-end"]=Math.min(n.length+1,r["grid-column-end"]||2),r["grid-row-start"]=Math.max(1,Math.min(o.length,r["grid-row-start"]||1)),r["grid-row-end"]=Math.min(o.length+1,r["grid-row-end"]||2)}return r}toDefaultLayoutItemCSS(e){var a;const t={};if((a=e.parent)!=null&&a.is("project"))return t;const r=e.parent.screenWidth;switch(e[Zr.HORIZONTAL]){case Me.MIN:t.left=p.px(e.x),t.right="auto !important";break;case Me.MAX:t.right=p.px(r-e.offsetX-e.screenWidth),t.left="auto !important";break;case Me.STRETCH:t.left=p.px(e.x),t.right=p.px(r-e.offsetX-e.screenWidth),t.width="auto !important";break;case Me.CENTER:t.left=p.px(e.x);break;case Me.SCALE:t.left=p.px(e.x).toPercent(r),t.right=p.px(r-e.offsetX-e.screenWidth).toPercent(r),t.width="auto !important";break}const i=e.parent.screenHeight;switch(e[Zr.VERTICAL]){case Me.MIN:t.top=p.px(e.y),t.bottom="auto !important";break;case Me.MAX:t.top="auto !important",t.bottom=p.px(i-e.offsetY-e.screenHeight);break;case Me.STRETCH:t.top=p.px(e.y),t.bottom=p.px(i-e.offsetY-e.screenHeight),t.height="auto !important";break;case Me.CENTER:t.top=p.px(e.y);break;case Me.SCALE:t.top=p.px(e.y).toPercent(i),t.bottom=p.px(i-e.offsetY-e.screenHeight).toPercent(i),t.height="auto !important";break}return t}toFlexLayoutCSS(e){return e.parent.isNot("project"),{display:"flex",gap:p.px(e.gap),"flex-direction":e.flexDirection,"flex-wrap":e.flexWrap,"justify-content":e.justifyContent,"align-items":e.alignItems,"align-content":e.alignContent}}toGridLayoutCSS(e){return{display:"grid","grid-template-columns":e.gridTemplateColumns,"grid-template-rows":e.gridTemplateRows,"grid-template-areas":e.gridTemplateAreas,"grid-auto-columns":e.gridAutoColumns,"grid-auto-rows":e.gridAutoRows,"grid-auto-flow":e.gridAutoFlow,"grid-column-gap":e.gridColumnGap,"grid-row-gap":e.gridRowGap}}toBorderCSS(e){return e.computed("border",r=>b({},vr(r)))}toBoxModelCSS(e){let t={};return e.marginTop&&(t["margin-top"]=p.px(e.marginTop)),e.marginBottom&&(t["margin-bottom"]=p.px(e.marginBottom)),e.marginLeft&&(t["margin-left"]=p.px(e.marginLeft)),e.marginRight&&(t["margin-right"]=p.px(e.marginRight)),e.paddingTop&&(t["padding-top"]=p.px(e.paddingTop)),e.paddingBottom&&(t["padding-bottom"]=p.px(e.paddingBottom)),e.paddingLeft&&(t["padding-left"]=p.px(e.paddingLeft)),e.paddingRight&&(t["padding-right"]=p.px(e.paddingRight)),t}toSizeCSS(e){const t={};if(e.isLayout(Ae.FLEX)){switch(e.resizingHorizontal){case Ce.FIXED:t.width=p.px(e.screenWidth);break;case Ce.HUG_CONTENT:t["min-width"]=p.px(e.screenWidth);break}switch(e.resizingVertical){case Ce.FIXED:t.height=p.px(e.screenHeight);break;case Ce.HUG_CONTENT:t["min-height"]=p.px(e.screenHeight);break}}if(e.isInDefault()&&(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight)),e.isInFlex()){const r=e.parent.flexDirection;r===Kt.ROW||r===Kt.ROW_REVERSE?(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight),e.parent["align-items"]===Ri.STRETCH&&(t.height="auto"),e.resizingVertical===Ce.FILL_CONTAINER&&(t.height="auto",t["align-self"]=Ri.STRETCH)):(t.width=p.px(e.screenWidth),t.height=p.px(e.screenHeight),e.parent["align-items"]===Ri.STRETCH&&(t.width="auto"),e.resizingHorizontal===Ce.FILL_CONTAINER&&(t.width="auto",t["align-self"]=Ri.STRETCH))}return e.isInGrid()&&(t.width="auto",t.height="auto"),t}toDefaultCSS(e){e.hasCache("toDefaultCSS")||e.addCache("toDefaultCSS",{"box-sizing":"border-box"});let t=e.getCache("toDefaultCSS");return e.isAbsolute&&(t.left=p.px(e.x),t.top=p.px(e.y)),t["background-color"]=e.backgroundColor,t.color=e.color,t["font-size"]=e.fontSize,t["font-weight"]=e.fontWeight,t["font-style"]=e.fontStyle,t["font-family"]=e.fontFamily,t["text-align"]=e.textAlign,t["text-decoration"]=e.textDecoration,t["text-transform"]=e.textTransform,t["letter-spacing"]=e.letterSpacing,t["word-spacing"]=e.wordSpacing,t["line-height"]=e.lineHeight,t["text-indent"]=e.textIndent,t["text-shadow"]=e.textShadow,t["text-overflow"]=e.textOverflow,t["text-wrap"]=e.textWrap,t.position=e.position,t.overflow=e.overflow,t["z-index"]=e.zIndex,t.opacity=e.opacity,t["mix-blend-mode"]=e.mixBlendMode,t["transform-origin"]=e.transformOrigin,t["border-radius"]=e.borderRadius,t.filter=e.filter,t["backdrop-filter"]=e.backdropFilter,t["box-shadow"]=e.boxShadow,t.animation=e.animation,t.transition=e.transition,t}toVariableCSS(e){return e.computed("variable",r=>{let i={};return r.split(";").filter(a=>a.trim()).forEach(a=>{const[n,o]=a.split(":");i[`--${n}`]=o}),i})}toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(r=>r.trim()).forEach(r=>{const[i,a]=r.split(":");t[`--${i}`]=a}),t}toRootVariableString(e){return Ze(this.toRootVariableCSS(e))}toWebkitCSS(e){var t={};return aj.forEach(r=>{t[`-webkit-${r}`]=e.get(r)}),t}toTextClipCSS(e){let t={};return e.textClip==="text"&&(t["-webkit-background-clip"]="text",t["-webkit-text-fill-color"]="transparent",t.color="transparent"),t}toTransformCSS(e){return e.computed("angle",r=>({transform:r===0?"":`rotateZ(${r}deg)`}))}toDefInnerString(e){return` + ${this.toClipPath(e)} + ${this.toSVGFilter(e)} + `.trim()}toClipPath(e){if(e.clipPath==="")return"";e.cacheClipPathObject||e.setClipPathCache();var t=e.cacheClipPathObject,r=t.value;switch(t.type){case"path":return``;case"svg":return`${r}`}return""}toClipPathCSS(e){let t=e.clipPath;if(Boolean(t)===!1)return null;e.cacheClipPathObject||e.setClipPathCache();var r=e.cacheClipPathObject;switch(r.type){case"path":r.value&&(t=`url(#${this.clipPathId(e)})`);break;case"svg":t=`url(#${this.clipPathId(e)})`;break}return{"clip-path":t}}innerSVGId(e){return e.id+"inner-svg"}booleanId(e){return e.id+"boolean"}clipPathId(e){return e.id+"clip-path"}toDefString(e){var t=this.toDefInnerString(e).trim();return t?` + + + ${t} + + + `:""}toSelectorString(e,t=""){var r;return(r=e.selectors)==null?void 0:r.map(i=>i.toString(t)).join(` + +`)}generateView(e,t="",r=""){var i=` + ${t} { /* ${e.itemType} */ + ${Ze(this.toCSS(e),` + `)}; + ${r} + } + ${this.toNestedCSS(e).map(a=>`${t} ${a.selector} { + ${a.cssText?a.cssText:Ze(a.css||{},` + `)}; + }`).join(` +`)} + ${this.toSelectorString(e,t)} + `;return i}toCSS(e){return nj(Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBoxModelCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e),this.toSizeCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e)))}toStyleCode(e){return this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`)}toStyle(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return` + + `+e.layers.map(r=>this.renderer.toStyle(r)).join("")}toStyleData(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return{styleTag:``,cssString:t}}toExportStyle(e){const t=this.generateView(e,`.element-item[data-id='${e.id}']`);return` + + `+e.layers.map(r=>this.renderer.toExportStyle(r)).join("")}render(e){var{elementType:t,id:r,name:i,itemType:a,isBooleanItem:n}=e;const o=t||"div";return`<${o} id="${this.uniqueId(e)}" class="element-item ${a}" data-is-boolean-item="${n}" data-id="${r}" data-title="${i}">${this.toDefString(e)}${e.layers.map(l=>this.renderer.render(l)).join("")}`}toSVGFilter(e){if(e.svgfilters.length===0)return"";var t=e.computedValue("svgfilters");return(e.hasChangedField("svgfilters")||!t)&&(t=e.computed("svgfilters",r=>{var i=r.map(a=>` + + ${a.filters.map(n=>Ua.parse(n)).join(` +`)} + `).join("");return i},!0)),t}renderSVG(){}toNestedCSS(){return[]}updateStyle(e){if(e.hasCache("style")){const t=this.toStyleData(e).cssString;if(e.hasCache("styleText")&&e.getCache("styleText")===t)return;e.addCache("styleText",t),e.getCache("style").text(t)}else{const t=this.toStyleData(e),r=ge.createByHTML(t.styleTag);e.addCache("style",r),e.addCache("styleText",t.cssString),document.head.appendChild(r.el)}}update(e,t){if(!t)return;this.updateStyle(e);let r=t.el.$svg;if(r||(t.el.$svg=t.$(`[data-id="${this.innerSVGId(e)}"]`),r=t.el.$svg,t.el.$booleanSvg=t.$(`[data-id="${this.booleanId(e)}"]`)),t.data("is-boolean-item")!==`${e.isBooleanItem}`&&t.attr("data-is-boolean-item",e.isBooleanItem),r){const n=this.toDefInnerString(e);if(n){var i=r.$("defs");i.updateSVGDiff(`${n}`)}}else{const n=this.toDefString(e);if(n){var a=ge.createByHTML(n);a&&t.prepend(a)}}}}class Ji extends Fo{}class oj extends Ji{update(e,t){const r=t.$(".sample-text");r&&r.text(e.sampleText);const i=t.$(".sample-number");i&&i.text(e.sampleNumber);const a=t.$(".sample-items");if(a){const n=[...Array(e.sampleNumber)].map((o,l)=>` +
        ${l}
        + `).join(` +`);a.html(n)}super.update(e,t)}render(e){var{id:t,sampleText:r,sampleNumber:i}=e;return` +
        + ${this.toDefString(e)} +
        +
        ${r}
        +
        ${i}
        +
        +
        +
        `}}function lj(s){s.registerComponent("sample",XO),s.registerRenderer("html","sample",new oj),s.registerInspector("sample",e=>["Sample Text \uD3B8\uC9D1",{key:"sampleText",editor:"TextEditor",defaultValue:e.sampleText},"Sample Number \uD3B8\uC9D1",{key:"sampleNumber",editor:"NumberInputEditor",editorOptions:{min:0,max:10,step:1,label:"SN"},defaultValue:e.sampleNumber},"\uC2A4\uD0C0\uC77C \uCE74\uD53C",{type:"column",size:[1,1],gap:10,columns:[{key:"copyCssJSON",editor:"Button",editorOptions:{text:"Copy CSS JSON",onClick:()=>{console.log(JSON.stringify(s.html.toCSS(e),null,4))}}},{key:"copyCssString",editor:"Button",editorOptions:{text:"Copy CSS String",onClick:()=>{console.log(Ze(s.html.toCSS(e)))}}},{key:"changeColor",editor:"Button",editorOptions:{text:"Change Text Random Color",onClick:()=>{const t=Ba(),r=Ba();s.context.commands.emit("setAttribute",{[e.id]:{color:t,"background-color":r}})}}}]}])}class cj extends X{template(){return w("div",{class:"elf--selection-info-view"})}[ve("$el [data-artboard-title-id]")+fo("calculateFirstMovedElement")+_e("calculateMovedElement")+Se("calculateEndedElement")](e){this.startXY=e.xy,this.initMousePoint=this.$viewport.getWorldPosition(e);const t=e.$dt.attr("data-artboard-title-id");this.$context.selection.select(t),e.altKey&&this.$commands.emit("history.copyLayer","copy"),this.initializeDragSelection()}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(a=>Pe([],a,e)),3/this.$viewport.scale),r=Pe([],t.dist,e),i={};this.$context.selection.cachedItemMatrices.forEach(a=>{const n=a.verties.map(l=>Pe([],l,r)),o=$e([],Xe([],n[0],a.parentMatrixInverse),Xe([],a.verties[0],a.parentMatrixInverse));i[a.id]={x:Math.floor(a.x+o[0]),y:Math.floor(a.y+o[1])}}),this.$context.selection.reset(i)}calculateFirstMovedElement(){this.$config.set("set.move.control.point",!0),this.emit(Is)}calculateMovedElement(){const e=this.$viewport.getWorldPosition(),t=Fr([],$e([],e,this.initMousePoint));this.moveTo(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y")),this.refresh()}[M("refreshItemName")](e,t){var r;this.$commands.emit("setAttribute",{[e]:{name:t}}),(r=this.$el.$(`[data-artboard-title-id='${e}']`))==null||r.text(t)}calculateEndedElement(){this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.$config.set("set.move.control.point",!1),this.emit(Is),this.$commands.emit("history.refreshSelection")}[M(it)](){this.refresh()}[M(Lt)](){this.$context.selection.current&&this.$context.selection.current.is("artboard")&&this.$context.selection.hasChangedField("x","y","width","height","angle","transform","transform-origin")&&this.refresh()}[G("$el")+Ee](){var e;return(e=this.$context.selection.currentProject)==null?void 0:e.artboards.map(t=>({item:t,title:t.name,id:t.id,layout:t.layout,pointers:this.$viewport.applyVerties(t.verties)})).map(t=>this.makeArtboardTitleArea(t))}getIcon(e){return e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?R("layout_flex",e.flexDirection==="column"?"rotate(90 12 12)":""):e.isLayout("grid")?R("layout_grid"):"":this.$icon.get(e.itemType,e)}createSize(e,t){const r=e[0],i=$e([],e[0],e[3]),a=rt(i[0],i[1])-90;return w("div",{class:"artboard-title is-not-drag-area","data-artboard-title-id":t.id,"data-layout":t.layout,style:{"transform-origin":"0% 0%",transform:`translate3d( calc(${r[0]}px), calc(${r[1]}px), 0px) rotateZ(${a}deg)`}},w("div",{style:"transform: translateY(-100%);"},this.getIcon(t.item),t.title))}makeArtboardTitleArea(e){return this.createSize(e.pointers,e)}[M("refreshAll")](){this.refresh()}[M("appendLayer")](){this.refresh()}}function hj(s){s.registerUI("canvas.view",{SelectionInfoView:cj})}const so=.5;class dj extends X{template(){return w("div",{class:"elf--ghost-tool-view"},w("div",{ref:"$containerView"}),w("div",{ref:"$view"}))}[M("startGhostToolView")](){const e=this.$context.selection.verties;this.isLayoutItem=this.$context.selection.isLayoutItem,this.verties=ye(e),this.ghostVerties=ye(e),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties),this.initMousePoint=this.$viewport.getWorldPosition(),this.filteredLayers=this.$context.selection.notSelectedLayers,this.containerList=this.filteredLayers.filter(t=>t.hasLayout()||t.is("artboard")).map(t=>t.originVerties),this.$config.set("set.move.control.point",!0)}collectInformation(){var i,a;const e=this.$viewport.getWorldPosition(),t=this.getDist();this.ghostVerties=this.verties.map(n=>Pe([],n,t)),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties);const r=this.$context.selection.filteredLayers.filter(n=>this.$context.selection.check(n)===!1);if(this.targetItem=r[0],this.targetItem){const n=(i=this.$context.selection.current)==null?void 0:i.parent;n.isNot("project")&&(n==null?void 0:n.isLayout(Ae.GRID))?this.targetItem=this.$context.selection.current.parent:this.targetItem.hasLayout()&&((a=this.targetItem)==null?void 0:a.hasChildren())&&(this.targetItem.isLayout(Ae.FLEX)?this.targetItem=this.targetItem.layers[this.targetItem.layers.length-1]:this.targetItem.isLayout(Ae.GRID)),this.$context.selection.updateDragTargetItem(this.targetItem),this.targetOriginPosition=this.$viewport.applyVerties(kr(this.targetItem.contentVerties)),this.targetPoint=this.$viewport.applyVertex(e),this.targetRelativeMousePoint={x:(this.targetPoint[0]-this.targetOriginPosition[0][0])/(this.targetOriginPosition[1][0]-this.targetOriginPosition[0][0]),y:(this.targetPoint[1]-this.targetOriginPosition[0][1])/(this.targetOriginPosition[3][1]-this.targetOriginPosition[0][1])},this.targetItem.isLayoutItem()?(this.targetParent=this.targetItem.parent,this.targetParent&&(this.targetParentPosition=this.$viewport.applyVerties(this.targetParent.contentVerties))):(this.targetParent=null,this.targetParentPosition=null)}else this.targetPoint=null,this.targetRelativeMousePoint=null,this.targetParent=null,this.targetParentPosition=null}[M("moveFirstGhostToolView")](){this.collectInformation(),this.load("$containerView"),this.load("$view")}[M("moveGhostToolView")](){this.collectInformation(),this.load("$view")}[G("$containerView")](){var e;return this.ghostVerties?w("svg",null,(e=this.containerList)==null?void 0:e.map(t=>(t=this.$viewport.applyVerties(t),w("path",{class:"container",d:` + M ${t[0][0]} ${t[0][1]} + L ${t[1][0]} ${t[1][1]} + L ${t[2][0]} ${t[2][1]} + L ${t[3][0]} ${t[3][1]} + Z + `})))):w("svg",null)}renderPathForVerties(e,t){if(!e)return w("g",null);const r=Mi(e);return w("g",null,w("path",{class:t,d:r}))}renderPath(e,t,r=t){if(!e)return"";e=r==="ghost"?e:kr(e);const i=e[0][0],a=t==="flex-item"?e[2][1]+10:e[0][1]-10;return w("g",null,w("text",{x:i,y:a,"font-size":8},r),this.renderPathForVerties(e,t))}renderLayoutFlexRowArea(){return this.targetRelativeMousePoint.xPe([],y,v)).filter((y,S)=>S<4);return this.renderPathForVerties(g,"flex-item","ghost")}renderLayoutFlexColumnArea(){return this.targetRelativeMousePoint.y<0?"":this.targetRelativeMousePoint.ya<4),"ghost"))}initializeGhostView(){this.isLayoutItem=!1,this.ghostVerties=void 0,this.ghostScreenVerties=void 0,this.targetOriginPosition=void 0,this.targetOriginPosition=void 0,this.targetRelativeMousePoint=void 0,this.targetItem=void 0,this.targetParent=void 0,this.targetParentPosition=void 0,this.$context.selection.updateDragTargetItem(this.targetItem)}getDist(){const e=this.$viewport.getWorldPosition();return Fr([],$e([],e,this.initMousePoint))}insertToBackground(){const e=this.$context.selection.current,t=this.getDist();e.isLayoutItem()!==!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.$context.selection.currentProject,t)}getTargetAction(){let e="";if(this.targetParent.hasLayout()&&this.targetParent.isLayout(Ae.FLEX))switch(this.targetParent.flexDirection){case Kt.ROW:this.targetRelativeMousePoint.xc<4),a=Et(i),n=au.RECT/this.$context.viewport.scale,o=r==null?void 0:r.filter(l=>fc(l.originVerties,i)).filter(l=>{const c=gc(l.originRect,a);return Math.floor(c.width)>n&&Math.floor(c.height)>n});if(o!=null&&o.length){const l=o.map(g=>g.column),c=o.map(g=>g.row),h=Math.min(...l),u=Math.min(...c),d=Math.max(...l)+1,v=Math.max(...c)+1;this.$commands.executeCommand("setAttribute","change grid item",this.$context.selection.packByValue({"grid-column-start":h,"grid-column-end":d,"grid-row-start":u,"grid-row-end":v})),t.current.hasChild(e.id)===!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,t.current,void 0);return}else this.targetItem&&(this.emit("refreshGridToolInfo",this.targetItem),this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,void 0))}updateLayer(){var r;const e=this.$context.selection.current;if(!e)return;const t=this.getDist();if(!(t[0]===0&&t[1]===0)&&!(this.targetItem&&this.targetItem.id===(e==null?void 0:e.id))){if(!this.targetItem){this.insertToBackground();return}if(this.targetItem.hasLayout()){const i=this.$context.keyboardManager.isCtrl();if(((r=this.targetItem)==null?void 0:r.hasChildren())===!1&&this.targetItem.isLayout(Ae.FLEX)&&i===!1){this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t);return}else if(i){const{info:a}=this.$context.selection.gridInformation||{items:[]};if(a!=null&&a.current){this.insertToGridItem();return}}else if(this.targetItem.isLayout(Ae.GRID)){this.insertToGridItem();return}}if(this.targetParent){this.insertToLayoutItem();return}e.isLayoutItem()&&e.parent.id!==this.targetItem.id&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t)}}[M("endGhostToolView")](e=!1){e&&this.updateLayer(),this.initializeGhostView(),this.load()}}var uj={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const pj=class extends X{checkViewMode(){return this.$modeView.isCurrentMode(js.CanvasView)}[M(Oe,Is)+fe("checkViewMode")](){this.$context.selection.isMany?this.initSelectionTool():this.hide()}[M(it)+fe("checkViewMode")](){this.$context.selection.isMany&&this.initSelectionTool()}};class gj extends pj{template(){return` + + `}toggleEditingPath(e){this.refs.$selectionView.toggleClass("editing-path",e)}[ve("$pointerRect .rotate-pointer")+_e("rotateVertex")+Se("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.verties=this.groupItem.verties,this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!1,this.state.isRotate=!0,this.$config.set("set.move.control.point",!0)}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=$e([],e,this.initMousePoint),r=this.rotateTargetNumber===4?lo(this.verties,34):this.verties[this.rotateTargetNumber];var i=Math.floor(dc(r,this.verties[4],t));this.$config.get("bodyEvent").shiftKey&&(i=i-i%this.$config.get("fixed.angle")),this.localAngle=this.angle+i,this.groupItem.reset({angle:this.localAngle});const a=Ft(i,this.verties[4]);let n=this.$context.selection.cachedItemMatrices;this.$context.selection.length===1&&(n=n.filter(o=>o.id===this.$context.selection.current.id)),n.forEach(o=>{const l=oe(o.verties,It([],o.parentMatrixInverse,a)),c=lo(l,34);var h=aa(c[0]-l[4][0],c[1]-l[4][1])-270;const u=Xe([],l[0],Ft(-h,l[4])),d=this.$model.get(o.id);d&&d.reset({x:u[0],y:u[1],angle:h})}),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height","angle")),this.renderPointers()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$commands.executeCommand("setAttribute","rotate selection pointer",this.$context.selection.pack("x","y","width","height","angle"))})}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const r=t.split(",").map(o=>Number(o)),i=$e([],r,this.state.renderPointerList[0][4]),a=rt(i[0],i[1]);let n=Math.floor(a);this.$commands.emit("refreshCursor","direction",`rotate(${n} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[go("$pointerRect .rotate-pointer")+fe("checkPointerIsNotMoved")+Le](e){this.refreshRotatePointerIcon(e)}[go("$pointerRect .pointer")+fe("checkPointerIsNotMoved")+Le](e){this.refreshPointerIcon(e)}[Co("$pointerRect .pointer,.rotate-pointer")+fe("checkPointerIsNotMoved")+Le](){this.$commands.emit("recoverCursor")}[ve("$pointerRect .pointer")+Le+_e("moveVertex")+Se("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number");this.state.moveType=uj[`${t}`],this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.state.dragging=!1,this.initMatrix(!0),this.cachedGroupItem=this.groupItem.matrix,this.$config.set("set.move.control.point",!0),this.$context.selection.startToCacheChildren()}calculateNewOffsetMatrixInverse(e,t,r,i,a){const n=Pe([],Sr.scale(i,t,r),qt([],e));return Wi(ht([],e),ht([],n),a,ht([],qt([],n)))}calculateDistance(e,t,r){const i=Wt(e),a=this.$context.snapManager.check([Pe([],i,t)],3/this.$viewport.scale),n=Pe([],i,Pe([],t,a.dist));var o=Xe([],i,r),l=Xe([],n,r);return Zi([],$e([],l,o))}calculateRealDist(e,t,r){return this.calculateDistance(e.verties[t],r,e.absoluteMatrixInverse)}moveGroupItem(e,t,r){this.groupItem.reset({x:e[0]+(t<0?t:0),y:e[1]+(r<0?r:0),width:Math.abs(t),height:Math.abs(r)})}moveItemForGroup(e,t,r=0,i=0){const a=Wi(ht([],t[4]),e.itemMatrix,ht([],qt([],t[4]))),[n,o]=Xe([],t[0],a),l=Ht(t[0],t[1]),c=Ht(t[0],t[3]),h=this.$model.get(e.id);h&&h.reset({x:n+r,y:o+i,width:Math.max(Math.abs(l),1),height:Math.max(Math.abs(c),1)})}recoverItemForGroup(e,t,r,i=0,a=0){const n=e.absoluteMatrix,o=e.absoluteMatrixInverse;this.$context.selection.cachedItemMatrices.forEach(l=>{const c=er(l.parentMatrixInverse,n,ht([],[i,a,0]),jr([],[t,r,1]),o),h=oe(l.verties,c);this.moveItemForGroup(l,h)})}moveBottomRightVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,2,e);this.$config.get("bodyEvent").shiftKey&&(i=r*t.height/t.width);const a=t.width+r,n=t.height+i;this.moveDirectionVertex(t,0,0,a,n,"to top left",[0,0,0])}moveTopRightVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,1,e);this.$config.get("bodyEvent").shiftKey&&(i=-(r*t.height/t.width));const a=t.width+r,n=t.height-i;this.moveDirectionVertex(t,0,i,a,n,"to bottom left",[0,n,0])}moveDirectionVertex(e,t,r,i,a,n,o){const l=i/e.width,c=a/e.height;if(l>=0&&c>=0){const h=er(e.directionMatrix[n],this.calculateNewOffsetMatrixInverse(o,i,a,e.originalTransformOrigin,e.itemMatrix)),u=Hi([],h);this.moveGroupItem(u,i,a),this.recoverItemForGroup(e,l,c,t,r)}}moveTopVertex(e){const t=this.cachedGroupItem,[,r]=this.calculateRealDist(t,0,e),i=t.width,a=t.height-r;this.moveDirectionVertex(t,0,r,i,a,"to bottom",[i/2,a,0])}moveBottomVertex(e){const t=this.cachedGroupItem,[,r]=this.calculateRealDist(t,2,e),i=t.width,a=t.height+r;this.moveDirectionVertex(t,0,0,i,a,"to top",[i/2,0,0])}moveTopLeftVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,0,e);this.$config.get("bodyEvent").shiftKey&&(i=r*t.height/t.width);const a=t.width-r,n=t.height-i;this.moveDirectionVertex(t,r,i,a,n,"to bottom right",[a,n,0])}moveLeftVertex(e){const t=this.cachedGroupItem,[r]=this.calculateRealDist(t,0,e),i=t.width-r,a=t.height;this.moveDirectionVertex(t,r,0,i,a,"to right",[i,a/2,0])}moveRightVertex(e){const t=this.cachedGroupItem,[r]=this.calculateRealDist(t,2,e),i=t.width+r,a=t.height;this.moveDirectionVertex(t,0,0,i,a,"to left",[0,a/2,0])}moveBottomLeftVertex(e){const t=this.cachedGroupItem;let[r,i]=this.calculateRealDist(t,3,e);this.$config.get("bodyEvent").shiftKey&&(i=-(r*t.height/t.width));const a=t.width-r,n=t.height+i;this.moveDirectionVertex(t,r,0,a,n,"to top right",[a,0,0])}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Fr([],$e([],e,this.initMousePoint));this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to bottom left"?this.moveBottomLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"&&this.moveBottomVertex(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height")),this.renderPointers(),this.state.dragging=!0}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","width","height")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.state.show&&(this.$el.hide(),this.state.show=!1)}initSelectionTool(){this.$el.isHide()&&this.$context.selection.isMany?this.show():this.$el.isShow()&&this.$context.selection.isMany===!1&&this.hide(),this.initMatrix(),this.makeSelectionTool()}get item(){const e=this.verties||mt(0,0,0,0);return this.state.groupSelectionView||(this.state.groupSelectionView=this.$editor.createModel({itemType:"artboard"},!1)),this.state.groupSelectionView.reset({parentId:this.$context.selection.currentProject.id,x:e[0][0],y:e[0][1],width:se(e[0],e[1]),height:se(e[0],e[3])}),this.state.groupSelectionView}initMatrix(){this.$context.selection.isMany&&this.state.dragging===!1&&(this.verties=ye(this.$context.selection.verties),this.angle=0,this.localAngle=this.angle,this.groupItem=this.item,this.cachedGroupItem=this.item.matrix)}makeSelectionTool(){this.renderPointers()}renderPointers(){if(this.$context.selection.isEmpty){this.refs.$pointerRect.empty();return}this.state.renderPointerList=[this.$viewport.applyVerties(this.$context.selection.verties)];const{line:e,point:t,size:r,elementLine:i}=this.createRenderPointers(this.state.renderPointerList[0]);this.refs.$pointerRect.updateDiff(e+i+t+r)}createPointer(e,t,r){return` +
        + `}createPointerSide(e,t,r,i,a){return` +
        + `}createRotatePointer(e,t){return e.length===0?"":t<4?` +
        + `:` +
        + `}createPointerRect(e,t){if(e.length===0)return"";const r=te([],e[0],e[1],.5),i=` + M ${r[0]},${r[1]} + L ${t[0]}, ${t[1]} + `;return` + + + `}createLine(e){return` + M ${e[0][0]}, ${e[0][1]} + L ${e[1][0]}, ${e[1][1]} + L ${e[2][0]}, ${e[2][1]} + L ${e[3][0]}, ${e[3][1]} + L ${e[0][0]}, ${e[0][1]} + Z + `}createSize(e){const t=te([],e[0],e[1],.5),r=te([],e[1],e[2],.5),i=te([],e[2],e[3],.5),a=te([],e[3],e[0],.5),n=this.$viewport.applyVertiesInverse(e),o=se(n[0],n[1]),l=se(n[0],n[3]),c=[{start:t,end:i},{start:r,end:a},{start:i,end:t},{start:a,end:r}].map((y,S)=>({index:S,data:y}));c.sort((y,S)=>y.data.start[1]>S.data.start[1]?-1:1);const h=c[0],u=te([],h.data.end,h.data.start,1+16/se(h.data.start,h.data.end)),d=$e([],h.data.start,h.data.end),v=rt(d[0],d[1])+90;let g=`${Ye(o,100)} x ${Ye(l,100)}`;if(this.state.isRotate){const y=this.groupItem.angle;y&&(g=`${y}\xB0`)}return`
        ${g}
        `}createRenderPointers(e){const t=$e([],te([],e[0],e[1],.5),te([],e[0],e[2],.5)),r=p.deg(rt(t[0],t[1])-90).round(1e3),i=lo(e,30),a=se(e[0],e[2]),n=se(e[0],e[1]),o=se(e[0],e[3]);return{line:this.createPointerRect(e,i),elementLine:` + + + + `,size:this.createSize(e),point:[this.createRotatePointer(i,4,"center center"),a<20?void 0:this.createPointerSide(te([],e[0],e[1],.5),11,r,n,5),a<20?void 0:this.createPointerSide(te([],e[1],e[2],.5),12,r,5,o),a<20?void 0:this.createPointerSide(te([],e[2],e[3],.5),13,r,n,5),a<20?void 0:this.createPointerSide(te([],e[3],e[0],.5),14,r,5,o),this.createPointer(e[0],1,r),this.createPointer(e[1],2,r),this.createPointer(e[2],3,r),this.createPointer(e[3],4,r)].join("")}}checkShow(){return!!(this.state.show&&this.$context.selection.isMany)}[M("hideSelectionToolView")](){this.hide()}}var fj={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const mj=class extends X{checkViewMode(){return this.$modeView.isCurrentMode(js.CanvasView)}[M(Oe,Is)+fe("checkViewMode")](){this.initSelectionTool()}[M(it)+fe("checkViewMode")](){this.$context.selection.isOne?this.initSelectionTool():this.hide()}[M("updateModeView")](){this.checkViewMode()?this.initSelectionTool():this.hide()}};class vj extends mj{template(){return` + + `}toggleEditingPath(e){this.$el.toggleClass("editing-path",e)}[ve("$pointerRect .rotate-pointer")+_e("rotateVertex")+Se("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.verties=ye(this.$context.selection.verties),this.$context.snapManager.clear(),this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!0,this.state.isRotate=!0,this.initAngle=this.$context.selection.current.angle}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=$e([],e,this.initMousePoint),r=this.rotateTargetNumber===4?lo(this.verties,34):this.verties[this.rotateTargetNumber];var i=Math.floor(dc(r,this.verties[4],t));const a=this.$context.selection.current;let n=this.initAngle+i;a&&(this.$config.get("bodyEvent").shiftKey&&(n-=n%this.$config.get("fixed.angle")),a.angle=Ye(n%360,100)),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("angle")),this.makeSelectionTool()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.verties=null,this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.pack("angle"))}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const r=t.split(",").map(o=>Number(o)),i=$e([],r,this.state.renderPointerList[0][4]),a=rt(i[0],i[1]);let n=Math.floor(a);this.$commands.emit("refreshCursor","direction",`rotate(${n} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[go("$pointerRect .rotate-pointer")+fe("checkPointerIsNotMoved")](e){this.refreshRotatePointerIcon(e)}[go("$pointerRect .pointer")+fe("checkPointerIsNotMoved")](e){this.refreshPointerIcon(e)}[Co("$pointerRect .pointer,.rotate-pointer")+fe("checkPointerIsNotMoved")](){this.$commands.emit("recoverCursor")}[ve("$pointerRect .pointer")+_e("moveVertex")+Se("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number"),r=fj[`${t}`];this.initMousePoint=this.$viewport.getWorldPosition(e),this.state.moveType=r,this.state.moveTarget=t,this.$context.snapManager.clear(),this.verties=this.$context.selection.verties,this.hasRotate=this.$context.selection.current.angle!==0,this.cachedCurrentItemMatrix=this.$context.selection.current.matrix,this.$context.selection.startToCacheChildren()}calculateDistance(e,t,r){const i=Wt(e),a=Pe([],i,t),n=this.$context.snapManager.check([a],5/this.$viewport.scale),o=Pe([],a,n.dist),[l,c]=oe([i,o],r);return $e([],c,l)}calculateRealDist(e,t,r){return this.calculateDistance(e.verties[t],r,e.absoluteMatrixInverse)}moveItem(e,t,r,i,a={}){if(e){let n={x:t[0]+(r<0?r:0),y:t[1]+(i<0?i:0),width:Math.max(Math.abs(r),1),height:Math.max(Math.abs(i),1)};e.isInFlex()?(delete n.x,delete n.y):e.isInGrid(),this.hasRotate||(n=OS(n),n.width=Math.max(n.width,1),n.height=Math.max(n.height,1)),e.reset(b(b({},n),a))}}moveDirectionVertex(e,t,r,i,a,n={}){const o=$e([],Sr.scale(e.originalTransformOrigin,t,r),a),l=Wi(ht([],a),ht([],o),e.itemMatrix,ht([],qt([],o))),c=er(e.directionMatrix[i],l),h=Hi([],c);this.moveItem(this.$model.get(e.id),h,t,r,n)}moveBottomRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,2,e),l=Te(0,0,0);r&&(n=n*2,o=o*2),t&&(o=n*a.height/a.width);const c=a.width+n,h=i?c:a.height+o;r&&(l=Te(n/2,o/2,0)),this.moveDirectionVertex(a,c,h,"to top left",l,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveTopRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,1,e);r&&(n=n*2,o=o*2),t&&(o=-(n*a.height/a.width));const l=a.width+n,c=i?l:a.height-o;let h=Te(0,c,0);r&&(h=Te(n/2,c+o/2,0)),this.moveDirectionVertex(a,l,c,"to bottom left",h,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveTopLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,0,e);r&&(n=n*2,o=o*2),t&&(o=n*a.height/a.width);const l=a.width-n,c=i?l:a.height-o;let h=Te(l,c,0);r&&(h=Te(l+n/2,c+o/2,0)),this.moveDirectionVertex(a,l,c,"to bottom right",h,{resizingHorizontal:Ce.FIXED,resizingVertical:Ce.FIXED}),this.updateGridArea(a)}}moveTopVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),r=this.cachedCurrentItemMatrix;if(r){let[,i]=this.calculateRealDist(r,0,e);t&&(i=i*2);const a=r.width,n=r.height-i;let o=Te(a/2,n,0);t&&(o=Te(a/2,n+i/2,0)),this.moveDirectionVertex(r,a,n,"to bottom",o,{resizingVertical:Ce.FIXED}),this.updateGridArea(r)}}moveBottomVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),r=this.cachedCurrentItemMatrix;if(r){let[,i]=this.calculateRealDist(r,3,e);t&&(i=i*2);const a=r.width,n=r.height+i;let o=Te(a/2,0,0);t&&(o=Te(a/2,i/2,0)),this.moveDirectionVertex(r,a,n,"to top",o,{resizingVertical:Ce.FIXED}),this.updateGridArea(r)}}moveRightVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n]=this.calculateRealDist(a,1,e);r&&(n=n*2);const o=a.width+n;let l=a.height;i?l=o:t&&(l=a.height*(1+n/a.width));let c=Te(0,l/2,0);r&&(c=Te(n/2,l/2,0)),this.moveDirectionVertex(a,o,l,"to left",c,{resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n]=this.calculateRealDist(a,0,e);r&&(n=n*2);const o=a.width-n;let l=a.height;i?l=o:t&&(l=a.height*(1-n/a.width));let c=Te(o,l/2,0);r&&(c=Te(o+n/2,l/2,0)),this.moveDirectionVertex(a,o,l,"to right",c,{resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveBottomLeftVertex(e){const{shiftKey:t,altKey:r,metaKey:i}=this.$config.get("bodyEvent"),a=this.cachedCurrentItemMatrix;if(a){let[n,o]=this.calculateRealDist(a,3,e);r&&(n=n*2,o=o*2),t&&(o=-(n*a.height/a.width));const l=a.width-n,c=i?l:a.height+o;let h=Te(l,0,0);r&&(h=Te(l+n/2,o/2,0)),this.moveDirectionVertex(a,l,c,"to top right",h,{resizingVertical:Ce.FIXED,resizingHorizontal:Ce.FIXED}),this.updateGridArea(a)}}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Fr([],$e([],e,this.initMousePoint));this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"?this.moveBottomVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to bottom left"&&this.moveBottomLeftVertex(t),this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.state.dragging=!0,this.makeSelectionTool()}updateGridArea(){return dp.updateGridArea(this.$context.selection.current,this.$context.selection.gridInformation,this.$context.viewport.scale)}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$context.selection.reselect(),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.$el.hide(),this.state.show=!1}initSelectionTool(){this.$el.isShow()&&this.$context.selection.isOne===!1?this.hide():this.$el.isHide()&&this.$context.selection.isOne&&this.show(),this.makeSelectionTool()}makeSelectionTool(){this.renderPointers()}getRateDistance(e,t,r=0){return te([],e,t,(se(e,t)+r)/se(e,t))}renderPointers(){if(this.$context.selection.isEmpty||this.$config.true("set.move.control.point")){this.refs.$pointerRect.empty();return}const e=this.$context.selection.verties;if(se(e[0],e[1])===0)return;const t=this.$viewport.applyVerties(e).map(i=>Zi([],i));this.state.renderPointerList=[t,[this.getRateDistance(t[4],t[0],20),this.getRateDistance(t[4],t[1],20),this.getRateDistance(t[4],t[2],20),this.getRateDistance(t[4],t[3],20)]];const r=this.createRenderPointers(...this.state.renderPointerList);if(r){const{line:i,parentRect:a,point:n,size:o,visiblePath:l}=r;this.refs.$pointerRect.updateDiff(i+a+n+o+l)}}createPointer(e,t,r){return`
        `}createPointerSide(e,t,r,i,a){return`
        `}createRotatePointer(e,t){return e.length===0?"":t<4?`
        `:`
        `}createPointerRect(e,t=void 0){if(e.length===0)return"";const r=this.$context.selection.current,i=r&&r.is("artboard");let a="";if(!i&&t){const n=te([],e[0],e[1],.5);a+=` + M ${n[0]},${n[1]} + L ${t[0]},${t[1]} + `}return` + `}createParentRect(e=[]){return e.length===0?"":` + + + `}createSize(e){const t=te([],e[0],e[1],.5),r=te([],e[1],e[2],.5),i=te([],e[2],e[3],.5),a=te([],e[3],e[0],.5),n=[{start:t,end:i},{start:r,end:a},{start:i,end:t},{start:a,end:r}].map((S,_)=>({index:_,data:S}));n.sort((S,_)=>S.data.start[1]>_.data.start[1]?-1:1);const o=n[0],l=te([],o.data.end,o.data.start,1+16/se(o.data.start,o.data.end)),c=this.$context.selection.current.width,h=this.$context.selection.current.height,u=$e([],o.data.start,o.data.end),d=rt(u[0],u[1])+90,v=Ye(c,100),g=Ye(h,100);let y=v===g?`WH: ${v}`:`${Ye(c,100)} x ${Ye(h,100)}`;return this.state.isRotate&&(y=`${Ye(this.$context.selection.current.angle,100)}\xB0`),`
        ${y}
        `}createVisiblePath(){const e=this.$context.selection.current;if(!e||!e.isBooleanItem)return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` + + + + `}removeNaN(e){return e.replace(/NaN/g,"0")}createRenderPointers(e,t){const r=this.$context.selection.current;if(r&&r.is("text")&&r.width===0&&r.height===0)return;const i=p.deg(r.nestedAngle).round(1e3),a=se(e[0],e[2]),n=se(e[0],e[1]),o=se(e[0],e[3]);return{line:this.createPointerRect(e),size:this.createSize(e),parentRect:"",visiblePath:this.createVisiblePath(),point:[this.createRotatePointer(t[0],0),this.createRotatePointer(t[1],1),this.createRotatePointer(t[2],2),this.createRotatePointer(t[3],3),a<20?void 0:this.createPointerSide(te([],e[0],e[1],.5),11,i,n,5),a<20?void 0:this.createPointerSide(te([],e[1],e[2],.5),12,i,5,o),a<20?void 0:this.createPointerSide(te([],e[2],e[3],.5),13,i,n,5),a<20?void 0:this.createPointerSide(te([],e[3],e[0],.5),14,i,5,o),this.createPointer(e[0],1,i),this.createPointer(e[1],2,i),this.createPointer(e[2],3,i),this.createPointer(e[3],4,i),this.createPointer(e[4],5,i)].join("")}}checkShow(){return this.$modeView.isCurrentMode(js.CanvasView)===!1?!1:!!(this.state.show&&this.$context.selection.isOne)}[M("hideSelectionToolView")](){this.hide()}}async function yj(s){s.registerUI("canvas.view",{GhostToolView:dj,SelectionToolView:vj,GroupSelectionToolView:gj},su.SELECTION_TOOL)}class bj extends Lr{getTitle(){return this.$i18n("selector.popup.title")}initState(){return{selector:"",properties:[]}}updateData(e){this.setState(e,!1),this.emit("changeSelectorPopup",this.state)}getBody(){return` +
        +
        + ${this.templateForSelector()} + ${this.templateForProperty()} +
        +
        `}templateForProperty(){return O("CSSPropertyEditor",{ref:"$propertyEditor",onchange:"changePropertyEditor"})}templateForSelector(){return` +
        + +
        + +
        +
        + `}[ot("$selector")](e){if(this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/))this.updateData({selector:this.refs.$selector.value});else return e.preventDefault(),e.stopPropagation(),!1}refresh(){super.refresh(),this.refs.$selector.val(this.state.selector),this.children.$propertyEditor.trigger("showCSSPropertyEditor",this.state.properties)}[M("changePropertyEditor")](e){this.updateData({properties:e})}[M("showSelectorPopup")](e){this.setState(e),this.refresh(),this.show(250)}}const xj=["",":hover",":active",":before",":after",":first-child",":last-child",":link",":active",":focus"].map(s=>({value:s}));class $j extends Ne{getTitle(){return this.$i18n("selector.property.title")}getBody(){return"
        "}getTools(){return` +
        + ${O("SelectEditor",{ref:"$select",key:"selector","none-value":"selector",options:xj})} +
        + + `}makeSelectorTemplate(e,t){return t=t.toString(),` +
        +
        +
        + ${e.selector||`<${this.$i18n("selector.property.none")}>`} +
        +
        + +
        +
        +
        + `}[z("$selectorList .selector-item .name")](e){var t=+e.$dt.closest("selector-item").attr("data-index"),r=this.$context.selection.current;!r||this.viewSelectorPicker(t)}[z("$selectorList .selector-item .del")+Le+ri](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.removeSelector(t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[M(Oe)+He(100)](){this.refreshShowIsNot(["project","svg-path","svg-brush","svg-textpath","svg-text"])}[G("$selectorList")](){var e=this.$context.selection.current;if(!e)return"";var t=e.selector?Ao.parseStyle(e):e.selectors;return(t||[]).map((r,i)=>this.makeSelectorTemplate(r,i))}[yr("$selectorList .selector-item .title")](e){this.startIndex=+e.$dt.attr("data-index")}[si("$selectorList .selector-item")+Le](){}[ii("$selectorList .selector-item")+Le](e){var t=+e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.sortSelector(this.startIndex,t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[z("$add")](){var e=this.$context.selection.current;e&&(e.createSelector({selector:this.children.$select.getValue()}),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors"))),this.refresh()}viewSelectorPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.current,this.current&&(this.currentSelector=this.current.selectors[this.selectedIndex],this.viewSelectorPropertyPopup())}selectItem(e,t=!0){t?this.getRef("$selectorIndex",e).addClass("selected"):this.getRef("$selectorIndex",e).removeClass("selected"),this.current&&this.current.selectors.forEach((r,i)=>{r.selected=i===e})}viewSelectorPropertyPopup(e){if(this.current=this.$context.selection.current,!this.current)return;this.currentSelector=this.current.selectors[this.selectedIndex];const t=this.currentSelector,r=t.selector,i=t.properties;this.emit("showSelectorPopup",{position:e,selector:r,properties:i})}[M("changeSelectorPopup")](e){this.current=this.$context.selection.current,this.current&&(this.currentselector=this.current.selectors[this.selectedIndex],this.currentSelector&&this.currentSelector.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")))}}function _j(s){s.registerUI("inspector.tab.transition",{SelectorProperty:$j}),s.registerUI("popup",{SelectorPopup:bj})}class Sj extends Ne{getTitle(){return this.$i18n("svgfilter.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--svgfilter-assets-property"}[M(Oe)+He(100)](){this.show()}getBody(){return` +
        +
        +
        + `}[G("$svgfilterList")](){var e=this.$context.selection.currentProject||{svgfilters:[]},t=e.svgfilters,r=t.map((i,a)=>{var n=i.filters.map(o=>Ua.parse(o));return` +
        +
        + + + ${n.join("")} + + +
        +
        +
        +
        + +
        +
        +
        + + +
        +
        + `});return r.push(`
        `),r}executeSVGFilter(e,t=!0,r=!0){var i=this.$context.selection.currentProject;i?(e&&e(i),t&&this.refresh(),r&&this.emit("refreshSVGFilterAssets")):window.alert("Please select a project.")}[z("$svgfilterList .add-svgfilter-item")](){this.executeSVGFilter(e=>{e.createSVGFilter({id:dr(),filters:[]})})}[z("$svgfilterList .remove")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.executeSVGFilter(i=>{i.removeSVGFilter(r)})}[z("$svgfilterList .copy")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.executeSVGFilter(i=>{i.copySVGFilter(r)})}[ot("$svgfilterList input")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index"),i=e.$dt.attrKeyValue("data-key");this.executeSVGFilter(a=>{a.setSVGFilterValue(r,i),this.emit("refreshSVGArea")},!1)}[z("$svgfilterList .preview")](e){var t=e.$dt.closest("svgfilter-item"),r=+t.attr("data-index");this.state.$item=t,this.state.$el=e.$dt.$(".svgfilter-view");var i=this.$context.selection.currentProject||{svgfilters:[]},a=i.svgfilters[r];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterAssets",id:this.id,index:r,filters:a.filters})}[M("updateSVGFilterAssets")](e){this.executeSVGFilter(t=>{t.setSVGFilterValue(e.index,{filters:e.filters}),this.state.$item.$("filter").html(e.filters.join(` +`)),this.emit("refreshSVGArea")},!1)}[M("changeSVGFilterAssets")](e){e.id===this.id&&this.trigger("updateSVGFilterAssets",e)}[M("refreshSVGFilterAssets")](){this.refresh()}}function Pj(s){s.registerElement({SVGFilterAssetsProperty:Sj})}var wj=` +1 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 0 .5 0 +`,Cj=` +0 0 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`,kj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 .5 0 +0 0 0 1 0 +`,Tj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 1 0 +0 0 0 1 0 +`,Mj=` +0 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`,Ij=` +.5 0 0 0 0 +0 .5 0 0 0 +0 0 .5 0 0 +0 0 0 1 0 +`,Ej=` +1 0 0 0 0 +0 1 0 0 0 +0 0 1 0 0 +0 0 -2 1 0 +`,Lj=` +0 0 1 0 0 +0 0 1 0 0 +0 0 1 0 0 +0 0 0 1 0 +`,Vj=` +1 0 0 0 0 +1 0 0 0 0 +1 0 0 0 0 +0 0 0 1 0 +`,Oj=` +0 1 0 0 0 +0 1 0 0 0 +0 1 0 0 0 +0 0 0 1 0 +`,jj=` +0 0 0 0 0 +0 1 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`,Rj=` +1 0 0 0 0 +0 1 0 1 0 +0 0 1 0 0 +0 0 0 1 0 +`,zj=` +1 0 0 1 0 +0 1 0 1 0 +0 0 1 0 0 +0 0 0 1 0 +`,Aj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`,Dj=` +1.5 0 0 0 0 +0 1.5 0 0 0 +0 0 1.5 0 0 +0 0 0 1 0 +`,Fj=` +1 0 0 0 0 +0 2 0 0 0 +0 0 0 .5 0 +0 0 0 1 0 +`,Bj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`,Nj=` +1 1 0 0 0 +0 0 0 0 0 +0 1 1 0 0 +0 0 0 1 0 +`,Gj=` +1 1 0 0 0 +0 0 0 0 0 +0 0 1 0 0 +0 0 0 1 0 +`,Hj=` +1 0 0 0 0 +0 .5 0 0 0 +0 0 0 .5 0 +0 0 0 1 0 +`,Uj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`,Wj=` +1 0 0 0 0 +0 0 0 0 0 +0 0 1 -1 0 +0 0 0 1 0 +`,Xj=` +1 0 0 0 0 +0 1 0 0 0 +0 0 0 0 0 +0 0 0 1 0 +`,Yj=` +1 1 0 0 0 +0 1 0 0 0 +0 1 1 0 0 +0 0 0 1 0 +`,Ed={red:Uj,green:jj,blue:Cj,yellow:Xj,magenta:Bj,cyan:Mj,alpha:wj,BlueMagenta2:kj,BlueShadowMagentHightlight:Tj,darken:Ij,ElimBlue:Ej,GrayOnDark:Lj,GrayOnLight:Vj,GrayOnMid:Oj,HardGreen:Rj,HardYellow:zj,IdenticalRedOverlay:Aj,lighten:Dj,lime:Fj,NoGreenMagenta:Nj,NoGreenRed:Gj,peachy:Hj,RedOverlay:Wj,YesGreenColorizedMagenta:Yj};const Rl=6,Ld=Object.keys(Ed).map(s=>({title:s,values:Ed[s]}));class Kj extends X{initState(){return{values:Ih(this.props.values)}}template(){return` +
        +
        +
        Mix Color Template
        +
        +
        + `}[ae("$body")](){return{cssText:` + display: grid; + grid-template-columns: repeat(${Rl}, 1fr); + grid-column-gap: 2px; + grid-row-gap: 2px; + text-align: left; + `}}[G("$sample")](){return Ld.map((e,t)=>`
        ${e.title}
        `)}[z("$sample .sample-item")](e){var t=+e.$dt.attr("data-index"),r=Ld[t];this.updateData({values:Ih(r.values)}),this.load("$body")}[G("$body")](){var{values:e}=this.state,t=["R","G","B","A"],r=e.map((a,n)=>{var o="";n%(Rl-1)===0&&(o=`
        ${t[Math.floor(n/(Rl-1))]}
        `);var l=` + ${o} +
        + +
        + `;return l}),i=` +
        +
        R
        +
        G
        +
        B
        +
        A
        +
        M
        + `;return i+r}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[ot("$body input")](e){var t=e.$dt,r=+t.attr("data-index"),i=+t.value;this.state.values[r]=i,this.updateData()}}class Zj extends X{initState(){return b({label:this.props.label||""},this.parse(this.props.value))}parse(e){var[t,...r]=e.split(" ");if(t==="linear")var[i,a]=r;else if(t==="gamma")var[n,o,l]=r;return{type:t,values:r,slop:i,intercept:a,amplitude:n,exponent:o,offset:l}}template(){return"
        "}[G("$body")](){var{type:e,label:t}=this.state,r=t?"has-label":"";return` + ${O("SelectEditor",{label:t,ref:"$type",key:"type",value:this.state.type,options:["identity","table","discrete","linear","gamma"],onchange:"changeType"})} +
        + ${t?"":""} +
        +
        +
        + ${O("TextEditor",{label:"tableValues",ref:"$values",key:"values",value:this.state.values.join(" "),onchange:(i,a)=>{this.updateData({[i]:a.split(" ")})}})} +
        +
        + ${["slop","intercept"].map(i=>` +
        + ${O("NumberRangeEditor",{label:i,ref:`$${i}`,key:i,value:this.state[i],onchange:(a,n)=>{this.updateData({[a]:n})}})} +
        + `).join("")} +
        +
        + ${["amplitude","exponent","offset"].map(i=>` +
        + ${O("NumberRangeEditor",{label:i,ref:`$${i}`,key:i,value:this.state[i],onchange:(a,n)=>{this.updateData({[a]:n})}})} +
        + `).join("")} +
        +
        + `}[M("changeType")](e,t){this.updateData({type:t}),this.refresh()}getValue(){switch(this.state.type){case"table":case"discrete":return[this.state.type,...this.state.values].join(" ");case"linear":return[this.state.type,this.state.slop,this.state.intercept].join(" ");case"gamma":return[this.state.type,this.state.amplitude,this.state.exponent,this.state.offset].join(" ")}return"identity"}setValue(e){this.setState(b({},this.parse(e)))}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var qj=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"strokeSourceAlpha2",bound:{x:400,y:200},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:400,y:150},in:[{id:"composite"},{id:"strokeSourceAlpha2"}],operator:"out",connected:[{id:"displacementMap"}]},{type:"Turbulence",id:"turbulence",filterType:"fractalNoise",baseFrequency:"0.01 0.02",numOctaves:1,seed:0,stitchTiles:"stitch",bound:{x:400,y:200},connected:[{id:"displacementMap"}]},{type:"DisplacementMap",id:"displacementMap",scale:17,xChannelSelector:"A",yChannelSelector:"A",bound:{x:400,y:200},in:[{id:"composite2"},{id:"turbulence"}],connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"strokeSourceGraphic"},{id:"displacementMap"}]}],Qj=[{type:"Saturate",values:"0"}],Jj=[{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:1,connected:[{id:"composite1"}]},{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"composite1"}]},{type:"Composite",id:"composite1",bound:{x:200,y:150},in:[{id:"flood"},{id:"shadowSource"}],operator:"out",connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:300,y:150},dx:4,dy:4,in:[{id:"composite1"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:400,y:150},stdDeviationX:4,stdDeviationY:4,edge:"none",in:[{id:"offset"}],connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:250},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:500,y:150},in:[{id:"blur"},{id:"shadowSource2"}],operator:"out",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"shadowSource3",bound:{x:500,y:250},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:600,y:150},in:[{id:"composite2"},{id:"shadowSource3"}]}],eR=[{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:200,y:100},dx:10,dy:10,in:[{id:"shadowSource"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:300,y:100},stdDeviationX:5,stdDeviationY:5,in:[{id:"offset"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:.7,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"blur"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"shadowSource2"}]}],tR=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"strokeSourceGraphic"}]}],rR={dancingStroke:qj,stroke:tR,grayscale:Qj,shadow:eR,innerShadow:Jj};const iR=[{label:"GRAPHIC REFERENCES",items:[{label:"Source Graphic",value:"SourceGraphic"},{label:"Source Alpha",value:"SourceAlpha"},{label:"Background Image",value:"BackgroundImage"},{label:"Background Alpha",value:"BackgroundAlpha"},{label:"Fill Paint",value:"FillPaint"},{label:"Stroke Paint",value:"StrokePaint"}]},{label:"SOURCES",items:[{label:"Flood",value:"Flood"},{label:"Turbulence",value:"Turbulence"},{label:"Image",value:"Image"}]},{label:"MODIFIER",items:[{label:"Color Matrix",value:"ColorMatrix"},{label:"Saturate",value:"Saturate"},{label:"HueRotate",value:"HueRotate"},{label:"LuminanceToAlpha",value:"LuminanceAlpha"},{label:"Drop Shadow",value:"DropShadow"},{label:"Morphology",value:"Morphology"},{label:"Convolve Matrix",value:"ConvolveMatrix"},{label:"Offset",value:"Offset"},{label:"Gaussian Blur",value:"GaussianBlur"},{label:"Tile",value:"Tile"}]},{label:"LIGHTING",items:[{label:"Specular Lighting",value:"SpecularLighting"},{label:"Diffuse Lighting",value:"DiffuseLighting"},{label:"Point Light",value:"PointLight"},{label:"Spot Light",value:"SpotLight"},{label:"Distant Light",value:"DistantLight"}]},{label:"COMBINERS",items:[{label:"Blend",value:"Blend"},{label:"Composite",value:"Composite"},{label:"Merge",value:"Merge"},{label:"DisplacementMap",value:"DisplacementMap"}]}],sR=[{label:"Template",items:[{label:"Grayscale",value:"grayscale"},{label:"Shadow",value:"shadow"},{label:"Inner Shadow",value:"innerShadow"},{label:"Stroke",value:"stroke"},{label:"Dancing Stroke",value:"dancingStroke"}]}];function Vd(s){switch(s){case"SpecularLighting":return R("specular");case"DiffuseLighting":return R("diffuse");case"SourceGraphic":case"SourceAlpha":return R("image");case"BackgroundImage":case"BackgroundAlpha":return R("outline_image");case"Flood":return R("palette");case"Image":return R("landscape");case"GaussianBlur":return R("blur");case"ColorMatrix":return R("blur_linear");case"Turbulence":return R("waves");case"Saturate":return R("vintage");case"HueRotate":return R("looks");case"LuminanceAlpha":return R("opacity");case"DropShadow":return R("shadow");case"Morphology":return R("broken_image");case"ConvolveMatrix":return R("camera_roll");case"Offset":return R("transform");case"Tile":return R("view_comfy");case"Blend":return R("gradient");case"Composite":return R("merge");case"Merge":return R("settings_input_component");case"DisplacementMap":return R("texture")}return""}function Od(s){switch(s){case"SourceGraphic":case"SourceAlpha":case"BackgroundImage":case"BackgroundAlpha":case"FillPaint":case"StrokePaint":return"graphic";case"Flood":case"Turbulence":case"Image":return"source";case"GaussianBlur":case"ColorMatrix":case"Saturate":case"HueRotate":case"LuminanceAlpha":case"DropShadow":case"Morphology":case"ConvolveMatrix":case"Offset":case"Tile":return"modifier";case"SpecularLighting":case"DiffuseLighting":case"SpotLight":case"PointLight":case"DistantLight":return"lighting";case"Blend":case"Composite":case"Merge":case"DisplacementMap":return"combiner"}return""}const aR=40,Mp=20,nR={1:[aR+5]},oR={1:[Mp]},lR={1:[-7],2:[-7],3:[-7],4:[-7],5:[-7]};let co={1:[0],2:[-7,7],3:[-14,0,14],4:[-21,-7,7,21],5:[-28,-14,0,14,28]};Object.keys(co).forEach(s=>{co[s]=co[s].map(e=>e+Mp)});class cR extends X{makeFilterSelect(){return` + +
        + + ${Yn(iR,e=>` +
        + ${Yn(e.items,t=>` +
        + ${Vd(t.value)} + ${this.$i18n(t.label)} +
        + `)} +
        + `)} +
        + `}makeFilterTemplateSelect(){return` + +
        + + ${Yn(sR,e=>` +
        + ${Yn(e.items,t=>`
        ${this.$i18n(t.label)}
        `)} +
        + `)} +
        + `}initState(){var e=this.parseFilter(this.props.value||[]);return{filters:e,selectedTabIndex:1,selectedIndex:-1,selectedFilter:null}}template(){return` +
        +
        +
        +
        +
        + +
        +
        + +
        +
        + +
        +
        +
        +
        + ${this.makeFilterSelect()} +
        +
        + ${this.makeFilterTemplateSelect()} +
        + +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        +
        `}[z("$header .tab-item:not(.empty-item)")](e){var t=+e.$dt.attr("data-value");this.state.selectedTabIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach(r=>r.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(r=>r.addClass("selected")),this.setState({selectedTabIndex:t},!1))}[yr("$filterSelect .item")](e){var t=e.$dt.attr("value");e.dataTransfer.setData("filter/type",t)}[si("$connectedLinePanel")+Le](){}[ii("$connectedLinePanel")+Le](e){var t={x:e.offsetX,y:e.offsetY},r=e.dataTransfer.getData("filter/type");this.makeFilterNode(r,{bound:t})}makeFilterNode(e,t={}){this.state.filters.push(this.makeFilter(e,t)),this.state.selectedIndex=this.state.filters.length-1,this.state.selectedFilter=this.state.filters[this.state.selectedIndex],this.refresh(),this.modifyFilter()}applyTemplate(e){var t=rR[e];t&&(this.setState({selectedIndex:-1,selectedFilter:null,filters:this.parseFilter(t)},!1),this.refresh(),this.modifyFilter())}getSpec(e){return sj[e]}makeFilterEditorTemplate(e,t,r){var i=`${t.type}${r}${this.state.selectedIndex}${Date.now()}`;if(e.inputType==="color-matrix")return O("ColorMatrixEditor",{ref:`$colorMatrix${i}`,label:e.title,key:r,column:e.column,values:t[r].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="input-array")return O("InputArrayEditor",{ref:`$inputArray${i}`,label:e.title,key:r,"column-label":"R,G,B,A,M","row-label":"R,G,B,A",column:e.column,values:t[r].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="blend")return O("BlendSelectEditor",{ref:`$blend${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="select"){var a=e.options;return de(e.options)&&(a=e.options(this.state.filters)),O("SelectEditor",{ref:`$select${i}`,label:e.title,options:a,key:r,value:t[r].toString(),onchange:"changeRangeEditor"})}else{if(e.inputType==="text")return O("TextEditor",{ref:`$text${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeTextEditor"});if(e.inputType==="number-range")return O("NumberRangeEditor",{ref:`$numberrange${i}`,label:e.title,layout:"block",min:e.min,max:e.max,step:e.step,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="color")return O("ColorViewEditor",{ref:`$colorview${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"});if(e.inputType==="FuncFilter")return O("FuncFilterEditor",{ref:`$funcFilter${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeFuncFilterEditor"});if(e.inputType==="ImageSelectEditor")return O("ImageSelectEditor",{ref:`$imageSelect${i}`,label:e.title,key:r,value:t[r].toString(),onchange:"changeRangeEditor"})}return O("RangeEditor",{ref:`$range${i}`,layout:"block",label:e.title,min:e.min,max:e.max,step:e.step,key:r,value:t[r].toString(),units:e.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t){return` +
        +
        + +
        + +
        +
        +
        + ${ig(e,(r,i)=>this.makeFilterEditorTemplate(i,t,r))} + +
        +
        + `}makeFilterTemplate(e){return this.makeOneFilterTemplate(this.getSpec(e.type),e)}[G("$filterList")](){return this.state.selectedFilter&&this.state.selectedFilter.isSource()===!1?this.makeFilterTemplate(this.state.selectedFilter):""}modifyFilter(){this.state.filters.forEach(e=>{e.isLight()&&e.connected.length&&e.connected.forEach(t=>{this.state.filters.filter(r=>r.id===t.id).forEach(r=>{r.reset({lightInfo:e.toLightString()})})})}),this.parent.trigger(this.props.onchange,this.props.key,this.state.filters)}parseFilter(e=[]){return e.map(t=>Ua.parse(t))}makeFilter(e,t={}){return Ua.parse(ie(b({},t),{type:e}))}[z("$filterSelect .item[value]")](e){var t=e.$dt.attr("value");this.makeFilterNode(t)}[z("$filterTemplateSelect .item[value]")](e){var t=e.$dt.attr("value");this.applyTemplate(t)}[z("$filterList .filter-menu .del")](){this.removeFilter(this.state.selectedFilter.id)}[G("$graphPanel")](){return this.makeGraphPanel()}selectFilter(e){this.setState({selectedIndex:e,selectedFilter:this.state.filters[e]},!1),this.load("$filterList")}[ve("$graphPanel .filter-node")+_e()+Se()](e){this.$target=e.$dt,this.$point=null,this.pointType="object",this.pointIndex=0;var t=this.refs.$graphPanel.rect();this.rect=t;var r=+this.$target.attr("data-index");this.selectFilter(r),this.$target.onlyOneClass("selected");var i=ge.create(e.target);if(i.hasClass("out"))this.$point=i,this.pointType="out",this.pointIndex=0;else if(i.hasClass("in"))this.$point=i,this.pointType="in",this.pointIndex=+i.attr("data-index");else{var a=this.state.selectedFilter;this.startXY=ye(a.bound)}if(this.pointType==="in"||this.pointType==="out"){var n=i.rect(),o=n.x-t.x,l=n.y-t.y,c=o+n.width/2,h=l+n.height/2;this.startXY={x:c,y:h}}this.startXY.dx=0,this.startXY.dy=0,this.load("$dragLinePanel")}[G("$dragLinePanel")](){if(this.pointType==="in"||this.pointType==="out"){var{x:e,y:t,dx:r,dy:i}=this.startXY;return` + + + + `}else return""}makeConnectedPath(e){var t=new Rt,r=e[0],i=e[e.length-1];if(!r||!i)return"";var a=Math.abs(r.x-i.x)/2;return t.M(r).C({x:r.x+a,y:r.y},{x:i.x-a,y:i.y},i),t.d}createPath(e,t){if(t.path)return t.path;var r=e.bound.x+nR["1"][0],i=e.bound.y+oR["1"][0],a=this.state.filters.map((u,d)=>({it:u,index:d})).find(u=>!u||!u.it?!1:u&&u.it.id===t.id),n=`${a.it.getInCount()}`,o=a.it.in.map((u,d)=>({it:u,index:d})).find(u=>!u||!u.it?!1:u.it.id===e.id);if(!o)return[];var l=o.index,c=a.it.bound.x+lR[n][0],h=a.it.bound.y+co[n][l];return[{x:r,y:i},{x:c,y:h}]}[G("$connectedLinePanel")](){return` + + ${this.state.filters.map(e=>e.connected.map(t=>{var r=this.createPath(e,t),i=Od(e.type);return` + + + ${r.length&&` + + `} + + `}).join("")).join("")} + + `}[z("$connectedLinePanel .connected-remove-circle")](e){var[t,r]=e.$dt.attrs("data-target-id","data-source-id"),i=this.state.filters;i.filter(a=>a.id===r).forEach(a=>{a.connected=a.connected.filter(n=>n.id!=t)}),i.filter(a=>a.id===t).forEach(a=>{a.in=a.in.map(n=>n&&n.id==r?null:n)}),this.refresh(),this.modifyFilter()}getCenterXY(e){var t=e.rect(),r=t.x-this.rect.x,i=t.y-this.rect.y,a=r+t.width/2,n=i+t.height/2;return{x:a,y:n}}end(e,t){if(this.pointType==="in"||this.pointType==="out"){this.startXY.dx=e,this.startXY.dy=t;var r=this.state.selectedFilter,i=this.$config.get("bodyEvent"),a=ge.create(i.target),n=a.closest("filter-node");if(this.pointType==="out"){if(a.hasClass("in")){var o=this.state.filters[+n.attr("data-index")];if(o&&!(!o.hasLight()&&r.isLight())){var l=+a.attr("data-index");o.in[l]||(o.setIn(l,r),r.setConnected(o))}}}else if(this.pointType==="in"&&a.hasClass("out")){var o=this.state.filters[+n.attr("data-index")];o&&(r.hasLight()&&!o.isLight()||r.in[this.pointIndex]||(r.setIn(this.pointIndex,o),o.setConnected(r)))}this.pointType=""}this.load("$dragLinePanel"),this.load("$connectedLinePanel"),this.modifyFilter()}move(e,t){var r=this.state.selectedFilter;r&&(this.startXY.dx=e,this.startXY.dy=t,this.pointType==="in"?this.load("$dragLinePanel"):this.pointType==="out"?this.load("$dragLinePanel"):(r.reset({bound:{x:this.startXY.x+e,y:this.startXY.y+t}}),this.$target.css({left:r.bound.x,top:r.bound.y}),this.load("$connectedLinePanel")))}makeGraphPanel(){return this.state.filters.map((e,t)=>` +
        +
        ${this.$i18n(e.type)}
        +
        ${R("close")}
        +
        ${Vd(e.type)}
        +
        + ${Mr(e.getInCount()).map((i,a)=>`
        `).join("")} +
        + +
        ${R("chevron_right")}
        + ${e.hasLight()?`
        `:""} +
        + `)}[K("changeFuncFilterEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}[K("changeRangeEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}[K("changeTextEditor")](e,t){var r=this.state.selectedFilter;r&&r.reset({[e]:t}),this.modifyFilter()}removeFilter(e){var t=this.state.filters.filter(r=>r.id!=e);t.forEach(r=>{r.connected=r.connected.filter(i=>i.id!=e),r.in=r.in.filter(i=>i.id!=e)}),this.state.selectedFilter.id===e&&(this.state.selectedFilter=null,this.state.selectedIndex=-1),this.setState({filters:t}),this.modifyFilter()}[z("$graphPanel .filter-node .remove")](e){var t=e.$dt.closest("filter-node"),r=+t.attr("data-index"),i=this.state.filters[r];this.removeFilter(i.id)}}class hR extends Lr{getTitle(){return this.$i18n("svgfilter.popup.title")}getClassName(){return"transparent"}initState(){return{changeEvent:"changeSVGFilterPopup",id:"",preview:!0,filters:[]}}updateData(e){this.setState(e,!1),this.emit(this.state.changeEvent,this.state)}getBody(){return` +
        +
        +
        +
        +
        `}[G("$editor")](){return O("SVGFilterEditor",{ref:"$filter",title:"Filter Type",key:"filter",value:this.state.filters,onchange:(e,t)=>{this.updateData({filters:t})}})}[M("showSVGFilterPopup")](e){e.filters=e.filters.map(t=>Ua.parse(t)),e.preview=ke(e.preview)?e.preview:!0,this.setState(e),this.show(1e3)}[M("hideSVGFilterPopup")](){this.$el.hide()}}class dR extends X{initState(){var e=this.props.value;return{options:[],label:this.props.label||"",value:e}}template(){var{label:e}=this.state,t=e?"has-label":"";return` +
        + ${e?``:""} + + + +
        + `}[z("$remove")](){this.updateData({value:""})}[z("$open")](){var e=this.state.value;if(e.includes("id")){var t=this.$context.selection.currentProject,r=t.getSVGFilterIndex(e);r>-1&&this.trigger("openSVGFilterPopup",r)}}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[ae("$options")](){return{"data-count":this.state.options.length.toString()}}[G("$options")](){var e=this.$context.selection.currentProject,t="";e&&(t=e.svgfilters.map(i=>i.id),t=t.length?","+t.join(","):""),t+=",-,new",t=t.split(",");var r=t.map(i=>{var a=i,n=i;if(a.includes(":"))var[a,n]=a.split(":");n===""?n=this.props["none-value"]?this.props["none-value"]:"":n==="-"&&(n="----------",a="");var o=a===this.state.value?"selected":"";return``});return r}setOptions(e=""){this.setState({options:e.split(this.state.splitChar).map(t=>t.trim())})}[Tr("$options")](){var e=this.refs.$options.value;e=="new"?this.$commands.emit("addSVGFilterAssetItem",(t,r)=>{this.updateData({value:r}),this.refresh(),this.trigger("openSVGFilterPopup",t)}):e==="-"||this.updateData({value:e})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[M("refreshSVGArea")+He(1e3)](){this.load("$options")}[M("openSVGFilterPopup")](e){this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea");var t=this.$context.selection.currentProject||{svgfilters:[]},r=t.svgfilters[e];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterEditorRealUpdate",preview:!1,index:e,filters:r.filters})}[M("changeSVGFilterEditorRealUpdate")](e){var t=this.$context.selection.currentProject;t&&(t.setSVGFilterValue(e.index,{filters:e.filters}),this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea"))}}function uR(s){s.registerElement({ColorMatrixEditor:Kj,FuncFilterEditor:Zj,SVGFilterSelectEditor:dR,SVGFilterEditor:cR}),s.registerUI("inspector.tab.style",{SVGItemProperty:Ro.create({title:s.$i18n("svg.item.property.title"),editableProperty:"svg-item",preventUpdate:!0})}),s.registerUI("popup",{SVGFilterPopup:hR}),s.registerInspector("svg-item",e=>[{key:"edit",editor:"Button",editorOptions:{text:"Edit",action:["open.editor",e]}},{type:"column",size:[2,1],columns:[{type:"label",label:s.$i18n("svg.item.property.fill")},{key:"fillRule",editor:"ToggleCheckBox",editorOptions:{toggleLabels:[R("join_full"),R("join_right")],toggleValues:["nonzero","evenodd"]},defaultValue:e.fillRule||"nonzero"}]},{type:"column",size:[2,1],columns:[{key:"fill",editor:"FillSingleEditor",editorOptions:{wide:!0},defaultValue:e.fill},{key:"fillOpacity",editor:"number-input",editorOptions:{compact:!0,label:"opacity",min:0,max:1,step:.01},defaultValue:e.fillOpacity}]},{type:"column",size:[2,1],columns:[{type:"label",label:s.$i18n("svg.item.property.stroke")}]},{type:"column",size:[2,1],columns:[{key:"stroke",editor:"fill-single",editorOptions:{wide:!0},defaultValue:e.stroke},{key:"strokeWidth",editor:"number-input",editorOptions:{compact:!0,label:"line_weight"},defaultValue:e.strokeWidth}]},{type:"column",size:[2,1],columns:[{key:"strokeDasharray",editor:"StrokeDashArrayEditor",editorOptions:{label:s.$i18n("svg.item.property.dashArray")},defaultValue:e.strokeDasharray||""},{key:"strokeDashoffset",editor:"number-input",editorOptions:{compact:!0,label:"power_input",min:-1e3,max:1e3,step:1},defaultValue:e.strokeDashoffset}]},{key:"strokeLinecap",editor:"ToggleCheckBox",editorOptions:{label:s.$i18n("svg.item.property.lineCap"),toggleLabels:[R("line_cap_butt"),R("line_cap_round"),R("line_cap_square")],toggleValues:[cl.BUTT,xa.ROUND,cl.SQUARE]},defaultValue:e.strokeLinecap||cl.BUTT},{key:"strokeLinejoin",editor:"ToggleCheckBox",editorOptions:{label:s.$i18n("svg.item.property.lineJoin"),toggleLabels:[R("line_join_miter"),R("line_join_round"),R("line_join_bevel")],toggleValues:[xa.MITER,xa.ROUND,xa.BEVEL]},defaultValue:e.strokeLinejoin||xa.MITER},{key:"mixBlendMode",editor:"BlendSelectEditor",editorOptions:{label:s.$i18n("svg.item.property.blend")},defaultValue:e.mixBlendMode}]),s.registerInspector("polygon",e=>[{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1},defaultValue:e.count},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",command:"copy.path"}},{key:"button2",editor:"Button",editorOptions:{label:"Test Popup",action:["showComponentPopup",{title:"Sample Test Popup",width:400,inspector:[{key:"test",editor:"Button",editorOptions:{label:"Test",text:"text",onClick:()=>{window.alert("yellow")}}}]}]}}]),s.registerInspector("spline",()=>[{key:"boundary",editor:"SelectIconEditor",editorOptions:{label:"Boundary",options:["clamped","open","closed"]}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}]),s.registerInspector("star",e=>[{key:"isCurve",editor:"ToggleCheckBox",editorOptions:{label:"Curve",defaultValue:e.isCurve}},{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1,wide:"true"}},{key:"radius",editor:"NumberInputEditor",editorOptions:{label:"Inner Radius",min:-1,max:1,step:.01,wide:"true"}},{key:"tension",editor:"NumberInputEditor",editorOptions:{label:"Tension",min:0,max:1,step:.01,wide:"true"}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}])}class pR extends Ne{getTitle(){return this.$i18n("svg.text.property.title")}[M(Oe)](){this.refreshShow(["svg-textpath","svg-text","svg-tspan"])}refresh(){var e=this.$context.selection.current;e&&this.setAllValue(["lengthAdjust","textLength","startOffset","text-anchor","text"])}setAllValue(e=[]){var t=this.$context.selection.current;!t||e.forEach(r=>{this.children[`$${r}`].setValue(t[r])})}getBody(){return` +
        + ${O("TextAreaEditor",{ref:"$text",label:this.$i18n("svg.text.property.textarea"),key:"text",onchange:"changeTextValue"})} +
        +
        + ${O("SelectIconEditor",{ref:"$text-anchor",label:this.$i18n("svg.text.property.anchor"),key:"textAnchor",options:["start","middle","end"],onchange:"changeTextValue"})} + +
        +
        + ${O("SelectEditor",{ref:"$lengthAdjust",label:this.$i18n("svg.text.property.length.adjust"),key:"lengthAdjust",value:"spacing",options:["spacing","spacingAndGlyphs"],onchange:"changeTextValue"})} + +
        +
        + ${O("RangeEditor",{ref:"$textLength",label:this.$i18n("svg.text.property.text.length"),key:"textLength",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} + +
        +
        + ${O("RangeEditor",{ref:"$startOffset",label:this.$i18n("svg.text.property.start.offset"),key:"startOffset",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} + +
        + `}[K("changeTextValue")](e,t){this.$commands.executeCommand("setAttribute",`change svg text property: ${e}`,this.$context.selection.packByValue({[e]:t}))}}function gR(s){s.registerUI("inspector.tab.style",{SVGTextProperty:pR})}function fR(s){s.registerUI("inspector.tab.style",{TextProperty:Ro.create({title:s.$i18n("text.property.title"),editableProperty:"text-style",preventUpdate:!0})}),s.registerInspector("text-style",e=>[{type:"column",size:[2,1,1],columns:[{key:"textAlign",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["left","center","right","justify"],icons:["align_left","align_center","align_right","align_justify"]},defaultValue:e.textAlign||Q_.LEFT},"-",{key:"textTransform",editor:"SelectIconEditor",editorOptions:{options:[{value:dl.CAPITALIZE,text:"Ag"},{value:dl.UPPERCASE,text:"AG"},{value:dl.LOWERCASE,text:"ag"}],compact:!0,icons:["horizontal_rule"]},defaultValue:e.textTransform}]},{type:"column",size:[3,2,1],gap:20,columns:[{key:"textDecoration",editor:"SelectIconEditor",editorOptions:{options:[{value:hl.NONE,text:"None"},{value:hl.UNDERLINE,text:"Underline"},{value:hl.LINE_THROUGH,text:"LineThrough"}],icons:["horizontal_rule","underline","strikethrough"],onchange:"changeTextValue"},defaultValue:e.textDecoration},{key:"fontStyle",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["normal","italic"],icons:["title","italic"]},defaultValue:e.fontStyle},{key:"textClip",editor:"ToggleButton",editorOptions:{checkedValue:Xn.TEXT,toggleLabels:[R("vignette"),R("vignette")],toggleTitles:["","Text Clip"],toggleValues:[Xn.NONE,Xn.TEXT]},defaultValue:e.textClip||Xn.NONE}]}])}var jd=[{name:"Mystic",shadow:"20px 0px 10px rgb(0, 0, 0)"},{name:"Monoton",shadow:"0px -78px rgb(255, 196, 0)"},{name:"Radioactive",shadow:"-18px -18px 20px rgb(87, 255, 9);"},{name:"Bungee",shadow:"-18px 18px 0 rgb(66, 45, 45)"},{name:"Sprint",shadow:"-20px -108px 0px rgba(255, 255, 255, 0.445)"},{name:"Prickly",shadow:"-18px -18px 2px #777"},{name:"Codystar",shadow:"1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)"},{name:"Elegant",shadow:"-18px 8px 18px #b4bbbb"},{name:"Playful",shadow:` + -2px -2px 0px #888, + 4px 4px 0px #888, + 7px 7px 0px #888 + `}];class mR extends Ne{getTitle(){return this.$i18n("text.shadow.property.title")}getBody(){return` +
        + `}getTools(){return` + + + `}[z("$add")](){const e=+this.refs.$select.value;this.children.$textshadow.trigger("add",jd[e].shadow)}[G("$shadowList")](){var e=this.$context.selection.current||{};return O("TextShadowEditor",{ref:"$textshadow",key:"textShadow",value:e.textShadow,onchange:(t,r)=>{this.$commands.executeCommand("setAttribute","change text shadow",this.$context.selection.packByValue({[t]:r}))}})}get editableProperty(){return"textShadow"}[M(Oe)+fe("checkShow")+He(100)](){this.refresh()}}function vR(s){s.registerUI("inspector.tab.style",{TextShadowProperty:mR})}const yR=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Gt extends sr{static parse(e){return new Gt(e)}getDefaultObject(){return{name:"all",duration:p.second(0),timingFunction:"linear",delay:p.second(0)}}toCloneObject(){return{name:this.json.name,duration:this.json.duration+"",timingFunction:this.json.timingFunction,delay:this.json.delay+""}}toCSS(){return{transition:this.toString()}}toString(){var e=this.json;return[e.name,e.duration,e.timingFunction,e.delay].join(" ")}static join(e){return e.map(t=>new Gt(t).toString()).join(",")}static add(e,t={}){const r=Gt.parseStyle(e);return r.push(Gt.parse(t)),Gt.join(r)}static remove(e,t){return Gt.filter(e,(r,i)=>t!=i)}static filter(e,t){return Gt.join(Gt.parseStyle(e).filter(r=>t(r)))}static replace(e,t,r){var i=Gt.parseStyle(e);return i[t]?i[t]=r:i.push(r),Gt.join(i)}static get(e,t){var r=Gt.parseStyle(e);return r[t]}static parseStyle(e){var t=[];if(!e)return t;const r=ap(e,yR);return t=r.str.split(",").map(i=>{const a=i.split(" ").filter(Boolean);return a.length>=4?{name:a[0],duration:p.parse(a[1]),timingFunction:Ql(a[2],r.matches),delay:p.parse(a[3])}:a.length>=3?{name:a[0],duration:p.parse(a[1]),delay:p.parse(a[2])}:a.length>=1?{name:a[0],duration:p.parse(a[1])}:{}}),t.map(i=>Gt.parse(i))}}class bR extends Ne{getTitle(){return this.$i18n("transition.property.title")}getBody(){return"
        "}getTools(){return` + + `}isFirstShow(){return!0}[G("$transitionList")+Ee](){var e=this.$context.selection.current;return e?Gt.parseStyle(e.transition).map((t,r)=>{const i=this.state.selectedIndex===r?"selected":"",a=hs(t.timingFunction,30,30);return` +
        +
        +
        + + + +
        +
        +
        + ${t.name} + Duration: ${t.duration} + Delay: ${t.delay} +
        +
        +
        + +
        +
        +
        + `}):""}[M(Oe)](){this.refreshShowIsNot([])}[z("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add transition",this.$context.selection.packByValue({transition:t=>Gt.add(t.transition)})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}getCurrentTransition(){return this.current.transitions[this.selectedIndex]}[z("$transitionList .tools .del")](e){var t=e.$dt.attr("data-index"),r=this.$context.selection.current;!r||(r.reset({transition:Gt.remove(r.transition,t)}),this.emit("refreshElement",r),this.refresh())}selectItem(e,t=!0){t?this.refs[`transitionIndex${e}`].addClass("selected"):this.refs[`transitionIndex${e}`].removeClass("selected")}viewTransitionPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentTransition=Gt.get(this.current.transition,this.selectedIndex),this.viewTransitionPropertyPopup())}viewTransitionPropertyPopup(){if(!this.currentTransition)return;const e=this.currentTransition;this.emit("showTransitionPropertyPopup",{changeEvent:"changeTransitionPropertyPopup",data:e.toCloneObject(),instance:this})}[z("$transitionList .preview")](e){this.viewTransitionPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[M("changeTransitionPropertyPopup")](e){this.currentTransition&&(this.currentTransition.reset(b({},e)),this.current&&(this.current.reset({transition:Gt.replace(this.current.transition,this.selectedIndex,this.currentTransition)}),this.emit("refreshElement",this.current),this.refresh()))}}const xR=["none","all","background-color","background-position","background-size","border","border-color","border-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-spacing","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","bottom","box-shadow","color","filter","font-size","font-size-adjust","font-weight","height","left","letter-spacing","line-height","margin","margin-bottom","margin-left","margin-right","margin-top","max-height","max-width","min-height","min-width","opacity","padding","padding-bottom","padding-left","padding-right","padding-top","perspective","perspective-origin","right","text-decoration","text-decoration-color","text-indent","text-shadow","top","transform","vertical-align","visibility","width","word-spacing","z-index"].map(s=>({value:s,text:s}));class $R extends Lr{getTitle(){return"Transition"}initState(){return{changeEvent:"",instance:{},data:{timingFunction:"linear",duration:"0s",delay:"0s",name:"all"}}}updateData(e){this.state.data=b(b({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
        "}[G("$popup")](){return` +
        + ${this.templateForProperty()} + ${this.templateForTimingFunction()} + ${this.templateForDelay()} + ${this.templateForDuration()} +
        + `}templateForTimingFunction(){return` +
        + + ${O("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} +
        + `}[K("changeTransition")](e,t){this.updateData({[e]:t})}templateForProperty(){return` +
        + ${O("SelectEditor",{ref:"$property",icon:!0,label:"Property",key:"name",value:this.state.data.name,options:xR,onChange:"changeTransition"})} +
        + `}templateForDelay(){return` +
        + ${O("RangeEditor",{ref:"$delay",label:"Delay",key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} +
        + `}templateForDuration(){return` +
        + ${O("RangeEditor",{ref:"$duration",label:"Duration",key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} +
        + `}[K("changeRangeEditor")](e,t){this.updateData({[e]:t})}[K("changeCubicBezier")](e,t){this.updateData({[e]:t})}[M("showTransitionPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[M("hideTransitionPropertyPopup")](){this.$el.hide()}}function _R(s){s.registerUI("inspector.tab.transition",{TransitionProperty:bR}),s.registerUI("popup",{TransitionPropertyPopup:$R})}class SR extends Ne{getClassName(){return"item elf--video-property"}getTitle(){return this.$i18n("video.property.title")}initState(){return{$video:{el:{}},status:"play",volume:1}}getBody(){return"
        "}get video(){return this.state.$video.el}get volumeStatus(){return this.state.volume===0?"muted":this.state.volume>.5?"up":"down"}play(){this.video&&this.video.play()}pause(){this.video&&this.video.pause()}[G("$body")](){var e=this.$context.selection.current||{playTime:"0:1:1"},t=e.currentTime||0,r=(e.playTime||"0:1:1").split(":").pop();return` +
        + + +
        + ${O("NumberRangeEditor",{ref:"$currentTime",min:0,max:r,value:t,step:.001,onchange:"changeCurrentTime"})} +
        +
        +
        +
        + + ${this.$i18n("video.property.volume")} +
        +
        + ${ne.volume_off} + ${ne.volume_down} + ${ne.volume_up} + +
        +
        +
        +
        + + ${this.$i18n("video.property.playbackRate")} +
        +
        + ${O("NumberRangeEditor",{ref:"$playbackRate",min:.1,max:10,clamp:!0,value:this.state.playbackRate,step:.001,onchange:"changePlaybackRate"})} +
        +
        +
        +
        + + ${this.$i18n("video.property.playTime")} +
        + ${O("MediaProgressEditor",{ref:"$progress",key:"playTime",value:e.playTime,onchange:"changeSelect"})} +
        + `}[M("changeCurrentTime")](e,t){this.setState({currentTime:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({currentTime:t}))}[M("changePlaybackRate")](e,t){this.setState({playbackRate:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({playbackRate:t}))}[Ng("$volume")](){const e=Number(this.refs.$volume.value);this.setState({volume:e},!1),this.bindData("$volume_control"),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({volume:e}))}[ae("$volume_control")](){return{"data-selected-value":this.volumeStatus}}[ae("$tools")](){return{"data-selected-value":this.state.status}}[z("$tools button")](e){var t=e.$dt.attr("data-value");switch(t){case"play":this.setState({status:"pause"},!1),this.play();break;case"pause":this.setState({status:"play"},!1),this.pause();break}this.bindData("$tools")}[K("changeValue")+He(100)](e,t){!this.state.$video||this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[K("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[K("updateVideoEvent")](){this.video.paused&&(this.setState({status:"play",currentTime:this.video.currentTime},!1),this.bindData("$tools")),this.children.$currentTime.setValue(this.video.currentTime)}[M(Oe)+He(100)](){const e=this.$context.selection.current;this.refreshShow(["video"]),e&&e.is("video")&&this.emit("refElement",e.id,t=>{const r=t.$("video");this.state.$video=r,this.setState({volume:e.volume,currentTime:e.currentTime,playbackRate:e.playbackRate},!1),this.video.ontimeupdate=i=>{this.trigger("updateVideoEvent",i)},this.video.onprogress=i=>{this.trigger("updateVideoEvent",i)},this.load("$body")})}}function PR(s){s.registerUI("inspector.tab.style",{VideoProperty:SR})}class wR extends X{template(){return` +
        +
        + +
        +
        +
        + +
        HEX
        +
        +
        +
        +
        + +
        R
        +
        +
        + +
        G
        +
        +
        + +
        B
        +
        +
        + +
        A
        +
        +
        +
        +
        + +
        H
        +
        +
        + +
        %
        +
        S
        +
        +
        + +
        %
        +
        L
        +
        +
        + +
        A
        +
        +
        +
        + `}get manager(){return this.parent.manager}setCurrentFormat(e){this.format=e,this.initFormat()}initFormat(){var e=this.format||"hex";["hex","rgb","hsl"].filter(t=>t!==e).forEach(t=>{this.$el.removeClass(t)}),this.$el.addClass(e)}nextFormat(){var e=this.format||"hex",t="hex";e=="hex"?t="rgb":e=="rgb"?t="hsl":e=="hsl"&&(this.parent.alpha==1?t="hex":t="rgb"),this.format=t,this.initFormat(),this.parent.changeFormat(this.format)}goToFormat(e){this.format=e,(e==="rgb"||e==="hsl")&&this.initFormat(),this.parent.changeFormat(this.format)}getFormat(){return this.format||"hex"}changeRgbColor(){this.parent.lastUpdateColor({type:"rgb",r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()})}changeHslColor(){this.parent.lastUpdateColor({type:"hsl",h:this.refs.$hsl_h.int(),s:this.refs.$hsl_s.int(),l:this.refs.$hsl_l.int(),a:this.refs.$hsl_a.float()})}hasValue(e){return e.target.value!==""}[ot("$rgb_r")+fe("hasValue")](){this.changeRgbColor()}[ot("$rgb_g")+fe("hasValue")](){this.changeRgbColor()}[ot("$rgb_b")+fe("hasValue")](){this.changeRgbColor()}[ot("$rgb_a")+fe("hasValue")](){this.changeRgbColor()}[ot("$hsl_h")+fe("hasValue")](){this.changeHslColor()}[ot("$hsl_s")+fe("hasValue")](){this.changeHslColor()}[ot("$hsl_l")+fe("hasValue")](){this.changeHslColor()}[ot("$hsl_a")+fe("hasValue")](){this.changeHslColor()}[tr("$hexCode")+fe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[Dg("$hexCode")+fe("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[z("$formatChangeButton")](){this.nextFormat()}[z("$el .information-item.hex .input-field .title")](){this.goToFormat("hex")}[z("$el .information-item.rgb .input-field .title")](){this.goToFormat("hsl")}[z("$el .information-item.hsl .input-field .title")](){this.goToFormat("rgb")}setRGBInput(){this.refs.$rgb_r.val(this.manager.rgb.r),this.refs.$rgb_g.val(this.manager.rgb.g),this.refs.$rgb_b.val(this.manager.rgb.b),this.refs.$rgb_a.val(this.manager.alpha)}setHSLInput(){this.refs.$hsl_h.val(this.manager.hsl.h),this.refs.$hsl_s.val(this.manager.hsl.s),this.refs.$hsl_l.val(this.manager.hsl.l),this.refs.$hsl_a.val(this.manager.alpha)}setHexInput(){this.refs.$hexCode.val(this.manager.toString("hex"))}setValue(){this.refresh()}refresh(){this.setCurrentFormat(this.manager.format),this.setRGBInput(),this.setHSLInput(),this.setHexInput()}}class CR extends X{initState(){return{hueColor:"rgba(0, 0, 0, 1)",s:0,v:0}}template(){return` +
        +
        +
        +
        +
        +
        +
        + `}afterRender(){this.rect=this.$el.rect()}[ae("$el")](){return{style:{"background-color":this.state.hueColor}}}[ae("$drag_pointer")](){(!this.rect||this.rect.width===0)&&(this.rect=this.$el.rect());const e=this.rect.width*this.state.s,t=this.rect.height*(1-this.state.v);return{style:{left:e,top:t}}}[ve("$el")+_e("movePointer")+Se("moveEndPointer")](){this.rect=this.$el.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}moveEndPointer(){this.parent.changeEndColor()}refreshColorUI(){const e=this.$config.get("bodyEvent"),t=this.rect.left,r=this.rect.right,i=this.rect.top,a=this.rect.bottom,n=Math.min(r,Math.max(t,e.clientX)),o=Math.min(a,Math.max(i,e.clientY)),l=r-t,c=a-i;var h=(n-t)/l,u=(c-(o-i))/c;this.parent.changeColor({type:"hsv",s:h,v:u})}setValue(e,t,r){this.setState({s:e,v:t,hueColor:r})}}class kR extends X{initState(){return{value:"rgba(0, 0, 0, 1)"}}template(){return"
        "}[ae("$el")](){return{style:{"background-color":this.state.value}}}setValue(e){this.setState({value:e})}}class TR extends X{initState(){return{hue:0,minValue:0,maxValue:360}}template(){return` +
        +
        +
        +
        +
        + `}[ae("$bar")](){const e=this.state.hue;return{style:{left:p.makePercent(e,360)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[ve("$container")+_e("movePointer")+Se("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,i=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({h:i*this.state.maxValue,type:"hsv"})}setValue(e){this.setState({hue:e})}}class MR extends X{initState(){return{colorbar:ft("rgba(0, 0, 0, 1)"),opacity:0,minValue:0,maxValue:100}}template(){return` +
        +
        +
        +
        +
        +
        + `}[ae("$colorbar")](){const e=ye(this.state.colorbar);e.a=0;const t=Vs(e,"rgb");e.a=1;const r=Vs(e,"rgb");return{style:{background:`linear-gradient(to right, ${t}, ${r})`}}}[ae("$bar")](){const e=this.state.opacity*100;return{style:{left:p.percent(e)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[ve("$container")+_e("movePointer")+Se("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,i=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({a:i.toFixed(2)})}setValue(e,t){this.setState({opacity:t,colorbar:e})}}class IR{constructor(){this.initialize()}initialize(){this.state={rgb:{},hsl:{},hsv:{},alpha:1,format:"hex"}}get hsv(){return this.state.hsv}get rgb(){return this.state.rgb}get hsl(){return this.state.hsl}get hex(){return this.state.hex}get alpha(){return typeof this.state.alpha=="undefined"?1:this.state.alpha}get format(){return this.state.format}changeFormat(e){this.state.format=e}initColor(e){this.changeColor(e)}changeColor(e){e=e||"#FF0000",typeof e=="string"&&(e=ft(e)),this.state.alpha=typeof e.a!="undefined"?e.a:this.state.alpha,this.state.format=e.type!="hsv"?e.type||this.state.format:this.state.format,e.type=="hsl"?(this.state.hsl=b(b({},this.state.hsl),e),this.state.rgb=yo(this.state.hsl),this.state.hsv=aS(e)):e.type=="hex"?(this.state.rgb=b(b({},this.state.rgb),e),this.state.hsl=Ii(this.state.rgb),this.state.hsv=Wl(e)):e.type=="rgb"?(this.state.rgb=b(b({},this.state.rgb),e),this.state.hsl=Ii(this.state.rgb),this.state.hsv=Wl(e)):e.type=="hsv"&&(this.state.hsv=b(b({},this.state.hsv),e),this.state.rgb=Au(this.state.hsv),this.state.hsl=NP(this.state.hsv))}getHueColor(){return UP(this.state.hsv.h/360)}toString(e){e=e||this.state.format;var t=this.state[e]||this.state.rgb;return Vs(ie(b({},t),{a:this.state.alpha}),e)}toColor(e){return e=(e||this.state.format).toLowerCase(),this.toString(e)}}class ER extends X{created(){this.manager=new IR}initState(){const e=this.props.value||"rgba(0, 0, 0, 1)";return this.manager.initColor(e),{key:this.props.key,value:this.manager.toString()}}updateData(e={}){this.setState(e,!1),this.modifyColorPicker()}modifyColorPicker(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initColor(e,t){this.manager.changeColor(e,t),this.refresh()}changeColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.updateData({value:this.manager.toColor()})}[K("selectColorAssets")](e,t){this.lastUpdateColor(t)}changeFormat(e){this.manager.changeFormat(e),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}lastUpdateColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}changeEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}refresh(){const e=this.manager.toColor();this.children.$palette.setValue(this.manager.hsv.s,this.manager.hsv.v,this.manager.getHueColor()),this.children.$opacity.setValue(this.manager.rgb,this.manager.alpha),this.children.$hue.setValue(this.manager.hsv.h),this.children.$colorview.setValue(e),this.children.$information.setValue()}components(){return{Hue:TR,Opacity:MR,ColorView:kR,Palette:CR,ColorInformation:wR}}template(){return` +
        +
        + ${O("Palette",{ref:"$palette"})} +
        + ${O("Hue",{ref:"$hue"})} + ${O("Opacity",{ref:"$opacity"})} +
        + ${O("ColorView",{ref:"$colorview"})} +
        + ${O("ColorInformation",{ref:"$information"})} + ${this.$context.injectManager.generate("colorpicker")} + ${O("ColorAssetsEditor",{ref:"$colorAsset",key:"colorAssets",onchange:"selectColorAssets"})} +
        +
        + `}}class LR extends Lr{getTitle(){return this.$i18n("colorpicker.popup.title")}getClassName(){return"compact elf--colorpicker-popup"}initState(){return{color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEvent,this.state.color,this.params)}updateEndData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEndEvent,this.state.color,this.params)}getBody(){return` +
        +
        + ${O("EmbedColorPicker",{ref:"$color",value:this.state.color,onchange:e=>this.updateData({color:e}),onchangeend:e=>this.updateEndData({color:e})})} +
        + `}[G("$projectColors")](){var e=this.$context.selection.currentProject||{colors:[]},t=e.colors;return t.map(r=>` +
        +
        +
        `)}[z("$projectColors .color-view")](e){this.updateData({color:e.$dt.attr("data-color")}),this.children.$color.setValue(this.state.color)}[M("showColorPickerPopup")](e,t,r){if(e.changeEvent=e.changeEvent||"changeFillPopup",!(e.target instanceof Ki))throw new Error("ColorPicker needs data.target");this.params=t,this.setState(e,!1),this.children.$color.setValue(this.state.color),this.showByRect(this.makeRect(245,500,r))}[M("hideColorPickerPopup")](){this.hide()}}class VR extends X{initState(){return{value:this.props.value||"rgba(0, 0, 0, 1)"}}template(){return` +
        + ${O("ColorPickerEditor",{ref:"$colorpicker",key:"colorpicker",value:this.state.value,onchange:"localChangeColor",onchangeend:"localLastUpdate"})} +
        + `}[K("localChangeColor")](e,t){this.parent.trigger(this.props.onchange,t)}[K("localLastUpdate")](e,t){this.parent.trigger(this.props.onchangeend,t)}setValue(e){this.state.value=e,this.children.$colorpicker.initColor(e)}refresh(){this.children.$colorpicker.initColor(this.props.value)}}function OR(s){s.registerElement({ColorPickerEditor:ER,EmbedColorPicker:VR}),s.registerUI("popup",{ColorPickerPopup:LR})}class jR extends Lr{getClassName(){return"component-property w(800)"}getTitle(){return"Component"}initState(){return{title:"",inspector:[]}}refresh(){this.setTitle(this.state.title||this.getTitle()),this.load()}getBody(){return` +
        + `}[ae("$body")](){return{style:{width:this.state.width||250}}}[G("$body")](){const e=this.state.inspector;return O("ComponentEditor",{inspector:e,onchange:"changeComponent"})}[K("changeComponent")](e,t){de(this.state.changeEvent)&&this.emit(this.state.changeEvent,e,t)}[M(Vf)](e){this.setState(e,!1),this.refresh(),this.show(e.width)}}class RR extends Ne{getClassName(){return"component-property"}getTitle(){return"Component"}isShow(){var r;var e=(r=this.$context.selection)==null?void 0:r.current;const t=this.$context.components.createInspector(e);return!!(e&&(e.is("component")||t.length>0))}[M(Oe)+He(100)](){this.refreshShow(()=>{const e=this.$context.selection.current;return this.$context.components.createInspector(e).length>0})}refresh(){var e=this.$context.selection.current;e&&(this.setTitle(e.getDefaultTitle()||e.itemType||e.name),this.load())}getBody(){return` +
        + `}[G("$body")](){var r;var e=(r=this.$context.selection)==null?void 0:r.current;if(!e)return"";const t=this.$context.components.createInspector(e);return t.forEach(i=>{if(ct(i))return;let a=e[i.key]||i.defaultValue;de(i.convertDefaultValue)&&(a=i.convertDefaultValue(e,i.key)),i.defaultValue=a}),O("ComponentEditor",{ref:"$comp",inspector:t,onchange:"changeComponentProperty"})}[K("changeComponentProperty")](e,t){this.$commands.executeCommand("setAttribute","change component : "+e,this.$context.selection.packByValue({[e]:t}))}}function zR(s){s.registerUI("inspector.tab.style",{ComponentProperty:RR}),s.registerUI("popup",{ComponentPopup:jR})}class AR extends Ne{getTitle(){return"Content"}[M(Oe,Lf)+He(100)](){this.refreshShow(["text"])}getBody(){return` +
        + +
        + `}[ae("$contentItem")](){var e=this.$context.selection.current;return e?{value:e.content||""}:""}[ot("$contentItem")](){this.setContent()}setContent(){var e=this.$context.selection.current;if(e){var t={content:this.refs.$contentItem.value};e.reset(t),this.emit(Lt,e)}}}function DR(s){s.registerElement({ContentProperty:AR})}var FR=[PV,kL,q9,Su,Pu,wu,o8,d8,WO,_u,Wu,OR,T8,L9,q8,WT,$O,X9,C3,gO,e3,gR,_8,fR,vR,DR,QT,zR,h3,bO,y3,S3,PR,Y8,Pj,uR,a9,a3,x3,$8,i3,T3,V3,p8,_R,t9,qT,_j,B3,B8,SO,hj,yj,D8,i9,K9,G8,tO,uO,j8,y8,D3,Z8,lj,function(s){s.registerMenu("context.menu.layer2",[{type:"button",title:"Layer"}]),s.registerMenu("context.menu.layer",[{type:"button",title:"Sample"},{type:"button",title:"Sample"},{type:"button",title:"Sample",action:e=>{console.log(e)}},{type:"button",title:"Sample"},{type:"dropdown",title:"dropdown",items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/",closable:!0}]}]),s.registerUI("context.menu",{ContextMenuView:HT})}];class Rd extends X{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` +
        +
        +
        + `}[M("drawAreaView")](e){this.refs.$dragAreaRect.css(e)}[M("initDrawAreaView")](){this.trigger("drawAreaView",{left:p.px(-1e4),top:p.px(0),width:p.px(0),height:p.px(0)})}[M("startDragAreaView")](){this.initMousePoint=this.$viewport.getWorldPosition(),this.dragRect={left:p.px(this.initMousePoint[0]),top:p.px(this.initMousePoint[1]),width:p.px(0),height:p.px(0)},this.trigger("drawAreaView",this.dragRect)}getSelectedItems(e,t){var r=this.$context.selection.currentProject;let i=[],a=[];return r&&(e.width===0&&e.height===0?i=[]:(r.layers.forEach(o=>{o.is("artboard")&&o.isIncludeByArea(t)?a.push(o):o.is("artboard")&&o.checkInArea(t)&&o.hasChildren()===!1?i.push(o):i.push.apply(i,o.checkInAreaForAll(t))}),i=i.filter(o=>o.isDragSelectable),i.length>1&&(i=i.filter(o=>o.is("artboard")===!1)))),a.length?a:i}[M("moveDragAreaView")](){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),r=Fr([],$e([],t,this.initMousePoint));e.shiftKey&&(r[1]=r[0]);const i=Fr([],this.initMousePoint),a=Fr([],Pe([],this.initMousePoint,r)),n=this.$viewport.applyVertex(i),o=this.$viewport.applyVertex(a),l=kr([n,o]);this.dragRect={left:l[0][0],top:l[0][1],width:Math.abs(l[1][0]-l[0][0]),height:Math.abs(l[3][1]-l[0][1])},this.trigger("drawAreaView",{left:p.px(this.dragRect.left),top:p.px(this.dragRect.top),width:p.px(this.dragRect.width),height:p.px(this.dragRect.height)});var{left:c,top:h,width:u,height:d}=this.dragRect,v={x:c,y:h,width:u,height:d};const g=this.getSelectedItems(v,Eu([i,a]));this.$context.selection.selectByGroup(...g)}[M("endDragAreaView")](){const e=this.$viewport.getWorldPosition(),t=Fr([],$e([],e,this.initMousePoint));this.$config.init("set.move.control.point",!1),t[0]===0&&t[1]===0&&this.$context.selection.empty(),this.trigger("initDrawAreaView"),this.$context.selection.reselect(),this.$commands.emit("history.refreshSelection")}}class zd extends X{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` +
        + `}checkSelectionArea(e){const t=this.$viewport.getWorldPosition(e);if(this.$context.selection.hasPoint(t))return!0}checkEditMode(e){if(this.$config.is("editing.mode",_t.HAND))return!1;const t=this.$context.shortcuts.getGeneratedKeyCode(Es.space);if(this.$context.keyboardManager.check(t))return!1;const r=this.$viewport.getWorldPosition(e);return this.inSelection=!1,this.$context.selection.hasPoint(r)?(this.inSelection=!0,this.$context.selection.current.is("artboard")?this.$context.selection.current.hasChildren()?(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0)):(this.mouseOverItem=this.$context.selection.filteredLayers[0],this.mouseOverItem?(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0)):(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1)),!0)}[ve("$dragAreaView")+fe("checkEditMode")+_e("movePointer")+Se("moveEndPointer")](){this.$config.get("set.dragarea.mode")&&this.emit("startDragAreaView"),this.$config.set("editing.mode.itemType","select")}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}movePointer(){this.$config.get("set.dragarea.mode")&&this.emit("moveDragAreaView")}moveEndPointer(){this.$config.get("set.dragarea.mode")&&this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!1)}}class BR extends X{template(){return` +
        + +
        + ${O("NumberInputEditor",{ref:"$scaleInput",min:10,max:240,step:1,key:"scale",value:this.$viewport.scale*100,onchange:this.subscribe((e,t)=>{this.$viewport.setScale(t/100),this.emit(it),this.trigger(it)},1e3)})} +
        + + + + + + ${this.$injectManager.generate("page.tools")} +
        + + `}[M(it)](){const e=Math.floor(this.$viewport.scale*100);this.children.$scaleInput&&this.children.$scaleInput.setValue(e)}[z("$plus")](){const e=this.$viewport.scale;this.$viewport.setScale(e+.01),this.emit(it),this.trigger(it)}[z("$minus")](){const e=this.$viewport.scale;this.$viewport.setScale(e-.01),this.emit(it),this.trigger(it)}[z("$center")](){this.$commands.emit("moveSelectionToCenter")}[z("$ruler")](){this.$config.toggle("show.ruler")}[z("$fullscreen")](){this.emit("bodypanel.toggle.fullscreen")}[z("$buttons button")](e){const t=e.$dt.data("item-id"),r=e.$dt.data("path-index"),i=this.$editor.get(t);if(i.editablePath)this.$commands.emit("open.editor",i);else{const a=Y.fromSVGString(i.absolutePath().d).toPathList();this.emit("showPathEditor","modify",{box:"canvas",current:i,matrix:i.matrix,d:a[r].d,changeEvent:n=>{a[r].reset(n.d);const o=i.invertPath(Y.joinPathList(a).d).d;this.$commands.executeCommand("setAttribute","modify sub path",{[t]:i.updatePath(o)})}})}this.emit("hideSelectionToolView")}}const NR=[/\(/gi,/\)/gi],GR="grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map(s=>new RegExp(s,"gi")),HR="butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map(s=>new RegExp(s,"gi"));function UR(s){return HR.forEach(e=>{s=s.replace(e,t=>`${t}`)}),GR.forEach(e=>{s=s.replace(e,t=>`${t}`)}),NR.forEach(e=>{s=s.replace(e,t=>`${t}`)}),s}function zl(s){return s.split(";").filter(e=>e.trim()).map(e=>{e=e.trim();var[t,r]=e.split(":").map(i=>i.trim());return r===""?"":`
        ${t}: ${UR(r)};
        `}).join("").trim()}function WR(s){return s.replace(/;/gi,`; +`).trim()}var en,ia;class XR{constructor(e){yt(this,en,void 0);yt(this,ia,{});this.editor=e,bt(this,en,Ls())}setRendererType(e,t){t.setRenderer(this),we(this,ia)[e]=t}get id(){return we(this,en)}getDefaultRendererInstance(){return we(this,ia).rect}getRendererInstance(e){const t=we(this,ia)[e.itemType]||this.editor.getRendererInstance("html",e.itemType)||this.getDefaultRendererInstance()||e;return t.setRenderer(this),t}render(e){if(!e)return;const t=this.getRendererInstance(e);if(t)return t.render(e)}renderSVG(e){const t=this.getRendererInstance(e);return de(t.renderSVG)?t.renderSVG(e):this.getDefaultRendererInstance().renderSVG(e)}to(e,t){const r=this.getRendererInstance(t);if(de(r[e]))return r[e].call(r,t);const i=this.getDefaultRendererInstance();if(de(i[e]))return i[e].call(i,t)}toCSS(e,t={}){const r=this.to("toCSS",e);return Object.keys(t).forEach(i=>{delete r[i]}),r}toNestedCSS(e){return this.to("toNestedCSS",e)}toTransformCSS(e){return this.to("toTransformCSS",e)}toGridLayoutCSS(e){return this.to("toGridLayoutCSS",e)}toLayoutItemCSS(e){return this.to("toLayoutItemCSS",e)}toLayoutBaseModelCSS(e){return this.to("toLayoutBaseModelCSS",e)}toStyle(e){const t=this.getRendererInstance(e);return de(t.toStyle)?t.toStyle(e):this.getDefaultRendererInstance().toStyle(e)}toStyleData(e){const t=this.getRendererInstance(e);return de(t.toStyleData)?t.toStyleData(e):this.getDefaultRendererInstance().toStyleData(e)}toExportStyle(e){const t=this.getRendererInstance(e);return de(t.toExportStyle)?t.toExportStyle(e):this.getDefaultRendererInstance().toExportStyle(e)}update(e,t,r){const i=this.getRendererInstance(e);return de(i.update)?i.update(e,t,r):this.getDefaultRendererInstance().update(e,t,r)}codeview(e){if(!e)return"";const t=e.project;let r=WR(zl(t?t.toKeyframeString():"")),i=t?Ze(t.toRootVariableCSS()):"";const a=e,n=zl(a?zh(Ze(this.toCSS(a))):""),o=a?this.toNestedCSS(a).map(c=>{var h=c.cssText?c.cssText:Ze(c.css);return`${c.selector} { + ${zl(zh(h))} + }`}):[],l=a?a.selectors:[];return` +
        + +${n&&`
        ${n}
        `} + +${o.map(c=>`
        ${c}
        `).join("")} + +${(l||[]).length?`
        + ${l.map(c=>`
        ${c.toPropertyString()}
        `).join("")} + +
        `:""} + +${r&&`
        ${r}
        `} + +${i?`
        + + 
        ${i}
        +
        `:""} + +
        + `}}en=new WeakMap,ia=new WeakMap;class YR extends Fo{render(e){var{id:t}=e;return`
        ${this.toDefString(e)}${e.layers.map(r=>this.renderer.render(r)).join("")}
        `}toBorderCSS(){return{}}}class ga extends Ji{update(e,t){this.updateElementCache(e,t),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const r=t.$("path");e.addCache("svgElement",r.parent().el),e.addCache("pathElement",r.el)}}updateDefString(e,t){var r=t.$("defs");if(r)r.updateSVGDiff(`${this.toDefInnerString(e)}`);else{var i=this.toDefString(e).trim();t.prepend(ge.createByHTML(i))}}toDefInnerString(e){return` + ${this.toFillSVG(e)} + ${this.toStrokeSVG(e)} + `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}cachedStroke(e){return e.computed("stroke",t=>e.isBooleanItem?tt.parseImage("transparent"):tt.parseImage(t||"black"))}cachedFill(e){return e.computed("fill",t=>e.isBooleanItem?tt.parseImage("transparent"):tt.parseImage(t||"black"))}toFillSVG(e){var r;const t=this.cachedFill(e);return(r=t==null?void 0:t.toSVGString)==null?void 0:r.call(t,this.fillId(e),e.contentBox)}toStrokeSVG(e){var r;const t=this.cachedStroke(e);return(r=t==null?void 0:t.toSVGString)==null?void 0:r.call(t,this.strokeId(e),e.contentBox)}toFillValue(e){var r;const t=this.cachedFill(e);return(r=t==null?void 0:t.toFillValue)==null?void 0:r.call(t,this.fillId(e))}toFillOpacityValue(e){return ft(e.fill||"transparent").a}toStrokeValue(e){var r;const t=this.cachedStroke(e);return(r=t==null?void 0:t.toFillValue)==null?void 0:r.call(t,this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}toDefaultCSS(e){var t;return Object.assign({},super.toDefaultCSS(e),{"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"stroke-dashoffset":e.strokeDashoffset,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}toSVGAttribute(e){return this.toDefaultCSS(e)}}class KR extends ga{toFillSVG(e){const t=e.layers;switch(e.booleanOperation){case qr.DIFFERENCE:return tt.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return tt.parseImage(t[0].fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){const t=e.layers;switch(e.booleanOperation){case qr.DIFFERENCE:return tt.parseImage(t[1].stroke||"transparent").toSVGString(this.strokeId(e))}return tt.parseImage(t[0].stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){var i,a;const t=e.layers;switch(e.booleanOperation){case qr.DIFFERENCE:return tt.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return(a=(i=tt.parseImage(t[0].fill||"transparent")).toFillValue)==null?void 0:a.call(i,this.fillId(e))}toFillOpacityValue(e){return ft(e.fill||"transparent").a}toStrokeValue(e){var i,a,n,o;const t=e.layers;switch(e.booleanOperation){case qr.DIFFERENCE:return(a=(i=tt.parseImage(t[1].stroke||"transparent")).toFillValue)==null?void 0:a.call(i,this.strokeId(e))}return(o=(n=tt.parseImage(t[0].stroke||"black")).toFillValue)==null?void 0:o.call(n,this.strokeId(e))}update(e,t){if(!t)return;const r=t.$(`[data-boolean-path-id="${e.id}"]`);r&&(e.hasChangedField("changedChildren","d","boolean-operation","width","height")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const r=t.$(`[data-boolean-path-id="${e.id}"]`);e.addCache("svgElement",r.parent().el),e.addCache("pathElement",r.el)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
        + ${this.toDefString(e)} + ${e.layers.map(a=>this.renderer.render(a)).join("")} + + + +
        + `}}class ZR extends Ji{}class qR extends Ji{toNestedCSS(){return[{selector:"img",cssText:` + width: 100%; + height: 100%; + pointer-events: none; + `.trim()}]}getUrl(e){var{src:t}=e,r=e.project;return r.getImageValueById(t)||t}render(e){var{id:t}=e;return` +
        + ${this.toDefString(e)} + +
        `}update(e,t){const r=t==null?void 0:t.$("img");r&&r.attr("src",this.getUrl(e)),super.update(e,t)}}class QR extends Fo{toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(r=>r.trim()).forEach(r=>{var[i,a]=r.split(":");t[`--${i}`]=a}),t}toCSS(e){return Object.assign({},this.toRootVariableCSS(e))}toStyle(e){const t=e.toKeyframeString(),r=this.toRootVariableCSS(e);return` + + `}toExportStyle(e){const t=e.toKeyframeString(),r=this.toRootVariableCSS(e);return` + + `}render(e){return e.layers.map(t=>this.renderer.render(t)).join("")}renderSVG(){return""}}class JR extends Ji{}class Ip extends ga{update(e,t){if(!t)return;const r=t.$("path");r&&(e.hasChangedField("width","height","d")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap}),e.hasChangedField("stroke-dasharray")&&r.setAttrNS({"stroke-dasharray":e.strokeDasharray.join(" ")})),super.update(e,t)}render(e){var{id:t,name:r,itemType:i}=e;return` +
        + ${this.toDefString(e)} + + + +
        + `}}class ez extends Ip{update(e,t){if(!!t){var r=t.$("path");r&&e.hasChangedField("points","boundary")&&r.setAttrNS({d:e.d}),super.update(e,t)}}}class tz extends ga{update(e,t){if(!!t){var r=t.$("path");r&&(e.hasChangedField("width","height","count")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
        + ${this.toDefString(e)} + + + +
        + `}}class rz extends ga{update(e,t){if(!!t){var r=t.$("path");r&&(e.hasChangedField("width","height","count","radius","isCurve","tension")&&r.setAttrNS({d:e.d}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&r.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&r.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&r.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:r,itemType:i}=e;return` +
        + ${this.toDefString(e)} + + + +
        + `}}class iz extends ga{update(e,t){var r=t.$("path.svg-path-item");r&&e.hasChangedField("width","height","d")&&r.attr("d",e.d);var i=t.$("path.guide");i&&e.hasChangedField("width","height","d")&&i.attr("d",e.d);var a=t.$("textPath");a&&(e.hasChangedField("text")&&a.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&a.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&a.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&a.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&a.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t),e.totalLength=r.totalLength}toDefInnerString(e){return` + ${this.toPathSVG(e)} + ${this.toFillSVG(e)} + ${this.toStrokeSVG(e)} + `}toPathId(e){return this.getInnerId(e,"path")}toPathSVG(e){return` + + `}render(e){var{id:t,textLength:r,lengthAdjust:i,startOffset:a}=e;const n=`#${this.toPathId(e)}`;return` + + ${this.toDefString(e)} + + ${e.text} + + + + + `}}class sz extends ga{update(e,t){var r=t.$("text");r&&(e.hasChangedField("text")&&r.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&r.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&r.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&r.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&r.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{id:t,textLength:r,lengthAdjust:i}=e;return` + + ${this.toDefString(e)} + ${e.text} + `}}class az{static compile(e,t=[]){return e}}const Ad={dom:az};class Ep{static compile(e,t,r=[]){return(Ad[e]||Ad.dom).compile(t,r)}}class nz extends Ji{update(e,t){if(e.hasChangedField("x","y","width","height")===!1){const r=this.compile(e);let i=t.$(".inner-html");i&&i.updateDiff(r)}super.update(e,t)}compile(e){return Ep.compile("dom",e.template,e.params)}render(e){var{id:t}=e;const r=this.compile(e);return` +
        + ${this.toDefString(e)} + +
        + ${r} +
        +
        `}}class oz extends Ji{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",e.overflow!==Ma.SCROLL&&e.content.length>0&&(t.height="auto"),t}update(e,t){const r=t==null?void 0:t.$(".text-content");if(r){var{content:i}=e;r.updateDiff(i)}super.update(e,t)}render(e){var{id:t,content:r}=e;return` +
        + ${this.toDefString(e)} +
        ${r}
        +
        + `}}class lz extends Ji{toNestedCSS(){return[{selector:"video",cssText:` + width: 100%; + height: 100%; + pointer-events: none; + `.trim()}]}getUrl(e){var{src:t}=e,r=e.project;return r.getVideoValueById(t)}render(e){var{id:t,controls:r,muted:i,poster:a,loop:n,crossorigin:o,autoplay:l}=e;return` +
        + ${this.toDefString(e)} + +
        `}update(e,t){const{currentTime:r,playbackRate:i,volume:a}=e,n=t.$("video");n&&n.setProp({currentTime:r,playbackRate:i,volume:a}),super.update(e,t)}}function cz(s){const e=new XR(s);e.setRendererType("project",new QR),e.setRendererType("artboard",new YR),e.setRendererType("rect",new JR),e.setRendererType("circle",new ZR),e.setRendererType("image",new qR),e.setRendererType("text",new oz),e.setRendererType("video",new lz),e.setRendererType("boolean-path",new KR),e.setRendererType("svg-path",new Ip),e.setRendererType("polygon",new tz),e.setRendererType("star",new rz),e.setRendererType("spline",new ez),e.setRendererType("svg-text",new sz),e.setRendererType("svg-textpath",new iz),e.setRendererType("template",new nz),s.registerRendererType("html",e)}class hz{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("svg","rect")}getRendererInstance(e){return this.editor.getRendererInstance("svg",e.itemType)||this.getDefaultRendererInstance()||e}render(e,t){if(!e)return"";const r=this.getRendererInstance(e);if(r)return r.render(e,t||this)}toCSS(e){const t=this.getRendererInstance(e);if(t)return t.toCSS(e)}toTransformCSS(e){const t=this.getRendererInstance(e);if(t)return t.toTransformCSS(e)}toStyle(e,t){const r=this.getRendererInstance(e);if(r)return r.toStyle(e,t||this)}update(e,t){const r=this.getRendererInstance(e);if(r)return r.update(e,t)}codeview(e){if(!e)return"";let t=this.render(e);return t=t.replace(//g,">"),` +
        +${t&&`
        ${t}
        `} +
        + `}}class Rc extends Fo{toDefaultCSS(e){return{overflow:"visible","background-color":e.backgroundColor,color:e.color,"font-size":e.fontSize,"font-weight":e.fontWeight,"font-style":e.fontStyle,"font-family":e.fontFamily,"text-align":e.textAlign,"text-decoration":e.textDecoration,"text-transform":e.textTransform,"letter-spacing":e.letterSpacing,"word-spacing":e.wordSpacing,"line-height":e.lineHeight,"text-indent":e.textIndent,"text-shadow":e.textShadow,"text-overflow":e.textOverflow,"text-wrap":e.textWrap,"z-index":e.zIndex,opacity:e.opacity,"mix-blend-mode":e.mixBlendMode,"transform-origin":e.transformOrigin,"border-radius":e.borderRadius,filter:e.filter,"backdrop-filter":e.backdropFilter,"box-shadow":e.boxShadow,animation:e.animation,transition:e.transition}}toCSS(e){const t=Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}toSVGAttribute(e){var t;return ie(b({},this.toDefaultCSS(e)),{strokeWidth:e.strokeWidth,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}wrappedRender(e,t){const{id:r,x:i,y:a,width:n,height:o,itemType:l}=e;return` + + + ${this.toDefString(e)} + ${de(t)&&t()} + + `}render(e,t){const{width:r,height:i,elementType:a}=e,n=a||"div";let o=this.toCSS(e);return this.wrappedRender(e,()=>` + + <${n} xmlns="http://www.w3.org/1999/xhtml" style="${Ze(o)};width:100%;height:100%;"> + +${e.layers.map(l=>t.render(l,t)).join("")} + `)}}class dz extends Rc{toCSS(e){const t=Object.assign({},this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBackgroundImageCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}render(e,t,r=!0){const{width:i,height:a}=e;let n=this.toCSS(e);return` +${r?'':""} + + ${this.toDefString(e)} + ${e.layers.map(o=>t.render(o,t)).join("")} + + `}}class es extends Rc{}class As extends es{updateDefString(e,t){var r=t.$("defs");if(r)r.html(this.toDefInnerString(e));else{var i=this.toDefString(e).trim();t.prepend(ge.createByHTML(i))}}toDefInnerString(e){return` + ${this.toFillSVG(e)} + ${this.toStrokeSVG(e)} + `}toDefString(e){return` + + ${this.toDefInnerString(e).trim()} + + `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}toFillSVG(e){return tt.parseImage(e.fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){return tt.parseImage(e.stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){return tt.parseImage(e.fill||"transparent").toFillValue(this.fillId(e))}toFillOpacityValue(e){return ft(e.fill||"transparent").a}toStrokeValue(e){return tt.parseImage(e.stroke||"black").toFillValue(this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}}class uz extends As{update(e,t){if(!t)return;const r=t.$(`[data-boolean-path-id="${e.id}"]`);r&&(r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=r.totalLength),this.updateDefString(e,t)}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class pz extends es{}class gz extends es{update(e,t){let r=t.$("iframe");r&&r.attr("src",e.url||"about:blank"),super.update(e,t)}render(e){const{width:t,height:r,url:i="about:blank"}=e;let a=this.toCSS(e);return this.wrappedRender(e,()=>` + + + + `)}}class fz extends es{getUrl(e){var{src:t}=e,r=e.project;return r.getImageValueById(t)}render(e){const{width:t,height:r}=e;let i=this.toCSS(e);return this.wrappedRender(e,()=>` + +
        + +
        +         + `)}update(e,t){const r=t.$("img");r&&r.attr("src",this.getUrl(e)),super.update(e,t)}}class mz extends Rc{render(e,t){return e.artboards.map(r=>t.render(r,t))}}class vz extends es{}class yz extends As{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class bz extends As{update(e,t){if(!!t){var r=t.$("path");r&&(r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=r.totalLength),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class xz extends As{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class $z extends As{update(e,t){if(!!t){var r=t.$("path");r&&r.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` + + `)}}class _z extends As{update(e,t){var r=t.$("path");r&&r.attr("d",e.d);var i=t.$("textPath");i&&(i.text(e.text),i.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset})),this.updateDefString(e,t),e.totalLength=r.totalLength}toDefInnerString(e){return` + ${this.toPathSVG(e)} + ${this.toFillSVG(e)} + ${this.toStrokeSVG(e)} + `}toPathId(e){return this.getInnerId(e,"path")}toPathSVG(e){return` + + `}render(e){return this.wrappedRender(e,()=>{const{textLength:t,lengthAdjust:r,startOffset:i}=e;return` + ${e.text} + `})}}class Sz extends As{update(e,t){var r=t.$("text");r&&(r.text(e.text),r.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust})),this.updateDefString(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{textLength:t,lengthAdjust:r}=e;return this.wrappedRender(e,()=>` + ${e.text} + `)}}class Pz extends es{update(e,t){const r=this.compile(e);let i=t.$(".inner-html");i&&i.updateDiff(r),super.update(e,t)}compile(e){return Ep.compile("dom",e.template,e.params)}render(e){const{id:t,width:r,height:i}=e,a=this.compile(e);return this.wrappedRender(e,()=>` + +
        + +
        + ${a} +
        +
        +         + `)}}class wz extends es{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",t.height="auto",t}render(e){const{content:t,width:r,height:i}=e;let a=this.toCSS(e);return this.wrappedRender(e,()=>` + +

        ${t}

        +         + `)}update(e,t){var{content:r}=e;t.updateDiff(r)}}class Cz extends es{getUrl(e){var{src:t}=e,r=e.project;return r.getVideoValueById(t)}render(e){var{width:t,height:r,controls:i,muted:a,poster:n,loop:o,crossorigin:l,autoplay:c}=e;let h=this.toCSS(e);return this.wrappedRender(e,()=>` + + + + `)}}function kz(s){s.registerRendererType("svg",new hz(s)),s.registerRenderer("svg","project",new mz),s.registerRenderer("svg","artboard",new dz),s.registerRenderer("svg","rect",new vz),s.registerRenderer("svg","circle",new pz),s.registerRenderer("svg","image",new fz),s.registerRenderer("svg","template",new Pz),s.registerRenderer("svg","iframe",new gz),s.registerRenderer("svg","video",new Cz),s.registerRenderer("svg","text",new wz),s.registerRenderer("svg","boolean-path",new uz),s.registerRenderer("svg","svg-path",new bz),s.registerRenderer("svg","polygon",new xz),s.registerRenderer("svg","star",new $z),s.registerRenderer("svg","spline",new yz),s.registerRenderer("svg","svg-text",new Sz),s.registerRenderer("svg","svg-textpath",new _z)}class Dd extends X{initialize(){super.initialize(),cz(this.$editor),kz(this.$editor),this.renderer=this.$editor.renderer("html")}initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},doubleClickTime:0}}template(){return`
        +
        + ${this.$injectManager.generate("render.view")} +
        `}[ae("$view")](){const{translate:e,transformOrigin:t,scale:r}=this.$viewport,i=`translate(${e[0]}px, ${e[1]}px) scale(${r||1})`;return{style:{"transform-origin":`${t[0]}px ${t[1]}px`,transform:i}}}[Ct("show.outline")](){this.refs.$view.attr("data-outline",this.$config.get("show.outline"))}[Ct("bodyEvent")](){const e=this.$config.get("bodyEvent");e.buttons===0&&ge.create(e.target).hasClass("elf--drag-area-view")&&this.$commands.emit("recoverCursor")}[M("refElement")](e,t){de(t)&&t(this.getElement(e))}[M(Lt)](e){this.refreshSelectionStyleView(e)}[M(it)](){this.bindData("$view")}[M("refreshAllElementBoundSize")](){this.refreshAllElementBoundSize()}[M("refreshElementBoundSize")](e){this.refreshElementBoundSize(e)}[M("updateAllCanvas")](e){this.updateAllCanvas(e)}[M("refreshAllCanvas")](){this.refreshAllCanvas()}[M("playTimeline","moveTimeline")](){var t=this.$context.selection.currentProject.getSelectedTimeline();t&&t.animations.map(r=>this.$model.get(r.id)).forEach(r=>{this.updateTimelineElement(r,!0,!1)})}clearElementAll(){this.state.cachedCurrentElement={}}clearElement(e){this.state.cachedCurrentElement[e]=void 0}getElement(e){return this.state.cachedCurrentElement[e]||(this.state.cachedCurrentElement[e]=this.refs.$view.$(`[data-id="${e}"]`)),this.state.cachedCurrentElement[e]}[Ms("$view .element-item.text .text-content")](e){e.$dt.removeAttr("contenteditable"),e.$dt.removeClass("focused"),this.$context.commands.emit("pop.mode.view","TextEditorView"),this.$context.commands.emit("recoverCursor")}[tr("$view .element-item.text .text-content")](e){var t=e.$dt.html(),r=e.$dt.text().trim(),i=e.$dt.parent().attr("data-id"),a=[];this.$context.selection.items.filter(n=>n.id===i).forEach(n=>{n.reset({content:t,text:r}),a.push({id:n.id,content:t,text:r}),this.$commands.emit("setAttribute",{[n.id]:{content:t,text:r}})}),this.emit("refreshContent",a)}checkEditMode(e){if(this.state.hasDoubleClick=!1,window.performance.now()-this.state.doubleClickTime{console.log("console.log","yellow")}}],x:e.clientX,y:e.clientY,id:i})}[ve("$view")+fe("checkEditMode")+_e("calculateMovedElement")+fo("calculateFirstMovedElement")+Se("calculateEndedElement")](e){if(this.initMousePoint=this.$viewport.getWorldPosition(e),this.$config.init("set.move.control.point",!0),this.$config.set("editing.mode.itemType","select"),this.$config.get("set.dragarea.mode")){this.emit("startDragAreaView");return}let t=this.$context.selection.hasPoint(this.initMousePoint);const r=ge.create(e.target);if(r.hasClass("canvas-view"))return this.$context.selection.select(),this.initializeDragSelection(),!1;const i=r.closest("element-item");var a=i&&i.attr("data-id");if(e.altKey)t||this.$context.selection.check({id:a})===!1&&this.$context.selection.selectByGroup(a),this.$context.selection.isEmpty===!1&&(this.$commands.emit("history.copyLayer","copy"),this.emit("refreshLayerTreeView"),this.initializeDragSelection());else{if(!t){if(e.shiftKey)this.$context.selection.toggleById(a);else if(this.$context.selection.check({id:a})===!1){const n=this.$model.get(a);n&&n.is("artboard")&&n.hasChildren()||(n.hasChildren()?this.$context.selection.selectByGroup(a):this.$context.selection.selectByGroup(a))}}this.initializeDragSelection()}}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear(),this.emit("startGhostToolView")}calculateFirstMovedElement(){this.emit("hideSelectionToolView"),this.emit("moveFirstGhostToolView")}calculateMovedElement(){if(this.$config.get("set.dragarea.mode")){this.emit("moveDragAreaView");return}const e=this.$viewport.getWorldPosition();if(this.emit("moveGhostToolView"),this.$context.selection.isLayoutItem)return;const t=Fr([],$e([],e,this.initMousePoint));this.moveTo(t),this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(e))&&(this.initMousePoint=e,this.$context.selection.reselect(),this.$context.snapManager.clear(),this.refreshAllCanvas(),this.emit("refreshLayerTreeView")),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y"))}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(a=>Pe([],a,e)),3/this.$viewport.scale),r=Pe([],t.dist,e),i={};this.$context.selection.cachedItemMatrices.forEach(a=>{const n=a.verties[4],o=Pe([],n,r),l=$e([],Xe([],o,a.parentMatrixInverse),Xe([],n,a.parentMatrixInverse));this.$context.selection.isOne?i[a.id]={x:Math.round(a.x+l[0]),y:Math.round(a.y+l[1])}:i[a.id]={x:a.x+l[0],y:a.y+l[1]}}),this.$context.selection.reset(i)}calculateEndedElement(e,t){if(this.state.hasDoubleClick){this.state.doubleClickTime=window.performance.now();return}const r=this.$viewport.getWorldPosition(),i=se(r,this.initMousePoint);this.$config.init("set.move.control.point",!1);const a=Math.abs(e)>.5||Math.abs(t)>.5;if(this.emit("endGhostToolView",a),this.$config.get("set.dragarea.mode")){this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1);return}i<1||(this.$context.selection.reselect(),this.$context.snapManager.clear(),this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.nextTick(()=>{this.$commands.emit("recoverBooleanPath")})),this.$config.set("editing.mode.itemType","select"),this.$commands.emit("history.refreshSelection"),this.emit(Is)}refreshSelectionStyleView(e){let t=[];e?Ut(e)?t=e:t=[e]:t=this.$context.selection.items,t.forEach(r=>{this.updateElement(r)})}updateElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}updateTimelineElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}refreshAllCanvas(){this.clearElementAll();const e=this.$context.selection.currentProject,t=this.renderer.render(e,null,this.$editor)||"";this.refs.$view.updateDiff(t,void 0,{checkPassed:(r,i)=>r.getAttribute("data-id")===i.getAttribute("data-id")}),this.updateAllCanvas(e)}updateAllCanvas(e){e==null||e.layers.forEach(t=>{this.updateElement(t,this.getElement(t.id)),this.updateAllCanvas(t)})}refreshAllElementBoundSize(){var e=this.$context.selection.items.map(r=>r.is("artboard")?r:r.parent),t=[...new Set(e)];t.length?t.forEach(r=>{this.refreshElementBoundSize(r)}):this.$context.selection.currentProject.artboards.forEach(r=>{this.refreshElementBoundSize(r)})}refreshElementRect(e){var t=this.getElement(e.id);if(!t)return;let r=t.offsetRect();r.width===0||r.height===0||(e.reset(r),this.refreshSelectionStyleView(e),this.$context.selection.check(e)&&this.emit(Is))}refreshElementBoundSize(e){e&&(this.refreshElementRect(e),e.layers.forEach(t=>{this.refreshElementBoundSize(t)}))}}class Tz extends X{components(){return{PageTools:BR,DragAreaRectView:Rd,HTMLRenderView:Dd,DragAreaView:zd}}initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.$commands.emit("moveSelectionToCenter",!0),this.refreshCursor()})}template(){return w("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},w("div",{class:"page-view",ref:"$pageView"},w("div",{class:"page-lock scrollbar",ref:"$lock"},w(zd,{ref:"$dragArea"}),w(Dd,{ref:"$htmlRenderView"}),w(Rd,{ref:"$dragAreaRectView"}),this.$injectManager.generate("canvas.view",!0))),"$",O("PageTools",{ref:"pageTools"}))}[ae("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$config.is("editing.mode",_t.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode(Es.space))}[ve("$lock")+fe("checkSpace")+_e("movePan")+Se("moveEndPan")](){this.startMovePan()}[Ct("editing.mode")](){this.$config.is("editing.mode",_t.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ei()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const r=Te(e,t,0);this.$viewport.pan(...Xe([],$e([],this.lastDist,r),this.$viewport.scaleMatrixInverse)),this.lastDist=r}refreshCursor(){this.$config.is("editing.mode",_t.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}[si("$lock")+Le](){}[ii("$lock")+Le](e){const t=this.$viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$commands.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const r=ge.create(e.target).attr("data-id");if(r)this.$commands.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},r);else{const i=e.dataTransfer.getData("image/info");this.$commands.emit("dropImageUrl",i)}}}[Zd("$lock")+Le](e){const[t,r]=Qd(e);if(!this.state.gesture)e.ctrlKey&&this.$viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const i=1-2.5*r/100;this.$viewport.zoom(i)}else{const i=-2.5*t,a=-2.5*r;this.$viewport.pan(-i/this.$viewport.scale,-a/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$viewport.refreshCanvasSize(this.refs.$lock.rect())}[M(an,To)](){this.refreshCanvasSize()}[M(it)](){this.$commands.emit("refreshCursor","auto")}}let gi=[];class Mz extends X{template(){return` +
        +
        + + + +
        +
        +
        +
        +
        +
        +
        + `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}makeLine(e,t,r,i,a,n,o=3,l=30,c=10){let h=r-r%t,u=i+i%t;const d=(h-r)/a*n,v=(h+t-r)/a*n;if(!(Math.abs(v-d)${d}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const r=t.verties,{minX:i,width:a}=this.$viewport,n=this.state.rect.width,o=(r[0][0]-i)/a*n,l=(r[2][0]-i)/a*n;return` + M ${o} 20 + L ${o} 30 + L ${l} 30 + L ${l} 20 + Z + `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const r=this.$context.selection.verties.map(u=>u[0]),i=Math.min.apply(Math,r),a=Math.max.apply(Math,r),{minX:n,width:o}=this.$viewport,l=this.state.rect.width,c=(i-n)/o*l,h=(a-n)/o*l;return` + M ${c} 0 + L ${c} 20 + L ${h} 20 + L ${h} 0 + Z + `}makeRuler(){const{minX:e,maxX:t,width:r}=this.$viewport,i=this.state.rect.width;return gi=[],this.makeLine(gi,1e3,e,t,r,i,10,24,1e4),this.makeLine(gi,200,e,t,r,i,10,20,5e3),this.makeLine(gi,100,e,t,r,i,10,20,200),this.makeLine(gi,50,e,t,r,i,10,20,100),this.makeLine(gi,10,e,t,r,i,10,18,50),this.makeLine(gi,5,e,t,r,i,10,15,10),this.makeLine(gi,1,e,t,r,i,10,13,10),gi.join("")}makeRulerText(){const{minX:e,maxX:t,width:r}=this.$viewport,i=this.state.rect.width,a=Math.abs(t-e);return[a>3e3?this.makeLineText(3e3,e,t,r,i,24):"",2e3${this.makeRulerText()}`}[G("$lines")+Ee](){return this.initializeRect(),`${this.$config.get("horizontal.line").map(t=>{const r=this.$viewport.applyVertex([t,0,0]);return``}).join("")}`}[ae("$rulerLines")](){return{d:this.makeRulerForCurrent()}}makeRulerCursor(){const e=this.$viewport.getWorldPosition(),{minX:t,width:r}=this.$viewport;this.initializeRect();const i=this.state.rect.width,a=e[0]-t,n=a===0?0:a/r*i;return`M ${n-.5} 0 L ${n-.5} 20`}[ae("$cursor")](){const e=this.$viewport.getWorldPosition(),{minX:t,width:r}=this.$viewport;this.initializeRect();const i=this.state.rect.width,a=e[0]-t;return{cssText:` + --elf--horizontal-cursor-position: ${a===0?0:a/r*i}px; + `}}[Xd()](){this.$commands.emit("refreshCursor","ns-resize")}[ve()+_e()+Se()](){const e=Zi([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("vertical.line",e[1]),this.$config.init("vertical.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minY +
        + + + +
        +
        +
        +
        +
        +
        +
        + `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}[Xd()](){this.$commands.emit("refreshCursor","ew-resize")}[Rg()](){this.$commands.emit("recoverCursor")}[ve()+_e()+Se()](){const e=Zi([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("horizontal.line",e[0]),this.$config.init("horizontal.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minX${d}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const r=t.verties,{minY:i,height:a}=this.$viewport,n=this.state.rect.height,o=(r[0][1]-i)/a*n,l=(r[2][1]-i)/a*n;return` + M 20 ${o} + L 30 ${o} + L 30 ${l} + L 20 ${l} + Z + `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const{minY:t,height:r}=this.$viewport,i=this.state.rect.height,n=this.$context.selection.verties.map(u=>u[1]),o=Math.min.apply(Math,n),l=Math.max.apply(Math,n),c=(o-t)/r*i,h=(l-t)/r*i;return` + M 0 ${c} + L 20 ${c} + L 20 ${h} + L 0 ${h} + Z + `}makeRuler(){const{minY:e,maxY:t,height:r}=this.$viewport,i=this.state.rect.height;return fi=[],this.makeLine(fi,1e3,e,t,r,i,10,20,1e4),this.makeLine(fi,200,e,t,r,i,10,16,5e3),this.makeLine(fi,100,e,t,r,i,10,18,200),this.makeLine(fi,50,e,t,r,i,10,18,100),this.makeLine(fi,10,e,t,r,i,10,18,50),this.makeLine(fi,5,e,t,r,i,10,15,10),this.makeLine(fi,1,e,t,r,i,10,14,5),fi.join("")}makeRulerText(){const{minY:e,maxY:t,height:r}=this.$viewport,i=this.state.rect.height,a=Math.abs(t-e);return[a>3e3?this.makeLineText(3e3,e,t,r,i,24):"",2e3${this.makeRulerText()}`}[G("$lines")+Ee](){return this.initializeRect(),` + ${this.$config.get("vertical.line").map(t=>{const r=this.$viewport.applyVertex([0,t,0]);return``}).join("")} + `}[ae("$rulerLines")](){return{d:this.makeRulerForCurrent()}}[ae("$cursor")](){const e=this.$viewport.getWorldPosition(),{minY:t,height:r}=this.$viewport;this.initializeRect();const i=this.state.rect.height,a=e[1]-t;return{cssText:` + --elf--vertical-cursor-position: ${a===0?0:a/r*i}px; + `}}refresh(){this.$config.get("show.ruler")&&this.load()}[M(Lt)+sa(10)](){const e=this.$context.selection.current;e&&e.changedRect&&this.refresh()}[M(it,Oe)](){this.refresh()}[M(an,To)](){this.refreshCanvasSize()}[Ct("onMouseMovepageContainer")](){this.bindData("$cursor"),this.bindData("$rulerLines")}[Ct("vertical.line")](){this.load("$lines")}}class Ez extends X{components(){return{CanvasView:Tz,VerticalRuler:Iz,HorizontalRuler:Mz,PageSubEditor:uu}}template(){return` +
        +
        + ${O("PageSubEditor",{ref:"subeditor"})} +
        +
        + ${O("HorizontalRuler",{ref:"hruler"})} + ${O("VerticalRuler",{ref:"vruler"})} +
        + ${O("CanvasView",{ref:"canvas"})} +
        + +
        +
        + `}[ae("$el")](){return{class:`elf--body-panel ${this.$config.get("show.ruler")?"ruler":""}`}}[Ct("show.ruler")](){this.refresh()}[M("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[Ct("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[Ct("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[ae("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}class Lz extends $T{initialize(){super.initialize(),this.$context.pathkit.load()}afterRender(){super.afterRender(),this.$commands.emit("load.json",this.opt.data),this.$config.init("editor.layout.elements",this.children.$layout.getLayoutElements())}getManagers(){return{snapManager:DT,selection:LT,segmentSelection:ET,timeline:FT,history:ST,modelManager:CT,lockManager:PT,visibleManager:BT,clipboard:_T,pathkit:IT}}getPlugins(){return FR}getBodyPanel(){return w(ls,{type:"body"},w(Ez,{ref:"$bodyPanelView"}))}}function Lp(s){return af(Lz,s)}function Vz(){return["app"].map(e=>Lp({container:document.getElementById(e),config:{"editor.theme":"light"},plugins:[function(t){t.on("changed",()=>{})}]}))}window.elfEditor=Vz(); diff --git a/docs/assets/index.0a251ad3.css b/docs/assets/index.0a251ad3.css deleted file mode 100644 index 892da7937..000000000 --- a/docs/assets/index.0a251ad3.css +++ /dev/null @@ -1 +0,0 @@ -.colorpicker{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:3px;box-shadow:0 0 10px 2px #0000001f;display:inline-block;position:relative;width:224px;z-index:1000}.colorpicker>.arrow{border-bottom:10px solid rgba(0,0,0,.2);border-left:10px solid transparent;border-right:10px solid transparent;display:none;height:0;left:7px;pointer-events:none;position:absolute;top:-10px;width:0}.colorpicker>.arrow:after{border-bottom:9px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:-9px;position:absolute;top:1px;width:0}.colorpicker .colorpicker-body .color-tab{border:1px solid #ececec;box-sizing:border-box;display:flex;flex-direction:column;height:350px}.colorpicker .colorpicker-body .color-tab.xd{height:200px}.colorpicker .colorpicker-body .color-tab .color-tab-header{display:flex;flex:none;flex-direction:row;height:20px}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item{background-color:#ececec;box-sizing:border-box;cursor:pointer;flex:1 1 auto;height:100%;padding:4px 10px;text-align:center}.colorpicker .colorpicker-body .color-tab .color-tab-header .color-tab-item.active{background-color:#fff;border-bottom-color:#fff}.colorpicker .colorpicker-body .color-tab .color-tab-body{flex:1 1 auto;position:relative}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-tab .color-tab-body .color-tab-content.active{display:block}.colorpicker .colorpicker-body .color-panel{cursor:pointer;height:120px;overflow:hidden;position:relative}.colorpicker .colorpicker-body .color-panel>.saturation,.colorpicker .colorpicker-body .color-panel>.saturation>.value{height:100%;position:relative;width:100%}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border-radius:50%;height:10px;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.colorpicker .colorpicker-body .color-panel>.saturation{background-color:#cb998000;background-image:linear-gradient(90deg,#fff,hsla(20,42%,65%,0));background-repeat:repeat-x}.colorpicker .colorpicker-body .color-panel>.saturation>.value{background-image:linear-gradient(0deg,#000,hsla(20,42%,65%,0))}.colorpicker .colorpicker-body .color-panel>.saturation>.value>.drag-pointer{border:1px solid #fff;box-shadow:0 0 2px #0000000d}.colorpicker .colorpicker-body .control{padding:10px 0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker .colorpicker-body .control>.color,.colorpicker .colorpicker-body .control>.empty{background-color:#fff;border-radius:50%;box-sizing:border-box;height:30px;left:12px;position:absolute;top:14px;width:30px}.colorpicker .colorpicker-body .control>.color{border:1px solid rgba(0,0,0,.1)}.colorpicker .colorpicker-body .control>.hue{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:6px 16px;position:relative}.colorpicker .colorpicker-body .control>.hue>.hue-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control>.opacity{box-sizing:border-box;cursor:pointer;margin:0 0 0 42px;padding:3px 16px;position:relative}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{border-radius:3px;height:10px;position:relative;width:100%}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{border-radius:50%;cursor:pointer;height:12px;left:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker .colorpicker-body .control>.hue>.hue-container{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.colorpicker .colorpicker-body .control>.opacity>.opacity-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control>.opacity>.opacity-container>.color-bar{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .control>.empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px}.colorpicker .colorpicker-body .control .drag-bar,.colorpicker .colorpicker-body .control .drag-bar2{background-color:#fefefe;border:1px solid rgba(0,0,0,.05);box-shadow:2px 2px 2px #0003}.colorpicker .colorpicker-body .information{box-sizing:border-box;position:relative}.colorpicker .colorpicker-body .information>input{bottom:20px;box-sizing:border-box;height:20px;padding:0 0 0 2px;position:absolute;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.colorpicker .colorpicker-body .information>input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information.hex>.information-item.hex,.colorpicker .colorpicker-body .information.hsl>.information-item.hsl,.colorpicker .colorpicker-body .information.rgb>.information-item.rgb{display:flex}.colorpicker .colorpicker-body .information>.information-item{box-sizing:border-box;display:none;margin-right:40px;padding:0 5px 0 9px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field{box-sizing:border-box;display:block;flex:1;padding:3px 1px;position:relative}.colorpicker .colorpicker-body .information>.information-item>.input-field>.title{color:#a9a9a9;padding-top:2px;text-align:center}.colorpicker .colorpicker-body .information>.information-item>.input-field input{border:1px solid #cbcbcb;border-radius:2px;box-sizing:border-box;color:#333;height:21px;padding:3px;text-align:center;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;width:100%}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none}.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-inner-spin-button,.colorpicker .colorpicker-body .information>.information-item>.input-field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-l input[type=number],.colorpicker .colorpicker-body .information>.information-item>.input-field.hsl-s input[type=number]{padding-left:1px;padding-right:10px}.colorpicker .colorpicker-body .information>.information-item>.input-field .postfix{box-sizing:border-box;display:inline-block;height:21px;line-height:2;padding:2px;position:absolute;right:1px;text-align:center;top:2px}.colorpicker .colorpicker-body .information>.information-change{bottom:0;box-sizing:border-box;display:block;padding-top:5px;position:absolute;right:0;text-align:center;top:0;width:40px}.colorpicker .colorpicker-body .information>.information-change>.format-change-button{background:transparent;border:0;box-sizing:border-box;cursor:pointer;outline:none}.colorpicker .colorpicker-body .information>.title{color:#a3a3a3}.colorpicker .colorpicker-body .information>.input{color:#333}.colorpicker .colorpicker-body .colorsets{border-top:1px solid #e2e2e2}.colorpicker .colorpicker-body .colorsets>.menu{float:right;padding:10px 15px 10px 5px}.colorpicker .colorpicker-body .colorsets>.menu button{border:0;cursor:pointer;font-family:serif,sans-serif;font-weight:300;outline:none}.colorpicker .colorpicker-body .colorsets>.color-list{box-sizing:border-box;display:block;line-height:0;margin-right:30px;padding:10px 0 0 10px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item{background-size:contain;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-bottom:12px;margin-right:12px;overflow:hidden;position:relative;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .colorsets>.color-list .color-item:hover{transform:scale(1.2)}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .empty{background-color:transparent;background-color:#fff;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .color-item .color-view{border:1px solid rgba(0,0,0,.1);box-sizing:border-box;height:100%;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.colorpicker .colorpicker-body .colorsets>.color-list .add-color-item{color:#8e8e8e;cursor:pointer;display:inline-block;font-family:serif,sans-serif;font-weight:400;height:13px;line-height:1;margin-bottom:12px;margin-right:12px;text-align:center;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser{background-color:#00000080;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition:opacity .05s ease-out}.colorpicker .colorpicker-body .color-chooser.open{opacity:1;pointer-events:all}.colorpicker .colorpicker-body .color-chooser .color-chooser-container{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:120px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header{border-bottom:1px solid rgba(0,0,0,.2);box-sizing:border-box;display:flex;height:34px;left:0;padding:3px 0;position:absolute;right:0;top:0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .title{box-sizing:border-box;color:#000;flex:2;font-weight:700;margin:0;overflow:hidden;padding:5px 5px 5px 14px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-item-header .items{cursor:pointer;display:block;flex:1;height:100%;line-height:2;padding-right:10px;text-align:right}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list{bottom:0;left:0;overflow:auto;position:absolute;right:0;top:34px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item{border-bottom:1px solid rgba(0,0,0,.1);cursor:pointer;display:flex;padding:3px 0}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item:hover{background-color:#0000000d}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .title{box-sizing:border-box;color:#000;flex:2;font-weight:400;margin:0;overflow:hidden;padding:5px 5px 5px 14px;pointer-events:none;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items{cursor:pointer;display:block;flex:3;height:100%;line-height:1.6;pointer-events:none}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;background-size:contain;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;height:13px;margin-right:10px;overflow:hidden;vertical-align:middle;width:13px}.colorpicker .colorpicker-body .color-chooser .color-chooser-container .colorsets-list .colorsets-item .items .color-item .color-view{height:100%;margin:0;padding:0;pointer-events:none;width:100%}.colorpicker.sketch{border-radius:5px}.colorpicker.sketch>.colorpicker-body .color-panel{box-sizing:border-box;height:150px}.colorpicker.sketch>.colorpicker-body>.control{margin-top:5px;padding:0}.colorpicker.sketch>.colorpicker-body>.control>.color,.colorpicker.sketch>.colorpicker-body>.control>.empty{background-color:#fff;border-radius:100%;box-sizing:border-box;height:26px;left:auto;position:absolute;right:0;top:1px;width:26px}.colorpicker.sketch>.colorpicker-body>.control>.color{box-shadow:inset 0 0 1px #00000080}.colorpicker.sketch>.colorpicker-body>.control>.hue{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.hue>.hue-container{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control>.opacity{margin:0 32px 0 0;padding:2px 2px 2px 0;position:relative}.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container,.colorpicker.sketch>.colorpicker-body>.control>.opacity>.opacity-container .color-bar{border-radius:12px}.colorpicker.sketch>.colorpicker-body>.control .drag-bar,.colorpicker.sketch>.colorpicker-body>.control .drag-bar2{background-color:#fff;border:1px solid #fff;border-radius:50%;bottom:1px!important;box-shadow:0 0 1px #00000080;height:12px;left:0;top:50%;transform:translate(-50%) translateY(-50%);width:12px}.colorpicker.sketch>.colorpicker-body>.information{margin-top:5px}.colorpicker.sketch>.colorpicker-body>.information .information-change{display:none}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.rgb{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.rgb .information-item.hsl{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hex{display:inherit}.colorpicker.sketch>.colorpicker-body>.information.hex .information-item.hsl,.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.rgb{display:none!important}.colorpicker.sketch>.colorpicker-body>.information.hsl .information-item.hsl{display:inherit}.colorpicker.sketch>.colorpicker-body>.information .information-item{display:inline-flex!important;margin-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title{color:#000;cursor:pointer}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field>.title:hover{font-weight:700}.colorpicker.sketch>.colorpicker-body>.information .information-item>.input-field:last-child:not(:first-child){padding-right:0}.colorpicker.sketch>.colorpicker-body>.information .information-item.hex{padding-left:0;padding-right:0;width:70px}.colorpicker.sketch>.colorpicker-body>.information .information-item.rgb{padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.information .information-item.hsl{display:none;padding-left:0;padding-right:0;width:150px}.colorpicker.sketch>.colorpicker-body>.colorsets>.menu{display:none}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list{margin-right:0;padding-right:12px}.colorpicker.sketch>.colorpicker-body>.colorsets>.color-list .color-item{border-radius:3px;height:16px;margin-bottom:10px;margin-right:9px;width:16px}.colorsets-contextmenu{background-color:#ececec;border:1px solid #ccc;border-radius:6px;display:none;list-style:none;padding:4px 0;position:fixed}.colorsets-contextmenu.show{display:inline-block}.colorsets-contextmenu .elf--menu-item{cursor:default;padding:2px 20px}.colorsets-contextmenu .elf--menu-item:hover{background-color:#5ea3fb;color:#fff}.colorsets-contextmenu.small .elf--menu-item.small-hide{display:none}.elf-studio{--elf--editor-ruler-size:20px;bottom:0;box-sizing:border-box;font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,sans-serif;font-size:11px;margin:0;padding:0;right:0}.elf-studio *,.elf-studio :after,.elf-studio :before{-webkit-overflow-scrolling:touch;box-sizing:border-box}.elf-studio.ua-window .scrollbar::-webkit-scrollbar{background-color:#aaa;height:8px;width:5px}.elf-studio.ua-window .scrollbar::-webkit-scrollbar-thumb{background:#000}.elf-studio[data-theme=dark]{--elf--range-thumb-color:#228be6;--elf--range-track-color:#616161;--elf--range-thumb-border-color:rgba(0,0,0,.8);--elf--input-background-color:#343a40;--elf--input-inactive-color:#495057;--elf--input-border-color:#adb5bd;--elf--input-font-color:#f8f9fa;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#495057;--elf--selection-tool-border-color:#3a89f0;--elf--selected-color:#228be6;--elf--selected-color-2:#1864ab;--elf--selected-hover-color:#74c0fc;--elf--selected-border-color:#1c7ed6;--elf--layout-border-color:#212529;--elf--background-color:#343a40;--elf--header-background-color:#212529;--elf--selected-background-color:#535353;--elf--font-color:#f8f9fa;--elf--disabled-font-color:#e9ecef;--elf--menu-item-title-font-color:#e9ecef;--elf--selected-font-color:#f8f9fa;--elf--divider-color:#616161;--elf--property-border-color:#0b0b0b;--elf--property-title-background-color:#161616;--elf--property-background-color:#22282c;--elf--list-item-font-color:#fff;--elf--list-item-selected-color:#03a9f4;--elf--list-item-disable-font-color:#828282;--elf--popup-background-color:#343a40;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(61,61,61,.5);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#000;--elf--path-segment-stroke-color:#0bf;--elf--timeline-gauge-background-color:#ee4b66;--elf--timeline-gauge-handle-color:#fffaaf;--elf--timeline-row-selected-color:rgba(67,92,181,.4);--elf--timeline-property-add-background-color:#666;--elf--guide-line-color:#ca7976;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#435cb5;--elf--canvas-background-color:#d3d3d3;--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.214);--elf--rotate-x-border-color:#6868f7;--elf--rotate-y-border-color:#70c570;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#f8f9fa;--elf--tab-header-background-color:#212529;--elf--tab-font-color:#949494}.elf-studio[data-theme=light]{--elf--range-thumb-color:#609de2;--elf--range-track-color:#cfcfcf;--elf--range-thumb-border-color:#609de2;--elf--input-background-color:#fff;--elf--input-inactive-color:#f1f3f5;--elf--input-border-color:#ced4da;--elf--input-font-color:#333;--elf--input-sub-font-color:#7a7a7a;--elf--input-height:30px;--elf--input-font-size:11px;--elf--border-color:#868e96;--elf--selection-tool-border-color:#3a89f0;--elf--layout-border-color:#dee2e6;--elf--selected-color:#66baff;--elf--selected-color-2:#339af0;--elf--selected-hover-color:#d0ebff;--elf--selected-border-color:#609de2;--elf--background-color:#fff;--elf--header-background-color:#212529;--elf--selected-background-color:#d8d8d8;--elf--font-color:#333;--elf--disabled-font-color:#c1c1c1;--elf--menu-item-title-font-color:#f8f9fa;--elf--selected-font-color:#fff;--elf--divider-color:#cfcfcf;--elf--property-border-color:#e5e5e5;--elf--property-title-background-color:#fff;--elf--property-background-color:#fff;--elf--list-item-font-color:#000;--elf--list-item-selected-color:#609de2;--elf--list-item-disable-font-color:#a3a3a3;--elf--popup-background-color:#fff;--elf--popup-font-color:#ced4da;--elf--window-background-color:rgba(42,42,42,.478);--elf--path-background-color:hsla(0,0%,100%,.7);--elf--path-guide-color:#5c5c5c;--elf--path-segment-stroke-color:#b7b7b7;--elf--timeline-gauge-background-color:#435cb5;--elf--timeline-gauge-handle-color:#748ff1;--elf--timeline-row-selected-color:#609de2;--elf--timeline-property-add-background-color:#747474;--elf--guide-line-color:#66baff;--elf--guide-font-color:#fff;--elf--guide-line-rect-color:#36457a;--elf--canvas-background-color:hsla(0,0%,7%,.1);--elf--animation-item-background-color:#435cb5;--elf--grid-box-editor-button-background-color:#435cb5;--elf--drag-area-rect-border-color:rgba(62,168,255,.9);--elf--drag-area-rect-background-color:rgba(107,188,255,.5);--elf--rotate-x-border-color:#643ac7;--elf--rotate-y-border-color:#8bdf8b;--elf--tooltip-background-color:#212529;--elf--tooltip-font-color:#fff;--elf--tab-header-background-color:#f6fafc;--elf--tab-font-color:#adadad}.elf-studio{height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.elf-studio [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf-studio input[type=email],.elf-studio input[type=number],.elf-studio input[type=text],.elf-studio textarea{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);color:var(--elf--input-font-color);outline:none}.elf-studio select{background-color:var(--elf--input-background-color);border-radius:3px;color:var(--elf--font-color);line-height:1.6;padding:0 4px}.elf-studio button,.elf-studio select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;vertical-align:middle}.elf-studio button{background-color:transparent;border-width:0;color:var(--elf--button-front-color);display:inline-block;padding:0}.elf-studio button svg{height:100%;width:100%}.elf-studio input[type=file].embed-file-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--elf--background-color);display:inline-block;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .add-image-button{display:none}.elf-studio .icon svg,.elf-studio button svg,.elf-studio label svg{height:16px;width:16px}.elf-studio .icon svg circle,.elf-studio .icon svg ellipse,.elf-studio .icon svg line,.elf-studio .icon svg path,.elf-studio .icon svg polygon,.elf-studio .icon svg polyline,.elf-studio .icon svg rect,.elf-studio .icon svg text,.elf-studio .icon svg tspan,.elf-studio .icon svg use,.elf-studio button svg circle,.elf-studio button svg ellipse,.elf-studio button svg line,.elf-studio button svg path,.elf-studio button svg polygon,.elf-studio button svg polyline,.elf-studio button svg rect,.elf-studio button svg text,.elf-studio button svg tspan,.elf-studio button svg use,.elf-studio label svg circle,.elf-studio label svg ellipse,.elf-studio label svg line,.elf-studio label svg path,.elf-studio label svg polygon,.elf-studio label svg polyline,.elf-studio label svg rect,.elf-studio label svg text,.elf-studio label svg tspan,.elf-studio label svg use{fill:currentColor;stroke-width:0}.elf-studio .primary{background-color:var(--elf--selected-color);color:var(--elf--selected-text-color)}.elf-studio input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;margin:3px 0;width:100%}.elf-studio input[type=range]:focus{outline:none}.elf-studio input[type=range]::-moz-focus-outer{border:0}.elf-studio input[type=range]::-webkit-slider-runnable-track{background:var(--elf--range-track-color);border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--elf--range-thumb-color);border:1px solid var(--elf--range-thumb-border-color);border-radius:100%;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-webkit-slider-runnable-track{background:var(--elf--range-track-color)}.elf-studio input[type=range]::-moz-range-track{background:var(--elf--range-track-color);border-radius:10px;box-shadow:inset 0 1px 3px #0000001f,inset 0 1px 2px #0000001f;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-moz-range-thumb{background:var(--elf--range-thumb-color);border:1px solid #000;border-radius:20px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]::-ms-track{background:var(--elf--range-track-color);border:1px solid #000;border-radius:10px;cursor:pointer;height:2px;width:100%}.elf-studio input[type=range]::-ms-fill-lower{box-shadow:0 0 #000,0 0 #0d0d0d}.elf-studio input[type=range]::-ms-fill-lower,.elf-studio input[type=range]::-ms-fill-upper{background:var(--elf--range-thumb-color);border:0 solid #010101;border-radius:0}.elf-studio input[type=range]::-ms-thumb{background:var(--elf--range-thumb-color);border-radius:9px;cursor:pointer;height:12px;margin-top:-5px;width:12px}.elf-studio input[type=range]:focus::-ms-fill-lower,.elf-studio input[type=range]:focus::-ms-fill-upper{background:var(--elf--range-thumb-color)}.elf-studio .colorpicker-layer .colorpicker{background-color:transparent;border:0;box-shadow:none;width:100%}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body{width:240px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .color-item{height:20px;margin:2px!important;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .color-list .current-color-sets .add-color-item{height:20px;margin:0!important;padding:3px;width:20px}.elf-studio .colorpicker-layer .colorpicker .colorpicker-body .wheel{background-color:transparent;border:0}.elf-studio .icons-group{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(6,40px);max-height:200px;overflow:auto}.elf-studio .icons-group .icon-item{display:inline-block;margin-bottom:2px;margin-right:2px;width:40px}.elf-studio .icons-group .icon-item .title{word-wrap:break-word;color:var(--elf--list-item-font-color);display:block;line-height:1;margin-top:5px;text-align:left;word-break:break-all}.elf-studio .icons-group .icon-item .icon-svg{background-color:var(--elf--input-background-color);border-radius:4px;box-sizing:border-box;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding:8px;width:40px}.elf-studio .icons-group .icon-item .icon-svg>svg{height:100%;width:100%}.elf-studio .icons-group .icon-item .icon-svg:hover{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf-studio [data-tooltip]{position:relative}.elf-studio [data-tooltip]:hover:after{opacity:1}.elf-studio [data-tooltip][data-tooltip-dy]:after{top:170%}.elf-studio [data-tooltip]:after{background-color:var(--elf--tooltip-background-color);border:1px solid var(--elf--border-color);border-radius:2px;box-sizing:border-box;color:var(--elf--tooltip-font-color);content:attr(data-tooltip);display:inline-block;font-size:11px;font-weight:400;left:50%;line-height:1.6;opacity:0;padding:4px 5px;pointer-events:none;position:absolute;right:auto;text-align:center;top:110%;transform:translate(-50%);transition:all .1s linear;white-space:nowrap;z-index:10000000}.elf-studio [data-tooltip][data-direction=right]:after{left:120%;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=left]:after{position:absolute;right:120%;top:50%;transform:translateY(-50%)}.elf-studio [data-tooltip][data-direction=bottom]:after{left:50%;position:absolute;right:auto;top:var(--elf--toggle-checkbox-tooltip-bottom-top,100%);transform:translate(-50%)}.elf-studio [data-tooltip][data-direction=top]:after{left:50%;position:absolute;right:auto;top:var(----elf--toggle-checkbox-tooltip-top,0);transform:translate(-50%) translateY(-150%)}.elf-studio [data-tooltip][data-direction="top left"]:after{left:0;position:absolute;right:auto;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="top right"]:after{left:auto;position:absolute;right:0;top:0;transform:translateY(-150%)}.elf-studio [data-tooltip][data-direction="bottom right"]:after{left:auto;position:absolute;right:0;top:110%;transform:translate(0)}.elf-studio .animation-selector{grid-column-gap:5px;display:grid;grid-template-columns:100px 1fr 30px;width:100%}.elf-studio .animation-selector .timeline-object{display:inline-block}.elf-studio .animation-selector .timeline-object.selected{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-value-area{background-color:var(--elf--background-color);border-left:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;position:absolute;right:0;top:0;width:260px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding:0 20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content.padding-zero{padding-top:0}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input{padding-top:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area{display:inline-block;height:24px;position:relative;vertical-align:middle;width:120px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area>input{box-sizing:border-box;height:100%;padding:2px;width:100%}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .offset-input .input-area:after{bottom:100%;box-sizing:border-box;color:var(--elf--input-sub-font-color);content:"Hour:Minute:Second:Frame";left:0;padding-left:2px;position:absolute}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title,.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title>.tools{display:none}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2{display:block;text-align:right}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2 label{cursor:pointer}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item>.title-2:hover{color:var(--elf--selected-color)}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button{text-align:right;width:100px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .css-property-item .background-image-editor .tools button svg{vertical-align:middle;width:16px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content .title{color:var(--elf--font-color)}.elf-studio .timeline-value-area .timeline-value-editor .value{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;margin:0 auto;padding:5px;width:228px}.elf-studio .timeline-value-area .timeline-value-editor .value label{overflow:hidden;text-overflow:ellipsis}.elf-studio .timeline-value-area .timeline-value-editor .value .editor-area{min-height:20px}.elf-studio .timeline-value-area .timeline-value-editor .tab-content{padding-top:10px}.elf-studio .timeline-animation-area{background-color:var(--elf--background-color);border-right:1px solid var(--elf--border-color);border-top:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:200px}.elf-studio .timeline-animation-area .property{padding:0}.elf-studio .timeline-animation-area .property-title{height:39px!important;padding-bottom:0;padding-top:0}.elf-studio .timeline-animation-area .property-title label{padding-left:10px}.elf-studio .timeline-animation-area .property-body{padding:0!important}.elf-studio .timeline-area{bottom:0;left:200px;position:absolute;right:260px;top:0}.elf-studio .timeline-area .timeline-header{border-top:1px solid var(--elf--border-color);height:40px;left:0;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar{border-bottom:1px solid var(--elf--border-color);border-right:1px solid var(--elf--border-color);bottom:0;left:0;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar{padding:10px 5px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row{grid-column-gap:5px;display:grid;grid-template-columns:50px 1fr;margin-bottom:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row label{padding:2px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .row .input input{min-width:50px}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons{display:flex}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="0.5"] [data-value="0.5"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="1"] [data-value="1"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="2"] [data-value="2"],.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons[data-selected-speed="3"] [data-value="3"]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-header .timeline-object-toolbar .timeline-top-toolbar .play-buttons button{border:1px solid var(--elf--border-color);height:auto;min-width:50px;padding:2px 10px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar{bottom:0;left:270px;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration{height:5px;left:0;position:absolute;right:0;top:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-left{background-color:var(--elf--border-color);height:100%;left:15px;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-handle-right{background-color:var(--elf--border-color);height:100%;position:absolute;right:15px;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider{background-color:var(--elf--border-color);height:100%;left:10px;position:absolute;right:10px;top:0}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .start{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;transform:translate(-100%);width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .end{background-color:var(--elf--timeline-gauge-handle-color);cursor:ew-resize;height:100%;left:100%;position:absolute;top:0;width:5px}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view .time-duration .duration-slider .gauge{background-color:var(--elf--timeline-gauge-background-color);cursor:ew-resize;height:100%;left:0;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-header .timeline-keyframe-toolbar .keyframe-time-view canvas{height:25px;left:0;position:absolute;top:15px;width:100%}.elf-studio .timeline-area .timeline-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf-studio .timeline-area .timeline-body .timeline-object-area{border-right:1px solid var(--elf--border-color);bottom:0;left:0;overflow:auto;position:absolute;top:0;width:270px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer .icon svg{transform:rotate(0)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object.collapsed .timeline-object-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);color:var(--elf--font-color);display:grid;grid-template-columns:20px 1fr 50px;height:24px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row[data-selected=true]{background-color:var(--elf--timeline-row-selected-color);color:var(--elf--selected-font-color)}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value{padding:5px 0;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .current-value input{vertical-align:middle;width:100%}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon{padding-top:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .icon svg{height:16px;transform:rotate(90deg);transition:transform .2s ease;width:16px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .title{color:var(--elf--font-color);cursor:pointer;padding-top:5px;vertical-align:middle}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools{padding-top:3px;text-align:right}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools>*{margin-right:5px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row .tools .empty{margin-right:0}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property{grid-template-columns:20px 1fr .8fr 50px;overflow:hidden}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .title{padding-left:10px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add{background-color:var(--elf--border-color);box-shadow:0 0 0 1px var(--elf--border-color);cursor:pointer;display:inline-block;height:7px;transform:translate(-4px) translateY(0) rotate(45deg);vertical-align:middle;width:7px}.elf-studio .timeline-area .timeline-body .timeline-object-area .timeline-object-list .timeline-object .timeline-object-row.layer-property .tools button.add:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 2px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view{bottom:0;left:270px;pointer-events:none;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .keyframe-time-grid-view canvas{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area{bottom:0;left:270px;overflow:auto;position:absolute;right:0;top:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container{min-height:100%;outline:none;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-container .drag-area{background-color:#3585bdb3;border:1px solid #7db4db;height:0;left:-10000px;pointer-events:none;position:absolute;right:-10000px;width:0}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe.collapsed .timeline-keyframe-row.layer-property{display:none}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row{border-bottom:1px solid var(--elf--border-color);height:24px;position:relative}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe{background-color:rgba(var(--elf--border-color),.5);display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow{display:inline-block;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset{background-color:var(--elf--background-color);border:1px solid var(--elf--selected-color);cursor:ew-resize;display:inline-block;height:8px;pointer-events:all;position:absolute;top:50%;transform:translateY(-50%) translate(-50%) rotate(45deg);width:8px}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-shadow .offset[data-selected=true]{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back{display:inline-block;height:100%;position:absolute}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .offset-line{background-color:var(--elf--selected-color);display:inline-block;height:1px;position:absolute;top:50%;transform:translateY(-52%)}.elf-studio .timeline-area .timeline-body .timeline-keyframe-area .timeline-keyframe-list .timeline-keyframe .timeline-keyframe-row .keyframe-back .sub-offset{background-color:#0bc4e4;display:inline-block;height:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px}.elf-studio .timeline-play-control{grid-column-gap:5px;display:grid;grid-template-columns:188px 120px 120px 1fr;text-align:left}.elf-studio .timeline-play-control .speed-number{position:relative}.elf-studio .timeline-play-control .speed-number:after{content:"X";display:inline-block;position:absolute;right:14px;top:1px}.elf-studio .timeline-play-control .speed-number input{width:100%}.elf-studio .timeline-play-control label{color:var(--elf--font-color);padding-right:10px;vertical-align:middle}.elf-studio .timeline-play-control label svg{height:16px;vertical-align:middle;width:16px}.elf-studio .timeline-play-control .input{vertical-align:middle}.elf-studio .timeline-play-control .input input{height:20px;vertical-align:middle;width:100%}.elf-studio .timeline-play-control .row{display:flex}.elf-studio .timeline-play-control .row:first-child{text-align:center}.elf-studio .timeline-play-control button{display:inline-block;height:24px;vertical-align:middle;width:24px}.elf-studio .timeline-play-control button.play{color:var(--elf--selected-color)}.elf-studio .timeline-play-control button.pause{color:#6677d8;display:none}.elf-studio .timeline-play-control .play-buttons[data-status=play] .pause{display:inline-block}.elf-studio .timeline-play-control .play-buttons[data-status=play] .play{display:none}.elf-studio .timeline-play-control .play-buttons[data-status=pause] .play{display:inline-block}.elf-studio .timeline-play-control .direction-buttons{display:flex;padding-top:2px}.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate-reverse] [data-value=alternate-reverse],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=alternate] [data-value=alternate],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=normal] [data-value=normal],.elf-studio .timeline-play-control .direction-buttons[data-selected-direction=reverse] [data-value=reverse]{background-color:var(--elf--selected-background-color);color:var(--elf--selected-color)}.elf-studio .timeline-play-control .direction-buttons button{border-radius:3px;height:20px;margin-right:5px;width:20px}.elf-studio .keyframe-time-control .time-manager{grid-column-gap:0;display:grid;grid-template-columns:20px 90px 70px 84px 10px}.elf-studio .keyframe-time-control .time-manager button{color:var(--elf--font-color)}.elf-studio .keyframe-time-control .time-manager button svg path{fill:currentColor}.elf-studio .keyframe-time-control .time-manager label{color:var(--elf--font-color);padding-right:0}.elf-studio .keyframe-time-control .time-manager label svg{height:16px;width:16px}.elf-studio .keyframe-time-control input[type=text]{width:80px}.elf-studio .logo-item{align-items:center;display:flex;flex-direction:row;justify-content:center}.elf-studio .logo-item label.logo{background-image:url(/assets/icon128.5ba89d6d.png);background-size:contain;border-radius:2px;display:inline-block;height:30px;width:30px}.elf-studio .feature-control.inspector{color:var(--elf--font-color);height:100%;position:relative}.elf-studio .feature-control.inspector>div{height:100%;position:relative}.elf-studio .feature-control.inspector>div .empty{height:100px}.elf-studio .feature-control.object-list{border-right:1px solid var(--elf--border-color);box-sizing:border-box;height:100%;position:relative}.elf-studio .feature-control.object-list .property{border:0;height:100%;margin:0;padding:0}.elf-studio .feature-control.object-list .property .property-body{padding:0}.elf-studio .feature-control .layer-tab{bottom:0;left:0;position:absolute;right:0;top:0}.elf-studio .feature-control .layer-tab .project-content>div{left:5px;position:absolute;right:5px}.elf-studio .feature-control .layer-tab .project-content>div:first-child{height:150px;top:0}.elf-studio .feature-control .layer-tab .project-content>div:not(:first-child){border-top:1px solid var(--elf--border-color)}.elf-studio .feature-control .layer-tab .project-content>div:last-child{bottom:0;height:auto!important;top:150px}.elf-studio .feature-control .layer-tab .object-items{height:100%;width:100%}.elf-studio .feature-control .layer-tab .object-items>div{height:100%;position:relative}.elf-studio .feature-control .layer-tab .assets{padding:3px}.elf-studio .feature-control .layer-tab .assets .property{height:auto}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--page-subeditor{display:inline-block;position:relative}.elf--button{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--button.has-label{grid-column-gap:2px;grid-template-columns:64px 1fr}.elf--button.has-label label{font-size:var(--elf--input-font-size);overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--button .area{display:block;height:100%}.elf--button .area button{background-color:var(--elf--input-inactive-color);border:0;border-radius:4px;color:var(--elf--input-font-color);display:inline-block;height:100%;width:100%}.elf--button .area button:hover{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button{height:var(--elf--input-height);width:var(--elf--input-height)}.elf--toggle-button.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-button.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-button .area{background-color:var(--elf--input-inactive-color);display:block;height:100%;position:relative}.elf--toggle-button .area>div{display:none;height:100%;position:relative;width:100%}.elf--toggle-button .area>div.visible{display:inline-block}.elf--toggle-button .area>div.checked{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toggle-button .area button{box-sizing:border-box;color:var(--elf--input-font-color);height:100%;padding:2px 4px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-button .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.elf--toggle-button .area button svg{height:20px;width:20px}.elf--toggle-checkbox{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);overflow:hidden}.elf--toggle-checkbox:hover,.elf--toggle-checkbox:hover .area,.elf--toggle-checkbox:hover .area>*{border-color:var(--elf--input-border-color)}.elf--toggle-checkbox.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--toggle-checkbox.has-label label{overflow:hidden;padding:7px 0 2px 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--toggle-checkbox .area{--selected-button-size:50%;--selected-button-position:0%;--unit-count:2;display:block;display:grid;grid-template-columns:repeat(var(--unit-count),1fr);height:100%;position:relative}.elf--toggle-checkbox .area>div{border-right:1px solid transparent;display:inline-block;position:relative;width:100%}.elf--toggle-checkbox .area>div:last-child{border-right:0}.elf--toggle-checkbox .area:before{background-color:var(--elf--selected-color-2);box-shadow:0 0 #0000001a;content:"";display:block;height:100%;left:var(--selected-button-position);pointer-events:none;position:absolute;top:0;transition:all .2s ease-in-out;width:var(--selected-button-size);z-index:0}.elf--toggle-checkbox .area>*{z-index:1}.elf--toggle-checkbox .area button{box-sizing:border-box;color:var(--elf--font-color);display:inline-block;font-size:var(--elf--input-font-size);height:100%;padding:4px 8px;text-align:center;vertical-align:middle;width:100%;z-index:1}.elf--toggle-checkbox .area button:hover:not(.checked){background-color:var(--elf--input-background-color)}.elf--toggle-checkbox .area button.checked{color:var(--elf--selected-font-color);font-weight:700}.tab{bottom:0;color:var(--elf--font-color);left:0;position:absolute;right:0;top:0}.tab.number-tab.padding-5 .tab-content{padding:5px}.tab.number-tab.padding-10 .tab-content{padding:10px}.tab.number-tab.side-tab.side-tab-left>.tab-header{background-color:var(--elf--header-background-color);bottom:0;box-sizing:border-box;display:flex;flex-direction:column;height:auto;left:0;overflow:visible;padding:0;position:absolute;text-align:center;top:0;width:60px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item{align-items:center;background-color:var(--elf--header-background-color)!important;border-bottom:0!important;border:0;display:flex;flex:none;height:50px;justify-content:center;margin:0 auto;position:relative;width:60px;width:100%}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:before{border-radius:4px;content:"";display:inline-block;height:32px;left:50%;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:32px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item:hover label{color:var(--elf--selected-font-color)!important}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected{color:var(--elf--selected-font-color);margin-left:0}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected:before{background-color:var(--elf--selected-color-2)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.selected label svg{color:var(--elf--selected-font-color)}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item.extra-item{flex:1 1 auto;overflow:auto}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label{display:inline-block;height:24px;left:50%;padding:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:24px;z-index:1}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg{height:24px;width:24px}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg path,.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item label svg use{fill:currentColor}.tab.number-tab.side-tab.side-tab-left>.tab-header>.tab-item .title{color:var(--elf--selected-font-color);overflow:hidden;padding-bottom:5px;text-overflow:ellipsis;white-space:wrap;word-break:break-all}.tab.number-tab.side-tab.side-tab-left>.tab-body{bottom:0;left:60px;right:0;top:0}.tab.number-tab>.tab-content{display:none}.tab.number-tab>.tab-content.selected{display:block}.tab.number-tab>.tab-body{top:34px}.tab>.tab-header{box-sizing:border-box;display:flex;height:40px;left:0;padding:0 10px;position:absolute;right:0;z-index:1}.tab>.tab-header.no-border>.tab-item{border:0!important}.tab>.tab-header>.tab-item{cursor:pointer;gap:10px;height:100%;margin-right:10px;padding:0;position:relative;text-align:center}.tab>.tab-header>.tab-item.selected label,.tab>.tab-header>.tab-item:hover label{color:var(--elf--font-color)}.tab>.tab-header>.tab-item.selected label{font-weight:600}.tab>.tab-header>.tab-item label{box-sizing:border-box;color:var(--elf--tab-font-color);display:inline-block;height:100%;line-height:24px;padding:12px 0;pointer-events:none;vertical-align:middle}.tab>.tab-header>.tab-item:first-child:hover label{left:10px}.tab>.tab-header>.tab-item:last-child:hover label{left:auto;right:10px}.tab>.tab-header>.tab-item:hover label{opacity:1}.tab>.tab-body{bottom:0;left:0;position:absolute;right:0;top:40px}.tab>.tab-body.no-border{border:0}.tab>.tab-body>.tab-content{bottom:0;display:none;left:0;overflow:auto;position:absolute;right:0;top:0}.tab>.tab-body>.tab-content.selected{display:block}.tab>.tab-body>.tab-content.selected.flex{display:flex;flex-direction:column}.tab>.tab-body>.tab-content .fixed{flex:none}.tab>.tab-body>.tab-content .scroll{flex:1 1 auto;overflow:auto;position:relative}.elf--blank-tool-bar{background-color:var(--elf--header-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%;justify-content:space-between}.elf--blank-tool-bar>*{display:flex}.elf--blank-tool-bar>*>*{align-items:center;display:inline-flex;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--blank-tool-bar>*>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--blank-tool-bar>*>.dropdown-menu>button,.elf--blank-tool-bar>*>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--blank-tool-bar>*>.dropdown-menu>button .icon svg,.elf--blank-tool-bar>*>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--blank-tool-bar>*>.dropdown-menu>button.elf--menu-item.selected,.elf--blank-tool-bar>*>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--blank-tool-bar>*>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--blank-tool-bar>*>.elf--logo-area:hover,.elf--blank-tool-bar>*>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--toolbar-menu-item{align-items:center;display:flex;height:100%;justify-content:center;padding:10px!important;text-align:left;width:auto}.elf--toolbar-menu-item>.icon{display:inline-block;height:24px;width:24px}.elf--toolbar-menu-item>.icon svg{stroke:var(--elf--selected-font-color);height:24px;width:24px}.elf--toolbar-menu-item:hover{background-color:#000}.elf--toolbar-menu-item[data-selected=true]{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--toolbar-renderer{display:flex;height:100%}.elf--toolbar-renderer>*{align-items:center;height:100%;justify-content:center;text-align:center;width:auto}.dropdown-menu{--elf--dropdown-menu-width:240px;--elf--dropdown-menu-dy:0px;align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:0 4px;position:relative}.dropdown-menu .dropdown-menu-item-list{border:1px solid var(--elf--border-color)}.dropdown-menu>.label{font-size:13px}.dropdown-menu>.icon{align-items:center;cursor:pointer;display:flex;justify-content:center;padding:0 4px 0 8px;width:34px}.dropdown-menu>.icon:empty{display:none}.dropdown-menu>.icon svg{height:24px;pointer-events:none;width:24px}.dropdown-menu>.icon svg path{stroke-width:2;stroke:transparent;fill:none}.dropdown-menu .dropdown-arrow{fill:var(--elf--selected-font-color)}.dropdown-menu .dropdown-arrow:hover svg{transform:translateY(2px)}.dropdown-menu .dropdown-arrow svg{transition:all .1s ease-in-out;width:14px}.dropdown-menu[data-selected=true]{background-color:var(--elf--selected-color-2)}.dropdown-menu.opened:not([data-selected=true]),.dropdown-menu:hover:not([data-selected=true]){background-color:#000}.dropdown-menu.opened:not([data-selected=true]) .dropdown-arrow svg,.dropdown-menu:hover:not([data-selected=true]) .dropdown-arrow svg{transform:translateY(2px)}.dropdown-menu.opened>.dropdown-menu-arrow,.dropdown-menu.opened>ul{display:block}.dropdown-menu li{align-items:center;color:var(--elf--font-color);-moz-column-gap:4px;column-gap:4px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;position:relative}.dropdown-menu li .icon{flex:none}.dropdown-menu li .menu-item-text{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;vertical-align:middle}.dropdown-menu li .menu-item-text>*{line-height:1.6;vertical-align:middle}.dropdown-menu li .menu-item-text .shortcut{border:1px solid var(--elf--border-color);border-radius:2px;font-size:13px;padding:0 4px}.dropdown-menu li .menu-item-text .shortcut:empty{display:none}.dropdown-menu li>*{color:var(--elf--font-color);text-decoration:none}.dropdown-menu li[disabled]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu li[disabled]>*{color:var(--elf--disabled-font-color);pointer-events:none}.dropdown-menu li svg{color:var(--elf--border-color);height:20px;vertical-align:middle;width:20px}.dropdown-menu li svg path,.dropdown-menu li svg use{fill:currentColor}.dropdown-menu li.dropdown-divider{background-color:var(--elf--layout-border-color);box-sizing:border-box;display:block;height:1px;line-height:0px;margin-bottom:4px;margin-top:4px;padding:0}.dropdown-menu li.dropdown-divider>*{pointer-events:all}.dropdown-menu li.checkbox{align-items:center;display:flex}.dropdown-menu li.checkbox *{vertical-align:middle}.dropdown-menu li.custom{display:block}.dropdown-menu[data-direction=right]>ul{left:auto;right:0}.dropdown-menu[data-direction=right]>.dropdown-menu-arrow{left:auto;right:50%;transform:translate(50%) scale(1.5)}.dropdown-menu[data-direction=right] .dropdown-menu-list>ul{left:calc(-100% - 2px)}.dropdown-menu[data-direction=center]>ul{left:50%;transform:translate(-50%)}.dropdown-menu[data-direction=center]>.dropdown-menu-arrow{left:50%;transform:translate(-50%) scale(1.5)}.dropdown-menu.flat{padding:0}.dropdown-menu.flat>ul{position:relative;width:100%}.dropdown-menu ul{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);display:none;left:0;list-style-type:none;margin:0;padding:4px 0;position:absolute;top:calc(100% + 5px);width:var(--elf--dropdown-menu-width)}.dropdown-menu .dropdown-menu-list>ul{top:-11px}.dropdown-menu .dropdown-menu-arrow{box-sizing:border-box;display:none;height:6px;left:50%;position:absolute;top:calc(100% - 6px);transform:translate(-50%) scale(1.5);width:12px}.dropdown-menu .dropdown-menu-arrow svg{height:6px;width:8px}.dropdown-menu .dropdown-menu-arrow svg path,.dropdown-menu .dropdown-menu-arrow svg use{fill:var(--elf--background-color);stroke:var(--elf--border-color)}.dropdown-menu ul ul{left:100%;position:absolute;top:0}.dropdown-menu li:hover{color:var(--elf--font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider){background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>div>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>label>* svg,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>*,.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>span>* svg{color:var(--elf--selected-font-color)}.dropdown-menu li:hover:not([disabled]):not(.dropdown-divider)>.menu-item-text .shortcut{border-color:var(--elf--selected-font-color)}.dropdown-menu li:hover>ul{display:block}.blank-editor[data-design-mode=item] .layout-middle{bottom:0!important}.blank-editor[data-design-mode=item] .elf--status-bar{display:none!important}.blank-editor .layout-main{background-color:var(--elf--header-background-color);bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.blank-editor .layout-main .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.blank-editor .layout-main .layout-middle{background-color:var(--elf--background-color);box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.blank-editor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px;z-index:1}.blank-editor .layout-main .layout-middle>.splitter.selected,.blank-editor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.blank-editor .layout-main .layout-middle>.toggleLeft{left:340px}.blank-editor .layout-main .layout-middle>.toggleRight{right:280px}.blank-editor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:block;display:flex;flex:none;flex-direction:column;order:1;position:relative;width:340px}.blank-editor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:block;display:flex;flex:none;flex-direction:column;order:3;overflow:auto;position:relative;width:280px;z-index:100}.blank-editor .layout-main .layout-middle .layout-body{display:block;flex:1 1 auto;height:100%;order:2;position:relative}.elf--select-editor{grid-column-gap:4px;border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);position:relative}.elf--select-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--select-editor:hover:not(.focused):not(.drag) .selected-value{display:grid;grid-template-columns:1fr 20px}.elf--select-editor.compact select{opacity:1}.elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:var(--elf--input-font-color);height:24px;opacity:0;vertical-align:middle;width:100%}.elf--select-editor .selected-value{background-color:var(--elf--input-background-color);box-sizing:border-box;color:var(--elf--input-font-color);display:flex;height:100%;left:0;line-height:2;padding:0 2px;pointer-events:none;position:absolute;right:0;top:0}.elf--select-editor .selected-value svg{fill:currentColor;height:16px;width:16px}.elf--select-editor .selected-value .expand{align-items:center;box-sizing:border-box;display:flex;justify-content:flex-start;vertical-align:middle}.elf--select-editor .selected-value .value{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap}.elf--select-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--select-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--select-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 4px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-editor.has-label label svg{height:20px;width:20px}.elf--select-editor.has-label .editor-view{position:relative}.elf--select-editor.has-label .selected-value{height:100%;position:absolute;text-align:left}.elf--select-editor.has-label .selected-value select{height:24px;width:100%}.elf--box-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--box-shadow-editor .label{height:20px;margin-top:2px}.elf--box-shadow-editor .label.hide{display:none}.elf--box-shadow-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--box-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--box-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--box-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr 30px;text-align:center}.elf--box-shadow-editor .shadow-item .shadow-content{display:grid;grid-template-columns:60px 1fr 1fr;grid-template-rows:auto}.elf--box-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--box-shadow-editor .shadow-item.desc{color:var(--elf--font-color)}.elf--box-shadow-editor .shadow-item.desc .color{visibility:hidden}.elf--box-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--box-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--color-assets-editor{margin-top:10px;padding:4px 0}.elf--color-assets-editor .color-assets-head{grid-column-gap:5px;display:grid;grid-template-columns:1fr}.elf--color-assets-editor .color-assets-head label{display:inline-block;line-height:1.5;padding:4px 0;vertical-align:middle}.elf--color-assets-editor .color-list{grid-column-gap:10px;grid-row-gap:10px;display:grid;grid-template-columns:repeat(8,1fr);margin-top:10px}.elf--color-assets-editor .color-list .color-item{border-radius:4px;box-shadow:0 0 0 1px #ffffff1a;cursor:pointer;display:inline-block;height:16px;overflow:hidden;width:16px}.elf--color-assets-editor .color-list .color-item:hover{transform:scale(1.2)}.elf--color-assets-editor .color-list .color-item .preview,.elf--color-assets-editor .color-list .color-item .preview .color-view{height:100%;width:100%}.elf--color-single-editor{height:30px;text-align:center;width:100%}.elf--color-single-editor .preview{height:100%}.elf--color-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:1px solid var(--elf--input-border-color);height:100%}.elf--color-single-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.elf--color-view-editor{border:1px solid transparent;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);text-align:center}.elf--color-view-editor input{outline:none}.elf--color-view-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--color-view-editor.focused .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--color-view-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--color-view-editor.has-label{grid-template-columns:70px 1fr}.elf--color-view-editor.has-label.compact{grid-template-columns:40px 1fr}.elf--color-view-editor.has-label.compact .color-code{grid-template-columns:26px 1fr 40px}.elf--color-view-editor.has-label label{line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--color-view-editor.mini .color-input{display:none}.elf--color-view-editor.mini .color-code{grid-template-columns:26px 50px}.elf--color-view-editor .color-code{grid-column-gap:2px;border:1px solid transparent;border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:26px 1fr 50px;overflow:hidden;text-transform:uppercase;vertical-align:middle}.elf--color-view-editor .color-code .preview{align-items:center;background-color:transparent;border-radius:2px;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--color-view-editor .color-code .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--input-border-color);box-sizing:border-box;display:grid;grid-template-columns:1fr 1fr;height:20px;overflow:hidden;position:relative;vertical-align:middle;width:20px}.elf--color-view-editor .color-code .preview .mini-view .color-view{box-shadow:0 0 0 .1px var(--elf--input-border-color)}.elf--color-view-editor .color-code input{background-color:transparent;border:0;border-radius:3px;font-size:11px;height:100%;padding:0 3px;text-transform:uppercase;width:100%}.component-editor{--column-gap:2px;--row-gap:2px;padding-bottom:5px}.component-editor .component-folder.close>label>svg{transform:rotate(0)}.component-editor .component-folder.close>ul{display:none}.component-editor .component-folder>label{cursor:pointer}.component-editor .component-folder>label>svg{fill:var(--elf--font-color);height:16px;transform:rotate(90deg);transition:all .1s ease-in-out;vertical-align:middle;width:16px}.component-editor .component-folder>ul{list-style:none;margin:0;padding:0}.component-editor .column{grid-column-gap:var(--column-gap);grid-row-gap:2px;display:grid;grid-template-columns:1fr}.component-editor .column .column-item{align-items:stretch;display:flex;justify-content:stretch}.component-editor .column .column-item>*{width:100%}.component-editor .column .column-item>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .column-1-1{grid-template-columns:1fr 1fr}.component-editor .column-1-1-1{grid-template-columns:1fr 1fr 1fr}.component-editor .column-1-2{grid-template-columns:1fr 2fr}.component-editor .column-1-2-3{grid-template-columns:1fr 3fr}.component-editor .column-1-1-1-1{grid-template-columns:1fr 1fr 1fr 1fr}.component-editor .column-2{grid-template-columns:1fr 1fr}.component-editor .column-2-1{grid-template-columns:2fr 1fr}.component-editor .column-2-1-1{grid-template-columns:2fr 1fr 1fr}.component-editor .column-3-1{grid-template-columns:3fr 1fr}.component-editor .column-3-1-1{grid-template-columns:3fr 1fr 1fr}.component-editor .column-3-2-1{grid-template-columns:3fr 2fr 1fr}.component-editor>label{align-items:center;display:flex;justify-content:flex-start}.component-editor .component-item{margin-bottom:5px}.elf--css-property-editor{display:grid;grid-template-columns:1fr!important;margin-bottom:5px;margin-top:10px}.elf--css-property-editor.hide-refresh .css-property-item .title-2,.elf--css-property-editor.hide-title .css-property-item>.title label,.elf--css-property-editor.hide-title>.title{display:none}.elf--css-property-editor .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--css-property-editor .title .tools{text-align:right}.elf--css-property-editor .title .tools select{display:inline-block;width:130px!important}.elf--css-property-editor>.title-2{display:none;text-align:right}.elf--css-property-editor .css-property-item{border:1px solid var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;margin-top:5px;padding:2px}.elf--css-property-editor .css-property-item>.title{background-color:transparent;border-radius:3px;color:var(--elf--selected-color);font-weight:900;grid-template-columns:1fr 30px;margin-bottom:2px;padding:3px 0}.elf--css-property-editor .css-property-item .value-editor{padding:2px}.elf--css-property-editor .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--css-property-editor .input.grid-1{grid-template-columns:1fr}.elf--css-property-editor .input.grid-2{grid-template-columns:3fr 1fr}.elf--cubic-bezier-editor{height:200px;margin:0 auto;position:relative;width:220px}.elf--cubic-bezier-editor .bezier{background-color:var(--elf--background-color);box-shadow:0 0 0 1px var(--elf--border-color);height:150px;left:60px;position:absolute;top:30px;width:150px}.elf--cubic-bezier-editor .bezier .bezier-canvas{pointer-events:none}.elf--cubic-bezier-editor .bezier .control{bottom:0;left:0;position:absolute;right:0;top:0}.elf--cubic-bezier-editor .bezier .control .pointer1,.elf--cubic-bezier-editor .bezier .control .pointer2{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);border-radius:100%;cursor:pointer;height:9px;position:absolute;transform:translate(-50%) translateY(-50%);width:9px}.elf--cubic-bezier-editor .animation{height:20px;left:0;position:absolute;right:0;text-align:center;top:0}.elf--cubic-bezier-editor .animation .animation-canvas{cursor:pointer;height:100%;position:relative;width:100%}.elf--cubic-bezier-editor .item-list{bottom:20px;left:0;padding-right:0;position:absolute;top:30px;width:50px}.elf--cubic-bezier-editor .item-list[data-selected-value=ease-in] .item[data-bezier=ease-in],.elf--cubic-bezier-editor .item-list[data-selected-value=ease-out] .item[data-bezier=ease-out],.elf--cubic-bezier-editor .item-list[data-selected-value=ease] .item[data-bezier=ease]{background-color:var(--elf--selected-color)}.elf--cubic-bezier-editor .item-list .item{border-radius:2px;cursor:pointer;height:40px;margin-bottom:5px;overflow:hidden;position:relative;width:40px}.elf--cubic-bezier-editor .item-list .item:not(:first-child){border-top:0}.elf--cubic-bezier-editor .item-list .item.selected{background-color:#0ab}.elf--cubic-bezier-editor .item-list .item .item-canvas{background-color:#000;border-radius:2px;height:38px;left:1px;position:absolute;top:1px;width:38px}.elf--cubic-bezier-editor .predefined{bottom:0;display:grid;grid-template-columns:30px 1fr 30px;height:20px;left:0;position:absolute;right:0;text-align:center}.elf--cubic-bezier-editor .predefined .left,.elf--cubic-bezier-editor .predefined .right{color:var(--elf--font-color);cursor:pointer;font-weight:700;vertical-align:middle}.elf--cubic-bezier-editor .predefined .left svg path,.elf--cubic-bezier-editor .predefined .right svg path{fill:currentColor}.elf--cubic-bezier-editor .predefined .predefined-text{color:var(--elf--font-color);padding:4px;vertical-align:middle}.elf--direction-editor .direction-item{display:grid;grid-template-columns:62px 1fr}.elf--direction-editor .direction-item.full{grid-template-columns:1fr}.elf--direction-editor .radius-selector{display:grid;grid-template-columns:1fr 1fr}.elf--direction-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--direction-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--direction-editor .radius-selector button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;color:#ccc;cursor:pointer;display:inline-block;flex:none;height:20px;margin-right:2px;outline:none;padding:0;vertical-align:middle;width:20px}.elf--direction-editor .radius-selector button svg{height:100%;width:100%}.elf--filter-editor{padding:2px 0}.elf--filter-editor .label{height:20px;margin-top:2px}.elf--filter-editor .label.hide{display:none}.elf--filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--filter-editor .tools select{display:inline-block;width:100px!important}.elf--filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;padding:0 10px;width:100%}.elf--filter-editor .filter-list .filter-item{display:block;margin-top:5px}.elf--filter-editor .filter-list .filter-item:last-child{margin-bottom:5px}.elf--filter-editor .filter-list .filter-item>.title{display:grid;grid-template-columns:20px 1fr 30px}.elf--filter-editor .filter-list .filter-item>.title>.sub-title{align-items:center;display:flex;justify-content:flex-start}.elf--filter-editor .filter-list .filter-item>.title>label{align-items:center;cursor:move;display:flex;justify-content:center;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--filter-editor .filter-list .filter-item>.title .svg-filter-edit{cursor:pointer}.elf--filter-editor .filter-list .filter-item>.title .filter-menu{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:4px 0;text-align:right}.elf--filter-editor .filter-list .filter-item>.title .filter-menu:hover{background-color:var(--elf--input-inactive-color)}.elf--filter-editor .filter-list .filter-item .filter-ui-list{padding-left:20px;pointer-events:all}.elf--filter-editor .filter-list .filter-item .filter-ui{vertical-align:middle}.elf--filter-editor .filter-list .filter-item .filter-ui label{color:var(--elf--font-color)}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--gradient-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--gradient-editor .tools{padding:4px 0}.elf--gradient-editor [data-editor],.elf--gradient-editor[data-selected-editor=static-gradient]{display:none}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--gradient-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--gradient-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--gradient-editor[data-selected-editor=image-resource] .drag-pointer,.elf--gradient-editor[data-selected-editor=image-resource] .preset-position,.elf--gradient-editor[data-selected-editor=image-resource] .sub-editor,.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--gradient-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--gradient-editor .sub-editor{padding:0}.elf--gradient-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--gradient-editor .hue,.elf--gradient-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--gradient-editor .hue{pointer-events:none}.elf--gradient-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--gradient-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--gradient-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--gradient-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--gradient-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--gradient-editor .hue .step-list .step.selected .color-view span{display:block}.elf--gradient-editor .hue .step-list .step[data-cut=true] .arrow{top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--gradient-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--gradient-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--gradient-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--gradient-editor .hue .step-list .step .arrow,.elf--gradient-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--gradient-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--list-view-editor{display:grid;grid-template-columns:repeat(1,1fr);margin-top:10px;max-height:500px;position:relative}.elf--list-view-editor[data-column="0"]{grid-template-columns:repeat(0,1fr)}.elf--list-view-editor[data-column="1"]{grid-template-columns:repeat(1,1fr)}.elf--list-view-editor[data-column="2"]{grid-template-columns:repeat(2,1fr)}.elf--list-view-editor[data-column="3"]{grid-template-columns:repeat(3,1fr)}.elf--list-view-editor[data-column="4"]{grid-template-columns:repeat(4,1fr)}.elf--list-view-editor[data-column="5"]{grid-template-columns:repeat(5,1fr)}.elf--list-view-editor[data-column="6"]{grid-template-columns:repeat(6,1fr)}.elf--list-view-editor[data-column="7"]{grid-template-columns:repeat(7,1fr)}.elf--list-view-editor[data-column="8"]{grid-template-columns:repeat(8,1fr)}.elf--list-view-editor[data-column="9"]{grid-template-columns:repeat(9,1fr)}.elf--list-view-editor .list-view-item.selected{background-color:var(--elf--selected-color)}.elf--list-view-editor .list-view-item.selected svg circle,.elf--list-view-editor .list-view-item.selected svg path,.elf--list-view-editor .list-view-item.selected svg rect{fill:var(--elf--selected-font-color)}.elf--list-view-editor .list-view-item svg{width:100%}.elf--list-view-editor .list-view-item svg circle,.elf--list-view-editor .list-view-item svg path,.elf--list-view-editor .list-view-item svg rect{fill:var(--elf--font-color)}.elf--input-range-editor{border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--input-range-editor.disabled label{color:var(--elf--selected-color)}.elf--input-range-editor.disabled>*{pointer-events:none}.elf--input-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--input-range-editor.focused{box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--input-range-editor.drag,.elf--input-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--input-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--input-range-editor.has-label{grid-template-columns:70px 1fr}.elf--input-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--input-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--input-range-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr 40px}.elf--input-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--input-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 4px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--input-range-editor.has-label label svg{height:24px;vertical-align:middle;width:24px}.elf--input-range-editor.has-label.block{display:block}.elf--input-range-editor.has-label.block label{color:#000000b3;display:block}.elf--input-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--input-range-editor.is-removable .remove{display:inline-block}.elf--input-range-editor .remove,.elf--input-range-editor .type-button{display:none}.elf--input-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--input-range-editor .range--editor-type .area{border-radius:3px;display:grid;grid-template-columns:1fr 40px;height:100%}.elf--input-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--input-range-editor .range--editor-type .area input,.elf--input-range-editor .range--editor-type .area select{font-size:11px;width:100%}.elf--input-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;padding-left:2px;vertical-align:middle;width:100%}.elf--input-range-editor .range--editor-type .area .elf--select-editor{border-left:1px solid var(--elf--input-range-border-color);height:calc(var(--elf--input-height) - 2px)}.elf--input-range-editor .range--editor-type .area .elf--select-editor:hover{border:0!important;box-shadow:none!important}.elf--input-range-editor .range--editor-type .area .elf--select-editor select{background-color:transparent;border:0;color:var(--elf--input-sub-font-color);height:24px}.elf--input-range-editor .range--editor-type .area .unit{display:inline-block;line-height:2;vertical-align:middle}.elf--range--editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--range--editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--range--editor.has-label.compact{grid-template-columns:30px 1fr}.elf--range--editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--range--editor.has-label.block{height:auto}.elf--range--editor.has-label.block>label{display:block}.elf--range--editor.has-label label{overflow:hidden;padding:7px 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--range--editor.has-label.block{display:block}.elf--range--editor.has-label.block label{color:var(--elf--font-color);display:block}.elf--range--editor.is-removable{grid-template-columns:1fr 12px}.elf--range--editor.is-removable .remove{display:inline-block;margin-top:3px}.elf--range--editor .remove{display:none}.elf--range--editor .range--editor-type{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;height:100%;vertical-align:middle}.elf--range--editor .range--editor-type .area{border:1px solid transparent;border-radius:3px;display:grid;grid-template-columns:1fr 24px}.elf--range--editor .range--editor-type .area.focused{border:1px solid var(--elf--selected-color);border-radius:3px}.elf--range--editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--range--editor .range--editor-type .area input,.elf--range--editor .range--editor-type .area select{background-color:transparent;border:0;width:100%}.elf--range--editor .range--editor-type .area input[type=range]{width:95%}.elf--range--editor .range--editor-type .area input[type=number]{background-color:var(--elf--input-background-color);border:1px solid var(--elf--input-border-color);border-bottom-left-radius:3px;border-right:0;border-top-left-radius:3px;height:100%;padding:2px;text-align:left}.elf--range--editor .range--editor-type .area .elf--select-editor{background-color:var(--elf--input-background-color);border:0!important;border-radius:0 3px 3px 0;box-sizing:border-box;position:relative;text-align:right}.elf--range--editor .range--editor-type .area .elf--select-editor .selected-value{display:none}.elf--range--editor .range--editor-type .area .elf--select-editor select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid var(--elf--input-border-color);border-radius:0 3px 3px 0;border-left:0;color:var(--elf--input-sub-font-color);display:inline-block;height:24px;padding:0;position:absolute;right:0;text-align:center;width:24px}.elf--media-progress-editor>*{margin-bottom:2px}.elf--media-progress-editor .drag-area{background-image:linear-gradient(90deg,#2b2b2b 1px,transparent 1px 100%);background-position:0 1px;background-repeat:repeat-x;background-size:10px 8px;height:10px;margin:10px;padding:0 10px;position:relative}.elf--media-progress-editor .progress-bar{background-color:#2b2b2b;display:block;height:2px;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--media-progress-editor .bar{height:2px;left:10%;transform:translateY(-50%);width:50%}.elf--media-progress-editor .bar,.elf--media-progress-editor .drag-item{background-color:var(--elf--selected-color);display:inline-block;position:absolute;top:50%}.elf--media-progress-editor .drag-item{border-radius:100%;cursor:pointer;height:8px;transform:translate(-50%,-50%);width:8px}.elf--media-progress-editor .drag-item.end{background-color:#ff0;box-shadow:0 0 3px #0000004d}.elf--number-input-editor{border:1px solid transparent;border-radius:1px;box-sizing:border-box;display:grid;grid-template-columns:1fr;height:var(--elf--input-height);padding:4px}.elf--number-input-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--number-input-editor.drag{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--number-input-editor:hover:not(.focused):not(.drag){box-shadow:0 0 0 1px var(--elf--input-border-color)}.elf--number-input-editor.has-label{grid-template-columns:60px 1fr}.elf--number-input-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-input-editor.has-label.mini{grid-template-columns:10px 1fr}.elf--number-input-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-input-editor.has-label.wide .range--editor-type .area{grid-template-columns:1fr}.elf--number-input-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;overflow:hidden;padding:2px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-input-editor.has-label label svg{height:20px;width:20px}.elf--number-input-editor.has-label.block,.elf--number-input-editor.has-label.block label{display:block}.elf--number-input-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-input-editor .range--editor-type .area{grid-column-gap:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-input-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-input-editor .range--editor-type .area input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield;background-color:transparent;border:0;padding-left:2px;width:100%}.elf--number-input-editor .range--editor-type .area input::-webkit-inner-spin-button,.elf--number-input-editor .range--editor-type .area input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.elf--number-range-editor{grid-column-gap:4px;border:1px solid transparent;border-radius:2px;display:grid;grid-template-columns:1fr;height:var(--elf--input-height)}.elf--number-range-editor.disabled label{color:var(--elf--selected-color)}.elf--number-range-editor.disabled>*{pointer-events:none}.elf--number-range-editor.disabled input{color:var(--elf--input-sub-font-color)}.elf--number-range-editor.drag,.elf--number-range-editor.focused{--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--selected-color);border-width:1px}.elf--number-range-editor:hover:not(.focused):not(.drag){--elf--input-range-border-color:var(--elf--input-border-color);border-color:var(--elf--input-border-color)}.elf--number-range-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--number-range-editor.has-label.is-removable{grid-template-columns:70px 1fr 12px}.elf--number-range-editor.has-label.compact{grid-template-columns:30px 1fr}.elf--number-range-editor.has-label.wide{grid-template-columns:1fr 1fr}.elf--number-range-editor.has-label label{align-items:center;cursor:ew-resize;display:flex;justify-content:flex-start;line-height:2;overflow:hidden;padding:0 0 0 2px;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--number-range-editor.has-label label svg{height:20px;vertical-align:middle;width:20px}.elf--number-range-editor.has-label.block{display:block;height:auto}.elf--number-range-editor.has-label.block label{display:block}.elf--number-range-editor.is-removable{grid-template-columns:1fr 12px}.elf--number-range-editor.is-removable .remove{display:inline-block}.elf--number-range-editor .remove{display:none}.elf--number-range-editor .range--editor-type{height:100%;vertical-align:middle}.elf--number-range-editor .range--editor-type .area{grid-column-gap:4px;border-radius:3px;display:grid;grid-template-columns:1fr;height:100%}.elf--number-range-editor .range--editor-type .area span{padding:1px;vertical-align:middle}.elf--number-range-editor .range--editor-type .area input{height:100%;width:100%}.elf--number-range-editor .range--editor-type .area input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;vertical-align:middle}.elf--path-editor{--line-color:var(--elf--border-color);background-color:transparent;background-image:linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to right,var(--line-color),var(--line-color) 1px,transparent 1px,transparent),linear-gradient(to bottom,var(--line-color),var(--line-color) 1px,transparent 1px,transparent);background-position:0 0,0 0,100% 0,0 100%;background-repeat:repeat,repeat,no-repeat,no-repeat;background-size:10% 100%,100% 10%,1px 100%,100% 1px;cursor:crosshair;margin:10px;min-height:100px;min-width:100px;position:relative}.elf--path-editor .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor .path-container:not(.modify) path.object,.elf--path-editor .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor .path-container.split-panel{pointer-events:none}.elf--path-editor .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor .path-container.path{cursor:crosshair}.elf--path-editor .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor .path-container.alt svg circle,.elf--path-editor .path-container.segment-move{cursor:move}.elf--path-editor .path-container.transform svg .snap-path,.elf--path-editor .path-container.transform svg circle,.elf--path-editor .path-container.transform svg line,.elf--path-editor .path-container.transform svg rect,.elf--path-editor .path-container.transform svg text{display:none}.elf--path-editor .path-container.modify,.elf--path-editor .path-container.segment-move{cursor:default}.elf--path-editor .path-container.modify svg path.object,.elf--path-editor .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor .path-container.is-control svg path.path-area{display:none}.elf--path-editor .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor svg{height:100%;overflow:visible;width:100%}.elf--path-editor svg line{stroke-width:1;content-visibility:auto}.elf--path-editor svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);r:5;stroke-width:2}.elf--path-editor svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor svg path{fill:transparent;content-visibility:auto}.elf--path-editor svg path.path-area{stroke-width:0}.elf--path-editor svg path.path-area.selected,.elf--path-editor svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:var(--elf--selected-color)}.elf--path-editor svg path.guide,.elf--path-editor svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg path.segment{pointer-events:all}.elf--path-editor svg path.object{fill:transparent;stroke-width:1}.elf--path-editor svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-data-editor .segment-empty{grid-column-gap:2px;display:grid;grid-template-columns:30px 1fr}.elf--path-data-editor .segment-empty .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:center}.elf--path-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:50px 1fr;margin-bottom:4px}.elf--path-data-editor .segment.m{padding-top:10px}.elf--path-data-editor .segment .command{color:var(--elf--selected-color);cursor:pointer}.elf--path-data-editor .segment .command[data-toggle=false]{font-weight:700;opacity:.3}.elf--path-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--path-data-editor .segment .values span{text-align:center}.elf--path-data-editor .segment .values input{width:100%}.elf--polygon-data-editor .segment{grid-column-gap:2px;display:grid;grid-template-columns:1fr;margin-bottom:4px}.elf--polygon-data-editor .segment .values{grid-column-gap:2px;grid-row-gap:2px;display:grid;grid-template-columns:repeat(2,1fr);text-align:right}.elf--polygon-data-editor .segment .values label{color:var(--elf--selected-color)}.elf--polygon-data-editor .segment .values input{color:var(--elf--font-color);width:80px}.elf--select-icon-editor{border:1px solid transparent;display:grid;height:var(--elf--input-height)}.elf--select-icon-editor:hover,.elf--select-icon-editor:hover .items>div{border-color:var(--elf--input-border-color)}.elf--select-icon-editor.has-label{grid-template-columns:70px 1fr}.elf--select-icon-editor.has-label label{overflow:hidden;padding:6px 4px 2px 0;text-align:left;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--select-icon-editor .items{background-color:transparent;border-radius:3px;box-sizing:border-box;cursor:pointer;display:flex;height:var(--elf--input-height);line-height:1;outline:none}.elf--select-icon-editor .items>.select-icon-item{align-items:center;border-right:1px solid transparent;box-sizing:border-box;color:var(--elf--font-color);display:flex;flex:1 1 10%;height:calc(100% - 2px);justify-content:center;line-height:1.4;min-width:var(--elf--input-height);padding:6px 2px;position:relative;text-align:center;text-transform:uppercase;vertical-align:middle;white-space:pre-wrap;word-break:break-all}.elf--select-icon-editor .items>.select-icon-item:last-child{border-right:0}.elf--select-icon-editor .items>.select-icon-item:hover{background-color:var(--elf--input-inactive-color)}.elf--select-icon-editor .items>.select-icon-item svg{height:20px;vertical-align:middle;width:20px}.elf--select-icon-editor .items>.select-icon-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--select-icon-editor .items>.select-icon-item.icon{padding:3px 2px}.elf--select-icon-editor .items>.select-icon-item[data-value=""]{max-width:20px}.elf--select-icon-editor .items>.select-icon-item[data-value=none]{text-transform:none;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=uppercase]{text-transform:uppercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=lowercase]{text-transform:lowercase;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=capitalize]{text-transform:capitalize;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=full-width]{text-transform:full-width;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=underline]{text-decoration:underline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=overline]{text-decoration:overline;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=line-through]{text-decoration:line-through;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=normal]{font-style:normal;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=italic]{font-style:italic;vertical-align:middle}.elf--select-icon-editor .items>.select-icon-item[data-value=oblique]{font-style:oblique;vertical-align:middle}.elf--select-icon-editor .tools{padding:4px 0;text-align:right;vertical-align:middle}.elf--stroke-dasharray-editor{padding:4px 0;position:relative}.elf--stroke-dasharray-editor .dasharray-item{border-bottom:1px solid var(--elf--border-color);-moz-column-gap:2px;column-gap:2px;display:flex;margin-right:4px;position:relative}.elf--stroke-dasharray-editor .dasharray-item>*{align-items:center;display:flex;height:100%;justify-content:flex-start}.elf--stroke-dasharray-editor .dasharray-item>* input{width:20px!important}.elf--stroke-dasharray-editor .dasharray-item>button svg{height:10px;width:10px}.elf--stroke-dasharray-editor .dash-list{display:flex;flex-direction:row;flex-wrap:wrap}.elf--stroke-dasharray-editor .dash-sample-list{background-color:var(--elf--input-background-color);border:1px solid var(--elf--border-color);display:none;height:100px;overflow:auto;position:absolute;top:30px;width:100px;z-index:10}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample{cursor:pointer;height:20px}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample:hover{background-color:var(--elf--input-inactive-color)}.elf--stroke-dasharray-editor .dash-sample-list .dash-sample svg line{stroke:var(--elf--font-color)}.elf--stroke-dasharray-editor>.tools.has-label{display:grid;grid-template-columns:70px 1fr}.elf--stroke-dasharray-editor>.tools.has-label .buttons{align-items:center;display:flex;justify-content:flex-start;padding-left:4px;text-align:left}.elf--stroke-dasharray-editor>.tools label{align-items:center;cursor:pointer;display:flex;justify-content:flex-start;text-align:left;vertical-align:middle}.elf--stroke-dasharray-editor>.tools label:hover{font-weight:700}.elf--text-area-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-area-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-area-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-area-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--text-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr}.elf--text-editor.has-label label{padding:2px 4px 2px 0;vertical-align:middle}.elf--text-editor input[type=text]{border:1px solid var(--elf--border-color);width:100%}.elf--text-shadow-editor{grid-template-columns:1fr!important;margin-bottom:10px;margin-left:-6px}.elf--text-shadow-editor .label{height:20px}.elf--text-shadow-editor .label.hide{display:none}.elf--text-shadow-editor .label label{padding:2px 6px 2px 0;vertical-align:middle}.elf--text-shadow-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--text-shadow-editor .tools select{display:inline-block;width:100px!important}.elf--text-shadow-editor .shadow-item{grid-column-gap:2px;display:grid;grid-template-columns:18px 1.5fr 1fr 1fr 1fr 30px;text-align:center}.elf--text-shadow-editor .shadow-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--text-shadow-editor .shadow-item.desc{color:var(--elf--input-font-color)}.elf--text-shadow-editor .shadow-item.desc>*{text-align:left}.elf--text-shadow-editor .shadow-item .tools{align-items:center;display:flex;justify-content:center}.elf--text-shadow-editor .shadow-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--var-editor{grid-template-columns:1fr!important}.elf--var-editor .label{height:20px;margin-top:2px}.elf--var-editor .label.hide{display:none}.elf--var-editor .label label{padding-left:5px;vertical-align:middle}.elf--var-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--var-editor .var-item{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr 30px;height:24px;margin-bottom:5px;margin-top:5px;text-align:center}.elf--var-editor .var-item>div input{height:100%;width:100%}.elf--var-editor .var-item>div input::-moz-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input:-ms-input-placeholder{color:#9e9e9e}.elf--var-editor .var-item>div input::placeholder{color:#9e9e9e}.elf--var-editor .var-item .tools{text-align:right}.elf--default-layout,.elf--default-layout-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--default-layout{display:flex;flex-direction:column}.elf--default-layout .layout-top{box-sizing:border-box;flex:none;height:48px;position:relative;z-index:10000}.elf--default-layout .layout-middle{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;overflow:hidden;position:relative}.elf--default-layout .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px;z-index:1}.elf--default-layout .layout-middle>.splitter.selected,.elf--default-layout .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.elf--default-layout .layout-middle>.toggleLeft{left:340px}.elf--default-layout .layout-middle>.toggleRight{right:280px}.elf--default-layout .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);box-sizing:border-box;display:flex;flex:none;flex-direction:column;position:relative;transition:width .05s linear;width:340px}.elf--default-layout .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);display:flex;flex:none;flex-direction:column;overflow:auto;position:relative;transition:width .05s linear;width:280px;z-index:100}.elf--default-layout .layout-middle .layout-right.closed{width:10px!important}.elf--default-layout .layout-middle .layout-body{flex:1 1 auto;position:relative}.elf--popup-manager{bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:99999}.elf--popup-manager>*{pointer-events:all}.elf--notification-view{display:inline-block;position:absolute;right:10px;top:10px;z-index:10000}.elf--notification-view .item{border-radius:4px;color:#fff;margin-bottom:10px;min-width:300px;opacity:1;padding:10px 20px;position:relative;transition:opacity 10s linear}.elf--notification-view .item .description{padding-top:10px}.elf--notification-view .item .icon{display:inline-block;position:absolute;right:10px;top:10px}.elf--notification-view .item .icon svg path{fill:currentColor}.elf--notification-view .item.alert{background-color:#e45050de}.elf--notification-view .item.alert .title{color:#fff;font-weight:700}.elf--notification-view .item.alert .description{color:#fff}.elf--window-background{background-color:var(--elf--window-background-color);bottom:0;display:none;left:0;position:absolute;right:0;top:0;z-index:10000}.elf--window-background .window{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);box-shadow:0 0 1px 0 var(--elf--border-color);color:var(--elf--font-color);height:200px;left:50%;padding:14px;position:absolute;top:50%;transform:translate(-50%,-50%);width:200px;z-index:1000}.elf--window-background .window .window-title{border-bottom:1px solid var(--elf--border-color);display:flex;font-size:15px;font-weight:700;height:40px;left:0;margin-bottom:10px;padding:10px;pointer-events:all;position:absolute;right:0;top:0}.elf--window-background .window .window-title>*{flex:1 1 auto}.elf--window-background .window .window-title .tools{text-align:right}.elf--window-background .window .window-title label{cursor:move}.elf--window-background .window .window-body{bottom:0;left:0;position:absolute;right:0;top:40px}.elf--export-window{height:80%!important;width:80%!important}.elf--export-window pre{border:1px solid var(--elf--border-color);height:100%;margin:0 10px;overflow:auto;padding:10px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.elf--project-window{background-color:var(--elf--background-color);height:100%!important;width:100%!important}.elf--project-window .project-container{grid-column-gap:2px;display:grid;grid-template-columns:300px 1fr;height:100%;position:relative;width:100%}.elf--project-window .project-container .project-menu{box-sizing:border-box;height:100%;overflow:auto;padding:20px;position:relative}.elf--project-window .project-container .project-list{background-color:var(--elf--window-background-color);box-sizing:border-box;height:100%;overflow:auto}.elf--shortcut-window{height:80%!important;width:600px!important}.elf--shortcut-window .window-body{overflow:auto}.elf--shortcut-window .list{padding:10px 20px}.elf--shortcut-window .list .item h2{padding-left:10px}.elf--shortcut-window .list .item .shortcut-view-item{display:grid;grid-template-columns:1fr 200px;margin-bottom:2px}.elf--shortcut-window .list .item .shortcut-view-item>*{border-bottom:1px solid var(--elf--border-color);border-right:0;padding:5px 10px;position:relative}.elf--shortcut-window .list .item .shortcut-view-item .title{padding:10px}.elf--shortcut-window .list .item .shortcut-view-item .title .description{color:var(--elf--font-color);opacity:.5}.elf--shortcut-window .list .item .shortcut-view-item .os-item{text-align:right}.elf--shortcut-window .list .item .shortcut-view-item .os-item span{border:1px solid var(--elf--font-color);box-sizing:border-box;display:inline-block;margin:0 2px;padding:4px 6px}.dataeditor{bottom:auto;display:inline-block;height:auto;left:auto;overflow:visible;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:300px}.dataeditor .layout-main{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);color:var(--elf--font-color);display:flex;flex-direction:column;height:100%;min-height:10px;position:relative;width:100%}.dataeditor .layout-main[data-open-status=true] .control-view{display:block}.dataeditor .layout-main .control-view{border-bottom:1px solid var(--elf--border-color);display:none;margin-top:5px;padding:0 5px}.dataeditor .layout-main>.close{color:var(--elf--font-color);cursor:pointer;padding:5px 0;text-align:center}.elf--colorpicker-popup{padding:0 10px;width:244px}.elf--colorpicker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--colorpicker-popup .colorpicker input{border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--colorpicker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--colorpicker-popup .colorpicker .colorsets{border-top:1px solid var(--elf--border-color)!important}.elf--colorpicker-popup .assets{padding:0 10px}.elf--colorpicker-popup .assets .project-color-list{padding:5px 0}.elf--colorpicker-popup .assets .project-color-list .color-item{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border-radius:3px;display:inline-block;height:16px;margin-bottom:9px;margin-right:9px;overflow:hidden;position:relative;width:16px}.elf--colorpicker-popup .assets .project-color-list .color-item .color-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--colorpicker-popup .assets .project-color-list .color-item:hover{transform:scale(1.2)}.elf--popup{background-color:var(--elf--popup-background-color);border-radius:2px;box-shadow:0 1px 5px #00000080;color:var(--elf--font-color);display:none;position:absolute;z-index:1000}.elf--popup.compact .popup-body{padding:0 0 5px}.elf--popup .popup-title{display:flex;font-size:12px;font-weight:700;padding:10px 0 10px 10px;pointer-events:all}.elf--popup .popup-title>*{flex:1 1 auto}.elf--popup .popup-title .tools{align-items:center;display:flex;justify-content:flex-end;padding-right:10px}.elf--popup .popup-title .tools button{background-color:transparent;border:0;cursor:pointer;padding:0}.elf--popup .popup-title .tools button svg{fill:var(--elf--font-color);height:16px;width:16px}.elf--popup .popup-title label{cursor:move}.elf--popup .popup-body{padding:8px 12px}.elf--popup .popup-body .popup-item{margin-bottom:5px;padding:2px 0}.elf--popup .popup-resizer{background-color:gray;bottom:0;cursor:se-resize;height:10px;position:absolute;right:0;width:10px}.designeditor[data-design-mode=item] .layout-middle{bottom:0!important}.designeditor[data-design-mode=item] .elf--status-bar{display:none!important}.designeditor .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.designeditor .layout-main .layout-top{height:48px;top:0;z-index:10000}.designeditor .layout-main .layout-middle,.designeditor .layout-main .layout-top{background-color:var(--elf--background-color);box-sizing:border-box;left:0;position:absolute;right:0}.designeditor .layout-main .layout-middle{bottom:0;overflow:hidden;top:48px}.designeditor .layout-main .layout-middle .layout-header{background-color:var(--elf--header-background-color);box-sizing:border-box;color:var(--elf--selected-font-color);display:none;height:0;left:340px;position:absolute;right:280px;top:0}.designeditor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px}.designeditor .layout-main .layout-middle>.splitter.selected,.designeditor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.designeditor .layout-main .layout-middle>.left-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;left:340px;pointer-events:none;position:absolute;top:0;transition:background-color .05s linear;width:8px}.designeditor .layout-main .layout-middle>.left-arrow button{color:var(--elf--font-color);pointer-events:all}.designeditor .layout-main .layout-middle>.right-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;pointer-events:none;position:absolute;right:280px;top:0;transition:background-color .05s linear;width:8px}.designeditor .layout-main .layout-middle>.right-arrow button{color:var(--elf--font-color);pointer-events:all}.designeditor .layout-main .layout-middle>button{color:var(--elf--font-color);cursor:pointer;height:12px;position:absolute;top:50%;transform:translateY(-50%) translate(-25%);width:12px;z-index:1000}.designeditor .layout-main .layout-middle>button svg{transform:scale(1.5)}.designeditor .layout-main .layout-middle>.toggleLeft{left:340px}.designeditor .layout-main .layout-middle>.toggleRight{right:280px}.designeditor .layout-main .layout-middle .layout-footer{background-color:var(--elf--background-color);bottom:0;height:0;left:0;overflow:hidden;position:absolute;right:0;z-index:10000}.designeditor .layout-main .layout-middle .layout-footer .footer-splitter{display:none}.designeditor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);bottom:0;box-sizing:border-box;display:inline-block;display:flex;flex-direction:column;left:0;position:absolute;top:0;width:340px}.designeditor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);bottom:0;display:inline-block;display:flex;flex-direction:column;overflow:auto;position:absolute;right:0;top:0;width:280px;z-index:100}.designeditor .layout-main .layout-middle .layout-body{bottom:0;left:340px;position:absolute;right:280px;top:0}.elf--context-menu-renderer>*{display:block!important;width:100%}.elf--context-menu-renderer .dropdown-menu{height:100%}.elf--context-menu-renderer .elf--toolbar-menu-item:hover{background-color:var(--elf--selected-color);color:#fff!important}.elf--context-menu-view{border-radius:4px;display:none;left:0;min-width:240px;position:absolute;top:0;z-index:1000}.elf--alignment-item{grid-column-gap:2px;display:grid;grid-template-columns:repeat(8,1fr);height:24px;margin-bottom:10px;padding-top:8px}.elf--alignment-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;height:10px;width:20px}.elf--alignment-item button[data-no-title=true] .title{display:none}.elf--alignment-item .title{color:#999}.elf--alignment-item .icon{color:var(--elf--selected-color)!important;height:16px;margin:0 auto;width:16px}.elf--alignment-item .icon svg{height:100%;width:100%}.elf--property{--property-order:1000;border-bottom:1px solid var(--elf--property-border-color);box-shadow:0 0 2px #fff0;display:none;margin-bottom:4px;order:var(--property-order)}.elf--property:first-child{border-top:0}.elf--property.full{display:flex;flex-direction:column;height:100%}.elf--property.full.show{height:100%}.elf--property.full .property-title{flex:none}.elf--property.full .property-body{flex:1 1 auto;overflow:auto;padding-left:0;padding-right:0;position:relative}.elf--property.show{display:block}.elf--property.show>.property-title>label .icon{display:inline-block;transform:rotate(90deg)}.elf--property.show>.property-body{display:block}.elf--property>.property-title{align-items:center;color:var(--elf--font-color);cursor:pointer;display:flex;height:30px;justify-content:space-between;padding:0 10px;position:relative}.elf--property>.property-title.filter{grid-template-columns:1fr 110px}.elf--property>.property-title svg{height:16px;width:16px}.elf--property>.property-title label{cursor:pointer;font-size:10px;font-weight:600;letter-spacing:1px;line-height:2;overflow:hidden;padding-left:2px;text-overflow:ellipsis;text-transform:uppercase;vertical-align:middle;white-space:nowrap}.elf--property>.property-title label .icon{display:inline-block;transition:all .1s linear}.elf--property>.property-title label.has-keyframe{padding-left:0}.elf--property>.property-title>.tools{flex:none;text-align:right;vertical-align:middle;white-space:nowrap}.elf--property>.property-title>.tools>*{flex:none}.elf--property>.property-body{display:none;padding:0 10px;position:relative}.elf--property>.property-body.no-padding{padding:0!important}.elf--property>.property-body .property-item{padding:4px 0}.elf--property>.property-body .property-item:first-child{padding-top:0}.elf--property>.property-body .property-item:not(.has-label){background-color:#fff0}.elf--property>.property-body .property-item.animation-property-item{display:grid;grid-template-columns:1fr}.elf--property>.property-body .property-item.animation-property-item.has-label{grid-template-columns:80px 1fr}.elf--property>.property-body .property-item.animation-property-item.has-label .group{padding-left:12px;padding-top:5px;vertical-align:middle}.elf--property>.property-body .property-item.animation-property-item.full{display:block}.elf--property>.property-body .property-item.animation-property-item.full .group{padding-left:14px;vertical-align:middle}.elf--property>.property-body .property-item>label.label{background-color:var(--elf--selected-color-2);border-radius:4px;box-sizing:border-box;color:var(--elf--selected-font-color);display:block;padding:5px}.elf--property>.property-footer{padding:0 6px}.elf--property>.property-footer>div{margin-bottom:5px}.elf--property>.property-footer label{cursor:pointer;display:inline-block;padding-left:2px;padding-right:5px;vertical-align:middle;width:60px}.elf--animation-list{grid-template-columns:1fr!important}.elf--animation-list .animation-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0;text-align:center}.elf--animation-list .animation-item.selected{background-color:var(--elf--border-color)}.elf--animation-list .animation-item .name{padding:2px 0;text-align:left;vertical-align:middle}.elf--animation-list .animation-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;margin-top:3px;vertical-align:middle;width:100%}.elf--animation-list .animation-item .timing canvas{border-radius:3px}.elf--animation-list .animation-item .labels label{background-color:var(--elf--border-color);border-radius:2px;color:var(--elf--border-color);font-weight:700;padding:1px 2px;text-transform:uppercase}.elf--animation-list .animation-item .labels label small{color:var(--elf--font-color);text-transform:lowercase}.elf--animation-list .animation-item .labels label.play-state{background-color:transparent;cursor:pointer}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value]{color:var(--elf--font-color);display:none;vertical-align:middle}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value] svg{height:16px;width:16px}.elf--animation-list .animation-item .labels label.play-state [data-play-state-value=pause]{color:red}.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=paused] [data-play-state-value=paused],.elf--animation-list .animation-item .labels label.play-state[data-play-state-selected-value=running] [data-play-state-value=running]{display:inline-block}.elf--animation-list .animation-item .tools{text-align:right;vertical-align:middle}.elf--animation-property-popup{width:220px}.elf--animation-property-popup .box>div{margin-bottom:5px}.elf--animation-property-popup .box label{text-align:left;vertical-align:middle}.elf--animation-property-popup .box .name{display:grid;grid-template-columns:60px 1fr}.elf--animation-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--animation-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--animation-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--artboard-size-list .property-body{padding:0!important}.elf--artboard-size-list .artboard-size-item{border-top:1px solid var(--elf--border-color)}.elf--artboard-size-list .category{border-bottom:1px solid var(--elf--border-color);height:26px;line-height:2}.elf--artboard-size-list .category .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none}.elf--artboard-size-list .group-item{background-color:#ececec;border-bottom:1px solid var(--elf--border-color);height:24px;line-height:1.8}.elf--artboard-size-list .group-item .title{color:var(--elf--font-color);padding:0 10px;pointer-events:none;text-transform:uppercase}.elf--artboard-size-list .device-item{grid-column-gap:2px;border-bottom:1px solid var(--elf--border-color);cursor:pointer;display:grid;font-size:12px;grid-template-columns:1fr 1fr;height:26px;line-height:2.3}.elf--artboard-size-list .device-item .title{color:var(--elf--font-color);padding-left:20px;pointer-events:none}.elf--artboard-size-list .device-item .size{color:#bdbdbd;letter-spacing:2px;padding-right:10px;pointer-events:none;text-align:right}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--background-image-editor{padding:0 10px 5px 5px}.elf--background-image-editor .label{height:20px;margin-top:2px}.elf--background-image-editor .label.hide{display:none}.elf--background-image-editor .label label{font-size:12px;padding-left:5px;vertical-align:middle}.elf--background-image-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--background-image-editor .fill-list{display:grid;font-size:12px;grid-template-columns:1fr}.elf--background-image-editor .fill-list .fill-item{-moz-column-gap:2px;column-gap:2px;display:grid;grid-template-columns:18px 26px 26px 1fr;margin-bottom:4px}.elf--background-image-editor .fill-list .fill-item>label{align-items:center;display:flex;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item>div{align-items:center;display:flex;height:26px;justify-content:center}.elf--background-image-editor .fill-list .fill-item .gradient-info{color:var(--elf--font-color);display:grid;grid-template-columns:1fr 30px 30px 30px;width:100%}.elf--background-image-editor .fill-list .fill-item .gradient-info svg path{fill:currentColor}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools{align-items:center;display:flex;justify-content:center;text-align:right}.elf--background-image-editor .fill-list .fill-item .gradient-info .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorcode,.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .opacity{display:none}.elf--background-image-editor .fill-list .fill-item[data-fill-type=gradient] .colorsteps{display:block}.elf--background-image-editor .fill-list .fill-item .pattern{background-color:var(--elf--border-color)}.elf--background-image-editor .fill-list .fill-item .preview{align-items:center;box-shadow:0 0 0 1px #0000001a;cursor:pointer;display:flex;height:auto;justify-content:flex-start}.elf--background-image-editor .fill-list .fill-item .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#c7c7c7 25%,transparent 0),linear-gradient(-45deg,#c7c7c7 25%,transparent 0),linear-gradient(45deg,transparent 75%,#c7c7c7 0),linear-gradient(-45deg,transparent 75%,#c7c7c7 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;display:block;height:26px;pointer-events:none;position:relative;width:26px}.elf--background-image-editor .fill-list .fill-item .preview .mini-view .color-view{border-radius:0;bottom:0;left:0;position:absolute;right:0;top:0}.elf--background-image-editor .fill-list .fill-item .fill-title{align-items:center;display:flex;justify-content:flex-start;padding-left:2px;pointer-events:none;position:relative;text-align:left}.elf--background-image-editor .fill-list .fill-item .fill-title svg{height:16px;vertical-align:middle;width:16px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]{color:var(--elf--font-color);padding-left:10px}.elf--background-image-editor .fill-list .fill-item .fill-title[data-repeat=true]:after{border-right:4px double var(--elf--font-color);bottom:0;content:"";height:50%;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:4px}.elf--background-image-editor .fill-list .fill-item .colorcode input{width:100%}.elf--background-image-position-picker{width:180!important}.elf--background-image-position-picker .background-property>div{margin-bottom:10px}.elf--background-image-position-picker .popup-item{margin-bottom:5px}.elf--background-image-position-picker .grid{display:grid;grid-template-columns:60px 1fr}.elf--background-image-position-picker .grid-2{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr}.elf--background-image-position-picker .grid-2 label{padding-right:2px;text-align:left}.elf--background-image-position-picker .repeat-list{display:flex;gap:5px}.elf--background-image-position-picker .repeat-list button{background-color:#434b50;flex:1 1 auto;height:24px;width:24px}.elf--background-image-position-picker .repeat-list button[value=no-repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:50%;background-repeat:no-repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:repeat;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-x]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 8px;background-repeat:repeat-x;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=repeat-y]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:8px 10px;background-repeat:repeat-y;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=space]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:10px 10px;background-repeat:space;background-size:8px 8px}.elf--background-image-position-picker .repeat-list button[value=round]{background-image:linear-gradient(to top right,var(--elf--selected-color),#fff);background-position:0 0;background-repeat:round;background-size:8px 8px}.elf--background-image-position-picker .repeat-list[data-value=no-repeat] button[value=no-repeat],.elf--background-image-position-picker .repeat-list[data-value=repeat-x] button[value=repeat-x],.elf--background-image-position-picker .repeat-list[data-value=repeat-y] button[value=repeat-y],.elf--background-image-position-picker .repeat-list[data-value=repeat] button[value=repeat],.elf--background-image-position-picker .repeat-list[data-value=round] button[value=round],.elf--background-image-position-picker .repeat-list[data-value=space] button[value=space]{background-color:var(--elf--selected-color);box-shadow:0 0 2px 2px var(--elf--selected-color)}.fill{display:inline-block;height:30px!important;vertical-align:middle;width:30px!important}.fill:hover{background-color:var(--elf--input-inactive-color)}.elf--background-position-editor{height:19px;text-align:center;width:26px}.elf--background-position-editor .preview{height:26px}.elf--background-position-editor .preview .mini-view{height:100%}.elf--background-position-editor .preview .mini-view .color-view{border-radius:3px;cursor:pointer;height:100%}.elf--border-editor .header{grid-column-gap:4px;display:grid;grid-template-columns:repeat(3,1fr) 24px;text-align:center;text-transform:uppercase}.elf--border-editor>.editor-area{padding:5px 0}.elf--border-editor>.editor-area>div{margin-top:5px}.elf--border-editor>.editor-area>div:first-child{margin-top:0}.elf--border-editor>.editor-area>div>label{font-weight:700;padding:2px 0;text-shadow:0 0 2px var(--elf--border-color);text-transform:uppercase}.elf--border-editor .input-group{display:grid;grid-template-rows:repeat(3,1fr)}.elf--border-editor .input-field{grid-column-gap:4px;display:grid;grid-template-columns:1fr 3fr;vertical-align:middle}.elf--border-editor .input-field input{vertical-align:middle;width:100%}.elf--border-editor .input-field .input-ui{vertical-align:middle}.elf--border-value-editor{grid-column-gap:4px;display:grid;grid-template-columns:1fr}.elf--border-value-editor label{padding:6px 4px 2px 0;text-align:left;vertical-align:middle}.elf--border-value-editor .editor-area{-moz-column-gap:10px;column-gap:10px;display:flex;flex-direction:row}.elf--border-radius-editor .border-radius-item{display:grid;grid-template-columns:1fr 1fr 30px}.elf--border-radius-editor .radius-selector[data-selected-value=all] button[data-value=all],.elf--border-radius-editor .radius-selector[data-selected-value=partitial] button[data-value=partitial]{background-color:var(--elf--selected-color-2);color:var(--elf--font-color)}.elf--border-radius-editor .radius-selector button{border-radius:3px;height:20px;margin:2px;width:20px}.elf--border-radius-editor .radius-setting-box{display:grid;grid-template-columns:1fr 30px;margin-bottom:5px}.elf--border-radius-editor .radius-setting-box>div{display:grid;grid-template-columns:1fr 1fr}.elf--box-model-item{grid-template-columns:1fr!important}.elf--box-model-item>div{height:150px;position:relative;width:100%}.elf--box-model-item>div .margin{border:1px dashed #aaa;bottom:5px;left:5px;padding:10px;position:absolute;right:5px;top:5px}.elf--box-model-item>div .margin:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .margin input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .margin [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .margin [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .margin [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding{border:1px dashed #aaa;bottom:30px;left:55px;padding:20px 45px;position:absolute;right:55px;top:30px}.elf--box-model-item>div .padding:before{content:attr(data-title);display:inline-block;left:2px;position:absolute;top:2px}.elf--box-model-item>div .padding input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.elf--box-model-item>div .padding [data-value=top]{display:inline-block;left:50%;position:absolute;top:2px;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=bottom]{bottom:2px;display:inline-block;left:50%;position:absolute;transform:translate(-50%);width:45px}.elf--box-model-item>div .padding [data-value=left]{display:inline-block;left:2px;position:absolute;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .padding [data-value=right]{display:inline-block;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:45px}.elf--box-model-item>div .content{border:1px dashed #aaa;bottom:54px;left:105px;padding:10px 0;position:absolute;right:105px;top:54px}.elf--box-model-item>div .content:before{display:block;padding:5px 0;text-align:center}.box-shadow-samples{border:0;font-size:11px}.elf--clip-path-list{grid-template-columns:1fr!important}.elf--clip-path-list .clippath-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:20px 1fr 30px;height:30px;margin-bottom:5px}.elf--clip-path-list .clippath-item>label{align-items:center;cursor:move;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title{align-items:center;-moz-column-gap:10px;column-gap:10px;display:flex;justify-content:flex-start}.elf--clip-path-list .clippath-item .title .name{padding:2px 0}.elf--clip-path-list .clippath-item .tools{align-items:center;display:flex;justify-content:center;text-align:right;vertical-align:middle}.elf--clip-path-list .clippath-item .tools:hover{background-color:var(--elf--input-inactive-color)}.elf--clip-path-list .clippath-item .offset-list{height:30px;padding:0 10px}.elf--clip-path-list .clippath-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--clip-path-list .clippath-item .offset-list .container .offset{background-color:#000;border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--clip-path-list .clippath-item .offset-list .container .offset:hover:before{background-color:#4e3b3b;border-radius:3px;bottom:100%;color:#fff;content:attr(data-title);display:inline-block;left:50%;padding:1px 3px;position:absolute;text-align:center;transform:translate(-50%);white-space:nowrap}.elf--clippath-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .polygon .polygon-back svg polygon{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .polygon .polygon-pointer{fill:#fff;r:5;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute}.elf--clippath-editor-view .polygon .polygon-line{cursor:copy;pointer-events:all}.elf--clippath-editor-view .polygon .polygon-line:hover{stroke-width:2;stroke:red}.elf--clippath-editor-view .polygon .polygon-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:20px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:20px}.elf--clippath-editor-view .inset .inset-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;position:absolute;right:0;top:0}.elf--clippath-editor-view .inset .inset-back svg path{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7))}.elf--clippath-editor-view .inset .inset-direction{background-color:#fff;height:14px;width:14px}.elf--clippath-editor-view .inset .inset-center,.elf--clippath-editor-view .inset .inset-direction{border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .inset .inset-center{border:2px solid #fff;height:20px;width:20px}.elf--clippath-editor-view .circle .circle-back{left:0;pointer-events:none;top:0}.elf--clippath-editor-view .circle .circle-back,.elf--clippath-editor-view .circle .circle-center{border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .circle .circle-center{height:20px;pointer-events:all;width:20px}.elf--clippath-editor-view .circle .circle-radius{background-color:#fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));height:14px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:14px}.elf--clippath-editor-view .ellipse .ellipse-back{bottom:0;cursor:-webkit-grab;cursor:grab;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--clippath-editor-view .ellipse .ellipse-back svg ellipse{fill:transparent;stroke-width:2;stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all}.elf--clippath-editor-view .ellipse .ellipse-center{border:2px solid #fff;border-radius:50%;height:20px;width:20px}.elf--clippath-editor-view .ellipse .ellipse-center,.elf--clippath-editor-view .ellipse .ellipse-radius{cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 3px rgba(255,0,255,.7));pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%)}.elf--clippath-editor-view .ellipse .ellipse-radius{background-color:#fff;border-radius:50%;height:14px;width:14px}.elf--code-view-item{grid-template-columns:1fr!important;width:100%}.elf--code-view-item>div{max-width:100%;width:100%}.elf--code-view-item>div label{padding-left:10px}.elf--code-view-item>div pre{line-height:1.7;margin-top:0;padding:40px 0 20px 20px;position:relative;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:pre-wrap;word-break:break-all}.elf--code-view-item>div pre:not(:last-child){border-bottom:1px solid var(--elf--border-color)}.elf--code-view-item>div pre:before{border:1px solid var(--elf--border-color);color:var(--elf--font-color);content:attr(title);display:inline-block;font-weight:700;left:0;margin-bottom:10px;padding:2px 4px;position:absolute;right:0;top:0}.elf--code-view-item>div pre .block{padding-left:20px;text-indent:-20px}.elf--code-view-item>div pre strong{color:var(--elf--font-color);font-weight:400;text-indent:-20px}.elf--code-view-item>div pre .value{color:#f16b16;text-indent:-20px}.elf--code-view-item>div pre .keyword{color:#20a471}.elf--code-view-item>div pre .char{color:#444}.elf--code-view-item>div pre .function{color:#725ee1}.elf--texture .pattern-list{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;padding:10px;row-gap:10px}.elf--texture .pattern-list .pattern-item{cursor:pointer;text-align:center}.elf--texture .pattern-list .pattern-item.selected .preview{background-color:var(--elf--selected-background-color)}.elf--texture .pattern-list .pattern-item:hover .preview{background-color:var(--elf--selected-color)}.elf--texture .pattern-list .pattern-item .preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;pointer-events:none;width:80px}.elf--texture .pattern-list .pattern-item .preview svg{height:100%;width:100%}.elf--export-property .export-item{grid-column-gap:2px;display:grid;grid-template-columns:60px 1fr;padding:10px 6px}.elf--export-property .export-item label{vertical-align:middle}.elf--export-property .export-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;text-align:left;vertical-align:middle;width:100%}.elf--export-property .export-item button svg{vertical-align:middle;width:16px}.elf--fill-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--fill-editor-view.dragging .area-line{pointer-events:none!important}.elf--fill-editor-view .gradient-editor-area{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--fill-editor-view .gradient-editor-area path{fill:transparent;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--fill-editor-view .gradient-editor-area path.start-end-line{stroke:#fff;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area rect{pointer-events:all}.elf--fill-editor-view .gradient-editor-area rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--fill-editor-view .gradient-editor-area circle{stroke-width:2;pointer-events:all}.elf--fill-editor-view .gradient-editor-area circle:hover{cursor:-webkit-grab;cursor:grab}.elf--fill-editor-view .gradient-editor-area circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--fill-editor-view .gradient-editor-area circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--fill-editor-view .gradient-editor-area circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--fill-editor-view .gradient-editor-area circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;filter:none;pointer-events:none}.elf--fill-editor-view .gradient-editor-area circle.point{fill:#fff;r:5}.elf--fill-editor-view .gradient-editor-area circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--fill-editor-view .gradient-editor-area circle.hover-colorstep{r:8;stroke:#fff;stroke-width:1;pointer-events:none}.filter-select{border:0;font-size:11px;vertical-align:middle}.elf--fill-editor{box-sizing:border-box;padding:0 4px;position:relative}.elf--fill-editor .tools{padding:4px 0}.elf--fill-editor [data-editor]{display:none}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=gradient],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=gradient]{display:block}.elf--fill-editor:not([data-selected-editor*=image-resource]) [data-editor=tools],.elf--fill-editor:not([data-selected-editor*=static-gradient]) [data-editor=tools]{display:grid}.elf--fill-editor[data-selected-editor=static-gradient]{display:none}.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageWidth],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageX],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=imageY],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternHeight],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternUnits],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=patternWidth]{display:block}.elf--fill-editor[data-selected-editor=image-resource] .preset-position,.elf--fill-editor[data-selected-editor=image-resource] [data-editor=gradient],.elf--fill-editor[data-selected-editor=image-resource] [data-editor=tools]{display:none}.elf--fill-editor .sub-editor{padding:0}.elf--fill-editor .gradient-steps{height:24px;margin-top:30px;position:relative}.elf--fill-editor .hue,.elf--fill-editor .hue-container{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;box-shadow:0 0 0 1px var(--elf--border-color);height:14px;left:0;pointer-events:all;position:absolute;right:0;top:4px}.elf--fill-editor .hue{pointer-events:none}.elf--fill-editor .hue .step-list{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--fill-editor .hue .step-list .step{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;border:2px solid var(--elf--border-color);display:inline-block;height:24px;pointer-events:all;position:absolute;top:calc(-100% - 2px);transform:translate(-50%) translateY(-50%);width:24px}.elf--fill-editor .hue .step-list .step.selected{border-color:var(--elf--selected-color-2);z-index:1}.elf--fill-editor .hue .step-list .step.selected .arrow{background-color:var(--elf--selected-color-2);display:block}.elf--fill-editor .hue .step-list .step.selected .color-view{box-shadow:0 0 0 1px var(--elf--selected-color-2)}.elf--fill-editor .hue .step-list .step.selected .color-view span{display:block}.elf--fill-editor .hue .step-list .step[data-cut=true] .arrow{top:100%}.elf--fill-editor .hue .step-list .step[data-cut=true] .color-view{border-radius:0}.elf--fill-editor .hue .step-list .step .color-view{align-items:center;border:2px solid #fff;bottom:0;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.elf--fill-editor .hue .step-list .step .color-view span{display:none;font-size:11px;font-weight:700;left:50%;position:absolute;top:calc(-100% - 1px);transform:translate(-50%)}.elf--fill-editor .hue .step-list .step .arrow{background-color:var(--elf--border-color);left:50%;top:calc(100% - .3px)}.elf--fill-editor .hue .step-list .step .arrow,.elf--fill-editor .hue .step-list .step .arrow:after{-webkit-clip-path:polygon(0 0,100% 0,50% 100%,0 0);clip-path:polygon(0 0,100% 0,50% 100%,0 0);height:6px;pointer-events:none;position:absolute;transform:translate(-50%) translateY(0);width:16px;z-index:1}.elf--fill-editor .hue .step-list .step .arrow:after{background-color:#fff;content:"";left:8px;top:-2px}.elf--gradient-picker-popup{grid-column-gap:10px;display:grid;grid-template-columns:1fr;margin-bottom:5px;width:224px}.elf--gradient-picker-popup>.box:first-child{margin-bottom:4px}.elf--gradient-picker-popup>.box>.colorpicker{display:block}.elf--gradient-picker-popup>.box>.assetpicker{display:none;min-height:310px}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.colorpicker{display:none}.elf--gradient-picker-popup[data-selected-editor=url]>.box>.assetpicker{display:block}.elf--gradient-picker-popup .popup-item{margin-bottom:5px}.elf--gradient-picker-popup .grid-2{display:grid;grid-template-columns:60px 1fr}.elf--gradient-picker-popup .grid-2 label{padding-right:2px;text-align:left}.elf--gradient-picker-popup .colorpicker{background-color:transparent;border:0;border-radius:0;box-shadow:none}.elf--gradient-picker-popup .colorpicker .color-panel{height:100px;margin-top:0}.elf--gradient-picker-popup .colorpicker input{border:0!important;border:1px solid hsla(0,0%,87%,.4)!important;color:var(--elf--font-color)!important;text-transform:uppercase}.elf--gradient-picker-popup .colorpicker .title{color:var(--elf--font-color)!important}.elf--gradient-picker-popup .colorpicker .colorsets{border-top:0 solid var(--elf--border-color)!important}.elf--gradient-picker-popup .color-assets-editor{padding:4px 0!important}.elf--gradient-picker-popup .assetpicker{background-color:#e6e6e61a;position:relative}.elf--gradient-picker-popup .assetpicker .image-asset-picker{display:block;height:200px;overflow:auto;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list{grid-column-gap:2px;display:grid;grid-template-columns:repeat(2,1fr)}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item{background-color:rgba(var(--elf--font-color),.5);margin-bottom:2px}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview{border:1px solid var(--elf--border-color);border-radius:2px;cursor:pointer;height:80px;-o-object-fit:contain;object-fit:contain;position:relative;text-align:center;width:100%}.elf--gradient-picker-popup .assetpicker .image-asset-picker .image-list .image-item .preview img{border:0;max-height:100%;max-width:100%;vertical-align:middle}.elf--fill-single-editor{border:1px solid transparent;box-sizing:border-box;cursor:pointer;height:var(--elf--input-height)}.elf--fill-single-editor.focused{border-color:var(--elf--selected-color);border-width:1px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--fill-single-editor.focused .opacity-input{border-left:1px solid var(--elf--border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag){border-color:var(--elf--input-border-color)}.elf--fill-single-editor:hover:not(.focused):not(.drag) .opacity-input{border-left:1px solid var(--elf--input-border-color)}.elf--fill-single-editor.has-label{grid-column-gap:2px;grid-template-columns:70px 1fr}.elf--fill-single-editor.has-label label{align-items:center;display:flex;justify-content:flex-start;line-height:1.6;padding:6px 4px 2px 2px;text-align:left;vertical-align:middle}.elf--fill-single-editor .area{grid-column-gap:2px;border-radius:4px;display:grid;grid-template-columns:24px 1fr;height:100%}.elf--fill-single-editor .preview{align-items:center;background-color:transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:flex-start;padding:2px;vertical-align:middle}.elf--fill-single-editor .preview .mini-view{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 3px,3px -3px,-3px 0;background-size:6px 6px;border:1px solid var(--elf--border-color);border-radius:2px;display:inline-block;height:20px;overflow:hidden;position:relative;width:20px}.elf--fill-single-editor .preview .mini-view .color-view{height:100%;left:0;position:absolute;top:0;width:100%}.elf--fill-single-editor .colors{align-items:center;display:flex;justify-content:flex-start;line-height:2.2;margin-left:2px}.elf--fill-single-editor .colors.simple{display:none}.elf--fill-single-editor .colors .color{border:1px solid var(--elf--font-color);border-radius:100%;display:inline-block;height:14px;pointer-events:all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;vertical-align:middle;width:14px}.elf--fill-single-editor .colors .color:not(:first-child){margin-left:-2px}.elf--gradient-single-editor{height:26px!important;text-align:center;width:100%}.elf--gradient-single-editor .preview{height:26px!important;width:26px!important}.elf--gradient-single-editor .preview .mini-view{height:100%!important;width:100%!important}.elf--gradient-single-editor .preview .mini-view .color-view{background-size:cover;border-radius:3px;cursor:pointer;height:100%}.elf--gradient-assets-property .gradient-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--gradient-assets-property .gradient-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--gradient-assets-property .gradient-list-tools[data-view-mode=grid] button[data-value=grid],.elf--gradient-assets-property .gradient-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--gradient-assets-property .gradient-list .gradient-view{pointer-events:none}.elf--gradient-assets-property .gradient-list[data-view-mode=grid]{display:block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .add-gradient-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:40px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item{display:inline-block;margin-bottom:1px;margin-right:1px;position:relative;vertical-align:middle;width:40px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item:hover[data-custom=true] .tools{display:inline-block}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview{background-color:transparent;background-image:linear-gradient(45deg,#8b8b8b 25%,transparent 0),linear-gradient(-45deg,#8b8b8b 25%,transparent 0),linear-gradient(45deg,transparent 75%,#8b8b8b 0),linear-gradient(-45deg,transparent 75%,#8b8b8b 0);background-position:0 0,0 5.5px,5.5px -5.5px,-5.5px 0;background-size:11px 11px;cursor:pointer;height:40px;position:relative;width:100%}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .preview .gradient-view{bottom:0;left:0;position:absolute;right:0;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools{display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools button{color:var(--elf--selected-font-color);height:10px;width:10px}.elf--gradient-assets-property .gradient-list[data-view-mode=grid] .gradient-item .tools svg{height:100%;width:100%}.elf--gradient-editor-view{bottom:0;display:none;left:0;position:absolute;right:0;top:0}.elf--gradient-editor-view.dragging .area-line{pointer-events:none!important}.elf--gradient-editor-view .gradient-rect{bottom:0;left:0;right:0;top:0}.elf--gradient-editor-view .center{background-color:var(--elf--selected-color-2);border:2px solid #fff;border-radius:50%;cursor:-webkit-grab;cursor:grab;filter:drop-shadow(0 0 2px rgb(43,43,43));height:10px;pointer-events:all;position:absolute;transform:translate(-50%) translateY(-50%);width:10px}.elf--gradient-editor-view .gradient-rect{box-sizing:border-box;cursor:move;filter:drop-shadow(0 0 2px rgb(43,43,43));pointer-events:none;position:absolute}.elf--gradient-editor-view .gradient-rect svg{height:100%;width:100%}.elf--gradient-editor-view .gradient-rect svg path{fill:transparent;stroke:#fff;stroke-width:1;pointer-events:all}.elf--gradient-editor-view .resizer{background-color:#fff;border:1px solid var(--elf--selected-color);border-radius:100%;box-sizing:border-box;filter:drop-shadow(0 0 2px rgb(43,43,43));height:14px;position:absolute;transform:translate(-50%,-50%);width:14px}.elf--gradient-editor-view .resizer[data-direction=bottom-right]{cursor:nwse-resize;left:100%;top:100%}.elf--gradient-editor-view .gradient-angle{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-angle path{fill:transparent;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle path.stick{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.color-stick{pointer-events:none}.elf--gradient-editor-view .gradient-angle path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-angle path.start-end-line{stroke:#fff;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.normal-line{stroke:var(--elf--selected-color-2);pointer-events:none}.elf--gradient-editor-view .gradient-angle path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-angle rect{pointer-events:all}.elf--gradient-editor-view .gradient-angle rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-angle circle{stroke-width:2;pointer-events:all}.elf--gradient-editor-view .gradient-angle circle:hover{cursor:-webkit-grab;cursor:grab}.elf--gradient-editor-view .gradient-angle circle.moved{cursor:-webkit-grabbing;cursor:grabbing}.elf--gradient-editor-view .gradient-angle circle.colorstep{stroke-width:1;stroke:#fff;r:7}.elf--gradient-editor-view .gradient-angle circle:not(.colorstep):not(.hover-colorstep){fill:#fff}.elf--gradient-editor-view .gradient-angle circle.size{fill:transparent!important;stroke:#fff;stroke-width:1;pointer-events:none}.elf--gradient-editor-view .gradient-angle circle.area-line{stroke-width:18;stroke:transparent;fill:transparent!important;pointer-events:stroke}.elf--gradient-editor-view .gradient-angle circle.point{fill:#fff;r:5}.elf--gradient-editor-view .gradient-angle circle.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-angle circle.hover-colorstep{r:8;filter:drop-shadow(0 0 1px rgb(255,255,255));pointer-events:none}.elf--gradient-editor-view .gradient-radial-line{bottom:0;filter:drop-shadow(0 0 2px rgb(43,43,43));left:0;overflow:visible;pointer-events:none;position:absolute;right:0;top:0}.elf--gradient-editor-view .gradient-radial-line path{fill:transparent;stroke:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line path.area-line{stroke-width:18;stroke:transparent}.elf--gradient-editor-view .gradient-radial-line path.timing{stroke:#fff;stroke-width:1;filter:drop-shadow(0 0 1px rgb(0,0,0));outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line path.step-point{stroke:#fff;stroke-width:1;outline:none}.elf--gradient-editor-view .gradient-radial-line path.timing-path{stroke:#ffffff80;stroke-width:2;outline:none;pointer-events:none}.elf--gradient-editor-view .gradient-radial-line circle.step-point,.elf--gradient-editor-view .gradient-radial-line ellipse.step-point{fill:#fff;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point,.elf--gradient-editor-view .gradient-radial-line ellipse.point{fill:#fff;r:5;pointer-events:all}.elf--gradient-editor-view .gradient-radial-line circle.point[data-type=start],.elf--gradient-editor-view .gradient-radial-line ellipse.point[data-type=start]{fill:var(--elf--selected-color)!important}.elf--gradient-editor-view .gradient-radial-line circle.size,.elf--gradient-editor-view .gradient-radial-line ellipse.size{fill:transparent;stroke:#fff}.elf--gradient-editor-view .gradient-radial-line rect{pointer-events:all}.elf--gradient-editor-view .gradient-radial-line rect.colorstep{stroke:#fff;stroke-width:1;outline:none}.elf--guide-line-view{height:100%;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translate(.5px,.5px);width:100%}.elf--guide-line-view path{stroke:var(--elf--selected-color)}.elf--guide-line-view path.arrow{stroke-width:1;fill:none}.elf--guide-line-view path.layer-line{stroke:var(--elf--font-color)}.elf--guide-line-view path.snap-line{stroke:var(--elf--selected-color)}.elf--guide-line-view line{stroke-width:1}.elf--guide-line-view line.base-line{stroke:var(--elf--guide-line-color)}.elf--guide-line-view line.dash-line{stroke:var(--elf--guide-line-color);stroke-dasharray:2 2}.elf--guide-line-view line.base-rect{stroke:var(--elf--guide-line-rect-color)}.elf--guide-line-view text{fill:var(--elf--guide-font-color);font-weight:400}.elf--guide-line-view text.text-center{text-anchor:middle}.elf--history-list-view .history-item{grid-column-gap:5px;display:grid;grid-template-columns:20px 1fr}.elf--history-list-view .history-item>span{color:var(--elf--font-color);vertical-align:middle}.elf--history-list-view .history-item>span svg{height:16px;width:16px}.elf--history-list-view .history-item>span svg path{fill:currentColor}.elf--hover-rect,.elf--hover-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--hover-rect{box-sizing:border-box}.elf--hover-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:2;left:0;position:absolute;top:0}.elf--hover-rect svg{bottom:0;left:0;position:absolute;right:0;top:0}.elf--hover-rect svg .offset-line{stroke:var(--elf--selected-color-2);stroke-dasharray:2 4;fill:transparent;stroke-width:1}.elf--hover-rect svg text{fill:var(--elf--selected-font-color)}.elf--hover-rect svg rect{fill:var(--elf--selection-tool-border-color)}.elf--image-select-editor{background-color:#0000004d;margin-bottom:10px;margin-top:10px;text-align:center}.elf--image-select-editor .preview-container{height:150px;position:relative;width:100%}.elf--image-select-editor .preview-container img{max-height:100%;max-width:100%}.elf--image-select-editor .preview-container input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;top:0;width:100%}.elf--image-select-editor .select-container{display:grid;grid-template-columns:1fr;padding:4px 0}.elf--image-select-editor .select-container button{width:100%}.elf--image-select-popup{display:grid;grid-template-columns:1fr;min-height:450px;padding:10px;width:500px}.elf--image-select-popup>.box{grid-column-gap:4px;grid-row-gap:4px;display:grid;grid-auto-rows:110px;grid-template-columns:repeat(4,1fr);margin-bottom:10px}.elf--image-select-popup>.box .image-item{border:1px solid hsla(0,0%,100%,.5);box-sizing:border-box;display:grid;position:relative;text-align:center}.elf--image-select-popup>.box .image-item:hover{background-color:#baffb1}.elf--image-select-popup>.box .image-item img{align-self:center;cursor:pointer;justify-self:center;max-height:100%;max-width:100%;pointer-events:all;vertical-align:middle}.elf--image-assets-property .image-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--image-assets-property .image-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--image-assets-property .image-list-tools[data-view-mode=grid] button[data-value=grid],.elf--image-assets-property .image-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--image-assets-property .image-list{padding:5px}.elf--image-assets-property .image-list .image-view{pointer-events:none}.elf--image-assets-property .image-list[data-view-mode=grid]{display:block}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item input[type=file]{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;display:inline-block;height:100%;left:0;opacity:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item button{cursor:pointer;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .add-image-item svg{cursor:pointer;height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item{display:inline-block;margin-bottom:4px;position:relative;vertical-align:middle;width:66px}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item:hover .tools{display:inline-block}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;overflow:hidden;position:relative;text-align:center;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .preview img{border:0;max-width:100%;vertical-align:middle}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title{display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .title input{width:100%}.elf--image-assets-property .image-list[data-view-mode=grid] .image-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.image-assets-property{padding-left:0!important;padding-right:0!important}.elf--keyframe-popup{width:250px}.elf--keyframe-popup .box .name{grid-column-gap:4px;display:grid;grid-template-columns:60px 1fr;height:20px;margin-bottom:5px}.elf--keyframe-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--keyframe-popup .box .property .title .tools{text-align:right}.elf--keyframe-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--keyframe-popup .box .offset-editor .offset{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:20px;position:relative}.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="0"] [data-offset-index="0"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="1"] [data-offset-index="1"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="10"] [data-offset-index="10"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="11"] [data-offset-index="11"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="12"] [data-offset-index="12"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="13"] [data-offset-index="13"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="14"] [data-offset-index="14"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="15"] [data-offset-index="15"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="16"] [data-offset-index="16"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="17"] [data-offset-index="17"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="18"] [data-offset-index="18"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="19"] [data-offset-index="19"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="2"] [data-offset-index="2"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="3"] [data-offset-index="3"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="4"] [data-offset-index="4"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="5"] [data-offset-index="5"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="6"] [data-offset-index="6"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="7"] [data-offset-index="7"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="8"] [data-offset-index="8"],.elf--keyframe-popup .box .offset-editor .offset[data-selected-value="9"] [data-offset-index="9"]{background-color:var(--elf--selected-color)}.elf--keyframe-popup .box .offset-editor .offset .offset-item{background-color:var(--elf--font-color);border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--keyframe-popup .box .offset-input{padding:5px 0}.elf--keyframe-popup .box .offset-input .title{grid-column-gap:2px;display:grid;grid-template-columns:100px 1fr}.elf--keyframe-popup .box .keyframe-property-list{max-height:300px;overflow:auto}.elf--keyframe-popup .box .keyframe-property-item{margin-top:2px;padding:4px 0}.elf--keyframe-popup .box .keyframe-property-item .title{grid-template-columns:1fr 30px}.elf--keyframe-popup .box .keyframe-property-item .value-editor{border:1px solid rgba(0,0,0,.3);padding:2px}.elf--keyframe-popup .box label{text-align:left;vertical-align:middle}.elf--keyframe-popup .box input,.elf--keyframe-popup .box select{vertical-align:middle;width:100%}.elf--keyframe-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--keyframe-popup .box .input.grid-1{grid-template-columns:1fr}.elf--keyframe-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--keyframe-list{display:block}.elf--keyframe-list .keyframe-item{border:1px solid var(--elf--border-color);cursor:pointer;margin-bottom:5px;padding:5px}.elf--keyframe-list .keyframe-item:first-child{margin-top:5px}.elf--keyframe-list .keyframe-item.selected{background-color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] button[data-type=list]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=list] .keyframe-code[data-type=list]{display:block}.elf--keyframe-list .keyframe-item[data-selected-value=code] button[data-type=code]{background-color:var(--elf--selected-color);color:var(--elf--border-color)}.elf--keyframe-list .keyframe-item[data-selected-value=code] .keyframe-code[data-type=code]{display:block}.elf--keyframe-list .keyframe-item .title{display:grid;grid-template-columns:1fr 60px;height:20px}.elf--keyframe-list .keyframe-item .title .name{padding:2px 0}.elf--keyframe-list .keyframe-item .title .tools{text-align:right;vertical-align:middle}.elf--keyframe-list .keyframe-item .title .tools .group{display:inline-block}.elf--keyframe-list .keyframe-item pre{margin:0;white-space:pre-wrap}.elf--keyframe-list .keyframe-item .keyframe-code{display:none}.elf--keyframe-list .keyframe-item .keyframe-code>.offset{display:grid;grid-template-columns:30px 1fr;margin-top:2px}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item{display:grid;grid-template-columns:1fr 1fr;text-align:left}.elf--keyframe-list .keyframe-item .keyframe-code .offset-property-item label{color:var(--elf--font-color);font-weight:700;padding-left:10px}.elf--keyframe-list .keyframe-item .offset-list{height:20px;padding:0 10px}.elf--keyframe-list .keyframe-item .offset-list .container{background-image:linear-gradient(to right,var(--elf--border-color),#000);background-position:0;background-repeat:no-repeat;background-size:100% 2px;height:100%;position:relative}.elf--keyframe-list .keyframe-item .offset-list .container .offset{background-color:#fff;border:1px solid var(--elf--border-color);border-radius:100%;height:10px;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);vertical-align:middle;width:10px}.elf--layer-append-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;pointer-events:all;position:absolute;right:0;top:0}.elf--layer-append-view .area{display:inline-block;pointer-events:none;position:absolute}.elf--layer-append-view .area .draw-item{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--layer-append-view .area-pointer-view,.elf--layer-append-view .area-rect{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;padding:2px 4px;position:absolute;transform:translate(5px,5px)}.elf--layer-append-view .area-pointer{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--layer-append-view .area-pointer .layer-add-snap-pointer{stroke:var(--elf--selected-color);stroke-width:1}.elf--layer-append-view input[type=file]{display:none}.elf--layer-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--layer-list .layer-item{content-visibility:auto;color:var(--elf--list-item-font-color);contain:size;height:30px;margin-bottom:0!important;padding:5px!important}.elf--layer-list .layer-item[data-is-hide=true]{display:none}.elf--layer-list .layer-item[data-is-group=true] .detail .folder{display:inline-block;transform:rotate(90deg);transition:transform .1s linear;vertical-align:middle}.elf--layer-list .layer-item[data-is-group=true] .detail .folder.collapsed{transform:rotate(0)}.elf--layer-list .layer-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--layer-list .layer-item .detail label{cursor:pointer;display:grid;grid-template-columns:20px 20px 1fr;overflow:hidden;padding:2px 0;pointer-events:all;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.elf--layer-list .layer-item .detail label svg path,.elf--layer-list .layer-item .detail label svg use{fill:currentColor}.elf--layer-list .layer-item .detail .tools{display:none;text-align:right}.elf--layer-list .layer-item .detail .tools .visible{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .visible[data-visible=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item .detail .tools .lock{color:var(--elf--list-item-disable-font-color)}.elf--layer-list .layer-item .detail .tools .lock[data-lock=true]{color:var(--elf--font-color)}.elf--layer-list .layer-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--layer-list .layer-item.selected-path{background-color:var(--elf--selected-color-3)}.elf--layer-list .layer-item:hover,.elf--layer-list .layer-item:not(.selected).hovered{box-shadow:inset 0 0 0 1px var(--elf--list-item-selected-color)}.elf--layer-list .layer-item:hover .tools,.elf--layer-list .layer-item:not(.selected).hovered .tools{display:block}.elf--layer-list .drag-start{opacity:.3}.elf--layer-list+.drag-point{border:1px solid var(--elf--selected-color);pointer-events:none;position:absolute}.elf--default-layout-item-property .constraints{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--default-layout-item-property .constraints-box{border:1px solid var(--elf--input-border-color);height:70px;margin-left:10px;position:relative;width:70px}.elf--default-layout-item-property .constraints-box>.item{box-sizing:border-box;position:absolute}.elf--default-layout-item-property .constraints-box>.item:hover{background-color:var(--elf--selected-hover-color)}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]{border-color:var(--elf--selected-color)!important;z-index:1}.elf--default-layout-item-property .constraints-box>.item[data-selected=true]:before{background-color:var(--elf--selected-color-2)!important}.elf--default-layout-item-property .constraints-box>.item[disabled]{display:none}.elf--default-layout-item-property .constraints-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;height:calc(50% - 2px);left:calc(25% + 1px);pointer-events:none;position:absolute;top:calc(25% + 1px);width:calc(50% - 2px)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal]:before{background-color:var(--elf--input-border-color);content:"";height:2px;left:3px;pointer-events:none;position:absolute;right:5px;top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]{border-left:2px solid var(--elf--font-color);border-right:2px solid var(--elf--font-color);bottom:-12px;box-sizing:border-box;height:8px;left:0;right:-1px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=scale]:before{background-color:var(--elf--font-color);height:3px;left:0;pointer-events:none;right:0;top:50%;width:auto}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=min]{height:12px;left:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]{height:12px;right:0;top:50%;transform:translateY(-50%);width:20px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=max]:before{left:5px;right:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]{height:12px;left:50%;left:calc(25% + 8px);right:calc(25% + 8px);top:50%;transform:translateY(-50%)}.elf--default-layout-item-property .constraints-box [data-key=constraints-horizontal][data-value=center]:before{left:0;right:0}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical]:before{background-color:var(--elf--input-border-color);bottom:4px;content:"";left:50%;pointer-events:none;position:absolute;top:4px;transform:translate(-50%);width:2px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]{border-bottom:1px solid var(--elf--font-color);border-top:1px solid var(--elf--font-color);bottom:-1px;box-sizing:border-box;right:-12px;top:0;width:8px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=scale]:before{background-color:var(--elf--font-color);bottom:0;height:auto;left:50%;pointer-events:none;top:0;transform:translate(-50%);width:3px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=min]{height:20px;left:50%;top:0;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=max]{bottom:0;height:20px;left:50%;transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]{bottom:calc(25% + 8px);left:50%;top:calc(25% + 8px);transform:translate(-50%);width:12px}.elf--default-layout-item-property .constraints-box [data-key=constraints-vertical][data-value=center]:before{bottom:0;top:0}.elf--flex-grow-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--flex-grow-tool-view .flex-grow-item{background-color:#fffc;border:1px solid var(--elf--font-color);border-radius:4px;display:flex;height:20px;left:0;line-height:1;overflow:hidden;pointer-events:all;position:absolute;text-align:center;top:0;transform:translate(-50%,-120%)}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=row]{cursor:ew-resize}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]{cursor:ns-resize;flex-direction:column;height:auto;overflow:hidden}.elf--flex-grow-tool-view .flex-grow-item[data-parent-direction=column]>*{padding-bottom:1px!important;padding-top:1px!important}.elf--flex-grow-tool-view .flex-grow-item .size{align-items:center;display:flex;flex:1 1 auto;justify-content:center;padding:4px}.elf--flex-grow-tool-view .flex-grow-item .grow{align-items:center;background-color:var(--elf--selected-color);color:var(--elf--selected-font-color);display:flex;flex:none;justify-content:center;padding:4px}.flex-layout-item{margin:10px auto}.flex-layout-item .grid-2{display:flex;gap:10px;justify-content:space-between}.flex-layout-item .grid-2 *{vertical-align:middle}.flex-layout-item .title{font-family:Courier New,Courier,monospace;font-weight:700;margin-bottom:3px;padding-left:2px;text-transform:uppercase}.flex-layout-editor{padding:0 10px 10px}.select-flex-direction{align-items:center;display:flex;flex-direction:row;justify-content:center;position:relative}.select-flex-direction>div{height:200px;position:relative;width:200px}.select-flex-direction .padding-top{right:0}.select-flex-direction .padding-left,.select-flex-direction .padding-top{background-color:var(--elf--border-color);display:block;left:0;position:absolute;top:0}.select-flex-direction .padding-left{bottom:0}.select-flex-direction .padding-right{top:0}.select-flex-direction .padding-bottom,.select-flex-direction .padding-right{background-color:var(--elf--border-color);bottom:0;display:block;position:absolute;right:0}.select-flex-direction .padding-bottom{left:0}.select-flex-direction .flex-group{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group:before{border:1px solid var(--elf--selected-color-2);content:"";display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool{border:1px solid var(--elf--selected-color-2);display:flex;gap:var(--flex-group-gap,2px);height:100%;position:absolute;width:100%}.select-flex-direction .flex-group-tool .tool-area{border:1px solid var(--elf--selected-color-2);display:inline-block;height:calc(100% - var(--flex-group-padding, 0)*2);position:absolute;width:calc(100% - var(--flex-group-padding, 0)*2)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-start][data-align-items=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=center][data-align-items=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=row] .tool-area-item[data-justify-content=flex-end][data-align-items=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-start]{left:0;top:0}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-start]{left:50%;top:0;transform:translate(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-start]{left:100%;top:0;transform:translate(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=center]{left:0;top:50%;transform:translateY(-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=center]{left:50%;top:50%;transform:translate(-50%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=center]{left:100%;top:50%;transform:translate(-100%,-50%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-start][data-justify-content=flex-end]{left:0;top:100%;transform:translateY(-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=center][data-justify-content=flex-end]{left:50%;top:100%;transform:translate(-50%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-direction=column] .tool-area-item[data-align-items=flex-end][data-justify-content=flex-end]{left:100%;top:100%;transform:translate(-100%,-100%)}.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=center][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=center] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-end] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-end][data-align-items=flex-start] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=center] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-end] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=flex-start][data-align-items=flex-start] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-around][data-align-items=flex-start] .tool-area-item[data-index="2"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="1"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="3"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="4"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="6"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="7"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between] .tool-area-item[data-index="9"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=center] .tool-area-item[data-index="5"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-end] .tool-area-item[data-index="8"],.select-flex-direction .flex-group-tool .tool-area[data-justify-content=space-between][data-align-items=flex-start] .tool-area-item[data-index="2"]{display:none}.select-flex-direction .flex-group-tool .tool-area .tool-area-item{background-color:transparent;background-color:#4b4bff0d;box-sizing:border-box;cursor:pointer;height:30px;left:0;position:absolute;top:0;transition:all .2s linear;transition:all .1s linear;width:30px}.select-flex-direction .flex-group-tool .tool-area .tool-area-item:hover{background-color:#4b4bff80}.select-flex-direction .flex-group-padding{border:1px solid var(--elf--selected-color-2);display:block;height:100%;position:absolute;width:100%}.select-flex-direction .flex-direction{display:flex;gap:2px;height:30px;width:24px}.select-flex-direction .flex-direction[data-value=column]{height:24px;width:30px}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item{height:6px!important;width:30px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:first-child{width:15px!important}.select-flex-direction .flex-direction[data-value=column] .flex-direction-item:nth-child(3){width:20px!important}.select-flex-direction .flex-direction .flex-direction-item{background-color:var(--elf--selected-color-2);border-radius:2px;display:inline-block;height:30px;width:6px}.select-flex-direction .flex-direction .flex-direction-item:first-child{background-color:var(--elf--selected-color);height:15px}.select-flex-direction .flex-direction .flex-direction-item:nth-child(3){background-color:var(--elf--selected-color);height:20px}.elf--grid-box-editor{border:1px solid var(--elf--border-color);padding:0 1px}.elf--grid-box-editor .grid-box-editor-item .item{grid-column-gap:4px;display:grid;grid-template-columns:1fr .5fr 1fr 40px;margin-bottom:4px;text-align:center}.elf--grid-box-editor .grid-box-editor-item .item.header{height:24px}.elf--grid-box-editor .grid-box-editor-item .item.header>*{border:1px solid hsla(0,0%,93%,.18);box-sizing:border-box;padding:4px 0}.elf--grid-box-editor .grid-box-editor-item .item .repeat button{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);height:16px;width:16px}.elf--grid-box-editor .grid-box-editor-item .item .repeat button svg{fill:currentColor}.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=auto]>.value,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=length]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.count,.elf--grid-box-editor .grid-box-editor-item .item[data-repeat-type=none]>.value{visibility:hidden}.elf--grid-box-editor .grid-box-editor-item .item .tools{padding:4px 0}.elf--grid-grow-tool-view{--cell-size:20px;--cell-padding-size:6px;--cell-color:#ff424d;--cell-grid-item-color:gray;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view[data-drag-target-item=true] .grid-item-tool{visibility:hidden}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool{opacity:0;transition:opacity .2s linear}.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool.selected,.elf--grid-grow-tool-view[data-grid-layout-own=false] .grid-item-tool:hover{opacity:1}.elf--grid-grow-tool-view .layout-pointer{background-color:#000;border-radius:4px;color:#fff;display:inline-block;left:0;padding:2px 4px;position:absolute;top:0;transform:translate(-50%)}.elf--grid-grow-tool-view .layout-rect{position:absolute}.elf--grid-grow-tool-view .layout-rect .grid-item{align-items:center;border:1px dashed var(--cell-grid-item-color);box-sizing:border-box;display:flex;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column{align-items:center;box-sizing:border-box;display:flex;height:var(--cell-size);justify-content:center;left:1px;overflow:hidden;position:relative;top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item{overflow:hidden;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner>.item>span{align-items:center;bottom:0;display:flex;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle{height:100%;width:14px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.left{left:2px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right{cursor:pointer;display:grid;grid-template-columns:1fr 1fr;right:2px;width:40px}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>*{height:var(--cell-size);pointer-events:all;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.column .grid-item-tool-inner .drag-handle.right>:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row{align-items:center;box-sizing:border-box;cursor:ns-resize;display:flex;justify-content:center;left:calc(var(--cell-size)*-1 - var(--cell-padding-size));overflow:hidden;padding-bottom:1px;padding-top:1px;position:relative;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .item{transform:rotate(-90deg)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle{height:40px;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.top{top:0}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{bottom:2px;cursor:pointer}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{height:20px;position:relative}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom:hover{filter:drop-shadow(0 0 1px black)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool{color:var(--elf--selected-font-color);cursor:ew-resize;pointer-events:all}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg{height:16px!important;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:16px!important}.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg path,.elf--grid-grow-tool-view .layout-rect .grid-item-tool svg use{fill:currentColor}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append{background-color:var(--cell-color);border-radius:2px;cursor:pointer;height:var(--cell-size);position:absolute;width:var(--cell-size)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.column-plus{right:calc(var(--cell-size)*-1 - var(--cell-padding-size));top:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.append.row-plus{bottom:calc(var(--cell-size)*-1 - var(--cell-padding-size));left:calc(var(--cell-size)*-1 - var(--cell-padding-size))}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner{flex-direction:column}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom{display:inline-block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool.row .grid-item-tool-inner .drag-handle.bottom>*{display:block}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner{background-color:var(--cell-color);border-radius:2px;box-sizing:border-box;display:flex;height:100%;margin-left:1px;margin-right:1px;pointer-events:all;position:relative;width:100%}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .item:hover{background-color:var(--elf--selected-color)}.elf--grid-grow-tool-view .layout-rect .grid-item-tool .grid-item-tool-inner .drag-handle{align-items:center;display:flex;justify-content:center}.elf--grid-grow-tool-view .gap-tool{background-image:repeating-linear-gradient(135deg,rgba(96,108,188,0),rgba(96,108,188,0) 6px,var(--cell-color) 6px,var(--cell-color) 7px);cursor:ew-resize;opacity:0;pointer-events:all;position:absolute}.elf--grid-grow-tool-view .gap-tool.row-gap{cursor:ns-resize}.elf--grid-grow-tool-view .gap-tool:hover{opacity:1}.elf--grid-layout-editor{padding:0 10px 10px}.elf--grid-layout-editor .grid-layout-item{margin-bottom:5px;margin-top:5px}.elf--grid-layout-editor .grid-layout-item>.label{margin-bottom:5px;padding:4px}.elf--layout-property .property-body{padding:0}.elf--layout-property .layout-list>[data-value]{display:none}.elf--layout-property .layout-list>[data-value].selected,.elf--layout-property .layout-list[data-selected-value=default] [data-value=default],.elf--layout-property .layout-list[data-selected-value=flex] [data-value=flex],.elf--layout-property .layout-list[data-selected-value=grid] [data-value=grid]{display:block}.elf--layout-property .layout-list .label{padding:10px 0}.elf--resizing-item-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-item-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-item-property .resizing-mode-box .rect{height:100%;position:relative;width:100%}.elf--resizing-item-property .resizing-mode-box .rect .inner-rect{border:1px solid var(--elf--font-color);height:30px;pointer-events:none;position:absolute;width:30px}.elf--resizing-item-property .resizing-mode-box .tool{cursor:pointer;height:100%;pointer-events:all;position:absolute;width:100%}.elf--resizing-item-property .resizing-mode-box .vertical{height:100%;left:50%;position:absolute;top:0;transform:translate(-50%);width:50%}.elf--resizing-item-property .resizing-mode-box .horizontal{height:50%;left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-top{display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;top:0;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .vertical-bottom{bottom:0;display:flex;height:10px;justify-content:center;left:50%;opacity:0;position:absolute;transform:translate(-50%);width:100%}.elf--resizing-item-property .resizing-mode-box .horizontal-left{display:flex;height:100%;justify-content:center;left:1px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box .horizontal-right{display:flex;height:100%;justify-content:center;opacity:0;position:absolute;right:1px;top:50%;transform:translateY(-50%);width:10px}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top{background-color:var(--elf--selected-hover-color);opacity:1}.elf--resizing-item-property .resizing-mode-box:hover .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box:hover .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box:hover .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed] .inner-rect{left:50%;top:50%;transform:translate(-50%,-50%)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .inner-rect{height:100%;left:50%;top:50%;transform:translate(-50%,-50%);width:50%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .inner-rect{height:50%;left:50%;top:50%;transform:translate(-50%,-50%);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fixed] .horizontal-right svg{color:var(--elf--font-color)}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .inner-rect{bottom:0;height:100%;left:0;right:0;top:0;transform:translate(0);width:100%}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top{opacity:1}.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-left svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .horizontal-right svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-bottom svg,.elf--resizing-item-property .resizing-mode-box[data-horizontal=fill-container][data-vertical=fill-container] .vertical-top svg{color:var(--elf--font-color)}.elf--resizing-item-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-item-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-item-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-item-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-item-property .has-label-grid>label:after,.elf--resizing-item-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-item-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--resizing-property .resizing-mode{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:100px 1fr;padding-bottom:10px}.elf--resizing-property .resizing-mode-box{border:1px solid var(--elf--input-border-color);border-radius:2px;height:63px;margin-left:10px;position:relative;width:63px}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content] .rect .inner-rect{border-color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .vertical svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect>.horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .inner-horizontal-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect .vertical svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=fixed]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-rect{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-horizontal-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .inner-vertical-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect .horizontal svg{color:var(--elf--input-border-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .horizontal:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=fixed][data-vertical=hug-content]>.rect:hover .vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect{border-color:transparent}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-vertical-rect{display:none}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect .inner-rect{border-color:var(--elf--font-color);display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal{display:block}.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover .vertical:hover svg,.elf--resizing-property .resizing-mode-box[data-horizontal=hug-content][data-vertical=hug-content]>.rect:hover>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect{border:1px solid var(--elf--font-color);box-sizing:border-box;display:flex;flex-direction:column;font-size:10px;height:42px;left:10px;position:absolute;top:10px;width:42px}.elf--resizing-property .resizing-mode-box>.rect svg{height:12px;width:12px}.elf--resizing-property .resizing-mode-box>.rect svg use{fill:currentColor}.elf--resizing-property .resizing-mode-box>.rect>.vertical{bottom:0;left:calc(50% - 9px);position:absolute;top:0;width:18px}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-top{display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;top:0;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.vertical .vertical-bottom{bottom:0;display:flex;height:12px;justify-content:center;left:calc(50% - 9px);position:absolute;width:100%}.elf--resizing-property .resizing-mode-box>.rect>.horizontal{align-items:center;display:flex;height:16px;justify-content:center;left:0;position:absolute;right:0;top:calc(50% - 8px)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover{background-color:var(--elf--selected-hover-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal:hover svg{color:var(--elf--font-color)}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-left{align-items:center;display:flex;height:20px;justify-content:center;left:0;position:absolute;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect>.horizontal .horizontal-right{align-items:center;display:flex;height:20px;justify-content:center;position:absolute;right:0;top:calc(50% - 9px);width:12px}.elf--resizing-property .resizing-mode-box>.rect .inner-rect{background-color:var(--elf--background-color);border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;height:18px;left:11px;pointer-events:none;position:absolute;top:11px;width:18px}.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{height:17px;left:0;right:0;top:11px}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect,.elf--resizing-property .resizing-mode-box>.rect .inner-vertical-rect{background-color:transparent;border:1px solid transparent;box-sizing:border-box;display:none;font-size:10px;pointer-events:none;position:absolute}.elf--resizing-property .resizing-mode-box>.rect .inner-horizontal-rect{height:100%;left:calc(50% - 9px);top:0;width:18px}.elf--resizing-property .has-label-grid{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:20px 1fr;margin-bottom:5px}.elf--resizing-property .has-label-grid>label{display:inline-block;position:relative;vertical-align:middle}.elf--resizing-property .has-label-grid>label[data-direction=vertical]{transform:rotate(-90deg)}.elf--resizing-property .has-label-grid>label:before{border-left:1px solid var(--elf--font-color);border-right:1px solid var(--elf--font-color);height:10px}.elf--resizing-property .has-label-grid>label:after,.elf--resizing-property .has-label-grid>label:before{content:"";display:inline-block;margin-right:4px;position:absolute;top:50%;transform:translateY(-50%);vertical-align:middle;width:16px}.elf--resizing-property .has-label-grid>label:after{border-top:1px solid var(--elf--font-color);height:1px}.elf--line-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--line-view .horizontal-line{bottom:0;cursor:ew-resize;left:-1px;pointer-events:all;position:absolute;top:0;width:3px}.elf--line-view .horizontal-line:before{background-color:var(--elf--selected-color);bottom:0;content:"";left:50%;pointer-events:none;position:absolute;top:0;transform:translate(-50%);width:1px}.elf--line-view .vertical-line{cursor:ns-resize;height:3px;left:0;pointer-events:all;position:absolute;right:0;top:-1px}.elf--line-view .vertical-line:before{background-color:var(--elf--selected-color);content:"";height:1px;left:0;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.elf--draw-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap;width:550px}.elf--draw-manager .text{display:inline-block}.elf--draw-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--draw-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--draw-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--draw-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--draw-manager .tools>div{display:inline-block;margin-left:10px;vertical-align:middle;white-space:inherit}.elf--draw-manager .tools>div>*{display:inline-block;vertical-align:middle;width:auto}.elf--draw-manager .tools>div label{line-height:1.6;padding:3px 2px;text-align:right;vertical-align:middle}.elf--draw-manager .tools>div .number-input-editor,.elf--draw-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--draw-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--draw-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:20px;overflow:hidden;width:20px}.elf--draw-manager>*{vertical-align:middle}.elf--path-draw-view{background-color:transparent;cursor:crosshair;display:none}.elf--path-draw-view,.elf--path-draw-view .path-draw-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view{background-color:transparent;bottom:0;cursor:crosshair;display:none;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .segment-box{background-color:#9e88ff33;border:.5px solid rgba(92,63,255,.9);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--path-editor-view .path-container{bottom:0;left:0;position:absolute;right:0;top:0}.elf--path-editor-view .path-container:not(.modify) path.object,.elf--path-editor-view .path-container:not(.segment-move) path.object{stroke:#848484}.elf--path-editor-view .path-container.split-panel{pointer-events:none}.elf--path-editor-view .path-container.has-transform{background-color:var(--elf--path-background-color)}.elf--path-editor-view .path-container.path{cursor:crosshair}.elf--path-editor-view .path-container.path svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.alt svg circle,.elf--path-editor-view .path-container.segment-move{cursor:move}.elf--path-editor-view .path-container.transform svg .snap-path,.elf--path-editor-view .path-container.transform svg circle,.elf--path-editor-view .path-container.transform svg line,.elf--path-editor-view .path-container.transform svg rect,.elf--path-editor-view .path-container.transform svg text{display:none}.elf--path-editor-view .path-container.modify,.elf--path-editor-view .path-container.segment-move{cursor:default}.elf--path-editor-view .path-container.modify svg path.object,.elf--path-editor-view .path-container.segment-move svg path.object{pointer-events:stroke}.elf--path-editor-view .path-container.box svg path.object{stroke:var(--elf--border-color)}.elf--path-editor-view .path-container.has-one-stroke-width svg path.object{stroke:transparent}.elf--path-editor-view .path-container.is-control svg path.path-area{display:none}.elf--path-editor-view .path-tool{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--path-editor-view .path-tool .transform-manager{display:none;pointer-events:all;position:absolute}.elf--path-editor-view .path-tool .transform-manager[data-show=true]{display:inline-block}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"]{box-shadow:none}.elf--path-editor-view .path-tool .transform-manager[data-position="to rotate"] .transform-tool-item:not([data-position="to rotate"]){display:none}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item{background-color:#ffffff80;box-shadow:0 0 0 1px #7b7b7b;display:inline-block;height:8px;position:absolute;transform:translate(-50%,-50%);width:8px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewX"]{background-color:#fff;cursor:move;left:calc(50% - 20px);top:-20px;transform:skew(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to skewY"]{background-color:#fff;cursor:move;left:calc(50% + 20px);top:-20px;transform:skewY(10deg)}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to rotate"]{background-color:#fff;border-radius:100%;cursor:move;left:50%;top:-20px}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to move"]{background-color:transparent;bottom:0;box-shadow:0 0 0 1px var(--elf--selected-color);cursor:move;height:auto;left:0;right:0;top:0;transform:none;width:auto}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to top"]{cursor:ns-resize;left:50%;top:0}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to left"]{cursor:ew-resize;left:0;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to right"]{cursor:ew-resize;left:100%;top:50%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom"]{cursor:ns-resize;left:50%;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%}.elf--path-editor-view .path-tool .transform-manager .transform-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%}.elf--path-editor-view svg{height:100%;width:100%}.elf--path-editor-view svg line{stroke-width:1;content-visibility:auto}.elf--path-editor-view svg line[data-guide=true]{stroke:var(--elf--path-segment-stroke-color);pointer-events:none}.elf--path-editor-view svg line[data-distance=true]{stroke:var(--elf--selected-color);stroke-dasharray:2 2;pointer-events:none}.elf--path-editor-view svg circle{fill:#fff;stroke:var(--elf--path-guide-color);stroke-width:1;content-visibility:auto;cursor:move}.elf--path-editor-view svg circle.curve{stroke:var(--elf--path-segment-stroke-color)}.elf--path-editor-view svg circle[data-is-first=true]{fill:red!important;z-index:1}.elf--path-editor-view svg circle[data-is-second=true]{fill:#00f!important;z-index:1}.elf--path-editor-view svg circle[data-is-last=true]{fill:red!important;z-index:0}.elf--path-editor-view svg circle[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff;r:5;stroke-width:2}.elf--path-editor-view svg circle[data-selected=true][data-is-first=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-second=true]{fill:#00f!important;stroke:#fff}.elf--path-editor-view svg circle[data-selected=true][data-is-last=true]{fill:red!important;stroke:#fff}.elf--path-editor-view svg circle[data-segment-point=endPoint]:not([data-selected=true]),.elf--path-editor-view svg circle[data-segment-point=reversePoint]:not([data-selected=true]){r:3}.elf--path-editor-view svg circle.split-circle{fill:var(--elf--selected-color);stroke:#fff;pointer-events:none}.elf--path-editor-view svg .svg-canvas{fill:transparent;stroke:var(--elf--selected-border-color);stroke-width:1;pointer-events:none}.elf--path-editor-view svg path{fill:transparent;content-visibility:auto}.elf--path-editor-view svg path.path-area{stroke-width:0}.elf--path-editor-view svg path.path-area.selected,.elf--path-editor-view svg path.path-area:hover{fill:url(#stripe)}.elf--path-editor-view svg path.curve{fill:#fff;stroke-width:1;stroke:var(--elf--path-segment-stroke-color);cursor:move}.elf--path-editor-view svg path.curve[data-selected=true]{fill:var(--elf--selected-color);stroke:#fff}.elf--path-editor-view svg path.guide,.elf--path-editor-view svg path.segment{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1}.elf--path-editor-view svg path.object{fill:transparent;stroke-width:1}.elf--path-editor-view svg path.split-path{fill:transparent;stroke:#959595;stroke-width:2;pointer-events:stroke}.elf--path-editor-view svg path.split-path:hover{stroke:var(--elf--selected-color);stroke-width:2;cursor:copy}.elf--path-editor-view svg path.snap-path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;filter:drop-shadow(2px 4px 6px white)}.elf--path-editor-view svg text{fill:var(--elf--selected-color);stroke:var(--elf--selected-color);stroke-width:.5;font-weight:700;pointer-events:none}.elf--path-manager{background-color:var(--elf--background-color);border-radius:4px;color:var(--elf--font-color);display:none;height:100%;outline:none;padding:4px 10px 4px 54px;pointer-events:all;text-align:center;white-space:nowrap}.elf--path-manager button{box-sizing:border-box;display:inline-block;height:auto;height:34px;margin:0 2px;text-decoration:underline;vertical-align:middle;white-space:nowrap;width:auto;width:34px}.elf--path-manager button svg{height:20px;vertical-align:middle;width:20px}.elf--path-manager .text{display:inline-block}.elf--path-manager .split{border-right:1px solid hsla(0,0%,100%,.3);display:inline-block;height:20px;margin-right:2px;vertical-align:middle;width:3px}.elf--path-manager .subpath{background-color:var(--elf--background-color);border-radius:4px;display:inline-block;left:0;padding:4px 2px;position:absolute;right:0;text-align:left;top:calc(100% + 2px)}.elf--path-manager .subpath button{box-sizing:border-box;display:inline-block;margin:0 2px;text-decoration:underline;white-space:nowrap}.elf--path-manager .subpath button,.elf--path-manager .subpath button svg{height:24px;vertical-align:middle;width:24px}.elf--path-manager .tools{display:inline-block;height:100%;white-space:nowrap}.elf--path-manager .tools.left{bottom:0;left:-2px;position:absolute;top:0}.elf--path-manager .tools.left button{border-bottom-left-radius:4px;border-top-left-radius:4px;color:var(--elf--selected-font-color);height:100%;padding:4px 10px;text-decoration:none;text-shadow:1px 1px 2px rgba(0,0,0,.95);width:auto}.elf--path-manager .tools[data-selected-value=modify] button[data-value=modify],.elf--path-manager .tools[data-selected-value=path] button[data-value=path],.elf--path-manager .tools[data-selected-value=transform] button[data-value=transform],.elf--path-manager .tools[data-selected-value=warp] button[data-value=warp]{color:var(--elf--selected-color)}.elf--path-manager .tools>div{display:inline-block;height:100%;padding:5px 0;vertical-align:middle}.elf--path-manager .tools>div label{line-height:20px;padding:3px 2px;text-align:right;width:auto}.elf--path-manager .tools>div .number-input-editor,.elf--path-manager .tools>div .number-input-editor .range--editor-type{display:inline-block}.elf--path-manager .tools>div .number-input-editor .range--editor-type input[type=number]{background-color:var(--elf--border-color)}.elf--path-manager .tools>div .fill-single-editor{display:inline-block;vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor label{vertical-align:middle}.elf--path-manager .tools>div .fill-single-editor .preview{border:1px solid var(--elf--selected-color);height:18px;overflow:hidden;width:18px}.elf--path-manager>*{vertical-align:middle}.elf--boolean-item{padding:8px 5px 10px}.elf--boolean-item>div{grid-column-gap:10px;display:grid;grid-template-columns:1fr 1fr;height:30px;padding:4px 0;text-align:left}.elf--boolean-item>div.divider{background-color:var(--elf--property-border-color);font-size:0;height:1px;margin:10px 0;padding:0}.elf--boolean-item button{background-color:transparent;background-image:none;border:0;box-shadow:none;flex:1 1 auto;font-size:11px;height:24px;text-align:left;vertical-align:middle;width:auto}.elf--boolean-item button[data-no-title=true] .title{display:none}.elf--boolean-item button svg{height:20px;vertical-align:middle;width:20px}.elf--boolean-item .title{color:#999}.elf--pattern-assets-property .pattern-list{max-height:240px;overflow:auto;padding:5px}.elf--pattern-assets-property .pattern-list .pattern-view{pointer-events:none}.elf--pattern-assets-property .pattern-list[data-view-mode=grid]{display:block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .add-pattern-item{border:1px solid var(--elf--selected-color);color:var(--elf--font-color);cursor:pointer;display:inline-block;height:54px;padding-top:2px;position:relative;text-align:center;vertical-align:top;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item{border:1px solid var(--elf--border-color);box-sizing:border-box;display:inline-block;margin-bottom:3px;margin-right:3px;position:relative}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item:hover[data-custom=true] .tools{display:inline-block}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview{cursor:pointer;height:54px;position:relative;width:54px}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .preview .pattern-view{background-color:#fff;bottom:0;left:0;position:absolute;right:0;top:0}.elf--pattern-assets-property .pattern-list[data-view-mode=grid] .pattern-item .tools{color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.property.pattern-assets-property{padding-left:0!important;padding-right:0!important}.elf--pattern-editor .label{height:20px;margin-top:2px}.elf--pattern-editor .label.hide{display:none}.elf--pattern-editor .label label{padding-left:5px;vertical-align:middle}.elf--pattern-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--pattern-editor .pattern-list{-moz-column-gap:4px;column-gap:4px;display:flex;flex-wrap:wrap;padding-bottom:10px;row-gap:4px}.elf--pattern-editor .pattern-list .pattern-item{box-shadow:0 0 0 1px var(--elf--border-color);display:inline-block;position:relative;text-align:center}.elf--pattern-editor .pattern-list .pattern-item.selected{background-color:var(--elf--border-color)}.elf--pattern-editor .pattern-list .pattern-item:hover .tools{display:inline-block}.elf--pattern-editor .pattern-list .pattern-item .tools{background-color:#ffffffe6;color:var(--elf--selected-color);display:none;position:absolute;right:0;top:0}.pattern-info-popup{width:240px}.pattern-info-popup .box>div{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr}.pattern-info-popup .box>div.grid-2{grid-template-columns:1fr 1fr}.el--pattern-property .pattern-property{display:flex}.el--pattern-property .add-tools{opacity:.3;transition:opacity .2s}.el--pattern-property .add-tools:hover{opacity:1}.el--pattern-property .add-tools svg{height:20px;width:20px}.elf--pattern-size-editor{height:60px;text-align:center;width:60px}.elf--pattern-size-editor .preview{height:100%}.elf--pattern-size-editor .preview .mini-view{background-color:#fff;height:100%}.elf--pattern-size-editor .preview .mini-view .color-view{cursor:pointer;height:100%}.grid-layout{-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 20px;margin-bottom:4px}.elf--project-list{margin:0!important}.elf--project-list .project-item{cursor:pointer;padding:5px 10px!important}.elf--project-list .project-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--project-list .project-item .detail label{cursor:pointer;padding:2px 0}.elf--project-list .project-item .detail .tools{text-align:right}.elf--project-list .project-item.selected{background-color:var(--elf--selected-color-2);color:var(--elf--selected-font-color)}.elf--selection-info-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-info-view .artboard-title{display:inline-block;pointer-events:all;position:absolute;transform:translateY(-100%);vertical-align:middle}.elf--selection-info-view .artboard-title svg{height:16px;vertical-align:middle;width:16px}.elf--selection-info-view .artboard-title svg path,.elf--selection-info-view .artboard-title svg use{fill:currentColor}.elf--selection-info-view .artboard-title>div{padding:2px 5px}.elf--ghost-tool-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--ghost-tool-view svg{height:100%;left:0;position:absolute;top:0;width:100%}.elf--ghost-tool-view svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:2;stroke-dasharray:2 2}.elf--ghost-tool-view svg path.container,.elf--ghost-tool-view svg path.target,.elf--ghost-tool-view svg path.target-parent,.elf--ghost-tool-view svg path.target-rect{stroke-width:0}.elf--ghost-tool-view svg path.flex-item{stroke:transparent;fill:#3232321a;z-index:-1000}.elf--ghost-tool-view svg path.flex-target{stroke-width:5;stroke:var(--elf--selected-color)}.elf--selection-view{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--selection-view.editing-path,.elf--selection-view.editing-polygon{display:none!important}.elf--selection-view.empty>*{display:none}.elf--selection-view[data-has-shift=true] .pointer-rect .pointer{background-color:transparent}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-left-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-right-width:0;border-top-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.one-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="1"]{border-bottom-width:0;border-right-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="2"]{border-bottom-width:0;border-left-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="3"]{border-left-width:0;border-top-width:0}.elf--selection-view.group-selection-view[data-has-shift=true] .pointer-rect .pointer[data-number="4"]{border-right-width:0;border-top-width:0}.pointer-rect{bottom:0;pointer-events:none;right:0}.pointer-rect,.pointer-rect .pointer{box-sizing:border-box;left:0;position:absolute;top:0}.pointer-rect .pointer{background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:10px;pointer-events:all;width:10px}.pointer-rect .pointer[data-number="5"]{background-color:var(--elf--selected-color);border-radius:100%;height:7px;pointer-events:none;width:7px}.pointer-rect .pointer[data-number="11"],.pointer-rect .pointer[data-number="12"],.pointer-rect .pointer[data-number="13"],.pointer-rect .pointer[data-number="14"]{background-color:transparent;border:0}.pointer-rect .size-pointer{background-color:var(--elf--selected-color);border-radius:4px;color:var(--elf--selected-font-color);display:inline-block;left:0;padding:2px 4px;position:absolute;top:0}.pointer-rect .size-pointer[data-layout=grid]{background-color:red}.pointer-rect .size-pointer[data-layout=flex]{background-color:green}.pointer-rect .rotate-pointer{background-color:#fff;border:1px solid orange;border-radius:100%;box-sizing:border-box;display:inline-block;height:14px;left:0;overflow:hidden;pointer-events:all;position:absolute;top:0;width:14px}.pointer-rect .rotate-pointer:before{background-color:orange;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.pointer-rect .rotate-pointer.no-fill{background-color:transparent;border:none;height:14px;width:14px}.pointer-rect .rotate-pointer.no-fill:before{display:none}.pointer-rect .line{stroke:var(--elf--selection-tool-border-color);fill:transparent;stroke-width:1;height:100%;left:0;position:absolute;top:0;width:100%}.pointer-rect .line path{stroke-width:2;transform:translate(.5px,.5px)}.selection-tool{border:.5px solid var(--elf--selection-tool-border-color);position:absolute}.selection-tool.path .selection-tool-item[data-position=path],.selection-tool.polygon .selection-tool-item[data-position=path],.selection-tool.textpath .selection-tool-item[data-position=path]{background-color:#fffc;border:1px solid var(--elf--border-color);bottom:auto;left:50%;opacity:1;right:auto;top:-30px;transform:translate(-50%,-50%)}.selection-tool[data-is-layout-container=true][data-layout-container=flex]{border:2px solid #4fdc4f}.selection-tool[data-is-layout-container=true][data-layout-container=grid]{border:2px solid #e46363}.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to bottom"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top left"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top right"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position="to top"],.selection-tool[data-is-layout-item=true][data-selection-length="1"][data-is-layout-container=false] [data-position=move]{display:none}.selection-tool .selection-tool-item{background-color:var(--elf--selection-tool-border-color);border:1px solid var(--elf--selection-tool-border-color);display:inline-block;height:8px;pointer-events:all;position:absolute;transform:translate(-50%,-50%);width:8px}.selection-tool .selection-tool-item:not([data-position=move]){background-color:#fff;border:1px solid var(--elf--selection-tool-border-color);box-sizing:border-box}.selection-tool .selection-tool-item:before{background-color:#333c;border:var(--elf--border-color);border-radius:3px;color:#fff;content:attr(data-position-text);opacity:0;padding:4px 10px;pointer-events:none;position:absolute;text-align:center;transition:opacity .3s linear;white-space:nowrap}.selection-tool .selection-tool-item[data-position=move]{background-color:var(--elf--selected-color);border:1px solid var(--elf--selected-color);box-sizing:border-box;color:var(--elf--selected-font-color);cursor:move;display:inline-block;height:20px;left:0;overflow:hidden;padding-right:5px;top:-2px;transform:translateY(-100%);vertical-align:middle;width:auto}.selection-tool .selection-tool-item[data-position=move]:before{left:0;top:0;transform:translate(-100%,calc(-100% - 5px))}.selection-tool .selection-tool-item[data-position=move] svg{height:15px;width:15px}.selection-tool .selection-tool-item[data-position=move] span{color:var(--elf--selected-font-color);vertical-align:middle}.selection-tool .selection-tool-item[data-position=path]{background-color:transparent;border:0;border-radius:0;cursor:move;height:20px;left:0;opacity:0;top:0;transform:none;width:20px}.selection-tool .selection-tool-item[data-position=path]:before{left:50%;top:50%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position=path] svg{height:100%;width:100%}.selection-tool .selection-tool-item[data-position="to top"]{background-color:transparent;border:0;cursor:ns-resize;height:2px;left:0;right:0;top:-2px;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to bottom"]{background-color:transparent;border:0;bottom:-2px;cursor:ns-resize;height:2px;left:0;right:0;transform:none;width:auto}.selection-tool .selection-tool-item[data-position="to right"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;right:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to left"]{background-color:transparent;border:0;bottom:0;cursor:ew-resize;height:auto;left:-2px;top:0;transform:none;width:2px}.selection-tool .selection-tool-item[data-position="to top left"]{cursor:nwse-resize;left:0;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to top right"]{cursor:nesw-resize;left:100%;top:0;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom left"]{cursor:nesw-resize;left:0;top:100%;transform:translate(-50%,-50%)}.selection-tool .selection-tool-item[data-position="to bottom right"]{cursor:nwse-resize;left:100%;top:100%;transform:translate(-50%,-50%)}.elf--selector-popup{height:auto;padding:7px;width:250px}.elf--selector-popup .box .name{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--selector-popup .box .name input{width:100%}.elf--selector-list{grid-template-columns:1fr!important}.elf--selector-list .selector-item{grid-column-gap:4px;cursor:pointer;display:grid;grid-template-columns:1fr;height:30px;margin-bottom:5px;padding:5px}.elf--selector-list .selector-item:first-child{margin-top:5px}.elf--selector-list .selector-item.selected{background-color:var(--elf--border-color)}.elf--selector-list .selector-item .title{display:grid;grid-template-columns:1fr 20px;height:20px}.elf--selector-list .selector-item .title .name{padding:2px 0}.elf--selector-list .selector-item .title .name span{background-color:var(--elf--selected-color);border-radius:3px;color:var(--elf--selected-font-color);font-weight:700;padding:2px 4px}.elf--selector-list .selector-item .title .tools{text-align:right;vertical-align:middle}.elf--svgfilter-assets-property .svgfilter-assets{padding:5px}.elf--svgfilter-assets-property .svgfilter-list-tools{grid-column-gap:2px;display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px;text-align:left}.elf--svgfilter-assets-property .svgfilter-list-tools button{border:1px solid var(--elf--border-color);padding:2px 10px}.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=grid] button[data-value=grid],.elf--svgfilter-assets-property .svgfilter-list-tools[data-view-mode=list] button[data-value=list]{background-color:var(--elf--selected-border-color);background-image:none;border-color:var(--elf--selected-border-color);color:var(--elf--selected-font-color)}.elf--svgfilter-assets-property .svgfilter-list{padding:5px}.elf--svgfilter-assets-property .svgfilter-list .svgfilter-view{background-image:radial-gradient(#ff0 0,red 100%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid]{display:block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item{border:1px solid var(--elf--selected-color);border-radius:2px;color:var(--elf--font-color);cursor:pointer;display:inline-block;height:66px;padding:20px;position:relative;text-align:center;vertical-align:top;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .add-svgfilter-item button svg{height:20px;width:20px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item{display:inline-block;margin-bottom:4px;margin-right:2px;position:relative;vertical-align:middle;width:66px}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item:hover .tools{display:inline-block}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .preview{border:1px solid #e6e6e6;border-radius:2px;cursor:pointer;height:66px;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title{grid-row-gap:4px;display:grid;grid-template-columns:1fr;padding:4px 0;position:relative;width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .title input{width:100%}.elf--svgfilter-assets-property .svgfilter-list[data-view-mode=grid] .svgfilter-item .tools{background-color:transparent;color:var(--elf--selected-font-color);display:none;padding:2px;position:absolute;right:0;text-align:right;top:0}.elf--color-matrix-editor .title{color:var(--elf--selected-color);padding:5px 0}.elf--color-matrix-editor .color-matrix-template{border:1px solid var(--elf--border-color);box-sizing:border-box;max-height:383px;overflow:auto;padding:5px 10px}.elf--color-matrix-editor .color-matrix-template input,.elf--color-matrix-editor .color-matrix-template select{width:100%}.elf--color-matrix-editor .color-matrix-template .sample-item{cursor:pointer;padding:2px 5px}.elf--color-matrix-editor .color-matrix-template .sample-item:hover{background-color:#fff3;color:var(--elf--selected-color)}.elf--func-filter-editor{display:grid;grid-template-columns:1fr}.elf--func-filter-editor.focused{border-radius:3px;box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--func-filter-editor.has-label{grid-template-columns:60px 1fr}.elf--func-filter-editor.has-label label{padding:2px 0;padding-left:0!important;text-align:left;vertical-align:middle}.elf--func-filter-editor>[data-type]{display:none;padding:4px 0}.elf--func-filter-editor[data-selected-type=discrete]>[data-type=table],.elf--func-filter-editor[data-selected-type=gamma]>[data-type=gamma],.elf--func-filter-editor[data-selected-type=identity]>[data-type=identity],.elf--func-filter-editor[data-selected-type=linear]>[data-type=linear],.elf--func-filter-editor[data-selected-type=table]>[data-type=table]{display:block}.elf--svg-filter-editor{grid-column-gap:10px;color:var(--elf--font-color);display:grid;grid-template-columns:150px 1fr 200px;height:100%;position:relative}.elf--svg-filter-editor .tab>.tab-header{height:30px}.elf--svg-filter-editor .label{height:20px;margin-top:2px}.elf--svg-filter-editor .label label{padding-left:5px;vertical-align:middle}.elf--svg-filter-editor .tools{float:right;text-align:right;vertical-align:middle}.elf--svg-filter-editor .tools select{display:inline-block;width:100px!important}.elf--svg-filter-editor .left{height:100%;position:relative}.elf--svg-filter-editor .left .filter-item-list{height:100%;overflow:auto;padding:10px 5px}.elf--svg-filter-editor .left .filter-item-list .group{margin-bottom:6px}.elf--svg-filter-editor .left .filter-item-list .group:before{color:var(--elf--selected-color);content:attr(label);display:block}.elf--svg-filter-editor .left .filter-item-list .group .item{color:var(--elf--font-color);cursor:pointer;padding:2px 10px;vertical-align:middle}.elf--svg-filter-editor .left .filter-item-list .group .item svg{height:20px;width:20px}.elf--svg-filter-editor .left .filter-item-list .group .item[value=BackgroundImage],.elf--svg-filter-editor .left .filter-item-list .group .item[value=FillPaint],.elf--svg-filter-editor .left .filter-item-list .group .item[value=SourceGraphic]{color:var(--elf--selected-color)}.elf--svg-filter-editor .left .filter-item-list .group .item:hover{background-color:#ffffff4d}.elf--svg-filter-editor .center{overflow:auto;position:relative}.elf--svg-filter-editor .center .graph{border:1px solid var(--elf--selected-color);box-sizing:border-box;height:100%;overflow:auto;position:relative}.elf--svg-filter-editor .center .graph .connected-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .connected-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .connected-line-panel svg path{fill:transparent;stroke:var(--elf--selected-color);stroke-width:1;pointer-events:none}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=graphic]{stroke:#a6a6ff}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=source]{stroke:#9acd32}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=modifier]{stroke:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=lighting]{stroke:#e6ff00}.elf--svg-filter-editor .center .graph .connected-line-panel svg path[data-source-type=combiner]{stroke:#ff9bff}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle{fill:var(--elf--selected-color);r:4;stroke:rgba(var(--elf--selected-color),.5);stroke-width:0;cursor:pointer;pointer-events:all}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=graphic]{fill:#a6a6ff;stroke:#a6a6ff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=source]{fill:#9acd32;stroke:#9acd3280}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=modifier]{fill:var(--elf--selected-color);stroke:rgba(var(--elf--selected-color),.5)}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=lighting]{fill:#e6ff00;stroke:#e6ff0080}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle[data-source-type=combiner]{fill:#ff9bff;stroke:#ff9bff80}.elf--svg-filter-editor .center .graph .connected-line-panel svg circle:hover{stroke-width:4}.elf--svg-filter-editor .center .graph .drag-line-panel{height:1000px;left:0;position:absolute;top:0;width:1000px}.elf--svg-filter-editor .center .graph .drag-line-panel svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .drag-line-panel svg path{stroke:var(--elf--selected-color);stroke-width:1}.elf--svg-filter-editor .center .graph .graph-panel{height:1000px;pointer-events:none;position:relative;width:1000px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node{background-color:var(--elf--background-color);border-radius:10px;box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px #777;cursor:pointer;display:inline-block;height:40px;left:10px;pointer-events:all;position:absolute;top:10px;width:40px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=BackgroundImage],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=FillPaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Flood],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Image],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceAlpha],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SourceGraphic],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=StrokePaint],.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=Turbulence]{border-radius:0}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out{background-color:#f8e579}.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=DistantLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=PointLight] .out svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node[data-type=SpotLight] .out svg{display:none}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.label{bottom:100%;color:var(--elf--font-color);display:inline-block;left:50%;position:absolute;transform:translate(-50%)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove{background-color:var(--elf--selected-color);border-radius:100%;color:var(--elf--font-color);display:inline-block;height:12px;left:50%;position:absolute;top:-6px;transform:translate(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg{height:100%;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg circle,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg rect,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.remove svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview{height:100%;pointer-events:none;position:relative;width:100%}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Composite] svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-filter-type=Merge] svg{transform:translate(-50%,-50%) rotate(90deg)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=graphic]{color:#a6a6ff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=source]{color:#9acd32}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=modifier]{color:var(--elf--selected-color)}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting]{color:#e6ff00}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=combiner]{color:#ff9bff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview[data-source-type=lighting] svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.3))}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg{display:block;height:30px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg ellipse,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg line,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg path,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polygon,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg polyline,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg text,.elf--svg-filter-editor .center .graph .graph-panel .filter-node>.preview svg use{fill:currentColor}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in-list{display:inline-block;left:-14px;position:absolute;top:50%;transform:translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in{background-color:#09f;border-bottom-left-radius:50%;border-top-left-radius:50%;display:block;height:12px;margin:2px 0;position:relative;width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in:before{background-color:#fffc;border-radius:100%;content:"";display:block;height:8px;left:3px;position:absolute;top:50%;transform:translateY(-50%);width:8px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{background-color:#09f;border-bottom-right-radius:50%;border-top-right-radius:50%;height:12px;position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:12px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .light{background-color:#f8e579;border-bottom-left-radius:100%;border-bottom-right-radius:100%;bottom:-15px;height:15px;left:50%;position:absolute;transform:translate(-50%);width:30px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out{color:#fff}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg,.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{height:24px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%) translateY(-50%);width:14px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .in svg{left:6px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node .out svg{left:7px}.elf--svg-filter-editor .center .graph .graph-panel .filter-node.selected{box-shadow:0 0 0 1.5px #0000004d,0 0 0 3px var(--elf--selected-color)}.elf--svg-filter-editor .right{box-sizing:border-box;height:100%;overflow:auto}.elf--svg-filter-editor .filter-list{display:grid!important;grid-template-columns:1fr!important;width:100%}.elf--svg-filter-editor .filter-list .filter-item{display:block}.elf--svg-filter-editor .filter-list .filter-item .title{border-radius:3px;color:var(--elf--selected-color);display:grid;grid-template-columns:1fr 30px;margin:5px 0}.elf--svg-filter-editor .filter-list .filter-item .title label{padding:2px 0}.elf--svg-filter-editor .filter-list .filter-item .title .filter-menu{color:var(--elf--selected-font-color);text-align:right}.elf--svg-filter-editor .filter-list .filter-item .filter-ui{display:grid;grid-template-columns:1fr;margin-bottom:2px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div{margin-bottom:5px}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--number-range-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--select-editor.has-label,.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--text-editor.has-label{grid-template-columns:100px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui>div .elf--color-view-editor.has-label{grid-template-columns:100px 24px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow{grid-column-gap:1px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui.drop-shadow-color{grid-column-gap:2px;grid-template-columns:50px 1fr}.elf--svg-filter-editor .filter-list .filter-item .filter-ui input[type=range]{width:90%}.elf--svg-filter-popup{max-height:800px;min-height:500px;min-width:900px;position:relative}.elf--svg-filter-popup .box{bottom:0;left:0;position:absolute;right:0;top:0}.elf--svg-filter-popup .box>.editor{height:100%;position:relative}.elf--svg-filter-popup .box .property .title{grid-column-gap:2px;display:grid;grid-template-columns:1fr 2fr}.elf--svg-filter-popup .box .property .title .tools{text-align:right}.elf--svg-filter-popup .box .property .title .tools select{display:inline-block;width:100px}.elf--svg-filter-popup .box label{text-align:left;vertical-align:middle}.elf--svg-filter-popup .box input[type=number],.elf--svg-filter-popup .box input[type=range],.elf--svg-filter-popup .box input[type=text],.elf--svg-filter-popup .box select{vertical-align:middle;width:100%}.elf--svg-filter-select-editor{grid-column-gap:2px;display:grid;grid-template-columns:1fr 16px 16px;height:24px;position:relative}.elf--svg-filter-select-editor.has-label{grid-column-gap:2px;grid-template-columns:60px 1fr 16px 16px}.elf--svg-filter-select-editor.has-label label{line-height:1.6;padding:4px 0 2px;text-align:left;vertical-align:middle}.elf--svg-filter-select-editor select{height:100%;width:100%}.elf--svg-filter-select-editor button{margin-top:4px}.text-shadow-samples{border:0;font-size:11px}.elf--transition-list{grid-template-columns:1fr!important}.elf--transition-list .transition-item{grid-column-gap:4px;display:grid;grid-template-columns:30px 1fr 20px;padding:5px 0}.elf--transition-list .transition-item.selected{background-color:var(--elf--border-color)}.elf--transition-list .transition-item .timing{background-color:var(--elf--animation-item-background-color);border-radius:3px;cursor:pointer;height:30px;vertical-align:middle;width:100%}.elf--transition-list .transition-item .timing canvas{border-radius:3px}.elf--transition-list .transition-item .labels{margin-top:4px;padding:5px;text-align:left;vertical-align:middle}.elf--transition-list .transition-item .labels label{background-color:var(--elf--border-color);border-radius:2px;font-weight:700;padding:1px 3px}.elf--transition-list .transition-item .labels label small{color:var(--elf--font-color)}.elf--transition-list .transition-item .labels label.property{border-bottom:0;font-weight:400}.elf--transition-list .transition-item .tools{padding-top:8px;text-align:right;vertical-align:middle}.elf--transition-property-popup{width:220px}.elf--transition-property-popup .box>div{margin-bottom:5px}.elf--transition-property-popup .box label{text-align:left;vertical-align:middle}.elf--transition-property-popup .box .input{display:grid;grid-template-columns:2fr 1fr 1fr;vertical-align:middle}.elf--transition-property-popup .box .input.grid-1{grid-template-columns:1fr}.elf--transition-property-popup .box .input.grid-2{grid-template-columns:3fr 1fr}.elf--video-property .divider{background-color:var(--elf--divider-color);height:1px;margin:10px auto;width:30px}.elf--video-property .play-control{grid-column-gap:5px;display:grid;grid-template-columns:70px 1fr}.elf--video-property .play-control button[data-value]{display:none;text-align:left;vertical-align:middle;width:auto}.elf--video-property .play-control[data-selected-value=pause] button[data-value=pause],.elf--video-property .play-control[data-selected-value=play] button[data-value=play]{display:inline-block}.elf--video-property .volume-control{grid-column-gap:2px;display:grid;grid-template-columns:20px 1fr}.elf--video-property .volume-control span[data-value]{color:var(--elf--font-color);display:none;height:16px;vertical-align:middle;width:16px}.elf--video-property .volume-control span[data-value] svg{height:100%;width:100%}.elf--video-property .volume-control span[data-value] svg path{fill:currentColor}.elf--video-property .volume-control[data-selected-value=down] span[data-value=down],.elf--video-property .volume-control[data-selected-value=muted] span[data-value=muted],.elf--video-property .volume-control[data-selected-value=up] span[data-value=up]{display:inline-block}.elf--content-item{grid-template-columns:1fr!important;padding:0 4px!important}.elf--content-item textarea{border:1px solid var(--elf--border-color);border-radius:3px;height:100px;width:100%}.elf--custom-assets{bottom:0;left:0;position:absolute;right:0;top:0}.elf--custom-assets .custom-assets-tools{grid-column-gap:10px;box-sizing:border-box;display:grid;grid-template-columns:1fr 40px;height:20px;left:0;padding:0 10px;position:absolute;right:0;top:10px}.elf--custom-assets .custom-assets-tools .tools{text-align:right}.elf--custom-assets .elf--asset-list{bottom:0;box-sizing:border-box;-moz-column-gap:10px;column-gap:10px;display:grid;grid-template-columns:1fr 1fr 1fr;left:0;overflow:auto;padding:10px;position:absolute;right:0;row-gap:10px;top:30px}.elf--custom-assets .elf--asset-list .asset-preview{background-color:#ededed20;border-radius:4px;box-sizing:border-box;height:80px;padding:5px;position:relative;width:80px}.elf--custom-assets .elf--asset-list .asset-preview .tools{background-color:transparent;bottom:0;box-sizing:border-box;left:0;opacity:1;padding:2px;position:absolute;right:0;transition:opacity .2s}.elf--custom-assets .elf--asset-list .asset-preview .tools .title{color:var(--elf--selected-font-color);display:inline-block;text-align:left;vertical-align:middle}.elf--custom-assets .elf--asset-list .asset-preview .tools .buttons{display:inline-block}.elf--custom-assets .elf--asset-list .asset-preview:hover{background-color:var(--elf--selected-color);box-shadow:0 0 0 1px var(--elf--selected-color)}.elf--custom-assets .elf--asset-list .asset-preview:hover .tools{opacity:1}.elf--custom-assets .elf--asset-list .asset-preview img{-o-object-fit:contain;object-fit:contain;width:100%}.elf--asset-list{height:100%;margin:0!important;overflow:auto;padding:0}.elf--asset-list .asset-item{grid-column-gap:4px;border-radius:4px;color:var(--elf--list-item-font-color);display:grid;grid-template-columns:20px 1fr;margin-bottom:0!important;padding:5px 7px!important}.elf--asset-list .asset-item .detail{grid-column-gap:3px;display:grid;grid-template-columns:1fr 60px}.elf--asset-list .asset-item .detail label{padding:2px 0;vertical-align:middle}.elf--asset-list .asset-item .detail .tools{text-align:right}.elf--asset-list .asset-item.selected{background-color:var(--elf--list-item-selected-color);color:var(--elf--selected-font-color)}.elf--asset-list .asset-item.selected .tools button{color:var(--elf--selected-font-color)}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after,.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{border-radius:3px;content:"";display:inline-block;height:10px;margin-left:5px;vertical-align:middle;width:10px}.elf--asset-list .asset-item[data-layout=flex] .detail [data-layout-title]:after{background-color:#44a344}.elf--asset-list .asset-item[data-layout=grid] .detail [data-layout-title]:after{background-color:var(--elf--selected-color)}.elf--library-items{padding:10px}.elf--library-items .property{margin-bottom:10px!important;margin-top:10px!important}.elf--library-items .property-title{background-color:var(--elf--selected-color-2)!important;border-radius:4px;color:var(--elf--selected-font-color);margin-bottom:10px}.elf--library-items .property-title label{line-height:1.5}.object-items{bottom:0;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0}.object-items>:first-child{flex:0 0 140px}.object-items>:last-child{flex:1 1 0;margin-top:auto}.elf--switch-left-panel,.elf--switch-right-panel{display:inline-block;position:relative}.elf--tool-bar{background-color:var(--elf--header-background-color);color:var(--elf--selected-font-color);display:flex;flex-direction:row;height:100%}.elf--tool-bar>.logo-area{flex:none;height:100%;width:60px}.elf--tool-bar>.logo-area>*{height:100%}.elf--tool-bar>.toolbar-area{display:flex;flex:1 1 auto;flex-direction:row}.elf--tool-bar>.toolbar-area>*{align-items:center;display:inline-flex;flex:1 1 auto;justify-content:center;min-height:48px!important;min-width:48px!important;padding:0;vertical-align:middle}.elf--tool-bar>.toolbar-area>.left{flex-direction:row;justify-content:flex-start}.elf--tool-bar>.toolbar-area>.right{flex-direction:row;justify-content:flex-end;padding-right:20px}.elf--tool-bar>.toolbar-area>.dropdown-menu>button{height:48px!important;width:48px!important}.elf--tool-bar>.toolbar-area>.dropdown-menu>button,.elf--tool-bar>.toolbar-area>button{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;align-items:center;display:flex;justify-content:center;position:relative}.elf--tool-bar>.toolbar-area>.dropdown-menu>button .icon svg,.elf--tool-bar>.toolbar-area>button .icon svg{stroke:var(--elf--selected-font-color);fill:transparent!important;stroke-width:1!important;height:20px;width:20px}.elf--tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item.selected,.elf--tool-bar>.toolbar-area>button.elf--menu-item.selected{background-color:var(--elf--selected-color-2)}.elf--tool-bar>.toolbar-area>.dropdown-menu>button.elf--menu-item:hover:not(.selected):not([checked]),.elf--tool-bar>.toolbar-area>.elf--logo-area:hover,.elf--tool-bar>.toolbar-area>button.elf--menu-item:hover:not(.selected):not([checked]){background-color:#000}.elf--page-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--drag-area-view{height:100%;left:0;position:absolute;top:0;transform-origin:left top;width:100%}.elf--drag-area-view .drag-area-rect{background-color:var(--elf--drag-area-rect-background-color);border:.5px solid var(--elf--drag-area-rect-border-color);box-sizing:border-box;left:-10000px;pointer-events:none;position:absolute}.elf--page-tools{background-color:var(--elf--background-color);border:1px solid var(--elf--border-color);border-radius:3px;bottom:10px;box-sizing:border-box;color:var(--elf--font-color);display:inline-block;left:20px;padding:5px 10px;position:absolute}.elf--page-tools>*{display:inline-block;position:relative}.elf--page-tools>label{display:inline-block;height:100%;padding-top:5px;vertical-align:middle}.elf--page-tools button{border:0;border-radius:3px;display:inline-block;height:24px;padding:4px;position:relative;vertical-align:middle;width:24px}.elf--page-tools button.on{background-color:var(--elf--selected-color);color:var(--elf--selected-font-color)}.elf--page-tools button svg{pointer-events:none}.elf--page-tools button[data-path-index="0"]:after{background-color:var(--elf--selected-color);border-radius:100%;content:"";height:4px;left:10px;position:absolute;top:100%;width:4px}.elf--page-tools>.select{border:1px solid rgba(var(--elf--selected-color),.5);border-radius:5px;display:inline-block;width:50px}.player .page-container{left:0;top:0}.elf--element-view{outline:none}.canvas-view,.elf--element-view{left:0;pointer-events:none;position:absolute;top:0}.canvas-view{height:100%;transform-origin:left top;width:100%;will-change:auto}.canvas-view[data-outline=true] .element-item{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view[data-outline=true] .element-item.svg-path{border:0!important}.canvas-view[data-outline=true] .element-item.artboard{border:2px dashed #595959!important}.canvas-view[data-outline=true] .element-item svg circle,.canvas-view[data-outline=true] .element-item svg ellipse,.canvas-view[data-outline=true] .element-item svg line,.canvas-view[data-outline=true] .element-item svg path,.canvas-view[data-outline=true] .element-item svg polygon,.canvas-view[data-outline=true] .element-item svg polyline,.canvas-view[data-outline=true] .element-item svg rect,.canvas-view[data-outline=true] .element-item svg text{fill:none!important;stroke:#595959!important;stroke-width:1px!important}.canvas-view .element-item.svg-path{pointer-events:none}.canvas-view .element-item.svg-path>*,.canvas-view .element-item.svg-path>svg>path{pointer-events:stroke}.canvas-view .element-item.svg-path>svg>:not([fill=transparent]){pointer-events:visible}.canvas-view .element-item{pointer-events:all;will-change:auto}.canvas-view .element-item [contenteditable=true],.canvas-view .element-item[contenteditable=true],.canvas-view .element-item[tabIndex]{outline:none}.canvas-view .element-item[data-is-boolean-item=true]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:transparent!important;background-image:none!important;border:1px solid #595959!important;box-shadow:none!important;filter:none!important}.canvas-view .element-item[data-is-boolean-item=true].svg-path{border:0!important}.canvas-view .element-item[data-is-boolean-item=true] svg circle,.canvas-view .element-item[data-is-boolean-item=true] svg ellipse,.canvas-view .element-item[data-is-boolean-item=true] svg line,.canvas-view .element-item[data-is-boolean-item=true] svg path,.canvas-view .element-item[data-is-boolean-item=true] svg polygon,.canvas-view .element-item[data-is-boolean-item=true] svg polyline,.canvas-view .element-item[data-is-boolean-item=true] svg rect,.canvas-view .element-item[data-is-boolean-item=true] svg text{fill:none!important;stroke:transparent!important;stroke-width:1px!important}.canvas-view .element-item.artboard{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.canvas-view .element-item>svg circle:hover,.canvas-view .element-item>svg ellipse:hover,.canvas-view .element-item>svg line:hover,.canvas-view .element-item>svg path:hover,.canvas-view .element-item>svg polygon:hover,.canvas-view .element-item>svg polyline:hover,.canvas-view .element-item>svg rect:hover{stroke:#4040fc}.canvas-view .element-item>svg:hover>text{fill:#4040fc}.elf--horizontal-ruler{background-color:var(--elf--background-color);height:var(--elf--editor-ruler-size);left:var(--elf--editor-ruler-size);position:absolute;right:0;top:0;z-index:0}.elf--horizontal-ruler .horizontal-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--horizontal-ruler .horizontal-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--horizontal-ruler .horizontal-ruler-container svg.horizontal-line path{stroke:var(--elf--selected-color)}.elf--horizontal-ruler .horizontal-ruler-container .cursor{--elf--horizontal-cursor-position:0px;background-color:var(--elf--selected-color-2);height:100%;transform:translate(var(--elf--horizontal-cursor-position)) translateZ(0) translateY(-1px);width:2px}.elf--horizontal-ruler svg{transform:translateY(2px)}.elf--horizontal-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--horizontal-ruler svg path{stroke:var(--elf--font-color)}.elf--horizontal-ruler svg path[data-selected=true]{stroke:transparent}.elf--horizontal-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--vertical-ruler{background-color:var(--elf--background-color);bottom:0;box-sizing:border-box;left:0;position:absolute;top:var(--elf--editor-ruler-size);width:var(--elf--editor-ruler-size);z-index:0}.elf--vertical-ruler .vertical-ruler-container{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.elf--vertical-ruler .vertical-ruler-container svg.lines path{fill:var(--elf--selected-hover-color);stroke:transparent}.elf--vertical-ruler .vertical-ruler-container svg.vertical-line path{stroke:var(--elf--selected-color)}.elf--vertical-ruler .vertical-ruler-container .cursor{--elf--vertical-cursor-position:0px;background-color:var(--elf--selected-color-2);height:2px;transform:translateY(var(--elf--vertical-cursor-position)) translateZ(0);width:100%}.elf--vertical-ruler svg text{text-anchor:middle;fill:var(--elf--font-color);font-size:8px}.elf--vertical-ruler svg path{stroke:var(--elf--font-color)}.elf--vertical-ruler svg path[data-selected=true]{stroke:transparent}.elf--vertical-ruler svg path[data-mouse=true]{stroke:var(--elf--selected-color);stroke-width:2}.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--context-menu-manger{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.elf--context-menu-manger>*{pointer-events:auto}.elf--page-three-container{background-color:#fff;outline:none;pointer-events:all;touch-action:pinch-zoom;z-index:1}.elf--page-three-container,.page-view{bottom:0;left:0;position:absolute;right:0;top:0}.page-view{background-color:var(--elf--canvas-background-color)}.page-view .page-lock{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.elf--element-three-view{outline:none}.elf--element-three-view,.elf--element-three-view .canvas-view{height:100%;left:0;pointer-events:all;position:absolute;top:0;width:100%}.elf--element-three-view .canvas-view{transform-origin:left top}.elf--body-three-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-three-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-three-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-three-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-three-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0}.three-editor[data-design-mode=item] .layout-middle{bottom:0!important}.three-editor[data-design-mode=item] .elf--status-bar{display:none!important}.three-editor .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.three-editor .layout-main .layout-top{height:48px;top:0;z-index:10000}.three-editor .layout-main .layout-middle,.three-editor .layout-main .layout-top{background-color:var(--elf--background-color);box-sizing:border-box;left:0;position:absolute;right:0}.three-editor .layout-main .layout-middle{bottom:0;overflow:hidden;top:48px}.three-editor .layout-main .layout-middle .layout-header{background-color:var(--elf--header-background-color);box-sizing:border-box;color:var(--elf--selected-font-color);display:none;height:0;left:340px;position:absolute;right:280px;top:0}.three-editor .layout-main .layout-middle>.splitter{bottom:0;cursor:ew-resize;left:340px;position:absolute;top:0;transition:background-color .05s linear;width:4px}.three-editor .layout-main .layout-middle>.splitter.selected,.three-editor .layout-main .layout-middle>.splitter:hover{background-color:var(--elf--selected-color)}.three-editor .layout-main .layout-middle>.left-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;left:340px;pointer-events:none;position:absolute;top:0;transition:background-color .05s linear;width:8px}.three-editor .layout-main .layout-middle>.left-arrow button{color:var(--elf--font-color);pointer-events:all}.three-editor .layout-main .layout-middle>.right-arrow{align-items:center;bottom:0;cursor:ew-resize;display:flex;justify-items:center;pointer-events:none;position:absolute;right:280px;top:0;transition:background-color .05s linear;width:8px}.three-editor .layout-main .layout-middle>.right-arrow button{color:var(--elf--font-color);pointer-events:all}.three-editor .layout-main .layout-middle>button{color:var(--elf--font-color);cursor:pointer;height:12px;position:absolute;top:50%;transform:translateY(-50%) translate(-25%);width:12px;z-index:1000}.three-editor .layout-main .layout-middle>button svg{transform:scale(1.5)}.three-editor .layout-main .layout-middle>.toggleLeft{left:340px}.three-editor .layout-main .layout-middle>.toggleRight{right:280px}.three-editor .layout-main .layout-middle .layout-footer{background-color:var(--elf--background-color);bottom:0;height:0;left:0;overflow:hidden;position:absolute;right:0;z-index:10000}.three-editor .layout-main .layout-middle .layout-footer .footer-splitter{display:none}.three-editor .layout-main .layout-middle .layout-left{border-right:1px solid var(--elf--layout-border-color);bottom:0;box-sizing:border-box;display:inline-block;display:flex;flex-direction:column;left:0;position:absolute;top:0;width:340px}.three-editor .layout-main .layout-middle .layout-right{border-left:1px solid var(--elf--layout-border-color);bottom:0;display:inline-block;display:flex;flex-direction:column;overflow:auto;position:absolute;right:0;top:0;width:280px;z-index:100}.three-editor .layout-main .layout-middle .layout-body{bottom:0;left:340px;position:absolute;right:280px;top:0}.whiteboard .layout-main{background-color:var(--elf--header-background-color);bottom:0;left:0;position:absolute;right:0;top:0}.whiteboard .layout-main .layout-middle{background-color:var(--elf--background-color);box-sizing:border-box;overflow:hidden}.whiteboard .layout-main .layout-middle,.whiteboard .layout-main .layout-middle .layout-body,.elf--body-panel{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .submenu-area{box-sizing:border-box;display:inline-block;height:40px;left:50%;position:absolute;top:40px;transform:translate(-50%);z-index:2}.elf--body-panel .editing-area{bottom:0;left:0;position:absolute;right:0;top:0}.elf--body-panel .editing-area>.canvas-layout{bottom:0;left:var(--elf--editor-ruler-size);overflow:hidden;position:absolute;right:0;top:var(--elf--editor-ruler-size)}.elf--body-panel:not(.ruler)>.editing-area>.canvas-layout{left:0;top:0} diff --git a/docs/assets/index.e23f8a81.js b/docs/assets/index.e23f8a81.js deleted file mode 100644 index c8c5dbf8c..000000000 --- a/docs/assets/index.e23f8a81.js +++ /dev/null @@ -1,6951 +0,0 @@ -var yS=Object.defineProperty,xS=Object.defineProperties;var bS=Object.getOwnPropertyDescriptors;var cv=Object.getOwnPropertySymbols;var _S=Object.prototype.hasOwnProperty,SS=Object.prototype.propertyIsEnumerable;var hv=(n,e,t)=>e in n?yS(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,P=(n,e)=>{for(var t in e||(e={}))_S.call(e,t)&&hv(n,t,e[t]);if(cv)for(var t of cv(e))SS.call(e,t)&&hv(n,t,e[t]);return n},ze=(n,e)=>xS(n,bS(e));var Vp=(n,e,t)=>{if(!e.has(n))throw TypeError("Cannot "+t)};var Mt=(n,e,t)=>(Vp(n,e,"read from private field"),t?t.call(n):e.get(n)),Pi=(n,e,t)=>{if(e.has(n))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(n):e.set(n,t)},Ti=(n,e,t,i)=>(Vp(n,e,"write to private field"),i?i.call(n,t):e.set(n,t),t),dv=(n,e,t,i)=>({set _(r){Ti(n,e,r,t)},get _(){return Mt(n,e,i)}}),hc=(n,e,t)=>(Vp(n,e,"access private method"),t);const wS=function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))i(r);new MutationObserver(r=>{for(const s of r)if(s.type==="childList")for(const a of s.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).observe(document,{childList:!0,subtree:!0});function t(r){const s={};return r.integrity&&(s.integrity=r.integrity),r.referrerpolicy&&(s.referrerPolicy=r.referrerpolicy),r.crossorigin==="use-credentials"?s.credentials="include":r.crossorigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function i(r){if(r.ep)return;r.ep=!0;const s=t(r);fetch(r.href,s)}};wS();function MS(n,e=()=>!0){let t=n,i=[];do{if(t instanceof Object===!1)break;const s=Object.getOwnPropertyNames(t).filter(e);i.push.apply(i,s)}while(t=Object.getPrototypeOf(t));return i}function np(n,e=0){if(e===0)return n;var t=void 0;return function(i,r,s,a,o){t&&window.clearTimeout(t),t=window.setTimeout(function(){n(i,r,s,a,o)},e||300)}}function Yg(n,e){var t=void 0;return function(i,r,s,a,o){t||(t=window.setTimeout(function(){n(i,r,s,a,o),t=null},e||300))}}function $S(n,e,t){return(...i)=>{t.every(s=>e[s].apply(e,i))&&n.apply(e,i)}}function PS(n,e){return(...t)=>{window.requestAnimationFrame(()=>{n.apply(e,t)})}}function $u(n,e){Object.keys(n).forEach((t,i)=>{e(t,n[t],i)})}function F1(n,e){return Object.keys(n).map((t,i)=>e(t,n[t],i))}function TS(n,e,t=""){return F1(n,e).join(t)}function Bi(n){return typeof n=="undefined"}function $t(n){return!Bi(n)}function cs(n){return typeof n=="boolean"}function gi(n){return typeof n=="string"}function Ni(n){return Array.isArray(n)}function hs(n){return typeof n=="object"&&!Array.isArray(n)&&!bi(n)&&!gi(n)&&n!==null}function Ye(n){return typeof n=="function"}function bi(n){return typeof n=="number"}function CS(n){return n===0}function Uo(n){return!CS(n)}const ES=n=>JSON.parse(JSON.stringify(n));function rt(n){if(!Bi(n))return ES(n)}function uv(n){return Object.keys(n).forEach(e=>{Array.isArray(n[e])&&(n[e]=n[e].join(", "))}),n}function Xn(...n){const e=[];return n.filter(Boolean).forEach(t=>{Ni(t)?e.push(Xn(...t)):hs(t)?Object.keys(t).filter(i=>Boolean(t[i])).forEach(i=>{e.push(i)}):gi(t)&&e.push(t)}),e.join(" ")}const IS=(n,e,t)=>{t?(n.setAttribute(e,e),n[e]=t):(n.removeAttribute(e),n[e]=t)},LS=(n,e,t)=>{typeof t=="boolean"?IS(n,e,t):n.setAttribute(e,t)},kS=(n,e)=>{n.removeAttribute(e),n[e]=!1},AS=(n,e)=>{n.removeAttribute(e)},RS=(n,e,t)=>{typeof t=="boolean"?kS(n,e):e&&AS(n,e)},OS=(n,e,t,i)=>{t?(!i||t!==i)&&LS(n,e,t):RS(n,e,i)},zS=(n,e={},t={})=>{const i=[];i.push.apply(i,Object.keys(e)),i.push.apply(i,Object.keys(t)),new Set(i).forEach(s=>{OS(n,s,e[s],t[s])})};function VS(n,e){return n.nodeType===window.Node.TEXT_NODE&&n.textContent!==e.textContent||n.nodeName!==e.nodeName}function pv(n){return(n==null?void 0:n.nodeType)===8?!0:n.nodeType!==window.Node.TEXT_NODE&&n.getAttribute("data-domdiff-pass")==="true"}function DS(n){return n.nodeType!==window.Node.TEXT_NODE&&n.getAttribute("refClass")}function fv(n){var e={};const t=n.length;for(let i=0;i{var e=n.firstChild;if(!e)return[];var t=[];do t.push(e),e=e.nextSibling;while(e);return t};function Dp(n,e,t={}){t.checkPassed=Ye(t.checkPassed)?t.checkPassed:void 0,t.removedElements=[],n=n.el||n,e=e.el||e;var i=Pu(n),r=Pu(e),s=Math.max(i.length,r.length);if(s!==0)if(i.length===0&&r.length>0)n.append(...r);else if(i.length>0&&r.length===0)n.textContent="";else for(var a=0;a`${e}=${Pl(t)}`).join(" ")}function Yl(n={}){Object.keys(n).forEach(e=>{B1[e]=n[e]})}function US(n,e){G1[n]=e}function WS(n){return G1[n]}function XS(n){return B1[WS(n)||n]}function YS(n){jS.add(n)}function KS(n){Object.keys(n).forEach(e=>{mu[e]=n[e]})}function qS(n){return Object.keys(mu).filter(e=>Boolean(mu[e])).map(e=>{const t=mu[e];return new t(n)})}class qe{constructor(e,t,i){if(typeof e!="string")e instanceof qe?this.el=e.el:this.el=e;else{var r=document.createElement(e);t&&(r.className=t),i=i||{},Object.assign(r,i),this.el=r}}static create(e,t,i){return new qe(e,t,i)}static createByHTML(e){var t=qe.create("div");return t.html(e).firstChild}static makeElementList(e){const t=qe.create("div");let i=[];Ni(e)||(e=[e]),e=e.filter(Boolean);for(let r=0,s=e.length;r{this.attr(t,e[t])}),this}setAttrNS(e,t="http://www.w3.org/2000/svg"){return Object.keys(e).forEach(i=>{this.attr(i,e[i],t)}),this}setProp(e){return Object.keys(e).forEach(t=>{this.el[t]!=e[t]&&(this.el[t]=e[t])}),this}data(e,t){if(arguments.length===1){const i=this.attr("data-"+e);return BS(i,!1)}else if(arguments.length===2)return this.attr("data-"+e,t);return this}attr(...e){return e.length==1?Ye(this.el.getAttribute)&&this.el.getAttribute(e[0]):(this.el.getAttribute(e[0])!=e[1]&&this.el.setAttribute(e[0],e[1]),this)}attrNS(e,t,i="http://www.w3.org/2000/svg"){return arguments.length==1?this.el.getAttributeNS(i,e):(this.el.getAttributeNS(i,e)!=t&&this.el.setAttributeNS(i,e,t),this)}attrKeyValue(e){return{[this.el.getAttribute(e)]:this.val()}}get attributes(){try{return[...this.el.attributes],this.el.attributes}catch{const i=this.el.attributes.length,r=[];for(var e=0;ethis.el.getAttribute(t))}styles(...e){return e.map(t=>this.el.style[t])}removeAttr(e){return this.el.removeAttribute(e),this}removeStyle(e){return this.el.style.removeProperty(e),this}is(e){return e instanceof qe?this.el===e.el:this.el===e}isTag(e){return this.el.tagName.toLowerCase()===e.toLowerCase()}closest(e){for(var t=this,i=!1;!(i=t.hasClass(e));)if(t.el.parentNode)t=qe.create(t.el.parentNode);else return null;return i?t:null}path(){if(!this.el)return[];let e=[this],t=this.parent();if(!t.el)return e;for(;t&&(e.unshift(t),t=t.parent(),!!t.el););return e}get $parent(){return this.parent()}parent(){return qe.create(this.el.parentNode)}hasParent(){return!!this.el.parentNode}removeClass(...e){return this.el.classList.remove(...e),this}updateClass(e){return this.el.className=e,this}replaceClass(e,t){return this.el.classList.replace(e,t),this}hasClass(e){return this.el.classList?this.el.classList.contains(e):!1}addClass(...e){return this.el.classList.add(...e),this}onlyOneClass(e){var t=this.parent();t.children().forEach(i=>{i.removeClass(e)}),this.addClass(e)}toggleClass(e,t){return this.el.classList.toggle(e,t),this}outerHTML(){return this.isTextNode?this.text():this.el.outerHTML}html(e){try{return typeof e=="undefined"?this.el.innerHTML:(typeof e=="string"?Object.assign(this.el,{innerHTML:e}):this.empty().append(e),this)}catch(t){return console.log(t,e),this}}htmlDiff(e){Dp(this,e)}updateDiff(e,t="div",i={}){Dp(this,qe.create(t).html(e),i)}updateSVGDiff(e,t="div"){Dp(this,qe.create(t).html(`${e}`).firstChild.firstChild)}getById(e){return this.el.getElementById(e)}find(e){if(!this.isTextNode)return this.el.querySelector(e)}$(e){var t=this.find(e);return t?qe.create(t):null}findAll(e){return this.isTextNode?[]:Array.from(this.el.querySelectorAll(e))}$$(e){var t=this.findAll(e);return t.map(i=>qe.create(i))}empty(){for(;this.el.firstChild;)this.el.removeChild(this.el.firstChild);return this}append(e){return Ni(e)?this.el.append(...e.map(t=>t.el||t)):typeof e=="string"?this.el.appendChild(document.createTextNode(e)):this.el.appendChild(e.el||e),this}prepend(e){return typeof e=="string"?this.el.prepend(document.createTextNode(e)):this.el.prepend(e.el||e),this}prependHTML(e){var t=qe.create("div").html(e);return this.prepend(t.createChildrenFragment()),t}appendHTML(e){var t=qe.create("div").html(e);return this.append(t.createChildrenFragment()),t}createChildrenFragment(){const e=this.childNodes;var t=document.createDocumentFragment();return e.forEach(i=>t.appendChild(i.el)),t}appendTo(e){var t=e.el?e.el:e;return t.appendChild(this.el),this}remove(){return this.el.parentNode&&this.el.parentNode.removeChild(this.el),this}removeChild(e){return this.el.removeChild(e.el||e),this}text(e){if(typeof e=="undefined")return this.el.textContent;var t=e;return e instanceof qe&&(t=e.text()),this.el.textContent!==t&&(this.el.textContent=t),this}css(e,t){if(typeof e!="undefined"&&typeof t!="undefined")e.indexOf("--")===0&&typeof t!="undefined"?this.el.style.setProperty(e,t):this.el.style[e]=t;else if(typeof e!="undefined"){if(typeof e=="string")return window.getComputedStyle(this.el)[e];Object.entries(e).forEach(([i,r])=>{i.indexOf("--")===0&&typeof r!="undefined"?this.el.style.setProperty(i,r):this.el.style[i]=r})}return this}getComputedStyle(...e){var t=window.getComputedStyle(this.el),i={};return e.forEach(r=>{i[r]=t[r]}),i}getStyleList(...e){for(var t={},i=this.el.style.length,r=0;r{t[a]=this.css(a)}),t}cssText(e){return typeof e=="undefined"?this.el.style.cssText:(e!=this.el.tempCssText&&(this.el.style.cssText=e,this.el.tempCssText=e),this)}cssArray(e){return e[0]&&(this.el.style[e[0]]=e[1]),e[2]&&(this.el.style[e[2]]=e[3]),e[4]&&(this.el.style[e[4]]=e[5]),e[6]&&(this.el.style[e[6]]=e[7]),e[8]&&(this.el.style[e[8]]=e[9]),this}cssFloat(e){return parseFloat(this.css(e))}cssInt(e){return parseInt(this.css(e))}px(e,t){return this.css(e,`${t}px`)}rect(){return this.el.getBoundingClientRect()}bbox(){return this.el.getBBox()}isSVG(){return this.el._cachedIsSVG||(this.el._cachedIsSVG={value:this.el.tagName.toLowerCase()==="svg"}),this.el._cachedIsSVG.value}offsetRect(){if(this.isSVG()){const t=this.parent().rect(),i=this.rect();return{x:i.x-t.x,y:i.y-t.y,width:i.width,height:i.height}}const e=this.el;return{x:e.offsetLeft,y:e.offsetTop,width:e.offsetWidth,height:e.offsetHeight}}offsetClientRect(){if(this.isSVG()){const i=this.parent().rect(),r=this.rect();return{x:r.x-i.x,y:r.y-i.y,width:r.width,height:r.height}}const e=this.parent().rect(),t=this.rect();return{x:t.x-e.x,y:t.y-e.y,width:t.width,height:t.height}}offset(){var e=this.rect(),t=qe.getScrollTop(),i=qe.getScrollLeft();return{top:e.top+t,left:e.left+i}}offsetLeft(){return this.offset().left}offsetTop(){return this.offset().top}position(){return this.el.style.top?{top:parseFloat(this.css("top")),left:parseFloat(this.css("left"))}:this.rect()}size(){return[this.width(),this.height()]}width(){return this.el.offsetWidth||this.rect().width}contentWidth(){return this.width()-this.cssFloat("padding-left")-this.cssFloat("padding-right")}height(){return this.el.offsetHeight||this.rect().height}contentHeight(){return this.height()-this.cssFloat("padding-top")-this.cssFloat("padding-bottom")}val(e){if(typeof e=="undefined")return this.el.value;if(typeof e!="undefined"){var t=e;e instanceof qe&&(t=e.val()),this.el.value=t}return this}matches(e){return this.el&&this.el.matches?this.el.matches(e)?this:this.parent().matches(e):null}get value(){return this.el.value}get naturalWidth(){return this.el.naturalWidth}get naturalHeight(){return this.el.naturalHeight}get files(){return this.el.files?[...this.el.files]:[]}get isTextNode(){return this.el.nodeType===3}realVal(){switch(this.el.nodeType){case"INPUT":var e=this.attr("type");return e=="checkbox"||e=="radio"?this.checked():this.el.value;case"SELECT":case"TEXTAREA":return this.el.value}return""}int(){return parseInt(this.val(),10)}float(){return parseFloat(this.val())}show(e="block"){return this.el.style.display=e!="none"?e:"block",this}hide(){return this.el.style.display="none",this}isHide(){return this.el.style.display==="none"}isShow(){return!this.isHide()}toggle(e){var t=this.isHide();return arguments.length==1?e?this.show():this.hide():t?this.show():this.hide()}get totalLength(){return this.el.getTotalLength()}scrollIntoView(){this.el.scrollIntoView()}addScrollLeft(e){return this.el.scrollLeft+=e,this}addScrollTop(e){return this.el.scrollTop+=e,this}setScrollTop(e){return this.el.scrollTop=e,this}setScrollLeft(e){return this.el.scrollLeft=e,this}scrollTop(){return this.el===document.body?qe.getScrollTop():this.el.scrollTop}scrollLeft(){return this.el===document.body?qe.getScrollLeft():this.el.scrollLeft}scrollHeight(){return this.el.scrollHeight}scrollWidth(){return this.el.scrollWidth}on(e,t,i,r){return this.el.addEventListener(e,t,i,r),this}off(e,t){return this.el.removeEventListener(e,t),this}getElement(){return this.el}createChild(e,t="",i={},r={}){let s=qe.create(e,t,i);return s.css(r),this.append(s),s}get firstChild(){return qe.create(this.el.firstElementChild)}get first(){return qe.create(this.el.firstChild)}children(){var e=this.el.firstElementChild;if(!e)return[];var t=[];do t.push(qe.create(e)),e=e.nextElementSibling;while(e);return t}get childNodes(){const e=[];if(this.el.hasChildNodes()){const t=this.el.childNodes;for(let i=0;i{r==0?t.moveTo(i[0],i[1]):t.lineTo(i[0],i[1])}),t.stroke(),t.fill(),t.closePath()}drawCircle(e,t,i){var r=this.context();r.beginPath(),r.arc(e,t,i,0,2*Math.PI),r.stroke(),r.fill()}drawText(e,t,i){this.context().fillText(i,e,t)}fullscreen(){var e=this.el;e.requestFullscreen?e.requestFullscreen():e.wekitRequestFullscreen&&e.wekitRequestFullscreen()}toggleFullscreen(){this.el===document.fullscreenElement?document.exitFullscreen():this.fullscreen()}}class H1{constructor(e){this.id=Kg(),this.cachedCallback={},this.callbacks={},this.editor=e}getCallbacks(e){return this.callbacks[e]||(this.callbacks[e]=[]),this.callbacks[e]}setCallbacks(e,t=[]){this.callbacks[e]=t}debug(...e){this.editor&&this.editor.context.config.get("debug.mode")&&console.debug(...e)}on(e,t,i,r=0,s=0,a=!1,o=!1,l=[],c=!1){var h=t;return r>0?h=np(t,r):s>0&&(h=Yg(t,s)),l.length&&(h=$S(h,i,l)),c&&(h=PS(h,i)),this.getCallbacks(e).push({event:e,callback:h,context:i,originalCallback:t,enableAllTrigger:a,enableSelfTrigger:o}),()=>{this.off(e,t)}}off(e,t){this.debug("off message event",e),arguments.length==1?this.setCallbacks(e):arguments.length==2&&this.setCallbacks(e,this.getCallbacks(e).filter(i=>i.originalCallback!==t))}offAll(e){Object.keys(this.callbacks).forEach(t=>{this.setCallbacks(t,this.getCallbacks(t).filter(i=>i.context!==e))}),this.debug("off all message",e.sourceName)}getCachedCallbacks(e){return this.getCallbacks(e)}sendMessage(e,t,...i){this.sendMessageList(e,[[t,...i]])}runMessage(e,t){const i=e.callback.apply(e.context,t);if($t(i)){if(i===!1)return;if(Ye(i)){i();return}}}sendMessageList(e,t=[]){window.Promise.resolve().then(()=>{t.forEach(([i,...r])=>{var s=this.getCachedCallbacks(i);if(s&&s.length){const a=s.filter(l=>!l.enableSelfTrigger).filter(l=>l.enableAllTrigger||l.originalCallback.source!==e);let o=a.length;for(;o--;){const l=a[o];this.runMessage(l,r)}}else this.debug(`message event ${i} is not exist.`)})})}nextSendMessage(e,t,...i){window.Promise.resolve().then(()=>{t(...i)})}triggerMessage(e,t,...i){window.Promise.resolve().then(()=>{var r=this.getCachedCallbacks(t);r?r.filter(a=>a.originalCallback.source===e).forEach(a=>{a.callback.apply(a.context,i)}):this.debug(t," is not valid event")})}emit(e,...t){Ye(e)?e(...t):Ni(e)?this.sendMessageList(this.source,e):this.sendMessage(this.source,e,...t)}nextTick(e){this.nextSendMessage(this.source,e)}trigger(e,...t){Ye(e)?e(...t):this.triggerMessage(this.source,e,...t)}}const mv=/^@magic:([a-zA-Z][a-zA-Z0-9]*)[\W]{1}(.*)*$/g,vv="@magic:",Nc="|",ZS=/(([\$a-z_\-]+)\([^\(\)]*\)|([a-z_\-]+))/gi,yv="(",JS=")",cd={KEYWORD:"keyword",FUNCTION:"function",VALUE:"value"};class Fs{constructor(e){this.context=e.context,this.originalMethod=e.originalMethod,this.method=e.method,this.args=e.args,this.pipes=e.pipes,this.keys=e.keys,this.__cache=new Map}setCache(e,t){this.__cache.set(e,t)}hasCache(e){return this.__cache.has(e)}getCache(e){return this.__cache.get(e)}hasKeyword(e){if(this.hasCache(e))return this.getCache(e);let t=!1;return this.pipes.forEach(i=>{switch(i.type){case cd.KEYWORD:i.value===e&&(t=!0);break}}),this.setCache(e,t),t}hasFunction(e){if(this.hasCache(e))return this.getCache(e);let t=!!this.getFunction(e);return this.setCache(e,t),t}getFunction(e){return this.functions.find(t=>t.func===e)}getFunctionList(e){return this.functions.filter(t=>t.func===e)}get originalCallback(){return this.context[this.originalMethod]}get keywords(){return this.keys[cd.KEYWORD].map(e=>e.value)}get functions(){return this.keys[cd.FUNCTION]}get values(){return this.keys[cd.VALUE].map(e=>e.value)}execute(...e){return this.originalCallback.call(this.context,...e)}executeWithContext(e,...t){return this.originalCallback.call(e,...t)}static make(e,...t){return`${vv}${e} ${t.join(Nc)}`}static check(e){return e.match(mv)!==null}static parse(e,t={}){const i=e.match(mv);if(!i)return;const r=i[0].split(vv)[1].split(Nc).map(d=>d.trim());let[s,...a]=r;const[o,...l]=s.split(" "),c=a.map(d=>this.parsePipe(d)).filter(d=>d.value),h={function:[],keyword:[],value:[]};return c.forEach(d=>{d.type==="function"?h.function.push(d):d.type==="keyword"?h.keyword.push(d):h.value.push(d)}),new Fs({context:t,originalMethod:e,method:o,args:l,pipes:c,keys:h})}static parsePipe(e){const t=e.match(ZS);if(!t)return{type:"value",value:e};const[i]=t;if(i.includes(yv)){const[r,s]=i.split(yv),[a]=s.split(JS);return{type:"function",value:i,func:r,args:a.split(",").map(o=>o.trim()).filter(Boolean)}}return{type:"keyword",value:t[0]}}}const QS=(n,e=Nc)=>` ${e} ${n}`,pg=":",e2=" ",zt=(...n)=>{var e=n.join(pg);return(...t)=>{const[i,...r]=t;return Fs.make("domevent",[e,i].join(" "),...r)}},sp=(...n)=>Fs.make("subscribe",...n),t2=(...n)=>Fs.make("callback",...n),Sn=(n,e=Nc)=>QS(n,e),bh=(n,e=Nc)=>Sn(`after(${n})`,e),et=Sn,So=Sn("Enter"),Bc=Sn("Escape"),i2=Sn("Delete"),vn=Sn("isMouseLeftButton"),It=Sn("domdiff"),Nt=(n=100)=>Sn(`debounce(${n})`),U1=(n=300)=>Sn(`delay(${n})`),Vl=(n=100)=>Sn(`throttle(${n})`),r2=Sn("allTrigger()"),n2=Sn("selfTrigger()"),wt=bh("preventDefault"),ds=bh("stopPropagation"),H=sp,jp=(...n)=>sp(...n,r2),we=(...n)=>sp(...n,n2),qt=(n,...e)=>sp(`config:${n}`,...e),s2=t2;s2("requestAnimationFrame");const Ns=zt,ne=zt("click"),_h=zt("dblclick");zt("mousedown");zt("mouseup");zt("mousemove");const W1=zt("mouseover");zt("mouseout");zt("mouseenter");const a2=zt("mouseleave");zt("touchstart");zt("touchmove");zt("touchend");const ap=zt("keydown"),Ar=zt("keyup");zt("keypress");zt("drag");const wn=zt("dragstart"),sn=zt("drop"),an=zt("dragover");zt("dragenter");zt("dragleave");zt("dragexit");zt("dragout");const o2=zt("dragend"),l2=zt("contextmenu"),Yn=zt("change"),di=zt("input"),X1=zt("focus"),Tu=zt("focusin"),wo=zt("focusout"),Y1=zt("blur"),c2=zt("paste"),h2=zt("resize");zt("scroll");zt("submit");const Ke=(...n)=>Ns("pointerdown")(...n)+vn,Cu=Ns("pointerover");Ns("pointerenter");const op=Ns("pointerout"),Kl=Ns("pointermove"),d2=Ns("pointerup"),u2=Ns("change","input"),K1=Ns("wheel","mousewheel","DOMMouseScroll");zt("animationstart");zt("animationend");zt("animationiteration");zt("transitionstart");const p2=zt("transitionend");zt("transitionrun");zt("transitioncancel");const q1=Ns("doubletab"),me=(n="$el")=>Fs.make("load",n),f2=n=>function(){return this.prevState[n]!=this.state[n]},g2=()=>!0,Me=(n="$el")=>Fs.make("bind",n);function Z1(n){let e=n.deltaX,t=n.deltaY;return e===0&&n.shiftKey&&([t,e]=[e,t]),n.deltaMode===window.WheelEvent.DOM_DELTA_LINE?t*=8:n.deltaMode===window.WheelEvent.DOM_DELTA_PAGE&&(t*=24),[xv(e,24),xv(t,24),0]}function xv(n,e){return Math.sign(n)*Math.min(e,Math.abs(n))}var Np={addDomEvent(n,e,t,i=!1){n&&n.addEventListener(e,t,i)},removeDomEvent(n,e,t){n&&n.removeEventListener(e,t)},pos(n){return n.touches&&n.touches[0]?n.touches[0]:n},posXY(n){var e=this.pos(n);return{x:e.pageX,y:e.pageY}}};class Sh{constructor(e,t={}){this.context=e,this.options=t}initialize(){}load(){}refresh(){}render(){}getRef(e){return this.context.getRef(e)}run(){}destroy(){}}const m2=(n,e)=>{if(bi(e))switch(n){case"width":case"height":case"top":case"left":case"right":case"bottom":return e+"px"}return e},v2=(n,e,t,i=!1)=>{if(e==="cssText"){n.cssText(t);return}else if(e==="style"){if(typeof t!="string"){const r={};if(Object.entries(t).forEach(([s,a])=>{r[s]=m2(s,a)}),i){const s=Object.keys(r).map(a=>`${a}:${r[a]};`).join("");n.attr("style",s)}else n.css(r)}return}else if(e==="class"){Array.isArray(t)?n.updateClass(Xn(...t)):n.updateClass(Xn(t));return}else if(e==="callback"&&typeof t=="function"){t();return}typeof t=="undefined"?n.removeAttr(e):n.el.nodeName==="TEXTAREA"&&e==="value"||e==="text"||e==="textContent"?n.text(t):e==="innerHTML"||e==="html"?n.html(t):e==="htmlDiff"?n.updateDiff(t):e==="svgDiff"?n.updateSVGDiff(t):e==="value"?n.val(t):n.attr(e,t)},Bp={};class y2 extends Sh{async initialize(){Bp[this.context.sourceName]||(Bp[this.context.sourceName]=this.context.filterMethodes("bind"))}getBindMethods(){return Bp[this.context.sourceName]||[]}async bindData(...e){const t=this.getBindMethods();if(!(t!=null&&t.length))return;const i=t==null?void 0:t.filter(r=>e.length?e.indexOf(r.args[0])>-1:!0);await Promise.all(i==null?void 0:i.map(async r=>{let s=this.getRef(`${r.keywords[0]}`),a=g2;typeof s=="string"&&s!==""?a=f2(s):typeof s=="function"&&(a=s);const o=r.args[0];let l=this.context.refs[o];const c=typeof a=="function"&&a.call(this.context);if(l&&c){const u=await r.executeWithContext(this.context,...e);if(!u)return;const p=Object.keys(u);for(var h=0,d=p.length;hthis.parseCallback(i))}destroy(){this.context.notEventRedefine||this.removeCallbackAll()}getCallback(e){return this.context[e]}removeCallbackAll(){this.getBindings().forEach(e=>{this.removeCallback(e)}),this.initBindings()}removeCallback({requestId:e}){window.cancelAnimationFrame(e)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}makeCallback(e){const t=e.callback,i=r=>{t(r),e.requestId=window.requestAnimationFrame(i)};return()=>{e.requestId=window.requestAnimationFrame(i)}}addCallback(e,t){const i=this.makeCallback(e,t);this.addBinding(e),i()}bindingCallback(e,t){var l,c;const i={eventName:e.args[0],callback:t};i.codes=[],i.checkMethodList=[];const r=e.getFunction("debounce"),s=e.getFunction("throttle");if(r){var a=+(((l=r.args)==null?void 0:l[0])||0);i.callback=np(t,a)}else if(s){var o=+(((c=s.args)==null?void 0:c[0])||0);i.callback=Yg(t,o)}e.keywords.forEach(h=>{const d=h;this.getCallback(d)?i.checkMethodList.push(d):i.codes.push(d.toLowerCase())}),this.addCallback(i,e)}parseCallback(e){const t=this.context;var i=e.args;if(i){var r=t[e.originalMethod].bind(t);this.bindingCallback(e,r)}}}const b2={touchstart:!0,touchmove:!0,mousedown:!0,mouseup:!0,mousemove:!0},_2={doubletab:"touchend"},S2={doubletab:!0},w2={self(n){return n&&n.$dt&&n.$dt.is(n.target)},isAltKey(n){return n.altKey},isCtrlKey(n){return n.ctrlKey},isShiftKey(n){return n.shiftKey},isMetaKey(n){return n.metaKey||n.key=="Meta"||n.code.indexOf("Meta")>-1},isMouseLeftButton(n){return n.buttons===1},isMouseRightButton(n){return n.buttons===2},hasMouse(n){return n.pointerType==="mouse"},hasTouch(n){return n.pointerType==="touch"},hasPen(n){return n.pointerType==="pen"},preventDefault(n){return n.preventDefault(),!0},stopPropagation(n){return n.stopPropagation(),!0}};class M2 extends Sh{initialize(){var e,t;this.destroy(),!(this._domEvents&&this.context.notEventRedefine)&&((!this._domEvents||this._domEvents.length===0||this._bindings.length===0)&&(this._domEvents=this.context.filterMethodes("domevent")),!((e=this._bindings)!=null&&e.length)&&((t=this._domEvents)==null?void 0:t.length)&&this._domEvents.forEach(i=>this.parseDomEvent(i)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}getCallback(e){return this.context[e]||w2[e]}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}removeDomEvent({eventName:e,dom:t,callback:i}){Np.removeDomEvent(t,e,i)}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}matchPath(e,t){return e?e.matches(t)?e:this.matchPath(e.parentElement,t):null}hasDelegate(e,t){return this.matchPath(e.target||e.srcElement,t.delegate)}makeCallback(e,t,i){return e.delegate?this.makeDelegateCallback(e,t,i):this.makeDefaultCallback(e,t,i)}makeDefaultCallback(e,t,i){return r=>{var s=this.runEventCallback(r,e,t,i);if($t(s))return s}}makeDelegateCallback(e,t,i){return r=>{const s=this.hasDelegate(r,e);if(s){r.$dt=qe.create(s);var a=this.runEventCallback(r,e,t,i);if($t(a))return a}}}runEventCallback(e,t,i,r){const s=this.context;if(e.xy=Np.posXY(e),t.beforeMethods.length&&t.beforeMethods.every(o=>this.getCallback(o.target).call(s,e,o.param)),this.checkEventType(e,t)){var a=r(e,e.$dt,e.xy);return a!==!1&&t.afterMethods.length&&t.afterMethods.forEach(o=>this.getCallback(o.target).call(s,e,o.param)),a}}checkEventType(e,t){const i=this.context;var r=!0;t.codes.length&&(r=(e.code?t.codes.indexOf(e.code.toLowerCase())>-1:!1)||(e.key?t.codes.indexOf(e.key.toLowerCase())>-1:!1));var s=!0;return t.checkMethodList.length&&(s=t.checkMethodList.every(a=>{var o=this.getCallback(a);return Ye(o)&&o?o.call(i,e):$t(o)?!!o:!0})),r&&s}getDefaultDomElement(e){const t=this.context;let i;return e?i=t.refs[e]||t[e]||window[e]:i=t.el||t.$el||t.$root,i instanceof qe?i.getElement():i}getRealEventName(e){return _2[e]||e}getCustomEventName(e){return S2[e]?e:""}getDefaultEventObject(e,t,i,r,s){var f,g;const a={eventName:this.getRealEventName(e),customEventName:this.getCustomEventName(e),callback:s},[,,...o]=r.args;a.dom=this.getDefaultDomElement(t),a.delegate=o.join(e2),a.beforeMethods=[],a.afterMethods=[],a.codes=[],a.checkMethodList=[];const l=r.getFunction("debounce"),c=r.getFunction("throttle");if(l){var h=+(((f=l.args)==null?void 0:f[0])||0);a.callback=np(s,h)}else if(c){var d=+(((g=c.args)==null?void 0:g[0])||0);a.callback=Yg(s,d)}const u=r.getFunctionList("after"),p=r.getFunctionList("before");return u.length&&u.forEach(m=>{var v=m.args[0].split(" "),[x,_]=v;a.afterMethods.push({target:x,param:_})}),p.length&&p.forEach(m=>{var v=m.args[0].split(" "),[x,_]=v;a.beforeMethods.push({target:x,param:_})}),r.keywords.forEach(m=>{const v=m;this.getCallback(v)?a.checkMethodList.push(v):a.codes.push(v.toLowerCase())}),a}addDomEvent(e,t,i){e.callback=this.makeCallback(e,t,i),this.addBinding(e);var r=!1;t.hasKeyword("capture")&&(r=!0),b2[e.eventName]&&(r={passive:!0,capture:r}),e.dom&&Np.addDomEvent(e.dom,e.eventName,e.callback,r)}makeCustomEventCallback(e,t,i){var a;if(e.customEventName==="doubletab"){var r=300,s=t.getFunction("delay");return s&&(r=+(((a=s.args)==null?void 0:a[0])||0)),(...o)=>{this.doubleTab?(window.performance.now()-this.doubleTab.time{var r=i.split(pg);t.push.apply(t,r)}),t}parseDomEvent(e){const t=this.context;var i=e.args;if(i){var r=this.getEventNames(i[0]),s=t[e.originalMethod].bind(t);for(let a=0,o=r.length;athis.parseObserver(i)))}destroy(){this.context.notEventRedefine||this.removeEventAll()}removeEventAll(){this.getBindings().forEach(e=>{this.removeDomEvent(e)}),this.initBindings()}disconnectObserver(e){e==null||e.disconnect()}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}addObserver(e){this.addBinding(e)}getDefaultDomElement(e){const t=this.context;let i;return e?i=t.refs[e]||t[e]||window[e]:i=t.el||t.$el||t.$root,i instanceof qe?i.getElement():i}createObserver(e,t){var c;const[i,r]=e.args||["intersection"],s=this.getDefaultDomElement(r),a=e.getFunction("params"),o=vu((c=a==null?void 0:a.args)==null?void 0:c[0]);let l;switch(i){case"intersection":o.root&&(o.root=this.getDefaultDomElement(o.root)),l=new window.IntersectionObserver(t,o||{}),l.observe(s);break;case"mutation":l=new window.MutationObserver(t),l.observe(s,o||{attributes:!0,characterData:!0,childList:!0});break;case"performance":l=new window.PerformanceObserver(t),l.observe(o||{entryTypes:["paint"]});break}return l}bindingObserver(e,t){this.addObserver(this.createObserver(e,t))}parseObserver(e){const t=this.context;var i=t[e.originalMethod].bind(t);this.bindingObserver(e,i)}}class P2 extends Sh{initialize(){var e,t;this.destroy(),this._callbacks||(this._callbacks=this.context.filterMethodes("subscribe")),!((e=this._bindings)!=null&&e.length)&&((t=this._callbacks)==null?void 0:t.length)&&this._callbacks.forEach(i=>this.parseSubscribe(i))}destroy(){this.context.notEventRedefine||this.context.$store.offAll(this.context)}getCallback(e){return this.context[e]}getBindings(){return this._bindings||this.initBindings(),this._bindings}addBinding(e){this.getBindings().push(e)}initBindings(){this._bindings=[]}createLocalCallback(e,t){var i=t.bind(this.context);return i.displayName=`${this.context.sourceName}.${e}`,i.source=this.context.source,i}parseSubscribe(e){var m,v;const t=e.args.join(" "),i=[],r=[];let s=0,a=0,o=!1,l=!1,c=!1;const h=e.getFunction("debounce"),d=e.getFunction("throttle"),u=e.getFunction("allTrigger"),p=e.getFunction("selfTrigger"),f=e.getFunction("frame");h&&(s=+(((m=h.args)==null?void 0:m[0])||0)),d&&(a=+(((v=d.args)==null?void 0:v[0])||0)),u&&(o=!0),p&&(l=!0),f&&(c=!0),e.keywords.forEach(x=>{const _=x;this.context[_]?i.push(_):r.push(_)});const g=this.context[e.originalMethod];[...r,t].filter(Boolean).forEach(x=>{var _=this.createLocalCallback(x,g);this.context.$store.on(x,_,this.context,s,a,o,l,i,c)}),this.addBinding(e)}}KS({BindHandler:y2,CallbackHandler:x2,DomEventHandler:M2,ObserverHandler:$2,StoreHandler:P2});const Ec="ref",bv=qe.create("div"),_v=`[${Ec}]`,fg="refclass",T2=`[${fg}]`,Sv=[];var is,ep,dh,kl,uh,Al,Rl,lo,ph,fh,tp,J1,gh,mg,ip,Q1;const Qm=class{constructor(e,t){Pi(this,tp);Pi(this,gh);Pi(this,ip);Pi(this,is,{});Pi(this,ep,{});Pi(this,dh,0);Pi(this,kl,void 0);Pi(this,uh,void 0);Pi(this,Al,void 0);Pi(this,Rl,{});Pi(this,lo,{});Pi(this,ph,!1);Pi(this,fh,[]);this.refs={},this.children={},this.id=gv(),this.initializeProperty(e,t),this.handlers=this.initializeHandler(),this.initComponents()}get __timestamp(){return Mt(this,dh)}get timestamp(){return Mt(this,uh)}set timestamp(e){Ti(this,uh,e)}get target(){return this.$el.el}checkProps(e={}){return e}initializeProperty(e,t={}){this.opt=e||{},this.parent=this.opt,this.source=gv(),this.sourceName=this.constructor.name,this.props=new Proxy(Mt(this,Rl),{get:(i,r)=>hc(this,ip,Q1).call(this,r),set:(i,r)=>{throw new Error(`${r} is readonly`)}}),hc(this,gh,mg).call(this,t)}hasProp(e){return Mt(this,fh).includes(e==null?void 0:e.toUpperCase())}setServer(e=!0){Ti(this,ph,e)}get isServer(){var e;return((e=this.parent)==null?void 0:e.isServer)||Mt(this,ph)}initComponents(){this.childComponents=this.components()}initializeHandler(){return qS(this)}initState(){return{}}setState(e={},t=!0){Ti(this,ep,Mt(this,is)),Ti(this,is,Object.assign({},Mt(this,is),e)),t&&this.load()}toggleState(e,t=!0){this.setState({[e]:!Mt(this,is)[e]},t)}apply(e){return HS(e)}_reload(e,t=null){t&&this.render(t),hc(this,gh,mg).call(this,e),Ti(this,is,{}),this.setState(this.initState(),!1),this.refresh(!0)}checkLoad(e){window.requestAnimationFrame(()=>{this.render(e)})}get state(){return Mt(this,is)}get isPreLoaded(){return!0}async render(e){if(!this.isPreLoaded){this.checkLoad(e);return}const t=this.template(),i=this.parseTemplate(t);return this.$el?this.$el.htmlDiff(i):(this.$el=i,this.refs.$el=this.$el,e&&e.append(this.$el)),await this.load(),this.afterRender(),this}get html(){return this.$el.outerHTML()}initialize(){Ti(this,is,this.initState())}afterRender(){}components(){return P({},this.parent.childComponents)}getRef(...e){const t=e.join("");return this.refs[t]}refreshElementReference(e,t){for(var i=e.$$(_v),r=0,s=i.length;rthis._getComponentInfo(i)).filter(i=>t.length===0?!0:t.includes(i.refClass))}_getComponentInfo(e){const t=e.attr(fg),i=this.getEventMachineComponent(t);if(i){let r=this.parsePropertyInfo(e),s=e.attr(Ec);return{$dom:e,refClass:t,props:r,refName:s||r.ref,component:i}}else return{refClass:t,notUsed:!0,$dom:e}}getComponentInfoList(e){if(!e)return Sv;let t=e.$$(T2).filter(i=>i.path().filter(r=>r.attr(fg)).length===1);return t.length?t.map(i=>this._getComponentInfo(i)):Sv}async parseComponent(){const e=this.$el,t=this.getComponentInfoList(e);!t.length||(await Promise.all(t.map(async i=>{i.notUsed?(i.$dom.remove(),console.warn(`${i.refClass} is not used.`)):await this.renderComponent(i)})),$u(this.children,(i,r)=>{r.timestamp!==this.__timestamp&&r.clean()}))}clean(){if(this.$el&&!this.$el.hasParent())return $u(this.children,(e,t)=>{Ye(t==null?void 0:t.clean)&&t.clean()}),this.destroy(),!0}refresh(){this.load()}async _afterLoad(){hc(this,tp,J1).call(this),this.runHandlers("initialize"),await this.bindData(),await this.parseComponent()}async makeLoadAction(e){const[t,...i]=e.args;let r=e.hasKeyword("domdiff");const s=this.refs[t];if(s){const a=await e.execute(...i),o=this.parseTemplate(a,!0);r?s.htmlDiff(o):s.html(o),this.refreshElementReference(s,t)}}async load(...e){Mt(this,kl)||Ti(this,kl,this.filterMethodes("load"));const t=Mt(this,kl).filter(i=>e.length===0?!0:i.args[0]===e[0]);await Promise.all(t.map(async i=>{await this.makeLoadAction(i)})),await this._afterLoad()}async runHandlers(e="run",...t){await Promise.all(this.handlers.filter(i=>i[e]).map(async i=>{await i[e](...t)}))}async bindData(...e){await this.runHandlers("bindData",...e)}template(){return null}eachChildren(e){!Ye(e)||Object.keys(this.children).forEach(t=>{e(this.children[t])})}hmr(){this.created(),this.initialize(),this.rerender(),this.eachChildren(e=>{e.hmr()})}rerender(){var e=this.$el.parent();this.destroy(),this.render(e)}destroy(){this.eachChildren(e=>{e.destroy()}),this.runHandlers("destroy"),this.$el&&this.$el.remove(),this.$el=null,this.refs={},this.children={}}collectMethodes(e=!1){return(!Mt(this,Al)||e)&&Ti(this,Al,MS(this,t=>Fs.check(t)).map(t=>Fs.parse(t,this))),Mt(this,Al)}filterMethodes(e,t=!1){return this.collectMethodes(t).filter(i=>i.method===e)}findChildren(e){return this.props.contentChildren.filter(t=>t.component===e)}getChildContent(e,t=""){var i;return((i=this.props.contentChildren.find(e))==null?void 0:i.props.content)||t}};let gg=Qm;is=new WeakMap,ep=new WeakMap,dh=new WeakMap,kl=new WeakMap,uh=new WeakMap,Al=new WeakMap,Rl=new WeakMap,lo=new WeakMap,ph=new WeakMap,fh=new WeakMap,tp=new WeakSet,J1=function(){dv(this,dh)._++},gh=new WeakSet,mg=function(e){Ti(this,Rl,this.checkProps(e)),Ti(this,lo,{}),Object.keys(e).forEach(t=>{Mt(this,lo)[t.toUpperCase()]=t}),Ti(this,fh,Object.keys(Mt(this,lo)))},ip=new WeakSet,Q1=function(e){return Mt(this,Rl)[Mt(this,lo)[e.toUpperCase()]]};var co;const rp=class extends gg{constructor(t,i={}){super(t,i);Pi(this,co,void 0);i.store?Ti(this,co,i.store):Ti(this,co,new H1),this.created(),this.initialize()}currentContext(){return this.contexts[this.contexts.length-1]}setStore(t){Ti(this,co,t)}get $store(){return Mt(this,co)||this.parent.$store}async created(){}createLocalCallback(t,i){var r=i.bind(this);return r.displayName=`${this.sourceName}.${t}`,r.source=this.source,r}emit(t,...i){this.$store.source=this.source,this.$store.sourceContext=this,this.$store.emit(t,...i)}nextTick(t,i=0){window.setTimeout(()=>{this.$store.nextTick(t)},i)}trigger(t,...i){this.$store.source=this.source,this.$store.trigger(t,...i)}broadcast(t,...i){Object.keys(this.children).forEach(r=>{this.children[r].trigger(t,...i),this.children[r].broadcast(t,...i)})}on(t,i,r=0,s=0,a=!1,o=!1,l=!1){this.$store.on(t,i,this.source,r,s,a,o,[],l)}off(t,i){this.$store.off(t,i,this.source)}subscribe(t,i=0,r=0){const s=`subscribe.${Kg()}`,a=this.createLocalCallback(s,t);return this.$store.on(s,a,this,i,r,!1,!0),s}createFunctionComponent(t,i,r=rp){return super.createFunctionComponent(t,i,r)}static createElementInstance(t,i){if(t.__proto__.name===""){class r extends rp{template(){return t.call(this,this.props)}}return new r(i,i)}else return new t(i,i)}};let Pa=rp;co=new WeakMap;const wh=(n,e)=>{const t=qe.create(e.container||document.body),i=Pa.createElementInstance(n,e);return i.render(t),YS(i),i};function C2(n,e=""){var t=n||{};return Object.keys(t).filter(i=>$t(t[i])).map(i=>`${i}: ${t[i]}`).join(";"+e)}function E2(n){return Object.keys(n||{}).map(t=>t==="class"&&hs(n[t])?`${t}="${Xn(n[t])}"`:t==="style"&&hs(n[t])?`${t}="${C2(n[t])}"`:cs(n[t])||Bi(n[t])||n[t]==="undefined"?n[t]?t:"":`${t}="${n[t]}"`).join(" ")}function W(n,e={},t=[]){t=t.flat(1/0).join("");let i;i=Object.keys(e).length?Pl(e):"";const r=e.ref?`ref="${e.ref}"`:"";return`${t}`}function lp(...n){return n.map(e=>{let t,i={},r=[];return gi(e)?t=e:Ni(e)&&([t,i={},r=[]]=e),r.length?W(t,i,lp(r)):W(t,i)}).join(` -`)}function Mh(n,e,t=[]){return t=t.flat(1/0),`<${n} ${E2(e)}>${t.join(" ")}`}function V(n,e={},...t){if(t=t.flat(1/0),n===Ji)return t;if(e=e||{},typeof n!="string"){const i=n.name;return Yl({[i]:n}),W(i,e,t)}else return Mh(n,e,t)}const Ji=new Object;var zs=1e-6,Or=typeof Float32Array!="undefined"?Float32Array:Array;Math.hypot||(Math.hypot=function(){for(var n=0,e=arguments.length;e--;)n+=arguments[e]*arguments[e];return Math.sqrt(n)});function ex(){var n=new Or(9);return Or!=Float32Array&&(n[1]=0,n[2]=0,n[3]=0,n[5]=0,n[6]=0,n[7]=0),n[0]=1,n[4]=1,n[8]=1,n}function Gp(n,e,t){var i=e[0],r=e[1],s=e[2],a=e[3],o=e[4],l=e[5],c=e[6],h=e[7],d=e[8],u=t[0],p=t[1],f=t[2],g=t[3],m=t[4],v=t[5],x=t[6],_=t[7],b=t[8];return n[0]=u*i+p*a+f*c,n[1]=u*r+p*o+f*h,n[2]=u*s+p*l+f*d,n[3]=g*i+m*a+v*c,n[4]=g*r+m*o+v*h,n[5]=g*s+m*l+v*d,n[6]=x*i+_*a+b*c,n[7]=x*r+_*o+b*h,n[8]=x*s+_*l+b*d,n}function I2(n,e){return n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=1,n[5]=0,n[6]=e[0],n[7]=e[1],n[8]=1,n}function L2(n,e){var t=Math.sin(e),i=Math.cos(e);return n[0]=i,n[1]=t,n[2]=0,n[3]=-t,n[4]=i,n[5]=0,n[6]=0,n[7]=0,n[8]=1,n}function k2(n,e){return n[0]=e[0],n[1]=0,n[2]=0,n[3]=0,n[4]=e[1],n[5]=0,n[6]=0,n[7]=0,n[8]=1,n}function Wi(){var n=new Or(16);return Or!=Float32Array&&(n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[11]=0,n[12]=0,n[13]=0,n[14]=0),n[0]=1,n[5]=1,n[10]=1,n[15]=1,n}function oa(n,e,t,i,r,s,a,o,l,c,h,d,u,p,f,g){var m=new Or(16);return m[0]=n,m[1]=e,m[2]=t,m[3]=i,m[4]=r,m[5]=s,m[6]=a,m[7]=o,m[8]=l,m[9]=c,m[10]=h,m[11]=d,m[12]=u,m[13]=p,m[14]=f,m[15]=g,m}function A2(n){return n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n}function wv(n,e){if(n===e){var t=e[1],i=e[2],r=e[3],s=e[6],a=e[7],o=e[11];n[1]=e[4],n[2]=e[8],n[3]=e[12],n[4]=t,n[6]=e[9],n[7]=e[13],n[8]=i,n[9]=s,n[11]=e[14],n[12]=r,n[13]=a,n[14]=o}else n[0]=e[0],n[1]=e[4],n[2]=e[8],n[3]=e[12],n[4]=e[1],n[5]=e[5],n[6]=e[9],n[7]=e[13],n[8]=e[2],n[9]=e[6],n[10]=e[10],n[11]=e[14],n[12]=e[3],n[13]=e[7],n[14]=e[11],n[15]=e[15];return n}function Zi(n,e){var t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=e[9],u=e[10],p=e[11],f=e[12],g=e[13],m=e[14],v=e[15],x=t*o-i*a,_=t*l-r*a,b=t*c-s*a,S=i*l-r*o,C=i*c-s*o,k=r*c-s*l,O=h*g-d*f,q=h*m-u*f,X=h*v-p*f,T=d*m-u*g,z=d*v-p*g,ae=u*v-p*m,j=x*ae-_*z+b*T+S*X-C*q+k*O;return j?(j=1/j,n[0]=(o*ae-l*z+c*T)*j,n[1]=(r*z-i*ae-s*T)*j,n[2]=(g*k-m*C+v*S)*j,n[3]=(u*C-d*k-p*S)*j,n[4]=(l*X-a*ae-c*q)*j,n[5]=(t*ae-r*X+s*q)*j,n[6]=(m*b-f*k-v*_)*j,n[7]=(h*k-u*b+p*_)*j,n[8]=(a*z-o*X+c*O)*j,n[9]=(i*X-t*z-s*O)*j,n[10]=(f*C-g*b+v*x)*j,n[11]=(d*b-h*C-p*x)*j,n[12]=(o*q-a*T-l*O)*j,n[13]=(t*T-i*q+r*O)*j,n[14]=(g*_-f*S-m*x)*j,n[15]=(h*S-d*_+u*x)*j,n):null}function Xi(n,e,t){var i=e[0],r=e[1],s=e[2],a=e[3],o=e[4],l=e[5],c=e[6],h=e[7],d=e[8],u=e[9],p=e[10],f=e[11],g=e[12],m=e[13],v=e[14],x=e[15],_=t[0],b=t[1],S=t[2],C=t[3];return n[0]=_*i+b*o+S*d+C*g,n[1]=_*r+b*l+S*u+C*m,n[2]=_*s+b*c+S*p+C*v,n[3]=_*a+b*h+S*f+C*x,_=t[4],b=t[5],S=t[6],C=t[7],n[4]=_*i+b*o+S*d+C*g,n[5]=_*r+b*l+S*u+C*m,n[6]=_*s+b*c+S*p+C*v,n[7]=_*a+b*h+S*f+C*x,_=t[8],b=t[9],S=t[10],C=t[11],n[8]=_*i+b*o+S*d+C*g,n[9]=_*r+b*l+S*u+C*m,n[10]=_*s+b*c+S*p+C*v,n[11]=_*a+b*h+S*f+C*x,_=t[12],b=t[13],S=t[14],C=t[15],n[12]=_*i+b*o+S*d+C*g,n[13]=_*r+b*l+S*u+C*m,n[14]=_*s+b*c+S*p+C*v,n[15]=_*a+b*h+S*f+C*x,n}function Oi(n,e,t){var i=t[0],r=t[1],s=t[2],a,o,l,c,h,d,u,p,f,g,m,v;return e===n?(n[12]=e[0]*i+e[4]*r+e[8]*s+e[12],n[13]=e[1]*i+e[5]*r+e[9]*s+e[13],n[14]=e[2]*i+e[6]*r+e[10]*s+e[14],n[15]=e[3]*i+e[7]*r+e[11]*s+e[15]):(a=e[0],o=e[1],l=e[2],c=e[3],h=e[4],d=e[5],u=e[6],p=e[7],f=e[8],g=e[9],m=e[10],v=e[11],n[0]=a,n[1]=o,n[2]=l,n[3]=c,n[4]=h,n[5]=d,n[6]=u,n[7]=p,n[8]=f,n[9]=g,n[10]=m,n[11]=v,n[12]=a*i+h*r+f*s+e[12],n[13]=o*i+d*r+g*s+e[13],n[14]=l*i+u*r+m*s+e[14],n[15]=c*i+p*r+v*s+e[15]),n}function os(n,e,t){var i=t[0],r=t[1],s=t[2];return n[0]=e[0]*i,n[1]=e[1]*i,n[2]=e[2]*i,n[3]=e[3]*i,n[4]=e[4]*r,n[5]=e[5]*r,n[6]=e[6]*r,n[7]=e[7]*r,n[8]=e[8]*s,n[9]=e[9]*s,n[10]=e[10]*s,n[11]=e[11]*s,n[12]=e[12],n[13]=e[13],n[14]=e[14],n[15]=e[15],n}function R2(n,e,t,i){var r=i[0],s=i[1],a=i[2],o=Math.hypot(r,s,a),l,c,h,d,u,p,f,g,m,v,x,_,b,S,C,k,O,q,X,T,z,ae,j,J;return o0?(m=Math.sqrt(g+1)*2,n[3]=.25*m,n[0]=(d-p)/m,n[1]=(u-l)/m,n[2]=(o-c)/m):a>h&&a>f?(m=Math.sqrt(1+a-h-f)*2,n[3]=(d-p)/m,n[0]=.25*m,n[1]=(o+c)/m,n[2]=(u+l)/m):h>f?(m=Math.sqrt(1+h-a-f)*2,n[3]=(u-l)/m,n[0]=(o+c)/m,n[1]=.25*m,n[2]=(d+p)/m):(m=Math.sqrt(1+f-a-h)*2,n[3]=(o-c)/m,n[0]=(u+l)/m,n[1]=(d+p)/m,n[2]=.25*m),n}function D2(n,e,t,i,r){var s=1/Math.tan(e/2),a;return n[0]=s/t,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=s,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[11]=-1,n[12]=0,n[13]=0,n[15]=0,r!=null&&r!==1/0?(a=1/(i-r),n[10]=(r+i)*a,n[14]=2*r*i*a):(n[10]=-1,n[14]=-2*i),n}var F2=D2;function ls(){var n=new Or(3);return Or!=Float32Array&&(n[0]=0,n[1]=0,n[2]=0),n}function yr(n){var e=new Or(3);return e[0]=n[0],e[1]=n[1],e[2]=n[2],e}function j2(n){var e=n[0],t=n[1],i=n[2];return Math.hypot(e,t,i)}function Pt(n,e,t){var i=new Or(3);return i[0]=n,i[1]=e,i[2]=t,i}function bt(n,e,t){return n[0]=e[0]+t[0],n[1]=e[1]+t[1],n[2]=e[2]+t[2],n}function vt(n,e,t){return n[0]=e[0]-t[0],n[1]=e[1]-t[1],n[2]=e[2]-t[2],n}function xa(n,e,t){return n[0]=e[0]*t[0],n[1]=e[1]*t[1],n[2]=e[2]*t[2],n}function N2(n,e,t){return n[0]=e[0]/t[0],n[1]=e[1]/t[1],n[2]=e[2]/t[2],n}function Fn(n,e){return n[0]=Math.floor(e[0]),n[1]=Math.floor(e[1]),n[2]=Math.floor(e[2]),n}function Ta(n,e){return n[0]=Math.round(e[0]),n[1]=Math.round(e[1]),n[2]=Math.round(e[2]),n}function mr(n,e){var t=e[0]-n[0],i=e[1]-n[1],r=e[2]-n[2];return Math.hypot(t,i,r)}function Pr(n,e){return n[0]=-e[0],n[1]=-e[1],n[2]=-e[2],n}function B2(n,e){var t=e[0],i=e[1],r=e[2],s=t*t+i*i+r*r;return s>0&&(s=1/Math.sqrt(s)),n[0]=e[0]*s,n[1]=e[1]*s,n[2]=e[2]*s,n}function G2(n,e){return n[0]*e[0]+n[1]*e[1]+n[2]*e[2]}function Hp(n,e,t){var i=e[0],r=e[1],s=e[2],a=t[0],o=t[1],l=t[2];return n[0]=r*l-s*o,n[1]=s*a-i*l,n[2]=i*o-r*a,n}function Re(n,e,t,i){var r=e[0],s=e[1],a=e[2];return n[0]=r+i*(t[0]-r),n[1]=s+i*(t[1]-s),n[2]=a+i*(t[2]-a),n}function Wt(n,e,t){var i=e[0],r=e[1],s=e[2],a=t[3]*i+t[7]*r+t[11]*s+t[15];return a=a||1,n[0]=(t[0]*i+t[4]*r+t[8]*s+t[12])/a,n[1]=(t[1]*i+t[5]*r+t[9]*s+t[13])/a,n[2]=(t[2]*i+t[6]*r+t[10]*s+t[14])/a,n}function vg(n,e){var t=n[0],i=n[1],r=n[2],s=e[0],a=e[1],o=e[2];return Math.abs(t-s)<=zs*Math.max(1,Math.abs(t),Math.abs(s))&&Math.abs(i-a)<=zs*Math.max(1,Math.abs(i),Math.abs(a))&&Math.abs(r-o)<=zs*Math.max(1,Math.abs(r),Math.abs(o))}var Tv=N2,Fe=mr,H2=j2;(function(){var n=ls();return function(e,t,i,r,s,a){var o,l;for(t||(t=3),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;o0&&(a=1/Math.sqrt(a)),n[0]=t*a,n[1]=i*a,n[2]=r*a,n[3]=s*a,n}(function(){var n=U2();return function(e,t,i,r,s,a){var o,l;for(t||(t=4),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;ozs?(n[0]=e[0]/i,n[1]=e[1]/i,n[2]=e[2]/i):(n[0]=1,n[1]=0,n[2]=0),t}function Up(n,e,t,i){var r=e[0],s=e[1],a=e[2],o=e[3],l=t[0],c=t[1],h=t[2],d=t[3],u,p,f,g,m;return p=r*l+s*c+a*h+o*d,p<0&&(p=-p,l=-l,c=-c,h=-h,d=-d),1-p>zs?(u=Math.acos(p),f=Math.sin(u),g=Math.sin((1-i)*u)/f,m=Math.sin(i*u)/f):(g=1-i,m=i),n[0]=g*r+m*l,n[1]=g*s+m*c,n[2]=g*a+m*h,n[3]=g*o+m*d,n}function Y2(n,e){var t=e[0]+e[4]+e[8],i;if(t>0)i=Math.sqrt(t+1),n[3]=.5*i,i=.5/i,n[0]=(e[5]-e[7])*i,n[1]=(e[6]-e[2])*i,n[2]=(e[1]-e[3])*i;else{var r=0;e[4]>e[0]&&(r=1),e[8]>e[r*3+r]&&(r=2);var s=(r+1)%3,a=(r+2)%3;i=Math.sqrt(e[r*3+r]-e[s*3+s]-e[a*3+a]+1),n[r]=.5*i,i=.5/i,n[3]=(e[s*3+a]-e[a*3+s])*i,n[s]=(e[s*3+r]+e[r*3+s])*i,n[a]=(e[a*3+r]+e[r*3+a])*i}return n}function K2(n,e,t,i){var r=.5*Math.PI/180;e*=r,t*=r,i*=r;var s=Math.sin(e),a=Math.cos(e),o=Math.sin(t),l=Math.cos(t),c=Math.sin(i),h=Math.cos(i);return n[0]=s*l*h-a*o*c,n[1]=a*o*h+s*l*c,n[2]=a*l*c-s*o*h,n[3]=a*l*h+s*o*c,n}var ix=W2;(function(){var n=ls(),e=Pt(1,0,0),t=Pt(0,1,0);return function(i,r,s){var a=G2(r,s);return a<-.999999?(Hp(n,e,r),H2(n)<1e-6&&Hp(n,t,r),B2(n,n),X2(i,n,Math.PI),i):a>.999999?(i[0]=0,i[1]=0,i[2]=0,i[3]=1,i):(Hp(n,r,s),i[0]=n[0],i[1]=n[1],i[2]=n[2],i[3]=1+a,ix(i,i))}})();(function(){var n=yg(),e=yg();return function(t,i,r,s,a,o){return Up(n,i,a,o),Up(e,r,s,o),Up(t,n,e,2*o*(1-o)),t}})();(function(){var n=ex();return function(e,t,i,r){return n[0]=i[0],n[3]=i[1],n[6]=i[2],n[1]=r[0],n[4]=r[1],n[7]=r[2],n[2]=-t[0],n[5]=-t[1],n[8]=-t[2],ix(e,Y2(e,n))}})();function q2(){var n=new Or(2);return Or!=Float32Array&&(n[0]=0,n[1]=0),n}function Z2(n,e){var t=e[0]-n[0],i=e[1]-n[1];return Math.hypot(t,i)}function J2(n,e){var t=n[0],i=n[1],r=e[0],s=e[1];return Math.abs(t-r)<=zs*Math.max(1,Math.abs(t),Math.abs(r))&&Math.abs(i-s)<=zs*Math.max(1,Math.abs(i),Math.abs(s))}(function(){var n=q2();return function(e,t,i,r,s,a){var o,l;for(t||(t=2),i||(i=0),r?l=Math.min(r*t+i,e.length):l=e.length,o=i;obh(`bodyMouseFirstMove ${n}`),at=(n="move")=>bh(`bodyMouseMove ${n}`),ct=(n="end")=>bh(`bodyMouseUp ${n}`),ai="updateViewport",lx="toggle.fullscreen",Lt="refreshSelection",Mo="refreshSelectionTool",ew="refreshContent",tw="showComponentPopup",cx="showNotify",Oo="resize.window",yn="resizeCanvas",Ki="updateCanvas",hx="openContextMenu";let Wo={name:void 0};function qg(){return Wo.name===void 0&&(window.navigator.appVersion.indexOf("Win")!=-1?Wo.name="win":window.navigator.appVersion.indexOf("Mac")!=-1?Wo.name="mac":window.navigator.appVersion.indexOf("X11")!=-1?Wo.name="linux":Wo.name=""),Wo.name}const $o={backspace:8,tab:9,enter:13,escape:27,space:32,pageup:33,pagedown:34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,semicolon:59,equals:61,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,multiply:106,add:107,subtract:109,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,f13:124,f14:125,f15:126,f16:127,f17:128,f18:129,f19:130,comma:188,",":188,period:190,".":190,slash:191,"/":191,backquote:192,"`":192,openbracket:219,"[":219,backslash:220,"\\":220,closebracket:221,"]":221,quote:222,"'":222,altgr:225},iw={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318",SHIFT:"\u21E7",CTRL:"\u2303",ALT:"\u2325",ENTER:"\u21B5",ESC:"\u238B",TAB:"\u21E5",SPACE:"\u2423",CAPSLOCK:"\u21EA",DELETE:"\u2326",INSERT:"\u2324",HOME:"\u21F1",END:"\u21F2",PAGEUP:"\u21DE",PAGEDOWN:"\u21DF",PRINTSCREEN:"\u2399",SCROLLLOCK:"\u21DE",PAUSE:"\u23CF",NUMLOCK:"\u21EA",META:"\u2318",WINDOWS:"\u2318",CONTEXTMENU:"\u2325",COMMAND:"\u2318"},rw=qg(),Jr=(n,e=rw)=>(n[e]||n.key).split("+").map(t=>t.trim()).map(t=>{const i=t.toUpperCase();return iw[i]||i}).join(" ");class ge extends Pa{get notEventRedefine(){return!0}get $editor(){if(!this.__cacheParentEditor){let e=this.parent;for(;e;){if(e.$editor){this.__cacheParentEditor=e.$editor;break}e=e.parent}}return this.__cacheParentEditor}get $context(){return this.$editor.context}get $store(){return this.$context.store||this.parent.$store}get localeKey(){return""}getMessageKey(e){return this.localeKey?`${this.localeKey}.${e}`:e}$i18n(e,t={},i){return this.$editor.getI18nMessage(this.getMessageKey(e),t,i)}$initI18n(e){return this.$editor.initI18nMessage(this.getMessageKey(e))}get $config(){return this.$context.config}get $selection(){return this.$context.selection}get $segmentSelection(){return this.$context.segmentSelection}get $commands(){return this.$context.commands}get $viewport(){return this.$context.viewport}get $snapManager(){return this.$context.snapManager}get $timeline(){return this.$context.timeline}get $history(){return this.$context.history}get $shortcuts(){return this.$context.shortcuts}get $keyboardManager(){return this.$context.keyboardManager}get $storageManager(){return this.$context.storageManager}get $injectManager(){return this.$context.injectManager}get $model(){return this.$context.modelManager}get $lockManager(){return this.$context.lockManager}get $visibleManager(){return this.$context.visibleManager}get $modeView(){return this.$context.modeViewManager}get $icon(){return this.$context.icon}get $stateManager(){return this.$context.stateManager}get $menu(){return this.$context.menuManager}notify(e,t,i,r=1e3){this.emit(cx,e,t,i,r)}alert(e,t,i=1e3){this.notify(Q2.ALERT,e,t,i)}$theme(e){return this.$editor.themeValue(e)}bodyMouseFirstMove(e,t){this[t]&&this.emit(sx,this[t],this,e.xy)}bodyMouseMove(e,t){this[t]&&this.emit(ax,this[t],this,e.xy)}bodyMouseUp(e,t){this[t]&&this.emit(ox,this[t],this,e.xy)}createFunctionComponent(e,t,i=ge){return super.createFunctionComponent(e,t,i)}}class nw extends ge{initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.refreshCursor()})}template(){return V("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},V("div",{class:"page-view",ref:"$pageView"},V("div",{class:"page-lock scrollbar",ref:"$lock"},this.$injectManager.generate("canvas.view"))))}[Me("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$context.config.is("editing.mode",ki.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode($o.space))}[Ke("$lock")+et("checkSpace")+at("movePan")+ct("moveEndPan")](){this.startMovePan()}[qt("editing.mode")](){this.$config.is("editing.mode",ki.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ls()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const i=Pt(e,t,0);this.$context.viewport.pan(...Wt([],vt([],this.lastDist,i),this.$context.viewport.scaleMatrixInverse)),this.lastDist=i}refreshCursor(){this.$context.config.is("editing.mode",ki.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}async[Me("$container")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}[an("$lock")+wt](){}[sn("$lock")+wt](e){const t=this.$context.viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$command.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const i=qe.create(e.target).attr("data-id");if(i)this.$command.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},i);else{const r=e.dataTransfer.getData("image/info");this.$command.emit("dropImageUrl",r)}}}[K1("$lock")+wt](e){const[t,i]=Z1(e);if(!this.state.gesture)e.ctrlKey&&this.$context.viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const r=1-2.5*i/100;this.$context.viewport.zoom(r)}else{const r=-2.5*t,s=-2.5*i;this.$context.viewport.pan(-r/this.$viewport.scale,-s/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$context.viewport.refreshCanvasSize(this.refs.$lock.rect())}[H(Oo,yn)](){this.refreshCanvasSize()}[qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[H(ai)](){this.$commands.emit("refreshCursor","auto")}}class Zg extends ge{template(){return` -
        - ${this.$injectManager.generate("page.subeditor.view")} -
        - `}}class sw extends ge{components(){return{BlankCanvasView:nw,PageSubEditor:Zg}}template(){return` -
        -
        - ${W("PageSubEditor")} -
        -
        -
        - ${W("BlankCanvasView")} -
        - -
        -
        - `}[H(lx)](){this.refs.$el.toggleFullscreen()}}class Jg extends Pa{get notEventRedefine(){return!0}getValue(){return this.props.defaultValue}sendEvent(){const e=this.props.key,t=this.getValue(),i=this.props.params;Ye(this.props.onClick)?this.props.onClick(e,t,i):this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):gi(this.props.action)||Ye(this.props.action)?this.emit(this.props.action,e,t,i):Ni(this.props.action)?this.emit(this.props.action.map(r=>[r,e,t,i])):this.props.onChange&&this.parent.trigger(this.props.onChange,e,t,i)}}class aw extends Jg{initState(){return{label:this.props.label||"",text:this.props.text||"",params:this.props.params||""}}template(){return"
        "}[me("$body")+It](){var{label:e,text:t}=this.state,i=e?"has-label":"";return` -
        - ${e?``:""} -
        - -
        -
        - `}getValue(){return this.props.defaultValue}[ne("$el button")](){this.sendEvent()}}const ow=["True","False"];class lw extends Jg{initState(){return{checkedValue:this.props.checkedValue||this.props.value,checked:this.props.value||"false",toggleLabels:this.props.toggleLabels||ow,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||["true","false"]}}template(){return V("div",{class:"small-editor button",ref:"$body"})}[me("$body")+It](){var{checked:e,checkedValue:t}=this.state;return` -
        -
        - ${this.state.toggleValues.map((i,r)=>{let s=this.state.toggleLabels[r],a=this.state.toggleTitles[r];return V("div",{class:`${i===e?"visible":""} ${i===t?"checked":""}`},V("button",{type:"button","data-index":r,class:i===t?"checked":"",value:i,title:a,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},s))}).join("")} -
        -
        - `}[Me("$area")](){return{"data-selected-index":this.state.toggleValues.findIndex(t=>t===this.state.checked)}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[ne("$el button")+wt+ds](e){const t=e.$dt.value,i=this.state.toggleValues.findIndex(s=>s===t),r=this.state.toggleValues[(i+1)%this.state.toggleValues.length];this.setValue(r),this.trigger("change")}[we("change")](){this.sendEvent()}}const cw=["True","False"];class hw extends Jg{initState(){return{label:this.props.label||"",checked:this.props.value||!1,toggleLabels:this.props.toggleLabels||cw,toggleTitles:this.props.toggleTitles||[],toggleValues:this.props.toggleValues||[!0,!1]}}template(){return V("div",{class:"small-editor button",ref:"$body"})}[me("$body")](){var{label:e,checked:t}=this.state,i=e?"has-label":"";return` -
        - ${e?``:""} -
        - ${this.state.toggleValues.map((r,s)=>{let a=this.state.toggleLabels[s],o=this.state.toggleTitles[s];return V("div",null,V("button",{type:"button",class:`${r===t?"checked":""}`,"data-index":s,title:o,style:"--elf--toggle-checkbox-tooltip-top: -20%;"},a))}).join("")} -
        -
        - `}[Me("$area")](){const e=this.state.toggleValues.findIndex(i=>i===this.state.checked),t=100/this.state.toggleValues.length;return{"data-selected-index":e,cssText:` - --unit-count: ${this.state.toggleValues.length}; - --button-font-size: ${13-this.state.toggleValues.length}px ; - --selected-button-size: ${1/this.state.toggleValues.length*100}%; - --selected-button-position: ${e*t}%; - `}}setValue(e){this.setState({checked:e})}getValue(){return this.state.checked}[ne("$el button")](e){const t=+e.$dt.data("index");this.setValue(this.state.toggleValues[t]),this.trigger("change")}[we("change")](){this.sendEvent()}}class jn extends Pa{initState(){return{value:this.props.value||""}}template(){const{content:e}=this.props,{value:t}=this.state;return V("div",{class:"tab-content scrollbar","data-value":t},e)}}class $h extends Pa{afterRender(){window.setTimeout(()=>{this.setValue(this.state.selectedValue)},0)}initState(){return{type:this.props.type||"number",direction:this.props.direction||"",selectedValue:this.props.selectedValue||""}}template(){return` -
        - `}[me("$tab")](){const{content:e,contentChildren:t=[]}=this.props,i=t.filter(r=>r.component===jn);return[V("div",{class:"tab-header",ref:"$header"},i.map(r=>V("div",{class:"tab-item","data-value":r.props.value,title:r.props.title},V("label",{class:"title"},r.props.icon||r.props.title)))),V("div",{class:"tab-body",ref:"$body"},e)]}[ne("$header .tab-item:not(.empty-item)")](e){var t=e.$dt.attr("data-value");this.setValue(t)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.getValue())}getValue(){return this.state.selectedValue}setValue(e){var t,i;(t=this.$el.$(`* > .tab-item[data-value="${e}"]`))==null||t.onlyOneClass("selected"),(i=this.$el.$(`* > .tab-content[data-value="${e}"]`))==null||i.onlyOneClass("selected"),this.updateData({selectedValue:e})}}class dw extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",Dl.DESIGN))}[Me("$el")](){return{style:{display:this.$config.is("editor.design.mode",Dl.DESIGN)?"block":"none"}}}template(){return V("div",{class:"feature-control inspector"},V("div",null,V($h,{ref:"$tab",selectedValue:this.$config.get("inspector.selectedValue"),onchange:e=>{this.$config.set("inspector.selectedValue",e)}},this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,icon:r,loadElements:s=[]}=e.class;return V(jn,{value:t,title:i,icon:r},V("div",{style:"display: flex: flex-direction: column;"},s==null?void 0:s.map(a=>Mh(a)),this.$injectManager.generate("inspector.tab."+t),V("div",{class:"empty",style:"order: 1000000;"})))}))))}}class uw extends ge{template(){return V("div",{class:"layer-tab"},V($h,{ref:"$tab",type:"side",direction:"left",selectedValue:this.$config.get("layertab.selectedValue"),onchange:e=>{this.$config.set("layertab.selectedValue",e)}},this.$injectManager.getTargetUI("layertab.tab").map(e=>{const{value:t,title:i,icon:r,loadElements:s=[]}=e.class;return V(jn,{value:t,title:i,icon:r},V("div",{style:"display: flex: flex-direction: column;"},s==null?void 0:s.map(a=>Mh(a)),this.$injectManager.generate("layertab.tab."+t),V("div",{class:"empty",style:"order: 1000000;"})))})))}}function N(n,e){const t=Object.assign({width:24,height:24},e);return` - ${n}`}var pw=Object.freeze(Object.defineProperty({__proto__:null,default:N},Symbol.toStringTag,{value:"Module"})),fw=N(''),gw=Object.freeze(Object.defineProperty({__proto__:null,default:fw},Symbol.toStringTag,{value:"Module"})),mw=N(''),vw=Object.freeze(Object.defineProperty({__proto__:null,default:mw},Symbol.toStringTag,{value:"Module"})),yw=N(''),xw=Object.freeze(Object.defineProperty({__proto__:null,default:yw},Symbol.toStringTag,{value:"Module"})),bw=N(''),_w=Object.freeze(Object.defineProperty({__proto__:null,default:bw},Symbol.toStringTag,{value:"Module"})),Sw=N(''),ww=Object.freeze(Object.defineProperty({__proto__:null,default:Sw},Symbol.toStringTag,{value:"Module"})),Mw=N(''),$w=Object.freeze(Object.defineProperty({__proto__:null,default:Mw},Symbol.toStringTag,{value:"Module"})),Pw=N(''),Tw=Object.freeze(Object.defineProperty({__proto__:null,default:Pw},Symbol.toStringTag,{value:"Module"})),Cw=N(''),Ew=Object.freeze(Object.defineProperty({__proto__:null,default:Cw},Symbol.toStringTag,{value:"Module"})),Iw=N(''),Lw=Object.freeze(Object.defineProperty({__proto__:null,default:Iw},Symbol.toStringTag,{value:"Module"})),kw=N(''),Aw=Object.freeze(Object.defineProperty({__proto__:null,default:kw},Symbol.toStringTag,{value:"Module"})),Rw=N(''),Ow=Object.freeze(Object.defineProperty({__proto__:null,default:Rw},Symbol.toStringTag,{value:"Module"})),zw=N(''),Vw=Object.freeze(Object.defineProperty({__proto__:null,default:zw},Symbol.toStringTag,{value:"Module"})),Dw=N(''),Fw=Object.freeze(Object.defineProperty({__proto__:null,default:Dw},Symbol.toStringTag,{value:"Module"})),jw=N(''),Nw=Object.freeze(Object.defineProperty({__proto__:null,default:jw},Symbol.toStringTag,{value:"Module"})),Bw=N(''),Gw=Object.freeze(Object.defineProperty({__proto__:null,default:Bw},Symbol.toStringTag,{value:"Module"})),Hw=N(''),Uw=Object.freeze(Object.defineProperty({__proto__:null,default:Hw},Symbol.toStringTag,{value:"Module"})),Ww=N(''),Xw=Object.freeze(Object.defineProperty({__proto__:null,default:Ww},Symbol.toStringTag,{value:"Module"})),Yw=N(''),Kw=Object.freeze(Object.defineProperty({__proto__:null,default:Yw},Symbol.toStringTag,{value:"Module"})),qw=N(''),Zw=Object.freeze(Object.defineProperty({__proto__:null,default:qw},Symbol.toStringTag,{value:"Module"})),Jw=N(''),Qw=Object.freeze(Object.defineProperty({__proto__:null,default:Jw},Symbol.toStringTag,{value:"Module"})),eM=N(''),tM=Object.freeze(Object.defineProperty({__proto__:null,default:eM},Symbol.toStringTag,{value:"Module"})),iM=N(''),rM=Object.freeze(Object.defineProperty({__proto__:null,default:iM},Symbol.toStringTag,{value:"Module"})),nM=N('',{width:48,height:48}),sM=Object.freeze(Object.defineProperty({__proto__:null,default:nM},Symbol.toStringTag,{value:"Module"})),aM=N(''),oM=Object.freeze(Object.defineProperty({__proto__:null,default:aM},Symbol.toStringTag,{value:"Module"})),lM=N(''),cM=Object.freeze(Object.defineProperty({__proto__:null,default:lM},Symbol.toStringTag,{value:"Module"})),hM=N(''),dM=Object.freeze(Object.defineProperty({__proto__:null,default:hM},Symbol.toStringTag,{value:"Module"})),uM=N(''),pM=Object.freeze(Object.defineProperty({__proto__:null,default:uM},Symbol.toStringTag,{value:"Module"})),fM=N(''),gM=Object.freeze(Object.defineProperty({__proto__:null,default:fM},Symbol.toStringTag,{value:"Module"})),mM=N(''),vM=Object.freeze(Object.defineProperty({__proto__:null,default:mM},Symbol.toStringTag,{value:"Module"})),yM=N('',{width:30,height:30}),xM=Object.freeze(Object.defineProperty({__proto__:null,default:yM},Symbol.toStringTag,{value:"Module"})),bM=N(``,{width:30,height:30}),_M=Object.freeze(Object.defineProperty({__proto__:null,default:bM},Symbol.toStringTag,{value:"Module"})),SM=N('',{width:30,height:30}),wM=Object.freeze(Object.defineProperty({__proto__:null,default:SM},Symbol.toStringTag,{value:"Module"})),MM=N(``,{width:30,height:30}),$M=Object.freeze(Object.defineProperty({__proto__:null,default:MM},Symbol.toStringTag,{value:"Module"})),PM=N(''),TM=Object.freeze(Object.defineProperty({__proto__:null,default:PM},Symbol.toStringTag,{value:"Module"})),CM=N(''),EM=Object.freeze(Object.defineProperty({__proto__:null,default:CM},Symbol.toStringTag,{value:"Module"})),IM=N(''),LM=Object.freeze(Object.defineProperty({__proto__:null,default:IM},Symbol.toStringTag,{value:"Module"})),kM=N(''),AM=Object.freeze(Object.defineProperty({__proto__:null,default:kM},Symbol.toStringTag,{value:"Module"})),RM=N(''),OM=Object.freeze(Object.defineProperty({__proto__:null,default:RM},Symbol.toStringTag,{value:"Module"})),zM=N(''),VM=Object.freeze(Object.defineProperty({__proto__:null,default:zM},Symbol.toStringTag,{value:"Module"})),DM=N(''),FM=Object.freeze(Object.defineProperty({__proto__:null,default:DM},Symbol.toStringTag,{value:"Module"})),jM=N(''),NM=Object.freeze(Object.defineProperty({__proto__:null,default:jM},Symbol.toStringTag,{value:"Module"})),BM=N(` - -`),GM=Object.freeze(Object.defineProperty({__proto__:null,default:BM},Symbol.toStringTag,{value:"Module"})),HM=N(` - -`),UM=Object.freeze(Object.defineProperty({__proto__:null,default:HM},Symbol.toStringTag,{value:"Module"})),WM=N(''),XM=Object.freeze(Object.defineProperty({__proto__:null,default:WM},Symbol.toStringTag,{value:"Module"})),YM=N(''),KM=Object.freeze(Object.defineProperty({__proto__:null,default:YM},Symbol.toStringTag,{value:"Module"})),qM=N(''),ZM=Object.freeze(Object.defineProperty({__proto__:null,default:qM},Symbol.toStringTag,{value:"Module"})),JM=N(` - -`),QM=Object.freeze(Object.defineProperty({__proto__:null,default:JM},Symbol.toStringTag,{value:"Module"})),e$=N(''),t$=Object.freeze(Object.defineProperty({__proto__:null,default:e$},Symbol.toStringTag,{value:"Module"})),i$=N(''),r$=Object.freeze(Object.defineProperty({__proto__:null,default:i$},Symbol.toStringTag,{value:"Module"})),n$=N(''),s$=Object.freeze(Object.defineProperty({__proto__:null,default:n$},Symbol.toStringTag,{value:"Module"})),a$=N(''),o$=Object.freeze(Object.defineProperty({__proto__:null,default:a$},Symbol.toStringTag,{value:"Module"})),l$=N(''),c$=Object.freeze(Object.defineProperty({__proto__:null,default:l$},Symbol.toStringTag,{value:"Module"})),h$=N(''),d$=Object.freeze(Object.defineProperty({__proto__:null,default:h$},Symbol.toStringTag,{value:"Module"})),u$=N(''),p$=Object.freeze(Object.defineProperty({__proto__:null,default:u$},Symbol.toStringTag,{value:"Module"})),f$=N(` - -`),g$=Object.freeze(Object.defineProperty({__proto__:null,default:f$},Symbol.toStringTag,{value:"Module"})),m$=N(''),v$=Object.freeze(Object.defineProperty({__proto__:null,default:m$},Symbol.toStringTag,{value:"Module"})),y$=N(` - - - -`),x$=Object.freeze(Object.defineProperty({__proto__:null,default:y$},Symbol.toStringTag,{value:"Module"})),b$=N(''),_$=Object.freeze(Object.defineProperty({__proto__:null,default:b$},Symbol.toStringTag,{value:"Module"})),S$=N(''),w$=Object.freeze(Object.defineProperty({__proto__:null,default:S$},Symbol.toStringTag,{value:"Module"})),M$=N(''),$$=Object.freeze(Object.defineProperty({__proto__:null,default:M$},Symbol.toStringTag,{value:"Module"})),P$=N(''),T$=Object.freeze(Object.defineProperty({__proto__:null,default:P$},Symbol.toStringTag,{value:"Module"})),C$=N(''),E$=Object.freeze(Object.defineProperty({__proto__:null,default:C$},Symbol.toStringTag,{value:"Module"}));function I$(n=""){return N(` - - `,{width:24,height:24,viewBoxWidth:16,viewBoxHeight:16})}var L$=Object.freeze(Object.defineProperty({__proto__:null,default:I$},Symbol.toStringTag,{value:"Module"})),k$=N(''),A$=Object.freeze(Object.defineProperty({__proto__:null,default:k$},Symbol.toStringTag,{value:"Module"})),R$=N(''),O$=Object.freeze(Object.defineProperty({__proto__:null,default:R$},Symbol.toStringTag,{value:"Module"})),z$=N(''),V$=Object.freeze(Object.defineProperty({__proto__:null,default:z$},Symbol.toStringTag,{value:"Module"})),D$=N(''),F$=Object.freeze(Object.defineProperty({__proto__:null,default:D$},Symbol.toStringTag,{value:"Module"})),j$=N(''),N$=Object.freeze(Object.defineProperty({__proto__:null,default:j$},Symbol.toStringTag,{value:"Module"})),B$=N(''),G$=Object.freeze(Object.defineProperty({__proto__:null,default:B$},Symbol.toStringTag,{value:"Module"})),H$=N(''),U$=Object.freeze(Object.defineProperty({__proto__:null,default:H$},Symbol.toStringTag,{value:"Module"})),W$=N(''),X$=Object.freeze(Object.defineProperty({__proto__:null,default:W$},Symbol.toStringTag,{value:"Module"})),Y$=N(''),K$=Object.freeze(Object.defineProperty({__proto__:null,default:Y$},Symbol.toStringTag,{value:"Module"})),q$=N(''),Z$=Object.freeze(Object.defineProperty({__proto__:null,default:q$},Symbol.toStringTag,{value:"Module"})),J$=N(''),Q$=Object.freeze(Object.defineProperty({__proto__:null,default:J$},Symbol.toStringTag,{value:"Module"})),eP=N(''),tP=Object.freeze(Object.defineProperty({__proto__:null,default:eP},Symbol.toStringTag,{value:"Module"})),iP=N(''),rP=Object.freeze(Object.defineProperty({__proto__:null,default:iP},Symbol.toStringTag,{value:"Module"})),nP=N(''),sP=Object.freeze(Object.defineProperty({__proto__:null,default:nP},Symbol.toStringTag,{value:"Module"})),aP=N(''),oP=Object.freeze(Object.defineProperty({__proto__:null,default:aP},Symbol.toStringTag,{value:"Module"})),lP=N(''),cP=Object.freeze(Object.defineProperty({__proto__:null,default:lP},Symbol.toStringTag,{value:"Module"})),hP=N(''),dP=Object.freeze(Object.defineProperty({__proto__:null,default:hP},Symbol.toStringTag,{value:"Module"})),uP=N(''),pP=Object.freeze(Object.defineProperty({__proto__:null,default:uP},Symbol.toStringTag,{value:"Module"})),fP=N(''),gP=Object.freeze(Object.defineProperty({__proto__:null,default:fP},Symbol.toStringTag,{value:"Module"})),mP=N(''),vP=Object.freeze(Object.defineProperty({__proto__:null,default:mP},Symbol.toStringTag,{value:"Module"})),yP=N(''),xP=Object.freeze(Object.defineProperty({__proto__:null,default:yP},Symbol.toStringTag,{value:"Module"})),bP=N(''),_P=Object.freeze(Object.defineProperty({__proto__:null,default:bP},Symbol.toStringTag,{value:"Module"})),SP=N(` - - - -`),wP=Object.freeze(Object.defineProperty({__proto__:null,default:SP},Symbol.toStringTag,{value:"Module"})),MP=N(''),$P=Object.freeze(Object.defineProperty({__proto__:null,default:MP},Symbol.toStringTag,{value:"Module"})),PP=N(''),TP=Object.freeze(Object.defineProperty({__proto__:null,default:PP},Symbol.toStringTag,{value:"Module"})),CP=N(''),EP=Object.freeze(Object.defineProperty({__proto__:null,default:CP},Symbol.toStringTag,{value:"Module"})),IP=N(''),LP=Object.freeze(Object.defineProperty({__proto__:null,default:IP},Symbol.toStringTag,{value:"Module"})),kP=N(''),AP=Object.freeze(Object.defineProperty({__proto__:null,default:kP},Symbol.toStringTag,{value:"Module"})),RP=N(''),OP=Object.freeze(Object.defineProperty({__proto__:null,default:RP},Symbol.toStringTag,{value:"Module"})),zP=N(''),VP=Object.freeze(Object.defineProperty({__proto__:null,default:zP},Symbol.toStringTag,{value:"Module"})),DP=N(''),FP=Object.freeze(Object.defineProperty({__proto__:null,default:DP},Symbol.toStringTag,{value:"Module"})),jP=N(''),NP=Object.freeze(Object.defineProperty({__proto__:null,default:jP},Symbol.toStringTag,{value:"Module"})),BP=N(''),GP=Object.freeze(Object.defineProperty({__proto__:null,default:BP},Symbol.toStringTag,{value:"Module"})),HP=N(''),UP=Object.freeze(Object.defineProperty({__proto__:null,default:HP},Symbol.toStringTag,{value:"Module"})),WP=N(''),XP=Object.freeze(Object.defineProperty({__proto__:null,default:WP},Symbol.toStringTag,{value:"Module"})),YP=N(` - - `),KP=Object.freeze(Object.defineProperty({__proto__:null,default:YP},Symbol.toStringTag,{value:"Module"})),qP=N(''),ZP=Object.freeze(Object.defineProperty({__proto__:null,default:qP},Symbol.toStringTag,{value:"Module"})),JP=N(''),QP=Object.freeze(Object.defineProperty({__proto__:null,default:JP},Symbol.toStringTag,{value:"Module"})),eT=N(''),tT=Object.freeze(Object.defineProperty({__proto__:null,default:eT},Symbol.toStringTag,{value:"Module"})),iT=N(''),rT=Object.freeze(Object.defineProperty({__proto__:null,default:iT},Symbol.toStringTag,{value:"Module"})),nT=N(''),sT=Object.freeze(Object.defineProperty({__proto__:null,default:nT},Symbol.toStringTag,{value:"Module"})),aT=N(''),oT=Object.freeze(Object.defineProperty({__proto__:null,default:aT},Symbol.toStringTag,{value:"Module"})),lT=N(''),cT=Object.freeze(Object.defineProperty({__proto__:null,default:lT},Symbol.toStringTag,{value:"Module"})),hT=N(''),dT=Object.freeze(Object.defineProperty({__proto__:null,default:hT},Symbol.toStringTag,{value:"Module"})),uT=N(` - - - - - - -`),pT=Object.freeze(Object.defineProperty({__proto__:null,default:uT},Symbol.toStringTag,{value:"Module"})),fT=N(` - - -`),gT=Object.freeze(Object.defineProperty({__proto__:null,default:fT},Symbol.toStringTag,{value:"Module"})),mT=N(''),vT=Object.freeze(Object.defineProperty({__proto__:null,default:mT},Symbol.toStringTag,{value:"Module"})),yT=N(''),xT=Object.freeze(Object.defineProperty({__proto__:null,default:yT},Symbol.toStringTag,{value:"Module"})),bT=N(''),_T=Object.freeze(Object.defineProperty({__proto__:null,default:bT},Symbol.toStringTag,{value:"Module"})),ST=N(''),wT=Object.freeze(Object.defineProperty({__proto__:null,default:ST},Symbol.toStringTag,{value:"Module"})),MT=N(''),$T=Object.freeze(Object.defineProperty({__proto__:null,default:MT},Symbol.toStringTag,{value:"Module"})),PT=N(''),TT=Object.freeze(Object.defineProperty({__proto__:null,default:PT},Symbol.toStringTag,{value:"Module"})),CT=N(''),ET=Object.freeze(Object.defineProperty({__proto__:null,default:CT},Symbol.toStringTag,{value:"Module"})),IT=N(` - - `),LT=Object.freeze(Object.defineProperty({__proto__:null,default:IT},Symbol.toStringTag,{value:"Module"})),kT=N(''),AT=Object.freeze(Object.defineProperty({__proto__:null,default:kT},Symbol.toStringTag,{value:"Module"})),RT=N(''),OT=Object.freeze(Object.defineProperty({__proto__:null,default:RT},Symbol.toStringTag,{value:"Module"})),zT=N(''),VT=Object.freeze(Object.defineProperty({__proto__:null,default:zT},Symbol.toStringTag,{value:"Module"})),DT=N(''),FT=Object.freeze(Object.defineProperty({__proto__:null,default:DT},Symbol.toStringTag,{value:"Module"})),jT=N(''),NT=Object.freeze(Object.defineProperty({__proto__:null,default:jT},Symbol.toStringTag,{value:"Module"})),BT=N(''),GT=Object.freeze(Object.defineProperty({__proto__:null,default:BT},Symbol.toStringTag,{value:"Module"})),HT=N(''),UT=Object.freeze(Object.defineProperty({__proto__:null,default:HT},Symbol.toStringTag,{value:"Module"})),WT=N(''),XT=Object.freeze(Object.defineProperty({__proto__:null,default:WT},Symbol.toStringTag,{value:"Module"})),YT=N(` - - - `,{width:18,height:16}),KT=Object.freeze(Object.defineProperty({__proto__:null,default:YT},Symbol.toStringTag,{value:"Module"})),qT=N(` - - - `,{width:18,height:16}),ZT=Object.freeze(Object.defineProperty({__proto__:null,default:qT},Symbol.toStringTag,{value:"Module"})),JT=N(` - - - `,{width:18,height:16}),QT=Object.freeze(Object.defineProperty({__proto__:null,default:JT},Symbol.toStringTag,{value:"Module"})),eC=N(''),tC=Object.freeze(Object.defineProperty({__proto__:null,default:eC},Symbol.toStringTag,{value:"Module"})),iC=N('',{width:18,height:16}),rC=Object.freeze(Object.defineProperty({__proto__:null,default:iC},Symbol.toStringTag,{value:"Module"})),nC=N('',{width:18,height:16}),sC=Object.freeze(Object.defineProperty({__proto__:null,default:nC},Symbol.toStringTag,{value:"Module"})),aC=N('',{width:18,height:16}),oC=Object.freeze(Object.defineProperty({__proto__:null,default:aC},Symbol.toStringTag,{value:"Module"})),lC=N(''),cC=Object.freeze(Object.defineProperty({__proto__:null,default:lC},Symbol.toStringTag,{value:"Module"})),hC=N(''),dC=Object.freeze(Object.defineProperty({__proto__:null,default:hC},Symbol.toStringTag,{value:"Module"})),uC=N(''),pC=Object.freeze(Object.defineProperty({__proto__:null,default:uC},Symbol.toStringTag,{value:"Module"})),fC=N(''),gC=Object.freeze(Object.defineProperty({__proto__:null,default:fC},Symbol.toStringTag,{value:"Module"})),mC=N(''),vC=Object.freeze(Object.defineProperty({__proto__:null,default:mC},Symbol.toStringTag,{value:"Module"})),yC=N(''),xC=Object.freeze(Object.defineProperty({__proto__:null,default:yC},Symbol.toStringTag,{value:"Module"})),bC=N(''),_C=Object.freeze(Object.defineProperty({__proto__:null,default:bC},Symbol.toStringTag,{value:"Module"})),SC=N(''),wC=Object.freeze(Object.defineProperty({__proto__:null,default:SC},Symbol.toStringTag,{value:"Module"})),MC=N(''),$C=Object.freeze(Object.defineProperty({__proto__:null,default:MC},Symbol.toStringTag,{value:"Module"})),PC=N(''),TC=Object.freeze(Object.defineProperty({__proto__:null,default:PC},Symbol.toStringTag,{value:"Module"})),CC=N(''),EC=Object.freeze(Object.defineProperty({__proto__:null,default:CC},Symbol.toStringTag,{value:"Module"})),IC=N(''),LC=Object.freeze(Object.defineProperty({__proto__:null,default:IC},Symbol.toStringTag,{value:"Module"})),kC=N(''),AC=Object.freeze(Object.defineProperty({__proto__:null,default:kC},Symbol.toStringTag,{value:"Module"})),RC=N(''),OC=Object.freeze(Object.defineProperty({__proto__:null,default:RC},Symbol.toStringTag,{value:"Module"})),zC=N(''),VC=Object.freeze(Object.defineProperty({__proto__:null,default:zC},Symbol.toStringTag,{value:"Module"})),DC=N(''),FC=Object.freeze(Object.defineProperty({__proto__:null,default:DC},Symbol.toStringTag,{value:"Module"})),jC=N(''),NC=Object.freeze(Object.defineProperty({__proto__:null,default:jC},Symbol.toStringTag,{value:"Module"})),BC=N(` - -`),GC=Object.freeze(Object.defineProperty({__proto__:null,default:BC},Symbol.toStringTag,{value:"Module"})),HC=N(''),UC=Object.freeze(Object.defineProperty({__proto__:null,default:HC},Symbol.toStringTag,{value:"Module"})),WC=N(''),XC=Object.freeze(Object.defineProperty({__proto__:null,default:WC},Symbol.toStringTag,{value:"Module"})),YC=N(''),KC=Object.freeze(Object.defineProperty({__proto__:null,default:YC},Symbol.toStringTag,{value:"Module"})),qC=N(''),ZC=Object.freeze(Object.defineProperty({__proto__:null,default:qC},Symbol.toStringTag,{value:"Module"})),JC=N(''),QC=Object.freeze(Object.defineProperty({__proto__:null,default:JC},Symbol.toStringTag,{value:"Module"})),eE=N(''),tE=Object.freeze(Object.defineProperty({__proto__:null,default:eE},Symbol.toStringTag,{value:"Module"})),iE=N(''),rE=Object.freeze(Object.defineProperty({__proto__:null,default:iE},Symbol.toStringTag,{value:"Module"})),nE=N(''),sE=Object.freeze(Object.defineProperty({__proto__:null,default:nE},Symbol.toStringTag,{value:"Module"})),aE=N(''),oE=Object.freeze(Object.defineProperty({__proto__:null,default:aE},Symbol.toStringTag,{value:"Module"})),lE=N(''),cE=Object.freeze(Object.defineProperty({__proto__:null,default:lE},Symbol.toStringTag,{value:"Module"})),hE=N(''),dE=Object.freeze(Object.defineProperty({__proto__:null,default:hE},Symbol.toStringTag,{value:"Module"})),uE=N(''),pE=Object.freeze(Object.defineProperty({__proto__:null,default:uE},Symbol.toStringTag,{value:"Module"})),fE=N(''),gE=Object.freeze(Object.defineProperty({__proto__:null,default:fE},Symbol.toStringTag,{value:"Module"})),mE=N(''),vE=Object.freeze(Object.defineProperty({__proto__:null,default:mE},Symbol.toStringTag,{value:"Module"})),yE=N(` - - - -`),xE=Object.freeze(Object.defineProperty({__proto__:null,default:yE},Symbol.toStringTag,{value:"Module"})),bE=N(''),_E=Object.freeze(Object.defineProperty({__proto__:null,default:bE},Symbol.toStringTag,{value:"Module"})),SE=N(''),wE=Object.freeze(Object.defineProperty({__proto__:null,default:SE},Symbol.toStringTag,{value:"Module"})),ME=N(''),$E=Object.freeze(Object.defineProperty({__proto__:null,default:ME},Symbol.toStringTag,{value:"Module"})),PE=N(''),TE=Object.freeze(Object.defineProperty({__proto__:null,default:PE},Symbol.toStringTag,{value:"Module"})),CE=N(''),EE=Object.freeze(Object.defineProperty({__proto__:null,default:CE},Symbol.toStringTag,{value:"Module"})),IE=N(''),LE=Object.freeze(Object.defineProperty({__proto__:null,default:IE},Symbol.toStringTag,{value:"Module"})),kE=N(''),AE=Object.freeze(Object.defineProperty({__proto__:null,default:kE},Symbol.toStringTag,{value:"Module"})),RE=N(''),OE=Object.freeze(Object.defineProperty({__proto__:null,default:RE},Symbol.toStringTag,{value:"Module"})),zE=N(''),VE=Object.freeze(Object.defineProperty({__proto__:null,default:zE},Symbol.toStringTag,{value:"Module"})),DE=N(''),FE=Object.freeze(Object.defineProperty({__proto__:null,default:DE},Symbol.toStringTag,{value:"Module"})),jE=N(''),NE=Object.freeze(Object.defineProperty({__proto__:null,default:jE},Symbol.toStringTag,{value:"Module"})),BE=N(''),GE=Object.freeze(Object.defineProperty({__proto__:null,default:BE},Symbol.toStringTag,{value:"Module"})),HE=N(''),UE=Object.freeze(Object.defineProperty({__proto__:null,default:HE},Symbol.toStringTag,{value:"Module"})),WE=N(''),XE=Object.freeze(Object.defineProperty({__proto__:null,default:WE},Symbol.toStringTag,{value:"Module"})),YE=N(''),KE=Object.freeze(Object.defineProperty({__proto__:null,default:YE},Symbol.toStringTag,{value:"Module"})),qE=N(` - - `),ZE=Object.freeze(Object.defineProperty({__proto__:null,default:qE},Symbol.toStringTag,{value:"Module"})),JE=N(''),QE=Object.freeze(Object.defineProperty({__proto__:null,default:JE},Symbol.toStringTag,{value:"Module"})),e3=N(''),t3=Object.freeze(Object.defineProperty({__proto__:null,default:e3},Symbol.toStringTag,{value:"Module"})),i3=N(` - -`),r3=Object.freeze(Object.defineProperty({__proto__:null,default:i3},Symbol.toStringTag,{value:"Module"})),n3=N(` - -`),s3=Object.freeze(Object.defineProperty({__proto__:null,default:n3},Symbol.toStringTag,{value:"Module"})),a3=N(''),o3=Object.freeze(Object.defineProperty({__proto__:null,default:a3},Symbol.toStringTag,{value:"Module"})),l3=N(''),c3=Object.freeze(Object.defineProperty({__proto__:null,default:l3},Symbol.toStringTag,{value:"Module"})),h3=N(''),d3=Object.freeze(Object.defineProperty({__proto__:null,default:h3},Symbol.toStringTag,{value:"Module"})),u3=N(''),p3=Object.freeze(Object.defineProperty({__proto__:null,default:u3},Symbol.toStringTag,{value:"Module"})),f3=N(''),g3=Object.freeze(Object.defineProperty({__proto__:null,default:f3},Symbol.toStringTag,{value:"Module"})),m3=N(''),v3=Object.freeze(Object.defineProperty({__proto__:null,default:m3},Symbol.toStringTag,{value:"Module"})),y3=N(''),x3=Object.freeze(Object.defineProperty({__proto__:null,default:y3},Symbol.toStringTag,{value:"Module"})),b3=N(''),_3=Object.freeze(Object.defineProperty({__proto__:null,default:b3},Symbol.toStringTag,{value:"Module"})),S3=N(''),w3=Object.freeze(Object.defineProperty({__proto__:null,default:S3},Symbol.toStringTag,{value:"Module"})),M3=N(''),$3=Object.freeze(Object.defineProperty({__proto__:null,default:M3},Symbol.toStringTag,{value:"Module"})),P3=N(''),T3=Object.freeze(Object.defineProperty({__proto__:null,default:P3},Symbol.toStringTag,{value:"Module"})),C3=N(''),E3=Object.freeze(Object.defineProperty({__proto__:null,default:C3},Symbol.toStringTag,{value:"Module"})),I3=N(''),L3=Object.freeze(Object.defineProperty({__proto__:null,default:I3},Symbol.toStringTag,{value:"Module"})),k3=N(''),A3=Object.freeze(Object.defineProperty({__proto__:null,default:k3},Symbol.toStringTag,{value:"Module"})),R3=N(''),O3=Object.freeze(Object.defineProperty({__proto__:null,default:R3},Symbol.toStringTag,{value:"Module"})),z3=N(''),V3=Object.freeze(Object.defineProperty({__proto__:null,default:z3},Symbol.toStringTag,{value:"Module"})),D3=N(''),F3=Object.freeze(Object.defineProperty({__proto__:null,default:D3},Symbol.toStringTag,{value:"Module"})),j3=N(''),N3=Object.freeze(Object.defineProperty({__proto__:null,default:j3},Symbol.toStringTag,{value:"Module"})),B3=N(''),G3=Object.freeze(Object.defineProperty({__proto__:null,default:B3},Symbol.toStringTag,{value:"Module"})),H3=N(''),U3=Object.freeze(Object.defineProperty({__proto__:null,default:H3},Symbol.toStringTag,{value:"Module"})),W3=N(''),X3=Object.freeze(Object.defineProperty({__proto__:null,default:W3},Symbol.toStringTag,{value:"Module"})),Y3=N(''),K3=Object.freeze(Object.defineProperty({__proto__:null,default:Y3},Symbol.toStringTag,{value:"Module"})),q3=N(''),Z3=Object.freeze(Object.defineProperty({__proto__:null,default:q3},Symbol.toStringTag,{value:"Module"})),J3=N(''),Q3=Object.freeze(Object.defineProperty({__proto__:null,default:J3},Symbol.toStringTag,{value:"Module"})),e5=N(''),t5=Object.freeze(Object.defineProperty({__proto__:null,default:e5},Symbol.toStringTag,{value:"Module"})),i5=N(''),r5=Object.freeze(Object.defineProperty({__proto__:null,default:i5},Symbol.toStringTag,{value:"Module"})),n5=N(''),s5=Object.freeze(Object.defineProperty({__proto__:null,default:n5},Symbol.toStringTag,{value:"Module"})),a5=N(''),o5=Object.freeze(Object.defineProperty({__proto__:null,default:a5},Symbol.toStringTag,{value:"Module"})),l5=N(''),c5=Object.freeze(Object.defineProperty({__proto__:null,default:l5},Symbol.toStringTag,{value:"Module"})),h5=N(''),d5=Object.freeze(Object.defineProperty({__proto__:null,default:h5},Symbol.toStringTag,{value:"Module"})),u5=N(''),p5=Object.freeze(Object.defineProperty({__proto__:null,default:u5},Symbol.toStringTag,{value:"Module"})),f5=N('',{width:48,height:48}),g5=Object.freeze(Object.defineProperty({__proto__:null,default:f5},Symbol.toStringTag,{value:"Module"})),m5=N('',{width:30,height:30}),v5=Object.freeze(Object.defineProperty({__proto__:null,default:m5},Symbol.toStringTag,{value:"Module"})),y5=N('',{width:30,height:30}),x5=Object.freeze(Object.defineProperty({__proto__:null,default:y5},Symbol.toStringTag,{value:"Module"})),b5=N(''),_5=Object.freeze(Object.defineProperty({__proto__:null,default:b5},Symbol.toStringTag,{value:"Module"})),S5=N(''),w5=Object.freeze(Object.defineProperty({__proto__:null,default:S5},Symbol.toStringTag,{value:"Module"})),M5=N(''),$5=Object.freeze(Object.defineProperty({__proto__:null,default:M5},Symbol.toStringTag,{value:"Module"})),P5=N(''),T5=Object.freeze(Object.defineProperty({__proto__:null,default:P5},Symbol.toStringTag,{value:"Module"})),C5=N(''),E5=Object.freeze(Object.defineProperty({__proto__:null,default:C5},Symbol.toStringTag,{value:"Module"})),I5=N(''),L5=Object.freeze(Object.defineProperty({__proto__:null,default:I5},Symbol.toStringTag,{value:"Module"})),k5=N(''),A5=Object.freeze(Object.defineProperty({__proto__:null,default:k5},Symbol.toStringTag,{value:"Module"})),R5=N(''),O5=Object.freeze(Object.defineProperty({__proto__:null,default:R5},Symbol.toStringTag,{value:"Module"})),z5=N(''),V5=Object.freeze(Object.defineProperty({__proto__:null,default:z5},Symbol.toStringTag,{value:"Module"})),D5=N(` - - -`),F5=Object.freeze(Object.defineProperty({__proto__:null,default:D5},Symbol.toStringTag,{value:"Module"})),j5=N(''),N5=Object.freeze(Object.defineProperty({__proto__:null,default:j5},Symbol.toStringTag,{value:"Module"})),B5=N(''),G5=Object.freeze(Object.defineProperty({__proto__:null,default:B5},Symbol.toStringTag,{value:"Module"})),H5=N(` - - `),U5=Object.freeze(Object.defineProperty({__proto__:null,default:H5},Symbol.toStringTag,{value:"Module"})),W5=N(''),X5=Object.freeze(Object.defineProperty({__proto__:null,default:W5},Symbol.toStringTag,{value:"Module"})),Y5=N(''),K5=Object.freeze(Object.defineProperty({__proto__:null,default:Y5},Symbol.toStringTag,{value:"Module"})),q5=N(''),Z5=Object.freeze(Object.defineProperty({__proto__:null,default:q5},Symbol.toStringTag,{value:"Module"})),J5=N(''),Q5=Object.freeze(Object.defineProperty({__proto__:null,default:J5},Symbol.toStringTag,{value:"Module"})),eI=N(''),tI=Object.freeze(Object.defineProperty({__proto__:null,default:eI},Symbol.toStringTag,{value:"Module"})),iI=N(''),rI=Object.freeze(Object.defineProperty({__proto__:null,default:iI},Symbol.toStringTag,{value:"Module"})),nI=N(''),sI=Object.freeze(Object.defineProperty({__proto__:null,default:nI},Symbol.toStringTag,{value:"Module"})),aI=N(''),oI=Object.freeze(Object.defineProperty({__proto__:null,default:aI},Symbol.toStringTag,{value:"Module"})),lI=N(` - - `),cI=Object.freeze(Object.defineProperty({__proto__:null,default:lI},Symbol.toStringTag,{value:"Module"})),hI=N(` - -`),dI=Object.freeze(Object.defineProperty({__proto__:null,default:hI},Symbol.toStringTag,{value:"Module"})),uI=N(` - -`),pI=Object.freeze(Object.defineProperty({__proto__:null,default:uI},Symbol.toStringTag,{value:"Module"})),fI=N(''),gI=Object.freeze(Object.defineProperty({__proto__:null,default:fI},Symbol.toStringTag,{value:"Module"})),mI=N(''),vI=Object.freeze(Object.defineProperty({__proto__:null,default:mI},Symbol.toStringTag,{value:"Module"})),yI=N(''),xI=Object.freeze(Object.defineProperty({__proto__:null,default:yI},Symbol.toStringTag,{value:"Module"})),bI=N(''),_I=Object.freeze(Object.defineProperty({__proto__:null,default:bI},Symbol.toStringTag,{value:"Module"})),SI=N(''),wI=Object.freeze(Object.defineProperty({__proto__:null,default:SI},Symbol.toStringTag,{value:"Module"})),MI=N(''),$I=Object.freeze(Object.defineProperty({__proto__:null,default:MI},Symbol.toStringTag,{value:"Module"})),PI=N(''),TI=Object.freeze(Object.defineProperty({__proto__:null,default:PI},Symbol.toStringTag,{value:"Module"}));const CI={"./icon_list/_icon_template.js":pw,"./icon_list/account_tree.js":gw,"./icon_list/add.js":vw,"./icon_list/add_box.js":xw,"./icon_list/add_circle.js":_w,"./icon_list/add_note.js":ww,"./icon_list/align_center.js":$w,"./icon_list/align_horizontal_center.js":Tw,"./icon_list/align_horizontal_left.js":Ew,"./icon_list/align_horizontal_right.js":Lw,"./icon_list/align_justify.js":Aw,"./icon_list/align_left.js":Ow,"./icon_list/align_right.js":Vw,"./icon_list/align_vertical_bottom.js":Fw,"./icon_list/align_vertical_center.js":Nw,"./icon_list/align_vertical_top.js":Gw,"./icon_list/alternate.js":Uw,"./icon_list/alternate_reverse.js":Xw,"./icon_list/apps.js":Kw,"./icon_list/archive.js":Zw,"./icon_list/arrowLeft.js":Qw,"./icon_list/arrowRight.js":tM,"./icon_list/arrow_right.js":rM,"./icon_list/artboard.js":sM,"./icon_list/auto_awesome.js":oM,"./icon_list/autorenew.js":cM,"./icon_list/ballot.js":dM,"./icon_list/bar_chart.js":pM,"./icon_list/blur.js":gM,"./icon_list/blur_linear.js":vM,"./icon_list/boolean_difference.js":xM,"./icon_list/boolean_intersection.js":_M,"./icon_list/boolean_union.js":wM,"./icon_list/boolean_xor.js":$M,"./icon_list/border_all.js":TM,"./icon_list/border_inner.js":EM,"./icon_list/border_style.js":LM,"./icon_list/bottom.js":AM,"./icon_list/broken_image.js":OM,"./icon_list/brush.js":VM,"./icon_list/build.js":FM,"./icon_list/camera_roll.js":NM,"./icon_list/cat.js":GM,"./icon_list/center.js":UM,"./icon_list/chart.js":XM,"./icon_list/check.js":KM,"./icon_list/chevron_left.js":ZM,"./icon_list/chevron_right.js":QM,"./icon_list/circle.js":t$,"./icon_list/close.js":r$,"./icon_list/code.js":s$,"./icon_list/color.js":o$,"./icon_list/color_lens.js":c$,"./icon_list/control_point.js":d$,"./icon_list/copy.js":p$,"./icon_list/create_folder.js":g$,"./icon_list/cube.js":v$,"./icon_list/cylinder.js":x$,"./icon_list/dahaze.js":_$,"./icon_list/dark.js":w$,"./icon_list/delete_forever.js":$$,"./icon_list/device_hub.js":T$,"./icon_list/diffuse.js":E$,"./icon_list/direction.js":L$,"./icon_list/doc.js":A$,"./icon_list/drag_handle.js":O$,"./icon_list/drag_indicator.js":V$,"./icon_list/draw.js":F$,"./icon_list/east.js":N$,"./icon_list/edit.js":G$,"./icon_list/end.js":U$,"./icon_list/exit_to_app.js":X$,"./icon_list/expand.js":K$,"./icon_list/expand_more.js":Z$,"./icon_list/export.js":Q$,"./icon_list/face.js":tP,"./icon_list/fast_forward.js":rP,"./icon_list/fast_rewind.js":sP,"./icon_list/file_copy.js":oP,"./icon_list/filter.js":cP,"./icon_list/flag.js":dP,"./icon_list/flash_on.js":pP,"./icon_list/flatten.js":gP,"./icon_list/flex.js":vP,"./icon_list/flip.js":xP,"./icon_list/flipY.js":_P,"./icon_list/flip_camera.js":wP,"./icon_list/folder.js":$P,"./icon_list/font_download.js":TP,"./icon_list/format_bold.js":EP,"./icon_list/format_indent.js":LP,"./icon_list/format_line_spacing.js":AP,"./icon_list/format_shapes.js":OP,"./icon_list/format_size.js":VP,"./icon_list/fullscreen.js":FP,"./icon_list/gps_fixed.js":NP,"./icon_list/gradient.js":GP,"./icon_list/grid.js":UP,"./icon_list/grid3x3.js":XP,"./icon_list/group.js":KP,"./icon_list/height.js":ZP,"./icon_list/highlight_at.js":QP,"./icon_list/horizontal_align_center.js":tT,"./icon_list/horizontal_distribute.js":rT,"./icon_list/horizontal_rule.js":sT,"./icon_list/image.js":oT,"./icon_list/input.js":cT,"./icon_list/italic.js":dT,"./icon_list/join_full.js":pT,"./icon_list/join_right.js":gT,"./icon_list/justify_content_space_around.js":vT,"./icon_list/keyboard.js":xT,"./icon_list/keyboard_arrow_down.js":_T,"./icon_list/keyboard_arrow_left.js":wT,"./icon_list/keyboard_arrow_right.js":$T,"./icon_list/keyboard_arrow_up.js":TT,"./icon_list/landscape.js":ET,"./icon_list/launch.js":LT,"./icon_list/layers.js":AT,"./icon_list/layout_default.js":OT,"./icon_list/layout_flex.js":VT,"./icon_list/layout_grid.js":FT,"./icon_list/left.js":NT,"./icon_list/left_hide.js":GT,"./icon_list/lens.js":UT,"./icon_list/light.js":XT,"./icon_list/line_cap_butt.js":KT,"./icon_list/line_cap_round.js":ZT,"./icon_list/line_cap_square.js":QT,"./icon_list/line_chart.js":tC,"./icon_list/line_join_bevel.js":rC,"./icon_list/line_join_miter.js":sC,"./icon_list/line_join_round.js":oC,"./icon_list/line_style.js":cC,"./icon_list/line_weight.js":dC,"./icon_list/list.js":pC,"./icon_list/local_library.js":gC,"./icon_list/local_movie.js":vC,"./icon_list/lock.js":xC,"./icon_list/lock_open.js":_C,"./icon_list/looks.js":wC,"./icon_list/margin.js":$C,"./icon_list/merge.js":TC,"./icon_list/middle.js":EC,"./icon_list/navigation.js":LC,"./icon_list/near_me.js":AC,"./icon_list/north.js":OC,"./icon_list/note.js":VC,"./icon_list/nowrap.js":FC,"./icon_list/opacity.js":NC,"./icon_list/outline.js":GC,"./icon_list/outline_circle.js":UC,"./icon_list/outline_image.js":XC,"./icon_list/outline_rect.js":KC,"./icon_list/outline_shape.js":ZC,"./icon_list/padding.js":QC,"./icon_list/paint.js":tE,"./icon_list/palette.js":rE,"./icon_list/pantool.js":sE,"./icon_list/pattern_check.js":oE,"./icon_list/pattern_cross_dot.js":cE,"./icon_list/pattern_dot.js":dE,"./icon_list/pattern_grid.js":pE,"./icon_list/pattern_horizontal_line.js":gE,"./icon_list/pause.js":vE,"./icon_list/pentool.js":xE,"./icon_list/photo.js":_E,"./icon_list/play.js":wE,"./icon_list/plugin.js":$E,"./icon_list/polygon.js":TE,"./icon_list/power_input.js":EE,"./icon_list/publish.js":LE,"./icon_list/rect.js":AE,"./icon_list/redo.js":OE,"./icon_list/refresh.js":VE,"./icon_list/remove.js":FE,"./icon_list/remove2.js":NE,"./icon_list/repeat.js":GE,"./icon_list/replay.js":UE,"./icon_list/right.js":XE,"./icon_list/right_hide.js":KE,"./icon_list/rotate.js":ZE,"./icon_list/rotate_left.js":QE,"./icon_list/round.js":t3,"./icon_list/same_height.js":r3,"./icon_list/same_width.js":s3,"./icon_list/save.js":o3,"./icon_list/scatter.js":c3,"./icon_list/screen.js":d3,"./icon_list/setting.js":p3,"./icon_list/settings_input_component.js":g3,"./icon_list/shadow.js":v3,"./icon_list/shape.js":x3,"./icon_list/shuffle.js":_3,"./icon_list/size.js":w3,"./icon_list/skip_next.js":$3,"./icon_list/skip_prev.js":T3,"./icon_list/smooth.js":E3,"./icon_list/source.js":L3,"./icon_list/south.js":A3,"./icon_list/space.js":O3,"./icon_list/specular.js":V3,"./icon_list/speed.js":F3,"./icon_list/star.js":N3,"./icon_list/start.js":G3,"./icon_list/storage.js":U3,"./icon_list/straighten.js":X3,"./icon_list/strikethrough.js":K3,"./icon_list/stroke_to_path.js":Z3,"./icon_list/swap_horiz.js":Q3,"./icon_list/switch_left.js":t5,"./icon_list/switch_right.js":r5,"./icon_list/sync.js":s5,"./icon_list/table_rows.js":o5,"./icon_list/text_rotate.js":c5,"./icon_list/texture.js":d5,"./icon_list/timer.js":p5,"./icon_list/title.js":g5,"./icon_list/to_back.js":v5,"./icon_list/to_front.js":x5,"./icon_list/tonality.js":_5,"./icon_list/top.js":w5,"./icon_list/transform.js":$5,"./icon_list/underline.js":T5,"./icon_list/undo.js":E5,"./icon_list/unfold.js":L5,"./icon_list/vertical_align_baseline.js":A5,"./icon_list/vertical_align_bottom.js":O5,"./icon_list/vertical_align_center.js":V5,"./icon_list/vertical_align_stretch.js":F5,"./icon_list/vertical_align_top.js":N5,"./icon_list/vertical_distribute.js":G5,"./icon_list/video.js":U5,"./icon_list/view_comfy.js":X5,"./icon_list/view_list.js":K5,"./icon_list/view_week.js":Z5,"./icon_list/view_week_reverse.js":Q5,"./icon_list/vignette.js":tI,"./icon_list/vintage.js":rI,"./icon_list/visible.js":sI,"./icon_list/visible_off.js":oI,"./icon_list/volume_down.js":cI,"./icon_list/volume_off.js":dI,"./icon_list/volume_up.js":pI,"./icon_list/wave.js":gI,"./icon_list/waves.js":vI,"./icon_list/web.js":xI,"./icon_list/west.js":_I,"./icon_list/width.js":wI,"./icon_list/wrap.js":$I,"./icon_list/wrap_text.js":TI},Ue={};Object.entries(CI).forEach(([n,e])=>{n=n.replace("./icon_list/","").replace(".js",""),Ue[n]=e.default});function ie(n,e="",t={width:24,height:24}){return n?` - -`:""}function EI(n,e={width:24,height:24}){return` - - - - `}function II(n,e={width:24,height:24}){return` - - ${n} - - `}function LI(){return II('')}class dx extends ge{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){return``}[ne("$el")](){this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):Ye(this.props.action)?this.props.action(this.$editor,this):Ye(this.props.onClick)&&this.props.onClick(this.$editor,this),Ye(this.props.nextTick)&&this.props.nextTick(this.$editor)}[me("$el")+It](){let e="";return this.props.icon&&(e+=`${ie(this.props.icon)}`),this.props.title&&(e+=`${this.props.title}`),e}[Me("$el")](){const e=Ye(this.props.selected)?this.props.selected(this.$editor):!1;return{style:P({},this.props.style),"data-selected":e}}}function ux(){return qe.createByHTML('
      • ')}class cp extends ge{initialize(){super.initialize();const e=this.props.events||[];e.length&&e.forEach(t=>{this.on(t,()=>this.refresh())})}template(){var i;const e=this.props,t=Ye(e.checked)?e.checked(this.$editor):e.checked;return` -
      • - ${t?ie("check"):e.icon||""} -
        - - ${e.shortcut||""} -
        -
        • - `}[ne("$el")+wt+ds](){console.log("click",this.props.command,this.props.args),this.props.command?this.$commands.emit(this.props.command,...this.props.args||[]):Ye(this.props.action)?this.props.action(this.$editor,this):Ye(this.props.onClick)&&this.props.action(this.$editor,this),Ye(this.props.nextTick)&&this.nextTick(()=>{this.props.nextTick(this.$editor,this)}),this.props.closable&&this.parent.close()}}class px extends cp{template(){return"
      • "}get checked(){return Ye(this.props.checked)?this.props.checked(this.$editor,this):this.props.checked}[me("$el")+It](){return` - - `}}class fx extends cp{template(){return"
      • "}getTemplateString(){return Ye(this.props.template)?this.props.template(this.$editor,this):this.$i18n(this.props.template)}[me("$el")+It](){return this.getTemplateString()}}function gx(){return'
      • '}function mx(){return`
      • - ${this.$i18n(this.props.title)} -
        • `}function vx(){return`
        • `}function Qg(n,e){return n==="-"?W("Divider",{ref:`${e}-divider`}):n==="-"||n.type==="divider"?W("DropdownDividerMenuItem",{ref:`${e}-divider`}):gi(n)?W("DropdownTextMenuItem",{text:n,ref:`${e}-text`}):n.type==="link"?W("DropdownLinkMenuItem",{href:n.href,target:n.target,title:n.title,closable:n.closable,ref:`${e}-link`}):n.type==="custom"?W("DropdownCustomMenuItem",{action:n.action,command:n.command,args:n.args,icon:n.icon,text:n.text,events:n.events,template:n.template,closable:n.closable,ref:`${e}-custom`}):n.type==="checkbox"?W("DropdownCheckboxMenuItem",{checked:n.checked,command:n.command,args:n.args||[],disabled:n.disabled,direction:n.direction,icon:n.icon,nextTick:n.nextTick,onClick:n.onClick,action:n.action,shortcut:n.shortcut,title:n.title,key:n.key,events:n.events,closable:n.closable,items:n.items||[],ref:`${e}-checkbox`}):Ni(n.items)?W("DropdownMenuList",{title:n.title,items:n.items,ref:`${e}-list`}):W("DropdownMenuItem",{checked:n.checked,command:n.command,args:n.args||[],disabled:n.disabled,direction:n.direction,icon:n.icon,nextTick:n.nextTick,onClick:n.onClick,action:n.action,shortcut:n.shortcut,title:n.title,key:n.key,events:n.events,closable:n.closable,items:n.items||[],ref:`${e}-menu-item`})}class hp extends ge{components(){return{Divider:ux,DropdownDividerMenuItem:gx,DropdownLinkMenuItem:mx,DropdownTextMenuItem:vx,DropdownCustomMenuItem:fx,DropdownCheckboxMenuItem:px,DropdownMenuList:hp,DropdownMenuItem:cp}}get groupId(){return`${this.props.id}-groupId`}template(){return` -
      • - - ${ie("arrowRight")} -
          - ${this.props.items.map((e,t)=>Qg(e,`${this.groupId}-${t}`)).join("")} -
        -
        • - `}}function Xt(n,e){return e=typeof e=="undefined"?1:e,Math.round(n*e)/e}function bg(n,e,t=100){const i=n<0?Math.floor(n/t):Math.ceil(n/t);return[e<0?Math.floor(e/t):Math.ceil(e/t),i]}function or(n){return n*(Math.PI/180)}function Ev(n,e=1){return n===0?0:n/e}function Iu(n){var e=n*(180/Math.PI);return e<0&&(e=360+e),e}function kI(n,e,t=0){return t+e*Math.cos(or(n))}function AI(n,e,t=0){return t+e*Math.sin(or(n))}function Tl(n,e,t=0,i=0){return{x:kI(n,e,t),y:AI(n,e,i)}}function Rr(n,e,t=0,i=0){return Z2([n,e],[t,i])}function RI(n,e,t=0){return Re([],n,e,1+t/Fe(n,e))}function He(n,e){return n.length===1?[Wt([],n[0],e)]:n.length===2?[Wt([],n[0],e),Wt([],n[1],e)]:n.length===3?[Wt([],n[0],e),Wt([],n[1],e),Wt([],n[2],e)]:n.length===4?[Wt([],n[0],e),Wt([],n[1],e),Wt([],n[2],e),Wt([],n[3],e)]:n.length===5?[Wt([],n[0],e),Wt([],n[1],e),Wt([],n[2],e),Wt([],n[3],e),Wt([],n[4],e)]:n.map(t=>Wt([],t,e))}function Wp(n,e,t,i){return[n,[e[0],n[1],e[2]],t,Math.abs(n[0]-e[0]),i]}function hd(n,e,t,i){return[[e[0],n[1],n[2]],e,t,Math.abs(n[1]-e[1]),i]}function OI(n,e=!1){if(e===!1)return n;const[t,i,r,s,a,o,l]=n;return a?[[i[0],a[1],i[2]],[t[0],a[1],t[2]],r,s,[t[0],t[1],a[2]],o,l,e]:[i,t,r,s,a,o,l,e]}function zI(n,e){let t=n,i=e,r=!1;n[4][0]-e[4][0]>0&&(t=e,i=n,r=!0);const s=Re([],t[1],t[2],.5),a=Re([],i[0],i[3],.5);let o=[];return i[0][1]<=s[1]&&s[1]<=i[3][1]?o.push(Wp(s,a,"x",null)):i[0][1]<=t[1][1]?i[3][0]<=t[1][0]&&t[1][0]<=i[2][0]?o.push(hd(i[3],[i[3][0],t[1][1],t[1][2]],"y",null)):o.push(Wp(t[1],a,"x",i[3])):t[3][0]<=i[0][0]&&i[0][0]<=t[2][0]?o.push(hd(t[3],i[0],"y")):i[3][0]<=t[0][0]&&t[0][0]<=i[2][0]?o.push(hd([i[0][0],t[3][1],t[3][2]],i[0],"y")):i[3][0]<=t[1][0]&&t[1][0]<=i[2][0]?o.push(hd(i[3],[i[3][0],t[1][1],t[1][2]],"y")):o.push(Wp(t[2],a,"x",i[0])),o.sort((l,c)=>l[3]-c[3]),OI([...o[0],n,e],r)}function dd(n){let e=Number.MIN_SAFE_INTEGER;return n.forEach(t=>{e=Math.max(t[0],e)}),e}function ud(n){let e=Number.MIN_SAFE_INTEGER;return n.forEach(t=>{e=Math.max(t[1],e)}),e}function pd(n){let e=Number.MAX_SAFE_INTEGER;return n.forEach(t=>{e=Math.min(t[0],e)}),e}function fd(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return n.forEach(i=>{e=Math.min(i[0],e),t=Math.max(i[0],t)}),Math.round((e+t)/2)}function gd(n){let e=Number.MAX_SAFE_INTEGER;return n.forEach(t=>{e=Math.min(t[1],e)}),e}function md(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MIN_SAFE_INTEGER;return n.forEach(i=>{e=Math.min(i[1],e),t=Math.max(i[1],t)}),Math.round((e+t)/2)}function Fl(n,e){return Iu(Math.atan2(e,n))}function em(n,e,t){return VI({x:n[0],y:n[1]},{x:e[0],y:e[1]},{dx:t[0],dy:t[1]})}function cr(n,e){const t=Wi();return Oi(t,t,e),tx(t,t,or(n)),Oi(t,t,Pr([],e)),t}function kr(...n){const e=Wi();return n.forEach(t=>{Xi(e,e,t)}),e}function ba(...n){return Zi([],kr(...n))}function VI(n,e,t){var i=n.x-e.x,r=n.y-e.y,s=Fl(i,r),a=n.x+t.dx-e.x,o=n.y+t.dy-e.y,l=Fl(a,o)-s;return l}function si(n,e){return(Fl(n,e)+180)%360}const yx=/[xy]/g;function Po(){var n=new Date().getTime(),e="xxx12-xx-34xx".replace(yx,function(t){var i=(n+Math.random()*16)%16|0;return n=Math.floor(n/16),(t=="x"?i:i&3|8).toString(16)});return e}function Xr(){var n=new Date().getTime(),e="idxxxxxxx".replace(yx,function(t){var i=(n+Math.random()*16)%16|0;return n=Math.floor(n/16),(t=="x"?i:i&3|8).toString(16)});return e}const DI=/[\b\t ,\n]/g;function Iv(n){return n.trim().split(DI).filter(e=>e).map(e=>+e)}const Lv={center:50,top:0,left:0,right:100,bottom:100};class Nr{}Nr.CENTER="center";Nr.TOP="top";Nr.RIGHT="right";Nr.LEFT="left";Nr.BOTTOM="bottom";const FI=/([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)/gi;class y{constructor(e="",t=""){this.value=e,bi(this.value)&&isNaN(this.value)&&(this.value=0),this.unit=t}[Symbol.toPrimitive](e){return e=="number"?this.value:this.toString()}static min(...e){for(var t=e.shift(),i=0,r=e.length;ie[i].value&&(t=e[i]);return t}static max(...e){for(var t=e.shift(),i=0,r=e.length;i{this.on(t,()=>this.refresh())})}initState(){return{direction:this.props.direction||"left",opened:this.props.opened||!1,items:this.props.items||[],dy:this.props.dy||0}}findItem(e){return this.state.items.find(t=>t.key&&t.key===e)}template(){const{direction:e}=this.state;return` -
        - - - ${ie("keyboard_arrow_down")} -
          -
          - - - -
          -
          - `}[me("$icon")](){return Ye(this.props.icon)?this.props.icon(this.$editor,this):this.props.icon}[Me("$label")](){return{innerHTML:this.props.title}}[Me("$el")](){return{"data-selected":!!(Ye(this.props.selected)?this.props.selected(this.$editor,this):!1),style:ze(P({},this.props.style||{}),{"--elf--dropdown-menu-width":this.props.width,"--elf--dropdown-menu-dy":$t(this.props.dy)?y.px(this.props.dy):0})}}close(){this.setState({opened:!1},!1),this.$el.removeClass("opened")}toggle(){this.setState({opened:!this.state.opened},!1),this.$el.toggleClass("opened",this.state.opened),this.state.opened&&this.emit("hideDropdownMenu")}get groupId(){return this.id+"$list"}[me("$list")+It](){return this.state.items.map((e,t)=>Qg(e,`${this.groupId}-${t}`))}checkDropdownOpen(e){return!qe.create(e.target).closest("dropdown-menu-item-list")}[ne("$arrow")+et("checkDropdownOpen")](){this.toggle()}[ne("$label")+et("checkDropdownOpen")](){this.toggle()}[ne("$icon")](){const e=Ye(this.props.selectedKey)?this.props.selectedKey(this.$editor,this):this.props.selectedKey,t=this.findItem(e);if(!t){Ye(this.props.action)&&this.props.action(this.$editor,this);return}const i=t.command,r=t.args,s=t.action,a=t.nextTick;i?this.$commands.emit(i,...r):s&&Ye(s)&&this.emit(s),a&&Ye(a)&&this.nextTick(()=>{a(this.$editor)}),this.close()}[we("updateMenuItems")](e){this.setState({items:e})}[H("hideDropdownMenu")](){this.close()}[Ke("document")](e){const i=qe.create(e.target).closest("dropdown-menu");i?i.el!==this.$el.el&&this.close():this.close()}}class xx extends ge{checkProps(e={}){return e}components(){return{DropdownMenu:tm,ToolbarButtonMenuItem:dx}}template(){return'
          '}[me("$el")](){return this.props.items.map((e,t)=>this.renderMenuItem(e,t))}renderMenuItem(e,t){switch(e.type){case la.LINK:return this.renderLink(e,t);case la.SUBMENU:return this.renderMenu(e,t);case la.BUTTON:return this.renderButton(e,t);case la.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return W("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,tooltip:e.tooltip,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return W("DropdownMenu",ze(P({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,tooltip:e.tooltip,direction:e.direction,events:e.events||[],selected:e.selected,selectedKey:e.selectedKey,action:e.action,style:e.style,dy:6}),[e.content])}}const jI="",kv="",NI=!1;class Tr extends ge{template(){return` - - `}getClassName(){return""}clickButton(){}getChecked(){return NI}isDisabled(){return!1}setSelected(e){this.$el.toggleClass("selected",e)}getTitle(){return jI}getIcon(){return kv}setIcon(e){this.refs.$icon.html(Ue[e]||e||"")}getIconString(){return kv}isHideTitle(){return!1}isHideTooltip(){return!0}[ne()](e){this.clickButton(e)}getDirection(){return this.props.direction||""}static createMenuItem(e={}){return class extends Tr{getIconString(){return e.iconString||"add_box"}getTitle(){return e.title||"New Item"}isHideTitle(){return e.isHideTitle||!0}clickButton(t){e.clickButton(t)}getDirection(){return e.direction}}}}class bx extends Tr{getIconString(){return"launch"}getTitle(){return this.$i18n("menu.item.export.title")}clickButton(){this.emit("showExportView")}}class _x extends Tr{getIconString(){return this.$config.is("editor.theme","dark")?"dark":"light"}getTitle(){return"Theme"}isHideTitle(){return!0}clickButton(){this.$config.get("editor.theme")==="dark"?(this.$config.set("editor.theme","light"),this.setIcon("light")):(this.$config.set("editor.theme","dark"),this.setIcon("dark"))}}class BI extends ge{components(){return{ToolBarRenderer:xx,ThemeChanger:_x,ExportView:bx,DropdownMenu:tm}}template(){return` -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} - ${this.$injectManager.generate("toolbar.left")} -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} - ${this.$injectManager.generate("toolbar.center")} -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} - ${this.$injectManager.generate("toolbar.right")} - ${W("ThemeChanger")} -
          -
          - `}[H("updateMenu")](e){(e==="toolbar.left"||e==="toolbar.center"||e==="toolbar.right")&&this.refresh()}}var GI={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},HI=Object.freeze(Object.defineProperty({__proto__:null,default:GI},Symbol.toStringTag,{value:"Module"})),UI={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},WI=Object.freeze(Object.defineProperty({__proto__:null,default:UI},Symbol.toStringTag,{value:"Module"}));const XI={"./config_list/show.left.panel.js":HI,"./config_list/show.right.panel.js":WI};var YI=Object.values(XI).map(n=>n.default);function KI(n){YI.forEach(e=>{n.registerConfig(e)})}function Ph(n){n.registerElement({Button:aw,ToggleButton:lw,ToggleCheckBox:hw}),n.registerAlias({"toggle-checkbox":"ToggleCheckBox","toggle-button":"ToggleButton",button:"Button"})}var qI={key:"body.move.ms",defaultValue:30,title:"pointer move delay millisecond",description:"Set delay millisecond to moving pointer in body ",type:"number"},ZI=Object.freeze(Object.defineProperty({__proto__:null,default:qI},Symbol.toStringTag,{value:"Module"})),JI={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},QI=Object.freeze(Object.defineProperty({__proto__:null,default:JI},Symbol.toStringTag,{value:"Module"})),eL={key:"editor.cursor",defaultValue:"auto",title:"Editor Cursor ",description:"Set editor's cursor",type:"string"},tL=Object.freeze(Object.defineProperty({__proto__:null,default:eL},Symbol.toStringTag,{value:"Module"})),iL={key:"editor.theme",defaultValue:"light",title:"Editor Theme ",description:"Set editor's theme",type:"string"},rL=Object.freeze(Object.defineProperty({__proto__:null,default:iL},Symbol.toStringTag,{value:"Module"})),nL={key:"event.doubleclick.timing",defaultValue:500,title:"doubleclick timing",description:"whether doubleclick timing is in some seconds",type:"number"},sL=Object.freeze(Object.defineProperty({__proto__:null,default:nL},Symbol.toStringTag,{value:"Module"})),aL={key:"language.locale",defaultValue:Xa.EN,title:"set locale for editor",description:"set locale for editor",type:"string"},oL=Object.freeze(Object.defineProperty({__proto__:null,default:aL},Symbol.toStringTag,{value:"Module"})),lL={key:"store.key",defaultValue:"easylogic.studio",title:"Store Key",description:"Set localStorage key",type:"string"},cL=Object.freeze(Object.defineProperty({__proto__:null,default:lL},Symbol.toStringTag,{value:"Module"})),hL={key:"style.canvas.background.color",defaultValue:"#ececec",title:"Canvas Background Color",description:"Set canvas background color",type:"color"},dL=Object.freeze(Object.defineProperty({__proto__:null,default:hL},Symbol.toStringTag,{value:"Module"}));const uL={"./config_list/body.move.ms.js":ZI,"./config_list/debug.mode.js":QI,"./config_list/editor.cursor.js":tL,"./config_list/editor.theme.js":rL,"./config_list/event.doubleclick.timing.js":sL,"./config_list/language.locale.js":oL,"./config_list/store.key.js":cL,"./config_list/style.canvas.background.color.js":dL};var pL=Object.values(uL).map(n=>n.default);function Th(n){pL.forEach(e=>{n.registerConfig(e)})}function Ch(n){n.registerIcon("artboard","artboard"),n.registerIcon("circle","lens"),n.registerIcon("image","image"),n.registerIcon("text","title"),n.registerIcon("svg-text","title"),n.registerIcon("boolean-path","pentool"),n.registerIcon("svg-path","pentool"),n.registerIcon("polygon","polygon"),n.registerIcon("star","star"),n.registerIcon("spline","smooth"),n.registerIcon("rect","rect")}var fL={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Language","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Dark","app.theme.light":"Light","app.theme.toon":"Toon","app.theme.gray":"Gray","app.label.theme":"Theme","app.tab.title.projects":"Projects","app.tab.title.layers":"Layers","app.tab.title.libraries":"Library","app.tab.title.components":"Component","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Assets","app.tab.title.keyMap":"KeyMap","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"Source","menu.item.save.title":"Save","menu.item.export.title":"Export","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Full Screen","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Learn","menu.item.projects.title":"Projects","menu.item.language.title":"Language","project.property.title":"Project","project.information.property.title":"Project information","project.information.property.name":"Name","project.information.property.description":"Description","artboard.property.title":"ArtBoards","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grid","layer.tree.property.title":"Layers","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grid","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Size","position.property.width":"W","position.property.height":"H","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Appearance","background.color.property.color":"Color","background.color.property.zindex":"z-index","background.color.property.blend":"Blend","background.color.property.overflow":"Overflow","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Hidden","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiply","blend.screen":"screen","blend.overlay":"overlay","blend.darken":"darken","blend.lighten":"lighten","blend.color-dodge":"color-dodge","blend.color-burn":"color-burn","blend.hard-light":"hard-light","blend.soft-light":"soft-light","blend.difference":"difference","blend.exclusion":"exclusion","blend.hue":"hue","blend.saturation":"saturation","blend.color":"color","blend.luminosity":"luminosity","background.image.property.title":"Fill","border.property.title":"Border","border.radius.property.title":"Border Radius","boxshadow.property.title":"Box Shadows","filter.property.title":"Filter","filter.property.blur":"Blur","filter.property.grayscale":"GrayScale","filter.property.hue-rotate":"Hue Rotate","filter.property.invert":"Invert","filter.property.brightness":"Brightness","filter.property.contrast":"Contrast","filter.property.drop-shadow":"Drop Shadow","filter.property.drop-shadow.color":"Color","filter.property.drop-shadow.offsetX":"Offset X","filter.property.drop-shadow.offsetY":"Offset Y","filter.property.drop-shadow.blurRadius":"Blur","filter.property.opacity":"Opacity","filter.property.saturate":"Saturate","filter.property.sepia":"Sepia","filter.property.svg":"SVG","font.property.title":"Font","font.property.color":"Color","font.property.size":"Size","font.property.stretch":"Stretch","font.property.weight":"Weight","font.property.style":"Style","font.property.family":"Family","font.spacing.property.title":"Font spacing","font.spacing.property.lineHeight":"Line height","font.spacing.property.letterSpacing":"Letter spacing","font.spacing.property.wordSpacing":"Word spacing","font.spacing.property.indent":"Indent","backdrop.filter.property.title":"Backdrop Filter","clippath.property.title":"Clip Path","export.property.title":"Export","export.property.download":"Download","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origin","image.property.size":"Size","image.property.width":"Width","image.property.height":"height","video.property.title":"Video","video.property.play":"Play","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Playback Rate","video.property.currentTime":"Current Time","video.property.playTime":"Play Time Distance","motion.property.title":"Motion","text.property.title":"Text Style","text.property.align":"Align","text.property.transform":"Transform","text.property.decoration":"Decoration","text.clip.property.title":"Text Clip","text.shadow.property.title":"Text Shadows","text.fill.property.title":"Text Fill","text.fill.property.fill":"Fill","text.fill.property.stroke":"Stroke","text.fill.property.strokeWidth":"Width","transform.property.title":"Transform","transform.origin.property.title":"Transform Origin","transition.property.title":"CSS Transition","keyframe.property.title":"CSS Keyframe","selector.property.title":"Selector","selector.property.none":"None selector","path.data.property.title":"Path Information","polygon.data.property.title":"Polygon Information","perspective.property.title":"Perspective","perspective.origin.property.title":"Perspective Origin","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Motion Path","svg.item.property.fill":"Fill","svg.item.property.fillOpacity":"Opacity","svg.item.property.path":"Path","svg.item.property.polygon":"Polygon","svg.item.property.totalLength":"Total Length","svg.item.property.fillRule":"Fill Rule","svg.item.property.stroke":"Stroke","svg.item.property.strokeWidth":"Width","svg.item.property.dashArray":"Dash Array","svg.item.property.dashOffset":"Dash Offset","svg.item.property.lineCap":"Line Cap","svg.item.property.lineJoin":"Line Join","svg.item.property.filter":"Filter","svg.item.property.blend":"Blend Mode","border.editor.all":"All","border.editor.width":"Width","border.editor.style":"Style","border.editor.color":"C","border.editor.top":"Top","border.editor.left":"Left","border.editor.right":"Right","border.editor.bottom":"Bottom","border.radius.editor.topLeft":"Top Left","border.radius.editor.topRight":"Top Right","border.radius.editor.bottomLeft":"Bottom Left","border.radius.editor.bottomRight":"Bottom Right","boxshadow.editor.blur":"Blur","boxshadow.editor.spread":"Spread","css.property.editor.properties":"Properties","offset.path.list.editor.path":"Path","offset.path.list.editor.totalLength":"Total Length","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotate","svgfilter.select.editor.message.create":"Create new svg filter","svgfilter.select.editor.message.select":"Select a filter","fill.editor.message.click.image":"Click the preview area if you want to select a image","fill.editor.message.drag.position":"Drag if you want to move center position","fill.editor.x1":"Start X","fill.editor.x2":"End X","fill.editor.y1":"Start Y","fill.editor.y2":"End Y","fill.editor.spread":"Spread","fill.editor.offset":"Offset","fill.editor.cx":"Center X","fill.editor.cy":"Center Y","fill.editor.r":"End radius","fill.editor.fx":"Start X","fill.editor.fy":"Start Y","fill.editor.fr":"Start radius","perspective.origin.editor.originX":"Origin X","perspective.origin.editor.originY":"Origin Y","path.manager.msg":"Keydown ESC or Enter key to close editing","path.manager.mode.done":"Done","path.manager.mode.modify":"Modify","path.manager.mode.path":"Path","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transform","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Flip X","path.manager.mode.flipY":"Flip Y","path.manager.mode.flipOrigin":"Flip Origin","colorpicker.popup.title":"ColorPicker","selector.popup.title":"Selector Property","selector.popup.selector":"Selector","background.image.position.popup.title":"Background Pattern","background.image.position.popup.size":"Size","background.image.position.popup.width":"Width","background.image.position.popup.height":"Height","background.image.position.popup.repeat":"Repeat","background.image.position.popup.blend":"Blend","background.image.position.popup.type.repeat":"repeat","background.image.position.popup.type.no-repeat":"no repeat","background.image.position.popup.type.repeat-x":"repeat-x","background.image.position.popup.type.repeat-y":"repeat-y","background.image.position.popup.type.space":"space","background.image.position.popup.type.round":"round","gradient.picker.popup.title":"Gradient & Image Picker","gradient.picker.popup.static-gradient":"Static","gradient.picker.popup.linear-gradient":"Linear","gradient.picker.popup.repeating-linear-gradient":"Repeating Linear","gradient.picker.popup.radial-gradient":"Radial","gradient.picker.popup.repeating-radial-gradient":"Repeating Radial","gradient.picker.popup.conic-gradient":"Linear","gradient.picker.popup.repeating-conic-gradient":"Repeating Conic","image.asset.property.title":"Image","video.asset.property.title":"Video","color.asset.property.title":"Color","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Pattern","svgfilter.asset.property.title":"SVG Filter","inspector.tab.title.design":"Design","inspector.tab.title.component":"Component","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"Assets","inspector.tab.title.text":"Text","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Timeline","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Play","timeline.play.control.pause":"Pause","timeline.play.control.first":"First","timeline.play.control.prev":"Previous","timeline.play.control.next":"Next","timeline.play.control.last":"Last","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Speed","timeline.play.control.repeat":"Repeat","timeline.play.control.infinite":"Infinite","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"Value","timeline.value.editor.time":"Time","timeline.value.editor.timing":"Timing","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"SVG Filter","css.item.rotate":"Rotate","css.item.rotateX":"Rotate X","css.item.rotateY":"Rotate Y","css.item.rotateZ":"Rotate Z","css.item.rotate3d":"3D Rotate","css.item.skewX":"Skew X","css.item.skewY":"Skew Y","css.item.translate":"Translate","css.item.translateX":"Translate X","css.item.translateY":"Translate Y","css.item.translateZ":"Translate Z","css.item.translate3d":"3D Translate","css.item.perspective":"Perspective","css.item.scale":"Scale","css.item.scaleX":"Scale X","css.item.scaleY":"Scale Y","css.item.scaleZ":"Scale Z","css.item.scale3d":"3D Scale","css.item.matrix":"Matrix","css.item.matrix3d":"3D Matrix","animation.property.title":"CSS Animation","animation.property.direction":"Direction","animation.property.play.state":"Play State","animation.property.fill.mode":"Fill Mode","animation.property.delay":"Delay","animation.property.duration":"Duration","animation.property.iteration.count":"Iteration Count","animation.property.Select a keyframe":"Select a keyframe","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Timing Function","animation.property.popup.keyframe":"Keyframe","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Play State","animation.property.popup.fill.mode":"Fill Mode","animation.property.popup.delay":"Delay","animation.property.popup.duration":"Duration","animation.property.popup.iteration":"Iteration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"reverse","animation.property.popup.alternate":"alternate","animation.property.popup.alternate-reverse":"alternate-reverse","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"Select a keyframe","keyframe.popup.title":"Keyframe","code.view.property.title":"CodeView","svg.filter.editor.tab.filter":"Filter","svg.filter.editor.tab.preset":"Preset","svg.filter.editor.tab.asset":"Assets","svg.filter.editor.GRAPHIC REFERENCES":"GRAPHIC REFERENCES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"LIGHTING","svg.filter.editor.COMBINERS":"COMBINERS","svg.filter.editor.Template":"Template","layout.property.title":"Layout","layout.property.flex":"Flex Box","layout.property.grid":"Grid","layout.property.default":"Default","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Row","flex.layout.editor.column":"column","flex.layout.editor.row-reverse":"Row Reverse","flex.layout.editor.column-reverse":"Column Reverse","flex.layout.editor.nowrap":"Nowrap","flex.layout.editor.wrap":"Wrap","flex.layout.editor.wrap-reverse":"Wrap Reverse","flex.layout.editor.flex-start":"Start","flex.layout.editor.flex-end":"End","flex.layout.editor.center":"Center","flex.layout.editor.space-between":"Between","flex.layout.editor.space-around":"Around","flex.layout.editor.baseline":"BaseLine","flex.layout.editor.stretch":"Stretch","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justify Content","flex.layout.editor.align-items":"Align Items","flex.layout.editor.align-content":"Align Content","flex.layout.item.property.title":"Flex Item Detail","flex.layout.item.property.grow":"Flex Grow","flex.layout.item.property.shrink":"Flex Shrink","flex.layout.item.property.basis":"Flex Basis","flex.layout.item.property.none":"none","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"value","grid.layout.editor.template.columns":"Columns","grid.layout.editor.column.gap":"Column Gap","grid.layout.editor.template.rows":"Rows","grid.layout.editor.row.gap":"Row Gap","grid.box.editor.box.title":"Box","grid.box.editor.type":"Type","grid.box.editor.repeat":"Repeat","grid.box.editor.length":"Length","grid.box.editor.none":"None","grid.box.editor.auto":"Auto","grid.box.editor.count":"Count","grid.box.editor.value":"Size","grid.layout.item.property.title":"Layout Item Detail","grid.layout.item.property.column":"Column","grid.layout.item.property.row":"Row","grid.layout.item.property.start":"Start","grid.layout.item.property.end":"End","grid.layout.item.property.none":"none","grid.layout.item.property.value":"value","box.model.property.title":"Box Model","box.model.property.margin":"Margin","box.model.property.padding":"Padding","component.items.canvas":"Canvas","component.items.layer":"Layer","component.items.3dlayer":"3D Layer","component.items.drawing":"Drawing","component.items.custom":"Custom Component","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"SVG Text Style","svg.text.property.textarea":"Text Area","svg.text.property.size":"Font Size","svg.text.property.weight":"Font Weight","svg.text.property.style":"Font Style","svg.text.property.anchor":"Text Anchor","svg.text.property.family":"Font Family","svg.text.property.length.adjust":"Length Adjust","svg.text.property.text.length":"Text Length","svg.text.property.start.offset":"Start Offset","fill.picker.popup.title":"SVG Fragment picker","gradient.editor.drag.message":"Drag if you want to move center pointer.","draw.manager.tolerance":"Tolerance","pattern.property.title":"Pattern","pattern.info.popup.title":"Pattern Info","pattern.info.popup.width":"Width","pattern.info.popup.height":"Height","pattern.info.popup.lineWidth":"Line Width","pattern.info.popup.lineHeight":"Line Height","pattern.info.popup.rotate":"Rotate","pattern.info.popup.blend":"Blend Mode","pattern.info.popup.foreColor":"Fore","pattern.info.popup.backColor":"Back","stroke.dasharray.editor.add":"Add Dash","viewport.panning.enable":"You can move the area by holding down space key and dragging the screen.","image.select.editor.button":"Select Image"},gL={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"Langue","app.layout.all":"Layout","app.layout.css":"CSS Mode","app.layout.svg":"SVG Mode","app.label.layout":"Menu Layout","app.theme.dark":"Sombre","app.theme.light":"Clair","app.theme.gray":"Gris","app.label.theme":"Th\xE8me","app.tab.title.projects":"Projets","app.tab.title.layers":"Objets","app.tab.title.libraries":"Librarie","app.tab.title.components":"Objet","app.tab.title.artboards":"Artboard","app.tab.title.assets":"Elements","app.tab.title.keyMap":"Clavier","app.confirm.message.artboard.items.removeArtboard":"Do you remove an artboard preview really?","app.confirm.message.custom-component.items.removeCustomComponent":"Do you remove a custom component preview really?","menu.item.download.title":"T\xE9l\xE9charger","menu.item.save.title":"Enregistrer","menu.item.export.title":"Exporter","menu.item.codepen.title":"CodePen","menu.item.fullscreen.title":"Ecran","menu.item.shortcuts.title":"ShortCuts","menu.item.github.title":"Github","menu.item.learn.title":"Docs","menu.item.projects.title":"Projects","project.property.title":"Projet","project.information.property.title":"Information","project.information.property.name":"Nom","project.information.property.description":"Description","artboard.property.title":"Planche","artboard.property.layout.title.flex":"Flex","artboard.property.layout.title.grid":"Grille","layer.tree.property.title":"Objets","layer.tree.property.layout.title.flex":"Flex","layer.tree.property.layout.title.grid":"Grille","alignment.property.title":"Alignment","position.property.title":"Position","position.property.X":"X","position.property.Y":"Y","size.property.title":"Taille","position.property.width":"Largeur","position.property.height":"Hauteur","position.property.opacity":"Opacity","position.property.rotate":"Rotate","background.color.property.title":"Apparance","background.color.property.color":"Couleur","background.color.property.zindex":"z-index","background.color.property.opacity":"Opacit\xE9","background.color.property.blend":"M\xE9lange","background.color.property.overflow":"D\xE9bordement","background.color.property.overflow.visible":"Visible","background.color.property.overflow.hidden":"Cach\xE9","background.color.property.overflow.scroll":"Scroll","background.color.property.overflow.auto":"Auto","blend.normal":"normal","blend.multiply":"multiplie","blend.screen":"\xE9cran","blend.overlay":"couche","blend.darken":"sombre","blend.lighten":"clair","blend.color-dodge":"dodge","blend.color-burn":"brul\xE9","blend.hard-light":"dur","blend.soft-light":"doux","blend.difference":'diff"rence',"blend.exclusion":"exclusion","blend.hue":"teinte","blend.saturation":"saturation","blend.color":"couleur","blend.luminosity":"luminosit\xE9","background.image.property.title":"Remplissage","border.property.title":"Bordure","border.radius.property.title":"Rayon de bordure","boxshadow.property.title":"Ombres","filter.property.title":"Filtre","filter.property.blur":"Flou","filter.property.grayscale":"Echelle de gris","filter.property.hue-rotate":"Rotation teinte","filter.property.invert":"Invertir","filter.property.brightness":"Luminosit\xE9","filter.property.contrast":"Contraste","filter.property.drop-shadow":"Ombre port\xE9e","filter.property.drop-shadow.color":"Couleur","filter.property.drop-shadow.offsetX":"D\xE9calage X","filter.property.drop-shadow.offsetY":"D\xE9calage Y","filter.property.drop-shadow.blurRadius":"Flou","filter.property.opacity":"Opacit\xE9","filter.property.saturate":"Saturation","filter.property.sepia":"S\xE9pia","filter.property.svg":"SVG","font.property.title":"Police","font.property.color":"Couleur","font.property.size":"Taille","font.property.stretch":"Etirement","font.property.weight":"Poids","font.property.style":"Style","font.property.family":"Famille","font.spacing.property.title":"Espaces du texte","font.spacing.property.lineHeight":"Hauteur de ligne","font.spacing.property.letterSpacing":"Espace inter-caract\xE8res","font.spacing.property.wordSpacing":"Espace inter-mots","font.spacing.property.indent":"Identation","backdrop.filter.property.title":"Filtre Backdrop","clippath.property.title":"Chemin du Clip","export.property.title":"Exporter","export.property.download":"T\xE9l\xE9charger","iframe.property.title":"IFrame","image.property.title":"Image","image.property.origin":"Origine","image.property.size":"Taille","image.property.width":"Largeur","image.property.height":"Hauteur","video.property.title":"Video","video.property.play":"Jouer","video.property.pause":"Pause","video.property.volume":"Volume","video.property.playbackRate":"Vitesse de lecture","video.property.currentTime":"Temps actuel","video.property.playTime":"Temps de lecture","motion.property.title":"Mouvement","text.property.title":"Style Texte","text.property.align":"Alignement","text.property.transform":"Transformation","text.property.decoration":"D\xE9coration","text.clip.property.title":"Clip Texte","text.shadow.property.title":"Ombres Texte","text.fill.property.title":"Remplissage Texte","text.fill.property.fill":"Remplissage","text.fill.property.stroke":"Trait","text.fill.property.strokeWidth":"Largeur","transform.property.title":"Transformation","transform.origin.property.title":"Origine Transformation","transition.property.title":"Transition CSS","keyframe.property.title":"Image cl\xE9 CSS","selector.property.title":"S\xE9l\xE9cteur","selector.property.none":"Aucun s\xE9l\xE9cteur","path.data.property.title":"Information Chemin","polygon.data.property.title":"Information Polygone","perspective.property.title":"Perspective","perspective.origin.property.title":"Origine Perspective","svg.item.property.title":"Appearance","svg.item.property.isMotionPath":"Chemin de mouvement","svg.item.property.fill":"Remplissage","svg.item.property.fillOpacity":"Opacit\xE9","svg.item.property.path":"Chemin","svg.item.property.polygon":"Polygone","svg.item.property.totalLength":"Longueur totale","svg.item.property.fillRule":"R\xE8gle remplissage","svg.item.property.stroke":"Trait","svg.item.property.strokeWidth":"Largeur de trait","svg.item.property.dashArray":"Suite tiret","svg.item.property.dashOffset":"D\xE9calage tiret","svg.item.property.lineCap":"Chapeau Ligne","svg.item.property.lineJoin":"Jonction ligne","svg.item.property.filter":"Filtre","svg.item.property.blend":"Blend Mode","border.editor.all":"Tout","border.editor.width":"Largeur","border.editor.style":"Style","border.editor.color":"Couleur","border.editor.top":"Haut","border.editor.left":"Gauche","border.editor.right":"Droite","border.editor.bottom":"Bas","border.radius.editor.topLeft":"Haut gauche","border.radius.editor.topRight":"Haut droite","border.radius.editor.bottomLeft":"Bas gauche","border.radius.editor.bottomRight":"Bas droite","boxshadow.editor.blur":"Flou","boxshadow.editor.spread":"Etalement","css.property.editor.properties":"Propri\xE9t\xE9s","offset.path.list.editor.path":"Chemin","offset.path.list.editor.totalLength":"Longueur totale","offset.path.list.editor.distance":"Distance","offset.path.list.editor.direction":"Direction","offset.path.list.editor.rotate":"Rotation","svgfilter.select.editor.message.create":"Cr\xE9er un filtre svg","svgfilter.select.editor.message.select":"S\xE9lection filtre","fill.editor.message.click.image":"Cliquez sur aper\xE7u si vous souhaitez s\xE9lectionner une image","fill.editor.message.drag.position":"Prendre pour changer la position centrale","fill.editor.x1":"D\xE9but X","fill.editor.x2":"Fin X","fill.editor.y1":"D\xE9but Y","fill.editor.y2":"Fin Y","fill.editor.spread":"Etalement","fill.editor.offset":"D\xE9calage","fill.editor.cx":"Centre X","fill.editor.cy":"Centre Y","fill.editor.r":"Rayon de fin","fill.editor.fx":"D\xE9part X","fill.editor.fy":"D\xE9part Y","fill.editor.fr":"Rayon de d\xE9part","perspective.origin.editor.originX":"Origine X","perspective.origin.editor.originY":"Origine Y","path.manager.msg":"Appuyer ESC ou Entr\xE9z keypour fermer Edition","path.manager.mode.done":"Done","path.manager.mode.modify":"Modifier","path.manager.mode.path":"Chemin","path.manager.mode.warp":"Warp","path.manager.mode.transform":"Transformer","path.manager.mode.reverse":"Reverse","path.manager.mode.flipX":"Retouner X","path.manager.mode.flipY":"Retouner Y","path.manager.mode.flipOrigin":"Retouner Origine","colorpicker.popup.title":"Pipette","selector.popup.title":"Propi\xE9t\xE9 de S\xE9lecteur","selector.popup.selector":"S\xE9lecteur","background.image.position.popup.title":"Motif de fond","background.image.position.popup.size":"Taille","background.image.position.popup.width":"Largeur","background.image.position.popup.height":"Hauteur","background.image.position.popup.repeat":"Rep\xE8te","background.image.position.popup.blend":"M\xE9lange","background.image.position.popup.type.repeat":"rep\xE8te","background.image.position.popup.type.no-repeat":"sans rep\xE9tition","background.image.position.popup.type.repeat-x":"rep\xE8te-x","background.image.position.popup.type.repeat-y":"rep\xE8te-y","background.image.position.popup.type.space":"espace","background.image.position.popup.type.round":"rond","gradient.picker.popup.title":"S\xE9lection Gradient & Image","image.asset.property.title":"Image","video.asset.property.title":"Vid\xE9o","color.asset.property.title":"Couleur","gradient.asset.property.title":"Gradient","pattern.asset.property.title":"Motif","svgfilter.asset.property.title":"Filtre SVG","inspector.tab.title.design":"Design","inspector.tab.title.component":"Composant","inspector.tab.title.transition":"Animation","inspector.tab.title.asset":"El\xE9ments","inspector.tab.title.text":"Texte","inspector.tab.title.code":"Code","inspector.tab.title.history":"History","timeline.property.title":"Chronologie","timeline.property.resize":"Drag if you want to resize timeline height.","timeline.animation.property.title":"Animations","timeline.play.control.play":"Jouer","timeline.play.control.pause":"Pause","timeline.play.control.first":"Premier","timeline.play.control.prev":"Pr\xE9c\xE9dent","timeline.play.control.next":"Suivant","timeline.play.control.last":"Dernier","timeline.play.control.direction":"Direction","timeline.play.control.speed":"Vitesse","timeline.play.control.repeat":"R\xE9p\xE9ter","timeline.play.control.infinite":"Infini","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternatif","timeline.play.control.reverse":"inverse","timeline.play.control.alternate.reverse":"inverse alternatif","timeline.value.editor.value":"Valeur","timeline.value.editor.time":"Temps","timeline.value.editor.timing":"Calage temps","timeline.value.editor.offset.message":"Please input enter key to change time offset.","svgfilter.popup.title":"Filtre SVG","css.item.rotate":"Rotation","css.item.rotateX":"Rotation X","css.item.rotateY":"Rotation Y","css.item.rotateZ":"Rotation Z","css.item.rotate3d":"Rotation 3D","css.item.skewX":"Oblique X","css.item.skewY":"Oblique Y","css.item.translate":"Translation","css.item.translateX":"Translation X","css.item.translateY":"Translation Y","css.item.translateZ":"Translation Z","css.item.translate3d":"Translation 3D","css.item.perspective":"Persp\xE9ctive","css.item.scale":"Echelle","css.item.scaleX":"Echelle X","css.item.scaleY":"Echelle Y","css.item.scaleZ":"Echelle Z","css.item.scale3d":"Echelle 3D","css.item.matrix":"Matrice","css.item.matrix3d":"Matrice 3D","animation.property.title":"Animation CSS","animation.property.direction":"Direction","animation.property.play.state":"Etat lecture","animation.property.fill.mode":"Mode remplissage","animation.property.delay":"D\xE9lais","animation.property.duration":"Dur\xE9e","animation.property.iteration.count":"Nombre It\xE9rations","animation.property.Select a keyframe":"Selectionner une image cl\xE9","animation.property.popup.title":"Animation","animation.property.popup.timing.function":"Fonction temps","animation.property.popup.keyframe":"image cl\xE9","animation.property.popup.direction":"Direction","animation.property.popup.play.state":"Etat lecture","animation.property.popup.fill.mode":"Mode remplissage","animation.property.popup.delay":"D\xE9lais","animation.property.popup.duration":"Dur\xE9\xE9","animation.property.popup.iteration":"It\xE9ration","animation.property.popup.normal":"normal","animation.property.popup.reverse":"inverse","animation.property.popup.alternate":"alternatif","animation.property.popup.alternate-reverse":"inverse alternatif","animation.property.popup.none":"Aucun","animation.property.popup.forwards":"en avant","animation.property.popup.backwards":"en arri\xE8re","animation.property.popup.both":"les deux","animation.property.popup.Select a keyframe":"Selectionner une image cl\xE9","keyframe.popup.title":"image cl\xE9","code.view.property.title":"Vue code","svg.filter.editor.tab.filter":"Filtrer","svg.filter.editor.tab.preset":"Pre-rempli","svg.filter.editor.tab.asset":"El\xE9ments","svg.filter.editor.GRAPHIC REFERENCES":"REFERENCES GRAPHIQUES","svg.filter.editor.SOURCES":"SOURCES","svg.filter.editor.MODIFIER":"MODIFIER","svg.filter.editor.LIGHTING":"ECLAIRAGE","svg.filter.editor.COMBINERS":"COMBINER","svg.filter.editor.Template":"Mod\xE8le","layout.property.title":"Disposition","layout.property.flex":"Bo\xEEte Flex","layout.property.grid":"Grille","layout.property.default":"D\xE9faut","layout.property.resizing.title":"Resizing","layout.property.resizing.self.title":"Self Resizing","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"Ligne","flex.layout.editor.column":"Colonne","flex.layout.editor.row-reverse":"Inverse ligne","flex.layout.editor.column-reverse":"Inverse Colonne","flex.layout.editor.nowrap":"Non-emball\xE9","flex.layout.editor.wrap":"Emball\xE9 (wrap)","flex.layout.editor.wrap-reverse":"Inverse emball\xE9","flex.layout.editor.flex-start":"D\xE9but","flex.layout.editor.flex-end":"Fin","flex.layout.editor.center":"Centrer","flex.layout.editor.space-between":"Entre","flex.layout.editor.space-around":"Autour","flex.layout.editor.baseline":"Base","flex.layout.editor.stretch":"Etirement","flex.layout.editor.direction":"Direction","flex.layout.editor.justify-content":"Justifier","flex.layout.editor.align-items":"Aligner objets","flex.layout.editor.align-content":"Aligner contenu","flex.layout.item.property.title":"D\xE9tail Disposition objet","flex.layout.item.property.grow":"Augmenter Flex","flex.layout.item.property.shrink":"R\xE9duire Flex","flex.layout.item.property.basis":"Base Flex","flex.layout.item.property.none":"Aucun","flex.layout.item.property.auto":"auto","flex.layout.item.property.value":"valeur","grid.layout.editor.template.columns":"Colonne","grid.layout.editor.column.gap":"Espace Colonne","grid.layout.editor.template.rows":"Lignes","grid.layout.editor.row.gap":"Espace lignes","grid.box.editor.box.title":"Bo\xEEte","grid.box.editor.type":"Type","grid.box.editor.repeat":"R\xE9p\xE9ter","grid.box.editor.length":"Longueur","grid.box.editor.none":"Aucun","grid.box.editor.auto":"Auto","grid.box.editor.count":"Compte","grid.box.editor.value":"Taille","grid.layout.item.property.title":"D\xE9tail disposition objets","grid.layout.item.property.column":"Colonne","grid.layout.item.property.row":"Ligne","grid.layout.item.property.start":"D\xE9but","grid.layout.item.property.end":"Fin","grid.layout.item.property.none":"Aucun","grid.layout.item.property.value":"valeur","box.model.property.title":"Mod\xE8le","box.model.property.margin":"Marge","box.model.property.padding":"Espace","component.items.canvas":"Toile","component.items.layer":"Objet","component.items.3dlayer":"Objet 3D","component.items.drawing":"Dessin","component.items.custom":"Composant personnalis\xE9","component.items.chart":"Chart","component.items.plugin":"Plugin","svg.text.property.title":"Style SVG Texte","svg.text.property.textarea":"Zone Texte","svg.text.property.size":"Taille","svg.text.property.weight":"Poids","svg.text.property.style":"Style","svg.text.property.anchor":"Ancre Texte","svg.text.property.family":"Famille","svg.text.property.length.adjust":"Ajusteement longueur","svg.text.property.text.length":"Ajusteement Texte","svg.text.property.start.offset":"D\xE9callage d\xE9part","fill.picker.popup.title":"S\xE9lection Fragment SVG","gradient.editor.drag.message":"Glisser pour d\xE9placer centre.","draw.manager.tolerance":"Tol\xE9rance","pattern.property.title":"Motif","pattern.info.popup.title":"Info Motif","pattern.info.popup.width":"Largeur","pattern.info.popup.height":"Hauteur","pattern.info.popup.lineWidth":"Largeur ligne","pattern.info.popup.lineHeight":"Hauteur de ligne","pattern.info.popup.rotate":"Rotatation","pattern.info.popup.blend":"M\xE9lange","pattern.info.popup.foreColor":"Avant","pattern.info.popup.backColor":"Arri\xE8re","stroke.dasharray.editor.add":"Ajout tiret","viewport.panning.enable":"You can move the area by holding down space and dragging the screen."},mL={"app.title":"elf","app.sample":(n,e,t)=>`${n}-${e}-${t}`,"app.lang.en_US":"English","app.lang.ko_KR":"\uD55C\uAD6D\uC5B4","app.lang.fr_FR":"Fran\xE7ais","app.label.lang":"\uC5B8\uC5B4","app.layout.all":"\uB808\uC774\uC544\uC6C3","app.layout.css":"CSS \uBAA8\uB4DC","app.layout.svg":"SVG \uBAA8\uB4DC","app.label.layout":"\uBA54\uB274\uAD6C\uC131","app.theme.dark":"\uC5B4\uB450\uC6B4","app.theme.light":"\uBC1D\uC740","app.theme.toon":"\uADF8\uB9AC\uAE30","app.theme.gray":"\uD68C\uC0C9","app.label.theme":"\uD14C\uB9C8","app.tab.title.projects":"\uD504\uB85C\uC81D\uD2B8","app.tab.title.layers":"\uB808\uC774\uC5B4","app.tab.title.libraries":"\uB77C\uC774\uBE0C\uB7EC\uB9AC","app.tab.title.components":"\uCEF4\uD3EC\uB10C\uD2B8","app.tab.title.artboards":"\uC544\uD2B8\uBCF4\uB4DC","app.tab.title.assets":"\uC5D0\uC14B","app.tab.title.keyMap":"\uB2E8\uCD95\uD0A4","app.confirm.message.artboard.items.removeArtboard":"\uC544\uD2B8\uBCF4\uB4DC \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","app.confirm.message.custom-component.items.removeCustomComponent":"\uCEF4\uD3EC\uB10C\uD2B8 \uD504\uB9AC\uBDF0\uB97C \uC0AD\uC81C \uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?","menu.item.download.title":"\uB2E4\uC6B4\uB85C\uB4DC","menu.item.save.title":"\uC800\uC7A5","menu.item.export.title":"\uB0B4\uBCF4\uB0B4\uAE30","menu.item.fullscreen.title":"\uC804\uCCB4\uD654\uBA74","menu.item.shortcuts.title":"\uB2E8\uCD95\uD0A4","menu.item.github.title":"Github","menu.item.learn.title":"\uBC30\uC6B0\uAE30","menu.item.projects.title":"\uD504\uB85C\uC81D\uD2B8","project.property.title":"\uD504\uB85C\uC81D\uD2B8","project.information.property.title":"\uD504\uB85C\uC81D\uD2B8 \uC815\uBCF4","project.information.property.name":"\uC774\uB984","project.information.property.description":"\uC124\uBA85","artboard.property.title":"\uC544\uD2B8\uBCF4\uB4DC","artboard.property.layout.title.flex":"\uD50C\uB809\uC2A4","artboard.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","layer.tree.property.title":"\uB808\uC774\uC5B4","layer.tree.property.layout.title.flex":"\uD50C\uB809\uC2A4","layer.tree.property.layout.title.grid":"\uADF8\uB9AC\uB4DC","alignment.property.title":"\uC815\uB82C","position.property.title":"\uC704\uCE58","position.property.X":"X","position.property.Y":"Y","size.property.title":"\uD06C\uAE30","position.property.width":"\uB113\uC774","position.property.height":"\uB192\uC774","position.property.rotate":"\uD68C\uC804","position.property.opacity":"\uD22C\uBA85","background.color.property.title":"\uD45C\uC2DC","background.color.property.color":"\uBC30\uACBD\uC0C9","background.color.property.zindex":"z-index","background.color.property.blend":"\uBE14\uB80C\uB4DC\uBAA8\uB4DC","background.color.property.overflow":"\uC624\uBC84\uD50C\uB85C\uC6B0","background.color.property.overflow.visible":"\uBCF4\uC774\uAE30","background.color.property.overflow.hidden":"\uC228\uAE30\uAE30","background.color.property.overflow.scroll":"\uC2A4\uD06C\uB864","background.color.property.overflow.auto":"\uC790\uB3D9","blend.normal":"Normal(\uD45C\uC900) \uD63C\uD569\uBAA8\uB4DC","blend.multiply":"Multiply(\uACF1\uD558\uAE30) \uBAA8\uB4DC","blend.screen":"Screen(\uC2A4\uD06C\uB9B0) \uBAA8\uB4DC ","blend.overlay":"Overlay(\uC624\uBC84\uB808\uC774) \uBAA8\uB4DC","blend.darken":"Darken(\uC5B4\uB461\uAE30) \uBAA8\uB4DC","blend.lighten":"Lighten(\uBC1D\uAE30) \uBAA8\uB4DC ","blend.color-dodge":"Color Dodge(\uCEEC\uB7EC \uB2F7\uC9C0) \uBAA8\uB4DC ","blend.color-burn":"Color Burn(\uCEEC\uB7EC \uBC88) \uBAA8\uB4DC ","blend.hard-light":"Hard Light(\uD558\uB4DC \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.soft-light":"Soft Light(\uC18C\uD504\uD2B8 \uB77C\uC774\uD2B8) \uBAA8\uB4DC ","blend.difference":"Difference(\uCC28\uC774) \uBAA8\uB4DC","blend.exclusion":"Exclusion(\uC81C\uC678) \uBAA8\uB4DC","blend.hue":"Hue(\uC0C9\uC870) \uBAA8\uB4DC ","blend.saturation":"Saturation(\uCC44\uB3C4) \uBAA8\uB4DC","blend.color":"Color(\uC0C9\uC0C1) \uBAA8\uB4DC","blend.luminosity":"Luminosity(\uAD11\uB3C4) \uBAA8\uB4DC ","background.image.property.title":"\uCC44\uC6B0\uAE30","border.property.title":"\uC678\uACFD\uC120","border.radius.property.title":"\uB465\uADFC \uC678\uACFD\uC120","boxshadow.property.title":"\uADF8\uB9BC\uC790","filter.property.title":"\uD544\uD130","filter.property.blur":"\uD750\uB9BC(Blur)","filter.property.grayscale":"\uD68C\uC0C9(GrayScale)","filter.property.hue-rotate":"\uC0C9\uC870(HueRotate)","filter.property.invert":"\uBC18\uC804(Invert)","filter.property.brightness":"\uBC1D\uAE30(Brightness)","filter.property.contrast":"\uB300\b\uC870(Contrast)","filter.property.drop-shadow":"\uADF8\uB9BC\uC790(Drop Shadow)","filter.property.drop-shadow.color":"\uC0C9","filter.property.drop-shadow.offsetX":"X","filter.property.drop-shadow.offsetY":"Y","filter.property.drop-shadow.blurRadius":"\uD750\uB9BC","filter.property.opacity":"\uD22C\uBA85\uB3C4(Opacity)","filter.property.saturate":"\uCC44\uB3C4(Saturate)","filter.property.sepia":"\uAC08\uC0C9\uD1A4(Sepia)","filter.property.svg":"SVG","font.property.title":"\uD3F0\uD2B8","font.property.color":"\uC0C9","font.property.size":"\uD06C\uAE30","font.property.stretch":"\uBED7\uAE30","font.property.weight":"\uAD75\uAE30","font.property.style":"\uC2A4\uD0C0\uC77C","font.property.family":"\uAE00\uAF34","font.spacing.property.title":"\uD3F0\uD2B8 \uACF5\uAC04","font.spacing.property.lineHeight":"\uC904 \uB192\uC774","font.spacing.property.letterSpacing":"\uAE00\uC790 \uAC04\uACA9","font.spacing.property.wordSpacing":"\uB2E8\uC5B4 \uAC04\uACA9","font.spacing.property.indent":"\uB4E4\uC5EC\uC4F0\uAE30","backdrop.filter.property.title":"\uD6C4\uBA74 \uD544\uD130","clippath.property.title":"\uD074\uB9BD\uD328\uC2A4","export.property.title":"\uB0B4\uBCF4\uB0B4\uAE30","export.property.download":"\uB2E4\uC6B4\uB85C\uB4DC","iframe.property.title":"\uC544\uC774\uD504\uB808\uC784","image.property.title":"\uC774\uBBF8\uC9C0","image.property.origin":"\uC6D0\uBCF8","image.property.size":"\uD06C\uAE30","image.property.width":"\uB113\uC774","image.property.height":"\uB192\uC774","video.property.title":"\uBE44\uB514\uC624","video.property.play":"\uC2DC\uC791","video.property.pause":"\uBA48\uCDA4","video.property.volume":"\uBCFC\uB968","video.property.playbackRate":"\uBE60\uB974\uAE30","video.property.currentTime":"\uD604\uC7AC \uC2DC\uAC04","video.property.playTime":"\uD50C\uB808\uC774 \uC2DC\uAC04 \uAC04\uACA9","motion.property.title":"\uBAA8\uC158","path.data.property.title":"\uD328\uC2A4 \uC815\uBCF4","polygon.data.property.title":"\uD3F4\uB9AC\uACE4 \uC815\uBCF4","text.property.title":"\uD14D\uC2A4\uD2B8 \uC2A4\uD0C0\uC77C","text.property.align":"\uC815\uB82C","text.property.transform":"\uBCC0\uD615","text.property.decoration":"\uC7A5\uC2DD","text.clip.property.title":"\uD14D\uC2A4\uD2B8 \uD074\uB9BD","text.shadow.property.title":"\uD14D\uC2A4\uD2B8 \uADF8\uB9BC\uC790","text.fill.property.title":"\uD14D\uC2A4\uD2B8 \uCC44\uC6B0\uAE30","text.fill.property.fill":"\uCC44\uC6B0\uAE30","text.fill.property.stroke":"\uC724\uACFD\uC120","text.fill.property.strokeWidth":"\uC724\uACFD\uC120 \uAD75\uAE30","transform.property.title":"\uD2B8\uB79C\uC2A4\uD3FC","transform.origin.property.title":"\uD2B8\uB79C\uC2A4\uD3FC Origin","transition.property.title":"CSS \uD2B8\uB79C\uC9C0\uC158","keyframe.property.title":"CSS \uD0A4\uD504\uB808\uC784","selector.property.title":"CSS \uC140\uB809\uD130","selector.property.none":"\uC120\uD0DD\uC790 \uC5C6\uC74C","perspective.property.title":"\uD22C\uC601(perspective)","perspective.origin.property.title":"\uD22C\uC601 \uC911\uC2EC\uC810","svg.item.property.title":"\uBCF4\uC774\uAE30","svg.item.property.isMotionPath":"\uBAA8\uC158 \uD328\uC2A4","svg.item.property.fill":"\uCC44\uC6B0\uAE30","svg.item.property.fillOpacity":"\uD22C\uBA85\uB3C4","svg.item.property.path":"\uD328\uC2A4","svg.item.property.polygon":"\uD3F4\uB9AC\uACE4","svg.item.property.totalLength":"\uC804\uCCB4 \uAE38\uC774","svg.item.property.fillRule":"\uCC44\uC6B0\uAE30 \uADDC\uCE59","svg.item.property.stroke":"\uC120","svg.item.property.strokeWidth":"\uC120 \uAD75\uAE30","svg.item.property.dashArray":"\uC810\uC120 \uAE38\uC774","svg.item.property.dashOffset":"\uC810\uC120 \uC704\uCE58","svg.item.property.lineCap":"\uC120 \uBAA8\uC591","svg.item.property.lineJoin":"\uACB9\uCE5C \uC120","svg.item.property.filter":"\uD544\uD130","svg.item.property.blend":"\uBE14\uB80C\uB4DC","border.editor.all":"\uC804\uCCB4","border.editor.width":"\uD06C\uAE30","border.editor.style":"\uC2A4\uD0C0\uC77C","border.editor.color":"\uC0C9","border.editor.top":"\uC704","border.editor.left":"\uC67C\uCABD","border.editor.right":"\uC624\uB978\uCABD","border.editor.bottom":"\uC544\uB798","border.radius.editor.topLeft":"\uC67C\uCABD \uC704","border.radius.editor.topRight":"\uC624\uB978\uCABD \uC704","border.radius.editor.bottomLeft":"\uC67C\uCABD \uC544\uB798","border.radius.editor.bottomRight":"\uC624\uB978\uCABD \uC544\uB798","boxshadow.editor.blur":"\uD750\uB9BC","boxshadow.editor.spread":"\uAE38\uC774","css.property.editor.properties":"\uC18D\uC131","offset.path.list.editor.path":"\uD328\uC2A4","offset.path.list.editor.totalLength":"\uC804\uCCB4 \uAE38\uC774","offset.path.list.editor.distance":"\uAC70\uB9AC","offset.path.list.editor.direction":"\uBC29\uD5A5","offset.path.list.editor.rotate":"\uD68C\uC804","svgfilter.select.editor.message.create":"\uC0C8\uB85C\uC6B4 SVG Filter \uB97C \uB9CC\uB4DC\uC138\uC694.","svgfilter.select.editor.message.select":"\uD544\uD130\uB97C \uC120\uD0DD\uD558\uC138\uC694.","fill.editor.message.click.image":"\uC774\uBBF8\uC9C0\uB97C \uC120\uD0DD\uD558\uACE0 \uC2F6\uC73C\uBA74 \uD504\uB9AC\uBDF0 \uC601\uC5ED\uC744 \uD074\uB9AD\uD558\uC138\uC694.","fill.editor.message.drag.position":"\uAC00\uC6B4\uB370 \uC704\uCE58\uB97C \uB4DC\uB798\uADF8 \uD574\uBCF4\uC138\uC694.","fill.editor.x1":"\uC2DC\uC791 X","fill.editor.x2":"\uB05D X","fill.editor.y1":"\uC2DC\uC791 Y","fill.editor.y2":"\uB05D Y","fill.editor.spread":"\uD655\uC0B0","fill.editor.offset":"\uC704\uCE58","fill.editor.cx":"\uC911\uC2EC\uC810 X","fill.editor.cy":"\uC911\uC2EC\uC810 Y","fill.editor.r":"\uB05D \uBC18\uC9C0\uB984","fill.editor.fx":"\uC2DC\uC791 X","fill.editor.fy":"\uC2DC\uC791 Y","fill.editor.fr":"\uC2DC\uC791 \uBC18\uC9C0\uB984","perspective.origin.editor.originX":"\uC911\uC2EC\uC810 X","perspective.origin.editor.originY":"\uC911\uC2EC\uC810 Y","path.manager.msg":"\uD3B8\uC9D1\uC744 \uC885\uB8CC\uD560 \uB54C\uB294 ESC \uD0A4\uB098 Enter \uD0A4\uB97C \uB204\uB974\uC138\uC694. \uB610\uB294 \uD654\uBA74\uC744 \uD074\uB9AD\uD558\uC2DC\uBA74 \uB429\uB2C8\uB2E4.","path.manager.mode.done":"\uC644\uB8CC","path.manager.mode.modify":"\uC810 \uD3B8\uC9D1","path.manager.mode.path":"\uC810 \uCD94\uAC00","path.manager.mode.warp":"\uC6CC\uD504","path.manager.mode.transform":"\uBCC0\uD615","path.manager.mode.reverse":"\uC21C\uC11C\uBCC0\uACBD","path.manager.mode.flipX":"X\uCD95 \uD68C\uC804","path.manager.mode.flipY":"Y\uCD95 \uD68C\uC804","path.manager.mode.flipOrigin":"\uC804\uCCB4 \uD68C\uC804","colorpicker.popup.title":"\uC0C9\uC0C1 \uC120\uD0DD","selector.popup.title":"\uC120\uD0DD\uC790 \uC18D\uC131","selector.popup.selector":"\uC120\uD0DD\uC790","background.image.position.popup.title":"\uBC30\uACBD \uD328\uD134","background.image.position.popup.size":"\uD06C\uAE30","background.image.position.popup.width":"\uB113\uC774","background.image.position.popup.height":"\uB192\uC774","background.image.position.popup.repeat":"\uBC18\uBCF5","background.image.position.popup.blend":"\uBE14\uB80C\uB4DC","background.image.position.popup.type.repeat":"\uBC18\uBCF5","background.image.position.popup.type.no-repeat":"\uBC18\uBCF5 \uC548\uD568","background.image.position.popup.type.repeat-x":"x\uCD95 \uBC18\uBCF5","background.image.position.popup.type.repeat-y":"y\uCD95 \uBC18\uBCF5","background.image.position.popup.type.space":"\uACF5\uBC31\uC720\uC9C0","background.image.position.popup.type.round":"\uBC18\uC62C\uB9BC","gradient.picker.popup.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8\uC640 \uC774\uBBF8\uC9C0","image.asset.property.title":"\uC774\uBBF8\uC9C0","video.asset.property.title":"\uBE44\uB514\uC624","color.asset.property.title":"\uC0C9","gradient.asset.property.title":"\uADF8\uB77C\uB514\uC5B8\uD2B8","pattern.asset.property.title":"\uD328\uD134","svgfilter.asset.property.title":"SVG \uD544\uD130","inspector.tab.title.design":"\uB514\uC790\uC778","inspector.tab.title.component":"\uCEF4\uD3EC\uB10C\uD2B8 \uC18D\uC131","inspector.tab.title.transition":"\uC560\uB2C8\uBA54\uC774\uC158","inspector.tab.title.asset":"\uC5D0\uC14B \uAD00\uB9AC\uC790","inspector.tab.title.text":"\uD14D\uC2A4\uD2B8","inspector.tab.title.code":"\uCF54\uB4DC","inspector.tab.title.history":"\uAE30\uB85D","timeline.property.title":"\uD0C0\uC784\uB77C\uC778","timeline.property.resize":"\uD0C0\uC784\uB77C\uC778 \uB192\uC774\uB97C \uBCC0\uACBD\uD569\uB2C8\uB2E4. \uB4DC\uB798\uADF8 \uD574\uC8FC\uC138\uC694.","timeline.animation.property.title":"\uC560\uB2C8\uBA54\uC774\uC158","timeline.play.control.play":"\uD50C\uB808\uC774","timeline.play.control.pause":"\uBA48\uCDA4","timeline.play.control.first":"\uCC98\uC74C\uC73C\uB85C","timeline.play.control.prev":"\uC774\uC804\uC73C\uB85C","timeline.play.control.next":"\uB2E4\uC74C\uC73C\uB85C","timeline.play.control.last":"\uB9C8\uC9C0\uB9C9\uC73C\uB85C","timeline.play.control.direction":"\uBC29\uD5A5","timeline.play.control.speed":"\uC18D\uB825","timeline.play.control.repeat":"\uBC18\uBCF5","timeline.play.control.infinite":"\uBB34\uD55C","timeline.play.control.normal":"normal","timeline.play.control.alternate":"alternate","timeline.play.control.reverse":"reverse","timeline.play.control.alternate.reverse":"alternate reverse","timeline.value.editor.value":"\uAC12","timeline.value.editor.time":"\uC2DC\uAC04","timeline.value.editor.timing":"\uD0C0\uC774\uBC0D \uD568\uC218","timeline.value.editor.offset.message":"Enter\uD0A4\uB97C \uC785\uB825\uD558\uBA74 \uC801\uC6A9\uB429\uB2C8\uB2E4.","svgfilter.popup.title":"SVG \uD544\uD130","css.item.rotate":"\uD68C\uC804","css.item.rotateX":"X\uCD95 \uD68C\uC804","css.item.rotateY":"Y\uCD95 \uD68C\uC804","css.item.rotateZ":"Z\uCD95 \uD68C\uC804","css.item.rotate3d":"3D \uD68C\uC804","css.item.skewX":"X\uCD95 \uB298\uC774\uAE30","css.item.skewY":"Y\uCD95 \uB298\uC774\uAE30","css.item.translate":"\uC774\uB3D9","css.item.translateX":"X\uCD95 \uC774\uB3D9","css.item.translateY":"Y\uCD95 \uC774\uB3D9","css.item.translateZ":"Z\uCD95 \uC774\uB3D9","css.item.translate3d":"3D \uC774\uB3D9","css.item.perspective":"\uC6D0\uADFC","css.item.scale":"\uD06C\uAE30\uBCC0\uACBD","css.item.scaleX":"X\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleY":"Y\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scaleZ":"Z\uCD95 \uD06C\uAE30\uBCC0\uACBD","css.item.scale3d":"3D \uD06C\uAE30\uBCC0\uACBD","css.item.matrix":"\uBCC0\uD658 \uD589\uB82C","css.item.matrix3d":"3D \uBCC0\uD658 \uD589\uB82C","animation.property.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.direction":"\uBC29\uD5A5","animation.property.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.duration":"\uC2DC\uAC04","animation.property.iteration.count":"\uBC18\uBCF5 \uD69F\uC218","animation.property.select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694","animation.property.popup.title":"CSS \uC560\uB2C8\uBA54\uC774\uC158","animation.property.popup.timing.function":"\uD0C0\uC774\uBC0D \uD568\uC218","animation.property.popup.keyframe":"\uD0A4\uD504\uB808\uC784","animation.property.popup.direction":"\uBC29\uD5A5","animation.property.popup.play.state":"\uD50C\uB808\uC774 \uC0C1\uD0DC","animation.property.popup.fill.mode":"\uCC44\uC6B0\uAE30 \uBAA8\uB4DC","animation.property.popup.delay":"\uB300\uAE30\uC2DC\uAC04","animation.property.popup.duration":"\uC2DC\uAC04","animation.property.popup.iteration":"\uBC18\uBCF5 \uD69F\uC218","animation.property.popup.normal":"\uC2DC\uAC04\uC21C","animation.property.popup.reverse":"\uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.alternate":"\uC655\uBCF5 \uC2DC\uAC04\uC21C","animation.property.popup.alternate-reverse":"\uC655\uBCF5 \uC5ED\uC2DC\uAC04\uC21C","animation.property.popup.none":"none","animation.property.popup.forwards":"forwards","animation.property.popup.backwards":"backwards","animation.property.popup.both":"both","animation.property.popup.Select a keyframe":"\uD0A4\uD504\uB808\uC784\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694.","keyframe.popup.title":"\uD0A4\uD504\uB808\uC784","code.view.property.title":"\uCF54\uB4DC\uBDF0","svg.filter.editor.tab.filter":"\uD544\uD130","svg.filter.editor.tab.preset":"\uD504\uB9AC\uC14B","svg.filter.editor.tab.asset":"\uC5D0\uC14B","svg.filter.editor.GRAPHIC REFERENCES":"\uCC38\uC870 \uADF8\uB798\uD53D","svg.filter.editor.SOURCES":"\uC6D0\uBCF8","svg.filter.editor.MODIFIER":"\uC218\uC815","svg.filter.editor.LIGHTING":"\uBE5B","svg.filter.editor.COMBINERS":"\uACB0\uD569","svg.filter.editor.Template":"\uD15C\uD50C\uB9BF","layout.property.title":"\uB808\uC774\uC544\uC6C3","layout.property.flex":"\uD50C\uB809\uC2A4 \uBC15\uC2A4","layout.property.grid":"\uADF8\uB9AC\uB4DC","layout.property.default":"\uAE30\uBCF8 \uC88C\uD45C","layout.property.resizing.title":"\uC0AC\uC774\uC988 \uC870\uC808","layout.property.resizing.self.title":"\uC544\uC774\uD15C \uC0AC\uC774\uC988 \uC870\uC808","default.layout.item.property.title.constraints":"Constraints","flex.layout.editor.row":"\uD589","flex.layout.editor.column":"\uC5F4","flex.layout.editor.row-reverse":"\uC5ED\uBC29\uD5A5 \uD589","flex.layout.editor.column-reverse":"\uC5ED\uBC29\uD5A5 \uC5F4","flex.layout.editor.nowrap":"\uAC10\uC2F8\uC9C0 \uC54A\uAE30","flex.layout.editor.wrap":"\uAC10\uC2F8\uAE30","flex.layout.editor.wrap-reverse":"\uC5ED\uBC29\uD5A5 \uAC10\uC2F8\uAE30","flex.layout.editor.flex-start":"\uC2DC\uC791","flex.layout.editor.flex-end":"\uB05D","flex.layout.editor.center":"\uC911\uAC04","flex.layout.editor.space-between":"\uACF5\uAC04 \uC911\uAC04 \uCC44\uC6C0","flex.layout.editor.space-around":"\uACF5\uAC04 \uC591\uB05D \uCC44\uC6C0","flex.layout.editor.baseline":"\uAE30\uBCF8\uC120","flex.layout.editor.stretch":"\uD3BC\uCE58\uAE30","flex.layout.editor.direction":"\uBC29\uD5A5","flex.layout.editor.justify-content":"\uCEE8\uD150\uCE20 \uC870\uC815","flex.layout.editor.align-items":"\uC544\uC774\uD15C \uC815\uB82C","flex.layout.editor.align-content":"\uCEE8\uD150\uCE20 \uC815\uB82C","flex.layout.item.property.title":"\uD50C\uB809\uC2A4 \uC544\uC774\uD15C \uC124\uC815","flex.layout.item.property.grow":"\uACF5\uAC04 \uBE44\uC728","flex.layout.item.property.shrink":"\uCD95\uC18C \uBE44\uC728","flex.layout.item.property.basis":"\uCD08\uAE30 \uD06C\uAE30","flex.layout.item.property.none":"\uC5C6\uC74C","flex.layout.item.property.auto":"\uC790\uB3D9","flex.layout.item.property.value":"\uAC12","grid.layout.editor.template.columns":"\uC5F4","grid.layout.editor.column.gap":"\uC5F4 \uAC04\uACA9","grid.layout.editor.template.rows":"\uD589","grid.layout.editor.row.gap":"\uD589 \uAC04\uACA9","grid.box.editor.box.title":"\uC601\uC5ED","grid.box.editor.type":"\uD0C0\uC785","grid.box.editor.repeat":"\uBC18\uBCF5","grid.box.editor.length":"\uAE38\uC774","grid.box.editor.none":"\uC5C6\uC74C","grid.box.editor.auto":"\uC790\uB3D9","grid.box.editor.count":"\uAC1C\uC218","grid.box.editor.value":"\uD06C\uAE30","grid.layout.item.property.title":"\uADF8\uB9AC\uB4DC \uC544\uC774\uD15C \uC124\uC815","grid.layout.item.property.column":"\uC5F4","grid.layout.item.property.row":"\uD589","grid.layout.item.property.start":"\uC2DC\uC791","grid.layout.item.property.End":"\uB05D","grid.layout.item.property.none":"\uC5C6\uC74C","grid.layout.item.property.value":"\uAC12","box.model.property.title":"\uBC15\uC2A4 \uBAA8\uB378","box.model.property.margin":"\uB9C8\uC9C4","box.model.property.padding":"\uD328\uB529","component.items.canvas":"\uCE94\uBC84\uC2A4","component.items.layer":"\uB808\uC774\uC5B4","component.items.3dlayer":"3D \uB808\uC774\uC5B4","component.items.drawing":"\uADF8\uB9AC\uAE30","component.items.custom":"\uC0AC\uC6A9\uC790 \uC815\uC758 \uCEF4\uD3EC\uB10C\uD2B8","component.items.chart":"\uCC28\uD2B8","component.items.plugin":"\uD50C\uB7EC\uADF8\uC778","svg.text.property.title":"SVG Text \uC2A4\uD0C0\uC77C","svg.text.property.textarea":"\uD14D\uC2A4\uD2B8 \uC785\uB825","svg.text.property.size":"\uD3F0\uD2B8 \uD06C\uAE30","svg.text.property.weight":"\uD3F0\uD2B8 \uAD75\uAE30","svg.text.property.style":"\uD3F0\uD2B8 \uC2A4\uD0C0\uC77C","svg.text.property.anchor":"\uD14D\uC2A4\uD2B8 \uC704\uCE58","svg.text.property.family":"\uD3F0\uD2B8 \uAE00\uAF34","svg.text.property.length.adjust":"\uAE38\uC774 \uB300\uC751","svg.text.property.text.length":"\uD14D\uC2A4\uD2B8 \uAE38\uC774","svg.text.property.start.offset":"\uC2DC\uC791 \uC9C0\uC810","fill.picker.popup.title":"\uC0C9 \uCC44\uC6B0\uAE30","gradient.editor.drag.message":"\uB4DC\uB798\uADF8 \uD558\uBA74 \uC911\uC2EC\uC810\uC744 \uC62E\uAE38 \uC218 \uC788\uC2B5\uB2C8\uB2E4.","draw.manager.tolerance":"\uD3EC\uC778\uD2B8 \uD5C8\uC6A9 \uC624\uCC28","pattern.property.title":"\uD328\uD134","pattern.info.popup.title":"\uD328\uD134 \uC815\uBCF4","pattern.info.popup.width":"\uB113\uC774","pattern.info.popup.height":"\uB192\uC774","pattern.info.popup.lineWidth":"\uC120 \uB113\uC774","pattern.info.popup.lineHeight":"\uC120 \uB192\uC774","pattern.info.popup.rotate":"\uD68C\uC804","pattern.info.popup.blend":"\uBE14\uB80C\uB4DC","pattern.info.popup.foreColor":"\uD328\uD134\uC0C9","pattern.info.popup.backColor":"\uBC30\uACBD\uC0C9","stroke.dasharray.editor.add":"\uC810 \uCD94\uAC00","viewport.panning.enable":"space \uB97C \uB204\uB978\uCC44 \uD654\uBA74\uC744 \uB4DC\uB798\uADF8 \uD558\uBA74 \uC601\uC5ED\uC744 \uC6C0\uC9C1\uC77C \uC218 \uC788\uC2B5\uB2C8\uB2E4."},Av={en_US:fL,fr_FR:gL,ko_KR:mL};function Eh(n){Object.keys(Av).forEach(function(e){n.registerI18nMessage(e,Av[e])})}const rs={HORIZONTAL:"constraints-horizontal",VERTICAL:"constraints-vertical"},Tt={NONE:"none",MIN:"min",MAX:"max",STRETCH:"stretch",SCALE:"scale",CENTER:"center"},ns={DIFFERENCE:"difference",INTERSECTION:"intersection",UNION:"union",REVERSE_DIFFERENCE:"reverse-difference",XOR:"xor"},Xp={BUTT:"butt",ROUND:"round",SQUARE:"square"},dc={MITER:"miter",ROUND:"round",BEVEL:"bevel"},pr={NORMAL:"normal",MULTIPLY:"multiply",SCREEN:"screen",OVERLAY:"overlay",DARKEN:"darken",LIGHTEN:"lighten",COLOR_DODGE:"color-dodge",COLOR_BURN:"color-burn",HARD_LIGHT:"hard-light",SOFT_LIGHT:"soft-light",DIFFERENCE:"difference",EXCLUSION:"exclusion",HUE:"hue",SATURATION:"saturation",COLOR:"color",LUMINOSITY:"luminosity"},Yp={NONE:"none",UNDERLINE:"underline",OVERLINE:"overline",LINE_THROUGH:"line-through",BLINK:"blink"},Kp={NONE:"none",CAPITALIZE:"capitalize",UPPERCASE:"uppercase",LOWERCASE:"lowercase"},vL={START:"start",END:"end",LEFT:"left",RIGHT:"right",CENTER:"center",JUSTIFY:"justify"},Ic={VISIBLE:"visible",HIDDEN:"hidden",SCROLL:"scroll",AUTO:"auto"},Jn={NONE:"none",HIDDEN:"hidden",DOTTED:"dotted",DASHED:"dashed",SOLID:"solid",DOUBLE:"double",GROOVE:"groove",RIDGE:"ridge",INSET:"inset",OUTSET:"outset"},At={DEFAULT:"default",FLEX:"flex",GRID:"grid"},wr={ROW:"row",ROW_REVERSE:"row-reverse",COLUMN:"column",COLUMN_REVERSE:"column-reverse"},Cl={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},ca={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",BASELINE:"baseline",STRETCH:"stretch"},yL={FLEX_START:"flex-start",FLEX_END:"flex-end",CENTER:"center",SPACE_BETWEEN:"space-between",SPACE_AROUND:"space-around",SPACE_EVENLY:"space-evenly"},yu={NOWRAP:"nowrap",WRAP:"wrap",WRAP_REVERSE:"wrap-reverse"},St={FIXED:"fixed",HUG_CONTENT:"hug-content",FILL_CONTAINER:"fill-container"},vd={NONE:"none",TEXT:"text"},Vn={OUTSET:"outset",INSET:"inset"},de={STATIC:"static-gradient",LINEAR:"linear-gradient",RADIAL:"radial-gradient",CONIC:"conic-gradient",REPEATING_LINEAR:"repeating-linear-gradient",REPEATING_RADIAL:"repeating-radial-gradient",REPEATING_CONIC:"repeating-conic-gradient",IMAGE:"image",URL:"url"},cn={CLOSEST_SIDE:"closest-side",CLOSEST_CORNER:"closest-corner",FARTHEST_SIDE:"farthest-side",FARTHEST_CORNER:"farthest-corner"},Li={CIRCLE:"circle",ELLIPSE:"ellipse"},$r={NONE:"none",CIRCLE:"circle",ELLIPSE:"ellipse",POLYGON:"polygon",INSET:"inset",PATH:"path",SVG:"svg"},Dn={VISIBLE:"visible",HIDDEN:"hidden"},Ze={LINEAR:"linear",EASE:"ease",EASE_IN:"ease-in",EASE_OUT:"ease-out",EASE_IN_OUT:"ease-in-out",STEPS:"steps",CUBIC_BEZIER:"cubic-bezier",PATH:"path"},tn={PAD:"pad",REFLECT:"reflect",REPEAT:"repeat"},Ht={COMMA:"comma",COLOR:"color",LENGTH:"length",GRADIENT:"gradient",TIMING:"timing",KEYWORD:"keyword",STRING:"string",NUMBER:"number",BOOLEAN:"boolean",FUNCTION:"function",PATH:"path",URL:"url",REPEAT:"repeat",UNKNOWN:"unknown"},xL={MOVETO:"M",LINETO:"L",CURVETO:"C",QUARDTO:"Q",ARCTO:"A",CLOSEPATH:"Z",UNKNOWN:"unknown"},Nn={APPEND_CHILD:"appendChild",INSERT_BEFORE:"insertBefore",INSERT_AFTER:"insertAfter"};class im extends ge{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(a=>typeof a=="string"?{value:a,text:a}:a):(this.props.options||"").split(e).map(a=>a.trim()).map(a=>{const[o,l]=a.split(":");return{value:o,text:l||o}}),i=this.props.value,r=this.props.tabindex,s=this.props.title;return{splitChar:e,label:this.props.label||"",title:s,options:t,value:i,tabIndex:r}}getOptionString(){var e=this.state.options.map(t=>{var i=t.value,r=t.text||t.value;r===""?r=this.props["none-value"]?this.props["none-value"]:"":r==="-"&&(r="----------",i="");var s=i===this.state.value?"selected":"";const a=t.disabled?"disabled":"";return``});return e.join("")}template(){var{label:e,title:t,tabIndex:i,value:r=pr.NORMAL}=this.state,s=e?"has-label":"",a=i?'tabIndex="1"':"",o=this.props.compact?"compact":"";return Ue[e]&&(e=ie(e)),` -
          - ${e?``:""} -
          - -
          - ${r} - ${ie("expand_more")} -
          -
          -
          - `}getValue(){return this.refs.$options.value}setValue(e){this.refs.$options.val(this.state.value),this.setState({value:e+""})}[Me("$options")](){return{"data-count":this.state.options.length.toString()}}[Me("$selectedValue")](){var e;return{text:(e=this.state.options.find(t=>t.value===this.state.value))==null?void 0:e.text}}[Yn("$options")](){this.updateData({value:this.refs.$options.value}),this.bindData("$selectedValue")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}const bL=[pr.NORMAL,pr.MULTIPLY,pr.SCREEN,pr.OVERLAY,pr.DARKEN,pr.LIGHTEN,pr.COLOR_DODGE,pr.COLOR_BURN,pr.HARD_LIGHT,pr.SOFT_LIGHT,pr.DIFFERENCE,pr.EXCLUSION,pr.HUE,pr.SATURATION,pr.COLOR,pr.LUMINOSITY];class _L extends im{getBlendList(){return bL.map(e=>({value:e,text:this.$i18n(`blend.${e}`)}))}initState(){return ze(P({},super.initState()),{options:this.getBlendList()})}}const Sx={aliceblue:"rgb(240, 248, 255)",antiquewhite:"rgb(250, 235, 215)",aqua:"rgb(0, 255, 255)",aquamarine:"rgb(127, 255, 212)",azure:"rgb(240, 255, 255)",beige:"rgb(245, 245, 220)",bisque:"rgb(255, 228, 196)",black:"rgb(0, 0, 0)",blanchedalmond:"rgb(255, 235, 205)",blue:"rgb(0, 0, 255)",blueviolet:"rgb(138, 43, 226)",brown:"rgb(165, 42, 42)",burlywood:"rgb(222, 184, 135)",cadetblue:"rgb(95, 158, 160)",chartreuse:"rgb(127, 255, 0)",chocolate:"rgb(210, 105, 30)",coral:"rgb(255, 127, 80)",cornflowerblue:"rgb(100, 149, 237)",cornsilk:"rgb(255, 248, 220)",crimson:"rgb(237, 20, 61)",cyan:"rgb(0, 255, 255)",darkblue:"rgb(0, 0, 139)",darkcyan:"rgb(0, 139, 139)",darkgoldenrod:"rgb(184, 134, 11)",darkgray:"rgb(169, 169, 169)",darkgrey:"rgb(169, 169, 169)",darkgreen:"rgb(0, 100, 0)",darkkhaki:"rgb(189, 183, 107)",darkmagenta:"rgb(139, 0, 139)",darkolivegreen:"rgb(85, 107, 47)",darkorange:"rgb(255, 140, 0)",darkorchid:"rgb(153, 50, 204)",darkred:"rgb(139, 0, 0)",darksalmon:"rgb(233, 150, 122)",darkseagreen:"rgb(143, 188, 143)",darkslateblue:"rgb(72, 61, 139)",darkslategray:"rgb(47, 79, 79)",darkslategrey:"rgb(47, 79, 79)",darkturquoise:"rgb(0, 206, 209)",darkviolet:"rgb(148, 0, 211)",deeppink:"rgb(255, 20, 147)",deepskyblue:"rgb(0, 191, 255)",dimgray:"rgb(105, 105, 105)",dimgrey:"rgb(105, 105, 105)",dodgerblue:"rgb(30, 144, 255)",firebrick:"rgb(178, 34, 34)",floralwhite:"rgb(255, 250, 240)",forestgreen:"rgb(34, 139, 34)",fuchsia:"rgb(255, 0, 255)",gainsboro:"rgb(220, 220, 220)",ghostwhite:"rgb(248, 248, 255)",gold:"rgb(255, 215, 0)",goldenrod:"rgb(218, 165, 32)",gray:"rgb(128, 128, 128)",grey:"rgb(128, 128, 128)",green:"rgb(0, 128, 0)",greenyellow:"rgb(173, 255, 47)",honeydew:"rgb(240, 255, 240)",hotpink:"rgb(255, 105, 180)",indianred:"rgb(205, 92, 92)",indigo:"rgb(75, 0, 130)",ivory:"rgb(255, 255, 240)",khaki:"rgb(240, 230, 140)",lavender:"rgb(230, 230, 250)",lavenderblush:"rgb(255, 240, 245)",lawngreen:"rgb(124, 252, 0)",lemonchiffon:"rgb(255, 250, 205)",lightblue:"rgb(173, 216, 230)",lightcoral:"rgb(240, 128, 128)",lightcyan:"rgb(224, 255, 255)",lightgoldenrodyellow:"rgb(250, 250, 210)",lightgreen:"rgb(144, 238, 144)",lightgray:"rgb(211, 211, 211)",lightgrey:"rgb(211, 211, 211)",lightpink:"rgb(255, 182, 193)",lightsalmon:"rgb(255, 160, 122)",lightseagreen:"rgb(32, 178, 170)",lightskyblue:"rgb(135, 206, 250)",lightslategray:"rgb(119, 136, 153)",lightslategrey:"rgb(119, 136, 153)",lightsteelblue:"rgb(176, 196, 222)",lightyellow:"rgb(255, 255, 224)",lime:"rgb(0, 255, 0)",limegreen:"rgb(50, 205, 50)",linen:"rgb(250, 240, 230)",magenta:"rgb(255, 0, 255)",maroon:"rgb(128, 0, 0)",mediumaquamarine:"rgb(102, 205, 170)",mediumblue:"rgb(0, 0, 205)",mediumorchid:"rgb(186, 85, 211)",mediumpurple:"rgb(147, 112, 219)",mediumseagreen:"rgb(60, 179, 113)",mediumslateblue:"rgb(123, 104, 238)",mediumspringgreen:"rgb(0, 250, 154)",mediumturquoise:"rgb(72, 209, 204)",mediumvioletred:"rgb(199, 21, 133)",midnightblue:"rgb(25, 25, 112)",mintcream:"rgb(245, 255, 250)",mistyrose:"rgb(255, 228, 225)",moccasin:"rgb(255, 228, 181)",navajowhite:"rgb(255, 222, 173)",navy:"rgb(0, 0, 128)",oldlace:"rgb(253, 245, 230)",olive:"rgb(128, 128, 0)",olivedrab:"rgb(107, 142, 35)",orange:"rgb(255, 165, 0)",orangered:"rgb(255, 69, 0)",orchid:"rgb(218, 112, 214)",palegoldenrod:"rgb(238, 232, 170)",palegreen:"rgb(152, 251, 152)",paleturquoise:"rgb(175, 238, 238)",palevioletred:"rgb(219, 112, 147)",papayawhip:"rgb(255, 239, 213)",peachpuff:"rgb(255, 218, 185)",peru:"rgb(205, 133, 63)",pink:"rgb(255, 192, 203)",plum:"rgb(221, 160, 221)",powderblue:"rgb(176, 224, 230)",purple:"rgb(128, 0, 128)",rebeccapurple:"rgb(102, 51, 153)",red:"rgb(255, 0, 0)",rosybrown:"rgb(188, 143, 143)",royalblue:"rgb(65, 105, 225)",saddlebrown:"rgb(139, 69, 19)",salmon:"rgb(250, 128, 114)",sandybrown:"rgb(244, 164, 96)",seagreen:"rgb(46, 139, 87)",seashell:"rgb(255, 245, 238)",sienna:"rgb(160, 82, 45)",silver:"rgb(192, 192, 192)",skyblue:"rgb(135, 206, 235)",slateblue:"rgb(106, 90, 205)",slategray:"rgb(112, 128, 144)",slategrey:"rgb(112, 128, 144)",snow:"rgb(255, 250, 250)",springgreen:"rgb(0, 255, 127)",steelblue:"rgb(70, 130, 180)",tan:"rgb(210, 180, 140)",teal:"rgb(0, 128, 128)",thistle:"rgb(216, 191, 216)",tomato:"rgb(255, 99, 71)",turquoise:"rgb(64, 224, 208)",violet:"rgb(238, 130, 238)",wheat:"rgb(245, 222, 179)",white:"rgb(255, 255, 255)",whitesmoke:"rgb(245, 245, 245)",yellow:"rgb(255, 255, 0)",yellowgreen:"rgb(154, 205, 50)",transparent:"rgba(0, 0, 0, 0)",currentColor:"currentColor"};function SL(n){return!!Sx[n]}function wL(n){return Sx[n]}var Lu={isColorName:SL,getColorByName:wL};function _g(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];const i=n/255,r=e/255,s=t/255,a=Math.max(i,r,s),o=Math.min(i,r,s),l=a-o;var c=0;l==0?c=0:a==i?c=60*((r-s)/l%6):a==r?c=60*((s-i)/l+2):a==s&&(c=60*((i-r)/l+4)),c<0&&(c=360+c);var h=0;a==0?h=0:h=l/a;var d=a;return{h:c,s:h,v:d}}function na(n,e,t){if(arguments.length==1)var{r:n,g:e,b:t}=arguments[0];n/=255,e/=255,t/=255;var i=Math.max(n,e,t),r=Math.min(n,e,t),s,a,o=(i+r)/2;if(i==r)s=a=0;else{var l=i-r;switch(a=o>.5?l/(2-i-r):l/(i+r),i){case n:s=(e-t)/l+(e1&&(t-=1),t<1/6?n+(e-n)*6*t:t<1/2?e:t<2/3?n+(e-n)*(2/3-t)*6:n}function ML(n,e,t){if(arguments.length==1)var{h:n,s:e,l:t}=arguments[0];const i=ku(n,e,t);return _g(i.r,i.g,i.b)}function ku(n,e,t){if(arguments.length==1)var{h:n,s:e,l:t}=arguments[0];var i,r,s;if(n/=360,e/=100,t/=100,e==0)i=r=s=t;else{var a=t<.5?t*(1+e):t+e-t*e,o=2*t-a;i=qp(o,a,n+1/3),r=qp(o,a,n),s=qp(o,a,n-1/3)}return{r:Xt(i*255),g:Xt(r*255),b:Xt(s*255)}}const $L=/(#(?:[\da-f]{3}){1,2}|#(?:[\da-f]{8})|rgb\((?:\s*\d{1,3},\s*){2}\d{1,3}\s*\)|rgba\((?:\s*\d{1,3},\s*){3}\d*\.?\d+\s*\)|hsl\(\s*\d{1,3}(?:,\s*\d{1,3}%){2}\s*\)|hsla\(\s*\d{1,3}(?:,\s*\d{1,3}%){2},\s*\d*\.?\d+\s*\)|([\w_-]+))/gi;function wx(n,e="@"){return`${e}${n.startIndex}`.padEnd(10,"0")}function PL(n){return!!Mx(n).length}function Mx(n){const e=n.match($L);let t=[];if(!e)return t;for(var i=0,r=e.length;i-1||e[i].indexOf("rgb")>-1||e[i].indexOf("hsl")>-1)t.push({color:e[i]});else{var s=Lu.getColorByName(e[i]);s&&t.push({color:e[i],nameColor:s})}var a={next:0};return t.forEach(o=>{const l=n.indexOf(o.color,a.next);o.startIndex=l,o.endIndex=l+o.color.length,a.next=o.endIndex}),t}function Ih(n,e="@"){const t=Mx(n);return t.forEach(i=>{n=n.replace(i.color,wx(i,e))}),{str:n,matches:t}}function dp(n,e){return e.forEach(t=>{n=n.replace(wx(t),t.color)}),n}const TL=/^\s+|\s+$/g;function Xo(n){return n.replace(TL,"")}function Si(n){if(gi(n)){if(Lu.isColorName(n)&&(n=Lu.getColorByName(n)),n.indexOf("rgb(")>-1){for(var e=n.replace("rgb(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("rgba(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("hsl(","").replace(")","").split(","),t=0,i=e.length;t-1){for(var e=n.replace("hsla(","").replace(")","").split(","),t=0,i=e.length;t>16,l=(n&65280)>>8,c=(n&255)>>0;var r={type:"hex",r:o,g:l,b:c,a:1};return r=P(P({},r),na(r)),r}else if(0<=n&&n<=4294967295){const o=(n&4278190080)>>24,l=(n&16711680)>>16,c=(n&65280)>>8,h=(n&255)/255;var r={type:"hex",r:o,g:l,b:c,a:h};return r=P(P({},r),na(r)),r}}return n}const CL=()=>!0;function Sg(n,e=CL){var t=[];let i=n.layers.length;for(let r=i;r--;){let s=n.layers[r];t.push(...Sg(s.ref,e))}return e(n)&&t.push(n),t}class rm{constructor(e={}){return this.ref=new Proxy(this,{get:(t,i)=>{var r=t[i];return Ye(r)?(...s)=>r.apply(t,s):r||t.json[i]},set:(t,i,r)=>(t.json[i]!=r&&(t.json[i]=r,this.changed()),!0)}),e instanceof rm&&(e=e.toJSON()),this.json=this.convert(Object.assign(this.getDefaultObject(),e)),this.lastChangedField={},this.lastChangedFieldKeys=[],this.cachedValue={},this.ref}getDefaultTitle(){return"Item"}getIcon(){return""}isAttribute(){return!1}isChanged(e){return this.json.timestamp!=Number(e)}changed(){this.json.timestamp=this.json._timestamp+window.performance.now()}get title(){return this.json.name||this.getDefaultTitle()}renameWithCount(){let e=this.json.name.split(" ");if(e.length<2)return;let t=e.pop(),i=+t;bi(i)&&isNaN(i)===!1?i++:i=t;const r=[...e,i].join(" ");this.reset({name:r})}get allLayers(){return Sg(this.ref)}filteredAllLayers(e){return Sg(this.ref,e)}get id(){return this.json.id}get layers(){return this.json.layers}get parent(){return this.json.parent}setParent(e){this.json.parent=e}get depth(){return this.parent?this.parent.depth+1:1}get top(){if(!this.parent)return this.ref;let e=this.parent;do{if(!e.parent)return e;e=e.parent}while(e)}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){if(!this.parent)return[this.ref];const e=this.parent.path;return e.push(this.ref),e}getInnerId(e=""){return this.json.id+e}is(e){return this.json?e===this.json.itemType:!1}isNot(e){return this.is(e)===!1}isSVG(){return!1}addCache(e,t){this.cachedValue[e]=t}getCache(e){return this.cachedValue[e]}computed(e,t){const r=`${`__cachedKey_${e}`}__parseValue`,s=this.json[e];return this.getCache(e)===s&&this.getCache(r)?this.getCache(r):(this.addCache(e,s),this.addCache(r,t(s,this.ref)),this.getCache(r))}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e){return e.layers&&e.layers.forEach(t=>{t.parent=this.ref}),e}setCache(){}toCloneObject(e=!0){var t=this.attrs("itemType","name","elementType","type","visible","lock","selected");return e&&(t.layers=this.json.layers.map(i=>i.clone(e))),t}clone(e=!0){var t=this.constructor,i=new t(this.toCloneObject(e));return i.setParent(this.json.parent),i}reset(e){return e.__changedId||(e.__changedId=Po()),this.lastChangedField.__changedId!==e.__changedId&&(this.json=this.convert(Object.assign(this.json,e)),this.lastChangedField=e,this.lastChangedFieldKeys=Object.keys(e),this.changed()),!0}hasChangedField(...e){return e.some(t=>this.lastChangedFieldKeys.includes(t))}getDefaultObject(e={}){var t=Xr();return P({id:t,_timestamp:Date.now(),_time:window.performance.now(),visible:!0,lock:!1,selected:!1,layers:[]},e)}attrs(...e){const t={};return e.forEach(i=>{t[i]=rt(this.json[i])}),t}hasChildren(){return this.layers.length>0}appendChild(e){return e.parent===this.ref||(this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.push(e),this.project.addIndexItem(e)),e}prependChildItem(e){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.unshift(e),this.project.addIndexItem(e),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){return this.resetMatrix(e),e.parent&&e.remove(),e.setParent(this.ref),this.json.layers.splice(t,0,e),this.project.addIndexItem(e),e}insertAfter(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t),this.project.addIndexItem(e),e}insertBefore(e){const t=this.parent.findIndex(this);return this.parent.insertChild(e,t-1),this.project.addIndexItem(e),e}setPositionInPlace(e,t){this.layers.splice(e,0,t)}toggle(e,t){Bi(t)?this.json[e]=!this.json[e]:this.json[e]=!!t}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!(e==="parent"||Bi(this.json[e]))}toJSON(){const e=this.json;let t={};return Object.keys(e).filter(i=>this.expectJSON(i)).forEach(i=>{t[i]=e[i]}),t}resize(){}copy(e=0){return this.json.parent.copyItem(this.ref,e)}findIndex(e){return this.json.layers.indexOf(e.ref)}copyItem(e,t=10){var i=e.clone();i.renameWithCount(),i.move([t,t,0]);var r=this.findIndex(e);return r>-1&&(this.json.layers.push(i),this.project.addIndexItem(i)),i}remove(){this.json.parent.removeChild(this.ref),this.project.removeIndexItem(this.ref)}removeChild(e){const t=this.findIndex(e);t>-1&&this.json.layers.splice(t,1)}hasParent(e){var t=this.json.parent.id===e;return!t&&this.json.parent.is("project")===!1?this.json.parent.hasParent(e):t}}const EL=1e3,uc=new Map;class Zp{static has(e){return uc.has(e)}static get(e){return uc.get(e)}static set(e,t){uc.size>EL&&uc.clear(),uc.set(e,t)}}class un{static parseStyle(e="50% 50% 0px"){if(Zp.has(e))return Zp.get(e);const t=e.trim().split(" ").filter(r=>r.trim());let i=null;return t.length===1?i=[t[0],t[0]].map(r=>y.parse(r)):i=t.map(r=>y.parse(r)),Zp.set(e,i),i}static scale(e,t,i){let r=un.parseStyle(e);if(t===0&&i===0)return[0,0,0];const s=r[0].toPx(t).value,a=r[1].toPx(i).value,o=r[2].value;return[s,a,o]}static toPx(e,t,i,r=0){let[s,a,o]=un.parseStyle(e);return s=s.toPx(t),a=a.toPx(i),o=o.toPx(r),`${s} ${a} ${o}`}}function IL(n,e,t,i,r,s,a,o){return n+t>=r&&n<=r+a&&e+i>=s&&e<=s+o}class $x{constructor(e,t,i,r){this.x=e,this.y=t,this.width=i,this.height=r}get left(){return this.x}get right(){return this.x+this.width}get top(){return this.y}get bottom(){return this.y+this.height}get centerX(){return this.x+this.width/2}get centerY(){return this.y+this.height/2}get center(){return[this.centerX,this.centerY]}get topLeft(){return[this.left,this.top]}get topRight(){return[this.right,this.top]}get bottomLeft(){return[this.left,this.bottom]}get bottomRight(){return[this.right,this.bottom]}get vertices(){return[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight]}intersect(e){return nm(this,e)}}function nm(n,e){const t=Math.min(n.x,e.x),i=Math.min(n.y,e.y),r=wi(n.x-t,n.y-i,n.width,n.height),s=wi(e.x-t,e.y-i,e.width,e.height),a=[Math.max(r[0][0],s[0][0]),Math.max(r[0][1],s[0][1]),Math.max(r[0][2],s[0][2])],o=[Math.min(r[2][0],s[2][0]),Math.min(r[2][1],s[2][1]),Math.min(r[2][2],s[2][2])],l=Math.min(a[0],o[0]),c=Math.min(a[1],o[1]),h=Math.max(a[0],o[0]),d=Math.max(a[1],o[1]);return new $x(l+t,c+i,h-l,d-c)}function Lc(n,e,t,i,r,s,a=.1){const o=Math.hypot(r-n,s-e),l=Math.hypot(r-t,s-i),c=Math.hypot(n-t,e-i),h=o+l;return h>=c-a&&h<=c+a}function Px(n,e,t,i,r,s,a,o){let l=((a-r)*(e-s)-(o-s)*(n-r))/((o-s)*(t-n)-(a-r)*(i-e)),c=((t-n)*(e-s)-(i-e)*(n-r))/((o-s)*(t-n)-(a-r)*(i-e));return 0<=l&&l<=1&&0<=c&&c<=1}function LL(n,e,t,i,r,s,a,o,l=.1){return Lc(n,e,t,i,r,s)||Lc(n,e,t,i,a,o)?!0:Lc(r,s,a,o,n,e)?[n,e]:Lc(r,s,a,o,t,i)?[t,i]:Px(n,e,t,i,r,s,a,o)}function to(n=[],e,t,i=!1){let r=!1;const s=n.length;if(i===!1)for(let a=0;a{const[l,c]=a,[h,d]=n[(o+1)%s];(c>=t&&d=t)&&e<(h-l)*(t-c)/(d-c)+l&&(r=!r)}),r)}function kL(n=[],e,t,i,r,s=!1){const a=n.length;return n.some((o,l)=>{const[c,h]=o,[d,u]=n[(l+1)%a];return s?Px(e,t,i,r,c,h,d,u):LL(e,t,i,r,c,h,d,u)})}function sm(n=[],e=[],t=!1){const i=n.length;return n.some((r,s)=>{const[a,o]=r,[l,c]=n[(s+1)%i];let h=kL(e,a,o,l,c,t);return!!(h||(h=to(n,e[0][0],e[0][1],t),h))})}function wi(n,e,t,i,r="50% 50% 0px"){const s=un.scale(r,t,i);return[[n,e,0],[n+t,e,0],[n+t,e+i,0],[n,e+i,0],[n+s[0],e+s[1],0]]}function xu(n,e=0){const t=Re([],n[0],n[1],.5),i=Re([],n[2],n[3],.5);return RI(i,t,e)}function AL(n,e,t,i){return wi(n,e,t,i)}function Gc(n=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{o.originVerties.forEach(l=>{s.push(l[0]),a.push(l[1])})}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),wi(e,t,i-e,r-t)}function RL(n=[]){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{o.targetVerties.forEach(l=>{s.push(l[0]),a.push(l[1])})}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),wi(e,t,i-e,r-t)}function Yi(n){const e=n[0][0],t=n[0][1],i=Fe(n[0],n[1]),r=Fe(n[0],n[3]);return new $x(e,t,i,r)}function ra(n=[]){const e=[];for(var t=0;tt<4)}function xn(n){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;const s=[],a=[];return n.forEach(o=>{s.push(o[0]),a.push(o[1])}),e=Math.min.apply(Math,s),i=Math.max.apply(Math,s),t=Math.min.apply(Math,a),r=Math.max.apply(Math,a),e===Number.MAX_SAFE_INTEGER&&(e=0),t===Number.MAX_SAFE_INTEGER&&(t=0),i===Number.MIN_SAFE_INTEGER&&(i=0),r===Number.MIN_SAFE_INTEGER&&(r=0),wi(e,t,i-e,r-t)}const OL={linear:!0,ease:!0,"ease-in":!0,"ease-out":!0,"ease-in-out":!0},zL={ease:"cubic-bezier(0.25, 0.1, 0.25, 1)","ease-in":"cubic-bezier(0.42, 0, 1, 1)","ease-out":"cubic-bezier(0, 0, 0.58, 1)"},sa=[[0,0,1,1,"linear",!0],[.25,.1,.25,1,"ease",!0],[.42,0,1,1,"ease-in",!0],[0,0,.58,1,"ease-out",!0],[.47,0,.745,.715,"ease-in-sine"],[.39,.575,.565,1,"ease-out-sine"],[.445,.05,.55,.95,"ease-in-out-sine"],[.55,.085,.68,.53,"ease-in-quad"],[.25,.46,.45,.94,"ease-out-quad"],[.455,.03,.515,.955,"ease-in-out-quad"],[.55,.055,.675,.19,"ease-in-cubic"],[.215,.61,.355,1,"ease-out-cubic"],[.645,.045,.355,1,"ease-in-out-cubic"],[.895,.03,.685,.22,"ease-in-quart"],[.165,.84,.44,1,"ease-out-quart"],[.77,0,.175,1,"ease-in-out-quart"],[.6,.04,.98,.335,"ease-in-circ"],[.075,.82,.165,1,"ease-out-circ"],[.785,.135,.15,.86,"ease-in-out-circ"],[.95,.05,.795,.035,"ease-in-expo"],[.19,1,.22,1,"ease-out-expo"],[1,0,0,1,"ease-in-out-expo"],[.755,.05,.855,.06,"ease-in-quint"],[.23,1,.32,1,"ease-out-quint"],[.86,0,.07,1,"ease-in-out-quint"],[.6,-.28,.735,.045,"ease-in-back"],[.175,.885,.32,1.275,"ease-out-back"],[.68,-.55,.265,1.55,"ease-in-out-back"]],qa=n=>[...Cx(zL[n]||n)],Rv=n=>{n=n.map(r=>Math.floor(r*100)/100);for(var e=0,t=sa.length;es<4).join(",")} )`};function Cx(n){if(typeof n=="string"){if(OL[n])return sa.filter(t=>t[4]===n)[0];var e=n.replace("cubic-bezier","").replace("(","").replace(")","").split(",");return e=e.map(t=>parseFloat(t.trim())),e}return n}const up=(n,e,t,i)=>{var r=[n,e,t,i];return function(s){return pp(r,s)}},Ex=(n,e,t)=>{var i=[n,e,t];return function(r){return kx(i,r)}},Ix=(n,e)=>{var t=[n,e];return function(i){return DL(t,i)}},Jp=(n,e,t,i,r)=>{var s=e(t),a=Rr(i,r,s.x,s.y);a{let e=0;return n.forEach((t,i)=>{var r=n[i+1];if(!!r){var s=Fe(Pt(t.x,t.y,0),Pt(r.x,r.y,0));e+=s}}),e},Hc=(n,e,t,i,r,s,a,o,l=1e3)=>{for(var c=up({x:n,y:e},{x:t,y:i},{x:r,y:s},{x:a,y:o}),h=0,d=c(0),u=0;u<=l;u++){var p=u/l,f=c(p);h+=Rr(d.x,d.y,f.x,f.y),d=f}return h},yl=(n,e,t,i,r,s,a=1e3)=>{for(var o=Ex({x:n,y:e},{x:t,y:i},{x:r,y:s}),l=0,c=o(0),h=0;h<=a;h++){var d=h/a,u=o(d);l+=Rr(c.x,c.y,u.x,u.y),c=u}return l},am=(n,e=10)=>{var t={minDist:1/0,minT:0};return function(i,r){for(var s=0;s<=e;s++)Jp(t,n,s/e,i,r);for(var a=1/(e*2),o=t.minT,s=0;sam(up(n,e,t,i),r),lm=(n,e,t,i=20)=>am(Ex(n,e,t),i),cm=(n,e,t=20)=>am(Ix(n,e),t),Lx=n=>{if(n==="linear"){var t={x:0,y:0},i={x:1,y:1};return Ix(t,i)}var e=Cx(n),t={x:0,y:0},i={x:e[0],y:e[1]},r={x:e[2],y:e[3]},s={x:1,y:1};return up(t,i,r,s)},er=(n,e,t)=>({x:n.x+(e.x-n.x)*t,y:n.y+(e.y-n.y)*t}),pp=(n,e)=>{var t=er(n[0],n[1],e),i=er(n[1],n[2],e),r=er(n[2],n[3],e),s=er(t,i,e),a=er(i,r,e);return er(s,a,e)},kx=(n,e)=>{var t=er(n[0],n[1],e),i=er(n[1],n[2],e);return er(t,i,e)},DL=(n,e)=>er(n[0],n[1],e),Uc=(n,e)=>{var t=er(n[0],n[1],e),i=er(n[1],n[2],e),r=er(n[2],n[3],e),s=er(t,i,e),a=er(i,r,e),o=er(s,a,e);return{first:[n[0],t,s,o],second:[o,a,r,n[3]]}},Wc=(n,e)=>{var t=er(n[0],n[1],e),i=er(n[1],n[2],e),r=er(t,i,e);return{first:[n[0],t,r],second:[r,i,n[2]]}},FL=(n,e=1)=>{for(var t=[];e>0;){const i=Uc(n,1/e);t.push(i.first),n=i.second,e--}return t},jL=(n,e=1)=>{for(var t=[];e>0;){const i=Wc(n,1/e);t.push(i.first),n=i.second,e--}return t},NL=(n,e=1)=>{var t=[];const i=1/e;for(;e>0;){const r=Xc(n,i);t.push(r.first),n=r.second,e--}return t},Xc=(n,e)=>{var t=er(n[0],n[1],e);return{first:[n[0],t],second:[t,n[1]]}},BL=n=>[yr(n[0]),[n[0][0]+(n[1][0]-n[0][0])*.33,n[0][1]+(n[1][1]-n[0][1])*.33,0],[n[0][0]+(n[1][0]-n[0][0])*.66,n[0][1]+(n[1][1]-n[0][1])*.66,0],yr(n[1])],Qp=n=>{const e=.6666666666666666;return[yr(n[0]),Pt(n[0][0]+e*(n[1][0]-n[0][0]),n[0][1]+e*(n[1][1]-n[0][1]),0),Pt(n[2][0]+e*(n[1][0]-n[2][0]),n[2][1]+e*(n[1][1]-n[2][1]),0),yr(n[2])]},Ov=(n,e,t,i,r=1e3)=>{const s=Hc(n[0],n[1],e[0],e[1],t[0],t[1],i[0],i[1],r);let a=10,o=s/a,l=0,c=[];const h=[n,e,t,i].map(d=>({x:d[0],y:d[1]}));do{c=[];let d=0;for(let u=0;u<=a;u++){const p=pp(h,d/s);c.push(p),d+=o}l=VL(c),a+=a*(s-l)/s,o=s/a}while(s-l>.25);return c.map(d=>Pt(d.x,d.y,0))},GL=n=>{const e=Pr([],n[0]),t=xa([],[3,3,3],n[1]),i=xa([],[-3,-3,-3],n[2]),r=n[3],s=bt([],bt([],e,t),bt([],i,r));return xa([],[3,3,3],s)},HL=n=>{const e=n[0],t=xa([],[-2,-2,-2],n[1]),i=n[2],r=bt([],bt([],e,t),i);return xa([],[6,6,6],r)},UL=n=>{const e=bt([],n[1],Pr([],n[0]));return xa([],[3,3,3],e)},WL=n=>{const e=GL(n),t=HL(n),i=UL(n),r=[],s=t[0]*t[0]-4*e[0]*i[0];if(!(s<0)){if(s===0){let o=-t[0]/(2*e[0]);isNaN(o)&&(o=0),0<=o&&o<=1&&r.push(o)}else if(s>0){const o=(-t[0]+Math.sqrt(s))/(2*e[0]),l=(-t[0]-Math.sqrt(s))/(2*e[0]);0<=o&&o<=1&&r.push(o),0<=l&&l<=1&&r.push(l)}}const a=t[1]*t[1]-4*e[1]*i[1];if(!(a<0)){if(a===0){let o=-t[1]/(2*e[1]);isNaN(o)&&(o=0),0<=o&&o<=1&&r.push(o)}else if(a>0){const o=(-t[1]+Math.sqrt(a))/(2*e[1]),l=(-t[1]-Math.sqrt(a))/(2*e[1]);0<=o&&o<=1&&r.push(o),0<=l&&l<=1&&r.push(l)}}return r},zv=n=>{const e=WL(n),t=n.map(i=>({x:i[0],y:i[1]}));return e.push(0,1),e.map(i=>{const{x:r,y:s}=pp(t,i);return[r,s,0]})};function To(n,e,t="rgba(0, 0, 0, 0)"){return Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),e=="hex"?YL(n):e=="rgb"?Ax(n,t):e=="hsl"?KL(n):n}function XL(n,e,t="rgba(0, 0, 0, 0)"){const i=rt(n);return i.a=1,To(i,e,t)}function YL(n){Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]});var e=n.r.toString(16);n.r<16&&(e="0"+e);var t=n.g.toString(16);n.g<16&&(t="0"+t);var i=n.b.toString(16);if(n.b<16&&(i="0"+i),n.a==1||typeof n.a=="undefined")return`#${e}${t}${i}`;{const s=Math.ceil(n.a*255);var r=s.toString(16);return s<16&&(r="0"+r),`#${e}${t}${i}${r}`}}function Ax(n,e="rgba(0, 0, 0, 0)"){if(Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),typeof n!="undefined")return n.a==1||typeof n.a=="undefined"?isNaN(n.r)?e:`rgb(${n.r},${n.g},${n.b})`:`rgba(${n.r},${n.g},${n.b},${n.a})`}function KL(n){return Array.isArray(n)&&(n={r:n[0],g:n[1],b:n[2],a:n[3]}),n.a==1||typeof n.a=="undefined"?`hsl(${n.h},${n.s}%,${n.l}%)`:`hsla(${n.h},${n.s}%,${n.l}%,${n.a})`}function Vs(n,e){return Math.floor(Math.random()*(e-n+1))+n}function qL(n=1){let e=[];for(var t=0;t$t(t[i])).map(i=>`${i}: ${t[i]}`).join(";"+e)}function rn(n="",e=";",t=":"){n=n+"";var i={};return n===""||n.split(e).forEach(r=>{var[s,...a]=r.split(t).map(o=>o.trim());s!=""&&(i[s]=a.join(t))}),i}function _i(n){return Object.keys(n||{}).map(t=>t==="class"&&hs(n[t])?`${t}="${Xn(n[t])}"`:t==="style"&&hs(n[t])?`${t}="${Zt(n[t])}"`:cs(n[t])||Bi(n[t])||n[t]==="undefined"?n[t]?t:"":`${t}="${n[t]}"`).join(" ")}function Vv(n){return n.replace(//g,">")}function yd(n,e,t=""){return n.map(e).join(t)}function dm(n,e){const t=new Set([...n,...e]);return t.size===n.length&&t.size===e.length}const Za=(n,e=30,t=30)=>{const i=qa(n);return` - M0 ${e} - C - ${i[0]*e} ${i[1]==0?t:(1-i[1])*t}, - ${i[2]*e} ${i[3]==1?0:(1-i[3])*t}, - ${e} 0 - `},pc=(n,e=30,t=30)=>{const i=qa(n);return` - M 0 ${e} - L ${i[0]*e} ${i[1]==0?t:(1-i[1])*t} - M ${e} 0 - L ${i[2]*e} ${i[3]==1?0:(1-i[3])*t} - `},ZL=n=>n,JL=(n,e=ZL)=>{const t=rt(n);return Object.keys(t).forEach(i=>{t[i]=e(t[i])}),t},QL=n=>JL(n,Math.floor);class Vr extends rm{getDefaultObject(e={}){return P({selected:!1,layers:[]},e)}isAttribute(){return!0}toCSS(){return{}}toString(){return Zt(this.toCSS())}}class pn extends Vr{static parse(e){return new pn(e)}static parseStyle(e){var t=[];if(e=e.trim(),!e)return t;var i=Ih(e);return t=i.str.split(",").filter(r=>r.trim()).map(r=>{var s=r.trim().split(" "),a=s.filter(c=>c===Vn.INSET),o=s.filter(c=>c.includes("@")).map(c=>dp(c,i.matches)),l=s.filter(c=>c!==Vn.INSET&&!c.includes("@"));return pn.parse({inset:a.length?Vn.INSET:Vn.OUTSET,color:o[0]||"rgba(0, 0, 0, 1)",offsetX:y.parse(l[0]||"0px"),offsetY:y.parse(l[1]||"0px"),blurRadius:y.parse(l[2]||"0px"),spreadRadius:y.parse(l[3]||"0px")})}),t}static join(e){return e.map(t=>pn.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"box-shadow",inset:!1,offsetX:0,offsetY:0,blurRadius:0,spreadRadius:0,color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("inset","offsetX","offsetY","blurRadius","spreadRadius","color"))}convert(e){return e=super.convert(e),bi(e.offsetX)?e.offsetX=y.px(e.offsetX):e.offsetX&&(e.offsetX=y.parse(e.offsetX)),bi(e.offsetY)?e.offsetY=y.px(e.offsetY):e.offsetY&&(e.offsetY=y.parse(e.offsetY)),bi(e.blurRadius)?e.blurRadius=y.px(e.blurRadius):e.blurRadius&&(e.blurRadius=y.parse(e.blurRadius)),bi(e.spreadRadius)?e.spreadRadius=y.px(e.spreadRadius):e.spreadRadius&&(e.spreadRadius=y.parse(e.spreadRadius)),e}toCSS(){return{"box-shadow":this.toString()}}toString(){var e=this.json;return`${e.inset===Vn.INSET?"inset ":""}${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.spreadRadius} ${e.color}`}}class ek extends ge{initState(){return{boxShadows:pn.parseStyle(this.props.value||"")}}template(){return` -
          -
          -
          - `}[me("$shadowList")+It](){var e=this.state.boxShadows.map((t,i)=>` -
          - -
          - ${W("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:i,onchange:"changeKeyValue"})} - ${W("ToggleButton",{mini:!0,key:"inset",value:t.inset,params:i,onChange:"changeKeyValue",checkedValue:Vn.INSET,toggleLabels:[ie("border_style"),ie("border_style")],toggleTitles:[Vn.INSET,Vn.INSET],toggleValues:[Vn.OUTSET,Vn.INSET]})} - - ${W("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,label:"S",key:"spreadRadius",value:t.spreadRadius,params:i,onchange:"changeKeyValue"})} -
          -
          - -
          -
          - `);return e.join("")}modifyBoxShadow(){var e=this.state.boxShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[H("add")](e=""){if(e)this.state.boxShadows=pn.parseStyle(e);else{const t=new pn({color:"black",inset:Vn.OUTSET,offsetX:2,offsetY:2,blurRadius:3,spreadRadius:1});this.state.boxShadows.push(t)}this.refresh(),this.modifyBoxShadow()}[ne("$add")](){this.trigger("add")}[wn("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$shadowList .shadow-item")+wt](){}sortItem(e,t,i){e.splice(i+(t({color:n}));var ik={title:"material amber",key:"material-amber",execute:function(){return tk}},rk=Object.freeze(Object.defineProperty({__proto__:null,default:ik},Symbol.toStringTag,{value:"Module"}));const nk=["#e3f2fd","#bbdefb","#90caf9","#64b5f6","#42a5f5","#2196f3","#1e88e5","#1976d2","#1565c0","#0d47a1","#2196f3","#82b1ff","#448aff","#2979ff","#2962ff"].map(n=>({color:n}));var sk={title:"material blue",key:"material-blue",execute:function(){return nk}},ak=Object.freeze(Object.defineProperty({__proto__:null,default:sk},Symbol.toStringTag,{value:"Module"}));const ok=["#ECEFF1","#CFD8DC","#B0BEC5","#90A4AE","#78909C","#607D8B","#546E7A","#455A64","#37474F","#263238"].map(n=>({color:n}));var lk={title:"material bluegray",key:"material-bluegray",execute:function(){return ok}},ck=Object.freeze(Object.defineProperty({__proto__:null,default:lk},Symbol.toStringTag,{value:"Module"}));const hk=["#EFEBE9","#D7CCC8","#BCAAA4","#A1887F","#8D6E63","#795548","#6D4C41","#5D4037","#4E342E","#3E2723"].map(n=>({color:n}));var dk={title:"material brown",key:"material-brown",execute:function(){return hk}},uk=Object.freeze(Object.defineProperty({__proto__:null,default:dk},Symbol.toStringTag,{value:"Module"}));const pk=["#e0f7fa","#b2ebf2","#80deea","#4dd0e1","#26c6da","#00bcd4","#00acc1","#0097a7","#00838f","#006064","#00bcd4","#84ffff","#18ffff","#00e5ff","#00b8d4"].map(n=>({color:n}));var fk={title:"material cyan",key:"material-cyan",execute:function(){return pk}},gk=Object.freeze(Object.defineProperty({__proto__:null,default:fk},Symbol.toStringTag,{value:"Module"}));const mk=["#FBE9E7","#FFCCBC","#FFAB91","#FF8A65","#FF7043","#FF5722","#F4511E","#E64A19","#D84315","#BF360C","#FF9E80","#FF6E40","#FF3D00","#DD2C00"].map(n=>({color:n}));var vk={title:"material deep orange",key:"material-deeporange",execute:function(){return mk}},yk=Object.freeze(Object.defineProperty({__proto__:null,default:vk},Symbol.toStringTag,{value:"Module"}));const xk=["#ede7f6","#d1c4e9","#b39ddb","#9575cd","#7e57c2","#673ab7","#5e35b1","#512da8","#4527a0","#311b92","#673ab7","#b388ff","#7c4dff","#651fff","#6200ea"].map(n=>({color:n}));var bk={title:"material deep purple",key:"material-deeppurple",execute:function(){return xk}},_k=Object.freeze(Object.defineProperty({__proto__:null,default:bk},Symbol.toStringTag,{value:"Module"}));const Sk=["#FAFAFA","#F5F5F5","#EEEEEE","#E0E0E0","#BDBDBD","#9E9E9E","#757575","#616161","#424242","#212121"].map(n=>({color:n}));var wk={title:"material gray",key:"material-gray",execute:function(){return Sk}},Mk=Object.freeze(Object.defineProperty({__proto__:null,default:wk},Symbol.toStringTag,{value:"Module"}));const $k=["#E8F5E9","#C8E6C9","#A5D6A7","#81C784","#66BB6A","#4CAF50","#43A047","#388E3C","#2E7D32","#1B5E20","#B9F6CA","#69F0AE","#00E676","#00C853"].map(n=>({color:n}));var Pk={title:"material green",key:"material-green",execute:function(){return $k}},Tk=Object.freeze(Object.defineProperty({__proto__:null,default:Pk},Symbol.toStringTag,{value:"Module"}));const Ck=["#e8eaf6","#c5cae9","#9fa8da","#7986cb","#5c6bc0","#3f51b5","#3949ab","#303f9f","#283593","#1a237e","#3f51b5","#8c9eff","#536dfe","#3d5afe","#304ffe"].map(n=>({color:n}));var Ek={title:"material indigo",key:"material-indigo",execute:function(){return Ck}},Ik=Object.freeze(Object.defineProperty({__proto__:null,default:Ek},Symbol.toStringTag,{value:"Module"}));const Lk=["#e1f5fe","#b3e5fc","#81d4fa","#4fc3f7","#29b6f6","#03a9f4","#039be5","#0288d1","#0277bd","#01579b","#03a9f4","#80d8ff","#40c4ff","#00b0ff","#0091ea"].map(n=>({color:n}));var kk={title:"material light blue",key:"material-lightblue",execute:function(){return Lk}},Ak=Object.freeze(Object.defineProperty({__proto__:null,default:kk},Symbol.toStringTag,{value:"Module"}));const Rk=["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E","#CCFF90","#B2FF59","#76FF03","#64DD17"].map(n=>({color:n}));var Ok={title:"material lightgreen",key:"material-lightgreen",execute:function(){return Rk}},zk=Object.freeze(Object.defineProperty({__proto__:null,default:Ok},Symbol.toStringTag,{value:"Module"}));const Vk=["#F9FBE7","#F0F4C3","#E6EE9C","#DCE775","#D4E157","#CDDC39","#C0CA33","#AFB42B","#9E9D24","#827717","#F4FF81","#EEFF41","#C6FF00","#AEEA00"].map(n=>({color:n}));var Dk={title:"material lime",key:"material-lime",execute:function(){return Vk}},Fk=Object.freeze(Object.defineProperty({__proto__:null,default:Dk},Symbol.toStringTag,{value:"Module"}));const jk=["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100","#FFD180","#FFAB40","#FF9100","#FF6D00"].map(n=>({color:n}));var Nk={title:"material orange",key:"material-orange",execute:function(){return jk}},Bk=Object.freeze(Object.defineProperty({__proto__:null,default:Nk},Symbol.toStringTag,{value:"Module"}));const Gk=["#fce4ec","#f8bbd0","#f48fb1","#f06292","#ec407a","#e91e63","#d81b60","#c2185b","#ad1457","#880e4f","#e91e63","#ff80ab","#ff4081","#f50057","#c51162"].map(n=>({color:n}));var Hk={title:"material pink",key:"material-pink",execute:function(){return Gk}},Uk=Object.freeze(Object.defineProperty({__proto__:null,default:Hk},Symbol.toStringTag,{value:"Module"}));const Wk=["#f3e5f5","#e1bee7","#ce93d8","#ba68c8","#ab47bc","#9c27b0","#8e24aa","#7b1fa2","#6a1b9a","#4a148c","#9c27b0","#ea80fc","#e040fb","#d500f9","#aa00ff"].map(n=>({color:n}));var Xk={title:"material purple",key:"material-purple",execute:function(){return Wk}},Yk=Object.freeze(Object.defineProperty({__proto__:null,default:Xk},Symbol.toStringTag,{value:"Module"}));const Kk=["#ffebee","#ffcdd2","#ef9a9a","#e57373","#ef5350","#f44336","#e53935","#d32f2f","#c62828","#b71c1c","#f44336","#ff8a80","#ff5252","#ff1744","#d50000"].map(n=>({color:n}));var qk={title:"material red",key:"material-red",execute:function(){return Kk}},Zk=Object.freeze(Object.defineProperty({__proto__:null,default:qk},Symbol.toStringTag,{value:"Module"}));const Jk=["#e0f2f1","#b2dfdb","#80cbc4","#4db6ac","#26a69a","#009688","#00897b","#00796b","#00695c","#004d40","#009688","#a7ffeb","#64ffda","#1de9b6","#00bfa5"].map(n=>({color:n}));var Qk={title:"material teal",key:"material-teal",execute:function(){return Jk}},eA=Object.freeze(Object.defineProperty({__proto__:null,default:Qk},Symbol.toStringTag,{value:"Module"}));const tA=["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17","#FFFF8D","#FFFF00","#FFEA00","#FFD600"].map(n=>({color:n}));var iA={title:"material yellow",key:"material-yellow",execute:function(){return tA}},rA=Object.freeze(Object.defineProperty({__proto__:null,default:iA},Symbol.toStringTag,{value:"Module"}));const nA=["#f8f9fa","#f1f3f5","#e9ecef","#dee2e6","#ced4da","#adb5bd","#868e96","#495057","#343a40","#212529"].map(n=>({color:n}));var sA={title:"opencolor gray",resource:"https://yeun.github.io/open-color/",key:"opencolor-gray",execute:function(){return nA}},aA=Object.freeze(Object.defineProperty({__proto__:null,default:sA},Symbol.toStringTag,{value:"Module"}));function Rx(n,e,t){if(arguments.length==1)var{h:n,s:e,v:t}=arguments[0];var i=n,r=e,s=t;i>=360&&(i=0);const a=r*s,o=a*(1-Math.abs(i/60%2-1)),l=s-a;let c=[];return 0<=i&&i<60?c=[a,o,0]:60<=i&&i<120?c=[o,a,0]:120<=i&&i<180?c=[0,a,o]:180<=i&&i<240?c=[0,o,a]:240<=i&&i<300?c=[o,0,a]:300<=i&&i<360&&(c=[a,0,o]),{r:Xt((c[0]+l)*255),g:Xt((c[1]+l)*255),b:Xt((c[2]+l)*255)}}function oA(n,e,t){if(arguments.length==1)var{h:n,s:e,v:t}=arguments[0];const i=Rx(n,e,t);return na(i.r,i.g,i.b)}function Ox(n,e,t=.5,i="hex"){var r=lA(n,e,t);return To(r,i)}function lA(n,e,t=.5){const i=typeof n.a=="undefined"?1:n.a,r=typeof e.a=="undefined"?1:e.a;return{r:Xt(n.r+(e.r-n.r)*t),g:Xt(n.g+(e.g-n.g)*t),b:Xt(n.b+(e.b-n.b)*t),a:Xt(i+(r-i)*t,100)}}function cA(n,e,t=.5,i="hex"){var r=Si(n),s=Si(e);return Ox(r,s,t,i)}function ml(n,e,t=.5,i="hex"){return cA(n,e,t,i)}const Ja=[{rgb:"#ff0000",start:0},{rgb:"#ffff00",start:.17},{rgb:"#00ff00",start:.33},{rgb:"#00ffff",start:.5},{rgb:"#0000ff",start:.67},{rgb:"#ff00ff",start:.83},{rgb:"#ff0000",start:1}];function hA(n){for(var e,t,i=0;i=n){e=Ja[i-1],t=Ja[i];break}return e&&t?ml(e,t,(n-e.start)/(t.start-e.start)):Ja[0].rgb}function dA(){for(var n=0,e=Ja.length;n({color:t}));return e.sort((t,i)=>{const r=Si(t.color),s=Si(i.color);return r.h>s.h?1:-1}),e}},pA=Object.freeze(Object.defineProperty({__proto__:null,default:uA},Symbol.toStringTag,{value:"Module"}));const fA={"./colors_list/material-amber.js":rk,"./colors_list/material-blue.js":ak,"./colors_list/material-bluegray.js":ck,"./colors_list/material-brown.js":uk,"./colors_list/material-cyan.js":gk,"./colors_list/material-deeporange.js":yk,"./colors_list/material-deeppurple.js":_k,"./colors_list/material-gray.js":Mk,"./colors_list/material-green.js":Tk,"./colors_list/material-indigo.js":Ik,"./colors_list/material-lightblue.js":Ak,"./colors_list/material-lightgreen.js":zk,"./colors_list/material-lime.js":Fk,"./colors_list/material-orange.js":Bk,"./colors_list/material-pink.js":Uk,"./colors_list/material-purple.js":Yk,"./colors_list/material-red.js":Zk,"./colors_list/material-teal.js":eA,"./colors_list/material-yellow.js":rA,"./colors_list/opencolor-gray.js":aA,"./colors_list/random.js":pA};var gA=Object.values(fA).map(n=>n.default);class mA extends ge{initState(){return{mode:"grid",preset:"random",isLoaded:!1,colors:gA}}getTools(){return'
          '}[me("$tools")](){const e=this.state.colors.map(t=>({value:t.key,text:t.title}));return W("SelectEditor",{key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[H("changePreset")](e,t){this.setState({[e]:t})}template(){return` -
          -
          -
          ${this.getTools()}
          -
          -
          -
          - `}[ne("$title")](){this.$el.toggleClass("is-open")}[me("$colorList")](){var e=this.state.colors.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>`
          `);return t}executeColor(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshColorAssets")):window.alert("Please select a project.")}[ne("$colorList .preview")](e){const t=e.$dt.$(".color-view").css("background-color");this.modifyColorPicker(t)}modifyColorPicker(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.props.params)}}class vA extends ge{initState(){return{params:this.props.params,color:this.props.color||"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyColor()}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.color,this.state.params)}changeColor(e){this.setState({color:e})}setValue(e){this.changeColor(e)}[Me("$miniView")](){return{style:{"background-color":this.state.color}}}template(){return` -
          -
          -
          -
          -
          -
          -
          - `}[ne("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.refs.$miniView.cssText(`background-color: ${e}`),this.updateData({color:e})},color:this.state.color})}}class yA extends ge{initState(){const e=this.props.value||"rgba(0, 0, 0, 1)",t=cs(this.props.compact)?this.props.compact:this.props.compact==="true",i=cs(this.props.mini)?this.props.mini:this.props.mini==="true";return{label:this.props.label,value:e,compact:t,mini:i,color:Si(e),colorFocus:!1,opacityFocus:!1}}updateData(e={}){this.setState(e),this.modifyColor()}updateEndData(e={}){this.setState(e),this.modifyEndColor()}getValue(){return this.state.value}setValue(e){this.changeColor(e)}modifyColor(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}modifyEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}changeColor(e){this.setState({value:e,color:Si(e)})}get alpha(){return this.state.color.a*100}get hexColor(){return XL(this.state.color,"hex")}get fullColor(){return To(this.state.color,this.state.color.type)}refresh(){this.refreshColorView(),this.refs.$colorCode.val(this.state.value),this.refs.$opacityCode.val(this.alpha)}refreshColorView(){this.bindData("$miniView1"),this.bindData("$miniView2")}template(){var{label:e,compact:t,mini:i}=this.state,r=e?"has-label":"",s=t?"compact":"",a=i?"mini":"";return` -
          - ${e?``:""} -
          -
          -
          -
          -
          -
          -
          -
          - -
          -
          - -
          -
          -
          - `}[Me("$el")](){return{class:{focused:this.state.colorFocus||this.state.opacityFocus}}}[Me("$miniView1")](){return{style:{"background-color":this.hexColor}}}[Me("$miniView2")](){return{style:{"background-color":this.fullColor}}}[Me("$colorCode")](){return{value:this.props.format?this.hexColor:this.state.value}}[Me("$opacityCode")](){return{value:this.alpha}}[Tu("$colorCode")](){this.setState({colorFocus:!0}),this.refs.$colorCode.select()}[wo("$colorCode")](){this.setState({colorFocus:!1})}[Tu("$opacityCode")](){this.setState({opacityFocus:!0}),this.refs.$opacityCode.select()}[wo("$opacityCode")](){this.setState({opacityFocus:!1})}[ne("$preview")](){this.viewColorPicker()}viewColorPicker(){this.emit("showColorPickerPopup",{target:this,changeEvent:e=>{this.updateData({value:e,color:Si(e)})},changeEndEvent:e=>{this.updateEndData({value:e,color:Si(e)})},color:this.state.value},null,this.$el.rect())}[ne("$remove")](){this.updateData({value:""})}[di("$el .color-input input")](e){var t=e.$dt.value;this.updateData({value:t,color:Si(t)}),this.refreshColorView()}[di("$el .opacity-input input")](e){var t=+e.$dt.value;t=Math.max(0,Math.min(100,t));const i=Si(this.state.value);i.a=Xt(t/100,1e3);const r=To(i,i.type);this.updateData({value:r,color:i}),this.refreshColorView()}}class xA extends ge{initState(){return{inspector:this.props.inspector}}template(){return` -
          - `}getPropertyEditor(e,t){return t.type==="folder"?` -
          - -
            - ${t.children.map((i,r)=>`
          • ${this.getPropertyEditor(`${e}${r}`,i)}
            • `).join("")} -
          -
          - `:t.type==="column"?` -
          - ${t.columns.map((r,s)=>r==="-"?'
          ':r.type==="label"?`
          - -
          `:` -
          - ${this.getPropertyEditor(`${e}${s}`,r)} -
          - `).join("")} -
          - `:W(t.editor,ze(P({},t.editorOptions),{onchange:(i,r)=>{const s=Ye(t.convert)?t.convert(i,r):r;this.trigger("changeComponentValue",i,s)},ref:`${t.key}${e}`,key:t.key,value:t.defaultValue}))}[me("$body")](){var t=this.state.inspector.map((i,r)=>gi(i)||i.type==="label"?` -
          - -
          `:i.type==="folder"?` -
          - ${this.getPropertyEditor(r,i)} -
          - `:` -
          - ${this.getPropertyEditor(r,i)} -
          - `);return t}setInspector(e){this.setState({inspector:e})}setValue(e={}){Object.keys(e).forEach(t=>{const i=e[t];this.eachChildren(r=>{r.setValue&&r.props.key===t&&r.setValue(i)})})}getValue(){const e={};return this.eachChildren(t=>{Ye(t.getValue)&&t.props.key&&(e[t.props.key]=t.getValue())}),e}[we("changeComponentValue")](e,t){this.parent.trigger(this.props.onchange,e,t)}[ne("$el .component-folder > label")](e){e.$dt.closest("component-folder").toggleClass("close")}}class bA extends ge{initState(){return{hideTitle:this.props["hide-title"]==="true",hideRefresh:this.props["hide-refresh"]==="true",properties:[]}}updateData(e){this.setState(e,!1),this.modifyProperty()}modifyProperty(){this.parent.trigger(this.props.onchange,this.state.properties)}template(){const e=this.state.hideTitle?"hide-title":"",t=this.state.hideRefresh?"hide-refresh":"";return` -
          -
          - -
          - ${this.makePropertySelect()} - -
          -
          -
          -
          - `}getPropertyDefaultValue(e){switch(e){case"animation-timing-function":case"box-shadow":case"text-shadow":case"color":case"background-image":case"background-color":case"text-fill-color":case"text-stroke-color":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"playTime":return y.string("");case"offset-distance":return y.percent(0);case"rotate":return y.deg(0);case"mix-blend-mode":return"normal";case"clip-path":return"";case"opacity":return 1;default:return 0}}[ne("$addProperty")](){var e=this.getRef("$propertySelect").value,t=this.state.properties.find(s=>s.key===e);if(t){window.alert(`${e} is already added.`);return}var i=this.getPropertyDefaultValue(e),r=this.$context.selection.current;r&&(i=r[e]),this.state.properties.push({key:e,value:i}),this.refresh(),this.modifyProperty()}makeIndivisualPropertyColorEditor(e,t){var i=e.key.split("-").join("");return` -
          - - - `}makeCustomePropertyEditor(e,t){return` -
          - ${W(e.editor,{onchange:"changeSelect",ref:`$customProperty${t}`,key:e.key,value:e.value})} -
          - `}makeIndivisualPropertyEditor(e,t){return e.key==="background-image"?` -
          - ${W("BackgroundImageEditor",{ref:`$backgroundImage${t}`,key:e.key,"hide-title":this.state.hideTitle,value:e.value,onchange:"changeKeyValue"})} -
          - `:e.key==="filter"?` -
          - - - `:e.key==="backdrop-filter"?` -
          - - - `:e.key==="box-shadow"?` -
          - - - `:e.key==="text-shadow"?` -
          - - - `:e.key==="var"?` -
          - - - `:e.key==="transform"?` -
          - - - `:e.key==="transform-origin"?` -
          - - - `:e.key==="perspective-origin"?` -
          - - - `:e.key==="fill-rule"?` -
          - - - `:e.key==="stroke-linecap"?` -
          - - - `:e.key==="stroke-linejoin"?` -
          - - - `:e.key==="mix-blend-mode"?` -
          - - - `:e.key==="stroke-dasharray"?` - - `:e.key==="border-radius"?` - - `:e.key==="border"?` - - `:e.key==="clip-path"?` - - `:e.key==="d"?` - - `:e.key==="points"?` - - `:e.key==="playTime"?` - - `:` -
          - ??? - -
          - `}[we("changeKeyValue")](e,t){this.modifyPropertyValue(e,t)}[we("changeBorderRadius")](e){this.modifyPropertyValue("border-radius",e)}[we("changeClipPath")](e){this.modifyPropertyValue("clip-path",e)}[we("changeColorProperty")](e,t){this.modifyPropertyValue(e,t)}[we("changeBackgroundImageProperty")](e,t){this.modifyPropertyValue(e,t)}[we("changeFilterProperty")](e){this.modifyPropertyValue("filter",e)}[we("changeBackdropFilterProperty")](e){this.modifyPropertyValue("backdrop-filter",e)}[we("changeBoxShadowProperty")](e){this.modifyPropertyValue("box-shadow",e)}[we("changeTextShadowProperty")](e){this.modifyPropertyValue("text-shadow",e)}[we("changeVar")](e){this.modifyPropertyValue("var",e)}[we("changeTransform")](e){this.modifyPropertyValue("transform",e)}[we("changeTransformOrigin")](e){this.modifyPropertyValue("transform-origin",e)}[we("changePerspectiveOrigin")](e){this.modifyPropertyValue("perspective-origin",e)}[we("changeSelect")](e,t){this.modifyPropertyValue(e,t)}makePropertyEditor(e,t){if(e.editor)return this.makeCustomePropertyEditor(e,t);switch(e.key){case"animation-timing-function":case"box-shadow":case"text-shadow":case"background-image":case"filter":case"backdrop-filter":case"var":case"transform":case"transform-origin":case"perspective-origin":case"mix-blend-mode":case"border":case"border-radius":case"clip-path":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"stroke-dasharray":case"d":case"points":case"offset-path":case"playTime":return this.makeIndivisualPropertyEditor(e,t);case"color":case"background-color":case"text-fill-color":case"text-stroke-color":case"stroke":case"fill":return this.makeIndivisualPropertyColorEditor(e,t);case"opacity":case"fill-opacity":case"stroke-dashoffset":case"offset-distance":let i=0,r=1,s=.01;return` -
          - - - `;case"rotate":return` -
          - - - `;case"left":case"margin-top":case"margin-bottom":case"margin-left":case"margin-right":case"padding-top":case"padding-bottom":case"padding-left":case"padding-right":case"width":case"height":case"perspective":case"text-stroke-width":default:return` -
          - - - `}}[we("changeRangeEditor")](e,t){this.modifyPropertyValue(e,t+"")}searchKey(e,t){this.state.properties.filter(i=>i.key===e).forEach(t)}modifyPropertyValue(e,t){this.searchKey(e,i=>{i.value=t}),this.modifyProperty()}makePropertySelect(){return` - - `}[me("$property")](){return this.state.properties.map((e,t)=>` -
          -
          - -
          - -
          -
          -
          -
          - -
          -
          -
          - ${this.makePropertyEditor(e,t)} -
          -
          - `)}[H("showCSSPropertyEditor")](e=[]){this.setState({properties:e}),this.refresh()}[ne("$property .remove")](e){var t=+e.$dt.attr("data-index");this.state.properties.splice(t,1),this.refresh(),this.modifyProperty()}[ne("$property .refresh")](){this.parent.trigger("refreshPropertyValue")}}class _A extends ge{initState(){return{key:this.props.key,currentBezier:qa(this.props.value||"linear"),isAnimating:Bi(this.props.isAnimating)?!0:Boolean(this.props.isAnimating),currentBezierIndex:0,selectedColor:"#609de2",animatedColor:"#609de266",curveColor:"#609de2",baseLineColor:"rgba(117, 117, 117, 0.46)"}}afterRender(){window.setTimeout(()=>{this.refresh()},10)}template(){const e=Za(this.state.currentBezier,150,150),t=pc(this.state.currentBezier,150,150),i=Za("ease",30,30),r=pc("ease",30,30),s=Za("ease-in",30,30),a=pc("ease-in",30,30),o=Za("ease-out",30,30),l=pc("ease-out",30,30);return` -
          -
          -
          ${Ue.chevron_left}
          -
          -
          ${Ue.chevron_right}
          -
          -
          - -
          -
          -
          - - - - -
          -
          - - - - -
          -
          - - - - -
          -
          -
          - - - - -
          -
          -
          -
          -
          -
          - `}[Me("$animationArea")](){return{style:{display:this.state.isAnimating?"block":"none"}}}[Me("$bezierCanvas")](){return{d:Za(this.state.currentBezier,150,150)}}[Me("$bezierCanvasPoint")](){return{d:pc(this.state.currentBezier,150,150)}}updateData(e={}){this.setState(e),this.modifyCubicBezier()}modifyCubicBezier(){this.parent.trigger(this.props.onchange,this.state.key,Rv(this.state.currentBezier))}[ne("$left")](){var{currentBezier:t,currentBezierIndex:e}=this.state;e==0?e=sa.length-1:--e;var t=sa[e];this.updateData({currentBezierIndex:e,currentBezier:t}),this.refresh()}[ne("$right")](){var{currentBezier:e,currentBezierIndex:t}=this.state;t=++t%sa.length,e=sa[t],this.updateData({currentBezierIndex:t,currentBezier:e}),this.refresh()}[ne("$text")](){var e=[...sa[this.state.currentBezierIndex]];this.updateData({currentBezier:e}),this.refresh()}[ne("$itemList .item")](e){var t=e.$dt.attr("data-bezier");this.refs.$itemList.attr("data-selected-value",t);var i=qa(t);this.updateData({currentBezier:i}),this.refresh()}refresh(){this.refreshEasingText(),this.refreshBezierCanvas()}refreshBezierCanvas(){this.bindData("$bezierCanvas"),this.bindData("$bezierCanvasPoint"),this.refreshPointer(),this.drawPoint()}refreshEasingText(){this.refs.$text.html(this.state.currentBezier[4]||"ease")}refreshPointer(){var e=qa(this.state.currentBezier),t=this.refs.$control.width(),i=this.refs.$control.height(),r=e[0]*t,s=(1-e[1])*i;this.refs.$pointer1.css({left:y.px(r),top:y.px(s)}),r=e[2]*t,s=(1-e[3])*i,this.refs.$pointer2.css({left:y.px(r),top:y.px(s)})}drawPoint(){this.state.isAnimating!==!1&&(this.timer&&window.clearTimeout(this.timer),this.animationTimer&&window.clearTimeout(this.animationTimer),this.timer=window.setTimeout(()=>{this.animationPoint()},100))}start(e){var t=this.animationCanvasData.func(e),i=10+(this.animationCanvasData.width-20)*t.y,r=10,s=this.animationCanvasData.context;s.beginPath(),s.arc(i,r,5,0,2*Math.PI),s.fill(),s.stroke(),s.closePath(),!(e>=1)&&(this.animationTimer=window.setTimeout(()=>{this.start(e+.05)},50))}animationPoint(){const e=qa(this.state.currentBezier);var t=Lx(Rv(e));this.refs.$animationCanvas.clear();var i=this.refs.$animationCanvas.width(),r=this.refs.$animationCanvas.height(),s=this.refs.$animationCanvas.context();s.fillStyle=this.state.animatedColor,s.strokeStyle=this.state.selectedColor,s.lineWidth=1,this.animationCanvasData={func:t,width:i,height:r,context:s},this.start(0)}setPosition(e){var t=this.refs.$control.width(),i=this.refs.$control.height(),r=this.refs.$control.offset().left,s=this.refs.$control.offset().top,a=e,o=a.x;0>o?o=0:a.x>document.body.clientWidth&&(o=document.body.clientWidth),o-=r,o<0&&(o=0),to.trim()).map(o=>y.parse(o)),i=y.percent(0),r=y.percent(0),s=y.percent(0),a=y.percent(0);return t.length===1?(i=t[0].clone(),r=t[0].clone(),s=t[0].clone(),a=t[0].clone()):t.length===2?(i=t[0].clone(),r=t[1].clone(),s=t[0].clone(),a=t[1].clone()):t.length===3?(i=t[0].clone(),r=t[1].clone(),s=t[2].clone(),a=t[1].clone()):t.length===4&&(i=t[0].clone(),r=t[1].clone(),s=t[2].clone(),a=t[3].clone()),[t.length,i,r,s,a]}}const Dv=[{key:"top",title:"Top"},{key:"right",title:"Right"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"}];class SA extends ge{initState(){var[e,t,i,r,s]=wg.parse(this.props.value);return{isAll:e===1,all:t.clone(),top:t.clone(),right:i.clone(),bottom:r.clone(),left:s.clone()}}template(){return"
          "}[H("changeBorderRadius")](e,t){e==="all"&&Dv.forEach(i=>{this.state[i.key]=t.clone(),this.children[`$${i.key}`].setValue(t.clone())}),this.updateData({[e]:t})}[me("$body")](){var e=this.state.isAll?"all":"partitial",t=this.state.all,i=e==="all"?"display:none":"display:block";return` -
          -
          - - -
          -
          - ${W("RangeEditor",{ref:"$all",key:"all",value:t,onchange:"changeBorderRadius"})} -
          -
          -
          -
          - ${Dv.map(r=>{var s=this.state[r.key];return` -
          - ${W("RangeEditor",{ref:`$${r.key}`,label:r.title,key:r.key,value:s,onchange:"changeBorderRadius"})} -
          - `}).join("")} -
          -
          - `}updateData(e={}){this.setState(e,!1);var t=[];this.state.isAll?t=[1,this.state.all,this.state.all,this.state.all,this.state.all]:t=[4,this.state.top,this.state.right,this.state.bottom,this.state.left],this.parent.trigger(this.props.onchange,t)}[ne("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.updateData({isAll:t==="all"})}}const wA=/((blur|grayscale|drop-shadow|hue-rotate|invert|brightness|contrast|opacity|saturate|sepia|url)\(([^)]*)\))/gi;class ir extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"filter"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=MA[e.type];return t?new t(e):new ql({value:e.value})}static parseStyle(e){var t=[];if(!e)return t;var i=Ih(e),r=i.str.match(wA)||[];return r.forEach((s,a)=>{var[o,l]=s.split("(");if(l=l.split(")")[0],o==="drop-shadow"){var c=l.split(" "),h=c.filter(u=>u.includes("@")).map(u=>dp(u,i.matches)),d=c.filter(u=>!u.includes("@"));t[a]=ir.parse({type:o,offsetX:y.parse(d[0]),offsetY:y.parse(d[1]),blurRadius:y.parse(d[2]),color:h[0]||"rgba(0, 0, 0, 1)"})}else t[a]=ir.parse({type:o,value:y.parse(l)})}),t}static join(e){return e.map(t=>ir.parse(t)).join(" ")}}class Lh extends ir{getDefaultObject(){return super.getDefaultObject({type:"blur",value:Lh.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}}Lh.spec={inputType:"range",min:0,max:100,step:1,unit:"px",units:["px","em"],defaultValue:"0px"};class ql extends ir{getDefaultObject(){return super.getDefaultObject({type:"svg",value:ql.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}toString(){return`url(#${this.json.value||""})`}}ql.spec={inputType:"select",defaultValue:""};class kh extends ir{getDefaultObject(){return super.getDefaultObject({type:"grayscale",value:kh.spec.defaultValue})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}}kh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class Ah extends ir{getDefaultObject(){return super.getDefaultObject({type:"hue-rotate",value:Ah.spec.defaultValue})}}Ah.spec={inputType:"range",min:0,max:360,step:1,unit:"deg",units:["deg"],defaultValue:y.deg(0)};class Rh extends ir{getDefaultObject(){return super.getDefaultObject({type:"invert",value:Rh.spec.defaultValue})}}Rh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class Oh extends ir{getDefaultObject(){return super.getDefaultObject({type:"brightness",value:Oh.spec.defaultValue})}}Oh.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class zh extends ir{getDefaultObject(){return super.getDefaultObject({type:"contrast",value:zh.spec.defaultValue})}}zh.spec={inputType:"range",min:0,max:200,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class Vh extends ir{getDefaultObject(){return super.getDefaultObject({type:"opacity",value:Vh.spec.defaultValue})}}Vh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class Dh extends ir{getDefaultObject(){return super.getDefaultObject({type:"saturate",value:Dh.spec.defaultValue})}}Dh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(100)};class Fh extends ir{getDefaultObject(){return super.getDefaultObject({type:"sepia",value:Fh.spec.defaultValue})}}Fh.spec={inputType:"range",min:0,max:100,step:1,unit:"%",units:["%"],defaultValue:y.percent(0)};class ha extends ir{getDefaultObject(){return super.getDefaultObject({type:"drop-shadow",multi:!0,offsetX:ha.spec.offsetX.defaultValue,offsetY:ha.spec.offsetY.defaultValue,blurRadius:ha.spec.blurRadius.defaultValue,color:ha.spec.color.defaultValue})}toString(){var e=this.json;return`drop-shadow(${e.offsetX} ${e.offsetY} ${e.blurRadius} ${e.color})`}}ha.spec={offsetX:{title:"Offset X",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},offsetY:{title:"Offset Y",inputType:"range",min:-100,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em"]},blurRadius:{title:"Blur Radius",inputType:"range",min:0,max:100,step:1,defaultValue:"0px",unit:"px",units:["px","em","%"]},color:{title:"Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)",unit:"color"}};const MA={blur:Lh,grayscale:kh,"hue-rotate":Ah,invert:Rh,brightness:Oh,contrast:zh,opacity:Vh,saturate:Dh,sepia:Fh,"drop-shadow":ha,svg:ql},$A=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];var PA={blur:Lh.spec,grayscale:kh.spec,"hue-rotate":Ah.spec,invert:Rh.spec,brightness:Oh.spec,contrast:zh.spec,"drop-shadow":ha.spec,opacity:Vh.spec,saturate:Dh.spec,sepia:Fh.spec,svg:ql.spec};class TA extends ge{initState(){return{hideLabel:this.props.hideLabel==="true",filters:ir.parseStyle(this.props.value)}}template(){return` -
          -
          -
          `}[me("$filterSelect")](){var e=$A.map(r=>({title:r,value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSpec(e){return PA[e]}makeDropShadowFilterTemplate(e,t,i){return` -
          -
          - - ${this.$i18n("filter.property.drop-shadow")} -
          - -
          -
          -
          - ${lp(["ColorViewEditor",{ref:`$dropShadowColorView${i}`,params:i,compact:!0,value:t.color,onchange:"changeDropShadowColor"}],...["offsetX","offsetY","blurRadius"].map(r=>["InputRangeEditor",{ref:`$${r}${i}`,label:this.$i18n(`filter.property.drop-shadow.${r}`),key:i,min:e[r].min,max:e[r].max,step:e[r].step,params:r,value:t[r].value||e[r].defaultValue,units:e[r].units,onchange:"changeRangeEditor"}]))} -
          - -
          - `}getSVGFilterList(){var e=this.$context.selection.current,t=[];return e&&(t=e.svgfilters.map(i=>({title:`svg - #${i.id}`,value:i.id}))),t}makeOneFilterEditor(e,t,i){if(t.type==="svg"){var r="",s=this.$context.selection.current;return s&&(r=s.svgfilters.map(a=>({value:a.id}))),W("SelectEditor",{ref:`$select${e}`,key:e,label:"SVG Filter",value:t.value,options:["",...r],onchange:"changeRangeEditor"})}return W("InputRangeEditor",{ref:`$range${e}_${t.type}`,label:this.$i18n("filter.property."+t.type),key:e,min:i.min,max:i.max,value:t.value,units:i.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t,i){return` -
          -
          - - ${t.type!="svg"?` -
          - ${this.makeOneFilterEditor(i,t,e)} -
          - `:` -
          - ${t.value} -
          - `} -
          - -
          -
          -
          - `}makeFilterTemplate(e,t){return e.type==="drop-shadow"?this.makeDropShadowFilterTemplate(this.getSpec(e.type),e,t):this.makeOneFilterTemplate(this.getSpec(e.type),e,t)}[me("$filterList")](){return this.state.filters.map((e,t)=>this.makeFilterTemplate(e,t.toString()))}[wn("$filterList .filter-item > .title > label")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$filterList .filter-item > .title > label")+wt](){}sortItem(e,t,i){e.splice(i+(t{var s=this.$context.selection.current;s&&(s.setSVGFilterValue(r.index,{filters:r.filters}),this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.pack("svgfilters","filter")))},index:e,preview:!1,filters:i.filters})}[we("add")](e){if(e==="svg"){const t=this.$context.selection.current.createSVGFilter({filters:[]}),i=this.$context.selection.current.svgfilters[t];this.state.filters.push(this.makeFilter(e,{value:i.id})),this.refresh(),this.modifyFilter(),this.trigger("openSVGFilterPopup",t)}else this.state.filters.push(this.makeFilter(e)),this.refresh(),this.modifyFilter()}[ne("$add")](){var e=this.refs.$filterSelect.value;this.trigger("add",e)}[ne("$filterList .filter-menu .del")](e){var t=+e.$dt.attr("data-index");this.state.filters.splice(t,1),this.refresh(),this.modifyFilter()}[we("changeDropShadowColor")](e,t,i){var r=+i;this.state.filters[r].reset({color:t}),this.modifyFilter()}[we("changeRangeEditor")](e,t,i){i?this.state.filters[+e].reset({[i]:t}):this.state.filters[+e].reset({value:t}),this.modifyFilter()}}const CA=["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"];class EA extends im{getFontList(){return CA.map(e=>({value:e}))}initState(){return ze(P({},super.initState()),{options:this.getFontList()})}}const IA=/(([-]?[\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?)|#(?:[\da-f]{8})|(#(?:[\da-f]{3}){1,2}|([a-z_-]+)\([^()]+\)|([a-z_-]+))|(,)/gi,LA=/^[-]?([\d.]+)(px|pt|fr|r?em|deg|vh|vw|m?s|%|g?rad|turn)?$/gi,kA=/^[a-z_-]+$/gi,zx=[de.STATIC,de.LINEAR,de.RADIAL,de.CONIC,de.REPEATING_CONIC,de.REPEATING_LINEAR,de.REPEATING_RADIAL],Vx=[Ze.LINEAR,Ze.EASE,Ze.EASE_IN,Ze.EASE_OUT,Ze.EASE_IN_OUT],AA=n=>{if(n===",")return"comma";if(n.indexOf("#")===0)return"hex";if(Lu.isColorName(n))return"color";if(zx.includes(n)||Vx.includes(n))return n;if(n.match(LA))return"length";if(n.match(kA))return"keyword"},RA=(n,e,t="(",i=")")=>{const r=[];for(var s=e;s0?-1:s+1},Fv=n=>zx.includes(n)?Ht.GRADIENT:Vx.includes(n)?Ht.TIMING:n==="color"||n==="hex"?Ht.COLOR:n==="length"?Ht.LENGTH:n==="comma"?Ht.COMMA:n,Fr=n=>(e,t,i="(",r=")")=>{const s=RA(t,e.startIndex,i,r);if(s===-1)return{convert:!0,funcType:Fv(n),matchedString:t,type:n,startIndex:e.startIndex,endIndex:e.startIndex+t.length};const a=t.substring(e.startIndex,s),o=a.indexOf(i)+i.length,l=t.substring(e.startIndex+o,e.startIndex+a.lastIndexOf(r)),c=e.startIndex,h=e.startIndex+a.length,d=Zl(l).map(f=>ze(P({},f),{fullTextStartIndex:e.startIndex+o+f.startIndex,fullTextEndIndex:e.startIndex+o+f.endIndex}));let u=[],p=0;return d.forEach(f=>{f.func===Ht.COMMA?p++:(u[p]||(u[p]=[]),u[p].push(f))}),{convert:!0,funcType:Fv(n),type:n,startIndex:c,endIndex:h,matchedString:a,args:l,parameters:u}},ef={length:n=>y.parse(n.matchedString),hex:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),rgb:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),rgba:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),hsl:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),hsla:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),color:n=>P({funcType:Ht.COLOR},Si(n.matchedString)),steps:n=>({funcType:Ht.TIMING,name:Ze.STEPS,count:+n.parameters[0],direction:n.parameters[1]}),path:n=>({funcType:Ht.TIMING,name:Ze.PATH,d:n.args}),repeat:n=>({funcType:Ht.REPEAT,count:+n.parameters[0],length:y.parse(n.parameters[1])}),"static-gradient":Fr("static-gradient"),"linear-gradient":Fr("linear-gradient"),"radial-gradient":Fr("radial-gradient"),"conic-gradient":Fr("conic-gradient"),"repeating-linear-gradient":Fr("repeating-linear-gradient"),"repeating-radial-gradient":Fr("repeating-radial-gradient"),"repeating-conic-gradient":Fr("repeating-conic-gradient"),"cubic-bezier":n=>({funcType:Ht.TIMING,name:Ze.CUBIC_BEZIER,matchedString:n.matchedString,x1:+n.parameters[0],y1:+n.parameters[1],x2:+n.parameters[2],y2:+n.parameters[3]}),ease:n=>({funcType:Ht.TIMING,name:Ze.EASE,matchedString:n.matchedString,x1:.25,y1:.1,x2:.25,y2:1}),"ease-in":n=>({funcType:Ht.TIMING,name:Ze.EASE_IN,matchedString:n.matchedString,x1:.42,y1:0,x2:1,y2:1}),"ease-out":n=>({funcType:Ht.TIMING,name:Ze.EASE_OUT,matchedString:n.matchedString,x1:0,y1:0,x2:.58,y2:1}),"ease-in-out":n=>({funcType:Ht.TIMING,name:Ze.EASE_IN_OUT,matchedString:n.matchedString,x1:.42,y1:0,x2:.58,y2:1}),linear:n=>({funcType:Ht.TIMING,name:Ze.LINEAR,matchedString:n.matchedString,x1:0,y1:0,x2:1,y2:1})};function Zl(n,{funcStartCharacter:e="(",funcEndCharacter:t=")",parameterSaparator:i=",",customFuncMap:r={}}={}){let s=n.match(IA),a=[];if(!s)return a;function o(d,u,p){return a.some(f=>f.parsed&&Ni(f.parsed)?f.parsed.some(g=>g.startIndex===d&&g.endIndex===u&&p===g.matchedString):f.startIndex===d&&f.endIndex===u&&p===f.matchedString)}var l={next:0};s=s.map(d=>{const u=n.indexOf(d,l.next);return l.next=u+d.length,{index:u,matchedString:d}}),l.next=0;for(var c=0,h=s.length;cS.trim())}),p=x}let v;if(ef[p]?v=ef[p]||ef[f.matchedString]:(r[p]||r[f.matchedString])&&(v=r[p]||r[f.matchedString]),v){const x=v.call(null,f,n,e,t,i);x!=null&&x.convert?(f=P(P({},f),x),delete f.convert):f=ze(P({},f),{parsed:x})}a.push(f),l.next=f.endIndex}return a}function hr(n){return Zl(n)[0]}function OA(n,e="temp"){var t;return(t=Zl(`${e}(${n})`,{customFuncMap:{[e]:Fr(e)}})[0])==null?void 0:t.parameters}class ei{constructor(e={}){this.id=e.id||Xr(),this.color=e.color||"transparent",this.cut=e.cut||!1,this.percent=e.percent||0,this.unit=e.unit||"%",this.px=e.px||0,this.em=e.em||0,this.prevColorStep=e.prevColorStep||null,this.timing=e.timing||Zl("linear")[0].parsed,this.timingCount=e.timingCount||1}toCloneObject(){return{id:this.id,color:this.color,cut:this.cut,percent:this.percent,unit:this.unit,px:this.px,em:this.em,prevColorStep:this.prevColorStep,timing:this.timing,timingCount:this.timingCount}}on(){this.cut=!0}off(){this.cut=!1}toggle(){this.cut=!this.cut}toggleTiming(){switch(this.timing.name){case Ze.LINEAR:this.timing=hr("steps(1, start)").parsed;break;case Ze.STEPS:this.timing=hr("ease").parsed,this.timingCount=15;break;case Ze.EASE:case Ze.EASE_IN:case Ze.EASE_IN_OUT:case Ze.EASE_OUT:case Ze.CUBIC_BEZIER:this.timing=hr("path(M 0 0 C 0.25 0.25 0.75 0.75 1 1)").parsed,this.timingCount=15;break;default:this.timing=hr("linear").parsed,this.timingCount=1;break}}getUnit(){return this.unit=="%"?"percent":this.unit}add(e){var t=this.getUnit();return this[t]+=+e,this}sub(e){var t=this.getUnit();return this[t]-=+e,this}mul(e){var t=this.getUnit();return this[t]*=+e,this}div(e){var t=this.getUnit();return this[t]/=+e,this}mod(e){var t=this.getUnit();return this[t]%=+e,this}get isPx(){return this.unit=="px"}get isPercent(){return this.unit=="%"||this.unit==="percent"}get isEm(){return this.unit=="em"}toLength(){if(this.isPx)return y.px(this.px);if(this.isPercent)return y.percent(this.percent);if(this.isEm)return y.em(this.em)}getPrevLength(){return this.prevColorStep?this.prevColorStep.toLength():""}toString(){var e=this.cut?this.getPrevLength():"",t=this.color||"transparent";return`${t} ${e} ${this.toLength()}`}setValue(e,t){this.isPx?this.px=t*e/100:this.isPercent?this.percent=e:this.isEm&&(this.em=t*e/100/16),this.parent&&this.parent.sortColorStep()}static parse(e){let t=[];const i=Ih(e);var r=i.str.split(" ").filter(o=>o.trim());const s=+r[0].replace("@",""),a=i.matches[s].color;if(r.length===1)t.push(new ei({color:a,unit:"%",percent:0,hasNotUnit:!0}));else if(r.length===2){const o=y.parse(r[1]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new ei(P({color:a},l)))}else if(r.length===3){const o=y.parse(r[2]);let l={unit:o.unit};o.isPercent()?l.percent=o.value:o.isPx()?l.px=o.value:o.isEm()&&(l.em=o.value),t.push(new ei(P({color:a,cut:!0},l)))}return t}static createColorStep(e=2,t=100,i="%"){var r=Vs(2,e),s=t/r,a=bn(r).map((o,l)=>`${Yc()} ${l*s}${i}`).join(",");return a}static createRepeatColorStep(e=2,t=1){var i=Vs(2,e),r=bn(i).map((s,a)=>`${Yc()} ${y.parse(t).mul(a+1)}`).join(",");return r}}class um extends Vr{getDefaultObject(e={}){return P({itemType:"image-resource",type:"image"},e)}isGradient(){return!1}isLinear(){return!1}isImage(){return!1}hasAngle(){return!1}isUrl(){return!1}isFile(){return!1}isAttribute(){return!0}toString(){return"none"}}var Dx=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{};function zA(n){if(n.__esModule)return n;var e=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(n).forEach(function(t){var i=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:function(){return n[t]}})}),e}var Fx={exports:{}};(function(n,e){(function(t,i){i(n)})(Dx,function(t){function i(v,x){if(!(v instanceof x))throw new TypeError("Cannot call a class as a function")}/** - * @preserve JavaScript implementation of - * Algorithm for Automatically Fitting Digitized Curves - * by Philip J. Schneider - * "Graphics Gems", Academic Press, 1990 - * - * The MIT License (MIT) - * - * https://github.com/soswow/fit-curves - */function r(v,x,_){if(!Array.isArray(v))throw new TypeError("First argument should be an array");if(v.forEach(function(k){if(!Array.isArray(k)||k.some(function(O){return typeof O!="number"})||k.length!==v[0].length)throw Error("Each point should be an array of numbers. Each point should have the same amount of numbers.")}),v=v.filter(function(k,O){return O===0||!k.every(function(q,X){return q===v[O-1][X]})}),v.length<2)return[];var b=v.length,S=f(v[1],v[0]),C=f(v[b-2],v[b-1]);return s(v,S,C,x,_)}function s(v,x,_,b,S){var C=20,k,O,q,X,T,z,ae,j,J,Q,ee,K,re;if(v.length===2)return K=g.vectorLen(g.subtract(v[0],v[1]))/3,k=[v[0],g.addArrays(v[0],g.mulItems(x,K)),g.addArrays(v[1],g.mulItems(_,K)),v[1]],[k];O=h(v);var le=a(v,O,O,x,_,S);if(k=le[0],X=le[1],z=le[2],X===0||X.9999&&Z<1.0001)break}T=X,ae=z}if(ee=[],j=g.subtract(v[z-1],v[z+1]),j.every(function(Je){return Je===0})){j=g.subtract(v[z-1],v[z]);var ke=[-j[1],j[0]];j[0]=ke[0],j[1]=ke[1]}return J=g.normalize(j),Q=g.mulItems(J,-1),ee=ee.concat(s(v.slice(0,z+1),x,J,b,S)),ee=ee.concat(s(v.slice(z),Q,_,b,S)),ee}function a(v,x,_,b,S,C){var k,O,q;k=o(v,_,b,S);var X=d(v,k,x);return O=X[0],q=X[1],C&&C({bez:k,points:v,params:x,maxErr:O,maxPoint:q}),[k,O,q]}function o(v,x,_,b){var S,C,k,O,q,X,T,z,ae,j,J,Q,ee,K,re,le,ve,Z=v[0],ke=v[v.length-1];for(S=[Z,null,null,ke],C=g.zeros_Xx2x2(x.length),ee=0,K=x.length;eeS&&(S=b,C=O);return[S,C]}var u=function(x,_){for(var b,S=[0],C=x[0],k=0,O=1;O<=_;O++)b=m.q(x,O/_),k+=g.vectorLen(g.subtract(b,C)),S.push(k),C=b;return S=S.map(function(q){return q/k}),S};function p(v,x,_,b){if(x<0)return 0;if(x>1)return 1;for(var S,C,k,O,q,X=1;X<=b;X++)if(x<=_[X]){O=(X-1)/b,k=X/b,C=_[X-1],S=_[X],q=(x-C)/(S-C)*(k-O)+O;break}return q}function f(v,x){return g.normalize(g.subtract(v,x))}var g=function(){function v(){i(this,v)}return v.zeros_Xx2x2=function(_){for(var b=[];_--;)b.push([0,0]);return b},v.mulItems=function(_,b){return _.map(function(S){return S*b})},v.mulMatrix=function(_,b){return _.reduce(function(S,C,k){return S+C*b[k]},0)},v.subtract=function(_,b){return _.map(function(S,C){return S-b[C]})},v.addArrays=function(_,b){return _.map(function(S,C){return S+b[C]})},v.addItems=function(_,b){return _.map(function(S){return S+b})},v.sum=function(_){return _.reduce(function(b,S){return b+S})},v.dot=function(_,b){return v.mulMatrix(_,b)},v.vectorLen=function(_){return Math.hypot.apply(Math,_)},v.divItems=function(_,b){return _.map(function(S){return S/b})},v.squareItems=function(_){return _.map(function(b){return b*b})},v.normalize=function(_){return this.divItems(_,this.vectorLen(_))},v}(),m=function(){function v(){i(this,v)}return v.q=function(_,b){var S=1-b,C=g.mulItems(_[0],S*S*S),k=g.mulItems(_[1],3*S*S*b),O=g.mulItems(_[2],3*S*b*b),q=g.mulItems(_[3],b*b*b);return g.addArrays(g.addArrays(C,k),g.addArrays(O,q))},v.qprime=function(_,b){var S=1-b,C=g.mulItems(g.subtract(_[1],_[0]),3*S*S),k=g.mulItems(g.subtract(_[2],_[1]),6*S*b),O=g.mulItems(g.subtract(_[3],_[2]),3*b*b);return g.addArrays(g.addArrays(C,k),O)},v.qprimeprime=function(_,b){return g.addArrays(g.mulItems(g.addArrays(g.subtract(_[2],g.mulItems(_[1],2)),_[0]),6*(1-b)),g.mulItems(g.addArrays(g.subtract(_[3],g.mulItems(_[2],2)),_[1]),6*b))},v}();t.exports=r,t.exports.fitCubic=s,t.exports.createTangent=f})})(Fx);var VA=Fx.exports,DA=function(){function n(e,t){var i=[],r=!0,s=!1,a=void 0;try{for(var o=e[Symbol.iterator](),l;!(r=(l=o.next()).done)&&(i.push(l.value),!(t&&i.length===t));r=!0);}catch(c){s=!0,a=c}finally{try{!r&&o.return&&o.return()}finally{if(s)throw a}}return i}return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return n(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),zc=Math.PI*2,tf=function(e,t,i,r,s,a,o){var l=e.x,c=e.y;l*=t,c*=i;var h=r*l-s*c,d=s*l+r*c;return{x:h+a,y:d+o}},FA=function(e,t){var i=t===1.5707963267948966?.551915024494:t===-1.5707963267948966?-.551915024494:1.3333333333333333*Math.tan(t/4),r=Math.cos(e),s=Math.sin(e),a=Math.cos(e+t),o=Math.sin(e+t);return[{x:r-s*i,y:s+r*i},{x:a+o*i,y:o-a*i},{x:a,y:o}]},jv=function(e,t,i,r){var s=e*r-t*i<0?-1:1,a=e*i+t*r;return a>1&&(a=1),a<-1&&(a=-1),s*Math.acos(a)},jA=function(e,t,i,r,s,a,o,l,c,h,d,u){var p=Math.pow(s,2),f=Math.pow(a,2),g=Math.pow(d,2),m=Math.pow(u,2),v=p*f-p*m-f*g;v<0&&(v=0),v/=p*m+f*g,v=Math.sqrt(v)*(o===l?-1:1);var x=v*s/a*u,_=v*-a/s*d,b=h*x-c*_+(e+i)/2,S=c*x+h*_+(t+r)/2,C=(d-x)/s,k=(u-_)/a,O=(-d-x)/s,q=(-u-_)/a,X=jv(1,0,C,k),T=jv(C,k,O,q);return l===0&&T>0&&(T-=zc),l===1&&T<0&&(T+=zc),[b,S,X,T]},NA=function(e){var t=e.px,i=e.py,r=e.cx,s=e.cy,a=e.rx,o=e.ry,l=e.xAxisRotation,c=l===void 0?0:l,h=e.largeArcFlag,d=h===void 0?0:h,u=e.sweepFlag,p=u===void 0?0:u,f=[];if(a===0||o===0)return[];var g=Math.sin(c*zc/360),m=Math.cos(c*zc/360),v=m*(t-r)/2+g*(i-s)/2,x=-g*(t-r)/2+m*(i-s)/2;if(v===0&&x===0)return[];a=Math.abs(a),o=Math.abs(o);var _=Math.pow(v,2)/Math.pow(a,2)+Math.pow(x,2)/Math.pow(o,2);_>1&&(a*=Math.sqrt(_),o*=Math.sqrt(_));var b=jA(t,i,r,s,a,o,d,p,g,m,v,x),S=DA(b,4),C=S[0],k=S[1],O=S[2],q=S[3],X=Math.abs(q)/(zc/4);Math.abs(1-X)<1e-7&&(X=1);var T=Math.max(Math.ceil(X),1);q/=T;for(var z=0;zo&&(t[a].mark=!0,xe.DouglasPeuker(e,t,i,a),xe.DouglasPeuker(e,t,a,r))}static simply(e,t=10){return e.length<=2?e:(e=rt(e),e[0].mark=!0,e[e.length-1].mark=!0,xe.DouglasPeuker(t,e,0,e.length-1),e.filter(i=>Boolean(i.mark)))}static segmentDistance2(e,t,i,r){let s=r.x-i.x,a=r.y-i.y,o=s*s+a*a,l=e-i.x,c=t-i.y,h=s*l+a*c;if(o===0||h<=0)return l*l+c*c;if(h>=o)return l=e-r.x,c=t-r.y,l*l+c*c;{const d=l*a-c*s;return d*d/o}}static isInLine(e,t,i){return e.x===i.x?t.x===i.x:e.y===i.y?t.y===i.y:(e.x-i.x)*(e.y-i.y)===(i.x-t.x)*(i.y-t.y)}static isLine(e){return xe.isInLine(e.endPoint,e.startPoint,e,e.reversePoint)}static getReversePoint(e,t){const[i,r]=Re([],[t.x,t.y,0],[e.x,e.y,0],2);return{x:i,y:r}}static getIndexPoint(e,t){return e[t]}static getPoint(e,t){return e.filter(i=>xe.isEqual(i.startPoint,t))[0]}static getIndex(e,t){for(var i=-1,r=0,s=e.length;r{r.command==="M"&&t.push({point:r,index:s,groupIndex:i++})}),t}static getSplitedGroupList(e){const t=rt(e),i=[];for(var r=0,s=-1,a=t.length;rr.point.index<=t).pop()}static getGroupIndex(e,t){for(var i=-1,r=0,s=e.length;r0;r--)if(e[r].command==="M"){i=r;break}i===-1&&(i=0);var s=e[i];return s&&(s.index=i),s}static getConnectedPointList(e,t){const i=e[t];return e.filter((r,s)=>s!==t&&xe.isEqual(r.startPoint,i.startPoint))}static getPrevPoint(e,t){var i=t-1;if(i<0)return xe.getLastPoint(e,t);var r=e[i];return r&&(r.index=i),r}static getNextPoint(e,t){var i=e[t],r=e[t+1];return r&&(r.index=t+1),(i.connected||i.close)&&(r=xe.getFirstPoint(e,t)),r}static removePoint(e,t,i){if(i==="startPoint")return e.filter((r,s)=>s!==t)}static splitPoints(e){let t=[],i=[];return e.forEach(r=>{xe.isFirst(r)?(i=[r],t.push(i)):i.push(r)}),t}static recoverPoints(e){const t=[];return e.forEach(i=>{i.forEach((r,s)=>{s===0&&(r.command="M",r.originalCommand="M")}),t.push.apply(t,i)}),t.forEach((i,r)=>{i.index=r}),t}}class ut{static M(e,t){return{command:"M",values:[e,t]}}static L(e,t){return{command:"L",values:[e,t]}}static Q(e,t,i,r){return{command:"Q",values:[e,t,i,r]}}static C(e,t,i,r,s,a){return{command:"C",values:[e,t,i,r,s,a]}}static A(e,t,i,r,s,a,o){return{command:"A",values:[e,t,i,r,s,a,o]}}static Z(){return{command:"Z",values:[]}}static isMoveTo(e){return e.command==="M"}static isLineTo(e){return e.command==="L"}static isQuadraticBezierCurve(e){return e.command==="Q"}static isCubicBezierCurve(e){return e.command==="C"}static isArc(e){return e.command==="A"}static isClosePath(e){return e.command==="Z"}}const BA=/([mMlLvVhHcCsSqQtTaAzZ]([^mMlLvVhHcCsSqQtTaAzZ]*))/g;var GA=/-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;function xd(n){return{x:n[0],y:n[1]}}class be{constructor(e=""){this.reset(e)}reset(e=""){return this.segments=[],this.pathString=e.trim(),this.parse(),this}resetSegments(e){return this.segments=e||[],this.pathString=this.joinPath(),this}addSegments(e){return this.resetSegments([...this.segments,...e])}addPath(e,t=Wi()){const i=e.clone();return i.transformMat4(t),this.addSegments(i.segments)}trim(e=""){var t=e.match(GA)||[];return t.filter(i=>i!="")}parse(){var e=this.pathString.match(BA)||[];return this.segments=e.map(t=>{var i=t[0],r=this.trim(t.replace(i,"")).map(s=>+s);return{command:i,values:r}}),this.segments=this.segments.map((t,i)=>{switch(t.command){case"m":var a=this.segments[i-1];a&&(a.command=="z"||a.command=="Z")&&(a=this.segments[i-2]);for(var o=(a==null?void 0:a.values[a.values.length-2])||0,l=(a==null?void 0:a.values[a.values.length-1])||0,r=0,s=t.values.length;r{const r=this.segments[i-1];if(t.command=="A"){const s=(r==null?void 0:r.values[r.values.length-2])||0,a=(r==null?void 0:r.values[r.values.length-1])||0,[o,l,c,h,d,u,p]=t.values;be.arcToCurve(s,a,o,l,c,h,d,u,p).segments.forEach(g=>{g.command!=="M"||g.command})}}),this}convertGenerator(){for(var e=[],t=0,i=this.segments.length;t!!b),e}setSegments(e,t){this.segments[e]=t}getSegments(e){return $t(e)?this.segments[e]:this.segments}joinPath(e,t=""){var i=e||this.segments;return i.map(r=>`${r.command} ${r.values.length?r.values.join(" "):""}`).join(t)}each(e,t=!1){var i=this.segments.map((r,s)=>e.call(this,r,s));return t?i:(this.segments=i,this)}_loop(e,t=!1){return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":var a=e(r,0);i.values=[a[0],a[1]];break;case"V":var a=e([+r[0],0]);i.values=[a[0]];break;case"H":var a=e([0,+r[0]]);i.values=[a[1]];break;case"C":case"S":case"T":case"Q":for(var o=0,l=r.length;o({command:t.command,values:t.values.slice()}))),e}translate(e,t){return this.transformMat4(yi([],[e,t,0])),this}translateTo(e,t){return this.joinPath(this.transformMat4(yi([],[e,t,0]),!0))}scale(e,t){return this.transformMat4(Rn([],[e,t,1])),this}scaleTo(e,t){return this.joinPath(this.transformMat4(Rn([],[e,t,1]),!0))}scaleWith(e,t){const i=this.clone(),r=Yi(i.getBBox());i.translate(-r.x,-r.y);const s=Math.min(e/r.width,t/r.height);return i.scale(s,s).translate(e/2-r.width/2*s,t/2-r.height/2*s)}scaleFunc(e=i=>i,t=i=>i){return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":i.values=[e(r[0]),t(r[1])];break;case"C":case"Q":for(var a=0,o=r.length;a{for(let s=0,a=t.length;s{const r=[];i.segments.forEach(({segment:s},a)=>{var l;const o=(l=i.segments[a-1])==null?void 0:l.segment;if(s.command==="M"){r.push(s);return}else if(s.command==="L"){const c=BL([[o.values[o.values.length-2],o.values[o.values.length-1],0],[s.values[0],s.values[1],0]]);r.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]});return}else if(s.command==="C")r.push(s);else if(s.command==="Q"){const c=Qp([[o.values[o.values.length-2],o.values[o.values.length-1],0],[s.values[0],s.values[1],0],[s.values[2],s.values[3],0]]);r.push({command:"C",values:[c[1][0],c[1][1],c[2][0],c[2][1],c[3][0],c[3][1]]})}else s.command==="Z"&&r.push(s)}),e.push(...r)}),be.fromSegments(e)}polygonal(){const e=this.toPathList();return e.forEach(t=>{const i=[];t.segments.forEach((r,s)=>{const a=t.segments[s-1];r.command==="M"||r.command==="L"?i.push(r):r.command==="C"?i.push(...Ov([a.values[a.values.length-2],a.values[a.values.length-1],0],[r.values[0],r.values[1],0],[r.values[2],r.values[3],0],[r.values[4],r.values[5],0]).map(o=>({command:"L",values:[o[0],o[1],0]}))):r.command==="Q"?i.push(...Ov(...Qp([[a.values[a.values.length-2],a.values[a.values.length-1],0],[r.values[0],r.values[1],0],[r.values[2],r.values[3],0]])).map(o=>({command:"L",values:[o[0],o[1],0]}))):r.command==="Z"&&i.push(r)}),t.resetSegments(i)}),be.joinPathList(e)}divideSegmentByCount(e=1){let t=[];return this.getGroup().forEach(r=>{const s=[];r.segments.forEach(({segment:a},o)=>{var c;const l=(c=r.segments[o-1])==null?void 0:c.segment;a.command==="M"?s.push(a):a.command==="L"?NL([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]}],e).forEach(([,d])=>{s.push(ut.L(d.x,d.y))}):a.command==="Q"?jL([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]},{x:a.values[2],y:a.values[3]}],e).forEach(([,d,u])=>{s.push(ut.Q(d.x,d.y,u.x,u.y))}):a.command==="C"?FL([{x:l.values[l.values.length-2],y:l.values[l.values.length-1]},{x:a.values[0],y:a.values[1]},{x:a.values[2],y:a.values[3]},{x:a.values[4],y:a.values[5]}],e).forEach(([,d,u,p])=>{s.push(ut.C(d.x,d.y,u.x,u.y,p.x,p.y))}):a.command==="Z"&&s.push(a)}),t=t.concat(s)}),be.fromSegments(t)}getBBox(){let e=Number.MAX_SAFE_INTEGER,t=Number.MAX_SAFE_INTEGER,i=Number.MIN_SAFE_INTEGER,r=Number.MIN_SAFE_INTEGER;return this.each(function(s,a){var o=s.values,l=s.command;const c=this.segments[a-1];switch(l){case"M":case"L":e=Math.min(e,o[0]),i=Math.max(i,o[0]),t=Math.min(t,o[1]),r=Math.max(r,o[1]);break;case"C":zv([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0],[o[4],o[5],0]]).forEach(h=>{e=Math.min(e,h[0]),i=Math.max(i,h[0]),t=Math.min(t,h[1]),r=Math.max(r,h[1])});break;case"Q":zv(Qp([[c.values[c.values.length-2],c.values[c.values.length-1],0],[o[0],o[1],0],[o[2],o[3],0]])).forEach(h=>{e=Math.min(e,h[0]),i=Math.max(i,h[0]),t=Math.min(t,h[1]),r=Math.max(r,h[1])});break}return s}),[[e,t,0],[i,t,0],[i,r,0],[e,r,0]]}rect(){const e=this.getBBox();return{x:e[0][0],y:e[0][1],width:mr(e[0],e[1]),height:mr(e[0],e[3]),right:e[0][0]+mr(e[0],e[1]),bottom:e[0][1]+mr(e[0],e[3])}}getClosedPointInfo({x:e,y:t},i=20){let r=Number.MAX_SAFE_INTEGER,s={},a={};for(var o=1,l=this.segments.length;o[t,i,r]){const t=Yi(this.getBBox());return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":case"C":case"Q":for(var a=0,o=r.length;aXt(i,e)),t}),this}reverseSegments(e){const t=[];let i=e.length-1;for(var r=i;r>0;r--){const s=e[r],a=s.values,o=s.command,l=e[r-1],c=l.values[l.values.length-2],h=l.values[l.values.length-1];switch(o){case"L":r===i&&t.push(ut.M(a[0],a[1])),t.push(ut.L(c,h));break;case"C":r===i&&t.push(ut.M(a[4],a[5])),t.push(ut.C(a[2],a[3],a[0],a[1],c,h));break;case"Q":r===i&&t.push(ut.M(a[2],a[3])),t.push(ut.Q(a[0],a[1],c,h));break;case"Z":t.push(s),i=r-1;break}}return t[0].command==="Z"&&t.push(t.shift()),t}splitSegments(){const e=[];let t=[];return this.segments.forEach(i=>{i.command==="M"?(t=[i],e.push(t)):t.push(i)}),e}reverse(...e){const t=this.splitSegments(),i=[];return e.length===0?t.forEach(r=>{i.push.apply(i,this.reverseSegments(r))}):t.forEach((r,s)=>{e.includes(s)?i.push.apply(i,this.reverseSegments(r)):i.push.apply(i,r)}),this.resetSegments(i)}reversePathStringByFunc(e){const t=this.toPathList().map((i,r)=>e(i,r)?i.reverse():i);return be.joinPathList(t).toSVGString()}getCenterPointers(){let e=[],t=[];return this.segments.forEach((i,r)=>{var s=i.values,a=i.command;switch(a){case"M":case"L":e.push({index:r,pointer:[...i.values,0]});break;case"V":e.push({index:r,pointer:[s[0],t.pop(),0]});break;case"H":t.pop(),e.push({index:r,pointer:[t.pop(),s[0],0]});break;case"C":case"S":case"T":case"Q":e.push({index:r,pointer:[s[s.length-2],s[s.length-1],0]});break}t=rt(s)}),e}get points(){return this.getCenterPointers()}getSamePointers(e,t=0){return this.getCenterPointers().filter(i=>{if(mr(i.pointer,e)<=t)return!0})}getGroup(){const e=[];let t=[];return this.segments.forEach((i,r)=>{i.command==="M"?(t=[{index:r,segment:i}],e.push({index:r,groupIndex:e.length,segments:t})):t.push({index:r,segment:i})}),e}createGroupPath(e){var i,r;const t=new be;return t.resetSegments(((r=(i=this.getGroup()[e])==null?void 0:i.segments)==null?void 0:r.map(s=>s.segment))||[]),t}toPathList(){return this.getGroup().map(e=>be.fromSegments(e.segments.map(t=>t.segment)))}replaceSegment(e,...t){const i=[...this.segments];i.splice(e,1,...t),this.resetSegments(i)}splitSegmentByPoint(e,t=0){const i=this.getClosedPointInfo(e,t);if(i&&i.t>0&&i.t<1){switch(i.segment.command){case"C":var r=Uc(i.points,i.t),s=r.first,a=ut.C(s[1].x,s[1].y,s[2].x,s[2].y,s[3].x,s[3].y),o=r.second,l=ut.C(o[1].x,o[1].y,o[2].x,o[2].y,o[3].x,o[3].y);this.replaceSegment(i.index,a,l);break;case"Q":var r=Wc(i.points,i.t),s=r.first,a=ut.Q(s[1].x,s[1].y,s[2].x,s[2].y),o=r.second,l=ut.Q(o[1].x,o[1].y,o[2].x,o[2].y);this.replaceSegment(i.index,a,l);break;case"L":var r=Xc(i.points,i.t),s=r.first,a=ut.L(s[1].x,s[1].y),o=r.second,l=ut.L(o[1].x,o[1].y);this.replaceSegment(i.index,a,l);break;default:return}return i}}toMultiSegmentPathList(){const e=[];return this.getGroup().forEach(i=>{i.segments.forEach((r,s)=>{var d;const a=i.segments[s-1],o=((d=a==null?void 0:a.segment)==null?void 0:d.values)||[],l=o[o.length-2],c=o[o.length-1],h=r.segment.values;r.segment.command==="M"||(r.segment.command==="L"?e.push(new be(`M ${l} ${c}L ${h.join(" ")}`)):r.segment.command==="C"?e.push(new be(`M ${l} ${c}C ${h.join(" ")}`)):r.segment.command==="Q"&&e.push(new be(`M ${l} ${c}Q ${h.join(" ")}`)))})}),e}simplify(e=.1){const t=[];return this.getGroup().forEach(r=>{const s=[...r.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>({x:l.segment.values[0],y:l.segment.values[1]}))],a=xe.simply(s,e),o=[];a.forEach((l,c)=>{c===0?o.push(ut.M(l.x,l.y)):o.push(ut.L(l.x,l.y))}),t.push(...o)}),be.fromSegments(t)}smooth(e=50){let t=[];return this.getGroup().forEach(r=>{const s=[...r.segments.filter(l=>l.segment.command.toLowerCase()!=="z").map(l=>[...l.segment.values,0])],a=VA(s,e),o=[];a.forEach((l,c)=>{c===0&&o.push(ut.M(...l[0])),o.push(ut.C(l[1][0],l[1][1],l[2][0],l[2][1],l[3][0],l[3][1]))}),r.segments[r.segments.length-1].segment.command.toLowerCase()==="z"&&o.push(ut.Z()),t=t.concat(o)}),be.fromSegments(t)}cardinalSplines(e=.5){const t=[];this.getGroup().forEach(s=>{const a=[...s.segments.filter(c=>c.segment.command.toLowerCase()!=="z").map(c=>[...c.segment.values,0])],o=[];a.forEach((c,h)=>{const d=a[h-1],u=a[h+1];if(h===0)o.push({point:c});else if(h===a.length-1){const p=a[0];if(vg(p,c)){const f=d,g=c,m=a[1],v=Tv([],vt([],m,f),[2,2,1]),x=xa([],v,[1-e,1-e,1]),_=Pr([],x);o.push({reversePoint:bt([],g,_),point:g,endPoint:bt([],g,x)})}else o.push({point:c})}else{const p=d,f=c,m=Tv([],vt([],u,p),[2,2,1]),v=xa([],m,[1-e,1-e,1]),x=Pr([],v);o.push({reversePoint:bt([],f,x),point:f,endPoint:bt([],f,v)})}});const l=[];o.forEach((c,h)=>{if(h===0)l.push(ut.M(c.point[0],c.point[1]));else{const d=o[h-1]||o[o.length-1];if(d.endPoint)c.reversePoint?l.push(ut.C(d.endPoint[0],d.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(ut.Q(d.endPoint[0],d.endPoint[1],c.point[0],c.point[1]));else if(h===1){const u=o[o.length-1];u.endPoint?l.push(ut.C(u.endPoint[0],u.endPoint[1],c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1])):l.push(ut.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}else l.push(ut.Q(c.reversePoint[0],c.reversePoint[1],c.point[0],c.point[1]))}}),t.push(...l)});const r=new be;return r.resetSegments(t),r}Z(){return this.segments.push(ut.Z()),this}M(e,t){return this.segments.push(ut.M(e,t)),this}L(e,t){return this.segments.push(ut.L(e,t)),this}C(e,t,i,r,s,a){return this.segments.push(ut.C(e,t,i,r,s,a)),this}Q(e,t,i,r){return this.segments.push(ut.Q(e,t,i,r)),this}drawRect(e,t,i,r){return this.segments.push(ut.M(e,t),ut.L(e+i,t),ut.L(e+i,t+r),ut.L(e,t+r),ut.L(e,t),ut.Z()),this}drawLine(e,t,i,r){return this.segments.push(ut.M(e,t),ut.L(i,r)),this}drawCircleWithRect(e,t,i,r=i){var s=.552284749831;const a=new be;return a.resetSegments([ut.M(0,-1),ut.C(s,-1,1,-s,1,0),ut.C(1,s,s,1,0,1),ut.C(-s,1,-1,s,-1,0),ut.C(-1,-s,-s,-1,0,-1),ut.Z()]),a.translate(1,1).scale(i/2,r/2).translate(e,t),this.addPath(a),this}drawCircle(e,t,i){return this.drawCircleWithRect(e-i,t-i,i*2,i*2)}drawArc(e,t,i,r,s,a,o){const[l,c]=this.lastPoint;return this.addPath(be.arcToCurve(l,c,e,t,i,r,s,a,o))}get verties(){let e=[],t=[];return this.each(function(i){var r=i.values,s=i.command;switch(s){case"M":case"L":e.push([...i.values,0]);break;case"V":e.push([r[0],t.pop(),0]);break;case"H":t.pop(),e.push([t.pop(),r[0],0]);break;case"C":case"S":case"T":case"Q":for(var a=0,o=r.length;a{const r=this.segments[i-1],s=this.segments[i+1];if(t.values.length>0){const l=t.values;for(var a=0,o=l.length;ae.command==="Z")&&J2(this.lastPoint,this.firstPoint)}get opened(){return!this.closed}get length(){let e=0;return this.getGroup().forEach(i=>{i.segments.forEach((r,s)=>{var d;const a=i.segments[s-1],o=((d=a==null?void 0:a.segment)==null?void 0:d.values)||[],l=o[o.length-2],c=o[o.length-1],h=r.segment.values;r.segment.command==="M"||(r.segment.command==="L"?e+=Rr(l,c,h[0],h[1]):r.segment.command==="C"?e+=Hc(l,c,h[0],h[1],h[2],h[3],h[4],h[5]):r.segment.command==="Q"&&(e+=yl(l,c,h[0],h[1],h[2],h[3])))})}),e}get lengthList(){let e=[];return this.getGroup().forEach((i,r)=>{i.segments.forEach((s,a)=>{var u;const o=i.segments[a-1],l=((u=o==null?void 0:o.segment)==null?void 0:u.values)||[],c=l[l.length-2],h=l[l.length-1],d=s.segment.values;s.segment.command==="M"||(s.segment.command==="L"?e.push({groupIndex:r,segmentIndex:a,length:Rr(c,h,d[0],d[1])}):s.segment.command==="C"?e.push({groupIndex:r,segmentIndex:a,length:Hc(c,h,d[0],d[1],d[2],d[3],d[4],d[5])}):s.segment.command==="Q"&&e.push({groupIndex:r,segmentIndex:a,length:yl(c,h,d[0],d[1],d[2],d[3])}))})}),e}get lastSegment(){const e=this.segments[this.segments.length-1];return e.command!=="Z"?e:this.segments[this.segments.length-2]}get lastPoint(){const e=this.lastSegment.values;return[e[e.length-2],e[e.length-1]]}get firstSegment(){return this.segments[0]}get firstPoint(){const e=this.firstSegment.values;return[e[0],e[1]]}static joinPathList(e=[]){const t=be.fromSVGString();return e.forEach(i=>{t.addPath(i)}),t}static fromSegments(e){const t=new be;return t.resetSegments(e),t}static fromStructuredVerties(e){const t=new be,i=[];return e.forEach(r=>{i[r.segmentIndex]||(i[r.segmentIndex]={command:r.segment.command,values:[]}),i[r.segmentIndex].command!==xL.CLOSEPATH&&(i[r.segmentIndex].values[r.valueIndex]=r.vertex[0],i[r.segmentIndex].values[r.valueIndex+1]=r.vertex[1])}),t.resetSegments(i),t}static fromSVGString(e=""){return new be(e)}static makeRect(e,t,i,r){return be.fromSVGString().drawRect(e,t,i,r)}static makeLine(e,t,i,r){return be.fromSVGString().drawLine(e,t,i,r)}static makeCircle(e,t,i,r){return be.fromSVGString().drawCircleWithRect(e,t,i,r)}static makePathByPoints(e=[]){const t=e.map((i,r)=>r===0?ut.M(i.x,i.y):ut.L(i.x,i.y));return t.push(ut.Z()),be.fromSegments(t)}static makePathByVerties(e=[],t=!0){const i=e.map((r,s)=>s===0?ut.M(r[0],r[1]):ut.L(r[0],r[1]));return t&&i.push(ut.Z()),be.fromSegments(i)}static makePolygon(e,t,i=3){const r=[];for(var o=0;o{d.C(u.x1,u.y1,u.x2,u.y2,u.x,u.y)}),d}toCurveList(){const e=[];return this.segments.forEach((t,i)=>{if(i>0){const r=this.segments[i-1],s=[r.values[r.values.length-2],r.values[r.values.length-1]],a=[xd(s),xd([t.values[0],t.values[1]]),xd([t.values[2],t.values[3]]),xd([t.values[4],t.values[5]])];e.push({points:a,curveFunction:up(...a)})}}),e}toInterpolateFunction(){const e=this.normalize().toCurveList().map(t=>({points:t.points,curveFunction:t.curveFunction,start:t.points[0].x,end:t.points[t.points.length-1].x}));return t=>{const i=e.find(s=>s.start<=t&&t<=s.end);if(i)return i.curveFunction(t).y;if(t===0)return e[0].points[0].y;const r=e[e.length-1].points;return r[r.length-1].y}}}function Nv(){return n=>Math.pow(2,-10*n)*Math.sin((n-.1)*5*Math.PI)+1}const pm=(n=1,e="end")=>{var t=1/n;return function(i){let r=0;const s=Xt(i/t,1e7);if(e=="start")r=Math.ceil(s);else if(e=="end"){if(i===0)return 0;if(i===1)return 1;r=Math.ceil(s)-1}return Math.min(Math.max(t*r,0),1)}};function Mg(n=1,e="end"){return pm(n,e)}function Bv(){return pm(1,"start")}function Gv(){return pm(1,"end")}var HA={step:Mg,"step-start":Bv,"step-end":Gv,stepStart:Bv,stepEnd:Gv,"ease-out-elastic":Nv,easeOutElastic:Nv};function $g(n="linear"){var[e]=n.split("(").map(r=>r.trim()),t=HA[e];if(t){var i=n.split("(")[1].split(")")[0].split(",").map(r=>r.trim());return t(...i)}else return UA(n)}function UA(n){var e=Lx(n);return t=>e(t).y}const Hv={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Yr extends um{isGradient(){return!0}toString(){return"none"}getDefaultObject(e={}){return P({itemType:"image-resource",type:"gradient",colorsteps:[]},e)}toCloneObject(){return ze(P({},super.toCloneObject()),{colorsteps:this.json.colorsteps.map(e=>e.clone())})}convert(e){return e.colorsteps[0]instanceof ei||(e.colorsteps=e.colorsteps.map(t=>new ei(t))),e}calculateAngle(){var e=this.json.angle;return Bi(Hv[e])?e:Hv[e]||0}addColorStep(e,t=!0){return this.json.colorsteps.push(e),t&&this.sortColorStep(),e}pickColorStep(e){var t=this.colorsteps;if(!t.length)return{percent:0,color:"rgba(0,0,0,0)"};if(e{if(t.percent>i.percent)return 1;if(t.percenti.index?1:-1}),e.forEach((t,i)=>{t.index=i*100})}sortToRight(){var e=this.colorsteps;const t=e.length,i=100/t;e.forEach((r,s)=>{r.percent=i*(s+1)}),this.sortColorStep()}sortToLeft(){var e=this.colorsteps;const t=e.length,i=100/t;e.forEach((r,s)=>{r.percent=i*s}),this.sortColorStep()}addColorStepList(e=[]){e.forEach(t=>{this.addColorStep(t,!1)}),this.sortColorStep()}getColorStep(e){return this.json.colorsteps.filter(t=>t.id==e)[0]}clear(...e){e.length?this.json.colorsteps.splice(+e[0],1):this.json.colorsteps=[]}removeColorStepByIndex(e){this.json.colorsteps.splice(e,1)}removeColorStep(e){this.json.colorsteps=this.json.colorsteps.filter(t=>t.id!=e)}get colorsteps(){return this.json.colorsteps}makeTimingString(e,t=1){switch(e.name){case Ze.LINEAR:return"";case Ze.EASE:case Ze.EASE_IN:case Ze.EASE_OUT:case Ze.EASE_IN_OUT:return`${e.name} ${t}`;case Ze.STEPS:return`steps(${e.count}, ${e.direction})`;case Ze.PATH:return`path(${e.d}) ${t}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2}) ${t}`}}getColorString(){return this.colorsteps.map(e=>{const{color:t,percent:i,timing:r,timingCount:s}=e;return`${t} ${i}% ${this.makeTimingString(r,s)}`}).join(",")}static makeColorStepList(e){const t=[];return e.forEach((i,r)=>{const{color:s,percent:a,timing:o,timingCount:l}=i;var c=e[r-1];if(r===0)return t.push({color:s,percent:a}),t;switch(o.name){case Ze.STEPS:for(var p=Mg(o.count,o.direction),f=[],h=0;h<=o.count;h++){var d=c.percent+(a-c.percent)*(h/o.count),u=ml(c.color,s,p(h/o.count));f.push({percent:d,color:u})}f.forEach((g,m)=>{if(m===0)t.push({percent:c.percent,color:g.color}),t.push(g);else{const v=f[m-1];t.push({percent:v.percent,color:g.color}),t.push(g)}});break;case Ze.PATH:for(var p=be.fromSVGString(o.d).toInterpolateFunction(),f=[],h=0;h<=l;h++){const m=c.percent+(a-c.percent)*(h/l),v=ml(c.color,s,p(h/l));f.push({percent:m,color:v})}t.push(...f);break;default:for(var p=$g(o.matchedString),f=[],h=0;h<=l;h++){const m=c.percent+(a-c.percent)*(h/l),v=ml(c.color,s,p(h/l));f.push({percent:m,color:v})}t.push(...f);break}}),t}static toCSSColorString(e=[],t="%",i=100){return Yr.makeColorStepList(e).map(s=>{const{color:a,percent:o}=s,l=o/100*i;return`${a} ${l}${t}`}).join(",")}static parseColorSteps(e){return e.map((t,i)=>{var r,s,a;if(t.length===1){const o=((r=e[i-1])==null?void 0:r[1])||{parsed:{value:0}},l=((s=e[i+1])==null?void 0:s[1])||{parsed:{value:100}};let c=0;return e[i-1]?e[i+1]?c=o.parsed.value+(l.parsed.value-o.parsed.value)*.5:c=100:c=0,new ei({color:t[0].matchedString,percent:c,unit:"%",timing:hr("linear").parsed,timingCount:1})}if(t.length===2)return new ei({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:hr("linear").parsed,timingCount:1});if(t.length===3)return t[2].parsed.funcType===Ht.TIMING?new ei({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:(a=t[3])==null?void 0:a.parsed.value}):new ei({color:t[0].matchedString,percent:t[2].parsed.value,unit:t[2].parsed.unit,timing:hr("steps(1, start)").parsed});if(t.length===4)return new ei({color:t[0].matchedString,percent:t[1].parsed.value,unit:t[1].parsed.unit,timing:t[2].parsed,timingCount:t[3].parsed.value})})}}const Uv={center:!0,top:!0,left:!0,right:!0,bottom:!0},Wv={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Bn extends Yr{getDefaultObject(e={}){return super.getDefaultObject(P({type:"conic-gradient",angle:0,radialPosition:[Nr.CENTER,Nr.CENTER]},e))}toCloneObject(){return ze(P({},super.toCloneObject()),{angle:this.json.angle,radialPosition:rt(this.json.radialPosition)})}hasAngle(){return!0}pickColorStep(e){return super.pickColorStep((e+100)%100)}getStartEndPoint(e){let t,i,r,[s,a]=this.json.radialPosition;const o=e.backRect,l=wi(o.x,o.y,o.width,o.height);s=="center"&&(s=y.percent(50)),a=="center"&&(a=y.percent(50));const c=s.toPx(o.width),h=a.toPx(o.height),d=[o.x+c.value,o.y+h.value,0];let u=l[0],p=l[1],f=l[3],g=l[2];const m=Fe(d,u),v=Fe(d,p),x=Fe(d,f),_=Fe(d,g);t=yr(d);const b=Math.max(m,v,x,_);return i=Pt(t[0]+b,t[1],t[2]),r=Pt(t[0],t[1]-b,t[2]),{startPoint:t,endPoint:i,shapePoint:r}}toString(){var e=this.getColorString(),t=[],i=this.json,r=i.angle,s=i.radialPosition||Nr.CENTER;s=Uv[s]?s:s.join(" "),$t(r)&&(r=+(Wv[r]||r),t.push(`from ${r}deg`)),s&&t.push(`at ${s}`);var a=t.length?t.join(" ")+",":"";return`${i.type}(${a} ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=Bn.toCSSColorString(this.colorsteps,"deg",360),t=[],i=this.json,r=i.angle,s=i.radialPosition||Nr.CENTER;s=Uv[s]?s:s.join(" "),$t(r)&&(r=+(Wv[r]||r),t.push(`from ${r}deg`)),s&&t.push(`at ${s}`);var a=t.length?t.join(" ")+",":"";return`${i.type}(${a} ${e})`}static parse(e){const t=hr(e);var i={angle:0,radialPosition:["center","center"]};let[r,...s]=t.parameters;if(r[0].func!==Ht.COLOR){let o=!1,l=!1,c=[],h=[];r.forEach(d=>{d.func===Ht.KEYWORD&&d.matchedString==="from"?o=!0:d.func===Ht.KEYWORD&&d.matchedString==="at"?l=!0:l?c.push(d):o&&h.push(d)}),i.radialPosition=c.map(d=>{if(d.func===Ht.KEYWORD)switch(d.matchedString){case"top":return y.percent(0);case"left":return y.percent(0);case"right":return y.percent(100);case"bottom":return y.percent(100);case"center":return y.percent(50)}return d.parsed}),h.length&&(i.angle=h[0].parsed.value)}else s=t.parameters;const a=Bn.parseColorSteps(s);return new Bn(ze(P({},i),{colorsteps:a}))}}const Xv={0:"to top",45:"to top right",90:"to right",135:"to bottom right",180:"to bottom",225:"to bottom left",270:"to left",315:"to top left"},WA={"to top":0,"to top right":45,"to right":90,"to bottom right":135,"to bottom":180,"to bottom left":225,"to left":270,"to top left":315};class Gn extends Yr{getDefaultObject(e){return super.getDefaultObject(P({type:"linear-gradient",angle:0},e))}toCloneObject(){return ze(P({},super.toCloneObject()),{angle:this.json.angle})}isLinear(){return!0}hasAngle(){return!0}getRealAngle(){return this.json.angle}get angle(){return this.getRealAngle()}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t="",i=this.json.angle||0;t=i,bi(t)&&(t=Xv[`${t}`]||t),bi(t)&&(t=t>360?t%360:t,t=`${t}deg`);var r=`${this.json.type}(${t}, ${e})`;return r}toCSSString(){if(this.colorsteps.length===0)return"";var e=Gn.toCSSColorString(this.colorsteps),t="",i=this.json.angle||0;t=i,bi(t)&&(t=Xv[`${t}`]||t),bi(t)&&(t=t>360?t%360:t,t=`${t}deg`);var r=`${this.json.type}(${t}, ${e})`;return r}static parse(e){const t=hr(e);var i={};let[r,...s]=t.parameters;const a=[],o=[];r[0].func!==Ht.COLOR?r.forEach(h=>{h.func===Ht.KEYWORD?o.push(h):a.push(h)}):s=t.parameters;let l=o.map(h=>h.matchedString).join(" ");l===""?[l]=a.map(h=>h.parsed.value):l=WA[l],i=ze(P({},i),{angle:l});const c=Gn.parseColorSteps(s);return new Gn(ze(P({},i),{colorsteps:c}))}}const Yv={center:!0,top:!0,left:!0,right:!0,bottom:!0};class Hn extends Yr{getDefaultObject(e={}){return super.getDefaultObject(P({type:"radial-gradient",radialType:"ellipse",radialSize:cn.FARTHEST_CORNER,radialPosition:[Nr.CENTER,Nr.CENTER]},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("radialType","radialSize","radialPosition"))}getConerDist(e){let t=e.backVerties[0],i=e.backVerties[1],r=e.backVerties[3],s=e.backVerties[2];const a=Fe(e.radialCenterPosition,t),o=Fe(e.radialCenterPosition,i),l=Fe(e.radialCenterPosition,r),c=Fe(e.radialCenterPosition,s),h=[["top-left",t,a],["top-right",i,o],["bottom-left",r,l],["bottom-right",s,c]];return h.sort((d,u)=>d[2]-u[2]),{cornerList:h,topLeftDist:a,topRightDist:o,bottomLeftDist:l,bottomRightDist:c}}EllipseRadiusToSide(e,t=!0){var i=Math.abs(e.radialCenterPoint[0]),r=Math.abs(e.radialCenterPoint[1]),s=Math.abs(e.radialCenterPoint[0]-e.backRect.width),a=Math.abs(e.radialCenterPoint[1]-e.backRect.height);if(t)var o=is?i:s,l=r>a?r:a;return{width:o,height:l}}EllipseRadius(e,t,i=!0){const{cornerList:r,topLeftDist:s,topRightDist:a,bottomRightDist:o,bottomLeftDist:l}=this.getConerDist(t),c=[s,a,l,o];var h=i?Math.min(...c):Math.max(...c),d=r.find(m=>m[2]===h)[1],u=e.width/e.height;if(u!==0){var p=vt([],d,t.radialCenterPosition),f=Math.sqrt(Math.pow(p[0],2)+Math.pow(p[1],2)*Math.pow(u,2)),g=f/u;return{width:f,height:g}}}getStartEndPoint(e){let t,i,r;const s=this.json.radialType,a=this.json.radialSize;let[o,l]=this.json.radialPosition;const c=e.backRect,h=wi(c.x,c.y,c.width,c.height);o=="center"&&(o=y.percent(50)),l=="center"&&(l=y.percent(50));const d=o.toPx(c.width),u=l.toPx(c.height),p=[c.x+d.value,c.y+u.value,0];let f=[h[0][0],u.value,0],g=[h[1][0],u.value,0],m=[d.value,h[0][1],0],v=[d.value,h[3][1],0];const x=Fe(p,f),_=Fe(p,g),b=Fe(p,m),S=Fe(p,v),C=[["top",m,b],["left",f,x],["right",g,_],["bottom",v,S]];C.sort((ve,Z)=>ve[2]-Z[2]);let k=h[0],O=h[1],q=h[3],X=h[2];const T=Fe(p,k),z=Fe(p,O),ae=Fe(p,q),j=Fe(p,X),J=[["top-left",k,T],["top-right",O,z],["bottom-left",q,ae],["bottom-right",X,j]];switch(J.sort((ve,Z)=>ve[2]-Z[2]),t=yr(p),s){case Li.CIRCLE:switch(a){case cn.CLOSEST_SIDE:var[,,Q]=C[0];i=Pt(t[0]+Q,t[1],t[2]),r=Pt(t[0],t[1]+Q,t[2]);break;case cn.CLOSEST_CORNER:var[,,Q]=J[0];i=Pt(t[0]+Q,t[1],t[2]),r=Pt(t[0],t[1]+Q,t[2]);break;case cn.FARTHEST_SIDE:var[,,Q]=C[C.length-1];i=Pt(t[0]+Q,t[1],t[2]),r=Pt(t[0],t[1]+Q,t[2]);break;case Li.CIRCLE:case cn.FARTHEST_CORNER:var[,,Q]=J[J.length-1];i=Pt(t[0]+Q,t[1],t[2]),r=Pt(t[0],t[1]+Q,t[2]);break;default:var Q=(a[0]||a).toPx(Fe(e.backVerties[1],e.backVerties[0])).value;i=Pt(t[0]+Q,t[1],t[2]),r=Pt(t[0],t[1]+Q,t[2]);break}break;case Li.ELLIPSE:switch(a){case cn.CLOSEST_SIDE:var ee=this.EllipseRadiusToSide(e,!0);i=Pt(t[0]+ee.width,t[1],t[2]),r=Pt(t[0],t[1]+ee.height,t[2]);break;case cn.CLOSEST_CORNER:var ee=this.EllipseRadiusToSide(e,!0),K=this.EllipseRadius(ee,e,!0);i=Pt(t[0]+K.width,t[1],t[2]),r=Pt(t[0],t[1]+K.height,t[2]);break;case cn.FARTHEST_SIDE:var ee=this.EllipseRadiusToSide(e,!1);i=Pt(t[0]+ee.width,t[1],t[2]),r=Pt(t[0],t[1]+ee.height,t[2]);break;case cn.FARTHEST_CORNER:var ee=this.EllipseRadiusToSide(e,!1),K=this.EllipseRadius(ee,e,!1);i=Pt(t[0]+K.width,t[1],t[2]),r=Pt(t[0],t[1]+K.height,t[2]);break;default:var re=a[0].toPx(Fe(e.backVerties[1],e.backVerties[0])).value,le=a[1].toPx(Fe(e.backVerties[3],e.backVerties[0])).value;i=Pt(t[0]+re,t[1],t[2]),r=Pt(t[0],t[1]+le,t[2]);break}break}return{startPoint:t,endPoint:i,shapePoint:r}}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),t=this.json,i="",r=t.radialType||Li.ELLIPSE,s=t.radialSize||cn.FARTHEST_CORNER,a=t.radialPosition||["center","center"];return a=Yv[a]?a:a.join(" "),s=Ni(s)?s.join(" "):s,i=a?`${r} ${s} at ${a}`:`${r} ${s}`,`${t.type||"radial-gradient"}(${i}, ${e})`}toCSSString(){if(this.colorsteps.length===0)return"";var e=Hn.toCSSColorString(this.colorsteps),t=this.json,i="",r=t.radialType||Li.ELLIPSE,s=t.radialSize||cn.FARTHEST_CORNER,a=t.radialPosition||["center","center"];return a=Yv[a]?a:a.join(" "),s=Ni(s)?s.join(" "):s,i=a?`${r} ${s} at ${a}`:`${r} ${s}`,`${t.type||"radial-gradient"}(${i}, ${e})`}static parse(e){const t=hr(e);var i={radialType:Li.ELLIPSE,radialSize:cn.FARTHEST_CORNER,radialPosition:["center","center"]};let[r,...s]=t.parameters;if(r[0].func!==Ht.COLOR){let o=Li.ELLIPSE,l=!1,c=[],h=[];r.forEach(d=>{if(d.func===Ht.KEYWORD&&d.matchedString==="at")l=!0;else if(l)c.push(d);else switch(d.matchedString){case Li.CIRCLE:case Li.ELLIPSE:o=d.matchedString;break;default:h.push(d);break}}),i.radialType=o,i.radialPosition=c.map(d=>{if(d.func===Ht.KEYWORD)switch(d.matchedString){case"top":return y.percent(0);case"left":return y.percent(0);case"right":return y.percent(100);case"bottom":return y.percent(100);case"center":return y.percent(50)}return d.parsed}),i.radialSize=h.map(d=>d.func===Ht.KEYWORD?d.matchedString:d.parsed),i.radialSize.length===1&&(i.radialSize=i.radialSize[0])}else s=t.parameters;const a=Hn.parseColorSteps(s);return new Hn(ze(P({},i),{colorsteps:a}))}}class io extends Bn{getDefaultObject(){return super.getDefaultObject({type:"repeating-conic-gradient",angle:0,radialPosition:[Nr.CENTER,Nr.CENTER]})}static parse(e){var t=Bn.parse(e);return new io({angle:t.angle,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class ro extends Gn{getDefaultObject(){return super.getDefaultObject({type:"repeating-linear-gradient",angle:0})}static parse(e){var t=Gn.parse(e);return new ro({angle:t.angle,colorsteps:t.colorsteps})}}class no extends Hn{getDefaultObject(){return super.getDefaultObject({type:"repeating-radial-gradient"})}static parse(e){var t=Hn.parse(e);return new no({radialType:t.radialType,radialSize:t.radialSize,radialPosition:t.radialPosition,colorsteps:t.colorsteps})}}class aa extends Yr{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",static:!0,colorsteps:[new ei({color:"red",percent:0,index:0}),new ei({color:"red",percent:100,index:0})]})}toCloneObject(){return ze(P({},super.toCloneObject()),{static:!0})}static parse(e){const t=hr(e);var i=Yr.parseColorSteps(t.parameters);return new aa({colorsteps:i})}static create(e="transparent"){return new aa({colorsteps:[new ei({color:e,percent:0,index:0}),new ei({color:e,percent:100,index:1})]})}toString(){var e=this.json.colorsteps[0].color;return`static-gradient(${e})`}toCSSString(){if(this.colorsteps.length===0)return"";const e=this.colorsteps[0].color||"black";return`linear-gradient(${e} 0%, ${e} 100%)`}}const XA=["jpg","jpeg","png","gif","svg"];class so extends um{getDefaultObject(e={}){return super.getDefaultObject(P({type:de.URL,url:"",datauri:""},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("url","datauri"))}static parse(e){var t=e.split("(")[1].split(")")[0];return new so({url:t})}isUrl(){return!0}toString(e){return`url(${e||this.json.url})`}static isImageFile(e){return XA.includes(e)}}const YA=["repeat","no-repeat","repeat-x","repeat-y","round","space"];class Rt extends Vr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:Rt.createImage(e.images[0])})}static createImage(e){return new so({url:e})}setGradient(e){this.reset({type:e.type,image:Rt.createGradient(e,this.json.image)})}static createGradient(e,t){const i=e.colorsteps||t.colorsteps,r=e.angle||t.angle,s=e.radialType||t.radialType,a=e.radialPosition||t.radialPosition;let o=t.toJSON();switch(delete o.itemType,delete o.type,e.type){case"static-gradient":return new aa(ze(P({},o),{colorsteps:i}));case"linear-gradient":return new Gn(ze(P({},o),{colorsteps:i,angle:r}));case"repeating-linear-gradient":return new ro(ze(P({},o),{colorsteps:i,angle:r}));case"radial-gradient":return new Hn(ze(P({},o),{colorsteps:i,radialType:s,radialPosition:a}));case"repeating-radial-gradient":return new no(ze(P({},o),{colorsteps:i,radialType:s,radialPosition:a}));case"conic-gradient":return new Bn(ze(P({},o),{colorsteps:i,angle:r,radialPosition:a}));case"repeating-conic-gradient":return new io(ze(P({},o),{colorsteps:i,angle:r,radialPosition:a}))}return new Yr}getDefaultObject(){return super.getDefaultObject({itemType:"background-image",checked:!1,blendMode:"normal",size:"auto",repeat:"repeat",width:y.percent(100),height:y.percent(100),x:y.percent(0),y:y.percent(0)})}toCloneObject(){var e=this.json;return ze(P(P({},super.toCloneObject()),this.attrs("checked","blendMode","size","repeat","width","height","x","y")),{image:e.image.toString()})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width&&(e.width=y.parse(e.width)),e.height&&(e.height=y.parse(e.height)),gi(e.image)&&(e.image=Rt.parseImage(e.image)),e}get image(){return this.json.image}set image(e){this.json.image=e}checkField(e,t){return e==="repeat"?YA.includes(t):super.checkField(e,t)}recoverOffset(e,t,i,r=0,s=0,a={}){const{x:o,y:l,width:c,height:h}=this.json,d=Math.floor(c.toPx(i.width).value+r),u=a.shiftKey?d:Math.floor(h.toPx(i.height).value+s);e-=i.x,t-=i.y,d<0&&(e+=d),u<0&&(t+=u);let p=y.px(e),f=y.px(t);const g=2;return o.isPercent()&&(Math.abs(e)`${e}: ${t}`).join(";")}toBackgroundCSS(){var e=this.toCSS();return{background:`${e["background-image"]} `}}static parse(e){return new Rt(e)}static parseImage(e){const t=hr(e);let i=null;if(!t||e==="undefined")return aa.create(e||"transparent");switch(t.func){case de.LINEAR:i=Gn.parse(t.matchedString);break;case de.REPEATING_LINEAR:i=ro.parse(t.matchedString);break;case de.RADIAL:i=Hn.parse(t.matchedString);break;case de.REPEATING_RADIAL:i=no.parse(t.matchedString);break;case de.CONIC:i=Bn.parse(t.matchedString);break;case de.REPEATING_CONIC:i=io.parse(t.matchedString);break;case de.URL:i=so.parse(t.matchedString);break;default:i=aa.parse(t.matchedString);break}return i}static changeImageType(e){switch(e.type){case de.STATIC:return new aa(e);case de.LINEAR:return new Gn(e);case de.REPEATING_LINEAR:return new ro(e);case de.RADIAL:return new Hn(e);case de.REPEATING_RADIAL:return new no(e);case de.CONIC:return new Bn(e);case de.REPEATING_CONIC:return new io(e);case de.URL:return new so(e)}}static parseStyle(e){var t=[];return e["background-image"]&&OA(e["background-image"],"background-image").forEach((r,s)=>{const a=r[0];let o;switch(a.func){case de.STATIC:o=aa.parse(a.matchedString);break;case de.LINEAR:o=Gn.parse(a.matchedString);break;case de.REPEATING_LINEAR:o=ro.parse(a.matchedString);break;case de.RADIAL:o=Hn.parse(a.matchedString);break;case de.REPEATING_RADIAL:o=no.parse(a.matchedString);break;case de.CONIC:o=Bn.parse(a.matchedString);break;case de.REPEATING_CONIC:o=io.parse(a.matchedString);break;case de.URL:o=so.parse(a.matchedString);break}t[s]=new Rt({type:o.type,image:o})}),e["background-repeat"]&&e["background-repeat"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].repeat=i)}),e["background-blend-mode"]&&e["background-blend-mode"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].blendMode=i)}),e["background-size"]&&e["background-size"].split(",").map(i=>i.trim()).forEach((i,r)=>{if(t[r])if(i=="cover"||i==="contain"||i==="auto")t[r].size=i;else{t[r].size="auto";let[s,a]=i.split(" ");t[r].width=y.parse(s),t[r].height=y.parse(a)}}),e["background-position"]&&e["background-position"].split(",").map(i=>i.trim()).forEach((i,r)=>{if(t[r]){let[s,a]=i.split(" ");t[r].x=y.parse(s),t[r].y=y.parse(a)}}),e["background-visibility"]&&e["background-visibility"].split(",").map(i=>i.trim()).forEach((i,r)=>{t[r]&&(t[r].visibility=i===Dn.HIDDEN?Dn.HIDDEN:Dn.VISIBLE)}),t}static toCSS(e){var t={};return e.forEach(i=>{$u(i.toCSS(),(r,s)=>{t[r]||(t[r]=[]),t[r].push(s)})}),uv(t)}static toProperty(e){var t={};return e.forEach(i=>{$u(i.toProperty(),(r,s)=>{t[r]||(t[r]=[]),t[r].push(s)})}),uv(t)}static join(e){return Zt(Rt.toProperty(e.map(t=>Rt.parse(t))))}static joinCSS(e){return Rt.toCSS(e.map(t=>Rt.parse(t)))}static parseList(e=[]){return e.map(t=>Rt.parse(t))}}class KA extends ge{initState(){var i;const e=Rt.parseImage(this.props.value||"static-gradient(#ececec)"),t=(i=e.colorsteps[this.props.index])==null?void 0:i.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(r=>this.$context.selection.isSelectedColorStep(r.id))),{id:t,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({image:Rt.parseImage(e)},!1),this.refresh()}template(){return` -
          -
          -
          -
          -
          -
          -
          -
          - `}[Yn("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(i=>{this.$commands.emit("updateImageAssetItem",i,r=>{this.trigger("setImageUrl",r)})})}[we("changeTabType")](e){var s,a;const t=(s=this.state.image)==null?void 0:s.type,i=((a=this.state.image)==null?void 0:a.colorsteps)||[];t===de.STATIC&&(i.length===0||i.length===1)&&i.push(i[0],i[0]);var r=e==="image-resource"?this.state.image.url:this.state.url;this.state.image=Rt.changeImageType({type:e,url:r,colorsteps:i,angle:this.state.image.angle||0,radialType:this.state.image.radialType||Li.CIRCLE,radialPosition:this.state.image.radialPosition||["50%","50%"]}),this.refresh(),this.updateData()}[we("changeColorStepOffset")](e,t){this.currentStep&&(this.currentStep.percent=t.value,this.state.image.sortColorStep(),this.refresh(),this.updateData())}[ne("$back")](e){var t=this.refs.$stepList.rect(),i=t.x,r=t.right,s=e.xy.x;sr&&(s=r);var a=(s-i)/t.width*100;this.state.image.insertColorStep(a),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[Me("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[Me("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[me("$stepList")+It](){var t;var e=((t=this.state.image)==null?void 0:t.colorsteps)||[];return e.map(i=>{var r=this.$context.selection.isSelectedColorStep(i.id)?"selected":"";return` -
          -
          - ${Math.floor(i.percent*10)/10} -
          -
          -
          `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[Ar("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t+1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&this.state.image.insertColorStep(r.percent+(100-r.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t-1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&this.state.image.insertColorStep(r.percent),this.refresh(),this.updateData(),this.doFocus(e)}[Ke("$stepList .step")+at()+ct()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),i=t.x,r=t.right,s=this.startXY.x+e;sr&&(s=r);var a=(s-i)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(a=Math.floor(a)),this.currentStep.setValue(a,t.width),this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${Yr.toCSSColorString(e.colorsteps)})`}[we("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.colorsteps[0].color=e,this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[H("setImageUrl")](e){this.state.image&&(this.state.url=e,this.state.image.reset({url:e}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}class qA extends ge{initState(){return{value:this.props.value}}template(){return"
          "}[Me("$body")](){return{"data-column":this.props.column||1}}[me("$body")](){return Object.keys(Ue).map(e=>{var t=Ue[e],i=e===this.state.value?"selected":"";return`
          ${t}
          `})}getValue(){return this.state.value}setValue(e){this.state.value=e,this.refresh()}[ne("$body .list-view-item")](e){var t=e.$dt.attr("data-key");e.$dt.onlyOneClass("selected"),this.updateData({value:t})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class ZA extends ge{initState(){var e=this.props.values.split(" ").map(t=>+t);return{values:e,column:this.props.column}}template(){return"
          "}[Me("$body")](){return{cssText:` - display: grid; - grid-template-columns: repeat(${this.state.column}, 1fr); - grid-column-gap: 2px; - grid-row-gap: 2px; - `}}[me("$body")](){var{values:e}=this.state;return e.map((t,i)=>` -
          - -
          - `)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[di("$body input")](e){var t=e.$dt,i=+t.attr("data-index"),r=+t.value;this.state.values[i]=r,this.updateData()}}class JA extends ge{initState(){var e=this.props.units||["px","em","%","auto"],t=y.parse(this.props.value||"0px");let i=this.props.label||"";return Ue[i]&&(i=Ue[i]),{removable:this.props.removable,label:i,compact:this.props.compact,wide:this.props.wide,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",disabled:this.props.disabled,title:this.props.title||"",units:e,value:t}}template(){return"
          "}[me("$body")+It](){var{min:e,max:t,step:i,label:r,title:s,compact:a,wide:o,removable:l,layout:c,disabled:h}=this.state,d=+this.state.value.value.toString();isNaN(d)&&(d=0);var u=c,p=(+d).toString();const f=this.state.units;return` -
          - ${r?``:""} -
          -
          - - - ${f.length===1?`${f[0]}`:W("SelectEditor",{ref:"$unit",key:"unit",compact:!0,value:this.state.selectedUnit||this.state.value.unit,options:this.state.units,onchange:"changeUnit"})} - - -
          -
          - -
          - `}getValue(){return this.state.value.clone()}setValue(e){var t;this.setState({value:y.parse(e)},!1),this.refs.$propertyNumber.val(this.state.value.value),(t=this.children.$unit)==null||t.setValue(this.state.value.unit)}disabled(){this.setState({disabled:!0})}enabled(){this.setState({disabled:!1})}[ne("$remove")](){this.updateData({value:""})}getUnit(){var e;return((e=this.children.$unit)==null?void 0:e.getValue())||this.state.value.unit}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new y(0,this.getUnit()))}[di("$body .property-number")](e){var t=+e.$dt.value;this.initValue(),this.updateData({value:new y(t,this.getUnit())})}[we("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}[Tu("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[wo("$body input[type=number]")](){this.refs.$range.removeClass("focused")}[Ke("$body .elf--input-range-editor label")+at("moveDrag")+ct("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initNumberValue=+this.refs.$propertyNumber.value,this.initUnit=this.state.value.unit,this.initUnits=this.state.units,this.refs.$propertyNumber.focus(),this.refs.$propertyNumber.select()}moveDrag(e){let t=Math.floor(Xt(this.initNumberValue+e*this.state.step,100));t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:new y(t,this.getUnit())}),this.refs.$propertyNumber.val(this.state.value.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}class jx extends ge{initState(){var e=this.props.units||["px","em","%"],t=y.parse(this.props.value||0);return{removable:this.props.removable==="true",calc:this.props.calc==="true",compact:this.props.compact==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",units:e,value:t}}template(){return"
          "}[me("$body")](){var{min:e,max:t,step:i,label:r,removable:s,layout:a,compact:o}=this.state,l=+this.state.value.value.toString();isNaN(l)&&(l=0);var c=a,h=(+l).toString();if(this.state.units==="%")throw new Error("%");var d=this.state.units.map(u=>{let p=u;return p==="number"&&(p=""),{value:u,text:p}});return` -
          - ${r?``:""} -
          - -
          - - ${W("SelectEditor",{ref:"$unit",key:"unit",value:this.state.value.unit,options:d,onchange:"changeUnit"})} -
          -
          - -
          - `}getValue(){return this.state.value.clone()}setValue(e){this.setState({value:y.parse(e)})}[X1('$body input[type="number"]')](){this.refs.$rangeArea.addClass("focused")}[Y1('$body input[type="number"]')](){this.refs.$rangeArea.removeClass("focused")}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initValue(){this.state.value==""&&(this.state.value=new y(0,this.children.$unit.getValue()))}[di('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.initValue(),this.updateData({value:new y(e,this.children.$unit.getValue())})}[di('$body input[type="range"]')](){this.trigger("changeRangeValue")}[Ke('$body input[type="range"]')+ct()](){}end(){this.trigger("changeRangeValue")}[we("changeRangeValue")](){var e=+this.getRef("$property").value;this.refs.$propertyNumber.val(e),this.initValue(),this.updateData({value:new y(e,this.children.$unit.getValue())})}[we("changeUnit")](e,t){this.initValue(),this.updateData({value:this.state.value.toUnit(t)})}}class QA extends jx{initState(){var e=this.props.value;e==="infinite"?e=new y(0,"infinite"):e=y.number(e);var t=this.props.units||["px","em","%"];return ze(P({},super.initState()),{key:this.props.key,params:this.props.params||"",units:t,value:e})}}class e4 extends ge{initState(){const[e,t,i]=(this.props.value||"").split(":");return{start:+(e||0),end:+(t||1),duration:+(i||1)}}refresh(){this.load(),this.children.$s.setValue(this.state.start*this.state.duration),this.children.$e.setValue(this.state.end*this.state.duration),this.children.$s.setMax(this.state.duration),this.children.$e.setMax(this.state.duration)}template(){const{start:e,end:t,duration:i}=this.state;return` -
          -
          -
          -
          -
          -
          -
          -
          - ${W("NumberRangeEditor",{ref:"$s",label:"Start",key:"start",min:0,max:i,step:.001,value:e*i,onchange:"changeValue"})} -
          -
          - ${W("NumberRangeEditor",{ref:"$e",label:"End",key:"end",min:0,max:i,step:.001,value:t*i,onchange:"changeValue"})} -
          -
          - `}[we("changeValue")](e,t){this.updateData({[e]:t/this.state.duration},!0)}[Ke("$start")+at("moveStart")](){this.rect=this.refs.$progress.rect(),this.pos=y.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=y.parse(this.refs.$end.css("left")).toPx(this.rect.width)}moveStart(e){var t=Math.min(this.max.value,Math.max(0,this.pos.value+e));this.state.start=t/this.rect.width,this.children.$s.setValue(this.state.start*this.state.duration),this.refresh(),this.updateData()}[Me("$start")](){return{"data-info":this.state.start,style:{left:y.percent((this.state.start||0)*100)}}}[Ke("$end")+at("moveStartForEnd")](){this.rect=this.refs.$progress.rect(),this.pos=y.parse(this.refs.$end.css("left")).toPx(this.rect.width),this.min=y.parse(this.refs.$start.css("left")).toPx(this.rect.width),this.max=this.rect.width}moveStartForEnd(e){var t=Math.max(this.min.value,Math.min(this.max.value,this.pos.value+e));this.state.end=t/this.rect.width,this.children.$e.setValue(this.state.end*this.state.duration),this.refresh(),this.updateData()}[Me("$end")](){return{"data-info":this.state.end,style:{left:y.percent((this.state.end||1)*100)}}}[Me("$bar")](){const e=this.state.start||0,t=this.state.end||1;return{style:{left:y.percent(e*100),width:y.percent((t-e)*100)}}}getValue(){const{start:e,end:t,duration:i}=this.state;return`${e}:${t}:${i}`}setValue(e){const[t,i,r]=e.split(":");this.setState({start:Number(t),end:Number(i),duration:Number(r)})}updateData(e={},t=!1){this.setState(e,t),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}class t4 extends ge{initState(){var e=+this.props.value;let t=this.props.label||"";Ue[t]&&(t=Ue[t]);const i=cs(this.props.compact)?this.props.compact:this.props.compact==="true",r=cs(this.props.wide)?this.props.wide:this.props.wide==="true",s=cs(this.props.mini)?this.props.mini:this.props.mini==="true",a=this.props.trigger||"input";return{label:t,compact:i,wide:r,mini:s,trigger:a,min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
          "}[me("$body")+It](){var{min:e,max:t,step:i,label:r,type:s,layout:a,mini:o,compact:l,wide:c,disabled:h,removable:d}=this.state,u=this.state.value;isNaN(u)&&(u=0);var p=a,f=(+u).toString();return` -
          - ${r?``:""} -
          -
          - -
          -
          -
          - `}getValue(){return this.state.value||0}setValue(e){this.setState({value:e},!1),this.refs.$propertyNumber.val(this.state.value)}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[Tu("$body input[type=number]")](e){this.refs.$range.addClass("focused"),e.$dt.select()}[wo("$body input[type=number]")](){this.refs.$range.removeClass("focused")}updateValue(e){var t=+e.$dt.value;this.updateData({value:t})}isTriggerInput(){return this.state.trigger==="input"}isTriggerEnter(){return this.state.trigger==="enter"}[di("$body input[type=number]")+et("isTriggerInput")+Nt(500)](e){this.updateValue(e)}[Ar("$body input[type=number]")+et("isTriggerEnter")+So](e){this.updateValue(e),e.$dt.select()}[Ke("$body label")+at("moveDrag")+ct("moveDragEnd")](){this.refs.$range.addClass("drag"),this.initValue=+this.refs.$propertyNumber.value}moveDrag(e){let t=Xt(this.initValue+e*this.state.step,1/this.state.step);t=Math.min(this.state.max,Math.max(this.state.min,t)),this.updateData({value:t}),this.refs.$propertyNumber.val(this.state.value)}moveDragEnd(){this.refs.$range.removeClass("drag")}}class i4 extends ge{initState(){var e=y.parse(this.props.value||y.number(0));return e=e.toUnit("number"),{removable:this.props.removable==="true",compact:this.props.compact==="true",wide:this.props.wide==="true",clamp:this.props.clamp==="true",label:this.props.label||"",min:+this.props.min||0,max:+this.props.max||100,step:+this.props.step||1,key:this.props.key,params:this.props.params||"",layout:this.props.layout||"",value:e}}template(){return"
          "}[me("$body")](){var{min:e,max:t,step:i,label:r,removable:s,layout:a,compact:o,wide:l,disabled:c}=this.state,h=+this.state.value.value.toString();isNaN(h)&&(h=0);var d=a,u=(+h).toString();return` -
          - ${r?``:""} -
          -
          -
          - -
          -
          - -
          -
          -
          - -
          - `}setMin(e){this.setState({min:y.parse(e)})}setMax(e){this.setState({max:y.parse(e)})}getValue(){return this.state.clamp?this.state.value.clamp(this.state.min,this.state.max):this.state.value}setValue(e){console.log(e),this.setState({value:y.parse(e)})}[X1('$body input[type="number"]')](){this.refs.$propertyNumber.addClass("focused")}[Y1('$body input[type="number"]')](){this.refs.$propertyNumber.removeClass("focused")}[ne("$remove")](){this.updateData({value:""})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[di('$body input[type="number"]')](){var e=+this.refs.$propertyNumber.value;this.getRef("$property").val(e),this.updateData({value:this.state.value.set(e)})}[di('$body input[type="range"]')](){this.trigger("changeRangeValue")}[Ke('$body input[type="range"]')+ct()](){}end(){this.trigger("changeRangeValue")}[we("changeRangeValue")](){var e=+this.getRef("$property").value;this.getRef("$propertyNumber").val(e),this.state.value===""&&(this.state.value=y.number(0)),this.updateData({value:this.state.value.set(e)})}}class Qi{constructor(){this.pathArray=[]}reset(){this.pathArray=[]}getPointString(e){return e.map(t=>`${t.x} ${t.y}`).join(" ")}makeString(e,t=[]){return this.pathArray.push(`${e} ${this.getPointString(t)}`),this}M(...e){return this.makeString("M",e)}L(...e){return this.makeString("L",e)}X(...e){const i=e[0],r={x:i.x-3,y:i.y-3},s={x:i.x+3,y:i.y-3},a={x:i.x-3,y:i.y+3},o={x:i.x+3,y:i.y+3};return this.M(r).L(o).M(s).L(a)}Q(...e){return this.makeString("Q",e)}C(...e){return this.makeString("C",e)}Z(){return this.makeString("Z")}get d(){return this.pathArray.join(" ").trim()}toString(e="object"){return``}}class Nx{constructor(e){this.viewport=e,this.segmentList=[]}get hasViewport(){return Boolean(this.viewport)}reset(){return this.segmentList=[],this}checkInViewport(e){if(!this.hasViewport)return!0;const t=this.viewport.applyVertexInverse([e.x,e.y,0]);return this.viewport.checkInViewport(t)}addLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addGuideLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:((this.checkInViewport(e)||this.checkInViewport(t))&&this.segmentList.push({line:!0,guide:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceLine(e,t){return this.hasViewport&&Rr(e.x,e.y,t.x,t.y)<1?this:(this.segmentList.push({line:!0,distance:!0,x1:e.x,y1:e.y,x2:t.x,y2:t.y}),this)}addDistanceAngle(e,t,i,r,s,a){return this.segmentList.push({angle:!0,rx:t,ry:i,line:a,degree:r,center:e,last:s}),this}addPoint(e,t,i,r,s=!1){return this.checkInViewport(t)&&this.segmentList.push(ze(P({},e),{cx:t.x,cy:t.y,selected:s,index:i,segment:r,isFirst:t.isFirst,isLast:t.isLast,isSecond:t.isSecond})),this}addStartPoint(e,t){return this.checkInViewport(t)&&this.segmentList.push(ze(P({},e),{cx:t.x,cy:t.y,start:!0})),this}addCurvePoint(e,t,i,r=!1){return this.checkInViewport(e)&&this.segmentList.push({curve:!0,cx:e.x,cy:e.y,index:t,selected:r,segment:i,isFirst:e.isFirst,isLast:e.isLast,isSecond:e.isSecond}),this}addText(e,t){return this.segmentList.push({type:"text",cx:e.x,cy:e.y,text:t+""}),this}toString(){return this.segmentList.sort((e,t)=>e.line&&!t.line?-1:!e.line&&t.line?1:0),this.segmentList.map(e=>e.angle?` - `:e.line?` - `:e.text?"":e.curve&&e.segment!=="startPoint"?` - `:e.start?` - `:` - `).join("")}}const Pg=["startPoint","endPoint","reversePoint"];function Kv(n,e,t,i,r){var s=n.filter(o=>o?Math.abs(o[e]-t)<=r:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));s.sort((o,l)=>o.dista).forEach(a=>{s.filter(o=>a[o]).forEach(o=>{var l=a[o],c=Math.abs(l[e]-t);c<=i&&r.push({dist:c,point:l})})}),r.sort((a,o)=>a.dist>o.dist?1:-1),r.length?r[0].point:null}function Zv(n,e,t,i=1){for(var r=[],s=0,a=n.length;sn4(e,t,d,i)).join(" ");return{d:h}}function n4(n,e,t,i=1){var{command:r,values:s}=t;switch(r){case"Z":return"Z";default:var a=s.map(o=>{var l=o.x-n===0?0:(o.x-n)/i,c=o.y-e===0?0:(o.y-e)/i;return`${l} ${c}`}).join(" ");return`${r} ${a}`}}function s4(n,e){return!(n.x2.valuee.x||n.y.value>e.y)}class a4{generatorPathString(e,t=0,i=0,r=1){return Zv(e,t,i,r).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Qi,this.guideLineManager=new Qi,this.segmentManager=new Nx(null),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const i=this.points[t.index][t.key];if(!!i)return{x:i.x,y:i.y,key:t.key,index:i.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var i=[];if(this.points.forEach((r,s)=>{Pg.forEach(a=>{const o=r[a];s4(e,o)&&i.push({x:o.x,y:o.y,key:a,index:s})})}),t){i=i.map(o=>{const l=this.makeSegmentKey(o);return ze(P({},o),{included:Boolean(this.selectedPointKeys[l])})});const r=i.filter(o=>o.included),s=i.filter(o=>!o.included);let a=[...this.selectedPointList];r.length&&(a=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(r.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...a,...s)}else this.select(...i)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:i,key:r,index:s})=>({x:t,y:i,key:r,index:+s})),e.forEach(t=>{var i=this.makeSegmentKey(t);this.selectedPointKeys[i]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(i=>{Pg.forEach(r=>{const{x:s,y:a}=i[r];t.push({x:s,y:a,key:r,index:i.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:i.x,y:i.y,key:e,index:t}):this.select(...this.selectedPointList.filter(r=>r.key!==e||r.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)&&this.select({x:i.x,y:i.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var i;var t=(i=this.points[e.index])==null?void 0:i[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var i=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[i]}commitTransformMatrix(e,t){var i=Wt([],[e.x,e.y,0],t);return{x:i[0],y:i[1]}}transformMat4(e){this.transformPoints.forEach((t,i)=>{var r=this.points[i];Object.assign(r.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(r.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(r.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:i,width:r,height:s}=this.transformRect,a=Wi();switch(Oi(a,a,[t,i,0]),e){case"flipX":os(a,a,[-1,1,1]),Oi(a,a,[-r,0,0]);break;case"flipY":os(a,a,[1,-1,1]),Oi(a,a,[0,-s,0]);break;case"flip":os(a,a,[-1,-1,1]),Oi(a,a,[-r,-s,0]);break}Oi(a,a,[-t,-i,0]),this.transformMat4(a)}initTransform(e){this.transformRect=rt(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:rt(t.startPoint),endPoint:rt(t.endPoint),reversePoint:rt(t.reversePoint)}))}setConnectedPoint(e,t){var i=this.state,r=i.dragXY.x+e,s=i.dragXY.y+t,a={x:r,y:s},o={x:r,y:s};i.dragPoints&&(i.reversePoint=xe.getReversePoint(i.startPoint,a));var l={startPoint:i.startPoint,endPoint:a,curve:!!i.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=rt(e),i=rt(e),r={startPoint:e,endPoint:t,curve:!1,reversePoint:i,connected:!1,close:!1};this.points.push(r)}getPrevPoint(e){return xe.getPrevPoint(this.points,e)}getIndexPoint(e){return xe.getIndexPoint(this.points,e)}getNextPoint(e){return xe.getNextPoint(this.points,e)}getConnectedPointList(e){return xe.getConnectedPointList(this.points,e)}isFirst(e){return xe.isFirst(e)}getLastPoint(e){return xe.getLastPoint(this.points,e)}setCachePoint(e,t){var i=this.state;this.snapPointList=[],this.selectedIndex=e,i.connectedPoint=this.getPrevPoint(e),i.connectedPointList=rt(xe.getConnectedPointList(this.points,this.selectedIndex)),i.connectedPoint&&!i.connectedPoint.connected&&(i.connectedPoint=null),i.segment=this.getIndexPoint(e),i.segment.connected&&(i.connectedPoint=this.getNextPoint(e));var r=this.isFirst(i.segment);if(r){var s=this.getLastPoint(e);s.connected&&(i.connectedPoint=s)}i.segmentKey=t,i.isCurveSegment=i.segment.curve&&i.segmentKey!="startPoint",i.originalSegment=rt(i.segment),i.connectedPoint&&(i.originalConnectedPoint=rt(i.connectedPoint)),i.cachedPoints=[],this.points.filter(a=>a&&a!=i.segment).forEach(a=>{i.cachedPoints.push(a.startPoint,a.reversePoint,a.endPoint)})}clamp(e,t,i){return Bi(t)||Bi(i)?e:Math.max(t,Math.min(i,e))}moveSegment(e,t,i,r=void 0,s=void 0,a=void 0){if(r){const h=this.points[r.index][e];h.x=this.clamp(r[e].x+t,0,s),h.y=this.clamp(r[e].y+i,0,a)}else{var o=this.state,l=o.originalSegment[e],c=o.segment[e];l&&(c.x=this.clamp(l.x+t,0,s),c.y=this.clamp(l.y+i,0,a))}}calculateToCurve(e,t,i){var r=(t.startPoint.x+i.startPoint.x)/2,s=(t.startPoint.y+i.startPoint.y)/2,a=(t.startPoint.x-r)/2,o=(t.startPoint.y-s)/2;return e.endPoint={x:e.startPoint.x+a,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-a,y:e.startPoint.y-o},{dx:a,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=rt(t.startPoint),t.endPoint=rt(t.startPoint),t.command==="M"){var i=xe.getPrevPoint(this.points,t.index);i.connected&&(i.curve=!1,i.reversePoint=rt(i.startPoint),i.endPoint=rt(i.startPoint))}else{var r=this.getNextPoint(e);if(r&&r.command==="M"){var s=r;s.curve=!1,s.reversePoint=rt(s.startPoint),s.endPoint=rt(s.startPoint)}}else{t.curve=!0;var a=this.getPrevPoint(e),r=this.getNextPoint(e);if(r&&r.indexe&&r.command!=="M")this.calculateToCurve(t,r,a);else if(!r&&a){var o=(t.startPoint.x-a.startPoint.x)/3,l=(t.startPoint.y-a.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=xe.getReversePoint(t.startPoint,t.endPoint)}else if(!a&&r){var o=(t.startPoint.x-r.startPoint.x)/3,l=(t.startPoint.y-r.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=xe.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,i){var r=this.state;this.moveSegment(e,t,i);var s=e==="endPoint"?"reversePoint":"endPoint";r.segment[s]=xe.getReversePoint(r.segment.startPoint,r.segment[e])}rotateSegmentTarget(e,t){var i=this.state;if(i.originalSegment&&i.segment){var{x:r,y:s}=i.originalSegment.startPoint,{x:a,y:o}=i.segment[e],{x:l,y:c}=i.originalSegment[t],{x:h,y:d}=Tl(si(a-r,o-s),Rr(l,c,r,s),r,s);i.segment[t]={x:h,y:d}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,d,p,r=1){var s=this.state,a=s.cachedPoints,o=s.originalSegment[e];if(!e)return{dx:d,dy:p,snapPointList:[]};var l=o.x+d,c=o.y+p,{point:h,distanceValue:d}=Kv(a,"x",l,d,r),{point:u,distanceValue:p}=Kv(a,"y",c,p,r),f={x:o.x+d,y:o.y+p},g=[];return h&&g.push({startPoint:h,endPoint:f}),u&&g.push({startPoint:u,endPoint:f}),{dx:d,dy:p,snapPointList:g}}copySegment(e,t){t.startPoint=rt(e.startPoint),t.endPoint=rt(e.endPoint),t.reversePoint=rt(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.x=i.x+e,r.y=i.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t,i,r){this.selectedGroup.points.forEach(s=>{const a=this.points[s.index];a.startPoint.x=this.clamp(s.startPoint.x+e,0,i),a.startPoint.y=this.clamp(s.startPoint.y+t,0,r),a.endPoint.x=s.endPoint.x+e,a.endPoint.y=s.endPoint.y+t,a.reversePoint.x=s.reversePoint.x+e,a.reversePoint.y=s.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return xe.getSplitedGroupList(this.points)}get groupList(){return xe.getGroupList(this.points)}getGroup(e,t){return xe.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(r=>r.groupIndex):(this.selectedPointList.forEach(r=>{const s=this.getGroup(t,r.index);s&&e.add(s.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.removed=!0});const e=xe.splitPoints(this.points),t=xe.recoverPoints(e.map(i=>i.filter(r=>!r.startPoint.removed).map(r=>(r.endPoint.removed&&(r.endPoint=rt(r.startPoint)),r.reversePoint.removed&&(r.reversePoint=rt(r.startPoint)),xe.isEqual(r.endPoint,r.startPoint,r.reversePoint)&&(r.command="L",r.curve=!1),r))));this.points=t,this.select()}move(e,t,i,r,s){var a=this.state,{isCurveSegment:o,segmentKey:l,connectedPoint:c}=a;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t,r,s);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:h}=this.calculateSnap(l,e,t,3);if(this.snapPointList=h||[],o)if(i.altKey)this.moveSegment(l,e,t),this.rotateSegment(l);else if(i.shiftKey)this.moveSegment(l,e,t);else{this.moveSegment(l,e,t);var d=l==="endPoint"?"reversePoint":"endPoint";a.segment[d]=xe.getReversePoint(a.segment.startPoint,a.segment[l])}else this.moveSegment("startPoint",e,t,null,r,s),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),i.altKey||a.connectedPointList.forEach(f=>{this.moveSegment("startPoint",e,t,f,r,s),this.moveSegment("endPoint",e,t,f),this.moveSegment("reversePoint",e,t,f)});c&&this.copySegment(a.segment,a.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t,r,s)}moveEnd(e,t){var i=this.state,r=this.points,s=i.dragXY.x+e,a=i.dragXY.y+t,o={x:s,y:a},l={x:s,y:a};i.dragPoints&&(l=xe.getReversePoint(i.startPoint,o)),r.push({command:i.clickCount===0?"M":"",startPoint:i.startPoint,endPoint:o,curve:!!i.dragPoints,reversePoint:l}),i.startPoint=null,i.dragPoints=!1,i.moveXY=null}setPoint(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i),o=[ze(P({},s),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},ze(P({},a),{reversePoint:e.second[2]})],l=xe.getIndex(r,t);return r.splice(l,2,...o),this.points=r,l+1}setPointQuard(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i);if(s.curve&&a.curve===!1){var o=[ze(P({},s),{endPoint:s.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=xe.getIndex(r,t);r.splice(l,1,...o)}else{var o=[P({},s),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},ze(P({},a),{reversePoint:e.second[1],curve:!0})],l=xe.getIndex(r,t);r.splice(l,2,...o)}return this.points=r,l+1}setPointLine(e){var t=e.first[0],i=this.clonePoints,r=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],s=xe.getIndex(i,t);return i.splice(s+1,0,...r),this.points=i,s+1}toPath(e=0,t=0,i=1){return Zv(this.clonePoints,e,t,i)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var i=Math.min(e.startPoint.x,t.startPoint.x),r=Math.max(e.startPoint.x,t.startPoint.x),s=Math.min(e.startPoint.y,t.startPoint.y),a=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:a},{x:r,y:a}).addDistanceLine({x:r,y:s},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:s},{x:i,y:a}).addDistanceLine({x:i,y:a},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(i.startPoint).L(i.endPoint).X(i.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:i,points:r},s)=>{const a=this.generatorPathString(r),o=xn(be.fromSVGString(a).getBBox());return{points:r,startPointIndex:i,groupIndex:s,center:o[4],d:a}}),t=e.length;return` - - ${e.map(i=>{const{center:r}=i,[s,a]=r;return` - - - ${t>1&&` - ${i.groupIndex+1} - `} - `}).join("")} - - `}toSVGString(){return` - - ${this.guideLineManager.toString("guide")} - ${this.splitLines.join("")} - ${this.makeSnapLines()} - ${this.makePathArea()} - ${this.segmentManager.toString()} - - `}}function ys([n,e]){return{x:n,y:e}}function bd(n,e){function t(r){if(e[0]e[1])return e[0]-r*(e[0]-e[1])}function i(r,s,a){const o=Math.min(r,s),l=Math.max(r,s);return(a-o)/(l-o)}return r=>{if(n[0]n[1])return t(1-i(n[0],n[1],r))}}const o4=class extends ge{convertToCurve(n){this.pathGenerator.convertToCurve(n),this.renderPath(),this.updatePathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[_h("$view [data-segment]")+et("isEditableSegment")+wt](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}[q1("$view [data-segment]")+wt+U1(300)](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}},l4=class extends o4{calculatePointOnLine(n,e){var t=new be(n);return t.getClosedPoint(e)}[Ke("$view .split-path")+at()+ct()](n){this.initRect();var e=new be(n.$dt.attr("d")),t={x:n.xy.x-this.state.rect.x,y:n.xy.y-this.state.rect.y},i=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current&&this.updatePathLayer();return}else{if(e.segments[1].command==="C"){var r=[ys(e.segments[0].values),ys(e.segments[1].values.slice(0,2)),ys(e.segments[1].values.slice(2,4)),ys(e.segments[1].values.slice(4,6))],s=om(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPoint(Uc(r,a))}else if(e.segments[1].command==="Q"){var r=[ys(e.segments[0].values),ys(e.segments[1].values.slice(0,2)),ys(e.segments[1].values.slice(2,4))],s=lm(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointQuard(Wc(r,a))}else if(e.segments[1].command==="L"){var r=[ys(e.segments[0].values),ys(e.segments[1].values.slice(0,2))],s=cm(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointLine(Xc(r,a)),n.altKey&&this.pathGenerator.convertToCurve(i)}this.renderPath(),this.updatePathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(i,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",i)}}};class c4 extends l4{initialize(){super.initialize(),this.pathParser=new be,this.pathGenerator=new a4(this)}initState(){return{domain:this.props.domain||[0,1],range:this.props.range||[1,0],isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}template(){return` -
          - - - - - - - - - - - -
          -
          - - - -
          -
          -
          `}[Me("$el")](){return{style:{height:y.px(this.props.height)||200}}}initRect(e=!1){(!this.state.rect||e||this.state.rect.width==0||this.state.rect.height==0)&&(this.state.rect=this.refs.$view.rect())}[H("PathEditorDone")](){this.updatePathLayer()}[Ar()+So](){this.trigger("PathEditorDone")}[Ar()+Bc](){this.state.current&&this.updatePathLayer()}[Ar()+i2](){console.log("delete")}[Ar("$el .segment")](e){const t=+e.$dt.data("index");switch(console.log(t),e.code){case"Delete":case"Backspace":this.trigger("deleteSegment");break}}[we("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[we("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}recoverAreaToPath(e){this.initRect(!0);var t=new be(e);return t.scaleFunc(this.state.domainScaleInvert,this.state.rangeScaleInvert),t.d}updatePathLayer(){var{d:e}=this.pathGenerator.toPath();const t=this.recoverAreaToPath(e);this.parent.trigger(this.props.onchange,this.state.key,t)}changeMode(e,t){this.setState(P({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[])}isMode(e){return this.state.mode===e}convertPathToArea(e){this.initRect(!0);const t=this.state.rect.width,i=this.state.rect.height;this.state.domainScale=bd([0,1],[0,t]),this.state.rangeScale=bd([1,0],[0,i]),this.state.domainScaleInvert=bd([0,t],[0,1]),this.state.rangeScaleInvert=bd([0,i],[1,0]),this.pathParser.reset(e.d).scaleFunc(this.state.domainScale,this.state.rangeScale)}refreshEditorView(e){this.convertPathToArea(e),this.pathGenerator.setPoints(this.pathParser.convertGenerator()),this.renderPath()}afterRender(){const{mode:e,value:t}=this.props,i={d:t};e==="move"&&(i.current=null,i.points=[]),this.changeMode(e,i),window.setTimeout(()=>{this.refreshEditorView(i,!0)},10)}[Me("$view")](){var i;const e=this.pathGenerator.makeSVGPath(),t=y.parse((i=this.state.current)==null?void 0:i["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[Me("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}renderPath(){this.bindData("$view")}get checkDistance(){return!1}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Yi(be.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[Kl("$view")+wt](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=qe.create(e.target),i=t.hasClass("split-path");i?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[Ke("$view :not(.split-path)")+wt+ds+at()+ct()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y};var i=qe.create(e.target);if(this.$segmentTarget=i,i.hasClass("svg-editor-canvas")&&!t||(this.pathGenerator.reselect(),this.state.isSegment=i.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&i.attr("data-is-first")==="true",this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1),t){if(this.state.isFirstSegment){var r=+i.attr("data-index");this.state.startPoint=this.pathGenerator.points[r].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[r,s]=i.attrs("data-index","data-segment-point");const o=+r;this.pathGenerator.setCachePoint(o,s),this.pathGenerator.selectKeyIndex(s,o),this.state.segmentKey=s,this.renderPath()}}move(e,t){const i=this.$config.get("bodyEvent");if(this.state.segmentKey==="startPoint"){const r={x:Math.max(0,Math.min(this.state.rect.width,i.xy.x-this.state.rect.x)),y:Math.max(0,Math.min(this.state.rect.height,i.xy.y-this.state.rect.y))};e=r.x-this.state.dragXY.x,t=r.y-this.state.dragXY.y}this.isMode("segment-move")?(this.pathGenerator.move(e,t,i,this.state.rect.width,this.state.rect.height),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&Rr(e,t,0,0)>=2&&(this.state.dragPoints=!i.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),Ye(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){this.$config.set("set.move.control.point",!1),this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current&&this.updatePathLayer()):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}}class h4 extends ge{initState(){var e=new be(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=e.$(".command"),i=t.attr("data-command");if(i==="Z"&&t.attr("data-toggle")==="false")return null;var r=e.$$(".values input[type=number]").map(s=>+s.value);return{command:i,values:r}}).filter(e=>e)}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPathData()}modifyPathData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new be(e)})}getValue(){return this.state.parser.joinPath()}template(){return` -
          -
          -
          - `}[me("$data")](){var e=[];this.state.parser.segments.forEach((r,s)=>{var a=P({},r);e.push(a);var o=this.state.parser.segments[s+1];o&&o.command==="M"&&(a.command!=="Z"?e.push({command:"Z",toggle:!1,values:[]}):a.toggle=!0)});var t=this.state.parser.segments[this.state.parser.segments.length-1];t&&t.command!=="Z"&&e.push({command:"Z",toggle:!1,values:[]});var i=e.map(r=>{var s=r.command==="M"?"m":"";return` -
          -
          ${r.command}
          -
          - ${r.values.map(a=>``).join("")} - - ${r.command==="Z"?r.toggle===!1?"opened":"closed":""} -
          -
          - `});return i.unshift(` -
          -
          -
          - X - Y -
          -
          - `),i}[di("$data input[type=number]")+Nt(300)](){this.updateData()}[ne("$data .command[data-toggle]")](e){var[t,i]=e.$dt.attrs("data-command","data-toggle");t==="Z"&&(i!=="false"?i="false":i="true",e.$dt.attr("data-toggle",i),this.updateData())}}const d4=/[\b\t ,]/g;class po extends be{constructor(e=""){super(e)}reset(e=""){this.segments=[],this.points=e,this.parse()}resetSegments(e=[]){this.segments=e,this.points=this.joinPoints()}parse(){var e=this.points;Array.isArray(e)&&(e=e.join(" "));for(var t=e.trim().split(d4).filter(a=>a),i=[],r=0,s=t.length;r`${i.x},${i.y}`).join(" ")}each(e,t=!1){var i=this.segments.map(r=>e.call(this,r));if(t)return i;this.segments=i}_loop(e,t=!1){return this.each(function(i){var[r,s]=e([i.x,i.y],0);return i.x=r,i.y=s,i},t)}clone(){return new po(this.joinPoints())}toString(){return this.joinPoints()}}class u4 extends ge{initState(){var e=new po(this.props.value||"");return{parser:e}}makeSegments(){return this.refs.$data.$$(".segment").map(e=>{var t=+e.$('[data-key="x"]').value,i=+e.$('[data-key="y"]').value;return{x:t,y:i}})}updateData(){var e=this.makeSegments();this.state.parser.resetSegments(e),this.modifyPolygonData()}modifyPolygonData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}setValue(e){this.setState({parser:new po(e||"")})}getValue(){return this.state.parser.joinPoints()}template(){return` -
          -
          -
          - `}[me("$data")](){return this.state.parser.segments.map(e=>` -
          -
          - - -
          -
          - `)}[di("$data input[type=number]")+Nt(300)](){this.updateData()}}class p4 extends ge{initState(){var e=this.props.split||",",t=Array.isArray(this.props.options)?this.props.options.map(a=>gi(a)?{value:a,text:a}:a):(this.props.options||"").split(e).map(a=>a.trim()).map(a=>{const[o,l]=a.split(":");return{value:o,text:l}}),i=this.props.icons||[],r=this.props.colors||[],s=this.props.value||"";return{label:this.props.label||"",compact:cs(this.props.compact)?this.props.compact:this.props.compact==="true",options:t,icons:i,colors:r,value:s,height:this.props.height}}template(){var{label:e,compact:t,height:i}=this.state,r=e?"has-label":"",s=t?"compact":"",a=i?`--elf--input-height: ${i}px;`:"";return` -
          - ${e?``:""} -
          -
          - `}[ne("$close")](){this.updateData({value:""}),this.refresh()}getValue(){return this.state.value||""}setValue(e){this.setState({value:e})}[me("$options")+It](){return this.state.options.map((e,t)=>{var i=e.value,r=e.text,s=e.text,a="",o=i===this.state.value,l=o?"selected":"";if(e.value===""){var r="";s="close",$t(this.state.icons[t])&&(a="icon",r=LI(),i="__blank__")}else{var c=this.state.icons[t];Ue[c]&&(a="icon"),s=r,r=Ue[c]||r||c||e.text||e.value}var h=this.state.colors[t],d={};return o&&h&&(d["background-color"]=h),`
          ${r}
          `})}[ne("$options .select-icon-item")](e){var t=e.$dt.attr("data-value");!t||t==="__blank__"||(this.updateData({value:t}),this.refresh())}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}const Jv=[[10,5],[5,1],[1,5],[.9],[15,10,5],[15,10,5,10],[15,10,5,10,15],[5,5,1,5]];class f4 extends ge{initState(){var e=Ni(this.props.value)?this.props.value:this.generateValue(this.props.value||"");return{label:this.props.label||"",value:e,count:1}}template(){const{label:e}=this.state,t=!!e;return` -
          -
          - ${t?``:""} -
          - -
          -
          -
          -
          -
          - `}[ne("$el .tools label")](){this.refs.$list.toggle()}getValue(){return this.state.value}generateValue(e){return e.split(" ").filter(Boolean).map(t=>+t)}setValue(e){Ni(e)||(e=this.generateValue(e)),this.setState({value:e})}[me("$list")](){return Jv.map((e,t)=>` -
          -
          - - - -
          -
          - `)}[me("$body")](){return this.state.count++,this.state.value.map((e,t)=>{var i=t+1;return` -
          - ${W("NumberInputEditor",{ref:`$dash-${this.state.count}-${i}`,compact:!0,key:t,value:e,min:0,max:100,step:1,onchange:"changeRangeEditor"})} - -
          - `})}[we("changeRangeEditor")](e,t){var i=+e;this.state.value[i]=t,this.modifyStrokeDashArray()}[ne("$list .dash-sample")](e){const t=Jv[+e.$dt.data("index")];this.setState({value:t},!1),this.refresh(),this.modifyStrokeDashArray(),this.refs.$list.toggle()}[ne("$add")](){this.setState({value:[...this.state.value,0]},!1),this.refresh(),this.modifyStrokeDashArray()}[ne("$body .delete")](e){const t=+e.$dt.attr("data-index");this.state.value.splice(t,1),this.refresh(),this.modifyStrokeDashArray()}modifyStrokeDashArray(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}[Ke("document")](e){qe.create(e.target).closest("elf--stroke-dasharray-editor")||this.refs.$list.hide()}}class g4 extends ge{initState(){var e=this.props.value;return{label:this.props.label||"",height:100,value:e}}template(){var{label:e,height:t,value:i}=this.state,r=e?"has-label":"";return` -
          - ${e?``:""} - -
          - `}getValue(){return this.refs.$options.value}setValue(e,t){this.setState({value:e},!1),t&&this.setState({height:t},!1),this.refresh()}[Me("$text")](){return{text:this.state.value||"",style:{height:this.state.height}}}[di("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class m4 extends ge{initState(){var e=this.props.value;return{label:this.props.label||"",value:e}}template(){var{label:e,value:t}=this.state,i=e?"has-label":"";return` -
          - ${e?``:""} -
          - -
          -
          - `}getValue(){return this.refs.$text.value}setValue(e){this.refs.$text.val(e),this.setState({value:e},!1)}[Me("$text")](){return{value:this.state.value}}[di("$text")](){this.updateData({value:this.refs.$text.value})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}class fn extends Vr{static parse(e){return new fn(e)}static parseStyle(e=""){var t=Ih(e);e=e.trim();var i=t.str.split(",").filter(r=>r.trim()).map(r=>{var s=r.trim().split(" "),a=s.filter(l=>l.includes("@")).map(l=>dp(l,t.matches)||"black"),o=s.filter(l=>!l.includes("@"));return fn.parse({color:a[0]||"rgba(0, 0, 0, 1)",offsetX:y.parse(o[0]||"0px"),offsetY:y.parse(o[1]||"0px"),blurRadius:y.parse(o[2]||"0px")})});return i}static join(e){return e.map(t=>fn.parse(t)).join(", ")}getDefaultObject(){return super.getDefaultObject({itemType:"text-shadow",offsetX:"0px",offsetY:"0px",blurRadius:"0px",color:"rgba(0, 0, 0, 1)"})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("offsetX","offsetY","blurRadius","color"))}convert(e){return e=super.convert(e),bi(e.offsetX)?e.offsetX=y.px(e.offsetX):e.offsetX&&(e.offsetX=y.parse(e.offsetX)),bi(e.offsetY)?e.offsetY=y.px(e.offsetY):e.offsetY&&(e.offsetY=y.parse(e.offsetY)),bi(e.blurRadius)?e.blurRadius=y.px(e.blurRadius):e.blurRadius&&(e.blurRadius=y.parse(e.blurRadius)),e}toCSS(){return{"text-shadow":this.toString()}}toString(){var{offsetX:e,offsetY:t,blurRadius:i,color:r}=this.json;return bi(e)&&(e=y.px(e)),bi(t)&&(t=y.px(t)),bi(i)&&(i=y.px(i)),`${e} ${t} ${i} ${r}`}}class v4 extends ge{initState(){return{textShadows:fn.parseStyle(this.props.value)}}template(){return` -
          -
          -
          - `}[me("$shadowList")](){var e=this.state.textShadows.map((t,i)=>` -
          - - ${W("ColorViewEditor",{mini:!0,key:"color",value:t.color,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetX",label:"X",value:t.offsetX,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,key:"offsetY",label:"Y",value:t.offsetY,params:i,onchange:"changeKeyValue"})} - ${W("NumberInputEditor",{mini:!0,label:"B",key:"blurRadius",value:t.blurRadius,params:i,onchange:"changeKeyValue"})} -
          - -
          -
          - `);return e.join("")}modifyTextShadow(){var e=this.state.textShadows.join(", ");this.parent.trigger(this.props.onchange,this.props.key,e)}[H("add")](e=""){e?this.state.textShadows=fn.parseStyle(e):this.state.textShadows.push(new fn),this.refresh(),this.modifyTextShadow()}[ne("$add")](){this.trigger("add")}[wn("$shadowList .shadow-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$shadowList .shadow-item")+wt](){}sortItem(e,t,i){e.splice(i+(tt.trim()).map(t=>{let[i,r]=t.split(":");return i=i.replace("--",""),{key:i,value:r}});return{hideLabel:this.props.hideLabel=="true",params:this.props.params||"",values:e}}template(){var e=this.state.hideLabel?"hide":"";return` -
          -
          - -
          - -
          -
          -
          -
          `}[H("add")](){this.state.values.push({key:"",value:""}),this.refresh(),this.updateData()}[ne("$add")](){this.trigger("add")}[me("$varList")](){return this.state.values.map((e,t)=>` -
          -
          - -
          -
          - -
          -
          - -
          -
          - `)}[ne("$varList .del")](e){var t=+e.$dt.attr("data-index");this.state.values.splice(t,1),this.refresh(),this.updateData()}[di("$varList input")](e){var t=+e.$dt.attr("data-index"),i=e.$dt.attr("data-type");this.state.values[t][i]=e.$dt.value,this.updateData()}updateData(){var e=this.state.values.map(t=>`${t.key}:${t.value}`).join(";");this.parent.trigger(this.props.onchange,e,this.props.params)}}var x4={BlendSelectEditor:_L,BoxShadowEditor:ek,ColorAssetsEditor:mA,ColorSingleEditor:vA,ColorViewEditor:yA,ComponentEditor:xA,CSSPropertyEditor:bA,CubicBezierEditor:_A,DirectionEditor:SA,FilterEditor:TA,FontSelectEditor:EA,GradientEditor:KA,IconListViewEditor:qA,InputArrayEditor:ZA,InputRangeEditor:JA,IterationCountEditor:QA,MediaProgressEditor:e4,NumberInputEditor:t4,NumberRangeEditor:i4,PathEditor:c4,PathDataEditor:h4,PolygonDataEditor:u4,RangeEditor:jx,SelectEditor:im,SelectIconEditor:p4,StrokeDashArrayEditor:f4,TextAreaEditor:g4,TextEditor:m4,TextShadowEditor:v4,VarEditor:y4};function jh(n){n.registerElement(x4),n.registerAlias({"icon-list-view":"IconListViewEditor","box-shadow":"BoxShadowEditor","text-shadow":"TextShadowEditor",component:"ComponentEditor","text-area":"TextAreaEditor",text:"TextEditor","color-single":"ColorSingleEditor","cubic-bezier":"CubicBezierEditor",path:"PathEditor","clip-path":"ClipPathEditor","color-view":"ColorViewEditor",var:"VarEditor","path-data":"PathDataEditor","polygon-data":"PolygonDataEditor","input-array":"InputArrayEditor","stroke-dash-array":"StrokeDashArrayEditor","number-input":"NumberInputEditor","number-range":"NumberRangeEditor","media-progress":"MediaProgressEditor","select-icon":"SelectIconEditor","css-property":"CSSPropertyEditor",direction:"DirectionEditor","iteration-count":"IterationCountEditor",gradient:"GradientEditor",filter:"FilterEditor",select:"SelectEditor","blend-select":"BlendSelectEditor",range:"RangeEditor","input-range":"InputRangeEditor","color-assets":"ColorAssetsEditor","font-select":"FontSelectEditor"})}var b4=[Th,Ch,Eh,Ph,jh,KI];class Nh extends ge{template(){return` - - - `}[me("$list")](){return Object.entries(Ue).map(([e,t])=>gi(t)===!1?"":t.replace(/\{console.log(...e)}},w4=Object.freeze(Object.defineProperty({__proto__:null,default:S4},Symbol.toStringTag,{value:"Module"})),M4={command:"history.redo",execute:function(n){n.context.history.redo()}},$4=Object.freeze(Object.defineProperty({__proto__:null,default:M4},Symbol.toStringTag,{value:"Module"})),P4={command:"history.undo",execute:function(n){n.context.history.undo()}},T4=Object.freeze(Object.defineProperty({__proto__:null,default:P4},Symbol.toStringTag,{value:"Module"})),C4={command:"keymap.keydown",execute:function(n,e){n.context.keyboardManager.add(e.code,e.keyCode,e),n.context.shortcuts&&n.context.shortcuts.execute(e,"keydown")}},E4=Object.freeze(Object.defineProperty({__proto__:null,default:C4},Symbol.toStringTag,{value:"Module"})),I4={command:"keymap.keyup",execute:function(n,e){n.context.keyboardManager.remove(e.key,e.keyCode),n.context.shortcuts&&n.context.shortcuts.execute(e,"keyup")}},L4=Object.freeze(Object.defineProperty({__proto__:null,default:I4},Symbol.toStringTag,{value:"Module"})),k4={command:"moveToCenter",description:"Move Layer to Center on Viewport",execute:function(n,e,t=!1){e&&n.context.viewport.moveToCenter(e,t?-.2:0,t)}},A4=Object.freeze(Object.defineProperty({__proto__:null,default:k4},Symbol.toStringTag,{value:"Module"})),R4={command:"pop.mode.view",execute:function(n,e=void 0){n.context.modeViewManager.popMode(e)}},O4=Object.freeze(Object.defineProperty({__proto__:null,default:R4},Symbol.toStringTag,{value:"Module"})),z4={command:"push.mode.view",execute:function(n,e=Ro.CanvasView){n.context.modeViewManager.pushMode(e),n.emit("updateModeView")}},V4=Object.freeze(Object.defineProperty({__proto__:null,default:z4},Symbol.toStringTag,{value:"Module"})),D4={command:"recoverCursor",execute:function(n){n.context.config.set("editor.cursor","auto"),n.context.config.set("editor.cursor.args",[])}},F4=Object.freeze(Object.defineProperty({__proto__:null,default:D4},Symbol.toStringTag,{value:"Module"})),j4={command:"refreshCursor",execute:function(n,e,...t){n.context.config.set("editor.cursor",e),n.context.config.set("editor.cursor.args",t)}},N4=Object.freeze(Object.defineProperty({__proto__:null,default:j4},Symbol.toStringTag,{value:"Module"})),B4={command:"setLocale",execute:function(n,e){n.setLocale(e),n.emit("changed.locale")}},G4=Object.freeze(Object.defineProperty({__proto__:null,default:B4},Symbol.toStringTag,{value:"Module"})),H4={command:"toggleToolHand",execute:function(n){n.context.config.is("editing.mode",ki.HAND)?n.context.config.set("editing.mode",ki.SELECT):n.context.config.set("editing.mode",ki.HAND),n.emit("hideLayerAppendView")}},U4=Object.freeze(Object.defineProperty({__proto__:null,default:H4},Symbol.toStringTag,{value:"Module"})),W4={command:"zoom.default",execute:function(n){n.context.viewport.zoomDefault()}},X4=Object.freeze(Object.defineProperty({__proto__:null,default:W4},Symbol.toStringTag,{value:"Module"})),Y4={command:"zoom.in",execute:function(n){n.context.viewport.zoomIn(.02)}},K4=Object.freeze(Object.defineProperty({__proto__:null,default:Y4},Symbol.toStringTag,{value:"Module"})),q4={command:"zoom.out",execute:function(n){n.context.viewport.zoomOut(.02)}},Z4=Object.freeze(Object.defineProperty({__proto__:null,default:q4},Symbol.toStringTag,{value:"Module"}));const J4={"./command_list/Console.js":w4,"./command_list/history.redo.js":$4,"./command_list/history.undo.js":T4,"./command_list/keymap.keydown.js":E4,"./command_list/keymap.keyup.js":L4,"./command_list/moveToCenter.js":A4,"./command_list/pop.mode.view.js":O4,"./command_list/push.mode.view.js":V4,"./command_list/recoverCursor.js":F4,"./command_list/refreshCursor.js":N4,"./command_list/setLocale.js":G4,"./command_list/toggle.tool.hand.js":U4,"./command_list/zoom.default.js":X4,"./command_list/zoom.in.js":K4,"./command_list/zoom.out.js":Z4},Bx={};Object.entries(J4).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),Bx[n]=e.default});class fp{static parse(e,t=!1){var[,i]=e.split("data:"),[r,...s]=i.split(","),[a,o]=r.split(";");return s=s.join(","),{mimeType:a,local:t&&fp.getLink(a,o,s)}}static getLink(e,t,i){if(t==="base64"){for(var r=window.atob(i),s=r.length,a=new window.Uint8Array(s),o=0;o{r.images.forEach(s=>{i[`#${s.id}`]=s})}),Object.keys(i).map(r=>{var s=i[r],a=fp.parse(s.original,!0);s.local=a.local}),t.forEach(r=>{r.layers=this.applyAsset(r.layers,i)}),t}applyAsset(e,t){return Array.isArray(e)?e=e.map(i=>this.applyAsset(i,t)):hs(e)?Object.keys(e).forEach(i=>{e[i]=this.applyAsset(e[i],t)}):gi(e)&&Object.keys(t).forEach(i=>{var r=t[i];e.indexOf(`#${r.id}`)>-1&&(e=e.replace(new RegExp(`#${r.id}`,"g"),r.local))}),e}}class eR{constructor(e){this.editor=e,this.commands=[]}log(){console.log(this.commands)}emit(...e){this.commands.push(e)}run(){this.editor.emit(this.commands)}add(e){this.commands=this.commands.concat(e.commands)}}class tR{constructor(e){return this.$editor=e,this.promiseProxy=this.localCommands={},this.loadCommands(),new Proxy(this,{get:(t,i)=>{var r=t[i];return Ye(r)?(...s)=>r.apply(t,s):this.makePromiseEvent(i)}})}loadCommands(e={}){Object.keys(e).forEach(t=>{Ye(e[t])?this.registerCommand(t,e[t]):this.registerCommand(e[t])})}registerCommand(e,t){if(this.localCommands[e])throw new Error(`command ${e} is already registered`);if(arguments.length===2){const i=(...r)=>{const s=t.call(this,this.$editor,...r);return this.$editor.debug("command execute",this,...r),s};i.source=e,this.localCommands[e]=i}else if(hs(e)){const i=(...r)=>{const s=e.execute.call(e,this.$editor,...r);return this.$editor.debug("command execute",e,...r),s};i.source=e.command,this.localCommands[e.command]=i}}getCallback(e){return this.localCommands[e]}makePromiseEvent(e){const t=this.getCallback(e);if(t)return(...i)=>new Promise(r=>{r(t(...i))})}executeCommand(e,t,...i){return this.$editor.context.stateManager.isPointerUp?(e=`history.${e}`,this.getCallback(e)(t,...i)):this.emit(e,...i)}emit(e,...t){const i=this.getCallback(e);if(i)return i(...t)}}class iR{constructor(e){this.editor=e,this.components={},this.inspectors={}}registerComponent(e,t){this.components[e]=t}registerInspector(e,t){this.inspectors[e]=t}isComponentClass(e){return!!this.getComponentClass(e)}getComponentClass(e){return this.components[e]||this.components.rect}getInspector(e){return this.inspectors[e]}createComponent(e,t={}){var i=this.getComponentClass(e);if(!i){console.warn(`${e} type is not valid.`);return}return new i(t)}createInspector(e,t=""){const i=this.getInspector(t||e.itemType);return Ye(i)?i(e)||[]:Ye(e.getProps)?e.getProps()||[]:[]}}class rR{constructor(e){this.editor=e,this.configList=[],this.config=new Map}load(){const e=this.editor.loadItem("config")||{};Object.keys(e).forEach(t=>{this.config.set(t,e[t])})}get(e){var t;return this.config.has(e)===!1&&this.config.set(e,(t=this.configList.find(i=>i.key==e))==null?void 0:t.defaultValue),this.config.get(e)}set(e,t,i=!0){const r=this.config.get(e);r!==t&&(this.config.set(e,t),this.editor.emit("config:"+e,t,r),i&&this.save())}push(e,t){const r=this.get(e).length;return this.setIndexValue(e,r,t),r}setIndexValue(e,t,i){const r=this.get(e);r[t]=i,this.set(e,[...r])}getIndexValue(e,t){return this.get(e)[t]}removeByIndex(e,t){const i=this.get(e);i.splice(t,1),this.set(e,[...i])}init(e,t){this.set(e,t,!1)}save(){const e={};this.configList.filter(t=>t.storage!=="none").forEach(t=>{e[t.key]=this.get(t.key)}),this.editor.saveItem("config",e)}setAll(e){Object.keys(e).forEach(t=>{this.set(t,e[t])})}getType(e){var t;return(t=this.configList.find(i=>i.key==e))==null?void 0:t.type}isType(e,t){return this.getType(e)===t}isBoolean(e){return this.isType(e,"boolean")}toggle(e){this.set(e,!this.get(e))}toggleWith(e,t,i){this.get(e)===t?this.set(e,i):this.set(e,t)}true(e){return this.get(e)===!0}false(e){return this.get(e)===!1}is(e,t){return this.get(e)===t}remove(e){this.config.delete(e),this.editor.emit("config:"+e)}registerConfig(e){this.config.set(e.key,e.defaultValue),this.configList.push(e)}}class nR{async load(e="default",...t){if(Ue[e]){const i=Ye(Ue[e])?Ue[e].call(Ue[e],...t):Ue[e],r=new window.Blob([i],{type:"image/svg+xml"});return new Promise(s=>{const a=new window.FileReader;a.onload=o=>{const l=o.target.result;s(`url(${l}) 12 12, auto`)},a.readAsDataURL(r)})}else return e}}class sR{constructor(e){this.editor=e,this.locales={},this.fallbackLang="en_US"}getLang(e=void 0){return e||this.fallbackLang}setFallbackLang(e){this.fallbackLang=e}get(e,t={},i=void 0){var a,o;const r=this.getLang(i),s=((a=this.locales[r])==null?void 0:a[e])||((o=this.locales[this.fallbackLang])==null?void 0:o[e])||e||void 0;if(Ye(s))return s(t);{let l=s;return e===l?e.split(".").pop():(Object.entries(t).forEach(([c,h])=>{l=l.replace(new RegExp(`{${c}}`,"ig"),h)}),l)}}hasKey(e,t=void 0){const i=this.getLang(t);return!!(this.locales[i][e]||this.locales[this.fallbackLang][e])}registerI18nMessage(e,t){this.locales[e]||(this.locales[e]={}),Object.assign(this.locales[e],t)}}class aR{constructor(e){this.editor=e,this.iconMap={}}get(e,t){const i=this.iconMap[e];return Ye(i)?i(t):ie(i||t.getIcon()||"rect")}set(e,t){this.iconMap[e]=t}registerIcon(e,t){this.set(e,t)}}class oR{constructor(e){this.editor=e,this.ui={}}registerUI(e,t={},i=1){this.ui[e]||(this.ui[e]=[]),Object.keys(t).forEach(r=>{const s=this.ui[e].find(a=>a.refClass===r);s?s.class=t[r]:this.ui[e].push({refClass:r,order:i,class:t[r]})})}getTargetUI(e){return this.ui[e]||[]}generate(e,t=!1){const i=this.getTargetUI(e);return i.sort((r,s)=>r.order===s.order?0:r.order>s.order?1:-1),i.map((r,s)=>{if(Ni(r.class))return V(...r.class);{const a={};return t&&(a.ref=`$${r.refClass}-${s}`),W(r.refClass,a)}}).join(` -`)}}class lR{constructor(e){this.editor=e,this.codeSet=new Set,this.keyCodeSet=new Set,this.event={}}add(e,t,i){this.codeSet.has(e)===!1&&this.codeSet.add(e),this.keyCodeSet.has(t)===!1&&this.keyCodeSet.add(t),this.event=i}remove(e,t){this.codeSet.delete(e),this.keyCodeSet.delete(t)}hasKey(e){return this.codeSet.has(e)||this.keyCodeSet.has(e)}check(...e){return e.some(t=>this.hasKey(t))}isShift(){return Boolean(this.event.shiftKey)}isCtrl(){return Boolean(this.event.ctrlKey)}isAlt(){return Boolean(this.event.altKey)}isMeta(){return Boolean(this.event.metaKey)}}class cR{constructor(e){this.editor=e,this.menus={}}registerMenu(e,t=[],i=1){this.menus[e]||(this.menus[e]=[]),Ni(t)||(t=[t]),t.forEach(r=>{this.menus[e].push(r)}),this.editor.emit("updateMenu",e)}getTargetMenu(e){return this.menus[e]||[]}}class hR{constructor(e){this.editor=e,this.modes=[Ro.CanvasView]}pushMode(e){this.isCurrentMode(e)||this.modes.push(e)}popMode(e=void 0){e?this.isCurrentMode(e)&&this.modes.pop():this.modes.pop()}currentMode(){return this.modes[this.modes.length-1]}isCurrentMode(e){return this.currentMode()===e}}class dR{constructor(e){this.editor=e,this.plugins=[]}registerPlugin(e){this.plugins.push(e)}async initializePlugin(e={}){return await Promise.all(this.plugins.map(async t=>await t(this.editor,e)))}}class uR{constructor(e){this.editor=e,this.renderers={},this.rendererTypes={}}getRenderType(e){return this.renderers[e]||(this.renderers[e]={}),this.renderers[e]}registerRenderer(e,t,i){const r=this.getRenderType(e);r[t]=i}registerRendererType(e,t){this.rendererTypes[e]=t}getRenderer(e){return this.rendererTypes[e]}getRendererInstance(e,t){return this.getRenderType(e)[t]}}var pR={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"CanvasView"},fR=Object.freeze(Object.defineProperty({__proto__:null,default:pR},Symbol.toStringTag,{value:"Module"})),gR={category:"Tool",key:"a",command:"addLayerView",args:["artboard"],description:"Add ArtBoard",when:"LayerAppendView"},mR=Object.freeze(Object.defineProperty({__proto__:null,default:gR},Symbol.toStringTag,{value:"Module"})),vR={category:"Tool",key:"b",command:"addLayerView",args:["brush"],description:"Draw SVG Path",when:"CanvasView"},yR=Object.freeze(Object.defineProperty({__proto__:null,default:vR},Symbol.toStringTag,{value:"Module"})),xR={category:"Tool",key:"o",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},bR=Object.freeze(Object.defineProperty({__proto__:null,default:xR},Symbol.toStringTag,{value:"Module"})),_R={category:"Tool",key:"l",command:"addLayerView",args:["circle"],description:"Add circle layer",when:"CanvasView"},SR=Object.freeze(Object.defineProperty({__proto__:null,default:_R},Symbol.toStringTag,{value:"Module"})),wR={category:"Tool",key:"p",command:"addLayerView",args:["path"],description:"Add SVG Path layer",when:"CanvasView"},MR=Object.freeze(Object.defineProperty({__proto__:null,default:wR},Symbol.toStringTag,{value:"Module"})),$R={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"CanvasView"},PR=Object.freeze(Object.defineProperty({__proto__:null,default:$R},Symbol.toStringTag,{value:"Module"})),TR={category:"Tool",key:"m",command:"addLayerView",args:["rect"],description:"Add rect layer",when:"CanvasView"},CR=Object.freeze(Object.defineProperty({__proto__:null,default:TR},Symbol.toStringTag,{value:"Module"})),ER={category:"Tool",key:"r",command:"addLayerView",args:["rect",{backgroundColor:"gray"}],description:"Add rect layer",when:"LayerAppendView"},IR=Object.freeze(Object.defineProperty({__proto__:null,default:ER},Symbol.toStringTag,{value:"Module"})),LR={category:"Tool",key:"t",command:"addLayerView",args:["text"],description:"Add text layer",when:"CanvasView"},kR=Object.freeze(Object.defineProperty({__proto__:null,default:LR},Symbol.toStringTag,{value:"Module"})),AR={category:"Edit",key:"cmd+c",command:"clipboard.copy",description:"Copy objects",when:"CanvasView"},RR=Object.freeze(Object.defineProperty({__proto__:null,default:AR},Symbol.toStringTag,{value:"Module"})),OR={category:"Edit",key:"cmd+v",win:"ctrl+v",command:"clipboard.paste",description:"Paste selected objects",when:"CanvasView"},zR=Object.freeze(Object.defineProperty({__proto__:null,default:OR},Symbol.toStringTag,{value:"Module"})),VR={category:"Tool",key:"escape",command:"select.none",description:"None selection",when:"CanvasView"},DR=Object.freeze(Object.defineProperty({__proto__:null,default:VR},Symbol.toStringTag,{value:"Module"})),FR={category:"Group",key:"cmd+g",win:"ctrl+g",command:"group.item",description:"Grouping selected items",when:"CanvasView"},jR=Object.freeze(Object.defineProperty({__proto__:null,default:FR},Symbol.toStringTag,{value:"Module"})),NR={category:"History",key:"cmd+shift+z",win:"ctrl+shift+z",command:"history.redo",description:"redoing in history",when:"CanvasView"},BR=Object.freeze(Object.defineProperty({__proto__:null,default:NR},Symbol.toStringTag,{value:"Module"})),GR={category:"History",key:"cmd+z",win:"ctrl+z",command:"history.undo",description:"undoing in history",when:"CanvasView"},HR=Object.freeze(Object.defineProperty({__proto__:null,default:GR},Symbol.toStringTag,{value:"Module"})),UR={category:"Layer",key:"Alt+ArrowDown",command:"moveLayer",description:"move 5px to down",args:[0,5],when:"CanvasView"},WR=Object.freeze(Object.defineProperty({__proto__:null,default:UR},Symbol.toStringTag,{value:"Module"})),XR={category:"Layer",key:"Alt+ArrowLeft",command:"moveLayer",description:"move 5px to left",args:[-5,0],when:"CanvasView"},YR=Object.freeze(Object.defineProperty({__proto__:null,default:XR},Symbol.toStringTag,{value:"Module"})),KR={category:"Layer",key:"Alt+ArrowRight",command:"moveLayer",description:"move 5px to right",args:[5,0],when:"CanvasView"},qR=Object.freeze(Object.defineProperty({__proto__:null,default:KR},Symbol.toStringTag,{value:"Module"})),ZR={category:"Layer",key:"Alt+ArrowUp",command:"moveLayer",description:"move 5px to up",args:[0,-5],when:"CanvasView"},JR=Object.freeze(Object.defineProperty({__proto__:null,default:ZR},Symbol.toStringTag,{value:"Module"})),QR={category:"Layer",key:"[",command:"history.send.backward",description:"move layer to below",args:["send backward"],when:"CanvasView"},eO=Object.freeze(Object.defineProperty({__proto__:null,default:QR},Symbol.toStringTag,{value:"Module"})),tO={category:"Layer",key:"]",command:"history.bring.forward",description:"move layer to above",args:["bring forward"],when:"CanvasView"},iO=Object.freeze(Object.defineProperty({__proto__:null,default:tO},Symbol.toStringTag,{value:"Module"})),rO={category:"Layer",key:"ArrowDown",command:"moveLayer",description:"move 1px to down",args:[0,1],when:"CanvasView"},nO=Object.freeze(Object.defineProperty({__proto__:null,default:rO},Symbol.toStringTag,{value:"Module"})),sO={category:"Layer",key:"ArrowLeft",command:"moveLayer",description:"move 1px to left",args:[-1,0],when:"CanvasView"},aO=Object.freeze(Object.defineProperty({__proto__:null,default:sO},Symbol.toStringTag,{value:"Module"})),oO={category:"Layer",key:"ArrowRight",command:"moveLayer",description:"move 1px to right",args:[1,0],when:"CanvasView"},lO=Object.freeze(Object.defineProperty({__proto__:null,default:oO},Symbol.toStringTag,{value:"Module"})),cO={category:"Layer",key:"ArrowUp",command:"moveLayer",description:"move 1px to up",args:[0,-1],when:"CanvasView"},hO=Object.freeze(Object.defineProperty({__proto__:null,default:cO},Symbol.toStringTag,{value:"Module"})),dO={category:"Layer",key:"Shift+ArrowDown",command:"moveLayer",description:"move 10px to down",args:[0,10],when:"CanvasView"},uO=Object.freeze(Object.defineProperty({__proto__:null,default:dO},Symbol.toStringTag,{value:"Module"})),pO={category:"Layer",key:"Shift+ArrowLeft",command:"moveLayer",description:"move 10px to left",args:[-10,0],when:"CanvasView"},fO=Object.freeze(Object.defineProperty({__proto__:null,default:pO},Symbol.toStringTag,{value:"Module"})),gO={category:"Layer",key:"Shift+ArrowRight",command:"moveLayer",description:"move 10px to right",args:[10,0],when:"CanvasView"},mO=Object.freeze(Object.defineProperty({__proto__:null,default:gO},Symbol.toStringTag,{value:"Module"})),vO={category:"Layer",key:"Shift+ArrowUp",command:"moveLayer",description:"move 10px to up",args:[0,-10],when:"CanvasView"},yO=Object.freeze(Object.defineProperty({__proto__:null,default:vO},Symbol.toStringTag,{value:"Module"})),xO={category:"Layer",key:"Meta+ArrowLeft",command:"rotateLayer",description:"rotate to left",args:[-5],when:"CanvasView"},bO=Object.freeze(Object.defineProperty({__proto__:null,default:xO},Symbol.toStringTag,{value:"Module"})),_O={category:"Layer",key:"Meta+ArrowRight",command:"rotateLayer",description:"rotate to right",args:[5],when:"CanvasView"},SO=Object.freeze(Object.defineProperty({__proto__:null,default:_O},Symbol.toStringTag,{value:"Module"})),wO={category:"Layer",key:"Backspace",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},MO=Object.freeze(Object.defineProperty({__proto__:null,default:wO},Symbol.toStringTag,{value:"Module"})),$O={category:"Layer",key:"Delete",command:"history.removeLayer",description:"Delete selected items",args:["Delete selected items"],when:"CanvasView"},PO=Object.freeze(Object.defineProperty({__proto__:null,default:$O},Symbol.toStringTag,{value:"Module"})),TO={category:"Path",key:"Backspace",command:"segment.delete",description:"Delete selected segment",when:"PathEditorView"},CO=Object.freeze(Object.defineProperty({__proto__:null,default:TO},Symbol.toStringTag,{value:"Module"})),EO={category:"Path",key:"Alt+ArrowDown",command:"segment.move.down",description:"move 5px to down",args:[{dy:5}],when:"PathEditorView"},IO=Object.freeze(Object.defineProperty({__proto__:null,default:EO},Symbol.toStringTag,{value:"Module"})),LO={category:"Path",key:"Alt+ArrowLeft",command:"segment.move.left",description:"move 5px to left",args:[{dx:5}],when:"PathEditorView"},kO=Object.freeze(Object.defineProperty({__proto__:null,default:LO},Symbol.toStringTag,{value:"Module"})),AO={category:"Path",key:"Alt+ArrowRight",command:"segment.move.right",description:"move 5px to right",args:[{dx:5}],when:"PathEditorView"},RO=Object.freeze(Object.defineProperty({__proto__:null,default:AO},Symbol.toStringTag,{value:"Module"})),OO={category:"Path",key:"Alt+ArrowUp",command:"segment.move.up",description:"move 5px to up ",args:[{dy:5}],when:"PathEditorView"},zO=Object.freeze(Object.defineProperty({__proto__:null,default:OO},Symbol.toStringTag,{value:"Module"})),VO={category:"Path",key:"ArrowDown",command:"segment.move.down",description:"move 1px to down",args:[{dy:1}],when:"PathEditorView"},DO=Object.freeze(Object.defineProperty({__proto__:null,default:VO},Symbol.toStringTag,{value:"Module"})),FO={category:"Path",key:"ArrowLeft",command:"segment.move.left",description:"move 1px to left",args:[{dx:1}],when:"PathEditorView"},jO=Object.freeze(Object.defineProperty({__proto__:null,default:FO},Symbol.toStringTag,{value:"Module"})),NO={category:"Path",key:"ArrowRight",command:"segment.move.right",description:"move 1px to right",args:[{dx:1}],when:"PathEditorView"},BO=Object.freeze(Object.defineProperty({__proto__:null,default:NO},Symbol.toStringTag,{value:"Module"})),GO={category:"Path",key:"ArrowUp",command:"segment.move.up",description:"move 1px to up",args:[{dy:1}],when:"PathEditorView"},HO=Object.freeze(Object.defineProperty({__proto__:null,default:GO},Symbol.toStringTag,{value:"Module"})),UO={category:"Path",key:"Shift+ArrowDown",command:"segment.move.down",description:"move 10px to down",args:[{dy:10}],when:"PathEditorView"},WO=Object.freeze(Object.defineProperty({__proto__:null,default:UO},Symbol.toStringTag,{value:"Module"})),XO={category:"Path",key:"Shift+ArrowLeft",command:"segment.move.left",description:"move 10px to left",args:[{dx:10}],when:"PathEditorView"},YO=Object.freeze(Object.defineProperty({__proto__:null,default:XO},Symbol.toStringTag,{value:"Module"})),KO={category:"Path",key:"Shift+ArrowRight",command:"segment.move.right",description:"move 10px to right",args:[{dx:10}],when:"PathEditorView"},qO=Object.freeze(Object.defineProperty({__proto__:null,default:KO},Symbol.toStringTag,{value:"Module"})),ZO={category:"Path",key:"Shift+ArrowUp",command:"segment.move.up",description:"move 10px to up",args:[{dy:10}],when:"PathEditorView"},JO=Object.freeze(Object.defineProperty({__proto__:null,default:ZO},Symbol.toStringTag,{value:"Module"})),QO={category:"Tool",key:"CMD+A",win:"CTRL+A",command:"select.all",description:"Selection all layers"},ez=Object.freeze(Object.defineProperty({__proto__:null,default:QO},Symbol.toStringTag,{value:"Module"})),tz={category:"Tool",key:"v",command:"addLayerView",args:["select"],description:"Selection"},iz=Object.freeze(Object.defineProperty({__proto__:null,default:tz},Symbol.toStringTag,{value:"Module"})),rz={category:"Tools",key:"h",command:"toggleToolHand",description:"set hand tool on",when:"CanvasView"},nz=Object.freeze(Object.defineProperty({__proto__:null,default:rz},Symbol.toStringTag,{value:"Module"})),sz={category:"Tools",key:"h",command:"toggleToolHand",description:"set hand tool on",when:"LayerAppendView"},az=Object.freeze(Object.defineProperty({__proto__:null,default:sz},Symbol.toStringTag,{value:"Module"})),oz={category:"Tool",key:"space",command:"showPan",description:"Show panning area",when:"CanvasView"},lz=Object.freeze(Object.defineProperty({__proto__:null,default:oz},Symbol.toStringTag,{value:"Module"})),cz={category:"Group",key:"shift+cmd+g",win:"shift+ctrl+g",command:"ungroup.item",description:"Ungrouping selected group layer",when:"CanvasView"},hz=Object.freeze(Object.defineProperty({__proto__:null,default:cz},Symbol.toStringTag,{value:"Module"})),dz={category:"View",key:"0",command:"zoom.default",description:"zoom by scale 1",when:"CanvasView"},uz=Object.freeze(Object.defineProperty({__proto__:null,default:dz},Symbol.toStringTag,{value:"Module"})),pz={category:"View",key:"Equal",command:"zoom.in",description:"zoom in",when:"CanvasView"},fz=Object.freeze(Object.defineProperty({__proto__:null,default:pz},Symbol.toStringTag,{value:"Module"})),gz={category:"View",key:"minus",command:"zoom.out",description:"zoom Out",when:"CanvasView"},mz=Object.freeze(Object.defineProperty({__proto__:null,default:gz},Symbol.toStringTag,{value:"Module"}));const vz={"./shortcuts_list/add.artboard.js":fR,"./shortcuts_list/add.artboard.pan.js":mR,"./shortcuts_list/add.brush.js":yR,"./shortcuts_list/add.circle.js":bR,"./shortcuts_list/add.circle.l.js":SR,"./shortcuts_list/add.path.js":MR,"./shortcuts_list/add.rect.js":PR,"./shortcuts_list/add.rect.m.js":CR,"./shortcuts_list/add.rect.pan.js":IR,"./shortcuts_list/add.text.js":kR,"./shortcuts_list/clipboard.copy.js":RR,"./shortcuts_list/clipboard.paste.js":zR,"./shortcuts_list/escape.js":DR,"./shortcuts_list/group.item.js":jR,"./shortcuts_list/history.redo.js":BR,"./shortcuts_list/history.undo.js":HR,"./shortcuts_list/item.move.alt.down.js":WR,"./shortcuts_list/item.move.alt.left.js":YR,"./shortcuts_list/item.move.alt.right.js":qR,"./shortcuts_list/item.move.alt.up.js":JR,"./shortcuts_list/item.move.depth.down.js":eO,"./shortcuts_list/item.move.depth.up.js":iO,"./shortcuts_list/item.move.key.down.js":nO,"./shortcuts_list/item.move.key.left.js":aO,"./shortcuts_list/item.move.key.right.js":lO,"./shortcuts_list/item.move.key.up.js":hO,"./shortcuts_list/item.move.shift.down.js":uO,"./shortcuts_list/item.move.shift.left.js":fO,"./shortcuts_list/item.move.shift.right.js":mO,"./shortcuts_list/item.move.shift.up.js":yO,"./shortcuts_list/item.rotate.meta.left.js":bO,"./shortcuts_list/item.rotate.meta.right.js":SO,"./shortcuts_list/removeLayer.js":MO,"./shortcuts_list/removeLayerByDeleteKey.js":PO,"./shortcuts_list/segment.delete.js":CO,"./shortcuts_list/segment.move.alt.down.js":IO,"./shortcuts_list/segment.move.alt.left.js":kO,"./shortcuts_list/segment.move.alt.right.js":RO,"./shortcuts_list/segment.move.alt.up.js":zO,"./shortcuts_list/segment.move.key.down.js":DO,"./shortcuts_list/segment.move.key.left.js":jO,"./shortcuts_list/segment.move.key.right.js":BO,"./shortcuts_list/segment.move.key.up.js":HO,"./shortcuts_list/segment.move.shift.down.js":WO,"./shortcuts_list/segment.move.shift.left.js":YO,"./shortcuts_list/segment.move.shift.right.js":qO,"./shortcuts_list/segment.move.shift.up.js":JO,"./shortcuts_list/select.all.js":ez,"./shortcuts_list/select.view.js":iz,"./shortcuts_list/set.tool.hand.js":nz,"./shortcuts_list/set.tool.hand.m.js":az,"./shortcuts_list/show.pan.js":lz,"./shortcuts_list/ungroup.item.js":hz,"./shortcuts_list/zoom.default.js":uz,"./shortcuts_list/zoom.in.js":fz,"./shortcuts_list/zoom.out.js":mz};var fm=Object.values(vz).map(n=>n.default);function _d(...n){return n.filter(Boolean).join("+")}function Qv(n){return $o[`${n}`.toLowerCase()]||n}class yz{constructor(e){this.$editor=e,this.loadShortCuts()}getGeneratedKeyCode(e){return Qv(e)}loadShortCuts(){this.list=[],this.commands={},fm.forEach(e=>{this.registerShortCut(e)}),this.sort()}registerShortCut(e){const t=qg();this.list.push(ze(P({key:"",command:"",args:[],eventType:"keydown"},e),{checkKeyString:this.splitShortCut(e[t]||e.key),whenFunction:this.makeWhenFunction(e.command,e.when||!0)})),this.sort()}makeWhenFunction(e,t){if(cs(t)&&t)return()=>!0;const i=this.$editor,r=t.split("|").map(s=>s.trim());return()=>r.some(s=>i.context.modeViewManager.isCurrentMode(s))}sort(){this.commands={},this.list.forEach(e=>{Array.isArray(this.commands[e.checkKeyString])===!1&&(this.commands[e.checkKeyString]=[]),this.commands[e.checkKeyString].push(e)})}splitShortCut(e){var t=e.toUpperCase().split("+").map(l=>l.trim()).filter(Boolean);let i=!1,r=!1,s=!1,a=!1,o=[];return t.forEach(l=>{l.includes("ALT")?i=!0:l.includes("CTRL")?r=!0:l.includes("SHIFT")?s=!0:l.includes("CMD")||l.includes("WIN")||l.includes("META")?a=!0:o.push(l)}),_d(i?"ALT":"",r?"CTRL":"",s?"SHIFT":"",a?"META":"",Qv(o.join("")))}makeKeyString(e){return _d(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.key.toUpperCase())}makeCodeString(e){return _d(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.code.toUpperCase())}makeKeyCodeString(e){return _d(e.altKey?"ALT":"",e.ctrlKey?"CTRL":"",e.shiftKey?"SHIFT":"",e.metaKey?"META":"",e.keyCode)}checkShortCut(e,t,i){return this.commands[e]||this.commands[t]||this.commands[i]}checkWhen(e){return e.whenFunction()}execute(e,t="keydown"){let i=this.checkShortCut(this.makeKeyCodeString(e),this.makeKeyString(e),this.makeCodeString(e));if(i){const r=i.filter(s=>s.eventType===t).filter(s=>this.checkWhen(s));r.length&&r.forEach(s=>{this.$editor.context.commands.emit(s.command,...s.args)})}}}class xz{constructor(e){this.editor=e}get config(){return this.editor.context.config}get zIndex(){return this.popupZIndex++}get isPointerUp(){const e=this.config.get("bodyEvent");return!e||e.type==="pointerup"?!0:e.type==="pointermove"&&e.buttons===0}get isPointerDown(){return!this.isPointerUp}get isPointerMove(){return this.config.get("bodyEvent")?this.config.get("bodyEvent").type==="pointermove":!1}}class bz{constructor(e){this.editor=e,this.customAssetKey="custom-assets"}async getCustomAssetList(){let e=!1;const t=(this.editor.loadItem(this.customAssetKey)||[]).map(i=>(i.id||(i.id=Po(),e=!0),i));return e&&await this.setCustomAssetList(t),t}async setCustomAssetList(e){this.editor.saveItem(this.customAssetKey,e)}async getCustomAsset(e){const i=(await this.getCustomAssetList()).find(r=>r.id===e);return i&&i.component?i.component:null}async saveCustomAsset(e=""){const t=this.editor.context.selection.current;if(t){const i=await this.getCustomAssetList(),r=await this.editor.json.render(t);r.x=0,r.y=0,await this.setCustomAssetList([...i,{id:Po(),preview:e,component:r}])}}async removeCustomAsset(e){const t=await this.getCustomAssetList();await this.setCustomAssetList(t.filter(i=>i.id!==e))}}class _z{constructor(e){this.editor=e,this.context=this.editor.context,this.canvasSize=null,this.cachedViewport=wi(0,0,0,0),this.mouse=ls(),this.scaleMax=1e5,this.scale=1,this.translate=ls(),this.transformOrigin=ls(),this.maxScale=25,this.minScale=.02,this.zoomFactor=1,this.resetWorldMatrix()}setTransformOrigin(e){this.transformOrigin=e,this.resetWorldMatrix()}setTransformOriginWithTranslate(e){const t=yr(this.transformOrigin);this.setTransformOrigin(e),this.setTranslate(bt([],this.translate,vt([],t,e)))}setScale(e){this.scale=Math.min(Math.max(this.minScale,e),this.maxScale),this.scaleMax=this.scale*1e5,this.resetWorldMatrix()}setTranslate(e){this.translate=e,this.resetWorldMatrix()}resetWorldMatrix(){this.translate=this.translate.map(e=>+e.toFixed(4)),this.transformOrigin=this.transformOrigin.map(e=>+e.toFixed(4)),this.scale=+this.scale.toFixed(4),this.matrix=kr(yi([],this.translate),yi([],this.transformOrigin),Rn([],[this.scale,this.scale,1]),yi([],Pr([],this.transformOrigin))),this.matrixInverse=Zi([],this.matrix),this.scaleMatrix=kr(Rn([],[this.scale,this.scale,1])),this.scaleMatrixInverse=Zi([],this.scaleMatrix),this.refresh()}refreshCanvasSize(e){if(this.canvasSize){this.canvasSize=e,this.cachedViewport=wi(0,0,this.canvasSize.width,this.canvasSize.height);const t=Wt([],[this.canvasSize.width,this.canvasSize.height,0],this.scaleMatrixInverse),i=bt([],this.verties[0],[t[0]/2,t[1]/2,0]),r=ya([],kr(this.matrix,ba(yi([],i),this.scaleMatrix,Zi([],yi([],i)))));this.setTranslate(r),this.setTransformOrigin(i)}else this.canvasSize=e,this.cachedViewport=wi(0,0,this.canvasSize.width,this.canvasSize.height),this.setTransformOrigin([this.canvasSize.width/2,this.canvasSize.height/2,0]);this.editor.emit(ai)}refresh(){this.cachedViewport&&(this.verties=He(this.cachedViewport,this.matrixInverse),this.originVerties=this.verties.filter((e,t)=>t<4),this.originRect=Yi(this.originVerties))}getWorldPosition(e){return e=e||this.context.config.get("bodyEvent"),e?this.createWorldPosition(e.clientX,e.clientY):this.createWorldPosition(0,0)}createWorldPosition(e,t){if(!this.canvasSize)return ls();const i={x:e-this.canvasSize.x,y:t-this.canvasSize.y},r=this.verties[0][0]+(this.verties[2][0]-this.verties[0][0])*(i.x/this.canvasSize.width),s=this.verties[0][1]+(this.verties[2][1]-this.verties[0][1])*(i.y/this.canvasSize.height);return[r,s,0]}setMousePoint(e,t){this.mouse=this.createWorldPosition(e,t),this.setTransformOriginWithTranslate(Re([],this.verties[0],this.verties[2],.5)),this.editor.emit(ai)}zoom(e){const t=this.scale,i=t*e;this.setScale(i);const r=this.scale/t;this.zoomFactor=r,r!==1&&(this.setTransformOriginWithTranslate(Re([],this.mouse,this.transformOrigin,1/e)),this.editor.emit(ai))}pan(e,t,i=0){this.setTransformOriginWithTranslate(bt([],this.transformOrigin,[e,t,0])),this.editor.emit(ai)}moveToCenter(e,t=-.2,i=!0){if(!this.canvasSize)return;const r=Re([],e[0],e[2],.5),s=Fe(e[0],e[1]),a=Fe(e[0],e[3]),o=Re([],this.verties[0],this.verties[2],.5),l=Fe(this.verties[0],this.verties[1]),c=Fe(this.verties[0],this.verties[3]),h=i?Math.min(l/s,c/a)+t:1;this.setTranslate(bt([],this.translate,vt([],o,r))),this.setTransformOrigin(r),this.setScale(this.scale*h),this.editor.emit(ai)}get pos(){const e=(this.mouse[0]-this.verties[0][0])/(this.verties[2][0]-this.verties[0][0])*100,t=(this.mouse[1]-this.verties[0][1])/(this.verties[2][1]-this.verties[0][1])*100;return[e,t,0]}get minX(){return this.verties[0][0]}get maxX(){return this.verties[2][0]}get minY(){return this.verties[0][1]}get maxY(){return this.verties[2][1]}get center(){return this.verties[4]}get height(){return this.maxY-this.minY}get width(){return this.maxX-this.minX}get pixelSize(){return Math.round(this.width/this.canvasSize.width)}checkInViewport(e){const t=this.minX{const i=e[t];Object.defineProperty(this.context,t,{value:new i(this),writable:!1})})}initStorage(){this.locale=this.loadItem("locale")||"en_US",this.layout=this.loadItem("layout")||"all"}createProject(){return this.createModel({itemType:"project"})}getI18nMessage(e,t={},i){return this.context.i18n.get(e,t,i||this.locale)}$i18n(e,t={},i){return this.getI18nMessage(e,t,i)}hasI18nkey(e,t){return this.context.i18n.hasKey(e,t||this.locale)}initI18nMessage(e=""){return(t,i={},r)=>{const s=`${e}.${t}`;return this.hasI18nkey(s,r)?this.context.i18(`${e}.${t}`,i,r):this.context.i18(`${t}`,i,r)}}setLocale(e="en_US"){this.locale=e,this.saveItem("locale",this.locale)}setUser(e){this.user=e}async initPlugins(e={}){await this.context.pluginManager.initializePlugin(e)}themeValue(e,t=""){return Mz[this.context.config.get("editor.theme")][e]||t}get zIndex(){return this.popupZIndex++}getFile(e){return this.images[e]||e}setStore(e){this.store=e}emit(...e){this.context.store.source=this.EDITOR_ID,this.context.store.emit(...e)}on(...e){const[t,i,r,...s]=e;return this.context.store.on(t,i,r||this,...s)}off(...e){this.context.store.off(...e)}offAll(...e){this.context.store.offAll(...e)}debug(){}command(e,t,...i){return console.warn("command",e,t,i),this.context.stateManager.isPointerUp?this.context.store.emit(`history.${e}`,t,...i):this.context.store.emit(e,...i)}nextTick(e,t=0){this.context.store&&window.setTimeout(()=>{this.context.store.nextTick(e)},t)}get(e){return this.context.modelManager.get((e==null?void 0:e.id)||e)}replaceLocalUrltoRealUrl(e){var t=this.context.selection.currentProject,i={};return t.images.forEach(r=>{e.indexOf(r.local)>-1&&(i[r.local]=r.original)}),Object.keys(i).forEach(r=>{e.indexOf(r)>-1&&(e=e.replace(new RegExp(r,"g"),i[r]))}),e}createModel(e,t=!0){return this.context.modelManager.createModel(e,t)}searchItem(e){return this.context.modelManager.searchItem(e)}get storeKey(){return`__els__.${this.context.config.get("store.key")}`}saveItem(e,t){window.localStorage.setItem(`${this.storeKey}.${e}`,JSON.stringify(t))}loadItem(e){return JSON.parse(window.localStorage.getItem(`${this.storeKey}.${e}`)||JSON.stringify(""))}createCommandMaker(){return new eR(this)}registerElement(e){Yl(e)}registerAlias(e){Object.entries(e).forEach(([t,i])=>{US(t,i)})}registerUI(e,t={},i=1){this.context.injectManager.registerUI(e,t,i),this.registerElement(t)}isComponentClass(e){return this.context.components.isComponentClass(e)}registerComponent(e,t){this.context.components.registerComponent(e,t)}registerItem(e,t){this.registerComponent(e,t)}registerInspector(e,t){this.context.components.registerInspector(e,t)}registerRenderer(e,t,i){this.context.renderers.registerRenderer(e,t,i)}registerRendererType(e,t){this.context.renderers.registerRendererType(e,t)}getRendererInstance(e,t){return this.context.renderers.getRendererInstance(e,t)}renderer(e){return this.context.renderers.getRenderer(e)}get json(){return this.renderer("json")}loadCommands(e){return this.context.commands.loadCommands(e)}registerCommand(e){return this.context.commands.registerCommand(e)}registerShortCut(e){this.context.shortcuts.registerShortCut(e)}registerPlugin(e){this.context.pluginManager.registerPlugin(e)}registerPluginList(e=[]){e.forEach(t=>this.registerPlugin(t))}registerConfig(e){this.context.config.registerConfig(e)}registerI18nMessage(e,t){this.context.i18n.registerI18nMessage(e,t)}registerI18nMessageWithLocale(e){Object.entries(e).forEach(([t,i])=>{this.registerI18nMessage(t,i)})}registerIcon(e,t){this.context.icon.registerIcon(e,t)}registerMenu(e,t){this.context.menuManager.registerMenu(e,t)}}const e0={x:0,y:0},$z={x:Number.MAX_SAFE_INTEGER,y:Number.MAX_SAFE_INTEGER},t0=0;class Gh extends ge{async created(){this.$editor.registerManager(this.getManagers()),this.$editor.registerPluginList(this.getPlugins()),Array.isArray(this.opt.plugins)&&this.$editor.registerPluginList(this.opt.plugins),await this.$editor.initPlugins(),this.$config.load(),hs(this.opt.config)&&this.$config.setAll(this.opt.config||{}),this._isPluginLoaded=!0}get isPreLoaded(){return Boolean(this._isPluginLoaded)}get $editor(){return this.__editorInstance||(this.__editorInstance=this.createEditorInstance()),this.__editorInstance}createEditorInstance(){return new Gx}afterRender(){super.afterRender(),this.$el.attr("data-theme",this.$config.get("editor.theme")),this.$el.addClass(window.navigator.userAgent.includes("Windows")?"ua-window":"ua-default"),this.trigger("initialize")}initialize(){super.initialize(),this.__initBodyMoves()}[qt("editor.theme")](){this.$el.attr("data-theme",this.$config.get("editor.theme"))}getPlugins(){return[]}getManagers(){return{}}__initBodyMoves(){this.__firstMove=new Set,this.__moves=new Set,this.__ends=new Set,this.__modifyBodyMoveSecond(t0)}__modifyBodyMoveSecond(e=t0){this.$config.set("body.move.ms",e);const t=e===0?this.__loopBodyMoves.bind(this):np(this.__loopBodyMoves.bind(this),this.$config.get("body.move.ms"));this.__funcBodyMoves=t}__loopBodyMoves(){var e=this.pos,t=this.$config.get("bodyEvent"),i=this.lastPos||$z,r=!(i.x===e.x&&i.y===e.y);if(r&&this.__firstMove.size){let s=0;this.__firstMove.forEach(a=>{const o=Rr(e.x,e.y,a.xy.x,a.xy.y);if(Math.abs(o)>0){var l=e.x-a.xy.x,c=e.y-a.xy.y;a.func.call(a.context,l,c,"move",t.pressure),s++}}),s>0&&this.__firstMove.clear()}r&&this.__moves.size&&(this.__moves.forEach(s=>{const a=Rr(e.x,e.y,s.xy.x,s.xy.y);if(Math.abs(a)>.5){var o=e.x-s.xy.x,l=e.y-s.xy.y;s.func.call(s.context,o,l,"move",t.pressure)}}),this.lastPos=e),window.requestAnimationFrame(this.__funcBodyMoves)}__removeBodyMoves(){var e=this.lastPos,t=this.$config.get("bodyEvent");e&&this.__ends.forEach(i=>{i.func.call(i.context,e.x-i.xy.x,e.y-i.xy.y,"end",t.pressure)}),this.__firstMove.clear(),this.__moves.clear(),this.__ends.clear()}[jp(sx)](e,t,i){this.__firstMove.add({func:e,context:t,xy:i})}[jp(ax)](e,t,i){this.__moves.add({func:e,context:t,xy:i})}[jp(ox)](e,t,i){this.__ends.add({func:e,context:t,xy:i})}[Ke()](e){var t=e.xy||e0;this.$config.init("bodyEvent",e),this.pos=t}[Kl()](e){var t=e.xy||e0;this.$config.init("bodyEvent",e),this.$commands.emit("change.bodyEvent"),this.pos=t,this.__requestId||(this.__requestId=window.requestAnimationFrame(this.__funcBodyMoves))}[d2()](e){this.$config.set("bodyEvent",e),this.__removeBodyMoves(),window.cancelAnimationFrame(this.__requestId),this.__requestId=null}[h2("window")+Nt(100)](){this.emit(Oo)}[H("refreshAll")](){this.emit("refreshProjectList"),this.$commands.emit("refreshArtboard")}[H("changed.locale")](){this.rerender()}}const Yo={LEFT:"left",RIGHT:"right",TOP:"top",BOTTOM:"bottom",BODY:"body",INNER:"inner",OUTER:"outer"};class Ko extends ge{}class Pz extends ge{checkProps(e){return e}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}initState(){return{showLeftPanel:$t(this.props.showLeftPanel)?Boolean(this.props.showLeftPanel):!0,showRightPanel:$t(this.props.showRightPanel)?Boolean(this.props.showRightPanel):!0,topSize:$t(this.props.topSize)?Number(this.props.topSize):48,leftSize:$t(this.props.leftSize)?Number(this.props.leftSize):340,rightSize:$t(this.props.rightSize)?Number(this.props.rightSize):280,bottomSize:this.props.bottomSize||0,lastBottomSize:this.props.lastBottomSize||150,minSize:$t(this.props.minSize)?Boolean(this.props.minSize):240,maxSize:$t(this.props.maxSize)?Boolean(this.props.maxSize):500}}getDirection(e){return this.getChildContent(t=>t.props.type===e)}template(){const e=this.getDirection(Yo.TOP),t=this.getDirection(Yo.LEFT),i=this.getDirection(Yo.RIGHT),r=this.getDirection(Yo.BODY),s=this.getDirection(Yo.INNER),a=this.getDirection(Yo.OUTER);return V("div",{class:"elf--default-layout-container"},V("div",{class:"elf--default-layout"},e?V("div",{class:"layout-top",ref:"$topPanel"},e):"",V("div",{class:"layout-middle",ref:"$middle"},t?V("div",{class:"layout-left",ref:"$leftPanel"},t):"",V("div",{class:"layout-body",ref:"$bodyPanel"},r),i?V("div",{class:"layout-right",ref:"$rightPanel"},i):"",V("div",{class:"splitter",ref:"$splitter"})),s),a)}[Me("$splitter")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{left:y.px(e)}}}[Me("$leftPanel")](){let e=this.state.leftSize;return this.state.showLeftPanel||(e=0),{style:{width:e}}}[Me("$rightPanel")](){let e=this.state.rightSize;return this.state.showRightPanel||(e=0),{class:Xn("layout-right",{closed:!this.state.showRightPanel}),style:{width:e}}}setOptions(e={}){this.setState(e)}[Ke("$splitter")+at("moveSplitter")+ct("moveEndSplitter")](){this.leftSize=this.state.leftSize,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.state.maxSize),this.state.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$splitter"),this.bindData("$leftPanel")}}class Tz extends ge{template(){return` -
          -
          - `}[p2("$el")](e){qe.create(e.target).remove()}[ne("$el .item > .icon")](e){e.$dt.parent().remove()}getMessageTemplate(e,t,i,r=1e3){return` -
          -
          ${t}
          -
          ${i}
          - ${ie("close")} -
          - `}[H(cx)](e,t,i,r=1e3){const s=qe.createByHTML(this.getMessageTemplate(e,t,i,1e3));this.$el.prepend(s),window.setTimeout(a=>{a.css("opacity",0)},r,s)}}class gp extends ge{template(){return` -
          -
          -
          - - - ${this.getTools()} - - -
          -
          ${this.getBody()}
          -
          -
          - `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}[ne("$close")](){this.$el.hide()}show(){this.$el.show("block")}hide(){this.$el.hide()}}class Cz extends gp{getClassName(){return"elf--export-window"}getTitle(){return"Mini Editor"}initState(){return{selectedIndex:1}}refresh(){this.$el.isShow()&&fee({container:this.refs.$body.el,config:{"editor.design.mode":"item"}})}getBody(){return` -
          - -
          - `}[H("showEmbedEditorWindow")](){this.show(),this.refresh()}}Yl({EmbedEditorWindow:Cz});class Ez extends gp{getClassName(){return"elf--export-window"}getTitle(){return"Export"}initState(){return{selectedIndex:1}}getBody(){return` -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          - `}[H("showExportWindow")](){this.show(),this.refresh()}refresh(){var e=this.$context.selection.currentProject||{layers:[]},t=` -${this.makeStyle(e)} -${e.layers.map(s=>this.makeStyle(s)).join(` -`)} -`,i=` -${this.$editor.renderer("html").renderSVG(e)} -${this.$editor.renderer("html").render(e)} - `,r=e.layers.map(s=>this.$editor.svg.render(s));shiki&&shiki.getHighlighter({theme:"light-plus"}).then(s=>{if(html_beautify){i=html_beautify(i,{indent:2});const a=s.codeToHtml(i,"html");this.refs.$html.html(a),t=html_beautify(t,{indent:2});const o=s.codeToHtml(t,"html");this.refs.$css.html(o),r=html_beautify(r.join(""),{indent:2});const l=s.codeToHtml(r,"html");this.refs.$svgimage.html(l)}})}makeStyle(e){return this.$editor.renderer("html").toExportStyle(e,null)}makeHTML(e){return this.$editor.renderer("html").render(e)}[ne("$header .tab-item")](e){var t=+e.$dt.attr("data-value");this.state.selectedIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndex}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedIndex:t},!1))}}Yl({ExportWindow:Ez});class Iz extends gp{getClassName(){return"elf--project-window"}getTitle(){return"Project Manager"}initState(){return{selectedIndex:1}}getBody(){return` -
          -
          - Project Menu -
          -
          - Project List -
          -
          - `}[H("open.projects")](){this.show(),this.refresh()}refresh(){}}Yl({ProjectWindow:Iz});const Hx=new Set;fm.forEach(n=>{Hx.add(n.category)});const Vc={};Hx.forEach(n=>{fm.filter(e=>e.category===n).forEach(e=>{Vc[e.category]||(Vc[e.category]=[]),Vc[e.category].push(e)})});const Lz={ARROWRIGHT:"\u2192",ARROWLEFT:"\u2190",ARROWUP:"\u2191",ARROWDOWN:"\u2192",BACKSPACE:"\u232B",CMD:"\u2318"},kz=qg();class Az extends gp{getClassName(){return"elf--shortcut-window"}getTitle(){return"ShortCuts"}getKeyString(e,t){return(t[e]||t.key).split("+").map(i=>i.trim()).map(i=>{const r=i.toUpperCase();return`${Lz[r]||r}`}).join(" + ")}getTemplateForShortcutItem(e){return` -
          -
          ${e.description}
          -
          ${this.getKeyString(kz,e)}
          -
          - `}getTemplateForCategory(e,t=[]){return` -
          -

          ${e}

          -
          - ${t.map(i=>this.getTemplateForShortcutItem(i)).join("")} -
          -
          - `}getTemplateForLayer(){return` -
          -

          Layer

          -
          -
          -
          - Add Rect - fdsafdsfdf -
          - -
          CTRL+R
          -
          R
          -
          R
          -
          -
          -
          - `}getBody(){return` -
          - ${Object.keys(Vc).map(e=>this.getTemplateForCategory(e,Vc[e])).join("")} -
          - `}[H("showShortcutWindow")](){this.show()}}Yl({ShortcutWindow:Az});class Hh extends ge{components(){return{NotificationView:Tz}}template(){return V("div",{class:"elf--popup-manager"},W("ExportWindow"),W("EmbedEditorWindow"),W("ProjectWindow"),W("ShortcutWindow"),W("NotificationView"),this.$injectManager.generate("popup",!0))}}class Rz extends Gh{afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}getPlugins(){return b4}initState(){return{leftSize:340}}template(){return V("div",{class:"elf-studio blank-editor"},V(Pz,{showLeftPanel:this.$config.get("show.left.panel"),showRightPanel:this.$config.get("show.right.panel"),leftSize:340,rightSize:280,ref:"$layout"},V(Ko,{type:"top"},V(BI,null)),V(Ko,{type:"left",resizable:"true"},V(uw,null)),V(Ko,{type:"right"},V(dw,null)),V(Ko,{type:"body"},V(sw,null)),V(Ko,{type:"inner"},V(Bh,null)),V(Ko,{type:"outer"},V(Nh,null),V(Hh,null))))}[Me("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[Me("$leftPanel")](){return{style:{width:this.state.leftSize,display:this.$config.true("show.left.panel")?"block":"none"}}}[Me("$rightPanel")](){return{style:{display:this.$config.true("show.right.panel")?"block":"none"}}}[Ke("$splitter")+at("moveSplitter")+ct("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$splitter"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.emit("resizeEditor")}[qt("show.left.panel")](){this.children.$layout.setOptions({showLeftPanel:this.$config.get("show.left.panel")}),this.nextTick(()=>{this.emit(yn)})}[qt("show.right.panel")](){this.children.$layout.setOptions({showLeftPanel:this.$config.get("show.right.panel")}),this.nextTick(()=>{this.emit(yn)})}[H(lx)](){this.$el.toggleFullscreen()}}class Oz extends ge{template(){return` -
          -
          - -
          -
          -
          - -
          HEX
          -
          -
          -
          -
          - -
          R
          -
          -
          - -
          G
          -
          -
          - -
          B
          -
          -
          - -
          A
          -
          -
          -
          -
          - -
          H
          -
          -
          - -
          %
          -
          S
          -
          -
          - -
          %
          -
          L
          -
          -
          - -
          A
          -
          -
          -
          - `}get manager(){return this.parent.manager}setCurrentFormat(e){this.format=e,this.initFormat()}initFormat(){var e=this.format||"hex";["hex","rgb","hsl"].filter(t=>t!==e).forEach(t=>{this.$el.removeClass(t)}),this.$el.addClass(e)}nextFormat(){var e=this.format||"hex",t="hex";e=="hex"?t="rgb":e=="rgb"?t="hsl":e=="hsl"&&(this.parent.alpha==1?t="hex":t="rgb"),this.format=t,this.initFormat(),this.parent.changeFormat(this.format)}goToFormat(e){this.format=e,(e==="rgb"||e==="hsl")&&this.initFormat(),this.parent.changeFormat(this.format)}getFormat(){return this.format||"hex"}changeRgbColor(){this.parent.lastUpdateColor({type:"rgb",r:this.refs.$rgb_r.int(),g:this.refs.$rgb_g.int(),b:this.refs.$rgb_b.int(),a:this.refs.$rgb_a.float()})}changeHslColor(){this.parent.lastUpdateColor({type:"hsl",h:this.refs.$hsl_h.int(),s:this.refs.$hsl_s.int(),l:this.refs.$hsl_l.int(),a:this.refs.$hsl_a.float()})}hasValue(e){return e.target.value!==""}[di("$rgb_r")+et("hasValue")](){this.changeRgbColor()}[di("$rgb_g")+et("hasValue")](){this.changeRgbColor()}[di("$rgb_b")+et("hasValue")](){this.changeRgbColor()}[di("$rgb_a")+et("hasValue")](){this.changeRgbColor()}[di("$hsl_h")+et("hasValue")](){this.changeHslColor()}[di("$hsl_s")+et("hasValue")](){this.changeHslColor()}[di("$hsl_l")+et("hasValue")](){this.changeHslColor()}[di("$hsl_a")+et("hasValue")](){this.changeHslColor()}[Ar("$hexCode")+et("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[c2("$hexCode")+et("hasValue")](){var e=this.refs.$hexCode.val();e.charAt(0)=="#"&&(e.length==7||e.length===9)&&this.parent.lastUpdateColor(e)}[ne("$formatChangeButton")](){this.nextFormat()}[ne("$el .information-item.hex .input-field .title")](){this.goToFormat("hex")}[ne("$el .information-item.rgb .input-field .title")](){this.goToFormat("hsl")}[ne("$el .information-item.hsl .input-field .title")](){this.goToFormat("rgb")}setRGBInput(){this.refs.$rgb_r.val(this.manager.rgb.r),this.refs.$rgb_g.val(this.manager.rgb.g),this.refs.$rgb_b.val(this.manager.rgb.b),this.refs.$rgb_a.val(this.manager.alpha)}setHSLInput(){this.refs.$hsl_h.val(this.manager.hsl.h),this.refs.$hsl_s.val(this.manager.hsl.s),this.refs.$hsl_l.val(this.manager.hsl.l),this.refs.$hsl_a.val(this.manager.alpha)}setHexInput(){this.refs.$hexCode.val(this.manager.toString("hex"))}setValue(){this.refresh()}refresh(){this.setCurrentFormat(this.manager.format),this.setRGBInput(),this.setHSLInput(),this.setHexInput()}}class zz extends ge{initState(){return{hueColor:"rgba(0, 0, 0, 1)",s:0,v:0}}template(){return` -
          -
          -
          -
          -
          -
          -
          - `}afterRender(){this.rect=this.$el.rect()}[Me("$el")](){return{style:{"background-color":this.state.hueColor}}}[Me("$drag_pointer")](){(!this.rect||this.rect.width===0)&&(this.rect=this.$el.rect());const e=this.rect.width*this.state.s,t=this.rect.height*(1-this.state.v);return{style:{left:e,top:t}}}[Ke("$el")+at("movePointer")+ct("moveEndPointer")](){this.rect=this.$el.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}moveEndPointer(){this.parent.changeEndColor()}refreshColorUI(){const e=this.$config.get("bodyEvent"),t=this.rect.left,i=this.rect.right,r=this.rect.top,s=this.rect.bottom,a=Math.min(i,Math.max(t,e.clientX)),o=Math.min(s,Math.max(r,e.clientY)),l=i-t,c=s-r;var h=(a-t)/l,d=(c-(o-r))/c;this.parent.changeColor({type:"hsv",s:h,v:d})}setValue(e,t,i){this.setState({s:e,v:t,hueColor:i})}}class Vz extends ge{initState(){return{value:"rgba(0, 0, 0, 1)"}}template(){return"
          "}[Me("$el")](){return{style:{"background-color":this.state.value}}}setValue(e){this.setState({value:e})}}class Dz extends ge{initState(){return{hue:0,minValue:0,maxValue:360}}template(){return` -
          -
          -
          -
          -
          - `}[Me("$bar")](){const e=this.state.hue;return{style:{left:y.makePercent(e,360)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[Ke("$container")+at("movePointer")+ct("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,r=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({h:r*this.state.maxValue,type:"hsv"})}setValue(e){this.setState({hue:e})}}class Fz extends ge{initState(){return{colorbar:Si("rgba(0, 0, 0, 1)"),opacity:0,minValue:0,maxValue:100}}template(){return` -
          -
          -
          -
          -
          -
          - `}[Me("$colorbar")](){const e=rt(this.state.colorbar);e.a=0;const t=To(e,"rgb");e.a=1;const i=To(e,"rgb");return{style:{background:`linear-gradient(to right, ${t}, ${i})`}}}[Me("$bar")](){const e=this.state.opacity*100;return{style:{left:y.percent(e)},class:{first:e<=this.state.minValue,last:e>=this.state.maxValue}}}[Ke("$container")+at("movePointer")+ct("moveEndPointer")](){this.rect=this.refs.$container.rect(),this.refreshColorUI()}movePointer(){this.refreshColorUI()}refreshColorUI(){const e=this.rect.left,t=this.rect.right,r=(Math.max(Math.min(t,this.$config.get("bodyEvent").clientX),e)-e)/(t-e);this.parent.changeColor({a:r.toFixed(2)})}setValue(e,t){this.setState({opacity:t,colorbar:e})}}class jz{constructor(){this.initialize()}initialize(){this.state={rgb:{},hsl:{},hsv:{},alpha:1,format:"hex"}}get hsv(){return this.state.hsv}get rgb(){return this.state.rgb}get hsl(){return this.state.hsl}get hex(){return this.state.hex}get alpha(){return typeof this.state.alpha=="undefined"?1:this.state.alpha}get format(){return this.state.format}changeFormat(e){this.state.format=e}initColor(e){this.changeColor(e)}changeColor(e){e=e||"#FF0000",typeof e=="string"&&(e=Si(e)),this.state.alpha=typeof e.a!="undefined"?e.a:this.state.alpha,this.state.format=e.type!="hsv"?e.type||this.state.format:this.state.format,e.type=="hsl"?(this.state.hsl=P(P({},this.state.hsl),e),this.state.rgb=ku(this.state.hsl),this.state.hsv=ML(e)):e.type=="hex"?(this.state.rgb=P(P({},this.state.rgb),e),this.state.hsl=na(this.state.rgb),this.state.hsv=_g(e)):e.type=="rgb"?(this.state.rgb=P(P({},this.state.rgb),e),this.state.hsl=na(this.state.rgb),this.state.hsv=_g(e)):e.type=="hsv"&&(this.state.hsv=P(P({},this.state.hsv),e),this.state.rgb=Rx(this.state.hsv),this.state.hsl=oA(this.state.hsv))}getHueColor(){return hA(this.state.hsv.h/360)}toString(e){e=e||this.state.format;var t=this.state[e]||this.state.rgb;return To(ze(P({},t),{a:this.state.alpha}),e)}toColor(e){return e=(e||this.state.format).toLowerCase(),this.toString(e)}}class Nz extends ge{created(){this.manager=new jz}initState(){const e=this.props.value||"rgba(0, 0, 0, 1)";return this.manager.initColor(e),{key:this.props.key,value:this.manager.toString()}}updateData(e={}){this.setState(e,!1),this.modifyColorPicker()}modifyColorPicker(){this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}initColor(e,t){this.manager.changeColor(e,t),this.refresh()}changeColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.updateData({value:this.manager.toColor()})}[we("selectColorAssets")](e,t){this.lastUpdateColor(t)}changeFormat(e){this.manager.changeFormat(e),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}lastUpdateColor(e,t){this.manager.changeColor(e,t),this.refresh(),this.setState({value:this.manager.toColor()},!1),this.modifyColorPicker(),this.changeEndColor()}changeEndColor(){this.parent.trigger(this.props.onchangeend,this.props.key,this.state.value,this.props.params)}refresh(){const e=this.manager.toColor();this.children.$palette.setValue(this.manager.hsv.s,this.manager.hsv.v,this.manager.getHueColor()),this.children.$opacity.setValue(this.manager.rgb,this.manager.alpha),this.children.$hue.setValue(this.manager.hsv.h),this.children.$colorview.setValue(e),this.children.$information.setValue()}components(){return{Hue:Dz,Opacity:Fz,ColorView:Vz,Palette:zz,ColorInformation:Oz}}template(){return` -
          -
          - ${W("Palette",{ref:"$palette"})} -
          - ${W("Hue",{ref:"$hue"})} - ${W("Opacity",{ref:"$opacity"})} -
          - ${W("ColorView",{ref:"$colorview"})} -
          - ${W("ColorInformation",{ref:"$information"})} - ${this.$context.injectManager.generate("colorpicker")} - ${W("ColorAssetsEditor",{ref:"$colorAsset",key:"colorAssets",onchange:"selectColorAssets"})} -
          -
          - `}}class Mn extends ge{template(){return` -
          -
          - - - ${this.getTools()} - - -
          -
          ${this.getBody()}
          - -
          - `}getClassName(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}onClose(){}[ne("$close")](){this.$el.hide(),this.onClose()}setTitle(e){this.refs.$title.$("label").text(e)}[Ke("$title")+at("movePopupTitle")+ct("endPopupTitle")](){this.x=y.parse(this.$el.css("left")),this.y=y.parse(this.$el.css("top"))}movePopupTitle(e,t){var i=y.px(this.x.value+e),r=y.px(this.y.value+t);this.$el.css({left:i,top:r,right:"auto",bottom:"auto"})}show(e=200){var t=28,i=320,r=this.$el.css("top"),s=this.$el.css("left"),a=r!=="auto"?y.parse(r):110,o=s!=="auto"?y.parse(s):document.body.clientWidth-i-t-e;this.$el.css({top:y.px(a),left:y.px(o),"z-index":this.$editor.zIndex}).show("inline-block")}makeRect(e,t,i){const s=this.$config.get("editor.layout.elements").$bodyPanel.rect();let a=s.left+s.width-e-10,o=i.top+t>s.top+s.height?s.top+s.height-t-10:i.top;return o<10&&(o=10),{top:o,left:a,width:e,height:t}}showByRect(e){this.$el.css({top:y.px(e.top),left:y.px(e.left),width:y.px(e.width),height:y.px(e.height),"z-index":this.$editor.zIndex}).show("inline-block")}hide(){this.$el.hide()}[H("hidePropertyPopup")](){this.hide()}[Ke("$resizer")+at("moveResizer")](){this.width=y.parse(this.$el.css("width")),this.height=y.parse(this.$el.css("height"))}moveResizer(e,t){this.$el.css({width:Math.min(this.width+e,1e3),height:Math.min(this.height+t,700)})}}class Bz extends Mn{getTitle(){return this.$i18n("colorpicker.popup.title")}getClassName(){return"compact elf--colorpicker-popup"}initState(){return{color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEvent,this.state.color,this.params)}updateEndData(e={}){this.setState(e,!1),this.state.target&&this.state.target.trigger(this.state.changeEndEvent,this.state.color,this.params)}getBody(){return` -
          -
          - ${W("EmbedColorPicker",{ref:"$color",value:this.state.color,onchange:e=>this.updateData({color:e}),onchangeend:e=>this.updateEndData({color:e})})} -
          - `}[me("$projectColors")](){var e=this.$context.selection.currentProject||{colors:[]},t=e.colors;return t.map(i=>` -
          -
          -
          `)}[ne("$projectColors .color-view")](e){this.updateData({color:e.$dt.attr("data-color")}),this.children.$color.setValue(this.state.color)}[H("showColorPickerPopup")](e,t,i){if(e.changeEvent=e.changeEvent||"changeFillPopup",!(e.target instanceof Pa))throw new Error("ColorPicker needs data.target");this.params=t,this.setState(e,!1),this.children.$color.setValue(this.state.color),this.showByRect(this.makeRect(245,500,i))}[H("hideColorPickerPopup")](){this.hide()}}class Gz extends ge{initState(){return{value:this.props.value||"rgba(0, 0, 0, 1)"}}template(){return` -
          - ${W("ColorPickerEditor",{ref:"$colorpicker",key:"colorpicker",value:this.state.value,onchange:"localChangeColor",onchangeend:"localLastUpdate"})} -
          - `}[we("localChangeColor")](e,t){this.parent.trigger(this.props.onchange,t)}[we("localLastUpdate")](e,t){this.parent.trigger(this.props.onchangeend,t)}setValue(e){this.state.value=e,this.children.$colorpicker.initColor(e)}refresh(){this.children.$colorpicker.initColor(this.props.value)}}function gm(n){n.registerElement({ColorPickerEditor:Nz,EmbedColorPicker:Gz}),n.registerUI("popup",{ColorPickerPopup:Bz})}var Hz=[Th,Ch,Eh,Ph,jh,gm];class Uz extends Gh{components(){return{PopupManager:Hh,KeyboardManager:Bh,IconManager:Nh}}getPlugins(){return Hz}createEditorInstance(){return new Gx({ignoreManagers:["ShortCutManager"]})}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs)}initState(){return{inspector:this.props.inspector||[],onChange:this.props.onChange||(()=>!0),open:!(cs(this.props.open)&&this.props.open===!1),leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
          -
          -
          -
          Close Controls
          -
          - - ${W("KeyboardManager")} - ${W("PopupManager")} - ${W("IconManager")} -
          - `}[ne("$close")](){this.setState({open:!this.state.open},!1),this.bindData("$main"),this.bindData("$close")}[Me("$main")](){return{"data-open-status":this.state.open}}[Me("$close")](){return{text:this.state.open?"Close Controls":"Open Controls"}}[me("$body")](){const e=this.state.inspector;return W("ComponentEditor",{ref:"$comp",inspector:e,onchange:"changeComponent"})}getValue(){return this.children.$comp.getValue()}[we("changeComponent")](e,t){Ye(this.state.onChange)&&this.emit(this.state.onChange,this,e,t)}}class Ux{constructor(e){this.editor=e,this.clipboard=[]}get length(){return this.clipboard.length}clear(){this.clipboard=[]}get isEmpty(){return this.clipboard.length==0}get last(){return this.clipboard[this.clipboard.length-1]}push(e){this.clipboard.push(e)}pop(){return this.clipboard.pop()}}class Wx{constructor(e){this.$editor=e,this.$context=e.context,this.currentIndex=-1,this.undoHistories=[],this.redoHistories=[],this.selection={}}get length(){return this.undoHistories.length}get selectedIds(){return Object.keys(this.selection)}createCommand(e){return this.$context.stateManager.isPointerUp?`history.${e}`:e}saveSelection(e={}){this.selection=this.$editor.context.selection.toCloneObject()}getUndoValues(e={}){let t={};return Object.keys(e).forEach(i=>{t[i]={};const r=this.selection[i]||this.$editor.context.selection.itemsByIds(i)[0],s=e[i];Object.keys(s).forEach(a=>{t[i][a]=r[a]})}),t}add(e,t,i){const r=window.performance.now(),s=this.undoHistories[this.undoHistories.length-1],a={message:e,command:t,data:i,time:r};return s&&s.message===e&&r-s.time{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}redo(){if(this.currentIndex>this.length)return;this.currentIndex<0&&this.currentIndex++;const e=this.undoHistories[this.currentIndex];e&&e.command&&(this.currentIndex++,e.command.redo(this.$editor,e.data),this.$editor.debug(e),this.$editor.nextTick(()=>{this.$context.commands.emit("refreshHistory",e.command),this.$editor.emit("refreshHistoryList")}))}}class Xx{constructor(e){this.editor=e,this.lockList={}}get(e){return this.lockList[e]}set(e,t){this.lockList[e]=!0}toggle(e){this.lockList[e]?delete this.lockList[e]:this.lockList[e]=!0}}const Wz=()=>!0;class Yx{constructor(e){this.editor=e,this.context=this.editor.context,this.version="0.0.0",this.name="",this.description="",this.items=new Map,this.projects=[]}load(e=void 0,t={origin:"*"}){var r;const i=e||this.editor.loadItem("model");this.items.clear(),this.version=i==null?void 0:i.version,this.name=i==null?void 0:i.name,this.description=i==null?void 0:i.description,(r=i==null?void 0:i.projects)==null||r.forEach(s=>{this.createModel(s)}),this.projects.length===0&&this.createProject()}createProject(){this.createModel({itemType:"project",name:"New Project"})}getProjectByIndex(e=0){return this.get(this.projects[e])}get(e){return this.items.get(e)}set(e,t){this.items.set(e,t),this.setChanged("set",e,t)}remove(e){const t=this.items.get(e),i=t.parent.children,r=i.indexOf(e);t.reset({removed:!0,removedIndex:r,removedLeftSibling:r>0?i[r-1]:null,removedRightSibling:rt.get("removedRightSibling"))-1,0,e):t.get("removedLeftSibling")&&!t.get("removedRightSibling")?i.children.splice(i.children.findIndex(()=>t.get("removedLeftSibling"))+1,0,e):i.children.splice(t.get("removedIndex"),0,e),t.removeField("removed"),t.removeField("removedLeftSibling"),t.removeField("removedRightSibling"),t.removeField("removedIndex"),this.setChanged("recover",e)}clear(){this.items.clear()}toJSON(){return{version:this.version,name:this.name,description:this.description,projects:this.projects.map(e=>this.get(e).toJSON())}}setChanged(e,t,i){this.editor.emit("changed",e,t,i)}removeChild(e,t){const i=this.get(e);i.reset({children:i.children.filter(r=>r!==t)}),this.setChanged("removeChild",e,{childId:t})}get components(){return this.context.components}searchItem(e){return this.get(e)}searchLayers(e,t){const i=this.get(e);return this.get(i.children.find(r=>r===t))}searchItemsById(e){return e.map(t=>this.get(t))}findGroupItem(e){const t=this.get(e);return t.hasChildren()||t.parent&&(t.parent.is("project")||t.parent.is("artboard")||t.isBooleanItem)?t:t.parent&&this.findGroupItem(t.parentId)}convertGroupItems(e){const t={};return e.forEach(i=>{if(i.parent&&i.isNot("project")&&i.parent.hasLayout()){const r=i.parent;t[r.id]=r}else{const r=this.findGroupItem(i.id)||i;t[r.id]=r}}),Object.values(t).filter(i=>i.isNot("project"))}searchLiveItemsById(e){return e.map(t=>this.get(t)).filter(t=>!t.removed)}markRemove(e=[]){e.forEach(t=>{this.remove(t)}),this.setChanged("markRemove",e,{isLayer:!0})}markRemoveProject(e){const t=this.projects.findIndex(i=>i===e);return this.projects.splice(t,1),this.get(e).removed=!0,this.setChanged("markRemoveProject",[e],{isProject:!0}),t}unmarkRemove(e=[]){e.forEach(t=>{this.recover(t)}),this.setChanged("unmarkRemove",e,{isLayer:!0})}unmarkRemoveProject(e,t){this.projects.splice(t,0,e),this.get(e).removed=!1,this.setChanged("unmarkRemoveProject",[e],{removed:!0,isProject:!0})}createModel(e,t=!0,i={origin:"*"}){const r=e.layers;delete e.layers;let s;this.get(e.id)?(s=this.get(e.id),s.reset(e)):(s=this.components.createComponent(e.itemType,P({},e)),s.setModelManager(this)),t&&(this.set(s.id,s),s.is("project")&&(this.projects=[...new Set([...this.projects,s.id])]));const a=(r||[]).map(o=>this.createModel(ze(P({},o),{parentId:s.id}),!0,i));return a.length&&s.reset({children:a.map(o=>o.id)},i),s}getAllLayers(e,t=Wz){var i=[];const r=this.get(e);let s=r.children.length;for(let a=s;a--;){let o=r.children[a];i.push(...this.getAllLayers(o,t))}return Ye(t)&&t(r)&&i.push(r),i}getLayers(e){var i;const t=this.get(e);return((i=t==null?void 0:t.children)==null?void 0:i.map(r=>this.get(r)))||[]}eachLayers(e,t){const i=this.get(e);let r=i.children.length;for(let s=r;s--;){let a=i.children[s];t(this.get(a))}}mapLayers(e,t){return this.get(e).children.map(r=>t(this.get(r)))}getParent(e){var t;return this.get((t=this.get(e))==null?void 0:t.parentId)}getDepth(e){const t=this.getParent(e);return t?this.getDepth(t.id)+1:1}getPath(e,t=null){const i=this.get(e)||t,r=this.getParent(e);if(!r)return[i];const s=this.getPath(r.id);return s.push(i),s}clone(e,t=!0){const i=this.get(e),r=i.toCloneObject(t),s=this.createModel(r);return s.setParentId(i.parentId),s}}var Kx={exports:{}},Xz={},Yz=Object.freeze(Object.defineProperty({__proto__:null,default:Xz},Symbol.toStringTag,{value:"Module"})),rf=zA(Yz);(function(n,e){var t=function(){var i=typeof document!="undefined"&&document.currentScript?document.currentScript.src:void 0;return typeof __filename!="undefined"&&(i=i||__filename),function(r){r=r||{};var s;s||(s=typeof r!="undefined"?r:{});var a;s.ready=new Promise(function(M){a=M}),function(M){var $={};M.loadCmdsTypedArray=function(fe){for(var Te=0,Ee=0;Ee=G);)++E;if(16te?G+=String.fromCharCode(te):(te-=65536,G+=String.fromCharCode(55296|te>>10,56320|te&1023))}}else G+=String.fromCharCode(te)}return G}function T(M,$,E){var G=ve;if(0=oe){var Le=M.charCodeAt(++te);oe=65536+((oe&1023)<<10)|Le&1023}if(127>=oe){if($>=E)break;G[$++]=oe}else{if(2047>=oe){if($+1>=E)break;G[$++]=192|oe>>6}else{if(65535>=oe){if($+2>=E)break;G[$++]=224|oe>>12}else{if($+3>=E)break;G[$++]=240|oe>>18,G[$++]=128|oe>>12&63}G[$++]=128|oe>>6&63}G[$++]=128|oe&63}}G[$]=0}}var z=typeof TextDecoder!="undefined"?new TextDecoder("utf-16le"):void 0;function ae(M,$){for(var E=M>>1,G=E+$/2;!(E>=G)&&ke[E];)++E;if(E<<=1,32>1];if(te==0||E==$/2)return G;++E,G+=String.fromCharCode(te)}}function j(M,$,E){if(E===void 0&&(E=2147483647),2>E)return 0;E-=2;var G=$;E=E<2*M.length?E/2:M.length;for(var te=0;te>1]=M.charCodeAt(te),$+=2;return Z[$>>1]=0,$-G}function J(M){return 2*M.length}function Q(M,$){for(var E=0,G="";!(E>=$/4);){var te=Je[M+4*E>>2];if(te==0)break;++E,65536<=te?(te-=65536,G+=String.fromCharCode(55296|te>>10,56320|te&1023)):G+=String.fromCharCode(te)}return G}function ee(M,$,E){if(E===void 0&&(E=2147483647),4>E)return 0;var G=$;E=G+E-4;for(var te=0;te=oe){var Le=M.charCodeAt(++te);oe=65536+((oe&1023)<<10)|Le&1023}if(Je[$>>2]=oe,$+=4,$+4>E)break}return Je[$>>2]=0,$-G}function K(M){for(var $=0,E=0;E=G&&++E,$+=4}return $}var re,le,ve,Z,ke,Je,it,ye,Vt,xt=s.INITIAL_MEMORY||16777216;s.wasmMemory?S=s.wasmMemory:S=new WebAssembly.Memory({initial:xt/65536,maximum:xt/65536}),S&&(re=S.buffer),xt=re.byteLength;var pt=re;re=pt,s.HEAP8=le=new Int8Array(pt),s.HEAP16=Z=new Int16Array(pt),s.HEAP32=Je=new Int32Array(pt),s.HEAPU8=ve=new Uint8Array(pt),s.HEAPU16=ke=new Uint16Array(pt),s.HEAPU32=it=new Uint32Array(pt),s.HEAPF32=ye=new Float32Array(pt),s.HEAPF64=Vt=new Float64Array(pt),Je[3e3]=5255040;function w(M){for(;0>2])}var dt={},D={},Ie={};function st(M){if(M===void 0)return"_unknown";M=M.replace(/[^a-zA-Z0-9_]/g,"$");var $=M.charCodeAt(0);return 48<=$&&57>=$?"_"+M:M}function De(M,$){return M=st(M),new Function("body","return function "+M+`() { - "use strict"; return body.apply(this, arguments); -}; -`)($)}function Y(M){var $=Error,E=De(M,function(G){this.name=M,this.message=G,G=Error(G).stack,G!==void 0&&(this.stack=this.toString()+` -`+G.replace(/^Error(:[^\n]*)?\n/,""))});return E.prototype=Object.create($.prototype),E.prototype.constructor=E,E.prototype.toString=function(){return this.message===void 0?this.name:this.name+": "+this.message},E}var Ve=void 0;function Oe(M){throw new Ve(M)}function gt(M,$,E){function G(fe){fe=E(fe),fe.length!==M.length&&Oe("Mismatched type converter count");for(var Te=0;Te>2)+G]);return E}function qr(M){var $=Function;if(!($ instanceof Function))throw new TypeError("new_ called with constructor type "+typeof $+" which is not a function");var E=De($.name||"unknownFunctionName",function(){});return E.prototype=$.prototype,E=new E,M=$.apply(E,M),M instanceof Object?M:E}function En(M,$,E,G,te){var oe=$.length;2>oe&&Qe("argTypes array size mismatch! Must at least get return value and 'this' types!");var Le=$[1]!==null&&E!==null,fe=!1;for(E=1;E<$.length;++E)if($[E]!==null&&$[E].fb===void 0){fe=!0;break}var Te=$[0].name!=="void",Ee="",Ae="";for(E=0;E>1])};case 2:return function(G){return this.fromWireType((E?Je:it)[G>>2])};default:throw new TypeError("Unknown integer type: "+M)}}function Er(M,$){var E=D[M];return E===void 0&&Qe($+" has unknown type "+ti(M)),E}function Ho(M){if(M===null)return"null";var $=typeof M;return $==="object"||$==="array"||$==="function"?M.toString():""+M}function dS(M,$){switch($){case 2:return function(E){return this.fromWireType(ye[E>>2])};case 3:return function(E){return this.fromWireType(Vt[E>>3])};default:throw new TypeError("Unknown float type: "+M)}}function uS(M,$,E){switch($){case 0:return E?function(G){return le[G]}:function(G){return ve[G]};case 1:return E?function(G){return Z[G>>1]}:function(G){return ke[G>>1]};case 2:return E?function(G){return Je[G>>2]}:function(G){return it[G>>2]};default:throw new TypeError("Unknown integer type: "+M)}}var pS={};function Ap(M){var $=pS[M];return $===void 0?nt(M):$}var Rp=[];function ev(M){return M||Qe("Cannot use deleted val. handle = "+M),Cr[M].value}function tv(){return typeof globalThis=="object"?globalThis:Function("return this")()}function fS(M){var $=Rp.length;return Rp.push(M),$}function gS(M,$){for(var E=Array(M),G=0;G>2)+G],"parameter "+G);return E}var iv={},mS=[null,[],[]];Ve=s.InternalError=Y("InternalError");for(var rv=Array(256),od=0;256>od;++od)rv[od]=String.fromCharCode(od);je=rv,ri=s.BindingError=Y("BindingError"),F.prototype.isAliasOf=function(M){if(!(this instanceof F&&M instanceof F))return!1;var $=this.$a.cb.ab,E=this.$a.bb,G=M.$a.cb.ab;for(M=M.$a.bb;$.jb;)E=$.pb(E),$=$.jb;for(;G.jb;)M=G.pb(M),G=G.jb;return $===G&&E===M},F.prototype.clone=function(){if(this.$a.bb||oc(this),this.$a.nb)return this.$a.count.value+=1,this;var M=Gs(Object.create(Object.getPrototypeOf(this),{$a:{value:on(this.$a)}}));return M.$a.count.value+=1,M.$a.lb=!1,M},F.prototype.delete=function(){this.$a.bb||oc(this),this.$a.lb&&!this.$a.nb&&Qe("Object already scheduled for deletion"),ad(this),Go(this.$a),this.$a.nb||(this.$a.gb=void 0,this.$a.bb=void 0)},F.prototype.isDeleted=function(){return!this.$a.bb},F.prototype.deleteLater=function(){return this.$a.bb||oc(this),this.$a.lb&&!this.$a.nb&&Qe("Object already scheduled for deletion"),Fa.push(this),Fa.length===1&&Da&&Da(lc),this.$a.lb=!0,this},br.prototype.Lb=function(M){return this.Eb&&(M=this.Eb(M)),M},br.prototype.Cb=function(M){this.hb&&this.hb(M)},br.prototype.argPackAdvance=8,br.prototype.readValueFromPointer=We,br.prototype.deleteObject=function(M){M!==null&&M.delete()},br.prototype.fromWireType=function(M){function $(){return this.sb?mi(this.ab.mb,{cb:this.Ob,bb:E,ib:this,gb:M}):mi(this.ab.mb,{cb:this,bb:M})}var E=this.Lb(M);if(!E)return this.Cb(M),null;var G=Jt(this.ab,E);if(G!==void 0)return G.$a.count.value===0?(G.$a.bb=E,G.$a.gb=M,G.clone()):(G=G.clone(),this.Cb(M),G);if(G=this.ab.Kb(E),G=ce[G],!G)return $.call(this);G=this.rb?G.Gb:G.pointerType;var te=ni(E,this.ab,G.ab);return te===null?$.call(this):this.sb?mi(G.ab.mb,{cb:G,bb:te,ib:this,gb:M}):mi(G.ab.mb,{cb:G,bb:te})},s.getInheritedInstanceCount=function(){return Object.keys(jt).length},s.getLiveInheritedInstances=function(){var M=[],$;for($ in jt)jt.hasOwnProperty($)&&M.push(jt[$]);return M},s.flushPendingDeletes=lc,s.setDelayFunction=function(M){Da=M,Fa.length&&Da&&Da(lc)},Kr=s.UnboundTypeError=Y("UnboundTypeError"),s.count_emval_handles=function(){for(var M=0,$=5;$>oe])},fb:null})},k:function(M,$,E,G,te,oe,Le,fe,Te,Ee,Ae,Ct,Qt){Ae=nt(Ae),oe=Vi(te,oe),fe&&(fe=Vi(Le,fe)),Ee&&(Ee=Vi(Te,Ee)),Qt=Vi(Ct,Qt);var Di=st(Ae);he(Di,function(){Cn("Cannot construct "+Ae+" due to unbound types",[G])}),gt([M,$,E],G?[G]:[],function(Fi){if(Fi=Fi[0],G)var Hs=Fi.ab,Zr=Hs.mb;else Zr=F.prototype;Fi=De(Di,function(){if(Object.getPrototypeOf(this)!==ja)throw new ri("Use 'new' to construct "+Ae);if(ln.kb===void 0)throw new ri(Ae+" has no accessible constructor");var lv=ln.kb[arguments.length];if(lv===void 0)throw new ri("Tried to invoke ctor of "+Ae+" with invalid number of parameters ("+arguments.length+") - expected ("+Object.keys(ln.kb).toString()+") parameters instead!");return lv.apply(this,arguments)});var ja=Object.create(Zr,{constructor:{value:Fi}});Fi.prototype=ja;var ln=new Se(Ae,Fi,ja,Qt,Hs,oe,fe,Ee);Hs=new br(Ae,ln,!0,!1),Zr=new br(Ae+"*",ln,!1,!1);var ov=new br(Ae+" const*",ln,!1,!0);return ce[M]={pointerType:Zr,Gb:ov},gs(Di,Fi),[Hs,Zr,ov]})},h:function(M,$,E,G,te,oe){O(0<$);var Le=$i($,E);te=Vi(G,te);var fe=[oe],Te=[];gt([],[M],function(Ee){Ee=Ee[0];var Ae="constructor "+Ee.name;if(Ee.ab.kb===void 0&&(Ee.ab.kb=[]),Ee.ab.kb[$-1]!==void 0)throw new ri("Cannot register multiple constructors with identical number of parameters ("+($-1)+") for class '"+Ee.name+"'! Overload resolution is currently only performed using the parameter count, not actual type info!");return Ee.ab.kb[$-1]=function(){Cn("Cannot construct "+Ee.name+" due to unbound types",Le)},gt([],Le,function(Ct){return Ee.ab.kb[$-1]=function(){arguments.length!==$-1&&Qe(Ae+" called with "+arguments.length+" arguments, expected "+($-1)),Te.length=0,fe.length=$;for(var Qt=1;Qt<$;++Qt)fe[Qt]=Ct[Qt].toWireType(Te,arguments[Qt-1]);return Qt=te.apply(null,fe),Ne(Te),Ct[0].fromWireType(Qt)},[]}),[]})},a:function(M,$,E,G,te,oe,Le,fe){var Te=$i(E,G);$=nt($),oe=Vi(te,oe),gt([],[M],function(Ee){function Ae(){Cn("Cannot call "+Ct+" due to unbound types",Te)}Ee=Ee[0];var Ct=Ee.name+"."+$;fe&&Ee.ab.Pb.push($);var Qt=Ee.ab.mb,Di=Qt[$];return Di===void 0||Di.eb===void 0&&Di.className!==Ee.name&&Di.qb===E-2?(Ae.qb=E-2,Ae.className=Ee.name,Qt[$]=Ae):(ue(Qt,$,Ct),Qt[$].eb[E-2]=Ae),gt([],Te,function(Fi){return Fi=En(Ct,Fi,Ee,oe,Le),Qt[$].eb===void 0?(Fi.qb=E-2,Qt[$]=Fi):Qt[$].eb[E-2]=Fi,[]}),[]})},M:function(M,$,E){M=nt(M),gt([],[$],function(G){return G=G[0],s[M]=G.fromWireType(E),[]})},E:function(M,$){$=nt($),Gi(M,{name:$,fromWireType:function(E){var G=Cr[E].value;return nr(E),G},toWireType:function(E,G){return Gr(G)},argPackAdvance:8,readValueFromPointer:We,fb:null})},g:function(M,$,E,G){function te(){}E=lt(E),$=nt($),te.values={},Gi(M,{name:$,constructor:te,fromWireType:function(oe){return this.constructor.values[oe]},toWireType:function(oe,Le){return Le.value},argPackAdvance:8,readValueFromPointer:cc($,E,G),fb:null}),he($,te)},j:function(M,$,E){var G=Er(M,"enum");$=nt($),M=G.constructor,G=Object.create(G.constructor.prototype,{value:{value:E},constructor:{value:De(G.name+"_"+$,function(){})}}),M.values[E]=G,M[$]=G},p:function(M,$,E){E=lt(E),$=nt($),Gi(M,{name:$,fromWireType:function(G){return G},toWireType:function(G,te){if(typeof te!="number"&&typeof te!="boolean")throw new TypeError('Cannot convert "'+Ho(te)+'" to '+this.name);return te},argPackAdvance:8,readValueFromPointer:dS($,E),fb:null})},f:function(M,$,E,G,te,oe){var Le=$i($,E);M=nt(M),te=Vi(G,te),he(M,function(){Cn("Cannot call "+M+" due to unbound types",Le)},$-1),gt([],Le,function(fe){return fe=[fe[0],null].concat(fe.slice(1)),gs(M,En(M,fe,null,te,oe),$-1),[]})},e:function(M,$,E,G,te){function oe(Ee){return Ee}$=nt($),te===-1&&(te=4294967295);var Le=lt(E);if(G===0){var fe=32-8*E;oe=function(Ee){return Ee<>>fe}}var Te=$.indexOf("unsigned")!=-1;Gi(M,{name:$,fromWireType:oe,toWireType:function(Ee,Ae){if(typeof Ae!="number"&&typeof Ae!="boolean")throw new TypeError('Cannot convert "'+Ho(Ae)+'" to '+this.name);if(Aete)throw new TypeError('Passing a number "'+Ho(Ae)+'" from JS side to C/C++ side to an argument of type "'+$+'", which is outside the valid range ['+G+", "+te+"]!");return Te?Ae>>>0:Ae|0},argPackAdvance:8,readValueFromPointer:uS($,Le,G!==0),fb:null})},b:function(M,$,E){function G(oe){return oe>>=2,new te(re,it[oe+1],it[oe])}var te=[Int8Array,Uint8Array,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array][$];E=nt(E),Gi(M,{name:E,fromWireType:G,argPackAdvance:8,readValueFromPointer:G},{Mb:!0})},q:function(M,$){$=nt($);var E=$==="std::string";Gi(M,{name:$,fromWireType:function(G){var te=it[G>>2];if(E)for(var oe=G+4,Le=0;Le<=te;++Le){var fe=G+4+Le;if(ve[fe]==0||Le==te){if(oe=oe?X(ve,oe,fe-oe):"",Te===void 0)var Te=oe;else Te+=String.fromCharCode(0),Te+=oe;oe=fe+1}}else{for(Te=Array(te),Le=0;Le=Ct&&(Ct=65536+((Ct&1023)<<10)|te.charCodeAt(++Ae)&1023),127>=Ct?++Ee:Ee=2047>=Ct?Ee+2:65535>=Ct?Ee+3:Ee+4}return Ee}:function(){return te.length})(),fe=Op(4+Le+1);if(it[fe>>2]=Le,E&&oe)T(te,fe+4,Le+1);else if(oe)for(oe=0;oe>2],Ae=Le(),Ct,Qt=Te+4,Di=0;Di<=Ee;++Di){var Fi=Te+4+Di*$;(Ae[Fi>>fe]==0||Di==Ee)&&(Qt=G(Qt,Fi-Qt),Ct===void 0?Ct=Qt:(Ct+=String.fromCharCode(0),Ct+=Qt),Qt=Fi+$)}return vs(Te),Ct},toWireType:function(Te,Ee){typeof Ee!="string"&&Qe("Cannot pass non-string to C++ string type "+E);var Ae=oe(Ee),Ct=Op(4+Ae+$);return it[Ct>>2]=Ae>>fe,te(Ee,Ct+4,Ae+$),Te!==null&&Te.push(vs,Ct),Ct},argPackAdvance:8,readValueFromPointer:We,fb:function(Te){vs(Te)}})},u:function(M,$,E,G,te,oe){Pe[M]={name:nt($),ob:Vi(E,G),hb:Vi(te,oe),elements:[]}},t:function(M,$,E,G,te,oe,Le,fe,Te){Pe[M].elements.push({wb:$,ub:Vi(E,G),vb:te,Ab:oe,zb:Vi(Le,fe),Bb:Te})},w:function(M,$,E,G,te,oe){Ge[M]={name:nt($),ob:Vi(E,G),hb:Vi(te,oe),Db:[]}},i:function(M,$,E,G,te,oe,Le,fe,Te,Ee){Ge[M].Db.push({Ib:nt($),wb:E,ub:Vi(G,te),vb:oe,Ab:Le,zb:Vi(fe,Te),Bb:Ee})},H:function(M,$){$=nt($),Gi(M,{Nb:!0,name:$,argPackAdvance:0,fromWireType:function(){},toWireType:function(){}})},d:function(M,$,E,G){M=Rp[M],$=ev($),E=Ap(E),M($,E,null,G)},N:nr,z:function(M){return M===0?Gr(tv()):(M=Ap(M),Gr(tv()[M]))},c:function(M,$){$=gS(M,$);for(var E=$[0],G=E.name+"_$"+$.slice(1).map(function(Ee){return Ee.name}).join("_")+"$",te=["retType"],oe=[E],Le="",fe=0;fe>> 2) + "+oe+'], "parameter '+oe+`"); -var arg`+oe+" = argType"+oe+`.readValueFromPointer(args); -args += argType`+oe+`['argPackAdvance']; -`;te=new Function("requireRegisteredType","Module","__emval_register",Le+("var obj = new constructor("+te+`); -return __emval_register(obj); -} -`))(Er,s,Gr),iv[$]=te}return te(M,E,G)},O:function(){return Gr([])},F:function(M){return Gr(Ap(M))},L:function(M,$){return M=Er(M,"_emval_take_value"),M=M.readValueFromPointer($),Gr(M)},m:function(){ot()},B:function(M,$,E){ve.copyWithin(M,$,$+E)},C:function(){ot("OOM")},D:function(){return 0},y:function(){},o:function(M,$,E,G){for(var te=0,oe=0;oe>2],fe=Je[$+(8*oe+4)>>2],Te=0;Te>2]=te,0},memory:S,K:function(){},r:function(){},J:function(){},I:function(){},A:function(){},table:C},nv=function(){function M(te){s.asm=te.exports,Ce--,s.monitorRunDependencies&&s.monitorRunDependencies(Ce),Ce==0&&ft&&(te=ft,ft=null,te())}function $(te){M(te.instance)}function E(te){return pe().then(function(oe){return WebAssembly.instantiate(oe,G)}).then(te,function(oe){_("failed to asynchronously prepare wasm: "+oe),ot(oe)})}var G={a:vS};if(Ce++,s.monitorRunDependencies&&s.monitorRunDependencies(Ce),s.instantiateWasm)try{return s.instantiateWasm(G,M)}catch(te){return _("Module.instantiateWasm callback failed with error: "+te),!1}return function(){if(b||typeof WebAssembly.instantiateStreaming!="function"||ci()||ht("file://")||typeof fetch!="function")return E($);fetch(Gt,{credentials:"same-origin"}).then(function(te){return WebAssembly.instantiateStreaming(te,G).then($,function(oe){_("wasm streaming compile failed: "+oe),_("falling back to ArrayBuffer instantiation"),E($)})})}(),{}}();s.asm=nv;var sv=s.___wasm_call_ctors=function(){return(sv=s.___wasm_call_ctors=s.asm.P).apply(null,arguments)};s.__Z6ToCmdsRK6SkPath=function(){return(s.__Z6ToCmdsRK6SkPath=s.asm.Q).apply(null,arguments)},s.__Z8FromCmdsmi=function(){return(s.__Z8FromCmdsmi=s.asm.R).apply(null,arguments)},s.__Z7NewPathv=function(){return(s.__Z7NewPathv=s.asm.S).apply(null,arguments)},s.__Z8CopyPathRK6SkPath=function(){return(s.__Z8CopyPathRK6SkPath=s.asm.T).apply(null,arguments)},s.__Z6EqualsRK6SkPathS1_=function(){return(s.__Z6EqualsRK6SkPathS1_=s.asm.U).apply(null,arguments)},s.__Z11ToSVGStringRK6SkPath=function(){return(s.__Z11ToSVGStringRK6SkPath=s.asm.V).apply(null,arguments)},s.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=function(){return(s.__Z13FromSVGStringNSt3__212basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEE=s.asm.W).apply(null,arguments)},s.__Z13ApplySimplifyR6SkPath=function(){return(s.__Z13ApplySimplifyR6SkPath=s.asm.X).apply(null,arguments)},s.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=function(){return(s.__Z11ApplyPathOpR6SkPathRKS_8SkPathOp=s.asm.Y).apply(null,arguments)},s.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=function(){return(s.__Z10MakeFromOpRK6SkPathS1_8SkPathOp=s.asm.Z).apply(null,arguments)},s.__Z14ResolveBuilderR11SkOpBuilder=function(){return(s.__Z14ResolveBuilderR11SkOpBuilder=s.asm._).apply(null,arguments)},s.__Z8ToCanvasRK6SkPathN10emscripten3valE=function(){return(s.__Z8ToCanvasRK6SkPathN10emscripten3valE=s.asm.$).apply(null,arguments)},s.__Z8ToPath2DRK6SkPath=function(){return(s.__Z8ToPath2DRK6SkPath=s.asm.aa).apply(null,arguments)};var vs=s._free=function(){return(vs=s._free=s.asm.ba).apply(null,arguments)},Op=s._malloc=function(){return(Op=s._malloc=s.asm.ca).apply(null,arguments)},av=s.___getTypeName=function(){return(av=s.___getTypeName=s.asm.da).apply(null,arguments)};s.___embind_register_native_and_builtin_types=function(){return(s.___embind_register_native_and_builtin_types=s.asm.ea).apply(null,arguments)},s.dynCall_vi=function(){return(s.dynCall_vi=s.asm.fa).apply(null,arguments)},s.dynCall_iiiii=function(){return(s.dynCall_iiiii=s.asm.ga).apply(null,arguments)},s.dynCall_ii=function(){return(s.dynCall_ii=s.asm.ha).apply(null,arguments)},s.dynCall_i=function(){return(s.dynCall_i=s.asm.ia).apply(null,arguments)},s.dynCall_viifffffffff=function(){return(s.dynCall_viifffffffff=s.asm.ja).apply(null,arguments)},s.dynCall_vifffffi=function(){return(s.dynCall_vifffffi=s.asm.ka).apply(null,arguments)},s.dynCall_vifffff=function(){return(s.dynCall_vifffff=s.asm.la).apply(null,arguments)},s.dynCall_viffffff=function(){return(s.dynCall_viffffff=s.asm.ma).apply(null,arguments)},s.dynCall_vifffffffi=function(){return(s.dynCall_vifffffffi=s.asm.na).apply(null,arguments)},s.dynCall_viff=function(){return(s.dynCall_viff=s.asm.oa).apply(null,arguments)},s.dynCall_viffff=function(){return(s.dynCall_viffff=s.asm.pa).apply(null,arguments)},s.dynCall_vii=function(){return(s.dynCall_vii=s.asm.qa).apply(null,arguments)},s.dynCall_iii=function(){return(s.dynCall_iii=s.asm.ra).apply(null,arguments)},s.dynCall_iifff=function(){return(s.dynCall_iifff=s.asm.sa).apply(null,arguments)},s.dynCall_iiffi=function(){return(s.dynCall_iiffi=s.asm.ta).apply(null,arguments)},s.dynCall_vifffffffff=function(){return(s.dynCall_vifffffffff=s.asm.ua).apply(null,arguments)},s.dynCall_iiii=function(){return(s.dynCall_iiii=s.asm.va).apply(null,arguments)},s.dynCall_viii=function(){return(s.dynCall_viii=s.asm.wa).apply(null,arguments)},s.dynCall_viiii=function(){return(s.dynCall_viiii=s.asm.xa).apply(null,arguments)},s.dynCall_fif=function(){return(s.dynCall_fif=s.asm.ya).apply(null,arguments)},s.dynCall_viif=function(){return(s.dynCall_viif=s.asm.za).apply(null,arguments)},s.dynCall_fi=function(){return(s.dynCall_fi=s.asm.Aa).apply(null,arguments)},s.dynCall_viiifffffffff=function(){return(s.dynCall_viiifffffffff=s.asm.Ba).apply(null,arguments)},s.dynCall_viifffffi=function(){return(s.dynCall_viifffffi=s.asm.Ca).apply(null,arguments)},s.dynCall_viifffff=function(){return(s.dynCall_viifffff=s.asm.Da).apply(null,arguments)},s.dynCall_viiffffff=function(){return(s.dynCall_viiffffff=s.asm.Ea).apply(null,arguments)},s.dynCall_viifffffffi=function(){return(s.dynCall_viifffffffi=s.asm.Fa).apply(null,arguments)},s.dynCall_viiff=function(){return(s.dynCall_viiff=s.asm.Ga).apply(null,arguments)},s.dynCall_viiffff=function(){return(s.dynCall_viiffff=s.asm.Ha).apply(null,arguments)},s.dynCall_iiifff=function(){return(s.dynCall_iiifff=s.asm.Ia).apply(null,arguments)},s.dynCall_iiiffi=function(){return(s.dynCall_iiiffi=s.asm.Ja).apply(null,arguments)},s.dynCall_fii=function(){return(s.dynCall_fii=s.asm.Ka).apply(null,arguments)},s.dynCall_iiffff=function(){return(s.dynCall_iiffff=s.asm.La).apply(null,arguments)},s.dynCall_fiif=function(){return(s.dynCall_fiif=s.asm.Ma).apply(null,arguments)},s.dynCall_iiif=function(){return(s.dynCall_iiif=s.asm.Na).apply(null,arguments)},s.dynCall_vifii=function(){return(s.dynCall_vifii=s.asm.Oa).apply(null,arguments)},s.dynCall_viifd=function(){return(s.dynCall_viifd=s.asm.Pa).apply(null,arguments)},s.dynCall_viid=function(){return(s.dynCall_viid=s.asm.Qa).apply(null,arguments)},s.dynCall_viddi=function(){return(s.dynCall_viddi=s.asm.Ra).apply(null,arguments)},s.dynCall_iidi=function(){return(s.dynCall_iidi=s.asm.Sa).apply(null,arguments)},s.dynCall_viffi=function(){return(s.dynCall_viffi=s.asm.Ta).apply(null,arguments)},s.dynCall_fffff=function(){return(s.dynCall_fffff=s.asm.Ua).apply(null,arguments)},s.dynCall_viiiii=function(){return(s.dynCall_viiiii=s.asm.Va).apply(null,arguments)},s.dynCall_viiiiiffii=function(){return(s.dynCall_viiiiiffii=s.asm.Wa).apply(null,arguments)},s.dynCall_iiiiii=function(){return(s.dynCall_iiiiii=s.asm.Xa).apply(null,arguments)},s.dynCall_iiiiiii=function(){return(s.dynCall_iiiiiii=s.asm.Ya).apply(null,arguments)},s.dynCall_iidiiii=function(){return(s.dynCall_iidiiii=s.asm.Za).apply(null,arguments)},s.dynCall_jiji=function(){return(s.dynCall_jiji=s.asm._a).apply(null,arguments)},s.asm=nv;var ld;ft=function M(){ld||zp(),ld||(ft=M)};function zp(){function M(){if(!ld&&(ld=!0,s.calledRun=!0,!k)){if(w(I),w(U),a(s),s.onRuntimeInitialized&&s.onRuntimeInitialized(),s.postRun)for(typeof s.postRun=="function"&&(s.postRun=[s.postRun]);s.postRun.length;){var $=s.postRun.shift();se.unshift($)}w(se)}}if(!(0i%2===0)}isValidPath(e){return this.pathkit.FromSVGString(e).isValid()}simplify(e){return this.pathkit.FromSVGString(e).simplify().toSVGString()}convertLineJoin(e){const t=this.pathkit;switch(e){case"miter":return t.StrokeJoin.MITER;case"round":return t.StrokeJoin.ROUND;case"bevel":return t.StrokeJoin.BEVEL}}convertLineCap(e){const t=this.pathkit;switch(e){case"butt":return t.StrokeCap.BUTT;case"round":return t.StrokeCap.ROUND;case"square":return t.StrokeCap.SQUARE}}stroke(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e);if(Ni(t["stroke-dasharray"])){const a=t["stroke-dasharray"];a.length>=2&&r.dash(a[0],a[1],+(t["stroke-dashoffset"]||0))}let s=r.stroke({width:+t["stroke-width"],join:this.convertLineJoin(t["stroke-linejoin"]),cap:this.convertLineCap(t["stroke-linecap"])});return s.setFillType(i.FillType.WINDING),s.simplify().toSVGString()}round(e,t={width:1,miter_limit:4}){return this.stroke(e,ze(P({},t),{"stroke-linejoin":"round"}))}grow(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e);return r.copy().stroke(t).op(r,i.PathOp.DIFFERENCE).toSVGString()}shrink(e,t={width:1,miter_limit:4}){const i=this.pathkit,r=i.FromSVGString(e),s=r.copy().simplify();return r.copy().stroke(t).op(s,i.PathOp.DIFFERENCE).toSVGString()}dash(e,t,i,r=1){return this.pathkit.FromSVGString(e).dash(t,i,r).toSVGString()}trim(e,t,i,r=!1){return this.pathkit.FromSVGString(e).trim(t,i,r).toSVGString()}}class Zx{constructor(e){this.$editor=e,this.selectedPointKeys={},this.selectedPointList=[]}get length(){return this.selectedPointList.length}initialize(){this.selectedPointKeys={},this.selectedPointList=[]}makeSegmentKey(e,t){return`${e}_${t}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({key:t,index:i})=>({key:t,index:+i||0})),e.forEach(t=>{var i=this.makeSegmentKey(t.index,t.key);this.selectedPointKeys[i]=t})}toggleSegment(e,t){this.isSelectedSegment(t,e)?this.select(...this.selectedPointList.filter(i=>i.key!==t||i.index!==e)):this.select(...this.selectedPointList,{key:t,index:e})}toggleSelect(...e){e=e.map(s=>ze(P({},s),{included:this.isSelectedSegment(s.index,s.key)}));const t=e.filter(s=>s.included),i=e.filter(s=>!s.included);let r=[...this.selectedPointList];t.length&&(r=this.selectedPointList.filter(s=>{const a=this.makeSegmentKey(s);return Boolean(t.find(o=>a===this.makeSegmentKey(o)))===!1})),this.select(...r,...i)}selectKeyIndex(e,t){this.isSelectedSegment(e,t)||this.select({key:t,index:e})}isSelectedSegment(e,i){var i=this.makeSegmentKey(e,i);return!!this.selectedPointKeys[i]}}class Jx{constructor(e){this.$editor=e,this.$context=this.$editor.context,this.project=null,this.itemKeys={},this.hoverId="",this.hoverItems=[],this.ids=[],this.colorsteps=[],this.ghosts=[],this.cachedItemMatrices=[],this.cachedArtBoardVerties=[],this.cachedVerties=wi(0,0,0,0,"50% 50% 0px"),this.gridInformation={},this.dragTargetItem=null,this.$editor.on("config:bodyEvent",()=>{this.refreshMousePosition()})}refreshMousePosition(){const e=this.$context.config.get("area.width"),t=this.$context.viewport.getWorldPosition();this.pos=t;const[i,r]=bg(t[0],t[1],e);this.row=i,this.column=r}get modelManager(){return this.$context.modelManager}get lockManager(){return this.$context.lockManager}get items(){return this.modelManager.searchLiveItemsById(this.ids)}get current(){return this.modelManager.searchItem(this.ids[0])}get currentProject(){return this.project||(this.project=this.modelManager.getProjectByIndex()),this.project}get isEmpty(){return!this.length}get isOne(){return this.length===1&&this.current.is("artboard")?!0:this.length===1}get isMany(){return this.length>1}get length(){return this.ids.length}get isLayoutItem(){var e;return(e=this.current)==null?void 0:e.isLayoutItem()}get allLayers(){return this.currentProject.allLayers||[]}get filteredLayers(){var t;const e=this.$editor.context.config.get("area.width");return((t=this.currentProject)==null?void 0:t.filteredAllLayers(i=>{if(i.is("project"))return!1;const r=i.getAreaPosition(e);if(!r)return!1;const{column:s,row:a}=r;return s[0]<=this.column&&this.column<=s[1]&&a[0]<=this.row&&this.row<=a[1]}).filter(i=>i.isPointInRect(this.pos[0],this.pos[1])))||[]}get notSelectedLayers(){return this.filteredLayers.filter(e=>this.check(e)===!1)}get selectedArtboards(){return[...new Set(this.items.map(e=>e.artboard))]}hasChangedField(...e){return this.current?this.current.hasChangedField(...e):!1}getRootItem(e){var t=e;return e&&e.parentId&&(t=e.parent),t}selectColorStep(...e){this.colorsteps=e}isSelectedColorStep(e){return this.colorsteps.includes(e)}selectProject(e){gi(e)&&(e=this.modelManager.get(e)),this.project=e,this.select()}isSameIds(e){return this.ids.length!=e.length?!1:this.ids.filter(t=>e.includes(t)).length===this.ids.length}filterIds(e=[]){return e.map(t=>t.id||t).filter(Boolean)}selectByGroup(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(r=>!this.lockManager.get(r.id));const i=this.modelManager.convertGroupItems(t);return this.select(...i)}select(...e){var t=this.modelManager.searchItemsById(this.filterIds(e||[])).filter(s=>!s.lock&&s.isAbsolute);const i=t.filter(s=>s.path.filter(a=>t.includes(a)).length<2),r=i.map(s=>s.id);return this.isSameIds(r)?!1:(this.itemKeys={},i.forEach(s=>{this.itemKeys[s.id]=s}),this.ids=r,this.setRectCache(),this.$editor.emit(Lt),!0)}reload(){return this.select(...this.ids)}reselect(){this.setRectCache()}check(e){return!!this.itemKeys[e.id]}hasPathOf(e){return e.hasPathOf(this.items.filter(t=>t.isNot("artboard")))}hasParent(e){return this.items.some(t=>t.hasParent(e))}get(e){return this.itemKeys[e]}empty(){this.select()}itemsByIds(e=null){let t=[];return Array.isArray(e)?t=e:(gi(e)||hs(e))&&(t=[e]),this.modelManager.searchItemsById(t)}selectById(e){this.select(e)}selectAfterCopy(){this.select(...this.items.map(e=>e.copy()))}addById(e){this.itemKeys[e]||this.select(...this.ids,e)}removeById(e){let t=e;gi(e)&&(t=[e]);const i=this.ids.filter(r=>t.includes(r)===!1);this.select(...i)}toggleById(e){this.itemKeys[e]?this.removeById(e):this.addById(e)}getArtboardByPoint(e){return this.currentProject.artboards.find(t=>to(t.originVerties,...e))}changeInLayoutArea(){let e=!1;return this.each(t=>{if(t.is("artboard")===!1){if(t.artboard){const r=t.artboard.originVerties;if(to(r,this.pos[0],this.pos[1]))return!1}const i=this.cachedArtBoardVerties.find(r=>to(r.matrix.originVerties,this.pos[0],this.pos[1]));i?i.item!==t.artboard&&i.item.hasLayout()===!1&&(i.item.appendChild(t),e=!0):t.artboard&&(this.currentProject.appendChild(t),e=!0)}}),e}setRectCache(){if(this.isEmpty){this.cachedVerties=[],this.cachedRectVerties=[],this.cachedItemMatrices=[],this.ghosts=[],this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}));return}this.cachedVerties=this.verties,this.cachedRectVerties=xn(this.verties),this.cachedItemMatrices=[],this.cachedChildren=[],this.ghosts=[],this.items.forEach(e=>{if(e.is("artboard"))this.cachedItemMatrices.push(e.matrix);else if(e.hasChildren()){const t=this.modelManager.getAllLayers(e.id).map(i=>i.matrix);this.cachedChildren.push(...t.map(i=>i.id)),this.cachedItemMatrices.push(...t)}else this.cachedItemMatrices.push(e.matrix);this.ghosts.push(e.absoluteMatrix)}),this.cachedArtBoardVerties=this.currentProject.artboards.map(e=>({item:e,matrix:e.matrix}))}startToCacheChildren(){this.items.forEach(e=>{e.startToCacheChildren()})}recoverChildren(){this.items.forEach(e=>{e.recoverChildren()})}get verties(){return this.isOne?this.current.verties:this.rectVerties}get targetVerties(){return this.isOne?this.current.originVerties:RL(this.items)}get originVerties(){return this.rectVerties.filter((e,t)=>t<4)}get rectVerties(){return this.isEmpty?[]:Gc(this.items)}get itemRect(){const e=this.verties;return{x:e[0][0],y:e[0][1],width:mr(e[0],e[1]),height:mr(e[0],e[3])}}toCloneObject(){let e={};return this.each(t=>{e[t.id]=t.toCloneObject(!1)}),e}pack(...e){let t={};return this.each(i=>{t[i.id]={},e.forEach(r=>{t[i.id][r]=i[r]})}),t}packByIds(e,...t){let i={},r=[];e===null?r=this.items:(gi(e)||Array.isArray(e))&&(r=this.itemsByIds(e));const s={};return t.forEach(a=>{s[a]=!0}),r.forEach(a=>{i[a.id]=a.attrs(...t)}),i}packByValue(e,t=null){let i={},r=[];return t===null?r=this.items:(gi(t)||Array.isArray(t))&&(r=this.itemsByIds(t)),r.forEach(s=>{i[s.id]={},Object.keys(e).forEach(a=>{i[s.id][a]=Ye(e[a])?e[a].call(e,s):e[a]})}),i}each(e){Ye(e)&&this.items.forEach(t=>{e(t)})}map(e){return Ye(e)?this.items.map((t,i)=>e(t,i)):this.items}reset(e){Object.entries(e).forEach(([t,i])=>{var r;(r=this.get(t))==null||r.reset(i)})}resetCallback(e){this.each(t=>t.reset(e(t)))}resize(){this.each(e=>e.resize())}remove(){this.each(e=>e.remove()),this.empty()}copy(){console.warn("copy is deprecated"),this.copyItems=this.items.map(e=>e)}paste(){console.warn("paste is deprecated. use copy and paste"),this.select(...this.copyItems.map(e=>e.copy(10))),this.copy()}hasPoint(e){var t;return this.isMany?to(this.originVerties,e[0],e[1]):(t=this.current)==null?void 0:t.hasPoint(e[0],e[1])}hasChildrenPoint(e){return this.cachedChildren.some(t=>{var i;return(i=this.modelManager.get(t))==null?void 0:i.hasPoint(e[0],e[1])})}checkChildren(e){return this.cachedChildren.includes(e)}checkHover(e){return gi(e)?this.hoverId===e:this.hoverItems.findIndex(t=>t.id===e.id)>-1}hasHoverItem(){return this.hoverId!==""}selectHoverItem(){this.select(this.hoverId)}setHoverId(e){let t=!1;return!e||this.itemKeys[e]?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):this.cachedArtBoardVerties.find(i=>i.item.id===e)?(this.hoverId!=""&&(t=!0),this.hoverId="",this.hoverItems=[]):(this.hoverId!=e&&(t=!0),this.hoverId=e,this.hoverItems=this.itemsByIds([e]).filter(i=>i.isNot("artboard")),this.hoverItems.length===0&&(this.hoverId="",t=!0)),t&&this.$editor.emit("changeHoverItem"),t}is(...e){var t;return e.includes((t=this.current)==null?void 0:t.itemType)}isAll(...e){return this.items.every(t=>e.includes(t.itemType))}updateGridInformation(e={}){this.gridInformation=e}updateDragTargetItem(e){this.dragTargetItem=e}}const qz=3,Zz={dist:Pt(0,0,0)},Jz="x",Qz="y";function eV(n,e,t=1){return Math.abs(n[0]-e[0])e.is("project")||this.context.selection.check(e)?!1:this.context.viewport.checkInViewportArea(e.originVerties)):[]}clear(){this.snapTargetLayers=this.makeSnapTargetLayers()}convertMatrix(e){const t=this.convertGuideAndPathMatrix(e),i=t.map(s=>s[0]),r=t.map(s=>s[1]);return{id:e.id,xList:i,yList:r,verties:t,rectVerties:Tx(e.originVerties)}}convertGuideAndPathMatrix(e){return[...e.guideVerties]}get snapTargetLayersWithSelection(){return this.context.selection.currentProject?this.context.selection.currentProject.allLayers.filter(e=>e.is("project")?!1:e.verties.some(i=>this.context.viewport.checkInViewport(i))):[]}getSnapPoints(){const e=[];return this.snapTargetLayersWithSelection.forEach(t=>{e.push.apply(e,this.convertGuideAndPathMatrix(t))}),e}checkX(e,t,i=0){const r=[];return e.forEach((s,a)=>{t.forEach((o,l)=>{Math.abs(s-o)<=i&&r.push({targetX:s,sourceX:o,sourceIndex:l,targetIndex:a,dx:s-o})})}),r}checkY(e,t,i=0){const r=[];return e.forEach((s,a)=>{t.forEach((o,l)=>{const c=s-o;Math.abs(c)<=i&&r.push({targetY:s,sourceY:o,sourceIndex:l,targetIndex:a,dy:c})})}),r}check(e,t=0){const i=[],r=e.map(l=>l[0]),s=e.map(l=>l[1]),a=this.context.config.get("horizontal.line"),o=this.context.config.get("vertical.line");if(a&&o){const l=this.checkX(a,r,t)[0],c=this.checkY(o,s,t)[0],h=Pt(l?l.dx:0,c?c.dy:0,0);(Uo(h[0])||Uo(h[1]))&&i.push({target:null,dist:h})}return this.snapTargetLayers.forEach(l=>{const c=this.checkX(l.xList,r,t)[0],h=this.checkY(l.yList,s,t)[0],d=Pt(c?c.dx:0,h?h.dy:0,0);(Uo(d[0])||Uo(d[1]))&&i.push({target:l,dist:d})}),i.find(l=>Uo(l[0])||Uo(l[1]))||Zz}checkPoint(e){const t=this.check([e]);return bt([],e,t.dist)}getGuidesByPointPoint(e,t,i=0){const r=[],s={};let a,o;for(let l=0,c=e.length;l{if(s[l]&&s[l].length){const c=s[l].sort((h,d)=>h[3]-d[3]);r.push(...c)}}),r}findGuide(e,t=0){const i=[];return this.snapTargetLayers.forEach(r=>{const s=this.getGuidesByPointPoint(e,r.guideVerties,t);i.push.apply(i,s)}),i.sort((r,s)=>r[3]-s[3]),i.filter((r,s)=>s<10)}findGuideOne(e){return[this.findGuide(e)[0]]}getWorldPosition(){const e=Ta([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return bt([],t.dist,e)}getSnapTarget(){const e=Ta([],this.context.viewport.getWorldPosition()),t=this.check([e],3/this.context.viewport.scale);return{vertex:bt([],t.dist,e),snap:t}}}class iV{constructor(e){this.$editor=e,this.items=[],this.itemKeys={}}initialize(){this.items=[],this.itemKeys={}}currentProject(e){var t=this.$editor.context.selection.currentProject;t&&e&&e(t)}empty(){this.select()}each(e){this.items.forEach((t,i)=>{e&&e(t,i)})}refreshCache(e){this.items=e,this.itemKeys={},this.items.forEach(t=>{this.itemKeys[t.id]=t})}cachedList(){return this.items.map(e=>P({},e))}checked(e){return!!this.itemKeys[e]}selectLayer(e){this.currentProject(t=>{var i=t.getKeyframeListReturnArray().filter(r=>r.layerId===e);this.refreshCache(i)})}toggleLayerContainer(e){this.currentProject(t=>{t.getSelectedTimeline().animations.filter(i=>i.id===e).forEach(i=>{i.collapsed=!i.collapsed})})}selectProperty(e,t){this.currentProject(i=>{var r=i.getKeyframeListReturnArray().filter(s=>s.layerId===e&&s.property===t);this.refreshCache(r)})}select(...e){this.refreshCache(e)}selectBySearch(e,t,i){this.currentProject(r=>{var s=[];e.forEach(o=>{var l=[];if(o.property){var c=r.getTimelineProperty(o.layerId,o.property);l=c.keyframes.filter(h=>t<=h.time&&h.time<=i)}else{var c=r.getTimelineObject(o.layerId);c.properties.filter(d=>d.property===o.property).forEach(d=>{l.push.apply(l,d.keyframes.filter(u=>t<=u.time&&u.time<=i))})}s.push.apply(s,l)});var a={};s.forEach(o=>{a[o.id]=o}),this.select(...Object.values(a))})}checkLayer(e){return Object.keys(this.itemKeys).some(t=>this.itemKeys[t].layerId===e)}checkProperty(e,t){return Object.keys(this.itemKeys).some(i=>this.itemKeys[i].layerId===e&&this.itemKeys[i].property===t)}}class eb{constructor(e){this.editor=e,this.hiddenList={}}get list(){return Object.keys(this.hiddenList)}get(e){return!this.hiddenList[e]}set(e,t){t?delete this.hiddenList[e]:this.hiddenList[e]=!0}toggle(e){this.get(e)?this.set(e,!1):this.set(e,!0)}}class rV extends hp{template(){return` -
          -
            - ${this.props.items.map((e,t)=>Qg(e,`${this.groupId}-${t}`)).join("")} -
          -
          - `}}class nV extends ge{checkProps(e={}){return e}components(){return{ContextDropdownMenu:rV,ToolbarButtonMenuItem:dx}}template(){return'
          '}[me("$el")](){var e;return(e=this.props.items)==null?void 0:e.map((t,i)=>this.renderMenuItem(t,i))}renderMenuItem(e,t){switch(e.type){case la.LINK:return this.renderLink(e,t);case la.SUBMENU:return this.renderMenu(e,t);case la.BUTTON:return this.renderButton(e,t);case la.DROPDOWN:return this.renderDropdown(e,t);default:return this.renderButton(e,t)}}renderButton(e,t){return W("ToolbarButtonMenuItem",{ref:"$button-"+t,title:e.title,icon:e.icon,command:e.command,shortcut:e.shortcut,args:e.args,nextTick:e.nextTick,disabled:e.disabled,selected:e.selected,selectedKey:e.selectedKey,checked:e.checked,action:e.action,events:e.events,style:e.style})}renderDropdown(e,t){return W("ContextDropdownMenu",ze(P({ref:"$dropdown-"+t},e),{items:e.items,icon:e.icon,title:e.title,events:e.events||[]}))}}class sV extends ge{template(){return V("div",{class:"elf--context-menu-view"})}[Me("$el")](){const e=this.$context.config.get("context.menu.open");if(!!e)return{style:{left:y.px(e.x),top:y.px(e.y+10)}}}[me("$el")](){const e=this.$context.config.get("context.menu.open");if(!e)return;const t=this.$menu.getTargetMenu(e.target)||[];return V(nV,{items:[{type:"dropdown",items:[...t,...e.items||[]]}]})}[qt("context.menu.open")](){this.refresh(),this.$context.config.get("context.menu.open")?this.$el.show():this.$el.hide()}close(){this.$el.hide(),this.$context.config.set("context.menu.open",null)}[Ke("document")](e){const i=qe.create(e.target).closest("elf--context-menu-view");i?i.el!==this.$el.el&&this.close():this.close()}}class tb extends Tr{getIconString(){return"align_vertical_bottom"}getTitle(){return"Bottom"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.bottom")}}class ib extends Tr{getIconString(){return"align_horizontal_center"}getTitle(){return"Center"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.center")}}class rb extends Tr{getIconString(){return"align_horizontal_left"}getTitle(){return"Left"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.left")}}class nb extends Tr{getIconString(){return"align_vertical_center"}getTitle(){return"middle"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.middle")}}class sb extends Tr{getIconString(){return"align_horizontal_right"}getTitle(){return"Right"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.right")}}class ab extends Tr{getIconString(){return"vertical_distribute"}getTitle(){return"height"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.height")}}class ob extends Tr{getIconString(){return"horizontal_distribute"}getTitle(){return"width"}isHideTitle(){return!0}clickButton(){this.$commands.emit("same.width")}}class lb extends Tr{getIconString(){return"align_vertical_top"}getTitle(){return"Top"}isHideTitle(){return!0}clickButton(){this.$commands.emit("sort.top")}}class Bt extends ge{onToggleShow(){}template(){return` -
          - ${this.isHideHeader()?"":` -
          - - ${this.getTools()} -
          `} -
          ${this.getBody()}
          - ${this.getFooter()?`
          ${this.getFooter()}
          `:""} -
          - `}[Me("$el")](){return{style:{"--property-order":this.order}}}setTitle(e){this.refs.$propertyTitle.html(e)}hasKeyframe(){return!1}isHideHeader(){return!1}isFirstShow(){return!0}getClassName(){return""}getTitleClassName(){return""}getBodyClassName(){return""}getKeyframeProperty(){return""}getTitle(){return""}getTools(){return""}getBody(){return""}getFooter(){return""}isPropertyShow(){return this.$el.hasClass("show")}toggle(e){this.$el.toggle(e)}hide(){this.$el.hide()}show(){this.$el.show()}onShowTitle(){}refreshShowIsNot(e="",t=!0){var i=this.$context.selection.current;i&&(e.includes(i.itemType)?this.hide():(this.show(),t&&this.refresh()))}refreshShow(e,t=!0){var i=this.$context.selection.current;i?Ye(e)&&e()?(this.show(),t&&this.refresh()):!Ye(e)&&e.includes(i.itemType)?(this.show(),t&&this.refresh()):this.hide():this.hide()}startInputEditing(e){!e||(e.attr("contenteditable",!0),e.css({"background-color":"white",outline:"1px auto black",color:"black"}),e.focus())}endInputEditing(e,t){if(!!e){e.attr("contenteditable",!1),e.css({"background-color":null,outline:null,color:null});var i=e.attr("data-index");t&&t(i,e.text().trim()),e.blur()}}get editableProperty(){return""}get order(){return 1e3}checkShow(){return this.$context.selection.current?this.$context.selection.current.editable(this.editableProperty)?(this.show(),!0):(this.hide(),!1):(this.hide(),!1)}}class aV extends Bt{components(){return{LeftAlign:rb,CenterAlign:ib,RightAlign:sb,TopAlign:lb,MiddleAlign:nb,BottomAlign:tb,SameWidth:ob,SameHeight:ab}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` -
          - ${lp("LeftAlign","CenterAlign","RightAlign","TopAlign","MiddleAlign","BottomAlign",["SameWidth",{direction:"bottom"}],"SameHeight")} -
          - `}}function oV(n){n.registerUI("inspector.tab.style",{AlignmentProperty:aV})}function cb(n,e="@"){return`${e}${n.startIndex}`.padEnd(10,"0")}function lV(n,e){const t=n.match(e);let i=[];if(!t)return i;for(var r=0,s=t.length;r{const l=n.indexOf(o.parsedString,a.next);o.startIndex=l,o.endIndex=l+o.parsedString.length,a.next=o.endIndex}),i}function hb(n,e){const t=lV(n,e);return t.forEach(i=>{n=n.replace(i.parsedString,cb(i))}),{str:n,matches:t}}function Tg(n,e){return e.forEach(t=>{n=n.replace(cb(t),t.parsedString)}),n}const cV=/((cubic-bezier|steps)\(([^)]*)\))/gi;class Ui extends Vr{static parse(e){return new Ui(e)}getDefaultObject(){return{itemType:"animation",checked:!0,name:"none",direction:"normal",duration:y.second(0),timingFunction:"linear",delay:y.second(0),iterationCount:y.string("infinite"),playState:"running",fillMode:"none"}}convert(e){return e=super.convert(e),e.duration=y.parse(e.duration),e.iterationCount=y.parse(e.iterationCount),e}toCloneObject(){return P({},this.attrs("name","direction","duration","timingFunction","delay","iterationCount","playState","fillMode"))}togglePlayState(e){e?this.reset({playState:e==="running"?"running":"paused"}):this.json.playState==="paused"?this.reset({playState:"running"}):this.reset({playState:"paused"})}toCSS(){return this.json.name?{animation:this.toString()}:{}}toString(){var e=this.json;return[e.duration,e.timingFunction,e.delay,e.iterationCount,e.direction,e.fillMode,e.playState,e.name].join(" ")}static join(e){return e.map(t=>new Ui(t).toString()).join(",")}static add(e,t={}){const i=Ui.parseStyle(e);return i.push(Ui.parse(t)),Ui.join(i)}static remove(e,t){return Ui.filter(e,(i,r)=>t!=r)}static filter(e,t){return Ui.join(Ui.parseStyle(e).filter(i=>t(i)))}static replace(e,t,i){var r=Ui.parseStyle(e);return r[t]?r[t]=i:r.push(i),Ui.join(r)}static get(e,t){var i=Ui.parseStyle(e);return i[t]}static parseStyle(e){var t=[];if(!e)return t;const i=hb(e,cV);return t=i.str.split(",").map(r=>{const s=r.split(" ").filter(Boolean);return s.length>=7?{duration:y.parse(s[0]),timingFunction:Tg(s[1],i.matches),delay:y.parse(s[2]),iterationCount:s[3]==="infinite"?y.string("infinite"):y.parse(s[3]),direction:s[4],fillMode:s[5],playState:s[6],name:s[7]}:s.length>=3?{duration:y.parse(s[0]),timingFunction:Tg(s[1],i.matches),delay:y.parse(s[2]),name:s[3]}:s.length>=1?{duration:y.parse(s[0]),name:s[1]}:{}}),t.map(r=>Ui.parse(r))}}class hV extends Bt{getTitle(){return this.$i18n("animation.property.title")}getBody(){return"
          "}getTools(){return` - - `}isFirstShow(){return!0}[me("$animationList")+It](){var e=this.$context.selection.current;return e?Ui.parseStyle(e.animation).map((t,i)=>{const r=this.state.selectedIndex===i?"selected":"",s=Za(t.timingFunction,30,30);return` -
          -
          -
          - - - -
          -
          -
          - ${t.name?t.name:`< ${this.$i18n("animation.property.select a keyframe")} >`} -
          -
          - - - - - - -
          -
          -
          - -
          -
          -
          - `}):""}[H(Lt)+Nt(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("animation")&&this.refresh(),this.emit("hideAnimationPropertyPopup")}[ne("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add animation property",this.$context.selection.packByValue({animation:t=>Ui.add(t.animation,{name:null})})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}[ne("$animationList .tools .del")](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.reset({animation:Ui.remove(i.animation,t)}),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Ui.remove(i.animation,t)})),this.refresh())}[ne("$animationList .play-state")](e){var t=+e.$dt.attr("data-index"),i=this.$context.selection.current;if(!i)return;const r=Ui.parseStyle(i.animation);var s=r[t];s&&(s.togglePlayState(),e.$dt.attr("data-play-state-selected-value",s.playState),this.$commands.emit("setAttribute",this.$context.selection.packByValue({animation:Ui.join(r)})))}selectItem(e,t=!0){t?this.refs[`animationIndex${e}`].addClass("selected"):this.refs[`animationIndex${e}`].removeClass("selected")}viewAnimationPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentAnimation=Ui.get(this.current.animation,this.selectedIndex),this.viewAnimationPropertyPopup())}viewAnimationPropertyPopup(){if(!this.currentAnimation)return;const e=this.currentAnimation;this.emit("showAnimationPropertyPopup",{changeEvent:"changeAnimationPropertyPopup",data:e.toCloneObject(),instance:this})}[ne("$animationList .preview")](e){this.viewAnimationPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[H("changeAnimationPropertyPopup")](e){this.currentAnimation&&(this.currentAnimation.reset(P({},e)),this.current&&(this.$commands.executeCommand("setAttribute","change animation property",this.$context.selection.packByValue({animation:t=>Ui.replace(t.animation,this.selectedIndex,this.currentAnimation)})),this.refresh()))}}class dV extends Mn{getTitle(){return this.$i18n("animation.property.popup.title")}initState(){return{changeEvent:"",instance:{},data:{}}}updateData(e){this.state.data=P(P({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
          "}[me("$popup")](){return` -
          - ${this.templateForKeyframe()} - ${this.templateForTimingFunction()} - ${this.templateForIterationCount()} - ${this.templateForDelay()} - ${this.templateForDuration()} - ${this.templateForDirection()} - ${this.templateForFillMode()} - ${this.templateForPlayState()} -
          - `}templateForTimingFunction(){return` -
          - - ${W("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} -
          - `}templateForKeyframe(){return` -
          - -
          - -
          -
          - `}[me("$name")](){var e=this.$context.selection.currentProject,t=[];return e&&e.keyframes&&(t=e.keyframes.map(i=>({key:i.name,value:i.name}))),t.unshift({key:"Select a keyframe",value:""}),t.map(i=>{var r=i.value===this.name?"selected":"",s=this.$i18n(i.key);return``})}[Yn("$name")](){this.updateData({name:this.refs.$name.value})}templateForDirection(){var e="normal,reverse,alternate,alternate-reverse".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return` -
          - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.direction"),ref:"$direction",key:"direction",value:this.state.data.direction,options:e,onChange:"changeSelect"})} -
          - `}[we("changeSelect")](e,t){this.updateData({[e]:t})}templateForPlayState(){return` -
          - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.play.state"),ref:"$playState",key:"playState",value:this.state.data.playState,options:["paused","running"],onChange:"changeSelect"})} -
          - `}templateForFillMode(){var e="none,forwards,backwards,both".split(",").map(t=>`${t}:${this.$i18n(t)}`).join(",");return` -
          - ${W("SelectEditor",{label:this.$i18n("animation.property.popup.fill.mode"),ref:"$fillMode",key:"fillMode",value:this.state.data.fillMode,options:e,onChange:"changeSelect"})} -
          - `}templateForDelay(){return` -
          - ${W("RangeEditor",{ref:"$delay",label:this.$i18n("animation.property.popup.delay"),key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} -
          - `}templateForDuration(){return` -
          - ${W("RangeEditor",{ref:"$duration",label:this.$i18n("animation.property.popup.duration"),key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} -
          - `}templateForIterationCount(){return` -
          - ${W("IterationCountEditor",{ref:"$iterationCount",label:this.$i18n("animation.property.popup.iteration"),key:"iterationCount",value:this.state.iterationCount||0,units:["normal","infinite"],onChange:"changeRangeEditor"})} -
          - `}[we("changeRangeEditor")](e,t){e==="iterationCount"&&(t.unit==="normal"?t=y.number(t.value):t=y.string(t.unit)),this.updateData({[e]:t})}[we("changeCubicBezier")](e,t){this.updateData({[e]:t})}[H("showAnimationPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[H("hideAnimationPropertyPopup")](){this.$el.hide()}}function uV(n){n.registerUI("inspector.tab.transition",{AnimationProperty:hV}),n.registerUI("popup",{AnimationPropertyPopup:dV})}class mp{static create(e){return class extends Bt{getTitle(){return e.title}getClassName(){return e.className||"item"}get editableProperty(){return e.editableProperty}get order(){return Bi(e.order)?1e3:e.order}afterComponentRendering(t,i,r){var s;if(i=="$comp"){const a=((s=this.$context.selection)==null?void 0:s.current)||{},o=Ye(e.inspector)?e.inspector(a):this.$context.components.createInspector(a,e.editableProperty);r.setInspector(o)}}refresh(){const t=this.$context.selection.current||{};(t||e.visible)&&(this.setTitle(e.title||t.getDefaultTitle()||t.itemType||t.name),this.load())}[H(Lt)+et("checkShow")](){e.preventUpdate?this.$stateManager.isPointerUp&&this.refresh():this.refresh()}[me("$body")](){var r;var t=(r=this.$context.selection)==null?void 0:r.current;if(!t&&!e.visible)return"";const i=Ye(e.inspector)?e.inspector(t||{}):this.$context.components.createInspector(t||{},e.editableProperty);return W("ComponentEditor",{ref:"$comp",inspector:i,onchange:"changeComponentProperty"})}getBody(){return"
          "}[we("changeComponentProperty")](t,i){e.action?this.$commands.executeCommand(e.action,`change attribute : ${t}`,t,i):this.$commands.executeCommand("setAttribute",`change attribute : ${t}`,this.$context.selection.packByValue({[t]:i}))}}}}function pV(n){n.registerUI("inspector.tab.style",{AppearanceProperty:mp.create({title:n.$i18n("background.color.property.title"),editableProperty:"appearance",preventUpdate:!0,inspector:e=>[{type:"column",size:[1,1],columns:[{key:"backgroundColor",editor:"color-view",editorOptions:{compact:!0,format:!0},defaultValue:e.backgroundColor},{key:"mixBlendMode",editor:"blend-select",editorOptions:{label:"tonality",compact:!0},defaultValue:e.mixBlendMode||pr.NORMAL}]},{key:"overflow",editor:"select",editorOptions:{label:n.$i18n("background.color.property.overflow"),options:[Ic.VISIBLE,Ic.HIDDEN,Ic.SCROLL,Ic.AUTO].map(t=>({value:t,text:n.$i18n(`background.color.property.overflow.${t}`)}))},defaultValue:e.overflow}]})})}var nf=[{category:"Web",groups:[{group:"Landscape",devices:[{device:"Web Small",size:"1024x600"},{device:"Web Medium",size:"1280x800"},{device:"Web Large",size:"1440x900"},{device:"Web X Large",size:"1920x1200"}]},{group:"Portrait",devices:[{device:"Web Small",size:"600x1024"},{device:"Web Medium",size:"800x1280"},{device:"Web Large",size:"900x1440"},{device:"Web X Large",size:"1200x1920"}]}]},{category:"Apple Devices",groups:[{group:"iphone",devices:[{device:"iPhone 8",size:"375x667"},{device:"iPhone 8 Plus",size:"414x736"},{device:"iPhone SE",size:"320x568"},{device:"iPhone XS",size:"375x812"},{device:"iPhone XR",size:"414x896"},{device:"iPhone XS Max",size:"414x896"}]},{group:"ipad",devices:[{device:"iPad",size:"768x1024"},{device:"iPad Pro",size:"1024x1366"}]},{group:"apple watch",devices:[{device:"Apple Watch 38nm",size:"272x340"},{device:"Apple Watch 40nm",size:"326x394"},{device:"Apple Watch 42nm",size:"313x390"},{device:"Apple Watch 44nm",size:"368x448"}]},{group:"apple tv",devices:[{device:"Apple TV",size:"1920x1080"}]},{group:"MAC",devices:[{device:"Touch Bar",size:"1085x30"}]}]},{category:"Android Devices",groups:[{group:"android mobile",devices:[{device:"Android Mobile",size:"360x640"}]},{group:"android tablet",devices:[{device:"Android Tablet",size:"768x1024"}]}]}];class fV extends Bt{getClassName(){return"elf--artboard-size-list"}get editableProperty(){return"artboardSize"}[H(Lt)+et("checkShow")](){this.refresh()}initState(){return{selectedIndex:0}}getTitle(){return"ArtBoard Preset"}getTools(){var e=nf.map((t,i)=>({category:t.category,index:i}));return W("SelectEditor",{ref:"$select",value:e[0].category,options:e.map(t=>t.category),onchange:"changeSizeIndex"})}[we("changeSizeIndex")](e,t){var i=this.state.selectedIndex;nf.forEach((r,s)=>{r.category===t&&(i=s)}),this.state.selectedIndex=i,this.refresh()}getBody(){return` -
          - `}makeDevice(e){return` -
          -
          ${e.device}
          -
          ${e.size}
          -
          - `}[ne("$list .device-item")](e){var t=e.$dt.attr("data-size");this.$commands.emit("resizeArtBoard",t)}makeGroup(e){return` -
          -
          ${e.group}
          -
          -
          - ${e.devices.map(t=>this.makeDevice(t)).join("")} -
          - `}makeCategory(e){return` -
          -
          ${e.category}
          -
          -
          - ${e.groups.map(t=>this.makeGroup(t)).join("")} -
          - `}[me("$list")+It](){var e=nf[this.state.selectedIndex];return e.groups.map(t=>this.makeGroup(t))}}function gV(n){n.registerUI("inspector.tab.style",{ArtBoardSizeProperty:fV})}const mV=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class vV extends Bt{getTitle(){return this.$i18n("backdrop.filter.property.title")}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
          "}getTools(){return` - - - `}[ne("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[me("$filterSelect")](){var e=mV.map(r=>({title:this.$i18n(`filter.property.${r}`),value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(i=>({title:`svg - #${i.id}`,value:i.id}))),t}[me("$body")](){var e=this.$context.selection.current||{},t=e.backdropFilter;return` -
          - ${W("FilterEditor",{ref:"$filterEditor",key:"backdropFilter",value:t,hideLabel:!0,onchange:"changeFilterEditor"})} -
          - `}[we("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change backdrop filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"backdropFilter"}[H(Lt)+et("checkShow")+Nt(1e3)](){this.refresh()}}function yV(n){n.registerUI("inspector.tab.style",{BackdropFilterProperty:vV})}class xV extends Bt{getTitle(){return"Background Clip"}isFirstShow(){return!1}getTools(){return"
          "}[me("$backgroundClip")](){var e=this.$context.selection.current||{},t=e.backgroundClip||"";return W("SelectEditor",{ref:"$1",key:"backgroundClip",icon:!0,value:t,options:["","paddinb-box","border-box","content-box","text"],onchange:"changeSelect"})}[we("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change background clip",this.$context.selection.packByValue({[e]:t}))}[H(Lt)+Nt(100)](){this.refreshShow(["rect","circle","text"])}}function bV(n){n.registerElement({BackgroundClipProperty:xV})}const i0={image:"image","image-resource":"image",url:"image","static-gradient":"gradient","linear-gradient":"gradient","repeating-linear-gradient":"gradient","radial-gradient":"gradient","repeating-radial-gradient":"gradient","conic-gradient":"gradient","repeating-conic-gradient":"gradient"};class _V extends ge{initState(){return{hideLabel:this.props.hideLabel||!1,value:this.props.value,images:this.parseBackgroundImage(this.props.value)}}parseBackgroundImage(e){return e===""?[]:Rt.parseStyle(rn(e))}setValue(e){this.setState({value:e,images:this.parseBackgroundImage(e)})}template(){return` -
          -
          -
          - `}[me("$fillList")+It](){const e=this.$context.selection.current||{color:"black"};return this.state.images.map((t,i)=>{var r=t.image,s=i0[r.type];const a=t.selected?"selected":"";return t.selected&&(this.selectedIndex=i),` -
          - - ${lp(["BackgroundPositionEditor",{key:"background-position",index:i,ref:`$bp${i}`,x:t.x,y:t.y,width:t.width,height:t.height,repeat:t.repeat,size:t.size,blendMode:t.blendMode,onchange:"changePattern"}],["GradientSingleEditor",{index:i,ref:`$gse${i}`,image:t.image,color:e.color,key:"background-image",onchange:"changePattern"}])} -
          -
          -
          - ${W("BlendSelectEditor",{ref:`$blend_${i}`,key:"blendMode",value:t.blendMode,params:i,compact:!0,onchange:"changeRangeEditor"})} -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          -
          - `})}modifyBackgroundImage(){var e=Zt(Rt.toProperty(this.state.images));this.parent.trigger(this.props.onchange,this.props.key,e)}makeGradient(e){switch(e){case"static-gradient":return"static-gradient(black)";case"linear-gradient":return"linear-gradient(90deg, white 0%, black 100%)";case"repeating-linear-gradient":return"repeating-linear-gradient(90deg, white 2%, black 4%)";case"radial-gradient":return"radial-gradient(circle, white 0%, black 100%)";case"repeating-radial-gradient":return"repeating-radial-gradient(circle, white 2%, black 4%)";case"conic-gradient":return"conic-gradient(white 0%, black 100%)";case"repeating-conic-gradient":return"repeating-conic-gradient(white 50%, black 100%)"}}[H("add")](e){this.state.images.unshift(new Rt({image:Rt.parseImage(this.makeGradient(e))})),this.refresh(),this.modifyBackgroundImage()}[ne("$add")](){this.trigger("add")}[wn("$fillList .fill-item > label")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$fillList .fill-item")+wt](){}sortItem(e,t,i){e.splice(i+(t{i.selected=r===e})}[H("selectFillPopupTab")](e){var t=i0[e],i=this.refs[`fillIndex${this.selectedIndex}`];i.attr("data-fill-type",t)}[we("changeRangeEditor")](e,t,i){this.trigger("changePattern",e,{[e]:t},i)}[we("changePattern")](e,t,i){var r=+i,s=this.state.images[r];s.reset(t),this.modifyBackgroundImage(),this.refresh()}}class SV extends Mn{get localeKey(){return"background.image.position.popup"}getTitle(){return this.$i18n("title")}initState(){return{size:this.props.size||"auto",repeat:this.props.repeat||"repeat",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e,this.state.params)}templateForSize(){return W("SelectEditor",{label:this.$i18n("size"),ref:"$size",key:"size",value:this.state.size,options:["contain","cover","auto"],onchange:"changeRangeEditor"})}[we("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){return W("InputRangeEditor",{label:"X",compact:!0,ref:"$x",key:"x",value:this.state.x,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForY(){return W("InputRangeEditor",{label:"Y",compact:!0,ref:"$y",key:"y",value:this.state.y,min:-1e3,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForWidth(){return W("InputRangeEditor",{label:"W",compact:!0,ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return W("InputRangeEditor",{label:"H",compact:!0,ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForRepeat(){return` -
          - -
          -
          - - - - - - -
          - `}[ne("$repeat button")]({$dt:e}){this.refs.$repeat.attr("data-value",e.value),this.updateData({repeat:e.value})}getBody(){return` -
          - `}[me("$picker")+It](){return` - -
          - -
          - ${this.templateForSize()} - ${this.templateForX()} - ${this.templateForY()} - ${this.templateForWidth()} - ${this.templateForHeight()} - ${this.templateForRepeat()} -
          -
          - `}[H("showBackgroundImagePositionPopup")](e,t,i){this.state.changeEvent=e.changeEvent||"changeFillPopup",this.state.params=t,this.setState(e.data),this.showByRect(this.makeRect(180,310,i))}}class wV extends Bt{getTitle(){return this.$i18n("background.image.property.title")}afterRender(){this.show()}getClassName(){return"background-image"}getBodyClassName(){return"no-padding"}getBody(){return V("div",{class:"full",ref:"$property"})}getTools(){return V("div",{class:"fill-sample-list",ref:"$add"},V("button",{type:"button",class:"fill","data-value":"static-gradient"},ie("add")))}[ne("$add [data-value]")](e){this.children.$backgroundImageEditor.trigger("add",e.$dt.data("value"))}[me("$property")](){var e=this.$context.selection.current||{},t=e.backgroundImage||"";return W("BackgroundImageEditor",{ref:"$backgroundImageEditor",key:"backgroundImage",value:t,onchange:"changeBackgroundImage"})}get editableProperty(){return"backgroundImage"}[H(Lt)+et("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[H(Ki)+et("checkCurrentItem")+Nt(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("backgroundImage")&&this.refresh()}[we("changeBackgroundImage")](e,t){this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[e]:t}))}}class MV extends ge{initState(){return{index:this.props.index,x:this.props.x,y:this.props.y,width:this.props.width,height:this.props.height,repeat:this.props.repeat,size:this.props.size,blendMode:this.props.blendMode}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[Me("$miniView")](){return{style:{"background-image":"linear-gradient(to top right, black, white)","background-repeat":this.state.repeat,"background-size":"10px 10px"}}}template(){return` -
          -
          -
          -
          -
          -
          -
          - `}[ne("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){this.emit("showBackgroundImagePositionPopup",{changeEvent:"changeBackgroundPositionPattern",data:this.state},{id:this.id},this.$el.rect())}[H("changeBackgroundPositionPattern")](e,t){t.id===this.id&&this.updateData(P({},e))}}function $V(n){n.registerElement({BackgroundImageEditor:_V,BackgroundPositionEditor:MV}),n.registerUI("inspector.tab.style",{BackgroundImageProperty:wV}),n.registerUI("popup",{BackgroundImagePositionPopup:SV})}var PV={none:!0,hidden:!0,dotted:!0,dashed:!0,solid:!0,double:!0,groove:!0,ridge:!0,inset:!0,outset:!0};class _a{static parseStyle(e){return rn(e)}static parseValue(e=""){var t="",i="",r="";return e.split(" ").filter(s=>s.trim()).forEach(s=>{PV[s]?t=s:PL(s)?r=s:i=y.parse(s).value}),{style:t,color:r,width:i}}static joinValue(e){return`${e.width}px ${e.style||"solid"} ${e.color}`}static join(e){var t=[e.border?`border: ${e.border}`:"",e["border-top"]?`border-top: ${e["border-top"]}`:"",e["border-left"]?`border-left: ${e["border-left"]}`:"",e["border-right"]?`border-right: ${e["border-right"]}`:"",e["border-bottom"]?`border-bottom: ${e["border-bottom"]}`:""].filter(i=>i);return t.join(";")}}const TV=["border"],CV={border:"all","border-top":"top","border-right":"right","border-bottom":"bottom","border-left":"left"};class EV extends ge{initState(){var e=_a.parseStyle(this.props.value),t=Object.keys(e)[0]||"border";return{direction:t,borders:e}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return _a.join(this.state.borders)}setValue(e){this.state.borders=_a.parseStyle(e),this.refresh()}[me("$editorArea")](){return TV.map(e=>{var t=CV[e]||e;return t=this.$i18n("border.editor."+t),` -
          - ${W("BorderValueEditor",{ref:`$${e}`,label:t,key:e,value:this.state.borders[e],onchange:"changeKeyValue"})} -
          - `})}template(){return` -
          -
          - -
          -
          - `}[we("changeKeyValue")](e,t){var i=this.state.borders;i[e]=t,this.updateData({borders:i})}}class IV extends Bt{getTitle(){return this.$i18n("border.property.title")}getBody(){return`
          `}[me("$body")](){var e=this.$context.selection.current||{},t=e.border||"";return W("BorderEditor",{ref:"$1",key:"border",value:t,onchange:"changeKeyValue"})}get editableProperty(){return"border"}[H(Lt)+Nt(100)+et("checkShow")](){this.refresh()}[we("changeKeyValue")](e,t){this.$commands.executeCommand("setAttribute","change border",this.$context.selection.packByValue({[e]:t}))}}const LV=[Jn.NONE,Jn.HIDDEN,Jn.SOLID,Jn.DASHED,Jn.DOTTED,Jn.DOUBLE,Jn.GROOVE,Jn.RIDGE,Jn.INSET,Jn.OUTSET].join(",");class kV extends ge{initState(){return{value:_a.parseValue(this.props.value)}}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}getValue(){return _a.joinValue(this.state.value)}setValue(e){this.state.value=_a.parseValue(e),this.refresh()}refresh(){const e=y.parse(this.state.value.width==="undefined"?0:this.state.value.width);this.children.$width.setValue(e.value||0),this.children.$style.setValue(this.state.value.style||"solid"),this.children.$color.setValue(this.state.value.color||"rgba(0, 0, 0, 1)")}template(){var{width:e,style:t,color:i}=this.state.value;return` -
          -
          - ${W("NumberInputEditor",{label:ie("line_weight"),compact:!0,ref:"$width",min:0,max:100,step:1,key:"width",value:e,onchange:"changeKeyValue"})} - ${W("SelectEditor",{ref:"$style",key:"style",label:ie("line_style"),title:"Style",compact:!0,options:LV,value:t||"solid",onchange:"changeKeyValue"})} - ${W("ColorViewEditor",{ref:"$color",key:"color",mini:!0,value:i||"rgba(0, 0, 0, 1)",onchange:"changeKeyValue"})} -
          -
          - `}[we("changeKeyValue")](e,t){var i=this.state.value;i[e]=t,this.updateData({value:i})}}function AV(n){n.registerElement({BorderEditor:EV,BorderValueEditor:kV}),n.registerUI("inspector.tab.style",{BorderProperty:IV})}const db=[{key:"top",title:"Top"},{key:"bottom",title:"Bottom"},{key:"left",title:"Left"},{key:"right",title:"Right"}],r0=db.map(n=>n.key),sf={image:"Image","static-gradient":"Static","linear-gradient":"Linear","repeating-linear-gradient":`${Ue.repeat} Linear`,"radial-gradient":"Radial","repeating-radial-gradient":`${Ue.repeat} Radial`,"conic-gradient":"Conic","repeating-conic-gradient":`${Ue.repeat} Conic`};class RV extends Bt{getTitle(){return"Border Image"}[H(Lt)](){this.refresh()}getTools(){var e=this.$context.selection.current||{},t=e.appliedBorderImage||!1;return` - - `}[ne("$apply")](){var e=this.$context.selection.current;if(!!e){var t=this.refs.$apply.checked();this.$commands.executeCommand("setAttribute",this.$context.selection.packByValue({applyBorderImage:t}))}}getColorStepList(e){switch(e.type){case"static-gradient":case"linear-gradient":case"repeating-linear-gradient":case"radial-gradient":case"repeating-radial-gradient":case"conic-gradient":case"repeating-conic-gradient":return this.getColorStepString(e.colorsteps)}return""}getColorStepString(e){return e.map(t=>`
          `).join("")}[me("$borderImageView")](){var e=this.$context.selection.current||{borderImage:{image:{}}},t=e.borderImage,i=t.type?sf[t.type]:"";return` -
          -
          -
          -
          -
          -
          -
          -
          ${i}
          -
          - ${this.getColorStepList(t.image)} -
          -
          -
          - `}[we("changeBorderImage")](e,t){e==="border-image-slice"&&r0.forEach(i=>{this.children[`$${i}Slice`].setValue(t)}),this.setBorderImageProperty()}getBody(){return` -
          -
          -
          - - -
          -
          - ${W("RangeEditor",{ref:"$allSlice",key:"border-image-slice",onchange:"changeBorderImage"})} -
          -
          - - `}[Yn("$sliceSettingBox select")](){this.setBorderImageProperty()}[ne("$borderImageView .preview")](){this.viewFillPopup(this.refs.$preview,"")}[ne("$borderImageView .colorsteps .step")](e){this.refs.$colorsteps.$('[data-selected="true"]').removeAttr("data-selected");var t=e.$dt.attr("data-colorstep-id");e.$dt.attr("data-selected",!0);var i=e.$dt.closest("border-image-item").$(".preview");this.viewFillPopup(i,t)}getFillData(e){let t={type:e.type};switch(t.type){case"image":t.url=e.image?e.image.url:"";break;default:if(e.image){const i=e.image;t.type=i.type,t.colorsteps=[...i.colorsteps],t.angle=i.angle,t.radialType=i.radialType||"ellipse",t.radialPosition=i.radialPosition||Nr.CENTER}else t.colorsteps=[],t.angle=0,t.radialType="ellipse",t.radialPosition=Nr.CENTER;break}return t}viewFillPopup(e,t){var i=this.$context.selection.current;!i||this.emit("showFillPopup",ze(P({changeEvent:"changeBorderImageFillPopup"},this.getFillData(i.borderImage)),{selectColorStepId:t,refresh:!0}))}viewChangeImage(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage;if(!!t){var i=this.getRef("$miniView");i&&t.image&&i.css({"background-image":t.image.toString(),"background-size":"cover"});var i=this.getRef("$fillTitle");i&&i.html(sf.image);var i=this.getRef("$colorsteps",this.selectedIndex);i&&i.empty()}}}setImage(e){var t=this.$context.selection.current;!t||(t.borderImage.setImageUrl(e),this.viewChangeImage(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}viewChangeGradient(e){var t=this.$context.selection.current;if(!!t){var i=t.borderImage;if(!!i){var r=this.getRef("$miniView");r&&r.css({"background-image":i.image.toString(),"background-size":"cover"});var r=this.getRef("$fillTitle");r&&r.html(sf[e.type]);var r=this.getRef("$colorsteps",this.selectedIndex);r&&r.html(this.getColorStepString(e.colorsteps))}}}setGradient(e){var t=this.$context.selection.current;!t||(t.borderImage.setGradient(e),this.viewChangeGradient(e),this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage")))}[H("changeBorderImageFillPopup")](e){switch(e.type){case"image":this.setImage(e);break;default:this.setGradient(e);break}}setBorderImageProperty(){var e=this.$context.selection.current;if(!!e){var t=e.borderImage,i=this.refs.$selector.attr("data-selected-value");if(i==="all"){var r=this.children.$allSlice.getValue();t.reset({slice:{top:r.clone(),right:r.clone(),bottom:r.clone(),left:r.clone()}})}else r0.forEach(s=>{t.slice[s]=this.children[`$${s}Slice`].getValue(),t.width[s]=this.children[`$${s}Width`].getValue()});this.$commands.executeCommand("setAttribute",this.$context.selection.pack("borderImage"))}}[ne("$selector button")](e){var t=e.$dt.attr("data-value");this.refs.$selector.attr("data-selected-value",t),t==="all"?this.refs.$partitialSetting.hide():this.refs.$partitialSetting.show("grid"),this.setBorderImageProperty()}}function OV(n){n.registerElement({BorderImageProperty:RV})}class Cg{static parseStyle(e=""){var t={isAll:!0,"border-radius":0,"border-top-left-radius":0,"border-top-right-radius":0,"border-bottom-right-radius":0,"border-bottom-left-radius":0},i=e.split(" ").map(r=>y.parse(r));return i.length===1?(t.isAll=!0,t["border-radius"]=i[0]):(t.isAll=!1,t["border-top-left-radius"]=i[0],t["border-top-right-radius"]=i[1],t["border-bottom-right-radius"]=i[2],t["border-bottom-left-radius"]=i[3],i[0].equals(i[1])&&i[0].equals(i[2])&&i[0].equals(i[3])&&(t.isAll=!0,t["border-radius"]=i[0])),t}}const ub=[{key:"border-top-left-radius",title:"topLeft",label:"TL"},{key:"border-top-right-radius",title:"topRight",label:"TR"},{key:"border-bottom-left-radius",title:"bottomLeft",label:"BL"},{key:"border-bottom-right-radius",title:"bottomRight",label:"BR"}],af=ub.map(n=>n.key),xs={ALL:"all",PARTITIAL:"partial"};class zV extends ge{initState(){return P({},Cg.parseStyle(this.props.value))}template(){return"
          "}[we("changeBorderRadius")](e,t){e==="border-radius"&&af.forEach(i=>{this.children[`$${i}`].setValue(t.clone())}),this.setBorderRadius()}[me("$body")+It](){var e=this.state["border-radius"];return` -
          -
          - ${W("InputRangeEditor",{label:ie("outline_rect"),ref:"$all",compact:"true",key:"border-radius",value:e,min:0,onchange:"changeBorderRadius"})} -
          -
          - - ${W("ToggleButton",{compact:!0,ref:"$toggle",key:"border-all",checkedValue:xs.PARTITIAL,value:xs.ALL,toggleLabels:[ie("border_inner"),ie("border_inner")],toggleValues:[xs.ALL,xs.PARTITIAL],onchange:"changeKeyValue"})} -
          - - `}[di("$radiusSettingBox input")](){this.setBorderRadius()}[Yn("$radiusSettingBox select")](){this.setBorderRadius()}setBorderRadius(){var e=this.selectedValue;e===xs.ALL?this.state["border-radius"]=this.children.$all.getValue():af.forEach(t=>{this.state[t]=this.children[`$${t}`].getValue()}),this.modifyBorderRadius()}modifyBorderRadius(){var e="";this.selectedValue===xs.ALL?e=this.state["border-radius"]+"":e=af.map(t=>`${this.state[t]}`).join(" "),this.parent.trigger(this.props.onchange,e)}[we("changeKeyValue")](e,t){t===xs.PARTITIAL?(this.selectedValue=xs.PARTITIAL,this.refs.$partitialSetting.show()):(this.selectedValue=xs.ALL,this.refs.$partitialSetting.hide()),this.setBorderRadius()}}class VV extends Bt{getTitle(){return this.$i18n("border.radius.property.title")}getBody(){return`
          `}[me("$body")](){var e=this.$context.selection.current||{},t=e.borderRadius||"0px";return W("BorderRadiusEditor",{ref:"$1",value:t,onchange:"changeBorderRadius"})}get editableProperty(){return"borderRadius"}[H(Lt)+Nt(100)+et("checkShow")](){this.$context.selection.hasChangedField("borderRadius")&&this.refresh()}[we("changeBorderRadius")](e){this.$commands.executeCommand("setAttribute","change border radius",this.$context.selection.packByValue({borderRadius:e}))}}function DV(n){n.registerElement({BorderRadiusEditor:zV}),n.registerUI("inspector.tab.style",{BorderRadiusProperty:VV})}const FV=["margin","padding"];let Eg=[];FV.forEach(n=>{Eg.push.apply(Eg,["-top","-bottom","-left","-right"].map(e=>n+e))});class jV extends Bt{getTitle(){return this.$i18n("box.model.property.title")}get editableProperty(){return"boxModel"}[H(Lt)+Nt(100)+et("checkShow")](){this.refresh()}checkCurrentItem(e){return this.$context.selection.current===e}[H(Ki)+et("checkCurrentItem")+Nt(100)](){const e=this.$context.selection.current;e!=null&&e.hasChangedField("padding-left","padding-right","padding-top","padding-bottom")&&this.refresh()}getBody(){return'
          '}templateInput(e,t){var i=y.parse(t[e]||0);return``}[me("$boxModelItem")+It](){var e=this.$context.selection.current;return e?` -
          -
          -
          - ${this.templateInput("margin-top",e)} -
          -
          - ${this.templateInput("margin-bottom",e)} -
          -
          - ${this.templateInput("margin-left",e)} -
          -
          - ${this.templateInput("margin-right",e)} -
          -
          -
          -
          - ${this.templateInput("padding-top",e)} -
          -
          - ${this.templateInput("padding-bottom",e)} -
          -
          - ${this.templateInput("padding-left",e)} -
          -
          - ${this.templateInput("padding-right",e)} -
          -
          -
          - -
          -
          - `:""}[di("$boxModelItem input")](){this.resetBoxModel()}resetBoxModel(){var e={};Eg.forEach(t=>{e[t]=this.refs["$"+t].value}),this.$commands.executeCommand("setAttribute","change padding or margin",this.$context.selection.packByValue(e))}}function NV(n){n.registerUI("inspector.tab.style",{BoxModelProperty:jV})}var n0=[{name:"Box",shadow:"0px 3px 3px 0px rgba(0,0,0,0.2)"},{name:"Shadow-4",shadow:` - 0px 1px 1px 0px rgba(0,0,0,0.15), - 0px 2px 2px 0px rgba(0,0,0,0.15), - 0px 4px 4px 0px rgba(0,0,0,0.15), - 0px 8px 8px 0px rgba(0,0,0,0.15) - `},{name:"Shadow-5",shadow:` - 0px 1px 1px 0px rgba(0,0,0,0.12), - 0px 2px 2px 0px rgba(0,0,0,0.12), - 0px 4px 4px 0px rgba(0,0,0,0.12), - 0px 8px 8px 0px rgba(0,0,0,0.12), - 0px 16px 16px 0px rgba(0,0,0,0.12) - `},{name:"Shadow-6",shadow:` - 0px 1px 1px 0px rgba(0,0,0,0.11), - 0px 2px 2px 0px rgba(0,0,0,0.11), - 0px 4px 4px 0px rgba(0,0,0,0.11), - 0px 8px 8px 0px rgba(0,0,0,0.11), - 0px 16px 16px 0px rgba(0,0,0,0.11), - 0px 32px 32px 0px rgba(0,0,0,0.11) - `},{name:"Sharp",shadow:` - 0px 1px 1px 0px rgba(0,0,0,0.25), - 0px 2px 2px 0px rgba(0,0,0,0.20), - 0px 4px 4px 0px rgba(0,0,0,0.15), - 0px 8px 8px 0px rgba(0,0,0,0.10), - 0px 16px 16px 0px rgba(0,0,0,0.05) - `},{name:"Diffuse",shadow:` - 0px 1px 1px 0px rgba(0,0,0,0.08), - 0px 2px 2px 0px rgba(0,0,0,0.12), - 0px 4px 4px 0px rgba(0,0,0,0.16), - 0px 8px 8px 0px rgba(0,0,0,0.20) - `}];class BV extends Bt{getTitle(){return this.$i18n("boxshadow.property.title")}getBody(){return` -
          - `}getTools(){return` - - - `}[ne("$add")](){const e=+this.refs.$select.value;this.children.$boxshadow.trigger("add",n0[e].shadow)}[me("$shadowList")](){var e=this.$context.selection.current||{};return W("BoxShadowEditor",{ref:"$boxshadow",key:"boxShadow",value:e.boxShadow,onchange:(t,i)=>{this.$commands.executeCommand("setAttribute","change box shadow",this.$context.selection.packByValue({[t]:i}))}})}get editableProperty(){return"boxShadow"}[H(Lt)+Nt(100)+et("checkShow")](){this.refresh()}}function GV(n){n.registerUI("inspector.tab.style",{BoxShadowProperty:BV})}var HV={key:"polygon",title:"Polygon",execute:function(){return[{name:"Triangle",polygon:"50% 0%, 0% 100%, 100% 100%"},{name:"Trapezoid",polygon:"20% 0%, 80% 0%, 100% 100%, 0% 100%"},{name:"Parallelogram",polygon:"25% 0%, 100% 0%, 75% 100%, 0% 100%"},{name:"Rhombus",polygon:"50% 0%, 100% 50%, 50% 100%, 0% 50%"},{name:"Pentagon",polygon:"50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%"},{name:"Hexagon",polygon:"50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%"},{name:"Heptagon",polygon:"50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%"},{name:"Octagon",polygon:"30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%"}]}};const UV=/(content-box|padding-box|border-box|margin-box|view-box|stroke-box|fill-box|none|(inset|circle|ellipse|polygon|path|svg|url)(\(([^)]*)\))?)/gi;class mt extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"clip-path",type:"none",value:""},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("value"))}toString(){var e=this.json.type,t=this.json.value,i=this.json.box,r="";switch(e){case"circle":case"inset":case"ellipse":case"polygon":case"path":r=`${e}(${t})`;break;case"svg":r=`url(#${t})`;break;default:r="none";break}return i?`${i} ${r}`:r}toCSS(){return{"clip-path":this.toString()}}static toCSS(e){return new mt(e).toCSS()}static toString(e){return mt.toCSS(e)["clip-path"]}static parse(e){return new mt(e)}static parseStyle(e){var t={};if(!e)return{};var i=e.match(UV)||[];return i.forEach(r=>{if(r.includes("-box"))t.box=r;else{var[s,a]=r.split("(");a=a||"",s==="none"?a="":a=a.split(")")[0],t.type=s,t.value=a}}),t}static parseStyleForCircle(e="50% at 50% 50%"){var t=new y("","closest-side"),i="";e=e||"50% at 50% 50%",e.includes("at")?[t,i]=e.split("at").map(a=>a.trim()):i=e.trim();var[r,s]=i.split(" ");return Bi(s)&&(s=r),t=y.parse(t),r=y.parse(r),s=y.parse(s),{radius:t,x:r,y:s}}static parseStyleForEllipse(e="50% 50%"){var t="50% 50%",i="";e=e||"50%",e.includes("at")?[t,i]=e.split("at").map(l=>l.trim()):i=e.trim();var[r,s]=i.split(" ");Bi(s)&&(s=r),r=y.parse(r),s=y.parse(s);var[a,o]=t.split(" ");return Bi(o)&&(o=a),a=y.parse(a),o=y.parse(o),{radiusX:a,radiusY:o,x:r,y:s}}static parseStyleForInset(e=""){var[t,i]=e.split("round"),[r,s,a,o,l]=wg.parse(t);if(i)var[c,h,d,u,p]=wg.parse(i);return{isAll:r===1,top:s,right:a,bottom:o,left:l,round:i,isAllRadius:c===1,topRadius:h,rightRadius:d,bottomRadius:u,leftRadius:p}}static parseStyleForPolygon(e=""){return e.split(",").filter(t=>t.trim()).map(t=>{var[i,r]=t.trim().split(" ");return{x:y.parse(i),y:y.parse(r)}})}}const WV={[$r.CIRCLE]:"circle(50% at 50% 50%)",[$r.ELLIPSE]:"ellipse(50% 50% at 50% 50%)",[$r.INSET]:"inset(0% 0% 0% 0%)",[$r.POLYGON]:"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",[$r.PATH]:"path()"};class XV extends Bt{getTitle(){return this.$i18n("clippath.property.title")}getClassName(){return"clip-path-property"}getBody(){return"
          "}getTools(){return` -
          - - - - - - -
          - `}makeClipPathTemplate(e,t){const i=e==="path",r=e==="polygon";let s="";if(i){const o=t.split("(")[1].split(")")[0];let l=be.fromSVGString(o);const c=l.getBBox(),h=Yi(c),d=260/h.width,u=150/h.height,p=Math.min(d,u);l=l.translate(-c[0][0],-c[0][1]).scale(p,p);const f=l.getBBox(),g=Yi(f);s=l.translate(260/2-g.width/2,0).d}let a="";if(r){const o=HV.execute();a=W("SelectEditor",{ref:"$polygonSelect",options:["",...o.map(l=>l.name)],onchange:(l,c)=>{const h=o.find(d=>d.name===c);h&&this.updatePathInfo({"clip-path":`polygon(${h.polygon})`})}})}return` -
          -
          - -
          -
          ${e}
          - ${r?a:""} -
          -
          - -
          -
          - ${i?``:""} -
          - - `}[ne("$clippathList .clippath-item .title .name")](){var e=this.$context.selection.current;!e||this.viewClipPathPicker()}[ne("$clippathList .del")+wt](){var e=this.$context.selection.current;!e||(this.$commands.executeCommand("setAttribute","delete clip-path",this.$context.selection.packByValue({clipPath:""})),this.emit("hideClipPathPopup"),window.setTimeout(()=>{this.refresh()},100))}get editableProperty(){return"clipPath"}[H(Lt)+et("checkShow")](){this.refresh()}[me("$clippathList")](){var e=this.$context.selection.current;return!e||!e.clipPath?"":this.makeClipPathTemplate(e.clipPath.split("(")[0],e.clipPath)}[ne("$tools [data-value]")](e){var t=this.$context.selection.current;if(!!t){if(t.clipPath){window.alert("clip-path is already exists.");return}t&&(t.reset({clipPath:WV[e.$dt.data("value")]}),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.pack("clipPath"))),this.refresh()}}viewClipPathPicker(){var e=this.$context.selection.current;if(!!e){var t=mt.parseStyle(e.clipPath);switch(t.type){case"path":var i=e.absolutePath(e.clipPathString).d,r=i?"modify":"path";this.emit("showPathEditor",r,{changeEvent:s=>{s.d=e.invertPath(s.d).d,this.updatePathInfo({clipPath:`path(${s.d})`})},current:e,d:i});break}}}updatePathInfo(e){if(!!e){var t=this.$context.selection.current;!t||(t.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change clipPath",this.$context.selection.packByValue(e)))}}}function YV(n){n.registerUI("inspector.tab.style",{ClipPathProperty:XV})}class KV extends ge{initializePolygon(){const e=this.$context.selection.current;this.state.current=e,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.clippath.value=mt.parseStyleForPolygon(this.state.clippath.value),this.screenPoints=this.$viewport.applyVerties(He(this.state.clippath.value.map(t=>{const{x:i,y:r}=t,s=i.toPx(this.state.width),a=r.toPx(this.state.height);return Pt(s,a,0)}),e.absoluteMatrix)),this.clonedScreenPoints=rt(this.screenPoints)}[Ke("$el .polygon .polygon-pointer")+at("movePolygonPointer")+ct("moveEndPolygonPointer")](e){this.initializePolygon(),this.polygonTargetIndex=+e.$dt.data("index")}movePolygonPointer(e,t){this.clonedScreenPoints[this.polygonTargetIndex]=bt([],this.screenPoints[this.polygonTargetIndex],[e,t,0]),this.updatePolygon(this.clonedScreenPoints)}moveEndPolygonPointer(){const e=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[Ke("$el .polygon .polygon-line")](e){this.initializePolygon();const t=+e.$dt.data("index");this.polygonTargetIndex=t;const i=this.screenPoints[this.polygonTargetIndex],r=this.screenPoints[(this.polygonTargetIndex+1)%this.screenPoints.length],s=Re([],i,r,.5);this.screenPoints.splice(this.polygonTargetIndex+1,0,s),this.updatePolygon(this.screenPoints)}updatePolygon(e){const t=this.$viewport.applyVertiesInverse(e),i=this.$context.selection.current.absoluteMatrixInverse,r=He(t,i);this.state.clippath.value=r.map(a=>[y.makePercent(a[0],this.state.width),y.makePercent(a[1],this.state.height)].join(" ")).join(",");const s=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(s))}[Ke("$el .polygon .polygon-center")+at("movePolygonCenter")+ct("moveEndPolygonCenter")](){this.initializePolygon()}movePolygonCenter(e,t){const i=this.screenPoints.map(r=>bt([],r,[e,t,0]));this.updatePolygon(i)}moveEndPolygonCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case $r.POLYGON:const r=mt.toCSS({type:$r.CIRCLE,value:"50% at 50% 50%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templatePolygon(e){const t=this.$context.selection.current,i=mt.parseStyleForPolygon(e.value).map(o=>[o.x.toPx(t.screenWidth).value,o.y.toPx(t.screenHeight).value,0]),r=xn(i)[4],s=this.$viewport.applyVerties(He(i,t.absoluteMatrix)),a=this.$viewport.applyVerties(He([r],t.absoluteMatrix))[0];return V("div",{class:"polygon"},V("div",{class:"polygon-back"},V("svg",{style:"position:absolute;width:100%;height:100%;"},V("polygon",{points:`${s.map(o=>[o[0],o[1]].join(",")).join(" ")}`}),s.map((o,l)=>{const c=(l+1)%s.length,h=s[c];return V("line",{x1:o[0],y1:o[1],x2:h[0],y2:h[1],class:"polygon-line","data-index":l})}),s.map((o,l)=>V("circle",{cx:o[0],cy:o[1],r:3,class:"polygon-pointer","data-index":l})))),V("div",{class:"polygon-center",style:{left:y.px(a[0]),top:y.px(a[1])}}))}}class qV extends KV{initializeInset(){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.clippath.value=mt.parseStyleForInset(this.state.clippath.value),this.state.inset=this.state.clippath.value;const t=this.state.inset,i=t.top.toPx(e.screenHeight),r=t.left.toPx(e.screenWidth),s=y.px(e.screenWidth-t.right.toPx(e.screenWidth)),a=y.px(e.screenHeight-t.bottom.toPx(e.screenHeight)),o=this.$viewport.applyVerties(He([[r,i,0],[s,i,0],[s,a,0],[r,a,0]],e.absoluteMatrix)),l=Re([],o[0],o[3],.5),c=Re([],o[0],o[1],.5),h=Re([],o[1],o[2],.5),d=Re([],o[2],o[3],.5),u=Re([],o[0],o[2],.5);this.screenPoints=[l,c,h,d,u]}[Ke("$el .inset .inset-direction")+vn+at("moveInsetRadius")+ct("moveEndInsetRadius")](e){this.initializeInset(),this.insetTarget=e.$dt.data("direction")}moveInsetRadius(e,t){const{left:i,top:r,right:s,bottom:a}=this.state.inset;let[o,l,c,h]=this.screenPoints;this.insetTarget=="left"?o=bt([],o,[e,t,0]):this.insetTarget=="top"?l=bt([],l,[e,t,0]):this.insetTarget=="right"?c=bt([],c,[e,t,0]):this.insetTarget=="bottom"&&(h=bt([],h,[e,t,0]));const d=this.$viewport.applyVertexInverse(o),u=this.$viewport.applyVertexInverse(l),p=this.$viewport.applyVertexInverse(c),f=this.$viewport.applyVertexInverse(h),g=this.$context.selection.current.absoluteMatrixInverse,[m,v,x,_]=He([d,u,p,f],g);this.state.clippath.value=[r.isPercent()?y.makePercent(v[1],this.state.height):y.px(v[1]),s.isPercent()?y.makePercent(this.state.width-x[0],this.state.width):y.px(this.state.width-x[0]),a.isPercent()?y.makePercent(this.state.height-_[1],this.state.height):y.px(this.state.height-_[1]),i.isPercent()?y.makePercent(m[0],this.state.width):y.px(m[0])].join(" ");const b=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(b))}moveEndInsetRadius(){const e=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[Ke("$el .inset .inset-center")+vn+at("moveInsetCenter")+ct("moveEndInsetCenter")](){this.initializeInset()}moveInsetCenter(e,t){const{left:i,top:r,right:s,bottom:a}=this.state.inset;let[o,l,c,h]=this.screenPoints;o=bt([],o,[e,t,0]),l=bt([],l,[e,t,0]),c=bt([],c,[e,t,0]),h=bt([],h,[e,t,0]);const d=this.$viewport.applyVertexInverse(o),u=this.$viewport.applyVertexInverse(l),p=this.$viewport.applyVertexInverse(c),f=this.$viewport.applyVertexInverse(h),g=this.$context.selection.current.absoluteMatrixInverse,[m,v,x,_]=He([d,u,p,f],g);this.state.clippath.value=[r.isPercent()?y.makePercent(v[1],this.state.height):y.px(v[1]),s.isPercent()?y.makePercent(this.state.width-x[0],this.state.width):y.px(this.state.width-x[0]),a.isPercent()?y.makePercent(this.state.height-_[1],this.state.height):y.px(this.state.height-_[1]),i.isPercent()?y.makePercent(m[0],this.state.width):y.px(m[0])].join(" ");const b=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(b))}moveEndInsetCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case $r.INSET:const r=mt.toCSS({type:$r.POLYGON,value:"0% 0%, 100% 0%, 100% 100%, 0% 100%"});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateInset(e){const t=this.$context.selection.current;e.value=mt.parseStyleForInset(e.value);const i=e.value.top.toPx(t.screenHeight),r=e.value.left.toPx(t.screenWidth),s=y.px(t.screenWidth-e.value.right.toPx(t.screenWidth)),a=y.px(t.screenHeight-e.value.bottom.toPx(t.screenHeight)),o=this.$viewport.applyVerties(He([[r,i,0],[s,i,0],[s,a,0],[r,a,0]],t.absoluteMatrix)),l=Re([],o[0],o[3],.5),c=Re([],o[0],o[1],.5),h=Re([],o[1],o[2],.5),d=Re([],o[2],o[3],.5),u=Re([],o[0],o[2],.5);return V("div",{class:"inset"},V("div",{class:"inset-back"},V("svg",{style:"position:absolute;width:100%;height:100%;"},V("path",{d:` - M ${o[0][0]} ${o[0][1]} - L ${o[1][0]} ${o[1][1]} - L ${o[2][0]} ${o[2][1]} - L ${o[3][0]} ${o[3][1]} - Z - `}))),V("div",{class:"inset-direction","data-direction":"left",style:{left:y.px(l[0]),top:y.px(l[1])}}),V("div",{class:"inset-direction","data-direction":"top",style:{left:y.px(c[0]),top:y.px(c[1])}}),V("div",{class:"inset-direction","data-direction":"right",style:{left:y.px(h[0]),top:y.px(h[1])}}),V("div",{class:"inset-direction","data-direction":"bottom",style:{left:y.px(d[0]),top:y.px(d[1])}}),V("div",{class:"inset-center",style:{left:y.px(u[0]),top:y.px(u[1])}}))}}class ZV extends qV{[Ke("$el .circle .circle-radius")+vn+at("moveCircleRadius")+ct("moveEndCircleRadius")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.circle=mt.parseStyleForCircle(this.state.clippath.value)}moveCircleRadius(e,t){const i=this.$context.selection.current,{radius:r,x:s,y:a}=this.state.circle,o=s.toPx(i.screenWidth),l=a.toPx(i.screenHeight),c=Math.sqrt(Math.pow(i.screenWidth,2)+Math.pow(i.screenHeight,2))/Math.sqrt(2),h=r.toPx(i.screenWidth),u=this.$viewport.applyVerties(He([[o.value+h.value,l,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=He([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[0]-o),x=[r.isPercent()?y.makePercent(v,c):y.px(v),s,a];this.state.clippath.value=`${x[0]} at ${x[1]} ${x[2]}`;const _=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}moveEndCircleRadius(){const e=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[Ke("$el .circle .circle-center")+vn+at("moveCircleCenter")+ct("moveEndCircleCenter")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.circle=mt.parseStyleForCircle(this.state.clippath.value)}moveCircleCenter(e,t){const i=this.$context.selection.current,{radius:r,x:s,y:a}=this.state.circle,o=s.toPx(i.screenWidth),l=a.toPx(i.screenHeight),h=this.$viewport.applyVerties(He([[o,l,0]],i.absoluteMatrix))[0],d=h[0]+e,u=h[1]+t,p=this.$viewport.applyVertexInverse([d,u,0]),f=He([p],this.$context.selection.current.absoluteMatrixInverse)[0],g=[r,s.isPercent()?y.makePercent(f[0],this.state.width):y.px(f[0]),a.isPercent()?y.makePercent(f[1],this.state.height):y.px(f[1])];this.state.clippath.value=`${r} at ${g[1]} ${g[2]}`;const m=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(m))}moveEndCircleCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case $r.CIRCLE:const r=mt.toCSS({type:$r.ELLIPSE,value:`${this.state.circle.radius} ${this.state.circle.radius} at ${this.state.circle.x} ${this.state.circle.y}`});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateCircle(e){const t=this.$context.selection.current,i=Math.sqrt(Math.pow(t.screenWidth,2)+Math.pow(t.screenHeight,2))/Math.sqrt(2),r=e.value.radius.toPx(i),s=e.value.x.toPx(t.screenWidth),a=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(He([[s,a,0],[s.value+r.value,a,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=Fe(l,c);return V("div",{class:"circle"},V("div",{class:"circle-back",style:{left:y.px(l[0]),top:y.px(l[1]),width:y.px(h*2),height:y.px(h*2)}}),V("div",{class:"circle-center",style:{left:l[0]+"px",top:l[1]+"px"}}),V("div",{class:"circle-radius",style:{left:c[0]+"px",top:c[1]+"px"}}))}}class JV extends ZV{[Ke("$el .ellipse .ellipse-radius-x")+vn+at("moveEllipseRadiusX")+ct("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.ellipse=mt.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusX(e,t){const i=this.$context.selection.current,{radiusX:r,radiusY:s,x:a,y:o}=this.state.ellipse,l=a.toPx(i.screenWidth),c=o.toPx(i.screenHeight),h=r.toPx(i.screenWidth),u=this.$viewport.applyVerties(He([[l.value+h.value,c,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=He([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[0]-l),x=[r.isPercent()?y.makePercent(v,this.state.width):y.px(v),a,o];this.state.clippath.value=`${x[0]} ${s} at ${x[1]} ${x[2]}`;const _=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}[Ke("$el .ellipse .ellipse-radius-y")+vn+at("moveEllipseRadiusY")+ct("moveEndEllipseRadiusX")](){const e=this.$context.selection.current;this.state.current,this.state.width=e.screenWidth,this.state.height=e.screenHeight,this.state.clippath=mt.parseStyle(e["clip-path"]),this.state.ellipse=mt.parseStyleForEllipse(this.state.clippath.value)}moveEllipseRadiusY(e,t){const i=this.$context.selection.current,{radiusX:r,radiusY:s,x:a,y:o}=this.state.ellipse,l=a.toPx(i.screenWidth),c=o.toPx(i.screenHeight),h=s.toPx(i.screenHeight),u=this.$viewport.applyVerties(He([[l.value,c.value+h.value,0]],i.absoluteMatrix))[0],p=u[0]+e,f=u[1]+t,g=this.$viewport.applyVertexInverse([p,f,0]),m=He([g],this.$context.selection.current.absoluteMatrixInverse)[0],v=Math.abs(m[1]-c),x=[s.isPercent()?y.makePercent(v,this.state.height):y.px(v),a,o];this.state.clippath.value=`${r} ${x[0]} at ${a} ${o}`;const _=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(_))}moveEndEllipseRadiusX(){const e=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(e))}[Ke("$el .ellipse .ellipse-center")+vn+at("moveEllipseCenter")+ct("moveEndEllipseCenter")](e){const t=this.$context.selection.current;this.state.current,this.state.width=t.screenWidth,this.state.height=t.screenHeight,this.state.clippath=mt.parseStyle(t["clip-path"]),this.state.ellipse=mt.parseStyleForEllipse(this.state.clippath.value),this.state.left=y.parse(e.$dt.css("left")).value,this.state.top=y.parse(e.$dt.css("top")).value}moveEllipseCenter(e,t){const{radiusX:i,radiusY:r,x:s,y:a}=this.state.ellipse,o=this.state.left+e,l=this.state.top+t,c=this.$viewport.applyVertexInverse([o,l,0]),h=He([c],this.$context.selection.current.absoluteMatrixInverse)[0],d=[i,r,s.isPercent()?y.makePercent(h[0],this.state.width):y.px(h[0]),a.isPercent()?y.makePercent(h[1],this.state.height):y.px(h[1])];this.state.clippath.value=`${i} ${r} at ${d[2]} ${d[3]}`;const u=mt.toCSS(this.state.clippath);this.$commands.emit("setAttribute",this.$context.selection.packByValue(u))}moveEndEllipseCenter(e,t){if(e==0&&t==0){switch(this.state.clippath.type){case $r.ELLIPSE:const r=mt.toCSS({type:$r.INSET,value:""});this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(r));break}return}const i=mt.toCSS(this.state.clippath);this.$commands.executeCommand("setAttribute","change clippath",this.$context.selection.packByValue(i))}templateEllipse(e){const t=this.$context.selection.current,i=e.value.radiusX.toPx(t.screenWidth),r=e.value.radiusY.toPx(t.screenHeight),s=e.value.x.toPx(t.screenWidth),a=e.value.y.toPx(t.screenHeight),o=this.$viewport.applyVerties(He([[s,a,0],[s.value+i.value,a,0],[s.value,a.value+r.value,0]],t.absoluteMatrix)),l=o[0],c=o[1],h=o[2],d=Fe(l,c),u=Fe(l,h),p=vt([],c,l),f=Fl(p[0],p[1]);return V("div",{class:"ellipse"},V("div",{class:"ellipse-back"},V("svg",{style:"position:absolute;width:100%;height:100%;"},V("ellipse",{cx:l[0],cy:l[1],rx:d,ry:u,transform:`rotate(${f} ${l[0]} ${l[1]})`}))),V("div",{class:"ellipse-center",style:{left:l[0]+"px",top:l[1]+"px"}}),V("div",{class:"ellipse-radius ellipse-radius-x",style:{left:c[0]+"px",top:c[1]+"px"}}),V("div",{class:"ellipse-radius ellipse-radius-y",style:{left:h[0]+"px",top:h[1]+"px"}}))}}class QV extends JV{template(){return V("div",{class:"elf--clippath-editor-view "})}[me("$el")+It](){const e=this.$context.selection.current;if(!e)return"";const t=mt.parseStyle(e["clip-path"]);switch(t.type){case $r.CIRCLE:return t.value=mt.parseStyleForCircle(t.value),this.templateCircle(t);case $r.ELLIPSE:return t.value=mt.parseStyleForEllipse(t.value),this.templateEllipse(t);case $r.POLYGON:return this.templatePolygon(t);case $r.INSET:return this.templateInset(t)}return V("div",null)}[H(Lt)+Nt(100)](){this.refresh()}[H(ai)](){this.refresh()}checkClipPath(){return this.$el.isShow()===!1||!this.$context.selection.current?!1:this.$context.selection.current.hasChangedField("clip-path","angle","x","y","width","height")}[H(Ki)+et("checkClipPath")+Nt(10)](){this.refresh()}[ne("$el")](e){(qe.create(e.target).isTag("svg")||qe.create(e.target).hasClass("elf--clippath-editor-view"))&&this.trigger("hideClippathEditorView")}[H("hideClippathEditorView")](){this.$el.hide()}[H("showClippathEditorView")](){this.$el.show(),this.refresh()}}function eD(n){n.registerUI("canvas.view",{ClippathEditorView:QV})}class tD extends Bt{getTitle(){return this.$i18n("code.view.property.title")}checkConfig(){return this.$config.is("inspector.selectedValue","code")}[qt("inspector.selectedValue")](){this.refresh()}[H(Ki,Lt)+et("checkConfig")+Nt(100)](){this.refresh()}getBody(){return` -
          -
          -
          -
          - `}[me("$code")+It](){return[this.$editor.renderer("html").codeview(this.$context.selection.current)]}[me("$svg")+It](){return[this.$editor.renderer("svg").codeview(this.$context.selection.current)]}}function iD(n){n.registerUI("inspector.tab.code",{CodeViewProperty:tD})}function $n(n,e){var t=n.context.selection.currentProject;if(t){var i=t.getSelectedTimeline();e&&e(t,i)}}var rD=Object.freeze(Object.defineProperty({__proto__:null,default:$n},Symbol.toStringTag,{value:"Module"}));function Pn(n){n.emit("refreshAll")}var nD=Object.freeze(Object.defineProperty({__proto__:null,default:Pn},Symbol.toStringTag,{value:"Module"})),sD={command:"addArtBoard",execute:(n,e={},t=null)=>{var i=n.context.selection.currentProject;i||(i=n.add(n.createModel({itemType:"project"})),n.context.selection.selectProject(i));var r=i.appendChild(n.createModel(P({itemType:"artboard",x:300,y:200,width:375,height:667},e)));t&&(r.reset({x:0,y:0}),r.moveByCenter(t)),n.context.selection.select(r),Pn(n)}},aD=Object.freeze(Object.defineProperty({__proto__:null,default:sD},Symbol.toStringTag,{value:"Module"})),oD={command:"addBackgroundColor",execute:function(n,e,t=null){n.context.commands.executeCommand("setAttribute","add background color",n.context.selection.packByValue({backgroundColor:e},t))}},lD=Object.freeze(Object.defineProperty({__proto__:null,default:oD},Symbol.toStringTag,{value:"Module"})),cD={command:"addBackgroundImageAsset",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{let a=Rt.parseStyle(rn(s.backgroundImage));a.unshift(new Rt({image:new so({url:e})})),r[s.id]={"background-image":Rt.join(a)}}),n.context.commands.emit("history.setAttribute","add background image",r)}},hD=Object.freeze(Object.defineProperty({__proto__:null,default:cD},Symbol.toStringTag,{value:"Module"})),dD={command:"addBackgroundImageGradient",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{let a=Rt.parseStyle(rn(s.backgroundImage));a.unshift(new Rt({image:Rt.parseImage(e)})),r[s.id]={"background-image":Rt.join(a)}}),n.context.commands.emit("history.setAttribute","add gradient",r)}},uD=Object.freeze(Object.defineProperty({__proto__:null,default:dD},Symbol.toStringTag,{value:"Module"}));const pD=1e3,fc=new Map;class of{static has(e){return fc.has(e)}static get(e){return fc.get(e)}static set(e,t){fc.size>pD&&fc.clear(),fc.set(e,t)}}const fD={check:Fr("check"),grid:Fr("grid"),dot:Fr("dot"),"cross-dot":Fr("cross-dot"),"diagonal-line":Fr("diagonal-line"),"vertical-line":Fr("vertical-line"),"horizontal-line":Fr("horizontal-line")};class Wr extends Vr{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"pattern"},e))}toString(){return`${this.json.type}(${this.json.value||""})`}static parse(e){var t=SD[e.type];if(t)return new t(e)}static parseStyle(e){var t=[];return!e||e==="undefined"?t:(e=e.trim(),of.has(e)?of.get(e):(Zl(e,{customFuncMap:fD}).forEach((r,s)=>{const[a,o,l,c,h=[{matchedString:"normal"}],d=[{parsed:y.parse("1px")},{parsed:y.parse("1px")}]]=r.parameters;t[s]=Wr.parse({type:r.type,x:o[0].parsed,y:o[1].parsed,width:a[0].parsed,height:a[1].parsed,foreColor:l[0].matchedString,backColor:c[0].matchedString,blendMode:h[0].matchedString,lineWidth:d[0].parsed,lineHeight:d[1].parsed})}),of.set(e,t),t))}static join(e){return e.map(t=>Wr.parse(t)).join(" ")}static toCSS(e){let t=[];return Wr.parseStyle(e).forEach(i=>{t.push.apply(t,Rt.parseStyle(rn(i.toCSS())))}),Rt.joinCSS(t)}}class zo extends Wr{getDefaultObject(){return super.getDefaultObject({type:"base",x:0,y:0,width:20,height:20,lineWidth:1,lineHeight:1,foreColor:"black",backColor:"white",blendMode:"normal"})}convert(e){return e=super.convert(e),e.width=y.parse(e.width),e.height=y.parse(e.height),e.lineWidth=y.parse(e.lineWidth),e.lineHeight=y.parse(e.lineHeight),e.x=y.parse(e.x),e.y=y.parse(e.y),e}toString(){var{type:e,width:t,height:i,x:r,y:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.json;return`${e}(${t} ${i}, ${r} ${s}, ${a}, ${o}, ${l}, ${c} ${h})`}}class gD extends zo{getDefaultObject(){return super.getDefaultObject({type:"check"})}toCSS(){let{width:e,height:t,x:i,y:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: repeating-linear-gradient(45deg, ${a} 25%, ${s} 25%, ${s} 75%, ${a} 75%, ${a} 100%),repeating-linear-gradient(45deg, ${a} 25%, ${s} 25%, ${s} 75%, ${a} 75%, ${a} 100%); - background-position: 0px 0px, ${i} ${r}; - background-size: ${e} ${t}, ${e} ${t}; - background-blend-mode: ${o}, ${o}; - `}}class mD extends zo{getDefaultObject(){return super.getDefaultObject({type:"grid"})}toCSS(){let{width:e,height:t,lineWidth:i,lineHeight:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: linear-gradient(to bottom,${a} ${r}, ${s} ${r}),linear-gradient(to right, ${a} ${i}, ${s} ${i}); - background-size: ${e/2}px ${t/2}px, ${e/2}px ${t/2}px; - background-blend-mode: ${o}, ${o}; - `}}class vD extends zo{getDefaultObject(){return super.getDefaultObject({type:"dot"})}toCSS(){let{width:e,height:t,lineWidth:i,backColor:r,foreColor:s,blendMode:a}=this.json;return r=r||"transparent",s=s||"black",` - background-image: radial-gradient(${s} ${i}, ${r} ${i}); - background-size: ${e/2}px ${t/2}px; - background-blend-mode: ${a}; - `}}class yD extends zo{getDefaultObject(){return super.getDefaultObject({type:"cross-dot"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: radial-gradient(${o} ${s}, ${a} ${s}),radial-gradient(${o} ${s}, ${a} ${s}); - background-size: ${e} ${t},${e} ${t}; - background-position: 0px 0px, ${i} ${r}; - background-blend-mode: multiply, ${l}; - `}}class xD extends zo{getDefaultObject(){return super.getDefaultObject({type:"diagonal-line"})}toCSS(){let{width:e,height:t,x:i,lineWidth:r,backColor:s,foreColor:a,blendMode:o}=this.json;return s=s||"transparent",a=a||"black",` - background-image: repeating-linear-gradient(${i}, ${a} 0px, ${a} ${r}, ${s} 0px, ${s} 50%); - background-size: ${e} ${t}; - background-blend-mode: ${o}; - `}}class bD extends zo{getDefaultObject(){return super.getDefaultObject({type:"vertical-line"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: repeating-linear-gradient(to right, ${o} 0px, ${o} ${s}, ${a} ${s}, ${a} 100%); - background-size: ${e} ${t}; - background-position: ${i} ${r}; - background-blend-mode: ${l}; - `}}class _D extends zo{getDefaultObject(){return super.getDefaultObject({type:"horizontal-line"})}toCSS(){let{width:e,height:t,x:i,y:r,lineWidth:s,backColor:a,foreColor:o,blendMode:l}=this.json;return a=a||"transparent",o=o||"black",` - background-image: repeating-linear-gradient( to bottom, ${o} 0px, ${o} ${s}, ${a} ${s}, ${a} 100%); - background-position: ${i} ${r}; - background-size: ${e} ${t}; - background-blend-mode: ${l}; - `}}const SD={check:gD,grid:mD,dot:vD,"cross-dot":yD,"diagonal-line":xD,"vertical-line":bD,"horizontal-line":_D};var wD={command:"addBackgroundImagePattern",execute:function(n,e,t=null){var i=n.context.selection.itemsByIds(t);let r={};i.forEach(s=>{r[s.id]={pattern:Wr.join([...Wr.parseStyle(e),...Wr.parseStyle(s.pattern)])}}),n.context.commands.emit("history.setAttribute","add pattern",r)}},MD=Object.freeze(Object.defineProperty({__proto__:null,default:wD},Symbol.toStringTag,{value:"Module"}));function $D(n,e={},t=null){var i=n.context.selection.currentProject,r=i.appendChild(n.createModel(P({x:300,y:200,width:375,height:667},e)));t&&(r.reset({x:0,y:0}),r.moveByCenter(t)),n.context.selection.select(r),Pn(n)}var PD=Object.freeze(Object.defineProperty({__proto__:null,default:$D},Symbol.toStringTag,{value:"Module"}));function TD(n,e={},t=void 0){n.context.commands.emit("newComponent","image",e,!0,t)}var CD=Object.freeze(Object.defineProperty({__proto__:null,default:TD},Symbol.toStringTag,{value:"Module"}));function vp(n,e){var t=new window.Image;t.onload=()=>{var i={id:n.id,local:n.local,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight};e&&e(i,t)},t.onerror=i=>{console.log(i,i.message)},t.src=n.local}var ED={command:"addImageAssetItem",execute:function(n,e,t={},i=void 0){var r=n.context.selection.currentProject;r&&(r.createImage(e),n.context.commands.emit("addImageAsset"),vp(e,s=>{const a=t.width/s.width,o=t.width,l=s.height*a;n.context.commands.emit("addImage",ze(P(P({src:e.id},s),t),{width:o,height:l}),i)}))}},ID=Object.freeze(Object.defineProperty({__proto__:null,default:ED},Symbol.toStringTag,{value:"Module"}));function LD(n,e,t=!0,i){i||(i=n.context.selection.current||n.context.selection.currentProject),i&&(i.isNot("project")&&!i.enableHasChildren()&&(i=i.parent),i.appendChild(e),t&&n.context.selection.select(e),Pn(n))}var kD=Object.freeze(Object.defineProperty({__proto__:null,default:LD},Symbol.toStringTag,{value:"Module"})),AD={command:"addLayerView",execute:async function(n,e,t={}){n.context.selection.empty(),await n.emit("hideAddViewLayer"),await n.emit("removeGuideLine"),n.context.config.set("editing.mode.itemType",e),e==="select"?(n.context.selection.empty(),n.context.config.set("editing.mode",ki.SELECT)):e==="brush"?(n.context.config.set("editing.mode",ki.DRAW),await n.emit("showPathDrawEditor")):e==="path"?(n.context.config.set("editing.mode",ki.PATH),await n.emit("showPathEditor","path")):(n.context.config.set("editing.mode",ki.APPEND),await n.emit("showLayerAppendView",e,t))}},RD=Object.freeze(Object.defineProperty({__proto__:null,default:AD},Symbol.toStringTag,{value:"Module"}));function OD(n,e={}){var t=n.createModel(P({itemType:"project"},e));n.context.selection.selectProject(t),Pn(n)}var zD=Object.freeze(Object.defineProperty({__proto__:null,default:OD},Symbol.toStringTag,{value:"Module"})),VD={command:"addSVGFilterAssetItem",execute:function(n,e){var t=n.context.selection.currentProject;if(t){var i=Xr(),r=t.createSVGFilter({id:i,filters:[]});e&&e(r,i)}}},DD=Object.freeze(Object.defineProperty({__proto__:null,default:VD},Symbol.toStringTag,{value:"Module"}));function FD(n,e={}){n.context.commands.emit("newComponent","text",P({content:"Insert a text",width:300,height:50,"font-size":30},e),e)}var jD=Object.freeze(Object.defineProperty({__proto__:null,default:FD},Symbol.toStringTag,{value:"Module"})),ND={command:"addTimelineCurrentProperty",execute:function(n,e={timing:"linear"}){$n(n,t=>{var i=[];n.context.selection.each(r=>{var s={layerId:r.id,property:e.property,value:r[e.property]+"",timing:e.timing,editor:e.editor},a=t.addTimelineKeyframe(s);a&&i.push(a)}),n.context.timeline.select(...i),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},BD=Object.freeze(Object.defineProperty({__proto__:null,default:ND},Symbol.toStringTag,{value:"Module"})),GD={command:"addTimelineItem",execute:function(n,e){$n(n,t=>{e?t.addTimelineLayer(e):t.addTimeline(),n.emit("refreshTimeline"),n.emit("addTimeline")})}},HD=Object.freeze(Object.defineProperty({__proto__:null,default:GD},Symbol.toStringTag,{value:"Module"})),UD={command:"addTimelineKeyframe",execute:function(n,e={timing:"linear"}){$n(n,t=>{var i=n.context.modelManager.get(e.layerId),r={layerId:e.layerId,property:e.property,time:e.time,value:i[e.property]+"",timing:e.timing,editor:e.editor},s=t.addTimelineKeyframe(r);n.timeline.select(s),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},WD=Object.freeze(Object.defineProperty({__proto__:null,default:UD},Symbol.toStringTag,{value:"Module"})),XD={command:"addTimelineProperty",execute:function(n,e,t={timing:"linear"}){$n(n,i=>{Array.isArray(e)===!1&&(e=[e]);var r=[];e.forEach(s=>{var a={layerId:s,property:t.property,value:t.value+"",timing:t.timing,editor:t.editor},o=i.addTimelineKeyframe(a);o&&r.push(o)}),n.timeline.select(...r),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},YD=Object.freeze(Object.defineProperty({__proto__:null,default:XD},Symbol.toStringTag,{value:"Module"}));function KD(n,e={},t=void 0){n.context.commands.emit("newComponent","video",e,!0,t)}var qD=Object.freeze(Object.defineProperty({__proto__:null,default:KD},Symbol.toStringTag,{value:"Module"}));function ZD(n,e){var t=document.createElement("video");t.onloadeddata=()=>{var i={local:n.local,naturalWidth:t.videoWidth,naturalHeight:t.videoHeight,width:t.videoWidth,height:t.videoHeight,duration:t.duration,playTime:`0:1:${t.duration}`,volume:t.volume,muted:t.muted,placebackRate:t.playbackRate};e&&e(i,t)},t.src=n.local}var JD={command:"addVideoAssetItem",execute:function(n,e,t={},i=void 0){var r=n.context.selection.currentProject;r&&(r.createVideo(e),n.emit("addVideoAsset"),ZD(e,s=>{n.context.commands.emit("addVideo",P(P({src:e.id},s),t),i)}))}},QD=Object.freeze(Object.defineProperty({__proto__:null,default:JD},Symbol.toStringTag,{value:"Module"})),e6={command:"clipboard.copy",title:"Copy",description:"Copy",execute:function(n){n.context.clipboard.push({type:xg.COPY,data:n.context.selection.ids})}},t6=Object.freeze(Object.defineProperty({__proto__:null,default:e6},Symbol.toStringTag,{value:"Module"})),i6={command:"clipboard.paste",execute:async function(n){if(!n.context.clipboard.isEmpty)n.context.commands.emit("history.clipboard.paste","paste");else{var e=await window.navigator.clipboard.readText();e&&n.context.commands.emit("convertPasteText",e)}}},r6=Object.freeze(Object.defineProperty({__proto__:null,default:i6},Symbol.toStringTag,{value:"Module"})),n6={command:"convert.flatten.path",description:"flatten selected multi path",execute:n=>{const e=n.context.selection.current;if(!e)return;let t;if(e.is("boolean-path")||e.isBooleanItem){let i=e;e.isBooleanItem&&(i=e.parent),t=i.absolutePath(i["boolean-path"]),t=i.invertPath(t.d);const r=i.layers[0].toCloneObject();delete r.id,delete r.parentId,delete r.transform,delete r["boolean-path"],delete r["boolean-operation"];const s=i.parent,a=i.updatePath(t.d);n.context.commands.executeCommand("removeLayer","remove selected layers",[i.id]),n.nextTick(()=>{n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},r),a)),!0,s)})}else{t=be.fromSVGString(),n.context.selection.each(a=>{t.addPath(a.absolutePath())}),t=e.invertPath(t.d);const i=e.parent,r=e.updatePath(t.d),s=e.toCloneObject();delete s.id,n.context.commands.executeCommand("removeLayer","remove selected layers"),n.nextTick(()=>{n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},s),r)),!0,i)})}}},s6=Object.freeze(Object.defineProperty({__proto__:null,default:n6},Symbol.toStringTag,{value:"Module"})),a6={command:"convert.no.transform.path",description:"remove transform(rotate, translate, scale) inforation in path layer",execute:n=>{const e=n.context.selection.current;if(!e)return;const t=e.parent,i=e.absolutePath();if(t.is("project")){const r=i.getBBox(),s=Yi(r);n.context.commands.executeCommand("setAttribute","remove transform for path",n.context.selection.packByValue(ze(P({},s),{rotate:0,d:i.d})))}else{i.transformMat4(t.absoluteMatrixInverse);const r=t.updatePath(i.d);n.context.commands.executeCommand("setAttribute","remove transform for path",n.context.selection.packByValue(ze(P({},r),{rotate:0,d:i.d})))}}},o6=Object.freeze(Object.defineProperty({__proto__:null,default:a6},Symbol.toStringTag,{value:"Module"})),l6={command:"convert.normalize.path",description:"convert segments to bezier curve",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","normalize path string",n.context.selection.packByValue(e.updatePath(be.fromSVGString(e.d).normalize().d)))}},c6=Object.freeze(Object.defineProperty({__proto__:null,default:l6},Symbol.toStringTag,{value:"Module"})),h6={command:"convert.path.operation",description:"apply path boolean operation",execute:(n,e)=>{var s;const t=n.context.selection.current;if(!t)return;const i=a=>{n.context.commands.executeCommand("setAttribute","change boolean operation",n.context.selection.packByValue({booleanOperation:a})),r()},r=()=>{n.nextTick(()=>{n.context.commands.emit("recoverBooleanPath"),n.nextTick(()=>{n.emit(Lt)})})};if(t.is("boolean-path")||t.isBooleanItem){let a=t;t.isBooleanItem&&(a=t.parent),n.context.selection.select(a),i(e)}else(s=n.context.selection.current)!=null&&s.isNot("boolean-path")&&n.context.commands.emit("group.item",{itemType:"boolean-path",title:"Intersection"}),n.nextTick(()=>{var a;(a=n.context.selection.current)!=null&&a.is("boolean-path")&&i(e)},10)}},d6=Object.freeze(Object.defineProperty({__proto__:null,default:h6},Symbol.toStringTag,{value:"Module"})),u6={command:"convert.polygonal.path",description:"convert path to polygonal path",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","polygonal path string",n.context.selection.packByValue(e.updatePath(be.fromSVGString(e.d).polygonal().d)))}},p6=Object.freeze(Object.defineProperty({__proto__:null,default:u6},Symbol.toStringTag,{value:"Module"})),f6={command:"convert.simplify.path",execute:n=>{const e=n.context.selection.current;!e||n.context.commands.executeCommand("setAttribute","change path string",n.context.selection.packByValue(e.updatePath(n.pathKitManager.simplify(e.d))))}},g6=Object.freeze(Object.defineProperty({__proto__:null,default:f6},Symbol.toStringTag,{value:"Module"})),m6={command:"convert.smooth.path",description:"convert path to smooth",execute:(n,e=5,t=.1,i=.5)=>{const r=n.context.selection.current;if(!r)return;const s=be.fromSVGString(r.d).divideSegmentByCount(e).simplify(t).cardinalSplines(i).d;n.context.commands.executeCommand("setAttribute","smooth path string",n.context.selection.packByValue(r.updatePath(s)))}},v6=Object.freeze(Object.defineProperty({__proto__:null,default:m6},Symbol.toStringTag,{value:"Module"})),y6={command:"convert.stroke.to.path",execute:async n=>{const e=n.context.selection.current;if(!e)return;const t=e.attrs("d","stroke-width","stroke-dasharray","stroke-dashoffset","stroke-linejoin","stroke-linecap"),i=e.convertStrokeToPath();let r=n.pathKitManager.stroke(e.d||t.d,{"stroke-width":y.parse(t["stroke-width"]).value,"stroke-linejoin":t["stroke-linejoin"],"stroke-linecap":t["stroke-linecap"],"stroke-dasharray":t["stroke-dasharray"],"stroke-dashoffset":t["stroke-dashoffset"],"fill-rule":"nonezero"});i["fill-rule"]="nonzero",r=be.fromSVGString(r).reversePathStringByFunc((s,a)=>a%2===0),n.context.commands.executeCommand("addLayer","add layer - path",n.createModel(P(P({},i),e.updatePath(r))),!0,e.parent)}},x6=Object.freeze(Object.defineProperty({__proto__:null,default:y6},Symbol.toStringTag,{value:"Module"})),pb={exports:{}};(function(n,e){(function(t,i){n.exports=i()})(Dx,function(){function t(w){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?t=function(L){return typeof L}:t=function(L){return L&&typeof Symbol=="function"&&L.constructor===Symbol&&L!==Symbol.prototype?"symbol":typeof L},t(w)}var i=function(L){if(typeof L!="string")return{};L=L.split("+").join(" ");var I={},U=L.match(/(?:[?](?:[^=]+)=(?:[^&#]*)(?:[&](?:[^=]+)=(?:[^&#]*))*(?:[#].*)?)|(?:[#].*)/),se;if(U===null)return{};se=U[0].substr(1).split(/[&#=]/);for(var $e=0;$e{const t=s0.create({videoInfo:s0.parse(e),format:"embed",mediaType:"clip"});if(t){const i=n.context.viewport.center,r=300,s=200;n.context.commands.emit("newComponent","iframe",{x:i[0]-r/2,y:i[1]-s/2,width:r,height:s,backgroundColor:"transparent",url:t})}}},_6=Object.freeze(Object.defineProperty({__proto__:null,default:b6},Symbol.toStringTag,{value:"Module"}));function S6(n,e,t=null){var i=n.context.selection.current;if(i){if(i.is("svg-path","svg-brush","svg-textpath")){var r=e;if(t){var s=new be(e);s.scale(i.width/t.width,i.height/t.height),r=s.d}n.context.commands.executeCommand("setAttribute","set attribute -d",n.context.selection.packByValue({d:r},i.id))}else if(i.clipPath.includes("path")){var r=e;if(t){var s=new be(e);s.scale(i.width/t.width,i.height/t.height),r=s.d}n.context.commands.executeCommand("setAttribute","change clip path",n.context.selection.packByValue({clipPath:`path(${r})`},i.id))}}}var w6=Object.freeze(Object.defineProperty({__proto__:null,default:S6},Symbol.toStringTag,{value:"Module"})),M6={command:"copy.path",description:"copy as path for item with path string(d attribute)",execute:function(n){const e=n.context.selection.current;if(e){let t=be.fromSVGString(e.d);try{const i=e.toSVGPath();n.context.commands.executeCommand("addLayer","copy path",n.createModel(P(P({itemType:"svg-path"},i),e.updatePath(t.d))),!0,e.parent)}catch(i){console.error(i)}}}},$6=Object.freeze(Object.defineProperty({__proto__:null,default:M6},Symbol.toStringTag,{value:"Module"})),P6={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(n,e=[]){let t=e.map(l=>n.get(l)).filter(Boolean).map(l=>l.id);if(t.length||(t=n.context.selection.ids),!t.length)return;const i=await n.json.renderAll(t.map(l=>n.get(l))),r=[],s={},a={};let o={};i.forEach(l=>{const c=l.referenceId,h=n.get(c);a[h.parentId]=h.parent;const d=n.createModel(l);d.renameWithCount(),h.insertAfter(d),r.push(d.id),s[d.id]=l,o[d.id]=d.toCloneObject()}),Object.values(a).forEach(l=>{o=P(P({},o),l.attrsWithId("children"))}),n.context.commands.emit("setAttribute",o),n.nextTick(()=>{n.context.selection.select(...r)})}},T6=Object.freeze(Object.defineProperty({__proto__:null,default:P6},Symbol.toStringTag,{value:"Module"})),C6={command:"copyTimelineProperty",execute:function(n,e,t,i=null){$n(n,r=>{r.copyTimelineKeyframe(e,t,i),n.emit("refreshTimeline")})}},E6=Object.freeze(Object.defineProperty({__proto__:null,default:C6},Symbol.toStringTag,{value:"Module"})),I6={command:"deleteTimelineKeyframe",execute:function(n){$n(n,e=>{n.timeline.each(t=>{e.deleteTimelineKeyframe(t.layerId,t.property,t.id)}),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset")})}},L6=Object.freeze(Object.defineProperty({__proto__:null,default:I6},Symbol.toStringTag,{value:"Module"})),k6={command:"doubleclick.item",execute:function(n,e,t){const i=n.get(t);n.context.selection.isOne&&i?n.context.selection.checkChildren(i.id)?n.context.selection.select(i):n.context.selection.check(i)?(n.context.commands.emit("open.editor"),n.emit("removeGuideLine")):this.selectInWorldPosition(n,e,i):this.selectInWorldPosition(n,e,i)},selectInWorldPosition:function(n,e,t){const i=n.context.viewport.getWorldPosition(e);(n.context.selection.hasPoint(i)||n.context.selection.hasChildrenPoint(i))&&(n.context.selection.select(t),n.snapManager.clear())}},A6=Object.freeze(Object.defineProperty({__proto__:null,default:k6},Symbol.toStringTag,{value:"Module"}));function mm(n,e="elf.json"){var t=document.createElement("a");t.href=n,t.download=e,t.click()}var R6={command:"downloadJSON",execute:function(n,e){var t=JSON.stringify(n.context.modelManager.toJSON()),i="data:application/json;base64,"+window.btoa(unescape(encodeURIComponent(t)));mm(i,e||"elf.json")}},O6=Object.freeze(Object.defineProperty({__proto__:null,default:R6},Symbol.toStringTag,{value:"Module"})),vm={makeProjectStyle(n){const e=n.toKeyframeString(),t=n.toRootVariableCSS();return` - :root { - ${Zt(t)} - } - /* keyframe */ - ${e} - `},makeStyle(n,e=""){return n.is("project")?this.makeProjectStyle(n):` - ${n.generateView(`[data-id='${n.id}']`,e)} - `+n.layers.map(i=>this.makeStyle(i)).join("")},makeSvg(n){const e=n.toSVGString?n.toSVGString():"";return` - ${e?`${e}`:""} - `},generateSVG(n,e){return n.replaceLocalUrltoRealUrl(n.svg.render(e))}};function fb(n,e,t="image/png"){var i=qe.create("canvas"),{width:r,height:s}=n;i.resize({width:r,height:s}),i.drawImage(n),e&&e(i.toDataURL(t))}var z6={command:"downloadPNG",execute:function(n){const e=n.context.selection.current;if(e){const t=vm.generateSVG(n,e).trim(),i="data:image/svg+xml;base64,"+window.btoa(t),r=e.id;vp({local:i},(s,a)=>{fb(a,o=>{mm(o,r)})})}}},V6=Object.freeze(Object.defineProperty({__proto__:null,default:z6},Symbol.toStringTag,{value:"Module"})),D6={command:"downloadSVG",execute:function(n){const e=n.context.selection.current;if(e){var t=vm.generateSVG(n,e).trim(),i="data:image/svg+xml;base64,"+window.btoa(t),r=e.id;mm(i,r)}}},F6=Object.freeze(Object.defineProperty({__proto__:null,default:D6},Symbol.toStringTag,{value:"Module"})),j6={command:"drop.asset",execute:async function(n,e,t=null){if(e.color)n.context.commands.emit("addBackgroundColor",e.color,t);else if(e.gradient)n.context.commands.emit("addBackgroundImageGradient",e.gradient,t);else if(e.pattern)n.context.commands.emit("addBackgroundImagePattern",e.pattern,t);else if(e.imageUrl)n.context.commands.emit("addBackgroundImageAsset",e.imageUrl,t);else if(e.asset){const i=await n.storageManager.getCustomAsset(e.asset.id);i&&n.context.commands.emit("addArtBoard",i,e.asset.center)}Pn(n)}},N6=Object.freeze(Object.defineProperty({__proto__:null,default:j6},Symbol.toStringTag,{value:"Module"})),B6={command:"dropImageUrl",execute:function(n,e){vp({local:e},t=>{n.context.commands.emit("addImage",P({src:t.local},t))})}},G6=Object.freeze(Object.defineProperty({__proto__:null,default:B6},Symbol.toStringTag,{value:"Module"})),H6={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(n){const e=qe.create(n.context.config.get("bodyEvent").target);n.context.config.init("onMouseMovepageContainer",e)}},U6=Object.freeze(Object.defineProperty({__proto__:null,default:H6},Symbol.toStringTag,{value:"Module"})),W6={command:"fileDropItems",execute:function(n,e=[]){n.context.commands.emit("updateResource",e)}},X6=Object.freeze(Object.defineProperty({__proto__:null,default:W6},Symbol.toStringTag,{value:"Module"}));function Qa(n,e){if(gi(e)){var[t,i,r,s]=e.split(":");return t=parseInt(t,10),i=parseInt(i,10),r=parseInt(r,10),s=parseInt(s,10),t*3600+i*60+r+s*(1/n)}else if(bi(e))return e/n;return 0}function Lr(n,e){var t=Math.floor(e/3600),i=Math.floor(e/60%60),r=Math.floor(e%60),s=Math.round((e-Math.floor(e))*n);return s===n&&(s=0,r+=1,r===60&&(i+=1,i===60&&(t+=1))),[t,i,r,s].map(a=>(a+"").padStart(2,"0")).join(":")}function a0(n,e,t=null){return Lr(n,Qa(n,e)-Qa(n,t))}function Y6(n){var e={id:0,start:0,speed:n.speed||1,elapsed:n.elapsed||0,duration:n.duration||0,iterationStartCount:1,iterationCount:n.iterationCount||Number.MAX_SAFE_INTEGER,direction:n.direction||"normal",log:[],logIndex:0,tick:n.tick||(()=>{}),startCallback:n.start||(()=>{}),endCallback:n.end||(()=>{}),firstCallback:n.first||(()=>{}),lastCallback:n.last||(()=>{})};const t=()=>{if(e.direction==="normal")return!0;if(e.direction==="reverse")return!1;if(e.direction==="alternate")return e.iterationStartCount%2===1;if(e.direction==="alternate-reverse")return e.iterationStartCount%2===0},i=u=>t()?u:1-u,r=u=>{var p=!1;e.start===null&&(e.start=u,p=!0);const f=u-e.start;e.elapsed+=f*e.speed,e.start=u,e.elapsed>e.duration&&(e.elapsed=e.duration);var g=i(e.elapsed/e.duration)*e.duration;p&&e.startCallback(g,e),e.log[e.logIndex++]={elapsed:g,dt:e.lastTime-g},e.lastTime=g,e.tick(g,e),e.elapsed===e.duration?a():s()},s=()=>{e.id=window.requestAnimationFrame(r)},a=()=>{e.endCallback(e.elapsed,e),e.iterationStartCount++,e.iterationStartCount>e.iterationCount?(e.lastCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)):(e.start=null,e.elapsed=0,s())},o=(u={})=>{e.start=null,e.iterationStartCount=1,e.log=[],e.lastTime=0,e.logIndex=0,bi(u.elapsed)&&(e.elapsed=u.elapsed),bi(u.speed)&&(e.speed=u.speed),bi(u.duration)&&(e.duration=u.duration),bi(u.iterationCount)&&(e.iterationCount=u.iterationCount||Number.MAX_SAFE_INTEGER),gi(u.direction)&&(e.direction=u.direction),Ye(u.tick)&&(e.tick=u.tick),Ye(u.start)&&(e.startCallback=u.start),Ye(u.end)&&(e.endCallback=u.end),Ye(u.first)&&(e.firstCallback=u.first),Ye(u.last)&&(e.lastCallback=u.last),Ye(u.stop)&&(e.stopCallback=u.stop),e.firstCallback(e.elapsed,e),s()},l=()=>{e.stopCallback(e.elapsed,e),window.cancelAnimationFrame(e.id)},c=u=>{e.elapsed=u,e.tick(e.elapsed,e)};return{play:o,stop:l,tick:r,first:()=>{c(0)},last:()=>{c(e.duration)},seek:c,timer:e}}var K6={command:"firstTimelineItem",execute:function(n){$n(n,(e,t)=>{var i=e.getSelectedTimelineFirstTime();e.setTimelineCurrentTime(Lr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},q6=Object.freeze(Object.defineProperty({__proto__:null,default:K6},Symbol.toStringTag,{value:"Module"})),Z6={command:"group.item",execute:function(n,e={}){if(n.context.selection.length===0)return;const t=n.context.selection.currentProject;if(t){t.generateListNumber();const i=n.context.selection.map(s=>({depth:s.depth,item:s}));i.sort((s,a)=>s.depth===a.depth?s.no>a.no?-1:1:s.depth>a.depth?1:-1);const r=n.createModel(P(P({itemType:"rect"},n.context.selection.itemRect),e));i[0].item.insertAfter(r),i.forEach(({item:s})=>{r.appendChild(s)}),n.context.selection.select(r),n.emit("refreshAll")}}},J6=Object.freeze(Object.defineProperty({__proto__:null,default:Z6},Symbol.toStringTag,{value:"Module"})),Q6={command:"history.addLayer",description:"add layer in history ",execute:function(n,e,t,i=!0,r){n.context.commands.emit("addLayer",t,i,r),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[t,i,r],undoValues:[t.id]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:e}){n.context.commands.emit("addLayer",...e),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:e}){const t=e;n.context.selection.itemsByIds(t).forEach(r=>{r&&r.remove()}),n.nextTick(()=>{n.context.selection.empty(),n.emit("refreshAll")})}},e8=Object.freeze(Object.defineProperty({__proto__:null,default:Q6},Symbol.toStringTag,{value:"Module"})),t8={command:"history.bring.forward",description:"bring forward",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={},o=null;if(i.isLast){if(o=s.next,!o)return;o.enableHasChildren()?(o.appendChild(i),a=i.hierarchy):(o.insertAfter(i),a=i.hierarchy)}else i.parent.bringForward(i.id),a=i.hierarchy;n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle")),i.parent.attrsWithId("children"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e],undoValues:[t]}){const i=n.get(e.id),r=n.get(e.parentId),s=n.get(t.parentId);r.insertChild(i,e.index),i.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle")),r.attrsWithId("children")))},undo:function(n,{currentValues:[e],undoValues:[t]}){const i=t,r=n.get(i.id),s=n.get(i.parentId),a=n.get(e.parentId),o=i.index;s.insertChild(r,o),r.reset(t.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},i8=Object.freeze(Object.defineProperty({__proto__:null,default:t8},Symbol.toStringTag,{value:"Module"})),r8={command:"history.bring.front",description:"bring front",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierachy,s=i.parent;let a={};i.isLast||(i.parent.bringFront(i.id),a=i.hierarchy,n.context.commands.emit("setAttribute",P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()}))},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e]}){const t=e,i=n.get(t.id),r=n.get(t.parentId),s=t.index;r.insertChild(i,s),n.context.commands.emit("setAttribute",P(P({},i.attrsWithId("x","y","angle")),r.attrsWithId("children")))}},n8=Object.freeze(Object.defineProperty({__proto__:null,default:r8},Symbol.toStringTag,{value:"Module"})),s8={command:"history.clipboard.paste",description:"paste in clipboard ",description_ko:["\uD074\uB9BD\uBCF4\uB4DC \uB370\uC774\uD0C0\uB97C \uAE30\uC900\uC73C\uB85C paste \uB97C \uC801\uC6A9\uD55C\uB2E4. "],execute:async function(n,e,t=void 0,i=!0){const r=t||n.context.clipboard.last;if(r.type==xg.COPY){const s=r.data,a=await n.json.renderAll(s.map(d=>n.get(d))),o=[],l={},c={};let h={};a.forEach(d=>{const u=d.referenceId,p=n.get(u);c[p.parentId]=p.parent;const f=n.createModel(d);f.renameWithCount(),p.insertAfter(f),o.push(f.id),l[f.id]=d,h[f.id]=f.toCloneObject()}),Object.values(c).forEach(d=>{h=P(P({},h),d.attrsWithId("children"))}),n.context.commands.emit("setAttribute",h),n.nextTick(()=>{n.context.selection.select(...o),i&&n.context.history.add(e,this,{currentValues:[r],undoValues:[o,n.context.selection.ids]}),n.context.history.saveSelection()})}},redo:function(n,{currentValues:[e]}){n.context.commands.emit("history.clipboard.paste","paste",e,!1)},undo:function(n,{currentValues:[e],undoValues:[t,i]}){if(e.type===xg.COPY){const r={};t.forEach(a=>{const o=n.get(a);r[o.parentId]=o.parent,o&&o.remove()});let s={};Object.values(r).forEach(a=>{s=P(P({},s),a.attrsWithId("children"))}),n.context.selection.select(...i),n.context.commands.emit("setAttribute",s)}}},a8=Object.freeze(Object.defineProperty({__proto__:null,default:s8},Symbol.toStringTag,{value:"Module"})),o8={command:"history.copyLayer",description:"copy in selected items ",description_ko:["\uC120\uD0DD\uB41C \uC544\uC774\uD15C\uC744 \uAE30\uC900\uC73C\uB85C \uBCF5\uC81C\uD55C\uB2E4. "],execute:async function(n,e,t=[]){let i=t.map(c=>n.get(c)).filter(Boolean).map(c=>c.id);if(i.length||(i=n.context.selection.ids),!i.length)return;const r=await n.json.renderAll(i.map(c=>n.get(c))),s=[],a={},o={};let l={};r.forEach(c=>{const h=c.referenceId,d=n.get(h);o[d.parentId]=d.parent;const u=n.createModel(c);u.renameWithCount(),d.insertAfter(u),s.push(u.id),a[u.id]=c,l[u.id]=u.toCloneObject()}),Object.values(o).forEach(c=>{l=P(P({},l),c.attrsWithId("children"))}),n.context.commands.emit("setAttribute",l),n.nextTick(()=>{n.context.selection.select(...s),n.context.history.add(e,this,{currentValues:[i],undoValues:[s,n.context.selection.ids]}),n.context.history.saveSelection()})},redo:function(n,{currentValues:[e]}){n.context.commands.emit("copyLayer",e)},undo:function(n,{undoValues:[e,t]}){const i={};e.forEach(s=>{const a=n.get(s);i[a.parentId]=a.parent,a&&a.remove()});let r={};Object.values(i).forEach(s=>{r=P(P({},r),s.attrsWithId("children"))}),n.context.selection.select(...t),n.context.commands.emit("setAttribute",r)}},l8=Object.freeze(Object.defineProperty({__proto__:null,default:o8},Symbol.toStringTag,{value:"Module"})),c8={command:"history.group.item",description:"History Group Item",execute:function(n,e="selection"){var s;const t=n.context.selection.ids,i=(s=n.context.selection.currentProject)==null?void 0:s.id,r=n.context.history.selectedIds;dm(t,r)||n.context.history.add(e,this,{currentValues:{ids:t,projectId:i},undoValues:{ids:r,projectId:i}})},redo:function(n,{currentValues:[e,t]}){},undo:function(n,{undoValues:[e,t]}){}},h8=Object.freeze(Object.defineProperty({__proto__:null,default:c8},Symbol.toStringTag,{value:"Module"})),d8={command:"history.moveLayer",description:"move layer in world ",execute:function(n,e,t=[],i=[0,0,0]){Ni(t)===!1&&(t=[t]);const r=n.context.selection.itemsByIds(t),s={},a={};r.forEach(o=>{const l=o.absoluteMove(i),c=o.attrs("x","y");s[o.id]=l,a[o.id]=c}),n.context.commands.emit("setAttribute",a),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[t,i],undoValues:[s]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e,t]}){const i=n.context.selection.itemsByIds(e),r={};i.forEach(s=>{s.absoluteMove(t);const a=s.attrs("x","y");r[s.id]=a}),n.context.commands.emit("setAttribute",r)},undo:function(n,{undoValues:[e]}){n.context.commands.emit("setAttribute",e)}},u8=Object.freeze(Object.defineProperty({__proto__:null,default:d8},Symbol.toStringTag,{value:"Module"})),p8={command:"history.moveLayerToTarget",description:"move layer to target in world ",execute:function(n,e,t,i,r=[0,0,0],s=Nn.APPEND_CHILD){const a=n.get(t)||t,o=a.parent,l=n.get(i)||n.context.selection.currentProject,c=a.hierachy;r&&a.absoluteMove(r);let h={};s===Nn.APPEND_CHILD?(l.appendChild(a),h=l.attrsWithId("children")):s===Nn.INSERT_BEFORE?(l.insertBefore(a),h=l.parent.attrsWithId("children")):s===Nn.INSERT_AFTER&&(l.insertAfter(a),h=l.parent.attrsWithId("children")),n.context.commands.emit("setAttribute",P(P(P({},a.attrsWithId("x","y","angle","parentId")),h),o&&o.isNot("project")?o.attrsWithId("children"):{})),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a.hierachy],undoValues:[c,a.parentId]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e,t]}){const i=e,r=n.get(i.id),s=n.get(i.parentId),a=n.get(t),o=i.index;s.insertChild(r,o),r.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},f8=Object.freeze(Object.defineProperty({__proto__:null,default:p8},Symbol.toStringTag,{value:"Module"})),g8={command:"history.refreshSelection",description:"save selection in history ",description_ko:"Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(n,e="selection"){var s;const t=n.context.selection.ids,i=(s=n.context.selection.currentProject)==null?void 0:s.id,r=n.context.history.selectedIds;dm(t,r)||(n.context.history.add(e,this,{currentValues:[t,i],undoValues:[r,i]}),this.nextAction(n))},nextAction(n){n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e,t]}){n.context.selection.selectProject(t),n.context.selection.select(...e),this.nextAction(n)},undo:function(n,{undoValues:[e,t]}){n.context.selection.selectProject(t),n.context.selection.select(...e),this.nextAction(n)}},m8=Object.freeze(Object.defineProperty({__proto__:null,default:g8},Symbol.toStringTag,{value:"Module"})),v8={command:"history.refreshSelectionPorject",description:"save project selection in history ",description_ko:"Project Selection \uC815\uBCF4\uB97C \uAC31\uC2E0\uD558\uBA74\uC11C History \uC5D0 \uC800\uC7A5\uD55C\uB2E4",execute:function(n,e="selection",t){var s;const i=[t],r=[(s=n.context.selection.currentProject)==null?void 0:s.id];dm(i,r)||(n.context.selection.selectProject(t),n.context.history.add(e,this,{currentValues:i,undoValues:r}),this.nextAction(n))},nextAction(n){n.nextTick(()=>{n.emit("refreshAll"),n.emit("refreshProjectList")})},redo:function(n,{currentValues:[e]}){n.context.selection.selectProject(e),this.nextAction(n)},undo:function(n,{undoValues:[e]}){n.context.selection.selectProject(e),this.nextAction(n)}},y8=Object.freeze(Object.defineProperty({__proto__:null,default:v8},Symbol.toStringTag,{value:"Module"}));function o0(n=[]){return n.filter(e=>{let t=0;return e.path.forEach(i=>{t+=n.filter(r=>r.id===i.id).length?1:0}),t===1})}var x8={command:"history.removeLayer",description:"remove layer",execute:function(n,e,t=void 0){let i=n.context.selection.itemsByIds(t||n.context.selection.ids);i=o0(i);const r=i.map(a=>a.id);n.context.modelManager.markRemove(r);const s=i.map(a=>a.parentId);i.forEach(a=>{a.remove(),n.context.selection.removeById(a.id)}),n.context.history.add(e,this,{currentValues:[r,s],undoValues:r}),n.nextTick(()=>{n.context.selection.removeById(r),s.forEach(a=>{n.context.commands.emit("update",a,{changedChildren:!0})}),n.emit("refreshAll"),n.emit("removeGuideLine"),n.nextTick(()=>{n.context.history.saveSelection()})})},redo:function(n,{currentValues:e}){const t=e[0];let i=n.context.selection.itemsByIds(t||n.context.selection.ids);i=o0(i),n.context.modelManager.markRemove(i.map(r=>r.id)),i.forEach(r=>r.remove()),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:e}){n.context.modelManager.unmarkRemove(e),n.nextTick(()=>{n.emit("refreshAll")})}},b8=Object.freeze(Object.defineProperty({__proto__:null,default:x8},Symbol.toStringTag,{value:"Module"})),_8={command:"history.removeProject",description:"remove project",execute:function(n,e,t){const i=n.context.modelManager.markRemoveProject(t);n.context.history.add(e,this,{currentValues:[t],undoValues:[t,i]}),n.nextTick(()=>{n.context.selection.selectProject(n.context.modelManager.projects[0]),n.emit("refreshAll"),n.emit("removeGuideLine"),n.nextTick(()=>{n.context.history.saveSelection()})})},redo:function(n,{currentValues:[e]}){n.context.modelManager.markRemoveProject(e),n.nextTick(()=>{n.emit("refreshAll")})},undo:function(n,{undoValues:[e,t]}){n.context.modelManager.unmarkRemoveProject(e,t),n.nextTick(()=>{n.context.selection.selectProject(e),n.emit("refreshAll")})}},S8=Object.freeze(Object.defineProperty({__proto__:null,default:_8},Symbol.toStringTag,{value:"Module"})),w8={command:"history.send.back",description:"send back",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={};i.isFirst()||(i.parent.sendBack(i.id),a=i.hierarchy,n.context.commands.emit("setAttribute",P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()}))},redo:function(n,{currentValues:[e]}){const t=n.get(e.id),i=n.get(e.parentId);i.insertChild(t,e.index),t.reset(e.attrs),n.context.commands.emit("setAttribute",P(P({},t.attrsWithId("x","y","angle","parentId")),i.attrsWithId("children")))},undo:function(n,{undoValues:[e]}){const t=e,i=n.get(t.id),r=n.get(t.parentId),s=t.index;r.insertChild(i,s),n.context.commands.emit("setAttribute",P(P({},i.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))}},M8=Object.freeze(Object.defineProperty({__proto__:null,default:w8},Symbol.toStringTag,{value:"Module"})),$8={command:"history.send.backward",description:"send backward",execute:function(n,e,t=n.context.selection.current){const i=n.get(t),r=i.hierarchy,s=i.parent;let a={},o=null;if(i.isFirst){if(o=s.prev,!o)return;o.insertBefore(i),a=i.hierarchy}else i.parent.sendBackward(i.id),a=i.hierarchy;n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId")),i.parent.attrsWithId("children"))),n.nextTick(()=>{n.context.history.add(e,this,{currentValues:[a],undoValues:[r]})}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:[e],undoValues:[t]}){const i=n.get(e.id),r=n.get(e.parentId),s=n.get(t.parentId);r.insertChild(i,e.index),i.reset(e.attrs),n.context.commands.emit("setAttribute",P(P(P({},s.attrsWithId("children")),i.attrsWithId("x","y","angle","parentId")),r.attrsWithId("children")))},undo:function(n,{currentValues:[e],undoValues:[t]}){const i=t,r=n.get(i.id),s=n.get(i.parentId),a=n.get(e.parentId),o=i.index;s.insertChild(r,o),r.reset(t.attrs),n.context.commands.emit("setAttribute",P(P(P({},r.attrsWithId("x","y","angle")),s.attrsWithId("children")),a.attrsWithId("children")))}},P8=Object.freeze(Object.defineProperty({__proto__:null,default:$8},Symbol.toStringTag,{value:"Module"})),T8={command:"history.setAttribute",execute:function(n,e,t={},i={origin:"*"}){n.context.commands.emit("setAttribute",t,i),n.context.history.add(e,this,{currentValues:[t],undoValues:n.context.history.getUndoValues(t)}),n.nextTick(()=>{n.context.history.saveSelection()})},redo:function(n,{currentValues:e}){n.context.commands.emit("setAttribute",...e),n.nextTick(()=>{n.context.selection.reselect(),n.emit("refreshAll")})},undo:function(n,{undoValues:e}){const t=Object.keys(e);n.context.selection.itemsByIds(t).forEach(r=>{r.reset(e[r.id])}),n.context.selection.reselect(),n.nextTick(()=>{n.emit("refreshAll")})}},C8=Object.freeze(Object.defineProperty({__proto__:null,default:T8},Symbol.toStringTag,{value:"Module"})),E8={command:"item.move.depth.down",execute:function(n){const e=n.context.selection.current;e&&e.orderPrev(),Pn(n)}},I8=Object.freeze(Object.defineProperty({__proto__:null,default:E8},Symbol.toStringTag,{value:"Module"})),L8={command:"item.move.depth.first",execute:function(n){const e=n.context.selection.current;e&&e.orderFirst(),Pn(n)}},k8=Object.freeze(Object.defineProperty({__proto__:null,default:L8},Symbol.toStringTag,{value:"Module"})),A8={command:"item.move.depth.last",execute:function(n){const e=n.context.selection.current;e&&e.orderLast(),Pn(n)}},R8=Object.freeze(Object.defineProperty({__proto__:null,default:A8},Symbol.toStringTag,{value:"Module"})),O8={command:"item.move.depth.up",execute:function(n){const e=n.context.selection.current;e&&e.orderNext(),Pn(n)}},z8=Object.freeze(Object.defineProperty({__proto__:null,default:O8},Symbol.toStringTag,{value:"Module"})),V8={command:"keymap.keydown",execute:function(n,e){n.context.keyboardManager.add(e.code,e.keyCode,e),n.context.shortcuts&&n.context.shortcuts.execute(e,"keydown")}},D8=Object.freeze(Object.defineProperty({__proto__:null,default:V8},Symbol.toStringTag,{value:"Module"})),F8={command:"lastTimelineItem",execute:function(n){$n(n,(e,t)=>{var i=e.getSelectedTimelineLastTime();e.setTimelineCurrentTime(Lr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},j8=Object.freeze(Object.defineProperty({__proto__:null,default:F8},Symbol.toStringTag,{value:"Module"})),N8={command:"load.json",execute:function(n,e,t={origin:"*"}){n.context.modelManager.load(e,t),Pn(n)}},B8=Object.freeze(Object.defineProperty({__proto__:null,default:N8},Symbol.toStringTag,{value:"Module"})),G8={command:"moveLayer",description:"move layer by keydown with matrix ",execute:function(n,e=0,t=0){const i=[e,t,0];n.context.selection.items.forEach(r=>{r.absoluteMove(i)}),n.context.commands.executeCommand("setAttribute","item move down",n.context.selection.pack("x","y")),n.nextTick(()=>{n.context.selection.reselect()})}},H8=Object.freeze(Object.defineProperty({__proto__:null,default:G8},Symbol.toStringTag,{value:"Module"})),U8={command:"moveLayerForItems",description:"mova layer by multi items ",execute:function(n,e=[]){const t={};e.forEach(i=>{i.item.absoluteMove(i.dist),t[i.item.id]=i.item.attrs("x","y")}),n.context.commands.emit("history.setAttribute","item move",t),n.nextTick(()=>{n.context.selection.reselect()})}},W8=Object.freeze(Object.defineProperty({__proto__:null,default:U8},Symbol.toStringTag,{value:"Module"})),X8={command:"moveSelectionToCenter",description:"Move selection project or artboards to center on Viewport",execute:function(n,e=!0){var i,r,s,a,o;let t=[];(i=n.context.selection)!=null&&i.isEmpty?((s=(r=n.context.selection)==null?void 0:r.currentProject)==null?void 0:s.layers.length)>0?t=Gc((a=n.context.selection)==null?void 0:a.currentProject.layers):t=wi(0,0,100,100):t=Gc((o=n.context.selection)==null?void 0:o.items),n.context.commands.emit("moveToCenter",t,e)}},Y8=Object.freeze(Object.defineProperty({__proto__:null,default:X8},Symbol.toStringTag,{value:"Module"}));function K8(n,e,t,i=!0,r=void 0){e==="svg-textpath"?t=ze(P({},t),{fontSize:t.height,textLength:"100%",d:be.makeLine(0,t.height,t.width,t.height).d}):e==="svg-circle"?(e="svg-path",t=ze(P({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:be.makeCircle(0,0,t.width,t.height).d})):e==="svg-rect"?(e="svg-path",t=ze(P({},t),{backgroundColor:void 0,fill:"#C4C4C4",d:be.makeRect(0,0,t.width,t.height).d})):e==="text"?t=P({width:300,height:50},t):e==="artboard"&&(t=ze(P({},t),{backgroundColor:"white"}));const s=P({itemType:e},t),a=n.createModel(s);n.context.commands.executeCommand("moveLayerToTarget",`add layer - ${e}`,a,r),n.nextTick(()=>{n.emit("appendLayer",a),i&&n.context.selection.select(a)})}var q8=Object.freeze(Object.defineProperty({__proto__:null,default:K8},Symbol.toStringTag,{value:"Module"})),Z8={command:"nextTimelineItem",execute:function(n){$n(n,(e,t)=>{var i=e.getSelectedTimelineNextTime();e.setTimelineCurrentTime(Lr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},J8=Object.freeze(Object.defineProperty({__proto__:null,default:Z8},Symbol.toStringTag,{value:"Module"})),Q8={command:"open.editor",description:"Open custom editor for item when doubleclick is fired",execute:function(n,e){if(!(!e&&n.context.selection.isOne===!1)&&(e=e||n.context.selection.current,e)){if(e.editablePath)n.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,isControl:!0,disableCurve:!0,d:e.editablePath,changeEvent:s=>{n.context.commands.executeCommand("setAttribute","change editable path",n.context.selection.packByValue(P({},e.recoverEditablePath(s.d)),[e.id])),n.nextTick(()=>{n.context.stateManager.isPointerUp&&n.context.commands.emit("recoverBooleanPath")})}}),n.emit("hideSelectionToolView");else if(e.d)n.emit("showPathEditor","modify",{box:"canvas",current:e,matrix:e.matrix,d:e.absolutePath().d,changeEvent:s=>{const a=n.context.selection.current;if(a.isSVG()&&a.isNot("svg-path")){const o=a.toSVGPath(),l=n.createModel(P({itemType:"svg-path"},o));n.context.selection.select(l),a.insertAfter(l),n.nextTick(()=>{n.context.commands.emit("removeLayer",[a.id]),n.context.commands.emit("updatePathItem",s)})}else n.context.commands.emit("updatePathItem",s),n.nextTick(()=>{n.context.stateManager.isPointerUp&&n.context.commands.emit("recoverBooleanPath")})}}),n.emit("hideSelectionToolView");else if(e.clipPath){var t=mt.parseStyle(e.clipPath);if(t.type==="path"){var i=e.absolutePath(e.clipPathString).d,r=i?"modify":"path";n.emit("showPathEditor",r,{changeEvent:s=>{const a=e.invertPath(s.d).d;n.context.commands.executeCommand("setAttribute","change clip-path",n.context.selection.packByValue({clipPath:`path(${a})`}))},current:e,d:i}),n.emit("hideSelectionToolView")}else t.type==="svg"||n.emit("showClippathEditorView")}}}},e9=Object.freeze(Object.defineProperty({__proto__:null,default:Q8},Symbol.toStringTag,{value:"Module"})),t9={command:"pauseTimelineItem",execute:function(n){n.timer&&n.timer.stop()}},i9=Object.freeze(Object.defineProperty({__proto__:null,default:t9},Symbol.toStringTag,{value:"Module"})),r9={command:"playTimelineItem",description:"Play button action",execute:function(n,e=1,t=1,i="normal"){n.context.selection.empty(),$n(n,(r,s)=>{var a=r.getSelectedTimelineLastTime();n.timer?n.timer.stop():n.timer=Y6({elapsed:s.currentTime*1e3,speed:e,duration:a*1e3,iterationCount:t,direction:i}),n.timer.play({duration:a*1e3,elapsed:s.currentTime*1e3,speed:e,iterationCount:t,direction:i,tick:o=>{r.seek(Lr(s.fps,o/1e3)),n.emit("playTimeline")},last:o=>{r.seek(Lr(s.fps,o/1e3)),n.emit("playTimeline"),n.nextTick(()=>{n.emit("stopTimeline")})},stop:o=>{r.stop(Lr(s.fps,o/1e3)),n.emit("stopTimeline")}})})}},n9=Object.freeze(Object.defineProperty({__proto__:null,default:r9},Symbol.toStringTag,{value:"Module"})),s9={command:"prevTimelineItem",execute:function(n){$n(n,(e,t)=>{var i=e.getSelectedTimelinePrevTime();e.setTimelineCurrentTime(Lr(t.fps,i)),e.seek(),n.emit("playTimeline")})}},a9=Object.freeze(Object.defineProperty({__proto__:null,default:s9},Symbol.toStringTag,{value:"Module"})),o9={command:"recoverBooleanPath",description:"recover box rectangle for boolean path result",execute:function(n){const e=n.context.selection.current;let t;if(e&&e.isBooleanItem?t=e.parent:e&&e.is("boolean-path")&&(t=e),t){const i=typeof e.isBooleanItem=="boolean"&&e.isBooleanItem,r=t.d;if(!r)return;const s=t.layers.map(c=>({item:c,matrix:c.matrix})),a=t.updatePath(r);delete a.d,t.reset(a),s.forEach(c=>{t.resetMatrix(c.item)});const o=[...s.map(c=>c.item.id),t.id],l=n.context.selection.packByIds(o,"x","y","width","height");n.context.commands.executeCommand("setAttribute","fit boolean path",l,{origin:"*",doNotChildrenScale:i})}}},l9=Object.freeze(Object.defineProperty({__proto__:null,default:o9},Symbol.toStringTag,{value:"Module"})),c9={command:"refreshArtboard",execute:function(n){const e=n.createCommandMaker();e.emit("refreshLayerTreeView"),e.emit("refreshAllCanvas"),e.emit(Ki),e.emit("refreshAllElementBoundSize"),e.emit(Lt),e.run()}},h9=Object.freeze(Object.defineProperty({__proto__:null,default:c9},Symbol.toStringTag,{value:"Module"}));function l0(n,e){var t;e.hasLayout()?n.emit("refreshElementBoundSize",e):e&&(e.isLayoutItem()||((t=e.parent)==null?void 0:t.is("boolean-path")))?n.emit("refreshElementBoundSize",e.parent):n.emit("refreshElementBoundSize",e)}var d9={command:"refreshElement",execute:function(n,e,t=!0){const i=n.createCommandMaker();Ni(e)?(t&&i.emit("refreshAllCanvas"),i.emit(Ki,e),e.forEach(r=>{l0(i,r)})):(t&&e&&e.hasChangedField("children","changedChildren","parentId")&&i.emit("refreshAllCanvas"),i.emit(Ki,e),l0(i,e)),i.run()}},u9=Object.freeze(Object.defineProperty({__proto__:null,default:d9},Symbol.toStringTag,{value:"Module"}));function p9(n){n.context.commands.emit("saveJSON")}var f9=Object.freeze(Object.defineProperty({__proto__:null,default:p9},Symbol.toStringTag,{value:"Module"})),g9={command:"refreshSelectedOffset",execute:function(n){var e=n.timeline.items[0];e&&n.emit("refreshOffsetValue",e)}},m9=Object.freeze(Object.defineProperty({__proto__:null,default:g9},Symbol.toStringTag,{value:"Module"})),v9={command:"removeAnimationItem",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.removeAnimationItem(e),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("removeAnimation"))}},y9=Object.freeze(Object.defineProperty({__proto__:null,default:v9},Symbol.toStringTag,{value:"Module"})),x9={command:"removeLayer",execute:function(n,e=void 0){const t=e||n.context.selection.ids,i=[];n.context.selection.itemsByIds(t).forEach(r=>{i.push(r.id),r.remove()}),n.context.selection.removeById(i),n.nextTick(()=>{n.emit("refreshAll")})}},b9=Object.freeze(Object.defineProperty({__proto__:null,default:x9},Symbol.toStringTag,{value:"Module"})),_9={command:"removeTimeline",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.removeTimeline(e),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset"))}},S9=Object.freeze(Object.defineProperty({__proto__:null,default:_9},Symbol.toStringTag,{value:"Module"})),w9={command:"removeTimelineProperty",execute:function(n,e,t){const i=n.context.selection.currentProject;i&&(i.removeTimelineProperty(e,t),n.timeline.empty(),n.emit("refreshTimeline"),n.emit("refreshSelectedOffset"))}},M9=Object.freeze(Object.defineProperty({__proto__:null,default:w9},Symbol.toStringTag,{value:"Module"}));function $9(n,e=""){var t=n.context.selection.current;if(t&&t.is("artboard")){if(!e.trim())return;var[i,r]=e.split("x");i=+i,r=+r,t.resize(i,r),n.context.selection.select(t),Pn(n)}}var P9=Object.freeze(Object.defineProperty({__proto__:null,default:$9},Symbol.toStringTag,{value:"Module"})),T9={command:"rotateLayer",description:"rotate layer by keydown with matrix ",execute:function(n,e=0){n.context.commands.executeCommand("setAttribute","change rotate",n.context.selection.packByValue({angle:n.context.selection.current.angle+e}))}},C9=Object.freeze(Object.defineProperty({__proto__:null,default:T9},Symbol.toStringTag,{value:"Module"})),E9={command:"same.height",description:"fit at the same height",execute:function(n){var e=n.context.selection.length;if(e!=1){if(e>1){const t=Yi(n.context.selection.verties);n.context.commands.executeCommand("setAttribute","fit at the same height",n.context.selection.packByValue({y:t.y,height:t.height}))}}}},I9=Object.freeze(Object.defineProperty({__proto__:null,default:E9},Symbol.toStringTag,{value:"Module"})),L9={command:"same.width",description:"fit at the same width",execute:function(n){if(n.context.selection.isMany){const e=Yi(n.context.selection.verties);n.context.commands.executeCommand("setAttribute","fit at the same width",n.context.selection.packByValue({x:e.x,width:e.width}))}}},k9=Object.freeze(Object.defineProperty({__proto__:null,default:L9},Symbol.toStringTag,{value:"Module"})),A9={command:"saveJSON",execute:function(n){n.saveItem("model",n.context.modelManager.toJSON())}},R9=Object.freeze(Object.defineProperty({__proto__:null,default:A9},Symbol.toStringTag,{value:"Module"})),O9={command:"savePNG",execute:function(n,e=""){const t=n.context.selection.current;if(t){const i=vm.generateSVG(n,t).trim(),r="data:image/svg+xml;base64,"+window.btoa(i);vp({local:r},(s,a)=>{fb(a,o=>{e&&n.emit(e,o)})})}}},z9=Object.freeze(Object.defineProperty({__proto__:null,default:O9},Symbol.toStringTag,{value:"Module"})),V9={command:"segment.delete",execute:function(n){n.emit("deleteSegment")}},D9=Object.freeze(Object.defineProperty({__proto__:null,default:V9},Symbol.toStringTag,{value:"Module"})),F9={command:"segment.move.down",execute:function(n,e={dy:1}){const t=+e.dy;n.emit("moveSegment",0,t)}},j9=Object.freeze(Object.defineProperty({__proto__:null,default:F9},Symbol.toStringTag,{value:"Module"})),N9={command:"segment.move.left",execute:function(n,e={dx:1}){const t=+e.dx;n.emit("moveSegment",-1*t,0)}},B9=Object.freeze(Object.defineProperty({__proto__:null,default:N9},Symbol.toStringTag,{value:"Module"})),G9={command:"segment.move.right",execute:function(n,e={dx:1}){const t=+e.dx;n.emit("moveSegment",t,0)}},H9=Object.freeze(Object.defineProperty({__proto__:null,default:G9},Symbol.toStringTag,{value:"Module"})),U9={command:"segment.move.up",execute:function(n,e={dy:1}){const t=+e.dy;n.emit("moveSegment",0,-1*t)}},W9=Object.freeze(Object.defineProperty({__proto__:null,default:U9},Symbol.toStringTag,{value:"Module"})),X9={command:"select.all",execute:function(n){var e=n.context.selection.currentProject;e&&(n.context.selection.select(...e.layers),n.context.commands.emit("history.refreshSelection"))}},Y9=Object.freeze(Object.defineProperty({__proto__:null,default:X9},Symbol.toStringTag,{value:"Module"})),K9={command:"select.none",execute:function(n){n.context.selection.empty(),n.context.commands.emit("history.refreshSelection")}},q9=Object.freeze(Object.defineProperty({__proto__:null,default:K9},Symbol.toStringTag,{value:"Module"})),Z9={command:"selectTimelineItem",execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.selectTimeline(e),n.emit("refreshTimeline"),n.emit("selectTimeline"))}},J9=Object.freeze(Object.defineProperty({__proto__:null,default:Z9},Symbol.toStringTag,{value:"Module"})),Q9={command:"setAttribute",execute:function(n,e={},t={origin:"*"}){const i=[];if(Object.entries(e).forEach(([a,o])=>{const l=n.get(a),c={};Object.entries(o).forEach(([h,d])=>{c[h]=Ye(d)?d(l):d}),i.push({id:l.id,parentId:l.parentId,attrs:c})}),i.length==0)return;let r=!1;const s=[];i.forEach(a=>{const o=n.get(a.id);if(o&&(o.reset(a.attrs,t),o.hasChangedField("layout")&&o.layers.forEach(l=>{l.isLayout(At.DEFAULT)||l.isLayout(At.FLEX)||l.isLayout(At.GRID),n.context.commands.emit("refreshElement",l)}),s.push(o),o.hasChangedHirachy&&(r=!0)),!o.is("project")&&!(o.parent&&o.parent.is("project"))&&(o.isLayoutItem()||o.isBooleanItem)){const l=n.get(a.parentId);a.parentId&&(l==null?void 0:l.isNot("project"))&&(l.reset({changedChildren:!0},t),r=!0)}}),s.length&&n.context.commands.emit("refreshElement",s,!1),r&&n.emit("refreshAllCanvas")}},eF=Object.freeze(Object.defineProperty({__proto__:null,default:Q9},Symbol.toStringTag,{value:"Module"})),tF={command:"setTimelineOffset",debounce:100,execute:function(n,e){const t=n.context.selection.currentProject;t&&(t.setTimelineKeyframeOffsetValue(e.layerId,e.property,e.id,e.value,e.timing,e.time),n.emit("refreshTimeline"))}},iF=Object.freeze(Object.defineProperty({__proto__:null,default:tF},Symbol.toStringTag,{value:"Module"})),rF={command:"showExportView",execute:function(n){n.emit("showExportWindow")}},nF=Object.freeze(Object.defineProperty({__proto__:null,default:rF},Symbol.toStringTag,{value:"Module"})),sF={command:"sort.bottom",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=ud(t.verties)-ud(n.context.selection.verties);n.context.commands.emit("moveLayer",0,i)}}else if(n.context.selection.isMany){let e=ud(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=ud(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},aF=Object.freeze(Object.defineProperty({__proto__:null,default:sF},Symbol.toStringTag,{value:"Module"})),oF={command:"sort.center",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=fd(e.artboard.verties)-fd(n.context.selection.verties);n.context.commands.emit("moveLayer",t,0)}}}else if(n.context.selection.isMany){let e=fd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=fd(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},lF=Object.freeze(Object.defineProperty({__proto__:null,default:oF},Symbol.toStringTag,{value:"Module"})),cF={command:"sort.left",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=pd(t.verties)-pd(n.context.selection.verties);n.context.commands.emit("moveLayer",i,0)}}else if(n.context.selection.isMany){let e=pd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=pd(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},hF=Object.freeze(Object.defineProperty({__proto__:null,default:cF},Symbol.toStringTag,{value:"Module"})),dF={command:"sort.middle",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){if(e.artboard){const t=md(e.artboard.verties)-md(n.context.selection.verties);n.context.commands.emit("moveLayer",0,t)}}}else if(n.context.selection.isMany){let e=md(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=md(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},uF=Object.freeze(Object.defineProperty({__proto__:null,default:dF},Symbol.toStringTag,{value:"Module"})),pF={command:"sort.right",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=dd(t.verties)-dd(n.context.selection.verties);n.context.commands.emit("moveLayer",i,0)}}else if(n.context.selection.isMany){let e=dd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=dd(t.verties);return{item:t,dist:[e-i,0,0]}}))}}},fF=Object.freeze(Object.defineProperty({__proto__:null,default:pF},Symbol.toStringTag,{value:"Module"})),gF={command:"sort.top",execute:function(n){if(n.context.selection.isOne){const e=n.context.selection.current;if(!e.parent.is("project")){const t=e.parent,i=gd(t.verties)-gd(n.context.selection.verties);n.context.commands.emit("moveLayer",0,i)}}else if(n.context.selection.isMany){let e=gd(n.context.selection.verties);n.context.commands.emit("moveLayerForItems",n.context.selection.map(t=>{let i=gd(t.verties);return{item:t,dist:[0,e-i,0,0]}}))}}},mF=Object.freeze(Object.defineProperty({__proto__:null,default:gF},Symbol.toStringTag,{value:"Module"})),vF={command:"switch.path",execute:async n=>{const e=n.context.selection.current;if(!!e&&(e.is("boolean-path")||e.isBooleanItem)){let t=e;e.isBooleanItem&&(t=e.parent),n.context.selection.select(t),n.context.commands.executeCommand("setAttribute","change boolean operation",n.context.selection.packByValue({booleanOperation:t["boolean-operation"],children:t.children.reverse()})),n.nextTick(()=>{n.context.commands.emit("recoverBooleanPath"),n.context.selection.select(e)})}}},yF=Object.freeze(Object.defineProperty({__proto__:null,default:vF},Symbol.toStringTag,{value:"Module"})),xF={command:"ungroup.item",execute:function(n){if(n.context.selection.length===0)return;const e=n.context.selection.current;if(e){let t=e,i=[...t.layers];i.reverse(),i.forEach(r=>{t.insertBefore(r)}),n.context.selection.select(...i),n.emit("refreshAll")}}},bF=Object.freeze(Object.defineProperty({__proto__:null,default:xF},Symbol.toStringTag,{value:"Module"})),_F={command:"updateClipPath",description:"update clip-path property ",execute:function(n,e){n.context.commands.executeCommand("setAttribute","change clip-path",n.context.selection.packByValue({clipPath:`path(${e.d})`}))}},SF=Object.freeze(Object.defineProperty({__proto__:null,default:_F},Symbol.toStringTag,{value:"Module"})),wF={command:"updateImage",execute:function(n,e,t,i){var r=new window.FileReader;r.onload=s=>{var a=s.target.result,o=window.URL.createObjectURL(e);n.context.commands.emit("addImageAssetItem",{id:Xr(),type:e.type,name:e.name,original:a,local:o},t,i)},r.readAsDataURL(e)}},MF=Object.freeze(Object.defineProperty({__proto__:null,default:wF},Symbol.toStringTag,{value:"Module"})),$F={command:"updateImageAssetItem",execute:function(n,e,t){var i=new window.FileReader;i.onload=r=>{var s=r.target.result,a=window.URL.createObjectURL(e),o=n.context.selection.currentProject;if(o){const l=o.createImage({id:Xr(),type:e.type,name:e.name,original:s,local:a});n.context.commands.emit("addImageAsset"),Ye(t)&&t(l.id)}},i.readAsDataURL(e)}},PF=Object.freeze(Object.defineProperty({__proto__:null,default:$F},Symbol.toStringTag,{value:"Module"}));const TF=1e3,gc=new Map;class Na{static has(e){return gc.has(e)}static get(e){return gc.get(e)}static set(e,t){gc.size>TF&&gc.clear(),gc.set(e,t)}}const CF=/((matrix|translate(X|Y|Z|3d)?|scale(X|Y|Z|3d)?|rotate(X|Y|Z|3d)?|skew(X|Y)?|matrix(3d)?|perspective)\(([^)]*)\))/gi;class oi extends Vr{getDefaultObject(){return{itemType:"transform",value:[]}}toCloneObject(){return P({},this.attrs("itemType","type","value"))}toString(){return`${this.json.type}(${this.json.value.join(", ")||""})`}static join(e){var t="perspective",i="matrix3d",r=e.filter(o=>o.type===t),s=e.filter(o=>o.type===i),a=e.filter(o=>o.type!==t&&o.type!==i);return[...r,...a,...s].map(o=>new oi(o).toString()).join(" ")}hasNumberValue(){var e=this.json.type;return e.includes("matrix")||e.includes("scale")}static parse(e){return new oi(e)}static remove(e,t=[]){return typeof t=="string"&&(t=[t]),oi.filter(e,i=>t.includes(i.type)===!1)}static filter(e,t){return oi.join(oi.parseStyle(e,!1).filter(i=>t(i)))}static replace(e,t){var i=oi.parseStyle(e,!1),r=i.find(s=>s.type===t.type);return r?r.value=t.value:i.push(t),oi.join(i)}static replaceAll(e,t){for(var i=oi.parseStyle(e,!1),r=oi.parseStyle(t),s=0,a=r.length;sc.type===o.type);l?l.value=o.value:i.push(o)}return oi.join(i)}static addTransform(e,t){for(var i=oi.parseStyle(e,!1),r=oi.parseStyle(t),s=0,a=r.length;sc.type===o.type);l?o.value.forEach((c,h)=>{l.value[h].value+=c.value}):i.push(o)}return oi.join(i)}static get(e,t){var i=oi.parseStyle(e,!0);if(typeof t=="function"?i=i.find(t):i=i.find(r=>r.type===t),i)return i.value}static createRotateKey(e,t,i){return`${e}:::${i}(${t})`}static rotate(e,t,i="rotate"){const r=oi.createRotateKey(e,t,i);return Na.has(r)||Na.set(r,oi.replace(e,{type:i,value:[t]})),Na.get(r)}static rotateZ(e,t){return oi.rotate(e,t,"rotateZ")}static rotateX(e,t){return oi.rotate(e,t,"rotateX")}static rotateY(e,t){return oi.rotate(e,t,"rotateY")}static parseStyle(e,t=!0){var i=[];if(!e)return i;if(t&&Na.has(e))return Na.get(e);var r=e.match(CF)||[];return r.forEach((s,a)=>{var[o,l]=s.split("(");l=l.split(")")[0];var c=l.split(",");l.includes("matrix")||l.includes("scale")?c=c.map(h=>y.number(h.trim())):c=c.map(h=>y.parse(h.trim())),i[a]=oi.parse({type:o,value:c})}),t&&Na.set(e,i),i}static createTransformMatrix(e,t,i){const r=Wi();for(let o=0,l=e.length;o1?c.value[1].toDeg().toRad():h;Xi(r,r,oa(1,Math.tan(d.value),0,0,Math.tan(h.value),1,0,0,0,0,1,0,0,0,0,1));break;case"matrix":var a=c.value;a=[a[0].value,a[1].value,0,0,a[2].value,a[3].value,0,0,0,0,1,0,a[4].value,a[5].value,0,1],Xi(r,r,a);break;case"matrix3d":var a=c.value.map(u=>u.value);Xi(r,r,a);break;case"perspective":var a=c.value;F2(r,Math.PI*.5,t/i,1,a[0].value);break}}return r}static fromScale(e){if(e[0]===1&&e[1]===1)return"";const t=[];return e[0]!=1&&t.push(`scaleX(${e[0]})`),e[1]!=1&&t.push(`scaleY(${e[1]})`),e[2]!=1&&t.push(`scaleZ(${e[2]})`),t.join(" ")}}var EF={command:"updatePathItem",description:"Update path string for selected svg path item",execute:function(n,e){const t=n.context.selection.current;if(t)if(e.box==="box"){const i=t.invertPath(e.d);n.context.commands.executeCommand("setAttribute","change local path",n.context.selection.packByValue({d:i.d}))}else{const i=new be(e.d);i.transformMat4(e.matrix.absoluteMatrixInverse);let r=i.getBBox();const s=mr(r[1],r[0]),a=mr(r[3],r[0]);let o=He(wi(r[0][0],r[0][1],s,a),e.matrix.absoluteMatrix),l=He(o,ba(yi([],o[4]),oi.createTransformMatrix(oi.parseStyle(e.matrix.transform),s,a),yi([],Pr([],o[4]))));const c=kr(yi([],l[0]),t.getLocalTransformMatrix(s,a)),h=ya([],kr(e.matrix.parentMatrixInverse,c,Zi([],t.getLocalTransformMatrix(s,a))));n.context.commands.executeCommand("setAttribute","change path",n.context.selection.packByValue({d:i.translate(-r[0][0],-r[0][1]).d,x:h[0],y:h[1],width:s,height:a}))}}},IF=Object.freeze(Object.defineProperty({__proto__:null,default:EF},Symbol.toStringTag,{value:"Module"})),LF={command:"updateResource",execute:function(n,e){e.forEach(t=>{switch(t.type){case"image/svg+xml":case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":n.context.commands.emit("updateImage",t);break;case"text/plain":case"text/html":n.context.commands.emit("addText",{content:t.data});break;case"text/uri-list":n.context.commands.emit("updateUriList",t);break}})}},kF=Object.freeze(Object.defineProperty({__proto__:null,default:LF},Symbol.toStringTag,{value:"Module"})),AF={command:"updateUriList",execute:function(n,e){var t=e.data;if(t.indexOf("data:")>-1){var i=fp.parse(t,!0);switch(i.mimeType){case"image/png":case"image/gif":case"image/jpg":case"image/jpeg":n.context.commands.emit("addImageAssetItem",{id:Xr(),type:i.mimeType,name:"",original:t,local:i.local});break}}else{var r=e.data.split(".").pop(),s=e.data.split("/").pop();switch(r){case"png":case"jpg":case"gif":case"svg":n.context.commands.emit("addImageAssetItem",{id:Xr(),type:"image/"+r,name:s,original:e.data,local:e.data});break}}}},RF=Object.freeze(Object.defineProperty({__proto__:null,default:AF},Symbol.toStringTag,{value:"Module"})),OF={command:"updateVideo",execute:function(n,e,t,i=void 0){var r=new window.FileReader;r.onload=s=>{var a=s.target.result,o=window.URL.createObjectURL(e);n.context.commands.emit("addVideoAssetItem",{id:Xr(),type:e.type,name:e.name,original:a,local:o},t,i)},r.readAsDataURL(e)}},zF=Object.freeze(Object.defineProperty({__proto__:null,default:OF},Symbol.toStringTag,{value:"Module"})),VF={command:"updateVideoAssetItem",execute:function(n,e,t){var i=new window.FileReader;i.onload=r=>{var s=r.target.result,a=window.URL.createObjectURL(e),o=n.context.selection.currentProject;o&&(o.createVideo({id:Xr(),type:e.type,name:e.name,original:s,local:a}),n.emit("addVideoAsset"),Ye(t)&&t(a))},i.readAsDataURL(e)}},DF=Object.freeze(Object.defineProperty({__proto__:null,default:VF},Symbol.toStringTag,{value:"Module"})),FF={command:"update",description:"Update the model",execute:function(n,e=null,t={},i={origin:"*"}){const r=n.get(e);r&&r.reset(t,i)&&n.context.commands.emit("refreshElement",r)}},jF=Object.freeze(Object.defineProperty({__proto__:null,default:FF},Symbol.toStringTag,{value:"Module"}));const NF={"./command_list/_currentProject.js":rD,"./command_list/_doForceRefreshSelection.js":nD,"./command_list/addArtBoard.js":aD,"./command_list/addBackgroundColor.js":lD,"./command_list/addBackgroundImageAsset.js":hD,"./command_list/addBackgroundImageGradient.js":uD,"./command_list/addBackgroundImagePattern.js":MD,"./command_list/addCustomComponent.js":PD,"./command_list/addImage.js":CD,"./command_list/addImageAssetItem.js":ID,"./command_list/addLayer.js":kD,"./command_list/addLayerView.js":RD,"./command_list/addProject.js":zD,"./command_list/addSVGFilterAssetItem.js":DD,"./command_list/addText.js":jD,"./command_list/addTimelineCurrentProperty.js":BD,"./command_list/addTimelineItem.js":HD,"./command_list/addTimelineKeyframe.js":WD,"./command_list/addTimelineProperty.js":YD,"./command_list/addVideo.js":qD,"./command_list/addVideoAssetItem.js":QD,"./command_list/clipboard.copy.js":t6,"./command_list/clipboard.paste.js":r6,"./command_list/convert.flatten.path.js":s6,"./command_list/convert.no.transform.path.js":o6,"./command_list/convert.normalize.path.js":c6,"./command_list/convert.path.operation.js":d6,"./command_list/convert.polygonal.path.js":p6,"./command_list/convert.simplify.path.js":g6,"./command_list/convert.smooth.path.js":v6,"./command_list/convert.stroke.to.path.js":x6,"./command_list/convertPasteText.js":_6,"./command_list/convertPath.js":w6,"./command_list/copy.path.js":$6,"./command_list/copyLayer.js":T6,"./command_list/copyTimelineProperty.js":E6,"./command_list/deleteTimelineKeyframe.js":L6,"./command_list/doubleclick.item.js":A6,"./command_list/downloadJSON.js":O6,"./command_list/downloadPNG.js":V6,"./command_list/downloadSVG.js":F6,"./command_list/drop.asset.js":N6,"./command_list/dropImageUrl.js":G6,"./command_list/editor.config.body.event.js":U6,"./command_list/fileDropItems.js":X6,"./command_list/firstTimelineItem.js":q6,"./command_list/group.item.js":J6,"./command_list/history.addLayer.js":e8,"./command_list/history.bring.forward.js":i8,"./command_list/history.bring.front.js":n8,"./command_list/history.clipboard.paste.js":a8,"./command_list/history.copyLayer.js":l8,"./command_list/history.group.item.js":h8,"./command_list/history.moveLayer.js":u8,"./command_list/history.moveLayerToTarget.js":f8,"./command_list/history.refreshSelection.js":m8,"./command_list/history.refreshSelectionProject.js":y8,"./command_list/history.removeLayer.js":b8,"./command_list/history.removeProject.js":S8,"./command_list/history.send.back.js":M8,"./command_list/history.send.backward.js":P8,"./command_list/history.setAttribute.js":C8,"./command_list/item.move.depth.down.js":I8,"./command_list/item.move.depth.first.js":k8,"./command_list/item.move.depth.last.js":R8,"./command_list/item.move.depth.up.js":z8,"./command_list/keymap.keydown.js":D8,"./command_list/lastTimelineItem.js":j8,"./command_list/load.json.js":B8,"./command_list/moveLayer.js":H8,"./command_list/moveLayerForItems.js":W8,"./command_list/moveSelectionToCenter.js":Y8,"./command_list/newComponent.js":q8,"./command_list/nextTimelineItem.js":J8,"./command_list/open.editor.js":e9,"./command_list/pauseTimelineItem.js":i9,"./command_list/playTimelineItem.js":n9,"./command_list/prevTimelineItem.js":a9,"./command_list/recoverBooleanPath.js":l9,"./command_list/refreshArtboard.js":h9,"./command_list/refreshElement.js":u9,"./command_list/refreshHistory.js":f9,"./command_list/refreshSelectedOffset.js":m9,"./command_list/removeAnimationItem.js":y9,"./command_list/removeLayer.js":b9,"./command_list/removeTimeline.js":S9,"./command_list/removeTimelineProperty.js":M9,"./command_list/resizeArtBoard.js":P9,"./command_list/rotateLayer.js":C9,"./command_list/same.height.js":I9,"./command_list/same.width.js":k9,"./command_list/saveJSON.js":R9,"./command_list/savePNG.js":z9,"./command_list/segment.delete.js":D9,"./command_list/segment.move.down.js":j9,"./command_list/segment.move.left.js":B9,"./command_list/segment.move.right.js":H9,"./command_list/segment.move.up.js":W9,"./command_list/select.all.js":Y9,"./command_list/select.none.js":q9,"./command_list/selectTimelineItem.js":J9,"./command_list/setAttribute.js":eF,"./command_list/setTimelineOffset.js":iF,"./command_list/showExportView.js":nF,"./command_list/sort.bottom.js":aF,"./command_list/sort.center.js":lF,"./command_list/sort.left.js":hF,"./command_list/sort.middle.js":uF,"./command_list/sort.right.js":fF,"./command_list/sort.top.js":mF,"./command_list/switch.path.js":yF,"./command_list/ungroup.item.js":bF,"./command_list/updateClipPath.js":SF,"./command_list/updateImage.js":MF,"./command_list/updateImageAssetItem.js":PF,"./command_list/updatePathItem.js":IF,"./command_list/updateResource.js":kF,"./command_list/updateUriList.js":RF,"./command_list/updateVideo.js":zF,"./command_list/updateVideoAssetItem.js":DF,"./command_list/model/update.js":jF},gb={};Object.entries(NF).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),gb[n]=e.default});function mb(n){n.loadCommands(gb)}var BF={key:"area.width",defaultValue:100,title:"Area Width to find layers fastly",description:"Set area width/height",type:"number"},GF=Object.freeze(Object.defineProperty({__proto__:null,default:BF},Symbol.toStringTag,{value:"Module"})),HF={key:"debug.mode",defaultValue:!1,title:"debug mode",description:"Set debug mode to on ",type:"boolean"},UF=Object.freeze(Object.defineProperty({__proto__:null,default:HF},Symbol.toStringTag,{value:"Module"})),WF={key:"editing.css.itemType",defaultValue:"rect",title:"set item type for editing css",description:"set item type for editing css",type:"string"},XF=Object.freeze(Object.defineProperty({__proto__:null,default:WF},Symbol.toStringTag,{value:"Module"})),YF={key:"editing.draw.itemType",defaultValue:"path",title:"set item type for editing draw",description:"set item type for editing draw",type:"string"},KF=Object.freeze(Object.defineProperty({__proto__:null,default:YF},Symbol.toStringTag,{value:"Module"})),qF={key:"editing.mode.itemType",defaultValue:"select",title:"set item type for editing mode",description:"set item type for editing mode",type:"string"},ZF=Object.freeze(Object.defineProperty({__proto__:null,default:qF},Symbol.toStringTag,{value:"Module"})),JF={key:"editing.mode",defaultValue:ki.SELECT,title:"set editing mode for Editor",description:"set editing mode (select, append, draw, path)",type:"string"},QF=Object.freeze(Object.defineProperty({__proto__:null,default:JF},Symbol.toStringTag,{value:"Module"})),ej={key:"editing.svg.itemType",defaultValue:"svg-rect",title:"set item type for editing svg",description:"set item type for editing svg",type:"string"},tj=Object.freeze(Object.defineProperty({__proto__:null,default:ej},Symbol.toStringTag,{value:"Module"})),ij={key:"editor.design.mode",defaultValue:"design",title:"Editor Design Mode ",description:"Set editor's design mode",options:["design","item"],type:"select"},rj=Object.freeze(Object.defineProperty({__proto__:null,default:ij},Symbol.toStringTag,{value:"Module"})),nj={key:"editor.layout.mode",defaultValue:"all",title:"Editor Layout Mode ",description:"Set editor's layout mode",type:"string"},sj=Object.freeze(Object.defineProperty({__proto__:null,default:nj},Symbol.toStringTag,{value:"Module"})),aj={key:"fixed.angle",defaultValue:15,title:"fixed angle count",description:"Set fixed angle",type:"number"},oj=Object.freeze(Object.defineProperty({__proto__:null,default:aj},Symbol.toStringTag,{value:"Module"})),lj={key:"fixed.gradient.angle",defaultValue:1,title:"fixed gradient angle count",description:"Set fixed gradient angle",type:"number"},cj=Object.freeze(Object.defineProperty({__proto__:null,default:lj},Symbol.toStringTag,{value:"Module"})),hj={key:"history.delay.ms",defaultValue:500,title:"history delay milliseconds",description:"Set history delay time",type:"number"},dj=Object.freeze(Object.defineProperty({__proto__:null,default:hj},Symbol.toStringTag,{value:"Module"})),uj={key:"horizontal.line",defaultValue:[],title:"horizontal guide line for snap ",description:"horizontal guide line for snap",type:"array"},pj=Object.freeze(Object.defineProperty({__proto__:null,default:uj},Symbol.toStringTag,{value:"Module"})),fj={key:"horizontal.line.selected.index",defaultValue:-1,title:"selected horizontal guide line index",description:"selected horizontal guide line index",type:"number"},gj=Object.freeze(Object.defineProperty({__proto__:null,default:fj},Symbol.toStringTag,{value:"Module"})),mj={key:"set.drag.path.area",defaultValue:!1,title:"Drag path area",description:"Drag path area",type:"boolean",storage:"none"},vj=Object.freeze(Object.defineProperty({__proto__:null,default:mj},Symbol.toStringTag,{value:"Module"})),yj={key:"set.move.control.point",defaultValue:!1,title:"Moving Control Point",description:"Moving Control Point",type:"boolean",storage:"none"},xj=Object.freeze(Object.defineProperty({__proto__:null,default:yj},Symbol.toStringTag,{value:"Module"})),bj={key:"show.left.panel",defaultValue:!0,title:"Show left panel",description:"Set left panel visibility to on",type:"boolean"},_j=Object.freeze(Object.defineProperty({__proto__:null,default:bj},Symbol.toStringTag,{value:"Module"})),Sj={key:"show.outline",defaultValue:!1,title:"Show outline",description:"Set outline visibility to on",type:"boolean"},wj=Object.freeze(Object.defineProperty({__proto__:null,default:Sj},Symbol.toStringTag,{value:"Module"})),Mj={key:"show.right.panel",defaultValue:!0,title:"Show right panel",description:"Set right panel visibility to on",type:"boolean"},$j=Object.freeze(Object.defineProperty({__proto__:null,default:Mj},Symbol.toStringTag,{value:"Module"})),Pj={key:"show.ruler",defaultValue:!0,title:"Show ruler",description:"Set ruler visibility to on",type:"boolean"},Tj=Object.freeze(Object.defineProperty({__proto__:null,default:Pj},Symbol.toStringTag,{value:"Module"})),Cj={key:"snap.distance",defaultValue:3,title:"Snap distance between objects",description:"Set snap distance",type:"number"},Ej=Object.freeze(Object.defineProperty({__proto__:null,default:Cj},Symbol.toStringTag,{value:"Module"})),Ij={key:"snap.grid",defaultValue:50,title:"Snap grid size between objects",description:"Set snap grid size",type:"number"},Lj=Object.freeze(Object.defineProperty({__proto__:null,default:Ij},Symbol.toStringTag,{value:"Module"})),kj={key:"vertical.line",defaultValue:[],title:"vertical guide line for snap ",description:"vertical guide line for snap",type:"array"},Aj=Object.freeze(Object.defineProperty({__proto__:null,default:kj},Symbol.toStringTag,{value:"Module"})),Rj={key:"vertical.line.selected.index",defaultValue:-1,title:"selected vertical guide line index",description:"selected vertical guide line index",type:"number"},Oj=Object.freeze(Object.defineProperty({__proto__:null,default:Rj},Symbol.toStringTag,{value:"Module"}));const zj={"./config_list/area.width.js":GF,"./config_list/debug.mode.js":UF,"./config_list/editing.css.itemType.js":XF,"./config_list/editing.draw.itemType.js":KF,"./config_list/editing.mode.itemType.js":ZF,"./config_list/editing.mode.js":QF,"./config_list/editing.svg.itemType.js":tj,"./config_list/editor.design.mode.js":rj,"./config_list/editor.layout.mode.js":sj,"./config_list/fixed.angle.js":oj,"./config_list/fixed.gradient.angle.js":cj,"./config_list/history.delay.ms.js":dj,"./config_list/horizontal.line.js":pj,"./config_list/horizontal.line.selected.index.js":gj,"./config_list/set.drag.path.area.js":vj,"./config_list/set.move.control.point.js":xj,"./config_list/show.left.panel.js":_j,"./config_list/show.outline.js":wj,"./config_list/show.right.panel.js":$j,"./config_list/show.ruler.js":Tj,"./config_list/snap.distance.js":Ej,"./config_list/snap.grid.js":Lj,"./config_list/vertical.line.js":Aj,"./config_list/vertical.line.selected.index.js":Oj};var Vj=Object.values(zj).map(n=>n.default);function Dj(n){Vj.forEach(e=>{n.registerConfig(e)})}class yp extends Vr{static parse(e){return new yp(e)}getDefaultObject(e){return super.getDefaultObject(P({itemType:"selector",selector:"",properties:[]},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("selector","properties"))}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";"}return e.value.toString()+" !important;"}toPropertyString(){return this.json.properties.map(e=>{if(this.isMultiStyle(e.key))return this.getMultiStyleString(e);var t=e.value.toString();if(t){var i=e.key;return i==="x"?i="left":i==="y"&&(i="top"),`${i}: ${t} !important;`}else return""}).join(` -`)}toCSSText(e=""){return`${e}${this.json.selector} { - ${this.toPropertyString()} -}`}toCSS(){return{}}toString(e=""){return this.toCSSText(e)}}var Fj={startCache(n){n.addCache("cachedSize",{width:n.width,height:n.height}),n.addCache("cachedLayerMatrix",n.layers.map(e=>{e.startToCacheChildren();const{x:t,y:i,width:r,height:s}=e.attrs("x","y","width","height");return{id:e.id,matrix:{x:t,y:i,width:r,height:s},constraints:{horizontal:e[rs.HORIZONTAL],vertical:e[rs.VERTICAL]}}}))},recover(n){const e={width:n.width,height:n.height},t=e.width,i=e.height,r=n.getCache("cachedSize"),s=r.width,a=r.height,o=t/s,l=i/a;n.getCache("cachedLayerMatrix").forEach(({id:h,matrix:d,constraints:u})=>{const p=n.find(h),{x:f,y:g,width:m,height:v}=d,x=f,_=s-f-m,b=g,S=a-g-v,C={};switch(u.horizontal){case Tt.MIN:C.x=x;break;case Tt.MAX:C.x=t-_-m;break;case Tt.STRETCH:C.x=x,C.width=t-x-_;break;case Tt.SCALE:C.x=x*o,C.width=m*o;break;case Tt.CENTER:const k=m/2,O=(f+k)/s;C.x=O*t-k;break}switch(u.vertical){case Tt.MIN:C.y=b;break;case Tt.MAX:C.y=i-S-v;break;case Tt.STRETCH:C.y=b,C.height=i-b-S;break;case Tt.SCALE:C.y=b*l,C.height=v*l;break;case Tt.CENTER:const k=v/2,O=(g+k)/a;C.y=O*i-k;break}p.reset(C),p.recoverChildren()})}},vb={startCache(){},recover(){},updateGridArea(n,e,t=1){if(n.isInGrid()===!1)return;const i=n.originVerties,r=Yi(i),{items:s}=e,a=nx.RECT/t,o=s.filter(g=>sm(i,g.originVerties)).filter(g=>{const m=nm(g.originRect,r);return Math.floor(m.width)>a&&Math.floor(m.height)>a});if(o.length===0)return;const l=o.map(g=>g.row);l.sort((g,m)=>g-m);const c=o.map(g=>g.column);c.sort((g,m)=>g-m);const h=c[0],d=c[c.length-1],u=l[0],p=l[l.length-1],f={"grid-column-start":h,"grid-column-end":d+1,"grid-row-start":u,"grid-row-end":p+1};return n.reset(f),f}};class Kc extends Vr{static parse(e){return new Kc(e)}getDefaultObject(){return super.getDefaultObject({itemType:"offset",offset:y.percent(0),color:"rgba(255, 255, 255, 1)",properties:[]})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("offset","color","properties"))}convert(e){return e=super.convert(e),e.offset=y.parse(e.offset),e}toCSSText(){return`${this.json.offset} ${Zt(this.toCSS())}`}createProperty(e={}){return this.addProperty(P({checked:!0,value:0},e))}addProperty(e){this.json.properties.push(e)}removeProperty(e){this.json.properties.splice(e,1)}sortItem(e,t,i){e.splice(i+(t{e=P(P({},e),t.toCSS())}),e}toString(){return this.toCSSText()}}class qc extends Vr{static parse(e){return new qc(e)}static parseStyle(e){var t=[],i={};if(e.keyframe){var r=Ih(e.keyframe);r.str.split("|").map(s=>s.trim()).forEach((s,a)=>{var[o,l,c,...h]=s.split(" "),d=h.join(" ");i[o]||(i[o]=new qc({name:o}),t[a]=o);var u=i[o].offsets.filter(f=>f.offset.equals(y.parse(l))),p=null;u.length?p=u[0]:(p=new Kc({offset:y.parse(l)}),i[o].offsets.push(p)),p.addProperty({key:c,value:dp(d,r.matches)})})}return t.map(s=>(i[s].offsets.forEach(a=>{var o=[],l=[];a.properties.forEach(h=>{h.key.includes("--")?o.push(h):l.push(h)});let c=o.map(h=>`${h.key}:${h.value}`).join(";");o.length&&l.push({key:"var",value:c}),a.properties=l}),i[s]))}getDefaultObject(){return super.getDefaultObject({itemType:"keyframe",name:"sample",selectedType:"list",offsets:[]})}toCloneObject(){var{offsets:e}=this.json;return ze(P(P({},super.toCloneObject()),this.attrs("name","selectedType")),{offsets:e.map(t=>t.clone())})}isMultiStyle(e){switch(e){case"background-image":case"var":return!0}return!1}getMultiStyleString(e){switch(e.key){case"background-image":return e.value.toString()+";";case"var":var t=(e.value+"").split(";").map(i=>"--"+i).join(";");return t+";"}return e.value.toString()+";"}toOffsetString(e){var t=" ";return`${e.offset.toString()} { -${t}${e.properties.map(i=>{if(this.isMultiStyle(i.key))return this.getMultiStyleString(i);var r=(i.value||"").toString();if(r){var s=i.key;return s==="x"?s="left":s==="y"&&(s="top"),`${s}: ${r};`}else return""}).join("").replace(/;/g,`; -`+t).trim()} - }`}toOffsetText(){var e=this.json.offsets.map(t=>t);return e.sort((t,i)=>t.offset.value>i.offset.value?1:-1),e.map(t=>t.properties.length===0?"":this.toOffsetString(t)).join(` -`)}toCSSText(){var e=this.json.offsets.map(t=>t);return e.sort((t,i)=>t.offset.value>i.offset.value?1:-1),` -@keyframes ${this.json.name} { - - ${this.toOffsetText()} - -} -`}createOffset(e={}){return this.addOffset(new Kc(P({checked:!0},e)))}addOffset(e){this.json.offsets.push(e)}removeOffset(e){this.json.offsets.splice(e,1)}sortItem(e,t,i){e.splice(i+(te.isNot("project")).shift()}get project(){return this.path.find(e=>e.is("project"))}get artboard(){return this.path.find(e=>e.is("artboard"))}get path(){const e=[this];let t;for(;t=e[0].parent;)e.unshift(t);return e}get pathIds(){return this.path.map(e=>e.id)}setParentId(e){this.reset({parentId:e}),this.manager.setChanged("setParentId",this.id,{parentId:e})}get childrenLength(){return Mt(this,Sr).children.length}get index(){var e;return(e=this.parent)==null?void 0:e.findIndex(this)}get isFirst(){return this.index===0}get isLast(){return this.index===this.parent.childrenLength-1}get first(){return this.parent.layers[0]}get last(){const e=this.parent;return e.layers[e.childrenLength-1]}get prev(){var t;const e=this.index;return this.isFirst?this:(t=this.parent)==null?void 0:t.layers[e-1]}get next(){var t;const e=this.index;return this.isLast?this:(t=this.parent)==null?void 0:t.layers[e+1]}get hierarchy(){return this.getInformationForHierarchy("x","y","angle")}getInformationForHierarchy(...e){const t=this.parent,i=this.index;return{id:this.id,index:i,parentId:this.parentId,prev:i===0?void 0:t.children[i-1],next:i===t.childrenLength-1?void 0:t.children[i+1],attrs:this.attrs(...e)}}getInnerId(e=""){return Mt(this,Sr).id+e}is(e){return Mt(this,Sr).itemType===e}isNot(e){return this.is(e)===!1}get(e){return Mt(this,Sr)[e]}removeField(e){delete Mt(this,Sr)[e]}set(e,t){this.reset({[e]:t})}isSVG(){return!1}addCache(e,t){Mt(this,Ol)[e]=t}getCache(e){return Mt(this,Ol)[e]}hasCache(e){return Boolean(Mt(this,Ol)[e])}computed(e,t,i=!1){const r=`__cachedKey_${e}`,s=`${r}__parseValue`,a=Mt(this,Sr)[e];if(!i){if(this.getCache(r)===a&&this.getCache(s))return this.getCache(s)}return this.addCache(r,a),this.addCache(s,t(a,this)),this.getCache(s)}computedValue(e){const i=`${`__cachedKey_${e}`}__parseValue`;return this.getCache(i)}editable(){return!0}generateListNumber(){this.layers.forEach((e,t)=>{e.no=t,e.generateListNumber()})}convert(e={}){return e}setCache(){}toCloneObject(e=!0){const t={};return Object.keys(Mt(this,Sr)).forEach(i=>{$t(this.get(i))&&(t[i]=rt(this.get(i)))}),e&&(t.layers=this.layers.map(i=>i.clone(e))),t}clone(e=!0){return Mt(this,On).clone(this.id,e)}reset(e,t={origin:"*"}){var i;return Ti(this,Sr,this.convert(Object.assign(Mt(this,Sr),e))),Ti(this,vh,e),t.origin==="*"&&((i=Mt(this,On))==null||i.setChanged("reset",this.id,e)),this.changed(),!0}hasChangedField(...e){return e.some(t=>Mt(this,vh)[t]!==void 0)}get hasChangedHirachy(){return this.hasChangedField("children","parentId")}getDefaultObject(e={}){var t=e.id||Po();return P({id:t,name:"",itemType:"base",children:[],parentId:""},e)}attrs(...e){const t={};return e.forEach(i=>{$t(this.get(i))&&(t[i]=rt(this.get(i)))}),t}attrsWithId(...e){return{[this.id]:this.attrs(...e)}}hasChildren(){return this.children.length>0}appendChild(e){if(e.parentId===this.id){const t=this.children.find(i=>i===e.id);return Boolean(t)===!1&&(this.children.push(e.id),Mt(this,On).setChanged("appendChild",this.id,{child:e.id,oldParentId:e.parentId})),e}return this.resetMatrix(e),e.parent&&e.remove(),e.setParentId(this.id),this.children.push(e.id),e}resetMatrix(){}refreshMatrixCache(){}insertChild(e,t=0){var a;this.resetMatrix(e),e.parent&&((a=e.parent)==null?void 0:a.id)!==this.id&&e.remove(),e.setParentId(this.id);let i=this.children.map((o,l)=>({id:o,index:l}));const r=i.find(o=>o.id===e.id),s=t-.5;return r?r.index=s:i.push({id:e.id,index:s}),i.sort((o,l)=>o.index-l.index),this.reset({children:i.map(o=>o.id)}),Mt(this,On).setChanged("insertChild",this.id,{childId:e.id,index:0}),e}insertAfter(e){return this.parent.insertChild(e,this.index+1),e}insertBefore(e){return this.parent.insertChild(e,this.index),e}toggle(e,t){Bi(t)?this.reset({[e]:!this.get(e)}):this.reset({[e]:!!t})}isTreeItemHide(){let e=this.parent,t=[];do{if(e.is("project"))break;t.push(Boolean(e.collapsed)),e=e.parent}while(e);return Boolean(t.filter(Boolean).length)}expectJSON(e){return!Bi(this.get(e))}toJSON(){const e=Mt(this,Sr);let t={};return Object.keys(e).filter(i=>this.expectJSON(i)).forEach(i=>{t[i]=e[i]}),this.hasChildren()&&(t.layers=this.layers.map(i=>i.toJSON())),t}resize(){}copy(e=0){return this.parent.copyItem(this.id,e)}findIndex(e){return this.children.indexOf(e.id)}find(e){return Mt(this,On).get(e)}copyItem(e,t=10){const i=this.find(e);var r=i.clone();r.renameWithCount(),r.absoluteMove([t,t,0]);var s=this.findIndex(i);return s>-1&&this.children.push(r.id),r}remove(){this.parent.removeChild(this.id)}removeChild(e){return Mt(this,On).removeChild(this.id,e)}hasParent(e){return this.parentId===e}hasPathOf(e=[]){const t=this.path;return e.filter(i=>i.id!==this.id).some(i=>t.find(r=>r.id===i.id))}hasChild(e){return this.children.includes(e)}to(){}sendBackward(e){const t=this.children,i={};let r=-1;t.forEach((a,o)=>{i[a]={id:a,index:o},a===e&&(r=o)}),i[e].index=r-1.5;const s=Object.values(i).sort((a,o)=>a.index-o.index).map(a=>a.id);this.reset({children:s})}sendBack(e){const t=this.children,i={};t.forEach((s,a)=>{i[s]={id:s,index:a}}),i[e].index=-1;const r=Object.values(i).sort((s,a)=>s.index-a.index).map(s=>s.id);this.reset({children:r})}bringForward(e){const t=this.children,i={};let r=-1;t.forEach((a,o)=>{i[a]={id:a,index:o},a===e&&(r=o)}),i[e].index=r+1.5;const s=Object.values(i).sort((a,o)=>a.index-o.index).map(a=>a.id);this.reset({children:s})}bringFront(e){const t=this.children,i={};t.forEach((s,a)=>{i[s]={id:s,index:a}}),i[e].index=Number.MAX_SAFE_INTEGER;const r=Object.values(i).sort((s,a)=>s.index-a.index).map(s=>s.id);this.reset({children:r})}}On=new WeakMap,Sr=new WeakMap,Ol=new WeakMap,mh=new WeakMap,vh=new WeakMap,yh=new WeakMap;class jj extends yb{getDefaultObject(e={}){return super.getDefaultObject(P({svgfilters:[],keyframes:[]},e))}get keyframes(){return this.get("keyframes")}get svgfilters(){return this.get("svgfilters")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new qc(P({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,i){e.splice(i+(tt.toString(e)).join(` - -`)}copyPropertyList(e,t){var i=P({},e[t]);e.splice(t,0,i)}removePropertyList(e,t){e.splice(t,1)}getSVGFilterIndex(e){var i;var t=this.svgfilters.map((r,s)=>({id:r.id,index:s})).filter(r=>r.id===e);return t.length?(i=t==null?void 0:t[0])==null?void 0:i.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=P(P({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(P({id:Xr()},e))}}class Nj extends jj{getDefaultObject(e={}){return super.getDefaultObject(P({angle:0,x:0,y:0,width:300,height:300,position:"absolute",perspective:"",perspectiveOrigin:"",transformOrigin:"50% 50% 0px"},e))}get isAbsolute(){return this.position==="absolute"}get isDragSelectable(){return!0}get isBooleanItem(){}get resizableWitChildren(){return!1}get perspective(){return this.get("perspective")}get perspectiveOrigin(){return this.get("perspectiveOrigin")}get transform(){return`rotateZ(${y.deg(this.angle)})`}get localMatrix(){return this.hasCache("localTransform")||this.addCache("localTransform",this.getLocalTransformMatrix()),this.getCache("localTransform")||this.getLocalTransformMatrix()}get localMatrixInverse(){return this.hasCache("localTransformInverse")||this.addCache("localTransformInverse",this.getLocalTransformMatrixInverse()),this.getCache("localTransformInverse")||this.getLocalTransformMatrixInverse()}get transformWithTranslate(){return this.hasCache("transformWithTranslate")||this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslate")||this.getTransformWithTranslate(this)}get transformWithTranslateToTranspose(){return this.hasCache("transformWithTranslateTranspose")||this.addCache("transformWithTranslateTranspose",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateTranspose")||wv([],this.getTransformWithTranslate(this))}get transformWithTranslateInverse(){return this.hasCache("transformWithTranslateInverse")||this.addCache("transformWithTranslateInverse",this.getTransformWithTranslate(this)),this.getCache("transformWithTranslateInverse")||Zi([],this.getTransformWithTranslate(this))}get itemMatrix(){return this.hasCache("itemTransform")||this.addCache("itemTransform",this.getItemTransformMatrix()),this.getCache("itemTransform")||this.getItemTransformMatrix()}get itemMatrixInverse(){return this.hasCache("itemTransformInverse")||this.addCache("itemTransformInverse",this.getItemTransformMatrixInverse()),this.getCache("itemTransformInverse")||this.getItemTransformMatrixInverse()}get absoluteMatrix(){return this.hasCache("absoluteMatrix")||this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.getCache("absoluteMatrix")||this.getAbsoluteMatrix()}get absoluteMatrixInverse(){return this.hasCache("absoluteMatrixInverse")||this.addCache("absoluteMatrixInverse",this.getAbsoluteMatrixInverse()),this.getCache("absoluteMatrixInverse")||this.getAbsoluteMatrixInverse()}get relativeMatrix(){return this.hasCache("relativeMatrix")||this.addCache("relativeMatrix",this.getRelativeMatrix()),this.getCache("relativeMatrix")||this.getRelativeMatrix()}get relativeMatrixInverse(){return this.hasCache("relativeMatrixInverse")||this.addCache("relativeMatrixInverse",this.getRelativeMatrixInverse()),this.getCache("relativeMatrixInverse")||this.getRelativeMatrixInverse()}get verties(){return this.hasCache("verties")||this.addCache("verties",this.getVerties()),this.getCache("verties")||this.getVerties()}get contentVerties(){return this.hasCache("contentVerties")||this.addCache("contentVerties",this.getContentVerties()),this.getCache("contentVerties")||this.getContentVerties()}get originVerties(){return this.hasCache("vertiesWithoutTransformOrigin")||this.addCache("vertiesWithoutTransformOrigin",this.rectVerties()),this.getCache("vertiesWithoutTransformOrigin")||this.rectVerties()}get localVerties(){return this.hasCache("localVerties")||this.addCache("localVerties",this.getLocalVerties()),this.getCache("localVerties")||this.getLocalVerties()}get guideVerties(){return this.hasCache("guideVerties")||this.addCache("guideVerties",this.getGuideVerties()),this.getCache("guideVerties")||this.getGuideVerties()}get xList(){return this.hasCache("xList")||this.addCache("xList",this.getXList()),this.getCache("xList")||this.getXList()}get yList(){return this.hasCache("yList")||this.addCache("yList",this.getYList()),this.getCache("yList")||this.getYList()}get areaPosition(){return this.hasCache("areaPosition")||this.addCache("areaPosition",this.getAreaPosition(100)),this.getCache("areaPosition")||this.getAreaPosition(100)}get offsetX(){return this.x}get offsetY(){return this.y}get screenWidth(){return this.width}get screenHeight(){return this.height}get y(){return this.get("y")}set y(e){this.set("y",e)}get x(){return this.get("x")}set x(e){this.set("x",e)}get width(){return this.get("width")}set width(e){this.set("width",e)}get height(){return this.get("height")}set height(e){this.set("height",e)}get angle(){return this.get("angle")}set angle(e){this.set("angle",e)}get position(){return this.get("position")}set position(e){this.set("position",e)}get transformOrigin(){return this.get("transformOrigin")}set transformOrigin(e){this.reset({transformOrigin:e})}get translate(){return[0,0,0]}get scale(){return[1,1,1]}get rotate(){return[0,0,or(this.angle)]}get origin(){return un.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight)}get absoluteOrigin(){return He([this.origin],this.absoluteMatrix)[0]}get quat(){return K2(yg(),0,0,this.angle)}getAreaPosition(e=100){const t=this.getVerties(),i=xn(t),[r,s]=bg(i[0][0],i[0][1],e),[a,o]=bg(i[2][0],i[2][1],e);return{column:[s,o],row:[r,a]}}reset(e,t={origin:"*"}){const i=super.reset(e,t);return(this.hasChangedField("children","x","y","width","height","boxModel","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshMatrixCache(),i}changed(){super.changed(),this.changedRect=this.hasChangedField("children","x","y","width","height","angle","transformOrigin","resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")}setParentId(e){super.setParentId(e),this.refreshMatrixCache()}refreshMatrixCache(){this.setCacheItemTransformMatrix(),this.setCacheLocalTransformMatrix(),this.setCacheAbsoluteMatrix(),this.setCacheLocalVerties(),this.setCacheVerties(),this.setCacheGuideVerties(),this.setCacheAreaPosition(),this.layers.forEach(e=>{e.refreshMatrixCache()})}setCacheItemTransformMatrix(){this.addCache("itemTransform",this.getItemTransformMatrix()),this.addCache("itemTransformInverse",Zi([],this.getCache("itemTransform")))}setCacheLocalTransformMatrix(){this.addCache("localTransform",this.getLocalTransformMatrix()),this.addCache("localTransformInverse",Zi([],this.getCache("localTransform"))),this.addCache("transformWithTranslate",this.getTransformWithTranslate(this)),this.addCache("transformWithTranslateInverse",Zi([],this.getCache("transformWithTranslate"))),this.addCache("transformWithTranslateTranspose",wv([],this.getCache("transformWithTranslate")))}setCacheAbsoluteMatrix(){this.addCache("absoluteMatrix",this.getAbsoluteMatrix()),this.addCache("absoluteMatrixInverse",Zi([],this.getCache("absoluteMatrix"))),this.addCache("relativeMatrix",this.getRelativeMatrix()),this.addCache("relativeMatrixInverse",Zi([],this.getCache("relativeMatrix")))}setCacheVerties(){this.addCache("verties",this.getVerties()),this.addCache("contentVerties",this.getContentVerties()),this.addCache("vertiesWithoutTransformOrigin",this.rectVerties())}setCacheLocalVerties(){this.addCache("localVerties",this.getLocalVerties())}setCacheGuideVerties(){this.addCache("guideVerties",this.getGuideVerties()),this.addCache("xList",this.getXList()),this.addCache("yList",this.getYList())}setCacheAreaPosition(){this.addCache("areaPosition",this.getAreaPosition(100))}move(e=[0,0,0]){this.reset({x:Xt(this.offsetX+e[0]),y:Xt(this.offsetY+e[1])})}moveByCenter(e=[0,0,0]){this.reset({x:e[0]-this.screenWidth/2,y:e[1]-this.screenHeight/2})}absoluteMove(e=[0,0,0]){var o;const t=this.verties[4],i=bt([],t,e),r=He([t,i],((o=this.parent)==null?void 0:o.absoluteMatrixInverse)||A2([])),s=vt([],r[1],r[0]),a=this.attrs("x","y");return this.move(s),a}startToCacheChildren(){}recoverChildren(){}resize(e,t){this.startToCacheChildren(),this.reset({width:e,height:t}),this.recoverChildren()}setAngle(e=0){this.reset({angle:e})}addAngle(e=0){this.setAngle(this.angle+e)}checkInArea(e){return sm(e,this.originVerties)}hasPoint(e,t){return this.isPointInRect(e,t)}isPointInRect(e,t){return to(this.originVerties,e,t)}isIncludeByArea(e){return this.originVerties.map(t=>to(e,...t)).filter(Boolean).length===4}getPerspectiveMatrix(){if(!this.perspective)return;let[t=y.percent(50),i=y.percent(50)]=un.parseStyle(this.perspectiveOrigin);const r=this.screenWidth,s=this.screenHeight;t=t.toPx(r).value,i=i.toPx(s).value;const a=Wi();if(Oi(a,a,[t,i,0]),this.perspective&&this.perspective!="none")Xi(a,a,oa(1,0,0,0,0,1,0,0,0,0,1,0,0,0,-1/y.parse(this.perspective).value,1));else return;return Oi(a,a,[-t,-i,0]),a}getItemTransformMatrix(){const e=oi.parseStyle(this.transform),t=this.screenWidth,i=this.screenHeight;return oi.createTransformMatrix(e,t,i)}getItemTransformMatrixInverse(){return Zi([],this.getItemTransformMatrix())}getLocalTransformMatrix(e,t){const i=un.scale(this.transformOrigin||"50% 50% 0px",Bi(e)?this.screenWidth:e,Bi(t)?this.screenHeight:t),r=Wi();return Oi(r,r,i),Xi(r,r,this.itemMatrix),Oi(r,r,Pr([],i)),r}getLocalTransformMatrixInverse(e,t){return Zi([],this.getLocalTransformMatrix(e,t))}getDirectionTransformMatrix(e,t,i){const r=this.offsetX,s=this.offsetY,a=bt([],un.scale(this.transformOrigin||"50% 50% 0px",t,i),Pr([],e)),o=Wi();return Oi(o,o,[r,s,0]),Oi(o,o,e),Oi(o,o,a),Xi(o,o,this.itemMatrix),Oi(o,o,Pr([],a)),o}getDirectionTopLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,0,0],e,t)}getDirectionLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t/2,0],e,t)}getDirectionTopMatrix(e,t){return this.getDirectionTransformMatrix([e/2,0,0],e,t)}getDirectionBottomLeftMatrix(e,t){return this.getDirectionTransformMatrix([0,t,0],e,t)}getDirectionTopRightMatrix(e,t){return this.getDirectionTransformMatrix([e,0,0],e,t)}getDirectionRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t/2,0],e,t)}getDirectionBottomRightMatrix(e,t){return this.getDirectionTransformMatrix([e,t,0],e,t)}getDirectionBottomMatrix(e,t){return this.getDirectionTransformMatrix([e/2,t,0],e,t)}getAbsoluteMatrix(){let e=Wi();if(this.parent&&(Xi(e,e,this.parent.absoluteMatrix),Ye(this.parent.getPerspectiveMatrix))){const t=this.parent.getPerspectiveMatrix();t&&Xi(e,e,t)}return Xi(e,e,this.getRelativeMatrix()),e.filter(t=>!isNaN(t)).length===0?Wi():e}getRelativeMatrix(){let e=Wi();const t=this.offsetX,i=this.offsetY;return Oi(e,e,[t,i,0]),Xi(e,e,this.localMatrix),e}getRelativeMatrixInverse(){return Zi([],this.getRelativeMatrix())}getTransformWithTranslate(e){e=e||this;let t=Wi();const i=e.offsetX,r=e.offsetY;return Oi(t,t,[i,r,0]),Xi(t,t,e.localMatrix),t}getAbsoluteMatrixInverse(){return Zi([],this.getAbsoluteMatrix())}getLocalVerties(e,t){return e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight,wi(0,0,e,t,this.transformOrigin)}getVerties(e,t){e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight;let i=0,r=0;if(this.parent&&this.parent.is("project")===!1){const a=this.parent.contentBox;i=a.x,r=a.y}let s=wi(i,r,e,t,this.transformOrigin);return He(s,this.absoluteMatrix)}getContentVerties(e,t){e=$t(e)?e:this.screenWidth,t=$t(t)?t:this.screenHeight;const i=un.scale(this.transformOrigin,e,t),r=this.get("padding-top")||0,s=this.get("padding-right")||0,a=this.get("padding-bottom")||0,o=this.get("padding-left")||0,l=wi(0+o,0+r,e-o-s,t-r-a,this.transformOrigin);return l[4]=i,He(l,this.absoluteMatrix)}rectVerties(){return this.verties.filter((e,t)=>t<4)}getGuideVerties(){const e=this.originVerties;return[...e,Re([],e[0],e[1],.5),Re([],e[1],e[2],.5),Re([],e[2],e[3],.5),Re([],e[3],e[0],.5)]}getXList(){return[...new Set(this.guideVerties.map(e=>e[0]))]}getYList(){return[...new Set(this.guideVerties.map(e=>e[1]))]}get nestedAngle(){return this.parent?this.parent.nestedAngle+this.angle:this.angle||0}get toRectVerties(){return Gc([this])}get matrix(){const e=this.id,t=this.offsetX,i=this.offsetY,r=this.screenWidth,s=this.screenHeight,a=this.transform,o=this.transformOrigin||"50% 50% 0px",l=this.getTransformOriginMatrix(),c=this.getTransformOriginMatrixInverse(),h=this.parent.absoluteMatrix,d=this.parent.absoluteMatrixInverse,u=this.localMatrix,p=this.localMatrixInverse,f=this.itemMatrix,g=this.itemMatrixInverse,m=this.absoluteMatrix,v=this.absoluteMatrixInverse,x=this.relativeMatrix,_=this.relativeMatrixInverse,b={"to top left":this.getDirectionTopLeftMatrix(r,s),"to top":this.getDirectionTopMatrix(r,s),"to top right":this.getDirectionTopRightMatrix(r,s),"to right":this.getDirectionRightMatrix(r,s),"to bottom left":this.getDirectionBottomLeftMatrix(r,s),"to bottom":this.getDirectionBottomMatrix(r,s),"to bottom right":this.getDirectionBottomRightMatrix(r,s),"to left":this.getDirectionLeftMatrix(r,s)},S=this.verties,C=S.map(O=>O[0]),k=S.map(O=>O[1]);return{id:e,x:t,y:i,width:r,height:s,transform:a,originalTransformOrigin:o,verties:S,originVerties:this.originVerties,xList:C,yList:k,directionMatrix:b,parentMatrix:h,parentMatrixInverse:d,localMatrix:u,localMatrixInverse:p,itemMatrix:f,itemMatrixInverse:g,absoluteMatrix:m,absoluteMatrixInverse:v,relativeMatrix:x,relativeMatrixInverse:_,transformOriginMatrix:l,transformOriginMatrixInverse:c}}absolutePath(e=""){const t=e||this.d,i=new be(t);return i.transformMat4(this.absoluteMatrix),i}invertPath(e=""){const t=new be(e);return t.transformMat4(this.absoluteMatrixInverse),t}invertPoint(e){return Wt([],e,this.absoluteMatrixInverse)}invertPathString(e=""){return this.invertPath(e).d}updatePath(e){const t=this.matrix,i=new be(e);let r=i.getBBox();const s=mr(r[1],r[0]),a=mr(r[3],r[0]);let o=He(wi(r[0][0],r[0][1],s,a),t.absoluteMatrix),l=He(o,ba(yi([],o[4]),oi.createTransformMatrix(oi.parseStyle(t.transform),s,a),yi([],Pr([],o[4]))));const c=kr(yi([],l[0]),this.getLocalTransformMatrix(s,a)),h=ya([],kr(t.parentMatrixInverse,c,Zi([],this.getLocalTransformMatrix(s,a))));return{d:i.translate(-r[0][0],-r[0][1]).d,x:h[0],y:h[1],width:s,height:a}}checkInAreaForAll(e){const t=[...this.checkInAreaForLayers(e)];return this.is("artboard")||this.is("project")||this.checkInArea(e)&&t.push(this),t}checkInAreaForLayers(e){var t=[];return this.layers.forEach(i=>{t.push.apply(t,i.checkInAreaForLayers(e)),i.checkInArea(e)&&t.push(i)}),t}getTransformOriginMatrix(){return yi([],un.scale(this.transformOrigin||"50% 50% 0px",this.screenWidth,this.screenHeight))}getTransformOriginMatrixInverse(){return Zi([],this.getTransformOriginMatrix())}recoverMatrix(e){const t=kr(this.absoluteMatrixInverse,e.absoluteMatrix),i=Pv([],t),r=[],s=Cv(r,i),a=r[2]?Iu(s*r[2]):0,o=Wi();Mv(o,s,r);const[l,c]=ya([],kr(t,ba(e.transformOriginMatrix,o,e.transformOriginMatrixInverse)));return{x:l,y:c,angle:a}}resetMatrix(e){const t=kr(this.absoluteMatrixInverse,e.absoluteMatrix),i=Pv([],t),r=[],s=Cv(r,i),a=r[2]?Iu(s*r[2]):0,o=Wi();Mv(o,s,r);const[l,c]=ya([],kr(t,ba(e.getTransformOriginMatrix(),o,e.getTransformOriginMatrixInverse())));e.reset({x:l,y:c,angle:a}),this.manager.setChanged("resetMatrix",this.id,{end:!0,childItemId:e==null?void 0:e.id})}setOrder(e){var t=this.parent,i=this.index;i>-1&&(t.children[i]=t.children[e],t.children[e]=this.id,this.manager.setChanged("setOrder",this.id,{targetIndex:e,startIndex:i,parentId:t.id}))}orderNext(){if(this.isLast){if(this.parent.next){let t=this.parent.next;t.enableHasChildren()?t.appendChild(this):t.insertAfter(this)}return}var e=this.index;e>-1&&this.setOrder(e+1)}orderPrev(){if(this.isFirst){const t=this.parent.prev;t&&t.insertBefore(this);return}var e=this.index;e>0&&this.setOrder(e-1)}orderFirst(){this.setOrder(0)}orderLast(){this.setOrder(this.parent.childrenLength-1)}orderTop(){}orderBottom(){}}const c0={[At.DEFAULT]:Fj,[At.GRID]:vb};class Bj extends Nj{getDefaultObject(e={}){return super.getDefaultObject(P({layout:At.DEFAULT,constraintsHorizontal:Tt.NONE,constraintsVertical:Tt.NONE,flexDirection:wr.ROW,flexWrap:yu.NOWRAP,justifyContent:Cl.FLEX_START,alignItems:ca.FLEX_START,alignContent:yL.FLEX_START,order:0,flexGrow:0,flexShrink:0,flexBasis:"auto",gap:0,resizingHorizontal:St.FIXED,resizingVertical:St.FIXED,gridTemplateRows:"auto",gridColumnGap:"0px",gridTemplateColumns:"auto",gridRowGap:"0px",gridTemplateAreas:"",gridAutoRows:"auto",gridAutoColumns:"auto",gridAutoFlow:"row"},e))}reset(e,t={origin:"*"}){const i=super.reset(e,t);return(this.hasChangedField("resizingVertical","resizingHorizontal","contraintsVertical","contraintsHorizontal")||this.changedLayout)&&this.refreshResizableCache(),i}refreshResizableCache(){this.addCache("resizable",this.getAutoResizable())}get autoResizable(){return this.getCache("resizable")}getAutoResizable(){return!(this.parent.is("project")||this.resizingHorizontal===St.FIXED&&this.resizingVertical===St.FIXED&&this.constraintsHorizontal===Tt.NONE&&this.constraintsVertical===Tt.NONE)}get layout(){return this.get("layout")}get constraintsHorizontal(){return this.get("constraintsHorizontal")}set constraintsHorizontal(e){this.reset({constraintsHorizontal:e})}get constraintsVertical(){return this.get("constraintsVertical")}set constraintsVertical(e){this.reset({constraintsVertical:e})}get flexDirection(){return this.get("flexDirection")}set flexDirection(e){this.reset({flexDirection:e})}get flexWrap(){return this.get("flexWrap")}set flexWrap(e){this.reset({flexWrap:e})}get justifyContent(){return this.get("justifyContent")}set justifyContent(e){this.reset({justifyContent:e})}get alignItems(){return this.get("alignItems")}set alignItems(e){this.reset({alignItems:e})}get alignContent(){return this.get("alignContent")}set alignContent(e){this.reset({alignContent:e})}get order(){return this.get("order")}set order(e){this.reset({order:e})}get flexGrow(){return this.get("flexGrow")}set flexGrow(e){this.reset({flexGrow:e})}get flexShrink(){return this.get("flexShrink")}set flexShrink(e){this.reset({flexShrink:e})}get flexBasis(){return this.get("flexBasis")}set flexBasis(e){this.reset({flexBasis:e})}get gap(){return this.get("gap")}set gap(e){this.reset({gap:e})}get resizingHorizontal(){return this.get("resizingHorizontal")}set resizingHorizontal(e){this.reset({resizingHorizontal:e})}get resizingVertical(){return this.get("resizingVertical")}set resizingVertical(e){this.reset({resizingVertical:e})}get gridTemplateRows(){return this.get("gridTemplateRows")}set gridTemplateRows(e){this.reset({gridTemplateRows:e})}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.reset({gridColumnGap:e})}get gridTemplateColumns(){return this.get("gridTemplateColumns")}set gridTemplateColumns(e){this.reset({gridTemplateColumns:e})}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.reset({gridRowGap:e})}get gridTemplateAreas(){return this.get("gridTemplateAreas")}set gridTemplateAreas(e){this.reset({gridTemplateAreas:e})}get gridAutoRows(){return this.get("gridAutoRows")}set gridAutoRows(e){this.reset({gridAutoRows:e})}get gridAutoColumns(){return this.get("gridAutoColumns")}set gridAutoColumns(e){this.reset({gridAutoColumns:e})}get gridAutoFlow(){return this.get("gridAutoFlow")}set gridAutoFlow(e){this.reset({gridAutoFlow:e})}isLayoutItem(){var e;return!!((e=this.parent)!=null&&e.hasLayout())}hasConstraints(){return this.isLayout(At.DEFAULT)}hasLayout(){return!this.hasConstraints()||Boolean(this.layout)===!1}isLayout(e){return this.layout===e}isInDefault(){var t;const e=((t=this.parent)==null?void 0:t.layout)||"default";return At.DEFAULT===e}isInGrid(){return this.isInLayout(At.GRID)}isInFlex(){return this.isInLayout(At.FLEX)}isInLayout(e){var t;return((t=this.parent)==null?void 0:t.layout)===e}changeConstraints(e,t,i=!1){const r=this.get(e);let s=t;r===Tt.MAX?(t===Tt.MAX&&(s=Tt.SCALE),i&&t===Tt.MIN&&(s=Tt.STRETCH)):r===Tt.MIN?t===Tt.MIN?s=Tt.SCALE:i&&t===Tt.MAX&&(s=Tt.STRETCH):r===Tt.STRETCH&&(t===Tt.MIN?s=Tt.MAX:t===Tt.MAX&&(s=Tt.MIN)),this.reset({[e]:s})}startToCacheChildren(){var e;(e=c0[this.layout])==null||e.startCache(this)}recoverChildren(){var e;(e=c0[this.layout])==null||e.recover(this)}}const Gj=["appearance","position","right","bottom","rootVariable","variable","transform","filter","backdropFilter","backgroundColor","backgroundImage","borderRadius","border","boxShadow","clipPath","color","perspectiveOrigin","transformOrigin","transformStyle","perspective","mixBlendMode","overflow","opacity","box-model","layout","flex-layout","grid-layout","animation","transition","pattern","boolean-operation"],xb={};Gj.forEach(function(n){xb[n]=!0});class Hj extends Bj{getDefaultObject(e={}){return super.getDefaultObject(P({rootVariable:"",variable:"",color:"black",overflow:"visible",opacity:1,pattern:"",selectors:[],svg:[],gridColumnStart:"",gridColumnEnd:"",gridRowStart:"",gridRowEnd:"",gridColumnGap:"",gridRowGap:""},e))}get gridColumnStart(){return this.get("gridColumnStart")}set gridColumnStart(e){this.set("gridColumnStart",e)}get gridColumnEnd(){return this.get("gridColumnEnd")}set gridColumnEnd(e){this.set("gridColumnEnd",e)}get gridRowStart(){return this.get("gridRowStart")}set gridRowStart(e){this.set("gridRowStart",e)}get gridRowEnd(){return this.get("gridRowEnd")}set gridRowEnd(e){this.set("gridRowEnd",e)}get gridColumnGap(){return this.get("gridColumnGap")}set gridColumnGap(e){this.set("gridColumnGap",e)}get gridRowGap(){return this.get("gridRowGap")}set gridRowGap(e){this.set("gridRowGap",e)}get pattern(){return this.get("pattern")}set pattern(e){this.reset({pattern:e})}get selectors(){return this.get("selectors")}set selectors(e){this.reset({selectors:e})}get svg(){return this.get("svg")}set svg(e){this.reset({svg:e})}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.reset({rootVariable:e})}get variable(){return this.get("variable")}set variable(e){this.reset({variable:e})}get filter(){return this.get("filter")}set filter(e){this.reset({filter:e})}get backdropFilter(){return this.get("backdropFilter")}set backdropFilter(e){this.reset({backdropFilter:e})}get backgroundColor(){return this.get("backgroundColor")}set backgroundColor(e){this.reset({backgroundColor:e})}get backgroundImage(){return this.get("backgroundImage")}set backgroundImage(e){this.reset({backgroundImage:e})}get textClip(){return this.get("textClip")}set textClip(e){this.reset({textClip:e})}get borderRadius(){return this.get("borderRadius")}set borderRadius(e){this.reset({borderRadius:e})}get border(){return this.get("border")}set border(e){this.reset({border:e})}get boxShadow(){return this.get("boxShadow")}set boxShadow(e){this.reset({boxShadow:e})}get textShadow(){return this.get("textShadow")}set textShadow(e){this.reset({textShadow:e})}get clipPath(){return this.get("clipPath")}set clipPath(e){this.reset({clipPath:e})}get color(){return this.get("color")}set color(e){this.reset({color:e})}get opacity(){return this.get("opacity")}set opacity(e){this.reset({opacity:e})}get transformStyle(){return this.get("transformStyle")}set transformStyle(e){this.reset({transformStyle:e})}get fontSize(){return this.get("fontSize")}set fontSize(e){this.reset({fontSize:e})}get fontFamily(){return this.get("fontFamily")}set fontFamily(e){this.reset({fontFamily:e})}get fontWeight(){return this.get("fontWeight")}set fontWeight(e){this.reset({fontWeight:e})}get fontStyle(){return this.get("fontStyle")}set fontStyle(e){this.reset({fontStyle:e})}get fontVariant(){return this.get("fontVariant")}set fontVariant(e){this.reset({fontVariant:e})}get fontStretch(){return this.get("fontStretch")}set fontStretch(e){this.reset({fontStretch:e})}get lineHeight(){return this.get("lineHeight")}set lineHeight(e){this.reset({lineHeight:e})}get letterSpacing(){return this.get("letterSpacing")}set letterSpacing(e){this.reset({letterSpacing:e})}get wordSpacing(){return this.get("wordSpacing")}set wordSpacing(e){this.reset({wordSpacing:e})}get textDecoration(){return this.get("textDecoration")}set textDecoration(e){this.reset({textDecoration:e})}get textAlign(){return this.get("textAlign")}set textAlign(e){this.reset({textAlign:e})}get textTransform(){return this.get("textTransform")}set textTransform(e){this.reset({textTransform:e})}get textOverflow(){return this.get("text-overflow")}set textOverflow(e){this.reset({"text-overflow":e})}get textIndent(){return this.get("textIndent")}set textIndent(e){this.reset({textIndent:e})}get mixBlendMode(){return this.get("mixBlendMode")}set mixBlendMode(e){this.reset({mixBlendMode:e})}get visibility(){return this.get("visibility")}set visibility(e){this.reset({visibility:e})}get zIndex(){return this.get("z-index")}set zIndex(e){this.reset({"z-index":e})}get overflow(){return this.get("overflow")}set overflow(e){this.reset({overflow:e})}get animation(){return this.get("animation")}set animation(e){this.reset({animation:e})}get transition(){return this.get("transition")}set transition(e){this.reset({transition:e})}get marginTop(){return this.get("marginTop")}set marginTop(e){this.reset({marginTop:e})}get marginRight(){return this.get("marginRight")}set marginRight(e){this.reset({marginRight:e})}get marginBottom(){return this.get("marginBottom")}set marginBottom(e){this.reset({marginBottom:e})}get marginLeft(){return this.get("marginLeft")}set marginLeft(e){this.reset({marginLeft:e})}get paddingTop(){return this.get("paddingTop")}set paddingTop(e){this.reset({paddingTop:e})}get paddingRight(){return this.get("paddingRight")}set paddingRight(e){this.reset({paddingRight:e})}get paddingBottom(){return this.get("paddingBottom")}set paddingBottom(e){this.reset({paddingBottom:e})}get paddingLeft(){return this.get("paddingLeft")}set paddingLeft(e){this.reset({paddingLeft:e})}editable(e){switch(e){case"svg-item":case"transformOrigin":case"perspective":case"perspectiveOrigin":return!1}return Boolean(xb[e])}get changedBoxModel(){return this.hasChangedField("marginTop","marginLeft","marginBottom","marginRight","paddingTop","paddingLeft","paddingRight","paddingBottom")}get changedFlexLayout(){return this.hasChangedField("flexDirection","flexWrap","justifyContent","alignItems","alignContent","order","flexBasis","flexGrow","flexShrink","flexFlow")}get changedGridLayout(){return this.hasChangedField("gridTemplateRows","gridTemplateColumns","gridTemplateAreas","gridAutoRows","gridAutoColumns","gridAutoFlow","gridRowGap","gridColumnGap","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","gridArea")}get changedLayoutItem(){return this.hasChangedField("resizingHorizontal","resizingVertical")}get changedLayout(){return this.hasChangedField("layout")||this.changedBoxModel||this.changedFlexLayout||this.changedGridLayout||this.changedLayoutItem}addSelector(e){return this.selectors.push(e),e}createSelector(e={}){return this.addSelector(new yp(P({checked:!0},e)))}removePropertyList(e,t){e.splice(t,1)}removeSelector(e){this.removePropertyList(this.selectors,e)}enableHasChildren(){return!0}sortItem(e,t,i){e.splice(i+(t{this.traverse(r,t)}))}tree(e){var t=[];return this.children.forEach(i=>{this.traverse(i,t,e)}),t}convert(e){return e=super.convert(e),e.padding&&(e.paddingTop=y.parse(e.padding),e.paddingRight=y.parse(e.padding),e.paddingBottom=y.parse(e.padding),e.paddingLeft=y.parse(e.padding),delete e.padding),e}reset(e,t={origin:"*"}){const i=super.reset(e,t);if(this.hasChangedField("clipPath")&&this.setClipPathCache(),this.hasChangedField("width","height")&&this.cacheClipPath){const r=this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d;this.clipPath=`path(${r})`,this.modelManager.setChanged("reset",this.id,{clipPath:this.clipPath})}return this.hasChangedField("backgroundImage","pattern")&&this.setBackgroundImageCache(),i}setBackgroundImageCache(){let e=[];if(this.pattern){const r=this.computed("pattern",s=>Wr.parseStyle(s).map(a=>Rt.parseStyle(rn(a.toCSS()))));for(var t=0,i=r.length;tRt.parseStyle(rn(s)));e.push.apply(e,r.filter(s=>s.visibility!==Dn.HIDDEN))}if(e.length){const r=this.top;this.cacheBackgroundImage=Rt.joinCSS(e);const s=e.filter(o=>o.type===de.URL).map(o=>o.image.url);let a=this.cacheBackgroundImage["background-image"];s.forEach(o=>{const l=r.getImageValueById(o);a=a.replace(o,`"${l}"`)}),this.cacheBackgroundImage["background-image"]=a}else this.cacheBackgroundImage={},this.cacheBackgroundImageOriginal=[]}setClipPathCache(){var e=mt.parseStyle(this.clipPath);this.cacheClipPathObject=e,e.type==="path"&&(this.cacheClipPath=new be(e.value.trim()),this.cacheClipPathWidth=this.width,this.cacheClipPathHeight=this.height)}setCache(){super.setCache(),this.setClipPathCache()}get clipPathString(){if(this.cacheClipPath||this.setClipPathCache(),this.cacheClipPath)return this.cacheClipPath.clone().scale(this.width/this.cacheClipPathWidth,this.height/this.cacheClipPathHeight).d}getBackgroundImage(e){return Rt.parseStyle(rn(this.backgroundImage))[e||0]}get borderWidth(){const e=_a.parseStyle(this.border),t=_a.parseValue(e.border);return t!=null&&t.width?{borderLeftWidth:t==null?void 0:t.width,borderRightWidth:t==null?void 0:t.width,borderTopWidth:t==null?void 0:t.width,borderBottomWidth:t==null?void 0:t.width}:{borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}}get contentBox(){const i=this.screenWidth,r=this.screenHeight;{const s=this.borderWidth;return{x:0+s.borderLeftWidth,y:0+s.borderTopWidth,width:i-s.borderLeftWidth-s.borderRightWidth,height:r-s.borderTopWidth-s.borderBottomWidth}}}getGradientLineLength(e,t,i){return Math.abs(e*Math.sin(or(i)))+Math.abs(t*Math.cos(or(i)))}createBackgroundImageMatrix(e){const t=this.contentBox,i=this.getBackgroundImage(e),{image:r}=i,s=i.getOffset(t),a=He(wi(s.x,s.y,s.width,s.height),this.absoluteMatrix),o={backRect:s,backVerties:a,absoluteMatrix:this.absoluteMatrix,backgroundImage:i};switch(r.type){case de.RADIAL:case de.REPEATING_RADIAL:case de.CONIC:case de.REPEATING_CONIC:let[l,c]=r.radialPosition;l=="center"&&(l=y.percent(50)),c=="center"&&(c=y.percent(50));const h=l.toPx(s.width),d=c.toPx(s.height),u=He([[h.value+s.x,d.value+s.y,0],[h.value+s.x,d.value+s.y-1,0]],this.absoluteMatrix);if(o.radialCenterPosition=u[0],o.radialCenterStick=u[1],o.radialCenterPoint=[h.value,d.value,0],r.type===de.RADIAL||r.type===de.REPEATING_RADIAL){const{startPoint:S,endPoint:C,shapePoint:k}=r.getStartEndPoint(o),[O,q,X]=He([S,C,k],this.absoluteMatrix);o.radialCenterPosition=O,o.startPoint=O,o.endPoint=q,o.shapePoint=X,o.colorsteps=r.colorsteps.map(T=>{const z=T.toLength();return{id:T.id,cut:T.cut,color:T.color,timing:T.timing,timingCount:T.timingCount,pos:Re([],o.startPoint,o.endPoint,z.value/100)}})}else if(r.type===de.CONIC||r.type===de.REPEATING_CONIC){const{startPoint:S,endPoint:C,shapePoint:k}=r.getStartEndPoint(o),[O,q,X]=He([S,C,k],this.absoluteMatrix);o.radialCenterPosition=O,o.startPoint=O,o.endPoint=q,o.shapePoint=X,[o.startPoint,o.endPoint,o.shapePoint]=He([o.startPoint,o.endPoint,o.shapePoint],cr(r.angle,o.radialCenterPosition));const T=o.shapePoint;o.colorsteps=r.colorsteps.map(z=>{const ae=z.percent*3.6,[j]=He([T],cr(ae,o.radialCenterPosition));return{id:z.id,cut:z.cut,color:z.color,timing:z.timing,timingCount:z.timingCount,pos:j}})}break;case de.LINEAR:case de.REPEATING_LINEAR:o.gradientLineLength=this.getGradientLineLength(s.width,s.height,r.angle),o.centerPosition=Re([],a[0],a[2],.5);const p=bt([],o.centerPosition,[0,o.gradientLineLength/2,0]),f=vt([],o.centerPosition,[0,o.gradientLineLength/2,0]),g=yr(p),m=yr(f),[v,x,_,b]=He([p,f,g,m],cr(r.angle,o.centerPosition));o.endPoint=x,o.startPoint=v,o.areaStartPoint=_,o.areaEndPoint=b,o.colorsteps=r.colorsteps.map(S=>{const C=S.toLength();return{id:S.id,cut:S.cut,color:S.color,timing:S.timing,timingCount:S.timingCount,pos:Re([],o.startPoint,o.endPoint,C.value/100)}});break}return o}}class ka extends Hj{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"layer",name:"New Layer",tagName:"div"},e))}getDefaultTitle(){return"Layer"}}class Uj extends ka{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"artboard",name:"New ArtBoard",width:1e3,height:1e3,backgroundColor:"white",transformStyle:"flat"},e))}getDefaultTitle(){return"ArtBoard"}getIcon(){return Ue.artboard}editable(e){switch(e){case"border":case"borderRadius":return!1;case"artboardSize":case"layout":return!0}return super.editable(e)}}const Wj=["jpg","jpeg","png","gif","svg"];class Zc extends um{getDefaultObject(e={}){return super.getDefaultObject(P({type:"url",url:"",datauri:"",patternUnits:"userSpaceOnUse",patternWidth:"100%",patternHeight:"100%",imageX:"0%",imageY:"0%",imageWidth:"100%",imageHeight:"100%"},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("url","datauri","patternUnits","patternWidth","patternHeight","imageX","imageY","imageWidth","imageHeight"))}static parse(e){var t=e.split("(")[1].split(")")[0],[i,r]=t.trim().split("#");if(!r)return new Zc({url:i});var[s,a,o,l,c,h,d]=r.split(",");return new Zc({patternUnits:s,patternWidth:a,patternHeight:o,imageX:l,imageY:c,imageWidth:h,imageHeight:d,url:i})}isUrl(){return!0}static isImageFile(e){return Wj.includes(e)}toString(){var e=this.json,{patternUnits:t,patternWidth:i,patternHeight:r,imageX:s,imageY:a,imageWidth:o,imageHeight:l,url:c}=e,h=[t,i,r,s,a,o,l].join(",").trim();return`url(${c}#${h})`}toSVGString(e,t={}){var{patternUnits:i,patternWidth:r,patternHeight:s,imageX:a,imageY:o,imageWidth:l,imageHeight:c}=this.json;const h=y.parse(r),d=y.parse(s),u=y.parse(a),p=y.parse(o),f=y.parse(l),g=y.parse(c),m=t.width?h.toPx(t.width).value:h,v=t.height?d.toPx(t.height).value:d;return` - - - - `}toFillValue(e){return`url(#${e})`}}class ym extends Yr{toString(){return""}toSVGString(){return""}toFillValue(){return""}}const h0=[tn.PAD,tn.REFLECT,tn.REPEAT];class fo extends ym{convert(e){return e.spreadMethod=h0.includes(e.spreadMethod)?e.spreadMethod:tn.PAD,e}getDefaultObject(e){return super.getDefaultObject(P({type:de.LINEAR,x1:y.parse("0%"),y1:y.parse("50%"),x2:y.parse("100%"),y2:y.parse("50%"),spreadMethod:tn.PAD},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("x1","y1","x2","y2","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{x1:t,y1:i,x2:r,y2:s,spreadMethod:a}=this.json,o=[t,i,r,s,a].join(" "),l=`${this.json.type}(${o}, ${e})`;return l}toSVGString(e){var{x1:t,y1:i,x2:r,y2:s,spreadMethod:a}=this.json;return` - - ${fo.makeColorStepList(this.colorsteps).map(o=>` - - `).join("")} - - `}toFillValue(e){return`url(#${e})`}static parse(e){const t=hr(e);var i={};const[r,...s]=t.parameters,a=[];r.forEach(u=>{u.func===Ht.KEYWORD?h0.includes(u.matchedString)&&(i.spreadMethod=u.matchedString):a.push(u)});var[o=y.percent(0),l=y.percent(50),c=y.percent(100),h=y.percent(50)]=a.map(u=>u.parsed);i=ze(P({},i),{x1:o,y1:l,x2:c,y2:h});const d=fo.parseColorSteps(s);return new fo(ze(P({},i),{colorsteps:d}))}}const Xj=[Li.CIRCLE,Li.ELLIPSE],d0=[tn.PAD,tn.REFLECT,tn.REPEAT];class go extends ym{convert(e){return e.spreadMethod=d0.includes(e.spreadMethod)?e.spreadMethod:tn.PAD,e}getDefaultObject(e={}){return super.getDefaultObject(P({type:de.RADIAL,radialType:Li.CIRCLE,x1:y.parse("50%"),y1:y.parse("50%"),x2:y.parse("100%"),y2:y.parse("50%"),x3:y.parse("50%"),y3:y.parse("100%"),spreadMethod:tn.PAD},e))}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("radialType","x1","y1","x2","y2","x3","y3","spreadMethod"))}toString(){if(this.colorsteps.length===0)return"";var e=this.getColorString(),{radialType:t,x1:i,y1:r,x2:s,y2:a,x3:o,y3:l,spreadMethod:c}=this.json,h=[t,i,r,s,a,o,l,c].join(" ").trim(),d=`${this.json.type}(${h}, ${e})`;return d}getGradientAngle(e={}){var{x1:t,y1:i,x2:r,y2:s}=this.json;const a=t.toPx(e.width),o=i.toPx(e.height),l=r.toPx(e.width),c=s.toPx(e.height);return(si(l.value-a.value,c.value-o.value)+180)%360}toSVGString(e,t={}){var{x1:i,y1:r,x2:s,y2:a,x3:o,y3:l,spreadMethod:c,radialType:h}=this.json;const d=i.toPx(t.width),u=r.toPx(t.height),p=s.toPx(t.width),f=a.toPx(t.height);var g=Fe([d.value,u.value,0],[p.value,f.value,0]),m=this.getGradientAngle(t);const v=ex();if(Gp(v,v,I2([],[d.value,u.value])),Gp(v,v,L2([],or(m))),h===Li.ELLIPSE){const b=o.toPx(t.width),S=l.toPx(t.height);var x=Fe([d.value,u.value,0],[b.value,S.value,0]);Gp(v,v,k2([],[1,x/g]))}const _=`matrix(${v[0]}, ${v[1]}, ${v[3]}, ${v[4]}, ${v[6]}, ${v[7]})`;return` - - ${go.makeColorStepList(this.colorsteps).map(b=>` - - `).join("")} - -`}toFillValue(e){return`url(#${e})`}static parse(e){const t=hr(e);var i={};const[r,...s]=t.parameters,a=[];r.forEach(f=>{f.func===Ht.KEYWORD?Xj.includes(f.matchedString)?i.radialType=f.matchedString:d0.includes(f.matchedString)&&(i.spreadMethod=f.matchedString):a.push(f)});var[o=y.percent(50),l=y.percent(50),c=y.percent(100),h=y.percent(50),d=y.percent(50),u=y.percent(100)]=a.map(f=>f.parsed);i=ze(P({},i),{x1:o,y1:l,x2:c,y2:h,x3:d,y3:u});const p=go.parseColorSteps(s);return new go(ze(P({},i),{colorsteps:p}))}}class da extends ym{getDefaultObject(){return super.getDefaultObject({type:"static-gradient",colorsteps:[new ei({color:"red",percent:0,index:0}),new ei({color:"red",percent:100,index:1})]})}toCloneObject(){return ze(P({},super.toCloneObject()),{static:!0})}static create(e="transparent"){return new da({colorsteps:[new ei({color:e,percent:0,index:0}),new ei({color:e,percent:100,index:0})]})}setColor(e){this.colorsteps.forEach(t=>{t.color=e})}toString(){var e=this.json.colorsteps[0].color;return e}toSVGString(){return""}toFillValue(){return this.toString()}}class ii extends Vr{addImageResource(e){return this.clear("image-resource"),this.addItem("image-resource",e)}addGradient(e){return this.addImageResource(e)}setImageUrl(e){!e.images||!e.images.length||this.reset({type:"image",image:ii.createImage(e.images[0])})}static createImage(e){return new SVGLImageResource({url:e})}setGradient(e){this.reset({type:e.type,image:ii.createGradient(e,this.json.image)})}static createGradient(e,t){const i=e.colorsteps||t.colorsteps;let r=t.toJSON();switch(delete r.itemType,delete r.type,e.type){case de.LINEAR:return new fo(ze(P({},r),{colorsteps:i}));case de.RADIAL:return new go(ze(P({},r),{colorsteps:i}));default:return new da(ze(P({},r),{colorsteps:i}))}}get image(){return this.json.image}set image(e){this.json.image=e}static parse(e){return new ii(e)}static parseImage(e=""){const t=hr(e);let i=null;if(!t)return da.create(e||"transparent");switch(t.func){case de.LINEAR:i=fo.parse(t.matchedString);break;case de.RADIAL:i=go.parse(t.matchedString);break;case de.URL:i=Zc.parse(t.matchedString);break;default:i=da.create(t.matchedString);break}return i}static changeImageType(e){switch(e.type){case de.LINEAR:return new fo(e);case de.RADIAL:return new go(e);case"image-resource":case de.URL:return new Zc(e);default:return new da(e)}}}const Yj=["appearance","border","borderRadius","backgroundImage","backdropFilter","clipPath","pattern","boxShadow","layout","transform","transformOrigin","perspective","perspectiveOrigin","backdropFilter","boxModel"],bb={};Yj.forEach(n=>{bb[n]=!0});class Jl extends ka{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svg",name:"New SVG",elementType:"svg",overflow:"visible",stroke:"black",strokeWidth:1,fill:"transparent",fillOpacity:1,fillRule:"nonzero",textAnchor:"start",strokeLinecap:"",strokeLinejoin:"",strokeDasharray:[],strokeDashoffset:0},e))}get stroke(){return this.get("stroke")}set stroke(e){this.set("stroke",e)}get strokeWidth(){return this.get("strokeWidth")}set strokeWidth(e){this.set("strokeWidth",e)}get fill(){return this.get("fill")}set fill(e){this.set("fill",e)}get fillOpacity(){return this.get("fillOpacity")}set fillOpacity(e){this.set("fillOpacity",e)}get fillRule(){return this.get("fillRule")}set fillRule(e){this.set("fillRule",e)}get textAnchor(){return this.get("textAnchor")}set textAnchor(e){this.set("textAnchor",e)}get strokeDasharray(){return this.get("strokeDasharray")}set strokeDasharray(e){this.set("strokeDasharray",e)}get strokeDashoffset(){return this.get("strokeDashoffset")}set strokeDashoffset(e){this.set("strokeDashoffset",e)}get strokeLinejoin(){return this.get("strokeLinejoin")}set strokeLinejoin(e){this.set("strokeLinejoin",e)}get strokeLinecap(){return this.get("strokeLinecap")}set strokeLinecap(e){this.set("strokeLinecap",e)}get isDragSelectable(){return this.isBooleanItem===!1}get isBooleanItem(){return Boolean(this.parent.is("boolean-path"))}editable(e){if(bb[e])return!1;switch(e){case"svg-item":return!0}return super.editable(e)}getDefaultTitle(){return"SVG"}isSVG(){return!0}hasPoint(e,t){const i=this.fill,r=this.fillOpacity,s=this.strokeWidth,a=i==="transparent"||r===0||Si(i).a===0,o=s===0;return a?this.isPointInStroke(e,t):!a&&!o?this.isPointInStroke(e,t)||this.isPointInFill(e,t):!a&&o?this.isPointInFill(e,t):!1}isPointInFill(e,t){const i=this.getCache("svgElement"),r=this.getCache("pathElement");if(r){const[s,a]=this.invertPoint([e,t,0]),o=i.createSVGPoint();return Object.assign(o,{x:s,y:a}),r.isPointInFill(o)}return!1}isPointInStroke(e,t){const i=this.getCache("svgElement"),r=this.getCache("pathElement");if(r){const[s,a]=this.invertPoint([e,t,0]),o=i.createSVGPoint();return Object.assign(o,{x:s,y:a}),r.isPointInStroke(o)}return!1}convertStrokeToPath(e=10,t=10){const i=this.attrs("name","width","parentId","height","x","y","transform","stroke");return i.fill=i.stroke,delete i.stroke,ze(P({itemType:"svg-path","fill-rule":"evenodd"},i),{x:y.parse(i.x).add(e),y:y.parse(i.y).add(t)})}toSVGPath(){const e=this.toCloneObject();return delete e.id,delete e.itemType,ze(P({},e),{d:this.d})}createFragmentMatrix(e){const t=this.get(e),i=ii.parseImage(t),r={x:0,y:0,width:this.screenWidth,height:this.screenHeight},s=He(wi(r.x,r.y,r.width,r.height),this.absoluteMatrix),a={backRect:r,backVerties:s,absoluteMatrix:this.absoluteMatrix,image:i};let o,l,c,h,d,u;switch(i.type){case de.RADIAL:o=i.x1.toPx(r.width),l=i.y1.toPx(r.height),c=i.x2.toPx(r.width),h=i.y2.toPx(r.height),d=i.x3.toPx(r.width),u=i.y3.toPx(r.height);const m=[o.value,l.value,0],v=[c.value,h.value,0],x=[d.value,u.value,0];var[f,g,p]=He([m,v,x],this.absoluteMatrix);a.endPoint=g,a.startPoint=f,a.shapePoint=p,a.colorsteps=i.colorsteps.map(_=>{const b=_.toLength();return{id:_.id,cut:_.cut,color:_.color,timing:_.timing,timingCount:_.timingCount,pos:Re([],a.startPoint,a.endPoint,b.value/100)}});break;case de.LINEAR:o=i.x1.toPx(r.width),l=i.y1.toPx(r.height),c=i.x2.toPx(r.width),h=i.y2.toPx(r.height);var[f,g]=He([[o.value,l.value,0],[c.value,h.value,0]],this.absoluteMatrix);a.endPoint=g,a.startPoint=f,a.areaStartPoint=yr(f),a.areaEndPoint=yr(g),a.colorsteps=i.colorsteps.map(_=>{const b=_.toLength();return{id:_.id,cut:_.cut,color:_.color,timing:_.timing,timingCount:_.timingCount,pos:Re([],a.startPoint,a.endPoint,b.value/100)}});break}return a}}class _b extends Jl{getIcon(){return Ue.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svg-path",name:"New Path",strokeWidth:1,d:"",totalLength:0},e))}enableHasChildren(){return!1}reset(e,t={origin:"*"}){const i=super.reset(e,t);return this.hasChangedField("d")&&(this.cachePath=new be(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height),i}refreshMatrixCache(){super.refreshMatrixCache(),this.hasChangedField("d")?(this.addCache("pathString",new be(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)):this.hasChangedField("width","height")&&(this.d=this.getCache("pathString").clone().scale(this.width/this.cacheWidth,this.height/this.cacheHeight).d,this.manager.setChanged("reset",this.id,{d:this.d}))}setCache(){super.setCache(),this.addCache("pathString",new be(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)}get d(){return this.get("d")?(this.hasCache("pathString")||(this.addCache("pathString",new be(this.get("d"))),this.addCache("pathWidth",this.width),this.addCache("pathHeight",this.height)),this.getCache("pathString").clone().scale(this.width/this.getCache("pathWidth"),this.height/this.getCache("pathHeight")).d):null}set d(e){this.set("d",e)}getDefaultTitle(){return"Path"}}class Kj extends _b{getIcon(){return Ue.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"boolean-path",name:"New Boolean Path",strokeWidth:1,d:"",booleanOperation:"none"},e))}get booleanOperation(){return this.get("booleanOperation")}set booleanOperation(e){this.set("booleanOperation",e)}enableHasChildren(){return!0}reset(e,t={origin:"*"}){var r;const i=super.reset(e,t);if(this.cachePath||this.setCache(),this.hasChangedField("changedChildren","booleanOperation")){if(this.children.length===1){const s=this.layers[0].absolutePath().d;this.d=this.invertPath(s).d,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:s})}else if(this.booleanOperation!=="none"&&((r=this.children)==null?void 0:r.length)>=2&&this.modelManager.editor.pathKitManager.has())if(this.layers.filter(a=>a.d).length>=2){const a=this.doBooleanOperation();this.d=a,this.setCache(),this.modelManager.setChanged("reset",this.id,{d:a})}else this.d=void 0,this.removeCache(),this.modelManager.setChanged("reset",this.id,{d:void 0})}return i}get resizableWitChildren(){return!0}startToCacheChildren(){this.cachedSize={width:this.width,height:this.height},this.cachedLayerMatrix=this.layers.map(e=>(e.startToCacheChildren(),{item:e,matrix:e.matrix}))}recoverChildren(){const e={width:this.width,height:this.height},t=e.width/this.cachedSize.width,i=e.height/this.cachedSize.height;this.cachedLayerMatrix.forEach(({item:r,matrix:s})=>{r.reset({x:r.x.changeUnitValue(s.x*t,e.width),y:r.y.changeUnitValue(s.y*i,e.height),width:r.width.changeUnitValue(s.width*t,e.width),height:r.height.changeUnitValue(s.height*i,e.height)}),r.recoverChildren()})}getFieldValueByBooleanOperation(e){const t=this.layers;if(t.length===0)return;if(t.length===1)return t[0][e];switch(this.booleanOperation){case ns.DIFFERENCE:return t[1][e]}return t[0][e]}get fill(){return this.getFieldValueByBooleanOperation("fill")}get stroke(){return this.getFieldValueByBooleanOperation("stroke")}setCache(){super.setCache(),this.cachePath=new be(this.d),this.cacheWidth=this.width,this.cacheHeight=this.height}removeCache(){super.removeCache(),this.cachePath=void 0,this.cacheWidth=void 0,this.cacheHeight=void 0}getDefaultTitle(){return"Path"}doBooleanOperation(){switch(this.booleanOperation){case ns.INTERSECTION:return this.intersection();case ns.UNION:return this.union();case ns.DIFFERENCE:return this.difference();case ns.REVERSE_DIFFERENCE:return this.reverseDifference();case ns.XOR:return this.xor()}return""}getPathList(){return this.layers.map(e=>e.absolutePath().d)}intersection(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.intersection(r,s),e);return this.invertPath(i).d}union(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.union(r,s),e);return this.invertPath(i).d}difference(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.difference(r,s),e);return this.invertPath(i).d}reverseDifference(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.reverseDifference(r,s),e);return this.invertPath(i).d}xor(){const[e,...t]=this.getPathList(),i=t.reduce((r,s)=>this.modelManager.editor.pathKitManager.xor(r,s),e);return this.invertPath(i).d}}class qj extends ka{getIcon(){return Ue.lens}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"circle",name:"New Circle",borderRadius:"100%"},e))}getDefaultTitle(){return"Circle"}}class Zj extends ka{getIcon(){return Ue.image}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"image",name:"New Image",elementType:"image",src:""},e))}get src(){return this.get("src")}set src(e){this.set("src",e)}get naturalWidth(){return this.get("naturalWidth")}set naturalWidth(e){this.set("naturalWidth",e)}get naturalHeight(){return this.get("naturalHeight")}set naturalHeight(e){this.set("naturalHeight",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Image"}resize(){this.reset({width:this.naturalWidth.clone(),height:this.naturalHeight.clone()})}}class Jj extends Jl{getIcon(){return Ue.edit}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"polygon",name:"New Polygon",strokeWidth:1,count:3},e))}get count(){return this.get("count")}set count(e){this.set("count",e)}convert(e){return e=super.convert(e),e.count&&(e.count=+e.count),e}enableHasChildren(){return!1}get editablePath(){return!1}get d(){const{width:e,height:t,count:i}=this;return be.makePolygon(e,t,i).d}getDefaultTitle(){return"Polygon"}isPointInPath(e){const t=Wt([],e,this.absoluteMatrixInverse);return this.cachePath.isPointInPath({x:t[0],y:t[1]},this.strokeWidth||0)}}function fi(n,e,t){return()=>t}function li(n,e,t,i,r=void 0){return(s,a)=>{var o=0;return a===0?o=t:a===1?o=i:o=t+(i-t)*s,r?o+r:o}}function u0(n,e,t,i="width",r="parent"){var s=null;return r==="parent"?s=n[r][i]:r==="self"&&(s=n[i]),s?t.toPx(s.value):t}function Qj(n,e,t,i,r="width",s="parent"){var a=null;return s==="parent"?a=n[s][r]:s==="self"&&(a=n[r]),a?t.to(i,a.value):t}function Yt(n,e,t,i,r="width",s="parent"){var a=y.parse(t),o=y.parse(i);return a.unit===o.unit?li(n,e,a.value,o.value,a.unit):a.equals(o)?fi(n,e,a):(l,c)=>{var h=u0(n,e,a,r,s),d=u0(n,e,o,r,s);return c===0?h:c===1?d:Qj(n,e,h.value+(d.value-h.value)*l,a.unit,r,s)}}function xr(n,e,t,i){return(r,s)=>s===1?i:t}function Uh(n,e,t,i){var r=Si(t||"rgba(0, 0, 0, 1)"),s=Si(i||"rgba(0, 0, 0, 1)");return(a,o)=>o===0?t:o===1?i:Ox(r,s,a,"rgb")}function mo(n,e,t,i){return xr(n,e,t,i)}function e7(n,e,t,i){var r={cut:xr(n,e,t.cut,i.cut),percent:li(n,e,t.percent,i.percent),px:li(n,e,t.px,i.px),em:li(n,e,t.em,i.em),unit:mo(n,e,t.unit,i.unit),color:Uh(n,e,t.color,i.color)};return(s,a)=>new ei({cut:r.cut(s,a),percent:r.percent(s,a),px:r.px(s,a),em:r.em(s,a),unit:r.unit(s,a),color:r.color(s,a)})}function xm(n,e,t=[],i=[]){for(var r=Math.max(t.length,i.length),s=[],a=0;as.map(d=>d(c,h))}function Sb(n,e,t,i){var r={angle:li(n,e,t.angle,i.angle),radialPositionX:Yt(n,e,t.radialPosition[0],i.radialPosition[0],"width","self"),radialPositionY:Yt(n,e,t.radialPosition[1],i.radialPosition[1],"height","self"),colorsteps:xm(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>new Bn({angle:r.angle(s,a),radialPosition:[r.radialPositionX(s,a),r.radialPositionY(s,a)],colorsteps:r.colorsteps(s,a)})}function wb(n,e,t,i){var r={angle:li(n,e,t.angle,i.angle),colorsteps:xm(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>{var o=r.colorsteps(s,a);return new Gn({angle:r.angle(s,a),colorsteps:o})}}function Sd(n,e){switch(e){case"width":if(n==="center")return"50%";if(n==="left")return"0%";if(n==="right")return"100%";break;case"height":if(n==="center")return"50%";if(n==="top")return"0%";if(n==="bottom")return"100%";break}return n}function Mb(n,e,t,i){t.radialPosition[0]=Sd(t.radialPosition[0],"width"),t.radialPosition[1]=Sd(t.radialPosition[1],"height"),i.radialPosition[0]=Sd(i.radialPosition[0],"width"),i.radialPosition[1]=Sd(i.radialPosition[1],"height");var r={radialType:mo(n,e,t.radialType,i.radialType),radialPositionX:Yt(n,e,t.radialPosition[0],i.radialPosition[0],"width","self"),radialPositionY:Yt(n,e,t.radialPosition[1],i.radialPosition[1],"height","self"),colorsteps:xm(n,e,t.colorsteps,i.colorsteps)};return(s,a)=>{var o=new Hn({radialType:r.radialType(s,a),radialPosition:[r.radialPositionX(s,a),r.radialPositionY(s,a)],colorsteps:r.colorsteps(s,a)});return o}}function t7(n,e,t,i){var r=Sb(n,e,t,i);return(s,a)=>{var o=r(s,a);return new io({angle:o.angle,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function i7(n,e,t,i){var r=wb(n,e,t,i);return(s,a)=>{var o=r(s,a),l=new ro({angle:o.angle,colorsteps:o.colorsteps});return l}}function r7(n,e,t,i){var r=Mb(n,e,t,i);return(s,a)=>{var o=r(s,a);return new no({radialType:o.radialType,radialPosition:o.radialPosition,colorsteps:o.colorsteps})}}function n7(n,e,t,i){var r={image:(s,a)=>a};if(t.type==="url"||i.type==="url")r.image=xr(n,e,t,i);else if(t.type!=i.type)r.image=xr(n,e,t,i);else switch(t.type){case"linear-gradient":r.image=wb(n,e,t,i);break;case"repeating-linear-gradient":r.image=i7(n,e,t,i);break;case"radial-gradient":r.image=Mb(n,e,t,i);break;case"repeating-radial-gradient":r.image=r7(n,e,t,i);break;case"conic-gradient":r.image=Sb(n,e,t,i);break;case"repeating-conic-gradient":r.image=t7(n,e,t,i);break}return(s,a)=>r.image(s,a)}function s7(n,e,t,i){for(var r=Rt.parseStyle(rn(t)),s=Rt.parseStyle(rn(i)),a=Math.max(r.length,s.length),o=[],l=0,c=a;lRt.join(o.map(f=>{var g={image:f.image(u,p),size:f.size(u,p),x:f.x(u,p),y:f.y(u,p),width:f.width(u,p),height:f.height(u,p),blendMode:f.blendMode(u,p),repeat:f.repeat(u,p)};return g}))}const p0=n=>{var e=[];return n.isAll?e=[n["border-radius"]||"0px",n["border-radius"]||"0px",n["border-radius"]||"0px",n["border-radius"]||"0px"]:e=[n["border-top-left-radius"]||"0px",n["border-top-right-radius"]||"0px",n["border-bottom-right-radius"]||"0px",n["border-bottom-left-radius"]||"0px"],e};function a7(n,e,t,i){for(var r=p0(Cg.parseStyle(t)),s=p0(Cg.parseStyle(i)),a=Math.max(r.length,s.length),o=[],l=0;lo.map(d=>d(c,h)).join(" ")}function o7(n,e,t,i){for(var r=pn.parseStyle(t),s=pn.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;lpn.join(o.map(f=>({inset:f.inset(u,p),offsetX:f.offsetX(u,p),offsetY:f.offsetY(u,p),blurRadius:f.blurRadius(u,p),spreadRadius:f.spreadRadius(u,p),color:f.color(u,p)})))}function l7(n,e,t,i){var r={};return t.radius==="closest-side"||t.radius==="farthest-side"||i.radius==="closest-side"||i.radius==="farthest-side"?r.radius=xr(n,e,t.radius,i.radius):t.radius.unit===i.radius.unit?r.radius=li(n,e,t.radius.value,i.radius.value,t.radius.unit):r.radius=Yt(n,e,t.radius,i.radius,"width","self"),r.x=Yt(n,e,t.x,i.x,"width","self"),r.y=Yt(n,e,t.y,i.y,"height","self"),(s,a)=>{var o=r.radius(s,a),l=r.x(s,a),c=r.y(s,a),h=`${l} ${c}`,d=o+"";return d.includes("closest-side")?d="closest-side":d.includes("farthest-side")&&(d="farthest-side"),o?`${d} at ${h}`:`${h}`}}function c7(n,e,t,i){var r={radiusX:Yt(n,e,t.radiusX,i.radiusX,"width","self"),radiusY:Yt(n,e,t.radiusY,i.radiusY,"height","self"),x:Yt(n,e,t.x,i.x,"width","self"),y:Yt(n,e,t.y,i.y,"height","self")};return(s,a)=>{var o=r.radiusX(s,a),l=r.radiusY(s,a),c=r.x(s,a),h=r.y(s,a);return`${o} ${l} at ${c} ${h}`}}function h7(n,e,t,i){var r={top:li(n,e,t.top.value,i.top.value,t.top.unit),left:li(n,e,t.left.value,i.left.value,t.left.unit),right:li(n,e,t.right.value,i.right.value,t.right.unit),bottom:li(n,e,t.bottom.value,i.bottom.value,t.bottom.unit),round:xr(n,e,t.round,i.round),topRadius:li(n,e,t.topRadius.value,i.topRadius.value,t.topRadius.unit),leftRadius:li(n,e,t.leftRadius.value,i.leftRadius.value,t.leftRadius.unit),rightRadius:li(n,e,t.rightRadius.value,i.rightRadius.value,t.rightRadius.unit),bottomRadius:li(n,e,t.bottomRadius.value,i.bottomRadius.value,t.bottomRadius.unit)};return(s,a)=>{var o=r.top(s,a),l=r.right(s,a),c=r.bottom(s,a),h=r.left(s,a),d=r.round(s,a),u=r.topRadius(s,a),p=r.leftRadius(s,a),f=r.bottomRadius(s,a),g=r.rightRadius(s,a),m=[o,l,c,h].join(" "),v=[u,g,f,p].join(" "),x=`${m} ${d&&v.trim()?`round ${v}`:""}`;return x}}function d7(n,e,t,i){for(var r=Math.max(t.length,i.length),s=[],a=0;as.map(d=>`${d.x(c,h)} ${d.y(c,h)}`).join(",")}function u7(n,e,t,i){var r=mt.parseStyle(t),s=mt.parseStyle(i),a={type:xr(n,e,r.type,r.type),value:xr(n,e,t,i)};if(r.type==s.type&&r!="none")switch(r.type){case"circle":r.value=mt.parseStyleForCircle(r.value),s.value=mt.parseStyleForCircle(s.value),a.value=l7(n,e,r.value,s.value);break;case"ellipse":r.value=mt.parseStyleForEllipse(r.value),s.value=mt.parseStyleForEllipse(s.value),a.value=c7(n,e,r.value,s.value);break;case"inset":r.value=mt.parseStyleForInset(r.value),s.value=mt.parseStyleForInset(s.value),a.value=h7(n,e,r.value,s.value);break;case"polygon":r.value=mt.parseStyleForPolygon(r.value),s.value=mt.parseStyleForPolygon(s.value),a.value=d7(n,e,r.value,s.value);break;case"path":r.value=mt.parseStyleForPath(r.value),s.value=mt.parseStyleForPath(s.value);break}return(o,l)=>{var c=a.type(o,l),h=a.value(o,l);return c==="none"?c:`${c}(${h})`}}function p7(n,e,t,i){var r={type:mo(n,e,t.type,i.type),value:xr(n,e,t.value,i.value)};switch(t.type){case"blur":r.value=Yt(n,e,t.value,i.value);break;case"grayscale":case"invert":case"brightness":case"contrast":case"opacity":case"saturate":case"sepia":case"hue-rotate":r.value=li(n,e,t.value.value,i.value.value,t.value.unit);break;case"drop-shadow":r.offsetX=Yt(n,e,t.offsetX,i.offsetX,"width","self"),r.offsetY=Yt(n,e,t.offsetY,i.offsetY,"height","self"),r.blurRadius=Yt(n,e,t.blurRadius,i.blurRadius,"width","self"),r.spreadRadius=Yt(n,e,t.spreadRadius,i.spreadRadius,"width","self"),r.color=Uh(n,e,t.color,i.color);break}return(s,a)=>{var o=r.type(s,a);return o==="drop-shadow"?{type:r.type(s,a),offsetX:r.offsetX(s,a),offsetY:r.offsetY(s,a),blurRadius:r.blurRadius(s,a),spreadRadius:r.spreadRadius(s,a),color:r.color(s,a)}:{type:r.type(s,a),value:r.value(s,a)}}}function f7(n,e,t,i){for(var r=ir.parseStyle(t),s=ir.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;lir.join(o.map(f=>f(u,p)))}function wd(n,e,t,i,r,s,a,o){var l=[{x:n,y:e},{x:t,y:i},{x:r,y:s},{x:a,y:o}];return(c,h)=>pp(l,h)}function f0(n,e,t,i){var r={x:li("","",n,t),y:li("","",e,i)};return(s,a)=>{var o={x:r.x(s,a),y:r.y(s,a)};return o}}function Md(n,e,t,i,r,s){var a=[{x:n,y:e},{x:t,y:i},{x:r,y:s}];return(o,l)=>kx(a,l)}function g7(n){var e=[],t=[];n.forEach(s=>{switch(s.command){case"M":var[m,v]=s.values;t=[m,v];break;case"m":var[f,g]=t,[m,v]=s.values;m+=f,v+=g,t=[m,v];break;case"L":var[f,g]=t,[m,v]=s.values;e.push({command:s.command,values:[f,g,m,v],length:Rr(f,g,m,v),interpolate:f0(f,g,m,v)}),t=[m,v];break;case"l":var[f,g]=t,[m,v]=s.values;m+=f,v+=g,e.push({command:s.command,values:[f,g,m,v],length:Rr(f,g,m,v),interpolate:f0(f,g,m,v)}),t=[m,v];break;case"C":var[f,g]=t,[a,o,u,p,m,v]=s.values;e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:Hc(f,g,a,o,u,p,m,v),interpolate:wd(f,g,a,o,u,p,m,v)}),t=[m,v];break;case"c":var[f,g]=t,[a,o,u,p,m,v]=s.values;a+=f,u+=f,m+=f,o+=g,p+=g,v+=g,e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:Hc(f,g,a,o,u,p,m,v),interpolate:wd(f,g,a,o,u,p,m,v)}),t=[m,v];break;case"Q":var[f,g]=t,[a,o,m,v]=s.values;e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:Md(f,g,a,o,m,v)}),t=[m,v];break;case"q":var[f,g]=t,[a,o,m,v]=s.values;a+=f,m+=f,o+=g,v+=g,e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:Md(f,g,a,o,m,v)}),t=[m,v];break;case"S":var[f,g]=t,[u,p,m,v]=s.values,x=e[e.length-1];if(["C","c","S","s"].includes(x.command)){var[,,,,l,c,h,d]=x.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:getCubicDist(f,g,a,o,u,p,m,v),interpolate:wd(f,g,a,o,u,p,m,v)}),t=[m,v];break}case"s":var[f,g]=t,[u,p,m,v]=s.values;u+=f,m+=f,p+=g,v+=g;var x=e[e.length-1];if(["C","c","S","s"].includes(x.command)){var[,,,,l,c,h,d]=x.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,u,p,m,v],length:getCubicDist(f,g,a,o,u,p,m,v),interpolate:wd(f,g,a,o,u,p,m,v)}),t=[m,v];break}case"T":var[f,g]=t,[m,v]=s.values,x=e[e.length-1];if(["Q","q","T","t"].includes(x.command)){var[,,l,c,h,d]=x.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:Md(f,g,a,o,m,v)}),t=[m,v]}break;case"t":var[f,g]=t,[m,v]=s.values;m+=f,v+=g;var x=e[e.length-1];if(["Q","q","T","t"].includes(x.command)){var[,,l,c,h,d]=x.values,{x:a,y:o}=xe.getReversePoint({x:h,y:d},{x:l,preC1y:c});e.push({command:s.command,values:[f,g,a,o,m,v],length:yl(f,g,a,o,m,v),interpolate:Md(f,g,a,o,m,v)}),t=[m,v]}break}});var i=0;e.forEach(s=>{i+=s.length});var r=0;return e.forEach(s=>{s.startT=r/i,s.endT=(r+s.length)/i,s.totalLength=i,r+=s.length}),{totalLength:i,interpolateList:e}}function m7(n,e,t,i,r){var[s,a,o,l]=t.split(",").map(g=>g.trim()),c={id:s,distance:y.parse(a||"0%"),rotateStatus:o||"auto",rotate:y.parse(l||"0deg")},h=()=>({}),d=(g,m)=>{var v=0;switch(g){case"angle":v=c.rotate.value;break;case"auto angle":v=m+c.rotate.value;break;case"reverse":v=m+180;break;case"auto":v=m;break}return v},u=0,p=0;if(r){var f=r.searchById(c.id);f&&(u=f.screenX.value,p=f.screenY.value),h=(g,m,v)=>{var x=new be(f.d||""),{totalLength:_,interpolateList:b}=g7(x.segments),S=c.distance.toPx(_),C=S/_;m=m+C,m>1&&(m-=1);var k=b[0];m===0?k=b[0]:m===1&&(k=b[b.length-1]);var O=b.find(T=>T.startT<=m&&m{var x=(n.transformOrigin||"50% 50% 0px").split(" ").map(z=>y.parse(z)),_=x[0].toPx(n.width),b=x[1].toPx(n.height),S=h(g,m,v),C={x:S.x+u-_.value,y:S.y+p-b.value};if(n.setScreenX(C.x),n.setScreenY(C.y),c.rotateStatus!=="element"){var k=S,O=0;m<1&&(O=1/S.totalLength);var q=h(g+O,m+O,v),X=Fl(q.x-k.x,q.y-k.y),T=y.deg(d(c.rotateStatus,X));n.reset({transform:oi.rotate(n.transform,T)})}return C}}function v7(n,e,t,i){for(var r=t.split(" ").map(d=>y.parse(d)),s=i.split(" ").map(d=>y.parse(d)),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function y7(n,e,t,i,r,s){const a=s.$("video").el;let[o,,l]=t.split(":");const c=+(l||1),h=+(o||0)*c;return(d,u)=>{u===0?(a.currentTime=h,a.paused&&a.play()):u===1?(n.reset({currentTime:a.currentTime}),a.pause()):a.paused&&a.play()}}function Ig(n,e,t,i){var r=y.parse(t),s=y.parse(i);return(a,o)=>{var l=r.value,c=s.value;return o===0?y.deg(l):o===1?y.deg(c):y.deg(l+(c-l)*a).to(r.unit)}}function x7(n,e,t,i){for(var r=t.split(" ").map(d=>+d),s=i.split(" ").map(d=>+d),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function b7(n,e,t,i){var r=i.length-1,s=0;return(a,o)=>{var l=0;return o===0?l="":o===1?l=i:l=i.substring(s,Math.floor((r-s)*o)),l}}function _7(n,e,t,i){for(var r=fn.parseStyle(t),s=fn.parseStyle(i),a=Math.max(r.length,s.length),o=[],l=0,c=a;lfn.join(o.map(f=>({offsetX:f.offsetX(u,p),offsetY:f.offsetY(u,p),blurRadius:f.blurRadius(u,p),color:f.color(u,p)})))}function S7(n,e,t,i){for(var r={type:xr(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o({type:r.type(h,d),value:r.value.map(u=>u(h,d))})}function w7(n,e,t,i){for(var r={type:xr(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o{var f=r.value.map(m=>m(u,p)),g=r.type(u,p);return(g.includes("matrix")||g.includes("scale"))&&(f=f.map(m=>y.number(m))),{type:g,value:f}}}function M7(n,e,t,i){for(var r={type:xr(n,e,t.type,i.type)},s=[],a=Math.max(t.value.length,i.value.length),o=0;o{var u={type:r.type(h,d),value:r.value.map(p=>p(h,d))};return u}}function $7(n,e,t,i){for(var r=oi.parseStyle(t.trim()),s=oi.parseStyle(i.trim()),a=Math.max(r.length,s.length),o=[],l=0;l{var p=oi.join(o.map(f=>f(d,u)));return p}}function P7(n,e,t,i){for(var r=t.split(" ").map(d=>y.parse(d)),s=i.split(" ").map(d=>y.parse(d)),a=Math.max(r.length,s.length),o=[],l=0;l{var p=o.map(f=>f(d,u)).join(" ");return p}}function T7(n,e,t,i){for(var r=Math.max(t.length,i.length),s=[],a=t[t.length-1],o=i[i.length-1],l=0;ls.map(p=>p(d,u))}function C7(n,e,t,i){for(var r=new be,s=new be(t),a=new be(i),o=Math.max(s.segments.length,a.segments.length),l=[],c=0;c{var f=l.map(m=>({command:m.command(u,p),values:m.values(u,p)})),g=r.joinPath(f);return g}}function E7(n,e,t,i){for(var r=new po,s=new po(t),a=new po(i),o=Math.max(s.segments.length,a.segments.length),l=[],c=s.segments[s.segments.length-1].x,h=s.segments[s.segments.length-1].y,d=a.segments[a.segments.length-1].x,u=a.segments[a.segments.length-1].y,p=0;p{var x=r.joinPoints(l.map(_=>({x:_.x(m,v),y:_.y(m,v)})));return x}}const I7=()=>()=>{};function L7(n){switch(n){case"border-radius":return a7;case"box-shadow":return o7;case"text-shadow":return _7;case"background-image":case"BackgroundImageEditor":return s7;case"filter":case"backdrop-filter":return f7;case"clip-path":return u7;case"transform":return $7;case"transform-origin":return P7;case"perspective-origin":return v7;case"stroke-dasharray":return x7;case"d":return C7;case"points":return E7;case"offset-path":return m7;case"text":return b7;case"playTime":return y7}}function k7(n,e,t,i,r,s,a){var o=r||e;switch(o){case"width":case"x":return Yt(n,e,t,i,"width");case"height":case"y":return Yt(n,e,t,i,"height");case"perspective":case"font-size":case"font-weight":case"text-stroke-width":case"RangeEditor":case"textLength":case"startOffset":return Yt(n,e,t,i,e);case"fill-opacity":case"opacity":case"stroke-dashoffset":case"currentTime":case"NumberRangeEditor":return li(n,e,+t,+i);case"background-color":case"color":case"text-fill-color":case"text-stroke-color":case"fill":case"stroke":case"ColorViewEditor":return Uh(n,e,t,i);case"mix-blend-mode":case"fill-rule":case"stroke-linecap":case"stroke-linejoin":case"SelectEditor":case"lengthAdjust":return mo(n,e,t,i);case"rotate":return Ig(n,e,t,i)}var l=L7(o);return l?l(n,e,t,i,s,a):I7}function A7(n,e,t,i,r,s,a){return k7(n,e,t,i,r,s,a)}class R7 extends yb{getDefaultObject(e={}){return super.getDefaultObject(P({comments:[],colors:[],gradients:[],svgfilters:[],svgimages:[],keyframes:[],images:[],imageKeys:[],videos:[],videoKeys:[],audios:[]},e))}get comments(){return this.get("comments")}get colors(){return this.get("colors")}get gradients(){return this.get("gradients")}get svgfilters(){return this.get("svgfilters")}get svgimages(){return this.get("svgimages")}get keyframes(){return this.get("keyframes")}get videos(){return this.get("videos")}get images(){return this.get("images")}set images(e){this.set("images",e)}get imageKeys(){return this.get("imageKeys")}get videoKeys(){return this.get("videoKeys")}addKeyframe(e){return this.keyframes.push(e),e}createKeyframe(e={}){return this.addKeyframe(new qc(P({checked:!0},e)))}removeKeyframe(e){this.removePropertyList(this.keyframes,e)}sortItem(e,t,i){e.splice(i+(tt.toString(e)).join(` - -`)}copyPropertyList(e,t){var i=P({},e[t]);e.splice(t,0,i)}removePropertyList(e,t){e.splice(t,1)}removeColor(e){this.removePropertyList(this.colors,e)}copyColor(e){this.copyPropertyList(this.colors,e)}sortColor(e,t){this.sortItem(this.colors,e,t)}setColorValue(e,t={}){this.colors[e]=P(P({},this.colors[e]),t)}getColorIndex(e){return this.colors[e]}getColor(e){return this.colors.filter(t=>t.name===e)[0]}addColor(e){return this.colors.push(e),e}createColor(e={}){return this.addColor(e)}removeImage(e){this.removePropertyList(this.images,e),this.refreshImageKeys()}copyImage(e){this.copyPropertyList(this.images,e),this.refreshImageKeys()}sortImage(e,t){this.sortItem(this.images,e,t)}setImageValue(e,t={}){this.images[e]=P(P({},this.images[e]),t),this.refreshImageKeys()}getImageValueById(e,t=""){const i=this.imageKeys[e];return i?i.local:e||t}getImageDataURIById(e){const t=this.imageKeys[e];if(!!t)return t.original}refreshImageKeys(){let e={};this.images.forEach(t=>{e[t.id]=t}),this.reset({imageKeys:e})}addImage(e){return this.images.push(e),this.refreshImageKeys(),e}createImage(e={}){return this.addImage(e)}removeVideo(e){this.removePropertyList(this.videos,e),this.refreshVideoKeys()}copyVideo(e){this.copyPropertyList(this.videos,e),this.refreshVideoKeys()}sortVideo(e,t){this.sortItem(this.videos,e,t)}setVideoValue(e,t={}){this.videos[e]=P(P({},this.videos[e]),t)}getVideoValueById(e){const t=this.videoKeys[e];if(!!t)return t.local}refreshVideoKeys(){let e={};this.videos.forEach(t=>{e[t.id]=t}),this.reset({videoKeys:e})}addVideo(e){return this.videos.push(e),this.refreshVideoKeys(),e}createVideo(e={}){return this.addVideo(e)}removeGradient(e){this.removePropertyList(this.gradients,e)}copyGradient(e){this.copyPropertyList(this.gradients,e)}sortGradient(e,t){this.sortItem(this.gradients,e,t)}setGradientValue(e,t){this.gradients[e]=P(P({},this.gradients[e]),t)}getGradientIndex(e){return this.gradients[e]}getGradient(e){return this.gradients.filter(t=>t.name===e)[0]}addGradient(e={}){return this.gradients.push(e),e}createGradient(e={}){return this.addGradient(e)}getSVGFilterIndex(e){var i;var t=this.svgfilters.map((r,s)=>({id:r.id,index:s})).filter(r=>r.id===e);return t.length?(i=t==null?void 0:t[0])==null?void 0:i.index:-1}removeSVGFilter(e){this.removePropertyList(this.svgfilters,e)}copySVGFilter(e){this.copyPropertyList(this.svgfilters,e)}sortSVGFilter(e,t){this.sortItem(this.svgfilters,e,t)}setSVGFilterValue(e,t){this.svgfilters[e]=P(P({},this.svgfilters[e]),t)}addSVGFilter(e={}){this.svgfilters.push(e);var t=this.svgfilters.length-1;return t}createSVGFilter(e={}){return this.addSVGFilter(e)}getSVGImageIndex(e){var t=this.svgimages.map((i,r)=>({id:i.id,index:r})).filter(i=>i.id===e)[0];return t?t.index:-1}removeSVGImage(e){this.removePropertyList(this.svgimages,e)}copySVGImage(e){this.copyPropertyList(this.svgimages,e)}sortSVGImage(e,t){this.sortItem(this.svgimages,e,t)}setSVGImageValue(e,t){this.svgimages[e]=P(P({},this.svgimages[e]),t)}addSVGImage(e={}){this.svgimages.push(e);var t=this.svgimages.length-1;return t}createSVGImage(e={}){return this.addSVGImage(e)}}var ho;class O7 extends R7{constructor(){super(...arguments);Pi(this,ho,[])}getDefaultObject(t={}){return super.getDefaultObject(P({timeline:[],compiledTimeline:{}},t))}get timeline(){return this.get("timeline")}set timeline(t){this.set("timeline",t)}expectJSON(t){return t==="compiledTimeline"?!1:super.expectJSON(t)}setTimelineInfo(t){var i=this.getSelectedTimeline();!i||["speed","iterationCount","direction"].forEach(r=>{$t(t[r])&&(i[r]=t[r])})}compileAll(){var t=this.getSelectedTimeline();Ti(this,ho,{}),t&&t.animations.forEach(i=>{i.properties.forEach(r=>{this.compiledTimingFunction(i.id,r.property)})})}searchTimelineOffset(t){var i=this.getSelectedTimeline(),r=[];return i&&i.animations.forEach(s=>{s.properties.forEach(a=>{var o=this.getCompiledTimingFunction(s.id,a.property);r.push(o.find(l=>l.isOnlyTime&&l.startTime<=t?!0:l.startTime<=t&&ts)}getCompiledTimingFunction(t,i){return Mt(this,ho)[`${t}.${i}`]}compiledTimingFunction(t,i){var r=this,s=this.getTimelineProperty(t,i),a=this.modelManager.get(t),o=`${t}.${i}`;if(s.keyframes.length===1){Mt(this,ho)[o]=[];return}let l=qe.body().$(`[data-id="${t}"]`),c=s.keyframes.map(h=>h.editor)[0];Mt(this,ho)[o]=s.keyframes.map((h,d)=>{var u=h,p=s.keyframes[d+1];h.editor=c,p||(p={time:h.time,value:h.value});var f={layer:a,layerElement:l,property:s.property,isOnlyTime:u.time===p.time,startTime:h.time,endTime:p.time,startValue:h.value,endValue:p.value,timing:h.timing,interpolateFunction:A7(a,s.property,h.value,p.value,h.editor,r,l),timingFunction:$g(h.timing)};return f.func=this.makeTimingFunction(f),f}).filter(h=>h)}makeTimingFunction(t){return i=>{var r=t.endTime-t.startTime,s=1;return r!==0&&(s=(i-t.startTime)/r),t.interpolateFunction(t.timingFunction(s),s,r,t.timingFunction)}}stop(){var t=this.getSelectedTimeline();if(t){var i=t.currentTime;this.searchTimelineOffset(i).forEach(r=>{if(r.property==="playTime"){const s=r.layerElement.$("video");s&&s.el.pause()}})}}seek(t,i=r=>r){var r=this.getSelectedTimeline();if(r){$t(t)&&this.setTimelineCurrentTime(t);var s=r.currentTime;this.searchTimelineOffset(s).filter(i).forEach(a=>{a.property==="offset-path"||a.property==="playTime"?a.func(s):a.layer&&a.layer.reset({[a.property]:a.func(s)})})}}getSelectedTimeline(){var t=this.timeline,i=t.filter(s=>s.selected),r=i.length?i[0]:t[0];return r||null}getKeyframeListReturnArray(){var t=this.getSelectedTimeline(),i=[];return t&&t.animations.forEach(r=>{r.properties.forEach(s=>{i.push.apply(i,s.keyframes)})}),i}getKeyframeList(t){var i=this.getSelectedTimeline();i&&i.animations.forEach(r=>{r.properties.forEach(s=>{s.keyframes.forEach(a=>{t&&t(i,a)})})})}getSelectedTimelineLastTime(){var t=0;return this.getKeyframeList((i,r)=>{t=Math.max(r.time,t)}),t}getSelectedTimelineFirstTime(){var t=Number.MAX_SAFE_INTEGER;return this.getKeyframeList((i,r)=>{t=Math.min(r.time,t)}),t}getSelectedTimelinePrevTime(){var t=this.getSelectedTimelineFirstTime();return this.getKeyframeList((i,r)=>{Lr(i.fps,r.time){Lr(i.fps,r.time)>i.currentTimecode&&(t=Math.min(r.time,t))}),t}setTimelineTitle(t,i){var r=this.timeline.find(s=>s.id===t);r&&(r.title=i)}selectTimeline(t){if(t)this.timeline.forEach(r=>{r.selected=r.id===t});else{var i=this.timeline.filter(r=>r.selected);i.length||this.timeline.length&&(this.timeline.selected=!0)}this.compileAll()}removeAnimation(t){this.timeline=this.timeline.filter(i=>i.id!==t),this.timeline.length&&(this.timeline[0].selected=!0),this.compileAll()}addTimeline(t=60,i="00:00:10:00"){var r=Xr(),s=ze(P({id:r,title:"sample"},this.getTimelineLayerInfo(t,i)),{animations:[]});return this.timeline.push(s),this.selectTimeline(r),s}addTimelineLayer(t,i=60,r="00:00:10:00"){var s=this.getSelectedTimeline();if(s||(s=this.addTimeline(i,r)),s.selected=!0,t){var a=s.animations.filter(o=>o.id===t);a[0]||s.animations.push({id:t,properties:[]})}}getTimelineLayerInfo(t=60,i="00:00:10:00"){var r=Qa(t,i);return{fps:t,speed:1,direction:"normal",iterationCount:1,currentTimecode:Lr(t,0),totalTimecode:Lr(t,r),currentTime:0,totalTime:r,displayStartTime:0,displayEndTime:r}}setTimelineCurrentTime(t){var i=this.getSelectedTimeline(),{fps:r,totalTimecode:s}=i;if(i){var a=t,o=t;+a+""===a&&(a=+a,o=a0(r,a)),o>s&&(o=s);var l=Qa(r,o);i.currentTime=l,i.currentTimecode=Lr(r,l)}}setDisplayTimeDxRate(t,i,r){var s=this.getSelectedTimeline();if(s){var a=t*s.totalTime,o=i+a,l=r+a;o=Math.max(o,0),o=Math.min(o,l),o===0&&(l=r-i),l=Math.max(l,o),l=Math.min(l,s.totalTime),l===s.totalTime&&(o=s.totalTime-(r-i)),s.displayStartTime=o,s.displayEndTime=l}}setDisplayStartTimeRate(t){var i=this.getSelectedTimeline();i&&(i.displayStartTime=t*i.totalTime)}setDisplayEndTimeRate(t){var i=this.getSelectedTimeline();i&&(i.displayEndTime=t*i.totalTime)}setTimelineCurrentTimeRate(t){var i=this.getSelectedTimeline();if(i){var{displayStartTime:r,displayEndTime:s,fps:a}=i,o=r+(s-r)*t;this.setTimelineCurrentTime(Lr(a,o))}}setTimelineTotalTime(t){var i=this.getSelectedTimeline();if(i){var r=t,s=t;+r+""===r&&(r=+r,s=a0(i.fps,r)),Qa(i.fps,s)r.id===t)}addTimelineProperty(t,i){this.addTimelineLayer(t);var r=this.getTimelineObject(t);if(r){var s=r.properties.filter(a=>a.property===i);s.length||(r.properties.push({property:i,keyframes:[]}),this.compiledTimingFunction(t,i))}}getTimelineProperty(t,i){var r=this.getSelectedTimeline();if(r){t=t||r.selectedLayerId,i=i||r.selectedProperty;var s=this.getTimelineObject(t);if(s)return s.properties.find(a=>a.property===i)}}setSelectedOffset(t,i,r){var s=this.getSelectedTimeline();if(s){s.selectedLayerId=t,s.selectedProperty=i,s.selectedOffsetTime=r;var a=this.getTimelineProperty();a.keyframes.forEach(o=>{o.selected=o.time===r})}}deleteTimelineKeyframe(t,i,r){var s=this.getTimelineProperty(t,i);s&&(s.keyframes=s.keyframes.filter(a=>a.id!=r))}removeTimelineProperty(t,i){var r=this.getTimelineObject(t);r&&(r.properties=r.properties.filter(s=>s.property!=i))}removeTimeline(t){var i=this.getSelectedTimeline();i&&(i.animations=i.animations.filter(r=>r.id!=t))}setTimelineKeyframeOffsetTime(t,i,r,s){var a=this.getTimelineKeyframeById(t,i,r);a&&(a.time=s,this.compiledTimingFunction(t,i))}setTimelineKeyframeOffsetValue(t,i,r,s=void 0,a=void 0,o=void 0){var l=this.getTimelineKeyframeById(t,i,r);l&&($t(o)&&(l.time=o),$t(s)&&(l.value=s),$t(a)&&(l.timing=a),this.compiledTimingFunction(t,i))}addTimelineKeyframe({layerId:t,property:i,value:r,timing:s,time:a,editor:o}){this.addTimelineProperty(t,i);var l=this.getSelectedTimeline(),c=this.getTimelineProperty(t,i);if(c){var h=a||l.currentTime,d=c.keyframes.filter(p=>p.time===h);if(!d.length){r=Bi(r)||r===""?this.getDefaultPropertyValue(i):r;var u={id:Xr(),layerId:t,property:i,time:h,value:r,timing:s||"linear",editor:o};return c.keyframes.push(u),c.keyframes.sort((p,f)=>p.time>f.time?1:-1),this.compiledTimingFunction(t,i),u}}}getDefaultPropertyValue(t){switch(t){case"mix-blend-mode":return"normal";case"rotate":return"0deg";case"box-shadow":return"0px 0px 0px 0px rgba(0, 0, 0, 1)";case"text-shadow":return"0px 0px 0px rgba(0, 0, 0, 1)";case"opacity":return 1;default:return""}}copyTimelineKeyframe(t,i,r=null){var s=this.getTimelineProperty(t,i);if(s){var a=this.getSelectedTimeline(),o=r||a.currentTime,l=s.keyframes.filter(u=>u.timeu.time>p.time?-1:1),c=l[0].value+"",h=l[0].timing+"",d=l[0].editor),this.addTimelineKeyframe({layerId:t,property:i,value:c,timing:h,editor:d})}}getTimelineKeyframe(t,i,r){var s=this.getTimelineProperty(t,i);if(s)return s.keyframes.find(a=>a.time===r)}getTimelineKeyframeById(t,i,r){var s=this.getTimelineProperty(t,i);if(s)return s.keyframes.find(a=>a.id===r)}sortTimelineKeyframe(t,i){var r=this.getTimelineProperty(t,i);r&&(r.keyframes.sort((s,a)=>s.time>a.time?1:-1),this.compiledTimingFunction(t,i))}setFps(t){var i=this.getSelectedTimeline();i&&(i.fps=t,i.currentTimecode=Lr(t,i.currentTime),i.totalTimecode=Lr(t,i.totalTime))}}ho=new WeakMap;const g0=Wi();class z7 extends O7{getDefaultTitle(){return"New Project"}get isAbsolute(){return!1}get parent(){return null}get nestedAngle(){return 0}toRootVariableCSS(){var e={};return this.rootVariable.split(";").filter(t=>t.trim()).forEach(t=>{var[i,r]=t.split(":");e[`--${i}`]=r}),e}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"project",name:"new Project",description:"",rootVariable:""},e))}get description(){return this.get("description")}set description(e){this.set("description",e)}get rootVariable(){return this.get("rootVariable")}set rootVariable(e){this.set("rootVariable",e)}get artboards(){return(this.layers||[]).filter(e=>e.is("artboard"))}get offsetX(){return 0}get offsetY(){return 0}get screenWidth(){return 0}get screenHeight(){return 0}isLayoutItem(){return!1}hasLayout(){return!1}getAbsoluteMatrix(){return Wi()}getTransformMatrix(){return Wi()}resetMatrix(e){const[t,i]=ya([],kr(e.absoluteMatrix,e.localMatrixInverse));e.reset({x:t,y:i})}get rectVerties(){var e;return(e=this.layers)!=null&&e.length?Gc(this.layers):null}get absoluteMatrix(){return g0}get absoluteMatrixInverse(){return g0}get contentBox(){return{left:0,top:0,width:0,height:0}}}class V7 extends ka{getIcon(){return Ue.rect}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"rect",name:"New Rect"},e))}getDefaultTitle(){return"Rect"}}var $b=function(n){if(!n||!n.dtype)return!1;var e=new RegExp("function View[0-9]+d(:?"+n.dtype+")+");return e.test(String(n.constructor))},bm=function(n){return n?n.data!==void 0&&Array.isArray(n.shape)&&n.offset!==void 0&&n.stride!==void 0:!1},Wh=function(e){return Array.isArray(e)||ArrayBuffer.isView(e)},D7=$b,F7=bm,j7=Wh;function Sa(n){if(!!n){if(D7(n)||F7(n))return n.dtype==="generic"?Sa.GENERIC_NDARRAY:Sa.NDARRAY;if(j7(n))return Sa.ARRAY_OF_ARRAYS;throw new Error("Unhandled data type. Got type: "+typeof n)}}Sa.ARRAY_OF_ARRAYS="Arr";Sa.NDARRAY="Nd";Sa.GENERIC_NDARRAY="GenNd";Sa.PACKED="PackArr";var Xh=Sa,m0=Wh;function N7(n){return n[0].toUpperCase()+n.slice(1)}var B7=function(n,e,t,i,r,s){var a,o=[],l=!1;for(a=0;a=0;r--)if(s[r]===(Array.isArray(e[r])?e[r][1]:e[r])-1)s[r]=Array.isArray(e[r])?e[r][0]:0;else{s[r]++;break}},hf=Xh,_m=function(n,e,t,i){var r,s=[];switch(hf(i)){case hf.NDARRAY:for(s.push(" var "+e+" = "+t+".data;"),s.push(" var "+e+"Offset = "+t+".offset;"),r=0;r1)throw new Error("Analytical derivative not implemented for rational b-splines with order n = "+S+".")}s&&(n="Basis"+n),a&&(n="Der"+a.join("_")+"_"+n);var C=y0[n];if(i)var k=typeof i=="function"?i:console.log;if(C)return i&&k(x0[n]),C.bind(e);var O=[],q="evaluate"+n,X=t.point;s&&(X=function(L,I){for(var U=[],se=0;se "+K+"[i][1] || a === undefined || isNaN(a)) {"),Z(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+K+"[i][0]+', '+"+K+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),Z(" }"),Z("}")),u=0;u "+le(u)+" + 1) {"),Z(" m = 0.5 * (h + "+le(u)+") | 0;"),Z(" if ("+z([u,"m"])+" > "+ee(u)+") h = m;"),Z(" else "+le(u)+" = m;"),Z("}"),ke(` - // Fetch knots for dimension `+u+` -`),l=-g[u]+1;l<=g[u];l++)b[u]==="closed"?l<0?Z("var "+ae([u,l+g[u]-1])+" = "+ye(le(u)+" < "+-l,z([u,0])+" + "+z([u,[re(u),le(u),l]])+" - "+z([u,[re(u)]]),z([u,[le(u),l]]))+";"):l>0?Z("var "+ae([u,l+g[u]-1])+" = "+ye(le(u)+" + "+l+" > "+re(u),z([u,re(u)])+" + "+z([u,l+" + "+le(u)+" - "+re(u)])+" - "+z([u,0]),z([u,[le(u),l]]))+";"):Z("var "+ae([u,l+g[u]-1])+" = "+z([u,[le(u),l]])+";"):Z("var "+ae([u,l+g[u]-1])+" = "+z([u,[le(u),l]])+";");else{for(ke(` - // Directly compute knot interval for dimension `+u+` -`),b[u]==="closed"?Z(le(u)+" = ("+ee(u)+" | 0) % "+re(u)+";"):(Z(le(u)+" = ("+ee(u)+" | 0);"),Z("if ("+le(u)+" < "+g[u]+") "+le(u)+" = "+g[u]+";"),Z("if ("+le(u)+" > "+re(u)+" - 1) "+le(u)+" = "+re(u)+" - 1;")),ke(` - // Compute and clamp knots for dimension `+u+` -`),l=-g[u]+1;l<=g[u];l++)p=ae([u,l+g[u]-1]),Z("var "+p+" = "+le(u)+" + "+l+";");if(b[u]==="clamped")for(l=-g[u]+1;l<=g[u];l++)p=ae([u,l+g[u]-1]),l<0&&Z("if ("+p+" < "+g[u]+") "+p+" = "+g[u]+";"),l>0&&Z("if ("+p+" > "+re(u)+") "+p+" = "+re(u)+";");b[u]==="closed"&&(ke(` - // Wrap the B-Spline parameter for closed boundary`),Z(ee(u)+" %= "+re(u)+";"))}for(u=0,h=[];u=0;u--)for(h[u]=[g[u],g[u]+1],l=0;ll;c--){var xt=a&&g[u]-l-a[u]<=0;xt?(Z("m = 1 / ("+ae([u,c-l+g[u]-1])+" - "+ae([u,c-1])+");"),v&&(Z("a = ("+ee(u)+" - "+ae([u,c-1])+") * m;"),Z("b = 1 - a;"))):(Z("a = ("+ee(u)+" - "+ae([u,c-1])+") / ("+ae([u,c-l+g[u]-1])+" - "+ae([u,c-1])+");"),Z("b = 1 - a;")),v&&$d(h,function(L){var I=L.slice(),U=L.slice();I[u]=c,U[u]=c-1,xt&&v&&Z("h = "+J(I)+";"),Z(J(I)+" = b * "+J(U)+" + a * "+J(I)+";")}),$d(h,function(L){var I,U,se,$e=L.slice(),Ce=L.slice();if($e[u]=c,Ce[u]=c-1,xt){var ft=l+1;if(s)I=v?"h * "+J(Ce)+" / "+J($e)+" * ":"",U=j($e)+(v?" / h":""),se=j(Ce)+(v?" / "+J(Ce):""),Z(j($e)+" = "+ft+" * "+I+"("+U+" - "+se+") * m;");else{var ot=$e.slice(),ht=Ce.slice();for(d=0;d<_;d++)ot[o]=ht[o]=d,I=v?"h * "+J(Ce)+" / "+J($e)+" * ":"",U=j(ot)+(v?" / h":""),se=j(ht)+(v?" / "+J(Ce):""),Z(j(ot)+" = "+ft+" * "+I+"("+U+" - "+se+") * m;")}}else if(s)Z(j($e)+" = b * "+j(Ce)+" + a * "+j($e)+";");else for(d=0;d<_;d++)$e[o]=Ce[o]=d,Z(j($e)+" = b * "+j(Ce)+" + a * "+j($e)+";")}),ke(` -`)}if(i&&Z(v?` - // Project back from homogeneous coordinates and return final output -`:` - // Return final output -`),s)Z(v?"return "+j(g)+" / "+J(g)+";":"return "+j(g)+";");else for(u=0;u<_;u++)Z(v?"out["+u+"] = "+j(g.concat([u]))+" / "+J(g)+";":"out["+u+"] = "+j(g.concat([u]))+";");if(s||Z("return out;"),O.push("}"),i){var pt=O.join(` -`);k(pt),x0[n]=pt}var w=new Function([O.join(` -`),"; return ",q].join(""))();return y0[n]=w,w.bind(e)},b0={},K7=_m,q7=Sm,Z7=xp,J7=function(e,t,i,r){var s,a,o,l,c,h,d,u,p=b0[e];if(p)return p.bind(t);var f=[],g="transform"+e;f.push("function "+g+"(m) {"),f.push("var i, w;"),f.push(K7(t,"x","this.points",t.points));var m=Z7(r?"size":"s");for(s=0;s= 0; "+o+"--) {");for(s=0;s=0;s--)f.push("}");f.push("return this;"),f.push("}");var v=new Function([f.join(` -`),"; return ",g].join(""))();return r&&console.log(f.join(` -`)),b0[e]=v,v.bind(t)},Q7=Tb,ff=xp,eN=_m,gf=Xh,mf=Wh,tN=Sm,_0={},iN=function(n,e,t,i,r){var s=_0[n];if(s)return s.bind(e);var a=e.degree,o=e.knots,l=e.splineDimension,c=e.boundary,h,d,u,p=[],f="support"+n,g=t.knot,m=ff("t"),v=i?"domain":"d",x=ff(i?"size":"s"),_=ff(i?"knotIndex":"i"),b=!0;for(u=0;u "+v+"[i][1] || a === undefined || isNaN(a)) {"),S(" throw new Error('Invalid Spline parameter in dimension '+i+'. Valid domain is ['+"+v+"[i][0]+', '+"+v+"[i][1]+']. but got t'+i+' = '+arguments[i + 1]+'.');"),S(" }"),S("}")),u=0;u "+_(u)+" + 1) {"),S(" m = 0.5 * (h + "+_(u)+") | 0;"),S(" if ("+g([u,"m"])+" > "+m(u)+") h = m;"),S(" else "+_(u)+" = m;"),S("}")):c[u]==="closed"?S(_(u)+" = ("+m(u)+" | 0) % "+x(u)+";"):(S(_(u)+" = ("+m(u)+" | 0);"),S("if ("+_(u)+" < "+a[u]+") "+_(u)+" = "+a[u]+";"),S("if ("+_(u)+" > "+x(u)+" - 1) "+_(u)+" = "+x(u)+" - 1;"));for(u=0,d=[];u0&&!Ws(this.knots[0])&&(this.knots=[this.knots]),a=0;a - - -`;class xN extends wm{getIcon(){return Ue.auto_awesome}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"template",name:"New Template",engine:"dom",template:yN,params:[]},e))}get template(){return this.get("template")}set template(e){this.set("template",e)}get params(){return this.get("params")}set params(e){this.set("params",e)}get engine(){return this.get("engine")}set engine(e){this.set("engine",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Template"}editable(e){switch(e){case"font":return!0}return super.editable(e)}}class bN extends ka{getIcon(){return Ue.title}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"text",name:"New Text",elementType:"p",content:""},e))}get content(){return this.get("content")}set content(e){this.set("content",e)}enableHasChildren(){return!1}getDefaultTitle(){return"Text"}editable(e){switch(e){case"svg-item":case"transform":case"transformOrigin":case"perspective":case"perspectiveOrigin":case"layout":return!1;case"font":case"fontSpacing":case"textStyle":case"textShadow":case"textFill":case"textClip":case"backgroundImage":case"box-model":case"border":case"borderRadius":case"backdropFilter":case"pattern":return!0}return super.editable(e)}}function Cb(n){n.registerItem("project",z7),n.registerItem("artboard",Uj),n.registerItem("rect",V7),n.registerItem("circle",qj),n.registerItem("image",Zj),n.registerItem("text",bN),n.registerItem("boolean-path",Kj),n.registerItem("svg-path",_b),n.registerItem("svg-text",mN),n.registerItem("svg-textpath",vN),n.registerItem("template",xN),n.registerItem("polygon",Jj),n.registerItem("star",gN),n.registerItem("spline",fN)}var _N=` - - - -`;const w0=[{itemType:"circle",name:"base",attrs:{backgroundColor:"#ececec"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"black"}},{itemType:"circle",name:"base",attrs:{backgroundColor:"red"}},{itemType:"circle",name:"base",attrs:{backgroundImage:` - background-image: linear-gradient(to right, #ececec, black 100%); - `}},{itemType:"circle",name:"base",attrs:{backgroundImage:` - background-image: linear-gradient(to right, #ececec, black 100%); - `,border:` - border:10px solid black; - `}}];class SN extends ge{template(){return` -
          - `}[me("$css-list")](){return w0.map((e,t)=>{const i=this.$editor.renderer("svg").render(this.$model.createModel(P({itemType:e.itemType,width:70,height:70},e.attrs),!1));return`
          ${i}
          `})}[ne("$css-list .pattern-item")](e){const t=+e.$dt.data("index"),i=w0[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",i.itemType,i.attrs)}}const M0=[{itemType:"svg-path",name:"path",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:be.makeRect(0,0,80,80).d}},{itemType:"svg-path",name:"line",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,d:be.makeLine(0,0,80,80).d}},{itemType:"svg-path",name:"line 2",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",d:be.makeLine(0,80,80,0).d}},{itemType:"svg-path",name:"circle",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,d:be.makeCircle(0,0,80,80).d}},{itemType:"polygon",name:"polygon - 3",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:3,originWidth:80,originHeight:80,d:be.makePolygon(80,80,3).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:4,originWidth:80,originHeight:80,d:be.makePolygon(80,80,4).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:5,originWidth:80,originHeight:80,d:be.makePolygon(80,80,5).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:6,originWidth:80,originHeight:80,d:be.makePolygon(80,80,6).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:7,originWidth:80,originHeight:80,d:be.makePolygon(80,80,7).d}},{itemType:"polygon",name:"polygon - 4",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",count:12,originWidth:80,originHeight:80,d:be.makePolygon(80,80,12).d}},{itemType:"star",name:"star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:be.makeStar(80,80,5,.5).d}},{itemType:"star",name:"curved star - 5",attrs:{backgroundColor:"transparent",stroke:"black","stroke-width":2,fill:"#ececec",originWidth:80,originHeight:80,count:5,radius:.5,d:be.makeCurvedStar(80,80,5,.5).d}}];class wN extends ge{template(){return` -
          - `}[me("$svg-list")](){return M0.map((e,t)=>{let i=e.attrs.d;if(i){const s=be.fromSVGString(i);if(e.attrs.originWidth)s.scale(60/e.attrs.originWidth,60/e.attrs.originHeight);else{const a=s.rect();s.scale(70/a.width,70/a.height)}i=s.d}const r=this.$editor.renderer("svg").render(this.$model.createModel(ze(P({itemType:e.itemType,width:80,height:80},e.attrs),{d:i}),!1));return`
          ${r}
          `})}[ne("$svg-list .pattern-item")](e){const t=+e.$dt.data("index"),i=M0[t];e.$dt.onlyOneClass("selected"),this.$commands.emit("addLayerView",i.itemType,i.attrs)}}class $0 extends ge{template(){const e=this.$config.get("editor.design.mode")==="item";return V("div",{class:"elf--texture"},V($h,{ref:"$tab",selectedValue:e?"svg":"css",onchange:t=>{this.$config.set("inspector.selectedValue",t)}},e?"":V(jn,{value:"css",title:"CSS"},V("object",{refClass:"CSSTextureView",ref:"$css"})),V(jn,{value:"svg",title:"SVG"},V("object",{refClass:"SVGTextureView",ref:"$svg"}))))}}function MN(n){n.registerElement({TextureView:$0,CSSTextureView:SN,SVGTextureView:wN}),n.registerUI("leftbar.tab",{TextureView:{value:"texture",title:"Texture",icon:_N,designMode:["design","item"]}}),n.registerUI("leftbar.tab.texture",{TextureView:$0})}class $N extends Bt{getTitle(){return this.$i18n("export.property.title")}isFirstShow(){return!0}getClassName(){return"elf--export-property"}getBody(){return` -
          - - -
          -
          - - -
          - `}[ne("$svg")](){this.$commands.emit("downloadSVG")}[ne("$png")](){this.$commands.emit("downloadPNG")}}function PN(n){n.registerUI("inspector.tab.style",{ExportProperty:$N})}const vf=[tn.PAD,tn.REFLECT,tn.REPEAT],yf=20;class TN extends ge{initializeData(){const e=this.$context.selection.current;this.state.currentMatrix=e.matrix,this.state.imageResult=e.createFragmentMatrix(this.state.key),this.state.originalResult=e.createFragmentMatrix(this.state.key)}}class CN extends TN{[Ke("$el .step-point")+at("moveStepPoint")+ct("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.imageResult.image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const i=(e<0?-1:1)*Math.ceil(Fe([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case Ze.LINEAR:break;case Ze.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+i,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+i,1);break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}makeTimingString(e){switch(e.name){case Ze.LINEAR:return"";case Ze.EASE:case Ze.EASE_IN:case Ze.EASE_OUT:case Ze.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:i}=this.localColorStep;switch(i.name){case Ze.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start",this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}));break;case Ze.LINEAR:break;case Ze.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:i.d}],changeEvent:(r,s)=>{this.localColorStep.timing=hr(`path(${s})`).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(i)}],changeEvent:(r,s)=>{this.localColorStep.timing=hr(s).parsed,this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}}),this.$el.toggleClass("dragging",!1);return}}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`})),this.$el.toggleClass("dragging",!1)}}class EN extends CN{[Ar("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.imageResult.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.imageResult.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.imageResult.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,i=this.state.imageResult.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&(a=i.insertColorStep(r.percent+(100-r.percent)/2)),this.updateColorStepStatus(i,a)}prependColorStep(e){const t=e-1,i=this.state.imageResult.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&(a=i.insertColorStep(r.percent)),this.updateColorStepStatus(i,a)}[Ke("$el .point")+at("movePoint")+ct("moveEndPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=this.state.imageResult;this.pointTarget=e.$dt.data("type"),this.startPoint=this.$viewport.applyVertex(t.startPoint),this.endPoint=this.$viewport.applyVertex(t.endPoint),this.dist=Fe(this.startPoint,this.endPoint),t.shapePoint&&(this.shapePoint=this.$viewport.applyVertex(t.shapePoint),this.shapeDist=Fe(this.startPoint,this.shapePoint))}calculateNextPoint(e){if(this.$config.get("bodyEvent").shiftKey){let t,i;this.pointTarget==="start"?(t=this.endPoint,i=e):(t=this.startPoint,i=e);const r=vt([],i,t);let s=si(r[0],r[1])-90;s=(s+360)%360,s-=s%this.$config.get("fixed.gradient.angle"),e=He([bt([],t,[0,-this.dist,0])],cr(s,t))[0]}return e}moveShapePoint(e,t){const i=this.shapePoint,r=this.calculateNextPoint(bt([],i,[e,t,0])),s=this.state.currentMatrix.width,a=this.state.currentMatrix.height,o=this.state.imageResult.image;let l,c;switch(o.type){case de.RADIAL:const h=Fe(this.startPoint,r),d=Re([],this.startPoint,this.shapePoint,h/this.shapeDist),[u]=He([this.$viewport.applyVertexInverse(d)],this.state.currentMatrix.absoluteMatrixInverse);l=y.makePercent(u[0],s),c=y.makePercent(u[1],a),o.reset({x3:l,y3:c});break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}movePoint(e,t){if(this.pointTarget==="shape")return this.moveShapePoint(e,t);const i=this.pointTarget==="start"?this.startPoint:this.endPoint;let r=this.calculateNextPoint(bt([],i,[e,t,0]));var[s]=He([this.$viewport.applyVertexInverse(r)],this.state.currentMatrix.absoluteMatrixInverse);const a=this.state.currentMatrix.width,o=this.state.currentMatrix.height,l=this.state.imageResult.image;switch(l.type){case de.RADIAL:var p,f,c,h,d,u;if(this.pointTarget==="start"){p=l.x1.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y1.isPercent()?y.makePercent(s[1],o):y.px(s[1]);const g=this.calculateNextPoint(bt([],this.endPoint,[e,t,0])),[m]=He([this.$viewport.applyVertexInverse(g)],this.state.currentMatrix.absoluteMatrixInverse);c=l.x2.isPercent()?y.makePercent(m[0],a):y.px(m[0]),h=l.y2.isPercent()?y.makePercent(m[1],o):y.px(m[1]);const v=this.calculateNextPoint(bt([],this.shapePoint,[e,t,0])),[x]=He([this.$viewport.applyVertexInverse(v)],this.state.currentMatrix.absoluteMatrixInverse);d=l.x3.isPercent()?y.makePercent(x[0],a):y.px(x[0]),u=l.y3.isPercent()?y.makePercent(x[1],o):y.px(x[1]),l.reset({x1:p,y1:f,x2:c,y2:h,x3:d,y3:u})}else if(this.pointTarget==="end"){if(this.$config.get("bodyEvent").altKey){const _=Fe(this.startPoint,r);r=Re([],this.startPoint,this.endPoint,_/this.dist);var[s]=He([this.$viewport.applyVertexInverse(r)],this.state.currentMatrix.absoluteMatrixInverse)}p=y.makePercent(s[0],a),f=y.makePercent(s[1],o),l.reset({x2:p,y2:f});const g=Fe(this.startPoint,r),m=Re([],this.startPoint,r,1/g),v=Re([],this.startPoint,He([m],cr(90,this.startPoint))[0],l.radialType===Li.CIRCLE?g:this.shapeDist),[x]=He([this.$viewport.applyVertexInverse(v)],this.state.currentMatrix.absoluteMatrixInverse);d=y.makePercent(x[0],a),u=y.makePercent(x[1],o),l.reset({x3:d,y3:u})}break;case de.LINEAR:var p,f;this.pointTarget==="start"?(p=l.x1.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y1.isPercent()?y.makePercent(s[1],o):y.px(s[1]),l.reset({x1:p,y1:f})):this.pointTarget==="end"&&(p=l.x2.isPercent()?y.makePercent(s[0],a):y.px(s[0]),f=l.y2.isPercent()?y.makePercent(s[1],o):y.px(s[1]),l.reset({x2:p,y2:f}));break}this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${this.state.imageResult.image}`}))}moveEndPoint(e,t){const i=this.state.imageResult.image,r=this.state.currentMatrix.width,s=this.state.currentMatrix.height;if(e===0&&t===0)switch(i.type){case de.RADIAL:if(this.pointTarget==="start"){switch(i.radialType){case Li.CIRCLE:i.reset({radialType:Li.ELLIPSE});break;case Li.ELLIPSE:const l=Fe(this.startPoint,this.endPoint),c=Re([],this.startPoint,this.endPoint,1/l),h=Re([],this.startPoint,He([c],cr(90,this.startPoint))[0],l),[d]=He([this.$viewport.applyVertexInverse(h)],this.state.currentMatrix.absoluteMatrixInverse),u=y.makePercent(d[0],r),p=y.makePercent(d[1],s);i.reset({radialType:Li.CIRCLE,x3:u,y3:p});break}break}default:const o=(vf.findIndex(l=>i.spreadMethod===l)+1)%vf.length;i.reset({spreadMethod:vf[o]});break}this.emit("updateFillEditor",i),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${i}`}))}[Ke("$el .colorstep")+at("moveColorStep")+ct("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const i=this.state.imageResult;switch(i.image.type){case de.RADIAL:case de.LINEAR:this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint);const r=+t.data("x"),s=+t.data("y");this.screenXY=[r,s,0];const a=vt([],this.endPoint,this.startPoint),o=si(a[0],a[1])-180;this.rotateInverse=cr(-o,this.startPoint);break}}moveColorStep(e,t){if(this.state.altKey)return;const i=bt([],this.screenXY,[e,t,0]),[r,s,a]=He([this.startPoint,this.endPoint,i],this.rotateInverse),o=this.state.imageResult;let l=0,c=0;switch(o.image.type){case de.RADIAL:case de.LINEAR:var[h,d,u]=[r[0],s[0],a[0]],p=Math.abs(h-d);ud?l=Math.abs(u-h)/p*100:l=(u-h)/p*100,l=Math.max(0,Math.min(100,l)),c=p;break}const f=this.state.imageResult.image;f.colorsteps[this.$targetIndex].setValue(l,c);const g={color:f.colorsteps[this.$targetIndex].color,percent:f.colorsteps[this.$targetIndex].percent},m=this.state.originalResult.image;m.colorsteps=f.colorsteps.map(v=>v),m.sortColorStep(),this.emit("updateFillEditor",m,g),this.$commands.executeCommand("setAttribute",`change ${this.state.key} fragment`,this.$context.selection.packByValue({[this.state.key]:`${m}`}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const i=this.state.imageResult.image;i.colorsteps[this.$targetIndex].toggleTiming();const r={color:i.colorsteps[this.$targetIndex].color,percent:i.colorsteps[this.$targetIndex].percent};this.emit("updateFillEditor",i,r),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${i}`}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:i,percent:r}=e.colorsteps[t]||{};this.emit("updateFillEditor",e,{color:i,percent:r}),this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({[this.state.key]:`${e}`})),this.state.hoverColorStep=null}[Ke("$el .area-line")](){const e=this.state.originalResult.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[op("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[Kl("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),i=this.state.originalResult.image;let r,s,a;switch(i.type){case de.LINEAR:case de.RADIAL:[r,s,a]=He([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var[o,l,c]=[r[0],s[0],a[0]],h=Math.abs(o-l),d;cl?d=Math.abs(c-o)/h*100:d=(c-o)/h*100,this.state.hoverColorStep=i.pickColorStep(d);break}this.refresh()}}class IN extends EN{initState(){return{key:"",value:"",isShow:!1}}template(){return V("div",{class:"elf--fill-editor-view"})}updateData(){this.trigger(this.state.onchange,this.state.key,this.state.value)}refresh(){this.state.isShow&&this.load()}[H(ai)](){this.refresh()}[H(Ki)+Nt(100)](){this.$context.selection.current&&this.$context.selection.hasChangedField("x","y","width","height","angle","fill","stroke")&&this.refresh()}[H("showFillEditorView")](e={}){this.setState({key:e.key,isShow:!0,onchange:e.onchange}),this.$el.show(),this.$context.commands.emit("push.mode.view","FillEditorView")}[H("hideFillEditorView")](){this.setState({key:"",isShow:!1,onchange:null}),this.$el.hide(),this.$commands.emit("pop.mode.view","FillEditorView")}makeTimingLine(e,t=10,i=0,r=0){switch(e.name){case Ze.LINEAR:return"";case Ze.STEPS:return V("path",{class:"timing",d:` - M${i+0} ${r+t} - L${i+t*1/3} ${r+t} - L${i+t*1/3} ${r+t*2/3} - L${i+t*2/3} ${r+t*2/3} - L${i+t*2/3} ${r+t*1/3} - L${i+t} ${r+t*1/3} - L${i+t} ${r+0} - `});case Ze.PATH:return V("path",{class:"timing",d:be.fromSVGString(e.d).scale(t,t).flipX().translate(0,t).translate(i,r).d});default:return V("path",{class:"timing",d:` - M${i+0} ${r+t} - C - ${i+e.x1*t} ${r+t-e.y1*t} - ${i+e.x2*t} ${r+t-e.y2*t} - ${i+t} ${r+0} - `})}}makeTimingCircle(e,t,i){const r=i.stickScreenXYInEnd,s=t.stickScreenXYInStart,{timing:a,timingCount:o}=t;let l;switch(a.name){case Ze.LINEAR:return"";case Ze.STEPS:return l=Re([],r,s,.5),V(Ji,null,V("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),V("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},a.count));default:return l=Re([],r,s,.5),V(Ji,null,V("circle",{class:"step-point","data-colorstep-index":e,cx:l[0],cy:l[1],r:7}),V("text",{x:l[0],y:l[1],dy:4,"text-anchor":"middle"},o))}}makeTimingArea(e,t,i,r){const s=i.stickScreenXYInEnd,a=t.stickScreenXYInStart;return V("g",{class:"timing-area"},t.timing.name===Ze.LINEAR?"":V("path",{class:"timing-path",d:` - M ${s[0]} ${s[1]} - L ${a[0]} ${a[1]} - `}),this.makeTimingCircle(e,t,i,r))}makeGradientPoint(e,t,i,r,s){const a=yf,o=vt([],i,t),l=si(o[0],o[1])-180;return V(Ji,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],yf)),e.map((c,h)=>V("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},V("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:a,height:a,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,a,c.stickScreenXY[0],c.stickScreenXY[1]))),V("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),V("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&V("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&V("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeStickPoint(e,t,i){const r=yf,s=vt([],i,t),a=si(s[0],s[1])-180,o=cr(-a,t),l=Zi([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=He([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=He([[h[0]-r/2,h[1]-r*1.5,0],[h[0]-r/2,h[1]-r*1.5+r/2,0],[h[0]+r/2,h[1]-r*1.5+r/2,0]],l),c})}makeRadialCenterPoint(e){let t,i,r,s;t=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),r=this.$viewport.applyVertex(e.shapePoint),s=this.makeStickPoint(e.colorsteps,t,i);let a=null;return this.state.hoverColorStep&&(a=Re([],t,i,this.state.hoverColorStep.percent/100)),V("svg",{class:"gradient-editor-area"},V("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"area-line"}),V("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"start-end-line"}),V("path",{d:` - M ${t[0]} ${t[1]} - L ${r[0]} ${r[1]} - `,class:"normal-line"}),this.makeGradientPoint(s,t,i,r,a))}makeLinearCenterPoint(e){let t,i,r;t=this.$viewport.applyVertex(e.startPoint),i=this.$viewport.applyVertex(e.endPoint),r=this.makeStickPoint(e.colorsteps,t,i);let s=null;return this.state.hoverColorStep&&(s=Re([],t,i,this.state.hoverColorStep.percent/100)),V("svg",{class:"gradient-editor-area"},V("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"area-line"}),V("path",{d:` - M ${t[0]} ${t[1]} - L ${i[0]} ${i[1]} - `,class:"start-end-line"}),this.makeGradientPoint(r,t,i,null,s))}makeCenterPoint(e){const{image:t}=e;switch(t.type){case de.LINEAR:return this.makeLinearCenterPoint(e);case de.RADIAL:return this.makeRadialCenterPoint(e)}return""}[me("$el")+It](){if(!this.state.isShow)return"";const e=this.$context.selection.current;if(!e)return"";const t=e.createFragmentMatrix(this.state.key);this.state.result=t,this.state.originalResult=e.createFragmentMatrix(this.state.key);const i=t.image;let r,s;switch(i.type){case de.LINEAR:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),s=vt([],this.state.endPoint,this.state.startPoint),r=si(s[0],s[1])-180,this.state.rotateInverse=cr(-r,this.state.startPoint);break;case de.RADIAL:this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.shapePoint=this.$viewport.applyVertex(t.shapePoint),s=vt([],this.state.endPoint,this.state.startPoint),r=si(s[0],s[1])-180,this.state.rotateInverse=cr(-r,this.state.startPoint);break}return V("div",null,this.makeCenterPoint(t))}}function Eb(n){n.registerUI("canvas.view",{FillEditorView:IN})}const LN=["blur","grayscale","hue-rotate","invert","brightness","contrast","drop-shadow","opacity","saturate","sepia","svg"];class kN extends Bt{getTitle(){return this.$i18n("filter.property.title")}hasKeyframe(){return!0}isFirstShow(){return!0}afterRender(){this.show()}getKeyframeProperty(){return"filter"}getTitleClassName(){return"filter"}getBodyClassName(){return"no-padding"}getBody(){return"
          "}getTools(){return` - - - `}[ne("$add")](){var e=this.refs.$filterSelect.value;this.children.$filterEditor.trigger("add",e)}[me("$filterSelect")](){var e=LN.map(r=>({title:this.$i18n(`filter.property.${r}`),value:r})),t=this.getSVGFilterList(),i=[];return t.length?i=[...e,{title:"-------",value:""},...t]:i=[...e],i.map(r=>{var{title:s,value:a}=r;return``})}getSVGFilterList(){var e=this.$context.selection.currentProject,t=[];return e&&(t=e.svgfilters.map(i=>{var r=i.id;return{title:`svg - #${r}`,value:r}})),t}[me("$body")+It](){var e=this.$context.selection.current||{},t=e.filter;return W("FilterEditor",{ref:"$filterEditor",key:"filter",value:t,onchange:"changeFilterEditor"})}[we("changeFilterEditor")](e,t){this.$commands.executeCommand("setAttribute","change filter",this.$context.selection.packByValue({[e]:t}))}get editableProperty(){return"filter"}[H(Lt)+et("checkShow")+Nt(100)](){this.refresh()}[H("refreshSVGArea")+Nt(100)](){this.load("$filterSelect")}}function AN(n){n.registerUI("inspector.tab.style",{FilterProperty:kN})}function RN(n){n.registerUI("inspector.tab.style",{FontProperty:mp.create({title:n.$i18n("font.property.title"),editableProperty:"font",preventUpdate:!0})}),n.registerInspector("font",e=>[{key:"font-family",editor:"SelectEditor",editorOptions:{compact:!0,label:"font_download",options:["","Arial","Arial Black","Times New Roman","Times","Courier New","Courier","Verdana","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Impact","Comic Sans MS","serif","sans-serif","monospace","cursive","fantasy","system-ui"]},defaultValue:e.fontFamily||""},{type:"column",size:[1,1],gap:10,columns:[{key:"font-size",editor:"NumberInputEditor",editorOptions:{label:"format_size",compact:!0,min:8,max:1e3,step:1},defaultValue:y.parse(e.fontSize).value,convert:(t,i)=>y.px(i)},{key:"padding",editor:"NumberInputEditor",editorOptions:{label:"padding",compact:!0,min:8,max:1e3,step:1},defaultValue:y.parse(e.paddingTop).value,convert:(t,i)=>y.px(i)}]},{type:"column",size:[1,1],columns:[{key:"color",editor:"ColorViewEditor",editorOptions:{compact:!0},defaultValue:e.color||"#000"},{key:"font-weight",editor:"NumberInputEditor",editorOptions:{label:"format_bold",compact:!0,min:100,max:900,step:100},defaultValue:e.fontWeight||400}]},{type:"column",size:[1,1,1],gap:10,columns:[{key:"text-indent",editor:"NumberInputEditor",editorOptions:{label:"format_indent",min:-100,max:100,step:1,compact:!0},defaultValue:y.parse(e.textIndent).value,convert:(t,i)=>y.px(i)},{key:"line-height",editor:"NumberInputEditor",editorOptions:{label:"format_line_spacing",min:0,max:10,step:.01,compact:!0},defaultValue:e.lineHeight||1.2},{key:"letter-spacing",editor:"NumberInputEditor",editorOptions:{label:"space",min:-100,max:100,step:1,compact:!0},defaultValue:y.parse(e.letterSpacing).value,convert:(t,i)=>y.px(i)}]}])}class ON extends ge{initState(){var i;const e=ii.parseImage(this.props.value||"transparent")||da.create(),t=(i=e.colorsteps[this.props.index])==null?void 0:i.id;return this.$context.selection.selectColorStep(t),t&&(this.currentStep=e.colorsteps.find(r=>this.$context.selection.isSelectedColorStep(r.id))),{cachedRect:null,index:+(this.props.index||0),value:this.props.value,image:e}}setValue(e){this.setState({cachedRect:null,image:ii.parseImage(e)},!1),this.refresh()}template(){return` -
          -
          -
          -
          -
          -
          -
          -
          -
          - ${W("SelectEditor",{label:"Pattern",ref:"$patternUnits",options:["userSpaceOnUse"],key:"patternUnits",onchange:"changeKeyValue"})} -
          - -
          -
          - `}getImageFieldValue(e,t){var i=e[t];if(Bi(i))switch(t){case"cx":case"cy":case"r":case"fx":case"fy":return"50%";case"x1":case"y1":case"y2":case"fr":case"imageX":case"imageY":return"0%";case"x2":case"patternWidth":case"patternHeight":case"imageWidth":case"imageHeight":return"100%"}return i}[Yn("$file")](e){var t=this.$context.selection.currentProject;t&&[...e.target.files].forEach(i=>{this.$commands.emit("updateImageAssetItem",i,r=>{this.trigger("setImageUrl",r)})})}refreshFieldValue(){this.children.$cx.setValue(this.state.image.cx),this.children.$cy.setValue(this.state.image.cy),this.children.$r.setValue(this.state.image.r),this.children.$fx.setValue(this.state.image.fx),this.children.$fy.setValue(this.state.image.fy),this.children.$fr.setValue(this.state.image.fr),this.children.$patternUnits.setValue(this.state.image.patternUnits),this.children.$patternWidth.setValue(this.state.image.patternWidth),this.children.$patternHeight.setValue(this.state.image.patternHeight),this.children.$imageX.setValue(this.state.image.imageX),this.children.$imageY.setValue(this.state.image.imageY),this.children.$imageWidth.setValue(this.state.image.imageWidth),this.children.$imagenHeight.setValue(this.state.image.imageHeight)}getFieldValue(e){return y.parse(this.getImageFieldValue(this.state.image,e))}getRectRate(e,t,i){var{width:r,height:s,x:a,y:o}=e;a>t?t=a:a+ri?i=o:o+sr&&(s=r);var a=(s-i)/t.width*100;this.state.image.insertColorStep(a),this.state.image.sortColorStep(),this.refresh(),this.updateData()}[Me("$el")](){var e=this.state.image.type;return e==="url"&&(e="image-resource"),{"data-selected-editor":e}}[Me("$stepList")](){return{style:{"background-image":this.getLinearGradient()}}}[me("$stepList")](){var e=this.state.image.colorsteps||[];return e.map(t=>{var i=this.$context.selection.isSelectedColorStep(t.id)?"selected":"";return` -
          -
          - ${Math.floor(t.percent*10)/10} -
          -
          -
          `})}removeStep(e){this.state.image.removeColorStep(e),this.refresh(),this.updateData()}selectStep(e){this.state.id=e,this.$context.selection.selectColorStep(e),this.state.image.colorsteps&&(this.currentStep=this.state.image.colorsteps.find(t=>this.$context.selection.isSelectedColorStep(t.id)),this.parent.trigger("selectColorStep",this.currentStep.color)),this.refresh()}[Ar("$el .step")](e){const t=e.$dt.data("id");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}sortToRight(e){this.state.image.sortToRight(),this.refresh(),this.updateData(),this.doFocus(e)}sortToLeft(e){this.state.image.sortToLeft(),this.refresh(),this.updateData(),this.doFocus(e)}appendColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t+1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&this.state.image.insertColorStep(r.percent+(100-r.percent)/2),this.refresh(),this.updateData(),this.doFocus(e)}doFocus(e){this.nextTick(()=>{this.refs.$stepList.$(".step[data-id='"+e+"']").focus()},100)}prependColorStep(e){const t=this.state.image.colorsteps.findIndex(a=>a.id===e),i=t-1,r=this.state.image.colorsteps[t],s=this.state.image.colorsteps[i];s?this.state.image.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&this.state.image.insertColorStep(r.percent),this.refresh(),this.updateData(),this.doFocus(e)}[Ke("$stepList .step")+at()+ct()](e){var t=e.$dt.attr("data-id");if(e.altKey)return this.removeStep(t),!1;e.$dt.focus(),this.isSelectedColorStep=this.$context.selection.isSelectedColorStep(t),this.selectStep(t),this.startXY=e.xy,this.cachedStepListRect=this.refs.$stepList.rect()}getStepListRect(){return this.cachedStepListRect}move(e){var t=this.getStepListRect(),i=t.x,r=t.right,s=this.startXY.x+e;sr&&(s=r);var a=(s-i)/t.width*100;this.$config.get("bodyEvent").shiftKey&&(a=Math.floor(a)),this.currentStep.percent=a,this.state.image.sortColorStep(),this.refresh(),this.updateData()}end(e,t){e===0&&t===0&&this.isSelectedColorStep&&this.currentStep&&(this.currentStep.cut=!this.currentStep.cut,this.refresh(),this.updateData()),this.doFocus(this.state.id)}getLinearGradient(){var{image:e}=this.state;return`linear-gradient(to right, ${Yr.toCSSColorString(e.colorsteps)})`}[we("setColorStepColor")](e){this.state.image.type==="static-gradient"?(this.state.image.setColor(e),this.refresh(),this.updateData()):this.currentStep&&(this.currentStep.color=e,this.refresh(),this.updateData())}[H("setImageUrl")](e,t){this.state.image&&(this.state.url=e,this.state.image.reset({url:e,datauri:t}),this.refresh(),this.updateData())}updateData(e={}){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.state.image.toString())}}class zN extends Mn{getTitle(){var e;return W("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||de.STATIC,onchange:"changeTabType",options:[{value:de.STATIC,text:"Static"},{value:de.LINEAR,text:"Linear Gradient"},{value:de.RADIAL,text:"Radial Gradient"},{value:de.CONIC,text:"Conic Gradient"},{value:de.REPEATING_LINEAR,text:"Repeating Linear Gradient"},{value:de.REPEATING_RADIAL,text:"Repeating Radial Gradient"},{value:de.REPEATING_CONIC,text:"Repeating Conic Gradient"},{value:de.URL,text:"Image"}]})}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` -
          -
          -
          -
          -
          -
          - ${W("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} -
          -
          - ${W("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} - ${W("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} -
          -
          -
          - - `}getColorString(){var e="";return this.state.image instanceof Yr&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[Me("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}[me("$gradientEditor")+It](){var e;return((e=this.state.image)==null?void 0:e.type)===de.URL?"":W("GradientEditor",{ref:"$g",value:`${this.state.image?this.state.image.toString():""}`,index:this.state.selectColorStepIndex,onchange:"changeGradientEditor"})}[H("updateGradientEditor")](e,t){this.state.image=gi(e)?Rt.parseImage(e):e,this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(i=>i.color===t.color&&i.percent===t.percent),this.children.$color.setValue(t.color),this.refresh()}[we("changeGradientEditor")](e){this.state.image=gi(e)?Rt.parseImage(e):e,this.updateTitle(),this.updateData()}[we("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[we("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[we("changeImageUrl")](e,t){this.state.image&&(this.state.image.reset({url:t}),this.trigger("changeGradientEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[H("showGradientPickerPopup")](e,t,i){e.changeEvent=e.changeEvent||"changeFillPopup",e.image=e.gradient,e.params=t,this.showByRect(this.makeRect(248,560,i)),this.setState(e),this.updateTitle(),this.emit("showGradientEditorView",{index:e.index})}[H("hideGradientickerPopup")](){this.hide(),this.emit("hideGradientEditorView")}onClose(){this.emit("hideGradientEditorView")}[H("selectColorStep")](e){this.children.$color.setValue(e)}[H("changeColorStep")](e={}){this.state.image.reset(P({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class VN extends Mn{getTitle(){var e;return W("SelectEditor",{ref:"$select",value:((e=this.state.image)==null?void 0:e.type)||de.STATIC,onchange:"changeTabType",options:[{value:de.STATIC,text:"Static"},{value:de.LINEAR,text:"Linear Gradient"},{value:de.RADIAL,text:"Radial Gradient"},{value:de.URL,text:"Image"}]})}initState(){return{image:da.create()}}initialize(){super.initialize(),this.selectedTab="static-gradient"}getClassName(){return"fill-picker-popup"}getBody(){var e,t;return` -
          -
          -
          -
          -
          -
          - ${W("EmbedColorPicker",{ref:"$color",onchange:"changeColor"})} -
          -
          - ${W("ImageSelectEditor",{ref:"$image",key:"image",value:(t=this.state.image)==null?void 0:t.url,onchange:"changeImageUrl"})} - ${W("ImageAssetPicker",{ref:"$asset",onchange:"changeImageUrl"})} -
          -
          -
          - - `}[Me("$body")](){var e;return{"data-selected-editor":(e=this.state.image)==null?void 0:e.type}}getColorString(){var e="";return this.state.image instanceof Yr&&(e=this.state.image.getColorString()),e}getCurrentColor(){return this.state.image.colorsteps[this.state.selectColorStepIndex||0].color}[me("$gradientEditor")](){var e;return((e=this.state.image)==null?void 0:e.type)===de.URL?"":W("FillEditor",{ref:"$g",value:`${this.state.image}`,index:this.state.selectColorStepIndex,onchange:"changeFillEditor"})}[H("updateFillEditor")](e,t=void 0){this.state.image=gi(e)?ii.parseImage(e):e,t&&(this.state.selectColorStepIndex=this.state.image.colorsteps.findIndex(i=>i.color===t.color&&i.percent===t.percent),this.children.$color.setValue(t.color)),this.refresh()}[we("changeFillEditor")](e){this.state.image=gi(e)?ii.parseImage(e):e,this.updateTitle(),this.updateData()}[we("changeTabType")](e,t){this.children.$g.trigger("changeTabType",t),this.refs.$body.attr("data-selected-editor",t)}[we("changeColor")](e){this.children.$g.trigger("setColorStepColor",e)}[we("changeImageUrl")](e){this.state.image&&(this.state.image.reset({url:e}),this.trigger("changeFillEditor",this.state.image))}updateTitle(){this.children.$select.setValue(this.state.image.type)}[H("showFillPickerPopup")](e,t,i){e.changeEvent=e.changeEvent||"changeFillPopup",e.params=t,this.showByRect(this.makeRect(248,560,i)),this.setState(e),this.updateTitle(),e.image.isGradient()&&this.trigger("selectColorStep",e.image.colorsteps[0].color),this.emit("showFillEditorView",{key:e.key})}[H("hideFillPickerPopup")](){this.hide(),this.emit("hideFillEditorView")}onClose(){this.emit("hideFillEditorView")}[H("selectColorStep")](e){this.children.$color.setValue(e)}[H("changeColorStep")](e={}){this.state.image.reset(P({},e)),this.updateData()}load(...e){this.$el.isShow()&&super.load(...e)}getValue(){return`${this.state.image}`}updateData(){this.state.instance.trigger(this.state.changeEvent,this.getValue(),this.state.params)}}class DN extends ge{initState(){return{index:this.props.index,label:this.props.label,simple:this.props.simple==="true",image:ii.parseImage(this.props.value||this.props.image||"transparent")}}get fillId(){return this.id+"fill"}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.state.index)}getValue(){return this.state.image.toString()}setValue(e){this.setState({image:ii.parseImage(e)})}[Me("$fillView")](){var e=this.state.image;return e?{innerHTML:e.toSVGString(this.fillId,{width:20,height:20,sizeType:"percent"})}:{innerHTML:""}}[Me("$fillColor")](){var e=this.state.image;return e?{fill:e.toFillValue(this.fillId)}:{fill:"transparent"}}[Me("$colors")](){var e=this.state.image;if(!e)return{fill:"transparent"};var t=e.type!="url"?`${e.colorsteps[0].color}`:"transparent";return[de.LINEAR,de.RADIAL].includes(e.type)&&(t=e.colorsteps.map(i=>``).join("")),{innerHTML:`
          ${t}
          `}}template(){var{label:e,simple:t}=this.state,i=e?"has-label":"";return` -
          - ${e?``:""} -
          -
          -
          - - - - - -
          -
          -
          -
          -
          - `}[ne()](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showFillPickerPopup",{instance:this,key:this.props.key,changeEvent:"changeFillSingle",image:this.state.image},null,this.$el.rect())}[H("changeFillSingle")](e){this.updateData({image:ii.parseImage(e)}),this.refresh()}}class FN extends ge{initState(){return{index:this.props.index,image:this.props.image,color:"rgba(0, 0, 0, 1)"}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[Me("$miniView")](){const e=this.$context.selection.currentProject;let t;if(this.state.image.type===de.URL){const i=e.getImageValueById(this.state.image.url);t=this.state.image.toString(i)}else t=this.state.image.toCSSString();return{style:{"background-image":t}}}template(){return` -
          -
          -
          -
          -
          -
          -
          - `}[ne("$preview")](){this.viewGradientPopup()}viewGradientPopup(){this.emit("showGradientPickerPopup",{instance:this,changeEvent:"changeGradientSingle",index:this.state.index,gradient:this.state.image},null,this.$el.rect())}[H("changeGradientSingle")](e){var i;e=Rt.parseImage(e);const t=(i=this.$context.selection.current.getBackgroundImage(this.state.index))==null?void 0:i.image;switch(t.type){case de.RADIAL:case de.REPEATING_RADIAL:e.reset({radialPosition:t.radialPosition||["50%","50%"],radialType:t.radialType||Li.CIRCLE});break;case de.CONIC:case de.REPEATING_CONIC:e.reset({angle:t.angle||0,radialPosition:t.radialPosition||["50%","50%"]});break;case de.LINEAR:case de.REPEATING_LINEAR:case de.STATIC:e.reset({angle:t.angle||0});break}this.updateData({image:e}),this.refresh()}}function Ib(n){n.registerElement({FillSingleEditor:DN,FillEditor:ON,GradientSingleEditor:FN}),n.registerAlias({"fill-single":"FillSingleEditor",fill:"FillEditor","gradient-single":"GradientSingleEditor"}),n.registerUI("popup",{FillPickerPopup:VN,GradientPickerPopup:zN})}var jN={title:"Conic",key:"conic",execute:function(n=42){return bn(n).map(()=>{var e=Vs(45,55),t=Vs(45,55),i=Vs(0,360);return{gradient:`conic-gradient(from ${i}deg at ${e}% ${t}%, ${ei.createColorStep(2,360,"deg")})`}})}};const NN=["0deg","45deg","90deg"];var BN={title:"Linear",key:"linear",execute:function(n=42){return bn(n).map(()=>({gradient:`linear-gradient(${hm(...NN)}, ${ei.createColorStep(2)})`}))}},GN={title:"Radial",key:"radial",execute:function(n=42){return bn(n).map(()=>{var e="circle";return{gradient:`radial-gradient(${e}, ${ei.createColorStep(2)})`}})}},HN={title:"Random Conic",key:"random-conic",execute:function(n=42){return bn(n).map(()=>({gradient:`conic-gradient(from 0deg at 50% 50%, ${ei.createColorStep(10,360,"deg")})`}))}};const UN=["0deg","45deg","90deg"];var WN={title:"Random Linear",key:"random-linear",execute:function(n=42){return bn(n).map(()=>({gradient:`linear-gradient(${hm(...UN)}, ${ei.createColorStep(10)})`}))}},XN={title:"Random Radial",key:"random-radial",execute:function(n=42){return bn(n).map(()=>({gradient:`radial-gradient(circle, ${ei.createColorStep(10)})`}))}},YN={title:"Repeat Conic",key:"repeat-conic",execute:function(n=42){return bn(n).map(()=>({gradient:`repeating-conic-gradient(from 0deg at 0% 50%, ${ei.createRepeatColorStep(10,"10deg")})`}))}};const KN=["0deg","45deg","90deg"];var qN={title:"Repeat Linear",key:"repeat-linear",execute:function(n=42){return bn(n).map(()=>({gradient:`repeating-linear-gradient(${hm(...KN)}, ${ei.createRepeatColorStep(2,"10px")})`}))}},ZN={title:"Repeat Radial",key:"repeat-radial",execute:function(n=42){return bn(n).map(()=>{var e="circle";return{gradient:`repeating-radial-gradient(${e}, ${ei.createRepeatColorStep(3,"6px")})`}})}},Lb=[BN,WN,qN,GN,XN,ZN,jN,HN,YN];const JN=Lb.map(n=>({value:n.key,text:n.title}));class QN extends Bt{getTitle(){return this.$i18n("gradient.asset.property.title")}initState(){return{mode:"grid",preset:"linear"}}getTools(){return'
          '}[me("$tools")](){return W("SelectEditor",{ref:"$preset",key:"preset",value:this.state.preset,options:JN,onchange:"changePreset"})}[we("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--gradient-assets-property"}[H(Lt)+Nt(100)](){this.show()}getBody(){return` -
          -
          -
          - `}[wn("$gradientList .gradient-item")](e){const t=e.$dt.attr("data-gradient");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/gradient",t)}[me("$gradientList")](){var e=Lb.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>`
          -
          -
          -
          -
          `);return e.edit&&t.push(`
          ${ie("add")}
          `),t}executeGradient(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshGradientAssets")):window.alert("Please select a project.")}[ne("$gradientList .add-gradient-item")](){this.executeGradient(e=>{e.createGradient({gradient:Yr.random(),name:"",variable:""})})}[ne("$gradientList .preview")](e){var t=e.$dt.closest("gradient-item"),i=t.attr("data-gradient");this.$commands.emit("drop.asset",{gradient:i})}}function eB(n){n.registerElement({GradientAssetsProperty:QN})}var xf=["circle","circle farthest-corner","circle closest-side","circle closest-corner","circle farthest-side","ellipse","ellipse farthest-corner","ellipse closest-side","ellipse closest-corner","ellipse farthest-side"],bf=["no-repeat","repeat","repeat-x","repeat-y","space","round"];const vc=20;class tB extends ge{initializeData(){const e=this.$context.selection.current.backgroundImage,t=rn(e);this.state.backgroundImages=Rt.parseStyle(t),this.state.backImages=Rt.parseStyle(t);const i=this.$context.selection.current;this.state.gradient=this.state.backImages[this.state.index],this.state.contentBox=i.contentBox,this.state.backgroundImageMatrix=i.createBackgroundImageMatrix(this.state.index)}updateData(){var e=Zt(Rt.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:e}))}}class iB extends tB{[Ke("$el .step-point")+at("moveStepPoint")+ct("moveEndStepPoint")](e){this.$el.toggleClass("dragging",!0),this.initializeData();const t=+e.$dt.data("colorstep-index");this.localColorStep=this.state.backgroundImages[this.state.index].image.colorsteps[t],this.localColorStepTimingCount=this.localColorStep.timing.count,this.localColorCubicBezierTimingCount=this.localColorStep.timingCount}moveStepPoint(e,t){const i=(e<0?-1:1)*Math.ceil(Fe([0,0,0],[e,t,0])/10);switch(this.localColorStep.timing.name){case Ze.LINEAR:break;case Ze.STEPS:this.localColorStep.timing.count=Math.max(this.localColorStepTimingCount+i,1);break;default:this.localColorStep.timingCount=Math.max(this.localColorCubicBezierTimingCount+i,1);break}this.updateData()}makeTimingString(e){switch(e.name){case Ze.LINEAR:return"";case Ze.EASE:case Ze.EASE_IN:case Ze.EASE_OUT:case Ze.EASE_IN_OUT:return`${e.name}`;default:return`cubic-bezier(${e.x1}, ${e.y1}, ${e.x2}, ${e.y2})`}}moveEndStepPoint(e,t){if(e===0&&t===0){const{timing:i}=this.localColorStep;switch(i.name){case Ze.STEPS:this.localColorStep.timing.direction=this.localColorStep.timing.direction==="start"?"end":"start";break;case Ze.LINEAR:break;case Ze.PATH:this.emit("showComponentPopup",{title:"Path Editor",width:400,inspector:[{key:"path",editor:"path",editorOptions:{height:160},defaultValue:i.d}],changeEvent:(r,s)=>{this.localColorStep.timing=hr(`path(${s})`).parsed,this.updateData()}});break;default:this.emit("showComponentPopup",{title:"Cubic Bezier",width:220,inspector:[{key:"timing",editor:"cubic-bezier",editorOptions:{isAnimating:!1},defaultValue:this.makeTimingString(i)}],changeEvent:(r,s)=>{this.localColorStep.timing=hr(s).parsed,this.updateData()}}),this.$el.toggleClass("dragging",!1);return}}this.updateData(),this.$el.toggleClass("dragging",!1)}}class rB extends iB{[Ke("$el .resizer")+vn+at("calculateMovedResizer")+ct("calculateMovedEndResizer")+wt](e){this.state.$target=e.$dt,this.$el.toggleClass("dragging",!0),this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e),this.isShiftKey=e.shiftKey}calculateMovedResizer(){const e=this.$viewport.getWorldPosition(),t=yr(this.initMousePoint),i=e,r=this.$context.selection.current.absoluteMatrixInverse,[s,a]=He([t,i],r),o=vt([],a,s),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x,l.y,this.state.contentBox,o[0],o[1],{shiftKey:this.$config.get("bodyEvent").shiftKey});this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y,width:h.width,height:h.height}),this.updateData()}calculateMovedEndResizer(){this.updateData(),this.$el.toggleClass("dragging",!1)}[Ke("$el .back-rect")+vn+at("calculateMovedRect")+ct("calculateMovedEndRect")+wt](e){this.state.$target=e.$dt,this.initializeData(),this.initMousePoint=this.$viewport.getWorldPosition(e)}calculateMovedRect(){const e=this.$viewport.getWorldPosition(),t=yr(this.initMousePoint),i=e,r=this.$context.selection.current.absoluteMatrixInverse,[s,a]=He([t,i],r),o=vt([],a,s),{backRect:l}=this.state.backgroundImageMatrix,h=this.state.gradient.recoverOffset(l.x+o[0],l.y+o[1],this.state.contentBox);this.state.backgroundImages[this.state.index].reset({x:h.x,y:h.y}),this.updateData()}calculateMovedEndRect(e,t){if(e==0&&t===0){const i=bf.indexOf(this.state.gradient.repeat);this.state.backgroundImages[this.state.index].repeat=bf[(i+1)%bf.length]}this.updateData()}}class nB extends rB{[Ke("$el .gradient-angle .rotate")+vn+at("calculateMovedAngle")+ct("calculatedMovedEndAngle")+wt](e){this.state.$target=e.$dt,this.initializeData(),this.$el.toggleClass("dragging",!0),this.state.centerX=+this.state.$target.data("center-x"),this.state.centerY=+this.state.$target.data("center-y"),this.state.startX=+this.state.$target.attr("cx"),this.state.startY=+this.state.$target.attr("cy"),this.state.$target.toggleClass("moved")}calculateMovedAngle(e,t){const i=[this.state.centerX,this.state.centerY,0],r=[this.state.startX,this.state.startY,0],a=em(r,i,[e,t,0]);let o=Math.floor(this.state.gradient.image.angle+a);this.$config.get("bodyEvent").shiftKey&&(o-=o%this.$config.get("fixed.gradient.angle")),this.state.backgroundImages[this.state.index].image.angle=o,this.updateData()}calculatedMovedEndAngle(){this.state.$target.toggleClass("moved"),this.$el.toggleClass("dragging",!1),this.updateData()}}class sB extends nB{[Ar("$el .colorstep")](e){const t=+e.$dt.data("index");switch(e.code){case"Delete":case"Backspace":this.removeStep(t);break;case"BracketRight":this.sortToRight(t);break;case"BracketLeft":this.sortToLeft(t);break;case"Equal":this.appendColorStep(t);break;case"Minus":this.prependColorStep(t);break}}removeStep(e){const t=this.state.lastBackgroundMatrix.backgroundImage.image;t.removeColorStepByIndex(e),this.updateColorStepStatus(t,-1)}sortToRight(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToRight(),this.updateColorStepStatus(e,-1)}sortToLeft(){const e=this.state.lastBackgroundMatrix.backgroundImage.image;e.sortToLeft(),this.updateColorStepStatus(e,-1)}appendColorStep(e){const t=e+1,i=this.state.lastBackgroundMatrix.backgroundImage.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(r.percent+(s.percent-r.percent)/2):r.percent!==100&&(a=i.insertColorStep(r.percent+(100-r.percent)/2)),this.updateColorStepStatus(i,a)}prependColorStep(e){const t=e-1,i=this.state.lastBackgroundMatrix.backgroundImage.image,r=i.colorsteps[e],s=i.colorsteps[t];let a=-1;s?a=i.insertColorStep(s.percent+(r.percent-s.percent)/2):r.percent!==0&&(a=i.insertColorStep(r.percent)),this.updateColorStepStatus(i,a)}[Ke("$el .colorstep")+at("moveColorStep")+ct("moveEndColorStep")](e){this.$el.toggleClass("dragging",!0),this.state.hoverColorStep=null,this.initializeData();const t=e.$dt;if(this.$targetIndex=+t.data("index"),e.altKey){this.removeStep(this.$targetIndex),this.state.altKey=!0;return}const i=this.state.backgroundImageMatrix;switch(i.backgroundImage.image.type){case de.LINEAR:case de.REPEATING_LINEAR:this.centerPosition=this.$viewport.applyVertex(i.centerPosition),this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint),this.screenXY=this.$viewport.applyVertex(i.colorsteps[this.$targetIndex].pos),this.rotateInverse=cr(-this.state.gradient.image.angle,this.centerPosition);break;case de.RADIAL:case de.REPEATING_RADIAL:this.centerPosition=this.$viewport.applyVertex(i.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(i.startPoint),this.endPoint=this.$viewport.applyVertex(i.endPoint),this.screenXY=this.$viewport.applyVertex(i.colorsteps[this.$targetIndex].pos);const r=vt([],this.endPoint,this.startPoint),s=si(r[0],r[1])-180;this.rotateInverse=cr(-s,this.centerPosition);break;case de.CONIC:case de.REPEATING_CONIC:this.centerPosition=this.$viewport.applyVertex(i.radialCenterPosition),this.startPoint=this.$viewport.applyVertex(i.shapePoint),this.newStartPoint=vt([],this.startPoint,this.centerPosition),this.newStartAngle=si(this.newStartPoint[0],this.newStartPoint[1]);const a=+t.data("x"),o=+t.data("y");this.screenXY=[a,o,0],this.endPoint=this.$viewport.applyVertex(i.endPoint),this.rotateInverse=Wi();break}}moveColorStep(e,t){if(this.state.altKey)return;const i=bt([],this.screenXY,[e,t,0]),[r,s,a]=He([this.startPoint,this.endPoint,i],this.rotateInverse),o=this.state.backgroundImageMatrix;let l=0,c=0;switch(o.backgroundImage.image.type){case de.LINEAR:case de.REPEATING_LINEAR:var[u,p,f]=[r[1],s[1],a[1]],g=Math.abs(u-p);if(uf)l=Math.abs(f-u)/g*100;else{var h=Math.abs(u-f),d=Math.abs(p-f);l=h/(d+h)*100}l=Math.max(0,Math.min(100,l)),c=Fe(this.startPoint,this.endPoint);break;case de.RADIAL:case de.REPEATING_RADIAL:var[u,p,f]=[r[0],s[0],a[0]],g=Math.abs(u-p);fp?l=Math.abs(f-u)/g*100:l=(f-u)/g*100,l=Math.max(0,Math.min(100,l)),c=Fe(this.startPoint,this.endPoint);break;case de.CONIC:case de.REPEATING_CONIC:const b=vt([],i,this.centerPosition);let S=si(b[0],b[1]);this.$config.get("bodyEvent").shiftKey&&(S-=S%this.$config.get("fixed.gradient.angle")),l=(S-this.newStartAngle)/360*100,l=(l+100)%100,c=100;break}const m=this.state.gradient.image;m.colorsteps[this.$targetIndex].setValue(l,c);const v={color:m.colorsteps[this.$targetIndex].color,percent:m.colorsteps[this.$targetIndex].percent},x=this.state.backgroundImages[this.state.index].image;x.colorsteps=m.colorsteps.map(b=>b),x.sortColorStep(),this.emit("updateGradientEditor",x,v);var _=Zt(Rt.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:_}))}moveEndColorStep(e,t){if(this.state.altKey){this.state.altKey=!1;return}if(e===0&&t===0){const r=this.state.backgroundImages[this.state.index].image;r.colorsteps[this.$targetIndex].toggleTiming();const s={color:r.colorsteps[this.$targetIndex].color,percent:r.colorsteps[this.$targetIndex].percent};this.emit("updateGradientEditor",r,s);var i=Zt(Rt.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:i}))}this.$el.toggleClass("dragging",!1)}updateColorStepStatus(e,t){this.initializeData();const{color:i,percent:r}=e.colorsteps[t]||{};this.emit("updateGradientEditor",e,{color:i,percent:r}),this.state.backgroundImages[this.state.index].image=e;var s=Zt(Rt.toProperty(this.state.backgroundImages));this.$commands.executeCommand("setAttribute","change background image",this.$context.selection.packByValue({backgroundImage:s})),this.state.hoverColorStep=null}[Ke("$el .area-line")](){const e=this.state.lastBackgroundMatrix.backgroundImage.image,t=e.insertColorStep(this.state.hoverColorStep.percent);this.updateColorStepStatus(e,t)}[op("$el .area-line")](){this.state.hoverColorStep&&(this.state.hoverColorStep=null,this.refresh())}[Kl("$el .area-line")](e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition(e)),i=this.state.lastBackgroundMatrix.backgroundImage.image;let r,s,a;switch(i.type){case de.LINEAR:case de.REPEATING_LINEAR:[r,s,a]=He([this.state.startPoint,this.state.endPoint,t],this.state.rotateInverse);var d=0,[o,l,c]=[r[1],s[1],a[1]],h=Math.abs(o-l);if(oc)d=Math.abs(c-o)/h*100;else{const m=Math.abs(o-c),v=Math.abs(l-c);d=m/(v+m)*100}this.state.hoverColorStep=this.state.lastBackgroundMatrix.backgroundImage.image.pickColorStep(d);break;case de.RADIAL:case de.REPEATING_RADIAL:[r,s,a]=[this.state.startPoint,this.state.endPoint,t];var d=0,[o,l,c]=[r[0],s[0],a[0]],h=Math.abs(o-l);c=180?1:0)&&(u-=180);var[f]=He([Re([],e,bt([],e,[-1,0,0]),c)],cr(u,e));switch(o.name){case Ze.LINEAR:return"";case Ze.STEPS:return V(Ji,null,V("circle",{class:"step-point","data-colorstep-index":t,cx:f[0],cy:f[1],r:7}),V("text",{x:f[0],y:f[1],dy:4,"text-anchor":"middle"},o.count));default:return V(Ji,null,V("circle",{class:"step-point","data-colorstep-index":t,cx:f[0],cy:f[1],r:7}),V("text",{x:f[0],y:f[1],dy:4,"text-anchor":"middle"},l))}}makeTimingArea(e,t,i,r){const s=i.stickScreenXYInEnd,a=t.stickScreenXYInStart;return V("g",{class:"timing-area"},t.timing.name===Ze.LINEAR?"":V("path",{class:"timing-path",d:` - M ${s[0]} ${s[1]} - L ${a[0]} ${a[1]} - `}),this.makeTimingCircle(e,t,i,r))}getRealAngle(e){return e<0?360+e:e}makeConicTimingArea(e,t,i,r,s,a,o){const l=r.stickScreenXY,c=i.stickScreenXY,h=si(...vt([],l,e))+o,d=si(...vt([],c,e))+o,u=360-h,f=Math.abs(u+d)%360>=180?1:0;return V("g",{class:"timing-area"},i.timing.name===Ze.LINEAR?"":V(Ji,null,V("path",{class:"timing-path",d:` - M ${l[0]} ${l[1]} - A ${a} ${a} 0 ${f} 1 ${c[0]} ${c[1]} - `})),this.makeConicTimingCircle(e,t,i,r,a))}makeGradientPoint(e,t,i,r,s){const a=vc,o=vt([],i,t),l=si(o[0],o[1])-180;return V(Ji,null,e.map((c,h)=>h===0?"":this.makeTimingArea(h,c,e[h-1],vc)),e.map((c,h)=>V("g",{transform:`rotate(${l} ${c.stickScreenXY[0]} ${c.stickScreenXY[1]})`},V("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.stickScreenXY[0],y:c.stickScreenXY[1],width:a,height:a,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeTimingLine(c.timing,a,c.stickScreenXY[0],c.stickScreenXY[1]))),V("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),V("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&V("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&V("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeConicGradientPoint(e,t,i,r,s,a,o){const l=vc;return V(Ji,null,e.map((c,h)=>h===0?"":this.makeConicTimingArea(t,h,c,e[h-1],vc,a,o)),e.map((c,h)=>{const d=si(...vt([],c.screenXY,t))-180;return V("g",{transform:`rotate(${d} ${c.screenXY[0]} ${c.screenXY[1]})`},V("rect",{id:c.id,"data-index":h,class:"colorstep",x:c.screenXY[0]-l/2,y:c.screenXY[1]-l/2,width:l,height:l,fill:c.color,tabIndex:-1,"data-x":c.screenXY[0],"data-y":c.screenXY[1]}),this.makeConicTimingLine(c.timing,l,c.screenXY[0],c.screenXY[1],o))}),V("circle",{class:"point","data-type":"start",cx:t[0],cy:t[1]}),V("circle",{class:"point","data-type":"end",cx:i[0],cy:i[1]}),r&&V("circle",{class:"point","data-type":"shape",cx:r[0],cy:r[1]}),s&&V("circle",{class:"hover-colorstep",r:"5",cx:s[0],cy:s[1],fill:this.state.hoverColorStep.color}))}makeGradientRect(e){const t=this.$viewport.applyVerties(e.backVerties);return V(Ji,null,V("div",{class:"gradient-rect"},V("svg",null,V("path",{class:"back-rect",d:` - M ${t[0][0]} ${t[0][1]} - L ${t[1][0]} ${t[1][1]} - L ${t[2][0]} ${t[2][1]} - L ${t[3][0]} ${t[3][1]} - Z - `}))),V("div",{class:"resizer","data-direction":"bottom-right",style:{left:y.px(t[2][0]),top:y.px(t[2][1])}}))}makeCenterPoint(e){const{image:t}=e.backgroundImage;switch(t.type){case de.LINEAR:case de.REPEATING_LINEAR:return this.makeLinearCenterPoint(e);case de.RADIAL:case de.REPEATING_RADIAL:return this.makeRadialCenterPoint(e);case de.CONIC:case de.REPEATING_CONIC:return this.makeConicCenterPoint(e)}return""}makeConicCenterPoint(e){const{image:t}=e.backgroundImage;let i,r,s,a,o,l;i=this.$viewport.applyVertex(e.radialCenterPosition),s=this.$viewport.applyVertex(e.startPoint),a=this.$viewport.applyVertex(e.endPoint),o=this.$viewport.applyVertex(e.shapePoint);let c=Fe(s,a)/2;c<50&&(c=50),l=e.colorsteps.map(p=>{p.screenXY=this.$viewport.applyVertex(p.pos);const f=Fe(p.screenXY,s);fc&&(p.screenXY=Re([],s,p.screenXY,(c+20)/f)),p.stickScreenXY=yr(p.screenXY);const g=vt([],p.screenXY,s);return p.angle=si(g[0],g[1]),p}),i=this.$viewport.applyVertex(e.radialCenterPosition);const h=this.$viewport.applyVertex(e.shapePoint);r=Re([],i,Re([],i,h,1/Fe(i,h)),c+50);const d=Re([],r,i,1);let u=null;if(this.state.hoverColorStep){const p=this.state.hoverColorStep.percent*3.6,f=Fe(i,o);[u]=He([Re([],i,o,(c+20)/f)],cr(p,i))}return V(Ji,null,V("div",{class:"gradient-position center","data-radial-type":t.radialType,style:{left:y.px(i[0]),top:y.px(i[1])}}),V("svg",{class:"gradient-angle"},V("circle",{class:"size",cx:s[0],cy:s[1],r:c}),V("circle",{class:"area-line",cx:s[0],cy:s[1],r:c}),V("path",{class:"stick",d:` - M ${d[0]} ${d[1]} - L ${r[0]} ${r[1]} - `}),V("circle",{class:"rotate",cx:r[0],cy:r[1],r:"7","data-center-x":i[0],"data-center-y":i[1]}),this.makeConicGradientPoint(l,s,a,o,u,c+20,t.angle)))}makeRadialCenterPoint(e){let t,i,r,s;i=this.$viewport.applyVertex(e.startPoint),r=this.$viewport.applyVertex(e.endPoint),s=this.$viewport.applyVertex(e.shapePoint),t=this.makeStickPoint(e.colorsteps,i,r);let a=null;return this.state.hoverColorStep&&(a=Re([],i,r,this.state.hoverColorStep.percent/100)),V(Ji,null,V("svg",{class:"gradient-radial-line"},V("path",{d:` - M ${i[0]} ${i[1]} - L ${r[0]} ${r[1]} - `,class:"area-line"}),V("path",{d:` - M ${i[0]} ${i[1]} - L ${r[0]} ${r[1]} - `,class:"start-end-line"}),V("path",{d:` - M ${i[0]} ${i[1]} - L ${s[0]} ${s[1]} - `,class:"shape-line"}),this.makeGradientPoint(t,i,r,s,a)))}makeStickPoint(e,t,i){const r=vc,s=vt([],i,t),a=si(s[0],s[1])-180,o=cr(-a,t),l=Zi([],o);return e.map(c=>{c.screenXY=this.$viewport.applyVertex(c.pos);const[h]=He([c.screenXY],o);return[c.stickScreenXY,c.stickScreenXYInStart,c.stickScreenXYInEnd]=He([[h[0]-r/2,h[1]-r*1.5,0],[h[0]-r/2,h[1]-r*1.5+r/2,0],[h[0]+r/2,h[1]-r*1.5+r/2,0]],l),c})}makeLinearCenterPoint(e){let t,i,r,s,a,o,l;r=this.$viewport.applyVertex(e.startPoint),s=this.$viewport.applyVertex(e.endPoint),a=this.$viewport.applyVertex(e.areaStartPoint),o=this.$viewport.applyVertex(e.areaEndPoint),t=this.$viewport.applyVertex(e.centerPosition),l=this.makeStickPoint(e.colorsteps,r,s);const c=Fe(t,s),[h]=He([s],cr(90,Re([],r,s,.5)));i=Re([],t,Re([],t,h,1/Fe(t,h)),c+20);const d=Re([],i,t,20/(c+20));let u=null;return this.state.hoverColorStep&&(u=Re([],r,s,this.state.hoverColorStep.percent/100)),V("svg",{class:"gradient-angle"},V("path",{class:"stick",d:` - M ${d[0]} ${d[1]} - L ${i[0]} ${i[1]} - `}),V("circle",{class:"size",cx:t[0],cy:t[1],r:Fe(t,r)}),V("circle",{class:"rotate",cx:i[0],cy:i[1],r:"7","data-center-x":t[0],"data-center-y":t[1]}),V("path",{d:` - M ${a[0]} ${a[1]} - L ${o[0]} ${o[1]} - `,class:"area-line"}),V("path",{d:` - M ${r[0]} ${r[1]} - L ${s[0]} ${s[1]} - `,class:"start-end-line"}),this.makeGradientPoint(l,r,s,null,u))}[me("$el")+It](){const e=this.$context.selection.current;if(!e)return"";const t=e.createBackgroundImageMatrix(this.state.index);this.state.lastBackgroundMatrix=t;const i=t.backgroundImage.image;switch(i.type){case de.LINEAR:case de.REPEATING_LINEAR:this.state.centerPosition=this.$viewport.applyVertex(t.centerPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint),this.state.rotateInverse=cr(-1*t.backgroundImage.image.angle,this.state.centerPosition);break;case de.RADIAL:case de.REPEATING_RADIAL:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.startPoint),this.state.endPoint=this.$viewport.applyVertex(t.endPoint);break;case de.CONIC:case de.REPEATING_CONIC:this.state.centerPosition=this.$viewport.applyVertex(t.radialCenterPosition),this.state.startPoint=this.$viewport.applyVertex(t.shapePoint);break}return V("div",null,this.makeGradientRect(t),i.type===de.STATIC||i.type===de.IMAGE?null:this.makeCenterPoint(t))}}function kb(n){n.registerUI("canvas.view",{GradientEditorView:aB})}const xl=(n,e,t="base-line")=>``,oB=(n,e)=>xl(n,e),lB=(n,e)=>xl(n,e),P0=n=>``,T0=(n,e=3,t="left")=>t==="left"?``:t==="right"?``:t==="up"?``:t==="down"?``:``;class cB extends ge{template(){return``}initState(){return{list:[]}}[Me("$guide")](){return{svgDiff:`${this.createGuideLine(this.state.list)}`}}createLayerLine(){return""}filterGuideLine(e){return e=e.filter(Boolean),e}createGuideLine(e){var t=[],i=[];e=this.filterGuideLine(e);for(var r=0,s=e.length;r0&&t.push(xl(f,g,"dash-line")),m&&t.push(xl(g,m,"dash-line"))),l==="y"&&(p>0&&t.push(xl(f,g,"dash-line")),m&&t.push(xl(g,m,"dash-line"))),l==="x"&&t.push(oB(g,f)),l==="y"&&t.push(lB(g,f)),this.state.hasVerties&&(t.push(T0(f,3,"vertex")),t.push(T0(g,3,"vertex"))),d&&(this.$context.selection.isOne&&this.$editor.isPointerDown||this.$context.selection.isMany&&!this.$editor.isPointerMove)&&t.push(P0(this.$viewport.applyVerties(d))),u&&t.push(P0(this.$viewport.applyVerties(u)))}return[...t,...i].join("")}removeGuideLine(){this.setState({list:[]})}setGuideLine(e,t=!1){this.setState({list:e,hasVerties:t})}refreshSmartGuides(e){if(this.$context.selection.isEmpty)return;const t=xn(this.$context.selection.verties);let i;if(e)i=e.map(a=>xn(a));else{const a=this.$context.snapManager.snapTargetLayers.map(o=>{const l=xn(o.verties);return{targetVerties:l,dist:Fe(l[4],t[4])}});a.sort((o,l)=>o.dist-l.dist),i=a.map(o=>o.targetVerties)}const r=i.map(a=>zI(t,a));r.sort((a,o)=>a[3]-o[3]);const s=[r[0],r[1]].filter(Boolean);this.setGuideLine(s)}refreshSmartGuidesForVerties(e=0){let t=this.$context.selection.verties;t.length&&(t=[...t,Re([],t[0],t[1],.5),Re([],t[1],t[2],.5),Re([],t[2],t[3],.5),Re([],t[3],t[0],.5)]);const i=this.$context.snapManager.findGuide(t,e);this.setGuideLine(i,!0)}[H("removeGuideLine",Lt)](){this.removeGuideLine()}[H("refreshGuideLineByTarget")](e=[]){return this.refreshSmartGuides(e)}get currentDistWithScale(){return 1/this.$viewport.scale}[H(ai,Mo)](){this.refreshSmartGuidesForVerties(this.currentDistWithScale)}[H(Ki)](){this.$context.selection.hasChangedField("d","clip-path")||this.refreshSmartGuidesForVerties(this.currentDistWithScale)}}function Ab(n){n.registerUI("canvas.view",{GuideLineView:cB})}class hB extends Bt{afterRender(){this.show()}getTitle(){return"History"}getBody(){return` -
          - `}[me("$body")+It](){return this.$editor.context.history.map((e,t)=>e==="-"?"
          -
          ":` -
          - ${t===this.$editor.context.history.currentIndex?Ue.arrowRight:""} - ${e.message} -
          - `)}[H("refreshHistoryList")](){this.refresh()}}function Rb(n){n.registerUI("inspector.tab.history",{HistoryProperty:hB})}class dB extends ge{template(){return V("div",{class:"elf--hover-view sepia(0.2)"},V("div",{class:"elf--hover-rect",ref:"$hoverRect"}))}checkModeView(){const e=this.$config.get("bodyEvent");return!this.$viewport.checkInViewport(this.$viewport.getWorldPosition(e))||!qe.create(e.target).closest("elf--page-container")?!1:this.$modeView.isCurrentMode(Ro.CanvasView)&&this.$stateManager.isPointerUp}[qt("bodyEvent")+et("checkModeView")](){var a,o,l;if(this.$config.true("set.move.control.point")){this.$context.selection.setHoverId(""),this.renderHoverLayer();return}const e=this.$context.selection.filteredLayers,t=this.$viewport.getWorldPosition(this.$config.get("bodyEvent"));let r=e.filter(c=>c.hasPoint(t[0],t[1])).filter(c=>c.isNot("artboard")),s=(a=r[0])==null?void 0:a.id;if(this.$context.selection.isEmpty)s=(o=r[0])==null?void 0:o.id;else if(this.$context.selection.isOne){const c=this.$context.selection.current.pathIds;r=r.filter(h=>c.includes(h.id)===!1||h.id===this.$context.selection.current.id),s=(l=r[0])==null?void 0:l.id}s?this.$context.selection.setHoverId(s)&&this.renderHoverLayer():(this.$context.selection.setHoverId(""),this.renderHoverLayer())}[qt("set.move.control.point")](){this.renderHoverLayer()}[H("refreshHoverView")](e){this.$context.selection.setHoverId(e)&&this.renderHoverLayer()}[H(ai,Ki)](){this.$context.selection.setHoverId(""),this.renderHoverLayer()}createVisiblePath(e){if(!e.is("boolean-path"))return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` - - - - `}renderHoverLayer(){const e=this.$context.selection.hoverItems;if(e.length===0)this.refs.$hoverRect.updateDiff("");else{const t=e[0].verties,i=this.createPointerLine(this.$viewport.applyVerties(t)),r=this.createOffsetLine();this.refs.$hoverRect.updateDiff(i+r)}}getOffsetVerties(e,t){const i=e.verties,r=t.verties,s={},a=this.$viewport.applyVerties([[i[0][0],Re([],i[0],i[3],.5)[1],0],[r[0][0],Re([],i[0],i[3],.5)[1],0]]);var l=Fe(...a);l>0&&(s.left=a);const o=this.$viewport.applyVerties([[Re([],i[0],i[1],.5)[0],i[1][1],0],[Re([],i[0],i[1],.5)[0],r[1][1],0]]);var l=Fe(...o);return l>0&&(s.top=o),s}createOffsetLine(){const e=this.$context.selection.hoverItems[0]||this.$context.selection.current;if(!e||!e.parent||e.parent&&e.parent.is("project"))return"";if(this.$context.selection.isEmpty){const t=this.getOffsetVerties(e,e.parent);return` - - - - `}else{const t=this.getOffsetVerties(e,this.$context.selection.current);return` - - - - `}}createPointerLine(e){return e.length===0?"":(e=e.filter((t,i)=>i<4),``)}}function Ob(n){n.registerUI("canvas.view",{HoverView:dB})}const uB=["","100x100","200x200","300x300","400x300","900x600","1024x762"];class pB extends Bt{getClassName(){return"item"}getTitle(){return this.$i18n("image.property.title")}getBody(){return"
          "}getFooter(){return` -
          - - - -
          -
          - ${W("SelectEditor",{ref:"$select",label:this.$i18n("image.property.size"),key:"size",value:"",options:uB,onchange:"changeImageSize"})} - -
          - `}[we("changeImageSize")](e,t){var[i,r]=t.split("x").map(s=>s);this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:i,height:r}))}[ne("$resize")](){var e=this.$context.selection.current;e&&this.$commands.executeCommand("setAttribute","resize image",this.$context.selection.packByValue({width:t=>t.naturalWidth,height:t=>t.naturalHeight}))}[Me("$sizeInfo")](){var e=this.$context.selection.current||{};return{innerHTML:`${this.$i18n("image.property.width")}: ${e.naturalWidth}, ${this.$i18n("image.property.height")}: ${e.naturalHeight}`}}[me("$body")](){var e=this.$context.selection.current||{},t=e.src||"";return W("ImageSelectEditor",{ref:"$1",key:"src",value:t,onchange:"changeSelect"})}[we("changeSelect")](e,t,i){var r=this.$context.selection.current;r&&(r.reset(P({src:t},i)),this.bindData("$sizeInfo"),this.$commands.executeCommand("setAttribute","change image",this.$context.selection.packByValue(P({src:t},i))))}[H(Lt)+Nt(100)](){this.refreshShow(["image"])}}class fB extends ge{initState(){return{key:this.props.key,value:this.props.value}}template(){return V("div",{class:"elf--image-select-editor",ref:"$body"})}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[me("$body")](){const e=this.$context.selection.currentProject;if(!e)return;const t=e.getImageValueById(this.state.value);return V(Ji,null,V("div",{class:"preview-container"},t?V("img",{src:t}):null,V("input",{type:"file",ref:"$file",accept:"image/*"})),V("div",{class:"select-container"},V("button",{type:"button",ref:"$select"},this.$i18n("image.select.editor.button"))))}[Yn("$file")](e){var t=[...e.target.files];t.length&&this.$commands.emit("updateImageAssetItem",t[0],i=>{this.trigger("changeImageSelectEditor",i)})}[ne("$select")](){this.emit("showImageSelectPopup",{context:this,changeEvent:"changeImageSelectEditor",value:this.state.value})}[H("changeImageSelectEditor")](e){this.updateData({value:e}),this.refresh()}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}}class gB extends Mn{getTitle(){return"Select a image"}getClassName(){return"compact"}initState(){return{value:""}}updateData(e={}){this.setState(e,!1),this.state.context.trigger(this.state.changeEvent,this.state.value,{width:this.state.width,height:this.state.height,naturalWidth:this.state.naturalWidth,naturalHeight:this.state.naturalHeight})}getBody(){return`
          `}[me("$imageBox")+It](){return""}[ne("$imageBox .image-item")](e){var t=e.$dt.$("img");this.updateData({value:t.attr("data-id"),naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight,width:t.naturalWidth,height:t.naturalHeight}),this.trigger("hideImageSelectPopup")}[H("showImageSelectPopup")](e,t){this.setState({context:e.context,changeEvent:e.changeEvent,value:e.value,params:t},!1),this.refresh(),this.show(500)}[H("hideImageSelectPopup")](){this.hide()}}function mB(n){n.registerElement({ImageSelectEditor:fB}),n.registerUI("inspector.tab.style",{ImageProperty:pB}),n.registerUI("popup",{ImageSelectPopup:gB})}class vB extends ge{initState(){return{mode:"grid"}}template(){return` -
          -
          -
          - `}[me("$imageList")+It](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,i=t.map(r=>` -
          -
          - -
          -
          - `);return i}[ne("$imageList .image-item")](e){var t=e.$dt.$("img");this.updateData(t.attr("src"))}updateData(e){this.parent.trigger(this.props.onchange,e)}[H("addImageAsset")](){this.refresh()}}function yB(n){window.URL.revokeObjectURL(n)}class xB extends Bt{getTitle(){return this.$i18n("image.asset.property.title")}initState(){return{mode:"grid"}}getClassNamef(){return"elf--image-assets-property"}afterRender(){this.show()}getBody(){return` -
          -
          -
          - `}[me("$imageList")+It](){var e=this.$context.selection.currentProject||{images:[]},t=e.images,i=t.map((r,s)=>` -
          -
          - -
          -
          - - -
          -
          - `);return` -
          - ${i.join("")} -
          - - -
          -
          - - `}executeImage(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshImageAssets")):window.alert("Please select a project.")}[wn("$imageList .preview img")](e){var t=+e.$dt.closest("image-item").attr("data-index"),i=this.$context.selection.currentProject;if(i){var r=i.images[t];e.dataTransfer.setData("image/info",r.local)}}[Yn("$imageList .add-image-item input[type=file]")](e){this.executeImage(()=>{[...e.target.files].forEach(t=>{this.$commands.emit("updateImageAssetItem",t)})})}[ne("$imageList .remove")](e){var t=e.$dt.closest("image-item"),i=+t.attr("data-index");this.executeImage(r=>{r.removeImage(i),yB(t.$(".preview img").attr("src"))})}[ne("$imageList .copy")](e){var t=e.$dt.closest("image-item"),i=+t.attr("data-index");this.executeImage(r=>{r.copyImage(i)})}[H("addImageAsset")](){this.refresh()}}function bB(n){n.registerElement({ImageAssetPicker:vB,ImageAssetsProperty:xB})}class _B extends Mn{getTitle(){return this.$i18n("keyframe.popup.title")}initState(){return{name:"none",offsets:[]}}updateData(e){this.setState(e,!1),this.emit("changeKeyframePopup",this.state)}getBody(){return` -
          -
          - ${this.templateForName()} - ${this.templateForOffset()} -
          -
          `}templateForOffset(){return` -
          - ${W("OffsetEditor",{ref:"$offsetEditor"})} -
          - `}templateForName(){return` -
          - -
          - -
          -
          - `}[di("$name")](e){if(this.refs.$name.value.match(/^[a-zA-Z0-9\b]+$/))this.updateData({name:this.refs.$name.value});else return e.preventDefault(),e.stopPropagation(),!1}getOffsetData(){var e=this.state.offsets.map(t=>t);return{offsets:e}}refresh(){this.refs.$name.val(this.state.name),this.emit("showOffsetEditor",this.getOffsetData())}[H("changeOffsetEditor")](e){this.updateData(e)}[H("showKeyframePopup")](e){this.setState(e),this.refresh(),this.show(240)}[H("hideKeyframePopup")](){this.$el.hide()}}class SB extends Bt{getTitle(){return this.$i18n("keyframe.property.title")}getBody(){return"
          "}getTools(){return` - - `}makeProperty(e){var t=e.key;return t==="x"?t="left":t==="y"&&(t="top"),` -
          - -
          ${e.value}
          -
          - `}makeOffset(e){return` -
          - -
          - ${e.properties.map(t=>this.makeProperty(t)).join("")} -
          -
          - `}makeKeyframeTemplate(e,t){return t=t.toString(),` -
          -
          -
          ${e.name}
          -
          -
          - - -
          - -
          -
          -
          -
          - ${e.offsets.map(i=>` -
          - `).join("")} -
          -
          -
          - ${e.offsets.map(i=>this.makeOffset(i)).join("")} -
          -
          - 
          ${e.toString().trim()}
          -
          -
          - `}[ne("$keyframeList .keyframe-item .title .group button[data-type]")](e){var t=e.$dt.closest("keyframe-item"),i=+t.attr("data-index"),r=e.$dt.attr("data-type"),s=this.$context.selection.currentProject;if(!!s){var a=s.keyframes[i];a&&a.reset({selectedType:r}),t.attr("data-selected-value",r)}}[ne("$keyframeList .keyframe-item .offset-list")](e){var t=+e.$dt.closest("keyframe-item").attr("data-index"),i=this.$context.selection.currentProject;!i||this.viewKeyframePicker(t)}[ne("$keyframeList .del")+wt](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.currentProject;!i||(i.removeKeyframe(t),this.$commands.emit("refreshProject",i),this.refresh())}[H(Lt)+Nt(100)](){const e=this.$context.selection.current;e&&e.hasChangedField("keyframes")&&this.refresh()}[me("$keyframeList")](){var e=this.$context.selection.currentProject;if(!e)return"";var t=e.keyframes||[];return t.map((i,r)=>this.makeKeyframeTemplate(i,r))}[ne("$add")](){var e=this.$context.selection.currentProject;e?(e.createKeyframe(),this.refresh(),this.$commands.emit("refreshProject",e)):window.alert("Please select a project.")}viewKeyframePicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.currentProject,this.current&&(this.currentKeyframe=this.current.keyframes[this.selectedIndex],this.viewKeyframePropertyPopup())}selectItem(e,t=!0){t?this.getRef("$keyframeIndex",e).addClass("selected"):this.getRef("$keyframeIndex",e).removeClass("selected"),this.current&&this.current.keyframes.forEach((i,r)=>{i.selected=r===e})}viewKeyframePropertyPopup(e){if(this.current=this.$context.selection.currentProject,!this.current)return;this.currentKeyframe=this.current.keyframes[this.selectedIndex];const t=this.currentKeyframe,i=t.name,r=t.offsets;this.emit("showKeyframePopup",{position:e,name:i,offsets:r})}[H("changeKeyframePopup")](e){var t=this.$context.selection.currentProject;!t||(this.currentKeyframe=t.keyframes[this.selectedIndex],this.currentKeyframe&&this.currentKeyframe.reset(e),this.refresh(),this.$commands.emit("refreshProject",t))}}class wB extends ge{initState(){return{offsets:[]}}updateData(e){this.setState(e,!1),this.modifyOffset()}modifyOffset(){this.emit("changeOffsetEditor",this.state)}template(){return` -
          - ${this.templateForOffset()} - ${this.templateForOffsetInput()} - ${this.templateForProperty()} -
          `}templateForOffsetInput(){return` -
          -
          - -
          - ${W("InputRangeEditor",{key:"offset",min:0,max:100,step:.01,value:y.percent(0),ref:"$offsetInput",units:"%",onchange:"changeRangeEditor"})} -
          -
          -
          - `}[H("changeRangeEditor")](e,t){var i=this.state.offsets[this.selectedIndex];i&&(i.offset=t.clone(),this.refresh(),this.modifyOffset())}templateForProperty(){return W("CSSPropertyEditor",{ref:"$offsetPropertyEditor","hide-refresh":!0,onchange:"changeCSSPropertyEditor"})}templateForOffset(){return`
          `}makeOffset(e,t){return`
          `}selectItem(e){if(Bi(e)){e=-1;for(var t=0,i=this.state.offsets.length;t{s.selected=a===e});var r=this.state.offsets.filter(s=>s.selected);this.selectedOffsetItem=r.length?r[0]:{},this.refreshOffsetInput()}refreshOffsetInput(){var e=this.state.offsets[this.selectedIndex];e&&this.children.$offsetInput.setValue(e.offset)}[me("$offset")](){return this.state.offsets.map((e,t)=>this.makeOffset(e,t))}isNotOffsetItem(e){return!qe.create(e.target).hasClass("offset-item")&&!this.currentOffset}[ne("$offset")+et("isNotOffsetItem")+wt](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset();var t=e.xy.x,i=y.percent((t-this.baseOffsetArea.left)/this.baseOffsetWidth*100).round(100);this.state.offsets.push(new Kc({offset:i})),this.selectItem(this.state.offsets.length-1,!0),this.refresh(),this.modifyOffset()}refreshOffsetProperty(){this.emit("showCSSPropertyEditor",this.selectedOffsetItem.properties)}[Ke("$offset .offset-item")+at("moveOffset")+ct("endOffset")](e){this.baseOffsetWidth=this.refs.$offset.width(),this.baseOffsetArea=this.refs.$offset.offset(),this.currentOffsetleft=y.parse(e.$dt.css("left")),this.currentOffset=e.$dt,this.currentOffsetIndex=+e.$dt.attr("data-offset-index"),this.currentOffsetXY=e.xy,this.baseOffsetMin=this.baseOffsetArea.left,this.baseOffsetMax=this.baseOffsetArea.left+this.baseOffsetWidth,this.isRemoveOffset=!1,e.altKey?this.isRemoveOffset=!0:(this.selectItem(this.currentOffsetIndex,!0),this.refreshOffsetInput())}moveOffset(e){if(!this.isRemoveOffset){var t=this.currentOffsetXY.x+e;tthis.baseOffsetMax&&(t=this.baseOffsetMax);var i=y.percent((t-this.baseOffsetMin)/this.baseOffsetWidth*100).round(100);this.state.offsets[this.currentOffsetIndex].offset.set(i.value),this.currentOffset.css("left",i),this.refreshOffsetInput(),this.modifyOffset()}}removeOffset(e){this.state.offsets.splice(e,1),this.selectItem(0),this.refresh(),this.modifyOffset()}endOffset(){this.isRemoveOffset?window.setTimeout(()=>{this.currentOffset=null,this.removeOffset(this.currentOffsetIndex)},10):window.setTimeout(()=>{this.currentOffset=null,this.refreshOffsetInput(),this.refreshOffsetProperty(),this.modifyOffset()},10)}refresh(){this.load(),this.refreshOffsetProperty()}[H("showOffsetEditor")](e){this.setState(e),this.selectItem(),this.refresh()}[H("changeCSSPropertyEditor")](e=[]){var t=this.state.offsets[this.selectedIndex];t&&(t.properties=[...e]),this.modifyOffset()}}function MB(n){n.registerElement({OffsetEditor:wB}),n.registerUI("inspector.tab.transition",{KeyframeProperty:SB}),n.registerUI("popup",{KeyframePopup:_B})}class $B extends ge{template(){return` -
          -
          -
          -
          -
          - - -
          - `}initState(){return{dragStart:!1,width:0,height:0,color:"black",fontSize:30,showRectInfo:!1,areaVerties:wi(0,0,0,0),content:"Insert a text",pathManager:new Qi,rect:{},options:{},containerItem:void 0,patternInfo:{}}}get scale(){return this.$viewport.scale}checkNotDragStart(){return Boolean(this.state.dragStart)===!1}[Kl("$el")+et("checkNotDragStart")](e){const t=this.$viewport.getWorldPosition(e),i=this.$context.snapManager.checkPoint(t);vg(i,t)===!1?(this.state.target=i,this.state.targetVertex=this.$viewport.applyVertex(this.state.target),this.state.targetPositionVertex=yr(this.state.target),this.state.targetGuides=this.$context.snapManager.findGuideOne([this.state.target])):(this.state.target=Fn([],t),this.state.targetVertex=Fn([],this.$viewport.applyVertex(this.state.target)),this.state.targetGuides=[],this.state.targetPositionVertex=null),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}[Ke("$el")+at()+ct()+wt+ds](e){this.initMousePoint=this.state.targetPositionVertex?this.state.targetPositionVertex:this.$viewport.getWorldPosition(e),this.state.dragStart=!0,this.state.color="#C4C4C4",this.state.text="";const t=this.initMousePoint[0],i=this.initMousePoint[1],r=wi(t,i,0,0);this.state.areaVerties=this.$viewport.applyVerties(r),this.bindData("$area"),this.bindData("$areaRect")}createLayerTemplate(e,t){const{type:i,text:r,color:s,inlineStyle:a}=this.state;switch(i){case"artboard":return`
          `;case"rect":return`
          `;case"circle":return`
          `;case"text":case"svg-text":return` -
          -

          -
          `;case"svg-rect":return` -
          - - - -
          - `;case"svg-circle":return` -
          - - - -
          - `;case"svg-path":const o=this.state.d.clone().scale(e/this.state.bboxRect.width,t/this.state.bboxRect.height).d,l=this.state.options;return` -
          - - - -
          - `;case"polygon":const c=this.state.options;return` -
          - - - -
          - `;case"star":const h=this.state.options;return` -
          - - - -
          - `;case"svg-textpath":return` -
          - - - - - - ${r} - - -
          - `;default:return`
          `}}[Me("$area")](){const{areaVerties:e}=this.state,{left:t,top:i,width:r,height:s}=Yi(e);return{style:{left:t,top:i,width:r,height:s},innerHTML:this.createLayerTemplate(r,s)}}[Me("$areaRect")](){const{areaVerties:e,showRectInfo:t}=this.state,i=this.$viewport.applyVertiesInverse(e),{width:r,height:s}=Yi(i);return{style:{display:t?"inline-block":"none",left:e[2][0],top:e[2][1]},innerHTML:`x: ${Math.round(i[0][0])}, y: ${Math.round(i[0][1])}, ${Math.round(r)} x ${Math.round(s)}`}}[Me("$mousePointerView")](){const{showRectInfo:e}=this.state,{target:t=ls(),targetVertex:i=ls()}=this.state;return{style:{display:e?"none":"inline-block",left:i[0]||-1e4,top:i[1]||-1e4},innerHTML:`x: ${Math.round(t[0])}, y: ${Math.round(t[1])}`}}makeMousePointer(){if(this.state.dragStart)return"";const{target:e}=this.state;return e?` - - ${(this.state.targetGuides||[]).filter(Boolean).map(i=>(this.state.pathManager.reset(),i=this.$viewport.applyVerties([i[0],i[1]]),this.state.pathManager.M({x:i[0][0],y:i[0][1]}).L({x:i[1][0],y:i[1][1]}).X({x:i[0][0],y:i[0][1]}).X({x:i[1][0],y:i[1][1]}).toString("layer-add-snap-pointer"))).join(` -`)} - - `:""}[Me("$mousePointer")](){return{innerHTML:this.makeMousePointer()}}move(){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),i=this.$context.snapManager.checkPoint(t);vg(i,t)===!1?(this.state.target=i,this.state.targetVertex=this.$viewport.applyVertex(i),this.state.targetGuides=this.$context.snapManager.findGuideOne([i]).filter(Boolean)):(this.state.target=void 0,this.state.targetGuides=[]);const r=e.shiftKey,s=Math.min(i[0],this.initMousePoint[0]),a=Math.min(i[1],this.initMousePoint[1]),o=Math.max(i[0],this.initMousePoint[0]),l=Math.max(i[1],this.initMousePoint[1]);let c=o-s,h=l-a;r&&(h=c);const d=wi(s,a,c,h);this.state.areaVerties=this.$viewport.applyVerties(d),this.state.showRectInfo=!0,this.bindData("$area"),this.bindData("$areaRect"),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}end(){const e=this.$config.get("bodyEvent").altKey;let{color:t,content:i,fontSize:r,areaVerties:s,patternInfo:a}=this.state;const o=this.$viewport.applyVertiesInverse(s),l=this.$context.selection.getArtboardByPoint(o[0]);let{x:c,y:h,width:d,height:u}=Yi(o),p=!0;if(d===0&&u===0)switch(this.state.type){case"text":i="",u.set(this.state.fontSize),p=!1;break;default:d=100,u=100;break}var f=P(P({x:Math.floor(c),y:Math.floor(h),width:Math.floor(d),height:Math.floor(u),backgroundColor:t,content:i,fontSize:r},a.attrs),this.state.options);switch(this.state.type){case"text":case"svg-text":case"svg-textpath":delete f.backgroundColor;break;case"svg-path":f.d=this.state.d.clone().scale(d/this.state.bboxRect.width,u/this.state.bboxRect.height).d;break;default:delete f.content;break}switch(this.state.type){case"image":this.trigger("openImage",f,l);break;case"video":this.trigger("openVideo",f,l);break;case"audio":this.trigger("openAudio",f,l);break;case"text":if(p)f.fontSize=y.px(this.state.fontSize).floor();else{const g=this.state.fontSize/this.$viewport.scale,m=this.refs.$area.$(".draw-item > p");m.parent().css("height",`${g}px`),m.parent().css("font-size",`${g}px`),m.select(),m.focus();return}this.$commands.emit("newComponent",this.state.type,f,!0,l||this.$context.selection.currentProject);break;default:this.$commands.emit("newComponent",this.state.type,f,!0,l||this.$context.selection.currentProject),this.$config.set("editing.mode.itemType","select");break}e||this.trigger("hideLayerAppendView"),this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=void 0,this.bindData("$areaRect")}[H("showLayerAppendView")](e,t={}){this.state.type=e,this.state.options=t,this.state.isShow=!0,this.refs.$area.empty(),this.$el.show(),this.$el.focus(),this.$context.snapManager.clear();const i=this.$model.createModel(P({itemType:e},t),!1);this.state.inlineStyle=Zt(this.$editor.renderer("html").toCSS(i,{top:!0,left:!0,width:!0,height:!0,transform:!0,transformOrigin:!0})),t.d&&(this.state.d=new be(t.d),this.state.bboxRect=this.state.d.rect()),this.$context.commands.emit("push.mode.view","LayerAppendView")}[H("hideLayerAppendView")](){this.$el.isShow()&&(this.state.isShow=!1,this.$el.hide(),this.$commands.emit("pop.mode.view","LayerAppendView"))}[H("hideAddViewLayer")](){this.state.isShow=!1,this.$el.hide()}isShow(){return this.state.isShow}[ap("document")+et("isShow")+Bc+So](){}[Ar("document")+et("isShow")+Bc+So](e){switch(this.state.type){case"text":const t=qe.create(e.target);let{fontSize:i,areaVerties:r}=this.state;const s=this.$viewport.applyVertiesInverse(r),{x:a,y:o}=Yi(s),{width:l,height:c}=t.rect(),h=t.text();if(h.length===0)break;const[[d,u,p]]=this.$viewport.applyScaleVertiesInverse([[l,c,i]]),f={x:a,y:o,width:d,height:u,content:h.trim(),"font-size":p},g=this.$context.selection.getArtboardByPoint(s[0]);this.$commands.emit("newComponent",this.state.type,f,!0,g||this.$context.selection.currentProject);break}this.state.dragStart=!1,this.state.showRectInfo=!1,this.state.target=null,this.bindData("$areaRect"),this.trigger("hideLayerAppendView")}[Yn("$file")](){this.refs.$file.files.forEach(e=>{this.$commands.emit("updateImage",e,this.state.rect,this.state.containerItem)})}[Yn("$video")](){this.refs.$video.files.forEach(e=>{this.$commands.emit("updateVideo",e,this.state.rect,this.state.containerItem)})}[H("openImage")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$file.click()}[H("openVideo")](e,t){this.state.rect=e,this.state.containerItem=t,this.refs.$video.click()}[H("setPatternInfo")](e){this.state.patternInfo=e}[H(ai)](){this.$context.snapManager.clear(),this.bindData("$mousePointer"),this.bindData("$mousePointerView")}}function zb(n){n.registerUI("canvas.view",{LayerAppendView:$B})}const yc="drag-start";class PB extends Bt{getTitle(){return this.$i18n("layer.tree.property.title")}getClassName(){return"full"}initState(){return{hideDragPointer:!0,lastDragOverPosition:0,lastDragOverOffset:0,rootRect:{top:0},itemRect:{height:0}}}getBody(){return` -
          -
          - `}[Me("$dragPointer")](){var e=this.state.lastDragOverOffset,t=this.state.itemRect.height/3,i={};if(this.state.lastDragOverOffsetthis.state.itemRect.height-t){e=this.state.itemRect.height;var r=this.state.lastDragOverPosition+e-this.state.rootRect.top;i={top:r,height:"1px",width:"100%",left:"0px"},this.state.lastDragOverItemDirection="after"}else{const s=this.$model.get(this.state.lastDragOverItemId);if(s!=null&&s.enableHasChildren()){e=0;var r=this.state.lastDragOverPosition+e-this.state.rootRect.top;i={top:r,height:this.state.itemRect.height,width:"100%",left:"0px"},this.state.lastDragOverItemDirection="self"}}return i.display=this.state.hideDragPointer?"none":"block",{style:i}}getIcon(e){return e.d?EI(e.d,{width:e.screenWidth,height:e.screenHeight,fill:"currentColor",stroke:"currentColor"}):e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?ie("layout_flex"):e.isLayout("grid")?ie("layout_grid"):ie("layout_default"):this.$icon.get(e.itemType,e)}makeLayerList(e,t=0){if(!e.layers)return"";const i=e.layers,r=[];for(var s=i.length-1;s>-1;s--){var a=i[s],o=this.$context.selection.hasPathOf(a)?"selected-path":"",l=this.$context.selection.check(a)?"selected":"",c=this.$context.selection.checkHover(a)?"hovered":"",h=a.is("boolean-path")?a["boolean-operation"]:a.name;a.is("text")&&(h=a.text||a.name);var d="";a.hasLayout()&&(d=this.$i18n("layer.tree.property.layout.title."+a.layout));const u=a.isTreeItemHide(),p=t*20,f=a.hasChildren(),g=this.$lockManager.get(a.id),m=this.$visibleManager.get(a.id);r[r.length]=`
          ${this.makeLayerList(a,t+1)}`}return r.join("")}[H("refreshContent")](){this.refresh()}[me("$layerList")+It](){var e=this.$context.selection.currentProject;return e?[this.makeLayerList(e,0),` -
          -
          - `]:""}[wn("$layerList .layer-item")](e){var t=e.$dt.attr("data-layer-id");e.$dt.addClass(yc),e.dataTransfer.setData("layer/id",t),this.state.rootRect=this.refs.$layerList.rect(),this.state.itemRect=e.$dt.rect(),this.setState({hideDragPointer:!1},!1),this.bindData("$dragPointer")}[o2("$layerList .layer-item")](){this.setState({hideDragPointer:!0},!1),this.bindData("$dragPointer"),this.refs.$layerList.$$(`.${yc}`).forEach(e=>{e.removeClass(yc)})}[an(`$layerList .layer-item:not(.${yc})`)+wt](e){var t=e.$dt.attr("data-layer-id");this.state.lastDragOverItemId=t,this.state.lastDragOverPosition=e.$dt.rect().top,this.state.lastDragOverOffset=e.offsetY,this.bindData("$dragPointer")}[sn(`$layerList .layer-item:not(.${yc})`)](e){var t=e.$dt.attr("data-layer-id"),i=e.dataTransfer.getData("layer/id");if(t!==i){var r=this.$model.get(t),s=this.$model.get(i);if((r==null?void 0:r.enableHasChildren())!==!1&&!(r&&r.hasParent(s.id))){switch(this.state.lastDragOverItemDirection){case"self":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,Nn.APPEND_CHILD);break;case"before":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,Nn.INSERT_BEFORE);break;case"after":this.$commands.emit("history.moveLayerToTarget","change target with move",s,r,void 0,Nn.INSERT_AFTER);break}this.nextTick(()=>{this.$commands.emit("recoverBooleanPath"),this.$context.selection.select(s),this.setState({hideDragPointer:!0})},10)}}}[_h("$layerList .layer-item")](e){this.startInputEditing(e.$dt.$(".name"))}modifyDoneInputEditing(e,t){if($o.enter===t.keyCode)this.endInputEditing(e,()=>{var s=e.closest("layer-item").attr("data-layer-id"),a=e.text();this.$commands.executeCommand("setAttribute","change name",{[s]:{name:a}})});else{var i=e.closest("layer-item").attr("data-layer-id"),r=e.text();this.$commands.executeCommand("setAttribute","change name",{[i]:{name:r}})}}[ap("$layerList .layer-item .name")+ds](e){this.modifyDoneInputEditing(e.$dt,e)}[wo("$layerList .layer-item .name")+wt+ds](e){this.modifyDoneInputEditing(e.$dt,{keyCode:$o.enter})}selectLayer(e){e&&this.$context.selection.select(e),this.refresh()}addLayer(e){e&&(this.$context.selection.select(e),this.$commands.emit("refreshArtboard"))}[ne("$add")](){this.$commands.emit("newComponent","rect",{backgroundColor:"#ececec",width:200,height:100})}[ne("$layerList .layer-item label .name")](e){var t=e.$dt.closest("layer-item");t.onlyOneClass("selected");var i=t.attr("data-layer-id");this.$context.selection.select(i),this.$commands.emit("history.refreshSelection")}[ne("$layerList .layer-item label .folder")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id"),r=this.$model.get(i);r.reset({collapsed:!r.collapsed}),this.refresh()}[ne("$layerList .layer-item .visible")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$visibleManager.toggle(i);var r=this.$visibleManager.get(i);e.$dt.attr("data-visible",r),this.emit("refreshVisibleView")}[ne("$layerList .layer-item .remove")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$commands.executeCommand("removeLayer","remove a layer",[i]),this.nextTick(()=>{this.refresh()},1e3)}[ne("$layerList .layer-item .lock")](e){var t=e.$dt.closest("layer-item"),i=t.attr("data-layer-id");this.$lockManager.toggle(i);var r=this.$lockManager.get(i);e.$dt.attr("data-lock",r),r&&this.$context.selection.removeById(i)}[H("changeHoverItem")](){if(this.refs.$layerList.$$(".hovered").forEach(t=>{t.removeClass("hovered")}),this.$context.selection.hoverItems.length){var e=this.$context.selection.hoverItems.map(t=>`[data-layer-id="${t.id}"]`).join(",");this.refs.$layerList.$$(e).forEach(t=>{t.addClass("hovered")})}}[we("changeSelection")](e=!1){if(e&&this.refs.$layerList){this.refs.$layerList.$$(".selected").forEach(i=>{i.removeClass("selected")}),this.refs.$layerList.$$(".selected-path").forEach(i=>{i.removeClass("selected-path")});var t=this.$context.selection.items.map(i=>`[data-layer-id="${i.id}"]`).join(",");t&&this.refs.$layerList.$$(t).forEach(i=>{i.addClass("selected");var r=this.$context.selection.itemKeys[i.attr("data-layer-id")];r.is("svg-path","svg-polygon")&&i.$(".icon").html(this.getIcon(r))})}}[H(Lt,"refreshAllCanvas")](){this.refresh()}[H("refreshLayerTreeView")+Vl(100)](){this.refresh()}[H("changeItemLayout")](){this.refresh()}[qt("bodyEvent")](){const t=qe.create(this.$config.get("bodyEvent").target).closest("layer-item");t&&this.emit("refreshHoverView",t.data("layer-id"))}}function TB(n){n.registerElement({LayerTreeProperty:PB})}function CB(n){n.registerUI("layertab.tab",{Sample:{title:"Sample",icon:ie("add"),value:"sample"}})}class EB extends Bt{getTitle(){return this.$i18n("default.layout.item.property.title.constraints")}getClassName(){return"elf--default-layout-item-property"}getBody(){return` -
          -
          -
          -
          -
          -
          - `}[me("$constraintsInfo")+It](){var e=this.$context.selection.current;const t=(e==null?void 0:e["constraints-horizontal"])||Tt.MIN,i=(e==null?void 0:e["constraints-vertical"])||Tt.MIN;return` -
          - - -
          -
          -
          - - -
          -
          -
          -
          -
          - `}[me("$constraintsInfoInput")](){var e=this.$context.selection.current;const t=e==null?void 0:e.hasLayout();return` -
          - ${W("SelectEditor",{ref:"$constraintsHorizontal",key:"constraints-horizontal",value:(e==null?void 0:e["constraints-horizontal"])||"min",label:ie("width"),compact:!0,options:[{value:"min",text:"Left"},{value:"max",text:"Right"},{value:"stretch",text:"Left and Right",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} -
          - -
          - ${W("SelectEditor",{ref:"$constraintsVertical",key:"constraints-vertical",value:(e==null?void 0:e["constraints-vertical"])||"min",label:ie("height"),compact:!0,options:[{value:"min",text:"Top"},{value:"max",text:"Bottom"},{value:"stretch",text:"Top and Bottom",disabled:t},{value:"center",text:"Center"},{value:"scale",text:"Scale",disabled:t}],onchange:"changeConstraints"})} -
          - `}[ne("$constraintsInfo .item")](e){const[t,i]=e.$dt.attrs("data-value","data-key"),r=this.$context.selection.current;!r||(r.changeConstraints(i,t,e.shiftKey),this.trigger("changeConstraints",i,r[i]))}[we("changeConstraints")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[H(Lt)+Nt(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.isInDefault()&&e.parent.isNot("project")})}}class IB extends ge{template(){return V("div",{class:"elf--flex-grow-tool-view"})}[me("$el")+It](){return this.$context.selection.map(e=>{const t=e.parent;if(!!t&&!t.is("project")&&t.isLayout(At.FLEX)!==!1)return t.layers.map(i=>{const s=this.$viewport.applyVerties(i.verties)[4];let a=0,o=i.screenWidth||0;const l=t==null?void 0:t.flexDirection;return l===wr.ROW?(i.resizingHorizontal===St.FILL_CONTAINER&&(a=i.flexGrow||1),o=i.screenWidth):l===wr.COLUMN&&(i.resizingVertical===St.FILL_CONTAINER&&(a=i.flexGrow||1),o=i.screenHeight),V("div",{class:"flex-grow-item",style:{left:y.px(s[0]),top:y.px(s[1])},"data-flex-item-id":i.id,"data-parent-direction":l,"data-flex-grow":a},V("span",{class:"size"},Math.floor(o))," ",V("span",{class:"grow"},a||"x"))}).join("")})}[Ke("$el .flex-grow-item")+at()+ct()](e){const[t,i]=e.$dt.attrs("data-flex-item-id","data-flex-grow");this.setState({id:t,grow:+i},!1)}getFlexGrow(e,t,i,r,s){let a=i;return e===wr.ROW&&t.resizingHorizontal===St.FILL_CONTAINER?a=i+Math.floor(r/10):e===wr.COLUMN&&t.resizingVertical===St.FILL_CONTAINER&&(a=i+Math.floor(s/10)),a=Math.max(1,a),a}move(e,t){const{id:i,grow:r}=this.state,s=this.$editor.get(i);if(!s)return;const a=s.parent;if(!a)return;const o=a.flexDirection;let l=this.getFlexGrow(o,s,r,e,t);this.$commands.emit("setAttribute",{[i]:{flexGrow:l}})}end(e,t){const{id:i,grow:r}=this.state,s=this.$editor.get(i);if(!s)return;const a=s.parent;if(!a)return;const o=a.flexDirection;let l=this.getFlexGrow(o,s,r,e,t);e===0&&t===0?o===wr.ROW&&s.resizingHorizontal!==St.FILL_CONTAINER?this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:1,resizingHorizontal:St.FILL_CONTAINER}}):o===wr.COLUMN&&s.resizingVertical!==St.FILL_CONTAINER&&this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:1,resizingVertical:St.FILL_CONTAINER}}):this.$commands.executeCommand("setAttribute","change self resizing",{[i]:{flexGrow:l}}),this.nextTick(()=>{this.refresh()},10)}[H(ai)](){this.refresh()}[H(Lt)+Vl(100)](){this.refresh()}[H(Ki)+Vl(1)](){this.refresh()}[qt("set.move.control.point")](){this.refresh()}}class LB extends ge{initialize(){super.initialize(),this.directionOptions=this.getDirectionOptions(),this.wrapOptions=this.getWrapOptions(),this.justifyContentOptions=this.getJustifyContentOptions(),this.alignItemsOptions=this.getAlignItemsOptions()}getDirectionOptions(){return this.makeOptionsFunction("row,column")}getWrapOptions(){return this.makeOptionsFunction("nowrap,wrap")}getJustifyContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around")}getAlignItemsOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,baseline,stretch")}getAlignContentOptions(){return this.makeOptionsFunction("flex-start,flex-end,center,space-between,space-around,stretch")}makeOptionsFunction(e){return e.split(",").map(t=>({value:t,text:this.$i18n("flex.layout.editor."+t)}))}initState(){return P({},this.props.value)}setValue(e){this.setState(P({},e))}getValue(){return this.state}modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}[me("$body")+It](){const e=this.$context.selection.current;if(!e)return"";const t=Math.min(e.paddingTop||0,50),i=Math.min(e.paddingLeft||0,50),r=Math.min(e.paddingRight||0,50),s=Math.min(e.paddingBottom||0,50),a=`padding-top:${t}px;padding-left: ${i}px;padding-right:${r}px;padding-bottom: ${s}px;`;return`
          ${W("SelectIconEditor",{key:"flexDirection",ref:"$flexDirection",value:this.state.flexDirection||wr.ROW,options:this.directionOptions,icons:["east","south"],onchange:"changeKeyValue"})}
          ${W("NumberInputEditor",{compact:!0,ref:"$flex-gap",label:ie("space"),key:"gap",value:this.state.gap,min:0,max:100,step:1,onchange:"changeKeyValue"})}
          ${W("NumberInputEditor",{compact:!0,label:ie("padding"),key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:100,step:1,onchange:"changePadding"})}
          ${W("ToggleButton",{compact:!0,key:"flexWrap",ref:"$wrap",checkedValue:"wrap",value:this.state.flexWrap||yu.NOWRAP,toggleLabels:[ie("wrap"),ie("wrap")],toggleValues:[yu.NOWRAP,yu.WRAP],onchange:"changeKeyValue"})}
          -
          -
          -
          -
          -
          -
          -
          -
          -
          - ${[1,2,3].map(()=>` -
          -
          -
          -
          -
          - `).join(` -`)} -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          - -
          -
          ${this.$i18n("flex.layout.editor.justify-content")}
          - ${W("SelectIconEditor",{key:"justifyContent",ref:"$justify",value:this.state.justifyContent||Cl.FLEX_START,options:this.justifyContentOptions,icons:["start","end","horizontal_align_center","horizontal_distribute","justify_content_space_around"],onchange:"changeKeyValue"})} -
          -
          -
          ${this.$i18n("flex.layout.editor.align-items")}
          - ${W("SelectIconEditor",{key:"alignItems",ref:"$alignItems",value:this.state.alignItems||ca.FLEX_START,options:this.alignItemsOptions,icons:["vertical_align_top","vertical_align_bottom","vertical_align_center","vertical_align_baseline","vertical_align_stretch"],onchange:"changeKeyValue"})} -
          - `}template(){return` -
          - `}[we("changeKeyValue")](e,t){this.setState({[e]:t},!1),this.modifyData(e,t),this.refresh()}[we("changePadding")](e,t){this.setState({[e]:t},!1),this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t}),this.refresh()}[ne("$body .tool-area-item")](e){const t=e.$dt,[i,r]=t.attrs("data-justify-content","data-align-items","data-align-content");this.state.justifyContent===Cl.SPACE_BETWEEN?(this.setState({alignItems:r},!1),this.modifyData("alignItems",r)):this.state.justifyContent===Cl.SPACE_AROUND?(this.setState({alignItems:r},!1),this.modifyData("align-item",r)):(this.setState({justifyContent:i,alignItems:r},!1),this.modifyData("justifyContent",i),this.modifyData("alignItems",r)),this.refresh()}}const kB=/(auto)|(repeat\([^)]*\))|(([\d.]+)(px|pt|fr|r?em|deg|vh|vw|%))/gi;class AB extends ge{getLayoutItemOptions(){return"none,auto,repeat,length".split(",").map(e=>({value:e,text:this.$i18n(`grid.box.editor.${e}`)}))}initState(){return{label:this.props.label,list:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){let t=null;for(var i=[];(t=kB.exec(e))!==null;){var r=t[0];if(r==="auto")i.push({type:"auto",count:0,value:"0px"});else if(r.includes("repeat")){var s=r.split("repeat(")[1].split(")");s.pop();let[a,...o]=s.join("").split(",");i.push({type:"repeat",count:a,value:o.join(", ")})}else i.push({type:"length",count:1,value:r})}return i}getValue(){return this.state.list.map(e=>e.type==="repeat"?`repeat(${e.count}, ${e.value})`:e.type==="auto"||e.type==="none"?e.type:e.value).join(" ")}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(e,t){return` -
          -
          - ${W("SelectEditor",{ref:`$${t}-type`,compact:!0,options:this.getLayoutItemOptions(),key:"type",value:e.type||"auto",params:t,onchange:"changeKeyValue"})} -
          -
          - ${W("NumberInputEditor",{compact:!0,ref:`$${t}-count`,key:"count",value:e.count,params:t,max:1e3,onchange:"changeKeyValue"})} -
          -
          - ${W("InputRangeEditor",{ref:`$${t}-value`,compact:!0,key:"value",value:e.value,params:t,units:["auto","fr","px","em","%"],onchange:"changeKeyValue"})} -
          -
          - - -
          -
          - `}[me("$list")](){return this.state.list.map((e,t)=>this.makeItem(e,t))}template(){return` -
          -
          -
          -
          - - -
          -
          ${this.$i18n("grid.box.editor.count")}
          -
          ${this.$i18n("grid.box.editor.value")}
          -
          -
          -
          -
          -
          - `}[ne("$list .remove")](e){var t=+e.$dt.closest("item").attr("data-index");this.state.list.splice(t,1),this.refresh(),this.modifyData()}[ne("$list .copy")](e){var t=+e.$dt.closest("item").attr("data-index"),i=rt(this.state.list[t]);this.state.list.splice(t,0,i),this.refresh(),this.modifyData()}[ne("$add")](){this.trigger("add")}[H("add")](){this.state.list.push({type:"auto",count:0,value:"0px"}),this.refresh(),this.modifyData()}[we("changeKeyValue")](e,t,i){var r=+i,s=this.state.list[r];s&&(e==="type"&&this.refs.$list.$(`[data-index="${r}"]`).attr("data-repeat-type",t),s[e]=t),this.modifyData()}}class RB extends ge{initState(){return{label:this.props.label,value:this.parseValue(this.props.value)}}setValue(e){this.setState({list:this.parseValue(e)})}parseValue(e){return y.parse(e)}getValue(){return this.state.value}modifyData(){this.parent.trigger(this.props.onchange,this.props.key,this.getValue())}makeItem(){return` -
          -
          - ${W("InputRangeEditor",{label:this.state.label,wide:!0,ref:"$value",key:"value",value:this.state.value,max:500,units:["px","em","%"],onchange:"changeKeyValue"})} -
          -
          - `}[me("$list")](){return this.makeItem()}template(){return` -
          -
          -
          -
          -
          - `}[we("changeKeyValue")](e,t){this.state.value=t,this.modifyData()}}class ua{static parseStyle(e){const t=[];return Zl(e).forEach(i=>{switch(i.func){case Ht.REPEAT:for(var r=0,s=i.parsed.count;r{i[r.id]={gridRowStart:Math.max(1,Math.min(t.length,r.gridRowStart)),gridRowEnd:Math.min(t.length+1,r.gridRowEnd)}}),this.$commands.executeCommand("setAttribute","change grid rows",ze(P({},i),{[e.id]:{gridTemplateRows:ua.join(t)}}))}updateColumns(e,t){const i={};e.layers.forEach(r=>{i[r.id]={gridColumnStart:Math.max(1,Math.min(t.length,r.gridColumnStart)),gridColumnEnd:Math.min(t.length+1,r.gridColumnEnd)}}),this.$commands.executeCommand("setAttribute","change grid columns",ze(P({},i),{[e.id]:{gridTemplateColumns:ua.join(t)}}))}updateColumnGap(e,t){this.$commands.executeCommand("setAttribute","change grid column gap",{[e.id]:{gridColumnGap:`${t}`}})}updateRowGap(e,t){this.$commands.executeCommand("setAttribute","change grid row gap",{[e.id]:{gridRowGap:`${t}`}})}createNewGridItems(e){let t=[];return e.length===0?t=[y.fr(1)]:t=[...e,e[e.length-1]],t}copyNewGridItems(e,t){return[...e.slice(0,t+1),...e.slice(t)]}getScaleDist(e){return e/this.$viewport.scale}}class zB extends OB{checkTargetLayer(){const e=this.getGridTargetLayer();return!(!e||e.isLayout(At.GRID)===!1)}[ne("$grid .column-plus")+et("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateColumns(e.current,this.createNewGridItems(e.columns))}[ne("$grid .row-plus")+et("checkTargetLayer")](){const e=this.getGridLayoutInformation();this.updateRows(e.current,this.createNewGridItems(e.rows))}[ne("$grid .column-delete")+et("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.columns.length<2){this.alert("Alert","Columns can not be less than one.",2e3);return}const i=+e.$dt.data("index"),r=[...t.columns.slice(0,i),...t.columns.slice(i+1)];this.updateColumns(t.current,r)}[ne("$grid .column-add")+et("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),i=+e.$dt.data("index");this.updateColumns(t.current,this.copyNewGridItems(t.columns,i),i+1)}[ne("$grid .row-add")+et("checkTargetLayer")](e){const t=this.getGridLayoutInformation(),i=+e.$dt.data("index");this.updateRows(t.current,this.copyNewGridItems(t.rows,i))}[ne("$grid .row-delete")+et("checkTargetLayer")](e){const t=this.getGridLayoutInformation();if(t.rows.length<2){this.alert("Alert","Rows can not be less than one.",2e3);return}const i=+e.$dt.data("index"),r=[...t.rows.slice(0,i),...t.rows.slice(i+1)];this.updateRows(t.current,r)}}class VB extends zB{[Ke("$gridGap .gap-tool.column-gap")+et("checkTargetLayer")+Eu("moveFirstColumnGap")+at("moveColumnGap")+ct("moveEndColumnGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.columnGap=t.columnGap,this.lastColumnGap=t.columnGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}updateGapPointer(e){const t=this.$viewport.applyVertex(this.$viewport.getWorldPosition());this.refs.$pointer.text(`${e}`),this.refs.$pointer.css({left:y.px(t[0]),top:y.px(t[1]+20)})}moveFirstColumnGap(){this.refs.$pointer.show(),this.updateGapPointer(this.columnGap)}moveColumnGap(){const e=this.$viewport.getWorldPosition(),i=vt([],e,this.initMousePosition)[0]/this.getScaleDist(100),r=this.columnGap;let s=r;r instanceof y&&(r.isPercent()?s=y.percent(Math.max(r.value+i*this.getScaleDist(5),0)).round(1e3):(r.isPx()||r.isEm())&&(s=y.px(Math.max(r.value+i*this.getScaleDist(100),0)).floor())),this.lastColumnGap=s,this.updateColumnGap(this.current,s),this.updateGapPointer(this.lastColumnGap)}moveEndColumnGap(){const e=this.$viewport.getWorldPosition();Fe(e,this.initMousePosition)<1&&(this.lastColumnGap.isPx()||this.lastColumnGap.isEm()?this.lastColumnGap=y.makePercent(this.lastColumnGap.value,this.current.screenWidth):this.lastColumnGap=this.lastColumnGap.toPx(this.current.screenWidth)),this.updateColumnGap(this.current,this.lastColumnGap),this.refs.$pointer.hide()}[Ke("$gridGap .gap-tool.row-gap")+et("checkTargetLayer")+Eu("moveFirstColumnGap")+at("moveRowGap")+ct("moveEndRowGap")](e){const t=this.getGridLayoutInformation();this.current=t.current,this.rowGap=t.rowGap,this.lastColumnGap=t.rowGap,this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRowGap(){const e=this.$viewport.getWorldPosition(),i=vt([],e,this.initMousePosition)[1]/this.getScaleDist(100),r=this.rowGap;let s=r;console.log(r),r instanceof y&&(r.isPercent()?s=y.percent(Math.max(r.value+i*this.getScaleDist(5),0)).round(1e3):(r.isPx()||r.isNumber())&&(s=y.px(Math.max(r.value+i*this.getScaleDist(100),0)).floor())),this.lastRowGap=s,this.updateRowGap(this.current,s),this.updateGapPointer(this.lastRowGap)}moveEndRowGap(){const e=this.$viewport.getWorldPosition();Fe(e,this.initMousePosition)<1&&(this.lastRowGap||(this.lastRowGap=y.px(0)),this.lastRowGap.isPx()||this.lastRowGap.isNumber()?this.lastRowGap=y.makePercent(this.lastRowGap.value,this.current.screenHeight):this.lastRowGap=this.lastRowGap.toPx(this.current.screenHeight)),this.updateRowGap(this.current,this.lastRowGap),this.refs.$pointer.hide()}[Ke("$grid .grid-item-tool.column .item")+at("moveColumn")+ct("moveEndColumn")](e){const t=+e.$dt.data("index"),i=this.getGridLayoutInformation();this.current=i.current,this.columns=i.columns,this.selectedColumnIndex=t,this.selectedColumnWidth=i.columns[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveColumn(){const e=this.$viewport.getWorldPosition(),t=vt([],e,this.initMousePosition),i=t[0]/this.getScaleDist(100),r=this.selectedColumnWidth;if(r instanceof y){if(r.isPercent()){var s=Math.max(r.value+i*this.getScaleDist(5),1);this.columns[this.selectedColumnIndex]=y.percent(s).round(1e3)}else if(r.isPx()||r.isNumber()){var s=Math.max(10,r.value+i*this.getScaleDist(100));this.columns[this.selectedColumnIndex]=y.px(s).floor()}else if(r.isFr()){var s=Math.max(r.value+Math.floor(t[0]/this.getScaleDist(20))*.25,.25);this.columns[this.selectedColumnIndex]=y.fr(s)}else{var s=Math.max(r.value+i*1,10);this.columns[this.selectedColumnIndex]=new y(s,r.unit)}this.updateColumns(this.current,this.columns)}}changedColumnSize(){const e=this.getGridLayoutInformation(),t=this.selectedColumnIndex,i=this.selectedColumnWidth;if(i instanceof y)i.isPercent()?this.columns[t]=y.fr(1):i.isPx()||i.isNumber()?this.columns[t]=y.makePercent(i.value,e.current.screenWidth).round(1e3):i.isFr()&&(this.columns[t]="auto");else if(i==="auto"){const{items:r}=this.state.lastGridInfo,s=r.find(a=>a.column===t+1);this.columns[t]=y.px(s.rect.width).floor()}}moveEndColumn(){const e=this.$viewport.getWorldPosition();Fe(e,this.initMousePosition)<1&&this.changedColumnSize(),this.updateColumns(this.current,this.columns)}[Ke("$grid .grid-item-tool.row .item")+at("moveRow")+ct("moveEndRow")](e){const t=+e.$dt.data("index"),i=this.getGridLayoutInformation();this.current=i.current,this.rows=i.rows,this.selectedRowIndex=t,this.selectedRowHeight=i.rows[t],this.initMousePosition=this.$viewport.getWorldPosition(e)}moveRow(){const e=this.$viewport.getWorldPosition(),t=vt([],e,this.initMousePosition),i=t[1]/this.getScaleDist(30),r=this.selectedRowHeight;if(r instanceof y){if(r.isPercent()){var s=Math.max(r.value-i*this.getScaleDist(5),1);this.rows[this.selectedRowIndex]=y.percent(s).round(1e3)}else if(r.isPx()||r.isNumber()){var s=Math.max(10,r.value-i*this.getScaleDist(100));this.rows[this.selectedRowIndex]=y.px(s).floor()}else if(r.isFr()){var s=Math.max(r.value+Math.floor(t[1]/this.getScaleDist(20))*.25,.25);this.rows[this.selectedRowIndex]=y.fr(s)}else{var s=Math.max(r.value-i*1,10);this.rows[this.selectedRowIndex]=new y(s,r.unit)}this.updateRows(this.current,this.rows)}}changedRowSize(){const e=this.getGridLayoutInformation(),t=this.selectedRowIndex,i=this.selectedRowHeight;if(i instanceof y)i.isPercent()?this.rows[t]=y.fr(1):i.isPx()||i.isNumber()?this.rows[t]=y.makePercent(i.value,e.current.screenHeight).round(1e3):i.isFr()&&(this.rows[t]="auto");else if(i==="auto"){const{items:r}=this.state.lastGridInfo,s=r.find(a=>a.row===t+1);this.rows[t]=y.px(s.rect.height).floor()}}moveEndRow(){const e=this.$viewport.getWorldPosition();Fe(e,this.initMousePosition)<1&&this.changedRowSize(),this.updateRows(this.current,this.rows)}}class DB extends VB{template(){return V("div",{class:"elf--grid-grow-tool-view"},V("div",{class:"layout-rect",ref:"$grid"}),V("div",{class:"layout-rect blank-tool",ref:"$gridGap"}),V("div",{class:"layout-pointer",ref:"$pointer"}))}[Me("$el")](){var t;const e=this.getGridTargetLayer();return{"data-drag-target-item":Boolean(this.$context.selection.dragTargetItem),"data-grid-layout-own":((t=this.$context.selection.current)==null?void 0:t.id)===(e==null?void 0:e.id),style:{display:e?"block":"none"}}}[Me("$grid")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(At.GRID)===!1)return"";const t=Yi(this.$viewport.applyVerties(e.verties)),i=this.getGridLayoutInformation(),[r,s,a,o]=this.getScaledInformation([y.px(i.current.paddingTop),y.px(i.current.paddingRight),y.px(i.current.paddingBottom),y.px(i.current.paddingLeft)]),l=this.getScaledInformation(i.columns),c=this.getScaledInformation(i.rows),h=this.getScaledLength(i.columnGap),d=this.getScaledLength(i.rowGap),u=vt([],e.verties[1],e.verties[0]),p=si(u[0],u[1])-180;return{style:{display:"grid","grid-template-columns":ua.join(l),"grid-template-rows":ua.join(c),"grid-column-gap":h,"grid-row-gap":d,left:y.px(t.left),top:y.px(t.top),width:y.px(t.width),height:y.px(t.height),"padding-top":r,"padding-right":s,"padding-bottom":a,"padding-left":o,"transform-origin":"left top",transform:`rotate(${p}deg)`}}}[Me("$gridGap")](){const e=this.getGridTargetLayer();if(!e||e.isLayout(At.GRID)===!1)return"";const t=Yi(this.$viewport.applyVerties(e.verties)),i=vt([],e.verties[1],e.verties[0]),r=si(i[0],i[1])-180;return{style:{left:y.px(t.left),top:y.px(t.top),width:y.px(t.width),height:y.px(t.height),"transform-origin":"left top",transform:`rotate(${r}deg)`}}}getScaledInformation(e){return e.map(t=>this.getScaledLength(t))}getScaledLength(e){return gi(e)?e:e instanceof y&&(e.isPx()||e.isNumber())?e.clone().mul(this.$viewport.scale):e}getGridTargetLayer(){if(this.$context.selection.dragTargetItem)return this.$context.selection.dragTargetItem;const e=this.$context.selection.current;if(!e)return null;if(e.isLayout(At.GRID))return e;const t=e.parent;return t&&t.is("project")?null:t&&t.isLayout(At.GRID)?t:null}getParsedValue(e){return e==="auto"?e:y.parse(e)}getGridLayoutInformation(){const e=this.getGridTargetLayer(),t=ua.parseStyle(e.gridTemplateColumns),i=ua.parseStyle(e.gridTemplateRows);return{current:e,columns:t,columnGap:this.getParsedValue(e.gridColumnGap),rows:i,rowGap:this.getParsedValue(e.gridRowGap)}}afterLoadRendering(e,t){this.trigger("refreshGridInformation",e,t)}[we("refreshGridInformation")+Nt(10)](e,t){const i=this.getGridTargetLayer();if(!i||i.isLayout(At.GRID)===!1||t!=="$grid")return;const r=this.getGridLayoutInformation(),s=this.$viewport.scale,a=e.$$(".grid-item").map(o=>{const[l,c]=o.attrs("data-row","data-column").map(v=>+v),{x:h,y:d,width:u,height:p}=o.offsetRect(),f={x:h/s,y:d/s,width:u/s,height:p/s},g=He(wi(f.x,f.y,f.width,f.height),r.current.absoluteMatrix),m=g.filter((v,x)=>x<4);return{row:l,column:c,rect:f,info:r,verties:g,originVerties:m,originRect:Yi(m)}});this.state.lastGridInfo={info:r,items:a},this.load("$gridGap"),this.$context.selection.updateGridInformation({info:r,items:a})}[me("$gridGap")+It](){if(!this.getGridTargetLayer()||this.$config.true("set.move.control.point")||!this.$context.selection.current)return"";const t=this.state.lastGridInfo,i=this.$viewport.scale;if(!t)return"";const{info:r,items:s}=t,{columns:a,rows:o}=r,l=[],c=s.filter(b=>b.column===1),h=s.filter(b=>b.row===1),d=Math.min(...c.map(b=>b.verties[0][1])),p=Math.max(...c.map(b=>b.verties[2][1]))-d;for(var f=1,g=a.length;fb.verties[0][0])),x=Math.max(...h.map(b=>b.verties[2][0]))-m;for(var _=1,g=o.length;_b.type==="column-gap"?V("div",{class:"gap-tool column-gap",style:{left:y.px(b.x*i),top:y.px(b.y*i),width:y.px(Math.max(b.width*i,5)),height:y.px(b.height*i)}}):b.type==="row-gap"?V("div",{class:"gap-tool row-gap",style:{left:y.px(b.x*i),top:y.px(b.y*i),height:y.px(Math.max(b.height*i,5)),width:y.px(b.width*i)}}):"")}isSelectedColumn(e){const t=this.$context.selection.current;return t.gridColumnStart<=e&&e{const o=r&&this.isSelectedColumn(a+1)?"selected":"";return V("div",{class:`grid-item-tool column ${o}`,"data-index":a,style:{"grid-column":`${a+1} / span 1`,"grid-row":"1 / span 1"}},V("div",{class:"grid-item-tool-inner"},V("div",{class:"item","data-index":a},V("span",null,t.columns[a])),V("div",{class:"drag-handle right"},V("div",{class:"column-delete","data-index":a,title:`Delete ${t.columns[a]}`},ie("close")),V("div",{class:"column-add","data-index":a,title:`Add ${t.columns[a]}`},ie("add")))))}),V("div",{class:"grid-item-tool append column-plus",style:{"grid-column":`${t.columns.length} / span 1`,"grid-row":"1 / span 1"}},ie("add")),Array.from(Array(t.rows.length).keys()).map(a=>{const o=r&&this.isSelectedRow(a+1)?"selected":"";return V(Ji,null,V("div",{class:`grid-item-tool row ${o}`,style:{"grid-row":`${a+1} / span 1`,"grid-column":"1 / span 1"}},V("div",{class:"grid-item-tool-inner"},V("div",{class:"item","data-index":a},V("span",null,t.rows[a])),V("div",{class:"drag-handle bottom"},V("div",{class:"row-delete","data-index":a,title:`Delete ${t.rows[a]}`},ie("close")),V("div",{class:"row-add","data-index":a,title:`Add ${t.rows[a]}`},ie("add"))))))}),V("div",{class:"grid-item-tool append row-plus",style:{"grid-row":`${t.rows.length} / span 1`,"grid-column":"1 / span 1"}},ie("add")),Array.from(Array(i).keys()).map(a=>{const o=a%t.columns.length,l=Math.floor(a/t.columns.length);return V(Ji,null,V("div",{class:"grid-item","data-row":l+1,"data-column":o+1,style:{"grid-column":`${o+1} / span 1`,"grid-row":`${l+1} / span 1`}}))}))}[H("refreshGridToolInfo")](){this.refresh()}[H(ai)](){this.refresh()}[H(Lt)+Nt(100)](){this.refresh()}[H(Ki)](){this.refresh()}}class FB extends ge{modifyData(e,t){this.parent.trigger(this.props.onchange,e,t)}template(){return` -
          - `}[me("$body")+It](){const e=this.$context.selection.current;return!e||e.isLayout(At.GRID)===!1?"":` -
          - ${W("NumberInputEditor",{wide:!0,label:"grid padding",key:"padding",ref:"$padding",value:e.paddingTop,min:0,max:300,step:1,onchange:"changePadding"})} -
          -
          - ${W("GridGapEditor",{label:this.$i18n("grid.layout.editor.column.gap"),ref:"$columnGap",key:"gridColumnGap",value:e.gridColumnGap||"",onchange:"changeKeyValue"})} -
          -
          - ${W("GridGapEditor",{label:this.$i18n("grid.layout.editor.row.gap"),ref:"$rowGap",key:"gridRowGap",value:e.gridRowGap||"",onchange:"changeKeyValue"})} -
          - `}[we("changePadding")](e,t){this.modifyData(e,{paddingTop:t,paddingLeft:t,paddingRight:t,paddingBottom:t})}[we("changeKeyValue")](e,t,i){this.modifyData(e,t,i)}}class jB extends Bt{getTitle(){return this.$i18n("layout.property.title")}getClassName(){return"elf--layout-property"}getBody(){return` -
          - `}getTools(){return` -
          - `}[me("$layoutType")](){const e=this.$context.selection.current;return e?W("SelectIconEditor",{ref:"$layout",key:"layout",height:24,value:e.layout,options:[At.DEFAULT,At.FLEX,At.GRID],icons:["layout_default","layout_flex","layout_grid"],onchange:"changeLayoutType"}):""}[me("$layoutProperty")+It](){var e=this.$context.selection.current||{layout:"default"};return` -
          -
          -
          - ${W("FlexLayoutEditor",{ref:"$flex",key:"flex-layout",value:{flexDirection:e.flexDirection,flexWrap:e.flexWrap,justifyContent:e.justifyContent,alignItems:e.alignItems,alignContent:e.alignContent,gap:e.gap},onchange:"changeLayoutInfo"})} -
          -
          - ${W("GridLayoutEditor",{ref:"$grid",key:"grid-layout",value:e["grid-layout"]||"",onchange:"changeLayoutInfo"})} -
          -
          - `}[we("changeLayoutInfo")](e,t){e==="padding"?this.$commands.executeCommand("setAttribute","change padding",this.$context.selection.packByValue(t)):this.$commands.executeCommand("setAttribute","change layout info",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.emit("refreshAllElementBoundSize")})}[we("changeLayoutType")](e,t){this.$context.selection.reset(this.$context.selection.packByValue({[e]:t})),this.updateTitle(),this.$commands.executeCommand("setAttribute","change layout type",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()})}get editableProperty(){return"layout"}enableHasChildren(){return this.$context.selection.current.enableHasChildren()}updateTitle(){this.setTitle(this.$context.selection.current.layout+" Layout")}[H(Lt)+et("checkShow")+et("enableHasChildren")](){this.updateTitle(),this.refresh()}}class NB extends Bt{getTitle(){return this.$i18n("layout.property.resizing.self.title")}getClassName(){return"elf--resizing-item-property"}getBody(){return` -
          -
          -
          -
          -
          -
          - `}[me("$resizingModeInfo")+It](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||St.FIXED,i=e.resizingVertical||St.FIXED;return` -
          -
          -
          -
          -
          ${ie("keyboard_arrow_up")}
          -
          ${ie("keyboard_arrow_down")}
          -
          -
          -
          ${ie("keyboard_arrow_left")}
          -
          ${ie("keyboard_arrow_right")}
          -
          -
          -
          -
          - -
          - `}makeOptionsForHorizontal(){return[{value:St.FIXED,text:"Fixed Width"},{value:St.FILL_CONTAINER,text:"Fill Container"}]}makeOptionsForVertical(){return[{value:St.FIXED,text:"Fixed Height"},{value:St.FILL_CONTAINER,text:"Fill Container"}]}[me("$resizingModeInfoInput")+It](){var e=this.$context.selection.current||{};return this.setState({resizingHorizontal:(e==null?void 0:e.resizingHorizontal)||St.FIXED,resizingVertical:(e==null?void 0:e.resizingVertical)||St.FIXED},!1),` -
          - - ${W("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:this.state.resizingHorizontal,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} -
          - -
          - - ${W("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:this.state.resizingVertical,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} -
          - `}[ne("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===St.FIXED?this.trigger("changeResizingMode",t,St.FILL_CONTAINER):this.trigger("changeResizingMode",t,St.FIXED)}[we("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply self resizing",this.$context.selection.packByValue({[e]:t,flexGrow:1})),this.nextTick(()=>{this.refresh()},100)}[H(Lt)+Nt(100)](){this.refreshShow(()=>{var t,i;var e=this.$context.selection.current;return((t=e==null?void 0:e.parent)==null?void 0:t.hasLayout())&&((i=e==null?void 0:e.parent)==null?void 0:i.isLayout(At.GRID))===!1})}[H(Ki)](){const e=this.$context.selection.current;e&&e.changedLayoutItem&&(e.resizingHorizontal!==this.state.resizingHorizontal||e.resizingVertical!==this.state.resizingVertical)&&this.refresh()}}class BB extends Bt{getTitle(){return this.$i18n("layout.property.resizing.title")}getClassName(){return"elf--resizing-property"}getBody(){return` -
          -
          -
          -
          -
          -
          - `}[me("$resizingModeInfo")+It](){var e=this.$context.selection.current||{};const t=e.resizingHorizontal||St.FIXED,i=e.resizingVertical||St.FIXED;return` -
          -
          -
          -
          ${ie("keyboard_arrow_down")}
          -
          ${ie("keyboard_arrow_up")}
          -
          -
          -
          ${ie("keyboard_arrow_right")}
          -
          ${ie("keyboard_arrow_left")}
          -
          -
          -
          -
          -
          -
          - `}makeOptionsForHorizontal(){return[{value:St.FIXED,text:"Fixed Width"},{value:St.HUG_CONTENT,text:"Hug Content"}]}makeOptionsForVertical(){return[{value:St.FIXED,text:"Fixed Height"},{value:St.HUG_CONTENT,text:"Hug Content"}]}[me("$resizingModeInfoInput")](){var e=this.$context.selection.current||{};return` -
          - - ${W("SelectEditor",{ref:"$resizingHorizontal",key:"resizingHorizontal",value:(e==null?void 0:e.resizingHorizontal)||St.FIXED,options:this.makeOptionsForHorizontal(),onchange:"changeResizingMode"})} -
          - -
          - - ${W("SelectEditor",{ref:"$resizingVertical",key:"resizingVertical",value:(e==null?void 0:e.resizingVertical)||St.FIXED,options:this.makeOptionsForVertical(),onchange:"changeResizingMode"})} -
          - `}[ne("$resizingModeInfo [data-key]")](e){const t=e.$dt.data("key");this.$context.selection.current[t]===St.FIXED?this.trigger("changeResizingMode",t,St.HUG_CONTENT):this.trigger("changeResizingMode",t,St.FIXED)}[we("changeResizingMode")](e,t){this.$commands.executeCommand("setAttribute","apply constraints",this.$context.selection.packByValue({[e]:t})),this.nextTick(()=>{this.refresh()},100)}[H(Lt)+Nt(100)](){this.refreshShow(()=>{var e=this.$context.selection.current;return e&&e.hasLayout()})}}function GB(n){n.registerElement({FlexLayoutEditor:LB,GridLayoutEditor:FB,GridBoxEditor:AB,GridGapEditor:RB}),n.registerUI("inspector.tab.style",{LayoutProperty:jB,ResizingProperty:BB,ResizingItemProperty:NB,DefaultLayoutItemProperty:EB}),n.registerUI("canvas.view",{FlexGrowToolView:IB,GridGrowToolView:DB},rx.LAYOUT_TOOL)}class HB extends ge{template(){return V("div",{class:"elf--line-view sepia(0.2)"})}[qt("vertical.line")](){this.refresh()}[qt("horizontal.line")](){this.refresh()}[H(ai,Ki)](){this.refresh()}[me("$el")+It](){return[...this.$config.get("vertical.line").map((e,t)=>{const i=this.$viewport.applyVertex([0,e,0]);return V("div",{class:"vertical-line","data-index":t,style:`transform: translate3d(0px, ${i[1]}px, 0px);`})}),...this.$config.get("horizontal.line").map((e,t)=>{const i=this.$viewport.applyVertex([e,0,0]);return V("div",{class:"horizontal-line","data-index":t,style:`transform: translate3d(${i[0]}px, 0px, 0px);`})})]}[Ke("$el .horizontal-line")+at("moveHorizontalLine")+ct("moveEndHorizontalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveHorizontalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("horizontal.line",this.startIndex,e[0])}moveEndHorizontalLine(){this.$commands.emit("recoverCursor")}[Ke("$el .vertical-line")+at("moveVerticalLine")+ct("moveEndVerticalLine")](e){this.startIndex=+e.$dt.data("index"),this.$context.snapManager.clear()}moveVerticalLine(){const e=this.$context.snapManager.getWorldPosition();this.$config.setIndexValue("vertical.line",this.startIndex,e[1])}moveEndVerticalLine(){this.$commands.emit("recoverCursor")}}function UB(n){n.registerUI("canvas.view",{LineView:HB})}var WB=[{type:"button",icon:"navigation",events:["config:editing.mode"],selected:n=>n.context.config.is("editing.mode",ki.SELECT),action:n=>{n.context.commands.emit("addLayerView","select"),n.context.config.is("editing.mode.itemType",ki.SELECT)}},{type:"button",icon:"artboard",events:["config:editing.mode","config:editing.mode.itemType"],selected:n=>n.context.config.is("editing.mode",ki.APPEND)&&n.context.config.is("editing.mode.itemType","artboard"),action:n=>{n.context.commands.emit("addLayerView","artboard")}},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.css.itemType")))==null?void 0:t.icon)||ie("rect")},items:[{icon:ie("rect"),title:"Rect Layer",key:"rect",command:"addLayerView",args:["rect",{backgroundColor:"#ececec"}],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","rect")},shortcut:Jr({key:"R"})},{icon:ie("lens"),title:"Circle Layer",key:"circle",command:"addLayerView",args:["circle"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","circle")},shortcut:Jr({key:"O"})},{icon:ie("image"),title:"Image",key:"image",command:"addLayerView",args:["image"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","image")},shortcut:Jr({key:"I"})},"-",{icon:ie("video"),title:"Video",key:"video",command:"addLayerView",args:["video"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","video")},shortcut:Jr({key:"V"})},{icon:ie("iframe"),title:"IFrame",key:"iframe",command:"addLayerView",args:["iframe"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","iframe")},shortcut:Jr({key:"F"})},{icon:ie("rect"),title:"SampleLayer",key:"sample",command:"addLayerView",args:["sample"],closable:!0,nextTick:n=>{n.context.config.set("editing.css.itemType","sample")}}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.css.itemType"],selected:n=>n.context.config.is("editing.mode",ki.APPEND)&&(n.context.config.is("editing.mode.itemType","rect")||n.context.config.is("editing.mode.itemType","circle")||n.context.config.is("editing.mode.itemType","image")||n.context.config.is("editing.mode.itemType","video")||n.context.config.is("editing.mode.itemType","iframe")),selectedKey:n=>n.context.config.get("editing.css.itemType")},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.draw.itemType")))==null?void 0:t.icon)||ie("pentool")},items:[{icon:ie("pentool"),title:"Pen",key:"path",command:"addLayerView",args:["path"],closable:!0,nextTick:n=>{n.context.config.set("editing.draw.itemType","path")},shortcut:Jr({key:"P"})},{icon:ie("brush"),title:"Pencil",key:"brush",command:"addLayerView",args:["brush"],closable:!0,nextTick:n=>{n.context.config.set("editing.draw.itemType","brush")},shortcut:Jr({key:"B"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.draw.itemType"],selected:n=>n.context.config.is("editing.mode.itemType","path")||n.context.config.is("editing.mode.itemType","draw"),selectedKey:n=>n.context.config.get("editing.draw.itemType")},{type:"dropdown",icon:(n,e)=>{var t;return((t=e.findItem(n.context.config.get("editing.svg.itemType")))==null?void 0:t.icon)||ie("outline_rect")},items:[{icon:ie("outline_rect"),title:"Rectangle",key:"svg-rect",command:"addLayerView",args:["svg-rect"],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-rect")},shortcut:Jr({key:"Shift+R"})},{icon:ie("outline_circle"),title:"Circle",key:"svg-circle",command:"addLayerView",args:["svg-circle"],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-circle")},shortcut:Jr({key:"Shift+O"})},{icon:ie("polygon"),title:"Polygon",key:"svg-polygon",command:"addLayerView",args:["polygon",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","polygon")},shortcut:Jr({key:"Shift+P"})},{icon:ie("star"),title:"Star",key:"star",command:"addLayerView",args:["star",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","star")},shortcut:Jr({key:"Shift+S"})},"-",{icon:ie("smooth"),title:"Spline",key:"spline",command:"addLayerView",args:["spline",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","spline")},shortcut:Jr({key:"Shift+L"})},{icon:ie("text_rotate"),title:"TextPath",key:"svg-texpath",command:"addLayerView",args:["svg-textpath",{backgroundColor:"transparent"}],closable:!0,nextTick:n=>{n.context.config.set("editing.svg.itemType","svg-textpath")},shortcut:Jr({key:"Shift+T"})}],events:["config:editing.mode","config:editing.mode.itemType","config:editing.svg.itemType"],selected:n=>n.context.config.is("editing.mode",ki.APPEND)&&(n.context.config.is("editing.mode.itemType","svg-rect")||n.context.config.is("editing.mode.itemType","svg-circle")||n.context.config.is("editing.mode.itemType","polygon")||n.context.config.is("editing.mode.itemType","star")||n.context.config.is("editing.mode.itemType","spline")||n.context.config.is("editing.mode.itemType","svg-textpath")),selectedKey:n=>n.context.config.get("editing.svg.itemType")},{type:"button",icon:"title",events:["config:editing.mode","config:editing.mode.itemType"],selected:n=>n.context.config.is("editing.mode",ki.APPEND)&&n.context.config.is("editing.mode.itemType","text"),action:n=>{n.context.commands.emit("addLayerView","text")}},{type:"button",tooltip:"Handle",icon:"pantool",events:["config:editing.mode"],selected:n=>n.context.config.is("editing.mode",ki.HAND),action:n=>{n.context.config.set("editing.mode",ki.HAND)}}];function XB(n){n.registerMenu("toolbar.left",WB)}class YB extends ge{initState(){return{tolerance:1,stroke:"black","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",msg:this.$i18n("path.manager.msg")}}[H(Lt)](){var t,i;var e=this.$context.selection.current;e&&((t=this.children.$stroke)==null||t.setValue(e.stroke||"rgba(0, 0, 0, 1)"),(i=this.children.$strokeWidth)==null||i.setValue(e.strokeWidth||y.number(1)))}[H("setColorAsset")]({color:e}){this.$el.isShow()&&(this.setState({stroke:e},!1),this.children.$stroke.setValue(e),this.updateData({stroke:e}))}template(){return` -
          -
          - -
          -
          -
          - - ${W("NumberInputEditor",{ref:"$tolerance",key:"tolerance",value:1,min:0,max:100,step:.01,unit:"number",onchange:"changeValue"})} -
          -
          - - ${W("FillSingleEditor",{ref:"$stroke",simple:!0,value:this.state.stroke,key:"stroke",onchange:"changeValue"})} -
          - -
          - - ${W("NumberInputEditor",{ref:"$strokeWidth",key:"strokeWidth",value:this.state.strokeWidth,onchange:"changeValue"})} -
          - - -
          - - ${W("SelectEditor",{ref:"$strokeLineCap",key:"strokeLinecap",value:this.state.strokeLinecap,options:["butt","round","square"],onchange:"changeValue"})} -
          -
          - - ${W("SelectEditor",{ref:"$strokeLineJoin",key:"strokeLinejoin",value:this.state.strokeLinejoin,options:["miter","bevel","round"],onchange:"changeValue"})} -
          -
          -
          - `}[we("changeValue")](e,t){this.updateData({[e]:t})}updateData(e={}){this.setState(e,!1),this.state.instance.trigger(this.state.changeEvent,e)}[H("changePathManager")](e){this.setState({mode:e})}[H("showDrawManager")](e={}){e.changeEvent=e.changeEvent||"changeDrawManager",this.setState(e),this.$el.show(),this.emit("hidePathManager")}[H("hideDrawManager")](){this.$el.hide()}[ne("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}}const KB=["fill","fill-opacity","stroke","stroke-width","stroke-linecap","stroke-linejoin"];class qB extends ge{initialize(){super.initialize(),this.pathParser=new be}initState(){return{points:[],$target:null,fill:"transparent",stroke:"black","fill-opacity":null,"stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round",tolerance:1}}[H("changeDrawManager")](e){this.setState(P({},e),!1)}get scale(){return this.$viewport.scale}template(){return` -
          -
          -
          `}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[Ar("document")+et("isShow")+Bc+So](){this.trigger("hidePathDrawEditor")}[H("DrawEditorDone")](){this.trigger("hidePathDrawEditor")}get totalPathLength(){if(!this.refs.$view)return 0;var e=this.refs.$view.$("path.object");return e?e.totalLength:0}makePathLayer(){var e;const t=be.makePathByPoints(this.state.points).simplify(this.state.tolerance).smooth(30);t.transformMat4(this.$viewport.matrixInverse);const i=t.getBBox(),r=mr(i[1],i[0]),s=mr(i[3],i[0]);t.translate(-i[0][0],-i[0][1]);const a={itemType:"svg-path",x:i[0][0],y:i[0][1],width:r,height:s,d:t.d,totalLength:this.totalPathLength};return KB.forEach(l=>{this.state[l]&&Object.assign(a,{[l]:this.state[l]})}),e=this.$context.selection.currentProject.appendChild(this.$editor.createModel(a)),e}addPathLayer(){var e=this.getPathRect();if(e.width!==0&&e.height!==0){var t=this.makePathLayer(e);t&&this.emit("refreshAll")}}changeMode(e){this.setState(P(P({},this.initState()),e),!1)}getCurrentObject(){var e=this.state.current;return e?{current:e,d:e.d}:null}[H("showPathDrawEditor")](e={}){this.changeMode(e),this.$el.show(),this.$el.focus(),this.emit("showDrawManager",{instance:this,fill:this.state.fill,stroke:this.state.stroke,"fill-opacity":this.state["fill-opacity"],"stroke-width":this.state["stroke-width"],"stroke-linecap":this.state["stroke-linecap"],"stroke-linejoin":this.state["stroke-linejoin"]}),this.emit("hidePathEditor"),this.$context.commands.emit("push.mode.view","PathDrawView")}[H("initPathDrawEditor")](){this.pathParser.reset(""),this.refs.$view.empty()}[H("hidePathDrawEditor")](){this.$el.isShow()&&(this.trigger("initPathDrawEditor"),this.$el.hide(),this.emit("hideDrawManager"),this.$commands.emit("pop.mode.view","PathDrawView"))}[H("hideAddViewLayer")](){this.$el.hide(),this.emit("hideDrawManager")}getInnerId(e=""){return"draw-manager-"+e}get toFillSVG(){return ii.parseImage(this.state.fill||"transparent").toSVGString(this.fillId)}get toStrokeSVG(){return ii.parseImage(this.state.stroke||"black").toSVGString(this.strokeId)}get toDefInnerString(){return` - ${this.toFillSVG} - ${this.toStrokeSVG} - `}get toDefString(){var e=this.toDefInnerString.trim();return` - - ${e} - - `}get fillId(){return this.getInnerId("fill")}get strokeId(){return this.getInnerId("stroke")}get toFillValue(){return ii.parseImage(this.state.fill||"transparent").toFillValue(this.fillId)}get toStrokeValue(){return ii.parseImage(this.state.stroke||"black").toFillValue(this.strokeId)}[Me("$view")](){const e=be.makePathByPoints(this.state.points).simplify(this.state.tolerance);return{innerHTML:` - - ${this.toDefString} - - - `}}renderPath(){this.bindData("$view")}[H("resizeEditor")](){this.initRect(!0)}getPathRect(){this.initRect(!0);var e=this.refs.$view.$("path.object"),t={x:0,y:0,width:0,height:0};return e&&(t=e.rect(),t.x-=this.state.rect.x,t.y-=this.state.rect.y),t}[Ke("$view")+at()+ct()](e){this.initRect(),this.state.altKey=!1,this.state.startXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.points=[this.state.startXY]}move(e,t,i,r){this.state.points.push({x:this.state.startXY.x+e,y:this.state.startXY.y+t,pressure:r}),this.renderPath()}end(){this.addPathLayer(),this.trigger("initPathDrawEditor")}}function Vb(n){n.registerUI("canvas.view",{PathDrawView:qB}),n.registerUI("page.subeditor.view",{DrawManager:YB})}const Lg=["startPoint","endPoint","reversePoint"];function C0(n,e,t,i,r){var s=n.filter(o=>o?Math.abs(o[e]-t)<=r:!1).map(o=>({dist:Math.abs(o[e]-t),point:o}));s.sort((o,l)=>o.dista).forEach(a=>{s.filter(o=>a[o]).forEach(o=>{var l=a[o],c=Math.abs(l[e]-t);c<=i&&r.push({dist:c,point:l})})}),r.sort((a,o)=>a.dist>o.dist?1:-1),r.length?r[0].point:null}function I0(n,e,t,i=1){for(var r=[],s=0,a=n.length;sJB(e,t,d,i)).join(" ");return{d:h}}function JB(n,e,t,i=1){var{command:r,values:s}=t;switch(r){case"Z":return"Z";default:var a=s.map(o=>{var l=o.x-n===0?0:(o.x-n)/i,c=o.y-e===0?0:(o.y-e)/i;return`${l} ${c}`}).join(" ");return`${r} ${a}`}}function QB(n,e){return!(n.x2.valuee.x||n.y.value>e.y)}class Mm{static generatorPathString(e,t=0,i=0,r=1){return I0(e,t,i,r).d}constructor(e){this.pathEditor=e,this.pathStringManager=new Qi,this.guideLineManager=new Qi,this.segmentManager=new Nx(this.pathEditor.$viewport),this.points=[],this.cachedSegmentKeys={},this.initialize(),this.initializeSelect()}initialize(){this.splitLines=[],this.guideLineManager.reset(),this.segmentManager.reset(),this.pathStringManager.reset()}initializeSelect(e=[]){this.selectedPointKeys={},this.selectedPointList=[],e.length&&this.select(...e.map(t=>{const i=this.points[t.index][t.key];if(!!i)return{x:i.x,y:i.y,key:t.key,index:i.index}}).filter(Boolean))}get state(){return this.pathEditor.state}get clonePoints(){return[...this.points]}get length(){return this.points.length}setPoints(e=[]){this.points=e,this.snapPointList=[],this.points.length===0&&(this.select(),this.selectGroup(-1))}selectInBox(e,t=!1){var i=[];if(this.points.forEach((r,s)=>{Lg.forEach(a=>{const o=r[a];QB(e,o)&&i.push({x:o.x,y:o.y,key:a,index:s})})}),t){i=i.map(o=>{const l=this.makeSegmentKey(o);return ze(P({},o),{included:Boolean(this.selectedPointKeys[l])})});const r=i.filter(o=>o.included),s=i.filter(o=>!o.included);let a=[...this.selectedPointList];r.length&&(a=this.selectedPointList.filter(o=>{const l=this.makeSegmentKey(o);return Boolean(r.find(c=>l===this.makeSegmentKey(c)))===!1})),this.select(...a,...s)}else this.select(...i)}makeSegmentKey(e){return`${e.key}_${e.index}`}select(...e){this.selectedPointKeys={},this.selectedPointList=e.map(({x:t,y:i,key:r,index:s})=>({x:t,y:i,key:r,index:+s})),e.forEach(t=>{var i=this.makeSegmentKey(t);this.selectedPointKeys[i]=!0})}convertPointsToSelectionList(e){var t=[];return e.forEach(i=>{Lg.forEach(r=>{const{x:s,y:a}=i[r];t.push({x:s,y:a,key:r,index:i.index})})}),t}selectGroup(e){const t=this.splitedGroupList[e];t?this.select(...this.convertPointsToSelectionList(t.points)):this.select()}getCacheSegmentKey(e,t){return this.cachedSegmentKeys[e]||(this.cachedSegmentKeys[e]={}),this.cachedSegmentKeys[e][t]||(this.cachedSegmentKeys[e][t]=this.makeSegmentKey({key:e,index:t})),this.cachedSegmentKeys[e][t]}toggleSelect(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)?this.select(...this.selectedPointList,{x:i.x,y:i.y,key:e,index:t}):this.select(...this.selectedPointList.filter(r=>r.key!==e||r.index!==t))}}selectKeyIndex(e,t){if(this.points[t]){var i=this.points[t][e];i&&!this.isSelectedSegment(e,t)&&this.select({x:i.x,y:i.y,key:e,index:t})}}reselect(){this.selectedPointList.filter(Boolean).forEach(e=>{var i;var t=(i=this.points[e.index])==null?void 0:i[e.key];t&&(e.x=t.x,e.y=t.y)})}isSelectedSegment(e,t){var i=this.getCacheSegmentKey(e,t);return this.selectedPointKeys[i]}commitTransformMatrix(e,t){var i=Wt([],[e.x,e.y,0],t);return{x:i[0],y:i[1]}}transformMat4(e){this.transformPoints.forEach((t,i)=>{var r=this.points[i];Object.assign(r.startPoint,this.commitTransformMatrix(t.startPoint,e)),Object.assign(r.endPoint,this.commitTransformMatrix(t.endPoint,e)),Object.assign(r.reversePoint,this.commitTransformMatrix(t.reversePoint,e))})}transform(e){var{x:t,y:i,width:r,height:s}=this.transformRect,a=Wi();switch(Oi(a,a,[t,i,0]),e){case"flipX":os(a,a,[-1,1,1]),Oi(a,a,[-r,0,0]);break;case"flipY":os(a,a,[1,-1,1]),Oi(a,a,[0,-s,0]);break;case"flip":os(a,a,[-1,-1,1]),Oi(a,a,[-r,-s,0]);break}Oi(a,a,[-t,-i,0]),this.transformMat4(a)}initTransform(e){this.transformRect=rt(e),this.transformPoints=this.clonePoints.map(t=>({startPoint:rt(t.startPoint),endPoint:rt(t.endPoint),reversePoint:rt(t.reversePoint)}))}setConnectedPoint(e,t){var i=this.state,r=i.dragXY.x+e,s=i.dragXY.y+t,a={x:r,y:s},o={x:r,y:s};i.dragPoints&&(i.reversePoint=xe.getReversePoint(i.startPoint,a));var l={startPoint:i.startPoint,endPoint:a,curve:!!i.dragPoints,reversePoint:o,connected:!0,close:!0};this.points.push(l)}setLastPoint(e){var t=rt(e),i=rt(e),r={startPoint:e,endPoint:t,curve:!1,reversePoint:i,connected:!1,close:!1};this.points.push(r)}getPrevPoint(e){return xe.getPrevPoint(this.points,e)}getIndexPoint(e){return xe.getIndexPoint(this.points,e)}getNextPoint(e){return xe.getNextPoint(this.points,e)}getConnectedPointList(e){return xe.getConnectedPointList(this.points,e)}isFirst(e){return xe.isFirst(e)}getLastPoint(e){return xe.getLastPoint(this.points,e)}setCachePoint(e,t){var i=this.state;this.snapPointList=[],this.selectedIndex=e,i.connectedPoint=this.getPrevPoint(e),i.connectedPointList=rt(xe.getConnectedPointList(this.points,this.selectedIndex)),i.connectedPoint&&!i.connectedPoint.connected&&(i.connectedPoint=null),i.segment=this.getIndexPoint(e),i.segment.connected&&(i.connectedPoint=this.getNextPoint(e));var r=this.isFirst(i.segment);if(r){var s=this.getLastPoint(e);s.connected&&(i.connectedPoint=s)}i.segmentKey=t,i.isCurveSegment=i.segment.curve&&i.segmentKey!="startPoint",i.originalSegment=rt(i.segment),i.connectedPoint&&(i.originalConnectedPoint=rt(i.connectedPoint)),i.cachedPoints=[],this.points.filter(a=>a&&a!=i.segment).forEach(a=>{i.cachedPoints.push(a.startPoint,a.reversePoint,a.endPoint)})}moveSegment(e,t,i,r=void 0){if(r){const l=this.points[r.index][e];l.x=r[e].x+t,l.y=r[e].y+i}else{var s=this.state,a=s.originalSegment[e],o=s.segment[e];a&&(o.x=a.x+t,o.y=a.y+i)}}calculateToCurve(e,t,i){var r=(t.startPoint.x+i.startPoint.x)/2,s=(t.startPoint.y+i.startPoint.y)/2,a=(t.startPoint.x-r)/2,o=(t.startPoint.y-s)/2;return e.endPoint={x:e.startPoint.x+a,y:e.startPoint.y+o},e.reversePoint={x:e.startPoint.x-a,y:e.startPoint.y-o},{dx:a,dy:o}}convertToCurve(e){var t=this.points[e];if(t.curve)if(t.curve=!1,t.reversePoint=rt(t.startPoint),t.endPoint=rt(t.startPoint),t.command==="M"){var i=xe.getPrevPoint(this.points,t.index);i.connected&&(i.curve=!1,i.reversePoint=rt(i.startPoint),i.endPoint=rt(i.startPoint))}else{var r=this.getNextPoint(e);if(r&&r.command==="M"){var s=r;s.curve=!1,s.reversePoint=rt(s.startPoint),s.endPoint=rt(s.startPoint)}}else{t.curve=!0;var a=this.getPrevPoint(e),r=this.getNextPoint(e);if(r&&r.indexe&&r.command!=="M")this.calculateToCurve(t,r,a);else if(!r&&a){var o=(t.startPoint.x-a.startPoint.x)/3,l=(t.startPoint.y-a.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reversePoint=xe.getReversePoint(t.startPoint,t.endPoint)}else if(!a&&r){var o=(t.startPoint.x-r.startPoint.x)/3,l=(t.startPoint.y-r.startPoint.y)/3;t.endPoint={x:t.startPoint.x+o,y:t.startPoint.y+l},t.reverse=xe.getReversePoint(t.startPoint,t.endPoint)}}}moveCurveSegment(e,t,i){var r=this.state;this.moveSegment(e,t,i);var s=e==="endPoint"?"reversePoint":"endPoint";r.segment[s]=xe.getReversePoint(r.segment.startPoint,r.segment[e])}rotateSegmentTarget(e,t){var i=this.state;if(i.originalSegment&&i.segment){var{x:r,y:s}=i.originalSegment.startPoint,{x:a,y:o}=i.segment[e],{x:l,y:c}=i.originalSegment[t],{x:h,y:d}=Tl(si(a-r,o-s),Rr(l,c,r,s),r,s);i.segment[t]={x:h,y:d}}}rotateSegment(e){this.rotateSegmentTarget(e,e==="endPoint"?"reversePoint":"endPoint")}calculateSnap(e,d,p,r=1){var s=this.state,a=s.cachedPoints,o=s.originalSegment[e];if(!e)return{dx:d,dy:p,snapPointList:[]};var l=o.x+d,c=o.y+p,{point:h,distanceValue:d}=C0(a,"x",l,d,r),{point:u,distanceValue:p}=C0(a,"y",c,p,r),f={x:o.x+d,y:o.y+p},g=[];return h&&g.push({startPoint:h,endPoint:f}),u&&g.push({startPoint:u,endPoint:f}),{dx:d,dy:p,snapPointList:g}}copySegment(e,t){t.startPoint=rt(e.startPoint),t.endPoint=rt(e.endPoint),t.reversePoint=rt(e.reversePoint)}get selectedLength(){return this.selectedPointList.length}moveSelectedSegment(e,t){this.selectedPointList.length>0?this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.x=i.x+e,r.y=i.y+t}):this.selectedGroup&&this.moveSelectedGroup(e,t)}moveSelectedGroup(e,t){this.selectedGroup.points.forEach(i=>{const r=this.points[i.index];r.startPoint.x=i.startPoint.x+e,r.startPoint.y=i.startPoint.y+t,r.endPoint.x=i.endPoint.x+e,r.endPoint.y=i.endPoint.y+t,r.reversePoint.x=i.reversePoint.x+e,r.reversePoint.y=i.reversePoint.y+t})}get selectedGroup(){return this.splitedGroupList[this.state.selectedGroupIndex]}get splitedGroupList(){return xe.getSplitedGroupList(this.points)}get groupList(){return xe.getGroupList(this.points)}getGroup(e,t){return xe.getGroup(e,t)}get selectedGroupIndexList(){const e=new Set,t=this.groupList;return this.selectedPointList.length===0&&this.state.selectedGroupIndex<0?t.map(r=>r.groupIndex):(this.selectedPointList.forEach(r=>{const s=this.getGroup(t,r.index);s&&e.add(s.groupIndex)}),[...new Set([...e,this.state.selectedGroupIndex])])}removeSelectedSegment(){this.selectedPointList.forEach(i=>{var r=this.points[i.index][i.key];r.removed=!0});const e=xe.splitPoints(this.points),t=xe.recoverPoints(e.map(i=>i.filter(r=>!r.startPoint.removed).map(r=>(r.endPoint.removed&&(r.endPoint=rt(r.startPoint)),r.reversePoint.removed&&(r.reversePoint=rt(r.startPoint)),xe.isEqual(r.endPoint,r.startPoint,r.reversePoint)&&(r.command="L",r.curve=!1),r))));this.points=t,this.select()}move(e,t,i){var r=this.state,{isCurveSegment:s,segmentKey:a,connectedPoint:o}=r;if(this.selectedPointList.length>1)this.moveSelectedSegment(e,t);else if(this.selectedPointList.length===1){var{dx:e,dy:t,snapPointList:l}=this.calculateSnap(a,e,t,3);if(this.snapPointList=l||[],s)if(i.shiftKey){this.moveSegment(a,e,t);var c=a==="endPoint"?"reversePoint":"endPoint";r.segment[c]=xe.getReversePoint(r.segment.startPoint,r.segment[a])}else i.altKey?(this.moveSegment(a,e,t),this.rotateSegment(a)):this.moveSegment(a,e,t);else this.moveSegment("startPoint",e,t),this.moveSegment("endPoint",e,t),this.moveSegment("reversePoint",e,t),i.altKey||r.connectedPointList.forEach(u=>{this.moveSegment("startPoint",e,t,u),this.moveSegment("endPoint",e,t,u),this.moveSegment("reversePoint",e,t,u)});o&&this.copySegment(r.segment,r.connectedPoint)}else this.state.selectedGroupIndex>-1&&this.moveSelectedGroup(e,t)}moveEnd(e,t){var i=this.state,r=this.points,s=i.dragXY.x+e,a=i.dragXY.y+t,o={x:s,y:a},l={x:s,y:a};i.dragPoints&&(l=xe.getReversePoint(i.startPoint,o)),r.push({command:i.clickCount===0?"M":"",startPoint:i.startPoint,endPoint:o,curve:!!i.dragPoints,reversePoint:l}),i.startPoint=null,i.dragPoints=!1,i.moveXY=null}setPoint(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i),o=[ze(P({},s),{endPoint:e.first[1]}),{startPoint:e.first[3],reversePoint:e.first[2],curve:!0,endPoint:e.second[1]},ze(P({},a),{reversePoint:e.second[2]})],l=xe.getIndex(r,t);return r.splice(l,2,...o),this.points=r,l+1}setPointQuard(e){var t=e.first[0],i=e.second[e.second.length-1],r=this.clonePoints,s=xe.getPoint(r,t),a=xe.getPoint(r,i);if(s.curve&&a.curve===!1){var o=[ze(P({},s),{endPoint:s.startPoint}),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]}],l=xe.getIndex(r,t);r.splice(l,1,...o)}else{var o=[P({},s),{startPoint:e.first[2],reversePoint:e.first[1],curve:!0,endPoint:e.second[1]},ze(P({},a),{reversePoint:e.second[1],curve:!0})],l=xe.getIndex(r,t);r.splice(l,2,...o)}return this.points=r,l+1}setPointLine(e){var t=e.first[0],i=this.clonePoints,r=[{command:"L",startPoint:e.first[1],curve:!1,endPoint:e.first[1],reversePoint:e.first[1]}],s=xe.getIndex(i,t);return i.splice(s+1,0,...r),this.points=i,s+1}toPath(e=0,t=0,i=1){return I0(this.clonePoints,e,t,i)}makeSVGPath(){return this.initialize(),this.makePointGuide(this.points),this.makeMovePositionGuide(),this.toSVGString()}makeTriangleDistancePointGuide(e,t){var i=Math.min(e.startPoint.x,t.startPoint.x),r=Math.max(e.startPoint.x,t.startPoint.x),s=Math.min(e.startPoint.y,t.startPoint.y),a=Math.max(e.startPoint.y,t.startPoint.y);if(e.startPoint.xt.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:a},{x:r,y:a}).addDistanceLine({x:r,y:s},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y>t.startPoint.y?this.segmentManager.addDistanceLine({x:i,y:s},{x:i,y:a}).addDistanceLine({x:i,y:a},{x:r,y:a}):e.startPoint.x>t.startPoint.x&&e.startPoint.y(t.reset(),t.M(i.startPoint).L(i.endPoint).X(i.startPoint).toString("snap-path")))}return e.join("")}makePathArea(){const e=this.splitedGroupList.map(({startPointIndex:i,points:r},s)=>{const a=Mm.generatorPathString(r),o=xn(be.fromSVGString(a).getBBox());return{points:r,startPointIndex:i,groupIndex:s,center:o[4],d:a}}),t=e.length;return` - - ${e.map(i=>{const{center:r}=i,[s,a]=r;return` - - - ${t>1&&` - ${i.groupIndex+1} - `} - `}).join("")} - - `}toSVGString(){return` - - ${this.guideLineManager.toString("guide")} - ${this.splitLines.join("")} - ${this.makeSnapLines()} - ${this.makePathArea()} - ${this.segmentManager.toString()} - - `}}function _s([n,e]){return{x:n,y:e}}const eG=class extends ge{convertToCurve(n){this.pathGenerator.convertToCurve(n),this.renderPath(),this.refreshPathLayer()}isEditableSegment(){return this.state.disableCurve===!1}[_h("$view [data-segment]")+et("isEditableSegment")+wt](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}[q1("$view [data-segment]")+wt+U1(300)](n){var e=+n.$dt.attr("data-index");this.convertToCurve(e)}},tG=class extends eG{calculatePointOnLine(n,e){var t=new be(n);return t.getClosedPoint(e)}[Ke("$view .split-path")+at()+ct()](n){this.initRect();var e=new be(n.$dt.attr("d")),t={x:n.xy.x-this.state.rect.x,y:n.xy.y-this.state.rect.y},i=-1;if(this.isMode("path")){this.state.dragXY=t,this.state.startPoint=this.state.dragXY,this.pathGenerator.setLastPoint(this.state.startPoint),this.state.isSplitPath=!0,this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"));return}else{if(e.segments[1].command==="C"){var r=[_s(e.segments[0].values),_s(e.segments[1].values.slice(0,2)),_s(e.segments[1].values.slice(2,4)),_s(e.segments[1].values.slice(4,6))],s=om(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPoint(Uc(r,a))}else if(e.segments[1].command==="Q"){var r=[_s(e.segments[0].values),_s(e.segments[1].values.slice(0,2)),_s(e.segments[1].values.slice(2,4))],s=lm(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointQuard(Wc(r,a))}else if(e.segments[1].command==="L"){var r=[_s(e.segments[0].values),_s(e.segments[1].values.slice(0,2))],s=cm(...r,20),a=s(t.x,t.y);i=this.pathGenerator.setPointLine(Xc(r,a)),n.altKey&&this.pathGenerator.convertToCurve(i)}this.renderPath(),this.refreshPathLayer(),this.changeMode("segment-move"),this.pathGenerator.setCachePoint(i,"startPoint"),this.pathGenerator.selectKeyIndex("startPoint",i)}}},iG=class extends tG{[H("changePathTransform")](n){this.resetTransformZone();var{width:e,height:t}=this.state.transformZoneRect;switch(this.pathGenerator.initTransform(this.state.transformZoneRect),n){case"flipX":this.pathGenerator.transform("flipX",e,0);break;case"flipY":this.pathGenerator.transform("flipY",0,t);break;case"flip":this.pathGenerator.transform("flip",e,t)}this.renderPath(),this.refreshPathLayer()}[H("changePathUtil")](n){if(n==="reverse"){const{d:e}=this.pathGenerator.toPath(),t=new be(e);t.reverse(...this.pathGenerator.selectedGroupIndexList),t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d}),this.updatePathLayer()}}[H("divideSegmentsByCount")](n){const{d:e}=this.pathGenerator.toPath(),i=new be(e).divideSegmentByCount(n);i.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:i.d})}},rG=["fill","fill-opacity","stroke","stroke-width"];class nG extends iG{initialize(){super.initialize(),this.pathParser=new be,this.pathGenerator=new Mm(this)}initState(){return{changeEvent:"updatePathItem",isShow:!1,isControl:!1,disableCurve:!1,points:[],mode:"path",clickCount:0,isSegment:!1,isFirstSegment:!1,current:null}}get scale(){return this.$viewport.scale}template(){return` -
          - - - - - - - - - - - -
          -
          - - - -
          -
          -
          `}isShow(){return this.state.isShow}initRect(e=!1){(!this.state.rect||e)&&(this.state.rect=this.$el.rect())}[H("PathEditorDone")](){this.state.current?(this.refreshPathLayer(),this.trigger("hidePathEditor")):this.addPathLayer(),!this.state.current&&this.pathGenerator.length?this.trigger("initPathEditorView"):this.trigger("hidePathEditor")}[Ar("document")+et("isShow")+So](){this.trigger("PathEditorDone")}[Ar("document")+et("isShow")+Bc](){this.state.current?this.refreshPathLayer():this.addPathLayer(),this.trigger("hidePathEditor")}makePathLayer(){const e=this.pathGenerator.toPath().d;if(!e)return;var t;const i=new be(e);i.transformMat4(this.$viewport.matrixInverse);const r=i.getBBox(),s=mr(r[1],r[0]),a=mr(r[3],r[0]);i.translate(-r[0][0],-r[0][1]);const o={itemType:"svg-path",x:r[0][0],y:r[0][1],width:s,height:a,d:i.d,fill:i.closed?"#C4C4C4":"transparent"};return rG.forEach(c=>{this.state[c]&&(o[c]=this.state[c])}),t=this.$context.selection.currentProject.appendChild(this.$editor.createModel(o)),this.$commands.executeCommand("moveLayerToTarget","add path",t,this.$context.selection.currentProject),t}updatePathLayer(){var{d:e}=this.pathGenerator.toPath(),t=new be(e);t.transformMat4(this.$viewport.matrixInverse),this.emit(this.state.changeEvent,{d:t.d,matrix:this.state.matrix,box:this.state.box})}addPathLayer(){this.changeMode("modify");var e=this.makePathLayer();e&&(this.$config.set("editing.mode.itemType","select"),this.$context.selection.select(e),this.trigger("hidePathEditor"))}changeMode(e,t){this.setState(P({mode:e,clickCount:0,moveXY:null},t),!1),t!=null&&t.points&&this.pathGenerator.setPoints(t.points||[]),this.emit("changePathManager",this.state.mode)}[H("changePathManager")](e){this.setState(ze(P({},e),{clickCount:0}),!1),this.renderPath()}isMode(e){return this.state.mode===e}afterRender(){this.$el.hide()}[H(ai)](){if(this.$el.isShow()){const{d:e}=this.pathGenerator.toPath(),t=new be(e);t.transformMat4(this.state.cachedMatrixInverse),this.refreshEditorView({d:t.d})}}refreshEditorView(e){e&&e.d&&(this.pathParser.reset(e.d),this.pathParser.transformMat4(this.$viewport.matrix),this.state.cachedMatrixInverse=this.$viewport.matrixInverse,this.pathGenerator.setPoints(this.pathParser.convertGenerator())),this.renderPath()}[H("showPathEditor")](e="path",t={}){this.state.isShow=!0,this.transformMode=e,e==="move"&&(t.current=null,t.points=[]),t.box=t.box||"canvas",this.changeMode(e,t),this.refreshEditorView(t,!0),this.$el.show(),this.$el.focus(),this.emit("showPathManager",{mode:this.state.mode}),this.emit("hidePathDrawEditor"),this.$context.commands.emit("push.mode.view","PathEditorView")}[H("hidePathEditor")](){this.$el.isShow()&&(this.pathParser.reset(""),this.pathGenerator.setPoints([]),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager"),this.$context.commands.emit("pop.mode.view","PathEditorView"),this.emit(Lt))}[H("hideAddViewLayer")](){this.state.isShow=!1,this.state.isControl=!1,this.pathParser.reset(""),this.setState(this.initState(),!1),this.refs.$view.empty(),this.$el.hide(),this.emit("hidePathManager")}[Me("$view")](){var i;const e=this.state.isShow?this.pathGenerator.makeSVGPath():"",t=y.parse((i=this.state.current)==null?void 0:i["stroke-width"]).value||0;return{class:{path:this.state.mode==="path",modify:this.state.mode==="modify",transform:this.state.mode==="transform",box:this.state.box==="box",canvas:this.state.box==="canvas","segment-move":this.state.mode==="segment-move","is-control":this.state.isControl,"has-one-stroke-width":t===1},htmlDiff:e}}[Me("$splitCircle")](){return this.state.splitXY?{cx:this.state.splitXY.x,cy:this.state.splitXY.y,r:5}:{r:0}}refreshPathLayer(){this.updatePathLayer()}renderPath(){this.bindData("$view")}getPathRect(){this.initRect(!0);const{d:e}=this.pathGenerator.toPath();return Yi(be.fromSVGString(e).getBBox())}resetTransformZone(){var e=this.getPathRect();this.state.transformZoneRect=e}[Kl("$view")+wt](e){if(this.initRect(),this.isMode("path")&&this.state.rect)this.state.moveXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.state.altKey=e.altKey,this.renderPath();else{var t=qe.create(e.target),i=t.hasClass("split-path");i?this.state.splitXY=this.calculatePointOnLine(t.attr("d"),{x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y}):this.state.splitXY=null,this.bindData("$splitCircle"),this.state.altKey=!1}}[Ke("$view :not(.split-path)")+wt+ds+at()+ct()](e){this.initRect(),this.state.altKey=!1;var t=this.isMode("path");this.$config.set("set.move.control.point",!0),this.state.dragXY={x:e.xy.x-this.state.rect.x,y:e.xy.y-this.state.rect.y},this.$config.set("set.drag.path.area",!1);var i=qe.create(e.target);if(i.hasClass("svg-editor-canvas")&&!t?(this.$config.set("set.drag.path.area",!0),this.state.isGroupSegment=!1,this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1):(this.pathGenerator.reselect(),this.state.isSegment=i.attr("data-segment")==="true",this.state.isFirstSegment=this.state.isSegment&&i.attr("data-is-first")==="true",this.state.isGroupSegment=i.hasClass("path-area"),this.state.isGroupSegment?(this.state.selectedGroupIndex=+i.data("group-index"),this.state.selectedPointIndex=+i.data("point-index")):(this.state.selectedGroupIndex=-1,this.state.selectedPointIndex=-1)),t){if(this.state.isFirstSegment){var r=+i.attr("data-index");this.state.startPoint=this.pathGenerator.points[r].startPoint}else this.state.startPoint=this.state.dragXY;this.state.dragPoints=!1,this.state.endPoint=null}else if(this.state.isSegment){this.changeMode("segment-move");var[r,s]=i.attrs("data-index","data-segment-point");const o=+r;e.shiftKey?this.pathGenerator.toggleSelect(s,o):(this.pathGenerator.setCachePoint(o,s),this.pathGenerator.selectKeyIndex(s,o)),this.renderPath()}else this.state.isGroupSegment&&(this.changeMode("segment-move"),this.pathGenerator.selectGroup(this.state.selectedGroupIndex),this.renderPath())}move(e,t){var i=this.$config.get("bodyEvent");this.$config.true("set.drag.path.area")?this.renderSelectBox(this.state.dragXY,e,t):this.isMode("segment-move")?(this.pathGenerator.move(e,t,i),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&Rr(e,t,0,0)>=2&&(this.state.dragPoints=!i.altKey)}renderSegment(e){this.pathGenerator.selectedLength&&(this.pathGenerator.reselect(),Ye(e)&&e(),this.renderPath(),this.updatePathLayer())}end(e,t){var i=this.$config.get("bodyEvent");this.$config.set("set.move.control.point",!1),this.state.isGroupSegment&&this.pathGenerator.select(),this.$config.true("set.drag.path.area")?e===0&&t===0?(this.changeMode("modify"),this.trigger("hidePathEditor")):(this.changeMode("segment-move"),this.pathGenerator.selectInBox(this.getSelectBox(),i.shiftKey),this.renderPath(),this.hideSelectBox()):this.isMode("modify")?this.pathGenerator.reselect():this.isMode("segment-move")?(this.changeMode("modify"),this.pathGenerator.reselect(),this.renderPath(),this.updatePathLayer()):this.isMode("path")&&(this.state.isFirstSegment?(this.changeMode("modify"),this.pathGenerator.setConnectedPoint(e,t),this.renderPath(),this.state.current?this.refreshPathLayer():(this.addPathLayer(),this.trigger("initPathEditorView"))):this.state.isSplitPath||(this.pathGenerator.moveEnd(e,t),this.state.clickCount++,this.renderPath(),this.pathGenerator.reselect()),this.state.isSplitPath=!1)}hideSelectBox(){this.refs.$segmentBox.css({left:-1e5})}renderSelectBox(e=null,t=0,i=0){var r={left:e.x+(t<0?t:0),top:e.y+(i<0?i:0),width:Math.abs(t),height:Math.abs(i)};this.refs.$segmentBox.css(r)}getSelectBox(){var[e,t,i,r]=this.refs.$segmentBox.styles("left","top","width","height").map(a=>y.parse(a)),s={x:e,y:t,width:i,height:r};return s.x2=s.x.value+s.width,s.y2=s.y.value+s.height,s}[H("deleteSegment")](){this.pathGenerator.reselect(),this.pathGenerator.removeSelectedSegment(),this.renderPath(),this.updatePathLayer()}[H("moveSegment")](e,t){this.pathGenerator.reselect(),this.pathGenerator.moveSelectedSegment(e,t),this.renderPath(),this.updatePathLayer()}[H("initPathEditorView")](){this.pathParser.reset(""),this.setState(this.initState(),!1),this.state.isShow=!0,this.refs.$view.empty(),this.$el.focus()}}const sG={"segment-move":"modify",modify:"modify",path:"path",transform:"transform",warp:"warp"};class aG extends ge{initState(){return{mode:"move",fill:null,stroke:null,"fill-opacity":null,"stroke-width":null,msg:this.$i18n("path.manager.msg")}}template(){return` -
          -
          - -
          -
          - - - -
          -
          -
          - -
          -
          - - - -
          - - -
          - -
          - `}[Me("$mode")](){return{"data-selected-value":sG[this.state.mode]}}refresh(){this.bindData("$mode")}[ne("$flip button")](e){var t=e.$dt.attr("data-value");t==="2x"?this.emit("divideSegmentsByCount",2):t==="3x"?this.emit("divideSegmentsByCount",3):this.emit("changePathTransform",t)}[ne("$util button")](e){var t=e.$dt.attr("data-value");this.emit("changePathUtil",t)}[ne("$mode button")](e){var t=e.$dt.attr("data-value");this.updateData({mode:t}),this.refresh()}[ne("$left button")](e){var t=e.$dt.attr("data-value");this.emit(t)}updateData(e={}){this.setState(e,!1),this.emit(this.state.changeEvent,e)}[H("changePathManager")](e){this.setState({mode:e})}[H("showPathManager")](e={}){e.changeEvent=e.changeEvent||"changePathManager",this.setState(e),this.$el.show()}[H("hidePathManager")](){this.$el.hide()}}function Db(n){n.registerUI("canvas.view",{PathEditorView:nG}),n.registerUI("page.subeditor.view",{PathManager:aG})}class oG extends Bt{components(){return{LeftAlign:rb,CenterAlign:ib,RightAlign:sb,TopAlign:lb,MiddleAlign:nb,BottomAlign:tb,SameWidth:ob,SameHeight:ab}}getTitle(){return this.$i18n("alignment.property.title")}isHideHeader(){return!0}getBody(){return` -
          -
          - - -
          -
          - - -
          -
          - -
          - - -
          -
          - - - -
          - -
          - `}[ne("$buttons button")](e){const t=e.$dt.data("command"),i=e.$dt.data("args");t==="convert.smooth.path"?this.$commands.emit(t):this.$commands.emit(t,i)}[H(Lt)](){this.refreshShow(()=>this.$context.selection.length===1&&this.$context.selection.is("boolean-path")?!0:this.$context.selection.is("svg-path","polygon","star"))}}function lG(n){n.registerUI("inspector.tab.style",{PathToolProperty:oG})}var cG={key:"check",title:"Check",execute:function(){return[{pattern:"check(20px 20px, 10px 10px, black, transparent)"},{pattern:"check(40px 40px, 20px 20px, black, transparent)"},{pattern:"check(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"check(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"check(200px 200px, 100px 100px, #102C45, transparent)"}]}},hG={key:"cross-dot",title:"Cross Dot",execute:function(){return[{pattern:"cross-dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"cross-dot(40px 40px, 20px 20px, #DDB104, #FEF0BC, normal, 4px)"},{pattern:"cross-dot(60px 60px, 30px 30px, #35DB92, #DCF9EC, normal, 6px)"}]}},dG={key:"diagonal-line",title:"Diagonal Line",execute:function(){return[{pattern:"diagonal-line(10px 10px, 45deg, #B7C4CD, white, normal, 1px)"},{pattern:"diagonal-line(25px 25px, 90deg, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"diagonal-line(50px 50px, 135deg, #35DB92, #DCF9EC, normal, 3px)"}]}},uG={key:"dot",title:"Dot",execute:function(){return[{pattern:"dot(20px 20px, 10px 10px, #B7C4CD, white, normal, 1px)"},{pattern:"dot(40px 40px, 20px 20px, #E7393F, #FEF0BC, normal, 2px)"},{pattern:"dot(60px 60px, 30px 30px, #E7393F, black, normal, 3px)"},{pattern:"dot(80px 80px, 40px 40px, #B7C4CD, white, normal, 4px)"}]}},pG={key:"grid",title:"Grid",execute:function(){return[{pattern:"grid(20px 20px, 10px 10px, black, transparent)"},{pattern:"grid(40px 40px, 20px 20px, black, transparent)"},{pattern:"grid(60px 60px, 30px 30px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(80px 80px, 40px 40px, #DDB104, rgba(254,240,188,0))"},{pattern:"grid(100px 100px, 50px 50px, #DCF3DC, transparent)"},{pattern:"grid(200px 200px, 100px 100px, #102C45, transparent)"}]}},fG={key:"horizontal-line",title:"Horizontal Line",execute:function(){return[{pattern:"horizontal-line(10px 10px, 0, #B7C4CD, white, normal, 1px)"},{pattern:"horizontal-line(25px 25px, 0, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"horizontal-line(50px 50px, 0, #35DB92, #DCF9EC, normal, 3px)"}]}},gG={key:"vertical-line",title:"Vertical Line",execute:function(){return[{pattern:"vertical-line(10px 10px, 0px, #B7C4CD, white, normal, 1px)"},{pattern:"vertical-line(25px 25px, 0px, #DDB104, #FEF0BC, normal, 2px)"},{pattern:"vertical-line(50px 50px, 0px, black, rgba(231,57,63,0.9), normal, 1px)"}]}},kg=[cG,pG,uG,hG,dG,gG,fG];class mG extends Bt{getTitle(){return this.$i18n("pattern.asset.property.title")}initState(){return{mode:"grid",preset:"check"}}getTools(){const e=Pl(kg.map(t=>({value:t.key,text:t.title})));return W("SelectEditor",{ref:"$assets",key:"preset",value:this.state.preset,options:e,onchange:"changePreset"})}[we("changePreset")](e,t){this.setState({[e]:t})}getClassName(){return"elf--pattern-assets-property"}get editableProperty(){return"pattern"}[H(Lt)+Nt(100)+et("checkShow")](){}getBody(){return` -
          -
          -
          - `}[wn("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/pattern",t)}[me("$patternList")](){var e=kg.find(i=>i.key===this.state.preset);if(!e)return"";var t=e.execute().map((i,r)=>{const s=Zt(Wr.toCSS(i.pattern));return`
          -
          -
          -
          -
          `});return t}[ne("$patternList .pattern-item")](e){const t=e.$dt.attr("data-pattern");this.$modeView.isCurrentMode(Ro.CanvasView)?this.$commands.emit("addBackgroundImagePattern",t):this.emit("setPatternAsset",t)}}class vG extends ge{initState(){return{hideLabel:this.props.hideLabel,value:this.props.value,patterns:this.parsePattern(this.props.value)}}parsePattern(e){return e==="undefined"?[]:Wr.parseStyle(e)}setValue(e){this.setState({value:e,patterns:this.parsePattern(e)})}template(){return` -
          -
          -
          - `}[me("$patternList")](){return this.state.patterns.map((e,t)=>{const i=e.selected?"selected":"";return e.selected&&(this.selectedIndex=t),` -
          - ${W("PatternSizeEditor",{key:"pattern-size",ref:`$bp${t}`,type:e.type,x:e.x,y:e.y,width:e.width,height:e.height,index:t,foreColor:e.foreColor,backColor:e.backColor,blendMode:e.blendMode,lineWidth:e.lineWidth,lineHeight:e.lineHeight,onchange:"changePatternSizeInfo"})} -
          - -
          -
          - `})}modifyPattern(){var e=Wr.join(this.state.patterns);this.parent.trigger(this.props.onchange,this.props.key,e)}[H("add")](e="check"){var t=kg.find(i=>i.key===e);if(t){const i=Wr.parseStyle(t.execute()[0].pattern);this.state.patterns.push.apply(this.state.patterns,i),this.refresh(),this.modifyPattern()}}[ne("$add")](){this.trigger("add")}[wn("$patternList .pattern-item")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$patternList .pattern-item")+wt](){}sortItem(e,t,i){e.splice(i+(t{i.selected=r===e})}[H("changePatternSizeInfo")+Nt(10)](e,t,i){var r=this.state.patterns[i];r.reset(t),this.modifyPattern(),this.refresh()}}class yG extends Mn{getClassName(){return"pattern-info-popup"}getTitle(){return this.$i18n("pattern.info.popup.title")}initState(){return{type:this.props.type||"grid",x:this.props.x||0,y:this.props.y||0,width:this.props.width||0,height:this.props.height||0,lineWidth:this.props.lineWidth||1,lineHeight:this.props.lineHeight||1,foreColor:this.props.foreColor||"black",backColor:this.props.backColor||"transparent",blendMode:this.props.blendMode||"normal"}}updateData(e={}){this.setState(e,!1);const{x:t,y:i,width:r,height:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h}=this.state;this.state.instance.trigger(this.state.changeEvent,{x:t,y:i,width:r,height:s,foreColor:a,backColor:o,blendMode:l,lineWidth:c,lineHeight:h})}[we("changeRangeEditor")](e,t){this.updateData({[e]:t})}templateForX(){if(this.hasNotX())return"";let e="X",t="";return this.state.type==="diagonal-line"&&(e=this.$i18n("pattern.info.popup.rotate"),t=["deg"]),W("InputRangeEditor",{label:e,ref:"$x",key:"x",value:this.state.x,min:0,max:1e3,step:1,units:t,onchange:"changeRangeEditor"})}templateForY(){return this.hasNotY()?"
          ":W("InputRangeEditor",{label:"Y",ref:"$y",key:"y",value:this.state.y,min:0,max:1e3,step:1,onchange:"changeRangeEditor"})}templateForLabel(){return``}templateForWidth(){return W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.width"),ref:"$width",key:"width",value:this.state.width,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForHeight(){return W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.height"),ref:"$height",key:"height",value:this.state.height,min:0,max:500,step:1,onchange:"changeRangeEditor"})}hasNotLineWidth(){return["check"].includes(this.state.type)}hasNotLineHeight(){return["cross-dot","dot","check","diagonal-line","horizontal-line"].includes(this.state.type)}hasNotX(){return["grid","dot","horizontal-line"].includes(this.state.type)}hasNotY(){return["grid","dot","diagonal-line","vertical-line"].includes(this.state.type)}templateForLineWidth(){return this.hasNotLineWidth()?"
          ":W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineWidth"),ref:"$lineWidth",key:"lineWidth",value:this.state.lineWidth,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForLineHeight(){return this.hasNotLineHeight()?"
          ":W("InputRangeEditor",{label:this.$i18n("pattern.info.popup.lineHeight"),ref:"$lineHeight",key:"lineHeight",value:this.state.lineHeight,min:0,max:500,step:1,onchange:"changeRangeEditor"})}templateForForeColor(){return W("ColorViewEditor",{ref:"$foreColor",label:this.$i18n("pattern.info.popup.foreColor"),key:"foreColor",value:this.state.foreColor,onchange:"changeRangeEditor"})}templateForBackColor(){return W("ColorViewEditor",{ref:"$backColor",label:this.$i18n("pattern.info.popup.backColor"),key:"backColor",value:this.state.backColor,onchange:"changeRangeEditor"})}templateForBlendMode(){return` -
          - ${W("BlendSelectEditor",{ref:"$blend",key:"blendMode",label:this.$i18n("pattern.info.popup.blend"),value:this.state.blendMode,onchange:"changeRangeEditor"})} -
          - `}getBody(){return` -
          - `}[me("$picker")](){return` - -
          -
          - ${this.templateForLabel()} -
          -
          - ${this.templateForWidth()} - ${this.templateForHeight()} -
          -
          - ${this.templateForLineWidth()} - ${this.templateForLineHeight()} -
          -
          - ${this.templateForX()} - ${this.templateForY()} -
          -
          - ${this.templateForForeColor()} - ${this.templateForBackColor()} -
          -
          - ${this.templateForBlendMode()} -
          -
          - `}[H("showPatternInfoPopup")](e,t){this.state.changeEvent=e.changeEvent||"changePatternInfoPopup",this.state.instance=e.instance,this.setState(e.data),this.showByRect(t)}}class xG extends Bt{getTitle(){return this.$i18n("pattern.property.title")}getClassName(){return"el--pattern-property"}getTitleClassName(){return"pattern"}getBody(){return"
          "}getTools(){return` -
          - - - - - - - -
          - `}[ne("$tools button")](e){var t=e.$dt.data("pattern");this.children.$patternEditor.trigger("add",t)}[me("$body")](){var e=this.$context.selection.current||{},t=e.pattern;return W("PatternEditor",{ref:"$patternEditor",value:t,"hide-label":!0,onchange:"changePatternEditor"})}[we("changePatternEditor")](e,t){this.$commands.executeCommand("setAttribute","change pattern",this.$context.selection.packByValue({pattern:t}))}get editableProperty(){return"pattern"}[H(Lt)+et("checkShow")](){this.refresh()}[H("refreshSVGArea")+Nt(1e3)](){this.load("$patternSelect")}}class bG extends ge{initState(){return{index:this.props.index,x:y.parse(this.props.x),y:y.parse(this.props.y),width:y.parse(this.props.width),height:y.parse(this.props.height),lineWidth:y.parse(this.props.lineWidth),lineHeight:y.parse(this.props.lineHeight),backColor:this.props.backColor,foreColor:this.props.foreColor,blendMode:this.props.blendMode,type:this.props.type}}updateData(e={}){this.setState(e,!1),this.modifyValue(e)}modifyValue(e){this.parent.trigger(this.props.onchange,this.props.key,e,this.state.index)}setValue(e){this.setState(P({},e))}[Me("$miniView")](){const{type:e,x:t,y:i,width:r,height:s,lineWidth:a,lineHeight:o,backColor:l,foreColor:c,blendMode:h}=this.state;let d={type:e,x:t,y:i,width:r,height:s,lineWidth:a,lineHeight:o,backColor:l,foreColor:c,blendMode:h};return this.state.width>80&&(d.width=80,d.x=d.x.value/this.state.width/80),this.state.height>80&&(d.height=80,d.y=this.state.y.value/this.state.height/80),{cssText:Wr.parse(d).toCSS()}}template(){return` -
          -
          -
          -
          -
          -
          -
          - `}[ne("$preview")](){this.viewBackgroundPositionPopup()}viewBackgroundPositionPopup(){const t=this.$config.get("editor.layout.elements").$bodyPanel.rect(),i=this.$el.rect(),r={left:t.left+t.width-240,top:i.top,width:240,height:300};this.emit("showPatternInfoPopup",{changeEvent:s=>{this.updateData(P({},s))},data:this.state,instance:this},r)}}function _G(n){n.registerElement({PatternEditor:vG,PatternSizeEditor:bG,PatternAssetsProperty:mG}),n.registerUI("inspector.tab.style",{PatternProperty:xG}),n.registerUI("popup",{PatternInfoPopup:yG})}const Xs=0;class SG extends Bt{getTitle(){return this.$i18n("position.property.title")}afterRender(){this.show()}[H(Lt)](){this.refreshShowIsNot(["project"])}checkChangedValue(){var e=this.$context.selection.current;return e?e.hasChangedField("x","y","right","bottom","width","height","angle","transform","opacity","resizingVertical","resizingHorizontal","constraints-horizontal","constriants-vertical"):!1}[H(Ki)+et("checkChangedValue")+Vl(10)](){var e=this.$context.selection.current;if(!e)return"";this.children.$x.setValue(Xt(e.offsetX||Xs,100)),this.children.$y.setValue(Xt(e.offsetY||Xs,100)),this.children.$width.setValue(Xt(e.width||Xs,100)),this.children.$height.setValue(Xt(e.height||Xs,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(y.deg(e.angle).round(100))}isHideHeader(){return!0}getBodyClassName(){return"no-padding"}getBody(){return` -
          -
          - ${W("NumberInputEditor",{ref:"$x",compact:!0,label:"X",key:"x",min:-1e5,max:1e5,trigger:"enter",onchange:"changRangeEditor"})} - ${W("NumberInputEditor",{ref:"$y",compact:!0,trigger:"enter",label:"Y",key:"y",min:-1e4,max:1e4,onchange:"changRangeEditor"})} -
          -
          - ${W("NumberInputEditor",{ref:"$width",compact:!0,trigger:"enter",label:"W",key:"width",min:0,max:3e3,onchange:"changRangeEditor"})} - ${W("NumberInputEditor",{ref:"$height",compact:!0,trigger:"enter",label:"H",key:"height",min:0,max:3e3,onchange:"changRangeEditor"})} -
          -
          - ${W("InputRangeEditor",{ref:"$rotate",key:"rotateZ",compact:!0,label:"rotate_left",min:-360,max:360,step:1,units:["deg"],onchange:"changeRotate"})} - ${W("NumberInputEditor",{ref:"$opacity",key:"opacity",compact:!0,label:"opacity",min:0,max:1,step:.01,onchange:"changeSelect"})} -
          -
          - `}refresh(){const e=this.$context.selection.current;e&&(this.children.$x.setValue(Xt(e.offsetX||Xs,100)),this.children.$y.setValue(Xt(e.offsetY||Xs,100)),this.children.$width.setValue(Xt(e.width||Xs,100)),this.children.$height.setValue(Xt(e.height||Xs,100)),this.children.$opacity.setValue(e.opacity||"1"),this.children.$rotate.setValue(y.deg(e.angle)))}[ne("$positionItem button[data-command]")](e){const t=e.$dt.data("command");console.log(t)}[we("changRangeEditor")](e,t){this.$commands.executeCommand("setAttribute","change position or size",this.$context.selection.packByValue({[e]:t}))}[we("changeRotate")](e,t){this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.packByValue({angle:t.value}))}[we("changeSelect")](e,t){this.$commands.executeCommand("setAttribute",`change ${e}`,this.$context.selection.packByValue({[e]:t}))}}function wG(n){n.registerUI("inspector.tab.style",{PositionProperty:SG})}class MG extends Bt{getTitle(){return this.$i18n("project.property.title")}getClassName(){return"full"}getTools(){return` - - `}[ne("$add")](){this.$commands.emit("addProject")}getBody(){return` -
          - `}[me("$projectList")+It](){var t;var e=((t=this.$model)==null?void 0:t.projects)||[];return e.map(i=>{var r=i===this.$context.selection.currentProject.id?"selected":"";const s=this.$model.get(i);return` -
          -
          - -
          - -
          -
          -
          - `})}[_h("$projectList .project-item")](e){this.startInputEditing(e.$dt.$("label"))}modifyDoneInputEditing(e){this.endInputEditing(e,(t,i)=>{var r=this.$editor.projects[t];r&&r.reset({name:i})})}[ap("$projectList .project-item label")+So+wt+ds](e){return this.modifyDoneInputEditing(e.$dt),!1}[wo("$projectList .project-item label")+wt+ds](e){this.modifyDoneInputEditing(e.$dt)}[ne("$projectList .project-item label")](e){var t=e.$dt.attr("data-id");this.commands.executeCommand("refreshSelectionPorject","change project",t),this.nextTick(()=>{this.refresh()})}[ne("$projectList .project-item .remove")](e){var t=e.$dt.attr("data-id");this.$commands.executeCommand("removeProject","remove project",t),this.nextTick(()=>{this.refresh()})}[H("refreshProjectList","refreshAll")](){this.refresh()}}function Fb(n){n.registerElement({ProjectProperty:MG})}class $G{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("json","rect")}getRendererInstance(e){return this.editor.getRendererInstance("json",e.itemType)||this.getDefaultRendererInstance()||e}async render(e,t){if(!e)return;const i=this.getRendererInstance(e);if(i)return await i.render(e,t||this)}async renderAll(e,t){return await Promise.all(e.map(async i=>await this.render(i,t)))}async getResourceDataURI(){}}class jb{async render(e,t){return await this.toCloneObject(e,t)}async toCloneObject(e,t){var i=e.attrs("itemType","name","elementType","type","visible","lock","selected");e.parent&&e.parent.isNot("project")&&(i.parentId=e.parentId),i.referenceId=e.id,i.newTargetId=Po();let r=[];for(var s=0,a=e.layers.length;si.clone()),svg:e.svg.map(i=>i.clone())})}}class EG extends Nb{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("name"))}}class Aa extends Nb{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("tagName"))}}class Vo extends Aa{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("overflow","stroke","stroke-width","svgfilter","fill","fill-rule","fill-opacity","stroke-linecap","stroke-linejoin","stroke-dashoffset","stroke-dasharray","text-anchor"))}}class IG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("d","booleanOperation"))}}class LG extends Aa{}class kG extends Aa{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("src"))}}class AG extends Aa{async toCloneObject(e,t){const s=e.project.imageKeys[e.src].original;return ze(P({},await super.toCloneObject(e,t)),{src:s})}}class RG extends jb{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("colors","gradients","svgfilters","svgimages","images","keyframes"))}}class OG extends RG{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("timeline"))}}class zG extends OG{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("name","description","rootVariable"))}}class VG extends Aa{}class DG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("points","boundary"))}}class FG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("d"))}}class jG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("count"))}}class NG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("count","radius"))}}class BG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("totalLength","d","text","textLength","lengthAdjust","startOffset"))}}class GG extends Vo{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("totalLength","text","textLength","lengthAdjust","shape-inside"))}}class HG extends Aa{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("engine","template","params"))}}class UG extends Aa{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("content"))}}class WG extends Aa{async toCloneObject(e,t){return P(P({},await super.toCloneObject(e,t)),e.attrs("src"))}}function Bb(n){n.registerRendererType("json",new $G(n)),n.registerRenderer("json","project",new zG),n.registerRenderer("json","artboard",new EG),n.registerRenderer("json","rect",new VG),n.registerRenderer("json","circle",new LG),n.registerRenderer("json","image",new AG),n.registerRenderer("json","template",new HG),n.registerRenderer("json","iframe",new kG),n.registerRenderer("json","text",new UG),n.registerRenderer("json","video",new WG),n.registerRenderer("json","svg-path",new FG),n.registerRenderer("json","boolean-path",new IG),n.registerRenderer("json","polygon",new jG),n.registerRenderer("json","star",new NG),n.registerRenderer("json","spline",new DG),n.registerRenderer("json","svg-text",new GG),n.registerRenderer("json","svg-textpath",new BG)}class XG extends ka{getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"sample",name:"New Sample Layer",sampleText:"Sample Text 1",sampleNumber:1},e))}get sampleText(){return this.get("sampleText")}set sampleText(e){this.set("sampleText",e)}get sampleNumber(){return this.get("sampleNumber")}set sampleNumber(e){this.set("sampleNumber",e)}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("sampleText","sampleNumber"))}editable(e){switch(e){case"sample":return!0}return super.editable(e)}getDefaultTitle(){return"Sample Layer"}}class YG{constructor(e){this.renderer=e}setRenderer(e){this.renderer=e}getInnerId(e,t=""){return e.id+t}uniqueId(e){return this.renderer.id+"-"+e.id}}const KG="SourceGraphic,SourceAlpha,BackgroundImage,BackgroundAlpha,FillPaint,StrokePaint".split(","),qG={xChannelSelector:!0,yChannelSelector:!0};class Mi extends Vr{static parse(e){var t=Gb[e.type];return new t(e)}hasLight(){return!1}isLight(){return!1}isSource(){return!1}getDefaultObject(e={}){var t=Xr();return super.getDefaultObject(P({itemType:"svgfilter",id:t,in:[],bound:{x:100,y:100,targetX:0,targetY:0},connected:[]},e))}getInCount(){return 0}setIn(e,t){this.json.in[e]={id:t.id,type:t.type}}setConnected(e){var t=this.json.connected.filter(i=>i.id===e.id);t.length===0&&this.json.connected.push({id:e.id})}convert(e){return typeof e.in=="string"&&(e.in=JSON.parse(e.in)),typeof e.bound=="string"&&(e.bound=JSON.parse(e.bound)),typeof e.connected=="string"&&(e.connected=JSON.parse(e.connected)),e}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("id","in","bound","connected"))}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),Object.keys(qG).filter(t=>!!this.json[t]).forEach(t=>{e.push(`${t}="${this.json[t]}"`)}),e.join(" ")+" "+this.getSourceInAttribute()}hasInIndex(){return!1}getSourceInAttribute(e){return(e||this.json.in).map((t,i)=>{if(!t)return"";var r=i===0?"":i+1+"";return this.hasInIndex()||(r=""),KG.includes(t.type)?`in${r}="${t.type}"`:`in${r}="${t.id}result"`}).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}class Ql extends Mi{getDefaultObject(e={}){return super.getDefaultObject(P({type:"Source"},e))}isSource(){return!0}toString(){return""}}class ZG extends Ql{getDefaultObject(){return super.getDefaultObject({type:"BackgroundAlpha"})}}class JG extends Ql{getDefaultObject(){return super.getDefaultObject({type:"BackgroundImage"})}}class Yh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Blend",mode:Yh.spec.mode.defaultValue})}getInCount(){return 2}toString(){var{mode:e}=this.json;return``}hasInIndex(){return!0}}Yh.spec={mode:{title:"mode",inputType:"blend",defaultValue:"normal"}};class Kh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"ColorMatrix",values:Kh.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json,t=e.join(" ");return``}}Kh.spec={values:{title:"values",inputType:"color-matrix",column:5,defaultValue:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0]}};class pa extends Mi{getDefaultObject(){return super.getDefaultObject({type:"ComponentTransfer",r:pa.spec.r.defaultValue,g:pa.spec.g.defaultValue,b:pa.spec.b.defaultValue,a:pa.spec.a.defaultValue})}getInCount(){return 1}parse(e){var[t,...i]=e.split(" ");if(t==="table"||t==="discrete")return{type:t,tableValues:i.join(" ")};if(t==="linear"){var[r,s]=i;return{type:t,slop:r,intercept:s}}else if(t==="gamma"){var[a,o,l]=i;return{type:t,amplitude:a,exponent:o,offset:l}}return{type:t}}toString(){var{r:e,g:t,b:i,a:r}=this.json;return e=this.parse(e),t=this.parse(t),i=this.parse(i),r=this.parse(r),` - ${e&&``} - ${t&&``} - ${i&&``} - ${r&&``} - `}}pa.spec={r:{title:"R",inputType:"FuncFilter",defaultValue:"identity"},g:{title:"G",inputType:"FuncFilter",defaultValue:"identity"},b:{title:"B",inputType:"FuncFilter",defaultValue:"identity"},a:{title:"A",inputType:"FuncFilter",defaultValue:"identity"}};class ks extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Composite",operator:ks.spec.operator.defaultValue,k1:ks.spec.k1.defaultValue,k2:ks.spec.k2.defaultValue,k3:ks.spec.k3.defaultValue,k4:ks.spec.k4.defaultValue})}getInCount(){return 2}toString(){var{operator:e,k1:t,k2:i,k3:r,k4:s}=this.json,a="";return e==="arithmetic"&&(a=` k1="${t}" k2="${i}" k3="${r}" k4="${s}" `),``}hasInIndex(){return!0}}ks.spec={operator:{title:"operator",inputType:"select",options:"over,in,out,atop,xor,arithmetic",defaultValue:"over"},k1:{title:"k1",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k2:{title:"k2",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k3:{title:"k3",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},k4:{title:"k4",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)}};class qh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"ConvolveMatrix",kernelMatrix:qh.spec.kernelMatrix.defaultValue})}getInCount(){return 1}toString(){var{kernelMatrix:e}=this.json,t=e.join(" ");return``}}qh.spec={kernelMatrix:{title:"kernelMatrix",inputType:"input-array",column:3,defaultValue:[1,0,0,0,1,0,0,0,1]}};class vo extends Mi{getDefaultObject(){return super.getDefaultObject({type:"DiffuseLighting",surfaceScale:vo.spec.surfaceScale.defaultValue,lightingColor:vo.spec.lightingColor.defaultValue,diffuseConstant:vo.spec.diffuseConstant.defaultValue,lightInfo:""})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","diffuseConstant","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,diffuseConstant:t,lightingColor:i}=this.json;return` - ${this.json.lightInfo} - `}}vo.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},diffuseConstant:{title:"diffuseConstant",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class Zh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"DisplacementMap",scale:Zh.spec.scale.defaultValue})}getInCount(){return 2}convert(e){return e.scale=y.parse(e.scale),e}toString(){var{scale:e}=this.json,t=e.value?`scale="${e}"`:"";return``}hasInIndex(){return!0}}Zh.spec={scale:{title:"scale",inputType:"number-range",min:0,max:5e3,step:1,defaultValue:y.number(0)}};class jl extends Mi{getDefaultObject(){return super.getDefaultObject({type:"DistantLight",azimuth:jl.spec.azimuth.defaultValue,elevation:jl.spec.elevation.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{azimuth:e,elevation:t}=this.json;return``}}jl.spec={azimuth:{title:"azimuth",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},elevation:{title:"elevation",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class As extends Mi{getDefaultObject(){return super.getDefaultObject({type:"DropShadow",dx:As.spec.dx.defaultValue,dy:As.spec.dy.defaultValue,stdDeviation:As.spec.stdDeviation.defaultValue,color:As.spec.color.defaultValue,opacity:As.spec.opacity.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t,stdDeviation:i,color:r,opacity:s}=this.json;return``}}As.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},stdDeviation:{title:"stdDeviation",inputType:"number-range",min:0,max:1e3,step:.1,defaultValue:y.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(1)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class QG extends Ql{getDefaultObject(){return super.getDefaultObject({type:"FillPaint"})}}class ss extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Flood",x:ss.spec.x.defaultValue,y:ss.spec.y.defaultValue,width:ss.spec.width.defaultValue,height:ss.spec.height.defaultValue,color:ss.spec.color.defaultValue,opacity:ss.spec.opacity.defaultValue})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{opacity:e,color:t,x:i,y:r,width:s,height:a}=this.json;return``}}ss.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},opacity:{title:"opacity",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},color:{title:"color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class yo extends Mi{getDefaultObject(){return super.getDefaultObject({type:"GaussianBlur",stdDeviationX:yo.spec.stdDeviationX.defaultValue,stdDeviationY:yo.spec.stdDeviationY.defaultValue,edgeMode:yo.spec.edgeMode.defaultValue})}getInCount(){return 1}convert(e){return e.stdDeviationX=y.parse(e.stdDeviationX),e.stdDeviationY=y.parse(e.stdDeviationY),e}toString(){var{stdDeviationX:e,stdDeviationY:t,edgeMode:i}=this.json,r=`${e} ${t}`;return e===t&&(r=e),``}}yo.spec={stdDeviationX:{title:"X",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)},stdDeviationY:{title:"Y",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)},edgeMode:{title:"edge",inputType:"select",options:"none,duplicate,wrap",defaultValue:"none"}};class Jh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"HueRotate",values:Jh.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}Jh.spec={values:{title:"values",inputType:"number-range",min:0,max:360,step:.1,defaultValue:y.number(0)}};class zn extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Image",x:zn.spec.x.defaultValue,y:zn.spec.y.defaultValue,width:zn.spec.width.defaultValue,height:zn.spec.height.defaultValue,src:zn.spec.src.defaultValue,alignment:zn.spec.alignment.defaultValue,scaleing:zn.spec.scaleing.defaultValue})}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{src:e,x:t,y:i,width:r,height:s,alignment:a,scaleing:o}=this.json;return``}}zn.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},alignment:{title:"alignment",inputType:"select",options:"xMinYMin,xMidYMin,xMaxYMin,xMinYMid,xMidYMid,xMaxYMid,xMinYMax,xMidYMax,xMaxYMax",defaultValue:"xMidYMid"},scaleing:{title:"scaleing",inputType:"select",options:"meet,slice",defaultValue:"meet"},src:{title:"Image",inputType:"ImageSelectEditor",defaultValue:""}};class $m extends Mi{getDefaultObject(){return super.getDefaultObject({type:"LuminanceAlpha"})}getInCount(){return 1}toString(){return``}}$m.spec={};class Pm extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Merge"})}getInCount(){return 3}getDefaultAttribute(){var e=[];return this.json.connected.length&&e.push(`result="${this.json.id}result"`),e.join(" ")}toString(){var{in:e}=this.json;return` - - ${e.map(t=>``).join("")} - `}}Pm.spec={};class Nl extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Morphology",operator:Nl.spec.operator.defaultValue,radius:Nl.spec.radius.defaultValue})}getInCount(){return 1}toString(){var{operator:e,radius:t}=this.json;return``}}Nl.spec={operator:{title:"Operator",inputType:"select",options:"erode,dilate",defaultValue:"erode"},radius:{title:"Radius",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(0)}};class Bl extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Offset",dx:Bl.spec.dx.defaultValue,dy:Bl.spec.dy.defaultValue})}getInCount(){return 1}toString(){var{dx:e,dy:t}=this.json;return``}}Bl.spec={dx:{title:"dx",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},dy:{title:"dy",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class xo extends Mi{getDefaultObject(){return super.getDefaultObject({type:"PointLight",x:xo.spec.x.defaultValue,y:xo.spec.y.defaultValue,z:xo.spec.z.defaultValue})}isLight(){return!0}toString(){return""}toLightString(){var{x:e,y:t,z:i}=this.json;return``}}xo.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class Qh extends Mi{getDefaultObject(){return super.getDefaultObject({type:"RotaMatrix",hueRotate:Qh.spec.hueRotate.defaultValue})}convert(e){return e.hueRotate=y.parse(e.hueRotate),e}toString(){var{id:e,hueRotate:t}=this.json;return` - - - `}}Qh.spec={hueRotate:{title:"hue-rotate",inputType:"number-range",min:0,max:360,step:1,defaultValue:y.number(0)}};class ed extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Saturate",values:ed.spec.values.defaultValue})}getInCount(){return 1}toString(){var{values:e}=this.json;return``}}ed.spec={values:{title:"values",inputType:"number-range",min:-1,max:1,step:.01,defaultValue:y.number(0)}};class eH extends Ql{getDefaultObject(){return super.getDefaultObject({type:"SourceAlpha"})}}class tH extends Ql{getDefaultObject(){return super.getDefaultObject({type:"SourceGraphic"})}}class fa extends Mi{getDefaultObject(){return super.getDefaultObject({type:"SpecularLighting",surfaceScale:fa.spec.surfaceScale.defaultValue,lightingColor:fa.spec.lightingColor.defaultValue,specularConstant:fa.spec.specularConstant.defaultValue,specularExponent:fa.spec.specularExponent.defaultValue,lightInfo:""})}toCloneObject(){return P(P({},super.toCloneObject()),this.attrs("surfaceScale","lightingColor","specularConstant","specularExponent","lightInfo"))}hasLight(){return!0}getInCount(){return 1}toString(){var{surfaceScale:e,specularConstant:t,specularExponent:i,lightingColor:r}=this.json;return` - ${this.json.lightInfo} - `}getSourceInAttribute(){return""}}fa.spec={surfaceScale:{title:"surfaceScale",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},specularConstant:{title:"Constant",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},specularExponent:{title:"Exponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},lightingColor:{title:"Lighting Color",inputType:"color",defaultValue:"rgba(0, 0, 0, 1)"}};class dn extends Mi{getDefaultObject(){return super.getDefaultObject({type:"SpotLight",x:dn.spec.x.defaultValue,y:dn.spec.x.defaultValue,z:dn.spec.x.defaultValue,pointsAtX:dn.spec.pointsAtX.defaultValue,pointsAtY:dn.spec.pointsAtY.defaultValue,pointsAtZ:dn.spec.pointsAtZ.defaultValue,specularExponent:dn.spec.specularExponent.defaultValue,limitingConeAngle:dn.spec.limitingConeAngle.defaultValue})}isLight(){return!0}toString(){}toLightString(){var{x:e,y:t,z:i,pointsAtX:r,pointsAtY:s,pointsAtZ:a,specularExponent:o,limitingConeAngle:l}=this.json;return``}}dn.spec={x:{title:"x",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},z:{title:"z",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtX:{title:"pointsAtX",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtY:{title:"pointsAtY",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},pointsAtZ:{title:"pointsAtZ",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},specularExponent:{title:"specularExponent",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)},limitingConeAngle:{title:"limitingConeAngle",inputType:"number-range",min:0,max:100,step:1,defaultValue:y.number(1)}};class iH extends Ql{getDefaultObject(){return super.getDefaultObject({type:"StrokePaint"})}}class ga extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Tile",x:ga.spec.x.defaultValue,y:ga.spec.y.defaultValue,width:ga.spec.width.defaultValue,height:ga.spec.height.defaultValue})}getInCount(){return 1}convert(e){return e.x=y.parse(e.x),e.y=y.parse(e.y),e.width=y.parse(e.width),e.height=y.parse(e.height),e}toString(){const{x:e,y:t,width:i,height:r}=this.json;return``}}ga.spec={x:{title:"X",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},y:{title:"Y",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},width:{title:"width",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)},height:{title:"height",inputType:"number-range",min:0,max:1e3,step:1,defaultValue:y.number(0)}};class ma extends Mi{getDefaultObject(){return super.getDefaultObject({type:"Turbulence",filterType:ma.spec.filterType.defaultValue,baseFrequency:ma.spec.baseFrequency.defaultValue,numOctaves:ma.spec.numOctaves.defaultValue,seed:ma.spec.seed.defaultValue})}convert(e){return e.baseFrequency=y.parse(e.baseFrequency),e.numOctaves=y.parse(e.numOctaves),e.seed=y.parse(e.seed),e}toString(){var{filterType:e,baseFrequency:t,numOctaves:i,seed:r}=this.json;return``}}ma.spec={filterType:{title:"Type",inputType:"select",options:"fractalNoise,turbulence",defaultValue:"turbulence"},baseFrequency:{title:"Frequency",inputType:"number-range",min:0,max:1,step:.01,defaultValue:y.number(0)},numOctaves:{title:"Octaves",inputType:"number-range",min:1,max:10,step:1,defaultValue:y.number(1)},seed:{title:"Seed",inputType:"number-range",min:0,max:1e4,step:1,defaultValue:y.number(0)}};const rH=["result"];class Jc extends Vr{static parse(e){var t=Gb[e.type];return new t(e)}getDefaultObject(e={}){return super.getDefaultObject(P({itemType:"svgfilter",result:""},e))}getDefaultAttribute(){return rH.map(e=>`${e}="${this.json[e]}"`).join(" ")}toString(){var{type:e,value:t}=this.json;return``}}const Gb={Image:zn,Tile:ga,Saturate:ed,HueRotate:Jh,LuminanceAlpha:$m,DropShadow:As,SourceGraphic:tH,SourceAlpha:eH,BackgroundImage:JG,BackgroundAlpha:ZG,FillPaint:QG,StrokePaint:iH,ComponentTransfer:pa,DistantLight:jl,PointLight:xo,SpotLight:dn,DiffuseLighting:vo,SpecularLighting:fa,Blend:Yh,Offset:Bl,RotaMatrix:Qh,GaussianBlur:yo,Flood:ss,Merge:Pm,Composite:ks,Morphology:Nl,Turbulence:ma,DisplacementMap:Zh,ColorMatrix:Kh,ConvolveMatrix:qh},nH={Image:zn.spec,Tile:ga.spec,DropShadow:As.spec,Saturate:ed.spec,HueRotate:Jh.spec,LuminanceAlpha:$m.spec,Offset:Bl.spec,ComponentTransfer:pa.spec,SpecularLighting:fa.spec,SpotLight:dn.spec,PointLight:xo.spec,DistantLight:jl.spec,DiffuseLighting:vo.spec,Blend:Yh.spec,RotaMatrix:Qh.spec,Merge:Pm.spec,GaussianBlur:yo.spec,Flood:ss.spec,Morphology:Nl.spec,Composite:ks.spec,Turbulence:ma.spec,DisplacementMap:Zh.spec,ColorMatrix:Kh.spec,ConvolveMatrix:qh.spec},sH=["text-fill-color","text-stroke-color","text-stroke-width","background-clip"];function aH(n){const e={};return Object.keys(n).forEach(t=>{$t(n[t])&&(e[t]=n[t])}),e}const oH={};class bp extends YG{toStringPropertyCSS(e,t){return rn(e.get(t))}toBackgroundImageCSS(e){const t=e.cacheBackgroundImage;return t||e.setBackgroundImageCache(),t||oH}toLayoutCSS(e){if(e.hasLayout()){if(e.isLayout(At.FLEX))return this.toFlexLayoutCSS(e);if(e.isLayout(At.GRID))return this.toGridLayoutCSS(e)}return{}}toLayoutItemCSS(e){var r,s;var t=(r=e.parent)==null?void 0:r.layout,i={};if(t===At.FLEX?i={position:"relative",left:"auto !important",top:"auto !important"}:t===At.GRID?i={position:"relative",left:"auto",top:"auto"}:t===At.DEFAULT&&(i=this.toDefaultLayoutItemCSS(e)),t===At.FLEX){i=ze(P({},i),{"flex-basis":e.flexBasis,"flex-shrink":e.flexShrink});const a=(s=e==null?void 0:e.parent)==null?void 0:s.flexDirection;a===wr.ROW&&e.resizingHorizontal===St.FILL_CONTAINER?(i.width="auto",i["flex-grow"]=e.flexGrow||1):a===wr.COLUMN&&e.resizingVertical===St.FILL_CONTAINER&&(i.height="auto",i["flex-grow"]=e.flexGrow||1)}else if(t===At.GRID){i=ze(P({},i),{"grid-column-start":e.gridColumnStart,"grid-column-end":e.gridColumnEnd,"grid-row-start":e.gridRowStart,"grid-row-end":e.gridRowEnd});const a=ua.parseStyle(e.parent.gridTemplateColumns),o=ua.parseStyle(e.parent.gridTemplateRows);i["grid-column-start"]=Math.max(1,Math.min(a.length,i["grid-column-start"]||1)),i["grid-column-end"]=Math.min(a.length+1,i["grid-column-end"]||2),i["grid-row-start"]=Math.max(1,Math.min(o.length,i["grid-row-start"]||1)),i["grid-row-end"]=Math.min(o.length+1,i["grid-row-end"]||2)}return i}toDefaultLayoutItemCSS(e){var s;const t={};if((s=e.parent)!=null&&s.is("project"))return t;const i=e.parent.screenWidth;switch(e[rs.HORIZONTAL]){case Tt.MIN:t.left=y.px(e.x),t.right="auto !important";break;case Tt.MAX:t.right=y.px(i-e.offsetX-e.screenWidth),t.left="auto !important";break;case Tt.STRETCH:t.left=y.px(e.x),t.right=y.px(i-e.offsetX-e.screenWidth),t.width="auto !important";break;case Tt.CENTER:t.left=y.px(e.x);break;case Tt.SCALE:t.left=y.px(e.x).toPercent(i),t.right=y.px(i-e.offsetX-e.screenWidth).toPercent(i),t.width="auto !important";break}const r=e.parent.screenHeight;switch(e[rs.VERTICAL]){case Tt.MIN:t.top=y.px(e.y),t.bottom="auto !important";break;case Tt.MAX:t.top="auto !important",t.bottom=y.px(r-e.offsetY-e.screenHeight);break;case Tt.STRETCH:t.top=y.px(e.y),t.bottom=y.px(r-e.offsetY-e.screenHeight),t.height="auto !important";break;case Tt.CENTER:t.top=y.px(e.y);break;case Tt.SCALE:t.top=y.px(e.y).toPercent(r),t.bottom=y.px(r-e.offsetY-e.screenHeight).toPercent(r),t.height="auto !important";break}return t}toFlexLayoutCSS(e){return e.parent.isNot("project"),{display:"flex",gap:y.px(e.gap),"flex-direction":e.flexDirection,"flex-wrap":e.flexWrap,"justify-content":e.justifyContent,"align-items":e.alignItems,"align-content":e.alignContent}}toGridLayoutCSS(e){return{display:"grid","grid-template-columns":e.gridTemplateColumns,"grid-template-rows":e.gridTemplateRows,"grid-template-areas":e.gridTemplateAreas,"grid-auto-columns":e.gridAutoColumns,"grid-auto-rows":e.gridAutoRows,"grid-auto-flow":e.gridAutoFlow,"grid-column-gap":e.gridColumnGap,"grid-row-gap":e.gridRowGap}}toBorderCSS(e){return e.computed("border",i=>P({},rn(i)))}toBoxModelCSS(e){let t={};return e.marginTop&&(t["margin-top"]=y.px(e.marginTop)),e.marginBottom&&(t["margin-bottom"]=y.px(e.marginBottom)),e.marginLeft&&(t["margin-left"]=y.px(e.marginLeft)),e.marginRight&&(t["margin-right"]=y.px(e.marginRight)),e.paddingTop&&(t["padding-top"]=y.px(e.paddingTop)),e.paddingBottom&&(t["padding-bottom"]=y.px(e.paddingBottom)),e.paddingLeft&&(t["padding-left"]=y.px(e.paddingLeft)),e.paddingRight&&(t["padding-right"]=y.px(e.paddingRight)),t}toSizeCSS(e){const t={};if(e.isLayout(At.FLEX)){switch(e.resizingHorizontal){case St.FIXED:t.width=y.px(e.screenWidth);break;case St.HUG_CONTENT:t["min-width"]=y.px(e.screenWidth);break}switch(e.resizingVertical){case St.FIXED:t.height=y.px(e.screenHeight);break;case St.HUG_CONTENT:t["min-height"]=y.px(e.screenHeight);break}}if(e.isInDefault()&&(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight)),e.isInFlex()){const i=e.parent.flexDirection;i===wr.ROW||i===wr.ROW_REVERSE?(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight),e.parent["align-items"]===ca.STRETCH&&(t.height="auto"),e.resizingVertical===St.FILL_CONTAINER&&(t.height="auto",t["align-self"]=ca.STRETCH)):(t.width=y.px(e.screenWidth),t.height=y.px(e.screenHeight),e.parent["align-items"]===ca.STRETCH&&(t.width="auto"),e.resizingHorizontal===St.FILL_CONTAINER&&(t.width="auto",t["align-self"]=ca.STRETCH))}return e.isInGrid()&&(t.width="auto",t.height="auto"),t}toDefaultCSS(e){e.hasCache("toDefaultCSS")||e.addCache("toDefaultCSS",{"box-sizing":"border-box"});let t=e.getCache("toDefaultCSS");return e.isAbsolute&&(t.left=y.px(e.x),t.top=y.px(e.y)),t["background-color"]=e.backgroundColor,t.color=e.color,t["font-size"]=e.fontSize,t["font-weight"]=e.fontWeight,t["font-style"]=e.fontStyle,t["font-family"]=e.fontFamily,t["text-align"]=e.textAlign,t["text-decoration"]=e.textDecoration,t["text-transform"]=e.textTransform,t["letter-spacing"]=e.letterSpacing,t["word-spacing"]=e.wordSpacing,t["line-height"]=e.lineHeight,t["text-indent"]=e.textIndent,t["text-shadow"]=e.textShadow,t["text-overflow"]=e.textOverflow,t["text-wrap"]=e.textWrap,t.position=e.position,t.overflow=e.overflow,t["z-index"]=e.zIndex,t.opacity=e.opacity,t["mix-blend-mode"]=e.mixBlendMode,t["transform-origin"]=e.transformOrigin,t["border-radius"]=e.borderRadius,t.filter=e.filter,t["backdrop-filter"]=e.backdropFilter,t["box-shadow"]=e.boxShadow,t.animation=e.animation,t.transition=e.transition,t}toVariableCSS(e){return e.computed("variable",i=>{let r={};return i.split(";").filter(s=>s.trim()).forEach(s=>{const[a,o]=s.split(":");r[`--${a}`]=o}),r})}toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(i=>i.trim()).forEach(i=>{const[r,s]=i.split(":");t[`--${r}`]=s}),t}toRootVariableString(e){return Zt(this.toRootVariableCSS(e))}toWebkitCSS(e){var t={};return sH.forEach(i=>{t[`-webkit-${i}`]=e.get(i)}),t}toTextClipCSS(e){let t={};return e.textClip==="text"&&(t["-webkit-background-clip"]="text",t["-webkit-text-fill-color"]="transparent",t.color="transparent"),t}toTransformCSS(e){return e.computed("angle",i=>({transform:i===0?"":`rotateZ(${i}deg)`}))}toDefInnerString(e){return` - ${this.toClipPath(e)} - ${this.toSVGFilter(e)} - `.trim()}toClipPath(e){if(e.clipPath==="")return"";e.cacheClipPathObject||e.setClipPathCache();var t=e.cacheClipPathObject,i=t.value;switch(t.type){case"path":return``;case"svg":return`${i}`}return""}toClipPathCSS(e){let t=e.clipPath;if(Boolean(t)===!1)return null;e.cacheClipPathObject||e.setClipPathCache();var i=e.cacheClipPathObject;switch(i.type){case"path":i.value&&(t=`url(#${this.clipPathId(e)})`);break;case"svg":t=`url(#${this.clipPathId(e)})`;break}return{"clip-path":t}}innerSVGId(e){return e.id+"inner-svg"}booleanId(e){return e.id+"boolean"}clipPathId(e){return e.id+"clip-path"}toDefString(e){var t=this.toDefInnerString(e).trim();return t?` - - - ${t} - - - `:""}toSelectorString(e,t=""){var i;return(i=e.selectors)==null?void 0:i.map(r=>r.toString(t)).join(` - -`)}generateView(e,t="",i=""){var r=` - ${t} { /* ${e.itemType} */ - ${Zt(this.toCSS(e),` - `)}; - ${i} - } - ${this.toNestedCSS(e).map(s=>`${t} ${s.selector} { - ${s.cssText?s.cssText:Zt(s.css||{},` - `)}; - }`).join(` -`)} - ${this.toSelectorString(e,t)} - `;return r}toCSS(e){return aH(Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBoxModelCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e),this.toSizeCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e)))}toStyleCode(e){return this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`)}toStyle(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return` - - `+e.layers.map(i=>this.renderer.toStyle(i)).join("")}toStyleData(e){const t=this.generateView(e,`[data-renderer-id='${this.renderer.id}'] .element-item[data-id='${e.id}']`);return{styleTag:``,cssString:t}}toExportStyle(e){const t=this.generateView(e,`.element-item[data-id='${e.id}']`);return` - - `+e.layers.map(i=>this.renderer.toExportStyle(i)).join("")}render(e){var{elementType:t,id:i,name:r,itemType:s,isBooleanItem:a}=e;const o=t||"div";return`<${o} id="${this.uniqueId(e)}" class="element-item ${s}" data-is-boolean-item="${a}" data-id="${i}" data-title="${r}">${this.toDefString(e)}${e.layers.map(l=>this.renderer.render(l)).join("")}`}toSVGFilter(e){if(e.svgfilters.length===0)return"";var t=e.computedValue("svgfilters");return(e.hasChangedField("svgfilters")||!t)&&(t=e.computed("svgfilters",i=>{var r=i.map(s=>` - - ${s.filters.map(a=>Jc.parse(a)).join(` -`)} - `).join("");return r},!0)),t}renderSVG(){}toNestedCSS(){return[]}updateStyle(e){if(e.hasCache("style")){const t=this.toStyleData(e).cssString;if(e.hasCache("styleText")&&e.getCache("styleText")===t)return;e.addCache("styleText",t),e.getCache("style").text(t)}else{const t=this.toStyleData(e),i=qe.createByHTML(t.styleTag);e.addCache("style",i),e.addCache("styleText",t.cssString),document.head.appendChild(i.el)}}update(e,t){if(!t)return;this.updateStyle(e);let i=t.el.$svg;if(i||(t.el.$svg=t.$(`[data-id="${this.innerSVGId(e)}"]`),i=t.el.$svg,t.el.$booleanSvg=t.$(`[data-id="${this.booleanId(e)}"]`)),t.data("is-boolean-item")!==`${e.isBooleanItem}`&&t.attr("data-is-boolean-item",e.isBooleanItem),i){const a=this.toDefInnerString(e);if(a){var r=i.$("defs");r.updateSVGDiff(`${a}`)}}else{const a=this.toDefString(e);if(a){var s=qe.createByHTML(a);s&&t.prepend(s)}}}}class Ra extends bp{}class lH extends Ra{update(e,t){const i=t.$(".sample-text");i&&i.text(e.sampleText);const r=t.$(".sample-number");r&&r.text(e.sampleNumber);const s=t.$(".sample-items");if(s){const a=[...Array(e.sampleNumber)].map((o,l)=>` -
          ${l}
          - `).join(` -`);s.html(a)}super.update(e,t)}render(e){var{id:t,sampleText:i,sampleNumber:r}=e;return` -
          - ${this.toDefString(e)} -
          -
          ${i}
          -
          ${r}
          -
          -
          -
          `}}function Hb(n){n.registerComponent("sample",XG),n.registerRenderer("html","sample",new lH),n.registerInspector("sample",e=>["Sample Text \uD3B8\uC9D1",{key:"sampleText",editor:"TextEditor",defaultValue:e.sampleText},"Sample Number \uD3B8\uC9D1",{key:"sampleNumber",editor:"NumberInputEditor",editorOptions:{min:0,max:10,step:1,label:"SN"},defaultValue:e.sampleNumber},"\uC2A4\uD0C0\uC77C \uCE74\uD53C",{type:"column",size:[1,1],gap:10,columns:[{key:"copyCssJSON",editor:"Button",editorOptions:{text:"Copy CSS JSON",onClick:()=>{console.log(JSON.stringify(n.html.toCSS(e),null,4))}}},{key:"copyCssString",editor:"Button",editorOptions:{text:"Copy CSS String",onClick:()=>{console.log(Zt(n.html.toCSS(e)))}}},{key:"changeColor",editor:"Button",editorOptions:{text:"Change Text Random Color",onClick:()=>{const t=Yc(),i=Yc();n.context.commands.emit("setAttribute",{[e.id]:{color:t,"background-color":i}})}}}]}])}class cH extends ge{template(){return V("div",{class:"elf--selection-info-view"})}[Ke("$el [data-artboard-title-id]")+Eu("calculateFirstMovedElement")+at("calculateMovedElement")+ct("calculateEndedElement")](e){this.startXY=e.xy,this.initMousePoint=this.$viewport.getWorldPosition(e);const t=e.$dt.attr("data-artboard-title-id");this.$context.selection.select(t),e.altKey&&this.$commands.emit("history.copyLayer","copy"),this.initializeDragSelection()}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(s=>bt([],s,e)),3/this.$viewport.scale),i=bt([],t.dist,e),r={};this.$context.selection.cachedItemMatrices.forEach(s=>{const a=s.verties.map(l=>bt([],l,i)),o=vt([],Wt([],a[0],s.parentMatrixInverse),Wt([],s.verties[0],s.parentMatrixInverse));r[s.id]={x:Math.floor(s.x+o[0]),y:Math.floor(s.y+o[1])}}),this.$context.selection.reset(r)}calculateFirstMovedElement(){this.$config.set("set.move.control.point",!0),this.emit(Mo)}calculateMovedElement(){const e=this.$viewport.getWorldPosition(),t=Fn([],vt([],e,this.initMousePoint));this.moveTo(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y")),this.refresh()}[H("refreshItemName")](e,t){var i;this.$commands.emit("setAttribute",{[e]:{name:t}}),(i=this.$el.$(`[data-artboard-title-id='${e}']`))==null||i.text(t)}calculateEndedElement(){this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.$config.set("set.move.control.point",!1),this.emit(Mo),this.$commands.emit("history.refreshSelection")}[H(ai)](){this.refresh()}[H(Ki)](){this.$context.selection.current&&this.$context.selection.current.is("artboard")&&this.$context.selection.hasChangedField("x","y","width","height","angle","transform","transform-origin")&&this.refresh()}[me("$el")+It](){var e;return(e=this.$context.selection.currentProject)==null?void 0:e.artboards.map(t=>({item:t,title:t.name,id:t.id,layout:t.layout,pointers:this.$viewport.applyVerties(t.verties)})).map(t=>this.makeArtboardTitleArea(t))}getIcon(e){return e.hasLayout()||e.hasChildren()||e.is("artboard")?e.isLayout("flex")?ie("layout_flex",e.flexDirection==="column"?"rotate(90 12 12)":""):e.isLayout("grid")?ie("layout_grid"):"":this.$icon.get(e.itemType,e)}createSize(e,t){const i=e[0],r=vt([],e[0],e[3]),s=si(r[0],r[1])-90;return V("div",{class:"artboard-title is-not-drag-area","data-artboard-title-id":t.id,"data-layout":t.layout,style:{"transform-origin":"0% 0%",transform:`translate3d( calc(${i[0]}px), calc(${i[1]}px), 0px) rotateZ(${s}deg)`}},V("div",{style:"transform: translateY(-100%);"},this.getIcon(t.item),t.title))}makeArtboardTitleArea(e){return this.createSize(e.pointers,e)}[H("refreshAll")](){this.refresh()}[H("appendLayer")](){this.refresh()}}function Ub(n){n.registerUI("canvas.view",{SelectionInfoView:cH})}const Cd=.5;class hH extends ge{template(){return V("div",{class:"elf--ghost-tool-view"},V("div",{ref:"$containerView"}),V("div",{ref:"$view"}))}[H("startGhostToolView")](){const e=this.$context.selection.verties;this.isLayoutItem=this.$context.selection.isLayoutItem,this.verties=rt(e),this.ghostVerties=rt(e),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties),this.initMousePoint=this.$viewport.getWorldPosition(),this.filteredLayers=this.$context.selection.notSelectedLayers,this.containerList=this.filteredLayers.filter(t=>t.hasLayout()||t.is("artboard")).map(t=>t.originVerties),this.$config.set("set.move.control.point",!0)}collectInformation(){var r,s;const e=this.$viewport.getWorldPosition(),t=this.getDist();this.ghostVerties=this.verties.map(a=>bt([],a,t)),this.ghostScreenVerties=this.$viewport.applyVerties(this.ghostVerties);const i=this.$context.selection.filteredLayers.filter(a=>this.$context.selection.check(a)===!1);if(this.targetItem=i[0],this.targetItem){const a=(r=this.$context.selection.current)==null?void 0:r.parent;a.isNot("project")&&(a==null?void 0:a.isLayout(At.GRID))?this.targetItem=this.$context.selection.current.parent:this.targetItem.hasLayout()&&((s=this.targetItem)==null?void 0:s.hasChildren())&&(this.targetItem.isLayout(At.FLEX)?this.targetItem=this.targetItem.layers[this.targetItem.layers.length-1]:this.targetItem.isLayout(At.GRID)),this.$context.selection.updateDragTargetItem(this.targetItem),this.targetOriginPosition=this.$viewport.applyVerties(xn(this.targetItem.contentVerties)),this.targetPoint=this.$viewport.applyVertex(e),this.targetRelativeMousePoint={x:(this.targetPoint[0]-this.targetOriginPosition[0][0])/(this.targetOriginPosition[1][0]-this.targetOriginPosition[0][0]),y:(this.targetPoint[1]-this.targetOriginPosition[0][1])/(this.targetOriginPosition[3][1]-this.targetOriginPosition[0][1])},this.targetItem.isLayoutItem()?(this.targetParent=this.targetItem.parent,this.targetParent&&(this.targetParentPosition=this.$viewport.applyVerties(this.targetParent.contentVerties))):(this.targetParent=null,this.targetParentPosition=null)}else this.targetPoint=null,this.targetRelativeMousePoint=null,this.targetParent=null,this.targetParentPosition=null}[H("moveFirstGhostToolView")](){this.collectInformation(),this.load("$containerView"),this.load("$view")}[H("moveGhostToolView")](){this.collectInformation(),this.load("$view")}[me("$containerView")](){var e;return this.ghostVerties?V("svg",null,(e=this.containerList)==null?void 0:e.map(t=>(t=this.$viewport.applyVerties(t),V("path",{class:"container",d:` - M ${t[0][0]} ${t[0][1]} - L ${t[1][0]} ${t[1][1]} - L ${t[2][0]} ${t[2][1]} - L ${t[3][0]} ${t[3][1]} - Z - `})))):V("svg",null)}renderPathForVerties(e,t){if(!e)return V("g",null);const i=ra(e);return V("g",null,V("path",{class:t,d:i}))}renderPath(e,t,i=t){if(!e)return"";e=i==="ghost"?e:xn(e);const r=e[0][0],s=t==="flex-item"?e[2][1]+10:e[0][1]-10;return V("g",null,V("text",{x:r,y:s,"font-size":8},i),this.renderPathForVerties(e,t))}renderLayoutFlexRowArea(){return this.targetRelativeMousePoint.xbt([],g,p)).filter((g,m)=>m<4);return this.renderPathForVerties(f,"flex-item","ghost")}renderLayoutFlexColumnArea(){return this.targetRelativeMousePoint.y<0?"":this.targetRelativeMousePoint.ys<4),"ghost"))}initializeGhostView(){this.isLayoutItem=!1,this.ghostVerties=void 0,this.ghostScreenVerties=void 0,this.targetOriginPosition=void 0,this.targetOriginPosition=void 0,this.targetRelativeMousePoint=void 0,this.targetItem=void 0,this.targetParent=void 0,this.targetParentPosition=void 0,this.$context.selection.updateDragTargetItem(this.targetItem)}getDist(){const e=this.$viewport.getWorldPosition();return Fn([],vt([],e,this.initMousePoint))}insertToBackground(){const e=this.$context.selection.current,t=this.getDist();e.isLayoutItem()!==!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.$context.selection.currentProject,t)}getTargetAction(){let e="";if(this.targetParent.hasLayout()&&this.targetParent.isLayout(At.FLEX))switch(this.targetParent.flexDirection){case wr.ROW:this.targetRelativeMousePoint.xc<4),s=Yi(r),a=nx.RECT/this.$context.viewport.scale,o=i==null?void 0:i.filter(l=>sm(l.originVerties,r)).filter(l=>{const c=nm(l.originRect,s);return Math.floor(c.width)>a&&Math.floor(c.height)>a});if(o!=null&&o.length){const l=o.map(f=>f.column),c=o.map(f=>f.row),h=Math.min(...l),d=Math.min(...c),u=Math.max(...l)+1,p=Math.max(...c)+1;this.$commands.executeCommand("setAttribute","change grid item",this.$context.selection.packByValue({"grid-column-start":h,"grid-column-end":u,"grid-row-start":d,"grid-row-end":p})),t.current.hasChild(e.id)===!1&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,t.current,void 0);return}else this.targetItem&&(this.emit("refreshGridToolInfo",this.targetItem),this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,void 0))}updateLayer(){var i;const e=this.$context.selection.current;if(!e)return;const t=this.getDist();if(!(t[0]===0&&t[1]===0)&&!(this.targetItem&&this.targetItem.id===(e==null?void 0:e.id))){if(!this.targetItem){this.insertToBackground();return}if(this.targetItem.hasLayout()){const r=this.$context.keyboardManager.isCtrl();if(((i=this.targetItem)==null?void 0:i.hasChildren())===!1&&this.targetItem.isLayout(At.FLEX)&&r===!1){this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t);return}else if(r){const{info:s}=this.$context.selection.gridInformation||{items:[]};if(s!=null&&s.current){this.insertToGridItem();return}}else if(this.targetItem.isLayout(At.GRID)){this.insertToGridItem();return}}if(this.targetParent){this.insertToLayoutItem();return}e.isLayoutItem()&&e.parent.id!==this.targetItem.id&&this.$commands.executeCommand("moveLayerToTarget","change target with move",e,this.targetItem,t)}}[H("endGhostToolView")](e=!1){e&&this.updateLayer(),this.initializeGhostView(),this.load()}}var dH={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const uH=class extends ge{checkViewMode(){return this.$modeView.isCurrentMode(Ro.CanvasView)}[H(Lt,Mo)+et("checkViewMode")](){this.$context.selection.isMany?this.initSelectionTool():this.hide()}[H(ai)+et("checkViewMode")](){this.$context.selection.isMany&&this.initSelectionTool()}};class pH extends uH{template(){return` - - `}toggleEditingPath(e){this.refs.$selectionView.toggleClass("editing-path",e)}[Ke("$pointerRect .rotate-pointer")+at("rotateVertex")+ct("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.verties=this.groupItem.verties,this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!1,this.state.isRotate=!0,this.$config.set("set.move.control.point",!0)}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=vt([],e,this.initMousePoint),i=this.rotateTargetNumber===4?xu(this.verties,34):this.verties[this.rotateTargetNumber];var r=Math.floor(em(i,this.verties[4],t));this.$config.get("bodyEvent").shiftKey&&(r=r-r%this.$config.get("fixed.angle")),this.localAngle=this.angle+r,this.groupItem.reset({angle:this.localAngle});const s=cr(r,this.verties[4]);let a=this.$context.selection.cachedItemMatrices;this.$context.selection.length===1&&(a=a.filter(o=>o.id===this.$context.selection.current.id)),a.forEach(o=>{const l=He(o.verties,Xi([],o.parentMatrixInverse,s)),c=xu(l,34);var h=Fl(c[0]-l[4][0],c[1]-l[4][1])-270;const d=Wt([],l[0],cr(-h,l[4])),u=this.$model.get(o.id);u&&u.reset({x:d[0],y:d[1],angle:h})}),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height","angle")),this.renderPointers()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$commands.executeCommand("setAttribute","rotate selection pointer",this.$context.selection.pack("x","y","width","height","angle"))})}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const i=t.split(",").map(o=>Number(o)),r=vt([],i,this.state.renderPointerList[0][4]),s=si(r[0],r[1]);let a=Math.floor(s);this.$commands.emit("refreshCursor","direction",`rotate(${a} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[Cu("$pointerRect .rotate-pointer")+et("checkPointerIsNotMoved")+wt](e){this.refreshRotatePointerIcon(e)}[Cu("$pointerRect .pointer")+et("checkPointerIsNotMoved")+wt](e){this.refreshPointerIcon(e)}[op("$pointerRect .pointer,.rotate-pointer")+et("checkPointerIsNotMoved")+wt](){this.$commands.emit("recoverCursor")}[Ke("$pointerRect .pointer")+wt+at("moveVertex")+ct("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number");this.state.moveType=dH[`${t}`],this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.state.dragging=!1,this.initMatrix(!0),this.cachedGroupItem=this.groupItem.matrix,this.$config.set("set.move.control.point",!0),this.$context.selection.startToCacheChildren()}calculateNewOffsetMatrixInverse(e,t,i,r,s){const a=bt([],un.scale(r,t,i),Pr([],e));return ba(yi([],e),yi([],a),s,yi([],Pr([],a)))}calculateDistance(e,t,i){const r=yr(e),s=this.$context.snapManager.check([bt([],r,t)],3/this.$viewport.scale),a=bt([],r,bt([],t,s.dist));var o=Wt([],r,i),l=Wt([],a,i);return Ta([],vt([],l,o))}calculateRealDist(e,t,i){return this.calculateDistance(e.verties[t],i,e.absoluteMatrixInverse)}moveGroupItem(e,t,i){this.groupItem.reset({x:e[0]+(t<0?t:0),y:e[1]+(i<0?i:0),width:Math.abs(t),height:Math.abs(i)})}moveItemForGroup(e,t,i=0,r=0){const s=ba(yi([],t[4]),e.itemMatrix,yi([],Pr([],t[4]))),[a,o]=Wt([],t[0],s),l=mr(t[0],t[1]),c=mr(t[0],t[3]),h=this.$model.get(e.id);h&&h.reset({x:a+i,y:o+r,width:Math.max(Math.abs(l),1),height:Math.max(Math.abs(c),1)})}recoverItemForGroup(e,t,i,r=0,s=0){const a=e.absoluteMatrix,o=e.absoluteMatrixInverse;this.$context.selection.cachedItemMatrices.forEach(l=>{const c=kr(l.parentMatrixInverse,a,yi([],[r,s,0]),Rn([],[t,i,1]),o),h=He(l.verties,c);this.moveItemForGroup(l,h)})}moveBottomRightVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,2,e);this.$config.get("bodyEvent").shiftKey&&(r=i*t.height/t.width);const s=t.width+i,a=t.height+r;this.moveDirectionVertex(t,0,0,s,a,"to top left",[0,0,0])}moveTopRightVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,1,e);this.$config.get("bodyEvent").shiftKey&&(r=-(i*t.height/t.width));const s=t.width+i,a=t.height-r;this.moveDirectionVertex(t,0,r,s,a,"to bottom left",[0,a,0])}moveDirectionVertex(e,t,i,r,s,a,o){const l=r/e.width,c=s/e.height;if(l>=0&&c>=0){const h=kr(e.directionMatrix[a],this.calculateNewOffsetMatrixInverse(o,r,s,e.originalTransformOrigin,e.itemMatrix)),d=ya([],h);this.moveGroupItem(d,r,s),this.recoverItemForGroup(e,l,c,t,i)}}moveTopVertex(e){const t=this.cachedGroupItem,[,i]=this.calculateRealDist(t,0,e),r=t.width,s=t.height-i;this.moveDirectionVertex(t,0,i,r,s,"to bottom",[r/2,s,0])}moveBottomVertex(e){const t=this.cachedGroupItem,[,i]=this.calculateRealDist(t,2,e),r=t.width,s=t.height+i;this.moveDirectionVertex(t,0,0,r,s,"to top",[r/2,0,0])}moveTopLeftVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,0,e);this.$config.get("bodyEvent").shiftKey&&(r=i*t.height/t.width);const s=t.width-i,a=t.height-r;this.moveDirectionVertex(t,i,r,s,a,"to bottom right",[s,a,0])}moveLeftVertex(e){const t=this.cachedGroupItem,[i]=this.calculateRealDist(t,0,e),r=t.width-i,s=t.height;this.moveDirectionVertex(t,i,0,r,s,"to right",[r,s/2,0])}moveRightVertex(e){const t=this.cachedGroupItem,[i]=this.calculateRealDist(t,2,e),r=t.width+i,s=t.height;this.moveDirectionVertex(t,0,0,r,s,"to left",[0,s/2,0])}moveBottomLeftVertex(e){const t=this.cachedGroupItem;let[i,r]=this.calculateRealDist(t,3,e);this.$config.get("bodyEvent").shiftKey&&(r=-(i*t.height/t.width));const s=t.width-i,a=t.height+r;this.moveDirectionVertex(t,i,0,s,a,"to top right",[s,0,0])}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Fn([],vt([],e,this.initMousePoint));this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to bottom left"?this.moveBottomLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"&&this.moveBottomVertex(t),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","width","height")),this.renderPointers(),this.state.dragging=!0}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$config.set("set.move.control.point",!1),this.$context.selection.reselect(),this.initMatrix(!0),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","width","height")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.state.show&&(this.$el.hide(),this.state.show=!1)}initSelectionTool(){this.$el.isHide()&&this.$context.selection.isMany?this.show():this.$el.isShow()&&this.$context.selection.isMany===!1&&this.hide(),this.initMatrix(),this.makeSelectionTool()}get item(){const e=this.verties||wi(0,0,0,0);return this.state.groupSelectionView||(this.state.groupSelectionView=this.$editor.createModel({itemType:"artboard"},!1)),this.state.groupSelectionView.reset({parentId:this.$context.selection.currentProject.id,x:e[0][0],y:e[0][1],width:Fe(e[0],e[1]),height:Fe(e[0],e[3])}),this.state.groupSelectionView}initMatrix(){this.$context.selection.isMany&&this.state.dragging===!1&&(this.verties=rt(this.$context.selection.verties),this.angle=0,this.localAngle=this.angle,this.groupItem=this.item,this.cachedGroupItem=this.item.matrix)}makeSelectionTool(){this.renderPointers()}renderPointers(){if(this.$context.selection.isEmpty){this.refs.$pointerRect.empty();return}this.state.renderPointerList=[this.$viewport.applyVerties(this.$context.selection.verties)];const{line:e,point:t,size:i,elementLine:r}=this.createRenderPointers(this.state.renderPointerList[0]);this.refs.$pointerRect.updateDiff(e+r+t+i)}createPointer(e,t,i){return` -
          - `}createPointerSide(e,t,i,r,s){return` -
          - `}createRotatePointer(e,t){return e.length===0?"":t<4?` -
          - `:` -
          - `}createPointerRect(e,t){if(e.length===0)return"";const i=Re([],e[0],e[1],.5),r=` - M ${i[0]},${i[1]} - L ${t[0]}, ${t[1]} - `;return` - - - `}createLine(e){return` - M ${e[0][0]}, ${e[0][1]} - L ${e[1][0]}, ${e[1][1]} - L ${e[2][0]}, ${e[2][1]} - L ${e[3][0]}, ${e[3][1]} - L ${e[0][0]}, ${e[0][1]} - Z - `}createSize(e){const t=Re([],e[0],e[1],.5),i=Re([],e[1],e[2],.5),r=Re([],e[2],e[3],.5),s=Re([],e[3],e[0],.5),a=this.$viewport.applyVertiesInverse(e),o=Fe(a[0],a[1]),l=Fe(a[0],a[3]),c=[{start:t,end:r},{start:i,end:s},{start:r,end:t},{start:s,end:i}].map((g,m)=>({index:m,data:g}));c.sort((g,m)=>g.data.start[1]>m.data.start[1]?-1:1);const h=c[0],d=Re([],h.data.end,h.data.start,1+16/Fe(h.data.start,h.data.end)),u=vt([],h.data.start,h.data.end),p=si(u[0],u[1])+90;let f=`${Xt(o,100)} x ${Xt(l,100)}`;if(this.state.isRotate){const g=this.groupItem.angle;g&&(f=`${g}\xB0`)}return`
          ${f}
          `}createRenderPointers(e){const t=vt([],Re([],e[0],e[1],.5),Re([],e[0],e[2],.5)),i=y.deg(si(t[0],t[1])-90).round(1e3),r=xu(e,30),s=Fe(e[0],e[2]),a=Fe(e[0],e[1]),o=Fe(e[0],e[3]);return{line:this.createPointerRect(e,r),elementLine:` - - - - `,size:this.createSize(e),point:[this.createRotatePointer(r,4,"center center"),s<20?void 0:this.createPointerSide(Re([],e[0],e[1],.5),11,i,a,5),s<20?void 0:this.createPointerSide(Re([],e[1],e[2],.5),12,i,5,o),s<20?void 0:this.createPointerSide(Re([],e[2],e[3],.5),13,i,a,5),s<20?void 0:this.createPointerSide(Re([],e[3],e[0],.5),14,i,5,o),this.createPointer(e[0],1,i),this.createPointer(e[1],2,i),this.createPointer(e[2],3,i),this.createPointer(e[3],4,i)].join("")}}checkShow(){return!!(this.state.show&&this.$context.selection.isMany)}[H("hideSelectionToolView")](){this.hide()}}var fH={1:"to top left",2:"to top right",3:"to bottom right",4:"to bottom left",11:"to top",12:"to right",13:"to bottom",14:"to left"};const gH=class extends ge{checkViewMode(){return this.$modeView.isCurrentMode(Ro.CanvasView)}[H(Lt,Mo)+et("checkViewMode")](){this.initSelectionTool()}[H(ai)+et("checkViewMode")](){this.$context.selection.isOne?this.initSelectionTool():this.hide()}[H("updateModeView")](){this.checkViewMode()?this.initSelectionTool():this.hide()}};class mH extends gH{template(){return` - - `}toggleEditingPath(e){this.$el.toggleClass("editing-path",e)}[Ke("$pointerRect .rotate-pointer")+at("rotateVertex")+ct("rotateEndVertex")](e){this.state.moveType="rotate",this.initMousePoint=this.$viewport.getWorldPosition(e),this.$context.selection.reselect(),this.verties=rt(this.$context.selection.verties),this.$context.snapManager.clear(),this.rotateTargetNumber=+e.$dt.attr("data-number"),this.refreshRotatePointerIcon(),this.state.dragging=!0,this.state.isRotate=!0,this.initAngle=this.$context.selection.current.angle}rotateVertex(){const e=this.$viewport.getWorldPosition(),t=vt([],e,this.initMousePoint),i=this.rotateTargetNumber===4?xu(this.verties,34):this.verties[this.rotateTargetNumber];var r=Math.floor(em(i,this.verties[4],t));const s=this.$context.selection.current;let a=this.initAngle+r;s&&(this.$config.get("bodyEvent").shiftKey&&(a-=a%this.$config.get("fixed.angle")),s.angle=Xt(a%360,100)),this.state.dragging=!0,this.$commands.emit("setAttribute",this.$context.selection.pack("angle")),this.makeSelectionTool()}rotateEndVertex(){this.state.dragging=!1,this.state.isRotate=!1,this.$commands.emit("recoverCursor"),this.verties=null,this.$commands.executeCommand("setAttribute","change rotate",this.$context.selection.pack("angle"))}refreshRotatePointerIcon(){this.$commands.emit("refreshCursor","rotate")}refreshPointerIcon(e){const t=e.$dt.data("pointer");if(t){const i=t.split(",").map(o=>Number(o)),r=vt([],i,this.state.renderPointerList[0][4]),s=si(r[0],r[1]);let a=Math.floor(s);this.$commands.emit("refreshCursor","direction",`rotate(${a} 8 8)`)}else this.$commands.emit("recoverCursor")}checkPointerIsNotMoved(){return Boolean(this.state.dragging)===!1&&this.$config.false("set.move.control.point")}[Cu("$pointerRect .rotate-pointer")+et("checkPointerIsNotMoved")](e){this.refreshRotatePointerIcon(e)}[Cu("$pointerRect .pointer")+et("checkPointerIsNotMoved")](e){this.refreshPointerIcon(e)}[op("$pointerRect .pointer,.rotate-pointer")+et("checkPointerIsNotMoved")](){this.$commands.emit("recoverCursor")}[Ke("$pointerRect .pointer")+at("moveVertex")+ct("moveEndVertex")](e){this.refreshPointerIcon(e),this.state.dragging=!0;const t=+e.$dt.attr("data-number"),i=fH[`${t}`];this.initMousePoint=this.$viewport.getWorldPosition(e),this.state.moveType=i,this.state.moveTarget=t,this.$context.snapManager.clear(),this.verties=this.$context.selection.verties,this.hasRotate=this.$context.selection.current.angle!==0,this.cachedCurrentItemMatrix=this.$context.selection.current.matrix,this.$context.selection.startToCacheChildren()}calculateDistance(e,t,i){const r=yr(e),s=bt([],r,t),a=this.$context.snapManager.check([s],5/this.$viewport.scale),o=bt([],s,a.dist),[l,c]=He([r,o],i);return vt([],c,l)}calculateRealDist(e,t,i){return this.calculateDistance(e.verties[t],i,e.absoluteMatrixInverse)}moveItem(e,t,i,r,s={}){if(e){let a={x:t[0]+(i<0?i:0),y:t[1]+(r<0?r:0),width:Math.max(Math.abs(i),1),height:Math.max(Math.abs(r),1)};e.isInFlex()?(delete a.x,delete a.y):e.isInGrid(),this.hasRotate||(a=QL(a),a.width=Math.max(a.width,1),a.height=Math.max(a.height,1)),e.reset(P(P({},a),s))}}moveDirectionVertex(e,t,i,r,s,a={}){const o=vt([],un.scale(e.originalTransformOrigin,t,i),s),l=ba(yi([],s),yi([],o),e.itemMatrix,yi([],Pr([],o))),c=kr(e.directionMatrix[r],l),h=ya([],c);this.moveItem(this.$model.get(e.id),h,t,i,a)}moveBottomRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,2,e),l=Pt(0,0,0);i&&(a=a*2,o=o*2),t&&(o=a*s.height/s.width);const c=s.width+a,h=r?c:s.height+o;i&&(l=Pt(a/2,o/2,0)),this.moveDirectionVertex(s,c,h,"to top left",l,{resizingVertical:St.FIXED,resizingHorizontal:St.FIXED}),this.updateGridArea(s)}}moveTopRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,1,e);i&&(a=a*2,o=o*2),t&&(o=-(a*s.height/s.width));const l=s.width+a,c=r?l:s.height-o;let h=Pt(0,c,0);i&&(h=Pt(a/2,c+o/2,0)),this.moveDirectionVertex(s,l,c,"to bottom left",h,{resizingVertical:St.FIXED,resizingHorizontal:St.FIXED}),this.updateGridArea(s)}}moveTopLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,0,e);i&&(a=a*2,o=o*2),t&&(o=a*s.height/s.width);const l=s.width-a,c=r?l:s.height-o;let h=Pt(l,c,0);i&&(h=Pt(l+a/2,c+o/2,0)),this.moveDirectionVertex(s,l,c,"to bottom right",h,{resizingHorizontal:St.FIXED,resizingVertical:St.FIXED}),this.updateGridArea(s)}}moveTopVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),i=this.cachedCurrentItemMatrix;if(i){let[,r]=this.calculateRealDist(i,0,e);t&&(r=r*2);const s=i.width,a=i.height-r;let o=Pt(s/2,a,0);t&&(o=Pt(s/2,a+r/2,0)),this.moveDirectionVertex(i,s,a,"to bottom",o,{resizingVertical:St.FIXED}),this.updateGridArea(i)}}moveBottomVertex(e){const{altKey:t}=this.$config.get("bodyEvent"),i=this.cachedCurrentItemMatrix;if(i){let[,r]=this.calculateRealDist(i,3,e);t&&(r=r*2);const s=i.width,a=i.height+r;let o=Pt(s/2,0,0);t&&(o=Pt(s/2,r/2,0)),this.moveDirectionVertex(i,s,a,"to top",o,{resizingVertical:St.FIXED}),this.updateGridArea(i)}}moveRightVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a]=this.calculateRealDist(s,1,e);i&&(a=a*2);const o=s.width+a;let l=s.height;r?l=o:t&&(l=s.height*(1+a/s.width));let c=Pt(0,l/2,0);i&&(c=Pt(a/2,l/2,0)),this.moveDirectionVertex(s,o,l,"to left",c,{resizingHorizontal:St.FIXED}),this.updateGridArea(s)}}moveLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a]=this.calculateRealDist(s,0,e);i&&(a=a*2);const o=s.width-a;let l=s.height;r?l=o:t&&(l=s.height*(1-a/s.width));let c=Pt(o,l/2,0);i&&(c=Pt(o+a/2,l/2,0)),this.moveDirectionVertex(s,o,l,"to right",c,{resizingHorizontal:St.FIXED}),this.updateGridArea(s)}}moveBottomLeftVertex(e){const{shiftKey:t,altKey:i,metaKey:r}=this.$config.get("bodyEvent"),s=this.cachedCurrentItemMatrix;if(s){let[a,o]=this.calculateRealDist(s,3,e);i&&(a=a*2,o=o*2),t&&(o=-(a*s.height/s.width));const l=s.width-a,c=r?l:s.height+o;let h=Pt(l,0,0);i&&(h=Pt(l+a/2,o/2,0)),this.moveDirectionVertex(s,l,c,"to top right",h,{resizingVertical:St.FIXED,resizingHorizontal:St.FIXED}),this.updateGridArea(s)}}moveVertex(){const e=this.$viewport.getWorldPosition(),t=Fn([],vt([],e,this.initMousePoint));this.state.moveType==="to top left"?this.moveTopLeftVertex(t):this.state.moveType==="to top"?this.moveTopVertex(t):this.state.moveType==="to right"?this.moveRightVertex(t):this.state.moveType==="to bottom"?this.moveBottomVertex(t):this.state.moveType==="to left"?this.moveLeftVertex(t):this.state.moveType==="to top right"?this.moveTopRightVertex(t):this.state.moveType==="to bottom right"?this.moveBottomRightVertex(t):this.state.moveType==="to bottom left"&&this.moveBottomLeftVertex(t),this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.emit("setAttribute",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.state.dragging=!0,this.makeSelectionTool()}updateGridArea(){return vb.updateGridArea(this.$context.selection.current,this.$context.selection.gridInformation,this.$context.viewport.scale)}moveEndVertex(){this.state.dragging=!1,this.$commands.emit("recoverCursor"),this.$context.selection.reselect(),this.nextTick(()=>{this.$context.selection.recoverChildren(),this.$context.selection.current.isInGrid()?this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical","grid-column-start","grid-column-end","grid-row-start","grid-row-end")):this.$commands.executeCommand("setAttribute","move selection pointer",this.$context.selection.pack("x","y","angle","width","height","resizingHorizontal","resizingVertical")),this.$commands.emit("recoverBooleanPath")})}show(){this.$el.show(),this.state.show=!0}hide(){this.$el.hide(),this.state.show=!1}initSelectionTool(){this.$el.isShow()&&this.$context.selection.isOne===!1?this.hide():this.$el.isHide()&&this.$context.selection.isOne&&this.show(),this.makeSelectionTool()}makeSelectionTool(){this.renderPointers()}getRateDistance(e,t,i=0){return Re([],e,t,(Fe(e,t)+i)/Fe(e,t))}renderPointers(){if(this.$context.selection.isEmpty||this.$config.true("set.move.control.point")){this.refs.$pointerRect.empty();return}const e=this.$context.selection.verties;if(Fe(e[0],e[1])===0)return;const t=this.$viewport.applyVerties(e).map(r=>Ta([],r));this.state.renderPointerList=[t,[this.getRateDistance(t[4],t[0],20),this.getRateDistance(t[4],t[1],20),this.getRateDistance(t[4],t[2],20),this.getRateDistance(t[4],t[3],20)]];const i=this.createRenderPointers(...this.state.renderPointerList);if(i){const{line:r,parentRect:s,point:a,size:o,visiblePath:l}=i;this.refs.$pointerRect.updateDiff(r+s+a+o+l)}}createPointer(e,t,i){return`
          `}createPointerSide(e,t,i,r,s){return`
          `}createRotatePointer(e,t){return e.length===0?"":t<4?`
          `:`
          `}createPointerRect(e,t=void 0){if(e.length===0)return"";const i=this.$context.selection.current,r=i&&i.is("artboard");let s="";if(!r&&t){const a=Re([],e[0],e[1],.5);s+=` - M ${a[0]},${a[1]} - L ${t[0]},${t[1]} - `}return` - `}createParentRect(e=[]){return e.length===0?"":` - - - `}createSize(e){const t=Re([],e[0],e[1],.5),i=Re([],e[1],e[2],.5),r=Re([],e[2],e[3],.5),s=Re([],e[3],e[0],.5),a=[{start:t,end:r},{start:i,end:s},{start:r,end:t},{start:s,end:i}].map((m,v)=>({index:v,data:m}));a.sort((m,v)=>m.data.start[1]>v.data.start[1]?-1:1);const o=a[0],l=Re([],o.data.end,o.data.start,1+16/Fe(o.data.start,o.data.end)),c=this.$context.selection.current.width,h=this.$context.selection.current.height,d=vt([],o.data.start,o.data.end),u=si(d[0],d[1])+90,p=Xt(c,100),f=Xt(h,100);let g=p===f?`WH: ${p}`:`${Xt(c,100)} x ${Xt(h,100)}`;return this.state.isRotate&&(g=`${Xt(this.$context.selection.current.angle,100)}\xB0`),`
          ${g}
          `}createVisiblePath(){const e=this.$context.selection.current;if(!e||!e.isBooleanItem)return"";const t=e.absolutePath();return t.transformMat4(this.$viewport.matrix),` - - - - `}removeNaN(e){return e.replace(/NaN/g,"0")}createRenderPointers(e,t){const i=this.$context.selection.current;if(i&&i.is("text")&&i.width===0&&i.height===0)return;const r=y.deg(i.nestedAngle).round(1e3),s=Fe(e[0],e[2]),a=Fe(e[0],e[1]),o=Fe(e[0],e[3]);return{line:this.createPointerRect(e),size:this.createSize(e),parentRect:"",visiblePath:this.createVisiblePath(),point:[this.createRotatePointer(t[0],0),this.createRotatePointer(t[1],1),this.createRotatePointer(t[2],2),this.createRotatePointer(t[3],3),s<20?void 0:this.createPointerSide(Re([],e[0],e[1],.5),11,r,a,5),s<20?void 0:this.createPointerSide(Re([],e[1],e[2],.5),12,r,5,o),s<20?void 0:this.createPointerSide(Re([],e[2],e[3],.5),13,r,a,5),s<20?void 0:this.createPointerSide(Re([],e[3],e[0],.5),14,r,5,o),this.createPointer(e[0],1,r),this.createPointer(e[1],2,r),this.createPointer(e[2],3,r),this.createPointer(e[3],4,r),this.createPointer(e[4],5,r)].join("")}}checkShow(){return this.$modeView.isCurrentMode(Ro.CanvasView)===!1?!1:!!(this.state.show&&this.$context.selection.isOne)}[H("hideSelectionToolView")](){this.hide()}}async function Wb(n){n.registerUI("canvas.view",{GhostToolView:hH,SelectionToolView:mH,GroupSelectionToolView:pH},rx.SELECTION_TOOL)}class vH extends Mn{getTitle(){return this.$i18n("selector.popup.title")}initState(){return{selector:"",properties:[]}}updateData(e){this.setState(e,!1),this.emit("changeSelectorPopup",this.state)}getBody(){return` -
          -
          - ${this.templateForSelector()} - ${this.templateForProperty()} -
          -
          `}templateForProperty(){return W("CSSPropertyEditor",{ref:"$propertyEditor",onchange:"changePropertyEditor"})}templateForSelector(){return` -
          - -
          - -
          -
          - `}[di("$selector")](e){if(this.refs.$selector.value.match(/^[a-zA-Z0-9:_\-.\b]+$/))this.updateData({selector:this.refs.$selector.value});else return e.preventDefault(),e.stopPropagation(),!1}refresh(){super.refresh(),this.refs.$selector.val(this.state.selector),this.children.$propertyEditor.trigger("showCSSPropertyEditor",this.state.properties)}[H("changePropertyEditor")](e){this.updateData({properties:e})}[H("showSelectorPopup")](e){this.setState(e),this.refresh(),this.show(250)}}const yH=["",":hover",":active",":before",":after",":first-child",":last-child",":link",":active",":focus"].map(n=>({value:n}));class xH extends Bt{getTitle(){return this.$i18n("selector.property.title")}getBody(){return"
          "}getTools(){return` -
          - ${W("SelectEditor",{ref:"$select",key:"selector","none-value":"selector",options:yH})} -
          - - `}makeSelectorTemplate(e,t){return t=t.toString(),` -
          -
          -
          - ${e.selector||`<${this.$i18n("selector.property.none")}>`} -
          -
          - -
          -
          -
          - `}[ne("$selectorList .selector-item .name")](e){var t=+e.$dt.closest("selector-item").attr("data-index"),i=this.$context.selection.current;!i||this.viewSelectorPicker(t)}[ne("$selectorList .selector-item .del")+wt+ds](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.removeSelector(t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[H(Lt)+Nt(100)](){this.refreshShowIsNot(["project","svg-path","svg-brush","svg-textpath","svg-text"])}[me("$selectorList")](){var e=this.$context.selection.current;if(!e)return"";var t=e.selector?yp.parseStyle(e):e.selectors;return(t||[]).map((i,r)=>this.makeSelectorTemplate(i,r))}[wn("$selectorList .selector-item .title")](e){this.startIndex=+e.$dt.attr("data-index")}[an("$selectorList .selector-item")+wt](){}[sn("$selectorList .selector-item")+wt](e){var t=+e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.sortSelector(this.startIndex,t),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")),this.refresh())}[ne("$add")](){var e=this.$context.selection.current;e&&(e.createSelector({selector:this.children.$select.getValue()}),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors"))),this.refresh()}viewSelectorPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e,this.selectItem(this.selectedIndex,!0),this.current=this.$context.selection.current,this.current&&(this.currentSelector=this.current.selectors[this.selectedIndex],this.viewSelectorPropertyPopup())}selectItem(e,t=!0){t?this.getRef("$selectorIndex",e).addClass("selected"):this.getRef("$selectorIndex",e).removeClass("selected"),this.current&&this.current.selectors.forEach((i,r)=>{i.selected=r===e})}viewSelectorPropertyPopup(e){if(this.current=this.$context.selection.current,!this.current)return;this.currentSelector=this.current.selectors[this.selectedIndex];const t=this.currentSelector,i=t.selector,r=t.properties;this.emit("showSelectorPopup",{position:e,selector:i,properties:r})}[H("changeSelectorPopup")](e){this.current=this.$context.selection.current,this.current&&(this.currentselector=this.current.selectors[this.selectedIndex],this.currentSelector&&this.currentSelector.reset(e),this.refresh(),this.$commands.executeCommand("setAttribute","change selectors",this.$context.selection.pack("selectors")))}}function bH(n){n.registerUI("inspector.tab.transition",{SelectorProperty:xH}),n.registerUI("popup",{SelectorPopup:vH})}class _H extends Bt{getTitle(){return this.$i18n("svgfilter.asset.property.title")}initState(){return{mode:"grid"}}getClassName(){return"elf--svgfilter-assets-property"}[H(Lt)+Nt(100)](){this.show()}getBody(){return` -
          -
          -
          - `}[me("$svgfilterList")](){var e=this.$context.selection.currentProject||{svgfilters:[]},t=e.svgfilters,i=t.map((r,s)=>{var a=r.filters.map(o=>Jc.parse(o));return` -
          -
          - - - ${a.join("")} - - -
          -
          -
          -
          - -
          -
          -
          - - -
          -
          - `});return i.push(`
          `),i}executeSVGFilter(e,t=!0,i=!0){var r=this.$context.selection.currentProject;r?(e&&e(r),t&&this.refresh(),i&&this.emit("refreshSVGFilterAssets")):window.alert("Please select a project.")}[ne("$svgfilterList .add-svgfilter-item")](){this.executeSVGFilter(e=>{e.createSVGFilter({id:Xr(),filters:[]})})}[ne("$svgfilterList .remove")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.executeSVGFilter(r=>{r.removeSVGFilter(i)})}[ne("$svgfilterList .copy")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.executeSVGFilter(r=>{r.copySVGFilter(i)})}[di("$svgfilterList input")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index"),r=e.$dt.attrKeyValue("data-key");this.executeSVGFilter(s=>{s.setSVGFilterValue(i,r),this.emit("refreshSVGArea")},!1)}[ne("$svgfilterList .preview")](e){var t=e.$dt.closest("svgfilter-item"),i=+t.attr("data-index");this.state.$item=t,this.state.$el=e.$dt.$(".svgfilter-view");var r=this.$context.selection.currentProject||{svgfilters:[]},s=r.svgfilters[i];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterAssets",id:this.id,index:i,filters:s.filters})}[H("updateSVGFilterAssets")](e){this.executeSVGFilter(t=>{t.setSVGFilterValue(e.index,{filters:e.filters}),this.state.$item.$("filter").html(e.filters.join(` -`)),this.emit("refreshSVGArea")},!1)}[H("changeSVGFilterAssets")](e){e.id===this.id&&this.trigger("updateSVGFilterAssets",e)}[H("refreshSVGFilterAssets")](){this.refresh()}}function SH(n){n.registerElement({SVGFilterAssetsProperty:_H})}var wH=` -1 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 0 .5 0 -`,MH=` -0 0 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`,$H=` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 .5 0 -0 0 0 1 0 -`,PH=` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 1 0 -0 0 0 1 0 -`,TH=` -0 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`,CH=` -.5 0 0 0 0 -0 .5 0 0 0 -0 0 .5 0 0 -0 0 0 1 0 -`,EH=` -1 0 0 0 0 -0 1 0 0 0 -0 0 1 0 0 -0 0 -2 1 0 -`,IH=` -0 0 1 0 0 -0 0 1 0 0 -0 0 1 0 0 -0 0 0 1 0 -`,LH=` -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 -0 0 0 1 0 -`,kH=` -0 1 0 0 0 -0 1 0 0 0 -0 1 0 0 0 -0 0 0 1 0 -`,AH=` -0 0 0 0 0 -0 1 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`,RH=` -1 0 0 0 0 -0 1 0 1 0 -0 0 1 0 0 -0 0 0 1 0 -`,OH=` -1 0 0 1 0 -0 1 0 1 0 -0 0 1 0 0 -0 0 0 1 0 -`,zH=` -1 0 0 0 0 -0 0 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`,VH=` -1.5 0 0 0 0 -0 1.5 0 0 0 -0 0 1.5 0 0 -0 0 0 1 0 -`,DH=` -1 0 0 0 0 -0 2 0 0 0 -0 0 0 .5 0 -0 0 0 1 0 -`,FH=` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`,jH=` -1 1 0 0 0 -0 0 0 0 0 -0 1 1 0 0 -0 0 0 1 0 -`,NH=` -1 1 0 0 0 -0 0 0 0 0 -0 0 1 0 0 -0 0 0 1 0 -`,BH=` -1 0 0 0 0 -0 .5 0 0 0 -0 0 0 .5 0 -0 0 0 1 0 -`,GH=` -1 0 0 0 0 -0 0 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`,HH=` -1 0 0 0 0 -0 0 0 0 0 -0 0 1 -1 0 -0 0 0 1 0 -`,UH=` -1 0 0 0 0 -0 1 0 0 0 -0 0 0 0 0 -0 0 0 1 0 -`,WH=` -1 1 0 0 0 -0 1 0 0 0 -0 1 1 0 0 -0 0 0 1 0 -`,L0={red:GH,green:AH,blue:MH,yellow:UH,magenta:FH,cyan:TH,alpha:wH,BlueMagenta2:$H,BlueShadowMagentHightlight:PH,darken:CH,ElimBlue:EH,GrayOnDark:IH,GrayOnLight:LH,GrayOnMid:kH,HardGreen:RH,HardYellow:OH,IdenticalRedOverlay:zH,lighten:VH,lime:DH,NoGreenMagenta:jH,NoGreenRed:NH,peachy:BH,RedOverlay:HH,YesGreenColorizedMagenta:WH};const _f=6,k0=Object.keys(L0).map(n=>({title:n,values:L0[n]}));class XH extends ge{initState(){return{values:Iv(this.props.values)}}template(){return` -
          -
          -
          Mix Color Template
          -
          -
          - `}[Me("$body")](){return{cssText:` - display: grid; - grid-template-columns: repeat(${_f}, 1fr); - grid-column-gap: 2px; - grid-row-gap: 2px; - text-align: left; - `}}[me("$sample")](){return k0.map((e,t)=>`
          ${e.title}
          `)}[ne("$sample .sample-item")](e){var t=+e.$dt.attr("data-index"),i=k0[t];this.updateData({values:Iv(i.values)}),this.load("$body")}[me("$body")](){var{values:e}=this.state,t=["R","G","B","A"],i=e.map((s,a)=>{var o="";a%(_f-1)===0&&(o=`
          ${t[Math.floor(a/(_f-1))]}
          `);var l=` - ${o} -
          - -
          - `;return l}),r=` -
          -
          R
          -
          G
          -
          B
          -
          A
          -
          M
          - `;return r+i}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.values,this.props.params)}[di("$body input")](e){var t=e.$dt,i=+t.attr("data-index"),r=+t.value;this.state.values[i]=r,this.updateData()}}class YH extends ge{initState(){return P({label:this.props.label||""},this.parse(this.props.value))}parse(e){var[t,...i]=e.split(" ");if(t==="linear")var[r,s]=i;else if(t==="gamma")var[a,o,l]=i;return{type:t,values:i,slop:r,intercept:s,amplitude:a,exponent:o,offset:l}}template(){return"
          "}[me("$body")](){var{type:e,label:t}=this.state,i=t?"has-label":"";return` - ${W("SelectEditor",{label:t,ref:"$type",key:"type",value:this.state.type,options:["identity","table","discrete","linear","gamma"],onchange:"changeType"})} -
          - ${t?"":""} -
          -
          -
          - ${W("TextEditor",{label:"tableValues",ref:"$values",key:"values",value:this.state.values.join(" "),onchange:(r,s)=>{this.updateData({[r]:s.split(" ")})}})} -
          -
          - ${["slop","intercept"].map(r=>` -
          - ${W("NumberRangeEditor",{label:r,ref:`$${r}`,key:r,value:this.state[r],onchange:(s,a)=>{this.updateData({[s]:a})}})} -
          - `).join("")} -
          -
          - ${["amplitude","exponent","offset"].map(r=>` -
          - ${W("NumberRangeEditor",{label:r,ref:`$${r}`,key:r,value:this.state[r],onchange:(s,a)=>{this.updateData({[s]:a})}})} -
          - `).join("")} -
          -
          - `}[H("changeType")](e,t){this.updateData({type:t}),this.refresh()}getValue(){switch(this.state.type){case"table":case"discrete":return[this.state.type,...this.state.values].join(" ");case"linear":return[this.state.type,this.state.slop,this.state.intercept].join(" ");case"gamma":return[this.state.type,this.state.amplitude,this.state.exponent,this.state.offset].join(" ")}return"identity"}setValue(e){this.setState(P({},this.parse(e)))}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.getValue(),this.props.params)}}var KH=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"strokeSourceAlpha2",bound:{x:400,y:200},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:400,y:150},in:[{id:"composite"},{id:"strokeSourceAlpha2"}],operator:"out",connected:[{id:"displacementMap"}]},{type:"Turbulence",id:"turbulence",filterType:"fractalNoise",baseFrequency:"0.01 0.02",numOctaves:1,seed:0,stitchTiles:"stitch",bound:{x:400,y:200},connected:[{id:"displacementMap"}]},{type:"DisplacementMap",id:"displacementMap",scale:17,xChannelSelector:"A",yChannelSelector:"A",bound:{x:400,y:200},in:[{id:"composite2"},{id:"turbulence"}],connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"strokeSourceGraphic"},{id:"displacementMap"}]}],qH=[{type:"Saturate",values:"0"}],ZH=[{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:1,connected:[{id:"composite1"}]},{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"composite1"}]},{type:"Composite",id:"composite1",bound:{x:200,y:150},in:[{id:"flood"},{id:"shadowSource"}],operator:"out",connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:300,y:150},dx:4,dy:4,in:[{id:"composite1"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:400,y:150},stdDeviationX:4,stdDeviationY:4,edge:"none",in:[{id:"offset"}],connected:[{id:"composite2"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:250},connected:[{id:"composite2"}]},{type:"Composite",id:"composite2",bound:{x:500,y:150},in:[{id:"blur"},{id:"shadowSource2"}],operator:"out",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"shadowSource3",bound:{x:500,y:250},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:600,y:150},in:[{id:"composite2"},{id:"shadowSource3"}]}],JH=[{type:"SourceAlpha",id:"shadowSource",bound:{x:100,y:100},connected:[{id:"offset"}]},{type:"Offset",id:"offset",bound:{x:200,y:100},dx:10,dy:10,in:[{id:"shadowSource"}],connected:[{id:"blur"}]},{type:"GaussianBlur",id:"blur",bound:{x:300,y:100},stdDeviationX:5,stdDeviationY:5,in:[{id:"offset"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"black",opacity:.7,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"blur"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceAlpha",id:"shadowSource2",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"shadowSource2"}]}],QH=[{type:"SourceAlpha",id:"strokeSource",bound:{x:100,y:100},connected:[{id:"morphology"}]},{type:"Morphology",id:"morphology",operator:"dilate",radius:"3 3",bound:{x:100,y:200},in:[{id:"strokeSource"}],connected:[{id:"composite"}]},{type:"Flood",id:"flood",bound:{x:100,y:200},color:"#30597E",opacity:1,connected:[{id:"composite"}]},{type:"Composite",id:"composite",bound:{x:400,y:150},in:[{id:"flood"},{id:"morphology"}],operator:"in",connected:[{id:"merge"}]},{type:"SourceGraphic",id:"strokeSourceGraphic",bound:{x:400,y:200},connected:[{id:"merge"}]},{type:"Merge",id:"merge",bound:{x:500,y:150},in:[{id:"composite"},{id:"strokeSourceGraphic"}]}],eU={dancingStroke:KH,stroke:QH,grayscale:qH,shadow:JH,innerShadow:ZH};const tU=[{label:"GRAPHIC REFERENCES",items:[{label:"Source Graphic",value:"SourceGraphic"},{label:"Source Alpha",value:"SourceAlpha"},{label:"Background Image",value:"BackgroundImage"},{label:"Background Alpha",value:"BackgroundAlpha"},{label:"Fill Paint",value:"FillPaint"},{label:"Stroke Paint",value:"StrokePaint"}]},{label:"SOURCES",items:[{label:"Flood",value:"Flood"},{label:"Turbulence",value:"Turbulence"},{label:"Image",value:"Image"}]},{label:"MODIFIER",items:[{label:"Color Matrix",value:"ColorMatrix"},{label:"Saturate",value:"Saturate"},{label:"HueRotate",value:"HueRotate"},{label:"LuminanceToAlpha",value:"LuminanceAlpha"},{label:"Drop Shadow",value:"DropShadow"},{label:"Morphology",value:"Morphology"},{label:"Convolve Matrix",value:"ConvolveMatrix"},{label:"Offset",value:"Offset"},{label:"Gaussian Blur",value:"GaussianBlur"},{label:"Tile",value:"Tile"}]},{label:"LIGHTING",items:[{label:"Specular Lighting",value:"SpecularLighting"},{label:"Diffuse Lighting",value:"DiffuseLighting"},{label:"Point Light",value:"PointLight"},{label:"Spot Light",value:"SpotLight"},{label:"Distant Light",value:"DistantLight"}]},{label:"COMBINERS",items:[{label:"Blend",value:"Blend"},{label:"Composite",value:"Composite"},{label:"Merge",value:"Merge"},{label:"DisplacementMap",value:"DisplacementMap"}]}],iU=[{label:"Template",items:[{label:"Grayscale",value:"grayscale"},{label:"Shadow",value:"shadow"},{label:"Inner Shadow",value:"innerShadow"},{label:"Stroke",value:"stroke"},{label:"Dancing Stroke",value:"dancingStroke"}]}];function A0(n){switch(n){case"SpecularLighting":return ie("specular");case"DiffuseLighting":return ie("diffuse");case"SourceGraphic":case"SourceAlpha":return ie("image");case"BackgroundImage":case"BackgroundAlpha":return ie("outline_image");case"Flood":return ie("palette");case"Image":return ie("landscape");case"GaussianBlur":return ie("blur");case"ColorMatrix":return ie("blur_linear");case"Turbulence":return ie("waves");case"Saturate":return ie("vintage");case"HueRotate":return ie("looks");case"LuminanceAlpha":return ie("opacity");case"DropShadow":return ie("shadow");case"Morphology":return ie("broken_image");case"ConvolveMatrix":return ie("camera_roll");case"Offset":return ie("transform");case"Tile":return ie("view_comfy");case"Blend":return ie("gradient");case"Composite":return ie("merge");case"Merge":return ie("settings_input_component");case"DisplacementMap":return ie("texture")}return""}function R0(n){switch(n){case"SourceGraphic":case"SourceAlpha":case"BackgroundImage":case"BackgroundAlpha":case"FillPaint":case"StrokePaint":return"graphic";case"Flood":case"Turbulence":case"Image":return"source";case"GaussianBlur":case"ColorMatrix":case"Saturate":case"HueRotate":case"LuminanceAlpha":case"DropShadow":case"Morphology":case"ConvolveMatrix":case"Offset":case"Tile":return"modifier";case"SpecularLighting":case"DiffuseLighting":case"SpotLight":case"PointLight":case"DistantLight":return"lighting";case"Blend":case"Composite":case"Merge":case"DisplacementMap":return"combiner"}return""}const rU=40,Xb=20,nU={1:[rU+5]},sU={1:[Xb]},aU={1:[-7],2:[-7],3:[-7],4:[-7],5:[-7]};let bu={1:[0],2:[-7,7],3:[-14,0,14],4:[-21,-7,7,21],5:[-28,-14,0,14,28]};Object.keys(bu).forEach(n=>{bu[n]=bu[n].map(e=>e+Xb)});class oU extends ge{makeFilterSelect(){return` - -
          - - ${yd(tU,e=>` -
          - ${yd(e.items,t=>` -
          - ${A0(t.value)} - ${this.$i18n(t.label)} -
          - `)} -
          - `)} -
          - `}makeFilterTemplateSelect(){return` - -
          - - ${yd(iU,e=>` -
          - ${yd(e.items,t=>`
          ${this.$i18n(t.label)}
          `)} -
          - `)} -
          - `}initState(){var e=this.parseFilter(this.props.value||[]);return{filters:e,selectedTabIndex:1,selectedIndex:-1,selectedFilter:null}}template(){return` -
          -
          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          -
          -
          - ${this.makeFilterSelect()} -
          -
          - ${this.makeFilterTemplateSelect()} -
          - -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          -
          `}[ne("$header .tab-item:not(.empty-item)")](e){var t=+e.$dt.attr("data-value");this.state.selectedTabIndex!==t&&(this.$el.$$(`[data-value="${this.state.selectedTabIndex}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedTabIndex:t},!1))}[wn("$filterSelect .item")](e){var t=e.$dt.attr("value");e.dataTransfer.setData("filter/type",t)}[an("$connectedLinePanel")+wt](){}[sn("$connectedLinePanel")+wt](e){var t={x:e.offsetX,y:e.offsetY},i=e.dataTransfer.getData("filter/type");this.makeFilterNode(i,{bound:t})}makeFilterNode(e,t={}){this.state.filters.push(this.makeFilter(e,t)),this.state.selectedIndex=this.state.filters.length-1,this.state.selectedFilter=this.state.filters[this.state.selectedIndex],this.refresh(),this.modifyFilter()}applyTemplate(e){var t=eU[e];t&&(this.setState({selectedIndex:-1,selectedFilter:null,filters:this.parseFilter(t)},!1),this.refresh(),this.modifyFilter())}getSpec(e){return nH[e]}makeFilterEditorTemplate(e,t,i){var r=`${t.type}${i}${this.state.selectedIndex}${Date.now()}`;if(e.inputType==="color-matrix")return W("ColorMatrixEditor",{ref:`$colorMatrix${r}`,label:e.title,key:i,column:e.column,values:t[i].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="input-array")return W("InputArrayEditor",{ref:`$inputArray${r}`,label:e.title,key:i,"column-label":"R,G,B,A,M","row-label":"R,G,B,A",column:e.column,values:t[i].join(" "),onchange:"changeRangeEditor"});if(e.inputType==="blend")return W("BlendSelectEditor",{ref:`$blend${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="select"){var s=e.options;return Ye(e.options)&&(s=e.options(this.state.filters)),W("SelectEditor",{ref:`$select${r}`,label:e.title,options:s,key:i,value:t[i].toString(),onchange:"changeRangeEditor"})}else{if(e.inputType==="text")return W("TextEditor",{ref:`$text${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeTextEditor"});if(e.inputType==="number-range")return W("NumberRangeEditor",{ref:`$numberrange${r}`,label:e.title,layout:"block",min:e.min,max:e.max,step:e.step,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="color")return W("ColorViewEditor",{ref:`$colorview${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"});if(e.inputType==="FuncFilter")return W("FuncFilterEditor",{ref:`$funcFilter${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeFuncFilterEditor"});if(e.inputType==="ImageSelectEditor")return W("ImageSelectEditor",{ref:`$imageSelect${r}`,label:e.title,key:i,value:t[i].toString(),onchange:"changeRangeEditor"})}return W("RangeEditor",{ref:`$range${r}`,layout:"block",label:e.title,min:e.min,max:e.max,step:e.step,key:i,value:t[i].toString(),units:e.units,onchange:"changeRangeEditor"})}makeOneFilterTemplate(e,t){return` -
          -
          - -
          - -
          -
          -
          - ${TS(e,(i,r)=>this.makeFilterEditorTemplate(r,t,i))} - -
          -
          - `}makeFilterTemplate(e){return this.makeOneFilterTemplate(this.getSpec(e.type),e)}[me("$filterList")](){return this.state.selectedFilter&&this.state.selectedFilter.isSource()===!1?this.makeFilterTemplate(this.state.selectedFilter):""}modifyFilter(){this.state.filters.forEach(e=>{e.isLight()&&e.connected.length&&e.connected.forEach(t=>{this.state.filters.filter(i=>i.id===t.id).forEach(i=>{i.reset({lightInfo:e.toLightString()})})})}),this.parent.trigger(this.props.onchange,this.props.key,this.state.filters)}parseFilter(e=[]){return e.map(t=>Jc.parse(t))}makeFilter(e,t={}){return Jc.parse(ze(P({},t),{type:e}))}[ne("$filterSelect .item[value]")](e){var t=e.$dt.attr("value");this.makeFilterNode(t)}[ne("$filterTemplateSelect .item[value]")](e){var t=e.$dt.attr("value");this.applyTemplate(t)}[ne("$filterList .filter-menu .del")](){this.removeFilter(this.state.selectedFilter.id)}[me("$graphPanel")](){return this.makeGraphPanel()}selectFilter(e){this.setState({selectedIndex:e,selectedFilter:this.state.filters[e]},!1),this.load("$filterList")}[Ke("$graphPanel .filter-node")+at()+ct()](e){this.$target=e.$dt,this.$point=null,this.pointType="object",this.pointIndex=0;var t=this.refs.$graphPanel.rect();this.rect=t;var i=+this.$target.attr("data-index");this.selectFilter(i),this.$target.onlyOneClass("selected");var r=qe.create(e.target);if(r.hasClass("out"))this.$point=r,this.pointType="out",this.pointIndex=0;else if(r.hasClass("in"))this.$point=r,this.pointType="in",this.pointIndex=+r.attr("data-index");else{var s=this.state.selectedFilter;this.startXY=rt(s.bound)}if(this.pointType==="in"||this.pointType==="out"){var a=r.rect(),o=a.x-t.x,l=a.y-t.y,c=o+a.width/2,h=l+a.height/2;this.startXY={x:c,y:h}}this.startXY.dx=0,this.startXY.dy=0,this.load("$dragLinePanel")}[me("$dragLinePanel")](){if(this.pointType==="in"||this.pointType==="out"){var{x:e,y:t,dx:i,dy:r}=this.startXY;return` - - - - `}else return""}makeConnectedPath(e){var t=new Qi,i=e[0],r=e[e.length-1];if(!i||!r)return"";var s=Math.abs(i.x-r.x)/2;return t.M(i).C({x:i.x+s,y:i.y},{x:r.x-s,y:r.y},r),t.d}createPath(e,t){if(t.path)return t.path;var i=e.bound.x+nU["1"][0],r=e.bound.y+sU["1"][0],s=this.state.filters.map((d,u)=>({it:d,index:u})).find(d=>!d||!d.it?!1:d&&d.it.id===t.id),a=`${s.it.getInCount()}`,o=s.it.in.map((d,u)=>({it:d,index:u})).find(d=>!d||!d.it?!1:d.it.id===e.id);if(!o)return[];var l=o.index,c=s.it.bound.x+aU[a][0],h=s.it.bound.y+bu[a][l];return[{x:i,y:r},{x:c,y:h}]}[me("$connectedLinePanel")](){return` - - ${this.state.filters.map(e=>e.connected.map(t=>{var i=this.createPath(e,t),r=R0(e.type);return` - - - ${i.length&&` - - `} - - `}).join("")).join("")} - - `}[ne("$connectedLinePanel .connected-remove-circle")](e){var[t,i]=e.$dt.attrs("data-target-id","data-source-id"),r=this.state.filters;r.filter(s=>s.id===i).forEach(s=>{s.connected=s.connected.filter(a=>a.id!=t)}),r.filter(s=>s.id===t).forEach(s=>{s.in=s.in.map(a=>a&&a.id==i?null:a)}),this.refresh(),this.modifyFilter()}getCenterXY(e){var t=e.rect(),i=t.x-this.rect.x,r=t.y-this.rect.y,s=i+t.width/2,a=r+t.height/2;return{x:s,y:a}}end(e,t){if(this.pointType==="in"||this.pointType==="out"){this.startXY.dx=e,this.startXY.dy=t;var i=this.state.selectedFilter,r=this.$config.get("bodyEvent"),s=qe.create(r.target),a=s.closest("filter-node");if(this.pointType==="out"){if(s.hasClass("in")){var o=this.state.filters[+a.attr("data-index")];if(o&&!(!o.hasLight()&&i.isLight())){var l=+s.attr("data-index");o.in[l]||(o.setIn(l,i),i.setConnected(o))}}}else if(this.pointType==="in"&&s.hasClass("out")){var o=this.state.filters[+a.attr("data-index")];o&&(i.hasLight()&&!o.isLight()||i.in[this.pointIndex]||(i.setIn(this.pointIndex,o),o.setConnected(i)))}this.pointType=""}this.load("$dragLinePanel"),this.load("$connectedLinePanel"),this.modifyFilter()}move(e,t){var i=this.state.selectedFilter;i&&(this.startXY.dx=e,this.startXY.dy=t,this.pointType==="in"?this.load("$dragLinePanel"):this.pointType==="out"?this.load("$dragLinePanel"):(i.reset({bound:{x:this.startXY.x+e,y:this.startXY.y+t}}),this.$target.css({left:i.bound.x,top:i.bound.y}),this.load("$connectedLinePanel")))}makeGraphPanel(){return this.state.filters.map((e,t)=>` -
          -
          ${this.$i18n(e.type)}
          -
          ${ie("close")}
          -
          ${A0(e.type)}
          -
          - ${bn(e.getInCount()).map((r,s)=>`
          `).join("")} -
          - -
          ${ie("chevron_right")}
          - ${e.hasLight()?`
          `:""} -
          - `)}[we("changeFuncFilterEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}[we("changeRangeEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}[we("changeTextEditor")](e,t){var i=this.state.selectedFilter;i&&i.reset({[e]:t}),this.modifyFilter()}removeFilter(e){var t=this.state.filters.filter(i=>i.id!=e);t.forEach(i=>{i.connected=i.connected.filter(r=>r.id!=e),i.in=i.in.filter(r=>r.id!=e)}),this.state.selectedFilter.id===e&&(this.state.selectedFilter=null,this.state.selectedIndex=-1),this.setState({filters:t}),this.modifyFilter()}[ne("$graphPanel .filter-node .remove")](e){var t=e.$dt.closest("filter-node"),i=+t.attr("data-index"),r=this.state.filters[i];this.removeFilter(r.id)}}class lU extends Mn{getTitle(){return this.$i18n("svgfilter.popup.title")}getClassName(){return"transparent"}initState(){return{changeEvent:"changeSVGFilterPopup",id:"",preview:!0,filters:[]}}updateData(e){this.setState(e,!1),this.emit(this.state.changeEvent,this.state)}getBody(){return` -
          -
          -
          -
          -
          `}[me("$editor")](){return W("SVGFilterEditor",{ref:"$filter",title:"Filter Type",key:"filter",value:this.state.filters,onchange:(e,t)=>{this.updateData({filters:t})}})}[H("showSVGFilterPopup")](e){e.filters=e.filters.map(t=>Jc.parse(t)),e.preview=$t(e.preview)?e.preview:!0,this.setState(e),this.show(1e3)}[H("hideSVGFilterPopup")](){this.$el.hide()}}class cU extends ge{initState(){var e=this.props.value;return{options:[],label:this.props.label||"",value:e}}template(){var{label:e}=this.state,t=e?"has-label":"";return` -
          - ${e?``:""} - - - -
          - `}[ne("$remove")](){this.updateData({value:""})}[ne("$open")](){var e=this.state.value;if(e.includes("id")){var t=this.$context.selection.currentProject,i=t.getSVGFilterIndex(e);i>-1&&this.trigger("openSVGFilterPopup",i)}}getValue(){return this.state.value}setValue(e){this.setState({value:e})}[Me("$options")](){return{"data-count":this.state.options.length.toString()}}[me("$options")](){var e=this.$context.selection.currentProject,t="";e&&(t=e.svgfilters.map(r=>r.id),t=t.length?","+t.join(","):""),t+=",-,new",t=t.split(",");var i=t.map(r=>{var s=r,a=r;if(s.includes(":"))var[s,a]=s.split(":");a===""?a=this.props["none-value"]?this.props["none-value"]:"":a==="-"&&(a="----------",s="");var o=s===this.state.value?"selected":"";return``});return i}setOptions(e=""){this.setState({options:e.split(this.state.splitChar).map(t=>t.trim())})}[Yn("$options")](){var e=this.refs.$options.value;e=="new"?this.$commands.emit("addSVGFilterAssetItem",(t,i)=>{this.updateData({value:i}),this.refresh(),this.trigger("openSVGFilterPopup",t)}):e==="-"||this.updateData({value:e})}updateData(e){this.setState(e,!1),this.parent.trigger(this.props.onchange,this.props.key,this.state.value,this.props.params)}[H("refreshSVGArea")+Nt(1e3)](){this.load("$options")}[H("openSVGFilterPopup")](e){this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea");var t=this.$context.selection.currentProject||{svgfilters:[]},i=t.svgfilters[e];this.emit("showSVGFilterPopup",{changeEvent:"changeSVGFilterEditorRealUpdate",preview:!1,index:e,filters:i.filters})}[H("changeSVGFilterEditorRealUpdate")](e){var t=this.$context.selection.currentProject;t&&(t.setSVGFilterValue(e.index,{filters:e.filters}),this.emit("refreshSVGFilterAssets"),this.emit("refreshSVGArea"))}}function hU(n){n.registerElement({ColorMatrixEditor:XH,FuncFilterEditor:YH,SVGFilterSelectEditor:cU,SVGFilterEditor:oU}),n.registerUI("inspector.tab.style",{SVGItemProperty:mp.create({title:n.$i18n("svg.item.property.title"),editableProperty:"svg-item",preventUpdate:!0})}),n.registerUI("popup",{SVGFilterPopup:lU}),n.registerInspector("svg-item",e=>[{key:"edit",editor:"Button",editorOptions:{text:"Edit",action:["open.editor",e]}},{type:"column",size:[2,1],columns:[{type:"label",label:n.$i18n("svg.item.property.fill")},{key:"fillRule",editor:"ToggleCheckBox",editorOptions:{toggleLabels:[ie("join_full"),ie("join_right")],toggleValues:["nonzero","evenodd"]},defaultValue:e.fillRule||"nonzero"}]},{type:"column",size:[2,1],columns:[{key:"fill",editor:"FillSingleEditor",editorOptions:{wide:!0},defaultValue:e.fill},{key:"fillOpacity",editor:"number-input",editorOptions:{compact:!0,label:"opacity",min:0,max:1,step:.01},defaultValue:e.fillOpacity}]},{type:"column",size:[2,1],columns:[{type:"label",label:n.$i18n("svg.item.property.stroke")}]},{type:"column",size:[2,1],columns:[{key:"stroke",editor:"fill-single",editorOptions:{wide:!0},defaultValue:e.stroke},{key:"strokeWidth",editor:"number-input",editorOptions:{compact:!0,label:"line_weight"},defaultValue:e.strokeWidth}]},{type:"column",size:[2,1],columns:[{key:"strokeDasharray",editor:"StrokeDashArrayEditor",editorOptions:{label:n.$i18n("svg.item.property.dashArray")},defaultValue:e.strokeDasharray||""},{key:"strokeDashoffset",editor:"number-input",editorOptions:{compact:!0,label:"power_input",min:-1e3,max:1e3,step:1},defaultValue:e.strokeDashoffset}]},{key:"strokeLinecap",editor:"ToggleCheckBox",editorOptions:{label:n.$i18n("svg.item.property.lineCap"),toggleLabels:[ie("line_cap_butt"),ie("line_cap_round"),ie("line_cap_square")],toggleValues:[Xp.BUTT,dc.ROUND,Xp.SQUARE]},defaultValue:e.strokeLinecap||Xp.BUTT},{key:"strokeLinejoin",editor:"ToggleCheckBox",editorOptions:{label:n.$i18n("svg.item.property.lineJoin"),toggleLabels:[ie("line_join_miter"),ie("line_join_round"),ie("line_join_bevel")],toggleValues:[dc.MITER,dc.ROUND,dc.BEVEL]},defaultValue:e.strokeLinejoin||dc.MITER},{key:"mixBlendMode",editor:"BlendSelectEditor",editorOptions:{label:n.$i18n("svg.item.property.blend")},defaultValue:e.mixBlendMode}]),n.registerInspector("polygon",e=>[{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1},defaultValue:e.count},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",command:"copy.path"}},{key:"button2",editor:"Button",editorOptions:{label:"Test Popup",action:["showComponentPopup",{title:"Sample Test Popup",width:400,inspector:[{key:"test",editor:"Button",editorOptions:{label:"Test",text:"text",onClick:()=>{window.alert("yellow")}}}]}]}}]),n.registerInspector("spline",()=>[{key:"boundary",editor:"SelectIconEditor",editorOptions:{label:"Boundary",options:["clamped","open","closed"]}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}]),n.registerInspector("star",e=>[{key:"isCurve",editor:"ToggleCheckBox",editorOptions:{label:"Curve",defaultValue:e.isCurve}},{key:"count",editor:"NumberInputEditor",editorOptions:{label:"Count",min:3,max:100,step:1,wide:"true"}},{key:"radius",editor:"NumberInputEditor",editorOptions:{label:"Inner Radius",min:-1,max:1,step:.01,wide:"true"}},{key:"tension",editor:"NumberInputEditor",editorOptions:{label:"Tension",min:0,max:1,step:.01,wide:"true"}},{key:"button",editor:"Button",editorOptions:{label:"Copy ",text:"as path",action:"copy.path"}}])}class dU extends Bt{getTitle(){return this.$i18n("svg.text.property.title")}[H(Lt)](){this.refreshShow(["svg-textpath","svg-text","svg-tspan"])}refresh(){var e=this.$context.selection.current;e&&this.setAllValue(["lengthAdjust","textLength","startOffset","text-anchor","text"])}setAllValue(e=[]){var t=this.$context.selection.current;!t||e.forEach(i=>{this.children[`$${i}`].setValue(t[i])})}getBody(){return` -
          - ${W("TextAreaEditor",{ref:"$text",label:this.$i18n("svg.text.property.textarea"),key:"text",onchange:"changeTextValue"})} -
          -
          - ${W("SelectIconEditor",{ref:"$text-anchor",label:this.$i18n("svg.text.property.anchor"),key:"textAnchor",options:["start","middle","end"],onchange:"changeTextValue"})} - -
          -
          - ${W("SelectEditor",{ref:"$lengthAdjust",label:this.$i18n("svg.text.property.length.adjust"),key:"lengthAdjust",value:"spacing",options:["spacing","spacingAndGlyphs"],onchange:"changeTextValue"})} - -
          -
          - ${W("RangeEditor",{ref:"$textLength",label:this.$i18n("svg.text.property.text.length"),key:"textLength",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} - -
          -
          - ${W("RangeEditor",{ref:"$startOffset",label:this.$i18n("svg.text.property.start.offset"),key:"startOffset",min:0,max:1e3,step:.1,onchange:"changeTextValue"})} - -
          - `}[we("changeTextValue")](e,t){this.$commands.executeCommand("setAttribute",`change svg text property: ${e}`,this.$context.selection.packByValue({[e]:t}))}}function uU(n){n.registerUI("inspector.tab.style",{SVGTextProperty:dU})}function pU(n){n.registerUI("inspector.tab.style",{TextProperty:mp.create({title:n.$i18n("text.property.title"),editableProperty:"text-style",preventUpdate:!0})}),n.registerInspector("text-style",e=>[{type:"column",size:[2,1,1],columns:[{key:"textAlign",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["left","center","right","justify"],icons:["align_left","align_center","align_right","align_justify"]},defaultValue:e.textAlign||vL.LEFT},"-",{key:"textTransform",editor:"SelectIconEditor",editorOptions:{options:[{value:Kp.CAPITALIZE,text:"Ag"},{value:Kp.UPPERCASE,text:"AG"},{value:Kp.LOWERCASE,text:"ag"}],compact:!0,icons:["horizontal_rule"]},defaultValue:e.textTransform}]},{type:"column",size:[3,2,1],gap:20,columns:[{key:"textDecoration",editor:"SelectIconEditor",editorOptions:{options:[{value:Yp.NONE,text:"None"},{value:Yp.UNDERLINE,text:"Underline"},{value:Yp.LINE_THROUGH,text:"LineThrough"}],icons:["horizontal_rule","underline","strikethrough"],onchange:"changeTextValue"},defaultValue:e.textDecoration},{key:"fontStyle",editor:"SelectIconEditor",editorOptions:{compact:!0,options:["normal","italic"],icons:["title","italic"]},defaultValue:e.fontStyle},{key:"textClip",editor:"ToggleButton",editorOptions:{checkedValue:vd.TEXT,toggleLabels:[ie("vignette"),ie("vignette")],toggleTitles:["","Text Clip"],toggleValues:[vd.NONE,vd.TEXT]},defaultValue:e.textClip||vd.NONE}]}])}var O0=[{name:"Mystic",shadow:"20px 0px 10px rgb(0, 0, 0)"},{name:"Monoton",shadow:"0px -78px rgb(255, 196, 0)"},{name:"Radioactive",shadow:"-18px -18px 20px rgb(87, 255, 9);"},{name:"Bungee",shadow:"-18px 18px 0 rgb(66, 45, 45)"},{name:"Sprint",shadow:"-20px -108px 0px rgba(255, 255, 255, 0.445)"},{name:"Prickly",shadow:"-18px -18px 2px #777"},{name:"Codystar",shadow:"1px 1px 10px rgb(16, 72, 255), 1px 1px 10px rgb(0, 195, 255)"},{name:"Elegant",shadow:"-18px 8px 18px #b4bbbb"},{name:"Playful",shadow:` - -2px -2px 0px #888, - 4px 4px 0px #888, - 7px 7px 0px #888 - `}];class fU extends Bt{getTitle(){return this.$i18n("text.shadow.property.title")}getBody(){return` -
          - `}getTools(){return` - - - `}[ne("$add")](){const e=+this.refs.$select.value;this.children.$textshadow.trigger("add",O0[e].shadow)}[me("$shadowList")](){var e=this.$context.selection.current||{};return W("TextShadowEditor",{ref:"$textshadow",key:"textShadow",value:e.textShadow,onchange:(t,i)=>{this.$commands.executeCommand("setAttribute","change text shadow",this.$context.selection.packByValue({[t]:i}))}})}get editableProperty(){return"textShadow"}[H(Lt)+et("checkShow")+Nt(100)](){this.refresh()}}function gU(n){n.registerUI("inspector.tab.style",{TextShadowProperty:fU})}const mU=/((cubic-bezier|steps)\(([^)]*)\))/gi;class fr extends Vr{static parse(e){return new fr(e)}getDefaultObject(){return{name:"all",duration:y.second(0),timingFunction:"linear",delay:y.second(0)}}toCloneObject(){return{name:this.json.name,duration:this.json.duration+"",timingFunction:this.json.timingFunction,delay:this.json.delay+""}}toCSS(){return{transition:this.toString()}}toString(){var e=this.json;return[e.name,e.duration,e.timingFunction,e.delay].join(" ")}static join(e){return e.map(t=>new fr(t).toString()).join(",")}static add(e,t={}){const i=fr.parseStyle(e);return i.push(fr.parse(t)),fr.join(i)}static remove(e,t){return fr.filter(e,(i,r)=>t!=r)}static filter(e,t){return fr.join(fr.parseStyle(e).filter(i=>t(i)))}static replace(e,t,i){var r=fr.parseStyle(e);return r[t]?r[t]=i:r.push(i),fr.join(r)}static get(e,t){var i=fr.parseStyle(e);return i[t]}static parseStyle(e){var t=[];if(!e)return t;const i=hb(e,mU);return t=i.str.split(",").map(r=>{const s=r.split(" ").filter(Boolean);return s.length>=4?{name:s[0],duration:y.parse(s[1]),timingFunction:Tg(s[2],i.matches),delay:y.parse(s[3])}:s.length>=3?{name:s[0],duration:y.parse(s[1]),delay:y.parse(s[2])}:s.length>=1?{name:s[0],duration:y.parse(s[1])}:{}}),t.map(r=>fr.parse(r))}}class vU extends Bt{getTitle(){return this.$i18n("transition.property.title")}getBody(){return"
          "}getTools(){return` - - `}isFirstShow(){return!0}[me("$transitionList")+It](){var e=this.$context.selection.current;return e?fr.parseStyle(e.transition).map((t,i)=>{const r=this.state.selectedIndex===i?"selected":"",s=Za(t.timingFunction,30,30);return` -
          -
          -
          - - - -
          -
          -
          - ${t.name} - Duration: ${t.duration} - Delay: ${t.delay} -
          -
          -
          - -
          -
          -
          - `}):""}[H(Lt)](){this.refreshShowIsNot([])}[ne("$add")](){var e=this.$context.selection.current;e?(this.$commands.executeCommand("setAttribute","add transition",this.$context.selection.packByValue({transition:t=>fr.add(t.transition)})),this.nextTick(()=>{window.setTimeout(()=>{this.refresh()},100)})):window.alert("Select a layer")}getCurrentTransition(){return this.current.transitions[this.selectedIndex]}[ne("$transitionList .tools .del")](e){var t=e.$dt.attr("data-index"),i=this.$context.selection.current;!i||(i.reset({transition:fr.remove(i.transition,t)}),this.emit("refreshElement",i),this.refresh())}selectItem(e,t=!0){t?this.refs[`transitionIndex${e}`].addClass("selected"):this.refs[`transitionIndex${e}`].removeClass("selected")}viewTransitionPicker(e){typeof this.selectedIndex=="number"&&this.selectItem(this.selectedIndex,!1),this.selectedIndex=+e.attr("data-index"),this.current=this.$context.selection.current,this.current&&(this.currentTransition=fr.get(this.current.transition,this.selectedIndex),this.viewTransitionPropertyPopup())}viewTransitionPropertyPopup(){if(!this.currentTransition)return;const e=this.currentTransition;this.emit("showTransitionPropertyPopup",{changeEvent:"changeTransitionPropertyPopup",data:e.toCloneObject(),instance:this})}[ne("$transitionList .preview")](e){this.viewTransitionPicker(e.$dt)}getRef(...e){return this.refs[e.join("")]}[H("changeTransitionPropertyPopup")](e){this.currentTransition&&(this.currentTransition.reset(P({},e)),this.current&&(this.current.reset({transition:fr.replace(this.current.transition,this.selectedIndex,this.currentTransition)}),this.emit("refreshElement",this.current),this.refresh()))}}const yU=["none","all","background-color","background-position","background-size","border","border-color","border-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-spacing","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","bottom","box-shadow","color","filter","font-size","font-size-adjust","font-weight","height","left","letter-spacing","line-height","margin","margin-bottom","margin-left","margin-right","margin-top","max-height","max-width","min-height","min-width","opacity","padding","padding-bottom","padding-left","padding-right","padding-top","perspective","perspective-origin","right","text-decoration","text-decoration-color","text-indent","text-shadow","top","transform","vertical-align","visibility","width","word-spacing","z-index"].map(n=>({value:n,text:n}));class xU extends Mn{getTitle(){return"Transition"}initState(){return{changeEvent:"",instance:{},data:{timingFunction:"linear",duration:"0s",delay:"0s",name:"all"}}}updateData(e){this.state.data=P(P({},this.state.data),e),this.state.instance&&this.state.instance.trigger(this.state.changeEvent,this.state.data)}getBody(){return"
          "}[me("$popup")](){return` -
          - ${this.templateForProperty()} - ${this.templateForTimingFunction()} - ${this.templateForDelay()} - ${this.templateForDuration()} -
          - `}templateForTimingFunction(){return` -
          - - ${W("CubicBezierEditor",{ref:"$cubicBezierEditor",key:"timingFunction",value:this.state.data.timingFunction||"linear",onChange:"changeCubicBezier"})} -
          - `}[we("changeTransition")](e,t){this.updateData({[e]:t})}templateForProperty(){return` -
          - ${W("SelectEditor",{ref:"$property",icon:!0,label:"Property",key:"name",value:this.state.data.name,options:yU,onChange:"changeTransition"})} -
          - `}templateForDelay(){return` -
          - ${W("RangeEditor",{ref:"$delay",label:"Delay",key:"delay",value:this.state.data.delay,units:["s","ms"],onChange:"changeRangeEditor"})} -
          - `}templateForDuration(){return` -
          - ${W("RangeEditor",{ref:"$duration",label:"Duration",key:"duration",value:this.state.data.duration,units:["s","ms"],onChange:"changeRangeEditor"})} -
          - `}[we("changeRangeEditor")](e,t){this.updateData({[e]:t})}[we("changeCubicBezier")](e,t){this.updateData({[e]:t})}[H("showTransitionPropertyPopup")](e){this.setState(e),this.show(250),this.children.$cubicBezierEditor.trigger("showCubicBezierEditor",e.data.timingFunction)}[H("hideTransitionPropertyPopup")](){this.$el.hide()}}function bU(n){n.registerUI("inspector.tab.transition",{TransitionProperty:vU}),n.registerUI("popup",{TransitionPropertyPopup:xU})}class _U extends Bt{getClassName(){return"item elf--video-property"}getTitle(){return this.$i18n("video.property.title")}initState(){return{$video:{el:{}},status:"play",volume:1}}getBody(){return"
          "}get video(){return this.state.$video.el}get volumeStatus(){return this.state.volume===0?"muted":this.state.volume>.5?"up":"down"}play(){this.video&&this.video.play()}pause(){this.video&&this.video.pause()}[me("$body")](){var e=this.$context.selection.current||{playTime:"0:1:1"},t=e.currentTime||0,i=(e.playTime||"0:1:1").split(":").pop();return` -
          - - -
          - ${W("NumberRangeEditor",{ref:"$currentTime",min:0,max:i,value:t,step:.001,onchange:"changeCurrentTime"})} -
          -
          -
          -
          - - ${this.$i18n("video.property.volume")} -
          -
          - ${Ue.volume_off} - ${Ue.volume_down} - ${Ue.volume_up} - -
          -
          -
          -
          - - ${this.$i18n("video.property.playbackRate")} -
          -
          - ${W("NumberRangeEditor",{ref:"$playbackRate",min:.1,max:10,clamp:!0,value:this.state.playbackRate,step:.001,onchange:"changePlaybackRate"})} -
          -
          -
          -
          - - ${this.$i18n("video.property.playTime")} -
          - ${W("MediaProgressEditor",{ref:"$progress",key:"playTime",value:e.playTime,onchange:"changeSelect"})} -
          - `}[H("changeCurrentTime")](e,t){this.setState({currentTime:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({currentTime:t}))}[H("changePlaybackRate")](e,t){this.setState({playbackRate:t},!1),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({playbackRate:t}))}[u2("$volume")](){const e=Number(this.refs.$volume.value);this.setState({volume:e},!1),this.bindData("$volume_control"),this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({volume:e}))}[Me("$volume_control")](){return{"data-selected-value":this.volumeStatus}}[Me("$tools")](){return{"data-selected-value":this.state.status}}[ne("$tools button")](e){var t=e.$dt.attr("data-value");switch(t){case"play":this.setState({status:"pause"},!1),this.play();break;case"pause":this.setState({status:"play"},!1),this.pause();break}this.bindData("$tools")}[we("changeValue")+Nt(100)](e,t){!this.state.$video||this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[we("changeSelect")](e,t){this.$commands.executeCommand("setAttribute","change video property",this.$context.selection.packByValue({[e]:t}))}[we("updateVideoEvent")](){this.video.paused&&(this.setState({status:"play",currentTime:this.video.currentTime},!1),this.bindData("$tools")),this.children.$currentTime.setValue(this.video.currentTime)}[H(Lt)+Nt(100)](){const e=this.$context.selection.current;this.refreshShow(["video"]),e&&e.is("video")&&this.emit("refElement",e.id,t=>{const i=t.$("video");this.state.$video=i,this.setState({volume:e.volume,currentTime:e.currentTime,playbackRate:e.playbackRate},!1),this.video.ontimeupdate=r=>{this.trigger("updateVideoEvent",r)},this.video.onprogress=r=>{this.trigger("updateVideoEvent",r)},this.load("$body")})}}function SU(n){n.registerUI("inspector.tab.style",{VideoProperty:_U})}class wU extends Mn{getClassName(){return"component-property w(800)"}getTitle(){return"Component"}initState(){return{title:"",inspector:[]}}refresh(){this.setTitle(this.state.title||this.getTitle()),this.load()}getBody(){return` -
          - `}[Me("$body")](){return{style:{width:this.state.width||250}}}[me("$body")](){const e=this.state.inspector;return W("ComponentEditor",{inspector:e,onchange:"changeComponent"})}[we("changeComponent")](e,t){Ye(this.state.changeEvent)&&this.emit(this.state.changeEvent,e,t)}[H(tw)](e){this.setState(e,!1),this.refresh(),this.show(e.width)}}class MU extends Bt{getClassName(){return"component-property"}getTitle(){return"Component"}isShow(){var i;var e=(i=this.$context.selection)==null?void 0:i.current;const t=this.$context.components.createInspector(e);return!!(e&&(e.is("component")||t.length>0))}[H(Lt)+Nt(100)](){this.refreshShow(()=>{const e=this.$context.selection.current;return this.$context.components.createInspector(e).length>0})}refresh(){var e=this.$context.selection.current;e&&(this.setTitle(e.getDefaultTitle()||e.itemType||e.name),this.load())}getBody(){return` -
          - `}[me("$body")](){var i;var e=(i=this.$context.selection)==null?void 0:i.current;if(!e)return"";const t=this.$context.components.createInspector(e);return t.forEach(r=>{if(gi(r))return;let s=e[r.key]||r.defaultValue;Ye(r.convertDefaultValue)&&(s=r.convertDefaultValue(e,r.key)),r.defaultValue=s}),W("ComponentEditor",{ref:"$comp",inspector:t,onchange:"changeComponentProperty"})}[we("changeComponentProperty")](e,t){this.$commands.executeCommand("setAttribute","change component : "+e,this.$context.selection.packByValue({[e]:t}))}}function Yb(n){n.registerUI("inspector.tab.style",{ComponentProperty:MU}),n.registerUI("popup",{ComponentPopup:wU})}class $U extends Bt{getTitle(){return"Content"}[H(Lt,ew)+Nt(100)](){this.refreshShow(["text"])}getBody(){return` -
          - -
          - `}[Me("$contentItem")](){var e=this.$context.selection.current;return e?{value:e.content||""}:""}[di("$contentItem")](){this.setContent()}setContent(){var e=this.$context.selection.current;if(e){var t={content:this.refs.$contentItem.value};e.reset(t),this.emit(Ki,e)}}}function PU(n){n.registerElement({ContentProperty:$U})}var TU=[Dj,mb,XB,CB,Th,Ch,Eh,Cb,MN,Bb,Ph,jh,gm,Ib,oV,wG,GB,NV,lG,gV,uU,RN,pU,gU,PU,pV,Yb,$V,_G,AV,DV,SU,mB,SH,hU,TB,bV,OV,AN,yV,GV,YV,eB,PN,bU,MB,uV,bH,iD,Rb,Fb,Ub,Wb,Ab,zb,UB,Ob,Vb,Db,kb,Eb,eD,bB,Hb,function(n){n.registerMenu("context.menu.layer2",[{type:"button",title:"Layer"}]),n.registerMenu("context.menu.layer",[{type:"button",title:"Sample"},{type:"button",title:"Sample"},{type:"button",title:"Sample",action:e=>{console.log(e)}},{type:"button",title:"Sample"},{type:"dropdown",title:"dropdown",items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/",closable:!0}]}]),n.registerUI("context.menu",{ContextMenuView:sV})}];class CU extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",Dl.DESIGN))}[Me("$el")](){return{style:{display:this.$config.is("editor.design.mode",Dl.DESIGN)?"block":"none"}}}template(){return V("div",{class:"feature-control inspector"},V("div",null,V($h,{ref:"$tab",selectedValue:"style",onchange:e=>{this.$config.set("inspector.selectedValue",e)}},V(jn,{value:"style",title:this.$i18n("inspector.tab.title.design")},V("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.style",!0),V("div",{class:"empty",style:"order: 1000000;"}))),V(jn,{value:"transition",title:this.$i18n("inspector.tab.title.transition")},V("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.transition",!0),V("div",{class:"empty",style:"order: 1000000;"}))),V(jn,{value:"code",title:this.$i18n("inspector.tab.title.code")},V("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.code",!0),V("div",{class:"empty",style:"order: 1000000;"}))),this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,loadElements:r}=e.class;return V(jn,{value:t,title:i,icon:e.icon},V("div",{style:"display: flex: flex-direction: column;"},r.map(s=>Mh(s)),this.$injectManager.generate("inspector.tab."+e.value,!0),V("div",{class:"empty",style:"order: 1000000;"})))}))))}}class EU extends ge{template(){return` -
          - ${this.$injectManager.generate("asset")} -
          - `}}class IU extends ge{template(){return` -
          -
          -
          -
          - -
          -
          -
          -
          - `}async[me("$list")](){return(await this.$storageManager.getCustomAssetList()).map(t=>` -
          -
          -
          -
          ${t.component.name}
          -
          - -
          -
          -
          - `)}async[ne("$list .remove-asset-preview")](e){if(window.confirm(this.$i18n("app.confirm.message.artboard.items.removeCustomAsset"))){const t=e.$dt.data("preview-id");await this.$storageManager.removeCustomAsset(t),this.refresh()}}[wn("$list .asset-preview")](e){const t=e.$dt.data("preview-id");e.dataTransfer.effectAllowed="copy",e.dataTransfer.setData("text/asset",t)}[ne("$addCustomAsset")](){this.$commands.emit("savePNG",async e=>{await this.$storageManager.saveCustomAsset(e),this.refresh()})}}class LU extends ge{template(){return` -
          -
          - ${W("TextEditor",{label:"Search",key:"search",onchange:this.subscribe((e,t)=>{this.broadcast("search",t)},300)})} -
          - ${this.$injectManager.generate("library")} -
          - `}}class kU extends ge{template(){return` -
          -
          - ${W("ProjectProperty")} -
          -
          - ${W("LayerTreeProperty")} -
          -
          - `}}class Kb extends ge{components(){return{AssetItems:EU,LibraryItems:LU,CustomAssets:IU,ObjectItems:kU}}initState(){return{selectedIndexValue:2}}template(){return` -
          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          - -
          - - ${this.$injectManager.getTargetUI("leftbar.tab").map(e=>{const{value:t,title:i}=e.class;let r=e.class.icon;return Ue[e.class.icon]&&(r=ie(e.class.icon)),` -
          - -
          - `})} - -
          -
          -
          - ${W("ObjectItems")} -
          -
          - ${W("LibraryItems")} -
          -
          - ${W("AssetItems")} -
          - ${W("GradientAssetsProperty")} - ${W("PatternAssetsProperty")} - ${W("ImageAssetsProperty")} - ${W("VideoAssetsProperty")} - -
          -
          -
          - ${W("CustomAssets")} -
          - ${this.$injectManager.getTargetUI("leftbar.tab").map(e=>{const{value:t}=e.class;return` -
          - ${this.$injectManager.generate(`leftbar.tab.${t}`)} -
          - `})} -
          -
          -
          - `}[ne("$header .tab-item:not(.extra-item)")](e){var t=e.$dt.attr("data-value");this.state.selectedIndexValue!==t&&(this.$el.$$(`[data-value="${this.state.selectedIndexValue}"]`).forEach(i=>i.removeClass("selected")),this.$el.$$(`[data-value="${t}"]`).forEach(i=>i.addClass("selected")),this.setState({selectedIndexValue:t},!1))}}class AU extends ge{template(){return` - - `}[ne()](){this.$config.toggle("show.left.panel")}}class RU extends ge{template(){return` - - `}[ne()](){this.$config.toggle("show.right.panel")}}class OU extends ge{get locales(){return Object.keys(this.$editor.i18n.locales)}template(){var e=this.locales.map(t=>{var i=this.$i18n(`app.lang.${t}`);return{text:i,value:t}});return` -
          -
          - ${W("SelectEditor",{ref:"$locale",options:e,value:this.$editor.locale,onchange:"changeLocale"})} - /> -
          -
          - `}[we("changeLocale")](e,t){this.$command.emit("setLocale",t)}}class zU extends ge{template(){var e=["all","css","svg"].map(t=>{var i=this.$i18n(`app.layout.${t}`);return{value:t,text:i}});return` -
          -
          - ${W("SelectEditor",{ref:"$locale",options:e,value:this.$editor.layout,onchange:"changeEditorLayoutValue"})} - - /> -
          -
          - `}[we("changeEditorLayoutValue")](e,t){this.$config.set("editor.layout.mode",t)}}class VU extends Tr{getIconString(){return"source"}getTitle(){return this.$i18n("menu.item.download.title")}clickButton(){this.$commands.emit("downloadJSON")}}class DU extends Tr{getIconString(){return"outline"}getTitle(){return"Outline"}isHideTitle(){return!0}clickButton(){this.$config.toggle("show.outline"),this.$commands.emit("addLayerView","select")}[qt("show.outline")](e){this.setSelected(e)}}class FU extends Tr{getIconString(){return"redo"}getTitle(){return"Redo"}isHideTitle(){return!0}clickButton(){this.$commands.emit("history.redo")}}class jU extends Tr{getIconString(){return"storage"}getTitle(){return this.$i18n("menu.item.save.title")}clickButton(){this.$commands.emit("saveJSON"),this.nextTick(()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)})}}class NU extends Tr{getIconString(){return"undo"}getTitle(){return"Undo"}isHideTitle(){return!0}clickButton(){this.$commands.emit("history.undo")}}class qb extends ge{initState(){return{items:[{type:"dropdown",style:{padding:"12px 0px 12px 12px"},icon:`
          `,items:[{title:"menu.item.fullscreen.title",command:"toggle.fullscreen",shortcut:"ALT+/"},{title:"menu.item.shortcuts.title",command:"showShortcutWindow"},"-",{title:"menu.item.export.title",command:"showExportView"},{title:"menu.item.export.title",command:"showEmbedEditorWindow"},{title:"menu.item.download.title",command:"downloadJSON"},{title:"menu.item.save.title",command:"saveJSON",nextTick:()=>{this.emit("notify","alert","Save","Save the content on localStorage",2e3)}},{title:"menu.item.language.title",items:[{title:"English",command:"setLocale",args:[Xa.EN],checked:e=>e.locale===Xa.EN},{title:"Fran\xE7ais",command:"setLocale",args:[Xa.FR],checked:e=>e.locale===Xa.FR},{title:"Korean",command:"setLocale",args:[Xa.KO],checked:e=>e.locale===Xa.KO}]},"-",{title:"EasyLogic Studio",items:[{type:"link",title:"Github",href:"https://github.com/easylogic/editor"},{type:"link",title:"Learn",href:"https://www.easylogic.studio"}]}]}]}}components(){return{ToolBarRenderer:xx,LayoutSelector:zU,LanguageSelector:OU,ThemeChanger:_x,Outline:DU,ExportView:bx,Download:VU,Save:jU,Undo:NU,Redo:FU,DropdownMenu:tm}}template(){return` -
          -
          - ${W("ToolBarRenderer",{items:this.state.items})} -
          -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.left")})} - ${this.$injectManager.generate("toolbar.left")} -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.center")})} - ${this.$injectManager.generate("toolbar.center")} -
          -
          - ${W("ToolBarRenderer",{items:this.$menu.getTargetMenu("toolbar.right")})} - ${this.$injectManager.generate("toolbar.right")} - ${W("ThemeChanger")} -
          -
          -
          - `}[qt("language.locale")](){this.refresh()}}class z0 extends ge{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` -
          -
          -
          - `}[H("drawAreaView")](e){this.refs.$dragAreaRect.css(e)}[H("initDrawAreaView")](){this.trigger("drawAreaView",{left:y.px(-1e4),top:y.px(0),width:y.px(0),height:y.px(0)})}[H("startDragAreaView")](){this.initMousePoint=this.$viewport.getWorldPosition(),this.dragRect={left:y.px(this.initMousePoint[0]),top:y.px(this.initMousePoint[1]),width:y.px(0),height:y.px(0)},this.trigger("drawAreaView",this.dragRect)}getSelectedItems(e,t){var i=this.$context.selection.currentProject;let r=[],s=[];return i&&(e.width===0&&e.height===0?r=[]:(i.layers.forEach(o=>{o.is("artboard")&&o.isIncludeByArea(t)?s.push(o):o.is("artboard")&&o.checkInArea(t)&&o.hasChildren()===!1?r.push(o):r.push.apply(r,o.checkInAreaForAll(t))}),r=r.filter(o=>o.isDragSelectable),r.length>1&&(r=r.filter(o=>o.is("artboard")===!1)))),s.length?s:r}[H("moveDragAreaView")](){const e=this.$config.get("bodyEvent"),t=this.$viewport.getWorldPosition(),i=Fn([],vt([],t,this.initMousePoint));e.shiftKey&&(i[1]=i[0]);const r=Fn([],this.initMousePoint),s=Fn([],bt([],this.initMousePoint,i)),a=this.$viewport.applyVertex(r),o=this.$viewport.applyVertex(s),l=xn([a,o]);this.dragRect={left:l[0][0],top:l[0][1],width:Math.abs(l[1][0]-l[0][0]),height:Math.abs(l[3][1]-l[0][1])},this.trigger("drawAreaView",{left:y.px(this.dragRect.left),top:y.px(this.dragRect.top),width:y.px(this.dragRect.width),height:y.px(this.dragRect.height)});var{left:c,top:h,width:d,height:u}=this.dragRect,p={x:c,y:h,width:d,height:u};const f=this.getSelectedItems(p,Tx([r,s]));this.$context.selection.selectByGroup(...f)}[H("endDragAreaView")](){const e=this.$viewport.getWorldPosition(),t=Fn([],vt([],e,this.initMousePoint));this.$config.init("set.move.control.point",!1),t[0]===0&&t[1]===0&&this.$context.selection.empty(),this.trigger("initDrawAreaView"),this.$context.selection.reselect(),this.$commands.emit("history.refreshSelection")}}class V0 extends ge{initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},html:""}}template(){return` -
          - `}checkSelectionArea(e){const t=this.$viewport.getWorldPosition(e);if(this.$context.selection.hasPoint(t))return!0}checkEditMode(e){if(this.$config.is("editing.mode",ki.HAND))return!1;const t=this.$context.shortcuts.getGeneratedKeyCode($o.space);if(this.$context.keyboardManager.check(t))return!1;const i=this.$viewport.getWorldPosition(e);return this.inSelection=!1,this.$context.selection.hasPoint(i)?(this.inSelection=!0,this.$context.selection.current.is("artboard")?this.$context.selection.current.hasChildren()?(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0):(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0),!0)):(this.mouseOverItem=this.$context.selection.filteredLayers[0],this.mouseOverItem?(this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!0)):(this.$config.init("set.dragarea.mode",!0),this.$config.init("set.move.mode",!1)),!0)}[Ke("$dragAreaView")+et("checkEditMode")+at("movePointer")+ct("moveEndPointer")](){this.$config.get("set.dragarea.mode")&&this.emit("startDragAreaView"),this.$config.set("editing.mode.itemType","select")}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear()}movePointer(){this.$config.get("set.dragarea.mode")&&this.emit("moveDragAreaView")}moveEndPointer(){this.$config.get("set.dragarea.mode")&&this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1),this.$config.init("set.move.mode",!1)}}class BU extends ge{template(){return` -
          - -
          - ${W("NumberInputEditor",{ref:"$scaleInput",min:10,max:240,step:1,key:"scale",value:this.$viewport.scale*100,onchange:this.subscribe((e,t)=>{this.$viewport.setScale(t/100),this.emit(ai),this.trigger(ai)},1e3)})} -
          - - - - - - ${this.$injectManager.generate("page.tools")} -
          - - `}[H(ai)](){const e=Math.floor(this.$viewport.scale*100);this.children.$scaleInput&&this.children.$scaleInput.setValue(e)}[ne("$plus")](){const e=this.$viewport.scale;this.$viewport.setScale(e+.01),this.emit(ai),this.trigger(ai)}[ne("$minus")](){const e=this.$viewport.scale;this.$viewport.setScale(e-.01),this.emit(ai),this.trigger(ai)}[ne("$center")](){this.$commands.emit("moveSelectionToCenter")}[ne("$ruler")](){this.$config.toggle("show.ruler")}[ne("$fullscreen")](){this.emit("bodypanel.toggle.fullscreen")}[ne("$buttons button")](e){const t=e.$dt.data("item-id"),i=e.$dt.data("path-index"),r=this.$editor.get(t);if(r.editablePath)this.$commands.emit("open.editor",r);else{const s=be.fromSVGString(r.absolutePath().d).toPathList();this.emit("showPathEditor","modify",{box:"canvas",current:r,matrix:r.matrix,d:s[i].d,changeEvent:a=>{s[i].reset(a.d);const o=r.invertPath(be.joinPathList(s).d).d;this.$commands.executeCommand("setAttribute","modify sub path",{[t]:r.updatePath(o)})}})}this.emit("hideSelectionToolView")}}const GU=[/\(/gi,/\)/gi],HU="grayscale,matrix,rotateZ,blur,sepia,linear-gradient,radial-gradient,conic-gradient,circle,inset,polygon,rgb".split(",").map(n=>new RegExp(n,"gi")),UU="butt,miter,start,at,black,repeat,lighten,multiply,solid,border-box,visible,absolute,relative,auto".split(",").map(n=>new RegExp(n,"gi"));function WU(n){return UU.forEach(e=>{n=n.replace(e,t=>`${t}`)}),HU.forEach(e=>{n=n.replace(e,t=>`${t}`)}),GU.forEach(e=>{n=n.replace(e,t=>`${t}`)}),n}function Sf(n){return n.split(";").filter(e=>e.trim()).map(e=>{e=e.trim();var[t,i]=e.split(":").map(r=>r.trim());return i===""?"":`
          ${t}: ${WU(i)};
          `}).join("").trim()}function XU(n){return n.replace(/;/gi,`; -`).trim()}var xh,zl;class YU{constructor(e){Pi(this,xh,void 0);Pi(this,zl,{});this.editor=e,Ti(this,xh,Po())}setRendererType(e,t){t.setRenderer(this),Mt(this,zl)[e]=t}get id(){return Mt(this,xh)}getDefaultRendererInstance(){return Mt(this,zl).rect}getRendererInstance(e){const t=Mt(this,zl)[e.itemType]||this.editor.getRendererInstance("html",e.itemType)||this.getDefaultRendererInstance()||e;return t.setRenderer(this),t}render(e){if(!e)return;const t=this.getRendererInstance(e);if(t)return t.render(e)}renderSVG(e){const t=this.getRendererInstance(e);return Ye(t.renderSVG)?t.renderSVG(e):this.getDefaultRendererInstance().renderSVG(e)}to(e,t){const i=this.getRendererInstance(t);if(Ye(i[e]))return i[e].call(i,t);const r=this.getDefaultRendererInstance();if(Ye(r[e]))return r[e].call(r,t)}toCSS(e,t={}){const i=this.to("toCSS",e);return Object.keys(t).forEach(r=>{delete i[r]}),i}toNestedCSS(e){return this.to("toNestedCSS",e)}toTransformCSS(e){return this.to("toTransformCSS",e)}toGridLayoutCSS(e){return this.to("toGridLayoutCSS",e)}toLayoutItemCSS(e){return this.to("toLayoutItemCSS",e)}toLayoutBaseModelCSS(e){return this.to("toLayoutBaseModelCSS",e)}toStyle(e){const t=this.getRendererInstance(e);return Ye(t.toStyle)?t.toStyle(e):this.getDefaultRendererInstance().toStyle(e)}toStyleData(e){const t=this.getRendererInstance(e);return Ye(t.toStyleData)?t.toStyleData(e):this.getDefaultRendererInstance().toStyleData(e)}toExportStyle(e){const t=this.getRendererInstance(e);return Ye(t.toExportStyle)?t.toExportStyle(e):this.getDefaultRendererInstance().toExportStyle(e)}update(e,t,i){const r=this.getRendererInstance(e);return Ye(r.update)?r.update(e,t,i):this.getDefaultRendererInstance().update(e,t,i)}codeview(e){if(!e)return"";const t=e.project;let i=XU(Sf(t?t.toKeyframeString():"")),r=t?Zt(t.toRootVariableCSS()):"";const s=e,a=Sf(s?Vv(Zt(this.toCSS(s))):""),o=s?this.toNestedCSS(s).map(c=>{var h=c.cssText?c.cssText:Zt(c.css);return`${c.selector} { - ${Sf(Vv(h))} - }`}):[],l=s?s.selectors:[];return` -
          - -${a&&`
          ${a}
          `} - -${o.map(c=>`
          ${c}
          `).join("")} - -${(l||[]).length?`
          - ${l.map(c=>`
          ${c.toPropertyString()}
          `).join("")} - -
          `:""} - -${i&&`
          ${i}
          `} - -${r?`
          - - 
          ${r}
          -
          `:""} - -
          - `}}xh=new WeakMap,zl=new WeakMap;class KU extends bp{render(e){var{id:t}=e;return`
          ${this.toDefString(e)}${e.layers.map(i=>this.renderer.render(i)).join("")}
          `}toBorderCSS(){return{}}}class ec extends Ra{update(e,t){this.updateElementCache(e,t),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const i=t.$("path");e.addCache("svgElement",i.parent().el),e.addCache("pathElement",i.el)}}updateDefString(e,t){var i=t.$("defs");if(i)i.updateSVGDiff(`${this.toDefInnerString(e)}`);else{var r=this.toDefString(e).trim();t.prepend(qe.createByHTML(r))}}toDefInnerString(e){return` - ${this.toFillSVG(e)} - ${this.toStrokeSVG(e)} - `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}cachedStroke(e){return e.computed("stroke",t=>e.isBooleanItem?ii.parseImage("transparent"):ii.parseImage(t||"black"))}cachedFill(e){return e.computed("fill",t=>e.isBooleanItem?ii.parseImage("transparent"):ii.parseImage(t||"black"))}toFillSVG(e){var i;const t=this.cachedFill(e);return(i=t==null?void 0:t.toSVGString)==null?void 0:i.call(t,this.fillId(e),e.contentBox)}toStrokeSVG(e){var i;const t=this.cachedStroke(e);return(i=t==null?void 0:t.toSVGString)==null?void 0:i.call(t,this.strokeId(e),e.contentBox)}toFillValue(e){var i;const t=this.cachedFill(e);return(i=t==null?void 0:t.toFillValue)==null?void 0:i.call(t,this.fillId(e))}toFillOpacityValue(e){return Si(e.fill||"transparent").a}toStrokeValue(e){var i;const t=this.cachedStroke(e);return(i=t==null?void 0:t.toFillValue)==null?void 0:i.call(t,this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}toDefaultCSS(e){var t;return Object.assign({},super.toDefaultCSS(e),{"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"stroke-dashoffset":e.strokeDashoffset,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}toSVGAttribute(e){return this.toDefaultCSS(e)}}class qU extends ec{toFillSVG(e){const t=e.layers;switch(e.booleanOperation){case ns.DIFFERENCE:return ii.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return ii.parseImage(t[0].fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){const t=e.layers;switch(e.booleanOperation){case ns.DIFFERENCE:return ii.parseImage(t[1].stroke||"transparent").toSVGString(this.strokeId(e))}return ii.parseImage(t[0].stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){var r,s;const t=e.layers;switch(e.booleanOperation){case ns.DIFFERENCE:return ii.parseImage(t[1].fill||"transparent").toSVGString(this.fillId(e))}return(s=(r=ii.parseImage(t[0].fill||"transparent")).toFillValue)==null?void 0:s.call(r,this.fillId(e))}toFillOpacityValue(e){return Si(e.fill||"transparent").a}toStrokeValue(e){var r,s,a,o;const t=e.layers;switch(e.booleanOperation){case ns.DIFFERENCE:return(s=(r=ii.parseImage(t[1].stroke||"transparent")).toFillValue)==null?void 0:s.call(r,this.strokeId(e))}return(o=(a=ii.parseImage(t[0].stroke||"black")).toFillValue)==null?void 0:o.call(a,this.strokeId(e))}update(e,t){if(!t)return;const i=t.$(`[data-boolean-path-id="${e.id}"]`);i&&(e.hasChangedField("changedChildren","d","boolean-operation","width","height")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}updateElementCache(e,t){if(e.getCache("element")!==t){e.addCache("element",t);const i=t.$(`[data-boolean-path-id="${e.id}"]`);e.addCache("svgElement",i.parent().el),e.addCache("pathElement",i.el)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
          - ${this.toDefString(e)} - ${e.layers.map(s=>this.renderer.render(s)).join("")} - - - -
          - `}}class ZU extends Ra{}class JU extends Ra{toNestedCSS(){return[{selector:"img",cssText:` - width: 100%; - height: 100%; - pointer-events: none; - `.trim()}]}getUrl(e){var{src:t}=e,i=e.project;return i.getImageValueById(t)||t}render(e){var{id:t}=e;return` -
          - ${this.toDefString(e)} - -
          `}update(e,t){const i=t==null?void 0:t.$("img");i&&i.attr("src",this.getUrl(e)),super.update(e,t)}}class QU extends bp{toRootVariableCSS(e){let t={};return e.rootVariable.split(";").filter(i=>i.trim()).forEach(i=>{var[r,s]=i.split(":");t[`--${r}`]=s}),t}toCSS(e){return Object.assign({},this.toRootVariableCSS(e))}toStyle(e){const t=e.toKeyframeString(),i=this.toRootVariableCSS(e);return` - - `}toExportStyle(e){const t=e.toKeyframeString(),i=this.toRootVariableCSS(e);return` - - `}render(e){return e.layers.map(t=>this.renderer.render(t)).join("")}renderSVG(){return""}}class eW extends Ra{}class Zb extends ec{update(e,t){if(!t)return;const i=t.$("path");i&&(e.hasChangedField("width","height","d")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap}),e.hasChangedField("stroke-dasharray")&&i.setAttrNS({"stroke-dasharray":e.strokeDasharray.join(" ")})),super.update(e,t)}render(e){var{id:t,name:i,itemType:r}=e;return` -
          - ${this.toDefString(e)} - - - -
          - `}}class tW extends Zb{update(e,t){if(!!t){var i=t.$("path");i&&e.hasChangedField("points","boundary")&&i.setAttrNS({d:e.d}),super.update(e,t)}}}class iW extends ec{update(e,t){if(!!t){var i=t.$("path");i&&(e.hasChangedField("width","height","count")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
          - ${this.toDefString(e)} - - - -
          - `}}class rW extends ec{update(e,t){if(!!t){var i=t.$("path");i&&(e.hasChangedField("width","height","count","radius","isCurve","tension")&&i.setAttrNS({d:e.d}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)}),e.hasChangedField("fill-rule")&&i.setAttrNS({"fill-rule":e.fillRule||"nonezero"}),e.hasChangedField("stroke-linejoin")&&i.setAttrNS({"stroke-linejoin":e.strokeLinejoin}),e.hasChangedField("stroke-linecap")&&i.setAttrNS({"stroke-linecap":e.strokeLinecap})),super.update(e,t)}}render(e){var{id:t,name:i,itemType:r}=e;return` -
          - ${this.toDefString(e)} - - - -
          - `}}class nW extends ec{update(e,t){var i=t.$("path.svg-path-item");i&&e.hasChangedField("width","height","d")&&i.attr("d",e.d);var r=t.$("path.guide");r&&e.hasChangedField("width","height","d")&&r.attr("d",e.d);var s=t.$("textPath");s&&(e.hasChangedField("text")&&s.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&s.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&s.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&s.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&s.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t),e.totalLength=i.totalLength}toDefInnerString(e){return` - ${this.toPathSVG(e)} - ${this.toFillSVG(e)} - ${this.toStrokeSVG(e)} - `}toPathId(e){return this.getInnerId(e,"path")}toPathSVG(e){return` - - `}render(e){var{id:t,textLength:i,lengthAdjust:r,startOffset:s}=e;const a=`#${this.toPathId(e)}`;return` - - ${this.toDefString(e)} - - ${e.text} - - - - - `}}class sW extends ec{update(e,t){var i=t.$("text");i&&(e.hasChangedField("text")&&i.text(e.text),e.hasChangedField("textLength","lengthAdjust","startOffset")&&i.setAttrNS({textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset}),e.hasChangedField("fill")&&i.setAttrNS({fill:this.toFillValue(e)}),e.hasChangedField("stroke")&&i.setAttrNS({stroke:this.toStrokeValue(e)}),e.hasChangedField("filter")&&i.setAttrNS({filter:this.toFilterValue(e)})),super.update(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{id:t,textLength:i,lengthAdjust:r}=e;return` - - ${this.toDefString(e)} - ${e.text} - `}}class aW{static compile(e,t=[]){return e}}const D0={dom:aW};class Jb{static compile(e,t,i=[]){return(D0[e]||D0.dom).compile(t,i)}}class oW extends Ra{update(e,t){if(e.hasChangedField("x","y","width","height")===!1){const i=this.compile(e);let r=t.$(".inner-html");r&&r.updateDiff(i)}super.update(e,t)}compile(e){return Jb.compile("dom",e.template,e.params)}render(e){var{id:t}=e;const i=this.compile(e);return` -
          - ${this.toDefString(e)} - -
          - ${i} -
          -
          `}}class lW extends Ra{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",e.overflow!==Ic.SCROLL&&e.content.length>0&&(t.height="auto"),t}update(e,t){const i=t==null?void 0:t.$(".text-content");if(i){var{content:r}=e;i.updateDiff(r)}super.update(e,t)}render(e){var{id:t,content:i}=e;return` -
          - ${this.toDefString(e)} -
          ${i}
          -
          - `}}class cW extends Ra{toNestedCSS(){return[{selector:"video",cssText:` - width: 100%; - height: 100%; - pointer-events: none; - `.trim()}]}getUrl(e){var{src:t}=e,i=e.project;return i.getVideoValueById(t)}render(e){var{id:t,controls:i,muted:r,poster:s,loop:a,crossorigin:o,autoplay:l}=e;return` -
          - ${this.toDefString(e)} - -
          `}update(e,t){const{currentTime:i,playbackRate:r,volume:s}=e,a=t.$("video");a&&a.setProp({currentTime:i,playbackRate:r,volume:s}),super.update(e,t)}}function hW(n){const e=new YU(n);e.setRendererType("project",new QU),e.setRendererType("artboard",new KU),e.setRendererType("rect",new eW),e.setRendererType("circle",new ZU),e.setRendererType("image",new JU),e.setRendererType("text",new lW),e.setRendererType("video",new cW),e.setRendererType("boolean-path",new qU),e.setRendererType("svg-path",new Zb),e.setRendererType("polygon",new iW),e.setRendererType("star",new rW),e.setRendererType("spline",new tW),e.setRendererType("svg-text",new sW),e.setRendererType("svg-textpath",new nW),e.setRendererType("template",new oW),n.registerRendererType("html",e)}class dW{constructor(e){this.editor=e}getDefaultRendererInstance(){return this.editor.getRendererInstance("svg","rect")}getRendererInstance(e){return this.editor.getRendererInstance("svg",e.itemType)||this.getDefaultRendererInstance()||e}render(e,t){if(!e)return"";const i=this.getRendererInstance(e);if(i)return i.render(e,t||this)}toCSS(e){const t=this.getRendererInstance(e);if(t)return t.toCSS(e)}toTransformCSS(e){const t=this.getRendererInstance(e);if(t)return t.toTransformCSS(e)}toStyle(e,t){const i=this.getRendererInstance(e);if(i)return i.toStyle(e,t||this)}update(e,t){const i=this.getRendererInstance(e);if(i)return i.update(e,t)}codeview(e){if(!e)return"";let t=this.render(e);return t=t.replace(//g,">"),` -
          -${t&&`
          ${t}
          `} -
          - `}}class Tm extends bp{toDefaultCSS(e){return{overflow:"visible","background-color":e.backgroundColor,color:e.color,"font-size":e.fontSize,"font-weight":e.fontWeight,"font-style":e.fontStyle,"font-family":e.fontFamily,"text-align":e.textAlign,"text-decoration":e.textDecoration,"text-transform":e.textTransform,"letter-spacing":e.letterSpacing,"word-spacing":e.wordSpacing,"line-height":e.lineHeight,"text-indent":e.textIndent,"text-shadow":e.textShadow,"text-overflow":e.textOverflow,"text-wrap":e.textWrap,"z-index":e.zIndex,opacity:e.opacity,"mix-blend-mode":e.mixBlendMode,"transform-origin":e.transformOrigin,"border-radius":e.borderRadius,filter:e.filter,"backdrop-filter":e.backdropFilter,"box-shadow":e.boxShadow,animation:e.animation,transition:e.transition}}toCSS(e){const t=Object.assign({},this.toVariableCSS(e),this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toTransformCSS(e),this.toLayoutItemCSS(e),this.toBorderCSS(e),this.toBackgroundImageCSS(e),this.toLayoutCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}toSVGAttribute(e){var t;return ze(P({},this.toDefaultCSS(e)),{strokeWidth:e.strokeWidth,"fill-opacity":e.fillOpacity,"fill-rule":e.fillRule,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,"text-anchor":e.textAnchor,"stroke-dasharray":(t=e.strokeDasharray)==null?void 0:t.join(" ")})}wrappedRender(e,t){const{id:i,x:r,y:s,width:a,height:o,itemType:l}=e;return` - - - ${this.toDefString(e)} - ${Ye(t)&&t()} - - `}render(e,t){const{width:i,height:r,elementType:s}=e,a=s||"div";let o=this.toCSS(e);return this.wrappedRender(e,()=>` - - <${a} xmlns="http://www.w3.org/1999/xhtml" style="${Zt(o)};width:100%;height:100%;"> - -${e.layers.map(l=>t.render(l,t)).join("")} - `)}}class uW extends Tm{toCSS(e){const t=Object.assign({},this.toDefaultCSS(e),this.toClipPathCSS(e),this.toWebkitCSS(e),this.toTextClipCSS(e),this.toBackgroundImageCSS(e));return delete t.left,delete t.top,delete t.width,delete t.height,delete t.position,t}render(e,t,i=!0){const{width:r,height:s}=e;let a=this.toCSS(e);return` -${i?'':""} - - ${this.toDefString(e)} - ${e.layers.map(o=>t.render(o,t)).join("")} - - `}}class Oa extends Tm{}class Do extends Oa{updateDefString(e,t){var i=t.$("defs");if(i)i.html(this.toDefInnerString(e));else{var r=this.toDefString(e).trim();t.prepend(qe.createByHTML(r))}}toDefInnerString(e){return` - ${this.toFillSVG(e)} - ${this.toStrokeSVG(e)} - `}toDefString(e){return` - - ${this.toDefInnerString(e).trim()} - - `}fillId(e){return this.getInnerId(e,"fill")}strokeId(e){return this.getInnerId(e,"stroke")}toFillSVG(e){return ii.parseImage(e.fill||"transparent").toSVGString(this.fillId(e))}toStrokeSVG(e){return ii.parseImage(e.stroke||"black").toSVGString(this.strokeId(e))}toFillValue(e){return ii.parseImage(e.fill||"transparent").toFillValue(this.fillId(e))}toFillOpacityValue(e){return Si(e.fill||"transparent").a}toStrokeValue(e){return ii.parseImage(e.stroke||"black").toFillValue(this.strokeId(e))}toFilterValue(e){return e.svgfilter?`url(#${e.svgfilter})`:""}toLayoutCSS(){return{}}}class pW extends Do{update(e,t){if(!t)return;const i=t.$(`[data-boolean-path-id="${e.id}"]`);i&&(i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=i.totalLength),this.updateDefString(e,t)}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class fW extends Oa{}class gW extends Oa{update(e,t){let i=t.$("iframe");i&&i.attr("src",e.url||"about:blank"),super.update(e,t)}render(e){const{width:t,height:i,url:r="about:blank"}=e;let s=this.toCSS(e);return this.wrappedRender(e,()=>` - - - - `)}}class mW extends Oa{getUrl(e){var{src:t}=e,i=e.project;return i.getImageValueById(t)}render(e){const{width:t,height:i}=e;let r=this.toCSS(e);return this.wrappedRender(e,()=>` - -
          - -
          -           - `)}update(e,t){const i=t.$("img");i&&i.attr("src",this.getUrl(e)),super.update(e,t)}}class vW extends Tm{render(e,t){return e.artboards.map(i=>t.render(i,t))}}class yW extends Oa{}class xW extends Do{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class bW extends Do{update(e,t){if(!!t){var i=t.$("path");i&&(i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),e.totalLength=i.totalLength),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class _W extends Do{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class SW extends Do{update(e,t){if(!!t){var i=t.$("path");i&&i.setAttr({d:e.d,filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e)}),this.updateDefString(e,t)}}render(e){var{d:t}=e;return this.wrappedRender(e,()=>` - - `)}}class wW extends Do{update(e,t){var i=t.$("path");i&&i.attr("d",e.d);var r=t.$("textPath");r&&(r.text(e.text),r.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust,startOffset:e.startOffset})),this.updateDefString(e,t),e.totalLength=i.totalLength}toDefInnerString(e){return` - ${this.toPathSVG(e)} - ${this.toFillSVG(e)} - ${this.toStrokeSVG(e)} - `}toPathId(e){return this.getInnerId(e,"path")}toPathSVG(e){return` - - `}render(e){return this.wrappedRender(e,()=>{const{textLength:t,lengthAdjust:i,startOffset:r}=e;return` - ${e.text} - `})}}class MW extends Do{update(e,t){var i=t.$("text");i&&(i.text(e.text),i.setAttr({filter:this.toFilterValue(e),fill:this.toFillValue(e),stroke:this.toStrokeValue(e),textLength:e.textLength,lengthAdjust:e.lengthAdjust})),this.updateDefString(e,t)}shapeInsideId(e){return this.getInnerId(e,"shape-inside")}render(e){var{textLength:t,lengthAdjust:i}=e;return this.wrappedRender(e,()=>` - ${e.text} - `)}}class $W extends Oa{update(e,t){const i=this.compile(e);let r=t.$(".inner-html");r&&r.updateDiff(i),super.update(e,t)}compile(e){return Jb.compile("dom",e.template,e.params)}render(e){const{id:t,width:i,height:r}=e,s=this.compile(e);return this.wrappedRender(e,()=>` - -
          - -
          - ${s} -
          -
          -           - `)}}class PW extends Oa{toCSS(e){let t=super.toCSS(e);return t.margin=t.margin||"0px",t.height="auto",t}render(e){const{content:t,width:i,height:r}=e;let s=this.toCSS(e);return this.wrappedRender(e,()=>` - -

          ${t}

          -           - `)}update(e,t){var{content:i}=e;t.updateDiff(i)}}class TW extends Oa{getUrl(e){var{src:t}=e,i=e.project;return i.getVideoValueById(t)}render(e){var{width:t,height:i,controls:r,muted:s,poster:a,loop:o,crossorigin:l,autoplay:c}=e;let h=this.toCSS(e);return this.wrappedRender(e,()=>` - - - - `)}}function CW(n){n.registerRendererType("svg",new dW(n)),n.registerRenderer("svg","project",new vW),n.registerRenderer("svg","artboard",new uW),n.registerRenderer("svg","rect",new yW),n.registerRenderer("svg","circle",new fW),n.registerRenderer("svg","image",new mW),n.registerRenderer("svg","template",new $W),n.registerRenderer("svg","iframe",new gW),n.registerRenderer("svg","video",new TW),n.registerRenderer("svg","text",new PW),n.registerRenderer("svg","boolean-path",new pW),n.registerRenderer("svg","svg-path",new bW),n.registerRenderer("svg","polygon",new _W),n.registerRenderer("svg","star",new SW),n.registerRenderer("svg","spline",new xW),n.registerRenderer("svg","svg-text",new MW),n.registerRenderer("svg","svg-textpath",new wW)}class F0 extends ge{initialize(){super.initialize(),hW(this.$editor),CW(this.$editor),this.renderer=this.$editor.renderer("html")}initState(){return{mode:"selection",x:0,y:0,width:1e4,height:1e4,cachedCurrentElement:{},doubleClickTime:0}}template(){return`
          -
          - ${this.$injectManager.generate("render.view")} -
          `}[Me("$view")](){const{translate:e,transformOrigin:t,scale:i}=this.$viewport,r=`translate(${e[0]}px, ${e[1]}px) scale(${i||1})`;return{style:{"transform-origin":`${t[0]}px ${t[1]}px`,transform:r}}}[qt("show.outline")](){this.refs.$view.attr("data-outline",this.$config.get("show.outline"))}[qt("bodyEvent")](){const e=this.$config.get("bodyEvent");e.buttons===0&&qe.create(e.target).hasClass("elf--drag-area-view")&&this.$commands.emit("recoverCursor")}[H("refElement")](e,t){Ye(t)&&t(this.getElement(e))}[H(Ki)](e){this.refreshSelectionStyleView(e)}[H(ai)](){this.bindData("$view")}[H("refreshAllElementBoundSize")](){this.refreshAllElementBoundSize()}[H("refreshElementBoundSize")](e){this.refreshElementBoundSize(e)}[H("updateAllCanvas")](e){this.updateAllCanvas(e)}[H("refreshAllCanvas")](){this.refreshAllCanvas()}[H("playTimeline","moveTimeline")](){var t=this.$context.selection.currentProject.getSelectedTimeline();t&&t.animations.map(i=>this.$model.get(i.id)).forEach(i=>{this.updateTimelineElement(i,!0,!1)})}clearElementAll(){this.state.cachedCurrentElement={}}clearElement(e){this.state.cachedCurrentElement[e]=void 0}getElement(e){return this.state.cachedCurrentElement[e]||(this.state.cachedCurrentElement[e]=this.refs.$view.$(`[data-id="${e}"]`)),this.state.cachedCurrentElement[e]}[wo("$view .element-item.text .text-content")](e){e.$dt.removeAttr("contenteditable"),e.$dt.removeClass("focused"),this.$context.commands.emit("pop.mode.view","TextEditorView"),this.$context.commands.emit("recoverCursor")}[Ar("$view .element-item.text .text-content")](e){var t=e.$dt.html(),i=e.$dt.text().trim(),r=e.$dt.parent().attr("data-id"),s=[];this.$context.selection.items.filter(a=>a.id===r).forEach(a=>{a.reset({content:t,text:i}),s.push({id:a.id,content:t,text:i}),this.$commands.emit("setAttribute",{[a.id]:{content:t,text:i}})}),this.emit("refreshContent",s)}checkEditMode(e){if(this.state.hasDoubleClick=!1,window.performance.now()-this.state.doubleClickTime{console.log("console.log","yellow")}}],x:e.clientX,y:e.clientY,id:r})}[Ke("$view")+et("checkEditMode")+at("calculateMovedElement")+Eu("calculateFirstMovedElement")+ct("calculateEndedElement")](e){if(this.initMousePoint=this.$viewport.getWorldPosition(e),this.$config.init("set.move.control.point",!0),this.$config.set("editing.mode.itemType","select"),this.$config.get("set.dragarea.mode")){this.emit("startDragAreaView");return}let t=this.$context.selection.hasPoint(this.initMousePoint);const i=qe.create(e.target);if(i.hasClass("canvas-view"))return this.$context.selection.select(),this.initializeDragSelection(),!1;const r=i.closest("element-item");var s=r&&r.attr("data-id");if(e.altKey)t||this.$context.selection.check({id:s})===!1&&this.$context.selection.selectByGroup(s),this.$context.selection.isEmpty===!1&&(this.$commands.emit("history.copyLayer","copy"),this.emit("refreshLayerTreeView"),this.initializeDragSelection());else{if(!t){if(e.shiftKey)this.$context.selection.toggleById(s);else if(this.$context.selection.check({id:s})===!1){const a=this.$model.get(s);a&&a.is("artboard")&&a.hasChildren()||(a.hasChildren()?this.$context.selection.selectByGroup(s):this.$context.selection.selectByGroup(s))}}this.initializeDragSelection()}}initializeDragSelection(){this.$context.selection.reselect(),this.$context.snapManager.clear(),this.emit("startGhostToolView")}calculateFirstMovedElement(){this.emit("hideSelectionToolView"),this.emit("moveFirstGhostToolView")}calculateMovedElement(){if(this.$config.get("set.dragarea.mode")){this.emit("moveDragAreaView");return}const e=this.$viewport.getWorldPosition();if(this.emit("moveGhostToolView"),this.$context.selection.isLayoutItem)return;const t=Fn([],vt([],e,this.initMousePoint));this.moveTo(t),this.$context.selection.changeInLayoutArea(this.$viewport.applyVertexInverse(e))&&(this.initMousePoint=e,this.$context.selection.reselect(),this.$context.snapManager.clear(),this.refreshAllCanvas(),this.emit("refreshLayerTreeView")),this.$commands.emit("setAttribute",this.$context.selection.pack("x","y"))}moveTo(e){const t=this.$context.snapManager.check(this.$context.selection.cachedRectVerties.map(s=>bt([],s,e)),3/this.$viewport.scale),i=bt([],t.dist,e),r={};this.$context.selection.cachedItemMatrices.forEach(s=>{const a=s.verties[4],o=bt([],a,i),l=vt([],Wt([],o,s.parentMatrixInverse),Wt([],a,s.parentMatrixInverse));this.$context.selection.isOne?r[s.id]={x:Math.round(s.x+l[0]),y:Math.round(s.y+l[1])}:r[s.id]={x:s.x+l[0],y:s.y+l[1]}}),this.$context.selection.reset(r)}calculateEndedElement(e,t){if(this.state.hasDoubleClick){this.state.doubleClickTime=window.performance.now();return}const i=this.$viewport.getWorldPosition(),r=Fe(i,this.initMousePoint);this.$config.init("set.move.control.point",!1);const s=Math.abs(e)>.5||Math.abs(t)>.5;if(this.emit("endGhostToolView",s),this.$config.get("set.dragarea.mode")){this.emit("endDragAreaView"),this.$config.init("set.dragarea.mode",!1);return}r<1||(this.$context.selection.reselect(),this.$context.snapManager.clear(),this.$commands.executeCommand("setAttribute","move item",this.$context.selection.pack("x","y")),this.nextTick(()=>{this.$commands.emit("recoverBooleanPath")})),this.$config.set("editing.mode.itemType","select"),this.$commands.emit("history.refreshSelection"),this.emit(Mo)}refreshSelectionStyleView(e){let t=[];e?Ni(e)?t=e:t=[e]:t=this.$context.selection.items,t.forEach(i=>{this.updateElement(i)})}updateElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}updateTimelineElement(e){e&&this.renderer.update(e,this.getElement(e.id),this.$editor)}refreshAllCanvas(){this.clearElementAll();const e=this.$context.selection.currentProject,t=this.renderer.render(e,null,this.$editor)||"";this.refs.$view.updateDiff(t,void 0,{checkPassed:(i,r)=>i.getAttribute("data-id")===r.getAttribute("data-id")}),this.updateAllCanvas(e)}updateAllCanvas(e){e==null||e.layers.forEach(t=>{this.updateElement(t,this.getElement(t.id)),this.updateAllCanvas(t)})}refreshAllElementBoundSize(){var e=this.$context.selection.items.map(i=>i.is("artboard")?i:i.parent),t=[...new Set(e)];t.length?t.forEach(i=>{this.refreshElementBoundSize(i)}):this.$context.selection.currentProject.artboards.forEach(i=>{this.refreshElementBoundSize(i)})}refreshElementRect(e){var t=this.getElement(e.id);if(!t)return;let i=t.offsetRect();i.width===0||i.height===0||(e.reset(i),this.refreshSelectionStyleView(e),this.$context.selection.check(e)&&this.emit(Mo))}refreshElementBoundSize(e){e&&(this.refreshElementRect(e),e.layers.forEach(t=>{this.refreshElementBoundSize(t)}))}}class Qb extends ge{components(){return{PageTools:BU,DragAreaRectView:z0,HTMLRenderView:F0,DragAreaView:V0}}initState(){return{cursor:"auto",cursorArgs:[]}}afterRender(){this.nextTick(()=>{this.refreshCanvasSize(),this.$commands.emit("moveSelectionToCenter",!0),this.refreshCursor()})}template(){return V("div",{class:"elf--page-container",tabIndex:"-1",ref:"$container"},V("div",{class:"page-view",ref:"$pageView"},V("div",{class:"page-lock scrollbar",ref:"$lock"},V(V0,{ref:"$dragArea"}),V(F0,{ref:"$htmlRenderView"}),V(z0,{ref:"$dragAreaRectView"}),this.$injectManager.generate("canvas.view",!0))),"$",W("PageTools",{ref:"pageTools"}))}[Me("$pageView")](){return{style:{"--elf--canvas-background-color":this.$config.get("style.canvas.background.color")}}}checkSpace(){return this.$config.is("editing.mode",ki.HAND)?!0:this.$context.keyboardManager.check(this.$context.shortcuts.getGeneratedKeyCode($o.space))}[Ke("$lock")+et("checkSpace")+at("movePan")+ct("moveEndPan")](){this.startMovePan()}[qt("editing.mode")](){this.$config.is("editing.mode",ki.HAND)?(this.startMovePan(),this.$commands.emit("refreshCursor","grab")):this.$commands.emit("recoverCursor","auto")}startMovePan(){this.lastDist=ls()}movePan(e,t){this.$commands.emit("refreshCursor","grabbing");const i=Pt(e,t,0);this.$viewport.pan(...Wt([],vt([],this.lastDist,i),this.$viewport.scaleMatrixInverse)),this.lastDist=i}refreshCursor(){this.$config.is("editing.mode",ki.HAND)?this.$commands.emit("refreshCursor","grab"):this.$commands.emit("refreshCursor","auto")}moveEndPan(){this.refreshCursor()}[an("$lock")+wt](){}[sn("$lock")+wt](e){const t=this.$viewport.getWorldPosition(e);if(e.dataTransfer.getData("text/asset"))this.$commands.emit("drop.asset",{asset:{id:e.dataTransfer.getData("text/asset"),center:t}});else{const i=qe.create(e.target).attr("data-id");if(i)this.$commands.emit("drop.asset",{gradient:e.dataTransfer.getData("text/gradient"),pattern:e.dataTransfer.getData("text/pattern"),color:e.dataTransfer.getData("text/color"),imageUrl:e.dataTransfer.getData("image/info")},i);else{const r=e.dataTransfer.getData("image/info");this.$commands.emit("dropImageUrl",r)}}}[K1("$lock")+wt](e){const[t,i]=Z1(e);if(!this.state.gesture)e.ctrlKey&&this.$viewport.setMousePoint(e.clientX,e.clientY),this.emit("startGesture"),this.state.gesture=!0;else if(e.ctrlKey){const r=1-2.5*i/100;this.$viewport.zoom(r)}else{const r=-2.5*t,s=-2.5*i;this.$viewport.pan(-r/this.$viewport.scale,-s/this.$viewport.scale,0)}window.clearTimeout(this.state.timer),this.state.timer=window.setTimeout(()=>{this.state.gesture=void 0,this.emit("endGesture")},200)}refreshCanvasSize(){this.$viewport.refreshCanvasSize(this.refs.$lock.rect())}[H(Oo,yn)](){this.refreshCanvasSize()}[H(ai)](){this.$commands.emit("refreshCursor","auto")}}let Ss=[];class e_ extends ge{template(){return` -
          -
          - - - -
          -
          -
          -
          -
          -
          -
          - `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}makeLine(e,t,i,r,s,a,o=3,l=30,c=10){let h=i-i%t,d=r+r%t;const u=(h-i)/s*a,p=(h+t-i)/s*a;if(!(Math.abs(p-u)${u}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const i=t.verties,{minX:r,width:s}=this.$viewport,a=this.state.rect.width,o=(i[0][0]-r)/s*a,l=(i[2][0]-r)/s*a;return` - M ${o} 20 - L ${o} 30 - L ${l} 30 - L ${l} 20 - Z - `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const i=this.$context.selection.verties.map(d=>d[0]),r=Math.min.apply(Math,i),s=Math.max.apply(Math,i),{minX:a,width:o}=this.$viewport,l=this.state.rect.width,c=(r-a)/o*l,h=(s-a)/o*l;return` - M ${c} 0 - L ${c} 20 - L ${h} 20 - L ${h} 0 - Z - `}makeRuler(){const{minX:e,maxX:t,width:i}=this.$viewport,r=this.state.rect.width;return Ss=[],this.makeLine(Ss,1e3,e,t,i,r,10,24,1e4),this.makeLine(Ss,200,e,t,i,r,10,20,5e3),this.makeLine(Ss,100,e,t,i,r,10,20,200),this.makeLine(Ss,50,e,t,i,r,10,20,100),this.makeLine(Ss,10,e,t,i,r,10,18,50),this.makeLine(Ss,5,e,t,i,r,10,15,10),this.makeLine(Ss,1,e,t,i,r,10,13,10),Ss.join("")}makeRulerText(){const{minX:e,maxX:t,width:i}=this.$viewport,r=this.state.rect.width,s=Math.abs(t-e);return[s>3e3?this.makeLineText(3e3,e,t,i,r,24):"",2e3${this.makeRulerText()}`}[me("$lines")+It](){return this.initializeRect(),`${this.$config.get("horizontal.line").map(t=>{const i=this.$viewport.applyVertex([t,0,0]);return``}).join("")}`}[Me("$rulerLines")](){return{d:this.makeRulerForCurrent()}}makeRulerCursor(){const e=this.$viewport.getWorldPosition(),{minX:t,width:i}=this.$viewport;this.initializeRect();const r=this.state.rect.width,s=e[0]-t,a=s===0?0:s/i*r;return`M ${a-.5} 0 L ${a-.5} 20`}[Me("$cursor")](){const e=this.$viewport.getWorldPosition(),{minX:t,width:i}=this.$viewport;this.initializeRect();const r=this.state.rect.width,s=e[0]-t;return{cssText:` - --elf--horizontal-cursor-position: ${s===0?0:s/i*r}px; - `}}[W1()](){this.$commands.emit("refreshCursor","ns-resize")}[Ke()+at()+ct()](){const e=Ta([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("vertical.line",e[1]),this.$config.init("vertical.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minY -
          - - - -
          -
          -
          -
          -
          -
          -
          - `}afterRender(){this.refreshCanvasSize()}refreshCanvasSize(){this.state.rect=this.$el.rect()}initializeRect(){(!this.state.rect||this.state.rect.width==0)&&(this.state.rect=this.$el.rect())}[W1()](){this.$commands.emit("refreshCursor","ew-resize")}[a2()](){this.$commands.emit("recoverCursor")}[Ke()+at()+ct()](){const e=Ta([],this.$viewport.getWorldPosition());this.startIndex=this.$config.push("horizontal.line",e[0]),this.$config.init("horizontal.line.selected.index",this.startIndex),this.$context.snapManager.clear()}move(){const e=this.$context.snapManager.getWorldPosition();this.$viewport.minX${u}`}return o.join("")}}makeRulerForCurrentArtboard(){const e=this.$context.selection.current;if(!e)return"";const t=e.artboard;if(!t)return"";const i=t.verties,{minY:r,height:s}=this.$viewport,a=this.state.rect.height,o=(i[0][1]-r)/s*a,l=(i[2][1]-r)/s*a;return` - M 20 ${o} - L 30 ${o} - L 30 ${l} - L 20 ${l} - Z - `}makeRulerForCurrent(){if(!this.$context.selection.current)return"";const{minY:t,height:i}=this.$viewport,r=this.state.rect.height,a=this.$context.selection.verties.map(d=>d[1]),o=Math.min.apply(Math,a),l=Math.max.apply(Math,a),c=(o-t)/i*r,h=(l-t)/i*r;return` - M 0 ${c} - L 20 ${c} - L 20 ${h} - L 0 ${h} - Z - `}makeRuler(){const{minY:e,maxY:t,height:i}=this.$viewport,r=this.state.rect.height;return ws=[],this.makeLine(ws,1e3,e,t,i,r,10,20,1e4),this.makeLine(ws,200,e,t,i,r,10,16,5e3),this.makeLine(ws,100,e,t,i,r,10,18,200),this.makeLine(ws,50,e,t,i,r,10,18,100),this.makeLine(ws,10,e,t,i,r,10,18,50),this.makeLine(ws,5,e,t,i,r,10,15,10),this.makeLine(ws,1,e,t,i,r,10,14,5),ws.join("")}makeRulerText(){const{minY:e,maxY:t,height:i}=this.$viewport,r=this.state.rect.height,s=Math.abs(t-e);return[s>3e3?this.makeLineText(3e3,e,t,i,r,24):"",2e3${this.makeRulerText()}`}[me("$lines")+It](){return this.initializeRect(),` - ${this.$config.get("vertical.line").map(t=>{const i=this.$viewport.applyVertex([0,t,0]);return``}).join("")} - `}[Me("$rulerLines")](){return{d:this.makeRulerForCurrent()}}[Me("$cursor")](){const e=this.$viewport.getWorldPosition(),{minY:t,height:i}=this.$viewport;this.initializeRect();const r=this.state.rect.height,s=e[1]-t;return{cssText:` - --elf--vertical-cursor-position: ${s===0?0:s/i*r}px; - `}}refresh(){this.$config.get("show.ruler")&&this.load()}[H(Ki)+Vl(10)](){const e=this.$context.selection.current;e&&e.changedRect&&this.refresh()}[H(ai,Lt)](){this.refresh()}[H(Oo,yn)](){this.refreshCanvasSize()}[qt("onMouseMovepageContainer")](){this.bindData("$cursor"),this.bindData("$rulerLines")}[qt("vertical.line")](){this.load("$lines")}}class EW extends ge{components(){return{CanvasView:Qb,VerticalRuler:t_,HorizontalRuler:e_,PageSubEditor:Zg}}template(){return` -
          -
          - ${W("PageSubEditor",{ref:"subeditor"})} -
          -
          - ${W("HorizontalRuler",{ref:"hruler"})} - ${W("VerticalRuler",{ref:"vruler"})} -
          - ${W("CanvasView",{ref:"canvas"})} -
          - -
          -
          - `}[Me("$el")](){return{class:`elf--body-panel ${this.$config.get("show.ruler")?"ruler":""}`}}[qt("show.ruler")](){this.refresh()}[H("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[Me("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}class IW extends ge{template(){return V("div",{class:"elf--context-menu-manger"},this.$injectManager.generate("context.menu"))}[H(hx)](e){this.$context.config.set("context.menu.open",e)}}class LW extends Gh{initialize(){super.initialize(),this.$context.pathkit.load()}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.$commands.emit("load.json",this.opt.data)}getManagers(){return{snapManager:Qx,selection:Jx,segmentSelection:Zx,timeline:iV,history:Wx,modelManager:Yx,lockManager:Xx,visibleManager:eb,clipboard:Ux,pathkit:qx}}components(){return{LayerTab:Kb,ToolBar:qb,Inspector:CU,BodyPanel:EW,PopupManager:Hh,KeyboardManager:Bh,IconManager:Nh,SwitchLeftPanel:AU,SwitchRightPanel:RU,ContextMenuManager:IW}}getPlugins(){return TU}initState(){return{leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
          -
          -
          - ${W("ToolBar")} -
          -
          -
          - ${W("BodyPanel",{ref:"$bodyPanelView"})} -
          -
          - ${W("LayerTab")} -
          -
          - ${W("Inspector")} -
          -
          -
          - ${W("KeyboardManager")} -
          - ${W("PopupManager")} - ${W("IconManager")} - ${W("ContextMenuManager")} -
          - `}[Me("$el")](){return{"data-design-mode":this.$config.get("editor.design.mode")}}[Me("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[Me("$leftArrow")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[Me("$leftPanel")](){let e="0px",t=this.state.leftSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=`-${this.state.leftSize}px`),{style:{left:e,width:t,bottom:i}}}[Me("$rightPanel")](){let e=0,t=this.state.bottomSize;return this.$config.false("show.right.panel")&&(e=-this.state.rightSize),{style:{right:e,bottom:t}}}[Me("$rightArrow")](){let e=6,t=this.state.bottomSize;return this.$config.true("show.right.panel")&&(e=this.state.rightSize+6),{style:{right:e,bottom:t}}}[Me("$bodyPanel")](){let e=this.state.leftSize,t=this.state.rightSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=0),this.$config.false("show.right.panel")&&(t=0),{style:{left:e,right:t,bottom:i}}}[Ke("$splitter")+at("moveSplitter")+ct("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$el"),this.bindData("$splitter"),this.bindData("$headerPanel"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.bindData("$toggleRightButton"),this.bindData("$toggleLeftButton"),this.bindData("$bodyPanel"),this.bindData("$footerPanel"),this.emit("resizeEditor")}[qt("show.left.panel")](){this.refresh(),this.nextTick(()=>{this.emit(yn),this.$config.init("editor.layout.elements",this.refs)})}[qt("show.right.panel")](){this.refresh(),this.nextTick(()=>{this.emit(yn),this.$config.init("editor.layout.elements",this.refs)})}[qt("editor.design.mode")](){this.bindData("$el")}[an("$middle")+wt](){}[sn("$middle")+wt](){}[H("toggle.fullscreen")](){this.$el.toggleFullscreen()}[H("getLayoutElement")](e){Ye(e)&&e(this.refs)}[H(Oo,yn)](){this.$config.init("editor.layout.elements",this.refs)}}/** - * @license - * Copyright 2010-2022 Three.js Authors - * SPDX-License-Identifier: MIT - */const Cm="139",qo={LEFT:0,MIDDLE:1,RIGHT:2,ROTATE:0,DOLLY:1,PAN:2},Zo={ROTATE:0,PAN:1,DOLLY_PAN:2,DOLLY_ROTATE:3},kW=0,j0=1,AW=2,i_=1,RW=2,kc=3,Qc=0,Un=1,Co=2,r_=1,wa=0,El=1,N0=2,B0=3,G0=4,OW=5,vl=100,zW=101,VW=102,H0=103,U0=104,DW=200,FW=201,jW=202,NW=203,n_=204,s_=205,BW=206,GW=207,HW=208,UW=209,WW=210,XW=0,a_=1,YW=2,Ag=3,KW=4,qW=5,ZW=6,JW=7,_p=0,QW=1,eX=2,Ds=0,tX=1,iX=2,rX=3,nX=4,sX=5,Em=300,Eo=301,Io=302,Au=303,Ru=304,td=306,Ou=1e3,gn=1001,zu=1002,lr=1003,Rg=1004,Og=1005,jr=1006,o_=1007,id=1008,Lo=1009,aX=1010,oX=1011,eh=1012,lX=1013,_u=1014,va=1015,Il=1016,cX=1017,hX=1018,Ll=1020,dX=1021,uX=1022,mn=1023,pX=1024,fX=1025,bo=1026,Gl=1027,gX=1028,mX=1029,vX=1030,yX=1031,xX=1033,wf=33776,Mf=33777,$f=33778,Pf=33779,W0=35840,X0=35841,Y0=35842,K0=35843,bX=36196,q0=37492,Z0=37496,J0=37808,Q0=37809,ey=37810,ty=37811,iy=37812,ry=37813,ny=37814,sy=37815,ay=37816,oy=37817,ly=37818,cy=37819,hy=37820,dy=37821,uy=36492,_X=2200,SX=2201,wX=2202,Vu=2300,Du=2301,Tf=2302,bl=2400,_l=2401,Fu=2402,Im=2500,l_=2501,MX=0,js=3e3,Ei=3001,$X=3200,PX=3201,tc=0,TX=1,Is="srgb",ao="srgb-linear",Cf=7680,CX=519,th=35044,ju=35048,py="300 es",zg=1035;class za{addEventListener(e,t){this._listeners===void 0&&(this._listeners={});const i=this._listeners;i[e]===void 0&&(i[e]=[]),i[e].indexOf(t)===-1&&i[e].push(t)}hasEventListener(e,t){if(this._listeners===void 0)return!1;const i=this._listeners;return i[e]!==void 0&&i[e].indexOf(t)!==-1}removeEventListener(e,t){if(this._listeners===void 0)return;const r=this._listeners[e];if(r!==void 0){const s=r.indexOf(t);s!==-1&&r.splice(s,1)}}dispatchEvent(e){if(this._listeners===void 0)return;const i=this._listeners[e.type];if(i!==void 0){e.target=this;const r=i.slice(0);for(let s=0,a=r.length;s>8&255]+_r[n>>16&255]+_r[n>>24&255]+"-"+_r[e&255]+_r[e>>8&255]+"-"+_r[e>>16&15|64]+_r[e>>24&255]+"-"+_r[t&63|128]+_r[t>>8&255]+"-"+_r[t>>16&255]+_r[t>>24&255]+_r[i&255]+_r[i>>8&255]+_r[i>>16&255]+_r[i>>24&255]).toLowerCase()}function gr(n,e,t){return Math.max(e,Math.min(t,n))}function EX(n,e){return(n%e+e)%e}function Ef(n,e,t){return(1-t)*n+t*e}function fy(n){return(n&n-1)===0&&n!==0}function IX(n){return Math.pow(2,Math.ceil(Math.log(n)/Math.LN2))}function Dg(n){return Math.pow(2,Math.floor(Math.log(n)/Math.LN2))}class _e{constructor(e=0,t=0){this.x=e,this.y=t}get width(){return this.x}set width(e){this.x=e}get height(){return this.y}set height(e){this.y=e}set(e,t){return this.x=e,this.y=t,this}setScalar(e){return this.x=e,this.y=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y)}copy(e){return this.x=e.x,this.y=e.y,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector2: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this)}addScalar(e){return this.x+=e,this.y+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector2: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this)}subScalar(e){return this.x-=e,this.y-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this}multiply(e){return this.x*=e.x,this.y*=e.y,this}multiplyScalar(e){return this.x*=e,this.y*=e,this}divide(e){return this.x/=e.x,this.y/=e.y,this}divideScalar(e){return this.multiplyScalar(1/e)}applyMatrix3(e){const t=this.x,i=this.y,r=e.elements;return this.x=r[0]*t+r[3]*i+r[6],this.y=r[1]*t+r[4]*i+r[7],this}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this}negate(){return this.x=-this.x,this.y=-this.y,this}dot(e){return this.x*e.x+this.y*e.y}cross(e){return this.x*e.y-this.y*e.x}lengthSq(){return this.x*this.x+this.y*this.y}length(){return Math.sqrt(this.x*this.x+this.y*this.y)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)}normalize(){return this.divideScalar(this.length()||1)}angle(){return Math.atan2(-this.y,-this.x)+Math.PI}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,i=this.y-e.y;return t*t+i*i}manhattanDistanceTo(e){return Math.abs(this.x-e.x)+Math.abs(this.y-e.y)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this}equals(e){return e.x===this.x&&e.y===this.y}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector2: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this}rotateAround(e,t){const i=Math.cos(t),r=Math.sin(t),s=this.x-e.x,a=this.y-e.y;return this.x=s*i-a*r+e.x,this.y=s*r+a*i+e.y,this}random(){return this.x=Math.random(),this.y=Math.random(),this}*[Symbol.iterator](){yield this.x,yield this.y}}_e.prototype.isVector2=!0;class vr{constructor(){this.elements=[1,0,0,0,1,0,0,0,1],arguments.length>0&&console.error("THREE.Matrix3: the constructor no longer reads arguments. use .set() instead.")}set(e,t,i,r,s,a,o,l,c){const h=this.elements;return h[0]=e,h[1]=r,h[2]=o,h[3]=t,h[4]=s,h[5]=l,h[6]=i,h[7]=a,h[8]=c,this}identity(){return this.set(1,0,0,0,1,0,0,0,1),this}copy(e){const t=this.elements,i=e.elements;return t[0]=i[0],t[1]=i[1],t[2]=i[2],t[3]=i[3],t[4]=i[4],t[5]=i[5],t[6]=i[6],t[7]=i[7],t[8]=i[8],this}extractBasis(e,t,i){return e.setFromMatrix3Column(this,0),t.setFromMatrix3Column(this,1),i.setFromMatrix3Column(this,2),this}setFromMatrix4(e){const t=e.elements;return this.set(t[0],t[4],t[8],t[1],t[5],t[9],t[2],t[6],t[10]),this}multiply(e){return this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const i=e.elements,r=t.elements,s=this.elements,a=i[0],o=i[3],l=i[6],c=i[1],h=i[4],d=i[7],u=i[2],p=i[5],f=i[8],g=r[0],m=r[3],v=r[6],x=r[1],_=r[4],b=r[7],S=r[2],C=r[5],k=r[8];return s[0]=a*g+o*x+l*S,s[3]=a*m+o*_+l*C,s[6]=a*v+o*b+l*k,s[1]=c*g+h*x+d*S,s[4]=c*m+h*_+d*C,s[7]=c*v+h*b+d*k,s[2]=u*g+p*x+f*S,s[5]=u*m+p*_+f*C,s[8]=u*v+p*b+f*k,this}multiplyScalar(e){const t=this.elements;return t[0]*=e,t[3]*=e,t[6]*=e,t[1]*=e,t[4]*=e,t[7]*=e,t[2]*=e,t[5]*=e,t[8]*=e,this}determinant(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8];return t*a*h-t*o*c-i*s*h+i*o*l+r*s*c-r*a*l}invert(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=h*a-o*c,u=o*l-h*s,p=c*s-a*l,f=t*d+i*u+r*p;if(f===0)return this.set(0,0,0,0,0,0,0,0,0);const g=1/f;return e[0]=d*g,e[1]=(r*c-h*i)*g,e[2]=(o*i-r*a)*g,e[3]=u*g,e[4]=(h*t-r*l)*g,e[5]=(r*s-o*t)*g,e[6]=p*g,e[7]=(i*l-c*t)*g,e[8]=(a*t-i*s)*g,this}transpose(){let e;const t=this.elements;return e=t[1],t[1]=t[3],t[3]=e,e=t[2],t[2]=t[6],t[6]=e,e=t[5],t[5]=t[7],t[7]=e,this}getNormalMatrix(e){return this.setFromMatrix4(e).invert().transpose()}transposeIntoArray(e){const t=this.elements;return e[0]=t[0],e[1]=t[3],e[2]=t[6],e[3]=t[1],e[4]=t[4],e[5]=t[7],e[6]=t[2],e[7]=t[5],e[8]=t[8],this}setUvTransform(e,t,i,r,s,a,o){const l=Math.cos(s),c=Math.sin(s);return this.set(i*l,i*c,-i*(l*a+c*o)+a+e,-r*c,r*l,-r*(-c*a+l*o)+o+t,0,0,1),this}scale(e,t){const i=this.elements;return i[0]*=e,i[3]*=e,i[6]*=e,i[1]*=t,i[4]*=t,i[7]*=t,this}rotate(e){const t=Math.cos(e),i=Math.sin(e),r=this.elements,s=r[0],a=r[3],o=r[6],l=r[1],c=r[4],h=r[7];return r[0]=t*s+i*l,r[3]=t*a+i*c,r[6]=t*o+i*h,r[1]=-i*s+t*l,r[4]=-i*a+t*c,r[7]=-i*o+t*h,this}translate(e,t){const i=this.elements;return i[0]+=e*i[2],i[3]+=e*i[5],i[6]+=e*i[8],i[1]+=t*i[2],i[4]+=t*i[5],i[7]+=t*i[8],this}equals(e){const t=this.elements,i=e.elements;for(let r=0;r<9;r++)if(t[r]!==i[r])return!1;return!0}fromArray(e,t=0){for(let i=0;i<9;i++)this.elements[i]=e[i+t];return this}toArray(e=[],t=0){const i=this.elements;return e[t]=i[0],e[t+1]=i[1],e[t+2]=i[2],e[t+3]=i[3],e[t+4]=i[4],e[t+5]=i[5],e[t+6]=i[6],e[t+7]=i[7],e[t+8]=i[8],e}clone(){return new this.constructor().fromArray(this.elements)}}vr.prototype.isMatrix3=!0;function c_(n){for(let e=n.length-1;e>=0;--e)if(n[e]>65535)return!0;return!1}const LX={Int8Array,Uint8Array,Uint8ClampedArray,Int16Array,Uint16Array,Int32Array,Uint32Array,Float32Array,Float64Array};function Sl(n,e){return new LX[n](e)}function ih(n){return document.createElementNS("http://www.w3.org/1999/xhtml",n)}function _o(n){return n<.04045?n*.0773993808:Math.pow(n*.9478672986+.0521327014,2.4)}function wu(n){return n<.0031308?n*12.92:1.055*Math.pow(n,.41666)-.055}const If={[Is]:{[ao]:_o},[ao]:{[Is]:wu}},In={legacyMode:!0,get workingColorSpace(){return ao},set workingColorSpace(n){console.warn("THREE.ColorManagement: .workingColorSpace is readonly.")},convert:function(n,e,t){if(this.legacyMode||e===t||!e||!t)return n;if(If[e]&&If[e][t]!==void 0){const i=If[e][t];return n.r=i(n.r),n.g=i(n.g),n.b=i(n.b),n}throw new Error("Unsupported color space conversion.")},fromWorkingColorSpace:function(n,e){return this.convert(n,this.workingColorSpace,e)},toWorkingColorSpace:function(n,e){return this.convert(n,e,this.workingColorSpace)}},h_={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074},sr={r:0,g:0,b:0},Ln={h:0,s:0,l:0},Ed={h:0,s:0,l:0};function Lf(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+(e-n)*6*t:t<1/2?e:t<2/3?n+(e-n)*6*(2/3-t):n}function Id(n,e){return e.r=n.r,e.g=n.g,e.b=n.b,e}class tt{constructor(e,t,i){return t===void 0&&i===void 0?this.set(e):this.setRGB(e,t,i)}set(e){return e&&e.isColor?this.copy(e):typeof e=="number"?this.setHex(e):typeof e=="string"&&this.setStyle(e),this}setScalar(e){return this.r=e,this.g=e,this.b=e,this}setHex(e,t=Is){return e=Math.floor(e),this.r=(e>>16&255)/255,this.g=(e>>8&255)/255,this.b=(e&255)/255,In.toWorkingColorSpace(this,t),this}setRGB(e,t,i,r=ao){return this.r=e,this.g=t,this.b=i,In.toWorkingColorSpace(this,r),this}setHSL(e,t,i,r=ao){if(e=EX(e,1),t=gr(t,0,1),i=gr(i,0,1),t===0)this.r=this.g=this.b=i;else{const s=i<=.5?i*(1+t):i+t-i*t,a=2*i-s;this.r=Lf(a,s,e+1/3),this.g=Lf(a,s,e),this.b=Lf(a,s,e-1/3)}return In.toWorkingColorSpace(this,r),this}setStyle(e,t=Is){function i(s){s!==void 0&&parseFloat(s)<1&&console.warn("THREE.Color: Alpha component of "+e+" will be ignored.")}let r;if(r=/^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(e)){let s;const a=r[1],o=r[2];switch(a){case"rgb":case"rgba":if(s=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o))return this.r=Math.min(255,parseInt(s[1],10))/255,this.g=Math.min(255,parseInt(s[2],10))/255,this.b=Math.min(255,parseInt(s[3],10))/255,In.toWorkingColorSpace(this,t),i(s[4]),this;if(s=/^\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o))return this.r=Math.min(100,parseInt(s[1],10))/100,this.g=Math.min(100,parseInt(s[2],10))/100,this.b=Math.min(100,parseInt(s[3],10))/100,In.toWorkingColorSpace(this,t),i(s[4]),this;break;case"hsl":case"hsla":if(s=/^\s*(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(o)){const l=parseFloat(s[1])/360,c=parseInt(s[2],10)/100,h=parseInt(s[3],10)/100;return i(s[4]),this.setHSL(l,c,h,t)}break}}else if(r=/^\#([A-Fa-f\d]+)$/.exec(e)){const s=r[1],a=s.length;if(a===3)return this.r=parseInt(s.charAt(0)+s.charAt(0),16)/255,this.g=parseInt(s.charAt(1)+s.charAt(1),16)/255,this.b=parseInt(s.charAt(2)+s.charAt(2),16)/255,In.toWorkingColorSpace(this,t),this;if(a===6)return this.r=parseInt(s.charAt(0)+s.charAt(1),16)/255,this.g=parseInt(s.charAt(2)+s.charAt(3),16)/255,this.b=parseInt(s.charAt(4)+s.charAt(5),16)/255,In.toWorkingColorSpace(this,t),this}return e&&e.length>0?this.setColorName(e,t):this}setColorName(e,t=Is){const i=h_[e.toLowerCase()];return i!==void 0?this.setHex(i,t):console.warn("THREE.Color: Unknown color "+e),this}clone(){return new this.constructor(this.r,this.g,this.b)}copy(e){return this.r=e.r,this.g=e.g,this.b=e.b,this}copySRGBToLinear(e){return this.r=_o(e.r),this.g=_o(e.g),this.b=_o(e.b),this}copyLinearToSRGB(e){return this.r=wu(e.r),this.g=wu(e.g),this.b=wu(e.b),this}convertSRGBToLinear(){return this.copySRGBToLinear(this),this}convertLinearToSRGB(){return this.copyLinearToSRGB(this),this}getHex(e=Is){return In.fromWorkingColorSpace(Id(this,sr),e),gr(sr.r*255,0,255)<<16^gr(sr.g*255,0,255)<<8^gr(sr.b*255,0,255)<<0}getHexString(e=Is){return("000000"+this.getHex(e).toString(16)).slice(-6)}getHSL(e,t=ao){In.fromWorkingColorSpace(Id(this,sr),t);const i=sr.r,r=sr.g,s=sr.b,a=Math.max(i,r,s),o=Math.min(i,r,s);let l,c;const h=(o+a)/2;if(o===a)l=0,c=0;else{const d=a-o;switch(c=h<=.5?d/(a+o):d/(2-a-o),a){case i:l=(r-s)/d+(r2048||t.height>2048?(console.warn("THREE.ImageUtils.getDataURL: Image converted to jpg for performance reasons",e),t.toDataURL("image/jpeg",.6)):t.toDataURL("image/png")}static sRGBToLinear(e){if(typeof HTMLImageElement!="undefined"&&e instanceof HTMLImageElement||typeof HTMLCanvasElement!="undefined"&&e instanceof HTMLCanvasElement||typeof ImageBitmap!="undefined"&&e instanceof ImageBitmap){const t=ih("canvas");t.width=e.width,t.height=e.height;const i=t.getContext("2d");i.drawImage(e,0,0,e.width,e.height);const r=i.getImageData(0,0,e.width,e.height),s=r.data;for(let a=0;a1)switch(this.wrapS){case Ou:e.x=e.x-Math.floor(e.x);break;case gn:e.x=e.x<0?0:1;break;case zu:Math.abs(Math.floor(e.x)%2)===1?e.x=Math.ceil(e.x)-e.x:e.x=e.x-Math.floor(e.x);break}if(e.y<0||e.y>1)switch(this.wrapT){case Ou:e.y=e.y-Math.floor(e.y);break;case gn:e.y=e.y<0?0:1;break;case zu:Math.abs(Math.floor(e.y)%2)===1?e.y=Math.ceil(e.y)-e.y:e.y=e.y-Math.floor(e.y);break}return this.flipY&&(e.y=1-e.y),e}set needsUpdate(e){e===!0&&(this.version++,this.source.needsUpdate=!0)}}dr.DEFAULT_IMAGE=null;dr.DEFAULT_MAPPING=Em;dr.prototype.isTexture=!0;class ui{constructor(e=0,t=0,i=0,r=1){this.x=e,this.y=t,this.z=i,this.w=r}get width(){return this.z}set width(e){this.z=e}get height(){return this.w}set height(e){this.w=e}set(e,t,i,r){return this.x=e,this.y=t,this.z=i,this.w=r,this}setScalar(e){return this.x=e,this.y=e,this.z=e,this.w=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setZ(e){return this.z=e,this}setW(e){return this.w=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;case 2:this.z=t;break;case 3:this.w=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;case 2:return this.z;case 3:return this.w;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y,this.z,this.w)}copy(e){return this.x=e.x,this.y=e.y,this.z=e.z,this.w=e.w!==void 0?e.w:1,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector4: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this.z+=e.z,this.w+=e.w,this)}addScalar(e){return this.x+=e,this.y+=e,this.z+=e,this.w+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this.z=e.z+t.z,this.w=e.w+t.w,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this.z+=e.z*t,this.w+=e.w*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector4: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this.z-=e.z,this.w-=e.w,this)}subScalar(e){return this.x-=e,this.y-=e,this.z-=e,this.w-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this.z=e.z-t.z,this.w=e.w-t.w,this}multiply(e){return this.x*=e.x,this.y*=e.y,this.z*=e.z,this.w*=e.w,this}multiplyScalar(e){return this.x*=e,this.y*=e,this.z*=e,this.w*=e,this}applyMatrix4(e){const t=this.x,i=this.y,r=this.z,s=this.w,a=e.elements;return this.x=a[0]*t+a[4]*i+a[8]*r+a[12]*s,this.y=a[1]*t+a[5]*i+a[9]*r+a[13]*s,this.z=a[2]*t+a[6]*i+a[10]*r+a[14]*s,this.w=a[3]*t+a[7]*i+a[11]*r+a[15]*s,this}divideScalar(e){return this.multiplyScalar(1/e)}setAxisAngleFromQuaternion(e){this.w=2*Math.acos(e.w);const t=Math.sqrt(1-e.w*e.w);return t<1e-4?(this.x=1,this.y=0,this.z=0):(this.x=e.x/t,this.y=e.y/t,this.z=e.z/t),this}setAxisAngleFromRotationMatrix(e){let t,i,r,s;const l=e.elements,c=l[0],h=l[4],d=l[8],u=l[1],p=l[5],f=l[9],g=l[2],m=l[6],v=l[10];if(Math.abs(h-u)<.01&&Math.abs(d-g)<.01&&Math.abs(f-m)<.01){if(Math.abs(h+u)<.1&&Math.abs(d+g)<.1&&Math.abs(f+m)<.1&&Math.abs(c+p+v-3)<.1)return this.set(1,0,0,0),this;t=Math.PI;const _=(c+1)/2,b=(p+1)/2,S=(v+1)/2,C=(h+u)/4,k=(d+g)/4,O=(f+m)/4;return _>b&&_>S?_<.01?(i=0,r=.707106781,s=.707106781):(i=Math.sqrt(_),r=C/i,s=k/i):b>S?b<.01?(i=.707106781,r=0,s=.707106781):(r=Math.sqrt(b),i=C/r,s=O/r):S<.01?(i=.707106781,r=.707106781,s=0):(s=Math.sqrt(S),i=k/s,r=O/s),this.set(i,r,s,t),this}let x=Math.sqrt((m-f)*(m-f)+(d-g)*(d-g)+(u-h)*(u-h));return Math.abs(x)<.001&&(x=1),this.x=(m-f)/x,this.y=(d-g)/x,this.z=(u-h)/x,this.w=Math.acos((c+p+v-1)/2),this}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this.z=Math.min(this.z,e.z),this.w=Math.min(this.w,e.w),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this.z=Math.max(this.z,e.z),this.w=Math.max(this.w,e.w),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this.z=Math.max(e.z,Math.min(t.z,this.z)),this.w=Math.max(e.w,Math.min(t.w,this.w)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this.z=Math.max(e,Math.min(t,this.z)),this.w=Math.max(e,Math.min(t,this.w)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this.z=Math.floor(this.z),this.w=Math.floor(this.w),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this.z=Math.ceil(this.z),this.w=Math.ceil(this.w),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this.z=Math.round(this.z),this.w=Math.round(this.w),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this.z=this.z<0?Math.ceil(this.z):Math.floor(this.z),this.w=this.w<0?Math.ceil(this.w):Math.floor(this.w),this}negate(){return this.x=-this.x,this.y=-this.y,this.z=-this.z,this.w=-this.w,this}dot(e){return this.x*e.x+this.y*e.y+this.z*e.z+this.w*e.w}lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w}length(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)+Math.abs(this.z)+Math.abs(this.w)}normalize(){return this.divideScalar(this.length()||1)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this.z+=(e.z-this.z)*t,this.w+=(e.w-this.w)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this.z=e.z+(t.z-e.z)*i,this.w=e.w+(t.w-e.w)*i,this}equals(e){return e.x===this.x&&e.y===this.y&&e.z===this.z&&e.w===this.w}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this.z=e[t+2],this.w=e[t+3],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e[t+2]=this.z,e[t+3]=this.w,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector4: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this.z=e.getZ(t),this.w=e.getW(t),this}random(){return this.x=Math.random(),this.y=Math.random(),this.z=Math.random(),this.w=Math.random(),this}*[Symbol.iterator](){yield this.x,yield this.y,yield this.z,yield this.w}}ui.prototype.isVector4=!0;class nn extends za{constructor(e,t,i={}){super(),this.width=e,this.height=t,this.depth=1,this.scissor=new ui(0,0,e,t),this.scissorTest=!1,this.viewport=new ui(0,0,e,t);const r={width:e,height:t,depth:1};this.texture=new dr(r,i.mapping,i.wrapS,i.wrapT,i.magFilter,i.minFilter,i.format,i.type,i.anisotropy,i.encoding),this.texture.isRenderTargetTexture=!0,this.texture.flipY=!1,this.texture.generateMipmaps=i.generateMipmaps!==void 0?i.generateMipmaps:!1,this.texture.internalFormat=i.internalFormat!==void 0?i.internalFormat:null,this.texture.minFilter=i.minFilter!==void 0?i.minFilter:jr,this.depthBuffer=i.depthBuffer!==void 0?i.depthBuffer:!0,this.stencilBuffer=i.stencilBuffer!==void 0?i.stencilBuffer:!1,this.depthTexture=i.depthTexture!==void 0?i.depthTexture:null,this.samples=i.samples!==void 0?i.samples:0}setSize(e,t,i=1){(this.width!==e||this.height!==t||this.depth!==i)&&(this.width=e,this.height=t,this.depth=i,this.texture.image.width=e,this.texture.image.height=t,this.texture.image.depth=i,this.dispose()),this.viewport.set(0,0,e,t),this.scissor.set(0,0,e,t)}clone(){return new this.constructor().copy(this)}copy(e){return this.width=e.width,this.height=e.height,this.depth=e.depth,this.viewport.copy(e.viewport),this.texture=e.texture.clone(),this.texture.isRenderTargetTexture=!0,this.texture.image=Object.assign({},e.texture.image),this.depthBuffer=e.depthBuffer,this.stencilBuffer=e.stencilBuffer,e.depthTexture!==null&&(this.depthTexture=e.depthTexture.clone()),this.samples=e.samples,this}dispose(){this.dispatchEvent({type:"dispose"})}}nn.prototype.isWebGLRenderTarget=!0;class Sp extends dr{constructor(e=null,t=1,i=1,r=1){super(null),this.image={data:e,width:t,height:i,depth:r},this.magFilter=lr,this.minFilter=lr,this.wrapR=gn,this.generateMipmaps=!1,this.flipY=!1,this.unpackAlignment=1}}Sp.prototype.isDataArrayTexture=!0;class AX extends nn{constructor(e,t,i){super(e,t),this.depth=i,this.texture=new Sp(null,e,t,i),this.texture.isRenderTargetTexture=!0}}AX.prototype.isWebGLArrayRenderTarget=!0;class Lm extends dr{constructor(e=null,t=1,i=1,r=1){super(null),this.image={data:e,width:t,height:i,depth:r},this.magFilter=lr,this.minFilter=lr,this.wrapR=gn,this.generateMipmaps=!1,this.flipY=!1,this.unpackAlignment=1}}Lm.prototype.isData3DTexture=!0;class RX extends nn{constructor(e,t,i){super(e,t),this.depth=i,this.texture=new Lm(null,e,t,i),this.texture.isRenderTargetTexture=!0}}RX.prototype.isWebGL3DRenderTarget=!0;class OX extends nn{constructor(e,t,i,r={}){super(e,t,r);const s=this.texture;this.texture=[];for(let a=0;a=0?1:-1,_=1-v*v;if(_>Number.EPSILON){const S=Math.sqrt(_),C=Math.atan2(S,v*x);m=Math.sin(m*C)/S,o=Math.sin(o*C)/S}const b=o*x;if(l=l*m+u*b,c=c*m+p*b,h=h*m+f*b,d=d*m+g*b,m===1-o){const S=1/Math.sqrt(l*l+c*c+h*h+d*d);l*=S,c*=S,h*=S,d*=S}}e[t]=l,e[t+1]=c,e[t+2]=h,e[t+3]=d}static multiplyQuaternionsFlat(e,t,i,r,s,a){const o=i[r],l=i[r+1],c=i[r+2],h=i[r+3],d=s[a],u=s[a+1],p=s[a+2],f=s[a+3];return e[t]=o*f+h*d+l*p-c*u,e[t+1]=l*f+h*u+c*d-o*p,e[t+2]=c*f+h*p+o*u-l*d,e[t+3]=h*f-o*d-l*u-c*p,e}get x(){return this._x}set x(e){this._x=e,this._onChangeCallback()}get y(){return this._y}set y(e){this._y=e,this._onChangeCallback()}get z(){return this._z}set z(e){this._z=e,this._onChangeCallback()}get w(){return this._w}set w(e){this._w=e,this._onChangeCallback()}set(e,t,i,r){return this._x=e,this._y=t,this._z=i,this._w=r,this._onChangeCallback(),this}clone(){return new this.constructor(this._x,this._y,this._z,this._w)}copy(e){return this._x=e.x,this._y=e.y,this._z=e.z,this._w=e.w,this._onChangeCallback(),this}setFromEuler(e,t){if(!(e&&e.isEuler))throw new Error("THREE.Quaternion: .setFromEuler() now expects an Euler rotation rather than a Vector3 and order.");const i=e._x,r=e._y,s=e._z,a=e._order,o=Math.cos,l=Math.sin,c=o(i/2),h=o(r/2),d=o(s/2),u=l(i/2),p=l(r/2),f=l(s/2);switch(a){case"XYZ":this._x=u*h*d+c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d-u*p*f;break;case"YXZ":this._x=u*h*d+c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d+u*p*f;break;case"ZXY":this._x=u*h*d-c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d-u*p*f;break;case"ZYX":this._x=u*h*d-c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d+u*p*f;break;case"YZX":this._x=u*h*d+c*p*f,this._y=c*p*d+u*h*f,this._z=c*h*f-u*p*d,this._w=c*h*d-u*p*f;break;case"XZY":this._x=u*h*d-c*p*f,this._y=c*p*d-u*h*f,this._z=c*h*f+u*p*d,this._w=c*h*d+u*p*f;break;default:console.warn("THREE.Quaternion: .setFromEuler() encountered an unknown order: "+a)}return t!==!1&&this._onChangeCallback(),this}setFromAxisAngle(e,t){const i=t/2,r=Math.sin(i);return this._x=e.x*r,this._y=e.y*r,this._z=e.z*r,this._w=Math.cos(i),this._onChangeCallback(),this}setFromRotationMatrix(e){const t=e.elements,i=t[0],r=t[4],s=t[8],a=t[1],o=t[5],l=t[9],c=t[2],h=t[6],d=t[10],u=i+o+d;if(u>0){const p=.5/Math.sqrt(u+1);this._w=.25/p,this._x=(h-l)*p,this._y=(s-c)*p,this._z=(a-r)*p}else if(i>o&&i>d){const p=2*Math.sqrt(1+i-o-d);this._w=(h-l)/p,this._x=.25*p,this._y=(r+a)/p,this._z=(s+c)/p}else if(o>d){const p=2*Math.sqrt(1+o-i-d);this._w=(s-c)/p,this._x=(r+a)/p,this._y=.25*p,this._z=(l+h)/p}else{const p=2*Math.sqrt(1+d-i-o);this._w=(a-r)/p,this._x=(s+c)/p,this._y=(l+h)/p,this._z=.25*p}return this._onChangeCallback(),this}setFromUnitVectors(e,t){let i=e.dot(t)+1;return iMath.abs(e.z)?(this._x=-e.y,this._y=e.x,this._z=0,this._w=i):(this._x=0,this._y=-e.z,this._z=e.y,this._w=i)):(this._x=e.y*t.z-e.z*t.y,this._y=e.z*t.x-e.x*t.z,this._z=e.x*t.y-e.y*t.x,this._w=i),this.normalize()}angleTo(e){return 2*Math.acos(Math.abs(gr(this.dot(e),-1,1)))}rotateTowards(e,t){const i=this.angleTo(e);if(i===0)return this;const r=Math.min(1,t/i);return this.slerp(e,r),this}identity(){return this.set(0,0,0,1)}invert(){return this.conjugate()}conjugate(){return this._x*=-1,this._y*=-1,this._z*=-1,this._onChangeCallback(),this}dot(e){return this._x*e._x+this._y*e._y+this._z*e._z+this._w*e._w}lengthSq(){return this._x*this._x+this._y*this._y+this._z*this._z+this._w*this._w}length(){return Math.sqrt(this._x*this._x+this._y*this._y+this._z*this._z+this._w*this._w)}normalize(){let e=this.length();return e===0?(this._x=0,this._y=0,this._z=0,this._w=1):(e=1/e,this._x=this._x*e,this._y=this._y*e,this._z=this._z*e,this._w=this._w*e),this._onChangeCallback(),this}multiply(e,t){return t!==void 0?(console.warn("THREE.Quaternion: .multiply() now only accepts one argument. Use .multiplyQuaternions( a, b ) instead."),this.multiplyQuaternions(e,t)):this.multiplyQuaternions(this,e)}premultiply(e){return this.multiplyQuaternions(e,this)}multiplyQuaternions(e,t){const i=e._x,r=e._y,s=e._z,a=e._w,o=t._x,l=t._y,c=t._z,h=t._w;return this._x=i*h+a*o+r*c-s*l,this._y=r*h+a*l+s*o-i*c,this._z=s*h+a*c+i*l-r*o,this._w=a*h-i*o-r*l-s*c,this._onChangeCallback(),this}slerp(e,t){if(t===0)return this;if(t===1)return this.copy(e);const i=this._x,r=this._y,s=this._z,a=this._w;let o=a*e._w+i*e._x+r*e._y+s*e._z;if(o<0?(this._w=-e._w,this._x=-e._x,this._y=-e._y,this._z=-e._z,o=-o):this.copy(e),o>=1)return this._w=a,this._x=i,this._y=r,this._z=s,this;const l=1-o*o;if(l<=Number.EPSILON){const p=1-t;return this._w=p*a+t*this._w,this._x=p*i+t*this._x,this._y=p*r+t*this._y,this._z=p*s+t*this._z,this.normalize(),this._onChangeCallback(),this}const c=Math.sqrt(l),h=Math.atan2(c,o),d=Math.sin((1-t)*h)/c,u=Math.sin(t*h)/c;return this._w=a*d+this._w*u,this._x=i*d+this._x*u,this._y=r*d+this._y*u,this._z=s*d+this._z*u,this._onChangeCallback(),this}slerpQuaternions(e,t,i){return this.copy(e).slerp(t,i)}random(){const e=Math.random(),t=Math.sqrt(1-e),i=Math.sqrt(e),r=2*Math.PI*Math.random(),s=2*Math.PI*Math.random();return this.set(t*Math.cos(r),i*Math.sin(s),i*Math.cos(s),t*Math.sin(r))}equals(e){return e._x===this._x&&e._y===this._y&&e._z===this._z&&e._w===this._w}fromArray(e,t=0){return this._x=e[t],this._y=e[t+1],this._z=e[t+2],this._w=e[t+3],this._onChangeCallback(),this}toArray(e=[],t=0){return e[t]=this._x,e[t+1]=this._y,e[t+2]=this._z,e[t+3]=this._w,e}fromBufferAttribute(e,t){return this._x=e.getX(t),this._y=e.getY(t),this._z=e.getZ(t),this._w=e.getW(t),this}_onChange(e){return this._onChangeCallback=e,this}_onChangeCallback(){}}xi.prototype.isQuaternion=!0;class A{constructor(e=0,t=0,i=0){this.x=e,this.y=t,this.z=i}set(e,t,i){return i===void 0&&(i=this.z),this.x=e,this.y=t,this.z=i,this}setScalar(e){return this.x=e,this.y=e,this.z=e,this}setX(e){return this.x=e,this}setY(e){return this.y=e,this}setZ(e){return this.z=e,this}setComponent(e,t){switch(e){case 0:this.x=t;break;case 1:this.y=t;break;case 2:this.z=t;break;default:throw new Error("index is out of range: "+e)}return this}getComponent(e){switch(e){case 0:return this.x;case 1:return this.y;case 2:return this.z;default:throw new Error("index is out of range: "+e)}}clone(){return new this.constructor(this.x,this.y,this.z)}copy(e){return this.x=e.x,this.y=e.y,this.z=e.z,this}add(e,t){return t!==void 0?(console.warn("THREE.Vector3: .add() now only accepts one argument. Use .addVectors( a, b ) instead."),this.addVectors(e,t)):(this.x+=e.x,this.y+=e.y,this.z+=e.z,this)}addScalar(e){return this.x+=e,this.y+=e,this.z+=e,this}addVectors(e,t){return this.x=e.x+t.x,this.y=e.y+t.y,this.z=e.z+t.z,this}addScaledVector(e,t){return this.x+=e.x*t,this.y+=e.y*t,this.z+=e.z*t,this}sub(e,t){return t!==void 0?(console.warn("THREE.Vector3: .sub() now only accepts one argument. Use .subVectors( a, b ) instead."),this.subVectors(e,t)):(this.x-=e.x,this.y-=e.y,this.z-=e.z,this)}subScalar(e){return this.x-=e,this.y-=e,this.z-=e,this}subVectors(e,t){return this.x=e.x-t.x,this.y=e.y-t.y,this.z=e.z-t.z,this}multiply(e,t){return t!==void 0?(console.warn("THREE.Vector3: .multiply() now only accepts one argument. Use .multiplyVectors( a, b ) instead."),this.multiplyVectors(e,t)):(this.x*=e.x,this.y*=e.y,this.z*=e.z,this)}multiplyScalar(e){return this.x*=e,this.y*=e,this.z*=e,this}multiplyVectors(e,t){return this.x=e.x*t.x,this.y=e.y*t.y,this.z=e.z*t.z,this}applyEuler(e){return e&&e.isEuler||console.error("THREE.Vector3: .applyEuler() now expects an Euler rotation rather than a Vector3 and order."),this.applyQuaternion(gy.setFromEuler(e))}applyAxisAngle(e,t){return this.applyQuaternion(gy.setFromAxisAngle(e,t))}applyMatrix3(e){const t=this.x,i=this.y,r=this.z,s=e.elements;return this.x=s[0]*t+s[3]*i+s[6]*r,this.y=s[1]*t+s[4]*i+s[7]*r,this.z=s[2]*t+s[5]*i+s[8]*r,this}applyNormalMatrix(e){return this.applyMatrix3(e).normalize()}applyMatrix4(e){const t=this.x,i=this.y,r=this.z,s=e.elements,a=1/(s[3]*t+s[7]*i+s[11]*r+s[15]);return this.x=(s[0]*t+s[4]*i+s[8]*r+s[12])*a,this.y=(s[1]*t+s[5]*i+s[9]*r+s[13])*a,this.z=(s[2]*t+s[6]*i+s[10]*r+s[14])*a,this}applyQuaternion(e){const t=this.x,i=this.y,r=this.z,s=e.x,a=e.y,o=e.z,l=e.w,c=l*t+a*r-o*i,h=l*i+o*t-s*r,d=l*r+s*i-a*t,u=-s*t-a*i-o*r;return this.x=c*l+u*-s+h*-o-d*-a,this.y=h*l+u*-a+d*-s-c*-o,this.z=d*l+u*-o+c*-a-h*-s,this}project(e){return this.applyMatrix4(e.matrixWorldInverse).applyMatrix4(e.projectionMatrix)}unproject(e){return this.applyMatrix4(e.projectionMatrixInverse).applyMatrix4(e.matrixWorld)}transformDirection(e){const t=this.x,i=this.y,r=this.z,s=e.elements;return this.x=s[0]*t+s[4]*i+s[8]*r,this.y=s[1]*t+s[5]*i+s[9]*r,this.z=s[2]*t+s[6]*i+s[10]*r,this.normalize()}divide(e){return this.x/=e.x,this.y/=e.y,this.z/=e.z,this}divideScalar(e){return this.multiplyScalar(1/e)}min(e){return this.x=Math.min(this.x,e.x),this.y=Math.min(this.y,e.y),this.z=Math.min(this.z,e.z),this}max(e){return this.x=Math.max(this.x,e.x),this.y=Math.max(this.y,e.y),this.z=Math.max(this.z,e.z),this}clamp(e,t){return this.x=Math.max(e.x,Math.min(t.x,this.x)),this.y=Math.max(e.y,Math.min(t.y,this.y)),this.z=Math.max(e.z,Math.min(t.z,this.z)),this}clampScalar(e,t){return this.x=Math.max(e,Math.min(t,this.x)),this.y=Math.max(e,Math.min(t,this.y)),this.z=Math.max(e,Math.min(t,this.z)),this}clampLength(e,t){const i=this.length();return this.divideScalar(i||1).multiplyScalar(Math.max(e,Math.min(t,i)))}floor(){return this.x=Math.floor(this.x),this.y=Math.floor(this.y),this.z=Math.floor(this.z),this}ceil(){return this.x=Math.ceil(this.x),this.y=Math.ceil(this.y),this.z=Math.ceil(this.z),this}round(){return this.x=Math.round(this.x),this.y=Math.round(this.y),this.z=Math.round(this.z),this}roundToZero(){return this.x=this.x<0?Math.ceil(this.x):Math.floor(this.x),this.y=this.y<0?Math.ceil(this.y):Math.floor(this.y),this.z=this.z<0?Math.ceil(this.z):Math.floor(this.z),this}negate(){return this.x=-this.x,this.y=-this.y,this.z=-this.z,this}dot(e){return this.x*e.x+this.y*e.y+this.z*e.z}lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z}length(){return Math.sqrt(this.x*this.x+this.y*this.y+this.z*this.z)}manhattanLength(){return Math.abs(this.x)+Math.abs(this.y)+Math.abs(this.z)}normalize(){return this.divideScalar(this.length()||1)}setLength(e){return this.normalize().multiplyScalar(e)}lerp(e,t){return this.x+=(e.x-this.x)*t,this.y+=(e.y-this.y)*t,this.z+=(e.z-this.z)*t,this}lerpVectors(e,t,i){return this.x=e.x+(t.x-e.x)*i,this.y=e.y+(t.y-e.y)*i,this.z=e.z+(t.z-e.z)*i,this}cross(e,t){return t!==void 0?(console.warn("THREE.Vector3: .cross() now only accepts one argument. Use .crossVectors( a, b ) instead."),this.crossVectors(e,t)):this.crossVectors(this,e)}crossVectors(e,t){const i=e.x,r=e.y,s=e.z,a=t.x,o=t.y,l=t.z;return this.x=r*l-s*o,this.y=s*a-i*l,this.z=i*o-r*a,this}projectOnVector(e){const t=e.lengthSq();if(t===0)return this.set(0,0,0);const i=e.dot(this)/t;return this.copy(e).multiplyScalar(i)}projectOnPlane(e){return Af.copy(this).projectOnVector(e),this.sub(Af)}reflect(e){return this.sub(Af.copy(e).multiplyScalar(2*this.dot(e)))}angleTo(e){const t=Math.sqrt(this.lengthSq()*e.lengthSq());if(t===0)return Math.PI/2;const i=this.dot(e)/t;return Math.acos(gr(i,-1,1))}distanceTo(e){return Math.sqrt(this.distanceToSquared(e))}distanceToSquared(e){const t=this.x-e.x,i=this.y-e.y,r=this.z-e.z;return t*t+i*i+r*r}manhattanDistanceTo(e){return Math.abs(this.x-e.x)+Math.abs(this.y-e.y)+Math.abs(this.z-e.z)}setFromSpherical(e){return this.setFromSphericalCoords(e.radius,e.phi,e.theta)}setFromSphericalCoords(e,t,i){const r=Math.sin(t)*e;return this.x=r*Math.sin(i),this.y=Math.cos(t)*e,this.z=r*Math.cos(i),this}setFromCylindrical(e){return this.setFromCylindricalCoords(e.radius,e.theta,e.y)}setFromCylindricalCoords(e,t,i){return this.x=e*Math.sin(t),this.y=i,this.z=e*Math.cos(t),this}setFromMatrixPosition(e){const t=e.elements;return this.x=t[12],this.y=t[13],this.z=t[14],this}setFromMatrixScale(e){const t=this.setFromMatrixColumn(e,0).length(),i=this.setFromMatrixColumn(e,1).length(),r=this.setFromMatrixColumn(e,2).length();return this.x=t,this.y=i,this.z=r,this}setFromMatrixColumn(e,t){return this.fromArray(e.elements,t*4)}setFromMatrix3Column(e,t){return this.fromArray(e.elements,t*3)}setFromEuler(e){return this.x=e._x,this.y=e._y,this.z=e._z,this}equals(e){return e.x===this.x&&e.y===this.y&&e.z===this.z}fromArray(e,t=0){return this.x=e[t],this.y=e[t+1],this.z=e[t+2],this}toArray(e=[],t=0){return e[t]=this.x,e[t+1]=this.y,e[t+2]=this.z,e}fromBufferAttribute(e,t,i){return i!==void 0&&console.warn("THREE.Vector3: offset has been removed from .fromBufferAttribute()."),this.x=e.getX(t),this.y=e.getY(t),this.z=e.getZ(t),this}random(){return this.x=Math.random(),this.y=Math.random(),this.z=Math.random(),this}randomDirection(){const e=(Math.random()-.5)*2,t=Math.random()*Math.PI*2,i=Math.sqrt(1-e**2);return this.x=i*Math.cos(t),this.y=i*Math.sin(t),this.z=e,this}*[Symbol.iterator](){yield this.x,yield this.y,yield this.z}}A.prototype.isVector3=!0;const Af=new A,gy=new xi;class Tn{constructor(e=new A(1/0,1/0,1/0),t=new A(-1/0,-1/0,-1/0)){this.min=e,this.max=t}set(e,t){return this.min.copy(e),this.max.copy(t),this}setFromArray(e){let t=1/0,i=1/0,r=1/0,s=-1/0,a=-1/0,o=-1/0;for(let l=0,c=e.length;ls&&(s=h),d>a&&(a=d),u>o&&(o=u)}return this.min.set(t,i,r),this.max.set(s,a,o),this}setFromBufferAttribute(e){let t=1/0,i=1/0,r=1/0,s=-1/0,a=-1/0,o=-1/0;for(let l=0,c=e.count;ls&&(s=h),d>a&&(a=d),u>o&&(o=u)}return this.min.set(t,i,r),this.max.set(s,a,o),this}setFromPoints(e){this.makeEmpty();for(let t=0,i=e.length;tthis.max.x||e.ythis.max.y||e.zthis.max.z)}containsBox(e){return this.min.x<=e.min.x&&e.max.x<=this.max.x&&this.min.y<=e.min.y&&e.max.y<=this.max.y&&this.min.z<=e.min.z&&e.max.z<=this.max.z}getParameter(e,t){return t.set((e.x-this.min.x)/(this.max.x-this.min.x),(e.y-this.min.y)/(this.max.y-this.min.y),(e.z-this.min.z)/(this.max.z-this.min.z))}intersectsBox(e){return!(e.max.xthis.max.x||e.max.ythis.max.y||e.max.zthis.max.z)}intersectsSphere(e){return this.clampPoint(e.center,Ga),Ga.distanceToSquared(e.center)<=e.radius*e.radius}intersectsPlane(e){let t,i;return e.normal.x>0?(t=e.normal.x*this.min.x,i=e.normal.x*this.max.x):(t=e.normal.x*this.max.x,i=e.normal.x*this.min.x),e.normal.y>0?(t+=e.normal.y*this.min.y,i+=e.normal.y*this.max.y):(t+=e.normal.y*this.max.y,i+=e.normal.y*this.min.y),e.normal.z>0?(t+=e.normal.z*this.min.z,i+=e.normal.z*this.max.z):(t+=e.normal.z*this.max.z,i+=e.normal.z*this.min.z),t<=-e.constant&&i>=-e.constant}intersectsTriangle(e){if(this.isEmpty())return!1;this.getCenter(xc),Ld.subVectors(this.max,xc),Qo.subVectors(e.a,xc),el.subVectors(e.b,xc),tl.subVectors(e.c,xc),Ys.subVectors(el,Qo),Ks.subVectors(tl,el),Ha.subVectors(Qo,tl);let t=[0,-Ys.z,Ys.y,0,-Ks.z,Ks.y,0,-Ha.z,Ha.y,Ys.z,0,-Ys.x,Ks.z,0,-Ks.x,Ha.z,0,-Ha.x,-Ys.y,Ys.x,0,-Ks.y,Ks.x,0,-Ha.y,Ha.x,0];return!Of(t,Qo,el,tl,Ld)||(t=[1,0,0,0,1,0,0,0,1],!Of(t,Qo,el,tl,Ld))?!1:(kd.crossVectors(Ys,Ks),t=[kd.x,kd.y,kd.z],Of(t,Qo,el,tl,Ld))}clampPoint(e,t){return t.copy(e).clamp(this.min,this.max)}distanceToPoint(e){return Ga.copy(e).clamp(this.min,this.max).sub(e).length()}getBoundingSphere(e){return this.getCenter(e.center),e.radius=this.getSize(Ga).length()*.5,e}intersect(e){return this.min.max(e.min),this.max.min(e.max),this.isEmpty()&&this.makeEmpty(),this}union(e){return this.min.min(e.min),this.max.max(e.max),this}applyMatrix4(e){return this.isEmpty()?this:(Ms[0].set(this.min.x,this.min.y,this.min.z).applyMatrix4(e),Ms[1].set(this.min.x,this.min.y,this.max.z).applyMatrix4(e),Ms[2].set(this.min.x,this.max.y,this.min.z).applyMatrix4(e),Ms[3].set(this.min.x,this.max.y,this.max.z).applyMatrix4(e),Ms[4].set(this.max.x,this.min.y,this.min.z).applyMatrix4(e),Ms[5].set(this.max.x,this.min.y,this.max.z).applyMatrix4(e),Ms[6].set(this.max.x,this.max.y,this.min.z).applyMatrix4(e),Ms[7].set(this.max.x,this.max.y,this.max.z).applyMatrix4(e),this.setFromPoints(Ms),this)}translate(e){return this.min.add(e),this.max.add(e),this}equals(e){return e.min.equals(this.min)&&e.max.equals(this.max)}}Tn.prototype.isBox3=!0;const Ms=[new A,new A,new A,new A,new A,new A,new A,new A],Ga=new A,Rf=new Tn,Qo=new A,el=new A,tl=new A,Ys=new A,Ks=new A,Ha=new A,xc=new A,Ld=new A,kd=new A,Ua=new A;function Of(n,e,t,i,r){for(let s=0,a=n.length-3;s<=a;s+=3){Ua.fromArray(n,s);const o=r.x*Math.abs(Ua.x)+r.y*Math.abs(Ua.y)+r.z*Math.abs(Ua.z),l=e.dot(Ua),c=t.dot(Ua),h=i.dot(Ua);if(Math.max(-Math.max(l,c,h),Math.min(l,c,h))>o)return!1}return!0}const zX=new Tn,my=new A,Ad=new A,zf=new A;class jo{constructor(e=new A,t=-1){this.center=e,this.radius=t}set(e,t){return this.center.copy(e),this.radius=t,this}setFromPoints(e,t){const i=this.center;t!==void 0?i.copy(t):zX.setFromPoints(e).getCenter(i);let r=0;for(let s=0,a=e.length;sthis.radius*this.radius&&(t.sub(this.center).normalize(),t.multiplyScalar(this.radius).add(this.center)),t}getBoundingBox(e){return this.isEmpty()?(e.makeEmpty(),e):(e.set(this.center,this.center),e.expandByScalar(this.radius),e)}applyMatrix4(e){return this.center.applyMatrix4(e),this.radius=this.radius*e.getMaxScaleOnAxis(),this}translate(e){return this.center.add(e),this}expandByPoint(e){zf.subVectors(e,this.center);const t=zf.lengthSq();if(t>this.radius*this.radius){const i=Math.sqrt(t),r=(i-this.radius)*.5;this.center.add(zf.multiplyScalar(r/i)),this.radius+=r}return this}union(e){return this.center.equals(e.center)===!0?Ad.set(0,0,1).multiplyScalar(e.radius):Ad.subVectors(e.center,this.center).normalize().multiplyScalar(e.radius),this.expandByPoint(my.copy(e.center).add(Ad)),this.expandByPoint(my.copy(e.center).sub(Ad)),this}equals(e){return e.center.equals(this.center)&&e.radius===this.radius}clone(){return new this.constructor().copy(this)}}const $s=new A,Vf=new A,Rd=new A,qs=new A,Df=new A,Od=new A,Ff=new A;class No{constructor(e=new A,t=new A(0,0,-1)){this.origin=e,this.direction=t}set(e,t){return this.origin.copy(e),this.direction.copy(t),this}copy(e){return this.origin.copy(e.origin),this.direction.copy(e.direction),this}at(e,t){return t.copy(this.direction).multiplyScalar(e).add(this.origin)}lookAt(e){return this.direction.copy(e).sub(this.origin).normalize(),this}recast(e){return this.origin.copy(this.at(e,$s)),this}closestPointToPoint(e,t){t.subVectors(e,this.origin);const i=t.dot(this.direction);return i<0?t.copy(this.origin):t.copy(this.direction).multiplyScalar(i).add(this.origin)}distanceToPoint(e){return Math.sqrt(this.distanceSqToPoint(e))}distanceSqToPoint(e){const t=$s.subVectors(e,this.origin).dot(this.direction);return t<0?this.origin.distanceToSquared(e):($s.copy(this.direction).multiplyScalar(t).add(this.origin),$s.distanceToSquared(e))}distanceSqToSegment(e,t,i,r){Vf.copy(e).add(t).multiplyScalar(.5),Rd.copy(t).sub(e).normalize(),qs.copy(this.origin).sub(Vf);const s=e.distanceTo(t)*.5,a=-this.direction.dot(Rd),o=qs.dot(this.direction),l=-qs.dot(Rd),c=qs.lengthSq(),h=Math.abs(1-a*a);let d,u,p,f;if(h>0)if(d=a*l-o,u=a*o-l,f=s*h,d>=0)if(u>=-f)if(u<=f){const g=1/h;d*=g,u*=g,p=d*(d+a*u+2*o)+u*(a*d+u+2*l)+c}else u=s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;else u=-s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;else u<=-f?(d=Math.max(0,-(-a*s+o)),u=d>0?-s:Math.min(Math.max(-s,-l),s),p=-d*d+u*(u+2*l)+c):u<=f?(d=0,u=Math.min(Math.max(-s,-l),s),p=u*(u+2*l)+c):(d=Math.max(0,-(a*s+o)),u=d>0?s:Math.min(Math.max(-s,-l),s),p=-d*d+u*(u+2*l)+c);else u=a>0?-s:s,d=Math.max(0,-(a*u+o)),p=-d*d+u*(u+2*l)+c;return i&&i.copy(this.direction).multiplyScalar(d).add(this.origin),r&&r.copy(Rd).multiplyScalar(u).add(Vf),p}intersectSphere(e,t){$s.subVectors(e.center,this.origin);const i=$s.dot(this.direction),r=$s.dot($s)-i*i,s=e.radius*e.radius;if(r>s)return null;const a=Math.sqrt(s-r),o=i-a,l=i+a;return o<0&&l<0?null:o<0?this.at(l,t):this.at(o,t)}intersectsSphere(e){return this.distanceSqToPoint(e.center)<=e.radius*e.radius}distanceToPlane(e){const t=e.normal.dot(this.direction);if(t===0)return e.distanceToPoint(this.origin)===0?0:null;const i=-(this.origin.dot(e.normal)+e.constant)/t;return i>=0?i:null}intersectPlane(e,t){const i=this.distanceToPlane(e);return i===null?null:this.at(i,t)}intersectsPlane(e){const t=e.distanceToPoint(this.origin);return t===0||e.normal.dot(this.direction)*t<0}intersectBox(e,t){let i,r,s,a,o,l;const c=1/this.direction.x,h=1/this.direction.y,d=1/this.direction.z,u=this.origin;return c>=0?(i=(e.min.x-u.x)*c,r=(e.max.x-u.x)*c):(i=(e.max.x-u.x)*c,r=(e.min.x-u.x)*c),h>=0?(s=(e.min.y-u.y)*h,a=(e.max.y-u.y)*h):(s=(e.max.y-u.y)*h,a=(e.min.y-u.y)*h),i>a||s>r||((s>i||i!==i)&&(i=s),(a=0?(o=(e.min.z-u.z)*d,l=(e.max.z-u.z)*d):(o=(e.max.z-u.z)*d,l=(e.min.z-u.z)*d),i>l||o>r)||((o>i||i!==i)&&(i=o),(l=0?i:r,t)}intersectsBox(e){return this.intersectBox(e,$s)!==null}intersectTriangle(e,t,i,r,s){Df.subVectors(t,e),Od.subVectors(i,e),Ff.crossVectors(Df,Od);let a=this.direction.dot(Ff),o;if(a>0){if(r)return null;o=1}else if(a<0)o=-1,a=-a;else return null;qs.subVectors(this.origin,e);const l=o*this.direction.dot(Od.crossVectors(qs,Od));if(l<0)return null;const c=o*this.direction.dot(Df.cross(qs));if(c<0||l+c>a)return null;const h=-o*qs.dot(Ff);return h<0?null:this.at(h/a,s)}applyMatrix4(e){return this.origin.applyMatrix4(e),this.direction.transformDirection(e),this}equals(e){return e.origin.equals(this.origin)&&e.direction.equals(this.direction)}clone(){return new this.constructor().copy(this)}}class yt{constructor(){this.elements=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],arguments.length>0&&console.error("THREE.Matrix4: the constructor no longer reads arguments. use .set() instead.")}set(e,t,i,r,s,a,o,l,c,h,d,u,p,f,g,m){const v=this.elements;return v[0]=e,v[4]=t,v[8]=i,v[12]=r,v[1]=s,v[5]=a,v[9]=o,v[13]=l,v[2]=c,v[6]=h,v[10]=d,v[14]=u,v[3]=p,v[7]=f,v[11]=g,v[15]=m,this}identity(){return this.set(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1),this}clone(){return new yt().fromArray(this.elements)}copy(e){const t=this.elements,i=e.elements;return t[0]=i[0],t[1]=i[1],t[2]=i[2],t[3]=i[3],t[4]=i[4],t[5]=i[5],t[6]=i[6],t[7]=i[7],t[8]=i[8],t[9]=i[9],t[10]=i[10],t[11]=i[11],t[12]=i[12],t[13]=i[13],t[14]=i[14],t[15]=i[15],this}copyPosition(e){const t=this.elements,i=e.elements;return t[12]=i[12],t[13]=i[13],t[14]=i[14],this}setFromMatrix3(e){const t=e.elements;return this.set(t[0],t[3],t[6],0,t[1],t[4],t[7],0,t[2],t[5],t[8],0,0,0,0,1),this}extractBasis(e,t,i){return e.setFromMatrixColumn(this,0),t.setFromMatrixColumn(this,1),i.setFromMatrixColumn(this,2),this}makeBasis(e,t,i){return this.set(e.x,t.x,i.x,0,e.y,t.y,i.y,0,e.z,t.z,i.z,0,0,0,0,1),this}extractRotation(e){const t=this.elements,i=e.elements,r=1/il.setFromMatrixColumn(e,0).length(),s=1/il.setFromMatrixColumn(e,1).length(),a=1/il.setFromMatrixColumn(e,2).length();return t[0]=i[0]*r,t[1]=i[1]*r,t[2]=i[2]*r,t[3]=0,t[4]=i[4]*s,t[5]=i[5]*s,t[6]=i[6]*s,t[7]=0,t[8]=i[8]*a,t[9]=i[9]*a,t[10]=i[10]*a,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,this}makeRotationFromEuler(e){e&&e.isEuler||console.error("THREE.Matrix4: .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order.");const t=this.elements,i=e.x,r=e.y,s=e.z,a=Math.cos(i),o=Math.sin(i),l=Math.cos(r),c=Math.sin(r),h=Math.cos(s),d=Math.sin(s);if(e.order==="XYZ"){const u=a*h,p=a*d,f=o*h,g=o*d;t[0]=l*h,t[4]=-l*d,t[8]=c,t[1]=p+f*c,t[5]=u-g*c,t[9]=-o*l,t[2]=g-u*c,t[6]=f+p*c,t[10]=a*l}else if(e.order==="YXZ"){const u=l*h,p=l*d,f=c*h,g=c*d;t[0]=u+g*o,t[4]=f*o-p,t[8]=a*c,t[1]=a*d,t[5]=a*h,t[9]=-o,t[2]=p*o-f,t[6]=g+u*o,t[10]=a*l}else if(e.order==="ZXY"){const u=l*h,p=l*d,f=c*h,g=c*d;t[0]=u-g*o,t[4]=-a*d,t[8]=f+p*o,t[1]=p+f*o,t[5]=a*h,t[9]=g-u*o,t[2]=-a*c,t[6]=o,t[10]=a*l}else if(e.order==="ZYX"){const u=a*h,p=a*d,f=o*h,g=o*d;t[0]=l*h,t[4]=f*c-p,t[8]=u*c+g,t[1]=l*d,t[5]=g*c+u,t[9]=p*c-f,t[2]=-c,t[6]=o*l,t[10]=a*l}else if(e.order==="YZX"){const u=a*l,p=a*c,f=o*l,g=o*c;t[0]=l*h,t[4]=g-u*d,t[8]=f*d+p,t[1]=d,t[5]=a*h,t[9]=-o*h,t[2]=-c*h,t[6]=p*d+f,t[10]=u-g*d}else if(e.order==="XZY"){const u=a*l,p=a*c,f=o*l,g=o*c;t[0]=l*h,t[4]=-d,t[8]=c*h,t[1]=u*d+g,t[5]=a*h,t[9]=p*d-f,t[2]=f*d-p,t[6]=o*h,t[10]=g*d+u}return t[3]=0,t[7]=0,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,this}makeRotationFromQuaternion(e){return this.compose(VX,e,DX)}lookAt(e,t,i){const r=this.elements;return Qr.subVectors(e,t),Qr.lengthSq()===0&&(Qr.z=1),Qr.normalize(),Zs.crossVectors(i,Qr),Zs.lengthSq()===0&&(Math.abs(i.z)===1?Qr.x+=1e-4:Qr.z+=1e-4,Qr.normalize(),Zs.crossVectors(i,Qr)),Zs.normalize(),zd.crossVectors(Qr,Zs),r[0]=Zs.x,r[4]=zd.x,r[8]=Qr.x,r[1]=Zs.y,r[5]=zd.y,r[9]=Qr.y,r[2]=Zs.z,r[6]=zd.z,r[10]=Qr.z,this}multiply(e,t){return t!==void 0?(console.warn("THREE.Matrix4: .multiply() now only accepts one argument. Use .multiplyMatrices( a, b ) instead."),this.multiplyMatrices(e,t)):this.multiplyMatrices(this,e)}premultiply(e){return this.multiplyMatrices(e,this)}multiplyMatrices(e,t){const i=e.elements,r=t.elements,s=this.elements,a=i[0],o=i[4],l=i[8],c=i[12],h=i[1],d=i[5],u=i[9],p=i[13],f=i[2],g=i[6],m=i[10],v=i[14],x=i[3],_=i[7],b=i[11],S=i[15],C=r[0],k=r[4],O=r[8],q=r[12],X=r[1],T=r[5],z=r[9],ae=r[13],j=r[2],J=r[6],Q=r[10],ee=r[14],K=r[3],re=r[7],le=r[11],ve=r[15];return s[0]=a*C+o*X+l*j+c*K,s[4]=a*k+o*T+l*J+c*re,s[8]=a*O+o*z+l*Q+c*le,s[12]=a*q+o*ae+l*ee+c*ve,s[1]=h*C+d*X+u*j+p*K,s[5]=h*k+d*T+u*J+p*re,s[9]=h*O+d*z+u*Q+p*le,s[13]=h*q+d*ae+u*ee+p*ve,s[2]=f*C+g*X+m*j+v*K,s[6]=f*k+g*T+m*J+v*re,s[10]=f*O+g*z+m*Q+v*le,s[14]=f*q+g*ae+m*ee+v*ve,s[3]=x*C+_*X+b*j+S*K,s[7]=x*k+_*T+b*J+S*re,s[11]=x*O+_*z+b*Q+S*le,s[15]=x*q+_*ae+b*ee+S*ve,this}multiplyScalar(e){const t=this.elements;return t[0]*=e,t[4]*=e,t[8]*=e,t[12]*=e,t[1]*=e,t[5]*=e,t[9]*=e,t[13]*=e,t[2]*=e,t[6]*=e,t[10]*=e,t[14]*=e,t[3]*=e,t[7]*=e,t[11]*=e,t[15]*=e,this}determinant(){const e=this.elements,t=e[0],i=e[4],r=e[8],s=e[12],a=e[1],o=e[5],l=e[9],c=e[13],h=e[2],d=e[6],u=e[10],p=e[14],f=e[3],g=e[7],m=e[11],v=e[15];return f*(+s*l*d-r*c*d-s*o*u+i*c*u+r*o*p-i*l*p)+g*(+t*l*p-t*c*u+s*a*u-r*a*p+r*c*h-s*l*h)+m*(+t*c*d-t*o*p-s*a*d+i*a*p+s*o*h-i*c*h)+v*(-r*o*h-t*l*d+t*o*u+r*a*d-i*a*u+i*l*h)}transpose(){const e=this.elements;let t;return t=e[1],e[1]=e[4],e[4]=t,t=e[2],e[2]=e[8],e[8]=t,t=e[6],e[6]=e[9],e[9]=t,t=e[3],e[3]=e[12],e[12]=t,t=e[7],e[7]=e[13],e[13]=t,t=e[11],e[11]=e[14],e[14]=t,this}setPosition(e,t,i){const r=this.elements;return e.isVector3?(r[12]=e.x,r[13]=e.y,r[14]=e.z):(r[12]=e,r[13]=t,r[14]=i),this}invert(){const e=this.elements,t=e[0],i=e[1],r=e[2],s=e[3],a=e[4],o=e[5],l=e[6],c=e[7],h=e[8],d=e[9],u=e[10],p=e[11],f=e[12],g=e[13],m=e[14],v=e[15],x=d*m*c-g*u*c+g*l*p-o*m*p-d*l*v+o*u*v,_=f*u*c-h*m*c-f*l*p+a*m*p+h*l*v-a*u*v,b=h*g*c-f*d*c+f*o*p-a*g*p-h*o*v+a*d*v,S=f*d*l-h*g*l-f*o*u+a*g*u+h*o*m-a*d*m,C=t*x+i*_+r*b+s*S;if(C===0)return this.set(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);const k=1/C;return e[0]=x*k,e[1]=(g*u*s-d*m*s-g*r*p+i*m*p+d*r*v-i*u*v)*k,e[2]=(o*m*s-g*l*s+g*r*c-i*m*c-o*r*v+i*l*v)*k,e[3]=(d*l*s-o*u*s-d*r*c+i*u*c+o*r*p-i*l*p)*k,e[4]=_*k,e[5]=(h*m*s-f*u*s+f*r*p-t*m*p-h*r*v+t*u*v)*k,e[6]=(f*l*s-a*m*s-f*r*c+t*m*c+a*r*v-t*l*v)*k,e[7]=(a*u*s-h*l*s+h*r*c-t*u*c-a*r*p+t*l*p)*k,e[8]=b*k,e[9]=(f*d*s-h*g*s-f*i*p+t*g*p+h*i*v-t*d*v)*k,e[10]=(a*g*s-f*o*s+f*i*c-t*g*c-a*i*v+t*o*v)*k,e[11]=(h*o*s-a*d*s-h*i*c+t*d*c+a*i*p-t*o*p)*k,e[12]=S*k,e[13]=(h*g*r-f*d*r+f*i*u-t*g*u-h*i*m+t*d*m)*k,e[14]=(f*o*r-a*g*r-f*i*l+t*g*l+a*i*m-t*o*m)*k,e[15]=(a*d*r-h*o*r+h*i*l-t*d*l-a*i*u+t*o*u)*k,this}scale(e){const t=this.elements,i=e.x,r=e.y,s=e.z;return t[0]*=i,t[4]*=r,t[8]*=s,t[1]*=i,t[5]*=r,t[9]*=s,t[2]*=i,t[6]*=r,t[10]*=s,t[3]*=i,t[7]*=r,t[11]*=s,this}getMaxScaleOnAxis(){const e=this.elements,t=e[0]*e[0]+e[1]*e[1]+e[2]*e[2],i=e[4]*e[4]+e[5]*e[5]+e[6]*e[6],r=e[8]*e[8]+e[9]*e[9]+e[10]*e[10];return Math.sqrt(Math.max(t,i,r))}makeTranslation(e,t,i){return this.set(1,0,0,e,0,1,0,t,0,0,1,i,0,0,0,1),this}makeRotationX(e){const t=Math.cos(e),i=Math.sin(e);return this.set(1,0,0,0,0,t,-i,0,0,i,t,0,0,0,0,1),this}makeRotationY(e){const t=Math.cos(e),i=Math.sin(e);return this.set(t,0,i,0,0,1,0,0,-i,0,t,0,0,0,0,1),this}makeRotationZ(e){const t=Math.cos(e),i=Math.sin(e);return this.set(t,-i,0,0,i,t,0,0,0,0,1,0,0,0,0,1),this}makeRotationAxis(e,t){const i=Math.cos(t),r=Math.sin(t),s=1-i,a=e.x,o=e.y,l=e.z,c=s*a,h=s*o;return this.set(c*a+i,c*o-r*l,c*l+r*o,0,c*o+r*l,h*o+i,h*l-r*a,0,c*l-r*o,h*l+r*a,s*l*l+i,0,0,0,0,1),this}makeScale(e,t,i){return this.set(e,0,0,0,0,t,0,0,0,0,i,0,0,0,0,1),this}makeShear(e,t,i,r,s,a){return this.set(1,i,s,0,e,1,a,0,t,r,1,0,0,0,0,1),this}compose(e,t,i){const r=this.elements,s=t._x,a=t._y,o=t._z,l=t._w,c=s+s,h=a+a,d=o+o,u=s*c,p=s*h,f=s*d,g=a*h,m=a*d,v=o*d,x=l*c,_=l*h,b=l*d,S=i.x,C=i.y,k=i.z;return r[0]=(1-(g+v))*S,r[1]=(p+b)*S,r[2]=(f-_)*S,r[3]=0,r[4]=(p-b)*C,r[5]=(1-(u+v))*C,r[6]=(m+x)*C,r[7]=0,r[8]=(f+_)*k,r[9]=(m-x)*k,r[10]=(1-(u+g))*k,r[11]=0,r[12]=e.x,r[13]=e.y,r[14]=e.z,r[15]=1,this}decompose(e,t,i){const r=this.elements;let s=il.set(r[0],r[1],r[2]).length();const a=il.set(r[4],r[5],r[6]).length(),o=il.set(r[8],r[9],r[10]).length();this.determinant()<0&&(s=-s),e.x=r[12],e.y=r[13],e.z=r[14],kn.copy(this);const c=1/s,h=1/a,d=1/o;return kn.elements[0]*=c,kn.elements[1]*=c,kn.elements[2]*=c,kn.elements[4]*=h,kn.elements[5]*=h,kn.elements[6]*=h,kn.elements[8]*=d,kn.elements[9]*=d,kn.elements[10]*=d,t.setFromRotationMatrix(kn),i.x=s,i.y=a,i.z=o,this}makePerspective(e,t,i,r,s,a){a===void 0&&console.warn("THREE.Matrix4: .makePerspective() has been redefined and has a new signature. Please check the docs.");const o=this.elements,l=2*s/(t-e),c=2*s/(i-r),h=(t+e)/(t-e),d=(i+r)/(i-r),u=-(a+s)/(a-s),p=-2*a*s/(a-s);return o[0]=l,o[4]=0,o[8]=h,o[12]=0,o[1]=0,o[5]=c,o[9]=d,o[13]=0,o[2]=0,o[6]=0,o[10]=u,o[14]=p,o[3]=0,o[7]=0,o[11]=-1,o[15]=0,this}makeOrthographic(e,t,i,r,s,a){const o=this.elements,l=1/(t-e),c=1/(i-r),h=1/(a-s),d=(t+e)*l,u=(i+r)*c,p=(a+s)*h;return o[0]=2*l,o[4]=0,o[8]=0,o[12]=-d,o[1]=0,o[5]=2*c,o[9]=0,o[13]=-u,o[2]=0,o[6]=0,o[10]=-2*h,o[14]=-p,o[3]=0,o[7]=0,o[11]=0,o[15]=1,this}equals(e){const t=this.elements,i=e.elements;for(let r=0;r<16;r++)if(t[r]!==i[r])return!1;return!0}fromArray(e,t=0){for(let i=0;i<16;i++)this.elements[i]=e[i+t];return this}toArray(e=[],t=0){const i=this.elements;return e[t]=i[0],e[t+1]=i[1],e[t+2]=i[2],e[t+3]=i[3],e[t+4]=i[4],e[t+5]=i[5],e[t+6]=i[6],e[t+7]=i[7],e[t+8]=i[8],e[t+9]=i[9],e[t+10]=i[10],e[t+11]=i[11],e[t+12]=i[12],e[t+13]=i[13],e[t+14]=i[14],e[t+15]=i[15],e}}yt.prototype.isMatrix4=!0;const il=new A,kn=new yt,VX=new A(0,0,0),DX=new A(1,1,1),Zs=new A,zd=new A,Qr=new A,vy=new yt,yy=new xi;class Va{constructor(e=0,t=0,i=0,r=Va.DefaultOrder){this._x=e,this._y=t,this._z=i,this._order=r}get x(){return this._x}set x(e){this._x=e,this._onChangeCallback()}get y(){return this._y}set y(e){this._y=e,this._onChangeCallback()}get z(){return this._z}set z(e){this._z=e,this._onChangeCallback()}get order(){return this._order}set order(e){this._order=e,this._onChangeCallback()}set(e,t,i,r=this._order){return this._x=e,this._y=t,this._z=i,this._order=r,this._onChangeCallback(),this}clone(){return new this.constructor(this._x,this._y,this._z,this._order)}copy(e){return this._x=e._x,this._y=e._y,this._z=e._z,this._order=e._order,this._onChangeCallback(),this}setFromRotationMatrix(e,t=this._order,i=!0){const r=e.elements,s=r[0],a=r[4],o=r[8],l=r[1],c=r[5],h=r[9],d=r[2],u=r[6],p=r[10];switch(t){case"XYZ":this._y=Math.asin(gr(o,-1,1)),Math.abs(o)<.9999999?(this._x=Math.atan2(-h,p),this._z=Math.atan2(-a,s)):(this._x=Math.atan2(u,c),this._z=0);break;case"YXZ":this._x=Math.asin(-gr(h,-1,1)),Math.abs(h)<.9999999?(this._y=Math.atan2(o,p),this._z=Math.atan2(l,c)):(this._y=Math.atan2(-d,s),this._z=0);break;case"ZXY":this._x=Math.asin(gr(u,-1,1)),Math.abs(u)<.9999999?(this._y=Math.atan2(-d,p),this._z=Math.atan2(-a,c)):(this._y=0,this._z=Math.atan2(l,s));break;case"ZYX":this._y=Math.asin(-gr(d,-1,1)),Math.abs(d)<.9999999?(this._x=Math.atan2(u,p),this._z=Math.atan2(l,s)):(this._x=0,this._z=Math.atan2(-a,c));break;case"YZX":this._z=Math.asin(gr(l,-1,1)),Math.abs(l)<.9999999?(this._x=Math.atan2(-h,c),this._y=Math.atan2(-d,s)):(this._x=0,this._y=Math.atan2(o,p));break;case"XZY":this._z=Math.asin(-gr(a,-1,1)),Math.abs(a)<.9999999?(this._x=Math.atan2(u,c),this._y=Math.atan2(o,s)):(this._x=Math.atan2(-h,p),this._y=0);break;default:console.warn("THREE.Euler: .setFromRotationMatrix() encountered an unknown order: "+t)}return this._order=t,i===!0&&this._onChangeCallback(),this}setFromQuaternion(e,t,i){return vy.makeRotationFromQuaternion(e),this.setFromRotationMatrix(vy,t,i)}setFromVector3(e,t=this._order){return this.set(e.x,e.y,e.z,t)}reorder(e){return yy.setFromEuler(this),this.setFromQuaternion(yy,e)}equals(e){return e._x===this._x&&e._y===this._y&&e._z===this._z&&e._order===this._order}fromArray(e){return this._x=e[0],this._y=e[1],this._z=e[2],e[3]!==void 0&&(this._order=e[3]),this._onChangeCallback(),this}toArray(e=[],t=0){return e[t]=this._x,e[t+1]=this._y,e[t+2]=this._z,e[t+3]=this._order,e}_onChange(e){return this._onChangeCallback=e,this}_onChangeCallback(){}}Va.prototype.isEuler=!0;Va.DefaultOrder="XYZ";Va.RotationOrders=["XYZ","YZX","ZXY","XZY","YXZ","ZYX"];class km{constructor(){this.mask=1}set(e){this.mask=(1<>>0}enable(e){this.mask|=1<1){for(let t=0;t1){for(let i=0;i0){r.children=[];for(let o=0;o0){r.animations=[];for(let o=0;o0&&(i.geometries=o),l.length>0&&(i.materials=l),c.length>0&&(i.textures=c),h.length>0&&(i.images=h),d.length>0&&(i.shapes=d),u.length>0&&(i.skeletons=u),p.length>0&&(i.animations=p),f.length>0&&(i.nodes=f)}return i.object=r,i;function a(o){const l=[];for(const c in o){const h=o[c];delete h.metadata,l.push(h)}return l}}clone(e){return new this.constructor().copy(this,e)}copy(e,t=!0){if(this.name=e.name,this.up.copy(e.up),this.position.copy(e.position),this.rotation.order=e.rotation.order,this.quaternion.copy(e.quaternion),this.scale.copy(e.scale),this.matrix.copy(e.matrix),this.matrixWorld.copy(e.matrixWorld),this.matrixAutoUpdate=e.matrixAutoUpdate,this.matrixWorldNeedsUpdate=e.matrixWorldNeedsUpdate,this.layers.mask=e.layers.mask,this.visible=e.visible,this.castShadow=e.castShadow,this.receiveShadow=e.receiveShadow,this.frustumCulled=e.frustumCulled,this.renderOrder=e.renderOrder,this.userData=JSON.parse(JSON.stringify(e.userData)),t===!0)for(let i=0;i0?r.multiplyScalar(1/Math.sqrt(s)):r.set(0,0,0)}static getBarycoord(e,t,i,r,s){An.subVectors(r,t),Ts.subVectors(i,t),jf.subVectors(e,t);const a=An.dot(An),o=An.dot(Ts),l=An.dot(jf),c=Ts.dot(Ts),h=Ts.dot(jf),d=a*c-o*o;if(d===0)return s.set(-2,-1,-1);const u=1/d,p=(c*l-o*h)*u,f=(a*h-o*l)*u;return s.set(1-p-f,f,p)}static containsPoint(e,t,i,r){return this.getBarycoord(e,t,i,r,Cs),Cs.x>=0&&Cs.y>=0&&Cs.x+Cs.y<=1}static getUV(e,t,i,r,s,a,o,l){return this.getBarycoord(e,t,i,r,Cs),l.set(0,0),l.addScaledVector(s,Cs.x),l.addScaledVector(a,Cs.y),l.addScaledVector(o,Cs.z),l}static isFrontFacing(e,t,i,r){return An.subVectors(i,t),Ts.subVectors(e,t),An.cross(Ts).dot(r)<0}set(e,t,i){return this.a.copy(e),this.b.copy(t),this.c.copy(i),this}setFromPointsAndIndices(e,t,i,r){return this.a.copy(e[t]),this.b.copy(e[i]),this.c.copy(e[r]),this}setFromAttributeAndIndices(e,t,i,r){return this.a.fromBufferAttribute(e,t),this.b.fromBufferAttribute(e,i),this.c.fromBufferAttribute(e,r),this}clone(){return new this.constructor().copy(this)}copy(e){return this.a.copy(e.a),this.b.copy(e.b),this.c.copy(e.c),this}getArea(){return An.subVectors(this.c,this.b),Ts.subVectors(this.a,this.b),An.cross(Ts).length()*.5}getMidpoint(e){return e.addVectors(this.a,this.b).add(this.c).multiplyScalar(1/3)}getNormal(e){return tr.getNormal(this.a,this.b,this.c,e)}getPlane(e){return e.setFromCoplanarPoints(this.a,this.b,this.c)}getBarycoord(e,t){return tr.getBarycoord(e,this.a,this.b,this.c,t)}getUV(e,t,i,r,s){return tr.getUV(e,this.a,this.b,this.c,t,i,r,s)}containsPoint(e){return tr.containsPoint(e,this.a,this.b,this.c)}isFrontFacing(e){return tr.isFrontFacing(this.a,this.b,this.c,e)}intersectsBox(e){return e.intersectsTriangle(this)}closestPointToPoint(e,t){const i=this.a,r=this.b,s=this.c;let a,o;nl.subVectors(r,i),sl.subVectors(s,i),Nf.subVectors(e,i);const l=nl.dot(Nf),c=sl.dot(Nf);if(l<=0&&c<=0)return t.copy(i);Bf.subVectors(e,r);const h=nl.dot(Bf),d=sl.dot(Bf);if(h>=0&&d<=h)return t.copy(r);const u=l*d-h*c;if(u<=0&&l>=0&&h<=0)return a=l/(l-h),t.copy(i).addScaledVector(nl,a);Gf.subVectors(e,s);const p=nl.dot(Gf),f=sl.dot(Gf);if(f>=0&&p<=f)return t.copy(s);const g=p*c-l*f;if(g<=0&&c>=0&&f<=0)return o=c/(c-f),t.copy(i).addScaledVector(sl,o);const m=h*f-p*d;if(m<=0&&d-h>=0&&p-f>=0)return My.subVectors(s,r),o=(d-h)/(d-h+(p-f)),t.copy(r).addScaledVector(My,o);const v=1/(m+g+u);return a=g*v,o=u*v,t.copy(i).addScaledVector(nl,a).addScaledVector(sl,o)}equals(e){return e.a.equals(this.a)&&e.b.equals(this.b)&&e.c.equals(this.c)}}let GX=0;class rr extends za{constructor(){super(),Object.defineProperty(this,"id",{value:GX++}),this.uuid=Wn(),this.name="",this.type="Material",this.fog=!0,this.blending=El,this.side=Qc,this.vertexColors=!1,this.opacity=1,this.transparent=!1,this.blendSrc=n_,this.blendDst=s_,this.blendEquation=vl,this.blendSrcAlpha=null,this.blendDstAlpha=null,this.blendEquationAlpha=null,this.depthFunc=Ag,this.depthTest=!0,this.depthWrite=!0,this.stencilWriteMask=255,this.stencilFunc=CX,this.stencilRef=0,this.stencilFuncMask=255,this.stencilFail=Cf,this.stencilZFail=Cf,this.stencilZPass=Cf,this.stencilWrite=!1,this.clippingPlanes=null,this.clipIntersection=!1,this.clipShadows=!1,this.shadowSide=null,this.colorWrite=!0,this.precision=null,this.polygonOffset=!1,this.polygonOffsetFactor=0,this.polygonOffsetUnits=0,this.dithering=!1,this.alphaToCoverage=!1,this.premultipliedAlpha=!1,this.visible=!0,this.toneMapped=!0,this.userData={},this.version=0,this._alphaTest=0}get alphaTest(){return this._alphaTest}set alphaTest(e){this._alphaTest>0!=e>0&&this.version++,this._alphaTest=e}onBuild(){}onBeforeRender(){}onBeforeCompile(){}customProgramCacheKey(){return this.onBeforeCompile.toString()}setValues(e){if(e!==void 0)for(const t in e){const i=e[t];if(i===void 0){console.warn("THREE.Material: '"+t+"' parameter is undefined.");continue}if(t==="shading"){console.warn("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead."),this.flatShading=i===r_;continue}const r=this[t];if(r===void 0){console.warn("THREE."+this.type+": '"+t+"' is not a property of this material.");continue}r&&r.isColor?r.set(i):r&&r.isVector3&&i&&i.isVector3?r.copy(i):this[t]=i}}toJSON(e){const t=e===void 0||typeof e=="string";t&&(e={textures:{},images:{}});const i={metadata:{version:4.5,type:"Material",generator:"Material.toJSON"}};i.uuid=this.uuid,i.type=this.type,this.name!==""&&(i.name=this.name),this.color&&this.color.isColor&&(i.color=this.color.getHex()),this.roughness!==void 0&&(i.roughness=this.roughness),this.metalness!==void 0&&(i.metalness=this.metalness),this.sheen!==void 0&&(i.sheen=this.sheen),this.sheenColor&&this.sheenColor.isColor&&(i.sheenColor=this.sheenColor.getHex()),this.sheenRoughness!==void 0&&(i.sheenRoughness=this.sheenRoughness),this.emissive&&this.emissive.isColor&&(i.emissive=this.emissive.getHex()),this.emissiveIntensity&&this.emissiveIntensity!==1&&(i.emissiveIntensity=this.emissiveIntensity),this.specular&&this.specular.isColor&&(i.specular=this.specular.getHex()),this.specularIntensity!==void 0&&(i.specularIntensity=this.specularIntensity),this.specularColor&&this.specularColor.isColor&&(i.specularColor=this.specularColor.getHex()),this.shininess!==void 0&&(i.shininess=this.shininess),this.clearcoat!==void 0&&(i.clearcoat=this.clearcoat),this.clearcoatRoughness!==void 0&&(i.clearcoatRoughness=this.clearcoatRoughness),this.clearcoatMap&&this.clearcoatMap.isTexture&&(i.clearcoatMap=this.clearcoatMap.toJSON(e).uuid),this.clearcoatRoughnessMap&&this.clearcoatRoughnessMap.isTexture&&(i.clearcoatRoughnessMap=this.clearcoatRoughnessMap.toJSON(e).uuid),this.clearcoatNormalMap&&this.clearcoatNormalMap.isTexture&&(i.clearcoatNormalMap=this.clearcoatNormalMap.toJSON(e).uuid,i.clearcoatNormalScale=this.clearcoatNormalScale.toArray()),this.map&&this.map.isTexture&&(i.map=this.map.toJSON(e).uuid),this.matcap&&this.matcap.isTexture&&(i.matcap=this.matcap.toJSON(e).uuid),this.alphaMap&&this.alphaMap.isTexture&&(i.alphaMap=this.alphaMap.toJSON(e).uuid),this.lightMap&&this.lightMap.isTexture&&(i.lightMap=this.lightMap.toJSON(e).uuid,i.lightMapIntensity=this.lightMapIntensity),this.aoMap&&this.aoMap.isTexture&&(i.aoMap=this.aoMap.toJSON(e).uuid,i.aoMapIntensity=this.aoMapIntensity),this.bumpMap&&this.bumpMap.isTexture&&(i.bumpMap=this.bumpMap.toJSON(e).uuid,i.bumpScale=this.bumpScale),this.normalMap&&this.normalMap.isTexture&&(i.normalMap=this.normalMap.toJSON(e).uuid,i.normalMapType=this.normalMapType,i.normalScale=this.normalScale.toArray()),this.displacementMap&&this.displacementMap.isTexture&&(i.displacementMap=this.displacementMap.toJSON(e).uuid,i.displacementScale=this.displacementScale,i.displacementBias=this.displacementBias),this.roughnessMap&&this.roughnessMap.isTexture&&(i.roughnessMap=this.roughnessMap.toJSON(e).uuid),this.metalnessMap&&this.metalnessMap.isTexture&&(i.metalnessMap=this.metalnessMap.toJSON(e).uuid),this.emissiveMap&&this.emissiveMap.isTexture&&(i.emissiveMap=this.emissiveMap.toJSON(e).uuid),this.specularMap&&this.specularMap.isTexture&&(i.specularMap=this.specularMap.toJSON(e).uuid),this.specularIntensityMap&&this.specularIntensityMap.isTexture&&(i.specularIntensityMap=this.specularIntensityMap.toJSON(e).uuid),this.specularColorMap&&this.specularColorMap.isTexture&&(i.specularColorMap=this.specularColorMap.toJSON(e).uuid),this.envMap&&this.envMap.isTexture&&(i.envMap=this.envMap.toJSON(e).uuid,this.combine!==void 0&&(i.combine=this.combine)),this.envMapIntensity!==void 0&&(i.envMapIntensity=this.envMapIntensity),this.reflectivity!==void 0&&(i.reflectivity=this.reflectivity),this.refractionRatio!==void 0&&(i.refractionRatio=this.refractionRatio),this.gradientMap&&this.gradientMap.isTexture&&(i.gradientMap=this.gradientMap.toJSON(e).uuid),this.transmission!==void 0&&(i.transmission=this.transmission),this.transmissionMap&&this.transmissionMap.isTexture&&(i.transmissionMap=this.transmissionMap.toJSON(e).uuid),this.thickness!==void 0&&(i.thickness=this.thickness),this.thicknessMap&&this.thicknessMap.isTexture&&(i.thicknessMap=this.thicknessMap.toJSON(e).uuid),this.attenuationDistance!==void 0&&(i.attenuationDistance=this.attenuationDistance),this.attenuationColor!==void 0&&(i.attenuationColor=this.attenuationColor.getHex()),this.size!==void 0&&(i.size=this.size),this.shadowSide!==null&&(i.shadowSide=this.shadowSide),this.sizeAttenuation!==void 0&&(i.sizeAttenuation=this.sizeAttenuation),this.blending!==El&&(i.blending=this.blending),this.side!==Qc&&(i.side=this.side),this.vertexColors&&(i.vertexColors=!0),this.opacity<1&&(i.opacity=this.opacity),this.transparent===!0&&(i.transparent=this.transparent),i.depthFunc=this.depthFunc,i.depthTest=this.depthTest,i.depthWrite=this.depthWrite,i.colorWrite=this.colorWrite,i.stencilWrite=this.stencilWrite,i.stencilWriteMask=this.stencilWriteMask,i.stencilFunc=this.stencilFunc,i.stencilRef=this.stencilRef,i.stencilFuncMask=this.stencilFuncMask,i.stencilFail=this.stencilFail,i.stencilZFail=this.stencilZFail,i.stencilZPass=this.stencilZPass,this.rotation!==void 0&&this.rotation!==0&&(i.rotation=this.rotation),this.polygonOffset===!0&&(i.polygonOffset=!0),this.polygonOffsetFactor!==0&&(i.polygonOffsetFactor=this.polygonOffsetFactor),this.polygonOffsetUnits!==0&&(i.polygonOffsetUnits=this.polygonOffsetUnits),this.linewidth!==void 0&&this.linewidth!==1&&(i.linewidth=this.linewidth),this.dashSize!==void 0&&(i.dashSize=this.dashSize),this.gapSize!==void 0&&(i.gapSize=this.gapSize),this.scale!==void 0&&(i.scale=this.scale),this.dithering===!0&&(i.dithering=!0),this.alphaTest>0&&(i.alphaTest=this.alphaTest),this.alphaToCoverage===!0&&(i.alphaToCoverage=this.alphaToCoverage),this.premultipliedAlpha===!0&&(i.premultipliedAlpha=this.premultipliedAlpha),this.wireframe===!0&&(i.wireframe=this.wireframe),this.wireframeLinewidth>1&&(i.wireframeLinewidth=this.wireframeLinewidth),this.wireframeLinecap!=="round"&&(i.wireframeLinecap=this.wireframeLinecap),this.wireframeLinejoin!=="round"&&(i.wireframeLinejoin=this.wireframeLinejoin),this.flatShading===!0&&(i.flatShading=this.flatShading),this.visible===!1&&(i.visible=!1),this.toneMapped===!1&&(i.toneMapped=!1),JSON.stringify(this.userData)!=="{}"&&(i.userData=this.userData);function r(s){const a=[];for(const o in s){const l=s[o];delete l.metadata,a.push(l)}return a}if(t){const s=r(e.textures),a=r(e.images);s.length>0&&(i.textures=s),a.length>0&&(i.images=a)}return i}clone(){return new this.constructor().copy(this)}copy(e){this.name=e.name,this.fog=e.fog,this.blending=e.blending,this.side=e.side,this.vertexColors=e.vertexColors,this.opacity=e.opacity,this.transparent=e.transparent,this.blendSrc=e.blendSrc,this.blendDst=e.blendDst,this.blendEquation=e.blendEquation,this.blendSrcAlpha=e.blendSrcAlpha,this.blendDstAlpha=e.blendDstAlpha,this.blendEquationAlpha=e.blendEquationAlpha,this.depthFunc=e.depthFunc,this.depthTest=e.depthTest,this.depthWrite=e.depthWrite,this.stencilWriteMask=e.stencilWriteMask,this.stencilFunc=e.stencilFunc,this.stencilRef=e.stencilRef,this.stencilFuncMask=e.stencilFuncMask,this.stencilFail=e.stencilFail,this.stencilZFail=e.stencilZFail,this.stencilZPass=e.stencilZPass,this.stencilWrite=e.stencilWrite;const t=e.clippingPlanes;let i=null;if(t!==null){const r=t.length;i=new Array(r);for(let s=0;s!==r;++s)i[s]=t[s].clone()}return this.clippingPlanes=i,this.clipIntersection=e.clipIntersection,this.clipShadows=e.clipShadows,this.shadowSide=e.shadowSide,this.colorWrite=e.colorWrite,this.precision=e.precision,this.polygonOffset=e.polygonOffset,this.polygonOffsetFactor=e.polygonOffsetFactor,this.polygonOffsetUnits=e.polygonOffsetUnits,this.dithering=e.dithering,this.alphaTest=e.alphaTest,this.alphaToCoverage=e.alphaToCoverage,this.premultipliedAlpha=e.premultipliedAlpha,this.visible=e.visible,this.toneMapped=e.toneMapped,this.userData=JSON.parse(JSON.stringify(e.userData)),this}dispose(){this.dispatchEvent({type:"dispose"})}set needsUpdate(e){e===!0&&this.version++}}rr.prototype.isMaterial=!0;rr.fromType=function(){return null};class ps extends rr{constructor(e){super(),this.type="MeshBasicMaterial",this.color=new tt(16777215),this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=_p,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}ps.prototype.isMeshBasicMaterial=!0;const qi=new A,Dd=new _e;class Ai{constructor(e,t,i){if(Array.isArray(e))throw new TypeError("THREE.BufferAttribute: array should be a Typed Array.");this.name="",this.array=e,this.itemSize=t,this.count=e!==void 0?e.length/t:0,this.normalized=i===!0,this.usage=th,this.updateRange={offset:0,count:-1},this.version=0}onUploadCallback(){}set needsUpdate(e){e===!0&&this.version++}setUsage(e){return this.usage=e,this}copy(e){return this.name=e.name,this.array=new e.array.constructor(e.array),this.itemSize=e.itemSize,this.count=e.count,this.normalized=e.normalized,this.usage=e.usage,this}copyAt(e,t,i){e*=this.itemSize,i*=t.itemSize;for(let r=0,s=this.itemSize;r0&&(e.userData=this.userData),this.parameters!==void 0){const l=this.parameters;for(const c in l)l[c]!==void 0&&(e[c]=l[c]);return e}e.data={attributes:{}};const t=this.index;t!==null&&(e.data.index={type:t.array.constructor.name,array:Array.prototype.slice.call(t.array)});const i=this.attributes;for(const l in i){const c=i[l];e.data.attributes[l]=c.toJSON(e.data)}const r={};let s=!1;for(const l in this.morphAttributes){const c=this.morphAttributes[l],h=[];for(let d=0,u=c.length;d0&&(r[l]=h,s=!0)}s&&(e.data.morphAttributes=r,e.data.morphTargetsRelative=this.morphTargetsRelative);const a=this.groups;a.length>0&&(e.data.groups=JSON.parse(JSON.stringify(a)));const o=this.boundingSphere;return o!==null&&(e.data.boundingSphere={center:o.center.toArray(),radius:o.radius}),e}clone(){return new this.constructor().copy(this)}copy(e){this.index=null,this.attributes={},this.morphAttributes={},this.groups=[],this.boundingBox=null,this.boundingSphere=null;const t={};this.name=e.name;const i=e.index;i!==null&&this.setIndex(i.clone(t));const r=e.attributes;for(const c in r){const h=r[c];this.setAttribute(c,h.clone(t))}const s=e.morphAttributes;for(const c in s){const h=[],d=s[c];for(let u=0,p=d.length;u0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Mesh.updateMorphTargets() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.")}}raycast(e,t){const i=this.geometry,r=this.material,s=this.matrixWorld;if(r===void 0||(i.boundingSphere===null&&i.computeBoundingSphere(),Uf.copy(i.boundingSphere),Uf.applyMatrix4(s),e.ray.intersectsSphere(Uf)===!1)||($y.copy(s).invert(),ol.copy(e.ray).applyMatrix4($y),i.boundingBox!==null&&ol.intersectsBox(i.boundingBox)===!1))return;let a;if(i.isBufferGeometry){const o=i.index,l=i.attributes.position,c=i.morphAttributes.position,h=i.morphTargetsRelative,d=i.attributes.uv,u=i.attributes.uv2,p=i.groups,f=i.drawRange;if(o!==null)if(Array.isArray(r))for(let g=0,m=p.length;gt.far?null:{distance:c,point:Ud.clone(),object:n}}function Wd(n,e,t,i,r,s,a,o,l,c,h,d){Js.fromBufferAttribute(r,c),Qs.fromBufferAttribute(r,h),ea.fromBufferAttribute(r,d);const u=n.morphTargetInfluences;if(s&&u){Fd.set(0,0,0),jd.set(0,0,0),Nd.set(0,0,0);for(let f=0,g=s.length;f0?1:-1,h.push(re.x,re.y,re.z),d.push(Z/k),d.push(1-le/O),ee+=1}}for(let le=0;le0&&(t.defines=this.defines),t.vertexShader=this.vertexShader,t.fragmentShader=this.fragmentShader;const i={};for(const r in this.extensions)this.extensions[r]===!0&&(i[r]=!0);return Object.keys(i).length>0&&(t.extensions=i),t}}Kn.prototype.isShaderMaterial=!0;class wp extends Kt{constructor(){super(),this.type="Camera",this.matrixWorldInverse=new yt,this.projectionMatrix=new yt,this.projectionMatrixInverse=new yt}copy(e,t){return super.copy(e,t),this.matrixWorldInverse.copy(e.matrixWorldInverse),this.projectionMatrix.copy(e.projectionMatrix),this.projectionMatrixInverse.copy(e.projectionMatrixInverse),this}getWorldDirection(e){this.updateWorldMatrix(!0,!1);const t=this.matrixWorld.elements;return e.set(-t[8],-t[9],-t[10]).normalize()}updateMatrixWorld(e){super.updateMatrixWorld(e),this.matrixWorldInverse.copy(this.matrixWorld).invert()}updateWorldMatrix(e,t){super.updateWorldMatrix(e,t),this.matrixWorldInverse.copy(this.matrixWorld).invert()}clone(){return new this.constructor().copy(this)}}wp.prototype.isCamera=!0;class Mr extends wp{constructor(e=50,t=1,i=.1,r=2e3){super(),this.type="PerspectiveCamera",this.fov=e,this.zoom=1,this.near=i,this.far=r,this.focus=10,this.aspect=t,this.view=null,this.filmGauge=35,this.filmOffset=0,this.updateProjectionMatrix()}copy(e,t){return super.copy(e,t),this.fov=e.fov,this.zoom=e.zoom,this.near=e.near,this.far=e.far,this.focus=e.focus,this.aspect=e.aspect,this.view=e.view===null?null:Object.assign({},e.view),this.filmGauge=e.filmGauge,this.filmOffset=e.filmOffset,this}setFocalLength(e){const t=.5*this.getFilmHeight()/e;this.fov=Vg*2*Math.atan(t),this.updateProjectionMatrix()}getFocalLength(){const e=Math.tan(Su*.5*this.fov);return .5*this.getFilmHeight()/e}getEffectiveFOV(){return Vg*2*Math.atan(Math.tan(Su*.5*this.fov)/this.zoom)}getFilmWidth(){return this.filmGauge*Math.min(this.aspect,1)}getFilmHeight(){return this.filmGauge/Math.max(this.aspect,1)}setViewOffset(e,t,i,r,s,a){this.aspect=e/t,this.view===null&&(this.view={enabled:!0,fullWidth:1,fullHeight:1,offsetX:0,offsetY:0,width:1,height:1}),this.view.enabled=!0,this.view.fullWidth=e,this.view.fullHeight=t,this.view.offsetX=i,this.view.offsetY=r,this.view.width=s,this.view.height=a,this.updateProjectionMatrix()}clearViewOffset(){this.view!==null&&(this.view.enabled=!1),this.updateProjectionMatrix()}updateProjectionMatrix(){const e=this.near;let t=e*Math.tan(Su*.5*this.fov)/this.zoom,i=2*t,r=this.aspect*i,s=-.5*r;const a=this.view;if(this.view!==null&&this.view.enabled){const l=a.fullWidth,c=a.fullHeight;s+=a.offsetX*r/l,t-=a.offsetY*i/c,r*=a.width/l,i*=a.height/c}const o=this.filmOffset;o!==0&&(s+=e*o/this.getFilmWidth()),this.projectionMatrix.makePerspective(s,s+r,t,t-i,e,this.far),this.projectionMatrixInverse.copy(this.projectionMatrix).invert()}toJSON(e){const t=super.toJSON(e);return t.object.fov=this.fov,t.object.zoom=this.zoom,t.object.near=this.near,t.object.far=this.far,t.object.focus=this.focus,t.object.aspect=this.aspect,this.view!==null&&(t.object.view=Object.assign({},this.view)),t.object.filmGauge=this.filmGauge,t.object.filmOffset=this.filmOffset,t}}Mr.prototype.isPerspectiveCamera=!0;const ll=90,cl=1;class Am extends Kt{constructor(e,t,i){if(super(),this.type="CubeCamera",i.isWebGLCubeRenderTarget!==!0){console.error("THREE.CubeCamera: The constructor now expects an instance of WebGLCubeRenderTarget as third parameter.");return}this.renderTarget=i;const r=new Mr(ll,cl,e,t);r.layers=this.layers,r.up.set(0,-1,0),r.lookAt(new A(1,0,0)),this.add(r);const s=new Mr(ll,cl,e,t);s.layers=this.layers,s.up.set(0,-1,0),s.lookAt(new A(-1,0,0)),this.add(s);const a=new Mr(ll,cl,e,t);a.layers=this.layers,a.up.set(0,0,1),a.lookAt(new A(0,1,0)),this.add(a);const o=new Mr(ll,cl,e,t);o.layers=this.layers,o.up.set(0,0,-1),o.lookAt(new A(0,-1,0)),this.add(o);const l=new Mr(ll,cl,e,t);l.layers=this.layers,l.up.set(0,-1,0),l.lookAt(new A(0,0,1)),this.add(l);const c=new Mr(ll,cl,e,t);c.layers=this.layers,c.up.set(0,-1,0),c.lookAt(new A(0,0,-1)),this.add(c)}update(e,t){this.parent===null&&this.updateMatrixWorld();const i=this.renderTarget,[r,s,a,o,l,c]=this.children,h=e.getRenderTarget(),d=e.outputEncoding,u=e.toneMapping,p=e.xr.enabled;e.outputEncoding=js,e.toneMapping=Ds,e.xr.enabled=!1;const f=i.texture.generateMipmaps;i.texture.generateMipmaps=!1,e.setRenderTarget(i,0),e.render(t,r),e.setRenderTarget(i,1),e.render(t,s),e.setRenderTarget(i,2),e.render(t,a),e.setRenderTarget(i,3),e.render(t,o),e.setRenderTarget(i,4),e.render(t,l),i.texture.generateMipmaps=f,e.setRenderTarget(i,5),e.render(t,c),e.setRenderTarget(h),e.outputEncoding=d,e.toneMapping=u,e.xr.enabled=p,i.texture.needsPMREMUpdate=!0}}class rd extends dr{constructor(e,t,i,r,s,a,o,l,c,h){e=e!==void 0?e:[],t=t!==void 0?t:Eo,super(e,t,i,r,s,a,o,l,c,h),this.flipY=!1}get images(){return this.image}set images(e){this.image=e}}rd.prototype.isCubeTexture=!0;class p_ extends nn{constructor(e,t={}){super(e,e,t);const i={width:e,height:e,depth:1},r=[i,i,i,i,i,i];this.texture=new rd(r,t.mapping,t.wrapS,t.wrapT,t.magFilter,t.minFilter,t.format,t.type,t.anisotropy,t.encoding),this.texture.isRenderTargetTexture=!0,this.texture.generateMipmaps=t.generateMipmaps!==void 0?t.generateMipmaps:!1,this.texture.minFilter=t.minFilter!==void 0?t.minFilter:jr}fromEquirectangularTexture(e,t){this.texture.type=t.type,this.texture.encoding=t.encoding,this.texture.generateMipmaps=t.generateMipmaps,this.texture.minFilter=t.minFilter,this.texture.magFilter=t.magFilter;const i={uniforms:{tEquirect:{value:null}},vertexShader:` - - varying vec3 vWorldDirection; - - vec3 transformDirection( in vec3 dir, in mat4 matrix ) { - - return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz ); - - } - - void main() { - - vWorldDirection = transformDirection( position, modelMatrix ); - - #include - #include - - } - `,fragmentShader:` - - uniform sampler2D tEquirect; - - varying vec3 vWorldDirection; - - #include - - void main() { - - vec3 direction = normalize( vWorldDirection ); - - vec2 sampleUV = equirectUv( direction ); - - gl_FragColor = texture2D( tEquirect, sampleUV ); - - } - `},r=new Ri(5,5,5),s=new Kn({name:"CubemapFromEquirect",uniforms:Hl(i.uniforms),vertexShader:i.vertexShader,fragmentShader:i.fragmentShader,side:Un,blending:wa});s.uniforms.tEquirect.value=t;const a=new Be(r,s),o=t.minFilter;return t.minFilter===id&&(t.minFilter=jr),new Am(1,10,this).update(e,a),t.minFilter=o,a.geometry.dispose(),a.material.dispose(),this}clear(e,t,i,r){const s=e.getRenderTarget();for(let a=0;a<6;a++)e.setRenderTarget(this,a),e.clear(t,i,r);e.setRenderTarget(s)}}p_.prototype.isWebGLCubeRenderTarget=!0;const qf=new A,qX=new A,ZX=new vr;class Ls{constructor(e=new A(1,0,0),t=0){this.normal=e,this.constant=t}set(e,t){return this.normal.copy(e),this.constant=t,this}setComponents(e,t,i,r){return this.normal.set(e,t,i),this.constant=r,this}setFromNormalAndCoplanarPoint(e,t){return this.normal.copy(e),this.constant=-t.dot(this.normal),this}setFromCoplanarPoints(e,t,i){const r=qf.subVectors(i,t).cross(qX.subVectors(e,t)).normalize();return this.setFromNormalAndCoplanarPoint(r,e),this}copy(e){return this.normal.copy(e.normal),this.constant=e.constant,this}normalize(){const e=1/this.normal.length();return this.normal.multiplyScalar(e),this.constant*=e,this}negate(){return this.constant*=-1,this.normal.negate(),this}distanceToPoint(e){return this.normal.dot(e)+this.constant}distanceToSphere(e){return this.distanceToPoint(e.center)-e.radius}projectPoint(e,t){return t.copy(this.normal).multiplyScalar(-this.distanceToPoint(e)).add(e)}intersectLine(e,t){const i=e.delta(qf),r=this.normal.dot(i);if(r===0)return this.distanceToPoint(e.start)===0?t.copy(e.start):null;const s=-(e.start.dot(this.normal)+this.constant)/r;return s<0||s>1?null:t.copy(i).multiplyScalar(s).add(e.start)}intersectsLine(e){const t=this.distanceToPoint(e.start),i=this.distanceToPoint(e.end);return t<0&&i>0||i<0&&t>0}intersectsBox(e){return e.intersectsPlane(this)}intersectsSphere(e){return e.intersectsPlane(this)}coplanarPoint(e){return e.copy(this.normal).multiplyScalar(-this.constant)}applyMatrix4(e,t){const i=t||ZX.getNormalMatrix(e),r=this.coplanarPoint(qf).applyMatrix4(e),s=this.normal.applyMatrix3(i).normalize();return this.constant=-r.dot(s),this}translate(e){return this.constant-=e.dot(this.normal),this}equals(e){return e.normal.equals(this.normal)&&e.constant===this.constant}clone(){return new this.constructor().copy(this)}}Ls.prototype.isPlane=!0;const hl=new jo,Xd=new A;class Mp{constructor(e=new Ls,t=new Ls,i=new Ls,r=new Ls,s=new Ls,a=new Ls){this.planes=[e,t,i,r,s,a]}set(e,t,i,r,s,a){const o=this.planes;return o[0].copy(e),o[1].copy(t),o[2].copy(i),o[3].copy(r),o[4].copy(s),o[5].copy(a),this}copy(e){const t=this.planes;for(let i=0;i<6;i++)t[i].copy(e.planes[i]);return this}setFromProjectionMatrix(e){const t=this.planes,i=e.elements,r=i[0],s=i[1],a=i[2],o=i[3],l=i[4],c=i[5],h=i[6],d=i[7],u=i[8],p=i[9],f=i[10],g=i[11],m=i[12],v=i[13],x=i[14],_=i[15];return t[0].setComponents(o-r,d-l,g-u,_-m).normalize(),t[1].setComponents(o+r,d+l,g+u,_+m).normalize(),t[2].setComponents(o+s,d+c,g+p,_+v).normalize(),t[3].setComponents(o-s,d-c,g-p,_-v).normalize(),t[4].setComponents(o-a,d-h,g-f,_-x).normalize(),t[5].setComponents(o+a,d+h,g+f,_+x).normalize(),this}intersectsObject(e){const t=e.geometry;return t.boundingSphere===null&&t.computeBoundingSphere(),hl.copy(t.boundingSphere).applyMatrix4(e.matrixWorld),this.intersectsSphere(hl)}intersectsSprite(e){return hl.center.set(0,0,0),hl.radius=.7071067811865476,hl.applyMatrix4(e.matrixWorld),this.intersectsSphere(hl)}intersectsSphere(e){const t=this.planes,i=e.center,r=-e.radius;for(let s=0;s<6;s++)if(t[s].distanceToPoint(i)0?e.max.x:e.min.x,Xd.y=r.normal.y>0?e.max.y:e.min.y,Xd.z=r.normal.z>0?e.max.z:e.min.z,r.distanceToPoint(Xd)<0)return!1}return!0}containsPoint(e){const t=this.planes;for(let i=0;i<6;i++)if(t[i].distanceToPoint(e)<0)return!1;return!0}clone(){return new this.constructor().copy(this)}}function f_(){let n=null,e=!1,t=null,i=null;function r(s,a){t(s,a),i=n.requestAnimationFrame(r)}return{start:function(){e!==!0&&t!==null&&(i=n.requestAnimationFrame(r),e=!0)},stop:function(){n.cancelAnimationFrame(i),e=!1},setAnimationLoop:function(s){t=s},setContext:function(s){n=s}}}function JX(n,e){const t=e.isWebGL2,i=new WeakMap;function r(c,h){const d=c.array,u=c.usage,p=n.createBuffer();n.bindBuffer(h,p),n.bufferData(h,d,u),c.onUploadCallback();let f;if(d instanceof Float32Array)f=5126;else if(d instanceof Uint16Array)if(c.isFloat16BufferAttribute)if(t)f=5131;else throw new Error("THREE.WebGLAttributes: Usage of Float16BufferAttribute requires WebGL2.");else f=5123;else if(d instanceof Int16Array)f=5122;else if(d instanceof Uint32Array)f=5125;else if(d instanceof Int32Array)f=5124;else if(d instanceof Int8Array)f=5120;else if(d instanceof Uint8Array)f=5121;else if(d instanceof Uint8ClampedArray)f=5121;else throw new Error("THREE.WebGLAttributes: Unsupported buffer data format: "+d);return{buffer:p,type:f,bytesPerElement:d.BYTES_PER_ELEMENT,version:c.version}}function s(c,h,d){const u=h.array,p=h.updateRange;n.bindBuffer(d,c),p.count===-1?n.bufferSubData(d,0,u):(t?n.bufferSubData(d,p.offset*u.BYTES_PER_ELEMENT,u,p.offset,p.count):n.bufferSubData(d,p.offset*u.BYTES_PER_ELEMENT,u.subarray(p.offset,p.offset+p.count)),p.count=-1)}function a(c){return c.isInterleavedBufferAttribute&&(c=c.data),i.get(c)}function o(c){c.isInterleavedBufferAttribute&&(c=c.data);const h=i.get(c);h&&(n.deleteBuffer(h.buffer),i.delete(c))}function l(c,h){if(c.isGLBufferAttribute){const u=i.get(c);(!u||u.version 0.0 ) ? v : 0.5 * inversesqrt( max( 1.0 - x * x, 1e-7 ) ) - v; - return cross( v1, v2 ) * theta_sintheta; -} -vec3 LTC_Evaluate( const in vec3 N, const in vec3 V, const in vec3 P, const in mat3 mInv, const in vec3 rectCoords[ 4 ] ) { - vec3 v1 = rectCoords[ 1 ] - rectCoords[ 0 ]; - vec3 v2 = rectCoords[ 3 ] - rectCoords[ 0 ]; - vec3 lightNormal = cross( v1, v2 ); - if( dot( lightNormal, P - rectCoords[ 0 ] ) < 0.0 ) return vec3( 0.0 ); - vec3 T1, T2; - T1 = normalize( V - N * dot( V, N ) ); - T2 = - cross( N, T1 ); - mat3 mat = mInv * transposeMat3( mat3( T1, T2, N ) ); - vec3 coords[ 4 ]; - coords[ 0 ] = mat * ( rectCoords[ 0 ] - P ); - coords[ 1 ] = mat * ( rectCoords[ 1 ] - P ); - coords[ 2 ] = mat * ( rectCoords[ 2 ] - P ); - coords[ 3 ] = mat * ( rectCoords[ 3 ] - P ); - coords[ 0 ] = normalize( coords[ 0 ] ); - coords[ 1 ] = normalize( coords[ 1 ] ); - coords[ 2 ] = normalize( coords[ 2 ] ); - coords[ 3 ] = normalize( coords[ 3 ] ); - vec3 vectorFormFactor = vec3( 0.0 ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 0 ], coords[ 1 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 1 ], coords[ 2 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 2 ], coords[ 3 ] ); - vectorFormFactor += LTC_EdgeVectorFormFactor( coords[ 3 ], coords[ 0 ] ); - float result = LTC_ClippedSphereFormFactor( vectorFormFactor ); - return vec3( result ); -} -float G_BlinnPhong_Implicit( ) { - return 0.25; -} -float D_BlinnPhong( const in float shininess, const in float dotNH ) { - return RECIPROCAL_PI * ( shininess * 0.5 + 1.0 ) * pow( dotNH, shininess ); -} -vec3 BRDF_BlinnPhong( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, const in vec3 specularColor, const in float shininess ) { - vec3 halfDir = normalize( lightDir + viewDir ); - float dotNH = saturate( dot( normal, halfDir ) ); - float dotVH = saturate( dot( viewDir, halfDir ) ); - vec3 F = F_Schlick( specularColor, 1.0, dotVH ); - float G = G_BlinnPhong_Implicit( ); - float D = D_BlinnPhong( shininess, dotNH ); - return F * ( G * D ); -} -#if defined( USE_SHEEN ) -float D_Charlie( float roughness, float dotNH ) { - float alpha = pow2( roughness ); - float invAlpha = 1.0 / alpha; - float cos2h = dotNH * dotNH; - float sin2h = max( 1.0 - cos2h, 0.0078125 ); - return ( 2.0 + invAlpha ) * pow( sin2h, invAlpha * 0.5 ) / ( 2.0 * PI ); -} -float V_Neubelt( float dotNV, float dotNL ) { - return saturate( 1.0 / ( 4.0 * ( dotNL + dotNV - dotNL * dotNV ) ) ); -} -vec3 BRDF_Sheen( const in vec3 lightDir, const in vec3 viewDir, const in vec3 normal, vec3 sheenColor, const in float sheenRoughness ) { - vec3 halfDir = normalize( lightDir + viewDir ); - float dotNL = saturate( dot( normal, lightDir ) ); - float dotNV = saturate( dot( normal, viewDir ) ); - float dotNH = saturate( dot( normal, halfDir ) ); - float D = D_Charlie( sheenRoughness, dotNH ); - float V = V_Neubelt( dotNV, dotNL ); - return sheenColor * ( D * V ); -} -#endif`,lY=`#ifdef USE_BUMPMAP - uniform sampler2D bumpMap; - uniform float bumpScale; - vec2 dHdxy_fwd() { - vec2 dSTdx = dFdx( vUv ); - vec2 dSTdy = dFdy( vUv ); - float Hll = bumpScale * texture2D( bumpMap, vUv ).x; - float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll; - float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll; - return vec2( dBx, dBy ); - } - vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) { - vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) ); - vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) ); - vec3 vN = surf_norm; - vec3 R1 = cross( vSigmaY, vN ); - vec3 R2 = cross( vN, vSigmaX ); - float fDet = dot( vSigmaX, R1 ) * faceDirection; - vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 ); - return normalize( abs( fDet ) * surf_norm - vGrad ); - } -#endif`,cY=`#if NUM_CLIPPING_PLANES > 0 - vec4 plane; - #pragma unroll_loop_start - for ( int i = 0; i < UNION_CLIPPING_PLANES; i ++ ) { - plane = clippingPlanes[ i ]; - if ( dot( vClipPosition, plane.xyz ) > plane.w ) discard; - } - #pragma unroll_loop_end - #if UNION_CLIPPING_PLANES < NUM_CLIPPING_PLANES - bool clipped = true; - #pragma unroll_loop_start - for ( int i = UNION_CLIPPING_PLANES; i < NUM_CLIPPING_PLANES; i ++ ) { - plane = clippingPlanes[ i ]; - clipped = ( dot( vClipPosition, plane.xyz ) > plane.w ) && clipped; - } - #pragma unroll_loop_end - if ( clipped ) discard; - #endif -#endif`,hY=`#if NUM_CLIPPING_PLANES > 0 - varying vec3 vClipPosition; - uniform vec4 clippingPlanes[ NUM_CLIPPING_PLANES ]; -#endif`,dY=`#if NUM_CLIPPING_PLANES > 0 - varying vec3 vClipPosition; -#endif`,uY=`#if NUM_CLIPPING_PLANES > 0 - vClipPosition = - mvPosition.xyz; -#endif`,pY=`#if defined( USE_COLOR_ALPHA ) - diffuseColor *= vColor; -#elif defined( USE_COLOR ) - diffuseColor.rgb *= vColor; -#endif`,fY=`#if defined( USE_COLOR_ALPHA ) - varying vec4 vColor; -#elif defined( USE_COLOR ) - varying vec3 vColor; -#endif`,gY=`#if defined( USE_COLOR_ALPHA ) - varying vec4 vColor; -#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) - varying vec3 vColor; -#endif`,mY=`#if defined( USE_COLOR_ALPHA ) - vColor = vec4( 1.0 ); -#elif defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR ) - vColor = vec3( 1.0 ); -#endif -#ifdef USE_COLOR - vColor *= color; -#endif -#ifdef USE_INSTANCING_COLOR - vColor.xyz *= instanceColor.xyz; -#endif`,vY=`#define PI 3.141592653589793 -#define PI2 6.283185307179586 -#define PI_HALF 1.5707963267948966 -#define RECIPROCAL_PI 0.3183098861837907 -#define RECIPROCAL_PI2 0.15915494309189535 -#define EPSILON 1e-6 -#ifndef saturate -#define saturate( a ) clamp( a, 0.0, 1.0 ) -#endif -#define whiteComplement( a ) ( 1.0 - saturate( a ) ) -float pow2( const in float x ) { return x*x; } -float pow3( const in float x ) { return x*x*x; } -float pow4( const in float x ) { float x2 = x*x; return x2*x2; } -float max3( const in vec3 v ) { return max( max( v.x, v.y ), v.z ); } -float average( const in vec3 color ) { return dot( color, vec3( 0.3333 ) ); } -highp float rand( const in vec2 uv ) { - const highp float a = 12.9898, b = 78.233, c = 43758.5453; - highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI ); - return fract( sin( sn ) * c ); -} -#ifdef HIGH_PRECISION - float precisionSafeLength( vec3 v ) { return length( v ); } -#else - float precisionSafeLength( vec3 v ) { - float maxComponent = max3( abs( v ) ); - return length( v / maxComponent ) * maxComponent; - } -#endif -struct IncidentLight { - vec3 color; - vec3 direction; - bool visible; -}; -struct ReflectedLight { - vec3 directDiffuse; - vec3 directSpecular; - vec3 indirectDiffuse; - vec3 indirectSpecular; -}; -struct GeometricContext { - vec3 position; - vec3 normal; - vec3 viewDir; -#ifdef USE_CLEARCOAT - vec3 clearcoatNormal; -#endif -}; -vec3 transformDirection( in vec3 dir, in mat4 matrix ) { - return normalize( ( matrix * vec4( dir, 0.0 ) ).xyz ); -} -vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) { - return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz ); -} -mat3 transposeMat3( const in mat3 m ) { - mat3 tmp; - tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x ); - tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y ); - tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z ); - return tmp; -} -float linearToRelativeLuminance( const in vec3 color ) { - vec3 weights = vec3( 0.2126, 0.7152, 0.0722 ); - return dot( weights, color.rgb ); -} -bool isPerspectiveMatrix( mat4 m ) { - return m[ 2 ][ 3 ] == - 1.0; -} -vec2 equirectUv( in vec3 dir ) { - float u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5; - float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5; - return vec2( u, v ); -}`,yY=`#ifdef ENVMAP_TYPE_CUBE_UV - #define cubeUV_minMipLevel 4.0 - #define cubeUV_minTileSize 16.0 - float getFace( vec3 direction ) { - vec3 absDirection = abs( direction ); - float face = - 1.0; - if ( absDirection.x > absDirection.z ) { - if ( absDirection.x > absDirection.y ) - face = direction.x > 0.0 ? 0.0 : 3.0; - else - face = direction.y > 0.0 ? 1.0 : 4.0; - } else { - if ( absDirection.z > absDirection.y ) - face = direction.z > 0.0 ? 2.0 : 5.0; - else - face = direction.y > 0.0 ? 1.0 : 4.0; - } - return face; - } - vec2 getUV( vec3 direction, float face ) { - vec2 uv; - if ( face == 0.0 ) { - uv = vec2( direction.z, direction.y ) / abs( direction.x ); - } else if ( face == 1.0 ) { - uv = vec2( - direction.x, - direction.z ) / abs( direction.y ); - } else if ( face == 2.0 ) { - uv = vec2( - direction.x, direction.y ) / abs( direction.z ); - } else if ( face == 3.0 ) { - uv = vec2( - direction.z, direction.y ) / abs( direction.x ); - } else if ( face == 4.0 ) { - uv = vec2( - direction.x, direction.z ) / abs( direction.y ); - } else { - uv = vec2( direction.x, direction.y ) / abs( direction.z ); - } - return 0.5 * ( uv + 1.0 ); - } - vec3 bilinearCubeUV( sampler2D envMap, vec3 direction, float mipInt ) { - float face = getFace( direction ); - float filterInt = max( cubeUV_minMipLevel - mipInt, 0.0 ); - mipInt = max( mipInt, cubeUV_minMipLevel ); - float faceSize = exp2( mipInt ); - vec2 uv = getUV( direction, face ) * ( faceSize - 1.0 ) + 0.5; - if ( face > 2.0 ) { - uv.y += faceSize; - face -= 3.0; - } - uv.x += face * faceSize; - uv.x += filterInt * 3.0 * cubeUV_minTileSize; - uv.y += 4.0 * ( exp2( CUBEUV_MAX_MIP ) - faceSize ); - uv.x *= CUBEUV_TEXEL_WIDTH; - uv.y *= CUBEUV_TEXEL_HEIGHT; - #ifdef texture2DGradEXT - return texture2DGradEXT( envMap, uv, vec2( 0.0 ), vec2( 0.0 ) ).rgb; - #else - return texture2D( envMap, uv ).rgb; - #endif - } - #define r0 1.0 - #define v0 0.339 - #define m0 - 2.0 - #define r1 0.8 - #define v1 0.276 - #define m1 - 1.0 - #define r4 0.4 - #define v4 0.046 - #define m4 2.0 - #define r5 0.305 - #define v5 0.016 - #define m5 3.0 - #define r6 0.21 - #define v6 0.0038 - #define m6 4.0 - float roughnessToMip( float roughness ) { - float mip = 0.0; - if ( roughness >= r1 ) { - mip = ( r0 - roughness ) * ( m1 - m0 ) / ( r0 - r1 ) + m0; - } else if ( roughness >= r4 ) { - mip = ( r1 - roughness ) * ( m4 - m1 ) / ( r1 - r4 ) + m1; - } else if ( roughness >= r5 ) { - mip = ( r4 - roughness ) * ( m5 - m4 ) / ( r4 - r5 ) + m4; - } else if ( roughness >= r6 ) { - mip = ( r5 - roughness ) * ( m6 - m5 ) / ( r5 - r6 ) + m5; - } else { - mip = - 2.0 * log2( 1.16 * roughness ); } - return mip; - } - vec4 textureCubeUV( sampler2D envMap, vec3 sampleDir, float roughness ) { - float mip = clamp( roughnessToMip( roughness ), m0, CUBEUV_MAX_MIP ); - float mipF = fract( mip ); - float mipInt = floor( mip ); - vec3 color0 = bilinearCubeUV( envMap, sampleDir, mipInt ); - if ( mipF == 0.0 ) { - return vec4( color0, 1.0 ); - } else { - vec3 color1 = bilinearCubeUV( envMap, sampleDir, mipInt + 1.0 ); - return vec4( mix( color0, color1, mipF ), 1.0 ); - } - } -#endif`,xY=`vec3 transformedNormal = objectNormal; -#ifdef USE_INSTANCING - mat3 m = mat3( instanceMatrix ); - transformedNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) ); - transformedNormal = m * transformedNormal; -#endif -transformedNormal = normalMatrix * transformedNormal; -#ifdef FLIP_SIDED - transformedNormal = - transformedNormal; -#endif -#ifdef USE_TANGENT - vec3 transformedTangent = ( modelViewMatrix * vec4( objectTangent, 0.0 ) ).xyz; - #ifdef FLIP_SIDED - transformedTangent = - transformedTangent; - #endif -#endif`,bY=`#ifdef USE_DISPLACEMENTMAP - uniform sampler2D displacementMap; - uniform float displacementScale; - uniform float displacementBias; -#endif`,_Y=`#ifdef USE_DISPLACEMENTMAP - transformed += normalize( objectNormal ) * ( texture2D( displacementMap, vUv ).x * displacementScale + displacementBias ); -#endif`,SY=`#ifdef USE_EMISSIVEMAP - vec4 emissiveColor = texture2D( emissiveMap, vUv ); - totalEmissiveRadiance *= emissiveColor.rgb; -#endif`,wY=`#ifdef USE_EMISSIVEMAP - uniform sampler2D emissiveMap; -#endif`,MY="gl_FragColor = linearToOutputTexel( gl_FragColor );",$Y=`vec4 LinearToLinear( in vec4 value ) { - return value; -} -vec4 LinearTosRGB( in vec4 value ) { - return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); -}`,PY=`#ifdef USE_ENVMAP - #ifdef ENV_WORLDPOS - vec3 cameraToFrag; - if ( isOrthographic ) { - cameraToFrag = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) ); - } else { - cameraToFrag = normalize( vWorldPosition - cameraPosition ); - } - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - #ifdef ENVMAP_MODE_REFLECTION - vec3 reflectVec = reflect( cameraToFrag, worldNormal ); - #else - vec3 reflectVec = refract( cameraToFrag, worldNormal, refractionRatio ); - #endif - #else - vec3 reflectVec = vReflect; - #endif - #ifdef ENVMAP_TYPE_CUBE - vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) ); - #elif defined( ENVMAP_TYPE_CUBE_UV ) - vec4 envColor = textureCubeUV( envMap, reflectVec, 0.0 ); - #else - vec4 envColor = vec4( 0.0 ); - #endif - #ifdef ENVMAP_BLENDING_MULTIPLY - outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity ); - #elif defined( ENVMAP_BLENDING_MIX ) - outgoingLight = mix( outgoingLight, envColor.xyz, specularStrength * reflectivity ); - #elif defined( ENVMAP_BLENDING_ADD ) - outgoingLight += envColor.xyz * specularStrength * reflectivity; - #endif -#endif`,TY=`#ifdef USE_ENVMAP - uniform float envMapIntensity; - uniform float flipEnvMap; - #ifdef ENVMAP_TYPE_CUBE - uniform samplerCube envMap; - #else - uniform sampler2D envMap; - #endif - -#endif`,CY=`#ifdef USE_ENVMAP - uniform float reflectivity; - #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( PHONG ) - #define ENV_WORLDPOS - #endif - #ifdef ENV_WORLDPOS - varying vec3 vWorldPosition; - uniform float refractionRatio; - #else - varying vec3 vReflect; - #endif -#endif`,EY=`#ifdef USE_ENVMAP - #if defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) ||defined( PHONG ) - #define ENV_WORLDPOS - #endif - #ifdef ENV_WORLDPOS - - varying vec3 vWorldPosition; - #else - varying vec3 vReflect; - uniform float refractionRatio; - #endif -#endif`,IY=`#ifdef USE_ENVMAP - #ifdef ENV_WORLDPOS - vWorldPosition = worldPosition.xyz; - #else - vec3 cameraToVertex; - if ( isOrthographic ) { - cameraToVertex = normalize( vec3( - viewMatrix[ 0 ][ 2 ], - viewMatrix[ 1 ][ 2 ], - viewMatrix[ 2 ][ 2 ] ) ); - } else { - cameraToVertex = normalize( worldPosition.xyz - cameraPosition ); - } - vec3 worldNormal = inverseTransformDirection( transformedNormal, viewMatrix ); - #ifdef ENVMAP_MODE_REFLECTION - vReflect = reflect( cameraToVertex, worldNormal ); - #else - vReflect = refract( cameraToVertex, worldNormal, refractionRatio ); - #endif - #endif -#endif`,LY=`#ifdef USE_FOG - vFogDepth = - mvPosition.z; -#endif`,kY=`#ifdef USE_FOG - varying float vFogDepth; -#endif`,AY=`#ifdef USE_FOG - #ifdef FOG_EXP2 - float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth ); - #else - float fogFactor = smoothstep( fogNear, fogFar, vFogDepth ); - #endif - gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor ); -#endif`,RY=`#ifdef USE_FOG - uniform vec3 fogColor; - varying float vFogDepth; - #ifdef FOG_EXP2 - uniform float fogDensity; - #else - uniform float fogNear; - uniform float fogFar; - #endif -#endif`,OY=`#ifdef USE_GRADIENTMAP - uniform sampler2D gradientMap; -#endif -vec3 getGradientIrradiance( vec3 normal, vec3 lightDirection ) { - float dotNL = dot( normal, lightDirection ); - vec2 coord = vec2( dotNL * 0.5 + 0.5, 0.0 ); - #ifdef USE_GRADIENTMAP - return vec3( texture2D( gradientMap, coord ).r ); - #else - return ( coord.x < 0.7 ) ? vec3( 0.7 ) : vec3( 1.0 ); - #endif -}`,zY=`#ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity; - reflectedLight.indirectDiffuse += lightMapIrradiance; -#endif`,VY=`#ifdef USE_LIGHTMAP - uniform sampler2D lightMap; - uniform float lightMapIntensity; -#endif`,DY=`vec3 diffuse = vec3( 1.0 ); -GeometricContext geometry; -geometry.position = mvPosition.xyz; -geometry.normal = normalize( transformedNormal ); -geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( -mvPosition.xyz ); -GeometricContext backGeometry; -backGeometry.position = geometry.position; -backGeometry.normal = -geometry.normal; -backGeometry.viewDir = geometry.viewDir; -vLightFront = vec3( 0.0 ); -vIndirectFront = vec3( 0.0 ); -#ifdef DOUBLE_SIDED - vLightBack = vec3( 0.0 ); - vIndirectBack = vec3( 0.0 ); -#endif -IncidentLight directLight; -float dotNL; -vec3 directLightColor_Diffuse; -vIndirectFront += getAmbientLightIrradiance( ambientLightColor ); -vIndirectFront += getLightProbeIrradiance( lightProbe, geometry.normal ); -#ifdef DOUBLE_SIDED - vIndirectBack += getAmbientLightIrradiance( ambientLightColor ); - vIndirectBack += getLightProbeIrradiance( lightProbe, backGeometry.normal ); -#endif -#if NUM_POINT_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) { - getPointLightInfo( pointLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_SPOT_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) { - getSpotLightInfo( spotLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_DIR_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) { - getDirectionalLightInfo( directionalLights[ i ], geometry, directLight ); - dotNL = dot( geometry.normal, directLight.direction ); - directLightColor_Diffuse = directLight.color; - vLightFront += saturate( dotNL ) * directLightColor_Diffuse; - #ifdef DOUBLE_SIDED - vLightBack += saturate( - dotNL ) * directLightColor_Diffuse; - #endif - } - #pragma unroll_loop_end -#endif -#if NUM_HEMI_LIGHTS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) { - vIndirectFront += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal ); - #ifdef DOUBLE_SIDED - vIndirectBack += getHemisphereLightIrradiance( hemisphereLights[ i ], backGeometry.normal ); - #endif - } - #pragma unroll_loop_end -#endif`,FY=`uniform bool receiveShadow; -uniform vec3 ambientLightColor; -uniform vec3 lightProbe[ 9 ]; -vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) { - float x = normal.x, y = normal.y, z = normal.z; - vec3 result = shCoefficients[ 0 ] * 0.886227; - result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y; - result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z; - result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x; - result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y; - result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z; - result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 ); - result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z; - result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y ); - return result; -} -vec3 getLightProbeIrradiance( const in vec3 lightProbe[ 9 ], const in vec3 normal ) { - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - vec3 irradiance = shGetIrradianceAt( worldNormal, lightProbe ); - return irradiance; -} -vec3 getAmbientLightIrradiance( const in vec3 ambientLightColor ) { - vec3 irradiance = ambientLightColor; - return irradiance; -} -float getDistanceAttenuation( const in float lightDistance, const in float cutoffDistance, const in float decayExponent ) { - #if defined ( PHYSICALLY_CORRECT_LIGHTS ) - float distanceFalloff = 1.0 / max( pow( lightDistance, decayExponent ), 0.01 ); - if ( cutoffDistance > 0.0 ) { - distanceFalloff *= pow2( saturate( 1.0 - pow4( lightDistance / cutoffDistance ) ) ); - } - return distanceFalloff; - #else - if ( cutoffDistance > 0.0 && decayExponent > 0.0 ) { - return pow( saturate( - lightDistance / cutoffDistance + 1.0 ), decayExponent ); - } - return 1.0; - #endif -} -float getSpotAttenuation( const in float coneCosine, const in float penumbraCosine, const in float angleCosine ) { - return smoothstep( coneCosine, penumbraCosine, angleCosine ); -} -#if NUM_DIR_LIGHTS > 0 - struct DirectionalLight { - vec3 direction; - vec3 color; - }; - uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ]; - void getDirectionalLightInfo( const in DirectionalLight directionalLight, const in GeometricContext geometry, out IncidentLight light ) { - light.color = directionalLight.color; - light.direction = directionalLight.direction; - light.visible = true; - } -#endif -#if NUM_POINT_LIGHTS > 0 - struct PointLight { - vec3 position; - vec3 color; - float distance; - float decay; - }; - uniform PointLight pointLights[ NUM_POINT_LIGHTS ]; - void getPointLightInfo( const in PointLight pointLight, const in GeometricContext geometry, out IncidentLight light ) { - vec3 lVector = pointLight.position - geometry.position; - light.direction = normalize( lVector ); - float lightDistance = length( lVector ); - light.color = pointLight.color; - light.color *= getDistanceAttenuation( lightDistance, pointLight.distance, pointLight.decay ); - light.visible = ( light.color != vec3( 0.0 ) ); - } -#endif -#if NUM_SPOT_LIGHTS > 0 - struct SpotLight { - vec3 position; - vec3 direction; - vec3 color; - float distance; - float decay; - float coneCos; - float penumbraCos; - }; - uniform SpotLight spotLights[ NUM_SPOT_LIGHTS ]; - void getSpotLightInfo( const in SpotLight spotLight, const in GeometricContext geometry, out IncidentLight light ) { - vec3 lVector = spotLight.position - geometry.position; - light.direction = normalize( lVector ); - float angleCos = dot( light.direction, spotLight.direction ); - float spotAttenuation = getSpotAttenuation( spotLight.coneCos, spotLight.penumbraCos, angleCos ); - if ( spotAttenuation > 0.0 ) { - float lightDistance = length( lVector ); - light.color = spotLight.color * spotAttenuation; - light.color *= getDistanceAttenuation( lightDistance, spotLight.distance, spotLight.decay ); - light.visible = ( light.color != vec3( 0.0 ) ); - } else { - light.color = vec3( 0.0 ); - light.visible = false; - } - } -#endif -#if NUM_RECT_AREA_LIGHTS > 0 - struct RectAreaLight { - vec3 color; - vec3 position; - vec3 halfWidth; - vec3 halfHeight; - }; - uniform sampler2D ltc_1; uniform sampler2D ltc_2; - uniform RectAreaLight rectAreaLights[ NUM_RECT_AREA_LIGHTS ]; -#endif -#if NUM_HEMI_LIGHTS > 0 - struct HemisphereLight { - vec3 direction; - vec3 skyColor; - vec3 groundColor; - }; - uniform HemisphereLight hemisphereLights[ NUM_HEMI_LIGHTS ]; - vec3 getHemisphereLightIrradiance( const in HemisphereLight hemiLight, const in vec3 normal ) { - float dotNL = dot( normal, hemiLight.direction ); - float hemiDiffuseWeight = 0.5 * dotNL + 0.5; - vec3 irradiance = mix( hemiLight.groundColor, hemiLight.skyColor, hemiDiffuseWeight ); - return irradiance; - } -#endif`,jY=`#if defined( USE_ENVMAP ) - vec3 getIBLIrradiance( const in vec3 normal ) { - #if defined( ENVMAP_TYPE_CUBE_UV ) - vec3 worldNormal = inverseTransformDirection( normal, viewMatrix ); - vec4 envMapColor = textureCubeUV( envMap, worldNormal, 1.0 ); - return PI * envMapColor.rgb * envMapIntensity; - #else - return vec3( 0.0 ); - #endif - } - vec3 getIBLRadiance( const in vec3 viewDir, const in vec3 normal, const in float roughness ) { - #if defined( ENVMAP_TYPE_CUBE_UV ) - vec3 reflectVec = reflect( - viewDir, normal ); - reflectVec = normalize( mix( reflectVec, normal, roughness * roughness) ); - reflectVec = inverseTransformDirection( reflectVec, viewMatrix ); - vec4 envMapColor = textureCubeUV( envMap, reflectVec, roughness ); - return envMapColor.rgb * envMapIntensity; - #else - return vec3( 0.0 ); - #endif - } -#endif`,NY=`ToonMaterial material; -material.diffuseColor = diffuseColor.rgb;`,BY=`varying vec3 vViewPosition; -struct ToonMaterial { - vec3 diffuseColor; -}; -void RE_Direct_Toon( const in IncidentLight directLight, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) { - vec3 irradiance = getGradientIrradiance( geometry.normal, directLight.direction ) * directLight.color; - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectDiffuse_Toon( const in vec3 irradiance, const in GeometricContext geometry, const in ToonMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -#define RE_Direct RE_Direct_Toon -#define RE_IndirectDiffuse RE_IndirectDiffuse_Toon -#define Material_LightProbeLOD( material ) (0)`,GY=`BlinnPhongMaterial material; -material.diffuseColor = diffuseColor.rgb; -material.specularColor = specular; -material.specularShininess = shininess; -material.specularStrength = specularStrength;`,HY=`varying vec3 vViewPosition; -struct BlinnPhongMaterial { - vec3 diffuseColor; - vec3 specularColor; - float specularShininess; - float specularStrength; -}; -void RE_Direct_BlinnPhong( const in IncidentLight directLight, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) { - float dotNL = saturate( dot( geometry.normal, directLight.direction ) ); - vec3 irradiance = dotNL * directLight.color; - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); - reflectedLight.directSpecular += irradiance * BRDF_BlinnPhong( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularShininess ) * material.specularStrength; -} -void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in GeometricContext geometry, const in BlinnPhongMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -#define RE_Direct RE_Direct_BlinnPhong -#define RE_IndirectDiffuse RE_IndirectDiffuse_BlinnPhong -#define Material_LightProbeLOD( material ) (0)`,UY=`PhysicalMaterial material; -material.diffuseColor = diffuseColor.rgb * ( 1.0 - metalnessFactor ); -vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) ); -float geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z ); -material.roughness = max( roughnessFactor, 0.0525 );material.roughness += geometryRoughness; -material.roughness = min( material.roughness, 1.0 ); -#ifdef IOR - #ifdef SPECULAR - float specularIntensityFactor = specularIntensity; - vec3 specularColorFactor = specularColor; - #ifdef USE_SPECULARINTENSITYMAP - specularIntensityFactor *= texture2D( specularIntensityMap, vUv ).a; - #endif - #ifdef USE_SPECULARCOLORMAP - specularColorFactor *= texture2D( specularColorMap, vUv ).rgb; - #endif - material.specularF90 = mix( specularIntensityFactor, 1.0, metalnessFactor ); - #else - float specularIntensityFactor = 1.0; - vec3 specularColorFactor = vec3( 1.0 ); - material.specularF90 = 1.0; - #endif - material.specularColor = mix( min( pow2( ( ior - 1.0 ) / ( ior + 1.0 ) ) * specularColorFactor, vec3( 1.0 ) ) * specularIntensityFactor, diffuseColor.rgb, metalnessFactor ); -#else - material.specularColor = mix( vec3( 0.04 ), diffuseColor.rgb, metalnessFactor ); - material.specularF90 = 1.0; -#endif -#ifdef USE_CLEARCOAT - material.clearcoat = clearcoat; - material.clearcoatRoughness = clearcoatRoughness; - material.clearcoatF0 = vec3( 0.04 ); - material.clearcoatF90 = 1.0; - #ifdef USE_CLEARCOATMAP - material.clearcoat *= texture2D( clearcoatMap, vUv ).x; - #endif - #ifdef USE_CLEARCOAT_ROUGHNESSMAP - material.clearcoatRoughness *= texture2D( clearcoatRoughnessMap, vUv ).y; - #endif - material.clearcoat = saturate( material.clearcoat ); material.clearcoatRoughness = max( material.clearcoatRoughness, 0.0525 ); - material.clearcoatRoughness += geometryRoughness; - material.clearcoatRoughness = min( material.clearcoatRoughness, 1.0 ); -#endif -#ifdef USE_SHEEN - material.sheenColor = sheenColor; - #ifdef USE_SHEENCOLORMAP - material.sheenColor *= texture2D( sheenColorMap, vUv ).rgb; - #endif - material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 ); - #ifdef USE_SHEENROUGHNESSMAP - material.sheenRoughness *= texture2D( sheenRoughnessMap, vUv ).a; - #endif -#endif`,WY=`struct PhysicalMaterial { - vec3 diffuseColor; - float roughness; - vec3 specularColor; - float specularF90; - #ifdef USE_CLEARCOAT - float clearcoat; - float clearcoatRoughness; - vec3 clearcoatF0; - float clearcoatF90; - #endif - #ifdef USE_SHEEN - vec3 sheenColor; - float sheenRoughness; - #endif -}; -vec3 clearcoatSpecular = vec3( 0.0 ); -vec3 sheenSpecular = vec3( 0.0 ); -float IBLSheenBRDF( const in vec3 normal, const in vec3 viewDir, const in float roughness) { - float dotNV = saturate( dot( normal, viewDir ) ); - float r2 = roughness * roughness; - float a = roughness < 0.25 ? -339.2 * r2 + 161.4 * roughness - 25.9 : -8.48 * r2 + 14.3 * roughness - 9.95; - float b = roughness < 0.25 ? 44.0 * r2 - 23.7 * roughness + 3.26 : 1.97 * r2 - 3.27 * roughness + 0.72; - float DG = exp( a * dotNV + b ) + ( roughness < 0.25 ? 0.0 : 0.1 * ( roughness - 0.25 ) ); - return saturate( DG * RECIPROCAL_PI ); -} -vec2 DFGApprox( const in vec3 normal, const in vec3 viewDir, const in float roughness ) { - float dotNV = saturate( dot( normal, viewDir ) ); - const vec4 c0 = vec4( - 1, - 0.0275, - 0.572, 0.022 ); - const vec4 c1 = vec4( 1, 0.0425, 1.04, - 0.04 ); - vec4 r = roughness * c0 + c1; - float a004 = min( r.x * r.x, exp2( - 9.28 * dotNV ) ) * r.x + r.y; - vec2 fab = vec2( - 1.04, 1.04 ) * a004 + r.zw; - return fab; -} -vec3 EnvironmentBRDF( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness ) { - vec2 fab = DFGApprox( normal, viewDir, roughness ); - return specularColor * fab.x + specularF90 * fab.y; -} -void computeMultiscattering( const in vec3 normal, const in vec3 viewDir, const in vec3 specularColor, const in float specularF90, const in float roughness, inout vec3 singleScatter, inout vec3 multiScatter ) { - vec2 fab = DFGApprox( normal, viewDir, roughness ); - vec3 FssEss = specularColor * fab.x + specularF90 * fab.y; - float Ess = fab.x + fab.y; - float Ems = 1.0 - Ess; - vec3 Favg = specularColor + ( 1.0 - specularColor ) * 0.047619; vec3 Fms = FssEss * Favg / ( 1.0 - Ems * Favg ); - singleScatter += FssEss; - multiScatter += Fms * Ems; -} -#if NUM_RECT_AREA_LIGHTS > 0 - void RE_Direct_RectArea_Physical( const in RectAreaLight rectAreaLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - vec3 normal = geometry.normal; - vec3 viewDir = geometry.viewDir; - vec3 position = geometry.position; - vec3 lightPos = rectAreaLight.position; - vec3 halfWidth = rectAreaLight.halfWidth; - vec3 halfHeight = rectAreaLight.halfHeight; - vec3 lightColor = rectAreaLight.color; - float roughness = material.roughness; - vec3 rectCoords[ 4 ]; - rectCoords[ 0 ] = lightPos + halfWidth - halfHeight; rectCoords[ 1 ] = lightPos - halfWidth - halfHeight; - rectCoords[ 2 ] = lightPos - halfWidth + halfHeight; - rectCoords[ 3 ] = lightPos + halfWidth + halfHeight; - vec2 uv = LTC_Uv( normal, viewDir, roughness ); - vec4 t1 = texture2D( ltc_1, uv ); - vec4 t2 = texture2D( ltc_2, uv ); - mat3 mInv = mat3( - vec3( t1.x, 0, t1.y ), - vec3( 0, 1, 0 ), - vec3( t1.z, 0, t1.w ) - ); - vec3 fresnel = ( material.specularColor * t2.x + ( vec3( 1.0 ) - material.specularColor ) * t2.y ); - reflectedLight.directSpecular += lightColor * fresnel * LTC_Evaluate( normal, viewDir, position, mInv, rectCoords ); - reflectedLight.directDiffuse += lightColor * material.diffuseColor * LTC_Evaluate( normal, viewDir, position, mat3( 1.0 ), rectCoords ); - } -#endif -void RE_Direct_Physical( const in IncidentLight directLight, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - float dotNL = saturate( dot( geometry.normal, directLight.direction ) ); - vec3 irradiance = dotNL * directLight.color; - #ifdef USE_CLEARCOAT - float dotNLcc = saturate( dot( geometry.clearcoatNormal, directLight.direction ) ); - vec3 ccIrradiance = dotNLcc * directLight.color; - clearcoatSpecular += ccIrradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.clearcoatNormal, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness ); - #endif - #ifdef USE_SHEEN - sheenSpecular += irradiance * BRDF_Sheen( directLight.direction, geometry.viewDir, geometry.normal, material.sheenColor, material.sheenRoughness ); - #endif - reflectedLight.directSpecular += irradiance * BRDF_GGX( directLight.direction, geometry.viewDir, geometry.normal, material.specularColor, material.specularF90, material.roughness ); - reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectDiffuse_Physical( const in vec3 irradiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight ) { - reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor ); -} -void RE_IndirectSpecular_Physical( const in vec3 radiance, const in vec3 irradiance, const in vec3 clearcoatRadiance, const in GeometricContext geometry, const in PhysicalMaterial material, inout ReflectedLight reflectedLight) { - #ifdef USE_CLEARCOAT - clearcoatSpecular += clearcoatRadiance * EnvironmentBRDF( geometry.clearcoatNormal, geometry.viewDir, material.clearcoatF0, material.clearcoatF90, material.clearcoatRoughness ); - #endif - #ifdef USE_SHEEN - sheenSpecular += irradiance * material.sheenColor * IBLSheenBRDF( geometry.normal, geometry.viewDir, material.sheenRoughness ); - #endif - vec3 singleScattering = vec3( 0.0 ); - vec3 multiScattering = vec3( 0.0 ); - vec3 cosineWeightedIrradiance = irradiance * RECIPROCAL_PI; - computeMultiscattering( geometry.normal, geometry.viewDir, material.specularColor, material.specularF90, material.roughness, singleScattering, multiScattering ); - vec3 diffuse = material.diffuseColor * ( 1.0 - ( singleScattering + multiScattering ) ); - reflectedLight.indirectSpecular += radiance * singleScattering; - reflectedLight.indirectSpecular += multiScattering * cosineWeightedIrradiance; - reflectedLight.indirectDiffuse += diffuse * cosineWeightedIrradiance; -} -#define RE_Direct RE_Direct_Physical -#define RE_Direct_RectArea RE_Direct_RectArea_Physical -#define RE_IndirectDiffuse RE_IndirectDiffuse_Physical -#define RE_IndirectSpecular RE_IndirectSpecular_Physical -float computeSpecularOcclusion( const in float dotNV, const in float ambientOcclusion, const in float roughness ) { - return saturate( pow( dotNV + ambientOcclusion, exp2( - 16.0 * roughness - 1.0 ) ) - 1.0 + ambientOcclusion ); -}`,XY=` -GeometricContext geometry; -geometry.position = - vViewPosition; -geometry.normal = normal; -geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( vViewPosition ); -#ifdef USE_CLEARCOAT - geometry.clearcoatNormal = clearcoatNormal; -#endif -IncidentLight directLight; -#if ( NUM_POINT_LIGHTS > 0 ) && defined( RE_Direct ) - PointLight pointLight; - #if defined( USE_SHADOWMAP ) && NUM_POINT_LIGHT_SHADOWS > 0 - PointLightShadow pointLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) { - pointLight = pointLights[ i ]; - getPointLightInfo( pointLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_POINT_LIGHT_SHADOWS ) - pointLightShadow = pointLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getPointShadow( pointShadowMap[ i ], pointLightShadow.shadowMapSize, pointLightShadow.shadowBias, pointLightShadow.shadowRadius, vPointShadowCoord[ i ], pointLightShadow.shadowCameraNear, pointLightShadow.shadowCameraFar ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_SPOT_LIGHTS > 0 ) && defined( RE_Direct ) - SpotLight spotLight; - #if defined( USE_SHADOWMAP ) && NUM_SPOT_LIGHT_SHADOWS > 0 - SpotLightShadow spotLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) { - spotLight = spotLights[ i ]; - getSpotLightInfo( spotLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_SPOT_LIGHT_SHADOWS ) - spotLightShadow = spotLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( spotShadowMap[ i ], spotLightShadow.shadowMapSize, spotLightShadow.shadowBias, spotLightShadow.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_DIR_LIGHTS > 0 ) && defined( RE_Direct ) - DirectionalLight directionalLight; - #if defined( USE_SHADOWMAP ) && NUM_DIR_LIGHT_SHADOWS > 0 - DirectionalLightShadow directionalLightShadow; - #endif - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) { - directionalLight = directionalLights[ i ]; - getDirectionalLightInfo( directionalLight, geometry, directLight ); - #if defined( USE_SHADOWMAP ) && ( UNROLLED_LOOP_INDEX < NUM_DIR_LIGHT_SHADOWS ) - directionalLightShadow = directionalLightShadows[ i ]; - directLight.color *= all( bvec2( directLight.visible, receiveShadow ) ) ? getShadow( directionalShadowMap[ i ], directionalLightShadow.shadowMapSize, directionalLightShadow.shadowBias, directionalLightShadow.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0; - #endif - RE_Direct( directLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if ( NUM_RECT_AREA_LIGHTS > 0 ) && defined( RE_Direct_RectArea ) - RectAreaLight rectAreaLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_RECT_AREA_LIGHTS; i ++ ) { - rectAreaLight = rectAreaLights[ i ]; - RE_Direct_RectArea( rectAreaLight, geometry, material, reflectedLight ); - } - #pragma unroll_loop_end -#endif -#if defined( RE_IndirectDiffuse ) - vec3 iblIrradiance = vec3( 0.0 ); - vec3 irradiance = getAmbientLightIrradiance( ambientLightColor ); - irradiance += getLightProbeIrradiance( lightProbe, geometry.normal ); - #if ( NUM_HEMI_LIGHTS > 0 ) - #pragma unroll_loop_start - for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) { - irradiance += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal ); - } - #pragma unroll_loop_end - #endif -#endif -#if defined( RE_IndirectSpecular ) - vec3 radiance = vec3( 0.0 ); - vec3 clearcoatRadiance = vec3( 0.0 ); -#endif`,YY=`#if defined( RE_IndirectDiffuse ) - #ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - vec3 lightMapIrradiance = lightMapTexel.rgb * lightMapIntensity; - irradiance += lightMapIrradiance; - #endif - #if defined( USE_ENVMAP ) && defined( STANDARD ) && defined( ENVMAP_TYPE_CUBE_UV ) - iblIrradiance += getIBLIrradiance( geometry.normal ); - #endif -#endif -#if defined( USE_ENVMAP ) && defined( RE_IndirectSpecular ) - radiance += getIBLRadiance( geometry.viewDir, geometry.normal, material.roughness ); - #ifdef USE_CLEARCOAT - clearcoatRadiance += getIBLRadiance( geometry.viewDir, geometry.clearcoatNormal, material.clearcoatRoughness ); - #endif -#endif`,KY=`#if defined( RE_IndirectDiffuse ) - RE_IndirectDiffuse( irradiance, geometry, material, reflectedLight ); -#endif -#if defined( RE_IndirectSpecular ) - RE_IndirectSpecular( radiance, iblIrradiance, clearcoatRadiance, geometry, material, reflectedLight ); -#endif`,qY=`#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT ) - gl_FragDepthEXT = vIsPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5; -#endif`,ZY=`#if defined( USE_LOGDEPTHBUF ) && defined( USE_LOGDEPTHBUF_EXT ) - uniform float logDepthBufFC; - varying float vFragDepth; - varying float vIsPerspective; -#endif`,JY=`#ifdef USE_LOGDEPTHBUF - #ifdef USE_LOGDEPTHBUF_EXT - varying float vFragDepth; - varying float vIsPerspective; - #else - uniform float logDepthBufFC; - #endif -#endif`,QY=`#ifdef USE_LOGDEPTHBUF - #ifdef USE_LOGDEPTHBUF_EXT - vFragDepth = 1.0 + gl_Position.w; - vIsPerspective = float( isPerspectiveMatrix( projectionMatrix ) ); - #else - if ( isPerspectiveMatrix( projectionMatrix ) ) { - gl_Position.z = log2( max( EPSILON, gl_Position.w + 1.0 ) ) * logDepthBufFC - 1.0; - gl_Position.z *= gl_Position.w; - } - #endif -#endif`,eK=`#ifdef USE_MAP - vec4 sampledDiffuseColor = texture2D( map, vUv ); - #ifdef DECODE_VIDEO_TEXTURE - sampledDiffuseColor = vec4( mix( pow( sampledDiffuseColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), sampledDiffuseColor.rgb * 0.0773993808, vec3( lessThanEqual( sampledDiffuseColor.rgb, vec3( 0.04045 ) ) ) ), sampledDiffuseColor.w ); - #endif - diffuseColor *= sampledDiffuseColor; -#endif`,tK=`#ifdef USE_MAP - uniform sampler2D map; -#endif`,iK=`#if defined( USE_MAP ) || defined( USE_ALPHAMAP ) - vec2 uv = ( uvTransform * vec3( gl_PointCoord.x, 1.0 - gl_PointCoord.y, 1 ) ).xy; -#endif -#ifdef USE_MAP - diffuseColor *= texture2D( map, uv ); -#endif -#ifdef USE_ALPHAMAP - diffuseColor.a *= texture2D( alphaMap, uv ).g; -#endif`,rK=`#if defined( USE_MAP ) || defined( USE_ALPHAMAP ) - uniform mat3 uvTransform; -#endif -#ifdef USE_MAP - uniform sampler2D map; -#endif -#ifdef USE_ALPHAMAP - uniform sampler2D alphaMap; -#endif`,nK=`float metalnessFactor = metalness; -#ifdef USE_METALNESSMAP - vec4 texelMetalness = texture2D( metalnessMap, vUv ); - metalnessFactor *= texelMetalness.b; -#endif`,sK=`#ifdef USE_METALNESSMAP - uniform sampler2D metalnessMap; -#endif`,aK=`#if defined( USE_MORPHCOLORS ) && defined( MORPHTARGETS_TEXTURE ) - vColor *= morphTargetBaseInfluence; - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - #if defined( USE_COLOR_ALPHA ) - if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ) * morphTargetInfluences[ i ]; - #elif defined( USE_COLOR ) - if ( morphTargetInfluences[ i ] != 0.0 ) vColor += getMorph( gl_VertexID, i, 2 ).rgb * morphTargetInfluences[ i ]; - #endif - } -#endif`,oK=`#ifdef USE_MORPHNORMALS - objectNormal *= morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - if ( morphTargetInfluences[ i ] != 0.0 ) objectNormal += getMorph( gl_VertexID, i, 1 ).xyz * morphTargetInfluences[ i ]; - } - #else - objectNormal += morphNormal0 * morphTargetInfluences[ 0 ]; - objectNormal += morphNormal1 * morphTargetInfluences[ 1 ]; - objectNormal += morphNormal2 * morphTargetInfluences[ 2 ]; - objectNormal += morphNormal3 * morphTargetInfluences[ 3 ]; - #endif -#endif`,lK=`#ifdef USE_MORPHTARGETS - uniform float morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - uniform float morphTargetInfluences[ MORPHTARGETS_COUNT ]; - uniform sampler2DArray morphTargetsTexture; - uniform ivec2 morphTargetsTextureSize; - vec4 getMorph( const in int vertexIndex, const in int morphTargetIndex, const in int offset ) { - int texelIndex = vertexIndex * MORPHTARGETS_TEXTURE_STRIDE + offset; - int y = texelIndex / morphTargetsTextureSize.x; - int x = texelIndex - y * morphTargetsTextureSize.x; - ivec3 morphUV = ivec3( x, y, morphTargetIndex ); - return texelFetch( morphTargetsTexture, morphUV, 0 ); - } - #else - #ifndef USE_MORPHNORMALS - uniform float morphTargetInfluences[ 8 ]; - #else - uniform float morphTargetInfluences[ 4 ]; - #endif - #endif -#endif`,cK=`#ifdef USE_MORPHTARGETS - transformed *= morphTargetBaseInfluence; - #ifdef MORPHTARGETS_TEXTURE - for ( int i = 0; i < MORPHTARGETS_COUNT; i ++ ) { - if ( morphTargetInfluences[ i ] != 0.0 ) transformed += getMorph( gl_VertexID, i, 0 ).xyz * morphTargetInfluences[ i ]; - } - #else - transformed += morphTarget0 * morphTargetInfluences[ 0 ]; - transformed += morphTarget1 * morphTargetInfluences[ 1 ]; - transformed += morphTarget2 * morphTargetInfluences[ 2 ]; - transformed += morphTarget3 * morphTargetInfluences[ 3 ]; - #ifndef USE_MORPHNORMALS - transformed += morphTarget4 * morphTargetInfluences[ 4 ]; - transformed += morphTarget5 * morphTargetInfluences[ 5 ]; - transformed += morphTarget6 * morphTargetInfluences[ 6 ]; - transformed += morphTarget7 * morphTargetInfluences[ 7 ]; - #endif - #endif -#endif`,hK=`float faceDirection = gl_FrontFacing ? 1.0 : - 1.0; -#ifdef FLAT_SHADED - vec3 fdx = vec3( dFdx( vViewPosition.x ), dFdx( vViewPosition.y ), dFdx( vViewPosition.z ) ); - vec3 fdy = vec3( dFdy( vViewPosition.x ), dFdy( vViewPosition.y ), dFdy( vViewPosition.z ) ); - vec3 normal = normalize( cross( fdx, fdy ) ); -#else - vec3 normal = normalize( vNormal ); - #ifdef DOUBLE_SIDED - normal = normal * faceDirection; - #endif - #ifdef USE_TANGENT - vec3 tangent = normalize( vTangent ); - vec3 bitangent = normalize( vBitangent ); - #ifdef DOUBLE_SIDED - tangent = tangent * faceDirection; - bitangent = bitangent * faceDirection; - #endif - #if defined( TANGENTSPACE_NORMALMAP ) || defined( USE_CLEARCOAT_NORMALMAP ) - mat3 vTBN = mat3( tangent, bitangent, normal ); - #endif - #endif -#endif -vec3 geometryNormal = normal;`,dK=`#ifdef OBJECTSPACE_NORMALMAP - normal = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0; - #ifdef FLIP_SIDED - normal = - normal; - #endif - #ifdef DOUBLE_SIDED - normal = normal * faceDirection; - #endif - normal = normalize( normalMatrix * normal ); -#elif defined( TANGENTSPACE_NORMALMAP ) - vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0; - mapN.xy *= normalScale; - #ifdef USE_TANGENT - normal = normalize( vTBN * mapN ); - #else - normal = perturbNormal2Arb( - vViewPosition, normal, mapN, faceDirection ); - #endif -#elif defined( USE_BUMPMAP ) - normal = perturbNormalArb( - vViewPosition, normal, dHdxy_fwd(), faceDirection ); -#endif`,uK=`#ifndef FLAT_SHADED - varying vec3 vNormal; - #ifdef USE_TANGENT - varying vec3 vTangent; - varying vec3 vBitangent; - #endif -#endif`,pK=`#ifndef FLAT_SHADED - varying vec3 vNormal; - #ifdef USE_TANGENT - varying vec3 vTangent; - varying vec3 vBitangent; - #endif -#endif`,fK=`#ifndef FLAT_SHADED - vNormal = normalize( transformedNormal ); - #ifdef USE_TANGENT - vTangent = normalize( transformedTangent ); - vBitangent = normalize( cross( vNormal, vTangent ) * tangent.w ); - #endif -#endif`,gK=`#ifdef USE_NORMALMAP - uniform sampler2D normalMap; - uniform vec2 normalScale; -#endif -#ifdef OBJECTSPACE_NORMALMAP - uniform mat3 normalMatrix; -#endif -#if ! defined ( USE_TANGENT ) && ( defined ( TANGENTSPACE_NORMALMAP ) || defined ( USE_CLEARCOAT_NORMALMAP ) ) - vec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm, vec3 mapN, float faceDirection ) { - vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) ); - vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) ); - vec2 st0 = dFdx( vUv.st ); - vec2 st1 = dFdy( vUv.st ); - vec3 N = surf_norm; - vec3 q1perp = cross( q1, N ); - vec3 q0perp = cross( N, q0 ); - vec3 T = q1perp * st0.x + q0perp * st1.x; - vec3 B = q1perp * st0.y + q0perp * st1.y; - float det = max( dot( T, T ), dot( B, B ) ); - float scale = ( det == 0.0 ) ? 0.0 : faceDirection * inversesqrt( det ); - return normalize( T * ( mapN.x * scale ) + B * ( mapN.y * scale ) + N * mapN.z ); - } -#endif`,mK=`#ifdef USE_CLEARCOAT - vec3 clearcoatNormal = geometryNormal; -#endif`,vK=`#ifdef USE_CLEARCOAT_NORMALMAP - vec3 clearcoatMapN = texture2D( clearcoatNormalMap, vUv ).xyz * 2.0 - 1.0; - clearcoatMapN.xy *= clearcoatNormalScale; - #ifdef USE_TANGENT - clearcoatNormal = normalize( vTBN * clearcoatMapN ); - #else - clearcoatNormal = perturbNormal2Arb( - vViewPosition, clearcoatNormal, clearcoatMapN, faceDirection ); - #endif -#endif`,yK=`#ifdef USE_CLEARCOATMAP - uniform sampler2D clearcoatMap; -#endif -#ifdef USE_CLEARCOAT_ROUGHNESSMAP - uniform sampler2D clearcoatRoughnessMap; -#endif -#ifdef USE_CLEARCOAT_NORMALMAP - uniform sampler2D clearcoatNormalMap; - uniform vec2 clearcoatNormalScale; -#endif`,xK=`#ifdef OPAQUE -diffuseColor.a = 1.0; -#endif -#ifdef USE_TRANSMISSION -diffuseColor.a *= transmissionAlpha + 0.1; -#endif -gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,bK=`vec3 packNormalToRGB( const in vec3 normal ) { - return normalize( normal ) * 0.5 + 0.5; -} -vec3 unpackRGBToNormal( const in vec3 rgb ) { - return 2.0 * rgb.xyz - 1.0; -} -const float PackUpscale = 256. / 255.;const float UnpackDownscale = 255. / 256.; -const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256., 256. ); -const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. ); -const float ShiftRight8 = 1. / 256.; -vec4 packDepthToRGBA( const in float v ) { - vec4 r = vec4( fract( v * PackFactors ), v ); - r.yzw -= r.xyz * ShiftRight8; return r * PackUpscale; -} -float unpackRGBAToDepth( const in vec4 v ) { - return dot( v, UnpackFactors ); -} -vec4 pack2HalfToRGBA( vec2 v ) { - vec4 r = vec4( v.x, fract( v.x * 255.0 ), v.y, fract( v.y * 255.0 ) ); - return vec4( r.x - r.y / 255.0, r.y, r.z - r.w / 255.0, r.w ); -} -vec2 unpackRGBATo2Half( vec4 v ) { - return vec2( v.x + ( v.y / 255.0 ), v.z + ( v.w / 255.0 ) ); -} -float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) { - return ( viewZ + near ) / ( near - far ); -} -float orthographicDepthToViewZ( const in float linearClipZ, const in float near, const in float far ) { - return linearClipZ * ( near - far ) - near; -} -float viewZToPerspectiveDepth( const in float viewZ, const in float near, const in float far ) { - return ( ( near + viewZ ) * far ) / ( ( far - near ) * viewZ ); -} -float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) { - return ( near * far ) / ( ( far - near ) * invClipZ - far ); -}`,_K=`#ifdef PREMULTIPLIED_ALPHA - gl_FragColor.rgb *= gl_FragColor.a; -#endif`,SK=`vec4 mvPosition = vec4( transformed, 1.0 ); -#ifdef USE_INSTANCING - mvPosition = instanceMatrix * mvPosition; -#endif -mvPosition = modelViewMatrix * mvPosition; -gl_Position = projectionMatrix * mvPosition;`,wK=`#ifdef DITHERING - gl_FragColor.rgb = dithering( gl_FragColor.rgb ); -#endif`,MK=`#ifdef DITHERING - vec3 dithering( vec3 color ) { - float grid_position = rand( gl_FragCoord.xy ); - vec3 dither_shift_RGB = vec3( 0.25 / 255.0, -0.25 / 255.0, 0.25 / 255.0 ); - dither_shift_RGB = mix( 2.0 * dither_shift_RGB, -2.0 * dither_shift_RGB, grid_position ); - return color + dither_shift_RGB; - } -#endif`,$K=`float roughnessFactor = roughness; -#ifdef USE_ROUGHNESSMAP - vec4 texelRoughness = texture2D( roughnessMap, vUv ); - roughnessFactor *= texelRoughness.g; -#endif`,PK=`#ifdef USE_ROUGHNESSMAP - uniform sampler2D roughnessMap; -#endif`,TK=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - uniform sampler2D directionalShadowMap[ NUM_DIR_LIGHT_SHADOWS ]; - varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ]; - struct DirectionalLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ]; - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - uniform sampler2D spotShadowMap[ NUM_SPOT_LIGHT_SHADOWS ]; - varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ]; - struct SpotLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ]; - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - uniform sampler2D pointShadowMap[ NUM_POINT_LIGHT_SHADOWS ]; - varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ]; - struct PointLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - float shadowCameraNear; - float shadowCameraFar; - }; - uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ]; - #endif - float texture2DCompare( sampler2D depths, vec2 uv, float compare ) { - return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) ); - } - vec2 texture2DDistribution( sampler2D shadow, vec2 uv ) { - return unpackRGBATo2Half( texture2D( shadow, uv ) ); - } - float VSMShadow (sampler2D shadow, vec2 uv, float compare ){ - float occlusion = 1.0; - vec2 distribution = texture2DDistribution( shadow, uv ); - float hard_shadow = step( compare , distribution.x ); - if (hard_shadow != 1.0 ) { - float distance = compare - distribution.x ; - float variance = max( 0.00000, distribution.y * distribution.y ); - float softness_probability = variance / (variance + distance * distance ); softness_probability = clamp( ( softness_probability - 0.3 ) / ( 0.95 - 0.3 ), 0.0, 1.0 ); occlusion = clamp( max( hard_shadow, softness_probability ), 0.0, 1.0 ); - } - return occlusion; - } - float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) { - float shadow = 1.0; - shadowCoord.xyz /= shadowCoord.w; - shadowCoord.z += shadowBias; - bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 ); - bool inFrustum = all( inFrustumVec ); - bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 ); - bool frustumTest = all( frustumTestVec ); - if ( frustumTest ) { - #if defined( SHADOWMAP_TYPE_PCF ) - vec2 texelSize = vec2( 1.0 ) / shadowMapSize; - float dx0 = - texelSize.x * shadowRadius; - float dy0 = - texelSize.y * shadowRadius; - float dx1 = + texelSize.x * shadowRadius; - float dy1 = + texelSize.y * shadowRadius; - float dx2 = dx0 / 2.0; - float dy2 = dy0 / 2.0; - float dx3 = dx1 / 2.0; - float dy3 = dy1 / 2.0; - shadow = ( - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy2 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx2, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx3, dy3 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) + - texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z ) - ) * ( 1.0 / 17.0 ); - #elif defined( SHADOWMAP_TYPE_PCF_SOFT ) - vec2 texelSize = vec2( 1.0 ) / shadowMapSize; - float dx = texelSize.x; - float dy = texelSize.y; - vec2 uv = shadowCoord.xy; - vec2 f = fract( uv * shadowMapSize + 0.5 ); - uv -= f * texelSize; - shadow = ( - texture2DCompare( shadowMap, uv, shadowCoord.z ) + - texture2DCompare( shadowMap, uv + vec2( dx, 0.0 ), shadowCoord.z ) + - texture2DCompare( shadowMap, uv + vec2( 0.0, dy ), shadowCoord.z ) + - texture2DCompare( shadowMap, uv + texelSize, shadowCoord.z ) + - mix( texture2DCompare( shadowMap, uv + vec2( -dx, 0.0 ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 0.0 ), shadowCoord.z ), - f.x ) + - mix( texture2DCompare( shadowMap, uv + vec2( -dx, dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, dy ), shadowCoord.z ), - f.x ) + - mix( texture2DCompare( shadowMap, uv + vec2( 0.0, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 0.0, 2.0 * dy ), shadowCoord.z ), - f.y ) + - mix( texture2DCompare( shadowMap, uv + vec2( dx, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( dx, 2.0 * dy ), shadowCoord.z ), - f.y ) + - mix( mix( texture2DCompare( shadowMap, uv + vec2( -dx, -dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, -dy ), shadowCoord.z ), - f.x ), - mix( texture2DCompare( shadowMap, uv + vec2( -dx, 2.0 * dy ), shadowCoord.z ), - texture2DCompare( shadowMap, uv + vec2( 2.0 * dx, 2.0 * dy ), shadowCoord.z ), - f.x ), - f.y ) - ) * ( 1.0 / 9.0 ); - #elif defined( SHADOWMAP_TYPE_VSM ) - shadow = VSMShadow( shadowMap, shadowCoord.xy, shadowCoord.z ); - #else - shadow = texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ); - #endif - } - return shadow; - } - vec2 cubeToUV( vec3 v, float texelSizeY ) { - vec3 absV = abs( v ); - float scaleToCube = 1.0 / max( absV.x, max( absV.y, absV.z ) ); - absV *= scaleToCube; - v *= scaleToCube * ( 1.0 - 2.0 * texelSizeY ); - vec2 planar = v.xy; - float almostATexel = 1.5 * texelSizeY; - float almostOne = 1.0 - almostATexel; - if ( absV.z >= almostOne ) { - if ( v.z > 0.0 ) - planar.x = 4.0 - v.x; - } else if ( absV.x >= almostOne ) { - float signX = sign( v.x ); - planar.x = v.z * signX + 2.0 * signX; - } else if ( absV.y >= almostOne ) { - float signY = sign( v.y ); - planar.x = v.x + 2.0 * signY + 2.0; - planar.y = v.z * signY - 2.0; - } - return vec2( 0.125, 0.25 ) * planar + vec2( 0.375, 0.75 ); - } - float getPointShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord, float shadowCameraNear, float shadowCameraFar ) { - vec2 texelSize = vec2( 1.0 ) / ( shadowMapSize * vec2( 4.0, 2.0 ) ); - vec3 lightToPosition = shadowCoord.xyz; - float dp = ( length( lightToPosition ) - shadowCameraNear ) / ( shadowCameraFar - shadowCameraNear ); dp += shadowBias; - vec3 bd3D = normalize( lightToPosition ); - #if defined( SHADOWMAP_TYPE_PCF ) || defined( SHADOWMAP_TYPE_PCF_SOFT ) || defined( SHADOWMAP_TYPE_VSM ) - vec2 offset = vec2( - 1, 1 ) * shadowRadius * texelSize.y; - return ( - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xyx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yyx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxy, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.xxx, texelSize.y ), dp ) + - texture2DCompare( shadowMap, cubeToUV( bd3D + offset.yxx, texelSize.y ), dp ) - ) * ( 1.0 / 9.0 ); - #else - return texture2DCompare( shadowMap, cubeToUV( bd3D, texelSize.y ), dp ); - #endif - } -#endif`,CK=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - uniform mat4 directionalShadowMatrix[ NUM_DIR_LIGHT_SHADOWS ]; - varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHT_SHADOWS ]; - struct DirectionalLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform DirectionalLightShadow directionalLightShadows[ NUM_DIR_LIGHT_SHADOWS ]; - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - uniform mat4 spotShadowMatrix[ NUM_SPOT_LIGHT_SHADOWS ]; - varying vec4 vSpotShadowCoord[ NUM_SPOT_LIGHT_SHADOWS ]; - struct SpotLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - }; - uniform SpotLightShadow spotLightShadows[ NUM_SPOT_LIGHT_SHADOWS ]; - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - uniform mat4 pointShadowMatrix[ NUM_POINT_LIGHT_SHADOWS ]; - varying vec4 vPointShadowCoord[ NUM_POINT_LIGHT_SHADOWS ]; - struct PointLightShadow { - float shadowBias; - float shadowNormalBias; - float shadowRadius; - vec2 shadowMapSize; - float shadowCameraNear; - float shadowCameraFar; - }; - uniform PointLightShadow pointLightShadows[ NUM_POINT_LIGHT_SHADOWS ]; - #endif -#endif`,EK=`#ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 || NUM_SPOT_LIGHT_SHADOWS > 0 || NUM_POINT_LIGHT_SHADOWS > 0 - vec3 shadowWorldNormal = inverseTransformDirection( transformedNormal, viewMatrix ); - vec4 shadowWorldPosition; - #endif - #if NUM_DIR_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * directionalLightShadows[ i ].shadowNormalBias, 0 ); - vDirectionalShadowCoord[ i ] = directionalShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * spotLightShadows[ i ].shadowNormalBias, 0 ); - vSpotShadowCoord[ i ] = spotShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) { - shadowWorldPosition = worldPosition + vec4( shadowWorldNormal * pointLightShadows[ i ].shadowNormalBias, 0 ); - vPointShadowCoord[ i ] = pointShadowMatrix[ i ] * shadowWorldPosition; - } - #pragma unroll_loop_end - #endif -#endif`,IK=`float getShadowMask() { - float shadow = 1.0; - #ifdef USE_SHADOWMAP - #if NUM_DIR_LIGHT_SHADOWS > 0 - DirectionalLightShadow directionalLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_DIR_LIGHT_SHADOWS; i ++ ) { - directionalLight = directionalLightShadows[ i ]; - shadow *= receiveShadow ? getShadow( directionalShadowMap[ i ], directionalLight.shadowMapSize, directionalLight.shadowBias, directionalLight.shadowRadius, vDirectionalShadowCoord[ i ] ) : 1.0; - } - #pragma unroll_loop_end - #endif - #if NUM_SPOT_LIGHT_SHADOWS > 0 - SpotLightShadow spotLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_SPOT_LIGHT_SHADOWS; i ++ ) { - spotLight = spotLightShadows[ i ]; - shadow *= receiveShadow ? getShadow( spotShadowMap[ i ], spotLight.shadowMapSize, spotLight.shadowBias, spotLight.shadowRadius, vSpotShadowCoord[ i ] ) : 1.0; - } - #pragma unroll_loop_end - #endif - #if NUM_POINT_LIGHT_SHADOWS > 0 - PointLightShadow pointLight; - #pragma unroll_loop_start - for ( int i = 0; i < NUM_POINT_LIGHT_SHADOWS; i ++ ) { - pointLight = pointLightShadows[ i ]; - shadow *= receiveShadow ? getPointShadow( pointShadowMap[ i ], pointLight.shadowMapSize, pointLight.shadowBias, pointLight.shadowRadius, vPointShadowCoord[ i ], pointLight.shadowCameraNear, pointLight.shadowCameraFar ) : 1.0; - } - #pragma unroll_loop_end - #endif - #endif - return shadow; -}`,LK=`#ifdef USE_SKINNING - mat4 boneMatX = getBoneMatrix( skinIndex.x ); - mat4 boneMatY = getBoneMatrix( skinIndex.y ); - mat4 boneMatZ = getBoneMatrix( skinIndex.z ); - mat4 boneMatW = getBoneMatrix( skinIndex.w ); -#endif`,kK=`#ifdef USE_SKINNING - uniform mat4 bindMatrix; - uniform mat4 bindMatrixInverse; - #ifdef BONE_TEXTURE - uniform highp sampler2D boneTexture; - uniform int boneTextureSize; - mat4 getBoneMatrix( const in float i ) { - float j = i * 4.0; - float x = mod( j, float( boneTextureSize ) ); - float y = floor( j / float( boneTextureSize ) ); - float dx = 1.0 / float( boneTextureSize ); - float dy = 1.0 / float( boneTextureSize ); - y = dy * ( y + 0.5 ); - vec4 v1 = texture2D( boneTexture, vec2( dx * ( x + 0.5 ), y ) ); - vec4 v2 = texture2D( boneTexture, vec2( dx * ( x + 1.5 ), y ) ); - vec4 v3 = texture2D( boneTexture, vec2( dx * ( x + 2.5 ), y ) ); - vec4 v4 = texture2D( boneTexture, vec2( dx * ( x + 3.5 ), y ) ); - mat4 bone = mat4( v1, v2, v3, v4 ); - return bone; - } - #else - uniform mat4 boneMatrices[ MAX_BONES ]; - mat4 getBoneMatrix( const in float i ) { - mat4 bone = boneMatrices[ int(i) ]; - return bone; - } - #endif -#endif`,AK=`#ifdef USE_SKINNING - vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 ); - vec4 skinned = vec4( 0.0 ); - skinned += boneMatX * skinVertex * skinWeight.x; - skinned += boneMatY * skinVertex * skinWeight.y; - skinned += boneMatZ * skinVertex * skinWeight.z; - skinned += boneMatW * skinVertex * skinWeight.w; - transformed = ( bindMatrixInverse * skinned ).xyz; -#endif`,RK=`#ifdef USE_SKINNING - mat4 skinMatrix = mat4( 0.0 ); - skinMatrix += skinWeight.x * boneMatX; - skinMatrix += skinWeight.y * boneMatY; - skinMatrix += skinWeight.z * boneMatZ; - skinMatrix += skinWeight.w * boneMatW; - skinMatrix = bindMatrixInverse * skinMatrix * bindMatrix; - objectNormal = vec4( skinMatrix * vec4( objectNormal, 0.0 ) ).xyz; - #ifdef USE_TANGENT - objectTangent = vec4( skinMatrix * vec4( objectTangent, 0.0 ) ).xyz; - #endif -#endif`,OK=`float specularStrength; -#ifdef USE_SPECULARMAP - vec4 texelSpecular = texture2D( specularMap, vUv ); - specularStrength = texelSpecular.r; -#else - specularStrength = 1.0; -#endif`,zK=`#ifdef USE_SPECULARMAP - uniform sampler2D specularMap; -#endif`,VK=`#if defined( TONE_MAPPING ) - gl_FragColor.rgb = toneMapping( gl_FragColor.rgb ); -#endif`,DK=`#ifndef saturate -#define saturate( a ) clamp( a, 0.0, 1.0 ) -#endif -uniform float toneMappingExposure; -vec3 LinearToneMapping( vec3 color ) { - return toneMappingExposure * color; -} -vec3 ReinhardToneMapping( vec3 color ) { - color *= toneMappingExposure; - return saturate( color / ( vec3( 1.0 ) + color ) ); -} -vec3 OptimizedCineonToneMapping( vec3 color ) { - color *= toneMappingExposure; - color = max( vec3( 0.0 ), color - 0.004 ); - return pow( ( color * ( 6.2 * color + 0.5 ) ) / ( color * ( 6.2 * color + 1.7 ) + 0.06 ), vec3( 2.2 ) ); -} -vec3 RRTAndODTFit( vec3 v ) { - vec3 a = v * ( v + 0.0245786 ) - 0.000090537; - vec3 b = v * ( 0.983729 * v + 0.4329510 ) + 0.238081; - return a / b; -} -vec3 ACESFilmicToneMapping( vec3 color ) { - const mat3 ACESInputMat = mat3( - vec3( 0.59719, 0.07600, 0.02840 ), vec3( 0.35458, 0.90834, 0.13383 ), - vec3( 0.04823, 0.01566, 0.83777 ) - ); - const mat3 ACESOutputMat = mat3( - vec3( 1.60475, -0.10208, -0.00327 ), vec3( -0.53108, 1.10813, -0.07276 ), - vec3( -0.07367, -0.00605, 1.07602 ) - ); - color *= toneMappingExposure / 0.6; - color = ACESInputMat * color; - color = RRTAndODTFit( color ); - color = ACESOutputMat * color; - return saturate( color ); -} -vec3 CustomToneMapping( vec3 color ) { return color; }`,FK=`#ifdef USE_TRANSMISSION - float transmissionAlpha = 1.0; - float transmissionFactor = transmission; - float thicknessFactor = thickness; - #ifdef USE_TRANSMISSIONMAP - transmissionFactor *= texture2D( transmissionMap, vUv ).r; - #endif - #ifdef USE_THICKNESSMAP - thicknessFactor *= texture2D( thicknessMap, vUv ).g; - #endif - vec3 pos = vWorldPosition; - vec3 v = normalize( cameraPosition - pos ); - vec3 n = inverseTransformDirection( normal, viewMatrix ); - vec4 transmission = getIBLVolumeRefraction( - n, v, roughnessFactor, material.diffuseColor, material.specularColor, material.specularF90, - pos, modelMatrix, viewMatrix, projectionMatrix, ior, thicknessFactor, - attenuationColor, attenuationDistance ); - totalDiffuse = mix( totalDiffuse, transmission.rgb, transmissionFactor ); - transmissionAlpha = mix( transmissionAlpha, transmission.a, transmissionFactor ); -#endif`,jK=`#ifdef USE_TRANSMISSION - uniform float transmission; - uniform float thickness; - uniform float attenuationDistance; - uniform vec3 attenuationColor; - #ifdef USE_TRANSMISSIONMAP - uniform sampler2D transmissionMap; - #endif - #ifdef USE_THICKNESSMAP - uniform sampler2D thicknessMap; - #endif - uniform vec2 transmissionSamplerSize; - uniform sampler2D transmissionSamplerMap; - uniform mat4 modelMatrix; - uniform mat4 projectionMatrix; - varying vec3 vWorldPosition; - vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) { - vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior ); - vec3 modelScale; - modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) ); - modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) ); - modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) ); - return normalize( refractionVector ) * thickness * modelScale; - } - float applyIorToRoughness( const in float roughness, const in float ior ) { - return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 ); - } - vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) { - float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior ); - #ifdef texture2DLodEXT - return texture2DLodEXT( transmissionSamplerMap, fragCoord.xy, framebufferLod ); - #else - return texture2D( transmissionSamplerMap, fragCoord.xy, framebufferLod ); - #endif - } - vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) { - if ( attenuationDistance == 0.0 ) { - return radiance; - } else { - vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance; - vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); return transmittance * radiance; - } - } - vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor, - const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix, - const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness, - const in vec3 attenuationColor, const in float attenuationDistance ) { - vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix ); - vec3 refractedRayExit = position + transmissionRay; - vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 ); - vec2 refractionCoords = ndcPos.xy / ndcPos.w; - refractionCoords += 1.0; - refractionCoords /= 2.0; - vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior ); - vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance ); - vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness ); - return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a ); - } -#endif`,NK=`#if ( defined( USE_UV ) && ! defined( UVS_VERTEX_ONLY ) ) - varying vec2 vUv; -#endif`,BK=`#ifdef USE_UV - #ifdef UVS_VERTEX_ONLY - vec2 vUv; - #else - varying vec2 vUv; - #endif - uniform mat3 uvTransform; -#endif`,GK=`#ifdef USE_UV - vUv = ( uvTransform * vec3( uv, 1 ) ).xy; -#endif`,HK=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - varying vec2 vUv2; -#endif`,UK=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - attribute vec2 uv2; - varying vec2 vUv2; - uniform mat3 uv2Transform; -#endif`,WK=`#if defined( USE_LIGHTMAP ) || defined( USE_AOMAP ) - vUv2 = ( uv2Transform * vec3( uv2, 1 ) ).xy; -#endif`,XK=`#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP ) || defined ( USE_TRANSMISSION ) - vec4 worldPosition = vec4( transformed, 1.0 ); - #ifdef USE_INSTANCING - worldPosition = instanceMatrix * worldPosition; - #endif - worldPosition = modelMatrix * worldPosition; -#endif`;const YK=`varying vec2 vUv; -uniform mat3 uvTransform; -void main() { - vUv = ( uvTransform * vec3( uv, 1 ) ).xy; - gl_Position = vec4( position.xy, 1.0, 1.0 ); -}`,KK=`uniform sampler2D t2D; -varying vec2 vUv; -void main() { - gl_FragColor = texture2D( t2D, vUv ); - #ifdef DECODE_VIDEO_TEXTURE - gl_FragColor = vec4( mix( pow( gl_FragColor.rgb * 0.9478672986 + vec3( 0.0521327014 ), vec3( 2.4 ) ), gl_FragColor.rgb * 0.0773993808, vec3( lessThanEqual( gl_FragColor.rgb, vec3( 0.04045 ) ) ) ), gl_FragColor.w ); - #endif - #include - #include -}`,qK=`varying vec3 vWorldDirection; -#include -void main() { - vWorldDirection = transformDirection( position, modelMatrix ); - #include - #include - gl_Position.z = gl_Position.w; -}`,ZK=`#include -uniform float opacity; -varying vec3 vWorldDirection; -#include -void main() { - vec3 vReflect = vWorldDirection; - #include - gl_FragColor = envColor; - gl_FragColor.a *= opacity; - #include - #include -}`,JK=`#include -#include -#include -#include -#include -#include -#include -varying vec2 vHighPrecisionZW; -void main() { - #include - #include - #ifdef USE_DISPLACEMENTMAP - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - vHighPrecisionZW = gl_Position.zw; -}`,QK=`#if DEPTH_PACKING == 3200 - uniform float opacity; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -varying vec2 vHighPrecisionZW; -void main() { - #include - vec4 diffuseColor = vec4( 1.0 ); - #if DEPTH_PACKING == 3200 - diffuseColor.a = opacity; - #endif - #include - #include - #include - #include - float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5; - #if DEPTH_PACKING == 3200 - gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity ); - #elif DEPTH_PACKING == 3201 - gl_FragColor = packDepthToRGBA( fragCoordZ ); - #endif -}`,eq=`#define DISTANCE -varying vec3 vWorldPosition; -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #ifdef USE_DISPLACEMENTMAP - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - vWorldPosition = worldPosition.xyz; -}`,tq=`#define DISTANCE -uniform vec3 referencePosition; -uniform float nearDistance; -uniform float farDistance; -varying vec3 vWorldPosition; -#include -#include -#include -#include -#include -#include -#include -void main () { - #include - vec4 diffuseColor = vec4( 1.0 ); - #include - #include - #include - float dist = length( vWorldPosition - referencePosition ); - dist = ( dist - nearDistance ) / ( farDistance - nearDistance ); - dist = saturate( dist ); - gl_FragColor = packDepthToRGBA( dist ); -}`,iq=`varying vec3 vWorldDirection; -#include -void main() { - vWorldDirection = transformDirection( position, modelMatrix ); - #include - #include -}`,rq=`uniform sampler2D tEquirect; -varying vec3 vWorldDirection; -#include -void main() { - vec3 direction = normalize( vWorldDirection ); - vec2 sampleUV = equirectUv( direction ); - gl_FragColor = texture2D( tEquirect, sampleUV ); - #include - #include -}`,nq=`uniform float scale; -attribute float lineDistance; -varying float vLineDistance; -#include -#include -#include -#include -#include -#include -void main() { - vLineDistance = scale * lineDistance; - #include - #include - #include - #include - #include - #include - #include - #include -}`,sq=`uniform vec3 diffuse; -uniform float opacity; -uniform float dashSize; -uniform float totalSize; -varying float vLineDistance; -#include -#include -#include -#include -#include -void main() { - #include - if ( mod( vLineDistance, totalSize ) > dashSize ) { - discard; - } - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include - #include -}`,aq=`#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #if defined ( USE_ENVMAP ) || defined ( USE_SKINNING ) - #include - #include - #include - #include - #include - #endif - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,oq=`uniform vec3 diffuse; -uniform float opacity; -#ifndef FLAT_SHADED - varying vec3 vNormal; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - #include - #include - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - #ifdef USE_LIGHTMAP - vec4 lightMapTexel = texture2D( lightMap, vUv2 ); - reflectedLight.indirectDiffuse += lightMapTexel.rgb * lightMapIntensity * RECIPROCAL_PI; - #else - reflectedLight.indirectDiffuse += vec3( 1.0 ); - #endif - #include - reflectedLight.indirectDiffuse *= diffuseColor.rgb; - vec3 outgoingLight = reflectedLight.indirectDiffuse; - #include - #include - #include - #include - #include - #include - #include -}`,lq=`#define LAMBERT -varying vec3 vLightFront; -varying vec3 vIndirectFront; -#ifdef DOUBLE_SIDED - varying vec3 vLightBack; - varying vec3 vIndirectBack; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,cq=`uniform vec3 diffuse; -uniform vec3 emissive; -uniform float opacity; -varying vec3 vLightFront; -varying vec3 vIndirectFront; -#ifdef DOUBLE_SIDED - varying vec3 vLightBack; - varying vec3 vIndirectBack; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #ifdef DOUBLE_SIDED - reflectedLight.indirectDiffuse += ( gl_FrontFacing ) ? vIndirectFront : vIndirectBack; - #else - reflectedLight.indirectDiffuse += vIndirectFront; - #endif - #include - reflectedLight.indirectDiffuse *= BRDF_Lambert( diffuseColor.rgb ); - #ifdef DOUBLE_SIDED - reflectedLight.directDiffuse = ( gl_FrontFacing ) ? vLightFront : vLightBack; - #else - reflectedLight.directDiffuse = vLightFront; - #endif - reflectedLight.directDiffuse *= BRDF_Lambert( diffuseColor.rgb ) * getShadowMask(); - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include - #include -}`,hq=`#define MATCAP -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; -}`,dq=`#define MATCAP -uniform vec3 diffuse; -uniform float opacity; -uniform sampler2D matcap; -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - #include - #include - #include - vec3 viewDir = normalize( vViewPosition ); - vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) ); - vec3 y = cross( viewDir, x ); - vec2 uv = vec2( dot( x, normal ), dot( y, normal ) ) * 0.495 + 0.5; - #ifdef USE_MATCAP - vec4 matcapColor = texture2D( matcap, uv ); - #else - vec4 matcapColor = vec4( vec3( mix( 0.2, 0.8, uv.y ) ), 1.0 ); - #endif - vec3 outgoingLight = diffuseColor.rgb * matcapColor.rgb; - #include - #include - #include - #include - #include - #include -}`,uq=`#define NORMAL -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - varying vec3 vViewPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - vViewPosition = - mvPosition.xyz; -#endif -}`,pq=`#define NORMAL -uniform float opacity; -#if defined( FLAT_SHADED ) || defined( USE_BUMPMAP ) || defined( TANGENTSPACE_NORMALMAP ) - varying vec3 vViewPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - gl_FragColor = vec4( packNormalToRGB( normal ), opacity ); - #ifdef OPAQUE - gl_FragColor.a = 1.0; - #endif -}`,fq=`#define PHONG -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include - #include -}`,gq=`#define PHONG -uniform vec3 diffuse; -uniform vec3 emissive; -uniform vec3 specular; -uniform float shininess; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include - #include -}`,mq=`#define STANDARD -varying vec3 vViewPosition; -#ifdef USE_TRANSMISSION - varying vec3 vWorldPosition; -#endif -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include -#ifdef USE_TRANSMISSION - vWorldPosition = worldPosition.xyz; -#endif -}`,vq=`#define STANDARD -#ifdef PHYSICAL - #define IOR - #define SPECULAR -#endif -uniform vec3 diffuse; -uniform vec3 emissive; -uniform float roughness; -uniform float metalness; -uniform float opacity; -#ifdef IOR - uniform float ior; -#endif -#ifdef SPECULAR - uniform float specularIntensity; - uniform vec3 specularColor; - #ifdef USE_SPECULARINTENSITYMAP - uniform sampler2D specularIntensityMap; - #endif - #ifdef USE_SPECULARCOLORMAP - uniform sampler2D specularColorMap; - #endif -#endif -#ifdef USE_CLEARCOAT - uniform float clearcoat; - uniform float clearcoatRoughness; -#endif -#ifdef USE_SHEEN - uniform vec3 sheenColor; - uniform float sheenRoughness; - #ifdef USE_SHEENCOLORMAP - uniform sampler2D sheenColorMap; - #endif - #ifdef USE_SHEENROUGHNESSMAP - uniform sampler2D sheenRoughnessMap; - #endif -#endif -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 totalDiffuse = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse; - vec3 totalSpecular = reflectedLight.directSpecular + reflectedLight.indirectSpecular; - #include - vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance; - #ifdef USE_SHEEN - float sheenEnergyComp = 1.0 - 0.157 * max3( material.sheenColor ); - outgoingLight = outgoingLight * sheenEnergyComp + sheenSpecular; - #endif - #ifdef USE_CLEARCOAT - float dotNVcc = saturate( dot( geometry.clearcoatNormal, geometry.viewDir ) ); - vec3 Fcc = F_Schlick( material.clearcoatF0, material.clearcoatF90, dotNVcc ); - outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + clearcoatSpecular * material.clearcoat; - #endif - #include - #include - #include - #include - #include - #include -}`,yq=`#define TOON -varying vec3 vViewPosition; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vViewPosition = - mvPosition.xyz; - #include - #include - #include -}`,xq=`#define TOON -uniform vec3 diffuse; -uniform vec3 emissive; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec4 diffuseColor = vec4( diffuse, opacity ); - ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) ); - vec3 totalEmissiveRadiance = emissive; - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance; - #include - #include - #include - #include - #include - #include -}`,bq=`uniform float size; -uniform float scale; -#include -#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - gl_PointSize = size; - #ifdef USE_SIZEATTENUATION - bool isPerspective = isPerspectiveMatrix( projectionMatrix ); - if ( isPerspective ) gl_PointSize *= ( scale / - mvPosition.z ); - #endif - #include - #include - #include - #include -}`,_q=`uniform vec3 diffuse; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include - #include -}`,Sq=`#include -#include -#include -#include -#include -void main() { - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include - #include -}`,wq=`uniform vec3 color; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -void main() { - gl_FragColor = vec4( color, opacity * ( 1.0 - getShadowMask() ) ); - #include - #include - #include -}`,Mq=`uniform float rotation; -uniform vec2 center; -#include -#include -#include -#include -#include -void main() { - #include - vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 ); - vec2 scale; - scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) ); - scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) ); - #ifndef USE_SIZEATTENUATION - bool isPerspective = isPerspectiveMatrix( projectionMatrix ); - if ( isPerspective ) scale *= - mvPosition.z; - #endif - vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale; - vec2 rotatedPosition; - rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y; - rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y; - mvPosition.xy += rotatedPosition; - gl_Position = projectionMatrix * mvPosition; - #include - #include - #include -}`,$q=`uniform vec3 diffuse; -uniform float opacity; -#include -#include -#include -#include -#include -#include -#include -#include -void main() { - #include - vec3 outgoingLight = vec3( 0.0 ); - vec4 diffuseColor = vec4( diffuse, opacity ); - #include - #include - #include - #include - outgoingLight = diffuseColor.rgb; - #include - #include - #include - #include -}`,Ut={alphamap_fragment:QX,alphamap_pars_fragment:eY,alphatest_fragment:tY,alphatest_pars_fragment:iY,aomap_fragment:rY,aomap_pars_fragment:nY,begin_vertex:sY,beginnormal_vertex:aY,bsdfs:oY,bumpmap_pars_fragment:lY,clipping_planes_fragment:cY,clipping_planes_pars_fragment:hY,clipping_planes_pars_vertex:dY,clipping_planes_vertex:uY,color_fragment:pY,color_pars_fragment:fY,color_pars_vertex:gY,color_vertex:mY,common:vY,cube_uv_reflection_fragment:yY,defaultnormal_vertex:xY,displacementmap_pars_vertex:bY,displacementmap_vertex:_Y,emissivemap_fragment:SY,emissivemap_pars_fragment:wY,encodings_fragment:MY,encodings_pars_fragment:$Y,envmap_fragment:PY,envmap_common_pars_fragment:TY,envmap_pars_fragment:CY,envmap_pars_vertex:EY,envmap_physical_pars_fragment:jY,envmap_vertex:IY,fog_vertex:LY,fog_pars_vertex:kY,fog_fragment:AY,fog_pars_fragment:RY,gradientmap_pars_fragment:OY,lightmap_fragment:zY,lightmap_pars_fragment:VY,lights_lambert_vertex:DY,lights_pars_begin:FY,lights_toon_fragment:NY,lights_toon_pars_fragment:BY,lights_phong_fragment:GY,lights_phong_pars_fragment:HY,lights_physical_fragment:UY,lights_physical_pars_fragment:WY,lights_fragment_begin:XY,lights_fragment_maps:YY,lights_fragment_end:KY,logdepthbuf_fragment:qY,logdepthbuf_pars_fragment:ZY,logdepthbuf_pars_vertex:JY,logdepthbuf_vertex:QY,map_fragment:eK,map_pars_fragment:tK,map_particle_fragment:iK,map_particle_pars_fragment:rK,metalnessmap_fragment:nK,metalnessmap_pars_fragment:sK,morphcolor_vertex:aK,morphnormal_vertex:oK,morphtarget_pars_vertex:lK,morphtarget_vertex:cK,normal_fragment_begin:hK,normal_fragment_maps:dK,normal_pars_fragment:uK,normal_pars_vertex:pK,normal_vertex:fK,normalmap_pars_fragment:gK,clearcoat_normal_fragment_begin:mK,clearcoat_normal_fragment_maps:vK,clearcoat_pars_fragment:yK,output_fragment:xK,packing:bK,premultiplied_alpha_fragment:_K,project_vertex:SK,dithering_fragment:wK,dithering_pars_fragment:MK,roughnessmap_fragment:$K,roughnessmap_pars_fragment:PK,shadowmap_pars_fragment:TK,shadowmap_pars_vertex:CK,shadowmap_vertex:EK,shadowmask_pars_fragment:IK,skinbase_vertex:LK,skinning_pars_vertex:kK,skinning_vertex:AK,skinnormal_vertex:RK,specularmap_fragment:OK,specularmap_pars_fragment:zK,tonemapping_fragment:VK,tonemapping_pars_fragment:DK,transmission_fragment:FK,transmission_pars_fragment:jK,uv_pars_fragment:NK,uv_pars_vertex:BK,uv_vertex:GK,uv2_pars_fragment:HK,uv2_pars_vertex:UK,uv2_vertex:WK,worldpos_vertex:XK,background_vert:YK,background_frag:KK,cube_vert:qK,cube_frag:ZK,depth_vert:JK,depth_frag:QK,distanceRGBA_vert:eq,distanceRGBA_frag:tq,equirect_vert:iq,equirect_frag:rq,linedashed_vert:nq,linedashed_frag:sq,meshbasic_vert:aq,meshbasic_frag:oq,meshlambert_vert:lq,meshlambert_frag:cq,meshmatcap_vert:hq,meshmatcap_frag:dq,meshnormal_vert:uq,meshnormal_frag:pq,meshphong_vert:fq,meshphong_frag:gq,meshphysical_vert:mq,meshphysical_frag:vq,meshtoon_vert:yq,meshtoon_frag:xq,points_vert:bq,points_frag:_q,shadow_vert:Sq,shadow_frag:wq,sprite_vert:Mq,sprite_frag:$q},Xe={common:{diffuse:{value:new tt(16777215)},opacity:{value:1},map:{value:null},uvTransform:{value:new vr},uv2Transform:{value:new vr},alphaMap:{value:null},alphaTest:{value:0}},specularmap:{specularMap:{value:null}},envmap:{envMap:{value:null},flipEnvMap:{value:-1},reflectivity:{value:1},ior:{value:1.5},refractionRatio:{value:.98}},aomap:{aoMap:{value:null},aoMapIntensity:{value:1}},lightmap:{lightMap:{value:null},lightMapIntensity:{value:1}},emissivemap:{emissiveMap:{value:null}},bumpmap:{bumpMap:{value:null},bumpScale:{value:1}},normalmap:{normalMap:{value:null},normalScale:{value:new _e(1,1)}},displacementmap:{displacementMap:{value:null},displacementScale:{value:1},displacementBias:{value:0}},roughnessmap:{roughnessMap:{value:null}},metalnessmap:{metalnessMap:{value:null}},gradientmap:{gradientMap:{value:null}},fog:{fogDensity:{value:25e-5},fogNear:{value:1},fogFar:{value:2e3},fogColor:{value:new tt(16777215)}},lights:{ambientLightColor:{value:[]},lightProbe:{value:[]},directionalLights:{value:[],properties:{direction:{},color:{}}},directionalLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{}}},directionalShadowMap:{value:[]},directionalShadowMatrix:{value:[]},spotLights:{value:[],properties:{color:{},position:{},direction:{},distance:{},coneCos:{},penumbraCos:{},decay:{}}},spotLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{}}},spotShadowMap:{value:[]},spotShadowMatrix:{value:[]},pointLights:{value:[],properties:{color:{},position:{},decay:{},distance:{}}},pointLightShadows:{value:[],properties:{shadowBias:{},shadowNormalBias:{},shadowRadius:{},shadowMapSize:{},shadowCameraNear:{},shadowCameraFar:{}}},pointShadowMap:{value:[]},pointShadowMatrix:{value:[]},hemisphereLights:{value:[],properties:{direction:{},skyColor:{},groundColor:{}}},rectAreaLights:{value:[],properties:{color:{},position:{},width:{},height:{}}},ltc_1:{value:null},ltc_2:{value:null}},points:{diffuse:{value:new tt(16777215)},opacity:{value:1},size:{value:1},scale:{value:1},map:{value:null},alphaMap:{value:null},alphaTest:{value:0},uvTransform:{value:new vr}},sprite:{diffuse:{value:new tt(16777215)},opacity:{value:1},center:{value:new _e(.5,.5)},rotation:{value:0},map:{value:null},alphaMap:{value:null},alphaTest:{value:0},uvTransform:{value:new vr}}},as={basic:{uniforms:Ir([Xe.common,Xe.specularmap,Xe.envmap,Xe.aomap,Xe.lightmap,Xe.fog]),vertexShader:Ut.meshbasic_vert,fragmentShader:Ut.meshbasic_frag},lambert:{uniforms:Ir([Xe.common,Xe.specularmap,Xe.envmap,Xe.aomap,Xe.lightmap,Xe.emissivemap,Xe.fog,Xe.lights,{emissive:{value:new tt(0)}}]),vertexShader:Ut.meshlambert_vert,fragmentShader:Ut.meshlambert_frag},phong:{uniforms:Ir([Xe.common,Xe.specularmap,Xe.envmap,Xe.aomap,Xe.lightmap,Xe.emissivemap,Xe.bumpmap,Xe.normalmap,Xe.displacementmap,Xe.fog,Xe.lights,{emissive:{value:new tt(0)},specular:{value:new tt(1118481)},shininess:{value:30}}]),vertexShader:Ut.meshphong_vert,fragmentShader:Ut.meshphong_frag},standard:{uniforms:Ir([Xe.common,Xe.envmap,Xe.aomap,Xe.lightmap,Xe.emissivemap,Xe.bumpmap,Xe.normalmap,Xe.displacementmap,Xe.roughnessmap,Xe.metalnessmap,Xe.fog,Xe.lights,{emissive:{value:new tt(0)},roughness:{value:1},metalness:{value:0},envMapIntensity:{value:1}}]),vertexShader:Ut.meshphysical_vert,fragmentShader:Ut.meshphysical_frag},toon:{uniforms:Ir([Xe.common,Xe.aomap,Xe.lightmap,Xe.emissivemap,Xe.bumpmap,Xe.normalmap,Xe.displacementmap,Xe.gradientmap,Xe.fog,Xe.lights,{emissive:{value:new tt(0)}}]),vertexShader:Ut.meshtoon_vert,fragmentShader:Ut.meshtoon_frag},matcap:{uniforms:Ir([Xe.common,Xe.bumpmap,Xe.normalmap,Xe.displacementmap,Xe.fog,{matcap:{value:null}}]),vertexShader:Ut.meshmatcap_vert,fragmentShader:Ut.meshmatcap_frag},points:{uniforms:Ir([Xe.points,Xe.fog]),vertexShader:Ut.points_vert,fragmentShader:Ut.points_frag},dashed:{uniforms:Ir([Xe.common,Xe.fog,{scale:{value:1},dashSize:{value:1},totalSize:{value:2}}]),vertexShader:Ut.linedashed_vert,fragmentShader:Ut.linedashed_frag},depth:{uniforms:Ir([Xe.common,Xe.displacementmap]),vertexShader:Ut.depth_vert,fragmentShader:Ut.depth_frag},normal:{uniforms:Ir([Xe.common,Xe.bumpmap,Xe.normalmap,Xe.displacementmap,{opacity:{value:1}}]),vertexShader:Ut.meshnormal_vert,fragmentShader:Ut.meshnormal_frag},sprite:{uniforms:Ir([Xe.sprite,Xe.fog]),vertexShader:Ut.sprite_vert,fragmentShader:Ut.sprite_frag},background:{uniforms:{uvTransform:{value:new vr},t2D:{value:null}},vertexShader:Ut.background_vert,fragmentShader:Ut.background_frag},cube:{uniforms:Ir([Xe.envmap,{opacity:{value:1}}]),vertexShader:Ut.cube_vert,fragmentShader:Ut.cube_frag},equirect:{uniforms:{tEquirect:{value:null}},vertexShader:Ut.equirect_vert,fragmentShader:Ut.equirect_frag},distanceRGBA:{uniforms:Ir([Xe.common,Xe.displacementmap,{referencePosition:{value:new A},nearDistance:{value:1},farDistance:{value:1e3}}]),vertexShader:Ut.distanceRGBA_vert,fragmentShader:Ut.distanceRGBA_frag},shadow:{uniforms:Ir([Xe.lights,Xe.fog,{color:{value:new tt(0)},opacity:{value:1}}]),vertexShader:Ut.shadow_vert,fragmentShader:Ut.shadow_frag}};as.physical={uniforms:Ir([as.standard.uniforms,{clearcoat:{value:0},clearcoatMap:{value:null},clearcoatRoughness:{value:0},clearcoatRoughnessMap:{value:null},clearcoatNormalScale:{value:new _e(1,1)},clearcoatNormalMap:{value:null},sheen:{value:0},sheenColor:{value:new tt(0)},sheenColorMap:{value:null},sheenRoughness:{value:1},sheenRoughnessMap:{value:null},transmission:{value:0},transmissionMap:{value:null},transmissionSamplerSize:{value:new _e},transmissionSamplerMap:{value:null},thickness:{value:0},thicknessMap:{value:null},attenuationDistance:{value:0},attenuationColor:{value:new tt(0)},specularIntensity:{value:1},specularIntensityMap:{value:null},specularColor:{value:new tt(1,1,1)},specularColorMap:{value:null}}]),vertexShader:Ut.meshphysical_vert,fragmentShader:Ut.meshphysical_frag};function Pq(n,e,t,i,r,s){const a=new tt(0);let o=r===!0?0:1,l,c,h=null,d=0,u=null;function p(g,m){let v=!1,x=m.isScene===!0?m.background:null;x&&x.isTexture&&(x=e.get(x));const _=n.xr,b=_.getSession&&_.getSession();b&&b.environmentBlendMode==="additive"&&(x=null),x===null?f(a,o):x&&x.isColor&&(f(x,1),v=!0),(n.autoClear||v)&&n.clear(n.autoClearColor,n.autoClearDepth,n.autoClearStencil),x&&(x.isCubeTexture||x.mapping===td)?(c===void 0&&(c=new Be(new Ri(1,1,1),new Kn({name:"BackgroundCubeMaterial",uniforms:Hl(as.cube.uniforms),vertexShader:as.cube.vertexShader,fragmentShader:as.cube.fragmentShader,side:Un,depthTest:!1,depthWrite:!1,fog:!1})),c.geometry.deleteAttribute("normal"),c.geometry.deleteAttribute("uv"),c.onBeforeRender=function(S,C,k){this.matrixWorld.copyPosition(k.matrixWorld)},Object.defineProperty(c.material,"envMap",{get:function(){return this.uniforms.envMap.value}}),i.update(c)),c.material.uniforms.envMap.value=x,c.material.uniforms.flipEnvMap.value=x.isCubeTexture&&x.isRenderTargetTexture===!1?-1:1,(h!==x||d!==x.version||u!==n.toneMapping)&&(c.material.needsUpdate=!0,h=x,d=x.version,u=n.toneMapping),g.unshift(c,c.geometry,c.material,0,0,null)):x&&x.isTexture&&(l===void 0&&(l=new Be(new Ul(2,2),new Kn({name:"BackgroundMaterial",uniforms:Hl(as.background.uniforms),vertexShader:as.background.vertexShader,fragmentShader:as.background.fragmentShader,side:Qc,depthTest:!1,depthWrite:!1,fog:!1})),l.geometry.deleteAttribute("normal"),Object.defineProperty(l.material,"map",{get:function(){return this.uniforms.t2D.value}}),i.update(l)),l.material.uniforms.t2D.value=x,x.matrixAutoUpdate===!0&&x.updateMatrix(),l.material.uniforms.uvTransform.value.copy(x.matrix),(h!==x||d!==x.version||u!==n.toneMapping)&&(l.material.needsUpdate=!0,h=x,d=x.version,u=n.toneMapping),g.unshift(l,l.geometry,l.material,0,0,null))}function f(g,m){t.buffers.color.setClear(g.r,g.g,g.b,m,s)}return{getClearColor:function(){return a},setClearColor:function(g,m=1){a.set(g),o=m,f(a,o)},getClearAlpha:function(){return o},setClearAlpha:function(g){o=g,f(a,o)},render:p}}function Tq(n,e,t,i){const r=n.getParameter(34921),s=i.isWebGL2?null:e.get("OES_vertex_array_object"),a=i.isWebGL2||s!==null,o={},l=m(null);let c=l,h=!1;function d(j,J,Q,ee,K){let re=!1;if(a){const le=g(ee,Q,J);c!==le&&(c=le,p(c.object)),re=v(ee,K),re&&x(ee,K)}else{const le=J.wireframe===!0;(c.geometry!==ee.id||c.program!==Q.id||c.wireframe!==le)&&(c.geometry=ee.id,c.program=Q.id,c.wireframe=le,re=!0)}j.isInstancedMesh===!0&&(re=!0),K!==null&&t.update(K,34963),(re||h)&&(h=!1,O(j,J,Q,ee),K!==null&&n.bindBuffer(34963,t.get(K).buffer))}function u(){return i.isWebGL2?n.createVertexArray():s.createVertexArrayOES()}function p(j){return i.isWebGL2?n.bindVertexArray(j):s.bindVertexArrayOES(j)}function f(j){return i.isWebGL2?n.deleteVertexArray(j):s.deleteVertexArrayOES(j)}function g(j,J,Q){const ee=Q.wireframe===!0;let K=o[j.id];K===void 0&&(K={},o[j.id]=K);let re=K[J.id];re===void 0&&(re={},K[J.id]=re);let le=re[ee];return le===void 0&&(le=m(u()),re[ee]=le),le}function m(j){const J=[],Q=[],ee=[];for(let K=0;K=0){let ke=K[ve];if(ke===void 0&&(ve==="instanceMatrix"&&j.instanceMatrix&&(ke=j.instanceMatrix),ve==="instanceColor"&&j.instanceColor&&(ke=j.instanceColor)),ke!==void 0){const Je=ke.normalized,it=ke.itemSize,ye=t.get(ke);if(ye===void 0)continue;const Vt=ye.buffer,xt=ye.type,pt=ye.bytesPerElement;if(ke.isInterleavedBufferAttribute){const w=ke.data,L=w.stride,I=ke.offset;if(w.isInstancedInterleavedBuffer){for(let U=0;U0&&n.getShaderPrecisionFormat(35632,36338).precision>0)return"highp";k="mediump"}return k==="mediump"&&n.getShaderPrecisionFormat(35633,36337).precision>0&&n.getShaderPrecisionFormat(35632,36337).precision>0?"mediump":"lowp"}const a=typeof WebGL2RenderingContext!="undefined"&&n instanceof WebGL2RenderingContext||typeof WebGL2ComputeRenderingContext!="undefined"&&n instanceof WebGL2ComputeRenderingContext;let o=t.precision!==void 0?t.precision:"highp";const l=s(o);l!==o&&(console.warn("THREE.WebGLRenderer:",o,"not supported, using",l,"instead."),o=l);const c=a||e.has("WEBGL_draw_buffers"),h=t.logarithmicDepthBuffer===!0,d=n.getParameter(34930),u=n.getParameter(35660),p=n.getParameter(3379),f=n.getParameter(34076),g=n.getParameter(34921),m=n.getParameter(36347),v=n.getParameter(36348),x=n.getParameter(36349),_=u>0,b=a||e.has("OES_texture_float"),S=_&&b,C=a?n.getParameter(36183):0;return{isWebGL2:a,drawBuffers:c,getMaxAnisotropy:r,getMaxPrecision:s,precision:o,logarithmicDepthBuffer:h,maxTextures:d,maxVertexTextures:u,maxTextureSize:p,maxCubemapSize:f,maxAttributes:g,maxVertexUniforms:m,maxVaryings:v,maxFragmentUniforms:x,vertexTextures:_,floatFragmentTextures:b,floatVertexTextures:S,maxSamples:C}}function Iq(n){const e=this;let t=null,i=0,r=!1,s=!1;const a=new Ls,o=new vr,l={value:null,needsUpdate:!1};this.uniform=l,this.numPlanes=0,this.numIntersection=0,this.init=function(d,u,p){const f=d.length!==0||u||i!==0||r;return r=u,t=h(d,p,0),i=d.length,f},this.beginShadows=function(){s=!0,h(null)},this.endShadows=function(){s=!1,c()},this.setState=function(d,u,p){const f=d.clippingPlanes,g=d.clipIntersection,m=d.clipShadows,v=n.get(d);if(!r||f===null||f.length===0||s&&!m)s?h(null):c();else{const x=s?0:i,_=x*4;let b=v.clippingState||null;l.value=b,b=h(f,u,_,p);for(let S=0;S!==_;++S)b[S]=t[S];v.clippingState=b,this.numIntersection=g?this.numPlanes:0,this.numPlanes+=x}};function c(){l.value!==t&&(l.value=t,l.needsUpdate=i>0),e.numPlanes=i,e.numIntersection=0}function h(d,u,p,f){const g=d!==null?d.length:0;let m=null;if(g!==0){if(m=l.value,f!==!0||m===null){const v=p+g*4,x=u.matrixWorldInverse;o.getNormalMatrix(x),(m===null||m.length0){const c=new p_(l.height/2);return c.fromEquirectangularTexture(n,a),e.set(a,c),a.addEventListener("dispose",r),t(c.texture,a.mapping)}else return null}}return a}function r(a){const o=a.target;o.removeEventListener("dispose",r);const l=e.get(o);l!==void 0&&(e.delete(o),l.dispose())}function s(){e=new WeakMap}return{get:i,dispose:s}}class $p extends wp{constructor(e=-1,t=1,i=1,r=-1,s=.1,a=2e3){super(),this.type="OrthographicCamera",this.zoom=1,this.view=null,this.left=e,this.right=t,this.top=i,this.bottom=r,this.near=s,this.far=a,this.updateProjectionMatrix()}copy(e,t){return super.copy(e,t),this.left=e.left,this.right=e.right,this.top=e.top,this.bottom=e.bottom,this.near=e.near,this.far=e.far,this.zoom=e.zoom,this.view=e.view===null?null:Object.assign({},e.view),this}setViewOffset(e,t,i,r,s,a){this.view===null&&(this.view={enabled:!0,fullWidth:1,fullHeight:1,offsetX:0,offsetY:0,width:1,height:1}),this.view.enabled=!0,this.view.fullWidth=e,this.view.fullHeight=t,this.view.offsetX=i,this.view.offsetY=r,this.view.width=s,this.view.height=a,this.updateProjectionMatrix()}clearViewOffset(){this.view!==null&&(this.view.enabled=!1),this.updateProjectionMatrix()}updateProjectionMatrix(){const e=(this.right-this.left)/(2*this.zoom),t=(this.top-this.bottom)/(2*this.zoom),i=(this.right+this.left)/2,r=(this.top+this.bottom)/2;let s=i-e,a=i+e,o=r+t,l=r-t;if(this.view!==null&&this.view.enabled){const c=(this.right-this.left)/this.view.fullWidth/this.zoom,h=(this.top-this.bottom)/this.view.fullHeight/this.zoom;s+=c*this.view.offsetX,a=s+c*this.view.width,o-=h*this.view.offsetY,l=o-h*this.view.height}this.projectionMatrix.makeOrthographic(s,a,o,l,this.near,this.far),this.projectionMatrixInverse.copy(this.projectionMatrix).invert()}toJSON(e){const t=super.toJSON(e);return t.object.zoom=this.zoom,t.object.left=this.left,t.object.right=this.right,t.object.top=this.top,t.object.bottom=this.bottom,t.object.near=this.near,t.object.far=this.far,this.view!==null&&(t.object.view=Object.assign({},this.view)),t}}$p.prototype.isOrthographicCamera=!0;const Ml=4,Py=[.125,.215,.35,.446,.526,.582],eo=20,Zf=new $p,Ty=new tt;let Jf=null;const Ya=(1+Math.sqrt(5))/2,dl=1/Ya,Cy=[new A(1,1,1),new A(-1,1,1),new A(1,1,-1),new A(-1,1,-1),new A(0,Ya,dl),new A(0,Ya,-dl),new A(dl,0,Ya),new A(-dl,0,Ya),new A(Ya,dl,0),new A(-Ya,dl,0)];class Ey{constructor(e){this._renderer=e,this._pingPongRenderTarget=null,this._lodMax=0,this._cubeSize=0,this._lodPlanes=[],this._sizeLods=[],this._sigmas=[],this._blurMaterial=null,this._cubemapMaterial=null,this._equirectMaterial=null,this._compileMaterial(this._blurMaterial)}fromScene(e,t=0,i=.1,r=100){Jf=this._renderer.getRenderTarget(),this._setSize(256);const s=this._allocateTargets();return s.depthBuffer=!0,this._sceneToCubeUV(e,i,r,s),t>0&&this._blur(s,0,0,t),this._applyPMREM(s),this._cleanup(s),s}fromEquirectangular(e,t=null){return this._fromTexture(e,t)}fromCubemap(e,t=null){return this._fromTexture(e,t)}compileCubemapShader(){this._cubemapMaterial===null&&(this._cubemapMaterial=ky(),this._compileMaterial(this._cubemapMaterial))}compileEquirectangularShader(){this._equirectMaterial===null&&(this._equirectMaterial=Ly(),this._compileMaterial(this._equirectMaterial))}dispose(){this._dispose(),this._cubemapMaterial!==null&&this._cubemapMaterial.dispose(),this._equirectMaterial!==null&&this._equirectMaterial.dispose()}_setSize(e){this._lodMax=Math.floor(Math.log2(e)),this._cubeSize=Math.pow(2,this._lodMax)}_dispose(){this._blurMaterial!==null&&this._blurMaterial.dispose(),this._pingPongRenderTarget!==null&&this._pingPongRenderTarget.dispose();for(let e=0;e2?_:0,_,_),h.setRenderTarget(r),g&&h.render(f,o),h.render(e,o)}f.geometry.dispose(),f.material.dispose(),h.toneMapping=u,h.autoClear=d,e.background=m}_textureToCubeUV(e,t){const i=this._renderer,r=e.mapping===Eo||e.mapping===Io;r?(this._cubemapMaterial===null&&(this._cubemapMaterial=ky()),this._cubemapMaterial.uniforms.flipEnvMap.value=e.isRenderTargetTexture===!1?-1:1):this._equirectMaterial===null&&(this._equirectMaterial=Ly());const s=r?this._cubemapMaterial:this._equirectMaterial,a=new Be(this._lodPlanes[0],s),o=s.uniforms;o.envMap.value=e;const l=this._cubeSize;Yd(t,0,0,3*l,2*l),i.setRenderTarget(t),i.render(a,Zf)}_applyPMREM(e){const t=this._renderer,i=t.autoClear;t.autoClear=!1;for(let r=1;reo&&console.warn(`sigmaRadians, ${s}, is too large and will clip, as it requested ${m} samples when the maximum is set to ${eo}`);const v=[];let x=0;for(let k=0;k_-Ml?r-_+Ml:0),C=4*(this._cubeSize-b);Yd(t,S,C,3*b,2*b),l.setRenderTarget(t),l.render(d,Zf)}}function kq(n){const e=[],t=[],i=[];let r=n;const s=n-Ml+1+Py.length;for(let a=0;an-Ml?l=Py[a-n+Ml-1]:a===0&&(l=0),i.push(l);const c=1/(o-1),h=-c/2,d=1+c/2,u=[h,h,d,h,d,d,h,h,d,d,h,d],p=6,f=6,g=3,m=2,v=1,x=new Float32Array(g*f*p),_=new Float32Array(m*f*p),b=new Float32Array(v*f*p);for(let C=0;C2?0:-1,q=[k,O,0,k+2/3,O,0,k+2/3,O+1,0,k,O,0,k+2/3,O+1,0,k,O+1,0];x.set(q,g*f*C),_.set(u,m*f*C);const X=[C,C,C,C,C,C];b.set(X,v*f*C)}const S=new Ot;S.setAttribute("position",new Ai(x,g)),S.setAttribute("uv",new Ai(_,m)),S.setAttribute("faceIndex",new Ai(b,v)),e.push(S),r>Ml&&r--}return{lodPlanes:e,sizeLods:t,sigmas:i}}function Iy(n,e,t){const i=new nn(n,e,t);return i.texture.mapping=td,i.texture.name="PMREM.cubeUv",i.scissorTest=!0,i}function Yd(n,e,t,i,r){n.viewport.set(e,t,i,r),n.scissor.set(e,t,i,r)}function Aq(n,e,t){const i=new Float32Array(eo),r=new A(0,1,0);return new Kn({name:"SphericalGaussianBlur",defines:{n:eo,CUBEUV_TEXEL_WIDTH:1/e,CUBEUV_TEXEL_HEIGHT:1/t,CUBEUV_MAX_MIP:`${n}.0`},uniforms:{envMap:{value:null},samples:{value:1},weights:{value:i},latitudinal:{value:!1},dTheta:{value:0},mipInt:{value:0},poleAxis:{value:r}},vertexShader:Rm(),fragmentShader:` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - uniform int samples; - uniform float weights[ n ]; - uniform bool latitudinal; - uniform float dTheta; - uniform float mipInt; - uniform vec3 poleAxis; - - #define ENVMAP_TYPE_CUBE_UV - #include - - vec3 getSample( float theta, vec3 axis ) { - - float cosTheta = cos( theta ); - // Rodrigues' axis-angle rotation - vec3 sampleDirection = vOutputDirection * cosTheta - + cross( axis, vOutputDirection ) * sin( theta ) - + axis * dot( axis, vOutputDirection ) * ( 1.0 - cosTheta ); - - return bilinearCubeUV( envMap, sampleDirection, mipInt ); - - } - - void main() { - - vec3 axis = latitudinal ? poleAxis : cross( poleAxis, vOutputDirection ); - - if ( all( equal( axis, vec3( 0.0 ) ) ) ) { - - axis = vec3( vOutputDirection.z, 0.0, - vOutputDirection.x ); - - } - - axis = normalize( axis ); - - gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 ); - gl_FragColor.rgb += weights[ 0 ] * getSample( 0.0, axis ); - - for ( int i = 1; i < n; i++ ) { - - if ( i >= samples ) { - - break; - - } - - float theta = dTheta * float( i ); - gl_FragColor.rgb += weights[ i ] * getSample( -1.0 * theta, axis ); - gl_FragColor.rgb += weights[ i ] * getSample( theta, axis ); - - } - - } - `,blending:wa,depthTest:!1,depthWrite:!1})}function Ly(){return new Kn({name:"EquirectangularToCubeUV",uniforms:{envMap:{value:null}},vertexShader:Rm(),fragmentShader:` - - precision mediump float; - precision mediump int; - - varying vec3 vOutputDirection; - - uniform sampler2D envMap; - - #include - - void main() { - - vec3 outputDirection = normalize( vOutputDirection ); - vec2 uv = equirectUv( outputDirection ); - - gl_FragColor = vec4( texture2D ( envMap, uv ).rgb, 1.0 ); - - } - `,blending:wa,depthTest:!1,depthWrite:!1})}function ky(){return new Kn({name:"CubemapToCubeUV",uniforms:{envMap:{value:null},flipEnvMap:{value:-1}},vertexShader:Rm(),fragmentShader:` - - precision mediump float; - precision mediump int; - - uniform float flipEnvMap; - - varying vec3 vOutputDirection; - - uniform samplerCube envMap; - - void main() { - - gl_FragColor = textureCube( envMap, vec3( flipEnvMap * vOutputDirection.x, vOutputDirection.yz ) ); - - } - `,blending:wa,depthTest:!1,depthWrite:!1})}function Rm(){return` - - precision mediump float; - precision mediump int; - - attribute float faceIndex; - - varying vec3 vOutputDirection; - - // RH coordinate system; PMREM face-indexing convention - vec3 getDirection( vec2 uv, float face ) { - - uv = 2.0 * uv - 1.0; - - vec3 direction = vec3( uv, 1.0 ); - - if ( face == 0.0 ) { - - direction = direction.zyx; // ( 1, v, u ) pos x - - } else if ( face == 1.0 ) { - - direction = direction.xzy; - direction.xz *= -1.0; // ( -u, 1, -v ) pos y - - } else if ( face == 2.0 ) { - - direction.x *= -1.0; // ( -u, v, 1 ) pos z - - } else if ( face == 3.0 ) { - - direction = direction.zyx; - direction.xz *= -1.0; // ( -1, v, -u ) neg x - - } else if ( face == 4.0 ) { - - direction = direction.xzy; - direction.xy *= -1.0; // ( -u, -1, v ) neg y - - } else if ( face == 5.0 ) { - - direction.z *= -1.0; // ( u, v, -1 ) neg z - - } - - return direction; - - } - - void main() { - - vOutputDirection = getDirection( uv, faceIndex ); - gl_Position = vec4( position, 1.0 ); - - } - `}function Rq(n){let e=new WeakMap,t=null;function i(o){if(o&&o.isTexture){const l=o.mapping,c=l===Au||l===Ru,h=l===Eo||l===Io;if(c||h)if(o.isRenderTargetTexture&&o.needsPMREMUpdate===!0){o.needsPMREMUpdate=!1;let d=e.get(o);return t===null&&(t=new Ey(n)),d=c?t.fromEquirectangular(o,d):t.fromCubemap(o,d),e.set(o,d),d.texture}else{if(e.has(o))return e.get(o).texture;{const d=o.image;if(c&&d&&d.height>0||h&&d&&r(d)){t===null&&(t=new Ey(n));const u=c?t.fromEquirectangular(o):t.fromCubemap(o);return e.set(o,u),o.addEventListener("dispose",s),u.texture}else return null}}}return o}function r(o){let l=0;const c=6;for(let h=0;he.maxTextureSize&&(T=Math.ceil(X/e.maxTextureSize),X=e.maxTextureSize);const z=new Float32Array(X*T*4*g),ae=new Sp(z,X,T,g);ae.type=va,ae.needsUpdate=!0;const j=q*4;for(let Q=0;Q0)return n;const r=e*t;let s=Ay[r];if(s===void 0&&(s=new Float32Array(r),Ay[r]=s),e!==0){i.toArray(s,0);for(let a=1,o=0;a!==e;++a)o+=t,n[a].toArray(s,o)}return s}function Br(n,e){if(n.length!==e.length)return!1;for(let t=0,i=n.length;t/gm;function Fg(n){return n.replace(FZ,jZ)}function jZ(n,e){const t=Ut[e];if(t===void 0)throw new Error("Can not resolve #include <"+e+">");return Fg(t)}const NZ=/#pragma unroll_loop[\s]+?for \( int i \= (\d+)\; i < (\d+)\; i \+\+ \) \{([\s\S]+?)(?=\})\}/g,BZ=/#pragma unroll_loop_start\s+for\s*\(\s*int\s+i\s*=\s*(\d+)\s*;\s*i\s*<\s*(\d+)\s*;\s*i\s*\+\+\s*\)\s*{([\s\S]+?)}\s+#pragma unroll_loop_end/g;function Gy(n){return n.replace(BZ,__).replace(NZ,GZ)}function GZ(n,e,t,i){return console.warn("WebGLProgram: #pragma unroll_loop shader syntax is deprecated. Please use #pragma unroll_loop_start syntax instead."),__(n,e,t,i)}function __(n,e,t,i){let r="";for(let s=parseInt(e);s0&&(m+=` -`),v=[p,f].filter(Ac).join(` -`),v.length>0&&(v+=` -`)):(m=[Hy(t),"#define SHADER_NAME "+t.shaderName,f,t.instancing?"#define USE_INSTANCING":"",t.instancingColor?"#define USE_INSTANCING_COLOR":"",t.supportsVertexTextures?"#define VERTEX_TEXTURES":"","#define MAX_BONES "+t.maxBones,t.useFog&&t.fog?"#define USE_FOG":"",t.useFog&&t.fogExp2?"#define FOG_EXP2":"",t.map?"#define USE_MAP":"",t.envMap?"#define USE_ENVMAP":"",t.envMap?"#define "+h:"",t.lightMap?"#define USE_LIGHTMAP":"",t.aoMap?"#define USE_AOMAP":"",t.emissiveMap?"#define USE_EMISSIVEMAP":"",t.bumpMap?"#define USE_BUMPMAP":"",t.normalMap?"#define USE_NORMALMAP":"",t.normalMap&&t.objectSpaceNormalMap?"#define OBJECTSPACE_NORMALMAP":"",t.normalMap&&t.tangentSpaceNormalMap?"#define TANGENTSPACE_NORMALMAP":"",t.clearcoatMap?"#define USE_CLEARCOATMAP":"",t.clearcoatRoughnessMap?"#define USE_CLEARCOAT_ROUGHNESSMAP":"",t.clearcoatNormalMap?"#define USE_CLEARCOAT_NORMALMAP":"",t.displacementMap&&t.supportsVertexTextures?"#define USE_DISPLACEMENTMAP":"",t.specularMap?"#define USE_SPECULARMAP":"",t.specularIntensityMap?"#define USE_SPECULARINTENSITYMAP":"",t.specularColorMap?"#define USE_SPECULARCOLORMAP":"",t.roughnessMap?"#define USE_ROUGHNESSMAP":"",t.metalnessMap?"#define USE_METALNESSMAP":"",t.alphaMap?"#define USE_ALPHAMAP":"",t.transmission?"#define USE_TRANSMISSION":"",t.transmissionMap?"#define USE_TRANSMISSIONMAP":"",t.thicknessMap?"#define USE_THICKNESSMAP":"",t.sheenColorMap?"#define USE_SHEENCOLORMAP":"",t.sheenRoughnessMap?"#define USE_SHEENROUGHNESSMAP":"",t.vertexTangents?"#define USE_TANGENT":"",t.vertexColors?"#define USE_COLOR":"",t.vertexAlphas?"#define USE_COLOR_ALPHA":"",t.vertexUvs?"#define USE_UV":"",t.uvsVertexOnly?"#define UVS_VERTEX_ONLY":"",t.flatShading?"#define FLAT_SHADED":"",t.skinning?"#define USE_SKINNING":"",t.useVertexTexture?"#define BONE_TEXTURE":"",t.morphTargets?"#define USE_MORPHTARGETS":"",t.morphNormals&&t.flatShading===!1?"#define USE_MORPHNORMALS":"",t.morphColors&&t.isWebGL2?"#define USE_MORPHCOLORS":"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_TEXTURE":"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_TEXTURE_STRIDE "+t.morphTextureStride:"",t.morphTargetsCount>0&&t.isWebGL2?"#define MORPHTARGETS_COUNT "+t.morphTargetsCount:"",t.doubleSided?"#define DOUBLE_SIDED":"",t.flipSided?"#define FLIP_SIDED":"",t.shadowMapEnabled?"#define USE_SHADOWMAP":"",t.shadowMapEnabled?"#define "+l:"",t.sizeAttenuation?"#define USE_SIZEATTENUATION":"",t.logarithmicDepthBuffer?"#define USE_LOGDEPTHBUF":"",t.logarithmicDepthBuffer&&t.rendererExtensionFragDepth?"#define USE_LOGDEPTHBUF_EXT":"","uniform mat4 modelMatrix;","uniform mat4 modelViewMatrix;","uniform mat4 projectionMatrix;","uniform mat4 viewMatrix;","uniform mat3 normalMatrix;","uniform vec3 cameraPosition;","uniform bool isOrthographic;","#ifdef USE_INSTANCING"," attribute mat4 instanceMatrix;","#endif","#ifdef USE_INSTANCING_COLOR"," attribute vec3 instanceColor;","#endif","attribute vec3 position;","attribute vec3 normal;","attribute vec2 uv;","#ifdef USE_TANGENT"," attribute vec4 tangent;","#endif","#if defined( USE_COLOR_ALPHA )"," attribute vec4 color;","#elif defined( USE_COLOR )"," attribute vec3 color;","#endif","#if ( defined( USE_MORPHTARGETS ) && ! defined( MORPHTARGETS_TEXTURE ) )"," attribute vec3 morphTarget0;"," attribute vec3 morphTarget1;"," attribute vec3 morphTarget2;"," attribute vec3 morphTarget3;"," #ifdef USE_MORPHNORMALS"," attribute vec3 morphNormal0;"," attribute vec3 morphNormal1;"," attribute vec3 morphNormal2;"," attribute vec3 morphNormal3;"," #else"," attribute vec3 morphTarget4;"," attribute vec3 morphTarget5;"," attribute vec3 morphTarget6;"," attribute vec3 morphTarget7;"," #endif","#endif","#ifdef USE_SKINNING"," attribute vec4 skinIndex;"," attribute vec4 skinWeight;","#endif",` -`].filter(Ac).join(` -`),v=[p,Hy(t),"#define SHADER_NAME "+t.shaderName,f,t.useFog&&t.fog?"#define USE_FOG":"",t.useFog&&t.fogExp2?"#define FOG_EXP2":"",t.map?"#define USE_MAP":"",t.matcap?"#define USE_MATCAP":"",t.envMap?"#define USE_ENVMAP":"",t.envMap?"#define "+c:"",t.envMap?"#define "+h:"",t.envMap?"#define "+d:"",u?"#define CUBEUV_TEXEL_WIDTH "+u.texelWidth:"",u?"#define CUBEUV_TEXEL_HEIGHT "+u.texelHeight:"",u?"#define CUBEUV_MAX_MIP "+u.maxMip+".0":"",t.lightMap?"#define USE_LIGHTMAP":"",t.aoMap?"#define USE_AOMAP":"",t.emissiveMap?"#define USE_EMISSIVEMAP":"",t.bumpMap?"#define USE_BUMPMAP":"",t.normalMap?"#define USE_NORMALMAP":"",t.normalMap&&t.objectSpaceNormalMap?"#define OBJECTSPACE_NORMALMAP":"",t.normalMap&&t.tangentSpaceNormalMap?"#define TANGENTSPACE_NORMALMAP":"",t.clearcoat?"#define USE_CLEARCOAT":"",t.clearcoatMap?"#define USE_CLEARCOATMAP":"",t.clearcoatRoughnessMap?"#define USE_CLEARCOAT_ROUGHNESSMAP":"",t.clearcoatNormalMap?"#define USE_CLEARCOAT_NORMALMAP":"",t.specularMap?"#define USE_SPECULARMAP":"",t.specularIntensityMap?"#define USE_SPECULARINTENSITYMAP":"",t.specularColorMap?"#define USE_SPECULARCOLORMAP":"",t.roughnessMap?"#define USE_ROUGHNESSMAP":"",t.metalnessMap?"#define USE_METALNESSMAP":"",t.alphaMap?"#define USE_ALPHAMAP":"",t.alphaTest?"#define USE_ALPHATEST":"",t.sheen?"#define USE_SHEEN":"",t.sheenColorMap?"#define USE_SHEENCOLORMAP":"",t.sheenRoughnessMap?"#define USE_SHEENROUGHNESSMAP":"",t.transmission?"#define USE_TRANSMISSION":"",t.transmissionMap?"#define USE_TRANSMISSIONMAP":"",t.thicknessMap?"#define USE_THICKNESSMAP":"",t.decodeVideoTexture?"#define DECODE_VIDEO_TEXTURE":"",t.vertexTangents?"#define USE_TANGENT":"",t.vertexColors||t.instancingColor?"#define USE_COLOR":"",t.vertexAlphas?"#define USE_COLOR_ALPHA":"",t.vertexUvs?"#define USE_UV":"",t.uvsVertexOnly?"#define UVS_VERTEX_ONLY":"",t.gradientMap?"#define USE_GRADIENTMAP":"",t.flatShading?"#define FLAT_SHADED":"",t.doubleSided?"#define DOUBLE_SIDED":"",t.flipSided?"#define FLIP_SIDED":"",t.shadowMapEnabled?"#define USE_SHADOWMAP":"",t.shadowMapEnabled?"#define "+l:"",t.premultipliedAlpha?"#define PREMULTIPLIED_ALPHA":"",t.physicallyCorrectLights?"#define PHYSICALLY_CORRECT_LIGHTS":"",t.logarithmicDepthBuffer?"#define USE_LOGDEPTHBUF":"",t.logarithmicDepthBuffer&&t.rendererExtensionFragDepth?"#define USE_LOGDEPTHBUF_EXT":"","uniform mat4 viewMatrix;","uniform vec3 cameraPosition;","uniform bool isOrthographic;",t.toneMapping!==Ds?"#define TONE_MAPPING":"",t.toneMapping!==Ds?Ut.tonemapping_pars_fragment:"",t.toneMapping!==Ds?OZ("toneMapping",t.toneMapping):"",t.dithering?"#define DITHERING":"",t.opaque?"#define OPAQUE":"",Ut.encodings_pars_fragment,RZ("linearToOutputTexel",t.outputEncoding),t.depthPacking?"#define DEPTH_PACKING "+t.depthPacking:"",` -`].filter(Ac).join(` -`)),a=Fg(a),a=Ny(a,t),a=By(a,t),o=Fg(o),o=Ny(o,t),o=By(o,t),a=Gy(a),o=Gy(o),t.isWebGL2&&t.isRawShaderMaterial!==!0&&(x=`#version 300 es -`,m=["precision mediump sampler2DArray;","#define attribute in","#define varying out","#define texture2D texture"].join(` -`)+` -`+m,v=["#define varying in",t.glslVersion===py?"":"layout(location = 0) out highp vec4 pc_fragColor;",t.glslVersion===py?"":"#define gl_FragColor pc_fragColor","#define gl_FragDepthEXT gl_FragDepth","#define texture2D texture","#define textureCube texture","#define texture2DProj textureProj","#define texture2DLodEXT textureLod","#define texture2DProjLodEXT textureProjLod","#define textureCubeLodEXT textureLod","#define texture2DGradEXT textureGrad","#define texture2DProjGradEXT textureProjGrad","#define textureCubeGradEXT textureGrad"].join(` -`)+` -`+v);const _=x+m+a,b=x+v+o,S=Fy(r,35633,_),C=Fy(r,35632,b);if(r.attachShader(g,S),r.attachShader(g,C),t.index0AttributeName!==void 0?r.bindAttribLocation(g,0,t.index0AttributeName):t.morphTargets===!0&&r.bindAttribLocation(g,0,"position"),r.linkProgram(g),n.debug.checkShaderErrors){const q=r.getProgramInfoLog(g).trim(),X=r.getShaderInfoLog(S).trim(),T=r.getShaderInfoLog(C).trim();let z=!0,ae=!0;if(r.getProgramParameter(g,35714)===!1){z=!1;const j=jy(r,S,"vertex"),J=jy(r,C,"fragment");console.error("THREE.WebGLProgram: Shader Error "+r.getError()+" - VALIDATE_STATUS "+r.getProgramParameter(g,35715)+` - -Program Info Log: `+q+` -`+j+` -`+J)}else q!==""?console.warn("THREE.WebGLProgram: Program Info Log:",q):(X===""||T==="")&&(ae=!1);ae&&(this.diagnostics={runnable:z,programLog:q,vertexShader:{log:X,prefix:m},fragmentShader:{log:T,prefix:v}})}r.deleteShader(S),r.deleteShader(C);let k;this.getUniforms=function(){return k===void 0&&(k=new Ma(r,g)),k};let O;return this.getAttributes=function(){return O===void 0&&(O=DZ(r,g)),O},this.destroy=function(){i.releaseStatesOfProgram(this),r.deleteProgram(g),this.program=void 0},this.name=t.shaderName,this.id=LZ++,this.cacheKey=e,this.usedTimes=1,this.program=g,this.vertexShader=S,this.fragmentShader=C,this}let qZ=0;class ZZ{constructor(){this.shaderCache=new Map,this.materialCache=new Map}update(e){const t=e.vertexShader,i=e.fragmentShader,r=this._getShaderStage(t),s=this._getShaderStage(i),a=this._getShaderCacheForMaterial(e);return a.has(r)===!1&&(a.add(r),r.usedTimes++),a.has(s)===!1&&(a.add(s),s.usedTimes++),this}remove(e){const t=this.materialCache.get(e);for(const i of t)i.usedTimes--,i.usedTimes===0&&this.shaderCache.delete(i.code);return this.materialCache.delete(e),this}getVertexShaderID(e){return this._getShaderStage(e.vertexShader).id}getFragmentShaderID(e){return this._getShaderStage(e.fragmentShader).id}dispose(){this.shaderCache.clear(),this.materialCache.clear()}_getShaderCacheForMaterial(e){const t=this.materialCache;return t.has(e)===!1&&t.set(e,new Set),t.get(e)}_getShaderStage(e){const t=this.shaderCache;if(t.has(e)===!1){const i=new JZ(e);t.set(e,i)}return t.get(e)}}class JZ{constructor(e){this.id=qZ++,this.code=e,this.usedTimes=0}}function QZ(n,e,t,i,r,s,a){const o=new km,l=new ZZ,c=[],h=r.isWebGL2,d=r.logarithmicDepthBuffer,u=r.floatVertexTextures,p=r.maxVertexUniforms,f=r.vertexTextures;let g=r.precision;const m={MeshDepthMaterial:"depth",MeshDistanceMaterial:"distanceRGBA",MeshNormalMaterial:"normal",MeshBasicMaterial:"basic",MeshLambertMaterial:"lambert",MeshPhongMaterial:"phong",MeshToonMaterial:"toon",MeshStandardMaterial:"physical",MeshPhysicalMaterial:"physical",MeshMatcapMaterial:"matcap",LineBasicMaterial:"basic",LineDashedMaterial:"dashed",PointsMaterial:"points",ShadowMaterial:"shadow",SpriteMaterial:"sprite"};function v(T){const ae=T.skeleton.bones;if(u)return 1024;{const J=Math.floor((p-20)/4),Q=Math.min(J,ae.length);return Q0,I=T.clearcoat>0;return{isWebGL2:h,shaderID:ve,shaderName:T.type,vertexShader:ye,fragmentShader:Vt,defines:T.defines,customVertexShaderID:xt,customFragmentShaderID:pt,isRawShaderMaterial:T.isRawShaderMaterial===!0,glslVersion:T.glslVersion,precision:g,instancing:J.isInstancedMesh===!0,instancingColor:J.isInstancedMesh===!0&&J.instanceColor!==null,supportsVertexTextures:f,outputEncoding:w===null?n.outputEncoding:w.isXRRenderTarget===!0?w.texture.encoding:js,map:!!T.map,matcap:!!T.matcap,envMap:!!re,envMapMode:re&&re.mapping,envMapCubeUVHeight:le,lightMap:!!T.lightMap,aoMap:!!T.aoMap,emissiveMap:!!T.emissiveMap,bumpMap:!!T.bumpMap,normalMap:!!T.normalMap,objectSpaceNormalMap:T.normalMapType===TX,tangentSpaceNormalMap:T.normalMapType===tc,decodeVideoTexture:!!T.map&&T.map.isVideoTexture===!0&&T.map.encoding===Ei,clearcoat:I,clearcoatMap:I&&!!T.clearcoatMap,clearcoatRoughnessMap:I&&!!T.clearcoatRoughnessMap,clearcoatNormalMap:I&&!!T.clearcoatNormalMap,displacementMap:!!T.displacementMap,roughnessMap:!!T.roughnessMap,metalnessMap:!!T.metalnessMap,specularMap:!!T.specularMap,specularIntensityMap:!!T.specularIntensityMap,specularColorMap:!!T.specularColorMap,opaque:T.transparent===!1&&T.blending===El,alphaMap:!!T.alphaMap,alphaTest:L,gradientMap:!!T.gradientMap,sheen:T.sheen>0,sheenColorMap:!!T.sheenColorMap,sheenRoughnessMap:!!T.sheenRoughnessMap,transmission:T.transmission>0,transmissionMap:!!T.transmissionMap,thicknessMap:!!T.thicknessMap,combine:T.combine,vertexTangents:!!T.normalMap&&!!ee.attributes.tangent,vertexColors:T.vertexColors,vertexAlphas:T.vertexColors===!0&&!!ee.attributes.color&&ee.attributes.color.itemSize===4,vertexUvs:!!T.map||!!T.bumpMap||!!T.normalMap||!!T.specularMap||!!T.alphaMap||!!T.emissiveMap||!!T.roughnessMap||!!T.metalnessMap||!!T.clearcoatMap||!!T.clearcoatRoughnessMap||!!T.clearcoatNormalMap||!!T.displacementMap||!!T.transmissionMap||!!T.thicknessMap||!!T.specularIntensityMap||!!T.specularColorMap||!!T.sheenColorMap||!!T.sheenRoughnessMap,uvsVertexOnly:!(!!T.map||!!T.bumpMap||!!T.normalMap||!!T.specularMap||!!T.alphaMap||!!T.emissiveMap||!!T.roughnessMap||!!T.metalnessMap||!!T.clearcoatNormalMap||T.transmission>0||!!T.transmissionMap||!!T.thicknessMap||!!T.specularIntensityMap||!!T.specularColorMap||T.sheen>0||!!T.sheenColorMap||!!T.sheenRoughnessMap)&&!!T.displacementMap,fog:!!Q,useFog:T.fog,fogExp2:Q&&Q.isFogExp2,flatShading:!!T.flatShading,sizeAttenuation:T.sizeAttenuation,logarithmicDepthBuffer:d,skinning:J.isSkinnedMesh===!0&&Z>0,maxBones:Z,useVertexTexture:u,morphTargets:ee.morphAttributes.position!==void 0,morphNormals:ee.morphAttributes.normal!==void 0,morphColors:ee.morphAttributes.color!==void 0,morphTargetsCount:Je,morphTextureStride:it,numDirLights:z.directional.length,numPointLights:z.point.length,numSpotLights:z.spot.length,numRectAreaLights:z.rectArea.length,numHemiLights:z.hemi.length,numDirLightShadows:z.directionalShadowMap.length,numPointLightShadows:z.pointShadowMap.length,numSpotLightShadows:z.spotShadowMap.length,numClippingPlanes:a.numPlanes,numClipIntersection:a.numIntersection,dithering:T.dithering,shadowMapEnabled:n.shadowMap.enabled&&ae.length>0,shadowMapType:n.shadowMap.type,toneMapping:T.toneMapped?n.toneMapping:Ds,physicallyCorrectLights:n.physicallyCorrectLights,premultipliedAlpha:T.premultipliedAlpha,doubleSided:T.side===Co,flipSided:T.side===Un,depthPacking:T.depthPacking!==void 0?T.depthPacking:!1,index0AttributeName:T.index0AttributeName,extensionDerivatives:T.extensions&&T.extensions.derivatives,extensionFragDepth:T.extensions&&T.extensions.fragDepth,extensionDrawBuffers:T.extensions&&T.extensions.drawBuffers,extensionShaderTextureLOD:T.extensions&&T.extensions.shaderTextureLOD,rendererExtensionFragDepth:h||i.has("EXT_frag_depth"),rendererExtensionDrawBuffers:h||i.has("WEBGL_draw_buffers"),rendererExtensionShaderTextureLod:h||i.has("EXT_shader_texture_lod"),customProgramCacheKey:T.customProgramCacheKey()}}function _(T){const z=[];if(T.shaderID?z.push(T.shaderID):(z.push(T.customVertexShaderID),z.push(T.customFragmentShaderID)),T.defines!==void 0)for(const ae in T.defines)z.push(ae),z.push(T.defines[ae]);return T.isRawShaderMaterial===!1&&(b(z,T),S(z,T),z.push(n.outputEncoding)),z.push(T.customProgramCacheKey),z.join()}function b(T,z){T.push(z.precision),T.push(z.outputEncoding),T.push(z.envMapMode),T.push(z.envMapCubeUVHeight),T.push(z.combine),T.push(z.vertexUvs),T.push(z.fogExp2),T.push(z.sizeAttenuation),T.push(z.maxBones),T.push(z.morphTargetsCount),T.push(z.morphAttributeCount),T.push(z.numDirLights),T.push(z.numPointLights),T.push(z.numSpotLights),T.push(z.numHemiLights),T.push(z.numRectAreaLights),T.push(z.numDirLightShadows),T.push(z.numPointLightShadows),T.push(z.numSpotLightShadows),T.push(z.shadowMapType),T.push(z.toneMapping),T.push(z.numClippingPlanes),T.push(z.numClipIntersection)}function S(T,z){o.disableAll(),z.isWebGL2&&o.enable(0),z.supportsVertexTextures&&o.enable(1),z.instancing&&o.enable(2),z.instancingColor&&o.enable(3),z.map&&o.enable(4),z.matcap&&o.enable(5),z.envMap&&o.enable(6),z.lightMap&&o.enable(7),z.aoMap&&o.enable(8),z.emissiveMap&&o.enable(9),z.bumpMap&&o.enable(10),z.normalMap&&o.enable(11),z.objectSpaceNormalMap&&o.enable(12),z.tangentSpaceNormalMap&&o.enable(13),z.clearcoat&&o.enable(14),z.clearcoatMap&&o.enable(15),z.clearcoatRoughnessMap&&o.enable(16),z.clearcoatNormalMap&&o.enable(17),z.displacementMap&&o.enable(18),z.specularMap&&o.enable(19),z.roughnessMap&&o.enable(20),z.metalnessMap&&o.enable(21),z.gradientMap&&o.enable(22),z.alphaMap&&o.enable(23),z.alphaTest&&o.enable(24),z.vertexColors&&o.enable(25),z.vertexAlphas&&o.enable(26),z.vertexUvs&&o.enable(27),z.vertexTangents&&o.enable(28),z.uvsVertexOnly&&o.enable(29),z.fog&&o.enable(30),T.push(o.mask),o.disableAll(),z.useFog&&o.enable(0),z.flatShading&&o.enable(1),z.logarithmicDepthBuffer&&o.enable(2),z.skinning&&o.enable(3),z.useVertexTexture&&o.enable(4),z.morphTargets&&o.enable(5),z.morphNormals&&o.enable(6),z.morphColors&&o.enable(7),z.premultipliedAlpha&&o.enable(8),z.shadowMapEnabled&&o.enable(9),z.physicallyCorrectLights&&o.enable(10),z.doubleSided&&o.enable(11),z.flipSided&&o.enable(12),z.depthPacking&&o.enable(13),z.dithering&&o.enable(14),z.specularIntensityMap&&o.enable(15),z.specularColorMap&&o.enable(16),z.transmission&&o.enable(17),z.transmissionMap&&o.enable(18),z.thicknessMap&&o.enable(19),z.sheen&&o.enable(20),z.sheenColorMap&&o.enable(21),z.sheenRoughnessMap&&o.enable(22),z.decodeVideoTexture&&o.enable(23),z.opaque&&o.enable(24),T.push(o.mask)}function C(T){const z=m[T.type];let ae;if(z){const j=as[z];ae=XX.clone(j.uniforms)}else ae=T.uniforms;return ae}function k(T,z){let ae;for(let j=0,J=c.length;j0?i.push(v):p.transparent===!0?r.push(v):t.push(v)}function l(d,u,p,f,g,m){const v=a(d,u,p,f,g,m);p.transmission>0?i.unshift(v):p.transparent===!0?r.unshift(v):t.unshift(v)}function c(d,u){t.length>1&&t.sort(d||tJ),i.length>1&&i.sort(u||Uy),r.length>1&&r.sort(u||Uy)}function h(){for(let d=e,u=n.length;d=n.get(i).length?(s=new Wy,n.get(i).push(s)):s=n.get(i)[r],s}function t(){n=new WeakMap}return{get:e,dispose:t}}function rJ(){const n={};return{get:function(e){if(n[e.id]!==void 0)return n[e.id];let t;switch(e.type){case"DirectionalLight":t={direction:new A,color:new tt};break;case"SpotLight":t={position:new A,direction:new A,color:new tt,distance:0,coneCos:0,penumbraCos:0,decay:0};break;case"PointLight":t={position:new A,color:new tt,distance:0,decay:0};break;case"HemisphereLight":t={direction:new A,skyColor:new tt,groundColor:new tt};break;case"RectAreaLight":t={color:new tt,position:new A,halfWidth:new A,halfHeight:new A};break}return n[e.id]=t,t}}}function nJ(){const n={};return{get:function(e){if(n[e.id]!==void 0)return n[e.id];let t;switch(e.type){case"DirectionalLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new _e};break;case"SpotLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new _e};break;case"PointLight":t={shadowBias:0,shadowNormalBias:0,shadowRadius:1,shadowMapSize:new _e,shadowCameraNear:1,shadowCameraFar:1e3};break}return n[e.id]=t,t}}}let sJ=0;function aJ(n,e){return(e.castShadow?1:0)-(n.castShadow?1:0)}function oJ(n,e){const t=new rJ,i=nJ(),r={version:0,hash:{directionalLength:-1,pointLength:-1,spotLength:-1,rectAreaLength:-1,hemiLength:-1,numDirectionalShadows:-1,numPointShadows:-1,numSpotShadows:-1},ambient:[0,0,0],probe:[],directional:[],directionalShadow:[],directionalShadowMap:[],directionalShadowMatrix:[],spot:[],spotShadow:[],spotShadowMap:[],spotShadowMatrix:[],rectArea:[],rectAreaLTC1:null,rectAreaLTC2:null,point:[],pointShadow:[],pointShadowMap:[],pointShadowMatrix:[],hemi:[]};for(let h=0;h<9;h++)r.probe.push(new A);const s=new A,a=new yt,o=new yt;function l(h,d){let u=0,p=0,f=0;for(let q=0;q<9;q++)r.probe[q].set(0,0,0);let g=0,m=0,v=0,x=0,_=0,b=0,S=0,C=0;h.sort(aJ);const k=d!==!0?Math.PI:1;for(let q=0,X=h.length;q0&&(e.isWebGL2||n.has("OES_texture_float_linear")===!0?(r.rectAreaLTC1=Xe.LTC_FLOAT_1,r.rectAreaLTC2=Xe.LTC_FLOAT_2):n.has("OES_texture_half_float_linear")===!0?(r.rectAreaLTC1=Xe.LTC_HALF_1,r.rectAreaLTC2=Xe.LTC_HALF_2):console.error("THREE.WebGLRenderer: Unable to use RectAreaLight. Missing WebGL extensions.")),r.ambient[0]=u,r.ambient[1]=p,r.ambient[2]=f;const O=r.hash;(O.directionalLength!==g||O.pointLength!==m||O.spotLength!==v||O.rectAreaLength!==x||O.hemiLength!==_||O.numDirectionalShadows!==b||O.numPointShadows!==S||O.numSpotShadows!==C)&&(r.directional.length=g,r.spot.length=v,r.rectArea.length=x,r.point.length=m,r.hemi.length=_,r.directionalShadow.length=b,r.directionalShadowMap.length=b,r.pointShadow.length=S,r.pointShadowMap.length=S,r.spotShadow.length=C,r.spotShadowMap.length=C,r.directionalShadowMatrix.length=b,r.pointShadowMatrix.length=S,r.spotShadowMatrix.length=C,O.directionalLength=g,O.pointLength=m,O.spotLength=v,O.rectAreaLength=x,O.hemiLength=_,O.numDirectionalShadows=b,O.numPointShadows=S,O.numSpotShadows=C,r.version=sJ++)}function c(h,d){let u=0,p=0,f=0,g=0,m=0;const v=d.matrixWorldInverse;for(let x=0,_=h.length;x<_;x++){const b=h[x];if(b.isDirectionalLight){const S=r.directional[u];S.direction.setFromMatrixPosition(b.matrixWorld),s.setFromMatrixPosition(b.target.matrixWorld),S.direction.sub(s),S.direction.transformDirection(v),u++}else if(b.isSpotLight){const S=r.spot[f];S.position.setFromMatrixPosition(b.matrixWorld),S.position.applyMatrix4(v),S.direction.setFromMatrixPosition(b.matrixWorld),s.setFromMatrixPosition(b.target.matrixWorld),S.direction.sub(s),S.direction.transformDirection(v),f++}else if(b.isRectAreaLight){const S=r.rectArea[g];S.position.setFromMatrixPosition(b.matrixWorld),S.position.applyMatrix4(v),o.identity(),a.copy(b.matrixWorld),a.premultiply(v),o.extractRotation(a),S.halfWidth.set(b.width*.5,0,0),S.halfHeight.set(0,b.height*.5,0),S.halfWidth.applyMatrix4(o),S.halfHeight.applyMatrix4(o),g++}else if(b.isPointLight){const S=r.point[p];S.position.setFromMatrixPosition(b.matrixWorld),S.position.applyMatrix4(v),p++}else if(b.isHemisphereLight){const S=r.hemi[m];S.direction.setFromMatrixPosition(b.matrixWorld),S.direction.transformDirection(v),S.direction.normalize(),m++}}}return{setup:l,setupView:c,state:r}}function Xy(n,e){const t=new oJ(n,e),i=[],r=[];function s(){i.length=0,r.length=0}function a(d){i.push(d)}function o(d){r.push(d)}function l(d){t.setup(i,d)}function c(d){t.setupView(i,d)}return{init:s,state:{lightsArray:i,shadowsArray:r,lights:t},setupLights:l,setupLightsView:c,pushLight:a,pushShadow:o}}function lJ(n,e){let t=new WeakMap;function i(s,a=0){let o;return t.has(s)===!1?(o=new Xy(n,e),t.set(s,[o])):a>=t.get(s).length?(o=new Xy(n,e),t.get(s).push(o)):o=t.get(s)[a],o}function r(){t=new WeakMap}return{get:i,dispose:r}}class Om extends rr{constructor(e){super(),this.type="MeshDepthMaterial",this.depthPacking=$X,this.map=null,this.alphaMap=null,this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.wireframe=!1,this.wireframeLinewidth=1,this.fog=!1,this.setValues(e)}copy(e){return super.copy(e),this.depthPacking=e.depthPacking,this.map=e.map,this.alphaMap=e.alphaMap,this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this}}Om.prototype.isMeshDepthMaterial=!0;class zm extends rr{constructor(e){super(),this.type="MeshDistanceMaterial",this.referencePosition=new A,this.nearDistance=1,this.farDistance=1e3,this.map=null,this.alphaMap=null,this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.fog=!1,this.setValues(e)}copy(e){return super.copy(e),this.referencePosition.copy(e.referencePosition),this.nearDistance=e.nearDistance,this.farDistance=e.farDistance,this.map=e.map,this.alphaMap=e.alphaMap,this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this}}zm.prototype.isMeshDistanceMaterial=!0;const cJ=`void main() { - gl_Position = vec4( position, 1.0 ); -}`,hJ=`uniform sampler2D shadow_pass; -uniform vec2 resolution; -uniform float radius; -#include -void main() { - const float samples = float( VSM_SAMPLES ); - float mean = 0.0; - float squared_mean = 0.0; - float uvStride = samples <= 1.0 ? 0.0 : 2.0 / ( samples - 1.0 ); - float uvStart = samples <= 1.0 ? 0.0 : - 1.0; - for ( float i = 0.0; i < samples; i ++ ) { - float uvOffset = uvStart + i * uvStride; - #ifdef HORIZONTAL_PASS - vec2 distribution = unpackRGBATo2Half( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( uvOffset, 0.0 ) * radius ) / resolution ) ); - mean += distribution.x; - squared_mean += distribution.y * distribution.y + distribution.x * distribution.x; - #else - float depth = unpackRGBAToDepth( texture2D( shadow_pass, ( gl_FragCoord.xy + vec2( 0.0, uvOffset ) * radius ) / resolution ) ); - mean += depth; - squared_mean += depth * depth; - #endif - } - mean = mean / samples; - squared_mean = squared_mean / samples; - float std_dev = sqrt( squared_mean - mean * mean ); - gl_FragColor = pack2HalfToRGBA( vec2( mean, std_dev ) ); -}`;function S_(n,e,t){let i=new Mp;const r=new _e,s=new _e,a=new ui,o=new Om({depthPacking:PX}),l=new zm,c={},h=t.maxTextureSize,d={0:Un,1:Qc,2:Co},u=new Kn({defines:{VSM_SAMPLES:8},uniforms:{shadow_pass:{value:null},resolution:{value:new _e},radius:{value:4}},vertexShader:cJ,fragmentShader:hJ}),p=u.clone();p.defines.HORIZONTAL_PASS=1;const f=new Ot;f.setAttribute("position",new Ai(new Float32Array([-1,-1,.5,3,-1,.5,-1,3,.5]),3));const g=new Be(f,u),m=this;this.enabled=!1,this.autoUpdate=!0,this.needsUpdate=!1,this.type=i_,this.render=function(b,S,C){if(m.enabled===!1||m.autoUpdate===!1&&m.needsUpdate===!1||b.length===0)return;const k=n.getRenderTarget(),O=n.getActiveCubeFace(),q=n.getActiveMipmapLevel(),X=n.state;X.setBlending(wa),X.buffers.color.setClear(1,1,1,1),X.buffers.depth.setTest(!0),X.setScissorTest(!1);for(let T=0,z=b.length;Th||r.y>h)&&(r.x>h&&(s.x=Math.floor(h/J.x),r.x=s.x*J.x,j.mapSize.x=s.x),r.y>h&&(s.y=Math.floor(h/J.y),r.y=s.y*J.y,j.mapSize.y=s.y)),j.map===null&&!j.isPointLightShadow&&this.type===kc&&(j.map=new nn(r.x,r.y),j.map.texture.name=ae.name+".shadowMap",j.mapPass=new nn(r.x,r.y),j.camera.updateProjectionMatrix()),j.map===null){const ee={minFilter:lr,magFilter:lr,format:mn};j.map=new nn(r.x,r.y,ee),j.map.texture.name=ae.name+".shadowMap",j.camera.updateProjectionMatrix()}n.setRenderTarget(j.map),n.clear();const Q=j.getViewportCount();for(let ee=0;ee0){const z=X.uuid,ae=S.uuid;let j=c[z];j===void 0&&(j={},c[z]=j);let J=j[ae];J===void 0&&(J=X.clone(),j[ae]=J),X=J}return X.visible=S.visible,X.wireframe=S.wireframe,q===kc?X.side=S.shadowSide!==null?S.shadowSide:S.side:X.side=S.shadowSide!==null?S.shadowSide:d[S.side],X.alphaMap=S.alphaMap,X.alphaTest=S.alphaTest,X.clipShadows=S.clipShadows,X.clippingPlanes=S.clippingPlanes,X.clipIntersection=S.clipIntersection,X.displacementMap=S.displacementMap,X.displacementScale=S.displacementScale,X.displacementBias=S.displacementBias,X.wireframeLinewidth=S.wireframeLinewidth,X.linewidth=S.linewidth,C.isPointLight===!0&&X.isMeshDistanceMaterial===!0&&(X.referencePosition.setFromMatrixPosition(C.matrixWorld),X.nearDistance=k,X.farDistance=O),X}function _(b,S,C,k,O){if(b.visible===!1)return;if(b.layers.test(S.layers)&&(b.isMesh||b.isLine||b.isPoints)&&(b.castShadow||b.receiveShadow&&O===kc)&&(!b.frustumCulled||i.intersectsObject(b))){b.modelViewMatrix.multiplyMatrices(C.matrixWorldInverse,b.matrixWorld);const T=e.update(b),z=b.material;if(Array.isArray(z)){const ae=T.groups;for(let j=0,J=ae.length;j=1):Q.indexOf("OpenGL ES")!==-1&&(J=parseFloat(/^OpenGL ES (\d)/.exec(Q)[1]),j=J>=2);let ee=null,K={};const re=n.getParameter(3088),le=n.getParameter(2978),ve=new ui().fromArray(re),Z=new ui().fromArray(le);function ke(Y,Ve,Oe){const gt=new Uint8Array(4),Ge=n.createTexture();n.bindTexture(Y,Ge),n.texParameteri(Y,10241,9728),n.texParameteri(Y,10240,9728);for(let lt=0;ltPe||B.height>Pe)&&(Ne=Pe/Math.max(B.width,B.height)),Ne<1||R===!0)if(typeof HTMLImageElement!="undefined"&&B instanceof HTMLImageElement||typeof HTMLCanvasElement!="undefined"&&B instanceof HTMLCanvasElement||typeof ImageBitmap!="undefined"&&B instanceof ImageBitmap){const We=R?Dg:Math.floor,dt=We(Ne*B.width),D=We(Ne*B.height);g===void 0&&(g=x(dt,D));const Ie=pe?x(dt,D):g;return Ie.width=dt,Ie.height=D,Ie.getContext("2d").drawImage(B,0,0,dt,D),console.warn("THREE.WebGLRenderer: Texture has been resized from ("+B.width+"x"+B.height+") to ("+dt+"x"+D+")."),Ie}else return"data"in B&&console.warn("THREE.WebGLRenderer: Image in DataTexture is too big ("+B.width+"x"+B.height+")."),B;return B}function b(B){return fy(B.width)&&fy(B.height)}function S(B){return o?!1:B.wrapS!==gn||B.wrapT!==gn||B.minFilter!==lr&&B.minFilter!==jr}function C(B,R){return B.generateMipmaps&&R&&B.minFilter!==lr&&B.minFilter!==jr}function k(B){n.generateMipmap(B)}function O(B,R,pe,Pe,Ne=!1){if(o===!1)return R;if(B!==null){if(n[B]!==void 0)return n[B];console.warn("THREE.WebGLRenderer: Attempt to use non-existing WebGL internal format '"+B+"'")}let We=R;return R===6403&&(pe===5126&&(We=33326),pe===5131&&(We=33325),pe===5121&&(We=33321)),R===33319&&(pe===5126&&(We=33328),pe===5131&&(We=33327),pe===5121&&(We=33323)),R===6408&&(pe===5126&&(We=34836),pe===5131&&(We=34842),pe===5121&&(We=Pe===Ei&&Ne===!1?35907:32856),pe===32819&&(We=32854),pe===32820&&(We=32855)),(We===33325||We===33326||We===33327||We===33328||We===34842||We===34836)&&e.get("EXT_color_buffer_float"),We}function q(B,R,pe){return C(B,pe)===!0||B.isFramebufferTexture&&B.minFilter!==lr&&B.minFilter!==jr?Math.log2(Math.max(R.width,R.height))+1:B.mipmaps!==void 0&&B.mipmaps.length>0?B.mipmaps.length:B.isCompressedTexture&&Array.isArray(B.image)?R.mipmaps.length:1}function X(B){return B===lr||B===Rg||B===Og?9728:9729}function T(B){const R=B.target;R.removeEventListener("dispose",T),ae(R),R.isVideoTexture&&f.delete(R)}function z(B){const R=B.target;R.removeEventListener("dispose",z),J(R)}function ae(B){const R=i.get(B);if(R.__webglInit===void 0)return;const pe=B.source,Pe=m.get(pe);if(Pe){const Ne=Pe[R.__cacheKey];Ne.usedTimes--,Ne.usedTimes===0&&j(B),Object.keys(Pe).length===0&&m.delete(pe)}i.remove(B)}function j(B){const R=i.get(B);n.deleteTexture(R.__webglTexture);const pe=B.source,Pe=m.get(pe);delete Pe[R.__cacheKey],a.memory.textures--}function J(B){const R=B.texture,pe=i.get(B),Pe=i.get(R);if(Pe.__webglTexture!==void 0&&(n.deleteTexture(Pe.__webglTexture),a.memory.textures--),B.depthTexture&&B.depthTexture.dispose(),B.isWebGLCubeRenderTarget)for(let Ne=0;Ne<6;Ne++)n.deleteFramebuffer(pe.__webglFramebuffer[Ne]),pe.__webglDepthbuffer&&n.deleteRenderbuffer(pe.__webglDepthbuffer[Ne]);else n.deleteFramebuffer(pe.__webglFramebuffer),pe.__webglDepthbuffer&&n.deleteRenderbuffer(pe.__webglDepthbuffer),pe.__webglMultisampledFramebuffer&&n.deleteFramebuffer(pe.__webglMultisampledFramebuffer),pe.__webglColorRenderbuffer&&n.deleteRenderbuffer(pe.__webglColorRenderbuffer),pe.__webglDepthRenderbuffer&&n.deleteRenderbuffer(pe.__webglDepthRenderbuffer);if(B.isWebGLMultipleRenderTargets)for(let Ne=0,We=R.length;Ne=l&&console.warn("THREE.WebGLTextures: Trying to use "+B+" texture units while this GPU supports only "+l),Q+=1,B}function re(B){const R=[];return R.push(B.wrapS),R.push(B.wrapT),R.push(B.magFilter),R.push(B.minFilter),R.push(B.anisotropy),R.push(B.internalFormat),R.push(B.format),R.push(B.type),R.push(B.generateMipmaps),R.push(B.premultiplyAlpha),R.push(B.flipY),R.push(B.unpackAlignment),R.push(B.encoding),R.join()}function le(B,R){const pe=i.get(B);if(B.isVideoTexture&&ci(B),B.isRenderTargetTexture===!1&&B.version>0&&pe.__version!==B.version){const Pe=B.image;if(Pe===null)console.warn("THREE.WebGLRenderer: Texture marked for update but no image data found.");else if(Pe.complete===!1)console.warn("THREE.WebGLRenderer: Texture marked for update but image is incomplete");else{xt(pe,B,R);return}}t.activeTexture(33984+R),t.bindTexture(3553,pe.__webglTexture)}function ve(B,R){const pe=i.get(B);if(B.version>0&&pe.__version!==B.version){xt(pe,B,R);return}t.activeTexture(33984+R),t.bindTexture(35866,pe.__webglTexture)}function Z(B,R){const pe=i.get(B);if(B.version>0&&pe.__version!==B.version){xt(pe,B,R);return}t.activeTexture(33984+R),t.bindTexture(32879,pe.__webglTexture)}function ke(B,R){const pe=i.get(B);if(B.version>0&&pe.__version!==B.version){pt(pe,B,R);return}t.activeTexture(33984+R),t.bindTexture(34067,pe.__webglTexture)}const Je={[Ou]:10497,[gn]:33071,[zu]:33648},it={[lr]:9728,[Rg]:9984,[Og]:9986,[jr]:9729,[o_]:9985,[id]:9987};function ye(B,R,pe){if(pe?(n.texParameteri(B,10242,Je[R.wrapS]),n.texParameteri(B,10243,Je[R.wrapT]),(B===32879||B===35866)&&n.texParameteri(B,32882,Je[R.wrapR]),n.texParameteri(B,10240,it[R.magFilter]),n.texParameteri(B,10241,it[R.minFilter])):(n.texParameteri(B,10242,33071),n.texParameteri(B,10243,33071),(B===32879||B===35866)&&n.texParameteri(B,32882,33071),(R.wrapS!==gn||R.wrapT!==gn)&&console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.wrapS and Texture.wrapT should be set to THREE.ClampToEdgeWrapping."),n.texParameteri(B,10240,X(R.magFilter)),n.texParameteri(B,10241,X(R.minFilter)),R.minFilter!==lr&&R.minFilter!==jr&&console.warn("THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.")),e.has("EXT_texture_filter_anisotropic")===!0){const Pe=e.get("EXT_texture_filter_anisotropic");if(R.type===va&&e.has("OES_texture_float_linear")===!1||o===!1&&R.type===Il&&e.has("OES_texture_half_float_linear")===!1)return;(R.anisotropy>1||i.get(R).__currentAnisotropy)&&(n.texParameterf(B,Pe.TEXTURE_MAX_ANISOTROPY_EXT,Math.min(R.anisotropy,r.getMaxAnisotropy())),i.get(R).__currentAnisotropy=R.anisotropy)}}function Vt(B,R){let pe=!1;B.__webglInit===void 0&&(B.__webglInit=!0,R.addEventListener("dispose",T));const Pe=R.source;let Ne=m.get(Pe);Ne===void 0&&(Ne={},m.set(Pe,Ne));const We=re(R);if(We!==B.__cacheKey){Ne[We]===void 0&&(Ne[We]={texture:n.createTexture(),usedTimes:0},a.memory.textures++,pe=!0),Ne[We].usedTimes++;const dt=Ne[B.__cacheKey];dt!==void 0&&(Ne[B.__cacheKey].usedTimes--,dt.usedTimes===0&&j(R)),B.__cacheKey=We,B.__webglTexture=Ne[We].texture}return pe}function xt(B,R,pe){let Pe=3553;R.isDataArrayTexture&&(Pe=35866),R.isData3DTexture&&(Pe=32879);const Ne=Vt(B,R),We=R.source;if(t.activeTexture(33984+pe),t.bindTexture(Pe,B.__webglTexture),We.version!==We.__currentVersion||Ne===!0){n.pixelStorei(37440,R.flipY),n.pixelStorei(37441,R.premultiplyAlpha),n.pixelStorei(3317,R.unpackAlignment),n.pixelStorei(37443,0);const dt=S(R)&&b(R.image)===!1;let D=_(R.image,dt,!1,h);D=Gt(R,D);const Ie=b(D)||o,st=s.convert(R.format,R.encoding);let De=s.convert(R.type),Y=O(R.internalFormat,st,De,R.encoding,R.isVideoTexture);ye(Pe,R,Ie);let Ve;const Oe=R.mipmaps,gt=o&&R.isVideoTexture!==!0,Ge=B.__version===void 0,lt=q(R,D,Ie);if(R.isDepthTexture)Y=6402,o?R.type===va?Y=36012:R.type===_u?Y=33190:R.type===Ll?Y=35056:Y=33189:R.type===va&&console.error("WebGLRenderer: Floating point depth texture requires WebGL2."),R.format===bo&&Y===6402&&R.type!==eh&&R.type!==_u&&(console.warn("THREE.WebGLRenderer: Use UnsignedShortType or UnsignedIntType for DepthFormat DepthTexture."),R.type=eh,De=s.convert(R.type)),R.format===Gl&&Y===6402&&(Y=34041,R.type!==Ll&&(console.warn("THREE.WebGLRenderer: Use UnsignedInt248Type for DepthStencilFormat DepthTexture."),R.type=Ll,De=s.convert(R.type))),gt&&Ge?t.texStorage2D(3553,1,Y,D.width,D.height):t.texImage2D(3553,0,Y,D.width,D.height,0,st,De,null);else if(R.isDataTexture)if(Oe.length>0&&Ie){gt&&Ge&&t.texStorage2D(3553,lt,Y,Oe[0].width,Oe[0].height);for(let je=0,nt=Oe.length;je0&&Ie){gt&&Ge&&t.texStorage2D(3553,lt,Y,Oe[0].width,Oe[0].height);for(let je=0,nt=Oe.length;je0&&Ge++,t.texStorage2D(34067,Ge,Ve,D[0].width,D[0].height));for(let je=0;je<6;je++)if(dt){Oe?t.texSubImage2D(34069+je,0,0,0,D[je].width,D[je].height,De,Y,D[je].data):t.texImage2D(34069+je,0,Ve,D[je].width,D[je].height,0,De,Y,D[je].data);for(let nt=0;nt0&&ht(B)===!1){pe.__webglMultisampledFramebuffer=n.createFramebuffer(),pe.__webglColorRenderbuffer=n.createRenderbuffer(),n.bindRenderbuffer(36161,pe.__webglColorRenderbuffer);const D=s.convert(R.format,R.encoding),Ie=s.convert(R.type),st=O(R.internalFormat,D,Ie,R.encoding),De=ot(B);n.renderbufferStorageMultisample(36161,De,st,B.width,B.height),t.bindFramebuffer(36160,pe.__webglMultisampledFramebuffer),n.framebufferRenderbuffer(36160,36064,36161,pe.__webglColorRenderbuffer),n.bindRenderbuffer(36161,null),B.depthBuffer&&(pe.__webglDepthRenderbuffer=n.createRenderbuffer(),L(pe.__webglDepthRenderbuffer,B,!0)),t.bindFramebuffer(36160,null)}if(Ne){t.bindTexture(34067,Pe.__webglTexture),ye(34067,R,dt);for(let D=0;D<6;D++)w(pe.__webglFramebuffer[D],B,R,36064,34069+D);C(R,dt)&&k(34067),t.unbindTexture()}else if(We){const D=B.texture;for(let Ie=0,st=D.length;Ie0&&ht(B)===!1){const R=B.width,pe=B.height;let Pe=16384;const Ne=[36064],We=B.stencilBuffer?33306:36096;B.depthBuffer&&Ne.push(We);const dt=i.get(B),D=dt.__ignoreDepthValues!==void 0?dt.__ignoreDepthValues:!1;D===!1&&(B.depthBuffer&&(Pe|=256),B.stencilBuffer&&(Pe|=1024)),t.bindFramebuffer(36008,dt.__webglMultisampledFramebuffer),t.bindFramebuffer(36009,dt.__webglFramebuffer),D===!0&&(n.invalidateFramebuffer(36008,[We]),n.invalidateFramebuffer(36009,[We])),n.blitFramebuffer(0,0,R,pe,0,0,R,pe,Pe,9728),p&&n.invalidateFramebuffer(36008,Ne),t.bindFramebuffer(36008,null),t.bindFramebuffer(36009,dt.__webglMultisampledFramebuffer)}}function ot(B){return Math.min(d,B.samples)}function ht(B){const R=i.get(B);return o&&B.samples>0&&e.has("WEBGL_multisampled_render_to_texture")===!0&&R.__useRenderToTexture!==!1}function ci(B){const R=a.render.frame;f.get(B)!==R&&(f.set(B,R),B.update())}function Gt(B,R){const pe=B.encoding,Pe=B.format,Ne=B.type;return B.isCompressedTexture===!0||B.isVideoTexture===!0||B.format===zg||pe!==js&&(pe===Ei?o===!1?e.has("EXT_sRGB")===!0&&Pe===mn?(B.format=zg,B.minFilter=jr,B.generateMipmaps=!1):R=Fo.sRGBToLinear(R):(Pe!==mn||Ne!==Lo)&&console.warn("THREE.WebGLTextures: sRGB encoded textures have to use RGBAFormat and UnsignedByteType."):console.error("THREE.WebGLTextures: Unsupported texture encoding:",pe)),R}this.allocateTextureUnit=K,this.resetTextureUnits=ee,this.setTexture2D=le,this.setTexture2DArray=ve,this.setTexture3D=Z,this.setTextureCube=ke,this.rebindTextures=se,this.setupRenderTarget=$e,this.updateRenderTargetMipmap=Ce,this.updateMultisampleRenderTarget=ft,this.setupDepthRenderbuffer=U,this.setupFrameBufferTexture=w,this.useMultisampledRTT=ht}function pJ(n,e,t){const i=t.isWebGL2;function r(s,a=null){let o;if(s===Lo)return 5121;if(s===cX)return 32819;if(s===hX)return 32820;if(s===aX)return 5120;if(s===oX)return 5122;if(s===eh)return 5123;if(s===lX)return 5124;if(s===_u)return 5125;if(s===va)return 5126;if(s===Il)return i?5131:(o=e.get("OES_texture_half_float"),o!==null?o.HALF_FLOAT_OES:null);if(s===dX)return 6406;if(s===mn)return 6408;if(s===pX)return 6409;if(s===fX)return 6410;if(s===bo)return 6402;if(s===Gl)return 34041;if(s===gX)return 6403;if(s===uX)return console.warn("THREE.WebGLRenderer: THREE.RGBFormat has been removed. Use THREE.RGBAFormat instead. https://github.com/mrdoob/three.js/pull/23228"),6408;if(s===zg)return o=e.get("EXT_sRGB"),o!==null?o.SRGB_ALPHA_EXT:null;if(s===mX)return 36244;if(s===vX)return 33319;if(s===yX)return 33320;if(s===xX)return 36249;if(s===wf||s===Mf||s===$f||s===Pf)if(a===Ei)if(o=e.get("WEBGL_compressed_texture_s3tc_srgb"),o!==null){if(s===wf)return o.COMPRESSED_SRGB_S3TC_DXT1_EXT;if(s===Mf)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT;if(s===$f)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT;if(s===Pf)return o.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT}else return null;else if(o=e.get("WEBGL_compressed_texture_s3tc"),o!==null){if(s===wf)return o.COMPRESSED_RGB_S3TC_DXT1_EXT;if(s===Mf)return o.COMPRESSED_RGBA_S3TC_DXT1_EXT;if(s===$f)return o.COMPRESSED_RGBA_S3TC_DXT3_EXT;if(s===Pf)return o.COMPRESSED_RGBA_S3TC_DXT5_EXT}else return null;if(s===W0||s===X0||s===Y0||s===K0)if(o=e.get("WEBGL_compressed_texture_pvrtc"),o!==null){if(s===W0)return o.COMPRESSED_RGB_PVRTC_4BPPV1_IMG;if(s===X0)return o.COMPRESSED_RGB_PVRTC_2BPPV1_IMG;if(s===Y0)return o.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG;if(s===K0)return o.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG}else return null;if(s===bX)return o=e.get("WEBGL_compressed_texture_etc1"),o!==null?o.COMPRESSED_RGB_ETC1_WEBGL:null;if(s===q0||s===Z0)if(o=e.get("WEBGL_compressed_texture_etc"),o!==null){if(s===q0)return a===Ei?o.COMPRESSED_SRGB8_ETC2:o.COMPRESSED_RGB8_ETC2;if(s===Z0)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC:o.COMPRESSED_RGBA8_ETC2_EAC}else return null;if(s===J0||s===Q0||s===ey||s===ty||s===iy||s===ry||s===ny||s===sy||s===ay||s===oy||s===ly||s===cy||s===hy||s===dy)if(o=e.get("WEBGL_compressed_texture_astc"),o!==null){if(s===J0)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR:o.COMPRESSED_RGBA_ASTC_4x4_KHR;if(s===Q0)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR:o.COMPRESSED_RGBA_ASTC_5x4_KHR;if(s===ey)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR:o.COMPRESSED_RGBA_ASTC_5x5_KHR;if(s===ty)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR:o.COMPRESSED_RGBA_ASTC_6x5_KHR;if(s===iy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR:o.COMPRESSED_RGBA_ASTC_6x6_KHR;if(s===ry)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR:o.COMPRESSED_RGBA_ASTC_8x5_KHR;if(s===ny)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR:o.COMPRESSED_RGBA_ASTC_8x6_KHR;if(s===sy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR:o.COMPRESSED_RGBA_ASTC_8x8_KHR;if(s===ay)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR:o.COMPRESSED_RGBA_ASTC_10x5_KHR;if(s===oy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR:o.COMPRESSED_RGBA_ASTC_10x6_KHR;if(s===ly)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR:o.COMPRESSED_RGBA_ASTC_10x8_KHR;if(s===cy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR:o.COMPRESSED_RGBA_ASTC_10x10_KHR;if(s===hy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR:o.COMPRESSED_RGBA_ASTC_12x10_KHR;if(s===dy)return a===Ei?o.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR:o.COMPRESSED_RGBA_ASTC_12x12_KHR}else return null;if(s===uy)if(o=e.get("EXT_texture_compression_bptc"),o!==null){if(s===uy)return a===Ei?o.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT:o.COMPRESSED_RGBA_BPTC_UNORM_EXT}else return null;if(s===Ll)return i?34042:(o=e.get("WEBGL_depth_texture"),o!==null?o.UNSIGNED_INT_24_8_WEBGL:null)}return{convert:r}}class w_ extends Mr{constructor(e=[]){super(),this.cameras=e}}w_.prototype.isArrayCamera=!0;class oo extends Kt{constructor(){super(),this.type="Group"}}oo.prototype.isGroup=!0;const fJ={type:"move"};class tg{constructor(){this._targetRay=null,this._grip=null,this._hand=null}getHandSpace(){return this._hand===null&&(this._hand=new oo,this._hand.matrixAutoUpdate=!1,this._hand.visible=!1,this._hand.joints={},this._hand.inputState={pinching:!1}),this._hand}getTargetRaySpace(){return this._targetRay===null&&(this._targetRay=new oo,this._targetRay.matrixAutoUpdate=!1,this._targetRay.visible=!1,this._targetRay.hasLinearVelocity=!1,this._targetRay.linearVelocity=new A,this._targetRay.hasAngularVelocity=!1,this._targetRay.angularVelocity=new A),this._targetRay}getGripSpace(){return this._grip===null&&(this._grip=new oo,this._grip.matrixAutoUpdate=!1,this._grip.visible=!1,this._grip.hasLinearVelocity=!1,this._grip.linearVelocity=new A,this._grip.hasAngularVelocity=!1,this._grip.angularVelocity=new A),this._grip}dispatchEvent(e){return this._targetRay!==null&&this._targetRay.dispatchEvent(e),this._grip!==null&&this._grip.dispatchEvent(e),this._hand!==null&&this._hand.dispatchEvent(e),this}disconnect(e){return this.dispatchEvent({type:"disconnected",data:e}),this._targetRay!==null&&(this._targetRay.visible=!1),this._grip!==null&&(this._grip.visible=!1),this._hand!==null&&(this._hand.visible=!1),this}update(e,t,i){let r=null,s=null,a=null;const o=this._targetRay,l=this._grip,c=this._hand;if(e&&t.session.visibilityState!=="visible-blurred")if(o!==null&&(r=t.getPose(e.targetRaySpace,i),r!==null&&(o.matrix.fromArray(r.transform.matrix),o.matrix.decompose(o.position,o.rotation,o.scale),r.linearVelocity?(o.hasLinearVelocity=!0,o.linearVelocity.copy(r.linearVelocity)):o.hasLinearVelocity=!1,r.angularVelocity?(o.hasAngularVelocity=!0,o.angularVelocity.copy(r.angularVelocity)):o.hasAngularVelocity=!1,this.dispatchEvent(fJ))),c&&e.hand){a=!0;for(const g of e.hand.values()){const m=t.getJointPose(g,i);if(c.joints[g.jointName]===void 0){const x=new oo;x.matrixAutoUpdate=!1,x.visible=!1,c.joints[g.jointName]=x,c.add(x)}const v=c.joints[g.jointName];m!==null&&(v.matrix.fromArray(m.transform.matrix),v.matrix.decompose(v.position,v.rotation,v.scale),v.jointRadius=m.radius),v.visible=m!==null}const h=c.joints["index-finger-tip"],d=c.joints["thumb-tip"],u=h.position.distanceTo(d.position),p=.02,f=.005;c.inputState.pinching&&u>p+f?(c.inputState.pinching=!1,this.dispatchEvent({type:"pinchend",handedness:e.handedness,target:this})):!c.inputState.pinching&&u<=p-f&&(c.inputState.pinching=!0,this.dispatchEvent({type:"pinchstart",handedness:e.handedness,target:this}))}else l!==null&&e.gripSpace&&(s=t.getPose(e.gripSpace,i),s!==null&&(l.matrix.fromArray(s.transform.matrix),l.matrix.decompose(l.position,l.rotation,l.scale),s.linearVelocity?(l.hasLinearVelocity=!0,l.linearVelocity.copy(s.linearVelocity)):l.hasLinearVelocity=!1,s.angularVelocity?(l.hasAngularVelocity=!0,l.angularVelocity.copy(s.angularVelocity)):l.hasAngularVelocity=!1));return o!==null&&(o.visible=r!==null),l!==null&&(l.visible=s!==null),c!==null&&(c.visible=a!==null),this}}class M_ extends dr{constructor(e,t,i,r,s,a,o,l,c,h){if(h=h!==void 0?h:bo,h!==bo&&h!==Gl)throw new Error("DepthTexture format must be either THREE.DepthFormat or THREE.DepthStencilFormat");i===void 0&&h===bo&&(i=eh),i===void 0&&h===Gl&&(i=Ll),super(null,r,s,a,o,l,h,i,c),this.image={width:e,height:t},this.magFilter=o!==void 0?o:lr,this.minFilter=l!==void 0?l:lr,this.flipY=!1,this.generateMipmaps=!1}}M_.prototype.isDepthTexture=!0;class gJ extends za{constructor(e,t){super();const i=this;let r=null,s=1,a=null,o="local-floor",l=null,c=null,h=null,d=null,u=null;const p=t.getContextAttributes();let f=null,g=null;const m=[],v=new Map,x=new Mr;x.layers.enable(1),x.viewport=new ui;const _=new Mr;_.layers.enable(2),_.viewport=new ui;const b=[x,_],S=new w_;S.layers.enable(1),S.layers.enable(2);let C=null,k=null;this.cameraAutoUpdate=!0,this.enabled=!1,this.isPresenting=!1,this.getController=function(K){let re=m[K];return re===void 0&&(re=new tg,m[K]=re),re.getTargetRaySpace()},this.getControllerGrip=function(K){let re=m[K];return re===void 0&&(re=new tg,m[K]=re),re.getGripSpace()},this.getHand=function(K){let re=m[K];return re===void 0&&(re=new tg,m[K]=re),re.getHandSpace()};function O(K){const re=v.get(K.inputSource);re&&re.dispatchEvent({type:K.type,data:K.inputSource})}function q(){v.forEach(function(K,re){K.disconnect(re)}),v.clear(),C=null,k=null,e.setRenderTarget(f),d=null,h=null,c=null,r=null,g=null,ee.stop(),i.isPresenting=!1,i.dispatchEvent({type:"sessionend"})}this.setFramebufferScaleFactor=function(K){s=K,i.isPresenting===!0&&console.warn("THREE.WebXRManager: Cannot change framebuffer scale while presenting.")},this.setReferenceSpaceType=function(K){o=K,i.isPresenting===!0&&console.warn("THREE.WebXRManager: Cannot change reference space type while presenting.")},this.getReferenceSpace=function(){return a},this.getBaseLayer=function(){return h!==null?h:d},this.getBinding=function(){return c},this.getFrame=function(){return u},this.getSession=function(){return r},this.setSession=async function(K){if(r=K,r!==null){if(f=e.getRenderTarget(),r.addEventListener("select",O),r.addEventListener("selectstart",O),r.addEventListener("selectend",O),r.addEventListener("squeeze",O),r.addEventListener("squeezestart",O),r.addEventListener("squeezeend",O),r.addEventListener("end",q),r.addEventListener("inputsourceschange",X),p.xrCompatible!==!0&&await t.makeXRCompatible(),r.renderState.layers===void 0||e.capabilities.isWebGL2===!1){const re={antialias:r.renderState.layers===void 0?p.antialias:!0,alpha:p.alpha,depth:p.depth,stencil:p.stencil,framebufferScaleFactor:s};d=new XRWebGLLayer(r,t,re),r.updateRenderState({baseLayer:d}),g=new nn(d.framebufferWidth,d.framebufferHeight,{format:mn,type:Lo,encoding:e.outputEncoding})}else{let re=null,le=null,ve=null;p.depth&&(ve=p.stencil?35056:33190,re=p.stencil?Gl:bo,le=p.stencil?Ll:eh);const Z={colorFormat:e.outputEncoding===Ei?35907:32856,depthFormat:ve,scaleFactor:s};c=new XRWebGLBinding(r,t),h=c.createProjectionLayer(Z),r.updateRenderState({layers:[h]}),g=new nn(h.textureWidth,h.textureHeight,{format:mn,type:Lo,depthTexture:new M_(h.textureWidth,h.textureHeight,le,void 0,void 0,void 0,void 0,void 0,void 0,re),stencilBuffer:p.stencil,encoding:e.outputEncoding,samples:p.antialias?4:0});const ke=e.properties.get(g);ke.__ignoreDepthValues=h.ignoreDepthValues}g.isXRRenderTarget=!0,this.setFoveation(1),a=await r.requestReferenceSpace(o),ee.setContext(r),ee.start(),i.isPresenting=!0,i.dispatchEvent({type:"sessionstart"})}};function X(K){const re=r.inputSources;for(let le=0;le0&&(g.alphaTest.value=m.alphaTest);const v=e.get(m).envMap;if(v&&(g.envMap.value=v,g.flipEnvMap.value=v.isCubeTexture&&v.isRenderTargetTexture===!1?-1:1,g.reflectivity.value=m.reflectivity,g.ior.value=m.ior,g.refractionRatio.value=m.refractionRatio),m.lightMap){g.lightMap.value=m.lightMap;const b=n.physicallyCorrectLights!==!0?Math.PI:1;g.lightMapIntensity.value=m.lightMapIntensity*b}m.aoMap&&(g.aoMap.value=m.aoMap,g.aoMapIntensity.value=m.aoMapIntensity);let x;m.map?x=m.map:m.specularMap?x=m.specularMap:m.displacementMap?x=m.displacementMap:m.normalMap?x=m.normalMap:m.bumpMap?x=m.bumpMap:m.roughnessMap?x=m.roughnessMap:m.metalnessMap?x=m.metalnessMap:m.alphaMap?x=m.alphaMap:m.emissiveMap?x=m.emissiveMap:m.clearcoatMap?x=m.clearcoatMap:m.clearcoatNormalMap?x=m.clearcoatNormalMap:m.clearcoatRoughnessMap?x=m.clearcoatRoughnessMap:m.specularIntensityMap?x=m.specularIntensityMap:m.specularColorMap?x=m.specularColorMap:m.transmissionMap?x=m.transmissionMap:m.thicknessMap?x=m.thicknessMap:m.sheenColorMap?x=m.sheenColorMap:m.sheenRoughnessMap&&(x=m.sheenRoughnessMap),x!==void 0&&(x.isWebGLRenderTarget&&(x=x.texture),x.matrixAutoUpdate===!0&&x.updateMatrix(),g.uvTransform.value.copy(x.matrix));let _;m.aoMap?_=m.aoMap:m.lightMap&&(_=m.lightMap),_!==void 0&&(_.isWebGLRenderTarget&&(_=_.texture),_.matrixAutoUpdate===!0&&_.updateMatrix(),g.uv2Transform.value.copy(_.matrix))}function s(g,m){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity}function a(g,m){g.dashSize.value=m.dashSize,g.totalSize.value=m.dashSize+m.gapSize,g.scale.value=m.scale}function o(g,m,v,x){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity,g.size.value=m.size*v,g.scale.value=x*.5,m.map&&(g.map.value=m.map),m.alphaMap&&(g.alphaMap.value=m.alphaMap),m.alphaTest>0&&(g.alphaTest.value=m.alphaTest);let _;m.map?_=m.map:m.alphaMap&&(_=m.alphaMap),_!==void 0&&(_.matrixAutoUpdate===!0&&_.updateMatrix(),g.uvTransform.value.copy(_.matrix))}function l(g,m){g.diffuse.value.copy(m.color),g.opacity.value=m.opacity,g.rotation.value=m.rotation,m.map&&(g.map.value=m.map),m.alphaMap&&(g.alphaMap.value=m.alphaMap),m.alphaTest>0&&(g.alphaTest.value=m.alphaTest);let v;m.map?v=m.map:m.alphaMap&&(v=m.alphaMap),v!==void 0&&(v.matrixAutoUpdate===!0&&v.updateMatrix(),g.uvTransform.value.copy(v.matrix))}function c(g,m){g.specular.value.copy(m.specular),g.shininess.value=Math.max(m.shininess,1e-4)}function h(g,m){m.gradientMap&&(g.gradientMap.value=m.gradientMap)}function d(g,m){g.roughness.value=m.roughness,g.metalness.value=m.metalness,m.roughnessMap&&(g.roughnessMap.value=m.roughnessMap),m.metalnessMap&&(g.metalnessMap.value=m.metalnessMap),e.get(m).envMap&&(g.envMapIntensity.value=m.envMapIntensity)}function u(g,m,v){g.ior.value=m.ior,m.sheen>0&&(g.sheenColor.value.copy(m.sheenColor).multiplyScalar(m.sheen),g.sheenRoughness.value=m.sheenRoughness,m.sheenColorMap&&(g.sheenColorMap.value=m.sheenColorMap),m.sheenRoughnessMap&&(g.sheenRoughnessMap.value=m.sheenRoughnessMap)),m.clearcoat>0&&(g.clearcoat.value=m.clearcoat,g.clearcoatRoughness.value=m.clearcoatRoughness,m.clearcoatMap&&(g.clearcoatMap.value=m.clearcoatMap),m.clearcoatRoughnessMap&&(g.clearcoatRoughnessMap.value=m.clearcoatRoughnessMap),m.clearcoatNormalMap&&(g.clearcoatNormalScale.value.copy(m.clearcoatNormalScale),g.clearcoatNormalMap.value=m.clearcoatNormalMap,m.side===Un&&g.clearcoatNormalScale.value.negate())),m.transmission>0&&(g.transmission.value=m.transmission,g.transmissionSamplerMap.value=v.texture,g.transmissionSamplerSize.value.set(v.width,v.height),m.transmissionMap&&(g.transmissionMap.value=m.transmissionMap),g.thickness.value=m.thickness,m.thicknessMap&&(g.thicknessMap.value=m.thicknessMap),g.attenuationDistance.value=m.attenuationDistance,g.attenuationColor.value.copy(m.attenuationColor)),g.specularIntensity.value=m.specularIntensity,g.specularColor.value.copy(m.specularColor),m.specularIntensityMap&&(g.specularIntensityMap.value=m.specularIntensityMap),m.specularColorMap&&(g.specularColorMap.value=m.specularColorMap)}function p(g,m){m.matcap&&(g.matcap.value=m.matcap)}function f(g,m){g.referencePosition.value.copy(m.referencePosition),g.nearDistance.value=m.nearDistance,g.farDistance.value=m.farDistance}return{refreshFogUniforms:t,refreshMaterialUniforms:i}}function vJ(){const n=ih("canvas");return n.style.display="block",n}function pi(n={}){const e=n.canvas!==void 0?n.canvas:vJ(),t=n.context!==void 0?n.context:null,i=n.depth!==void 0?n.depth:!0,r=n.stencil!==void 0?n.stencil:!0,s=n.antialias!==void 0?n.antialias:!1,a=n.premultipliedAlpha!==void 0?n.premultipliedAlpha:!0,o=n.preserveDrawingBuffer!==void 0?n.preserveDrawingBuffer:!1,l=n.powerPreference!==void 0?n.powerPreference:"default",c=n.failIfMajorPerformanceCaveat!==void 0?n.failIfMajorPerformanceCaveat:!1;let h;n.context!==void 0?h=t.getContextAttributes().alpha:h=n.alpha!==void 0?n.alpha:!1;let d=null,u=null;const p=[],f=[];this.domElement=e,this.debug={checkShaderErrors:!0},this.autoClear=!0,this.autoClearColor=!0,this.autoClearDepth=!0,this.autoClearStencil=!0,this.sortObjects=!0,this.clippingPlanes=[],this.localClippingEnabled=!1,this.outputEncoding=js,this.physicallyCorrectLights=!1,this.toneMapping=Ds,this.toneMappingExposure=1;const g=this;let m=!1,v=0,x=0,_=null,b=-1,S=null;const C=new ui,k=new ui;let O=null,q=e.width,X=e.height,T=1,z=null,ae=null;const j=new ui(0,0,q,X),J=new ui(0,0,q,X);let Q=!1;const ee=new Mp;let K=!1,re=!1,le=null;const ve=new yt,Z=new _e,ke=new A,Je={background:null,fog:null,environment:null,overrideMaterial:null,isScene:!0};function it(){return _===null?T:1}let ye=t;function Vt(F,ce){for(let ue=0;ue0?u=f[f.length-1]:u=null,p.pop(),p.length>0?d=p[p.length-1]:d=null};function Gi(F,ce,ue,he){if(F.visible===!1)return;if(F.layers.test(ce.layers)){if(F.isGroup)ue=F.renderOrder;else if(F.isLOD)F.autoUpdate===!0&&F.update(ce);else if(F.isLight)u.pushLight(F),F.castShadow&&u.pushShadow(F);else if(F.isSprite){if(!F.frustumCulled||ee.intersectsSprite(F)){he&&ke.setFromMatrixPosition(F.matrixWorld).applyMatrix4(ve);const kt=ot.update(F),Ft=F.material;Ft.visible&&d.push(F,kt,Ft,ue,ke.z,null)}}else if((F.isMesh||F.isLine||F.isPoints)&&(F.isSkinnedMesh&&F.skeleton.frame!==L.render.frame&&(F.skeleton.update(),F.skeleton.frame=L.render.frame),!F.frustumCulled||ee.intersectsObject(F))){he&&ke.setFromMatrixPosition(F.matrixWorld).applyMatrix4(ve);const kt=ot.update(F),Ft=F.material;if(Array.isArray(Ft)){const Dt=kt.groups;for(let ni=0,jt=Dt.length;ni0&&oc(Se,ce,ue),he&&w.viewport(C.copy(he)),Se.length>0&&Bs(Se,ce,ue),Et.length>0&&Bs(Et,ce,ue),kt.length>0&&Bs(kt,ce,ue),w.buffers.depth.setTest(!0),w.buffers.depth.setMask(!0),w.buffers.color.setMask(!0),w.setPolygonOffset(!1)}function oc(F,ce,ue){const he=pt.isWebGL2;le===null&&(le=new nn(1,1,{generateMipmaps:!0,type:D.convert(Il)!==null?Il:Lo,minFilter:id,samples:he&&s===!0?4:0})),g.getDrawingBufferSize(Z),he?le.setSize(Z.x,Z.y):le.setSize(Dg(Z.x),Dg(Z.y));const Se=g.getRenderTarget();g.setRenderTarget(le),g.clear();const Et=g.toneMapping;g.toneMapping=Ds,Bs(F,ce,ue),g.toneMapping=Et,U.updateMultisampleRenderTarget(le),U.updateRenderTargetMipmap(le),g.setRenderTarget(Se)}function Bs(F,ce,ue){const he=ce.isScene===!0?ce.overrideMaterial:null;for(let Se=0,Et=F.length;Se0&&U.useMultisampledRTT(F)===!1?Se=I.get(F).__webglMultisampledFramebuffer:Se=ni,C.copy(F.viewport),k.copy(F.scissor),O=F.scissorTest}else C.copy(j).multiplyScalar(T).floor(),k.copy(J).multiplyScalar(T).floor(),O=Q;if(w.bindFramebuffer(36160,Se)&&pt.drawBuffers&&he&&w.drawBuffers(F,Se),w.viewport(C),w.scissor(k),w.setScissorTest(O),Et){const Dt=I.get(F.texture);ye.framebufferTexture2D(36160,36064,34069+ce,Dt.__webglTexture,ue)}else if(kt){const Dt=I.get(F.texture),ni=ce||0;ye.framebufferTextureLayer(36160,36064,Dt.__webglTexture,ue||0,ni)}b=-1},this.readRenderTargetPixels=function(F,ce,ue,he,Se,Et,kt){if(!(F&&F.isWebGLRenderTarget)){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not THREE.WebGLRenderTarget.");return}let Ft=I.get(F).__webglFramebuffer;if(F.isWebGLCubeRenderTarget&&kt!==void 0&&(Ft=Ft[kt]),Ft){w.bindFramebuffer(36160,Ft);try{const Dt=F.texture,ni=Dt.format,jt=Dt.type;if(ni!==mn&&D.convert(ni)!==ye.getParameter(35739)){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in RGBA or implementation defined format.");return}const Jt=jt===Il&&(xt.has("EXT_color_buffer_half_float")||pt.isWebGL2&&xt.has("EXT_color_buffer_float"));if(jt!==Lo&&D.convert(jt)!==ye.getParameter(35738)&&!(jt===va&&(pt.isWebGL2||xt.has("OES_texture_float")||xt.has("WEBGL_color_buffer_float")))&&!Jt){console.error("THREE.WebGLRenderer.readRenderTargetPixels: renderTarget is not in UnsignedByteType or implementation defined type.");return}ce>=0&&ce<=F.width-he&&ue>=0&&ue<=F.height-Se&&ye.readPixels(ce,ue,he,Se,D.convert(ni),D.convert(jt),Et)}finally{const Dt=_!==null?I.get(_).__webglFramebuffer:null;w.bindFramebuffer(36160,Dt)}}},this.copyFramebufferToTexture=function(F,ce,ue=0){if(ce.isFramebufferTexture!==!0){console.error("THREE.WebGLRenderer: copyFramebufferToTexture() can only be used with FramebufferTexture.");return}const he=Math.pow(2,-ue),Se=Math.floor(ce.image.width*he),Et=Math.floor(ce.image.height*he);U.setTexture2D(ce,0),ye.copyTexSubImage2D(3553,ue,0,0,F.x,F.y,Se,Et),w.unbindTexture()},this.copyTextureToTexture=function(F,ce,ue,he=0){const Se=ce.image.width,Et=ce.image.height,kt=D.convert(ue.format),Ft=D.convert(ue.type);U.setTexture2D(ue,0),ye.pixelStorei(37440,ue.flipY),ye.pixelStorei(37441,ue.premultiplyAlpha),ye.pixelStorei(3317,ue.unpackAlignment),ce.isDataTexture?ye.texSubImage2D(3553,he,F.x,F.y,Se,Et,kt,Ft,ce.image.data):ce.isCompressedTexture?ye.compressedTexSubImage2D(3553,he,F.x,F.y,ce.mipmaps[0].width,ce.mipmaps[0].height,kt,ce.mipmaps[0].data):ye.texSubImage2D(3553,he,F.x,F.y,kt,Ft,ce.image),he===0&&ue.generateMipmaps&&ye.generateMipmap(3553),w.unbindTexture()},this.copyTextureToTexture3D=function(F,ce,ue,he,Se=0){if(g.isWebGL1Renderer){console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: can only be used with WebGL2.");return}const Et=F.max.x-F.min.x+1,kt=F.max.y-F.min.y+1,Ft=F.max.z-F.min.z+1,Dt=D.convert(he.format),ni=D.convert(he.type);let jt;if(he.isData3DTexture)U.setTexture3D(he,0),jt=32879;else if(he.isDataArrayTexture)U.setTexture2DArray(he,0),jt=35866;else{console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: only supports THREE.DataTexture3D and THREE.DataTexture2DArray.");return}ye.pixelStorei(37440,he.flipY),ye.pixelStorei(37441,he.premultiplyAlpha),ye.pixelStorei(3317,he.unpackAlignment);const Jt=ye.getParameter(3314),mi=ye.getParameter(32878),br=ye.getParameter(3316),gs=ye.getParameter(3315),Vi=ye.getParameter(32877),Kr=ue.isCompressedTexture?ue.mipmaps[0]:ue.image;ye.pixelStorei(3314,Kr.width),ye.pixelStorei(32878,Kr.height),ye.pixelStorei(3316,F.min.x),ye.pixelStorei(3315,F.min.y),ye.pixelStorei(32877,F.min.z),ue.isDataTexture||ue.isData3DTexture?ye.texSubImage3D(jt,Se,ce.x,ce.y,ce.z,Et,kt,Ft,Dt,ni,Kr.data):ue.isCompressedTexture?(console.warn("THREE.WebGLRenderer.copyTextureToTexture3D: untested support for compressed srcTexture."),ye.compressedTexSubImage3D(jt,Se,ce.x,ce.y,ce.z,Et,kt,Ft,Dt,Kr.data)):ye.texSubImage3D(jt,Se,ce.x,ce.y,ce.z,Et,kt,Ft,Dt,ni,Kr),ye.pixelStorei(3314,Jt),ye.pixelStorei(32878,mi),ye.pixelStorei(3316,br),ye.pixelStorei(3315,gs),ye.pixelStorei(32877,Vi),Se===0&&he.generateMipmaps&&ye.generateMipmap(jt),w.unbindTexture()},this.initTexture=function(F){U.setTexture2D(F,0),w.unbindTexture()},this.resetState=function(){v=0,x=0,_=null,w.reset(),Ie.reset()},typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe",{detail:this}))}pi.prototype.isWebGLRenderer=!0;class yJ extends pi{}yJ.prototype.isWebGL1Renderer=!0;class Tp{constructor(e,t=25e-5){this.name="",this.color=new tt(e),this.density=t}clone(){return new Tp(this.color,this.density)}toJSON(){return{type:"FogExp2",color:this.color.getHex(),density:this.density}}}Tp.prototype.isFogExp2=!0;class Cp{constructor(e,t=1,i=1e3){this.name="",this.color=new tt(e),this.near=t,this.far=i}clone(){return new Cp(this.color,this.near,this.far)}toJSON(){return{type:"Fog",color:this.color.getHex(),near:this.near,far:this.far}}}Cp.prototype.isFog=!0;class rh extends Kt{constructor(){super(),this.type="Scene",this.background=null,this.environment=null,this.fog=null,this.overrideMaterial=null,this.autoUpdate=!0,typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("observe",{detail:this}))}copy(e,t){return super.copy(e,t),e.background!==null&&(this.background=e.background.clone()),e.environment!==null&&(this.environment=e.environment.clone()),e.fog!==null&&(this.fog=e.fog.clone()),e.overrideMaterial!==null&&(this.overrideMaterial=e.overrideMaterial.clone()),this.autoUpdate=e.autoUpdate,this.matrixAutoUpdate=e.matrixAutoUpdate,this}toJSON(e){const t=super.toJSON(e);return this.fog!==null&&(t.object.fog=this.fog.toJSON()),t}}rh.prototype.isScene=!0;class rc{constructor(e,t){this.array=e,this.stride=t,this.count=e!==void 0?e.length/t:0,this.usage=th,this.updateRange={offset:0,count:-1},this.version=0,this.uuid=Wn()}onUploadCallback(){}set needsUpdate(e){e===!0&&this.version++}setUsage(e){return this.usage=e,this}copy(e){return this.array=new e.array.constructor(e.array),this.count=e.count,this.stride=e.stride,this.usage=e.usage,this}copyAt(e,t,i){e*=this.stride,i*=t.stride;for(let r=0,s=this.stride;re.far||t.push({distance:l,point:Sc.clone(),uv:tr.getUV(Sc,Kd,Mc,qd,Yy,ig,Ky,new _e),face:null,object:this})}copy(e){return super.copy(e),e.center!==void 0&&this.center.copy(e.center),this.material=e.material,this}}P_.prototype.isSprite=!0;function Zd(n,e,t,i,r,s){gl.subVectors(n,t).addScalar(.5).multiply(i),r!==void 0?(wc.x=s*gl.x-r*gl.y,wc.y=r*gl.x+s*gl.y):wc.copy(gl),n.copy(e),n.x+=wc.x,n.y+=wc.y,n.applyMatrix4($_)}const Jd=new A,qy=new A;class xJ extends Kt{constructor(){super(),this._currentLevel=0,this.type="LOD",Object.defineProperties(this,{levels:{enumerable:!0,value:[]},isLOD:{value:!0}}),this.autoUpdate=!0}copy(e){super.copy(e,!1);const t=e.levels;for(let i=0,r=t.length;i0){let i,r;for(i=1,r=t.length;i0){Jd.setFromMatrixPosition(this.matrixWorld);const r=e.ray.origin.distanceTo(Jd);this.getObjectForDistance(r).raycast(e,t)}}update(e){const t=this.levels;if(t.length>1){Jd.setFromMatrixPosition(e.matrixWorld),qy.setFromMatrixPosition(this.matrixWorld);const i=Jd.distanceTo(qy)/e.zoom;t[0].object.visible=!0;let r,s;for(r=1,s=t.length;r=t[r].distance;r++)t[r-1].object.visible=!1,t[r].object.visible=!0;for(this._currentLevel=r-1;rl)continue;u.applyMatrix4(this.matrixWorld);const O=e.ray.origin.distanceTo(u);Oe.far||t.push({distance:O,point:d.clone().applyMatrix4(this.matrixWorld),index:_,face:null,faceIndex:null,object:this})}}else{const v=Math.max(0,a.start),x=Math.min(m.count,a.start+a.count);for(let _=v,b=x-1;_l)continue;u.applyMatrix4(this.matrixWorld);const C=e.ray.origin.distanceTo(u);Ce.far||t.push({distance:C,point:d.clone().applyMatrix4(this.matrixWorld),index:_,face:null,faceIndex:null,object:this})}}}else i.isGeometry&&console.error("THREE.Line.raycast() no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.")}updateMorphTargets(){const e=this.geometry;if(e.isBufferGeometry){const t=e.morphAttributes,i=Object.keys(t);if(i.length>0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Line.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead.")}}}Ur.prototype.isLine=!0;const o1=new A,l1=new A;class Bo extends Ur{constructor(e,t){super(e,t),this.type="LineSegments"}computeLineDistances(){const e=this.geometry;if(e.isBufferGeometry)if(e.index===null){const t=e.attributes.position,i=[];for(let r=0,s=t.count;r0){const r=t[i[0]];if(r!==void 0){this.morphTargetInfluences=[],this.morphTargetDictionary={};for(let s=0,a=r.length;s0&&console.error("THREE.Points.updateMorphTargets() does not support THREE.Geometry. Use THREE.BufferGeometry instead.")}}}E_.prototype.isPoints=!0;function h1(n,e,t,i,r,s,a){const o=jg.distanceSqToPoint(n);if(or.far)return;s.push({distance:c,distanceToRay:Math.sqrt(o),point:l,index:e,face:null,object:a})}}class SJ extends dr{constructor(e,t,i,r,s,a,o,l,c){super(e,t,i,r,s,a,o,l,c),this.minFilter=a!==void 0?a:jr,this.magFilter=s!==void 0?s:jr,this.generateMipmaps=!1;const h=this;function d(){h.needsUpdate=!0,e.requestVideoFrameCallback(d)}"requestVideoFrameCallback"in e&&e.requestVideoFrameCallback(d)}clone(){return new this.constructor(this.image).copy(this)}update(){const e=this.image;"requestVideoFrameCallback"in e===!1&&e.readyState>=e.HAVE_CURRENT_DATA&&(this.needsUpdate=!0)}}SJ.prototype.isVideoTexture=!0;class wJ extends dr{constructor(e,t,i){super({width:e,height:t}),this.format=i,this.magFilter=lr,this.minFilter=lr,this.generateMipmaps=!1,this.needsUpdate=!0}}wJ.prototype.isFramebufferTexture=!0;class MJ extends dr{constructor(e,t,i,r,s,a,o,l,c,h,d,u){super(null,a,o,l,c,h,r,s,d,u),this.image={width:t,height:i},this.mipmaps=e,this.flipY=!1,this.generateMipmaps=!1}}MJ.prototype.isCompressedTexture=!0;class $J extends dr{constructor(e,t,i,r,s,a,o,l,c){super(e,t,i,r,s,a,o,l,c),this.needsUpdate=!0}}$J.prototype.isCanvasTexture=!0;class _n{constructor(){this.type="Curve",this.arcLengthDivisions=200}getPoint(){return console.warn("THREE.Curve: .getPoint() not implemented."),null}getPointAt(e,t){const i=this.getUtoTmapping(e);return this.getPoint(i,t)}getPoints(e=5){const t=[];for(let i=0;i<=e;i++)t.push(this.getPoint(i/e));return t}getSpacedPoints(e=5){const t=[];for(let i=0;i<=e;i++)t.push(this.getPointAt(i/e));return t}getLength(){const e=this.getLengths();return e[e.length-1]}getLengths(e=this.arcLengthDivisions){if(this.cacheArcLengths&&this.cacheArcLengths.length===e+1&&!this.needsUpdate)return this.cacheArcLengths;this.needsUpdate=!1;const t=[];let i,r=this.getPoint(0),s=0;t.push(0);for(let a=1;a<=e;a++)i=this.getPoint(a/e),s+=i.distanceTo(r),t.push(s),r=i;return this.cacheArcLengths=t,t}updateArcLengths(){this.needsUpdate=!0,this.getLengths()}getUtoTmapping(e,t){const i=this.getLengths();let r=0;const s=i.length;let a;t?a=t:a=e*i[s-1];let o=0,l=s-1,c;for(;o<=l;)if(r=Math.floor(o+(l-o)/2),c=i[r]-a,c<0)o=r+1;else if(c>0)l=r-1;else{l=r;break}if(r=l,i[r]===a)return r/(s-1);const h=i[r],u=i[r+1]-h,p=(a-h)/u;return(r+p)/(s-1)}getTangent(e,t){let r=e-1e-4,s=e+1e-4;r<0&&(r=0),s>1&&(s=1);const a=this.getPoint(r),o=this.getPoint(s),l=t||(a.isVector2?new _e:new A);return l.copy(o).sub(a).normalize(),l}getTangentAt(e,t){const i=this.getUtoTmapping(e);return this.getTangent(i,t)}computeFrenetFrames(e,t){const i=new A,r=[],s=[],a=[],o=new A,l=new yt;for(let p=0;p<=e;p++){const f=p/e;r[p]=this.getTangentAt(f,new A)}s[0]=new A,a[0]=new A;let c=Number.MAX_VALUE;const h=Math.abs(r[0].x),d=Math.abs(r[0].y),u=Math.abs(r[0].z);h<=c&&(c=h,i.set(1,0,0)),d<=c&&(c=d,i.set(0,1,0)),u<=c&&i.set(0,0,1),o.crossVectors(r[0],i).normalize(),s[0].crossVectors(r[0],o),a[0].crossVectors(r[0],s[0]);for(let p=1;p<=e;p++){if(s[p]=s[p-1].clone(),a[p]=a[p-1].clone(),o.crossVectors(r[p-1],r[p]),o.length()>Number.EPSILON){o.normalize();const f=Math.acos(gr(r[p-1].dot(r[p]),-1,1));s[p].applyMatrix4(l.makeRotationAxis(o,f))}a[p].crossVectors(r[p],s[p])}if(t===!0){let p=Math.acos(gr(s[0].dot(s[e]),-1,1));p/=e,r[0].dot(o.crossVectors(s[0],s[e]))>0&&(p=-p);for(let f=1;f<=e;f++)s[f].applyMatrix4(l.makeRotationAxis(r[f],p*f)),a[f].crossVectors(r[f],s[f])}return{tangents:r,normals:s,binormals:a}}clone(){return new this.constructor().copy(this)}copy(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}toJSON(){const e={metadata:{version:4.5,type:"Curve",generator:"Curve.toJSON"}};return e.arcLengthDivisions=this.arcLengthDivisions,e.type=this.type,e}fromJSON(e){return this.arcLengthDivisions=e.arcLengthDivisions,this}}class Ep extends _n{constructor(e=0,t=0,i=1,r=1,s=0,a=Math.PI*2,o=!1,l=0){super(),this.type="EllipseCurve",this.aX=e,this.aY=t,this.xRadius=i,this.yRadius=r,this.aStartAngle=s,this.aEndAngle=a,this.aClockwise=o,this.aRotation=l}getPoint(e,t){const i=t||new _e,r=Math.PI*2;let s=this.aEndAngle-this.aStartAngle;const a=Math.abs(s)r;)s-=r;s0?0:(Math.floor(Math.abs(o)/s)+1)*s:l===0&&o===s-1&&(o=s-2,l=1);let c,h;this.closed||o>0?c=r[(o-1)%s]:(ru.subVectors(r[0],r[1]).add(r[0]),c=ru);const d=r[o%s],u=r[(o+1)%s];if(this.closed||o+2r.length-2?r.length-1:a+1],d=r[a>r.length-3?r.length-1:a+2];return i.set(d1(o,l.x,c.x,h.x,d.x),d1(o,l.y,c.y,h.y,d.y)),i}copy(e){super.copy(e),this.points=[];for(let t=0,i=e.points.length;t=i){const a=r[s]-i,o=this.curves[s],l=o.getLength(),c=l===0?0:1-a/l;return o.getPointAt(c,t)}s++}return null}getLength(){const e=this.getCurveLengths();return e[e.length-1]}updateArcLengths(){this.needsUpdate=!0,this.cacheLengths=null,this.getCurveLengths()}getCurveLengths(){if(this.cacheLengths&&this.cacheLengths.length===this.curves.length)return this.cacheLengths;const e=[];let t=0;for(let i=0,r=this.curves.length;i1&&!t[t.length-1].equals(t[0])&&t.push(t[0]),t}copy(e){super.copy(e),this.curves=[];for(let t=0,i=e.curves.length;t0){const d=c.getPoint(0);d.equals(this.currentPoint)||this.lineTo(d.x,d.y)}this.curves.push(c);const h=c.getPoint(1);return this.currentPoint.copy(h),this}copy(e){return super.copy(e),this.currentPoint.copy(e.currentPoint),this}toJSON(){const e=super.toJSON();return e.currentPoint=this.currentPoint.toArray(),e}fromJSON(e){return super.fromJSON(e),this.currentPoint.fromArray(e.currentPoint),this}}class nh extends Ot{constructor(e=[new _e(0,.5),new _e(.5,0),new _e(0,-.5)],t=12,i=0,r=Math.PI*2){super(),this.type="LatheGeometry",this.parameters={points:e,segments:t,phiStart:i,phiLength:r},t=Math.floor(t),r=gr(r,0,Math.PI*2);const s=[],a=[],o=[],l=[],c=[],h=1/t,d=new A,u=new _e,p=new A,f=new A,g=new A;let m=0,v=0;for(let x=0;x<=e.length-1;x++)switch(x){case 0:m=e[x+1].x-e[x].x,v=e[x+1].y-e[x].y,p.x=v*1,p.y=-m,p.z=v*0,g.copy(p),p.normalize(),l.push(p.x,p.y,p.z);break;case e.length-1:l.push(g.x,g.y,g.z);break;default:m=e[x+1].x-e[x].x,v=e[x+1].y-e[x].y,p.x=v*1,p.y=-m,p.z=v*0,f.copy(p),p.x+=g.x,p.y+=g.y,p.z+=g.z,p.normalize(),l.push(p.x,p.y,p.z),g.copy(f)}for(let x=0;x<=t;x++){const _=i+x*h*r,b=Math.sin(_),S=Math.cos(_);for(let C=0;C<=e.length-1;C++){d.x=e[C].x*b,d.y=e[C].y,d.z=e[C].x*S,a.push(d.x,d.y,d.z),u.x=x/t,u.y=C/(e.length-1),o.push(u.x,u.y);const k=l[3*C+0]*b,O=l[3*C+1],q=l[3*C+0]*S;c.push(k,O,q)}}for(let x=0;x0&&_(!0),t>0&&_(!1)),this.setIndex(h),this.setAttribute("position",new _t(d,3)),this.setAttribute("normal",new _t(u,3)),this.setAttribute("uv",new _t(p,2));function x(){const b=new A,S=new A;let C=0;const k=(t-e)/i;for(let O=0;O<=s;O++){const q=[],X=O/s,T=X*(t-e)+e;for(let z=0;z<=r;z++){const ae=z/r,j=ae*l+o,J=Math.sin(j),Q=Math.cos(j);S.x=T*J,S.y=-X*i+m,S.z=T*Q,d.push(S.x,S.y,S.z),b.set(J,k,Q).normalize(),u.push(b.x,b.y,b.z),p.push(ae,1-X),q.push(f++)}g.push(q)}for(let O=0;O.9&&k<.1&&(_<.2&&(a[x+0]+=1),b<.2&&(a[x+2]+=1),S<.2&&(a[x+4]+=1))}}function u(x){s.push(x.x,x.y,x.z)}function p(x,_){const b=x*3;_.x=e[b+0],_.y=e[b+1],_.z=e[b+2]}function f(){const x=new A,_=new A,b=new A,S=new A,C=new _e,k=new _e,O=new _e;for(let q=0,X=0;q80*t){o=c=n[0],l=h=n[1];for(let f=t;fc&&(c=d),u>h&&(h=u);p=Math.max(c-o,h-l),p=p!==0?1/p:0}return sh(s,a,t,o,l,p),a}};function A_(n,e,t,i,r){let s,a;if(r===JJ(n,e,t,i)>0)for(s=e;s=e;s-=i)a=u1(s,n[s],n[s+1],a);return a&&Lp(a,a.next)&&(oh(a),a=a.next),a}function Ea(n,e){if(!n)return n;e||(e=n);let t=n,i;do if(i=!1,!t.steiner&&(Lp(t,t.next)||zi(t.prev,t,t.next)===0)){if(oh(t),t=e=t.prev,t===t.next)break;i=!0}else t=t.next;while(i||t!==e);return e}function sh(n,e,t,i,r,s,a){if(!n)return;!a&&s&&WJ(n,i,r,s);let o=n,l,c;for(;n.prev!==n.next;){if(l=n.prev,c=n.next,s?DJ(n,i,r,s):VJ(n)){e.push(l.i/t),e.push(n.i/t),e.push(c.i/t),oh(n),n=c.next,o=c.next;continue}if(n=c,n===o){a?a===1?(n=FJ(Ea(n),e,t),sh(n,e,t,i,r,s,2)):a===2&&jJ(n,e,t,i,r,s):sh(Ea(n),e,t,i,r,s,1);break}}}function VJ(n){const e=n.prev,t=n,i=n.next;if(zi(e,t,i)>=0)return!1;let r=n.next.next;for(;r!==n.prev;){if($l(e.x,e.y,t.x,t.y,i.x,i.y,r.x,r.y)&&zi(r.prev,r,r.next)>=0)return!1;r=r.next}return!0}function DJ(n,e,t,i){const r=n.prev,s=n,a=n.next;if(zi(r,s,a)>=0)return!1;const o=r.xs.x?r.x>a.x?r.x:a.x:s.x>a.x?s.x:a.x,h=r.y>s.y?r.y>a.y?r.y:a.y:s.y>a.y?s.y:a.y,d=Ng(o,l,e,t,i),u=Ng(c,h,e,t,i);let p=n.prevZ,f=n.nextZ;for(;p&&p.z>=d&&f&&f.z<=u;){if(p!==n.prev&&p!==n.next&&$l(r.x,r.y,s.x,s.y,a.x,a.y,p.x,p.y)&&zi(p.prev,p,p.next)>=0||(p=p.prevZ,f!==n.prev&&f!==n.next&&$l(r.x,r.y,s.x,s.y,a.x,a.y,f.x,f.y)&&zi(f.prev,f,f.next)>=0))return!1;f=f.nextZ}for(;p&&p.z>=d;){if(p!==n.prev&&p!==n.next&&$l(r.x,r.y,s.x,s.y,a.x,a.y,p.x,p.y)&&zi(p.prev,p,p.next)>=0)return!1;p=p.prevZ}for(;f&&f.z<=u;){if(f!==n.prev&&f!==n.next&&$l(r.x,r.y,s.x,s.y,a.x,a.y,f.x,f.y)&&zi(f.prev,f,f.next)>=0)return!1;f=f.nextZ}return!0}function FJ(n,e,t){let i=n;do{const r=i.prev,s=i.next.next;!Lp(r,s)&&R_(r,i,i.next,s)&&ah(r,s)&&ah(s,r)&&(e.push(r.i/t),e.push(i.i/t),e.push(s.i/t),oh(i),oh(i.next),i=n=s),i=i.next}while(i!==n);return Ea(i)}function jJ(n,e,t,i,r,s){let a=n;do{let o=a.next.next;for(;o!==a.prev;){if(a.i!==o.i&&KJ(a,o)){let l=O_(a,o);a=Ea(a,a.next),l=Ea(l,l.next),sh(a,e,t,i,r,s),sh(l,e,t,i,r,s);return}o=o.next}a=a.next}while(a!==n)}function NJ(n,e,t,i){const r=[];let s,a,o,l,c;for(s=0,a=e.length;s=t.next.y&&t.next.y!==t.y){const u=t.x+(r-t.y)*(t.next.x-t.x)/(t.next.y-t.y);if(u<=i&&u>s){if(s=u,u===i){if(r===t.y)return t;if(r===t.next.y)return t.next}a=t.x=t.x&&t.x>=l&&i!==t.x&&$l(ra.x||t.x===a.x&&UJ(a,t)))&&(a=t,h=d)),t=t.next;while(t!==o);return a}function UJ(n,e){return zi(n.prev,n,e.prev)<0&&zi(e.next,n,n.next)<0}function WJ(n,e,t,i){let r=n;do r.z===null&&(r.z=Ng(r.x,r.y,e,t,i)),r.prevZ=r.prev,r.nextZ=r.next,r=r.next;while(r!==n);r.prevZ.nextZ=null,r.prevZ=null,XJ(r)}function XJ(n){let e,t,i,r,s,a,o,l,c=1;do{for(t=n,n=null,s=null,a=0;t;){for(a++,i=t,o=0,e=0;e0||l>0&&i;)o!==0&&(l===0||!i||t.z<=i.z)?(r=t,t=t.nextZ,o--):(r=i,i=i.nextZ,l--),s?s.nextZ=r:n=r,r.prevZ=s,s=r;t=i}s.nextZ=null,c*=2}while(a>1);return n}function Ng(n,e,t,i,r){return n=32767*(n-t)*r,e=32767*(e-i)*r,n=(n|n<<8)&16711935,n=(n|n<<4)&252645135,n=(n|n<<2)&858993459,n=(n|n<<1)&1431655765,e=(e|e<<8)&16711935,e=(e|e<<4)&252645135,e=(e|e<<2)&858993459,e=(e|e<<1)&1431655765,n|e<<1}function YJ(n){let e=n,t=n;do(e.x=0&&(n-a)*(i-o)-(t-a)*(e-o)>=0&&(t-a)*(s-o)-(r-a)*(i-o)>=0}function KJ(n,e){return n.next.i!==e.i&&n.prev.i!==e.i&&!qJ(n,e)&&(ah(n,e)&&ah(e,n)&&ZJ(n,e)&&(zi(n.prev,n,e.prev)||zi(n,e.prev,e))||Lp(n,e)&&zi(n.prev,n,n.next)>0&&zi(e.prev,e,e.next)>0)}function zi(n,e,t){return(e.y-n.y)*(t.x-e.x)-(e.x-n.x)*(t.y-e.y)}function Lp(n,e){return n.x===e.x&&n.y===e.y}function R_(n,e,t,i){const r=lu(zi(n,e,t)),s=lu(zi(n,e,i)),a=lu(zi(t,i,n)),o=lu(zi(t,i,e));return!!(r!==s&&a!==o||r===0&&ou(n,t,e)||s===0&&ou(n,i,e)||a===0&&ou(t,n,i)||o===0&&ou(t,e,i))}function ou(n,e,t){return e.x<=Math.max(n.x,t.x)&&e.x>=Math.min(n.x,t.x)&&e.y<=Math.max(n.y,t.y)&&e.y>=Math.min(n.y,t.y)}function lu(n){return n>0?1:n<0?-1:0}function qJ(n,e){let t=n;do{if(t.i!==n.i&&t.next.i!==n.i&&t.i!==e.i&&t.next.i!==e.i&&R_(t,t.next,n,e))return!0;t=t.next}while(t!==n);return!1}function ah(n,e){return zi(n.prev,n,n.next)<0?zi(n,e,n.next)>=0&&zi(n,n.prev,e)>=0:zi(n,e,n.prev)<0||zi(n,n.next,e)<0}function ZJ(n,e){let t=n,i=!1;const r=(n.x+e.x)/2,s=(n.y+e.y)/2;do t.y>s!=t.next.y>s&&t.next.y!==t.y&&r<(t.next.x-t.x)*(s-t.y)/(t.next.y-t.y)+t.x&&(i=!i),t=t.next;while(t!==n);return i}function O_(n,e){const t=new Bg(n.i,n.x,n.y),i=new Bg(e.i,e.x,e.y),r=n.next,s=e.prev;return n.next=e,e.prev=n,t.next=r,r.prev=t,i.next=t,t.prev=i,s.next=i,i.prev=s,i}function u1(n,e,t,i){const r=new Bg(n,e,t);return i?(r.next=i.next,r.prev=i,i.next.prev=r,i.next=r):(r.prev=r,r.next=r),r}function oh(n){n.next.prev=n.prev,n.prev.next=n.next,n.prevZ&&(n.prevZ.nextZ=n.nextZ),n.nextZ&&(n.nextZ.prevZ=n.prevZ)}function Bg(n,e,t){this.i=n,this.x=e,this.y=t,this.prev=null,this.next=null,this.z=null,this.prevZ=null,this.nextZ=null,this.steiner=!1}function JJ(n,e,t,i){let r=0;for(let s=e,a=t-i;s2&&n[e-1].equals(n[0])&&n.pop()}function f1(n,e){for(let t=0;tNumber.EPSILON){const pe=Math.sqrt(B),Pe=Math.sqrt(ci*ci+Gt*Gt),Ne=U.x-ht/pe,We=U.y+ot/pe,dt=se.x-Gt/Pe,D=se.y+ci/Pe,Ie=((dt-Ne)*Gt-(D-We)*ci)/(ot*Gt-ht*ci);$e=Ne+ot*Ie-I.x,Ce=We+ht*Ie-I.y;const st=$e*$e+Ce*Ce;if(st<=2)return new _e($e,Ce);ft=Math.sqrt(st/2)}else{let pe=!1;ot>Number.EPSILON?ci>Number.EPSILON&&(pe=!0):ot<-Number.EPSILON?ci<-Number.EPSILON&&(pe=!0):Math.sign(ht)===Math.sign(Gt)&&(pe=!0),pe?($e=-ht,Ce=ot,ft=Math.sqrt(B)):($e=ot,Ce=ht,ft=Math.sqrt(B/2))}return new _e($e/ft,Ce/ft)}const re=[];for(let I=0,U=j.length,se=U-1,$e=I+1;I=0;I--){const U=I/m,se=p*Math.cos(U*Math.PI/2),$e=f*Math.sin(U*Math.PI/2)+g;for(let Ce=0,ft=j.length;Ce=0;){const $e=se;let Ce=se-1;Ce<0&&(Ce=I.length-1);for(let ft=0,ot=h+m*2;ft0)&&p.push(_,b,C),(v!==i-1||l0!=e>0&&this.version++,this._sheen=e}get clearcoat(){return this._clearcoat}set clearcoat(e){this._clearcoat>0!=e>0&&this.version++,this._clearcoat=e}get transmission(){return this._transmission}set transmission(e){this._transmission>0!=e>0&&this.version++,this._transmission=e}copy(e){return super.copy(e),this.defines={STANDARD:"",PHYSICAL:""},this.clearcoat=e.clearcoat,this.clearcoatMap=e.clearcoatMap,this.clearcoatRoughness=e.clearcoatRoughness,this.clearcoatRoughnessMap=e.clearcoatRoughnessMap,this.clearcoatNormalMap=e.clearcoatNormalMap,this.clearcoatNormalScale.copy(e.clearcoatNormalScale),this.ior=e.ior,this.sheen=e.sheen,this.sheenColor.copy(e.sheenColor),this.sheenColorMap=e.sheenColorMap,this.sheenRoughness=e.sheenRoughness,this.sheenRoughnessMap=e.sheenRoughnessMap,this.transmission=e.transmission,this.transmissionMap=e.transmissionMap,this.thickness=e.thickness,this.thicknessMap=e.thicknessMap,this.attenuationDistance=e.attenuationDistance,this.attenuationColor.copy(e.attenuationColor),this.specularIntensity=e.specularIntensity,this.specularIntensityMap=e.specularIntensityMap,this.specularColor.copy(e.specularColor),this.specularColorMap=e.specularColorMap,this}}D_.prototype.isMeshPhysicalMaterial=!0;class F_ extends rr{constructor(e){super(),this.type="MeshPhongMaterial",this.color=new tt(16777215),this.specular=new tt(1118481),this.shininess=30,this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new tt(0),this.emissiveIntensity=1,this.emissiveMap=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=tc,this.normalScale=new _e(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=_p,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.specular.copy(e.specular),this.shininess=e.shininess,this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this.flatShading=e.flatShading,this}}F_.prototype.isMeshPhongMaterial=!0;class j_ extends rr{constructor(e){super(),this.defines={TOON:""},this.type="MeshToonMaterial",this.color=new tt(16777215),this.map=null,this.gradientMap=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new tt(0),this.emissiveIntensity=1,this.emissiveMap=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=tc,this.normalScale=new _e(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.alphaMap=null,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.gradientMap=e.gradientMap,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.alphaMap=e.alphaMap,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}j_.prototype.isMeshToonMaterial=!0;class N_ extends rr{constructor(e){super(),this.type="MeshNormalMaterial",this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=tc,this.normalScale=new _e(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.wireframe=!1,this.wireframeLinewidth=1,this.fog=!1,this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.flatShading=e.flatShading,this}}N_.prototype.isMeshNormalMaterial=!0;class B_ extends rr{constructor(e){super(),this.type="MeshLambertMaterial",this.color=new tt(16777215),this.map=null,this.lightMap=null,this.lightMapIntensity=1,this.aoMap=null,this.aoMapIntensity=1,this.emissive=new tt(0),this.emissiveIntensity=1,this.emissiveMap=null,this.specularMap=null,this.alphaMap=null,this.envMap=null,this.combine=_p,this.reflectivity=1,this.refractionRatio=.98,this.wireframe=!1,this.wireframeLinewidth=1,this.wireframeLinecap="round",this.wireframeLinejoin="round",this.setValues(e)}copy(e){return super.copy(e),this.color.copy(e.color),this.map=e.map,this.lightMap=e.lightMap,this.lightMapIntensity=e.lightMapIntensity,this.aoMap=e.aoMap,this.aoMapIntensity=e.aoMapIntensity,this.emissive.copy(e.emissive),this.emissiveMap=e.emissiveMap,this.emissiveIntensity=e.emissiveIntensity,this.specularMap=e.specularMap,this.alphaMap=e.alphaMap,this.envMap=e.envMap,this.combine=e.combine,this.reflectivity=e.reflectivity,this.refractionRatio=e.refractionRatio,this.wireframe=e.wireframe,this.wireframeLinewidth=e.wireframeLinewidth,this.wireframeLinecap=e.wireframeLinecap,this.wireframeLinejoin=e.wireframeLinejoin,this}}B_.prototype.isMeshLambertMaterial=!0;class G_ extends rr{constructor(e){super(),this.defines={MATCAP:""},this.type="MeshMatcapMaterial",this.color=new tt(16777215),this.matcap=null,this.map=null,this.bumpMap=null,this.bumpScale=1,this.normalMap=null,this.normalMapType=tc,this.normalScale=new _e(1,1),this.displacementMap=null,this.displacementScale=1,this.displacementBias=0,this.alphaMap=null,this.flatShading=!1,this.setValues(e)}copy(e){return super.copy(e),this.defines={MATCAP:""},this.color.copy(e.color),this.matcap=e.matcap,this.map=e.map,this.bumpMap=e.bumpMap,this.bumpScale=e.bumpScale,this.normalMap=e.normalMap,this.normalMapType=e.normalMapType,this.normalScale.copy(e.normalScale),this.displacementMap=e.displacementMap,this.displacementScale=e.displacementScale,this.displacementBias=e.displacementBias,this.alphaMap=e.alphaMap,this.flatShading=e.flatShading,this}}G_.prototype.isMeshMatcapMaterial=!0;class H_ extends qn{constructor(e){super(),this.type="LineDashedMaterial",this.scale=1,this.dashSize=3,this.gapSize=1,this.setValues(e)}copy(e){return super.copy(e),this.scale=e.scale,this.dashSize=e.dashSize,this.gapSize=e.gapSize,this}}H_.prototype.isLineDashedMaterial=!0;const rQ={ShadowMaterial:z_,SpriteMaterial:Vm,RawShaderMaterial:V_,ShaderMaterial:Kn,PointsMaterial:Nm,MeshPhysicalMaterial:D_,MeshStandardMaterial:Ym,MeshPhongMaterial:F_,MeshToonMaterial:j_,MeshNormalMaterial:N_,MeshLambertMaterial:B_,MeshDepthMaterial:Om,MeshDistanceMaterial:zm,MeshBasicMaterial:ps,MeshMatcapMaterial:G_,LineDashedMaterial:H_,LineBasicMaterial:qn,Material:rr};rr.fromType=function(n){return new rQ[n]};const Ii={arraySlice:function(n,e,t){return Ii.isTypedArray(n)?new n.constructor(n.subarray(e,t!==void 0?t:n.length)):n.slice(e,t)},convertArray:function(n,e,t){return!n||!t&&n.constructor===e?n:typeof e.BYTES_PER_ELEMENT=="number"?new e(n):Array.prototype.slice.call(n)},isTypedArray:function(n){return ArrayBuffer.isView(n)&&!(n instanceof DataView)},getKeyframeOrder:function(n){function e(r,s){return n[r]-n[s]}const t=n.length,i=new Array(t);for(let r=0;r!==t;++r)i[r]=r;return i.sort(e),i},sortedArray:function(n,e,t){const i=n.length,r=new n.constructor(i);for(let s=0,a=0;a!==i;++s){const o=t[s]*e;for(let l=0;l!==e;++l)r[a++]=n[o+l]}return r},flattenJSON:function(n,e,t,i){let r=1,s=n[0];for(;s!==void 0&&s[i]===void 0;)s=n[r++];if(s===void 0)return;let a=s[i];if(a!==void 0)if(Array.isArray(a))do a=s[i],a!==void 0&&(e.push(s.time),t.push.apply(t,a)),s=n[r++];while(s!==void 0);else if(a.toArray!==void 0)do a=s[i],a!==void 0&&(e.push(s.time),a.toArray(t,t.length)),s=n[r++];while(s!==void 0);else do a=s[i],a!==void 0&&(e.push(s.time),t.push(a)),s=n[r++];while(s!==void 0)},subclip:function(n,e,t,i,r=30){const s=n.clone();s.name=e;const a=[];for(let l=0;l=i)){d.push(c.times[p]);for(let g=0;gs.tracks[l].times[0]&&(o=s.tracks[l].times[0]);for(let l=0;l=o.times[f]){const v=f*d+h,x=v+d-h;g=Ii.arraySlice(o.values,v,x)}else{const v=o.createInterpolant(),x=h,_=d-h;v.evaluate(s),g=Ii.arraySlice(v.resultBuffer,x,_)}l==="quaternion"&&new xi().fromArray(g).normalize().conjugate().toArray(g);const m=c.times.length;for(let v=0;v=s)){const o=t[1];e=s)break t}a=i,i=0;break i}break e}for(;i>>1;et;)--a;if(++a,s!==0||a!==r){s>=a&&(a=Math.max(a,1),s=a-1);const o=this.getValueSize();this.times=Ii.arraySlice(i,s,a),this.values=Ii.arraySlice(this.values,s*o,a*o)}return this}validate(){let e=!0;const t=this.getValueSize();t-Math.floor(t)!==0&&(console.error("THREE.KeyframeTrack: Invalid value size in track.",this),e=!1);const i=this.times,r=this.values,s=i.length;s===0&&(console.error("THREE.KeyframeTrack: Track is empty.",this),e=!1);let a=null;for(let o=0;o!==s;o++){const l=i[o];if(typeof l=="number"&&isNaN(l)){console.error("THREE.KeyframeTrack: Time is not a valid number.",this,o,l),e=!1;break}if(a!==null&&a>l){console.error("THREE.KeyframeTrack: Out of order keys.",this,o,l,a),e=!1;break}a=l}if(r!==void 0&&Ii.isTypedArray(r))for(let o=0,l=r.length;o!==l;++o){const c=r[o];if(isNaN(c)){console.error("THREE.KeyframeTrack: Value is not a valid number.",this,o,c),e=!1;break}}return e}optimize(){const e=Ii.arraySlice(this.times),t=Ii.arraySlice(this.values),i=this.getValueSize(),r=this.getInterpolation()===Tf,s=e.length-1;let a=1;for(let o=1;o0){e[a]=e[s];for(let o=s*i,l=a*i,c=0;c!==i;++c)t[l+c]=t[o+c];++a}return a!==e.length?(this.times=Ii.arraySlice(e,0,a),this.values=Ii.arraySlice(t,0,a*i)):(this.times=e,this.values=t),this}clone(){const e=Ii.arraySlice(this.times,0),t=Ii.arraySlice(this.values,0),i=this.constructor,r=new i(this.name,e,t);return r.createInterpolant=this.createInterpolant,r}}fs.prototype.TimeBufferType=Float32Array;fs.prototype.ValueBufferType=Float32Array;fs.prototype.DefaultInterpolation=Du;class sc extends fs{}sc.prototype.ValueTypeName="bool";sc.prototype.ValueBufferType=Array;sc.prototype.DefaultInterpolation=Vu;sc.prototype.InterpolantFactoryMethodLinear=void 0;sc.prototype.InterpolantFactoryMethodSmooth=void 0;class W_ extends fs{}W_.prototype.ValueTypeName="color";class Zu extends fs{}Zu.prototype.ValueTypeName="number";class aQ extends La{constructor(e,t,i,r){super(e,t,i,r)}interpolate_(e,t,i,r){const s=this.resultBuffer,a=this.sampleValues,o=this.valueSize,l=(i-t)/(r-t);let c=e*o;for(let h=c+o;c!==h;c+=4)xi.slerpFlat(s,0,a,c-o,a,c,l);return s}}class nd extends fs{InterpolantFactoryMethodLinear(e){return new aQ(this.times,this.values,this.getValueSize(),e)}}nd.prototype.ValueTypeName="quaternion";nd.prototype.DefaultInterpolation=Du;nd.prototype.InterpolantFactoryMethodSmooth=void 0;class ac extends fs{}ac.prototype.ValueTypeName="string";ac.prototype.ValueBufferType=Array;ac.prototype.DefaultInterpolation=Vu;ac.prototype.InterpolantFactoryMethodLinear=void 0;ac.prototype.InterpolantFactoryMethodSmooth=void 0;class Ju extends fs{}Ju.prototype.ValueTypeName="vector";class Gg{constructor(e,t=-1,i,r=Im){this.name=e,this.tracks=i,this.duration=t,this.blendMode=r,this.uuid=Wn(),this.duration<0&&this.resetDuration()}static parse(e){const t=[],i=e.tracks,r=1/(e.fps||1);for(let a=0,o=i.length;a!==o;++a)t.push(lQ(i[a]).scale(r));const s=new this(e.name,e.duration,t,e.blendMode);return s.uuid=e.uuid,s}static toJSON(e){const t=[],i=e.tracks,r={name:e.name,duration:e.duration,tracks:t,uuid:e.uuid,blendMode:e.blendMode};for(let s=0,a=i.length;s!==a;++s)t.push(fs.toJSON(i[s]));return r}static CreateFromMorphTargetSequence(e,t,i,r){const s=t.length,a=[];for(let o=0;o1){const d=h[1];let u=r[d];u||(r[d]=u=[]),u.push(c)}}const a=[];for(const o in r)a.push(this.CreateFromMorphTargetSequence(o,r[o],t,i));return a}static parseAnimation(e,t){if(!e)return console.error("THREE.AnimationClip: No animation in JSONLoader data."),null;const i=function(d,u,p,f,g){if(p.length!==0){const m=[],v=[];Ii.flattenJSON(p,m,v,f),m.length!==0&&g.push(new d(u,m,v))}},r=[],s=e.name||"default",a=e.fps||30,o=e.blendMode;let l=e.length||-1;const c=e.hierarchy||[];for(let d=0;d{t&&t(s),this.manager.itemEnd(e)},0),s;if(Es[e]!==void 0){Es[e].push({onLoad:t,onProgress:i,onError:r});return}Es[e]=[],Es[e].push({onLoad:t,onProgress:i,onError:r});const a=new Request(e,{headers:new Headers(this.requestHeader),credentials:this.withCredentials?"include":"same-origin"}),o=this.mimeType,l=this.responseType;fetch(a).then(c=>{if(c.status===200||c.status===0){if(c.status===0&&console.warn("THREE.FileLoader: HTTP Status 0 received."),typeof ReadableStream=="undefined"||c.body===void 0||c.body.getReader===void 0)return c;const h=Es[e],d=c.body.getReader(),u=c.headers.get("Content-Length"),p=u?parseInt(u):0,f=p!==0;let g=0;const m=new ReadableStream({start(v){x();function x(){d.read().then(({done:_,value:b})=>{if(_)v.close();else{g+=b.byteLength;const S=new ProgressEvent("progress",{lengthComputable:f,loaded:g,total:p});for(let C=0,k=h.length;C{switch(l){case"arraybuffer":return c.arrayBuffer();case"blob":return c.blob();case"document":return c.text().then(h=>new DOMParser().parseFromString(h,o));case"json":return c.json();default:if(o===void 0)return c.text();{const d=/charset="?([^;"\s]*)"?/i.exec(o),u=d&&d[1]?d[1].toLowerCase():void 0,p=new TextDecoder(u);return c.arrayBuffer().then(f=>p.decode(f))}}}).then(c=>{Xl.add(e,c);const h=Es[e];delete Es[e];for(let d=0,u=h.length;d{const h=Es[e];if(h===void 0)throw this.manager.itemError(e),c;delete Es[e];for(let d=0,u=h.length;d{this.manager.itemEnd(e)}),this.manager.itemStart(e)}setResponseType(e){return this.responseType=e,this}setMimeType(e){return this.mimeType=e,this}}class Qu extends Zn{constructor(e){super(e)}load(e,t,i,r){this.path!==void 0&&(e=this.path+e),e=this.manager.resolveURL(e);const s=this,a=Xl.get(e);if(a!==void 0)return s.manager.itemStart(e),setTimeout(function(){t&&t(a),s.manager.itemEnd(e)},0),a;const o=ih("img");function l(){h(),Xl.add(e,this),t&&t(this),s.manager.itemEnd(e)}function c(d){h(),r&&r(d),s.manager.itemError(e),s.manager.itemEnd(e)}function h(){o.removeEventListener("load",l,!1),o.removeEventListener("error",c,!1)}return o.addEventListener("load",l,!1),o.addEventListener("error",c,!1),e.slice(0,5)!=="data:"&&this.crossOrigin!==void 0&&(o.crossOrigin=this.crossOrigin),s.manager.itemStart(e),o.src=e,o}}class hQ extends Zn{constructor(e){super(e)}load(e,t,i,r){const s=new rd,a=new Qu(this.manager);a.setCrossOrigin(this.crossOrigin),a.setPath(this.path);let o=0;function l(c){a.load(e[c],function(h){s.images[c]=h,o++,o===6&&(s.needsUpdate=!0,t&&t(s))},void 0,r)}for(let c=0;c0:r.vertexColors=e.vertexColors),e.uniforms!==void 0)for(const s in e.uniforms){const a=e.uniforms[s];switch(r.uniforms[s]={},a.type){case"t":r.uniforms[s].value=i(a.value);break;case"c":r.uniforms[s].value=new tt().setHex(a.value);break;case"v2":r.uniforms[s].value=new _e().fromArray(a.value);break;case"v3":r.uniforms[s].value=new A().fromArray(a.value);break;case"v4":r.uniforms[s].value=new ui().fromArray(a.value);break;case"m3":r.uniforms[s].value=new vr().fromArray(a.value);break;case"m4":r.uniforms[s].value=new yt().fromArray(a.value);break;default:r.uniforms[s].value=a.value}}if(e.defines!==void 0&&(r.defines=e.defines),e.vertexShader!==void 0&&(r.vertexShader=e.vertexShader),e.fragmentShader!==void 0&&(r.fragmentShader=e.fragmentShader),e.extensions!==void 0)for(const s in e.extensions)r.extensions[s]=e.extensions[s];if(e.shading!==void 0&&(r.flatShading=e.shading===1),e.size!==void 0&&(r.size=e.size),e.sizeAttenuation!==void 0&&(r.sizeAttenuation=e.sizeAttenuation),e.map!==void 0&&(r.map=i(e.map)),e.matcap!==void 0&&(r.matcap=i(e.matcap)),e.alphaMap!==void 0&&(r.alphaMap=i(e.alphaMap)),e.bumpMap!==void 0&&(r.bumpMap=i(e.bumpMap)),e.bumpScale!==void 0&&(r.bumpScale=e.bumpScale),e.normalMap!==void 0&&(r.normalMap=i(e.normalMap)),e.normalMapType!==void 0&&(r.normalMapType=e.normalMapType),e.normalScale!==void 0){let s=e.normalScale;Array.isArray(s)===!1&&(s=[s,s]),r.normalScale=new _e().fromArray(s)}return e.displacementMap!==void 0&&(r.displacementMap=i(e.displacementMap)),e.displacementScale!==void 0&&(r.displacementScale=e.displacementScale),e.displacementBias!==void 0&&(r.displacementBias=e.displacementBias),e.roughnessMap!==void 0&&(r.roughnessMap=i(e.roughnessMap)),e.metalnessMap!==void 0&&(r.metalnessMap=i(e.metalnessMap)),e.emissiveMap!==void 0&&(r.emissiveMap=i(e.emissiveMap)),e.emissiveIntensity!==void 0&&(r.emissiveIntensity=e.emissiveIntensity),e.specularMap!==void 0&&(r.specularMap=i(e.specularMap)),e.specularIntensityMap!==void 0&&(r.specularIntensityMap=i(e.specularIntensityMap)),e.specularColorMap!==void 0&&(r.specularColorMap=i(e.specularColorMap)),e.envMap!==void 0&&(r.envMap=i(e.envMap)),e.envMapIntensity!==void 0&&(r.envMapIntensity=e.envMapIntensity),e.reflectivity!==void 0&&(r.reflectivity=e.reflectivity),e.refractionRatio!==void 0&&(r.refractionRatio=e.refractionRatio),e.lightMap!==void 0&&(r.lightMap=i(e.lightMap)),e.lightMapIntensity!==void 0&&(r.lightMapIntensity=e.lightMapIntensity),e.aoMap!==void 0&&(r.aoMap=i(e.aoMap)),e.aoMapIntensity!==void 0&&(r.aoMapIntensity=e.aoMapIntensity),e.gradientMap!==void 0&&(r.gradientMap=i(e.gradientMap)),e.clearcoatMap!==void 0&&(r.clearcoatMap=i(e.clearcoatMap)),e.clearcoatRoughnessMap!==void 0&&(r.clearcoatRoughnessMap=i(e.clearcoatRoughnessMap)),e.clearcoatNormalMap!==void 0&&(r.clearcoatNormalMap=i(e.clearcoatNormalMap)),e.clearcoatNormalScale!==void 0&&(r.clearcoatNormalScale=new _e().fromArray(e.clearcoatNormalScale)),e.transmissionMap!==void 0&&(r.transmissionMap=i(e.transmissionMap)),e.thicknessMap!==void 0&&(r.thicknessMap=i(e.thicknessMap)),e.sheenColorMap!==void 0&&(r.sheenColorMap=i(e.sheenColorMap)),e.sheenRoughnessMap!==void 0&&(r.sheenRoughnessMap=i(e.sheenRoughnessMap)),r}setTextures(e){return this.textures=e,this}}class Hg{static decodeText(e){if(typeof TextDecoder!="undefined")return new TextDecoder().decode(e);let t="";for(let i=0,r=e.length;i0){const l=new X_(t);s=new Qu(l),s.setCrossOrigin(this.crossOrigin);for(let c=0,h=e.length;c0){r=new Qu(this.manager),r.setCrossOrigin(this.crossOrigin);for(let a=0,o=e.length;a0){this.source.connect(this.filters[0]);for(let e=1,t=this.filters.length;e0){this.source.disconnect(this.filters[0]);for(let e=1,t=this.filters.length;e0&&this._mixBufferRegionAdditive(i,r,this._addIndex*t,1,t);for(let l=t,c=t+t;l!==c;++l)if(i[l]!==i[l+t]){o.setValue(i,r);break}}saveOriginalState(){const e=this.binding,t=this.buffer,i=this.valueSize,r=i*this._origIndex;e.getValue(t,r);for(let s=i,a=r;s!==a;++s)t[s]=t[r+s%i];this._setIdentity(),this.cumulativeWeight=0,this.cumulativeWeightAdditive=0}restoreOriginalState(){const e=this.valueSize*3;this.binding.setValue(this.buffer,e)}_setAdditiveIdentityNumeric(){const e=this._addIndex*this.valueSize,t=e+this.valueSize;for(let i=e;i=.5)for(let a=0;a!==s;++a)e[t+a]=e[i+a]}_slerp(e,t,i,r){xi.slerpFlat(e,t,e,t,e,i,r)}_slerpAdditive(e,t,i,r,s){const a=this._workIndex*s;xi.multiplyQuaternionsFlat(e,a,e,t,e,i),xi.slerpFlat(e,t,e,t,e,a,r)}_lerp(e,t,i,r,s){const a=1-r;for(let o=0;o!==s;++o){const l=t+o;e[l]=e[l]*a+e[i+o]*r}}_lerpAdditive(e,t,i,r,s){for(let a=0;a!==s;++a){const o=t+a;e[o]=e[o]+e[i+a]*r}}}const Zm="\\[\\]\\.:\\/",wQ=new RegExp("["+Zm+"]","g"),Jm="[^"+Zm+"]",MQ="[^"+Zm.replace("\\.","")+"]",$Q=/((?:WC+[\/:])*)/.source.replace("WC",Jm),PQ=/(WCOD+)?/.source.replace("WCOD",MQ),TQ=/(?:\.(WC+)(?:\[(.+)\])?)?/.source.replace("WC",Jm),CQ=/\.(WC+)(?:\[(.+)\])?/.source.replace("WC",Jm),EQ=new RegExp("^"+$Q+PQ+TQ+CQ+"$"),IQ=["material","materials","bones"];class LQ{constructor(e,t,i){const r=i||hi.parseTrackName(t);this._targetGroup=e,this._bindings=e.subscribe_(t,r)}getValue(e,t){this.bind();const i=this._targetGroup.nCachedObjects_,r=this._bindings[i];r!==void 0&&r.getValue(e,t)}setValue(e,t){const i=this._bindings;for(let r=this._targetGroup.nCachedObjects_,s=i.length;r!==s;++r)i[r].setValue(e,t)}bind(){const e=this._bindings;for(let t=this._targetGroup.nCachedObjects_,i=e.length;t!==i;++t)e[t].bind()}unbind(){const e=this._bindings;for(let t=this._targetGroup.nCachedObjects_,i=e.length;t!==i;++t)e[t].unbind()}}class hi{constructor(e,t,i){this.path=t,this.parsedPath=i||hi.parseTrackName(t),this.node=hi.findNode(e,this.parsedPath.nodeName)||e,this.rootNode=e,this.getValue=this._getValue_unbound,this.setValue=this._setValue_unbound}static create(e,t,i){return e&&e.isAnimationObjectGroup?new hi.Composite(e,t,i):new hi(e,t,i)}static sanitizeNodeName(e){return e.replace(/\s/g,"_").replace(wQ,"")}static parseTrackName(e){const t=EQ.exec(e);if(t===null)throw new Error("PropertyBinding: Cannot parse trackName: "+e);const i={nodeName:t[2],objectName:t[3],objectIndex:t[4],propertyName:t[5],propertyIndex:t[6]},r=i.nodeName&&i.nodeName.lastIndexOf(".");if(r!==void 0&&r!==-1){const s=i.nodeName.substring(r+1);IQ.indexOf(s)!==-1&&(i.nodeName=i.nodeName.substring(0,r),i.objectName=s)}if(i.propertyName===null||i.propertyName.length===0)throw new Error("PropertyBinding: can not parse propertyName from trackName: "+e);return i}static findNode(e,t){if(t===void 0||t===""||t==="."||t===-1||t===e.name||t===e.uuid)return e;if(e.skeleton){const i=e.skeleton.getBoneByName(t);if(i!==void 0)return i}if(e.children){const i=function(s){for(let a=0;a0){const l=this._interpolants,c=this._propertyBindings;switch(this.blendMode){case l_:for(let h=0,d=l.length;h!==d;++h)l[h].evaluate(a),c[h].accumulateAdditive(o);break;case Im:default:for(let h=0,d=l.length;h!==d;++h)l[h].evaluate(a),c[h].accumulate(r,o)}}}_updateWeight(e){let t=0;if(this.enabled){t=this.weight;const i=this._weightInterpolant;if(i!==null){const r=i.evaluate(e)[0];t*=r,e>i.parameterPositions[1]&&(this.stopFading(),r===0&&(this.enabled=!1))}}return this._effectiveWeight=t,t}_updateTimeScale(e){let t=0;if(!this.paused){t=this.timeScale;const i=this._timeScaleInterpolant;i!==null&&(t*=i.evaluate(e)[0],e>i.parameterPositions[1]&&(this.stopWarping(),t===0?this.paused=!0:this.timeScale=t))}return this._effectiveTimeScale=t,t}_updateTime(e){const t=this._clip.duration,i=this.loop;let r=this.time+e,s=this._loopCount;const a=i===wX;if(e===0)return s===-1?r:a&&(s&1)===1?t-r:r;if(i===_X){s===-1&&(this._loopCount=0,this._setEndings(!0,!0,!1));e:{if(r>=t)r=t;else if(r<0)r=0;else{this.time=r;break e}this.clampWhenFinished?this.paused=!0:this.enabled=!1,this.time=r,this._mixer.dispatchEvent({type:"finished",action:this,direction:e<0?-1:1})}}else{if(s===-1&&(e>=0?(s=0,this._setEndings(!0,this.repetitions===0,a)):this._setEndings(this.repetitions===0,!0,a)),r>=t||r<0){const o=Math.floor(r/t);r-=t*o,s+=Math.abs(o);const l=this.repetitions-s;if(l<=0)this.clampWhenFinished?this.paused=!0:this.enabled=!1,r=e>0?t:0,this.time=r,this._mixer.dispatchEvent({type:"finished",action:this,direction:e>0?1:-1});else{if(l===1){const c=e<0;this._setEndings(c,!c,a)}else this._setEndings(!1,!1,a);this._loopCount=s,this.time=r,this._mixer.dispatchEvent({type:"loop",action:this,loopDelta:o})}}else this.time=r;if(a&&(s&1)===1)return t-r}return r}_setEndings(e,t,i){const r=this._interpolantSettings;i?(r.endingStart=_l,r.endingEnd=_l):(e?r.endingStart=this.zeroSlopeAtStart?_l:bl:r.endingStart=Fu,t?r.endingEnd=this.zeroSlopeAtEnd?_l:bl:r.endingEnd=Fu)}_scheduleFading(e,t,i){const r=this._mixer,s=r.time;let a=this._weightInterpolant;a===null&&(a=r._lendControlInterpolant(),this._weightInterpolant=a);const o=a.parameterPositions,l=a.sampleValues;return o[0]=s,l[0]=t,o[1]=s+e,l[1]=i,this}}class nS extends za{constructor(e){super(),this._root=e,this._initMemoryManager(),this._accuIndex=0,this.time=0,this.timeScale=1}_bindAction(e,t){const i=e._localRoot||this._root,r=e._clip.tracks,s=r.length,a=e._propertyBindings,o=e._interpolants,l=i.uuid,c=this._bindingsByRootAndName;let h=c[l];h===void 0&&(h={},c[l]=h);for(let d=0;d!==s;++d){const u=r[d],p=u.name;let f=h[p];if(f!==void 0)++f.referenceCount,a[d]=f;else{if(f=a[d],f!==void 0){f._cacheIndex===null&&(++f.referenceCount,this._addInactiveBinding(f,l,p));continue}const g=t&&t._propertyBindings[d].binding.parsedPath;f=new SQ(hi.create(i,p,g),u.ValueTypeName,u.getValueSize()),++f.referenceCount,this._addInactiveBinding(f,l,p),a[d]=f}o[d].resultBuffer=f.buffer}}_activateAction(e){if(!this._isActiveAction(e)){if(e._cacheIndex===null){const i=(e._localRoot||this._root).uuid,r=e._clip.uuid,s=this._actionsByClip[r];this._bindAction(e,s&&s.knownActions[0]),this._addInactiveAction(e,r,i)}const t=e._propertyBindings;for(let i=0,r=t.length;i!==r;++i){const s=t[i];s.useCount++===0&&(this._lendBinding(s),s.saveOriginalState())}this._lendAction(e)}}_deactivateAction(e){if(this._isActiveAction(e)){const t=e._propertyBindings;for(let i=0,r=t.length;i!==r;++i){const s=t[i];--s.useCount===0&&(s.restoreOriginalState(),this._takeBackBinding(s))}this._takeBackAction(e)}}_initMemoryManager(){this._actions=[],this._nActiveActions=0,this._actionsByClip={},this._bindings=[],this._nActiveBindings=0,this._bindingsByRootAndName={},this._controlInterpolants=[],this._nActiveControlInterpolants=0;const e=this;this.stats={actions:{get total(){return e._actions.length},get inUse(){return e._nActiveActions}},bindings:{get total(){return e._bindings.length},get inUse(){return e._nActiveBindings}},controlInterpolants:{get total(){return e._controlInterpolants.length},get inUse(){return e._nActiveControlInterpolants}}}}_isActiveAction(e){const t=e._cacheIndex;return t!==null&&t=0;--i)e[i].stop();return this}update(e){e*=this.timeScale;const t=this._actions,i=this._nActiveActions,r=this.time+=e,s=Math.sign(e),a=this._accuIndex^=1;for(let c=0;c!==i;++c)t[c]._update(r,e,s,a);const o=this._bindings,l=this._nActiveBindings;for(let c=0;c!==l;++c)o[c].apply(a);return this}setTime(e){this.time=0;for(let t=0;t>-e-14,Qn[n|256]=1024>>-e-14|32768,es[n]=-e-1,es[n|256]=-e-1):e<=15?(Qn[n]=e+15<<10,Qn[n|256]=e+15<<10|32768,es[n]=13,es[n|256]=13):e<128?(Qn[n]=31744,Qn[n|256]=64512,es[n]=24,es[n|256]=24):(Qn[n]=31744,Qn[n|256]=64512,es[n]=13,es[n|256]=13)}const aS=new Uint32Array(2048),sd=new Uint32Array(64),BQ=new Uint32Array(64);for(let n=1;n<1024;++n){let e=n<<13,t=0;for(;(e&8388608)===0;)e<<=1,t-=8388608;e&=-8388609,t+=947912704,aS[n]=e|t}for(let n=1024;n<2048;++n)aS[n]=939524096+(n-1024<<13);for(let n=1;n<31;++n)sd[n]=n<<23;sd[31]=1199570944;sd[32]=2147483648;for(let n=33;n<63;++n)sd[n]=2147483648+(n-32<<23);sd[63]=3347054592;for(let n=1;n<64;++n)n!==32&&(BQ[n]=1024);_n.create=function(n,e){return console.log("THREE.Curve.create() has been deprecated"),n.prototype=Object.create(_n.prototype),n.prototype.constructor=n,n.prototype.getPoint=e,n};Nu.prototype.fromPoints=function(n){return console.warn("THREE.Path: .fromPoints() has been renamed to .setFromPoints()."),this.setFromPoints(n)};Xg.prototype.setColors=function(){console.error("THREE.GridHelper: setColors() has been deprecated, pass them in the constructor instead.")};Wg.prototype.update=function(){console.error("THREE.SkeletonHelper: update() no longer needs to be called.")};Zn.prototype.extractUrlBase=function(n){return console.warn("THREE.Loader: .extractUrlBase() has been deprecated. Use THREE.LoaderUtils.extractUrlBase() instead."),Hg.extractUrlBase(n)};Zn.Handlers={add:function(){console.error("THREE.Loader: Handlers.add() has been removed. Use LoadingManager.addHandler() instead.")},get:function(){console.error("THREE.Loader: Handlers.get() has been removed. Use LoadingManager.getHandler() instead.")}};Tn.prototype.center=function(n){return console.warn("THREE.Box3: .center() has been renamed to .getCenter()."),this.getCenter(n)};Tn.prototype.empty=function(){return console.warn("THREE.Box3: .empty() has been renamed to .isEmpty()."),this.isEmpty()};Tn.prototype.isIntersectionBox=function(n){return console.warn("THREE.Box3: .isIntersectionBox() has been renamed to .intersectsBox()."),this.intersectsBox(n)};Tn.prototype.isIntersectionSphere=function(n){return console.warn("THREE.Box3: .isIntersectionSphere() has been renamed to .intersectsSphere()."),this.intersectsSphere(n)};Tn.prototype.size=function(n){return console.warn("THREE.Box3: .size() has been renamed to .getSize()."),this.getSize(n)};Va.prototype.toVector3=function(){console.error("THREE.Euler: .toVector3() has been removed. Use Vector3.setFromEuler() instead")};jo.prototype.empty=function(){return console.warn("THREE.Sphere: .empty() has been renamed to .isEmpty()."),this.isEmpty()};Mp.prototype.setFromMatrix=function(n){return console.warn("THREE.Frustum: .setFromMatrix() has been renamed to .setFromProjectionMatrix()."),this.setFromProjectionMatrix(n)};vr.prototype.flattenToArrayOffset=function(n,e){return console.warn("THREE.Matrix3: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."),this.toArray(n,e)};vr.prototype.multiplyVector3=function(n){return console.warn("THREE.Matrix3: .multiplyVector3() has been removed. Use vector.applyMatrix3( matrix ) instead."),n.applyMatrix3(this)};vr.prototype.multiplyVector3Array=function(){console.error("THREE.Matrix3: .multiplyVector3Array() has been removed.")};vr.prototype.applyToBufferAttribute=function(n){return console.warn("THREE.Matrix3: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix3( matrix ) instead."),n.applyMatrix3(this)};vr.prototype.applyToVector3Array=function(){console.error("THREE.Matrix3: .applyToVector3Array() has been removed.")};vr.prototype.getInverse=function(n){return console.warn("THREE.Matrix3: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."),this.copy(n).invert()};yt.prototype.extractPosition=function(n){return console.warn("THREE.Matrix4: .extractPosition() has been renamed to .copyPosition()."),this.copyPosition(n)};yt.prototype.flattenToArrayOffset=function(n,e){return console.warn("THREE.Matrix4: .flattenToArrayOffset() has been deprecated. Use .toArray() instead."),this.toArray(n,e)};yt.prototype.getPosition=function(){return console.warn("THREE.Matrix4: .getPosition() has been removed. Use Vector3.setFromMatrixPosition( matrix ) instead."),new A().setFromMatrixColumn(this,3)};yt.prototype.setRotationFromQuaternion=function(n){return console.warn("THREE.Matrix4: .setRotationFromQuaternion() has been renamed to .makeRotationFromQuaternion()."),this.makeRotationFromQuaternion(n)};yt.prototype.multiplyToArray=function(){console.warn("THREE.Matrix4: .multiplyToArray() has been removed.")};yt.prototype.multiplyVector3=function(n){return console.warn("THREE.Matrix4: .multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)};yt.prototype.multiplyVector4=function(n){return console.warn("THREE.Matrix4: .multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)};yt.prototype.multiplyVector3Array=function(){console.error("THREE.Matrix4: .multiplyVector3Array() has been removed.")};yt.prototype.rotateAxis=function(n){console.warn("THREE.Matrix4: .rotateAxis() has been removed. Use Vector3.transformDirection( matrix ) instead."),n.transformDirection(this)};yt.prototype.crossVector=function(n){return console.warn("THREE.Matrix4: .crossVector() has been removed. Use vector.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)};yt.prototype.translate=function(){console.error("THREE.Matrix4: .translate() has been removed.")};yt.prototype.rotateX=function(){console.error("THREE.Matrix4: .rotateX() has been removed.")};yt.prototype.rotateY=function(){console.error("THREE.Matrix4: .rotateY() has been removed.")};yt.prototype.rotateZ=function(){console.error("THREE.Matrix4: .rotateZ() has been removed.")};yt.prototype.rotateByAxis=function(){console.error("THREE.Matrix4: .rotateByAxis() has been removed.")};yt.prototype.applyToBufferAttribute=function(n){return console.warn("THREE.Matrix4: .applyToBufferAttribute() has been removed. Use attribute.applyMatrix4( matrix ) instead."),n.applyMatrix4(this)};yt.prototype.applyToVector3Array=function(){console.error("THREE.Matrix4: .applyToVector3Array() has been removed.")};yt.prototype.makeFrustum=function(n,e,t,i,r,s){return console.warn("THREE.Matrix4: .makeFrustum() has been removed. Use .makePerspective( left, right, top, bottom, near, far ) instead."),this.makePerspective(n,e,i,t,r,s)};yt.prototype.getInverse=function(n){return console.warn("THREE.Matrix4: .getInverse() has been removed. Use matrixInv.copy( matrix ).invert(); instead."),this.copy(n).invert()};Ls.prototype.isIntersectionLine=function(n){return console.warn("THREE.Plane: .isIntersectionLine() has been renamed to .intersectsLine()."),this.intersectsLine(n)};xi.prototype.multiplyVector3=function(n){return console.warn("THREE.Quaternion: .multiplyVector3() has been removed. Use is now vector.applyQuaternion( quaternion ) instead."),n.applyQuaternion(this)};xi.prototype.inverse=function(){return console.warn("THREE.Quaternion: .inverse() has been renamed to invert()."),this.invert()};No.prototype.isIntersectionBox=function(n){return console.warn("THREE.Ray: .isIntersectionBox() has been renamed to .intersectsBox()."),this.intersectsBox(n)};No.prototype.isIntersectionPlane=function(n){return console.warn("THREE.Ray: .isIntersectionPlane() has been renamed to .intersectsPlane()."),this.intersectsPlane(n)};No.prototype.isIntersectionSphere=function(n){return console.warn("THREE.Ray: .isIntersectionSphere() has been renamed to .intersectsSphere()."),this.intersectsSphere(n)};tr.prototype.area=function(){return console.warn("THREE.Triangle: .area() has been renamed to .getArea()."),this.getArea()};tr.prototype.barycoordFromPoint=function(n,e){return console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."),this.getBarycoord(n,e)};tr.prototype.midpoint=function(n){return console.warn("THREE.Triangle: .midpoint() has been renamed to .getMidpoint()."),this.getMidpoint(n)};tr.prototypenormal=function(n){return console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."),this.getNormal(n)};tr.prototype.plane=function(n){return console.warn("THREE.Triangle: .plane() has been renamed to .getPlane()."),this.getPlane(n)};tr.barycoordFromPoint=function(n,e,t,i,r){return console.warn("THREE.Triangle: .barycoordFromPoint() has been renamed to .getBarycoord()."),tr.getBarycoord(n,e,t,i,r)};tr.normal=function(n,e,t,i){return console.warn("THREE.Triangle: .normal() has been renamed to .getNormal()."),tr.getNormal(n,e,t,i)};nc.prototype.extractAllPoints=function(n){return console.warn("THREE.Shape: .extractAllPoints() has been removed. Use .extractPoints() instead."),this.extractPoints(n)};nc.prototype.extrude=function(n){return console.warn("THREE.Shape: .extrude() has been removed. Use ExtrudeGeometry() instead."),new Ia(this,n)};nc.prototype.makeGeometry=function(n){return console.warn("THREE.Shape: .makeGeometry() has been removed. Use ShapeGeometry() instead."),new lh(this,n)};_e.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector2: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)};_e.prototype.distanceToManhattan=function(n){return console.warn("THREE.Vector2: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."),this.manhattanDistanceTo(n)};_e.prototype.lengthManhattan=function(){return console.warn("THREE.Vector2: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()};A.prototype.setEulerFromRotationMatrix=function(){console.error("THREE.Vector3: .setEulerFromRotationMatrix() has been removed. Use Euler.setFromRotationMatrix() instead.")};A.prototype.setEulerFromQuaternion=function(){console.error("THREE.Vector3: .setEulerFromQuaternion() has been removed. Use Euler.setFromQuaternion() instead.")};A.prototype.getPositionFromMatrix=function(n){return console.warn("THREE.Vector3: .getPositionFromMatrix() has been renamed to .setFromMatrixPosition()."),this.setFromMatrixPosition(n)};A.prototype.getScaleFromMatrix=function(n){return console.warn("THREE.Vector3: .getScaleFromMatrix() has been renamed to .setFromMatrixScale()."),this.setFromMatrixScale(n)};A.prototype.getColumnFromMatrix=function(n,e){return console.warn("THREE.Vector3: .getColumnFromMatrix() has been renamed to .setFromMatrixColumn()."),this.setFromMatrixColumn(e,n)};A.prototype.applyProjection=function(n){return console.warn("THREE.Vector3: .applyProjection() has been removed. Use .applyMatrix4( m ) instead."),this.applyMatrix4(n)};A.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector3: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)};A.prototype.distanceToManhattan=function(n){return console.warn("THREE.Vector3: .distanceToManhattan() has been renamed to .manhattanDistanceTo()."),this.manhattanDistanceTo(n)};A.prototype.lengthManhattan=function(){return console.warn("THREE.Vector3: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()};ui.prototype.fromAttribute=function(n,e,t){return console.warn("THREE.Vector4: .fromAttribute() has been renamed to .fromBufferAttribute()."),this.fromBufferAttribute(n,e,t)};ui.prototype.lengthManhattan=function(){return console.warn("THREE.Vector4: .lengthManhattan() has been renamed to .manhattanLength()."),this.manhattanLength()};Kt.prototype.getChildByName=function(n){return console.warn("THREE.Object3D: .getChildByName() has been renamed to .getObjectByName()."),this.getObjectByName(n)};Kt.prototype.renderDepth=function(){console.warn("THREE.Object3D: .renderDepth has been removed. Use .renderOrder, instead.")};Kt.prototype.translate=function(n,e){return console.warn("THREE.Object3D: .translate() has been removed. Use .translateOnAxis( axis, distance ) instead."),this.translateOnAxis(e,n)};Kt.prototype.getWorldRotation=function(){console.error("THREE.Object3D: .getWorldRotation() has been removed. Use THREE.Object3D.getWorldQuaternion( target ) instead.")};Kt.prototype.applyMatrix=function(n){return console.warn("THREE.Object3D: .applyMatrix() has been renamed to .applyMatrix4()."),this.applyMatrix4(n)};Object.defineProperties(Kt.prototype,{eulerOrder:{get:function(){return console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."),this.rotation.order},set:function(n){console.warn("THREE.Object3D: .eulerOrder is now .rotation.order."),this.rotation.order=n}},useQuaternion:{get:function(){console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.")},set:function(){console.warn("THREE.Object3D: .useQuaternion has been removed. The library now uses quaternions by default.")}}});Be.prototype.setDrawMode=function(){console.error("THREE.Mesh: .setDrawMode() has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.")};Object.defineProperties(Be.prototype,{drawMode:{get:function(){return console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode."),MX},set:function(){console.error("THREE.Mesh: .drawMode has been removed. The renderer now always assumes THREE.TrianglesDrawMode. Transform your geometry via BufferGeometryUtils.toTrianglesDrawMode() if necessary.")}}});Dm.prototype.initBones=function(){console.error("THREE.SkinnedMesh: initBones() has been removed.")};Mr.prototype.setLens=function(n,e){console.warn("THREE.PerspectiveCamera.setLens is deprecated. Use .setFocalLength and .filmGauge for a photographic setup."),e!==void 0&&(this.filmGauge=e),this.setFocalLength(n)};Object.defineProperties(us.prototype,{onlyShadow:{set:function(){console.warn("THREE.Light: .onlyShadow has been removed.")}},shadowCameraFov:{set:function(n){console.warn("THREE.Light: .shadowCameraFov is now .shadow.camera.fov."),this.shadow.camera.fov=n}},shadowCameraLeft:{set:function(n){console.warn("THREE.Light: .shadowCameraLeft is now .shadow.camera.left."),this.shadow.camera.left=n}},shadowCameraRight:{set:function(n){console.warn("THREE.Light: .shadowCameraRight is now .shadow.camera.right."),this.shadow.camera.right=n}},shadowCameraTop:{set:function(n){console.warn("THREE.Light: .shadowCameraTop is now .shadow.camera.top."),this.shadow.camera.top=n}},shadowCameraBottom:{set:function(n){console.warn("THREE.Light: .shadowCameraBottom is now .shadow.camera.bottom."),this.shadow.camera.bottom=n}},shadowCameraNear:{set:function(n){console.warn("THREE.Light: .shadowCameraNear is now .shadow.camera.near."),this.shadow.camera.near=n}},shadowCameraFar:{set:function(n){console.warn("THREE.Light: .shadowCameraFar is now .shadow.camera.far."),this.shadow.camera.far=n}},shadowCameraVisible:{set:function(){console.warn("THREE.Light: .shadowCameraVisible has been removed. Use new THREE.CameraHelper( light.shadow.camera ) instead.")}},shadowBias:{set:function(n){console.warn("THREE.Light: .shadowBias is now .shadow.bias."),this.shadow.bias=n}},shadowDarkness:{set:function(){console.warn("THREE.Light: .shadowDarkness has been removed.")}},shadowMapWidth:{set:function(n){console.warn("THREE.Light: .shadowMapWidth is now .shadow.mapSize.width."),this.shadow.mapSize.width=n}},shadowMapHeight:{set:function(n){console.warn("THREE.Light: .shadowMapHeight is now .shadow.mapSize.height."),this.shadow.mapSize.height=n}}});Object.defineProperties(Ai.prototype,{length:{get:function(){return console.warn("THREE.BufferAttribute: .length has been deprecated. Use .count instead."),this.array.length}},dynamic:{get:function(){return console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."),this.usage===ju},set:function(){console.warn("THREE.BufferAttribute: .dynamic has been deprecated. Use .usage instead."),this.setUsage(ju)}}});Ai.prototype.setDynamic=function(n){return console.warn("THREE.BufferAttribute: .setDynamic() has been deprecated. Use .setUsage() instead."),this.setUsage(n===!0?ju:th),this};Ai.prototype.copyIndicesArray=function(){console.error("THREE.BufferAttribute: .copyIndicesArray() has been removed.")},Ai.prototype.setArray=function(){console.error("THREE.BufferAttribute: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers")};Ot.prototype.addIndex=function(n){console.warn("THREE.BufferGeometry: .addIndex() has been renamed to .setIndex()."),this.setIndex(n)};Ot.prototype.addAttribute=function(n,e){return console.warn("THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute()."),!(e&&e.isBufferAttribute)&&!(e&&e.isInterleavedBufferAttribute)?(console.warn("THREE.BufferGeometry: .addAttribute() now expects ( name, attribute )."),this.setAttribute(n,new Ai(arguments[1],arguments[2]))):n==="index"?(console.warn("THREE.BufferGeometry.addAttribute: Use .setIndex() for index attribute."),this.setIndex(e),this):this.setAttribute(n,e)};Ot.prototype.addDrawCall=function(n,e,t){t!==void 0&&console.warn("THREE.BufferGeometry: .addDrawCall() no longer supports indexOffset."),console.warn("THREE.BufferGeometry: .addDrawCall() is now .addGroup()."),this.addGroup(n,e)};Ot.prototype.clearDrawCalls=function(){console.warn("THREE.BufferGeometry: .clearDrawCalls() is now .clearGroups()."),this.clearGroups()};Ot.prototype.computeOffsets=function(){console.warn("THREE.BufferGeometry: .computeOffsets() has been removed.")};Ot.prototype.removeAttribute=function(n){return console.warn("THREE.BufferGeometry: .removeAttribute() has been renamed to .deleteAttribute()."),this.deleteAttribute(n)};Ot.prototype.applyMatrix=function(n){return console.warn("THREE.BufferGeometry: .applyMatrix() has been renamed to .applyMatrix4()."),this.applyMatrix4(n)};Object.defineProperties(Ot.prototype,{drawcalls:{get:function(){return console.error("THREE.BufferGeometry: .drawcalls has been renamed to .groups."),this.groups}},offsets:{get:function(){return console.warn("THREE.BufferGeometry: .offsets has been renamed to .groups."),this.groups}}});rc.prototype.setDynamic=function(n){return console.warn("THREE.InterleavedBuffer: .setDynamic() has been deprecated. Use .setUsage() instead."),this.setUsage(n===!0?ju:th),this};rc.prototype.setArray=function(){console.error("THREE.InterleavedBuffer: .setArray has been removed. Use BufferGeometry .setAttribute to replace/resize attribute buffers")};Ia.prototype.getArrays=function(){console.error("THREE.ExtrudeGeometry: .getArrays() has been removed.")};Ia.prototype.addShapeList=function(){console.error("THREE.ExtrudeGeometry: .addShapeList() has been removed.")};Ia.prototype.addShape=function(){console.error("THREE.ExtrudeGeometry: .addShape() has been removed.")};rh.prototype.dispose=function(){console.error("THREE.Scene: .dispose() has been removed.")};Object.defineProperties(rr.prototype,{wrapAround:{get:function(){console.warn("THREE.Material: .wrapAround has been removed.")},set:function(){console.warn("THREE.Material: .wrapAround has been removed.")}},overdraw:{get:function(){console.warn("THREE.Material: .overdraw has been removed.")},set:function(){console.warn("THREE.Material: .overdraw has been removed.")}},wrapRGB:{get:function(){return console.warn("THREE.Material: .wrapRGB has been removed."),new tt}},shading:{get:function(){console.error("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead.")},set:function(n){console.warn("THREE."+this.type+": .shading has been removed. Use the boolean .flatShading instead."),this.flatShading=n===r_}},stencilMask:{get:function(){return console.warn("THREE."+this.type+": .stencilMask has been removed. Use .stencilFuncMask instead."),this.stencilFuncMask},set:function(n){console.warn("THREE."+this.type+": .stencilMask has been removed. Use .stencilFuncMask instead."),this.stencilFuncMask=n}},vertexTangents:{get:function(){console.warn("THREE."+this.type+": .vertexTangents has been removed.")},set:function(){console.warn("THREE."+this.type+": .vertexTangents has been removed.")}}});Object.defineProperties(Kn.prototype,{derivatives:{get:function(){return console.warn("THREE.ShaderMaterial: .derivatives has been moved to .extensions.derivatives."),this.extensions.derivatives},set:function(n){console.warn("THREE. ShaderMaterial: .derivatives has been moved to .extensions.derivatives."),this.extensions.derivatives=n}}});pi.prototype.clearTarget=function(n,e,t,i){console.warn("THREE.WebGLRenderer: .clearTarget() has been deprecated. Use .setRenderTarget() and .clear() instead."),this.setRenderTarget(n),this.clear(e,t,i)};pi.prototype.animate=function(n){console.warn("THREE.WebGLRenderer: .animate() is now .setAnimationLoop()."),this.setAnimationLoop(n)};pi.prototype.getCurrentRenderTarget=function(){return console.warn("THREE.WebGLRenderer: .getCurrentRenderTarget() is now .getRenderTarget()."),this.getRenderTarget()};pi.prototype.getMaxAnisotropy=function(){return console.warn("THREE.WebGLRenderer: .getMaxAnisotropy() is now .capabilities.getMaxAnisotropy()."),this.capabilities.getMaxAnisotropy()};pi.prototype.getPrecision=function(){return console.warn("THREE.WebGLRenderer: .getPrecision() is now .capabilities.precision."),this.capabilities.precision};pi.prototype.resetGLState=function(){return console.warn("THREE.WebGLRenderer: .resetGLState() is now .state.reset()."),this.state.reset()};pi.prototype.supportsFloatTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsFloatTextures() is now .extensions.get( 'OES_texture_float' )."),this.extensions.get("OES_texture_float")};pi.prototype.supportsHalfFloatTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsHalfFloatTextures() is now .extensions.get( 'OES_texture_half_float' )."),this.extensions.get("OES_texture_half_float")};pi.prototype.supportsStandardDerivatives=function(){return console.warn("THREE.WebGLRenderer: .supportsStandardDerivatives() is now .extensions.get( 'OES_standard_derivatives' )."),this.extensions.get("OES_standard_derivatives")};pi.prototype.supportsCompressedTextureS3TC=function(){return console.warn("THREE.WebGLRenderer: .supportsCompressedTextureS3TC() is now .extensions.get( 'WEBGL_compressed_texture_s3tc' )."),this.extensions.get("WEBGL_compressed_texture_s3tc")};pi.prototype.supportsCompressedTexturePVRTC=function(){return console.warn("THREE.WebGLRenderer: .supportsCompressedTexturePVRTC() is now .extensions.get( 'WEBGL_compressed_texture_pvrtc' )."),this.extensions.get("WEBGL_compressed_texture_pvrtc")};pi.prototype.supportsBlendMinMax=function(){return console.warn("THREE.WebGLRenderer: .supportsBlendMinMax() is now .extensions.get( 'EXT_blend_minmax' )."),this.extensions.get("EXT_blend_minmax")};pi.prototype.supportsVertexTextures=function(){return console.warn("THREE.WebGLRenderer: .supportsVertexTextures() is now .capabilities.vertexTextures."),this.capabilities.vertexTextures};pi.prototype.supportsInstancedArrays=function(){return console.warn("THREE.WebGLRenderer: .supportsInstancedArrays() is now .extensions.get( 'ANGLE_instanced_arrays' )."),this.extensions.get("ANGLE_instanced_arrays")};pi.prototype.enableScissorTest=function(n){console.warn("THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest()."),this.setScissorTest(n)};pi.prototype.initMaterial=function(){console.warn("THREE.WebGLRenderer: .initMaterial() has been removed.")};pi.prototype.addPrePlugin=function(){console.warn("THREE.WebGLRenderer: .addPrePlugin() has been removed.")};pi.prototype.addPostPlugin=function(){console.warn("THREE.WebGLRenderer: .addPostPlugin() has been removed.")};pi.prototype.updateShadowMap=function(){console.warn("THREE.WebGLRenderer: .updateShadowMap() has been removed.")};pi.prototype.setFaceCulling=function(){console.warn("THREE.WebGLRenderer: .setFaceCulling() has been removed.")};pi.prototype.allocTextureUnit=function(){console.warn("THREE.WebGLRenderer: .allocTextureUnit() has been removed.")};pi.prototype.setTexture=function(){console.warn("THREE.WebGLRenderer: .setTexture() has been removed.")};pi.prototype.setTexture2D=function(){console.warn("THREE.WebGLRenderer: .setTexture2D() has been removed.")};pi.prototype.setTextureCube=function(){console.warn("THREE.WebGLRenderer: .setTextureCube() has been removed.")};pi.prototype.getActiveMipMapLevel=function(){return console.warn("THREE.WebGLRenderer: .getActiveMipMapLevel() is now .getActiveMipmapLevel()."),this.getActiveMipmapLevel()};Object.defineProperties(pi.prototype,{shadowMapEnabled:{get:function(){return this.shadowMap.enabled},set:function(n){console.warn("THREE.WebGLRenderer: .shadowMapEnabled is now .shadowMap.enabled."),this.shadowMap.enabled=n}},shadowMapType:{get:function(){return this.shadowMap.type},set:function(n){console.warn("THREE.WebGLRenderer: .shadowMapType is now .shadowMap.type."),this.shadowMap.type=n}},shadowMapCullFace:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMapCullFace has been removed. Set Material.shadowSide instead.")}},context:{get:function(){return console.warn("THREE.WebGLRenderer: .context has been removed. Use .getContext() instead."),this.getContext()}},vr:{get:function(){return console.warn("THREE.WebGLRenderer: .vr has been renamed to .xr"),this.xr}},gammaInput:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead."),!1},set:function(){console.warn("THREE.WebGLRenderer: .gammaInput has been removed. Set the encoding for textures via Texture.encoding instead.")}},gammaOutput:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."),!1},set:function(n){console.warn("THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead."),this.outputEncoding=n===!0?Ei:js}},toneMappingWhitePoint:{get:function(){return console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed."),1},set:function(){console.warn("THREE.WebGLRenderer: .toneMappingWhitePoint has been removed.")}},gammaFactor:{get:function(){return console.warn("THREE.WebGLRenderer: .gammaFactor has been removed."),2},set:function(){console.warn("THREE.WebGLRenderer: .gammaFactor has been removed.")}}});Object.defineProperties(S_.prototype,{cullFace:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.cullFace has been removed. Set Material.shadowSide instead.")}},renderReverseSided:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderReverseSided has been removed. Set Material.shadowSide instead.")}},renderSingleSided:{get:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.")},set:function(){console.warn("THREE.WebGLRenderer: .shadowMap.renderSingleSided has been removed. Set Material.shadowSide instead.")}}});Object.defineProperties(nn.prototype,{wrapS:{get:function(){return console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."),this.texture.wrapS},set:function(n){console.warn("THREE.WebGLRenderTarget: .wrapS is now .texture.wrapS."),this.texture.wrapS=n}},wrapT:{get:function(){return console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."),this.texture.wrapT},set:function(n){console.warn("THREE.WebGLRenderTarget: .wrapT is now .texture.wrapT."),this.texture.wrapT=n}},magFilter:{get:function(){return console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."),this.texture.magFilter},set:function(n){console.warn("THREE.WebGLRenderTarget: .magFilter is now .texture.magFilter."),this.texture.magFilter=n}},minFilter:{get:function(){return console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."),this.texture.minFilter},set:function(n){console.warn("THREE.WebGLRenderTarget: .minFilter is now .texture.minFilter."),this.texture.minFilter=n}},anisotropy:{get:function(){return console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."),this.texture.anisotropy},set:function(n){console.warn("THREE.WebGLRenderTarget: .anisotropy is now .texture.anisotropy."),this.texture.anisotropy=n}},offset:{get:function(){return console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."),this.texture.offset},set:function(n){console.warn("THREE.WebGLRenderTarget: .offset is now .texture.offset."),this.texture.offset=n}},repeat:{get:function(){return console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."),this.texture.repeat},set:function(n){console.warn("THREE.WebGLRenderTarget: .repeat is now .texture.repeat."),this.texture.repeat=n}},format:{get:function(){return console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."),this.texture.format},set:function(n){console.warn("THREE.WebGLRenderTarget: .format is now .texture.format."),this.texture.format=n}},type:{get:function(){return console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."),this.texture.type},set:function(n){console.warn("THREE.WebGLRenderTarget: .type is now .texture.type."),this.texture.type=n}},generateMipmaps:{get:function(){return console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."),this.texture.generateMipmaps},set:function(n){console.warn("THREE.WebGLRenderTarget: .generateMipmaps is now .texture.generateMipmaps."),this.texture.generateMipmaps=n}}});_Q.prototype.load=function(n){console.warn("THREE.Audio: .load has been deprecated. Use THREE.AudioLoader instead.");const e=this;return new yQ().load(n,function(i){e.setBuffer(i)}),this};Am.prototype.updateCubeMap=function(n,e){return console.warn("THREE.CubeCamera: .updateCubeMap() is now .update()."),this.update(n,e)};Am.prototype.clear=function(n,e,t,i){return console.warn("THREE.CubeCamera: .clear() is now .renderTarget.clear()."),this.renderTarget.clear(n,e,t,i)};Fo.crossOrigin=void 0;Fo.loadTexture=function(n,e,t,i){console.warn("THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead.");const r=new dQ;r.setCrossOrigin(this.crossOrigin);const s=r.load(n,t,void 0,i);return e&&(s.mapping=e),s};Fo.loadTextureCube=function(n,e,t,i){console.warn("THREE.ImageUtils.loadTextureCube has been deprecated. Use THREE.CubeTextureLoader() instead.");const r=new hQ;r.setCrossOrigin(this.crossOrigin);const s=r.load(n,t,void 0,i);return e&&(s.mapping=e),s};Fo.loadCompressedTexture=function(){console.error("THREE.ImageUtils.loadCompressedTexture has been removed. Use THREE.DDSLoader instead.")};Fo.loadCompressedTextureCube=function(){console.error("THREE.ImageUtils.loadCompressedTextureCube has been removed. Use THREE.DDSLoader instead.")};typeof __THREE_DEVTOOLS__!="undefined"&&__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent("register",{detail:{revision:Cm}}));typeof window!="undefined"&&(window.__THREE__?console.warn("WARNING: Multiple instances of Three.js being imported."):window.__THREE__=Cm);const I1={type:"change"},hg={type:"start"},L1={type:"end"};class GQ extends za{constructor(e,t){super(),t===void 0&&console.warn('THREE.OrbitControls: The second parameter "domElement" is now mandatory.'),t===document&&console.error('THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.'),this.object=e,this.domElement=t,this.domElement.style.touchAction="none",this.enabled=!0,this.target=new A,this.minDistance=0,this.maxDistance=1/0,this.minZoom=0,this.maxZoom=1/0,this.minPolarAngle=0,this.maxPolarAngle=Math.PI,this.minAzimuthAngle=-1/0,this.maxAzimuthAngle=1/0,this.enableDamping=!1,this.dampingFactor=.05,this.enableZoom=!0,this.zoomSpeed=1,this.enableRotate=!0,this.rotateSpeed=1,this.enablePan=!0,this.panSpeed=1,this.screenSpacePanning=!0,this.keyPanSpeed=7,this.autoRotate=!1,this.autoRotateSpeed=2,this.keys={LEFT:"ArrowLeft",UP:"ArrowUp",RIGHT:"ArrowRight",BOTTOM:"ArrowDown"},this.mouseButtons={LEFT:qo.ROTATE,MIDDLE:qo.DOLLY,RIGHT:qo.PAN},this.touches={ONE:Zo.ROTATE,TWO:Zo.DOLLY_PAN},this.target0=this.target.clone(),this.position0=this.object.position.clone(),this.zoom0=this.object.zoom,this._domElementKeyEvents=null,this.getPolarAngle=function(){return o.phi},this.getAzimuthalAngle=function(){return o.theta},this.getDistance=function(){return this.object.position.distanceTo(this.target)},this.listenToKeyEvents=function(D){D.addEventListener("keydown",Gt),this._domElementKeyEvents=D},this.saveState=function(){i.target0.copy(i.target),i.position0.copy(i.object.position),i.zoom0=i.object.zoom},this.reset=function(){i.target.copy(i.target0),i.object.position.copy(i.position0),i.object.zoom=i.zoom0,i.object.updateProjectionMatrix(),i.dispatchEvent(I1),i.update(),s=r.NONE},this.update=function(){const D=new A,Ie=new xi().setFromUnitVectors(e.up,new A(0,1,0)),st=Ie.clone().invert(),De=new A,Y=new xi,Ve=2*Math.PI;return function(){const gt=i.object.position;D.copy(gt).sub(i.target),D.applyQuaternion(Ie),o.setFromVector3(D),i.autoRotate&&s===r.NONE&&q(k()),i.enableDamping?(o.theta+=l.theta*i.dampingFactor,o.phi+=l.phi*i.dampingFactor):(o.theta+=l.theta,o.phi+=l.phi);let Ge=i.minAzimuthAngle,lt=i.maxAzimuthAngle;return isFinite(Ge)&&isFinite(lt)&&(Ge<-Math.PI?Ge+=Ve:Ge>Math.PI&&(Ge-=Ve),lt<-Math.PI?lt+=Ve:lt>Math.PI&&(lt-=Ve),Ge<=lt?o.theta=Math.max(Ge,Math.min(lt,o.theta)):o.theta=o.theta>(Ge+lt)/2?Math.max(Ge,o.theta):Math.min(lt,o.theta)),o.phi=Math.max(i.minPolarAngle,Math.min(i.maxPolarAngle,o.phi)),o.makeSafe(),o.radius*=c,o.radius=Math.max(i.minDistance,Math.min(i.maxDistance,o.radius)),i.enableDamping===!0?i.target.addScaledVector(h,i.dampingFactor):i.target.add(h),D.setFromSpherical(o),D.applyQuaternion(st),gt.copy(i.target).add(D),i.object.lookAt(i.target),i.enableDamping===!0?(l.theta*=1-i.dampingFactor,l.phi*=1-i.dampingFactor,h.multiplyScalar(1-i.dampingFactor)):(l.set(0,0,0),h.set(0,0,0)),c=1,d||De.distanceToSquared(i.object.position)>a||8*(1-Y.dot(i.object.quaternion))>a?(i.dispatchEvent(I1),De.copy(i.object.position),Y.copy(i.object.quaternion),d=!1,!0):!1}}(),this.dispose=function(){i.domElement.removeEventListener("contextmenu",pe),i.domElement.removeEventListener("pointerdown",se),i.domElement.removeEventListener("pointercancel",ft),i.domElement.removeEventListener("wheel",ci),i.domElement.removeEventListener("pointermove",$e),i.domElement.removeEventListener("pointerup",Ce),i._domElementKeyEvents!==null&&i._domElementKeyEvents.removeEventListener("keydown",Gt)};const i=this,r={NONE:-1,ROTATE:0,DOLLY:1,PAN:2,TOUCH_ROTATE:3,TOUCH_PAN:4,TOUCH_DOLLY_PAN:5,TOUCH_DOLLY_ROTATE:6};let s=r.NONE;const a=1e-6,o=new M1,l=new M1;let c=1;const h=new A;let d=!1;const u=new _e,p=new _e,f=new _e,g=new _e,m=new _e,v=new _e,x=new _e,_=new _e,b=new _e,S=[],C={};function k(){return 2*Math.PI/60/60*i.autoRotateSpeed}function O(){return Math.pow(.95,i.zoomSpeed)}function q(D){l.theta-=D}function X(D){l.phi-=D}const T=function(){const D=new A;return function(st,De){D.setFromMatrixColumn(De,0),D.multiplyScalar(-st),h.add(D)}}(),z=function(){const D=new A;return function(st,De){i.screenSpacePanning===!0?D.setFromMatrixColumn(De,1):(D.setFromMatrixColumn(De,0),D.crossVectors(i.object.up,D)),D.multiplyScalar(st),h.add(D)}}(),ae=function(){const D=new A;return function(st,De){const Y=i.domElement;if(i.object.isPerspectiveCamera){const Ve=i.object.position;D.copy(Ve).sub(i.target);let Oe=D.length();Oe*=Math.tan(i.object.fov/2*Math.PI/180),T(2*st*Oe/Y.clientHeight,i.object.matrix),z(2*De*Oe/Y.clientHeight,i.object.matrix)}else i.object.isOrthographicCamera?(T(st*(i.object.right-i.object.left)/i.object.zoom/Y.clientWidth,i.object.matrix),z(De*(i.object.top-i.object.bottom)/i.object.zoom/Y.clientHeight,i.object.matrix)):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - pan disabled."),i.enablePan=!1)}}();function j(D){i.object.isPerspectiveCamera?c/=D:i.object.isOrthographicCamera?(i.object.zoom=Math.max(i.minZoom,Math.min(i.maxZoom,i.object.zoom*D)),i.object.updateProjectionMatrix(),d=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),i.enableZoom=!1)}function J(D){i.object.isPerspectiveCamera?c*=D:i.object.isOrthographicCamera?(i.object.zoom=Math.max(i.minZoom,Math.min(i.maxZoom,i.object.zoom/D)),i.object.updateProjectionMatrix(),d=!0):(console.warn("WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled."),i.enableZoom=!1)}function Q(D){u.set(D.clientX,D.clientY)}function ee(D){x.set(D.clientX,D.clientY)}function K(D){g.set(D.clientX,D.clientY)}function re(D){p.set(D.clientX,D.clientY),f.subVectors(p,u).multiplyScalar(i.rotateSpeed);const Ie=i.domElement;q(2*Math.PI*f.x/Ie.clientHeight),X(2*Math.PI*f.y/Ie.clientHeight),u.copy(p),i.update()}function le(D){_.set(D.clientX,D.clientY),b.subVectors(_,x),b.y>0?j(O()):b.y<0&&J(O()),x.copy(_),i.update()}function ve(D){m.set(D.clientX,D.clientY),v.subVectors(m,g).multiplyScalar(i.panSpeed),ae(v.x,v.y),g.copy(m),i.update()}function Z(D){D.deltaY<0?J(O()):D.deltaY>0&&j(O()),i.update()}function ke(D){let Ie=!1;switch(D.code){case i.keys.UP:ae(0,i.keyPanSpeed),Ie=!0;break;case i.keys.BOTTOM:ae(0,-i.keyPanSpeed),Ie=!0;break;case i.keys.LEFT:ae(i.keyPanSpeed,0),Ie=!0;break;case i.keys.RIGHT:ae(-i.keyPanSpeed,0),Ie=!0;break}Ie&&(D.preventDefault(),i.update())}function Je(){if(S.length===1)u.set(S[0].pageX,S[0].pageY);else{const D=.5*(S[0].pageX+S[1].pageX),Ie=.5*(S[0].pageY+S[1].pageY);u.set(D,Ie)}}function it(){if(S.length===1)g.set(S[0].pageX,S[0].pageY);else{const D=.5*(S[0].pageX+S[1].pageX),Ie=.5*(S[0].pageY+S[1].pageY);g.set(D,Ie)}}function ye(){const D=S[0].pageX-S[1].pageX,Ie=S[0].pageY-S[1].pageY,st=Math.sqrt(D*D+Ie*Ie);x.set(0,st)}function Vt(){i.enableZoom&&ye(),i.enablePan&&it()}function xt(){i.enableZoom&&ye(),i.enableRotate&&Je()}function pt(D){if(S.length==1)p.set(D.pageX,D.pageY);else{const st=dt(D),De=.5*(D.pageX+st.x),Y=.5*(D.pageY+st.y);p.set(De,Y)}f.subVectors(p,u).multiplyScalar(i.rotateSpeed);const Ie=i.domElement;q(2*Math.PI*f.x/Ie.clientHeight),X(2*Math.PI*f.y/Ie.clientHeight),u.copy(p)}function w(D){if(S.length===1)m.set(D.pageX,D.pageY);else{const Ie=dt(D),st=.5*(D.pageX+Ie.x),De=.5*(D.pageY+Ie.y);m.set(st,De)}v.subVectors(m,g).multiplyScalar(i.panSpeed),ae(v.x,v.y),g.copy(m)}function L(D){const Ie=dt(D),st=D.pageX-Ie.x,De=D.pageY-Ie.y,Y=Math.sqrt(st*st+De*De);_.set(0,Y),b.set(0,Math.pow(_.y/x.y,i.zoomSpeed)),j(b.y),x.copy(_)}function I(D){i.enableZoom&&L(D),i.enablePan&&w(D)}function U(D){i.enableZoom&&L(D),i.enableRotate&&pt(D)}function se(D){i.enabled!==!1&&(S.length===0&&(i.domElement.setPointerCapture(D.pointerId),i.domElement.addEventListener("pointermove",$e),i.domElement.addEventListener("pointerup",Ce)),Pe(D),D.pointerType==="touch"?B(D):ot(D))}function $e(D){i.enabled!==!1&&(D.pointerType==="touch"?R(D):ht(D))}function Ce(D){Ne(D),S.length===0&&(i.domElement.releasePointerCapture(D.pointerId),i.domElement.removeEventListener("pointermove",$e),i.domElement.removeEventListener("pointerup",Ce)),i.dispatchEvent(L1),s=r.NONE}function ft(D){Ne(D)}function ot(D){let Ie;switch(D.button){case 0:Ie=i.mouseButtons.LEFT;break;case 1:Ie=i.mouseButtons.MIDDLE;break;case 2:Ie=i.mouseButtons.RIGHT;break;default:Ie=-1}switch(Ie){case qo.DOLLY:if(i.enableZoom===!1)return;ee(D),s=r.DOLLY;break;case qo.ROTATE:if(D.ctrlKey||D.metaKey||D.shiftKey){if(i.enablePan===!1)return;K(D),s=r.PAN}else{if(i.enableRotate===!1)return;Q(D),s=r.ROTATE}break;case qo.PAN:if(D.ctrlKey||D.metaKey||D.shiftKey){if(i.enableRotate===!1)return;Q(D),s=r.ROTATE}else{if(i.enablePan===!1)return;K(D),s=r.PAN}break;default:s=r.NONE}s!==r.NONE&&i.dispatchEvent(hg)}function ht(D){if(i.enabled!==!1)switch(s){case r.ROTATE:if(i.enableRotate===!1)return;re(D);break;case r.DOLLY:if(i.enableZoom===!1)return;le(D);break;case r.PAN:if(i.enablePan===!1)return;ve(D);break}}function ci(D){i.enabled===!1||i.enableZoom===!1||s!==r.NONE||(D.preventDefault(),i.dispatchEvent(hg),Z(D),i.dispatchEvent(L1))}function Gt(D){i.enabled===!1||i.enablePan===!1||ke(D)}function B(D){switch(We(D),S.length){case 1:switch(i.touches.ONE){case Zo.ROTATE:if(i.enableRotate===!1)return;Je(),s=r.TOUCH_ROTATE;break;case Zo.PAN:if(i.enablePan===!1)return;it(),s=r.TOUCH_PAN;break;default:s=r.NONE}break;case 2:switch(i.touches.TWO){case Zo.DOLLY_PAN:if(i.enableZoom===!1&&i.enablePan===!1)return;Vt(),s=r.TOUCH_DOLLY_PAN;break;case Zo.DOLLY_ROTATE:if(i.enableZoom===!1&&i.enableRotate===!1)return;xt(),s=r.TOUCH_DOLLY_ROTATE;break;default:s=r.NONE}break;default:s=r.NONE}s!==r.NONE&&i.dispatchEvent(hg)}function R(D){switch(We(D),s){case r.TOUCH_ROTATE:if(i.enableRotate===!1)return;pt(D),i.update();break;case r.TOUCH_PAN:if(i.enablePan===!1)return;w(D),i.update();break;case r.TOUCH_DOLLY_PAN:if(i.enableZoom===!1&&i.enablePan===!1)return;I(D),i.update();break;case r.TOUCH_DOLLY_ROTATE:if(i.enableZoom===!1&&i.enableRotate===!1)return;U(D),i.update();break;default:s=r.NONE}}function pe(D){i.enabled!==!1&&D.preventDefault()}function Pe(D){S.push(D)}function Ne(D){delete C[D.pointerId];for(let Ie=0;Ie.9&&(a.visible=!1)),this.axis==="Y"&&(Ci.setFromEuler(pu.set(0,0,Math.PI/2)),a.quaternion.copy(i).multiply(Ci),Math.abs(vi.copy(Ka).applyQuaternion(i).dot(this.eye))>.9&&(a.visible=!1)),this.axis==="Z"&&(Ci.setFromEuler(pu.set(0,Math.PI/2,0)),a.quaternion.copy(i).multiply(Ci),Math.abs(vi.copy(Oc).applyQuaternion(i).dot(this.eye))>.9&&(a.visible=!1)),this.axis==="XYZE"&&(Ci.setFromEuler(pu.set(0,Math.PI/2,0)),vi.copy(this.rotationAxis),a.quaternion.setFromRotationMatrix(V1.lookAt(z1,vi,Ka)),a.quaternion.multiply(Ci),a.visible=this.dragging),this.axis==="E"&&(a.visible=!1)):a.name==="START"?(a.position.copy(this.worldPositionStart),a.visible=this.dragging):a.name==="END"?(a.position.copy(this.worldPosition),a.visible=this.dragging):a.name==="DELTA"?(a.position.copy(this.worldPositionStart),a.quaternion.copy(this.worldQuaternionStart),Hr.set(1e-10,1e-10,1e-10).add(this.worldPositionStart).sub(this.worldPosition).multiplyScalar(-1),Hr.applyQuaternion(this.worldQuaternionStart.clone().invert()),a.scale.copy(Hr),a.visible=this.dragging):(a.quaternion.copy(i),this.dragging?a.position.copy(this.worldPositionStart):a.position.copy(this.worldPosition),this.axis&&(a.visible=this.axis.search(a.name)!==-1));continue}a.quaternion.copy(i),this.mode==="translate"||this.mode==="scale"?(a.name==="X"&&Math.abs(vi.copy(Rc).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="Y"&&Math.abs(vi.copy(Ka).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="Z"&&Math.abs(vi.copy(Oc).applyQuaternion(i).dot(this.eye))>.99&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="XY"&&Math.abs(vi.copy(Oc).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="YZ"&&Math.abs(vi.copy(Rc).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1),a.name==="XZ"&&Math.abs(vi.copy(Ka).applyQuaternion(i).dot(this.eye))<.2&&(a.scale.set(1e-10,1e-10,1e-10),a.visible=!1)):this.mode==="rotate"&&(fu.copy(i),vi.copy(this.eye).applyQuaternion(Ci.copy(i).invert()),a.name.search("E")!==-1&&a.quaternion.setFromRotationMatrix(V1.lookAt(this.eye,z1,Ka)),a.name==="X"&&(Ci.setFromAxisAngle(Rc,Math.atan2(-vi.y,vi.z)),Ci.multiplyQuaternions(fu,Ci),a.quaternion.copy(Ci)),a.name==="Y"&&(Ci.setFromAxisAngle(Ka,Math.atan2(vi.x,vi.z)),Ci.multiplyQuaternions(fu,Ci),a.quaternion.copy(Ci)),a.name==="Z"&&(Ci.setFromAxisAngle(Oc,Math.atan2(vi.y,vi.x)),Ci.multiplyQuaternions(fu,Ci),a.quaternion.copy(Ci))),a.visible=a.visible&&(a.name.indexOf("X")===-1||this.showX),a.visible=a.visible&&(a.name.indexOf("Y")===-1||this.showY),a.visible=a.visible&&(a.name.indexOf("Z")===-1||this.showZ),a.visible=a.visible&&(a.name.indexOf("E")===-1||this.showX&&this.showY&&this.showZ),a.material._color=a.material._color||a.material.color.clone(),a.material._opacity=a.material._opacity||a.material.opacity,a.material.color.copy(a.material._color),a.material.opacity=a.material._opacity,this.enabled&&this.axis&&(a.name===this.axis||this.axis.split("").some(function(l){return a.name===l}))&&(a.material.color.setHex(16776960),a.material.opacity=1)}super.updateMatrixWorld(e)}}lS.prototype.isTransformControlsGizmo=!0;class cS extends Be{constructor(){super(new Ul(1e5,1e5,2,2),new ps({visible:!1,wireframe:!0,side:Co,transparent:!0,opacity:.1,toneMapped:!1})),this.type="TransformControlsPlane"}updateMatrixWorld(e){let t=this.space;switch(this.position.copy(this.worldPosition),this.mode==="scale"&&(t="local"),gu.copy(Rc).applyQuaternion(t==="local"?this.worldQuaternion:Mu),Tc.copy(Ka).applyQuaternion(t==="local"?this.worldQuaternion:Mu),Cc.copy(Oc).applyQuaternion(t==="local"?this.worldQuaternion:Mu),vi.copy(Tc),this.mode){case"translate":case"scale":switch(this.axis){case"X":vi.copy(this.eye).cross(gu),ts.copy(gu).cross(vi);break;case"Y":vi.copy(this.eye).cross(Tc),ts.copy(Tc).cross(vi);break;case"Z":vi.copy(this.eye).cross(Cc),ts.copy(Cc).cross(vi);break;case"XY":ts.copy(Cc);break;case"YZ":ts.copy(gu);break;case"XZ":vi.copy(Cc),ts.copy(Tc);break;case"XYZ":case"E":ts.set(0,0,0);break}break;case"rotate":default:ts.set(0,0,0)}ts.length()===0?this.quaternion.copy(this.cameraQuaternion):(D1.lookAt(Hr.set(0,0,0),ts,vi),this.quaternion.setFromRotationMatrix(D1)),super.updateMatrixWorld(e)}}cS.prototype.isTransformControlsPlane=!0;class KQ extends ge{afterRender(){window.setTimeout(()=>{this.refresh()},100)}renderCanvas(){this.renderer.render(this.$context.sceneManager.scene,this.$context.sceneManager.viewportCamera)}initializeCamera(e){const t=new Mr(75,e.width/e.height,.1,1e3);t.position.x=1,t.position.y=3,t.position.z=1,t.lookAt(0,0,0),this.$context.sceneManager.camera=t,this.$context.sceneManager.addCamera(t),this.$context.sceneManager.setViewportCamera(t.uuid)}initializeRenderer(){const e=this.refs.$view.offsetRect();this.state.rect=e,this.initializeCamera(e),console.log(this.$context.sceneManager.viewportCamera);const t=new pi({canvas:this.refs.$view.el,antialias:!0});t.setPixelRatio(window.devicePixelRatio),t.setSize(e.width,e.height);const i=new GQ(this.$context.sceneManager.viewportCamera,this.refs.$body.el);i.addEventListener("change",()=>{this.renderCanvas()});const r=new oo,s=new Xg(30,30,8947848,"yellow");s.material.color.setHex(8947848),s.material.vertexColors=!1,r.add(s);const a=new Xg(30,6,2236962,"white");a.material.color.setHex(2236962),a.material.depthFunc=a_,a.material.vertexColors=!1,r.add(a),this.grid=r,this.$context.sceneManager.addObject(this.grid,void 0,void 0,!1);const o=new qm(16777215,2);o.position.set(1,1,1),this.$context.sceneManager.scene.add(o);const l=new Tn,c=new NQ(l);c.material.depthTest=!1,c.material.transparent=!0,c.visible=!1,this.$context.sceneManager.sceneHelpers.add(c);let h=null,d=null,u=null;const p=new oS(this.$context.sceneManager.viewportCamera,this.refs.$view.el);return this.transformControls=p,p.addEventListener("change",()=>{this.renderCanvas()}),p.addEventListener("mouseDown",()=>{const f=p.object;h=f.position.clone(),d=f.rotation.clone(),u=f.scale.clone(),i.enabled=!1}),p.addEventListener("mouseUp",()=>{const f=p.object;if(f!==void 0)switch(p.getMode()){case"translate":h.equals(f.position)||this.emit("SetPosition",f,f.position,h);break;case"rotate":d.equals(f.rotation)||this.emit("SetRotation",f,f.rotation,d);break;case"scale":u.equals(f.scale)||this.emit("SetScale",f,f.scale,u);break}i.enabled=!0}),this.$context.sceneManager.scene.add(p),t}refresh(){if(!this.renderer){const i=this.initializeRenderer();console.log(i),this.renderer=i}const e=this;function t(i){e.renderCanvas(i)}t(0)}refreshCanvasSize(){const e=this.refs.$view.offsetRect();this.state.rect=e,this.$context.sceneManager.viewportCamera.aspect=e.width/e.height,this.$context.sceneManager.viewportCamera.updateProjectionMatrix(),this.renderer.setSize(e.width,e.height),this.renderCanvas(0)}[H("objectSelected")](){this.transformControls.attach(this.$context.sceneManager.selected)}[H("objectAdded")](){this.renderCanvas(0)}[H(Oo,yn)](){console.log("resize"),this.refreshCanvasSize()}template(){return` -
          - - ${this.$injectManager.generate("render.view")} -
          - `}}class qQ extends ge{template(){return V("div",{class:"elf--page-three-container",tabIndex:"-1",ref:"$container"},V("div",{class:"page-view",ref:"$pageView"},V("div",{class:"page-lock scrollbar",ref:"$lock"},V(KQ,{ref:"$threeRenderView"}),this.$injectManager.generate("canvas.view"))))}}class ZQ extends ge{components(){return{Canvas3DView:qQ}}template(){return` -
          -
          -
          - ${W("Canvas3DView")} -
          -
          -
          - `}[H("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}}class JQ extends ge{afterRender(){this.$el.toggle(this.$config.is("editor.design.mode",Dl.DESIGN))}[Me("$el")](){return{style:{display:this.$config.is("editor.design.mode",Dl.DESIGN)?"block":"none"}}}template(){return V("div",{class:"feature-control inspector"},V("div",null,V($h,{ref:"$tab",selectedValue:"style",onchange:e=>{this.$config.set("inspector.selectedValue",e)}},V(jn,{value:"style",title:this.$i18n("inspector.tab.title.design")},V("div",{style:"display: flex; flex-direction: column;"},this.$injectManager.generate("inspector.tab.style"),V("div",{class:"empty",style:"order: 1000000;"}))),this.$injectManager.getTargetUI("inspector.tab").map(e=>{const{value:t,title:i,loadElements:r}=e.class;return V(jn,{value:t,title:i,icon:e.icon},V("div",{style:"display: flex: flex-direction: column;"},r.map(s=>Mh(s)),this.$injectManager.generate("inspector.tab."+e.value),V("div",{class:"empty",style:"order: 1000000;"})))}))))}}var hh=new Mr(3,1,.01,1e3);hh.name="Camera";hh.position.set(0,5,10);hh.lookAt(new A);class QQ{constructor(e){this.editor=e,this.camera=hh.clone(),this.scene=new rh,this.scene.name="Scene",this.sceneHelpers=new rh,this.object={},this.geometries={},this.materials={},this.textures={},this.scripts={},this.materialsRefCounter=new Map,this.mixer=new nS(this.scene),this.selected=null,this.helpers={},this.cameras={},this.viewportCamera=this.camera,this.addCamera(this.camera)}emit(e,...t){this.editor.emit(e,...t)}setScene(e){for(this.scene.uuid=e.uuid,this.scene.name=e.name,this.scene.background=e.background,this.scene.environment=e.environment,this.scene.fog=e.fog,this.scene.userData=JSON.parse(JSON.stringify(e.userData));e.children.length>0;)this.addObject(e.children[0],void 0,void 0,!1);this.emit("sceneChanged",this.scene)}addObject(e,t,i,r=!0){e.traverse(s=>{s.geometry!==void 0&&this.addGeometry(s.geometry),s.material!==void 0&&this.addMaterial(s.material),this.addCamera(s),this.addHelper(s)}),t===void 0?this.scene.add(e):(t.children.splice(i,0,e),e.parent=t),this.emit("objectAdded",e),this.emit("sceneGraphChanged")}moveObject(e,t,i){if(t===void 0&&(t=this.scene),t.add(e),i!==void 0){var r=t.children.indexOf(i);t.children.splice(r,0,e),t.children.pop()}this.emit("sceneGraphChanged")}nameObject(e,t){e.name=t,this.emit("sceneGraphChanged")}removeObject(e){e.parent!==null&&(e.traverse(t=>{this.removeCamera(t),this.removeHelper(t),t.material!==void 0&&this.removeMaterial(t.material)}),e.parent.remove(e),this.emit("objectRemoved",e),this.emit("sceneGraphChanged"))}addGeometry(e){this.geometries[e.uuid]=e}setGeometryName(e,t){e.name=t,this.emit("sceneGraphChanged")}addMaterial(e){if(Ni(e))for(var t=0,i=e.length;tt.id===e)}setMaterialName(e,t){e.name=t,this.emit("sceneGraphChanged")}addTexture(e){this.textures[e.uuid]=e}addCamera(e){e.isCamera&&(this.cameras[e.uuid]=e,this.emit("cameraAdded",e))}removeCamera(e){this.cameras[e.uuid]!==void 0&&(delete this.cameras[e.uuid],this.emit("cameraRemoved",e))}addHelper(e,t){var s;var i=new Ao(2,4,2),r=new ps({color:16711680,visible:!1});if(t===void 0){if(e.isCamera)t=new jQ(e);else if(e.isPointLight)t=new zQ(e,1);else if(e.isDirectionalLight)t=new FQ(e,1);else if(e.isSpotLight)t=new OQ(e);else if(e.isHemisphereLight)t=new DQ(e,1);else if(e.isSkinnedMesh)t=new Wg(e.skeleton.bones[0]);else if(e.isBone===!0&&((s=e.parent)==null?void 0:s.isBone)!==!0)t=new Wg(e);else return;const a=new Be(i,r);a.name="picker",a.userData.object=e,t.add(a)}this.sceneHelpers.add(t),this.helpers[e.id]=t,this.emit("helperAdded",t)}removeHelper(e){if(this.helpers[e.id]!==void 0){var t=this.helpers[e.id];t.parent.remove(t),delete this.helpers[e.id],this.emit("helperRemoved",t)}}addScript(e,t){this.scripts[e.uuid]===void 0&&(this.scripts[e.uuid]=[]),this.scripts[e.uuid].push(t),this.emit("scriptAdded",t)}removeScript(e,t){if(this.scripts[e.uuid]!==void 0){var i=this.scripts[e.uuid].indexOf(t);i!==-1&&this.scripts[e.uuid].splice(i,1),this.emit("scriptRemoved",t)}}getObjectMaterial(e,t){var i=e.material;return Ni(i)&&t!==void 0&&(i=i[t]),i}setObjectMaterial(e,t,i){Ni(e.material)&&t!==void 0?e.material[t]=i:e.material=i}setViewportCamera(e){this.viewportCamera=this.cameras[e],this.emit("viewportCameraChanged")}select(e){if(this.selected!==e){var t=null;e!==null&&(t=e.uuid),this.selected=e,this.editor.context.config.set("selected",t),this.emit("objectSelected",e)}}selectById(e){if(e===this.camera.id){this.select(this.camera);return}this.select(this.scene.getObjectById(e))}selectByUuid(e){this.scene.traverse(t=>{t.uuid===e&&this.select(t)})}deselect(){this.select(null)}focus(e){e!==void 0&&this.emit("objectFocused",e)}focusById(e){this.focus(this.scene.getObjectById(e))}clear(){this.camera.copy(hh),this.emit("cameraChanged"),this.scene.name="Scene",this.scene.userData={},this.scene.background=null,this.scene.environment=null,this.scene.fog=null;for(var e=this.scene.children;e.length>0;)this.removeObject(e[0]);this.geometries={},this.materials={},this.textures={},this.scripts={},this.materialsRefCounter.clear(),this.animations={},this.mixer.stopAllAction(),this.deselect(),this.emit("editorCleared")}async fromJSON(e){var t=new fQ,i=await t.parseAsync(e.camera);this.camera.copy(i),this.emit("cameraResetted"),this.scripts=e.scripts,this.setScene(await t.parseAsync(e.scene))}toJSON(){var e=this.scene,t=this.scripts;for(var i in t){var r=t[i];(r.length===0||e.getObjectByProperty("uuid",i)===void 0)&&delete t[i]}return{metadata:{},project:{shadows:this.editor.context.config.get("project/renderer/shadows"),shadowType:this.editor.context.config.get("project/renderer/shadowType"),vr:this.editor.context.config.get("project/vr"),physicallyCorrectLights:this.editor.context.config.get("project/renderer/physicallyCorrectLights"),toneMapping:this.editor.context.config.get("project/renderer/toneMapping"),toneMappingExposure:this.editor.context.config.get("project/renderer/toneMappingExposure")},camera:this.camera.toJSON(),scene:this.scene.toJSON(),scripts:this.scripts}}objectByUuid(e){return this.scene.getObjectByProperty("uuid",e,!0)}}var eee={command:"addCubeBox",execute:n=>{const e=new Ri(1,1,1,1,1,1),t=new ps({color:15794160}),i=new Be(e,t);i.name="Box",i.position.y=.5,n.context.sceneManager.addObject(i),n.context.sceneManager.select(i)}},tee=Object.freeze(Object.defineProperty({__proto__:null,default:eee},Symbol.toStringTag,{value:"Module"})),iee={command:"change.bodyEvent",description:"fire when bodyEvent was set",execute:function(n){const e=qe.create(n.context.config.get("bodyEvent").target);n.context.config.init("onMouseMovepageContainer",e)}},ree=Object.freeze(Object.defineProperty({__proto__:null,default:iee},Symbol.toStringTag,{value:"Module"}));const nee={"./command_list/addCubeBox.js":tee,"./command_list/editor.config.body.event.js":ree},hS={};Object.entries(nee).forEach(([n,e])=>{n=n.replace("./command_list/","").replace(".js",""),hS[n]=e.default});function see(n){n.loadCommands(hS)}var aee=[{type:"button",icon:"cube",action:n=>{n.context.commands.emit("addCubeBox")}}];function oee(n){n.registerMenu("toolbar.left",aee)}function lee(n){n.registerUI("render.view",{})}var cee=[Th,Ch,Eh,Ph,see,jh,Yb,Fb,lee,oee];class hee extends Gh{getManagers(){return{sceneManager:QQ}}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.opt.data&&this.$editor.sceneManager.fromJSON(this.opt.data)}components(){return{LayerTab:Kb,ToolBar:qb,ThreeInspector:JQ,Body3DPanel:ZQ,PopupManager:Hh,KeyboardManager:Bh,IconManager:Nh}}getPlugins(){return cee}initState(){return{leftSize:340,rightSize:280,bottomSize:0,lastBottomSize:150}}template(){return` -
          -
          -
          - ${W("ToolBar")} -
          -
          -
          - ${W("Body3DPanel")} -
          -
          - ${W("LayerTab")} -
          -
          - ${W("ThreeInspector")} -
          -
          -
          - ${W("KeyboardManager")} -
          - ${W("PopupManager")} - ${W("IconManager")} -
          - `}[Me("$el")](){return{"data-design-mode":this.$config.get("editor.design.mode")}}[Me("$splitter")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[Me("$leftArrow")](){let e=this.state.leftSize;return this.$config.false("show.left.panel")&&(e=0),{style:{left:e}}}[Me("$leftPanel")](){let e="0px",t=this.state.leftSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=`-${this.state.leftSize}px`),{style:{left:e,width:t,bottom:i}}}[Me("$rightPanel")](){let e=0,t=this.state.bottomSize;return this.$config.false("show.right.panel")&&(e=-this.state.rightSize),{style:{right:e,bottom:t}}}[Me("$rightArrow")](){let e=6,t=this.state.bottomSize;return this.$config.true("show.right.panel")&&(e=this.state.rightSize+6),{style:{right:e,bottom:t}}}[Me("$bodyPanel")](){let e=this.state.leftSize,t=this.state.rightSize,i=this.state.bottomSize;return this.$config.false("show.left.panel")&&(e=0),this.$config.false("show.right.panel")&&(t=0),{style:{left:e,right:t,bottom:i}}}[Ke("$splitter")+at("moveSplitter")+ct("moveEndSplitter")](){this.minSize=this.$theme("left_size"),this.maxSize=this.$theme("left_max_size"),this.leftSize=y.parse(this.refs.$splitter.css("left")).value,this.refs.$splitter.addClass("selected")}moveSplitter(e){this.setState({leftSize:Math.max(Math.min(this.leftSize+e,this.maxSize),this.minSize)})}moveEndSplitter(){this.refs.$splitter.removeClass("selected")}refresh(){this.bindData("$el"),this.bindData("$splitter"),this.bindData("$headerPanel"),this.bindData("$leftPanel"),this.bindData("$rightPanel"),this.bindData("$toggleRightButton"),this.bindData("$toggleLeftButton"),this.bindData("$bodyPanel"),this.bindData("$footerPanel"),this.emit("resizeEditor")}[qt("show.left.panel")](){this.refresh(),this.nextTick(()=>{this.emit(yn)})}[qt("show.right.panel")](){this.refresh(),this.nextTick(()=>{this.emit(yn)})}[qt("editor.design.mode")](){this.bindData("$el")}[an("$middle")+wt](){}[sn("$middle")+wt](){}[H("toggle.fullscreen")](){this.$el.toggleFullscreen()}[H("getLayoutElement")](e){Ye(e)&&e(this.refs)}}var dee=[mb,Th,Ch,Eh,Cb,Bb,Ph,jh,gm,Ib,Hb,Rb,Ub,Wb,Ab,zb,Ob,Vb,Db,kb,Eb];class uee extends ge{components(){return{CanvasView:Qb,VerticalRuler:t_,HorizontalRuler:e_,PageSubEditor:Zg}}template(){return` -
          -
          - ${W("PageSubEditor",{ref:"subeditor"})} -
          -
          -
          - ${W("CanvasView",{ref:"canvas"})} -
          -
          -
          - `}[Me("$el")](){return{class:"elf--body-panel"}}[qt("show.ruler")](){this.refresh()}[H("bodypanel.toggle.fullscreen")](){this.refs.$el.toggleFullscreen()}[qt("editor.cursor")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$container")}[qt("editor.cursor.args")](){this.state.cursor=this.$config.get("editor.cursor"),this.state.cursorArgs=this.$config.get("editor.cursor.args"),this.bindData("$area")}async[Me("$area")](){return{style:{cursor:await this.$context.cursorManager.load(this.state.cursor,...this.state.cursorArgs||[])}}}}class pee extends Gh{initialize(){super.initialize(),this.$context.pathkit.load()}getManagers(){return{snapManager:Qx,selection:Jx,segmentSelection:Zx,history:Wx,modelManager:Yx,lockManager:Xx,visibleManager:eb,clipboard:Ux,pathkit:qx}}components(){return{PreviewBodyPanel:uee,PopupManager:Hh,KeyboardManager:Bh,IconManager:Nh}}getPlugins(){return dee}template(){return` -
          -
          -
          -
          - ${W("PreviewBodyPanel")} -
          -
          - ${W("KeyboardManager")} -
          - ${W("PopupManager")} - ${W("IconManager")} -
          - `}afterRender(){super.afterRender(),this.$config.init("editor.layout.elements",this.refs),this.$commands.emit("load.json",this.opt.data)}[an("$middle")+wt](){}[sn("$middle")+wt](){}[H("toggle.fullscreen")](){this.$el.toggleFullscreen()}[H("getLayoutElement")](e){Ye(e)&&e(this.refs)}}function fee(n){return wh(LW,n)}function mee(n){return wh(hee,n)}function vee(n){return wh(Rz,n)}function yee(n){return wh(Uz,n)}function xee(n){return wh(pee,n)}export{Me as B,ne as C,It as D,ge as E,me as L,mp as O,H as S,ai as U,xee as a,yee as b,fee as c,mee as d,V as e,W as f,vee as g,ie as i}; diff --git a/docs/assets/threeeditor.ed4bcd7c.js b/docs/assets/threeeditor.ed4bcd7c.js deleted file mode 100644 index 4725a1168..000000000 --- a/docs/assets/threeeditor.ed4bcd7c.js +++ /dev/null @@ -1 +0,0 @@ -import{d as i}from"./index.e23f8a81.js";function e(){return["app"].map(t=>i({container:document.getElementById(t),config:{"editor.theme":"light"},plugins:[]}))}window.EasylogicEditor=e(); diff --git a/docs/assets/whiteboard.f49881ff.js b/docs/assets/whiteboard.f49881ff.js deleted file mode 100644 index bb5809b6b..000000000 --- a/docs/assets/whiteboard.f49881ff.js +++ /dev/null @@ -1 +0,0 @@ -import{a as e}from"./index.e23f8a81.js";function r(){return["app"].map(t=>e({container:document.getElementById(t),config:{"debug.mode":!0,"editor.theme":"light","show.ruler":!1},plugins:[]}))}window.elfEditor=r(); diff --git a/docs/blank.html b/docs/blank.html deleted file mode 100644 index a8df51cfe..000000000 --- a/docs/blank.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - -
          - - - diff --git a/docs/dataeditor.html b/docs/dataeditor.html deleted file mode 100644 index 7f7db8cd0..000000000 --- a/docs/dataeditor.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - -
          - - - diff --git a/docs/index.html b/docs/index.html index e5a86ea66..adfa68e6d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,9 +16,8 @@ - - - + +
          diff --git a/docs/whiteboard.html b/docs/whiteboard.html deleted file mode 100644 index 8d229ee18..000000000 --- a/docs/whiteboard.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - -
          - - - diff --git a/package.json b/package.json index e4273d115..ac919fd35 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "open-color": "^1.9.1", "pathkit-wasm": "^0.7.0", "svg-arc-to-cubic-bezier": "^3.2.0", - "three": "^0.139.2", "yorkie-js-sdk": "^0.1.11" }, "devDependencies": { diff --git a/pagebuilder.html b/pagebuilder.html deleted file mode 100644 index 9d7d9374c..000000000 --- a/pagebuilder.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - - - - - - -
          - - - diff --git a/src/apps/blankeditor/area/BlankInspector.jsx b/src/apps/blankeditor/area/BlankInspector.jsx index c69101635..555f2fdba 100644 --- a/src/apps/blankeditor/area/BlankInspector.jsx +++ b/src/apps/blankeditor/area/BlankInspector.jsx @@ -1,24 +1,9 @@ -import { BIND, createElement } from "sapa"; +import { createElement } from "sapa"; -import { DesignMode } from "elf/editor/types/editor"; import { EditorElement } from "elf/editor/ui/common/EditorElement"; import { TabPanel, Tabs } from "elf/ui"; export default class BlankInspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); - } - - [BIND("$el")]() { - return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) - ? "block" - : "none", - }, - }; - } - template() { return (
          @@ -32,7 +17,6 @@ export default class BlankInspector extends EditorElement { > {this.$injectManager.getTargetUI("inspector.tab").map((it) => { const { value, title, icon, loadElements = [] } = it.class; - return (
          diff --git a/src/apps/blankeditor/area/BlankStatusbar.jsx b/src/apps/blankeditor/area/BlankStatusbar.jsx new file mode 100644 index 000000000..1507944b9 --- /dev/null +++ b/src/apps/blankeditor/area/BlankStatusbar.jsx @@ -0,0 +1,13 @@ +import "./BlankStatusbar.scss"; + +import { EditorElement } from "elf/editor/ui/common/EditorElement"; + +export default class BlankStatusbar extends EditorElement { + template() { + return ( +
          + ${this.$injectManager.generate("statusbar")} +
          + ); + } +} diff --git a/src/apps/blankeditor/area/BlankStatusbar.scss b/src/apps/blankeditor/area/BlankStatusbar.scss new file mode 100644 index 000000000..e9199a8e2 --- /dev/null +++ b/src/apps/blankeditor/area/BlankStatusbar.scss @@ -0,0 +1,7 @@ +.elf--status-bar { + background-color: var(--elf--selected-color); + display: flex; + width: 100%; + position: relative; + height: 100%; +} \ No newline at end of file diff --git a/src/apps/blankeditor/area/tool-bar/BlankToolBar.js b/src/apps/blankeditor/area/tool-bar/BlankToolBar.js index 5856bb1f6..352a2bd0a 100644 --- a/src/apps/blankeditor/area/tool-bar/BlankToolBar.js +++ b/src/apps/blankeditor/area/tool-bar/BlankToolBar.js @@ -20,6 +20,12 @@ export default class BlankToolBar extends EditorElement { template() { return /*html*/ `
          +
          + ${createComponent("ToolBarRenderer", { + items: this.$menu.getTargetMenu("toolbar.logo"), + })} +
          +
          ${createComponent("ToolBarRenderer", { items: this.$menu.getTargetMenu("toolbar.left"), @@ -45,6 +51,7 @@ export default class BlankToolBar extends EditorElement { )} ${createComponent("ThemeChanger")}
          +
          `; } diff --git a/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss b/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss index bb4637cfd..c2ac211df 100644 --- a/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss +++ b/src/apps/blankeditor/area/tool-bar/BlankToolBar.scss @@ -3,11 +3,26 @@ flex-direction: row; justify-content: space-between; height: 100%; - background-color: var(--elf--header-background-color); + background-color: var(--elf--toolbar-background-color); color: var(--elf--selected-font-color); - > * { + > .logo-area { + flex: none; + width: 60px; + // background-color: yellow; + // padding: 10px; + height: 100%; + + > * { + height: 100%; + } + } + + > .toolbar-area { + flex: 1 1 auto; display: flex; + flex-direction: row; + justify-content: space-between; > * { // display: inline-block; min-height: 48px !important; diff --git a/src/apps/blankeditor/index.jsx b/src/apps/blankeditor/index.jsx index d7d9c447a..da8ea800f 100644 --- a/src/apps/blankeditor/index.jsx +++ b/src/apps/blankeditor/index.jsx @@ -1,12 +1,14 @@ -import { POINTERSTART, BIND, SUBSCRIBE, CONFIG } from "sapa"; +import { SUBSCRIBE } from "sapa"; import BlankBodyPanel from "./area/BlankBodyPanel"; import BlankInspector from "./area/BlankInspector"; import BlankLayerTab from "./area/BlankLayerTab"; +// import BlankStatusbar from "./area/BlankStatusbar"; import BlankToolBar from "./area/tool-bar/BlankToolBar"; import "./layout.scss"; import blankEditorPlugins from "./plugins/blank-editor-plugins"; +import { ContextMenuManager } from "apps/common/ContextMenuManager"; import { IconManager } from "apps/common/IconManager"; import { KeyboardManager } from "apps/common/KeyboardManager"; import { BaseLayout } from "apps/common/layout/BaseLayout"; @@ -15,22 +17,13 @@ import { DefaultLayoutItem, } from "apps/common/layout/DefaultLayout"; import { PopupManager } from "apps/common/PopupManager"; -import { - END, - MOVE, - TOGGLE_FULLSCREEN, - RESIZE_CANVAS, -} from "elf/editor/types/event"; -import { Length } from "elf/editor/unit/Length"; +import { TOGGLE_FULLSCREEN } from "elf/editor/types/event"; export class BlankEditor extends BaseLayout { afterRender() { super.afterRender(); this.$config.init("editor.layout.elements", this.refs); - - // 데이타 로드 - // this.loadDataFromJSON(); } /** @@ -48,146 +41,83 @@ export class BlankEditor extends BaseLayout { }; } - template() { + getTopPanel() { return ( -
          - - - - - - - - - - - - - - - - - - - - - -
          + + + ); - // return ( - //
          - //
          - //
          - // {createComponent("BlankToolBar")} - //
          - //
          - //
          - // {createComponent("BlankLayerTab")} - //
          - //
          - // {createComponent("BlankBodyPanel")} - //
          - //
          - // {createComponent("BlankInspector")} - //
          - //
          - //
          - // {createComponent("KeyboardManager")} - //
          - // {createComponent("PopupManager")} - // {createComponent("IconManager")} - //
          - // ); } - [BIND("$splitter")]() { - let left = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left = 0; - } - - return { - style: { - left: left, - }, - }; + getLeftPanel() { + return ( + + + + ); } - [BIND("$leftPanel")]() { - let width = this.state.leftSize; - - return { - style: { - width, - display: this.$config.true("show.left.panel") ? "block" : "none", - }, - }; + getRightPanel() { + return ( + + + + ); } - [BIND("$rightPanel")]() { - return { - style: { - display: this.$config.true("show.right.panel") ? "block" : "none", - }, - }; + getBodyPanel() { + return ( + + + + ); } - [POINTERSTART("$splitter") + - MOVE("moveSplitter") + - END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); + getInnerPanel() { + return ( + + + + ); } - moveSplitter(dx) { - this.setState({ - leftSize: Math.max( - Math.min(this.leftSize + dx, this.maxSize), - this.minSize - ), - }); + getOuterPanel() { + return ( + + + + + + ); } - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); + template() { + return ( +
          + + {this.getTopPanel()} + {this.getLeftPanel()} + {this.getRightPanel()} + {this.getBodyPanel()} + {this.getInnerPanel()} + {this.getOuterPanel()} + +
          + ); } refresh() { - this.bindData("$splitter"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); + super.refresh(); this.emit("resizeEditor"); } - [CONFIG("show.left.panel")]() { - this.children.$layout.setOptions({ - showLeftPanel: this.$config.get("show.left.panel"), - }); - - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - - [CONFIG("show.right.panel")]() { - this.children.$layout.setOptions({ - showLeftPanel: this.$config.get("show.right.panel"), - }); - - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - [SUBSCRIBE(TOGGLE_FULLSCREEN)]() { this.$el.toggleFullscreen(); } diff --git a/src/apps/blankeditor/layout.scss b/src/apps/blankeditor/layout.scss index 8b7d19d7f..012d39d6a 100644 --- a/src/apps/blankeditor/layout.scss +++ b/src/apps/blankeditor/layout.scss @@ -1,128 +1,9 @@ -$pointer-color: #4075d6; -$top-size: 48px; -$tool-size: 0px; -$left-size: 340px; -$left-layer-panel: 70px; -$left-page-size: 70px; -$toggle-left-size: 80px; -$right-size: 280px; -$timeline-animation-size: 200px; -$timeline-property-size: 270px; -$timeline-header-size: 40px; -$timeline-size: 300px; -$show-timeline-animation: all 0.05s linear; -$footer-height: 0px; -$status-bar-height: 0px; -// base -$range-thumb-width: 12px; -$range-thumb-height: 12px; -$range-track-height: 2px; -$range-thumb-top: -5px; -$range-thumb-border-radius: 20px; - .blank-editor { - &[data-design-mode="item"] { - .layout-middle { - bottom: 0px !important; - } - - .elf--status-bar { - display: none !important; - } - } - - .layout-main { - position: absolute; - left: 0px; - top: 0px; - right: 0px; - bottom: 0px; - display: flex; - background-color: var(--elf--header-background-color); - flex-direction: column; - - .layout-top { - height: $top-size; - // border-bottom: 1px solid var(--elf--border-color); - box-sizing: border-box; - z-index: 10000; - // background-color: var(--elf--background-color); - flex: none; - position: relative; - // padding: 0px 12px; - } - - .layout-middle { - position: relative; - flex : 1 1 auto; - box-sizing: border-box; - overflow: hidden; - background-color: var(--elf--background-color); - // background-image: linear-gradient(45deg, rgb(0, 29, 72) 0%, var(--elf--background-color) 100%); - display: flex; - flex-direction: row; - - > .splitter { - position: absolute; - left: $left-size; - width: 4px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - z-index: 1; - - &:hover, - &.selected { - background-color: var(--elf--selected-color); - } - } - - > .toggleLeft { - left: $left-size; - } - - > .toggleRight { - right: $right-size; - } - - .layout-left { - width: $left-size; - display: block; - order: 1; - flex: none; - - display: flex; - flex-direction: column; - border-right: 1px solid var(--elf--layout-border-color); - box-sizing: border-box; - position: relative; - } + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; - .layout-right { - width: $right-size; - display: block; - z-index: 100; - order: 3; - flex: none; - display: flex; - flex-direction: column; - overflow: auto; - // transition: bottom 0.05s linear; - border-left: 1px solid var(--elf--layout-border-color); - position: relative; - } - .layout-body { - order: 2; - height: 100%; - position: relative; - display: block; - flex: 1 1 auto; - // transition: bottom 0.05s linear - // border: 1px solid var(--elf--border-color); - // border-radius: 4px; - } - } - } + background-color: var(--elf--background-color); } diff --git a/src/apps/common/area/Inspector.jsx b/src/apps/common/area/Inspector.jsx deleted file mode 100644 index 28c488f3c..000000000 --- a/src/apps/common/area/Inspector.jsx +++ /dev/null @@ -1,82 +0,0 @@ -import { BIND, createElement } from "sapa"; - -import { DesignMode } from "elf/editor/types/editor"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; -import { TabPanel, Tabs } from "elf/ui"; - -export default class Inspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); - } - - [BIND("$el")]() { - return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) - ? "block" - : "none", - }, - }; - } - - template() { - return ( -
          -
          - { - this.$config.set("inspector.selectedValue", value); - }} - > - -
          - {this.$injectManager.generate("inspector.tab.style", true)} -
          -
          -           - -
          - {this.$injectManager.generate("inspector.tab.transition", true)} -
          -
          -           - -
          - {this.$injectManager.generate("inspector.tab.code", true)} -
          -
          -           - - {this.$injectManager.getTargetUI("inspector.tab").map((it) => { - const { value, title, loadElements } = it.class; - - return ( - -
          - {loadElements.map((element) => createElement(element))} - {this.$injectManager.generate( - "inspector.tab." + it.value, - true - )} -
          -
          -           - ); - })} -           -
          -
          - ); - } -} diff --git a/src/apps/common/area/LayerTab.js b/src/apps/common/area/LayerTab.js deleted file mode 100644 index d2fdee643..000000000 --- a/src/apps/common/area/LayerTab.js +++ /dev/null @@ -1,116 +0,0 @@ -import { CLICK, createComponent } from "sapa"; - -import AssetItems from "./object-list/AssetItems"; -import CustomAssets from "./object-list/CustomAssets"; -import LibraryItems from "./object-list/LibraryItems"; -import ObjectItems from "./object-list/ObjectItems"; - -import icon, { iconUse } from "elf/editor/icon/icon"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; - -export default class LayerTab extends EditorElement { - components() { - return { - AssetItems, - LibraryItems, - CustomAssets, - ObjectItems, - }; - } - - initState() { - return { - selectedIndexValue: 2, - }; - } - - template() { - return /*html*/ ` -
          -
          -
          -
          - -
          -
          - -
          -
          - -
          -
          - -
          - - ${this.$injectManager.getTargetUI("leftbar.tab").map((it) => { - const { value, title } = it.class; - - let iconString = it.class.icon; - if (icon[it.class.icon]) { - iconString = iconUse(it.class.icon); - } - return /*html*/ ` -
          - -
          - `; - })} - -
          -
          -
          - ${createComponent("ObjectItems")} -
          -
          - ${createComponent("LibraryItems")} -
          -
          - ${createComponent("AssetItems")} -
          - ${createComponent("GradientAssetsProperty")} - ${createComponent("PatternAssetsProperty")} - ${createComponent("ImageAssetsProperty")} - ${createComponent("VideoAssetsProperty")} - ${/*createComponent("SVGFilterAssetsProperty")*/ ""} -
          -
          -
          - ${createComponent("CustomAssets")} -
          - ${this.$injectManager.getTargetUI("leftbar.tab").map((it) => { - const { value } = it.class; - return /*html*/ ` -
          - ${this.$injectManager.generate(`leftbar.tab.${value}`)} -
          - `; - })} -
          -
          -
          - `; - } - - [CLICK("$header .tab-item:not(.extra-item)")](e) { - var selectedIndexValue = e.$dt.attr("data-value"); - if (this.state.selectedIndexValue === selectedIndexValue) { - return; - } - - this.$el - .$$(`[data-value="${this.state.selectedIndexValue}"]`) - .forEach((it) => it.removeClass("selected")); - this.$el - .$$(`[data-value="${selectedIndexValue}"]`) - .forEach((it) => it.addClass("selected")); - this.setState({ selectedIndexValue }, false); - } -} diff --git a/src/apps/common/area/tool-bar/ToolBar.js b/src/apps/common/area/tool-bar/ToolBar.js deleted file mode 100644 index f0777a893..000000000 --- a/src/apps/common/area/tool-bar/ToolBar.js +++ /dev/null @@ -1,161 +0,0 @@ -import { CONFIG, createComponent } from "sapa"; - -// import ToolMenu from "./ToolMenu"; - -import LanguageSelector from "../status-bar/LanguageSelector"; -import LayoutSelector from "../status-bar/LayoutSelector"; -import "./ToolBar.scss"; -import ToolBarRenderer from "./ToolBarRenderer"; - -import { Language } from "elf/editor/types/editor"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; -import Download from "elf/editor/ui/menu-items/Download"; -import ExportView from "elf/editor/ui/menu-items/ExportView"; -import Outline from "elf/editor/ui/menu-items/Outline"; -import Redo from "elf/editor/ui/menu-items/Redo"; -import Save from "elf/editor/ui/menu-items/Save"; -import ThemeChanger from "elf/editor/ui/menu-items/ThemeChanger"; -import Undo from "elf/editor/ui/menu-items/Undo"; -import { DropdownMenu } from "elf/editor/ui/view/DropdownMenu"; - -export class ToolBar extends EditorElement { - initState() { - return { - items: [ - { - type: "dropdown", - style: { - padding: "12px 0px 12px 12px", - }, - icon: `
          `, - items: [ - { - title: "menu.item.fullscreen.title", - command: "toggle.fullscreen", - shortcut: "ALT+/", - }, - { - title: "menu.item.shortcuts.title", - command: "showShortcutWindow", - }, - "-", - { title: "menu.item.export.title", command: "showExportView" }, - { - title: "menu.item.export.title", - command: "showEmbedEditorWindow", - }, - { title: "menu.item.download.title", command: "downloadJSON" }, - { - title: "menu.item.save.title", - command: "saveJSON", - nextTick: () => { - this.emit( - "notify", - "alert", - "Save", - "Save the content on localStorage", - 2000 - ); - }, - }, - { - title: "menu.item.language.title", - items: [ - { - title: "English", - command: "setLocale", - args: [Language.EN], - checked: (editor) => editor.locale === Language.EN, - }, - { - title: "Français", - command: "setLocale", - args: [Language.FR], - checked: (editor) => editor.locale === Language.FR, - }, - { - title: "Korean", - command: "setLocale", - args: [Language.KO], - checked: (editor) => editor.locale === Language.KO, - }, - ], - }, - "-", - { - title: "EasyLogic Studio", - items: [ - { - type: "link", - title: "Github", - href: "https://github.com/easylogic/editor", - }, - { - type: "link", - title: "Learn", - href: "https://www.easylogic.studio", - }, - ], - }, - ], - }, - ], - }; - } - - components() { - return { - ToolBarRenderer, - LayoutSelector, - LanguageSelector, - ThemeChanger, - Outline, - ExportView, - Download, - Save, - Undo, - Redo, - DropdownMenu, - }; - } - template() { - return /*html*/ ` -
          -
          - ${createComponent("ToolBarRenderer", { - items: this.state.items, - })} -
          -
          -
          - ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.left"), - })} - ${this.$injectManager.generate( - "toolbar.left" - )} -
          -
          - ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.center"), - })} - ${this.$injectManager.generate( - "toolbar.center" - )} -
          -
          - ${createComponent("ToolBarRenderer", { - items: this.$menu.getTargetMenu("toolbar.right"), - })} - ${this.$injectManager.generate("toolbar.right")} - ${createComponent("ThemeChanger")} -
          -
          -
          - `; - } - - [CONFIG("language.locale")]() { - this.refresh(); - } -} diff --git a/src/apps/common/area/tool-bar/ToolBar.scss b/src/apps/common/area/tool-bar/ToolBar.scss deleted file mode 100644 index 430c6a81e..000000000 --- a/src/apps/common/area/tool-bar/ToolBar.scss +++ /dev/null @@ -1,97 +0,0 @@ -.elf--tool-bar { - display: flex; - flex-direction: row; - // justify-content: space-between; - height: 100%; - background-color: var(--elf--header-background-color); - color: var(--elf--selected-font-color); - - - > .logo-area { - flex: none; - width: 60px; - // background-color: yellow; - // padding: 10px; - height: 100%; - - > * { - height: 100%; - } - } - - > .toolbar-area { - flex: 1 1 auto; - display: flex; - flex-direction: row; - > * { - flex: 1 1 auto; - - &.left { - flex-direction: row; - justify-content: flex-start; - } - - &.right { - flex-direction: row; - justify-content: flex-end; - padding-right: 20px; - } - - // display: inline-block; - min-height: 48px !important; - min-width: 48px !important; - vertical-align: middle; - padding: 0px; - display: inline-flex; - justify-content: center; - align-items: center; - } - - > .dropdown-menu > button { - height: 48px !important; - width: 48px !important; - } - - - > button, > .dropdown-menu > button { - display: flex; - align-items: center; - justify-content: center; - position: relative; - - stroke: var(--elf--selected-font-color); - fill: transparent !important; - stroke-width: 1 !important; - - - .icon { - svg { - width: 20px; - height: 20px; - - stroke: var(--elf--selected-font-color); - fill: transparent !important; - stroke-width: 1 !important; - } - } - - &.elf--menu-item { - &.selected { - background-color: var(--elf--selected-color-2); - } - - &:hover:not(.selected):not([checked]) { - background-color: black; - - } - } - } - - > .elf--logo-area { - &:hover { - background-color: black; - } - } - } - -} \ No newline at end of file diff --git a/src/apps/common/area/tool-bar/ToolbarMenuItem.scss b/src/apps/common/area/tool-bar/ToolbarMenuItem.scss index 5862206d9..02a32bf8f 100644 --- a/src/apps/common/area/tool-bar/ToolbarMenuItem.scss +++ b/src/apps/common/area/tool-bar/ToolbarMenuItem.scss @@ -1,8 +1,9 @@ .elf--toolbar-menu-item { height: 100%; - padding: 10px !important; + padding: 0px 10px !important; width: auto; + // min-width: 48px; display: flex; align-items: center; justify-content: center; @@ -15,8 +16,8 @@ display: inline-block; svg { - width: 24px; - height: 24px; + width: 100%; + height: 100%; stroke: var(--elf--selected-font-color); } diff --git a/src/apps/common/layout/DefaultLayout.jsx b/src/apps/common/layout/DefaultLayout.jsx index f8ac98d1a..efc8e434d 100644 --- a/src/apps/common/layout/DefaultLayout.jsx +++ b/src/apps/common/layout/DefaultLayout.jsx @@ -16,17 +16,15 @@ const DefaultLayoutDirection = { OUTER: "outer", }; -export class DefaultLayoutItem extends EditorElement {} - -export class DefaultLayout extends EditorElement { - checkProps(props) { - return props; +export class DefaultLayoutItem extends EditorElement { + get size() { + return this.props.size; } +} - afterRender() { - super.afterRender(); - - this.$config.init("editor.layout.elements", this.refs); +export class DefaultLayout extends EditorElement { + getLayoutElements() { + return this.refs; } initState() { @@ -46,7 +44,7 @@ export class DefaultLayout extends EditorElement { rightSize: isNotUndefined(this.props.rightSize) ? Number(this.props.rightSize) : 280, - bottomSize: this.props.bottomSize || 0, + bottomSize: this.props.bottomSize || 20, lastBottomSize: this.props.lastBottomSize || 150, minSize: isNotUndefined(this.props.minSize) ? Boolean(this.props.minSize) @@ -65,7 +63,7 @@ export class DefaultLayout extends EditorElement { const top = this.getDirection(DefaultLayoutDirection.TOP); const left = this.getDirection(DefaultLayoutDirection.LEFT); const right = this.getDirection(DefaultLayoutDirection.RIGHT); - // const bottom = this.getDirection(DefaultLayoutDirection.BOTTOM); + const bottom = this.getDirection(DefaultLayoutDirection.BOTTOM); const body = this.getDirection(DefaultLayoutDirection.BODY); const inner = this.getDirection(DefaultLayoutDirection.INNER); const outer = this.getDirection(DefaultLayoutDirection.OUTER); @@ -101,6 +99,13 @@ export class DefaultLayout extends EditorElement { )}
          + {bottom ? ( +
          + {bottom} +
          + ) : ( + "" + )} {inner}
          {outer} @@ -146,28 +151,6 @@ export class DefaultLayout extends EditorElement { }; } - // [BIND("$bodyPanel")]() { - // let left = this.state.leftSize; - // let right = this.state.rightSize; - // let bottom = this.state.bottomSize; - - // if (!this.state.showLeftPanel) { - // left = 0; - // } - - // if (!this.state.showRightPanel) { - // right = 0; - // } - - // return { - // style: { - // left: Length.px(left), - // right: Length.px(right), - // bottom: Length.px(bottom), - // }, - // }; - // } - setOptions(obj = {}) { this.setState(obj); } @@ -191,12 +174,4 @@ export class DefaultLayout extends EditorElement { moveEndSplitter() { this.refs.$splitter.removeClass("selected"); } - - refresh() { - this.bindData("$splitter"); - // this.bindData("$headerPanel"); - this.bindData("$leftPanel"); - // this.bindData("$rightPanel"); - // this.bindData("$bodyPanel"); - } } diff --git a/src/apps/common/layout/DefaultLayout.scss b/src/apps/common/layout/DefaultLayout.scss index aab03823b..b02a5928f 100644 --- a/src/apps/common/layout/DefaultLayout.scss +++ b/src/apps/common/layout/DefaultLayout.scss @@ -1,4 +1,5 @@ $top-size: 48px; +$bottom-size: 20px; $tool-size: 0px; $left-size: 340px; $left-layer-panel: 70px; @@ -40,6 +41,15 @@ $status-bar-height: 0px; position: relative; } + .layout-bottom { + height: $bottom-size; + box-sizing: border-box; + z-index: 10000; + flex: none; + position: relative; + display: flex; + } + .layout-middle { flex: 1 1 auto; position: relative; @@ -56,7 +66,7 @@ $status-bar-height: 0px; bottom: 0px; cursor: ew-resize; z-index: 1; - transition: background-color 0.05s linear; + transition: all 0.05s linear; &:hover, &.selected { diff --git a/src/apps/dataeditor/index.js b/src/apps/dataeditor/index.js deleted file mode 100644 index b85a02e30..000000000 --- a/src/apps/dataeditor/index.js +++ /dev/null @@ -1,129 +0,0 @@ -import { - BIND, - CLICK, - LOAD, - SUBSCRIBE_SELF, - isFunction, - createComponent, - isBoolean, -} from "sapa"; - -import "./layout.scss"; -import dataEditorPlugins from "./plugins/data-editor-plugins"; - -import { IconManager } from "apps/common/IconManager"; -import { KeyboardManager } from "apps/common/KeyboardManager"; -import { BaseLayout } from "apps/common/layout/BaseLayout"; -import { PopupManager } from "apps/common/PopupManager"; -import { Editor } from "elf/editor/manager/Editor"; - -/** - * Editor 가 가지고 있는 기본 몇가지 매니저를 재구성 해야할 듯 - * - * * ShortcutManager - * * CommandManager - * - */ - -export class DataEditor extends BaseLayout { - components() { - return { - PopupManager, - KeyboardManager, - IconManager, - }; - } - - /** - * - * @protected - * @returns {function[]} - */ - getPlugins() { - return dataEditorPlugins; - } - - createEditorInstance() { - return new Editor({ - ignoreManagers: ["ShortCutManager"], - }); - } - - afterRender() { - super.afterRender(); - - this.$config.init("editor.layout.elements", this.refs); - } - - initState() { - return { - inspector: this.props.inspector || [], - onChange: this.props.onChange || (() => true), - open: - isBoolean(this.props.open) && this.props.open === false ? false : true, - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150, - }; - } - - template() { - return /*html*/ ` -
          -
          -
          -
          Close Controls
          -
          - - ${createComponent("KeyboardManager")} - ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
          - `; - } - - [CLICK("$close")]() { - this.setState( - { - open: !this.state.open, - }, - false - ); - - this.bindData("$main"); - this.bindData("$close"); - } - - [BIND("$main")]() { - return { - "data-open-status": this.state.open, - }; - } - - [BIND("$close")]() { - return { - text: this.state.open ? "Close Controls" : "Open Controls", - }; - } - - [LOAD("$body")]() { - const inspector = this.state.inspector; - - return createComponent("ComponentEditor", { - ref: "$comp", - inspector, - onchange: "changeComponent", - }); - } - - getValue() { - return this.children.$comp.getValue(); - } - - [SUBSCRIBE_SELF("changeComponent")](key, value) { - if (isFunction(this.state.onChange)) { - this.emit(this.state.onChange, this, key, value); - } - } -} diff --git a/src/apps/dataeditor/layout.scss b/src/apps/dataeditor/layout.scss deleted file mode 100644 index eb23f0c07..000000000 --- a/src/apps/dataeditor/layout.scss +++ /dev/null @@ -1,46 +0,0 @@ -.dataeditor { - position: absolute; - left: auto; - bottom: auto; - right: 0px; - top: 0px; - width: 300px; - height: auto; - display: inline-block; - overflow: visible; - user-select: none; - - .layout-main { - position: relative; - width: 100%; - height: 100%; - min-height: 10px; - background-color: var(--elf--background-color); - border:1px solid var(--elf--border-color); - // padding: 10px; - display: flex; - flex-direction: column; - color: var(--elf--font-color); - - &[data-open-status="true"] { - .control-view { - display: block; - } - } - - .control-view { - margin-top: 5px; - display: none; - padding: 0px 5px; - border-bottom: 1px solid var(--elf--border-color); - } - - > .close { - padding: 5px 0px; - text-align: center; - cursor: pointer; - color: var(--elf--font-color); - } - } - -} diff --git a/src/apps/dataeditor/plugins/data-editor-plugins.js b/src/apps/dataeditor/plugins/data-editor-plugins.js deleted file mode 100644 index e5c918e55..000000000 --- a/src/apps/dataeditor/plugins/data-editor-plugins.js +++ /dev/null @@ -1,19 +0,0 @@ -import baseEditor from "plugins/base-editor"; -import color from "plugins/color"; -import defaultConfigs from "plugins/default-configs"; -import defaultIcons from "plugins/default-icons"; -import defaultMessages from "plugins/default-messages"; -// import gradient from "apps/designeditor/plugins/gradient"; -import propertyEditor from "plugins/property-editor"; - -export default [ - defaultConfigs, - defaultIcons, - defaultMessages, - - // common editor - baseEditor, - propertyEditor, - color, - // gradient, -]; diff --git a/src/apps/designeditor/commands/command_list/addBackgroundImageGradient.js b/src/apps/designeditor/commands/command_list/addBackgroundImageGradient.js index d1e5fb4c3..df8c3d925 100644 --- a/src/apps/designeditor/commands/command_list/addBackgroundImageGradient.js +++ b/src/apps/designeditor/commands/command_list/addBackgroundImageGradient.js @@ -19,7 +19,7 @@ export default { ); itemsMap[item.id] = { - "background-image": BackgroundImage.join(images), + backgroundImage: BackgroundImage.join(images), }; }); diff --git a/src/apps/designeditor/index.js b/src/apps/designeditor/index.js deleted file mode 100644 index 7a1046395..000000000 --- a/src/apps/designeditor/index.js +++ /dev/null @@ -1,308 +0,0 @@ -import { - DRAGOVER, - DROP, - PREVENT, - POINTERSTART, - BIND, - SUBSCRIBE, - CONFIG, - isFunction, - createComponent, -} from "sapa"; - -import "./layout.scss"; -import { ClipboardManager } from "./managers/ClipboardManager"; -import { HistoryManager } from "./managers/HistoryManager"; -import { LockManager } from "./managers/LockManager"; -import { ModelManager } from "./managers/ModelManager"; -import { PathKitManager } from "./managers/PathKitManager"; -import { SegmentSelectionManager } from "./managers/SegmentSelectionManager"; -import { SelectionManager } from "./managers/SelectionManager"; -import { SnapManager } from "./managers/SnapManager"; -import { TimelineSelectionManager } from "./managers/TimelineSelectionManager"; -import { VisibleManager } from "./managers/VisibleManager"; -import designEditorPlugins from "./plugins/design-editor-plugins"; - -import Inspector from "apps/common/area/Inspector"; -import LayerTab from "apps/common/area/LayerTab"; -import SwitchLeftPanel from "apps/common/area/status-bar/SwitchLeftPanel"; -import SwitchRightPanel from "apps/common/area/status-bar/SwitchRightPanel"; -import { ToolBar } from "apps/common/area/tool-bar/ToolBar"; -import BodyPanel from "apps/common/BodyPanel"; -import { ContextMenuManager } from "apps/common/ContextMenuManager"; -import { IconManager } from "apps/common/IconManager"; -import { KeyboardManager } from "apps/common/KeyboardManager"; -import { BaseLayout } from "apps/common/layout/BaseLayout"; -import { PopupManager } from "apps/common/PopupManager"; -import { - END, - MOVE, - RESIZE_WINDOW, - RESIZE_CANVAS, -} from "elf/editor/types/event"; -import { Length } from "elf/editor/unit/Length"; - -export class DesignEditor extends BaseLayout { - initialize() { - super.initialize(); - - this.$context.pathkit.load(); - } - - afterRender() { - super.afterRender(); - - this.$config.init("editor.layout.elements", this.refs); - - // load default data - this.$commands.emit("load.json", this.opt.data); - } - - getManagers() { - return { - snapManager: SnapManager, - selection: SelectionManager, - segmentSelection: SegmentSelectionManager, - timeline: TimelineSelectionManager, - history: HistoryManager, - modelManager: ModelManager, - lockManager: LockManager, - visibleManager: VisibleManager, - clipboard: ClipboardManager, - pathkit: PathKitManager, - }; - } - - components() { - return { - LayerTab, - ToolBar, - Inspector, - BodyPanel, - PopupManager, - KeyboardManager, - IconManager, - SwitchLeftPanel, - SwitchRightPanel, - ContextMenuManager, - }; - } - - /** - * - * @protected - * @returns {function[]} - */ - getPlugins() { - return designEditorPlugins; - } - - initState() { - return { - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150, - }; - } - - template() { - return /*html*/ ` -
          -
          -
          - ${createComponent("ToolBar")} -
          -
          -
          - ${createComponent("BodyPanel", { ref: "$bodyPanelView" })} -
          -
          - ${createComponent("LayerTab")} -
          -
          - ${createComponent("Inspector")} -
          -
          -
          - ${createComponent("KeyboardManager")} -
          - ${createComponent("PopupManager")} - ${createComponent("IconManager")} - ${createComponent("ContextMenuManager")} -
          - `; - } - - [BIND("$el")]() { - return { - "data-design-mode": this.$config.get("editor.design.mode"), - }; - } - - [BIND("$splitter")]() { - let left = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left = 0; - } - - return { - style: { - left: left, - }, - }; - } - - [BIND("$leftArrow")]() { - let left = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left = 0; - } - - return { - style: { - left: left, - }, - }; - } - - [BIND("$leftPanel")]() { - let left = `0px`; - let width = this.state.leftSize; - let bottom = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left = `-${this.state.leftSize}px`; - } - - return { - style: { left, width, bottom }, - }; - } - - [BIND("$rightPanel")]() { - let right = 0; - let bottom = this.state.bottomSize; - if (this.$config.false("show.right.panel")) { - right = -this.state.rightSize; - } - - return { - style: { - right: right, - bottom, - }, - }; - } - - [BIND("$rightArrow")]() { - let right = 6; - let bottom = this.state.bottomSize; - if (this.$config.true("show.right.panel")) { - right = this.state.rightSize + 6; - } - - return { - style: { - right: right, - bottom, - }, - }; - } - - [BIND("$bodyPanel")]() { - let left = this.state.leftSize; - let right = this.state.rightSize; - let bottom = this.state.bottomSize; - - if (this.$config.false("show.left.panel")) { - left = 0; - } - - if (this.$config.false("show.right.panel")) { - right = 0; - } - - return { - style: { - left: left, - right: right, - bottom: bottom, - }, - }; - } - - [POINTERSTART("$splitter") + - MOVE("moveSplitter") + - END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); - } - - moveSplitter(dx) { - this.setState({ - leftSize: Math.max( - Math.min(this.leftSize + dx, this.maxSize), - this.minSize - ), - }); - } - - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); - } - - refresh() { - this.bindData("$el"); - this.bindData("$splitter"); - this.bindData("$headerPanel"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); - this.bindData("$toggleRightButton"); - this.bindData("$toggleLeftButton"); - this.bindData("$bodyPanel"); - this.bindData("$footerPanel"); - - this.emit("resizeEditor"); - } - - [CONFIG("show.left.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - this.$config.init("editor.layout.elements", this.refs); - }); - } - - [CONFIG("show.right.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - this.$config.init("editor.layout.elements", this.refs); - }); - } - - [CONFIG("editor.design.mode")]() { - this.bindData("$el"); - } - - /** 드랍존 설정을 위해서 남겨놔야함 */ - [DRAGOVER("$middle") + PREVENT]() {} - [DROP("$middle") + PREVENT]() {} - /** 드랍존 설정을 위해서 남겨놔야함 */ - - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); - } - - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } - } - - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - this.$config.init("editor.layout.elements", this.refs); - } -} diff --git a/src/apps/designeditor/index.jsx b/src/apps/designeditor/index.jsx new file mode 100644 index 000000000..2dd386ba8 --- /dev/null +++ b/src/apps/designeditor/index.jsx @@ -0,0 +1,74 @@ +import "./layout.scss"; +import { ClipboardManager } from "./managers/ClipboardManager"; +import { HistoryManager } from "./managers/HistoryManager"; +import { LockManager } from "./managers/LockManager"; +import { ModelManager } from "./managers/ModelManager"; +import { PathKitManager } from "./managers/PathKitManager"; +import { SegmentSelectionManager } from "./managers/SegmentSelectionManager"; +import { SelectionManager } from "./managers/SelectionManager"; +import { SnapManager } from "./managers/SnapManager"; +import { TimelineSelectionManager } from "./managers/TimelineSelectionManager"; +import { VisibleManager } from "./managers/VisibleManager"; +import designEditorPlugins from "./plugins/design-editor-plugins"; + +import { BlankEditor } from "apps/blankeditor"; +import BodyPanel from "apps/common/BodyPanel"; +import { DefaultLayoutItem } from "apps/common/layout/DefaultLayout"; + +export class DesignEditor extends BlankEditor { + initialize() { + super.initialize(); + + this.$context.pathkit.load(); + } + + afterRender() { + super.afterRender(); + + // load default data + this.$commands.emit("load.json", this.opt.data); + + this.$config.init( + "editor.layout.elements", + this.children.$layout.getLayoutElements() + ); + } + + getManagers() { + return { + snapManager: SnapManager, + selection: SelectionManager, + segmentSelection: SegmentSelectionManager, + timeline: TimelineSelectionManager, + history: HistoryManager, + modelManager: ModelManager, + lockManager: LockManager, + visibleManager: VisibleManager, + clipboard: ClipboardManager, + pathkit: PathKitManager, + }; + } + + /** + * + * @protected + * @returns {function[]} + */ + getPlugins() { + return designEditorPlugins; + } + + /** + * body panel 영역 재정의 + * + * @protected + * @override + */ + getBodyPanel() { + return ( + + + + ); + } +} diff --git a/src/apps/designeditor/layout.scss b/src/apps/designeditor/layout.scss index 21b75695d..857b1bb67 100644 --- a/src/apps/designeditor/layout.scss +++ b/src/apps/designeditor/layout.scss @@ -1,210 +1,8 @@ -$pointer-color: #4075d6; -$top-size: 48px; -$tool-size: 0px; -$left-size: 340px; -$left-layer-panel: 70px; -$left-page-size: 70px; -$toggle-left-size: 80px; -$right-size: 280px; -$timeline-animation-size: 200px; -$timeline-property-size: 270px; -$timeline-header-size: 40px; -$timeline-size: 300px; -$show-timeline-animation: all 0.05s linear; -$footer-height: 0px; -$status-bar-height: 0px; -// base -$range-thumb-width: 12px; -$range-thumb-height: 12px; -$range-track-height: 2px; -$range-thumb-top: -5px; -$range-thumb-border-radius: 20px; +.design-editor { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; -.designeditor { - &[data-design-mode="item"] { - .layout-middle { - bottom: 0px !important; - } - - .elf--status-bar { - display: none !important; - } - } - - .layout-main { - position: absolute; - left: 0px; - top: 0px; - right: 0px; - bottom: 0px; - background-color: var(--elf--header-background-color); - - .layout-top { - height: $top-size; - // border-bottom: 1px solid var(--elf--border-color); - box-sizing: border-box; - z-index: 10000; - position: absolute; - left: 0px; - top: 0px; - right: 0px; - background-color: var(--elf--background-color); - } - - .layout-middle { - position: absolute; - left: 0px; - right: 0px; - top: $top-size; - bottom: $status-bar-height; - box-sizing: border-box; - overflow: hidden; - background-color: var(--elf--background-color); - // background-image: linear-gradient(45deg, rgb(0, 29, 72) 0%, var(--elf--background-color) 100%); - - .layout-header { - display: none; - top: 0px; - left: $left-size; - right: $right-size; - height: $tool-size; - position: absolute; - background-color: var(--elf--header-background-color); - color: var(--elf--selected-font-color); - box-sizing: border-box; - // border-bottom: 1px solid var(--elf--border-color); - } - - > .splitter { - position: absolute; - left: $left-size; - width: 4px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - - &:hover, - &.selected { - background-color: var(--elf--selected-color); - } - } - - > .left-arrow { - position: absolute; - left: $left-size; - width: 8px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - display: flex; - justify-items: center; - align-items: center; - pointer-events: none; - - button { - pointer-events: all; - color: var(--elf--font-color); - } - } - - > .right-arrow { - position: absolute; - right: $right-size; - width: 8px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - display: flex; - justify-items: center; - align-items: center; - pointer-events: none; - - button { - pointer-events: all; - color: var(--elf--font-color); - } - } - - > button { - position: absolute; - width: 12px; - height: 12px; - top: 50%; - transform: translateY(-50%) translateX(-25%); - cursor: pointer; - color: var(--elf--font-color); - z-index: 1000; - - svg { - transform: scale(1.5); - } - } - - > .toggleLeft { - left: $left-size; - } - - > .toggleRight { - right: $right-size; - } - - .layout-footer { - position: absolute; - left: 0px; - height: $footer-height; - bottom: 0px; - right: 0px; - overflow: hidden; - background-color: var(--elf--background-color); - z-index: 10000; - - .footer-splitter { - display: none; - } - } - - .layout-left { - position: absolute; - left: 0px; - top: 0px; - bottom: $footer-height; - width: $left-size; - display: inline-block; - - display: flex; - flex-direction: column; - border-right: 1px solid var(--elf--layout-border-color); - box-sizing: border-box; - } - - .layout-right { - position: absolute; - right: 0px; - top: 0px; - bottom: $footer-height; - width: $right-size; - display: inline-block; - z-index: 100; - display: flex; - flex-direction: column; - overflow: auto; - // transition: bottom 0.05s linear; - border-left: 1px solid var(--elf--layout-border-color); - } - - .layout-body { - top: $tool-size; - left: $left-size; - right: $right-size; - bottom: $footer-height; - position: absolute; - // transition: bottom 0.05s linear - // border: 1px solid var(--elf--border-color); - // border-radius: 4px; - } - } - } + background-color: var(--elf--background-color); } diff --git a/src/apps/designeditor/menus/DefaultMenu.js b/src/apps/designeditor/menus/DefaultMenu.js index 4515c6220..65c32fbb1 100644 --- a/src/apps/designeditor/menus/DefaultMenu.js +++ b/src/apps/designeditor/menus/DefaultMenu.js @@ -342,7 +342,7 @@ export default [ return editor.context.config.is("editing.mode", EditingMode.HAND); }, action: (editor) => { - editor.context.config.set("editing.mode", EditingMode.HAND); + editor.context.commands.emit("toggleHandTool"); }, }, ]; diff --git a/src/apps/designeditor/plugins/background-image/BackgroundImageEditor.scss b/src/apps/designeditor/plugins/background-image/BackgroundImageEditor.scss index a1ff61bde..a3d7dd753 100644 --- a/src/apps/designeditor/plugins/background-image/BackgroundImageEditor.scss +++ b/src/apps/designeditor/plugins/background-image/BackgroundImageEditor.scss @@ -1,8 +1,7 @@ @import "../../../../scss/mixins.scss"; .elf--background-image-editor { - padding: 5px 10px 5px 5px; - padding-top: 0px; + .label { height: 20px; margin-top: 2px; diff --git a/src/apps/designeditor/plugins/background-image/BackgroundImageProperty.scss b/src/apps/designeditor/plugins/background-image/BackgroundImageProperty.scss index 6cd3c3e8f..bda611045 100644 --- a/src/apps/designeditor/plugins/background-image/BackgroundImageProperty.scss +++ b/src/apps/designeditor/plugins/background-image/BackgroundImageProperty.scss @@ -3,10 +3,11 @@ } .fill { - display: inline-block; - vertical-align: middle; - width: 30px !important; - height: 30px !important; + display: flex; + width: 24px !important; + height: 24px !important; + align-items: center; + justify-content: center; &:hover { background-color: var(--elf--input-inactive-color); diff --git a/src/apps/designeditor/plugins/border-radius/BorderRadiusEditor.js b/src/apps/designeditor/plugins/border-radius/BorderRadiusEditor.js index fa798dafc..509fd8e73 100644 --- a/src/apps/designeditor/plugins/border-radius/BorderRadiusEditor.js +++ b/src/apps/designeditor/plugins/border-radius/BorderRadiusEditor.js @@ -35,7 +35,7 @@ export default class BorderRadiusEditor extends EditorElement { } template() { - return `
          `; + return /*html*/ `
          `; } [SUBSCRIBE_SELF("changeBorderRadius")](key, value) { @@ -66,17 +66,16 @@ export default class BorderRadiusEditor extends EditorElement { })}
          - - ${createComponent("ToggleButton", { - compact: true, - ref: "$toggle", - key: "border-all", - checkedValue: BorderGroup.PARTITIAL, - value: BorderGroup.ALL, - toggleLabels: [iconUse("border_inner"), iconUse("border_inner")], - toggleValues: [BorderGroup.ALL, BorderGroup.PARTITIAL], - onchange: "changeKeyValue", - })} + ${createComponent("ToggleButton", { + compact: true, + ref: "$toggle", + key: "border-all", + checkedValue: BorderGroup.PARTITIAL, + value: BorderGroup.ALL, + toggleLabels: [iconUse("border_inner"), iconUse("border_inner")], + toggleValues: [BorderGroup.ALL, BorderGroup.PARTITIAL], + onchange: "changeKeyValue", + })}
          * { + flex: 1 1 auto; + } + + > .button { + width: 24px; + height: 24px; + flex: none; + } } .radius-selector { diff --git a/src/apps/designeditor/plugins/border/BorderEditor.scss b/src/apps/designeditor/plugins/border/BorderEditor.scss index 13fd909f8..a017191dc 100644 --- a/src/apps/designeditor/plugins/border/BorderEditor.scss +++ b/src/apps/designeditor/plugins/border/BorderEditor.scss @@ -35,7 +35,7 @@ } > .editor-area { - padding: 5px 0px; + // padding: 5px 0px; > div { margin-top: 5px; diff --git a/src/apps/designeditor/plugins/design-editor-plugins.js b/src/apps/designeditor/plugins/design-editor-plugins.js index a77c5e971..df0dd7060 100644 --- a/src/apps/designeditor/plugins/design-editor-plugins.js +++ b/src/apps/designeditor/plugins/design-editor-plugins.js @@ -23,13 +23,13 @@ import fillEditorView from "./fill-editor-view"; import filter from "./filter"; import font from "./font"; import gradient from "./gradient"; -import gradientAsset from "./gradient-asset"; import gradientEditorView from "./gradient-editor-view"; import guideLineView from "./guide-line-view"; import history from "./history"; import hoverView from "./hover-view"; import image from "./image"; import imageAsset from "./image-asset"; +import inspector from "./inspector"; import keyframe from "./keyframe"; import layerAppendView from "./layer-append-view"; import layerTree from "./layer-tree"; @@ -71,7 +71,6 @@ export default [ configs, commands, menus, - layertab, defaultConfigs, defaultIcons, defaultMessages, @@ -91,6 +90,8 @@ export default [ gradient, // inspector.tab.style + layertab, + inspector, // depth, alignment, @@ -135,7 +136,6 @@ export default [ backdropFilter, boxShadow, clipPath, - gradientAsset, exportResource, diff --git a/src/apps/designeditor/plugins/gradient-asset/index.js b/src/apps/designeditor/plugins/gradient-asset/index.js deleted file mode 100644 index f203d4a9e..000000000 --- a/src/apps/designeditor/plugins/gradient-asset/index.js +++ /dev/null @@ -1,12 +0,0 @@ -// import { Editor } from "elf/editor/manager/Editor"; -import GradientAssetsProperty from "./GradientAssetsProperty"; - -/** - * - * @param {Editor} editor - */ -export default function (editor) { - editor.registerElement({ - GradientAssetsProperty, - }); -} diff --git a/src/apps/designeditor/plugins/image-asset/index.js b/src/apps/designeditor/plugins/image-asset/index.js index 27dbba979..f6519ac5c 100644 --- a/src/apps/designeditor/plugins/image-asset/index.js +++ b/src/apps/designeditor/plugins/image-asset/index.js @@ -1,6 +1,5 @@ // import { Editor } from "elf/editor/manager/Editor"; import ImageAssetPicker from "./ImageAssetPicker"; -import ImageAssetsProperty from "./ImageAssetsProperty"; /** * @@ -9,6 +8,5 @@ import ImageAssetsProperty from "./ImageAssetsProperty"; export default function (editor) { editor.registerElement({ ImageAssetPicker, - ImageAssetsProperty, }); } diff --git a/src/apps/designeditor/plugins/inspector/index.js b/src/apps/designeditor/plugins/inspector/index.js new file mode 100644 index 000000000..e962eae65 --- /dev/null +++ b/src/apps/designeditor/plugins/inspector/index.js @@ -0,0 +1,18 @@ +export default function (editor) { + editor.context.config.set("inspector.selectedValue", "style"); + + editor.registerUI("inspector.tab", { + Style: { + title: editor.$i18n("inspector.tab.title.design"), + value: "style", + }, + Transition: { + title: editor.$i18n("inspector.tab.title.transition"), + value: "transition", + }, + Code: { + title: editor.$i18n("inspector.tab.title.code"), + value: "code", + }, + }); +} diff --git a/src/apps/designeditor/plugins/layertab/index.js b/src/apps/designeditor/plugins/layertab/index.js index 3f30e456f..5ac5f258e 100644 --- a/src/apps/designeditor/plugins/layertab/index.js +++ b/src/apps/designeditor/plugins/layertab/index.js @@ -1,10 +1,60 @@ +import GradientAssetsProperty from "./object-list/asset/GradientAssetsProperty"; +import ImageAssetsProperty from "./object-list/asset/ImageAssetsProperty"; +import PatternAssetsProperty from "./object-list/asset/PatternAssetsProperty"; +import VideoAssetsProperty from "./object-list/asset/VideoAssetsProperty"; +import AssetItems from "./object-list/AssetItems"; +import CustomAssets from "./object-list/CustomAssets"; +import LibraryItems from "./object-list/LibraryItems"; +import ObjectItems from "./object-list/ObjectItems"; + import { iconUse } from "elf/editor/icon/icon"; + export default function (editor) { + editor.context.config.set("layertab.selectedValue", "layer"); + editor.registerUI("layertab.tab", { - Sample: { - title: "Sample", - icon: iconUse("add"), - value: "sample", + Layer: { + title: editor.$i18n("app.tab.title.layers"), + icon: iconUse("layers"), + value: "layer", }, + Library: { + title: editor.$i18n("app.tab.title.libraries"), + icon: iconUse("auto_awesome"), + value: "library", + }, + Asset: { + title: editor.$i18n("app.tab.title.assets"), + icon: iconUse("apps"), + value: "asset", + }, + Component: { + title: editor.$i18n("app.tab.title.components"), + icon: iconUse("plugin"), + value: "component", + }, + }); + + editor.registerUI("layertab.tab.layer", { + ObjectItems, + }); + + editor.registerUI("layertab.tab.library", { + LibraryItems, + }); + + editor.registerUI("layertab.tab.asset", { + AssetItems, + }); + + editor.registerUI("layertab.tab.component", { + CustomAssets, + }); + + editor.registerUI("asset", { + GradientAssetsProperty, + PatternAssetsProperty, + ImageAssetsProperty, + VideoAssetsProperty, }); } diff --git a/src/apps/common/area/object-list/AssetItems.js b/src/apps/designeditor/plugins/layertab/object-list/AssetItems.js similarity index 100% rename from src/apps/common/area/object-list/AssetItems.js rename to src/apps/designeditor/plugins/layertab/object-list/AssetItems.js diff --git a/src/apps/common/area/object-list/CustomAssets.js b/src/apps/designeditor/plugins/layertab/object-list/CustomAssets.js similarity index 100% rename from src/apps/common/area/object-list/CustomAssets.js rename to src/apps/designeditor/plugins/layertab/object-list/CustomAssets.js diff --git a/src/apps/common/area/object-list/CustomAssets.scss b/src/apps/designeditor/plugins/layertab/object-list/CustomAssets.scss similarity index 100% rename from src/apps/common/area/object-list/CustomAssets.scss rename to src/apps/designeditor/plugins/layertab/object-list/CustomAssets.scss diff --git a/src/apps/common/area/object-list/LibraryItems.js b/src/apps/designeditor/plugins/layertab/object-list/LibraryItems.js similarity index 100% rename from src/apps/common/area/object-list/LibraryItems.js rename to src/apps/designeditor/plugins/layertab/object-list/LibraryItems.js diff --git a/src/apps/common/area/object-list/LibraryItems.scss b/src/apps/designeditor/plugins/layertab/object-list/LibraryItems.scss similarity index 100% rename from src/apps/common/area/object-list/LibraryItems.scss rename to src/apps/designeditor/plugins/layertab/object-list/LibraryItems.scss diff --git a/src/apps/common/area/object-list/ObjectItems.js b/src/apps/designeditor/plugins/layertab/object-list/ObjectItems.js similarity index 100% rename from src/apps/common/area/object-list/ObjectItems.js rename to src/apps/designeditor/plugins/layertab/object-list/ObjectItems.js diff --git a/src/apps/common/area/object-list/ObjectItems.scss b/src/apps/designeditor/plugins/layertab/object-list/ObjectItems.scss similarity index 100% rename from src/apps/common/area/object-list/ObjectItems.scss rename to src/apps/designeditor/plugins/layertab/object-list/ObjectItems.scss diff --git a/src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.js b/src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.js similarity index 98% rename from src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.js rename to src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.js index 440aa20cf..e56dbea76 100644 --- a/src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.js +++ b/src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.js @@ -8,7 +8,7 @@ import { createComponent, } from "sapa"; -import gradients from "../../preset/gradients"; +import gradients from "../../../../preset/gradients"; import "./GradientAssetsProperty.scss"; import { iconUse } from "elf/editor/icon/icon"; diff --git a/src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.scss b/src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.scss similarity index 98% rename from src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.scss rename to src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.scss index 451681093..5e47bf0fb 100644 --- a/src/apps/designeditor/plugins/gradient-asset/GradientAssetsProperty.scss +++ b/src/apps/designeditor/plugins/layertab/object-list/asset/GradientAssetsProperty.scss @@ -1,4 +1,4 @@ -@import "../../../../scss/mixins.scss"; +@import "../../../../../../scss/mixins.scss"; $asset-item-size: 40px; .elf--gradient-assets-property { diff --git a/src/apps/designeditor/plugins/image-asset/ImageAssetsProperty.js b/src/apps/designeditor/plugins/layertab/object-list/asset/ImageAssetsProperty.js similarity index 100% rename from src/apps/designeditor/plugins/image-asset/ImageAssetsProperty.js rename to src/apps/designeditor/plugins/layertab/object-list/asset/ImageAssetsProperty.js diff --git a/src/apps/designeditor/plugins/image-asset/ImageAssetsProperty.scss b/src/apps/designeditor/plugins/layertab/object-list/asset/ImageAssetsProperty.scss similarity index 100% rename from src/apps/designeditor/plugins/image-asset/ImageAssetsProperty.scss rename to src/apps/designeditor/plugins/layertab/object-list/asset/ImageAssetsProperty.scss diff --git a/src/apps/designeditor/plugins/pattern-asset/PatternAssetsProperty.js b/src/apps/designeditor/plugins/layertab/object-list/asset/PatternAssetsProperty.js similarity index 98% rename from src/apps/designeditor/plugins/pattern-asset/PatternAssetsProperty.js rename to src/apps/designeditor/plugins/layertab/object-list/asset/PatternAssetsProperty.js index 65232c632..3646c8e2d 100644 --- a/src/apps/designeditor/plugins/pattern-asset/PatternAssetsProperty.js +++ b/src/apps/designeditor/plugins/layertab/object-list/asset/PatternAssetsProperty.js @@ -10,7 +10,7 @@ import { createComponent, } from "sapa"; -import patterns from "../../preset/patterns"; +import patterns from "../../../../preset/patterns"; import "./PatternAssetsProperty.scss"; import { CSS_TO_STRING } from "elf/core/func"; diff --git a/src/apps/designeditor/plugins/pattern-asset/PatternAssetsProperty.scss b/src/apps/designeditor/plugins/layertab/object-list/asset/PatternAssetsProperty.scss similarity index 100% rename from src/apps/designeditor/plugins/pattern-asset/PatternAssetsProperty.scss rename to src/apps/designeditor/plugins/layertab/object-list/asset/PatternAssetsProperty.scss diff --git a/src/elf/editor/ui/property/VideoAssetsProperty.js b/src/apps/designeditor/plugins/layertab/object-list/asset/VideoAssetsProperty.js similarity index 97% rename from src/elf/editor/ui/property/VideoAssetsProperty.js rename to src/apps/designeditor/plugins/layertab/object-list/asset/VideoAssetsProperty.js index e66acb969..e54538b21 100644 --- a/src/elf/editor/ui/property/VideoAssetsProperty.js +++ b/src/apps/designeditor/plugins/layertab/object-list/asset/VideoAssetsProperty.js @@ -8,7 +8,7 @@ import { registElement, } from "sapa"; -import { BaseProperty } from "./BaseProperty"; +import { BaseProperty } from "../../../../../../elf/editor/ui/property/BaseProperty"; import "./VideoAssetsProperty.scss"; import icon from "elf/editor/icon/icon"; diff --git a/src/elf/editor/ui/property/VideoAssetsProperty.scss b/src/apps/designeditor/plugins/layertab/object-list/asset/VideoAssetsProperty.scss similarity index 100% rename from src/elf/editor/ui/property/VideoAssetsProperty.scss rename to src/apps/designeditor/plugins/layertab/object-list/asset/VideoAssetsProperty.scss diff --git a/src/apps/designeditor/plugins/layout/FlexLayoutEditor.js b/src/apps/designeditor/plugins/layout/FlexLayoutEditor.js index e7e173d9b..57d04564d 100644 --- a/src/apps/designeditor/plugins/layout/FlexLayoutEditor.js +++ b/src/apps/designeditor/plugins/layout/FlexLayoutEditor.js @@ -119,6 +119,7 @@ export default class FlexLayoutEditor extends EditorElement { compact: true, key: "flexWrap", ref: "$wrap", + size: 30, checkedValue: "wrap", value: this.state.flexWrap || FlexWrap.NOWRAP, toggleLabels: [iconUse("wrap"), iconUse("wrap")], diff --git a/src/apps/designeditor/plugins/layout/ResizingProperty.scss b/src/apps/designeditor/plugins/layout/ResizingProperty.scss index e0381ac1a..5e089f273 100644 --- a/src/apps/designeditor/plugins/layout/ResizingProperty.scss +++ b/src/apps/designeditor/plugins/layout/ResizingProperty.scss @@ -2,10 +2,8 @@ .resizing-mode { display: grid; - grid-template-columns: 100px 1fr; + grid-template-columns: 70px 1fr; column-gap: 10px; - - padding-bottom: 10px; } .resizing-mode-box { @@ -14,7 +12,7 @@ height: 63px; // background-color: white; border: 1px solid var(--elf--input-border-color); - margin-left: 10px; + // margin-left: 10px; border-radius: 2px; &[data-horizontal="hug-content"][data-vertical="hug-content"] { diff --git a/src/apps/designeditor/plugins/menus/index.js b/src/apps/designeditor/plugins/menus/index.js index 2dd2645cb..c67bf9ba0 100644 --- a/src/apps/designeditor/plugins/menus/index.js +++ b/src/apps/designeditor/plugins/menus/index.js @@ -1,5 +1,85 @@ import DefaultMenu from "apps/designeditor/menus/DefaultMenu"; +import { Language } from "elf/editor/types/editor"; export default function (editor) { + editor.registerMenu("toolbar.logo", [ + { + type: "dropdown", + style: { + padding: "12px 0px 12px 12px", + }, + icon: `
          `, + items: [ + { + title: "menu.item.fullscreen.title", + command: "toggle.fullscreen", + shortcut: "ALT+/", + }, + { + title: "menu.item.shortcuts.title", + command: "showShortcutWindow", + }, + "-", + { title: "menu.item.export.title", command: "showExportView" }, + { + title: "menu.item.export.title", + command: "showEmbedEditorWindow", + }, + { title: "menu.item.download.title", command: "downloadJSON" }, + { + title: "menu.item.save.title", + command: "saveJSON", + nextTick: () => { + this.emit( + "notify", + "alert", + "Save", + "Save the content on localStorage", + 2000 + ); + }, + }, + { + title: "menu.item.language.title", + items: [ + { + title: "English", + command: "setLocale", + args: [Language.EN], + checked: (editor) => editor.locale === Language.EN, + }, + { + title: "Français", + command: "setLocale", + args: [Language.FR], + checked: (editor) => editor.locale === Language.FR, + }, + { + title: "Korean", + command: "setLocale", + args: [Language.KO], + checked: (editor) => editor.locale === Language.KO, + }, + ], + }, + "-", + { + title: "elf document", + items: [ + { + type: "link", + title: "Github", + href: "https://github.com/easylogic/editor", + }, + { + type: "link", + title: "Learn", + href: "https://www.easylogic.studio", + }, + ], + }, + ], + }, + ]); editor.registerMenu("toolbar.left", DefaultMenu); } diff --git a/src/apps/designeditor/plugins/pattern-asset/PatternEditor.scss b/src/apps/designeditor/plugins/pattern-asset/PatternEditor.scss index a44bd4d94..c1bcb0ef6 100644 --- a/src/apps/designeditor/plugins/pattern-asset/PatternEditor.scss +++ b/src/apps/designeditor/plugins/pattern-asset/PatternEditor.scss @@ -25,6 +25,10 @@ row-gap: 4px; flex-wrap: wrap; padding-bottom: 10px; + + &:empty { + display: none; + } .pattern-item { // margin-top: 5px; diff --git a/src/apps/designeditor/plugins/pattern-asset/index.js b/src/apps/designeditor/plugins/pattern-asset/index.js index 2560ec637..8590957fe 100644 --- a/src/apps/designeditor/plugins/pattern-asset/index.js +++ b/src/apps/designeditor/plugins/pattern-asset/index.js @@ -1,5 +1,5 @@ // import { Editor } from "elf/editor/manager/Editor"; -import PatternAssetsProperty from "./PatternAssetsProperty"; +import PatternAssetsProperty from "../layertab/object-list/asset/PatternAssetsProperty"; import PatternEditor from "./PatternEditor"; import PatternInfoPopup from "./PatternInfoPopup"; import PatternProperty from "./PatternProperty"; diff --git a/src/apps/designeditor/plugins/position/PositionProperty.js b/src/apps/designeditor/plugins/position/PositionProperty.js index eb7e67c8c..52451bd5c 100644 --- a/src/apps/designeditor/plugins/position/PositionProperty.js +++ b/src/apps/designeditor/plugins/position/PositionProperty.js @@ -74,7 +74,7 @@ export default class PositionProperty extends BaseProperty { getBody() { return /*html*/ ` -
          +
          ${createComponent("NumberInputEditor", { ref: "$x", diff --git a/src/apps/index.js b/src/apps/index.js index bbcdf3969..fd166811f 100644 --- a/src/apps/index.js +++ b/src/apps/index.js @@ -2,31 +2,13 @@ import { start } from "sapa"; import "../scss/index.scss"; import { BlankEditor } from "./blankeditor"; -import { DataEditor } from "./dataeditor"; import { DesignEditor } from "./designeditor"; -import { ThreeEditor } from "./three-editor"; -import { WhiteBoard } from "./whiteboard"; export * from "export-library/index"; export function createDesignEditor(opts) { return start(DesignEditor, opts); } -export function createThreeEditor(opts) { - return start(ThreeEditor, opts); -} - export function createBlankEditor(opts) { return start(BlankEditor, opts); } - -export function createDataEditor(opts) { - return start(DataEditor, opts); -} - -// createPageBuilder (opts = {}) { -// return App.start(PageBuilder as any, opts) -// }, -export function createWhiteBoard(opts) { - return start(WhiteBoard, opts); -} diff --git a/src/apps/three-editor/area/Body3DPanel.js b/src/apps/three-editor/area/Body3DPanel.js deleted file mode 100644 index 0f7dec563..000000000 --- a/src/apps/three-editor/area/Body3DPanel.js +++ /dev/null @@ -1,30 +0,0 @@ -import { SUBSCRIBE, createComponent } from "sapa"; - -import Canvas3DView from "./body-panel/Canvas3DView"; -import "./Body3DPanel.scss"; - -import { EditorElement } from "elf/editor/ui/common/EditorElement"; - -export default class Body3DPanel extends EditorElement { - components() { - return { - Canvas3DView, - }; - } - - template() { - return /*html*/ ` -
          -
          -
          - ${createComponent("Canvas3DView")} -
          -
          -
          - `; - } - - [SUBSCRIBE("bodypanel.toggle.fullscreen")]() { - this.refs.$el.toggleFullscreen(); - } -} diff --git a/src/apps/three-editor/area/Body3DPanel.scss b/src/apps/three-editor/area/Body3DPanel.scss deleted file mode 100644 index 6174bdf1f..000000000 --- a/src/apps/three-editor/area/Body3DPanel.scss +++ /dev/null @@ -1,44 +0,0 @@ -.elf--body-three-panel { - - position: absolute; - left: 0px; - top: 0px; - bottom: 0px; - right: 0px; - - .submenu-area { - display: inline-block; - position: absolute; - height: 40px; - top: 40px; - left: 50%; - box-sizing: border-box; - z-index: 2; - transform: translateX(-50%); - } - - .editing-area { - position: absolute; - left: 0px; - right: 0px; - bottom: 0px; - top: 0px; - - > .canvas-layout { - position: absolute; - left: var(--elf--editor-ruler-size); - top: var(--elf--editor-ruler-size); - right: 0px; - bottom: 0px; - overflow: hidden; - } - } - - &:not(.ruler) { - > .editing-area > .canvas-layout { - left: 0px; - top: 0px; - } - } - -} \ No newline at end of file diff --git a/src/apps/three-editor/area/ThreeInspector.jsx b/src/apps/three-editor/area/ThreeInspector.jsx deleted file mode 100644 index 539009654..000000000 --- a/src/apps/three-editor/area/ThreeInspector.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import { BIND, createElement } from "sapa"; - -import { DesignMode } from "elf/editor/types/editor"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; -import { TabPanel, Tabs } from "elf/ui"; - -export default class ThreeInspector extends EditorElement { - afterRender() { - this.$el.toggle(this.$config.is("editor.design.mode", DesignMode.DESIGN)); - } - - [BIND("$el")]() { - return { - style: { - display: this.$config.is("editor.design.mode", DesignMode.DESIGN) - ? "block" - : "none", - }, - }; - } - - template() { - return ( -
          -
          - { - this.$config.set("inspector.selectedValue", value); - }} - > - -
          - {this.$injectManager.generate("inspector.tab.style")} -
          -
          -           - - {this.$injectManager.getTargetUI("inspector.tab").map((it) => { - const { value, title, loadElements } = it.class; - - return ( - -
          - {loadElements.map((element) => createElement(element))} - {this.$injectManager.generate("inspector.tab." + it.value)} -
          -
          -           - ); - })} -           -
          -
          - ); - } -} diff --git a/src/apps/three-editor/area/body-panel/Canvas3DView.jsx b/src/apps/three-editor/area/body-panel/Canvas3DView.jsx deleted file mode 100644 index 52ff0859a..000000000 --- a/src/apps/three-editor/area/body-panel/Canvas3DView.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import "./Canvas3DView.scss"; -import ThreeRenderView from "./render-view/three-render-view/ThreeRenderView"; - -import { EditorElement } from "elf/editor/ui/common/EditorElement"; - -export default class Canvas3DView extends EditorElement { - template() { - return ( -
          -
          -
          - - - {this.$injectManager.generate("canvas.view")} -
          -
          -
          - ); - } -} diff --git a/src/apps/three-editor/area/body-panel/Canvas3DView.scss b/src/apps/three-editor/area/body-panel/Canvas3DView.scss deleted file mode 100644 index 9d1e87b0c..000000000 --- a/src/apps/three-editor/area/body-panel/Canvas3DView.scss +++ /dev/null @@ -1,33 +0,0 @@ -.elf--page-three-container { - position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - pointer-events: all; - outline: none; - background-color: white; - touch-action: pinch-zoom; - z-index: 1; - } - - - .page-view { - position: absolute; - left: 0px; - right: 0px; - bottom: 0px; - top: 0px; - background-color: var(--elf--canvas-background-color); - - .page-lock { - position: absolute; - left: 0px; - right: 0px; - bottom: 0px; - top: 0px; - overflow: hidden; - } - - } - \ No newline at end of file diff --git a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.js b/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.js deleted file mode 100644 index 85cf37b0e..000000000 --- a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.js +++ /dev/null @@ -1,294 +0,0 @@ -import * as THREE from "three"; -import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; -import { TransformControls } from "three/examples/jsm/controls/TransformControls"; - -import { SUBSCRIBE } from "sapa"; - -import "./ThreeRenderView.scss"; - -import { RESIZE_WINDOW, RESIZE_CANVAS } from "elf/editor/types/event"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; - -export default class ThreeRenderView extends EditorElement { - afterRender() { - window.setTimeout(() => { - this.refresh(); - }, 100); - } - - renderCanvas() { - // console.log(this.$context.sceneManager.scene.children); - - // console.log(this.$context.sceneManager.viewportCamera); - // this.$context.sceneManager.scene.add(this.grid); - - this.renderer.render( - this.$context.sceneManager.scene, - this.$context.sceneManager.viewportCamera - ); - // this.$context.sceneManager.scene.remove(this.grid); - - // console.log(this.$context.sceneManager.sceneHelpers.children); - // this.renderer.render(this.$context.sceneManager.sceneHelpers, this.$context.sceneManager.viewportCamera); - } - - initializeCamera(rect) { - const camera = new THREE.PerspectiveCamera( - 75, - rect.width / rect.height, - 0.1, - 1000 - ); - camera.position.x = 1; - camera.position.y = 3; - camera.position.z = 1; - // camera.translateZ(5); - // camera.rotateZ(10); - // camera.rotateX(); - - // transform origin - camera.lookAt(0, 0, 0); - - this.$context.sceneManager.camera = camera; - this.$context.sceneManager.addCamera(camera); - this.$context.sceneManager.setViewportCamera(camera.uuid); - } - - initializeRenderer() { - const rect = this.refs.$view.offsetRect(); - // const scene = new THREE.Scene(); - // const camera = new THREE.PerspectiveCamera( 75, rect.width / rect.height, 0.1, 1000 ); - - // const renderer = new THREE.WebGLRenderer({ - // antialias: true, - // canvas: this.refs.$view.el - // }); - // renderer.setSize( rect.width, rect.height ); - - // const geometry = new THREE.BoxGeometry(); - // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); - // const cube = new THREE.Mesh( geometry, material ); - // scene.add( cube ); - - // camera.position.z = 5; - - // function animate() { - // // requestAnimationFrame( animate ); - - // cube.rotation.x += 0.01; - // cube.rotation.y += 0.01; - - // renderer.render( scene, camera ); - // }; - - // animate(); - - // return; - - // console.log(rect); - - this.state.rect = rect; - - this.initializeCamera(rect); - - // camera.position.z = 5; - - // this.$context.sceneManager.viewportCamera.aspect = rect.width / rect.height; - // this.$context.sceneManager.viewportCamera.updateProjectionMatrix(); - - console.log(this.$context.sceneManager.viewportCamera); - - const renderer = new THREE.WebGLRenderer({ - canvas: this.refs.$view.el, - antialias: true, - }); - - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(rect.width, rect.height); - // renderer.setViewport( 0, 0, rect.width, rect.height ); - // renderer.setAnimationLoop(animate); - // renderer.setClearColor(0xaaaaaa); - - const controls = new OrbitControls( - this.$context.sceneManager.viewportCamera, - this.refs.$body.el - ); - controls.addEventListener("change", () => { - this.renderCanvas(); - }); - - // // helpers - - const grid = new THREE.Group(); - - const grid1 = new THREE.GridHelper(30, 30, 0x888888, "yellow"); - grid1.material.color.setHex(0x888888); - grid1.material.vertexColors = false; - grid.add(grid1); - - const grid2 = new THREE.GridHelper(30, 6, 0x222222, "white"); - grid2.material.color.setHex(0x222222); - grid2.material.depthFunc = THREE.AlwaysDepth; - grid2.material.vertexColors = false; - grid.add(grid2); - - this.grid = grid; - this.$context.sceneManager.addObject( - this.grid, - undefined, - undefined, - false - ); - - const light = new THREE.DirectionalLight(0xffffff, 2); - light.position.set(1, 1, 1); - this.$context.sceneManager.scene.add(light); - - const box = new THREE.Box3(); - - const selectionBox = new THREE.Box3Helper(box); - selectionBox.material.depthTest = false; - selectionBox.material.transparent = true; - selectionBox.visible = false; - this.$context.sceneManager.sceneHelpers.add(selectionBox); - - let objectPositionOnDown = null; - let objectRotationOnDown = null; - let objectScaleOnDown = null; - - const transformControls = new TransformControls( - this.$context.sceneManager.viewportCamera, - this.refs.$view.el - ); - this.transformControls = transformControls; - transformControls.addEventListener("change", () => { - // const object = transformControls.object; - - // if (object !== undefined) { - - // box.setFromObject(object, true); - - // const helper = this.$context.sceneManager.helpers[object.id]; - - // if (helper !== undefined && helper.isSkeletonHelper !== true) { - - // helper.update(); - - // } - - // this.emit('refreshSidebarObject3D', object); - // } - - this.renderCanvas(); - }); - transformControls.addEventListener("mouseDown", () => { - const object = transformControls.object; - - objectPositionOnDown = object.position.clone(); - objectRotationOnDown = object.rotation.clone(); - objectScaleOnDown = object.scale.clone(); - - controls.enabled = false; - }); - transformControls.addEventListener("mouseUp", () => { - const object = transformControls.object; - - if (object !== undefined) { - switch (transformControls.getMode()) { - case "translate": - if (!objectPositionOnDown.equals(object.position)) { - this.emit( - "SetPosition", - object, - object.position, - objectPositionOnDown - ); - } - - break; - - case "rotate": - if (!objectRotationOnDown.equals(object.rotation)) { - this.emit( - "SetRotation", - object, - object.rotation, - objectRotationOnDown - ); - } - - break; - - case "scale": - if (!objectScaleOnDown.equals(object.scale)) { - this.emit("SetScale", object, object.scale, objectScaleOnDown); - } - - break; - } - } - - controls.enabled = true; - }); - - this.$context.sceneManager.scene.add(transformControls); - - return renderer; - } - - refresh() { - if (!this.renderer) { - const renderer = this.initializeRenderer(); - - console.log(renderer); - - this.renderer = renderer; - } - - const self = this; - function animate(time) { - // requestAnimationFrame(animate); - - // console.log(self); - self.renderCanvas(time); - } - - animate(0); - } - - refreshCanvasSize() { - const rect = this.refs.$view.offsetRect(); - - this.state.rect = rect; - - this.$context.sceneManager.viewportCamera.aspect = rect.width / rect.height; - this.$context.sceneManager.viewportCamera.updateProjectionMatrix(); - - this.renderer.setSize(rect.width, rect.height); - - this.renderCanvas(0); - } - - [SUBSCRIBE("objectSelected")]() { - this.transformControls.attach(this.$context.sceneManager.selected); - } - - [SUBSCRIBE("objectAdded")]() { - this.renderCanvas(0); - } - - [SUBSCRIBE(RESIZE_WINDOW, RESIZE_CANVAS)]() { - console.log("resize"); - this.refreshCanvasSize(); - } - - /** template */ - template() { - return /*html*/ ` -
          - - ${this.$injectManager.generate("render.view")} -
          - `; - } -} diff --git a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.md b/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.md deleted file mode 100644 index 70fdab4df..000000000 --- a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.md +++ /dev/null @@ -1,3 +0,0 @@ -# ThreeJS 렌더링 뷰 - -## 렌더링 \ No newline at end of file diff --git a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.scss b/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.scss deleted file mode 100644 index dfa464168..000000000 --- a/src/apps/three-editor/area/body-panel/render-view/three-render-view/ThreeRenderView.scss +++ /dev/null @@ -1,28 +0,0 @@ -$editor-button-color: #5f80de; -$editor-line-color: rgba($editor-button-color, 0.3); -$editor-resizer-width: 8px; -$editor-canvas-background-color: rgba(236, 236, 236, 0.3); - -.elf--element-three-view { - position: absolute; - left: 0px; - top: 0px; - width: 100%; - height: 100%; - outline: none; - // background-color: yellow; - pointer-events: all; - - .canvas-view { - position: absolute; - transform-origin: left top; - left: 0px; - top: 0px; - width: 100%; - height: 100%; - // background-color: rgba(255, 122, 0, 0.5); - // will-change: auto; - /* canvas view 자체는 이벤트를 막고 내부에 있는 element-item 만 이벤트가 적용될 수 있도록 한다. */ - pointer-events: all; - } -} diff --git a/src/apps/three-editor/commands/command_list/addCubeBox.js b/src/apps/three-editor/commands/command_list/addCubeBox.js deleted file mode 100644 index aebf622a3..000000000 --- a/src/apps/three-editor/commands/command_list/addCubeBox.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as THREE from "three"; - -/** - * - * @param {Editor} editor - */ -export default { - command: "addCubeBox", - execute: (editor) => { - const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 1, 1); - const material = new THREE.MeshBasicMaterial({ color: 0xf0fff0 }); - const mesh = new THREE.Mesh(geometry, material); - mesh.name = "Box"; - - mesh.position.y = 0.5; - - editor.context.sceneManager.addObject(mesh); - editor.context.sceneManager.select(mesh); - }, -}; diff --git a/src/apps/three-editor/commands/command_list/editor.config.body.event.js b/src/apps/three-editor/commands/command_list/editor.config.body.event.js deleted file mode 100644 index e6d12440e..000000000 --- a/src/apps/three-editor/commands/command_list/editor.config.body.event.js +++ /dev/null @@ -1,11 +0,0 @@ -import { Dom } from "sapa"; - -export default { - command: "change.bodyEvent", - description: "fire when bodyEvent was set", - execute: function (editor) { - const $target = Dom.create(editor.context.config.get("bodyEvent").target); - - editor.context.config.init("onMouseMovepageContainer", $target); - }, -}; diff --git a/src/apps/three-editor/commands/index.js b/src/apps/three-editor/commands/index.js deleted file mode 100644 index 3fb27ad80..000000000 --- a/src/apps/three-editor/commands/index.js +++ /dev/null @@ -1,10 +0,0 @@ -const modules = import.meta.globEager("./command_list/**/*.js"); - -const obj = {}; - -Object.entries(modules).forEach(([key, value]) => { - key = key.replace("./command_list/", "").replace(".js", ""); - obj[key] = value.default; -}); - -export default obj; diff --git a/src/apps/three-editor/index.js b/src/apps/three-editor/index.js deleted file mode 100644 index 046b1a487..000000000 --- a/src/apps/three-editor/index.js +++ /dev/null @@ -1,267 +0,0 @@ -import { - DRAGOVER, - DROP, - PREVENT, - POINTERSTART, - BIND, - SUBSCRIBE, - CONFIG, - isFunction, - createComponent, -} from "sapa"; - -import Body3DPanel from "./area/Body3DPanel"; -import ThreeInspector from "./area/ThreeInspector"; -import "./layout.scss"; -import { SceneManager } from "./managers/SceneManager"; -import threeEditorPlugins from "./plugins/three-editor-plugins"; - -import LayerTab from "apps/common/area/LayerTab"; -import { ToolBar } from "apps/common/area/tool-bar/ToolBar"; -import { IconManager } from "apps/common/IconManager"; -import { KeyboardManager } from "apps/common/KeyboardManager"; -import { BaseLayout } from "apps/common/layout/BaseLayout"; -import { PopupManager } from "apps/common/PopupManager"; -import { END, MOVE, RESIZE_CANVAS } from "elf/editor/types/event"; -import { Length } from "elf/editor/unit/Length"; - -export class ThreeEditor extends BaseLayout { - getManagers() { - return { - sceneManager: SceneManager, - }; - } - - afterRender() { - super.afterRender(); - - this.$config.init("editor.layout.elements", this.refs); - - if (this.opt.data) { - this.$editor.sceneManager.fromJSON(this.opt.data); - } - } - - components() { - return { - LayerTab, - ToolBar, - ThreeInspector, - Body3DPanel, - PopupManager, - KeyboardManager, - IconManager, - }; - } - - /** - * - * @protected - * @returns {function[]} - */ - getPlugins() { - return threeEditorPlugins; - } - - initState() { - return { - leftSize: 340, - rightSize: 280, - bottomSize: 0, - lastBottomSize: 150, - }; - } - - template() { - return /*html*/ ` -
          -
          -
          - ${createComponent("ToolBar")} -
          -
          -
          - ${createComponent("Body3DPanel")} -
          -
          - ${createComponent("LayerTab")} -
          -
          - ${createComponent("ThreeInspector")} -
          -
          -
          - ${createComponent("KeyboardManager")} -
          - ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
          - `; - } - - [BIND("$el")]() { - return { - "data-design-mode": this.$config.get("editor.design.mode"), - }; - } - - [BIND("$splitter")]() { - let left = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left = 0; - } - - return { - style: { - left: left, - }, - }; - } - - [BIND("$leftArrow")]() { - let left = this.state.leftSize; - if (this.$config.false("show.left.panel")) { - left = 0; - } - - return { - style: { - left: left, - }, - }; - } - - [BIND("$leftPanel")]() { - let left = `0px`; - let width = this.state.leftSize; - let bottom = this.state.bottomSize; - if (this.$config.false("show.left.panel")) { - left = `-${this.state.leftSize}px`; - } - - return { - style: { left, width, bottom }, - }; - } - - [BIND("$rightPanel")]() { - let right = 0; - let bottom = this.state.bottomSize; - if (this.$config.false("show.right.panel")) { - right = -this.state.rightSize; - } - - return { - style: { - right: right, - bottom, - }, - }; - } - - [BIND("$rightArrow")]() { - let right = 6; - let bottom = this.state.bottomSize; - if (this.$config.true("show.right.panel")) { - right = this.state.rightSize + 6; - } - - return { - style: { - right: right, - bottom, - }, - }; - } - - [BIND("$bodyPanel")]() { - let left = this.state.leftSize; - let right = this.state.rightSize; - let bottom = this.state.bottomSize; - - if (this.$config.false("show.left.panel")) { - left = 0; - } - - if (this.$config.false("show.right.panel")) { - right = 0; - } - - return { - style: { - left: left, - right: right, - bottom: bottom, - }, - }; - } - - [POINTERSTART("$splitter") + - MOVE("moveSplitter") + - END("moveEndSplitter")]() { - this.minSize = this.$theme("left_size"); - this.maxSize = this.$theme("left_max_size"); - this.leftSize = Length.parse(this.refs.$splitter.css("left")).value; - this.refs.$splitter.addClass("selected"); - } - - moveSplitter(dx) { - this.setState({ - leftSize: Math.max( - Math.min(this.leftSize + dx, this.maxSize), - this.minSize - ), - }); - } - - moveEndSplitter() { - this.refs.$splitter.removeClass("selected"); - } - - refresh() { - this.bindData("$el"); - this.bindData("$splitter"); - this.bindData("$headerPanel"); - this.bindData("$leftPanel"); - this.bindData("$rightPanel"); - this.bindData("$toggleRightButton"); - this.bindData("$toggleLeftButton"); - this.bindData("$bodyPanel"); - this.bindData("$footerPanel"); - - this.emit("resizeEditor"); - } - - [CONFIG("show.left.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - - [CONFIG("show.right.panel")]() { - this.refresh(); - this.nextTick(() => { - this.emit(RESIZE_CANVAS); - }); - } - - [CONFIG("editor.design.mode")]() { - this.bindData("$el"); - } - - /** 드랍존 설정을 위해서 남겨놔야함 */ - [DRAGOVER("$middle") + PREVENT]() {} - [DROP("$middle") + PREVENT]() {} - /** 드랍존 설정을 위해서 남겨놔야함 */ - - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); - } - - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } - } -} diff --git a/src/apps/three-editor/layout.scss b/src/apps/three-editor/layout.scss deleted file mode 100644 index 6d600d6e0..000000000 --- a/src/apps/three-editor/layout.scss +++ /dev/null @@ -1,210 +0,0 @@ -$pointer-color: #4075d6; -$top-size: 48px; -$tool-size: 0px; -$left-size: 340px; -$left-layer-panel: 70px; -$left-page-size: 70px; -$toggle-left-size: 80px; -$right-size: 280px; -$timeline-animation-size: 200px; -$timeline-property-size: 270px; -$timeline-header-size: 40px; -$timeline-size: 300px; -$show-timeline-animation: all 0.05s linear; -$footer-height: 0px; -$status-bar-height: 0px; -// base -$range-thumb-width: 12px; -$range-thumb-height: 12px; -$range-track-height: 2px; -$range-thumb-top: -5px; -$range-thumb-border-radius: 20px; - -.three-editor { - &[data-design-mode="item"] { - .layout-middle { - bottom: 0px !important; - } - - .elf--status-bar { - display: none !important; - } - } - - .layout-main { - position: absolute; - left: 0px; - top: 0px; - right: 0px; - bottom: 0px; - background-color: var(--elf--header-background-color); - - .layout-top { - height: $top-size; - // border-bottom: 1px solid var(--elf--border-color); - box-sizing: border-box; - z-index: 10000; - position: absolute; - left: 0px; - top: 0px; - right: 0px; - background-color: var(--elf--background-color); - } - - .layout-middle { - position: absolute; - left: 0px; - right: 0px; - top: $top-size; - bottom: $status-bar-height; - box-sizing: border-box; - overflow: hidden; - background-color: var(--elf--background-color); - // background-image: linear-gradient(45deg, rgb(0, 29, 72) 0%, var(--elf--background-color) 100%); - - .layout-header { - display: none; - top: 0px; - left: $left-size; - right: $right-size; - height: $tool-size; - position: absolute; - background-color: var(--elf--header-background-color); - color: var(--elf--selected-font-color); - box-sizing: border-box; - // border-bottom: 1px solid var(--elf--border-color); - } - - > .splitter { - position: absolute; - left: $left-size; - width: 4px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - - &:hover, - &.selected { - background-color: var(--elf--selected-color); - } - } - - > .left-arrow { - position: absolute; - left: $left-size; - width: 8px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - display: flex; - justify-items: center; - align-items: center; - pointer-events: none; - - button { - pointer-events: all; - color: var(--elf--font-color); - } - } - - > .right-arrow { - position: absolute; - right: $right-size; - width: 8px; - top: 0px; - bottom: 0px; - cursor: ew-resize; - transition: background-color 0.05s linear; - display: flex; - justify-items: center; - align-items: center; - pointer-events: none; - - button { - pointer-events: all; - color: var(--elf--font-color); - } - } - - > button { - position: absolute; - width: 12px; - height: 12px; - top: 50%; - transform: translateY(-50%) translateX(-25%); - cursor: pointer; - color: var(--elf--font-color); - z-index: 1000; - - svg { - transform: scale(1.5); - } - } - - > .toggleLeft { - left: $left-size; - } - - > .toggleRight { - right: $right-size; - } - - .layout-footer { - position: absolute; - left: 0px; - height: $footer-height; - bottom: 0px; - right: 0px; - overflow: hidden; - background-color: var(--elf--background-color); - z-index: 10000; - - .footer-splitter { - display: none; - } - } - - .layout-left { - position: absolute; - left: 0px; - top: 0px; - bottom: $footer-height; - width: $left-size; - display: inline-block; - - display: flex; - flex-direction: column; - border-right: 1px solid var(--elf--layout-border-color); - box-sizing: border-box; - } - - .layout-right { - position: absolute; - right: 0px; - top: 0px; - bottom: $footer-height; - width: $right-size; - display: inline-block; - z-index: 100; - display: flex; - flex-direction: column; - overflow: auto; - // transition: bottom 0.05s linear; - border-left: 1px solid var(--elf--layout-border-color); - } - - .layout-body { - top: $tool-size; - left: $left-size; - right: $right-size; - bottom: $footer-height; - position: absolute; - // transition: bottom 0.05s linear - // border: 1px solid var(--elf--border-color); - // border-radius: 4px; - } - } - } -} diff --git a/src/apps/three-editor/managers/SceneManager.js b/src/apps/three-editor/managers/SceneManager.js deleted file mode 100644 index 8cd08d412..000000000 --- a/src/apps/three-editor/managers/SceneManager.js +++ /dev/null @@ -1,450 +0,0 @@ -import * as THREE from "three"; - -import { isArray } from "sapa"; - -var _DEFAULT_CAMERA = new THREE.PerspectiveCamera(3, 1, 0.01, 1000); -_DEFAULT_CAMERA.name = "Camera"; -_DEFAULT_CAMERA.position.set(0, 5, 10); -_DEFAULT_CAMERA.lookAt(new THREE.Vector3()); - -/** - * 렌더링 객체를 관리하는 자료구조입니다. - * - */ -export class SceneManager { - constructor(editor) { - this.editor = editor; - - this.camera = _DEFAULT_CAMERA.clone(); - - this.scene = new THREE.Scene(); - this.scene.name = "Scene"; - - this.sceneHelpers = new THREE.Scene(); - - this.object = {}; - this.geometries = {}; - this.materials = {}; - this.textures = {}; - this.scripts = {}; - - this.materialsRefCounter = new Map(); // tracks how often is a material used by a 3D object - - this.mixer = new THREE.AnimationMixer(this.scene); - - this.selected = null; - this.helpers = {}; - - this.cameras = {}; - this.viewportCamera = this.camera; - - this.addCamera(this.camera); - } - - emit(event, ...args) { - this.editor.emit(event, ...args); - } - - setScene(scene) { - this.scene.uuid = scene.uuid; - this.scene.name = scene.name; - - this.scene.background = scene.background; - this.scene.environment = scene.environment; - this.scene.fog = scene.fog; - - this.scene.userData = JSON.parse(JSON.stringify(scene.userData)); - - // avoid render per object - - while (scene.children.length > 0) { - // emit 하지 않고 객체 추가하기 - this.addObject(scene.children[0], undefined, undefined, false); - } - - this.emit("sceneChanged", this.scene); - } - - // eslint-disable-next-line no-unused-vars - addObject(object, parent, index, hasEmit = true) { - object.traverse((child) => { - if (child.geometry !== undefined) this.addGeometry(child.geometry); - if (child.material !== undefined) this.addMaterial(child.material); - - this.addCamera(child); - this.addHelper(child); - }); - - if (parent === undefined) { - this.scene.add(object); - } else { - parent.children.splice(index, 0, object); - object.parent = parent; - } - - this.emit("objectAdded", object); - this.emit("sceneGraphChanged"); - } - - moveObject(object, parent, before) { - if (parent === undefined) { - parent = this.scene; - } - - parent.add(object); - - // sort children array - - if (before !== undefined) { - var index = parent.children.indexOf(before); - parent.children.splice(index, 0, object); - parent.children.pop(); - } - - this.emit("sceneGraphChanged"); - } - - nameObject(object, name) { - object.name = name; - this.emit("sceneGraphChanged"); - } - - removeObject(object) { - if (object.parent === null) return; // avoid deleting the camera or scene - - object.traverse((child) => { - this.removeCamera(child); - this.removeHelper(child); - - if (child.material !== undefined) this.removeMaterial(child.material); - }); - - object.parent.remove(object); - - this.emit("objectRemoved", object); - this.emit("sceneGraphChanged"); - } - - addGeometry(geometry) { - this.geometries[geometry.uuid] = geometry; - } - - setGeometryName(geometry, name) { - geometry.name = name; - this.emit("sceneGraphChanged"); - } - - addMaterial(material) { - if (isArray(material)) { - for (var i = 0, l = material.length; i < l; i++) { - this.addMaterialToRefCounter(material[i]); - } - } else { - this.addMaterialToRefCounter(material); - } - - this.emit("materialAdded"); - } - - addMaterialToRefCounter(material) { - var materialsRefCounter = this.materialsRefCounter; - - var count = materialsRefCounter.get(material); - - if (count === undefined) { - materialsRefCounter.set(material, 1); - this.materials[material.uuid] = material; - } else { - count++; - materialsRefCounter.set(material, count); - } - } - - removeMaterial(material) { - if (isArray(material)) { - for (var i = 0, l = material.length; i < l; i++) { - this.removeMaterialFromRefCounter(material[i]); - } - } else { - this.removeMaterialFromRefCounter(material); - } - - this.emit("materialRemoved"); - } - - removeMaterialFromRefCounter(material) { - var materialsRefCounter = this.materialsRefCounter; - - var count = materialsRefCounter.get(material); - count--; - - if (count === 0) { - materialsRefCounter.delete(material); - delete this.materials[material.uuid]; - } else { - materialsRefCounter.set(material, count); - } - } - - getMaterialById(id) { - return Object.values(this.materials).find((m) => m.id === id); - } - - setMaterialName(material, name) { - material.name = name; - this.emit("sceneGraphChanged"); - } - - addTexture(texture) { - this.textures[texture.uuid] = texture; - } - - addCamera(camera) { - if (camera.isCamera) { - this.cameras[camera.uuid] = camera; - - this.emit("cameraAdded", camera); - } - } - - removeCamera(camera) { - if (this.cameras[camera.uuid] !== undefined) { - delete this.cameras[camera.uuid]; - - this.emit("cameraRemoved", camera); - } - } - - addHelper(object, helper) { - var geometry = new THREE.SphereGeometry(2, 4, 2); - var material = new THREE.MeshBasicMaterial({ - color: 0xff0000, - visible: false, - }); - - if (helper === undefined) { - if (object.isCamera) { - helper = new THREE.CameraHelper(object); - } else if (object.isPointLight) { - helper = new THREE.PointLightHelper(object, 1); - } else if (object.isDirectionalLight) { - helper = new THREE.DirectionalLightHelper(object, 1); - } else if (object.isSpotLight) { - helper = new THREE.SpotLightHelper(object); - } else if (object.isHemisphereLight) { - helper = new THREE.HemisphereLightHelper(object, 1); - } else if (object.isSkinnedMesh) { - helper = new THREE.SkeletonHelper(object.skeleton.bones[0]); - } else if (object.isBone === true && object.parent?.isBone !== true) { - helper = new THREE.SkeletonHelper(object); - } else { - // no helper for this object type - return; - } - - const picker = new THREE.Mesh(geometry, material); - picker.name = "picker"; - picker.userData.object = object; - helper.add(picker); - } - - this.sceneHelpers.add(helper); - this.helpers[object.id] = helper; - - this.emit("helperAdded", helper); - } - - removeHelper(object) { - if (this.helpers[object.id] !== undefined) { - var helper = this.helpers[object.id]; - helper.parent.remove(helper); - - delete this.helpers[object.id]; - - this.emit("helperRemoved", helper); - } - } - - addScript(object, script) { - if (this.scripts[object.uuid] === undefined) { - this.scripts[object.uuid] = []; - } - - this.scripts[object.uuid].push(script); - - this.emit("scriptAdded", script); - } - - removeScript(object, script) { - if (this.scripts[object.uuid] === undefined) return; - - var index = this.scripts[object.uuid].indexOf(script); - - if (index !== -1) { - this.scripts[object.uuid].splice(index, 1); - } - - this.emit("scriptRemoved", script); - } - - getObjectMaterial(object, slot) { - var material = object.material; - - if (isArray(material) && slot !== undefined) { - material = material[slot]; - } - - return material; - } - - setObjectMaterial(object, slot, newMaterial) { - if (isArray(object.material) && slot !== undefined) { - object.material[slot] = newMaterial; - } else { - object.material = newMaterial; - } - } - - setViewportCamera(uuid) { - this.viewportCamera = this.cameras[uuid]; - - this.emit("viewportCameraChanged"); - } - - select(object) { - if (this.selected === object) return; - - var uuid = null; - - if (object !== null) { - uuid = object.uuid; - } - - this.selected = object; - - this.editor.context.config.set("selected", uuid); - this.emit("objectSelected", object); - } - - selectById(id) { - if (id === this.camera.id) { - this.select(this.camera); - return; - } - - this.select(this.scene.getObjectById(id)); - } - - selectByUuid(uuid) { - this.scene.traverse((child) => { - if (child.uuid === uuid) { - this.select(child); - } - }); - } - - deselect() { - this.select(null); - } - - focus(object) { - if (object !== undefined) { - this.emit("objectFocused", object); - } - } - - focusById(id) { - this.focus(this.scene.getObjectById(id)); - } - - clear() { - this.camera.copy(_DEFAULT_CAMERA); - this.emit("cameraChanged"); - - this.scene.name = "Scene"; - this.scene.userData = {}; - this.scene.background = null; - this.scene.environment = null; - this.scene.fog = null; - - var objects = this.scene.children; - - while (objects.length > 0) { - this.removeObject(objects[0]); - } - - this.geometries = {}; - this.materials = {}; - this.textures = {}; - this.scripts = {}; - - this.materialsRefCounter.clear(); - - this.animations = {}; - this.mixer.stopAllAction(); - - this.deselect(); - - this.emit("editorCleared"); - } - - async fromJSON(json) { - var loader = new THREE.ObjectLoader(); - var camera = await loader.parseAsync(json.camera); - - this.camera.copy(camera); - - this.emit("cameraResetted"); - - this.scripts = json.scripts; - - this.setScene(await loader.parseAsync(json.scene)); - } - - toJSON() { - // scripts clean up - - var scene = this.scene; - var scripts = this.scripts; - - for (var key in scripts) { - var script = scripts[key]; - - if ( - script.length === 0 || - scene.getObjectByProperty("uuid", key) === undefined - ) { - delete scripts[key]; - } - } - - // - - return { - metadata: {}, - project: { - shadows: this.editor.context.config.get("project/renderer/shadows"), - shadowType: this.editor.context.config.get( - "project/renderer/shadowType" - ), - vr: this.editor.context.config.get("project/vr"), - physicallyCorrectLights: this.editor.context.config.get( - "project/renderer/physicallyCorrectLights" - ), - toneMapping: this.editor.context.config.get( - "project/renderer/toneMapping" - ), - toneMappingExposure: this.editor.context.config.get( - "project/renderer/toneMappingExposure" - ), - }, - camera: this.camera.toJSON(), - scene: this.scene.toJSON(), - scripts: this.scripts, - }; - } - - objectByUuid(uuid) { - return this.scene.getObjectByProperty("uuid", uuid, true); - } -} diff --git a/src/apps/three-editor/menus/DefaultMenu.js b/src/apps/three-editor/menus/DefaultMenu.js deleted file mode 100644 index 9ba038099..000000000 --- a/src/apps/three-editor/menus/DefaultMenu.js +++ /dev/null @@ -1,9 +0,0 @@ -export default [ - { - type: "button", - icon: "cube", - action: (editor) => { - editor.context.commands.emit("addCubeBox"); - }, - }, -]; diff --git a/src/apps/three-editor/plugins/commands/index.js b/src/apps/three-editor/plugins/commands/index.js deleted file mode 100644 index 26464863f..000000000 --- a/src/apps/three-editor/plugins/commands/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import commands from "../../commands"; - -export default function (editor) { - editor.loadCommands(commands); -} diff --git a/src/apps/three-editor/plugins/menus/index.js b/src/apps/three-editor/plugins/menus/index.js deleted file mode 100644 index 6989551c7..000000000 --- a/src/apps/three-editor/plugins/menus/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import DefaultMenu from "apps/three-editor/menus/DefaultMenu"; - -export default function (editor) { - editor.registerMenu("toolbar.left", DefaultMenu); -} diff --git a/src/apps/three-editor/plugins/three-editor-plugins.js b/src/apps/three-editor/plugins/three-editor-plugins.js deleted file mode 100644 index 0f6d17981..000000000 --- a/src/apps/three-editor/plugins/three-editor-plugins.js +++ /dev/null @@ -1,26 +0,0 @@ -import commands from "./commands"; -import menus from "./menus"; -import threeHelpers from "./three-helpers"; - -// import layerTree from "apps/designeditor/plugins/layer-tree"; -import project from "apps/designeditor/plugins/project"; -import baseEditor from "plugins/base-editor"; -import component from "plugins/component"; -import defaultConfigs from "plugins/default-configs"; -import defaultIcons from "plugins/default-icons"; -import defaultMessages from "plugins/default-messages"; -import propertyEditor from "plugins/property-editor"; - -export default [ - defaultConfigs, - defaultIcons, - defaultMessages, - baseEditor, - commands, - propertyEditor, - component, - // layerTree, - project, - threeHelpers, - menus, -]; diff --git a/src/apps/three-editor/plugins/three-helpers/ViewportHelper.jsx b/src/apps/three-editor/plugins/three-helpers/ViewportHelper.jsx deleted file mode 100644 index 0209a1406..000000000 --- a/src/apps/three-editor/plugins/three-helpers/ViewportHelper.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import { LOAD, DOMDIFF, SUBSCRIBE } from "sapa"; - -import "./ViewportHelper.scss"; - -import { EditorElement } from "elf/editor/ui/common/EditorElement"; - -export default class ViewportHelper extends EditorElement { - template() { - return
          ; - } - - [LOAD("$el") + DOMDIFF]() { - const scene = this.$editor.sceneManager.scene; - - let objects = 0, - vertices = 0, - triangles = 0; - - for (let i = 0, l = scene.children.length; i < l; i++) { - const object = scene.children[i]; - - object.traverseVisible(function (object) { - objects++; - - if (object.isMesh) { - const geometry = object.geometry; - - vertices += geometry.attributes.position.count; - - if (geometry.index !== null) { - triangles += geometry.index.count / 3; - } else { - triangles += geometry.attributes.position.count / 3; - } - } - }); - } - - return /*html*/ ` -
          - objects: ${objects}, - vertices: ${vertices}, - triangles: ${triangles} -
          - `; - } - - [SUBSCRIBE("objectAdded", "objectRemoved", "geometryChanged")]() { - this.refresh(); - } -} diff --git a/src/apps/three-editor/plugins/three-helpers/ViewportHelper.scss b/src/apps/three-editor/plugins/three-helpers/ViewportHelper.scss deleted file mode 100644 index b779a72bb..000000000 --- a/src/apps/three-editor/plugins/three-helpers/ViewportHelper.scss +++ /dev/null @@ -1,20 +0,0 @@ - -.elf--viewport-helper { - pointer-events:none; - position:absolute; - left:0px; - top:0px; - right:0px; - bottom:0px; - - .viewport-info { - position: absolute; - bottom: 10px; - left: 10px; - display: inline-block; - padding: 4px 10px; - background-color: rgba(255, 122, 0, 0.5); - color: white; - } -} - diff --git a/src/apps/three-editor/plugins/three-helpers/index.js b/src/apps/three-editor/plugins/three-helpers/index.js deleted file mode 100644 index 5ed72c6b7..000000000 --- a/src/apps/three-editor/plugins/three-helpers/index.js +++ /dev/null @@ -1,11 +0,0 @@ -// import ViewportHelper from "./ViewportHelper"; - -/** - * - * @param {Editor} editor - */ -export default function (editor) { - editor.registerUI("render.view", { - // ViewportHelper - }); -} diff --git a/src/apps/whiteboard/index.js b/src/apps/whiteboard/index.js deleted file mode 100644 index 6f7d91522..000000000 --- a/src/apps/whiteboard/index.js +++ /dev/null @@ -1,116 +0,0 @@ -import { - DRAGOVER, - DROP, - PREVENT, - SUBSCRIBE, - isFunction, - createComponent, -} from "sapa"; - -import { ClipboardManager } from "../designeditor/managers/ClipboardManager"; -import { HistoryManager } from "../designeditor/managers/HistoryManager"; -import { LockManager } from "../designeditor/managers/LockManager"; -import { ModelManager } from "../designeditor/managers/ModelManager"; -import { PathKitManager } from "../designeditor/managers/PathKitManager"; -import { SegmentSelectionManager } from "../designeditor/managers/SegmentSelectionManager"; -import { SelectionManager } from "../designeditor/managers/SelectionManager"; -import { SnapManager } from "../designeditor/managers/SnapManager"; -import { VisibleManager } from "../designeditor/managers/VisibleManager"; -import "./layout.scss"; -import whiteboardPlugins from "./plugins/whiteboard-plugins"; - -import { IconManager } from "apps/common/IconManager"; -import { KeyboardManager } from "apps/common/KeyboardManager"; -import { BaseLayout } from "apps/common/layout/BaseLayout"; -import { PopupManager } from "apps/common/PopupManager"; -import PreviewBodyPanel from "apps/common/PreviewBodyPanel"; - -/** - * whiteboard system - * - * todo - * - * 1. menu system - * 2. attribute property - * - */ -export class WhiteBoard extends BaseLayout { - initialize() { - super.initialize(); - - this.$context.pathkit.load(); - } - - getManagers() { - return { - snapManager: SnapManager, - selection: SelectionManager, - segmentSelection: SegmentSelectionManager, - history: HistoryManager, - modelManager: ModelManager, - lockManager: LockManager, - visibleManager: VisibleManager, - clipboard: ClipboardManager, - pathkit: PathKitManager, - }; - } - - components() { - return { - PreviewBodyPanel, - PopupManager, - KeyboardManager, - IconManager, - }; - } - - /** - * - * @protected - * @returns {function[]} - */ - getPlugins() { - return whiteboardPlugins; - } - - template() { - return /*html*/ ` -
          -
          -
          -
          - ${createComponent("PreviewBodyPanel")} -
          -
          - ${createComponent("KeyboardManager")} -
          - ${createComponent("PopupManager")} - ${createComponent("IconManager")} -
          - `; - } - - afterRender() { - super.afterRender(); - - this.$config.init("editor.layout.elements", this.refs); - - // load default data - this.$commands.emit("load.json", this.opt.data); - } - - /** 드랍존 설정을 위해서 남겨놔야함 */ - [DRAGOVER("$middle") + PREVENT]() {} - [DROP("$middle") + PREVENT]() {} - /** 드랍존 설정을 위해서 남겨놔야함 */ - - [SUBSCRIBE("toggle.fullscreen")]() { - this.$el.toggleFullscreen(); - } - - [SUBSCRIBE("getLayoutElement")](callback) { - if (isFunction(callback)) { - callback(this.refs); - } - } -} diff --git a/src/apps/whiteboard/layout.scss b/src/apps/whiteboard/layout.scss deleted file mode 100644 index cf79d0a11..000000000 --- a/src/apps/whiteboard/layout.scss +++ /dev/null @@ -1,33 +0,0 @@ -.whiteboard { - - .layout-main { - position: absolute; - left: 0px; - top: 0px; - right: 0px; - bottom: 0px; - background-color: var(--elf--header-background-color); - - .layout-middle { - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - box-sizing: border-box; - overflow: hidden; - background-color: var(--elf--background-color); - - .layout-body { - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - position: absolute; - // transition: bottom 0.05s linear - // border: 1px solid var(--elf--border-color); - // border-radius: 4px; - } - } - } -} diff --git a/src/apps/whiteboard/plugins/whiteboard-plugins.js b/src/apps/whiteboard/plugins/whiteboard-plugins.js deleted file mode 100644 index f42d7db46..000000000 --- a/src/apps/whiteboard/plugins/whiteboard-plugins.js +++ /dev/null @@ -1,121 +0,0 @@ -// import configs from "./configs"; - -import commands from "apps/designeditor/plugins/commands"; -import defaultItems from "apps/designeditor/plugins/default-items"; -import fillEditorView from "apps/designeditor/plugins/fill-editor-view"; -import gradient from "apps/designeditor/plugins/gradient"; -import gradientEditorView from "apps/designeditor/plugins/gradient-editor-view"; -import guideLineView from "apps/designeditor/plugins/guide-line-view"; -import history from "apps/designeditor/plugins/history"; -import hoverView from "apps/designeditor/plugins/hover-view"; -import layerAppendView from "apps/designeditor/plugins/layer-append-view"; -import pathDrawView from "apps/designeditor/plugins/path-draw-view"; -import pathEditorView from "apps/designeditor/plugins/path-editor-view"; -import rendererJson from "apps/designeditor/plugins/renderer-json"; -import sample from "apps/designeditor/plugins/sample"; -import selectionInfoView from "apps/designeditor/plugins/selection-info-view"; -import selectionToolView from "apps/designeditor/plugins/selection-tool-view"; -import baseEditor from "plugins/base-editor"; -import color from "plugins/color"; -import defaultConfigs from "plugins/default-configs"; -import defaultIcons from "plugins/default-icons"; -import defaultMessages from "plugins/default-messages"; -import propertyEditor from "plugins/property-editor"; - -export default [ - commands, - defaultConfigs, - defaultIcons, - defaultMessages, - defaultItems, - - // configs, - - rendererJson, - - // common editor - - baseEditor, - propertyEditor, - - color, - gradient, - sample, - // inspector.tab.style - - // depth, - // alignment, - // position, - // layout, - - // layout - // boxModel, - // pathTool, - // artboard, - - // text - // svgText, - // font, - // text, - // textShadow, - // content, - - // appearance, - // iframe, - // component, - // backgroundImage, - // patternAsset, - // border - // border, - // borderRadius, - - // resource - // video, - // image, - // transform, - // transformOrigin, - // perspective, - // perspectiveOrigin, - - // svgFilterAsset, - - // svgItem, - // layerTree, - // backgroundClip, - // borderImage, - - // filter, - // backdropFilter, - // boxShadow, - // clipPath, - // gradientAsset, - - // exportResource, - - // animation - // transition, - // keyframe, - // animation, - // selector, - - // codeview - // codeview, - - // history - history, - - // todo: timeline, - //timeline - // project, - - // canvas tool - selectionInfoView, - selectionToolView, - guideLineView, - layerAppendView, - hoverView, - pathDrawView, - pathEditorView, - gradientEditorView, - fillEditorView, -]; diff --git a/src/bootstraps/blank.jsx b/src/bootstraps/blank.jsx deleted file mode 100644 index 4efa9efee..000000000 --- a/src/bootstraps/blank.jsx +++ /dev/null @@ -1,189 +0,0 @@ -import { BIND, SUBSCRIBE } from "sapa"; - -import { createBlankEditor } from "apps"; - -import { iconUse } from "elf/editor/icon/icon"; -// eslint-disable-next-line no-unused-vars -import { Editor } from "elf/editor/manager/Editor"; -import { UPDATE_VIEWPORT } from "elf/editor/types/event"; -import { EditorElement } from "elf/editor/ui/common/EditorElement"; -import { ObjectProperty } from "elf/editor/ui/property/ObjectProperty"; -import { TreeProvider, TreeView } from "elf/editor/ui/view/TreeView"; - -function startEditor() { - const idList = ["app"]; - - return idList.map((id) => { - return createBlankEditor({ - container: document.getElementById(id), - config: { - "editor.theme": "light", - // 'editor.layout.mode': 'svg', - "show.left.panel": true, - "show.right.panel": true, - // 'show.ruler': false, - }, - plugins: [ - /** - * - * @param {Editor} editor - */ - function (editor) { - editor.registerUI("layertab.tab", { - Sample: { - title: "Sample", - icon: iconUse("add"), - value: "sample", - }, - }); - - editor.context.config.set("layertab.selectedValue", "sample"); - - editor.registerUI("layertab.tab.sample", { - TreeView: [ - TreeView, - { - provider: new (class extends TreeProvider { - async getRoot() { - return [ - { - title: "Root", - value: "root", - children: [{ title: "Child", value: "child" }], - }, - ]; - } - })(), - }, - ], - }); - - editor.registerUI("inspector.tab", { - Sample: { - title: "Sample", - value: "sample", - }, - }); - - editor.context.config.set("inspector.selectedValue", "sample"); - - editor.registerUI("layertab.tab.sample", { - SampleProperty: ObjectProperty.create({ - title: "Sample", - visible: true, - inspector: () => { - return ["SampleProperty"]; - }, - }), - }); - - editor.registerUI("inspector.tab.sample", { - SampleProperty: ObjectProperty.create({ - visible: true, - title: "Sample", - inspector: () => { - return ["SampleProperty"]; - }, - }), - }); - - editor.registerUI("canvas.view", { - Sample: class extends EditorElement { - template() { - return "
          fdsajfkdlsajfkdlsadfjksl
          "; - } - - [BIND("$el")]() { - const { - translate, - transformOrigin: origin, - scale, - } = this.$viewport; - - const transform = `translate(${translate[0]}px, ${ - translate[1] - }px) scale(${scale || 1})`; - const transformOrigin = `${origin[0]}px ${origin[1]}px`; - - return { - style: { - "transform-origin": transformOrigin, - transform, - }, - }; - } - - [SUBSCRIBE(UPDATE_VIEWPORT)]() { - this.bindData("$el"); - } - }, - }); - - editor.registerMenu("toolbar.center", [ - { - type: "button", - title: "Sample", - }, - ]); - - editor.registerMenu("toolbar.right", [ - { - type: "button", - title: "Sample", - }, - ]); - - // root menu - editor.registerMenu("toolbar.left", [ - { - type: "dropdown", - icon: `
          `, - items: [ - { - title: "menu.item.fullscreen.title", - command: "toggle.fullscreen", - shortcut: "ALT+/", - }, - ], - }, - { - type: "button", - title: "test button", - action: (editor, $menuItem) => { - console.log("test button", $menuItem); - }, - style: { - // 'background-color': 'purple' - }, - }, - { - type: "dropdown", - title: "file", - items: [ - { - title: "menu.item.fullscreen.title", - command: "toggle.fullscreen", - shortcut: "ALT+/", - }, - "-", - "a", - { - type: "divider", - }, - { - title: "menu.item.fullscreen.title", - action: () => { - window.alert("tool"); - }, - shortcut: "ALT+/", - }, - ], - }, - ]); - }, - ], - }); - }); -} - -window.elfEditor = startEditor(); diff --git a/src/bootstraps/dataeditor.jsx b/src/bootstraps/dataeditor.jsx deleted file mode 100644 index 79797ff61..000000000 --- a/src/bootstraps/dataeditor.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import { createDataEditor } from "apps"; - -function startEditor() { - const idList = ["app"]; - - return idList.map((id) => { - return createDataEditor({ - container: document.getElementById(id), - onChange: (editor, key, value) => { - console.log(editor.getValue(), key, value); - }, - inspector: [ - { - editor: "Button", - editorOptions: { - text: "Edit", - onClick: () => { - console.log("a"); - }, - }, - }, - { - type: "column", - size: [1, 1], - columns: [ - { - key: "column1", - editor: "color-view", - editorOptions: { - label: "Color", - }, - }, - ], - }, - { - type: "folder", - label: "folder test", - children: [ - { - key: "column1", - editor: "color-view", - editorOptions: { - label: "Color", - }, - }, - { - type: "column", - size: [1, 1], - columns: [ - { - key: "column1", - editor: "color-view", - editorOptions: { - label: "Color", - }, - }, - ], - }, - ], - }, - ], - config: { - "editor.theme": "light", - // 'editor.layout.mode': 'svg', - // 'show.left.panel': false, - // 'show.right.panel': false, - // 'show.ruler': false, - }, - plugins: [], - }); - }); -} - -window.EasylogicEditor = startEditor(); diff --git a/src/bootstraps/three-editor.jsx b/src/bootstraps/three-editor.jsx deleted file mode 100644 index 8fa7f0142..000000000 --- a/src/bootstraps/three-editor.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createThreeEditor } from "apps"; - -function startEditor() { - const idList = ["app"]; - - return idList.map((id) => { - return createThreeEditor({ - container: document.getElementById(id), - config: { - "editor.theme": "light", - // 'editor.layout.mode': 'svg', - // 'show.left.panel': false, - // 'show.right.panel': false, - // 'show.ruler': false, - }, - plugins: [], - }); - }); -} - -window.EasylogicEditor = startEditor(); diff --git a/src/bootstraps/whiteboard.jsx b/src/bootstraps/whiteboard.jsx deleted file mode 100644 index 748d3a2a3..000000000 --- a/src/bootstraps/whiteboard.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import { createWhiteBoard } from "apps"; - -function startEditor() { - const idList = ["app"]; - - return idList.map((id) => { - return createWhiteBoard({ - container: document.getElementById(id), - config: { - "debug.mode": true, - "editor.theme": "light", - // 'editor.layout.mode': 'svg', - // 'show.left.panel': false, - // 'show.right.panel': false, - "show.ruler": false, - }, - plugins: [], - }); - }); -} - -window.elfEditor = startEditor(); diff --git a/src/elf/editor/manager/commands/command_list/toggle.tool.hand.js b/src/elf/editor/manager/commands/command_list/toggle.tool.hand.js index 3eaf28ae4..9d51ad379 100644 --- a/src/elf/editor/manager/commands/command_list/toggle.tool.hand.js +++ b/src/elf/editor/manager/commands/command_list/toggle.tool.hand.js @@ -5,7 +5,7 @@ import { EditingMode } from "elf/editor/types/editor"; * @param {Editor} editor */ export default { - command: "toggleToolHand", + command: "toggleHandTool", execute: function (editor) { if (editor.context.config.is("editing.mode", EditingMode.HAND)) { editor.context.config.set("editing.mode", EditingMode.SELECT); diff --git a/src/elf/editor/model/BaseModel.js b/src/elf/editor/model/BaseModel.js index 79ea3ad02..86635ccf4 100644 --- a/src/elf/editor/model/BaseModel.js +++ b/src/elf/editor/model/BaseModel.js @@ -100,6 +100,14 @@ export class BaseModel { this.#collapsed = value; } + get visibility() { + return this.get("visibility"); + } + + set visibility(value) { + this.set("visibility", value); + } + renameWithCount() { let arr = this.#json.name.split(" "); @@ -535,6 +543,7 @@ export class BaseModel { itemType: "base", children: [], // 하위 객체를 저장한다. parentId: "", // 부모 객체의 id + visibility: "visible", ...obj, }; } diff --git a/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.js b/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.js index fe46b41dc..092b512f1 100644 --- a/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.js +++ b/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.js @@ -1,7 +1,7 @@ export default { category: "Tools", key: "h", - command: "toggleToolHand", + command: "toggleHandTool", description: "set hand tool on", when: "CanvasView", }; diff --git a/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.m.js b/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.m.js index 818959f7f..6ede5c4fc 100644 --- a/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.m.js +++ b/src/elf/editor/shortcuts/shortcuts_list/set.tool.hand.m.js @@ -1,7 +1,7 @@ export default { category: "Tools", key: "h", - command: "toggleToolHand", + command: "toggleHandTool", description: "set hand tool on", when: "LayerAppendView", }; diff --git a/src/elf/editor/ui/popup/BasePopup.scss b/src/elf/editor/ui/popup/BasePopup.scss index bf0d6517c..a697d5c21 100644 --- a/src/elf/editor/ui/popup/BasePopup.scss +++ b/src/elf/editor/ui/popup/BasePopup.scss @@ -18,10 +18,13 @@ .popup-title { font-size: 12px; font-weight: bold; - padding: 10px ; - padding-right: 0px; + padding: 8px ; display: flex; pointer-events: all; + height: 32px; + margin-top: 8px; + margin-right: 8px; + margin-left: 8px; // border-bottom: 1px solid var(--elf--border-color); > * { diff --git a/src/elf/editor/ui/property/BaseProperty.scss b/src/elf/editor/ui/property/BaseProperty.scss index e92ef6d71..c52a9dec4 100644 --- a/src/elf/editor/ui/property/BaseProperty.scss +++ b/src/elf/editor/ui/property/BaseProperty.scss @@ -50,7 +50,6 @@ } > .property-title { - padding: 0px 10px; cursor: pointer; position: relative; display: flex; @@ -58,7 +57,13 @@ align-items: center; cursor: pointer; color: var(--elf--font-color); - height: 30px; + height: 32px; + margin-top: 8px; + margin-left: 8px; + margin-right: 8px; + margin-bottom: 8px; + padding: 8px; + box-sizing: border-box; &.filter { grid-template-columns: 1fr 110px; @@ -107,18 +112,22 @@ } > .property-body { + display: none; - padding: 0px 10px; - padding-top: 0px; + margin-top: 0px; + margin-left: 8px; + margin-right: 8px; + margin-bottom: 0px; position: relative; - // background-color: var(--elf--property-background-color); - - &.no-padding { - padding: 0px !important; + box-sizing: border-box; + padding: 0px 8px 8px 8px; + + &:empty { + display: none; } .property-item { - padding:4px 0px; + // padding:4px 0px; &:first-child { padding-top: 0px; diff --git a/src/elf/editor/ui/property/index.js b/src/elf/editor/ui/property/index.js deleted file mode 100644 index c528b02ad..000000000 --- a/src/elf/editor/ui/property/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import VideoAssetsProperty from "./VideoAssetsProperty"; - -export default { - VideoAssetsProperty, -}; diff --git a/src/elf/ui/base/tab/Tabs.scss b/src/elf/ui/base/tab/Tabs.scss index c0154523e..9999fac9f 100644 --- a/src/elf/ui/base/tab/Tabs.scss +++ b/src/elf/ui/base/tab/Tabs.scss @@ -44,7 +44,7 @@ $tab-horizontal-header-right-width: 60px; // padding: 10px; box-sizing: border-box; overflow: visible; - background-color: var(--elf--header-background-color); + background-color: var(--elf--toolbar-background-color); text-align: center; > .tab-item { @@ -55,7 +55,7 @@ $tab-horizontal-header-right-width: 60px; width: 100%; height: 50px; position: relative; - background-color: var(--elf--header-background-color) !important; + background-color: var(--elf--toolbar-background-color) !important; border-bottom: 0px !important; border:0px; justify-content: center; diff --git a/src/elf/ui/base/toggle-button/ToggleButton.jsx b/src/elf/ui/base/toggle-button/ToggleButton.jsx index 472d3e160..65e06e790 100644 --- a/src/elf/ui/base/toggle-button/ToggleButton.jsx +++ b/src/elf/ui/base/toggle-button/ToggleButton.jsx @@ -18,6 +18,7 @@ export class ToggleButton extends BaseUI { return { checkedValue: this.props.checkedValue || this.props.value, checked: this.props.value || "false", + size: this.props.size, toggleLabels: this.props.toggleLabels || DEFAULT_LABELS, toggleTitles: this.props.toggleTitles || [], toggleValues: this.props.toggleValues || ["true", "false"], diff --git a/src/elf/ui/base/toggle-button/ToggleButton.scss b/src/elf/ui/base/toggle-button/ToggleButton.scss index e3076da42..11a360bbc 100644 --- a/src/elf/ui/base/toggle-button/ToggleButton.scss +++ b/src/elf/ui/base/toggle-button/ToggleButton.scss @@ -1,6 +1,6 @@ .elf--toggle-button { - width: var(--elf--input-height); - height: var(--elf--input-height); + width: 24px; + height: 24px; &.has-label { grid-template-columns: 70px 1fr; @@ -44,9 +44,9 @@ button { color: var(--elf--input-font-color); box-sizing: border-box; - padding: 2px 4px; - text-align: center; - vertical-align: middle; + display: flex; + align-items: center; + justify-content: center; width: 100%; height: 100%; z-index: 1; diff --git a/src/elf/ui/property-editor/ColorViewEditor.js b/src/elf/ui/property-editor/ColorViewEditor.js index 5099f51a3..a33ec6264 100644 --- a/src/elf/ui/property-editor/ColorViewEditor.js +++ b/src/elf/ui/property-editor/ColorViewEditor.js @@ -94,13 +94,10 @@ export default class ColorViewEditor extends EditorElement { } template() { - var { label, compact, mini } = this.state; - var hasLabel = label ? "has-label" : ""; - var hasCompact = compact ? "compact" : ""; - var hasMini = mini ? "mini" : ""; + var { label } = this.state; return /*html*/ ` -
          +
          ${label ? `` : ""}
          @@ -125,10 +122,19 @@ export default class ColorViewEditor extends EditorElement { } [BIND("$el")]() { + var { label, compact, mini, colorFocus, opacityFocus } = this.state; return { - class: { - focused: this.state.colorFocus || this.state.opacityFocus, - }, + class: [ + "elf--color-view-editor", + { + "has-label": label, + compact: compact, + mini: mini, + }, + { + focused: colorFocus || opacityFocus, + }, + ], }; } diff --git a/src/elf/ui/property-editor/FilterEditor.scss b/src/elf/ui/property-editor/FilterEditor.scss index 4df8e1690..a9a9f67fe 100644 --- a/src/elf/ui/property-editor/FilterEditor.scss +++ b/src/elf/ui/property-editor/FilterEditor.scss @@ -1,6 +1,4 @@ .elf--filter-editor { - padding: 2px 0px; - .label { height: 20px; margin-top: 2px; diff --git a/src/elf/ui/property-editor/SelectIconEditor.scss b/src/elf/ui/property-editor/SelectIconEditor.scss index 99959bae2..4028ac76a 100644 --- a/src/elf/ui/property-editor/SelectIconEditor.scss +++ b/src/elf/ui/property-editor/SelectIconEditor.scss @@ -1,6 +1,6 @@ .elf--select-icon-editor { border: 1px solid transparent; - height: var(--elf--input-height); + height: 24px; display: grid; &:hover { @@ -30,7 +30,7 @@ outline: none; line-height: 1; background-color: transparent; - height: var(--elf--input-height); + height: 100%; // border: 1px solid var(--elf--border-color); box-sizing: border-box; // padding: 2px; @@ -40,10 +40,9 @@ display:flex; > .select-icon-item { - flex: 1 1 10%; - text-align: center; - vertical-align: middle; - padding: 6px 2px; + flex: none; + width: 24px; + height: 24px; border-right: 0px; white-space: pre-wrap; word-break: break-all; @@ -55,8 +54,6 @@ display: flex; align-items: center; justify-content: center; - height: calc(100% - 2px); - min-width: var(--elf--input-height); box-sizing: border-box; &:last-child { @@ -68,9 +65,8 @@ } svg { - width: 20px; - height: 20px; - vertical-align: middle; + width: 24px; + height: 24px; } &.selected { diff --git a/src/engine/html/renderer/renderer-html/HTMLRenderer/DomRender.js b/src/engine/html/renderer/renderer-html/HTMLRenderer/DomRender.js index a0cf9229b..b002f580b 100644 --- a/src/engine/html/renderer/renderer-html/HTMLRenderer/DomRender.js +++ b/src/engine/html/renderer/renderer-html/HTMLRenderer/DomRender.js @@ -33,8 +33,6 @@ function valueFilter(obj) { return result; } -const EMPTY_OBJECT = {}; - export default class DomRender extends ItemRender { /** * @@ -50,18 +48,12 @@ export default class DomRender extends ItemRender { * @param {Item} item */ toBackgroundImageCSS(item) { - const cache = item.cacheBackgroundImage; - - if (!cache) { + if (!item.cacheBackgroundImage) { item.setBackgroundImageCache(); } - if (!cache) { - return EMPTY_OBJECT; - } - // visibility 속성은 출력하지 않는다. - return cache; + return item.cacheBackgroundImage; } /** diff --git a/src/export-library/index.js b/src/export-library/index.js index 949ada4a4..2ca662ad9 100644 --- a/src/export-library/index.js +++ b/src/export-library/index.js @@ -11,3 +11,5 @@ export * from "elf/editor/types/editor"; export * from "elf/editor/types/event"; export * from "elf/editor/types/model"; export * from "elf/editor/types/key"; +export * from "apps/designeditor/index"; +export * from "apps/blankeditor/index"; diff --git a/src/sapa/EventMachine.js b/src/sapa/EventMachine.js index 1e6269f5b..9f37f151c 100644 --- a/src/sapa/EventMachine.js +++ b/src/sapa/EventMachine.js @@ -246,6 +246,10 @@ export class EventMachine { return this.#state; } + get propKeys() { + return this.#propsKeys; + } + /** * render 를 할 수 있는지 체크한다. * @@ -855,9 +859,10 @@ export class EventMachine { * @returns */ getChildContent(filterCallback, defaultValue = "") { - return ( - this.props.contentChildren.find(filterCallback)?.props.content || - defaultValue - ); + return this.getChild(filterCallback)?.props.content || defaultValue; + } + + getChild(filterCallback) { + return this.props.contentChildren.find(filterCallback); } } diff --git a/src/sapa/functions/Dom.js b/src/sapa/functions/Dom.js index 12c2c179b..4b5714449 100644 --- a/src/sapa/functions/Dom.js +++ b/src/sapa/functions/Dom.js @@ -396,6 +396,8 @@ export class Dom { } append(el) { + if (!el) return this; + if (isArray(el)) { this.el.append(...el.map((it) => it.el || it)); } else if (typeof el === "string") { diff --git a/src/scss/designeditor.scss b/src/scss/designeditor.scss index 7be3e6983..70ca4f542 100644 --- a/src/scss/designeditor.scss +++ b/src/scss/designeditor.scss @@ -82,7 +82,7 @@ $range-thumb-border-radius: 20px; --elf--selected-border-color: #{$selected-border-color}; --elf--layout-border-color: #{$layout-border-color}; --elf--background-color: #{$background-color}; - --elf--header-background-color: #{$header-background-color}; + --elf--toolbar-background-color: #{$toolbar-background-color}; --elf--selected-background-color: #{$selected-background-color}; --elf--font-color: #{$font-color}; --elf--disabled-font-color: #{$disabled-font-color}; @@ -117,7 +117,7 @@ $range-thumb-border-radius: 20px; --elf--rotate-y-border-color: #{$rotate-y-border-color}; --elf--tooltip-background-color: #{$tooltip-background-color}; --elf--tooltip-font-color: #{$tooltip-font-color}; - --elf--tab-header-background-color: #{$tab-header-background-color}; + --elf--tab-toolbar-background-color: #{$tab-toolbar-background-color}; --elf--tab-font-color: #{$tab-font-color}; } @@ -141,7 +141,7 @@ $range-thumb-border-radius: 20px; --elf--selected-hover-color: #{$selected-hover-color}; --elf--selected-border-color: #{$selected-border-color}; --elf--background-color: #{$background-color}; - --elf--header-background-color: #{$header-background-color}; + --elf--toolbar-background-color: #{$toolbar-background-color}; --elf--selected-background-color: #{$selected-background-color}; --elf--font-color: #{$font-color}; --elf--disabled-font-color: #{$disabled-font-color}; @@ -176,7 +176,7 @@ $range-thumb-border-radius: 20px; --elf--rotate-y-border-color: #{$rotate-y-border-color}; --elf--tooltip-background-color: #{$tooltip-background-color}; --elf--tooltip-font-color: #{$tooltip-font-color}; - --elf--tab-header-background-color: #{$tab-header-background-color}; + --elf--tab-toolbar-background-color: #{$tab-toolbar-background-color}; --elf--tab-font-color: #{$tab-font-color}; } } diff --git a/src/scss/themes/designeditor/dark.scss b/src/scss/themes/designeditor/dark.scss index 127b0f4f1..5243b341a 100644 --- a/src/scss/themes/designeditor/dark.scss +++ b/src/scss/themes/designeditor/dark.scss @@ -9,7 +9,7 @@ $selected-hover-color: $oc-blue-3; $selection-tool-border-color: #3a89f0; $background-color: $oc-gray-8; -$header-background-color: $oc-gray-9; +$toolbar-background-color: $oc-gray-9; $selected-background-color: #535353; $font-color: $oc-gray-0; $disabled-font-color: $oc-gray-2; @@ -35,7 +35,7 @@ $divider-color: rgb(97, 97, 97); // tab $tab-background-color: $background-color; -$tab-header-background-color: $oc-gray-9; +$tab-toolbar-background-color: $oc-gray-9; $tab-header-font-color: $font-color; $tab-font-color: #949494; $tab-selected-color: white; diff --git a/src/scss/themes/designeditor/light.scss b/src/scss/themes/designeditor/light.scss index 0402f0904..eb45a3910 100644 --- a/src/scss/themes/designeditor/light.scss +++ b/src/scss/themes/designeditor/light.scss @@ -12,7 +12,7 @@ $selected-hover-color: $oc-blue-1; $selection-tool-border-color: #3a89f0; $background-color: white; -$header-background-color: $oc-gray-9; +$toolbar-background-color: #2C2C2C; $selected-background-color: #d8d8d8; $font-color: rgb(51, 51, 51); $disabled-font-color: #c1c1c1; @@ -46,7 +46,7 @@ $input-font-size: 11px; // tab $tab-background-color: $background-color; -$tab-header-background-color: #f6fafc; +$tab-toolbar-background-color: #f6fafc; $tab-header-font-color: $font-color; $tab-font-color: #adadad; $tab-selected-color: white; diff --git a/vite.prod.config.js b/vite.prod.config.js index c60b659a7..d88187d62 100644 --- a/vite.prod.config.js +++ b/vite.prod.config.js @@ -28,10 +28,6 @@ export default defineConfig({ rollupOptions: { input: { editor: path.resolve(__dirname, "index.html"), - whiteboard: path.resolve(__dirname, "whiteboard.html"), - dataeditor: path.resolve(__dirname, "dataeditor.html"), - threeeditor: path.resolve(__dirname, "3d.html"), - blankeditor: path.resolve(__dirname, "blank.html"), }, }, }, diff --git a/whiteboard.html b/whiteboard.html deleted file mode 100644 index d5f58f895..000000000 --- a/whiteboard.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - Fantastic Web Design Tool - - - - - - - -
          - - -